/* ============================================================
   collective.css — shared stylesheet for Pegasus Collective
   Single source of truth for the frame, palette, and masthead.
   Per-page prose measures (max-width:NNch) stay inline by design.
   ============================================================ */

:root{
  /* frame */
  --container:1120px;
  --gutter:clamp(20px,4vw,56px);

  /* surfaces */
  --bg:#171920;          /* page background */
  --bg-header:rgba(6,8,14,0.86);
  --panel:#1F222C;       /* dropdown / card panel */
  --hairline:rgba(255,255,255,0.07);
  --hairline-2:rgba(255,255,255,0.12);
  --hairline-3:rgba(255,255,255,0.16);

  /* text */
  --text:#EDE8DF;        /* index/standard headings + body */
  --body:#D6CEBE;        /* muted body copy */
  --body-note:#D9D3C8;   /* reveal-page body copy */
  --head-note:#F4EFE6;   /* reveal-page headings */
  --dim:#8A8398;         /* eyebrows, meta, muted nav */
  --dim-2:#B8B0C0;

  /* three-axis accents */
  --amber:#C8922A;   --amber-2:#E8B84B;
  --teal:#1A9E8A;    --teal-2:#3FC7AB;
  --blue:#2E8AB0;    --blue-2:#4BA8CE;

  /* type */
  --serif:'Cormorant Garamond',Georgia,serif;
  --syne:'Syne',sans-serif;
  --sans:'IBM Plex Sans','Helvetica Neue',Arial,sans-serif;
  --mono:'IBM Plex Mono',monospace;
}

/* ---- reset / base (shared by both templates) ---- */
*,*::before,*::after{ box-sizing:border-box; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--sans); font-weight:300;
  -webkit-font-smoothing:antialiased;
}
a{ color:var(--teal-2); }
img,svg{ max-width:100%; }
.mono{ font-family:var(--mono); }

/* ---- shared layout frame ----
   .pc-wrap replaces the repeated
   max-width:1120px;margin:0 auto;padding:0 clamp(20px,4vw,56px) string. */
.pc-wrap{ max-width:var(--container); margin:0 auto; padding:0 var(--gutter); }
.pc-wrap--flush{ padding:0; }               /* when a parent already pads */

/* ---- masthead ---- */
.pc-header{
  position:sticky; top:0; z-index:70;
  background:var(--bg-header); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--hairline);
}
.pc-mast{
  max-width:var(--container); margin:0 auto; padding:0 var(--gutter);
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; min-height:62px; flex-wrap:wrap;
}
.pc-logo{
  font-family:var(--syne); font-size:16px; font-weight:800;
  letter-spacing:0.02em; color:var(--text); text-decoration:none; white-space:nowrap;
}
.pc-logo span{ color:var(--teal); }
.pc-nav{
  display:flex; align-items:center; gap:clamp(12px,2vw,24px);
  flex-wrap:wrap; justify-content:flex-end;
}
.pc-nav a{
  font-family:var(--mono); font-size:10px; letter-spacing:0.13em;
  text-transform:uppercase; color:var(--dim); text-decoration:none;
}
.pc-nav a:hover{ color:var(--text)!important; }
.pc-nav a.is-current{
  color:var(--text); border-bottom:1px solid var(--amber); padding-bottom:3px;
}
.pc-cta{
  font-family:var(--mono); font-size:10px; letter-spacing:0.13em;
  text-transform:uppercase; color:var(--bg); background:var(--teal);
  padding:9px 14px; border-radius:5px; font-weight:500;
  white-space:nowrap; text-decoration:none;
}

/* ---- HOT dropdown ---- */
.hotdd{ position:relative; display:inline-flex; }
.hotdd .hotdd-panel{
  position:absolute; top:100%; left:0; background:var(--panel);
  border:1px solid var(--hairline-3); border-radius:8px;
  padding:8px 8px; padding-top:18px; display:none; flex-direction:column;
  gap:2px; min-width:190px; z-index:50; margin-top:0;
  box-shadow:0 14px 28px rgba(0,0,0,.4);
}
.hotdd:hover .hotdd-panel{ display:flex; }
.hotdd .hotdd-panel a{
  font-family:var(--mono); font-size:11px; letter-spacing:0.06em;
  color:var(--body); text-decoration:none; padding:4px 6px;
}
.hotdd .hotdd-panel a:hover{ color:var(--text)!important; }
.hotdd .hotdd-sep{ height:1px; background:var(--hairline-2); margin:4px 0; }

/* ---- footer ---- */
.pc-footer{
  margin-top:clamp(48px,8vh,80px);
  border-top:1px solid var(--hairline); padding:32px 0 60px;
}

/* ---- reveal-page template (the 19 non-index pages) ---- */
html{ scroll-behavior:smooth; }
[data-reveal]{
  opacity:0; transform:translateY(14px);
  transition:opacity .7s cubic-bezier(.2,.6,.2,1),transform .7s cubic-bezier(.2,.6,.2,1);
}
[data-reveal].in{ opacity:1; transform:none; }
.note-body{ color:var(--body-note); }
.note-body p{ margin:0 0 22px; }
.note-body strong{ color:var(--head-note); font-weight:400; }
.drop::first-letter{
  font-family:var(--serif); font-size:3.4em; line-height:0.82;
  float:left; padding:6px 10px 0 0; color:var(--teal-2); font-weight:500;
}
.fig{
  margin:32px 0; background:#1B1E27; border:1px solid rgba(255,255,255,.08);
  border-radius:8px; padding:22px 24px 16px;
}
.fig svg{ width:100%; height:auto; display:block; }
.fig-cap{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.06em;
  color:var(--dim); text-align:center; margin-top:14px; padding-top:12px;
  border-top:1px solid rgba(255,255,255,.07); line-height:1.6;
}
mark.hl{ background:rgba(75,168,206,.22); color:var(--head-note);
  padding:0.03em .12em; border-radius:2px; }

/* ---- index-page (.r2) template ---- */
.r2{ max-width:var(--container); margin:0 auto; }
@keyframes cLight{ from{opacity:0} to{opacity:1} }
summary{ list-style:none; cursor:pointer; }
summary::-webkit-details-marker{ display:none; }
details[open] .dv-more{ display:none; }
details[open] .dv-less{ display:inline; }
.dv-less{ display:none; }

@media(max-width:760px){
  .r2 nav{ flex-wrap:wrap; gap:14px!important; padding:16px 20px!important; }
  .r2 nav>div{ margin-left:0!important; gap:14px!important; flex-wrap:wrap; font-size:13px!important; }
  .r2 section{ padding-left:20px!important; padding-right:20px!important; }
  .r2 footer{ padding-left:20px!important; padding-right:20px!important; gap:28px!important; }
  .r2 [style*="grid-template-columns"]:not([style*="auto 1fr"]):not([style*="64px 1fr"]):not([style*="112px 1fr"]){ grid-template-columns:1fr!important; }
  .r2 h1{ font-size:38px!important; line-height:1.06!important; }
  .r2 h2{ font-size:28px!important; }
  .r2 .r2-serif{ font-size:26px!important; }
  .r2 .r2-stat{ font-size:20px!important; }
  .r2 .r2-lock{ font-size:36px!important; }
  .r2 .r2-spine{ display:none!important; }
  .r2 .r2-cell-l{ padding:20px 0 6px!important; }
  .r2 .r2-cell-l div{ text-align:left!important; align-items:flex-start!important; }
  .r2 .r2-cell-r{ padding:6px 0 22px 16px!important; }
  .r2 .r2-col{ padding:18px 0!important; border-right:none!important; border-bottom:1px solid rgba(255,255,255,.12)!important; }
}