/* ============================================================================
   Infinitum Cor - THE LEDGER (the Living Index register)
   Shared structure for the 2026-08 rebuild: the fixed crisis pill, the
   wordmark-in-flow, thesis type, section heads, the ledger rows with honest
   proof columns, the shipped timeline, the invitation, the groundline, and
   the slim hamburger menu. Load AFTER tokens.css and atmosphere.css.
   Body styles ride here too so pages need no inline block for the basics.
   ========================================================================== */
  /* THE LIVING INDEX. The doors became a ledger: every room of the ecosystem
     visible on one scroll, each with its name, its purpose, and its honest
     state. The arrival, the sky, and the wheel live on at /arrival.html (the
     long way in, linked below); thirty days of analytics said first-time
     visitors were skipping the cinema and spinning the wheel without walking
     through it, and every one of them is too precious for that. Atmosphere
     (aurora, grain, synapse glow) rides in from atmosphere.css, so the void
     still breathes. */
  body{
    margin:0; font-family:var(--font-body); font-weight:300; color:var(--ink);
    background:var(--deep-void); line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  *{box-sizing:border-box}
  a{color:var(--green); text-decoration:none}
  .inner{position:relative; max-width:1060px; margin:0 auto; padding:0 24px}

  /* the lifeline: plain DOM, fixed, first in tab order, no dependencies */
  .crisis-pill{position:fixed; top:16px; left:16px; z-index:9996;
    font-weight:500; font-size:13px; color:var(--deep-void);
    background:var(--green-l); border-radius:999px; padding:10px 18px;
    box-shadow:0 6px 24px rgba(95,230,206,.25)}
  .crisis-pill:hover{background:#D9F2E6; color:var(--deep-void)}
  @media (max-width:560px){.crisis-pill{font-size:12px; padding:9px 14px}}

  /* wordmark rides in the flow, not over a sky */
  .wordmark{padding:96px 0 0; text-align:left}
  .wordmark .name{font-family:'Cinzel',serif; font-weight:700; font-size:.95rem;
    letter-spacing:.42em; color:var(--ink-soft)}
  .wordmark .sub{font-family:var(--font-mono); font-size:.6rem; letter-spacing:.34em;
    text-transform:uppercase; color:var(--muted); margin-top:10px}

  .hero{padding:64px 0 30px}
  h1.thesis{font-family:var(--font-display); font-weight:400;
    font-size:clamp(2.7rem,7.6vw,6.2rem); line-height:1.06; margin:0;
    color:var(--ink); text-wrap:balance}
  h1.thesis em{font-style:italic; color:var(--green-l)}
  .whisper{font-size:clamp(1.02rem,1.5vw,1.25rem); color:var(--ink-soft);
    max-width:34em; margin:26px 0 0}

  /* the constant lines: the way in, the giving, the newest thing */
  .anncstack{display:flex; flex-direction:column; gap:2px; margin:44px 0 0;
    border-top:1px solid var(--line-2)}
  .annc{display:flex; align-items:baseline; gap:12px; padding:12px 2px;
    border-bottom:1px solid var(--line-2);
    font-family:var(--font-mono); font-size:.72rem; letter-spacing:.08em;
    color:var(--ink-soft)}
  .annc:hover{color:var(--green-l)}
  .annc .dot{width:6px; height:6px; border-radius:50%; background:var(--gold);
    flex:none; align-self:center;
    box-shadow:0 0 10px rgba(230,198,106,.5)}
  .annc.way .dot{background:var(--teal); box-shadow:0 0 10px rgba(95,230,206,.6)}

  .section{padding:84px 0 0}
  .sec-head{font-family:var(--font-mono); font-size:14px; letter-spacing:.24em;
    text-transform:uppercase; color:var(--ink-soft); margin:0 0 40px}
  .sec-head b{color:var(--teal); font-weight:400}

  .prose{font-family:var(--font-display); font-weight:400;
    font-size:clamp(1.45rem,2.9vw,2.2rem); line-height:1.35;
    max-width:26em; margin:0; color:var(--ink)}
  .prose .dim{color:var(--muted)}

  /* the ledger */
  .ledger{border-top:1px solid var(--line)}
  .row{display:grid; grid-template-columns:3.2em 1fr minmax(9em,13em);
    gap:8px 28px; align-items:baseline; padding:25px 2px 23px;
    border-bottom:1px solid var(--line-2); color:inherit}
  .row .idx{font-family:var(--font-mono); font-size:11px; color:var(--muted);
    letter-spacing:.1em; padding-top:10px}
  .row .name{font-family:var(--font-display); font-weight:500;
    font-size:clamp(1.45rem,2.5vw,2rem); line-height:1.15; color:var(--ink); margin:0}
  .row .what{font-size:.94rem; color:var(--ink-soft); max-width:36em; margin:6px 0 0}
  .row .proof{font-family:var(--font-mono); font-size:11px; line-height:1.7;
    letter-spacing:.06em; text-transform:uppercase; color:var(--green);
    text-align:right; align-self:start; padding-top:12px;
    font-variant-numeric:tabular-nums}
  .row .proof s{text-decoration:none; display:block; color:var(--muted)}
  .row:hover .name{color:var(--green-l)}
  .row.help .name{color:var(--green-l)}
  .row.help .proof{color:var(--terra)}
  @media (max-width:640px){
    .row{grid-template-columns:2.2em 1fr}
    .row .proof{grid-column:2; text-align:left; padding-top:2px}
  }

  /* the long way in: the crafted experiences, kept and honoured */
  .longway{margin:34px 0 0; font-family:var(--font-mono); font-size:.7rem;
    letter-spacing:.1em; color:var(--muted); line-height:2.4}
  .longway a{color:var(--taupe); border-bottom:1px solid var(--line-2); padding-bottom:1px}
  .longway a:hover{color:var(--green-l); border-color:var(--green)}

  /* proof of motion */
  .ship{display:grid; grid-template-columns:8em 1fr; gap:10px 30px; max-width:44em; margin:0}
  .ship dt{font-family:var(--font-mono); font-size:11px; color:var(--muted);
    letter-spacing:.08em; padding-top:3px; font-variant-numeric:tabular-nums}
  .ship dd{margin:0 0 14px; color:var(--ink-soft); font-size:.96rem}
  .ship dd b{color:var(--ink); font-weight:400}

  /* invitation */
  .invite{padding:100px 0 90px}
  .invite .big{font-family:var(--font-display); font-style:italic; font-weight:500;
    font-size:clamp(1.7rem,4vw,2.9rem); line-height:1.25; margin:0 0 12px;
    color:var(--ink); max-width:20em}
  .invite .who{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.22em;
    text-transform:uppercase; color:var(--muted); margin:0 0 36px}
  .btn{display:inline-block; font-weight:500; font-size:14px; letter-spacing:.04em;
    color:var(--deep-void); background:var(--green); padding:14px 34px;
    border-radius:999px; margin-right:12px}
  .btn:hover{background:var(--green-l); color:var(--deep-void)}
  .btn.ghost{color:var(--green); background:transparent; border:1px solid var(--line)}
  .btn.ghost:hover{color:var(--green-l); border-color:var(--green)}

  .groundline{border-top:1px solid var(--line-2); margin-top:20px;
    padding:36px 0 60px; font-family:var(--font-mono); font-size:.66rem;
    letter-spacing:.08em; line-height:2.6}
  .groundline a{color:var(--muted); margin-right:22px; white-space:nowrap}
  .groundline a:hover{color:var(--green-l)}

  /* slim header: hamburger + glass menu, unchanged from the sky page */
  #navmenu-btn{position:fixed;top:16px;right:16px;z-index:9997;width:44px;height:44px;
    display:flex;align-items:center;justify-content:center;border-radius:12px;cursor:pointer;color:#F4EDDC;
    background:rgba(16,32,26,.5);border:1px solid rgba(230,190,110,.42);
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    box-shadow:0 2px 12px rgba(4,10,7,.35)}
  #navmenu-btn:hover{border-color:#E6BE6E;box-shadow:0 0 20px rgba(230,190,110,.28)}
  #navmenu-btn svg{width:22px;height:22px}
  #navmenu{position:fixed;top:66px;right:16px;z-index:9997;min-width:214px;display:flex;flex-direction:column;gap:2px;
    padding:12px;border-radius:16px;background:linear-gradient(165deg,rgba(12,23,18,.96),rgba(9,18,14,.93));
    border:1px solid rgba(230,190,110,.28);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    box-shadow:0 16px 44px rgba(4,10,7,.55);
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity .25s ease,transform .25s ease,visibility 0s linear .25s}
  #navmenu.open{opacity:1;visibility:visible;transform:none;transition:opacity .25s ease,transform .25s ease}
  #navmenu a{color:rgba(242,237,224,.9);text-decoration:none;font-family:var(--font-mono);
    font-size:.72rem;letter-spacing:.1em;padding:10px 12px;border-radius:9px}
  #navmenu a:hover{background:rgba(230,190,110,.12);color:#F4EDDC}
  #navmenu a.crisis{color:#E6A24E;font-weight:700}
  #navmenu .nm-util{display:flex;align-items:center;gap:12px;padding:10px 12px 4px;margin-top:6px;
    border-top:1px solid rgba(230,190,110,.18)}
  @media print{#navmenu-btn,#navmenu,.crisis-pill{display:none}}

/* ---- THE BLUEPRINT CAROUSEL. Ten chapters as tall posters on one
   drag-able shelf, full-bleed across the viewport: the centered chapter
   stands flat and lit, its neighbours tilt away into the void (transforms
   are painted per-frame by the rail script from real scroll position, so
   depth and drag can never disagree; with reduced motion the shelf lies
   flat). Type does the poster work: a ghosted numeral, the serif title,
   one honest line, the reading time. Labels ride beneath the cards the way
   years ride a timeline. A chosen card opens its chapter in the .bppanel
   below; the panel speaks the ledger register. ---- */
  .bprail-wrap{position:relative; width:100vw; margin-left:calc(50% - 50vw)}
  .bprail{--bpw:min(400px,76vw); display:flex; gap:clamp(18px,3vw,38px);
    overflow-x:auto; padding:26px 0 14px;
    scroll-snap-type:x mandatory; perspective:1300px; cursor:grab;
    scrollbar-width:none; -ms-overflow-style:none}
  .bprail::-webkit-scrollbar{display:none}
  /* centering headroom for the first and last cards rides as REAL flex
     spacers, not inline padding: browsers drop a scroll container's end
     padding from the scrollable area, which left the Seal unreachable -
     the snap always pulled back to the card before it. Spacers are content,
     so both ends measure in every engine. (The gap between spacer and card
     is deliberately part of the margin.) */
  .bprail::before,.bprail::after{content:"";
    flex:0 0 calc(50vw - var(--bpw)/2 - clamp(18px,3vw,38px))}
  .bprail.dragging{scroll-snap-type:none; cursor:grabbing; user-select:none}
  .bpslot{flex:0 0 var(--bpw); scroll-snap-align:center}
  .bpcard{position:relative; display:flex; flex-direction:column;
    aspect-ratio:5/7; padding:26px 26px 24px; overflow:hidden;
    border:1px solid var(--line); border-radius:18px; color:inherit;
    background:
      radial-gradient(120% 90% at 50% -10%, rgba(95,230,206,.13), transparent 55%),
      linear-gradient(165deg, rgba(16,32,26,.92), rgba(8,16,12,.96));
    box-shadow:0 24px 60px rgba(4,10,7,.55);
    will-change:transform,opacity; transform-style:preserve-3d}
  .bpcard .ghost{position:absolute; top:-14px; right:6px; pointer-events:none;
    font-family:var(--font-mono); font-weight:700;
    font-size:clamp(6rem,9vw,8.5rem); line-height:1; color:rgba(95,230,206,.07)}
  .bpcard .no{font-family:var(--font-mono); font-size:10px; letter-spacing:.22em;
    color:var(--muted)}
  .bpcard .ti{font-family:var(--font-display); font-weight:500;
    font-size:clamp(1.9rem,3.4vw,2.6rem); line-height:1.08; color:var(--ink);
    margin:auto 0 10px; text-wrap:balance}
  .bpcard .de{font-family:var(--font-display); font-style:italic;
    font-size:1.05rem; color:var(--ink-soft); margin:0 0 18px}
  .bpcard .rt{font-family:var(--font-mono); font-size:9.5px; letter-spacing:.14em;
    text-transform:uppercase; color:var(--green)}
  .bpcard:hover{border-color:var(--line); box-shadow:0 24px 60px rgba(4,10,7,.55),
    0 0 34px rgba(95,230,206,.1)}
  .bpcard:hover .ti{color:var(--green-l)}
  .bpcard.open{border-color:rgba(95,230,206,.45)}
  .bpcard.open .rt{color:var(--gold)}
  /* a card with a photo: the image rides cover-fit under a heavy top-and-
     bottom scrim so the type keeps its 4.5:1 ground; the ghost numeral
     stands down. A missing file simply never paints and the type-poster
     ground beneath carries the card unchanged. */
  .bpcard.has-photo{background:
      radial-gradient(140% 140% at 50% 50%, transparent 48%, rgba(12,23,18,.92) 96%),
      linear-gradient(180deg, rgba(8,16,12,.86) 0%, rgba(8,16,12,.32) 28%,
        rgba(8,16,12,.22) 52%, rgba(8,16,12,.9) 76%),
      var(--bp-photo, none) center/cover no-repeat,
      linear-gradient(165deg, rgba(16,32,26,.92), rgba(8,16,12,.96))}
  .bpcard.has-photo .ghost{display:none}
  /* the photos live HERE, not in inline style attributes: Netlify's HTML
     post-processing re-quotes attributes on deploy and corrupted url('...')
     inside a style attribute. CSS files pass through untouched. Paths are
     relative to this sheet in css/. */
  .bpcard[data-bp="founder"]{--bp-photo:url("../assets/blueprint/founder.jpg")}
  .bpcard[data-bp="gap"]{--bp-photo:url("../assets/blueprint/gap.jpg")}
  .bpcard[data-bp="whynow"]{--bp-photo:url("../assets/blueprint/whynow.jpg")}
  .bpcard[data-bp="vision"]{--bp-photo:url("../assets/blueprint/vision.jpg")}
  .bpcard[data-bp="philosophy"]{--bp-photo:url("../assets/blueprint/philosophy.jpg")}
  .bpcard[data-bp="layers"]{--bp-photo:url("../assets/blueprint/layers.jpg")}
  .bpcard[data-bp="journey"]{--bp-photo:url("../assets/blueprint/journey.jpg")}
  .bpcard[data-bp="exists"]{--bp-photo:url("../assets/blueprint/exists.jpg")}
  /* the seal's own gold ground would outrank .has-photo (same specificity,
     later in the sheet), so its photo form is declared explicitly */
  .bpcard.seal.has-photo{background:
      radial-gradient(140% 140% at 50% 50%, transparent 48%, rgba(12,23,18,.92) 96%),
      linear-gradient(180deg, rgba(8,16,12,.86) 0%, rgba(8,16,12,.32) 28%,
        rgba(8,16,12,.22) 52%, rgba(8,16,12,.9) 76%),
      var(--bp-photo, none) center/cover no-repeat,
      linear-gradient(165deg, rgba(16,32,26,.92), rgba(8,16,12,.96))}
  .bpcard[data-bp="closing"]{--bp-photo:url("../assets/blueprint/closing.jpg")}
  .bpcard.seal{background:
      radial-gradient(120% 90% at 50% -10%, rgba(230,198,106,.14), transparent 55%),
      linear-gradient(165deg, rgba(16,32,26,.92), rgba(8,16,12,.96))}
  .bpcard.seal .ghost{color:rgba(230,198,106,.1)}
  .bpcard.seal .no{color:var(--gold)}
  .bplabel{display:block; text-align:center; margin-top:18px;
    font-family:var(--font-mono); font-size:10px; letter-spacing:.2em;
    color:var(--muted); font-variant-numeric:tabular-nums}
  .bpslot.is-center .bplabel{color:var(--teal)}
  .bparrow{position:absolute; top:45%; transform:translateY(-50%); z-index:2;
    width:44px; height:44px; border-radius:50%; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    border:1px solid var(--line); background:var(--glass-2); color:var(--ink-soft);
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px)}
  .bparrow svg{width:18px; height:18px}
  .bparrow:hover{color:var(--green-l); border-color:var(--green)}
  .bparrow[disabled]{opacity:.25; cursor:default}
  .bparrow[disabled]:hover{color:var(--ink-soft); border-color:var(--line)}
  .bparrow.prev{left:clamp(10px,4vw,60px)}
  .bparrow.next{right:clamp(10px,4vw,60px)}

  /* the opened chapter: the Blueprint's own prose, restyled for this surface */
  .bppanel{border-bottom:1px solid var(--line-2); padding:36px 2px 32px; outline:none}
  .bppanel .bphead{margin:0 0 18px}
  .bppanel .bpnum{font-family:var(--font-mono); font-size:10px; letter-spacing:.22em;
    text-transform:uppercase; color:var(--gold)}
  .bppanel .bpti{font-family:var(--font-display); font-weight:500;
    font-size:clamp(1.6rem,3vw,2.2rem); line-height:1.12; color:var(--ink); margin:8px 0 6px}
  .bppanel .bpsub{font-family:var(--font-display); font-style:italic;
    font-size:1.08rem; color:var(--ink-soft); margin:0; max-width:40em}
  .bppanel h4{font-family:var(--font-display); font-weight:500; font-size:1.12rem;
    color:var(--ink); margin:24px 0 6px}
  .bppanel p{color:var(--ink-soft); font-size:.95rem; max-width:46em; margin:0 0 12px}
  .bppanel .lede{font-family:var(--font-display); font-size:1.28rem; line-height:1.5;
    color:var(--ink)}
  .bppanel .lede strong{color:var(--green-l); font-weight:500}
  .bppanel .muted{color:var(--muted)}
  .bppanel .serif{font-family:var(--font-display)}
  .bppanel .tag{font-family:var(--font-mono); font-size:.6rem; letter-spacing:.16em;
    text-transform:uppercase; color:var(--teal); display:inline-block; margin:0 0 6px}
  .bppanel .status{font-family:var(--font-mono); font-size:.62rem; letter-spacing:.14em;
    text-transform:uppercase; color:var(--gold)}
  /* each card is its own island with air around it, not a cell in a fused
     slab: the same skin language as the carousel posters, smaller. */
  .bppanel .grid{display:grid; gap:18px; margin:20px 0}
  .bppanel .grid.two{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
  .bppanel .grid.three{grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
  .bppanel .card{padding:18px 18px 16px;
    border:1px solid var(--line-2); border-radius:14px;
    background:linear-gradient(165deg, rgba(16,32,26,.72), rgba(8,16,12,.85));
    box-shadow:0 10px 28px rgba(4,10,7,.35)}
  .bppanel .card h4{margin:0 0 6px; font-size:1.02rem}
  .bppanel .card p{font-size:.87rem; margin:0 0 6px}
  .bppanel .card p:last-child{margin:0}
  .bppanel .panel{border:1px solid var(--line-2); background:var(--glass);
    padding:20px 22px 18px; margin:20px 0}
  .bppanel .panel h4{margin:0 0 8px}
  .bppanel .stats{display:flex; flex-wrap:wrap; gap:14px 34px; margin:20px 0}
  .bppanel .stat .n{font-family:var(--font-display); font-size:1.9rem; line-height:1.1;
    color:var(--teal)}
  .bppanel .stat .l{font-family:var(--font-mono); font-size:.6rem; letter-spacing:.1em;
    text-transform:uppercase; color:var(--muted)}
  .bppanel blockquote.quote{border-left:2px solid var(--terra); margin:26px 0;
    padding:4px 0 4px 20px; font-family:var(--font-display); font-style:italic;
    font-size:1.3rem; line-height:1.4; color:var(--ink)}
  .bppanel blockquote.quote cite{display:block; margin-top:10px; font-style:normal;
    font-family:var(--font-mono); font-size:.64rem; letter-spacing:.08em; color:var(--muted)}
  .bppanel ul.clean{list-style:none; padding:0; margin:14px 0 0}
  .bppanel ul.clean li{padding:10px 2px; border-bottom:1px solid var(--line-2);
    font-size:.9rem; color:var(--ink-soft)}
  .bppanel ul.clean li strong{color:var(--ink); font-weight:500}
  .bppanel .bpfoot{display:flex; align-items:center; gap:20px; margin:30px 0 0;
    font-family:var(--font-mono); font-size:.68rem; letter-spacing:.1em}
  .bppanel .bpfoot a{color:var(--taupe); border-bottom:1px solid var(--line-2);
    padding-bottom:1px}
  .bppanel .bpfoot a:hover{color:var(--green-l); border-color:var(--green)}
  .bpclose{font-family:var(--font-mono); font-size:.64rem; letter-spacing:.14em;
    text-transform:uppercase; color:var(--muted); background:none;
    border:1px solid var(--line); border-radius:999px; padding:9px 18px; cursor:pointer}
  .bpclose:hover{color:var(--green-l); border-color:var(--green)}
  .bppanel.seal{text-align:center}
  .bppanel.seal p{margin-left:auto; margin-right:auto}
  .bppanel.seal .bpstars{color:var(--muted); letter-spacing:.4em; font-size:1.1rem;
    margin:0 0 10px}
  .bppanel.seal .bpsub{max-width:38em; margin:0 auto 26px}
  .bppanel.seal .bpbtns{display:flex; justify-content:center; gap:14px;
    flex-wrap:wrap; margin:0 0 22px}
  .bppanel.seal .bpbtns .btn{margin:0}
  .bppanel.seal .bpfoot{justify-content:center}

/* ---- the homepage sky scrim: heavier than the content-page default.
   world.js injects its own #skyscrim rule after this sheet loads, so this
   selector carries body for specificity. The ledger is a reading surface:
   the clouds glow through, they never compete with the ink. ---- */
body #skyscrim{
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:linear-gradient(to top,
    rgba(12,23,18,.95) 0%, rgba(12,23,18,.86) 45%, rgba(12,23,18,.7) 100%);
}