/* RAZORBILL — the craft layer. One system: cool industrial — white, steel, one blue accent;
   hairline rules as structure, fluid type, geometric space, weighted motion.
   The monospace evidence table is the signature; everything else stages it.
   No build step: hand-written CSS, served as-is. */

/* ————————————————————— 1. TOKENS ————————————————————— */
:root {
  /* color — cool industrial: white, steel greys, one saturated steel blue */
  --ink: #0c1219;            /* cool near-black: headers, masthead */
  --ink-2: #1a2532;          /* raised ink: hover surfaces on ink */
  --body-ink: #1e2530;       /* body text — cool cast */
  --paper: #ffffff;          /* pure white base */
  --paper-2: #edf1f5;        /* cool light grey band, blue cast */
  --rule: #d4dbe2;           /* steel hairline structure */
  --muted: #566068;          /* secondary text — AA on white and band */
  --accent-blue: #1668a5;    /* THE accent: marker, CTA rule, focus, links */
  --paper-on-ink: #dee5ec;   /* nav text on ink */
  --flag: var(--accent-blue);

  /* legacy aliases so nothing referencing them breaks */
  --accent: var(--accent-blue);
  --accent-dark: #0f5a92;
  --ink-soft: var(--muted);
  --paper-soft: var(--paper-2);
  --line: var(--rule);
  --ok: var(--accent-blue);

  /* type — fluid scale, six steps + caps */
  --t-xs: clamp(0.72rem, 0.70rem + 0.10vw, 0.78rem);
  --t-s:  clamp(0.84rem, 0.80rem + 0.18vw, 0.92rem);
  --t-b:  clamp(1.00rem, 0.95rem + 0.25vw, 1.09rem);
  --t-m:  clamp(1.16rem, 1.05rem + 0.55vw, 1.42rem);
  --t-l:  clamp(1.45rem, 1.22rem + 1.10vw, 1.95rem);
  --t-xl: clamp(1.90rem, 1.35rem + 2.60vw, 3.10rem);
  --track-tight: -0.018em;   /* large sizes pull in */
  --track-caps: 0.10em;      /* small caps open up */
  --lh-tight: 1.12;
  --lh-base: 1.62;
  --lh-open: 1.72;
  --measure: 72ch;
  --serif: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas,
    "Liberation Mono", monospace;

  /* space — geometric (×~1.6); section gap ≫ intra gap */
  --s-1: 0.25rem;
  --s-2: 0.4rem;
  --s-3: 0.65rem;
  --s-4: 1.05rem;
  --s-5: 1.7rem;
  --s-6: 2.75rem;
  --s-7: 4.4rem;

  /* motion — two durations, two weighted easings */
  --dur-fast: 150ms;
  --dur-set: 400ms;
  --ease-settle: cubic-bezier(0.2, 0.7, 0.1, 1);   /* decelerates, settles */
  --ease-lift: cubic-bezier(0.45, 0.05, 0.55, 0.6); /* weighted departure */

  --header-h: 3.5rem;
  --header-h-condensed: 2.75rem;
}

/* ————————————————————— 2. BASE ————————————————————— */
* { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--header-h) + var(--s-4)); }
body {
  margin: 0;
  padding-top: var(--header-h); /* fixed header: constant, so zero shift */
  background: var(--paper-2);   /* solid fallback under the port backdrop */
  font-family: var(--sans);
  font-size: var(--t-b);
  color: var(--body-ink);
  line-height: var(--lh-base);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 var(--s-4); }
h1, h2 {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: var(--track-tight);
}
h1 { font-size: var(--t-xl); line-height: var(--lh-tight); }
h2 {
  font-size: var(--t-l); line-height: 1.25;
  margin-top: var(--s-6); padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--rule);
  max-width: var(--measure);
}
h3 { font-size: var(--t-m); line-height: 1.3; color: var(--ink); }
p, li { color: var(--body-ink); }
p { max-width: var(--measure); }
.muted { color: var(--muted); }
.cite { color: var(--muted); font-size: var(--t-s); }
a { color: var(--accent-blue); text-underline-offset: 0.14em; }
a:hover { color: var(--ink); }

