/*
 * The Front Door: /links, private rooms at /r/, and card mode at /links/card/.
 * Second edition, 2026-09-17.
 *
 * Phones get one column in block order, and tablets run the same order on two
 * tracks so paired blocks sit side by side. From 960px a rail sits beside the
 * content and follows the reader, and the content is a six-track grid where
 * blocks span full, half, or third. Everything composes the plum ember
 * tokens in iris.css: ivory and charcoal surfaces, purple as the one accent,
 * ember for small signals. Shapes: 20px cards, 14px rows, pill controls, and
 * one filled button per area. No accent line on any edge.
 */
.fd-page {
  --fd-max: 1200px;
  --fd-gutter: 16px;
  --fd-gap: 14px;
  --fd-pad: 20px;
  --fd-radius: 20px;
  --fd-inner: 14px;
  --fd-well: var(--bg);
  --fd-well-hover: color-mix(in srgb, var(--ink) 4%, var(--bg));
  --fd-lift: 0 1px 2px #28252b0a, 0 18px 40px -24px #401d3440;
  --fd-go: color-mix(in srgb, var(--accent) 14%, transparent);
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
}

:root[data-theme="dark"] .fd-page {
  --fd-lift: 0 22px 44px -26px #000000cc;
  --fd-well-hover: color-mix(in srgb, var(--ink) 5%, var(--bg));
}

@media (min-width: 640px) {
  .fd-page {
    --fd-gutter: 28px;
    --fd-gap: 16px;
    --fd-pad: 22px;
  }
}

@media (min-width: 1024px) {
  .fd-page {
    --fd-gutter: 40px;
    --fd-gap: 20px;
    --fd-pad: 26px;
    --fd-radius: 22px;
  }
}

/* ---- Bar ------------------------------------------------------------------- */
/* Edge to edge under a hairline, like the site header, with its controls on the
   composition's content edge. */
.fd-bar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: var(--bar-h);
  padding: var(--s-3) max(var(--fd-gutter), calc((100% - var(--fd-max)) / 2 + var(--fd-gutter)));
  border-bottom: 1px solid var(--line-soft);
  background: var(--bar-bg);
  -webkit-backdrop-filter: saturate(1.4) blur(22px);
  backdrop-filter: saturate(1.4) blur(22px);
}

.fd-bar .iris-brand small {
  display: none;
}

.fd-bar-actions {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.fd-bar-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 40px;
  padding: 0 var(--s-4) 0 var(--s-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  color: var(--ink);
  font-size: var(--t-small);
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}

.fd-bar-link svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.fd-bar-link:hover {
  border-color: var(--accent);
  background-color: var(--soft);
  color: var(--accent);
}

button.fd-bar-link {
  background: none;
  font-family: inherit;
  cursor: pointer;
}

/* The home page's ring button, sized to sit beside My card. */
.fd-bar .ask-ai-cta {
  height: 40px;
  min-height: 40px;
  padding: 0 var(--s-4) 0 var(--s-3);
  font-weight: 500;
}

/* Two labelled controls do not fit beside the brand on a phone. */
@media (max-width: 559.98px) {
  .fd-bar .ask-ai-toggle {
    width: 40px;
    padding: 0;
  }

  .fd-bar .ask-ai-toggle span {
    display: none;
  }
}

/* ---- Frame ----------------------------------------------------------------- */
/* A quiet wash of the two brand colours over a dot grid, edge to edge behind
   the bar and the hero, gone before the first card. The page's background
   paints the canvas, so this layer sits above it and below everything else.
   The glows keep to the composition on wide screens. */
.fd-page:not(.fd-card-page)::before {
  /* Gradient sizes cannot be math functions, so the glows are sized in pixels
     and placed against the centre; a phone gets its own. */
  --wash-accent: 680px 400px at max(18%, 50% - 440px) 34%;
  --wash-ember: 520px 300px at min(86%, 50% + 520px) 14%;
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  left: 0;
  height: 580px;
  pointer-events: none;
  background:
    radial-gradient(var(--wash-accent), color-mix(in srgb, var(--accent) 15%, transparent), transparent 70%),
    radial-gradient(var(--wash-ember), color-mix(in srgb, var(--ember) 11%, transparent), transparent 70%),
    radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--ink) 12%, transparent) 1px, transparent 1.5px) 0 0 / 22px 22px;
  -webkit-mask-image: linear-gradient(#000 30%, transparent 84%);
  mask-image: linear-gradient(#000 30%, transparent 84%);
}

@media (max-width: 639.98px) {
  .fd-page:not(.fd-card-page)::before {
    --wash-accent: 120% 340px at 14% 44%;
    --wash-ember: 90% 240px at 96% 12%;
  }
}

.fd {
  max-width: var(--fd-max);
  margin: 0 auto;
  padding: 0 var(--fd-gutter) var(--s-8);
}

.fd-body {
  display: flex;
  flex-direction: column;
  gap: var(--fd-gap);
}

/* A room has no hero, so its first card needs the air the hero would give. */
.fd-hero-host:empty + .fd-body {
  padding-top: clamp(28px, 6vw, 64px);
}

/* A block's place in the layout: phone order and the entrance stagger. */
.fd [data-order="1"] { --order: 1; }
.fd [data-order="2"] { --order: 2; }
.fd [data-order="3"] { --order: 3; }
.fd [data-order="4"] { --order: 4; }
.fd [data-order="5"] { --order: 5; }
.fd [data-order="6"] { --order: 6; }
.fd [data-order="7"] { --order: 7; }
.fd [data-order="8"] { --order: 8; }
.fd [data-order="9"] { --order: 9; }
.fd [data-order="10"] { --order: 10; }
.fd [data-order="11"] { --order: 11; }
.fd [data-order="12"] { --order: 12; }
.fd [data-order="13"] { --order: 13; }
.fd [data-order="14"] { --order: 14; }
.fd [data-order="15"] { --order: 15; }
.fd [data-order="16"] { --order: 16; }
.fd [data-order="17"] { --order: 17; }
.fd [data-order="18"] { --order: 18; }
.fd [data-order="19"] { --order: 19; }
.fd [data-order="20"] { --order: 20; }
.fd [data-order="21"] { --order: 21; }
.fd [data-order="22"] { --order: 22; }
.fd [data-order="23"] { --order: 23; }
.fd [data-order="24"] { --order: 24; }

/* Phones and tablets: one flow in the order the layout gives, whichever zone a
   block lives in. */
@media (max-width: 959.98px) {
  .fd-rail,
  .fd-main {
    display: contents;
  }

  .fd-body > * > .fd-block {
    order: var(--order);
  }
}

/* Tablets: the same flow on two tracks, so a pair of halves sits side by side
   and everything else takes the row. Dense packing closes the hole a rail
   block would leave if the layout put one between two halves. */
@media (min-width: 640px) and (max-width: 959.98px) {
  .fd-body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row dense;
  }

  .fd-body > * > .fd-block {
    grid-column: span 2;
  }

  .fd-body > .fd-main > [data-span="half"] {
    grid-column: span 1;
  }
}

