/* =========================================================================
   Memories Loaming — shared styles  (Phase 2: themed shared layer)

   Governing principle: diegetic skin, non-diegetic bones.
   The worn/analog texture lives ONLY in the room + print framing
   (header, footer, plates, paper). Functional text stays high-contrast,
   and game screenshots / key art are NEVER textured — see `.plate img`.
   ========================================================================= */

/* ---- Type system (Google Fonts loaded via <link> in each page) ---------- */
:root {
  --font-serif: 'Spectral', Georgia, 'Times New Roman', serif;
  --font-sans:  'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:  'Source Code Pro', ui-monospace, 'Courier New', monospace;
  --font-head:  'Source Serif 4', Georgia, 'Times New Roman', serif; /* headings + UI */
  --font-hb-head: 'Space Mono', ui-monospace, 'Courier New', monospace; /* Handbook headers */
  --font-hb-body: 'B612 Mono', ui-monospace, 'Courier New', monospace;  /* Handbook body */
  --font-marker:'Permanent Marker', var(--font-head);  /* Mealy note headings */
  --font-hand:  'Architects Daughter', 'Segoe Print', cursive; /* Mealy note body */
  --font-scrawl:'Rock Salt', 'Segoe Print', cursive;    /* rough, uneasy accent */

  /* ---- Color palette: decayed station interior ---- */
  --c-near-black:  #14110e;
  --c-bg:          #1b1713;
  --c-bg-2:        #221c16;
  --c-grey-brown:  #3a332b;
  --c-desk:        #2a241d;
  --c-line:        #463d33;
  --c-ink:         #d3c6ad;   /* primary text on dark */
  --c-ink-dim:     #9c8f7c;
  --c-red:         #9a2f23;   /* distressed accent: titles, active nav, CTA */
  --c-red-bright:  #c0432f;
  --c-olive:       #5c5a37;   /* demo button */
  --c-paper:       #d8cdb8;   /* reading surfaces */
  --c-paper-ink:   #2b2620;

  /* ---- Framing texture (worn print). Screenshots opt OUT of this. ---- */
  --tex-grain: url('../img/tex-grain.png');

  --shadow-plate: 0 2px 3px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.10);

  --bp: 768px;
  --maxw: 1180px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--c-ink);
  font-family: var(--font-serif);
  font-size: 1.05rem;
  line-height: 1.62;
  background-color: var(--c-bg);
  background-image:
    radial-gradient(120% 80% at 50% -10%, rgba(154,47,35,.07), transparent 60%),
    radial-gradient(140% 120% at 50% 120%, rgba(0,0,0,.55), transparent 70%);
}

/* ---- Headings & links --------------------------------------------------- */
h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.14; font-weight: 700; }
h1 { color: var(--c-red-bright); letter-spacing: .01em; font-size: clamp(1.9rem, 4vw, 2.8rem); margin: .2em 0 .4em; }
h2 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin: 1.8em 0 .5em; color: var(--c-ink); }
h2::before { /* field-note section tick */
  content: "08"; font-family: var(--font-mono); font-weight: 700; font-size: .62em;
  color: var(--c-red); margin-right: .6em; vertical-align: .12em; letter-spacing: .08em;
}
h3 { font-size: 1.15rem; margin: 1.4em 0 .4em; color: var(--c-ink); }

