/* ══════════════════════════════════════════════════════════════════════
   BORING DECO — site system · ISSUE 04
   A technical specification, art-directed.
   Oversized editorial display against small mono annotation.
   Deadpan, exact, no adjectives. Boring, on purpose.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 00 · tokens ─────────────────────────────────────────────────── */
:root{
  --paper:#FFFFFF;
  --bone:#F6F6F5;
  --sand:#EFEEEA;
  --ink:#0E0E10;
  --line:#E4E4E1;
  /* nudged darker than Issue 03 so mono labels clear 4.5:1 on paper and
     bone, and the oversized section numerals clear 3:1 */
  --muted:#6B6B6E;
  --faint:#8C8C8E;

  --deep:#111310;
  --deep-line:#2B2E2A;
  --deep-muted:#8E918B;
  --deep-paper:#F1F1EC;

  --display:'Archivo','Helvetica Neue',Arial,sans-serif;
  --body:'Instrument Sans','Helvetica Neue',Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
  --kr:'Noto Sans KR',var(--display);

  --shell:1280px;
  --pad:clamp(1.25rem,4.5vw,4.5rem);
  /* page rhythm — sections breathe more at 04.1 */
  --air:clamp(5.5rem,11vw,12rem);
  --bar:52px;

  --ease:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--paper);scroll-behavior:smooth;
  scroll-padding-top:calc(var(--bar) + 1rem)}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);
  font-size:clamp(1rem,.96rem + .2vw,1.0625rem);line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
