/* ============================================================
   Joy Baroudi - base layer
   tokens, reset, typography, shared chrome
   ============================================================ */

@font-face{font-family:"Space Grotesk";src:url("../fonts/sg-latin.woff2") format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:"Inter";src:url("../fonts/inter-latin.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("../fonts/jbm-latin.woff2") format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"EB Garamond";src:url("../fonts/ebg-latin.woff2") format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"EB Garamond";src:url("../fonts/ebg-italic-latin.woff2") format("woff2");font-weight:400 700;font-style:italic;font-display:swap}

:root{
  --paper:#F4F3EF;
  --paper-2:#EDEBE4;
  --card:#FFFFFF;
  --ink:#111110;
  --ink-2:#3B3A34;
  --muted:#6B6A62;
  --faint:#9A988E;
  --rule:#DEDCD3;
  --rule-soft:#E8E6DE;
  --accent:#D6451F;
  --accent-ink:#B23814;
  --accent-soft:#FCEDE7;
  --deep:#0D0D0C;
  --deep-2:#191917;
  --deep-rule:#2C2C28;

  --display:"Space Grotesk","Inter",system-ui,sans-serif;
  --body:"Inter",system-ui,-apple-system,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --serif:"EB Garamond",Georgia,serif;

  --gut:clamp(20px,4.2vw,72px);
  --maxw:1440px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --nav-h:68px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{margin:0;padding:0}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.62;
  font-feature-settings:"kern" 1,"liga" 1,"cv05" 1;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--accent);color:#fff}

/* ------------------------------------------------ layout */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(16px,2vw,32px)}
.rule{height:1px;background:var(--rule);border:0;margin:0;transform-origin:left center}
.section{padding-block:clamp(72px,9vw,150px)}
.section--tight{padding-block:clamp(52px,6vw,96px)}

/* ------------------------------------------------ type */
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:600;letter-spacing:-.022em;line-height:1.02}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}

.mono{font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500}
.mono--ink{color:var(--ink)}
.mono--faint{color:var(--faint)}
.mono--accent{color:var(--accent)}

.display{font-family:var(--display);font-weight:600;letter-spacing:-.035em;line-height:.92}
.t-hero{font-size:clamp(3.4rem,12.5vw,11.5rem)}
.t-xl{font-size:clamp(2.5rem,6.4vw,5.4rem);line-height:1.0}
.t-lg{font-size:clamp(2rem,4.2vw,3.5rem);line-height:1.04}
.t-md{font-size:clamp(1.45rem,2.4vw,2.05rem);line-height:1.12}
.t-sm{font-size:clamp(1.12rem,1.5vw,1.35rem);line-height:1.25}

.lede{font-size:clamp(1.0625rem,1.45vw,1.3rem);line-height:1.58;color:var(--ink-2);letter-spacing:-.008em}
.body-sm{font-size:.9375rem;line-height:1.62;color:var(--muted)}
.tabular{font-variant-numeric:tabular-nums}

/* ------------------------------------------------ section head */
.sec-head{display:flex;align-items:baseline;gap:18px;margin-bottom:clamp(30px,4vw,56px)}
.sec-head__idx{font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em;color:var(--faint);
  padding-top:.5em;white-space:nowrap}
.sec-head__title{font-family:var(--display);font-weight:600;letter-spacing:-.03em;
  font-size:clamp(1.9rem,4.4vw,3.4rem);line-height:1.0}
.sec-head__note{margin-left:auto;max-width:34ch;font-size:.9375rem;color:var(--muted);
  line-height:1.5;text-align:right}
.sec-head__mark{flex:none;align-self:center;width:clamp(30px,3.6vw,48px);height:auto;
  margin-right:-4px}
@media(max-width:860px){.sec-head__note{display:none}}

/* ------------------------------------------------ tags */
.tag{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:.625rem;
  letter-spacing:.11em;text-transform:uppercase;font-weight:500;
  padding:5px 10px 4px;border-radius:999px;background:var(--paper-2);color:var(--muted);
  white-space:nowrap}
.tag--accent{background:var(--accent-soft);color:var(--accent-ink)}
.tag--live::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent);
  animation:pulse 2.4s var(--ease) infinite}
.tag--outline{background:none;box-shadow:inset 0 0 0 1px var(--rule)}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}

.tags{display:flex;flex-wrap:wrap;gap:7px}

/* ------------------------------------------------ links / buttons */
.lnk{position:relative;display:inline-flex;align-items:center;gap:.5em;
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.13em;text-transform:uppercase;
  font-weight:500;padding-bottom:3px}
.lnk::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease-out)}
.lnk:hover::after{transform:scaleX(1);transform-origin:left}
.lnk__arrow{transition:transform .4s var(--ease-out)}
.lnk:hover .lnk__arrow{transform:translateX(4px)}