p { margin: 0 0 1em; }
a { color: var(--c-ink); text-decoration-color: rgba(192,67,47,.6); text-underline-offset: 2px; }
a:hover { color: #fff; }

:focus-visible { outline: 3px solid var(--c-red-bright); outline-offset: 2px; border-radius: 2px; }

img, svg, video { max-width: 100%; height: auto; display: block; }
code { font-family: var(--font-mono); font-size: .9em; color: var(--c-ink); }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 1.25rem; }
.mono-label { font-family: var(--font-mono); letter-spacing: .12em; color: var(--c-ink-dim);
  font-size: .78rem; text-transform: uppercase; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ---- Skip link ---------------------------------------------------------- */
.skip-link {
  position: absolute; left: .5rem; top: -3.5rem; z-index: 100;
  background: var(--c-red); color: #fff; padding: .55rem .95rem;
  font-family: var(--font-head); font-weight: 600; border-radius: 4px;
  transition: top .15s ease;
}
.skip-link:focus { top: .5rem; }

/* =========================================================================
   HEADER / NAV  — ranger-station chrome
   ========================================================================= */
.site-header {
  position: relative;
  background-color: var(--c-near-black);
  background-image: var(--tex-grain);
  background-size: 320px;
  background-blend-mode: overlay;
  border-bottom: 1px solid var(--c-line);
  box-shadow: 0 2px 0 rgba(0,0,0,.5), 0 6px 14px rgba(0,0,0,.35);
}
.site-header .wrap:first-child {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 66px;
}

.brand { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
/* max-width:none overrides the global img cap so the fixed-height wordmark
   keeps its aspect ratio instead of being clamped narrow (squished) in the
   flex header. */
.brand .brand-wordmark { height: 54px; width: auto; max-width: none; display: block; }

.primary-nav ul {
  list-style: none; display: flex; gap: 1.5rem; margin: 0; padding: 0;
  font-family: var(--font-head); font-weight: 600;
}
.primary-nav a {
  display: inline-block; text-decoration: none; color: var(--c-ink-dim);
  padding: .45rem 0; font-size: .98rem; border-bottom: 3px solid transparent;
  transition: color .12s ease, border-color .12s ease;
}
.primary-nav a:hover { color: var(--c-ink); }
.primary-nav a[aria-current="page"] { color: var(--c-ink); border-bottom-color: var(--c-red); }

.nav-toggle {
  display: none; background: var(--c-grey-brown); cursor: pointer;
  border: 1px solid #00000066; border-top-color: rgba(255,255,255,.18);
  border-radius: 5px; color: var(--c-ink); padding: .4rem; box-shadow: var(--shadow-plate);
}
.nav-toggle img { width: 24px; height: 24px; display: block; }

.breadcrumb-row { padding-bottom: .5rem; margin-top: -.2rem; }
.breadcrumb { display: none; font-family: var(--font-mono); color: var(--c-ink-dim);
  font-size: .74rem; letter-spacing: .16em; }

/* =========================================================================
   BUTTONS — Windows 98 hard 3D bevel. Red text on black, every section.
   Outset border (light top/left, dark bottom/right) presses inward on click.
   ========================================================================= */
.btn {
  --btn-bg: #0c0a08;
  --bevel-light: #5a5043;
  --bevel-dark:  #000;
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--font-head); font-weight: 700; font-size: 1rem; line-height: 1.1;
  text-decoration: none; color: var(--c-red-bright); cursor: pointer;
  padding: .66rem 1.15rem; border-radius: 0; text-align: center;
  background: var(--btn-bg);
  border: 3px solid;
  border-color: var(--bevel-light) var(--bevel-dark) var(--bevel-dark) var(--bevel-light);
  box-shadow: inset 2px 2px 0 #4a4138, inset -2px -2px 0 #000;
  text-shadow: 0 1px 1px rgba(0,0,0,.7);
  transition: filter .12s ease;
}
.btn:hover { filter: brightness(1.3); }
.btn:active {
  border-color: var(--bevel-dark) var(--bevel-light) var(--bevel-light) var(--bevel-dark);
  box-shadow: inset -2px -2px 0 #4a4138, inset 2px 2px 0 #000;
  transform: translate(1px, 1px);
}
.btn img, .btn svg { width: 20px; height: 20px; flex: none;
  /* tint the SVG glyphs to the red-bright text color (#c0432f) */
  filter: brightness(0) saturate(100%) invert(34%) sepia(56%) saturate(1318%)
          hue-rotate(343deg) brightness(91%) contrast(90%); }

/* All three keep the same black plate — red-on-black across the board. */
.btn--primary,
.btn--demo,
.btn--press   { --btn-bg: #0c0a08; }
.btn--lg      { font-size: 1.08rem; padding: .78rem 1.45rem; }
.btn--block   { width: 100%; }

/* =========================================================================
   CONTENT scaffolding (inner pages)
   ========================================================================= */
main { min-height: 55vh; }
.page-intro { padding-top: 2.4rem; padding-bottom: 1rem; }
.page-intro > .wrap, .wrap.page-intro { max-width: 70ch; }

.lede { font-size: 1.2rem; color: var(--c-ink); max-width: 46ch; }

.placeholder-note {
  font-family: var(--font-mono); font-size: .82rem; line-height: 1.5;
  color: var(--c-red-bright); border: 1px dashed var(--c-red);
  background: rgba(154,47,35,.06);
  padding: .5rem .75rem; border-radius: 4px; display: inline-block; margin: 0 0 1rem;
}

/* Crisp screenshot/key-art "plate": printed sharp on cheap stock. NO texture. */
.plate { background: var(--c-near-black); border: 1px solid var(--c-line);
  padding: 8px; border-radius: 4px; box-shadow: 0 4px 10px rgba(0,0,0,.4); display: inline-block; }
.plate img { image-rendering: auto; border-radius: 2px; }
.plate figcaption { font-family: var(--font-mono); font-size: .78rem; color: var(--c-ink-dim);
  margin-top: .5rem; padding: 0 2px; }

/* Fact-sheet table (Press) */
table { border-collapse: collapse; width: 100%; max-width: 640px; font-family: var(--font-head);
  margin: .5rem 0 1.5rem; }
th, td { text-align: left; padding: .55rem .7rem; border-bottom: 1px solid var(--c-line);
  vertical-align: top; }
th[scope="row"] { color: var(--c-ink-dim); font-weight: 600; white-space: nowrap; width: 11rem; }

.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.25rem 0; }

/* ---- Press page: backdrop image + frosted "document" panel ----
   Scoped to body.page-press so it never leaks to the other pages.
   Image stays visible around the panel; the panel keeps the fact
   sheet crisp and scannable. The backdrop is its own editable file:
   just drop a new image over assets/img/contact_image.jpg. */
.page-press {
  background-color: var(--c-bg);
  background-image:
    linear-gradient(rgba(20,17,14,.6), rgba(20,17,14,.76)),
    url('../img/contact_image.jpg');
  background-size: cover; background-position: center; background-attachment: fixed;
}
.sheet {
  background: rgba(18,15,12,.78);
  border: 1px solid var(--c-line); border-radius: 6px;
  padding: 1.75rem 2rem; margin: 2.5rem auto;
  box-shadow: 0 12px 34px rgba(0,0,0,.5);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
/* Store embed widgets (Steam / itch.io) on the Press page */
.page-press .sheet { max-width: 730px; }   /* widen so the 646px store widgets fit, not clipped */
.press-kit-cta { margin: 0 0 1.5rem; }
.store-widgets { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem;
  margin: .5rem 0 1.75rem; max-width: 100%; overflow-x: auto; }
.store-widget { border: 0; flex: 0 0 auto; }
.demo-note { font-style: italic; color: var(--c-ink-dim); margin: -.25rem 0 1.5rem; }

/* =========================================================================
   FOOTER
   ========================================================================= */
.site-footer {
  /* No top margin: spacing comes from the footer's own padding so a self-
     coloured final section (cork, desk, image) meets the footer flush
     instead of revealing a band of body background. */
  background-color: var(--c-near-black);
  background-image: var(--tex-grain);
  background-size: 320px; background-blend-mode: overlay;
  border-top: 1px solid var(--c-line);
  font-family: var(--font-head); color: var(--c-ink-dim); font-size: .9rem;
}
.site-footer .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; padding-top: 2.25rem; padding-bottom: 1.8rem;
}
.site-footer .studio { display: flex; align-items: center; gap: .6rem; }
.site-footer .studio img { height: 34px; width: auto; }
.site-footer .footer-meta { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.site-footer .footer-social { display: inline-flex; align-items: center; gap: .55rem; }
.site-footer .footer-social a { display: inline-flex; line-height: 0; }
.site-footer .footer-social img { width: 18px; height: 18px; opacity: .55;
  transition: opacity .12s ease; }
.site-footer .footer-social a:hover img,
.site-footer .footer-social a:focus-visible img { opacity: 1; }

/* =========================================================================
   MOBILE (<= 768px): hamburger only, no visible nav row
   ========================================================================= */
@media (max-width: 768px) {
  .nav-toggle { display: inline-flex; }
  .breadcrumb { display: block; }

  /* The wordmark is a wide 8:1 graphic, so on narrow screens cap it by width
     (height auto) — it scales uniformly without squishing and always leaves
     room for the hamburger instead of being clamped flat. */
  .brand .brand-wordmark { height: auto; width: auto; max-width: 240px; }

  .primary-nav {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 40;
    background-color: var(--c-near-black);
    background-image: var(--tex-grain); background-size: 320px; background-blend-mode: overlay;
    border-bottom: 1px solid var(--c-line);
    box-shadow: 0 12px 20px rgba(0,0,0,.5);
    display: none;
  }
  .primary-nav.open { display: block; }
  .primary-nav ul { flex-direction: column; gap: 0; padding: .25rem 1.25rem .5rem; }
  .primary-nav li { border-bottom: 1px solid rgba(255,255,255,.06); }
  .primary-nav li:last-child { border-bottom: none; }
  .primary-nav a { display: block; padding: .9rem 0; font-size: 1.06rem; border-bottom: none; }
  /* Active link: high-contrast ink text + red marker (red-on-near-black text
     alone fails WCAG AA, so the red lives in the border, not the text). */
  .primary-nav a[aria-current="page"] { color: var(--c-ink);
    border-left: 3px solid var(--c-red); padding-left: .7rem; }

  .btn-row .btn { flex: 1 1 calc(50% - .75rem); }  /* 2×2 on mobile */
}

/* =========================================================================
   COVER — layered window scene
   ========================================================================= */
.cover { position: relative; }

.cover__scene {
  position: relative; width: 100%;
  aspect-ratio: 16 / 9; max-height: 88vh;
  overflow: hidden; background: #000;
}

.cover__video, .cover__still, .cover__fg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.cover__video { z-index: 1; }
.cover__still { z-index: 1; display: none; }      /* fallback only */
.cover__fg    { z-index: 2; pointer-events: none; } /* desk occludes; hole reveals */

.cover__overlay {           /* text + buttons grouped at the bottom */
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end; text-align: center;
  gap: 1.1rem; padding: 2rem 2rem 3.5%;
}
.cover__overlay::before {   /* bottom-up scrim under the text + buttons */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 60%; z-index: -1;
  background: linear-gradient(to top, rgba(0,0,0,.74), rgba(0,0,0,.34) 42%, transparent 75%);
}

.cover__tagline {
  font-family: var(--font-serif); color: #fff;
  font-size: clamp(1.05rem, 2.3vw, 1.4rem); line-height: 1.45;
  text-shadow: 0 2px 6px rgba(0,0,0,.95), 0 0 18px rgba(0,0,0,.8);
  max-width: 42ch; margin: 0;
}
.cover__cta {               /* in flow, directly below the tagline */
  justify-content: center; margin: 0;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.55));
}
.cover__cta .btn,
.board__cta .btn {          /* same black plate; deeper drop shadow over busy art */
  box-shadow: inset 2px 2px 0 #4a4138, inset -2px -2px 0 #000, 0 3px 8px rgba(0,0,0,.6);
}
.cover__cta .btn:active,
.board__cta .btn:active {
  box-shadow: inset -2px -2px 0 #4a4138, inset 2px 2px 0 #000, 0 2px 5px rgba(0,0,0,.6);
}

