/*
  eventride.uk — one stylesheet for every page, from the rebuild of
  11 September 2026 on Tom's instruction (SPEC.md 16, the last amendment of
  that night). The brand guidelines, version 1.1, are the reference: ivory
  ground, ink and muted ink type, champagne for rules and detail only, walnut
  for the one action, light-champagne hairlines, 7px corners on every box and
  button (the frame included), Playfair Display for headlines and EB Garamond
  for everything else, both served from fonts/ and never from Google.
*/
:root {
  --ivory: #F6F1E7;
  --ink: #262421;
  --muted: #5C564E;
  --champagne: #BEA270;
  --hairline: #D3C29C;
  --walnut: #6B4F3A;
  --walnut-press: #58402F;
  --radius: 7px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  background: var(--ivory);
  color: var(--ink);
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 19px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; height: auto; }

.shell { margin: 14px; border: 1px solid var(--hairline); border-radius: var(--radius); min-height: calc(100vh - 28px); }
.page { max-width: 1140px; margin: 0 auto; padding: 0 40px; }
.measure { max-width: 34em; margin-left: auto; margin-right: auto; }
.caps { text-transform: uppercase; letter-spacing: 0.22em; font-size: 13px; }
.serif { font-family: 'Playfair Display', Georgia, serif; font-weight: 500; }
.quiet { color: var(--muted); }
.centre { text-align: center; }

/* ---------- Header ---------- */
header.site { text-align: center; padding: 48px 0 0; }
.wordmark { font-family: 'Playfair Display', Georgia, serif; font-size: 27px; font-weight: 500; color: var(--ink); text-decoration: none; }
.strap { margin-top: 10px; color: var(--muted); }
nav.site { margin-top: 22px; display: flex; justify-content: center; gap: 26px; flex-wrap: wrap; }
nav.site a { color: var(--muted); text-decoration: none; padding-bottom: 3px; border-bottom: 1px solid transparent; }
nav.site a:hover, nav.site a:focus-visible { color: var(--ink); }
nav.site a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--champagne); }
a:focus-visible { outline: 2px solid var(--walnut); outline-offset: 3px; border-radius: 2px; }

