/* ═══════════════════════════════════════════════════════════════
   pages.css — page-specific section layouts
   1. index.html      — hero, autocodex teaser, projects, about,
                        testimonials, contact
   2. collection.html — filter bar, bento grid, cinematic scroll,
                        lightbox
   3. autocodex.html  — case study hero, sections, screens showcase
   Loads after tokens.css and base.css.
═══════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════
   1 · INDEX
═══════════════════════════════════════════════════════════════ */

/* ── HERO — DIPTYCH ──
   The v13 hero was a full-viewport name with two buttons: it announced
   nothing about the work and pushed every image below the fold. Two rounded
   panels do the introducing instead — design on the left, film on the right —
   so the dual practice is legible before a single scroll. Rounded, not a
   flush edge-to-edge split: the owner asked for panels, not a seam. */
#hero{padding:96px var(--gutter) 0}
.hero-id{display:flex;justify-content:space-between;align-items:baseline;
  padding:0 6px 14px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--fg3)}
.hero-name{color:var(--fg)}

.diptych{display:grid;grid-template-columns:58fr 42fr;gap:12px;
  height:calc(100svh - 190px);min-height:520px}
.dip{position:relative;overflow:hidden;border-radius:var(--r-xl);
  background:var(--surface);text-decoration:none;display:block;
  transition:opacity .5s var(--ease)}
.dip-media,.dip-slide{position:absolute;inset:0}
.dip-slide{opacity:0;transition:opacity 1.1s var(--ease)}
.dip-slide.is-on{opacity:1}
.dip img,.dip-video{width:100%;height:100%;object-fit:cover;display:block}
.dip::after{content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.62),transparent 55%)}
/* Both labels sit on that dark scrim over imagery, so they keep a literal
   light value in both themes — same reasoning as the --lb-* tokens. */
.dip-label,.dip-meta{position:absolute;z-index:2;color:#F2EBE1}
.dip-label{left:22px;bottom:46px;font-family:var(--display);font-size:clamp(22px,2.4vw,34px)}
.dip-meta{left:22px;bottom:24px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;opacity:.72}
.dip-play{position:absolute;z-index:2;top:50%;left:50%;transform:translate(-50%,-50%);
  width:56px;height:56px;border-radius:50%;border:1px solid rgba(242,235,225,.55);
  display:flex;align-items:center;justify-content:center;color:#F2EBE1;font-size:15px}

/* Pointer-only growth: :hover is unreliable on touch */
@media (hover:hover) and (min-width:821px){
  .diptych{transition:grid-template-columns .6s var(--expo)}
  .diptych:hover .dip{opacity:.72}
  .diptych:hover .dip:hover{opacity:1}
  .diptych:has(.dip-design:hover){grid-template-columns:68fr 32fr}
  .diptych:has(.dip-film:hover){grid-template-columns:32fr 68fr}
}
@media (max-width:820px){
  #hero{padding:88px var(--gutter) 0}
  .diptych{grid-template-columns:1fr;height:auto;min-height:0;gap:10px}
  .dip{height:44svh;min-height:280px}
  .dip-play{width:46px;height:46px}
}

/* ── AUTOCODEX TEASER ──
   Was a five-phone canvas plus a four-cell stat bar: more homepage than the
   four featured identities put together, for one of eleven projects. It is
   now a single calm row — one screen, two lines, two links — sitting just
   above the contact form. The case study is where the depth belongs. */
#autocodex{position:relative;z-index:10;padding:0 0 80px;overflow:hidden}
.acx-inner{max-width:1320px;margin:0 auto;padding:0 48px}
.acx-row{display:grid;grid-template-columns:200px 1fr;gap:clamp(28px,4vw,56px);align-items:center;
  padding-top:24px;border-top:1px solid var(--line)}
.acx-shot{border-radius:var(--r-lg);overflow:hidden;background:var(--surface);border:1px solid var(--line)}
.acx-shot picture{display:block}
.acx-shot img{display:block;width:100%;height:auto;aspect-ratio:9/16;object-fit:cover;object-position:top center}
.acx-title{font-family:var(--display);font-size:clamp(30px,3.6vw,46px);line-height:1;letter-spacing:.01em;color:var(--fg)}
.acx-title span{font-style:italic;color:var(--accent)}
.acx-desc{margin-top:14px;font-size:14px;font-weight:300;color:var(--fg2);line-height:1.85;max-width:46ch}
.acx-cta-row{margin-top:26px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}

/* ── PROJECTS ── */
#projects{padding:0 48px 120px;max-width:1320px;margin:0 auto}
.section-header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:32px;padding-top:80px;border-top:1px solid var(--line)}
.section-title{font-family:var(--display);font-style:italic;font-size:clamp(44px,6vw,80px);letter-spacing:.01em;margin-top:10px;color:var(--fg)}
.view-all{font-size:10px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--fg2);text-decoration:none;border:1px solid var(--line2);padding:9px 18px;border-radius:999px;background:rgba(255,255,255,.02);transition:color .22s,border-color .22s,background .22s;white-space:nowrap}
.view-all:hover{color:var(--fg);border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.04)}
.projects-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:3px;border-radius:20px;overflow:hidden;box-shadow:var(--shadow-lg)}
.project-card{position:relative;overflow:hidden;cursor:pointer;background:var(--surface);text-decoration:none;display:block}
.project-card:nth-child(1){grid-column:span 7}
.project-card:nth-child(2){grid-column:span 5}
.project-card:nth-child(3){grid-column:span 4}
.project-card:nth-child(4){grid-column:span 4}
.project-card:nth-child(5){grid-column:span 4}
.project-thumb{position:relative;width:100%;aspect-ratio:4/3;overflow:hidden;background:var(--bg2)}
.project-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .75s var(--expo)}
.project-card:hover .project-thumb img{transform:scale(1.06)}
.project-thumb-overlay{position:absolute;inset:0;background:rgba(var(--bg-rgb),0);transition:background .35s var(--ease);display:flex;align-items:center;justify-content:center}
.project-card:hover .project-thumb-overlay{background:rgba(var(--bg-rgb),.5)}
.project-open-btn{width:44px;height:44px;border-radius:50%;background:var(--accent-grad);background-size:180% 180%;background-position:0% 50%;display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.75);transition:opacity .3s var(--expo),transform .35s var(--expo);box-shadow:0 4px 20px rgba(var(--accent-rgb),.45)}
.project-card:hover .project-open-btn{opacity:1;transform:scale(1)}
.project-open-btn svg{width:18px;height:18px;stroke:var(--bg);fill:none;stroke-width:2.5}
.project-card-body{padding:16px 18px 18px;border-top:1px solid var(--line);background:var(--surface)}
.project-cat{font-size:9px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin-bottom:5px}
.project-title-text{font-family:var(--display);font-style:italic;font-size:1.1rem;letter-spacing:.01em;margin-bottom:4px;color:var(--fg)}
.project-desc{font-size:11px;color:var(--fg3);line-height:1.6}
.collection-callout{display:flex;justify-content:space-between;align-items:center;margin-top:16px;padding:28px 32px;background:var(--surface);border:1px solid var(--line);text-decoration:none;border-radius:16px;box-shadow:var(--shadow-sm);transition:border-color .3s,background .3s,box-shadow .3s,transform .3s}
.collection-callout:hover{border-color:rgba(var(--accent-rgb),.2);background:rgba(var(--accent-rgb),.03);box-shadow:var(--shadow-md),0 0 0 1px rgba(var(--accent-rgb),.07);transform:translateY(-2px)}
.callout-label{font-size:9px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:var(--accent);margin-bottom:5px}
.callout-title{font-family:var(--display);font-style:italic;font-size:clamp(22px,3vw,36px);letter-spacing:.01em;color:var(--fg)}
.callout-sub{font-size:12px;color:var(--fg2);margin-top:4px}
.btn-callout{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-fill-fg);background:var(--accent-grad);background-size:180% 180%;background-position:0% 50%;padding:13px 24px;border-radius:999px;white-space:nowrap;box-shadow:0 4px 16px rgba(var(--accent-rgb),.22);transition:opacity .2s,transform .2s;flex-shrink:0}
.collection-callout:hover .btn-callout{opacity:.88;transform:translateY(-1px)}

/* ── FILM BAND ──
   Deliberately the loudest band on the page after the hero: its own ground
   colour and roughly a third more vertical air than #projects or #about, so
   the switch from print to moving image reads as a change of register rather
   than one more section. */
#film-band{background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:clamp(96px,12vw,168px) 48px}
.fb-inner{max-width:1320px;margin:0 auto;display:flex;flex-direction:column;align-items:flex-start}
.fb-title{font-family:var(--display);font-size:clamp(40px,6vw,76px);line-height:1;letter-spacing:.01em;color:var(--fg)}
.fb-desc{margin-top:16px;font-size:15px;font-weight:300;line-height:1.8;color:var(--fg2);max-width:52ch}
.fb-main{position:relative;display:block;width:100%;margin:clamp(32px,4vw,52px) 0;
  border-radius:var(--r-xl);overflow:hidden;background:var(--surface)}
