/* Silica Quartz V2: specimen catalogue. See DESIGN.md. */
@font-face{font-family:"Instrument Sans";src:url(/fonts/instrument.woff2) format("woff2");font-weight:400 700;font-stretch:75% 100%;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(/fonts/mono.woff2) format("woff2");font-weight:400 600;font-display:swap}

:root{
  --bg:#e9ecea;--paper:#f6f7f5;--ink:#101619;--muted:#505b62;--line:#c3cac7;--rule:#101619;
  --brand:#0a5a8f;--on-brand:#fff;--sand:#d9c8a6;--focus:#0a5a8f;--err:#a3261c;
  --ease-out:cubic-bezier(.23,1,.32,1);--ease-in-out:cubic-bezier(.77,0,.175,1);
  --sans:"Instrument Sans",system-ui,-apple-system,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --gutter:clamp(16px,4vw,40px);--nav-h:64px;--strip-h:36px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0c1013;--paper:#12181c;--ink:#e4e9e6;--muted:#9ba8af;--line:#263036;--rule:#e4e9e6;
  --brand:#6db6e8;--on-brand:#06131c;--sand:#8a7752;--focus:#8cc8f0;--err:#ff9d93;color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0c1013;--paper:#12181c;--ink:#e4e9e6;--muted:#9ba8af;--line:#263036;--rule:#e4e9e6;
  --brand:#6db6e8;--on-brand:#06131c;--sand:#8a7752;--focus:#8cc8f0;--err:#ff9d93;color-scheme:dark}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 24px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.0625rem/1.6 var(--sans);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{font-family:var(--sans);font-weight:500;letter-spacing:-.03em;line-height:1.02;margin:0;text-wrap:balance}
p{margin:0;text-wrap:pretty}
.i{width:1.15em;height:1.15em;flex:none}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.skip{position:absolute;left:var(--gutter);top:-100px;background:var(--brand);color:var(--on-brand);padding:12px 18px;z-index:100;font-weight:600}
.skip:focus{top:8px}
.wrap{width:min(100% - 2*var(--gutter),1280px);margin-inline:auto}
.section{padding-block:clamp(72px,9vw,128px)}
.mono{font:500 .75rem/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase}
.muted{color:var(--muted)}
.lede{font-size:1.1875rem;line-height:1.55;color:var(--muted);max-width:56ch}
.h2{font-size:clamp(2rem,4.4vw,3.5rem)}
#sentinel{position:absolute;top:0;left:0;width:1px;height:1px}

/* Buttons: square, ruled */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:48px;padding:0 20px;border:1px solid var(--rule);font:500 1rem/1 var(--sans);text-decoration:none;white-space:nowrap;cursor:pointer;background:transparent;color:var(--ink);transition:transform 160ms var(--ease-out),background-color 200ms ease,color 200ms ease,border-color 200ms ease}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.btn .i{transition:transform 200ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .btn-primary:hover{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
  .btn-ghost:hover{background:var(--ink);color:var(--bg)}
  .btn:hover .i-arrow{transform:translateX(3px)}
}
.link{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;text-decoration:none;transition:background-size 240ms var(--ease-out);padding-bottom:1px}
@media (hover:hover){.link:hover{background-size:100% 1px}}
.arrow-link{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-weight:500;text-decoration:none;border-bottom:1px solid var(--rule)}
.arrow-link .i{transition:transform 200ms var(--ease-out)}
@media (hover:hover){.arrow-link:hover .i{transform:translateX(4px)}}

/* Index strip + nav */
.strip{border-bottom:1px solid var(--line);color:var(--muted)}
.strip-in{display:flex;align-items:center;gap:28px;height:var(--strip-h)}
.strip a{text-decoration:none}
.strip .push{margin-left:auto}
.nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);border-bottom:1px solid var(--line);view-transition-name:site-nav;transition:border-color 200ms ease}
.nav.is-stuck{border-bottom-color:var(--rule)}
.nav-in{display:flex;align-items:center;gap:20px;height:var(--nav-h)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:600 1.1875rem/1 var(--sans);letter-spacing:-.02em;margin-right:auto}
.brand img{height:38px;width:auto}
.dk{display:none}
.menu{display:flex;list-style:none;margin:0;padding:0;height:100%}
.menu li{display:flex}
.menu a{position:relative;display:flex;align-items:center;padding:0 14px;text-decoration:none;font-weight:500;font-size:.96875rem;color:var(--muted);transition:color 200ms ease}
.menu a::after{content:"";position:absolute;left:14px;right:14px;bottom:-1px;height:2px;background:var(--brand);transform:scaleX(0);transform-origin:left;transition:transform 240ms var(--ease-out)}
.menu a[aria-current="page"]{color:var(--ink)}
.menu a[aria-current="page"]::after{transform:scaleX(1)}
@media (hover:hover){.menu a:hover{color:var(--ink)}}
.nav-tools{display:flex;align-items:center;gap:8px}
.icon-btn{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;transition:transform 160ms var(--ease-out),border-color 200ms ease}
.icon-btn:active{transform:scale(.95)}
@media (hover:hover){.icon-btn:hover{border-color:var(--rule)}}
.icon-btn .i{width:20px;height:20px}
.burger{display:none}
.theme .i-sun{display:none}
.is-dark .theme .i-sun{display:block}
.is-dark .theme .i-moon{display:none}

