:root {
  --paper: #f3ead8;
  --paper-2: #fbf5e8;
  --ink: #171a19;
  --muted: #6e675c;
  --dark: #151c1e;
  --dark-2: #222b2b;
  --gold: #b8914f;
  --gold-2: #dfc17d;
  --line: rgba(54, 43, 28, .18);
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Inter", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --script: "Homemade Apple", cursive;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x:hidden; }
body {
  margin: 0;
  color: var(--ink);
  font-family: var(--sans);
  background: var(--paper) url("./assets/generated/texture-parchment.webp") repeat;
  background-size: 420px 420px;
  overflow-x:hidden;
}
.paper-grain { position: fixed; inset:0; pointer-events:none; z-index:50; opacity:.18; background: repeating-linear-gradient(90deg, rgba(0,0,0,.04) 0 1px, transparent 1px 5px); mix-blend-mode:multiply; }
a { color: inherit; text-decoration: none; }
svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.site-header {
  width: min(1160px, calc(100% - 32px));
  margin: 16px auto 0;
  position: sticky; top: 12px; z-index: 40;
  display:flex; align-items:center; justify-content:space-between; gap: 24px;
  min-height: 70px; padding: 13px 16px;
  background: rgba(249, 242, 228, .88) url("./assets/generated/texture-parchment.webp") repeat;
  background-size: 340px;
  border: 1px solid var(--line);
  box-shadow: 0 14px 50px rgba(46, 35, 19, .10);
  backdrop-filter: blur(12px);
}
.brand { min-width: 164px; text-transform: uppercase; }
.brand-name { display:block; font-family: var(--serif); font-weight: 700; font-size: 25px; letter-spacing: .07em; line-height:.9; }
.brand-sub { display:block; margin-top: 7px; font-family: var(--mono); font-size: 9px; letter-spacing: .22em; color: var(--muted); }
.nav { display:flex; align-items:center; gap: 24px; font-family: var(--mono); font-size: 10px; text-transform:uppercase; letter-spacing:.13em; color:#51483b; }
.nav a { position:relative; padding: 10px 0; }
.nav a.active::after { content:""; position:absolute; left:0; right:0; bottom:2px; height:1px; background: var(--gold); }
.nav-cta, .gold-button, .outline-button {
  min-height: 42px; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding: 0 18px; font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
}
.nav-cta { color: var(--paper-2); background: var(--dark); border: 1px solid rgba(184,145,79,.7); }
main { width: min(1160px, calc(100% - 32px)); margin: 14px auto 44px; }
.hero {
  min-height: 840px;
  position: relative;
  overflow: hidden;
  background: #141b1d url("./assets/generated/texture-dark-paper.webp") repeat;
  border: 1px solid rgba(36,28,20,.24);
  box-shadow: 0 36px 100px rgba(38, 31, 23, .26);
}
.hero-visual { position:absolute; inset:0; background-image: url("./assets/generated/hero-mia-library-navy-blazer.webp"); background-size: cover; background-position: center; }
.hero-shade { position:absolute; inset:0; background: linear-gradient(90deg, rgba(16,20,21,.98) 0%, rgba(17,22,23,.9) 33%, rgba(16,19,20,.38) 62%, rgba(16,19,20,.08) 100%), radial-gradient(circle at 76% 12%, rgba(223,193,125,.22), transparent 28%); }
.hero-copy { position:relative; z-index:2; width:min(610px, 58%); padding: 70px 0 0 62px; color: var(--paper-2); }
.eyebrow, .section-kicker { margin:0; font-family:var(--mono); text-transform:uppercase; letter-spacing:.22em; color:var(--gold-2); font-size:11px; font-weight:700; }
h1, h2, h3, p { margin-top:0; }
h1 { margin: 13px 0 15px; font-family:var(--serif); font-weight:700; font-size: clamp(62px, 7vw, 102px); line-height:.83; letter-spacing:-.045em; }
h1 span { color:#eee1c8; }
.ornament { display:flex; align-items:center; gap:10px; color:var(--gold); width:min(430px,100%); margin: 18px 0 24px; }
.ornament i { flex:1; height:1px; background: linear-gradient(90deg, transparent, currentColor, transparent); opacity:.75; }
.ornament svg { width:18px; height:18px; fill:currentColor; stroke:none; }
.hero-lede { max-width:520px; color: rgba(251,245,232,.76); font-size:20px; line-height:1.62; }
.hero-icons { display:grid; grid-template-columns: repeat(4, 1fr); gap: 14px; max-width: 600px; margin-top: 36px; }
.hero-icons article {
  min-width:0;
  padding: 16px 10px 14px;
  color:var(--gold-2);
  text-align:center;
  background:rgba(251,245,232,.055);
  border:1px solid rgba(223,193,125,.16);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.035);
  backdrop-filter: blur(4px);
}
.hero-icons svg { width:34px; height:34px; margin-bottom: 11px; }
.hero-icons strong { display:block; font-family:var(--serif); color:var(--paper-2); font-size:22px; line-height:1; white-space:nowrap; }
.hero-icons span { display:block; margin-top:8px; color:rgba(251,245,232,.84); font-size:12.5px; font-weight:500; line-height:1.35; }
.quote-card { position:absolute; z-index:3; left:62px; bottom:48px; width: 462px; min-height: 118px; padding: 22px 26px 20px 104px; background: rgba(248,239,222,.95) url("./assets/generated/texture-parchment.webp") repeat; background-size:360px; border:1px solid rgba(184,145,79,.42); box-shadow: 0 22px 60px rgba(0,0,0,.25); }
.quote-card img { position:absolute; left:25px; top:20px; width:70px; height:80px; color:var(--gold); opacity:.58; }
.quote-card p { margin:0; font-family:var(--serif); font-size:22px; line-height:1.14; color:#2a241c; }
.watch-card { position:absolute; z-index:3; right:64px; bottom:76px; display:flex; align-items:center; gap:14px; padding:16px 19px; color:var(--paper-2); background:rgba(13,16,17,.72); border:1px solid rgba(223,193,125,.48); backdrop-filter: blur(12px); }
.watch-card svg { width:36px; height:36px; color:var(--gold-2); }
.watch-card strong { display:block; font-family:var(--mono); font-size:11px; letter-spacing:.13em; text-transform:uppercase; }
.watch-card em { display:block; margin-top:4px; font-style:normal; font-family:var(--mono); font-size:11px; color:#d7bf88; }
.presence, .memory, .cta-panel { border:1px solid var(--line); background: rgba(250,245,235,.82) url("./assets/generated/texture-parchment.webp") repeat; background-size:420px; }
.presence { padding: 70px 48px 62px; text-align:center; }
.presence h2, .memory h2, .cta-panel h2 { margin: 13px auto 18px; max-width: 900px; font-family:var(--serif); font-size: clamp(44px, 5.3vw, 76px); line-height:.92; letter-spacing:-.035em; }
.section-kicker { color: var(--gold); }
.section-intro { max-width:610px; margin: 0 auto 40px; color:var(--muted); font-size:17px; line-height:1.7; }
.dossier-grid { display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; text-align:left; }
.dossier-card { min-height: 430px; position:relative; overflow:hidden; padding: 24px 23px 132px; background:rgba(255,250,241,.72); border:1px solid rgba(82,65,43,.18); box-shadow: inset 0 0 0 1px rgba(255,255,255,.45); }
.dossier-card::before { content:""; position:absolute; inset:10px; border:1px solid rgba(184,145,79,.15); pointer-events:none; }
.card-label { display:flex; align-items:center; gap:9px; color:var(--gold); font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.card-label svg { width:24px; height:24px; }
.dossier-card h3 { margin: 44px 0 18px; font-family:var(--serif); font-size: 34px; line-height:.98; letter-spacing:-.02em; }
.dossier-card p, .dossier-card li { color:#5f574d; font-size:14.5px; line-height:1.62; }
.dossier-card ul { margin:0; padding-left:0; list-style:none; }
.dossier-card li { position:relative; padding-left:18px; margin-bottom:8px; }
.dossier-card li::before { content:""; position:absolute; left:0; top:.72em; width:6px; height:6px; border:1px solid rgba(184,145,79,.74); border-radius:999px; transform:translateY(-50%); }
.compact-list { display:grid; gap:8px; }
.card-art { position:absolute; pointer-events:none; color:#816c48; opacity:.28; }
.mountain { left:18px; right:18px; bottom:12px; width:calc(100% - 36px); height:120px; }
.compass-art { right:-78px; bottom:-82px; width:246px; height:246px; opacity:.16; }
.botanical { right:8px; bottom:-10px; width:150px; height:145px; opacity:.24; }
.script-note, .memory-script { font-family:var(--script); color:#7e6542 !important; font-size:18px !important; line-height:1.55 !important; transform: rotate(-1deg); }
.script-note { position:absolute; left:23px; right:23px; bottom:34px; margin:0 !important; padding-top:16px; border-top:1px solid rgba(184,145,79,.18); }
.memory { margin-top: 0; padding: 54px; display:grid; grid-template-columns: .66fr 1.34fr; gap:42px; position:relative; align-items:center; }
.memory-copy h2 { margin-left:0; font-size:58px; }
.memory-copy p { color:var(--muted); line-height:1.72; font-size:16px; }
.outline-button { margin-top: 18px; border:1px solid rgba(184,145,79,.55); color:#3b3023; background:rgba(255,250,241,.44); }
.outline-button svg { width:18px; height:18px; }
.memory-board { min-width:0; }
.memory-art { position:relative; height:250px; margin:0 0 30px; overflow:hidden; border:1px solid rgba(184,145,79,.34); box-shadow: 0 24px 70px rgba(70,52,29,.18); background:#241c15; }
.memory-art::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(21,28,30,.18), rgba(21,28,30,.02) 52%, rgba(21,28,30,.35)), linear-gradient(0deg, rgba(15,18,18,.52), transparent 44%); pointer-events:none; }
.memory-art img { width:100%; height:100%; object-fit:cover; object-position:center 47%; display:block; filter:saturate(.94) contrast(1.02); }
.memory-art figcaption { position:absolute; z-index:2; left:24px; bottom:20px; margin:0; color:#f8eed9; font-family:var(--serif); font-size:27px; line-height:1; text-shadow:0 2px 18px rgba(0,0,0,.58); }
.timeline { list-style:none; margin:0; padding:0; display:grid; grid-template-columns: repeat(4,1fr); gap: 0; position:relative; }
.timeline::before { content:""; position:absolute; top:31px; left:12%; right:12%; height:1px; background:rgba(154,112,47,.58); }
.timeline li { position:relative; padding:0 16px; text-align:center; }
.timeline li > svg { width:62px; height:62px; padding:14px; color:var(--gold); background:#fbf5e8; border:1px solid rgba(184,145,79,.42); border-radius:999px; position:relative; z-index:2; }
.timeline span { display:block; margin-top:14px; font-family:var(--mono); color:#9a702f; text-transform:uppercase; font-size:11px; font-weight:800; }
.timeline strong { display:block; margin-top:8px; font-family:var(--serif); font-size:24px; line-height:1; }
.timeline p { margin:8px 0 0; color:#766d61; font-size:13px; line-height:1.45; }
.memory-script { grid-column:2; text-align:center; margin:0 !important; color:#6f5430 !important; }
.cta-panel { margin-top:0; padding: 68px 58px 34px; color:var(--paper-2); background: #171d1f url("./assets/generated/texture-dark-paper.webp") repeat; background-size:360px; display:grid; grid-template-columns:.9fr 1.1fr; gap:38px; align-items:center; position:relative; overflow:hidden; }
.cta-panel::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 46% 0%, rgba(184,145,79,.22), transparent 35%); pointer-events:none; }
.cta-copy, .cta-box, .custom-tags, .footer-line { position:relative; z-index:2; }
.cta-copy h2 { margin-left:0; font-size:70px; }
.cta-copy p { color:rgba(251,245,232,.72); line-height:1.7; font-size:17px; }
.cta-box { display:grid; grid-template-columns: minmax(280px, 1fr) minmax(190px, 220px); gap:22px; align-items:center; padding:28px; border:1px solid rgba(223,193,125,.42); background:rgba(8,10,11,.28); }
.cta-box > div { min-width: 0; }
.cta-box strong { font-family:var(--mono); text-transform:uppercase; letter-spacing:.14em; color:var(--gold-2); font-size:11px; }
.cta-box p { margin:10px 0 0; color:rgba(251,245,232,.72); line-height:1.55; }
.cta-box small { grid-column:2; color:#d6c49d; font-family:var(--serif); font-size:17px; }
.gold-button { background: var(--gold-2); color:#161616; border:1px solid var(--gold-2); min-height:54px; min-width:190px; white-space: nowrap; }
.custom-tags { grid-column:1 / -1; display:grid; grid-template-columns:repeat(6,1fr); gap:12px; margin-top:28px; }
.custom-tags span { display:flex; flex-direction:column; align-items:center; gap:9px; color:#dec58e; font-family:var(--mono); font-size:10px; letter-spacing:.11em; text-transform:uppercase; }
.custom-tags svg { width:28px; height:28px; }
.footer-line { grid-column:1 / -1; display:flex; align-items:center; gap:18px; justify-content:center; color:#d8bf83; font-family:var(--mono); text-transform:uppercase; letter-spacing:.18em; font-size:10px; margin:26px 0 0; }
.footer-line span { height:1px; width:140px; background:rgba(223,193,125,.32); }
@media (max-width: 980px) {
  .nav { display:none; }
  main, .site-header { width:min(100% - 24px, 760px); }
  .hero { min-height: 990px; }
  .hero-visual { background-position: 63% top; }
  .hero-shade { background: linear-gradient(180deg, rgba(16,20,21,.25), rgba(16,20,21,.94) 48%, rgba(16,20,21,.99)); }
  .hero-copy { width:auto; padding: 420px 28px 0; }
  .quote-card { left:24px; right:24px; bottom:28px; width:auto; }
  .watch-card { right:24px; top:310px; bottom:auto; }
  .hero-icons, .dossier-grid { grid-template-columns: repeat(2,1fr); }
  .memory, .cta-panel { grid-template-columns:1fr; }
  .memory-script { grid-column:auto; }
  .memory-art { height:240px; }
  .custom-tags { grid-template-columns:repeat(3,1fr); }
}
@media (max-width: 620px) {
  .site-header { top:8px; }
  .nav-cta { display:none; }
  .brand-name { font-size:22px; }
  main, .site-header { width:calc(100% - 20px); }
  .site-header { min-height:62px; padding:10px 13px; }
  .brand-sub { font-size:8px; letter-spacing:.18em; }
  .hero { min-height: 0; overflow-x:clip; padding-bottom:1px; }
  .hero-visual { background-position:60% top; }
  .hero-copy { width:100%; max-width:100%; padding:360px 22px 0; }
  h1 { max-width:100%; font-size:52px; line-height:.9; letter-spacing:-.035em; }
  .presence h2, .memory h2, .cta-panel h2 { font-size:40px; line-height:1; letter-spacing:-.025em; }
  .dossier-card h3 { font-size:31px; line-height:1.02; }
  .section-intro { font-size:16px; }
  .quote-card p { font-size:20px; line-height:1.2; }
  .hero-lede { max-width:29ch; font-size:18px; line-height:1.5; overflow-wrap:break-word; }
  .ornament { width:100%; margin:16px 0 20px; }
  .watch-card { left:22px; right:auto; top:286px; padding:12px 14px; gap:10px; max-width:calc(100% - 44px); }
  .watch-card svg { width:31px; height:31px; }
  .watch-card strong, .watch-card em { font-size:10px; }
  .hero-icons, .dossier-grid, .timeline, .custom-tags { grid-template-columns:1fr; }
  .timeline::before { display:none; }
  .memory-art { height:220px; margin-bottom:26px; }
  .compass-art { right:-26px; bottom:-48px; width:190px; height:190px; }
  .memory-art figcaption { font-size:24px; }
  .presence, .memory, .cta-panel { padding:38px 22px; }
  .quote-card { position:relative; left:auto; right:auto; bottom:auto; width:auto; margin:28px 22px 32px; padding:22px; }
  .quote-card img { display:none; }
  .cta-box { grid-template-columns:1fr; }
  .cta-box small { grid-column:auto; }
  .footer-line span { width:42px; }
}