/* ============================================================
   RETOLD
   Palette and type are locked. See the vault:
   01 Brand/Visual Identity.md

   Three colours only. No pillar-box red, ever.
   Craft rules: film grain, negative space, no gradients,
   no drop shadows. Nothing below may break those.

   Canela is the type system, display and body both. The Fraunces
   and Inter stand-ins are gone.

   ── Light ground ──
   The page runs Clotted Cream with Harbour Navy type, which the
   spec sanctions directly ("Harbour Navy ... type on cream").

   One consequence, measured not guessed: Overcast on Clotted Cream
   is 1.37:1. That is illegible, so Overcast cannot carry text on
   this ground. It is demoted to rules and dividers only. Where the
   design needs quiet text, it uses Harbour Navy at 70%, which
   measures 5.14:1 and clears AA.
   ============================================================ */

/* ── Canela ───────────────────────────────────────────────────
   Canela is now the whole type system, display and body both.

   Two cuts of one family, which is the point of the collection:
     Canela        display. Wordmark, headlines, big statements.
     Canela Text   body. Drawn for small sizes, with a larger
                   x-height and looser fit so it holds up at 16px
                   where the display cut would tighten and close in.

   Canela Deck and Canela Condensed are in the collection but are
   not used here. Deck is for mid sizes, Condensed for tight
   measures. Neither has a job on this page yet.

   LICENCE WARNING: these are the -Trial files. See README. They are
   fine for looking at locally and NOT licensed for retold.uk. */

