/* ============================================================
   The Stage — Brand v2 · Shared design system
   Mirrors BRAND.html. Every page in /Website links this file.
   Per-page CSS only adds page-specific layout.
   ============================================================ */

:root{
  /* Ink */
  --ink:#2E2C26;
  --ink2:#5F5E5A;
  --ink3:#888780;
  --ink4:#B4B2A9;

  /* Paper */
  --bg:#FBF7EC;
  --bg2:#F1EFE8;
  --bg3:#FFFFFF;
  --bg-soft:#FCFAF4;

  /* Gold — earned use only */
  --gold:#C9A84C;
  --gold-deep:#9B7E26;
  --gold-text:#6E5B12;
  --gold-b:#D9C485;
  --gold-bb:#ECDEB2;
  --gold-l:#F4E8BD;
  --gold-ll:#FBF1D2;
  --gold-cream:#FBF6E8;
  --gold-wash:rgba(201,168,76,0.07);

  /* Semantic */
  --success-bg:#EAF3DE;--success-text:#3B6D11;--success-bd:#C0DD97;
  --info-bg:#E6F1FB;--info-text:#185FA5;--info-bd:#85B7EB;
  --warning-bg:#FAEEDA;--warning-text:#854F0B;--warning-bd:#EF9F27;
  --danger-bg:#FCEBEB;--danger-text:#A32D2D;--danger-bd:#F09595;

  /* Borders */
  --bd:rgba(0,0,0,0.10);
  --bd-soft:rgba(0,0,0,0.06);
  --bd2:rgba(0,0,0,0.16);

  /* Type */
  --fd:'Playfair Display',Georgia,serif;
  --fb:'DM Sans',system-ui,-apple-system,sans-serif;
  --fm:'IBM Plex Mono','DM Mono',ui-monospace,Menlo,monospace;
  --fs:'Cormorant Garamond',Georgia,serif;
  --fh:'Caveat','Brush Script MT',cursive;

  /* Radii */
  --rs:6px;     /* slight */
  --rm:8px;     /* standard */
  --rl:12px;    /* large */
  --rxl:14px;   /* pv-modal */

  /* Motion */
  --ease-out:cubic-bezier(0.16,1,0.3,1);
  --ease-in-out:cubic-bezier(0.65,0,0.35,1);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html{scroll-behavior:smooth;}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--fb);font-size:15px;line-height:1.65;font-weight:400;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
/* Default copy is upright + dark. Italic is reserved for emphasis on em tags only. */
p{color:var(--ink2);}
img{max-width:100%;display:block;}
a{color:inherit;}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit;font-size:inherit;padding:0;}
::selection{background:var(--gold-l);color:var(--gold-text);}
:focus-visible{outline:1.5px solid var(--gold);outline-offset:3px;border-radius:var(--rs);}

/* ============================================================
   Type primitives — two weights only (400/500), sentence case
   ============================================================ */
h1,h2,h3,h4,h5{
  font-family:var(--fd);font-weight:500;letter-spacing:-0.012em;line-height:1.1;
  margin:0;color:var(--ink);
}
p{margin:0;}
em{font-style:italic;color:var(--gold-deep);font-weight:500;}
strong{font-weight:500;color:var(--ink);}
.t-modal{font-size:32px;letter-spacing:-0.5px;line-height:1.1;}
.t-page{font-size:28px;letter-spacing:-0.4px;line-height:1.15;}
.t-section{font-size:24px;letter-spacing:-0.3px;line-height:1.2;}
.t-card{font-size:18px;font-weight:500;line-height:1.25;}
.t-stat{font-family:var(--fd);font-size:24px;font-weight:500;line-height:1;}
.t-meta{font-family:var(--fd);font-size:14px;font-style:italic;color:var(--ink2);}
.t-hint{font-size:12px;color:var(--ink3);line-height:1.4;}
.t-body{font-size:14px;color:var(--ink2);line-height:1.65;}

/* Eyebrow — sentence pills always uppercase */
.eyebrow{
  font-family:var(--fb);font-size:10.5px;font-weight:500;letter-spacing:2px;
  text-transform:uppercase;color:var(--gold-deep);display:inline-block;
}