/* Desktop: a rail beside the content. */
@media (min-width: 960px) {
  .fd-body {
    display: grid;
    grid-template-columns: minmax(320px, 4fr) minmax(0, 8fr);
    align-items: start;
  }

  .fd-rail,
  .fd-main {
    display: grid;
    gap: var(--fd-gap);
  }

  /* A page with nothing in the rail (most rooms) gives the content every column. */
  .fd-rail:empty {
    display: none;
  }

  .fd-body:has(> .fd-rail:empty) {
    grid-template-columns: minmax(0, 1fr);
  }

  /* The rail follows the reader; links.js measures it. A rail that fits pins
     under the bar, and a taller one pins by its end (--rail-top is negative). */
  .fd-rail.is-sticky {
    position: sticky;
    top: var(--rail-top, calc(var(--bar-h) + var(--s-5)));
  }

  .fd-main {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .fd-main > [data-span="full"] {
    grid-column: span 6;
  }

  .fd-main > [data-span="half"] {
    grid-column: span 3;
  }

  .fd-main > [data-span="third"] {
    grid-column: span 2;
  }
}

/* ---- Hero ------------------------------------------------------------------ */
.fd-hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-5);
  padding: var(--s-6) 0 var(--s-6);
}

.fd-hero-copy {
  min-width: 0;
}

.fd-eyebrow {
  margin: 0 0 var(--s-4);
  font: 500 var(--t-label)/1.4 var(--font-mono);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--muted);
}

.fd-name {
  margin: 0;
  font: 500 clamp(46px, 11.5vw, 112px)/0.94 var(--font-display);
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.fd-name em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--accent);
}

.fd-role {
  margin: var(--s-4) 0 0;
  max-width: 38ch;
  font-size: var(--t-lead);
  line-height: 1.45;
  color: var(--muted);
}

.fd-hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-5);
}

.fd-pill,
.fd-place {
  --dot: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 34px;
  max-width: 100%;
  padding: 6px 14px 6px 12px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--paper) 78%, transparent);
  font-size: var(--t-small);
  line-height: 1.3;
}

.fd-pill {
  font-weight: 500;
}

.fd-pill[data-state="available"] {
  --dot: var(--ember);
}

.fd-pill[data-state="quiet"] {
  --dot: var(--accent);
}

.fd-pill[data-state="unavailable"] {
  --dot: var(--line-strong);
}

.fd-place {
  color: var(--muted);
}

.fd-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dot, var(--accent));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dot, var(--accent)) 22%, transparent);
}

.fd-icon {
  flex: none;
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.fd-place .fd-icon {
  width: 15px;
  height: 15px;
  color: var(--ember);
}

.fd-time {
  font-variant-numeric: tabular-nums;
}

/* The portrait in a photographic frame, like the home page. */
.fd-portrait {
  order: -1;
  width: 88px;
  margin: 0;
  padding: 4px;
  border: 1px solid var(--line-soft);
  border-radius: 18px;
  background: var(--paper);
}

.fd-portrait picture {
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 14px;
  background: var(--soft);
}

.fd-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}

@media (min-width: 640px) {
  .fd-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--s-7);
    padding: var(--s-7) 0 var(--s-7);
  }

  .fd-portrait {
    order: 0;
    width: clamp(184px, 21vw, 256px);
    padding: 8px;
    border-radius: 28px;
    box-shadow: var(--fd-lift);
  }

  .fd-portrait picture {
    border-radius: 21px;
  }
}

@media (min-width: 1024px) {
  .fd-role {
    margin-top: var(--s-5);
  }
}

/* ---- Blocks ------------------------------------------------------------------ */
.fd-block {
  min-width: 0;
  padding: var(--fd-pad);
  border: 1px solid var(--line-soft);
  border-radius: var(--fd-radius);
  background: var(--paper);
  container: fd-block / inline-size;
}

