/* homeOB — design system
   Palette: paper linen / deep spruce / fern / mist sage / dawn amber
   Type: Young Serif (display) · Source Serif 4 (body) · Karla (utility)
   Signature: the dawn rule + the corridor */

:root{
  --paper:#F6F3EC;
  --paper-2:#EFEAE0;
  --spruce:#1E3B33;
  --spruce-2:#16302A;
  --fern:#4A6B5E;
  --mist:#CBD9CE;
  --dawn:#D9A441;
  --dawn-soft:#F1E3BE;
  --ink:#24352F;
  --max:1080px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:"Source Serif 4",Georgia,serif;
  font-size:1.075rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

a{color:var(--fern);text-decoration-color:var(--mist);text-underline-offset:3px}
a:hover{color:var(--spruce);text-decoration-color:var(--dawn)}
a:focus-visible,button:focus-visible{outline:2px solid var(--dawn);outline-offset:3px;border-radius:2px}

h1,h2,h3{font-family:"Young Serif",Georgia,serif;font-weight:400;color:var(--spruce);line-height:1.15;letter-spacing:-0.01em}
h1{font-size:clamp(2rem,5vw,3.1rem);margin-bottom:.6em}
h2{font-size:clamp(1.45rem,3vw,1.9rem);margin:2.2em 0 .55em}
h3{font-size:1.15rem;margin:1.6em 0 .4em}
p{margin-bottom:1em;max-width:66ch}
ul,ol{margin:0 0 1.2em 1.2em;max-width:64ch}
li{margin-bottom:.45em}
strong{color:var(--spruce)}

.eyebrow{
  font-family:"Karla",system-ui,sans-serif;
  font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fern);margin-bottom:.9em;display:block;
}

/* the dawn rule — light entering from the left */
.rule{height:2px;width:76px;border:0;margin:0 0 1.6em;
  background:linear-gradient(90deg,var(--dawn),rgba(217,164,65,0));}

/* header */
header.site{
  position:sticky;top:0;z-index:20;
  background:color-mix(in srgb,var(--paper) 92%,white 8%);
  border-bottom:1px solid var(--paper-2);
  backdrop-filter:blur(6px);
}
.nav{max-width:var(--max);margin:0 auto;padding:.8rem 1.25rem;
  display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap}
.brand{font-family:"Young Serif",serif;font-size:1.25rem;color:var(--spruce);text-decoration:none}
.brand span{color:var(--dawn)}
.nav nav{display:flex;gap:1rem;flex-wrap:wrap;margin-left:auto;align-items:center}
.nav nav a{font-family:"Karla",sans-serif;font-size:.9rem;text-decoration:none;color:var(--ink)}
.nav nav a:hover{color:var(--spruce)}
.nav nav a[aria-current="page"]{color:var(--spruce);border-bottom:2px solid var(--dawn)}

.btn{
  display:inline-block;font-family:"Karla",sans-serif;font-size:.92rem;font-weight:700;
  background:var(--spruce);color:var(--paper)!important;text-decoration:none;
  padding:.62rem 1.25rem;border-radius:999px;border:1px solid var(--spruce);
}
.btn:hover{background:var(--spruce-2)}
.btn.ghost{background:transparent;color:var(--spruce)!important;border-color:var(--fern)}
.btn.ghost:hover{border-color:var(--spruce)}

/* hero — dawn light rising from the home */
.hero{position:relative;overflow:hidden;
  background:
    radial-gradient(58% 46% at 50% 108%, var(--dawn-soft) 0%, rgba(241,227,190,.45) 42%, rgba(246,243,236,0) 72%),
    var(--paper);
  border-bottom:1px solid var(--paper-2);
}
.hero .wrap{padding-top:4.5rem;padding-bottom:4.75rem}
.hero p.lede{font-size:1.22rem;color:var(--ink);max-width:56ch}
.hero .actions{margin-top:1.8rem;display:flex;gap:.8rem;flex-wrap:wrap}
.tagline{font-family:"Karla",sans-serif;font-size:.85rem;letter-spacing:.08em;color:var(--fern);margin-top:2.6rem}

.wrap{max-width:var(--max);margin:0 auto;padding:2.6rem 1.25rem}
section.band{border-bottom:1px solid var(--paper-2)}

/* the corridor — criteria and stats live between two walls */
.corridor{
  border-left:2px solid var(--mist);border-right:2px solid var(--mist);
  padding:1.35rem 1.6rem;margin:1.8rem 0;max-width:62ch;position:relative;background:transparent;
}
.corridor .label{
  position:absolute;top:-0.72em;left:1.2rem;background:var(--paper);padding:0 .55em;
  font-family:"Karla",sans-serif;font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--fern);
}
.dark .corridor .label{background:var(--spruce)}
.corridor p:last-child,.corridor ul:last-child{margin-bottom:0}

/* dark evidence sections */
.dark{background:var(--spruce);color:var(--paper)}
.dark h2,.dark h3{color:var(--paper)}
.dark strong{color:var(--dawn-soft)}
.dark a{color:var(--dawn-soft)}
.dark .corridor{border-color:var(--fern)}
.dark .eyebrow{color:var(--mist)}

/* three doors on the home page */
.doors{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.1rem;margin:2rem 0}
.door{border:1px solid var(--paper-2);background:#fff;border-radius:10px;padding:1.4rem;display:block;text-decoration:none;color:var(--ink)}
.door:hover{border-color:var(--mist)}
.door h3{margin-top:.2em}
.door .eyebrow{margin-bottom:.3em}
.door p{font-size:.98rem;margin-bottom:0}

/* essay typography */
article.essay{max-width:70ch;margin:0 auto;padding:3rem 1.25rem 4rem}
article.essay h1{font-size:clamp(1.7rem,4vw,2.4rem)}
article.essay .meta{font-family:"Karla",sans-serif;font-size:.85rem;color:var(--fern);margin-bottom:2rem}

.essay-list{list-style:none;margin:2rem 0}
.essay-list li{border-top:1px solid var(--paper-2);padding:1.1rem 0;margin:0}
.essay-list a{font-family:"Young Serif",serif;font-size:1.15rem;text-decoration:none}
.essay-list p{font-size:.95rem;margin:.35em 0 0;color:var(--ink)}

/* tables */
table{border-collapse:collapse;width:100%;max-width:70ch;margin:1.4rem 0;font-size:.98rem}
th,td{text-align:left;padding:.6rem .7rem;border-bottom:1px solid var(--paper-2);vertical-align:top}
th{font-family:"Karla",sans-serif;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--fern)}

/* FAQ */
details{border-top:1px solid var(--paper-2);padding:.9rem 0}
details:last-of-type{border-bottom:1px solid var(--paper-2)}
summary{font-family:"Young Serif",serif;font-size:1.08rem;color:var(--spruce);cursor:pointer}
details p{margin-top:.7em}

/* footer */
footer.site{background:var(--spruce-2);color:var(--mist);margin-top:3rem}
footer.site .wrap{padding:2.4rem 1.25rem;display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
footer.site a{color:var(--paper);font-family:"Karla",sans-serif;font-size:.9rem;text-decoration:none;display:block;margin:.3em 0}
footer.site a:hover{color:var(--dawn-soft)}
footer.site .brand{color:var(--paper)}
footer.site p{font-size:.85rem;max-width:none}
.legal{font-family:"Karla",sans-serif;font-size:.78rem;color:var(--mist);opacity:.85}

@media (max-width:640px){
  .nav{gap:.6rem}
  .nav nav{gap:.7rem;margin-left:0}
  .hero .wrap{padding-top:3rem;padding-bottom:3.4rem}
}