/* Time to Read, the public website: what every page shares.
 *
 * The fonts, the seven surfaces as tokens, the responsive helpers the signup,
 * invite and legal pages lean on, the buttons, the language picker, the FAQ
 * rows and the cookie bar. The home page's own layout is assets/home.css,
 * inlined after this.
 *
 * Until 13 October 2026 this file also carried the old home page's rules, keyed
 * on its section ids (#top, #pick, #clubs) with !important. They went with that
 * page: the new one reuses those ids as anchors, and a padding rule written for
 * a different layout was quietly shaping it.
 *
 * font-optical-sizing and font-synthesis are switched off globally. CLAUDE.md is
 * explicit about it: Inter's optical-size axis otherwise resolves differently
 * between surfaces and the weight visibly shifts.
 */

/* ---------------------------------------------------------------- fonts */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/assets/fonts/inter-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';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/inter-italic-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';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/inter-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/playfair-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: 'Playfair Display';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/playfair-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url('/assets/fonts/playfair-italic-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: 'Playfair Display';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url('/assets/fonts/playfair-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ------------------------------------------------------------- surfaces */

:root {
  --bordo: #4a0508;
  --night: #000000;
  --vanilla: #c5b3a0;
  --accent: #f9e532;
  --mist: #eaeaea;
  --rain: #a7a9ac;
  --paper: #ffffff;

  --serif: 'Playfair Display', Georgia, serif;
  --sans: Inter, system-ui, sans-serif;
}

/* --------------------------------------------------------------- global */

* {
  font-optical-sizing: none;
  font-synthesis: none;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

a {
  color: #000;
  text-decoration: underline;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--bordo);
}

/* Keyboard focus has to survive a page built out of anchors and pills. */
:focus-visible {
  outline: 2px solid var(--bordo);
  outline-offset: 3px;
}

.on-night :focus-visible,
.on-bordo :focus-visible {
  outline-color: var(--paper);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* The visually-hidden label. Every input on this site has one. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------- responsive, from design */
/* Lifted verbatim from Website.dc.html's <helmet>, with the two page-specific
   rules for the signup and invite pages added at the end of each block. */

@media (max-width: 900px) {
  [data-r~='wrap'] {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }
  [data-r~='grid2'],
  [data-r~='grid3'] {
    grid-template-columns: 1fr !important;
    gap: 44px !important;
  }
  /* Changed here: the design sent this back to order 0, which on a single
     column left the App Shield mock above its own heading. It reads as a
     picture of nothing until you have read the text, so on a phone the mock
     follows the paragraph instead. */
  [data-r~='unorder'] {
    order: 1 !important;
  }
  [data-r~='rowwrap'] {
    flex-wrap: wrap !important;
    gap: 20px 26px !important;
  }
  [data-r~='fluid'] {
    width: auto !important;
    max-width: 100% !important;
  }
  [data-r~='flip'] > div:first-child {
    order: 1;
  }
  [data-r~='navlinks'] a:not(:last-child) {
    display: none;
  }
  /* The logo, and only the logo: the bar also holds the flags of the language
     picker, which are images too and were being drawn forty pixels tall. */
  [data-r~='navbar'] > a > img {
    height: 40px !important;
  }
  [data-r~='h1'] {
    font-size: 38px !important;
    line-height: 1.08 !important;
  }
  [data-r~='h2'] {
    font-size: 30px !important;
    max-width: none !important;
  }
  [data-r~='foot'] {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 16px !important;
  }
  img[alt='Someone reading under a blanket'] {
    height: 280px !important;
  }
  /* Added here: the four referral steps stack rather than shrink to nothing. */
  [data-r~='grid4'] {
    grid-template-columns: 1fr 1fr !important;
    gap: 28px !important;
  }
}

@media (max-width: 560px) {
  [data-r~='grid4'] {
    grid-template-columns: 1fr !important;
  }
}

/* The one primary action per screen. Serif label on a 30px accent pill. */
.btn-primary {
  display: inline-block;
  border: 0;
  border-radius: 30px;
  padding: 16px 32px;
  background: var(--accent);
  color: #000;
  font-family: var(--serif);
  font-size: 17px;
  text-decoration: none;
  cursor: pointer;
}

.btn-primary[disabled] {
  opacity: 0.45;
  cursor: default;
}

/* Everything else is an outline or a plain link, so the accent stays singular. */
.btn-quiet {
  display: inline-block;
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 30px;
  padding: 12px 22px;
  background: transparent;
  color: #000;
  font-family: var(--serif);
  font-size: 15px;
  text-decoration: none;
  cursor: pointer;
}

.on-night .btn-quiet,
.on-bordo .btn-quiet {
  border-color: rgba(255, 255, 255, 0.45);
  color: var(--paper);
}

/* --------------------------------------------------------- referral slots */

.slots {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}

.slot {
  flex: 1;
  height: 4px;
  background: rgba(0, 0, 0, 0.14);
}

.slot.filled {
  background: #000;
}

.slot.pending {
  background: repeating-linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.45) 0 3px,
    transparent 3px 6px
  );
}

