/* The lower half of the page as "rooms": every section is a boxed panel, like the hero stage. No hairline grids, no icons,
   no numbered cells, no boxes inside boxes. Colours come from the brand kit (brand/colours.css) and the site's own tokens (styles.css).
   Second pass after a fresh-eyes review: one glow per dark room and each brand colour used once (Forest dusk for what
   you keep, Pale olive for the four reasons, Forest night for the ending). */

.nx { display: grid; gap: clamp(72px, 10vw, 160px); padding: clamp(48px, 7vw, 120px) var(--gutter) var(--gutter); }
:where(.nx) :where(h2, h3, p) { margin: 0; }
.nx-s { display: inline-block; }
.nx-h { font-weight: 400; font-size: clamp(34px, 4.8vw, 72px); line-height: 1.02; letter-spacing: -0.04em; max-width: 17ch; margin-bottom: clamp(22px, 3vw, 44px); text-wrap: balance; }

/* 1. what we do: three rooms. The picture fills the top and melts into its own floor colour; the words sit on a plate
      of frosted glass. The three plates share one row, so their tops line up whatever the length of the words. */
.nx-rooms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: minmax(clamp(300px, 34vw, 520px), 1fr) auto; gap: 0 10px; }
.nx-room { position: relative; grid-row: span 2; display: grid; grid-template-rows: subgrid; border-radius: 6px; overflow: hidden; isolation: isolate; background: var(--floor, #cbbfae); }
/* ROUND4b: the picture lives in the top row only, so the plate never covers its subject. It tucks a little under the
   plate and melts into the floor colour there. (An absolute child of a grid takes its row as its box.) */
.nx-room > img { position: absolute; grid-row: 1 / 2; grid-column: 1 / 2; inset: 0 0 auto 0; width: 100%; height: calc(100% + 54px); object-fit: cover; z-index: -1; transition: transform 1.6s var(--spring); transform-origin: var(--o, 50% 40%); scale: var(--zoom, 1);
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 46px), transparent 100%); mask-image: linear-gradient(180deg, #000 calc(100% - 46px), transparent 100%); }
.nx-room:hover > img { transform: scale(1.03); }
.nx-plate {
  grid-row: 2; margin: 10px; padding: clamp(18px, 1.8vw, 26px); border-radius: 4px; display: flex; flex-direction: column; gap: 10px; color: #0f1c14;
  background: rgba(248, 248, 240, .8); backdrop-filter: blur(22px) saturate(1.25); -webkit-backdrop-filter: blur(22px) saturate(1.25);
}
.nx-plate h3 { font-size: clamp(26px, 2.5vw, 38px); font-weight: 400; letter-spacing: -0.035em; line-height: 1.05; }
.nx-lead { font-size: 17px; line-height: 1.35; text-wrap: pretty; }
.nx-sub { font-size: 15px; line-height: 1.45; color: #4d5a45; text-wrap: pretty; }
.nx-walk { margin-top: auto; padding-top: 10px; font-size: 16px; font-weight: 500; line-height: 1.35; }
.nx-walk span { display: block; font-size: 14px; font-weight: 400; color: #4d5a45; margin-bottom: 2px; }

/* the thread of the whole page: every picture below the scroll stands partly behind the same fluted glass.
   The glass copy lies exactly over the plain picture and is cut to the left part; it slides in as the picture arrives. */
.nx-glass { clip-path: inset(0 var(--cut, 54%) 0 0); transition: clip-path 1.8s var(--spring) .2s, transform 1.6s var(--spring) !important; }
.rv:not(.is-in) .nx-glass { clip-path: inset(0 100% 0 0); }
@media (prefers-reduced-motion: reduce) { .nx-glass { transition: none !important; } }
/* the glass moves with the scroll, like the glass at the top: it slides across each picture as the picture comes up the screen */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* each room cuts off what overflows it, so the glass has to watch the room itself, not its own box */
    .nx-room, .nx-why-pic, .nx-soon { view-timeline-name: --room; }
    .nx-glass, .rv:not(.is-in) .nx-glass { animation: nx-slide linear both; animation-timeline: --room; animation-range: entry 0% cover 40%; transition: transform 1.6s var(--spring) !important; }
    @keyframes nx-slide { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 var(--cut, 54%) 0 0); } }
  }
}