.fb-main img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.fb-main::after{content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.45),transparent 60%)}
/* Light on a dark scrim in both themes, like .dip-label. */
.fb-play{position:absolute;z-index:2;top:50%;left:50%;transform:translate(-50%,-50%);
  width:72px;height:72px;border-radius:50%;border:1px solid rgba(242,235,225,.55);
  display:flex;align-items:center;justify-content:center;color:#F2EBE1;font-size:18px;
  transition:background .3s var(--ease),transform .4s var(--expo)}
.fb-main:hover .fb-play{background:rgba(242,235,225,.14);transform:translate(-50%,-50%) scale(1.06)}

/* ── ABOUT ── */
#about{padding:120px 48px;max-width:1320px;margin:0 auto}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
.about-heading{font-family:var(--display);font-style:italic;font-size:clamp(48px,6vw,84px);line-height:.9;letter-spacing:.01em;margin-bottom:36px;color:var(--fg)}
.about-stats{display:flex;gap:0;border-top:1px solid var(--line)}
.stat-item{flex:1;padding:22px 0;border-right:1px solid var(--line);padding-right:22px;margin-right:22px}
.stat-item:last-child{border-right:none;padding-right:0;margin-right:0}
.stat-num{font-family:var(--display);font-size:clamp(2rem,4vw,3.2rem);letter-spacing:.02em;color:var(--fg);line-height:1}
.stat-num span{color:var(--accent);font-style:italic}
.stat-label{font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--fg3);margin-top:4px}
.about-bio{font-size:15px;font-weight:300;color:var(--fg2);line-height:1.9;margin-bottom:20px}
.about-bio strong{color:var(--fg);font-weight:500}
/* Eight centred pills read as tags on a job board. A plain list in two
   columns says the same thing and lets the bio above it stay the loudest
   element in the column. */
.skills-list{list-style:none;margin-top:32px;padding-top:22px;border-top:1px solid var(--line);
  display:grid;grid-template-columns:1fr 1fr;gap:0 28px}
.skills-list li{font-size:13px;font-weight:300;letter-spacing:.03em;line-height:2.15;color:var(--fg2)}

/* ── TESTIMONIALS ── */
#testimonials{padding:120px 48px;background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.testimonials-inner{max-width:1320px;margin:0 auto}
.testimonials-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:52px}
.testimonial-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:36px 32px;box-shadow:var(--shadow-sm);transition:border-color .25s,box-shadow .3s,transform .3s}
.testimonial-card:hover{border-color:rgba(var(--accent-rgb),.18);box-shadow:var(--shadow-md),0 0 0 1px rgba(var(--accent-rgb),.06);transform:translateY(-3px)}
.testimonial-text{font-size:14px;font-weight:300;line-height:1.85;color:var(--fg2);margin-bottom:24px}
.testimonial-author{display:flex;align-items:center;gap:12px}
.author-avatar{width:36px;height:36px;border-radius:50%;background:var(--accent-soft);border:1px solid rgba(var(--accent-rgb),.2);display:flex;align-items:center;justify-content:center;font-family:var(--display);font-style:italic;font-size:13px;color:var(--accent);flex-shrink:0}
.author-name{font-size:12px;font-weight:500;color:var(--fg);letter-spacing:.06em}
.author-role{font-size:10px;color:var(--fg3);letter-spacing:.1em;margin-top:2px}

/* ── CONTACT ── */
#contact{padding:120px 48px 80px;max-width:1320px;margin:0 auto}
.contact-inner{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
/* The heading spans both columns, so the form and the copy beside it start
   on the same line. Aligning the copy to the top of the section instead
   put it up beside the title; aligning it to the bottom (its original
   rule, from when this column also held the contact rows) stranded it
   below the form. It belongs level with the first input. */
.contact-head{grid-column:1 / -1;margin-bottom:8px}
.contact-heading{margin-bottom:0}
.contact-right{align-self:start}
.contact-heading{font-family:var(--display);font-size:clamp(44px,5.5vw,86px);line-height:.88;letter-spacing:.01em;margin-bottom:36px;color:var(--fg)}
.contact-heading span{font-style:italic;color:var(--accent)}
.contact-form{display:flex;flex-direction:column;gap:14px}
.cf-input{width:100%;background:var(--surface);border:1px solid var(--line2);border-radius:12px;padding:18px 22px;font-family:var(--text);font-size:15px;font-weight:300;color:var(--fg);outline:none;transition:border-color .25s,box-shadow .25s;resize:none}
.cf-input::placeholder{color:var(--fg3)}
.cf-input:focus{border-color:rgba(var(--accent-rgb),.45);box-shadow:0 0 0 4px rgba(var(--accent-rgb),.07)}
.cf-textarea{min-height:180px;line-height:1.75}
.cf-btn{align-self:flex-start;display:inline-flex;align-items:center;gap:12px;font-family:var(--text);font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-fill-fg);background:var(--accent-grad);background-size:180% 180%;background-position:0% 50%;border:none;padding:16px 34px;border-radius:999px;cursor:pointer;margin-top:6px;transition:gap .3s var(--expo),box-shadow .3s,transform .2s;box-shadow:0 4px 22px rgba(var(--accent-rgb),.3)}
.cf-btn:hover{gap:22px;transform:translateY(-2px);box-shadow:0 10px 38px rgba(var(--accent-rgb),.42)}
.cf-btn:disabled{opacity:.5;cursor:default;transform:none}
.cf-success{display:none;font-size:13px;color:var(--accent);padding:14px 0 0;letter-spacing:.02em}
.cf-success.show{display:block}
.contact-sub{font-size:15px;font-weight:300;color:var(--fg2);line-height:1.85;margin-bottom:0}
.contact-sub p{margin-bottom:14px}
.contact-sub p:last-child{margin-bottom:0}
.contact-channels{border-top:1px solid var(--line)}
.channel-row{display:flex;justify-content:space-between;align-items:center;padding:20px 0;border-bottom:1px solid var(--line);text-decoration:none;transition:padding-left .3s var(--expo)}
.channel-row:hover{padding-left:10px}
.channel-info{display:flex;flex-direction:column;gap:4px}
.channel-label{font-size:9px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:var(--fg3)}
.channel-value{font-size:14px;font-weight:400;color:var(--fg);letter-spacing:.02em}
.channel-arrow{color:var(--accent);font-size:16px;opacity:0;transform:translateX(-8px);transition:opacity .3s,transform .3s;flex-shrink:0}
.channel-row:hover .channel-arrow{opacity:1;transform:translateX(0)}

/* ── INDEX RESPONSIVE ── */
@media (max-width:900px){
  .acx-inner{padding:0 20px}
  .acx-row{grid-template-columns:150px 1fr;gap:24px}
  #film-band{padding:clamp(72px,14vw,110px) 20px}
  #about{padding:80px 20px}
  .about-grid{grid-template-columns:1fr;gap:36px}
  #projects{padding:0 20px 80px}
  .projects-grid{display:flex;flex-direction:column;gap:3px;border-radius:12px}
  .projects-grid .project-card{grid-column:unset}
  #testimonials{padding:80px 20px}
  .testimonials-grid{grid-template-columns:1fr;gap:12px}
  #contact{padding:80px 20px 60px}
  .contact-inner{grid-template-columns:1fr;gap:52px}
  .contact-right{position:static}
  .cf-textarea{min-height:160px}
}
@media (max-width:540px){
  .btn-primary,.btn-ghost{width:100%;justify-content:center;text-align:center}
  .acx-row{grid-template-columns:1fr;gap:22px}
  .acx-shot{max-width:180px}
  .skills-list{grid-template-columns:1fr}
  .section-title{font-size:clamp(36px,12vw,56px)}
  .fb-play{width:56px;height:56px;font-size:15px}
}


/* ═══════════════════════════════════════════════════════════════
   2 · COLLECTION
═══════════════════════════════════════════════════════════════ */

#page-header{padding:130px 48px 52px;display:flex;justify-content:space-between;align-items:flex-end;border-bottom:1px solid var(--line)}
.ph-left .ph-label{font-size:10px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--accent);margin-bottom:14px;display:flex;align-items:center;gap:10px}
.ph-label::before{content:'';width:18px;height:1px;background:var(--accent)}
.ph-title{font-family:var(--display);font-size:clamp(44px,8vw,88px);line-height:.9;letter-spacing:.02em;color:var(--fg)}
.ph-right{text-align:right}
.ph-count{font-family:var(--display);font-size:clamp(28px,5vw,52px);color:rgba(243,245,247,.05);line-height:1}
.ph-sub{font-size:12px;font-weight:300;color:var(--fg3);margin-top:6px;letter-spacing:.06em}

