/* ============================================================
   GOOD GRIEF — Concept B: "GOOD // GRIEF"
   Two words, two worlds. The site inverts light<->dark between
   the GRIEF work (documentary, dark, spare) and the GOOD work
   (commercial, light, confident). Type carries the whole thing.
   ============================================================ */

@font-face{font-family:"Redaction";     src:url("../fonts/redaction.woff2")     format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Redaction20";   src:url("../fonts/redaction-20.woff2")  format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Redaction35";   src:url("../fonts/redaction-35.woff2")  format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Redaction50";   src:url("../fonts/redaction-50.woff2")  format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Redaction70";   src:url("../fonts/redaction-70.woff2")  format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Redaction100";  src:url("../fonts/redaction-100.woff2") format("woff2");font-weight:400;font-display:swap}

:root{
  --leader:#0B0A09;          /* grief ground (dark) */
  --bone:#E9E4D7;            /* type on dark */
  --bone-dim:rgba(233,228,215,.55);
  --bone-faint:rgba(233,228,215,.3);
  --warm-ground:#E7DFD0;     /* good ground (light) */
  --ink:#171512;            /* type on light */
  --ink-dim:rgba(23,21,18,.58);
  --ink-faint:rgba(23,21,18,.32);
  --cool:#5F7C8A;            /* the one cool accent, used sparingly */
  --serif:"Redaction",Georgia,serif;
  --sans:"General Sans",-apple-system,system-ui,sans-serif;
  --mono:"Geist Mono",ui-monospace,monospace;
  --pad:clamp(18px,4.2vw,64px);
  --maxw:1680px;
  --ease:cubic-bezier(.19,1,.22,1);
  /* per-world context (defaults = grief/dark) */
  --bg:var(--leader); --fg:var(--bone); --fg-dim:var(--bone-dim); --fg-faint:var(--bone-faint);
  --line:rgba(233,228,215,.14);
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{background:var(--leader);color:var(--bone);font-family:var(--sans);line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%}
::selection{background:var(--cool);color:var(--bone)}
:focus-visible{outline:2px solid var(--cool);outline-offset:3px}
.js [data-reveal]{opacity:0;transform:translateY(20px)}

.mono{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-dim)}
.serif{font-family:var(--serif)}
.g35{font-family:"Redaction35",var(--serif)} .g50{font-family:"Redaction50",var(--serif)}
.g70{font-family:"Redaction70",var(--serif)} .g100{font-family:"Redaction100",var(--serif)}
.wrap{max-width:var(--maxw);margin:0 auto}

/* film grain (very light, dark world only) */
.grain{position:fixed;inset:-120%;z-index:900;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.1s steps(3) infinite;mix-blend-mode:overlay}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-5%,4%)}50%{transform:translate(4%,-4%)}75%{transform:translate(-3%,3%)}100%{transform:translate(0,0)}}

/* ============================================================
   LEADER COUNTDOWN
   ============================================================ */
#leader{position:fixed;inset:0;z-index:1000;background:var(--leader);display:grid;place-items:center;
  transition:opacity .8s var(--ease),visibility .8s}
#leader.done{opacity:0;visibility:hidden}
.leader-stage{position:relative;width:min(58vw,58vh);aspect-ratio:1}
.leader-ring{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(233,228,215,.22)}
.leader-ring::before,.leader-ring::after{content:"";position:absolute;background:rgba(233,228,215,.22)}
.leader-ring::before{left:50%;top:-4%;width:1px;height:108%}
.leader-ring::after{top:50%;left:-4%;height:1px;width:108%}
.leader-sweep{position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from -90deg, rgba(233,228,215,.4) var(--sweep,0%), transparent 0);
  -webkit-mask:radial-gradient(circle,transparent 44%,#000 45%);mask:radial-gradient(circle,transparent 44%,#000 45%)}
.leader-num{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--serif);
  font-size:min(32vw,32vh);line-height:1;color:var(--bone)}

/* ============================================================
   NAV — flips colour by world via mix-blend-mode difference
   ============================================================ */
.topbar{position:fixed;top:0;left:0;right:0;z-index:70;display:flex;align-items:center;
  justify-content:space-between;padding:20px var(--pad);mix-blend-mode:difference;color:#fff}
.topbar .mark{display:flex;align-items:baseline;gap:11px}
.topbar .wordmark{font-family:var(--serif);font-size:23px}
.topbar .slash{font-family:var(--serif);opacity:.5}
.nav{display:flex;gap:26px;align-items:center}
.nav a{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:4px 0;position:relative}
.nav a[aria-current="page"]::after,.nav a:hover::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:currentColor}
@media(max-width:600px){.nav{gap:14px}.topbar .wordmark{font-size:18px}}