/* Specimen dish: the brand's circle, filled with grain */
.dish{position:relative;aspect-ratio:1;border-radius:50%;overflow:hidden;background:var(--sand);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 20%,transparent),0 18px 40px -22px rgb(16 22 25 / .55);isolation:isolate}
.dish img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.dish::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 0 6px color-mix(in srgb,var(--paper) 70%,transparent),inset 0 10px 24px rgb(0 0 0 / .25);pointer-events:none}
.dish.ring{outline:3px solid var(--brand);outline-offset:8px}
.lens{position:absolute;left:0;top:0;width:160px;height:160px;margin:-80px 0 0 -80px;border-radius:50%;pointer-events:none;opacity:0;transform:scale(.9);transition:opacity 160ms ease,transform 200ms var(--ease-out);box-shadow:0 0 0 2px var(--paper),0 0 0 3px var(--ink),0 16px 32px -8px rgb(0 0 0 / .5);background-repeat:no-repeat;z-index:3;will-change:transform}
.lens.on{opacity:1;transform:scale(1)}

/* Specimen label: ruled spec table */
.label{border-top:1px solid var(--rule)}
.label dl{margin:0;display:grid;grid-template-columns:max-content 1fr}
.label dt,.label dd{margin:0;padding:9px 0;border-bottom:1px solid var(--line)}
.label dt{font:500 .75rem/1.5 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding-right:24px}
.label dd{font-size:.96875rem}

/* Size ruler: qualitative fine to coarse band */
.ruler{margin-top:20px}
.ruler-bar{position:relative;height:28px;border:1px solid var(--rule);background:repeating-linear-gradient(90deg,transparent 0 calc(10% - 1px),var(--line) calc(10% - 1px) 10%)}
.ruler-band{position:absolute;top:-1px;bottom:-1px;left:var(--a);right:calc(100% - var(--b));background:color-mix(in srgb,var(--brand) 22%,transparent);border:1px solid var(--brand)}
.ruler-ends{display:flex;justify-content:space-between;margin-top:6px;color:var(--muted)}

