/* Layout: a camera viewfinder hero, collections set as big trailhead-sign rows, a contact-sheet archive, and a dark viewing room for single frames. Réseau crosses (the + grid etched on survey and lunar camera plates) sit behind everything. */
/* Color system, option 2 ("same wall, small markers").
   One warm neutral wall on every page and one site accent (fir green).
   Each collection owns a muted marker hue, used only in small doses
   (labels, counts, thin rules). Markers share one lightness and one
   chroma in OKLCH, so none outshouts another and they never clash.
   The photos supply the real color. */
@property --mark-h{syntax:"<number>";inherits:true;initial-value:160}
:root{
  --ice:#ECE8E1;          /* warm stone wall */
  --ice-2:#E2DDD4;        /* raised surfaces */
  --ink:#24211D;          /* warm charcoal text */
  --ink-soft:#6B645B;     /* secondary text */
  --signal:#3A332D;       /* site accent: warm charcoal, like a gallery label */
  --on-signal:#F4F1EA;
  --signal-soft:#8A7F73;  /* lighter step for hovers and thin rules */
  --line:rgba(36,33,29,.13);
  --reseau:rgba(36,33,29,.13);
  --glow-a:rgba(255,252,244,.7);
  --glow-b:rgba(206,196,180,.28);
  --sheet:#1E1C19;        /* contact sheet / film base */
  --sheet-ink:#CFC8BD;
  --room:#141311;         /* viewing room, neutral dark in both themes */
  --room-ink:#E6E1D8;
  --room-soft:#8F877C;
  --hud:#F6F3EC;
  --mark-l:.52;--mark-c:.055;
  --mark:oklch(var(--mark-l) var(--mark-c) var(--mark-h));
  --f-display:"Bricolage Grotesque","Avenir Next","Helvetica Neue",sans-serif;
  --f-body:"Bricolage Grotesque","Avenir Next","Helvetica Neue",sans-serif;
  --f-mono:"JetBrains Mono","SFMono-Regular","Menlo",monospace;
  --gut:clamp(16px,4vw,48px);
  --ease:cubic-bezier(.2,.7,.1,1);
}
/* The site is always light, whatever the device or viewer theme says */
:root{color-scheme:light}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ice);color:var(--ink);font:400 18px/1.55 var(--f-body);-webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100vh}
body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(1200px 700px at 8% -10%,var(--glow-a),transparent 60%),radial-gradient(900px 600px at 110% 110%,var(--glow-b),transparent 60%)}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:var(--reseau);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cpath d='M60 53v14M53 60h14' stroke='black' stroke-width='1'/%3E%3C/svg%3E") 0 0/120px 120px;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cpath d='M60 53v14M53 60h14' stroke='black' stroke-width='1'/%3E%3C/svg%3E") 0 0/120px 120px}
a{color:inherit}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
.mono{font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.wrap{padding-inline:var(--gut);max-width:1480px;margin-inline:auto}

/* ---------- header ---------- */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--ice) 86%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line);animation:drop .8s var(--ease) backwards}
.top .wrap{display:flex;align-items:center;gap:24px;min-height:62px;flex-wrap:wrap;padding-block:8px}
.mark{display:flex;align-items:baseline;gap:10px;text-decoration:none;margin-right:auto}
.mark b{font:800 28px/1 var(--f-display);letter-spacing:.02em;text-transform:uppercase}
.mark i{width:9px;height:9px;background:var(--signal);border-radius:50%;display:inline-block;transform:translateY(-3px)}
.nav{display:flex;gap:4px;flex-wrap:wrap}
.nav a{font:500 11px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;padding:9px 10px;border-radius:2px;color:var(--ink-soft);transition:color .2s,background .2s}
.nav a:hover{color:var(--ink);background:var(--ice-2)}
.nav a[aria-current="page"]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--signal)}
.count{color:var(--ink-soft)}
.count strong{color:var(--signal);font-weight:500}
.notice{border-bottom:1px solid var(--line);color:var(--ink-soft)}
.notice .wrap{padding-block:8px;display:flex;gap:10px;align-items:center}
.notice .wrap::before{content:"";width:6px;height:6px;background:var(--signal);flex:none}

main{min-height:70vh}
.view{animation:fade .5s var(--ease) backwards}

/* ---------- hero / viewfinder ---------- */
.hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,11fr);gap:clamp(20px,4vw,56px);align-items:end;padding-block:clamp(28px,5vw,64px) clamp(40px,6vw,80px)}
.hero-copy{display:flex;flex-direction:column;gap:22px;min-width:0}
.name{font:800 clamp(60px,9vw,150px)/.82 var(--f-display);text-transform:uppercase;letter-spacing:-.005em;margin:0}
.name span{display:block;overflow:hidden;padding-bottom:.04em}
.name span i{display:block;font-style:normal;animation:rise 1.1s var(--ease) backwards}
.name span:nth-child(2) i{animation-delay:.12s;color:transparent;-webkit-text-stroke:1.5px var(--ink)}
.lede{font-size:clamp(18px,1.6vw,21px);max-width:34ch;margin:0;color:var(--ink-soft);animation:fade .9s .45s var(--ease) backwards}
.lede em{color:var(--ink)}
.hero-meta{display:flex;gap:18px;flex-wrap:wrap;color:var(--ink-soft);animation:fade .9s .6s var(--ease) backwards}
.hero-meta span b{color:var(--ink);font-weight:500}

.vf{position:relative;margin:0;aspect-ratio:3/2;max-width:100%;background:var(--sheet);overflow:hidden;cursor:zoom-in;animation:frame 1.2s .15s var(--ease) backwards}
.vf img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.1s ease,transform 7s linear;transform:scale(1.04)}
.vf img.on{opacity:1;transform:scale(1)}
.vf-hud{position:absolute;inset:0;pointer-events:none;color:var(--hud)}
.vf-c{position:absolute;width:28px;height:28px;border:1.5px solid var(--hud);opacity:.9;animation:corner .9s .55s var(--ease) backwards}
.vf-c.tl{top:4%;left:3%;border-right:0;border-bottom:0}
.vf-c.tr{top:4%;right:3%;border-left:0;border-bottom:0}
.vf-c.bl{bottom:15%;left:3%;border-right:0;border-top:0}
.vf-c.br{bottom:15%;right:3%;border-left:0;border-top:0}
.vf-af{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);display:grid;grid-template-columns:repeat(5,22px);gap:16px 26px;animation:fade 1s .8s backwards}
.vf-af i{width:22px;height:16px;border:1px solid rgba(243,250,251,.45)}
.vf-af i.lock{border-color:var(--signal);background:color-mix(in srgb,var(--signal) 18%,transparent);box-shadow:0 0 0 1px var(--signal);animation:blink 1.4s 1.2s 2 steps(2)}
.vf-bar{position:absolute;left:0;right:0;bottom:0;display:flex;gap:clamp(10px,2.4vw,28px);align-items:center;padding:12px 3%;background:linear-gradient(transparent,rgba(0,0,0,.55));font:400 clamp(10px,1.05vw,13px)/1 var(--f-mono);letter-spacing:.06em;animation:fade 1s .95s backwards}
.vf-bar b{font-weight:500}
.vf-bar .scale{margin-left:auto;display:flex;align-items:flex-end;gap:5px}
.vf-bar .scale i{width:1px;height:6px;background:var(--hud);opacity:.7}
.vf-bar .scale i.z{height:11px;opacity:1}
.vf-bar .scale i.m{background:var(--signal);height:11px;width:2px;opacity:1}
.vf-title{position:absolute;top:4%;left:7%;right:7%;font:400 clamp(10px,1vw,12px)/1.3 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;display:flex;justify-content:space-between;gap:16px;opacity:.9}
.vf-ctl{position:absolute;right:3%;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:8px;pointer-events:auto}
.vf-ctl button{all:unset;cursor:pointer;width:36px;height:36px;display:grid;place-items:center;border:1px solid rgba(243,250,251,.5);color:var(--hud);font:500 14px var(--f-mono);background:rgba(0,0,0,.25);transition:background .2s,border-color .2s}
.vf-ctl button:hover,.vf-ctl button:focus-visible{background:var(--signal);border-color:var(--signal)}

/* ---------- section heads ---------- */
.shead{display:flex;align-items:baseline;justify-content:space-between;gap:16px;border-top:1px solid var(--ink);padding-top:12px;margin-bottom:8px;flex-wrap:wrap}
.shead h2{font:800 clamp(15px,1.3vw,17px)/1 var(--f-display);letter-spacing:.18em;text-transform:uppercase;margin:0}
.shead a{text-decoration:none;color:var(--ink-soft)}
.shead a:hover{color:var(--signal)}

/* ---------- collection rows ---------- */
.cols{padding-bottom:clamp(40px,6vw,90px)}
.crow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:clamp(16px,3vw,40px);align-items:center;padding-block:clamp(18px,2.4vw,30px);border-bottom:1px solid var(--line);text-decoration:none;position:relative;animation:rise2 .9s var(--ease) backwards}
.crow-t{display:flex;flex-direction:column;gap:10px;min-width:0}
.crow-t h3{margin:0;font:800 clamp(56px,9vw,150px)/.8 var(--f-display);text-transform:uppercase;letter-spacing:-.01em;transition:color .3s,transform .5s var(--ease)}
.crow-t p{margin:0;color:var(--ink-soft);max-width:44ch;font-size:17px}
.crow-t .mono{color:var(--ink-soft);display:flex;gap:16px;flex-wrap:wrap}
.crow-t .mono b{color:var(--signal);font-weight:500}
.crow:hover h3{color:var(--signal);transform:translateX(8px)}
.strip{display:flex;gap:8px;height:clamp(110px,13vw,190px);min-width:0}
.strip span{flex:1 1 0;min-width:0;overflow:hidden;background:var(--sheet);transition:flex-grow .6s var(--ease)}
.strip span img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease),filter .5s}
.crow:not(:hover) .strip span:not(:first-child) img{filter:saturate(.55)}
.crow:hover .strip span:first-child{flex-grow:2.2}
.crow:hover .strip img{transform:scale(1.05)}

/* ---------- latest strip ---------- */
.latest{padding-bottom:clamp(50px,7vw,110px)}
.film{display:flex;gap:0;overflow-x:auto;background:var(--sheet);padding:22px 0;scroll-snap-type:x mandatory;scrollbar-width:thin;position:relative}
.film::before,.film::after{content:"";position:sticky;left:0;flex:none;width:0}
.film a{flex:none;scroll-snap-align:start;padding:0 10px;text-decoration:none;color:var(--sheet-ink);display:flex;flex-direction:column;gap:8px;position:relative}
.film a::before{content:"";position:absolute;inset:-16px 0 auto;height:8px;background:repeating-linear-gradient(90deg,transparent 0 8px,var(--ice) 8px 16px);opacity:.14}
.film a::after{content:"";position:absolute;inset:auto 0 -16px;height:8px;background:repeating-linear-gradient(90deg,transparent 0 8px,var(--ice) 8px 16px);opacity:.14}
.film img{height:clamp(120px,15vw,200px);width:auto;transition:filter .3s}
.film a:hover img{filter:brightness(1.12)}
.film a span{font:400 10px/1 var(--f-mono);letter-spacing:.1em;display:flex;justify-content:space-between;gap:12px}
.film a span b{color:var(--signal);font-weight:500}

