/* ==========================================================================
   Sugar Baby Québec — production stylesheet
   Visual direction: Montréal After Dark × Québec Winter Light ×
   Modern Francophone Editorial × Quiet Luxury.
   Ported from the Figma Make implementation, then extended for the
   full multi-page site. Single stylesheet, no framework runtime.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Typefaces (self-hosted, SIL Open Font License)
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/manrope-400-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: "Manrope";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/manrope-400-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/manrope-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;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/manrope-500-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/manrope-600-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: "Manrope";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/manrope-600-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/manrope-700-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: "Manrope";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/manrope-700-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/newsreader-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;
}
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/newsreader-500-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/newsreader-600-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: "Newsreader";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/newsreader-600-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   2. Design tokens
   -------------------------------------------------------------------------- */

:root {
  /* Palette */
  --color-midnight-quebec: #111a24;
  --color-montreal-wine: #64283c;
  --color-river-teal: #315a58;
  --color-winter-porcelain: #f2efea;
  --color-ice-grey: #dde4e7;
  --color-copper-light: #b77950;
  --color-ink: #182029;
  --color-white-warm: #fffdfa;
  --color-sand: #e6ddd5;

  /* Text on light surfaces — every value checked against WCAG AA. */
  --color-text-muted: #55606a;
  --color-text-subtle: #66707a;
  --color-text-on-dark: rgba(255, 255, 255, 0.72);
  --color-text-on-dark-subtle: rgba(255, 255, 255, 0.58);

  /* Short aliases kept for the ported Figma Make rules. */
  --midnight: var(--color-midnight-quebec);
  --wine: var(--color-montreal-wine);
  --teal: var(--color-river-teal);
  --porcelain: var(--color-winter-porcelain);
  --ice: var(--color-ice-grey);
  --copper: var(--color-copper-light);
  --ink: var(--color-ink);
  --white: var(--color-white-warm);

  /* Lines & surfaces */
  --line: rgba(17, 26, 36, 0.15);
  --line-strong: rgba(17, 26, 36, 0.28);
  --line-on-dark: rgba(255, 255, 255, 0.18);

  /* Type scale (fluid) */
  --font-heading: "Newsreader", "Iowan Old Style", "Palatino Linotype", Palatino,
    "Times New Roman", serif;
  --font-body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  --text-xs: 0.75rem; /* 12px */
  --text-sm: 0.8125rem; /* 13px */
  --text-base: 0.9375rem; /* 15px */
  --text-md: 1rem; /* 16px */
  --text-lg: clamp(1.125rem, 1.35vw, 1.35rem);
  --text-xl: clamp(1.4rem, 2vw, 1.8rem);
  --text-2xl: clamp(1.75rem, 2.7vw, 2.3rem);
  --text-3xl: clamp(2.1rem, 3.5vw, 3rem);
  --text-4xl: clamp(2.5rem, 4.2vw, 3.6rem);
  --text-5xl: clamp(2.9rem, 4.9vw, 4.25rem);
  --text-hero: clamp(3.25rem, 4.8vw, 4.5rem);

  --leading-tight: 1.04;
  --leading-snug: 1.2;
  --leading-normal: 1.55;
  --leading-relaxed: 1.65;

  --tracking-tight: -0.035em;
  --tracking-tighter: -0.045em;
  --tracking-wide: 0.17em;
  --tracking-wider: 0.2em;

  /* Spacing */
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 5rem;
  --space-10: 7.5rem;

  /* Layout */
  --container: 1280px;
  --container-narrow: 820px;
  /*
   * The width at which a line of running text still returns comfortably to its
   * start. Manrope at the 17px reading size sets roughly 8.3px per character,
   * measured off rendered line boxes, so 620px is a line of about 75 — the top
   * of the 45-75 band that has held since Bringhurst, and 24% narrower than the
   * 820px this used to be. At 820 the guides set 99 characters a line, which is
   * past the point where the eye loses its place on the return sweep: the
   * paragraph stops being a column of text and becomes a wall.
   *
   * Applied to every block of running text — headings and the rules that divide
   * sections keep the wider container so the page still reads as one column,
   * but a paragraph never runs past this.
   */
  --measure: 620px;
  --gutter: 28px;
  --pad-inline: max(var(--gutter), calc((100vw - var(--container)) / 2));

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* Shadows */
  --shadow-soft: 0 15px 40px rgba(17, 26, 36, 0.08);
  --shadow-card: 0 25px 50px rgba(17, 26, 36, 0.14);
  --shadow-product: 0 30px 80px rgba(75, 54, 44, 0.14);
  --shadow-float: 0 30px 70px rgba(0, 0, 0, 0.2);
  --shadow-menu: 0 24px 60px rgba(17, 26, 36, 0.22);

  /* Motion */
  --motion-fast: 140ms;
  --motion-base: 220ms;
  --motion-slow: 700ms;
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* Focus */
  --focus-color: var(--color-copper-light);
  --focus-ring: 2px solid var(--focus-color);
  --focus-offset: 3px;

  /* Chrome */
  --header-height: 76px;
  --touch-target: 44px;
}

/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 20px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--porcelain);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.is-locked {
  overflow: hidden;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-heading);
  font-weight: 500;
  line-height: var(--leading-tight);
  margin: 0;
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

h4 {
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
}

p {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
}

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

/*
 * The `width` and `height` attributes on every image carry the intrinsic ratio
 * that reserves layout space. They must not fix the rendered height: an
 * attribute selector outranks a class, so `img[width][height] { height: auto }`
 * silently overrode every `.card img { height: 100% }` rule and left the
 * lower part of each card unpainted. `img { height: auto }` above already
 * provides the default, and the specific rules below win over it.
 */

/*
 * <picture> only carries the source set; it must not generate a box of its own.
 * Left as display:inline the wrapper has height:auto, so a percentage height on
 * the <img> inside it resolves against the wrapper rather than the sized
 * container and the image stops short of the card it is meant to fill.
 */
picture {
  display: contents;
}

/*
 * display: contents hands the <picture>'s children to its parent's box tree,
 * and that includes the <source>. A <source> inside <audio> or <video> is
 * hidden by the user-agent stylesheet, but one inside <picture> is not, so it
 * becomes a real box. Anywhere the parent lays out its children as tracks — the
 * blog list's grid, for one — that stray element claims a whole track and every
 * sibling after it shifts one column along: the photograph moved into the wide
 * column and the text was pushed down onto a second row, leaving a dead
 * rectangle in the top-left of every post. It is never rendered, so it is
 * removed from layout here. Source selection reads the element's attributes,
 * not its display, so the WebP rendition is unaffected.
 */
picture > source {
  display: none;
}

svg {
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: 0;
  color: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

/* Focus ------------------------------------------------------------------- */

:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: var(--space-3);
  top: var(--space-3);
  z-index: 200;
  transform: translateY(-200%);
  background: var(--midnight);
  color: #fff;
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 700;
  transition: transform var(--motion-fast) var(--ease-out);
}

.skip-link:focus {
  transform: translateY(0);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   4. Shared layout helpers
   -------------------------------------------------------------------------- */

.section {
  padding: var(--space-10) var(--pad-inline);
}

.page-section {
  padding: 100px var(--pad-inline);
}

.section--tight {
  padding-block: var(--space-9);
}

.dark {
  background: var(--midnight);
  color: #fff;
}

.sand {
  background: var(--sand);
}

.ice {
  background: var(--ice);
}

.wine {
  background: var(--wine);
  color: #fff;
}

.teal {
  background: var(--teal);
  color: #fff;
}

.eyebrow {
  display: inline-block;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--copper);
  font-weight: 700;
}

.section-title {
  max-width: 820px;
  margin-bottom: 52px;
}

.section-title h2 {
  font-size: var(--text-4xl);
  margin: 13px 0 18px;
}

/* The intro under a section heading is running text and reads at the reading
   size and the reading measure, like a paragraph in a guide. At 15px and
   660px it set 90 characters to the line. */
.section-title p {
  font-size: var(--text-md);
  max-width: var(--measure);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
}

.section-title.light {
  color: #fff;
}

.section-title.light p {
  color: var(--color-text-on-dark-subtle);
}

/* Buttons ----------------------------------------------------------------- */

.primary {
  display: inline-flex;
  gap: 22px;
  align-items: center;
  justify-content: center;
  background: var(--wine);
  color: #fff;
  padding: 16px 22px;
  min-height: var(--touch-target);
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: var(--text-sm);
  letter-spacing: 0.01em;
  transition:
    background var(--motion-base) var(--ease-out),
    transform var(--motion-base) var(--ease-out);
}

.primary:hover {
  background: #753049;
}

.primary:active {
  transform: translateY(1px);
}

.primary--light {
  background: #fff;
  color: var(--wine);
}

.primary--light:hover {
  background: var(--ice);
}

.button-secondary {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-target);
  padding: 13px 18px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 600;
  background: transparent;
  transition: background var(--motion-base) var(--ease-out);
}

.button-secondary:hover {
  background: rgba(17, 26, 36, 0.05);
}

.text-link,
.link-underline {
  border-bottom: 1px solid currentColor;
  padding-bottom: 5px;
  font-size: var(--text-sm);
  font-weight: 600;
}

.text-link {
  display: inline-block;
}

.inline-arrow {
  display: inline-block;
  margin-left: 8px;
}

/* Breadcrumbs ------------------------------------------------------------- */

.breadcrumbs {
  padding: 18px var(--pad-inline);
  background: var(--midnight);
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.58);
}

.breadcrumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.breadcrumbs li + li::before {
  content: "/";
  margin-right: 8px;
  opacity: 0.5;
}

.breadcrumbs a:hover {
  color: var(--copper-light);
  text-decoration: underline;
}

.breadcrumbs [aria-current="page"] {
  color: rgba(255, 255, 255, 0.82);
}

/* --------------------------------------------------------------------------
   5. Header
   -------------------------------------------------------------------------- */

.site-header {
  min-height: var(--header-height);
  padding: 0 var(--pad-inline);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  background: var(--midnight);
  color: #fff;
  position: relative;
  z-index: 60;
}

.site-header.over-hero {
  position: absolute;
  inset: 0 0 auto;
  background: linear-gradient(
    to bottom,
    rgba(17, 26, 36, 0.92),
    rgba(17, 26, 36, 0)
  );
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 14px;
  letter-spacing: -0.02em;
  flex: 0 0 auto;
}

.brand b {
  font-weight: 500;
  color: #d7b49b;
}

.brand-mark {
  width: 34px;
  height: 34px;
  border: 1px solid var(--copper);
  display: inline-grid;
  place-items: center;
  font: 500 15px var(--font-heading);
  transform: rotate(45deg);
  color: #fff;
  flex: 0 0 auto;
}

.brand-mark > span {
  transform: rotate(-45deg);
}

.nav {
  display: flex;
  align-items: center;
  gap: 19px;
  font-size: var(--text-sm);
}

.nav > a,
.nav summary,
.nav-primary {
  opacity: 0.88;
  transition: opacity var(--motion-base) var(--ease-out);
}

.nav > a:hover,
.nav summary:hover,
.nav > a:focus-visible {
  opacity: 1;
}

.nav > a[aria-current="page"] {
  opacity: 1;
  border-bottom: 1px solid var(--copper);
  padding-bottom: 3px;
}

/* Dropdowns (progressive: <details>, upgraded by JS) ---------------------- */

.nav-dropdown {
  position: relative;
}

.nav-dropdown > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: var(--touch-target);
  padding: 0 2px;
}

.nav-dropdown > summary::-webkit-details-marker {
  display: none;
}

.nav-dropdown > summary::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--motion-base) var(--ease-out);
}

.nav-dropdown[open] > summary::after {
  transform: rotate(225deg) translateY(-1px);
}

.nav-drop {
  position: absolute;
  top: calc(100% - 6px);
  left: -18px;
  width: 226px;
  background: var(--white);
  color: var(--ink);
  padding: 10px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-menu);
  display: grid;
  z-index: 70;
}

.nav-drop a {
  display: block;
  padding: 11px 12px;
  border-radius: var(--radius-sm);
  opacity: 1;
}

.nav-drop a:hover,
.nav-drop a:focus-visible {
  background: var(--porcelain);
}

.language {
  display: flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
  font-size: var(--text-xs);
}

.language i {
  height: 13px;
  border-left: 1px solid rgba(255, 255, 255, 0.4);
}

.language a {
  padding: 6px 2px;
  display: inline-block;
}

.language a:not([aria-current]) {
  opacity: 0.5;
}

.language a:hover {
  opacity: 1;
}

.nav-join {
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  background: var(--wine);
  opacity: 1;
}

.nav-join:hover {
  background: #753049;
  opacity: 1;
}

.nav-login {
  opacity: 0.88;
}

/* Mobile menu ------------------------------------------------------------- */

.menu-button {
  display: none;
  position: relative;
  width: var(--touch-target);
  height: var(--touch-target);
  padding: 0;
  border: 0;
  color: #fff;
  place-items: center;
}

.menu-button span {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 2px;
  border: 0;
  background: currentColor;
  margin: 0;
  transform: translate(-50%, -50%) translateY(-5px);
  transition: transform var(--motion-base) var(--ease-out);
}

.menu-button span:last-child {
  transform: translate(-50%, -50%) translateY(5px);
}

.menu-button[aria-expanded="true"] span:first-child {
  transform: translate(-50%, -50%) rotate(45deg);
}

.menu-button[aria-expanded="true"] span:last-child {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* --------------------------------------------------------------------------
   6. Footer
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--midnight);
  color: #fff;
  padding: 80px var(--pad-inline) 30px;
}

.footer-top {
  display: grid;
  grid-template-columns: 1.4fr repeat(5, minmax(0, 1fr));
  gap: 30px;
}

.footer-brand p {
  margin-top: 30px;
  color: var(--color-text-on-dark-subtle);
  max-width: 190px;
  font: 500 20px/1.2 var(--font-heading);
}

.footer-group {
  display: grid;
  align-content: start;
  gap: 12px;
  font-size: var(--text-sm);
}