.on-bordo .slot,
.on-night .slot {
  background: rgba(255, 255, 255, 0.25);
}

.on-bordo .slot.filled,
.on-night .slot.filled {
  background: var(--paper);
}

.on-bordo .slot.pending,
.on-night .slot.pending {
  background: repeating-linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.7) 0 3px,
    transparent 3px 6px
  );
}

/* ------------------------------------------------------------------ faqs */

/* Drawers, not a wall of prose. <details> because it opens with no JavaScript,
 * answers to the keyboard and to screen readers on its own, and survives the
 * language switch that rebuilds this list. */
.faq {
  border-top: 1px solid #c5b3a0;
}
.faq summary {
  display: flex;
  align-items: center;
  gap: 20px;
  justify-content: space-between;
  padding: 20px 0;
  cursor: pointer;
  list-style: none;
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 600;
  font-size: 19px;
  line-height: 1.3;
  text-wrap: pretty;
}
/* Safari draws its own triangle unless both of these are set */
.faq summary::-webkit-details-marker { display: none; }
.faq summary::marker { content: ''; }
.faq summary:focus-visible { outline: 2px solid #000; outline-offset: 3px; }
.faq-chev {
  flex: none;
  transition: transform 220ms ease;
}
.faq[open] .faq-chev { transform: rotate(180deg); }
.faq-a {
  font-size: 15px;
  line-height: 1.65;
  color: rgba(0, 0, 0, 0.75);
  margin: 0 0 22px;
  max-width: 68ch;
}

@media (prefers-reduced-motion: reduce) {
  .faq-chev { transition: none; }
}

/* ------------------------------------------------------ language picker */
/* A pill that says which language the page is in and opens a list of them,
 * each beside its country's flag. Marvin asked for the flags on 6 October 2026,
 * and their colours are the one place this site steps outside the seven: a
 * flag redrawn in brand colours is not a flag. Everything around them is the
 * system's own. The pill and its quiet border, a paper card on a vanilla
 * hairline, mist between the rows, and no shadow under any of it.
 *
 * The pill is in each page's HTML. The list is built by site.js. */

.lang {
  position: relative;
  display: inline-flex;
}

.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 6px 10px 6px 8px;
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 30px;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 12px;
  line-height: 14px;
  letter-spacing: 0.06em;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.lang-btn:hover,
.lang-btn[aria-expanded='true'] {
  border-color: #000;
}

.on-bordo .lang-btn {
  border-color: rgba(255, 255, 255, 0.45);
}

.on-bordo .lang-btn:hover,
.on-bordo .lang-btn[aria-expanded='true'] {
  border-color: var(--paper);
}

/* A white stripe on a white pill has no edge of its own, so every flag gets
 * one. A rule, not a shadow. */
.flag {
  display: block;
  flex: none;
  box-sizing: content-box;
  width: 18px;
  height: 12px;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 2px;
}

.on-bordo .lang-btn .flag {
  border-color: rgba(255, 255, 255, 0.3);
}

.lang-chev {
  flex: none;
  transition: transform 200ms ease;
}

.lang-btn[aria-expanded='true'] .lang-chev {
  transform: rotate(180deg);
}

/* Hung from the pill's right edge, so it opens inward on a phone, where the
 * pill sits against the button at the end of the bar. */
.lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 30;
  min-width: 176px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  list-style: none;
  background: var(--paper);
  border: 1px solid var(--vanilla);
  border-radius: 12px;
  animation: lang-in 140ms ease;
}