/* focus is always visible, never the browser default ring */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--accent-blue);
  outline-offset: 2px;
  border-radius: 1px;
}
header.site :focus-visible, footer.site :focus-visible {
  outline-color: var(--accent-blue);
}

/* ——— the port backdrop: a FIXED full-viewport photograph layer (a plain
   position:fixed div — never background-attachment:fixed, which is broken on
   iOS Safari). Content scrolls over it as opaque document sheets. Under
   reduced motion, or with the layer hidden, the solid body colour holds. */
.port-backdrop {
  position: fixed; inset: 0; z-index: -1;
  background: var(--ink);
}
.port-backdrop img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.port-backdrop::after {
  /* extra darkening so panel edges and hero type never fight crane detail */
  content: ""; position: absolute; inset: 0;
  background: rgba(10, 15, 22, 0.28);
}
@media (prefers-reduced-motion: reduce) {
  .port-backdrop { display: none; }
}

/* site pages read as document sheets over the port */
main {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--rule);
  max-width: 1160px;
  margin: var(--s-4) auto 0;
  padding: var(--s-6) 0;
}
footer.site {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--rule);
  max-width: 1160px;
  margin: var(--s-5) auto var(--s-5);
}

/* ————————————————————— 3. MASTHEAD (fixed, condenses) ————————————————————— */
header.site {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  height: var(--header-h);
  background: var(--ink);
  border-bottom: 1px solid transparent;
  transition: height var(--dur-set) var(--ease-settle),
              border-color var(--dur-set) var(--ease-settle);
}
header.site .wrap {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: nowrap; gap: var(--s-5); height: 100%;
}
header.site .brand { flex: 0 0 auto; }
header.site nav { flex: 0 1 auto; min-width: 0; }
.condensed header.site {
  height: var(--header-h-condensed);
  border-bottom-color: var(--accent-blue);
}
.brand {
  font-family: var(--serif);
  font-weight: 700; font-size: var(--t-m); color: var(--paper);
  text-decoration: none; letter-spacing: 0.02em;
  display: inline-flex; align-items: center; gap: var(--s-3);
}
.brand:hover { color: #fff; }
.brand img {
  height: 0.72em; width: auto; display: block;
  transform-origin: left center;
  transition: transform var(--dur-set) var(--ease-settle);
}
.condensed header.site .brand img { transform: scale(0.82); }
nav.site {
  display: flex; align-items: center; gap: var(--s-4);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; max-width: 100%;
}
nav.site::-webkit-scrollbar { display: none; }
nav.site a {
  color: var(--paper-on-ink); text-decoration: none;
  font-size: var(--t-xs); text-transform: uppercase;
  letter-spacing: var(--track-caps);
  white-space: nowrap;
  padding: var(--s-1) 0;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-fast) var(--ease-settle),
              border-color var(--dur-fast) var(--ease-settle);
}
nav.site a:hover { color: #fff; border-bottom-color: var(--accent-blue); }
nav.site a.active { color: #fff; border-bottom-color: var(--accent-blue); }

/* ————————————————————— 4. HERO ————————————————————— */
.hero {
  background: var(--paper-2);
  border-bottom: 1px solid var(--rule);
  padding: var(--s-7) 0 var(--s-6);
}
.hero h1 { margin: 0 0 var(--s-3); max-width: 22ch; }
.hero p.lead {
  font-size: var(--t-m); line-height: var(--lh-open);
  color: var(--muted); max-width: var(--measure); margin: 0 0 var(--s-5);
}

/* ————————————————————— 5. THE EVIDENCE FRAME ————————————————————— */
.hero-tabs, .hero-frame { max-width: 42rem; margin: var(--s-5) 0 0; }
.hero-frame { overflow-x: auto; }
.hero-frame .tab-caption, .hero-tabs .tab-caption {
  color: var(--muted); font-size: var(--t-s); margin: var(--s-2) 0 0;
}
table.ledger, .ledger table { border-collapse: collapse; }
.ledger {
  width: 100%; max-width: 42rem; margin: var(--s-5) 0 var(--s-2);
  font-family: var(--mono);
  font-size: var(--t-s);
  font-variant-numeric: tabular-nums;
  border-collapse: collapse;
  background: var(--paper);
}
.ledger th, .ledger td {
  text-align: left; padding: var(--s-3) var(--s-3);
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}
.ledger thead th {
  font-weight: 400; font-size: var(--t-xs); text-transform: uppercase;
  letter-spacing: var(--track-caps); color: var(--muted);
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.ledger .num, .ledger td.num, .ledger th.num {
  text-align: right; font-variant-numeric: tabular-nums;
}
.ledger .flag { color: var(--flag); }
.ledger tfoot td, .ledger tfoot th {
  border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink);
  font-weight: 600;
}
.ledger caption {
  caption-side: bottom; text-align: left; color: var(--muted);
  font-family: var(--sans); font-size: var(--t-s); padding: var(--s-2) 0 0;
}
.ledger.evidence { max-width: none; width: 100%; }
.ledger.evidence th[scope="row"] {
  font-weight: 400; font-size: var(--t-xs); text-transform: uppercase;
  letter-spacing: var(--track-caps); color: var(--muted); vertical-align: top;
}
.ledger.evidence td { white-space: normal; }
.ledger.evidence td.num { white-space: nowrap; vertical-align: top; }

/* the staged argument (JS + motion only; the final state below is also the
   no-JS / reduced-motion state). Row 2 = the violated provision: it carries
   a gold rule permanently — motion only *arrives* at this state. */
.ledger.evidence tbody tr:nth-child(2) th,
.ledger.evidence tbody tr:nth-child(2) td {
  box-shadow: inset 2px 0 0 var(--accent-blue);
  background: rgba(22, 104, 165, 0.07);
}
.motion .hero-frame[data-stage] tbody tr,
.motion .hero-frame[data-stage] tfoot tr {
  opacity: 0; transform: translateY(7px);
  transition: opacity var(--dur-set) var(--ease-settle),
              transform var(--dur-set) var(--ease-settle);
}
.motion .hero-frame[data-stage] tbody tr:nth-child(2) th,
.motion .hero-frame[data-stage] tbody tr:nth-child(2) td {
  box-shadow: inset 2px 0 0 transparent;
  background: rgba(22, 104, 165, 0);
  transition: box-shadow var(--dur-set) var(--ease-settle),
              background-color var(--dur-set) var(--ease-settle);
}
.motion .hero-frame[data-stage].s-rows tbody tr {
  opacity: 1; transform: none;
}
.motion .hero-frame[data-stage].s-mark tbody tr:nth-child(2) th,
.motion .hero-frame[data-stage].s-mark tbody tr:nth-child(2) td {
  box-shadow: inset 2px 0 0 var(--accent-blue);
  background: rgba(22, 104, 165, 0.07);
}
.motion .hero-frame[data-stage].s-resolve tfoot tr {
  opacity: 1; transform: none;
}

/* ————————————————————— 6. SCROLL REVEAL ————————————————————— */
.motion [data-reveal] {
  opacity: 0; transform: translateY(9px);
  transition: opacity var(--dur-set) var(--ease-settle),
              transform var(--dur-set) var(--ease-settle);
}
.motion [data-reveal].revealed { opacity: 1; transform: none; }

/* ————————————————————— 7. STRUCTURE & COMPONENTS ————————————————————— */
section.band { padding: var(--s-2) 0 var(--s-5); }
section.band.alt {
  background: var(--paper-2);
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.btn {
  display: inline-block; background: var(--ink); color: var(--paper);
  padding: var(--s-3) var(--s-5); border-radius: 1px; text-decoration: none;
  font-weight: 600; border: 1px solid var(--ink); font-size: var(--t-s);
  cursor: pointer; text-transform: uppercase; letter-spacing: var(--track-caps);
  box-shadow: inset 0 -2px 0 var(--accent-blue);
  transition: background-color var(--dur-fast) var(--ease-settle),
              transform var(--dur-fast) var(--ease-settle),
              box-shadow var(--dur-fast) var(--ease-settle);
}
.btn:hover { background: var(--ink-2); box-shadow: inset 0 -3px 0 var(--accent-blue); }
.btn:active { transform: translateY(1px); box-shadow: inset 0 -1px 0 var(--accent-blue); }
.btn.secondary {
  background: transparent; color: var(--ink);
  border: 1px solid var(--ink); box-shadow: none;
}
.btn.secondary:hover { background: var(--paper-2); }
.btn.sending { opacity: 0.75; pointer-events: none; }
.cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s-4); margin: var(--s-5) 0;
}
.card {
  border: 1px solid var(--rule); border-radius: 0;
  padding: var(--s-4) var(--s-4);
  background: var(--paper);
  border-top: 2px solid var(--ink);
  transition: border-color var(--dur-fast) var(--ease-settle),
              transform var(--dur-fast) var(--ease-settle);
}
.card:hover { border-top-color: var(--accent-blue); transform: translateY(-2px); }
.card h3 { margin-top: 0; }
.badge {
  display: inline-block; font-size: var(--t-xs); font-weight: 600;
  letter-spacing: var(--track-caps); text-transform: uppercase;
  color: var(--accent-blue); border: 1px solid var(--accent-blue);
  border-radius: 0; padding: 0 var(--s-2);
  vertical-align: middle; margin-left: var(--s-2);
}
.steps { counter-reset: step; list-style: none; padding: 0; }
.steps li {
  counter-increment: step; margin: var(--s-4) 0;
  padding-left: var(--s-6); position: relative;
  max-width: var(--measure);
}
.steps li::before {
  content: counter(step, decimal-leading-zero); position: absolute;
  left: 0; top: 0.2rem;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  color: var(--accent-blue); font-weight: 600; font-size: var(--t-s);
  border-bottom: 1px solid var(--accent-blue); padding-bottom: var(--s-1);
}
.notice {
  border: 1px solid var(--rule); border-left: 2px solid var(--accent-blue);
  background: var(--paper);
  padding: var(--s-3) var(--s-4); margin: var(--s-5) 0; border-radius: 0;
  max-width: var(--measure);
}
.draft-banner {
  background: var(--paper); border: 1px solid var(--ink); color: var(--ink);
  padding: var(--s-3) var(--s-4); border-radius: 0; font-weight: 600;
  margin: var(--s-5) 0; letter-spacing: 0.02em;
}

/* Portal CTA is hidden until a portal URL is configured — JS reveals it.
   (Default-hidden kills the hide-after-paint layout shift and never shows a
   dead link to no-JS visitors.) */
a[data-portal-url] { display: none; }

/* ————————————————————— 8. FORMS ————————————————————— */
form.lead { max-width: 34rem; }
form.lead .fgroup {
  border: 1px solid var(--rule); border-left: 2px solid var(--ink);
  padding: var(--s-4) var(--s-4) var(--s-4);
  margin: var(--s-4) 0;
}
form.lead label {
  display: block; font-weight: 600; margin: var(--s-4) 0 var(--s-1);
  font-size: var(--t-xs); text-transform: uppercase;
  letter-spacing: var(--track-caps); color: var(--muted);
}
form.lead .fgroup > label:first-child { margin-top: 0; }
form.lead input, form.lead textarea, form.lead select {
  width: 100%; padding: var(--s-3) var(--s-3);
  border: 1px solid var(--rule); border-radius: 1px;
  font: inherit; background: #fff; color: var(--body-ink);
  transition: border-color var(--dur-fast) var(--ease-settle),
              box-shadow var(--dur-fast) var(--ease-settle);
}
form.lead input:focus-visible, form.lead textarea:focus-visible,
form.lead select:focus-visible {
  outline: none;
  border-color: var(--ink);
  box-shadow: inset 2px 0 0 var(--accent-blue), 0 0 0 1px var(--ink);
}
form.lead textarea { min-height: 7rem; }
form.lead .btn { margin-top: var(--s-4); }
#form-status { margin-top: var(--s-3); font-weight: 600; max-width: var(--measure); }
@media (min-width: 700px) {
  form.lead .fgroup.cols {
    display: grid; grid-template-columns: 1fr 1fr;
    column-gap: var(--s-4); align-items: end;
  }
  form.lead .fgroup.cols label { margin-top: var(--s-3); }
}

/* ————————————————————— 9. TABLES, FOOTER, FOUNDER ————————————————————— */
table.plain { border-collapse: collapse; width: 100%; margin: var(--s-4) 0; }
table.plain th, table.plain td {
  text-align: left; padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--rule);
  font-variant-numeric: tabular-nums;
}
table.plain th {
  font-weight: 600; font-size: var(--t-xs); text-transform: uppercase;
  letter-spacing: var(--track-caps); color: var(--muted);
  border-bottom: 1px solid var(--ink);
}
.figure {
  font-variant-numeric: tabular-nums; font-weight: 600;
  letter-spacing: 0.01em;
}
footer.site {
  padding: var(--s-5) 0 var(--s-6); color: var(--muted); font-size: var(--t-s);
}
footer.site a { color: var(--muted); }
footer.site a:hover { color: var(--accent-blue); }
footer.site .foot-brand { display: flex; align-items: center; gap: var(--s-2); }
footer.site .foot-brand img { height: 0.9em; width: auto; }
footer.site .stage-line { font-size: var(--t-xs); }
.founder-card {
  display: flex; gap: var(--s-5); align-items: flex-start; flex-wrap: wrap;
  margin: var(--s-4) 0;
}
.founder-card img.portrait {
  width: 180px; height: auto; border: 1px solid var(--rule); display: block;
}
.founder-card .founder-detail { flex: 1 1 18rem; }
.founder-card h3 { margin: 0 0 var(--s-2); }

