/*
  ChairTalk website styles, draft 1 (25 Oct 2026).

  Plain-English guide to this file:
  1. Colours and sizes are set once at the top, as named values (the "tokens").
  2. The page is laid out on a 12-column grid, 1280 px wide at most.
  3. Red is used for exactly two jobs: the questions and the buttons or links.
  4. Everything else is black type on white or warm off-white paper,
     with one near-black section for the film.
*/

/* ---------- 1. Tokens: the brand's colours and sizes ---------- */
:root {
  --red: #E62B1E;           /* brand red: the chair-question band and large type on dark */
  --red-ink: #D42418;       /* the same red, a touch deeper, for text and buttons on light
                               backgrounds so white-on-red and red-on-white both pass the
                               4.5:1 readability check */
  --red-deep: #B81F15;      /* a darker red for hover states */
  --ink: #1A1A1A;           /* body text on light backgrounds */
  --ink-soft: #4A4744;      /* quieter text, still readable (contrast 7:1 on white) */
  --paper: #FFFFFF;         /* the main white ground */
  --paper-warm: #F6F3EE;    /* the warm off-white for quieter sections */
  --rule: #D9D4CC;          /* 1 px rules on light backgrounds */
  --stage: #121212;         /* the near-black section and the footer */
  --stage-text: #F3F3F3;    /* text on the near-black */
  --stage-soft: #B9B5AF;    /* quieter text on the near-black */
  --stage-rule: #2E2E2E;    /* rules on the near-black */

  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --wrap: 1280px;           /* widest the content gets */
  --gutter: 24px;           /* side padding on small screens, and the gap between columns */
  --space: clamp(64px, 9vw, 128px);  /* vertical padding of each section */
}

/* ---------- 2. Base: reset, type, and the browser's own surfaces ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: clamp(17px, 1.05vw + 12px, 18px);
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  text-rendering: optimizeLegibility;
}

/* Selected text and the keyboard focus ring carry the brand instead of browser defaults */
::selection { background: var(--red-ink); color: #fff; }
:focus-visible { outline: 3px solid var(--red-ink); outline-offset: 4px; border-radius: 2px; }

img, video { display: block; max-width: 100%; height: auto; }

h1, h2, h3, p, dl, dd, ol, ul, figure, blockquote { margin: 0; }
ol, ul { padding: 0; list-style: none; }

/* The content column: centred, with side padding on small screens */
.wrap {
  width: min(100% - 2 * var(--gutter), var(--wrap));
  margin-inline: auto;
}

/* The "skip to content" link: hidden until a keyboard user tabs to it */
.skip {
  position: absolute; left: var(--gutter); top: -100px;
  padding: 10px 14px; background: var(--red-ink); color: #fff;
  font-weight: 700; text-decoration: none; z-index: 10;
}
.skip:focus { top: 12px; }

/* ---------- 3. Links and buttons ---------- */

/* Text links: ink with a red underline that sits a little below the word */
.textlink, .qa__a a, .ledger__first a {
  color: var(--ink);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--red-ink);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  transition: text-underline-offset 160ms ease-out, color 160ms ease-out;
}
.textlink:hover, .qa__a a:hover, .ledger__first a:hover {
  color: var(--red-ink);
  text-underline-offset: 6px;
}
.muted { color: var(--ink-soft); font-weight: 400; }

/* The filled red button, for the one primary action */
.button {
  display: inline-block;
  padding: 14px 22px;
  background: var(--red-ink);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  text-decoration: none;
  border: 2px solid var(--red-ink);
  border-radius: 2px;
  transition: background-color 160ms ease-out, border-color 160ms ease-out, transform 160ms ease-out;
}
.button:hover { background: var(--red-deep); border-color: var(--red-deep); }
.button:active { transform: translateY(1px); }