/* ── FILTER BAR ── */
#filter-bar{padding:16px 48px;border-bottom:1px solid rgba(255,255,255,.07);display:flex;gap:7px;flex-wrap:wrap;align-items:center;position:sticky;top:0;z-index:400;background:rgba(17,19,24,.55);backdrop-filter:blur(28px) saturate(170%);-webkit-backdrop-filter:blur(28px) saturate(170%)}
.flbl{font-size:9px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:var(--fg3);margin-right:4px}
.fbtn{font-size:9px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;padding:7px 16px;border:1px solid var(--line);background:transparent;color:var(--fg3);cursor:pointer;font-family:var(--text);border-radius:999px;transition:all .22s var(--expo)}
.fbtn:hover{border-color:rgba(var(--accent-rgb),.3);color:rgba(var(--accent-rgb),.85)}
.fbtn.active{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
#proj-count-label{margin-left:auto;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--fg3)}

/* ── BENTO ── */
#bento{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:auto;gap:16px;padding:24px 48px;background:transparent}
.bc{position:relative;overflow:hidden;cursor:pointer;background:rgba(var(--bg-rgb),.55);backdrop-filter:blur(20px) saturate(170%);-webkit-backdrop-filter:blur(20px) saturate(170%);opacity:0;transform:translateY(22px);transition:opacity .7s var(--expo),transform .7s var(--expo),box-shadow .35s;border-radius:16px;border:1px solid rgba(255,255,255,.07)}
.bc.vis{opacity:1;transform:translateY(0)}
.bc:hover{box-shadow:0 0 0 1px rgba(var(--accent-rgb),.22),0 8px 40px rgba(0,0,0,.4)}
.bc.s-hero{grid-column:span 8}.bc.s-hero .bc-img-wrap{aspect-ratio:16/9}
.bc.s-tall{grid-column:span 4}.bc.s-tall .bc-img-wrap{aspect-ratio:3/4}
.bc.s-wide{grid-column:span 7}.bc.s-wide .bc-img-wrap{aspect-ratio:4/3}
.bc.s-med{grid-column:span 5}.bc.s-med .bc-img-wrap{aspect-ratio:1/1}
.bc.s-sm{grid-column:span 4}.bc.s-sm .bc-img-wrap{aspect-ratio:4/3}
.bc.s-full{grid-column:span 12}.bc.s-full .bc-img-wrap{aspect-ratio:21/9}
.bc.s-text{grid-column:span 4;background:rgba(var(--bg-rgb),.55);backdrop-filter:blur(20px) saturate(170%);-webkit-backdrop-filter:blur(20px) saturate(170%);border:1px solid rgba(255,255,255,.07);display:flex;flex-direction:column;justify-content:space-between;padding:32px 28px;min-height:220px}
.bc.s-text2{grid-column:span 3;background:rgba(var(--bg-rgb),.55);backdrop-filter:blur(20px) saturate(170%);-webkit-backdrop-filter:blur(20px) saturate(170%);border:1px solid rgba(255,255,255,.07);display:flex;flex-direction:column;justify-content:space-between;padding:28px 24px;min-height:180px}
.bc.s-accent{grid-column:span 1;background:var(--accent-grad);background-size:180% 180%;background-position:0% 50%;display:flex;align-items:center;justify-content:center;min-height:180px}
.bc-img-wrap{position:relative;width:100%;overflow:hidden;flex-shrink:0}
.card-gallery{position:absolute;inset:0;width:100%;height:100%}
.card-gallery img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .72s var(--expo);will-change:opacity}
.card-gallery img.active{opacity:1}
.bc-img-wrap > img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .75s var(--expo);will-change:transform}
.bc:hover .bc-img-wrap > img{transform:scale(1.04)}
.bc:hover .card-gallery img.active{transform:scale(1.04);transition:transform .75s var(--expo),opacity .72s var(--expo)}
.gdots{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);display:flex;gap:6px;z-index:5}
.gdot{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.22);cursor:pointer;transition:background .2s,transform .2s}
.gdot.active{background:var(--accent);transform:scale(1.4)}
.bc-overlay{position:absolute;inset:0;z-index:3;background:linear-gradient(to top,rgba(17,19,24,.92) 0%,rgba(17,19,24,.12) 55%,transparent 100%);opacity:0;transition:opacity .35s var(--expo);display:flex;flex-direction:column;justify-content:flex-end;padding:22px}
.bc:hover .bc-overlay{opacity:1}
.ov-concept{font-size:12px;font-weight:300;color:var(--fg2);line-height:1.65;margin-bottom:14px;transform:translateY(8px);transition:transform .35s var(--expo)}
.bc:hover .ov-concept{transform:translateY(0)}
.ov-cta{display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);transform:translateY(8px);transition:transform .35s .04s var(--expo)}
.bc:hover .ov-cta{transform:translateY(0)}
.ov-cta::after{content:'→';transition:transform .2s}
.bc:hover .ov-cta::after{transform:translateX(3px)}
.bc-body{padding:16px 18px 18px;border-top:1px solid rgba(255,255,255,.08);background:transparent}
.bc-cat{font-size:9px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--accent);margin-bottom:5px}
.bc-title{font-family:var(--display);font-size:1.2rem;letter-spacing:.04em;color:var(--fg);margin-bottom:3px}
.bc-desc{font-size:11px;color:var(--fg3);line-height:1.6}
.bc-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}
.bc-tag{font-size:9px;letter-spacing:.11em;text-transform:uppercase;padding:3px 9px;border:1px solid var(--line);color:var(--fg3);border-radius:999px}
.tc-num{font-family:var(--display);font-size:2.8rem;color:rgba(243,245,247,.04);line-height:1;margin-bottom:6px}
.tc-label{font-size:9px;letter-spacing:.26em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.tc-title{font-family:var(--display);font-size:1.5rem;letter-spacing:.04em;line-height:1;margin-bottom:10px;color:var(--fg)}
.tc-body{font-size:12px;font-weight:300;color:var(--fg2);line-height:1.75}
.tc-meta{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg3)}
html.light .tc-meta{color:var(--fg2)}
.ac-inner{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--display);font-size:.85rem;letter-spacing:.3em;color:var(--bg)}
.bc.hidden{display:none}
.bc:nth-child(1){transition-delay:.04s}.bc:nth-child(2){transition-delay:.08s}
.bc:nth-child(3){transition-delay:.12s}.bc:nth-child(4){transition-delay:.16s}
.bc:nth-child(5){transition-delay:.2s}.bc:nth-child(6){transition-delay:.24s}
.bc:nth-child(7){transition-delay:.28s}.bc:nth-child(8){transition-delay:.32s}
.bc:nth-child(9){transition-delay:.36s}.bc:nth-child(10){transition-delay:.4s}

/* ── LIGHTBOX ── */
#lb{display:none;position:fixed;inset:0;background:rgba(11,13,18,.72);z-index:9990;align-items:center;justify-content:center;flex-direction:column;backdrop-filter:blur(30px) saturate(160%);-webkit-backdrop-filter:blur(30px) saturate(160%)}
#lb.open{display:flex}
#lb-inner{position:relative;display:flex;align-items:center;justify-content:center;gap:20px;width:100%;max-width:1060px;padding:0 72px;animation:lbIn .35s var(--expo) both}
@keyframes lbIn{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
#lb-wrap{flex:1;max-height:80svh;display:flex;align-items:center;justify-content:center;position:relative}
#lb-img{max-width:100%;max-height:78svh;object-fit:contain;display:block;border-radius:6px;transition:opacity .28s var(--expo);box-shadow:var(--shadow-lg)}
#lb-ph{width:520px;height:380px;background:var(--surface);border:1px solid rgba(242,235,225,.09);display:none;align-items:center;justify-content:center;flex-direction:column;gap:14px;border-radius:12px}
#lb-ph span{font-family:var(--display);font-size:2.5rem;color:var(--fg3)}
#lb-ph p{font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--fg3)}
.lb-arrow{flex-shrink:0;width:46px;height:46px;background:rgba(255,255,255,.08);backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);border:1px solid rgba(255,255,255,.16);color:rgba(245,238,230,.85);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .22s,color .22s,transform .28s var(--expo),background .22s;box-shadow:0 4px 18px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.12)}
.lb-arrow svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lb-arrow:hover{border-color:rgba(59,158,255,.6);color:var(--lb-accent);transform:scale(1.1);background:rgba(59,158,255,.18)}
.lb-arrow:active{transform:scale(.92)}
.lb-arrow.lb-hidden{opacity:0;pointer-events:none}
#lb-close{position:absolute;top:20px;right:24px;font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:rgba(245,238,230,.6);background:rgba(255,255,255,.06);backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);border:1px solid rgba(255,255,255,.12);border-radius:999px;cursor:pointer;font-family:var(--text);transition:color .2s,background .2s;padding:8px 16px}
#lb-close:hover{color:var(--lb-fg);background:rgba(255,255,255,.12)}
#lb-bottom{display:flex;flex-direction:column;align-items:center;gap:4px;padding:16px 0 0;width:100%;max-width:820px}
#lb-counter{font-size:9px;letter-spacing:.26em;text-transform:uppercase;color:rgba(245,238,230,.5);min-height:13px}
#lb-name{font-family:var(--display);font-size:1.45rem;letter-spacing:.06em;color:var(--lb-fg)}
#lb-cat{font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--lb-accent);margin-bottom:2px}
#lb-comment{width:100%;max-width:600px;border-top:1px solid rgba(245,238,230,.14);padding-top:14px;margin-top:3px}
#lb-comment-text{font-size:13px;font-weight:300;line-height:1.9;color:rgba(245,238,230,.92);font-style:italic;text-align:center}
#lb-comment-text:empty::before{content:'Project notes coming soon...';color:rgba(245,238,230,.45);font-size:11px;letter-spacing:.12em}

