/* ════════════════════════════════════════════════════════════════════
   haute.maison — the keeping of a house
   Register: refined, material, slow. A "house ledger" of stewardship.
   System serif throughout; warm paper light / aged-ink dark.
   No JS. Nav = CSS checkbox. Reveals = animation-timeline (off when reduced).
   ════════════════════════════════════════════════════════════════════ */

:root{
  color-scheme: light dark;

  /* warm paper palette */
  --paper:   #f6f3ec;
  --paper-2: #efeadf;   /* recessed panels */
  --ink:     #211d18;
  --ink-2:   #4a443b;   /* body */
  --muted:   #847c6e;   /* labels, glosses */
  --rule:    #d9d2c4;
  --rule-2:  #c7bfae;
  --gilt:    #9a7b3f;   /* the single accent — old gilt */
  --gilt-ink:#7e6230;

  /* material band gradient (light) */
  --band-1: #2c2620;
  --band-2: #4a3f30;
  --band-3: #6b5638;

  --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;

  --measure: 38rem;
  --pad: clamp(1.25rem, 5vw, 6rem);
  --maxw: 78rem;
}

@media (prefers-color-scheme: dark){
  :root{
    --paper:   #16130f;
    --paper-2: #1e1a14;
    --ink:     #ece6da;
    --ink-2:   #c4bcab;
    --muted:   #8f8676;
    --rule:    #2e2820;
    --rule-2:  #3c352a;
    --gilt:    #c4a261;
    --gilt-ink:#d8b873;
    --band-1: #100d0a;
    --band-2: #221b12;
    --band-3: #3a2d1b;
  }
}

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

body{
  margin:0;
  background:var(--paper);
  color:var(--ink-2);
  font-family:var(--serif);
  font-size:clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  /* faint laid-paper grain via two soft gradients — no external image */
  background-image:
    radial-gradient(120% 80% at 80% -10%, color-mix(in oklab, var(--gilt) 7%, transparent) 0%, transparent 55%),
    radial-gradient(100% 60% at -10% 110%, color-mix(in oklab, var(--gilt) 5%, transparent) 0%, transparent 50%);
  background-attachment:fixed;
}

/* ── shared type ── */
h1,h2,h3,h4{ color:var(--ink); font-weight:600; line-height:1.12; margin:0; }
h2{ font-size:clamp(1.6rem, 1.2rem + 1.6vw, 2.5rem); letter-spacing:-0.012em; }
h3{ font-size:1.3rem; letter-spacing:-0.01em; }
p{ margin:0; }
em{ font-style:italic; }
strong{ font-weight:600; color:var(--ink); }
a{ color:inherit; }

.kicker{
  font-family:var(--sans); font-size:.72rem; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--gilt-ink);
  margin:0 0 1rem;
}
.eyebrow{
  font-family:var(--sans); font-size:.74rem; letter-spacing:.26em;
  text-transform:uppercase; color:var(--muted); margin:0 0 1.4rem;
}

/* ── 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(--sans); border-radius:0 0 .4rem 0;
}
.skip-link:focus{ left:0; }
a:focus-visible, input:focus-visible, label:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--gilt); outline-offset:3px; border-radius:1px;
}

/* ════════════════════ MASTHEAD / NAV ════════════════════ */
.masthead{
  position:sticky; top:0; z-index:100;
  background:color-mix(in oklab, var(--paper) 88%, transparent);
  backdrop-filter:saturate(120%) blur(8px);
  border-bottom:1px solid var(--rule);
}
.nav{
  max-width:var(--maxw); margin:0 auto;
  padding:.95rem var(--pad);
  display:flex; align-items:center; gap:1.5rem;
}
.wordmark{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(1.2rem, 1rem + 0.8vw, 1.5rem);
  letter-spacing:.005em; text-decoration:none; color:var(--ink);
  margin-right:auto; white-space:nowrap;
}
.wordmark .dot{ color:var(--gilt); }
.wordmark .seg{ font-variant:small-caps; }

.nav-links{
  list-style:none; display:flex; gap:1.9rem; margin:0; padding:0;
  font-family:var(--sans); font-size:.82rem; letter-spacing:.04em;
}
.nav-links a{
  text-decoration:none; color:var(--ink-2);
  padding-bottom:.2rem; border-bottom:1px solid transparent;
  transition:color .2s, border-color .2s;
}
.nav-links a:hover{ color:var(--ink); border-bottom-color:var(--gilt); }