/* The outlined button, for the secondary actions */
.button--outline { background: transparent; color: var(--red-ink); }
.button--outline:hover { background: var(--red-ink); color: #fff; }

/* ---------- 4. Masthead ---------- */
.masthead {
  border-bottom: 1px solid var(--ink);
  background: var(--paper);
}
.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gutter);
  padding-block: 18px;
}
.masthead__logo img { width: clamp(120px, 12vw, 156px); height: auto; }
.masthead__nav { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.masthead__nav a {
  color: var(--ink);
  font-weight: 500;
  font-size: 0.95rem;
  text-decoration: none;
  padding-block: 4px;
  border-bottom: 2px solid transparent;
  transition: border-color 160ms ease-out, color 160ms ease-out;
}
.masthead__nav a:hover { border-bottom-color: var(--red-ink); color: var(--red-ink); }

/* ---------- 5. Question and answer pairs ---------- */
.qa { max-width: 68ch; }
.qa + .qa { margin-top: 32px; }

/* The question: red, bold, with a red "Q" in the margin */
.qa__q {
  position: relative;
  padding-left: 2.2em;
  color: var(--red-ink);
  font-weight: 800;
  font-size: clamp(1.25rem, 1.1vw + 0.9rem, 1.6rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
}
.qa__q::before {
  content: "Q";
  position: absolute; left: 0; top: 0;
  font-weight: 800;
}

/* The answer: ink, with a thin "A" in the margin */
.qa__a {
  position: relative;
  padding-left: 2.2em;
  margin-top: 12px;
  max-width: 62ch;
}
.qa__a::before {
  content: "A";
  position: absolute; left: 0; top: 0;
  font-weight: 800;
  color: var(--ink-soft);
}

/* The first Q&A of a section is a little larger */
.qa--lead .qa__a { font-size: 1.05em; }

/* On the near-black spread, the question is the brighter brand red and the answer is light */
.qa--dark .qa__q { color: var(--red); }
.qa--dark .qa__a { color: var(--stage-text); }
.qa--dark .qa__a::before { color: var(--stage-soft); }

/* ---------- 6. The opening ---------- */
.feature {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gutter);
  row-gap: 40px;
  padding-block: clamp(56px, 8vw, 112px) var(--space);
}
.feature__headline {
  grid-column: 1 / -1;
  font-weight: 800;
  font-size: clamp(2.6rem, 7.2vw, 6rem);   /* big, but never over 6rem */
  line-height: 0.98;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.feature__standfirst {
  grid-column: 1 / span 12;
  font-size: clamp(1.15rem, 1.4vw + 0.6rem, 1.6rem);
  line-height: 1.35;
  letter-spacing: -0.01em;
  max-width: 34ch;
  color: var(--ink);
}
.feature__qa {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gutter);
  row-gap: 32px;
  padding-top: 40px;
  border-top: 1px solid var(--ink);
}
.feature__qa .qa { grid-column: 1 / -1; }
.feature__actions {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 18px 28px;
}

/* On wider screens the headline and standfirst sit on the grid properly */
@media (min-width: 900px) {
  .feature__headline { grid-column: 1 / span 11; }
  .feature__standfirst { grid-column: 1 / span 7; }
  .feature__qa .qa { grid-column: 1 / span 7; }
  .feature__actions {
    grid-column: 9 / span 4;
    align-self: start;
    flex-direction: column; align-items: flex-start;
  }
}

/* ---------- 7. Sections ("spreads", like a magazine spread) ---------- */
.spread { padding-block: var(--space); }
.spread--paper { background: var(--paper-warm); }
.spread--dark { background: var(--stage); color: var(--stage-text); }

/* Two Q&As side by side on wide screens */
.columns { display: grid; gap: 40px var(--gutter); }
@media (min-width: 900px) {
  .columns { grid-template-columns: repeat(12, 1fr); }
  .columns > .qa { grid-column: span 6; margin-top: 0; }
}

/* ---------- 8. The ledger: Meet, Support, Train ---------- */
.ledger { margin-top: 56px; border-top: 1px solid var(--ink); }
.ledger__row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gutter);
  row-gap: 14px;
  padding-block: 36px;
  border-bottom: 1px solid var(--rule);
}
.ledger__row:last-child { border-bottom: 1px solid var(--ink); }
.ledger__word {
  grid-column: 1 / -1;
  font-weight: 800;
  font-size: clamp(2.2rem, 4.5vw, 4rem);
  line-height: 1;
  letter-spacing: -0.03em;
}
.ledger__truth { grid-column: 1 / -1; max-width: 48ch; font-size: 1.1em; line-height: 1.45; }
.ledger__first { grid-column: 1 / -1; color: var(--ink-soft); max-width: 48ch; }
.ledger__label { color: var(--ink); font-weight: 700; }
/* On the ledger, more space above each big word than below it */
.ledger__word { padding-top: 4px; }

@media (min-width: 900px) {
  .ledger__word { grid-column: 1 / span 3; }
  .ledger__truth { grid-column: 4 / span 5; }
  .ledger__first { grid-column: 9 / span 4; }
}

