/* ════════════════════════════════════════════════════════════════
   veblen.luxury — house of conspicuous humanity
   Register: luxury editorial × economic thesis. High-contrast serif
   display, gilt-on-oxblood accents, gilt-edged ivory ground.
   No JS. Reveals via animation-timeline; visible by default; off
   under prefers-reduced-motion.
   ════════════════════════════════════════════════════════════════ */

:root{
  color-scheme: light dark;

  /* warm ivory ground, ink the colour of old printer's black */
  --paper:#f7f3ea;
  --paper-2:#f1ecdf;
  --ink:#1c1814;
  --muted:#6f675a;
  --rule:#ddd4c1;

  /* the house colours: oxblood + assayed gilt */
  --oxblood:#5a1c20;
  --oxblood-deep:#3d1216;
  --gilt:#9a7330;
  --gilt-bright:#b9913f;

  --measure:38rem;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", ui-serif, Georgia, "Times New Roman", serif;
  --sans: ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark){
  :root{
    --paper:#141210;
    --paper-2:#1c1916;
    --ink:#efe9dc;
    --muted:#a59c8b;
    --rule:#322c24;
    --oxblood:#7e2a2f;
    --oxblood-deep:#120a0a;
    --gilt:#c79c4d;
    --gilt-bright:#e0bd6e;
  }
}

*{ 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(1.02rem, 0.95rem + 0.4vw, 1.18rem);
  line-height:1.62;
  font-kerning:normal;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  /* faint laid-paper warmth */
  background-image:
    radial-gradient(120% 90% at 50% -10%, rgba(154,115,48,.06), transparent 60%);
  background-attachment:fixed;
  padding:
    max(clamp(1.25rem,4vw,3rem), env(safe-area-inset-top))
    max(clamp(1.25rem,5vw,4.5rem), env(safe-area-inset-right))
    max(clamp(1.25rem,4vw,3rem), env(safe-area-inset-bottom))
    max(clamp(1.25rem,5vw,4.5rem), env(safe-area-inset-left));
}

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

.vh-quiet{
  /* a real heading kept in the flow but visually restrained */
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}

/* shared labels — letterspaced sans eyebrow */
.label{
  font-family:var(--sans);
  font-size:.7rem; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--gilt);
  margin:0 0 1.4rem;
  display:flex; align-items:center; gap:.7rem;
}
.label::before{
  content:""; width:1.6rem; height:1px;
  background:linear-gradient(90deg, var(--gilt), transparent);
}
.label.on-dark{ color:var(--gilt-bright); }
.label.on-dark::before{ background:linear-gradient(90deg, var(--gilt-bright), transparent); }

/* ─── masthead ─── */
.masthead{
  max-width:72rem; margin:0 auto 4.5rem;
  display:flex; align-items:baseline; justify-content:space-between;
  flex-wrap:wrap; gap:.5rem 1.5rem;
  padding-bottom:1.4rem;
  border-bottom:1px solid var(--rule);
}
.wordmark{
  font-family:var(--serif);
  font-weight:600; font-size:clamp(1.5rem,4vw,2rem);
  letter-spacing:-.01em; margin:0; line-height:1;
}
.wordmark .seg:first-child{ font-style:italic; }
.wordmark .dot{ color:var(--gilt); padding:0 .03em; }
.wordmark.sm{ font-size:1.35rem; font-weight:600; }
.estd{
  font-family:var(--sans); margin:0;
  font-size:.66rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--muted);
}

/* ─── main column ─── */
main{
  max-width:72rem; margin:0 auto; width:100%;
}
section{ padding:clamp(3.5rem,9vw,7rem) 0; }
section + section{ border-top:1px solid var(--rule); }

h2{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(1.7rem,4.4vw,2.7rem);
  line-height:1.12; letter-spacing:-.015em;
  margin:0 0 2rem; max-width:24ch;
}
h3{
  font-family:var(--serif); font-weight:600;
  font-size:1.18rem; letter-spacing:-.01em;
  margin:0 0 .6rem;
}
em{ font-style:italic; }
.gilt{ color:var(--gilt); font-style:italic; }
.cite{ font-style:italic; color:var(--muted); }

/* ═══ HERO ═══ */
.hero{
  padding-top:clamp(2rem,6vw,4rem);
  max-width:54rem;
}
.kicker{
  font-family:var(--sans); margin:0 0 2.2rem;
  font-size:.74rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted);
}
.hero-line{
  font-family:var(--serif);
  font-size:clamp(2.1rem, 1.2rem + 5.2vw, 4.6rem);
  line-height:1.04; letter-spacing:-.025em; font-weight:600;
  margin:0 0 2rem; text-wrap:balance;
}
.hero-line .cheap{
  font-style:italic; color:var(--muted);
  text-decoration:line-through;
  text-decoration-color:var(--gilt);
  text-decoration-thickness:.04em;
}
.hero-line .gilt{ font-weight:600; }
.hero-line .under{
  position:relative; font-style:italic;
  background:linear-gradient(transparent 78%, rgba(154,115,48,.28) 0);
}
.hero-sub{
  font-size:clamp(1.1rem,1rem+.6vw,1.35rem);
  color:var(--ink); max-width:var(--measure);
  line-height:1.55; margin:0;
}
.hero-sub em{ color:var(--oxblood); font-weight:600; }
@media (prefers-color-scheme: dark){ .hero-sub em{ color:var(--gilt-bright); } }

/* ═══ THESIS ═══ */
.thesis h2{ color:var(--oxblood); max-width:18ch; }
@media (prefers-color-scheme: dark){ .thesis h2{ color:var(--ink); } }
.thesis-grid{
  display:grid; gap:clamp(1.5rem,4vw,3.5rem);
  grid-template-columns:1fr;
  max-width:58rem;
}
.thesis-grid p{ margin:0; color:var(--ink); }
.thesis-grid p:first-child{
  font-size:1.18rem; line-height:1.55;
}
@media (min-width:48rem){
  .thesis-grid{ grid-template-columns:1fr 1fr; }
}

