/* ============================================================
   LADY OF SORROWS — design tokens
   ============================================================ */

:root{
  --ink:      #1B1917;
  --paper:    #F3F1EB;
  --paper-v:  #E6E3DA;
  --halftone: #8F8877;
  --stamp:    #B3312C;
  --cover-red: #7F0000;
  --spine:    #2F4858;
  --accent2:  #2FB6C4;

  --flash-yellow:  #D9A441;
  --flash-cyan:    #7A1414;
  --flash-magenta: #171414;

  --serif:  'Shippori Mincho', serif;
  --sans:   'Zen Kaku Gothic New', sans-serif;
  --mono:   'Space Mono', monospace;
}

*{ box-sizing:border-box; }

button{ -webkit-appearance:none; appearance:none; font:inherit; }

html,body{ height:100%; margin:0; }

body{
  background-color: #100f0e;
  background-image:
    radial-gradient(ellipse 900px 700px at 50% 38%, rgba(127,0,0,0.22) 0%, rgba(127,0,0,0.08) 35%, rgba(16,15,14,0) 62%),
    radial-gradient(rgba(231,225,211,0.055) 1px, transparent 1px);
  background-size: 100% 100%, 15px 15px;
  background-position: 0 0, 0 0;
  background-attachment: fixed, fixed;
  color:var(--ink);
  font-family:var(--sans);
  overflow-x:hidden;
  margin:0;
}

.shell{
  width:100%;
  max-width:1100px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:36px;
  padding:24px 16px;
}

.hero{
  width:100%;
  min-height:calc(100vh - 48px);
  min-height:calc(100svh - 48px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:18px;
}

.deskmark{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  color:#EDE7DA;
  text-align:center;
  width:100%;
}
.deskmark__logo{
  height:clamp(160px,26vw,360px);
  width:auto;
  display:block;
}
.deskmark__sub{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.08em;
  color:#8b8477;
  text-transform:uppercase;
}

.stage{
  position:relative;
  width:100%;
  max-width:920px;
  aspect-ratio:920/620;
  perspective:2600px;
}

.binding{
  position:absolute;
  left:50%;
  top:2%;
  bottom:2%;
  width:14px;
  transform:translateX(-50%);
  background:linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 45%, rgba(0,0,0,0.35) 55%, rgba(0,0,0,0) 100%);
  z-index:5;
  pointer-events:none;
}
.binding::before,
.binding::after{
  content:'';
  position:absolute;
  left:50%;
  width:2px;
  height:100%;
  background:repeating-linear-gradient(180deg, var(--spine) 0 10px, transparent 10px 22px);
  opacity:0.55;
}
.binding::before{ transform:translateX(-6px); }
.binding::after{ transform:translateX(4px); }

.book{ position:absolute; inset:0; transform-style:preserve-3d; }

.page{
  position:absolute;
  top:0;
  width:50%;
  height:100%;
  transform-style:preserve-3d;
  transition:transform 0.95s cubic-bezier(.61,.13,.29,.99);
  cursor:pointer;
}

.page{ right:0; transform-origin:left center; }
.page.flipped{ transform:rotateY(-180deg); }

.page__face{
  position:absolute;
  inset:0;
  backface-visibility:hidden;
  overflow:hidden;
  background:var(--paper);
  box-shadow:
    inset 0 0 0 1px rgba(27,25,23,0.08),
    0 2px 18px rgba(0,0,0,0.28);
  display:flex;
  flex-direction:column;
}
.page__face--back{
  transform:rotateY(180deg);
  background:var(--paper-v);
}

.page__face::before{ content:''; position:absolute; inset:0; pointer-events:none; }

.page__face::after{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg, rgba(0,0,0,0.14), transparent 18%);
}
.page__face--back::after{
  background:linear-gradient(270deg, rgba(0,0,0,0.14), transparent 18%);
}

.page__corner{
  position:absolute;
  bottom:0;
  right:0;
  width:34px;
  height:34px;
  background:linear-gradient(135deg, transparent 50%, rgba(27,25,23,0.16) 51%);
  pointer-events:none;
  opacity:0;
  transition:opacity .25s ease;
}
.page:not(.flipped):hover .page__corner{ opacity:1; }

.book__base{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(27,25,23,0.02), rgba(27,25,23,0.08)), var(--ink);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,0.35), 0 2px 18px rgba(0,0,0,0.28);
}
.book__base::before{ content:''; position:absolute; inset:0; }

.leaf{
  position:relative;
  height:100%;
  display:flex;
  flex-direction:column;
  padding:26px 28px 20px;
}

