/* ============ DESIGN TOKENS ============ */
  :root{
    /* color */
    --blue: #1E90FF;
    --blue-deep: #0F3D73;
    --ink: #142436;
    --ink-soft: #4B5A6B;
    --paper: #FAFAF7;
    --cream: #F4ECD7;
    --gold: #C7A23A;
    --gold-soft: #E3D4A8;
    --mint: #E7FBF1;
    --sage: #C3DEDB;
    --line: #E3E1D8;

    /* spacing scale */
    --sp-1: 8px;
    --sp-2: 16px;
    --sp-3: 24px;
    --sp-4: 32px;
    --sp-6: 48px;
    --sp-8: 64px;
    --sp-12: 96px;

    /* type */
    --font-display: 'Fraunces', Georgia, serif;
    --font-body: 'Inter', sans-serif;

    --container: 1140px;
  }

  *{ box-sizing: border-box; }
  html{ scroll-behavior: smooth; }
  body{
    margin: 0;
    font-family: var(--font-body);
    color: var(--ink);
    background: var(--paper);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
  }
  img{ max-width: 100%; display: block; }

  @media (prefers-reduced-motion: reduce){
    *, *::before, *::after{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  }

  /* ============ LAYOUT HELPERS ============ */
  .container{
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--sp-3);
  }
  .section{
    padding-block: var(--sp-12);
  }
  .section--alt{
    background: var(--mint);
  }
  .section--ink{
    background: var(--ink);
    color: var(--paper);
  }
  .section-head{
    max-width: 780px;
    margin: 0 auto var(--sp-6);
    text-align: center;
  }
  .section-head p{ margin-left: auto; margin-right: auto; }
  .eyebrow{
    display: block;
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: var(--sp-2);
  }
  /* where the label introduces a block, a hairline runs the width of it, so
     the label is the head of something rather than a floating tag */
  .detrail-head .eyebrow,
  .section-head--flush .eyebrow{
    border-top: 1px solid var(--line);
    padding-top: 10px;
  }
  /* a centred head has nothing to rule against, so it keeps the label alone */
  .section-head .eyebrow{ margin-bottom: 10px; }
  .section--ink .eyebrow{ color: var(--gold-soft); }
  h1, h2, h3{
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.2;
    margin: 0;
    letter-spacing: 0.01em;
  }
  h1{ font-size: clamp(2.2rem, 5vw, 3.4rem); }
  h2{ font-size: clamp(1.5rem, 2.6vw, 2.1rem); text-transform: none; letter-spacing: 0; line-height: 1.18; }
  h3{ font-size: 1.25rem; text-transform: none; letter-spacing: 0; font-family: var(--font-body); font-weight: 700; }
  p{ margin: 0 0 var(--sp-2) 0; color: var(--ink-soft); max-width: 640px; }
  .section--ink p{ color: #D7DEE6; }
  .lede{
    font-size: 1.1rem;
    max-width: 640px;
  }

  .linkedin-btn {
  display: inline-block;
  margin-top: 12px;
  padding: 8px 16px;
  background: #0A66C2;
  color: white;
  text-decoration: none;
  font-weight: 600;
  transition: opacity 0.2s ease;
}

.linkedin-btn:hover {
  opacity: 0.9;
}

  /* ============ BUTTONS ============ */
  .btn{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    border: 1px solid transparent;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    cursor: pointer;
  }
  .btn--primary{
    background: var(--blue);
    color: #fff;
  }
  .btn--primary:hover{ background: var(--blue-deep); }
  .btn--gold{
    background: transparent;
    border-color: var(--gold);
    color: var(--ink);
  }
  .btn--gold:hover{ background: var(--gold); border-color: var(--gold); color: #fff; }
  .section--ink .btn--gold{ color: var(--paper); }
  .btn-row{
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-top: var(--sp-3);
  }

  /* ============ NAV ============ */
  .nav{
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(250,250,247,0.92);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--line);
  }
  .nav .container{
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
  }
  .nav-brand{
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    text-decoration: none;
    color: var(--ink);
  }
  .nav-brand img{ width: 38px; height: 38px; }
  .nav-brand span{
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .nav-links{
    display: flex;
    gap: var(--sp-2);
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: nowrap;
  }
  .nav-links a{
    color: var(--ink);
    text-decoration: none;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 6px 2px;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    transition: border-color 0.2s ease, color 0.2s ease;
  }
  .nav-links a:hover{ border-color: var(--gold); color: var(--blue-deep); }
  .nav-toggle{
    display: none;
    background: none;
    border: 1px solid var(--line);
    width: 42px;
    height: 38px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
    content: '';
    display: block;
    width: 18px;
    height: 2px;
    background: var(--ink);
    position: relative;
  }
  .nav-toggle span::before{ top: -6px; }
  .nav-toggle span::after{ top: 4px; }
  .nav-toggle span::before, .nav-toggle span::after{ position: absolute; }

  @media (max-width: 1080px){
    .nav-links{
      position: absolute;
      top: 72px;
      left: 0;
      right: 0;
      background: var(--paper);
      border-bottom: 1px solid var(--line);
      flex-direction: column;
      flex-wrap: nowrap;
      padding: var(--sp-2) var(--sp-3);
      gap: var(--sp-2);
      display: none;
    }
    .nav-links a{ font-size: 0.9rem; white-space: normal; }
    .nav-links.open{ display: flex; }
    .nav-toggle{ display: flex; }
  }

  /* logo fallback (used if the brand image fails to load) */
  .logo-mark.img-missing{
    background: var(--blue);
    color: var(--gold-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 0.7rem;
    font-weight: 700;
  }
  .logo-mark.img-missing img{ display: none; }
  .logo-mark.img-missing::after{ content: 'MM'; }

  /* ============ HERO ============ */
  .hero{
    position: relative;
    width: 100%;
    overflow-x: clip;
    background: var(--ink);
    color: var(--paper);
    border-bottom: 1px solid rgba(255,255,255,0.10);
  }

  .hero-inner{
    position: relative;
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: var(--sp-12) var(--sp-3);
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: var(--sp-8);
    align-items: center;
  }

  /* ---- copy (left) ---- */
  .hero .eyebrow{ color: var(--gold-soft); margin-bottom: var(--sp-3); }
  .hero h1{
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--paper);
    font-size: clamp(2rem, 3.9vw, 3.3rem);
    line-height: 1.14;
    margin: 0 0 var(--sp-3);
    max-width: 20ch;
  }
  .hero h1 em{ font-style: italic; color: var(--gold-soft); }
  .hero-desc{
    color: #C3CEDA;
    font-size: 1.05rem;
    max-width: 54ch;
    margin: 0 0 var(--sp-4);
    line-height: 1.75;
  }
  .hero .btn-row{ margin-top: var(--sp-3); }
  .hero .btn--gold{ color: var(--paper); border-color: var(--gold); }

  /* ---- orbit nav: buttons circling the globe ---- */
  .orbit{
    position: absolute;
    inset: 0;
    pointer-events: none;
  }
  /* no z-index here on purpose: a stacking context would trap the nodes above
     or below the globe as a group, and the point is that they pass around it */
  .orbit-track{
    position: absolute;
    inset: 0;
    animation: orbitSpin 48s linear infinite;
  }
  .orbit-ring{
    position: absolute;
    inset: 15%;
    border: 1px dashed rgba(199,162,58,0.35);
    border-radius: 50%;
    pointer-events: none;
  }
  /* seen at a shallow angle, the circle reads as an ellipse */
  .orbit.is-3d .orbit-ring{
    inset: auto;
    left: 15%; right: 15%;
    top: 50%;
    height: 43.4%;              /* JS sets this from the orbit's own numbers */
    transform: translateY(-50%);
    z-index: 1;
  }
  .orbit.is-3d .orbit-node{
    transition: opacity 0.2s linear;
    will-change: transform, opacity;
  }
  .orbit-node{
    position: absolute;
    transform: translate(-50%, -50%);
    pointer-events: auto;
    text-decoration: none;
  }
  .orbit-spin{
    display: block;
    animation: orbitSpinBack 48s linear infinite;
  }
  .orbit-face{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    background: var(--paper);
    color: var(--ink);
    border: 1px solid var(--ink);
    box-shadow: 3px 3px 0 rgba(0,0,0,0.45);
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease,
                color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
  }
  .orbit-face .num{
    font-family: var(--font-display);
    font-size: 0.72rem;
    color: var(--blue-deep);
    transition: color 0.15s ease;
  }
  .orbit-node:hover .orbit-face,
  .orbit-node:focus-visible .orbit-face{
    background: var(--gold);
    border-color: var(--ink);
    color: var(--ink);
    box-shadow: 1px 1px 0 rgba(0,0,0,0.45);
    transform: translate(2px, 2px);
  }
  .orbit-node:hover .orbit-face .num,
  .orbit-node:focus-visible .orbit-face .num{ color: var(--ink); }
  .orbit-node:focus-visible{ outline: none; }
  .orbit-node:focus-visible .orbit-face{ outline: 2px solid var(--paper); outline-offset: 3px; }

  /* nodes sit on a circle at r = 35% of the stage, so the widest label
     still clears the stage edge at every point of the rotation */
  .orbit-node.n1{ left: 50.0%; top: 15.0%; }
  .orbit-node.n2{ left: 80.3%; top: 32.5%; }
  .orbit-node.n3{ left: 80.3%; top: 67.5%; }
  .orbit-node.n4{ left: 50.0%; top: 85.0%; }
  .orbit-node.n5{ left: 19.7%; top: 67.5%; }
  .orbit-node.n6{ left: 19.7%; top: 32.5%; }

  @keyframes orbitSpin{ to{ transform: rotate(360deg); } }
  @keyframes orbitSpinBack{ to{ transform: rotate(-360deg); } }

  /* hold still while the reader is aiming at a button */
  .hero-stage:hover .orbit-track,
  .hero-stage:hover .orbit-spin,
  .orbit-track:focus-within,
  .orbit-track:focus-within .orbit-spin{ animation-play-state: paused; }

  /* ---- globe (right) ---- */
  .hero-stage{
    position: relative;
    width: 100%;
    max-width: 460px;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    overflow: visible;
  }
  #globe-canvas{
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: 38%;
    height: 38%;
    z-index: 3;                 /* nodes sit at 5 in front of it, 2 behind */
    transition: opacity 0.5s ease;
  }
  #emblem-canvas{
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: 52%;
    height: 52%;
    z-index: 3;
    opacity: 0;
    transition: opacity 0.5s ease;
    cursor: grab;
    touch-action: pan-y;
  }
  #emblem-canvas.is-on{ opacity: 0; }
  .hero-stage.show-emblem #globe-canvas{ opacity: 0; }
  .hero-stage.show-emblem #emblem-canvas.is-on{ opacity: 1; }
  .globe-fallback{ transition: opacity 0.5s ease; }
  .hero-stage.show-emblem .globe-fallback{ opacity: 0; }
  #emblem-canvas.is-dragging{ cursor: grabbing; }
  @media (prefers-reduced-motion: reduce){
    #globe-canvas, #emblem-canvas, .globe-fallback{ transition: none; }
  }
  .globe-fallback{
    position: absolute;
    left: 50%; top: 50%;
    width: 74%; height: 74%;
    object-fit: contain;
    transform: translate(-50%,-50%);
  }

  @media (max-width: 1180px){
    .hero-stage{ max-width: 400px; }
    .orbit-face{ font-size: 0.63rem; padding: 7px 10px; letter-spacing: 0.07em; }
  }
  @media (max-width: 900px){
    .hero-inner{ grid-template-columns: 1fr; gap: var(--sp-6); padding-block: var(--sp-8); }
    .hero-copy{ order: 2; }
    .hero-stage{ order: 1; max-width: 260px; margin-bottom: 104px; }
    .orbit{ position: absolute; top: calc(100% + var(--sp-3)); left: 50%; right: auto;
            bottom: auto; width: 92vw; max-width: 520px; transform: translateX(-50%); }
    .orbit-ring{ display: none; }
    .orbit-track{ position: static; animation: none; display: flex; flex-wrap: wrap;
                  justify-content: center; gap: 8px; }
    .orbit-node{ position: static; transform: none; }
    .orbit-spin{ animation: none; }
  }
  @media (prefers-reduced-motion: reduce){
    .orbit-track, .orbit-spin{ animation: none !important; }
  }

  /* ============ STATS ============ */
  .stats-grid{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--sp-3);
  }
  .stat{
    background: var(--paper);
    border: 1px solid var(--line);
    padding: var(--sp-3);
  }
  .stat .num{
    font-family: var(--font-display);
    font-size: 1.9rem;
    color: var(--blue-deep);
    display: block;
    margin-bottom: 6px;
  }
  .stat .label{
    font-size: 0.85rem;
    color: var(--ink-soft);
  }
  @media (max-width: 980px){
    .stats-grid{ grid-template-columns: repeat(2, 1fr); }
  }

  .two-col > *{ min-width: 0; }
  .two-col{
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: var(--sp-8);
    align-items: start;
  }
  @media (max-width: 880px){
    .two-col{ grid-template-columns: 1fr; }
  }

  /* ============ PHOTO FRAMES ============ */
  .gallery{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-2);
  }
  @media (max-width: 880px){ .gallery{ grid-template-columns: repeat(2, 1fr); } }

  .photo-frame{
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--cream);
  }
  .photo-frame img{
    width: 100%; height: 100%;
    object-fit: cover;
  }
  .photo-frame.img-missing img{ display: none; }
  .photo-frame.img-missing::after{
    content: attr(data-label);
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--sp-2);
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    color: var(--ink-soft);
    font-weight: 600;
    background: var(--cream);
  }

  .photo-frame.wide{ aspect-ratio: 16 / 9; }

  /* A logo is not a photograph. The other frames crop to fill, which is
     right for a picture and wrong for a mark: this one sits the whole thing
     on paper with room around it. */
  .photo-frame--logo{ background: var(--paper); }
  .photo-frame--logo img{
    object-fit: contain;
    padding: 12%;
  }

  /* stand-in for members without a photo on file */
  .photo-frame--monogram{
    background: var(--cream);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .photo-frame--monogram::after{
    content: attr(data-initials);
    font-family: var(--font-display);
    font-size: 2.6rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--ink-soft);
  }

  /* ============ CARDS ============ */
  .card-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-3);
  }
  @media (max-width: 980px){ .card-grid{ grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 620px){ .card-grid{ grid-template-columns: 1fr; } }

  .card{
    background: var(--paper);
    border: 1px solid var(--line);
    overflow: hidden;
  }
  .card .photo-frame{ border: none; border-bottom: 1px solid var(--line); aspect-ratio: 1/1; }
  .card-body{ padding: var(--sp-3); }
  .card-body .role{
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--blue-deep);
    font-weight: 700;
    margin-bottom: 4px;
  }
  .card-body p{ font-size: 0.92rem; margin-bottom: 0; }

  .board-grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-4);
  }
  @media (max-width: 720px){ .board-grid{ grid-template-columns: 1fr; } }
  .board-card{
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: var(--sp-3);
    background: var(--paper);
    border: 1px solid var(--line);
    padding: var(--sp-3);
  }
  .board-card .photo-frame{ aspect-ratio: 1/1; }
  @media (max-width: 520px){ .board-card{ grid-template-columns: 1fr; } .board-card .photo-frame{ max-width: 140px; } }

  /* ============ BADGE ============ */
  .badge{
    display: inline-block;
    background: var(--blue-deep);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 6px 14px;
    margin-bottom: var(--sp-2);
  }

  /* ============ STEPS LIST ============ */
  .steps{
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: step;
    display: grid;
    gap: var(--sp-2);
  }
  .steps li{
    counter-increment: step;
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: var(--sp-2);
    align-items: start;
    padding: var(--sp-2) 0;
    border-top: 1px solid var(--line);
  }
  .steps li:first-child{ border-top: none; }
  .steps li::before{
    content: counter(step);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--blue-deep);
    border: 1px solid var(--gold);
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
  }
  .steps p{ margin: 0; }
  .steps strong{ display: block; color: var(--ink); margin-bottom: 2px; }

  /* ============ TIMELINE (serpentine) ============ */
  .timeline{
    position: relative;
    margin-top: var(--sp-8);
    --rail: rgba(255,255,255,0.22);
  }
  .tl-row{
    display: flex;
    gap: var(--sp-3);
    position: relative;
    padding-top: var(--sp-4);
  }
  .tl-row--rev{ flex-direction: row-reverse; justify-content: flex-start; }

  /* the drawn rail */
  /* the rail is drawn by scroll position, not by a one-shot transition:
     --fill is written from JS as the timeline passes through the viewport */
  .tl-rail{
    position: absolute;
    top: 5px;
    left: 0; right: 0;
    height: 2px;
    background: rgba(255,255,255,0.10);
  }
  .tl-rail i{
    position: absolute;
    inset: 0;
    display: block;
    background: var(--rail);
    transform: scaleX(var(--fill, 0));
    transform-origin: left center;
  }
  .tl-row--rev .tl-rail{ left: 50%; }
  .tl-row--rev .tl-rail i{ transform-origin: right center; }
  /* a travelling head so the drawing edge is legible */
  .tl-rail i::before{
    content: '';
    position: absolute;
    top: -3px; right: -4px;
    width: 8px; height: 8px;
    background: var(--gold);
  }
  .tl-row--rev .tl-rail i::before{ right: auto; left: -4px; }
  .tl-rail::after{
    content: '';
    position: absolute;
    top: -4px;
    width: 0; height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
  }
  .tl-row--fwd .tl-rail::after{ right: -1px; border-left: 8px solid var(--gold); }
  .tl-row--rev .tl-rail::after{ left: -1px; border-right: 8px solid var(--gold); }

  /* the drop between the two passes */
  .tl-drop{
    position: relative;
    height: var(--sp-8);
  }
  .tl-drop span{
    position: absolute;
    right: 0; top: 0; bottom: 0;
    width: 2px;
    background: var(--rail);
    transform: scaleY(var(--fill, 0));
    transform-origin: top center;
  }
  .tl-drop span::after{
    content: '';
    position: absolute;
    bottom: -1px; left: -4px;
    width: 0; height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 8px solid var(--gold);
  }

  .tl-item{
    flex: 0 0 calc(25% - (var(--sp-3) * 3 / 4));
    position: relative;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.55s ease, transform 0.55s ease;
  }
  .tl-item.visible{ opacity: 1; transform: translateY(0); }

  .tl-item::before{
    content: '';
    position: absolute;
    top: calc(-1 * var(--sp-4) - 1px);
    left: 0;
    width: 12px; height: 12px;
    background: var(--ink);
    border: 3px solid var(--blue);
    transform: scale(0);
    transition: transform 0.4s ease 0.15s, border-color 0.3s ease;
  }
  .tl-item.visible::before{ transform: scale(1); }
  .tl-item.is-future::before{ border-color: var(--gold); }

  .tl-thumb{
    position: relative;
    aspect-ratio: 16 / 10;
    margin-bottom: var(--sp-2);
    overflow: hidden;
    background: #0E1B2A;
    border: 1px solid rgba(255,255,255,0.14);
    /* wipes open from the leading edge as the card arrives */
    clip-path: inset(0 100% 0 0);
    transition: clip-path 0.7s cubic-bezier(0.22,0.61,0.36,1) 0.12s;
  }
  .tl-row--rev .tl-thumb{ clip-path: inset(0 0 0 100%); }
  .tl-item.visible .tl-thumb{ clip-path: inset(0 0 0 0); }
  .tl-thumb img{
    width: 100%; height: 100%;
    object-fit: cover;
    filter: saturate(0.85);
  }
  .tl-item.is-future .tl-thumb img{ opacity: 0.55; }
  .tl-thumb.is-missing{ background: #0E1B2A; }
  .tl-thumb.is-missing img{ display: none; }

  .tl-year{
    font-family: var(--font-display);
    color: var(--gold-soft);
    font-size: 1.25rem;
    margin-bottom: 4px;
  }
  .tl-item.is-future .tl-year::after{
    content: ' \2022 planned';
    font-family: var(--font-body);
    font-size: 0.68rem;
    color: #93A1AF;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
  }
  .tl-item h3{ font-size: 1.05rem; margin-bottom: 6px; }
  .tl-item p{ font-size: 0.9rem; margin: 0; }

  /* the serpentine needs real width; below that, a single vertical run */
  @media (max-width: 1000px){
    .timeline{ padding-left: var(--sp-4); border-left: 2px solid var(--rail); margin-top: var(--sp-6); }
    .tl-row, .tl-row--rev{ flex-direction: column; gap: var(--sp-6); padding-top: 0; }
    .tl-item{ flex: 1 1 auto; }
    .tl-item::before{ top: 4px; left: calc(-1 * var(--sp-4) - 7px); }
    .tl-rail, .tl-drop{ display: none; }
  }

  /* ============ MISC SECTIONS ============ */
  .section--ink h3{ color: var(--paper); }
  .subhead{ margin-bottom: var(--sp-2); }
  .container--stacked{ margin-top: var(--sp-8); }
  .stats-grid--pair{ grid-template-columns: 1fr 1fr; }
  .card-body--bare{ padding: 0; margin-top: 4px; }
  .footer-about{ margin-top: var(--sp-2); max-width: 360px; }
  .partners-list a{ color: inherit; text-decoration: none; }
  .logo-mark{ overflow: hidden; display: inline-block; }
  .nav-brand .logo-mark{ width: 38px; height: 38px; }
  .footer-brand .logo-mark{ width: 44px; height: 44px; }
  .logo-mark img{ width: 100%; height: 100%; object-fit: cover; }

  .poster-figure{ margin: 0; }
  .poster-caption{
    margin-top: var(--sp-1);
    font-size: 0.82rem;
    color: var(--ink-soft);
  }

  .poster-img{
    width: 100%;
    border: 1px solid var(--line);
  }

  .quote-card{
    background: var(--cream);
    border-left: 4px solid var(--gold);
    padding: var(--sp-3);
  }
  .note{
    margin-top: var(--sp-4);
    padding: var(--sp-3);
    background: var(--paper);
    border: 1px solid var(--line);
    border-left: 3px solid var(--blue-deep);
  }
  .note p{ margin: 0; font-size: 0.9rem; }
  .note strong{ display: block; margin-bottom: 4px; color: var(--ink); }

  .quote-card{ margin-top: var(--sp-3); }
  .quote-card p{ color: var(--ink); font-size: 1.05rem; max-width: none; }
  .quote-card strong{ display: block; margin-bottom: 4px; }

  .partners-list{
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-top: var(--sp-2);
    padding: 0;
    list-style: none;
  }
  .partners-list li{
    border: 1px solid var(--line);
    padding: 6px 16px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--blue-deep);
    background: var(--paper);
  }

  /* ============ FOOTER ============ */
  .footer{
    background: var(--ink);
    color: var(--paper);
    padding-block: var(--sp-8);
  }
  .footer .container{
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr;
    gap: var(--sp-6);
  }
  @media (max-width: 720px){ .footer .container{ grid-template-columns: 1fr; gap: var(--sp-4); } }
  .footer-brand{ display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); }
  .footer-brand img{ width: 44px; height: 44px; }
  .footer-brand span{
    font-family: var(--font-display);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-size: 1rem;
  }
  .footer h4{
    font-family: var(--font-body);
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold-soft);
    margin: 0 0 var(--sp-2) 0;
  }
  .footer ul{ list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
  .footer a{ color: #D7DEE6; text-decoration: none; font-size: 0.9rem; }
  .footer a:hover{ color: var(--gold-soft); }
  .footer .tagline{ color: #B8C2CE; font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; }
  .footer-bottom{
    margin-top: var(--sp-6);
    padding-top: var(--sp-3);
    border-top: 1px solid rgba(255,255,255,0.12);
    text-align: center;
    font-size: 0.8rem;
    color: #93A1AF;
  }

  /* ============ PAGE HEADER (per-page hero) ============ */
.pagehead{
  background: var(--ink);
  color: var(--paper);
  padding-block: var(--sp-12) var(--sp-8);
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
.pagehead .eyebrow{ color: var(--gold-soft); }
.pagehead h1{
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--paper);
  margin-bottom: var(--sp-2);
}
.pagehead .lede{ color: #C3CEDA; max-width: 62ch; }

/* current page in the nav */
.nav-links a.is-current{ border-color: var(--gold); color: var(--blue-deep); }

/* ============ FALLING PAPER PROMOS ============ */
.paperfall{
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  overflow: hidden;
}
.paper{
  position: absolute;
  top: 0; left: 0;
  z-index: 3;              /* over whoever delivered it */
  width: 193px;
  display: block;
  background: var(--paper);
  border: 1px solid var(--ink);
  box-shadow: 4px 5px 0 rgba(10,22,38,0.30);
  color: var(--ink);
  opacity: 0;
  will-change: transform;
  pointer-events: none;
  /* a sheet is lit unevenly as it turns; a hairline fold sells the paper */
  border-left: 3px solid var(--gold);
}
.paper.is-live{ pointer-events: auto; }
.paper-link{
  display: block;
  padding: 10px 12px;
  color: inherit;
  text-decoration: none;
}
/* the X. It sits on the corner of the sheet, not inside the link */
.paper-x{
  position: absolute;
  top: -1px;
  right: -1px;
  width: 22px;
  height: 22px;
  padding: 0;
  background: var(--paper);
  border: 1px solid var(--ink);
  cursor: pointer;
  opacity: 0.75;
}
.paper-x::before,
.paper-x::after{
  content: '';
  position: absolute;
  left: 4px;
  top: 9.5px;
  width: 12px;
  height: 1.5px;
  background: var(--ink);
}
.paper-x::before{ transform: rotate(45deg); }
.paper-x::after{ transform: rotate(-45deg); }
.paper-x:hover,
.paper-x:focus-visible{ opacity: 1; background: var(--cream); }
.paper{ transition: opacity 0.28s ease; }
/* the card opens where it is delivered. `scale` is its own property, so this
   composes with the transform the loop is writing every frame */
.paper.is-opening{ animation: cardopen 0.34s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes cardopen{ from{ scale: 0.86; } to{ scale: 1; } }

/* what carries the card: an aeroplane, a folded sheet, and whoever is
   walking it over */
.fly-craft,
.fly-figure{
  position: absolute;
  top: 0; left: 0;
  z-index: 2;
  will-change: transform;
  pointer-events: none;
}
.fly-craft{ filter: drop-shadow(2px 3px 0 rgba(10,22,38,0.18)); }
/* the wire a card comes down on, and the rope someone comes down with */
.fly-line{
  position: absolute;
  top: 0; left: 0;
  width: 1px;
  height: 0;
  background: var(--ink);
  /* a hairline of ink disappears against the dark page headers, so it carries
     its own paper coloured edge */
  box-shadow: 0 0 0 0.5px rgba(250, 250, 247, 0.75);
  opacity: 0.7;
  transform-origin: top center;
  z-index: 2;
  pointer-events: none;
}
.page-blog .fly-line{ background: var(--paper); opacity: 0.5; }
.fly-figure{ filter: drop-shadow(2px 3px 0 rgba(10,22,38,0.14)); }
.page-blog .fly-figure rect,
.page-blog .fly-figure circle,
.page-blog .fly-figure path{ fill: #0B1B2B; }
/* A card with no photograph gets a tab instead: the section it opens,
   reversed out of ink, so the sheet reads as a labelled index card rather
   than a floating paragraph. Full bleed to the sheet's edges, over the gold
   fold on the left. */
.paper-tab{
  display: block;
  margin: -10px -12px 9px;
  padding: 5px 26px 5px 12px;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
/* the number the claim rests on, set to be read from across the room */
.paper-stat{
  display: block;
  font-family: var(--font-display);
  font-size: 1.55rem;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--blue-deep);
}
.paper-unit{
  display: block;
  margin: 4px 0 8px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--line);
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.paper-kicker{
  display: block;
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue-deep);
  margin-bottom: 4px;
}
.paper-text{
  display: block;
  font-size: 0.72rem;
  line-height: 1.45;
  margin-bottom: 7px;
}
.paper-go{
  display: inline-block;
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-bottom: 2px solid var(--gold);
  padding-bottom: 1px;
}
/* it names its destination now, so it reads as a button, with the arrow
   doing the work "Open" used to do badly */
.paper-go::after{ content: ' →'; letter-spacing: 0; }
.paper:hover{ background: var(--cream); }
/* keyboard: the live card is a real tab stop, so it has to show where the
   focus is, on the link and on the close box alike */
.paper-link:focus-visible{
  outline: 2px solid var(--blue);
  outline-offset: -3px;
}
.paper-x:focus-visible{ outline: 2px solid var(--blue); outline-offset: 1px; }
/* faces sit high in these frames, so hold the top of the crop */
.paper-img img{ object-position: 50% 16%; }
.paper:hover .paper-go{ border-color: var(--blue); }
@media (max-width: 700px){ .paperfall{ display: none; } }
@media (prefers-reduced-motion: reduce){ .paperfall{ display: none; } }

/* a nav link that leaves the site carries the usual mark */
.nav-out::after{
  content: '↗';
  margin-left: 3px;
  font-size: 0.78em;
  opacity: 0.7;
}




/* ============ TIMELINE: THE FOUR TOWNS ============ */
/* The slider is a real range input, so the year is reachable by keyboard
   and by a screen reader, and the readout beside it carries the same text
   the milestones do. The canvas is the illustration, not the interface.  */
.map3d{ margin-top: var(--sp-2); }
.map-grid{
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: var(--sp-5);
  align-items: start;
}
.map-grid > *{ min-width: 0; }
.map-stage{ position: relative; border: 1px solid var(--ink); background: var(--paper); }
#map-canvas{
  display: block;
  width: 100%;
  aspect-ratio: 5 / 4;
  cursor: grab;
  touch-action: pan-y;
}
#map-canvas.is-dragging{ cursor: grabbing; }
.map-drag{
  position: absolute;
  right: 10px; bottom: 8px;
  margin: 0;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  pointer-events: none;
}
.map-year{
  font-family: var(--font-display);
  font-size: 2.6rem;
  line-height: 1;
  margin: 0;
  color: var(--blue-deep);
}
.map-head{ margin: 6px 0 var(--sp-2); }
.map-body{ color: var(--ink-soft); min-height: 5.2em; }
.map-label{
  display: block;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 4px;
}
.map-slider{ width: 100%; accent-color: var(--blue-deep); }
.map3d.no-gl .map-stage,
.map3d.no-gl .map-slider,
.map3d.no-gl .map-label{ display: none; }
.map3d.no-gl .map-grid{ grid-template-columns: 1fr; }
.map-legend{ list-style: none; margin: var(--sp-3) 0 0; padding: 0; }
.map-legend li{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--ink-soft);
  margin-bottom: 4px;
}
.map-legend i{ width: 10px; height: 10px; flex: 0 0 10px; }
.map-legend .k-prog{ background: var(--gold); }
.map-legend .k-rec{ background: var(--blue-deep); }
.map-legend li:last-child{ opacity: 0.35; }
.map-legend.has-rec li:last-child{ opacity: 1; }
.map-note{
  margin-top: var(--sp-2);
  font-size: 0.76rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
@media (max-width: 900px){
  .map-grid{ grid-template-columns: 1fr; }
}

/* ============ CONVOAAVE: THE CORPUS IN SPACE ============ */
/* The legend is the interface and it is made of real buttons, so the
   keyboard gets everything the pointer gets and the whole block still
   makes sense if the canvas never draws.                                */
.corpus3d{ margin-top: var(--sp-6); }
.corpus-grid{
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--sp-5);
  align-items: start;
}
.corpus-grid > *{ min-width: 0; }
.corpus-stage{ position: relative; border: 1px solid var(--ink); background: var(--paper); }
#corpus-canvas{
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-height: 520px;
  cursor: grab;
  touch-action: pan-y;
}
#corpus-canvas.is-dragging{ cursor: grabbing; }
.corpus-drag{
  position: absolute;
  right: 10px; bottom: 8px;
  margin: 0;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  pointer-events: none;
}
.corpus-lede{ margin-top: 0; }
.corpus3d.no-gl .corpus-stage,
.corpus3d.no-gl .corpus-keys,
.corpus3d.no-gl .corpus-read{ display: none; }
.corpus3d.no-gl .corpus-grid{ grid-template-columns: 1fr; }
.corpus-keys{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: var(--sp-3) 0;
}
.corpus-key{
  padding: 6px 10px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
}
.corpus-key:hover{ border-color: var(--ink); background: var(--cream); }
.corpus-key.is-on{ border-color: var(--ink); background: var(--ink); color: var(--paper); }
.corpus-key:focus-visible{ outline: 2px solid var(--blue); outline-offset: 2px; }
.corpus-read{
  min-height: 128px;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--line);
  padding: var(--sp-2) 0;
}
.corpus-line{ display: block; margin-bottom: 8px; font-size: 0.95rem; }
.corpus-line b{
  display: block;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 2px;
}
.corpus-hint,
.corpus-note{ display: block; font-size: 0.78rem; color: var(--ink-soft); }
.corpus-note{ margin-top: 6px; font-style: italic; }
.corpus-caveat{
  margin-top: var(--sp-2);
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
@media (max-width: 900px){
  .corpus-grid{ grid-template-columns: 1fr; }
}

/* ============ THE DOOR INTO MACHINA ROOM ============ */
/* The Room is its own site; this is the way in, sitting at the end of the
   explore grid as its seventh entry. The button is the real link. The
   canvas beside it is an enhancement, and everything still works if WebGL
   never loads: the block reads as a card with a button in it.            */
.roomdoor{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: var(--sp-6);
  align-items: center;
  margin-top: var(--sp-5);
  padding: var(--sp-5);
  border: 1px solid var(--ink);
  background: var(--paper);
}
.roomdoor-copy .xcard-num{
  position: static;
  display: inline-block;          /* the grid cards hang this in a corner */
  margin-bottom: var(--sp-2);
}
.roomdoor-copy h3{ margin: 6px 0 var(--sp-2); }
.roomdoor-copy p{ color: var(--ink-soft); margin-bottom: var(--sp-3); }
.roomdoor-stage{ position: relative; }
#door-canvas{
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: var(--cream);
  border: 1px solid var(--line);
  touch-action: pan-y;
}
.roomdoor-hint{
  position: absolute;
  left: 0; right: 0; bottom: 10px;
  text-align: center;
  margin: 0;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  text-shadow: 0 1px 0 rgba(250,250,247,0.85);
  pointer-events: none;
}
@media (max-width: 860px){
  .roomdoor{ grid-template-columns: 1fr; }
}

/* ============ BLOG: WATER + INSTAGRAM FEED ============ */
.page-blog{ background: var(--ink); }
/* No CSS blur and no scrim layer here: both forced a full-screen recomposite
   every frame and together cost more than half the frame budget. The canvas
   upscale already smooths the grid, and the scrim is baked into the palette. */
#water{
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: block;
  pointer-events: none;
}
.page-blog .nav{
  position: sticky;
  background: rgba(18,32,50,0.86);
  border-bottom: 1px solid rgba(255,255,255,0.14);
  z-index: 100;
}
.page-blog .nav-brand,
.page-blog .nav-links a{ color: var(--paper); }
.page-blog .nav-links a.is-current{ color: var(--gold-soft); border-color: var(--gold); }
.page-blog .nav-toggle{ border-color: rgba(255,255,255,0.3); }
.page-blog .nav-toggle span,
.page-blog .nav-toggle span::before,
.page-blog .nav-toggle span::after{ background: var(--paper); }
@media (max-width: 1080px){
  .page-blog .nav-links{ background: #12202F; border-color: rgba(255,255,255,0.14); }
}
.pagehead--onwater{
  position: relative;
  z-index: 2;
  background: transparent;
  border-bottom: none;
}

.ig-feed{
  position: relative;
  z-index: 2;
  max-width: 600px;
  margin: 0 auto;
  padding: 0 var(--sp-3) var(--sp-12);
  display: grid;
  gap: var(--sp-4);
}
.ig-post{
  background: var(--paper);
  border: 1px solid var(--line);
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.ig-post.visible{ opacity: 1; transform: translateY(0); }
.ig-head{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}
.ig-avatar{
  width: 38px; height: 38px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  color: var(--gold-soft);
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.ig-who{ display: flex; flex-direction: column; line-height: 1.25; }
.ig-who strong{ font-size: 0.92rem; }
.ig-role{
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue-deep);
  font-weight: 700;
}
.ig-date{
  margin-left: auto;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
}
.ig-media{
  aspect-ratio: 4 / 3;
  background: var(--cream);
  overflow: hidden;
}
.ig-media img{ width: 100%; height: 100%; object-fit: cover; }
.ig-media.is-note,
.ig-media.is-text{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  text-align: center;
  aspect-ratio: 16 / 7;
  background: var(--ink);
}
.ig-media.is-note span,
.ig-media.is-text::after{
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--gold-soft);
  line-height: 1.3;
}
.ig-media.is-text img{ display: none; }
.ig-body{ padding: 12px 14px var(--sp-2); }
.ig-actions{ display: none; }
.ig-act{
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
}
.ig-act--like{ color: var(--blue-deep); }
.ig-caption{ font-size: 0.92rem; margin-bottom: 6px; max-width: none; }
.ig-caption strong{ color: var(--ink); margin-right: 4px; }
.ig-tags{ margin: 0; font-size: 0.82rem; }
.ig-tag{ color: var(--blue-deep); font-weight: 600; margin-right: 6px; }

.page-blog .footer{ position: relative; z-index: 2; }

/* ============ HOME: EXPLORE GRID ============ */
.explore-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
}
.xcard{
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  text-decoration: none;
  color: var(--ink);
  overflow: hidden;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.xcard:hover{
  border-color: var(--ink);
  transform: translateY(-3px);
  box-shadow: 4px 5px 0 rgba(10,22,38,0.16);
}
.xcard--lead{
  grid-column: span 3;
  flex-direction: row;
  align-items: stretch;
}
.xcard-num{
  position: absolute;
  top: 0; right: 0;
  padding: 6px 10px;
  font-family: var(--font-display);
  font-size: 0.78rem;
  color: var(--gold);
  background: var(--ink);
  z-index: 2;
}
.xcard-media{
  flex: 0 0 40%;
  background: var(--cream);
  overflow: hidden;
  min-height: 200px;
}
.xcard-media img{ width: 100%; height: 100%; object-fit: cover; }
.xcard-media.is-missing img{ display: none; }
.xcard-body{ display: block; padding: var(--sp-3); }
.xcard--lead .xcard-body{ align-self: center; }
.xcard-kicker{
  display: block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 6px;
}
.xcard h3{ margin-bottom: 6px; }
.xcard--lead h3{ font-family: var(--font-display); font-size: 1.7rem; font-weight: 600; }
.xcard p{ font-size: 0.9rem; margin-bottom: var(--sp-2); }
.xcard-go{
  display: inline-block;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue-deep);
  border-bottom: 2px solid var(--gold);
  padding-bottom: 2px;
}
.xcard:hover .xcard-go{ border-color: var(--blue); }

