/* ============================================================
   time.gives — the settlement substrate, denominated in hours
   Register: regulated UK credit union; horological ledger.
   System fonts only. No JS. en-GB throughout.
   ============================================================ */

:root{
  color-scheme: light dark;
  --ink:#1b1a16;
  --paper:#f7f5ef;
  --paper-2:#efece2;
  --muted:#6c6a61;
  --faint:#8f8d83;
  --rule:#ddd9cc;
  --rule-strong:#cbc6b4;
  --accent:#9a6b2f;        /* aged brass */
  --accent-ink:#7d551f;
  --card:#fdfcf8;
  --measure:38rem;
  --serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "IBM Plex Mono", Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark){
  :root{
    --ink:#ece8de;
    --paper:#141312;
    --paper-2:#1c1a18;
    --muted:#a3a096;
    --faint:#807d74;
    --rule:#2b2823;
    --rule-strong:#3a362f;
    --accent:#cf9a55;
    --accent-ink:#e0b377;
    --card:#1a1816;
  }
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-size:clamp(17px,1.05vw + 14px,19px);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-kerning:normal;
}

/* Hairline-ruled paper background */
body::before{
  content:"";
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    repeating-linear-gradient(to bottom,
      transparent 0, transparent calc(1.62em - 1px),
      color-mix(in srgb, var(--rule) 38%, transparent) calc(1.62em - 1px), color-mix(in srgb, var(--rule) 38%, transparent) 1.62em);
  opacity:.5;
}

/* ---- layout shell ---- */
.masthead,
main > section,
.colophon{
  padding-inline: max(clamp(1.25rem,5vw,2rem), env(safe-area-inset-left));
}
main > section{ padding-block: clamp(3.5rem,8vw,6.5rem); }

.kicker, .rubric, .reg, .col-nav h2, .col-bottom, .step-n, .fig dt, .disclaimer{
  font-family:var(--mono);
}

/* ---- skip + focus ---- */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:var(--paper);
  padding:.6rem 1rem; font-family:var(--mono); font-size:.8rem;
  border-radius:0 0 .4rem 0;
}
.skip-link:focus{ left:0; }
a:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--accent); outline-offset:3px; border-radius:1px;
}

a{ color:inherit; text-decoration-color:var(--rule-strong); text-underline-offset:.18em; }

/* ============================================================
   MASTHEAD
   ============================================================ */
.masthead{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.6rem 1.5rem;
  justify-content:space-between;
  padding-block: clamp(1.5rem,4vw,2.4rem) clamp(1.2rem,3vw,1.8rem);
  border-bottom:1px solid var(--rule-strong);
}
.wordmark{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--serif); font-weight:600;
  font-size:clamp(1.6rem,4.5vw,2.3rem);
  letter-spacing:-.012em; text-decoration:none; color:var(--ink);
}
.wordmark .dot{ color:var(--accent); }
.wordmark .seg:last-of-type{ font-style:italic; font-weight:500; }
.dial{ display:inline-flex; color:var(--accent); }
.dial svg{ width:clamp(1.5rem,4vw,2rem); height:auto; display:block; }
.reg{
  margin:0; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--faint);
}

/* ============================================================
   HERO
   ============================================================ */
.hero{ max-width:54rem; }
.kicker, .rubric{
  margin:0 0 1.1rem; font-size:.74rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--accent-ink);
  display:inline-flex; align-items:center; gap:.7rem;
}
.kicker::before, .rubric::before{
  content:""; width:1.9rem; height:1px; background:var(--accent);
  display:inline-block;
}
.hero h1{
  margin:0 0 1.4rem; font-weight:600;
  font-size:clamp(2.1rem,6vw,4.1rem); line-height:1.05; letter-spacing:-.022em;
}
.lede{
  margin:0 0 1.2rem; max-width:var(--measure);
  font-size:clamp(1.12rem,1.6vw,1.32rem); line-height:1.5; color:var(--ink);
}
.sub{
  margin:0; max-width:var(--measure);
  color:var(--muted); font-style:italic; font-size:1.05rem;
}

/* ============================================================
   FIGURE BAND
   ============================================================ */
.band{
  background:var(--paper-2);
  border-block:1px solid var(--rule-strong);
}
.figures{
  margin:0; display:grid; gap:1px;
  grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));
  background:var(--rule);
}
.fig{
  background:var(--paper-2); padding:1.6rem clamp(1.25rem,3vw,2rem);
  display:flex; flex-direction:column; gap:.6rem;
}
.fig dt{
  margin:0; font-size:.68rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--faint);
}
.fig dd{ margin:0; display:flex; flex-direction:column; gap:.25rem; }
.fig .big{
  font-family:var(--serif); font-weight:600; line-height:1;
  font-size:clamp(2rem,4vw,2.7rem); letter-spacing:-.02em; color:var(--ink);
}
.fig .unit{ font-size:.86rem; color:var(--muted); }