@font-face {
  font-family: "Canela";
  src: url("/fonts/Canela-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Canela";
  src: url("/fonts/Canela-RegularItalic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Canela";
  src: url("/fonts/Canela-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Canela Text";
  src: url("/fonts/CanelaText-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Canela Text";
  src: url("/fonts/CanelaText-RegularItalic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Canela Text";
  src: url("/fonts/CanelaText-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* The three locked colours */
  --cream: #F5EFE7;   /* Clotted Cream. The ground */
  --sky:   #C9CFD6;   /* Overcast. Rules and dividers only on this ground */
  --navy:  #1B2A44;   /* Harbour Navy. All type */

  /* Derived from Harbour Navy. Not new colours, just the one
     colour at lower strength over the cream ground. */
  --navy-quiet: rgba(27, 42, 68, 0.70);  /* 5.14:1, passes AA */
  --navy-faint: rgba(27, 42, 68, 0.55);  /* 3.34:1, large text and UI only */
  --rule:       rgba(27, 42, 68, 0.14);

  --display: "Canela", Georgia, "Times New Roman", serif;
  --body: "Canela Text", Georgia, "Times New Roman", serif;

  --measure: 34rem;
  --gutter: clamp(1.5rem, 5vw, 5rem);
  --section-y: clamp(5rem, 14vh, 11rem);
  --header-h: 4.5rem;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--navy);
  font-family: var(--body);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

p { margin: 0; }
strong { font-weight: 600; }

a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 0.1em;
}
a:hover, a:focus-visible { border-bottom-width: 2px; }

:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 4px;
}

.wrap {
  width: 100%;
  max-width: 68rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.hidden { position: absolute; left: -9999px; }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--navy);
  color: var(--cream);
  padding: 0.75rem 1.25rem;
  border: 0;
  z-index: 200;
}
.skip:focus { left: 0; }

/* Anchored sections must clear the sticky header. */
[id] { scroll-margin-top: calc(var(--header-h) + 1.5rem); }

/* ── Film grain ───────────────────────────────────────────
   A craft rule, not decoration. Noise only, never a gradient.
   Multiply on a light ground, which reads as paper rather than
   the haze that overlay gives on dark. */
.grain {
  position: fixed;
  inset: -50%;
  z-index: 150;
  pointer-events: none;
  opacity: 0.085;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: reduce) {
  .grain { opacity: 0.06; }
}

/* ── Header ───────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 120;
  background: var(--cream);
  border-bottom: 1px solid var(--rule);
}
/* Wordmark hard left, swan hard right. No wrap, because both items
   are small and a wrapped header would jump the layout on narrow
   screens. */
.site-header__inner {
  width: 100%;
  max-width: 68rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: nowrap;
}

/* All caps, bold, upright.
   To go back to the italic cut, swap the two lines marked below:
     font-style: italic;  font-weight: 400;
   Bold upright caps need less tracking than the italic did, hence
   0.04em rather than 0.06em. */
.site-logo {
  font-family: var(--display);
  font-style: normal;   /* was italic */
  font-weight: 700;     /* was 400 */
  font-size: 1.4rem;
  letter-spacing: 0.04em;
  color: var(--navy);
  border-bottom: 0;
  padding-bottom: 0;
  line-height: 1;
}
.site-logo:hover, .site-logo:focus-visible { border-bottom: 0; }

/* ── The swan ─────────────────────────────────────────────
   The menu button. A filled silhouette, sitting opposite the
   wordmark so the header reads as two marks and nothing else. */
.swan {
  appearance: none;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0.4rem;
  margin: 0;
  cursor: pointer;
  color: var(--navy-quiet);
  line-height: 0;
  transition: color 0.35s ease;
}
.swan:hover,
.swan.is-open { color: var(--navy); }

/* The mark is a CSS mask, not inline SVG, so the geometry lives in
   exactly one file. Swapping the swan means replacing
   /assets/swan.svg and touching nothing else. Colour still comes
   from the button, so hover and open states keep working. */
/* The swan is 192 x 168, so the box carries that ratio rather than
   forcing it into a square and leaving it floating in dead space. */
.swan__icon {
  display: block;
  width: 2.6rem;
  aspect-ratio: 192 / 168;
  background-color: currentColor;
  -webkit-mask: url("/assets/swan.svg") center / contain no-repeat;
  mask: url("/assets/swan.svg") center / contain no-repeat;
}

/* Open state: the swan settles slightly, the way one does on water.
   Movement only, no colour change beyond the hover already set. */
.swan__icon { transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1); }
.swan.is-open .swan__icon { transform: translateY(2px) scale(0.94); }

@media (prefers-reduced-motion: reduce) {
  .swan__icon { transition: none; }
  .swan.is-open .swan__icon { transform: none; }
}

/* ── Menu panel ───────────────────────────────────────────
   Sits below the header, so the wordmark and the swan hold
   their position and only the ground beneath them changes. */
.menu-panel {
  position: fixed;
  top: var(--header-h);
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 110;
  background: var(--cream);
  padding: clamp(2.5rem, 9vh, 6rem) var(--gutter) 3rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow-y: auto;
}

/* No JS means no toggle, so the panel must not cover the page.
   It collapses into ordinary markup instead. */
:root:not(.js) .menu-panel {
  position: static;
  padding-block: 1.5rem;
  border-bottom: 1px solid var(--rule);
}

/* display:flex above beats the UA rule for [hidden], so it has to be
   restated here or the panel stays on screen when JS hides it. */
.menu-panel[hidden] { display: none; }

/* Invisible is not the same as gone. Without pointer-events the
   faded panel would still swallow every click on the page. */
.js .menu-panel {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.js .menu-panel.is-open {
  opacity: 1;
  pointer-events: auto;
}

.menu-panel__nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 68rem;
  margin-inline: auto;
  width: 100%;
}
.menu-panel__nav li + li { margin-top: 0.35rem; }

.menu-panel__nav a {
  display: inline-block;
  font-family: var(--display);
  font-size: clamp(2rem, 7vw, 3.75rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--navy);
  border-bottom: 0;
  padding-bottom: 0;
}
.menu-panel__nav a:hover,
.menu-panel__nav a:focus-visible {
  font-style: italic;
  border-bottom: 0;
}

/* Each item lifts in behind the panel fade. */
.js .menu-panel__nav li {
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.js .menu-panel.is-open .menu-panel__nav li { opacity: 1; transform: none; }
.js .menu-panel.is-open .menu-panel__nav li:nth-child(1) { transition-delay: 90ms; }
.js .menu-panel.is-open .menu-panel__nav li:nth-child(2) { transition-delay: 160ms; }
.js .menu-panel.is-open .menu-panel__nav li:nth-child(3) { transition-delay: 230ms; }
.js .menu-panel.is-open .menu-panel__nav li:nth-child(4) { transition-delay: 300ms; }

.menu-panel__foot {
  max-width: 68rem;
  margin-inline: auto;
  width: 100%;
  margin-top: 3rem;
  font-family: var(--display);
  font-style: italic;
  font-size: 1rem;
  color: var(--navy-quiet);
}

/* Hold the page still while the panel is up. */
body.menu-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .js .menu-panel,
  .js .menu-panel__nav li {
    transition: none;
  }
}

@media (max-width: 40rem) {
  .site-header__inner { padding-block: 0.85rem; }
  .site-logo { font-size: 1.2rem; }
  .swan__icon { width: 1.85rem; height: 1.85rem; }
}

/* ── Shared type ──────────────────────────────────────────── */
.eyebrow {
  font-family: var(--body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--navy-quiet);
  margin: 0 0 2.5rem;
}

/* ── Hero ─────────────────────────────────────────────────
   The wordmark and nothing else. */
.hero {
  min-height: calc(100svh - var(--header-h));
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: clamp(3rem, 10vh, 7rem);
  padding-inline: var(--gutter);
  border-bottom: 1px solid var(--rule);
}
.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* Bold here. The loud register of the mark.
   The flip device survives on cream by shifting from
   colour contrast to weight-of-ink contrast: RE at full
   strength, TOLD at 70%. The faded past, the fresh retelling. */
.wordmark {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(3.75rem, 19vw, 15rem);
  font-weight: 700;
  font-style: normal;
  line-height: 0.86;
  letter-spacing: -0.025em;
  text-align: center;
}
.wordmark__re   { color: var(--navy); }
.wordmark__told { color: var(--navy-quiet); }

/* The one line under the wordmark. Small and tracked, so the
   wordmark keeps the whole voice and this only underwrites it. */
.hero__line {
  margin-top: clamp(1.5rem, 4vh, 2.5rem);
  text-align: center;
  font-size: clamp(0.7rem, 1.6vw, 0.85rem);
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--navy-quiet);
  max-width: 30ch;
  line-height: 1.7;
}

/* ── Scroll cue ───────────────────────────────────────────── */
.scroll-cue {
  margin-top: clamp(3rem, 9vh, 6rem);
  height: 3.5rem;
}
.scroll-cue__line {
  display: block;
  width: 1px;
  height: 100%;
  background: var(--navy-faint);
  transform-origin: top center;
  animation: cue 2.8s ease-in-out infinite;
}
@keyframes cue {
  0%,
  100% { transform: scaleY(0); opacity: 0; }
  40%,
  65%  { transform: scaleY(1); opacity: 1; }
}

/* ── Thanks page ──────────────────────────────────────────── */
.thanks {
  margin-top: clamp(2.5rem, 7vh, 4rem);
  text-align: center;
  max-width: 34rem;
}
.thanks__line {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.35rem, 3.4vw, 2.2rem);
  line-height: 1.3;
}
.thanks__note {
  margin-top: 1rem;
  color: var(--navy-quiet);
  font-size: 0.98rem;
}
.thanks__back {
  margin-top: 2rem;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
}