/* ── COLLECTION PERFORMANCE HINTS ── */
#bento-scene{contain:layout style}
#bento-sticky{will-change:transform;contain:layout style paint}

/* ── COLLECTION RESPONSIVE ── */
@media (max-width:1024px){
  #bento{grid-template-columns:repeat(6,1fr);gap:12px;padding:16px 24px}
  .bc{grid-column:span 3}
  .bc.s-hero,.bc.s-full{grid-column:span 6}
  .bc.s-tall{grid-column:span 3}
  .bc.s-wide{grid-column:span 4}
  .bc.s-med{grid-column:span 3}
  .bc.s-sm{grid-column:span 3}
  .bc.s-text{grid-column:span 3}
  .bc.s-text2{grid-column:span 3}
  .bc.s-accent{display:none}
}

/* ─ Mobile: single column ─ */
@media (max-width:768px){
  #page-header{padding:100px 20px 32px;flex-direction:column;gap:10px;align-items:flex-start}
  .ph-right{text-align:left}
  .ph-count{font-size:clamp(24px,8vw,40px)}

  #filter-bar{padding:12px 16px;gap:6px;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
  #filter-bar::-webkit-scrollbar{display:none}
  .flbl{display:none}
  .fbtn{flex-shrink:0;padding:6px 14px;font-size:8px}
  #proj-count-label{display:none}

  #bento{display:flex;flex-direction:column;gap:12px;padding:12px}
  #bento .bc{width:100%;grid-column:unset;flex-shrink:0;border-radius:14px}
  .bc.s-accent{display:none}

  #bento .bc .bc-img-wrap{aspect-ratio:4/3}
  .bc.s-text .bc-img-wrap,
  .bc.s-text2 .bc-img-wrap{display:none}

  .bc.s-text,.bc.s-text2{min-height:120px;padding:20px 16px}
  .tc-num{font-size:1.8rem}
  .tc-title{font-size:1.1rem}

  .bc-body{padding:14px 16px 16px}
  .bc-title{font-size:1rem}
  .bc-desc{font-size:11px;line-height:1.55}
  .bc-tags{margin-top:8px;gap:4px}
  .bc-tag{font-size:8px;padding:2px 7px}

  .bc-overlay{display:none}

  #lb-inner{flex-direction:column;padding:16px;gap:8px;max-width:100%;width:100%}
  #lb-wrap{max-height:52svh;width:100%}
  #lb-img{max-height:50svh;max-width:100%;width:100%;object-fit:contain}
  .lb-arrow{position:fixed;top:50%;transform:translateY(-50%);width:38px;height:38px;z-index:10000}
  #lb-prev{left:6px}
  #lb-next{right:6px}
  #lb-counter{font-size:8px}
  #lb-name{font-size:1.1rem}
  #lb-cat{font-size:8px}
  #lb-comment{padding-top:8px}
  #lb-comment-text{font-size:11px}
  #lb-close{top:14px;right:16px;font-size:13px;padding:10px 14px;background:rgba(0,0,0,.4);border-radius:99px}
}

/* ─ Small phones ─ */
@media (max-width:400px){
  #page-header{padding:88px 16px 24px}
  .ph-title{font-size:clamp(36px,14vw,52px)}
  .bc-body{padding:12px 14px 14px}
  #bento{gap:8px;padding:8px}
}

/* ─ Cinematic horizontal scroll — desktop only ─ */
@media (min-width:1025px){
  #bento-scene{position:relative}
  #bento-sticky{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;align-items:center;background:var(--bg);z-index:2}
  #bento{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:stretch;grid-template-columns:unset;height:calc(100svh - 110px);min-height:360px;width:max-content;gap:16px;padding:0 60px;background:transparent;will-change:transform;transition:transform .6s cubic-bezier(.16,1,.3,1)}
  #bento .bc{height:100%;grid-column:unset;flex-shrink:0;border-radius:16px;transform-origin:center center;will-change:transform,opacity}
  #bento .bc.s-full{width:clamp(300px,70vw,860px)}
  #bento .bc.s-hero{width:clamp(260px,52vw,640px)}
  #bento .bc.s-tall{width:clamp(170px,25vw,310px)}
  #bento .bc.s-wide{width:clamp(240px,44vw,540px)}
  #bento .bc.s-med{width:clamp(200px,33vw,400px)}
  #bento .bc.s-sm{width:clamp(170px,25vw,310px)}
  #bento .bc.s-text{width:clamp(180px,23vw,290px);display:flex}
  #bento .bc.s-text2{width:clamp(160px,20vw,260px);display:flex}
  #bento .bc.s-accent{display:none}
  #bento .bc .bc-img-wrap{aspect-ratio:unset;height:100%;flex:1;min-height:0}

  #bento-progress{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;z-index:600;opacity:0;transition:opacity .5s;pointer-events:none}
  #bento-progress.cin-vis{opacity:1}
  .bp-dot{width:4px;height:4px;border-radius:50%;background:rgba(var(--fg-rgb),.18);transition:background .35s,transform .35s;flex-shrink:0}
  .bp-dot.bp-active{background:var(--accent);transform:scale(1.7)}

  #bento-hint{position:fixed;bottom:22px;right:44px;z-index:600;opacity:0;transition:opacity .5s;pointer-events:none;display:flex;align-items:center;gap:7px;font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--fg3);font-family:var(--text)}
  #bento-hint.cin-vis{opacity:1}
  .bh-arrow{color:var(--accent);animation:bh-pulse 1.6s ease-in-out infinite;display:inline-block}
  @keyframes bh-pulse{0%,100%{transform:translateX(0);opacity:.5}50%{transform:translateX(5px);opacity:1}}

  #bento-ctr{position:fixed;top:76px;right:44px;z-index:600;opacity:0;transition:opacity .5s;pointer-events:none;font-size:10px;letter-spacing:.16em;color:var(--fg3);font-family:var(--display)}
  #bento-ctr.cin-vis{opacity:1}

  body.cin-mode .bc{transition:transform .4s cubic-bezier(.16,1,.3,1),opacity .4s}
}


/* ═══════════════════════════════════════════════════════════════
   3 · AUTOCODEX CASE STUDY
═══════════════════════════════════════════════════════════════ */