/* ============================================================
   HERO — the wordmark is the hero and the hinge
   ============================================================ */
.hero{position:relative;min-height:100svh;display:grid;place-items:center;overflow:hidden;background:var(--leader);text-align:center;padding:12vh var(--pad)}
.hero-reel{position:absolute;inset:0;z-index:0}
.hero-reel video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5}
.hero-reel video.under{opacity:0}
.hero-reel::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 100% at 50% 50%, transparent 20%, color-mix(in oklab,var(--leader) 82%,transparent) 78%)}
.hero-inner{position:relative;z-index:2}
.hero-word{font-family:var(--serif);line-height:.82;font-size:clamp(72px,18vw,300px);letter-spacing:-.01em}
.hero-word .grief{display:block;font-family:"Redaction50",var(--serif);color:color-mix(in oklab,var(--bone) 78%,var(--cool))}
.hero-word .slash{display:block;font-size:.3em;letter-spacing:.5em;color:var(--bone-faint);margin:.15em 0}
.hero-sub{margin-top:34px;font-family:var(--mono);font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--bone-dim)}
.hero-hud{position:absolute;left:var(--pad);right:var(--pad);bottom:24px;z-index:2;display:flex;justify-content:space-between;
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--bone-dim)}
.hero-hud .tc{color:var(--bone)}

/* ============================================================
   WORLDS — the register inversion
   ============================================================ */
.world{background:var(--bg);color:var(--fg);padding:clamp(70px,12vw,170px) var(--pad);
  transition:background .6s var(--ease)}
.world.grief{--bg:var(--leader);--fg:var(--bone);--fg-dim:var(--bone-dim);--fg-faint:var(--bone-faint);--line:rgba(233,228,215,.14)}
.world.good{--bg:var(--warm-ground);--fg:var(--ink);--fg-dim:var(--ink-dim);--fg-faint:var(--ink-faint);--line:rgba(23,21,18,.14)}

.world-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:clamp(30px,5vw,64px)}
.world-title{font-family:var(--serif);font-size:clamp(90px,22vw,320px);line-height:.8;letter-spacing:-.02em}
/* world titles stay CLEAN Redaction: the degraded grade only appears in the hero,
   where the clean "good" sits beside it for contrast, so it never reads as a broken asset */
.world-note{max-width:34ch;text-align:right;color:var(--fg-dim);font-size:clamp(15px,1.5vw,19px);line-height:1.5}
@media(max-width:720px){.world-note{text-align:left}}

/* GRIEF list — spare, large, one per row */
.grieflist{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.griefrow{display:grid;grid-template-columns:1.2fr 1fr auto;gap:24px;align-items:center;
  padding:clamp(20px,2.4vw,34px) 0;border-bottom:1px solid var(--line);cursor:pointer;
  transition:padding-left .45s var(--ease)}
.griefrow:hover{padding-left:20px}
.griefrow .cl{font-family:var(--serif);font-size:clamp(28px,4.4vw,64px);line-height:.96}
.griefrow .ti{color:var(--fg-dim);font-size:clamp(15px,1.5vw,20px)}
.griefrow .meta{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-faint);text-align:right}
.griefrow .stripe{position:relative;grid-column:1 / -1;height:0;overflow:hidden;transition:height .5s var(--ease)}
.griefrow:hover .stripe{height:min(30vw,320px)}
.griefrow .stripe video,.griefrow .stripe img{width:100%;height:100%;object-fit:cover;aspect-ratio:2.39}
@media(hover:none){.griefrow .stripe{height:min(52vw,240px)}}
@media(max-width:720px){.griefrow{grid-template-columns:1fr auto}.griefrow .ti{display:none}}

