/* markambrus.com: one dark page, a field of dots behind it, the dock in front. */

@font-face {
  font-family: "Mona Sans";
  src: url("/fonts/mona-latin.woff2?v=ee160ac4") format("woff2");
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Mona Sans";
  src: url("/fonts/mona-latin-ext.woff2?v=c712dee2") format("woff2");
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Caveat Bold, subset to the letters of the nudge above the dock, in both languages. */
@font-face {
  font-family: "Desk Hand";
  src: url("/fonts/hand.woff2?v=6edcb347") format("woff2");
  font-weight: 700;
  font-display: swap;
}

/* IBM Plex Mono Medium, subset, for live numbers. */
@font-face {
  font-family: "Desk Mono";
  src: url("/fonts/mono.woff2?v=ef39441b") format("woff2");
  font-weight: 500;
  font-display: swap;
}

:root {
  --ink: #172331;
  --ink-deep: #0f1822;
  --bone: #f6efe3;
  --bone-soft: rgba(246, 239, 227, 0.86);
  --muted: #aaaaa6;
  --hair: rgba(246, 239, 227, 0.14);
  --glass: rgba(15, 24, 34, 0.74);
  --turquoise: #37c2b8;
  --linen: #e6cab4;
  --marker: #ff5147;
  --gutter: clamp(16px, 4.5vw, 64px);
  --font: "Mona Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Desk Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --dock-space: 104px;
  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--ink);
  color: var(--bone);
  font-family: var(--font);
  font-size: 100%;
  font-weight: 420;
  font-stretch: 100%;
  font-variant-numeric: tabular-nums;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Smooth scrolling starts once the page has loaded: set from the first moment, it can stop
   the browser from jumping to the chapter a link's #fragment names. */
@media (prefers-reduced-motion: no-preference) {
  html.loaded {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  min-height: 100vh;
  font-size: 1.0625rem;
  line-height: 1.55;
  background:
    radial-gradient(90% 70% at 70% 30%, rgba(55, 194, 184, 0.05), transparent 60%),
    radial-gradient(120% 90% at 30% 80%, #111a25 0%, transparent 70%),
    var(--ink);
  background-attachment: fixed;
  overflow-x: hidden;
}

::selection {
  background: var(--turquoise);
  color: var(--ink);
}

img,
svg,
canvas {
  display: block;
}

[hidden] {
  display: none !important;
}

h1,
h2,
h3,
p,
ul,
ol,
dl,
dd {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--turquoise);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Headings take focus only as the target of a jump; the ring would mark nothing to press. */
h1[tabindex="-1"]:focus,
h2[tabindex="-1"]:focus {
  outline: none;
}

kbd {
  font-family: var(--mono);
  font-size: 0.72em;
  padding: 0.1em 0.45em;
  border: 1px solid var(--hair);
  border-radius: 5px;
  color: var(--muted);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: fixed;
  left: 12px;
  top: 12px;
  z-index: 100;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--turquoise);
  color: var(--ink);
  font-weight: 650;
  text-decoration: none;
  transform: translateY(-160%);
}

.skip:focus {
  transform: none;
}

.link {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(246, 239, 227, 0.4);
  text-underline-offset: 0.28em;
  transition: color 0.2s, text-decoration-color 0.2s;
}

.link:hover {
  color: var(--turquoise);
  text-decoration-color: var(--turquoise);
}

.link-strong {
  font-weight: 620;
  text-decoration-color: var(--turquoise);
  text-decoration-thickness: 2px;
}

.link-strong::after {
  content: " \2192";
}

.live {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.94em;
  color: var(--turquoise);
  font-variant-numeric: tabular-nums;
}

/* ---- The field ------------------------------------------------------------------------- */

.field {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s ease;
}

.field-on .field {
  opacity: 1;
}

html:not(.js) .field {
  display: none;
}

main,
.footer {
  position: relative;
  z-index: 1;
}

/* ---- Top bar --------------------------------------------------------------------------- */

.bar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px var(--gutter) 26px;
  background: linear-gradient(to bottom, var(--ink) 58%, rgba(23, 35, 49, 0));
  pointer-events: none;
}

.bar > * {
  pointer-events: auto;
}

.bar-name {
  white-space: nowrap;
  font-weight: 760;
  font-stretch: 85%;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.4s, transform 0.4s;
}

.scrolled .bar-name,
.page-book .bar-name,
.page-questions .bar-name,
.page-service .bar-name {
  opacity: 1;
  transform: none;
}

.bar-right {
  display: flex;
  align-items: center;
  gap: 18px;
}

/* On a phone the count, the map and the flag share the width with the name. */
@media (max-width: 419px) {
  .bar-right {
    gap: 4px;
  }
}

/* Everyone the dots stand for, live: the students plus the escape room teams. */
.reach-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 6px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 0.8rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.2s;
}

.reach-button:hover,
.tip.open .reach-button {
  color: var(--bone);
}

.reach-label {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.7rem;
}

/* On the narrowest phones the number stands alone on screen; screen readers keep the label,
   and the tooltip still says what it counts. */
@media (max-width: 359px) {
  .reach-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

.reach-dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--turquoise);
}

@media (prefers-reduced-motion: no-preference) {
  .reach-dot {
    animation: reach-pulse 2.6s ease-out infinite;
  }
}

@keyframes reach-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(55, 194, 184, 0.6);
  }

  70%,
  100% {
    box-shadow: 0 0 0 7px rgba(55, 194, 184, 0);
  }
}