/* ═══ LEDGER — the three movements ═══ */
.claims{
  list-style:none; margin:0; padding:0;
  display:grid; gap:clamp(1.5rem,3vw,2rem);
  grid-template-columns:1fr;
}
@media (min-width:56rem){ .claims{ grid-template-columns:repeat(3,1fr); } }
.claim{
  position:relative;
  padding:2.2rem 1.8rem 2rem;
  background:var(--paper-2);
  border:1px solid var(--rule);
  border-radius:2px;
}
.claim-no{
  display:block; font-family:var(--serif); font-style:italic;
  font-size:2.4rem; line-height:1; color:var(--gilt);
  margin-bottom:1.2rem;
}
.claim h3{ color:var(--oxblood); }
@media (prefers-color-scheme: dark){ .claim h3{ color:var(--gilt-bright); } }
.claim p{ margin:0; color:var(--muted); font-size:1rem; line-height:1.58; }

/* ═══ FULL-BLEED BAND ═══ */
.band{
  border-top:none !important;
  margin:0 calc(-1 * max(clamp(1.25rem,5vw,4.5rem), env(safe-area-inset-right)));
  padding:0;
}
.band-inner{
  padding:clamp(4rem,11vw,8rem) clamp(1.5rem,6vw,4rem);
  text-align:center;
  color:#f1e9da;
  background:
    radial-gradient(140% 120% at 50% 0%, rgba(185,145,63,.22), transparent 55%),
    linear-gradient(165deg, var(--oxblood) 0%, var(--oxblood-deep) 78%);
}
.band-line{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(1.7rem,1rem+4vw,3.4rem);
  line-height:1.16; letter-spacing:-.02em;
  margin:0 auto 1.6rem; max-width:18ch; text-wrap:balance;
}
.band-line .gilt{ color:var(--gilt-bright); }
.band-attr{
  font-family:var(--sans); margin:0;
  font-size:.78rem; letter-spacing:.12em;
  color:rgba(241,233,218,.62);
}
.band-attr .cite{ color:rgba(241,233,218,.8); }

/* ═══ HOW IT WORKS ═══ */
.works-lede{
  font-size:1.18rem; max-width:var(--measure);
  margin:0 0 3rem; color:var(--ink);
}
.steps{ margin:0; display:grid; gap:0; }
.step{
  display:grid; gap:.4rem 2rem;
  grid-template-columns:1fr;
  padding:1.8rem 0;
  border-top:1px solid var(--rule);
}
.step:last-child{ border-bottom:1px solid var(--rule); }
.step dt{
  font-family:var(--serif); font-weight:600;
  font-size:1.15rem; letter-spacing:-.01em;
  display:flex; align-items:baseline; gap:.8rem;
}
.step-no{
  font-family:var(--sans); font-size:.72rem; font-weight:600;
  letter-spacing:.12em; color:var(--gilt);
}
.step dd{ margin:0; color:var(--muted); max-width:46rem; }
.step dd a{ color:var(--oxblood); text-underline-offset:.18em; text-decoration-color:var(--gilt); }
@media (prefers-color-scheme: dark){ .step dd a{ color:var(--gilt-bright); } }
@media (min-width:46rem){
  .step{ grid-template-columns:16rem 1fr; align-items:baseline; }
}

/* ═══ WHO IT IS FOR ═══ */
.for-list{
  list-style:none; margin:0; padding:0;
  display:grid; gap:0;
}
.for-list li{
  padding:1.6rem 0;
  border-top:1px solid var(--rule);
  font-size:1.08rem; line-height:1.55;
}
.for-list li:last-child{ border-bottom:1px solid var(--rule); }
.for-tag{
  display:block; font-family:var(--sans);
  font-size:.7rem; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gilt);
  margin-bottom:.5rem;
}

/* ═══ COLOPHON / FOOTER ═══ */
.colophon{
  max-width:72rem; margin:5rem auto 0; width:100%;
  padding-top:2.5rem; border-top:2px solid var(--gilt);
  display:grid; gap:2.5rem;
  grid-template-columns:1fr;
}
@media (min-width:46rem){
  .colophon{ grid-template-columns:1.4fr 1fr; align-items:start; }
  .col-fine{ grid-column:1 / -1; }
}
.col-mark .wordmark.sm .seg:first-child{ font-style:italic; }
.col-tag{
  margin:.6rem 0 0; color:var(--muted);
  font-style:italic; font-size:.98rem; max-width:30ch;
}
.constellation ul{ list-style:none; margin:0; padding:0; }
.constellation li{ margin:0 0 .5rem; }
.constellation a{
  font-family:var(--sans); font-size:.86rem;
  color:var(--ink); text-decoration:none;
}
.constellation a span{ color:var(--muted); }
.constellation a:hover{ color:var(--gilt); }
.constellation a:hover span{ color:var(--muted); }
.col-fine{
  font-family:var(--sans); font-size:.72rem;
  letter-spacing:.06em; color:var(--muted);
  margin:0; padding-top:1.5rem; border-top:1px solid var(--rule);
}

/* ═══════════ CSS-ONLY SCROLL REVEALS ═══════════
   Visible by default. Enhanced only where supported and motion allowed. */
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    .reveal{
      animation:rise both linear;
      animation-timeline:view();
      animation-range:entry 0% entry 42%;
    }
    @keyframes rise{
      from{ opacity:0; transform:translateY(1.6rem); }
      to{ opacity:1; transform:none; }
    }
  }
}
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}