/* ---------- The search (13 September 2026, on Tom's instruction) ---------- */
/*
  THE PLATFORM'S OWN CONTROL, CARRIED ACROSS RATHER THAN REDESIGNED. Every
  value below is read out of app/search/search.module.css — his rulings of
  28 August 2026 — and written in this site's own tokens. The site already
  carries this grammar once, in the back to top arrow of round five: the same
  hairline champagne stroke, the same 22px mark, the same 44px tap area made of
  padding, the same ink on hover and focus, the same focus ring. Nothing new is
  invented here, and the count of drawn marks on this site stays at two.

  IT NEEDS SCRIPT AND SAYS SO: with scripts off the glass never appears, which
  is the standing the back to top arrow was given on his ruling three of
  28 August 2026. Hence html.js.
*/
.search { display: none; }
html.js .search {
  /* The top right corner of the SCREEN, fixed — his placement, and the
     platform's own reason at 12.4: on a long page a search that scrolls away
     has left at the moment it is wanted. The inset is the back to top arrow's
     own, in the opposite corner, so the site's two marks sit level. */
  position: fixed;
  top: calc(20px + env(safe-area-inset-top, 0px));
  right: calc(20px + env(safe-area-inset-right, 0px));
  z-index: 30;
  transition: top 0.35s ease;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
/*
  IT SETTLES INTO THE MIDDLE OF THE SLIM BAR AS THE BAR ARRIVES (13 September
  2026, his ruling at his walk: "move it up slightly so it's in the middle of
  that ribbon"). THE NUMBER IS MEASURED, NOT NUDGED: the bar is 56 to 57px tall,
  so its centre is 28, and a 44px tap area centred there starts at 6. At the top
  of a page, where there is no bar, the glass is where it was — it moves with the
  bar and on the bar's own timing, which is the one moment the change is
  invisible. A SESSION'S READING OF HIS RULING, his to fix at one height.
*/
/* html.js.scrolled, not html.scrolled: the phone's own inset below is written
   as html.js .search and would otherwise win on specificity — which it did,
   and the measurement caught it. */
html.js.scrolled .search { top: calc(6px + env(safe-area-inset-top, 0px)); }
@media (prefers-reduced-motion: reduce) { html.js .search { transition: none; } }

.search-bar { display: flex; align-items: center; justify-content: flex-end; }
/*
  WHILE THE FIELD IS OPEN, THE SLIM BAR'S BUTTON STEPS ASIDE. The field opens
  leftwards into the corner the button sits in, and a champagne hairline running
  under a walnut button is the one thing this control must never look like. It
  is the platform's own move: there, the centred mark steps aside for the field
  on a phone. The button comes straight back when the search closes.
*/
html.searching .topbar nav,
html.searching .topbar .btn { visibility: hidden; }
/* The tap area is the button; the mark is drawn inside it, so the target is
   large without the mark growing. No border, no fill, no radius, no shadow. */
.search-glass {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 11px;
  background: none; border: 0; border-radius: 0; cursor: pointer;
  -webkit-tap-highlight-color: transparent; text-decoration: none;
  /* The slide is the layout rather than a second animation: the row is
     right-aligned, so the glass is pushed left by exactly the width the field
     opens to. One thing moves and the pair reads as one control. */
  flex: 0 0 auto;
}
.search-glass svg { display: block; width: 22px; height: 22px; fill: none; stroke: var(--champagne); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.search-glass:hover svg, .search-glass:focus-visible svg { stroke: var(--ink); }
.search-glass:focus-visible, .search-field:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* The field and the champagne hairline that draws it open, left to right. */
.search-opening { position: relative; width: 0; overflow: hidden; transition: width 240ms cubic-bezier(0.33, 0, 0.2, 1); }
.search[data-open="true"] .search-opening { width: 240px; }
.search-field {
  width: 100%; height: 44px; padding: 0 4px;
  border: 0; border-radius: 0; background: none;
  font-family: inherit; font-size: 19px; color: var(--ink);
}
/* Muted ink, never a hairline colour: a placeholder is guidance a person is
   meant to read (12.1's placeholder amendment of 25 July 2026). */
.search-field::placeholder { color: var(--muted); opacity: 1; }
/* Drawn as a scale from its left end, so the browser animates it on the
   compositor and the line never reflows anything above it. */
.search-line { position: absolute; right: 0; bottom: 0; left: 0; height: 1px; background: var(--champagne); transform: scaleX(0); transform-origin: left center; transition: transform 240ms cubic-bezier(0.33, 0, 0.2, 1); }
.search[data-open="true"] .search-line { transform: scaleX(1); }
/* The answers. Grouped under champagne letter-spaced caps headings (his ruling
   six), rows in the fourth garment: a hairline card whose whole frame is the
   door, with nothing inside it dressed a second time (his ruling seven). */
.search-results {
  width: min(352px, calc(100vw - 40px));
  margin-top: 8px;
  max-height: min(60vh, 32rem);
  overflow-y: auto;
  background: var(--ivory);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 16px;
}
.search-group + .search-group { margin-top: 16px; }
.search-group > p.caps { margin-bottom: 8px; color: var(--champagne); }
.search-rows { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.search-row {
  display: flex; flex-direction: column; gap: 2px;
  padding: 12px 14px;
  border: 1px solid var(--hairline); border-radius: var(--radius);
  color: var(--ink); text-decoration: none;
}
.search-row:hover, .search-row:focus-visible { border-color: var(--champagne); }
.search-row:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.search-name { font-size: 18px; line-height: 1.3; }
.search-reason { font-size: 15px; color: var(--muted); line-height: 1.35; }
.search-nothing { margin: 0; font-size: 16px; color: var(--muted); }
/* A phone has less room, so the field takes what there is rather than pushing
   off the edge, and the inset matches the back to top arrow's phone inset. */
@media (max-width: 899px) {
  html.js .search { right: calc(14px + env(safe-area-inset-right, 0px)); top: calc(14px + env(safe-area-inset-top, 0px)); }
  .search[data-open="true"] .search-opening { width: 176px; }
  .search-results { width: min(352px, calc(100vw - 28px)); }
  /* And the page's own wordmark steps aside while the field is open, because on
     a phone the answers open straight over it and its top half showing above
     the panel's edge reads as a line struck through the brand. It is the
     platform's own move: there, the centred mark steps aside for the field on a
     phone. Hidden rather than removed, so nothing on the page shifts. */
  html.searching header.site .wordmark { visibility: hidden; }
}
/* Reduced motion means none, not a shortened version. */
@media (prefers-reduced-motion: reduce) {
  .search-opening, .search-line { transition: none; }
}

/* ---------- "Who is it for?" (13 September 2026, on Tom's ruling) ---------- */
/*
  THE MENU IS THE BROWSER'S OWN DISCLOSURE CONTROL, not a script: it opens on a
  tap and on the keyboard with nothing loaded. site.js adds hover on a laptop,
  and closes it when the reader looks elsewhere. Its word wears the nav's own
  garment and nothing else — no new mark, no caret drawn by us beyond the small
  champagne chevron below, which is the divider's own diamond turned on its side
  at the size of a full stop.
*/
.who { position: relative; }
.who > summary {
  list-style: none; cursor: pointer;
  /* The menu's own words never break across lines: in the slim bar at laptop
     widths "Who is it for?" was folding into three. */
  white-space: nowrap;
  color: var(--muted); padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  display: inline-flex; align-items: center; gap: 7px;
}
.who > summary::-webkit-details-marker { display: none; }
.who > summary::after {
  content: ""; width: 5px; height: 5px;
  border-right: 1px solid var(--champagne); border-bottom: 1px solid var(--champagne);
  transform: rotate(45deg) translate(-1px, -1px);
}
.who[open] > summary::after { transform: rotate(225deg) translate(-1px, -1px); }
.who > summary:hover, .who[open] > summary { color: var(--ink); }
.who[data-here="true"] > summary { color: var(--ink); }
.who > summary:focus-visible { outline: 2px solid var(--walnut); outline-offset: 3px; border-radius: 2px; }
.whoList {
  /*
    IT HANGS FROM THE WORD ITSELF, WITH NO GAP TO CROSS. A 10px gap here broke
    the menu on a laptop: the pointer left the word, entered space that belonged
    to neither, and the menu shut before anything could be chosen. He found it
    on his walk. The air above the first row is the panel's own padding now, and
    a transparent strip sits over what used to be the gap.
  */
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  z-index: 25; display: flex; flex-direction: column; gap: 2px;
  margin-top: 0; padding: 18px 8px 8px; min-width: 190px; text-align: center;
  background: var(--ivory); border: 1px solid var(--hairline); border-radius: var(--radius);
  box-shadow: 0 6px 24px rgba(38, 36, 33, 0.08);
  background-clip: padding-box;
}
.whoList a { display: block; padding: 9px 14px; border-radius: var(--radius); border-bottom: 0; color: var(--muted); text-decoration: none; }
.whoList a:hover, .whoList a:focus-visible { color: var(--ink); }
nav .who .whoList a,
nav .who .whoList a[aria-current="page"] { border-bottom: 0; }
.whoList a[aria-current="page"] { color: var(--ink); }
/* In the slim bar the panel hangs from the bar itself, and its words are the
   bar's own size. */
.topbar .whoList { min-width: 170px; }
.topbar .whoList a { padding: 7px 12px; }

/* ---------- Divider motif ---------- */
.divider { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 40px auto; }
.divider::before, .divider::after { content: ""; width: 52px; height: 1px; background: var(--champagne); }
.divider .diamond { width: 7px; height: 7px; background: var(--champagne); transform: rotate(45deg); }

/* ---------- Type ---------- */
h1, h2, h3 { font-family: 'Playfair Display', Georgia, serif; font-weight: 500; line-height: 1.15; }
h1 { font-size: clamp(34px, 5.4vw, 56px); max-width: 15em; margin: 0 auto; text-wrap: balance; }
h2 { font-size: clamp(27px, 4vw, 38px); margin-bottom: 14px; text-wrap: balance; }
h3 { font-size: 22px; line-height: 1.3; margin-bottom: 8px; }
/* A heading opened from a search result clears the slim bar, which is fixed
   across the top of the screen once the reader has scrolled. */
h1, h2, h3 { scroll-margin-top: 120px; }
p { margin-bottom: 13px; }
p:last-child { margin-bottom: 0; }
.lede { font-size: clamp(20px, 2.3vw, 24px); color: var(--muted); margin: 18px auto 0; line-height: 1.45; text-wrap: balance; }
.label { color: var(--champagne); margin-bottom: 26px; }

/* ---------- Button (walnut: the one action fill) ---------- */
.btn {
  display: inline-block; background: var(--walnut); color: var(--ivory); text-decoration: none;
  padding: 17px 38px; border-radius: var(--radius);
  text-transform: uppercase; letter-spacing: 0.22em; font-size: 14px; line-height: 1;
}
.btn:hover, .btn:focus-visible { background: var(--walnut-press); }
.cta { margin-top: 30px; }
.cta .note { margin-top: 14px; color: var(--muted); font-size: 16px; }

/* ---------- Hero ---------- */
.hero { text-align: center; padding-top: 6px; }

/* ---------- Cards ---------- */
.cards { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 36px; }
.card { border: 1px solid var(--hairline); border-radius: var(--radius); padding: 26px 24px 28px; text-align: center; }
.card.lead { border-color: var(--champagne); }
.card .drawing { width: 84px; margin: 0 auto 16px; color: var(--champagne); }
.card h3 { font-size: 21px; }
.card p { color: var(--muted); font-size: 17px; text-wrap: balance; }
.card p.plain-wrap { text-wrap: wrap; }
.card a.more { display: inline-block; margin-top: 10px; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--hairline); padding-bottom: 2px; font-size: 17px; }
.card a.more:hover { border-bottom-color: var(--champagne); }

/* ---------- Screens (phone screenshots) ---------- */
.screens { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 14px; margin-top: 36px; }
.screens figure { margin: 0; text-align: center; }
.screens img { border: 1px solid var(--hairline); border-radius: 12px; width: 100%; }
/* ---------- Phones drawn as phones (round two) ---------- */
/* A screenshot is what a phone shows, cut at the phone's own edge, so it sits
   inside a drawn outline: an ink hairline, the corner radius of a handset, a
   thin ivory bezel, and a small ink pill where the camera sits. */
.phone { position: relative; border: 1.5px solid var(--ink); border-radius: 36px; padding: 10px; background: var(--ivory); }
.phone::before { content: ""; position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: 22%; height: 8px; background: var(--ink); border-radius: 4px; }
.phone img { border: 0; border-radius: 27px; width: 100%; }
.screens .phone img, .step .shot .phone img { border: 0; border-radius: 27px; }
.screens figure .phone { margin: 0 auto; }

/* The home page's staggered trio, the middle phone lifted. */
.trio { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 22px; align-items: end; max-width: 900px; margin: 52px auto 0; }
.trio figure { margin: 0; }
.trio figure:nth-child(2) { transform: translateY(-34px); }

/* ---------- Gentle motion (round two) ---------- */
/* Sections rise in softly as they come into view. Nothing moves until the
   script marks the page as scripted, so a page without it is simply there,
   and nothing moves at all for anyone who has asked for reduced motion. */
html.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s ease; transition-delay: var(--d, 0s); }
html.js .reveal.in { opacity: 1; transform: none; }
html.js .trio figure:nth-child(2).reveal.in { transform: translateY(-34px); }
@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1; transform: none; transition: none; }
  html.js .trio figure:nth-child(2).reveal { transform: translateY(-34px); }
}
.card .drawing.wide { width: 132px; }
.screens figcaption { margin-top: 10px; color: var(--muted); font-size: 15px; font-style: italic; line-height: 1.35; }

