/* ============================================================
   SECTIONS
   ============================================================ */

/* ---------- HERO ---------- */
.hero {
  height: 100vh; min-height: 640px;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 var(--gut) clamp(40px, 9vh, 110px);
  overflow: hidden;
}
#gl {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 0; display:block;
}
.hero .gl-tint {           /* darken the shader toward the type */
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background: linear-gradient(180deg, rgba(8,8,10,.45) 0%, rgba(8,8,10,0) 28%, rgba(8,8,10,.15) 60%, rgba(8,8,10,.85) 100%);
}
.hero .inner { position: relative; z-index: 2; width: 100%; }

.hero .meta-row {
  display:flex; justify-content:space-between; align-items:flex-end;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-dim); margin-bottom:26px;
}
.hero .meta-row .col { display:flex; flex-direction:column; gap:5px; }
.hero .meta-row .col b{ color:var(--ink); font-weight:400; }
.hero .meta-row .right{ text-align:right; }

.hero h1 {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: clamp(48px, 13vw, 220px);
  line-height: 0.86; letter-spacing: -0.03em;
  text-transform: uppercase;
}
.hero h1 .ital { font-family:var(--font-serif); font-weight:400; font-style:italic;
  text-transform:none; letter-spacing:-.01em; color:var(--accent); }
.hero .sub {
  margin-top: 28px; max-width: 540px;
  font-size: clamp(16px, 1.5vw, 21px); line-height: 1.5; color: var(--ink-dim);
}
.hero .sub b{ color:var(--ink); font-weight:500; }

.hero .scroll-cue {
  position:absolute; bottom:34px; left:50%; transform:translateX(-50%); z-index:2;
  font-family:var(--font-mono); font-size:10px; letter-spacing:.22em; color:var(--ink-dim);
  text-transform:uppercase; display:flex; flex-direction:column; align-items:center; gap:10px;
}
.hero .scroll-cue .bar{ width:1px; height:42px; background:var(--hair); overflow:hidden; }
.hero .scroll-cue .bar::after{ content:""; display:block; width:100%; height:40%; background:var(--accent);
  animation: cue 1.9s var(--ease) infinite; }
@keyframes cue{ 0%{transform:translateY(-100%)} 100%{transform:translateY(250%)} }

/* ---------- MARQUEE strip ---------- */
.strip { border-top:1px solid var(--hair); border-bottom:1px solid var(--hair);
  overflow:hidden; padding:18px 0; background:var(--bg); }
.strip .track { display:flex; gap:48px; white-space:nowrap; width:max-content;
  font-family:var(--font-mono); font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-dim);
  animation: marq 32s linear infinite; }
.strip .track span{ display:inline-flex; align-items:center; gap:48px; }
.strip .track i{ color:var(--accent); font-style:normal; }
@keyframes marq{ to{ transform:translateX(-50%); } }

/* ---------- WORKS (thumbnail gallery) ---------- */
.works { padding: clamp(80px,12vh,160px) var(--gut) clamp(60px,9vh,120px); }
.works .head { display:flex; justify-content:space-between; align-items:flex-end;
  margin-bottom: clamp(40px,7vh,90px); gap:24px; flex-wrap:wrap; }
.works .head h2 { font-family:var(--font-head); font-size:clamp(30px,5vw,72px); font-weight:500; letter-spacing:-.02em; line-height:.95; }
.works .head .count{ font-family:var(--font-mono); font-size:12px; color:var(--ink-dim); letter-spacing:.14em; }

.work-grid { display:grid; grid-template-columns:repeat(2, 1fr); align-items:start; gap: clamp(28px,4vw,72px) clamp(24px,3vw,56px); }
.work-grid .work:nth-child(even){ margin-top: clamp(0px, 6vw, 90px); }

.work { position:relative; display:block; cursor:pointer; }
.work .thumb {
  position:relative; aspect-ratio:16/10; border-radius:4px; overflow:hidden;
  border:1px solid var(--hair);
  transform: scale(1); transition: transform .7s var(--ease), border-color .4s;
}
.work:hover .thumb { transform: scale(0.98); border-color: color-mix(in oklab, var(--accent) 55%, transparent); }
.work .thumb .reel { transition: transform 1.2s var(--ease); }
.work:hover .thumb .reel { transform: scale(1.06); }

.work .num { position:absolute; top:14px; left:16px; z-index:3;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; color:#fff; opacity:.85;
  mix-blend-mode:difference; }

/* thumb HUD (scrub on hover) */
.work .thumb-hud { position:absolute; inset:0; z-index:3; padding:14px;
  display:flex; flex-direction:column; justify-content:space-between;
  font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:#fff;
  opacity:0; transition:opacity .4s var(--ease); }
