/* ============ Tokens ============ */
:root{
  --paper:      #F7F8F7;
  --ink:        #12151A;
  --ink-soft:   #5A616C;
  --ink-ghost:  rgba(18,21,26,.12);
  --current:    #2450F4;
  --current-aqua: #2FA3C7;
  --highlight:  rgba(36,80,244,.14);
  --line:       rgba(18,21,26,.14);
  --max:        1160px;
  --pad-x:      clamp(1.4rem, 5vw, 4.5rem);
  --display:    "Space Grotesk", system-ui, sans-serif;
  --mono:       "Space Mono", ui-monospace, monospace;
  --serif:      "Fraunces", Georgia, serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }

body{
  background:var(--paper); color:var(--ink);
  font-family:var(--display); font-weight:400;
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
}

/* film grain — print texture over everything */
body::after{
  content:""; position:fixed; inset:0; z-index:80; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}

::selection{ background:var(--current); color:#fff; }

a{color:inherit}
:focus-visible{ outline:2px solid var(--current); outline-offset:3px; border-radius:2px; }

h1,h2,h3{ font-family:var(--display); font-weight:500; letter-spacing:-.02em; }

.mono{
  font-family:var(--mono); font-weight:400;
  font-size:.68rem; letter-spacing:.06em; text-transform:uppercase;
}

.no-caps{ text-transform:none; }

.section-eyebrow{ display:block; color:var(--ink-soft); }

.serif-em{ font-family:var(--serif); font-style:italic; font-weight:300; }

/* underlined arrow links — the site's only "button" */
.line-link{
  display:inline-block; text-decoration:none;
  font-size:clamp(1rem,1.4vw,1.15rem); font-weight:500; letter-spacing:-.01em;
  padding-bottom:.15em;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:100% 1px; background-position:0 100%; background-repeat:no-repeat;
  transition:background-size .35s ease;
}
.line-link:hover{ background-size:18% 1px; }
.line-link span{ display:inline-block; transition:transform .3s ease; }
.line-link:hover span{ transform:translate(3px,1px); }
.line-link.accent{ color:var(--current); }

/* ============ Hero ============ */
.hero-section{ position:relative; height:100svh; min-height:640px; overflow:hidden; }

#hero-stage{ position:absolute; inset:0; width:100%; height:100%; display:block; z-index:0; }

.scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(10deg, var(--paper) 8%, rgba(247,248,247,.5) 30%, rgba(247,248,247,0) 55%),
    linear-gradient(100deg, rgba(247,248,247,.7) 10%, rgba(247,248,247,0) 55%);
}

.hero-wrap{
  position:relative; z-index:2; height:100%;
  display:flex; flex-direction:column;
  padding:clamp(1.4rem,3.5vw,2.4rem) var(--pad-x) clamp(1.6rem,4vw,3rem);
}

nav{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; }
.brand{
  font-weight:600; font-size:1.02rem; letter-spacing:-.01em; text-decoration:none;
}
.brand sup{ font-size:.55em; font-weight:400; }
.nav-tag{ color:var(--ink-soft); }
@media (max-width:980px){ .nav-tag{display:none} }
.links{ display:flex; gap:clamp(1rem,2.2vw,2rem); align-items:baseline; }
.links a{
  color:var(--ink-soft); text-decoration:none; font-size:.85rem; letter-spacing:.01em;
  transition:color .2s ease;
}
.links a:hover,.links a:focus-visible{color:var(--ink)}
.nav-cta{
  color:var(--ink)!important;
  border-bottom:1px solid var(--ink);
  padding-bottom:2px;
  transition:color .2s ease, border-color .2s ease;
}
.nav-cta:hover{ color:var(--current)!important; border-color:var(--current); }
.clock{ color:var(--ink-soft); min-width:8.5ch; text-align:right; }
@media (max-width:760px){ .clock{display:none} }

.hero-mid{
  margin-top:auto; display:flex; justify-content:space-between; gap:1rem;
  margin-bottom:clamp(1rem,3vh,2.5rem);
}
.hero-meta{ color:var(--ink-soft); }
@media (max-width:640px){ .hero-meta:last-child{display:none} }