.btn{display:inline-flex;align-items:center;gap:10px;padding:13px 22px;border-radius:999px;
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.13em;text-transform:uppercase;
  font-weight:500;background:var(--ink);color:var(--paper);
  transition:background .35s var(--ease),color .35s var(--ease),transform .35s var(--ease-out)}
.btn:hover{background:var(--accent);transform:translateY(-2px)}
.btn svg{width:14px;height:14px;flex:none}
.btn--ghost{background:none;color:var(--ink);box-shadow:inset 0 0 0 1px var(--rule)}
.btn--ghost:hover{background:var(--ink);color:var(--paper);box-shadow:inset 0 0 0 1px var(--ink)}
.btn--light{background:var(--paper);color:var(--ink)}
.btn--light:hover{background:var(--accent);color:#fff}

/* ------------------------------------------------ nav */
.nav{position:fixed;inset:0 0 auto 0;z-index:60;height:var(--nav-h);
  background:color-mix(in srgb,var(--paper) 82%,transparent);
  backdrop-filter:saturate(1.3) blur(14px);-webkit-backdrop-filter:saturate(1.3) blur(14px);
  border-bottom:1px solid transparent;
  transition:transform .55s var(--ease-out),border-color .4s var(--ease),background .4s var(--ease)}
.nav.is-stuck{border-bottom-color:var(--rule)}
.nav.is-hidden{transform:translateY(-101%)}
.nav__in{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut);height:100%;
  display:flex;align-items:center;gap:26px}
.nav__brand{font-family:var(--display);font-weight:600;font-size:1.0rem;letter-spacing:-.02em;
  display:flex;align-items:center;gap:9px}
.nav__dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none}
.nav__links{margin-left:auto;display:flex;align-items:center;gap:clamp(14px,2vw,30px)}
.nav__links a{font-family:var(--mono);font-size:.6875rem;letter-spacing:.13em;text-transform:uppercase;
  font-weight:500;color:var(--muted);transition:color .3s var(--ease);position:relative;padding:4px 0}
.nav__links a:hover,.nav__links a.is-active{color:var(--ink)}
.nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:var(--accent);transform:scaleX(0);transform-origin:right;
  transition:transform .45s var(--ease-out)}
.nav__links a:hover::after{transform:scaleX(1);transform-origin:left}
.nav__cta{padding:9px 16px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--rule);
  color:var(--ink)!important}
.nav__cta:hover{background:var(--ink);color:var(--paper)!important;box-shadow:inset 0 0 0 1px var(--ink)}
.nav__cta::after{display:none}
@media(max-width:700px){
  .nav__links a:not(.nav__cta){display:none}
  .nav__links a.nav__back{display:inline-flex}
}

.progress{position:fixed;top:0;left:0;height:2px;background:var(--accent);z-index:70;
  width:100%;transform:scaleX(0);transform-origin:left;will-change:transform;
  backface-visibility:hidden}

/* ------------------------------------------------ reveals */
.rv{opacity:0;will-change:transform,opacity}
.js-off .rv{opacity:1;transform:none!important}
/* the mask hides the line before it rises; the padding keeps descenders alive */
.line-mask{display:block;overflow:hidden;padding-bottom:.30em;margin-bottom:-.26em}
.line-mask>span{display:block;will-change:transform}

/* ------------------------------------------------ media */
.media{position:relative;overflow:hidden;background:var(--paper-2)}
.media img{width:100%;height:100%;object-fit:cover;display:block}
.media--r{border-radius:4px}
.media__zoom{transition:transform 1.1s var(--ease-out)}
a:hover .media__zoom,.hoverable:hover .media__zoom{transform:scale(1.035)}

figure{margin:0}
.fig__cap{display:flex;gap:10px;align-items:baseline;margin-top:12px;
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.04em;color:var(--faint);line-height:1.5}
.fig__cap b{color:var(--muted);font-weight:500;flex:none}

/* ------------------------------------------------ cursor badge */
.cursor{position:fixed;top:0;left:0;z-index:80;width:78px;height:78px;border-radius:50%;
  background:var(--accent);color:#fff;display:grid;place-items:center;pointer-events:none;
  font-family:var(--mono);font-size:.625rem;letter-spacing:.13em;text-transform:uppercase;
  opacity:0;transform:scale(.4);will-change:transform,opacity;mix-blend-mode:normal}
@media(hover:none),(max-width:860px){.cursor{display:none}}

/* ------------------------------------------------ footer */
.foot{background:var(--deep);color:#EDEBE4;padding-top:clamp(64px,8vw,116px);
  padding-bottom:36px;position:relative;overflow:hidden}
.foot a{color:inherit}
.foot__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(24px,4vw,56px);
  align-items:start}