/* Tagline — upright editorial serif. Italic only on em emphasis. */
.tagline{
  font-family:var(--fd);font-size:18px;color:var(--ink);
  line-height:1.5;font-weight:400;font-style:normal;
}
.tagline em{font-style:italic;color:var(--gold-deep);font-weight:500;}

/* ============================================================
   Signature motifs
   ============================================================ */

/* Gold signature rule — under serif titles, 1.5px × 56px, never duplicated */
.gold-rule{height:1.5px;width:56px;background:var(--gold);border-radius:1px;display:block;}

/* Marquee bulb rail — sits on top of contained surfaces only */
.motif-marquee{
  position:absolute;top:6px;left:18px;right:18px;height:7px;
  background-image:radial-gradient(circle 1.4px at 50% 50%,var(--gold) 0%,var(--gold) 70%,rgba(201,168,76,0.35) 90%,transparent 100%);
  background-size:14px 7px;background-repeat:repeat-x;background-position:center;
  opacity:.85;pointer-events:none;
}

/* Dotted gold divider — between editorial sections */
.motif-dots{display:flex;align-items:center;gap:6px;justify-content:center;padding:14px 0;}
.motif-dots span{width:3px;height:3px;border-radius:50%;background:var(--gold-b);}

/* ============================================================
   Layout primitives
   ============================================================ */
.container{max-width:1100px;margin:0 auto;padding:0 28px;}
.container-narrow{max-width:720px;margin:0 auto;padding:0 28px;}
.container-wide{max-width:1280px;margin:0 auto;padding:0 28px;}

.section{padding:80px 0;}
.section-paper{background:var(--bg2);}
.section-white{background:var(--bg3);border-top:0.5px solid var(--bd-soft);border-bottom:0.5px solid var(--bd-soft);}

.section-head{margin-bottom:48px;max-width:680px;}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}
.section-head .eyebrow{margin-bottom:8px;}
.section-head h2{font-family:var(--fd);font-size:32px;font-weight:500;letter-spacing:-0.5px;line-height:1.1;}
.section-head h2 em{color:var(--gold-deep);}
.section-head .gold-rule{margin:14px 0 16px;}
.section-head.center .gold-rule{margin-left:auto;margin-right:auto;}
.section-head p{font-family:var(--fd);font-size:17px;color:var(--ink);line-height:1.55;margin-top:8px;max-width:560px;font-weight:400;}
.section-head p em{font-style:italic;color:var(--gold-deep);font-weight:500;}
.section-head.center p{margin-left:auto;margin-right:auto;}

/* ============================================================
   Nav — sticky cream bar, hairline border
   ============================================================ */
.topbar{
  position:sticky;top:0;z-index:80;
  background:rgba(251,247,236,0.88);
  backdrop-filter:saturate(140%) blur(14px);-webkit-backdrop-filter:saturate(140%) blur(14px);
  border-bottom:0.5px solid var(--bd);
}
.topbar-inner{
  max-width:1280px;margin:0 auto;padding:14px 28px;
  display:flex;align-items:center;gap:24px;
}
.logo{
  font-family:var(--fd);font-size:18px;font-weight:500;letter-spacing:-0.2px;
  color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;gap:8px;
}
.logo em{font-style:italic;color:var(--gold-deep);font-weight:500;}
.logo .dot{width:5px;height:5px;border-radius:50%;background:var(--gold);}

.nav-links{display:flex;gap:28px;margin-left:auto;align-items:center;}
.nav-links a{
  text-decoration:none;color:var(--ink2);font-size:13.5px;font-weight:400;letter-spacing:0.1px;
  transition:color .2s var(--ease-out);
}
.nav-links a:hover{color:var(--ink);}
.nav-links a.active{color:var(--ink);}
.nav-links a.italic{font-family:var(--fd);font-style:italic;color:var(--gold-deep);font-size:14.5px;}