.nav-cb, .nav-burger{ display:none; }
.nav-burger{ cursor:pointer; width:2rem; height:1.4rem; position:relative; }
.nav-burger span{
  position:absolute; left:0; right:0; height:1.4px; background:var(--ink);
  transition:transform .25s, opacity .25s;
}
.nav-burger span:nth-child(1){ top:2px; }
.nav-burger span:nth-child(2){ top:50%; transform:translateY(-50%); }
.nav-burger span:nth-child(3){ bottom:2px; }

@media (max-width:760px){
  .nav-burger{ display:block; }
  .nav-links{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0; padding:.5rem var(--pad) 1.2rem;
    background:var(--paper); border-bottom:1px solid var(--rule);
    max-height:0; overflow:hidden; visibility:hidden;
    transition:max-height .3s ease, visibility .3s;
  }
  .nav-links li{ border-top:1px solid var(--rule); }
  .nav-links a{ display:block; padding:.85rem 0; border-bottom:none; font-size:.95rem; }
  .nav-cb:checked ~ .nav-links{ max-height:24rem; visibility:visible; }
  .nav-cb:checked ~ .nav-burger span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
  .nav-cb:checked ~ .nav-burger span:nth-child(2){ opacity:0; }
  .nav-cb:checked ~ .nav-burger span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }
}

/* ════════════════════ LAYOUT ════════════════════ */
main{ display:block; }
section{
  max-width:var(--maxw); margin:0 auto;
  padding:clamp(3.5rem,9vw,7rem) var(--pad);
  border-bottom:1px solid var(--rule);
}
.sec-head{ max-width:42rem; margin-bottom:clamp(2rem,5vw,3.5rem); }
.sec-sub{ margin-top:1rem; color:var(--muted); max-width:34rem; }

/* ════════════════════ HERO ════════════════════ */
.hero{ padding-top:clamp(3rem,8vw,6rem); position:relative; }
.hero-mark{
  width:clamp(4.5rem,12vw,6.5rem); color:var(--gilt);
  margin-bottom:1.8rem;
}
.hero-mark svg{ display:block; width:100%; height:auto; }
.hero h1{
  font-size:clamp(3rem, 1.6rem + 9vw, 7rem);
  letter-spacing:-0.03em; line-height:0.95;
  margin:0 0 1.6rem;
}
.hero h1 .soft{ color:var(--gilt); }
.lede{
  font-size:clamp(1.2rem, 1.05rem + 0.7vw, 1.55rem);
  line-height:1.5; color:var(--ink); max-width:40rem;
  margin-bottom:2.4rem;
}
.define{
  display:flex; gap:.65rem; flex-wrap:wrap;
  padding:.85rem 0; border-top:1px solid var(--rule);
  max-width:44rem;
}
.define:last-child{ border-bottom:1px solid var(--rule); }
.term{
  font-style:italic; color:var(--ink); font-weight:600;
  min-width:5.5rem;
}
.gloss{ color:var(--muted); font-size:.96rem; }

/* ════════════════════ THESIS ════════════════════ */
.thesis h2{ max-width:24ch; margin-bottom:clamp(2rem,5vw,3rem); }
.thesis-grid{ display:grid; gap:clamp(1.5rem,4vw,3rem); }
.thesis-lead{
  font-size:clamp(1.1rem,1rem+0.5vw,1.35rem); color:var(--ink);
  max-width:38rem;
}
.thesis-cols{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:clamp(1.5rem,4vw,3rem);
  padding-top:1.5rem; border-top:1px solid var(--rule);
}
.thesis-cols p{ max-width:34ch; }
@media (max-width:640px){ .thesis-cols{ grid-template-columns:1fr; } }

/* ════════════════════ OFFER — the ledger ════════════════════ */
.ledger{ list-style:none; margin:0; padding:0; }
.entry{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:clamp(1rem,3vw,2.5rem); align-items:baseline;
  padding:clamp(1.6rem,4vw,2.4rem) 0;
  border-top:1px solid var(--rule);
}
.entry:last-child{ border-bottom:1px solid var(--rule); }
.entry-no{
  font-family:var(--serif); font-size:clamp(1.4rem,1rem+1.4vw,2rem);
  font-weight:600; color:var(--gilt); letter-spacing:.04em;
  line-height:1; min-width:2.2rem;
}
.entry-body{ max-width:46rem; }
.entry-body h3{ margin-bottom:.5rem; }
.entry-tag{
  font-family:var(--sans); font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); white-space:nowrap;
  text-align:right;
}
@media (max-width:680px){
  .entry{ grid-template-columns:auto 1fr; }
  .entry-tag{ grid-column:1 / -1; text-align:left; margin-top:.3rem; }
}

