/* Diascope: a slide evening, thrown on a chalk wall */
@font-face { font-family: "Ancizar Serif"; src: url("/assets/fonts/specimen/ancizar-serif-var.woff2") format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Ancizar Serif"; src: url("/assets/fonts/specimen/ancizar-serif-var-italic.woff2") format("woff2"); font-weight: 300 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Ancizar Sans"; src: url("/assets/fonts/specimen/ancizar-sans-var.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

body.spec-diascope { margin: 0; background: #E4E0D8; }
@property --ds-bg { syntax: "<color>"; inherits: true; initial-value: #E4E0D8; }

.ds-page {
  overflow-x: clip;
  /* the wall the slides are thrown on: chalk, graphite ink, lamplight cream for projected light, juniper for the tray */
  --ds-wall: #E4E0D8; --ds-ink: #2A2B2E; --ds-cream: #FFF4DC; --ds-juniper: #23301F;
  --ds-screen: #EFECE6; --ds-shade: #D5D0C6;
  --ds-hair: rgba(42, 43, 46, .3);
  --ds-serif: "Ancizar Serif", "Iowan Old Style", Georgia, serif;
  --ds-sans: "Ancizar Sans", "Segoe UI", system-ui, sans-serif;
  --ds-ease: cubic-bezier(.2, .7, .1, 1);
  --gut: clamp(16px, 4.44vw, 64px); --gap: clamp(16px, 1.67vw, 24px);
  --dockw: 0px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px; --s9: 112px; --s10: 168px;
  --nav-h: 56px;
  --stage: calc(100svh - var(--bar-h, 40px) - var(--nav-h));
  position: relative;
  background: var(--ds-wall);
  color: var(--ds-ink);
  font-family: var(--ds-sans);
  font-size: clamp(1rem, .96rem + .15vw, 1.0625rem);
  font-weight: 440;
  line-height: 1.6;
  font-variant-numeric: lining-nums proportional-nums;
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 701px) { .ds-page { --dockw: 104px; } }
@media (min-width: 1181px) { .ds-page { --dockw: 140px; } }
.ds-page *, .ds-page *::before, .ds-page *::after { box-sizing: border-box; }
.ds-page :where(h1, h2, h3, p, ul, ol, figure, fieldset) { margin: 0; padding: 0; }
.ds-page :where(ul, ol) { list-style: none; }
.ds-page a { color: inherit; }
.ds-page :focus-visible { outline: 2px solid var(--ds-juniper); outline-offset: 2px; box-shadow: 0 0 0 4px var(--ds-cream); border-radius: 2px; }
.ds-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ds-vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ds-page em { font-family: var(--ds-serif); font-style: italic; }
.ds-page section { scroll-margin-top: calc(var(--bar-h, 40px) + var(--nav-h)); }

/* ── nav ───────────────────────────────────────────── */
.ds-nav {
  position: sticky; top: var(--bar-h, 40px); z-index: 60;
  height: var(--nav-h); display: flex; align-items: center; gap: var(--s6);
  padding: 0 var(--gut); background: var(--nav-bg, var(--ds-wall));
  box-shadow: 0 1px 0 transparent; transition: box-shadow .24s var(--ds-ease), background-color .35s var(--ds-ease), color .35s var(--ds-ease);
}
.ds-n { font-family: var(--ds-serif); font-style: italic; font-weight: 560; margin-right: .42em; font-size: 1.06em; }
.ds-nav.is-scrolled { box-shadow: 0 1px 0 var(--ds-hair); }
.ds-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; }
.ds-mark { width: 26px; height: 26px; flex: none; }
.ds-brand-name { font-family: var(--ds-serif); font-weight: 860; font-size: 20px; letter-spacing: -.01em; line-height: 1; }
.ds-nav-links { display: flex; gap: clamp(16px, 1.9vw, 30px); }
.ds-nav-tray { display: none; }
.ds-nav-links a, .ds-nav-go { white-space: nowrap; }
@media (max-width: 1280px) { .ds-nav-links a { font-size: 14px; } }
@media (max-width: 1279px) { .ds-nav-links li:nth-child(n+4) { display: none; } }
@media (max-width: 1023px) { .ds-nav-links { display: none; } }
.ds-nav-links a, .ds-nav-go { font-weight: 500; font-size: 15px; text-decoration: none; padding: 6px 0; background: linear-gradient(var(--ds-ink), var(--ds-ink)) 0 100% / 0 1px no-repeat; transition: background-size .3s var(--ds-ease); }
.ds-nav-links a:hover, .ds-nav-go:hover { background-size: 100% 1px; }
.ds-nav-go { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; padding-left: var(--s5); border-left: 1px solid var(--ds-hair); background-position: var(--s5) 100%; min-height: 32px; }
.ds-slideglyph { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--ds-juniper); stroke-width: 1.6; stroke-linejoin: round; }
.ds-textlink { appearance: none; background: none; border: 0; padding: 12px 0; color: var(--ds-ink); font: 560 15px/1.2 var(--ds-sans); cursor: pointer; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: var(--ds-hair); transition: text-decoration-color .2s; }
.ds-textlink:hover { text-decoration-color: currentColor; }
.ds-jmark { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--ds-juniper); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* the one call to action: a glass slide held up to the lamp */
.ds-go {
  display: inline-flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 22px 0 16px;
  background: var(--ds-cream); color: var(--ds-ink); text-decoration: none; border-radius: 3px;
  font: 600 16px/1 var(--ds-sans); letter-spacing: .005em;
  box-shadow: inset 0 0 0 1px rgba(42, 43, 46, .14), 0 0 0 5px rgba(222, 214, 203, .55), 0 14px 30px -18px rgba(42, 43, 46, .8), 0 0 46px -6px rgba(255, 244, 220, .85);
  transition: transform .3s var(--ds-ease), box-shadow .3s var(--ds-ease);
}
.ds-page .ds-go { color: var(--ds-ink); }
.ds-go:hover { transform: translateY(-2px); }

/* ── the beam: one rule set for every projected picture ── */
.ds-beam {
  --ds-kx: .02; --ds-ky: 0; --ds-pen: 3px; --ds-tilt: 0deg; --ds-ar: 16 / 9; --ds-spill: 14; --ds-glow: 0;
  position: relative; aspect-ratio: var(--ds-ar); transform: rotate(var(--ds-tilt));
}
.ds-beam-pic {
  position: absolute; inset: 0; isolation: isolate; background: var(--ds-cream);
  clip-path: polygon(0 0, 100% calc(var(--ds-kx) * 100%), calc(100% - var(--ds-ky) * 100%) calc(100% - var(--ds-kx) * 100%), calc(var(--ds-ky) * 100%) 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--ds-pen), #000 calc(100% - var(--ds-pen)), transparent), linear-gradient(180deg, transparent, #000 var(--ds-pen), #000 calc(100% - var(--ds-pen)), transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 var(--ds-pen), #000 calc(100% - var(--ds-pen)), transparent), linear-gradient(180deg, transparent, #000 var(--ds-pen), #000 calc(100% - var(--ds-pen)), transparent);
  mask-composite: intersect;
}
.ds-beam-pic picture, .ds-beam-pic img { display: block; width: 100%; height: 100%; }
.ds-beam-pic img { object-fit: cover; object-position: var(--ds-op, 50% 50%); transform: scale(var(--ds-zoom, 1)); transform-origin: var(--ds-op, 50% 50%); filter: sepia(.08) contrast(1.03); }
.ds-beam-pic::before, .ds-beam-pic::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.ds-beam-pic::before { z-index: 1; background: radial-gradient(ellipse 70% 70% at 50% 50%, rgba(255, 244, 220, .16), rgba(255, 244, 220, 0) 60%, rgba(42, 43, 46, .14) 100%); mix-blend-mode: soft-light; }
.ds-beam-pic::after { z-index: 2; background: #34332F; mix-blend-mode: lighten; }
.ds-first { --ds-spill: 90; --ds-glow: .9; }
.ds-beam-gl { position: absolute; left: calc(var(--ds-spill) * -1px); top: calc(var(--ds-spill) * -1px); width: calc(100% + var(--ds-spill) * 2px); height: calc(100% + var(--ds-spill) * 2px); opacity: 0; pointer-events: none; }
.ds-beam.ds-live .ds-beam-gl { opacity: 1; }
.ds-beam.ds-live .ds-beam-pic { opacity: 0; }
.ds-beam.ds-live::after { display: none; }

/* ── hero: the tray on the sill, the first slide on the wall ── */
.ds-hero {
  --tray-d: min(34vw, calc(var(--stage) * .6));
  position: relative; overflow: clip; isolation: isolate;
  padding: clamp(24px, 4.4vh, 44px) var(--gut) var(--s5);
  min-height: max(620px, var(--stage));
  background: radial-gradient(ellipse 110% 100% at 62% 40%, rgba(213, 208, 198, 0) 38%, rgba(178, 171, 159, .85) 100%), var(--ds-wall);
}
/* the beam: painted from the gate slide to the picture; dust turns in it */
.ds-cone { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .6s var(--ds-ease); }
.ds-motes { position: absolute; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .6s var(--ds-ease); }
.ds-hero.ds-coned .ds-cone, .ds-hero.ds-coned .ds-motes { opacity: 1; }
.ds-hero.is-cycle .ds-cone, .ds-hero.is-cycle .ds-motes { animation: ds-flick .9s linear both; }
@keyframes ds-flick { 0% { opacity: 1; } 8% { opacity: .15; } 30%, 40% { opacity: 0; } 46% { opacity: .9; } 52% { opacity: .3; } 60% { opacity: 1; } 66% { opacity: .6; } 74%, 100% { opacity: 1; } }
.ds-nogl .ds-cone, .ds-nogl .ds-motes { display: none; }
.ds-hero > :not(.ds-cone):not(.ds-motes):not(.ds-tray) { position: relative; z-index: 1; }
/* the projector is low and to the left, so the far edges of the picture open out a little */
.ds-first { --ds-kx: -.032; --ds-kl: .032; --ds-ky: .008; }
.ds-first .ds-beam-pic { clip-path: polygon(0 calc(var(--ds-kl) * 100%), 100% 0, calc(100% - var(--ds-ky) * 100%) 100%, calc(var(--ds-ky) * 100%) calc(100% - var(--ds-kl) * 100%)); }
.ds-h1 { font-family: var(--ds-serif); font-weight: 880; font-size: clamp(2.25rem, .9rem + 3.1vw, 4.125rem); line-height: .98; letter-spacing: -.026em; color: var(--ds-ink); text-wrap: balance; }
.ds-hero-lede { font-size: clamp(1.0625rem, .98rem + .25vw, 1.1875rem); line-height: 1.55; max-width: 26em; }
.ds-hero-short { display: none; }
.ds-hero-go { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4) var(--s5); }
.ds-go-note { max-width: 13em; font-size: 1rem; line-height: 1.4; font-weight: 580; }
.ds-caption { max-width: 36em; }
.ds-cap-place { font-family: var(--ds-serif); font-size: clamp(1.375rem, 1rem + .9vw, 2.125rem); line-height: 1.08; font-weight: 560; }
.ds-cap-place em { font-weight: inherit; }
.ds-cap-line { margin-top: var(--s2); font-size: 1.0625rem; line-height: 1.5; max-width: 32em; }
.ds-lede { font-size: clamp(1.125rem, 1rem + .45vw, 1.375rem); line-height: 1.5; max-width: 30em; }

.ds-tray { --ds-tray-x: .5; --ds-tray-y: .56; --ds-tray-d: .84; --ds-tray-el: 34; --ds-tray-gate: 338; position: relative; outline: none; touch-action: pan-y; cursor: grab; z-index: 2; }
.ds-tray:active { cursor: grabbing; }
.ds-tray:focus-visible { outline: none; box-shadow: none; }
/* focus: the lamp comes up under the tray, and the line beside it is underlined; no drawn outline */
.ds-tray::after { content: ""; position: absolute; left: 4%; right: 4%; bottom: -2%; height: 42%; z-index: -1; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(255, 244, 220, .62), rgba(255, 244, 220, 0)); opacity: 0; transition: opacity .3s var(--ds-ease); }
.ds-tray:focus-visible::after { opacity: 1; }
.ds-hero:has(.ds-tray:focus-visible) .ds-tray-line span { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.ds-tray-gl, .ds-load-tray .ds-tray-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ds-tray-list { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; gap: var(--s3); width: min(100%, 340px); transition: opacity .4s var(--ds-ease); }
.ds-tray-pick {
  appearance: none; display: grid; grid-template-columns: 64px 22px 1fr; align-items: center; gap: 12px; text-align: left;
  width: 100%; padding: 0; border: 0; background: none; color: var(--ds-ink); cursor: pointer;
  font: italic 460 1.0625rem/1.2 var(--ds-serif);
}
.ds-tray-pick em { font-weight: inherit; }
.ds-thumb {
  --tw: 64px; display: block; width: var(--tw); height: var(--tw); border: calc(var(--tw) * .08) solid #D9D0C4; border-top-width: calc(var(--tw) * .17); border-radius: 3px;
  background: url("/assets/work/diascope/tray-sm.webp") no-repeat; background-size: calc(var(--tw) * 6.72) calc(var(--tw) * 4.2);
  background-position: calc(mod(var(--cell), 8) * var(--tw) * -.84) calc(round(down, var(--cell) / 8, 1) * var(--tw) * -.84 - var(--tw) * .04);
  box-shadow: 0 1px 0 rgba(42, 43, 46, .3), 0 10px 18px -12px rgba(42, 43, 46, .7);
}
.ds-thumb-empty { background: var(--ds-cream); }
.ds-tray-pick[aria-pressed="true"] .ds-thumb { border-color: var(--ds-cream); box-shadow: 0 0 0 2px var(--ds-juniper), 0 0 26px -2px rgba(255, 244, 220, .9); }
.ds-tray.ds-live .ds-tray-list { opacity: 0; pointer-events: none; }
.ds-tray.ds-live .ds-tray-list .ds-tray-pick { visibility: hidden; }
.ds-tray-line { display: flex; gap: 10px; align-items: flex-start; font-size: 1rem; line-height: 1.45; letter-spacing: .005em; font-weight: 600; max-width: 34em; }
.ds-tray-line .ds-jmark { margin-top: -1px; }

/* 1181 and up: host's words at the left, the picture on the wall at the right, the tray on the sill */
@media (min-width: 1024px) {
  .ds-hero { display: grid; grid-template-columns: minmax(0, 34fr) minmax(0, 4fr) minmax(0, 62fr); align-content: start; }
  .ds-h1 { grid-column: 3; grid-row: 1; }
  .ds-hero-talk { grid-column: 1; grid-row: 2; align-self: start; margin-top: 6px; }
  .ds-hero-go { margin-top: var(--s6); }
  .ds-first { grid-column: 3; grid-row: 2; align-self: start; margin-top: clamp(16px, 2.6vh, 26px); width: min(100%, calc((var(--stage) - 300px) * 16 / 9)); min-width: 440px; }
  .ds-caption { grid-column: 3; grid-row: 3; margin-top: var(--s5); }
  .ds-tray-line { grid-column: 3; grid-row: 4; margin-top: var(--s4); }
  .ds-tray { position: absolute; left: calc(var(--gut) - var(--tray-d) * .08); bottom: 0; width: calc(var(--tray-d) * 1.2); height: calc(var(--tray-d) * 1.1); --ds-tray-y: .5; }
  .ds-tray-list { left: 50%; top: 58%; }
}
@media (min-width: 1024px) and (max-height: 820px) { .ds-hero { --tray-d: min(30vw, calc(var(--stage) * .5)); } .ds-hero-lede { font-size: 1rem; } .ds-hero-go { margin-top: var(--s5); } }
@media (min-width: 1024px) and (max-width: 1180px) {
  .ds-hero { grid-template-columns: minmax(0, 37fr) minmax(0, 3fr) minmax(0, 60fr); --tray-d: min(30vw, calc(var(--stage) * .46)); }
  .ds-hero-lede { font-size: 1rem; }
}

/* up to 1023: stacked, the tray on the sill below the picture */
@media (max-width: 1023px) {
  .ds-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "h1 h1" "beam beam" "tray cap" "tray go" "tray line" "lede lede"; align-content: start; column-gap: var(--s6); --tray-d: min(46vw, 400px); }
  .ds-first { --ds-kx: -.018; --ds-kl: .018; --ds-ky: .02; }
  .ds-hero-talk { display: contents; }
  .ds-h1 { grid-area: h1; }
  .ds-first { grid-area: beam; margin-top: 26px; width: 100%; }
  .ds-caption { grid-area: cap; margin-top: var(--s7); align-self: end; }
  .ds-tray { grid-area: tray; margin-top: var(--s7); width: calc(var(--tray-d) * 1.14); height: calc(var(--tray-d) * .98); justify-self: start; margin-left: calc(var(--tray-d) * -.07); --ds-tray-el: 38; --ds-tray-y: .55; --ds-tray-d: .86; --ds-tray-gate: 296; }
  .ds-hero-go { grid-area: go; margin: var(--s5) 0 var(--s4); }
  .ds-tray-line { grid-area: line; }
  .ds-hero-lede { grid-area: lede; margin-top: var(--s7); max-width: 34em; }
}
@media (max-width: 700px) {
  .ds-page { --nav-h: 52px; }
  .ds-nav { gap: var(--s4); }
  .ds-nav-links { display: none; }
  .ds-nav-go { padding-left: var(--s4); background-position: var(--s4) 100%; }
  .ds-hero { grid-template-columns: minmax(0, 1fr); grid-template-areas: "h1" "short" "go" "beam" "tray" "cap" "line"; column-gap: var(--s3); padding-top: 18px; padding-bottom: var(--s5); min-height: 0; }
  .ds-h1 { font-size: clamp(1.875rem, 1rem + 4.4vw, 2.5rem); }
  .ds-hero-short { display: block; grid-area: short; margin-top: var(--s2); font-size: 1rem; line-height: 1.45; font-weight: 450; max-width: 30em; }
  .ds-hero-lede { display: none; }
  .ds-hero .ds-first { --ds-ar: 3 / 2; --ds-kx: 0; --ds-kl: 0; --ds-ky: .03; --ds-pen: 2px; --ds-spill: 36; margin-top: 16px; }
  .ds-caption { margin-top: var(--s2); }
  .ds-cap-place { font-size: 1.3125rem; }
  .ds-cap-line { margin-top: var(--s1); font-size: 1rem; }
  .ds-tray-line { font-size: .9375rem; margin-top: var(--s3); }
  .ds-tray { justify-self: stretch; margin: 26px calc(var(--gut) * -1) 0; width: auto; height: auto; aspect-ratio: 16 / 10; touch-action: pan-y; --ds-tray-gate: 270; --ds-tray-el: 40; --ds-tray-y: .98; --ds-tray-d: 1.22; }
  .ds-hero-go { grid-area: go; display: flex; align-items: center; gap: var(--s4); margin: var(--s4) 0 0; }
  .ds-go { min-height: 48px; padding: 0 18px 0 14px; font-size: 16px; gap: 10px; }
  .ds-go-note { display: none; }
}
@media (max-width: 700px) and (max-height: 600px) {
  .ds-h1 { font-size: 1.75rem; }
  .ds-hero .ds-first { --ds-ar: 16 / 9; margin-top: 10px; }
  .ds-tray { margin-top: 18px; aspect-ratio: 16 / 9; }
  .ds-cap-line { display: none; }
  .ds-cap-place { font-size: 1.25rem; }
  .ds-hero-short { font-size: .9375rem; }
}

/* ── the dock: a small projector at the page's edge, the tray on top, the slide on screen named on its body ── */
.ds-dock {
  --ds-tray-x: .5; --ds-tray-y: .6; --ds-tray-d: .86; --ds-tray-el: 40; --ds-tray-gate: 270;
  position: fixed; z-index: 70; right: 12px; top: calc(50% + var(--bar-h, 40px) / 2 + var(--nav-h) / 2); transform: translate(8px, -50%);
  width: calc(var(--dockw) - 24px); display: grid; justify-items: stretch;
  opacity: 0; visibility: hidden; transition: opacity .24s var(--ds-ease), transform .24s var(--ds-ease), visibility 0s .24s;
}
@media (min-width: 1181px) { .ds-dock { right: 16px; width: calc(var(--dockw) - 32px); } }
.ds-dock.is-docked { opacity: 1; visibility: visible; transform: translate(0, -50%); transition: opacity .24s var(--ds-ease), transform .24s var(--ds-ease), visibility 0s; }
.ds-dock-house { position: relative; aspect-ratio: 1 / .86; margin-bottom: -14%; z-index: 1; }
.ds-dock-gl { position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; }
.ds-dock-label {
  position: relative; display: grid; gap: 2px; padding: calc(14% + 8px) 10px 11px 12px;
  background: linear-gradient(180deg, #2E3D29, var(--ds-juniper) 60%, #1B2618); color: var(--ds-cream); border-radius: 10px 10px 12px 12px;
  box-shadow: inset 0 1px 0 rgba(222, 214, 203, .35), inset 0 -2px 0 rgba(0, 0, 0, .25), 0 16px 28px -18px rgba(42, 43, 46, .9);
  font: 560 12px/1.25 var(--ds-sans); letter-spacing: .01em;
}
/* the lens on the side facing the page, lit */
.ds-dock-label::before { content: ""; position: absolute; left: -7px; top: calc(50% + 7% - 9px); width: 14px; height: 18px; border-radius: 4px 0 0 4px; background: radial-gradient(circle at 70% 50%, var(--ds-cream), #E8D6B4 55%, #9A8F84); box-shadow: -6px 0 16px 2px rgba(255, 244, 220, .55); }
.ds-dock-n b { font-weight: 700; }
.ds-dock-now { font: italic 500 15px/1.15 var(--ds-serif); text-wrap: balance; }
@media (max-width: 1180px) { .ds-dock-label { padding-left: 9px; padding-right: 7px; } .ds-dock-now { font-size: 13px; } }
.ds-dock-list { position: absolute; inset: 0; }
.ds-dock-list a { position: absolute; right: calc(100% + 10px); top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 10px; white-space: nowrap; padding: 8px 14px 8px 8px; background: var(--ds-cream); color: var(--ds-ink); border-radius: 3px; text-decoration: none; font: 560 15px/1.2 var(--ds-sans); clip-path: inset(50%); opacity: 0; }
.ds-dock-list a .ds-thumb { --tw: 32px; }
.ds-dock-list a:focus-visible { clip-path: none; opacity: 1; outline-offset: 3px; }
.ds-dock:not(.ds-live) .ds-dock-house { visibility: hidden; }
.ds-nogl .ds-dock-house { display: none; }
.ds-dock:not(.ds-live) .ds-dock-label { padding-top: 11px; }
@media (max-width: 700px) {
  .ds-nav-tray { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 6px; margin-right: calc(var(--s2) * -1); border: 0; background: none; color: inherit; font: 600 14px/1 var(--ds-sans); cursor: pointer; }
  .ds-nav-tray .ds-thumb { --tw: 26px; box-shadow: 0 0 0 1.5px var(--ds-juniper); }
  .ds-nav-tray-n b { font: italic 600 16px/1 var(--ds-serif); }
  .ds-dock, .ds-dock.is-docked { position: fixed; inset: auto; top: calc(var(--bar-h, 40px) + var(--nav-h)); left: 0; right: 0; width: auto; transform: none; opacity: 1; visibility: visible; display: block; height: 0; transition: none; }
  .ds-dock-house, .ds-dock-label { display: none; }
  .ds-dock-list { position: absolute; inset: 0 0 auto 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4) var(--s3); padding: var(--s5) var(--gut) var(--s6); background: var(--ds-screen); color: var(--ds-ink); box-shadow: 0 18px 40px -24px rgba(42, 43, 46, .7), inset 0 1px 0 var(--ds-hair); transform: translateY(-8px); opacity: 0; visibility: hidden; transition: transform .26s var(--ds-ease), opacity .26s var(--ds-ease), visibility 0s .26s; }
  .ds-dock.is-open .ds-dock-list { transform: none; opacity: 1; visibility: visible; transition: transform .26s var(--ds-ease), opacity .26s var(--ds-ease), visibility 0s; }
  .ds-dock-list a { position: relative; right: auto; top: auto; transform: none; clip-path: none; opacity: 1; flex-direction: column; align-items: flex-start; gap: 6px; padding: 0; background: none; white-space: normal; font-size: .875rem; }
  .ds-dock-list a .ds-thumb { --tw: 56px; }
  .ds-dock-list a[aria-current="true"] .ds-thumb { border-color: var(--ds-cream); box-shadow: 0 0 0 2px var(--ds-juniper); }
}
@media (max-width: 359px) { .ds-brand-name { font-size: 18px; } .ds-nav-go .ds-slideglyph { display: none; } .ds-nav { gap: var(--s3); } }

/* ── the sections below the first screen ──────────── */
.ds-page > section:not(.ds-hero) { padding: clamp(64px, 7vw, 120px) calc(var(--gut) + var(--dockw)) clamp(64px, 7vw, 120px) var(--gut); position: relative; }
/* the room: one chalk wall the slides are thrown on; the pale screen-white bands hold the tray and the form;
   the only bright field in a section is the light a slide throws */
.ds-page > section:not(.ds-hero), .ds-foot { background: var(--ds-bg); }
.ds-journeys, .ds-sleep, .ds-between, .ds-planner { --ds-bg: var(--ds-wall); }
.ds-load, .ds-guides, .ds-start { --ds-bg: var(--ds-screen); }
/* thrown on the wall: the pictures spill lamplight past their edge */
.ds-lit .ds-beam { --ds-glow: .7; --ds-spill: 80; }
/* the throw from the projector at the page's edge sits between the wall and everything on it */
.ds-throw { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.ds-journeys-head, .ds-journey-cell, .ds-jcontrols { position: relative; z-index: 2; }
.ds-h2 { font-family: var(--ds-serif); font-weight: 870; font-size: clamp(2.125rem, 1.2rem + 2.6vw, 4rem); line-height: 1.02; letter-spacing: -.015em; text-wrap: balance; }
.ds-mid { position: absolute; left: 0; top: 45%; width: 1px; height: 0; }

/* 2 · tonight's slides */
.ds-journeys { display: grid; gap: var(--s7) var(--gap); grid-template-columns: repeat(12, minmax(0, 1fr)); }
.ds-journeys-head { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); align-items: end; }
.ds-h2-journeys { grid-column: 1 / span 6; font-size: clamp(2.5rem, 1.1rem + 4vw, 5.5rem); font-weight: 900; letter-spacing: -.03em; line-height: .93; }
.ds-journeys-head .ds-lede { grid-column: 8 / -1; font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); }
.ds-journey-cell { grid-column: 1 / -1; display: grid; }
.ds-journey { grid-area: 1 / 1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); align-items: end; }
.ds-js .ds-journey:not(.is-on) { visibility: hidden; }
.ds-js .ds-journeys:not(.ds-near) .ds-journey picture { display: none; }
.ds-jbeam { grid-column: 4 / -1; grid-row: 1; }
.ds-jwords { grid-column: 1 / span 3; grid-row: 1; align-self: end; padding-bottom: 2px; }
.ds-jmark-big { width: 34px; height: 34px; margin-bottom: var(--s4); }
.ds-jplace { font-family: var(--ds-serif); font-weight: 600; font-size: clamp(1.75rem, 1rem + 1.7vw, 2.75rem); line-height: 1.06; letter-spacing: -.005em; transition: font-weight .5s var(--ds-ease); }
.ds-jnote { margin-top: var(--s3); font-size: .9375rem; font-weight: 560; }
.ds-jlines { margin-top: var(--s5); display: grid; gap: var(--s3); font-size: 1.0625rem; line-height: 1.5; }
.ds-jlines li { padding-top: var(--s3); border-top: 1px solid var(--ds-hair); }
.ds-jcontrols { grid-column: 4 / -1; display: flex; justify-content: space-between; gap: var(--s6); margin-top: calc(var(--s5) * -1); }
.ds-jcontrols em { font-weight: 500; font-size: 1.15em; }
.ds-stack .ds-journey:not(.is-on) { visibility: visible; }
.ds-stack .ds-journey-cell { gap: var(--s9); }
.ds-stack .ds-journey { grid-area: auto; }
.ds-stack .ds-jcontrols { display: none; }
/* with scripting on, the other journeys and the pinned lengths hold from the first paint, so lazy pictures stay lazy */
@media (scripting: enabled) {
  .ds-journeys:not(.ds-near):not(.ds-stack) .ds-journey picture { display: none; }
}
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .ds-load { min-height: 230vh; }
}
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) and (max-width: 700px) and (max-height: 600px) {
  .ds-load { min-height: 0; }
}
@media (scripting: none) {
  .ds-journeys .ds-journey-cell { gap: var(--s9); }
  .ds-journeys .ds-journey { grid-area: auto; }
  .ds-journeys .ds-jcontrols { display: none; }
  .ds-sleep .ds-answers-text { display: grid; }
  .ds-sleep .ds-spot, .ds-sleep .ds-answer { display: none; }
  .ds-dock { display: none; }
}