h1,h2,h3,h4,p,dl,dd,figure,ul{margin:0}
ul{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.deep :focus-visible{outline-color:var(--deep-paper)}

.shell{max-width:var(--shell);margin-inline:auto;padding-inline:var(--pad);width:100%}
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* the wordmarks ship as black-on-transparent files; invert them on ink */
.inv{filter:invert(1)}

/* paper grain — carried over from Issue 03 */
body::after{content:"";position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ── 01 · typographic register ───────────────────────────────────── */
.mono{font-family:var(--mono);font-size:.6875rem;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted)}
.mono--sm{font-size:.625rem;letter-spacing:.16em}
.mono--xs{font-size:.5625rem;letter-spacing:.14em}
.mono--ink{color:var(--ink)}

/* The display sizes stepped back at Issue 04.1. The headline no longer has
   to shout to carry the page — the plates do that now. */
.d1{font-family:var(--display);font-weight:600;letter-spacing:-.042em;line-height:.9;
  font-size:clamp(3.25rem,1.4rem + 6vw,7rem)}
.d2{font-family:var(--display);font-weight:600;letter-spacing:-.038em;line-height:.94;
  font-size:clamp(2.25rem,1.25rem + 4.2vw,4.75rem)}
.d3{font-family:var(--display);font-weight:500;letter-spacing:-.028em;line-height:1.04;
  font-size:clamp(1.375rem,1.05rem + 1.5vw,2rem)}
.lede{font-size:clamp(1.125rem,1.02rem + .5vw,1.4375rem);line-height:1.52;color:var(--muted);
  letter-spacing:-.011em;max-width:46ch}
.prose p{max-width:62ch;margin-bottom:1.15rem;color:var(--muted);
  font-size:clamp(1.0625rem,1rem + .3vw,1.1875rem);line-height:1.66}
.prose p:last-child{margin-bottom:0}
.prose strong{color:var(--ink);font-weight:500}
.deep .prose p{color:var(--deep-muted)}
.deep .prose strong{color:var(--deep-paper)}

/* the oversized section index — the loudest quiet thing on the page */
.sec__no{font-family:var(--mono);font-weight:400;color:var(--faint);
  font-size:clamp(2.5rem,1.4rem + 4.4vw,5.5rem);line-height:.8;letter-spacing:-.04em;
  font-variant-numeric:tabular-nums}
.deep .sec__no{color:#3A3D38}

/* ── 02 · masthead + navigation ──────────────────────────────────── */
.mast{position:fixed;top:0;left:0;right:0;z-index:80;
  border-bottom:1px solid transparent;transition:background-color .3s ease,border-color .3s ease}
.mast__row{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  min-height:var(--bar);padding-block:.55rem}
.mast.is-stuck{background:rgba(255,255,255,.93);border-bottom-color:var(--line);
  -webkit-backdrop-filter:saturate(180%) blur(12px);backdrop-filter:saturate(180%) blur(12px)}
@supports not (backdrop-filter:blur(2px)){.mast.is-stuck{background:var(--paper)}}

.mark{display:inline-block;line-height:0;flex:0 0 auto}
.mark img{width:clamp(84px,8vw,104px);height:auto;transition:opacity .2s ease}
.mark:hover img{opacity:.62}

.nav{display:flex;align-items:center;gap:clamp(.9rem,2.4vw,2.25rem)}
.nav a{position:relative;font-family:var(--mono);font-size:.625rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:#5B5C5F;
  padding-block:.35rem;transition:color .2s ease}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:.1rem;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .38s var(--ease)}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
@media(max-width:400px){
  .nav{gap:.8rem}
  .nav a{font-size:.5625rem;letter-spacing:.11em}
  .mark img{width:74px}
}

/* ── 03 · hero ───────────────────────────────────────────────────── */
.hero{position:relative;overflow:hidden;background:var(--sand);
  min-height:640px;height:92vh;max-height:1000px;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding-top:calc(var(--bar) + 2rem)}
.hero__field{position:absolute;inset:0;z-index:0;pointer-events:none}

/* each plane: outer takes the pointer parallax, inner takes the slow drift */
.plane{position:absolute;will-change:transform;
  transform:translate3d(calc(var(--mx,0) * var(--depth) * 1px),calc(var(--my,0) * var(--depth) * 1px),0);
  transition:transform .9s cubic-bezier(.22,.61,.36,1)}
.plane__in{width:100%;height:100%;overflow:hidden;will-change:transform}
.plane img{width:100%;height:100%;object-fit:cover;object-position:var(--fit,center)}

/* Every plane dissolves at its edges — no plate should announce that it is
   a rectangle sitting on the page. */
.plane--a{--depth:14;right:-2%;top:-6%;width:min(60vw,880px);height:114%;
  -webkit-mask-image:linear-gradient(88deg,transparent 0%,rgba(0,0,0,.55) 16%,#000 40%);
  mask-image:linear-gradient(88deg,transparent 0%,rgba(0,0,0,.55) 16%,#000 40%)}
.plane--a .plane__in{animation:driftA 34s ease-in-out infinite alternate}
.plane--b{--depth:26;left:-7%;bottom:-18%;width:min(34vw,430px);height:86%;opacity:.72;
  -webkit-mask-image:linear-gradient(255deg,transparent 6%,rgba(0,0,0,.5) 30%,#000 68%);
  mask-image:linear-gradient(255deg,transparent 6%,rgba(0,0,0,.5) 30%,#000 68%)}
.plane--b .plane__in{animation:driftB 28s ease-in-out infinite alternate}
.plane--c{--depth:46;right:44%;top:6%;width:min(15vw,190px);height:22%;opacity:.42;
  -webkit-mask-image:radial-gradient(ellipse at 50% 50%,#000 34%,transparent 74%);
  mask-image:radial-gradient(ellipse at 50% 50%,#000 34%,transparent 74%)}
.plane--c .plane__in{animation:driftC 22s ease-in-out infinite alternate}

@keyframes driftA{from{transform:translate3d(0,0,0) scale(1.02)}to{transform:translate3d(-2.2%,-3.4%,0) scale(1.11)}}
@keyframes driftB{from{transform:translate3d(0,2%,0) scale(1.06)}to{transform:translate3d(3%,-2.5%,0) scale(1.01)}}
@keyframes driftC{from{transform:translate3d(0,-2%,0) scale(1.04)}to{transform:translate3d(-3.5%,3%,0) scale(1.09)}}

/* a light wash so the display type always clears the drawing beneath it,
   plus a top scrim that keeps the masthead legible over the artwork */
.hero__wash{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(239,238,234,.97) 0%,rgba(239,238,234,.8) 32%,rgba(239,238,234,.28) 62%,rgba(239,238,234,0) 100%) top/100% 230px no-repeat,
    linear-gradient(100deg,rgba(239,238,234,.98) 0%,rgba(239,238,234,.95) 26%,rgba(239,238,234,.6) 44%,rgba(239,238,234,.08) 62%,rgba(239,238,234,0) 74%)}

.hero__inner{position:relative;z-index:2;padding-bottom:clamp(1.75rem,4vw,3rem);
  transform:translate3d(0,calc(var(--sy,0) * -.08px),0);
  opacity:clamp(0,calc(1 - var(--sy,0) / 820),1)}
.hero__eyebrow{display:flex;align-items:center;gap:.8rem;margin-bottom:clamp(1.25rem,3vw,2.25rem)}
.hero__eyebrow::before{content:"";width:clamp(24px,5vw,64px);height:1px;background:var(--faint);flex:0 0 auto}

.hero__title{margin-bottom:clamp(1.25rem,3vw,2rem)}
.hero__title .ln{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.hero__title .ln>span{display:block}
.hero__title .ln--in{margin-left:clamp(0px,7vw,9rem)}

.hero__foot{display:flex;align-items:flex-end;justify-content:space-between;
  gap:clamp(1.5rem,5vw,4rem);flex-wrap:wrap}
.hero__lede{max-width:38ch;color:#4A4B4D}
.hero__cta{margin-top:1.4rem}

/* the specification label — paper stock pasted onto the plate, the way a
   herbarium sheet carries its determination slip */
.hero__spec{display:grid;grid-template-columns:auto auto;gap:.1rem 1.75rem;
  background:var(--paper);border:1px solid var(--line);
  padding:.9rem 1.1rem 1rem;min-width:280px}
.hero__spec dt{font-family:var(--mono);font-size:.5625rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);align-self:center;
  padding-block:.3rem;border-top:1px solid var(--line)}
.hero__spec dd{margin:0;text-align:right;font-family:var(--mono);font-size:.6875rem;
  letter-spacing:.02em;color:var(--ink);font-variant-numeric:tabular-nums;
  padding-block:.3rem;border-top:1px solid var(--line)}
.hero__spec dt:first-of-type,.hero__spec dd:first-of-type{border-top:0}

/* plate annotation — sits with the specification block so the whole
   technical register reads as one column, clear of the drawing */
.hero__aside{display:flex;flex-direction:column;align-items:flex-end;gap:.7rem}
.hero__fig{display:flex;align-items:center;gap:.7rem;text-align:right}
.hero__fig::before{content:"";width:clamp(20px,3vw,40px);height:1px;background:var(--faint)}
@media(max-width:860px){
  .hero__aside{align-items:stretch;width:100%}
  .hero__fig{justify-content:flex-start}
}

/* running specimen ticker */
.ticker{position:relative;z-index:2;overflow:hidden;border-top:1px solid rgba(14,14,16,.14);
  background:rgba(255,255,255,.34);padding-block:.6rem;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.ticker__track{display:flex;width:max-content;animation:ticker 68s linear infinite}
.ticker__track span{font-family:var(--mono);font-size:.625rem;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--muted);
  padding-inline:1.6rem;white-space:nowrap}
@keyframes ticker{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* Mobile is not the desktop hero stacked. The plate takes the top of the
   screen as a full-bleed crop; the type block sits beneath it on paper. */
@media(max-width:860px){
  .hero{display:block;height:auto;min-height:0;max-height:none;padding-top:0;
    background:var(--paper)}
  .hero__field{position:relative;inset:auto;height:clamp(280px,42vh,430px)}
  .plane--a{--depth:0;inset:0;width:100%;height:100%}
  /* a phone sees the bloom, not the stem */
  .plane--a img{object-position:58% 7%}
  .plane--b,.plane--c{display:none}
  .hero__wash{top:0;bottom:auto;height:clamp(280px,42vh,430px);
    background:linear-gradient(180deg,rgba(239,238,234,.92) 0%,rgba(239,238,234,.32) 22%,rgba(239,238,234,0) 46%,rgba(255,255,255,.55) 88%,#fff 100%)}
  .hero__inner{padding-top:clamp(1.75rem,6vw,2.5rem);padding-bottom:1.75rem;
    transform:none;opacity:1}
  .hero__foot{flex-direction:column;align-items:flex-start;gap:1.75rem}
  .hero__lede{max-width:none}
  .hero__spec{width:100%;min-width:0}
  .hero__title .ln--in{margin-left:0}
}

/* ── 04 · section chrome ─────────────────────────────────────────── */
.sec{padding-block:var(--air);position:relative}
.sec--bone{background:var(--bone)}
.sec--rule{border-top:1px solid var(--line)}
.sec__head{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);
  gap:clamp(1.25rem,4vw,3.5rem);align-items:start;margin-bottom:clamp(3rem,7vw,6.5rem)}
.sec__head p.mono{margin-bottom:1.1rem}
.sec__title{max-width:20ch}

/* ── 05 · retail presence — metric band ──────────────────────────── */
/* The footprint figure leads; the other three support it. Four equal
   columns made every number look equally unremarkable. */
.metrics{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;
  border-top:1px solid var(--line)}
.metrics>div:first-child .metric__v{font-size:clamp(3.25rem,1.6rem + 6.4vw,7.5rem);
  letter-spacing:-.05em}
.metrics>div:first-child{padding-right:clamp(1.25rem,3vw,3rem)}
/* dt is written first for the document to make sense; column-reverse puts
   the figure above its label where the eye wants it */
/* space-between in column-reverse pins every label to the bottom rule, so
   the figures can differ in size without the labels looking scattered */
.metrics>div{padding:clamp(1.5rem,3vw,2.25rem) clamp(.9rem,2vw,1.75rem) clamp(1.25rem,2.5vw,1.75rem) 0;
  border-bottom:1px solid var(--line);
  display:flex;flex-direction:column-reverse;justify-content:space-between;gap:1.5rem}
.metrics>div+div{border-left:1px solid var(--line);padding-left:clamp(.9rem,2vw,1.75rem)}
.metric__v{font-family:var(--display);font-weight:500;letter-spacing:-.04em;line-height:.92;
  font-size:clamp(1.875rem,1.15rem + 2.7vw,3.5rem);font-variant-numeric:tabular-nums;margin:0}
.metric__k{font-family:var(--mono);font-size:.5625rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted)}
.metrics__note{margin-top:1.4rem;font-family:var(--mono);font-size:.625rem;letter-spacing:.1em;
  color:var(--muted);max-width:52ch;line-height:1.8}
@media(max-width:900px){
  .metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .metrics>div:first-child{grid-column:1 / -1;padding-right:0}
  .metrics>div:nth-child(odd){border-left:0;padding-left:0}
  .metrics>div:nth-child(even){border-left:1px solid var(--line);padding-left:1rem}
  .metrics>div:first-child .metric__v{font-size:clamp(3.5rem,2rem + 9vw,6rem)}
}

/* ── 06 · approach — sticky editorial ────────────────────────────── */
.approach{display:grid;grid-template-columns:minmax(0,.34fr) minmax(0,1fr);
  gap:clamp(1.5rem,5vw,5rem);align-items:start}
.approach__stick{position:sticky;top:calc(var(--bar) + 2.5rem)}
.approach__stick .d2{font-size:clamp(1.75rem,1.2rem + 2.1vw,2.875rem)}
.approach__list>div{display:grid;grid-template-columns:minmax(96px,148px) minmax(0,1fr);
  gap:clamp(1rem,3vw,2.5rem);align-items:baseline;
  padding-block:clamp(1.6rem,3.4vw,2.6rem);border-top:1px solid var(--line)}
.approach__list>div:last-child{border-bottom:1px solid var(--line)}
.approach__k{font-family:var(--mono);font-size:.625rem;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted)}
.approach__v{font-family:var(--display);font-weight:500;letter-spacing:-.028em;line-height:1.06;
  font-size:clamp(1.35rem,1rem + 1.9vw,2.4rem)}
@media(max-width:860px){
  .approach{grid-template-columns:minmax(0,1fr)}
  .approach__stick{position:static}
  .approach__list>div{grid-template-columns:minmax(0,1fr);gap:.7rem}
}

/* ── 07 · brand portfolio — editorial entries ────────────────────── */
.entries{display:flex;flex-direction:column;gap:clamp(4rem,9vw,9rem)}
.entry{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:clamp(1.5rem,5vw,4.5rem);align-items:center}
/* the plate runs past the text grid and out to the sheet edge */
.entry .entry__fig{margin-left:calc(var(--pad) * -1)}
.entry:nth-child(even){grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr)}
.entry:nth-child(even) .entry__fig{order:2;margin-left:0;margin-right:calc(var(--pad) * -1)}
.entry__fig{position:relative;overflow:hidden;background:var(--bone);aspect-ratio:4/5}
.entry__fig img{width:100%;height:100%;object-fit:cover;
  transition:transform 1.3s var(--ease)}
a.entry:hover .entry__fig img{transform:scale(1.05)}
/* the entry number lifts out of the plate on hover — one small, quiet tell */
.entry__no{transition:background-color .3s ease,padding .3s var(--ease)}
a.entry:hover .entry__no{background:var(--ink);color:var(--paper);padding-right:1.4rem}

/* Two entries are given more room so the index reads as an edit, not a list.
   Same system, different emphasis. */
.entry--feature{grid-template-columns:minmax(0,1.42fr) minmax(0,.78fr)}
/* a square crop, against the 4:5 of the standard entries — the variation
   is in the frame, not in the system */
.entry--feature .entry__fig{aspect-ratio:1/1}
.entry--feature .entry__fig img{object-position:50% 20%}
.entry--feature .entry__wordmark{max-width:min(100%,400px)}
.entry:nth-child(even).entry--feature{grid-template-columns:minmax(0,.78fr) minmax(0,1.42fr)}
@media(max-width:860px){
  .entry--feature .entry__fig{aspect-ratio:4/5}
}
.entry__no{position:absolute;top:0;left:0;z-index:2;
  padding:.7rem .9rem;font-family:var(--mono);font-size:.5625rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink);background:rgba(255,255,255,.82)}
.entry__body{display:flex;flex-direction:column;align-items:flex-start;gap:1.15rem;min-width:0}
.entry__wordmark{line-height:0;max-width:min(100%,320px)}
.entry__wordmark svg,.entry__wordmark img{width:100%;height:auto;color:var(--ink)}
.entry__wordmark--tall{max-width:min(100%,190px)}
.entry__wordmark--sq{max-width:min(100%,142px)}
.entry__wordmark--type{font-family:var(--display);font-weight:600;letter-spacing:-.035em;
  line-height:1;font-size:clamp(1.9rem,1.2rem + 2.4vw,3rem);text-transform:none}
.entry__cat{font-family:var(--display);font-weight:500;font-size:1.0625rem;letter-spacing:-.012em}
.entry__spec{display:grid;width:100%;max-width:420px;margin-block:.2rem}
.entry__spec>div{display:grid;grid-template-columns:minmax(74px,auto) minmax(0,1fr);
  gap:.5rem .9rem;align-items:baseline;padding-block:.5rem;border-top:1px solid var(--line)}
.entry__spec dt{font-family:var(--mono);font-weight:600;font-size:.5625rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted)}
.entry__spec dd{margin:0;font-family:var(--mono);font-size:.5625rem;letter-spacing:.03em;color:var(--ink)}
.status{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--mono);
  font-size:.5625rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.dot{width:5px;height:5px;border-radius:50%;background:var(--faint);flex:0 0 auto}
.dot--on{background:var(--ink)}
@media(max-width:860px){
  .entry,.entry:nth-child(even){grid-template-columns:minmax(0,1fr);gap:1.5rem}
  .entry:nth-child(even) .entry__fig{order:0}
  /* on a phone the plate takes the full sheet width, edge to edge */
  .entry .entry__fig,.entry:nth-child(even) .entry__fig{
    aspect-ratio:3/4;margin-inline:calc(var(--pad) * -1)}
}

/* ── 08 · editorial story ────────────────────────────────────────── */
.bleed{position:relative;overflow:hidden;background:var(--bone)}
.bleed img{width:100%;height:100%;object-fit:cover;display:block}
.bleed--wide{aspect-ratio:16/9}
/* the botanical break — cinematic, deliberately taller than a 16:9 band */
.bleed--tall{aspect-ratio:auto;height:min(86vh,880px)}
.bleed--tall img{height:100%}
@media(max-width:640px){
  .bleed--wide{aspect-ratio:4/5}
  .bleed--tall{height:min(72vh,560px)}
}
.bleed__type{position:absolute;inset:0;z-index:2;display:flex;align-items:flex-end;
  pointer-events:none;
  background:linear-gradient(0deg,rgba(246,246,245,.92) 0%,rgba(246,246,245,.55) 26%,rgba(246,246,245,0) 52%)}
.bleed__type .shell{padding-bottom:clamp(1.5rem,4vw,3.25rem)}
.bleed__cap{position:absolute;right:0;top:0;z-index:3;padding:.7rem .9rem;
  font-family:var(--mono);font-size:.5625rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink);background:var(--paper)}

/* imagery leads, text supports — not a 50/50 split */
.story{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr);
  gap:clamp(1.5rem,5vw,5rem);align-items:center;margin-top:clamp(3rem,7vw,6rem)}
.story__fig{position:relative;overflow:hidden;aspect-ratio:4/5;background:var(--bone);
  margin-left:calc(var(--pad) * -1)}
.story__fig img{width:100%;height:100%;object-fit:cover;
  transition:transform 1.4s var(--ease)}
.story__fig:hover img{transform:scale(1.035)}
/* the annotation register, set against the large plate */
.story__annot{position:absolute;right:0;bottom:0;z-index:2;padding:.7rem .9rem;
  font-family:var(--mono);font-size:.5625rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink);background:var(--paper)}
.story__notes{display:grid;gap:0;margin-top:1.75rem;max-width:440px}
.story__notes>div{display:grid;grid-template-columns:minmax(88px,auto) minmax(0,1fr);
  gap:.6rem 1rem;padding-block:.72rem;border-top:1px solid var(--line);align-items:baseline}
.story__notes>div:last-child{border-bottom:1px solid var(--line)}
.story__notes dt{font-family:var(--mono);font-size:.5625rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}
.story__notes dd{margin:0;font-size:.875rem;letter-spacing:-.008em}
@media(max-width:860px){
  .story{grid-template-columns:minmax(0,1fr)}
  .story__fig{margin-inline:calc(var(--pad) * -1);aspect-ratio:3/4}
}

/* ── 09 · inverted band (Boring Data) ────────────────────────────── */
.deep{background:var(--deep);color:var(--deep-paper)}
.deep .mono{color:var(--deep-muted)}
.deep .lede{color:var(--deep-muted)}
.deep .sec__head{border-color:var(--deep-line)}
.data{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
  gap:clamp(2rem,6vw,5rem);align-items:center}
.data__chart{border:1px solid var(--deep-line);padding:clamp(1.25rem,3vw,2rem);
  background:#0B0D0B;position:relative}
.data__chart svg{width:100%;height:auto;color:var(--deep-paper)}
.data__chart figcaption{margin-top:1rem;font-family:var(--mono);font-size:.5625rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--deep-muted)}
.tiers{display:flex;flex-wrap:wrap;gap:.5rem;margin-block:1.75rem}
.tiers span{font-family:var(--mono);font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;
  border:1px solid var(--deep-line);padding:.45rem .85rem;color:var(--deep-paper)}
.deep .go{color:var(--deep-paper);border-color:var(--deep-paper)}
@media(max-width:860px){.data{grid-template-columns:minmax(0,1fr)}}

/* chart draw-on */
.draw .ln{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.5s var(--ease)}
.draw .g-plot .ln{transition-duration:1.9s;transition-delay:.35s}
.draw circle{opacity:0;transition:opacity .3s ease}
.draw.in .ln{stroke-dashoffset:0}
.draw.in circle{opacity:1;transition-delay:1.8s}

/* ── 10 · calls to action ────────────────────────────────────────── */
.go{display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--mono);font-size:.6875rem;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink);padding-bottom:5px;
  border-bottom:1px solid currentColor}
.go svg{transition:transform .45s var(--ease)}
.go:hover svg,a:hover>.go svg,.entry:hover .go svg{transform:translateX(5px)}

/* ── 11 · contact + footer ───────────────────────────────────────── */
.contact{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);
  gap:clamp(1rem,4vw,3.5rem);align-items:start}
.contact__email{font-family:var(--display);font-weight:500;letter-spacing:-.04em;line-height:.98;
  font-size:clamp(1.75rem,1rem + 4vw,4rem);display:inline-block;
  border-bottom:1px solid var(--line);padding-bottom:.06em;transition:border-color .25s ease}
.contact__email:hover{border-bottom-color:var(--ink)}
.contact__note{margin-top:1.1rem;color:var(--muted);font-size:.9375rem;max-width:44ch}
@media(max-width:640px){.contact{grid-template-columns:minmax(0,1fr);gap:1rem}}

.foot{border-top:1px solid var(--line);padding-top:clamp(3rem,6vw,5rem);padding-bottom:2.5rem}
.foot__mid{display:flex;flex-direction:column;align-items:center;gap:1.05rem;text-align:center}
.foot__tag{font-family:var(--mono);font-size:.6875rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--muted)}
.foot__nav{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem 1.5rem;margin-top:.4rem}
.foot__line{margin-top:clamp(2.5rem,5vw,3.5rem);display:flex;justify-content:space-between;
  flex-wrap:wrap;gap:.5rem;font-family:var(--mono);font-size:.5625rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);font-variant-numeric:tabular-nums}
