/* =====================================================================
   KEN PSALMS — V2 LAYER (redesign prototype)
   Loads after styles.css. Everything the redesign changes lives here, so the
   original design is still underneath: remove this file + the font link to revert.
   Direction: "Refined Evolution" base + "Cinematic Editorial" reel stage.
   ===================================================================== */

/* ---- Type: real web faces instead of whatever Helvetica/Arial the OS has ----
   Archivo (variable width) carries the grotesk DNA of the original but can go
   condensed for cinematic title cards. Newsreader italic replaces Georgia for the
   client names. IBM Plex Mono gives timecode/labels a consistent technical voice. */
:root{
  --sans:"Archivo","Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
  --serif:"Newsreader","Hoefler Text","Iowan Old Style",Georgia,serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --cond:84%;                         /* display width for titles */
  --e-out:cubic-bezier(.16,1,.3,1);   /* expo-out: fast start, long settle */
  --e-io:cubic-bezier(.65,0,.35,1);
}
h1,h2,.h2,.display,.cta h2{font-stretch:var(--cond)}
.hero h1,.h2,.display,.cta h2{font-weight:800}
.eyebrow,.data{font-feature-settings:"zero" 0}

/* ---- Masked line reveal (shared): text rises from behind its own baseline ---- */
.ln{display:block;overflow:hidden;padding-bottom:.04em;margin-bottom:-.04em}
/* CSS-only and running from the first frame (no JS wait), so it never delays the LCP */
.ln > span{display:block;animation:lnUp 1.15s var(--e-out) .08s both}
.ln + .ln > span{animation-delay:.16s}
@keyframes lnUp{from{transform:translateY(105%)}to{transform:none}}
@media (max-width:760px){.ln > span{animation:none}}  /* phones: the name is there instantly */

/* =====================================================================
   HOME — REEL STAGE
   Desktop: full-bleed letterboxed stage playing the featured work.
   Phone:   name first, then a widescreen reel window (no soft tall crop).
   ===================================================================== */
.hero.reel{min-height:max(620px,100svh);padding:0;justify-content:flex-end;overflow:hidden;background:#000;isolation:isolate}
.hero.reel .sub,.hero.reel .hero-wave{display:none}
.hero.reel .id-line{display:block;margin:0}
.reel-media{position:absolute;inset:0;z-index:0;overflow:hidden;background:#000}
.reel-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  transform:scale(calc(1.06 + var(--rp,0) * .06));transition:opacity 1s var(--e-io),transform 7.5s linear;
  filter:contrast(1.04) saturate(1.02)}
.reel-media video.on{opacity:.82;transform:scale(calc(1 + var(--rp,0) * .06))}
/* letterbox bars: the 2.39 frame is the signature — the work sits in a cinema frame */
.reel-media::before,.reel-media::after{content:"";position:absolute;left:0;right:0;height:clamp(0px,calc((100% - 100vw / 2.39) / 2),11vh);background:#000;z-index:2;pointer-events:none}
.reel-media::before{top:0}.reel-media::after{bottom:0}
.reel-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,0) 48%,rgba(0,0,0,.72) 100%)}
.reel-inner{position:relative;z-index:3;padding:0 var(--gutter) clamp(26px,4.2vh,48px);display:grid;gap:clamp(14px,2vh,22px);
  transform:translateY(calc(var(--rp,0) * -60px));opacity:calc(1 - var(--rp,0) * 1.4)}