.footer-group strong {
  color: #fff;
  margin-bottom: 8px;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.footer-group a {
  color: var(--color-text-on-dark-subtle);
  padding: 3px 0;
}

.footer-group a:hover,
.footer-group a:focus-visible {
  color: #fff;
  text-decoration: underline;
}

.footer-bottom {
  border-top: 1px solid var(--line-on-dark);
  margin-top: 70px;
  padding-top: 25px;
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  color: var(--color-text-on-dark-subtle);
  font-size: var(--text-xs);
}

.footer-legal-links {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

.footer-legal-links a:hover {
  color: #fff;
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   7. Homepage hero
   -------------------------------------------------------------------------- */

.hero {
  min-height: 720px;
  height: 100dvh;
  position: relative;
  color: #fff;
  overflow: hidden;
  background: var(--midnight);
}

.hero-photo,
.hero-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-photo {
  object-position: center 35%;
}

.hero-overlay {
  background:
    linear-gradient(
      90deg,
      rgba(17, 26, 36, 0.92) 0%,
      rgba(17, 26, 36, 0.62) 46%,
      rgba(17, 26, 36, 0.18) 78%
    ),
    linear-gradient(to top, rgba(17, 26, 36, 0.85), transparent 45%);
}

.hero-content {
  position: relative;
  z-index: 2;
  padding: clamp(280px, 34dvh, 326px) 0 40px var(--pad-inline);
  width: min(calc(860px + var(--pad-inline)), 74%);
}

.hero-note {
  display: block;
  margin-bottom: 18px;
}

.hero h1 {
  font-size: var(--text-hero);
  letter-spacing: var(--tracking-tighter);
  margin-bottom: 26px;
}

.hero-content > p:not(.hero-note) {
  max-width: 620px;
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-text-on-dark);
  margin-bottom: 34px;
}

.photo-credit {
  position: absolute;
  bottom: 20px;
  left: 24px;
  z-index: 3;
  font-size: 9px;
  opacity: 0.5;
  writing-mode: vertical-rl;
}

/* --------------------------------------------------------------------------
   8. Interior page hero
   -------------------------------------------------------------------------- */

/*
 * The copy column is weighed a little heavier than the photograph. Split evenly
 * it measured 554px, and the serif takes about 0.47 of its size per character,
 * so at the previous --text-5xl the longest word in these titles — "québécoise,"
 * at 439px — left only 115px of slack. No line could hold two long words: every
 * caption broke to one word per line, "Une / plateforme / québécoise, / pensée /
 * d'abord / en français", six lines of it. text-wrap: balance was already on
 * and could not help, because there was no combination of breaks to choose
 * between. At --text-4xl in the wider column the same title sets in three
 * lines of two words and the photograph keeps the larger share of its height.
 */
.page-hero {
  background: var(--midnight);
  color: #fff;
  min-height: 520px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.page-hero > div {
  min-width: 0;
  padding: 96px 5vw 72px var(--pad-inline);
  align-self: center;
}

.page-hero--narrow > div {
  padding-right: var(--pad-inline);
  max-width: 900px;
}

.page-hero h1 {
  font-size: var(--text-4xl);
  margin: 18px 0 25px;
}

.page-hero p {
  font-size: var(--text-md);
  max-width: var(--measure);
  line-height: var(--leading-relaxed);
  color: var(--color-text-on-dark);
  margin-bottom: 32px;
}

.page-hero figure {
  margin: 0;
  position: relative;
  overflow: hidden;
}

.page-hero img {
  height: 100%;
  min-height: 520px;
  width: 100%;
  object-fit: cover;
}

.page-hero--plain {
  grid-template-columns: 1fr;
  min-height: 0;
}

.page-hero--plain > div {
  padding: 96px var(--pad-inline) 72px;
  width: 100%;
  max-width: none;
}

.page-hero--plain h1 {
  max-width: 900px;
  overflow-wrap: normal;
  word-break: normal;
}

.page-hero--plain p {
  max-width: var(--measure);
}

/* --------------------------------------------------------------------------
   9. Discovery / member grid
   -------------------------------------------------------------------------- */

.filter-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.filter {
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 11px 16px;
  min-height: var(--touch-target);
  display: inline-flex;
  align-items: center;
  background: transparent;
  font-size: var(--text-sm);
  transition: background var(--motion-base) var(--ease-out);
}

.filter:hover {
  border-color: var(--line-strong);
}

.filter[aria-pressed="true"],
.filter.active {
  background: var(--midnight);
  color: #fff;
  border-color: var(--midnight);
}

.member-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.member {
  position: relative;
  overflow: hidden;
  min-height: 0;
  border-radius: var(--radius-lg);
  background: var(--midnight);
}

.member-grid .member {
  height: 440px;
}

.member img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.member-shade {
  position: absolute;
  z-index: 1;
  inset: auto 0 0;
  height: 58%;
  background: rgba(17, 26, 36, 0.84);
}

.member-copy {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 26px;
  color: #fff;
}

.member-copy h3 {
  font-size: var(--text-xl);
  margin: 14px 0 3px;
  text-wrap: balance;
}

.member-copy p {
  margin-bottom: 7px;
}

.member-copy small {
  display: block;
  color: var(--color-text-on-dark);
  line-height: var(--leading-normal);
  text-wrap: pretty;
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.status i {
  width: 7px;
  height: 7px;
  border-radius: var(--radius-circle);
  background: #87b8a5;
  box-shadow: 0 0 0 3px rgba(135, 184, 165, 0.18);
}

.status--offline i {
  background: #b8bec0;
  box-shadow: 0 0 0 3px rgba(184, 190, 192, 0.18);
}

/* Generic member card grid (role and city pages) --------------------------- */

.member-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.member-cards .member {
  height: 460px;
}

.member-cards--four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Private member previews shared by the home and role landing pages. */
.member-grid--locked .member picture,
.member-cards--locked .member picture {
  display: block;
  height: 100%;
  transform: scale(1.045);
}

.member-grid--locked .member img,
.member-cards--locked .member img {
  filter: blur(8px);
}

.member-grid--locked .member-shade,
.member-cards--locked .member-shade {
  height: 46%;
}

.member-grid--locked .member::before,
.member-cards--locked .member::before {
  content: "";
  position: absolute;
  z-index: 3;
  top: 34%;
  left: 50%;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  background: rgba(17, 26, 36, 0.72);
  box-shadow: 0 8px 24px rgba(8, 15, 22, 0.28);
  transform: translate(-50%, -50%);
  backdrop-filter: blur(6px);
}

.member-grid--locked .member::after,
.member-cards--locked .member::after {
  content: "";
  position: absolute;
  z-index: 4;
  top: 34%;
  left: 50%;
  width: 18px;
  height: 18px;
  background: #fff;
  transform: translate(-50%, -50%);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M17 9h-1V7a4 4 0 0 0-8 0v2H7a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-9a2 2 0 0 0-2-2Zm-7-2a2 2 0 1 1 4 0v2h-4V7Zm3 10.73V19h-2v-1.27a2 2 0 1 1 2 0Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M17 9h-1V7a4 4 0 0 0-8 0v2H7a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-9a2 2 0 0 0-2-2Zm-7-2a2 2 0 1 1 4 0v2h-4V7Zm3 10.73V19h-2v-1.27a2 2 0 1 1 2 0Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* --------------------------------------------------------------------------
   10. Perspectives (home)
   -------------------------------------------------------------------------- */

.perspectives article {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 620px;
}

.perspectives article > div {
  padding: 8vw var(--pad-inline);
  align-self: center;
}

.perspectives article img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

/*
 * Each panel is half a 2x2 grid — 560px of measure at 1440 — and the heading
 * inherits the full-bleed display size, which set "L'élégance / d'une /
 * conversation / sans détour" with the preposition stranded on a line of its
 * own, 212px wide in a 560px column. Sized to the panel, as the mobile
 * breakpoint already does further down.
 */
.perspectives h2 {
  font-size: var(--text-4xl);
  margin: 18px 0 24px;
}

.perspectives p {
  line-height: var(--leading-relaxed);
  max-width: 500px;
  margin-bottom: 40px;
}

.perspectives a {
  border-bottom: 1px solid currentColor;
  padding-bottom: 5px;
  font-size: var(--text-sm);
  font-weight: 600;
}

.daddy-panel {
  background: var(--midnight);
  color: #fff;
}

.daddy-panel p {
  color: var(--color-text-on-dark);
}

.daddy-panel span,
.baby-panel span {
  color: var(--copper);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-weight: 700;
}

.baby-panel {
  background: var(--white);
  color: var(--wine);
}

/* --------------------------------------------------------------------------
   11. Journey / how it works
   -------------------------------------------------------------------------- */

.journey-grid {
  display: grid;
  grid-template-columns: 1fr 0.8fr 1fr;
  align-items: center;
  gap: 55px;
}

.profile-ui,
.message-ui {
  background: #f9f7f2;
  border-radius: var(--radius-xl);
  padding: 14px;
  box-shadow: var(--shadow-card);
  color: var(--ink);
}

.profile-ui {
  transform: rotate(-2deg);
}

.profile-ui img {
  height: 280px;
  width: 100%;
  object-fit: cover;
  border-radius: var(--radius-md);
}

.profile-ui h3 {
  font-size: var(--text-2xl);
  margin: 18px 0 12px;
}

.ui-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 3px 14px;
  font-size: var(--text-xs);
}

.ui-top span {
  width: 8px;
  height: 8px;
  background: #78aa91;
  border-radius: var(--radius-circle);
}

.tag-row {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}

.tag-row span {
  padding: 7px 10px;
  background: var(--ice);
  border-radius: var(--radius-pill);
  font-size: 10px;
}

.journey ol {
  list-style: none;
  color: #fff;
  counter-reset: item;
}

.journey li {
  border-bottom: 1px solid var(--line-on-dark);
  padding: 21px 0;
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  counter-increment: item;
  font-size: 14px;
}

.journey li b::before {
  content: "0" counter(item);
  color: var(--copper);
  margin-right: 15px;
  font-size: 10px;
}

.message-ui {
  transform: rotate(2deg);
}

.message-ui > small {
  display: block;
  border-bottom: 1px solid var(--line);
  padding: 8px 5px 16px;
}

.message-ui > div:not(.reply) {
  background: #fff;
  margin: 18px 20px 10px 0;
  padding: 13px;
  border-radius: 2px 9px 9px 9px;
}

.message-ui .reply {
  background: #d8e6e2;
  margin: 10px 0 20px 35px;
  padding: 13px;
  border-radius: 9px 2px 9px 9px;
}

.message-ui p {
  font-size: var(--text-sm);
  margin: 4px 0;
}

.message-ui button {
  width: 100%;
  background: var(--teal);
  color: #fff;
  padding: 13px;
  border-radius: var(--radius-sm);
}

/* --------------------------------------------------------------------------
   12. App showcase
   -------------------------------------------------------------------------- */

.app-showcase {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 48%, rgba(100, 40, 60, 0.12), transparent 34%),
    linear-gradient(135deg, var(--porcelain) 0%, var(--white) 100%);
  border-bottom: 1px solid var(--line);
}

.app-showcase-inner {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.16fr);
  gap: clamp(40px, 7vw, 112px);
  align-items: center;
}

.app-showcase-copy {
  position: relative;
  z-index: 1;
  max-width: 590px;
}

.app-showcase-copy h2 {
  margin: 13px 0 22px;
  font-size: var(--text-3xl);
  letter-spacing: var(--tracking-tighter);
}

.app-showcase-copy > p {
  color: var(--color-text-muted);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  max-width: var(--measure);
}

.app-showcase-list {
  list-style: none;
  display: grid;
  gap: 14px;
  margin: 30px 0 34px;
}

.app-showcase-list li {
  position: relative;
  padding-left: 24px;
  color: var(--ink);
  line-height: var(--leading-normal);
}

.app-showcase-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 9px;
  height: 9px;
  border: 2px solid var(--copper);
  border-radius: var(--radius-circle);
  transform: translateY(-50%);
}

.app-showcase-visual {
  position: relative;
  min-width: 0;
  display: grid;
  place-items: center;
}

.app-showcase-visual::before {
  content: "";
  position: absolute;
  width: min(78%, 560px);
  aspect-ratio: 1;
  border-radius: var(--radius-circle);
  background: rgba(221, 228, 231, 0.72);
  filter: blur(2px);
}

.app-showcase-visual picture,
.app-showcase-visual img {
  position: relative;
  width: 100%;
}

.app-showcase-visual img {
  height: auto;
  object-fit: contain;
}

/* Numbered step list (shared) --------------------------------------------- */

.steps {
  list-style: none;
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 36px;
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  border-bottom: 1px solid var(--line);
}

.steps > li {
  position: relative;
  min-height: 154px;
  padding: 28px 22px 28px 52px;
  border-top: 1px solid var(--line);
  counter-increment: step;
}

.steps--dark > li {
  border-top-color: var(--line-on-dark);
}

.steps > li::before {
  content: "0" counter(step);
  position: absolute;
  left: 0;
  top: 31px;
  color: var(--copper);
  font-size: var(--text-xs);
  font-weight: 700;
}

.steps h3 {
  font-size: clamp(1.3rem, 1.7vw, 1.65rem);
  line-height: var(--leading-snug);
  margin-bottom: 9px;
}

.steps p {
  color: var(--color-text-muted);
  font-size: var(--text-base);
  line-height: 1.6;
  max-width: var(--measure);
}

.steps--dark p {
  color: var(--color-text-on-dark);
}

/* --------------------------------------------------------------------------
   12. City layout (home + city pages)
   -------------------------------------------------------------------------- */

.city-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 42px;
  border-bottom: 1px solid var(--line);
}

.city-card {
  position: relative;
  min-height: 218px;
  color: var(--ink);
  display: grid;
  grid-template-columns: minmax(170px, 42%) minmax(0, 1fr);
  gap: 24px;
  align-items: stretch;
  padding: 22px 0;
  border-top: 1px solid var(--line);
}

.city-card picture {
  position: relative;
  display: block;
  min-height: 174px;
  overflow: hidden;
  background: var(--ice);
}

.city-card img {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.city-card--quebec img {
  object-position: 58% center;
}

.city-card--laval img,
.city-card--gatineau img {
  object-position: center;
}

.city-card-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding: 16px 18px 16px 0;
}