@media(max-width:520px){.foot__line{justify-content:center;text-align:center}}

/* ── 12 · product pages ──────────────────────────────────────────── */
.crumb{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.crumb__row{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  flex-wrap:wrap;row-gap:.55rem;padding-block:.85rem;
  font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted)}
.crumb__row a{transition:color .2s ease}
.crumb__row a:hover{color:var(--ink)}
.idx{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem clamp(.85rem,2.2vw,1.6rem)}
.idx__no{color:var(--faint);margin-right:.4rem;letter-spacing:.1em}
.idx a{padding-bottom:2px;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.idx a:hover{color:var(--ink);border-bottom-color:var(--ink)}
.idx a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--ink)}
.idx .idx__pending{color:var(--muted);opacity:.85}
@media(max-width:720px){.idx__no{display:none}.idx{gap:.9rem}}

/* cinematic product header */
.phero{position:relative;overflow:hidden;background:var(--bone);
  min-height:min(74vh,660px);display:flex;align-items:flex-end;
  padding-top:calc(var(--bar) + 3rem);padding-bottom:clamp(1.75rem,4vw,3rem)}
.phero__bg{position:absolute;inset:0;z-index:0}
.phero__bg img{width:100%;height:100%;object-fit:cover;
  animation:pheroIn 1.6s var(--ease) both,driftA 40s ease-in-out 1.6s infinite alternate}