/* ════════════════════ BAND — full bleed material ════════════════════ */
.band{
  max-width:none; margin:0;
  border-bottom:1px solid var(--rule);
  background:
    linear-gradient(135deg, var(--band-1) 0%, var(--band-2) 52%, var(--band-3) 100%);
  color:#efe7d6;
  padding:clamp(4rem,11vw,8rem) var(--pad);
}
.band-inner{ max-width:var(--maxw); margin:0 auto; }
.band-quote{
  font-size:clamp(1.5rem,1.1rem+2.4vw,2.9rem);
  line-height:1.25; letter-spacing:-0.015em;
  max-width:24ch; color:#f4ecdc; font-weight:500;
}
.band-attr{
  font-family:var(--sans); font-size:.78rem; letter-spacing:.2em;
  text-transform:uppercase; margin-top:1.6rem; color:#c9b489;
}

/* ════════════════════ METHOD ════════════════════ */
.steps{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:0; border-top:1px solid var(--rule);
}
.step{
  padding:clamp(1.6rem,3vw,2.4rem) clamp(1.2rem,2vw,1.8rem)
          clamp(1.6rem,3vw,2.4rem) 0;
  border-right:1px solid var(--rule);
}
.step:last-child{ border-right:none; padding-right:0; }
.step-no{
  font-family:var(--sans); font-size:.78rem; letter-spacing:.18em;
  color:var(--gilt-ink); margin-bottom:1.1rem;
}
.step h3{ margin-bottom:.6rem; }
.step p{ font-size:.96rem; color:var(--ink-2); }
@media (max-width:880px){
  .steps{ grid-template-columns:1fr 1fr; }
  .step{ border-right:none; border-bottom:1px solid var(--rule); padding:1.6rem 1.4rem 1.6rem 0; }
  .step:nth-child(odd){ border-right:1px solid var(--rule); padding-right:1.4rem; }
}
@media (max-width:520px){
  .steps{ grid-template-columns:1fr; }
  .step{ border-right:none !important; padding:1.4rem 0; }
  .step:last-child{ border-bottom:none; }
}

/* ════════════════════ STEWARDS ════════════════════ */
.who-grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(1.2rem,3vw,2rem);
}
.who{
  background:var(--paper-2);
  border:1px solid var(--rule);
  border-radius:4px;
  padding:clamp(1.6rem,3vw,2.2rem);
}
.who h3{ margin-bottom:.7rem; }
.who p{ font-size:.96rem; color:var(--ink-2); }
@media (max-width:820px){ .who-grid{ grid-template-columns:1fr; } }

/* ════════════════════ FOOTER ════════════════════ */
.colophon{
  max-width:var(--maxw); margin:0 auto;
  padding:clamp(3rem,7vw,5rem) var(--pad) 2.5rem;
}
.colo-top{
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:clamp(1.5rem,4vw,3rem);
  padding-bottom:2.5rem; border-bottom:1px solid var(--rule);
}
.colo-brand .wordmark--foot{ display:inline-block; margin-bottom:1rem; }
.colo-brand p{ color:var(--muted); font-size:.96rem; max-width:30rem; }
.colo-col h4{
  font-family:var(--sans); font-size:.72rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
  margin-bottom:1rem;
}
.colo-col ul{ list-style:none; margin:0; padding:0; }
.colo-col li{ margin-bottom:.55rem; }
.colo-col a{
  font-family:var(--sans); font-size:.88rem; text-decoration:none;
  color:var(--ink-2); border-bottom:1px solid transparent;
  transition:color .2s, border-color .2s;
}
.colo-col a:hover{ color:var(--ink); border-bottom-color:var(--gilt); }
.colo-bottom{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:.6rem;
  padding-top:1.5rem;
  font-family:var(--sans); font-size:.76rem; letter-spacing:.04em;
  color:var(--muted);
}
@media (max-width:820px){
  .colo-top{ grid-template-columns:1fr 1fr; }
  .colo-brand{ grid-column:1 / -1; }
}
@media (max-width:480px){ .colo-top{ grid-template-columns:1fr; } }

/* ════════════════════ REVEALS — scroll-timeline, progressive ════════════════════
   Items are visible by default. Where supported, they fade/rise into view.
   Disabled entirely under reduced-motion. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .reveal{
      animation:rise linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 42%;
    }
  }
}
@keyframes rise{
  from{ opacity:0; transform:translateY(18px); }
  to{ opacity:1; transform:none; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  html{ scroll-behavior:auto; }
}