/* Sketchbook shell. All existing media boxes, artwork pixels and ad slots keep
   their geometry. No filters, transforms or overlays on content containers. */
.sau-sketch-pencil[hidden] { display: none; }
.sau-sketch-pencil {
  flex: 0 0 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  touch-action: manipulation;
}
.sau-sketch-pencil:hover { background: rgb(128 128 128 / .1); }
.sau-sketch-pencil:focus-visible,
.sau-sketch-return:focus-visible { outline: 3px solid #2458e8; outline-offset: 3px; }
.sau-sketch-return { display: none; }
.sau-sketch-greeting:empty { display: none; }
.sau-sketch-greeting {
  color: inherit;
  font-size: .8rem;
  font-style: italic;
  line-height: 1.35;
}

html[data-sau-sketch="on"] {
  --sk-paper: #f7f1e3;
  --sk-leaf: #fffaf0;
  --sk-ink: #34352f;
  --sk-soft: #646255;
  --sk-line: #9b9481;
  --sk-blue: #345d73;
  --sk-rule: url("sketch-rule.svg");
  --sk-hand: "Segoe Print", "Bradley Hand", "Chalkboard SE", "Comic Sans MS", cursive;
}
html[data-sau-sketch="on"] body.sau-living-gallery {
  --sau-page: var(--sk-paper);
  --sau-surface: var(--sk-leaf);
  --sau-surface-soft: #eee7d6;
  --sau-ink: var(--sk-ink);
  --sau-ink-soft: #45463e;
  --sau-muted: var(--sk-soft);
  --sau-border: #c1b9a5;
  --sau-border-strong: #817d6f;
  --sau-mode-accent: var(--sk-blue);
  --bg: var(--sk-paper);
  --card: var(--sk-leaf);
  --text: var(--sk-ink);
  --muted: var(--sk-soft);
  --line: #c1b9a5;
  --accent: var(--sk-blue);
  color-scheme: light;
  color: var(--sk-ink);
  background-color: var(--sk-paper);
  /* Paper grain is painted behind the page; it is never placed over artwork. */
  background-image: radial-gradient(#85765012 .6px, transparent .8px);
  background-size: 5px 7px;
}

/* The return control shares the existing navigation row. Making that same
   header sticky adds no spacer, no extra row and no fixed bottom ad collision. */
html[data-sau-sketch="on"] body.sau-living-gallery .site-header.site-header--balanced {
  position: sticky;
  top: 0;
  z-index: 190;
  color: var(--sk-ink);
  background: var(--sk-leaf);
  border-bottom-color: #817d6f;
  box-shadow: 0 3px 0 var(--sk-paper), 0 4px 0 #a6a08d;
}
html[data-sau-sketch="on"] body.admin-bar .site-header.site-header--balanced { top: 32px; }
html[data-sau-sketch="on"] body.sau-living-gallery .sau-sketch-return {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  gap: .35rem;
  min-height: 44px;
  margin-left: .4rem;
  padding: .3rem .6rem;
  border: 1px solid var(--sk-ink);
  border-radius: 3px 11px 4px 8px / 8px 3px 9px 4px;
  box-shadow: inset 0 0 0 2px var(--sk-leaf), inset 0 0 0 3px #b5ae99;
  background: var(--sk-leaf);
  color: var(--sk-ink);
  font: inherit;
  font-size: .75rem;
  font-weight: 750;
  line-height: 1.15;
  cursor: pointer;
  touch-action: manipulation;
}
html[data-sau-sketch="on"] body.sau-living-gallery .sau-sketch-return:hover { background: #efe4cc; }
html[data-sau-sketch="on"] body.sau-living-gallery .site-header--balanced :is(.brand, .primary-nav__link) { color: var(--sk-ink); }
html[data-sau-sketch="on"] body.sau-living-gallery .brand-text { position: relative; }
html[data-sau-sketch="on"] body.sau-living-gallery .brand-text::after {
  content: "";
  display: block;
  position: absolute;
  inset: auto -3px -8px;
  height: 5px;
  background: var(--sk-rule) center / 100% 100% no-repeat;
  pointer-events: none;
}
html[data-sau-sketch="on"] body.sau-living-gallery .primary-nav__link::after {
  height: 4px;
  border-radius: 0;
  background: var(--sk-rule) center / 100% 100% no-repeat;
  opacity: .65;
  transform: none;
  pointer-events: none;
}
html[data-sau-sketch="on"] body.sau-living-gallery .site-header--balanced :is(.search-field, .header-search-toggle, .sau-theme-toggle) {
  border-color: var(--sk-line);
  border-radius: 6px 13px 5px 11px / 10px 5px 12px 6px;
  background: var(--sk-paper);
  color: var(--sk-ink);
}
html[data-sau-sketch="on"] body.sau-living-gallery .site-header--balanced .search-submit { color: var(--sk-ink); background: transparent; }
html[data-sau-sketch="on"] body.sau-living-gallery .site-header--balanced .search-field::placeholder { color: var(--sk-soft); }

/* Wide-screen notes live entirely in the website margin, outside the art lane. */
@media (min-width: 1120px) {
  html[data-sau-sketch="on"] body.sau-living-gallery {
    background-image: linear-gradient(90deg, transparent calc(50% - 370px), #bc796a40 calc(50% - 370px), #bc796a40 calc(50% - 369px), transparent calc(50% - 369px)), radial-gradient(#85765012 .6px, transparent .8px);
    background-size: auto, 5px 7px;
  }
  html[data-sau-sketch="on"] body.sau-living-gallery .header-row::after {
    content: "Need a better sign here.";
    position: absolute;
    top: calc(100% + 36px);
    right: 0;
    width: 134px;
    padding: 0 0 26px 5px;
    color: var(--sk-soft);
    background: url("sketch-arrow.svg") left bottom / 66px 24px no-repeat;
    font: italic 15px/1.45 var(--sk-hand);
    transform: rotate(-5deg);
    pointer-events: none;
  }
}

/* Cards keep their media radius, cropping, dimensions and original padding.
   The drawn line belongs to the text area underneath each photo. */
html[data-sau-sketch="on"] body.sau-living-gallery .post-grid .card { position: relative; background: transparent; }
html[data-sau-sketch="on"] body.sau-living-gallery .post-grid .card::before {
  content: "";
  position: absolute;
  top: 2px;
  bottom: 0;
  left: -7px;
  width: 3px;
  border-left: 1px solid #969080;
  border-radius: 60% 0 0 35%;
  opacity: .65;
  pointer-events: none;
}
html[data-sau-sketch="on"] body.sau-living-gallery .card-body { position: relative; }
html[data-sau-sketch="on"] body.sau-living-gallery .card-body::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 0;
  right: 0;
  height: 5px;
  background: var(--sk-rule) center / 100% 100% no-repeat;
  opacity: .55;
  pointer-events: none;
}
html[data-sau-sketch="on"] body.sau-living-gallery :is(.card h2, .single h1, .single-content h2, .single-content h3, .sau-home-intro h1, .feed-header h1) { color: var(--sk-ink); }
html[data-sau-sketch="on"] body.sau-living-gallery :is(.card p, .card-kicker, .single-meta, .social-proof) { color: var(--sk-soft); }
html[data-sau-sketch="on"] body.sau-living-gallery .sau-home-intro h1 {
  text-decoration: underline;
  text-decoration-style: wavy;
  text-decoration-color: #a8a08a;
  text-decoration-thickness: 1px;
  text-underline-offset: 7px;
}
html[data-sau-sketch="on"] body.sau-living-gallery :is(.single-content > hr, .sau-artwork-context > hr) {
  border-color: transparent;
  background: var(--sk-rule) center / 100% 100% no-repeat;
}
html[data-sau-sketch="on"] body.sau-living-gallery :is(.author-chip, .social-proof, .share-row, .comment, .img-comments-preview, .sau-inline-favorites, .sau-next-walls, .sau-after-comments__card, .sau-theme-exploration__card, .related-card) {
  border-color: var(--sk-line);
  background-color: var(--sk-leaf);
  color: var(--sk-ink);
  box-shadow: 1px 2px 0 #6a614b24;
}
/* Scope rough corners to controls/text surfaces, never to photo-clipping boxes. */
html[data-sau-sketch="on"] body.sau-living-gallery :is(.share-row, .img-like-actions, .comment, .img-comments-preview, .sau-inline-favorites, .subscribe-custom) {
  border-radius: 4px 10px 5px 9px / 9px 4px 10px 5px;
}
html[data-sau-sketch="on"] body.sau-living-gallery :is(.img-like-row.sau-artwork-tray, .img-like-row.sau-artwork-tray .img-like-actions, .img-comments-box, .img-comments-box.is-sheet .img-sheet-header, .img-comment-item) {
  background-color: var(--sk-leaf);
  color: var(--sk-ink);
  border-color: var(--sk-line);
}
html[data-sau-sketch="on"] body.sau-living-gallery :is(.img-like-btn, .img-comment-link, .img-share-btn, .artwork-details__toggle, .pagination a, .sau-theme-exploration__more, .sau-theme-exploration__archive, .sau-after-comments__actions a, .footer-favorites, .copy-link) {
  border-color: var(--sk-line);
  background-color: var(--sk-leaf);
  color: var(--sk-ink);
  border-radius: 5px 10px 4px 8px / 8px 4px 9px 5px;
}
html[data-sau-sketch="on"] body.sau-living-gallery .img-like-row.sau-artwork-tray :is(.img-like-btn, .img-comment-link, .img-share-btn) {
  border-color: var(--sk-line);
  background-color: var(--sk-leaf);
  color: var(--sk-ink);
}
html[data-sau-sketch="on"] body.sau-living-gallery .img-like-row.sau-artwork-tray .img-like-btn.is-liked { background: #f5dfd9; color: #95362e; }
html[data-sau-sketch="on"] body.sau-living-gallery .subscribe-custom {
  border-color: var(--sk-line);
  background: #eee4ce;
  box-shadow: 2px 3px 0 #7b705830;
}
html[data-sau-sketch="on"] body.sau-living-gallery :is(.single-content a, .img-comment-preview-cta, .img-sheet-close) { color: var(--sk-blue); }

/* Footer is the back cover: tape, pencil ruling, a small maker's note. */
html[data-sau-sketch="on"] body.sau-living-gallery .site-footer {
  border-top-color: var(--sk-line);
  background: #eee5cf;
  color: var(--sk-ink);
  box-shadow: 0 -3px 0 var(--sk-paper), 0 -4px 0 #b3a991;
}
html[data-sau-sketch="on"] body.sau-living-gallery .footer-main { border-bottom-color: var(--sk-line); border-bottom-style: dashed; }
html[data-sau-sketch="on"] body.sau-living-gallery .footer-brand { position: relative; color: var(--sk-ink); }
html[data-sau-sketch="on"] body.sau-living-gallery .footer-brand::before {
  content: "";
  position: absolute;
  top: -22px;
  left: 16px;
  width: 60px;
  height: 14px;
  background: repeating-linear-gradient(90deg, #d4b96a70 0 3px, #dbc68170 3px 6px);
  border-inline: 1px dashed #b59a55;
  transform: rotate(-6deg);
  pointer-events: none;
}
html[data-sau-sketch="on"] body.sau-living-gallery .footer-brand::after {
  content: "Leave room for more art.";
  position: absolute;
  top: calc(100% - 1px);
  left: 1px;
  width: 205px;
  font: italic 13px/1.25 var(--sk-hand);
  color: var(--sk-soft);
  pointer-events: none;
}
html[data-sau-sketch="on"] body.sau-living-gallery :is(.footer-links a, .footer-privacy, .footer-favorites, .footer-copy) { color: var(--sk-ink); }
html[data-sau-sketch="on"] body.sau-living-gallery .footer-links a { border-color: var(--sk-line); border-radius: 5px 10px 4px 8px; }

@media (min-width: 701px) and (max-width: 1000px) {
  html[data-sau-sketch="on"] body.sau-living-gallery .site-header--balanced .header-row { grid-template-columns: auto auto minmax(100px, 1fr); gap: .6rem; }
}
@media (max-width: 700px) {
  html[data-sau-sketch="on"] body.sau-living-gallery .sau-sketch-return { min-height: 38px; margin: 0 0 0 auto; font-size: .72rem; }
  html[data-sau-sketch="on"] body.sau-living-gallery .site-header--balanced .primary-nav { border-top: 1px dashed #b8ae97; }
  html[data-sau-sketch="on"] body.sau-living-gallery .footer-links a { background: var(--sk-leaf); }
  html[data-sau-sketch="on"] body.sau-living-gallery .footer-brand::after { top: calc(100% - 4px); font-size: 12px; }
}
@media (max-width: 782px) {
  html[data-sau-sketch="on"] body.admin-bar .site-header.site-header--balanced { top: 46px; }
}
@media (max-width: 600px) {
  html[data-sau-sketch="on"] body.admin-bar .site-header.site-header--balanced { top: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .sau-sketch-pencil { transition: background-color 120ms ease; }
}
@media (forced-colors: active) {
  .sau-sketch-pencil, html[data-sau-sketch="on"] body.sau-living-gallery .sau-sketch-return { border: 1px solid ButtonText; }
}
@media print {
  .sau-sketch-pencil, .sau-sketch-return, .sau-sketch-greeting { display: none !important; }
  html[data-sau-sketch="on"] body.sau-living-gallery .site-header.site-header--balanced { position: static; }
}