@keyframes pheroIn{from{transform:scale(1.09);opacity:.4}to{transform:scale(1.02);opacity:1}}
.phero__wash{position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg,rgba(246,246,245,.97) 0%,rgba(246,246,245,.72) 40%,rgba(246,246,245,0) 100%) top/100% 200px no-repeat,
    linear-gradient(96deg,rgba(246,246,245,.97) 0%,rgba(246,246,245,.88) 36%,rgba(246,246,245,.22) 64%,rgba(246,246,245,0) 88%)}
.phero--deep{background:var(--deep)}
.phero--deep .phero__wash{
  background:
    linear-gradient(180deg,rgba(17,19,16,.97) 0%,rgba(17,19,16,.74) 40%,rgba(17,19,16,0) 100%) top/100% 200px no-repeat,
    linear-gradient(96deg,rgba(17,19,16,.97) 0%,rgba(17,19,16,.9) 36%,rgba(17,19,16,.26) 64%,rgba(17,19,16,0) 88%)}
.phero__inner{position:relative;z-index:2;width:100%}
.phero__logo{line-height:0;margin-block:clamp(1rem,2.5vw,1.5rem);
  max-width:min(100%,clamp(280px,44vw,520px))}
.phero__logo svg,.phero__logo img{width:100%;height:auto;color:var(--ink)}
.phero__logo--tall{max-width:min(100%,clamp(180px,26vw,300px))}
.phero__logo--sq{max-width:min(100%,clamp(120px,16vw,190px))}
.phero__logo--type{font-family:var(--display);font-weight:600;letter-spacing:-.045em;line-height:.9;
  font-size:clamp(2.75rem,1.4rem + 6vw,6rem)}