.map-open {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 8px 14px;
  border: 1px solid var(--hair);
  border-radius: 999px;
  background: rgba(15, 24, 34, 0.5);
  color: var(--bone);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 560;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.map-open:hover {
  border-color: rgba(55, 194, 184, 0.7);
  background: rgba(15, 24, 34, 0.8);
}

html:not(.js) .map-open {
  display: none;
}

/* The other language's flag, a link to the same page on its domain. */
.lang-switch {
  padding: 4px;
  font-size: 1.3rem;
  line-height: 1;
  text-decoration: none;
}

/* ---- Rail ------------------------------------------------------------------------------ */

.rail {
  position: fixed;
  right: 18px;
  top: 50%;
  z-index: 9;
  transform: translateY(-50%);
  display: none;
}

.rail ol {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.rail a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 22px;
  padding-left: 12px;
  text-decoration: none;
}

.rail a::after {
  content: "";
  width: 14px;
  height: 2px;
  border-radius: 2px;
  background: rgba(246, 239, 227, 0.32);
  transition: width 0.3s, background 0.3s;
}

.rail a[aria-current="true"]::after {
  width: 30px;
  background: var(--turquoise);
}

.rail-label {
  position: absolute;
  right: 44px;
  white-space: nowrap;
  font-size: 0.8rem;
  padding: 3px 9px;
  border-radius: 6px;
  background: var(--glass);
  opacity: 0;
  transform: translateX(6px);
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
}

.rail a:hover .rail-label,
.rail a:focus-visible .rail-label {
  opacity: 1;
  transform: none;
}

@media (min-width: 1100px) {
  .rail {
    display: block;
  }
}

/* ---- Hello ----------------------------------------------------------------------------- */

/* Márk's profile picture stands at the right, cut out of its backdrop, so the dots run behind
   him; the words take the rest of the width. The picture grows with the window until its
   height nears 90% of the screen. */
.hello {
  --photo-w: min(46vw, 80svh);
  --photo-right: var(--gutter);
  --photo-gap: clamp(24px, 3vw, 56px);
  position: relative;
  container-type: inline-size;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 96px calc(var(--photo-right) + var(--photo-w) + var(--photo-gap)) calc(var(--dock-space) + 24px) var(--gutter);
}

/* The name fills the column beside the photo (AMBRUS is 2.9 em wide) and gives way on short
   screens, so the tagline and the cue stay above the dock. */
.hello-name {
  position: relative;
  z-index: 1;
  font-size: max(4rem, min(34cqi, 55svh - 238px));
  font-weight: 830;
  font-stretch: 75%;
  line-height: 0.84;
  letter-spacing: -0.012em;
  margin-left: -0.04em;
  text-transform: uppercase;
}

.hello-name .word {
  display: block;
}

/* The mask is his outline, faded out where the frame cuts him off at the bottom. */
.hello-photo {
  position: absolute;
  right: var(--photo-right);
  bottom: 0;
  width: var(--photo-w);
  height: auto;
  -webkit-mask: url("/images/photo-mask.png?v=f11a3021") center / 100% 100% no-repeat;
  mask: url("/images/photo-mask.png?v=f11a3021") center / 100% 100% no-repeat;
  pointer-events: none;
  user-select: none;
  animation: photo-in 1.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s both;
}

@keyframes photo-in {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
}

/* Room for the rail at the right edge. */
@media (min-width: 1100px) {
  .hello {
    --photo-right: calc(var(--gutter) + 16px);
  }
}

/* With the field running, the dots draw the name; the letters stay as a ghost behind them,
   still there for selection, search and screen readers. */
.field-on .hello-name {
  color: rgba(246, 239, 227, 0.045);
  transition: color 1.4s ease 0.2s;
}

/* Every title stays on one line, and the cap in cqi keeps the longest, AI capability
   builder, inside the column beside the photo. */
.roles {
  margin-top: clamp(18px, 2.4vw, 34px);
  font-size: min(clamp(1.35rem, 3.1vw, 2.9rem), 7.6cqi);
  font-weight: 280;
  font-stretch: 125%;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.1;
  white-space: nowrap;
}

/* A new title replaces the old one at once and is revealed from left to right, so two titles
   never share the line. A soft edge in its mask sweeps across it in 0.2 s; the mask is 2.1
   titles wide, so at both ends of the sweep the edge lies wholly outside the title. */
.role {
  text-decoration: none;
  color: var(--bone);
}

.role-word {
  display: inline-block;
}

.role-word.in {
  -webkit-mask-image: linear-gradient(90deg, #000 48%, transparent 52%);
  mask-image: linear-gradient(90deg, #000 48%, transparent 52%);
  -webkit-mask-size: 210% 100%;
  mask-size: 210% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  animation: role-in 0.2s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes role-in {
  from {
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
  }

  to {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }
}

.tagline {
  margin-top: clamp(20px, 3vw, 40px);
  max-width: 34ch;
  font-size: clamp(1.1rem, 1.6vw, 1.45rem);
  line-height: 1.35;
  color: var(--bone-soft);
  text-wrap: balance;
}

.scroll-cue {
  margin-top: clamp(24px, 4vh, 48px);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* The first word of the cue, with two chevrons stepping down beneath it. */
.cue-word {
  position: relative;
  display: inline-block;
}

.cue-arrows {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--turquoise);
  translate: -50% 0;
}

.cue-arrows svg + svg {
  margin-top: -4px;
}

@media (prefers-reduced-motion: no-preference) {
  .cue-arrows {
    animation: cue-arrows 1.8s ease-in-out infinite;
  }
}

@keyframes cue-arrows {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.55;
  }

  50% {
    transform: translateY(6px);
    opacity: 1;
  }
}

/* A key cap: a raised key with a deeper lower edge, pressed in while clicked. */
.keycap {
  display: inline-block;
  font-family: var(--mono);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, translate 0.08s;
  min-width: 1.9em;
  margin: 0 0.2em;
  padding: 0.2em 0.5em 0.25em;
  font-size: 0.95em;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  color: var(--bone);
  background: linear-gradient(rgba(246, 239, 227, 0.12), rgba(246, 239, 227, 0.04));
  border: 1px solid rgba(246, 239, 227, 0.28);
  border-radius: 6px;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.35), 0 2px 0 rgba(246, 239, 227, 0.14);
  vertical-align: 0.05em;
}

.keycap:hover {
  border-color: var(--turquoise);
}

.keycap:active {
  translate: 0 1px;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.35), 0 1px 0 rgba(246, 239, 227, 0.14);
}

.keycap:focus-visible {
  outline: 2px solid var(--turquoise);
  outline-offset: 2px;
}

.cue-touch {
  display: none;
}

/* On a phone the cue stands in the middle of the screen, the chevrons under the middle of it. */
@media (max-width: 639px) {
  .scroll-cue {
    position: relative;
    text-align: center;
  }

  .cue-word {
    position: static;
  }
}

@media (hover: none) {
  .cue-keys,
  .map-open kbd,
  .map-close kbd {
    display: none;
  }

  .cue-touch {
    display: inline;
  }
}

/* ---- Chapters -------------------------------------------------------------------------- */

.chapter {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: clamp(24px, 4vw, 80px);
  padding: 0 var(--gutter);
  min-height: 100svh;
}

.chapter-left {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}

.stage {
  position: sticky;
  top: 0;
  height: 100svh;
  grid-row: 1;
}

.chapter-right .stage {
  grid-column: 2;
}

.chapter-right .copy {
  grid-column: 1;
}

.chapter-left .stage {
  grid-column: 1;
}

.chapter-left .copy {
  grid-column: 2;
}

.copy {
  grid-row: 1;
  align-self: start;
  max-width: 34rem;
  padding: 24vh 0 20vh;
}

.eyebrow {
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.eyebrow-num {
  font-family: var(--mono);
  color: var(--bone);
  margin-right: 6px;
}

/* A chapter's heading opens with its number and label, so search and assistive technology read
   the topic with the words. The label is set in the small type of the page's text, on a line
   of its own above the words. */
.copy h2 {
  margin: 0 0 0.5em;
  font-size: clamp(2.1rem, 4.2vw, 4.1rem);
  font-weight: 780;
  font-stretch: 80%;
  line-height: 0.98;
  letter-spacing: -0.006em;
  text-wrap: balance;
}

.copy h2 .eyebrow {
  display: block;
  font-weight: 420;
  font-stretch: 100%;
  line-height: 1.55;
  text-wrap: wrap;
}

.copy h2 .heading-text {
  display: block;
  margin-top: 0.45em;
}

.lead {
  font-size: clamp(1.08rem, 1.3vw, 1.24rem);
  line-height: 1.5;
  color: var(--bone-soft);
  text-wrap: pretty;
}

.beat {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.beat + .beat {
  margin-top: 36vh;
}

.body {
  color: var(--bone-soft);
  text-wrap: pretty;
}

.points {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.points li {
  position: relative;
  padding-left: 22px;
  text-wrap: pretty;
}

.points li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bone);
  box-shadow: 0 0 10px rgba(246, 239, 227, 0.6);
}

.examples {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.examples-title {
  color: var(--bone-soft);
}

.examples ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.examples li {
  padding-left: 14px;
  border-left: 2px solid rgba(55, 194, 184, 0.5);
  color: var(--bone-soft);
  text-wrap: pretty;
}

/* Facts sit at the top of their row, so a short label leaves no gap above its value. */
.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  align-items: start;
  gap: 18px 28px;
}

.fact {
  display: flex;
  flex-direction: column-reverse;
  gap: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--hair);
}

.fact dd {
  font-size: clamp(1.35rem, 2vw, 1.8rem);
  font-weight: 740;
  font-stretch: 85%;
  line-height: 1.1;
}

.fact dt {
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.4;
}

/* A fact marked bold sets its label in the number's type, on one line after the number. */
.fact-bold {
  flex-flow: row wrap;
  align-items: baseline;
  gap: 0 0.3em;
}

.fact-bold dd {
  order: -1;
}

.fact-bold dt {
  font-size: clamp(1.35rem, 2vw, 1.8rem);
  font-weight: 740;
  font-stretch: 85%;
  line-height: 1.1;
  color: inherit;
}

.items {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.item {
  padding-top: 16px;
  border-top: 1px solid var(--hair);
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}

.item-name {
  font-size: 1.3rem;
  font-weight: 720;
  font-stretch: 90%;
  line-height: 1.2;
}

/* A qualifier beside an item's name, such as a degree on hold, set smaller and quieter */
.item-aside {
  font-size: 0.6em;
  font-weight: 480;
  font-stretch: 100%;
  color: var(--muted);
}

.item-host {
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--muted);
}

.item-about {
  color: var(--bone-soft);
  text-wrap: pretty;
}

.item-live {
  font-size: 0.95rem;
}

.note {
  padding-left: 14px;
  border-left: 2px solid rgba(55, 194, 184, 0.5);
  color: var(--muted);
  font-size: 0.98rem;
  text-wrap: pretty;
}

.cta {
  margin-top: 34px;
  font-size: 1.12rem;
}

/* The link from a chapter to its own page, under the call to action. */
.chapter-more {
  margin-top: 14px;
  font-size: 0.88rem;
}

.parts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.part {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 15px 8px 13px;
  border: 1px solid var(--hair);
  border-radius: 999px;
  background: rgba(15, 24, 34, 0.5);
  font-size: 0.98rem;
  text-decoration: none;
  transition: border-color 0.2s, background 0.2s;
}

.part::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--turquoise);
  box-shadow: 0 0 8px rgba(55, 194, 184, 0.7);
}