.city-card h3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
  font-size: var(--text-2xl);
  text-wrap: balance;
}

.city-card p {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  text-wrap: pretty;
}

.city-card:focus-visible {
  outline: 3px solid var(--copper);
  outline-offset: 4px;
}

/* Neighbourhood list ------------------------------------------------------ */

.area-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 48px;
}

.area-list > div {
  padding: 26px 0;
  border-top: 1px solid var(--line);
}

.area-list h3 {
  font-size: var(--text-lg);
  margin-bottom: 8px;
}

/* Two columns of 616px: at the 15px body size that is 84 characters a line,
   which the reading size brings back to 74 without touching the grid. */
.area-list p {
  color: var(--color-text-muted);
  font-size: var(--text-md);
}

/* --------------------------------------------------------------------------
   13. Feature story / wishlist preview
   -------------------------------------------------------------------------- */

.feature-story {
  padding: var(--space-10) var(--pad-inline);
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 9vw;
  align-items: center;
}

.wishlist-section {
  background: var(--sand);
}

/* The copy column of a .feature-story, opposite the product mock-up. */
.story-copy {
  display: grid;
  justify-items: start;
  gap: var(--space-5);
}

/*
 * The copy half of a .feature-story, opposite the product mock-up.
 *
 * These sections reuse .section-title, whose heading is sized for a full-width
 * band, and the measurement here is roughly half of that: 460px at 1440. The
 * section headings run to fifty-odd characters — "Une idée personnelle peut
 * simplement lancer la conversation" — and at --text-4xl they set six lines of
 * one word, with the article and the adjective each stranded on a line of their
 * own. Sized to the column instead.
 */
.story-copy .section-title h2 {
  font-size: var(--text-2xl);
}

.story-copy > a {
  margin-top: var(--space-2);
}

.wish-ui {
  background: var(--white);
  padding: 18px;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-product);
}

.wish-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 5px 20px;
}

.wish-head button {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-circle);
  color: #fff;
  background: var(--wine);
}

.wish-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 15px;
  padding: 17px 7px;
  border-top: 1px solid var(--line);
}

.avatar {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-circle);
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--wine);
  font-family: var(--font-heading);
  font-size: var(--text-md);
  flex: 0 0 auto;
}

.avatar.a1 {
  background: var(--teal);
}

.avatar.a2 {
  background: var(--copper);
}

.wish-row small {
  display: block;
  margin-top: 5px;
  color: var(--color-text-subtle);
}

.wish-row > button {
  font-size: 20px;
  line-height: 1;
  padding: 8px;
  min-width: var(--touch-target);
  min-height: var(--touch-target);
}

/* --------------------------------------------------------------------------
   14. Events
   -------------------------------------------------------------------------- */

.event-layout {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 55px;
}

.event-photo {
  position: relative;
  min-height: 570px;
  color: #fff;
  overflow: hidden;
  display: block;
}

.event-photo img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.event-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(17, 26, 36, 0.85), transparent);
}

.event-photo > div {
  position: absolute;
  z-index: 2;
  bottom: 35px;
  left: 35px;
  right: 35px;
}

.event-photo h3 {
  font-size: var(--text-3xl);
  margin: 12px 0 25px;
}

.event-photo button,
.event-photo .button-secondary {
  background: #fff;
  padding: 13px 18px;
  border-radius: var(--radius-sm);
  border: 0;
  color: var(--ink);
  font-weight: 600;
}

.event-filters {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
  padding-bottom: 20px;
}

.event-filters button {
  padding: 10px 14px;
  min-height: var(--touch-target);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  border: 1px solid transparent;
}

.event-filters button[aria-pressed="true"],
.event-filters .active {
  background: var(--midnight);
  color: #fff;
}

.event-line {
  display: grid;
  grid-template-columns: 55px 1fr auto;
  align-items: center;
  gap: 20px;
  padding: 25px 0;
  border-bottom: 1px solid var(--line);
}

.event-line > div b {
  font: 500 30px var(--font-heading);
  display: block;
  line-height: 1;
}

.event-line small {
  display: block;
  color: var(--color-text-subtle);
  margin-top: 3px;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.event-line button {
  border: 1px solid var(--line);
  border-radius: var(--radius-circle);
  width: var(--touch-target);
  height: var(--touch-target);
  display: grid;
  place-items: center;
}

.event-line button:hover {
  background: var(--ice);
}

.event-list > a {
  display: inline-block;
  margin-top: 30px;
  font-size: var(--text-sm);
  font-weight: 700;
}

.event-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.event-cards article {
  position: relative;
  min-height: 450px;
  color: #fff;
  overflow: hidden;
  display: block;
}

.event-cards img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

/*
 * The copy sits over whatever photograph the card was given, and the lightest
 * of them — a grey stone street at midday — is bright enough to swallow a white
 * heading under a two-stop fade. The ramp therefore holds near-solid across the
 * lower half, where the tag, title, date and button all sit, and only releases
 * in the upper third.
 */
.event-cards article::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(17, 26, 36, 0.94) 0%,
    rgba(17, 26, 36, 0.86) 30%,
    rgba(17, 26, 36, 0.56) 55%,
    rgba(17, 26, 36, 0.2) 78%,
    transparent 100%
  );
}

.event-cards article > div {
  position: absolute;
  z-index: 2;
  bottom: 25px;
  left: 25px;
  right: 25px;
}

.event-cards h3 {
  font-size: var(--text-2xl);
  margin: 9px 0 20px;
}

.event-cards small {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-on-dark);
}

.event-cards button {
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--ink);
  font-weight: 600;
  font-size: var(--text-sm);
}

.event-meta {
  list-style: none;
  display: grid;
  gap: 10px;
  margin: 22px 0 26px;
}

.event-meta li {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
  font-size: var(--text-base);
}

.event-meta b {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-subtle);
  font-weight: 700;
  padding-top: 2px;
}

/* Invitation (one-on-one) ------------------------------------------------- */

.private-event {
  background: var(--ice);
}

.invite-ui {
  max-width: 760px;
  margin: 0 auto;
  background: #fff;
  padding: 30px;
  border-radius: var(--radius-xl);
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: 10px;
  box-shadow: var(--shadow-soft);
}

.invite-ui h3 {
  font-size: var(--text-2xl);
  margin: 10px 0;
}

.invite-ui p {
  color: var(--color-text-muted);
}

.invite-ui span {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--copper);
  font-weight: 700;
}

.invite-ui button {
  background: var(--teal);
  color: #fff;
  padding: 12px 16px;
  min-height: var(--touch-target);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 600;
}

.invite-ui .ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line-strong);
}

/* --------------------------------------------------------------------------
   15. Chat rooms
   -------------------------------------------------------------------------- */

.chat-preview {
  background: var(--teal);
  color: #fff;
  padding: 96px var(--pad-inline);
  display: grid;
  grid-template-columns: minmax(300px, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(44px, 5vw, 64px);
  align-items: center;
}

/*
 * The copy standing beside the mock chat window had no type rules of its own,
 * and the stylesheet resets every margin, so its heading fell back to the 22px
 * the browser gives an <h2> — a third the size of the section headings it sits
 * among — and its paragraphs ran together with nothing between them.
 */
/*
 * Sized to the column rather than to the section scale: this copy sits in the
 * narrower of the two tracks, about 450px beside the 80px gap, so a --text-4xl
 * heading broke to six characters a line.
 */
.chat-copy h2 {
  font-size: var(--text-2xl);
  margin: 18px 0 25px;
}

.chat-copy p {
  line-height: var(--leading-relaxed);
  color: var(--color-text-on-dark);
}

.chat-copy p + p {
  margin-top: 14px;
}

.chat-copy > a {
  display: inline-block;
  margin-top: 30px;
  border-bottom: 1px solid currentColor;
  padding-bottom: 5px;
  font-size: var(--text-sm);
  font-weight: 600;
}

.chat-ui {
  background: #eef2f1;
  color: var(--ink);
  border-radius: var(--radius-xl);
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(200px, 0.72fr) minmax(0, 1.28fr);
  min-height: 460px;
  box-shadow: var(--shadow-float);
}

.room-list {
  padding: 25px 14px;
  border-right: 1px solid var(--line);
  min-width: 0;
}

.room-list > b {
  display: block;
  padding: 0 10px 20px;
}

.room-list button {
  width: 100%;
  padding: 14px 9px;
  min-height: var(--touch-target);
  text-align: left;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) 20px;
  gap: 8px;
  align-items: center;
  font-size: var(--text-sm);
  border-radius: var(--radius-sm);
}

.room-list button:hover {
  background: rgba(255, 255, 255, 0.6);
}

.room-list button[aria-current="true"],
.room-list button.active {
  background: #fff;
}

.room-list i {
  background: var(--wine);
  color: #fff;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-circle);
  display: grid;
  place-items: center;
  font-size: 10px;
  font-style: normal;
}

.active-chat {
  background: #fff;
  padding: 20px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.active-chat[hidden] {
  display: none;
}

.chat-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding-bottom: 18px;
  font-size: var(--text-xs);
}

.bubble {
  background: var(--ice);
  padding: 12px;
  width: fit-content;
  max-width: 82%;
  margin: 20px 0 0;
  align-self: flex-start;
  border-radius: 2px 10px 10px 10px;
}

.bubble + .bubble {
  align-self: flex-end;
  background: #e8dfe2;
  border-radius: 10px 2px 10px 10px;
}

.bubble p {
  font-size: var(--text-sm);
  margin: 5px 0 0;
  line-height: 1.5;
}

.composer {
  margin-top: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 11px;
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.composer button {
  background: var(--wine);
  color: #fff;
  border-radius: 5px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

/* Room browser on the Chat Rooms page ------------------------------------- */

.room-groups {
  display: grid;
  gap: 48px;
}

.room-group h3 {
  font-size: var(--text-2xl);
  margin-bottom: 6px;
}

.room-group > p {
  color: var(--color-text-muted);
  font-size: var(--text-md);
  margin-bottom: 22px;
  max-width: var(--measure);
}

.rooms-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.rooms-grid article {
  background: #fff;
  padding: 25px;
  border-top: 3px solid var(--teal);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.rooms-grid article[data-state="muted"] {
  border-top-color: var(--color-text-subtle);
}

.rooms-grid h3 {
  font-size: var(--text-xl);
  margin: 22px 0 12px;
}

.rooms-grid p {
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
}

.rooms-grid small {
  display: block;
  color: var(--wine);
  margin: 16px 0 20px;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}

.rooms-grid button {
  border: 1px solid var(--line);
  padding: 11px 14px;
  min-height: var(--touch-target);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 600;
  margin-top: auto;
}

.rooms-grid button:hover {
  background: var(--ice);
}

.room-empty {
  display: grid;
  place-items: center;
  text-align: center;
  padding: 44px 24px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-lg);
  color: var(--color-text-muted);
}

.room-empty b {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  color: var(--ink);
  margin-bottom: 8px;
}

.moderation {
  margin-top: 30px;
  padding: 25px;
  background: var(--teal);
  color: #fff;
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  align-items: center;
}

.moderation b {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   16. Safety
   -------------------------------------------------------------------------- */

.safety {
  background: var(--ice);
}

.safety-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
}

.settings-ui {
  background: #fff;
  padding: 20px;
  border-radius: var(--radius-xl);
}

.settings-ui > div {
  padding: 22px 5px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 15px;
  align-items: center;
  border-bottom: 1px solid var(--line);
}

.settings-ui > div:last-child {
  border-bottom: 0;
}

.settings-ui span[aria-hidden] {
  color: var(--copper);
}

.toggle {
  width: 46px;
  height: 26px;
  border-radius: var(--radius-pill);
  background: #b8bec0;
  padding: 3px;
  transition: background var(--motion-base) var(--ease-out);
  flex: 0 0 auto;
}

.toggle i {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-circle);
  background: #fff;
  transition: margin-left var(--motion-base) var(--ease-out);
}

.toggle[aria-pressed="true"],
.toggle.on {
  background: var(--teal);
}

.toggle[aria-pressed="true"] i,
.toggle.on i {
  margin-left: 20px;
}

.safety-points > div {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}

.safety-points span {
  color: var(--teal);
  font-weight: 700;
}

.safety-points a {
  display: inline-block;
  margin-top: 30px;
  font-weight: 700;
  font-size: var(--text-sm);
}

/* Safety reference page --------------------------------------------------- */

.safety-page {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  gap: 80px;
  align-items: start;
}

.safety-nav {
  position: sticky;
  top: calc(var(--header-height) + 20px);
  align-self: start;
  display: grid;
  gap: 12px;
  font-size: var(--text-sm);
}

.safety-nav b {
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: var(--text-xs);
}

.safety-nav a {
  color: var(--color-text-muted);
  padding: 3px 0;
}

.safety-nav a:hover,
.safety-nav a[aria-current="true"] {
  color: var(--wine);
  text-decoration: underline;
}

/*
 * The reference articles on the safety page.
 *
 * These were set at the 15px body size while the guides — the site's other
 * long-form reading surface — read at 17px, so two documents of the same kind
 * disagreed about how big a paragraph is. Both take the reading size now, and
 * the measure with it: at 760px the 15px setting ran to 96 characters a line,
 * the longest on the site.
 */
.safety-article {
  padding-bottom: 50px;
  margin-bottom: 50px;
  border-bottom: 1px solid var(--line);
  font-size: var(--text-md);
  max-width: var(--measure);
}

.safety-article > span {
  color: var(--copper);
  font-size: var(--text-xs);
  font-weight: 700;
}

.safety-article h2 {
  font-size: var(--text-3xl);
  margin: 15px 0;
}

.safety-article p,
.safety-article li {
  line-height: var(--leading-relaxed);
}

.safety-article p + p {
  margin-top: 14px;
}

.safety-article ul {
  list-style: none;
  margin-top: 18px;
  display: grid;
  gap: 12px;
}

.safety-article ul li {
  padding-left: 22px;
  position: relative;
}

.safety-article ul li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--copper);
}

/* --------------------------------------------------------------------------
   17. Magazine / guides
   -------------------------------------------------------------------------- */

.magazine {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 18px;
}