/* ---------- Steps (how it works) ---------- */
.step { display: grid; grid-template-columns: 1fr; gap: 26px; align-items: center; padding: 8px 0; }
.step .words { text-align: center; max-width: 30em; margin: 0 auto; }
.step .words .num { color: var(--champagne); margin-bottom: 10px; }
.step .words p { color: var(--muted); }
.step .shot { max-width: 300px; margin: 0 auto; }
.step .shot img { border: 1px solid var(--hairline); border-radius: 12px; }
.step + .step { margin-top: 44px; }
.step .figure { max-width: 420px; margin: 0 auto; color: var(--champagne); }

/* ---------- Wide screens (planner desk) ---------- */
.wide { margin-top: 34px; }
.wide img { border: 0; border-radius: 10px; width: 100%; }
.wide figcaption { margin-top: 10px; color: var(--muted); font-size: 15px; font-style: italic; text-align: center; }

/* ---------- Stats row ---------- */
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 30px; }
.stat { border: 1px solid var(--hairline); border-radius: var(--radius); padding: 20px 14px; text-align: center; }
.stat .big { font-family: 'Playfair Display', Georgia, serif; font-weight: 500; font-size: 34px; line-height: 1.1; }
.stat .small { color: var(--muted); font-size: 15px; margin-top: 6px; }