/* Hero */
.hero{border-bottom:1px solid var(--line)}
.hero-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(32px,5vw,80px);align-items:center;min-height:min(680px,calc(100dvh - var(--nav-h) - var(--strip-h)));padding-block:clamp(40px,5vw,64px)}
.hero h1{font-size:clamp(2.75rem,6vw,5.25rem);line-height:.98;max-width:12ch}
.hero .lede{margin-top:24px;max-width:42ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.trio{position:relative;aspect-ratio:1/.92;max-width:600px;justify-self:end;width:100%}
.trio .dish{position:absolute}
.trio .d1{width:50%;left:25%;top:0}
.trio .d2{width:47%;left:0;bottom:0}
.trio .d3{width:47%;right:0;bottom:0}
.trio-cap{position:absolute;right:0;top:4%;text-align:right;color:var(--muted);max-width:18ch}

/* Spec strip */
.spec-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid var(--line)}
.spec-cell{padding:24px 24px 28px 0}
.spec-cell + .spec-cell{padding-left:24px;border-left:1px solid var(--line)}
.spec-cell .mono{color:var(--muted)}
.spec-cell b{display:block;margin-top:10px;font:500 clamp(1.75rem,3vw,2.5rem)/1 var(--sans);letter-spacing:-.03em}

/* Section header: headline + optional link, ruled */
.shead{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding-bottom:20px;border-bottom:1px solid var(--rule);margin-bottom:clamp(28px,4vw,48px)}
.shead .h2{max-width:18ch}
.shead + *{border-top:0!important}
.arrow-link{white-space:nowrap}

/* Catalogue index (home) */
.cat{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line)}
.entry{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(20px,3vw,40px);align-items:center;padding:clamp(24px,3vw,40px) clamp(16px,2vw,32px) clamp(24px,3vw,40px) 0;border-bottom:1px solid var(--line);text-decoration:none;transition:background-color 240ms ease}
.entry:nth-child(even){padding-left:clamp(16px,2vw,32px);padding-right:0;border-left:1px solid var(--line)}
.entry h3{font-size:clamp(1.375rem,2.2vw,1.875rem)}
.entry p{margin-top:8px;color:var(--muted);font-size:.96875rem}
.entry .mono{display:block;color:var(--brand);margin-bottom:10px}
.entry .go{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-weight:500}
.entry .go .i{transition:transform 200ms var(--ease-out)}
.entry .dish{transition:transform 600ms var(--ease-out)}
.entry:active{background:color-mix(in srgb,var(--ink) 4%,transparent)}
@media (hover:hover) and (pointer:fine){.entry:hover .dish{transform:rotate(-12deg) scale(1.03)}.entry:hover .go .i{transform:translateX(4px)}}

/* Process: grains get finer left to right */
.process{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.process li{padding:28px 24px 0 0}
.process li + li{padding-left:24px;border-left:1px solid var(--line)}
.grains{display:flex;align-items:flex-end;gap:5px;height:56px;margin-bottom:20px}
.grains span{display:block;border-radius:50%;background:var(--ink);opacity:.85}
.process h3{font-size:1.375rem}
.process p{margin-top:6px;color:var(--muted);font-size:.96875rem}
.process .mono{color:var(--muted);margin-bottom:8px;display:block}

/* Figures */
.figs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--rule)}
.fig{padding:28px 24px 0 0}
.fig + .fig{padding-left:24px;border-left:1px solid var(--line)}
.fig b{display:flex;align-items:baseline;gap:6px;font:500 clamp(3.25rem,7vw,6rem)/.95 var(--sans);letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.fig b small{font:500 .875rem/1 var(--mono);letter-spacing:.04em;color:var(--muted)}
.fig > span{display:block;margin-top:14px;color:var(--muted)}

/* News index rows */
.rows{border-top:1px solid var(--rule);list-style:none;margin:0;padding:0}
.row{display:grid;grid-template-columns:150px minmax(0,1fr) 120px 32px;gap:24px;align-items:center;padding:22px 0;border-bottom:1px solid var(--line);text-decoration:none;transition:background-color 240ms ease}
.row .mono{color:var(--muted)}
.row h3{font-size:clamp(1.25rem,2vw,1.625rem)}
.row p{margin-top:6px;color:var(--muted);font-size:.96875rem;max-width:68ch}
.row .thumb{width:120px;aspect-ratio:3/2;object-fit:cover}
.row .i{transition:transform 200ms var(--ease-out)}
@media (hover:hover){.row:hover .i{transform:translate(3px,-3px)}.row:hover h3{color:var(--brand)}}
.row h3{transition:color 200ms ease}

/* CTA band */
.cta-band{border-top:1px solid var(--rule)}
.cta-in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px;align-items:end;padding-block:clamp(56px,7vw,96px)}
.cta-in .lede{margin-top:14px}
.cta-in .btns{display:flex;justify-content:flex-end;gap:12px;flex-wrap:wrap}

