/* ─── Bitfinco — base: tokens, resets, ::selection, reduced motion, cookie banner ─── */

:root{
  /* Surfaces */
  --bg:        #FBFAF6;
  --bg-2:      #F2EFE7;
  --line:      #E0DCD0;
  --line-soft: #ECE9DE;

  /* Ink + text */
  --ink:       #131722;
  --text:      #2A2D35;
  --text-dim:  #5C5F68;
  --text-mute: #8B8E94;

  /* Brand */
  --gold:       #BE9936;
  --gold-hi:    #D4B14C;
  --gold-on-ink:#1A1305;
  --navy:       #0F1E3A;
  --navy-deep:  #0A1428;

  /* Footer ink (dark navy footer; pale gold-tinted typography) */
  --footer-text:    #C8BFA1;
  --footer-text-2:  #A89970;
  --footer-meta:    #9A926F;
  --footer-meta-2:  #8A815E;

  /* Functional */
  --red: #C04A3A;

  /* Layout */
  --nav-height:    84px;
  --container-max: 1320px;
  --container-x:   40px;

  /* Typography scale — apply via tokens so a size changes once and propagates everywhere */
  --type-display: clamp(48px, 6vw,    96px);  /* hero h1 only */
  --type-section: clamp(40px, 5vw,    72px);  /* main section headlines + page h1 */
  --type-mid:     clamp(28px, 3.2vw,  44px);  /* mid-tier headlines (thesis/hours/person h4) */
  --type-sub:     clamp(22px, 2vw,    28px);  /* numbered legal subsections */
  --type-lead:    clamp(18px, 1.55vw, 22px);  /* intros, lead paragraphs */
  --type-body:    18px;                       /* standard body text */
}

/* data-delay → --reveal-delay bridge. CSP forbids style="--reveal-delay:Nms"
   on individual elements, so the stagger lives here as enumerated rules. */
[data-delay="80"]  { --reveal-delay:  80ms; }
[data-delay="120"] { --reveal-delay: 120ms; }
[data-delay="160"] { --reveal-delay: 160ms; }
[data-delay="200"] { --reveal-delay: 200ms; }
[data-delay="280"] { --reveal-delay: 280ms; }

*{box-sizing:border-box;margin:0;padding:0}
/* overflow-x:clip prevents the data-reveal translateX(±32px) initial offsets from extending
   the document width on the home page (which would otherwise create a horizontal scrollbar
   on mobile, or pull elements past the viewport edge on Playwright/measurement tools). */
html{scroll-behavior:smooth;overflow-x:clip}
body{
  background:var(--bg);color:var(--text);
  font-family:'Bricolage Grotesque',system-ui,sans-serif;
  font-weight:400;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}

::selection{background:var(--gold);color:var(--gold-on-ink)}

/* ─── Cookie banner (injected by site.js on every page) ─── */
#cookie-banner{
  position:fixed;right:24px;bottom:24px;z-index:200;
  background:var(--ink);color:#E4DCC1;
  padding:18px 22px;display:none;
  font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.03em;line-height:1.55;
  align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  max-width:420px;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.4);
}
#cookie-banner.show{display:flex}
#cookie-banner a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}
#cookie-banner button{
  background:var(--gold);color:var(--gold-on-ink);
  /* Bumped from 10x20 — the previous 40x32 effective target failed WCAG 2.5.5. */
  padding:13px 22px;
  font-family:'Bricolage Grotesque',sans-serif;font-size:11.5px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;transition:background .25s;
}
#cookie-banner button:hover{background:var(--gold-hi)}
@media (max-width:520px){
  #cookie-banner{left:12px;right:12px;bottom:12px;padding:14px 16px;gap:14px}
}

/* ─── Reduced motion ─── */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}

/* ─── Focus indicators ─── */
:focus{outline:none}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:2px}
/* Buttons sitting on dark surfaces need a light ring + dark halo so the ring contrasts both ways. */
.btn-primary:focus-visible,
.submit-btn:focus-visible,
.nav-drawer .drawer-cta:focus-visible,
.notfound .actions .primary:focus-visible,
#cookie-banner button:focus-visible{
  outline-color:var(--bg);
  box-shadow:0 0 0 4px var(--ink);
}
/* Form inputs: replace the gold-border-on-:focus with a real keyboard-only ring. */
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible{
  outline:2px solid var(--ink);outline-offset:0;border-color:var(--ink);
}

