:root{--bg:#07101f;--card:#111f35;--gold:#d4af37;--gold2:#f8e8af;--text:#ece6d4;--muted:#c6d1df;--line:rgba(248,232,175,.16);--line2:rgba(248,232,175,.34);--shadow:0 28px 80px rgba(0,0,0,.36)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--text);background:radial-gradient(circle at 50% -10%,rgba(58,105,175,.36),transparent 38rem),linear-gradient(180deg,#07101f,#08111f 55%,#050a13);font-family:Inter,system-ui,-apple-system,Segoe UI,Arial,sans-serif;line-height:1.62}
a{color:var(--gold2)}img{display:block;max-width:100%;height:auto}h1,h2,h3,.brand,.footer-title,.num strong{font-family:Georgia,"Times New Roman",serif}
.site-header{position:fixed;top:0;left:0;right:0;width:100%;z-index:99;background:rgba(7,16,31,.98);backdrop-filter:blur(16px);border-bottom:1px solid rgba(248,232,175,.1)}body{padding-top:72px}
.nav{max-width:1380px;margin:0 auto;padding:14px 18px;display:flex;align-items:center;gap:16px}.brand{color:var(--text);text-decoration:none;letter-spacing:.08em;font-weight:900;white-space:nowrap}.brand span{color:var(--gold2)}
.nav-toggle{display:none;margin-left:auto;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--gold2);border-radius:14px;padding:8px 12px}
.nav-links{margin-left:auto;display:flex;flex-wrap:wrap;gap:12px 14px;justify-content:flex-end}.nav-links a{color:#dce7f4;text-decoration:none;opacity:.92;font-size:.82rem}.nav-links a:hover,.nav-links a.active{color:var(--gold2)}
.hero,.page-hero{min-height:calc(100vh - 72px);display:grid;place-items:center;text-align:center;padding:80px 20px;position:relative;overflow:hidden;border-bottom:1px solid rgba(248,232,175,.08)}.page-hero{min-height:52vh}
.hero:before,.page-hero:before{content:"928";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:clamp(10rem,32vw,28rem);color:rgba(248,232,175,.04);line-height:1;pointer-events:none;font-family:Georgia,serif;font-weight:900}
.hero-inner,.page-hero-inner{position:relative;z-index:1;max-width:980px}.eyebrow,.kicker{color:var(--gold2);text-transform:uppercase;letter-spacing:.22em;font-size:.78rem;font-weight:900}
h1{font-size:clamp(3.1rem,8vw,7rem);line-height:.98;color:#fff4ca;margin:14px 0;letter-spacing:.018em}.page-hero h1{font-size:clamp(2.7rem,6.5vw,5.8rem)}h2{font-size:clamp(2rem,4.7vw,4.05rem);line-height:1.06;color:#fff4ca;margin:0 0 16px}h3{color:var(--gold2);font-size:1.45rem;line-height:1.15;margin:0 0 10px}p{margin:0 0 16px}
.lead{max-width:840px;margin:0 auto 18px;color:#d5dfec;font-size:clamp(1rem,1.7vw,1.18rem)}.sig{color:var(--gold2);letter-spacing:.45em;font-weight:900;margin:22px 0}
.btn-row,.actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;align-items:center;margin-top:26px}.btn{display:inline-flex;min-height:44px;align-items:center;justify-content:center;padding:12px 20px;border-radius:999px;border:1px solid var(--line2);background:rgba(255,255,255,.055);color:var(--text);text-decoration:none;font-weight:900}.btn.primary,.btn.buy{color:#09111f;background:linear-gradient(135deg,rgba(212,175,55,.96),rgba(248,232,175,.86));border-color:rgba(248,232,175,.5)}
.wrap{max-width:1200px;margin:0 auto;padding:76px 20px}.wrap.narrow{max-width:920px}.band{background:rgba(255,255,255,.025);border-block:1px solid rgba(248,232,175,.08)}.section-title{text-align:center}.section-lead{max-width:820px;margin:0 auto 30px;text-align:center;color:var(--muted)}
.grid{display:grid;gap:20px}.grid.two{grid-template-columns:repeat(2,1fr)}.grid.three{grid-template-columns:repeat(3,1fr)}
.card{background:linear-gradient(180deg,rgba(17,31,53,.96),rgba(7,16,29,.97));border:1px solid var(--line);border-radius:28px;padding:26px;box-shadow:var(--shadow)}.card.flat{box-shadow:none;background:rgba(255,255,255,.035)}
.figure{margin:0;border-radius:28px;overflow:hidden;background:rgba(255,255,255,.035);border:1px solid var(--line);box-shadow:var(--shadow)}.figure img{width:100%}.figure figcaption{padding:12px 14px;color:var(--muted);border-top:1px solid rgba(248,232,175,.09);font-size:.92rem}.missing{min-height:260px;display:grid;place-items:center;text-align:center;color:#ffce88}
.cover-figure{max-width:360px;margin:0 auto 20px;border-radius:22px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);background:rgba(255,255,255,.035)}.cover-figure img{width:100%;max-height:520px;object-fit:contain;background:#050a13}.cover-figure figcaption{padding:10px 12px;color:var(--muted);text-align:center}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.feature{display:grid;grid-template-columns:1.08fr .92fr;gap:28px;align-items:center}
.notice{border-left:4px solid var(--gold);background:rgba(212,175,55,.08);border-radius:18px;padding:18px}.path-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.path-card{min-height:220px;display:flex;flex-direction:column;justify-content:space-between;color:var(--muted);text-decoration:none;transition:.18s ease}.path-card:hover{border-color:rgba(248,232,175,.45);transform:translateY(-3px)}.step{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line2);color:var(--gold2);font-weight:900;margin-bottom:14px}.open-word{color:var(--gold2);font-weight:900}
.num-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:26px}.num{text-align:center;border:1px solid var(--line);border-radius:22px;background:rgba(255,255,255,.035);padding:20px}.num strong{display:block;color:var(--gold2);font-size:2.1rem;line-height:1}.num span{display:block;color:var(--muted);font-size:.9rem;margin-top:8px}
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:20px}table{width:100%;border-collapse:collapse;background:rgba(255,255,255,.025)}th,td{padding:13px 15px;border-bottom:1px solid rgba(248,232,175,.08);text-align:left}th{color:var(--gold2)}
.calendar-shell{display:grid;grid-template-columns:310px 1fr;gap:24px;align-items:start}.month-picker{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.month-picker button{border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--text);border-radius:14px;padding:10px;cursor:pointer}.month-picker button.active{background:rgba(212,175,55,.18);color:var(--gold2);border-color:rgba(248,232,175,.38)}
.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}.day-cell{min-height:104px;padding:8px;border:1px solid rgba(248,232,175,.12);background:rgba(255,255,255,.035);border-radius:16px}.day-cell.today{border-color:rgba(248,232,175,.8);box-shadow:0 0 0 1px rgba(248,232,175,.3)}.day-num{color:var(--gold2);font-weight:900}.public-date{font-size:.76rem;color:#9fb2c9}.event-pill{display:inline-block;margin-top:6px;padding:4px 6px;border-radius:999px;background:rgba(212,175,55,.14);border:1px solid rgba(212,175,55,.25);color:#fff4ca;font-size:.72rem}
.audio-panel input{width:min(380px,100%)}.footer{text-align:center;padding:56px 20px;border-top:1px solid rgba(248,232,175,.1);color:var(--muted)}.footer-title{color:var(--gold2);font-weight:900;letter-spacing:.1em;margin-bottom:10px}
.framework-note{max-width:1200px;margin:0 auto;padding:40px 20px;border-top:1px solid rgba(248,232,175,.08);color:var(--muted);font-size:.92rem;line-height:1.7}.framework-note h3{color:var(--gold2);font-size:.95rem;text-transform:uppercase;letter-spacing:.1em;margin:0 0 14px;font-weight:900}.framework-note p{margin:0 0 12px;max-width:920px;margin-left:auto;margin-right:auto}.framework-note code{background:rgba(255,255,255,.04);border:1px solid rgba(248,232,175,.12);border-radius:6px;padding:2px 6px;color:var(--gold2);font-family:monospace;font-size:.9em}
@media(max-width:980px){.nav{align-items:flex-start;flex-wrap:wrap}.nav-toggle{display:block}.nav-links{display:none;width:100%;margin-left:0;flex-direction:column;align-items:flex-start;padding-top:10px}.nav-links.open{display:flex}.grid.two,.grid.three,.feature,.gallery,.path-grid,.calendar-shell{grid-template-columns:1fr}.num-strip{grid-template-columns:repeat(2,1fr)}.hero,.page-hero{min-height:auto}h1{font-size:clamp(2.7rem,12vw,4.8rem)}}


/* V4 calendar integration */
.grid.four{grid-template-columns:repeat(4,1fr)}
.calendar-hero-compact{min-height:52vh;padding-bottom:46px}
.date-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:26px}
.date-card{border:1px solid var(--line);border-radius:22px;background:rgba(255,255,255,.035);padding:18px;text-align:center}
.date-card strong{display:block;color:var(--gold2);font-family:Georgia,serif;font-size:1.45rem}
.date-card span.short{display:block;color:var(--gold);font-family:Georgia,serif;font-size:1.05rem;letter-spacing:.06em;margin-top:4px;opacity:.92}
.date-card span{display:block;color:var(--muted);font-size:.86rem;margin-top:6px}
.calendar-half{margin-top:18px}
.calendar-layer-wrap{padding-top:48px;padding-bottom:48px}
.calendar-exact-layout{display:grid;grid-template-columns:360px 1fr;gap:26px;align-items:start}
.month-orbit{position:relative;width:min(300px,100%);height:300px;margin:28px auto 0;border:1px solid rgba(248,232,175,.22);border-radius:50%;display:grid;place-items:center}
.month-orbit-center{position:absolute;width:130px;height:130px;border-radius:50%;border:1px solid rgba(248,232,175,.22);background:rgba(255,255,255,.035);display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;font-family:Georgia,serif;color:#fff4ca;font-size:1.5rem;line-height:1.4;font-weight:500}
.month-orbit button{position:absolute;width:54px;height:54px;border-radius:50%;border:1px solid rgba(248,232,175,.28);background:rgba(49,114,213,.42);color:#fff;font-weight:900;cursor:pointer}
.month-orbit button span{display:block;font-size:.68rem;color:#d7e4f5}
.month-orbit button.active{background:rgba(248,232,175,.25);color:var(--gold2);border-color:rgba(248,232,175,.8)}
.legend{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 18px}
.legend span,.month-meta{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:7px 10px;background:rgba(255,255,255,.035);color:var(--muted);font-size:.84rem}
@media(max-width:980px){.grid.four,.calendar-exact-layout{grid-template-columns:1fr}.date-strip{grid-template-columns:repeat(2,1fr)}.month-orbit{height:270px}}


/* V5 full Genesis Project */
.genesis-hero{min-height:56vh}
.genesis-count-strip{grid-template-columns:repeat(4,1fr)}
.exact-card{margin-top:24px;border-color:rgba(248,232,175,.34)}
.genesis-equation{
  text-align:center;
  color:var(--gold2);
  font-family:Georgia,serif;
  font-size:clamp(2rem,5vw,4rem);
  line-height:1.08;
  margin:18px auto;
}
.genesis-equation.small{font-size:clamp(1.3rem,3vw,2.2rem);color:#fff4ca}
.pivot-layout{display:grid;grid-template-columns:1fr 220px 1fr;gap:22px;align-items:stretch}
.pivot-center{
  border:1px solid var(--line2);
  border-radius:28px;
  background:radial-gradient(circle,rgba(212,175,55,.18),rgba(255,255,255,.035));
  display:grid;
  place-items:center;
  text-align:center;
  padding:22px;
  color:var(--gold2);
  box-shadow:var(--shadow);
}
.aleph-tav{font-size:4rem;font-family:Georgia,serif;color:#fff4ca;line-height:1}
.carbon-card h3{font-size:2.5rem;text-align:center}
.binary-bar{display:grid;grid-template-columns:repeat(12,1fr);gap:8px;max-width:900px;margin:0 auto}
.binary-bar span{
  display:grid;
  place-items:center;
  min-height:64px;
  border:1px solid var(--line2);
  border-radius:16px;
  background:rgba(255,255,255,.04);
  color:var(--gold2);
  font-size:1.45rem;
  font-family:Georgia,serif;
  font-weight:900;
}
.palindrome-row{display:grid;grid-template-columns:repeat(7,1fr);gap:10px}
.palindrome-row div{
  border:1px solid var(--line);
  border-radius:20px;
  background:rgba(255,255,255,.035);
  padding:18px 10px;
  text-align:center;
  color:var(--gold2);
  font-family:Georgia,serif;
  font-size:2rem;
  font-weight:900;
}
.palindrome-row div span{display:block;color:var(--muted);font-size:.88rem;font-family:Inter,system-ui,sans-serif;font-weight:600;margin-top:6px}
.palindrome-row .center{background:rgba(212,175,55,.16);border-color:rgba(248,232,175,.5)}
.checklist{columns:2;column-gap:34px;color:var(--muted)}
.checklist li{break-inside:avoid;margin-bottom:10px;padding-left:4px}
@media(max-width:980px){
  .genesis-count-strip{grid-template-columns:repeat(2,1fr)}
  .pivot-layout{grid-template-columns:1fr}
  .binary-bar{grid-template-columns:repeat(4,1fr)}
  .palindrome-row{grid-template-columns:repeat(2,1fr)}
  .palindrome-row .center{grid-column:1/-1}
  .checklist{columns:1}
}


/* V6 Cymatic Hexagonal Resonance Animation for Orbit Buttons */
@keyframes cymaticHex {
  0% { 
    box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.4); 
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); 
  }
  100% { 
    box-shadow: 0 0 0 20px rgba(212, 175, 55, 0); 
    clip-path: polygon(50% -20%, 120% 25%, 120% 75%, 50% 120%, -20% 75%, -20% 25%); 
  }
}

.month-orbit button.active {
   animation: cymaticHex 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/*
 * START-HERE LAYOUT FIX
 *
 * Problem: On start-here.html, the page-hero (min-height: 52vh + 80px*2 padding)
 * combined with .band > .wrap (padding: 76px top) pushes the path cards entirely
 * below the fold on a typical laptop viewport. The reader sees the headline OR
 * the cards, never both.
 *
 * Fix: Add a body class `start-here-page` to <body> on start-here.html, then
 * use these scoped overrides to tighten the hero and the band padding so the
 * eyebrow ("START HERE"), the headline ("How To See The Code"), the Reader rule
 * box, AND the tops of the first row of cards are all visible on initial load.
 *
 * This is scoped — it only affects start-here.html. Other pages keep the
 * generous hero spacing they have today.
 *
 * To apply:
 *   1. In start-here.html, change <body> to <body class="start-here-page">
 *   2. Append the rules below to assets/css/site.css
 *   3. Bump the cache-buster: <link rel="stylesheet" href="assets/css/site.css?v=v7">
 */

/* ============================================================
   START-HERE PAGE — TIGHTENED VERTICAL RHYTHM
   ============================================================ */

/* Shrink the hero block so headline + rule box are visible AND cards peek up. */
.start-here-page .page-hero{
  min-height: auto !important;
  padding: 44px 20px 32px !important;
}

/* Reduce the eyebrow-to-headline and headline-to-lead gaps slightly. */
.start-here-page .page-hero h1{
  margin: 10px 0 6px;
  font-size: clamp(2.4rem, 5.8vw, 5rem);
}

.start-here-page .page-hero .lead{
  margin: 0 0 18px;
}

/* Pull the cards band up close to the hero so the first row appears on load. */
.start-here-page .band .wrap{
  padding: 28px 20px 56px !important;
}

/* Make cards a touch shorter so a full row of three fits the viewport. */
.start-here-page .path-card{
  min-height: 180px;
}

/* Mobile: hero already collapses to min-height auto via the existing
   @media(max-width:980px) rule. Keep card spacing tight there too. */
@media (max-width: 980px){
  .start-here-page .band .wrap{
    padding: 24px 20px 48px !important;
  }
  .start-here-page .page-hero{
    padding: 36px 20px 24px !important;
  }
}