/* ---------- 9. Series one: the six seats ---------- */
.series__title {
  margin-top: 64px;
  font-weight: 800;
  font-size: clamp(1.4rem, 2vw, 2rem);
  letter-spacing: -0.02em;
}
.series {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--ink);
  border-left: 1px solid var(--ink);
}
@media (min-width: 640px) { .series { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .series { grid-template-columns: repeat(6, 1fr); } }

.seat {
  min-height: 140px;
  padding: 16px;
  border-right: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  display: flex; flex-direction: column; justify-content: space-between;
  color: var(--ink-soft);
}
.seat__number { font-weight: 800; font-size: 1.1rem; color: var(--ink); letter-spacing: -0.02em; }
.seat__text { font-size: 0.95rem; }

/* The open seat is the one thing in the strip you can act on */
.seat--open .seat__text {
  color: var(--red-ink);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  transition: text-underline-offset 160ms ease-out;
}
.seat--open .seat__text:hover { text-underline-offset: 6px; }

/* ---------- 10. The chair question: the red band ---------- */
.band {
  background: var(--red);
  color: #fff;
  padding-block: var(--space);
}
/* Text in the band is white and set large and bold, so it stays readable on the red */
.band__lead { font-weight: 700; font-size: 1.25rem; }
.band__quote { margin-top: 20px; }
.band__quote p {
  font-weight: 800;
  font-size: clamp(2.2rem, 6.4vw, 5.6rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: balance;
  max-width: 14ch;
}
.band__note { margin-top: 28px; font-size: 1.2rem; font-weight: 700; color: #fff; max-width: 40ch; }

/* The one authored motion on the page: an underline that draws itself in once.
   script.js adds the class "is-drawn" when the band scrolls into view. */
.draw {
  background-image: linear-gradient(#fff, #fff);
  background-repeat: no-repeat;
  background-size: 0% 0.08em;
  background-position: 0 92%;
  transition: background-size 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
.draw.is-drawn { background-size: 100% 0.08em; }

/* If someone has asked their device for less motion, the underline is simply there */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .draw { transition: none; background-size: 100% 0.08em; }
  .button, .textlink, .masthead__nav a, .seat--open .seat__text { transition: none; }
}

/* ---------- 11. Huddle films: the dark spread ---------- */
.films { display: grid; gap: 40px var(--gutter); }
@media (min-width: 1024px) {
  .films { grid-template-columns: repeat(12, 1fr); align-items: start; }
  .films__text { grid-column: 1 / span 5; }
  .films__player { grid-column: 6 / span 7; }
}
.films__player video {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border: 1px solid var(--stage-rule);
}
.films__caption {
  display: flex; flex-wrap: wrap; gap: 6px 0;
  margin-top: 14px;
  color: var(--stage-soft);
  font-size: 0.95rem;
}
/* A thin red separator between the caption's parts */
.films__caption span + span::before {
  content: "";
  display: inline-block;
  width: 1px; height: 0.9em;
  margin-inline: 12px;
  background: var(--red-ink);
  vertical-align: -0.1em;
}

/* ---------- 12. Lorna ---------- */
.lorna { display: grid; gap: 40px var(--gutter); align-items: center; }
@media (min-width: 900px) {
  .lorna { grid-template-columns: repeat(12, 1fr); }
  .lorna__text { grid-column: 1 / span 7; }
  .lorna__avatar { grid-column: 9 / span 4; }
}
.lorna__avatar img { width: min(100%, 360px); margin-inline: auto; }
.lorna__avatar figcaption {
  margin-top: 12px; text-align: center;
  font-size: 0.95rem; color: var(--ink-soft);
}

/* ---------- 13. Contact ---------- */
.ways {
  margin-top: 48px;
  display: grid;
  gap: 28px var(--gutter);
  border-top: 1px solid var(--ink);
  padding-top: 32px;
}
@media (min-width: 900px) { .ways { grid-template-columns: repeat(3, 1fr); } }
.ways li { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.ways__why { color: var(--ink-soft); font-size: 0.98rem; max-width: 30ch; }
.contact__address { margin-top: 40px; font-size: 1.1rem; }

/* ---------- 14. Footer ---------- */
.footer {
  background: var(--stage);
  color: var(--stage-text);
  padding-block: 56px 40px;
  border-top: 1px solid var(--red);
}
.footer__inner { display: grid; gap: 18px; }
.footer__logo { width: clamp(140px, 16vw, 200px); }
.footer__line { font-weight: 700; font-size: 1.1rem; }
.footer__small { color: var(--stage-soft); font-size: 0.9rem; }