/* ---------------------------------------------------------------------------
   RICHMAP · section pages · shared chrome
   One type scale, one palette, one set of components for every page built on
   the process-animation engine. Linked AFTER each page's own <style>, so a
   page may still hold rules for parts only it has.
   Type:  IBM Plex Sans KR (text) + IBM Plex Mono (figures, labels, numbers)
--------------------------------------------------------------------------- */

:root {
    --ground: #070a0f;
    --panel: rgba(10, 14, 20, 0.82);
    --rule: rgba(255, 255, 255, 0.10);
    --rule-2: rgba(255, 255, 255, 0.05);
    --ink: #e8eef7;
    --muted: #8b98ac;
    --dim: rgba(87, 98, 115, 0.5);
    --dim-s: #5f6a7b;
    --copper: #e08a4c;
    --si: #93b4dd;
    --ui: "IBM Plex Sans KR", system-ui, -apple-system, "Malgun Gothic", sans-serif;
    --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
    /* one scale, stated once, so nothing drifts */
    --t-title: 21px; --t-lead: 15.5px; --t-body: 13px; --t-fine: 12px;
    --t-micro: 10.5px;
  }
  * { box-sizing: border-box; }
  html, body {
    height: 100%; margin: 0; overflow: hidden;
    background: var(--ground); color: var(--ink);
    font-family: var(--ui); font-size: var(--t-body);
    -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
    font-feature-settings: "tnum" 1;
  }
  canvas { display: block; touch-action: none; cursor: grab; }
  canvas:active { cursor: grabbing; }

  /* Type sat directly on the model and needed a shadow on every element to
     survive. One scrim does it once, and doubles as the depth cue the scene
     had no other way to get. */
  #scrim {
    position: fixed; inset: 0; z-index: 1; pointer-events: none;
    background:
      linear-gradient(to right, rgba(5,8,12,0.94) 0,
        rgba(5,8,12,0.72) 210px, rgba(5,8,12,0) 430px),
      linear-gradient(to bottom, rgba(5,8,12,0.86) 0,
        rgba(5,8,12,0.30) 128px, rgba(5,8,12,0) 230px),
      linear-gradient(to top, rgba(5,8,12,0.80) 0, rgba(5,8,12,0) 260px),
      radial-gradient(128% 96% at 52% 44%,
        rgba(0,0,0,0) 40%, rgba(2,4,7,0.62) 100%);
  }

  .lockup { position: fixed; top: 26px; left: 30px; z-index: 5; pointer-events: none; }
  .lockup .kicker {
    display: block; margin-bottom: 7px;
    font-family: var(--mono); font-size: var(--t-micro); font-weight: 500;
    letter-spacing: 0.20em; text-transform: uppercase; color: var(--copper);
  }
  .lockup h1 {
    margin: 0; font-size: var(--t-title); font-weight: 600;
    letter-spacing: -0.018em; line-height: 1.1;
  }
  .lockup p {
    margin: 8px 0 0; font-size: var(--t-fine); font-weight: 300;
    color: var(--muted); letter-spacing: 0.005em;
  }

  .xnav {
    position: fixed; left: 30px; top: 128px; z-index: 9;
    display: flex; align-items: stretch; gap: 0;
    border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
    font-family: var(--mono); font-size: var(--t-micro); font-weight: 500;
    letter-spacing: 0.09em; text-transform: uppercase;
  }
  .xnav a, .xnav span, .xnav button {
    padding: 7px 13px; text-decoration: none; color: var(--dim-s);
    white-space: nowrap; border: 0; background: none;
    font: inherit; letter-spacing: inherit; cursor: pointer;
    transition: color 0.14s, background 0.14s;
  }
  .xnav a + a, .xnav span + a, .xnav a + button {
    box-shadow: inset 1px 0 0 var(--rule-2);
  }
  .xnav a:hover, .xnav button:hover {
    color: var(--ink); background: rgba(255,255,255,0.045);
  }
  .xnav .cur { color: var(--copper); }
  .xnav button { color: var(--si); }

  /* an index, not a list of links: the number column is the spine */
  #steps {
    position: fixed; top: 182px; left: 30px; bottom: 232px; z-index: 5;
    width: 246px; overflow-y: auto; scrollbar-width: none;
  }
  #steps::-webkit-scrollbar { display: none; }
  #steps ol { list-style: none; margin: 0; padding: 0; counter-reset: s; }
  #steps li {
    counter-increment: s; position: relative;
    padding: 6px 8px 6px 32px; margin: 0;
    font-size: var(--t-fine); font-weight: 300; line-height: 1.4;
    color: var(--dim-s); cursor: pointer;
    box-shadow: inset 1px 0 0 var(--rule-2);
    transition: color 0.14s, box-shadow 0.14s;
  }
  #steps li::before {
    content: counter(s, decimal-leading-zero);
    position: absolute; left: 11px; top: 7px;
    font-family: var(--mono); font-size: 9.5px; font-weight: 500;
    color: var(--dim); letter-spacing: 0.04em;
  }
  #steps li:hover { color: var(--ink); box-shadow: inset 1px 0 0 var(--muted); }
  #steps li.on {
    color: var(--ink); font-weight: 500;
    box-shadow: inset 2px 0 0 var(--copper);
  }
  #steps li.on::before { color: var(--copper); }
  #steps li.done { color: #7e8a9c; }

  /* ------------------------------------------------------------- the readout
     Square, hairline-ruled, and led by a step figure - a panel meant to be
     read as an instrument rather than a card floating over a page. */
  #hud {
    position: fixed; left: 50%; bottom: 0; transform: translateX(-50%);
    z-index: 6; width: min(880px, calc(100vw - 60px));
    background: var(--panel); backdrop-filter: blur(14px) saturate(1.15);
    -webkit-backdrop-filter: blur(14px) saturate(1.15);
    border: 1px solid var(--rule); border-bottom: 0;
    border-radius: 3px 3px 0 0;
    padding: 15px 22px 13px;
    box-shadow: 0 -1px 0 rgba(224,138,76,0.30), 0 -24px 60px rgba(0,0,0,0.55);
  }
  #hud .row { display: flex; align-items: baseline; gap: 14px; }
  #hud .name {
    font-size: var(--t-lead); font-weight: 600; letter-spacing: -0.012em;
  }
  #stepNo {
    font-family: var(--mono); font-size: var(--t-micro); font-weight: 500;
    color: var(--copper); margin-right: 11px; letter-spacing: 0.12em;
  }
  #hud .spec {
    font-family: var(--mono); font-size: var(--t-fine); font-weight: 500;
    color: var(--si); margin-left: auto; white-space: nowrap;
    letter-spacing: 0.01em;
  }
  #hud .desc {
    margin-top: 7px; font-size: var(--t-body); font-weight: 300;
    color: #c3ccda; line-height: 1.62; max-width: 74ch;
  }
  #facts {
    display: grid; grid-template-columns: 58px 1fr; gap: 0 14px;
    margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--rule-2);
    font-size: var(--t-fine); line-height: 1.6;
    max-height: 24vh; overflow-y: auto; scrollbar-width: thin;
  }
  #facts.off { display: none; }
  #facts dt {
    font-family: var(--mono); font-size: 9.5px; font-weight: 500;
    letter-spacing: 0.11em; text-transform: uppercase;
    color: var(--copper); padding-top: 4px;
  }
  #facts dd {
    margin: 0 0 6px; padding-bottom: 6px; color: #b6c1d1; font-weight: 300;
    border-bottom: 1px solid var(--rule-2);
  }
  #facts dd:last-of-type { border-bottom: 0; margin-bottom: 0; }
  #facts dd .src {
    color: var(--dim-s); font-size: 9.5px; font-family: var(--mono);
    letter-spacing: 0.04em; white-space: nowrap;
  }
  #facts dd b { color: var(--ink); font-weight: 500; }
  #facts dd a { color: var(--si); text-underline-offset: 3px; }

  #moreBtn {
    margin-left: 12px; padding: 3px 9px; flex: none;
    border: 1px solid var(--rule); border-radius: 2px; background: transparent;
    color: var(--dim-s); font-family: var(--mono); font-size: 9.5px;
    letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer;
    transition: color 0.14s, border-color 0.14s;
  }
  #moreBtn:hover { color: var(--ink); border-color: var(--muted); }

  #bar { display: flex; align-items: center; gap: 12px; margin-top: 13px; }
  #bar button {
    width: 30px; height: 26px; flex: none;
    border: 1px solid var(--rule); border-radius: 2px;
    background: transparent; color: var(--muted);
    font-family: var(--mono); font-size: 11px; cursor: pointer;
    transition: color 0.14s, border-color 0.14s;
  }
  #bar button:hover { border-color: var(--copper); color: var(--copper); }
  #bar button:focus-visible { outline: 2px solid var(--copper); outline-offset: 2px; }

  /* the default range widget was the last stock component on screen */
  #scrub {
    flex: 1; height: 20px; cursor: pointer;
    -webkit-appearance: none; appearance: none; background: transparent;
  }
  #scrub::-webkit-slider-runnable-track {
    height: 1px; background: var(--rule);
  }
  #scrub::-moz-range-track { height: 1px; background: var(--rule); }
  #scrub::-webkit-slider-thumb {
    -webkit-appearance: none; width: 2px; height: 15px; margin-top: -7px;
    background: var(--copper); border: 0; border-radius: 0;
    box-shadow: 0 0 10px rgba(224,138,76,0.85);
  }
  #scrub::-moz-range-thumb {
    width: 2px; height: 15px; background: var(--copper);
    border: 0; border-radius: 0;
  }
  #scrub:focus-visible { outline: 1px solid var(--copper); outline-offset: 3px; }

  #hint {
    position: fixed; right: 30px; top: 28px; z-index: 5;
    font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.09em;
    text-transform: uppercase; color: var(--dim-s);
    text-align: right; line-height: 2; pointer-events: none;
  }
  #hint b { color: var(--dim-s); font-weight: 500; }

  /* Real photographs, freely licensed and credited. */
  #photo {
    position: fixed; right: 30px; top: 128px; z-index: 6;
    width: min(310px, 30vw);
    /* the readout owns the bottom of the frame - a panel tall enough to
       reach it slid underneath and took its licence credit with it */
    max-height: calc(100vh - 430px);
    display: flex; flex-direction: column;
    border: 1px solid var(--rule); border-radius: 3px; overflow: hidden;
    background: var(--panel);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    opacity: 0; transform: translateY(8px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
  }
  #photo.on { opacity: 1; transform: none; pointer-events: auto; }
  #photo img { display: block; width: 100%; height: auto;
    flex: 0 1 auto; min-height: 0; object-fit: cover; }
  #photo .cap {
    flex: 0 0 auto; padding: 10px 12px 11px;
    font-size: 11.5px; font-weight: 300; line-height: 1.5; color: #b6c1d1;
    border-top: 1px solid var(--rule-2);
  }
  #photo .cap b { color: var(--ink); font-weight: 500; }
  #photo .cred {
    display: block; margin-top: 6px; font-family: var(--mono);
    font-size: 9px; letter-spacing: 0.05em; color: var(--dim-s);
  }
  #photo .cred a { color: var(--dim-s); }
  #photo .tag {
    position: absolute; top: 9px; left: 9px;
    padding: 3px 8px; border-radius: 2px;
    background: rgba(5,8,12,0.82); border: 1px solid var(--rule);
    font-family: var(--mono); font-size: 9px; font-weight: 500;
    letter-spacing: 0.13em; text-transform: uppercase; color: var(--copper);
  }
  /* An absence does not get a dashed box in the best corner of the screen.
     It gets one quiet line against a hairline. */
  #noPhoto {
    position: fixed; right: 30px; top: 128px; z-index: 6;
    width: min(272px, 28vw); padding-left: 11px;
    /* the pages this sheet overrides drew a dashed box here; resetting only
       border-left would leave three of its four sides behind */
    border: 0; border-left: 1px solid var(--rule-2); border-radius: 0;
    background: none;
    font-size: 11px; font-weight: 300; line-height: 1.65; color: var(--dim-s);
    opacity: 0; transition: opacity 0.3s ease; pointer-events: none;
  }
  #noPhoto.on { opacity: 1; }

  #err {
    position: fixed; left: 16px; top: 16px; z-index: 20; max-width: 70vw;
    padding: 11px 15px; border: 1px solid #7d3b2a; border-radius: 2px;
    background: #1a0f0c; color: #e8b9a4;
    font-family: var(--mono); font-size: 12px; line-height: 1.5;
  }

  @media (max-width: 1180px) {
    #photo, #noPhoto { position: static; width: auto; margin: 11px 0 0; }
    #photo { transform: none; }
    #photo img { max-height: 28vh; object-fit: cover; }
    #hud { max-height: 74vh; overflow-y: auto; }
  }
  @media (max-width: 860px) {
    :root { --t-title: 16px; --t-lead: 14px; --t-body: 12.5px; --t-fine: 11.5px; }
    #steps, #hint { display: none; }
    #scrim { background: linear-gradient(to top,
      rgba(5,8,12,0.86) 0, rgba(5,8,12,0) 300px); }
    .lockup { top: 14px; left: 16px; }
    .lockup p { display: none; }
    .xnav { left: 16px; top: 62px; font-size: 9.5px; }
    .xnav a, .xnav span, .xnav button { padding: 6px 9px; }
    #hud {
      left: 0; right: 0; bottom: 0; width: auto;
      transform: none; border-radius: 0; border-left: 0; border-right: 0;
      padding: 12px 15px 11px;
    }
    #facts { grid-template-columns: 50px 1fr; }
  }