.explore-cta{
  margin-top: var(--sp-6);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
  text-align: center;
}
.explore-cta p{ margin: 0 auto var(--sp-2); }
.explore-cta .btn-row{ justify-content: center; }

@media (max-width: 900px){
  .explore-grid{ grid-template-columns: repeat(2, 1fr); }
  .xcard--lead{ grid-column: span 2; flex-direction: column; }
  .xcard-media{ flex: none; aspect-ratio: 16/9; min-height: 0; }
}
@media (max-width: 600px){
  .explore-grid{ grid-template-columns: 1fr; }
  .xcard--lead{ grid-column: span 1; }
}

/* thumbnail on a falling sheet */
.paper-img{
  display: block;
  aspect-ratio: 16 / 9;
  margin: -10px -12px 8px;
  overflow: hidden;
  background: var(--cream);
  border-bottom: 1px solid var(--line);
}
.paper-img img{ width: 100%; height: 100%; object-fit: cover; }

/* ============ TIMELINE AS A RIVER ============ */
.riverline{
  position: relative;
  background: #E9E3D2;
}
#river{
  position: sticky;
  top: 0;
  display: block;
  width: 100%;
  height: 100vh;
  z-index: 0;
}
/* pull the milestones back over the sticky canvas */
.riverline .timeline{
  position: relative;
  z-index: 2;
  margin-top: -100vh;
  padding: 6vh 0 8vh;
  max-width: var(--container);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--sp-3);
  padding-right: var(--sp-3);
}
.river-note,
.river-end{
  text-align: center;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(92,80,58,0.75);
  max-width: none;
  margin: 0 auto;
}
.river-end{ margin-top: 5vh; }