.fd-kicker {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0 0 var(--s-4);
  font: 500 11.5px/1.4 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.fd-kicker .fd-icon {
  width: 14px;
  height: 14px;
  color: var(--accent);
}

/* Each block's label carries a drawn glyph from one stroked set. */
.fd-glyph {
  flex: none;
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fd-kicker .fd-glyph {
  margin-top: -1px;
  color: var(--accent);
}

/* A block's own headline: the last word in the serif, like the name. */
.fd-title {
  margin: 0;
  font: 500 clamp(28px, 5.2cqi, 42px)/1.06 var(--font-display);
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.fd-title em {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: var(--track-serif);
  color: var(--accent);
}

.fd-intro {
  margin: var(--s-3) 0 0;
  max-width: 46ch;
  font-size: var(--t-copy);
  line-height: var(--lh-body);
  color: var(--muted);
}

.fd-quiet {
  margin: 0;
  font-size: var(--t-small);
  color: var(--muted);
}

.fd-text-link {
  display: inline-flex;
  gap: 6px;
  margin-top: var(--s-3);
  color: var(--accent);
  font-weight: 500;
  text-decoration: none;
}

.fd-text-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* A short checklist, ticked in ember. */
.fd-facts {
  display: grid;
  gap: var(--s-2);
  margin: var(--s-4) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--t-small);
  line-height: 1.45;
  color: var(--muted);
}

.fd-facts li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.fd-facts .fd-icon {
  width: 16px;
  height: 16px;
  margin-top: 1px;
  color: var(--ember);
}

/* An intro column beside the working part of a block, once it is wide enough. */
.fd-split {
  display: grid;
  gap: var(--s-5);
}

/* Room for two columns of words: the promises move beside the headline. */
@container (min-width: 600px) {
  .fd-split-intro:has(> .fd-facts) {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    grid-template-areas:
      "kicker kicker"
      "title facts"
      "intro facts";
    align-items: start;
    column-gap: var(--s-6);
  }

  .fd-split-intro > .fd-kicker {
    grid-area: kicker;
  }

  .fd-split-intro > .fd-title {
    grid-area: title;
  }

  .fd-split-intro > .fd-intro {
    grid-area: intro;
  }

  .fd-split-intro > .fd-facts {
    grid-area: facts;
    align-self: center;
    margin: 0;
    padding: var(--s-4) var(--s-5);
    border-radius: var(--fd-inner);
    background: var(--fd-well);
  }
}

/* Room for the form beside its intro. */
@container (min-width: 900px) {
  .fd-split {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    align-items: start;
    gap: var(--s-7);
  }

  .fd-split-intro:has(> .fd-facts) {
    display: block;
  }

  .fd-split-intro > .fd-facts {
    margin-top: var(--s-5);
  }
}

.fd-split-intro .fd-kicker {
  margin-bottom: var(--s-3);
}

/* The working half answers to its own width, so a form beside the intro
   stacks its fields. */
.fd-split-body {
  min-width: 0;
  container-type: inline-size;
}

/* ---- Links ------------------------------------------------------------------- */
/* Rows at least 64px tall. Wide blocks lay them out side by side, as many as fit. */
.fd-link-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@container (min-width: 520px) {
  .fd-link-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* An odd one out takes the whole row rather than leaving a hole. */
  .fd-link-list > li:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

/* Three across on six tracks: a last row of two splits evenly, and a last row
   of one takes the width. */
@container (min-width: 800px) {
  .fd-link-list {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .fd-link-list > li,
  .fd-link-list > li:last-child:nth-child(odd) {
    grid-column: span 2;
  }

  .fd-link-list > li:last-child:nth-child(3n + 1) {
    grid-column: 1 / -1;
  }

  .fd-link-list > li:nth-last-child(2):nth-child(3n + 1),
  .fd-link-list > li:last-child:nth-child(3n + 2) {
    grid-column: span 3;
  }
}

.fd-link {
  position: relative;
  display: grid;
  align-content: start;
  min-width: 0;
  border: 1px solid var(--line-soft);
  border-radius: var(--fd-inner);
  background: var(--fd-well);
  container: fd-row / inline-size;
  transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}

.fd-link:hover {
  border-color: var(--line);
  background: var(--fd-well-hover);
  transform: translateY(-1px);
}

.fd-link-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 64px;
  padding: 10px 16px 10px 10px;
  border-radius: inherit;
  color: inherit;
  text-decoration: none;
}

.fd-link-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--soft);
  color: var(--ink);
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.fd-link-icon .fd-icon {
  width: 20px;
  height: 20px;
}

.fd-link:hover .fd-link-icon {
  background: var(--accent-soft);
  color: var(--accent);
}

.fd-link-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.fd-link-label {
  font-size: var(--t-body);
  font-weight: 500;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.fd-link-note {
  font-size: var(--t-caption);
  line-height: 1.4;
  color: var(--muted);
}

.fd-link-arrow {
  color: var(--muted);
  transition: transform var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.fd-link-row:hover .fd-link-arrow {
  color: var(--accent);
  transform: translate(2px, -2px);
}

.fd-link > .fd-chip {
  justify-self: start;
  margin: -6px 12px 12px 68px;
}

/* A narrow row keeps its words: a smaller tile, and a short link as go/slug. */
@container fd-row (max-width: 300px) {
  .fd-link-row {
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: 12px;
    padding-right: 14px;
  }

  .fd-link-icon {
    width: 40px;
    height: 40px;
    border-radius: 11px;
  }

  .fd-link > .fd-chip {
    margin-left: 62px;
  }

  .fd-short-host {
    display: none;
  }

  .fd-short::before {
    content: "go/";
    color: var(--muted);
  }
}

/* Two narrow columns: every chip in the list takes the short form, including
   a last row that spans both. */
@container fd-block (min-width: 520px) and (max-width: 619px) {
  .fd-link-list .fd-short-host {
    display: none;
  }

  .fd-link-list .fd-short::before {
    content: "go/";
    color: var(--muted);
  }
}

.fd-link-row:focus-visible,
.fd-project:focus-visible,
.fd-featured-link:focus-visible,
.fd-chip:focus-visible,
.fd-button:focus-visible,
.fd-site-cta:focus-visible,
.fd-day:focus-visible,
.fd-time-slot:focus-visible,
.fd-bar-link:focus-visible,
.fd-activity-row:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* Chips: short links, copy buttons, and the ticket's actions. */
.fd-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: transparent;
  color: inherit;
  font: 500 var(--t-caption)/1 var(--font-body);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.fd-chip:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.fd-chip-state {
  font-family: var(--font-body);
  color: var(--accent);
}

/* A short link reads as a quiet tag until it is wanted. */
.fd-short {
  gap: 0;
  min-height: 28px;
  padding: 0 10px;
  border-color: transparent;
  background: var(--soft);
  font: 500 12px/1 var(--font-mono);
}

.fd-short:hover {
  border-color: transparent;
  background: var(--accent-soft);
  color: var(--accent);
}

.fd-short-host {
  color: var(--muted);
}

.fd-short .fd-chip-state {
  margin-left: 10px;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.fd-short:hover .fd-chip-state {
  color: var(--accent);
}

.fd-chip.is-copied {
  border-color: var(--ember);
}

.fd-short.is-copied {
  border-color: transparent;
  background: color-mix(in srgb, var(--ember) 16%, transparent);
}

.fd-chip.is-copied .fd-chip-state {
  color: var(--ember);
}

/* The round arrow that ends a card's call to action. */
.fd-go {
  display: grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--fd-go);
  color: var(--accent);
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}

.fd-go-icon {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- Status ------------------------------------------------------------------- */
.fd-status {
  --dot: var(--accent);
}

.fd-status[data-kind="available"] {
  --dot: var(--ember);
}

.fd-status[data-kind="heads-down"] {
  --dot: var(--accent);
}

.fd-status[data-kind="travel"] {
  --dot: var(--violet);
}

.fd-status .fd-kicker {
  margin-bottom: 10px;
  color: var(--ink);
}

.fd-status-text {
  margin: 0;
  font: 500 20px/1.35 var(--font-display);
  letter-spacing: -0.015em;
  text-wrap: pretty;
}

.fd-status-text a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 4px;
}

.fd-status-text a:hover {
  text-decoration-color: var(--accent);
}

.fd-status-until {
  margin: var(--s-2) 0 0;
  font-size: var(--t-caption);
  color: var(--muted);
}

/* Start here: an audience's pinned links, tinted. */
.fd-start {
  border-color: color-mix(in srgb, var(--accent) 26%, var(--line-soft));
  background: color-mix(in srgb, var(--accent) 9%, var(--paper));
}

.fd-start .fd-kicker {
  color: var(--accent);
}

/* ---- Featured work ----------------------------------------------------------- */
.fd-featured {
  padding: 0;
  overflow: hidden;
  transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}

.fd-featured:hover {
  border-color: var(--line);
  box-shadow: var(--fd-lift);
  transform: translateY(-2px);
}

.fd-featured-link {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100%;
  border-radius: inherit;
  color: inherit;
  text-decoration: none;
}

.fd-featured-cover {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  background: var(--soft);
}

@container (min-width: 380px) {
  .fd-featured-cover {
    aspect-ratio: 16 / 10;
  }
}

@container (min-width: 640px) {
  .fd-featured-cover {
    aspect-ratio: 21 / 9;
  }
}

.fd-featured-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.fd-featured-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, #ffffff2e 1px, transparent 1.5px);
  background-size: 18px 18px;
  -webkit-mask-image: linear-gradient(160deg, #000, transparent 70%);
  mask-image: linear-gradient(160deg, #000, transparent 70%);
}

.fd-featured-cover img {
  position: relative;
  z-index: 1;
  width: auto;
  max-width: 42%;
  height: auto;
  max-height: 56%;
  object-fit: contain;
  filter: drop-shadow(0 14px 26px #0000004d);
  transition: transform var(--t-slow) var(--ease);
}

.fd-featured-cover img.fd-featured-wordmark {
  max-width: 58%;
  max-height: 30%;
  filter: brightness(0) invert(1) drop-shadow(0 10px 24px #00000059);
}

/* A project without artwork shows its initial in the serif. */
.fd-featured-mark {
  position: relative;
  z-index: 1;
  font: italic 400 clamp(64px, 16cqi, 112px)/1 var(--font-serif);
  color: #ffffffeb;
  text-shadow: 0 14px 30px #00000059;
  transition: transform var(--t-slow) var(--ease);
}

.fd-featured-link:hover .fd-featured-cover img,
.fd-featured-link:hover .fd-featured-mark {
  transform: scale(1.05) rotate(-2deg);
}

/* The category rides on the cover as a frosted tag. */
.fd-featured-meta {
  position: absolute;
  z-index: 2;
  top: 14px;
  left: 14px;
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  background: #1a171e66;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
  font: 500 10.5px/1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.fd-featured-body {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: 18px var(--fd-pad) var(--fd-pad);
}

.fd-featured-title {
  font: 500 clamp(22px, 6.4cqi, 30px)/1.1 var(--font-display);
  letter-spacing: -0.025em;
}

.fd-featured-line {
  font-size: var(--t-copy);
  line-height: 1.55;
  color: var(--muted);
}

.fd-featured-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-top: auto;
  padding-top: var(--s-4);
  color: var(--accent);
  font-weight: 500;
}

.fd-featured-link:hover .fd-go {
  background: var(--accent);
  color: var(--accent-ink);
  transform: translateX(2px);
}

/* ---- Projects: one category as compact rows ----------------------------------- */
.fd-project-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@container (min-width: 540px) {
  .fd-project-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fd-project-list > li:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

.fd-project {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  height: 100%;
  min-height: 72px;
  padding: 10px 16px 10px 10px;
  border: 1px solid var(--line-soft);
  border-radius: var(--fd-inner);
  background: var(--fd-well);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}

.fd-project:hover {
  border-color: var(--line);
  background: var(--fd-well-hover);
  transform: translateY(-1px);
}

.fd-project:hover .fd-link-arrow {
  color: var(--accent);
  transform: translateX(2px);
}

.fd-project-tile {
  position: relative;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  overflow: hidden;
  border-radius: 12px;
}

.fd-project-tile svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.fd-project-mark {
  position: relative;
  font: italic 400 28px/1 var(--font-serif);
  color: #fff;
}

.fd-project-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.fd-project-title {
  font-weight: 500;
}

.fd-project-line {
  display: -webkit-box;
  overflow: hidden;
  font-size: var(--t-caption);
  line-height: 1.45;
  color: var(--muted);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* ---- Share: a ticket ---------------------------------------------------------- */
/* Narrow (the rail, a phone), the stub sits above a perforation with the code
   and actions below; from 440px the code, perforation, and stub sit in a row. */
.fd-share {
  padding: 0;
  border: 0;
  background: none;
}

.fd-ticket {
  --pad: 18px;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  grid-template-areas:
    "head head"
    "perf perf"
    "qr actions";
  align-items: center;
  column-gap: var(--s-4);
  padding: var(--pad);
  border-radius: var(--fd-radius);
  background: var(--dark-band);
  color: var(--dark-band-ink);
  --focus-ring: var(--dark-band-accent);
}

.fd-ticket-plain {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "head"
    "perf"
    "actions";
}

.fd-ticket-head {
  grid-area: head;
  min-width: 0;
}

.fd-ticket-perf {
  grid-area: perf;
  position: relative;
  height: 20px;
  margin: var(--s-3) calc(-1 * var(--pad));
}

.fd-ticket-perf::before {
  content: "";
  position: absolute;
  top: 9px;
  right: var(--s-4);
  left: var(--s-4);
  border-top: 2px dashed var(--dark-band-line);
}

.fd-ticket-perf::after {
  content: "";
  position: absolute;
  inset: 0 -1px;
  background:
    radial-gradient(circle at 0 50%, var(--bg) 9.5px, #0000 10px) left / 20px 20px no-repeat,
    radial-gradient(circle at 100% 50%, var(--bg) 9.5px, #0000 10px) right / 20px 20px no-repeat;
}

.fd-ticket-qr {
  grid-area: qr;
  padding: 6px;
  border-radius: 12px;
  background: #fff;
  color: #1f1d24;
}

.fd-ticket-qr svg {
  display: block;
  width: 100%;
  height: auto;
}

.fd-ticket .fd-kicker {
  margin-bottom: var(--s-1);
  color: var(--dark-band-muted);
}

.fd-ticket .fd-kicker .fd-glyph {
  color: var(--dark-band-accent);
}

.fd-ticket-url {
  margin: 0;
  font: 500 14px/1.35 var(--font-mono);
  overflow-wrap: anywhere;
}

.fd-ticket-actions {
  grid-area: actions;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.fd-ticket-plain .fd-ticket-actions {
  flex-direction: row;
  flex-wrap: wrap;
}

@container (min-width: 440px) {
  .fd-ticket:not(.fd-ticket-plain) {
    grid-template-columns: clamp(104px, 20cqi, 132px) 20px minmax(0, 1fr);
    grid-template-areas:
      "qr perf head"
      "qr perf actions";
    align-content: center;
    row-gap: var(--s-3);
  }

  .fd-ticket:not(.fd-ticket-plain) .fd-ticket-head {
    align-self: end;
  }

  .fd-ticket-url {
    font-size: 16px;
  }

  .fd-ticket:not(.fd-ticket-plain) .fd-ticket-actions {
    flex-direction: row;
    flex-wrap: wrap;
    align-self: start;
  }

  .fd-ticket:not(.fd-ticket-plain) .fd-ticket-perf {
    align-self: stretch;
    height: auto;
    margin: calc(-1 * var(--pad)) 0;
  }

  .fd-ticket:not(.fd-ticket-plain) .fd-ticket-perf::before {
    top: var(--s-4);
    right: auto;
    bottom: var(--s-4);
    left: 9px;
    border-top: 0;
    border-left: 2px dashed var(--dark-band-line);
  }

  .fd-ticket:not(.fd-ticket-plain) .fd-ticket-perf::after {
    inset: -1px 0;
    background:
      radial-gradient(circle at 50% 0, var(--bg) 9.5px, #0000 10px) top / 20px 20px no-repeat,
      radial-gradient(circle at 50% 100%, var(--bg) 9.5px, #0000 10px) bottom / 20px 20px no-repeat;
  }
}

.fd-ticket .fd-chip {
  border-color: var(--dark-band-line);
  color: var(--dark-band-ink);
}

.fd-ticket .fd-chip .fd-chip-state {
  color: inherit;
}

.fd-ticket .fd-chip:hover {
  border-color: var(--dark-band-accent);
  color: var(--dark-band-accent);
}

/* Show my card is the ticket's lead action, outlined in the accent; the rail
   keeps its one filled button for the full site. */
.fd-ticket .fd-chip-strong {
  border-color: color-mix(in srgb, var(--dark-band-accent) 70%, transparent);
  color: var(--dark-band-accent);
}

.fd-ticket .fd-chip-strong:hover {
  background: color-mix(in srgb, var(--dark-band-accent) 14%, transparent);
}

:root[data-theme="dark"] .fd-ticket {
  box-shadow: inset 0 0 0 1px var(--dark-band-line);
}

/* ---- Calls to action: Ask your AI and the full site ---------------------------- */
/* The copy stacks over its button; once the card is wide, the button moves
   beside the copy. */
.fd-cta-card {
  display: grid;
  gap: var(--s-4);
}

.fd-cta-copy {
  display: grid;
  gap: var(--s-3);
  min-width: 0;
}

.fd-cta-copy .fd-kicker {
  margin: 0;
}

@container (min-width: 560px) {
  .fd-cta-card {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: var(--s-7);
  }

  .fd-cta-card .fd-ask-cta,
  .fd-cta-card .fd-site-cta {
    width: auto;
    min-width: 264px;
  }

  .fd-cta-copy .fd-ask-title,
  .fd-cta-copy .fd-site-title {
    font-size: 27px;
  }
}

/* Ask your AI: the header's ring button as a card, tinted. */
.fd-ask {
  border-color: color-mix(in srgb, var(--accent) 24%, var(--line-soft));
  background: color-mix(in srgb, var(--accent) 8%, var(--paper));
}

.fd-ask .fd-kicker {
  color: var(--accent);
}

.fd-ask .fd-kicker .fd-glyph {
  color: var(--ember);
}

.fd-ask-title,
.fd-site-title {
  margin: 0;
  font: 500 22px/1.2 var(--font-display);
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.fd-ask-title em,
.fd-site-title em {
  font-family: var(--font-serif);
  font-weight: 400;
  color: var(--accent);
  letter-spacing: var(--track-serif);
}

.fd-ask-line,
.fd-site-line {
  margin: 0;
  font-size: var(--t-small);
  line-height: var(--lh-body);
  color: var(--muted);
}

.fd-ask-cta {
  width: 100%;
  height: 50px;
  min-height: 50px;
  font-size: var(--t-copy);
}

/* The full site: the rail's closing call to action, last on a phone. */
.fd-site {
  --order: 99;
}

.fd-site-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  min-height: 54px;
  padding: 0 8px 0 22px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--accent-ink);
  font: 500 var(--t-body)/1 var(--font-body);
  white-space: nowrap;
  text-decoration: none;
  transition: background-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}

.fd-site-cta .fd-go-icon {
  width: 38px;
  height: 38px;
  padding: 10px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent-ink) 16%, transparent);
  transition: transform var(--t-fast) var(--ease);
}

.fd-site-cta:hover {
  background: var(--accent-hover);
  color: var(--accent-ink);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.fd-site-cta:hover .fd-go-icon {
  transform: translateX(3px);
}

/* ---- Notes and activity ------------------------------------------------------- */
.fd-prose p {
  margin: 0 0 var(--s-3);
  font-size: var(--t-copy);
  line-height: var(--lh-body);
}

.fd-prose p:last-child {
  margin-bottom: 0;
}

.fd-activity {
  background: transparent;
}

.fd-activity .fd-kicker {
  margin-bottom: var(--s-2);
}

.fd-activity-list {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fd-activity-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px var(--s-4);
  min-height: 48px;
  margin: 0 -12px;
  padding: 8px 12px;
  border-radius: 12px;
  color: inherit;
  text-decoration: none;
  transition: background-color var(--t-fast) var(--ease);
}

a.fd-activity-row:hover {
  background: var(--soft);
}

a.fd-activity-row:hover .fd-activity-label {
  color: var(--accent);
}

.fd-activity-main {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  min-width: 0;
}

.fd-activity-label {
  font-size: var(--t-small);
  font-weight: 500;
  overflow-wrap: break-word;
}

.fd-activity-detail {
  font: 12px/1.4 var(--font-mono);
  color: var(--muted);
}

.fd-activity-row time {
  font-size: var(--t-caption);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--muted);
}

.fd-divider {
  min-height: 0;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--line-soft);
  border-radius: 0;
  background: none;
}

/* ---- Forms: contact, booking, passphrase --------------------------------------- */
.fd-form {
  display: grid;
  gap: 14px;
}

@container (min-width: 500px) {
  .fd-contact .fd-form,
  .fd-book-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fd-topics,
  .fd-field-wide,
  .fd-form-foot {
    grid-column: 1 / -1;
  }
}

.fd-topics {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  min-width: 0;
  margin: 0 0 var(--s-1);
  padding: 0;
  border: 0;
}

.fd-topic {
  position: relative;
}

.fd-topic input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.fd-topic span {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--fd-well);
  font-size: var(--t-small);
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

.fd-topic:hover span {
  border-color: var(--line-strong);
}

.fd-topic input:checked + span {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  background: var(--accent-soft);
  color: var(--accent);
}

.fd-topic input:focus-visible + span {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.fd-field {
  display: grid;
  gap: 6px;
  min-width: 0;
  font-size: var(--t-caption);
  font-weight: 500;
  color: var(--muted);
}

.fd-field small {
  font-weight: 400;
}

.fd-field input,
.fd-field textarea {
  width: 100%;
  min-height: 50px;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--fd-well);
  color: var(--ink);
  font: 400 16px/1.4 var(--font-body);
  resize: vertical;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}

.fd-field textarea {
  min-height: 132px;
}

.fd-field input:hover,
.fd-field textarea:hover {
  border-color: var(--line-strong);
}

.fd-field input:focus,
.fd-field textarea:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}

.fd-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.fd-form-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-4);
}

/* The primary action: a filled pill in the accent. */
.fd-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 26px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--accent-ink);
  font: 500 15px/1 var(--font-body);
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}

.fd-button:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.fd-button:active {
  transform: translateY(0);
  box-shadow: none;
}

.fd-button:disabled,
.fd-button:disabled:hover {
  opacity: 0.6;
  transform: none;
  box-shadow: none;
  cursor: progress;
}

@container (max-width: 499px) {
  .fd-form-foot .fd-button {
    width: 100%;
  }
}

.fd-form-status {
  margin: 0;
  font-size: var(--t-small);
  color: var(--muted);
}

.fd-form-status:empty {
  display: none;
}

.fd-form-status[data-kind="error"] {
  color: var(--danger);
}

.fd-form-status[data-kind="done"] {
  color: var(--ember);
}

.fd-form-status a {
  color: var(--accent);
}

/* ---- Booking: days in a scrolling strip, times as a grid, then the form -------- */
.fd-days {
  display: flex;
  gap: var(--s-2);
  margin: 0 calc(-1 * var(--s-1)) var(--s-3);
  padding: var(--s-1);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.fd-days::-webkit-scrollbar {
  display: none;
}

.fd-day {
  display: grid;
  flex: none;
  place-items: center;
  gap: 2px;
  min-width: 68px;
  min-height: 58px;
  padding: var(--s-2);
  border: 1px solid var(--line);
  border-radius: var(--fd-inner);
  background: var(--fd-well);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  scroll-snap-align: start;
  transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}

.fd-day:hover {
  border-color: var(--line-strong);
}

.fd-day span {
  font-size: 12px;
  color: var(--muted);
}

.fd-day b {
  font-size: var(--t-small);
  font-weight: 500;
}

.fd-day[aria-selected="true"] {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
}

.fd-day[aria-selected="true"] span {
  color: inherit;
  opacity: 0.8;
}

.fd-times {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: var(--s-2);
}

.fd-time-slot {
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--fd-well);
  color: var(--ink);
  font: 500 var(--t-small)/1 var(--font-body);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.fd-time-slot:hover {
  border-color: var(--accent);
}

.fd-time-slot[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}

.fd-booking-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.fd-times,
.fd-book-form:not([hidden]) {
  margin-bottom: var(--s-5);
}

.fd-booking-notice {
  margin: 0 0 var(--s-4);
}

.fd-booking-body .fd-facts {
  margin: 0;
  padding: 0 0 var(--s-4);
}

.fd-zone {
  margin-top: auto;
  padding-top: var(--s-3);
  border-top: 1px solid var(--line-soft);
}

.fd-facts + .fd-zone {
  margin-top: 0;
}

.fd-booked {
  padding: var(--s-4);
  border-radius: var(--fd-inner);
  background: color-mix(in srgb, var(--ember) 12%, var(--bg));
}

.fd-booked p {
  margin: 0 0 var(--s-2);
}

.fd-booked-title {
  font: 500 var(--t-h4)/1.3 var(--font-display);
}

/* ---- Rooms ----------------------------------------------------------------------- */
.fd-room-note {
  border-color: color-mix(in srgb, var(--accent) 24%, var(--line-soft));
  background: var(--bg);
  box-shadow: var(--fd-lift);
}

.fd-room-note .fd-prose p {
  font-size: var(--t-lead);
  line-height: 1.55;
}

.fd-room-note .fd-quiet {
  margin-top: var(--s-4);
}

/* A room that is loading, locked, or gone: one centred card with a seal. */
.fd-body:has(> .fd-main > .fd-room-state) {
  padding-block: clamp(32px, 9vh, 112px) clamp(8px, 4vh, 48px);
}

.fd-room-state {
  display: grid;
  justify-items: center;
  width: 100%;
  max-width: 600px;
  margin-inline: auto;
  padding: clamp(32px, 6vw, 56px) clamp(22px, 5vw, 48px);
  text-align: center;
  box-shadow: var(--fd-lift);
}

.fd-room-seal {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: var(--s-5);
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
}

/* The lock is drawn here rather than in the markup: the room shell ships no
   SVG at all, which is how the build proves it carries no share code. */
.fd-room-seal::before {
  content: "";
  width: 28px;
  height: 28px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='10.5' width='14' height='10' rx='2.5'/%3E%3Cpath d='M8.5 10.5V8a3.5 3.5 0 0 1 7 0v2.5M12 14.5v2'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='10.5' width='14' height='10' rx='2.5'/%3E%3Cpath d='M8.5 10.5V8a3.5 3.5 0 0 1 7 0v2.5M12 14.5v2'/%3E%3C/svg%3E") center / contain no-repeat;
}

.fd-room-state .fd-kicker {
  justify-content: center;
  margin-bottom: var(--s-3);
  color: var(--accent);
}

.fd-room-title {
  margin: 0 0 var(--s-3);
  font: 500 clamp(30px, 5vw, 44px)/1.06 var(--font-display);
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.fd-room-state p {
  max-width: 44ch;
  margin: 0 auto var(--s-5);
  font-size: var(--t-copy);
  line-height: var(--lh-body);
  color: var(--muted);
  text-wrap: pretty;
}

.fd-room-state p:last-child {
  margin-bottom: 0;
}

.fd-room-state a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent);
  text-underline-offset: 3px;
}

.fd-room-state a:hover {
  text-decoration-color: currentColor;
}

.fd-passphrase {
  width: 100%;
  max-width: 380px;
  text-align: left;
}

.fd-passphrase .fd-form-foot .fd-button {
  width: 100%;
}

/* ---- Motion ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .fd:not(.is-settled) .fd-hero,
  .fd:not(.is-settled) .fd-block {
    animation: fd-rise 560ms var(--ease) both;
    animation-delay: calc(min(var(--order, 0), 12) * 40ms);
  }

  .fd.is-settled .fd-swap {
    animation: fd-fade 320ms var(--ease) both;
  }

  /* A live status breathes, and so does a room's seal while it opens. */
  .fd-status[data-kind="now"] .fd-dot,
  .fd-status[data-kind="available"] .fd-dot,
  .fd-pill[data-state="available"] .fd-dot {
    animation: fd-breathe 2.8s var(--ease) infinite;
  }

  .fd-room-state[data-state="loading"] .fd-room-seal::before {
    animation: fd-seal 1.6s var(--ease) infinite;
  }

  @keyframes fd-seal {
    50% {
      opacity: 0.35;
    }
  }

  /* Opacity only: an animated transform suspends scroll anchoring, so a block
     arriving from the live data would shove the page under a reader. */
  @keyframes fd-rise {
    from {
      opacity: 0;
    }
  }

  @keyframes fd-fade {
    from {
      opacity: 0;
    }
  }

  @keyframes fd-breathe {
    50% {
      box-shadow: 0 0 0 5px color-mix(in srgb, var(--dot, var(--accent)) 12%, transparent);
    }
  }
}

html.iris-motion-off .fd-dot,
html.iris-motion-off .fd-room-seal::before {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .fd-link,
  .fd-project,
  .fd-featured,
  .fd-featured-cover img,
  .fd-featured-mark,
  .fd-link-arrow,
  .fd-go,
  .fd-site-cta,
  .fd-site-cta .fd-go-icon,
  .fd-button {
    transition: none;
  }
}

/* ---- Print: a contact card --------------------------------------------------------- */
@media print {
  .fd-bar,
  .fd-site,
  .fd-ask,
  .fd-contact,
  .fd-booking,
  .fd-activity,
  .fd-chip,
  .iris-footer,
  .skip-link {
    display: none !important;
  }

  .fd-page:not(.fd-card-page)::before {
    display: none;
  }

  .fd-block,
  .fd-ticket {
    break-inside: avoid;
  }

  .fd-ticket {
    background: none;
    color: #000;
    border: 1px solid #ccc;
  }

  .fd-ticket-perf {
    display: none;
  }
}

/* ---- Card mode ----------------------------------------------------------------------- */
.fd-card-page {
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 100svh;
}

.fd-card-page .fd-bar {
  width: 100%;
}

.fd-card {
  position: relative;
  isolation: isolate;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--s-6);
  padding: var(--s-6) var(--fd-gutter) max(var(--s-7), env(safe-area-inset-bottom));
}

.fd-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(46% 40% at 50% 12%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 72%),
    radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--ink) 11%, transparent) 1px, transparent 1.5px) 0 0 / 22px 22px;
  -webkit-mask-image: linear-gradient(#000, transparent 85%);
  mask-image: linear-gradient(#000, transparent 85%);
}

.fd-card-stage {
  display: grid;
  justify-items: center;
  gap: var(--s-4);
}

.fd-card-code {
  width: min(80vw, 52svh, 480px);
  padding: 5%;
  border-radius: 28px;
  background: #fff;
  color: #1f1d24;
  box-shadow: var(--fd-lift);
}

:root[data-theme="dark"] .fd-card-code {
  box-shadow: 0 0 0 1px var(--line), var(--fd-lift);
}

.fd-card-code[hidden] {
  display: none;
}

.fd-card-code svg {
  display: block;
  width: 100%;
  height: auto;
}

/* What the code opens, printed under it like the line on a ticket, so it can
   be typed when a camera will not cooperate. */
.fd-card-code-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 4% 0 -1%;
  padding-top: 4%;
  border-top: 1.5px dashed #d9d4de;
  font: 500 clamp(12px, 3.4vw, 15px)/1.2 var(--font-mono);
  letter-spacing: 0.01em;
  color: #57515e;
}