/* ── Manifesto ────────────────────────────────────────────── */
.manifesto { padding-block: var(--section-y); }
.manifesto__body {
  max-width: 42rem;
  font-family: var(--display);
  font-size: clamp(1.35rem, 3vw, 2.05rem);
  line-height: 1.42;
  font-weight: 400;
}
.manifesto__body p + p { margin-top: 1.1em; }
.manifesto__turn {
  font-style: italic;
  font-weight: 600;
}
.manifesto__sign {
  font-style: italic;
  font-size: 0.62em;
  color: var(--navy-quiet);
  margin-top: 2em !important;
}

/* ── The question ─────────────────────────────────────────── */
.question {
  padding-block: var(--section-y);
  border-top: 1px solid var(--rule);
}
.question__text {
  font-family: var(--display);
  font-size: clamp(2rem, 6.5vw, 4.5rem);
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: -0.015em;
  max-width: 18ch;
}
.question__note {
  margin-top: 2.25rem;
  max-width: var(--measure);
  color: var(--navy-quiet);
}

/* ── Same Table ───────────────────────────────────────────── */
.series {
  padding-block: var(--section-y);
  border-top: 1px solid var(--rule);
}
.series__title {
  font-family: var(--display);
  font-size: clamp(2.5rem, 9vw, 6rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}
.series__lede {
  margin-top: 1.75rem;
  max-width: var(--measure);
  font-size: 1.05rem;
}
.series__q {
  margin: 2.5rem 0 0;
  padding-left: 1.5rem;
  border-left: 2px solid var(--navy);
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.3rem, 3.4vw, 2rem);
  line-height: 1.35;
  max-width: 26ch;
}
.series__note {
  margin-top: 2.5rem;
  max-width: var(--measure);
  font-size: 0.95rem;
  color: var(--navy-quiet);
}