/* ---------- Closing & footer ---------- */
.close { text-align: center; }
.signature { margin-top: 26px; }
.signature .name { font-family: 'Playfair Display', Georgia, serif; font-size: 19px; }
.signature a { color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--hairline); }
.signature a:hover { color: var(--ink); border-bottom-color: var(--champagne); }
footer.site { text-align: center; padding: 18px 0 52px; color: var(--champagne); }
footer.site a { color: var(--champagne); text-decoration: none; padding-bottom: 2px; }
footer.site a:hover, footer.site a:focus-visible { color: var(--ink); }

/* ---------- Laptop and up ---------- */
@media (min-width: 900px) {
  header.site { padding-top: 60px; }
  .divider { margin: 52px auto; }
  .cards { grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; }
  .cards.two { grid-template-columns: repeat(2, 1fr); max-width: 760px; margin-left: auto; margin-right: auto; }
  .screens { grid-template-columns: repeat(3, 1fr); gap: 0 22px; margin-top: 44px; max-width: 900px; margin-left: auto; margin-right: auto; }
  .screens.four { grid-template-columns: repeat(4, 1fr); max-width: none; }
  .step { grid-template-columns: 1fr 1fr; gap: 56px; }
  .step .words { text-align: left; margin: 0; }
  .step:nth-child(even) .words { order: 2; }
  .step .shot { max-width: 320px; margin: 0 auto; }
  .stats { grid-template-columns: repeat(4, 1fr); }
  .wide { max-width: 980px; margin-left: auto; margin-right: auto; }
}

/* ---------- Phones ---------- */
@media (max-width: 560px) {
  .shell { margin: 9px; min-height: calc(100vh - 18px); }
  body { font-size: 18px; }
  .page { padding: 0 20px; }
  header.site { padding-top: 36px; }
  .strap { font-size: 12px; }
  nav.site { gap: 16px; }
  nav.site a { font-size: 12px; }
  .lede { font-size: 18px; }
  .card { padding: 20px 18px 22px; }
  .card h3 { font-size: 19px; }
  .card p { font-size: 16px; }
  .divider { margin: 30px auto; }
  .btn { padding: 16px 30px; }
  /* Swipeable screenshot row: one large image at a time */
  .screens {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    gap: 16px; margin-top: 26px; padding-bottom: 6px; margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px;
  }
  .screens figure { flex: 0 0 74%; scroll-snap-align: center; }
  .step .shot { max-width: 260px; }
  .trio {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    gap: 16px; margin-top: 34px; padding: 40px 20px 6px; margin-left: -20px; margin-right: -20px; align-items: start;
  }
  .trio figure { flex: 0 0 74%; scroll-snap-align: center; }
  .trio figure:nth-child(2) { transform: none; }
  html.js .trio figure:nth-child(2).reveal.in, html.js .trio figure:nth-child(2).reveal { transform: none; }
  .phone { border-radius: 30px; padding: 8px; }
  .phone img { border-radius: 23px; }
  .phone::before { top: 16px; height: 7px; }
}

/* =====================================================================
   ROUND THREE (11 September 2026, under Tom's licence to go further)
   ===================================================================== */

/* Page changes cross-fade where the browser can. */
@view-transition { navigation: auto; }

