:root{
    --bg:#0E3654;
    --bg-deep:#082943;
    --bg-panel:#123f61;
    --line:#EAF2F8;
    --line-dim:rgba(234,242,248,0.55);
    --line-dimmer:rgba(234,242,248,0.28);
    --line-faint:rgba(234,242,248,0.09);
    --amber:#FFB020;
    --amber-dim:rgba(255,176,32,0.35);
    --cyan:#6EE7DE;
    --cyan-dim:rgba(110,231,222,0.35);
    --paper:#F1ECDF;
    --paper-line:#c9c0a8;
    --ink:#1C2430;
    --ink-dim:#54606f;
    --font-display:'IBM Plex Sans', system-ui, sans-serif;
    --font-body:'IBM Plex Serif', Georgia, serif;
    --font-mono:'IBM Plex Mono', ui-monospace, monospace;
    --maxw:760px;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background-color:var(--bg);
    background-image:
      linear-gradient(var(--line-faint) 1px, transparent 1px),
      linear-gradient(90deg, var(--line-faint) 1px, transparent 1px);
    background-size:42px 42px;
    color:var(--line);
    font-family:var(--font-body);
    line-height:1.65;
    font-size:17px;
  }
  h1,h2,h3,.eyebrow,.tb-field,.toggle-btn,.pill,.nav-tick,.ladder__label,.node-label,figcaption .cap-label{
    font-family:var(--font-display);
  }
  a{color:var(--amber);}
  a:hover{color:var(--cyan);}
  ::selection{background:var(--amber);color:var(--bg-deep);}

  :focus-visible{
    outline:2px solid var(--amber);
    outline-offset:3px;
  }

  img,svg{max-width:100%;height:auto;display:block;}

  .eyebrow{
    font-size:12px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--amber);
    font-weight:600;
  }

  /* ---------- Back link (return to the site) ---------- */
  .back-link{
    position:fixed;
    left:18px;top:16px;
    z-index:60;
    font-family:var(--font-mono);
    font-size:12px;
    letter-spacing:0.06em;
    color:var(--amber);
    text-decoration:none;
    border:1px solid var(--line-dimmer);
    border-radius:3px;
    padding:7px 11px;
    background:rgba(8,41,67,0.7);
    transition:border-color .2s, color .2s;
  }
  .back-link:hover{border-color:var(--amber);color:var(--line);}
  @media (max-width:900px){
    .back-link{position:static;display:inline-block;margin:14px 0 0 24px;}
  }

  /* ---------- Sheet nav (side index) ---------- */
  .sheet-nav{
    position:fixed;
    right:18px;
    top:50%;
    transform:translateY(-50%);
    z-index:50;
    display:flex;
    flex-direction:column;
    gap:12px;
  }
  .nav-tick{
    width:32px;height:32px;
    border-radius:3px;
    border:1px solid var(--line-dimmer);
    background:rgba(8,41,67,0.6);
    color:var(--line-dim);
    font-size:11px;
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;
    transition:border-color .2s, color .2s, background .2s;
  }
  .nav-tick:hover{border-color:var(--amber);color:var(--line);}
  .nav-tick.active{border-color:var(--amber);color:var(--bg-deep);background:var(--amber);}
  @media (max-width:900px){ .sheet-nav{display:none;} }

  /* ---------- Layout shells ---------- */
  main{max-width:1080px;margin:0 auto;padding:0 24px;}
  .sheet{padding:96px 0 72px;border-bottom:1px solid var(--line-faint);}
  .sheet:last-of-type{border-bottom:none;}
  .prose{max-width:var(--maxw);}
  .prose p{margin:0 0 1.1em;}
  .prose p:last-child{margin-bottom:0;}

  .sheet{opacity:0;transform:translateY(14px);transition:opacity .6s ease, transform .6s ease;}
  .sheet.is-visible{opacity:1;transform:none;}
  @media (prefers-reduced-motion:reduce){
    .sheet{opacity:1;transform:none;transition:none;}
  }

  /* ---------- Title block (drawing stamp) ---------- */
  .sheet-header{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:20px;
    flex-wrap:wrap;
    border-bottom:2px solid var(--line);
    padding-bottom:14px;
    margin-bottom:36px;
  }
  .sheet-header__label{
    font-family:var(--font-mono);
    font-size:13px;
    letter-spacing:0.08em;
    color:var(--amber);
    white-space:nowrap;
  }
  .sheet-header h2{
    font-family:var(--font-display);
    font-weight:700;
    font-size:clamp(22px,3vw,30px);
    margin:0;
    color:var(--line);
    letter-spacing:0.01em;
  }

  /* ---------- Hero ---------- */
  .hero{
    max-width:1080px;
    margin:0 auto;
    padding:64px 24px 40px;
  }
  .titleblock{
    border:1.5px solid var(--line);
    padding:22px 26px;
    display:grid;
    grid-template-columns:1fr;
    gap:14px;
    background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
  }
  .titleblock h1{
    font-family:var(--font-display);
    font-weight:700;
    font-size:clamp(38px,7vw,64px);
    letter-spacing:0.01em;
    margin:6px 0 4px;
    color:var(--line);
  }
  .titleblock .subtitle{
    font-family:var(--font-body);
    font-style:italic;
    font-size:18px;
    color:var(--line-dim);
    max-width:640px;
    margin:0;
  }
  .tb-fields{
    display:flex;
    flex-wrap:wrap;
    gap:0;
    border-top:1px solid var(--line-dimmer);
    margin-top:10px;
  }
  .tb-field{
    font-family:var(--font-mono);
    font-size:12px;
    color:var(--line-dim);
    padding:10px 20px 0 0;
    margin-right:20px;
    border-right:1px solid var(--line-faint);
    letter-spacing:0.02em;
  }
  .tb-field:last-child{border-right:none;}
  .tb-field b{color:var(--line);font-weight:600;display:block;font-size:13px;margin-top:2px;}
  #rev-value{color:var(--amber);}

  .hero-figure{margin:28px 0 6px;}
  .hero-toolbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:12px;
    margin-bottom:14px;
  }
  .toggle-btn{
    font-family:var(--font-mono);
    font-size:13px;
    letter-spacing:0.03em;
    color:var(--bg-deep);
    background:var(--amber);
    border:none;
    border-radius:3px;
    padding:10px 16px;
    cursor:pointer;
    transition:background .2s, transform .1s;
  }
  .toggle-btn:hover{background:var(--cyan);}
  .toggle-btn:active{transform:scale(0.98);}
  .hero-note{
    font-family:var(--font-mono);
    font-size:12px;
    color:var(--line-dim);
    max-width:340px;
    text-align:right;
  }
  figcaption{
    font-family:var(--font-mono);
    font-size:12.5px;
    color:var(--line-dim);
    margin-top:10px;
    line-height:1.5;
  }
  figcaption .cap-label{color:var(--amber);font-weight:600;}

  /* ---------- Objectives box ---------- */
  .objectives{
    border:1px dashed var(--line-dimmer);
    padding:20px 22px;
    margin-top:26px;
  }
  .objectives .eyebrow{margin-bottom:10px;display:block;}
  .objectives ul{margin:0;padding-left:20px;}
  .objectives li{margin-bottom:8px;font-size:15.5px;}
  .objectives li:last-child{margin-bottom:0;}

  /* ---------- Diagram wrapper ---------- */
  .diagram{
    border:1px solid var(--line-faint);
    background:rgba(255,255,255,0.015);
    padding:24px;
    margin:30px 0;
  }

  /* ---------- Schedule table (comparison) ---------- */
  .schedule{
    width:100%;
    border-collapse:collapse;
    margin:26px 0;
    font-size:15px;
  }
  .schedule caption{
    text-align:left;
    font-family:var(--font-mono);
    font-size:12px;
    letter-spacing:0.08em;
    color:var(--amber);
    text-transform:uppercase;
    margin-bottom:10px;
  }
  .schedule th, .schedule td{
    text-align:left;
    border:1px solid var(--line-faint);
    padding:12px 14px;
    vertical-align:top;
  }
  .schedule th{
    font-family:var(--font-mono);
    font-size:12.5px;
    letter-spacing:0.04em;
    color:var(--line);
    background:rgba(255,255,255,0.03);
    width:190px;
  }
  .schedule td{color:var(--line-dim);}
  .schedule tr:last-child td, .schedule tr:last-child th{background:rgba(255,176,32,0.06);}
  .schedule tr:last-child th{color:var(--amber);}
  .schedule tr:last-child td{color:var(--line);}

  /* ---------- Note callout ---------- */
  .note{
    display:flex;
    gap:16px;
    border-left:3px solid var(--amber);
    background:rgba(255,176,32,0.05);
    padding:16px 18px;
    margin:28px 0;
    font-size:15px;
  }
  .note__badge{
    font-family:var(--font-mono);
    font-size:12px;
    color:var(--bg-deep);
    background:var(--amber);
    border-radius:2px;
    padding:2px 8px;
    height:20px;
    white-space:nowrap;
    font-weight:600;
  }
  .note p{margin:0;color:var(--line-dim);}

  /* ---------- Ladder (maturity steps) ---------- */
  .ladder{
    display:grid;
    grid-template-columns:1fr auto 1fr auto 1fr;
    gap:10px;
    align-items:stretch;
    margin:30px 0;
  }
  @media (max-width:760px){
    .ladder{grid-template-columns:1fr;}
    .ladder__arrow{transform:rotate(90deg);margin:0 auto;}
  }
  .ladder__step{
    border:1px solid var(--line-dimmer);
    padding:18px;
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .ladder__step.step-3{border-color:var(--amber);box-shadow:0 0 0 1px var(--amber-dim) inset;}
  .ladder__icon{width:34px;height:34px;}
  .ladder__label{
    font-size:13px;
    letter-spacing:0.06em;
    text-transform:uppercase;
    font-weight:600;
    color:var(--line);
  }
  .step-3 .ladder__label{color:var(--amber);}
  .ladder__step p{margin:0;font-size:14.5px;color:var(--line-dim);}
  .ladder__arrow{
    align-self:center;
    color:var(--line-dimmer);
    font-size:20px;
  }

  /* ---------- Value gauges ---------- */
  .gauges{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px;
    margin:30px 0;
  }
  @media (max-width:760px){ .gauges{grid-template-columns:repeat(2,1fr);} }
  .gauge{
    border:1px solid var(--line-dimmer);
    padding:18px 14px;
    text-align:center;
  }
  .gauge__value{
    font-family:var(--font-mono);
    font-size:32px;
    font-weight:600;
    color:var(--amber);
    display:block;
    line-height:1;
  }
  .gauge__label{
    font-size:12.5px;
    color:var(--line-dim);
    display:block;
    margin-top:10px;
    line-height:1.4;
  }
  .gauge__source{
    font-family:var(--font-mono);
    font-size:10px;
    color:var(--line-dimmer);
    display:block;
    margin-top:8px;
  }

  /* ---------- Loop diagram node labels ---------- */
  .node-label{font-size:11px;fill:var(--line);letter-spacing:0.04em;}
  .node-sub{font-size:9px;fill:var(--line-dim);font-family:var(--font-mono);}

  /* ---------- Pulsing marker (drift chart "now" indicator) ---------- */
  .pulse-dot{
    transform-box:fill-box;
    transform-origin:center;
    animation:pulseDot 1.8s ease-in-out infinite;
  }
  @keyframes pulseDot{
    0%,100%{opacity:1;transform:scale(1);}
    50%{opacity:0.4;transform:scale(1.7);}
  }
  @media (prefers-reduced-motion:reduce){
    .pulse-dot{animation:none;}
  }

  /* ---------- Paper / reference sheet ---------- */
  .sheet-refs{
    background:var(--paper);
    color:var(--ink);
    margin-top:0;
    padding-left:0;padding-right:0;
  }
  .sheet-refs > .refs-inner{max-width:1080px;margin:0 auto;padding:96px 24px 96px;}
  .sheet-refs .sheet-header{border-bottom-color:var(--ink);}
  .sheet-refs .sheet-header h2{color:var(--ink);}
  .sheet-refs .sheet-header__label{color:#8a5a00;}
  .refs{list-style:none;margin:0;padding:0;font-family:var(--font-body);font-size:15px;column-count:1;}
  .refs li{
    padding-left:2em;
    text-indent:-2em;
    margin-bottom:16px;
    color:var(--ink);
  }
  .refs li i{font-style:italic;}
  .refs a{color:#8a5a00;word-break:break-word;}
  .refs a:hover{color:#4a3200;}

  footer{
    max-width:1080px;margin:0 auto;padding:40px 24px 80px;
    font-family:var(--font-mono);font-size:12.5px;color:var(--line-dim);
  }

  /* utility */
  .visually-hidden{
    position:absolute!important;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;
  }

  /* ---------- Print ---------- */
  @media print{
    :root{
      --bg:#ffffff; --bg-deep:#ffffff; --bg-panel:#ffffff;
      --line:#1C2430; --line-dim:#3a4452; --line-dimmer:#6b7280; --line-faint:#d8dce1;
      --amber:#8a5a00; --amber-dim:rgba(138,90,0,0.2);
      --cyan:#0f6b64; --cyan-dim:rgba(15,107,100,0.2);
      --paper:#ffffff; --ink:#1C2430;
    }
    body{background-image:none;color:var(--ink);font-size:12.5pt;}
    .sheet-nav, .toggle-btn, .back-link{display:none !important;}
    .hero-note{text-align:left;}
    .sheet{
      opacity:1 !important;
      transform:none !important;
      transition:none !important;
      page-break-inside:avoid;
      break-inside:avoid;
      padding:32px 0;
    }
    .diagram, .schedule, .ladder, .gauges, .objectives, .titleblock, .note, .tb-fields{
      break-inside:avoid;
      page-break-inside:avoid;
    }
    .sheet-refs{page-break-before:always;background:#fff;}
    a, .refs a{color:#000;text-decoration:underline;}
    .pulse-dot{animation:none;}
  }