/* ==========================================================================
   Alta Park Capital - public site
   Brand tokens are locked by the alta-park-brand skill (SKILL.md v1.2).
   Do not introduce a colour or typeface that is not in that document.

   Ground        parchment #F3EFE6, per the "navy is the gated surface" split
   Texture       the microsite light grain, 4.5% under a multiply blend
   Type          Albert Sans, self-hosted from @fontsource (same source the
                 investor app uses, so the two surfaces cannot drift)
   Print         white, no tint, no grain - the brand's print rule
   ========================================================================== */

@font-face{
  font-family:'Albert Sans'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/albert-sans-400.woff2') format('woff2');
}
@font-face{
  font-family:'Albert Sans'; font-style:normal; font-weight:500; font-display:swap;
  src:url('fonts/albert-sans-500.woff2') format('woff2');
}
@font-face{
  font-family:'Albert Sans'; font-style:normal; font-weight:600; font-display:swap;
  src:url('fonts/albert-sans-600.woff2') format('woff2');
}

:root{
  /* brand-locked */
  --navy:#0C324F; --charcoal:#333333; --steel:#5F90B3;
  --slate:#6F6F6F; --silver:#C0C0C0; --white:#FFFFFF;
  --cream:#FBF9F4; --parchment:#F3EFE6;

  --hair:rgba(192,192,192,.55);
  --rail:rgba(95,144,179,.16);
  --font:'Albert Sans',Arial,Helvetica,sans-serif;
  --gut:clamp(1.5rem,4.5vw,4.5rem);

  /* The composition stops growing here and centres. Without it, the statement
     hits its size cap while the screen keeps widening, and the page becomes a
     small block of text floating in a very large field. Set wide enough that a
     1920 screen is essentially unaffected; it bites on QHD and ultrawide. */
  --shell-max:110rem;

  /* The surface is TWO layers, matching the navy shell in app/globals.css.
     1. grain - fractal noise paper tooth. No fixed period, so it cannot moire
        on a scaled display. Raised from the microsite's 4.5% to 7.5%, the same
        value the navy weave uses, because at 4.5% on a bright wide monitor it
        read as nothing at all.
     2. a light term - on the dark shell that is a light pool from the top. The
        light-ground equivalent is the inverse: a soft deepening toward the
        edges, so a very wide field reads as a framed sheet of material rather
        than flat paint. */
  --grain: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.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --vignette:radial-gradient(125% 90% at 50% 40%, rgba(111,111,111,0) 52%, rgba(111,111,111,.06) 100%);
}
/* The site commits to one visual world. A corporate homepage does not follow
   the reader's OS theme, so the tokens are re-asserted against any override. */