.phero__sub{font-family:var(--mono);font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted)}
.phero__sub .kr{font-family:var(--kr);letter-spacing:0;text-transform:none}
.phero__lede{margin-top:1.25rem;max-width:52ch}

/* On a phone the plate reads across the top and the type sits on solid
   paper beneath it — the same idea as the home hero, not a squeezed
   version of the desktop header. */
@media(max-width:860px){
  .phero{min-height:min(70vh,560px);padding-top:calc(var(--bar) + 7rem)}
  .phero__bg img{object-position:80% 38%}
  .phero__wash{background:linear-gradient(180deg,
    rgba(246,246,245,.94) 0%,rgba(246,246,245,.3) 22%,rgba(246,246,245,.2) 40%,
    rgba(246,246,245,.86) 62%,rgba(246,246,245,.99) 78%,#F6F6F5 100%)}
  .phero--deep .phero__wash{background:linear-gradient(180deg,
    rgba(17,19,16,.94) 0%,rgba(17,19,16,.32) 22%,rgba(17,19,16,.22) 40%,
    rgba(17,19,16,.88) 62%,rgba(17,19,16,.99) 78%,var(--deep) 100%)}
}

.block{padding-block:clamp(2.75rem,6vw,4.5rem);border-top:1px solid var(--line)}
.block--deep{border-color:var(--deep-line)}
.block__h{font-family:var(--mono);font-size:.6875rem;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);margin-bottom:clamp(1.25rem,3vw,2rem)}
.block__grid{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);
  gap:clamp(1rem,4vw,3.5rem);align-items:start}