/* 3 · loading your tray */
.ds-page > section.ds-load { padding: 0; }
.ds-load-stage { position: relative; display: grid; grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); gap: clamp(24px, 3vw, 56px); align-items: center; min-height: var(--stage); padding: var(--s8) calc(var(--gut) + var(--dockw)) var(--s8) var(--gut); overflow: clip; }
.ds-load-tray { position: relative; align-self: stretch; min-height: 420px; }
.ds-load-tray { --ds-tray-x: .5; --ds-tray-y: .56; --ds-tray-d: .9; --ds-tray-el: 46; --ds-tray-gate: 90; }
.ds-load-list { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: var(--s3); }
.ds-load-list .ds-thumb { --tw: clamp(48px, 6vw, 84px); opacity: .5; filter: grayscale(.7); transition: opacity .4s, filter .4s, transform .4s var(--ds-ease); }
.ds-load-slide.is-lit .ds-thumb { opacity: 1; filter: none; transform: translateY(-10px); box-shadow: 0 0 0 2px var(--ds-cream), 0 0 26px rgba(255, 244, 220, .8); }
.ds-load-tray.ds-live .ds-load-list { display: none; }
.ds-load-words { display: grid; gap: var(--s4); align-content: center; max-width: 40em; }
.ds-h2-small { font-weight: 860; font-size: clamp(1.625rem, 1.3rem + .8vw, 2.125rem); letter-spacing: -.01em; }
.ds-load-lede { font-size: 1.0625rem; max-width: 32em; }
.ds-load-sentence { font-family: var(--ds-serif); font-weight: 300; font-size: clamp(1.5rem, .8rem + 2.3vw, 3rem); line-height: 1.14; letter-spacing: -.012em; margin: var(--s4) 0 var(--s2); }
.ds-noun { font-weight: 880; }
.ds-load-ps { display: grid; gap: var(--s4); max-width: 34em; }
.ds-load-p { font-size: 1.125rem; line-height: 1.55; }
.ds-load-p em { font-weight: 640; margin-right: .2em; font-size: 1.1em; }
.ds-load-end { display: grid; gap: var(--s3); margin-top: var(--s4); }
.ds-load-last { font-family: var(--ds-serif); font-weight: 880; font-size: clamp(1.625rem, 1.1rem + 1.4vw, 2.5rem); line-height: 1.1; }
.ds-load-close { max-width: 34em; }
@media (prefers-reduced-motion: no-preference) {
  .ds-js .ds-load { height: 230vh; }
  .ds-js .ds-load-stage { position: sticky; top: calc(var(--bar-h, 40px) + var(--nav-h)); height: var(--stage); min-height: 0; padding-top: var(--s5); padding-bottom: var(--s5); }
  .ds-js .ds-load-ps { display: grid; }
  .ds-js .ds-load-p { grid-area: 1 / 1; }
  .ds-js .ds-noun { font-weight: 300; transition: font-weight .4s var(--ds-ease); }
  .ds-js .ds-noun.is-lit { font-weight: 880; }
  .ds-js .ds-load-p, .ds-js .ds-load-end { opacity: 0; transform: translateY(6px); transition: opacity .4s var(--ds-ease), transform .4s var(--ds-ease); }
  .ds-js .ds-load-p.is-lit, .ds-js .ds-load-end.is-lit { opacity: 1; transform: none; }
  @supports (animation-timeline: view()) {
    .ds-js .ds-load { view-timeline: --ds-load block; }
    .ds-js .ds-noun { transition: none; animation: ds-weigh linear both; animation-timeline: --ds-load; }
    .ds-js .ds-n1 { animation-range: contain 8% contain 20%; }
    .ds-js .ds-n2 { animation-range: contain 30% contain 42%; }
    .ds-js .ds-n3 { animation-range: contain 52% contain 64%; }
    .ds-js .ds-n4 { animation-range: contain 74% contain 86%; }
    .ds-js .ds-load-p { transition: none; animation: ds-para linear both; animation-timeline: --ds-load; }
    .ds-js .ds-p1 { animation-range: contain 8% contain 31%; }
    .ds-js .ds-p2 { animation-range: contain 30% contain 53%; }
    .ds-js .ds-p3 { animation-range: contain 52% contain 75%; }
    .ds-js .ds-p4 { animation-name: ds-para-last; animation-range: contain 74% contain 86%; }
    .ds-js .ds-load-end { transition: none; animation: ds-para-last linear both; animation-timeline: --ds-load; animation-range: contain 88% contain 96%; }
  }
}
@keyframes ds-weigh { from { font-weight: 300; } to { font-weight: 880; } }
@keyframes ds-para { 0% { opacity: 0; transform: translateY(6px); } 16%, 84% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-4px); } }
@keyframes ds-para-last { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* 4 · where you'll sleep */
.ds-page > section.ds-sleep { padding-top: var(--s8); padding-bottom: var(--s8); }
.ds-sleep-stage { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 26fr) auto minmax(0, 32fr); grid-template-areas: "ans wall words"; gap: 0 clamp(28px, 3.4vw, 56px); align-items: center; }
.ds-sleep-words { grid-area: words; display: grid; gap: var(--s5); align-content: center; }
.ds-h2-large { font-size: clamp(2.25rem, 1.2rem + 3vw, 4.25rem); font-weight: 880; letter-spacing: -.022em; }
.ds-sleep-lines { display: grid; gap: var(--s4); }
.ds-sleep-lines li { padding-top: var(--s4); border-top: 1px solid var(--ds-hair); }
.ds-answer { grid-area: ans; align-self: stretch; position: relative; min-height: 8em; }
.ds-answer > p { position: absolute; right: 0; max-width: 14em; text-align: right; top: var(--ay, 50%); transform: translateY(-50%); }
.ds-answer-hint { font-size: 1.1875rem; line-height: 1.45; font-weight: 500; }
.ds-answer-hint em { font-weight: 640; font-size: 1.12em; }
.ds-answer-text { font-family: var(--ds-serif); font-style: italic; font-weight: 460; font-size: clamp(1.5rem, 1.1rem + 1vw, 2rem); line-height: 1.25; text-wrap: pretty; animation: ds-answer .42s var(--ds-ease) both; }
/* a lead of light from the answer to the point it answers */
.ds-answer-text::after { content: ""; position: absolute; top: 50%; left: calc(100% + 14px); width: max(0px, calc(var(--lead, 0px) - 14px)); height: 1.5px; background: linear-gradient(90deg, rgba(42, 43, 46, .12), var(--ds-ink)); transform-origin: 0 50%; animation: ds-lead .42s var(--ds-ease) .12s both; }
@keyframes ds-lead { from { transform: scaleX(0); } to { transform: none; } }
@keyframes ds-answer { from { opacity: 0; translate: 0 6px; } to { opacity: 1; translate: 0 0; } }
.ds-wall { grid-area: wall; --ds-ar: 2 / 3; --ds-kx: 0; --ds-ky: .015; height: min(660px, calc(var(--stage) - 96px)); width: auto; outline-offset: 8px; }
.ds-wall:focus-visible { outline: 2px solid var(--ds-ink); box-shadow: none; }
.ds-spot { color: var(--ds-ink); position: absolute; left: calc(var(--x) * 100%); top: calc(var(--y) * 100%); width: 44px; height: 44px; margin: -22px 0 0 -22px; border: 0; padding: 0; border-radius: 50%; background: none; cursor: pointer; z-index: 3; }
/* each point is a small numbered light on the picture, with a quiet ring that pulses a few times */
.ds-spot-n { position: absolute; left: 10px; top: 10px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--ds-cream); color: var(--ds-juniper); font: italic 650 14px/1 var(--ds-serif); box-shadow: 0 0 0 3px rgba(35, 48, 31, .55), 0 0 18px 2px rgba(255, 244, 220, .85); transition: background-color .2s, color .2s, transform .2s var(--ds-ease); }
.ds-spot::before { content: ""; position: absolute; left: 8px; top: 8px; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--ds-cream); opacity: 0; animation: ds-ping 2.6s var(--ds-ease) .6s 4; }
.ds-spot:nth-of-type(2)::before { animation-delay: 1.1s; }
.ds-spot:nth-of-type(3)::before { animation-delay: 1.6s; }
.ds-spot.is-on .ds-spot-n { background: var(--ds-juniper); color: var(--ds-cream); transform: scale(1.12); box-shadow: 0 0 0 3px var(--ds-cream), 0 0 22px 4px rgba(255, 244, 220, .9); }
@keyframes ds-ping { 0% { opacity: .9; transform: scale(.8); } 70%, 100% { opacity: 0; transform: scale(1.9); } }
.ds-answers-text { display: none; gap: var(--s3); grid-column: 1 / -1; margin-top: var(--s6); }
@media (prefers-reduced-motion: no-preference) {
  .ds-js .ds-sleep { height: 220vh; }
  .ds-js .ds-sleep-stage { position: sticky; top: calc(var(--bar-h, 40px) + var(--nav-h) + 24px); }
  .ds-js .ds-sleep-lines li { opacity: .0; transform: translateY(6px); transition: opacity .42s var(--ds-ease), transform .42s var(--ds-ease); }
  .ds-js .ds-sleep-lines li.is-lit { opacity: 1; transform: none; }
}