.magazine > article {
  position: relative;
  min-height: 650px;
  color: #fff;
  padding: 35px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}

.magazine > article img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.magazine > article > *:not(img) {
  position: relative;
  z-index: 2;
}

.magazine > article::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(17, 26, 36, 0.9), transparent);
  z-index: 1;
}

.magazine h3 {
  font-size: var(--text-3xl);
  margin: 13px 0;
}

.magazine span {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.magazine > div {
  display: grid;
  gap: 18px;
}

.magazine > div article {
  padding: 38px;
  background: var(--ice);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
}

.magazine > div article.wine {
  background: var(--wine);
  color: #fff;
}

.magazine a {
  margin-top: 20px;
  font-size: var(--text-sm);
  font-weight: 700;
}

/* Long-form editorial prose ----------------------------------------------- */

.prose {
  max-width: var(--measure);
}

.prose > * + * {
  margin-top: 18px;
}

/*
 * A display heading has to be sized to the column it sits in, not to the page.
 * These headings ran at --text-3xl against the old 820px measure, which is 28
 * characters of Newsreader to the line. Narrowing the measure to 620 without
 * touching the heading left 21 — under the length of most of these headings, so
 * "Admissibilité et comptes" broke after the first word and "Utilisation de la
 * plateforme" stranded its article. --text-2xl restores the 28 and puts the
 * short ones back on one line; the long ones still take two, but balanced.
 */
.prose h2 {
  font-size: var(--text-2xl);
  margin-top: 56px;
}

.prose h3 {
  font-size: var(--text-xl);
  margin-top: 38px;
}

.prose h4 {
  font-size: var(--text-lg);
  margin-top: 30px;
}

.prose p,
.prose li {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: #2c353d;
}

.prose ul,
.prose ol {
  padding-left: 24px;
  display: grid;
  gap: 10px;
}

.prose ul {
  list-style: none;
  padding-left: 0;
}

.prose ul li {
  padding-left: 24px;
  position: relative;
}

.prose ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 12px;
  border-top: 1px solid var(--copper);
}

.prose ol {
  list-style: decimal;
}

.prose a {
  color: var(--wine);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.prose a:hover {
  color: var(--midnight);
}

/* Sized to the measure for the same reason as the h2 above: at --text-xl the
   pull quotes sat 39 characters to the line and the longest ran to three of
   them, which is a pull quote the size of a paragraph. */
.prose blockquote {
  margin: 32px 0;
  padding: 6px 0 6px 28px;
  border-left: 2px solid var(--copper);
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--midnight);
}

.prose strong {
  font-weight: 700;
}

.prose--wide {
  max-width: none;
}

/* Key/value blocks for legal documents ------------------------------------ */

.legal-meta {
  display: grid;
  gap: 8px;
  padding: 22px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: 40px;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  max-width: var(--measure);
}

/* --------------------------------------------------------------------------
   18. FAQ
   -------------------------------------------------------------------------- */

.faq > .section-title {
  width: 100%;
  max-width: var(--container-narrow);
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.faq > .section-title p {
  margin-right: auto;
  margin-left: auto;
}

.faq-list {
  width: 100%;
  max-width: var(--container-narrow);
  margin-right: auto;
  margin-left: auto;
}

.faq-group + .faq-group {
  margin-top: 56px;
}

.faq-group > h3 {
  font-size: var(--text-xl);
  margin-bottom: 12px;
}

.faq details {
  border-top: 1px solid var(--line);
}

.faq details:last-of-type {
  border-bottom: 1px solid var(--line);
}

.faq summary {
  list-style: none;
  padding: 25px 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  cursor: pointer;
  font: 500 var(--text-xl) var(--font-heading);
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary:hover {
  color: var(--wine);
}

.faq summary > span {
  flex: 0 0 auto;
  color: var(--copper);
  transition: transform var(--motion-base) var(--ease-out);
  font-size: var(--text-lg);
}

.faq details[open] summary > span {
  transform: rotate(45deg);
}

/* The question above an answer is display type on one short line; the answer
   underneath is running text and takes the reading size and measure. */
.faq details p {
  font-size: var(--text-md);
  max-width: var(--measure);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
  padding-bottom: 24px;
}

.faq details p + p {
  margin-top: -10px;
  padding-bottom: 24px;
}

.text-link--end {
  display: block;
  width: fit-content;
  margin: 35px 0 0 auto;
}

/* --------------------------------------------------------------------------
   19. CTA bands
   -------------------------------------------------------------------------- */

.bottom-cta {
  min-height: 620px;
  position: relative;
  color: #fff;
  display: grid;
  place-items: center;
  text-align: center;
  overflow: hidden;
}

/*
 * The photograph is emitted wrapped in a <picture> for its WebP rendition, so
 * the image is a grandchild of the band and `> img` matched nothing. Left in
 * flow and centred by place-items, it became a full-width picture with the
 * heading pushed below it and the band stretched to the height of the photo
 * instead of the 620px of its own design — on 22 pages. It is a backdrop, so it
 * has to be taken out of flow wherever it sits in the tree.
 */
.bottom-cta img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.bottom-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(17, 26, 36, 0.67);
  z-index: 1;
}

.bottom-cta > div {
  position: relative;
  z-index: 2;
  max-width: 820px;
  padding: 40px var(--gutter);
}

.bottom-cta h2 {
  font-size: var(--text-5xl);
}

.bottom-cta p {
  margin: 25px auto 35px;
  color: var(--color-text-on-dark);
  max-width: 560px;
}

.simple-cta {
  padding: 85px var(--pad-inline);
  background: var(--wine);
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
}

.simple-cta h2 {
  font-size: var(--text-4xl);
  max-width: 720px;
}

.simple-cta .primary {
  background: #fff;
  color: var(--wine);
  flex: 0 0 auto;
}

.simple-cta .primary:hover {
  background: var(--ice);
}

/* --------------------------------------------------------------------------
   20. Editorial block / content list (interior pages)
   -------------------------------------------------------------------------- */

.editorial-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8vw;
  align-items: center;
}

.editorial-block--reverse > .editorial-image {
  order: 2;
}

.editorial-image img {
  height: 580px;
  width: 100%;
  object-fit: cover;
}

/*
 * Sits in one of two grid tracks, about 580px, beside a 580px photograph. At
 * the full-width size the longest word in "Une agglomération à cheval sur deux
 * provinces" did not fit alongside anything, so the heading led with the bare
 * article: "Une / agglomération / à cheval sur / deux provinces".
 */
.editorial-block h2 {
  font-size: var(--text-3xl);
  margin: 18px 0 25px;
}

/* Copy beside a photograph, in a track of about 580px — 78 characters at the
   body size, 70 at the reading size. */
.editorial-block p {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
}

.editorial-block p + p {
  margin-top: 14px;
}

.content-list article {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 0 16px;
  min-height: 154px;
  padding: 28px 22px 28px 0;
  border-top: 1px solid var(--line);
}

.content-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 36px;
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  border-bottom: 1px solid var(--line);
}

.content-list article > span:first-child {
  color: var(--copper);
  font-size: var(--text-xs);
  font-weight: 700;
  padding-top: 6px;
}

.content-list h3 {
  font-size: clamp(1.3rem, 1.7vw, 1.65rem);
  line-height: var(--leading-snug);
  margin-bottom: 9px;
}

/* The numbered rows run the full container but their copy does not: at 720px
   and 15px each line held 98 characters, the longest measure on the site. */
.content-list p {
  color: var(--color-text-muted);
  font-size: var(--text-base);
  line-height: 1.6;
  max-width: var(--measure);
}

@media (min-width: 901px) {
  .section:has(> .content-list),
  .section:has(> .steps) {
    padding-block: 88px;
  }

  .section:has(> .content-list) > .section-title,
  .section:has(> .steps) > .section-title {
    max-width: 760px;
    margin: 0 auto 40px;
    text-align: center;
  }

  .section:has(> .content-list) > .section-title h2,
  .section:has(> .steps) > .section-title h2 {
    font-size: var(--text-3xl);
  }

  .section:has(> .content-list) > .section-title p,
  .section:has(> .steps) > .section-title p {
    margin-inline: auto;
  }
}

/* --------------------------------------------------------------------------
   21. Steps / flow strip
   -------------------------------------------------------------------------- */

.flow {
  display: flex;
  overflow-x: auto;
  padding-bottom: 20px;
  margin-bottom: 55px;
  scrollbar-width: thin;
}

/*
 * Cells share the row evenly instead of each sizing to its own text. Sized to
 * content, a long step such as "Accepter, refuser ou proposer un autre moment"
 * wrapped to two lines in a cell barely wider than its shortest neighbour, while
 * the strip as a whole still had room to spare. They still floor at 152px, so a
 * narrow screen scrolls the strip rather than crushing the labels.
 */
.flow span {
  flex: 1 1 0;
  min-width: 152px;
  padding: 18px;
  border-top: 1px solid var(--line);
  border-right: 1px solid var(--line);
  font-size: var(--text-xs);
}

.flow span:first-child {
  border-left: 1px solid var(--line);
}

.flow b {
  display: block;
  color: var(--copper);
  margin-bottom: 10px;
}

/* Events: keep the invitation demo and its explanation on the same desktop
   grid. The previous nested page-section added the viewport gutter a second
   time, compressing the six explanation cards into a narrow centre column. */
.private-event > .section-title {
  max-width: 760px;
  margin: 0 auto 44px;
  text-align: center;
}

.private-event > .section-title p {
  margin-inline: auto;
}

.private-event .flow {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  max-width: 1120px;
  margin: 0 auto 48px;
  padding-bottom: 0;
  overflow: visible;
}

.private-event .flow span {
  min-width: 0;
  min-height: 112px;
  padding: 18px 16px;
  line-height: 1.45;
}

.invite-showcase {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
}

.invite-showcase .invite-ui {
  max-width: none;
  min-width: 0;
  margin: 0;
  padding: 32px;
  grid-template-columns: repeat(3, minmax(0, auto));
  align-content: start;
  align-items: end;
  justify-content: start;
  gap: 12px;
}

.invite-showcase .invite-ui > div {
  grid-column: 1 / -1;
  min-height: 116px;
}

.invite-showcase .invite-ui h3 {
  font-size: clamp(1.55rem, 2vw, 2rem);
  line-height: 1.08;
}

.invite-showcase .invite-ui button {
  min-height: 44px;
  white-space: nowrap;
}

.invite-benefits {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  max-width: 1120px;
  margin: 56px auto 0;
  border-bottom: 0;
}

.invite-benefits article {
  min-height: 190px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.68);
}

.invite-benefits h3 {
  font-size: clamp(1.25rem, 1.5vw, 1.5rem);
}

/* --------------------------------------------------------------------------
   22. Wishlist page
   -------------------------------------------------------------------------- */

.wish-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.wish-gallery article {
  background: #fff;
  padding: 24px;
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.wish-gallery small {
  display: block;
  margin: 14px 0 10px;
  color: var(--color-text-subtle);
}

.wish-gallery h3 {
  font-size: var(--text-2xl);
  margin-bottom: 14px;
}

.wish-gallery p {
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  /* Holds the least gap between the copy and the buttons once they are pinned
     to the bottom of the card below. */
  margin-bottom: 25px;
}

/*
 * Pinned to the bottom of the card. Titles run to two lines or three, so a
 * fixed offset left the buttons at a different height in every card and each
 * card with a short title trailing dead space. The floor above keeps the gap
 * from closing up when a card has no space to spare.
 */
.wish-gallery article > div {
  display: flex;
  gap: 8px;
  margin-top: auto;
  flex-wrap: wrap;
}

.wish-gallery button {
  border: 1px solid var(--line);
  padding: 11px 14px;
  min-height: var(--touch-target);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 600;
}

.wish-gallery button:hover {
  background: var(--ice);
}

.wish-gallery .tag-row {
  margin-bottom: 18px;
}

/*
 * The gap is painted with the rule colour and the cells sit on top, so any cell
 * the content does not fill is left showing a bare grey band. The column count
 * therefore has to follow the number of cells: auto-fit lays out as many tracks
 * as fit, then collapses the empty ones and shares their width among the rest.
 * A fixed repeat(4, …) would strand a grey fourth column wherever the list is
 * shorter than four.
 */
.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.category-grid article {
  background: var(--porcelain);
  padding: 28px 22px;
}

.category-grid h3 {
  font-size: var(--text-lg);
  margin-bottom: 8px;
}

.category-grid p {
  color: var(--color-text-muted);
  font-size: var(--text-base);
}

/* --------------------------------------------------------------------------
   23. Forms
   -------------------------------------------------------------------------- */

.form-wrap {
  min-height: 520px;
}

.form-card {
  max-width: 560px;
  margin: 0 auto;
  background: #fff;
  padding: 38px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}

/* The wide variant holds the contact form. At 760px its intro sentence set 91
   characters to the line; the reading measure is also a better width for a
   form, which does not want its fields stretched across 690px. */
.form-wrap .form-card--wide {
  max-width: var(--measure);
}

.form-card > h2 {
  font-size: var(--text-2xl);
  margin-bottom: 8px;
}

.form-card > p.form-intro {
  color: var(--color-text-muted);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  margin-bottom: 28px;
}

.form-field {
  display: block;
  font-size: var(--text-sm);
  font-weight: 700;
  margin-bottom: 22px;
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  display: block;
  margin-top: 9px;
  padding: 14px;
  border: 1px solid var(--line-strong);
  background: var(--porcelain);
  border-radius: var(--radius-sm);
  font-weight: 400;
}

.form-field textarea {
  resize: vertical;
  min-height: 150px;
}

.form-field input:focus-visible,
.form-field select:focus-visible,
.form-field textarea:focus-visible {
  background: #fff;
}

.form-field[data-invalid="true"] input,
.form-field[data-invalid="true"] select,
.form-field[data-invalid="true"] textarea {
  border-color: #a4262c;
}

.field-error {
  display: none;
  margin-top: 8px;
  color: #a4262c;
  font-size: var(--text-sm);
  font-weight: 600;
}

.form-field[data-invalid="true"] .field-error {
  display: block;
}

.field-hint {
  display: block;
  margin-top: 8px;
  font-weight: 400;
  color: var(--color-text-subtle);
  font-size: var(--text-sm);
}

.form-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  font-size: var(--text-sm);
  margin-bottom: 22px;
}