.nav-cta{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--gold-l);color:var(--gold-text);border:1px solid var(--gold);
  padding:8px 16px;border-radius:var(--rm);font-size:13px;font-weight:500;letter-spacing:0.3px;
  text-decoration:none;box-shadow:0 1px 0 #B89530;
  transition:transform .15s var(--ease-out),background .2s var(--ease-out);
}
.nav-cta:hover{background:var(--gold-ll);transform:translateY(-1px);}
.nav-cta:active{transform:translateY(0);box-shadow:none;}

/* "Open app" subdomain link. Quieter than the gold .nav-cta — gives existing
   users (and Google verification reviewers) a clear path from marketing to
   app.thestage.actor without competing with the waitlist conversion. */
.nav-app-link{
  display:inline-flex;align-items:center;gap:4px;
  color:var(--gold-deep);font-size:13px;font-weight:500;letter-spacing:0.2px;
  padding:7px 12px;border-radius:var(--rm);
  border:0.5px solid rgba(180,150,60,0.40);
  text-decoration:none;
  transition:background .2s var(--ease-out),border-color .2s var(--ease-out);
}
.nav-app-link:hover{background:var(--gold-l);border-color:var(--gold);color:var(--ink);}

/* "BETA" pill — used in the eyebrow + app welcome to set expectation
   that this is a beta product. Brand-gold mono-style, small but distinct. */
.beta-pill{
  display:inline-flex;align-items:center;
  padding:1px 7px;margin-right:8px;
  background:var(--gold);color:#fff;
  font-family:var(--fb,ui-monospace,Menlo,monospace);
  font-size:9.5px;letter-spacing:1.4px;font-weight:700;
  border-radius:99px;
  vertical-align:1px;
}

/* Secondary hero CTA — "Already in beta? Open the app ↗" line below the
   waitlist form. Quiet so it doesn't compete with the primary conversion. */
.hero-app-link{
  margin:10px 0 0;
  font-size:13px;color:var(--ink3);
}
.hero-app-link a{
  color:var(--gold-deep);text-decoration:none;font-weight:500;
  border-bottom:0.5px solid rgba(180,150,60,0.40);
  padding-bottom:1px;
  transition:color .2s var(--ease-out),border-color .2s var(--ease-out);
}
.hero-app-link a:hover{color:var(--ink);border-bottom-color:var(--gold);}

.hamburger{display:none;width:34px;height:34px;align-items:center;justify-content:center;border-radius:var(--rm);margin-left:auto;}
.hamburger:hover{background:var(--bg2);}
.hamburger span{display:block;width:16px;height:1.5px;background:var(--ink);position:relative;}
.hamburger span::before,.hamburger span::after{content:"";position:absolute;left:0;width:16px;height:1.5px;background:var(--ink);}
.hamburger span::before{top:-5px;}.hamburger span::after{top:5px;}
@media(max-width:880px){.nav-links{display:none;}.hamburger{display:flex;}}