.hero-bottom h1{
  font-size:clamp(3rem, 9.6vw, 10rem);
  line-height:.95; letter-spacing:-.04em;
  margin-left:-.05em; /* optical alignment of E against the rule below */
}
h1 em{
  font-family:var(--serif); font-style:italic; font-weight:300;
  letter-spacing:-.01em;
  background:linear-gradient(120deg,var(--current) 30%,var(--current-aqua));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}

.hero-band{
  margin-top:clamp(1.2rem,3vh,2.2rem);
  border-top:1px solid var(--line);
  padding-top:clamp(1rem,2.5vh,1.6rem);
  display:flex; align-items:flex-start; gap:clamp(1.5rem,4vw,4rem);
}
.sub{ font-size:clamp(.95rem,1.3vw,1.08rem); line-height:1.6; color:var(--ink-soft); max-width:26rem; }
.cta{ display:flex; gap:clamp(1.2rem,2.5vw,2.4rem); flex-wrap:wrap; margin-top:.2rem; }
.scroll-cue{
  margin-left:auto; text-align:right; color:var(--ink-soft); line-height:1.7;
}
@media (max-width:760px){
  .hero-band{ flex-wrap:wrap; }
  .scroll-cue{ display:none; }
}

/* ============ Manifesto ============ */
.manifesto-wrap{ height:300vh; position:relative; }

.manifesto-sticky{
  position:sticky; top:0; height:100vh; height:100svh;
  display:flex; align-items:center;
  padding:clamp(1.4rem,4vw,3rem);
}
.manifesto-sticky .section-eyebrow{
  position:absolute; top:clamp(1.4rem,4vw,3rem); left:clamp(1.4rem,4vw,3rem);
}

.manifesto-text{
  font-family:var(--display); font-weight:500;
  font-size:clamp(2.4rem, min(8.6vw, 8vh), 8.5rem);
  line-height:1; letter-spacing:-.03em;
  color:var(--ink); /* no-JS + reduced-motion fallback: fully filled */
}
.manifesto-text em{ font-style:normal; }

.manifesto-text .w{
  color:var(--ink-ghost);
  transition:color 150ms ease;
}
.manifesto-text .w.filled{ color:var(--ink); }
.manifesto-text .w.accent.filled{ color:var(--current); }

@media (prefers-reduced-motion: reduce){
  .manifesto-wrap{ height:auto; }
  .manifesto-sticky{ position:static; height:auto; padding-top:8rem; padding-bottom:8rem; }
  .manifesto-sticky .section-eyebrow{ position:static; margin-bottom:2rem; }
  .manifesto-text .w{ color:var(--ink); }
  .manifesto-text .w.accent{ color:var(--current); }
}

@media (max-width:640px){
  .manifesto-wrap{ height:220vh; }
  .manifesto-text{ font-size:clamp(2.1rem, min(11vw, 7.5vh), 8.5rem); }
}

/* ============ Marquee ============ */
.marquee{
  overflow:hidden; white-space:nowrap;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:clamp(.9rem,2vw,1.4rem) 0;
}
.marquee-track{ display:inline-flex; width:max-content; animation:mq 48s linear infinite; }
.marquee-track span{
  font-family:var(--display); font-weight:500;
  font-size:clamp(1.5rem,2.8vw,2.4rem); letter-spacing:-.02em;
  color:var(--ink-ghost); white-space:nowrap;
}
.marquee-track em{ font-family:var(--serif); font-style:italic; font-weight:300; color:rgba(36,80,244,.35); }
@keyframes mq{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .marquee-track{ animation:none; } }

/* ============ Sections shared ============ */
section{ scroll-margin-top:2rem; }

.practices, .work, .process, .contact{
  max-width:var(--max);
  margin-inline:auto;
  padding:clamp(4rem,9vw,8rem) var(--pad-x);
}

