/* Tiny Worlds, door no. 10: Powers of Ten.
   The camera only ever zooms. It never pans, never walks, never floats: it
   dives through scales. A curiosity cabinet opens by candlelight and the lens
   plunges into the objects on its shelves, and at the moment of contact the
   painted surface of the vessel gives way and the world inside blooms from a
   point to full frame. Two nested scale layers crossing, with a real rack of
   focus every time. Ten dives, then the camera pulls back out of the cabinet
   and keeps pulling, because this room was on a shelf the whole time.
   Phones and reduced motion get the cabinet open and each vessel paired with
   its world down the page. */

.dive { --walnut: #3a2618; --walnut-2: #523622; --walnut-3: #6e4a30;
  --oak: #8a6444; --gold: #f0c96a; --gold-2: #ffe4a0; --glass: #7fb3ff;
  --ember: #c04a3a; --cream: #e9e0cc; --pitch: #241610; --moss: #5c7a5a;
  /* where the painted cabinet's shelf line sits, so the vessels stand on it */
  --shelf-y: 17%;
  background: var(--r-bg); }

/* ================= open the cabinet ================= */
.tw-dark { position: fixed; inset: 0; z-index: 70; background: #0b0704;
  transition: opacity .8s ease .5s, visibility .8s .5s; }
.tw-dark.lit { opacity: 0; visibility: hidden; }
.tw-cabdoors { position: absolute; left: 50%; top: 50%; width: min(76vw, 128vh);
  aspect-ratio: 16 / 10; transform: translate(-50%, -50%); perspective: 1400px;
  perspective-origin: 50% 50%; }
.cd-glow { position: absolute; inset: 8% 14%; border-radius: 6px; opacity: 0;
  background:
    radial-gradient(60% 70% at 50% 60%, rgba(255, 214, 140, .85), transparent 72%),
    radial-gradient(40% 50% at 50% 40%, rgba(255, 236, 190, .6), transparent 70%);
  transition: opacity 1.4s ease .35s; }
.tw-dark.opening .cd-glow { opacity: 1; }
.cd-wing { position: absolute; top: 0; bottom: 0; width: 50%;
  transform-style: preserve-3d; transition: transform 1.9s cubic-bezier(.4, 0, .2, 1); }
.cd-wing img { width: 100%; height: 100%; object-fit: cover; display: block;
  filter: brightness(.42) saturate(.8); transition: filter 1.9s ease; }
