/* Moonlit Editorial · The Kindly Interruption. Local, open-licence Latin subsets. */
@font-face{font-family:Young Serif;src:url('assets/fonts/young-serif.woff2') format('woff2');font-weight:400;font-display:swap}

@font-face{font-family:"Source Serif 4";src:url('assets/fonts/source-serif-4.woff2') format('woff2');font-weight:200 900;font-display:swap}

@font-face{font-family:Fira Code;src:url('assets/fonts/fira-code.woff2') format('woff2');font-weight:300 700;font-display:swap}

:root{
/* PALETTE_START */
--cream:oklch(0.9494 0.0210 79.09);
--paper:oklch(0.9778 0.0119 79.79);
--ink:oklch(0.2491 0.0233 45.90);
--ink-surface:oklch(0.3075 0.0311 47.68);
--muted-light:oklch(0.4644 0.0367 54.06);
--muted-dark:oklch(0.8287 0.0393 69.79);
--rule-light:oklch(0.7704 0.0435 69.45);
--rule-dark:oklch(0.5155 0.0396 55.35);
--terracotta:oklch(0.5134 0.1336 36.47);
--ochre:oklch(0.7717 0.1178 72.16);
--error-light:oklch(0.4395 0.1380 29.79);
--error-dark:oklch(0.7892 0.1031 37.89);
--charm-rose:oklch(0.7132 0.1008 38.07);
--charm-sage:oklch(0.7028 0.0560 120.65);
--charm-plum:oklch(0.5251 0.0671 356.80);
--charm-gold:oklch(0.7507 0.1295 79.85);
/* PALETTE_END */
--bg:var(--cream);--surface:var(--paper);--fg:var(--ink);--muted:var(--muted-light);--border:var(--rule-light);--accent:var(--terracotta);--focus:var(--terracotta);--error:var(--error-light);--success:var(--terracotta);
--font-alternative-display:'Instrument Serif',Georgia,serif;--font-alternative-body:'Newsreader',Georgia,serif;--font-brave-display:'Cormorant Garamond',Georgia,serif;--measure-alternative:51ch;--backdrop:oklch(0 0 0/.45);
--font-display:'Young Serif',Georgia,serif;--font-body:'Source Serif 4',Georgia,serif;--font-accent:'Fira Code',ui-monospace,monospace;
--type-hero:clamp(2.75rem,5.7vw,5.5rem);--type-title:clamp(2.1rem,4vw,3.75rem);--type-heading:clamp(1.5rem,2.5vw,2rem);--type-subhead:1.375rem;--type-body:1.125rem;--type-small:1rem;--type-label:.6875rem;
--leading-display:1.07;--leading-body:1.65;--tracking-display:-.045em;--tracking-label:.09em;--measure:63ch;
--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-6:1.5rem;--space-8:2rem;--space-12:3rem;--space-16:4rem;--space-24:6rem;--space-32:8rem;
--page-width:1280px;--gutter:clamp(1.25rem,4.5vw,5rem);--grid-gap:2rem;--section-space:clamp(3rem,6vw,5rem);--target:44px;--radius:2px;--rule-width:1px;--focus-width:2px;--focus-offset:4px;
--duration-press:100ms;--duration-hover:180ms;--duration-settle:280ms;--duration-reveal:560ms;--duration-draw:800ms;--duration-loading:1200ms;--ease-house:cubic-bezier(.22,.78,.24,1);--stagger:70ms;--reveal-distance:12px;--parallax-clamp:12px;--hover-lift:-3px;--press-depth:1px;--paper-opacity:.12;
}

