/* ============================================================
   Peace Diamond — shared design system
   Editorial luxury: warm near-black + single gold accent.
   Tokens driven by Tweaks (gold accent, serif family, density).
   ============================================================ */

:root{
  /* surfaces */
  --bg:        #100c08;
  --bg-soft:   #16110b;
  --bg-card:   #1b150d;
  --line:      rgba(238,224,198,.12);
  --line-soft: rgba(238,224,198,.07);

  /* ink */
  --ink:       #f3ecdd;
  --ink-2:     rgba(243,236,221,.66);
  --ink-3:     rgba(243,236,221,.42);

  /* accent (set live by Tweaks) */
  --gold:      #c6a35c;
  --gold-deep: color-mix(in oklab, var(--gold) 78%, #3a2c12);
  --gold-soft: color-mix(in oklab, var(--gold) 18%, transparent);

  /* type families (serif set live by Tweaks) */
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans:  "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  /* density multiplier (set live by Tweaks) */
  --d: 1;
  --section-y: calc(120px * var(--d));
  --gap-lg: calc(72px * var(--d));
  --gap-md: calc(40px * var(--d));

  --maxw: 1240px;
  --maxw-text: 760px;
}

*{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:18px;
  line-height:1.65;
  font-weight:380;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

::selection{ background:var(--gold-soft); color:var(--ink); }

a{ color:inherit; text-decoration:none; }

img{ max-width:100%; display:block; }

/* ---- layout primitives ---- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(22px,5vw,56px); }
.section{ padding-block:var(--section-y); position:relative; }
.section--soft{ background:var(--bg-soft); }
.divider{ height:1px; background:var(--line); border:0; margin:0; }

/* ---- typography ---- */
.eyebrow{
  font-family:var(--sans);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--gold);
  display:inline-flex;
  align-items:center;
  gap:14px;
  margin:0 0 28px;
}
.eyebrow::before{
  content:"";
  width:30px; height:1px;
  background:var(--gold);
  opacity:.6;
}
.eyebrow--plain::before{ display:none; }

.display{
  font-family:var(--serif);
  font-weight:340;
  line-height:1.02;
  letter-spacing:-.012em;
  margin:0;
  font-size:clamp(2.6rem, 6.6vw, 5.6rem);
  text-wrap:balance;
}
.display--xl{ font-size:clamp(3rem, 8.4vw, 7rem); }

.h2{
  font-family:var(--serif);
  font-weight:350;
  line-height:1.06;
  letter-spacing:-.01em;
  margin:0;
  font-size:clamp(2rem, 4.4vw, 3.6rem);
  text-wrap:balance;
}
.h3{
  font-family:var(--serif);
  font-weight:380;
  line-height:1.12;
  letter-spacing:-.005em;
  margin:0;
  font-size:clamp(1.5rem, 2.4vw, 2.05rem);
}

/* signature: italic gold emphasis word inside large headings */
.em{
  font-style:italic;
  font-weight:380;
  color:var(--gold);
}
.display .em, .h2 .em{ font-weight:340; }

.lede{
  font-size:clamp(1.12rem, 1.5vw, 1.45rem);
  line-height:1.6;
  color:var(--ink-2);
  font-weight:380;
  max-width:var(--maxw-text);
  margin:0;
}
.body-text{ color:var(--ink-2); }
.body-text p{ margin:0 0 1.15em; max-width:var(--maxw-text); }
.body-text p:last-child{ margin-bottom:0; }
.muted{ color:var(--ink-3); }

/* ---- buttons ---- */
.btn{
  --bh:54px;
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  height:var(--bh); padding:0 30px;
  font-family:var(--sans); font-size:14px; font-weight:600;
  letter-spacing:.04em;
  border-radius:2px;
  cursor:pointer;
  transition:background .35s ease, color .35s ease, border-color .35s ease, transform .35s ease;
  border:1px solid var(--gold);
  background:var(--gold);
  color:#191206;
  white-space:nowrap;
}
.btn:hover{ background:transparent; color:var(--gold); }
.btn--ghost{ background:transparent; color:var(--gold); }
.btn--ghost:hover{ background:var(--gold); color:#191206; }
.btn--sm{ --bh:44px; padding:0 22px; font-size:13px; }

/* text link with animated underline */
.tlink{
  display:inline-flex; align-items:center; gap:10px;
  font-size:14px; font-weight:600; letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--gold);
  padding-bottom:4px;
  position:relative;
}
.tlink::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--gold); transform:scaleX(.001); transform-origin:left;
  transition:transform .45s cubic-bezier(.22,1,.36,1);
}
.tlink:hover::after{ transform:scaleX(1); }
.tlink .arr{ transition:transform .4s cubic-bezier(.22,1,.36,1); }
.tlink:hover .arr{ transform:translateX(5px); }