/* ─── Primary nav links (desktop row + section/page markers) ─── */
.nav-links{
  display:flex;gap:26px;font-size:13.5px;color:var(--text);font-weight:500;
  letter-spacing:.005em;font-family:'Bricolage Grotesque',sans-serif;
}
.nav-links a{transition:color .2s;position:relative}
.nav-links a::after{
  content:"";position:absolute;bottom:-32px;left:0;right:0;height:2px;
  background:var(--gold);transform:scaleX(0);transition:transform .3s;
}
@media (hover:hover){
  .nav-links a:hover{color:var(--gold)}
  .nav-links a:hover::after{transform:scaleX(1)}
}
/* Active page / section marker — gold text + permanent underline.
   `[aria-current="page"]` is set server-side by nav.njk on dedicated pages;
   `.is-current` is toggled by home-app.js's scroll-spy as sections enter. */
.nav-links a[aria-current="page"],
.nav-links a.is-current{color:var(--gold)}
.nav-links a[aria-current="page"]::after,
.nav-links a.is-current::after{transform:scaleX(1)}

/* ─── Buttons (shared across home + interior pages) ─── */
.btn{
  padding:13px 24px;font-size:12.5px;font-weight:600;letter-spacing:.08em;
  transition:all .25s;display:inline-flex;align-items:center;gap:10px;
  font-family:'Bricolage Grotesque',sans-serif;text-transform:uppercase;
}
.btn-primary{background:var(--navy);color:var(--bg)}
@media (hover:hover){.btn-primary:hover{background:var(--ink)}}

/* ─── Mobile drawer (toggle + drawer panel, shared) ─── */
.nav-toggle{
  display:none;
  /* WCAG 2.5.5 Level AAA minimum target size — was 42x42. */
  width:44px;height:44px;
  flex-direction:column;justify-content:center;align-items:center;gap:5px;
}
.nav-toggle span{
  display:block;width:22px;height:2px;background:var(--ink);
  transition:transform .25s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.nav-drawer{
  position:fixed;inset:var(--nav-height) 0 0 0;z-index:90;
  background:var(--bg);display:none;
  flex-direction:column;align-items:flex-start;
  padding:48px 40px 40px;gap:6px;overflow-y:auto;
}
.nav-drawer.open{display:flex}
.nav-drawer a{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:300;
  font-size:clamp(28px,5vw,40px);letter-spacing:-.02em;
  color:var(--ink);padding:14px 0;
  border-bottom:1px solid var(--line-soft);width:100%;transition:color .2s;
}
.nav-drawer .drawer-cta{
  margin-top:28px;border:none;width:auto;
  font-family:'Bricolage Grotesque',sans-serif;font-size:12.5px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;
  padding:16px 28px;background:var(--navy);color:var(--bg);
}
@media (hover:hover){
  .nav-drawer a:hover{color:var(--gold)}
  .nav-drawer .drawer-cta:hover{background:var(--gold);color:var(--gold-on-ink)}
}
.nav-drawer a[aria-current="page"],
.nav-drawer a.is-current{color:var(--gold)}
body.nav-open{overflow:hidden}

/* Below desktop: hide the inline link row, show the hamburger. */
@media (max-width:1140px){
  .nav-links{display:none}
  .nav-toggle{display:flex}
  .nav-cta{display:none}
}

/* ─── Skip to content ─── */
.skip-link{
  position:absolute;left:-10000px;top:0;z-index:1000;
  padding:12px 18px;background:var(--ink);color:var(--bg);
  font-family:'Bricolage Grotesque',sans-serif;font-size:13px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;
}
.skip-link:focus{left:8px;top:8px}

/* ─── Small viewports: reduce horizontal gutter so 320px phones don't lose 80px to padding. ─── */
@media (max-width:600px){
  :root{--container-x:20px;--nav-height:64px;}
}