/* The original reference board's masonry proportions and quiet captions. */
#collection[hidden]{display:none}body.locked>.bar{visibility:hidden}
.site-nav{display:flex;align-items:center;gap:28px;font-size:13px;color:var(--g5)}
.site-nav a{display:flex;align-items:center;min-height:44px;transition:color .25s}.site-nav a:hover,.site-nav a[aria-current]{color:var(--white)}
#collection .intro{position:absolute;left:0;top:0;padding:clamp(8px,2vw,28px) clamp(0px,1.5vw,24px) 0 0}
#collection .intro h1{font-size:clamp(40px,5vw,76px);font-weight:500;letter-spacing:-.045em;line-height:1.12;text-wrap:balance}
#collection .intro p{margin-top:clamp(14px,1.6vw,22px);color:var(--g6);font-size:clamp(15px,1.15vw,17px);max-width:34ch;line-height:1.55}
.first-category{margin-top:38px;font-size:19px;font-weight:400;letter-spacing:-.02em;color:var(--g6)}
.grid-category{position:absolute;left:0;top:0;padding:12px 24px 24px 0}.grid-category[hidden]{display:none}.grid-category h2{max-width:12ch;font-size:clamp(28px,3.6vw,52px);font-weight:400;line-height:1.04;letter-spacing:-.04em}
.tile-media{display:block;overflow:hidden;border-radius:8px;background:var(--card)}
.tile-media img{border-radius:0;transition:transform .65s var(--ease)}
.tile-open{display:block;border-radius:8px}
.tile-open b{font-size:13px;line-height:1.32;font-weight:400;color:var(--g5);margin-top:10px;padding:0 0 5px;letter-spacing:-.005em}
.detail-topics span{font-size:11px;line-height:1.6;color:var(--g5)}
#collectionTitle:focus{outline:0}.tile-open:focus-visible{outline:1.5px solid var(--gold);outline-offset:3px}
/* Hover: the picture eases in a touch inside its frame and the title lifts to white. Nothing else moves, no box appears. */
.tile-media img{transition:transform 1.1s var(--ease),filter .5s ease}.tile-open b{transition:color .3s ease}
@media(hover:hover){.tile-open:hover .tile-media img{transform:scale(1.04)}.tile-open:hover b{color:var(--white)}.wall:has(.tile-open:hover) .tile-open:not(:hover) .tile-media img{filter:brightness(.72)}}
.tile-open:focus-visible b{color:var(--white)}
@media(max-width:820px){#collection .intro h1{font-size:clamp(36px,9.8vw,50px)}.site-nav{gap:18px;font-size:11px}.logo img{height:10px}.first-category{margin-top:28px}.grid-category{padding-top:0}}
@media(prefers-reduced-motion:reduce){.tile-media img{transition:none}.tile-open:hover .tile-media img{transform:none}}

/* Scroll-linked entrance: native scrolling, no wheel interception or timers.
   Animate the inner link so masonry positioning and card-flight geometry stay intact. */
@keyframes cinematic-enter{
  from{opacity:.25;translate:0 32px;scale:.97;clip-path:inset(8% 0 0 round 8px)}
  to{opacity:1;translate:0 0;scale:1;clip-path:inset(0 round 8px)}
}
@supports(animation-timeline:view()){
  @media(prefers-reduced-motion:no-preference){
    .tile-open{
      animation:cinematic-enter linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 95%;
    }
    .tile-open:focus-visible{animation:none}
    body.locked .tile-open{animation:none}
  }
}

@media(max-width:520px){
  .bar{justify-content:center}
  .bar .site-nav{display:none}
  .bar .logo{display:flex;align-items:center;justify-content:center;min-height:44px}
  .bar .logo img{height:12px;width:auto}
  #collection .intro{text-align:center;padding-right:0}
  #collection .intro p{margin-left:auto;margin-right:auto}
  .first-category{text-align:left}
}

/* A viewing room: the work leads, sources and notes read as editorial text. */
.tile-open b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:normal;overflow:hidden;min-height:34px;padding-bottom:0}
.site-linked{display:block;font-size:10px;line-height:16px;color:var(--g5);margin-top:5px;font-weight:400}
.sheet-in{max-width:1440px;grid-template-columns:minmax(0,1.6fr) minmax(300px,1fr);gap:clamp(30px,5vw,80px);padding:100px var(--pad) 70px}
.video-shot{width:100%;max-width:none;justify-self:stretch}
.video-stage{width:100%;background:#090909;border-radius:0;overflow:hidden}
.video-stage img{width:100%;height:auto;max-height:70dvh;object-fit:contain;margin:auto;border-radius:0}
.original-shot .video-stage img{width:auto;max-width:100%;max-height:68dvh}
.play-reel{border-radius:0;background:#f0eee8;color:#111;border:0;padding:14px 22px;font-size:13px;box-shadow:none;min-height:44px}
.play-reel span{font-size:16px;margin-left:14px}
.player-note{gap:12px;flex-wrap:wrap;line-height:1.5;margin-top:15px}
.body h2{font-size:clamp(30px,3.4vw,48px);line-height:1.06;letter-spacing:-.045em}
.detail-kicker{font-size:11px;letter-spacing:0;text-transform:none;color:var(--g5);margin-bottom:20px}
.websites{margin-top:26px}.website{border:0;padding:0;background:none}.website+.website{margin-top:18px}
.website-primary{padding:0 0 9px;border:0;border-bottom:1px solid #5b4b2d;border-radius:0;background:none;justify-content:flex-start;gap:12px;color:var(--gold);font-size:15px;line-height:1.5}
.website-primary:hover{background:none;border-color:var(--gold);color:var(--white)}
.website-primary>svg{width:13px;height:13px}.website-secondary{gap:20px;margin-top:7px;font-size:11px}
.source-qualification{font-size:11px;color:var(--g5);margin-top:7px}
.editorial-note{margin-top:34px}.editorial-note h3{font-size:11px;font-weight:400;color:var(--gold);margin:22px 0 9px}.editorial-note p{font-size:15px;line-height:1.65;color:var(--g6)}.editorial-note>small{display:block;font-size:10px;line-height:1.5;color:var(--g5);margin-top:17px}
.personal-actions{margin-top:28px;padding-top:18px;border-top:1px solid var(--g2);gap:22px}
.body .study{margin-top:10px}.study-tabs{margin-bottom:14px}.study-tabs button{font-size:11px}.source-caption,.visual-evidence{font-size:12px}
.close{border:0;background:#000;border-radius:0;font-size:12px}
@media(max-width:820px){
 .sheet-in{grid-template-columns:1fr;max-width:680px;padding:66px var(--pad) 38px;gap:27px}
 .video-shot{max-width:none}.video-stage{width:100%}.video-stage img{width:100%;max-height:58dvh}
 .original-shot .video-stage img{width:auto;max-height:53dvh}
 .body h2{font-size:32px;max-width:22ch}.detail-kicker{margin-bottom:12px}.editorial-note{margin-top:24px}.websites{margin-top:20px}
 .player-note{font-size:10px}.website-primary{font-size:14px}.personal-actions{margin-top:22px}
}
.personal-actions button{background:none;border:0;border-bottom:1px solid transparent;border-radius:0;padding:10px 0;color:var(--g5)}
.personal-actions button:hover,.personal-actions button[aria-pressed=true]{background:none;border-color:var(--gold);color:var(--gold)}




/* Native reel proportions and one continuous editorial reading column. */
.sheet-in{max-width:1220px;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(32px,6vw,88px)}
.native-reel{width:100%;justify-self:center}
.native-reel .video-stage{aspect-ratio:var(--reel-ratio);width:min(100%,calc(74dvh * var(--reel-ratio)));margin:0 auto;background:#080808;border-radius:0}
.native-reel .video-stage img{width:100%;height:100%;max-height:none;object-fit:contain;border-radius:0}
.native-reel .video-player{border-radius:0}.native-reel .video-player iframe{display:block;width:100%;height:100%;object-fit:contain}
.native-reel .player-note{width:min(100%,calc(74dvh * var(--reel-ratio)));margin:14px auto 0;font-size:10px}
.body h2{font-size:clamp(28px,3vw,42px);line-height:1.14}
.websites{margin-top:22px}.website-primary{border:0;padding-bottom:0;font-size:14px}.source-qualification{font-size:11px;line-height:1.5}.embed-option{font-size:11px;color:var(--g5);min-height:32px;margin-top:3px}
.editorial-note{margin-top:30px}.editorial-note h3,.original-caption h3{font-size:11px;color:var(--gold);font-weight:400;letter-spacing:.025em;margin:0 0 10px}
.editorial-note p{font-size:16px;line-height:1.7}.editorial-note .application{margin-top:15px}.application>span{color:var(--ink)}
.original-caption{margin-top:30px}.original-caption blockquote{font-size:15px;line-height:1.75;color:var(--g6);white-space:pre-line;overflow-wrap:anywhere;margin:0;padding:0;border:0}
.personal-actions{margin-top:28px;padding-top:12px;gap:24px}.personal-actions button{font-size:11px}
.personal-notes,.review-provenance{font-size:12px;color:var(--g5)}
.personal-notes summary,.review-provenance summary{min-height:40px;padding:9px 0;cursor:pointer}
.personal-notes label{display:block;margin:12px 0 6px}.personal-notes textarea{display:block;width:100%;background:#0b0b0b;border:1px solid var(--g3);border-radius:0;color:var(--ink);font:inherit;line-height:1.6;padding:12px;resize:vertical}.personal-notes p{margin:8px 0}.personal-notes .text-action{min-height:40px}
.review-provenance p{line-height:1.6;margin:8px 0}.review-provenance strong{font-weight:400;color:var(--ink)}
@media(min-width:821px){.native-reel{position:sticky;top:80px;align-self:start}}
@media(max-width:820px){.sheet-in{grid-template-columns:1fr;max-width:620px;gap:30px}.native-reel .video-stage{width:min(100%,calc(67dvh * var(--reel-ratio)))}.native-reel .player-note{width:min(100%,calc(67dvh * var(--reel-ratio)))}.editorial-note p{font-size:15px}.body h2{line-height:1.14}.original-caption{margin-top:25px}}


/* ===== 2026-11-13 · one collection, a simpler opened view, new motion (see README "Motion") ===== */

/* The opening: words rise out of a soft blur while app.js deals the first screen of work into place. */
#collectionTitle span{display:inline-block}
@keyframes rise-in{from{opacity:0;translate:0 26px;filter:blur(12px)}to{opacity:1;translate:0 0;filter:blur(0)}}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:no-preference){
 .bar .logo,.bar .site-nav{animation:fade-in 1s ease .1s both}
 #collectionTitle span{animation:rise-in 1s var(--ease) calc(.18s + var(--n) * 70ms) both}
 #intro>p{animation:rise-in 1s var(--ease) .52s both}
 #intro>.first-category{animation:rise-in .9s var(--ease) .66s both}
 html.opening .tile{z-index:1;will-change:translate,rotate,scale}
 html.opening .tile-open{animation:none}
 html.no-opening .bar .logo,html.no-opening .bar .site-nav,html.no-opening #intro>*,html.no-opening #collectionTitle span{animation:none}
}

/* The travelling picture: a clipped box whose pictures are placed by app.js. */
.flyer{position:fixed;z-index:60;margin:0;overflow:hidden;background:var(--card);transform-origin:0 0;pointer-events:none;will-change:transform;contain:layout style}
.flyer img{position:absolute;left:0;top:0;max-width:none;border-radius:0;transform-origin:0 0;will-change:transform,opacity;backface-visibility:hidden}

/* Opened view: credit, title, one note, one way out. */
.detail-kicker{display:block;margin-bottom:14px;font-size:12px;color:var(--g5)}
.body .notes{margin-top:20px;display:grid;gap:14px}
.body .notes p{font-size:16.5px;line-height:1.6;color:var(--ink);max-width:44ch}
.body .notes .try{color:var(--g6);padding-top:14px;border-top:1px solid var(--g3)}
.body .notes .try span{display:block;margin-bottom:4px;font-size:12px;color:var(--gold)}
.ways{display:grid;gap:6px;justify-items:start;margin-top:26px}
.ways .website-primary{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:17px 20px;background:#1a1812;border:1px solid #3a3323;border-radius:8px;font-size:15px;color:var(--white);transition:background .3s,border-color .3s}
.ways .website-primary:hover{background:#2a2418;border-color:#776440}
.ways .website-primary svg{width:14px;height:14px;flex:none;color:var(--gold)}
.ways .go{margin-top:6px;font-size:13.5px;color:var(--g6);border-bottom-color:transparent;font-weight:400}
.ways .go:hover{color:var(--white)}
.ways .go:only-child{color:var(--gold);font-size:15px;font-weight:500;border-bottom-color:rgba(198,168,110,.4)}
.step{margin-top:30px}

/* Posts with panels use the full width for the carousel. */
.sheet-in.wide{max-width:none;margin:0;min-height:100%;grid-template-columns:minmax(0,1fr) minmax(300px,380px);align-items:center;align-content:center;padding:72px var(--pad) 40px 0;gap:clamp(20px,3vw,48px)}
.shot:not(.video-shot)>img{max-height:min(780px,calc(100dvh - 150px))}

/* The reel: cover stays put, the player fades in over it at the same size. */
.video-stage{border-radius:10px;overflow:hidden;background:var(--card)}
.video-stage img{display:block;border-radius:0}
.play-reel{gap:10px;border-radius:999px;padding:0 22px 0 18px;height:48px;background:rgba(8,8,8,.72);border:1px solid rgba(255,255,255,.22);color:var(--white);font-size:14px;font-weight:500;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:background .25s,border-color .25s,scale .35s var(--ease)}
.play-reel svg{width:13px;height:13px}
.play-reel span{font-size:14px;line-height:1}
.play-reel:hover{background:rgba(8,8,8,.9);border-color:var(--gold);scale:1.04}
.play-reel.loading{pointer-events:none}
.play-reel.loading svg{animation:pulse 1s ease-in-out infinite}
@keyframes pulse{50%{opacity:.25}}
.video-player{background:transparent;border-radius:0;opacity:0;transition:opacity .45s ease}
.video-player.ready{opacity:1;background:#000}
.video-player iframe{display:block;color-scheme:normal}

@media(max-width:820px){
 .sheet-in.wide{grid-template-columns:1fr;padding:64px 0 40px;align-content:start;align-items:start;gap:22px}
 .sheet-in.wide .body{padding:0 var(--pad)}
 .shot:not(.video-shot)>img{width:100%;max-height:none}
 .body .notes p{max-width:none;font-size:16px}
 .ways{margin-top:22px}
}
@media(prefers-reduced-motion:reduce){.play-reel.loading svg{animation:none}.video-player{transition:none}}
/* Between phone and wide desktop a carousel takes the full row, with its words beneath. */
@media(min-width:821px) and (max-width:1180px){
 .sheet-in.wide{grid-template-columns:1fr;padding:64px 0 48px;align-content:start;gap:26px}
 .sheet-in.wide .reel{--rh:min(calc(100dvh - 330px),640px)}
 .sheet-in.wide .body{width:min(560px,calc(100% - 2 * var(--pad)));margin:0 auto}
}

/* The header: logo to the studio site, social links, always on screen (also over an opened reference). */
.bar{z-index:50;justify-content:space-between}
body.locked>.bar{visibility:visible}
.bar .logo{display:flex;align-items:center;min-height:44px;padding:0}
.social{display:flex;align-items:center;gap:4px;margin-right:-11px}
.social a{display:grid;place-items:center;width:44px;height:44px;color:var(--g6);transition:color .25s}
.social a:hover{color:var(--white)}
.social svg{width:18px;height:18px}
.sheet{top:var(--bar)}
.close{top:calc(var(--bar) + 14px)}
.sheet-in{padding-top:64px}
.sheet-in.wide{padding-top:56px}
@media(max-width:820px){
 .bar{justify-content:space-between}
 .bar .logo{justify-content:flex-start}
 .close{top:calc(var(--bar) + 10px)}
 .sheet-in,.sheet-in.wide{padding-top:60px}
}
@media(prefers-reduced-motion:no-preference){.bar .social{animation:fade-in 1s ease .1s both}html.no-opening .bar .social{animation:none}}
@media(min-width:1181px){.sheet-in.wide .reel{--rh:min(calc(100dvh - 250px),780px)}}
@media(min-width:821px){.video-stage img{max-height:min(740px,calc(100dvh - 190px))}.shot:not(.video-shot)>img{max-height:min(780px,calc(100dvh - 200px))}}

/* Opened pictures take their size from their proportions, so they hold their place before the file arrives
   (the travelling picture needs a real target to fly to). */
.shot #shotImg:not(.reel img){width:min(100%,calc(min(740px,100dvh - 190px) * var(--r)));height:auto;max-height:none}
/* One wide image: picture on top at full width, words beneath. */
.sheet-in.land{grid-template-columns:1fr;max-width:1080px;gap:30px;justify-items:center}
.sheet-in.land .shot{justify-self:center;width:100%;display:grid;justify-items:center}
.sheet-in.land .shot #shotImg{width:min(100%,calc((100dvh - 330px) * var(--r)))}
.sheet-in.land .body{width:min(620px,100%)}
@media(max-width:820px){
 .shot #shotImg:not(.reel img){width:min(100%,calc(68dvh * var(--r)));margin:auto}
 .sheet-in.land .shot #shotImg{width:100%}
}

/* The top of the page is the same composition at every width: centred headline and line, then the work. */
#collection .intro{text-align:center;padding:clamp(18px,3.4vw,52px) 0 0}
#collection .intro h1{max-width:14ch;margin-inline:auto}
#collection .intro p{max-width:54ch;margin-inline:auto;font-size:clamp(15px,1.25vw,18px)}
.first-category{text-align:left;margin-top:clamp(34px,4.4vw,60px)}

/* A reviewed lesson: one lead idea, then short named parts. The picture stays beside the words while they scroll. */
.body .lead{margin-top:18px;font-size:clamp(18px,1.5vw,21px);line-height:1.5;color:var(--white);max-width:40ch;text-wrap:pretty}
.lesson .part{margin-top:34px;padding-top:22px;border-top:1px solid var(--g3)}
.lesson .part h3{font-size:12px;font-weight:500;letter-spacing:.02em;color:var(--gold);margin-bottom:10px}
.lesson .part p{font-size:16px;line-height:1.65;color:var(--ink);max-width:46ch}
.steps{list-style:none;padding:0;margin:0;display:grid;gap:14px;counter-reset:s}
.steps li{counter-increment:s;display:grid;grid-template-columns:26px 1fr;font-size:16px;line-height:1.55;color:var(--ink);max-width:48ch}
.steps li::before{content:counter(s);color:var(--g5);font-variant-numeric:tabular-nums;font-size:13px;padding-top:2px}
.terms{display:grid;gap:12px}.terms dt{color:var(--white);font-weight:500;font-size:15px}.terms dd{margin:2px 0 0;font-size:15px;line-height:1.55;color:var(--g6);max-width:46ch}
.links{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.links a{display:inline-flex;align-items:center;gap:7px;color:var(--white);font-size:15px;line-height:1.35}
.links a svg{width:10px;height:10px;flex:none;color:var(--gold)}
.links a:hover{color:var(--gold)}
.links span{display:block;margin-top:3px;font-size:13.5px;line-height:1.5;color:var(--g5);max-width:46ch}
.links.sources a{font-size:14px;color:var(--g6)}
.lesson-fig{margin:18px 0 0}
.lesson-fig img{width:100%;height:auto;border-radius:8px;background:var(--card)}
.lesson-fig figcaption{margin-top:8px;font-size:13px;line-height:1.5;color:var(--g5)}
.lesson-fig figcaption span{color:var(--g4)}
.lesson .step{margin-top:38px}
@media(min-width:821px){
 .sheet-in:not(.wide):not(.land) .shot{position:sticky;top:64px;align-self:start}
}
@media(min-width:1181px){
 .sheet-in.wide:has(.lesson){align-items:start;align-content:start}
 .sheet-in.wide:has(.lesson) .shot{position:sticky;top:40px}
}

#collection .intro h1{max-width:17ch}
#collection .intro .intro-count{margin-top:14px;font-size:14px;color:var(--g5)}
@media(prefers-reduced-motion:no-preference){#intro>.intro-count{animation:rise-in 1s var(--ease) .6s both}}
#collection .intro h1{max-width:20ch}

/* ---------- the Ensotography site footer (same markup and values as ensotography.com) ---------- */
@font-face{font-family:"Space Mono";src:url(fonts/spacemono-latin.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
.site-footer{--fpad:clamp(24px,6vw,80px);--mono:"Space Mono",monospace;position:relative;z-index:1;margin-top:clamp(56px,8vw,110px);border-top:1px solid #141414;font-size:16px;line-height:1.7;color:#fff}
.site-footer .pad{padding-left:var(--fpad);padding-right:var(--fpad);max-width:1440px;margin-left:auto;margin-right:auto}
.footer-logo-row{padding-top:clamp(28px,4vh,44px);padding-bottom:clamp(28px,4vh,44px)}
.footer-logo-row img{display:block;height:clamp(40px,3.5vw,48px);width:auto;max-width:none;opacity:.7}
.footer-main{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;padding-top:clamp(36px,5vh,56px);padding-bottom:clamp(36px,5vh,56px);border-top:1px solid #141414}
.f-col{display:flex;flex-direction:column;gap:6px}
.f-col strong{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#fff;margin-bottom:4px}
.f-col a{font-size:13px;font-weight:300;color:#fff;transition:color .3s;text-align:left;padding:0}
.f-col a:hover{color:#C6A86E}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:clamp(16px,2vh,24px);padding-bottom:clamp(16px,2vh,24px);border-top:1px solid #141414}
.footer-bottom span{font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:#fff;opacity:.85}
@media(max-width:1024px){.footer-main{grid-template-columns:1fr 1fr}}
@media(max-width:768px){.footer-main{grid-template-columns:1fr;gap:28px}.footer-bottom{flex-direction:column;gap:6px;text-align:center}}

/* ---------- section counts: the number sits on the heading's own baseline, same size, quieter ---------- */
.cat-count{margin-left:0;font:inherit;letter-spacing:inherit;color:var(--g5);font-variant-numeric:tabular-nums;white-space:nowrap}
.grid-category h2 .cat-count{color:#6e6e6e}
/* the first section heading matches every other section heading */
#collection .intro .first-category{max-width:12ch;font-size:clamp(28px,3.6vw,52px);font-weight:400;line-height:1.04;letter-spacing:-.04em;color:var(--white)}
.first-category .cat-count{color:#6e6e6e}

/* ---------- smooth scroll (Lenis), desktop only; see the end of app.js ---------- */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}

/* ---------- headline: the two words the line turns on ---------- */
#collectionTitle .gold{color:var(--gold);font-weight:600}

/* ---------- top of the page: a faint night photograph that darkens to black before the work begins ---------- */
#collection{position:relative;display:flow-root}
#collection::before{content:"";position:absolute;z-index:0;left:0;right:0;top:0;height:var(--hero-h,420px);pointer-events:none;
  background:linear-gradient(rgba(0,0,0,.3),rgba(0,0,0,.3)),url(hero-office.jpg) center 70%/cover no-repeat;opacity:.92;
  -webkit-mask-image:linear-gradient(#000 0,#000 45%,transparent 100%);mask-image:linear-gradient(#000 0,#000 45%,transparent 100%)}
#collection .wall{z-index:1}
@media(max-width:820px){#collection::before{background-position:center,36% 70%}}
#collection .intro h1{max-width:19em}
/* more air in the hero: above the headline and before the first section */
#collection .intro{padding-top:clamp(56px,9vw,140px)}
#collection .intro .first-category{margin-top:clamp(64px,9vw,140px)}
/* Close: plain word, no box around it. Keyboard focus shows as an underline instead of an outline square. */
@media(min-width:821px){.close{background:none}}
.close:focus-visible{outline:0;color:var(--white);text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--gold)}

/* Instagram reels: the embed's name bar and caption block are cropped out, leaving the video. */
.video-player.ig iframe{position:absolute;left:0;width:100%;transform-origin:50% 0}
/* While the picture travels in, the empty stage shows nothing: no ghost frame waiting to be filled. */
.video-stage:has([data-away]){background:transparent}
.reel figure{position:relative}
.reel .moves{position:absolute;left:10px;bottom:10px;padding:5px 10px;border-radius:999px;background:rgba(8,8,8,.72);color:var(--white);font-size:12px;line-height:1.2;pointer-events:none}

/* phone headline: three lines broken by meaning, sized so the longest fits */
#collectionTitle .mb{display:none}
@media(max-width:520px){#collectionTitle .mb{display:inline}#collection .intro h1{font-size:min(8.3vw,40px);text-wrap:nowrap;max-width:none}}
#collection .intro p{text-wrap:balance}

/* a website picture is the way into the website */
.site-shot{cursor:pointer}.site-shot:focus-visible{outline:1.5px solid var(--gold);outline-offset:3px}

/* plain-text copy of the page, for readers and crawlers without scripts */
.js #prerender{display:none}
#prerender h2{margin-top:36px;font-size:22px;font-weight:500}
#prerender h3{margin-top:28px;font-size:13px;color:var(--gold);font-weight:500}
#prerender p,#prerender li{margin-top:12px;font-size:16px;line-height:1.6;color:var(--ink)}
#prerender ul,#prerender ol{padding-left:20px}
#prerender a{color:var(--white);border-bottom:1px solid var(--g3)}
#prerender img{max-width:100%;height:auto;border-radius:8px;margin-top:16px}