:root[data-theme="dark"],:root[data-theme="light"]{--parchment:#F3EFE6; --cream:#FBF9F4}

*,*::before,*::after{box-sizing:border-box}

html{scrollbar-gutter:stable}

body{
  margin:0; font-family:var(--font); font-size:1.0625rem; line-height:1.65;
  color:var(--charcoal); background-color:var(--parchment);
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
p,h1,h2,ul,ol,dl,dd{margin:0}
a{color:inherit}
:focus-visible{outline:1px solid var(--steel); outline-offset:4px}

/* ── Shell ─────────────────────────────────────────────────────────────── */
.page{
  position:relative;
  min-height:100svh; display:flex; flex-direction:column; padding:var(--gut);
  /* the edge deepening is full-bleed: the material runs to the monitor edge
     even though the composition inside is capped */
  background-image:var(--vignette);
}
/* the grain sits under the content, never over the type */
.grain{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:var(--grain); opacity:.075; mix-blend-mode:multiply;
}
/* content is capped and centred; the ground behind it is not */
.page > *:not(.grain){
  position:relative; z-index:1;
  width:100%; max-width:var(--shell-max); margin-inline:auto;
}

/* ── Masthead ──────────────────────────────────────────────────────────────
   The nav slot is deliberately empty. `min-height` reserves the row so adding
   nav items later (a portfolio page, for instance) causes no layout shift.
   See the commented markup in index.html for where they go. */
.masthead{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:1rem clamp(1.5rem,4vw,3rem); flex-wrap:wrap; min-height:1.5rem;
  padding-bottom:clamp(1rem,2.5vh,1.75rem); border-bottom:1px solid var(--hair);
}
.mark{
  font-size:.9375rem; letter-spacing:.22em; font-weight:400; color:var(--slate);
  white-space:nowrap; text-decoration:none;
}
.mark b{font-weight:600; color:var(--navy)}
.mark:hover b{color:var(--steel)}
.nav{display:flex; gap:clamp(1.25rem,3vw,2.25rem)}
.nav a{
  font-size:.6875rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--slate); text-decoration:none; padding-bottom:.1875rem;
  border-bottom:1px solid transparent; transition:color .18s,border-color .18s;
}
.nav a:hover{color:var(--navy); border-bottom-color:var(--steel)}

/* ── Home: one statement set low, with a vertical hairline closing the grid ─ */
.field{
  flex:1; display:grid;
  grid-template-columns:minmax(0,1fr) clamp(8rem,24%,15rem);
  column-gap:clamp(1.5rem,4vw,4rem);
}
.field-main{
  display:flex; flex-direction:column; justify-content:flex-end;
  padding-block:clamp(3rem,10vh,7rem) clamp(2.5rem,8vh,5.5rem);
}
.field-aside{border-left:1px solid var(--hair)}
/* Medium, not Regular: dark type on a light ground reads optically lighter
   than light type on a dark ground, so the weight is compensated. */
/* The upper bound is what fills a wide screen. At 2.875rem the statement stayed
   small while the monitor grew, which is what made the page look bare. */
.statement{
  font-size:clamp(1.625rem,3.4vw,3.75rem); font-weight:500; color:var(--navy);
  line-height:1.28; letter-spacing:-.014em; max-width:30ch; text-wrap:pretty;
}

/* 37 demo URLs on the old WordPress site will land here after cutover, so this
   page is a real destination rather than an afterthought. */
.lost{
  margin-top:1.5rem; max-width:36ch; font-size:1rem; line-height:1.6; color:var(--slate);
}
.lost a{color:var(--navy); text-decoration:none; border-bottom:1px solid var(--steel)}
.lost a:hover{color:var(--steel)}

/* ── Legal: a cream reading sheet on the parchment ground ──────────────── */
.main{flex:1; padding-block:clamp(2rem,5vh,3.5rem) clamp(2.5rem,6vh,4rem)}
.sheet{
  background:var(--cream); max-width:72rem; margin-inline:auto;
  padding:clamp(2rem,5vw,4.5rem) clamp(1.5rem,4vw,4rem);
  /* on a light ground the sheet is defined by a hairline and a soft lift */
  border:1px solid var(--hair);
  box-shadow:0 1px 2px rgba(12,50,79,.04), 0 12px 32px rgba(12,50,79,.06);
}
.doc-head{padding-bottom:clamp(1.5rem,3vw,2.25rem); border-bottom:1px solid var(--hair)}
.doc-head h1{
  font-size:clamp(1.5rem,2.6vw,2rem); font-weight:600; color:var(--navy);
  letter-spacing:-.012em; line-height:1.2;
}
.stamp{
  display:inline-block; margin-top:.875rem; font-size:.6875rem; letter-spacing:.14em;
  text-transform:uppercase; font-weight:600; color:var(--slate);
}
.doc-body{
  display:grid; grid-template-columns:minmax(0,13rem) minmax(0,1fr);
  gap:clamp(2rem,4vw,3.5rem); padding-top:clamp(1.75rem,3.5vw,2.5rem);
}
/* A section list on a 65-word document is absurd. The Cookie Policy runs plain. */
.doc-body--plain{grid-template-columns:minmax(0,1fr)}
.toc{position:sticky; top:1.5rem; align-self:start; display:flex; flex-direction:column; gap:.75rem}
.toc p{font-size:.625rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--slate)}
.toc ol{list-style:none; padding:0; display:flex; flex-direction:column; gap:.5rem}
.toc a{
  font-size:.8125rem; line-height:1.45; color:var(--slate); text-decoration:none;
  border-left:1px solid var(--hair); padding-left:.75rem; display:block;
  transition:color .18s,border-color .18s;
}
.toc a:hover{color:var(--navy); border-left-color:var(--steel)}