@media (max-width: 768px) {
  .cover__scene { aspect-ratio: 3 / 4; max-height: 84vh; }
  .cover__overlay { gap: .85rem; padding: 1.25rem 1.25rem 3.5%; }
  .cover__cta.btn-row .btn { flex: 0 1 auto; }  /* size to content; wrap if tight */
  .cover__cta .btn { font-size: 1rem; padding: .68rem 1rem; }  /* fit both side-by-side */
}

/* =========================================================================
   TRAILER LIGHTBOX
   ========================================================================= */
.lightbox { position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.lightbox[hidden] { display: none; }
.lightbox__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.88); }
.lightbox__dialog { position: relative; width: min(960px, 100%); }
.lightbox__frame { position: relative; aspect-ratio: 16 / 9; background: #000;
  border: 1px solid var(--c-line); box-shadow: 0 12px 50px rgba(0,0,0,.75); }
.lightbox__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lightbox__close {
  position: absolute; top: -3rem; right: 0;
  background: none; border: 0; color: #fff; cursor: pointer;
  font-size: 2.2rem; line-height: 1; padding: .2rem .5rem; font-family: var(--font-head);
}
.lightbox__close:hover { color: var(--c-red-bright); }

/* =========================================================================
   HANDBOOK — desktop two-page spread on the desk; mobile paper column
   ========================================================================= */