/* ---------- collection page ---------- */
.chead{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(16px,4vw,60px);align-items:end;padding-block:clamp(28px,5vw,64px) clamp(24px,3vw,40px)}
.chead h1{margin:0;font:800 clamp(80px,15vw,240px)/.78 var(--f-display);text-transform:uppercase;letter-spacing:-.015em;animation:rise2 1s var(--ease) backwards}
.chead h1 small{display:block;font:500 clamp(14px,1.2vw,16px)/1.2 var(--f-mono);letter-spacing:.14em;color:var(--signal);margin-bottom:14px}
.chead .desc{display:flex;flex-direction:column;gap:14px;animation:fade 1s .25s backwards}
.chead .desc p{margin:0;max-width:46ch}
.chead dl{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;margin:0;color:var(--ink-soft)}
.chead dd{margin:0;color:var(--ink)}
.just{display:flex;flex-wrap:wrap;gap:10px;padding-bottom:clamp(40px,6vw,90px)}
.just::after{content:"";flex-grow:1e4}
.just a{position:relative;overflow:hidden;background:var(--sheet);max-width:100%;animation:rise2 .8s var(--ease) backwards;text-decoration:none}
.just img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.just a:hover img{transform:scale(1.035)}
.cap{position:absolute;inset:auto 0 0;padding:28px 14px 12px;background:linear-gradient(transparent,rgba(0,0,0,.62));color:var(--hud);display:flex;justify-content:space-between;align-items:flex-end;gap:12px;opacity:0;transform:translateY(6px);transition:opacity .35s,transform .35s var(--ease)}
.cap em{font:300 18px/1.2 var(--f-body);font-style:normal}
.cap .mono{font-size:10px;opacity:.85;white-space:nowrap}
.just a:hover .cap,.just a:focus-visible .cap{opacity:1;transform:none}
.pager{display:flex;justify-content:space-between;gap:16px;border-top:1px solid var(--line);padding-block:24px 60px;flex-wrap:wrap}
.pager a{text-decoration:none;display:flex;flex-direction:column;gap:4px}
.pager a b{font:800 clamp(34px,4vw,56px)/.9 var(--f-display);text-transform:uppercase;transition:color .25s}
.pager a:hover b{color:var(--signal)}
.pager a:last-child{text-align:right}

/* ---------- archive / contact sheet ---------- */
.ahead{padding-block:clamp(28px,5vw,60px) 20px;display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.ahead h1{margin:0;font:800 clamp(64px,11vw,170px)/.8 var(--f-display);text-transform:uppercase;animation:rise2 1s var(--ease) backwards}
.tools{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.chip{all:unset;cursor:pointer;font:500 10.5px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;padding:9px 12px;border:1px solid var(--line);color:var(--ink-soft);transition:all .2s}
.chip:hover{color:var(--ink);border-color:var(--ink-soft)}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--ice);border-color:var(--ink)}
.chip:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.tools .sep{width:1px;height:22px;background:var(--line);margin-inline:6px}
.sheet{background:var(--sheet);padding:clamp(14px,2vw,26px);display:grid;grid-template-columns:repeat(auto-fill,minmax(min(170px,40vw),1fr));gap:clamp(14px,2vw,24px) clamp(10px,1.4vw,16px);margin-bottom:clamp(40px,6vw,90px)}
.sheet a{display:flex;flex-direction:column;gap:7px;text-decoration:none;color:var(--sheet-ink);animation:fade .5s var(--ease) backwards;min-width:0}
.sheet .fr{aspect-ratio:1;display:grid;place-items:center;background:#000;padding:8%;position:relative;transition:box-shadow .25s}
.sheet .fr img{max-height:100%;max-width:100%;object-fit:contain}
.sheet a:hover .fr,.sheet a:focus-visible .fr{box-shadow:0 0 0 2px var(--signal)}
.sheet .ed{font:400 9.5px/1.3 var(--f-mono);letter-spacing:.08em;display:flex;justify-content:space-between;gap:8px;text-transform:uppercase}
.sheet .ed b{color:var(--signal);font-weight:500}
.sheet .tt{font:200 15px/1.25 var(--f-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.empty{color:var(--sheet-ink);font:400 12px var(--f-mono);grid-column:1/-1;padding:40px 0;text-align:center}

/* ---------- about ---------- */
.about{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);padding-block:clamp(28px,5vw,64px) clamp(50px,7vw,110px)}
.about h1{margin:0 0 26px;font:800 clamp(64px,10vw,150px)/.8 var(--f-display);text-transform:uppercase;animation:rise2 1s var(--ease) backwards}
.about .body{display:flex;flex-direction:column;gap:18px;max-width:60ch;animation:fade 1s .2s backwards}
.about .body p{margin:0}
.about .body p:first-child{font-size:clamp(21px,2vw,26px);line-height:1.4}
.panel{display:flex;flex-direction:column;gap:28px;animation:fade 1s .35s backwards}
.panel section{border-top:1px solid var(--ink);padding-top:12px;display:flex;flex-direction:column;gap:12px}
.panel h2{margin:0;font:800 15px/1 var(--f-display);letter-spacing:.18em;text-transform:uppercase}
.kit{margin:0;display:grid;grid-template-columns:auto 1fr;gap:8px 20px;font-size:16px}
.kit dt{color:var(--ink-soft)}
.kit dd{margin:0}
.mail{display:flex;gap:8px;align-items:stretch;flex-wrap:wrap}
.mail code{font:400 14px/1 var(--f-mono);padding:14px 16px;background:var(--ice-2);user-select:all;flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.btn{all:unset;cursor:pointer;font:500 11px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;padding:14px 18px;background:var(--ink);color:var(--ice);transition:background .2s}
.btn:hover,.btn:focus-visible{background:var(--signal)}
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.stats div{background:var(--ice);padding:14px;display:flex;flex-direction:column;gap:6px}
.stats b{font:800 34px/1 var(--f-display);font-variant-numeric:tabular-nums}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);color:var(--ink-soft)}
footer .wrap{display:flex;justify-content:space-between;gap:16px;padding-block:22px 34px;flex-wrap:wrap}

/* ---------- viewing room ---------- */
.room{position:fixed;inset:0;z-index:50;background:var(--room);color:var(--room-ink);display:grid;grid-template-columns:minmax(0,1fr) 340px;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);animation:fade .35s ease backwards}
.stage{position:relative;display:grid;place-items:center;padding:clamp(16px,3vw,48px);min-height:0;min-width:0}
.stage img{max-width:100%;max-height:100%;object-fit:contain;box-shadow:0 30px 80px rgba(0,0,0,.5);animation:develop .7s var(--ease) backwards}
.stage .nx{all:unset;cursor:pointer;position:absolute;top:50%;transform:translateY(-50%);width:48px;height:72px;display:grid;place-items:center;color:var(--room-soft);font:400 20px var(--f-mono);transition:color .2s}
.stage .nx:hover,.stage .nx:focus-visible{color:var(--signal)}
.stage .nx.l{left:4px}.stage .nx.r{right:4px}
.info{border-left:1px solid rgba(220,230,232,.1);padding:24px 26px;display:flex;flex-direction:column;gap:22px;overflow-y:auto}
.info .row{display:flex;justify-content:space-between;align-items:center;gap:12px;color:var(--room-soft)}
.info .x{all:unset;cursor:pointer;font:500 11px/1 var(--f-mono);letter-spacing:.1em;padding:10px 12px;border:1px solid rgba(220,230,232,.2);color:var(--room-ink)}
.info .x:hover,.info .x:focus-visible{border-color:var(--signal);color:var(--signal)}
.info h1{margin:0;font:200 clamp(26px,2.4vw,34px)/1.1 var(--f-body)}
.info .where{color:var(--room-soft);margin-top:-12px}
.info .where a{color:var(--signal);text-decoration:none}
.exif{margin:0;display:grid;grid-template-columns:auto 1fr;border-top:1px solid rgba(220,230,232,.12)}
.exif dt,.exif dd{padding:10px 0;border-bottom:1px solid rgba(220,230,232,.12);margin:0}
.exif dt{font:400 10px/1.4 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--room-soft);padding-right:18px}
.exif dd{font:400 13px/1.4 var(--f-mono);text-align:right;font-variant-numeric:tabular-nums}
.info .note{font-size:16px;color:var(--room-ink);opacity:.85;margin:0}
.info .pos{margin-top:auto;color:var(--room-soft)}
.info .pos b{color:var(--room-ink);font-weight:500}