#acx-hero{min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding:0;overflow:hidden;position:relative;background:linear-gradient(180deg,var(--bg) 0%,var(--bg2) 100%)}
.acx-hero-bg{position:absolute;inset:0;background:radial-gradient(ellipse 60% 40% at 50% 20%,rgba(var(--accent-rgb),.05) 0%,transparent 70%),radial-gradient(ellipse 40% 60% at 80% 80%,rgba(var(--accent-rgb),.03) 0%,transparent 60%);pointer-events:none}
html.light .acx-hero-bg{opacity:.06}
.acx-hero-content{position:relative;z-index:2;padding:140px 48px 56px;max-width:1200px}
.acx-label{font-size:10px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--accent);margin-bottom:18px;display:flex;align-items:center;gap:10px}
.acx-label::before{content:'';width:18px;height:1px;background:var(--accent)}
.acx-hero-title{font-family:var(--display);font-size:clamp(64px,14vw,160px);line-height:.85;letter-spacing:.02em;margin-bottom:28px;color:var(--fg)}
.acx-hero-title em{color:transparent;-webkit-text-stroke:1px rgba(243,245,247,.12);font-style:normal}
.acx-hero-sub{font-size:clamp(14px,1.5vw,17px);font-weight:300;color:var(--fg2);max-width:500px;line-height:1.8;margin-bottom:40px}
.acx-hero-sub strong{color:var(--fg);font-weight:500}
.acx-hero-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:40px}
.acx-htag{font-size:9px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;padding:6px 14px;border:1px solid var(--line);color:var(--fg3);border-radius:999px;background:rgba(255,255,255,.02)}
.acx-live{display:inline-flex;align-items:center;gap:8px;font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.acx-live::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--accent);animation:blink 2s infinite;box-shadow:0 0 8px rgba(var(--accent-rgb),.6)}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.2}}
.phone-parade{position:relative;display:flex;gap:14px;align-items:flex-end;padding:0 48px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x mandatory}
.phone-parade::-webkit-scrollbar{display:none}
.phone-card{flex-shrink:0;background:var(--surface);border:1px solid var(--line);border-radius:28px;overflow:hidden;scroll-snap-align:center;transition:transform .5s var(--expo),box-shadow .4s;width:210px;box-shadow:var(--shadow-md)}
.phone-card:hover{transform:translateY(-14px);z-index:5;box-shadow:var(--shadow-lg),0 0 0 1px rgba(var(--accent-rgb),.12)}
.phone-card img{width:100%;display:block;border-radius:28px}
.phone-card.pc-hero{width:250px;transform:translateY(-28px)}
.phone-card.pc-hero:hover{transform:translateY(-42px)}
.phone-card.pc-mid{transform:translateY(-14px)}
.phone-card.pc-mid:hover{transform:translateY(-24px)}
.acx-divider{height:1px;background:var(--line);margin:0 48px}
.acx-section{padding:80px 48px;max-width:1200px;margin:0 auto}
.acx-section-label{font-size:10px;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:var(--accent);margin-bottom:14px;display:flex;align-items:center;gap:10px}
.acx-section-label::before{content:'';width:16px;height:1px;background:var(--accent)}
.acx-section-title{font-family:var(--display);font-size:clamp(32px,5vw,60px);letter-spacing:.03em;margin-bottom:40px;color:var(--fg)}
.concept-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.concept-body{font-size:15px;font-weight:300;color:var(--fg2);line-height:1.9}
.concept-body p{margin-bottom:20px}
.concept-body strong{color:var(--fg);font-weight:500}
.concept-aside{background:var(--surface);border:1px solid var(--line);padding:32px;border-radius:16px;box-shadow:var(--shadow-sm)}
.concept-aside-label{font-size:9px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--fg3);margin-bottom:14px}
.concept-aside-title{font-family:var(--display);font-size:1.8rem;letter-spacing:.06em;color:var(--accent);margin-bottom:14px}
.concept-aside-text{font-size:12px;color:var(--fg2);line-height:1.75}
.screens-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;align-items:start}
.screen-item{background:var(--surface);border:1px solid var(--line);border-radius:20px;overflow:hidden;transition:transform .4s var(--expo),box-shadow .4s;box-shadow:var(--shadow-sm)}
.screen-item:hover{transform:translateY(-6px);box-shadow:var(--shadow-md),0 0 0 1px rgba(var(--accent-rgb),.1)}
.screen-item img{width:100%;display:block}
.screen-item-label{padding:12px 16px;font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--fg3)}
.screen-item.featured{grid-column:span 2}
.ds-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
.ds-card{background:var(--surface);border:1px solid var(--line);padding:28px;border-radius:16px;box-shadow:var(--shadow-sm)}
.ds-card-label{font-size:9px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--fg3);margin-bottom:16px}
.color-swatches{display:flex;gap:8px;flex-wrap:wrap}
.swatch{width:38px;height:38px;border-radius:8px;border:1px solid rgba(255,255,255,.07)}
.type-row{margin-bottom:10px;border-bottom:1px solid var(--line);padding-bottom:10px}
.type-row:last-child{border-bottom:none;margin-bottom:0}
.type-name{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--fg3);margin-bottom:4px}
.type-sample-h{font-family:var(--display);font-size:1.8rem;letter-spacing:.06em;color:var(--fg)}
.type-sample-b{font-size:13px;font-weight:300;color:var(--fg2)}
.type-sample-s{font-size:10px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--fg3)}
.comp-list{display:flex;flex-direction:column;gap:8px}
.comp-item{background:var(--surface2);border:1px solid var(--line);padding:11px 14px;display:flex;justify-content:space-between;align-items:center;border-radius:8px}
.comp-name{font-size:11px;font-weight:500;color:var(--fg)}
.comp-status{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.acx-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin:0 48px;border-radius:12px;overflow:hidden}
.acx-stat-box{background:var(--surface);padding:36px 28px}
.acx-stat-n{font-family:var(--display);font-size:clamp(2.2rem,4.5vw,3.8rem);letter-spacing:.04em;color:var(--fg);line-height:1;margin-bottom:6px}
.acx-stat-n em{color:var(--accent);font-style:normal}
.acx-stat-l{font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--fg3)}

/* ── LIVE SITE SECTION ── */
#acx-live{position:relative;padding:120px 48px;text-align:center;overflow:hidden;border-top:1px solid var(--line)}
#acx-live::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 55% at 50% 60%,rgba(var(--accent-rgb),.07) 0%,transparent 70%);pointer-events:none}
.acx-live-eyebrow{font-size:9px;font-weight:600;letter-spacing:.32em;text-transform:uppercase;color:var(--accent);margin-bottom:28px;opacity:.8}
.acx-live-url{font-family:var(--display);font-size:clamp(28px,5vw,72px);color:var(--fg);letter-spacing:-.01em;line-height:1.1;margin-bottom:40px;transition:color .3s}
.acx-live-link{display:inline-flex;align-items:center;gap:14px;font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-fill-fg);background:var(--accent-grad);background-size:180% 180%;background-position:0% 50%;padding:16px 32px;border-radius:999px;text-decoration:none;box-shadow:0 6px 28px rgba(var(--accent-rgb),.3);transition:box-shadow .3s,transform .3s,gap .3s;position:relative;z-index:1}
.acx-live-link:hover{box-shadow:0 10px 40px rgba(var(--accent-rgb),.5);transform:translateY(-2px);gap:22px}
.acx-live-arrow{display:inline-block;transition:transform .3s cubic-bezier(.16,1,.3,1)}
.acx-live-link:hover .acx-live-arrow{transform:translateX(4px)}
.acx-live-pulse{display:inline-block;width:7px;height:7px;background:var(--accent);border-radius:50%;margin-right:4px;position:relative;vertical-align:middle}
.acx-live-pulse::after{content:'';position:absolute;inset:-3px;border-radius:50%;border:1.5px solid var(--accent);animation:live-ring 1.8s ease-out infinite}
@keyframes live-ring{0%{transform:scale(1);opacity:.6}100%{transform:scale(2.4);opacity:0}}

/* ── SCREENS SHOWCASE ── */
.scr-section{padding-bottom:24px}
.scr-showcase{margin-top:56px}
.scr-stage{display:grid;grid-template-columns:260px 1fr;gap:72px;align-items:center;margin-bottom:52px}
.scr-phone-wrap{position:relative;display:flex;justify-content:center;align-items:center;flex-shrink:0}
.scr-phone-wrap::before{content:'';position:absolute;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(var(--accent-rgb),.1) 0%,transparent 65%);pointer-events:none}
.scr-phone-frame{width:240px;border-radius:30px;border:1px solid var(--line2);overflow:hidden;box-shadow:0 40px 100px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.04);position:relative;z-index:1;background:var(--surface)}
.scr-phone-frame img{width:100%;height:auto;display:block;transition:opacity .3s ease}
.scr-panel{display:flex;flex-direction:column;justify-content:center}
.scr-eyebrow{font-size:9px;font-weight:600;letter-spacing:.32em;text-transform:uppercase;color:var(--fg3);margin-bottom:24px;display:flex;align-items:center;gap:10px}
.scr-eyebrow::before{content:'';width:20px;height:1px;background:var(--line2)}
.scr-eyebrow b{color:var(--accent);font-weight:700;font-family:inherit}
.scr-text-wrap{transition:opacity .25s ease,transform .25s ease}
.scr-text-wrap.scr-fade{opacity:0;transform:translateY(8px)}
.scr-panel-title{font-family:var(--display);font-size:clamp(26px,3.2vw,44px);line-height:1.05;color:var(--fg);margin-bottom:16px}
.scr-panel-desc{font-size:13.5px;font-weight:300;color:var(--fg2);line-height:1.9;max-width:360px;margin-bottom:40px}
.scr-nav-row{display:flex;align-items:center;gap:10px}
.scr-nav-btn{width:44px;height:44px;border:1px solid var(--line2);border-radius:50%;background:transparent;color:var(--fg2);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color .2s,border-color .2s,background .2s;font-family:inherit;line-height:1}
.scr-nav-btn:hover{color:var(--fg);border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.04)}
.scr-strip{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-bottom:14px}
.scr-thumb{border-radius:11px;overflow:hidden;border:1px solid var(--line);cursor:pointer;opacity:.25;transition:opacity .3s,border-color .3s,transform .35s var(--expo)}
.scr-thumb img{width:100%;height:auto;display:block;pointer-events:none}
.scr-thumb:hover{opacity:.6;transform:translateY(-4px)}
.scr-thumb.is-active{opacity:1;border-color:rgba(var(--accent-rgb),.45);box-shadow:0 0 0 1px rgba(var(--accent-rgb),.12)}
.scr-progress{height:1px;background:var(--line);overflow:hidden;border-radius:1px}
.scr-progress-fill{height:100%;background:var(--accent);width:0%;transition:width 4.5s linear}