.book {
  background-color: var(--c-near-black);
  background-image:
    linear-gradient(rgba(20,17,14,.55), rgba(20,17,14,.78)),
    url('../img/handbook-scene.jpg');
  background-size: cover; background-position: center;
  padding: 3rem 1.25rem;
}
.book__spread {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem;
  align-items: stretch;                 /* both sheets share the taller one's height */
}
.page {
  background-color: var(--c-paper);
  background-image: url('../img/tex-paper.png');
  background-size: 400px; background-blend-mode: multiply;
  color: var(--c-paper-ink);
  padding: 2.1rem 2.3rem; border-radius: 3px;
  box-shadow: 0 12px 32px rgba(0,0,0,.5);
}
.page h1, .page h2, .page h3 { font-family: var(--font-hb-head); letter-spacing: -.02em; }
.page h1 { color: #7a2a20; }
.page h2 { color: #3a2f25; }
.page h3 { color: #3a2f25; }
.page p, .page .lede { font-family: var(--font-hb-body); font-size: .95rem; line-height: 1.6; }
.page .lede { color: var(--c-paper-ink); font-size: 1.05rem; }
.page a { color: #7a2a20; }
.page .mono-label { font-family: var(--font-hb-head); color: #7a6a52; margin-top: 0; }
.page__divider { width: 100%; height: auto; color: #b9a888; opacity: .85; margin: 1.6rem 0; }
.page .plate { display: block; background: #1d1a15; margin: 0 0 1.25rem; }
.page .plate:last-child { margin-bottom: 0; }
.page .plate figcaption { font-family: var(--font-hb-body); color: #b7a98f; }
.page .plate figcaption .fig-num { display: block; font-family: var(--font-hb-head);
  letter-spacing: .03em; color: #cdbb97; margin-bottom: .1rem; }

/* Redacted censor bar — black marker over classified content */
.redacted {
  background: #100d0b; color: transparent; user-select: none;
  padding: 0 .15em; margin: 0 .03em; border-radius: 1px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.5);
}

/* =========================================================================
   MEALY MOUNTAINS — desktop corkboard + string; mobile stacked note cards
   ========================================================================= */
.board {
  position: relative;
  background-color: var(--c-bg);
  padding-bottom: 2.5rem;
}
.board__head { padding-top: 2.4rem; }
.board__head h1, .board__head .mono-label { text-shadow: 0 2px 10px rgba(0,0,0,.85); }
.board__pinboard {                       /* full-bleed cork: ONE image covers this box */
  position: relative; width: 100%; padding: 1.5rem 1.25rem 2rem;
  background-color: var(--c-bg);
  background-image:
    linear-gradient(rgba(20,17,14,.55), rgba(20,17,14,.78)),
    url('../img/mealy-corkboard.jpg');
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.board__inner {                          /* scatter canvas — definite height for % positions */
  position: relative; max-width: var(--maxw); margin: 0 auto;
  aspect-ratio: 16 / 9;
}
/* JS mode: main.js sizes the pinboard stage and pins the scatter canvas to the
   cork interior (the "safe zone") so notes/strings never land on the wood frame.
   Without JS, the rules above are a working fallback. */
.board--js .board__pinboard { padding: 0; }
.board--js .board__inner {
  position: absolute; max-width: none; margin: 0; aspect-ratio: auto;
  /* top/left/width/height set inline by main.js */
}
.board__string { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1;
  opacity: .85; filter: drop-shadow(0 1px 1px rgba(0,0,0,.5)); pointer-events: none; }

/* Sticky note = clickable button showing only its title; click opens the popup */
.note {
  position: absolute; z-index: 2;
  width: clamp(122px, 14vw, 180px);
  background-color: var(--c-paper);
  background-image: url('../img/tex-paper.png');
  background-size: 300px; background-blend-mode: multiply;
  color: var(--c-paper-ink);
  padding: .85rem .85rem .9rem; border: none; border-radius: 2px;
  box-shadow: 0 8px 18px rgba(0,0,0,.5);
  cursor: pointer; text-align: left;
  transition: box-shadow .12s ease;
}
.note:hover, .note:focus-visible { box-shadow: 0 13px 28px rgba(0,0,0,.65); z-index: 5; }
.note__title { display: block; font-family: var(--font-marker); font-weight: 400;
  font-size: 1.05rem; line-height: 1.08; color: #2c241d; }
.note__pin { position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  width: 24px; height: auto; filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)); z-index: 1; }

/* Photo notes: small thumbnail + scrawled caption */
.note--photo { width: clamp(122px, 13vw, 170px); }
.note__thumb { display: block; width: 100%; height: auto; border: 3px solid #1d1a15; }
.note--photo .note__title { font-family: var(--font-marker); font-size: .85rem;
  line-height: 1.1; color: #2c241d; margin-top: .45rem; }

/* Scatter — desktop positions (top/left % on the 16:9 canvas) + rotations */
.note--a { top: 5%;  left: 2%;  transform: rotate(-3deg); }
.note--f { top: 2%;  left: 26%; transform: rotate(2.5deg); }
.note--b { top: 9%;  left: 50%; transform: rotate(-1.5deg); }
.note--d { top: 4%;  left: 74%; transform: rotate(3deg); }
.note--c { top: 50%; left: 3%;  transform: rotate(2deg); }
.note--g { top: 48%; left: 27%; transform: rotate(-2.5deg); }
.note--e { top: 52%; left: 51%; transform: rotate(1.5deg); }
.note--h { top: 48%; left: 75%; transform: rotate(-2deg); }

.board__cta { padding-top: 1.6rem; text-align: center; }
.board__cta .placeholder-note { margin-top: 1rem; }

/* ---- Corkboard note popup ---- */
.notepop { position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.notepop[hidden] { display: none; }
.notepop__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.82); }
.notepop__card {
  position: relative; width: min(540px, 100%); max-height: 86vh; overflow: auto;
  background-color: var(--c-paper);
  background-image: url('../img/tex-paper.png'); background-size: 400px; background-blend-mode: multiply;
  color: var(--c-paper-ink);
  padding: 1.9rem 2rem; border-radius: 3px;
  box-shadow: 0 22px 60px rgba(0,0,0,.7); transform: rotate(-.6deg);
}
.notepop__close { position: absolute; top: .3rem; right: .6rem;
  background: none; border: 0; font-size: 1.9rem; line-height: 1; cursor: pointer;
  color: #6a5641; font-family: var(--font-head); }
.notepop__close:hover { color: var(--c-red); }
.notepop__title { font-family: var(--font-marker); font-weight: 400; color: #2c241d;
  font-size: 1.7rem; margin: 0 0 .6rem; line-height: 1.1; }
.notepop__title::before { content: none; }
.notepop__content p { font-family: var(--font-hand); font-size: 1.3rem; line-height: 1.55;
  margin: 0; color: var(--c-paper-ink); }
/* photo popup: paper card with a framed photo + a body-font caption */
.notepop--image .notepop__card { width: min(860px, 100%); transform: none; }
.notepop--image .notepop__content img { display: block; width: 100%; height: auto;
  border: 6px solid #1d1a15; box-shadow: 0 4px 12px rgba(0,0,0,.4); }
.notepop--image .notepop__caption { font-family: var(--font-hand); font-size: 1.15rem; line-height: 1.7;
  color: var(--c-paper-ink); margin: 1.1rem 0 0; }

/* ---- Handbook + Mealy: mobile flattened layouts ------------------------- */
@media (max-width: 768px) {
  /* Handbook: keep the desk scene (inherited from .book); lay the content out as
     paper cards + framed plates over it, with the field photos interleaved between
     the text sections (screenshot-first per pair) instead of piled at the end. */
  .book { padding: 1.5rem 1.1rem; }
  .book__spread { display: flex; flex-direction: column; gap: 1.1rem; }
  /* lift each block out of its page so text + plates share one column */
  .page--text, .page--plates { display: contents; }

  /* text blocks become paper cards (same paper as the desktop sheets) */
  .hb-block {
    background-color: var(--c-paper);
    background-image: url('../img/tex-paper.png');
    background-size: 400px; background-blend-mode: multiply;
    color: var(--c-paper-ink);
    padding: 1.4rem 1.35rem; border-radius: 3px;
    box-shadow: 0 10px 26px rgba(0,0,0,.5);
  }
  .hb-block > :first-child { margin-top: 0; }
  .hb-block > :last-child { margin-bottom: 0; }
  .page__divider { display: none; }              /* desktop flourish; not needed stacked */

  /* screenshots: framed plate cards sitting on the desk between the text cards */
  .page .plate { margin: 0; border-radius: 3px; overflow: hidden;
    box-shadow: 0 10px 26px rgba(0,0,0,.5); }

  /* interleave order: intro, then [photo → its section] paired down the page */
  .hb-intro { order: 0; }
  .page--plates .plate:nth-of-type(1) { order: 1; }
  .page--text  .hb-sec:nth-of-type(1) { order: 2; }
  .page--plates .plate:nth-of-type(2) { order: 3; }
  .page--text  .hb-sec:nth-of-type(2) { order: 4; }
  .page--plates .plate:nth-of-type(3) { order: 5; }
  .page--text  .hb-sec:nth-of-type(3) { order: 6; }
  .page--plates .plate:nth-of-type(4) { order: 7; }
  .page--text  .hb-sec:nth-of-type(4) { order: 8; }

  /* Press: give fact-sheet values more room on narrow screens */
  th[scope="row"] { width: 7.5rem; }
  .sheet { margin: 1.5rem .9rem; padding: 1.25rem 1.1rem; }
  .page-press { background-attachment: scroll; }  /* avoid iOS fixed-bg jank */

}

/* ---- Mealy: stack the notes below the full corkboard width (avoids 4-note
   scatter overlap on narrow desktops); keeps cork + pins, drops the strings ---- */
/* Corkboard stays scattered on mobile — just a taller canvas + tighter coords */
@media (max-width: 768px) {
  .board__inner { aspect-ratio: 1 / 2; }
  .note--a { top: 1%;  left: 3%;  }
  .note--d { top: 13%; left: 5%;  }
  .note--c { top: 42%; left: 2%;  }
  .note--h { top: 53%; left: 6%;  }
  .note--f { top: 3%;  left: 52%; }
  .note--b { top: 30%; left: 50%; }
  .note--g { top: 42%; left: 52%; }
  .note--e { top: 70%; left: 50%; }
}

/* ---- Reduced motion ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
  /* Serve the composited still instead of the window video. */
  .cover__video { display: none; }
  .cover__still { display: block; }
}