/* 2. what you keep: one statement on Forest dusk. The words stay at the top; the light is left alone at the bottom. */
.nx-keep {
  border-radius: 6px; padding: clamp(24px, 5vw, 72px); min-height: min(88vh, 860px); display: flex; flex-direction: column; gap: clamp(40px, 6vw, 88px);
  color: #f3eee6; background: var(--an-grain), var(--an-forest-dusk);
}
.nx-big { font-size: clamp(30px, 4.4vw, 68px); line-height: 1.06; letter-spacing: -0.04em; max-width: 21ch; text-wrap: balance; }
.nx-big em { font-family: 'Fraunces', Georgia, serif; font-optical-sizing: auto; font-style: italic; font-weight: 300; letter-spacing: -0.02em; }
.nx-facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px clamp(20px, 3vw, 48px); max-width: 1100px; }
.nx-facts li { font-size: clamp(17px, 1.4vw, 20px); font-weight: 500; line-height: 1.35; text-wrap: pretty; }

/* 4. four reasons: one quiet room in Pale olive, the four words inside it */
.nx-whys { border-radius: 6px; padding: clamp(24px, 5vw, 72px); background: radial-gradient(70% 60% at 50% 110%, #f3e6a8 0%, #eef0cf 32%, rgba(238,240,207,0) 70%), linear-gradient(180deg, #eef0dc 0%, #eaedd4 55%, #d3dab0 100%); color: #0f1c14; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 72px); }
.nx-whys .nx-h { margin-bottom: 0; max-width: 11ch; }
.nx-why-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(36px, 4vw, 64px) clamp(28px, 4vw, 64px); align-content: start; padding-top: 6px; }
.nx-why { display: grid; gap: 12px; align-content: start; }
.nx-why h3 { font-family: 'Fraunces', Georgia, serif; font-optical-sizing: auto; font-style: italic; font-weight: 300; font-size: clamp(36px, 3.6vw, 58px); letter-spacing: -0.02em; line-height: 1; }
.nx-why p { font-size: 17px; line-height: 1.4; max-width: 26ch; color: #36422f; text-wrap: pretty; }

/* 5. later: Research and Studios */
.nx-later-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 32px; margin-bottom: clamp(22px, 3vw, 44px); }
.nx-later-head .nx-h { margin-bottom: 0; }
.nx-not { font-size: 17px; color: var(--ink-2); max-width: 34ch; }
.nx-later-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.nx-soon { position: relative; border-radius: 6px; overflow: hidden; isolation: isolate; min-height: clamp(380px, 40vw, 620px); display: flex; align-items: flex-end; color: #f3eee6; background: #1b1a18; }
.nx-soon img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.nx-soon::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, .66) 100%); }
.nx-soon-txt { padding: clamp(18px, 2.4vw, 34px); display: grid; gap: 10px; max-width: 48ch; }
.nx-soon h3 { font-size: clamp(26px, 2.8vw, 42px); font-weight: 400; letter-spacing: -0.035em; line-height: 1.05; }
/* the second word of each name is set in the face of the hero's "own" */
.nx-soon h3 em { font-family: 'Fraunces', Georgia, serif; font-optical-sizing: auto; font-style: italic; font-weight: 300; letter-spacing: -0.02em; font-size: 1.04em; }
.nx-soon p { font-size: 17px; line-height: 1.45; color: rgba(243, 238, 230, .9); text-wrap: pretty; }
.nx-pill { justify-self: start; font-size: 14px; font-weight: 500; padding: 6px 14px; border-radius: 999px; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .3); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

/* a dark painting whose subject sits low: the words go to the top */
.nx-soon--top { align-items: flex-start; }
.nx-soon--top::after { background: linear-gradient(180deg, rgba(0, 0, 0, .34) 0%, rgba(0, 0, 0, 0) 58%); }