.hero.reel .eyebrow{color:#d6d8db;position:relative}
.hero.reel h1{font-size:clamp(76px,15vw,250px);line-height:.8;letter-spacing:-.022em;text-transform:uppercase;margin:0;font-stretch:76%}
.reel-lower{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:end;gap:18px 28px;
  border-top:1px solid rgba(255,255,255,.24);padding-top:14px}
.reel-now{display:block;min-width:0;color:#e7e8ea;font-family:var(--mono);font-size:.78rem;letter-spacing:.05em;line-height:1.5;text-decoration:none}
.reel-now i{font-family:var(--serif);font-size:1.18rem;letter-spacing:0;color:#fff;margin-right:.45em}
.reel-now .go{display:inline-block;margin-left:.6em;color:var(--accent);transition:transform .4s var(--e-out)}
.reel-now:hover .go,.reel-now:focus-visible .go{transform:translateX(5px)}
.reel-now .fade{display:inline;transition:opacity .45s ease}
.reel-now.swap .fade{opacity:0}
.reel-idx{display:flex;gap:6px;align-items:center;height:28px}
.reel-idx button{position:relative;width:clamp(14px,1.6vw,24px);height:28px;padding:0;background:none;border:0;cursor:pointer}
.reel-idx button::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:rgba(255,255,255,.28)}
.reel-idx button::after{content:"";position:absolute;left:0;top:50%;height:2px;margin-top:-1px;width:0;background:#fff}
.reel-idx button[aria-current="true"]::after{animation:tick var(--dur,7s) linear forwards}
.reel-idx.paused button::after{animation-play-state:paused}
.reel-idx button:focus-visible{outline:1px solid var(--accent);outline-offset:2px}
@keyframes tick{to{width:100%}}
.reel-tc{font-family:var(--mono);font-size:.78rem;letter-spacing:.12em;color:var(--accent);font-variant-numeric:tabular-nums;white-space:nowrap}

@media (max-width:760px){
  .hero.reel{min-height:0;display:grid;grid-template-columns:minmax(0,1fr);padding:calc(86px + env(safe-area-inset-top,0px)) 0 28px;background:var(--black)}
  .reel-inner{display:contents}
  .hero.reel .eyebrow{display:block!important;order:1;padding:0 var(--gutter);font-size:.64rem;line-height:1.6}
  .hero.reel .id-line{order:2;padding:12px var(--gutter) 24px}
  .hero.reel h1{font-size:clamp(54px,19.5vw,120px);line-height:.82}
  .reel-media{order:3;position:relative;inset:auto;aspect-ratio:16/9;width:100%}
  .reel-media::before,.reel-media::after{display:none}
  .reel-scrim{display:none}
  .reel-lower{order:4;margin:14px var(--gutter) 0;grid-template-columns:minmax(0,1fr) auto;gap:12px 16px}
  .reel-idx{grid-column:1/-1;order:3;justify-content:space-between}
  .reel-idx button{flex:1 1 0;width:auto;height:30px}
  .reel-now i{font-size:1.05rem}
}

/* ---- Proof strip: the facts that were in the data but never above the fold ---- */
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:1px solid var(--line-d);background:var(--black)}
.facts > div{padding:clamp(18px,2.4vw,30px) var(--gutter);border-right:1px solid var(--line-d);min-width:0}
.facts > div:last-child{border-right:0}
.facts b{display:block;font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(1.15rem,1.7vw,1.5rem);line-height:1.2;color:var(--white)}
.facts span{display:block;margin-top:6px;font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;color:var(--smoke);line-height:1.6}
@media (max-width:760px){.facts{grid-template-columns:1fr}.facts > div{border-right:0;border-top:1px solid var(--line-d)}}

/* =====================================================================
   FEATURED — editorial 12-column rhythm, index row on every card,
   always visible at rest (reveal moves it; it never hides it)
   ===================================================================== */
#featured-grid.v2{grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(44px,5vw,72px) clamp(14px,1.6vw,24px)}
#featured-grid.v2 .card{grid-row:auto;opacity:1;transform:translateY(32px);transition:transform 1.1s var(--e-out)}
#featured-grid.v2 .card.in{transform:none}
#featured-grid.v2 .card.c12{grid-column:span 12}
#featured-grid.v2 .card.c6{grid-column:span 6}
#featured-grid.v2 .card.c4{grid-column:span 4}
#featured-grid.v2 .card .poster{aspect-ratio:16/9}
#featured-grid.v2 .card.c12 .poster{aspect-ratio:2.39/1}
#featured-grid.v2 .card .poster{clip-path:inset(0 0 0 0);transition:clip-path 1.2s var(--e-out)}
#featured-grid.v2 .card:not(.in) .poster{clip-path:inset(6% 4% 6% 4%)}
#featured-grid.v2 .card:hover .poster img,#featured-grid.v2 .card:hover .poster canvas{transform:scale(1.04)}
#featured-grid.v2 .poster img,#featured-grid.v2 .poster canvas{transition:transform 1.4s var(--e-out),filter .6s ease}
.card .ix{display:grid;grid-template-columns:3.2em minmax(0,1fr) auto;gap:4px 14px;align-items:baseline;margin-top:16px;padding-top:14px;border-top:1px solid var(--line-d)}
.card .ix .n{font-family:var(--mono);font-size:.72rem;color:var(--smoke-d);font-variant-numeric:tabular-nums}
.card .ix .k{display:block;font-family:var(--serif);font-style:italic;font-size:1rem;color:var(--smoke);margin-bottom:2px}
.card .ix .t{display:block;font-weight:700;font-stretch:90%;letter-spacing:-.012em;line-height:1.08;font-size:clamp(1.25rem,1.9vw,1.9rem);color:var(--white);
  transition:transform .5s var(--e-out)}
.card.c12 .ix .t{font-size:clamp(1.5rem,2.6vw,2.6rem)}
.card:hover .ix .t{transform:translateX(6px)}
#featured-grid.v2 .card.c4 .ix{grid-template-columns:3.2em minmax(0,1fr)}
#featured-grid.v2 .card.c4 .ix .r{grid-column:2;text-align:left;margin-top:6px}
.card .ix .r{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--smoke);text-align:right;line-height:1.7}
.card .ix .r em{display:block;font-style:normal;color:var(--smoke-d)}
#featured-grid.v2 .card .meta{display:none}
@media (max-width:1000px){#featured-grid.v2 .card.c4{grid-column:span 6}#featured-grid.v2 .card.c4:last-child:nth-child(odd){grid-column:span 12}}
@media (max-width:760px){
  #featured-grid.v2{gap:40px}
  #featured-grid.v2 .card.c12,#featured-grid.v2 .card.c6,#featured-grid.v2 .card.c4{grid-column:1/-1}
  #featured-grid.v2 .card.c12 .poster{aspect-ratio:16/9}
  .card .ix{grid-template-columns:2.6em minmax(0,1fr)}
  .card .ix .r{grid-column:2;text-align:left}
}

/* Section head: bigger, condensed, with a running count */
.section-head .h2{font-size:clamp(2.6rem,6.2vw,6rem);line-height:.86;letter-spacing:-.025em;text-transform:uppercase}

/* =====================================================================
   CLOSING SLATE — the generic light band becomes a dark, deliberate end card
   ===================================================================== */
.cta.v2{background:var(--black);color:var(--white);text-align:left;border-top:1px solid var(--line-d);padding:clamp(80px,12vw,170px) 0 clamp(64px,8vw,110px)}
.cta.v2 .wrap{display:grid;gap:clamp(22px,3vw,34px)}
.cta.v2 .eyebrow{color:var(--smoke)}
.cta.v2 h2{font-size:clamp(3rem,9.5vw,9.5rem);line-height:.84;letter-spacing:-.03em;text-transform:uppercase;max-width:14ch;margin:0}
.cta.v2 .mailrow{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;border-top:1px solid var(--line-d);padding-top:22px}
.cta.v2 .mail{font-family:var(--serif);font-style:italic;font-size:clamp(1.5rem,3.4vw,2.8rem);color:var(--white);text-decoration:none;
  background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .6s var(--e-out);user-select:all;overflow-wrap:anywhere}
.cta.v2 .mail:hover{background-size:100% 1px}
.cta.v2 .copy{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--smoke);background:none;border:1px solid var(--line-d);
  padding:10px 14px;min-height:40px;cursor:pointer;transition:color .25s,border-color .25s}
.cta.v2 .copy:hover{color:var(--white);border-color:var(--white)}
.cta.v2 .cta-btns{justify-content:flex-start;margin-top:0}
.cta.v2 .btn{background:var(--white);color:var(--black);border-color:var(--white)}
.cta.v2 .btn.btn-ghost{background:transparent;color:var(--white);border-color:var(--line-d)}

/* =====================================================================
   MOBILE MENU — big condensed index with a staggered entrance
   ===================================================================== */
@media (max-width:760px){
  .nav-menu{align-items:flex-start;justify-content:flex-end;gap:0;padding:0 var(--gutter) calc(40px + env(safe-area-inset-bottom,0px))}
  .nav-menu a{font-weight:800;font-stretch:78%;font-size:clamp(44px,15vw,76px);line-height:.98;letter-spacing:-.02em;opacity:1;
    padding:2px 0;transform:translateY(24px);opacity:0;transition:transform .7s var(--e-out),opacity .5s ease}
  .nav.open .nav-menu a{transform:none;opacity:1}
  .nav.open .nav-menu a:nth-child(2){transition-delay:.04s}.nav.open .nav-menu a:nth-child(3){transition-delay:.08s}
  .nav.open .nav-menu a:nth-child(4){transition-delay:.12s}.nav.open .nav-menu a:nth-child(5){transition-delay:.16s}
  .nav-menu .menu-mail{margin-top:28px;font-family:var(--mono);font-size:.8rem;letter-spacing:.06em;color:var(--smoke);font-weight:400;font-stretch:100%;text-transform:none}
}

/* ---- Loading placeholder fix: the blur-up must FILL the tile, never repeat ---- */
.poster.lqip,.wposter.lqip,.card .poster.lqip{background-size:cover!important;background-repeat:no-repeat!important;background-position:center!important}

@media (prefers-reduced-motion:reduce){
  .ln > span{animation:none}
  .reel-media video{transition:none;transform:none}
  .reel-inner{transform:none;opacity:1}
  .reel-idx button::after{animation:none;width:0}
  .reel-idx button[aria-current="true"]::after{width:100%}
  #featured-grid.v2 .card{transform:none;transition:none}
  #featured-grid.v2 .card:not(.in) .poster{clip-path:none}
}

/* =====================================================================
   WORK — filters, a big-type film index for List, grid visible at rest
   ===================================================================== */
.page-head .display{font-size:clamp(4rem,14vw,13rem);line-height:.82;letter-spacing:-.03em;text-transform:uppercase;font-weight:800}
.work-bar{align-items:flex-end}
.filters{display:flex;flex-wrap:wrap;gap:6px;flex:1 1 auto;justify-content:flex-start;margin-left:clamp(0px,2vw,24px)}
.filters button{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--smoke);
  border:1px solid var(--line-d);padding:9px 12px;min-height:38px;cursor:pointer;background:none;transition:color .25s,border-color .25s,background .25s}
