:root{
  --cream:#f6f1e6;
  --paper:#fffdf8;
  --ink:#25211b;
  --ink-soft:#5b5346;
  --green:#2f4237;
  --green-deep:#1e2b24;
  --ochre:#a8802f;
  --ochre-light:#c9a24a;
  --terracotta:#a2503c;
  --rule:rgba(37,33,27,.14);
  --shadow:0 1px 2px rgba(37,33,27,.05), 0 8px 24px -12px rgba(37,33,27,.25);
  --display:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:"Josefin Sans", "Helvetica Neue", Arial, sans-serif;
  --max:1120px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:var(--sans); font-weight:300; font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--display); font-weight:600; line-height:1.1; margin:0}
p{margin:0 0 1em}
a{color:var(--terracotta)}
em{font-style:italic}

.eyebrow{
  font-size:.72rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ochre); margin:0 0 1.2em;
}

/* ---------- hero ---------- */
.hero{
  position:relative; background:var(--green-deep); color:#f0e9da;
  padding:clamp(4rem,10vw,7.5rem) 1.5rem 5.5rem;
  overflow:hidden;
}
.hero::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(900px 400px at 80% -10%, rgba(201,162,74,.22), transparent 65%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 42px);
  pointer-events:none;
}
.hero-inner{position:relative; max-width:var(--max); margin:0 auto}
.hero .eyebrow{color:var(--ochre-light)}
.hero h1{
  font-size:clamp(3.2rem,11vw,7rem); letter-spacing:-.01em; margin:0 0 .1em;
}
.hero h1 em{color:var(--ochre-light)}
.hero-nl{
  font-family:var(--display); font-style:italic; font-size:clamp(1.2rem,3vw,1.7rem);
  color:rgba(240,233,218,.62); margin:0 0 1.6em;
}
.lede{max-width:46ch; font-size:1.05rem; color:rgba(240,233,218,.85)}
.cta{
  display:inline-block; margin-top:1.4rem; padding:.7em 1.6em;
  border:1px solid var(--ochre-light); color:var(--ochre-light);
  text-decoration:none; letter-spacing:.14em; text-transform:uppercase; font-size:.75rem;
  transition:background .2s,color .2s;
}
.cta:hover{background:var(--ochre-light); color:var(--green-deep)}

.whiplash{
  display:block; position:absolute; left:0; right:0; bottom:-1px;
  width:100%; height:70px; color:var(--ochre-light); opacity:.55;
}
.flip{transform:scaleY(-1); position:relative; bottom:auto; opacity:.35}

/* ---------- sections ---------- */
main{max-width:var(--max); margin:0 auto; padding:0 1.5rem}
section{padding:clamp(3rem,7vw,5.5rem) 0; border-bottom:1px solid var(--rule)}
section:last-child{border-bottom:0}
section > h2{
  font-size:clamp(1.9rem,4.5vw,2.8rem); margin-bottom:1.2rem;
}
section > h2::after{
  content:""; display:block; width:64px; height:2px; margin-top:.7rem;
  background:linear-gradient(90deg,var(--ochre),transparent);
}
.cols{columns:2; column-gap:3rem; max-width:78ch}
.cols p{break-inside:avoid}

/* ---------- glossary ---------- */
.gloss-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1.4rem}
.gloss{border-top:2px solid var(--ochre); padding-top:.9rem}
.gloss h3{font-size:1.25rem; margin-bottom:.3rem}
.gloss p{font-size:.92rem; color:var(--ink-soft); margin:0}

/* ---------- feature house ---------- */
.feature-house{
  display:grid; grid-template-columns:1fr minmax(160px,240px); gap:3rem; align-items:center;
}
.feature-house h2{font-size:clamp(2.2rem,5vw,3.4rem); margin-bottom:.6rem}
.fh-body{max-width:62ch}
.fh-note{
  font-size:.9rem; color:var(--ink-soft); border-left:2px solid var(--ochre);
  padding-left:1rem; margin-top:1.4rem;
}
.fh-art svg{width:100%; height:auto; opacity:.85}
.link{
  display:inline-block; margin-top:1.2rem; font-size:.78rem;
  letter-spacing:.14em; text-transform:uppercase; text-decoration:none;
  border-bottom:1px solid currentColor; padding-bottom:2px;
}

/* ---------- filters ---------- */
.section-head{margin-bottom:2.4rem}
.sub{color:var(--ink-soft); margin-bottom:1.4rem}
.filters{display:flex; flex-wrap:wrap; gap:.5rem}
.chip{
  font-family:var(--sans); font-size:.75rem; letter-spacing:.1em; text-transform:uppercase;
  padding:.5em 1.1em; border:1px solid var(--rule); background:transparent;
  color:var(--ink-soft); border-radius:999px; cursor:pointer;
  transition:all .18s;
}
.chip:hover{border-color:var(--ochre); color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--green); border-color:var(--green); color:#f3ecdd}

/* ---------- cards ---------- */
.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:1.4rem}
.card{
  background:var(--paper); border:1px solid var(--rule); border-radius:2px;
  padding:1.6rem 1.6rem 1.4rem; box-shadow:var(--shadow);
  display:flex; flex-direction:column; position:relative;
}
.card.is-star{border-top:3px solid var(--ochre)}
.card-nr{
  font-family:var(--display); font-size:2.4rem; line-height:1; color:var(--green);
}
.card-meta{
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ochre); margin:.6rem 0 .2rem;
}
.card-name{font-family:var(--display); font-size:1.35rem; margin:.1rem 0 .4rem}
.card-style{font-size:.85rem; color:var(--ink-soft); font-style:italic; margin-bottom:.9rem}
.card-text{font-size:.94rem; margin-bottom:1rem}
.card ul{margin:0 0 1rem; padding-left:1.1rem; font-size:.9rem; color:var(--ink-soft)}
.card li{margin-bottom:.35rem}
.card li::marker{color:var(--ochre)}
.card-signed{
  font-size:.8rem; color:var(--ink-soft); border-left:2px solid var(--rule);
  padding-left:.8rem; margin-bottom:1rem;
}
.card-protect{
  font-size:.75rem; letter-spacing:.06em; color:var(--terracotta); margin-bottom:1rem;
}
.tags{display:flex; flex-wrap:wrap; gap:.35rem; margin-top:auto; padding-top:.6rem}
.tag{
  font-size:.66rem; letter-spacing:.1em; text-transform:uppercase;
  background:rgba(168,128,47,.12); color:#7d5c2e; padding:.35em .7em; border-radius:2px;
}
.card-link{
  margin-top:1rem; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  text-decoration:none; color:var(--ink-soft);
}
.card-link:hover{color:var(--terracotta)}
.empty{text-align:center; color:var(--ink-soft); font-style:italic; padding:2rem 0}

/* ---------- sources / footer ---------- */
.sources ul{padding-left:1.1rem; font-size:.92rem; color:var(--ink-soft); max-width:80ch}
.sources li{margin-bottom:.6rem}
.fine{font-size:.85rem; color:var(--ink-soft); font-style:italic; margin-top:1.4rem}
footer{
  position:relative; background:var(--green-deep); color:rgba(240,233,218,.6);
  text-align:center; padding:3.5rem 1.5rem 2.5rem; font-size:.8rem; letter-spacing:.08em;
}
footer p{margin:0}

@media (max-width:760px){
  .cols{columns:1}
  .feature-house{grid-template-columns:1fr}
  .fh-art{max-width:200px; margin:0 auto}
}