/* Page head */
.page-head{border-bottom:1px solid var(--rule);padding-block:clamp(40px,6vw,88px) clamp(28px,4vw,48px)}
.crumbs{display:flex;gap:10px;align-items:center;color:var(--muted);margin-bottom:24px}
.crumbs a{text-decoration:none}
.page-head h1{font-size:clamp(2.75rem,6vw,5rem);line-height:.98;max-width:16ch}
.page-head .lede{margin-top:20px}

/* About */
.two{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:start}
.two .sticky{position:sticky;top:calc(var(--nav-h) + 32px)}
.stack{display:grid;gap:36px}
.stack h3{font-size:1.5rem;margin-bottom:10px}
.stack p{color:var(--muted);max-width:62ch}
.stack p.big{color:var(--ink);font-size:1.1875rem}
.player{position:relative;aspect-ratio:1280/544;overflow:hidden;background:#000}
.player img,.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover}
/* The film is 2.39:1 letterboxed inside a 16:9 frame. Scale the 16:9 player to the
   container width and centre it so the container crops the baked-in black bars. */
.player.playing{aspect-ratio:1280/544}
.player.playing iframe{top:50%;bottom:auto;height:auto;aspect-ratio:16/9;transform:translateY(-50%)}
.vctl{position:absolute;left:16px;bottom:16px;z-index:2;display:flex;gap:6px;opacity:.85;transition:opacity 200ms ease}
.player:hover .vctl,.vctl:focus-within{opacity:1}
.vctl button{display:grid;place-items:center;width:44px;height:44px;border:0;background:var(--paper);color:var(--ink);cursor:pointer;transition:transform 160ms var(--ease-out)}
.vctl button:active{transform:scale(.95)}
.vctl .i{width:20px;height:20px}
.vbar{position:absolute;left:0;right:0;bottom:0;height:3px;z-index:2;pointer-events:none}
.vbar i{display:block;height:100%;background:var(--brand);transform:scaleX(0);transform-origin:left;transition:transform 250ms linear}
.play{position:absolute;left:24px;bottom:24px;display:flex;align-items:center;gap:12px;min-height:52px;padding:0 22px 0 16px;border:0;background:var(--paper);color:var(--ink);font:500 1rem/1 var(--sans);cursor:pointer;transition:transform 160ms var(--ease-out)}
.play .i{width:22px;height:22px;color:var(--brand)}
.play:active{transform:scale(.97)}
.film-cap{display:flex;justify-content:space-between;gap:16px;margin-top:12px;color:var(--muted)}
.disc{border-top:1px solid var(--rule)}
.disc details{border-bottom:1px solid var(--line)}
.disc summary{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:72px;padding-block:16px;font:500 1.5rem/1.2 var(--sans);letter-spacing:-.02em;cursor:pointer;list-style:none}
.disc summary::-webkit-details-marker{display:none}
.disc summary .i{transition:transform 240ms var(--ease-out);color:var(--brand)}
.disc details[open] summary .i{transform:rotate(45deg)}
.disc .panel{padding:0 0 28px;color:var(--muted);max-width:68ch;display:grid;gap:14px}
.badge{justify-self:start;display:inline-flex;gap:10px;padding:8px 12px;border:1px solid var(--brand);color:var(--brand)}
.next-grid{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--rule)}
.next{display:grid;gap:8px;padding:32px 24px 32px 0;text-decoration:none;border-bottom:1px solid var(--line)}
.next + .next{padding-left:24px;border-left:1px solid var(--line)}
.next .mono{color:var(--muted)}
.next b{display:flex;align-items:center;gap:12px;font:500 clamp(1.75rem,3vw,2.5rem)/1 var(--sans);letter-spacing:-.03em}
.next .i{transition:transform 200ms var(--ease-out)}
@media (hover:hover){.next:hover .i{transform:translateX(5px)}.next:hover b{color:var(--brand)}}
.next b{transition:color 200ms ease}