.foot__lead{max-width:56ch}
.foot__lead a{border-bottom:1px solid var(--deep-rule)}
@media(max-width:840px){.foot__grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.foot__grid{grid-template-columns:1fr;gap:38px}}
.foot__kicker{font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;
  color:#7C7A70;margin-bottom:18px}
.foot__mail{font-family:var(--display);font-weight:500;letter-spacing:-.03em;
  font-size:clamp(1.55rem,3.6vw,2.9rem);line-height:1.05;display:inline-block;position:relative}
.foot__mail::after{content:"";position:absolute;left:0;right:0;bottom:.06em;height:1px;
  background:currentColor;opacity:.4;transform:scaleX(0);transform-origin:right;
  transition:transform .6s var(--ease-out)}
.foot__mail:hover::after{transform:scaleX(1);transform-origin:left}
.foot__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.foot__list a{font-size:.9375rem;color:#C9C6BC;transition:color .3s var(--ease);
  display:inline-flex;align-items:center;gap:8px}
.foot__list a:hover{color:#fff}
.foot__rule{height:1px;background:var(--deep-rule);margin:clamp(44px,6vw,80px) 0 24px}
.foot__bot{display:flex;flex-wrap:wrap;gap:16px;align-items:center;
  font-family:var(--mono);font-size:.625rem;letter-spacing:.11em;text-transform:uppercase;color:#6E6C63}
.foot__bot span:last-child{margin-left:auto}
.foot__word{font-family:var(--display);font-weight:600;letter-spacing:-.045em;line-height:.8;
  font-size:clamp(2.8rem,13.2vw,12.6rem);color:#161614;margin-top:14px;
  user-select:none;white-space:nowrap}

/* ------------------------------------------------ page transition */
.swipe{position:fixed;inset:0;z-index:90;background:var(--ink);transform:scaleY(0);
  transform-origin:bottom;pointer-events:none}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .rv{opacity:1!important;transform:none!important}
}

/* ============================================================
   small screens
   ============================================================ */
@media(max-width:700px){
  .nav__in{gap:14px}
  .nav__links{gap:12px}
  .nav__links a:not(.nav__cta):not(.nav__back){display:none}
}

/* mobile menu ------------------------------------------------ */
.burger{display:none;width:38px;height:38px;border-radius:50%;
  box-shadow:inset 0 0 0 1px var(--rule);align-items:center;justify-content:center;
  flex-direction:column;gap:4px;flex:none;z-index:2}
.burger span{display:block;width:15px;height:1.4px;background:var(--ink);border-radius:2px;
  transition:transform .4s var(--ease-out),opacity .25s var(--ease)}
.is-open .burger span:nth-child(1){transform:translateY(5.4px) rotate(45deg)}
.is-open .burger span:nth-child(2){opacity:0}
.is-open .burger span:nth-child(3){transform:translateY(-5.4px) rotate(-45deg)}
@media(max-width:700px){.burger{display:flex}}

.sheet{position:fixed;inset:0;z-index:55;background:var(--paper);
  padding:calc(var(--nav-h) + 30px) var(--gut) 40px;
  display:flex;flex-direction:column;gap:2px;
  clip-path:inset(0 0 100% 0);pointer-events:none;
  transition:clip-path .62s var(--ease-out)}
.is-open .sheet{clip-path:inset(0 0 0 0);pointer-events:auto}
.sheet a{font-family:var(--display);font-weight:600;letter-spacing:-.03em;
  font-size:clamp(1.65rem,7.6vw,2.4rem);line-height:1.22;padding:7px 0;
  border-bottom:1px solid var(--rule-soft);display:flex;align-items:baseline;gap:12px}
.sheet a span{font-family:var(--mono);font-size:.625rem;letter-spacing:.12em;color:var(--faint);
  margin-left:auto}
.sheet__foot{margin-top:auto;padding-top:26px;display:flex;flex-direction:column;gap:9px;
  font-family:var(--mono);font-size:.625rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted)}
.sheet__foot a{font-family:var(--mono);font-size:.625rem;letter-spacing:.12em;
  text-transform:uppercase;border:0;padding:0;font-weight:500;color:var(--ink)}
body.is-open{overflow:hidden}
@media(min-width:701px){.sheet{display:none}}

/* typography that needs more room at phone width -------------- */
@media(max-width:640px){
  .sec-head{flex-direction:column;align-items:flex-start;gap:8px}
  .sec-head__idx{padding-top:0}
  .dcap em{display:block;margin-left:0;color:var(--accent)}
  .foot__bot span:last-child{margin-left:0}
}
@media(max-width:420px){
  .hero__name{font-size:clamp(2.9rem,12.6vw,11.4rem)}
  .cta__big{font-size:clamp(1.85rem,7.4vw,6.4rem)}
  .phero__title{font-size:clamp(2.25rem,9.4vw,8.2rem)}
  .hero__disc{grid-template-columns:1fr}
}