/* ============================================================
   CODEX — an illuminated manuscript for the Salvia library
   Display + body: a single elegant serif family (Cormorant /
   EB Garamond). No sans. Utility text is letterspaced small-caps,
   the way a scribe would set a rubric. Gilt amber is the only
   "ink of distinction"; sage and violet mark the two worlds.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Cormorant+SC:wght@500;600;700&display=swap');

:root{
  /* layered ink */
  --ink-0:#060606; --ink-1:#0a0a0a; --ink-2:#101010; --ink-3:#161616; --ink-4:#1c1c1c;
  /* rule-work */
  --rule:#262626; --rule-d:#1c1c1c; --rule-l:#333333;
  /* parchment text */
  --bone:#d8d4cb; --muted:#9b988f; --dim:#6e6b65; --faint:#3a3833;
  /* the three illuminating inks */
  --gilt:#2f8a55; --gilt-hi:#6fa580; --gilt-dk:#235e3c;
  --sage:#6fa580; --forest:#2f8a55;
  --violet:#968cc2; --violet-dk:#6849b3;
  /* serifs */
  --display:'Cormorant', Georgia, serif;
  --body:'EB Garamond', Georgia, serif;
  --rubric:'Cormorant SC', 'Cormorant', serif;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scrollbar-gutter:stable; }

body{
  margin:0;
  background:
    repeating-linear-gradient(0deg, transparent 0 38px, rgba(255,255,255,.012) 38px 39px),
    var(--ink-0);
  color:var(--bone);
  font-family:var(--body);
  font-size:18px;
  line-height:1.66;
  font-feature-settings:"liga" 1,"onum" 1,"kern" 1;
  letter-spacing:.005em;
}

::selection{ background:rgba(47,138,85,.26); color:#fff; }

a{ color:var(--gilt); text-decoration:none; }

/* the scribe's rubric — reused utility label treatment */
.rubric, .tab, .pill, .badge, .side h3, .meta .cit, .thumb .tag,
.world .vm, .vcard .vm, .pcard .pm, .pl-eps-h{
  font-family:var(--rubric);
  text-transform:uppercase;
  letter-spacing:.22em;
  font-weight:600;
}

/* a reusable fleuron divider (the ❧ aldus leaf, drawn in CSS) */

/* ============================================================
   TOPBAR — the running head of the codex
   ============================================================ */
.topbar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:26px;
  padding:0 clamp(20px,5vw,72px);
  height:74px;
  background:linear-gradient(180deg, rgba(8,8,8,.96), rgba(8,8,8,.86));
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--rule);
  box-shadow:0 1px 0 rgba(47,138,85,.14);
}
.brand{
  font-family:var(--display);
  font-weight:600;
  font-size:25px;
  letter-spacing:.04em;
  color:var(--bone);
  display:flex; align-items:baseline; gap:.5ch;
  white-space:nowrap;
}
.brand i{
  font-style:normal;
  font-family:var(--display);
  font-weight:700;
  font-size:1.5em;
  line-height:0;
  color:var(--ink-0);
  background:linear-gradient(155deg, var(--gilt-hi), var(--gilt) 55%, var(--gilt-dk));
  padding:.18em .26em .26em;
  margin-right:.15ch;
  border:1px solid var(--gilt-dk);
  text-shadow:0 1px 0 rgba(255,255,255,.25);
  position:relative; top:.06em;
}
.tabs{ display:flex; align-items:stretch; gap:0; height:100%; }
.tab{
  position:relative;
  display:flex; align-items:center; gap:.7ch;
  padding:0 20px;
  font-size:13px;
  color:var(--dim);
  background:transparent;
  border:0;
  border-left:1px solid var(--rule-d);
  cursor:pointer;
  transition:color .25s ease;
}
.tabs .tab:last-child{ border-right:1px solid var(--rule-d); }
.tab:hover{ color:var(--muted); }
.tab.on{ color:var(--gilt-hi); }
.tab.on::after{
  content:""; position:absolute; left:14px; right:14px; bottom:-1px; height:2px;
  background:linear-gradient(90deg, transparent, var(--gilt), transparent);
}
.tab .c{
  font-size:11px; letter-spacing:.1em;
  color:var(--ink-0);
  background:var(--gilt);
  padding:1px 6px; min-width:20px; text-align:center;
  line-height:1.5;
}
.tab:not(.on) .c{ background:var(--faint); color:var(--muted); }
.spacer{ flex:1; }
.search{ position:relative; display:flex; align-items:center; }
.search::before{
  content:"\201C"; /* an opening quotation mark as a search glyph */
  position:absolute; left:12px; top:.55em;
  font-family:var(--display); font-size:22px; color:var(--gilt-dk); line-height:0;
}
.search input{
  font-family:var(--body); font-size:15px; font-style:italic;
  color:var(--bone);
  background:var(--ink-2);
  border:1px solid var(--rule);
  border-radius:0;
  padding:9px 16px 9px 30px;
  width:clamp(150px,22vw,260px);
  transition:border-color .2s ease, background .2s ease;
}
.search input::placeholder{ color:var(--dim); font-style:italic; }
.search input:focus{
  outline:none; border-color:var(--gilt-dk);
  background:var(--ink-3);
  box-shadow:inset 0 0 0 1px rgba(47,138,85,.18);
}