/* Products */
.prod-layout{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:clamp(32px,4vw,64px);align-items:start}
.prod-nav{position:sticky;top:calc(var(--nav-h) + 32px)}
.prod-nav .mono{color:var(--muted);display:block;margin-bottom:12px}
.prod-nav ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.prod-nav a{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);color:var(--muted);text-decoration:none;font-weight:500;line-height:1.3;transition:color 200ms ease}
.prod-nav a img{width:28px;height:28px;border-radius:50%;flex:none;transition:transform 300ms var(--ease-out)}
.prod-nav a.on{color:var(--ink)}
.prod-nav a.on img{transform:scale(1.15);outline:2px solid var(--brand);outline-offset:2px}
@media (hover:hover){.prod-nav a:hover{color:var(--ink)}}
.prod-list{display:grid}
.sheet{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,64px);padding-block:clamp(40px,5vw,72px);border-bottom:1px solid var(--rule);scroll-margin-top:calc(var(--nav-h) + 8px)}
.sheet:first-child{padding-top:0}
.sheet .dish{width:100%}
.sheet-cap{margin-top:16px;color:var(--muted);text-align:center}
.sheet .mono.code{color:var(--brand);display:block;margin-bottom:12px}
.sheet h2{font-size:clamp(2rem,3.6vw,3rem)}
.sheet .lede{margin-top:16px;font-size:1.0625rem}
.sheet .label{margin-top:28px}
.uses{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.uses li{padding:8px 12px;border:1px solid var(--line);font-size:.9375rem}
.sheet .btn{margin-top:28px}

/* Team */
.team-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:41px;border-top:1px solid var(--rule)}
.person{position:relative;padding:24px 0 28px}
.person + .person::before{content:"";position:absolute;left:-21px;top:0;bottom:0;width:1px;background:var(--line)}
.person figure{margin:0;aspect-ratio:4/5;overflow:hidden;background:#fff}
.person img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);transition:filter 400ms ease}
@media (hover:hover){.person:hover img{filter:none}}
.person .mono{display:block;margin-top:16px;color:var(--brand)}
.person :is(h2,h3){font-size:1.5rem;margin-top:6px}

/* Article */
.art-head,.prose{max-width:760px}
.art-head{padding-top:clamp(40px,6vw,80px);padding-bottom:28px;border-bottom:1px solid var(--rule)}
.art-head h1{font-size:clamp(2.25rem,4.8vw,3.75rem);line-height:1.02}
.art-meta{display:flex;flex-wrap:wrap;gap:16px;margin-top:20px;color:var(--muted)}
.art-fig{margin:32px auto 40px;max-width:760px;overflow:hidden;background:var(--line)}
.art-fig img{width:100%;aspect-ratio:16/9;object-fit:cover}
.prose p{font-size:1.125rem;line-height:1.75}
.prose p + p{margin-top:16px}
.prose .art-intro{font-size:1.3125rem;line-height:1.6}
.prose h2{font-size:clamp(1.5rem,2.4vw,2rem);margin:52px 0 14px;padding-top:16px;border-top:1px solid var(--line)}
.art-cta{margin-top:56px;padding:28px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px}
.art-cta p{font:500 1.375rem/1.25 var(--sans);letter-spacing:-.02em;margin:0!important}