/* ---- nav ---- */
.nav{
  position:sticky; top:0; z-index:100;
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  background:color-mix(in oklab, var(--bg) 78%, transparent);
  border-bottom:1px solid transparent;
  transition:border-color .4s ease, background .4s ease;
}
.nav.is-stuck{ border-bottom-color:var(--line); background:color-mix(in oklab, var(--bg) 90%, transparent); }
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  height:78px; gap:30px;
}
.brand{
  font-family:var(--serif); font-size:21px; font-weight:400;
  letter-spacing:.005em; white-space:nowrap;
}
.brand .em{ font-size:.98em; }
.nav-links{ display:flex; align-items:center; gap:38px; margin-left:auto; }
.nav-link{
  font-size:13.5px; font-weight:500; letter-spacing:.04em;
  color:var(--ink-2); position:relative; padding:6px 0;
  transition:color .3s ease; white-space:nowrap;
}
.nav-link:hover{ color:var(--ink); }
.nav-link::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--gold); transform:scaleX(0); transform-origin:left;
  transition:transform .4s cubic-bezier(.22,1,.36,1);
}
.nav-link:hover::after, .nav-link[aria-current="page"]::after{ transform:scaleX(1); }
.nav-link[aria-current="page"]{ color:var(--ink); }
.nav-cta{ margin-left:8px; }
.nav-burger{ display:none; }

/* ---- stat blocks ---- */
.stats{ display:grid; gap:clamp(28px,5vw,64px); grid-template-columns:repeat(3,1fr); }
.stat{ border-top:1px solid var(--line); padding-top:26px; }
.stat-num{
  font-family:var(--serif); font-weight:330;
  font-size:clamp(3rem,5.6vw,4.6rem); line-height:.95;
  letter-spacing:-.02em; color:var(--ink);
}
.stat-num .em{ color:var(--gold); }
.stat-cap{ margin-top:16px; color:var(--ink-2); font-size:15px; line-height:1.5; max-width:30ch; }

/* ---- numbered list ---- */
.numlist{ list-style:none; margin:0; padding:0; display:grid; gap:0; }
.numlist li{
  display:grid; grid-template-columns:auto 1fr; gap:clamp(20px,3vw,46px);
  align-items:baseline;
  padding:calc(26px * var(--d)) 0;
  border-top:1px solid var(--line);
}
.numlist li:last-child{ border-bottom:1px solid var(--line); }
.numlist .n{
  font-family:var(--mono); font-size:13px; font-weight:500;
  color:var(--gold); letter-spacing:.05em; padding-top:.5em;
}
.numlist .t{ font-family:var(--serif); font-size:clamp(1.3rem,2.2vw,1.9rem); font-weight:360; line-height:1.2; }
.numlist .t small{ display:block; font-family:var(--sans); font-size:16px; font-weight:380; color:var(--ink-2); margin-top:10px; line-height:1.55; letter-spacing:0; max-width:62ch; }