.part:hover {
  border-color: rgba(55, 194, 184, 0.7);
  background: rgba(55, 194, 184, 0.1);
}

/* The speaking chapter carries the warm accent of the picture. */
#speaker .eyebrow-num,
#speaker .points li::before {
  color: var(--linen);
  background: var(--linen);
}

#speaker .eyebrow-num {
  background: none;
}

/* The first chapter after the name: the booking line, big, and a pill for each Work chapter
   that follows it. */
#contact h2 {
  font-size: clamp(2.6rem, 5.6vw, 5.6rem);
}

/* ---- The end of the page --------------------------------------------------------------- */

/* The closing words under the dots' portrait, then the clip and the link to the booking.
   Without the script the four lines read one after another and the clip follows them. With it
   (.end-live) the closing screen is the bottom of the page, the four lines share one place,
   and the clip stays out of the page until .end-open. The screen and the clip each fill the
   window above the footer, whose height end.js keeps in --end-foot. */
.end {
  position: relative;
  padding: 0 var(--gutter);
}

.end-screen {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  justify-items: center;
  min-height: 100svh;
  padding: 12svh 0 6svh;
}

.end .stage {
  position: relative;
  top: auto;
  z-index: 0;
  width: min(100%, 30rem);
  height: auto;
  min-height: 24svh;
}