/* Contact */
.contact-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:start}
.details{margin:0;padding:0;list-style:none;border-top:1px solid var(--rule)}
.details li{display:grid;grid-template-columns:110px 1fr;gap:16px;padding:16px 0;border-bottom:1px solid var(--line)}
.details .mono{color:var(--muted);padding-top:4px}
.details a{text-decoration:none}
.details .nums{display:grid;gap:4px}
.map-link{display:inline-flex;align-items:center;gap:8px;margin-top:20px;font-weight:500;text-decoration:none;border-bottom:1px solid var(--rule);min-height:44px}
.form{display:grid;gap:22px;padding:clamp(24px,3vw,40px);background:var(--paper);border:1px solid var(--line)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:grid;gap:8px}
.field label{font:500 .75rem/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase}
.req{color:var(--brand)}
.opt{color:var(--muted);text-transform:none;letter-spacing:0;font-family:var(--sans);font-size:.875rem}
.field input,.field textarea,.field select{width:100%;min-height:52px;padding:12px 14px;border:1px solid color-mix(in srgb,var(--ink) 40%,var(--line));border-radius:0;background:var(--bg);color:var(--ink);font:400 1rem/1.5 var(--sans);transition:border-color 200ms ease,box-shadow 200ms ease}
.field textarea{min-height:150px;resize:vertical}
.field select{appearance:none;-webkit-appearance:none;padding-right:44px;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 22px) 50%,calc(100% - 16px) 50%;background-size:6px 6px;background-repeat:no-repeat}
.field :is(input,textarea,select):focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 28%,transparent)}
.field ::placeholder{color:var(--muted);opacity:.9}
.err{display:none;align-items:center;gap:8px;color:var(--err);font-size:.9375rem;font-weight:500}
.field.invalid .err{display:flex}
.field.invalid :is(input,textarea){border-color:var(--err)}
.form-note{font-size:.9375rem;color:var(--muted)}
.form-status{display:none;gap:12px;padding:14px;border:1px solid var(--brand);font-weight:500}
.form-status.show{display:flex}
.form-status .i{color:var(--brand);margin-top:3px}

/* Footer */
.footer{border-top:1px solid var(--rule);padding-block:56px 32px}
.foot-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,3fr) minmax(0,4fr);gap:40px}
.foot-logo{height:110px;width:auto}
.foot-line{margin-top:16px;color:var(--muted);max-width:32ch}
.foot-h{font:500 .75rem/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.footer li a{display:inline-flex;min-height:36px;align-items:center;text-decoration:none}
.copy{display:flex;justify-content:space-between;gap:16px;margin-top:48px;padding-top:20px;border-top:1px solid var(--line);color:var(--muted)}
.copy-l{display:flex;flex-wrap:wrap;gap:8px 32px}
.notfound{min-height:62vh;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;align-items:center}
.notfound h1{font-size:clamp(2.75rem,6vw,5rem);max-width:12ch}
.notfound .lede{margin-top:20px}
.notfound .dish{max-width:360px;justify-self:end;width:100%;filter:grayscale(.6)}

/* Dark logo swap */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .lt{display:none}:root:not([data-theme="light"]) .dk{display:block}}
:root[data-theme="dark"] .lt{display:none}
:root[data-theme="dark"] .dk{display:block}

/* Reveal motion */
.js .rv{opacity:0;transform:translateY(14px);transition:opacity 600ms var(--ease-out),transform 600ms var(--ease-out);transition-delay:calc(var(--i,0) * 70ms)}
.js .rv.in{opacity:1;transform:none}
.js .trio .dish{opacity:0;transform:scale(.92) rotate(-20deg);transition:opacity 700ms var(--ease-out),transform 1100ms var(--ease-out)}
.js .trio .d2{transition-delay:120ms}.js .trio .d3{transition-delay:240ms}
.js .trio.in .dish{opacity:1;transform:none}

@view-transition{navigation:auto}
::view-transition-old(root){animation:160ms var(--ease-out) both vt-out}
::view-transition-new(root){animation:240ms var(--ease-out) both vt-in}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0}}