@keyframes lang-in {
  from {
    opacity: 0;
  }
}

.lang-menu li + li {
  border-top: 1px solid var(--mist);
}

.lang-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 0 14px;
  border: 0;
  border-radius: 0;
  background: none;
  color: #000;
  font: inherit;
  font-size: 13.5px;
  letter-spacing: 0;
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.lang-opt:hover,
.lang-opt:focus-visible {
  background: var(--mist);
}

/* Inside the card, because the card clips: and bordo even on the invite
   page, where the ring is otherwise paper and this ground is paper too. */
.lang-menu .lang-opt:focus-visible {
  outline: 2px solid var(--bordo);
  outline-offset: -2px;
}

.lang-opt[aria-checked='true'] {
  font-weight: 500;
}

.lang-tick {
  flex: none;
  margin-left: auto;
  visibility: hidden;
}

.lang-opt[aria-checked='true'] .lang-tick {
  visibility: visible;
}

/* On a phone the bar holds the logo, this pill and the one button, and in
 * Dutch that button is wide: at 360 the old "NL · EN" pill already pushed it
 * three pixels off the screen. So the code steps out of sight here and the pill
 * is the flag and the chevron, which is narrower than what it replaced. It is
 * hidden the way .sr-only hides, so the pill still has its name read out. */
@media (max-width: 560px) {
  .lang-btn {
    gap: 6px;
    padding-right: 9px;
  }
  .lang-code {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lang-chev {
    transition: none;
  }
  .lang-menu {
    animation: none;
  }
}

/* ------------------------------------------------- the language, pending */

/* A reader whose language is not the one the page is baked in. prepaint.js puts
 * this class on <html> before anything paints and site.js takes it off once it
 * has written their language in, so they never watch English turn into Dutch.
 * The text is hidden rather than removed, so nothing moves when it arrives. The
 * screens are removed outright, because a lazy image that is not rendered is
 * not fetched, and that is what keeps the English photographs off a Dutch
 * reader's connection. Both come back on their own after three seconds if the
 * script never runs: prepaint.js sets that timer when it sets the class. */
.lang-pending [data-i18n],
.lang-pending [data-faqs],
.lang-pending .lang-btn {
  visibility: hidden;
}
.lang-pending img[data-shot] {
  display: none;
}

/* ------------------------------------------------------------------ misc */

[hidden] {
  display: none !important;
}

/* ------------------------------------------------------------ cookie bar */
/* Rule 6 holds here too: the accept pill is the one accent on the screen, and
 * decline is an outline of the same size beside it. No dark pattern, no
 * greyed-out No, no settings panel standing between somebody and a refusal. */

.cookiebar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  background: var(--bordo);
  color: var(--paper);
  border-top: 1px solid rgba(255, 255, 255, 0.25);
}

.cookiebar-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 22px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.cookiebar-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.2;
}

.cookiebar-body {
  margin: 8px 0 0;
  max-width: 62ch;
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.8);
}

.cookiebar-more {
  display: inline-block;
  margin-top: 10px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.8);
  text-underline-offset: 3px;
}

.cookiebar-more:hover {
  color: var(--paper);
}