.prose{max-width:66ch; display:flex; flex-direction:column; gap:1.125rem}
.prose h2{
  font-size:1.0625rem; font-weight:600; color:var(--navy); letter-spacing:-.004em;
  line-height:1.35; margin-top:1.5rem; scroll-margin-top:1.5rem;
}
.prose h2:first-child{margin-top:0}
.prose p{font-size:.9375rem; line-height:1.75}
.prose ul{display:flex; flex-direction:column; gap:.625rem; padding-left:1.125rem}
.prose li{font-size:.9375rem; line-height:1.75}
.prose a{color:var(--navy); text-decoration:none; border-bottom:1px solid var(--steel)}
/* the shouty all-caps blocks get contained by a rule rather than dominating */
.caps{
  font-size:.8125rem; line-height:1.7; letter-spacing:.012em; color:var(--slate);
  border-left:2px solid var(--rail); padding-left:1.125rem;
}
/* NOTE: a `.missing` style once existed here to render a visible "counsel to supply
   this" annotation inside the Cookie Policy. It was removed on 2026-08-05: an
   internal review note has no business rendering on a public legal page. Review
   annotations belong in HTML comments and in Diana's pack, never in the prose.
   check-www-shell.mjs now fails the build if one reappears. */

/* ── Metadata band, on every page ──────────────────────────────────────── */
.band{border-top:1px solid var(--hair); padding-top:clamp(1.25rem,3vh,1.875rem)}
/* The rule spans the full width; the metadata inside stays packed. Four equal
   columns across a very wide page turns 13px labels into four lonely specks. */
.band-grid{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1.75rem clamp(1.5rem,3vw,3rem); align-items:start; max-width:74rem;
}
.cell{display:flex; flex-direction:column; gap:.5rem}
.k{
  font-size:.625rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--slate); line-height:1;
}
.vals{display:flex; flex-direction:column; gap:.3125rem}
.v{font-size:.8125rem; line-height:1.5; color:var(--navy)}
a.v{
  width:fit-content; text-decoration:none; border-bottom:1px solid transparent;
  transition:color .18s,border-color .18s;
}
a.v:hover{color:var(--steel); border-bottom-color:var(--steel)}
.cell--mail a.v{border-bottom-color:var(--hair)}
.cell [aria-current="page"]{color:var(--slate)}

.note{
  margin-top:clamp(1.75rem,4vh,2.75rem); font-size:.6875rem; line-height:1.7;
  color:var(--slate); max-width:56rem;
}

/* ── One quiet load moment on the front door, then still ───────────────── */
@media (prefers-reduced-motion:no-preference){
  .home .masthead{animation:ap-in .8s ease-out .08s both}
  .home .field{animation:ap-in 1s cubic-bezier(.22,.61,.36,1) .26s both}
  .home .band{animation:ap-in .9s cubic-bezier(.22,.61,.36,1) .44s both}
  @keyframes ap-in{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width:56rem){
  .doc-body{grid-template-columns:1fr}
  .toc{position:static; padding-bottom:1.25rem; border-bottom:1px solid var(--hair)}
  .toc ol{display:grid; grid-template-columns:repeat(auto-fit,minmax(11rem,1fr))}
}
@media (max-width:52rem){
  .field{grid-template-columns:1fr}
  .field-aside{display:none}
  .band-grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.5rem}
}
@media (max-width:26rem){
  .band-grid{grid-template-columns:1fr}
}

/* ── Print: white, no tint, no grain (alta-park-brand v1.2 print rule) ─── */
@media print{
  body,.page{background-color:var(--white)}
  .page{background-image:none}
  .grain{display:none}
  .sheet{border:0; box-shadow:none; padding:0; max-width:none}
  .toc{display:none}
  .doc-body{grid-template-columns:1fr; padding-top:1.5rem}
  .prose{max-width:none}
  .page{padding:0}
  a{border-bottom:0 !important}
}