.end-lines {
  display: grid;
  max-width: 36rem;
  text-align: center;
}

.end-line {
  margin: 0 0 1em;
  font-size: clamp(1.15rem, 1.6vw, 1.45rem);
  line-height: 1.5;
  color: var(--bone-soft);
  text-wrap: pretty;
}

.end-ask {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 620;
  color: var(--bone);
  text-decoration: underline;
  text-decoration-color: var(--turquoise);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.28em;
  cursor: pointer;
  transition: color 0.2s;
}

.end-ask:hover {
  color: var(--turquoise);
}

.end-live .end-screen {
  height: calc(100svh - var(--end-foot, 0px));
  min-height: 0;
  padding: 10svh 0 4svh;
}

.end-live .end-line {
  grid-area: 1 / 1;
  align-self: center;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.45s, transform 0.45s, visibility 0s 0.45s;
}

.end-live .end-line.on {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.45s, transform 0.45s, visibility 0s;
}

.end-roll {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  min-height: 70svh;
  padding: 6svh 0;
  text-align: center;
}

.end-live .end-roll {
  min-height: calc(100svh - var(--end-foot, 0px));
}

.end-live:not(.end-open) .end-roll {
  display: none;
}

.end-video {
  display: block;
  width: min(360px, 80vw);
  height: auto;
  border: 1px solid var(--hair);
  border-radius: 14px;
  background: var(--ink-deep);
}

.end-talk {
  margin: 0;
  font-size: 1.12rem;
}

.footer {
  padding: 24px var(--gutter) calc(var(--dock-space) + 12px);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  font-size: 0.85rem;
  color: var(--muted);
  border-top: 1px solid var(--hair);
}

.footer .link {
  margin-left: 10px;
}

.footer .footer-book {
  margin-left: 0;
}

/* ---- Phones and tablets ---------------------------------------------------------------- */

/* The first screen stacks on phones and on tablets held upright, where the photo beside the
   name would leave both small and the screen's upper half empty. The photo stands centred above
   the name, its faded foot behind the first line. Both grow with the width until the height
   runs short, so the tagline and the cue stay above the dock. On a short phone the photo takes
   the height the words leave, about 510 pixels less than the screen's. */
@media (max-width: 639px), (max-width: 1199px) and (orientation: portrait) {
  .hello {
    --photo-w: max(120px, min(70vw, 38svh, 100svh - 510px));
    padding: 72px var(--gutter) calc(var(--dock-space) + 12px);
  }

  .hello-name {
    font-size: min(24vw, 15svh);
    line-height: 0.82;
  }

  .hello-photo {
    position: relative;
    right: auto;
    order: -1;
    align-self: center;
    margin-bottom: calc(var(--photo-w) * -0.06);
  }
}

/* Chapters stack on phones and on tablets held upright: the shape first, below the top bar,
   then the words sliding up over it. The field draws one shape at a time, so a chapter keeps no
   room beyond its shape and its words: the stage is as tall as the chapter's first shape needs
   at the full width (--aspect, set by the build; the field leaves a tenth of the width around
   it), up to 56% of the screen, and the next chapter follows the words closely. A jump to a
   chapter stops with its stage below the top bar. On a tablet the words keep to a centred
   column of 40 rem, and the headings grow with the width. A phone turned sideways keeps the
   shape and the words side by side. */
@media (max-width: 639px), (max-width: 899px) and (orientation: portrait) {
  .chapter,
  .chapter-left {
    display: block;
    padding: 0;
    min-height: 0;
    scroll-margin-top: 48px;
  }

  .chapter .stage {
    top: 48px;
    height: min(56svh, 80vw / var(--aspect, 1) + 20vw);
    z-index: 0;
  }

  .copy {
    position: relative;
    z-index: 1;
    max-width: none;
    padding: 20px max(var(--gutter), calc((100% - 40rem) / 2)) 24px;
    background: linear-gradient(to bottom, rgba(23, 35, 49, 0) 0, rgba(23, 35, 49, 0.95) 48px, rgba(23, 35, 49, 0.97) 100%);
  }

  .copy h2 {
    font-size: clamp(2.1rem, 6vw, 3.4rem);
  }

  #contact h2 {
    font-size: clamp(2.6rem, 8vw, 4.4rem);
  }

  .beat + .beat {
    margin-top: 48px;
  }
}