/* 5 · who meets you */
.ds-guides { display: grid; grid-template-columns: minmax(0, 38fr) minmax(0, 62fr); gap: var(--s7) clamp(40px, 7vw, 140px); align-items: center; }
.ds-page > section.ds-guides { padding-top: var(--s8); padding-bottom: var(--s8); }
.ds-mountframe {
  position: relative; justify-self: center; width: min(100%, 480px); padding: 46px 22px 24px;
  background: linear-gradient(180deg, #E6DED2, #D8CEC1 70%, #CFC4B6); border-radius: 7px; transform: rotate(-1.4deg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -2px 0 rgba(42, 43, 46, .14), 0 34px 46px -30px rgba(42, 43, 46, .75);
}
.ds-mf-strip { position: absolute; left: 22px; right: 24px; top: 10px; height: 28px; display: flex; align-items: center; justify-content: space-between; color: var(--ds-ink); }
.ds-mf-strip .ds-jmark { stroke: var(--ds-ink); width: 24px; height: 24px; }
.ds-mf-no { font: italic 680 1.5rem/1 var(--ds-serif); }
.ds-guide-beam { --ds-ar: 1 / 1; --ds-kx: .012; --ds-spill: 0; width: 100%; }
.ds-guide-beam .ds-beam-pic { background: var(--ds-cream); }
@media (prefers-reduced-motion: no-preference) {
  .ds-js .ds-mountframe:not(.is-in) { opacity: 0; transform: translateY(-40px) rotate(-4deg); }
  .ds-js .ds-mountframe.is-in { animation: ds-mount-in .7s cubic-bezier(.3, .7, .3, 1) both; }
  .ds-js .ds-mountframe.is-in .ds-guide-beam { animation: ds-gate .9s linear .3s both; }
}
@keyframes ds-mount-in { 0% { opacity: 0; transform: translateY(-40px) rotate(-4deg); } 40% { opacity: 1; } 70% { transform: translateY(5px) rotate(-.8deg); } 100% { opacity: 1; transform: rotate(-1.4deg); } }
/* the gate change: bare lamplight on the wall, then the slide catches it */
@keyframes ds-gate { 0%, 22% { filter: brightness(1.9) contrast(.22) saturate(.3); } 34% { filter: brightness(1.2) contrast(.85); } 42% { filter: brightness(1.55) contrast(.45) saturate(.5); } 54% { filter: brightness(1.1) contrast(.95); } 100% { filter: none; } }
.ds-guides-words { display: grid; gap: var(--s5); }
.ds-h2-guides { font-family: var(--ds-sans); font-weight: 760; font-size: clamp(1.25rem, 1.1rem + .4vw, 1.5rem); letter-spacing: 0; }
.ds-guides-lede { font-size: 1.0625rem; max-width: 34em; }
.ds-questions { display: grid; gap: var(--s1); margin: var(--s4) 0; }
.ds-questions em { font-weight: 600; font-size: clamp(1.625rem, 1rem + 2vw, 3rem); line-height: 1.2; letter-spacing: -.01em; }
.ds-questions li:nth-child(even) { padding-left: clamp(16px, 4vw, 72px); }
.ds-guides-close { font-weight: 560; }

/* 6 · the days between */
.ds-between { display: grid; gap: var(--s6) var(--gap); grid-template-columns: repeat(12, minmax(0, 1fr)); }
.ds-between-head { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s4) var(--s7); }
.ds-h2-between { font-size: clamp(2.75rem, 1rem + 6vw, 7.5rem); font-weight: 900; letter-spacing: -.035em; line-height: .9; }
.ds-between-lede { max-width: 22em; font-size: 1.0625rem; }
.ds-band-wrap { grid-column: 1 / span 7; position: relative; align-self: center; }
.ds-band { --ds-kx: .015; --ds-pen: 3px; --ds-spill: 0; }
.ds-band-wrap.is-cycle .ds-band { animation: ds-gate .8s linear both; }
/* the tray's slot number for this slide */
.ds-slot-no { position: absolute; left: -16px; top: -18px; z-index: 2; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--ds-juniper); color: var(--ds-cream); box-shadow: 0 0 0 4px var(--ds-bg); }
.ds-slot-no b { font: italic 680 1.375rem/1 var(--ds-serif); }
.ds-between-lines { grid-column: 3 / span 8; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5) var(--s7); font-size: 1.1875rem; line-height: 1.5; }
.ds-between-lines li { padding-top: var(--s3); border-top: 1px solid var(--ds-hair); }
.ds-poster { grid-column: 8 / -1; align-self: center; font-family: var(--ds-serif); font-weight: 300; font-size: clamp(1.5rem, .8rem + 1.9vw, 2.625rem); line-height: 1.14; letter-spacing: -.01em; }
.ds-poster em { font-weight: 560; }
.ds-pz { transition: font-weight .5s var(--ds-ease); }
@media (prefers-reduced-motion: no-preference) {
  .ds-js:not(.ds-nogl) .ds-pz.is-on { font-weight: 560; }
}
.ds-between-close { grid-column: 3 / span 8; font-family: var(--ds-serif); font-weight: 880; font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem); line-height: 1.1; }

