/* ═══════════════════════════════════════════════════════════════════
   set.bid — stewardship protocol
   Register: a quiet stewardship registry crossed with an auction lot card.
   Serif display + monospace ledger; verdigris/patina accent (custody, time,
   longevity). No JavaScript. System fonts only. CSS gradients for imagery.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  color-scheme: light dark;
  --paper:#f7f5ef;
  --paper-2:#efece3;
  --ink:#1d1c19;
  --muted:#6a675e;
  --faint:#8f8c82;
  --rule:#dedacf;
  --rule-strong:#c8c3b4;
  --accent:#2f5d52;        /* verdigris */
  --accent-soft:#dfe9e4;
  --accent-ink:#1f3f38;
  --measure:42rem;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", ui-serif, Georgia, serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#141312;
    --paper-2:#1c1a18;
    --ink:#efece4;
    --muted:#a29e93;
    --faint:#807c72;
    --rule:#2c2a26;
    --rule-strong:#3a372f;
    --accent:#7fc2af;
    --accent-soft:#1f2c28;
    --accent-ink:#bfe2d7;
  }
}

*{ 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(1rem,0.95rem + 0.3vw,1.135rem);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-synthesis:none;
  display:flex; flex-direction:column;
  min-height:100vh; min-height:100svh;
}

/* ── shared rhythm ─────────────────────────────────────────────── */
.masthead,
.hero,
.band,
.colophon{
  padding-inline:max(clamp(1.5rem,6vw,6rem), env(safe-area-inset-left));
  padding-inline-end:max(clamp(1.5rem,6vw,6rem), env(safe-area-inset-right));
}
.hero > *,
.band > *,
.colophon > *{ max-width:78rem; margin-inline:auto; }

/* ── skip link & focus ─────────────────────────────────────────── */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--accent); color:#fff;
  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:2px;
}

/* ═══ MASTHEAD ═════════════════════════════════════════════════ */
.masthead{
  padding-block:clamp(1.4rem,4vw,2.4rem) clamp(1.2rem,3vw,1.8rem);
  border-bottom:1px solid var(--rule);
  display:flex; flex-wrap:wrap; align-items:baseline;
  justify-content:space-between; gap:.6rem 1.5rem;
}
.masthead > *{ max-width:78rem; }
.wordmark{
  font-family:var(--serif);
  font-weight:600; font-size:clamp(1.5rem,4.5vw,2.1rem);
  letter-spacing:-.01em; margin:0; line-height:1;
}
.wordmark .dot,
.wordmark-sm .dot{ color:var(--accent); }
.masthead-meta{
  margin:0; font-family:var(--mono);
  font-size:.7rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--faint);
  display:flex; gap:.6rem; align-items:center;
}
.masthead-meta .sep{ color:var(--rule-strong); }

main{ flex:1; }

/* ═══ HERO ═════════════════════════════════════════════════════ */
.hero{
  padding-block:clamp(3.5rem,10vw,7rem) clamp(2.5rem,7vw,4.5rem);
  background:
    radial-gradient(120% 90% at 12% 0%, var(--accent-soft) 0%, transparent 55%),
    linear-gradient(var(--paper),var(--paper));
}
.kicker{
  margin:0 0 1.4rem; font-family:var(--mono);
  font-size:.78rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent);
}
.lede{
  margin:0; max-width:32ch;
  font-size:clamp(1.7rem,4.6vw,3rem);
  line-height:1.16; letter-spacing:-.012em; font-weight:500;
}
.lede em{ font-style:italic; color:var(--accent); }

/* ledger ticker */
.ticker{
  margin-top:clamp(2.4rem,6vw,3.5rem);
  max-width:34rem;
  border:1px solid var(--rule-strong);
  border-radius:.5rem;
  background:
    repeating-linear-gradient(var(--paper-2) 0 calc(2.6rem - 1px), var(--rule) calc(2.6rem - 1px) 2.6rem);
  overflow:hidden;
}
.ticker-row{
  height:2.6rem;
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding-inline:1rem;
  font-family:var(--mono); font-size:.78rem;
}
.ticker-row .lot{
  letter-spacing:.06em; color:var(--muted);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ticker-row .bid{
  color:var(--accent); font-weight:600; white-space:nowrap;
  font-variant-numeric:tabular-nums;
}

/* ═══ BANDS (shared) ═══════════════════════════════════════════ */
.band{
  padding-block:clamp(3rem,8vw,5.5rem);
  border-top:1px solid var(--rule);
}
.label{
  margin:0 0 1rem; font-family:var(--mono);
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--faint);
}
.band h2{
  margin:0 0 1.8rem; max-width:22ch;
  font-size:clamp(1.55rem,3.6vw,2.35rem);
  line-height:1.18; letter-spacing:-.012em; font-weight:600;
}

/* reveal-on-scroll — visible by default; animates only where supported */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .band > *{
      animation:rise linear both;
      animation-timeline:view();
      animation-range:entry 0% cover 22%;
    }
  }
}
@keyframes rise{
  from{ opacity:0; transform:translateY(1.4rem); }
  to{ opacity:1; transform:none; }
}