/* ── AUTOCODEX RESPONSIVE ── */
@media (max-width:900px){
  .acx-hero-content{padding:90px 20px 32px}
  .acx-hero-title{font-size:clamp(52px,14vw,90px)}
  .acx-hero-sub{font-size:14px}
  .phone-parade{padding:0 16px;gap:10px}
  .phone-card{width:160px;border-radius:22px}
  .phone-card.pc-hero{width:190px;transform:translateY(-16px)}
  .phone-card.pc-mid{transform:translateY(-8px)}
  .acx-stats{grid-template-columns:1fr 1fr;margin:0 20px}
  .acx-stat-box{padding:28px 20px}
  .acx-section{padding:56px 20px}
  .concept-grid{grid-template-columns:1fr;gap:28px}
  .screens-grid{grid-template-columns:1fr 1fr;gap:10px}
  .screen-item.featured{grid-column:span 1}
  .ds-grid{grid-template-columns:1fr;gap:16px}
  #acx-live{padding:80px 24px}
  .acx-divider{margin:0 20px}
  .scr-stage{grid-template-columns:200px 1fr;gap:44px}
  .scr-phone-frame{width:200px}
}
@media (max-width:768px){
  .scr-stage{grid-template-columns:1fr;gap:36px}
  .scr-phone-frame{width:200px;margin:0 auto}
  .scr-phone-wrap::before{width:260px;height:260px}
}
@media (max-width:540px){
  .acx-hero-title{font-size:clamp(42px,16vw,68px)}
  .acx-hero-content{padding:80px 16px 24px}
  .phone-parade{gap:8px;padding:0 12px}
  .phone-card{width:130px;border-radius:18px}
  .phone-card.pc-hero{width:155px;transform:translateY(-8px)}
  .phone-card.pc-mid{transform:none}
  .acx-stats{grid-template-columns:1fr;margin:0 16px}
  .acx-section{padding:44px 16px}
  .screens-grid{grid-template-columns:1fr}
  .screen-item.featured{grid-column:span 1}
  .acx-hero-tags{gap:6px}
  .acx-htag{padding:4px 10px;font-size:8px}
}
@media (max-width:480px){
  .scr-phone-frame{width:150px}
  .scr-strip{gap:5px}
  .scr-thumb{border-radius:7px}
}


/* ═══════════════════════════════════════════════════════════════
   4 · GENERATED PAGES — index selected work, work.html, work/*.html
   Markup comes from _build/lib/sections.js. Layout only; colour,
   radius and easing all come from tokens.css.
═══════════════════════════════════════════════════════════════ */

/* The nav pill is fixed at top:18px and ~56px tall. */
.page-work #main,.page-project #main{padding-top:104px}

/* ── FOOTER CHANNELS (partials.js footer — every generated page) ── */
.foot-channels{display:flex;flex-wrap:wrap;gap:10px}
.foot-channel{display:flex;flex-direction:column;gap:3px;text-decoration:none;padding:10px 16px;border:1px solid var(--line);border-radius:var(--r-md);transition:border-color .22s,background .22s}
.foot-channel:hover{border-color:var(--line2);background:var(--accent-soft)}
.foot-channel span:first-child{font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--fg3)}
.foot-channel span:last-child{font-size:12px;color:var(--fg2)}
.foot-copy{font-size:10px;letter-spacing:.14em;color:var(--fg3)}


/* ═══ 4.1 · SELECTED WORK (index.html) ═══════════════════════ */
/* index.html's .projects-grid is a 12-column grid with a panel frame, built
   for the old .project-card. Rows dropped into it would each land in a single
   1/12 column. `grid-column:1/-1` fixes that everywhere; the :has() rule then
   drops the panel chrome where supported, so the two rules degrade in order. */
.projects-grid .sw-row{grid-column:1/-1}
.projects-grid:has(.sw-row){display:block;gap:0;border-radius:0;overflow:visible;box-shadow:none}

.sw-row{display:flex;align-items:center;gap:clamp(24px,4vw,56px);text-decoration:none;padding:clamp(24px,3vw,40px) 0;border-bottom:1px solid var(--line)}
.sw-row.is-right{flex-direction:row-reverse}
.sw-row:last-child{border-bottom:0}
.sw-img{flex:0 0 62%;min-width:520px;overflow:hidden;border-radius:var(--r-lg);background:var(--surface)}
.sw-img picture{display:block}
.sw-img img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;transition:transform .7s var(--expo)}
.sw-row:hover .sw-img img{transform:scale(1.035)}
.sw-txt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:8px}
.sw-cat{font-size:9px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:var(--accent)}
.sw-name{font-family:var(--display);font-size:clamp(28px,3.4vw,46px);font-weight:400;line-height:1.05;color:var(--fg)}
.sw-sub{font-size:14px;line-height:1.65;color:var(--fg2);max-width:38ch}

@media (max-width:820px){
  .sw-row,.sw-row.is-right{flex-direction:column;align-items:stretch;gap:18px}
  .sw-img{flex:1 1 auto;min-width:0}
}


/* ═══ 4.2 · WORK INDEX (work.html) ═══════════════════════════ */
.work-head{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,4vw,48px) clamp(24px,4vw,40px)}
.work-title{font-family:var(--display);font-size:clamp(44px,7vw,86px);font-weight:400;line-height:1;color:var(--fg)}
.work-sub{margin-top:12px;font-size:15px;line-height:1.7;color:var(--fg2);max-width:48ch}

/* collection.html's #filter-bar rule hard-codes a dark backdrop and sticks to
   top:0, which would tuck it under the fixed nav. Re-point both at tokens. */
#filter-bar.work-filters{position:static;display:flex;flex-wrap:wrap;align-items:center;gap:7px;
  padding:12px clamp(20px,4vw,48px);border-bottom:1px solid var(--line);
  background:rgba(var(--bg-rgb),.72);backdrop-filter:blur(28px) saturate(170%);-webkit-backdrop-filter:blur(28px) saturate(170%)}
.work-filters .flbl{font-size:9px;letter-spacing:.26em;text-transform:uppercase;color:var(--fg3);margin-right:6px}

.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,26px);
  max-width:var(--maxw);margin:0 auto;padding:clamp(24px,4vw,44px) clamp(20px,4vw,48px) 72px}
/* Every cell is identical: a fixed 4:3 image plus a body that stretches, so no
   project ever renders squeezed relative to its neighbours. */
.wc{display:flex;flex-direction:column;text-decoration:none;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  transition:border-color .28s,transform .5s var(--expo),box-shadow .5s var(--expo)}
.wc:hover{border-color:var(--line2);transform:translateY(-4px);box-shadow:var(--shadow-md)}
.wc[hidden]{display:none}
.wc-img{position:relative;width:100%;aspect-ratio:4/3;overflow:hidden;background:var(--surface2)}
.wc-img picture{display:block;width:100%;height:100%}
.wc-img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .7s var(--expo)}
.wc:hover .wc-img img{transform:scale(1.05)}
.wc-body{display:flex;flex-direction:column;gap:6px;padding:18px 20px 22px;flex:1 1 auto}
.wc-cat{font-size:9px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--accent)}
.wc-name{font-family:var(--display);font-size:22px;font-weight:400;line-height:1.15;color:var(--fg)}
.wc-sub{font-size:13px;line-height:1.6;color:var(--fg2)}

@media (max-width:820px){
  .work-grid{grid-template-columns:repeat(2,1fr)}
  #filter-bar.work-filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  #filter-bar.work-filters::-webkit-scrollbar{display:none}
  .work-filters .fbtn{flex-shrink:0}
}
@media (max-width:560px){
  .work-grid{grid-template-columns:1fr}
}


/* ═══ 4.3 · PROJECT PAGE (work/*.html) ═══════════════════════ */
.page-project #main{max-width:var(--maxw);margin:0 auto;padding-left:clamp(20px,4vw,48px);padding-right:clamp(20px,4vw,48px);padding-bottom:80px}

.pp-hero{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--surface)}
.pp-hero picture{display:block}
.pp-hero img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
/* The scrim is always dark, so these two keep literal light values in both
   themes — same reasoning as the --lb-* tokens. */
.pp-hero-txt{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:8px;
  padding:clamp(20px,4vw,44px);background:linear-gradient(to top,rgba(0,0,0,.78),rgba(0,0,0,.25) 55%,transparent)}
.pp-cat{font-size:9px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:var(--lb-accent)}
.pp-title{font-family:var(--display);font-size:clamp(34px,6vw,72px);font-weight:400;line-height:1;color:var(--lb-fg)}
.pp-sub{font-size:15px;line-height:1.6;color:var(--lb-fg-dim)}

.pp-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,3vw,32px);
  padding:clamp(24px,3.5vw,40px) 0;border-bottom:1px solid var(--line)}
.pp-meta dt{font-size:9px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--fg3);margin-bottom:8px}
.pp-meta dd{font-size:14px;line-height:1.7;color:var(--fg)}
.pp-meta ul{list-style:none;display:flex;flex-direction:column;gap:2px}

.pp-h{font-size:10px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.pp-brief,.pp-solution{padding:clamp(28px,4vw,48px) 0 0}
.pp-brief p,.pp-solution p{font-size:clamp(16px,1.5vw,19px);line-height:1.75;color:var(--fg2);max-width:62ch}

.pp-gallery{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(12px,1.6vw,22px);margin-top:clamp(36px,5vw,64px)}
.pp-fig{grid-column:span 12;margin:0;border-radius:var(--r-md);overflow:hidden;background:var(--surface);border:1px solid var(--line);transition:border-color .28s}
.pp-fig:hover,.pp-fig:focus-visible{border-color:var(--line2)}
.pp-fig picture{display:block}
.pp-fig img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;transition:transform .7s var(--expo)}
.pp-fig:hover img{transform:scale(1.03)}
.pp-fig figcaption{padding:12px 16px 14px;font-size:12px;line-height:1.6;color:var(--fg3)}
.pp-fig.span-full{grid-column:span 12}
.pp-fig.span-full img{aspect-ratio:16/9}
.pp-fig.span-half{grid-column:span 6}
.pp-fig.span-third{grid-column:span 4}
.pp-fig.span-tall{grid-column:span 6}
.pp-fig.span-tall img{aspect-ratio:3/4}