.filters button sup{font-size:.85em;margin-left:5px;vertical-align:.35em;color:var(--smoke-d)}
.filters button:hover{color:var(--white);border-color:rgba(255,255,255,.4)}
.filters button[aria-pressed="true"]{color:var(--black);background:var(--white);border-color:var(--white)}
.filters button[aria-pressed="true"] sup{color:var(--smoke-d)}
.wcard{opacity:1;transform:translateY(26px);transition:transform 1s var(--e-out)}
.wcard.in{transform:none}
.wcard[hidden],.list .row[hidden]{display:none!important}
.wtitle{font-weight:700;font-stretch:90%;font-size:clamp(1.05rem,1.3vw,1.3rem)}
/* List: each film becomes a title card; the cursor-follow cover still rides along */
.list .row{opacity:1;padding:26px 0;grid-template-columns:56px minmax(0,1.9fr) .9fr .8fr 64px}
.list-head{grid-template-columns:56px minmax(0,1.9fr) .9fr .8fr 64px}
.list .row .pclient{font-size:1.02rem;margin-bottom:2px}
.list .row .pname{font-weight:800;font-stretch:80%;text-transform:uppercase;letter-spacing:-.01em;line-height:.95;
  font-size:clamp(1.7rem,3.6vw,3.4rem);color:var(--smoke);transition:color .35s ease,transform .5s var(--e-out)}