.section-head{ margin-bottom:clamp(2.5rem,5vw,4rem); }
.section-head h2{
  font-size:clamp(1.8rem,3.4vw,2.6rem); margin-top:.9rem; letter-spacing:-.025em;
}
.count{ color:var(--ink-soft); margin-left:.6rem; vertical-align:super; }

/* ============ Chapters ============ */
.chapter{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,5rem);
  align-items:center; min-height:82vh;
}
.chapter + .chapter{ margin-top:clamp(3rem,6vw,5rem); }

.numeral{
  display:block; font-family:var(--display); font-weight:500;
  font-size:clamp(3.4rem,6vw,5rem); line-height:1; color:var(--ink-ghost);
  letter-spacing:-.03em; margin-bottom:1.4rem;
}

.chapter-head{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:1.3rem 0; margin-bottom:1.4rem;
}
.chapter-head h2{ font-size:clamp(1.7rem,3vw,2.4rem); line-height:1.12; letter-spacing:-.025em; }

.hl{
  background:var(--highlight);
  border-radius:.3em; padding:.02em .16em; margin:-.02em -.06em;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}

.chapter-copy p{ color:var(--ink-soft); max-width:28rem; }

.deliverables{
  list-style:none; margin-top:1.8rem;
}
.deliverables li{
  color:var(--ink);
  padding:.55rem 0; border-top:1px solid var(--line);
  display:flex; justify-content:space-between;
}
.deliverables li:last-child{ border-bottom:1px solid var(--line); }
.deliverables li::after{ content:"●"; font-size:.5em; color:var(--current); align-self:center; }

.chapter-panel{
  position:relative; border-radius:6px; overflow:hidden;
  border:1px solid var(--line);
  background:linear-gradient(160deg, #FDFEFD, #EEF1F2);
  aspect-ratio:4/3;
}
.chapter-panel canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }

.panel-frame .browser-chrome{
  position:absolute; top:0; left:0; right:0; z-index:1;
  display:flex; gap:1rem; align-items:center;
  padding:.7rem 1rem;
  border-bottom:1px solid var(--line);
  background:rgba(247,248,247,.75); backdrop-filter:blur(4px);
  color:var(--ink-soft);
}
.browser-chrome .dots{ display:flex; gap:5px; }
.browser-chrome .dots i{
  width:7px; height:7px; border-radius:50%; background:var(--ink-ghost); display:block;
}

@media (max-width:880px){
  .chapter{ grid-template-columns:1fr; min-height:0; gap:2rem; }
  .chapter-panel{ order:2; }
}

/* ============ Work index ============ */
.work-index{ list-style:none; border-top:1px solid var(--line); }

.work-row{
  display:grid;
  grid-template-columns:3.5rem 1fr minmax(0,1.2fr) auto;
  align-items:baseline; gap:clamp(.8rem,2vw,2rem);
  padding:clamp(1.1rem,2.4vw,1.7rem) .2rem;
  border-bottom:1px solid var(--line);
  text-decoration:none;
  transition:padding-left .3s ease, background .3s ease;
}
a.work-row:hover, a.work-row:focus-visible{ padding-left:1rem; }
a.work-row:hover .proj, a.work-row:focus-visible .proj{ color:var(--current); }

.work-row .idx{ color:var(--ink-soft); }
.work-row .proj{
  font-size:clamp(1.5rem,3.2vw,2.5rem); font-weight:500; letter-spacing:-.025em;
  line-height:1.1; transition:color .25s ease;
}
.work-row .proj-blurb{ color:var(--ink-soft); font-size:.92rem; }
.work-row .proj-tag{ color:var(--ink-soft); text-align:right; white-space:nowrap; }

.work-row.soon{ color:var(--ink-soft); }
.work-row.soon .proj{ color:var(--ink-ghost); -webkit-text-stroke:1px rgba(18,21,26,.25); }

@media (max-width:760px){
  .work-row{ grid-template-columns:2.2rem 1fr auto; }
  .work-row .proj-blurb{ grid-column:2 / -1; grid-row:2; }
}