*{box-sizing:border-box}
html{scroll-padding-top:2rem}
body{margin:0;background:var(--bg);color:var(--fg);font:400 var(--type-body)/var(--leading-body) var(--font-body);text-rendering:optimizeLegibility}
button,input,select,textarea{font:inherit}
img{display:block;max-width:100%;height:auto}
svg{max-width:100%}
h1,h2,h3,h4,p,figure{margin:0}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:400;line-height:var(--leading-display);letter-spacing:var(--tracking-display);text-wrap:balance}
h1{font-size:var(--type-hero)}
h2{font-size:var(--type-title)}
h3{font-size:var(--type-heading)}
h4{font-size:var(--type-subhead)}
p{max-width:var(--measure);text-wrap:pretty}
p+p{margin-top:1rem}
a{color:inherit;text-underline-offset:5px;text-decoration-thickness:1px}
a:hover{color:var(--fg);text-decoration-thickness:2px}
button,a,input,select,textarea,summary{touch-action:manipulation}
button,a.button,nav a,summary{min-height:var(--target);min-width:var(--target)}
:focus-visible{outline:var(--focus-width) solid var(--focus);outline-offset:var(--focus-offset)}
button{cursor:pointer}
button:disabled{cursor:not-allowed}
button[hidden],[hidden]{display:none!important}
.wrap{width:min(100% - var(--gutter)*2,var(--page-width));margin-inline:auto}
.eyebrow,.meta,.tag,th,.spec-label{font:400 var(--type-label)/1.6 var(--font-accent);letter-spacing:var(--tracking-label);text-transform:uppercase}
.muted{color:var(--muted)}
.small{font-size:var(--type-small)}
.eyebrow{display:block;margin-bottom:1.5rem}
.section{padding-block:var(--section-space);border-top:1px solid var(--border);scroll-margin-top:1rem}
.section-head{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-12);align-items:end;margin-bottom:var(--space-12)}
.section-head p{max-width:48ch}
.section-num{font:400 .75rem var(--font-accent);margin-bottom:1rem;display:block}
.grid{display:grid;gap:var(--grid-gap)}
.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid>*{min-width:0}
.stack>*+*{margin-top:var(--space-6)}
.rule{border-top:1px solid var(--border)}
.skip{position:absolute;left:1rem;top:-100px;padding:1rem;background:var(--bg);z-index:20}
.skip:focus{top:1rem}
.masthead{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding-block:1.5rem;border-bottom:1px solid var(--border)}
.wordmark{font-family:var(--font-display);font-size:1.3rem;letter-spacing:-.06em;text-decoration:none}
.masthead .meta{text-align:right}
.hero{position:relative;padding-block:4rem var(--space-4)}
.hero-top{display:grid;grid-template-columns:1.5fr 1fr;gap:3rem;align-items:center}
.hero h1{max-width:12ch}
.hero h1 .aside{font-family:var(--font-display);letter-spacing:-.03em;font-size:1.15em}
.hero-art{mix-blend-mode:multiply;width:100%;max-width:480px;margin-inline:auto}
.hero-caption{display:flex;justify-content:space-between;gap:2rem;margin-top:var(--space-8);padding-top:1.5rem;border-top:1px solid var(--border)}
.hero-caption p{max-width:57ch}
.edition{font-family:var(--font-display);font-size:2.5rem;line-height:1}
.toc{display:flex;flex-wrap:wrap;gap:.25rem 1.5rem;padding-block:1.25rem}
.toc a{font:400 .6875rem/1.4 var(--font-accent);letter-spacing:.04em;text-decoration:none;display:flex;align-items:center;gap:.5rem}
.toc a:hover{text-decoration:underline}
.toc span{color:var(--muted)}
.paper-stage{position:relative;isolation:isolate;background:var(--bg)}
.paper-stage:before{content:'';position:absolute;inset:0;background:url('assets/paper-grain.jpg') center/700px;opacity:var(--paper-opacity);mix-blend-mode:multiply;pointer-events:none;z-index:-1}
.statement{padding:3rem 0;display:grid;grid-template-columns:1fr 2fr;gap:3rem}
.statement blockquote{margin:0;font:400 clamp(1.8rem,3vw,2.7rem)/1.2 var(--font-display);letter-spacing:-.04em}
.statement p{margin-top:1.5rem}
.specimen{border-top:1px solid var(--border);padding-block:2.5rem;display:grid;grid-template-columns:230px minmax(0,1fr);gap:3rem;container-type:inline-size}
.specimen-side h3{font-size:1.55rem;margin:.75rem 0 1rem}
.specimen-side p{font-size:1rem}
.tag{border:1px solid var(--border);padding:.3rem .55rem;display:inline-block}
.tag.bound{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.type-demo .display{font:400 clamp(2.5rem,4.6vw,4.6rem)/1.09 var(--demo-display);letter-spacing:-.045em;max-width:20ch;margin:.75rem 0 1.5rem;text-wrap:balance}
.type-demo .prose{font:400 18px/1.65 var(--demo-body);max-width:63ch}
.type-demo .accent-example{font:400 .75rem/1.6 var(--demo-accent);letter-spacing:.07em}
.direction-a{--demo-display:'Young Serif';--demo-body:'Source Serif 4';--demo-accent:'Fira Code'}
.direction-b .prose{max-width:var(--measure-alternative)}
.direction-b{--demo-display:'Instrument Serif';--demo-body:'Newsreader';--demo-accent:'Fira Code'}
.direction-c{--demo-display:'Cormorant Garamond';--demo-body:'Source Serif 4';--demo-accent:'Young Serif'}
.direction-c .display{font-weight:600;font-size:clamp(3rem,5.5vw,5.5rem);letter-spacing:-.065em}
.direction-c .accent-example{font-size:1rem;letter-spacing:-.025em}
.arguments{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--border);font-size:1rem}
.arguments strong{font-weight:600}
.decision{padding:2.5rem;background:var(--ink);color:var(--cream);margin-top:2rem;display:grid;grid-template-columns:1fr 2fr;gap:3rem}
.decision h3{font-size:2rem}
.decision p{font-size:1.125rem}
.palette-grounds{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--border)}
.color-ground{padding:2rem;min-height:250px;display:flex;flex-direction:column;justify-content:space-between;gap:2rem}
.color-ground h3{font-size:2.5rem}
.dark{--bg:var(--ink);--surface:var(--ink-surface);--fg:var(--cream);--muted:var(--muted-dark);--border:var(--rule-dark);--accent:var(--ochre);--focus:var(--ochre);--error:var(--error-dark);--success:var(--ochre);background:var(--bg);color:var(--fg)}
.swatches{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1rem;margin:2rem 0}
.swatch .chip{height:74px;background:var(--chip);margin-bottom:.75rem}
.swatch p{font-size:.85rem}
.swatch code{font-size:.65rem}
.table-wrap{max-width:100%;overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:1rem}
th,td{text-align:left;border-bottom:1px solid var(--border);padding:.85rem .75rem .85rem 0;vertical-align:top}
th{color:var(--muted)}
td:last-child{padding-right:0}
.ratio{font:400 .75rem/1.6 var(--font-accent);white-space:nowrap}
.pass{color:var(--fg)}
.audit-note{padding:1.5rem 0}
.pair-sample{padding:.2rem .6rem;display:inline-block;font-size:1rem}
.scale-row{display:grid;grid-template-columns:180px 1fr;gap:2rem;align-items:baseline;padding:1.5rem 0;border-bottom:1px solid var(--border)}
.scale-row .sample{font-family:var(--font-display);line-height:1.15;letter-spacing:-.04em;text-wrap:balance}
.scale-row .body-sample{font-family:var(--font-body);letter-spacing:0;line-height:1.65}
.measure-demo{max-width:63ch;border-inline:1px solid var(--border);padding:1.5rem;margin-top:2rem}
.ruler{display:flex;align-items:end;gap:1rem;flex-wrap:wrap;padding:2rem 0}
.space-unit{font:400 .6875rem var(--font-accent);text-align:center}
.space-unit i{display:block;background:var(--ink);width:24px;height:var(--size);margin-bottom:1rem}
.grid-demo{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:12px;margin:1.5rem 0}
.grid-demo span{background:var(--surface);border:1px solid var(--border);height:90px;display:grid;place-items:center;font:400 .7rem var(--font-accent)}
.asset-main{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
.asset-main img{max-width:400px;mix-blend-mode:multiply;margin:auto}
.asset-caption{margin-top:1.5rem}
.texture-demo{background:var(--cream);min-height:220px;padding:2rem;display:flex;align-items:center}
.texture-demo p{font-size:1.5rem;font-family:var(--font-display);max-width:20ch}
.spots{margin-top:3rem}
.spot{width:144px;height:auto;margin:0 auto 1.5rem}
.spot-card{border-top:1px solid var(--border);padding-top:1.5rem}
.spot-card h4{margin-bottom:.75rem}
.spot-card p{font-size:1rem}
.motif-demo{padding:2rem;background:var(--surface);min-height:180px;display:flex;align-items:center;justify-content:center}
.ribbon{width:18px;height:90px;background:var(--terracotta);clip-path:polygon(0 0,100% 0,94% 100%,48% 88%,0 96%);transform:rotate(5deg)}
.motif-line{width:220px;height:55px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
.motif-caption{font-size:1rem;margin-top:1rem}
.button{display:inline-flex;align-items:center;justify-content:center;gap:1rem;min-height:46px;padding:.7rem 1.15rem;background:transparent;color:var(--fg);border:1px solid var(--fg);border-radius:var(--radius);font:500 .75rem/1.4 var(--font-accent);text-decoration:none;transition:transform var(--duration-hover) var(--ease-house),box-shadow var(--duration-hover) var(--ease-house),background var(--duration-hover) var(--ease-house)}
.button:hover{background:var(--surface);color:var(--fg);box-shadow:3px 3px 0 var(--fg);transform:translateY(var(--hover-lift))}
.button:active{transform:translateY(var(--press-depth));box-shadow:none;transition-duration:var(--duration-press)}
.button.primary{background:var(--fg);color:var(--bg)}
.button.primary:hover{background:var(--fg);color:var(--bg)}
.button:disabled{opacity:.42;transform:none;box-shadow:none}
.button.link{border-color:transparent;padding-inline:0;text-decoration:underline;text-underline-offset:5px}
.button.link:hover{background:transparent;box-shadow:none;transform:none}
.button-row{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;margin-top:1.5rem}
.component-label{margin-bottom:1rem}
.component-nav{display:flex;justify-content:space-between;align-items:center;gap:2rem;border-block:1px solid var(--border);padding:1rem 0;margin-bottom:3rem}
.component-nav nav{display:flex;gap:1rem;flex-wrap:wrap}
.component-nav nav a{display:flex;align-items:center;font-size:1rem}
.offer{padding:2rem;border:1px solid var(--border);display:flex;flex-direction:column;align-items:start;gap:1.25rem;transition:transform var(--duration-settle) var(--ease-house),box-shadow var(--duration-settle) var(--ease-house);container-type:inline-size}
.offer:hover{transform:translateY(var(--hover-lift));box-shadow:4px 4px 0 var(--border)}
.offer h3{font-size:clamp(1.6rem,3cqi,2rem)}
.offer .button{margin-top:auto}
.offer .price{font:400 3.5rem/1 var(--font-display);letter-spacing:-.06em}
.offer .price small{font:400 .6875rem var(--font-accent);letter-spacing:0}
.offer p{font-size:1.0625rem}
.product-art{width:100%;max-height:170px;object-fit:contain;mix-blend-mode:multiply}
.availability{font:400 .6875rem/1.7 var(--font-accent);text-transform:uppercase;letter-spacing:.04em;padding-top:1rem;border-top:1px solid var(--border);width:100%}
.process{list-style:none;padding:0;counter-reset:process;margin:2rem 0}
.process li{counter-increment:process;border-top:1px solid var(--border);padding:1.5rem 0;display:grid;grid-template-columns:60px 1fr 1fr;gap:2rem}
.process li:before{content:'0' counter(process);font:400 .85rem var(--font-accent);padding-top:.35rem}
.process h4{font-size:1.4rem}
.process p{font-size:1rem}
.panel{padding:clamp(1.5rem,4vw,3.5rem);margin-top:3rem}
.panel h3{max-width:17ch;font-size:clamp(2rem,3.7vw,3.4rem)}
.panel p{margin-top:1.5rem}
.panel a{color:var(--accent)}
.panel a:hover{color:var(--fg)}
.field{margin-top:1.3rem}
.field label{display:block;font-size:1rem;margin-bottom:.4rem}
.field input,.field select,.field textarea{width:100%;min-height:48px;border:1px solid var(--fg);border-radius:var(--radius);padding:.7rem .85rem;color:var(--fg);background:var(--bg);font-size:1rem}
.field textarea{min-height:120px;resize:vertical}
.field input[type=file]{min-height:96px;border-style:dashed;padding:1.25rem;cursor:pointer}
.field input[type=file].is-dragover{border-color:var(--accent);background:var(--surface)}
.file-list{list-style:none;padding:0;margin:.5rem 0 0;font-size:.9rem}
.field input:hover,.field textarea:hover,.field select:hover{box-shadow:inset 0 0 0 1px var(--fg)}
.field [aria-invalid=true]{border:2px solid var(--error)}
.field .help,.field .error{font-size:.9rem;margin-top:.4rem}
.error{color:var(--error)}
.status{min-height:1.65em;margin-top:1rem;font-size:1rem}
.newsletter{border-top:1px solid var(--border);padding-top:2rem}
.newsletter h3{font-size:2.2rem}
.consent{display:flex;gap:.7rem;align-items:start;min-height:44px;font-size:.9rem;margin-top:1rem}
.consent input{width:20px;height:20px;flex:none;margin:4px 0}
.consent label{padding-block:2px;min-height:44px}
.state-sample{padding:1.5rem;border:1px solid var(--border);margin-top:1.5rem}
.state-sample input{margin-top:.5rem}
.motion-toolbar{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;align-items:center;padding:1.5rem 0;border-block:1px solid var(--border);margin-bottom:2rem}
.toggle-label{display:flex;align-items:center;gap:.7rem;min-height:44px;font-size:1rem;cursor:pointer}
.toggle-label input{width:20px;height:20px;accent-color:var(--ink)}
.motion-stage{padding:2rem;border:1px solid var(--border);min-height:270px;display:flex;flex-direction:column;justify-content:space-between;gap:1.5rem}
.motion-stage h4{font-size:1.4rem}
.reveal-items{display:flex;gap:1rem;flex-wrap:wrap}
.reveal-item{padding:.75rem 1rem;border-bottom:1px solid var(--fg);font-size:1rem}
.is-replaying .reveal-item{animation:reveal var(--duration-reveal) var(--ease-house) both;animation-delay:calc(var(--i)*var(--stagger))}
@keyframes reveal{from{opacity:0;transform:translateY(var(--reveal-distance))}
to{opacity:1;transform:none}
}
.draw-path{stroke-dasharray:1;stroke-dashoffset:0}
.is-replaying .draw-path{animation:draw var(--duration-draw) var(--ease-house) both}
@keyframes draw{from{stroke-dashoffset:1}
to{stroke-dashoffset:0}
}
.parallax-track{height:95px;border-block:1px dashed var(--border);display:grid;place-items:center}
.parallax-mark{will-change:transform}
.parallax-mark img{height:80px;width:auto;mix-blend-mode:multiply}
.range-label{font-size:.9rem;display:block}
.range-label input{display:block;width:100%;min-height:44px;accent-color:var(--ink)}
.spinner{display:inline-block;width:14px;height:14px;border:1.5px solid currentColor;border-top-color:transparent;border-radius:50%;animation:spin var(--duration-loading) linear infinite}
@keyframes spin{to{transform:rotate(360deg)}
}
.focus-demo{outline:2px solid var(--focus);outline-offset:4px}
.contract{margin-top:3rem}
.contract li{margin-bottom:.75rem}
.footer{padding:2rem 0 3rem;display:flex;justify-content:space-between;gap:2rem;font-size:.9rem}
.footer p{max-width:55ch}
code{font-family:var(--font-accent);font-size:.75em;overflow-wrap:anywhere}
.no-js-note{padding:1rem;border:1px solid var(--border);margin-block:1rem}
.js-only{display:none}
.js .js-only{display:inline-flex}
.js .js-block{display:block}
dialog{background:var(--cream);color:var(--ink);border:1px solid var(--ink);padding:2rem;max-width:min(520px,calc(100% - 2rem));max-height:90vh}
dialog::backdrop{background:var(--backdrop)}
dialog h3{margin-bottom:1rem}
dialog .button{margin-top:1.5rem}
.footnote{font-size:.9rem;margin-top:1rem}
.accent-text{color:var(--accent)}

@container(max-width:480px){.offer h3{font-size:1.75rem}
}

@media(min-width:1600px){.hero{padding-top:6rem}
.hero-top{grid-template-columns:1.4fr 1fr}
}

@media(max-width:900px){.section-head{gap:2rem}
.specimen{grid-template-columns:180px 1fr;gap:2rem}
.three{grid-template-columns:1fr 1fr}
.three>*:last-child{grid-column:1/-1}
.hero-top{gap:1rem}
.hero h1{font-size:clamp(2.8rem,6.5vw,4.7rem)}
.decision{grid-template-columns:1fr;gap:1.5rem}
.scale-row{grid-template-columns:140px 1fr}
.swatches{grid-template-columns:repeat(3,1fr)}
}

@media(max-width:620px){.masthead .meta{font-size:.6rem;max-width:130px}
.hero{padding-top:3rem}
.hero-top{grid-template-columns:1fr}
.hero h1{font-size:clamp(2.8rem,11.8vw,4.5rem);max-width:12ch}
.hero-art{max-width:280px;margin-block:.5rem}
.hero-caption{margin-top:1rem;gap:1rem}
.hero-caption .edition{display:none}
.toc{gap:.2rem 1rem}
.toc a{font-size:.65rem}
.section-head,.statement,.two,.three,.asset-main{grid-template-columns:1fr;gap:1.5rem}
.section-head{margin-bottom:2rem}
.three>*:last-child{grid-column:auto}
.specimen{grid-template-columns:1fr;gap:1.5rem}
.specimen-side{max-width:48ch}
.type-demo .display{font-size:2.8rem}
.direction-c .display{font-size:3.5rem}
.arguments{gap:1rem}
.palette-grounds{grid-template-columns:1fr}
.color-ground{min-height:210px}
.scale-row{grid-template-columns:1fr;gap:.75rem}
.scale-row .sample{overflow-wrap:normal}
.grid-demo{grid-template-columns:repeat(4,1fr)}
.grid-demo span:nth-child(n+5){display:none}
.component-nav{align-items:start;flex-direction:column;gap:1rem}
.component-nav nav{gap:.75rem}
.process li{grid-template-columns:35px 1fr;gap:1rem}
.process li p{grid-column:2}
.offer{padding:1.5rem}
.panel{margin-top:2rem}
.footer{flex-direction:column}
.decision{padding:1.5rem}
.motion-stage{padding:1.5rem}
.measure-demo{padding:1rem}
.table-wrap table{font-size:.9rem}
.ratio{font-size:.65rem}
.swatches{gap:.75rem}
.spot{width:144px}
}

@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-delay:0ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
.parallax-mark,.reveal-item,.offer:hover,.button:hover,.button:active{transform:none!important}
.draw-path{stroke-dashoffset:0!important}
.reveal-item{opacity:1!important}
.spinner{animation:none!important;border-top-color:currentColor}
}

html[data-reduced=true] *,html[data-reduced=true] *:before,html[data-reduced=true] *:after{animation-duration:.01ms!important;animation-delay:0ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
html[data-reduced=true] .parallax-mark,html[data-reduced=true] .reveal-item,html[data-reduced=true] .offer:hover,html[data-reduced=true] .button:hover,html[data-reduced=true] .button:active{transform:none!important}
html[data-reduced=true] .draw-path{stroke-dashoffset:0!important}
html[data-reduced=true] .reveal-item{opacity:1!important}
html[data-reduced=true] .spinner{animation:none!important;border-top-color:currentColor}


/* Inline reference links retain a real touch area. */
a:not(.button){display:inline-flex;align-items:center;min-height:var(--target);min-width:var(--target)}


/* Production motion hooks. Static content remains fully visible before enhancement. */
[data-reveal].is-entering{animation:reveal var(--duration-reveal) var(--ease-house) both;animation-delay:calc(var(--reveal-order,0)*var(--stagger))}
[data-draw].is-entering .draw-path{animation:draw var(--duration-draw) var(--ease-house) both}
@media(prefers-reduced-motion:reduce){[data-parallax],[data-reveal]{transform:none!important;opacity:1!important}@view-transition{navigation:none}[data-parallax]{translate:none!important}[data-tilt],.line>span,.offer:hover .spot{transform:none!important;animation:none!important}.charm{animation:none!important;transform:none!important}.type-scatter b{opacity:.14!important;animation:none!important}.steps:before{transform:none!important}.contents li span:last-child{translate:none!important}}
html[data-reduced=true] [data-parallax],html[data-reduced=true] [data-reveal]{transform:none!important;opacity:1!important}
html[data-reduced=true] [data-parallax]{translate:none!important}
html[data-reduced=true] [data-tilt],html[data-reduced=true] .line>span,html[data-reduced=true] .offer:hover .spot{transform:none!important;animation:none!important}
html[data-reduced=true] .charm{animation:none!important;transform:none!important}
html[data-reduced=true] .type-scatter b{opacity:.14!important;animation:none!important}
html[data-reduced=true] .steps:before{transform:none!important}
html[data-reduced=true] .contents li span:last-child{translate:none!important}
html[data-reduced=true]::view-transition-group(*),html[data-reduced=true]::view-transition-old(*),html[data-reduced=true]::view-transition-new(*){animation:none!important}
/* Keep inverse outlined-button hover contrast equal to its resting state. */
.dark .button:not(.primary):hover{background:var(--bg);color:var(--fg)}
.consent input{accent-color:var(--accent)}


/* Motion & interaction primitives (M1–M11). Reduced-motion overrides live in the two blocks above. */
@view-transition{navigation:auto}
.masthead{view-transition-name:masthead}
::view-transition-old(root),::view-transition-new(root){animation-duration:280ms;animation-timing-function:var(--ease-house)}
.line{display:block;overflow:hidden;padding-bottom:.08em}.line>span{display:inline-block;animation:rise 800ms var(--ease-house) both;animation-delay:calc(var(--i)*90ms)}@keyframes rise{from{transform:translateY(105%)}to{transform:none}}
.hero-figure{mix-blend-mode:multiply}
.hero-art{height:auto}
.scribble{display:block;width:180px;height:16px;margin:.4rem auto 0;fill:none;stroke:var(--accent);stroke-width:1.5}
.loop-toggle{align-items:center;min-height:var(--target);margin-top:var(--space-2);padding:0 var(--space-2);background:none;border:0;color:var(--fg);font:400 var(--type-label)/1.4 var(--font-accent);letter-spacing:var(--tracking-label);text-transform:uppercase;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.loop-toggle:hover{text-decoration-thickness:2px}
[data-tilt]{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform var(--duration-settle) var(--ease-house)}
.charm-field{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1}
.charm{position:absolute;left:var(--x);top:var(--y);width:var(--s);aspect-ratio:1;background:color-mix(in oklch,var(--fg) 10%,var(--bg));-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat;rotate:var(--r);animation:bob 7s ease-in-out var(--d) infinite alternate;--parallax-clamp:32px}
.charm.is-colour{background:var(--m) center/contain no-repeat;-webkit-mask:none;mask:none}
@keyframes bob{to{transform:translateY(-8px)}}
.is-still .charm{animation-play-state:paused}
.type-scatter{position:absolute;inset:0}
.type-scatter b{position:absolute;left:var(--x);top:var(--y);rotate:var(--r);font:400 1.1rem var(--font-accent);color:var(--fg);opacity:.14}.js .type-scatter:not(.is-entering) b{opacity:0}.type-scatter.is-entering b{animation:type-in 1ms steps(1) both;animation-delay:calc(var(--i)*90ms)}@keyframes type-in{from{opacity:0}to{opacity:.14}}
.type-scatter.is-entering{animation:none}
.motif-line{stroke:var(--accent)}
.steps:before{content:'';position:absolute;left:0;right:0;top:-.75rem;height:1px;background:var(--accent);transform-origin:left}
.js .steps:not(.is-entering):before{transform:scaleX(0)}
.steps.is-entering:before{transition:transform 900ms var(--ease-house);transform:scaleX(1)}
.steps.is-entering li{animation:reveal var(--duration-reveal) var(--ease-house) both;animation-delay:calc(var(--i)*var(--stagger) + 300ms)}
.contents li span:last-child{transition:translate var(--duration-hover) var(--ease-house),color var(--duration-hover)}
@media(hover:hover) and (pointer:fine){.contents li:hover span:last-child{translate:6px 0;color:var(--accent)}.offer:hover .spot{transform:rotate(-3deg) scale(1.04)}}
.offer .spot{transition:transform var(--duration-settle) var(--ease-house)}
.field input[type=file]{transition:border-color var(--duration-hover) var(--ease-house),background-color var(--duration-hover) var(--ease-house)}
.field input[type=file]:hover{background:var(--surface)}
.field input[type=file].is-dragover{border-style:solid;box-shadow:inset 0 0 0 1px var(--accent)}
.field input[type=file]::file-selector-button{min-height:var(--target);margin-right:var(--space-4);padding:.6rem 1rem;border:1px solid var(--fg);border-radius:var(--radius);background:transparent;color:var(--fg);font:500 .75rem/1.4 var(--font-accent);cursor:pointer;transition:background-color var(--duration-hover) var(--ease-house)}
.field input[type=file]::file-selector-button:hover{background:var(--bg)}