/* index.css - The landing page: the calliper hero, the pyramid and the ways in.
   Page scoped. Only this page loads it, so a phone opening Capture never parses
   the landing page hero. Shared chrome is assets/base.css; colours are ONLY ever
   tokens from assets/tokens.css. */

/* ================================================================
   Kalibre landing page · dark surface
   The app itself stays linen. This page is the front door, and the
   tonal shift is deliberate: you arrive somewhere, then you go in.
   Every token below is redefined on this page ONLY. tokens.css is
   untouched, and the print block puts the light values back so the
   loop diagram still prints on white for the September deck.
   ================================================================ */
body.kal-dark{
  --page:#1A1917;         /* warm near black. Never #000, never a cold grey. */
  --card:#2A2823;
  --baseline:#403D37;
  --ink-1:#F2EDE6;
  --ink-2:#A9A39A;
  --ink-3:#8C877F;
  --wash:#221F1C;
  /* Flat surface on the body. The gradient belongs to the hero alone: a fixed
     attachment gradient over a long page is a known repaint problem on iOS Safari
     and it buys nothing once you have scrolled past the fold. */
  background:#1A1917;
}

/* ---------------- hero ---------------- */
.kal-hero{
  --kal-paper:#F2EDE6; --kal-muted:#A9A39A; --kal-steel:#8C877F; --kal-red:var(--kz-red);
  position:relative;overflow:hidden;isolation:isolate;color:var(--kal-paper);
  /* lever 3 · warm gradient. Kidzink charcoal is warm, so a cold black beside it
     reads as a mistake. */
  background:linear-gradient(180deg,#201F1D 0%,#1A1917 55%,#141312 100%);
}
/* lever 1 · a pool of light, so the instrument sits IN light rather than ON black */
.kal-hero__glow{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(58% 62% at 50% 62%,
    rgba(255,240,225,.11) 0%, rgba(228,60,47,.055) 42%, rgba(0,0,0,0) 72%);}
/* lever 2 · drawing board grid. You should only ever notice its absence. */
.kal-hero__grid{position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(242,237,230,.055) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(242,237,230,.055) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(70% 70% at 50% 55%,#000 0%,transparent 78%);
          mask-image:radial-gradient(70% 70% at 50% 55%,#000 0%,transparent 78%);}

.kal-hero__inner{position:relative;z-index:1;max-width:1120px;margin:0 auto;padding:26px 40px 72px}

.kal-nav{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.kal-mark{display:flex;align-items:baseline;gap:10px;font-size:21px;font-weight:700;letter-spacing:-.3px;text-decoration:none}
.kal-mark__k{color:var(--kz-red)}
.kal-mark__n{font-weight:400;color:var(--kal-paper);opacity:.94}
.kal-links{display:flex;align-items:center;gap:26px;flex-wrap:wrap;justify-content:flex-end}
.kal-links a{color:#C9C3BA;text-decoration:none;font-size:15px;transition:color .18s}
.kal-links a:hover,.kal-links a:focus-visible{color:var(--kal-paper)}
.kal-enter{background:var(--kz-red);color:#fff;border:0;border-radius:999px;padding:13px 30px;
  font:600 15px/1 inherit;cursor:pointer;text-decoration:none;display:inline-block;
  box-shadow:0 8px 22px -8px rgba(228,60,47,.75);transition:transform .16s ease,box-shadow .16s ease}
.kal-enter:hover{transform:translateY(-1px);box-shadow:0 12px 28px -8px rgba(228,60,47,.9);color:#fff}
.kal-enter:focus-visible{outline:2px solid var(--kal-paper);outline-offset:3px}

.kal-stage{text-align:center;padding-top:42px}
.kal-h1{font-size:clamp(46px,7.4vw,92px);font-weight:300;letter-spacing:-2px;line-height:1.02}
.kal-h1 b{font-weight:600}
.kal-sub{max-width:620px;margin:20px auto 0;font-size:17px;line-height:1.62;color:var(--kal-muted);font-weight:300}

.kal-tool{margin:34px auto 0;max-width:560px}
.kal-tool svg{width:100%;height:auto;display:block;overflow:visible}
.kal-tick{stroke:var(--kal-steel);stroke-width:1.2;opacity:.55}
.kal-tick--major{stroke:#BDB6AC;opacity:.85;stroke-width:1.4}
.kal-span,.kal-cap{stroke:var(--kz-red);stroke-width:2.2;stroke-linecap:round;opacity:0;
  animation:kal-span-in .6s ease .95s forwards}
@keyframes kal-span-in{to{opacity:1}}
/* lever 4 · motion. ONCE, on load. It must never loop. */
#kal-slider{transform:translateX(96px);animation:kal-close 1.5s cubic-bezier(.22,.9,.24,1) .25s forwards}
@keyframes kal-close{from{transform:translateX(96px)}to{transform:translateX(0)}}

.kal-readout{margin-top:26px;display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap}
.kal-digits{font-family:'Courier New',monospace;font-size:30px;font-weight:700;letter-spacing:3px;
  background:rgba(242,237,230,.05);border:1px solid rgba(242,237,230,.1);border-radius:8px;padding:8px 18px}
.kal-lbl{font-size:12px;letter-spacing:1.6px;text-transform:uppercase;color:var(--kal-steel)}

/* ---------------- shared section chrome ---------------- */
main{max-width:1120px;margin:0 auto;padding:0 40px 72px}
.kal-sec{padding-top:56px;scroll-margin-top:20px}
.kal-sec + .kal-sec{border-top:1px solid var(--baseline)}
.kal-sec h2{font-size:22px;font-weight:700;letter-spacing:-.02em;color:var(--ink-1)}

/* ---------------- the loop, drawn as one flowing ribbon ----------------
   A single continuous path with the seven stages sitting on it, rather than
   boxes joined by straight arrows. Node coordinates are generated by
   evaluating the ribbon's own bezier segments, so a dot cannot drift off the
   line when the curve is adjusted. See tools/gen_loop.py. */
.loopfig{margin-top:26px}
.loopfig-wide{overflow-x:auto;max-width:1120px}
.loop-wide{min-width:820px}
.loop{width:100%;height:auto;display:block}
.loop-tall{display:none}
/* The narrow variant has 264 units for a label rather than the 600 the wide one
   enjoys, so the type steps down a notch. */
.loop-tall .lp-t{font-size:14px}
.loop-tall .lp-d{font-size:11.5px}
.lp-glow{fill:none;stroke:var(--kz-red);stroke-width:12;opacity:.06;stroke-linecap:round}
.lp-ribbon{fill:none;stroke:#4E4B44;stroke-width:2.4;stroke-linecap:round}
.lp-return{fill:none;stroke:var(--kz-red);stroke-width:4.5;stroke-linecap:round}
.lp-node circle{fill:var(--card);stroke:var(--baseline);stroke-width:2}
.lp-num{fill:var(--kz-red);font-size:12px;font-weight:700}
/* the phase key, above the ribbon rather than inside it */
.lp-key{list-style:none;display:flex;flex-wrap:wrap;gap:10px 34px;margin:0 0 6px;padding:0}
.lp-key li{display:flex;align-items:baseline;gap:8px}
.lp-key .lp-k-n{font-size:11px;font-weight:700;color:var(--kz-red);letter-spacing:.04em;
  border:1px solid var(--baseline);border-radius:999px;padding:2px 8px;white-space:nowrap}
.lp-key b{font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-1)}
.lp-key .lp-k-d{font-size:11.5px;color:var(--ink-2)}
@media (max-width:640px){ .lp-key{gap:8px 0;flex-direction:column} }
.lp-t{fill:var(--ink-1);font-weight:600;font-size:15px}
.lp-d{fill:var(--ink-2);font-size:12.5px}
.lp-rl{fill:var(--ink-1);font-weight:600;font-size:13px}
.lp-rd{fill:var(--ink-2);font-size:12px}

/* ---------------- what is in here ---------------- */
.waylist{margin:14px 0 0 0;padding:0;list-style:none;max-width:78ch}
.waylist li{font-size:13px;color:var(--ink-2);margin-bottom:9px}
/* Paper text with a red hairline underneath. It reads as a link without spending
   another block of red on the page. */
.waylist a{color:var(--ink-1);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:rgba(228,60,47,.65)}
.waylist a:hover{text-decoration-color:var(--kz-red)}
.waylist code{font-size:12px;background:var(--wash);border-radius:5px;padding:1px 5px;color:var(--ink-1)}

@media (max-width:900px){
  .loop-wide,.loopfig-wide{display:none}
  .loop-tall{display:block;max-width:460px;margin:0 auto}
}
@media (max-width:640px){
  .kal-hero__inner{padding:20px 20px 56px}
  main{padding:0 20px 56px}
  .kal-links{gap:14px;row-gap:10px}
  .kal-links a{font-size:14px}
  .kal-enter{padding:11px 24px}
  .kal-nav{gap:14px}
  .kal-stage{padding-top:30px}
  .kal-sub{font-size:16px}
}

/* Anyone who has told their machine to stop moving things gets the end state at once,
   rather than a calliper that never closes. */
@media (prefers-reduced-motion:reduce){
  #kal-slider{animation:none;transform:translateX(0)}
  .kal-span,.kal-cap{animation:none;opacity:1}
  .kal-enter{transition:none}
  body.kal-dark{background-attachment:scroll}
}

/* ---------------- A4, because the diagram is wanted in the September deck ----------------
   The page is dark on screen and white on paper. Putting the light tokens back is all
   it takes, because every mark in the diagram is drawn from a variable. */
@page{size:A4;margin:14mm}
@media print{
  body.kal-dark{
    /* --page is the halo colour behind the phase labels, so on paper it must be
       the paper itself, not linen, or each label sits in a faint band. */
    --page:#FFFFFF; --card:#FFFFFF; --baseline:#D6CEC4;
    --ink-1:#2E2D2C; --ink-2:#6B6660; --ink-3:#7A746C; --wash:#FAF7F3;
    background:#fff;
  }
  .kal-hero,.ways{display:none !important}
  main{padding:0;max-width:none}
  .kal-sec{padding-top:0;border-top:0}
  .loopfig-wide{display:block !important;overflow:visible;max-width:none}
  .loop-wide{display:block !important;min-width:0}
  .loop-tall{display:none !important}
  .loopsec{margin-top:20px}
  .loopfig{break-inside:avoid;page-break-inside:avoid}
  /* A4 gives the diagram about 182mm, so every label lands smaller on paper than on a
     laptop. These are the largest sizes the ribbon still carries without collisions. */
  .lp-glow{display:none}          /* a 7 percent red wash reads as a printing fault */
  .lp-ribbon{stroke:#B9B1A6;stroke-width:2}
  .lp-num{font-size:13px}
  .lp-t{font-size:17px}
  .lp-d{font-size:13.5px}
  .lp-rl{font-size:14.5px}
  .lp-rd{font-size:13px}
  .lp-key{gap:8px 26px;margin-bottom:4mm}
  .lp-key b{font-size:12px}
  .lp-key .lp-k-d{font-size:11.5px}
  a{color:inherit;text-decoration:none}
}

/* ---------- the pyramid, spliced in from pyramid_section.html ---------- */
/* ---------- the pyramid section ---------- */
.pyrsec { margin-top: 20px; }
.pyr-wrap { display: flex; gap: 8px 44px; align-items: center; flex-wrap: wrap; }
.pyr-head { flex: 1 1 210px; min-width: 210px; }
.pyr-title { font-size: clamp(22px, 3vw, 30px); font-weight: 700; letter-spacing: -0.015em; color: var(--ink-1); margin: 0; line-height: 1.2; }
.pyr-fig { flex: 1 1 380px; max-width: 620px; margin: 0; }
.pyr-fig svg { width: 100%; height: auto; display: block; }
.pyr-fig svg text { font-family: inherit; }
/* the accessible twin: the same six tiers as plain text, quiet, and the only place
   the detail lives now that the drawing carries names alone */
.pyr-list { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 11.5px; color: var(--ink-3); }
.pyr-list li b { color: var(--ink-2); font-weight: 600; }
@media (max-width: 760px) { .pyr-wrap { gap: 18px; } }
@media print { .pyrsec { break-inside: avoid; } .pyr-wrap { align-items: flex-start; } }