.form-row label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 400;
  cursor: pointer;
}

.form-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--wine);
}

.form-row a {
  color: var(--wine);
  font-weight: 700;
}

.password-field {
  position: relative;
}

.password-field input {
  padding-right: 110px;
}

.password-toggle {
  position: absolute;
  right: 8px;
  bottom: 8px;
  padding: 8px 10px;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--wine);
  border-radius: var(--radius-sm);
}

.submit {
  width: 100%;
  background: var(--wine);
  color: #fff;
  padding: 16px;
  min-height: var(--touch-target);
  border-radius: var(--radius-sm);
  font-weight: 600;
}

.submit:hover {
  background: #753049;
}

.form-card > p.form-footer {
  margin-top: 22px;
  text-align: center;
  font-size: var(--text-sm);
}

.form-card a {
  color: var(--wine);
  font-weight: 700;
}

.form-status {
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: var(--porcelain);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.form-status[hidden] {
  display: none;
}

/* --------------------------------------------------------------------------
   24. Card grids (generic)
   -------------------------------------------------------------------------- */

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.card-grid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.card {
  background: #fff;
  color: var(--ink);
  padding: 32px;
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.card--outline {
  background: transparent;
  border: 1px solid var(--line);
}

.card h3 {
  font-size: var(--text-xl);
  margin-bottom: 12px;
}

.card p {
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
}

.card .text-link {
  margin-top: 22px;
}

.card-index {
  font-size: var(--text-xs);
  color: var(--copper);
  font-weight: 700;
  margin-bottom: 14px;
}

/* Callout / notice -------------------------------------------------------- */

.notice {
  border-left: 3px solid var(--copper);
  background: var(--ice);
  padding: 24px 26px;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  max-width: var(--measure);
}

.notice b {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 500;
  margin-bottom: 8px;
}

.notice p {
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
}

/* Blog -------------------------------------------------------------------- */

.post-list {
  display: grid;
  gap: 0;
}

.post-list article {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 40px;
  padding: 44px 0;
  border-top: 1px solid var(--line);
  align-items: start;
}

.post-list article:last-child {
  border-bottom: 1px solid var(--line);
}

.post-list img {
  width: 100%;
  height: 220px;
  object-fit: cover;
}

.post-list .eyebrow {
  margin-bottom: 12px;
}

.post-list h2 {
  font-size: var(--text-2xl);
  margin-bottom: 12px;
}

.post-list p {
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
}

.post-list .post-meta {
  margin-top: 16px;
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* --------------------------------------------------------------------------
   25. 404
   -------------------------------------------------------------------------- */

.not-found {
  min-height: 70vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--space-9) var(--gutter);
}

.not-found h1 {
  font-size: var(--text-5xl);
  margin: 14px 0 20px;
}

.not-found p {
  color: var(--color-text-muted);
  max-width: 520px;
  margin: 0 auto 30px;
}

.not-found-links {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 26px;
}

/* --------------------------------------------------------------------------
   26. Motion
   -------------------------------------------------------------------------- */

@keyframes heroReveal {
  from {
    opacity: 0;
    transform: scale(1.04);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  html {
    scroll-behavior: auto;
  }
}

/* --------------------------------------------------------------------------
   26b. Product UI, role pages and dialogs
   -------------------------------------------------------------------------- */

/* Two product mockups side by side on the role pages. */
.product-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 55px;
  align-items: center;
  margin-top: 48px;
}

.product-pair .message-ui {
  transform: none;
}

/* Chat rooms: keep the profile preview readable as a real information card. */
.profile-preview-showcase .product-pair {
  align-items: start;
  gap: clamp(32px, 4vw, 56px);
}

.profile-preview-showcase .profile-ui {
  padding: 18px;
  transform: none;
}

.profile-preview-showcase .profile-ui img {
  height: auto;
  aspect-ratio: 4 / 3;
  margin-bottom: 20px;
}

.profile-preview-showcase .profile-ui > b {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 500;
  line-height: var(--leading-tight);
}

.profile-preview-showcase .profile-ui > span {
  display: block;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

.profile-preview-showcase .profile-ui .tag-row {
  margin-top: 14px;
}

.profile-preview-showcase .profile-ui > small {
  display: block;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
}

.check-list {
  list-style: none;
  display: grid;
  gap: 18px;
  color: var(--color-text-on-dark);
}

.check-list li {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 16px;
  align-items: start;
}

.check-list span {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-circle);
  border: 1px solid rgba(242, 239, 234, 0.25);
  display: grid;
  place-items: center;
  font-size: 13px;
  color: var(--copper-light);
}

.check-list p {
  color: inherit;
  margin: 0;
  line-height: var(--leading-relaxed);
}

/* A full-width portrait with an overlapping copy rail (Sugar Baby hero). */
.portrait-banner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8vw;
  align-items: center;
  margin-inline: var(--pad-inline);
  background: transparent;
}

.page-hero + .portrait-banner {
  margin-top: clamp(48px, 5vw, 72px);
}

.portrait-banner > picture,
.portrait-banner > img {
  display: block;
  height: 580px;
}

.portrait-banner img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.portrait-banner-rail {
  padding: 0;
  align-self: center;
  width: 100%;
  max-width: none;
}

.portrait-banner-rail h2 {
  font-size: var(--text-3xl);
  margin: 16px 0 22px;
  max-width: 520px;
  overflow-wrap: normal;
  word-break: normal;
}

.portrait-banner-rail p {
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  margin-bottom: 18px;
  max-width: 480px;
}

.member-cards--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Member list inside the chat room sidebar. */
.room-members {
  border-top: 1px solid var(--line);
  margin-top: 14px;
  padding-top: 14px;
  display: grid;
  gap: 10px;
}

.room-members > b {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-subtle);
}

.room-members button {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  font-size: var(--text-sm);
}

/* The avatar is the first span in the row; the presence dot and the
   screen-reader label that follow it must not inherit this box. */
.room-members button > span:first-child {
  width: 26px;
  height: 26px;
  border-radius: var(--radius-circle);
  background: var(--ice);
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--midnight);
  flex: 0 0 auto;
}

/* Presence is announced in text as well, never by colour alone. */
.room-members .presence {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-circle);
  background: var(--teal);
  margin-left: auto;
  flex: 0 0 auto;
}

/* Light-background variant of the checklist (city filter sections). */
.check-list--dark {
  color: var(--ink);
}

.check-list--dark span {
  border-color: var(--line);
  color: var(--wine);
}

.check-list--dark p {
  color: var(--color-text-muted);
}

/* Simple two-column split used by the city privacy sections. */
.grid-two {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 55px;
  align-items: start;
}

.grid-two .notice {
  margin-top: 0;
}

/* Modal surface used for blocking and reporting. */
.site-dialog {
  border: 0;
  padding: 34px;
  border-radius: var(--radius-lg);
  width: min(480px, calc(100vw - 32px));
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 40px 90px -30px rgba(17, 26, 36, 0.5);
}

.site-dialog::backdrop {
  background: rgba(17, 26, 36, 0.62);
}

.site-dialog h2 {
  font-size: var(--text-2xl);
  margin-bottom: 14px;
}

.site-dialog p {
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  margin-bottom: 26px;
}

/* --------------------------------------------------------------------------
   Role landing pages — Quebec audience profiles
   -------------------------------------------------------------------------- */

.audience-profile {
  padding: 110px var(--pad-inline);
  background: var(--cream);
}

.audience-profile__intro {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(42px, 8vw, 120px);
  align-items: end;
  margin-bottom: 52px;
}

.audience-profile__intro h2 {
  font-size: clamp(2.55rem, 4vw, 4.5rem);
  line-height: 1;
  letter-spacing: -0.035em;
  margin-top: 14px;
  text-wrap: balance;
}

.audience-profile__intro-copy {
  max-width: 660px;
}

.audience-profile__intro-copy p {
  color: var(--color-text-muted);
  line-height: 1.75;
}

.audience-profile__intro-copy p + p {
  margin-top: 16px;
}

.audience-age-bands {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 70px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.audience-age-band {
  min-height: 190px;
  padding: 28px 30px 30px 0;
}

.audience-age-band + .audience-age-band {
  padding-left: 30px;
  border-left: 1px solid var(--line);
}

.audience-age-band strong {
  display: block;
  font: 500 clamp(1.65rem, 2.5vw, 2.6rem)/1.05 var(--font-heading);
  color: var(--wine);
  margin-bottom: 12px;
}

.audience-age-band p {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.65;
}

.audience-types-heading {
  display: flex;
  justify-content: space-between;
  gap: 28px;
  align-items: end;
  margin-bottom: 28px;
}

.audience-types-heading h3 {
  font-size: clamp(2rem, 3vw, 3.25rem);
  max-width: 18ch;
}

.audience-types-heading p {
  max-width: 52ch;
  color: var(--color-text-muted);
  line-height: 1.65;
}

.audience-type-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.audience-type-card {
  min-height: 430px;
  padding: clamp(28px, 4vw, 46px);
  border: 1px solid var(--line);
  background: #fff;
}

.audience-type-card:nth-child(2),
.audience-type-card:nth-child(3) {
  background: #e7edef;
}

.audience-type-card__top {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: start;
  margin-bottom: 38px;
}

.audience-type-card__number {
  color: var(--copper);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
}

.audience-type-card__age {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 12px;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  white-space: nowrap;
}

.audience-type-card h4 {
  font-size: clamp(1.8rem, 2.6vw, 2.75rem);
  line-height: 1.05;
  margin-bottom: 18px;
}

.audience-type-card > p {
  color: var(--color-text-muted);
  line-height: 1.7;
  max-width: 58ch;
}

.audience-type-card dl {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 0 18px;
  margin-top: 28px;
  border-top: 1px solid var(--line);
}

.audience-type-card dt,
.audience-type-card dd {
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--text-sm);
  line-height: 1.55;
}

.audience-type-card dt {
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.audience-type-card dd {
  color: var(--ink);
}

.audience-profile__note {
  display: flex;
  justify-content: space-between;
  gap: 28px;
  align-items: center;
  margin-top: 26px;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
}

.audience-profile__note p {
  max-width: 72ch;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.65;
}

.audience-profile__links {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  flex: 0 0 auto;
}

.audience-profile__links a {
  font-weight: 700;
  border-bottom: 1px solid currentColor;
  padding: 8px 0;
}

/* --------------------------------------------------------------------------
   About page — editorial brand story
   -------------------------------------------------------------------------- */

.about-page {
  background: var(--cream);
}

.about-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  min-height: 760px;
  padding: 132px var(--pad-inline) 72px;
  background: var(--midnight);
  color: #fff;
  gap: clamp(42px, 6vw, 96px);
  align-items: center;
}

.about-hero__copy {
  max-width: 620px;
}

.about-hero h1 {
  font-size: clamp(2.8rem, 4vw, 4.75rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  margin: 22px 0 30px;
  text-wrap: balance;
}

.about-hero__copy > p {
  color: rgba(255, 255, 255, 0.78);
  font-size: clamp(1rem, 1.25vw, 1.18rem);
  line-height: 1.75;
  max-width: 54ch;
}

.about-hero__actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 34px;
}

.about-hero__text-link {
  color: #fff;
  font-weight: 700;
  border-bottom: 1px solid rgba(255, 255, 255, 0.65);
  padding: 12px 0;
}

.about-hero__visual {
  position: relative;
  min-height: 590px;
}

.about-hero__visual picture,
.about-hero__visual img {
  display: block;
  width: 100%;
  height: 100%;
}

.about-hero__visual picture {
  position: absolute;
  inset: 0 0 34px 42px;
  overflow: hidden;
  border-radius: 2px;
}

.about-hero__visual img {
  object-fit: cover;
}

.about-hero__stamp {
  position: absolute;
  left: 0;
  bottom: 0;
  width: min(310px, 55%);
  padding: 28px;
  background: var(--wine);
  color: #fff;
  box-shadow: var(--shadow-card);
}

.about-hero__stamp strong {
  display: block;
  font: 500 clamp(1.45rem, 2.2vw, 2.15rem)/1.08 var(--font-heading);
  margin-bottom: 10px;
}

.about-hero__stamp span {
  display: block;
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--text-sm);
  line-height: 1.55;
}

.about-intro {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(50px, 8vw, 130px);
  padding: 120px var(--pad-inline);
  align-items: start;
}

.about-intro h2 {
  font-size: clamp(2.35rem, 3.6vw, 4rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  max-width: 9ch;
}

.about-intro__copy {
  max-width: 720px;
}

.about-intro__lead {
  font: 500 clamp(1.5rem, 2.25vw, 2.35rem)/1.22 var(--font-heading);
  color: var(--ink);
  margin-bottom: 30px;
}

.about-intro__copy p:not(.about-intro__lead) {
  color: var(--color-text-muted);
  line-height: 1.8;
  max-width: 62ch;
}

.about-values {
  padding: 110px var(--pad-inline);
  background: #e7edef;
}

.about-section-heading {
  max-width: 760px;
  margin-bottom: 52px;
}

.about-section-heading h2 {
  font-size: clamp(2.35rem, 3.6vw, 4rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin-top: 14px;
  text-wrap: balance;
}

.about-bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 18px;
}

.about-card {
  position: relative;
  min-height: 330px;
  padding: clamp(28px, 4vw, 48px);
  background: #fff;
  overflow: hidden;
}

.about-card h3 {
  font-size: clamp(1.55rem, 2vw, 2.25rem);
  line-height: 1.1;
  margin: 14px 0 18px;
  max-width: 11ch;
}

.about-card p {
  color: var(--color-text-muted);
  line-height: 1.75;
  max-width: 48ch;
}

.about-card--language {
  grid-column: span 7;
  background: var(--midnight);
  color: #fff;
}

.about-card--language p {
  color: rgba(255, 255, 255, 0.72);
}

.about-language-mark {
  position: absolute;
  right: 34px;
  bottom: 4px;
  font: 500 clamp(4.5rem, 10vw, 10rem)/0.8 var(--font-heading);
  letter-spacing: -0.08em;
  color: rgba(255, 255, 255, 0.08);
  white-space: nowrap;
}

.about-card--respect {
  grid-column: span 5;
  background: var(--wine);
  color: #fff;
}

.about-card--respect p {
  color: rgba(255, 255, 255, 0.76);
}

.about-card--place {
  grid-column: span 5;
  min-height: 440px;
  padding: 0;
}

.about-card--place picture,
.about-card--place img {
  width: 100%;
  height: 100%;
  display: block;
}

.about-card--place img {
  object-fit: cover;
}

.about-card--place div {
  position: absolute;
  inset: auto 0 0;
  padding: 72px 34px 32px;
  color: #fff;
  background: linear-gradient(to top, rgba(17, 26, 36, 0.92), transparent);
}

.about-card--place h3 {
  max-width: none;
  margin-bottom: 0;
}

.about-card--privacy {
  grid-column: span 7;
  min-height: 440px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 0.82fr);
  gap: 38px;
  align-items: center;
}

