/* ============================================================
   Bureau Blanqo — global stylesheet
   Ink + bone monochrome. EB Garamond serif + Space Mono.
   ============================================================ */

/* ---------- Fonts (self-hosted woff2) ---------- */
@font-face{
  font-family:'EB Garamond'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/eb-garamond-latin-400-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'EB Garamond'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/eb-garamond-latin-ext-400-normal.woff2') format('woff2');
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'EB Garamond'; font-style:italic; font-weight:400; font-display:swap;
  src:url('../fonts/eb-garamond-latin-400-italic.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'EB Garamond'; font-style:normal; font-weight:500; font-display:swap;
  src:url('../fonts/eb-garamond-latin-500-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'EB Garamond'; font-style:normal; font-weight:500; font-display:swap;
  src:url('../fonts/eb-garamond-latin-ext-500-normal.woff2') format('woff2');
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Space Mono'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/space-mono-latin-400-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Space Mono'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/space-mono-latin-ext-400-normal.woff2') format('woff2');
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Space Mono'; font-style:normal; font-weight:700; font-display:swap;
  src:url('../fonts/space-mono-latin-700-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Space Mono'; font-style:normal; font-weight:700; font-display:swap;
  src:url('../fonts/space-mono-latin-ext-700-normal.woff2') format('woff2');
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---------- Tokens ---------- */
:root{
  /* palette (pure neutral monochrome) */
  --ink:#0F0F11;
  --bone:#ECE7DB;
  --para:#CFC9BC;
  --muted:#9A968B;
  --stone:#6E6A5E;
  --dim:#4A4740;
  --hair:#34322B;

  /* type */
  --serif:'EB Garamond', Georgia, 'Times New Roman', serif;
  --mono:'Space Mono', ui-monospace, 'Courier New', monospace;

  /* fluid type scale */
  --fs-body: clamp(16px, 1.05rem + 0.2vw, 18px);
  --fs-lead: clamp(20px, 1.2rem + 0.6vw, 26px);
  --fs-h2:   clamp(24px, 1.4rem + 1.1vw, 34px);
  --fs-label: 11px;

  /* spacing */
  --gutter: clamp(22px, 5vw, 56px);
  --maxw: 1180px;
  --measure: 60ch;

  /* motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur: 0.9s;
  --dur-fast: 0.45s;

  --nav-h: clamp(58px, 8vh, 76px);
}

/* ---------- Reset / base ---------- */
*{box-sizing:border-box; margin:0; padding:0}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}

body{
  background:var(--ink);
  color:var(--para);
  font-family:var(--serif);
  font-size:var(--fs-body);
  line-height:1.7;
  font-variant-numeric:lining-nums tabular-nums;
  font-feature-settings:'lnum' 1, 'tnum' 1, 'kern' 1;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  min-height:100vh;
  overflow-x:hidden;
}

img,svg{display:block; max-width:100%}
::selection{background:var(--bone); color:var(--ink)}

/* ---------- Type ---------- */
h1,h2,h3{font-weight:500; line-height:1.15}
.serif{font-family:var(--serif)}
.mono{
  font-family:var(--mono); text-transform:uppercase;
  letter-spacing:0.2em; font-size:var(--fs-label); font-weight:400;
}
p{max-width:var(--measure)}
em,i{font-style:italic; color:var(--bone)}

/* ---------- Layout ---------- */
.wrap{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter)}

/* ---------- Links ---------- */
a{color:inherit; text-decoration:none}
a:focus-visible,
button:focus-visible{
  outline:2px solid var(--bone);
  outline-offset:3px;
  border-radius:1px;
}

/* underline-on-hover for inline text links */
.link{
  color:var(--bone);
  background-image:linear-gradient(var(--stone),var(--stone));
  background-size:100% 1px; background-repeat:no-repeat; background-position:0 100%;
  transition:background-size var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  padding-bottom:2px;
}
.link:hover{background-image:linear-gradient(var(--bone),var(--bone))}

/* ---------- Nav ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:50;
  height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between;
  padding-inline:var(--gutter);
  pointer-events:none;
}
.nav a{pointer-events:auto}
.nav__mark{display:inline-flex; align-items:center}
.nav__mark img{height:46px; width:auto; opacity:0.92; transition:opacity var(--dur-fast) var(--ease)}
.nav__mark:hover img{opacity:1}
.nav__wordmark{display:none}
.nav__links{display:flex; gap:clamp(18px,3vw,34px); align-items:center}
.nav__links a{
  font-family:var(--mono); text-transform:uppercase; font-size:var(--fs-label);
  letter-spacing:0.22em; color:var(--muted);
  transition:color var(--dur-fast) var(--ease);
}
.nav__links a:hover,.nav__links a[aria-current="page"]{color:var(--bone)}

/* ---------- Footer ---------- */
.footer{
  border-top:1px solid var(--hair);
  margin-top:clamp(80px,14vh,160px);
}
.footer__inner{
  display:flex; flex-wrap:wrap; gap:clamp(28px,5vw,64px);
  align-items:flex-start; justify-content:space-between;
  padding-block:clamp(40px,7vh,72px);
}
.footer__mark img{height:66px; width:auto; opacity:0.9}
.footer__col{display:flex; flex-direction:column; gap:10px}
.footer__label{font-family:var(--mono); text-transform:uppercase; letter-spacing:0.2em;
  font-size:10px; color:var(--muted)}
.footer__email{
  font-family:var(--serif); font-size:clamp(17px,2.4vw,20px); color:var(--bone);
  letter-spacing:0.01em;
}
.footer__line{font-family:var(--mono); font-size:11px; letter-spacing:0.12em; color:var(--muted)}
.footer__line a{color:var(--muted); transition:color var(--dur-fast) var(--ease)}
.footer__line a:hover{color:var(--bone)}
.footer__meta{
  display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center;
  padding-bottom:clamp(28px,5vh,44px);
  font-family:var(--mono); font-size:10px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--muted);
}
.footer__meta .sep{color:var(--dim)}
.footer__meta a{color:var(--muted); transition:color var(--dur-fast) var(--ease)}
.footer__meta a:hover{color:var(--bone)}

/* ---------- Shared section label ---------- */
.section-label{
  color:var(--muted);
  padding-top:16px; border-top:1px solid var(--hair);
  margin-bottom:clamp(22px,4vh,38px);
}

/* ---------- Full-height panels ---------- */
.panel{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding-block:clamp(100px,15vh,150px);   /* clear the nav and the cue */
  padding-inline:var(--gutter);
}

/* ---------- Shared scroll cue ---------- */
.scroll-cue{
  position:absolute; left:50%; bottom:clamp(22px,4vh,40px); transform:translateX(-50%);
  display:inline-flex; flex-direction:column; align-items:center; gap:11px;
  color:var(--muted); transition:color var(--dur-fast) var(--ease); z-index:4;
}
.scroll-cue:hover{color:var(--bone)}
.scroll-cue__label{font-size:9px; letter-spacing:0.32em}
.scroll-cue__line{
  position:relative; display:block; width:1px; height:42px; overflow:hidden;
  background:linear-gradient(var(--dim), transparent);
}
.scroll-cue__dot{
  position:absolute; top:0; left:50%; width:3px; height:3px; margin-left:-1.5px;
  border-radius:50%; background:var(--bone);
  animation:cue-fall 2.4s var(--ease-soft) infinite;
}
@keyframes cue-fall{
  0%{transform:translateY(-4px); opacity:0}
  25%{opacity:1}
  80%{opacity:1}
  100%{transform:translateY(40px); opacity:0}
}

/* ---------- Hero (the sky) ---------- */
.hero{overflow:hidden; isolation:isolate; text-align:center}
.hero__field,
.sky-canvas{
  position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none;
}
.sky-canvas{pointer-events:auto}        /* receives touch to light the stars */
.hero__wordmark{
  position:absolute; left:50%; top:30%; transform:translate(-50%,-50%);
  width:min(640px,84vw); height:auto; z-index:2;
}
/* desktop: the wordmark lives in the nav (centered masthead) */
@media (min-width:768px){
  .hero__wordmark{display:none}
  .nav__wordmark{
    display:block; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    pointer-events:auto;
  }
  .nav__wordmark img{
    height:38px; width:auto; opacity:0.95;
    transition:opacity var(--dur-fast) var(--ease);
  }
  .nav__wordmark:hover img{opacity:1}
}
.hero__tagline{
  position:absolute; left:50%; top:66%; transform:translate(-50%,-50%);
  width:max-content; max-width:88vw; z-index:2;
  font-size:var(--fs-lead); color:var(--bone); letter-spacing:0.01em;
}

/* ---------- Statement ---------- */
.statement{align-items:center; text-align:center; overflow:hidden; isolation:isolate}
.statement__line{
  position:relative; z-index:1;
  font-size:clamp(30px,6.4vw,66px); line-height:1.12; color:var(--bone);
  max-width:20ch; letter-spacing:0.005em; margin-inline:auto;
}
.statement__mark{
  position:relative; z-index:1; display:block; margin-inline:auto;
  height:clamp(42px,5.5vw,52px); width:auto;
  margin-top:clamp(26px,4.5vh,44px);
}

/* ---------- What we do ---------- */
.about{align-items:flex-start; justify-content:safe center; text-align:left}
.about__inner{width:100%; max-width:min(680px,92vw)}
.about__body{display:flex; flex-direction:column; gap:clamp(11px,1.5vh,17px); max-width:40ch}
.about__line{font-size:clamp(15px,1.7vw,19px); line-height:1.5; color:var(--para)}
.about__line:first-child{color:var(--bone)}

/* ---------- Contact ---------- */
.contact{align-items:center; text-align:center}
.contact__inner{width:100%; max-width:min(840px,92vw); margin-inline:auto}
.contact .section-label{max-width:none}
.contact__email{
  display:inline-block;
  font-size:clamp(28px,6.4vw,72px); line-height:1.05; color:var(--bone);
  letter-spacing:0.005em;
  background-image:linear-gradient(var(--stone),var(--stone));
  background-size:100% 1px; background-repeat:no-repeat; background-position:0 102%;
  transition:background-size var(--dur) var(--ease), color var(--dur-fast) var(--ease);
  padding-bottom:6px; word-break:break-word;
}
.contact__email:hover{background-image:linear-gradient(var(--bone),var(--bone))}
.contact__social{color:var(--muted); margin-top:clamp(22px,4vh,38px)}
.contact__social a{color:var(--muted); transition:color var(--dur-fast) var(--ease)}
.contact__social a:hover{color:var(--bone)}
.contact__social .sep{color:var(--dim); margin:0 10px}

/* ---------- Info page ---------- */
.info-intro{
  min-height:86svh;
  display:flex; flex-direction:column; justify-content:center;
  padding-block:clamp(118px,18vh,180px);
}
.info-statement{
  font-size:clamp(21px,2.7vw,32px); line-height:1.4; color:var(--para);
  max-width:33ch; margin-top:clamp(16px,3vh,26px);
}
.info-statement .hl{color:var(--bone)}

.info-section{padding-block:clamp(52px,9vh,104px)}

.do-list{list-style:none; margin-top:2px}
.do-item{
  display:grid; grid-template-columns:minmax(140px,210px) 1fr; gap:clamp(8px,3vw,40px);
  align-items:baseline; padding-block:clamp(18px,2.6vh,26px);
  border-top:1px solid var(--hair);
}
.do-item:last-child{border-bottom:1px solid var(--hair)}
.do-item__label{
  font-family:var(--mono); text-transform:uppercase; letter-spacing:0.18em;
  font-size:12px; color:var(--bone);
}
.do-item__desc{font-size:clamp(17px,2vw,22px); line-height:1.45; color:var(--para); max-width:44ch}

.principles{list-style:none; display:flex; flex-direction:column; gap:clamp(10px,1.8vh,18px); margin-top:4px}
.principle{font-size:clamp(20px,2.6vw,30px); line-height:1.3; color:var(--bone)}

.info-contact{padding-bottom:clamp(48px,9vh,96px)}
.info-email{
  display:inline-block; font-size:clamp(26px,5vw,54px); line-height:1.06; color:var(--bone);
  letter-spacing:0.005em; padding-bottom:6px; word-break:break-word;
  background-image:linear-gradient(var(--stone),var(--stone));
  background-size:100% 1px; background-repeat:no-repeat; background-position:0 102%;
  transition:background-size var(--dur) var(--ease), color var(--dur-fast) var(--ease);
}
.info-email:hover{background-image:linear-gradient(var(--bone),var(--bone))}

@media (max-width:560px){
  .do-item{grid-template-columns:1fr; gap:6px}
}

/* ---------- Pre-launch gate ---------- */
.gate{
  position:relative; isolation:isolate; overflow:hidden;
  min-height:100svh;
  display:flex; align-items:center; justify-content:center; text-align:center;
  padding-inline:var(--gutter);
}
.gate .sky-canvas{position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:auto}
.gate__inner{position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; max-width:min(560px,88vw)}
.gate__wordmark{width:min(460px,80vw); height:auto}
.gate__label{color:var(--muted); font-size:10px; letter-spacing:0.32em; margin-top:clamp(22px,4vh,34px)}
.gate__form{display:flex; gap:10px; margin-top:clamp(26px,5vh,42px); width:min(420px,86vw)}
.gate__input{
  flex:1; min-width:0; background:transparent; border:1px solid var(--hair); border-radius:0;
  color:var(--bone); font-family:var(--mono); font-size:13px; letter-spacing:0.08em;
  padding:13px 15px; outline:none; transition:border-color var(--dur-fast) var(--ease);
}
.gate__input::placeholder{color:var(--stone); letter-spacing:0.08em}
.gate__input:focus{border-color:var(--muted)}
.gate__btn{
  background:var(--bone); color:var(--ink); border:none; border-radius:0; cursor:pointer;
  font-family:var(--mono); text-transform:uppercase; letter-spacing:0.16em; font-size:11px;
  padding:13px 22px; transition:opacity var(--dur-fast) var(--ease);
}
.gate__btn:hover{opacity:0.88}
.gate__error{color:var(--muted); font-size:11px; letter-spacing:0.06em; margin-top:16px}

/* ---------- Legal page ---------- */
.legal-intro{padding-block:clamp(116px,17vh,176px) clamp(10px,2vh,24px)}
.legal-title{font-size:clamp(28px,4vw,44px); color:var(--bone); line-height:1.15}
.legal-updated{font-family:var(--mono); font-size:10px; letter-spacing:0.18em; text-transform:uppercase; color:var(--muted); margin-top:14px}
.legal-section{padding-block:clamp(26px,5vh,52px)}
.legal-section h2{margin-bottom:clamp(18px,3vh,28px)}
.legal-section h3{font-family:var(--serif); font-weight:500; font-size:clamp(17px,2vw,21px); color:var(--bone); margin:clamp(18px,3vh,26px) 0 8px}
.legal-section p{font-size:clamp(15px,1.6vw,17px); line-height:1.62; color:var(--para); max-width:74ch; margin-bottom:12px}
.legal-section ul{list-style:none; max-width:74ch; margin:4px 0 12px}
.legal-section ul li{position:relative; padding-left:18px; font-size:clamp(15px,1.6vw,17px); line-height:1.6; color:var(--para); margin-bottom:8px}
.legal-section ul li::before{content:""; position:absolute; left:0; top:0.7em; width:6px; height:1px; background:var(--stone)}
.legal-section a{color:var(--bone); border-bottom:1px solid var(--hair)}
.legal-section a:hover{border-bottom-color:var(--bone)}
.legal-fields{margin-top:4px}
.legal-fields > div{
  display:grid; grid-template-columns:minmax(150px,210px) 1fr; gap:clamp(8px,3vw,40px);
  align-items:baseline; padding-block:clamp(12px,2vh,18px); border-top:1px solid var(--hair);
}
.legal-fields > div:last-child{border-bottom:1px solid var(--hair)}
.legal-fields dt{font-family:var(--mono); text-transform:uppercase; letter-spacing:0.16em; font-size:11px; color:var(--muted)}
.legal-fields dd{font-size:clamp(15px,1.7vw,18px); line-height:1.5; color:var(--para)}
.legal-fields dd .strong{color:var(--bone)}
@media (max-width:560px){
  .legal-fields > div{grid-template-columns:1fr; gap:5px}
}

/* ---------- Reveal system (one pattern everywhere) ---------- */
[data-reveal]{
  opacity:0; transform:translateY(18px);
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  will-change:opacity, transform;
}
[data-reveal].is-visible{opacity:1; transform:none}

/* ---------- Page fade transition ---------- */
.page{opacity:0; transition:opacity var(--dur-fast) var(--ease-soft)}
.page.is-ready{opacity:1}
.page.is-leaving{opacity:0}

/* ---------- First-load intro (once per session; JS-activated) ----------
   The wordmark resolves on a full ink screen, holds, then the whole overlay
   cross-dissolves out while the resting wordmark fades in at its spot.
   Editorial and still: opacity only, no travel. */
html.intro-lock{overflow:hidden}
.intro{
  position:fixed; inset:0; z-index:200; background:var(--ink);
  display:none; align-items:center; justify-content:center; pointer-events:none;
  opacity:1; transition:opacity 1.1s var(--ease);
}
.intro.is-active{display:flex}
.intro__wordmark{
  width:min(620px,82vw); height:auto; transform-origin:center center;
  opacity:0; filter:blur(8px); transform:scale(1.02);
  transition:opacity 1.3s var(--ease), filter 1.3s var(--ease), transform 1.3s var(--ease);
  will-change:opacity, filter, transform;
}
.intro.is-resolving .intro__wordmark{opacity:1; filter:blur(0); transform:scale(1)}
.intro.is-leaving{opacity:0}
.intro.is-done{display:none}

/* resting wordmark stays dark through the intro, then fades in as it leaves */
.nav__wordmark,
.hero__wordmark{transition:opacity 1s var(--ease)}
html.intro-lock .nav__wordmark,
html.intro-lock .hero__wordmark{opacity:0}

/* ---------- Utilities ---------- */
.visually-hidden{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link{
  position:fixed; top:8px; left:8px; z-index:100;
  background:var(--bone); color:var(--ink);
  font-family:var(--mono); font-size:12px; letter-spacing:0.1em; text-transform:uppercase;
  padding:8px 14px; transform:translateY(-160%);
  transition:transform var(--dur-fast) var(--ease);
}
.skip-link:focus{transform:none}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:0.001ms !important; animation-iteration-count:1 !important;
    transition-duration:0.001ms !important; scroll-behavior:auto !important;
  }
  [data-reveal]{opacity:1; transform:none}
  .page{opacity:1}
}