.cd-plain { display: block; width: 100%; height: 100%;
  background: linear-gradient(100deg, #2c1d12, #4a3120 60%, #241610);
  border: 3px solid #1a1009; }
.cd-l { left: 0; transform-origin: left center; }
.cd-r { right: 0; transform-origin: right center; }
.tw-dark.opening .cd-l { transform: rotateY(-72deg); }
.tw-dark.opening .cd-r { transform: rotateY(72deg); }
.tw-dark.opening .cd-wing img { filter: brightness(.72) saturate(1); }
.cd-motes { position: absolute; inset: 0; pointer-events: none; }
.cdm { position: absolute; border-radius: 50%; background: rgba(255, 226, 168, .9);
  box-shadow: 0 0 14px 5px rgba(255, 214, 140, .35); opacity: 0;
  animation: mote-drift ease-in-out infinite; }
@keyframes mote-drift {
  0%, 100% { opacity: 0; transform: translate(0, 0) scale(1); }
  18% { opacity: .9; }
  60% { opacity: .35; }
  99% { opacity: 0; transform: translate(var(--mx, 20px), var(--my, -60px)) scale(1.5); } }
.tw-hush { position: absolute; left: 50%; bottom: 13%; transform: translateX(-50%);
  font-family: var(--r-body); font-style: italic; font-size: clamp(15px, 1.3vw, 20px);
  color: #8a7458; opacity: 0; animation: hush 4s ease-out .3s; }
@keyframes hush { 0% { opacity: 0; } 22% { opacity: .95; } 78% { opacity: .5; } 100% { opacity: 0; } }
.tw-skip { position: absolute; right: 22px; bottom: 20px; z-index: 3;
  font-family: var(--font-ui); font-size: 10px; letter-spacing: .3em;
  text-transform: uppercase; color: #7a6a52; background: none; border: none; cursor: pointer; }
.tw-skip:hover { color: var(--gold); }

/* ================= the stage: one camera, one axis, scale ================= */
.tw-track { position: relative; height: var(--track-h, 180vh); }
.tw-stage { position: sticky; top: 0; height: 100vh; overflow: hidden;
  background: radial-gradient(70% 60% at 50% 46%, #23150c, #0d0705 78%); }

/* everything you dive through lives in here, so the finale can shrink the
   whole picture onto a shelf in one move */
.tw-inner { position: absolute; inset: 0; z-index: 2;
  transform: translate(var(--rec-x, 0%), var(--rec-y, 0%)) scale(var(--rec-s, 1));
  transform-origin: 50% 50%; will-change: transform; }

/* the shelf plane lives inside the camera; the camera only scales */
.tw-cam { position: absolute; inset: 0; z-index: 2;
  transform: scale(var(--sc, 1)); transform-origin: 50% 50%;
  filter: blur(var(--sb, 0px)); opacity: var(--so, 1); will-change: transform, filter; }
.tw-plane { position: absolute; left: 0; top: 0; bottom: 0;
  width: var(--plane-w, 300vw); transform: translateX(var(--sx, 0px));
  background-repeat: repeat-x; background-position: center; background-size: auto 100%;
  will-change: transform; }
.tw-plane::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10, 6, 3, .55), transparent 26%, transparent 62%, rgba(10, 6, 3, .6)); }
.tw-vessel { position: absolute; bottom: var(--shelf-y, 30%); width: var(--vw, 12vw);
  left: var(--vx, 0px); transform: translateX(-50%); }
.tw-vessel img { width: 100%; height: auto; display: block;
  filter: drop-shadow(0 12px 22px rgba(0, 0, 0, .7)); }
/* a vessel answers the lens: lifts a little and catches the candle */
@media (hover: hover) {
  .tw-vessel img { transition: transform .45s cubic-bezier(.2, .7, .2, 1), filter .45s ease; }
  .tw-vessel:hover img { transform: translateY(-5px) rotate(-2deg);
    filter: drop-shadow(0 12px 22px rgba(0, 0, 0, .7))
      drop-shadow(0 0 18px rgba(255, 214, 130, .35)) brightness(1.1); }
}
/* dust stirred through candlelight */
.twd { position: absolute; z-index: 4; pointer-events: none; border-radius: 50%;
  mix-blend-mode: screen;
  background: radial-gradient(circle at 40% 35%, rgba(255, 236, 190, .9),
    rgba(240, 201, 106, .35) 55%, transparent 75%);
  opacity: 0; animation: twd-drift var(--dt, 1.4s) ease-out forwards; }
@keyframes twd-drift { 0% { opacity: 0; translate: 0 0; } 16% { opacity: .9; }
  100% { opacity: 0; translate: var(--dx, 16px) var(--dy, -40px); } }
.tw-vplain { display: block; width: 100%; aspect-ratio: 3 / 4; border-radius: 8px;
  background: linear-gradient(160deg, #6e4a30, #2c1d12); }
.tw-vshadow { position: absolute; left: 50%; bottom: -6%; width: 116%; height: 9%;
  transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, .6), transparent 70%); }
.tw-snail { position: absolute; bottom: calc(var(--shelf-y, 30%) - 0.5%); width: 4.6vw; left: var(--nx, 20%);
  transform: translateX(-50%); transition: left .01s; }
.tw-snail img { width: 100%; height: auto; display: block;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .6)); }
.tw-splain { display: block; width: 100%; aspect-ratio: 3 / 2; border-radius: 60% 40% 50% 50%;
  background: linear-gradient(140deg, #a08464, #5c4028); }

/* ---- the world inside: blooms from a point as the vessel gives way ---- */
.tw-world { position: absolute; inset: 0; z-index: 4; opacity: var(--wo, 0);
  visibility: hidden; pointer-events: none; will-change: opacity; }
.tw-world.live { visibility: visible; }
.tw-world.act { pointer-events: auto; }
/* the painting is what blooms from a point; the label stays the size it is */
.tw-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transform: scale(var(--ws, .08)); transform-origin: 50% 50%;
  filter: blur(var(--wb, 12px)); will-change: transform, filter; }
.tw-plain::after { content: "\273A"; position: absolute; left: 50%; top: 44%;
  transform: translate(-50%, -50%); font-size: 44px; color: rgba(233, 224, 204, .3); }
.wv-0 { background: linear-gradient(155deg, #2c4a5e, #10202c 70%); }
.wv-1 { background: linear-gradient(155deg, #5c4028, #201108 70%); }
.wv-2 { background: linear-gradient(155deg, #2f4a3a, #101c14 70%); }
.wv-3 { background: linear-gradient(155deg, #4a3a5e, #170f24 70%); }
.wv-4 { background: linear-gradient(155deg, #6e5230, #241608 70%); }
/* you have zoomed close enough to see the paint */
.tw-grain { position: absolute; inset: 0; pointer-events: none; opacity: var(--wg, 0);
  background-image:
    repeating-linear-gradient(37deg, rgba(255, 255, 255, .035) 0 2px, transparent 2px 4px),
    repeating-linear-gradient(-51deg, rgba(0, 0, 0, .05) 0 3px, transparent 3px 6px); }

/* ---- the specimen label: the site writes on the blank card ---- */
.spec { position: absolute; left: clamp(20px, 4vw, 74px); bottom: clamp(20px, 6vh, 78px);
  z-index: 5; opacity: 0; transform: translateY(16px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.tw-world.act .spec { opacity: 1; transform: translateY(0); }
.spec-card { position: relative; width: min(780px, 52vw); }
.spec-paper { width: 100%; height: auto; display: block;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, .7)); }
/* the writing field sits inside the card's painted frame, not on it: the solid
   card is 1296 by 588 inside a 1536 by 1024 sheet, so these are measured off it */
.spec-ink { position: absolute; inset: 26% 14% 29%; overflow-y: auto;
  overscroll-behavior: contain; scrollbar-width: thin;
  scrollbar-color: rgba(90, 64, 40, .5) transparent; }
/* when the painted card is missing the ink block carries its own paper */
.spec-card.no-paper .spec-ink { position: relative; inset: auto;
  padding: 20px 22px; background: linear-gradient(175deg, #efe6cf, #ded0ad);
  border: 1px solid rgba(90, 64, 40, .45); border-radius: 2px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, .7); }
.spec-no { display: block; font-family: var(--font-ui); font-size: 11.5px;
  letter-spacing: .24em; text-transform: uppercase; color: #8a6a3a; }
.spec-title { font-family: var(--r-display); font-weight: 700;
  font-size: clamp(25px, 2.2vw, 37px); line-height: 1.05; color: #2a1c10; margin: 6px 0 10px; }
.spec-hand { font-family: var(--r-body); font-style: italic;
  font-size: clamp(17px, 1.36vw, 21px); line-height: 1.48; color: #4a3a26; margin: 0; }
.spec-more { margin-top: 8px; }
.spec-more summary { font-family: var(--font-ui); font-size: 12px; letter-spacing: .24em;
  text-transform: uppercase; color: #8a6a3a; cursor: pointer; list-style: none; }
.spec-more summary::before { content: "\203A\00a0"; }
.spec-more[open] summary::before { content: "\2039\00a0"; }
.spl { font-family: var(--r-body); font-style: italic; font-size: 16.5px; line-height: 1.5;
  color: #4a3a26; margin: 8px 0 0; }
.spl b { display: block; font-family: var(--font-ui); font-style: normal; font-weight: 500;
  font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: #8a6a3a; }
.spec-tags { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.spec-tags form { display: inline; }
.cat-tag { font-family: var(--font-ui); font-size: 12.5px; letter-spacing: .13em;
  text-transform: uppercase; color: #2a1c10; background: rgba(42, 28, 16, .06);
  border: 1px dashed rgba(42, 28, 16, .55); padding: 9px 15px; cursor: pointer;
  text-decoration: none; border-radius: 2px;
  transition: color .25s, border-color .25s, background .25s; }
.cat-tag:hover, .cat-tag:focus-visible { color: var(--cream); background: var(--walnut);
  border-color: var(--walnut); outline: none; }
.cat-wait { font-family: var(--r-body); font-style: italic; font-size: 16px; color: #7a6444; }
.cat-open { font-family: var(--font-ui); font-size: 10.5px; letter-spacing: .18em;
  text-transform: uppercase; color: #8a6a3a; }

/* ---- the candle breathes with the dive ---- */
/* the near candle: it belongs to the camera, not to the cabinet, so it is
   big and cropped by the frame instead of reading as a second small prop */
.tw-candle { position: absolute; right: clamp(-10px, -1vw, 0px); bottom: -8%;
  z-index: 6; width: clamp(150px, 15vw, 300px); pointer-events: none; }
.cn-art { width: 100%; height: auto; display: block;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .7)); }
.cn-plain { display: block; width: 46%; margin: 0 auto; aspect-ratio: 1 / 3;
  border-radius: 4px 4px 2px 2px; background: linear-gradient(180deg, #f2e6c8, #cdb98c); }
.cn-flame { position: absolute; left: 50%; top: -12%; width: 16%; aspect-ratio: 1 / 2.2;
  border-radius: 50% 50% 46% 46%;
  background: radial-gradient(50% 60% at 50% 72%, #fff6d8, #ffb84d 55%, rgba(224, 108, 28, .5) 82%, transparent);
  transform: translateX(-50%) rotate(var(--lean, 0deg)); transform-origin: 50% 100%;
  transition: transform .4s ease; }
.cn-halo { position: absolute; left: 50%; top: -60%; width: 420%; aspect-ratio: 1;
  transform: translateX(-50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(255, 206, 128, var(--halo, .16)), transparent 70%);
  transition: background .5s ease; }
.tw-bokeh { position: absolute; inset: 0; z-index: 6; pointer-events: none; opacity: var(--bk, 0);
  background:
    radial-gradient(9vw 9vw at 88% 84%, rgba(255, 214, 140, .3), transparent 70%),
    radial-gradient(6vw 6vw at 12% 22%, rgba(255, 226, 168, .18), transparent 70%),
    radial-gradient(11vw 11vw at 70% 12%, rgba(255, 198, 120, .14), transparent 70%); }

/* ---- the magnification plate ---- */
.tw-mag { position: absolute; left: clamp(14px, 2.4vw, 44px); top: clamp(14px, 3vh, 34px);
  z-index: 7; width: clamp(160px, 14vw, 270px); display: flex;
  align-items: center; justify-content: center; }
.mg-plate { width: 100%; height: auto; display: block;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .6)); }
.mg-plain { aspect-ratio: 5 / 2; border-radius: 3px; border: 2px solid #8a6a3a;
  background: linear-gradient(170deg, #d9b878, #8a6a3a); }
.mg-read { position: absolute; font-family: var(--r-display); font-weight: 700;
  font-size: clamp(22px, 1.9vw, 35px); color: #2a1c10; letter-spacing: .02em; }

/* ---- the title ---- */
.tw-titlecard { position: absolute; left: 50%; top: 16vh; z-index: 8; text-align: center;
  transform: translateX(-50%); width: min(90vw, 900px);
  transition: opacity .9s ease, transform .9s ease; }
.tw-titlecard.gone { opacity: 0; transform: translateX(-50%) scale(1.12); pointer-events: none; }
.tw-plate { font-family: var(--font-ui); font-size: 11px; letter-spacing: .32em;
  text-transform: uppercase; color: var(--gold); text-shadow: 0 1px 8px rgba(0, 0, 0, .9); }
.tw-name { font-family: var(--r-display); font-weight: 700; font-size: clamp(52px, 7vw, 124px);
  line-height: .98; color: var(--cream); margin: 10px 0 10px;
  text-shadow: 0 3px 0 rgba(20, 10, 4, .5), 0 14px 40px rgba(0, 0, 0, .7); }
.tw-name span { display: inline-block; opacity: 0; transform: scale(.2); filter: blur(8px); }
.tw-dark.lit ~ .tw-track .tw-name span { animation: zoom-on .6s cubic-bezier(.2, .8, .3, 1) forwards;
  animation-delay: calc(.35s + var(--pd, 0) * .07s); }
@keyframes zoom-on { to { opacity: 1; transform: scale(1); filter: blur(0); } }
.tw-tag { font-family: var(--r-body); font-style: italic; font-size: clamp(15px, 1.25vw, 20px);
  color: #d8c9a8; text-shadow: 0 1px 10px rgba(0, 0, 0, .9); }

/* ---- the reverse reveal ---- */
.tw-outer { position: absolute; inset: 0; z-index: 1; opacity: var(--oo, 0);
  visibility: hidden; pointer-events: none; }
.tw-outer.live { visibility: visible; }
.tw-outerart { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tw-outerline { position: absolute; left: 50%; bottom: 12%; transform: translateX(-50%);
  font-family: var(--r-body); font-style: italic; font-size: clamp(16px, 1.5vw, 24px);
  color: var(--cream); text-shadow: 0 2px 14px rgba(0, 0, 0, .9); white-space: nowrap;
  opacity: var(--ol, 0); transition: opacity .8s ease; }
/* the shrinking picture wears a frame so it reads as a thing on a shelf, and
   the instruments step out of the way while the camera keeps pulling back */
.tw-stage.receding .tw-inner { overflow: hidden;
  box-shadow: 0 0 0 2px rgba(233, 224, 204, .5), 0 34px 70px rgba(0, 0, 0, .9); }
.tw-stage.receding .tw-candle, .tw-stage.receding .tw-mag,
.tw-stage.receding .tw-bokeh { opacity: 0; transition: opacity .8s ease; }

.tw-cue { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 8;
  font-family: var(--r-body); font-style: italic; font-size: 13px;
  color: rgba(233, 224, 204, .75); text-shadow: 0 1px 8px rgba(0, 0, 0, .9);
  animation: tw-bob 3.4s ease-in-out infinite; transition: opacity .8s ease; }
.tw-cue.gone { opacity: 0; }
@keyframes tw-bob { 0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(7px); } }
.tw-bare { position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%); z-index: 8;
  font-family: var(--r-body); font-style: italic; font-size: clamp(16px, 1.4vw, 21px);
  color: var(--r-dim); text-align: center; }

/* ================= the shelf ================= */
.q-head { position: relative; z-index: 2; text-align: center; padding: 56px 24px 8px; }
.q-plate { font-family: var(--font-ui); font-size: 11px; letter-spacing: .34em;
  text-transform: uppercase; color: var(--gold); }
.q-note { font-family: var(--r-body); font-style: italic; font-size: clamp(15px, 1.2vw, 19px);
  color: var(--r-dim); margin-top: 10px; }
.shelf { position: relative; padding: 10px 0 90px; border-top: 1px solid var(--r-hair);
  background: linear-gradient(180deg, var(--r-bg), #1b100a); }
.shelf-head2 { padding-top: 68px; }
.shelf-row { position: relative; z-index: 2; display: flex; gap: clamp(20px, 2.6vw, 40px);
  flex-wrap: wrap; justify-content: center; max-width: 1480px; margin: 40px auto 0;
  padding: 0 clamp(20px, 4vw, 60px); }
.jar { position: relative; width: clamp(200px, 18vw, 270px); text-decoration: none;
  opacity: 0; transform: translateY(18px);
  transition: transform .8s cubic-bezier(.2, .7, .2, 1) var(--jd, 0ms),
    opacity .7s ease var(--jd, 0ms); }
.jar.set { opacity: 1; transform: translateY(0); }
.jar:hover { transform: translateY(-5px); transition-delay: 0ms; }
.jar-glass { position: relative; display: block; padding: 10px;
  background: linear-gradient(150deg, rgba(180, 210, 240, .16), rgba(140, 170, 200, .05) 60%);
  border: 1px solid rgba(200, 225, 250, .22); border-radius: 4px;
  box-shadow: inset 0 2px 18px rgba(180, 215, 255, .12), 0 22px 40px -22px rgba(0, 0, 0, .9); }
.jar-glass::after { content: ""; position: absolute; left: 8%; top: 4%; width: 18%; bottom: 12%;
  border-radius: 40%; background: linear-gradient(180deg, rgba(255, 255, 255, .22), transparent 70%);
  pointer-events: none; }
.jar-img { display: block; width: 100%; aspect-ratio: 2 / 1; object-fit: cover;
  background: var(--r-bg2); }
.jar-bare { background: linear-gradient(155deg, #3a2618, #1c110a); }
.jar-label { display: block; text-align: center; padding: 12px 4px 0;
  font-family: var(--r-display); font-weight: 700; font-size: 17px; color: var(--cream); }
.jar-meta { display: block; text-align: center; padding-top: 3px; font-family: var(--font-ui);
  font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--r-dim); }
.jar-done .jar-glass { border-color: rgba(240, 201, 106, .4);
  box-shadow: inset 0 2px 18px rgba(240, 201, 106, .12), 0 22px 40px -22px rgba(0, 0, 0, .9); }
.tw-empty { text-align: center; font-family: var(--r-body); font-style: italic;
  color: var(--r-dim); padding: 40px 24px 10px; }
.empty { font-family: var(--r-body); font-style: italic; color: var(--r-dim); }
.tw-wsp { position: absolute; right: 5%; bottom: 16px; font-family: var(--r-body);
  font-style: italic; font-size: 13px; color: rgba(160, 132, 100, .5); pointer-events: none; }
@media (max-width: 1400px) { .tw-wsp { display: none; } }

/* ================= closing ================= */
.closing { position: relative; min-height: 56vh; display: flex; align-items: center;
  justify-content: center; text-align: center; overflow: hidden;
  background: radial-gradient(70% 80% at 50% 116%, rgba(240, 201, 106, .09), transparent 62%),
    linear-gradient(180deg, #1b100a, #0d0705); }
.cl-copy { position: relative; z-index: 2; padding: 90px 24px; }
.cl-line { font-family: var(--r-display); font-weight: 700; font-size: clamp(36px, 4.4vw, 74px);
  color: var(--cream); }
.cl-sub { font-family: var(--r-body); font-style: italic; font-size: clamp(15px, 1.25vw, 19px);
  color: var(--r-dim); margin: 14px 0 6px; }
.po-ctas { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-top: 26px;
  justify-content: center; }
.po-cta { font-family: var(--font-ui); font-size: 12px; letter-spacing: .22em;
  text-transform: uppercase; color: #241608; background: var(--gold); padding: 14px 24px;
  text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
.po-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 34px -12px rgba(240, 201, 106, .6); }
.cl-hall { font-family: var(--r-body); font-style: italic; font-size: 16px; color: var(--r-dim);
  text-decoration: none; border-bottom: 1px dashed rgba(160, 132, 100, .5); align-self: center; }
.cl-hall:hover { color: var(--cream); }

/* ================= the flat cabinet: phones and reduced motion ================= */
.dive.flat .tw-dark { display: none; }
.dive.flat .tw-track { height: auto; }
.dive.flat .tw-stage { position: static; height: auto; overflow: visible;
  display: flex; flex-direction: column; gap: 30px; padding-bottom: 40px; }
.dive.flat .tw-inner { position: relative; inset: auto; transform: none;
  display: contents; }
.dive.flat .tw-cam { position: relative; inset: auto; order: -2; height: 34vh;
  transform: none; filter: none; overflow: hidden; }
.dive.flat .tw-plane { width: 100%; transform: none; }
.dive.flat .tw-vessel { display: none; }
.dive.flat .tw-snail { display: none; }
.dive.flat .tw-titlecard { position: relative; order: -1; left: auto; top: auto;
  transform: none; padding: 20px clamp(18px, 5vw, 44px) 0; }
.dive.flat .tw-name span { opacity: 1; transform: none; filter: none; animation: none; }
.dive.flat .tw-world { position: relative; inset: auto; opacity: 1; visibility: visible;
  transform: none; filter: none; pointer-events: auto; padding: 0 clamp(12px, 3vw, 34px); }
.dive.flat .tw-art { position: relative; display: block; width: 100%; height: auto;
  aspect-ratio: 2 / 1; border: 3px solid var(--cream); }
.dive.flat .tw-grain { display: none; }
.dive.flat .spec { position: relative; left: auto; bottom: auto; opacity: 1;
  transform: none; margin-top: 14px; }
.dive.flat .spec-card { width: 100%; }
.dive.flat .spec-paper { display: none; }
.dive.flat .spec-ink { position: relative; inset: auto; padding: 20px 22px; overflow: visible;
  background: linear-gradient(175deg, #efe6cf, #ded0ad);
  border: 1px solid rgba(90, 64, 40, .45); border-radius: 2px; }
.dive.flat .tw-candle, .dive.flat .tw-bokeh, .dive.flat .tw-mag,
.dive.flat .tw-outer, .dive.flat .tw-cue { display: none; }
/* the dive runs on phones now: the plate and the candle stay, pocket size */
@media (max-width: 719px) {
  .spec { left: 10px; right: 10px; bottom: 10px; }
  .spec-card { width: auto; }
  .tw-mag { width: 118px; left: 10px; top: 10px; }
  .mg-read { font-size: 17px; }
  .tw-candle { width: 96px; right: -6px; bottom: -3%; }
  .tw-titlecard { top: 12vh; }
}
@media (prefers-reduced-motion: reduce) {
  .tw-cue, .cn-flame, .tw-hush { animation: none; }
  .cdm { display: none; }
  .jar { opacity: 1; transform: none; transition: none; }
}