/* ============================================================
   SHARED SECTION HEADS / PROSE
   ============================================================ */
main h2{
  margin:0 0 1.6rem; font-weight:600;
  font-size:clamp(1.55rem,3.4vw,2.5rem); line-height:1.12; letter-spacing:-.018em;
  max-width:26ch;
}
.prose{ max-width:var(--measure); }
.prose p{ margin:0 0 1.1rem; }
.prose p:last-child{ margin-bottom:0; }

/* ---- thesis ---- */
.tenets{
  list-style:none; margin:2.8rem 0 0; padding:0;
  display:grid; gap:0;
  border-top:1px solid var(--rule);
}
.tenets li{
  display:grid; grid-template-columns:3rem 1fr; gap:1.2rem; align-items:start;
  padding:1.6rem 0; border-bottom:1px solid var(--rule);
}
.tenets p{ margin:0; max-width:46ch; }
.t-n{
  font-family:var(--serif); font-style:italic; font-size:1.4rem;
  color:var(--accent); line-height:1; padding-top:.1rem;
}
.tenets strong{ font-weight:600; }

/* ============================================================
   HOW IT WORKS — ledger of steps
   ============================================================ */
.steps{
  list-style:none; margin:0; padding:0;
  display:grid; gap:1px; background:var(--rule);
  border:1px solid var(--rule-strong);
}
.step{
  background:var(--card); padding:clamp(1.5rem,3vw,2.2rem);
  display:grid; gap:.7rem; align-content:start;
}
.step-n{
  font-size:.82rem; letter-spacing:.12em; color:var(--accent);
  border-bottom:1px solid var(--rule); padding-bottom:.7rem; margin-bottom:.2rem;
}
.step h3{ margin:0; font-size:1.18rem; font-weight:600; letter-spacing:-.01em; }
.step p{ margin:0; color:var(--muted); font-size:.97rem; }
@media (min-width:46rem){
  .steps{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width:74rem){
  .steps{ grid-template-columns:repeat(4,1fr); }
}

/* ============================================================
   WHO IT'S FOR
   ============================================================ */
.who-grid{
  display:grid; gap:1px; background:var(--rule);
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  border:1px solid var(--rule-strong);
}
.who-card{
  background:var(--card); padding:clamp(1.5rem,3vw,2rem);
  display:grid; gap:.6rem; align-content:start;
}
.who-card h3{
  margin:0; font-size:1.12rem; font-weight:600; letter-spacing:-.01em;
  padding-bottom:.6rem; border-bottom:1px solid var(--rule);
}
.who-card p{ margin:0; color:var(--muted); font-size:.96rem; }

/* ============================================================
   REGULATORY NOTE
   ============================================================ */
.reg-note{ background:var(--paper-2); border-block:1px solid var(--rule-strong); }
.disclaimer{
  margin:2.4rem 0 0; max-width:var(--measure);
  font-size:.78rem; line-height:1.6; color:var(--faint);
  padding-top:1.2rem; border-top:1px solid var(--rule);
}

/* ============================================================
   FOOTER
   ============================================================ */
.colophon{
  border-top:1px solid var(--rule-strong);
  padding-block: clamp(3rem,6vw,4.5rem) clamp(1.5rem,3vw,2rem);
  font-size:.92rem;
}
.col-top{
  display:grid; gap:2.5rem;
  grid-template-columns:1fr; max-width:64rem;
}
@media (min-width:50rem){
  .col-top{ grid-template-columns:2fr 1fr 1fr; gap:3rem; }
}
.col-brand p{ margin:.9rem 0 0; max-width:34ch; color:var(--muted); }
.wordmark.sm{ font-size:1.35rem; }
.wordmark.sm .seg:last-of-type{ font-style:italic; }
.col-nav h2{
  margin:0 0 1rem; font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--faint); font-weight:600;
}
.col-nav ul{ list-style:none; margin:0; padding:0; display:grid; gap:.55rem; }
.col-nav a{
  text-decoration:none; color:var(--muted); font-size:.95rem;
  transition:color .2s ease;
}
.col-nav a:hover{ color:var(--accent-ink); }
.col-bottom{
  margin-top:2.8rem; padding-top:1.4rem; border-top:1px solid var(--rule);
  display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; justify-content:space-between;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.06em;
  color:var(--faint);
}

/* ============================================================
   REVEALS — escapement tick. Visible by default.
   ============================================================ */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .reveal{
      animation: tick-in linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 26%;
    }
    @keyframes tick-in{
      from{ opacity:0; transform:translateY(.9rem); }
      to{ opacity:1; transform:none; }
    }
  }
}
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}