@font-face {
    font-family: "KingsCaslon";
    src: url("../fonts/KingsCaslonDisplay_Rg.ttf") format("truetype");
    font-display: block;
  }
  @font-face {
    font-family: "LustSpine";
    src: url("../fonts/LustSpine.otf") format("opentype");
    font-display: block;
  }
  @font-face {
    font-family: "HN Thin";
    src: url("../fonts/HNThin.otf") format("opentype");
    font-weight: 100 300;
    font-display: block;
  }
  @font-face {
    font-family: "HN UltraLight";
    src: url("../fonts/HNUltraLight.otf") format("opentype");
    font-weight: 100 200;
    font-display: block;
  }
  @font-face {
    font-family: "HN Medium";
    src: url("../fonts/HNMedium.otf") format("opentype");
    font-weight: 500;
    font-display: block;
  }
  @font-face {
    font-family: "HN Black";
    src: url("../fonts/HNBlack.otf") format("opentype");
    font-weight: 900;
    font-display: block;
  }
  :root {
    --paynes:       #3D4A57;
    --paynes-dark:  #2B3541;
    --paynes-light: #4E5D6B;
    --paynes-rim:   #1e262f;
    --interior:     #141a21;
    --interior-2:   #1d242e;

    /* Spectrum (red → orange → yellow → green → blue) muted into the
       Paynes-grey family: low chroma, dark mid-lightness, all carrying a
       slight blue-grey undertone so they read as a coherent set. */
    /* Payne's Gray gradient — monochromatic blue-grey progression with WIDE
       lightness steps (~0.14-0.15 each) so each volume stands clear of its
       neighbors. Vol 5 holds a deep canonical Payne's Gray; vol 1 is a very
       pale chambray. Dark variant pulled -0.14 from main for legible type
       contrast against the flat covers. */
    --v1: oklch(0.85 0.020 245); --v1-d: oklch(0.71 0.018 245); --v1-l: oklch(0.93 0.022 245);  /* pale chambray */
    --v2: oklch(0.71 0.022 245); --v2-d: oklch(0.57 0.020 245); --v2-l: oklch(0.79 0.024 245);  /* light payne */
    --v3: oklch(0.56 0.024 245); --v3-d: oklch(0.42 0.022 245); --v3-l: oklch(0.64 0.026 245);  /* mid payne */
    --v4: oklch(0.41 0.026 245); --v4-d: oklch(0.27 0.024 245); --v4-l: oklch(0.49 0.028 245);  /* deep payne */
    --v5: oklch(0.27 0.028 245); --v5-d: oklch(0.13 0.026 245); --v5-l: oklch(0.35 0.030 245);  /* canonical Payne's Gray */
  }
  html,body{margin:0;height:100%;width:100%;overflow:hidden;
    background:radial-gradient(ellipse at 50% 35%, #ece7df 0%, #c6bfb4 85%);
    font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;color:#2b2b2b;
    -webkit-user-select:none;user-select:none;
    -webkit-touch-callout:none;
    touch-action:none;
    overscroll-behavior:none;
    -webkit-tap-highlight-color:transparent;}
  html,body{height:100dvh;}

  .scene{position:fixed;inset:0;perspective:3400px;perspective-origin:50% 40%;
    transform:scale(var(--fit,1));transform-origin:50% 50%;
    cursor:grab;touch-action:none;}
  .scene.dragging{cursor:grabbing;}
  /* Stage anchor sits a bit above true vertical center so the slipcase
     clears the colophon spec lines + RESET that float at the bottom of
     the home view. */
  .stage{position:absolute;left:50%;top:42%;width:0;height:0;
    transform-style:preserve-3d;
    transform:rotateX(14deg) rotateY(55deg);
    transition:transform .5s cubic-bezier(.4,.1,.2,1);}
  .stage.no-transition{transition:none;}
  .face,.book{position:absolute;left:50%;top:50%;transform-style:preserve-3d;}
  .book{transition:transform 1.1s cubic-bezier(.55,.05,.25,1);}

  .floor-shadow{position:absolute;left:50%;top:50%;
    width:1400px;height:420px;
    transform:translate(-50%,-50%) rotateX(90deg) translateZ(-210px);
    background:radial-gradient(ellipse at 50% 50%,rgba(18,22,30,.55) 0%,rgba(18,22,30,.22) 40%,rgba(18,22,30,0) 72%);
    filter:blur(18px);pointer-events:none;}

  /* ================================================================
     GEOMETRY (before stage rotation):
       +X right, +Y down, +Z toward camera.
     Slipcase outer box: W=412 (X, 10.3") × H=412 (Y, 10.3") × D=176 (Z, 4.4").
     ±Z faces are the BIG 10.3×10.3 covers (front/back of the set).
     Opening is on +X side (10.3 tall × 4.4 deep). Books slide in/out along X.
     Books stand inside with:
       cover faces = ±Z (10"×10", matching slipcase front orientation)
       spine (bound edge) face = -X (facing the closed end of case)
       fore-edge = +X (facing the OPEN end of case) — this is what peeks out!
       top/bottom paper = ±Y
     Hmm, wait — in a traditional slipcase, spines face OUT the opening,
     not fore-edges. So: the BOUND edge = +X (pointing out the opening).
     That's the visible "spine" face through the opening.
     Books stack along X only if they'd stack with spine on top of spine —
     but spines are 10" tall × spine-thickness wide; stacking thickness-wise
     along X means all 5 books are at the same Z depth, their covers
     parallel to the slipcase ±Z faces. ✓
     ================================================================ */

  /* -------- SLIPCASE OUTER SHELL -------- */
  /* +Z FRONT (10.3 × 10.3) — carries cover artwork.
     Spine-direction (Z) outer: 96px = 2.4" — sized to the sum of book
     spines (~2.12") + interior slack (~1/16") + 4px walls each side.
     Half-Z outer = 48; half-Z interior = 44. */
  .sc-front{
    width:412px;height:412px;margin:-206px 0 0 -206px;
    transform:translateZ(48px);
    background:linear-gradient(135deg,var(--paynes-light) 0%,var(--paynes) 55%,var(--paynes-dark) 100%);
  }
  /* -Z BACK */
  .sc-back{
    width:412px;height:412px;margin:-206px 0 0 -206px;
    transform:translateZ(-48px) rotateY(180deg);
    background:linear-gradient(135deg,var(--paynes-dark),var(--paynes) 60%,var(--paynes-light));
  }
  /* -Y TOP (10.3 X × 2.4 Z outer) */
  .sc-top{
    width:412px;height:96px;margin:-48px 0 0 -206px;
    transform:rotateX(90deg) translateZ(206px);
    background:linear-gradient(180deg,var(--paynes-light),var(--paynes));
  }
  /* +Y BOTTOM */
  .sc-bottom{
    width:412px;height:96px;margin:-48px 0 0 -206px;
    transform:rotateX(-90deg) translateZ(206px);
    background:linear-gradient(0deg,var(--paynes-dark),#1c232c);
  }
  /* +X RIGHT (closed end, 2.4 Z × 10.3 Y outer) */
  .sc-left{
    width:96px;height:412px;margin:-206px 0 0 -48px;
    transform:rotateY(-90deg) translateZ(206px);
    background:linear-gradient(90deg,var(--paynes-dark),var(--paynes));
    overflow:hidden;
  }
  .sc-left .imprint{
    position:absolute;
    /* near the top edge (y=0 side of this face, which is physical top
       of shelved case). Type sized for the new ~2.4"-wide spine: scaled
       down by roughly 96/168 ≈ 0.57 from the original spec to keep the
       same vertical stack, just smaller. Kept the same font families
       and tracking so the visual character is preserved. */
    top:12px; left:0; right:0;
    text-align:center;
    font-size:7px;
    letter-spacing:.08em;
    white-space:nowrap;
    color:#f5f1e8;
    text-shadow:
      0 -0.5px 0 rgba(0,0,0,.55),
      0 0.5px 0 rgba(255,255,255,.12),
      0 0 1.5px rgba(0,0,0,.3);
    opacity:.95;
  }
  .sc-left .imprint.bottom{
    top:auto;
    bottom:10px;
    line-height:1.4;
  }
  .sc-left .imprint.bottom .credit{
    display:block;
    font-family:"HN Medium","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight:500;
    font-size:3px;
    letter-spacing:.04em;
    line-height:1.35;
    margin-bottom:3px;
  }
  .sc-left .imprint.bottom .byline{
    display:block;
    font-family:"HN Thin","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight:200;
    font-size:7px;
    letter-spacing:.08em;
  }
  .sc-left .imprint .name{
    font-family:"HN Thin","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight:200;
  }
  .sc-left .imprint .num{
    font-family:"HN Black","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight:900;
    /* Match Vol 1 cover red — central value of the cover gradient. */
    color:var(--v1);
    text-shadow:
      0 -0.5px 0 rgba(0,0,0,.6),
      0 0.5px 0 rgba(255,255,255,.1),
      0 0 1.5px rgba(0,0,0,.35);
  }
  /* -X LEFT is OPEN  …wait no, this slipcase now opens on +X */

  /* Cover label — on +Z outer front, 10.1 × 10.1 centered on 10.3 × 10.3.
     Sits 5px proud of sc-front (Z=48 + 5 = 53) so the printed paper
     reads as a label adhered to the case. */
  .cover-label{
    width:404px;height:404px;margin:-202px 0 0 -202px;
    transform:translateZ(53px);
    background:#f7f5f1 url("../img/cover-art.png") center/cover no-repeat;
    box-shadow:0 0 0 1px rgba(0,0,0,.10),0 1px 2px rgba(0,0,0,.25);
  }
  .cover-label::after{content:"";position:absolute;inset:0;
    box-shadow:inset 0 0 30px rgba(0,0,0,.10);pointer-events:none;}

  /* Back label — on -Z outer back, same size as cover-label */
  .back-label{
    width:404px;height:404px;margin:-202px 0 0 -202px;
    transform:translateZ(-53px) rotateY(180deg);
    background:#f7f5f1 url("../img/hand-art.jpg") center/cover no-repeat;
    box-shadow:0 0 0 1px rgba(0,0,0,.10),0 1px 2px rgba(0,0,0,.25);
  }
  .back-label::after{content:"";position:absolute;inset:0;
    box-shadow:inset 0 0 30px rgba(0,0,0,.10);pointer-events:none;}

  /* -------- INNER WALLS --------
     Interior Z = 88px = 2.2" (matches scene.js INSIDE_X — the sum of
     spine widths plus 1/16" slack). Half = 44. */
  .in-front{
    width:404px;height:404px;margin:-202px 0 0 -202px;
    transform:translateZ(44px) rotateY(180deg);
    background:linear-gradient(180deg,var(--interior-2),var(--interior));
  }
  .in-back{
    width:404px;height:404px;margin:-202px 0 0 -202px;
    transform:translateZ(-44px);
    background:linear-gradient(180deg,var(--interior-2),var(--interior));
  }
  .in-top{
    width:404px;height:88px;margin:-44px 0 0 -202px;
    transform:rotateX(-90deg) translateZ(202px);
    background:linear-gradient(180deg,var(--interior),var(--interior-2));
  }
  .in-bottom{
    width:404px;height:88px;margin:-44px 0 0 -202px;
    transform:rotateX(90deg) translateZ(202px);
    background:linear-gradient(0deg,var(--interior),#0e1319);
  }
  .in-left{ /* closed end interior, normal = -X, at +X (closed end) */
    width:88px;height:404px;margin:-202px 0 0 -44px;
    transform:rotateY(90deg) translateZ(-202px);
    background:linear-gradient(90deg,var(--interior),var(--interior-2));
  }

  /* Rim — thin frame at the open +X side showing cardboard thickness.
     Only the 4px border is opaque; the middle is a cut-out so books show. */
  .rim{
    width:88px;height:412px;margin:-206px 0 0 -44px;
    transform:rotateY(-90deg) translateZ(-206px);
    background:transparent;
    border:4px solid var(--paynes-rim);
    box-sizing:border-box;
    pointer-events:none;
  }

  /* -------- FAN-FOLD INSERT -------- */
  /* Each panel ~9.5" tall × 3.5" wide × 0.04" thick.
     Panels chain: panel N+1 is a child of panel N, hinged at panel N's
     right edge. Odd panel hinges rotate +180, even panels -180 to fold
     accordion-style (Z). */
  .spine-face{
    overflow:hidden;
    color:rgba(255,255,255,.96);
    font-family:"LustSpine","Didot",serif;
    cursor:pointer;
  }
  /* Subtle spine numeral — same baseline as the cover type, in HN UltraLight. */
  .spine-num{
    position:absolute;
    left:50%;
    bottom:28px;
    transform: translateX(-50%);
    font-family:"HN UltraLight","HN Thin","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight:100;
    font-size:12px;
    letter-spacing:.08em;
    line-height:1;
    /* Per-book solid color (dark variant) injected inline — matches back-cover ink. */
    text-shadow:none;
    pointer-events:none;
  }
  /* Numeral + title share a centered stack; title is pulled tight beneath
     the visible glyph of the numeral with a negative margin. */
  .back-cover-stack{
    position:absolute;
    left:50%; top:48%;        /* slightly above center so numeral cap-top breathes off the top edge */
    transform: translate(-50%, -50%);
    display:flex;
    flex-direction:column;
    align-items:center;
    pointer-events:none;
  }
  .back-cover-num{
    font-family:"LustSpine","Didot",serif;
    /* Per-book solid color (dark variant) injected inline. */
    font-size: 200px;
    line-height:1;
    text-shadow:none;
  }
  .back-cover-title{
    font-family:"HN UltraLight","HN Thin","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight:100;
    font-size:26pt;
    letter-spacing:.06em;
    line-height:1;
    margin-top:-72px;     /* pulled tight under the numeral so the title rises off the barcode */
    white-space:nowrap;   /* never wrap — long titles shrink (font-size) instead */
    text-shadow:none;
    /* Per-book solid color (dark variant) injected inline, matches numeral. */
  }
  /* Reserved: any "&" in a back-cover title swaps to King’s Caslon
     Display Regular against the ultralight Helvetica Neue running it.
     (Currently no title carries an ampersand.) */
  .kc-amp{
    font-family:"KingsCaslon","Helvetica Neue",Helvetica,serif;
    font-weight:400;
    font-style:normal;
    letter-spacing:0;
    padding:0 .04em;
  }
  /* Barcode: tucked toward the bottom edge, freeing vertical space above
     it for the larger volume title. */
  .back-cover-barcode{
    position:absolute;
    left:50%;
    bottom:8px;
    transform:translate(-50%, 50%);
    pointer-events:none;
  }
  .back-cover-barcode svg{ display:block; }
  /* Slipcase back: ISBN + barcode tucked into the bottom-left blank area
     of the hand image (placement-guide arrow target). Always black ink. */
  .slipcase-isbn{
    position:absolute;
    left:30px;
    bottom:14px;
    pointer-events:none;
    color:#000;
  }
  .slipcase-isbn svg{ display:block; }

  /* -------- DICE (scale reference, 16mm = 0.63" cubes) --------
     White ABS-plastic vibe, sharp pips. Both dice are placed at floor level
     showing 3 on top to anchor the slipcase's 10.1" height to a familiar object. */
  .die{
    position:absolute; left:50%; top:50%;
    width:0; height:0;
    transform-style:preserve-3d;
  }
  .die-face{
    position:absolute;
    width:25.2px; height:25.2px;             /* 0.63" * 40px/in */
    margin:-12.6px 0 0 -12.6px;
    background:linear-gradient(155deg,#ffffff 0%,#f3f0e9 60%,#e8e3d8 100%);
    border-radius:3.4px;
    box-shadow:
      inset 0 0 0 0.5px rgba(0,0,0,.18),
      inset 0 0 4px rgba(0,0,0,.05),
      0 0 0 0.5px rgba(0,0,0,.05);
    display:grid;
    grid-template-columns:repeat(3,1fr);
    grid-template-rows:repeat(3,1fr);
    padding:3.2px;
    box-sizing:border-box;
  }
  .pip{
    width:3.4px; height:3.4px;
    background:radial-gradient(circle at 35% 30%, #2a2a2c 0%, #050507 70%);
    border-radius:50%;
    align-self:center;
    justify-self:center;
    box-shadow:inset 0 0.5px 0.5px rgba(255,255,255,.15);
  }
  .pip[data-p="1"]{grid-area:1/1;} .pip[data-p="2"]{grid-area:1/2;} .pip[data-p="3"]{grid-area:1/3;}
  .pip[data-p="4"]{grid-area:2/1;} .pip[data-p="5"]{grid-area:2/2;} .pip[data-p="6"]{grid-area:2/3;}
  .pip[data-p="7"]{grid-area:3/1;} .pip[data-p="8"]{grid-area:3/2;} .pip[data-p="9"]{grid-area:3/3;}

  .paper-edge{
    background:repeating-linear-gradient(0deg,
      #efe8d3 0px,#efe8d3 1px,#d9d0b7 1px,#d9d0b7 2px);
  }
  .paper-top{
    background:repeating-linear-gradient(90deg,
      #efe8d3 0px,#efe8d3 1px,#d9d0b7 1px,#d9d0b7 2px);
  }
  /* Fore-edge — paper edge pattern (vertical stripes), uncoated cream stock. */
  .fore-edge{
    background:repeating-linear-gradient(0deg,
      #efe8d3 0px,#efe8d3 1px,#d9d0b7 1px,#d9d0b7 2px);
  }
  /* -------- VOL 4: WHITE COATED INTERIOR --------
     Opposites ships on coated white stock — page edges read crisp white,
     not the warm cream of the rest of the set. Slipcase + cover ink stay
     in the Payne family; only the paper itself swaps. */
  .book[data-n="4"] .paper-top{
    background:repeating-linear-gradient(90deg,
      #fdfdfb 0px,#fdfdfb 1px,#ececea 1px,#ececea 2px);
  }
  .book[data-n="4"] .fore-edge{
    background:repeating-linear-gradient(0deg,
      #fdfdfb 0px,#fdfdfb 1px,#ececea 1px,#ececea 2px);
  }

  /* -------- VOL 4: FLAT-WHITE INVERSION (the title is "Opposites") --------
     The big "4" and the title "Opposites" print in flat white instead of
     the dark Payne ink the rest of the set uses — the visual opposite of
     every other back cover. */
  .varnish{
    position:relative;
    isolation:isolate;
    /* No drop-shadow — varnished type should match the rest of the set's
       weight; only the gloss differs. */
  }
  .varnish::after{
    content:attr(data-text);
    position:absolute;
    left:0; top:0;
    width:100%; height:100%;
    pointer-events:none;
    font:inherit;
    letter-spacing:inherit;
    line-height:inherit;
    text-align:center;
    /* Just-a-shine: tight low-opacity highlight band. The dark Payne ink
       underneath stays the dominant tone; this reads as a glossy catch
       of light, not a silver fill. */
    background:linear-gradient(118deg,
      rgba(255,255,255,0)    42%,
      rgba(255,255,255,0.10) 48%,
      rgba(255,255,255,0.28) 50%,
      rgba(255,255,255,0.10) 52%,
      rgba(255,255,255,0)    58%);
    -webkit-background-clip:text;
            background-clip:text;
    color:transparent;
    -webkit-text-fill-color:transparent;
  }
  /* Book cover = cloth + monochrome tally-mark ink */
  .book-cover{overflow:hidden;}
  .book-cover .ink{
    position:absolute;inset:0;
    background:var(--cover-bg);
  }
  .book-cover .ink::after{
    content:"";position:absolute;inset:0;
    background:url("../img/cover-art.png") center/cover no-repeat;
    mix-blend-mode:multiply;
    opacity:.72;
  }
  /* Vol 4 inversion: tally art + title flip from dark ink to flat white,
     while the gradient cloth background stays exactly as the rest of the
     set. The original art is inverted and screen-blended so transparent
     areas keep showing the gradient through. */
  .book[data-n="4"] .book-cover .ink::after{
    filter:invert(1);
    mix-blend-mode:screen;
    opacity:1;
  }

  /* -------- PERFECT-BINDING HINGE CREASE --------
     A shallow score running parallel to the spine on both front and back
     covers, ~7mm in from the spine edge — the relief line where the cover
     flexes open in a perfect-bound paperback. Renders as a tight 3px valley:
     soft highlights on the outer ridges, a darker trough at the center.
     "front" = left edge (front cover is rotateY(180), so spine→local x=0).
     "back"  = right edge. */
  .cover-crease{
    position:absolute;
    top:0; bottom:0;
    width:2px;
    pointer-events:none;
    /* Whisper of a hinge — barely-there valley, soft outer ridges. */
    background:linear-gradient(90deg,
      rgba(0,0,0,0)         0%,
      rgba(255,255,255,.025) 25%,
      rgba(0,0,0,.07)        45%,
      rgba(0,0,0,.14)        50%,
      rgba(0,0,0,.07)        55%,
      rgba(255,255,255,.025) 75%,
      rgba(0,0,0,0)        100%);
    mix-blend-mode:multiply;
  }
  .cover-crease.front{ left:11px; }
  .cover-crease.back{  right:11px; }

  /* -------- Fronts / Backs gallery modes --------
     When the stage is in "fronts" or "backs" mode, the slipcase shell, the
     dice, and the floor shadow all fade out so only the five volumes float
     in a row. Books retain their per-book transition for graceful settling. */
  .stage .face.in-back,    .stage .face.in-front,
  .stage .face.in-top,     .stage .face.in-bottom,
  .stage .face.in-left,
  .stage .face.sc-back,    .stage .face.sc-bottom,
  .stage .face.sc-top,     .stage .face.sc-left,
  .stage .face.sc-front,
  .stage .face.back-label, .stage .face.cover-label,
  .stage .face.rim,
  .stage .floor-shadow,
  .stage .die{
    transition:opacity .45s ease;
  }
  .stage.case-hidden .face.in-back,    .stage.case-hidden .face.in-front,
  .stage.case-hidden .face.in-top,     .stage.case-hidden .face.in-bottom,
  .stage.case-hidden .face.in-left,
  .stage.case-hidden .face.sc-back,    .stage.case-hidden .face.sc-bottom,
  .stage.case-hidden .face.sc-top,     .stage.case-hidden .face.sc-left,
  .stage.case-hidden .face.sc-front,
  .stage.case-hidden .face.back-label, .stage.case-hidden .face.cover-label,
  .stage.case-hidden .face.rim,
  .stage.case-hidden .floor-shadow,
  .stage.case-hidden .die{
    opacity:0;
    pointer-events:none;
  }

  /* -------- UI -------- */
  .caption{position:fixed;left:50%;
    bottom:calc(env(safe-area-inset-bottom,0px) + 32px);
    transform:translateX(-50%);
    font-size:11px;letter-spacing:.18em;text-transform:uppercase;
    color:rgba(0,0,0,.5);pointer-events:none;white-space:nowrap;
    max-width:calc(100vw - 24px);overflow:hidden;text-overflow:ellipsis;}
  /* Subtle dice toggle, sits just below the caption. */
  .dice-toggle{position:fixed;left:50%;
    bottom:calc(env(safe-area-inset-bottom,0px) + 4px);
    transform:translateX(-50%);
    font-size:9px;letter-spacing:.22em;text-transform:uppercase;
    color:rgba(0,0,0,.32);
    background:transparent;border:0;padding:6px 8px;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    transition:color .15s;
    z-index:20;}
  .dice-toggle:hover{color:rgba(0,0,0,.6);}

  .modes{position:fixed;left:50%;
    top:calc(env(safe-area-inset-top,0px) + 14px);
    transform:translateX(-50%);
    display:flex;gap:4px;
    background:rgba(255,255,255,.78);
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    padding:5px;border-radius:999px;
    border:1px solid rgba(0,0,0,.08);
    box-shadow:0 2px 10px rgba(0,0,0,.06);
    z-index:20;font-size:13px;
    touch-action:manipulation;}
  .modes button{font:inherit;font-size:13px;
    background:transparent;border:0;
    padding:9px 16px;border-radius:999px;
    cursor:pointer;color:rgba(0,0,0,.72);
    -webkit-tap-highlight-color:transparent;
    transition:background .15s,color .15s;}
  .modes button.active{background:var(--paynes);color:#fff;}
  .modes button[disabled]{
    opacity:.32; cursor:not-allowed;
    pointer-events:none;
  }

  @media (max-width: 480px){
    .caption{
      font-size:10px;letter-spacing:.14em;
      white-space:normal;
      max-width:calc(100vw - 24px);
      width:max-content;
      text-align:center;
      line-height:1.5;
      overflow:visible;text-overflow:clip;
    }
    .modes button{padding:10px 14px;font-size:13px;}
  }