/* ── Pillars ──────────────────────────────────────────────── */
.pillars {
  padding-block: var(--section-y);
  border-top: 1px solid var(--rule);
}
.pillars__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0;
  border-top: 1px solid var(--rule);
}
.pillars__list li {
  font-family: var(--display);
  font-size: clamp(1.35rem, 3vw, 1.9rem);
  font-weight: 400;
  padding: 1.5rem 0.5rem 1.5rem 0;
  border-bottom: 1px solid var(--rule);
}

/* ── Signup ───────────────────────────────────────────────── */
.signup {
  padding-block: var(--section-y);
  border-top: 1px solid var(--rule);
}
.signup__lede {
  max-width: var(--measure);
  font-family: var(--display);
  font-size: clamp(1.2rem, 2.6vw, 1.6rem);
  line-height: 1.45;
}
.signup__form { margin-top: 2.5rem; max-width: 38rem; }
.signup__label {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--navy-quiet);
  margin-bottom: 0.6rem;
}
.signup__row { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.signup__input {
  flex: 1 1 16rem;
  font-family: var(--body);
  font-size: 1rem;
  color: var(--navy);
  background: transparent;
  border: 1px solid rgba(27, 42, 68, 0.35);
  border-radius: 0;
  padding: 0.9rem 1rem;
}
.signup__input::placeholder { color: var(--navy-faint); }
.signup__input:focus { border-color: var(--navy); outline: none; }
.signup__button {
  font-family: var(--body);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cream);
  background: var(--navy);
  border: 1px solid var(--navy);
  border-radius: 0;
  padding: 0.9rem 1.6rem;
  cursor: pointer;
}
.signup__button:hover { background: transparent; color: var(--navy); }
.signup__small {
  margin-top: 1rem;
  font-size: 0.82rem;
  color: var(--navy-quiet);
  max-width: 32rem;
}

/* ── Footer ───────────────────────────────────────────────── */
.footer {
  padding-top: var(--section-y);
  padding-bottom: 3rem;
  border-top: 1px solid var(--rule);
}
.footer__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 2.75rem;
  padding-bottom: 3.5rem;
  border-bottom: 1px solid var(--rule);
}
.footer__label {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--navy-quiet);
  margin-bottom: 0.85rem;
}
.footer__text { font-size: 0.92rem; color: var(--navy-quiet); max-width: 24rem; }

.footer__base {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 2.5rem;
}
.footer__mark {
  font-family: var(--display);
  font-style: italic;
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--navy);
}
.footer__legal { font-size: 0.8rem; color: var(--navy-quiet); }

@media (max-width: 34rem) {
  .signup__button { width: 100%; }
}

/* ============================================================
   Scroll reveal

   Two movements, and no more. Restraint is the point: this is a
   documentary brand, not a showreel.

     [data-reveal="right"]  slides in from the right
     [data-reveal="up"]     rises south to north

   Opacity and transform only, so every reveal stays on the
   compositor and never triggers layout. No gradients and no
   shadows are introduced here, per the locked craft rules.

   Without JS, .js is never added and every rule below is inert,
   so the page renders complete and static. That is the fallback,
   not a broken state.
   ============================================================ */

.js [data-reveal] {
  opacity: 0;
  transition-property: opacity, transform;
  transition-duration: var(--dur, 1.15s);
  transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: var(--d, 0ms);
}

.js [data-reveal="up"] {
  transform: translate3d(0, var(--travel, 2.75rem), 0);
}

.js [data-reveal="right"] {
  transform: translate3d(var(--travel, 7vw), 0, 0);
}

.js [data-reveal].is-in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Transforms do not apply to inline boxes, so these two spans
   must be inline-block or nothing moves at all. */
.wordmark__re,
.wordmark__told {
  display: inline-block;
  will-change: opacity, transform;
}

/* TOLD lands first. RE follows and settles in front of it. */
.js .wordmark__told { --travel: 15vw; --dur: 1.9s; }
.js .wordmark__re   { --travel: 21vw; --dur: 1.9s; --d: 260ms; }

.js .hero__line { --dur: 1.4s; --d: 1500ms; }
.js .scroll-cue { --dur: 1s;   --d: 2300ms; }

/* Display type travels further, which reads as weight. */
.js .question__text { --travel: 3.5rem; --dur: 1.35s; }
.js .series__title  { --travel: 10vw;   --dur: 1.5s; }
.js .footer__mark   { --travel: 5vw; }

/* ── Reduced motion ───────────────────────────────────────────
   Not a downgrade. Everything is present and legible, it simply
   arrives without travelling. */
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal],
  .js [data-reveal].is-in {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .scroll-cue__line {
    animation: none;
    opacity: 0.45;
  }
}