/* Two milestones per band, one high and one low, with a clear lane between
   them for the water. The river crosses each band sideways, so six milestones
   take three bands instead of six rows -- about a third of the scroll. */
.ms-band{
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--sp-6);
  row-gap: 136px;                 /* the lane the channel runs through */
  margin-block: 6vh;
}
.milestone{
  display: flex;
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22,0.61,0.36,1);
}
.milestone.visible{ opacity: 1; transform: translateY(0); }
.milestone.at-tl{ grid-column: 1; grid-row: 1; }
.milestone.at-tr{ grid-column: 2; grid-row: 1; }
.milestone.at-bl{ grid-column: 1; grid-row: 2; }
.milestone.at-br{ grid-column: 2; grid-row: 2; }
.milestone.at-tl,
.milestone.at-tr{ align-items: flex-end; }      /* sit on the upper bank */

/* the card itself lies on its side, which keeps each band shallow */
.ms-card{
  display: flex;
  width: 100%;
  background: var(--paper);
  border: 1px solid rgba(20,36,54,0.20);
  box-shadow: 3px 4px 0 rgba(92,80,58,0.18);
}
.ms-thumb{
  flex: 0 0 38%;
  overflow: hidden;
  background: var(--cream);
  border-right: 1px solid var(--line);
}
.ms-thumb img{ width: 100%; height: 100%; object-fit: cover; filter: saturate(0.85); }
.milestone.is-future .ms-thumb img{ opacity: 0.55; }
.ms-thumb.is-missing{ flex-basis: 0; border-right: 0; }
.ms-thumb.is-missing img{ display: none; }
.ms-body{ padding: var(--sp-3); flex: 1; }
.ms-year{
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--blue-deep);
  margin-bottom: 4px;
}
.milestone.is-future .ms-year::after{
  content: ' \2022 planned';
  font-family: var(--font-body);
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-soft);
}
.ms-card h3{ color: var(--ink); font-size: 1rem; margin-bottom: 6px; }
.ms-card p{ color: var(--ink-soft); font-size: 0.88rem; margin: 0; }