@media(max-width:860px){.block__grid{grid-template-columns:minmax(0,1fr);gap:1.25rem}}

.spec{display:grid}
.spec>div{display:grid;grid-template-columns:minmax(112px,190px) minmax(0,1fr);
  gap:clamp(.75rem,3vw,2.5rem);align-items:baseline;
  padding-block:1.3rem;border-top:1px solid var(--line)}
.spec>div:first-child{border-top:0;padding-top:0}
.spec>div:last-child{border-bottom:1px solid var(--line)}
.spec dt{font-family:var(--mono);font-size:.625rem;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted)}
.spec dd{margin:0;font-size:clamp(1rem,.95rem + .3vw,1.1875rem);letter-spacing:-.012em}
.spec .note{display:block;margin-top:.45rem;font-family:var(--mono);font-size:.6875rem;
  letter-spacing:.01em;color:var(--muted)}
.deep .spec>div,.deep .spec>div:last-child{border-color:var(--deep-line)}
.deep .spec dt{color:var(--deep-muted)}
@media(max-width:640px){.spec>div{grid-template-columns:minmax(0,1fr);gap:.35rem}}

.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.dtable{width:100%;border-collapse:collapse;min-width:420px}
.dtable th,.dtable td{text-align:left;padding:.9rem 1rem;border-bottom:1px solid var(--line);
  white-space:nowrap}