.about-privacy-ui {
  padding: 18px;
  background: var(--cream);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
}

.about-privacy-ui > span {
  display: block;
  margin-bottom: 6px;
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.about-setting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 64px;
  border-bottom: 1px solid var(--line);
  font-size: var(--text-sm);
  font-weight: 600;
}

.about-setting:last-child {
  border-bottom: 0;
}

.about-toggle {
  width: 42px;
  height: 24px;
  border-radius: 999px;
  background: var(--teal);
  padding: 3px;
  flex: 0 0 auto;
}

.about-toggle::after {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  margin-left: auto;
  border-radius: 50%;
  background: #fff;
}

.about-rhythm {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  min-height: 690px;
  background: var(--cream);
}

.about-rhythm__image {
  min-height: 690px;
  overflow: hidden;
}

.about-rhythm__image picture,
.about-rhythm__image img {
  display: block;
  width: 100%;
  height: 100%;
}

.about-rhythm__image img {
  object-fit: cover;
}

.about-rhythm__copy {
  padding: clamp(56px, 8vw, 120px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.about-rhythm__copy h2 {
  font-size: clamp(2.35rem, 3.6vw, 4rem);
  line-height: 1.02;
  margin: 16px 0 28px;
}

.about-rhythm__copy > p {
  color: var(--color-text-muted);
  line-height: 1.8;
  max-width: 52ch;
}

.about-city-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 34px;
}

.about-city-list span {
  border-top: 1px solid var(--line);
  padding: 14px 0;
  font-weight: 700;
}

.about-commitments {
  padding: 110px var(--pad-inline) 128px;
  background: #fff;
}

.about-commitment-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}

.about-commitment {
  padding: 30px 24px 34px 0;
  border-bottom: 1px solid var(--line);
}

.about-commitment + .about-commitment {
  padding-left: 24px;
  border-left: 1px solid var(--line);
}

.about-commitment span {
  display: block;
  color: var(--copper);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  margin-bottom: 42px;
}

.about-commitment h3 {
  font-size: var(--text-xl);
  margin-bottom: 12px;
}

.about-commitment p {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.65;
}

.about-closing {
  position: relative;
  min-height: 570px;
  display: grid;
  place-items: center;
  padding: 80px var(--pad-inline);
  text-align: center;
  color: #fff;
  overflow: hidden;
  background: var(--midnight);
}