/* ── thesis ───────────────────────────────────────────────────── */
.thesis-grid{
  display:grid; gap:1.6rem clamp(2rem,5vw,4rem);
  grid-template-columns:repeat(auto-fit,minmax(20rem,1fr));
}
.thesis-grid p{ margin:0; color:var(--muted); }
.thesis-grid em{ font-style:italic; color:var(--ink); }

/* ── how it works ─────────────────────────────────────────────── */
.steps{
  list-style:none; margin:0; padding:0;
  display:grid; gap:0;
  border-top:1px solid var(--rule);
}
.step{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:.3rem clamp(1.4rem,4vw,3rem);
  padding-block:1.8rem;
  border-bottom:1px solid var(--rule);
}
.step-n{
  grid-row:1 / span 2;
  font-family:var(--mono); font-size:.95rem; font-weight:600;
  color:var(--accent); padding-top:.15rem;
  font-variant-numeric:tabular-nums;
}
.step h3{
  margin:0 0 .35rem; font-size:1.18rem; font-weight:600;
  letter-spacing:-.005em;
}
.step p{ margin:0; color:var(--muted); max-width:46ch; }

@media (min-width:48rem){
  .step{ grid-template-columns:4rem 16rem 1fr; align-items:baseline; }
  .step-n{ grid-row:auto; }
  .step h3{ margin:0; }
}

/* ── what counts as a bid (definitions) ───────────────────────── */
.defs{
  margin:0; display:grid; gap:0;
  grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));
  border:1px solid var(--rule);
  border-radius:.5rem; overflow:hidden;
}
.def{ padding:1.6rem 1.5rem; border-top:1px solid var(--rule); }
.def:first-child{ border-top:0; }
.defs dt{
  font-family:var(--mono); font-size:.82rem; letter-spacing:.04em;
  text-transform:uppercase; color:var(--accent); margin-bottom:.5rem;
}
.defs dd{ margin:0; color:var(--muted); font-size:.97rem; line-height:1.55; }
@media (min-width:36rem){
  .def{ border-left:1px solid var(--rule); }
  .def:nth-child(odd){ border-left:0; }
}
@media (min-width:54rem){
  .def{ border-top:0; border-left:1px solid var(--rule); }
  .def:first-child{ border-left:0; }
  .def:nth-child(odd){ border-left:1px solid var(--rule); }
  .def:first-child{ border-left:0; }
}

/* ── who it's for ─────────────────────────────────────────────── */
.who-grid{
  display:grid; gap:1px;
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  background:var(--rule);
  border:1px solid var(--rule);
  border-radius:.5rem; overflow:hidden;
}
.who-card{ background:var(--paper); padding:1.6rem 1.5rem; }
.who-card h3{
  margin:0 0 .55rem; font-size:1.12rem; font-weight:600;
  letter-spacing:-.005em;
}
.who-card p{ margin:0; color:var(--muted); font-size:.97rem; line-height:1.55; }
.who-foot{
  margin:2rem 0 0; max-width:54ch; color:var(--muted);
}
.who-foot a{ color:var(--accent); text-underline-offset:.18em; }

/* ═══ COLOPHON / FOOTER ════════════════════════════════════════ */
.colophon{
  margin-top:auto;
  padding-block:clamp(2.8rem,6vw,4rem) clamp(1.5rem,4vw,2.2rem);
  background:var(--paper-2);
  border-top:1px solid var(--rule-strong);
  font-family:var(--mono);
}
.colophon-grid{
  display:grid; gap:2.4rem clamp(2rem,5vw,4rem);
  grid-template-columns:1fr;
}
@media (min-width:46rem){
  .colophon-grid{ grid-template-columns:1.4fr 1fr 1fr; }
}
.wordmark-sm{
  font-family:var(--serif); font-weight:600; font-size:1.5rem;
  margin:0 0 .8rem; letter-spacing:-.01em;
}
.colophon-tag{
  margin:0; font-family:var(--serif); font-size:1rem;
  color:var(--muted); max-width:34ch; line-height:1.5;
}
.colophon h2{
  margin:0 0 1rem; font-size:.72rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--faint); font-weight:600;
}
.colophon ul{ list-style:none; margin:0; padding:0; }
.colophon li{
  font-size:.82rem; line-height:1.5; color:var(--muted);
  margin-bottom:.7rem;
}
.colophon a{ color:var(--ink); text-decoration:none; border-bottom:1px solid var(--rule-strong); }
.colophon a:hover{ color:var(--accent); border-bottom-color:var(--accent); }
.colophon-meta li{ color:var(--faint); }
.colophon-rule{
  max-width:78rem; margin:2.6rem auto 0;
  padding-top:1.4rem; border-top:1px solid var(--rule);
  font-size:.74rem; letter-spacing:.05em; color:var(--faint);
}

/* ── reduced motion ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .band > *{ opacity:1 !important; transform:none !important; }
}