/* ---------- The slim bar, once the reader has scrolled ---------- */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  background: color-mix(in srgb, var(--ivory) 92%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--hairline);
  transform: translateY(-100%); transition: transform 0.35s ease;
}
html.scrolled .topbar { transform: none; }
.topbar .row { max-width: 1140px; margin: 0 auto; padding: 10px 40px; display: flex; align-items: center; gap: 26px; }
.topbar .wordmark { font-size: 22px; margin-right: auto; }
.topbar nav { display: flex; gap: 22px; }
.topbar nav a { color: var(--muted); text-decoration: none; font-size: 12px; }
.topbar nav a:hover, .topbar nav a[aria-current="page"] { color: var(--ink); }
.topbar .btn { padding: 12px 22px; font-size: 12px; }
/*
  THE SLIM BAR MAKES ROOM FOR THE SEARCH GLASS (13 September 2026). The "Request
  a demo" button sits at the right end of this row, in the corner the glass now
  occupies, and the two would overlap from the desk line up to about 1240px
  wide; above that the row's own centring already leaves the corner clear. So
  the row gives up the width of the glass in exactly that band and nowhere else.
  It sits here, after the row's own padding, because that shorthand would
  otherwise win wherever this was written earlier in the file.
*/
@media (min-width: 1000px) and (max-width: 1240px) {
  .topbar .row { padding-right: 76px; }
  /* And the row gives that width back out of the space between its own links,
     so the bar is no more crowded at these widths than it was before the glass
     existed. It was ALREADY over-full below about 1000px, which this does not
     pretend to fix and which is reported to Tom rather than quietly changed. */
  .topbar nav { gap: 14px; }
  /* And a link in the bar stays on its own line: "How it works" was breaking
     into three lines in this band before the glass existed, which is what made
     the bar three rows tall. */
  .topbar nav a { white-space: nowrap; }
}
/* On a phone the button alone, at the foot. */
.floating-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: none; justify-content: center; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); transform: translateY(110%); transition: transform 0.35s ease; pointer-events: none; }
html.scrolled .floating-cta { transform: none; pointer-events: auto; }
/* UP TO 999px RATHER THAN 899px FROM 13 SEPTEMBER 2026, AND IT IS A FIX TO
   SOMETHING THAT WAS ALREADY BROKEN RATHER THAN A NEW DESIGN. Measured before
   the search glass existed: at 900px and at 950px this row's own contents
   overflowed it and the "Request a demo" button was cut off by the edge of the
   screen. The bar's narrow treatment — the links and the button in the bar give
   way to the standing button at the foot — is his own, and it now covers those
   widths too. Reported to Tom rather than quietly changed. */
@media (max-width: 999px) {
  .topbar .row { padding: 10px 20px; gap: 14px; }
  .topbar nav, .topbar .btn { display: none; }
  .floating-cta { display: flex; }
  .floating-cta .btn { width: 100%; text-align: center; padding: 16px 20px; box-shadow: 0 6px 24px rgba(38,36,33,0.14); }
}

/* ---------- The pointer answered ---------- */
.card { transition: border-color 0.25s ease, transform 0.25s ease; }
.card:hover { border-color: var(--champagne); transform: translateY(-2px); }
.phone { transition: transform 0.35s ease; }
figure:hover > .phone, .shot:hover > .phone { transform: translateY(-4px); }
.btn { transition: background 0.2s ease, transform 0.2s ease; }
.btn:hover { transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) { .card, .phone, .btn, .topbar, .floating-cta { transition: none; } .card:hover, figure:hover > .phone, .btn:hover { transform: none; } }

/* ---------- The designer page ---------- */
.designs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 36px; }
.designs figure { margin: 0; }
.designs img { width: 100%; border: 1px solid var(--hairline); border-radius: var(--radius); }
.designs figcaption { margin-top: 8px; color: var(--muted); font-size: 14px; text-align: center; font-style: italic; }
.designs figure:hover img { border-color: var(--champagne); }

/* The names card: the reader's own names, set as they type. */
.names { display: grid; grid-template-columns: 1fr; gap: 26px; align-items: center; margin-top: 36px; }
.names .form { max-width: 26em; margin: 0 auto; text-align: center; }
.names label { display: block; text-align: left; color: var(--muted); margin: 14px 0 6px; }
.names input { width: 100%; font: inherit; font-size: 19px; padding: 12px 14px; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--ivory); color: var(--ink); }
.names input:focus { outline: none; border-color: var(--champagne); }
.card-live { width: 300px; aspect-ratio: 5 / 7; margin: 0 auto; background: var(--ivory); border: 1px solid var(--hairline); border-radius: var(--radius); position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 30px 22px; }
.card-live::before { content: ""; position: absolute; inset: 14px; border: 1px solid var(--hairline); border-radius: 4px; }
.card-live .l-caps { font-size: 9px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--muted); }
.card-live .l-name { font-family: 'Playfair Display', Georgia, serif; font-weight: 500; font-size: 34px; line-height: 1.15; margin-top: 12px; overflow-wrap: anywhere; }
.card-live .l-and { font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-size: 15px; color: var(--muted); margin: 4px 0; }
.card-live .l-line { font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-size: 13px; color: var(--muted); margin-top: 18px; }
.card-live .l-date { font-size: 13px; margin-top: 10px; }
.card-live .l-place { font-size: 9px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--muted); margin-top: 6px; }

