:root{
    --paper:#F2F1ED;--paper-sub:#EAE8E2;--surface:#FBFAF7;
    --ink:#16181C;--ink-soft:#2C2F35;--ink-mute:#5B5F66;--ink-faint:#8C9098;
    --skout-ink-warm:#4A4640;
    --petrol:#1F4D47;--petrol-soft:#2A625A;
    --line:rgba(22,24,28,.12);--line-soft:rgba(22,24,28,.07);
    --serif:'Spectral',Georgia,'Times New Roman',serif;
    --sans:'Inter',-apple-system,system-ui,'Helvetica Neue',sans-serif;
    --mono:'JetBrains Mono',ui-monospace,monospace;
    --container:1140px;--pad-x:56px;--spine:108px;--section:140px;
  }
  @media(max-width:1079px){:root{--pad-x:36px;--spine:0px;--section:96px}}
  @media(max-width:719px){:root{--pad-x:22px;--section:72px}}
  *{margin:0;padding:0;box-sizing:border-box}
  html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
  body{background:var(--paper);color:var(--ink);font-family:var(--sans);
    font-size:16px;line-height:1.6}
  a{color:inherit;text-decoration:none}
  em{font-style:italic}

  /* margin spine — the identity device */
  .spine{position:fixed;top:0;left:0;width:var(--spine);height:100vh;
    border-right:1px solid var(--line-soft);display:flex;
    flex-direction:column;justify-content:space-between;
    align-items:center;padding:30px 0;font-family:var(--mono);
    font-size:12px;color:var(--ink-faint);letter-spacing:.04em;z-index:5}
  .spine .v{writing-mode:vertical-rl;transform:rotate(180deg);
    letter-spacing:.22em;text-transform:uppercase}
  .spine .dot{width:6px;height:6px;border-radius:50%;background:var(--petrol)}
  @media(max-width:1079px){.spine{display:none}}

  .shell{margin-left:var(--spine)}
  .wrap{max-width:var(--container);margin:0 auto;padding:0 var(--pad-x)}

  nav{padding:30px 0;border-bottom:1px solid var(--line-soft)}
  nav .wrap{display:flex;align-items:baseline;justify-content:space-between}
  .mark{font-family:var(--serif);font-size:23px;font-weight:600;
    letter-spacing:-.01em}
  .navlinks{display:flex;gap:34px}
  .navlinks a{font-size:14px;color:var(--ink-mute)}
  .navlinks a:hover{color:var(--ink)}
  @media(max-width:719px){.navlinks{display:none}}

  .eyebrow{display:flex;align-items:center;gap:14px;font-family:var(--mono);
    font-size:12px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--ink-mute);margin-bottom:46px}
  .eyebrow::before{content:"";width:30px;height:1px;background:var(--ink-faint)}

  .hero{padding:var(--section) 0 calc(var(--section) * .85)}
  h1{font-family:var(--serif);font-weight:500;
    font-size:clamp(44px,7.4vw,108px);line-height:1.04;
    letter-spacing:-.022em;max-width:15ch}
  h1 em{font-weight:500;color:var(--ink)}
  h1 .dot{color:var(--ink-faint)}
  .sub{margin-top:38px;font-size:19px;color:var(--ink-soft);
    max-width:50ch;line-height:1.58}
  .cta{display:inline-flex;align-items:center;gap:10px;margin-top:46px;
    background:var(--petrol);color:var(--paper);font-weight:500;
    font-size:15px;padding:15px 26px;border-radius:6px;
    transition:background .16s ease,transform .16s ease}
  .cta:hover{background:var(--petrol-soft);transform:translateY(-1px)}

  /* section rule + roman index */
  .rule{display:flex;align-items:baseline;gap:16px;
    padding-bottom:18px;border-bottom:1px solid var(--line);
    margin-bottom:54px}
  .rule .rn{font-family:var(--serif);font-style:italic;font-size:20px;color:var(--ink-faint)}
  .rule .lb{font-size:12px;font-weight:600;letter-spacing:.16em;
    text-transform:uppercase;color:var(--ink-mute)}
  section.block{padding:var(--section) 0;border-top:1px solid var(--line-soft)}
  .lede{font-family:var(--serif);font-size:clamp(26px,3.6vw,44px);
    font-weight:400;line-height:1.24;letter-spacing:-.012em;max-width:19ch}
  .lede em{font-style:italic;color:var(--ink)}
  .body{margin-top:30px;max-width:54ch;color:var(--ink-soft);font-size:18px;
    line-height:1.62}
  .body p+p{margin-top:22px}
  ul.plain{list-style:none;margin-top:8px;max-width:62ch}
  ul.plain li{padding:24px 0;border-top:1px solid var(--line);
    font-size:19px;color:var(--ink-soft);display:flex;gap:24px}
  ul.plain li:first-child{border-top:none}
  ul.plain li .n{font-family:var(--serif);font-style:italic;
    color:var(--ink-faint);font-size:18px;min-width:28px}
  ul.plain li b{color:var(--ink);font-weight:600}
  .after{margin-top:42px;font-family:var(--serif);font-size:23px;
    font-style:italic;color:var(--ink)}

  /* the guarantee plate — the page's visual anchor */
  .plate{margin-top:8px;border:1px solid var(--line);border-radius:12px;
    background:var(--surface);padding:56px;display:grid;
    grid-template-columns:auto 1fr;gap:48px;align-items:center}
  .plate .figs{display:flex;gap:40px}
  .plate .fig{text-align:center}
  .plate .fig .num{font-family:var(--serif);font-style:italic;
    font-weight:500;font-size:clamp(64px,10vw,120px);color:var(--petrol);
    line-height:.9}
  .plate .fig .cap{margin-top:14px;font-size:13px;color:var(--ink-mute);
    letter-spacing:.04em}
  .plate .txt{font-family:var(--serif);font-size:21px;line-height:1.5;
    color:var(--ink);max-width:34ch}
  .plate .txt b{font-weight:600}
  @media(max-width:719px){.plate{grid-template-columns:1fr;gap:34px;
    padding:36px}.plate .figs{gap:28px}}

  .close{padding:var(--section) 0;border-top:1px solid var(--line-soft)}
  .close .lede{margin-bottom:42px}

  /* mega-word footer — the signature */
  footer{border-top:1px solid var(--line);padding:80px 0 56px;
    overflow:hidden}
  .mega{font-family:var(--serif);font-weight:600;
    font-size:clamp(80px,16vw,220px);line-height:.86;
    letter-spacing:-.03em;color:var(--ink)}
  .mega .dot{color:var(--ink-faint)}
  .fmeta{margin-top:30px;display:flex;justify-content:space-between;
    font-family:var(--mono);font-size:12px;color:var(--ink-faint);
    letter-spacing:.04em}
  @media(max-width:719px){.fmeta{flex-direction:column;gap:12px}}

  /* progressive-enhancement reveal: visible by default; hidden only when JS on */
  html.js .reveal{opacity:0;transform:translateY(var(--skout-reveal-shift,14px))}
  html.js .reveal.in{opacity:1;transform:none;
    transition:opacity var(--skout-reveal-ms,420ms) var(--skout-reveal-ease,cubic-bezier(.2,.6,.2,1)),
               transform var(--skout-reveal-ms,420ms) var(--skout-reveal-ease,cubic-bezier(.2,.6,.2,1))}
  html.js .reveal[data-d="1"].in{transition-delay:var(--skout-reveal-stagger,70ms)}
  html.js .reveal[data-d="2"].in{transition-delay:calc(var(--skout-reveal-stagger,70ms)*2)}
  @media (prefers-reduced-motion: reduce){
    html.js .reveal,html.js .reveal.in{opacity:1;transform:none;transition:none}
    .spine .dot{animation:none!important}
  }

  /* generative editorial marks */
  .grid{position:absolute;inset:0;z-index:0;pointer-events:none;
    background-image:linear-gradient(var(--skout-grid-line,rgba(22,24,28,.04)) 1px,transparent 1px),
      linear-gradient(90deg,var(--skout-grid-line,rgba(22,24,28,.04)) 1px,transparent 1px);
    background-size:var(--skout-grid-cell,80px) var(--skout-grid-cell,80px);
    -webkit-mask-image:linear-gradient(180deg,#000 0,transparent 62%);
    mask-image:linear-gradient(180deg,#000 0,transparent 62%)}
  .hero{position:relative}
  .hero .wrap{position:relative;z-index:1}
  .xhair{display:inline-block;width:14px;height:14px;position:relative;
    vertical-align:middle;color:var(--ink-faint)}
  .xhair::before,.xhair::after{content:"";position:absolute;background:currentColor}
  .xhair::before{left:50%;top:0;width:1px;height:100%;transform:translateX(-.5px)}
  .xhair::after{top:50%;left:0;height:1px;width:100%;transform:translateY(-.5px)}
  .plate{position:relative}
  .brk{position:absolute;width:18px;height:18px;
    border-color:var(--skout-mark-ink,rgba(22,24,28,.18));
    border-style:solid;border-width:0}
  .brk.tl{top:-1px;left:-1px;border-top-width:1px;border-left-width:1px}
  .brk.tr{top:-1px;right:-1px;border-top-width:1px;border-right-width:1px}
  .brk.bl{bottom:-1px;left:-1px;border-bottom-width:1px;border-left-width:1px}
  .brk.br{bottom:-1px;right:-1px;border-bottom-width:1px;border-right-width:1px}
  ul.plain{position:relative}
  ul.plain .route{position:absolute;left:0;top:14px;bottom:14px;width:1px;
    background:var(--ink-faint);opacity:.5}
  ul.plain li{padding-left:26px}
  .route-node{position:absolute;left:-1.5px;bottom:30px;width:4px;height:4px;
    border-radius:50%;background:var(--petrol)}

  /* terminating spine pulse (3 cycles then holds) */
  @keyframes spinePulse{0%,100%{opacity:1}50%{opacity:.4}}
  .spine .dot{animation:spinePulse var(--skout-pulse-ms,3200ms) ease-in-out var(--skout-pulse-cycles,3)}

  /* guarantee plate orchestration: numerals land last */
  html.js .plate.in .num{opacity:0;transform:translateY(8px)}
  html.js .plate.in.lit .num{opacity:1;transform:none;
    transition:opacity 300ms var(--skout-reveal-ease,cubic-bezier(.2,.6,.2,1)) 90ms,
               transform 300ms var(--skout-reveal-ease,cubic-bezier(.2,.6,.2,1)) 90ms}

  /* "Noise→Booked" route diagram — the one sanctioned generative graphic */
  .diagram{position:relative;width:100%}
  .diagram svg{display:block;width:100%;height:auto;overflow:visible}
  .diagram .scatter{fill:var(--skout-ink-warm,#4A4640);opacity:.34}
  .diagram .fade{stroke:var(--skout-ink-warm,#4A4640);stroke-width:.75;
    fill:none;opacity:.5}
  .diagram .live{stroke:var(--ink-faint,#8C9098);stroke-width:1;fill:none}
  .diagram .way{fill:var(--paper,#F2F1ED);stroke:var(--ink,#16181C);
    stroke-width:1}
  .diagram .term{fill:var(--petrol,#1F4D47)}
  /* one petrol moment per viewport: petrol terminus only where the
     diagram is the subject (Method). On hero/mark instances it shares
     a viewport with the page CTA, so its terminus is neutral there. */
  .diagram--hero .term,.diagram--mark .term{fill:var(--ink-faint,#8C9098)}
  .diagram--hero{margin:0 0 6px}
  .diagram--hero svg{max-height:46vh}
  .diagram--method svg{max-height:none}
  .diagram--mark{max-width:280px;opacity:.9}
  .diagram--mark svg{max-height:120px}
  @media(max-width:719px){.diagram--hero svg{max-height:32vh}}

  /* /start page-specific (was inline in start.html before shared-asset
     extraction; restored here so all pages share one stylesheet) */
  .line{margin-top:30px;font-size:19px;color:var(--ink-soft);
    max-width:48ch;line-height:1.58}
  .guarantee{margin-top:26px;font-family:var(--serif);font-style:italic;
    font-size:22px;color:var(--ink);max-width:40ch;line-height:1.4}
  .embed{padding:48px 0 110px}
  #cal{position:relative;min-width:320px;height:680px;
    border:1px solid var(--line);border-radius:12px;
    background:var(--surface);overflow:hidden}
  .cal-fallback{height:100%;display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:14px;text-align:center;
    color:var(--ink-mute);padding:40px}
  .cal-fallback .b{font-family:var(--serif);font-size:23px;color:var(--ink)}
  .foot-min{border-top:1px solid var(--line-soft);padding:44px 0}
  .foot-min .wrap{display:flex;justify-content:space-between;
    align-items:baseline}
  .foot-min .meta{font-family:var(--mono);font-size:12px;
    color:var(--ink-faint);letter-spacing:.04em}
  @media(max-width:719px){#cal{height:560px}}