.work:hover .thumb-hud { opacity:1; }
.work .thumb-hud .th-top { display:flex; justify-content:flex-end; }
.work .thumb-hud .th-top .tc { color:var(--accent); }
.work .thumb-hud .th-bot { display:flex; flex-direction:column; gap:8px; }
.work .thumb-hud .th-bar { height:2px; background:rgba(255,255,255,.25); }
.work .thumb-hud .th-bar i { display:block; height:100%; width:0; background:var(--accent); }
.work .play-badge { position:absolute; top:50%; left:50%; z-index:3;
  width:74px; height:74px; margin:-37px 0 0 -37px; border:1px solid rgba(255,255,255,.7); border-radius:50%;
  display:grid; place-items:center; color:#fff; font-family:var(--font-mono); font-size:9px; letter-spacing:.14em;
  backdrop-filter:blur(3px); opacity:0; transform:scale(.7); transition:opacity .4s var(--ease), transform .5s var(--ease); }
.work:hover .play-badge { opacity:1; transform:scale(1); }
.work .play-badge::before { content:""; position:absolute; width:0;height:0;
  border-left:11px solid #fff; border-top:7px solid transparent; border-bottom:7px solid transparent; margin-left:3px; }

.work .info { display:flex; justify-content:space-between; align-items:baseline; gap:18px; margin-top:20px; }
.work .info .title { font-family:var(--font-head); font-size:clamp(22px,2.4vw,34px); font-weight:500;
  letter-spacing:-.01em; line-height:1; transition:color .4s; }
.work:hover .info .title { color:var(--accent); }
.work .info .meta { display:flex; gap:14px; align-items:center; flex-shrink:0;
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-dim); }
.work .info .meta .yr { color:var(--ink); }
.work .info .meta .tag { padding:4px 9px; border:1px solid var(--hair); border-radius:2px; }

@media (max-width:760px){
  .work-grid { grid-template-columns:1fr; gap:48px; }
  .work-grid .work:nth-child(even){ margin-top:0; }
  .work .info .meta .tag { display:none; }
}

.reel {
  position:absolute; inset:0; background:#0a0a0c;
  background-image:
    repeating-linear-gradient(115deg, rgba(255,255,255,.03) 0 2px, transparent 2px 9px);
}
.reel .flow{ position:absolute; inset:-20%; opacity:.9;
  background: conic-gradient(from 0deg at 30% 40%, var(--accent), transparent 30%, rgba(120,140,255,.5) 60%, transparent 80%, var(--accent));
  filter: blur(26px) saturate(1.2); mix-blend-mode:screen;
  animation: flow 14s linear infinite; }
@keyframes flow{ to{ transform:rotate(360deg) scale(1.1); } }
.reel .scan{ position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.0) 0 2px, rgba(0,0,0,.22) 2px 4px); }

/* ---------- DETAIL OVERLAY ---------- */
#detail {
  position:fixed; inset:0; z-index:8500; background:var(--bg);
  transform: translateY(100%); transition: transform .85s var(--ease);
  overflow-y:auto; overflow-x:hidden;
}
#detail.open{ transform:translateY(0); }
.dt-inner{ min-height:100%; }
.dt-bar{ position:sticky; top:0; z-index:5; display:flex; justify-content:space-between; align-items:center;
  padding:22px var(--gut); background:linear-gradient(180deg, var(--bg), rgba(8,8,10,0));
  font-family:var(--font-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-dim); }
.dt-bar .close{ pointer-events:auto; display:flex; align-items:center; gap:10px; color:var(--ink); }
.dt-bar .close .x{ width:26px; height:26px; border:1px solid var(--hair); border-radius:50%;
  display:grid; place-items:center; transition:border-color .3s, background .3s, color .3s; }