/* Mobile drawer */
.drawer-overlay{position:fixed;inset:0;background:rgba(46,44,38,.32);backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .3s var(--ease-out);z-index:90;}
.drawer-overlay.open{opacity:1;pointer-events:auto;}
.drawer{
  position:fixed;top:0;right:0;height:100vh;width:min(340px,92vw);
  background:linear-gradient(180deg,#FCFAF4 0%,#F5F2E9 100%);
  z-index:91;transform:translateX(100%);transition:transform .4s var(--ease-out);
  border-left:0.5px solid var(--bd2);box-shadow:-30px 0 60px -20px rgba(46,44,38,.18);
  display:flex;flex-direction:column;
}
.drawer.open{transform:translateX(0);}
.drawer-head{padding:18px 22px;border-bottom:0.5px solid var(--bd);display:flex;align-items:center;justify-content:space-between;}
.drawer-close{width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:var(--rm);background:var(--bg2);color:var(--ink2);}
.drawer-body{flex:1;overflow-y:auto;padding:18px 22px 28px;}
.drawer-link{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:0.5px solid var(--bd-soft);text-decoration:none;color:var(--ink);font-size:15.5px;}
.drawer-link .num{font-family:var(--fd);font-style:italic;color:var(--gold-deep);width:24px;font-size:13px;font-weight:500;}
.drawer-link .hint{display:block;font-size:11.5px;color:var(--ink3);margin-top:2px;}
.drawer-foot{padding:18px 22px;border-top:0.5px solid var(--bd);font-size:11.5px;color:var(--ink3);font-style:italic;font-family:var(--fd);}

/* ============================================================
   Buttons — five tiers
   ============================================================ */

/* 1 · Gold primary (.pv-primary) — the canonical verb */
.btn-primary{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 22px;background:var(--gold-l);border:1px solid var(--gold);
  color:var(--gold-text);border-radius:var(--rm);
  font-family:var(--fb);font-size:14px;font-weight:500;letter-spacing:0.3px;
  text-decoration:none;cursor:pointer;
  box-shadow:0 1px 0 #B89530;
  transition:transform .15s var(--ease-out),background .2s var(--ease-out);
}
.btn-primary:hover{background:var(--gold-ll);transform:translateY(-1px);}
.btn-primary:active{transform:translateY(0);box-shadow:none;}

/* 2 · Stamp / Edit (.pv-footer-edit) — universal footer slot */
.btn-stamp{
  display:inline-flex;align-items:center;gap:6px;
  padding:10px 22px;background:var(--gold-ll);border:1px solid var(--gold-b);
  color:var(--ink);border-radius:var(--rm);
  font-family:var(--fb);font-size:13px;font-weight:500;letter-spacing:0.3px;
  text-decoration:none;cursor:pointer;
  box-shadow:0 1px 0 #B89530;
}
.btn-stamp:hover{background:var(--gold-l);}

/* 3 · Soft cream — secondary */
.btn-soft{
  display:inline-flex;align-items:center;gap:6px;
  padding:9px 14px;background:var(--gold-ll);border:0.5px solid var(--gold-b);
  color:var(--ink);border-radius:var(--rm);font-family:var(--fb);font-size:13px;font-weight:500;
  text-decoration:none;cursor:pointer;
}
.btn-soft:hover{background:var(--gold-l);}

/* 4 · Text link — low-weight footer actions */
.btn-text{
  padding:8px 4px;background:transparent;border:0;color:var(--ink3);
  font-family:var(--fb);font-size:12.5px;cursor:pointer;
}
.btn-text:hover{color:var(--ink);}

/* 5 · Danger text */
.btn-danger{
  padding:8px 4px;background:transparent;border:0;color:var(--danger-text);
  font-family:var(--fb);font-size:12.5px;font-weight:500;cursor:pointer;
}

/* Ghost (used for nav, secondary links) */
.btn-ghost{
  display:inline-flex;align-items:center;gap:6px;
  padding:10px 18px;background:transparent;border:0.5px solid var(--bd2);color:var(--ink2);
  border-radius:var(--rm);font-family:var(--fb);font-size:13px;font-weight:500;
  text-decoration:none;cursor:pointer;transition:all .2s var(--ease-out);
}
.btn-ghost:hover{border-color:var(--ink);color:var(--ink);background:var(--bg2);}

/* ============================================================
   Pills — semantic stamps · 10.5px / 1.6px tracked / UPPERCASE
   ============================================================ */
.pill{
  display:inline-block;font-family:var(--fb);font-size:10.5px;font-weight:500;
  letter-spacing:1.6px;text-transform:uppercase;
  padding:3px 11px;border-radius:99px;border:0.5px solid;white-space:nowrap;
}
.pill-active{background:var(--success-bg);color:var(--success-text);border-color:var(--success-bd);}
.pill-progress{background:var(--warning-bg);color:var(--warning-text);border-color:var(--warning-bd);}
.pill-info{background:var(--info-bg);color:var(--info-text);border-color:var(--info-bd);}
.pill-backlog{background:var(--bg2);color:var(--ink2);border-color:var(--bd);}
.pill-released{background:var(--bg);color:var(--ink3);border-color:var(--bd);border-style:dashed;}
.pill-solo{background:var(--gold-ll);color:var(--gold-deep);border-color:var(--gold-b);}
.pill-gold{background:var(--gold-l);color:var(--gold-deep);border-color:var(--gold-b);}
.pill-danger{background:var(--danger-bg);color:var(--danger-text);border-color:var(--danger-bd);}

/* ============================================================
   pv-modal — the canonical preview-modal surface
   ============================================================ */
.pv-modal{
  position:relative;background:var(--bg3);border:0.5px solid var(--bd);
  border-radius:var(--rxl);padding:30px 28px 18px;max-width:540px;width:100%;
  box-shadow:0 1px 0 rgba(201,168,76,.08),0 12px 32px -16px rgba(46,44,38,.10);
}
.pv-modal::before{
  content:'';position:absolute;top:6px;left:18px;right:18px;height:7px;
  background-image:radial-gradient(circle 1.4px at 50% 50%,var(--gold) 0%,var(--gold) 70%,rgba(201,168,76,.35) 90%,transparent 100%);
  background-size:14px 7px;background-repeat:repeat-x;background-position:center;
  opacity:.85;pointer-events:none;
}
.pv-toprow{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:8px 0 18px;}
.pv-pills{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.pv-close{
  width:30px;height:30px;border-radius:var(--rm);background:var(--gold-cream);
  border:0.5px solid var(--gold-bb);color:var(--ink2);
  display:flex;align-items:center;justify-content:center;font-size:14px;line-height:1;cursor:pointer;
}
.pv-title{font-family:var(--fd);font-size:30px;font-weight:500;color:var(--ink);line-height:1.1;margin:0 0 10px;letter-spacing:-0.5px;}
.pv-meta{font-family:var(--fd);font-size:14px;font-style:italic;color:var(--ink2);margin:0 0 22px;line-height:1.5;}
.pv-meta strong{font-weight:500;color:var(--ink);font-style:normal;}
.pv-info-card{background:#F4EFE2;border:0.5px solid var(--bd-soft);border-radius:var(--rm);padding:11px 14px;margin:0 0 18px;}
.pv-info-card-h{font-family:var(--fb);font-size:10.5px;font-weight:500;letter-spacing:1.4px;text-transform:uppercase;color:var(--ink3);margin-bottom:3px;}
.pv-info-card-v{font-family:var(--fd);font-size:17px;color:var(--ink);}
.pv-eyebrow{font-family:var(--fb);font-size:10.5px;font-weight:500;letter-spacing:2px;text-transform:uppercase;color:var(--gold-deep);margin-bottom:6px;}
.pv-notes{font-family:var(--fd);font-size:15px;color:var(--ink);line-height:1.65;margin:0 0 4px;}
.pv-footer{display:flex;justify-content:space-between;align-items:center;margin-top:6px;padding-top:14px;border-top:0.5px solid var(--bd-soft);}

/* ============================================================
   Action row — the workhorse
   icon · label · hint · chevron
   ============================================================ */
.action-row{
  display:flex;align-items:center;gap:14px;width:100%;
  padding:13px 4px;background:transparent;border:0;border-bottom:0.5px solid var(--bd-soft);
  cursor:pointer;font-family:inherit;text-align:left;color:inherit;text-decoration:none;
  transition:background .15s var(--ease-out);
}
.action-row:last-child{border-bottom:0;}
.action-row:hover{background:var(--gold-wash);border-radius:var(--rm);}
.action-row .ic{
  font-size:18px;color:var(--gold-deep);width:20px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}
.action-row .body{flex:1;min-width:0;}
.action-row .lbl{font-family:var(--fb);font-size:14px;font-weight:500;color:var(--ink);margin-bottom:1px;letter-spacing:.1px;}
.action-row .hint{font-family:var(--fb);font-size:12px;color:var(--ink3);line-height:1.4;}
.action-row .chev{font-size:16px;color:var(--ink4);flex-shrink:0;}

/* ============================================================
   Tactile object — universal tap card
   ============================================================ */
.tap{
  position:relative;background:var(--bg);border:0.5px solid var(--bd);
  border-radius:var(--rs);padding:12px 38px 12px 14px;cursor:pointer;
  text-decoration:none;color:inherit;display:block;
  transition:background .2s var(--ease-out),border-color .2s var(--ease-out),transform .15s var(--ease-out),box-shadow .2s var(--ease-out);
}
.tap:hover{
  background:var(--gold-cream);border-color:var(--gold-b);
  transform:translateX(2px);
  box-shadow:0 2px 8px rgba(201,168,76,.06);
}
.tap:active{transform:translateX(1px) scale(.998);}
.tap .tap-chev{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  color:var(--gold);font-family:var(--fd);font-size:18px;font-weight:500;
  line-height:1;opacity:.42;transition:all .2s var(--ease-out);
}
.tap:hover .tap-chev{opacity:1;transform:translateY(-50%) translateX(2px);}

/* ============================================================
   Page-action icon row — ? ↗ ⌕ ⊕ ⎙ +
   ============================================================ */
.pa-row{display:inline-flex;align-items:center;gap:10px;}
@media(max-width:560px){.pa-row{gap:12px;}}
.pa{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:50%;
  background:transparent;border:0.5px solid var(--bd);color:var(--ink2);
  cursor:pointer;transition:all .2s var(--ease-out);
}
.pa:hover{background:var(--gold-wash);border-color:var(--gold-b);color:var(--gold-deep);}
.pa.on{background:var(--gold-cream);border-color:var(--gold-b);color:var(--gold-deep);}
.pa-add{
  background:radial-gradient(circle at 50% 30%,#F4E8BD 0%,#ECDEB2 70%,#E5D29A 100%);
  border:0.5px solid var(--gold-b);color:var(--gold-text);
  box-shadow:0 1px 0 var(--gold-deep),0 2px 6px rgba(201,168,76,.20);
}
.pa-add:hover{transform:translateY(-1px);background:radial-gradient(circle at 50% 30%,#FBF1D2 0%,#F4E8BD 70%,#ECDEB2 100%);}
.pa-add:active{transform:scale(.97);box-shadow:0 0 0 var(--gold-deep);}

/* ============================================================
   Filter trigger — LABEL · Value ▾
   ============================================================ */
.filter-bar{display:flex;align-items:center;gap:0;margin-bottom:18px;}
.filter-trigger{
  display:inline-flex;align-items:center;gap:8px;background:transparent;border:0;
  padding:6px 10px;border-radius:var(--rm);font-family:inherit;cursor:pointer;
  transition:background .2s var(--ease-out);
}
.filter-trigger:hover{background:var(--gold-wash);}
.filter-trigger .lbl{
  font-family:var(--fb);font-size:10px;letter-spacing:1.8px;text-transform:uppercase;
  color:var(--ink3);font-weight:500;
}
.filter-trigger .val{font-family:var(--fd);font-size:15px;color:var(--ink);font-weight:500;}
.filter-trigger .val .count{color:var(--ink3);font-size:11px;margin-left:2px;}
.filter-trigger .chev{color:var(--gold-deep);font-size:11px;}
.filter-trigger.on{background:var(--gold-cream);}
.filter-trigger.on .val{color:var(--gold-deep);}

.filter-divider{width:0.5px;height:18px;background:rgba(0,0,0,.12);margin:0 6px;}

/* ============================================================
   Sub-tab toggle — segmented control (Library / Showcases)
   ============================================================ */
.seg-toggle{
  position:relative;display:flex;align-items:stretch;
  border-bottom:0.5px solid var(--bd);
}
.seg-tab{
  padding:13px 0;margin-right:32px;background:transparent;border:0;cursor:pointer;
  font-family:var(--fb);font-size:14px;font-weight:500;color:var(--ink3);
  display:inline-flex;align-items:center;gap:8px;
}
.seg-tab.on{font-weight:500;color:var(--ink);}
.seg-tab .count{
  display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 7px;
  border-radius:99px;background:var(--bg2);color:var(--ink3);font-size:10.5px;font-weight:500;border:0.5px solid var(--bd);
}
.seg-tab.on .count{background:var(--gold-l);color:var(--gold-deep);border-color:var(--gold-b);}
.seg-indicator{
  position:absolute;bottom:-0.5px;height:2px;background:var(--gold);border-radius:2px 2px 0 0;
  transition:transform .25s var(--ease-out),width .25s var(--ease-out);
}

/* ============================================================
   Reveal on scroll
   ============================================================ */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out);}
.reveal.in{opacity:1;transform:translateY(0);}
.reveal-d1{transition-delay:.1s;} .reveal-d2{transition-delay:.2s;} .reveal-d3{transition-delay:.3s;}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1!important;transform:none!important;transition:none!important;}}

/* ============================================================
   Footer — quiet, italic playbill
   ============================================================ */
.site-footer{padding:60px 0 50px;background:var(--bg2);border-top:0.5px solid var(--bd-soft);}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:36px;}
@media(max-width:780px){.foot-grid{grid-template-columns:1fr 1fr;gap:30px;}}
.foot-brand p{font-family:var(--fd);font-style:italic;font-size:13.5px;margin-top:10px;line-height:1.5;color:var(--ink2);max-width:340px;}
.foot-col h5{font-family:var(--fd);font-style:italic;color:var(--gold-deep);font-size:13.5px;font-weight:500;margin:0 0 12px;}
.foot-col a{display:block;color:var(--ink2);font-size:13px;text-decoration:none;padding:3px 0;}
.foot-col a:hover{color:var(--gold-deep);}
.foot-bottom{
  border-top:0.5px solid var(--bd-soft);padding-top:18px;
  display:flex;justify-content:space-between;font-size:11.5px;color:var(--ink3);
  flex-wrap:wrap;gap:10px;
}
.foot-bottom em{color:var(--gold-deep);font-family:var(--fd);font-style:italic;}

/* ============================================================
   Substrate motifs — used by per-page CSS to extend
   Defined here so they're consistent everywhere.
   ============================================================ */

/* Ticket stub (Productions) */
.stub{
  display:grid;grid-template-columns:104px 1fr auto;align-items:stretch;
  background:transparent;border:0.5px solid #E5E2D8;border-radius:var(--rs);
  overflow:hidden;cursor:pointer;transition:transform .15s var(--ease-out),box-shadow .2s var(--ease-out);
}
.stub:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(46,44,38,.06);}
.stub-side{padding:12px 14px;display:flex;flex-direction:column;justify-content:space-between;gap:6px;border-right:1.5px dashed #D9C485;background:linear-gradient(180deg,#FBF1D2 0%,#FDF7E5 100%);}
.stub-side .kind{font-family:var(--fb);font-size:10px;letter-spacing:2.4px;text-transform:uppercase;font-weight:500;color:var(--gold-deep);}
.stub-side .status{font-family:var(--fd);font-size:13px;font-style:italic;color:#4F4B43;font-weight:500;}
.stub-side.muted{background:linear-gradient(180deg,#F5EFE3 0%,#EDE6D2 100%);border-right-color:#D3CBB4;}
.stub-side.muted .kind,.stub-side.muted .status{color:var(--ink3);}
.stub-body{padding:12px 14px;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:3px;}
.stub-body .ttl{font-family:var(--fd);font-size:16px;font-weight:500;color:var(--ink);margin:0;letter-spacing:-.2px;line-height:1.25;}
.stub-body .ttl.italic{font-style:italic;}
.stub-body .sub{font-family:var(--fd);font-style:italic;font-size:12.5px;color:var(--ink3);margin:0;}
.stub-stamp{
  align-self:center;padding:6px 9px;border:0.5px solid var(--gold-b);border-radius:3px;background:var(--bg3);
  font-family:var(--fb);font-size:9.5px;font-weight:500;letter-spacing:1.4px;color:var(--gold-deep);
  line-height:1.2;text-align:center;margin:8px 4px 8px 0;
}

/* Notebook (Class Notes) */
.notebook{
  position:relative;
  background:
    linear-gradient(90deg,transparent 21px,rgba(194,69,69,.32) 21px,rgba(194,69,69,.32) 22px,transparent 22px),
    repeating-linear-gradient(to bottom,transparent 0,transparent 21px,rgba(58,82,128,.08) 21px,rgba(58,82,128,.08) 22px),
    #FCFAF4;
  background-position:0 0,0 14px;background-repeat:no-repeat,repeat,repeat;
  border:0.5px solid #E5E2D8;border-left:2.5px solid #C24545;
  border-radius:var(--rs) 0 var(--rs) var(--rs);
  padding:14px 36px 14px 28px;cursor:pointer;
}
.notebook::after{content:"";position:absolute;top:0;right:0;width:20px;height:20px;background:linear-gradient(135deg,transparent 50%,#E5E2D8 50%);filter:drop-shadow(-1px 1px 1.5px rgba(0,0,0,.08));pointer-events:none;}
.notebook .meta{font-family:var(--fb);font-size:10px;letter-spacing:1.8px;text-transform:uppercase;color:var(--gold-deep);font-weight:500;margin-bottom:4px;}
.notebook .ttl{font-family:var(--fd);font-size:15.5px;font-weight:500;color:var(--ink);margin:0 0 3px;line-height:1.25;}
.notebook .body{font-size:12.5px;color:#4F4B43;line-height:1.55;margin:0;}

/* Index card (Resources) */
.idx-card{
  position:relative;background:transparent;border:0.5px solid #E5E2D8;border-radius:var(--rs);
  overflow:hidden;display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:14px;
  padding:0 14px 0 0;cursor:pointer;transition:transform .15s var(--ease-out),box-shadow .2s var(--ease-out);
}
.idx-card:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(46,44,38,.06);}
.idx-tab{
  align-self:stretch;display:flex;align-items:center;justify-content:center;
  color:#fff;font-family:var(--fb);font-size:10.5px;font-weight:500;letter-spacing:2.4px;text-transform:uppercase;
  writing-mode:vertical-rl;transform:rotate(180deg);padding:12px 0;min-height:60px;
  box-shadow:inset -1px 0 0 rgba(0,0,0,.06);
}
.idx-tab.gold{background:linear-gradient(180deg,#C9A84C 0%,#B8973A 100%);}
.idx-tab.deep{background:linear-gradient(180deg,#9B7E26 0%,#6E5B12 100%);}
.idx-tab.graphite{background:linear-gradient(180deg,#5F5E5A 0%,#444441 100%);}
.idx-tab.rust{background:linear-gradient(180deg,#A8552B 0%,#7D3E1E 100%);}
.idx-body{min-width:0;padding:12px 0;}
.idx-body .ttl{font-family:var(--fd);font-size:15px;font-weight:500;color:var(--ink);margin:0 0 2px;letter-spacing:-.1px;line-height:1.25;}
.idx-body .sub{font-family:var(--fd);font-style:italic;font-size:12.5px;color:var(--ink3);line-height:1.5;margin:0;}
.idx-body .link{font-family:var(--fb);font-size:11.5px;font-weight:500;color:var(--gold-deep);margin-top:4px;}

/* ============================================================
   Print / sentence-case header pattern
   ============================================================ */
.section-paper .section-head h2 em,
.section .section-head h2 em{color:var(--gold-deep);}

/* ============================================================
   Misc helpers
   ============================================================ */
.center{text-align:center;}
.italic{font-style:italic;}
.gold{color:var(--gold-deep);}
.cream{color:var(--ink2);}
.mt-2{margin-top:8px;} .mt-4{margin-top:16px;} .mt-6{margin-top:24px;} .mt-8{margin-top:32px;} .mt-12{margin-top:48px;}
.mb-2{margin-bottom:8px;} .mb-4{margin-bottom:16px;} .mb-6{margin-bottom:24px;} .mb-8{margin-bottom:32px;}

@media(max-width:780px){
  body{font-size:14.5px;}
  .section{padding:60px 0;}
  .section-head h2{font-size:28px;}
}