.leaf--cover{
  position:relative;
  padding:0;
  background:var(--cover-red);
  color:var(--paper);
  justify-content:flex-end;
  overflow:hidden;
}
.cover-title-bg{
  position:absolute;
  inset:0;
  z-index:0;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  text-align:center;
  padding:60px 10px 0;
  pointer-events:none;
  overflow:hidden;
  white-space:nowrap;
  font-family:var(--serif);
  font-weight:900;
  -webkit-text-stroke:1.5px var(--ink);
  text-transform:uppercase;
  letter-spacing:0.01em;
  color:var(--ink);
  font-size:clamp(24px,7vw,46px);
  text-shadow:4px 4px 0 rgba(0,0,0,0.22);
}
.cover-art{ position:absolute; inset:0; z-index:1; }
.cover-art svg,
.cover-art img{ width:100%; height:100%; object-fit:cover; display:block; }

.cover-kanji-bg{
  position:absolute;
  inset:0;
  z-index:0;
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
  padding:14px 0 14px 10px;
  writing-mode:vertical-rl;
  text-orientation:upright;
  font-family:var(--serif);
  font-weight:800;
  font-size:clamp(30px,8vw,58px);
  line-height:0.86;
  letter-spacing:0.06em;
  color:rgba(244,240,230,0.16);
  -webkit-text-stroke:1px rgba(244,240,230,0.22);
  pointer-events:none;
  overflow:hidden;
}
.cover-scrim{
  position:absolute;
  inset:0;
  z-index:2;
  background:
    linear-gradient(180deg, rgba(10,9,8,0.5) 0%, rgba(10,9,8,0.02) 26%, rgba(10,9,8,0.08) 55%, rgba(10,9,8,0.82) 100%);
}

.cover-masthead{ position:relative; z-index:3; padding:6px 18px 0; }
.cover-kicker{
  display:inline-block;
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--flash-yellow);
  text-shadow:0 2px 10px rgba(0,0,0,0.6);
}
.cover-volnum{
  position:absolute;
  top:118px;
  right:16px;
  font-family:var(--serif);
  font-weight:800;
  font-size:26px;
  line-height:1.05;
  text-align:center;
  color:var(--accent2);
  transform:rotate(-4deg);
}

.cover-blurbs{
  position:relative;
  z-index:3;
  margin-top:auto;
  padding:0 24px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:flex-end;
}
.cover-blurb{
  font-family:var(--sans);
  font-weight:900;
  font-size:11.5px;
  letter-spacing:0.03em;
  color:var(--ink);
  padding:6px 12px;
  border-radius:3px;
  transform:rotate(-3deg);
  box-shadow:0 3px 10px rgba(0,0,0,0.35);
}
.cover-blurb:nth-child(2){ transform:rotate(2deg); }
.cover-blurb:nth-child(3){ transform:rotate(-1.5deg); }
.cover-blurb--yellow{ background:var(--flash-yellow); }
.cover-blurb--cyan{ background:var(--flash-cyan); color:var(--paper); box-shadow:0 0 0 1px rgba(231,225,211,0.25), 0 3px 10px rgba(0,0,0,0.35); }
.cover-blurb--magenta{ background:var(--flash-magenta); color:var(--paper); box-shadow:0 0 0 1px rgba(231,225,211,0.25), 0 3px 10px rgba(0,0,0,0.35); }

.cover-foot{
  position:relative;
  z-index:3;
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:14px 24px 20px;
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:0.06em;
  color:#d8d2c3;
}
.cover-featured{ text-transform:uppercase; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.leaf--toc .toc-head{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--halftone);
  border-bottom:1px solid rgba(27,25,23,0.18);
  padding-bottom:10px;
  margin-bottom:6px;
}
.toc-byline{
  margin:0 0 14px;
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:0.04em;
  color:var(--stamp);
}
.toc-list{ list-style:none; margin:0; padding:0; flex:1; display:flex; flex-direction:column; }
.toc-list li{
  display:flex;
  align-items:baseline;
  gap:10px;
  padding:9px 0;
  border-bottom:1px dotted rgba(27,25,23,0.22);
  font-size:13px;
}
.toc-list li[data-goto]{ cursor:pointer; transition:opacity .15s ease; }
.toc-list li[data-goto]:hover .toc-name,
.toc-list li[data-goto]:hover .toc-num{ text-decoration:underline; text-underline-offset:3px; }
.toc-list li[data-goto]:hover{ opacity:0.72; }
.toc-list .toc-num{ font-family:var(--mono); color:var(--stamp); font-weight:700; font-size:12px; width:22px; }
.toc-list .toc-name{ font-family:var(--serif); font-weight:700; flex:1; }
.toc-list .toc-med{ font-family:var(--mono); font-size:10.5px; color:var(--halftone); text-transform:uppercase; }