/* ---------- motion ---------- */
@keyframes rise{from{transform:translateY(105%)}}
@keyframes rise2{from{opacity:0;transform:translateY(28px)}}
@keyframes fade{from{opacity:0}}
@keyframes drop{from{transform:translateY(-100%)}}
@keyframes frame{from{clip-path:inset(50% 0 50% 0)}}
@keyframes corner{from{opacity:0;transform:scale(1.8)}}
@keyframes blink{50%{opacity:.2}}
@keyframes develop{from{opacity:0;filter:brightness(2.4) contrast(.4) saturate(0)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ---------- narrow ---------- */
@media (max-width:900px){
  .hero,.chead,.about{grid-template-columns:minmax(0,1fr)}
  .hero-copy{order:2}
  .crow{grid-template-columns:minmax(0,1fr)}
  .room{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;overflow-y:auto}
  .stage{min-height:60vh}
  .info{border-left:0;border-top:1px solid rgba(220,230,232,.1);max-height:none}
  .vf-af{display:none}
  .vf-c{width:18px;height:18px}
}
@media (max-width:560px){
  .top .wrap{gap:6px}
  .mark{width:100%}
  .nav{overflow-x:auto;flex-wrap:nowrap;width:100%;margin-inline:-6px}
  .count{display:none}
  .vf-bar .scale{display:none}
  .vf-title span:last-child{display:none}
  .just a{flex-basis:auto!important;width:100%;flex-grow:1!important}
  .strip{height:96px}
}

/* ---------- home: collection tiles ---------- */
.cgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.4vw,18px);padding-bottom:clamp(40px,6vw,90px)}
.ctile{display:flex;flex-direction:column;gap:10px;text-decoration:none;animation:rise2 .9s var(--ease) backwards}
.ctile .ph{aspect-ratio:4/5;overflow:hidden;background:var(--sheet);position:relative}
.ctile .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease),filter .5s;filter:saturate(.7)}
.ctile:hover .ph img{transform:scale(1.06);filter:none}
.ctile .ph b{position:absolute;left:12px;bottom:8px;font:800 clamp(40px,5vw,78px)/.85 var(--f-display);text-transform:uppercase;color:var(--hud);text-shadow:0 2px 24px rgba(0,0,0,.35)}
.ctile .mono{display:flex;justify-content:space-between;gap:8px;color:var(--ink-soft)}
.ctile .mono b{color:var(--signal);font-weight:500}
.ctile:hover .ph{box-shadow:0 0 0 2px var(--signal)}
.intro{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,11fr);gap:clamp(20px,4vw,56px);padding-block:0 clamp(40px,6vw,80px)}
.intro p{margin:0;font-size:clamp(22px,2.3vw,32px);line-height:1.3;max-width:34ch}
.intro p a{color:var(--signal);text-decoration-thickness:1px;text-underline-offset:4px}
.intro .mono{color:var(--ink-soft);padding-top:10px}
.pagehead{padding-block:clamp(28px,5vw,64px) clamp(20px,3vw,36px);display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.pagehead h1{margin:0;font:800 clamp(64px,11vw,170px)/.8 var(--f-display);text-transform:uppercase;animation:rise2 1s var(--ease) backwards}
.pagehead p{margin:0;max-width:40ch;color:var(--ink-soft);animation:fade 1s .2s backwards}

/* ---------- contact ---------- */
.contact{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);padding-bottom:clamp(50px,7vw,110px)}
.contact .lead{font-size:clamp(22px,2.2vw,30px);line-height:1.35;margin:0 0 28px;max-width:30ch}
.prints{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.prints th,.prints td{text-align:left;padding:12px 0;border-bottom:1px solid var(--line)}
.prints th{font:400 10px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.prints td{font-size:17px}
.prints td:first-child{font:800 22px/1 var(--f-display);letter-spacing:.02em}
.prints td .mono{color:var(--ink-soft)}
.asks{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.asks div{background:var(--ice);padding:16px 18px;display:flex;flex-direction:column;gap:4px}
.asks b{font:800 20px/1 var(--f-display);text-transform:uppercase;letter-spacing:.04em}
.asks span{color:var(--ink-soft);font-size:16px}
.back{all:unset;cursor:pointer}

@media (max-width:900px){
  .cgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .intro,.contact{grid-template-columns:minmax(0,1fr)}
}

/* ---------- best work ---------- */
.bw{display:flex;flex-direction:column;gap:clamp(56px,9vw,140px);padding-block:clamp(10px,2vw,20px) clamp(60px,8vw,120px)}
.bw-item{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(12px,2vw,28px);align-items:end}
.bw-ph{display:block;overflow:hidden;background:var(--sheet);max-width:100%}
.bw-ph img{width:100%;height:100%;object-fit:cover;transition:filter .5s}
.bw-ph:hover img{filter:brightness(1.06)}
.bw-cap{display:flex;flex-direction:column;gap:8px;min-width:0}
.bw-n{font:800 clamp(80px,11vw,190px)/.8 var(--f-display);color:transparent;-webkit-text-stroke:1.5px var(--signal)}
.bw-cap h2{font:200 clamp(26px,2.6vw,40px)/1.1 var(--f-body);margin:10px 0 4px;text-wrap:balance}
.bw-cap .mono{color:var(--ink-soft)}
.bw-cap .mono a{color:var(--signal);text-decoration:none}
.land.l .bw-ph{grid-column:1/span 8}.land.l .bw-cap{grid-column:9/span 4}
.land.r .bw-ph{grid-column:5/span 8;grid-row:1}.land.r .bw-cap{grid-column:1/span 4;grid-row:1;text-align:right;align-items:flex-end}
.port.l .bw-ph{grid-column:2/span 5}.port.l .bw-cap{grid-column:7/span 5}
.port.r .bw-ph{grid-column:7/span 5;grid-row:1}.port.r .bw-cap{grid-column:2/span 5;grid-row:1;text-align:right;align-items:flex-end}
.pano .bw-ph{grid-column:1/-1}.pano .bw-cap{grid-column:1/span 7}
.pano .bw-cap{flex-direction:row;align-items:flex-end;gap:24px;flex-wrap:wrap}
@supports (animation-timeline:view()){
  .bw-ph img{animation:bwin linear both;animation-timeline:view();animation-range:entry 0% cover 45%}
  @keyframes bwin{from{transform:scale(1.14)}}
}
@media (max-width:900px){
  .bw-item>*{grid-column:1/-1!important;grid-row:auto!important;text-align:left!important;align-items:flex-start!important}
}

/* ================================================================
   Bold pass: soft shapes, color washes, per-collection color
   ================================================================ */
:root{--r:22px;--r-s:14px}
body::before{inset:-20vmax;filter:blur(60px);
  background:
    radial-gradient(38vmax 30vmax at 18% 22%,var(--glow-a),transparent 70%),
    radial-gradient(42vmax 34vmax at 85% 30%,var(--glow-b),transparent 70%),
    radial-gradient(36vmax 30vmax at 55% 95%,var(--glow-a),transparent 70%);
  animation:drift 38s ease-in-out infinite alternate}
@keyframes drift{to{transform:translate3d(4vmax,-3vmax,0) rotate(8deg) scale(1.08)}}

/* floating pill header */
.top{margin:12px var(--gut) 0;border:1px solid var(--line);border-radius:999px;background:color-mix(in srgb,var(--ice) 70%,transparent);box-shadow:0 10px 40px -18px rgba(30,25,20,.18)}
.top .wrap{min-height:58px;padding-inline:clamp(16px,2.4vw,28px)}
.nav a{border-radius:999px;padding:10px 13px}
.nav a[aria-current="page"]{box-shadow:none;background:var(--signal);color:var(--on-signal)}
.mark i{box-shadow:0 0 0 4px color-mix(in srgb,var(--signal) 25%,transparent)}
.swatch{display:inline-flex;gap:3px;margin-right:10px;vertical-align:middle}
.swatch i{width:10px;height:10px;border-radius:50%;display:inline-block}
.notice{border:0}
.notice .wrap{justify-content:center}
.notice .wrap::before{border-radius:50%}

/* hero */
.name span i{background:linear-gradient(95deg,var(--ink) 20%,var(--signal) 110%);-webkit-background-clip:text;background-clip:text;color:transparent}
.name span:nth-child(2) i{background:none;-webkit-text-stroke:2px var(--signal)}
.vf{border-radius:calc(var(--r) * 1.6);box-shadow:0 40px 80px -40px rgba(30,25,20,.35)}
.vf-c{border-radius:6px}
.vf-af i{border-radius:5px}
.vf-ctl button{border-radius:50%}

.intro{align-items:start}
.intro p{background:var(--ice-2);padding:clamp(22px,3vw,38px);border-radius:calc(var(--r) * 1.4)}

/* section heads become pills */
.shead{border-top:0;padding-top:0;margin-bottom:18px;align-items:center}
.shead h2{background:var(--ink);color:var(--ice);padding:10px 18px 9px;border-radius:999px;font-size:14px}

/* collection tiles carry their own sampled color */
/* tiles side by side share one saturation and lightness, so only hue differs */
.own{--mark:oklch(var(--mark-l) var(--mark-c) var(--mark-h));--tile:var(--mark);--tile-soft:var(--ice-2)}
.ctile{background:var(--tile);border-radius:calc(var(--r) * 1.3);padding:8px;gap:0;transition:transform .5s var(--ease),box-shadow .5s}
.ctile .ph{border-radius:calc(var(--r) * 1.3 - 8px)}
.ctile .mono{color:#fff;padding:14px 10px 8px}
.ctile .mono b{color:#fff;background:rgba(0,0,0,.22);border-radius:999px;padding:4px 9px;margin-top:-4px}
.ctile:hover{transform:translateY(-6px) rotate(-.6deg);box-shadow:0 30px 50px -30px var(--tile)}
.ctile:hover .ph{box-shadow:none}

.crow{border-bottom:0;border-radius:calc(var(--r) * 1.4);padding:clamp(16px,2.4vw,28px);margin-bottom:10px;transition:background .5s}
.crow:hover{background:var(--tile-soft)}
.crow:hover h3{color:var(--tile)}
.crow-t .mono b{color:var(--tile)}
.strip{gap:10px}
.strip span{border-radius:var(--r-s)}

/* galleries */
.just{gap:14px}
.just a{border-radius:var(--r)}
.cap{border-radius:0 0 var(--r) var(--r)}
.chead h1 small{display:inline-block;background:var(--signal);color:var(--on-signal);padding:8px 14px;border-radius:999px}
.chead h1{color:var(--ink)}
.chead dl{background:var(--ice-2);padding:16px 20px;border-radius:var(--r)}
.pager{border-top:0}
.pager a{background:var(--ice-2);border-radius:calc(var(--r) * 1.2);padding:18px 24px;flex:1 1 240px;transition:background .3s}
.pager a:hover{background:var(--signal);color:var(--on-signal)}
.pager a:hover b{color:inherit}

.film{margin-inline:var(--gut);border-radius:calc(var(--r) * 1.4);padding:24px 8px}
.film img{border-radius:10px}
.sheet{border-radius:calc(var(--r) * 1.4)}
.sheet .fr{border-radius:var(--r-s)}
.chip{border-radius:999px;padding:10px 15px}
.chip[aria-pressed="true"]{background:var(--signal);border-color:var(--signal);color:var(--on-signal)}

/* best work */
.bw-ph{border-radius:calc(var(--r) * 1.6);box-shadow:0 40px 80px -45px rgba(30,25,20,.4)}
.bw-n{-webkit-text-stroke:0;background:linear-gradient(180deg,var(--signal),color-mix(in srgb,var(--signal) 30%,transparent));-webkit-background-clip:text;background-clip:text;color:transparent}

/* about / contact */
.panel section{border-top:0;background:var(--ice-2);border-radius:calc(var(--r) * 1.2);padding:20px 22px}
.panel h2{color:var(--signal)}
.stats{border-radius:var(--r-s);overflow:hidden;border:0;background:transparent;gap:8px}
.stats div{border-radius:var(--r-s);background:var(--ice)}
.asks{background:transparent;border:0;gap:8px}
.asks div{border-radius:var(--r);background:var(--ice-2)}
.mail code{border-radius:999px;padding-inline:22px;background:var(--ice-2)}
.btn{border-radius:999px;background:var(--signal);color:var(--on-signal)}
.btn:hover,.btn:focus-visible{background:var(--ink);color:var(--ice)}
.prints td,.prints th{border-color:color-mix(in srgb,var(--ink) 14%,transparent)}

/* viewing room */
.room{padding:12px;gap:12px;background:radial-gradient(80% 70% at 35% 45%,#1F1D1A,var(--room))}
.stage img{border-radius:var(--r)}
.info{border:0;border-radius:calc(var(--r) * 1.2);background:rgba(255,250,240,.04)}
.info .x{border-radius:999px}
.stage .nx{border-radius:50%;width:52px;height:52px;background:rgba(255,250,240,.06)}
.info .where a{color:oklch(.76 .05 var(--mark-h))}

footer{border-top:0}
@media (max-width:560px){.top{border-radius:26px}}

/* ================================================================
   Type: Bricolage Grotesque at the extremes (200 vs 800),
   JetBrains Mono only for camera data.
   ================================================================ */
body{font-weight:350;font-variation-settings:"opsz" 14;letter-spacing:-.005em}
.name,.crow-t h3,.chead h1,.ahead h1,.pagehead h1,.about h1,.ctile .ph b,.pager a b{text-transform:none;letter-spacing:-.055em;font-variation-settings:"opsz" 96}
.name{font-size:clamp(66px,9.5vw,158px);line-height:.84}
.name span:nth-child(2) i{-webkit-text-stroke:0;font-weight:200;background:linear-gradient(95deg,var(--signal),var(--ink) 130%);-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:-.04em}
.lede{font-weight:200;font-size:clamp(22px,2vw,28px);line-height:1.25;letter-spacing:-.015em}
.lede em{font-style:normal;font-weight:800}
.mark b{text-transform:none;letter-spacing:-.05em;font-size:27px}
.intro p{font-weight:200;letter-spacing:-.02em}
.intro p a{font-weight:700}
.crow-t h3{font-size:clamp(64px,10vw,170px)}
.chead h1{font-size:clamp(90px,16vw,260px)}
.chead h1 small{letter-spacing:.08em}
.shead h2{letter-spacing:.14em;font-weight:700}
.bw-cap h2,.info h1{font-weight:200;letter-spacing:-.03em;font-variation-settings:"opsz" 60}
.bw-n{font-weight:800;letter-spacing:-.06em}
.about .body p:first-child{font-weight:200;letter-spacing:-.02em}
.contact .lead{font-weight:200;letter-spacing:-.02em}
.asks b,.panel h2,.stats b,.prints td:first-child{text-transform:none;letter-spacing:-.02em}
.asks b{font-weight:800;font-size:22px}
.sheet .tt{font-weight:300;font-style:normal}
.ctile .ph b{font-size:clamp(44px,5.4vw,84px)}
.mono{letter-spacing:.06em}
.hero{grid-template-columns:minmax(0,6fr) minmax(0,10fr)}
.name{font-size:clamp(56px,7.4vw,124px)}
@media (max-width:900px){.hero{grid-template-columns:minmax(0,1fr)}.name{font-size:clamp(56px,16vw,120px)}}

/* ---------- option 2: markers in small doses ---------- */
body::before{animation:none;filter:blur(40px)}
.ctile{background:var(--ice-2);padding:8px;box-shadow:inset 0 0 0 1px var(--line)}
.ctile .mono{color:var(--ink-soft);padding:14px 8px 6px;border-top:0}
.ctile .mono span{display:flex;align-items:center;gap:8px}
.ctile .mono span::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--mark);flex:none}
.ctile .mono b{color:var(--on-signal);background:var(--mark);border-radius:999px;padding:4px 9px;margin-top:-4px}
.ctile:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px var(--line),0 24px 40px -28px rgba(30,25,20,.45)}
.crow-t h3{transition:color .3s,transform .5s var(--ease)}
.crow-t .mono b{color:var(--mark)}
.crow:hover h3{color:var(--mark)}
.crow-t h3::after{content:"";display:block;width:56px;height:4px;border-radius:4px;background:var(--mark);margin-top:14px}
.chead h1 small{background:var(--mark);color:var(--on-signal)}
.nav a.m{display:inline-flex;align-items:center;gap:7px}
.nav a.m::before{content:"";width:7px;height:7px;border-radius:50%;background:oklch(var(--mark-l) var(--mark-c) var(--h))}
.nav a[aria-current="page"].m{background:var(--mark)}
.nav a[aria-current="page"].m::before{background:var(--on-signal)}
.sheet .ed b{color:oklch(.74 .05 var(--h,160))}
.intro p{background:var(--ice-2)}
/* no color-key dots */
.nav a.m::before,.ctile .mono span::before{content:none}

/* charcoal accent: keep links readable and give hover a visible change */
.intro p a{text-decoration-color:var(--signal-soft);text-decoration-thickness:2px}
.intro p a:hover{text-decoration-color:var(--signal)}
.nav a[aria-current="page"]:not(.m){background:var(--signal);color:var(--on-signal)}
.vf-af i.lock{border-color:var(--hud);background:rgba(246,243,236,.18);box-shadow:0 0 0 1px var(--hud)}
.vf-bar .scale i.m{background:var(--hud)}
.vf-ctl button:hover,.vf-ctl button:focus-visible{background:var(--hud);border-color:var(--hud);color:#24211D}

/* ================================================================
   Field index (Wild): numbered species entries. Left: the viewer
   for the selected animal. Right: the numbered grid and filters.
   ================================================================ */
.dex-head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(16px,4vw,60px);align-items:end;padding-block:clamp(28px,5vw,60px) clamp(22px,3vw,36px)}
.dex-head h1{margin:0;font:800 clamp(90px,15vw,240px)/.78 var(--f-display);letter-spacing:-.055em;font-variation-settings:"opsz" 96;animation:rise2 1s var(--ease) backwards}
.dex-head h1 small{display:inline-block;font:500 13px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;background:var(--mark);color:var(--on-signal);padding:9px 14px;border-radius:999px;margin-bottom:18px;vertical-align:top}
.dex-intro{display:flex;flex-direction:column;gap:18px;animation:fade 1s .2s backwards}
.dex-intro p{margin:0;max-width:46ch}
.dex-progress{background:var(--ice-2);border-radius:var(--r);padding:16px 18px;display:flex;flex-direction:column;gap:12px}
.dex-progress .mono{color:var(--ink-soft)}
.dex-progress b{color:var(--ink);font-weight:500}
.dex-bar{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px}
.dex-bar i{height:8px;border-radius:4px;background:var(--line)}
.dex-bar i.on{background:var(--mark)}

.dex{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(18px,3vw,40px);align-items:start;padding-bottom:clamp(50px,7vw,110px)}
.dex-side{display:flex;flex-direction:column;gap:16px;min-width:0}
.dex-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px}
.dex-card{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;gap:6px;padding:7px 7px 11px;border-radius:var(--r-s);background:var(--ice-2);transition:transform .25s var(--ease),box-shadow .25s;min-width:0}
.dex-card:hover{transform:translateY(-3px)}
.dex-card:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.dex-card[aria-pressed="true"]{box-shadow:0 0 0 2px var(--mark)}
.dex-thumb{aspect-ratio:1;border-radius:9px;overflow:hidden;background:var(--sheet);display:grid;place-items:center}
.dex-thumb img{width:100%;height:100%;object-fit:cover}
.dex-q{font:800 44px/1 var(--f-display);color:var(--sheet-ink);opacity:.35}
.dex-card.empty .dex-thumb{background:transparent;border:1.5px dashed var(--line)}
.dex-card.empty .dex-q{color:var(--ink-soft)}
.dex-card.empty .dex-name{color:var(--ink-soft)}
.dex-no{color:var(--mark);padding-inline:3px;font-size:10px}
.dex-card.empty .dex-no{color:var(--ink-soft)}
.dex-name{font-size:15px;line-height:1.15;padding-inline:3px;font-weight:500;overflow-wrap:anywhere}
.dex-none{color:var(--ink-soft);grid-column:1/-1}

.dex-view{position:sticky;top:calc(env(safe-area-inset-top,0px) + 96px);background:var(--ice-2);border-radius:calc(var(--r) * 1.4);padding:clamp(14px,2vw,22px);display:flex;flex-direction:column;gap:16px;min-width:0}
.dv-top{display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.dv-no{font:800 clamp(56px,6vw,92px)/.8 var(--f-display);letter-spacing:-.05em;color:var(--mark);font-variant-numeric:tabular-nums}
.dv-no::before{content:"No.";font:500 12px/1 var(--f-mono);letter-spacing:.1em;margin-right:8px;vertical-align:top;color:var(--ink-soft)}
.dv-tags{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.dv-tag{font:500 10.5px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;padding:8px 12px;border-radius:999px;border:1px solid var(--mark);color:var(--mark)}
.dv-photo{position:relative;display:block;aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;background:var(--sheet);max-width:100%}
.dv-photo img{width:100%;height:100%;object-fit:cover;animation:develop .6s var(--ease) backwards}
.dv-read{position:absolute;left:0;right:0;bottom:0;display:flex;gap:18px;padding:22px 16px 12px;background:linear-gradient(transparent,rgba(0,0,0,.55));color:var(--hud);font-size:11px}
.dv-empty{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:10px;color:var(--sheet-ink);border:1.5px dashed rgba(207,200,189,.3);border-radius:inherit}
.dv-empty b{font:800 110px/.8 var(--f-display);opacity:.3}
.dex-view.is-empty .dv-photo{background:var(--sheet)}
.dv-body{display:flex;flex-direction:column;gap:16px}
.dv-names h2{margin:0;font:800 clamp(34px,3.6vw,54px)/.95 var(--f-display);letter-spacing:-.04em}
.dv-sci{margin:6px 0 0;font-weight:200;font-size:20px;color:var(--ink-soft);letter-spacing:-.01em}
.dv-stats{display:grid;gap:9px}
.dv-stat{display:grid;grid-template-columns:92px minmax(0,1fr);align-items:center;gap:12px}
.dv-stat .mono{color:var(--ink-soft)}
.dv-seg{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.dv-seg i{height:10px;border-radius:5px;background:var(--line)}
.dv-seg i.on{background:var(--mark)}
.dv-facts{display:grid;grid-template-columns:auto 1fr;gap:0 18px;margin:0;font-size:11.5px}
.dv-facts dt,.dv-facts dd{padding:8px 0;border-top:1px solid var(--line);margin:0}
.dv-facts dt{color:var(--ink-soft);text-transform:uppercase;letter-spacing:.08em;font-size:10px}
.dv-facts dd{text-align:right}
.dv-note{margin:0;font-size:18px;line-height:1.45;max-width:52ch}
.dv-strip{display:flex;gap:8px;overflow-x:auto}
.dv-strip a{flex:none;width:84px;aspect-ratio:1;border-radius:9px;overflow:hidden}
.dv-strip img{width:100%;height:100%;object-fit:cover}
.dv-nav{display:flex;justify-content:space-between;gap:8px}

@media (max-width:900px){
  .dex-head,.dex{grid-template-columns:minmax(0,1fr)}
  .dex-view{position:static}
  .dex-grid{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
}
.dv-facts{column-gap:0}
.dv-facts dt{padding-right:18px}
.dex-head h1 small{display:table}
/* species profile: conservation, diet, lifespan */
.dv-profile{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.dv-profile>div{background:var(--ice);border-radius:var(--r-s);padding:12px 14px;display:flex;flex-direction:column;gap:8px;min-width:0}
.dv-profile .mono{color:var(--ink-soft);font-size:10px}
.dv-profile b{font-weight:500;font-size:16px;line-height:1.2;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dv-iucn{text-decoration:none;font:500 11px/1 var(--f-mono);letter-spacing:.06em;padding:5px 7px;border-radius:6px;background:var(--mark);color:var(--on-signal)}
.dv-iucn.st-NT,.dv-iucn.st-VU{background:oklch(.62 .09 75);color:#1E1C19}
.dv-iucn.st-EN,.dv-iucn.st-CR{background:oklch(.52 .12 30);color:#F6F3EC}
@media (max-width:560px){.dv-profile{grid-template-columns:minmax(0,1fr)}}
.cgrid{grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))}

/* ================================================================
   Full-screen photo viewer. The photo fills the window; the details
   panel is frosted glass over it and slides away when hidden.
   ================================================================ */
.fv{position:fixed;inset:0;z-index:50;background:#0B0A09;color:#EEE9E0;overflow:hidden;animation:fade .3s ease backwards}
.fv-stage{position:absolute;inset:0;display:grid;place-items:center;cursor:pointer}
.fv-stage img{width:100%;height:100%;object-fit:contain;animation:develop .6s var(--ease) backwards}
.fv-bar{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;gap:12px;padding:calc(env(safe-area-inset-top,0px) + 14px) 16px 14px;background:linear-gradient(rgba(0,0,0,.45),transparent);pointer-events:none}
.fv-bar>*{pointer-events:auto}
.fv-right{margin-left:auto;display:flex;gap:8px}
.fv-count{color:rgba(238,233,224,.75);font-size:11px}
.fv-btn{all:unset;box-sizing:border-box;cursor:pointer;height:40px;padding:0 16px;display:inline-flex;align-items:center;gap:9px;border-radius:999px;background:rgba(18,16,14,.42);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);border:1px solid rgba(255,255,255,.14);color:#F4F0E8;font:500 11px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;transition:background .2s,border-color .2s}
.fv-btn:hover{background:rgba(255,255,255,.16)}
.fv-btn:focus-visible,.fv-nx:focus-visible{outline:2px solid #F4F0E8;outline-offset:2px}
.fv-btn b{width:18px;height:18px;border-radius:50%;border:1.5px solid currentColor;display:grid;place-items:center;font:600 11px/1 var(--f-body);text-transform:none}
.fv-sq{width:40px;padding:0;justify-content:center;font-size:14px}
.fv-nx{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;display:grid;place-items:center;text-decoration:none;color:#F4F0E8;background:rgba(18,16,14,.36);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.12);font:400 18px var(--f-mono);transition:background .2s,right .45s var(--ease)}
.fv-nx:hover{background:rgba(255,255,255,.18)}
.fv-nx.l{left:16px}
.fv-nx.r{right:384px}
.fv.hide-info .fv-nx.r{right:16px}
.fv-info{position:absolute;top:calc(env(safe-area-inset-top,0px) + 68px);right:16px;bottom:16px;width:352px;box-sizing:border-box;overflow-y:auto;padding:22px 22px 18px;border-radius:22px;
  background:rgba(20,18,16,.38);-webkit-backdrop-filter:blur(22px) saturate(1.3);backdrop-filter:blur(22px) saturate(1.3);border:1px solid rgba(255,255,255,.14);box-shadow:0 20px 60px -20px rgba(0,0,0,.5);
  display:flex;flex-direction:column;gap:16px;transition:transform .45s var(--ease),opacity .35s ease}
.fv.hide-info .fv-info{transform:translateX(calc(100% + 32px));opacity:0;pointer-events:none}
.fv-frame{color:rgba(238,233,224,.7);font-size:10.5px}
.fv-info h1{margin:0;font:200 clamp(28px,2.4vw,36px)/1.05 var(--f-body);letter-spacing:-.03em;text-wrap:balance}
.fv-where{margin:-6px 0 0;color:rgba(238,233,224,.8);font-size:11px;line-height:1.6}
.fv-where a{color:oklch(.82 .06 var(--mark-h));text-decoration:none}
.fv-where a:hover{text-decoration:underline}
.fv-note{margin:0;font-size:16px;line-height:1.5;color:#EEE9E0}
.fv-exif{display:grid;grid-template-columns:auto 1fr;margin:0;font-size:12px}
.fv-exif dt,.fv-exif dd{margin:0;padding:9px 0;border-top:1px solid rgba(255,255,255,.12)}
.fv-exif dt{color:rgba(238,233,224,.65);text-transform:uppercase;letter-spacing:.1em;font-size:10px;padding-right:16px}
.fv-exif dd{text-align:right;font-variant-numeric:tabular-nums}
.fv-print{color:#F4F0E8;text-decoration:none;font-size:11px;border-top:1px solid rgba(255,255,255,.12);padding-top:14px}
.fv-print:hover{text-decoration:underline}
.fv-keys{margin:auto 0 0;color:rgba(238,233,224,.5);font-size:10px}
@media (max-width:760px){
  .fv-bar{padding-inline:10px}
  .fv-btn span{display:none}
  .fv-btn{padding:0 12px}
  .fv-nx{width:42px;height:42px;top:auto;bottom:16px;transform:none}
  .fv-nx.l{left:12px}.fv-nx.r,.fv.hide-info .fv-nx.r{right:12px}
  .fv-info{top:auto;left:10px;right:10px;bottom:10px;width:auto;max-height:52vh;border-radius:20px}
  .fv.hide-info .fv-info{transform:translateY(calc(100% + 24px))}
  .fv:not(.hide-info) .fv-nx{bottom:calc(52vh + 22px)}
  .fv-keys{display:none}
}
@media (prefers-reduced-motion:reduce){.fv-info,.fv-nx{transition:none}}
/* viewer refinements */
.fv-info{bottom:auto;max-height:calc(100% - 84px - env(safe-area-inset-top,0px))}
.fv-exif dd,.fv-where{text-transform:none;letter-spacing:.02em}
.fv-keys{margin-top:0}
@media (max-width:760px){
  .fv-info{max-height:44vh;padding:18px 18px 14px;gap:12px}
  .fv-info h1{font-size:26px}
  .fv-nx,.fv:not(.hide-info) .fv-nx{top:50%;bottom:auto;transform:translateY(-50%)}
}
/* photo always fits the screen, whatever its shape */
.fv-stage{display:block;inset:0;transition:right .45s var(--ease)}
.fv-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
/* soft ambient fill from the photo itself, visible beside tall frames */
.fv-amb{position:absolute;inset:-60px;background-size:cover;background-position:center;filter:blur(48px) brightness(.32) saturate(1.1);transform:scale(1.1)}
/* tall frames step left of the open panel on wide screens */
@media (min-width:761px){
  .fv-tall:not(.hide-info) .fv-stage{right:384px}
  .fv-tall:not(.hide-info) .fv-nx.r{right:400px}
  .fv-stage img{top:12px;bottom:12px;height:calc(100% - 24px)}
}

/* ================================================================
   Stability pass: fixes glitches without changing behavior.
   ================================================================ */
/* 1. Header: stays a slim pill at every width. The menu becomes one
      row that scrolls sideways instead of wrapping into a tall blob,
      and the header no longer slides in on every page load. */
.top{animation:none;border-radius:999px}
.top .wrap{flex-wrap:nowrap;gap:16px}
.mark{flex:none;margin-right:0}
.nav{flex:1 1 auto;min-width:0;flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;margin-left:8px;scrollbar-width:none;
  -webkit-mask:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 14px),transparent);mask:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 14px),transparent)}
.nav::-webkit-scrollbar{display:none}
.nav a{flex:none;white-space:nowrap}
@media (max-width:1180px){.count{display:none}}
@media (max-width:1000px){.nav{justify-content:flex-start}}
@media (max-width:560px){
  .top{border-radius:26px}
  .top .wrap{flex-wrap:wrap;gap:4px}
  .mark{width:100%}
  .nav{margin-inline:0;width:100%}
}

/* 2. Calmer page entrances: shorter travel, no whole-page fade */
@keyframes rise2{from{opacity:0;transform:translateY(12px)}}
.view{animation:none}

/* 3. Background: same look, but painted once instead of re-blurred on scroll */
body::before{inset:0;filter:none;animation:none;
  background:radial-gradient(70vmax 50vmax at 10% 0%,var(--glow-a),transparent 70%),radial-gradient(60vmax 50vmax at 100% 100%,var(--glow-b),transparent 70%)}

/* 4. Collection tiles: no tilt on hover (it made text shimmer), and
      tiles share the row instead of leaving one alone */
.ctile:hover{transform:translateY(-4px)}
.cgrid{grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr))}

/* 5. Film strip: readable frame numbers on the dark strip; images keep
      their width while loading so the strip doesn't shuffle */
.film a span b{color:var(--sheet-ink);opacity:.75}
.film img{width:auto;aspect-ratio:auto}
.film a{contain:layout}

/* 6. Images never flash an empty box edge while decoding */
.strip span,.ctile .ph,.just a,.bw-ph,.dex-thumb,.dv-photo,.sheet .fr{background:var(--sheet)}
.nav{-webkit-mask:linear-gradient(90deg,#000 calc(100% - 18px),transparent);mask:linear-gradient(90deg,#000 calc(100% - 18px),transparent)}
@media (min-width:1001px){.nav{-webkit-mask:none;mask:none}}
.top{background:color-mix(in srgb,var(--ice) 88%,transparent)}

/* ---------- collection layouts ---------- */
/* light table */
.lt{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(28px,5vw,72px) clamp(20px,4vw,56px);padding:clamp(20px,4vw,56px) 0 clamp(40px,6vw,80px)}
.lt-s{width:var(--w);max-width:640px;display:block;padding:clamp(8px,1.2vw,16px) clamp(8px,1.2vw,16px) 0;background:var(--ice-2);border-radius:var(--r-s,6px);box-shadow:0 1px 0 var(--line),0 18px 40px -22px rgba(36,33,29,.5);transform:translateY(var(--dy)) rotate(var(--rot));transition:transform .5s var(--ease),box-shadow .5s}
.lt-s:hover,.lt-s:focus-visible{transform:translateY(calc(var(--dy) - 10px)) rotate(0) scale(1.02);box-shadow:0 1px 0 var(--line),0 30px 50px -24px rgba(36,33,29,.6);z-index:2}
.lt-ph{display:block;overflow:hidden;background:var(--sheet)}
.lt-ph img{width:100%;height:100%;object-fit:cover;display:block}
.lt-lab{display:flex;gap:12px;align-items:baseline;padding:12px 2px 14px;font-size:12px;color:var(--ink-soft)}
.lt-lab b{color:var(--mark);font-weight:500}
@media(max-width:700px){.lt-s{--w:100%!important;--dy:0px!important}}
/* story */
.st{display:flex;flex-direction:column;gap:clamp(48px,9vw,140px);padding:clamp(16px,3vw,40px) 0 clamp(40px,6vw,80px)}
.st-row{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(220px,.8fr);gap:clamp(20px,4vw,64px);align-items:end}
.st-row.flip{grid-template-columns:minmax(220px,.8fr) minmax(0,1.6fr)}
.st-row.flip .st-ph{order:2;justify-self:end}
.st-ph{display:block;width:var(--w);overflow:hidden;border-radius:var(--r-s,6px);background:var(--sheet)}
.st-ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--ease)}
.st-ph:hover img{transform:scale(1.03)}
.st-tx{display:flex;flex-direction:column;gap:10px;min-width:0}
.st-n{font-weight:200;font-size:clamp(72px,11vw,168px);line-height:.85;letter-spacing:-.04em;color:var(--mark)}
.st-tx h2{font-weight:800;font-size:clamp(24px,3vw,40px);line-height:1.05;margin:0}
.st-tx p{margin:0;font-size:12px;color:var(--ink-soft)}
.st-go{font-size:12px;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line);align-self:flex-start;padding-bottom:2px}
.st-go:hover{border-color:var(--mark)}
@media(max-width:800px){.st-row,.st-row.flip{grid-template-columns:1fr}.st-row.flip .st-ph{order:0;justify-self:start}.st-ph{--w:100%!important}}
/* mosaic */
.mo{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:clamp(90px,13vw,190px);grid-auto-flow:dense;gap:10px}
.mo a{position:relative;overflow:hidden;grid-column:span 2;grid-row:span 2;background:var(--sheet);border-radius:var(--r-s,6px)}
.mo a.lead{grid-column:span 4;grid-row:span 3}
.mo a.tall{grid-column:span 2;grid-row:span 3}
.mo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s var(--ease)}
.mo a:hover img{transform:scale(1.05)}
.mo a:hover .cap,.mo a:focus-visible .cap{opacity:1;transform:none}
@media(max-width:700px){.mo{grid-template-columns:repeat(2,1fr)}.mo a,.mo a.tall{grid-column:span 1}.mo a.lead{grid-column:span 2}}

/* archive fix: thumbnails fill a fixed square, never stretch the cell */
.sheet .fr{padding:0;overflow:hidden}
.sheet .fr img{position:absolute;inset:8%;width:84%;height:84%;max-width:none;max-height:none;object-fit:contain}

/* ---------- roadtrip (days) ---------- */
.rt-lead{position:relative;display:block;overflow:hidden;border-radius:calc(var(--r,14px)*1.2);background:var(--sheet);aspect-ratio:3/2;max-height:78vh;margin-bottom:clamp(36px,6vw,88px)}
.rt-lead img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.4s var(--ease)}
.rt-lead:hover img{transform:scale(1.025)}
.rt-lead-t{position:absolute;left:0;right:0;bottom:0;padding:clamp(48px,8vw,120px) clamp(16px,3vw,36px) clamp(16px,3vw,32px);background:linear-gradient(transparent,rgba(0,0,0,.66));color:var(--hud);display:flex;flex-direction:column;gap:6px}
.rt-lead-t b{font-weight:800;font-size:clamp(26px,4.4vw,60px);line-height:1;letter-spacing:-.02em}
.rt-lead-t .mono{font-size:11px;opacity:.85;text-transform:uppercase;letter-spacing:.1em}
.rt{display:flex;flex-direction:column;gap:clamp(44px,7vw,96px);margin-bottom:clamp(40px,6vw,90px)}
.rt-day header{display:grid;grid-template-columns:auto 1fr;gap:4px clamp(14px,2vw,28px);align-items:baseline;padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid var(--line)}
.rt-n{grid-row:1 / span 2;font-weight:200;font-size:clamp(44px,7vw,96px);line-height:.85;color:var(--mark);letter-spacing:-.04em;font-family:var(--f-display)}
.rt-day h2{margin:0;font-weight:800;font-size:clamp(20px,2.6vw,34px);line-height:1.05;letter-spacing:-.01em}
.rt-day header .mono{font-size:11px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.08em}
.rt-row{display:flex;flex-wrap:wrap;gap:10px}
.rt-row a{position:relative;overflow:hidden;background:var(--sheet);border-radius:var(--r-s,6px);max-width:100%}
.rt-row img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s var(--ease)}
.rt-row a:hover img{transform:scale(1.04)}
.rt-row a:hover .cap,.rt-row a:focus-visible .cap{opacity:1;transform:none}
/* ---------- human for scale ---------- */
.sc{display:flex;flex-direction:column;gap:clamp(20px,3vw,40px);padding:8px 0 clamp(40px,6vw,80px)}
.sc-row{display:grid;grid-template-columns:clamp(90px,14vw,190px) minmax(0,1.5fr) minmax(160px,.7fr);gap:clamp(14px,3vw,44px);align-items:end;text-decoration:none;color:var(--ink)}
.sc-n{display:flex;align-items:flex-end;gap:14px;height:100%;min-height:120px}
.sc-n b{font-weight:200;font-size:clamp(48px,8vw,120px);line-height:.8;letter-spacing:-.05em;color:var(--mark)}
.sc-n b i{font-style:normal;font-size:.4em;letter-spacing:0;margin-left:2px}
.sc-bar{align-self:stretch;width:5px;background:var(--line);border-radius:4px;display:flex;align-items:flex-end;overflow:hidden}
.sc-bar i{display:block;width:100%;background:var(--mark);border-radius:4px}
.sc-ph{display:block;overflow:hidden;border-radius:var(--r-s,6px);background:var(--sheet);width:100%;max-width:820px}
.sc-ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1s var(--ease)}
.sc-row:hover .sc-ph img{transform:scale(1.03)}
.sc-tx{display:flex;flex-direction:column;gap:6px;min-width:0}
.sc-tx em{font-style:normal;font-weight:800;font-size:clamp(18px,2vw,26px);line-height:1.1}
.sc-tx .mono{font-size:11px;color:var(--ink-soft)}
@media(max-width:800px){.sc-row{grid-template-columns:90px 1fr}.sc-tx{grid-column:1 / -1}.sc-n{min-height:90px}}

/* long collection names shrink to fit their column */
.chead h1[style*="--n"]{font-size:clamp(52px,min(16vw,calc(88vw / var(--n))),260px)}
.crow-t h3[style*="--n"]{font-size:clamp(44px,min(10vw,calc(52vw / var(--n))),170px)}
/* roadtrip rows: fixed height, justified */
.rt-row{--rh:clamp(170px,21vw,290px)}
.rt-row a{height:var(--rh);flex:1 1 calc(var(--r,1.5) * var(--rh));min-width:0}
.rt-row a{max-width:calc(var(--r,1.5) * var(--rh) * 1.7)}
.ctile .ph b[style*="--n"]{font-size:min(clamp(44px,5.4vw,84px),calc(min(100%,240px) * .32 / var(--n) * 4.2));right:8px;overflow-wrap:anywhere}
.ctile .ph{container-type:inline-size}
.ctile .ph b[style*="--n"]{font-size:min(clamp(40px,5.4vw,84px),calc(88cqw / var(--n) / .56))}

/* ---------- collection spotlight ---------- */
.sp{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);grid-auto-rows:clamp(150px,19vw,270px);gap:10px;margin-bottom:clamp(28px,4vw,56px)}
.sp a{position:relative;overflow:hidden;background:var(--sheet);border-radius:calc(var(--r,14px)*1.1);display:block;color:var(--hud);text-decoration:none}
.sp-m{grid-row:span 3}
.sp-s{grid-row:span 1}
.sp:has(.sp-s:nth-child(2):last-child) .sp-m{grid-row:span 2}
.sp:has(.sp-s:nth-child(2):last-child) .sp-s{grid-row:span 2}
.sp img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--ease)}
.sp a:hover img{transform:scale(1.03)}
.sp-t{position:absolute;inset:auto 0 0;padding:44px clamp(14px,2vw,26px) clamp(12px,1.6vw,22px);background:linear-gradient(transparent,rgba(0,0,0,.68));display:flex;flex-direction:column;gap:4px}
.sp-t .mono{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;opacity:.85}
.sp-t b{font-weight:800;line-height:1.02;letter-spacing:-.02em;font-size:clamp(18px,2vw,28px)}
.sp-m .sp-t b{font-size:clamp(26px,3.6vw,52px)}
.sp-h{margin:0 0 14px;font-weight:400}
.sp-h .mono{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mark)}
@media(max-width:800px){.sp{grid-template-columns:1fr 1fr;grid-auto-rows:clamp(120px,32vw,200px)}.sp-m{grid-column:1 / -1;grid-row:span 2}.sp-s,.sp:has(.sp-s:nth-child(2):last-child) .sp-s{grid-row:span 1}}