/* narrow: the channel runs down the left and the cards stack beside it */
@media (max-width: 900px){
  .riverline .timeline{ padding-left: var(--sp-2); padding-right: var(--sp-2); }
  .ms-band{
    grid-template-columns: 1fr;
    row-gap: 4vh;
    margin-block: 4vh;
  }
  .milestone.at-tl,
  .milestone.at-tr,
  .milestone.at-bl,
  .milestone.at-br{
    grid-column: 1;
    grid-row: auto;
    align-items: stretch;
    justify-content: flex-end;
  }
  .ms-card{ width: 74%; }
  .ms-thumb{ flex-basis: 40%; }
}
@media (max-width: 560px){
  .ms-card{ width: 82%; }
  .ms-card{ display: block; }
  .ms-thumb{ aspect-ratio: 16 / 9; border-right: 0; border-bottom: 1px solid var(--line); }
}
@media (prefers-reduced-motion: reduce){
  .milestone{ opacity: 1; transform: none; }
}
}

/* ============ CONNECTICUT GLOBE ============ */
.globe-figure{
  margin: var(--sp-4) 0 0;
  border: 1px solid var(--line);
  background: var(--paper);
}
#globe{
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-height: 420px;
  background: var(--paper);
  cursor: grab;
  touch-action: pan-y;
}
#globe:focus-visible{ outline: 2px solid var(--blue-deep); outline-offset: -2px; }
#globe.is-dragging{ cursor: grabbing; }
.globe-figure figcaption{
  border-top: 1px solid var(--line);
  padding: var(--sp-2) var(--sp-3);
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.globe-figure figcaption strong{ color: var(--ink); }

/* ============ POLICY: THE MEETING, LEADING THE PAGE ============ */
.section--lead{ padding-block: var(--sp-8) var(--sp-6); }
.leadgrid{
  display: grid;
  grid-template-columns: minmax(0, 660px) minmax(0, 1fr);
  gap: var(--sp-6);
  align-items: start;
}
.leadfig{ margin: 0; border: 1px solid var(--line); background: #fff; }
.leadfig img{ width: 100%; height: auto; }
.leadfig.img-missing{ display: none; }
.leadfig figcaption{
  padding: 12px var(--sp-3);
  border-top: 1px solid var(--line);
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.leadfig-when{
  display: block;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 3px;
}
.leadtext h2{
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.2;
  margin: 0 0 var(--sp-2);
}
.leadtext p{ font-size: 0.95rem; margin-bottom: var(--sp-2); }
.leadfacts{
  list-style: none;
  margin: var(--sp-3) 0 0;
  padding: 0;
  border-top: 1px solid var(--ink);
}
.leadfacts li{
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--ink-soft);
}
.leadfacts strong{
  display: block;
  color: var(--ink);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.section-head--flush{
  text-align: left;
  max-width: none;
  margin-bottom: var(--sp-3);
}
.section-head--flush h2{ margin: 0; }
.section-head--flush p{ margin-left: 0; margin-right: 0; }

@media (max-width: 1000px){
  .leadgrid{ grid-template-columns: 1fr; gap: var(--sp-4); }
  .leadfig{ max-width: 660px; }
}

/* ============ POLICY: CONGRESSIONAL MEASURE SHEET ============ */
.pagehead--tight{ padding-block: var(--sp-8) var(--sp-6); }
.pagehead--tight h1{ margin-bottom: var(--sp-1); }
.section--measure{ padding-block: 0 var(--sp-8); }

.measure{
  border: 1px solid var(--ink);
  background: #fff;
  margin-bottom: var(--sp-6);
}
.measure-bar{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-2);
  padding: 8px var(--sp-3);
  background: var(--ink);
  color: var(--gold-soft);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
}
.measure-stamp{
  border: 1px solid var(--gold);
  color: var(--gold-soft);
  padding: 2px 10px;
}
.measure-main{
  display: grid;
  grid-template-columns: 1fr 168px;
  gap: var(--sp-4);
  align-items: start;
  padding: var(--sp-4) var(--sp-3);
}
.measure-kicker{
  display: block;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.measure-main h3{
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  line-height: 1.18;
  margin: 0 0 10px;
}
.measure-purpose{
  font-size: 0.92rem;
  color: var(--ink-soft);
  max-width: 62ch;
  margin: 0 0 var(--sp-3);
}
.measure-links{ display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.measure-alt{
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--blue-deep);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
}
.measure-alt:hover{ border-bottom-color: var(--blue-deep); }
.measure-cover{
  position: relative;
  display: block;
  border: 1px solid var(--line);
  background: var(--paper);
  line-height: 0;
}
.measure-cover img{ width: 100%; height: auto; }
.measure-cover:hover{ border-color: var(--ink); }
.measure-cover.is-missing{ display: none; }
.measure-cover-tag{
  position: absolute;
  right: 0;
  bottom: 0;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  font-weight: 700;
  padding: 3px 8px;
  line-height: 1.4;
}

/* the status track, read left to right like a calendar of business */
.track{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.track li{
  position: relative;
  padding: var(--sp-3) var(--sp-2) var(--sp-2);
  border-left: 1px solid var(--line);
  color: var(--ink-soft);
}
.track li:first-child{ border-left: 0; }
.track li::before{               /* the marker sits on the top rule */
  content: '';
  position: absolute;
  top: -5px;
  left: var(--sp-2);
  width: 9px;
  height: 9px;
  background: var(--paper);
  border: 1px solid var(--ink-soft);
}
.track li.is-done::before{ background: var(--ink); border-color: var(--ink); }
.track li.is-now::before{ background: var(--gold); border-color: var(--gold); }
.track-when{
  display: block;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 3px;
}
.track li.is-now .track-when{ color: #96751d; }
.track-what{ display: block; font-size: 0.86rem; line-height: 1.4; }
.track li.is-now .track-what,
.track li.is-done .track-what{ color: var(--ink); }
.track li.is-now .track-what{ font-weight: 600; }

/* the key facts, set as a register */
.facts{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: 0;
}
.facts > div{
  padding: 12px var(--sp-3);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.facts > div:nth-child(3n+1){ border-left: 0; }
.facts > div:nth-child(-n+3){ border-top: 0; }
.facts dt{
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-soft);
  margin-bottom: 2px;
}
.facts dd{ margin: 0; font-size: 0.88rem; line-height: 1.45; }

/* the record: prose to the left, exhibits to the right */
.record{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--sp-6);
  align-items: start;
}
.record-body p{ font-size: 0.95rem; margin-bottom: var(--sp-2); max-width: 68ch; }
.rule-head{
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 6px;
  margin: var(--sp-4) 0 var(--sp-2);
}
.record-body > .rule-head:first-child{ margin-top: 0; }
.rule-head span{ color: var(--gold); font-weight: 700; }
.record-more{ margin: var(--sp-3) 0 0; }
.record-more a{
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--blue-deep);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
}
.record-more a:hover{ border-bottom-color: var(--blue-deep); }
.record-side{ position: sticky; top: 96px; display: grid; gap: var(--sp-3); }
.sidefig{ margin: 0; border: 1px solid var(--line); background: #fff; }
.sidefig img{ width: 100%; height: auto; }
.sidefig a{ display: block; line-height: 0; }
.sidefig figcaption{
  padding: 8px 12px;
  border-top: 1px solid var(--line);
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--ink-soft);
}
.sidefig.img-missing{ display: none; }

@media (max-width: 900px){
  .measure-main{ grid-template-columns: 1fr 132px; }
  .track{ grid-template-columns: repeat(2, 1fr); }
  .track li:nth-child(odd){ border-left: 0; }
  .track li:nth-child(n+3){ border-top: 1px solid var(--line); }
  .facts{ grid-template-columns: repeat(2, 1fr); }
  .facts > div:nth-child(3n+1){ border-left: 1px solid var(--line); }
  .facts > div:nth-child(odd){ border-left: 0; }
  .facts > div:nth-child(3){ border-top: 1px solid var(--line); }
  .record{ grid-template-columns: 1fr; gap: var(--sp-4); }
  .record-side{ position: static; grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  .measure-main{
    grid-template-columns: 1fr 108px;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-2);
  }
  .measure-links{ gap: var(--sp-2); }
  .track li,
  .facts > div{ padding-left: var(--sp-2); padding-right: var(--sp-2); }
  .track li::before{ left: var(--sp-2); }
  .record-side{ grid-template-columns: 1fr; }
  .sidefig figcaption{ font-size: 0.68rem; }
}

@media (max-width: 460px){
  /* below this the title has nowhere to go beside the cover */
  .measure-main{ grid-template-columns: 1fr; }
  .measure-cover{ width: 120px; }
}

/* ============ RECOGNITION: THE PHOTOGRAPH WALL ============ */
.wall{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 196px;
  gap: 10px;
  margin-top: var(--sp-6);
}
.shot{
  position: relative;
  display: block;
  padding: 0;
  margin: 0;
  border: 1px solid var(--line);
  background: var(--ink);
  overflow: hidden;
  cursor: zoom-in;
  font: inherit;
  color: inherit;
  text-align: left;
}
.shot img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.2, 0.72, 0.2, 1),
              filter 0.4s ease;
}
.shot:hover img,
.shot:focus-visible img{ transform: scale(1.045); filter: brightness(1.04); }
.shot:focus-visible{ outline: 2px solid var(--gold); outline-offset: 2px; }
.shot-cap{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 22px 12px 9px;
  font-size: 0.74rem;
  line-height: 1.35;
  color: #fff;
  background: linear-gradient(0deg, rgba(10,20,32,0.82), rgba(10,20,32,0));
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.shot:hover .shot-cap,
.shot:focus-visible .shot-cap{ opacity: 1; transform: none; }
/* the lead photograph takes four cells, the two tall ones take a column each */
.s1{ grid-column: 1 / 3; grid-row: 1 / 3; }
.s2{ grid-column: 3; grid-row: 1 / 3; }
.s3{ grid-column: 4; grid-row: 1 / 3; }
.s4{ grid-column: 1 / 3; grid-row: 3; }
.s5{ grid-column: 3; grid-row: 3; }
.s6{ grid-column: 4; grid-row: 3; }

/* the frames cut out of those photographs */
.detrail{ margin-top: var(--sp-6); border-top: 1px solid var(--ink); padding-top: var(--sp-3); }
.detrail-head{ margin-bottom: var(--sp-3); }
.dets{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}
.det{
  position: relative;
  display: block;
  padding: 0;
  border: 1px solid var(--line);
  background: var(--ink);
  aspect-ratio: 1 / 1;
  overflow: hidden;
  cursor: zoom-in;
  font: inherit;
}
.det img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.94);
  transition: transform 0.6s cubic-bezier(0.2, 0.72, 0.2, 1), filter 0.4s ease;
}
.det:hover img,
.det:focus-visible img{ transform: scale(1.06); filter: none; }
.det:focus-visible{ outline: 2px solid var(--gold); outline-offset: 2px; }
.det-tag{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 4px 8px;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
}