/* GOOD grid — confident, gridded, scope tiles on light ground */
.goodgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,1.8vw,30px)}
@media(max-width:760px){.goodgrid{grid-template-columns:1fr}}
.tile{position:relative;aspect-ratio:2.39;overflow:hidden;background:#111;cursor:pointer}
.tile video,.tile img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.tile:hover video,.tile:hover img{transform:scale(1.04)}
.tile .cap{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:flex-end;
  gap:12px;padding:16px 18px;color:#F3EFE7;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.62))}
.tile .cap .cl{font-family:var(--serif);font-size:clamp(20px,2.2vw,30px);line-height:1}
.tile .cap .ti{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;opacity:.8;text-align:right}

/* ============================================================
   ABOUT
   ============================================================ */
.about-hero{min-height:66svh;display:flex;flex-direction:column;justify-content:flex-end;
  padding:22vh var(--pad) clamp(40px,7vw,90px)}
.about-hero .ey{margin-bottom:22px;color:var(--bone-dim)}
.about-hero h1{font-family:var(--serif);font-size:clamp(38px,7.5vw,140px);line-height:.9}
.about-hero h1 em{font-style:normal;font-family:"Redaction50",var(--serif);color:color-mix(in oklab,var(--bone) 78%,var(--cool))}
.about-copy{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,90px);padding:clamp(50px,8vw,110px) var(--pad);border-top:1px solid var(--line)}
@media(max-width:860px){.about-copy{grid-template-columns:1fr;gap:40px}}
.about-copy p{font-size:clamp(17px,1.5vw,22px);line-height:1.5;max-width:48ch;margin-bottom:18px}
.about-copy p.small{font-size:clamp(15px,1.3vw,17px);color:var(--fg-dim)}
.bts{position:relative;aspect-ratio:4/5;background:#151312;overflow:hidden;filter:grayscale(1) contrast(1.05)}
.bts img{width:100%;height:100%;object-fit:cover}
.bts .ph{position:absolute;inset:0;display:grid;place-items:center;color:var(--bone-faint);font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;background:radial-gradient(circle at 50% 40%,#1c1917,#0b0a09)}
.bts .half{position:absolute;inset:0;mix-blend-mode:soft-light;opacity:.5;background-image:radial-gradient(#E9E4D7 1px,transparent 1.4px);background-size:5px 5px}
.bts .frame-cap{position:absolute;left:14px;bottom:12px;z-index:2;color:#E9E4D7;mix-blend-mode:difference}

.duo{display:flex;flex-wrap:wrap;gap:8px 46px;align-items:baseline;padding:clamp(46px,8vw,100px) var(--pad);border-top:1px solid var(--line)}
.duo .name{font-family:var(--serif);font-size:clamp(34px,7vw,104px);line-height:.9}
.duo .role{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-dim)}

/* services + clients live in the GOOD (light) register on about */
.svc{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:24px 0;border-bottom:1px solid var(--line);transition:padding-left .4s var(--ease)}
.svc:hover{padding-left:16px}
.svc .n{font-family:var(--mono);font-size:12px;color:var(--fg-faint);width:44px;flex:none}
.svc .s{flex:1;font-family:var(--serif);font-size:clamp(22px,3.6vw,50px);line-height:1}
.svc .d{color:var(--fg-dim);font-size:14px;max-width:32ch;text-align:right}
@media(max-width:680px){.svc .d{display:none}}
.client-list{display:flex;flex-wrap:wrap;gap:6px 24px;margin-top:22px}
.client-list span{font-family:var(--serif);font-size:clamp(18px,2.3vw,34px);color:var(--fg-dim);transition:color .3s}
.client-list span:hover{color:var(--fg)}

/* ============================================================
   FOOTER — sits in the good (light) register, a resolution
   ============================================================ */
.footer{background:var(--warm-ground);color:var(--ink);--line:rgba(23,21,18,.14);
  padding:clamp(70px,11vw,160px) var(--pad)}
.footer .big{font-family:var(--serif);font-size:clamp(44px,12vw,180px);line-height:.84}
.footer .big a{transition:opacity .3s}.footer .big a:hover{opacity:.55}
.footer-row{display:flex;justify-content:space-between;flex-wrap:wrap;gap:18px;margin-top:54px;
  font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-dim)}
.footer-row .col{display:flex;flex-direction:column;gap:8px}
.footer-row a:hover{color:var(--ink)}

/* ============================================================
   MOTION SAFETY + RESPONSIVE
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .grain{display:none}
  .hero-reel video{opacity:.5}
  .griefrow .stripe{height:min(46vw,220px)}
}
@media(max-width:600px){
  .world-head{flex-direction:column;align-items:flex-start}
  .hero-word{font-size:clamp(64px,20vw,120px)}
  .hero-sub{margin-top:26px;font-size:10px;letter-spacing:.12em;line-height:1.8}
  .nav a{font-size:10px;letter-spacing:.1em}
  .nav{gap:14px}
}
@media(max-width:480px){
  .topbar .wordmark{display:none}   /* the // slash remains as a compact home mark */
  .topbar .slash{font-size:20px;opacity:.9}
}