/* ---------- How it works as a scroll story, at a desk ---------- */
.story .stage { display: none; }
@media (min-width: 900px) {
  .story { display: grid; grid-template-columns: 1fr 340px; gap: 72px; align-items: start; }
  .story .steps .step { grid-template-columns: 1fr; min-height: 70vh; align-content: center; }
  .story .steps .step .shot { display: none; }
  .story .steps .step:nth-child(even) .words { order: 0; }
  .story .stage { display: block; position: sticky; top: 90px; }
  .story .stage .phone { width: 340px; }
  .story .stage .phone img { display: none; }
  .story .stage .phone img.active { display: block; }
}

/* ---------- The interactive demo ---------- */
.try { display: grid; grid-template-columns: 1fr; gap: 30px; align-items: center; margin-top: 36px; }
.try .words { text-align: center; max-width: 30em; margin: 0 auto; }
.try .words p { color: var(--muted); }
.try .phone { width: 320px; margin: 0 auto; }
/* NO HAIRLINE ROUND THE SCREEN AND NONE INSIDE IT (13 September 2026, his
   ruling at his walk): the drawn phone is the only edge. */
.try .screen-box { position: relative; aspect-ratio: 375 / 812; border-radius: 27px; overflow: hidden; background: var(--ivory); }
.try .screen { position: absolute; inset: 0; padding: 44px 18px 22px; overflow-y: auto; display: none; }
.try .screen.active { display: block; animation: screenIn 0.35s ease; }
@keyframes screenIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.try .screen .frame { display: none; }
.try .app-mark { font-family: 'Playfair Display', Georgia, serif; font-weight: 500; font-size: 22px; text-align: center; margin-bottom: 26px; }
.try .app-caps { font-size: 9px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--muted); text-align: center; }
.try .app-h { font-family: 'Playfair Display', Georgia, serif; font-weight: 500; font-size: 26px; line-height: 1.15; text-align: center; margin: 8px 0 14px; }
.try .app-p { font-size: 14px; line-height: 1.5; color: var(--muted); text-align: center; margin-bottom: 14px; }
.try .app-card { border: 1px solid var(--hairline); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 10px; font-size: 14px; text-align: left; }
.try .app-door { display: block; width: 100%; border: 1px solid var(--hairline); border-radius: var(--radius); padding: 12px; font: inherit; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; background: none; color: var(--ink); margin-bottom: 8px; cursor: pointer; text-align: center; }
.try .app-door:hover { border-color: var(--walnut); }
.try .app-btn { display: block; width: 100%; border: 0; border-radius: var(--radius); padding: 13px; font: inherit; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; background: var(--walnut); color: var(--ivory); cursor: pointer; margin-top: 10px; }
.try .app-btn:hover { background: var(--walnut-press); }
.try .app-field { width: 100%; font: inherit; font-size: 15px; padding: 10px 12px; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--ivory); color: var(--ink); text-align: center; letter-spacing: 0.12em; }
.try .app-label { font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); margin: 12px 0 6px; text-align: left; }
.try .app-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.try .app-choice { border: 1px solid var(--hairline); border-radius: var(--radius); padding: 9px 8px; font: inherit; font-size: 12px; background: none; color: var(--ink); cursor: pointer; }
.try .app-choice[aria-pressed="true"] { border-color: var(--walnut); box-shadow: inset 0 0 0 1px var(--walnut); }
.try .app-name { font-family: 'Playfair Display', Georgia, serif; font-weight: 500; font-size: 16px; }
.try .app-small { font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); margin: 2px 0 6px; }
.try .app-line { font-size: 13px; line-height: 1.45; color: var(--muted); }
.try .app-band { height: 6px; border: 1px solid var(--champagne); border-radius: 3px; margin: 8px 0; position: relative; }
.try .app-band i { position: absolute; top: 0; bottom: 0; background: var(--champagne); opacity: 0.45; border-radius: 3px; }
.try .app-quiet { display: inline-block; border: 1px solid var(--hairline); border-radius: var(--radius); padding: 7px 10px; font: inherit; font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; background: none; color: var(--ink); cursor: pointer; margin-top: 8px; }
.try .app-quiet:hover { border-color: var(--walnut); }
.try .app-foot { display: flex; justify-content: center; gap: 16px; margin-top: 14px; font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.try .app-foot button { background: none; border: 0; font: inherit; color: var(--muted); cursor: pointer; letter-spacing: 0.2em; text-transform: uppercase; }
.try .app-foot button:hover { color: var(--ink); }

@media (min-width: 900px) {
  .designs { grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 44px; }
  .names { grid-template-columns: 1fr 1fr; gap: 56px; max-width: 860px; margin-left: auto; margin-right: auto; }
  .names .form { text-align: left; margin: 0; }
  .try { grid-template-columns: 1fr 1fr; gap: 56px; max-width: 900px; margin-left: auto; margin-right: auto; }
  .try .words { text-align: left; margin: 0; }
}
@media (max-width: 560px) {
  .designs { grid-template-columns: 1fr 1fr; gap: 12px; }
  .try .phone { width: 290px; }
}

/* A link inside a card's words takes the card's own quiet link, never the browser's blue. */
.card p a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--hairline); }
.card p a:hover { border-bottom-color: var(--champagne); }
/* The demo phone's front door sits centred, as the real one does. */
.try #s-door.active { display: flex; flex-direction: column; justify-content: center; }

/* =====================================================================
   ROUND FOUR (11 September 2026)
   ===================================================================== */