/* 7 · one planner: the empty slide */
.ds-planner-stage { position: relative; max-width: 1180px; margin: 0 auto; padding: var(--s7) 0; }
.ds-empty { position: absolute; top: 0; bottom: 0; left: 30%; right: 0; --ds-kx: .02; --ds-pen: 3px; aspect-ratio: auto; }
.ds-empty .ds-beam-pic { background: radial-gradient(ellipse 70% 80% at 46% 48%, #FFFBF0, var(--ds-cream) 55%, #F6E6C8 100%); }
.ds-empty .ds-beam-pic::before, .ds-empty .ds-beam-pic::after { content: none; }
.ds-empty { box-shadow: 0 30px 50px -40px rgba(42, 43, 46, .55); }
.ds-h2-planner { position: relative; font-size: clamp(2.25rem, 1.2rem + 3vw, 4.5rem); font-weight: 900; letter-spacing: -.025em; }
.ds-pl-a { display: block; }
.ds-pl-b { display: block; margin-left: calc(30% + var(--s6)); }
.ds-planner-in { position: relative; margin: var(--s7) 0 0 calc(30% + var(--s6)); max-width: 30em; font-size: 1.1875rem; line-height: 1.55; padding-right: var(--s6); }
.ds-planner-note { max-width: 44em; margin: var(--s6) 0 0 30%; font-size: 1rem; line-height: 1.5; font-weight: 450; }

/* 8 · start a tray */
.ds-start { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s7) var(--gap); }
.ds-start-head { grid-column: 1 / span 5; display: grid; gap: var(--s5); align-content: start; }
.ds-h2-start { font-size: clamp(2.125rem, 1.4rem + 1.8vw, 3rem); }
/* the empty tray: four blank slide mounts; each answer is written on one, and it drops into the rail */
.ds-mounts-wrap { margin-top: var(--s4); display: grid; gap: var(--s4); }
.ds-mounts-cap { font-size: .9375rem; font-weight: 560; line-height: 1.45; max-width: 24em; }
.ds-mounts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); padding: 0 var(--s2) 12px; position: relative; max-width: 440px; }
.ds-mounts::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 14px; border-radius: 3px 3px 7px 7px; background: linear-gradient(180deg, #34452E, var(--ds-juniper) 50%, #182215); box-shadow: inset 0 1px 0 rgba(222, 214, 203, .35), 0 10px 18px -12px rgba(42, 43, 46, .8); }
.ds-mount { display: grid; gap: 6px; justify-items: center; transform: translateY(-10px); transition: transform .38s cubic-bezier(.5, 0, .9, .4); }
.ds-mount-win { width: 100%; aspect-ratio: 1; display: grid; place-items: center; padding: 6px; border: 6px solid #D9D0C4; border-top-width: 12px; border-radius: 3px; background: rgba(42, 43, 46, .1); box-shadow: 0 1px 0 rgba(42, 43, 46, .3), 0 10px 18px -12px rgba(42, 43, 46, .7); overflow: hidden; transition: background-color .3s var(--ds-ease), box-shadow .3s var(--ds-ease); }
.ds-mount-a { font: italic 520 clamp(.8125rem, .7rem + .35vw, 1rem)/1.15 var(--ds-serif); text-align: center; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ds-mount-q { order: -1; font-size: .875rem; font-weight: 600; }
.ds-mount.is-lit { transform: translateY(14px); }
.ds-mount.is-lit .ds-mount-win { background: var(--ds-cream); box-shadow: 0 1px 0 rgba(42, 43, 46, .3), 0 0 0 2px var(--ds-juniper); }
.ds-form { grid-column: 7 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6) var(--s6); }
.ds-field { display: grid; gap: var(--s2); border: 0; min-width: 0; }
.ds-field-wide { grid-column: 1 / -1; }
.ds-field label, .ds-field legend { font-weight: 600; font-size: 1rem; letter-spacing: .01em; }
.ds-field input:not([type="radio"]), .ds-field select, .ds-field textarea {
  width: 100%; min-height: 44px; border: 0; border-bottom: 1.5px solid var(--ds-ink); border-radius: 0; background: #F8F6F2;
  color: var(--ds-ink); font: 400 1.0625rem/1.4 var(--ds-sans); padding: 8px 10px;
}
.ds-field select option { background: var(--ds-cream); color: var(--ds-ink); }
.ds-field textarea { resize: vertical; }
.ds-field input::placeholder, .ds-field textarea::placeholder { color: rgba(42, 43, 46, .78); }
.ds-field :is(input, select, textarea):focus-visible { outline: none; box-shadow: none; border-bottom: 2px solid var(--ds-juniper); }
.ds-num { display: flex; align-items: center; gap: var(--s3); }
.ds-num input { width: 4.5em !important; font-variant-numeric: tabular-nums; }
.ds-move { display: flex; flex-wrap: wrap; gap: var(--s3); }
.ds-move legend { width: 100%; margin-bottom: var(--s2); }
.ds-radio { position: relative; }
.ds-radio input { position: absolute; opacity: 0; inset: 0; }
.ds-radio span { display: inline-flex; min-height: 44px; align-items: center; padding: 0 20px; border-radius: 999px; border: 1.5px solid var(--ds-ink); font-size: 1.125rem; cursor: pointer; }
.ds-radio input:checked + span { background: var(--ds-juniper); border-color: var(--ds-juniper); color: var(--ds-cream); }
.ds-radio input:focus-visible + span { outline: 2px solid var(--ds-juniper); outline-offset: 3px; }
.ds-send { grid-column: 1 / -1; }
.ds-page .ds-send-btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 26px; border: 0; border-radius: 999px; background: var(--ds-juniper); color: var(--ds-cream); font: 600 16px/1 var(--ds-sans); cursor: pointer; box-shadow: 0 12px 24px -16px rgba(42, 43, 46, .8); transition: transform .3s var(--ds-ease); }
.ds-page .ds-send-btn:hover { transform: translateY(-1px); }
.ds-status { grid-column: 1 / -1; min-height: 1.5em; font-weight: 560; }

/* 9 · the lamp goes off */
.ds-foot { --ds-bg: var(--ds-wall); transition: --ds-bg 1.6s var(--ds-ease) .2s; position: relative; padding: clamp(56px, 6vw, 104px) calc(var(--gut) + var(--dockw)) var(--s8) var(--gut); display: grid; grid-template-columns: minmax(0, 44fr) minmax(0, 56fr); gap: var(--s6) clamp(24px, 4vw, 72px); align-items: center; }
.ds-foot-tray { position: relative; aspect-ratio: 1 / .78; --ds-tray-x: .5; --ds-tray-y: .54; --ds-tray-d: .86; --ds-tray-el: 38; --ds-tray-gate: 90; }
.ds-foot-tray .ds-tray-gl { position: absolute; inset: 0; width: 100%; height: 100%; }
/* the lamp's pool under the tray, which goes out */
.ds-foot-tray::before { content: ""; position: absolute; left: 6%; right: 6%; top: 18%; bottom: 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 250, 238, .95), rgba(255, 244, 220, 0)); transition: opacity 1.6s var(--ds-ease) .2s; }
.ds-foot.is-off .ds-foot-tray::before { opacity: 0; }
.ds-foot.is-off { --ds-bg: var(--ds-shade); }
.ds-nogl .ds-foot-tray, .ds-foot-tray:not(.ds-live) { visibility: hidden; }
.ds-foot-words { display: grid; gap: var(--s5); justify-items: start; }
.ds-foot-last { font-family: var(--ds-serif); font-weight: 880; font-size: clamp(2rem, 1.2rem + 2.4vw, 3.5rem); line-height: 1.02; letter-spacing: -.015em; }
.ds-foot-sub { max-width: 28em; font-size: 1.125rem; }
.ds-foot-go { margin: var(--s2) 0 var(--s4); }
.ds-foot-base { display: grid; gap: var(--s4); padding-top: var(--s5); border-top: 1px solid var(--ds-hair); width: 100%; }
.ds-foot-mark { width: 40px; height: 40px; }