.dt-bar .close:hover .x{ border-color:var(--accent); background:var(--accent); color:#000; }

.dt-hero{ padding: 0 var(--gut); }
.dt-hero h2{ font-family:var(--font-head); font-size:clamp(40px,9vw,150px); font-weight:500; line-height:.9; letter-spacing:-.03em;
  text-transform:uppercase; margin:10px 0 30px; }
.dt-screen{ position:relative; width:100%; aspect-ratio:16/9; border-radius:4px; overflow:hidden;
  border:1px solid var(--hair); }
.dt-screen .play{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:96px; height:96px; border:1px solid rgba(255,255,255,.6); border-radius:50%;
  display:grid; place-items:center; color:#fff; font-family:var(--font-mono); font-size:10px; letter-spacing:.14em;
  backdrop-filter:blur(4px); }
.dt-screen .play::before{ content:""; position:absolute; width:0;height:0;
  border-left:14px solid #fff; border-top:9px solid transparent; border-bottom:9px solid transparent; margin-left:4px; top:34px; }

.dt-grid{ display:grid; grid-template-columns: 1.5fr 1fr; gap:60px;
  padding: clamp(40px,7vh,90px) var(--gut); }
.dt-grid p{ font-size:clamp(18px,1.7vw,26px); line-height:1.55; color:var(--ink); max-width:30ch; }
.dt-grid p.lead{ font-family:var(--font-serif); font-style:italic; font-size:clamp(24px,2.4vw,38px); color:var(--ink); margin-bottom:24px; }
.dt-specs{ display:flex; flex-direction:column; gap:0; font-family:var(--font-mono); font-size:12px;
  letter-spacing:.06em; }
.dt-specs .row{ display:flex; justify-content:space-between; padding:14px 0; border-top:1px solid var(--hair);
  text-transform:uppercase; }
.dt-specs .row:last-child{ border-bottom:1px solid var(--hair); }
.dt-specs .row .k{ color:var(--ink-dim); }
.dt-specs .row .v{ color:var(--ink); text-align:right; }
.dt-stills{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; padding:0 var(--gut) clamp(40px,7vh,90px); }
.dt-stills .still{ position:relative; aspect-ratio:16/10; border-radius:3px; overflow:hidden; border:1px solid var(--hair); }
.dt-next{ display:flex; justify-content:space-between; align-items:center; padding:clamp(40px,7vh,80px) var(--gut);
  border-top:1px solid var(--hair); cursor:pointer; }
.dt-next .lab{ font-family:var(--font-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-dim); }
.dt-next .nm{ font-family:var(--font-head); font-size:clamp(28px,5vw,64px); font-weight:500; letter-spacing:-.02em; transition:color .3s, transform .5s var(--ease); }
.dt-next:hover .nm{ color:var(--accent); transform:translateX(-10px); }
@media (max-width:820px){ .dt-grid{ grid-template-columns:1fr; gap:34px; } .dt-stills{ grid-template-columns:1fr; } }

/* ---------- ABOUT ---------- */
.about{ padding: clamp(90px,14vh,200px) var(--gut); position:relative; }
.about .big{ font-family:var(--font-head); font-size:clamp(28px,4.4vw,64px); font-weight:500; line-height:1.12; letter-spacing:-.02em; max-width:18ch; }
.about .big em{ font-family:var(--font-serif); font-style:italic; color:var(--accent); font-weight:400; }
.about .cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:40px; margin-top:clamp(50px,8vh,100px); }
.about .cols .c h3{ font-family:var(--font-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-dim); margin-bottom:18px; padding-bottom:12px; border-bottom:1px solid var(--hair); }
.about .cols .c ul{ list-style:none; display:flex; flex-direction:column; gap:9px; font-size:15px; color:var(--ink); }
.about .cols .c ul li span{ color:var(--ink-dim); font-family:var(--font-mono); font-size:11px; margin-right:10px; }
@media (max-width:760px){ .about .cols{ grid-template-columns:1fr; gap:34px; } }

/* awards */
.awards{ padding: 0 var(--gut) clamp(60px,9vh,120px); }
.award{ display:grid; grid-template-columns: 90px 1fr auto; gap:24px; align-items:baseline;
  padding:20px 0; border-top:1px solid var(--hair); }
.award:last-child{ border-bottom:1px solid var(--hair); }
.award .y{ font-family:var(--font-mono); font-size:13px; color:var(--accent); }
.award .t{ font-size:clamp(17px,2vw,24px); font-weight:500; }
.award .src{ font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-dim); }

/* ---------- CONTACT ---------- */
.contact{ padding: clamp(90px,16vh,220px) var(--gut) clamp(80px,12vh,140px); text-align:center; position:relative; }
.contact .lead{ font-family:var(--font-mono); font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-dim); margin-bottom:30px; }
.contact a.mail{ display:inline-block; font-family:var(--font-head); font-size:clamp(34px,8vw,128px); font-weight:500; letter-spacing:-.03em;
  line-height:1; position:relative; }
.contact a.mail .u{ position:absolute; left:0; bottom:6px; width:100%; height:2px; background:var(--accent);
  transform:scaleX(0); transform-origin:left; transition:transform .6s var(--ease); }
.contact a.mail:hover .u{ transform:scaleX(1); }
.contact .socials{ display:flex; gap:30px; justify-content:center; margin-top:60px;
  font-family:var(--font-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; }
.contact .socials a{ color:var(--ink-dim); transition:color .3s; }
.contact .socials a:hover{ color:var(--accent); }

footer{ display:flex; justify-content:space-between; padding:30px var(--gut); border-top:1px solid var(--hair);
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); flex-wrap:wrap; gap:10px; }

/* ============================================================
   DISPLAY FONT (Syne headings)
   Headings use --font-head (Syne); body & HUD stay fixed. The serif
   italic accent in the hero ("ito") is preserved.
   ============================================================ */
.font-syne { --font-head: "Syne", "Space Grotesk", sans-serif; }
.font-syne h1, .font-syne .works .head h2, .font-syne .work .info .title,
.font-syne .about .big, .font-syne .contact a.mail, .font-syne .dt-hero h2, .font-syne .dt-next .nm {
  font-weight: 700; letter-spacing: -0.02em;
}