/* ---------- national parks page ---------- */
.pk-nav{display:flex;flex-wrap:wrap;gap:8px;margin:clamp(20px,3vw,40px) 0 clamp(8px,2vw,24px)}
.pk{padding-top:clamp(36px,6vw,84px);scroll-margin-top:84px}
.pk header{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px clamp(14px,2vw,28px);align-items:baseline;border-bottom:1px solid var(--line);padding-bottom:16px}
.pk-n{grid-row:1 / span 3;font-weight:200;font-size:clamp(44px,7vw,96px);line-height:.85;color:var(--mark);letter-spacing:-.04em;font-family:var(--f-display)}
.pk h2{margin:0;font-weight:800;font-size:clamp(28px,4.4vw,64px);line-height:.95;letter-spacing:-.03em}
.pk header p{margin:0;max-width:60ch;color:var(--ink-soft)}
.pk header .mono{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
/* intro photo spans the full column */
.rt-lead{aspect-ratio:auto;height:clamp(360px,72vh,820px);max-height:none;width:100%}
@media(max-width:700px){.rt-lead{height:56vw;min-height:260px}}

/* click-to-zoom in the viewer */
.fv-stage{cursor:zoom-in;touch-action:manipulation}
.fv-stage img{transition:transform .55s var(--ease);will-change:transform}
.fv.zoomed .fv-stage{cursor:zoom-out;touch-action:none;right:0!important;overflow:hidden}
.fv.zoomed .fv-info,.fv.zoomed .fv-nx{opacity:0;pointer-events:none}
@media(prefers-reduced-motion:reduce){.fv-stage img{transition:none}}

/* ---------- light clock ---------- */
.ck{--sky-top:#dbe3ea;--sky-bot:#f2e9dc;--hill:#8a8f86;--ck-fg:#23211f;--ck-fg2:rgba(35,33,31,.62);--warm:0;position:relative;overflow:hidden;isolation:isolate;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(220px,.85fr);gap:clamp(20px,4vw,64px);align-items:center;padding:clamp(20px,4vw,56px);border-radius:28px;background:linear-gradient(var(--sky-top),var(--sky-bot));color:var(--ck-fg);margin-bottom:clamp(40px,6vw,90px)}
.ck.is-night{--ck-fg:#f1ece4;--ck-fg2:rgba(241,236,228,.66)}
.ck-sky{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.ck-sun,.ck-moon,.ck-stars{position:absolute}
.ck-stars{inset:0;opacity:0;background-image:radial-gradient(1.5px 1.5px at 12% 18%,#fff,transparent),radial-gradient(1px 1px at 28% 40%,#fff,transparent),radial-gradient(1.5px 1.5px at 44% 12%,#fff,transparent),radial-gradient(1px 1px at 61% 30%,#fff,transparent),radial-gradient(1.5px 1.5px at 78% 16%,#fff,transparent),radial-gradient(1px 1px at 90% 44%,#fff,transparent),radial-gradient(1px 1px at 8% 58%,#fff,transparent),radial-gradient(1.5px 1.5px at 52% 52%,#fff,transparent),radial-gradient(1px 1px at 70% 8%,#fff,transparent),radial-gradient(1px 1px at 35% 70%,#fff,transparent)}
.ck-sun{width:clamp(70px,10vw,130px);aspect-ratio:1;left:0;top:0;margin:-5% 0 0 -5%;border-radius:50%;background:radial-gradient(circle,#fffbe8 0 30%,color-mix(in srgb,#ffd35a calc((1 - var(--warm))*100%),#ff7a3a) 60%,transparent 72%);box-shadow:0 0 90px 40px color-mix(in srgb,rgba(255,214,120,.55) calc((1 - var(--warm))*100%),rgba(255,120,60,.55));will-change:transform,left,top}
.ck-moon{width:clamp(50px,7vw,90px);aspect-ratio:1;left:0;top:0;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff,#dfe6f2 60%,#aeb8cc);box-shadow:0 0 50px 14px rgba(200,215,255,.35);opacity:0}
.ck-hills{position:absolute;left:0;right:0;bottom:0;width:100%;height:32%;fill:var(--hill);transition:fill .2s}
.ck-dial,.ck-side{position:relative;z-index:1}
.ck-dial svg{width:100%;height:auto;display:block;max-width:720px;margin-inline:auto;overflow:visible;touch-action:none;user-select:none;-webkit-user-select:none}
.ck-night{fill:none;stroke:var(--ck-fg);stroke-width:34;opacity:.22}
.ck-day{fill:none;stroke:var(--ck-fg);stroke-width:34;opacity:.08}
.ck-gold{fill:none;stroke:#ffb84a;stroke-width:34;opacity:.55}
.ck-tick{stroke:var(--ck-fg);stroke-width:1.2;opacity:.55}.ck-tick.big{stroke-width:2.2;opacity:.95}
.ck-lab{font:500 15px var(--f-mono);fill:var(--ck-fg2)}
.ck-rim{fill:rgba(0,0,0,.12);stroke:var(--ck-fg);stroke-width:2;opacity:.9}
.ck-dot circle{fill:var(--ck-fg);stroke:rgba(255,255,255,.7);stroke-width:2.5;transition:r .25s var(--ease),fill .25s;cursor:pointer}
.ck-dot:hover circle,.ck-dot:focus-visible circle,.ck-dot.on circle{r:11;fill:#ffb84a}
.ck-dot:focus{outline:none}
#ck-open{cursor:pointer}
#ck-img{transition:filter .3s}
#ck-handle{cursor:grab;outline:none}
#ck-handle:active{cursor:grabbing}
.ck-h-halo{fill:rgba(255,200,90,.35)}
.ck-h-core{fill:#ffd35a;stroke:#fff;stroke-width:3;filter:drop-shadow(0 0 8px rgba(255,190,70,.9))}
#ck-handle:focus-visible .ck-h-halo{stroke:var(--ck-fg);stroke-width:2.5;fill:rgba(255,200,90,.5)}
.ck-now{font:300 clamp(40px,6vw,84px)/1 var(--f-mono);letter-spacing:-.04em;margin:0 0 14px;color:var(--ck-fg)}
.ck-cap{display:flex;flex-direction:column;gap:8px;margin:0 0 22px}
.ck-cap b{font-weight:800;font-size:clamp(26px,3.6vw,52px);line-height:1;letter-spacing:-.03em}
.ck-cap .mono{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ck-fg2)}
.ck-stats{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;font-size:12px;margin:0 0 18px;padding:16px 18px;border-radius:16px;background:rgba(255,255,255,.18);backdrop-filter:blur(6px)}
.ck-stats dt{color:var(--ck-fg2);text-transform:uppercase;letter-spacing:.08em}.ck-stats dd{margin:0}
.ck-btns{display:flex;gap:10px;margin:0 0 16px}
.ck-btns .chip{background:rgba(255,255,255,.22);color:var(--ck-fg);border:1px solid var(--ck-fg2);cursor:pointer}
.ck-hint{font-size:11px;color:var(--ck-fg2);margin:0;max-width:44ch;line-height:1.6}
@media(max-width:860px){.ck{grid-template-columns:1fr;border-radius:20px}}
/* ---------- fine print (specimens) ---------- */
.spc{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));gap:clamp(28px,4vw,56px) clamp(16px,3vw,40px);padding:clamp(8px,2vw,24px) 0 clamp(40px,6vw,90px)}
.spc-i{display:flex;flex-direction:column;align-items:center;gap:18px;text-decoration:none;color:var(--ink);animation:rise2 .8s var(--ease) backwards;animation-delay:var(--d)}
.spc-lens{position:relative;display:block;width:min(100%,300px);aspect-ratio:1;border-radius:50%;overflow:hidden;background:var(--sheet);box-shadow:0 0 0 6px var(--ice-2),0 0 0 7px var(--line),0 24px 40px -24px rgba(36,33,29,.55);transition:transform .6s var(--ease)}
.spc-lens img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1s var(--ease)}
.spc-i:hover .spc-lens{transform:scale(1.04)}.spc-i:hover .spc-lens img{transform:scale(1.18)}
.spc-tag{display:flex;flex-direction:column;gap:4px;text-align:center;font-size:11px;color:var(--ink-soft);max-width:30ch}
.spc-tag b{color:var(--mark);font-weight:500;letter-spacing:.1em;text-transform:uppercase}
.spc-tag em{font:800 20px/1.1 var(--f-display);font-style:normal;color:var(--ink);letter-spacing:-.02em;margin-block:2px}

/* gradient numerals: the tight letter-spacing clipped the last digit */
.bw-n{display:inline-block;padding:.04em .12em .08em;margin-inline:-.12em}

.fv-hd{display:flex;justify-content:space-between;align-items:center;gap:12px;position:sticky;top:-22px;margin:-22px -22px 0;padding:14px 22px 6px;z-index:2}
.fv-close{all:unset;cursor:pointer;display:none;align-items:center;gap:8px;height:34px;padding:0 14px;border-radius:999px;background:rgba(255,255,255,.16);color:#F4F0E8;font:500 11px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase}
.fv-close:focus-visible{outline:2px solid #F4F0E8}
@media (max-width:760px){.fv-close{display:inline-flex}.fv-hd{top:-18px;margin:-18px -18px 0;padding:12px 18px 6px}}
.ck{padding-bottom:clamp(70px,11vw,150px)}
.ck-hills{height:24%}

.ck-speed{display:block;margin:0 0 16px;max-width:300px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ck-fg2)}
.ck-speed b{color:var(--ck-fg);font-weight:500}
.ck-speed input{display:block;width:100%;margin:10px 0 4px;accent-color:#ffb84a;cursor:pointer}
.ck-ticks{display:flex;justify-content:space-between;font-size:9.5px}.ck-ticks i{font-style:normal}

/* The Keepers, gallery layout */
.bg-head{padding-bottom:clamp(8px,2vw,24px)}
.bg{display:flex;flex-direction:column;align-items:center;gap:clamp(64px,11vw,150px);padding:clamp(20px,4vw,50px) clamp(12px,4vw,56px) clamp(80px,10vw,150px)}
.bg-item{margin:0;display:flex;flex-direction:column;align-items:center;gap:clamp(18px,2.4vw,30px);width:100%}
.bg-frame{display:block;box-sizing:border-box;padding:clamp(7px,.9vw,13px);background:linear-gradient(135deg,#2b2622,#14110f 55%,#2b2622);border-radius:3px;
  width:min(100%,calc((84vh - 40px) * var(--r) + 2 * (clamp(7px,.9vw,13px) + clamp(18px,3.6vw,56px))));
  box-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 2px 4px rgba(30,25,20,.3),0 34px 70px -28px rgba(30,25,20,.55),0 70px 110px -60px rgba(30,25,20,.4);transition:transform .5s var(--ease),box-shadow .5s}
.bg-frame:hover{transform:translateY(-4px)}
.bg-frame:focus-visible{outline:2px solid var(--signal);outline-offset:6px}
.bg-mat{display:block;padding:clamp(18px,3.6vw,56px);background:#f4f0e6;box-shadow:0 0 0 1px rgba(0,0,0,.18) inset,0 2px 8px rgba(0,0,0,.18) inset}
.bg-ph{display:block;aspect-ratio:var(--r);background:var(--sheet);box-shadow:0 0 0 1px rgba(0,0,0,.35),0 0 0 3px #f4f0e6,0 0 0 4px rgba(0,0,0,.12);overflow:hidden}
.bg-ph img{display:block;width:100%;height:100%;object-fit:cover}
.bg-label{display:grid;grid-template-columns:auto auto;gap:3px 18px;align-items:baseline;justify-content:center;text-align:left;font-size:11px;letter-spacing:.06em;color:var(--ink-soft);padding:10px 18px;border:1px solid var(--line);background:color-mix(in srgb,var(--sheet) 70%,transparent)}
.bg-label b{grid-row:span 3;font:800 28px/1 var(--f-display);color:var(--ink);letter-spacing:-.04em;align-self:center}
.bg-label .bg-t{color:var(--ink);font-weight:500;font-size:12.5px;text-transform:none;letter-spacing:.01em}
@media(max-width:600px){.bg-label{grid-template-columns:auto;text-align:center}.bg-label b{grid-row:auto;font-size:22px}}
.bg-label{background:#f4f0e6;color:#5b554d;border:1px solid rgba(30,25,20,.18);box-shadow:0 10px 24px -14px rgba(30,25,20,.4)}
.bg-label b,.bg-label .bg-t{color:#1d1a17}
.bg-frame{width:min(100%,calc((74vh - 40px) * var(--r) + 2 * (clamp(7px,.9vw,13px) + clamp(18px,3.6vw,56px))))}

/* Human for Scale, sleek cards */
.sc2{gap:clamp(48px,8vw,120px);padding-block:clamp(10px,2vw,30px) clamp(60px,8vw,110px)}
.sc2-row{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));align-items:center;gap:0;isolation:isolate}
.sc2-row .sc-ph{grid-column:1 / span 8;grid-row:1;border-radius:clamp(16px,2vw,28px);max-width:none;
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 2px 4px rgba(30,25,20,.12),0 24px 50px -22px rgba(30,25,20,.5),0 60px 110px -50px rgba(30,25,20,.45);
  transition:transform .7s var(--ease),box-shadow .7s;position:relative}
.sc2-row .sc-ph::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(160deg,rgba(255,255,255,.16),transparent 35%,transparent 70%,rgba(0,0,0,.18));box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.sc2-row:hover .sc-ph{transform:translateY(-6px) scale(1.008)}
.sc2-row:hover .sc-ph img{transform:scale(1.04)}
.sc2-rank{position:absolute;left:16px;top:14px;z-index:2;font-size:10.5px;letter-spacing:.1em;color:#fff;padding:6px 11px;border-radius:999px;background:rgba(18,16,14,.4);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.sc2-card{grid-column:8 / span 5;grid-row:1;position:relative;z-index:2;display:grid;grid-template-columns:auto 1fr;column-gap:22px;row-gap:6px;align-items:end;padding:clamp(20px,2.4vw,34px);border-radius:clamp(16px,2vw,26px);
  background:linear-gradient(150deg,rgba(255,255,255,.62),rgba(255,255,255,.28));-webkit-backdrop-filter:blur(24px) saturate(1.4);backdrop-filter:blur(24px) saturate(1.4);
  border:1px solid rgba(255,255,255,.55);box-shadow:0 30px 60px -30px rgba(30,25,20,.5),0 1px 0 rgba(255,255,255,.7) inset;transition:transform .7s var(--ease)}
.sc2-row:hover .sc2-card{transform:translateY(-10px)}
.sc2-row.flip .sc-ph{grid-column:5 / span 8}.sc2-row.flip .sc2-card{grid-column:1 / span 5}
.sc2-gauge{grid-row:1 / span 4;align-self:stretch;display:flex;align-items:flex-end}
.sc2-fr{position:relative;width:46px;aspect-ratio:3/4;border-radius:8px;background:rgba(30,25,20,.08);box-shadow:inset 0 0 0 1px rgba(30,25,20,.18),inset 0 6px 12px -6px rgba(30,25,20,.3);display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
.sc2-fig{display:flex;flex-direction:column;align-items:center;height:var(--h);min-height:5px;width:100%;justify-content:flex-end}
.sc2-fig i{display:block;width:6px;aspect-ratio:1;border-radius:50%;background:oklch(.5 .14 var(--mark-h,60));flex:none}
.sc2-fig u{display:block;flex:1;width:6px;margin-top:1px;border-radius:3px 3px 0 0;background:linear-gradient(oklch(.55 .14 var(--mark-h,60)),oklch(.4 .12 var(--mark-h,60)))}
.sc2-pct{display:flex;align-items:flex-start;line-height:.8}
.sc2-pct b{font-weight:200;font-size:clamp(56px,8vw,112px);letter-spacing:-.06em;background:linear-gradient(180deg,oklch(.5 .15 var(--mark-h,60)),oklch(.34 .1 var(--mark-h,60)));-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.06em}
.sc2-pct i{font-style:normal;font-size:clamp(18px,2vw,28px);margin:.2em 0 0 4px;color:var(--ink-soft)}
.sc2-card em{grid-column:2;font-style:normal;font-weight:700;font-size:clamp(20px,2.2vw,30px);line-height:1.1;letter-spacing:-.02em;margin-top:10px}
.sc2-card .mono{grid-column:2;font-size:11px;color:var(--ink-soft);letter-spacing:.06em}
@media(max-width:800px){
  .sc2-row,.sc2-row.flip{grid-template-columns:1fr}
  .sc2-row .sc-ph,.sc2-row.flip .sc-ph{grid-column:1}
  .sc2-card,.sc2-row.flip .sc2-card{grid-column:1;grid-row:2;margin:-44px 14px 0}
}
.sc2-fr{width:38px;aspect-ratio:auto;height:104px}
.sc2-fig i{width:8px}.sc2-fig u{width:8px}

.sc3 .bg-label b small{font-size:.5em;letter-spacing:0;margin-left:2px;color:#7a736a;font-weight:500}
.sc3 .bg-label b{min-width:2.4ch}

/* Human for Scale: the original rows, lightly refined */
.sc-row{padding-bottom:clamp(20px,3vw,40px);border-bottom:1px solid var(--line)}
.sc-row:last-child{border-bottom:0}
.sc-n b{font-weight:200;background:linear-gradient(180deg,var(--mark),color-mix(in srgb,var(--mark) 45%,var(--ink)));-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.08em}
.sc-n b i{-webkit-text-fill-color:var(--ink-soft)}
.sc-bar{width:3px;background:color-mix(in srgb,var(--ink) 10%,transparent)}
.sc-bar i{background:linear-gradient(var(--mark),color-mix(in srgb,var(--mark) 55%,var(--ink)))}
.sc-ph{border-radius:14px;box-shadow:0 1px 2px rgba(30,25,20,.12),0 22px 40px -26px rgba(30,25,20,.45);transition:box-shadow .5s,transform .6s var(--ease)}
.sc-row:hover .sc-ph{box-shadow:0 1px 2px rgba(30,25,20,.12),0 30px 50px -26px rgba(30,25,20,.55);transform:translateY(-3px)}
.sc-tx em{font-weight:600;letter-spacing:-.02em}

.tdesc>span:first-child,.mono.tdesc{text-transform:none;letter-spacing:.01em}
.ctile .tdesc>span:first-child{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;line-height:1.45;font-size:12px;max-width:46ch}

/* ---------- hero framed print ---------- */
.rt-lead{--fr:clamp(8px,1.1vw,15px);--mat:clamp(14px,2.6vw,42px);box-sizing:border-box;padding:var(--fr);border-radius:4px;overflow:visible;
  background:linear-gradient(135deg,#3a322b,#17130f 45%,#332b24 75%,#14110e);
  box-shadow:0 0 0 1px rgba(0,0,0,.5),0 1px 0 1px rgba(255,255,255,.14) inset,0 0 0 1px rgba(214,178,110,.35) inset,0 30px 60px -28px rgba(30,20,10,.65),0 12px 24px -14px rgba(30,20,10,.5)}
.rt-lead::before{content:"";position:absolute;inset:calc(var(--fr) - 3px);border:1px solid rgba(214,178,110,.55);border-radius:2px;pointer-events:none}
.rt-lead img{box-sizing:border-box;border:var(--mat) solid #f4f0e6;box-shadow:0 0 0 1px rgba(0,0,0,.25) inset,0 3px 10px rgba(0,0,0,.28) inset;outline:1px solid rgba(0,0,0,.35);outline-offset:calc(var(--mat)*-1);transition:filter .6s var(--ease)}
.rt-lead:hover img{transform:none;filter:brightness(1.04)}
.rt-lead-t{left:calc(var(--fr) + var(--mat));right:calc(var(--fr) + var(--mat));bottom:calc(var(--fr) + var(--mat));padding:clamp(40px,7vw,100px) clamp(14px,2.4vw,30px) clamp(14px,2.2vw,26px)}
@media(max-width:700px){.rt-lead{--mat:10px}}

/* light-table prints: paper photo prints */
.lt-s{background:linear-gradient(160deg,#fbf9f4,#f1ede4);border-radius:2px;padding:clamp(8px,1.2vw,16px) clamp(8px,1.2vw,16px) 0;box-shadow:0 0 0 1px rgba(60,50,40,.14),0 1px 1px rgba(40,30,20,.18),0 4px 8px -2px rgba(40,30,20,.22),0 22px 36px -20px rgba(40,30,20,.5)}
.lt-ph{box-shadow:0 0 0 1px rgba(40,30,20,.16),0 1px 3px rgba(40,30,20,.25) inset;position:relative}
.lt-ph::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.14),transparent 38%,rgba(0,0,0,.08));pointer-events:none}
.lt-lab{color:#6a6258}
.lt-s:hover,.lt-s:focus-visible{box-shadow:0 0 0 1px rgba(60,50,40,.14),0 2px 2px rgba(40,30,20,.16),0 34px 46px -22px rgba(40,30,20,.55)}

/* rounded outer corners */
.rt-lead{border-radius:clamp(10px,1.3vw,18px)}
.rt-lead::before{border-radius:clamp(6px,.9vw,12px)}
.lt-s{border-radius:clamp(6px,.8vw,10px)}

/* prints keep their own height (no stretching to row neighbours) */
.lt{align-items:flex-start}
.lt-s{align-self:flex-start;height:auto}

.dv-dl{margin:0 0 14px;align-self:flex-start}
.dl-modal{position:fixed;inset:0;z-index:9500;background:rgba(20,17,14,.7);display:grid;place-items:center;padding:16px;overflow:auto}
.dl-box{max-width:min(440px,100%);text-align:center}
.dl-box img{display:block;width:100%;max-height:70vh;object-fit:contain;border-radius:18px;box-shadow:0 30px 70px -20px rgba(0,0,0,.7)}
.dl-row{display:flex;gap:10px;justify-content:center;margin:14px 0 8px}
.dl-go{background:var(--ink,#1d1a17);color:#f4f0e8;text-decoration:none}
.dl-box p{color:#d9d3c8;font-size:11px;margin:0}
.dl-box button.chip{color:#f4f0e8;border-color:rgba(255,255,255,.45);background:transparent}

/* hero photos always keep the same 3:2 ratio, at every screen size */
.rt-lead{aspect-ratio:3/2;height:auto;min-height:0;max-height:none;width:100%}
@media(max-width:700px){.rt-lead{height:auto;min-height:0}}

/* Keepers name plate: a static label, it never reacts to the pointer */
.bg-label,.bg-label *{pointer-events:none;user-select:none;-webkit-user-select:none;transition:none!important;filter:none!important}
.bg-label:hover,.bg-item:hover .bg-label{background:#f4f0e6;color:#5b554d;border-color:rgba(30,25,20,.18);box-shadow:0 10px 24px -14px rgba(30,25,20,.4)}

/* Keepers name plate: always the soft, see-through look */
.bg-label,.bg-label:hover,.bg-item:hover .bg-label{background:color-mix(in srgb,#f4f0e6 58%,transparent);color:#6b645a;border:1px solid rgba(36,33,29,.14);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.bg-label b,.bg-label .bg-t{color:var(--ink)}

/* Human for Scale: keep the bar from being squeezed out by wide numbers */
.sc-row{grid-template-columns:clamp(110px,16vw,250px) minmax(0,1.5fr) minmax(160px,.7fr)}
.sc-n{flex:none;min-width:0}
.sc-n b{font-size:clamp(48px,7vw,104px);flex:0 1 auto;white-space:nowrap}
.sc-bar{flex:0 0 3px;min-width:3px}
@media(max-width:800px){.sc-row{grid-template-columns:110px 1fr}}