/* s-glow.css v6: the wipe (ink, edge-to-edge) then the deck (the one gold band, edge-to-edge). Motion is GSAP (js/s-glow.js). */
.s-glow{padding:0;overflow-x:clip;background:var(--ink)}

/* ---------- shared pinned layout (phone: head, one edge-to-edge media, foot; bottom 88px left for the Book bar) ---------- */
.glow__pin{--fh:420px;
  position:relative;min-height:100svh;padding:calc(var(--nav-h) + var(--s1)) var(--gut) calc(88px + var(--s1));
  display:flex;flex-direction:column;justify-content:flex-start}
.glow__head{margin-bottom:var(--s2)}
.glow__by{margin-top:var(--s1)}
.glow__foot{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:var(--s2);margin-top:var(--s2)}
.glow__deck .glow__foot{align-items:baseline}

/* ---------- 1. the wipe: INK, headline then edge-to-edge frame ---------- */
.glow__wipe{padding-top:calc(var(--nav-h) + var(--s3))}
.glow__frame{width:100vw;height:var(--fh);border-radius:0;background:var(--ink-3)}
.glow__wipe{--fh:max(360px, calc(100svh - 360px))}
.glow__before,.glow__after{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:15% 40%}   /* faces 8.5% in, hair to 77.5%: both clear at 390 and 430 */
.glow__by{color:var(--soft);display:flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap}
.glow__by .link{color:var(--paper)}
.glow__before{transform-origin:50% 50%}
.glow__after{overflow:hidden}
.glow__after img{display:block;width:100%;height:100%;object-fit:cover;object-position:15% 40%;transform-origin:50% 50%}
.glow__div{position:absolute;top:0;bottom:0;left:50%;width:2px;margin-left:-1px;background:#fff;z-index:3}
.glow__tag{position:absolute;top:var(--s2);z-index:4}
.glow__tag--before{left:var(--s2)}
.glow__tag--after{right:var(--s2)}

/* ---------- 2. the deck: GOLD band, black type, edge-to-edge stack ---------- */
.glow__deck{--fh:max(340px, calc(100svh - 409px))}
.glow__name{font-size:min(var(--t-giant),36vw);margin:var(--s1) 0 var(--s2) -.04em}
.glow__line{max-width:none;color:var(--ink);font-weight:600}
.glow__deck .label{margin-top:var(--s1)}
.glow__count{color:var(--ink) !important;font-size:14px}
.glow__cap{position:absolute;left:var(--s2);bottom:var(--s2);z-index:2}
.glow__stack{width:100vw;height:var(--fh);clip-path:inset(0);border-radius:0}
.glow__card{position:absolute;inset:0;border-radius:0;will-change:transform}
.glow__card video{width:100%;height:100%;object-fit:cover;object-position:50% 25%}
.glow__deck .link{color:var(--ink)}

/* ---------- desktop: headline left, media right edge to the screen edge ---------- */
@media (min-width:900px){
  .glow__pin{height:100svh;min-height:760px;padding:0 0 0 var(--gut);display:grid;grid-template-columns:minmax(0,1fr) 46vw;
    grid-template-rows:1fr auto auto 1fr;column-gap:var(--s8);align-items:start}
  .glow__deck{--fh:100svh}
  .glow__deck .glow__head{grid-column:1;grid-row:2;align-self:end;margin:0 0 var(--s3);max-width:660px}
  .glow__stack{grid-column:2;grid-row:1 / span 4;align-self:stretch;width:100%;height:100%;min-height:760px;margin:0}
  .glow__foot{grid-column:1;grid-row:3;align-self:start;margin:0;max-width:660px}
  .glow__foot{justify-content:flex-start;gap:var(--s5)}
  .glow__line{font:700 var(--t-h3)/1.2 var(--display);letter-spacing:-.01em;max-width:24ch;margin-top:var(--s3)}
  .glow__name{font-size:min(var(--t-giant),17vw)}
  /* before/after at >= 900: BEFORE | AFTER side by side, no pin, no wipe. Headline on one line above, caption under. */
  .glow__wipe{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
    height:auto;min-height:100svh;padding:calc(var(--nav-h) + var(--s3)) var(--gut) var(--s8)}
  .glow__wipe .glow__head{margin:0 0 var(--s4);max-width:none}
  .glow__wipe .h-display{font-size:min(96px,9svh,7vw);white-space:nowrap}
  .glow__wipe .glow__frame{--ph:min(66svh,600px);display:flex;flex:none;width:auto;max-width:100%;height:var(--ph);margin:0;overflow:visible;border-radius:0;background:transparent}
  .glow__wipe .glow__before,.glow__wipe .glow__after{position:relative;inset:auto;flex:none;width:var(--ph);height:100%;transform:none}
  .glow__wipe .glow__before{object-position:50% 50%}
  .glow__wipe .glow__after{overflow:hidden;clip-path:none;order:2}   /* the divider (order 1) sits between BEFORE and AFTER */
  .glow__wipe .glow__after img{transform:none;object-position:50% 50%}
  .glow__wipe .glow__div{position:relative;top:auto;bottom:auto;left:auto;flex:none;width:2px;height:100%;margin:0;opacity:1;order:1}
  .glow__wipe .glow__tag--before{left:var(--s2)}
  .glow__wipe .glow__by{margin:var(--s3) 0 0;font-size:var(--t-body);opacity:1;transform:none;justify-content:center;gap:var(--s4)}
}

/* ---------- reduced motion: no pins, after shown, cards in a static column ---------- */
.s-glow.is-reduced .glow__pin{min-height:0;height:auto;padding-top:var(--s10);padding-bottom:var(--s10)}
.s-glow.is-reduced .glow__before,.s-glow.is-reduced .glow__div,.s-glow.is-reduced .glow__tag--before{display:none}
.s-glow.is-reduced .glow__stack{height:auto;display:grid;grid-auto-flow:column;grid-auto-columns:72vw;gap:var(--s1);overflow-x:auto;clip-path:none}
.s-glow.is-reduced .glow__card{position:relative;inset:auto;height:auto;aspect-ratio:4/5}
@media (min-width:900px){
  .s-glow.is-reduced .glow__wipe{height:auto;min-height:0;padding-top:var(--s10);padding-bottom:var(--s10)}
  .s-glow.is-reduced .glow__wipe .glow__before{display:block}
  .s-glow.is-reduced .glow__wipe .glow__div{display:block}
  .s-glow.is-reduced .glow__wipe .glow__tag--before{display:inline-flex}
  .s-glow.is-reduced .glow__deck{height:100svh;min-height:760px;padding:0 0 0 var(--gut)}
  .s-glow.is-reduced .glow__stack{width:100%;height:100%;min-height:760px;grid-template-rows:100%;grid-auto-rows:100%;grid-auto-columns:78%;gap:var(--s1);
    overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory}
  .s-glow.is-reduced .glow__card{height:100%;aspect-ratio:auto;scroll-snap-align:start}
}
/* owner 22:46: phone deck = the cuts first, then "Cuts." and its line under them. The before/after reads headline-then-media; this band
   reads media-then-name. It also keeps the lower part of the screen on still type while the cards slide over each other. */
@media (max-width:899px){
  /* RESUME-10 (Omar: "The pics in this section are cut off on mobile"): the frame takes every pixel the screen can spare (100svh minus
     the nav, the compact name + line + count, and the Book bar), up to 3:4; each clip sits on its own focal point (--focus, from
     media/cuts/manifest.json) so the whole head, hair to chin, shows even on a 375x667 phone */
  .glow__deck{--fh:clamp(300px, calc(100svh - 345px), 133.3vw);padding-top:var(--nav-h)}
  .glow__deck .glow__stack{order:-1}
  .glow__deck .glow__head{margin:var(--s2) 0 0}
  .glow__deck .glow__name{font-size:min(var(--t-giant),22vw);margin:var(--s1) 0 var(--s1) -.04em}
  html[lang="es"] .glow__deck .glow__name{font-size:min(var(--t-giant),16vw)}   /* "Cortes." is 7 letters to 5: 22vw x 5/7 */
  .glow__deck .glow__foot{margin-top:12px}
  .glow__card video{object-position:var(--focus, 50% 25%)}
}

/* Spanish width buffer: "Cortes." has 7 letters to "Cuts." 5, so the giant word is sized 5/7 on the ES page */
html[lang="es"] .glow__name{font-size:min(var(--t-giant),25vw)}
@media (min-width:900px){ html[lang="es"] .glow__name{font-size:min(var(--t-giant),12vw)} }