/* ==========================================================================
   Homepage
   ========================================================================== */

.home-hero { position: relative; background: var(--dark); color: var(--on-dark);
  padding-top: clamp(9rem, 16vw, 13rem); padding-bottom: clamp(4rem, 9vw, 7rem); overflow: hidden; }
.home-hero::before { content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(58vw 60vh at 82% -8%, rgba(45,88,73,.5), transparent 60%),
    radial-gradient(46vw 52vh at 6% 108%, rgba(165,128,58,.20), transparent 60%); }
.home-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"); }
.hero-grid { position: relative; display: grid; grid-template-columns: 1.5fr .9fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.hero-main h1 { color: var(--on-dark); font-size: var(--step-6); line-height: .98; letter-spacing: -.025em; font-weight: 300;
  margin: .2em 0 .35em; }
.hero-stand { font-family: var(--f-body); font-size: var(--step-2); line-height: 1.36; color: var(--on-dark);
  max-width: 24ch; font-weight: 380; font-style: italic; margin: 0 0 1.6rem; }
.hero-meta { font-family: var(--f-ui); font-size: .92rem; line-height: 1.7; color: var(--on-dark-2); margin: 0 0 2.2rem; }
.hero-meta em { color: var(--gold-2); font-style: italic; }
.hero-cta { display: flex; gap: 1rem; flex-wrap: wrap; }

/* Hero portrait */
.hero-portrait { position: relative; margin: 0; width: 100%; max-width: 400px; margin-inline: auto; }
.hero-portrait::before { content: ""; position: absolute; inset: -11px; border: 1px solid rgba(197,160,90,.4);
  border-radius: 18px; pointer-events: none; }
.hero-portrait img { width: 100%; height: auto; display: block; border-radius: 10px;
  box-shadow: var(--shadow-dark); filter: saturate(1.02); }
@media (max-width: 900px) { .hero-portrait { max-width: 320px; } }

/* Hero plate (typographic portrait panel) */
.hero-plate { position: relative; }
.plate-inner { position: relative; border: 1px solid rgba(197,160,90,.4); border-radius: var(--radius-lg);
  padding: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2.4rem); text-align: center;
  background: linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.01));
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), var(--shadow-dark); }
.plate-inner::before { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(197,160,90,.18); border-radius: 14px; pointer-events: none; }
.plate-mono { font-family: var(--f-display); font-size: clamp(3rem, 7vw, 4.6rem); font-weight: 300; letter-spacing: .06em;
  color: var(--gold-2); line-height: 1; }
.plate-years { font-family: var(--f-ui); font-size: .74rem; letter-spacing: .22em; text-transform: uppercase; color: var(--on-dark-2);
  margin: 1rem 0 1.6rem; }
.plate-themes { list-style: none; margin: 0; padding: 1.4rem 0 0; border-top: 1px solid rgba(197,160,90,.22);
  display: grid; gap: .55rem; }
.plate-themes li { font-family: var(--f-body); font-size: .96rem; color: var(--on-dark); font-style: italic; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } .hero-plate { max-width: 340px; } }

/* Archive CTA stats */
.archive-cta .stat-row { display: flex; justify-content: center; gap: clamp(2rem, 6vw, 5rem); flex-wrap: wrap; margin-top: 3rem; }
.archive-cta .stat { display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.archive-cta .stat-n { font-family: var(--f-display); font-size: clamp(2.6rem, 5vw, 3.8rem); color: var(--pine); font-weight: 400; line-height: 1; }
.archive-cta .stat-l { font-family: var(--f-ui); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.archive-cta .stat:nth-child(2) .stat-n { color: var(--gold); }