/* A keyboard's way past the menu. */
.skip { position: absolute; left: 16px; top: -60px; z-index: 30; background: var(--walnut); color: var(--ivory); padding: 10px 16px; border-radius: var(--radius); text-decoration: none; font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; }
.skip:focus { top: 16px; }

/* The home page's middle phone plays the guest's journey. */
.trio .player { position: relative; }
.trio .player img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.9s ease; }
.trio .player img:first-child { position: relative; }
.trio .player img.on { opacity: 1; }
.trio .player-caption { margin-top: 12px; text-align: center; color: var(--muted); font-size: 14px; font-style: italic; min-height: 1.4em; transition: opacity 0.4s ease; }
.trio .player-caption.fade { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .trio .player img { transition: none; } }

/* Try the designer: a layout, a colour set, the real card. */
.tryd { display: grid; grid-template-columns: 1fr; gap: 26px; align-items: start; margin-top: 36px; }
.tryd .picker h3 { margin-bottom: 6px; }
.tryd .picker p { color: var(--muted); }
.tryd .group { margin-top: 18px; }
.tryd .group .caps { color: var(--champagne); display: block; margin-bottom: 8px; }
.tryd .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tryd .chip { border: 1px solid var(--hairline); border-radius: var(--radius); padding: 9px 14px; font: inherit; font-size: 15px; background: none; color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.tryd .chip:hover { border-color: var(--champagne); }
.tryd .chip[aria-pressed="true"] { border-color: var(--walnut); box-shadow: inset 0 0 0 1px var(--walnut); }
.tryd .chip .swatch { width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--hairline); display: inline-block; }
.tryd .card-out { max-width: 360px; margin: 0 auto; }
.tryd .card-out img { width: 100%; border: 1px solid var(--hairline); border-radius: var(--radius); transition: opacity 0.3s ease; }
.tryd .card-out img.swap { opacity: 0.35; }
.tryd .card-out figcaption { margin-top: 10px; text-align: center; color: var(--muted); font-size: 14px; font-style: italic; }

/* For guests: plain rows of who sees what. */
.rows { max-width: 720px; margin: 30px auto 0; }
.row-line { display: grid; grid-template-columns: 1fr; gap: 4px; padding: 14px 0; border-top: 1px solid var(--hairline); }
.row-line:last-child { border-bottom: 1px solid var(--hairline); }
.row-line .who { font-family: 'Playfair Display', Georgia, serif; font-weight: 500; font-size: 19px; }
.row-line .what { color: var(--muted); }

@media (min-width: 900px) {
  .tryd { grid-template-columns: 1fr 1fr; gap: 56px; max-width: 960px; margin-left: auto; margin-right: auto; }
  .row-line { grid-template-columns: 220px 1fr; gap: 24px; }
}
@media (max-width: 560px) {
  nav.site { gap: 12px 18px; }
  nav.site a { font-size: 11px; }
}

/* =====================================================================
   ROUND FIVE (11 September 2026)
   ===================================================================== */

/* The champagne arrow back to the top, on Tom's instruction: the platform's
   own control carried across (app/back-to-top.module.css): a hairline arrow,
   no disc, tile or box, bottom right, absent at the top of a page, ink under
   the pointer. On a phone it sits above the floating button. */
.to-top {
  position: fixed; right: 20px; bottom: 20px; z-index: 30;
  width: 44px; height: 44px; padding: 11px; display: flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: 0; cursor: pointer; -webkit-tap-highlight-color: transparent;
  opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
}
html.scrolled .to-top { opacity: 1; pointer-events: auto; }
.to-top svg { display: block; width: 22px; height: 22px; fill: none; stroke: var(--champagne); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.to-top:hover svg, .to-top:focus-visible svg { stroke: var(--ink); }
.to-top:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* The arrow clears the standing button at the foot wherever that button shows,
   which is now every width below 1000px; the phone inset itself is unmoved. */
@media (max-width: 999px) { .to-top { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); } }
@media (max-width: 899px) { .to-top { right: 14px; } }
@media (prefers-reduced-motion: reduce) { .to-top { transition: none; } }

/* The contact page: one card per address. */
/* ---------- The contact page's cards (13 September 2026) ------------------- */
/*
  TWO DOORS OF EQUAL WEIGHT under "Elsewhere", on his ruling that one mark alone
  in the middle of the page looked lonely. They are the site's own card with the
  WHOLE CARD as the door, which is the platform's fourth garment: nothing inside
  is dressed a second time, and the word at the foot is a label rather than a
  second link.
*/
a.card.door { display: block; text-decoration: none; color: inherit; }
a.card.door:hover, a.card.door:focus-visible { border-color: var(--champagne); }
a.card.door:focus-visible { outline: 2px solid var(--walnut); outline-offset: 3px; }
a.card.door .more { display: inline-block; margin-top: 12px; color: var(--ink); font-size: 17px; }
a.card.door:hover .more { color: var(--walnut); }
.doors { align-items: stretch; }

.contacts .card { text-align: left; }
.contacts .card .caps { color: var(--champagne); display: block; margin-bottom: 8px; }
.contacts .card a.addr { font-family: 'Playfair Display', Georgia, serif; font-weight: 500; font-size: 22px; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--hairline); }
.contacts .card a.addr:hover { border-bottom-color: var(--champagne); }
.contacts .card p { text-wrap: wrap; margin-top: 10px; }