/* ---- pull quote ---- */
.pull{ position:relative; }
.pull-mark{
  font-family:var(--serif); font-size:clamp(5rem,12vw,9rem); line-height:.7;
  color:var(--gold); opacity:.32; margin-bottom:-.1em;
}
.pull-q{
  font-family:var(--serif); font-weight:330;
  font-size:clamp(1.8rem,3.6vw,3rem); line-height:1.18; letter-spacing:-.01em;
  text-wrap:balance;
}
.pull-q .em{ color:var(--gold); }
.pull-cite{
  margin-top:34px; font-family:var(--sans); font-size:13.5px;
  letter-spacing:.05em; color:var(--ink-2); display:flex; flex-direction:column; gap:3px;
}
.pull-cite b{ color:var(--ink); font-weight:600; letter-spacing:.02em; white-space:nowrap; }
.pull-cite span{ color:var(--gold); text-transform:uppercase; font-size:12px; letter-spacing:.18em; }

/* ---- quote cards ---- */
.qcards{ display:grid; gap:clamp(20px,2.4vw,30px); grid-template-columns:repeat(2,1fr); }
.qcard{
  background:var(--bg-card);
  border:1px solid var(--line);
  padding:clamp(30px,3.4vw,48px);
  display:flex; flex-direction:column; gap:28px;
  transition:border-color .4s ease, transform .4s ease;
}
.qcard:hover{ border-color:var(--gold-soft); transform:translateY(-3px); }
.qcard .mark{ font-family:var(--serif); font-size:3.4rem; line-height:.5; color:var(--gold); height:.5em; }
.qcard blockquote{
  margin:0; font-family:var(--serif); font-weight:350;
  font-size:clamp(1.2rem,1.8vw,1.5rem); line-height:1.34; color:var(--ink);
}
.qcard .who{ display:flex; align-items:center; gap:16px; margin-top:auto; }
.qcard .ava{ width:52px; height:52px; border-radius:50%; flex:none; overflow:hidden; border:1px solid var(--line); }
.qcard .who-t{ display:flex; flex-direction:column; gap:2px; }
.qcard .who-t b{ font-family:var(--sans); font-size:15px; font-weight:600; letter-spacing:.01em; }
.qcard .who-t span{ font-size:12.5px; letter-spacing:.04em; color:var(--ink-3); }

/* ---- image placeholders / slots ---- */
image-slot{ width:100%; }
image-slot::part(frame){ background:repeating-linear-gradient(135deg, rgba(238,224,198,.045) 0 2px, transparent 2px 12px), #1e1710; box-shadow:inset 0 0 0 1px var(--line); }
image-slot::part(empty){ color:var(--ink-2); }
.imgph{
  position:relative; width:100%; overflow:hidden;
  background:
    repeating-linear-gradient(135deg, rgba(238,224,198,.05) 0 2px, transparent 2px 11px),
    var(--bg-card);
  border:1px solid var(--line);
  display:grid; place-items:center;
}
.imgph .imgph-tag{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); padding:7px 12px; border:1px solid var(--line);
  background:color-mix(in oklab, var(--bg) 70%, transparent); border-radius:2px;
}
.ratio-43{ aspect-ratio:4/3; }
.ratio-32{ aspect-ratio:3/2; }
.ratio-11{ aspect-ratio:1/1; }
.ratio-169{ aspect-ratio:16/9; }
.ratio-portrait{ aspect-ratio:4/5; }

/* ---- footer / social CTA ---- */
.cta-social{ background:var(--bg-soft); text-align:center; }
.cta-social .h2{ margin-inline:auto; }
.socials{ display:flex; justify-content:center; gap:16px; margin-top:48px; flex-wrap:wrap; }
.social{
  width:58px; height:58px; border:1px solid var(--line); border-radius:50%;
  display:grid; place-items:center; color:var(--ink-2);
  transition:border-color .35s ease, color .35s ease, transform .35s ease, background .35s ease;
}
.social:hover{ border-color:var(--gold); color:var(--gold); transform:translateY(-3px); }
.social svg{ width:20px; height:20px; }