.pp-insitu{margin-top:clamp(40px,5vw,72px)}
.pp-insitu-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(12px,1.6vw,22px)}
.pp-insitu-grid .pp-fig{grid-column:auto}

.pp-next{display:flex;flex-direction:column;gap:8px;align-items:center;text-align:center;text-decoration:none;
  margin-top:clamp(48px,6vw,88px);padding:clamp(32px,5vw,60px) 24px;
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);
  transition:border-color .28s,background .28s}
.pp-next:hover{border-color:var(--line2);background:var(--surface2)}
.pp-next span{font-size:9px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--fg3)}
.pp-next strong{font-family:var(--display);font-size:clamp(28px,4vw,52px);font-weight:400;line-height:1.05;color:var(--fg)}

@media (max-width:820px){
  .pp-meta{grid-template-columns:1fr;gap:18px}
  .pp-fig,.pp-fig.span-full,.pp-fig.span-half,.pp-fig.span-third,.pp-fig.span-tall{grid-column:span 12}
  .pp-fig.span-tall img{aspect-ratio:4/3}
}

/* ── FILM PAGE ───────────────────────────────────────────────
   Every card is currently an unfilled slot. A slot is styled as a quiet
   empty frame rather than a play button that does nothing — the disabled
   state is the honest one until Thanos supplies footage. */
.film-head{max-width:var(--maxw);margin:0 auto;padding:150px var(--gutter) 48px}
.film-title{font-family:var(--display);font-size:clamp(48px,7vw,92px);line-height:.92;
  letter-spacing:.01em;color:var(--fg)}
.film-sub{margin-top:14px;max-width:52ch;font-size:15px;font-weight:300;
  line-height:1.8;color:var(--fg2)}

.film-grid{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter) 96px;
  display:grid;grid-template-columns:repeat(2,1fr);gap:18px}

.fc{appearance:none;background:transparent;border:0;padding:0;margin:0;
  font:inherit;color:inherit;text-align:left;display:block;width:100%;
  cursor:pointer;border-radius:var(--r-lg);overflow:hidden}
.fc:first-child{grid-column:1 / -1}
.fc-img{position:relative;aspect-ratio:16/9;overflow:hidden;
  border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line)}
.fc-img img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s var(--expo)}
.fc:not(.is-placeholder):hover .fc-img img{transform:scale(1.04)}
.fc-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:60px;height:60px;border-radius:50%;border:1px solid rgba(242,235,225,.55);
  display:flex;align-items:center;justify-content:center;color:#F2EBE1;font-size:16px;
  background:rgba(0,0,0,.28);backdrop-filter:blur(6px)}
.fc-body{display:flex;align-items:baseline;gap:14px;padding:14px 4px 0}
.fc-kind{font-size:9px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent)}
.fc-name{font-family:var(--display);font-size:1.15rem;letter-spacing:.01em;color:var(--fg);
  font-weight:400}
.fc-dur{margin-left:auto;font-size:11px;color:var(--fg3);letter-spacing:.08em}

/* Unfilled slot: no play affordance, nothing to click, visibly waiting */
.fc.is-placeholder{cursor:default}
.fc.is-placeholder .fc-img{border-style:dashed;border-color:var(--line2)}
.fc.is-placeholder .fc-img img{opacity:.35}
.fc.is-placeholder .fc-name,.fc.is-placeholder .fc-kind{color:var(--fg3)}
.fc.is-placeholder .fc-img::after{content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(45deg,transparent,transparent 14px,
    rgba(var(--fg-rgb),.02) 14px,rgba(var(--fg-rgb),.02) 28px)}

@media (max-width:820px){
  .film-head{padding:120px var(--gutter) 36px}
  .film-grid{grid-template-columns:1fr;gap:14px}
  .fc:first-child{grid-column:auto}
  .fc-play{width:48px;height:48px}
}

/* At 320px the section header's title and its "view all" pill cannot sit on one
   row: the pill is white-space:nowrap, so it pushed the body 10px wide. Let the
   header wrap instead of forcing a horizontal scrollbar on the whole page. */
@media (max-width:560px){
  .section-header{flex-wrap:wrap;gap:18px;padding-top:56px}
  .section-header > div{flex:1 1 100%}
  .view-all{white-space:normal}
}

/* ── Spacing and border corrections ──────────────────────────
   Both of these were v13 rules that never got the v14 treatment. */

/* #autocodex carried padding:0 0 80px — no top padding at all — so it sat
   flush against the film band's 154px and read as cramped. Give it the same
   vertical rhythm as its neighbours. */
#autocodex{padding:110px 0 96px}
@media (max-width:820px){ #autocodex{padding:72px 0 64px} }

/* The callout kept a hardcoded 16px radius and 28/32 padding while everything
   around it moved to the token scale, and its CTA sat 1px off the padding
   edge with nothing to breathe into. */
.collection-callout{
  margin-top:20px;
  padding:30px 32px;
  gap:32px;
  border-radius:var(--r-lg);
  align-items:center}
.collection-callout > div{min-width:0}
.btn-callout{flex:0 0 auto;white-space:nowrap;border-radius:var(--r-pill)}
.callout-sub{margin-top:6px}

@media (max-width:700px){
  .collection-callout{flex-direction:column;align-items:flex-start;gap:22px;padding:26px 24px}
  .btn-callout{width:100%;text-align:center}
}

/* ── AutoCodex hero: the mark, faint ─────────────────────────
   Sits behind the title as a watermark. aria-hidden and empty alt because
   it repeats the wordmark already set in the <h1> — announcing it twice
   would be noise for a screen reader. */
.acx-hero-mark{position:absolute;top:50%;left:50%;transform:translate(-50%,-58%);
  width:min(78%,900px);z-index:0;pointer-events:none;user-select:none}
.acx-hero-mark img{width:100%;height:auto;display:block;opacity:.05}
html.light .acx-hero-mark img{opacity:.09;filter:invert(1)}
.acx-hero-content{position:relative;z-index:2}

/* The word CODEX is drawn as an outline. Its stroke was a fixed near-white,
   which is invisible on the light theme's cream ground — the reported bug.
   Token-driven now, so it flips with the theme. */
.acx-hero-title em{
  color:transparent;
  -webkit-text-stroke:1.5px rgba(var(--fg-rgb),.30);
  font-style:normal}
html.light .acx-hero-title em{-webkit-text-stroke-width:1.5px}

@media (max-width:820px){
  .acx-hero-mark{width:min(90%,520px);transform:translate(-50%,-62%)}
  .acx-hero-title em{-webkit-text-stroke-width:1.2px}
}

/* ── YouTube band ────────────────────────────────────────────
   Sits between the film band and AutoCodex: the channel is where the film
   work actually lives, so it belongs with it rather than interrupting the
   graphic work higher up.

   Everything is the site's own glass and radii; the only borrowed colour is
   the YouTube red on the two glyphs, which is the point — it has to be
   recognisable at a glance. */
/* The film band above closes with a hairline; without top padding the
   glass card sat 20px under it and read as stuck to the divider. */
#youtube{padding:104px var(--gutter) 110px}
.yt-inner{max-width:var(--maxw);margin:0 auto}

.yt-band{
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  background:rgba(var(--bg-rgb),.5);
  backdrop-filter:blur(28px) saturate(170%);
  -webkit-backdrop-filter:blur(28px) saturate(170%);
  box-shadow:var(--shadow-md),inset 0 1px 0 rgba(var(--fg-rgb),.07);
  padding:26px;
  display:grid;gap:22px}

.yt-head{display:flex;align-items:center;gap:12px}
.yt-mark{display:flex;align-items:center;line-height:0}
.yt-label{font-family:var(--mono);font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--fg2)}
.yt-handle{margin-left:auto;font-family:var(--mono);font-size:11px;
  letter-spacing:.06em;color:var(--fg3);text-decoration:none;
  transition:color .22s var(--ease)}
.yt-handle:hover{color:var(--accent)}

.yt-player{
  appearance:none;border:0;padding:0;margin:0;background:transparent;
  display:block;width:100%;position:relative;cursor:pointer;
  border-radius:var(--r-lg);overflow:hidden;aspect-ratio:16/9;
  transition:transform .5s var(--expo)}
.yt-thumb{position:absolute;inset:0;display:block}
.yt-thumb img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .8s var(--expo),filter .4s var(--ease)}
.yt-player::after{content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.35),transparent 55%);
  transition:opacity .4s var(--ease)}

.yt-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  z-index:2;width:78px;height:56px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(var(--bg-rgb),.55);
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  border:1px solid rgba(var(--fg-rgb),.16);
  box-shadow:0 12px 34px rgba(0,0,0,.32);
  transition:transform .5s var(--expo),background .3s var(--ease)}

@media (hover:hover){
  .yt-player:hover .yt-thumb img{transform:scale(1.03)}
  .yt-player:hover .yt-play{transform:translate(-50%,-50%) scale(1.07);
    background:rgba(var(--bg-rgb),.72)}
}
.yt-player:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* Once playing, the iframe replaces the thumbnail inside the same box, so
   nothing on the page shifts. */