/* On a short screen lying sideways, such as a phone turned on its side, the first screen starts
   nearer the top bar and leaves out the scroll cue, which the dock would cover. Each chapter's
   shape keeps to the band between the bar and the dock. The height limits the shape there, so
   the words take the wider column. */
@media (max-height: 540px) and (orientation: landscape) and (min-width: 640px) {
  .hello {
    padding-top: 64px;
    padding-bottom: calc(var(--dock-space) + 8px);
  }

  .scroll-cue {
    display: none;
  }

  .chapter {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }

  .chapter-left {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }

  .chapter .stage {
    top: 48px;
    height: calc(100svh - 48px - var(--dock-space));
  }
}

/* ---- Dock ------------------------------------------------------------------------------ */

/* --dock-room is the width the dock leaves free at its right for the button back to the top,
   which sits beside it on narrower screens (see "Back to the top"). */
.dock {
  position: fixed;
  left: 50%;
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 20;
  width: min(740px, calc(100% - 24px - var(--dock-room, 0px)));
  transform: translateX(calc(-50% - var(--dock-room, 0px) / 2));
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dock-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
  border-radius: 999px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid var(--hair);
  box-shadow: 0 14px 48px rgba(0, 0, 0, 0.4);
}

.ask {
  --ask-gap: 10px;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--ask-gap);
  padding-left: 2px;
}

/* Without scripts the avatar cannot answer, so the dock is the booking button alone. */
html:not(.js) .ask,
html:not(.js) .scroll-cue {
  display: none;
}

html:not(.js) .dock-bar {
  justify-content: center;
  background: none;
  border-color: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.orb {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 2px var(--turquoise), 0 0 18px rgba(55, 194, 184, 0.55);
}

@media (prefers-reduced-motion: no-preference) {
  .orb {
    animation: orb 3.6s ease-in-out infinite;
  }
}

@keyframes orb {
  50% {
    box-shadow: 0 0 0 2px var(--turquoise), 0 0 28px rgba(55, 194, 184, 0.85);
  }
}

.ask-input {
  flex: 1;
  min-width: 0;
  height: 44px;
  border: 0;
  background: transparent;
  color: var(--bone);
  font: inherit;
  font-size: 1rem;
  text-overflow: ellipsis;
  outline: none;
}

.ask-input::placeholder {
  color: var(--muted);
}

.ask:focus-within {
  outline: none;
}

.dock-bar:focus-within {
  border-color: rgba(55, 194, 184, 0.6);
}

/* The send button takes no width until there is a question to send, so an empty box keeps the
   room for its placeholder; the negative margin takes back the form's gap before it. */
.ask-send {
  flex: none;
  display: grid;
  place-items: center;
  width: 0;
  height: 36px;
  margin-left: calc(-1 * var(--ask-gap));
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 50%;
  background: rgba(246, 239, 227, 0.1);
  color: var(--bone);
  cursor: pointer;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.2s, transform 0.2s, width 0.2s, margin 0.2s, background 0.2s;
}

.ask.has-text .ask-send {
  width: 36px;
  margin-left: 0;
  opacity: 1;
  transform: none;
}

.ask-send:hover {
  background: rgba(246, 239, 227, 0.2);
}

.book {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 44px;
  padding: 0 20px 0 16px;
  border-radius: 999px;
  background: var(--turquoise);
  color: var(--ink);
  font-weight: 680;
  font-size: 0.98rem;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 0 24px rgba(55, 194, 184, 0.35);
  transition: box-shadow 0.25s, transform 0.25s;
}

.book:hover {
  box-shadow: 0 0 36px rgba(55, 194, 184, 0.6);
  transform: translateY(-1px);
}

.book:focus-visible {
  outline-color: var(--bone);
}

.book-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink);
}

/* The button swells gently and its dot blinks twice per swell. The pulse runs on `scale`,
   apart from `transform`, so the hover lift still applies on top of it. */
@media (prefers-reduced-motion: no-preference) {
  .book {
    animation: book-pulse 2.4s ease-in-out infinite;
  }

  .book-dot {
    animation: book-blink 1.2s ease-in-out infinite;
  }
}

@keyframes book-pulse {
  50% {
    scale: 1.045;
  }
}

@keyframes book-blink {
  0%,
  40% {
    opacity: 1;
  }

  55%,
  85% {
    opacity: 0.15;
  }

  100% {
    opacity: 1;
  }
}

.book-short {
  display: none;
}

/* On a phone the dock's gaps and the booking button tighten a little, so the placeholder
   still fits beside the button back to the top. */
@media (max-width: 480px) {
  .dock-bar {
    gap: 6px;
  }

  .ask {
    --ask-gap: 8px;
  }

  .book {
    padding: 0 14px 0 12px;
  }

  .book-long {
    display: none;
  }

  .book-short {
    display: inline;
  }
}

/* ---- Back to the top ------------------------------------------------------------------- */

/* A small pill at the bottom right, an arrow and "Back to top", level with the dock, once
   the first screen has scrolled away (story.js sets .scrolled). Below 1080 pixels, where the
   pill would run into the dock, it is a round arrow as tall as the dock bar, beside the
   dock's right end, and the dock narrows by --dock-room to make way for it. It steps aside
   while the avatar answers, and the dock takes its full width back. */
.to-top {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: calc(max(14px, env(safe-area-inset-bottom)) + 9px);
  z-index: 19;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 40px;
  padding: 0 16px 0 13px;
  border: 1px solid var(--hair);
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  background: var(--glass);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.35);
  color: var(--bone);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.25s, transform 0.25s, visibility 0.25s, border-color 0.2s, background 0.2s;
}

.scrolled .to-top {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.avatar-open .to-top {
  opacity: 0;
  visibility: hidden;
}

.to-top:hover {
  border-color: rgba(55, 194, 184, 0.7);
  background: rgba(55, 194, 184, 0.16);
}

/* The dock bar is 58 pixels tall; the room is the button and a gap of 8. The button's right
   edge follows from the dock's width, so the two stay centred together. */
@media (max-width: 1079px) {
  html.scrolled:not(.avatar-open) {
    --dock-room: 66px;
  }

  .to-top {
    right: calc((100% - min(740px, 100% - 90px) - 66px) / 2);
    bottom: max(14px, env(safe-area-inset-bottom));
    justify-content: center;
    width: 58px;
    height: 58px;
    padding: 0;
  }

  .to-top svg {
    width: 18px;
    height: 18px;
  }

  .to-top span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* ---- Nudge ----------------------------------------------------------------------------- */

/* A hand-drawn arrow above the dock, pointing down at the booking button. Desktop only; it
   fades as the page scrolls (dock.js sets --nudge-scroll) and steps aside while the avatar
   answers, since the panel opens in its place. */
.nudge {
  position: absolute;
  right: -104px;
  bottom: calc(100% - 4px);
  width: 220px;
  height: 150px;
  display: none;
  color: var(--marker);
  pointer-events: none;
  opacity: var(--nudge-scroll, 1);
  transition: opacity 0.2s;
}

@media (min-width: 1000px) and (hover: hover) {
  html.js .nudge {
    display: block;
  }
}

.avatar-open .nudge {
  opacity: 0;
}

.nudge-text {
  position: absolute;
  right: 8px;
  top: -26px;
  font-family: "Desk Hand", "Bradley Hand", "Segoe Print", cursive;
  font-weight: 700;
  font-size: 3rem;
  line-height: 1;
  white-space: nowrap;
  /* Caveat stops at 700; a thin stroke in the same red thickens it past that. */
  -webkit-text-stroke: 1px currentColor;
  text-decoration: underline 3px;
  text-decoration-skip-ink: none;
  text-underline-offset: 6px;
  transform: rotate(-5deg);
  transform-origin: right center;
}

.nudge-arrow {
  position: absolute;
  left: 0;
  top: 0;
  overflow: visible;
}

.nudge-arrow path {
  fill: none;
  stroke: currentColor;
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (prefers-reduced-motion: no-preference) {
  .nudge-line {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: nudge-draw 1.1s cubic-bezier(0.5, 0, 0.3, 1) 1.2s forwards;
  }

  .nudge-head,
  .nudge-text {
    opacity: 0;
    animation: nudge-show 0.25s ease-out forwards;
  }

  .nudge-text {
    animation-delay: 0.9s;
  }

  .nudge-head {
    animation-delay: 2.2s;
  }
}

@keyframes nudge-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes nudge-show {
  to {
    opacity: 1;
  }
}

/* ---- Avatar panel ---------------------------------------------------------------------- */

.panel {
  max-height: min(60vh, 560px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 18px 22px 16px;
  border-radius: 24px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  backdrop-filter: blur(20px) saturate(1.3);
  border: 1px solid var(--hair);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.45);
}

.panel[hidden] {
  display: none;
}

@media (prefers-reduced-motion: no-preference) {
  .panel:not([hidden]) {
    animation: panel-in 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
}

@keyframes panel-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.985);
  }
}

.panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.crumbs button {
  padding: 2px 4px;
  border: 0;
  border-radius: 5px;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}

.crumbs button:hover {
  color: var(--bone);
}

.crumbs .sep {
  opacity: 0.5;
}

.panel-tools {
  flex: none;
  display: flex;
  align-items: center;
  gap: 2px;
  margin: -6px -8px 0 0;
}

.panel-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--muted);
  cursor: pointer;
}

.panel-icon:hover,
.tip.open .panel-icon {
  color: var(--bone);
  background: rgba(246, 239, 227, 0.08);
}

.panel-body {
  margin-top: 8px;
}

.answer-q {
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--muted);
}

.answer-a {
  margin-top: 8px;
  font-size: 1.12rem;
  line-height: 1.5;
  text-wrap: pretty;
}

.answer-a p + p {
  margin-top: 0.7em;
}

.answer-actions {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  font-size: 0.95rem;
}

.chips {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chips:empty {
  display: none;
}

.chip {
  padding: 7px 13px;
  border: 1px solid var(--hair);
  border-radius: 999px;
  background: rgba(246, 239, 227, 0.04);
  color: var(--bone);
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.chip:hover {
  border-color: rgba(55, 194, 184, 0.7);
  background: rgba(55, 194, 184, 0.1);
}

.chips-label {
  width: 100%;
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.typing::after {
  content: "";
  display: inline-block;
  width: 0.5em;
  height: 1em;
  margin-left: 2px;
  vertical-align: -0.12em;
  background: var(--turquoise);
  animation: caret 0.9s steps(1) infinite;
}

@keyframes caret {
  50% {
    opacity: 0;
  }
}

/* ---- Map ------------------------------------------------------------------------------- */

.map {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--bone);
  overflow-y: auto;
}

.map::backdrop {
  background: transparent;
}

.map-open-state main,
.map-open-state .footer,
.map-open-state .rail,
.map-open-state .dock,
.map-open-state .to-top,
.map-open-state .bar {
  opacity: 0;
  transition: opacity 0.35s;
  pointer-events: none;
}

main,
.footer,
.rail,
.bar {
  transition: opacity 0.35s;
}

.dock {
  transition: opacity 0.35s, width 0.3s ease, transform 0.3s ease;
}

/* While the avatar answers, the page steps back so the portrait and the answer lead. */
.avatar-open main,
.avatar-open .footer,
.avatar-open .rail {
  opacity: 0.12;
}

.map-inner {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  padding: 20px var(--gutter) 28px;
  background: rgba(15, 24, 34, 0.55);
}

.map-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.map-head h2 {
  font-size: 0.8rem;
  font-weight: 560;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.map-aside {
  font-weight: 420;
  font-style: italic;
  letter-spacing: 0.02em;
  text-transform: none;
}

.map-close {
  flex: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 8px 14px;
  border: 1px solid var(--hair);
  border-radius: 999px;
  background: rgba(15, 24, 34, 0.6);
  color: var(--bone);
  font: inherit;
  font-size: 0.88rem;
  cursor: pointer;
}

.map-regions {
  flex: 1;
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.map-region {
  display: grid;
  grid-template-columns: 8rem 1fr;
  align-items: center;
  gap: 16px;
  padding-top: 10px;
  border-top: 1px solid var(--hair);
}

.map-region-label {
  font-size: 0.95rem;
  font-weight: 700;
  font-stretch: 90%;
}

/* Six cells to a row: the Work region fills one, Projects and Me leave room at the end. */
.map-cells {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}

.map-cell {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px;
  border-radius: 14px;
  text-decoration: none;
  transition: background 0.2s;
}

.map-cell:hover,
.map-cell:focus-visible {
  background: rgba(246, 239, 227, 0.05);
}

.map-stage {
  height: clamp(84px, 17vh, 170px);
}

.map-label {
  font-size: 0.86rem;
  color: var(--bone-soft);
}

.map-num {
  font-family: var(--mono);
  color: var(--muted);
  margin-right: 4px;
}

/* Two cells to a row on a phone, and five on a tablet, where the Work and Me regions fill their
   rows. A cell's height gives way to a short screen, such as a phone turned sideways. */
@media (max-width: 899px) {
  .map-region {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .map-cells {
    grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  }

  .map-stage {
    height: min(20vw, 26svh, 136px);
  }
}

/* ---- Tooltips -------------------------------------------------------------------------- */

.tip {
  position: relative;
  display: inline-flex;
}

.tip-body {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 5;
  width: max-content;
  max-width: min(300px, calc(100vw - 48px));
  padding: 11px 14px;
  border: 1px solid var(--hair);
  border-radius: 14px;
  background: var(--ink-deep);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
  color: var(--bone-soft);
  font-size: 0.86rem;
  font-weight: 420;
  line-height: 1.5;
  letter-spacing: normal;
  text-align: left;
  text-transform: none;
  white-space: normal;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.18s, transform 0.18s, visibility 0s linear 0.18s;
}

/* A bridge over the gap, so the pointer can move from the trigger onto the text. */
.tip-body::before {
  content: "";
  position: absolute;
  inset: -14px 0 100%;
}

@media (prefers-reduced-motion: no-preference) {
  .tip-body {
    transform: translateY(-4px);
  }
}

.tip.open .tip-body,
[data-tip-trigger]:focus-visible + .tip-body {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: opacity 0.18s, transform 0.18s;
}

@media (hover: hover) {
  .tip:hover .tip-body {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity 0.18s, transform 0.18s;
  }
}

/* After Escape, hidden until the pointer or the focus comes back. */
.tip.hush .tip-body {
  visibility: hidden;
  opacity: 0;
  transition: none;
}

/* On a phone the count's tooltip spans the screen under the bar. */
@media (max-width: 599px) {
  .bar .tip-body {
    position: fixed;
    top: 60px;
    left: var(--gutter);
    right: var(--gutter);
    width: auto;
    max-width: none;
  }
}

/* ---- Mail chooser ---------------------------------------------------------------------- */
/* The dialog @honorka/webkit builds for every email link, styled under its default class names. */

.mail-chooser {
  width: min(400px, calc(100% - 2 * var(--gutter)));
  max-width: none;
  padding: 0;
  border: 1px solid var(--hair);
  border-radius: 22px;
  background: var(--ink-deep);
  color: var(--bone);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

.mail-chooser::backdrop {
  background: rgba(10, 16, 23, 0.6);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

@media (prefers-reduced-motion: no-preference) {
  .mail-chooser[open] {
    animation: mail-chooser-in 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
}

@keyframes mail-chooser-in {
  from {
    transform: translateY(12px);
    opacity: 0;
  }
}

.mail-chooser-box {
  position: relative;
  padding: 22px 22px 24px;
}

/* The right padding keeps the title clear of the close button. */
.mail-chooser-title {
  margin: 0;
  padding-right: 48px;
  font-size: 1.6rem;
  font-weight: 760;
  font-stretch: 85%;
}

.mail-chooser-to {
  margin: 6px 0 18px;
  color: var(--muted);
  font-size: 0.9rem;
}

.mail-chooser-address {
  font-family: var(--mono);
  font-weight: 500;
  color: var(--turquoise);
  overflow-wrap: anywhere;
  -webkit-user-select: all;
  user-select: all;
}

.mail-chooser-options {
  display: grid;
  gap: 10px;
}

.mail-chooser-option {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 0 18px;
  border: 1px solid var(--hair);
  border-radius: 999px;
  background: rgba(246, 239, 227, 0.04);
  color: var(--bone);
  font: inherit;
  font-size: 0.98rem;
  font-weight: 560;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.mail-chooser-option:hover {
  border-color: rgba(55, 194, 184, 0.7);
  background: rgba(55, 194, 184, 0.1);
}

.mail-chooser-icon {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--turquoise);
}

/* The cross is drawn at 1em, so the font size sets its size. */
.mail-chooser-close {
  position: absolute;
  top: 18px;
  right: 18px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--hair);
  border-radius: 50%;
  background: none;
  color: var(--bone);
  font-size: 18px;
  cursor: pointer;
  transition: border-color 0.2s;
}

.mail-chooser-close:hover {
  border-color: rgba(55, 194, 184, 0.7);
}

/* ---- Booking sheet --------------------------------------------------------------------- */

.sheet {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(560px, 100%);
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-left: 1px solid var(--hair);
  background: var(--ink-deep);
  color: var(--bone);
}

.sheet::backdrop {
  background: rgba(10, 16, 23, 0.6);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

@media (prefers-reduced-motion: no-preference) {
  .sheet[open] {
    animation: sheet-in 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
}

@keyframes sheet-in {
  from {
    transform: translateX(40px);
    opacity: 0;
  }
}

.sheet-inner {
  height: 100%;
  overflow-y: auto;
  padding: 22px 22px 28px;
}

.sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.sheet-head h2 {
  font-size: 1.6rem;
  font-weight: 760;
  font-stretch: 85%;
}

.sheet-close {
  padding: 8px 14px;
  border: 1px solid var(--hair);
  border-radius: 999px;
  background: none;
  color: var(--bone);
  font: inherit;
  font-size: 0.88rem;
  cursor: pointer;
}

.sheet-intro {
  margin: 8px 0 18px;
  color: var(--bone-soft);
}

.book-embed {
  min-height: 520px;
  border-radius: 16px;
  overflow: hidden;
}

.book-fallback {
  margin-top: 14px;
  font-size: 0.9rem;
  color: var(--muted);
}

@media (max-width: 599px) {
  .sheet {
    inset: auto 0 0 0;
    width: 100%;
    height: 94svh;
    border-left: 0;
    border-top: 1px solid var(--hair);
    border-radius: 22px 22px 0 0;
  }
}

/* ---- Booking page ---------------------------------------------------------------------- */

.book-page {
  max-width: 880px;
  margin: 0 auto;
  padding: 110px var(--gutter) 60px;
}

.book-page h1 {
  margin: 14px 0 12px;
  font-size: clamp(2.2rem, 5vw, 4rem);
  font-weight: 800;
  font-stretch: 80%;
  line-height: 1;
}

.book-page .lead {
  margin-bottom: 28px;
}

/* The questions and service pages carry the dock, so their last lines stay above it. */
.page-questions .book-page,
.page-service .book-page {
  padding-bottom: calc(var(--dock-space) + 60px);
}

/* ---- Questions page -------------------------------------------------------------------- */

/* A jump to a section or an answer stops below the fixed top bar. */
.questions-page [id] {
  scroll-margin-top: 88px;
}

.qa-topics ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  font-weight: 620;
}

.qa-section {
  margin-top: 72px;
}

.qa-section h2 {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--hair);
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  font-weight: 780;
  font-stretch: 80%;
  line-height: 1;
}

.qa {
  max-width: 42rem;
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.qa h3 {
  font-size: 1.24rem;
  font-weight: 720;
  font-stretch: 90%;
  line-height: 1.25;
  text-wrap: balance;
}

.qa p {
  color: var(--bone-soft);
  text-wrap: pretty;
}

.qa .qa-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  color: var(--bone);
  font-size: 0.95rem;
}

.qa-chapter {
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.qa-chapter a {
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s;
}

.qa-chapter a:hover {
  color: var(--turquoise);
}

/* ---- Service pages -------------------------------------------------------------------- */

/* A chapter on a page of its own: its beats follow one another in the flow of the text. */
.service-page h1 {
  text-wrap: balance;
}

.service-page .lead {
  margin-bottom: 0;
}

.service-page .beat + .beat {
  margin-top: 48px;
}

.service-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin-top: 64px;
}

/* ---- Print: the words, dark on white, without the field and the controls ---------------- */

@media print {
  .field,
  .bar,
  .rail,
  .dock,
  .to-top,
  .mail-chooser,
  .stage,
  .end-roll,
  .scroll-cue,
  .hello-photo,
  .map,
  .sheet {
    display: none !important;
  }

  html,
  body {
    background: #fff;
    color: #172331;
  }

  .hello-name,
  .field-on .hello-name {
    color: #172331;
  }

  .hello,
  .chapter {
    display: block;
    min-height: 0;
    padding: 12px 0;
  }

  .copy {
    padding: 0;
    max-width: none;
    background: none;
  }

  .end-screen,
  .end-live .end-screen {
    position: static;
    display: block;
    height: auto;
    min-height: 0;
    padding: 12px 0;
  }

  .end-lines {
    display: block;
    text-align: left;
  }

  .end-live .end-line {
    margin: 0 0 1em;
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .live,
  .lead,
  .body,
  .examples-title,
  .examples li,
  .item-about,
  .fact dt,
  .note,
  .tagline,
  .qa p,
  .qa-chapter a,
  .end-line,
  .end-ask {
    color: #172331;
  }
}

/* ---- Reduced motion -------------------------------------------------------------------- */

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