.ds-foot-name { font-family: var(--ds-serif); font-weight: 700; font-size: 1.1875rem; }
.ds-foot-links { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s6); }
.ds-foot-links a, .ds-foot-back a { text-underline-offset: 5px; text-decoration-thickness: 1px; }

@media (min-width: 1024px) and (max-width: 1180px) {
  .ds-jwords { grid-column: 1 / span 4; }
  .ds-jbeam, .ds-jcontrols { grid-column: 5 / -1; }
}
@media (max-width: 1180px) {
  .ds-sleep-stage { grid-template-columns: minmax(0, 28fr) auto minmax(0, 30fr); }
  .ds-wall { height: min(560px, calc(var(--stage) - 96px)); }
}
@media (max-width: 1023px) {
  .ds-h2-journeys, .ds-journeys-head .ds-lede, .ds-jwords, .ds-jbeam, .ds-jcontrols, .ds-start-head, .ds-form { grid-column: 1 / -1; }
  .ds-jbeam { grid-row: 1; }
  .ds-jwords { grid-row: 2; }
  .ds-jcontrols { margin-top: 0; }
  .ds-load-stage { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; padding-left: var(--gut); align-content: start; gap: 0; }
  .ds-load-tray { min-height: 0; height: clamp(170px, 42vw, 320px); margin: 0 calc(var(--gut) * -1) var(--s4); --ds-tray-x: .5; --ds-tray-y: .02; --ds-tray-d: .96; --ds-tray-el: 56; --ds-tray-gate: 90; }
  .ds-load-tray .ds-tray-gl { width: 100%; }
  .ds-sleep-stage { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "words words" "ans wall"; gap: var(--s6) var(--s5); }
  .ds-guides { grid-template-columns: minmax(0, 1fr); }
  .ds-guide-beam { justify-self: start; }
  .ds-between-lines, .ds-poster, .ds-between-close, .ds-band-wrap { grid-column: 1 / -1; }
  .ds-band-wrap { margin-left: 12px; }
  .ds-foot { grid-template-columns: minmax(0, 1fr); }
  .ds-foot-tray { width: min(100%, 460px); }
  .ds-empty { left: 12%; }
  .ds-pl-b, .ds-planner-in { margin-left: calc(12% + var(--s5)); }
  .ds-planner-note { margin-left: 12%; }
}
@media (max-width: 1023px) and (prefers-reduced-motion: no-preference) {
  .ds-js .ds-sleep { height: auto; }
  .ds-js .ds-sleep-stage { position: static; }
}
@media (max-width: 700px) {
  .ds-jcontrols { justify-content: space-between; margin-top: 0; }
  .ds-jbeam { --ds-ar: 4 / 5; --ds-kx: 0; --ds-ky: .02; }
  .ds-sleep-stage { grid-template-columns: minmax(0, 1fr); grid-template-areas: "words" "wall" "ans"; }
  .ds-wall { height: auto; width: min(100%, 300px); justify-self: center; }
  .ds-answer { min-height: 5.5em; }
  .ds-answer > p { position: static; transform: none; text-align: left; max-width: none; }
  .ds-answer-text::after { content: none; }
  .ds-between-lines { grid-template-columns: minmax(0, 1fr); }
  .ds-band { --ds-ar: 4 / 5; --ds-kx: 0; --ds-ky: .015; }
  .ds-mountframe { padding: 40px 14px 16px; }
  .ds-mf-strip { left: 14px; right: 16px; top: 8px; }
  .ds-form { grid-template-columns: minmax(0, 1fr); }
  .ds-empty { left: 0; top: 5.2em; }
  .ds-pl-b { margin-left: var(--s4); }
  .ds-planner-in { margin-left: 0; padding: 0 var(--s4); }
  .ds-planner-note { margin-left: 0; }
  .ds-foot { padding-bottom: 96px; }
}
@media (max-width: 700px) and (max-height: 600px) {
  .ds-js .ds-load { height: auto; }
  .ds-js .ds-load-stage { position: relative; top: 0; height: auto; }
  .ds-js .ds-load-p { grid-area: auto; }
}