.fd-card-toggle {
  display: inline-flex;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--paper);
}

.fd-card-toggle button {
  min-width: 104px;
  min-height: 42px;
  padding: 0 var(--s-4);
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--muted);
  font: 500 var(--t-small)/1 var(--font-body);
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.fd-card-toggle button:hover {
  color: var(--ink);
}

.fd-card-toggle button[aria-pressed="true"] {
  background: var(--accent);
  color: var(--accent-ink);
}

.fd-card-toggle button:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.fd-card-facts {
  display: grid;
  justify-items: center;
  gap: var(--s-2);
  order: -1;
  max-width: 34ch;
  text-align: center;
}

.fd-card-portrait {
  display: block;
  width: 64px;
  height: 64px;
  margin-bottom: var(--s-2);
  overflow: hidden;
  border: 3px solid var(--paper);
  border-radius: 50%;
  background: var(--soft);
  box-shadow: 0 0 0 1px var(--line-soft);
}

.fd-card-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 28%;
}

.fd-card-facts .fd-name {
  font-size: clamp(36px, 10vw, 72px);
}

.fd-card-facts .fd-role {
  margin: 0;
  font-size: var(--t-copy);
}

.fd-card-caption {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin: var(--s-2) 0 0;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: var(--soft);
  font-size: var(--t-small);
  color: var(--ink);
}

@media (min-width: 900px) and (min-aspect-ratio: 5 / 4) {
  .fd-card {
    grid-template-columns: minmax(0, 460px) auto;
    align-items: center;
    justify-content: center;
    column-gap: clamp(48px, 7vw, 112px);
  }

  .fd-card-code {
    width: min(62svh, 480px);
  }

  .fd-card-facts {
    justify-items: start;
    max-width: none;
    text-align: left;
  }

  .fd-card-portrait {
    width: 76px;
    height: 76px;
  }

  .fd-card-facts .fd-name {
    font-size: clamp(48px, 4.4vw, 68px);
    white-space: nowrap;
  }

  .fd-card-facts .fd-role {
    font-size: var(--t-lead);
  }

  .fd-card-caption {
    margin-top: var(--s-4);
  }
}