.dtable th:first-child,.dtable td:first-child{padding-left:0}
.dtable thead th{font-family:var(--mono);font-size:.5625rem;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--ink)}
.dtable tbody td{font-family:var(--mono);font-size:.8125rem;font-variant-numeric:tabular-nums}
.deep .dtable th,.deep .dtable td{border-color:var(--deep-line)}
.deep .dtable thead th{border-bottom-color:var(--deep-paper);color:var(--deep-muted)}
.tnote{margin-top:1.1rem;font-family:var(--mono);font-size:.625rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted)}
@media(max-width:520px){
  .dtable{min-width:340px}
  .dtable th,.dtable td{padding:.75rem .7rem}
}

.notes li{padding-block:.95rem;border-top:1px solid var(--line);font-size:.9375rem}
.notes li:last-child{border-bottom:1px solid var(--line)}
.notes li::before{content:"—";margin-right:.85rem;color:var(--faint);font-family:var(--mono)}

/* annotated detail plate */
.figure{position:relative;overflow:hidden;background:var(--bone);aspect-ratio:3/2}
.figure img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.figure:hover img{transform:scale(1.03)}
.figure__cap{position:absolute;left:0;bottom:0;z-index:2;padding:.7rem .9rem;
  font-family:var(--mono);font-size:.5625rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);background:rgba(255,255,255,.8)}
.deep .figure__cap{background:rgba(17,19,16,.8);color:var(--deep-muted)}
@media(max-width:640px){.figure{aspect-ratio:4/3}}

/* next / previous entry */
.pager{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line)}
.pager a,.pager span{display:flex;flex-direction:column;gap:.5rem;
  padding-block:clamp(1.75rem,4vw,2.75rem);min-width:0}
.pager>*+*{border-left:1px solid var(--line);padding-left:clamp(1rem,3vw,2.5rem)}
.pager .pager__t{font-family:var(--display);font-weight:500;letter-spacing:-.028em;
  font-size:clamp(1.25rem,1rem + 1.4vw,2rem);line-height:1.06}
.pager a:hover .pager__t{opacity:.62}
.pager .is-end .pager__t{color:var(--muted)}
.pager__r{align-items:flex-end;text-align:right}
@media(max-width:520px){
  .pager{grid-template-columns:minmax(0,1fr)}
  .pager>*+*{border-left:0;border-top:1px solid var(--line);padding-left:0}
  .pager__r{align-items:flex-start;text-align:left}
}