/* floating hover preview */
.work-preview{
  position:fixed; top:0; left:0; width:min(340px,28vw); aspect-ratio:16/10;
  pointer-events:none; z-index:40;
  border:1px solid var(--line); border-radius:4px; overflow:hidden;
  background:linear-gradient(150deg,#FDFEFD,#E8ECEE);
  opacity:0; transform:scale(.96);
  transition:opacity .25s ease, transform .25s ease;
}
.work-preview.on{ opacity:1; transform:scale(1); }
.work-preview canvas{ width:100%; height:100%; display:block; }
@media (max-width:880px), (pointer:coarse){ .work-preview{ display:none; } }

/* ============ Process ============ */
.steps{ list-style:none; border-top:1px solid var(--line); }
.steps li{
  display:grid;
  grid-template-columns:6rem minmax(0,14rem) 1fr;
  gap:clamp(1rem,3vw,3rem); align-items:baseline;
  padding:clamp(1.2rem,2.6vw,1.8rem) .2rem;
  border-bottom:1px solid var(--line);
}
.step-num{ color:var(--current); }
.steps h3{ font-size:clamp(1.2rem,2.2vw,1.7rem); letter-spacing:-.02em; }
.steps p{ font-size:.95rem; color:var(--ink-soft); }
@media (max-width:640px){
  .steps li{ grid-template-columns:4rem 1fr; }
  .steps p{ grid-column:2; }
}

/* ============ Contact ============ */
.contact{ padding-bottom:clamp(5rem,10vw,9rem); }
.contact .section-eyebrow{ margin-bottom:clamp(2rem,4vw,3rem); }
.contact-title{
  font-size:clamp(3rem,8vw,7rem); letter-spacing:-.035em; line-height:.98;
}
.contact-title em{
  font-family:var(--serif); font-style:italic; font-weight:300; color:var(--current);
}
.contact-sub{ margin:1.6rem 0 2.6rem; color:var(--ink-soft); max-width:26rem; }
.contact-mail{
  display:inline-block; text-decoration:none;
  font-size:clamp(1.3rem,3.4vw,2.6rem); font-weight:500; letter-spacing:-.02em;
  padding-bottom:.1em;
  background-image:linear-gradient(var(--current),var(--current));
  background-size:100% 2px; background-position:0 100%; background-repeat:no-repeat;
  transition:color .25s ease;
}
.contact-mail:hover{ color:var(--current); }

/* ============ Footer ============ */
footer{ border-top:1px solid var(--line); overflow:hidden; }
.foot-word{
  font-family:var(--display); font-weight:500; letter-spacing:-.05em; line-height:.78;
  font-size:clamp(6rem,30vw,26rem);
  color:var(--ink); text-align:left;
  padding:clamp(1rem,3vw,2.5rem) var(--pad-x) 0;
  user-select:none;
}
.foot-word sup{ font-size:.14em; font-weight:400; letter-spacing:0; vertical-align:2.2em; }
.foot-grid{
  display:grid; grid-template-columns:1.2fr 1fr 1fr 1.2fr;
  gap:clamp(1.5rem,3vw,3rem);
  padding:clamp(2rem,4vw,3rem) var(--pad-x) clamp(1.6rem,3vw,2.4rem);
  border-top:1px solid var(--line);
  margin-top:clamp(1.5rem,3vw,2.5rem);
  font-size:.9rem;
}
.foot-col{ display:flex; flex-direction:column; gap:.45rem; align-items:flex-start; }
.foot-label{ color:var(--ink-soft); margin-bottom:.4rem; }
.foot-col a{
  text-decoration:none; color:var(--ink);
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0 1px; background-position:0 100%; background-repeat:no-repeat;
  transition:background-size .3s ease;
}
.foot-col a:hover{ background-size:100% 1px; }
.foot-col p{ color:var(--ink); }
.foot-fine{ color:var(--ink-soft); }
.foot-right{ align-items:flex-end; text-align:right; }
@media (max-width:760px){
  .foot-grid{ grid-template-columns:1fr 1fr; }
  .foot-right{ align-items:flex-start; text-align:left; }
}

/* ============ Reveals ============ */
.reveal{ opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}