/* the projector's cycle */
@supports (view-transition-name: none) {
  ::view-transition-old(ds-slide) { animation: ds-vt-out 220ms cubic-bezier(.5, 0, .9, .4) both; }
  ::view-transition-new(ds-slide) { animation: ds-vt-in 420ms cubic-bezier(.2, .7, .1, 1) 380ms both; }
  ::view-transition-group(root) { animation: ds-vt-dip 820ms linear both; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  ::view-transition-old(ds-words) { animation: ds-vt-fade 160ms ease-out both; }
  ::view-transition-new(ds-words) { animation: ds-vt-rise 420ms cubic-bezier(.2, .7, .1, 1) 420ms both; }
  ::view-transition-group(ds-slide), ::view-transition-group(ds-words) { animation-duration: 0s; }
  :active-view-transition-type(ds-hero)::view-transition-old(ds-slide) { animation-name: ds-vt-out-hero; }
  /* on a drop the lamp catches: two quick flickers before the new slide settles */
  :active-view-transition-type(ds-hero)::view-transition-new(ds-slide) { animation: ds-vt-in-hero 460ms linear 360ms both; }
}
@keyframes ds-vt-out { to { transform: translateX(12%); opacity: 0; } }
@keyframes ds-vt-out-hero { to { transform: translate(-9%, 7%); opacity: 0; } }
@keyframes ds-vt-in { from { opacity: 0; filter: brightness(1.3) sepia(.25); } 40% { opacity: 1; } to { opacity: 1; filter: none; } }
@keyframes ds-vt-dip { 0%, 22% { filter: none; } 34%, 44% { filter: brightness(.86); } 62%, 100% { filter: none; } }
@keyframes ds-vt-in-hero { 0% { opacity: 0; filter: brightness(1.35) sepia(.25); } 10% { opacity: .9; } 16% { opacity: .35; } 24% { opacity: 1; filter: brightness(1.3) sepia(.22); } 30% { opacity: .7; } 38% { opacity: 1; } 100% { opacity: 1; filter: none; } }
@keyframes ds-vt-fade { to { opacity: 0; } }
@keyframes ds-vt-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .ds-page *, .ds-page *::before, .ds-page *::after { transition-duration: 0s !important; animation-duration: 0s !important; animation-delay: 0s !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .ds-load-slide .ds-thumb { opacity: 1; filter: none; }
}