.leaf--plate{ padding:20px 20px 16px; }
.plate-frame{ position:relative; flex:1; border:1px solid rgba(27,25,23,0.5); padding:6px; display:flex; }
.plate-art{ flex:1; width:100%; height:100%; object-fit:cover; display:block; filter:grayscale(0.08) contrast(1.03); }
.plate-caption{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  padding-top:10px;
  font-family:var(--mono);
  font-size:10.5px;
  color:var(--halftone);
  letter-spacing:0.03em;
  text-transform:uppercase;
}
.plate-caption .plate-title{ font-family:var(--serif); font-weight:700; font-size:15px; color:var(--ink); text-transform:none; letter-spacing:0; }

.leaf--notes{ justify-content:space-between; }
.notes-eyebrow{ font-family:var(--mono); font-size:10.5px; letter-spacing:0.14em; color:var(--stamp); text-transform:uppercase; }
.notes-title{ font-family:var(--serif); font-weight:700; font-size:clamp(20px,2.6vw,26px); margin:8px 0 12px; }
.notes-body{ font-size:12.5px; line-height:1.6; color:#3a3733; max-width:34ch; }
.notes-body--jp{ font-size:10.5px; line-height:1.55; color:var(--halftone); max-width:34ch; margin-top:8px; font-family:var(--sans); }
.notes-meta{
  display:flex;
  gap:18px;
  font-family:var(--mono);
  font-size:10.5px;
  color:var(--halftone);
  text-transform:uppercase;
  border-top:1px dotted rgba(27,25,23,0.22);
  padding-top:10px;
  margin-top:12px;
}

.leaf--colophon{
  background:linear-gradient(180deg, rgba(27,25,23,0.02), rgba(27,25,23,0.08)), var(--ink);
  color:var(--paper);
  justify-content:center;
  align-items:center;
  text-align:center;
  gap:14px;
}
.leaf--colophon .colophon-mark{ font-family:var(--serif); font-weight:800; font-size:22px; letter-spacing:0.1em; }
.leaf--colophon .colophon-byline{ font-family:var(--sans); font-weight:700; font-size:13px; letter-spacing:0.03em; color:var(--paper); line-height:1.6; max-width:none; }
.leaf--colophon .colophon-byline span{ font-family:var(--mono); font-weight:400; font-size:11px; color:#a79f8d; }
.leaf--colophon p{ font-family:var(--mono); font-size:11px; color:#a79f8d; max-width:30ch; line-height:1.7; }
.leaf--colophon a{ color:var(--stamp); }

.page-num{ position:absolute; bottom:14px; font-family:var(--mono); font-size:10px; color:var(--halftone); }
.page__face--front .page-num{ right:20px; }
.page__face--back  .page-num{ left:20px; }

.hanko{
  position:absolute;
  bottom:8px;
  right:18px;
  width:38px;
  height:38px;
  opacity:0;
  transform:scale(1.4) rotate(-8deg);
  transition:opacity .35s ease .55s, transform .35s ease .55s;
  pointer-events:none;
}
.page.flipped .hanko{ opacity:0.92; transform:scale(1) rotate(-8deg); }
.page__face--back .hanko{ right:auto; left:18px; }

.controls{ display:flex; align-items:center; gap:22px; }
.controls__btn{
  display:flex;
  align-items:center;
  gap:8px;
  background:transparent;
  border:1px solid rgba(231,225,211,0.35);
  color:#EDE7DA;
  font-family:var(--sans);
  font-weight:700;
  font-size:12px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  padding:10px 18px;
  border-radius:999px;
  cursor:pointer;
  transition:border-color .2s ease, color .2s ease, transform .2s ease;
}
.controls__btn:hover:not(:disabled){ border-color:var(--stamp); color:#fff; }
.controls__btn:active:not(:disabled){ transform:scale(0.96); }
.controls__btn:disabled{ opacity:0.28; cursor:default; }
.controls__btn:focus-visible{ outline:2px solid var(--spine); outline-offset:3px; }

.controls__status{ font-family:var(--mono); font-size:13px; color:#8b8477; letter-spacing:0.06em; min-width:64px; text-align:center; }
.controls__index{ color:#EDE7DA; }

.hint{ font-family:var(--mono); font-size:10.5px; color:#6b6559; letter-spacing:0.05em; text-align:center; }

.hint-row{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px; }
.hint-sep{ font-family:var(--mono); font-size:10.5px; color:#524d43; }
.hint--desc{ color:#8b8477; }

.commission-btn{
  font-family:var(--mono);
  font-size:11px;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--stamp);
  background:transparent;
  border:1.5px solid var(--stamp);
  border-radius:999px;
  padding:9px 22px;
  cursor:pointer;
  box-shadow:0 0 14px rgba(179,49,44,0.55), 0 0 3px rgba(179,49,44,0.85);
  transition:background .2s ease, color .2s ease, box-shadow .2s ease;
}
.commission-btn:hover,
.commission-btn:focus-visible{
  background:var(--stamp);
  color:#F3F1EB;
  box-shadow:0 0 24px rgba(179,49,44,0.9), 0 0 6px rgba(179,49,44,1);
  outline:none;
}

.new-badge{
  position:absolute;
  top:10px;
  right:10px;
  z-index:3;
  background:var(--accent2);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:900;
  font-size:10.5px;
  letter-spacing:0.08em;
  padding:4px 10px;
  border-radius:2px;
  transform:rotate(-4deg);
  box-shadow:0 3px 10px rgba(0,0,0,0.35), 0 0 0 1.5px var(--ink);
}

.commission-status{
  display:inline-block;
  margin-top:14px;
  font-family:var(--mono);
  font-weight:700;
  font-size:11px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--ink);
  background:var(--accent2);
  padding:5px 11px;
  border-radius:2px;
}
.notes-body--contact{ margin-top:12px; max-width:32ch; }
.social-row{ display:flex; gap:12px; margin-top:16px; }
.social-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  border-radius:50%;
  border:1.5px solid var(--ink);
  color:var(--ink);
  transition:background .2s ease, color .2s ease, transform .2s ease;
}
.social-icon:hover{ background:var(--stamp); border-color:var(--stamp); color:var(--paper); transform:translateY(-2px); }

/* ------------------------------------------------------------
   SHOP TAB — small fixed pull-tab in the top-left corner. Just
   scrolls down to the Shop section (see below) when clicked.
   ------------------------------------------------------------ */
.shop-tab{
  position:fixed;
  top:22px;
  left:0;
  z-index:1100;
  background:var(--stamp);
  color:#F3F1EB;
  border:none;
  border-radius:0 8px 8px 0;
  padding:11px 16px 11px 12px;
  font-family:var(--sans);
  font-weight:900;
  font-size:12px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  cursor:pointer;
  box-shadow:2px 4px 14px rgba(0,0,0,0.4);
  transition:padding-left .2s ease, background .2s ease;
}
.shop-tab:hover,
.shop-tab:focus-visible{
  padding-left:18px;
  background:#8f2621;
  outline:none;
}

/* -- "Place Order Now" / "Visit Full Ko-fi Shop" primary CTA -- */
.place-order-btn{
  display:block;
  width:fit-content;
  margin:26px auto 0;
  background:var(--stamp);
  color:#F3F1EB;
  font-family:var(--sans);
  font-weight:900;
  font-size:14px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  text-decoration:none;
  padding:14px 34px;
  border-radius:999px;
  box-shadow:0 0 20px rgba(179,49,44,0.6), 0 4px 16px rgba(0,0,0,0.4);
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.place-order-btn:hover,
.place-order-btn:focus-visible{
  background:#8f2621;
  transform:translateY(-2px);
  box-shadow:0 0 28px rgba(179,49,44,0.85), 0 6px 20px rgba(0,0,0,0.45);
  outline:none;
}

/* ------------------------------------------------------------
   COMMISSION SECTION — sits below the "Follow Along" videos
   section, outside the book. The "order a commission" button
   smooth-scrolls the page down to this instead of flipping any
   pages.
   ------------------------------------------------------------ */
.commission-section{
  width:100%;
  max-width:1100px;
  padding:28px 0 8px;
  background:transparent;
  border-top:1px solid rgba(237,231,218,0.14);
  scroll-margin-top:24px;
}
.commission-head{
  display:flex;
  flex-direction:column;
  gap:4px;
  border-bottom:1px solid rgba(237,231,218,0.18);
  padding-bottom:14px;
  margin-bottom:18px;
}
.commission-eyebrow{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--flash-yellow);
}
.commission-title{
  font-family:var(--serif);
  font-weight:700;
  font-size:clamp(22px,3vw,28px);
  color:#EDE7DA;
}
.commission-columns{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px;
}
.commission-col h3{
  font-family:var(--serif);
  font-weight:700;
  font-size:14px;
  color:var(--accent2);
  text-transform:uppercase;
  letter-spacing:0.04em;
  margin:0 0 10px;
  border-bottom:1px dotted rgba(237,231,218,0.22);
  padding-bottom:8px;
}
.commission-col ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:9px;
}
.commission-col li{
  position:relative;
  padding-left:15px;
  font-size:12.5px;
  line-height:1.6;
  color:#EDE7DA;
}
.commission-col li::before{
  content:'•';
  position:absolute;
  left:0;
  color:var(--stamp);
}

.dm-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:26px;
}
.dm-btn{
  display:flex;
  align-items:center;
  gap:12px;
  padding:13px 20px;
  border:1.5px solid rgba(237,231,218,0.45);
  border-radius:999px;
  text-decoration:none;
  color:#EDE7DA;
  background:transparent;
  font-family:var(--sans);
  font-weight:700;
  font-size:12.5px;
  letter-spacing:0.01em;
  transition:background .2s ease, color .2s ease, transform .2s ease, border-color .2s ease;
}
.dm-btn:hover,
.dm-btn:focus-visible{
  background:var(--stamp);
  border-color:var(--stamp);
  color:#EDE7DA;
  transform:translateY(-2px);
  outline:none;
}
.dm-btn-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  border-radius:50%;
  border:1.5px solid currentColor;
  flex-shrink:0;
}

.leaf--archive{ overflow-y:auto; }
.leaf--archive .toc-byline{ margin:0 0 14px; font-family:var(--mono); font-size:10.5px; color:var(--halftone); }
.archive-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; }
.archive-item{ display:flex; flex-direction:column; gap:4px; }
.archive-thumb{ aspect-ratio:3/4; overflow:hidden; border:1px solid rgba(27,25,23,0.35); }
.archive-thumb img,
.archive-thumb svg{ width:100%; height:100%; object-fit:cover; display:block; filter:grayscale(0.15) contrast(1.02); }
.archive-title{ font-family:var(--serif); font-weight:700; font-size:10.5px; line-height:1.2; }
.archive-meta{ font-family:var(--mono); font-size:8.5px; color:var(--halftone); text-transform:uppercase; letter-spacing:0.03em; }

.leaf--spread{ padding:0; position:relative; overflow:hidden; }
.spread-art{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; filter:grayscale(0.08) contrast(1.03); }
.spread-art--left{ object-position:28% center; }
.spread-art--right{ object-position:right center; }

.spread-caption{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:1;
  padding:22px 22px 18px;
  background:linear-gradient(0deg, rgba(10,9,8,0.82) 0%, rgba(10,9,8,0.5) 55%, rgba(10,9,8,0) 100%);
  color:var(--paper);
}
.spread-caption .plate-title{ font-family:var(--serif); font-weight:700; font-size:18px; color:var(--paper); }
.spread-caption-body{ color:#EDE7DA; margin-top:6px; max-width:30ch; }
.spread-caption .notes-meta{ border-top:1px dotted rgba(243,241,235,0.3); color:#c9c1af; }

.zoom-overlay{
  position:fixed;
  inset:0;
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:28px 8px;
  background:rgba(10,9,8,0.92);
}
.zoom-page{ position:relative; width:min(84vw, 440px); aspect-ratio:460/620; box-shadow:0 14px 46px rgba(0,0,0,0.6); flex-shrink:0; }
.zoom-page .page__face{ position:absolute; inset:0; }
.zoom-close{
  position:absolute;
  top:14px;
  right:14px;
  z-index:1001;
  width:34px;
  height:34px;
  border-radius:50%;
  background:rgba(243,241,235,0.12);
  color:#EDE7DA;
  border:1px solid rgba(243,241,235,0.4);
  font-size:20px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.zoom-nav{ background:transparent; border:none; color:#EDE7DA; font-size:32px; line-height:1; padding:6px 8px; cursor:pointer; opacity:0.75; flex-shrink:0; }
.zoom-nav:hover,
.zoom-nav:focus-visible{ opacity:1; }
.zoom-nav:active{ transform:scale(0.92); }

.videos{ width:100%; max-width:1100px; display:flex; flex-direction:column; gap:16px; }
.videos-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; border-bottom:1px solid rgba(237,231,218,0.14); padding-bottom:10px; }
.videos-title{ font-family:var(--serif); font-weight:800; font-size:clamp(16px,2.4vw,22px); color:#EDE7DA; letter-spacing:0.04em; }
.videos-sub{ font-family:var(--mono); font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase; color:#8b8477; }
.videos-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:18px; align-items:start; }
.video-card{ background:var(--paper-v); border:1px solid rgba(0,0,0,0.35); border-radius:4px; padding:10px; display:flex; flex-direction:column; gap:8px; }
.video-card--tiktok{ align-items:center; }
.video-embed{ position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; background:#000; border-radius:2px; }
.video-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }
.video-caption{ font-family:var(--mono); font-size:11px; color:#3a3733; line-height:1.5; }
.videos-empty{ font-family:var(--mono); font-size:11px; letter-spacing:0.03em; color:#6b6559; grid-column:1/-1; }

.social-preview-card{
  display:flex;
  align-items:center;
  gap:14px;
  background:var(--paper-v);
  border:1px solid rgba(0,0,0,0.35);
  border-radius:4px;
  padding:16px 18px;
  text-decoration:none;
  color:var(--ink);
  transition:transform .2s ease, border-color .2s ease;
}
.social-preview-card:hover,
.social-preview-card:focus-visible{ border-color:var(--stamp); transform:translateY(-2px); }
.social-preview-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border-radius:50%;
  border:1.5px solid var(--ink);
  color:var(--ink);
  flex-shrink:0;
}
.social-preview-text{ display:flex; flex-direction:column; flex:1; min-width:0; }
.social-preview-platform{ font-family:var(--serif); font-weight:700; font-size:14px; }
.social-preview-handle{ font-family:var(--mono); font-size:11px; color:var(--halftone); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.social-preview-cta{ font-family:var(--mono); font-size:10.5px; letter-spacing:0.03em; color:var(--stamp); white-space:nowrap; flex-shrink:0; }

/* ------------------------------------------------------------
   SHOP SECTION — storefront grid at the very bottom of the page.
   The "Shop" tab in the corner scrolls straight down to this.
   ------------------------------------------------------------ */
.shop-section{
  width:100%;
  max-width:1100px;
  padding:28px 0 40px;
  background:transparent;
  border-top:1px solid rgba(237,231,218,0.14);
  scroll-margin-top:24px;
}
.shop-head{
  display:flex;
  flex-direction:column;
  gap:4px;
  border-bottom:1px solid rgba(237,231,218,0.18);
  padding-bottom:14px;
  margin-bottom:18px;
}
.shop-eyebrow{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--flash-yellow);
}
.shop-title{
  font-family:var(--serif);
  font-weight:700;
  font-size:clamp(22px,3vw,28px);
  color:#EDE7DA;
}
.shop-empty{
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:0.03em;
  color:#8b8477;
  margin:0 0 18px;
}
.shop-subhead{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--halftone);
  margin:0 0 10px;
}
.shop-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
  gap:18px;
}
.shop-card{
  background:var(--paper-v);
  border:1px solid rgba(0,0,0,0.35);
  border-radius:4px;
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.shop-card-frame{
  aspect-ratio:1/1;
  overflow:hidden;
  border:1px solid rgba(27,25,23,0.35);
  display:flex;
}
.shop-card-frame img,
.shop-card-frame svg{ width:100%; height:100%; object-fit:cover; display:block; }
.shop-card-body{ display:flex; flex-direction:column; gap:4px; flex:1; }
.shop-card-title{ font-family:var(--serif); font-weight:700; font-size:15px; color:var(--ink); }
.shop-card-note{ font-family:var(--mono); font-size:10.5px; color:var(--halftone); line-height:1.5; }
.shop-card-foot{
  margin-top:auto;
  padding-top:10px;
  border-top:1px dotted rgba(27,25,23,0.22);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.shop-card-price{ font-family:var(--mono); font-weight:700; font-size:13px; color:var(--ink); }
.shop-card-buy{
  font-family:var(--mono);
  font-size:11px;
  font-weight:700;
  letter-spacing:0.03em;
  color:var(--stamp);
  text-decoration:none;
  white-space:nowrap;
}
.shop-card-buy:hover,
.shop-card-buy:focus-visible{ text-decoration:underline; }

.shop-card--commission{
  background:var(--ink);
  border-color:rgba(237,231,218,0.3);
}
.shop-card-body--commission{ justify-content:space-between; height:100%; }
.shop-card--commission .shop-card-title{ color:#EDE7DA; }
.shop-card--commission .shop-card-note{ color:#a79f8d; }
.shop-card--commission .shop-card-foot{ border-top-color:rgba(237,231,218,0.22); justify-content:flex-start; }
.shop-card--commission .shop-card-buy{ color:var(--accent2); cursor:pointer; }

@media (max-width: 720px){
  .shell{ gap:20px; padding:16px 12px; }
  .hero{ gap:10px; }
  .deskmark{ gap:4px; }
  .deskmark__logo{ height:clamp(80px,18vw,160px); }
  .deskmark__sub{ font-size:9px; }

  .stage{
    width:min(96vw, calc((100svh - 260px) * 920 / 620));
    max-width:920px;
  }

  .hint--desc{ display:none; }
  .hint-row{ gap:4px; }

  .controls{ gap:12px; }
  .controls__btn{ padding:8px 14px; font-size:11px; }
  .controls__status{ font-size:11px; min-width:52px; }

  .commission-btn{ padding:7px 16px; font-size:10px; }

  .shop-tab{ top:16px; padding:9px 13px 9px 10px; font-size:10.5px; }
  .place-order-btn{ font-size:12.5px; padding:12px 26px; }

  .leaf{ padding:clamp(8px,3vw,20px) clamp(8px,3vw,18px) clamp(6px,2.4vw,16px); }
  .cover-title-bg{ font-size:clamp(11px,4.6vw,32px); padding-top:clamp(18px,7vw,46px); -webkit-text-stroke:1px var(--ink); }
  .cover-kicker{ font-size:clamp(6px,2vw,10.5px); }
  .cover-volnum{ font-size:clamp(13px,3.6vw,26px); top:clamp(60px,16vw,118px); right:clamp(6px,2vw,16px); }
  .cover-blurb{ font-size:clamp(6.5px,2.1vw,11.5px); padding:clamp(3px,1vw,6px) clamp(6px,2vw,12px); }
  .cover-foot{ font-size:clamp(6px,1.8vw,10.5px); padding:clamp(6px,2vw,14px) clamp(8px,2.6vw,24px) clamp(8px,2.6vw,20px); }
  .cover-masthead{ padding:clamp(3px,1vw,6px) clamp(8px,2.6vw,18px) 0; }
  .toc-head{ font-size:clamp(6.5px,2vw,11px); padding-bottom:clamp(4px,1.4vw,10px); }
  .toc-byline{ font-size:clamp(6px,1.9vw,10.5px); margin-bottom:clamp(6px,2vw,14px); }
  .toc-list li{ padding:clamp(3px,1.2vw,9px) 0; font-size:clamp(6.5px,2.2vw,13px); gap:clamp(4px,1.4vw,10px); }
  .toc-list .toc-num{ width:clamp(12px,3.6vw,22px); }
  .toc-list .toc-med{ font-size:clamp(5.5px,1.7vw,10.5px); }
  .plate-frame{ padding:clamp(2px,0.8vw,6px); }
  .plate-caption{ padding-top:clamp(4px,1.4vw,10px); font-size:clamp(6px,1.8vw,10.5px); }
  .plate-caption .plate-title{ font-size:clamp(8px,2.6vw,15px); }
  .notes-eyebrow{ font-size:clamp(6px,1.8vw,10.5px); }
  .notes-title{ font-size:clamp(12px,4vw,26px); margin:clamp(3px,1.4vw,8px) 0 clamp(5px,2vw,12px); }
  .notes-body{ font-size:clamp(7px,2.2vw,12.5px); line-height:1.5; }
  .notes-body--jp{ font-size:clamp(6px,1.9vw,10.5px); margin-top:clamp(4px,1.2vw,8px); }
  .notes-meta{ font-size:clamp(5.5px,1.7vw,10.5px); gap:clamp(6px,2vw,18px); padding-top:clamp(4px,1.4vw,10px); margin-top:clamp(5px,1.6vw,12px); }
  .spread-caption{ padding:clamp(8px,2.6vw,22px) clamp(8px,2.6vw,22px) clamp(6px,2vw,18px); }
  .spread-caption .plate-title{ font-size:clamp(9px,2.8vw,18px); }
  .spread-caption-body{ font-size:clamp(6.5px,2vw,12.5px); }
  .colophon-mark{ font-size:clamp(11px,3.4vw,22px); }
  .leaf--colophon .colophon-byline{ font-size:clamp(7px,2.2vw,13px); }
  .leaf--colophon p{ font-size:clamp(6px,1.8vw,11px); }
  .archive-grid{ grid-template-columns:repeat(2, 1fr); gap:clamp(4px,1.4vw,10px); }
  .archive-title{ font-size:clamp(6.5px,1.9vw,10.5px); }
  .archive-meta{ font-size:clamp(5.5px,1.4vw,8.5px); }
  .commission-status{ font-size:clamp(6px,1.8vw,11px); padding:clamp(3px,1vw,5px) clamp(6px,1.8vw,11px); }
  .notes-body--contact{ margin-top:clamp(5px,1.6vw,12px); }
  .social-row{ gap:clamp(6px,2vw,12px); margin-top:clamp(8px,2.4vw,16px); }
  .social-icon{ width:clamp(24px,7vw,38px); height:clamp(24px,7vw,38px); }
  .social-icon svg{ width:clamp(13px,4vw,20px); height:clamp(13px,4vw,20px); }
  .new-badge{ font-size:clamp(6px,1.8vw,10.5px); padding:clamp(2px,0.8vw,4px) clamp(5px,1.6vw,10px); top:clamp(5px,1.6vw,10px); right:clamp(5px,1.6vw,10px); }
  .hanko{ width:clamp(20px,6vw,38px); height:clamp(20px,6vw,38px); }
  .videos-title{ font-size:clamp(14px,4vw,22px); }
  .videos-sub{ font-size:clamp(7px,2vw,10.5px); }
  .videos-grid{ grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:clamp(8px,2.6vw,18px); }
  .video-caption{ font-size:clamp(7px,2vw,11px); }
  .social-preview-card{ padding:clamp(10px,3vw,16px) clamp(12px,3.4vw,18px); gap:clamp(8px,2.4vw,14px); }
  .social-preview-icon{ width:clamp(28px,7vw,40px); height:clamp(28px,7vw,40px); }
  .social-preview-icon svg{ width:clamp(15px,4vw,20px); height:clamp(15px,4vw,20px); }
  .social-preview-platform{ font-size:clamp(11px,3vw,14px); }
  .social-preview-handle{ font-size:clamp(8px,2vw,11px); }
  .social-preview-cta{ font-size:clamp(7.5px,1.8vw,10.5px); }
  .commission-section{ padding:clamp(16px,4.4vw,28px) 0 clamp(6px,2vw,8px); }
  .commission-eyebrow{ font-size:clamp(7px,2vw,10.5px); }
  .commission-title{ font-size:clamp(16px,4.4vw,28px); }
  .commission-columns{ grid-template-columns:1fr; gap:clamp(14px,4vw,32px); }
  .commission-col h3{ font-size:clamp(10px,2.8vw,14px); padding-bottom:clamp(4px,1.4vw,8px); margin-bottom:clamp(5px,1.6vw,10px); }
  .commission-col li{ font-size:clamp(8px,2.4vw,12.5px); padding-left:clamp(10px,2.8vw,15px); }
  .dm-buttons{ gap:clamp(8px,2.4vw,14px); margin-top:clamp(14px,4vw,26px); }
  .dm-btn{ padding:clamp(9px,2.8vw,13px) clamp(12px,3.4vw,20px); font-size:clamp(9.5px,2.6vw,12.5px); gap:clamp(7px,2.2vw,12px); }
  .dm-btn-icon{ width:clamp(24px,6.6vw,30px); height:clamp(24px,6.6vw,30px); }
  .dm-btn-icon svg{ width:clamp(13px,3.6vw,20px); height:clamp(13px,3.6vw,20px); }
  .shop-section{ padding:clamp(16px,4.4vw,28px) 0 clamp(24px,6vw,40px); }
  .shop-eyebrow{ font-size:clamp(7px,2vw,10.5px); }
  .shop-title{ font-size:clamp(16px,4.4vw,28px); }
  .shop-empty{ font-size:clamp(8px,2.2vw,11.5px); }
  .shop-grid{ grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:clamp(8px,2.6vw,18px); }
  .shop-card{ padding:clamp(8px,2.4vw,12px); gap:clamp(6px,1.8vw,10px); }
  .shop-card-title{ font-size:clamp(11px,3vw,15px); }
  .shop-card-note{ font-size:clamp(8px,2vw,10.5px); }
  .shop-card-price{ font-size:clamp(10px,2.6vw,13px); }
  .shop-card-buy{ font-size:clamp(8.5px,2.2vw,11px); }
}

@media (prefers-reduced-motion: reduce){
  .page{ transition:transform .01s linear; }
  .hanko{ transition:none; }
}