/* Page shell: type scale, the centred column, chapter frames, buttons and the interaction states shared by every section. */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg); color: var(--ink); overflow-x: hidden; -webkit-text-size-adjust: 100%; }
body, body.astro { font-family: var(--font-body); font-size: 16px; line-height: 1.6; text-align: center; overflow-x: hidden; background: var(--bg); color: var(--ink); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
img, svg { display: block; }
a { color: inherit; }
::selection { background: var(--accent); color: var(--bg); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip { position: absolute; left: var(--s2); top: -80px; z-index: 100; background: var(--ink); color: var(--bg); padding: 14px 20px; min-height: 48px; font: 300 12px/1.6 var(--font-display); letter-spacing: .3em; text-transform: uppercase; text-decoration: none; }
.skip:focus { top: var(--s2); }

/* type */
.cap { font-family: var(--font-display); font-weight: 300; text-transform: uppercase; letter-spacing: .42em; font-size: 12px; line-height: 1.6; color: var(--accent); overflow-wrap: anywhere; }
.fr { color: var(--soft); font-size: 14px; line-height: 1.6; margin-top: var(--s1); }
.lead { max-width: 46ch; margin: var(--s4) auto 0; color: var(--accent); font-size: 17px; text-wrap: balance; }
.lead span { max-width: 100%; overflow-wrap: anywhere; }
.h2 { font-family: var(--font-display); font-weight: 200; text-transform: uppercase; font-size: clamp(36px, 5.6vw, 84px); letter-spacing: .18em; padding-left: .18em; line-height: 1.1; color: var(--ink); }
.big { font-family: var(--font-display); font-weight: 200; text-transform: uppercase; font-size: clamp(30px, 5vw, 76px); letter-spacing: .12em; padding-left: .12em; line-height: 1.15; color: var(--ink); }

/* chapter frame: a sticky light-field canvas behind a natively scrolling column (nothing pins: the content scrolls over its own light) */
.ch { position: relative; height: auto !important; }
.ch > .pm-stage { position: sticky; top: 0; height: 100vh; height: 100svh; margin-bottom: -100vh; margin-bottom: -100svh; overflow: hidden; z-index: 0; pointer-events: none; background: var(--bg); }
.ch > .pm-stage canvas, .hero > .pm-stage canvas { display: block; width: 100%; height: 100%; }
.ch > .flow { position: relative; z-index: 1; padding: 0 var(--gut) var(--s8); }
.drop { width: 1px; height: 18vh; background: linear-gradient(var(--line), var(--accent)); margin: 0 auto var(--s6); transform-origin: top; }
.num { display: inline-flex; gap: 14px; align-items: center; margin-bottom: var(--s4); }
.num svg { height: 11px; width: auto; fill: var(--accent); }
.rule { height: 1px; background: var(--accent); width: min(60vw, 640px); margin: var(--s5) auto 0; transform-origin: center; }
.hair { height: 1px; background: var(--line); }

/* the replace-me tag: a clear marker for a picture the owner still has to supply */
.replace { display: inline-flex; align-items: center; gap: 10px; font: 300 12px/1.4 var(--font-display); letter-spacing: .3em; text-transform: uppercase; color: var(--accent); }
.replace::before { content: ''; width: 18px; height: 1px; background: var(--accent); }

/* buttons: the brand a-btn, rebuilt so hover is a silver sweep with the open A streaking through (owner note on the opening button) */
.a-btn { position: relative; isolation: isolate; overflow: hidden; max-width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 48px; min-width: 48px; padding: 15px 28px; border: 1px solid var(--ink); background: transparent; color: var(--ink); font-family: var(--font-display); font-weight: 300; font-size: 12px; letter-spacing: .34em; text-transform: uppercase; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color var(--t-ctl) var(--ease), border-color var(--t-ctl) var(--ease); }
.a-btn > .fill { position: absolute; inset: -1px; z-index: -1; background: var(--ink); transform: scaleX(0); transform-origin: right center; transition: transform 220ms var(--ease); }
.a-btn > .lbl { display: inline-block; min-width: 0; overflow-wrap: anywhere; transition: transform var(--t-hover) var(--ease); }
.a-btn .glyph { position: relative; width: 12px; height: 12px; overflow: hidden; flex: none; }
.a-btn .glyph svg { position: absolute; inset: 0; width: 12px; height: 12px; fill: currentColor; transition: transform var(--t-hover) var(--ease), opacity var(--t-hover) var(--ease), filter var(--t-hover) var(--ease); }
.a-btn .glyph svg + svg { transform: translateX(-160%); opacity: 0; }
.a-btn--primary { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.a-btn--primary::after { content: ''; position: absolute; inset: 0; z-index: -2; background: url('../assets/photos/paper-fibre-tile-512.png') 0 0 / 256px; mix-blend-mode: multiply; opacity: .16; pointer-events: none; }
.a-btn--primary > .fill { background: var(--accent); }
.a-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.a-btn:focus-visible > .fill { transform: scaleX(1); transform-origin: left center; transition-duration: var(--t-hover); }
.a-btn:not(.a-btn--primary):focus-visible { color: var(--bg); }
@media (hover: hover) and (pointer: fine) {
  .a-btn:hover > .fill { transform: scaleX(1); transform-origin: left center; transition-duration: var(--t-hover); }
  .a-btn:not(.a-btn--primary):hover { color: var(--bg); }
  .a-btn--primary:hover { border-color: var(--accent); }
  .a-btn:hover > .lbl { transform: translateX(-3px); }
  .a-btn:hover .glyph svg:first-child { transform: translateX(160%); opacity: 0; filter: blur(1.5px); }
  .a-btn:hover .glyph svg + svg { transform: none; opacity: 1; }
}
.a-btn:active { transition-duration: var(--t-press); }
.a-btn:active > .fill { transform: scaleX(1); transform-origin: left center; transition-duration: var(--t-press); }

/* the cursor follower from the interaction kit, drawn as the prototype's thin ring */
[data-pm-cursor-follower]:empty { background: transparent !important; border: 1px solid var(--ink); }

/* nav */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: 14px 4vw; background: linear-gradient(rgba(16, 17, 18, .92), rgba(16, 17, 18, .72)); border-bottom: 1px solid transparent; transition: border-color var(--t-hover) var(--ease); }
.nav.is-scrolled { border-bottom-color: var(--line); }
.nav .brand { display: flex; align-items: center; min-height: 48px; padding: 0 4px; }
.nav .brand img { width: 112px; height: auto; }
.nav .a-nav { display: flex; gap: 2px; list-style: none; }
.nav .a-nav a { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 12px 14px; color: var(--soft); text-decoration: none; font: 300 12px/1.6 var(--font-display); letter-spacing: .3em; text-transform: uppercase; transition: color var(--t-ctl) var(--ease); }
.nav .a-nav a::after { content: ''; position: absolute; inset: auto 14px 7px; height: 1px; background: var(--accent); pointer-events: none; transform: scaleX(0); transform-origin: right center; transition: transform var(--t-ctl) var(--ease); }
.nav .a-nav a[aria-current="true"]::after, .nav .a-nav a:focus-visible::after, .nav .a-nav a:active::after { transform: scaleX(1); transform-origin: left center; }
.nav .a-nav a:active { color: var(--ink); }
.nav .a-nav a:active::after { transition-duration: var(--t-press); }
.nav .a-nav a svg { width: 9px; height: 9px; fill: var(--accent); opacity: 0; transform: translateX(-6px); transition: opacity var(--t-ctl) var(--ease), transform var(--t-hover) var(--ease); }
.nav .a-nav a[aria-current="true"], .nav .a-nav a:focus-visible { color: var(--ink); }
.nav .a-nav a[aria-current="true"] svg { opacity: 1; transform: none; }
.nav .a-nav a:focus-visible { outline: 2px solid var(--ink); outline-offset: -4px; }
@media (hover: hover) and (pointer: fine) {
  .nav .a-nav a:hover { color: var(--ink); }
  .nav .a-nav a:hover::after { transform: scaleX(1); transform-origin: left center; }
}
.nav .a-btn { padding: 12px 20px; }

/* footer */
.foot { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s4) 4vw; border-top: 1px solid var(--line); }
.foot img { width: 92px; height: auto; }
.foot a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 4px; text-decoration: none; }
.foot a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* paper grain: the library's baked tile, desktop only (heavy finish overlays stay off under tablet width) */
.grain { position: fixed; inset: 0; z-index: 30; pointer-events: none; background: url('../assets/photos/grain-tile-512.png') 0 0 / 256px; mix-blend-mode: overlay; opacity: .05; }

