/* Vault & Vellum. The same hand, in stone and ink. */
@font-face { font-family:'EB Garamond'; src:url('fonts/eb-garamond-latin-400-normal.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'EB Garamond'; src:url('fonts/eb-garamond-latin-400-italic.woff2') format('woff2'); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'EB Garamond'; src:url('fonts/eb-garamond-latin-600-normal.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Alegreya Sans'; src:url('fonts/alegreya-sans-latin-400-normal.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Alegreya Sans'; src:url('fonts/alegreya-sans-latin-400-italic.woff2') format('woff2'); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'Alegreya Sans'; src:url('fonts/alegreya-sans-latin-700-normal.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Uncial Antiqua'; src:url('fonts/uncial-antiqua-latin-400-normal.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
:root {
  color-scheme:light;
  --bg:#efe7d6; --surface:#f8f3e8; --text:#221c16; --accent:#9e1f3c; --accent2:#2a4a9a;
  --basalt:#1c1916; --muted:#655b4d; --rule:#c7bba5;
  --heading:'EB Garamond',Georgia,serif; --body:'Alegreya Sans',system-ui,sans-serif;
  --ornament:'Uncial Antiqua',Georgia,serif;
  --gutter:clamp(1.25rem,5vw,5.5rem); --header-height:7rem;
}
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:calc(var(--header-height) + 1rem); }
body { margin:0; background:var(--bg); color:var(--text); font:400 clamp(1.0625rem,1rem + .2vw,1.25rem)/1.65 var(--body); -webkit-font-smoothing:antialiased; }
.page { min-width:0; overflow-wrap:break-word; }
.page-home,.page-sub { position:relative; }
::selection { background:var(--accent); color:var(--surface); }
a { color:var(--accent); text-underline-offset:.22em; text-decoration-thickness:1px; transition:color .2s; }
a:hover { color:var(--accent2); }
:focus-visible { outline:3px solid var(--accent2); outline-offset:5px; }
img,svg,canvas { display:block; max-width:100%; }
img { width:100%; height:auto; object-fit:cover; }
figure,p,ul,ol,blockquote,dl { margin:0 0 1.4rem; }
figure { margin:0; }
h1,h2,h3,h4,h5,h6 { margin:0 0 1.25rem; font-family:var(--heading); font-weight:400; line-height:1.04; text-wrap:balance; }
h1 { font-size:clamp(3rem,6.5vw,7.5rem); letter-spacing:-.045em; }
h2 { font-size:clamp(2.5rem,4.7vw,5.4rem); letter-spacing:-.035em; }
h3 { font-size:clamp(1.75rem,2.6vw,2.75rem); letter-spacing:-.025em; }
h4,h5,h6 { font-size:1.5rem; }
h1 em,h2 em { color:var(--accent); font-weight:400; }
strong,b { font-weight:700; }
ul,ol { padding-left:1.25em; }
li::marker { color:var(--accent); }
hr { border:0; border-top:1px solid var(--rule); margin-block:3rem; }
blockquote { border-left:2px solid var(--accent); padding-left:1.5rem; font:italic 1.6rem/1.4 var(--heading); }
figcaption,small { font-size:.85rem; color:var(--muted); }
figcaption { padding:.75rem 0; }
table { width:100%; border-collapse:collapse; }
th,td { padding:.8rem; border-bottom:1px solid var(--rule); text-align:left; overflow-wrap:anywhere; }
th { background:var(--surface); }
pre { overflow:auto; max-width:100%; padding:1rem; background:var(--surface); }
code { overflow-wrap:anywhere; font-size:.9em; }
button,input,textarea,select { max-width:100%; font:inherit; color:inherit; background:var(--surface); border:1px solid var(--rule); padding:.65rem; }
summary { cursor:pointer; }
.wrap { width:min(calc(100% - var(--gutter)*2),1424px); margin-inline:auto; }
.sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.skip-link { position:fixed; top:1rem; left:1rem; z-index:100; padding:.75rem 1.5rem; background:var(--surface); transform:translateY(-200%); }
.skip-link:focus { transform:translateY(0); }
.grain { position:fixed; inset:0; z-index:40; pointer-events:none; opacity:.23; background-image:repeating-linear-gradient(3deg,transparent 0 3px,#72593d0d 3px 4px,transparent 4px 11px),repeating-linear-gradient(93deg,transparent 0 7px,#fffdf53d 7px 8px,transparent 8px 17px); }
.scroll-progress { position:fixed; inset:0 auto auto 0; width:100%; height:2px; transform:scaleX(0); transform-origin:left; background:var(--accent); z-index:90; pointer-events:none; }
.site-header { position:fixed; inset:0 0 auto; z-index:60; transition:transform .35s,background .35s,box-shadow .35s; }
.header-inner { display:flex; align-items:center; gap:clamp(2rem,4vw,5rem); padding-block:1.5rem; border-bottom:1px solid #2a4a9a55; }
.brand { display:inline-flex; flex:none; align-items:center; gap:.8rem; color:var(--text); font:400 clamp(1.6rem,2.2vw,2.1rem)/1 var(--heading); letter-spacing:-.035em; text-decoration:none; }
.brand-mark { position:relative; width:24px; height:34px; border:2px solid var(--accent); border-bottom:0; border-radius:50% 50% 0 0 / 36% 36% 0 0; }
.brand-mark::after { content:''; position:absolute; inset:5px 4px 0; border:1px solid var(--accent); border-bottom:0; border-radius:50% 50% 0 0; }
.site-nav { min-width:0; margin-left:auto; }
.site-nav ul { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:.1rem 1.25rem; list-style:none; margin:0; padding:0; }
.site-nav a { display:block; padding:.3rem 0; color:var(--text); font-size:.82rem; line-height:1.35; text-decoration:none; }
.site-nav a:hover,.site-nav a[aria-current='page'] { color:var(--accent); text-decoration:underline; }
.site-header.is-scrolled,.page-sub .site-header,html:not(.js) .site-header { background:#efe7d6ed; backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); box-shadow:0 1px 0 #c7bba566; }
.site-header.is-hidden:not(:focus-within) { transform:translateY(-105%); }
.hero { position:relative; isolation:isolate; min-height:100svh; display:flex; align-items:center; overflow:hidden; border-bottom:1px solid var(--rule); }
.hero::before { content:''; position:absolute; z-index:1; inset:var(--header-height) var(--gutter) 2.4rem; border-inline:1px solid #2a4a9a20; pointer-events:none; }
.hero::after { content:'01 / STONE & INK'; position:absolute; bottom:2rem; left:var(--gutter); color:var(--accent); font-size:.65rem; letter-spacing:.2em; }
.ink-canvas { display:block; position:absolute; inset:0; width:100%; height:100%; z-index:0; opacity:0; pointer-events:none; transition:opacity .8s; }
.js .ink-canvas.is-ready { opacity:1; }
.hero-media { position:absolute; inset:0 0 0 40%; z-index:-1; }
.hero-media img { height:100%; object-position:60% center; }
.hero-media::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,var(--bg),#efe7d655 45%,#efe7d626); }
.hero:has(.ink-canvas.is-ready) .hero-media { visibility:hidden; }
.no-webgl .hero-media,html:not(.js) .hero-media { visibility:visible; }
.no-webgl .ink-canvas,html:not(.js) .ink-canvas { display:none; }
.hero-inner { position:relative; z-index:2; padding-block:calc(var(--header-height) + 2.5rem) 5.5rem; }
.hero-text { position:relative; width:51%; padding-right:1.5rem; }
.hero-text::before { content:''; position:absolute; inset:-2rem -5rem -2rem calc(-1 * var(--gutter)); z-index:-1; background:linear-gradient(90deg,var(--bg) 12%,#efe7d6fa 65%,#efe7d600); pointer-events:none; }
.eyebrow,.card-kicker,.folio-date { color:var(--accent); font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.16em; line-height:1.5; }
.eyebrow { max-width:36ch; margin-bottom:1.75rem; padding-left:2.8rem; position:relative; }
.eyebrow::before { content:''; position:absolute; left:0; top:.65em; width:1.7rem; border-top:1px solid var(--accent); }
.hero h1 { font-size:clamp(3.2rem,5.15vw,6.15rem); line-height:.97; letter-spacing:-.047em; margin-bottom:1.75rem; }
.hero h1 em { font-size:1.12em; }
.lead { font-size:clamp(1.15rem,1.4vw,1.45rem); line-height:1.55; max-width:62ch; }
.hero .lead { max-width:47ch; font-size:clamp(1rem,1.2vw,1.17rem); line-height:1.55; }
.hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.7rem; margin-top:2rem; }
.btn { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:.8rem 1.45rem; font-size:.9rem; text-decoration:none; border:1px solid var(--accent); transition:background .2s,color .2s,border-color .2s; }
.btn-primary { color:var(--surface); background:var(--accent); }
.btn-primary::after { content:'↗'; margin-left:1.7rem; }
.btn-primary:hover { color:var(--surface); background:var(--accent2); border-color:var(--accent2); }
.btn-ghost { padding-inline:0; border-color:transparent; border-bottom-color:var(--accent); }
.btn-ghost:hover { border-bottom-color:var(--accent2); }
.scroll-cue { position:absolute; z-index:2; right:var(--gutter); bottom:2rem; display:flex; align-items:center; gap:1rem; margin:0; text-transform:uppercase; letter-spacing:.2em; font-size:.75rem; }
.scroll-cue::after { content:''; width:5rem; border-top:1px solid var(--accent); }
.word,.word-inner { display:inline-block; vertical-align:baseline; max-width:100%; }
.word { overflow:clip; overflow-clip-margin:.2em; }
.word-inner { padding-bottom:.13em; margin-bottom:-.13em; }
.section { padding-block:clamp(3.25rem,6vw,6.5rem); }
.section-title { max-width:19ch; }
.section-intro { max-width:56ch; color:var(--muted); margin-bottom:3rem; }
.story { position:relative; }
.story-arch { padding-block:0; }
.story-inner { min-height:100svh; display:grid; grid-template-columns:1.1fr 1fr; align-items:center; gap:8%; padding-block:5rem; }
.arch-stage { position:relative; padding:2rem 10%; border-inline:1px solid #2a4a9a30; background:repeating-linear-gradient(0deg,transparent 0 47px,#2a4a9a0e 47px 48px); }
.arch-stage::before { content:''; position:absolute; inset:0 -5px; pointer-events:none; background:radial-gradient(circle,#9e1f3c75 1px,transparent 1.5px) left top / 9px 48px repeat-y,radial-gradient(circle,#9e1f3c75 1px,transparent 1.5px) right top / 9px 48px repeat-y; }
.arch-stage::after { content:'FIG. I / THE GEOMETRY OF STILLNESS'; display:block; margin-top:1.5rem; color:var(--muted); font-size:.62rem; text-align:center; letter-spacing:.17em; }
.arch-svg { width:100%; max-height:65svh; stroke:#221c16; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.arch-ground { stroke-width:1; }
.arch-wall { stroke-width:2.5; }
.arch-col { stroke-width:4; }
.arch-cap { stroke-width:3; }
.arch-curve { stroke-width:7; }
.arch-outer { stroke-width:4; }
.arch-vault { stroke-width:2; }
.arch-window { stroke:var(--accent); stroke-width:3; }
.story-steps { min-width:0; }
.story-steps .section-title { font-size:clamp(2.2rem,3.2vw,3.7rem); margin-bottom:2rem; }
.story-step { position:relative; padding:1.5rem 0 1.5rem 3.4rem; border-top:1px solid var(--rule); transition:opacity .35s; font-size:1.05rem; }
.story-step p:last-child { margin:0; }
.js .story-arch.is-drawing .story-step { opacity:.72; padding-block:1vh; font-size:1rem; line-height:1.45; }
.js .story-arch.is-drawing .story-inner { padding-block:4vh; }
.js .story-arch.is-drawing .section-title { font-size:clamp(2rem,4vh,3rem); margin-bottom:2vh; }
.js .story-arch.is-drawing .step-title { font-size:clamp(1.5rem,3vh,2rem); margin-bottom:.4rem; }
.js .story-arch.is-drawing .step-num { top:1vh; }
.js .story-arch.is-drawing .story-step.is-active { opacity:1; }
.story-step.is-active .step-title { color:var(--accent); }
.step-num { position:absolute; top:1.5rem; left:0; color:var(--accent); font:400 1.1rem/1.5 var(--ornament); }
.step-title { margin-bottom:.65rem; font-size:2rem; }
.home-essay { position:relative; border-top:1px solid var(--rule); }
.home-essay::before { content:'\00A7'; position:absolute; top:3rem; left:var(--gutter); color:var(--accent); font:italic 1rem var(--heading); }
.prose { position:relative; max-width:68ch; border-left:1px solid #9e1f3c66; padding:clamp(1.25rem,4vw,4rem); background:var(--surface); font-size:clamp(1.1rem,1.1vw + .5rem,1.3rem); }
.prose::before { content:''; position:absolute; inset:0 auto 0 -5px; width:9px; pointer-events:none; background:radial-gradient(circle,#9e1f3c85 1px,transparent 1.5px) center 12px / 9px 32px repeat-y; }
.prose h2 { font-size:clamp(1.9rem,2.65vw,3rem); margin-top:3rem; margin-bottom:1.4rem; }
.prose h3 { font-size:1.8rem; margin-top:2rem; }
.prose > :first-child { margin-top:0; }
.prose > :last-child { margin-bottom:0; }
.prose p { text-wrap:pretty; }
.prose > p:first-of-type::first-letter { float:left; font:600 4.6rem/.9 var(--heading); color:var(--accent); padding:.15em .14em 0 0; }
.prose-home { margin-inline:auto; background:transparent; padding-block:0; }
.band-media { width:100%; height:70svh; min-height:340px; max-height:1000px; overflow:hidden; clip-path:ellipse(72% 100% at 50% 100%); }
.band-media img { height:100%; object-position:center 45%; }
.story-folios { overflow:hidden; }
.story-folios .section-title { max-width:21ch; }
.folio-viewport { overflow-x:auto; overflow-y:hidden; margin-inline:var(--gutter); padding:1rem 0 2rem; scrollbar-color:var(--accent) var(--bg); }
.js .story-folios.is-tracking .folio-viewport { overflow:hidden; }
.folio-track { display:flex; flex-wrap:nowrap; gap:1.5rem; list-style:none; counter-reset:leaf; width:max-content; padding:0; margin:0; }
.folio { position:relative; counter-increment:leaf; flex:0 0 clamp(260px,31vw,440px); width:clamp(260px,31vw,440px); padding:2rem 2rem 2.5rem; background:linear-gradient(90deg,transparent 21px,#9e1f3c25 21px 22px,transparent 22px),var(--surface); border:1px solid var(--rule); border-top-color:var(--accent2); box-shadow:4px 5px 0 #d7ccb6; border-top-color:var(--accent); }
.folio::after { content:counter(leaf,decimal-leading-zero); position:absolute; bottom:.65rem; right:1.2rem; color:var(--accent); font:italic .9rem var(--heading); }
.folio-date { display:block; border-bottom:1px solid var(--rule); padding-bottom:.8rem; font-size:.7rem; font-variant:small-caps; }
.folio-glyph { display:block; margin:1.5rem 0; font:400 clamp(6rem,10vw,10rem)/1.3 var(--ornament); color:var(--accent); text-align:center; background:repeating-linear-gradient(transparent 0 31px,#2a4a9a26 31px 32px); transition:scale .4s; }
.folio-title { font-size:clamp(1.8rem,2.3vw,2.6rem); }
.folio-text { font-size:1.05rem; line-height:1.55; margin:0; }
.folio.is-active { border-top-color:var(--accent); }
.js .story-folios.is-tracking .section-title { font-size:clamp(2.5rem,6vh,4.5rem); margin-bottom:1.5vh; }
.js .story-folios.is-tracking .section-intro { margin-bottom:2vh; }
.js .story-folios.is-tracking .folio { padding:1.25rem 1.75rem 1.75rem; }
.js .story-folios.is-tracking .folio-title { font-size:clamp(1.8rem,3.6vh,2.5rem); margin-bottom:1rem; }
.js .story-folios.is-tracking .folio-text { font-size:1rem; line-height:1.4; }
.story-compare { padding-top:0; color:var(--surface); background:var(--basalt); }
.compare-media { --arch:0; height:70svh; min-height:320px; max-height:850px; overflow:hidden; clip-path:inset(calc(10% - var(--arch)*10%) calc(22% - var(--arch)*22%) 0 round 50% 50% 0 0); }
.compare-media img { height:100%; }
.compare-inner { padding-top:clamp(3rem,7vw,8rem); }
.compare-inner .section-title { max-width:20ch; font-size:clamp(3rem,6.8vw,7.5rem); }
.story-compare h2 em { color:#e7b3ba; }
.story-compare .section-intro { color:#c8beab; }
.compare-cols { display:grid; grid-template-columns:1fr 1fr; margin-block:3rem; border-top:1px solid #8b807166; }
.compare-col { position:relative; padding:2.5rem 3rem 1rem 5.5rem; }
.compare-col + .compare-col { border-left:1px solid #8b807166; }
.compare-col::before { content:''; position:absolute; top:2.6rem; left:1rem; width:2.5rem; height:3.5rem; border:2px solid #e7b3ba; border-bottom:0; border-radius:50% 50% 0 0 / 36% 36% 0 0; }
.compare-col + .compare-col::before { border:0; border-radius:0; background:#e7b3ba; clip-path:polygon(0 100%,0 56%,6% 36%,20% 18%,50% 0,80% 18%,94% 36%,100% 56%,100% 100%,94% 100%,94% 57%,88% 39%,75% 23%,50% 7%,25% 23%,12% 39%,6% 57%,6% 100%); }
.compare-col h3 { font-size:2.5rem; }
.compare-col ul { list-style:none; padding:0; margin:0; }
.compare-col li { border-top:1px solid #8b807133; padding:.45rem 0; }
.story-compare .card-link { color:#efc1c7; }
.story-compare a:hover { color:white; }
.story-compare :focus-visible,.site-footer :focus-visible { outline-color:#b8c9ff; }
.section-guides { border-bottom:1px solid var(--rule); }
.section-guides .section-title { font-size:clamp(4rem,8vw,9rem); }
.card-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2rem; }
.card { position:relative; isolation:isolate; min-width:0; display:flex; flex-direction:column; padding:clamp(1.5rem,2.8vw,3rem); border:1px solid var(--rule); border-top-color:var(--accent); background:linear-gradient(90deg,transparent 13px,#9e1f3c24 13px 14px,transparent 14px),var(--surface); box-shadow:3px 4px 0 #d9cfbc; transition:translate .3s,box-shadow .3s; }
.card::before { content:''; position:absolute; inset:0; z-index:-1; background:radial-gradient(circle at var(--mx,50%) var(--my,20%),#ffffffbf,transparent 65%); opacity:0; transition:opacity .3s; pointer-events:none; }
.card-kicker { border-bottom:1px solid var(--rule); padding-bottom:1rem; margin-bottom:2rem; }
.card-title { font-size:clamp(2rem,2.8vw,3.1rem); }
.card-text { font-size:1.05rem; line-height:1.6; }
.card-link { font-size:1rem; font-weight:700; text-decoration:none; }
.card-link:hover { text-decoration:underline; }
.card-link span { display:inline-block; margin-left:.6rem; transition:translate .2s; }
.card-link:hover span { translate:4px 0; }
.card > .card-link { margin-top:auto; border-top:1px solid var(--rule); padding-top:1rem; }
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
  .card:hover,.card:focus-within { translate:0 -7px; box-shadow:5px 12px 0 #d9cfbc; }
  .card:hover::before { opacity:1; }
}
.section-feature { background:var(--surface); }
.split { display:grid; grid-template-columns:1fr 1fr; gap:9%; align-items:center; }
.split-text { min-width:0; }
.split-media { min-height:560px; height:100%; max-height:850px; overflow:hidden; border-radius:50% 50% 0 0 / 32% 32% 0 0; }
.split-media img { height:100%; }
.fact-list { list-style:none; padding:0; margin-block:2rem; counter-reset:place; }
.fact { counter-increment:place; position:relative; padding:1rem 0 1rem 2.7rem; border-top:1px solid var(--rule); font-size:1.05rem; }
.fact::before { content:counter(place,decimal-leading-zero); position:absolute; left:0; color:var(--accent); font:italic 1.15rem var(--heading); }
.partners-slot { height:0; overflow:hidden; }
.section.section-partners#partners { background:var(--surface); border-block:1px solid var(--rule); padding-inline:var(--gutter); }
.section-partners .section-title { max-width:24ch; }
.partner-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr)); gap:2rem; list-style:none; padding:0; margin:3rem 0 0; }
.partner { min-width:0; padding-block:1.5rem; border-top:1px solid var(--accent2); overflow-wrap:anywhere; }
.partner-link { font-weight:700; overflow-wrap:anywhere; }
.partner-phrase { font:400 1.8rem/1.2 var(--heading); margin-block:1rem; }
.partner-desc { font-size:1rem; color:var(--muted); margin:0; }
.article { padding-block:calc(var(--header-height) + 2rem) clamp(3rem,6vw,6rem); }
.page-hero { width:calc(100% - var(--gutter)*2); height:clamp(260px,44vw,620px); margin:0 auto 3rem; overflow:hidden; clip-path:ellipse(70% 100% at 50% 100%); }
.page-hero img { height:100%; }
.breadcrumb { display:flex; flex-wrap:wrap; gap:.35rem .7rem; color:var(--muted); font-size:.85rem; margin-bottom:2.5rem; }
.page-header { padding-bottom:3rem; border-bottom:1px solid var(--accent2); margin-bottom:4rem; }
.page-header h1 { max-width:24ch; font-size:clamp(2.9rem,6vw,6.7rem); }
.page-header .lead { margin:2rem 0 0; max-width:65ch; }
.article .prose { margin-inline:auto; }
.note { padding:2rem 0 0 2rem; margin-top:3rem; border-top:1px solid var(--accent); }
.note-next { position:relative; font-size:1rem; background:transparent; }
.note-next::before { content:'↗'; position:absolute; top:2rem; left:0; color:var(--accent); }
.note-next h2 { margin-top:0; font:italic 1.8rem var(--heading); }
.note-next ul { list-style:none; padding:0; margin:0; }
.note-next li + li { margin-top:.9rem; }
.site-footer { position:relative; padding-block:4rem; background:var(--basalt); color:var(--bg); border-top:3px double #978674; }
.footer-inner { display:grid; grid-template-columns:1fr 1fr; gap:10%; }
.footer-note { font-size:1rem; line-height:1.65; color:#c8beab; max-width:55ch; margin:0; }
.footer-note::before { content:'Vault & Vellum'; display:block; color:var(--surface); font:400 2.75rem/1 var(--heading); letter-spacing:-.035em; margin-bottom:1.5rem; }
.footer-nav ul { display:grid; grid-template-columns:1fr 1fr; gap:.5rem 1.5rem; list-style:none; padding:0; margin:0; }
.footer-nav a { display:inline-block; padding:.25rem 0; font-size:.95rem; color:var(--bg); text-decoration:none; }
.footer-nav a:hover { color:#efc1c7; text-decoration:underline; }
.cursor { display:none; pointer-events:none; }
.js .cursor.is-ready { display:block; position:fixed; top:0; left:0; z-index:80; width:16px; height:16px; border:1px solid var(--accent); border-radius:50%; opacity:0; transition:width .2s,height .2s,background .2s; }
.js .cursor.is-active { width:36px; height:36px; background:#9e1f3c14; }
@media (min-width:900px) and (max-height:740px) {
  .hero h1 { font-size:clamp(3rem,4.5vw,5rem); }
  .hero-inner { padding-top:calc(var(--header-height) + 1rem); padding-bottom:4rem; }
  .hero .lead { font-size:1rem; }
  .eyebrow { margin-bottom:1rem; }
}
@media (max-width:1100px) {
  :root { --header-height:8.5rem; }
  .header-inner { gap:1rem; align-items:flex-start; }
  .site-nav ul { column-gap:1rem; }
  .hero-text { width:57%; }
  .card-grid { gap:1.25rem; }
  .compare-col { padding-right:1.5rem; }
}
@media (max-width:899px) {
  :root { --header-height:8rem; }
  .header-inner { flex-direction:column; padding-block:1rem .6rem; gap:.8rem; }
  .site-nav { display:flex; flex-wrap:wrap; gap:12px 16px; width:100%; min-width:0; margin:0; padding-bottom:.3rem; }
  .site-nav ul { flex-wrap:wrap; width:100%; min-width:0; justify-content:flex-start; gap:12px 16px; padding:4px; }
  .site-nav a { font-size:.85rem; white-space:normal; padding:.4rem 0; }
  .hero-text { width:68%; }
  .hero h1 { font-size:clamp(3.1rem,6.8vw,4.9rem); }
  .hero-media { left:25%; }
  .story-inner { min-height:0; grid-template-columns:1fr; gap:3rem; padding-block:4rem; }
  .arch-stage { width:min(100%,450px); margin-inline:auto; padding-inline:12%; }
  .arch-svg { max-height:420px; }
  .story-steps { max-width:650px; margin-inline:auto; }
  .story-step { opacity:1; }
  .folio-viewport { overflow:visible; }
  .folio-track { display:grid; grid-template-columns:1fr; width:auto; transform:none !important; gap:2rem; }
  .folio { width:auto; padding:1.5rem 2rem 2rem; }
  .folio-glyph { font-size:6rem; line-height:1.2; margin:1rem 0; }
  .folio-title { font-size:2.5rem; }
  .card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .split { gap:3rem; grid-template-columns:1fr; }
  .split-text { max-width:650px; }
  .split-media { min-height:0; height:65svh; max-height:650px; }
  .home-essay::before { top:1.5rem; }
  .prose { max-width:100%; }
  .prose-home { width:calc(100% - var(--gutter)*2); max-width:68ch; }
  .article .prose { max-width:68ch; }
  .compare-media { height:55svh; }
}
@media (max-width:600px) {
  .hero-inner { padding-top:calc(var(--header-height) + 2rem); padding-bottom:5rem; }
  .hero-text { width:100%; padding-right:0; }
  .hero-text::before { inset:-2rem calc(-1 * var(--gutter)); background:linear-gradient(90deg,#efe7d6fa,#efe7d6eb 75%,#efe7d6d9); }
  .hero h1 { font-size:clamp(3.05rem,11.8vw,4.4rem); }
  .hero .lead { font-size:1.07rem; }
  .eyebrow { max-width:33ch; font-size:.64rem; }
  .hero-media { left:0; }
  .hero-actions { gap:1rem; }
  .btn { padding-inline:1rem; }
  .btn-ghost { padding-inline:0; }
  .btn-primary::after { margin-left:.9rem; }
  .scroll-cue::after { width:2rem; }
  .hero::after,.scroll-cue { font-size:.72rem; }
  .section-intro { margin-bottom:2rem; }
  .story-step { padding-left:2.8rem; }
  .band-media { height:65svh; clip-path:ellipse(90% 100% at 50% 100%); }
  .compare-cols { grid-template-columns:1fr; margin-block:2rem; }
  .compare-col { padding:2rem 0 2rem 4rem; }
  .compare-col + .compare-col { border-left:0; border-top:1px solid #8b807166; }
  .compare-col::before { left:0; top:2.2rem; }
  .compare-col h3 { font-size:2.2rem; }
  .card-grid { grid-template-columns:1fr; gap:1.5rem; }
  .card { padding:1.75rem 2rem; }
  .card-title { font-size:2.5rem; }
  .card-kicker { margin-bottom:1.5rem; }
  .page-header h1 { font-size:clamp(2.75rem,10.8vw,4rem); }
  .page-header { padding-bottom:2rem; margin-bottom:2rem; }
  .page-hero { height:320px; clip-path:ellipse(80% 100% at 50% 100%); }
  .prose { padding:1.5rem 1rem 1.5rem 1.25rem; }
  .prose-home { padding-block:0; }
  .prose h2 { font-size:2rem; }
  .footer-inner { grid-template-columns:1fr; gap:2.5rem; }
  .footer-nav ul { gap:.5rem 1rem; }
  .footer-nav a { font-size:.9rem; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation:none !important; transition:none !important; }
  .ink-canvas,.cursor { display:none !important; }
  .hero .hero-media { visibility:visible; }
  .word-inner,[data-reveal],.story-step,.folio { opacity:1 !important; transform:none !important; }
  .arch-svg path { stroke-dasharray:none !important; stroke-dashoffset:0 !important; }
  .folio-track { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:auto; transform:none !important; }
  .folio { width:auto; }
  .folio-viewport { overflow:visible; }
  .site-header.is-hidden { transform:none; }
  .compare-media { --arch:1; }
}
@media (prefers-reduced-motion:reduce) and (max-width:899px) {
  .folio-track { grid-template-columns:1fr; }
}
@media print {
  body { background:white; color:black; font-size:11pt; }
  .site-header,.site-footer,.grain,.cursor,.scroll-progress,.skip-link,.ink-canvas,.hero-actions,.partners-slot { display:none !important; }
  .wrap { width:100%; }
  .hero,.story-inner { min-height:0; }
  .hero-text { width:100%; }
  .hero-inner,.article,.section { padding-block:1rem; }
  .prose { max-width:none; padding:1rem; }
  .folio-track { display:block; width:auto; transform:none !important; }
  .folio { width:auto; margin-bottom:1rem; }
  .folio-viewport { overflow:visible; }
  .story-compare { background:white; color:black; }
  [data-reveal],.word-inner,.story-step { opacity:1 !important; transform:none !important; }
  .arch-svg path { stroke-dasharray:none !important; }
  a { color:inherit; }
  .card,.note,figure { break-inside:avoid; }
}

/* Folio stage fills the pinned viewport */
@media (min-width:900px){.story-folios{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding-block:clamp(4rem,8vh,6rem)}.folio{min-height:min(36vh,340px);display:flex;flex-direction:column}}
.nw { white-space:nowrap; }

@media (max-width:899px) {
  :root { --header-height:4.5rem; }
  .site-header { overflow:hidden; }
  .header-inner { flex-direction:row; flex-wrap:nowrap; align-items:center; gap:.9rem; min-height:4.5rem; padding-block:.4rem; }
  .brand { font-size:1.35rem; }
  .site-nav { flex:1 1 0; min-width:0; width:auto; margin:0; padding:4px; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; -ms-overflow-style:none; -webkit-overflow-scrolling:touch; }
  .site-nav::-webkit-scrollbar { display:none; }
  .site-nav ul { flex-wrap:nowrap; width:max-content; min-width:0; gap:0 1rem; padding:0; }
  .site-nav li { flex:0 0 auto; }
  .site-nav a { white-space:nowrap; padding:.6rem 0; }
}