/* ============================================================
   HOME — frontispiece + the two facing pages of the codex
   ============================================================ */
.hero{
  max-width:1080px;
  margin:clamp(26px,5vh,56px) auto clamp(30px,5vh,56px);
  padding:0 clamp(24px,6vw,40px);
  text-align:center;
  position:relative;
}
.hero h1{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(46px,8.5vw,96px);
  line-height:.98;
  letter-spacing:.005em;
  margin:0 0 .32em;
  color:var(--bone);
}
.hero h1 em, .hero h1 i{
  font-style:italic; color:var(--gilt-hi); font-weight:500;
}
.hero p{
  font-family:var(--body);
  font-size:clamp(17px,2.1vw,21px);
  font-style:italic;
  color:var(--muted);
  max-width:60ch;
  margin:0 auto;
  line-height:1.7;
}
.hero p::after{
  content:""; display:block; width:120px; height:1px;
  margin:30px auto 0;
  background:linear-gradient(90deg, transparent, var(--gilt-dk), transparent);
}

/* the open codex: recto + verso */
.worlds{
  max-width:1180px;
  margin:0 auto clamp(60px,10vh,120px);
  padding:0 clamp(20px,5vw,40px);
  display:grid;
  grid-template-columns:1fr 1px 1fr;
  gap:0;
  align-items:stretch;
}
/* center gutter rule with a fleuron */
.worlds::before{
  content:""; grid-column:2; grid-row:1;
  width:1px; justify-self:center;
  background:linear-gradient(180deg, transparent, var(--rule-l) 12%, var(--rule-l) 88%, transparent);
}
.world{
  position:relative;
  padding:clamp(34px,4vw,56px) clamp(28px,3.6vw,52px) clamp(40px,4.5vw,60px);
  background:
    linear-gradient(180deg, rgba(255,255,255,.012), transparent 30%),
    var(--ink-1);
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  cursor:pointer;
  overflow:hidden;
  transition:background .3s ease, transform .3s ease;
}
.world:first-child{ border-left:1px solid var(--rule); }
.world:last-child{ border-right:1px solid var(--rule); }
.world::after{ /* gilt corner flourish */
  content:""; position:absolute; top:0; right:0; width:54px; height:54px;
  background:
    linear-gradient(225deg, rgba(47,138,85,.16), transparent 60%);
  opacity:0; transition:opacity .35s ease;
}
.world:hover{ background:var(--ink-2); }
.world:hover::after{ opacity:1; }

/* the illuminated chapter number / versal */
.world .k{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--display); font-weight:700; font-style:normal;
  font-size:13px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--gilt);
  padding-bottom:14px;
  border-bottom:1px solid var(--rule);
  margin-bottom:22px;
}
.world h2{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(30px,3.6vw,46px);
  line-height:1.04;
  margin:0 0 .35em;
  color:var(--bone);
}
.world p{
  font-family:var(--body); font-style:italic;
  color:var(--muted);
  font-size:17px;
  margin:0 0 26px;
  max-width:42ch;
}
.world .big{
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(64px,9vw,108px);
  line-height:.9;
  letter-spacing:-.01em;
  display:block;
  margin:4px 0 2px;
}
.world .vm{
  display:inline-flex; align-items:center; gap:.7ch;
  font-size:12px; color:var(--dim);
  border:0; border-top:1px solid var(--rule); padding-top:18px; margin-top:8px;
  transition:color .25s ease, letter-spacing .25s ease;
}
.world .vm::after{ content:"\203A"; font-family:var(--display); font-size:20px; line-height:0; }
.world:hover .vm{ color:var(--gilt-hi); letter-spacing:.26em; }