@media (max-width: 900px) {
  .grain { display: none; }
  .nav .a-nav { display: none; }
}
@media (max-width: 760px) {
  :root { --gut: 5vw; }
  .h2 { letter-spacing: .1em; padding-left: .1em; }
  .big { letter-spacing: .06em; padding-left: .06em; }
  .cap { letter-spacing: .3em; }
  .lead { font-size: 16px; }
  .drop { height: 12vh; margin-bottom: var(--s5); }
  .ch > .flow { padding-bottom: var(--s7); }
  .nav { padding: 10px 5vw; }
  .nav .brand img { width: 92px; }
  .nav .a-btn { padding: 12px 14px; letter-spacing: .18em; }
  .foot { padding: var(--s3) 5vw; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 0ms !important; }
}
/* between phone and wide desktop the menu tightens instead of wrapping onto a second line */
.nav .a-nav, .nav .a-btn { flex-wrap: nowrap; white-space: nowrap; }
@media (max-width: 1240px) { .nav .a-nav a { padding: 12px 9px; letter-spacing: .2em; } .nav .a-btn { padding: 12px 16px; letter-spacing: .2em; } }

@media (max-width: 1100px) {
  .sub-page .index-wrap > .sec-index { margin-inline: 0; padding-inline: 0; width: 100%; max-width: 100%; min-width: 0; }
  .sub-page .sec-index ol { width: 100%; max-width: 100%; min-width: 0; }
  .sub-page .sec-index li { flex: 0 0 auto; }
}

/* long or unbroken menu labels shrink and wrap instead of pushing past the screen; the real labels still sit on one line */
.nav .a-nav { min-width: 0; }
.nav .a-nav li { min-width: 0; flex: 0 1 auto; }
.nav .a-nav a { white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 1100px) {
  .sub-page .sec-index ol { flex-wrap: wrap; overflow-x: visible; }
}
.nav .a-btn > .lbl { white-space: normal; max-width: 42vw; }

.big .ln > span { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }