/* Two stones: white marble by day, black marble with gold veins by night. index.html sets
   data-theme from the visitor's clock before anything is drawn. */
:root {
  --stone: #f3f3f1;
  --stone-image: url("../img/marble-day.webp");
  --stone-image-small: url("../img/marble-day-1536.webp");
  --ink: #16181d;
  --ink-soft: #565a64;
  --accent: #16181d;
  --on-accent: #f6f6f4;
  --accent-hover: #3a3e48;
  --shadow: 22 24 30;
  --shadow-strength: 0.3;


  --inset: clamp(18px, 2.6vw, 36px);
  --foot: 0px; /* raised on phones, to leave room for the fine print */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ui: "Martian Mono", ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;

  /* Overwritten by main.js once the viewport is measured; these values carry the no-script page. */
  --data-fs: min(21vw, 30vh);
  --beaut-fs: calc(var(--data-fs) * 0.6);
}

:root[data-theme="night"] {
  --stone: #0a0a0b;
  --stone-image: url("../img/marble-night.webp");
  --stone-image-small: url("../img/marble-night-1536.webp");
  --ink: #efe9da;
  --ink-soft: #a9a290;
  --accent: #c79a3b;
  --on-accent: #0a0a0b;
  --accent-hover: #e2bb62;
  --shadow: 0 0 0;
  --shadow-strength: 0.75;
}

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

html {
  height: 100%;
  background: var(--stone);
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html[data-theme="night"] {
  color-scheme: dark;
}

body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--stone);
  color: var(--ink);
  font: 500 0.8125rem/1.3 var(--ui);
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--accent);
  color: var(--on-accent);
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

button {
  font: inherit;
  color: inherit;
  border-radius: 0;
  cursor: pointer;
}

.sr-only,
html.js .name__text,
html.js .statement__data-text,
html.js .statement__is-text,
html.js .statement__beautiful-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Marble ---------- */

.marble {
  position: fixed;
  z-index: 0;
  inset: 0;
  background: var(--stone) var(--stone-image) center / 2200px auto;
  will-change: transform;
}

@media (max-width: 719px) {
  .marble {
    background-image: var(--stone-image-small);
    background-size: 1150px auto;
  }
}

/* ---------- Name ---------- */

.name {
  position: fixed;
  z-index: 3;
  top: var(--inset);
  left: var(--inset);
}

.name p {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
}

.name__screen {
  display: none;
}

html.js .name__screen {
  display: block;
}

/* The name is carved inside the temple only: main.js fades it in on the way in. */
html.js .name {
  opacity: 0;
  pointer-events: none;
}

/* ---------- Day / night switch ---------- */

/* ---------- Top-right corner: language and day / night ---------- */

.corner-controls {
  position: fixed;
  z-index: 3;
  top: var(--inset);
  right: var(--inset);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* The language toggle names the language it switches to. 44px tall to the touch. */
.lang-toggle {
  padding: 13px 8px;
  border: 0;
  background: none;
  line-height: 18px;
  letter-spacing: 0.06em;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  transition: color 160ms ease;
}

.lang-toggle:hover {
  color: var(--ink-soft);
}

html:not(.js) .corner-controls {
  display: none;
}

.theme-switch {
  --w: 68px;
  --h: 34px;
  --knob: 26px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: var(--w);
  height: var(--h);
  padding: 0 calc((var(--h) - var(--knob)) / 2);
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: transparent;
}

/* The pill is drawn at 34px but takes taps over a 44px band, the comfortable size for a finger. */
.theme-switch::after {
  content: "";
  position: absolute;
  inset: -6px -4px;
}

.theme-switch__icon {
  position: relative;
  z-index: 1;
  width: var(--knob);
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--ink-soft);
  transition: color 240ms ease;
}

.theme-switch__icon--moon {
  fill: currentColor;
  stroke: none;
}

/* The dot sits behind the icon that is chosen and slides across to the other. */
.theme-switch__knob {
  position: absolute;
  top: 50%;
  left: calc((var(--h) - var(--knob)) / 2 - 1px);
  width: var(--knob);
  height: var(--knob);
  border-radius: 50%;
  background: var(--accent);
  transform: translateY(-50%);
  transition: transform 420ms var(--ease-out), background-color 240ms ease;
}

html[data-theme="night"] .theme-switch__knob {
  transform: translate(calc(var(--w) - var(--h)), -50%);
}

html[data-theme="day"] .theme-switch__icon--sun,
html[data-theme="night"] .theme-switch__icon--moon {
  color: var(--on-accent);
}

.theme-switch:hover {
  border-color: var(--ink-soft);
}

html:not(.js) .theme-switch {
  display: none;
}

/* Changing stone crossfades the whole page (where the browser can). */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 650ms;
  animation-timing-function: ease;
}

/* ---------- Stage: the statement inside, the temple in front of it ---------- */

.stage {
  position: fixed;
  z-index: 1;
  inset: 0;
  touch-action: pinch-zoom;
}

html.js:not(.is-open) .stage {
  cursor: pointer;
}

.door {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  will-change: transform, opacity;
}

.statement {
  position: absolute;
  z-index: 0;
  inset: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Sits a little above centre, clear of the contact panel when it opens. */
  padding-bottom: 9vh;
  font-weight: 400;
  text-align: center;
}

/* main.js drives the walk-in: scale, position and opacity follow the entry. */
html.js .statement {
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

.statement__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  font-size: 1rem;
  font-weight: 400;
}

.statement__data {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: calc(var(--beaut-fs) * 0.22);
  font-size: var(--beaut-fs);
}

.statement__before {
  font: 700 0.4em/1 "Cinzel", Georgia, serif;
  font-size: max(0.4em, 0.875rem);
}

.statement__before[hidden] {
  display: none;
}

.statement__before-carved {
  display: none;
}

html.js .statement__before-carved {
  display: block;
}

html.js .statement__before-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.statement__data-text {
  display: block;
  font: 900 var(--data-fs) / 0.8 "Unbounded", var(--ui);
  text-transform: uppercase;
}

.statement__screen,
.statement__letters {
  display: none;
}

/* Inlaid pieces resting on the stone. The shadow is sized from the letters, so small letters
   cast a small one. */
html.js .statement__screen,
html.js .statement__letters {
  display: block;
}

html.js .statement__screen {
  filter: drop-shadow(0 calc(var(--data-fs) * 0.04) calc(var(--data-fs) * 0.055) rgb(var(--shadow) / var(--shadow-strength)));
}

html.js .statement__letters {
  filter: drop-shadow(0 calc(var(--beaut-fs) * 0.05) calc(var(--beaut-fs) * 0.07) rgb(var(--shadow) / var(--shadow-strength)));
}

.statement__line {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: calc(var(--beaut-fs) * 0.22);
  margin-top: calc(var(--data-fs) * 0.12);
  font-size: var(--beaut-fs);
  line-height: 1.15;
  white-space: nowrap;
}

/* "is" is carved into the stone like the name (drawn by main.js); without script it is set in
   the same face. */
.statement__is {
  font: 700 0.4em/1 "Cinzel", Georgia, serif;
  font-size: max(0.4em, 0.875rem);
}

.statement__is-carved {
  display: none;
}

html.js .statement__is-carved {
  display: block;
}

.statement__beautiful {
  display: block;
  font-family: "Rozha One", Georgia, serif;
}

/* Narrow screens: "is" (and Spanish "los") take their own line so the words below can use the
   full width. */
@media (max-width: 719px) {
  .statement__data {
    flex-direction: column;
    align-items: center;
    gap: calc(var(--beaut-fs) * 0.12);
  }

  .statement__line {
    flex-direction: column;
    align-items: center;
    gap: calc(var(--beaut-fs) * 0.12);
    margin-top: calc(var(--data-fs) * 0.08);
  }
}

/* ---------- Corner controls ---------- */

.door-toggle {
  position: absolute;
  z-index: 2;
  left: calc(var(--inset) - 14px);
  bottom: calc(var(--inset) + var(--foot) - 2px);
  padding: 16px 14px;
  border: 0;
  background: none;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  transition: color 160ms ease;
}

.door-toggle:hover {
  color: var(--ink-soft);
}

.contact {
  position: fixed;
  z-index: 3;
  right: var(--inset);
  bottom: calc(var(--inset) + var(--foot));
}

/* The page's one filled control: it is the primary action. */
.contact__toggle {
  padding: 16px 20px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--on-accent);
  line-height: 1;
  transition: background-color 160ms ease, border-color 160ms ease;
}

.contact__toggle:hover,
.contact.is-open .contact__toggle {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

/* The channels: small text links on the bare stone, stacked right above the button. No box,
   so nothing covers the statement. */
.contact__menu {
  /* Out of flow, so the closed menu never covers the other corner's control. */
  position: absolute;
  right: 0;
  bottom: calc(100% + 6px);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin: 0;
  padding: 0;
  list-style: none;
  transition: opacity 180ms ease, transform 380ms var(--ease-out), visibility 0s;
}

html.js .contact:not(.is-open) .contact__menu {
  visibility: hidden;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 140ms ease, transform 140ms ease, visibility 0s linear 140ms;
}

.contact__menu a {
  display: block;
  /* 44px tall to the touch, though the text is small. */
  padding: 13px 2px 13px 16px;
  color: var(--ink);
  line-height: 18px;
  white-space: nowrap; /* the phone number stays on one line */
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  transition: color 160ms ease;
}

.contact__menu a:hover {
  color: var(--ink-soft);
}

/* Phones: the links wrap into two short rows across the width instead of one tall column, so
   they stay below the statement even on small, short screens. */
@media (max-width: 719px) {
  .contact__menu {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    column-gap: 14px;
    width: calc(100vw - 2 * var(--inset));
  }

  .contact__menu a {
    padding: 13px 2px;
  }
}

/* ---------- Notes: a fact or two, written quietly on the stone inside the temple ---------- */

.notes {
  position: fixed;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 600ms ease;
}

.notes.is-shown {
  opacity: 1;
}

.notes[hidden] {
  display: none;
}

/* A note is a small card from a different drawer for each kind of fact: typed on ruled paper
   (History), printed on grid paper (AI), stamped on a striped ticket (Numbers) or scribbled on
   a dotted sticker (You). Each card names its paper, pattern tone, ink and accent for both
   stones, and draws its pattern in CSS alone, faint enough to leave the words at 4.5:1 or
   better (checked by scripts/check-contrast.mjs). It fades in where notes.js finds free stone
   and fades out again. */
.note {
  --card: var(--stone);
  --card-2: var(--stone);
  --card-ink: var(--ink);
  --card-accent: var(--ink-soft);
  --card-fs: 13px;
  --card-lh: 1.55;
  --tilt: 0deg;
  position: absolute;
  margin: 0;
  padding: 12px 14px 14px;
  color: var(--card-ink);
  background-color: var(--card);
  box-shadow: 0 1px 2px rgb(var(--shadow) / calc(var(--shadow-strength) * 0.6)), 0 10px 24px -10px rgb(var(--shadow) / var(--shadow-strength));
  text-align: left;
  pointer-events: auto;
  cursor: pointer;
  opacity: 0;
  transform: translateY(4px) rotate(var(--tilt));
  transition: opacity 900ms ease, transform 1200ms var(--ease-out);
}

.note.is-in {
  opacity: 1;
  transform: rotate(var(--tilt));
}

.note:focus-visible {
  outline-offset: 4px;
}

.note__label {
  margin: 0 0 6px;
  font: 400 10px/1.2 var(--ui);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--card-accent);
}

.note__text {
  margin: 0;
  font-size: var(--card-fs);
  line-height: var(--card-lh);
  letter-spacing: 0.01em;
  text-wrap: pretty;
}

/* History: typed on ruled paper held down by a strip of tape, the label a dashed stamp. The
   rules run 21px apart, the text's own line height, starting under the label. */
.note--history {
  --card: #f2e9d4;
  --card-2: #ddcfab;
  --card-ink: #2a2318;
  --card-accent: #7a3b1e;
  --tape: rgb(255 255 255 / 0.45);
  --card-fs: 13px;
  --card-lh: 21px;
  --tilt: -0.7deg;
  font-family: "Courier Prime", "Courier New", Courier, monospace;
  background-image: repeating-linear-gradient(180deg, transparent 0 20px, var(--card-2) 20px 21px);
  background-position: 0 27px;
}

.note--history::before {
  content: "";
  position: absolute;
  top: -9px;
  left: 50%;
  width: 74px;
  height: 18px;
  background: var(--tape);
  box-shadow: 0 1px 2px rgb(var(--shadow) / 0.12);
  transform: translateX(-50%) rotate(-2.5deg);
}

.note--history .note__label {
  display: inline-block;
  padding: 2px 5px 1px;
  border: 1px dashed var(--card-accent);
  font-family: inherit;
  transform: rotate(-1.5deg);
}

/* AI: printed on grid paper under a bar of light, the label in brackets like a tag in code. */
.note--ai {
  --card: #e6f0f2;
  --card-2: #cbdde1;
  --card-ink: #0e2227;
  --card-accent: #0a6969;
  --card-fs: 13.5px;
  --card-lh: 1.5;
  --tilt: 0.5deg;
  font-family: "Chakra Petch", "Segoe UI", system-ui, sans-serif;
  background-image: linear-gradient(var(--card-2) 1px, transparent 1px), linear-gradient(90deg, var(--card-2) 1px, transparent 1px);
  background-size: 14px 14px;
  background-position: -1px -1px;
  border-top: 3px solid var(--card-accent);
}

.note--ai .note__label {
  font-family: inherit;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.18em;
}

.note--ai .note__label::before {
  content: "[ ";
}

.note--ai .note__label::after {
  content: " ]";
}

/* Numbers: a striped ticket with a stamped label. */
.note--numbers {
  --card: #f5eee2;
  --card-2: #e9dfcc;
  --card-ink: #1c1711;
  --card-accent: #a14800;
  --card-on-accent: #fff6ea;
  --card-fs: 14.5px;
  --card-lh: 1.45;
  --tilt: -0.4deg;
  font-family: "Oswald", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  background-image: repeating-linear-gradient(-45deg, var(--card-2) 0 5px, transparent 5px 13px);
}

.note--numbers .note__label {
  display: inline-block;
  margin-bottom: 8px;
  padding: 3px 7px 2px;
  background: var(--card-accent);
  color: var(--card-on-accent);
  font-family: inherit;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.2em;
}

.note--numbers .note__text {
  letter-spacing: 0.02em;
}

/* You: a dotted sticker with a folded corner, written by hand. The paper is drawn on ::before so
   the fold can be cut from it while the shadow, a filter on the card, still follows the cut. */
.note--you {
  --card: #f9e5ed;
  --card-2: #ecc0d3;
  --card-fold: #e4b2c8;
  --card-ink: #2a141e;
  --card-accent: #9e2060;
  --card-fs: 16px;
  --card-lh: 1.4;
  --tilt: 1deg;
  font-family: "Indie Flower", "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
  background: none;
  box-shadow: none;
  filter: drop-shadow(0 1px 2px rgb(var(--shadow) / calc(var(--shadow-strength) * 0.6))) drop-shadow(0 8px 14px rgb(var(--shadow) / calc(var(--shadow-strength) * 0.45)));
}

.note--you::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background-color: var(--card);
  background-image: radial-gradient(var(--card-2) 1.5px, transparent 1.9px);
  background-size: 11px 11px;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
}

.note--you::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 18px;
  height: 18px;
  background: linear-gradient(225deg, transparent 50%, var(--card-fold) 50%);
}

.note--you .note__label {
  font-family: inherit;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-decoration: underline wavy;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

html[data-theme="night"] .note--history {
  --card: #2b2318;
  --card-2: #3d3222;
  --card-ink: #f0e6d0;
  --card-accent: #e8b48a;
  --tape: rgb(255 240 210 / 0.22);
}

html[data-theme="night"] .note--ai {
  --card: #0f2327;
  --card-2: #1b363c;
  --card-ink: #e2f2f4;
  --card-accent: #5fe0d4;
}

html[data-theme="night"] .note--numbers {
  --card: #211a12;
  --card-2: #2d2419;
  --card-ink: #f3ecdd;
  --card-accent: #ffb066;
  --card-on-accent: #241408;
}

html[data-theme="night"] .note--you {
  --card: #2c1722;
  --card-2: #3f2232;
  --card-fold: #4c2a3c;
  --card-ink: #f8e6ee;
  --card-accent: #ff9ac6;
}

/* Used only to measure how tall a note is. It changes card from one measurement to the next, so
   nothing on it may transition (with reduced motion every property otherwise takes 1ms, and a
   measurement taken at once would see the last card's type size). */
.note--probe {
  visibility: hidden;
  top: 0;
  left: -9999px;
}

.note--probe,
.note--probe * {
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .note {
    transform: rotate(var(--tilt));
    transition: none;
  }
}

/* ---------- The concierge: a small chat stacked above "Contact me" ---------- */

/* A quiet bordered control in the contact corner, right above the "Contact me" button, that
   opens a panel above itself. The panel has its own paper (--chat-*), one tone off the stone,
   checked for AA in both stones by scripts/check-contrast.mjs. Hidden until concierge.js hears
   from its backend, and while the contact links are open (they take this corner). */
.concierge {
  --chat-bg: #fbfbfa;
  --chat-ink: #16181d;
  --chat-ink-soft: #565a64;
  --chat-bubble: #ebebe7;
  --chat-line: #cfcfca;
  --contact-h: 46px; /* the "Contact me" button's height, which the concierge sits above */
  position: fixed;
  z-index: 3;
  right: var(--inset);
  bottom: calc(var(--inset) + var(--foot) + var(--contact-h) + 10px);
}

html.is-contacting .concierge {
  visibility: hidden;
}

html[data-theme="night"] .concierge {
  --chat-bg: #141416;
  --chat-ink: #efe9da;
  --chat-ink-soft: #a9a290;
  --chat-bubble: #26262a;
  --chat-line: #3c3c41;
}

.concierge[hidden] {
  display: none;
}

.concierge__toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px 14px 14px;
  border: 1px solid var(--ink-soft);
  background: var(--stone);
  color: var(--ink);
  line-height: 1;
  transition: border-color 160ms ease;
}

.concierge__toggle:hover,
.concierge.is-open .concierge__toggle {
  border-color: var(--ink);
}

.concierge__icon {
  flex: none;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.concierge__panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  display: flex;
  flex-direction: column;
  width: min(340px, calc(100vw - 2 * var(--inset)));
  max-height: min(480px, calc(100vh - 2 * var(--inset) - 72px));
  border: 1px solid var(--chat-line);
  background: var(--chat-bg);
  color: var(--chat-ink);
  box-shadow: 0 14px 36px -14px rgb(var(--shadow) / var(--shadow-strength));
}

.concierge__panel[hidden] {
  display: none;
}

.concierge__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 8px 10px 14px;
  border-bottom: 1px solid var(--chat-line);
}

.concierge__title {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.04em;
}

.concierge__close {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--chat-ink-soft);
}

.concierge__close:hover {
  color: var(--chat-ink);
}

.concierge__close svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.concierge__log {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 8px;
  min-height: 120px;
  padding: 12px 14px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.concierge__msg {
  max-width: 88%;
  margin: 0;
  padding: 9px 11px;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.concierge__msg--bot {
  align-self: flex-start;
  background: var(--chat-bubble);
}

.concierge__msg--user {
  align-self: flex-end;
  background: var(--accent);
  color: var(--on-accent);
}

.concierge__msg--wait {
  padding-left: 0;
  background: none;
  color: var(--chat-ink-soft);
}

.concierge__slots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin: 2px 0;
}

.concierge__slot {
  padding: 8px;
  border: 1px solid var(--chat-line);
  background: var(--chat-bg);
  color: var(--chat-ink);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  text-align: left;
  transition: border-color 160ms ease;
}

.concierge__slot:hover,
.concierge__slot.is-picked {
  border-color: var(--chat-ink);
}

.concierge__slot:disabled {
  cursor: default;
  opacity: 0.55;
}

.concierge__slot.is-picked {
  opacity: 1;
}

.concierge__slot small {
  display: block;
  color: var(--chat-ink-soft);
  font-size: 10px;
}

.concierge__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.concierge__action {
  display: inline-block;
  padding: 10px 12px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--on-accent);
  font: inherit;
  font-size: 11.5px;
  line-height: 1;
  text-decoration: none;
}

.concierge__action--quiet {
  border-color: var(--chat-line);
  background: none;
  color: var(--chat-ink);
}

.concierge__action--quiet:hover {
  border-color: var(--chat-ink);
}

.concierge__form {
  display: flex;
  gap: 6px;
  padding: 10px 10px 8px 14px;
  border-top: 1px solid var(--chat-line);
}

.concierge__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--chat-line);
  border-radius: 0;
  background: var(--chat-bg);
  color: var(--chat-ink);
  font: inherit;
  font-weight: 400;
}

.concierge__input::placeholder {
  color: var(--chat-ink-soft);
  opacity: 1;
}

.concierge__send {
  padding: 10px 14px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--on-accent);
  line-height: 1;
}

.concierge__send:disabled,
.concierge__input:disabled {
  cursor: default;
  opacity: 0.6;
}

.concierge__note {
  margin: 0;
  padding: 0 14px 10px;
  color: var(--chat-ink-soft);
  font-size: 10px;
  font-weight: 400;
  line-height: 1.4;
}

/* Phones: a square button with the icon alone (its words stay for assistive technology), and
   the panel as a sheet over the bottom of the screen. Both are out of flow: nothing moves. */
@media (max-width: 719px) {
  .concierge__toggle {
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
  }

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

  .concierge__icon {
    width: 20px;
    height: 20px;
  }

  .concierge__panel {
    position: fixed;
    inset: auto 12px 12px;
    width: auto;
    max-height: min(78vh, 560px);
  }

  .concierge__slots {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .concierge__toggle,
  .concierge__slot {
    transition: none;
  }
}

/* ---------- Fine print ---------- */

.fineprint {
  position: fixed;
  z-index: 3;
  left: 50%;
  bottom: 4px;
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  color: var(--ink-soft);
  font: 400 11px/16px var(--ui);
  white-space: nowrap;
  /* A soft halo of the stone's own colour, so a vein passing behind never breaks a word. */
  text-shadow: 0 0 3px var(--stone), 0 0 7px var(--stone), 0 0 12px var(--stone);
  transform: translateX(-50%);
}

.fineprint__notes {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* 44px tall to the touch without moving the line. */
.fineprint__notes {
  position: relative;
}

.fineprint__notes::after {
  content: "";
  position: absolute;
  inset: -14px -6px;
}

.fineprint__notes[hidden] {
  display: none;
}

@media (max-width: 719px) {
  :root {
    --foot: 14px;
  }
}

/* ---------- No script: the statement stands on its own ---------- */

html:not(.js) .door,
html:not(.js) .door-toggle {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 1ms !important;
    transition-delay: 0s !important;
  }
}