/* world identities — Research reads scholarly violet; Community living sage */
.world[data-v="research"] .k,
.world[data-v="research"] .big{ color:var(--violet); }
.world[data-v="research"] .big{ text-shadow:0 0 40px rgba(104,73,179,.22); }
.world[data-v="research"]:hover{ box-shadow:inset 0 0 0 1px rgba(150,140,194,.16); }

.world[data-v="community"] .k,
.world[data-v="community"] .big{ color:var(--sage); }
.world[data-v="community"] .big{ text-shadow:0 0 40px rgba(111,165,128,.2); }
.world[data-v="community"]:hover{ box-shadow:inset 0 0 0 1px rgba(111,165,128,.16); }

/* ============================================================
   APP FRAME — marginal index (side) + ceremonial main column
   ============================================================ */
.layout{
  display:grid;
  grid-template-columns:266px 1fr;
  gap:0;
  max-width:1320px;
  margin:0 auto;
  align-items:start;
}
.side{
  position:sticky; top:74px;
  align-self:start;
  padding:clamp(26px,3vw,40px) 26px clamp(40px,6vh,80px);
  background:
    linear-gradient(90deg, transparent, rgba(255,255,255,.01) 90%),
    var(--ink-1);
  border-right:1px solid var(--rule);
  min-height:calc(100vh - 74px);
}
.side h3{
  font-size:11px; color:var(--dim);
  margin:0 0 18px;
  padding-bottom:12px;
  border-bottom:1px solid var(--rule);
}
.side h3:not(:first-child){ margin-top:34px; }
.side button{
  display:block; width:100%; text-align:left;
  font-family:var(--body); font-size:16.5px;
  color:var(--muted);
  background:transparent;
  border:0;
  border-radius:0;
  padding:7px 12px 7px 18px;
  margin:1px 0;
  cursor:pointer;
  position:relative;
  transition:color .2s ease, background .2s ease;
}
.side button::before{ /* manuscript marginal tick */
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:0; height:1px; background:var(--gilt); transition:width .25s ease;
}
.side button:hover{ color:var(--bone); }
.side button:hover::before{ width:9px; }
.side button.on{
  color:var(--gilt-hi);
  background:linear-gradient(90deg, rgba(47,138,85,.08), transparent);
}
.side button.on::before{
  width:0; height:auto; top:6px; bottom:6px; left:0;
  background:var(--gilt); width:2px;
}
.side button.back{
  font-style:italic; color:var(--dim);
  margin-bottom:14px; padding-left:18px;
}
.side button.back::before{
  content:"\2190"; width:auto; height:auto; background:none;
  color:var(--gilt-dk); left:0; transition:transform .2s ease;
}
.side button.back:hover::before{ transform:translate(-3px,-50%); width:auto; }
.side .n{
  float:right;
  font-family:var(--rubric); font-size:11px; letter-spacing:.12em;
  color:var(--dim);
}
.side button.on .n{ color:var(--gilt); }

.main{
  padding:clamp(30px,4vw,56px) clamp(26px,5vw,72px) 120px;
  min-width:0;
}
.crumb{
  font-family:var(--rubric);
  text-transform:uppercase; letter-spacing:.2em;
  font-size:11px; color:var(--dim);
  margin-bottom:18px;
  display:flex; align-items:center; gap:.8ch; flex-wrap:wrap;
}
.crumb b{ color:var(--gilt); font-weight:600; }
.crumb::after{
  content:""; flex:1; height:1px; min-width:30px;
  background:linear-gradient(90deg, var(--rule-l), transparent);
}
/* the LEAD paragraph gets the illuminated drop-initial — the signature */
.lead{
  font-family:var(--body);
  font-size:21px; line-height:1.62;
  color:var(--muted);
  max-width:64ch;
  margin:0 0 40px;
}
.lead::first-letter{
  float:left;
  font-family:var(--display);
  font-weight:700;
  font-size:4.4em;
  line-height:.78;
  padding:.04em .14em 0 0;
  margin:.04em .04em 0 0;
  color:var(--gilt-hi);
  text-shadow:0 2px 0 var(--gilt-dk), 0 0 30px rgba(47,138,85,.25);
}

/* ============================================================
   CONTROLS — pills (filters) + tiles (sub-collections)
   ============================================================ */