footer.site{ background:var(--bg); border-top:1px solid var(--line); }
.foot-grid{
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:48px;
  padding-block:calc(76px * var(--d));
}
.foot-brand .brand{ font-size:24px; }
.foot-brand p{ color:var(--ink-2); font-size:15px; max-width:34ch; margin:20px 0 0; line-height:1.6; }
.foot-col h4{
  font-family:var(--sans); font-size:11.5px; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-3); margin:0 0 20px;
}
.foot-col a{ display:block; color:var(--ink-2); font-size:15px; padding:6px 0; transition:color .3s ease; }
.foot-col a:hover{ color:var(--gold); }
.foot-bar{ border-top:1px solid var(--line); padding-block:26px; display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.foot-bar small{ color:var(--ink-3); font-size:12.5px; letter-spacing:.04em; }

/* ---- engagement / signup form (shared across pages) ---- */
.engage-form{
  max-width:600px; margin:calc(44px * var(--d)) auto 0; text-align:left;
  display:flex; flex-direction:column; gap:16px;
}
.engage-row{ display:flex; gap:14px; }
.field{ flex:1; display:flex; flex-direction:column; gap:8px; }
.field-lbl{
  font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-3);
}
.field input{
  width:100%; height:54px; padding:0 18px;
  background:var(--bg-card); border:1px solid var(--line); border-radius:2px;
  color:var(--ink); font-family:var(--sans); font-size:15px;
  transition:border-color .3s ease;
}
.field input:focus{ outline:none; border-color:var(--gold); }
.field input::placeholder{ color:var(--ink-3); }
.engage-fs{ border:0; margin:0; padding:0; }
.engage-fs legend{ padding:0; margin-bottom:12px; }
.engage-opts{ display:grid; grid-template-columns:1fr; gap:10px; }
.opt{
  display:flex; align-items:center; gap:12px; padding:14px 16px;
  border:1px solid var(--line); border-radius:2px; cursor:pointer;
  font-family:var(--sans); font-size:13.5px; line-height:1.35; color:var(--ink-2);
  transition:border-color .3s ease, background .3s ease, color .3s ease;
}
.opt:hover{ border-color:var(--gold-soft); color:var(--ink); }
.opt input{ width:17px; height:17px; flex:none; accent-color:var(--gold); cursor:pointer; }
.opt:has(input:checked){ border-color:var(--gold); background:var(--gold-soft); color:var(--ink); }
.engage-form > .btn{ align-self:center; margin-top:6px; min-width:200px; }
.engage-thanks{
  text-align:center; color:var(--gold); font-family:var(--sans); font-size:15px;
  letter-spacing:.02em; margin:0;
}
@media (max-width:620px){
  .engage-form .engage-row{ flex-direction:column; }
  .engage-form .engage-opts{ grid-template-columns:1fr; }
  .engage-form > .btn{ width:100%; }
}

/* ---- scroll reveal ---- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity 1s cubic-bezier(.22,1,.36,1), transform 1s cubic-bezier(.22,1,.36,1); }
.reveal.in{ opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.09s; }
.reveal[data-d="2"]{ transition-delay:.18s; }
.reveal[data-d="3"]{ transition-delay:.27s; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1 !important; transform:none !important; }
}

/* ---- helpers ---- */
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(40px,6vw,96px); align-items:center; }
.grid-2--text-img{ grid-template-columns:1fr 1.05fr; }
.stack-sm{ display:flex; flex-direction:column; gap:22px; }
.stack-md{ display:flex; flex-direction:column; gap:34px; }
.align-c{ text-align:center; }
.mt-cta{ margin-top:40px; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:920px){
  body{ font-size:17px; }
  .grid-2, .grid-2--text-img{ grid-template-columns:1fr; gap:44px; }
  .stats{ grid-template-columns:1fr; gap:0; }
  .stat{ padding-block:30px; }
  .qcards{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr 1fr; gap:40px; }
  .foot-brand{ grid-column:1 / -1; }
  .nav-links{ display:none; }
  .nav-burger{
    display:grid; place-items:center; width:46px; height:46px; margin-left:auto;
    border:1px solid var(--line); border-radius:2px; color:var(--ink); background:transparent; cursor:pointer;
  }
  .nav-cta.desk{ display:none; }
}
@media (max-width:560px){
  .foot-grid{ grid-template-columns:1fr; }
  .btn{ width:100%; }
  .hero-cta .btn{ width:auto; }
}