.yt-player.is-playing{cursor:default}
.yt-player.is-playing .yt-play,
.yt-player.is-playing::after{opacity:0;pointer-events:none}
.yt-player iframe{position:absolute;inset:0;width:100%;height:100%;border:0;
  border-radius:var(--r-lg);z-index:3}

.yt-foot{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.yt-title{font-family:var(--display);font-size:clamp(17px,2vw,22px);
  font-weight:500;letter-spacing:-.01em;color:var(--fg);margin:0;flex:1 1 320px}
.yt-cta{font-family:var(--mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--fg2);text-decoration:none;
  border:1px solid var(--line2);border-radius:var(--r-pill);
  padding:12px 20px;white-space:nowrap;
  transition:color .22s,border-color .22s,background .22s}
.yt-cta:hover{color:var(--fg);border-color:rgba(var(--fg-rgb),.3);
  background:rgba(var(--fg-rgb),.05)}

@media (max-width:820px){
  #youtube{padding:64px var(--gutter) 72px}
  .yt-band{padding:18px;gap:18px;border-radius:var(--r-lg)}
  .yt-play{width:64px;height:46px;border-radius:13px}
  .yt-foot{gap:16px}
  .yt-cta{width:100%;text-align:center}
}

/* ── Elsewhere strip ─────────────────────────────────────────
   Between the hero and the work: the channel, and quietly beside it the
   app. The two halves are deliberately unequal — the channel is current
   and carries the buttons, the app is finished work with its own page and
   gets one line and a text link. */
/* The hero ends flush; without this the strip sat directly against it. */
#elsewhere{padding:78px var(--gutter) 0}
.els-inner{max-width:var(--maxw);margin:0 auto}

.els-strip{
  display:grid;grid-template-columns:1.55fr 1fr;
  border:1px solid var(--line);border-radius:var(--r-xl);
  background:rgba(var(--bg-rgb),.5);
  backdrop-filter:blur(30px) saturate(180%);
  -webkit-backdrop-filter:blur(30px) saturate(180%);
  box-shadow:var(--shadow-md),inset 0 1px 0 rgba(var(--fg-rgb),.08);
  overflow:hidden}

.els-item{display:flex;align-items:center;gap:18px;padding:24px 26px;min-width:0}
.els-acx{border-left:1px solid var(--line);background:rgba(var(--fg-rgb),.015)}

.els-mark{flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:14px;
  background:rgba(var(--fg-rgb),.05);border:1px solid rgba(var(--fg-rgb),.09)}
.els-mark.is-sm{width:40px;height:40px;border-radius:12px;padding:8px}
.els-mark.is-sm img{width:100%;height:auto;display:block;opacity:.72}
html.light .els-mark.is-sm img{filter:invert(1)}

.els-txt{min-width:0;flex:1 1 auto}
.els-kicker{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--accent);margin-bottom:5px}
.els-title{font-family:var(--display);font-size:19px;font-weight:600;
  letter-spacing:-.015em;color:var(--fg);margin:0}
.els-title.is-sm{font-size:16px;font-weight:500;color:var(--fg2)}
.els-sub{font-size:12px;line-height:1.6;color:var(--fg3);margin:4px 0 0}

.els-actions{flex:0 0 auto;display:flex;gap:8px;align-items:center}
.els-btn{font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;text-decoration:none;white-space:nowrap;
  padding:11px 17px;border-radius:var(--r-pill);
  border:1px solid var(--line2);color:var(--fg2);
  transition:color .22s,border-color .22s,background .22s,transform .3s var(--expo)}
.els-btn:hover{color:var(--fg);border-color:rgba(var(--fg-rgb),.3);
  background:rgba(var(--fg-rgb),.05);transform:translateY(-1px)}
.els-btn.is-primary{background:var(--accent-grad);background-size:180% 180%;background-position:0% 50%;border-color:transparent;color:var(--accent-fill-fg)}
/* Hover is handled by the shared accent rule in base.css. Re-declaring
   background-position here would pin it back to 0% and cancel the travel,
   because pages.css loads after base.css. */
.els-btn.is-primary:hover{color:var(--accent-fill-fg)}

.els-link{flex:0 0 auto;font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--fg3);text-decoration:none;white-space:nowrap;
  border-bottom:1px solid transparent;padding-bottom:2px;
  transition:color .22s,border-color .22s}
.els-link:hover{color:var(--accent);border-bottom-color:rgba(var(--accent-rgb),.5)}

@media (max-width:1000px){
  .els-item{flex-wrap:wrap}
  .els-actions,.els-link{flex-basis:100%;margin-top:4px}
}
@media (max-width:820px){
  .els-strip{grid-template-columns:1fr;border-radius:var(--r-lg);transform:none}
  .els-strip:hover{transform:none}
  .els-acx{border-left:0;border-top:1px solid var(--line)}
  .els-item{padding:20px;gap:14px}
  .els-actions{gap:8px}
  .els-btn{flex:1 1 0;text-align:center;padding:12px 10px}
}

/* ── Strip: sits slightly inset, opens up on hover ───────────
   Same idea as the nav, which narrows on scroll: the resting state is a
   touch smaller than full size and settles out when you approach it.
   Done with a transform rather than a width so nothing reflows and the
   text never shifts under the cursor. */
.els-strip{
  transform:scale(.986);
  transform-origin:center;
  will-change:transform;
  transition:transform .55s var(--expo), box-shadow .55s var(--ease),
             border-color .4s var(--ease)}
@media (hover:hover){
  .els-strip:hover{
    transform:scale(1);
    border-color:var(--line2);
    box-shadow:var(--shadow-lg),inset 0 1px 0 rgba(var(--fg-rgb),.12)}
}

/* ── First-visit celebration ─────────────────────────────────
   Fires once, ever. A specular sweep across the glass, a spring on the
   YouTube mark, and a short burst of sparks — the site's own restraint,
   not confetti, which would fight everything around it.

   `once` is stored in localStorage: a hover effect that replayed on every
   pass would stop being a surprise and start being an irritation. */
.els-strip{position:relative;isolation:isolate}
.els-sweep{
  position:absolute;inset:0;z-index:4;pointer-events:none;
  border-radius:inherit;overflow:hidden;opacity:0}
.els-sweep::before{
  content:'';position:absolute;top:-60%;bottom:-60%;width:38%;left:-45%;
  background:linear-gradient(100deg,
    transparent, rgba(var(--fg-rgb),.16) 40%, rgba(var(--fg-rgb),.30) 50%,
    rgba(var(--fg-rgb),.16) 60%, transparent);
  transform:rotate(14deg)}
.els-strip.is-sweeping .els-sweep{opacity:1}
.els-strip.is-sweeping .els-sweep::before{
  animation:els-sweep 1.05s cubic-bezier(.22,.8,.3,1) forwards}
@keyframes els-sweep{ to{ left:118% } }

.els-strip.is-celebrating .els-mark:first-of-type,
.els-strip.is-celebrating .els-yt .els-mark{
  animation:els-pop .72s cubic-bezier(.34,1.7,.4,1) .06s}
@keyframes els-pop{
  0%{transform:scale(1)}
  38%{transform:scale(1.22) rotate(-5deg)}
  100%{transform:scale(1) rotate(0)}
}

.els-spark{
  /* Each spark gets its own --dx/--dy from JS so the burst is not a
     rigid pattern. These defaults keep the rule valid on its own. */
  --dx:0px; --dy:-40px;
  position:absolute;width:5px;height:5px;border-radius:50%;
  z-index:5;pointer-events:none;opacity:0;
  animation:els-spark .9s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes els-spark{
  0%{opacity:0;transform:translate(0,0) scale(.4)}
  18%{opacity:1}
  100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.9)}
}

@media (prefers-reduced-motion:reduce){
  .els-strip{transform:none;transition:none}
  .els-strip:hover{transform:none}
  .els-strip.is-sweeping .els-sweep,
  .els-strip.is-celebrating .els-mark{animation:none;opacity:0}
  .els-spark{display:none}
}

/* Client name sits with the kind label; duration stays pushed right. */
.fc-client{font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg3)}
.fc-dur{margin-left:auto}

/* The player replaces the poster inside the same frame, so nothing shifts. */
.fc.is-playing{cursor:default}
.fc.is-playing .fc-play{opacity:0;pointer-events:none}
.fc-img iframe,.fc-img video{position:absolute;inset:0;width:100%;height:100%;
  border:0;border-radius:var(--r-lg);z-index:3;background:#000}

/* NOTE, not a rule: intrinsic width/height attributes stop the page reflowing
   as images load, but the height attribute becomes the used height unless CSS
   overrides it. Adding them to the AutoCodex screens without a matching
   height:auto rendered every phone screenshot at its full 2796px.

   A blanket img[width][height]{height:auto} is the wrong fix — attribute
   selectors outrank .wc-img img and friends, so it would flatten every
   object-fit:cover image on the site. Each image rule states its own height:
   auto where the width drives it, 100% where a fixed-ratio box does. */