.pills{ display:flex; flex-wrap:wrap; gap:0; margin:0 0 30px; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); }
.pill{
  font-size:11px;
  color:var(--dim);
  background:transparent;
  border:0; border-right:1px solid var(--rule-d);
  border-radius:0;
  padding:11px 18px;
  cursor:pointer;
  display:inline-flex; align-items:center; gap:.6ch;
  transition:color .2s ease, background .2s ease;
}
.pill:hover{ color:var(--muted); background:var(--ink-2); }
.pill.on{ color:var(--ink-0); background:linear-gradient(155deg,var(--gilt-hi),var(--gilt) 60%,var(--gilt-dk)); }
.pill i{ font-style:normal; opacity:.75; font-size:13px; }
.pill.on i{ opacity:1; }

.tiles{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(190px,1fr));
  gap:1px;
  background:var(--rule-d);
  border:1px solid var(--rule-d);
  margin:0 0 44px;
}
.tile{
  background:var(--ink-1);
  border:0; border-radius:0;
  padding:24px 22px;
  text-align:left; cursor:pointer;
  position:relative;
  transition:background .25s ease;
}
.tile::before{
  content:"\274B"; /* heavy ornamental asterisk, the tile's seal */
  position:absolute; top:18px; right:18px;
  font-size:13px; color:var(--gilt-dk);
  transition:color .25s ease, transform .4s ease;
}
.tile:hover{ background:var(--ink-3); }
.tile:hover::before{ color:var(--gilt); transform:rotate(90deg); }
.tile .tn{
  display:block;
  font-family:var(--display); font-weight:600;
  font-size:24px; line-height:1.1;
  color:var(--bone);
  margin-bottom:4px;
}
.tile .tl{
  font-family:var(--rubric);
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--dim);
}

/* ============================================================
   RESULT CARDS — manuscript leaves with a hanging margin-rule
   ============================================================ */
.cards{ display:flex; flex-direction:column; gap:0; }
.card{
  position:relative;
  background:var(--ink-1);
  border:0;
  border-top:1px solid var(--rule);
  border-radius:0;
  padding:18px 26px 20px 50px;
  transition:background .25s ease;
}
.cards .card:last-child{ border-bottom:1px solid var(--rule); }
.card::before{ /* the gilt gutter-rule of the leaf */
  content:""; position:absolute; left:26px; top:18px; bottom:18px;
  width:2px;
  background:linear-gradient(180deg, transparent, var(--gilt-dk), transparent);
}
.card:hover{ background:var(--ink-2); }
.card:hover::before{ background:linear-gradient(180deg, transparent, var(--gilt), transparent); }
.card .ti{
  font-family:var(--display);
  font-weight:600;
  font-size:20px; line-height:1.25;
  color:var(--bone);
  margin:0 0 8px;
}
.card .ti a{ color:inherit; transition:color .2s ease; }
.card .ti a:hover{ color:var(--gilt-hi); }
.meta{
  font-family:var(--body);
  font-style:italic;
  color:var(--dim);
  font-size:15px;
  margin:0 0 12px;
  display:flex; flex-wrap:wrap; gap:.4ch 1.2ch; align-items:baseline;
}
.meta .cit{
  font-style:normal;
  font-size:11px; color:var(--violet);
  letter-spacing:.14em;
}
.sm{ color:var(--muted); font-size:15px; line-height:1.55; max-width:72ch; margin:0 0 14px; }

.badge{
  display:inline-block;
  font-size:10px;
  color:var(--sage);
  border:1px solid var(--rule-l);
  border-radius:0;
  padding:3px 9px;
  margin:0 6px 6px 0;
  background:var(--ink-2);
}
.badge.k{
  color:var(--ink-0);
  background:var(--sage);
  border-color:var(--sage);
}
.links{ display:flex; flex-wrap:wrap; gap:0 22px; margin-top:6px; }
.links a{
  font-family:var(--rubric);
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gilt);
  position:relative; padding:4px 0;
  border-bottom:1px solid transparent;
  transition:border-color .2s ease, color .2s ease;
}
.links a:hover{ color:var(--gilt-hi); border-bottom-color:var(--gilt-dk); }

/* ============================================================
   VIDEO — illuminated plates with thumbnails
   ============================================================ */
