/* Shared finish: preserve the original artwork and use one paper surface. */
@font-face {
  font-family:'Special Elite';
  src:url('/assets/fonts/special-elite-400.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
body.home, body.editorial.type-pairing {
  --paper:#eee3d0;
  --brick:#a43b2c;
  background:var(--paper) url('/assets/paper-texture.webp') center top/700px 700px repeat;
  background-blend-mode:multiply;
}
/* Only the decoration is masked. Text stays in ordinary document flow. */
body.home::before {
  content:'';
  position:absolute;
  inset:0 0 auto;
  height:clamp(620px,62vw,1000px);
  z-index:0;
  opacity:1;
  pointer-events:none;
  background:url('/assets/pcb-sage-paper.png') center top/cover no-repeat;
  mask-image:linear-gradient(#000 70%,transparent 100%),radial-gradient(ellipse 42% 32% at 27% 48%,transparent 48%,#000 95%);
  mask-composite:intersect;
}
.home main { position:relative; }
.home .home-hero { position:relative; }
.home .hero-copy .intro { margin-bottom:0; }
.home .hero-art {
  mask-image:linear-gradient(90deg,transparent,#000 2%,#000 98%,transparent),linear-gradient(transparent,#000 2%,#000 98%,transparent);
  mask-composite:intersect;
}
.home .scroll-story, .home .home-guides.notebook { background:none; }
.home .home-guides::before, .story-frame::before, .story-frame::after { content:none; }
.home .scroll-story { --story-travel:max(380px,65svh); }
.story-frame {
  background:var(--paper) url('/assets/paper-texture.webp') center/700px;
  background-blend-mode:multiply;
  mask-image:linear-gradient(transparent,#000 8px,#000 calc(100% - 12px),transparent);
}
.story-pcb { background:var(--paper) url('/assets/paper-texture.webp') center/700px; background-blend-mode:multiply; box-shadow:none; }
.story-pcb::before { content:none; }
.story-pcb > img { opacity:.8; mask-image:linear-gradient(transparent,#000 12%,#000 82%,transparent); }
.home .story-copy h2 { font-family:'Special Elite','Courier New',monospace; font-weight:400; }
.home .home-guides.notebook { padding-top:36px; z-index:auto; }
.notebook-collage { mix-blend-mode:multiply; }
.notebook-collage img, .editorial .row-art {
  mix-blend-mode:multiply;
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent),linear-gradient(transparent,#000 8%,#000 92%,transparent);
  mask-composite:intersect;
}
.notebook-collage img { mix-blend-mode:normal; }
.notebook-entry::before { background:var(--paper); }
/* Headings keep the same voice; long reading text stays easy to read. */
.editorial.type-pairing main :is(h1,h2,h3),
.editorial.type-pairing main .page-intro h1,
.editorial.type-pairing main .about-intro h1,
.editorial.type-pairing main .scene-intro h1,
.editorial.type-pairing main .editorial-row h2,
.editorial.type-pairing main .editorial-split h2,
.editorial.type-pairing main .about-copy h2,
.editorial.type-pairing main .next-step h2 {
  font-family:'Special Elite','Courier New',monospace;
  font-weight:400;
  letter-spacing:normal;
  line-height:1.3;
}
.editorial.type-pairing.work-guide,
.editorial.type-pairing .editorial-row.guide-work { --accent:#515f3b; }
.editorial.type-pairing .next-step,
.editorial.type-pairing .editorial-split,
.editorial.type-pairing .guide-sources,
.editorial.type-pairing .practice-small-tool { background:#4962470d; }
/* One menu and one interaction on every page. The edge belongs to the panel,
   so a second differently coloured pseudo-element cannot leave a seam. */
body:is(.home,.editorial.type-pairing) .site-header { position:relative; z-index:20; background:transparent; }
body:is(.home,.editorial.type-pairing) .site-header-inner { position:relative; max-width:1180px; min-height:86px; flex-wrap:nowrap; }
body:is(.home,.editorial.type-pairing) .wordmark { font-size:clamp(28px,3vw,40px); }
body:is(.home,.editorial.type-pairing) .nav-toggle { display:flex; align-items:center; gap:20px; border:0; padding:12px 0 12px 14px; font-family:'Special Elite',monospace; font-size:20px; color:var(--ink); background:none; }
body:is(.home,.editorial.type-pairing) .menu-bars { display:flex; flex-direction:column; align-items:flex-end; gap:6px; width:40px; }
body:is(.home,.editorial.type-pairing) .menu-bars i { display:block; height:3px; width:40px; background:var(--ink); }
body:is(.home,.editorial.type-pairing) .menu-bars i:first-child { width:20px; }
body:is(.home,.editorial.type-pairing) .menu-bars i:nth-child(2) { width:30px; }
body:is(.home,.editorial.type-pairing) .site-nav {
  position:absolute; inset:76px 0 auto auto; width:min(320px,88vw);
  display:flex; flex-direction:column; align-items:stretch; gap:0;
  padding:20px 30px 32px; border:0;
  background:var(--paper) url('/assets/paper-texture.webp') center/700px;
  background-blend-mode:multiply;
  box-shadow:0 12px 24px #30251424;
  filter:none; opacity:0; visibility:hidden;
  transform:translateY(-8px); transition:opacity .2s,transform .2s,visibility .2s;
  z-index:30;
}
body:is(.home,.editorial.type-pairing) .site-nav::after { content:none; }
body:is(.home,.editorial.type-pairing) .site-nav.is-open { display:flex; opacity:1; visibility:visible; transform:none; }
body:is(.home,.editorial.type-pairing) .site-nav a { display:flex; justify-content:space-between; gap:20px; padding:12px 3px; font-family:'Special Elite',monospace; font-size:27px; font-weight:400; text-decoration:none; }
body:is(.home,.editorial.type-pairing) .site-nav a::after { content:'→'; font-family:'Space Grotesk',sans-serif; }
body:is(.home,.editorial.type-pairing) .site-nav a:hover, body:is(.home,.editorial.type-pairing) .site-nav a[aria-current='page'] { color:var(--brick); }
body:is(.home,.editorial.type-pairing) .menu-close { display:flex; gap:16px; align-items:center; align-self:flex-end; border:0; background:none; color:var(--ink); cursor:pointer; padding:0 0 14px 14px; font-size:15px; min-height:44px; }
body:is(.home,.editorial.type-pairing) .menu-close span { font-size:25px; }
body:is(.home,.editorial.type-pairing) .site-header :focus-visible { outline:2px solid var(--brick); outline-offset:4px; }
@media(max-width:760px) {
  body.home::before {
    height:700px;
    background-size:auto 700px;
    background-position:-70px top;
    mask-image:linear-gradient(#000 65%,transparent 94%),radial-gradient(ellipse 75% 30% at 58% 40%,transparent 55%,#000 100%);
  }
  .home .scroll-story { --story-travel:max(300px,48svh); }
  .home .story-viewport { height:clamp(340px,68svh,570px); }
  .home.home-scroll-ready .scroll-story { height:calc(clamp(340px,68svh,570px) + var(--story-travel)); }
  .home.home-scroll-ready .story-viewport { top:4svh; }
  .home .hero-art { margin-top:8px; margin-bottom:18px; }
  body:is(.home,.editorial.type-pairing) .site-header-inner { min-height:78px; }
  body:is(.home,.editorial.type-pairing) .site-nav { top:72px; }
  body:is(.home,.editorial.type-pairing) .nav-toggle { font-size:17px; gap:12px; }
  body:is(.home,.editorial.type-pairing) .menu-bars { width:34px; }
  body:is(.home,.editorial.type-pairing) .menu-bars i { width:34px; }
}
/* Paused, reduced-motion and no-script users get both scenes in normal flow. */
.home:not(.home-scroll-ready) .scroll-story { height:auto; }
.home:not(.home-scroll-ready) .story-viewport { height:auto; }
.home:not(.home-scroll-ready) .story-frame { height:auto; width:100%; overflow:visible; mask-image:none; background:none; }
.home:not(.home-scroll-ready) .story-concert,
.home:not(.home-scroll-ready) .story-pcb { display:block; position:relative; inset:auto; height:clamp(340px,50svh,480px); transform:none; }
.home:not(.home-scroll-ready) .story-pcb > img { position:absolute; inset:0; }
@media(prefers-reduced-motion:reduce) {
  body:is(.home,.editorial.type-pairing) .site-nav { transition:none; }
}