@media (max-width:1100px){
  .menu{display:none}
  .burger{display:grid}
  .nav.open .menu{display:grid;position:absolute;left:0;right:0;top:var(--nav-h);height:auto;padding:8px var(--gutter) 16px;background:var(--bg);border-bottom:1px solid var(--rule)}
  .nav.open .menu a{min-height:52px;padding:0;font-size:1.125rem;color:var(--ink);border-bottom:1px solid var(--line)}
  .nav.open .menu a::after{display:none}
  .nav.open .menu a[aria-current="page"]{color:var(--brand)}
  .nav-cta{display:none}
}
@media (max-width:1023px){
  .cat{grid-template-columns:1fr}
  .entry:nth-child(even){padding-left:0;border-left:0}
  .spec-strip,.process{grid-template-columns:repeat(2,minmax(0,1fr))}
  .spec-cell:nth-child(3),.process li:nth-child(3){padding-left:0;border-left:0}
  .spec-cell:nth-child(n+3){border-top:1px solid var(--line)}
  .process li:nth-child(n+3){padding-top:32px}
  .prod-layout{grid-template-columns:minmax(0,1fr)}
  .prod-nav{position:sticky;top:var(--nav-h);z-index:10;margin-inline:calc(-1 * var(--gutter));padding:8px var(--gutter);background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
  .prod-nav .mono{display:none}
  .prod-nav ul{display:flex;gap:8px;border:0;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x mandatory}
  .prod-nav li{flex:none;scroll-snap-align:start}
  .prod-nav a{border:1px solid var(--line);padding:6px 12px 6px 6px;white-space:nowrap}
  .prod-nav a.on{border-color:var(--brand)}
  .sheet{scroll-margin-top:calc(var(--nav-h) + 64px)}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-grid > :first-child{grid-column:1 / -1}
}
@media (max-width:767px){
  body{font-size:1rem}
  .strip .hide-sm{display:none}
  .hero-grid,.two,.contact-grid,.sheet,.cta-in,.notfound{grid-template-columns:minmax(0,1fr)}
  .hero-grid{min-height:0}
  .shead{flex-direction:column;align-items:flex-start;gap:12px}
  .trio{justify-self:center;max-width:420px}
  .trio-cap{display:none}
  .hero-cta .btn{flex:1 1 auto}
  .two .sticky{position:static}
  .entry{grid-template-columns:110px minmax(0,1fr);padding-right:0}
  .figs{grid-template-columns:1fr}
  .fig + .fig{padding-left:0;border-left:0;border-top:1px solid var(--line);margin-top:24px}
  .row{grid-template-columns:minmax(0,1fr) 28px;gap:8px 16px}
  .row .mono{grid-column:1 / -1}
  .row .thumb{display:none}
  .cta-in .btns{justify-content:flex-start}
  .next-grid{grid-template-columns:1fr}
  .next + .next{padding-left:0;border-left:0}
  .row2{grid-template-columns:1fr}
  .details li{grid-template-columns:1fr;gap:4px}
  .sheet .dish{max-width:320px;margin-inline:auto}
  .player{aspect-ratio:16/10}
  .player img{object-position:60% 50%}
  .foot-grid{grid-template-columns:1fr}
  .copy{flex-direction:column}
  .brand span{display:none}
  .notfound .dish{display:none}
}
@media (max-width:600px){
  .team-grid{grid-template-columns:minmax(0,1fr)}
  .person{display:grid;grid-template-columns:120px minmax(0,1fr);grid-template-rows:1fr auto auto 1fr;column-gap:16px;padding:20px 0;border-bottom:1px solid var(--line)}
  .person + .person::before{display:none}
  .person figure{grid-row:1 / -1}
  .person .mono{grid-row:2;margin-top:0}
  .person :is(h2,h3){grid-row:3;margin-top:4px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rv{transform:none;transition:opacity 200ms ease}
  .js .trio .dish{transform:none;transition:opacity 200ms ease}
  .entry .dish,.entry:hover .dish{transform:none!important;transition:none}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}