.subhead{
  font-family:var(--display);
  font-weight:500; font-style:italic;
  font-size:27px; color:var(--bone);
  margin:42px 0 20px;
  padding-bottom:12px;
  border-bottom:1px solid var(--rule);
  display:flex; align-items:baseline; gap:.7ch;
}
.subhead::before{
  content:"\2766"; /* floral heart bullet */
  font-style:normal; color:var(--gilt); font-size:.8em;
}
.vgrid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(270px,1fr));
  gap:1px;
  background:var(--rule-d);
  border:1px solid var(--rule-d);
}
.vcard{
  background:var(--ink-1);
  border:0; border-radius:0;
  padding:0 0 18px;
  cursor:pointer;
  position:relative;
  transition:background .25s ease;
}
.vcard:hover{ background:var(--ink-3); }
.vcard.on{ background:var(--ink-3); box-shadow:inset 0 0 0 1px var(--gilt-dk); }
.vcard.pl{ box-shadow:inset 0 0 0 1px var(--rule); }
.vcard .vt{
  font-family:var(--display); font-weight:600;
  font-size:19px; line-height:1.24;
  color:var(--bone);
  margin:14px 16px 6px;
}
.vcard .vm{
  font-size:10px; color:var(--dim);
  margin:0 16px;
  letter-spacing:.16em;
}

.thumb{
  position:relative;
  aspect-ratio:16/9;
  background:var(--ink-3);
  overflow:hidden;
  border-bottom:1px solid var(--rule);
}
.thumb img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(.35) sepia(.18) brightness(.82) contrast(1.05);
  transition:filter .35s ease, transform .5s ease;
}
.vcard:hover .thumb img{ filter:grayscale(0) sepia(0) brightness(.95); transform:scale(1.03); }
.thumb .tag{
  position:absolute; top:10px; left:10px;
  font-size:10px;
  color:var(--ink-0);
  background:var(--gilt);
  padding:3px 8px;
  letter-spacing:.12em;
}
.thumb .play{
  position:absolute; inset:0; margin:auto;
  width:54px; height:54px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(6,6,6,.55);
  border:1px solid var(--gilt);
  color:var(--gilt-hi);
  transition:background .25s ease, transform .25s ease;
}
.thumb .play::before{
  content:""; width:0; height:0;
  border-left:15px solid currentColor;
  border-top:10px solid transparent; border-bottom:10px solid transparent;
  margin-left:4px;
}
.vcard:hover .thumb .play{ background:rgba(47,138,85,.92); color:var(--ink-0); transform:scale(1.06); }

/* playlist episodes — a foliated list */
.pl-eps{
  margin:6px 16px 0;
  border-top:1px solid var(--rule);
}
.pl-eps-h{
  font-size:10px; color:var(--dim);
  padding:12px 0 8px;
}
.pl-ep{
  display:flex; align-items:baseline; gap:.9ch;
  font-family:var(--body);
  font-size:14.5px; color:var(--muted);
  padding:6px 0;
  border-top:1px solid var(--rule-d);
  cursor:pointer;
  transition:color .2s ease;
}
.pl-ep:hover{ color:var(--bone); }
.pl-ep .epn{
  font-family:var(--rubric);
  font-size:11px; letter-spacing:.1em;
  color:var(--gilt-dk);
  min-width:2.2ch;
}
.pl-ep:hover .epn{ color:var(--gilt); }

/* ============================================================
   PEOPLE — portrait medallions (vendors, voices, authors)
   ============================================================ */
.pgrid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px,1fr));
  gap:1px;
  background:var(--rule-d);
  border:1px solid var(--rule-d);
}
.pcard{
  background:var(--ink-1);
  border:0; border-radius:0;
  padding:26px 22px;
  text-align:center;
  cursor:pointer;
  transition:background .25s ease;
}
.pcard:hover{ background:var(--ink-3); }
.pcard .pn{
  font-family:var(--display); font-weight:600;
  font-size:22px; color:var(--bone);
  margin:0 0 2px;
}
.pcard .pm{
  font-size:10px; color:var(--sage);
  letter-spacing:.18em;
}
.who{
  font-family:var(--body); font-style:italic;
  font-size:15px; line-height:1.55;
  color:var(--dim);
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid var(--rule);
}

/* ============================================================
   MISC — colophon note + empty state
   ============================================================ */