/* a room whose painting is light: dark words at the top, no shade over the picture */
.nx-soon--light { color: #0f1c14; align-items: flex-start; background: #f3e6cd; }
.nx-soon--light::after { display: none; }
.nx-soon--light p { color: #36422f; }
.nx-soon--light .nx-pill { background: rgba(15, 28, 20, .07); border-color: rgba(15, 28, 20, .22); }

/* 6. the ending: the first question is already on the page, and its answers are the way in */
.nx-end {
  border-radius: 6px; padding: clamp(24px, 5vw, 72px) clamp(24px, 5vw, 72px) clamp(120px, 16vw, 240px); color: #f3eee6; background: var(--an-forest-night);
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 64px); align-items: start;
}
.nx-end-say { display: grid; gap: 18px; }
.nx-end-h { font-size: clamp(38px, 5.6vw, 88px); font-weight: 400; letter-spacing: -0.045em; line-height: 1; max-width: 13ch; text-wrap: balance; }
.nx-end-say p { font-size: 18px; line-height: 1.45; color: rgba(243, 238, 230, .82); max-width: 34ch; }
.nx-first { border-radius: 6px; padding: clamp(20px, 2.4vw, 32px); display: grid; gap: 16px; background: #f8f8f0; color: #0f1c14; }
.nx-first-q { font-size: clamp(22px, 2.2vw, 30px); letter-spacing: -0.03em; line-height: 1.15; }
.nx-picks { display: grid; gap: 8px; }
.nx-pick { font: inherit; font-size: 17px; text-align: left; min-height: 56px; padding: 0 24px; border: 0; border-radius: 999px; background: #eceedd; color: #0f1c14; cursor: pointer; transition: background .25s ease, color .25s ease, transform .5s var(--spring); }
.nx-pick:hover { background: #0f1c14; color: #f8f8f0; transform: translateX(3px); }
.nx-pick:focus-visible { outline: 2px solid #7d6212; outline-offset: 3px; border-radius: 999px; }

/* the conversation itself, in the same language: round answers, no boxes inside boxes */
.nx-talk { border: 0; border-radius: 14px; }
.nx-talk .talk-q { font-size: 28px; letter-spacing: -0.035em; }
.nx-talk .talk-bar { height: 3px; border-radius: 3px; overflow: hidden; }
.nx-talk .opt { min-height: 54px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--chip); transition: background .25s ease, color .25s ease; }
.nx-talk .opt:hover { background: color-mix(in srgb, var(--accent) 16%, var(--chip)); }
.nx-talk .opt:has(input:checked) { background: var(--ink); color: var(--paper); }
.nx-talk input:not([type=radio]) { border: 0; border-radius: 999px; padding: 12px 20px; background: var(--chip); }

/* dark setting: the reasons room turns to Olive dusk, without its glow, so there is no white slab on a dark page */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .nx-whys { background: linear-gradient(180deg, #1c2312 0%, #3d4a24 100%); color: #f3eee6; }
  :root:not([data-theme="light"]) .nx-why p { color: rgba(243, 238, 230, .86); }
}
:root[data-theme="dark"] .nx-whys { background: linear-gradient(180deg, #1c2312 0%, #3d4a24 100%); color: #f3eee6; }
:root[data-theme="dark"] .nx-why p { color: rgba(243, 238, 230, .86); }

/* on a tablet each room lies on its side: words on the left, the picture on the right */
@media (min-width: 561px) and (max-width: 1080px) {
  .nx-rooms { grid-template-columns: 1fr; grid-template-rows: none; gap: 10px; }
  .nx-room { grid-row: auto; display: flex; align-items: center; min-height: 400px; }
  .nx-room > img { grid-row: auto; grid-column: auto; inset: 0 0 0 auto; width: 58%; height: 100%; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 26%); mask-image: linear-gradient(90deg, transparent 0%, #000 26%); }
  .nx-plate { width: 45%; }
}
@media (max-width: 900px) {
  .nx-end, .nx-whys { grid-template-columns: 1fr; }
  .nx-facts, .nx-later-grid { grid-template-columns: 1fr; }
  .nx-keep { min-height: 0; padding-bottom: clamp(160px, 40vw, 260px); }
  .nx-whys .nx-h { max-width: 17ch; }
}
/* on a phone the picture stands above its words, so nothing is hidden behind the plate */
@media (max-width: 560px) {
  .nx-rooms { grid-template-columns: 1fr; grid-template-rows: none; gap: 10px; }
  .nx-room { grid-row: auto; display: block; }
  .nx-room > img { position: static; display: block; height: auto; aspect-ratio: 5 / 4.4; }
  .nx-plate { margin: -22px 10px 10px; }      /* ROUND4b: was -56px, which hid the foot of each picture */
  .nx-why-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .nx-room > img, .nx-pick { transition: none; } .nx-room:hover > img, .nx-pick:hover { transform: none; } }

/* ---- ROUND3 ---- */
/* the top bar: one colour for the logo, the links and "Talk to us"; the logo's dots are never cut at the box's edge */
:root { --nav-ink: #2a4a2c; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --nav-ink: #cdd9a8; } }
:root[data-theme="dark"] { --nav-ink: #cdd9a8; }
.nav a, .nav .nav-links a, .wordmark .logo { color: var(--nav-ink); }
.nav .nav-links a { opacity: .78; transition: opacity .2s ease; } .nav .nav-links a:hover { opacity: 1; color: var(--nav-ink); }
.wordmark .logo { overflow: visible; }

/* the glass scroll: each question is held about twice as long */
.seq--live { height: 480svh; }
.seq--live .seq-ask { will-change: opacity, transform; }      /* drawn ahead, so the first question does not hitch as it arrives */

/* the glass on its stone, in the left of the four reasons */
.nx-why-side { display: flex; flex-direction: column; gap: clamp(20px, 3vw, 36px); min-height: 0; }
.nx-why-pic { margin: 0; flex: 1; min-height: 200px; position: relative; border-radius: 6px; overflow: hidden; background: #efe4d1; }
.nx-why-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 60%; }
.nx-why-grid { align-content: center; }

/* a menu link lands on a section that fits in one screen (laptops and larger) */
@media (min-width: 1081px) and (min-height: 600px) {
  .nx > section { scroll-margin-top: 72px; }
  .nx-do, .nx-later { min-height: calc(100svh - 88px); display: grid; grid-template-rows: auto minmax(0, 1fr); }
  .nx-do .nx-h, .nx-later .nx-h { font-size: clamp(34px, min(4.8vw, 8svh), 72px); margin-bottom: clamp(14px, 3svh, 36px); }
  .nx-later-head { margin-bottom: clamp(14px, 3svh, 36px); } .nx-later-head .nx-h { margin-bottom: 0; }
  .nx-rooms { grid-template-rows: minmax(170px, 1fr) auto; }
  .nx-later-grid { grid-auto-rows: minmax(240px, 1fr); } .nx-soon { min-height: 0; }
  .nx-keep, .nx-whys, .nx-end { min-height: calc(100svh - 88px); }
  .nx-whys .nx-h, .nx-big, .nx-end-h { font-size: clamp(30px, min(4.4vw, 8svh), 68px); }
}
@media (max-width: 900px) { .nx-why-pic { flex: none; min-height: 0; aspect-ratio: 16 / 10; } }

/* ---- REVIEW FIXES (round 3 review, problems 1, 4 and 7) ---- */
/* phone: the glass copy lies over its picture; it must not drop into the page as a second picture */
@media (max-width: 560px) {
  /* ROUND5: the plain picture is in the flow here, so the glass copy must sit above it (it was hidden beneath), and the plate above the glass */
  .nx-room > img.nx-glass { position: absolute; top: 0; left: 0; width: 100%; height: auto; aspect-ratio: 5 / 4.4; z-index: 0; }
  .nx-plate { position: relative; z-index: 1; }
}
/* the Studios card: a wash of paper behind its words, so they do not sit on the brush strokes */
.nx-soon--light::after { display: block; background: linear-gradient(180deg, rgba(246, 240, 226, .94) 0%, rgba(246, 240, 226, .8) 30%, rgba(246, 240, 226, 0) 58%); }

/* in "What owning it gives you" the glass covers more of the picture. The pane now stands behind the glass; a clear strip is left at the right. */
/* ROUND5: these pictures stand wholly behind the fluted glass. */
.nx-room .nx-glass, .nx-why-pic .nx-glass { --cut: 0%; }

/* ---- ROUND4: the dark setting, finished. The plates and the Studios card no longer glare on the dark page. ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .nx-room { background: color-mix(in srgb, var(--floor, #cbbfae) 20%, #08140e); }
  :root:not([data-theme="light"]) .nx-plate { background: rgba(8, 20, 14, .5); color: #f3eee6; box-shadow: inset 0 0 0 1px rgba(243, 238, 230, .09); }
  :root:not([data-theme="light"]) .nx-plate .nx-sub, :root:not([data-theme="light"]) .nx-plate .nx-walk span { color: #aab5a2; }
  :root:not([data-theme="light"]) .nx-soon--light { color: #f3eee6; background: #10231a; }
  :root:not([data-theme="light"]) .nx-soon--light img { filter: brightness(.8); }      /* 14 Nov: the Studios photograph is pale light; .62 left it a grey murk */
  :root:not([data-theme="light"]) .nx-soon--light::after { background: linear-gradient(180deg, rgba(8, 20, 14, .86) 0%, rgba(8, 20, 14, .62) 32%, rgba(8, 20, 14, .4) 62%, rgba(8, 20, 14, .4) 100%); }
  :root:not([data-theme="light"]) .nx-soon--light p { color: rgba(243, 238, 230, .88); }
  :root:not([data-theme="light"]) .nx-soon--light .nx-pill { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .3); }
  :root:not([data-theme="light"]) .nx-why-pic img { filter: brightness(.70); }
}
:root[data-theme="dark"] .nx-room { background: color-mix(in srgb, var(--floor, #cbbfae) 20%, #08140e); }
:root[data-theme="dark"] .nx-plate { background: rgba(8, 20, 14, .5); color: #f3eee6; box-shadow: inset 0 0 0 1px rgba(243, 238, 230, .09); }
:root[data-theme="dark"] .nx-plate .nx-sub, :root[data-theme="dark"] .nx-plate .nx-walk span { color: #aab5a2; }
:root[data-theme="dark"] .nx-soon--light { color: #f3eee6; background: #10231a; }
:root[data-theme="dark"] .nx-soon--light img { filter: brightness(.8); }      /* 14 Nov: the Studios photograph is pale light; .62 left it a grey murk */
:root[data-theme="dark"] .nx-soon--light::after { background: linear-gradient(180deg, rgba(8, 20, 14, .86) 0%, rgba(8, 20, 14, .62) 32%, rgba(8, 20, 14, .4) 62%, rgba(8, 20, 14, .4) 100%); }
:root[data-theme="dark"] .nx-soon--light p { color: rgba(243, 238, 230, .88); }
:root[data-theme="dark"] .nx-soon--light .nx-pill { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .3); }
:root[data-theme="dark"] .nx-why-pic img { filter: brightness(.70); }

/* ---- COLOUR REVIEW: findings 2 to 8 ---- */
/* 4 and 5: the hero button in paper and ink, and the conversation's shadow and backdrop in Forest night, not navy */
.btn--light { background: #f8f8f0; color: #0f1c14; }
.talk { box-shadow: 0 30px 80px -20px rgba(8, 20, 14, .35); }
.talk::backdrop { background: rgba(8, 20, 14, .38); }
/* 2 and 7, dark setting */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .nx-room > img { filter: brightness(.82); }
  :root:not([data-theme="light"]) .nx-first { background: #10231a; color: #f3eee6; }
  :root:not([data-theme="light"]) .nx-pick { background: #1c3024; color: #f3eee6; }
  :root:not([data-theme="light"]) .nx-pick:hover { background: #f3eee6; color: #08140e; }
  :root:not([data-theme="light"]) .nx-pick:focus-visible { outline-color: #e0bd62; }
}
:root[data-theme="dark"] .nx-room > img { filter: brightness(.82); }
:root[data-theme="dark"] .nx-first { background: #10231a; color: #f3eee6; }
:root[data-theme="dark"] .nx-pick { background: #1c3024; color: #f3eee6; }
:root[data-theme="dark"] .nx-pick:hover { background: #f3eee6; color: #08140e; }
:root[data-theme="dark"] .nx-pick:focus-visible { outline-color: #e0bd62; }

/* ---- The light and dark switch : a moon in the light setting, a sun in the dark. ---- */
.nav-side { justify-self: end; display: flex; align-items: center; gap: 6px; }
.nav-side .nav-end { justify-self: auto; }
@media (max-width: 640px) { .nav-side { grid-column: 2; } }
/* REVIEW11: on phones Talk to us comes first and the switch ends the bar, its ring on the panel's right edge (the ring is 4 px inside its tap area) */
@media (max-width: 640px) { .nav-side .nx-theme { order: 2; margin-right: -4px; } }
.nx-theme { width: 44px; height: 44px; padding: 0; border: 0; border-radius: 999px; background: none; color: var(--nav-ink); display: grid; place-items: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.nx-theme > span { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; border: 1px solid color-mix(in srgb, currentColor 30%, transparent); transition: background .25s ease, transform .5s var(--spring); }
@media (hover: hover) { .nx-theme:hover > span { background: color-mix(in srgb, currentColor 10%, transparent); } }
.nx-theme:active > span { transform: scale(.94); }
.nx-theme:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.nx-theme svg { display: block; grid-area: 1 / 1; }
.nx-theme .nx-sun { display: none; }      /* one icon at a time: these must outrank ".nx-theme svg" above */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .nx-theme .nx-moon { display: none; } :root:not([data-theme="light"]) .nx-theme .nx-sun { display: block; } }
:root[data-theme="dark"] .nx-theme .nx-moon { display: none; }
:root[data-theme="dark"] .nx-theme .nx-sun { display: block; }
@media (prefers-reduced-motion: reduce) { .nx-theme > span { transition: none; } .nx-theme:active > span { transform: none; } }

/* ---- ROUND5, fix 2: from 641 to 760 px the three menu links broke onto two lines. That range now uses the phone's bar. ---- */
@media (min-width: 641px) and (max-width: 760px) { .nav { grid-template-columns: auto 1fr; } .nav-links { display: none; } .nav-side { grid-column: 2; } }

/* ---- ROUND5, 3B: Fraunces and Inter Tight from the site itself (SIL Open Font License; OFL.txt beside each). No request to Google. ---- */
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 300; font-display: swap; src: url(brand/fonts/fraunces/Fraunces-300-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 300; font-display: swap; src: url(brand/fonts/fraunces/Fraunces-Italic-300-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 400 500; font-display: swap; src: url(brand/fonts/inter-tight/InterTight-400-500-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---- 4B: the last screen of the conversation shows the answers and can copy them. ---- */
.talk-answers { justify-self: stretch; margin: 6px 0 0; padding: 14px 16px; border-radius: 12px; background: var(--chip); color: var(--ink); font: inherit; font-size: 14.5px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 32vh; overflow: auto; }
.talk-answers:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* REVIEW12: two web mail links on the last screen, where there is a mouse; a phone or tablet opens its mail app and does not need them */
.talk-web { display: none; }
@media (hover: hover) and (pointer: fine) { .talk-web { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; } .talk-web > span { margin-right: 6px; font-size: 15.5px; } .talk-done .talk-web .btn { margin-top: 0; } }
.talk-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.talk-done .talk-acts .btn { margin-top: 8px; }
.btn--quiet { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.talk-copied { min-height: 1.4em; font-size: 14.5px; }

/* ---- ITEM 15 B: the question and the last screen's title can take the focus for screen readers. They are not controls, so no ring. ---- */
.talk legend:focus, .talk-done .talk-q:focus { outline: none; }

/* ---- REVIEW5 (11 Nov): the hero stage on phones. A strip of page showed under the stage for the whole scroll. ----
   The stage is as tall as the screen with the browser's bars tucked away (lvh), the unit Apple's own pages use for a
   sticky stage, so it fills the screen and runs on beneath the bar when the bar is out. What must always be seen (the
   words, the questions, the picture's framing) stays in the part that is in view even with the bars out (svh):
   --under is the difference, and it is 0 on a laptop. Neither unit changes while the bars move, so nothing jumps. */
.seq--live { height: 480vh; height: 480svh; }      /* REVIEW5e: was 760, too long */
.seq--live .seq-stage { --under: 0px; height: calc(100vh - 56px - 2 * var(--gutter)); }
@supports (height: 100lvh) {
  /* REVIEW8 and REVIEW10: the stage is as tall as the screen with the bars tucked away, and its foot is clipped by the height of the
     browser bar as it is now, so the rounded foot always sits just above the bar. Only that edge moves. What must be seen hangs off
     --under (the bar at its largest), which never changes. --hid is 0 except on an iPhone whose units say nothing (the script sets it). */
  .seq--live .seq-stage { --lv: 100lvh; --sv: 100svh; --dv: 100dvh; --hid: 0px; --under: calc(var(--lv) - var(--sv)); height: calc(var(--lv) - 56px - 2 * var(--gutter) - var(--hid)); }
  @media (pointer: coarse) { .seq--live .seq-stage { clip-path: inset(0 0 max(0px, calc(var(--lv) - var(--dv))) 0 round 6px); } }
}
.seq--live .seq-ask { bottom: var(--under); }
.seq--live .hero-words { bottom: calc(clamp(24px, 3.4vw, 44px) + var(--under)); }
@media (max-width: 900px) { .seq--live .hero-words { bottom: calc(26px + var(--under)); } }
.seq--live .seq-shade { background: linear-gradient(to top, rgba(8, 7, 6, .8) var(--under), rgba(8, 7, 6, .15) calc(var(--under) + (100% - var(--under)) * .42), rgba(8, 7, 6, 0) calc(var(--under) + (100% - var(--under)) * .66)); }

/* ---- REVIEW5b (11 Nov): the still picture under the canvas is placed by seq-next.js exactly where the canvas draws
   the picture (size()), at every screen size, so the hand-over from one to the other shows nothing. No CSS needed. ---- */

/* ---- REVIEW5c (11 Nov): fast scrolls. ----
   The question's word and its line are set by seq-next.js from the scroll's position, in step with the picture behind
   them, so they carry no timers of their own. */
.seq--live .seq-w em, .seq--live .seq-a p { transition: none; }
/* A section's fade is as long as the scroll is slow (--rv, set when it arrives: 1 at reading speed, 0 in a fast scroll). */
.rv { transition: opacity calc(.7s * var(--rv, 1)) ease, transform calc(1s * var(--rv, 1)) var(--spring); }
.rv[data-d="1"] { transition-delay: calc(.07s * var(--rv, 1)); } .rv[data-d="2"] { transition-delay: calc(.14s * var(--rv, 1)); } .rv[data-d="3"] { transition-delay: calc(.21s * var(--rv, 1)); }
@media (prefers-reduced-motion: reduce) { .rv { transition: none; } }
/* REVIEW13: the foot is one row of three places on every screen: the address on the left, LinkedIn and X on the exact centre of the page,
   the copyright line on the right. It never takes a second row. More links can be added outward from the centre. */
footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0 12px; }
footer .f, footer .f-soc { flex-wrap: nowrap; white-space: nowrap; }
footer .f-soc { display: flex; align-items: center; gap: 0 24px; }
footer > span { justify-self: end; white-space: nowrap; }
footer .f-x { min-width: 44px; justify-content: center; margin: 0 -18px; }      /* the letter is 8 px wide: a 44 px tap area centred on it, taking no room in the row */
@media (max-width: 389px) {      /* narrow phones: the links sit centred in the room left between the two ends, a little closer together */
  footer { grid-template-columns: auto 1fr auto; gap: 0; }
  footer .f-soc { justify-self: center; gap: 0 16px; }
  footer .f-x { justify-content: flex-start; margin: 0 -36px 0 0; }      /* the tap area runs to the right of the letter, clear of LinkedIn's */
}
@media (max-width: 359px) { footer { font-size: 12px; } footer .f-soc { gap: 0 12px; } }      /* the narrowest phones: slightly smaller type */
@media (max-width: 305px) { footer { font-size: 11px; } footer .f-soc { gap: 0 10px; } }      /* a folded phone's cover */
/* REVIEW14: four colour picks. 2A: the bar a little more solid, so it greys less over a dark part. */
.nav { background: color-mix(in srgb, var(--paper) 92%, transparent); }
/* 3A: on the dark panel the focus ring is the bright gold in both settings; a focused menu link shows at full strength */
.seq-stage :focus-visible { outline-color: #e0bd62; }
.nav .nav-links a:focus-visible { opacity: 1; }
/* 5A: the dark conversation box gets the faint line the dark cards have, so it has an edge over the dimmed page */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .nx-talk { box-shadow: inset 0 0 0 1px rgba(243, 238, 230, .09), 0 30px 80px -20px rgba(0, 0, 0, .5); } }
:root[data-theme="dark"] .nx-talk { box-shadow: inset 0 0 0 1px rgba(243, 238, 230, .09), 0 30px 80px -20px rgba(0, 0, 0, .5); }
/* REVIEW16: for now the three questions stand without their small lines. The lines stay in the markup, not shown:
   .seq-a in the scroll, .ask-a in the plain list. Take this rule out to bring them back. */
.seq-a, .seq-list .ask-a { display: none; }
.seq-list .ask-line { margin-bottom: clamp(18px, 3vw, 36px); }      /* the plain list kept its air through those lines; give it to the questions */
/* the hero's one line stays one line on the narrowest phones */
@media (max-width: 345px) { .hero-words .hero-side p { font-size: 14.5px; } }
/* REVIEW17: the hero's words start on the same line as the big words in every room below (the rooms' own side measure) */
.hero-words, .seq--live .hero-words { left: clamp(24px, 5vw, 72px); right: clamp(24px, 5vw, 72px); }
/* and where headline, gap and small line share one row (901 px up) the headline is never too large for them to fit:
   below 1133 px it eases down, above it the size is unchanged */
@media (min-width: 901px) { .hero-line { font-size: clamp(44px, min(7vw, calc(10vw - 34px)), 104px); } }
/* REVIEW18: sizes that do one job are one size. Card titles share the rooms' measure; every paragraph is 17 px */
.nx-soon h3 { font-size: clamp(26px, 2.5vw, 38px); }
.nx-walk, .nx-end-say p { font-size: 17px; }
/* at 17 px the walk-away line left one word alone on its last line on some screens */
.nx-walk { text-wrap: pretty; }
/* and where a section is fitted to one screen, its three titles share one measure (two could reach 72 px, one 68) */
@media (min-width: 1081px) and (min-height: 600px) { .nx-do .nx-h, .nx-later .nx-h { font-size: clamp(30px, min(4.4vw, 8svh), 68px); } }
/* REVIEW19: selected words take the page's gold, not the browser's blue */
::selection { background: #f3e6a8; color: #0f1c14; }
/* REVIEW19: a printed copy shows the whole page: nothing waits for a scroll, the hero is one still picture, rooms keep their colours */
@media print {
  @page { margin: 10mm; }
  html, body { background: #fff; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .rv { opacity: 1 !important; transform: none !important; transition: none !important; }
  .nav { position: static; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .nav .nav-links, .nav .nav-side, .seq-gl, .seq-ask, .nx-theme, dialog { display: none !important; }
  .seq, .seq--live { height: auto !important; }
  .seq-stage, .seq--live .seq-stage { position: relative !important; top: 0 !important; height: 420px !important; }
  .nx-do, .nx-later, .nx-keep, .nx-whys, .nx-end { min-height: 0 !important; }
  .nx-room, .nx-soon, .nx-why, .nx-keep, .nx-whys, .nx-end, .nx-first, footer { break-inside: avoid; }
  .nx-h, .nx-later-head { break-after: avoid; }
}
/* REVIEW20: a link for keyboard users that jumps past the top bar; it shows only while it has the keyboard */
.skip { position: absolute; left: 12px; top: -64px; z-index: 60; display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 15px; font-weight: 500; text-decoration: none; }
.skip:focus { top: 8px; }
/* REVIEW20: a printed copy also shows the three questions, as plain lines under the picture */
@media print { .seq--live .seq-list, .seq-list { position: static !important; width: auto !important; height: auto !important; overflow: visible !important; clip: auto !important; white-space: normal !important; padding: 18px 0 6px !important; } }
/* REVIEW21: the opening is set in the page's own face throughout (its small line and button were Inter Tight) */
.seq { font-family: 'Satoshi', 'Inter Tight', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; }
/* the small line is 7 px wider in this face, so where it shares a row with the headline the headline gives 1 px (REVIEW17's rule, one less) */
@media (min-width: 901px) { .hero-line { font-size: clamp(44px, min(7vw, calc(10vw - 35px)), 104px); } }
/* REVIEW21: the closing line on the last screen of the conversation */
.talk-done .talk-final { margin-top: -4px; }
/* REVIEW22: the quiet line that says what a step still needs, and the one-line box under "Something else" */
.talk-why { min-height: 1.45em; margin-top: 10px; font-size: 14.5px; line-height: 1.45; text-align: right; }
.talk-else { margin-top: 10px; }