/* ——— the fee bracket (4C, rebuilt as HTML/CSS per A-27) ——— */
.fee-bracket { display: flex; gap: 2px; max-width: 34rem; margin: var(--s-4) 0 0; }
.fee-seg { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.fee-seg.free { flex: 11 1 0; }
.fee-seg.rate { flex: 9 1 0; }
.fee-seg .seg-label {
  font-family: var(--mono); font-size: var(--t-xs); color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.fee-seg .seg-bar {
  height: 2.6rem; display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-weight: 600; font-size: var(--t-s);
}
.fee-seg.free .seg-bar {
  background: var(--paper-2); border: 1px solid var(--muted);
  color: var(--ink);
}
.fee-seg.rate .seg-bar { background: var(--accent-blue); color: #ffffff; }
.fee-axis {
  font-family: var(--mono); font-size: var(--t-xs); color: var(--muted);
  margin: var(--s-1) 0 0;
}

/* ————————————————————— 10. PAGE TRANSITIONS & MOTION GOVERNORS ——————— */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) {
    animation-duration: var(--dur-fast);
    animation-timing-function: var(--ease-lift);
  }
  ::view-transition-new(root) {
    animation-duration: var(--dur-set);
    animation-timing-function: var(--ease-settle);
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ————————————————————— 11. NARROW VIEWPORTS ————————————————————— */
@media (max-width: 700px) {
  nav.site { gap: var(--s-3); }
  /* 1B (A-26): the evidence table abandons the grid below 700px. Each row is
     a full-width labelled block: small-caps label above, value at full
     measure below, hairline rules between blocks. Never scrolls sideways. */
  .hero-frame { overflow-x: visible; }
  .ledger.evidence, .ledger.evidence tbody, .ledger.evidence tfoot,
  .ledger.evidence tr, .ledger.evidence th, .ledger.evidence td {
    display: block; width: 100%;
  }
  .ledger.evidence tr {
    border-bottom: 1px solid var(--rule);
    padding: var(--s-3) 0 var(--s-3) var(--s-3);
  }
  .ledger.evidence th[scope="row"], .ledger.evidence td {
    border: 0; padding: 0; white-space: normal;
  }
  .ledger.evidence th[scope="row"] { padding-bottom: var(--s-1); }
  .ledger.evidence td.num {
    text-align: left; font-weight: 600; padding-top: var(--s-1);
    white-space: normal;
  }
  .ledger.evidence td:empty { display: none; }
  /* the provision marking moves from cells to the whole block */
  .ledger.evidence tbody tr:nth-child(2) th,
  .ledger.evidence tbody tr:nth-child(2) td {
    box-shadow: none; background: transparent;
  }
  .ledger.evidence tbody tr:nth-child(2) {
    box-shadow: inset 2px 0 0 var(--accent-blue);
    background: rgba(22, 104, 165, 0.07);
  }
  /* the arithmetic block stays the visually heaviest */
  .ledger.evidence tfoot tr {
    border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
  }
  .ledger.evidence tfoot th, .ledger.evidence tfoot td { border: 0; }
}