/* the full picture, over the page */
.lightbox{
  position: fixed;
  inset: 0;
  /* over the sticky nav (60) and the falling sheets (60), or the close button
     ends up behind the header */
  z-index: 200;
  background: rgba(9, 17, 28, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 56px);
}
.lightbox[hidden]{ display: none; }
.lb-fig{
  margin: 0;
  max-width: min(1100px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.lb-fig img{
  max-width: 100%;
  max-height: calc(100vh - 190px);
  width: auto;
  margin: 0 auto;
  border: 1px solid rgba(255,255,255,0.22);
  object-fit: contain;
}
.lb-fig figcaption{
  display: flex;
  gap: var(--sp-2);
  align-items: baseline;
  justify-content: center;
  color: #C3CEDA;
  font-size: 0.86rem;
  text-align: center;
}
.lb-n{ font-size: 0.66rem; letter-spacing: 0.16em; font-weight: 700; color: var(--gold-soft); }
.lb-close,
.lb-arrow{
  position: absolute;
  width: 44px;
  height: 44px;
  padding: 0;
  background: rgba(250,250,247,0.92);
  border: 1px solid var(--ink);
  cursor: pointer;
  z-index: 2;
}
.lb-close{ top: 18px; right: 18px; }
.lb-close::before,
.lb-close::after{
  content: '';
  position: absolute;
  left: 12px; top: 20px;
  width: 18px; height: 2px;
  background: var(--ink);
}
.lb-close::before{ transform: rotate(45deg); }
.lb-close::after{ transform: rotate(-45deg); }
.lb-arrow{ top: 50%; margin-top: -22px; }
.lb-arrow.is-prev{ left: 18px; }
.lb-arrow.is-next{ right: 18px; }
.lb-arrow::before{
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 10px; height: 10px;
  border-top: 2px solid var(--ink);
  border-right: 2px solid var(--ink);
}
.lb-arrow.is-prev::before{ transform: translate(-30%, -50%) rotate(-135deg); }
.lb-arrow.is-next::before{ transform: translate(-70%, -50%) rotate(45deg); }
.lb-close:hover,
.lb-arrow:hover{ background: var(--gold-soft); }

@media (max-width: 900px){
  .wall{ grid-auto-rows: 150px; }
  .dets{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px){
  /* a phone gets one photograph at a time, uncropped */
  .wall{ grid-template-columns: 1fr; grid-auto-rows: auto; }
  .shot{ grid-column: 1 !important; grid-row: auto !important; }
  .shot img{ height: auto; }
  .shot-cap{ opacity: 1; transform: none; }
  .dets{ grid-template-columns: repeat(2, 1fr); }
}

/* ============ FIGURES, SET AS A JOURNAL SETS THEM ============ */
.sr-only{
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.fig{
  /* a grid item will not shrink below its content unless told to, and without
     this the scrolling plot widens the whole column on a phone */
  min-width: 0;
  margin: var(--sp-6) 0 0;
  border-top: 1px solid var(--ink);
  padding-top: var(--sp-2);
}
.fig-plot{
  background: #fff;
  border: 1px solid var(--line);
  padding: var(--sp-2);
  margin-bottom: 10px;
  overflow-x: auto;
}
.fig-plot svg{ width: 100%; height: auto; display: block; }
/* a plot scaled below its drawn size takes its 7pt labels down with it, so on a
   narrow screen the figure keeps its width and the frame scrolls instead */
@media (max-width: 620px){
  .fig-plot svg{ min-width: 460px; }
  .fig-plot--table svg{ min-width: 0; }
  .fig-plot{ padding: var(--sp-2) 10px; }
}
.fig figcaption{
  font-size: 0.76rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.fig-n{
  font-weight: 800;
  color: var(--ink);
  letter-spacing: 0.02em;
}
.fig-n::after{
  content: ' |';
  color: var(--ink-soft);
  font-weight: 400;
}
.fig-lead{ font-weight: 700; color: var(--ink); }
.fig-body cite{ font-style: italic; }
.fig-body b{ color: var(--ink); }
.fig--wide{ margin-top: var(--sp-6); }
.fig--wide figcaption{ max-width: 96ch; }

/* the construction table, ruled top and bottom only, as a table in a paper is */
.fig-plot--table{ padding: 0; }
.ctab{
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
  line-height: 1.45;
}
.ctab th{
  text-align: left;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 700;
  padding: 12px var(--sp-2);
  border-bottom: 1px solid var(--ink);
  border-top: 1px solid var(--ink);
  vertical-align: bottom;
}
.ctab td{
  padding: 10px var(--sp-2);
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  color: var(--ink-soft);
}
.ctab tr:last-child td{ border-bottom: 1px solid var(--ink); }
.ctab .c-n{ width: 26px; color: #9AA6B2; font-size: 0.72rem; }
.ctab .c-k{ color: var(--ink); font-weight: 600; white-space: nowrap; }
.ctab .c-s{ color: var(--ink); }
.ctab .c-s::before,
.ctab .c-o::before{ content: '“'; }
.ctab .c-s::after,
.ctab .c-o::after{ content: '”'; }
.ctab .c-o{ color: #8894A1; }
.ctab .c-l{ font-size: 0.76rem; }
@media (max-width: 860px){
  .ctab{ font-size: 0.74rem; }
  .ctab .c-l{ display: none; }
  .ctab th:last-child{ display: none; }
}
/* five columns fit neither a phone nor a side column, so the row becomes a
   block: the construction, what was said, what comes back, what it costs */
.fig--slim .ctab thead,
.fig--slim .ctab .c-n{ display: none; }
.fig--slim .ctab,
.fig--slim .ctab tbody,
.fig--slim .ctab tr,
.fig--slim .ctab td{ display: block; width: auto; }
.fig--slim .ctab tr{
  border-bottom: 1px solid var(--line);
  padding: 10px var(--sp-2);
}
.fig--slim .ctab tr:last-child{ border-bottom: 0; }
.fig--slim .ctab td{ border: 0; padding: 1px 0; }
.fig--slim .ctab .c-k{ font-size: 0.82rem; margin-bottom: 2px; }
.fig--slim .ctab .c-l{ display: block; font-size: 0.72rem; margin-top: 2px; }
.fig--slim .ctab .c-o::before{ content: 'returns “'; }

@media (max-width: 620px){
  .ctab thead,
  .ctab .c-n{ display: none; }
  .ctab, .ctab tbody, .ctab tr, .ctab td{ display: block; width: auto; }
  .ctab tr{ border-bottom: 1px solid var(--line); padding: 10px var(--sp-2); }
  .ctab tr:last-child{ border-bottom: 0; }
  .ctab td{ border: 0; padding: 1px 0; }
  .ctab .c-k{ font-size: 0.8rem; margin-bottom: 2px; }
  .ctab .c-o::before{ content: 'returns “'; }
}

/* the figure draws itself once, when it first comes into view */
.fig .bar{
  transform: scaleY(0);
  transform-origin: bottom;
  transform-box: fill-box;
  transition: transform 0.8s cubic-bezier(0.2, 0.72, 0.2, 1);
}
.fig .barval,
.fig .dot,
.fig .stage{ opacity: 0; transition: opacity 0.5s ease; }
.fig.visible .bar{ transform: scaleY(1); }
.fig.visible .barval,
.fig.visible .dot,
.fig.visible .stage{ opacity: 1; }
@media (prefers-reduced-motion: reduce){
  .fig .bar{ transform: none; transition: none; }
  .fig .barval,
  .fig .dot,
  .fig .stage{ opacity: 1; transition: none; }
}

/* the prize link, in Princeton's orange, on the dark hero and anywhere else */
.link-prize{
  color: #F08A33;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(240,138,51,0.5);
  padding-bottom: 1px;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.link-prize:hover,
.link-prize:focus-visible{ color: #FFA254; border-bottom-color: #FFA254; }
.section .link-prize,
.footer .link-prize{ color: #C25E0A; border-bottom-color: rgba(194,94,10,0.45); }
.section .link-prize:hover,
.footer .link-prize:hover{ color: #E77500; border-bottom-color: #E77500; }