/* The one-pager, offered as a download. */
.paper { display: grid; grid-template-columns: 1fr; gap: 26px; align-items: center; margin-top: 36px; }
.paper img { width: 100%; max-width: 300px; margin: 0 auto; border: 1px solid var(--hairline); border-radius: var(--radius); }
.paper .words { text-align: center; max-width: 30em; margin: 0 auto; }
.paper .words p { color: var(--muted); }
@media (min-width: 900px) {
  .paper { grid-template-columns: 300px 1fr; gap: 56px; max-width: 820px; margin-left: auto; margin-right: auto; }
  .paper .words { text-align: left; margin: 0; }
}

/* Paper: the chrome goes, the words stay. */
@media print {
  .topbar, .floating-cta, .to-top, .skip, nav.site, .btn, html.js .search { display: none !important; }
  .shell { border: 0; margin: 0; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* =====================================================================
   ROUND SIX (11 September 2026): the emails as guests receive them
   ===================================================================== */
img.mail { width: 100%; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--ivory); }
.screens img.mail { border-radius: var(--radius); }
.paper img.mail { max-width: 340px; }

/* =====================================================================
   TESTIMONIALS AND THE WALK-THROUGH (12 September 2026)
   ===================================================================== */

/* Three planners' own words, in the shape of the brand's own quote tiles:
   the sentence in Playfair, the divider motif, then first name and region in
   letter-spaced caps. Nobody's words are ever set in anything but their own. */
.voices { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 36px; }
.voice { border: 1px solid var(--hairline); border-radius: var(--radius); padding: 34px 28px 30px; text-align: center; display: flex; flex-direction: column; }
.voice blockquote { margin: 0; font-family: 'Playfair Display', Georgia, serif; font-weight: 500; font-size: clamp(20px, 2.1vw, 24px); line-height: 1.3; text-wrap: balance; }
/* The attribution sits at the foot of every card, so three quotes of
   different lengths still line their names up with one another. */
.voice .rule { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 34px 0 20px; }
@media (min-width: 900px) {
  /* Bottom-anchored so the names line up, with the 34px kept as a floor so a
     long quotation can never crowd the divider (his note of 12 September). */
  .voice .rule { margin-top: auto; padding-top: 34px; }
  /* A longer region wraps to two lines; every card keeps room for two, so
     the three names sit level whatever the region is called. */
  .voice .where { min-height: 2.9em; }
}
.voice .rule::before, .voice .rule::after { content: ""; width: 34px; height: 1px; background: var(--champagne); }
.voice .rule i { width: 6px; height: 6px; background: var(--champagne); transform: rotate(45deg); }
.voice .who { font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; }
.voice .where { font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); margin-top: 6px; }
.voice cite { font-style: normal; }

/* The walk-through: a figure and a line, in rows that read like a ledger. */
.walk { max-width: 760px; margin: 30px auto 0; }
.walk .line { display: grid; grid-template-columns: 1fr; gap: 4px; padding: 16px 0; border-top: 1px solid var(--hairline); }
.walk .line:last-child { border-bottom: 1px solid var(--hairline); }
.walk .fig { font-family: 'Playfair Display', Georgia, serif; font-weight: 500; font-size: 26px; line-height: 1.1; }
.walk .say { color: var(--muted); }
.invented { margin-top: 22px; text-align: center; color: var(--muted); font-size: 16px; }

@media (min-width: 900px) {
  .voices { grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 44px; }
  .walk .line { grid-template-columns: 190px 1fr; gap: 26px; align-items: baseline; }
}

/* =====================================================================
   THE FOUNDING-PLANNER OFFER (12 September 2026)
   His instruction: stand out, but not brash. So it stands out the way
   the stationery does — a hairline frame with a second frame inside it,
   generous air, and the page's one walnut act — rather than by fill,
   badge, banner or urgency. Nothing here is a colour block.
   ===================================================================== */
.offer { border: 1px solid var(--champagne); border-radius: var(--radius); padding: 10px; margin-top: 36px; }
.offer .inner { border: 1px solid var(--hairline); border-radius: 4px; padding: 44px 30px 40px; text-align: center; }
.offer .caps { color: var(--champagne); display: block; }
.offer h2 { font-size: clamp(28px, 3.4vw, 40px); margin: 18px auto 0; max-width: 16em; }
.offer p { color: var(--muted); max-width: 32em; margin: 16px auto 0; text-wrap: balance; }
.offer .cta { margin-top: 28px; }
.offer .terms { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 34px; margin: 26px auto 0; max-width: 34em; }
.offer .terms span { font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink); }
.offer .terms span + span { position: relative; }
.offer .terms span + span::before { content: ""; position: absolute; left: -18px; top: 50%; width: 5px; height: 5px; margin-top: -3px; background: var(--champagne); transform: rotate(45deg); }
@media (min-width: 900px) { .offer .inner { padding: 56px 44px 52px; } }
@media (max-width: 560px) {
  .offer { padding: 8px; }
  .offer .inner { padding: 34px 20px 32px; }
  .offer .terms { flex-direction: column; gap: 10px; }
  .offer .terms span + span::before { display: none; }
}