.cookiebar-actions {
  flex: none;
  display: flex;
  gap: 12px;
  align-items: center;
}

.cookiebar .btn-primary,
.cookiebar .btn-quiet {
  padding: 13px 24px;
  font-size: 15px;
  white-space: nowrap;
}

.cookiebar .btn-quiet {
  border-color: rgba(255, 255, 255, 0.5);
  color: var(--paper);
}

.cookiebar :focus-visible {
  outline-color: var(--paper);
}

@media (max-width: 900px) {
  .cookiebar-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    padding: 20px 22px;
  }
  .cookiebar-actions .btn-primary,
  .cookiebar-actions .btn-quiet {
    flex: 1;
    text-align: center;
  }
}

/* ------------------------------------------------------------------ legal */
/* Both languages ship in the document and the root lang attribute picks one,
 * because a privacy policy that arrives after a fetch is a privacy policy a
 * regulator can say was not presented. German and French readers get the
 * English text: the legal pages are written in English and Dutch only, and a
 * machine translation of a privacy policy is not one anybody signed off. */

[data-lang] {
  display: none;
}

html[lang='en'] [data-lang='en'],
html[lang='nl'] [data-lang='nl'],
html[lang='de'] [data-lang='en'],
html[lang='fr'] [data-lang='en'] {
  display: block;
}

html[lang='en'] span[data-lang='en'],
html[lang='nl'] span[data-lang='nl'],
html[lang='de'] span[data-lang='en'],
html[lang='fr'] span[data-lang='en'] {
  display: inline;
}

.legal {
  max-width: 74ch;
  margin: 0 auto;
  padding: 56px 40px 96px;
}

.legal h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 42px;
  line-height: 1.1;
  margin: 14px 0 0;
}

.legal h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.25;
  margin: 44px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--vanilla);
}

.legal h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 17px;
  margin: 26px 0 0;
}

.legal p,
.legal li {
  font-size: 15px;
  line-height: 1.65;
  color: rgba(0, 0, 0, 0.82);
}

.legal p {
  margin: 14px 0 0;
}

.legal ul {
  margin: 14px 0 0;
  padding-left: 20px;
}

.legal li {
  margin-top: 8px;
}

.legal .updated {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.55);
}

.legal .lede {
  font-family: var(--serif);
  font-style: italic;
  font-size: 19px;
  line-height: 1.45;
  margin: 24px 0 0;
}

.legal table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 18px;
  font-size: 14px;
}

.legal th,
.legal td {
  text-align: left;
  vertical-align: top;
  padding: 10px 16px 10px 0;
  border-bottom: 1px solid var(--mist);
  line-height: 1.5;
}

.legal th {
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.6);
  border-bottom-color: #000;
}

@media (max-width: 900px) {
  .legal {
    padding: 40px 22px 72px;
  }
  .legal h1 {
    font-size: 32px;
  }
}

/* Three columns of prose do not fit a phone. The table's natural width is set by its
   longest unbreakable run, so at 402px the whole PAGE was dragged 54px sideways and the
   text ran off the edge. It has always done that; it started mattering when the app began
   linking a reader straight here from its own privacy screen, which makes a phone the
   normal way this page is read rather than the unusual one.

   table-layout: fixed rather than a sideways scroll: this is a policy, and a policy you
   have to drag left and right to read is one nobody finishes. Fixed layout makes the
   columns share the width they have and the text wrap instead. The last column is the
   lawful basis, which is two or three words, so it is given a share to match rather than
   the third it would take by default. */
@media (max-width: 640px) {
  .legal table {
    table-layout: fixed;
  }
  .legal th,
  .legal td {
    padding-right: 10px;
    overflow-wrap: anywhere;
  }
  .legal th:last-child,
  .legal td:last-child {
    width: 26%;
    padding-right: 0;
  }
  .legal th:first-child,
  .legal td:first-child {
    width: 30%;
  }
}