.list .row:hover .pname,.list .row:focus-visible .pname{color:var(--white)}
.list .row .no{align-self:start;padding-top:.5em}
@media (max-width:760px){
  .work-bar{align-items:stretch}
  .filters{order:3;margin-left:0;width:100%;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  .filters::-webkit-scrollbar{display:none}
  .filters button{flex:0 0 auto}
  .list .row,.list-head{grid-template-columns:34px minmax(0,1fr) 46px}
  .list .row .pname{font-size:clamp(1.5rem,8vw,2.2rem);color:var(--white)}
}
@media (prefers-reduced-motion:reduce){.wcard{transform:none;transition:none}}
/* the toolbar's inline padding:0 left it out of line with the grid (and touching the edge on phones) */
.work-bar.wrap{padding-left:var(--gutter)!important;padding-right:var(--gutter)!important}

/* =====================================================================
   PROJECT — title card type, and an honest fallback when the player host is unreachable
   ===================================================================== */
.player .title-block h1{font-weight:800;font-stretch:80%;font-size:clamp(2.6rem,8vw,7.5rem);line-height:.86;letter-spacing:-.025em}
.player .title-block .client{font-size:1.15rem}
.player .player-note{position:absolute;z-index:6;left:50%;top:38%;transform:translate(-50%,-50%);margin:0;max-width:min(36ch,86%);text-align:center;
  font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;line-height:1.6;color:var(--white);background:rgba(8,9,10,.6);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid var(--line-d);padding:12px 16px}
@media (max-width:760px){.player .player-note{top:50%}}
.player.offline-mode .transport .play,.player.offline-mode .transport .time,.player.offline-mode .transport .scrub,.player.offline-mode .vol{visibility:hidden}

/* ---- Touch + overflow fixes found in the 320–1920 test pass ---- */
@media (max-width:760px){
  #featured-grid.v2{grid-template-columns:minmax(0,1fr)}        /* 12 cols × 40px gaps overflowed 390px screens */
  .reel-idx{height:44px}.reel-idx button{height:44px}             /* 44px tap rows, the line stays 2px */
  .nav .wm{padding-block:12px}
}
@media (hover:none),(pointer:coarse){
  #client-names button{min-height:44px}
  .about-hero a[href^="mailto:"],.info a[href^="mailto:"]{display:inline-block;padding-block:12px}
}

/* contrast: --smoke-d (#6E7075) is 3.9:1 on black, under AA for small text; v2 labels use --smoke (5.9:1) */
.card .ix .n,.card .ix .r em,.filters button sup,.list .row .no{color:var(--smoke)}