/* Cheer's desk. Visual language borrowed from her own art journal:
   cream paper, spiral binding, black-and-white engravings with white edges,
   black handwritten notes with little arrows, gold marker dashes,
   and one bright colour per page. Rule: collage is the frame, the work is the picture. */

@font-face { font-family: "Caveat"; src: url(assets/fonts/caveat.woff2) format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url(assets/fonts/instrument-serif.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url(assets/fonts/instrument-serif-italic.woff2) format("woff2"); font-style: italic; font-display: swap; }
@font-face { font-family: "Inter"; src: url(assets/fonts/inter.woff2) format("woff2"); font-weight: 400 600; font-display: swap; }
@font-face { font-family: "Special Elite"; src: url(assets/fonts/special-elite.woff2) format("woff2"); font-display: swap; }

:root {
  --cream: #f4ecda;
  --paper: #fbf6ea;
  --ink: #1d1a17;
  --ink-soft: #4a433b;
  --gold: #c39a2e;
  --gold-hi: #e2c35a;
  --indigo: #2c3a8f;
  --mustard: #c9a227;
  --pink: #ff4fa3;
  --green: #5e9e7d;
  --accent: var(--gold);
  --serif: "Instrument Serif", "Times New Roman", serif;
  --hand: "Caveat", "Bradley Hand", cursive;
  --type: "Special Elite", "Courier New", monospace;
  --sans: "Inter", system-ui, sans-serif;
  --shadow: 0 1px 1px rgba(40, 30, 10, .08), 0 8px 24px rgba(40, 30, 10, .14);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  color: var(--ink);
  font: 16px/1.6 var(--sans);
  background-color: var(--cream);
  /* fine paper grain, drawn in code */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .27 0 0 0 0 .15 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  overflow-x: hidden;
}

a { color: inherit; }
img { max-width: 100%; display: block; }
.hand { font-family: var(--hand); font-weight: 500; }
.tilt-l { transform: rotate(-3deg); }
.tilt-r { transform: rotate(2.5deg); }
.tilt-r2 { transform: rotate(4deg); }

/* ── Placeholder frame (shown until Cheer drops the real file in) ── */
.frame { position: relative; overflow: hidden; background: #ece2cc; }
.frame img { width: 100%; height: 100%; object-fit: cover; }
.frame.contain img { object-fit: contain; background: var(--paper); }
.frame.missing img { display: none; }
.frame.missing::after {
  content: attr(data-label);
  position: absolute; inset: 8px;
  display: grid; place-items: center; text-align: center;
  border: 2px dashed var(--gold);
  border-radius: 4px;
  font: 600 1.25rem/1.2 var(--hand);
  color: var(--ink-soft);
  background: repeating-linear-gradient(-45deg, transparent 0 10px, rgba(195, 154, 46, .07) 10px 20px);
}

/* ═════════════ THE DESK ═════════════ */
.desk {
  position: relative;
  min-height: 100vh;
  padding: 5vh 5vw 8vh;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.25fr) minmax(0, .9fr);
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "title   journal polaroid"
    "contents journal sticky"
    "contents stack  sticky";
  gap: 2.5rem 3rem;
  align-items: start;
  isolation: isolate;
}
.desk-engraving {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    url(assets/deco/engraving-bouquet.jpg) right -6vw top -4vh / auto 115% no-repeat,
    url(assets/deco/engraving-branches.jpg) left -8vw bottom -6vh / 55vw auto no-repeat;
  mix-blend-mode: multiply;
  opacity: .32;
  filter: grayscale(1) contrast(1.15);
  -webkit-mask-image: radial-gradient(ellipse at center, transparent 18%, #000 75%);
          mask-image: radial-gradient(ellipse at center, transparent 18%, #000 75%);
}

.desk-title { grid-area: title; position: relative; padding-top: 2vh; }
.name {
  margin: 0;
  font: italic 400 clamp(5rem, 12vw, 11rem)/.85 var(--serif);
  letter-spacing: -.02em;
}
.hand-over { margin: 0 0 .2rem; font-size: 1.5rem; color: var(--ink-soft); }
.hand-aside { margin: .4rem 0 0 2.2rem; font-size: 1.7rem; position: relative; }
.arrow-curl {
  position: absolute; left: -2.4rem; top: -1.4rem; width: 2.2rem; height: 2rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 36'%3E%3Cpath d='M4 4 C 2 20, 14 30, 32 28' fill='none' stroke='%231d1a17' stroke-width='2.2' stroke-linecap='round'/%3E%3Cpath d='M26 22 L33 28 L25 32' fill='none' stroke='%231d1a17' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
.tagline { max-width: 22rem; margin: 1.6rem 0 0; font: italic 1.45rem/1.35 var(--serif); color: var(--ink-soft); }

/* Polaroid */
.polaroid { grid-area: polaroid; position: relative; margin: 0; width: min(100%, 300px); justify-self: center; filter: drop-shadow(0 10px 18px rgba(40, 30, 10, .22)); }
.polaroid-frame { position: relative; z-index: 2; pointer-events: none; width: 100%; }
.polaroid-window { position: absolute; z-index: 1; left: 20%; top: 18.4%; width: 59%; height: 55.2%; }
.polaroid-window .frame { width: 100%; height: 100%; }
.polaroid figcaption { position: absolute; z-index: 3; left: 0; right: 0; bottom: 9%; text-align: center; font-size: 1.35rem; }

/* Sticky note */
.sticky { grid-area: sticky; position: relative; width: min(100%, 300px); justify-self: center; filter: drop-shadow(0 8px 14px rgba(40, 30, 10, .18)); }
.sticky-text { position: absolute; left: 24%; right: 10%; top: 24%; font-size: clamp(1.15rem, 1.5vw, 1.45rem); line-height: 1.3; }
.sticky-text p { margin: 0 0 .35em; }
.sticky-text { transform: rotate(-6deg); transform-origin: left top; top: 23%; font-size: clamp(1.05rem, 1.35vw, 1.32rem); }

/* Journal (spiral-bound flipbook) */
.journal { grid-area: journal; position: relative; }
.journal-label { margin: .7rem 0 0; text-align: right; font-size: 1.4rem; }

/* Typed manuscript stack */
.typed-stack { grid-area: stack; position: relative; display: block; width: min(100%, 360px); height: 230px; margin-left: 8%; text-decoration: none; color: var(--ink); }
.typed-stack .sheet { position: absolute; inset: 0; background: var(--paper); box-shadow: var(--shadow); border: 1px solid rgba(0, 0, 0, .05); }
.typed-stack .s3 { transform: rotate(-5deg) translate(-8px, 6px); }
.typed-stack .s2 { transform: rotate(-2deg) translate(-3px, 3px); }
.typed-stack .s1 { padding: 1.4rem 1.5rem; overflow: hidden; transition: transform .25s ease; }
.typed-stack:hover .s1, .typed-stack:focus-visible .s1 { transform: translateY(-6px) rotate(1deg); }
.typed { display: block; font: .86rem/1.55 var(--type); }
.typed strong { display: block; margin-bottom: .6rem; font-weight: 400; text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }
.typed-stack .tape { position: absolute; width: 130px; top: -26px; left: 50%; transform: translateX(-50%) rotate(-4deg); opacity: .9; pointer-events: none; }

/* Contents */
.contents { grid-area: contents; align-self: center; }
.contents-head { margin: 0 0 .4rem; font-size: 1.6rem; }
.contents ol { margin: 0; padding: 0; list-style: none; counter-reset: c; }
.contents li { counter-increment: c; margin: .25rem 0; }
.contents a {
  display: inline-flex; gap: .8rem; align-items: baseline;
  padding: .3rem .2rem; text-decoration: none;
  font: 1.45rem/1.2 var(--serif);
  border-bottom: 2px dashed transparent;
}
.contents a::before { content: counter(c, decimal-leading-zero); font: italic .95rem var(--serif); color: var(--gold); }
.contents a em { font: italic .95rem var(--serif); color: var(--ink-soft); }
.contents a:hover, .contents a:focus-visible { border-bottom-color: var(--gold); }

/* ═════════════ FLIPBOOK ═════════════ */
.flipbook { position: relative; user-select: none; }
.fb-book {
  position: relative; display: grid; grid-template-columns: 1fr 1fr;
  aspect-ratio: 3 / 2; perspective: 2200px;
  background: var(--paper);
  box-shadow: var(--shadow), inset 0 0 0 1px rgba(0, 0, 0, .04);
  border-radius: 3px 6px 6px 3px;
}
.fb-book.single { grid-template-columns: 1fr; aspect-ratio: 3 / 4; }
.fb-page { position: relative; padding: 6% 7%; }
.fb-page .frame { width: 100%; height: 100%; box-shadow: 0 0 0 6px #fff, 0 2px 8px rgba(0, 0, 0, .12); }
.fb-page.right { border-left: 1px solid rgba(0, 0, 0, .06); background: linear-gradient(90deg, rgba(0, 0, 0, .05), transparent 12%); }
.fb-page.left { background: linear-gradient(270deg, rgba(0, 0, 0, .05), transparent 12%); }
/* spiral binding (journal) */
.flipbook.spiral .fb-book::before {
  content: ""; position: absolute; z-index: 5; top: 4%; bottom: 4%; left: 50%; width: 26px; transform: translateX(-50%);
  background: radial-gradient(circle at 50% 50%, #2a2622 0 4px, transparent 4.5px) center top / 26px 26px repeat-y,
              repeating-linear-gradient(180deg, transparent 0 7px, #8a8580 7px 9px, #d9d5cf 9px 12px, #8a8580 12px 14px, transparent 14px 26px);
  pointer-events: none;
}
.flipbook.spiral .fb-book.single::before { left: 0; }
.fb-leaf {
  position: absolute; top: 0; bottom: 0; width: 50%; z-index: 4;
  transform-style: preserve-3d; transition: transform .7s cubic-bezier(.3, .1, .2, 1);
}
.fb-leaf.next { left: 50%; transform-origin: left center; }
.fb-leaf.prev { left: 0; transform-origin: right center; }
.fb-leaf .face { position: absolute; inset: 0; backface-visibility: hidden; background: var(--paper); padding: 6% 7%; }
.fb-leaf .face .frame { width: 100%; height: 100%; box-shadow: 0 0 0 6px #fff, 0 2px 8px rgba(0, 0, 0, .12); }
.fb-leaf .back { transform: rotateY(180deg); }
.fb-leaf.next.turn { transform: rotateY(-180deg); }
.fb-leaf.prev.turn { transform: rotateY(180deg); }
.fb-controls { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: .8rem; font: italic 1rem var(--serif); }
.fb-btn {
  width: 2.4rem; height: 2.4rem; border-radius: 50%; cursor: pointer;
  border: 1.5px solid var(--ink); background: var(--paper); color: var(--ink); font-size: 1.2rem; line-height: 1;
}
.fb-btn:hover:not(:disabled) { background: var(--ink); color: var(--paper); }
.fb-btn:disabled { opacity: .3; cursor: default; }
.fb-caption { min-height: 1.4em; text-align: center; font-family: var(--hand); font-size: 1.25rem; margin: .3rem 0 0; }

/* ═════════════ GOLD TRAIL ═════════════ */
.trail { position: relative; height: 170px; margin: -10px 0; pointer-events: none; }
.trail svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.trail path { fill: none; stroke: var(--gold); stroke-width: 3; stroke-dasharray: 2 11; stroke-linecap: round; }
.trail .runner { position: absolute; left: 0; top: 0; width: 52px; offset-rotate: 0deg; offset-anchor: 50% 92%; offset-distance: 0%; opacity: 0; }
.trail.go .runner { animation: run 3.2s ease-in-out forwards; }
@keyframes run { 0% { offset-distance: 0%; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .trail.go .runner { animation: none; opacity: 1; offset-distance: 50%; } }

/* ═════════════ PAGES (sections) ═════════════ */
.page {
  position: relative;
  width: min(1180px, calc(100% - 2.5rem));
  margin: 0 auto;
  padding: 3.5rem 3.5rem 3.5rem 5rem;
  background: var(--paper);
  box-shadow: var(--shadow);
  border-radius: 2px 8px 8px 2px;
}
/* spiral holes down the left edge, like her journal */
.page::before {
  content: ""; position: absolute; left: 1.2rem; top: 1.5rem; bottom: 1.5rem; width: 22px;
  background: radial-gradient(circle, var(--cream) 0 6px, rgba(0, 0, 0, .18) 6.5px, transparent 7.5px) center top / 22px 34px repeat-y;
}
.accent-indigo { --accent: var(--indigo); }
.accent-gold   { --accent: var(--mustard); }
.accent-pink   { --accent: var(--pink); }
.accent-green  { --accent: var(--green); }

.page-head { display: grid; grid-template-columns: auto 1fr auto; gap: 1.4rem; align-items: end; margin-bottom: 2.4rem; }
.page-no { font: italic 4.5rem/.8 var(--serif); color: var(--accent); }
.page-head h2 {
  display: inline; margin: 0; font: 400 clamp(2.2rem, 4.5vw, 3.6rem)/1 var(--serif);
  background: linear-gradient(transparent 62%, color-mix(in srgb, var(--accent) 30%, transparent) 62% 92%, transparent 92%);
}
.kicker { margin: .6rem 0 0; font-size: .95rem; color: var(--ink-soft); letter-spacing: .02em; }
.page-note { margin: 0; font-size: 1.5rem; transform: rotate(-3deg); }

/* 01 · Essays */
.essays { display: grid; gap: 3.5rem; }
.essay { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr); gap: 2.5rem; align-items: center; }
.essay:nth-child(even) { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); }
.essay:nth-child(even) .essay-text { order: 2; }
.essay-text h3 { margin: 0; font: italic 2rem/1.1 var(--serif); }
.essay-text .place { margin: .3rem 0 1rem; font: .82rem var(--type); color: var(--accent); }
.essay-text p { margin: 0; color: var(--ink-soft); }
.album .fb-book { aspect-ratio: 4 / 3; grid-template-columns: 1fr; }
.album .fb-page { padding: 0; }
.album .fb-page .frame { box-shadow: none; }

/* 02 · Research */
.research-tabs { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.2rem; }
.research-tab {
  cursor: pointer; padding: .55rem 1rem; border: 1.5px solid var(--ink); border-radius: 999px;
  background: transparent; font: .9rem var(--sans); color: var(--ink);
}
.research-tab[aria-selected="true"] { background: var(--ink); color: var(--paper); }
.research-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: 2.5rem; align-items: start; }
.research-body h3 { margin: 0; font: italic 1.7rem/1.15 var(--serif); }
.research-body .kind { margin: .4rem 0 1rem; font: .82rem var(--type); color: #8a6d12; }
.research-body p { color: var(--ink-soft); }
.open-pdf { display: inline-block; margin-top: .6rem; font-family: var(--hand); font-size: 1.35rem; text-decoration: none; border-bottom: 2px dashed var(--gold); }
.browser { border-radius: 10px; overflow: hidden; background: #fff; box-shadow: var(--shadow), 0 0 0 1px rgba(0, 0, 0, .08); }
.browser-bar { display: flex; align-items: center; gap: .45rem; padding: .6rem .8rem; background: #efe9dc; border-bottom: 1px solid rgba(0, 0, 0, .08); }
.browser-bar i { width: 11px; height: 11px; border-radius: 50%; background: #e0605a; }
.browser-bar i:nth-child(2) { background: #e9b949; }
.browser-bar i:nth-child(3) { background: #69b65c; }
.browser-url { flex: 1; margin-left: .6rem; padding: .2rem .8rem; border-radius: 6px; background: #fff; font: .78rem var(--type); color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.browser-view { position: relative; aspect-ratio: 4 / 3.3; background: #f7f3ea; }
.browser-view iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.browser-empty { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 2rem; font-family: var(--hand); font-size: 1.4rem; color: var(--ink-soft); }
.browser-empty a { display: inline-block; margin-top: .6rem; }

/* 03 · Book */
.flipbook.big .fb-book { aspect-ratio: 2 / 1.25; }

/* Works strip */
.strip {
  display: flex; gap: 1.4rem; overflow-x: auto; padding: .6rem .2rem 1.6rem;
  scroll-snap-type: x mandatory; scrollbar-color: var(--gold) transparent;
  margin-right: -3.5rem; padding-right: 3.5rem;
}
.strip:focus-visible { outline: 2px dashed var(--gold); outline-offset: 6px; }
.work { flex: 0 0 auto; scroll-snap-align: start; width: 230px; margin: 0; cursor: zoom-in; background: none; border: 0; padding: 0; text-align: left; color: var(--ink); font: inherit; }
.work .frame { width: 230px; height: 280px; box-shadow: 0 0 0 7px #fff, var(--shadow); transition: transform .2s ease; }
.work:hover .frame, .work:focus-visible .frame { transform: translateY(-5px) rotate(-1deg); }
.work-cap { display: flex; gap: .6rem; align-items: baseline; margin-top: 1rem; }
.work-no { font: italic 1.1rem var(--serif); color: var(--accent); }
.work-title { font: 1rem/1.25 var(--serif); }

/* About */
.about {
  position: relative; margin-top: 7rem; padding: 7rem 5vw;
  background: url(assets/deco/florals-dark.jpg) center / cover;
}
.about-card { position: relative; max-width: 640px; margin: 0 auto; padding: 3rem 3rem 2.4rem; background: var(--paper); box-shadow: 0 20px 40px rgba(0, 0, 0, .35); }
.about-card h2 { margin: 0 0 1rem; font: italic 2.6rem/1 var(--serif); }
.about-card .tape-top { position: absolute; width: 170px; top: -36px; left: 50%; transform: translateX(-50%) rotate(3deg); }
.contact { margin-top: 1.6rem; font-family: var(--hand); font-size: 1.4rem; }
.contact a { text-decoration: none; border-bottom: 2px dashed var(--gold); margin-right: 1.2rem; }

.credits { padding: 2.2rem 5vw 3rem; text-align: center; font-size: .78rem; color: var(--ink-soft); }
.credits p { margin: .3rem 0; }

/* Cheerio door handle */
.cheerio-handle {
  position: fixed; right: 1.4rem; bottom: 1.2rem; z-index: 30;
  width: 64px; height: 74px; padding: 0; border: 0; background: none; cursor: pointer;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .2)); transition: transform .2s ease;
}
.cheerio-handle:hover, .cheerio-handle[aria-expanded="true"] { transform: translateY(-4px) rotate(-6deg); }
.handle-menu {
  position: fixed; right: 1.4rem; bottom: 6.2rem; z-index: 30;
  padding: 1rem 1.3rem; background: var(--paper); box-shadow: var(--shadow); border: 2px dashed var(--gold); border-radius: 6px;
}
.handle-menu a { display: block; padding: .25rem 0; font: 1.15rem var(--serif); text-decoration: none; }
.handle-menu a:hover { color: #8a6d12; }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 50; display: grid; grid-template-columns: 4rem 1fr 4rem; align-items: center; background: rgba(24, 20, 16, .92); }
.lightbox[hidden] { display: none; }
.lightbox figure { margin: 0; display: grid; justify-items: center; gap: 1rem; }
.lb-img { width: min(88vw, 1100px); height: 78vh; }
.lb-img .frame { width: 100%; height: 100%; background: transparent; }
.lb-img .frame img { object-fit: contain; }
.lightbox figcaption { color: #efe6d2; text-align: center; font: 1.05rem var(--serif); }
.lightbox figcaption em { display: block; font-size: .9rem; opacity: .7; }
.lightbox button { background: none; border: 0; color: #efe6d2; font-size: 2.6rem; cursor: pointer; }
.lb-close { position: absolute; top: .8rem; right: 1.2rem; }

/* ═════════════ PHONE ═════════════ */
@media (max-width: 900px) {
  .desk {
    grid-template-columns: .8fr 1.2fr;
    grid-template-areas:
      "title title"
      "polaroid sticky"
      "journal journal"
      "stack stack"
      "contents contents";
    gap: 2rem 1rem; padding: 4vh 1.2rem 6vh;
  }
  .typed-stack { margin: 0 auto; }
  .sticky-text { font-size: 1rem; line-height: 1.12; top: 21%; right: 7%; }
  .sticky-text p { margin-bottom: .2em; }
  .sticky { width: 100%; }
  .polaroid figcaption { font-size: .95rem; bottom: 7%; }
  .polaroid .frame.missing::after { font-size: .85rem; inset: 4px; }
  .page { width: calc(100% - 1.2rem); padding: 2.4rem 1.2rem 2.4rem 2.6rem; }
  .page::before { left: .5rem; width: 18px; background-size: 18px 30px; }
  .page-head { grid-template-columns: auto 1fr; }
  .page-note { grid-column: 1 / -1; }
  .essay, .essay:nth-child(even) { grid-template-columns: 1fr; gap: 1.2rem; }
  .essay:nth-child(even) .essay-text { order: 0; }
  .research-body { grid-template-columns: 1fr; }
  .strip { margin-right: -1.2rem; padding-right: 1.2rem; }
  .work, .work .frame { width: 180px; }
  .work .frame { height: 220px; }
  .about { padding: 5rem 1rem; }
  .about-card { padding: 2.4rem 1.6rem 2rem; }
  .lightbox { grid-template-columns: 2.6rem 1fr 2.6rem; }
}

/* ── v3: the desk is pinned while you scroll; scrolling spreads the pile out (computer only) ── */
[data-drag] { --dx: 0px; --dy: 0px; --r: 0deg; transform: translate(var(--dx), var(--dy)) rotate(var(--r)); }
.desk-scroller { position: relative; height: 130vh; }
.desk-scroller > .desk { position: sticky; top: 0; height: 100vh; min-height: 0; overflow: hidden; }
.desk.draggable [data-drag] { cursor: grab; touch-action: none; transition: transform .12s linear; }
.desk.draggable [data-drag].dragging { cursor: grabbing; transition: none; z-index: 20 !important; filter: drop-shadow(0 18px 24px rgba(40, 30, 10, .28)); }
.desk.resting [data-drag] { animation: hop 2.4s cubic-bezier(.3, 0, .3, 1) infinite; animation-delay: calc(var(--i, 0) * -.6s); }
@keyframes hop { 0%, 55%, 100% { translate: 0 0; } 18% { translate: 0 -16px; } 30% { translate: 0 0; } 38% { translate: 0 -5px; } 46% { translate: 0 0; } }
@media (prefers-reduced-motion: reduce) { .desk.resting [data-drag] { animation: none; } }
.desk-hint { position: absolute; right: 9rem; bottom: 2.4vh; margin: 0; font: 500 1.35rem var(--hand); color: var(--ink-soft); transition: opacity .4s; }

/* ── v2: hand-drawn page arrows beside the book ── */
.flipbook .fb-controls { display: block; margin-top: .5rem; text-align: center; }
.fb-controls span { font: 500 1.15rem var(--hand); color: var(--ink-soft); }
.fb-btn {
  position: absolute; top: 50%; width: 46px; height: 46px; margin-top: -40px; border: 0; border-radius: 0;
  background: none no-repeat center / contain; color: transparent; overflow: hidden; z-index: 6;
  transition: transform .2s ease, opacity .2s ease;
}
.fb-btn.prev { left: -58px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M40 30 C 32 12, 18 12, 9 22' fill='none' stroke='%231d1a17' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M15 13 L8 23 L19 26' fill='none' stroke='%231d1a17' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.fb-btn.next { right: -58px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M8 30 C 16 12, 30 12, 39 22' fill='none' stroke='%231d1a17' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M33 13 L40 23 L29 26' fill='none' stroke='%231d1a17' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.fb-btn:hover:not(:disabled) { background-color: transparent; transform: scale(1.15) rotate(-4deg); }
.fb-btn:disabled { opacity: .15; }
@media (max-width: 900px) {
  .fb-btn.prev { left: 2px; } .fb-btn.next { right: 2px; }
  .fb-btn { background-color: rgba(251, 246, 234, .85); border-radius: 50%; width: 40px; height: 40px; background-size: 30px; }
}