/* ==========================================================================
   Base — design tokens, reset, type utilities, motion
   ========================================================================== */

/* ---------- Tokens ---------- */
/* Named by role, not colour: change a theme here without touching components. */
:root{
  color-scheme:light;

  /* Brand */
  --blue:#2B3BFF;
  --white:#FFFFFF;

  /* Page (light paper) */
  --bg:#F2F0EB;
  --bg-alt:#E8E4DB;      /* deeper sand for a section that follows the page colour */
  --fg:#0B0B0C;
  --text-2:#3B3934;      /* body copy */
  --text-panel:#2A2825;  /* story panel copy */
  --muted:#6A665F;       /* labels, captions */
  --muted-2:#8C887F;     /* de-emphasised display text */
  --accent-text:#2B3BFF; /* small blue text and rules on the page */
  --badge-line:rgba(43,59,255,.5);
  --hair:rgba(11,11,12,.12);
  --hair-strong:rgba(11,11,12,.3);
  --hair-panel:rgba(11,11,12,.2);
  --track:rgba(11,11,12,.05);      /* empty timeline track */
  --wash:rgba(11,11,12,.03);       /* row hover */
  --name-line:rgba(11,11,12,.18);  /* recommendation tabs */
  --grid-line:rgba(11,11,12,.045);
  --grid-line-inv:rgba(242,240,235,.035);
  --accent-display:#2B3BFF;        /* blue in big display type */
  --on-white:#0B0B0C;              /* text on fixed white panels */
  --glass:rgba(242,240,235,.82);   /* section index background */
  --grain:.08;

  /* Inverse band (Beliefs, TSight tile) */
  --inv-bg:#0B0B0C;
  --inv-fg:#F2F0EB;
  --inv-text:#CFCCC5;
  --inv-muted:#A9A69F;
  --inv-accent:#4A5BFF;  /* brand blue lifted for contrast on near-black */
  --inv-hair:rgba(242,240,235,.15);

  /* Card (recommendation letters) */
  --card:#FFFFFF;
  --card-fg:#0B0B0C;
  --card-muted:#55524C;
  --card-faint:#6E6A63;
  --card-hair:rgba(11,11,12,.22);

  /* Type */
  --font-sans:'Geist',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;

  /* Layout */
  --max:1440px;
  --gutter:clamp(22px,4.5vw,56px);
  --section-y:clamp(96px,12vw,180px);

  /* Motion */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-ui:cubic-bezier(.2,.7,.2,1);
}

/* Dark mode: follows the visitor's system setting. The light page turns ink,
   and the inverse band (Beliefs, TSight, footer) turns paper. */
@media (prefers-color-scheme: dark){
  :root{
    color-scheme:dark;
    --bg:#0E0E10; --bg-alt:#17171B; --fg:#F2F0EB;
    --text-2:#C9C6BF; --text-panel:#E2DFD8; --muted:#9A968F; --muted-2:#6E6A63;
    --accent-text:#8C96FF; --badge-line:rgba(140,150,255,.5); --accent-display:#4A5BFF;
    --hair:rgba(242,240,235,.12); --hair-strong:rgba(242,240,235,.28); --hair-panel:rgba(242,240,235,.2);
    --track:rgba(242,240,235,.07); --wash:rgba(242,240,235,.035); --name-line:rgba(242,240,235,.2);
    --grid-line:rgba(242,240,235,.035); --grid-line-inv:rgba(11,11,12,.045);
    --inv-bg:#F2F0EB; --inv-fg:#0B0B0C; --inv-text:#3B3934; --inv-muted:#6A665F; --inv-accent:#2B3BFF; --inv-hair:rgba(11,11,12,.15);
    --card:#1B1B1F; --card-fg:#F2F0EB; --card-muted:#A9A69F; --card-faint:#8E8A83; --card-hair:rgba(242,240,235,.18);
    --glass:rgba(14,14,16,.78); --grain:.1;
  }
}

/* ---------- Reset ---------- */
@media (prefers-reduced-motion: no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
h1,h2,h3,p,figure,blockquote,dl,dd,ol{margin:0}
ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
::selection{background:var(--blue);color:var(--white)}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}

/* ---------- Type utilities ---------- */
/* .d = display face, .m = mono label, .tab = tabular figures */
.d{font-family:'Antonio','Geist',system-ui,sans-serif;text-transform:uppercase;letter-spacing:-0.005em}
@media (min-width:900px){
  .d{font-family:'Anton','Antonio','Geist',system-ui,sans-serif;font-weight:400 !important;font-synthesis:none;letter-spacing:0}
}
.m{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:0.06em}
.tab{font-variant-numeric:tabular-nums}

/* Underline that draws in on hover */
.ul{background:linear-gradient(currentColor 0 0) 0 100%/0 1px no-repeat;transition:background-size .25s var(--ease-ui)}
.ul:hover{background-size:100% 1px}

/* 44px minimum touch target for inline links */
.tap{display:inline-flex;align-items:center;min-height:44px}

/* Bordered tag, e.g. "Target" */
.badge{display:inline-block;padding:1px 6px;border:1px solid var(--badge-line);color:var(--accent-text)}

/* ---------- Motion ---------- */
/* .hl = headline line that rises in · .fade = fade up on load
   .rv = reveal on scroll */
.hl{display:block;overflow:clip}
.hl>span{display:block}

@media (prefers-reduced-motion: no-preference){
  .hl>span{animation:rise .8s var(--ease-out) .1s backwards}
  .hl:nth-child(2)>span{animation-delay:.2s}
  .fade{animation:fade .9s .45s var(--ease-out) backwards}
  @supports (animation-timeline: view()){
    .rv{animation:rv linear both;animation-timeline:view();animation-range:entry 0% entry 28%}
  }
}

@keyframes rise{from{transform:translateY(100%)}}
@keyframes fade{from{opacity:0;transform:translateY(12px)}}
@keyframes rv{from{opacity:.15;transform:translateY(14px)}}
@keyframes pin{from{opacity:0;transform:translateY(16px)}}

/* ---------- Lenis smooth scroll (assets/js/smooth-scroll.js) ---------- */
html.lenis,html.lenis body{height:auto}
html.lenis{scroll-behavior:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}

/* ---------- Paper grain ---------- */
/* A faint fixed noise layer over everything, for a printed-paper feel */
body::after{content:"";position:fixed;inset:0;z-index:70;pointer-events:none;opacity:var(--grain);background: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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='3' intercept='-1'/%3E%3CfeFuncG type='linear' slope='3' intercept='-1'/%3E%3CfeFuncB type='linear' slope='3' intercept='-1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0/180px 180px}