.about-closing picture,
.about-closing img,
.about-closing::after {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.about-closing img {
  object-fit: cover;
}

.about-closing::after {
  content: "";
  background: rgba(17, 26, 36, 0.7);
}

.about-closing__copy {
  position: relative;
  z-index: 1;
  max-width: 800px;
}

.about-closing h2 {
  font-size: clamp(2.5rem, 4vw, 4.5rem);
  line-height: 1;
  margin: 16px 0 24px;
  text-wrap: balance;
}

.about-closing p {
  color: rgba(255, 255, 255, 0.78);
  margin: 0 auto 32px;
  max-width: 56ch;
  line-height: 1.7;
}

.dialog-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.dialog-actions .button-secondary {
  border-color: var(--line);
}

/* --------------------------------------------------------------------------
   26c. Overflow guards

   Long French words and unbroken strings must not widen a grid track past its
   container, which is what pushes a narrow layout into horizontal scroll.
   -------------------------------------------------------------------------- */

h1,
h2,
h3,
h4,
p,
li,
dd,
dt,
blockquote,
figcaption,
summary {
  overflow-wrap: break-word;
}

.member-grid > *,
.member-cards > *,
.city-layout > *,
.feature-story > *,
.event-layout > *,
.chat-preview > *,
.safety-grid > *,
.journey-grid > *,
.editorial-block > *,
.magazine > *,
.product-pair > *,
.grid-two > *,
.portrait-banner > *,
.post-list > *,
.settings-ui > *,
.dialog-actions > * {
  min-width: 0;
}

/* --------------------------------------------------------------------------
   26d. Photographs that fill a sized card

   Each of these cards is sized by its own height or min-height and carries the
   photograph behind the copy. A percentage height on the image cannot resolve
   against a parent whose height is auto — which is the case for a grid-stretched
   item and for a min-height-only box — so it falls back to the image's own
   aspect ratio and leaves the lower part of the card empty. Taking the image
   out of flow lets it fill the card whatever height the card ends up being.

   The copy in all of these is itself absolutely positioned inside the same box,
   with a z-index that keeps it above the photograph. .perspectives is the one
   exception: there the photograph and the copy are siblings in a two-column
   grid, so an image positioned against the article would be laid over the words
   rather than over its own column. Its <picture> therefore stops being
   display: contents and becomes the grid item instead, which gives the image a
   box of its own — the column — to fill.
   -------------------------------------------------------------------------- */

.page-hero figure,
.member,
.perspectives article,
.event-photo,
.event-cards article {
  position: relative;
}

/* The hero figure is sized by the photograph it holds, so it sets its own floor. */
.page-hero figure {
  min-height: 570px;
}

.perspectives picture {
  display: block;
  position: relative;
  overflow: hidden;
}

.page-hero img,
.member img,
.perspectives img,
.event-photo img,
.event-cards img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   27. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1180px) {
  .nav {
    gap: 14px;
    font-size: var(--text-xs);
  }

  .member-cards--four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .member-cards--four.member-cards--locked {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  /*
   * The two-column override for .member-cards--four holds a known count of four,
   * so it always fills. .category-grid must not be pinned the same way: its cell
   * count varies by page, and a fixed two columns leaves the odd cell alone on
   * its row against a bare strip of rule colour. Its own auto-fit rule is
   * already the right behaviour at this width.
   */
}

@media (max-width: 1050px) {
  .menu-button {
    display: grid;
  }

  .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--midnight);
    padding: 24px var(--gutter) 34px;
    align-items: stretch;
    flex-direction: column;
    gap: 4px;
    max-height: calc(100vh - var(--header-height));
    overflow-y: auto;
    font-size: var(--text-base);
    box-shadow: var(--shadow-menu);
  }

  .nav.open {
    display: flex;
  }

  .nav > .nav-join {
    padding: 14px 16px;
    gap: 12px;
  }

  .nav > a,
  .nav-dropdown > summary {
    padding: 14px 0;
    opacity: 1;
    border-bottom: 1px solid var(--line-on-dark);
    width: 100%;
    justify-content: space-between;
  }

  .nav-dropdown {
    width: 100%;
  }

  .nav-drop {
    position: static;
    width: 100%;
    box-shadow: none;
    margin: 6px 0 10px;
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
  }

  .nav-drop a:hover,
  .nav-drop a:focus-visible {
    background: rgba(255, 255, 255, 0.1);
  }

  .nav-login {
    border-bottom: 1px solid var(--line-on-dark);
    padding: 14px 0;
  }

  .nav-join {
    margin-top: 16px;
    text-align: center;
    padding: 15px;
  }

  .language {
    padding: 14px 0;
  }

  .journey-grid {
    gap: 30px;
  }

  .chat-preview {
    gap: 40px;
  }

  .footer-top {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 900px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
  }

  body > main,
  body > header,
  body > footer {
    min-width: 0;
    max-width: 100%;
  }

  :root {
    --gutter: 24px;
    /* Micro type steps up one notch so labels stay readable on a phone. */
    --text-xs: 0.8125rem;
    --text-sm: 0.875rem;
  }

  .content-list,
  .steps {
    grid-template-columns: 1fr;
    gap: 0;
  }

  /* Full-width menu rows are the primary navigation on a phone. */
  .nav-drop a {
    min-height: var(--touch-target);
    display: flex;
    align-items: center;
  }

  .section,
  .page-section,
  .feature-story,
  .chat-preview {
    padding-top: 78px;
    padding-bottom: 78px;
  }

  .member-grid,
  .city-layout,
  .feature-story,
  .event-layout,
  .chat-preview,
  .safety-grid,
  .magazine,
  .editorial-block,
  .journey-grid,
  .product-pair,
  .grid-two,
  .portrait-banner {
    grid-template-columns: 1fr;
  }

  .city-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .portrait-banner-rail {
    padding: 64px var(--pad-inline);
    max-width: none;
  }

  .portrait-banner {
    margin-inline: 0;
  }

  .app-showcase-inner {
    grid-template-columns: 1fr;
    gap: 42px;
  }

  .app-showcase-copy {
    max-width: 720px;
  }

  .app-showcase-visual {
    width: min(100%, 760px);
    margin-inline: auto;
  }

  .portrait-banner > picture,
  .portrait-banner > img {
    height: 440px;
  }

  .product-pair,
  .grid-two {
    gap: 40px;
  }

  .member-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    height: auto;
  }

  .member-grid .member {
    height: 420px;
  }

  .journey-grid ol {
    order: -1;
  }

  .profile-ui,
  .message-ui {
    transform: none;
  }

  .perspectives article {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .perspectives article > div {
    padding: 70px var(--gutter);
  }

  /*
   * Stacked, the <picture> is the grid item and the image inside it is absolute,
   * so the box that needs a height is the picture, not the image. The ratio
   * gives it one on narrow screens where the photo would otherwise collapse to
   * nothing, and the cap keeps it from running the full height of the page.
   */
  .perspectives picture {
    aspect-ratio: 4 / 3;
    max-height: 520px;
  }

  .baby-panel picture {
    order: 2;
  }

  .city-card {
    min-height: 204px;
  }

  .page-hero {
    grid-template-columns: 1fr;
  }

  .page-hero > div {
    padding: 84px var(--gutter) 64px;
  }

  .page-hero img {
    min-height: 440px;
    height: 440px;
  }

  .editorial-block--reverse > .editorial-image {
    order: 0;
  }

  .editorial-image img {
    height: 480px;
  }

  .wish-gallery,
  .event-cards,
  .rooms-grid,
  .card-grid,
  .card-grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .member-cards,
  .member-cards--four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .member-cards--four.member-cards--locked {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .invite-ui {
    grid-template-columns: 1fr 1fr;
  }

  .invite-ui > div {
    grid-column: 1 / -1;
  }

  .private-event .flow {
    display: flex;
    max-width: none;
    overflow-x: auto;
    margin-bottom: 42px;
    padding-bottom: 12px;
  }

  .private-event .flow span {
    flex: 0 0 180px;
  }

  .invite-showcase {
    grid-template-columns: 1fr;
    max-width: 760px;
  }

  .invite-showcase .invite-ui {
    grid-template-columns: repeat(3, minmax(0, auto));
  }

  .invite-benefits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .safety-page {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .safety-nav {
    position: static;
  }

  .post-list article {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .area-list {
    grid-template-columns: 1fr;
  }

  .simple-cta {
    flex-direction: column;
    align-items: flex-start;
    gap: 26px;
    padding-block: 64px;
  }
}

@media (max-width: 560px) {
  :root {
    --gutter: 20px;
    --header-height: 68px;
  }

  .portrait-banner > picture,
  .portrait-banner > img {
    height: 360px;
  }

  .hero {
    height: 100vh;
    height: 100dvh;
    min-height: 100svh;
    padding-bottom: 0;
  }

  .hero-photo {
    object-position: center top;
  }

  .hero-content {
    padding: clamp(164px, 31dvh, 270px) var(--gutter) 32px;
    width: 100%;
    text-align: center;
  }

  .hero-note {
    max-width: 280px;
    line-height: 1.5;
    margin-inline: auto;
  }

  .hero h1 {
    font-size: clamp(2.6rem, 12vw, 3.4rem);
  }

  .hero-content > p:not(.hero-note) {
    font-size: var(--text-base);
    margin-inline: auto;
  }

  .hero-content > .primary {
    margin-inline: auto;
  }

  .photo-credit {
    display: none;
  }

  .section-title {
    margin-bottom: 34px;
  }

  .app-showcase {
    padding-block: 68px;
  }

  .app-showcase-copy h2 {
    font-size: var(--text-3xl);
  }

  .app-showcase-list {
    margin-block: 26px 30px;
  }

  .section-title h2 {
    font-size: var(--text-3xl);
  }

  .member-grid {
    grid-template-columns: 1fr;
  }

  .member-grid .member {
    height: 400px;
  }

  .perspectives h2 {
    font-size: var(--text-3xl);
  }

  .city-layout {
    grid-template-columns: 1fr;
  }

  .city-card {
    min-height: 164px;
    grid-template-columns: 124px minmax(0, 1fr);
    gap: 16px;
    padding: 16px 0;
  }

  .city-card picture {
    min-height: 132px;
  }

  .city-card-copy {
    padding: 8px 4px 8px 0;
  }

  .city-card h3 {
    margin-bottom: 8px;
    font-size: var(--text-xl);
  }

  .wish-gallery,
  .event-cards,
  .rooms-grid,
  .card-grid,
  .card-grid--two,
  .member-cards,
  .member-cards--four,
  .category-grid {
    grid-template-columns: 1fr;
  }

  .member-cards .member {
    height: 400px;
  }

  .member-grid--locked,
  .member-cards--locked,
  .member-cards--four.member-cards--locked {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .member-grid--locked .member,
  .member-cards--locked .member {
    height: 310px;
  }

  .member-grid--locked .member-copy,
  .member-cards--locked .member-copy {
    padding: 16px;
  }

  .member-grid--locked .member-copy h3,
  .member-cards--locked .member-copy h3 {
    margin-top: 10px;
    font-size: var(--text-lg);
  }

  .member-grid--locked .member-copy small,
  .member-cards--locked .member-copy small {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .member-grid--locked .member::before,
  .member-cards--locked .member::before,
  .member-grid--locked .member::after,
  .member-cards--locked .member::after {
    top: 30%;
  }

  .chat-ui {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .room-list {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .active-chat {
    min-height: 360px;
  }

  .invite-ui {
    grid-template-columns: 1fr;
    padding: 22px;
  }

  .private-event > .section-title {
    margin-bottom: 34px;
    text-align: left;
  }

  .private-event > .section-title p {
    margin-inline: 0;
  }

  .invite-showcase .invite-ui {
    grid-template-columns: 1fr;
    padding: 22px;
  }

  .invite-showcase .invite-ui > div {
    min-height: 0;
  }

  .invite-showcase .invite-ui button {
    width: 100%;
  }

  .invite-benefits {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 40px;
  }

  .invite-benefits article {
    min-height: 0;
    padding: 20px;
  }

  .magazine > article {
    min-height: 480px;
    padding: 26px;
  }

  .faq summary {
    font-size: var(--text-lg);
    gap: 18px;
    padding: 22px 0;
  }

  .bottom-cta {
    min-height: 540px;
  }

  /* One category per row: two columns of prose are too narrow to read here. */
  .category-grid {
    grid-template-columns: 1fr;
  }

  .bottom-cta h2,
  .not-found h1 {
    font-size: var(--text-3xl);
  }

  .page-hero h1 {
    font-size: clamp(2.4rem, 10vw, 3rem);
  }

  .page-hero img {
    min-height: 320px;
    height: 320px;
  }

  .editorial-image img {
    height: 380px;
  }

  .editorial-block h2 {
    font-size: var(--text-2xl);
  }

  .content-list h3 {
    font-size: var(--text-xl);
  }

  .content-list article {
    grid-template-columns: 34px minmax(0, 1fr);
    padding: 26px 0;
  }

  .simple-cta h2 {
    font-size: var(--text-2xl);
  }

  .steps > li {
    padding: 26px 0 26px 46px;
  }

  .steps > li::before {
    top: 26px;
  }

  .form-card {
    padding: 22px;
  }

  .form-row {
    align-items: flex-start;
  }

  .card {
    padding: 24px;
  }

  .post-list img {
    height: 190px;
  }

  .moderation {
    display: grid;
    gap: 12px;
  }

  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 26px;
  }

  .footer-bottom {
    display: grid;
    gap: 12px;
    margin-top: 46px;
  }
}

@media (max-width: 1050px) {
  .audience-type-card dl {
    grid-template-columns: 96px minmax(0, 1fr);
  }

  .about-hero {
    grid-template-columns: 1fr 1fr;
    padding-top: 118px;
  }

  .about-hero__visual {
    min-height: 520px;
  }

  .about-card--privacy {
    grid-template-columns: 1fr;
  }

  .about-commitment-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .about-commitment:nth-child(4) {
    padding-left: 0;
    border-left: 0;
  }
}

@media (max-width: 760px) {
  .audience-profile {
    padding-block: 82px;
  }

  .audience-profile__intro {
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: start;
  }

  .audience-profile__intro h2 {
    font-size: clamp(2.25rem, 9vw, 3.25rem);
  }

  .audience-age-bands {
    grid-template-columns: 1fr;
    margin-bottom: 54px;
  }

  .audience-age-band,
  .audience-age-band + .audience-age-band {
    min-height: 0;
    padding: 24px 0;
    border-left: 0;
    border-bottom: 1px solid var(--line);
  }

  .audience-age-band:last-child {
    border-bottom: 0;
  }

  .audience-types-heading {
    display: grid;
    align-items: start;
  }

  .audience-type-grid {
    grid-template-columns: 1fr;
  }

  .audience-type-card {
    min-height: 0;
  }

  .audience-profile__note {
    align-items: start;
    flex-direction: column;
  }

  .about-hero {
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 116px var(--pad-inline) 56px;
    gap: 48px;
  }

  .about-hero h1 {
    font-size: clamp(2.3rem, 8vw, 3rem);
    max-width: 12ch;
  }

  .about-hero__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .about-hero__actions .primary,
  .about-hero__text-link {
    width: 100%;
    text-align: center;
  }

  .about-hero__visual {
    min-height: 480px;
  }

  .about-hero__visual picture {
    inset: 0 0 36px 18px;
  }

  .about-hero__stamp {
    width: min(300px, 82%);
    padding: 24px;
  }

  .about-intro {
    grid-template-columns: 1fr;
    gap: 34px;
    padding-block: 82px;
  }

  .about-intro h2 {
    max-width: 12ch;
  }

  .about-values,
  .about-commitments {
    padding-block: 82px;
  }

  .about-card--language,
  .about-card--respect,
  .about-card--place,
  .about-card--privacy {
    grid-column: 1 / -1;
  }

  .about-card,
  .about-card--place,
  .about-card--privacy {
    min-height: 360px;
  }

  .about-rhythm {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .about-rhythm__image {
    min-height: 480px;
  }

  .about-rhythm__copy {
    padding: 72px var(--pad-inline) 84px;
  }

  .about-commitment-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .about-commitment,
  .about-commitment + .about-commitment {
    padding: 26px 18px 30px 0;
    border-left: 0;
  }

  .about-commitment:nth-child(even) {
    padding-left: 18px;
    border-left: 1px solid var(--line);
  }

  .about-commitment:nth-child(5) {
    grid-column: 1 / -1;
  }
}

@media (max-width: 480px) {
  .audience-type-card {
    min-width: 0;
    padding: 26px 22px;
  }

  .audience-type-card__top {
    flex-wrap: wrap;
    gap: 12px;
  }

  .audience-type-card__age {
    max-width: 100%;
    white-space: normal;
  }

  .audience-type-card dl {
    grid-template-columns: 1fr;
  }

  .audience-type-card dt {
    padding-bottom: 2px;
    border-bottom: 0;
  }

  .audience-type-card dd {
    padding-top: 2px;
  }

  .about-hero__visual {
    min-height: 420px;
  }

  .about-card {
    padding: 28px 24px;
  }

  .about-card--place {
    padding: 0;
  }

  .about-city-list,
  .about-commitment-grid {
    grid-template-columns: 1fr;
  }

  .about-commitment,
  .about-commitment + .about-commitment,
  .about-commitment:nth-child(even) {
    padding: 24px 0 28px;
    border-left: 0;
  }

  .about-commitment span {
    margin-bottom: 24px;
  }

  .about-rhythm__image {
    min-height: 390px;
  }

  .about-closing {
    min-height: 620px;
  }
}

/* --------------------------------------------------------------------------
   28. Guide editorial modules
   -------------------------------------------------------------------------- */

.guide-overview {
  background: var(--porcelain);
}

.guide-overview .section-title {
  max-width: 760px;
  margin-bottom: 42px;
}

.guide-city-grid,
.guide-scenario-grid {
  display: grid;
  gap: 18px;
}

.guide-city-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.guide-city-card,
.guide-scenario-card {
  min-width: 0;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
}

.guide-city-card {
  display: flex;
  min-height: 270px;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.guide-city-card:hover,
.guide-city-card:focus-visible {
  transform: translateY(-3px);
  border-color: var(--copper);
  box-shadow: var(--shadow-soft);
}

.guide-city-card > span,
.guide-scenario-card > span,
.guide-path-card > span {
  color: var(--copper);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.guide-city-card h3,
.guide-scenario-card h3,
.guide-path-card h3,
.guide-do-dont h3 {
  margin: 18px 0 10px;
  font-size: var(--text-xl);
}

.guide-city-card p,
.guide-scenario-card p,
.guide-path-card p,
.guide-do-dont li {
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
}

.guide-city-card b {
  margin-top: auto;
  padding-top: 22px;
  color: var(--wine);
  font-size: var(--text-sm);
}

.guide-season-strip,
.guide-choice-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 22px;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--midnight);
  color: #fff;
}

.guide-season-strip article,
.guide-choice-strip article {
  padding: 25px 26px 28px;
  border-left: 1px solid rgba(255, 255, 255, 0.16);
}

.guide-season-strip article:first-child,
.guide-choice-strip article:first-child {
  border-left: 0;
}

.guide-season-strip strong,
.guide-choice-strip strong {
  display: block;
  margin-bottom: 7px;
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 500;
}

.guide-season-strip span,
.guide-choice-strip span {
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.guide-scenario-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.guide-scenario-card {
  min-height: 220px;
}

.guide-scenario-card dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 14px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: var(--text-sm);
}

.guide-scenario-card dt {
  color: var(--color-text-muted);
}

.guide-scenario-card dd {
  margin: 0;
  text-align: right;
  font-weight: 600;
}

.guide-choice-strip {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.guide-path {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--line);
}

.guide-path-card {
  min-height: 230px;
  padding: 26px 24px;
  background: #fff;
}

.guide-do-dont {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 22px;
}

.guide-do-dont article {
  padding: 32px;
  border-radius: var(--radius-lg);
}

.guide-do-dont article:first-child {
  background: var(--ice);
}

.guide-do-dont article:last-child {
  background: var(--midnight);
  color: #fff;
}

.guide-do-dont article:last-child li {
  color: rgba(255, 255, 255, 0.75);
}

.guide-do-dont ul {
  display: grid;
  gap: 12px;
  margin: 18px 0 0;
  padding-left: 20px;
}

.guide-editorial-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.guide-editorial-card {
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-soft);
}

.guide-editorial-card picture {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.guide-editorial-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.guide-editorial-card__copy {
  padding: 30px 32px 34px;
}

.guide-editorial-card__copy h2 {
  max-width: 18ch;
  margin: 12px 0 12px;
  font-size: clamp(1.7rem, 3vw, 2.5rem);
}

.guide-editorial-card__copy p {
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
}

.guide-editorial-card__copy ul {
  display: grid;
  gap: 10px;
  margin: 20px 0 0;
  padding-left: 20px;
  color: var(--color-text-muted);
}

.guide-full-article {
  padding-top: 0;
}

.guide-full-text {
  max-width: 860px;
  margin: 0 auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
}

.guide-full-text > summary {
  display: flex;
  min-height: 72px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 26px;
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  list-style: none;
}

.guide-full-text > summary::-webkit-details-marker {
  display: none;
}

.guide-full-text > summary::after {
  content: "+";
  color: var(--copper);
  font-family: var(--font-body);
  font-size: 1.5rem;
}

.guide-full-text[open] > summary::after {
  content: "−";
}

.guide-full-text[open] > summary {
  border-bottom: 1px solid var(--line);
}

.guide-full-text .prose {
  padding: 36px 28px 48px;
}

/* How it works: interface screens ----------------------------------------- */

.interface-showcase .section-title {
  margin-bottom: 40px;
}

.interface-showcase .journey-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 42px 56px;
  width: min(100%, 1120px);
  margin-inline: auto;
}

.interface-showcase .journey-grid > ol {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  order: -1;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: interface-step;
}

.interface-showcase .journey-grid > ol li {
  position: relative;
  min-height: 94px;
  padding: 18px 46px 18px 20px;
  border: 1px solid rgba(47, 96, 94, 0.32);
  border-radius: var(--radius-md);
  background: transparent;
  box-shadow: none;
  counter-increment: interface-step;
}

.interface-showcase .journey-grid > ol li::before {
  content: "0" counter(interface-step);
  display: block;
  margin-bottom: 8px;
  color: var(--copper);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
}

.interface-showcase .journey-grid > ol li b {
  display: block;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.interface-showcase .journey-grid > ol li > span {
  position: absolute;
  right: 18px;
  bottom: 18px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(177, 102, 60, 0.38);
  border-radius: var(--radius-circle);
  color: var(--copper);
}

.interface-showcase .profile-ui,
.interface-showcase .message-ui {
  width: 100%;
  padding: 18px;
}

.interface-showcase .profile-ui {
  transform: rotate(-1deg);
}

.interface-showcase .profile-ui img {
  height: clamp(280px, 28vw, 380px);
}

.interface-showcase .profile-ui .tag-row {
  margin-top: 16px;
}

.interface-showcase .message-ui {
  display: flex;
  min-height: 360px;
  flex-direction: column;
  margin-top: 44px;
  transform: rotate(1deg);
}

.interface-showcase .message-ui > div:not(.reply),
.interface-showcase .message-ui .reply {
  padding: 18px;
}

.interface-showcase .message-ui button {
  min-height: 48px;
  margin-top: auto;
}

/* Dating tips: open editorial guide ---------------------------------------- */

.tips-detail-section {
  display: grid;
  grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.8fr);
  align-items: start;
  gap: clamp(36px, 5vw, 72px);
  background: var(--ice);
}

.tips-detail-intro {
  position: sticky;
  top: 108px;
  margin: 0;
  padding-top: 22px;
  border-top: 1px solid var(--line-strong);
}

.tips-detail-intro h2 {
  max-width: 11ch;
  font-size: clamp(2.1rem, 3.2vw, 3.2rem);
}

.tips-detail-count {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.tips-detail-count strong {
  font: 400 clamp(3rem, 5vw, 4.6rem) / 0.85 var(--font-heading);
  color: var(--wine);
}

.tips-detail-count span {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.tips-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.tips-detail-card {
  min-height: 0;
  padding: 28px;
  border-top: 3px solid var(--copper);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-soft);
}

.tips-detail-card--photos {
  background: var(--sand);
}

.tips-detail-card--limits {
  grid-column: 1 / -1;
  border-top-color: var(--wine);
  background: var(--midnight);
  color: #fff;
}

.tips-detail-card h3 {
  margin: 12px 0 14px;
  font-size: var(--text-xl);
}

.tips-detail-card p,
.tips-detail-card li {
  color: var(--color-text-muted);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
}

.tips-detail-card p + p {
  margin-top: 12px;
}

.tips-detail-card ul {
  display: grid;
  gap: 9px;
  margin: 18px 0 0;
  padding-left: 20px;
}

.tips-detail-card--limits ul {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  padding-left: 0;
  list-style: none;
}

.tips-detail-card--limits li {
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.tips-detail-card--limits p,
.tips-detail-card--limits li {
  color: rgba(255, 255, 255, 0.78);
}

.tips-safety-link {
  display: flex;
  width: fit-content;
  min-height: 52px;
  align-items: center;
  justify-content: space-between;
  gap: 42px;
  margin: 24px 0 0 auto;
  padding: 13px 18px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 700;
  transition: color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out);
}

.tips-safety-link:hover {
  border-color: var(--wine);
  color: var(--wine);
}

.tips-caution {
  padding-bottom: 40px;
}

.tips-follow-up {
  padding-top: 0;
  padding-bottom: 32px;
}

.tips-follow-up + .faq {
  padding-top: 64px;
}

.tips-follow-up__panel {
  display: grid;
  grid-template-columns: minmax(280px, 0.85fr) minmax(0, 1.4fr);
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--midnight);
  color: #fff;
  box-shadow: var(--shadow-soft);
}

.tips-follow-up__intro {
  padding: 48px;
}

.tips-follow-up__intro h2 {
  max-width: 12ch;
  margin: 12px 0 16px;
  font-size: clamp(2rem, 4vw, 3.4rem);
}

.tips-follow-up__intro p {
  max-width: 42ch;
  color: rgba(255, 255, 255, 0.72);
  line-height: var(--leading-relaxed);
}

.tips-follow-up__choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-left: 1px solid rgba(255, 255, 255, 0.14);
}

.tips-follow-up__choices article {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  justify-content: center;
  padding: 42px 36px;
}

.tips-follow-up__choices article + article {
  border-left: 1px solid rgba(255, 255, 255, 0.14);
}

.tips-follow-up__choices h3 {
  margin: 12px 0 14px;
  font-size: var(--text-xl);
}

.tips-follow-up__choices p {
  color: rgba(255, 255, 255, 0.72);
  line-height: var(--leading-relaxed);
}

@media (max-width: 980px) {
  .guide-city-grid,
  .guide-scenario-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .guide-path {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .guide-path-card:last-child {
    grid-column: 1 / -1;
  }

  .tips-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tips-detail-section {
    display: block;
  }

  .tips-detail-intro {
    position: static;
    margin-bottom: 36px;
  }

  .tips-detail-card {
    grid-column: auto;
  }

  .tips-detail-card--limits {
    grid-column: 1 / -1;
  }

  .tips-follow-up__panel {
    grid-template-columns: 1fr;
  }

  .tips-follow-up__choices {
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    border-left: 0;
  }

  .interface-showcase .journey-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .interface-showcase .journey-grid > ol {
    grid-column: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    order: -1;
    gap: 10px;
  }

  .interface-showcase .profile-ui,
  .interface-showcase .message-ui {
    transform: none;
  }

  .interface-showcase .message-ui {
    min-height: 0;
    margin-top: 0;
  }
}

@media (max-width: 680px) {
  .guide-overview .section-title {
    margin-bottom: 30px;
  }

  .guide-city-grid,
  .guide-scenario-grid,
  .guide-path,
  .guide-do-dont,
  .guide-editorial-pair {
    grid-template-columns: 1fr;
  }

  .guide-city-card,
  .guide-scenario-card,
  .guide-path-card {
    min-height: 0;
    padding: 24px;
  }

  .guide-path-card:last-child {
    grid-column: auto;
  }

  .guide-season-strip,
  .guide-choice-strip {
    grid-template-columns: 1fr;
  }

  .guide-season-strip article,
  .guide-choice-strip article {
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    border-left: 0;
  }

  .guide-season-strip article:first-child,
  .guide-choice-strip article:first-child {
    border-top: 0;
  }

  .guide-editorial-card__copy {
    padding: 26px 24px 30px;
  }

  .guide-full-text > summary {
    padding: 18px 20px;
  }

  .guide-full-text .prose {
    padding: 30px 20px 38px;
  }

  .tips-detail-grid,
  .tips-follow-up__choices {
    grid-template-columns: 1fr;
  }

  .tips-detail-card,
  .tips-detail-card--limits {
    min-height: 0;
    grid-column: auto;
    padding: 26px 24px;
  }

  .tips-detail-card--limits ul {
    grid-template-columns: 1fr;
  }

  .tips-safety-link {
    width: 100%;
    margin-top: 18px;
  }

  .tips-follow-up {
    padding-top: 0;
    padding-bottom: 20px;
  }

  .tips-follow-up + .faq {
    padding-top: 52px;
  }

  .tips-follow-up__intro {
    padding: 34px 26px;
  }

  .tips-follow-up__choices article {
    padding: 30px 26px;
  }

  .tips-follow-up__choices article + article {
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    border-left: 0;
  }

  .interface-showcase .section-title {
    margin-bottom: 32px;
  }

  .interface-showcase .journey-grid {
    gap: 30px;
  }

  .interface-showcase .journey-grid > ol li {
    min-height: 100px;
    padding: 16px 48px 16px 16px;
  }

  .interface-showcase .journey-grid > ol li > span {
    right: 14px;
    bottom: 16px;
  }

  .interface-showcase .profile-ui,
  .interface-showcase .message-ui {
    padding: 12px;
  }

  .interface-showcase .profile-ui img {
    height: auto;
    aspect-ratio: 4 / 3;
  }
}

/* --------------------------------------------------------------------------
   29. Print
   -------------------------------------------------------------------------- */

.quebec-walkable {
  gap: clamp(32px, 5vw, 72px);
  padding-bottom: 40px;
}

.quebec-walkable + .section {
  padding-top: 40px;
}

.quebec-walkable .section-title {
  margin-bottom: 24px;
}

.quebec-walkable .editorial-image {
  margin: 0;
}

.quebec-walkable .editorial-image img {
  height: clamp(380px, 34vw, 500px);
  border-radius: var(--radius-xl);
}

@media (max-width: 900px) {
  .quebec-walkable .editorial-image img {
    height: auto;
    aspect-ratio: 3 / 2;
  }
}

/* Editorial articles: readable text, visible contents and distinct visual breaks. */
.guide-practical-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.guide-practical-grid article {
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white);
}

.guide-practical-grid h3 {
  margin: 16px 0;
  font-size: 1.65rem;
  line-height: 1.2;
}

.guide-practical-grid p,
.feature-context p,
.safety-source p {
  line-height: 1.8;
}

.guide-practical-links {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 28px;
}

.guide-practical-links a,
.feature-context a,
.safety-source a {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.feature-context {
  display: flex;
  align-items: baseline;
  gap: 24px;
  padding: 22px var(--pad-inline);
  border-bottom: 1px solid var(--line);
  font-size: var(--text-sm);
}

.feature-context p {
  flex: 1;
  max-width: 90ch;
}

.feature-context a {
  flex-shrink: 0;
}

.safety-source {
  border-top: 1px solid var(--line);
}

.safety-source h2 {
  font-size: var(--text-2xl);
  margin: 18px 0;
}

.safety-source p {
  max-width: 75ch;
  margin-bottom: 20px;
}

@media (max-width: 680px) {
  .guide-practical-grid {
    grid-template-columns: 1fr;
  }

  .guide-practical-grid article {
    padding: 24px;
  }

  .feature-context {
    flex-direction: column;
    gap: 12px;
  }
}

.journal-page {
  --journal-width: 1120px;
}

.journal-header,
.journal-cover,
.journal-layout,
.journal-related,
.author-profile,
.journal-editorial-policy {
  width: min(calc(100% - 2 * var(--gutter)), var(--journal-width));
  margin-inline: auto;
}

.journal-header {
  padding-block: 64px 40px;
}

.journal-back {
  display: block;
  width: fit-content;
  margin-bottom: 40px;
  color: var(--teal);
  font-size: var(--text-sm);
}

.journal-header h1 {
  max-width: 940px;
  margin: 18px 0 24px;
  font-size: clamp(2.1rem, 4vw, 3.6rem);
  line-height: 1.1;
  text-wrap: balance;
}

.journal-deck {
  max-width: 80ch;
  line-height: 1.8;
  color: var(--color-text-muted);
}

.journal-byline {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  padding-top: 24px;
  margin-top: 24px;
  border-top: 1px solid var(--line);
  font-size: var(--text-sm);
}

.journal-byline a,
.journal-text-link,
.journal-source a,
.journal-related a,
.journal-author a,
.journal-policy-grid a {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.journal-cover {
  margin-block: 0 56px;
}

.journal-cover img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 1.65;
  object-fit: cover;
  border-radius: 16px;
}

.journal-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  align-items: start;
  gap: 64px;
}

.journal-toc {
  position: sticky;
  top: calc(var(--header-height) + 28px);
  border-top: 2px solid var(--teal);
  padding-top: 22px;
}

.journal-toc ol {
  padding-left: 20px;
  margin: 20px 0 0;
}

.journal-toc li {
  padding: 0 0 15px 6px;
  font-size: var(--text-sm);
  line-height: 1.55;
}

.journal-toc a:hover,
.journal-toc a[aria-current="true"] {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.journal-content {
  min-width: 0;
  font-size: var(--text-md);
  line-height: 1.85;
}

.journal-section {
  scroll-margin-top: calc(var(--header-height) + 24px);
  margin-bottom: 44px;
}

.journal-section h2 {
  margin: 0 0 20px;
  font-size: clamp(1.65rem, 2.2vw, 2.1rem);
  line-height: 1.2;
}

.journal-section p + p,
.site-role-note p + p {
  margin-top: 20px;
}

.journal-figure {
  margin: 8px 0 44px;
}

.journal-figure img {
  width: 100%;
  height: auto;
  border-radius: 12px;
}

.journal-figure figcaption {
  margin-top: 12px;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.journal-note {
  padding: 28px 32px;
  margin: 0 0 44px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--ice);
}

.journal-note p {
  margin-top: 14px;
  font-family: var(--font-heading);
  font-size: 1.5rem;
  line-height: 1.4;
}

.journal-source {
  padding-top: 26px;
  border-top: 1px solid var(--line);
  font-size: var(--text-sm);
  line-height: 1.7;
}

.journal-source p {
  margin: 12px 0;
}

.journal-author {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr);
  gap: 26px;
  margin-block: 40px;
  padding: 28px;
  border-radius: 14px;
  background: #fff;
  font-size: var(--text-sm);
  line-height: 1.7;
}

.journal-author img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
}

.journal-author h2 {
  font-size: 1.6rem;
  margin: 10px 0;
}

.journal-author p {
  margin-bottom: 14px;
}

.journal-related {
  margin-block: 24px 72px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}

.journal-related h2,
.journal-editorial-policy > h2 {
  font-size: 2rem;
  margin-bottom: 24px;
}

.journal-related > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.journal-related a {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 10px;
  line-height: 1.65;
}

.journal-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}

.journal-post-list article {
  align-items: center;
  gap: 40px;
}

.journal-post-list h2 {
  font-size: clamp(1.65rem, 2.5vw, 2.2rem);
}

.journal-post-list .post-meta {
  margin-block: 20px;
}

.journal-post-list .journal-card-image {
  display: block;
  height: 260px;
}

.author-profile {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  align-items: center;
  gap: 64px;
  padding-block: 80px 64px;
}

.author-profile__portrait img {
  width: 100%;
  height: auto;
  border-radius: 16px;
}

.author-profile h1 {
  margin: 18px 0 22px;
  font-size: clamp(2.3rem, 4vw, 3.5rem);
}

.author-profile p {
  line-height: 1.8;
  margin-top: 18px;
}

.author-profile__lead {
  font-family: var(--font-heading);
  font-size: 1.6rem;
}

.journal-editorial-policy {
  margin-bottom: 64px;
}

.journal-policy-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.journal-policy-grid article {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 28px;
}

.journal-policy-grid h3 {
  font-size: 1.5rem;
  margin-bottom: 16px;
}

.journal-policy-grid p,
.site-role-note p {
  line-height: 1.8;
}

.site-role-note {
  border-top: 1px solid var(--line);
}

.site-role-note h2 {
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  margin: 18px 0 24px;
}

.site-role-note p {
  max-width: 80ch;
}

@media (max-width: 900px) {
  .blog-index .page-hero > div {
    width: 100%;
    min-width: 0;
    padding-top: 32px;
  }

  .blog-index .page-hero figure {
    order: -1;
    margin: 44px var(--gutter) 0;
    min-width: 0;
    min-height: 0;
    aspect-ratio: 3 / 2;
    border-radius: var(--radius-xl);
  }

  .blog-index .page-hero img {
    min-height: 0;
    height: 100%;
  }

  .blog-index .post-list,
  .blog-index .post-list article {
    width: 100%;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
  }

  .blog-index .post-list article > * {
    min-width: 0;
    max-width: 100%;
  }

  .blog-index .journal-post-list article {
    gap: 24px;
  }

  .blog-index .journal-card-image {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
  }

  .blog-index .post-list img {
    height: 100%;
  }

  .blog-index .post-list h2,
  .blog-index .post-list p,
  .journal-content a {
    overflow-wrap: anywhere;
  }

  .journal-layout {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .journal-toc {
    position: static;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 24px;
  }

  .journal-toc ol {
    columns: 2;
    column-gap: 36px;
  }

  .journal-toc li {
    break-inside: avoid;
  }

  .author-profile {
    gap: 32px;
  }

  .journal-related > div,
  .journal-policy-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .journal-header {
    padding-top: 36px;
  }

  .journal-back {
    margin-bottom: 28px;
  }

  .journal-cover {
    margin-bottom: 32px;
  }

  .journal-cover img {
    aspect-ratio: 4 / 3;
  }

  .journal-toc ol {
    columns: 1;
  }

  .journal-author {
    grid-template-columns: 1fr;
    padding: 24px;
    gap: 18px;
  }

  .journal-note {
    padding: 24px;
  }

  .author-profile {
    grid-template-columns: 1fr;
    padding-top: 36px;
  }

  .author-profile__portrait {
    max-width: 320px;
  }
}

@media print {
  .site-header,
  .site-footer,
  .bottom-cta,
  .simple-cta,
  .skip-link {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
  }
}