.note{
  font-family:var(--body);
  font-style:italic;
  font-size:16px; line-height:1.6;
  color:var(--muted);
  background:var(--ink-1);
  border:0;
  border-left:2px solid var(--gilt-dk);
  padding:18px 24px;
  margin:30px 0;
  max-width:70ch;
  position:relative;
}
.note b{
  font-family:var(--rubric);
  display:block;
  font-style:normal;
  text-transform:uppercase; letter-spacing:.2em;
  font-size:11px; font-weight:600;
  color:var(--gilt);
  margin-bottom:6px;
}
.empty{
  text-align:center;
  padding:80px 24px;
  color:var(--dim);
  font-family:var(--body); font-style:italic; font-size:19px;
}
.empty::before{
  content:"\2042"; /* asterism — the empty page */
  display:block;
  font-style:normal;
  font-size:34px; color:var(--gilt-dk);
  margin-bottom:16px;
}

/* ============================================================
   RESPONSIVE — fold the codex into a single column
   ============================================================ */
@media (max-width:820px){
  body{ font-size:17px; }
  .layout{ grid-template-columns:1fr; }
  .side{
    position:static; min-height:0;
    border-right:0; border-bottom:1px solid var(--rule);
    display:flex; flex-wrap:wrap; gap:6px 4px; align-items:center;
    padding:18px clamp(20px,5vw,40px);
  }
  .side h3{
    width:100%; margin:0 0 6px; padding-bottom:8px;
  }
  .side h3:not(:first-child){ margin-top:14px; }
  .side button{
    width:auto; padding:6px 14px;
    border:1px solid var(--rule);
  }
  .side button::before{ display:none; }
  .side button.on{ background:linear-gradient(155deg,var(--gilt-hi),var(--gilt-dk)); color:var(--ink-0); }
  .side .n{ float:none; margin-left:.6ch; }

  /* the open book closes to stacked pages */
  .worlds{ grid-template-columns:1fr; }
  .worlds::before{ display:none; }
  .world{ border:1px solid var(--rule); }
  .world:first-child{ border-bottom:0; }
}

@media (max-width:560px){
  .topbar{ flex-wrap:wrap; height:auto; padding:12px clamp(16px,5vw,24px); gap:12px 16px; }
  .tabs{ order:3; width:100%; overflow-x:auto; }
  .tabs .tab:first-child{ border-left:0; }
  .spacer{ display:none; }
  .search{ order:2; margin-left:auto; }
  .search input{ width:46vw; }
  .main{ padding:24px clamp(16px,5vw,24px) 90px; }
  .lead::first-letter{ font-size:3.6em; }
  .card{ padding:22px 18px 24px 40px; }
  .card::before{ left:18px; }
}

/* ============================================================
   QUALITY FLOOR — focus + reduced motion
   ============================================================ */
:focus-visible{
  outline:2px solid var(--gilt-hi);
  outline-offset:2px;
}
.tab:focus-visible, .pill:focus-visible, .side button:focus-visible{
  outline-offset:-2px;
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
     transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* ============================================================
   HOME — offering cards: separate, spaced, not vertically fat
   ============================================================ */
.offers{ display:grid; grid-template-columns:1fr 1fr; gap:16px; max-width:1180px; margin:6px auto 0; padding:0 clamp(20px,5vw,40px) clamp(30px,6vh,64px); }
.ocard{ position:relative; background:var(--ink-1); border:1px solid var(--rule); padding:24px 26px 22px; transition:background .25s ease, border-color .25s ease; }
.ocard[data-v]{ cursor:pointer; }
.ocard[data-v]:hover{ background:var(--ink-2); border-color:var(--rule-l); }
.ocard.soon{ opacity:.9; }
.ocard .k{ font-family:var(--rubric); text-transform:uppercase; letter-spacing:.2em; font-size:11px; color:var(--dim); display:block; margin-bottom:12px; }
.ocard h2{ font-family:var(--display); font-weight:500; font-size:clamp(25px,3vw,34px); line-height:1.05; color:var(--bone); margin:0 0 .3em; }
.ocard p{ font-family:var(--body); font-style:italic; color:var(--muted); font-size:16px; line-height:1.5; margin:0 0 15px; max-width:48ch; }
.ocard .vm{ font-family:var(--rubric); text-transform:uppercase; letter-spacing:.14em; font-size:11px; color:var(--dim); border-top:1px solid var(--rule); padding-top:13px; display:block; }
.ocard[data-v="research"] h2{ color:var(--violet); }
.ocard[data-v="community"] h2{ color:var(--sage); }
@media (max-width:680px){ .offers{ grid-template-columns:1fr; } }