/* ── 12b · whole-page ink theme (Boring Data) ────────────────────── */
body.deep{background:var(--deep);color:var(--deep-paper)}
body.deep .mast.is-stuck{background:rgba(17,19,16,.93);border-bottom-color:var(--deep-line)}
@supports not (backdrop-filter:blur(2px)){body.deep .mast.is-stuck{background:var(--deep)}}
body.deep .mark img{filter:invert(1)}
body.deep .nav a{color:var(--deep-muted)}
body.deep .nav a:hover,body.deep .nav a[aria-current="page"]{color:var(--deep-paper)}
body.deep .crumb,body.deep .block,body.deep .pager,body.deep .foot,
body.deep .notes li,body.deep .dtable th,body.deep .dtable td,
body.deep .pager>*+*{border-color:var(--deep-line)}
body.deep .crumb__row,body.deep .idx a,body.deep .block__h,body.deep .tnote,
body.deep .status,body.deep .contact__note,body.deep .foot__tag{color:var(--deep-muted)}
body.deep .crumb__row a:hover,body.deep .idx a:hover,
body.deep .idx a[aria-current="page"]{color:var(--deep-paper)}
body.deep .idx a[aria-current="page"]{border-bottom-color:var(--deep-paper)}
body.deep .idx__no,body.deep .idx .idx__pending,body.deep .foot__line,
body.deep .notes li::before,body.deep .sec__no{color:#4E514C}
body.deep .contact__email{border-bottom-color:var(--deep-line)}
body.deep .contact__email:hover{border-bottom-color:var(--deep-paper)}
body.deep .dtable thead th{border-bottom-color:var(--deep-paper);color:var(--deep-muted)}
body.deep .figure,body.deep .bleed{background:#191B18}
body.deep .figure__cap{background:rgba(17,19,16,.86);color:var(--deep-muted)}
body.deep .sec--bone{background:#161814}

/* ── 12c · SAR artifacts ─────────────────────────────────────────── */
.card{border:1px solid var(--line);padding:clamp(1.1rem,3vw,1.75rem)}
body.deep .card{border-color:var(--deep-line);background:#0C0E0C}
.card__top{display:flex;justify-content:space-between;align-items:flex-start;
  gap:1rem;flex-wrap:wrap;margin-bottom:1.4rem}
.card__id{font-family:var(--mono);font-size:.8125rem;letter-spacing:.16em;text-transform:uppercase}
.card__pos{font-family:var(--mono);font-size:.5625rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-top:.35rem}
body.deep .card__pos{color:var(--deep-muted)}
.card__grade{text-align:right}
.card__grade small{display:block;font-family:var(--mono);font-size:.5625rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted)}
body.deep .card__grade small{color:var(--deep-muted)}
.card__grade b{font-family:var(--display);font-weight:600;letter-spacing:-.04em;line-height:1;
  font-size:clamp(2.25rem,1.5rem + 2.6vw,3.5rem)}
.card__scout{margin-top:1.25rem;font-size:.9375rem;color:var(--muted);max-width:62ch}
body.deep .card__scout{color:var(--deep-muted)}
.dtable tr.tot td{border-top:1px solid currentColor;font-weight:500}
.dtable tr.flip td{color:var(--ink)}
body.deep .dtable tr.flip td{color:var(--deep-paper)}
.dtable td.dash{color:var(--faint)}
body.deep .dtable td.dash{color:#4E514C}
.cap{font-family:var(--mono);font-size:.5625rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin-bottom:.9rem}
body.deep .cap{color:var(--deep-muted)}
.held{font-family:var(--mono);font-size:.625rem;letter-spacing:.1em;color:var(--muted);
  line-height:1.8;max-width:56ch;margin-top:1.25rem}
body.deep .held{color:var(--deep-muted)}

/* ── 13 · scroll reveal ──────────────────────────────────────────── */
.rv{opacity:0;transform:translate3d(0,18px,0);
  transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.08s}
.rv-d2{transition-delay:.16s}
.rv-d3{transition-delay:.24s}
/* if JS never runs, nothing may stay hidden and the masthead — which
   would otherwise never learn it has been scrolled past — stays solid */
.no-js .rv,.no-js .draw .ln{opacity:1;transform:none;stroke-dashoffset:0}
.no-js .draw circle{opacity:1}
.no-js .mast{background:rgba(255,255,255,.93);border-bottom-color:var(--line)}
.no-js body.deep .mast{background:rgba(17,19,16,.93);border-bottom-color:var(--deep-line)}

/* masked line rise, on load */
.rise{display:block;transform:translate3d(0,105%,0);
  animation:riseIn 1.05s var(--ease) forwards}
.rise-d1{animation-delay:.09s}
.rise-d2{animation-delay:.18s}
.rise-d3{animation-delay:.27s}
@keyframes riseIn{to{transform:translate3d(0,0,0)}}
.fade{opacity:0;animation:fadeIn 1s var(--ease) .42s forwards}
@keyframes fadeIn{to{opacity:1}}

/* ── 14 · reduced motion ─────────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .plane,.plane__in,.hero__inner,.phero__bg img{animation:none!important;transition:none!important;
    transform:none!important;opacity:1!important}
  .ticker__track{animation:none;transform:none}
  .rv{opacity:1;transform:none;transition:none}
  .rise{transform:none;animation:none}
  .fade{opacity:1;animation:none}
  .draw .ln{stroke-dasharray:none;stroke-dashoffset:0;transition:none}
  .draw circle{opacity:1;transition:none}
  .entry__fig img,.figure img,.go svg,.nav a::after{transition:none}
  a.entry:hover .entry__fig img,.figure:hover img{transform:none}
}