/* ==========================================================================
   Lowqé — main stylesheet
   1. Fonts   2. Tokens   3. Base   4. Layout   5. Type   6. Components
   7. Home    8. About    9. Journal & articles   10. Privacy   11. Motion
   Mobile first. Breakpoints: 640px (tablet), 900px (tablet landscape), 1025px (desktop).
   ========================================================================== */


/* 1. Fonts — self-hosted, SIL Open Font License (see css/fonts/OFL-*.txt)
   ========================================================================== */

@font-face {
  font-family: "Archivo Expanded";
  src: url("fonts/archivo-700-wdth120-latin.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("fonts/inter-latin-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}


/* 2. Tokens
   ========================================================================== */

:root {
  color-scheme: only light;   /* always light, also when a browser forces dark mode (Chrome on Android) */

  /* Brand palette */
  --bg: #F1EEE8;          /* warm off-white */
  --ink: #1E1D1B;         /* graphite */
  --accent: #B87A2A;      /* amber: large text and details only (3.1:1 on off-white) */
  --sand: #EADFCB;        /* warm sand */
  --muted: #6B665E;       /* secondary text (4.9:1 on off-white) */

  /* Contrast-safe variants (WCAG AA) */
  --accent-on-sand: #9A6220;   /* 3.8:1 on sand, large heading text */
  --muted-on-sand: #5C574F;    /* 5.4:1 on sand */
  --sand-deep: #E4D8C3;        /* deeper sand for solid blocks and the footer */
  --accent-deep: #7A4F18;      /* small amber text on sand: 5.0:1 on #E4D8C3 */
  --accent-deepest: #5A3A0E;   /* dark amber for large text over the bright stream: 3.3:1 at its darkest */
  --error: #A3321F;            /* 6.0:1 on off-white */

  --line: rgba(30, 29, 27, 0.14);
  --line-strong: rgba(30, 29, 27, 0.32);

  /* Roles. Dark and sand sections override these, so components adapt. */
  --text: var(--ink);
  --text-soft: var(--muted);
  --heading-accent: var(--accent);
  --rule: var(--line);
  --lift: rgba(255, 255, 255, 0.5);   /* soft hover highlight; only raises contrast */
  --focus: var(--ink);

  /* Type */
  --font-display: "Archivo Expanded", "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --fs-display: clamp(1.75rem, 10vw, 5.75rem);
  --fs-h2: clamp(1.75rem, 1rem + 3.4vw, 3.75rem);
  --fs-h3: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --fs-lead: clamp(1.125rem, 1.02rem + 0.45vw, 1.375rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.875rem;
  --fs-label: 0.75rem;

  /* Space and layout */
  --gutter: 16px;
  --max: 1280px;
  --measure: 42rem;
  --section-y: clamp(4.5rem, 3rem + 6vw, 9rem);
  --head-gap: clamp(2.5rem, 1.75rem + 3vw, 5rem);
  --header-h: 64px;

  --radius-btn: 6px;
  --radius: 10px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* Icons (drawn with CSS masks so they inherit the text color) */
  --icon-ne: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.8 9.2 9 3M3.8 2.6H9.4V8.2' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E");
  --icon-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 1.2v9.2M2.2 6.6 6 10.4l3.8-3.8' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E");
  --icon-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.2 6h9.2M6.6 2.2 10.4 6 6.6 9.8' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E");
}

@media (min-width: 640px) {
  :root {
    --gutter: 32px;
    --header-h: 72px;
  }
}

@media (min-width: 1025px) {
  :root {
    --gutter: 48px;
    --fs-body: 1.125rem;
  }
}


/* 3. Base
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 12px);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text-soft);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote {
  margin: 0;
}

ul[class],
ol[class] {
  list-style: none;
  padding: 0;
}

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

a {
  color: inherit;
}

strong {
  font-weight: 600;
  color: var(--text);
}

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

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

::selection {
  background: var(--sand);
  color: var(--ink);
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 100;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-btn);
  background: var(--ink);
  color: var(--bg);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}


/* 4. Layout
   ========================================================================== */

.container {
  width: 100%;
  max-width: calc(var(--max) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  position: relative;
  padding-block: var(--section-y);
}

/* Deep sand block (solid): graphite text 11.9:1, secondary #5C574F 5.1:1, amber headings #9A6220 3.6:1 */
.section--deep {
  --text-soft: var(--muted-on-sand);
  --heading-accent: var(--accent-on-sand);
  --rule: rgba(30, 29, 27, 0.18);
  --lift: rgba(255, 255, 255, 0.35);
  background: var(--sand-deep);
  color: var(--text-soft);
}

/* Warm sand panel */
.section--sand {
  --text-soft: var(--muted-on-sand);
  --heading-accent: var(--accent-on-sand);
  --rule: rgba(30, 29, 27, 0.18);
  background: var(--sand);
  color: var(--text-soft);
}

/* Two light sections in a row share one gap instead of two. */
.section:not(.section--deep):not(.section--sand) + .section:not(.section--deep):not(.section--sand) {
  padding-top: 0;
}

.flow > * + * {
  margin-top: 1.1em;
}


/* 5. Type
   ========================================================================== */

.display,
.h2,
.h3 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text);
  text-wrap: balance;
}

.display {
  font-size: var(--fs-display);
  line-height: 0.94;
  letter-spacing: -0.012em;
}

.h2 {
  font-size: var(--fs-h2);
  line-height: 0.98;
  letter-spacing: -0.01em;
}

.h3 {
  font-size: var(--fs-h3);
  line-height: 1.15;
  letter-spacing: 0.005em;
}

/* Amber end of a heading */
.accent {
  color: var(--heading-accent);
}

.label {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text);
}

.lead {
  max-width: 36rem;
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--text-soft);
}


/* 6. Components
   ========================================================================== */

/* --- Wordmark ---------------------------------------------------------------
   To switch to an SVG logo later, replace the two rules marked "logo" with:
     .wordmark { width: 120px; height: 28px; background: url("../image/logo.svg") left center / contain no-repeat; }
     .wordmark__text { visibility: hidden; }
   The footer is sand now, so the same dark logo works there too.               */

.wordmark {                                   /* logo */
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-decoration: none;
}

.wordmark__accent {                           /* logo */
  color: var(--accent);
}

/* On the sand footer the é uses the deeper amber (3.6:1, large text). */
.site-footer .wordmark__accent {
  color: var(--accent-on-sand);
}

/* --- Icons ----------------------------------------------------------------- */

.icon {
  display: inline-block;
  flex: none;
  width: 0.75em;
  height: 0.75em;
  background-color: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
  transition: transform 0.25s var(--ease);
}

.icon--ne    { --icon: var(--icon-ne); }
.icon--down  { --icon: var(--icon-down); }
.icon--right { --icon: var(--icon-right); }

/* --- Buttons and links ----------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65em;
  min-height: 48px;
  padding: 0.75rem 1.3rem;
  border: 0;
  border-radius: var(--radius-btn);
  background: var(--ink);
  color: var(--bg);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s var(--ease);
}

.btn:hover {
  background: #3A3834;
}


.btn--sm {
  min-height: 44px;
  padding: 0.6rem 1rem;
  font-size: 0.875rem;
}

.btn:hover .icon--ne,
.link:hover .icon--ne {
  transform: translate(2px, -2px);
}

.btn:hover .icon--down,
.link:hover .icon--down {
  transform: translateY(2px);
}

.link:hover .icon--right {
  transform: translateX(3px);
}

.link {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-height: 44px;
  color: var(--text);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.35em;
  transition: text-decoration-color 0.2s var(--ease);
}

.link:hover {
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.75rem;
}

/* --- Section label: "01 / WHAT WE DO" -------------------------------------- */

.section-label {
  display: flex;
  align-items: baseline;
  gap: 0.6em;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  margin-bottom: clamp(1.75rem, 1.25rem + 2vw, 3rem);
}

.section-label__sep {
  color: var(--text-soft);
}

/* --- Section head: label, heading, intro ----------------------------------- */

.section-head {
  margin-bottom: var(--head-gap);
}

.section-head .h2 {
  max-width: 20ch;
}

.section-head__intro {
  max-width: var(--measure);
  margin-top: clamp(1.25rem, 1rem + 1vw, 2rem);
}

/* Small side note next to a section heading ("Five steps. Both sides. One conversation.") */
.section-head__note {
  max-width: 17em;
  line-height: 1.6;
}

@media (min-width: 900px) {
  .section-head__note {
    text-align: right;
    padding-bottom: 0.35em;
  }
}

/* --- Header ---------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-h);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease);
}

/* Blur lives on a pseudo-element so it doesn't trap the fixed mobile menu. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(241, 238, 232, 0.86);
  -webkit-backdrop-filter: saturate(1.2) blur(14px);
  backdrop-filter: saturate(1.2) blur(14px);
}

.site-header.is-scrolled {
  border-bottom-color: var(--line);
}

.site-header__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.site-nav__list {
  display: flex;
  margin: 0;
}

.site-nav__link {
  display: block;
  color: var(--ink);
  text-decoration: none;
}

.site-nav__link[aria-current="page"],
.site-nav__link.is-active {
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.45em;
}

/* Mobile: "Menu" button and full-screen panel */
.menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 44px;
  margin-right: -0.5rem;
  padding: 0.5rem;
  border: 0;
  background: none;
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
}

.menu-toggle__icon {
  position: relative;
  width: 20px;
  height: 10px;
}

.menu-toggle__icon::before,
.menu-toggle__icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  transition: transform 0.25s var(--ease), top 0.25s var(--ease);
}

.menu-toggle__icon::before { top: 0; }
.menu-toggle__icon::after  { top: 8px; }

.menu-toggle[aria-expanded="true"] .menu-toggle__icon::before {
  top: 4px;
  transform: rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__icon::after {
  top: 4px;
  transform: rotate(-45deg);
}

@media (max-width: 639.98px) {
  .site-nav {
    position: fixed;
    inset: var(--header-h) 0 0 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2rem;
    padding: 1.5rem var(--gutter) calc(1.5rem + env(safe-area-inset-bottom));
    overflow-y: auto;
    background: var(--bg);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0s linear 0.25s;
  }

  .nav-open .site-nav {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
  }

  .nav-open {
    overflow: hidden;
  }

  .nav-open .site-header::before {
    background: var(--bg);
  }

  .site-nav__list {
    flex-direction: column;
    border-top: 1px solid var(--line);
  }

  .site-nav__list li {
    border-bottom: 1px solid var(--line);
  }

  .site-nav__link {
    padding: 1.1rem 0;
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.1;
    text-transform: uppercase;
  }

  .site-nav__link[aria-current="page"],
  .site-nav__link.is-active {
    text-decoration: none;
  }

  .site-nav__link[aria-current="page"]::after,
  .site-nav__link.is-active::after {
    content: "";
    display: inline-block;
    width: 0.3em;
    height: 0.3em;
    margin-left: 0.4em;
    border-radius: 50%;
    background: var(--accent);
    vertical-align: middle;
  }

  .site-nav__cta {
    width: 100%;
    min-height: 56px;
    font-size: 1rem;
  }
}

@media (min-width: 640px) {
  .menu-toggle {
    display: none;
  }

  .site-nav {
    display: flex;
    align-items: center;
    gap: clamp(1.25rem, 3vw, 2.5rem);
  }

  .site-nav__list {
    gap: clamp(1.25rem, 2.6vw, 2.25rem);
  }

  .site-nav__link {
    padding: 0.75rem 0;
    font-size: 0.9375rem;
    font-weight: 500;
  }

  .site-nav__link:hover {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.45em;
  }
}

/* --- Footer ---------------------------------------------------------------- */

.site-footer {
  --text-soft: var(--muted-on-sand);   /* 5.1:1 on the deep sand */
  padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem) 2rem;
  border-top: 1px solid rgba(30, 29, 27, 0.12);   /* separates it from a sand block above */
  background: var(--sand-deep);
  color: var(--text-soft);
  font-size: 0.9375rem;
}

.site-footer__top {
  display: grid;
  gap: 2.5rem;
}

.site-footer__brand p {
  max-width: 24rem;
  margin-top: 1.25rem;
}

.site-footer__title {
  margin-bottom: 0.75rem;
  color: var(--text-soft);
}

.site-footer__list li {
  padding-block: 0.3rem;
}

.site-footer a {
  color: var(--ink);
  text-decoration: none;
}

.site-footer a:hover {
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

.site-footer__list a {
  display: inline-block;
  padding-block: 0.15rem;
}

/* Small block under the contact details ("For brands & creators") */
.site-footer__title--sub {
  margin-top: 1.75rem;
}

.site-footer__note {
  max-width: 18rem;
}

/* Quiet signature on the right of the bottom row */
.site-footer__tagline {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.site-footer__bottom {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: clamp(3rem, 2rem + 4vw, 5rem);
  padding-top: 1.5rem;
  border-top: 1px solid rgba(30, 29, 27, 0.14);
  font-size: 0.8125rem;
}

.site-footer__bottom a {
  display: inline-block;
  padding-block: 0.4rem;
}

@media (min-width: 640px) {
  .site-footer__top {
    grid-template-columns: 1fr 1fr;
  }

  .site-footer__brand {
    grid-column: 1 / -1;
  }

  .site-footer__bottom {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 2rem;
  }

  .site-footer__tagline {
    margin-left: auto;
  }
}

@media (min-width: 1025px) {
  .site-footer__top {
    grid-template-columns: 2fr 1fr 1fr;
  }

  .site-footer__brand {
    grid-column: auto;
  }
}

/* --- Numbered rows (01 / What we do) --------------------------------------- */

.rows {
  border-top: 1px solid var(--rule);
}

.row {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: 0.5rem 0.75rem;
  padding-block: 1.5rem;
  border-bottom: 1px solid var(--rule);
  transition: background-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.row__num {
  grid-row: span 2;
  padding-top: 0.15em;
  font-family: var(--font-display);
  font-size: 0.875rem;
  line-height: 1.3;
  color: var(--text-soft);
}

.row__title,
.row__text {
  grid-column: 2;
}

.row__text {
  max-width: 38rem;
}

@media (hover: hover) {
  /* The shadow widens the highlight without shifting the content. */
  .row:hover {
    background: var(--lift);
    box-shadow: -0.75rem 0 0 var(--lift), 0.75rem 0 0 var(--lift);
  }

  .row:hover .row__num {
    color: var(--text);
  }
}

@media (min-width: 900px) {
  .row {
    grid-template-columns: 4.5rem minmax(0, 5fr) minmax(0, 6fr);
    align-items: baseline;
    column-gap: 1.5rem;
    padding-block: 2rem;
  }

  .row__num {
    grid-row: auto;
  }

  .row__text {
    grid-column: 3;
  }
}

/* --- Partnership chain: CREATOR → AUDIENCE → NEED → PRODUCT → BRAND -------- */

.chain {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 0.9rem;
  margin-top: 2rem;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--text);
}

.chain li {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
}

.chain li:not(:last-child)::after {
  content: "";
  width: 0.9rem;
  height: 0.9rem;
  background: var(--accent);
  -webkit-mask: var(--icon-right) center / contain no-repeat;
  mask: var(--icon-right) center / contain no-repeat;
}

/* --- Numbered tiles (How it works, Principles) ------------------------------ */

.tiles {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.28);
}

/* Inner dividers: each tile draws its own top and left line; the outer ones are clipped. */
.tile {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  align-content: start;
  gap: 0.6rem 0.75rem;
  margin: -1px 0 0 -1px;
  padding: 1.5rem 1.25rem 1.75rem;
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
  transition: background-color 0.3s var(--ease);
}

.tile__num {
  grid-row: span 2;
  font-family: var(--font-display);
  font-size: 1.75rem;
  line-height: 1;
  color: var(--heading-accent);
}

.tile__title,
.tile__text {
  grid-column: 2;
}

.tile__text {
  font-size: 1rem;
  line-height: 1.6;
}

@media (hover: hover) {
  .tile:hover {
    background: var(--lift);
  }
}

@media (min-width: 640px) {
  .tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tile {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: clamp(1.5rem, 1rem + 1.4vw, 2.25rem);
  }

  .tile__num {
    margin-bottom: clamp(2rem, 1rem + 3vw, 3.5rem);
    font-size: clamp(2rem, 1.5rem + 1.2vw, 2.75rem);
  }

  .tile__title {
    margin-bottom: 0.75rem;
  }

  /* Steps: 2 per row, the fifth spans the full width */
  .tiles--steps .tile:last-child {
    grid-column: 1 / -1;
  }
}

@media (min-width: 900px) {
  /* Steps: 3 + 2 */
  .tiles--steps {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .tiles--steps .tile {
    grid-column: span 2;
  }

  .tiles--steps .tile:nth-child(n + 4) {
    grid-column: span 3;
  }
}

@media (min-width: 1200px) {
  /* Steps: one row of five */
  .tiles--steps {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .tiles--steps .tile,
  .tiles--steps .tile:nth-child(n + 4) {
    grid-column: auto;
  }

  .tiles--steps .tile {
    padding: 1.75rem 1.5rem 2rem;
  }

  .tiles--steps .tile__title {
    font-size: 1.0625rem;
  }
}

/* --- Article cards ---------------------------------------------------------- */

.post-grid {
  display: grid;
  gap: 2.75rem 1.5rem;
}

.post-card {
  position: relative;
  display: flex;
  flex-direction: column;
}

.post-card__media {
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  background: var(--sand);
}

.post-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}

.post-card__meta {
  margin-top: 1.25rem;
  color: var(--text-soft);
}

.post-card__meta span + span::before {
  content: "·";
  margin-inline: 0.6em;
}

.post-card__title {
  margin-top: 0.6rem;
  font-size: clamp(1.0625rem, 0.95rem + 0.45vw, 1.375rem);
  line-height: 1.2;
}

.post-card__summary {
  margin-top: 0.75rem;
  max-width: 34rem;
}

.post-card__link {
  color: inherit;
  text-decoration: none;
}

/* The whole card is clickable through the title link. */
.post-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
}

.post-card__link:focus-visible {
  outline: none;
}

.post-card__link:focus-visible::after {
  outline: 2px solid var(--focus);
  outline-offset: 6px;
}

.post-card:hover .post-card__media img {
  transform: scale(1.035);
}

.post-card:hover .post-card__link {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--accent);
  text-underline-offset: 0.2em;
}

/* --- Journal artwork: calm animations on the four card images --------------
   Plays on hover (desktop) or once when the image scrolls into view (touch),
   triggered by js/main.js. Nothing moves under prefers-reduced-motion.
   1. Merge  — an outlined dot crosses the ring, fills amber and becomes one.
   2. Orbit  — the amber dot travels once around its ring and returns.
   3. Flow   — a dot runs along each line; they meet and continue as one.
   4. Gather — small points drift into the amber point, which swells a little;
               then they quietly reappear where they were.                    */

.post-card__media .art {
  display: block;
  width: 100%;
  height: 100%;
}

/* Resting state: the moving parts are hidden or in place */
.art__seeker {
  opacity: 0;
  fill-opacity: 0;
  transform: translate(-574px, -172px);   /* opposite side of the outer ring */
}

.art__halo {
  transform-box: fill-box;
  transform-origin: center;
}

.art__arm {
  transform-box: view-box;
  transform-origin: 800px 500px;          /* centre of the ring */
}

.art__dot {
  opacity: 0;
}

.art__core {
  transform-box: fill-box;
  transform-origin: center;
}

@media (prefers-reduced-motion: no-preference) {

  /* 1. Merge — transitions, so leaving the card plays it back in reverse */
  .art__seeker {
    transition:
      fill-opacity 0.35s ease,
      transform 1.3s cubic-bezier(0.45, 0, 0.25, 1) 0.2s,
      opacity 0.4s ease 1.4s;
  }

  .art__halo {
    transition: transform 0.5s ease;
  }

  .art--merge.is-playing .art__seeker,
  .post-card:focus-within .art--merge .art__seeker {
    opacity: 1;
    fill-opacity: 1;
    transform: none;
    transition:
      opacity 0.4s ease,
      transform 1.4s cubic-bezier(0.45, 0, 0.25, 1) 0.1s,
      fill-opacity 0.35s ease 1.15s;
  }

  .art--merge.is-playing .art__halo,
  .post-card:focus-within .art--merge .art__halo {
    transform: scale(1.06);
    transition: transform 0.6s ease 1.2s;
  }

  /* 2. Orbit */
  .art--orbit.is-playing .art__arm    { animation: art-orbit-arm 1.6s both; }
  .art--orbit.is-playing .art__planet { animation: art-orbit-planet 1.6s both; }
  .art--orbit.is-playing .art__ring   { animation: art-orbit-ring 1.6s ease-in-out both; }

  /* 3. Flowing dots */
  .art--flow.is-playing .art__dot--a,
  .art--flow.is-playing .art__dot--b {
    animation: art-flow-ab-move 1.6s both, art-flow-ab-fade 1.6s linear both;
  }

  .art--flow.is-playing .art__dot--c {
    animation: art-flow-c-move 1.6s both, art-flow-c-fade 1.6s linear both;
  }

  /* 4. Gather */
  .art--gather.is-playing .art__mote {
    animation: art-gather-mote 1.6s var(--d, 0s) both;
  }

  .art--gather.is-playing .art__core {
    animation: art-gather-core 1.8s ease-in-out both;
  }
}

/* Merge follows the pointer on devices that can hover */
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .post-card:hover .art--merge .art__seeker {
    opacity: 1;
    fill-opacity: 1;
    transform: none;
    transition:
      opacity 0.4s ease,
      transform 1.4s cubic-bezier(0.45, 0, 0.25, 1) 0.1s,
      fill-opacity 0.35s ease 1.15s;
  }

  .post-card:hover .art--merge .art__halo {
    transform: scale(1.06);
    transition: transform 0.6s ease 1.2s;
  }
}

@keyframes art-orbit-arm {
  0%, 18% {
    transform: rotate(0deg);
    animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
  }
  82%, 100% {
    transform: rotate(360deg);
  }
}

@keyframes art-orbit-planet {
  0% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0.3, 0, 0.3, 1);
  }
  18%, 82% {
    transform: translateY(-170px);
    animation-timing-function: cubic-bezier(0.45, 0, 0.3, 1);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes art-orbit-ring {
  0%, 100% { stroke-opacity: 0.5; }
  20%, 80% { stroke-opacity: 0.9; }
}

/* Dots are 0-length dashes with round caps, moved along each path (pathLength 100). */
@keyframes art-flow-ab-move {
  0% {
    stroke-dashoffset: 0;
    animation-timing-function: cubic-bezier(0.45, 0, 0.4, 1);     /* settles into the meeting point */
  }
  56%, 100% {
    stroke-dashoffset: -99.9;
  }
}

@keyframes art-flow-ab-fade {
  0% { opacity: 0; }
  6%, 55% { opacity: 1; }
  60%, 100% { opacity: 0; }
}

@keyframes art-flow-c-move {
  0%, 56% {
    stroke-dashoffset: 0;
    animation-timing-function: cubic-bezier(0.45, 0, 0.35, 1);    /* moves off gently together */
  }
  96%, 100% {
    stroke-dashoffset: -99.9;
  }
}

/* Each point moves by its own --dx/--dy (set in the markup) onto the amber point. */
@keyframes art-gather-mote {
  0% {
    transform: none;
    opacity: 1;
    animation-timing-function: cubic-bezier(0.45, 0, 0.3, 1);
  }
  56% {
    transform: translate(var(--dx), var(--dy));
    opacity: 1;
  }
  64% {
    transform: translate(var(--dx), var(--dy));
    opacity: 0;
  }
  65% {
    transform: none;
    opacity: 0;
  }
  100% {
    transform: none;
    opacity: 1;
  }
}

@keyframes art-gather-core {
  0%, 46% { transform: scale(1); }
  62% { transform: scale(1.16); }
  100% { transform: scale(1); }
}

@keyframes art-flow-c-fade {
  0%, 54% { opacity: 0; }
  58%, 90% { opacity: 1; }
  100% { opacity: 0; }
}

@media (min-width: 640px) and (max-width: 899.98px) {
  /* Tablet portrait: three cards become image-left rows */
  .post-grid--three .post-card {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    grid-template-rows: auto auto 1fr;
    column-gap: 1.75rem;
  }

  .post-grid--three .post-card__media {
    grid-row: 1 / -1;
  }

  .post-grid--three .post-card__meta {
    margin-top: 0.25rem;
  }
}

@media (min-width: 900px) {
  .post-grid--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.section-head__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 2rem;
}


/* 7. Home
   ========================================================================== */

/* --- The film: pinned chapters (js/scene.js) --------------------------------
   One fixed canvas behind the page plays the film. Chapters are transparent and
   tall; their stage sticks to the screen while the film plays and the line
   changes. Normal sections are solid flat colour and slide over the film, so
   nothing ever moves behind content. Chapter text is graphite straight on the
   film, which stays light everywhere (measured to WCAG AA on every frame).

   .is-cinematic is set in the <head> when motion is welcome. Without it
   (reduced motion, data saver, no JavaScript) the chapters are short static
   blocks on a still image, and every line is simply visible.                 */

.scene {
  display: none;
}

.is-cinematic .scene {
  display: block;
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--bg) url("../image/chapters/opening-desktop.webp") center / cover no-repeat;
}

.scene__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.scene.is-live .scene__canvas {
  opacity: 1;
}

/* Normal sections are solid: the film never shows behind them. */
.page-home main > .section:not(.section--deep):not(.section--sand) {
  background: var(--bg);
}

.page-home .site-footer {
  border-top-color: transparent;   /* the ending settles into the footer sand */
}

.chapter {
  --text-soft: var(--muted-on-sand);   /* #5C574F for the hero intro */
  --heading-accent: var(--accent-deep);
  position: relative;
  color: var(--ink);
}

.chapter__stage {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: clamp(3.5rem, 2rem + 6vw, 7rem);
  min-height: 100vh;
  min-height: 100svh;
  padding-block: calc(var(--header-h) + 3rem) 4rem;
  background: var(--bg) center / cover no-repeat;
  text-align: center;
}

.chapter__line {
  max-width: 16ch;
  padding-inline: var(--gutter);
  font-family: var(--font-display);
  font-size: clamp(2rem, 1rem + 4.4vw, 5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--ink);
}

.chapter__line--end {
  color: var(--accent-deep);
}

/* The ending: three calm lines in dark amber, and the wordmark under the last one. */
.chapter--ending .chapter__line {
  max-width: 20ch;
  font-size: clamp(1.75rem, 1rem + 3.2vw, 4.25rem);
  line-height: 1.04;
}

.chapter__close {
  display: grid;
  justify-items: center;
  gap: clamp(1.25rem, 1rem + 1vw, 2rem);
}

.chapter__mark {
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.75rem);
}

.chapter__mark .wordmark__accent {
  color: var(--accent-on-sand);
}

/* "When the fit is right," sits over the deep amber of the landing stream: one shade deeper. */
.chapter__line--landing {
  color: var(--accent-deepest);
}

/* On phones the first ending line sits at the top, the clearest part of that frame. */
@media (max-width: 639.98px) {
  .is-cinematic .chapter--ending .chapter__stage > .chapter__line--landing {
    align-self: start;
    margin-top: 1rem;
  }
}

/* Hero inside the opening chapter: centred between the two streams. */
.chapter__hero {
  width: 100%;
}

.chapter__hero .hero__title {
  max-width: 14ch;
  margin-inline: auto;
}

.chapter__hero .hero__label {
  margin-bottom: clamp(1.25rem, 1rem + 1.5vw, 2.25rem);
}

.chapter__hero .lead {
  margin-inline: auto;
}

/* The streams pass behind the intro, so it is graphite (AA on every frame and on the still). */
.chapter__hero .lead {
  color: var(--ink);
}

.chapter__hero .actions {
  justify-content: center;
}

/* Static stills (no film). The film itself uses the same frames. */
.chapter--opening .chapter__stage {
  background-image: url("../image/chapters/opening-desktop.webp");
}

.chapter--oasis .chapter__stage {
  background-image: url("../image/chapters/oasis-desktop.webp");
  background-position: center bottom;
}

.chapter--ending .chapter__stage {
  min-height: 60vh;
  min-height: 60svh;
  background: var(--sand-deep);
}

@media (max-width: 1024px) {
  .is-cinematic .scene,
  .chapter--opening .chapter__stage {
    background-image: url("../image/chapters/opening-tablet.webp");
  }

  .chapter--oasis .chapter__stage {
    background-image: url("../image/chapters/oasis-tablet.webp");
  }
}

@media (max-width: 639.98px) {
  .is-cinematic .scene,
  .chapter--opening .chapter__stage {
    background-image: url("../image/chapters/opening-mobile.webp");
  }

  .chapter--oasis .chapter__stage {
    background-image: url("../image/chapters/oasis-mobile.webp");
  }

  .chapter__hero .actions {
    align-items: center;
  }

  .chapter__hero .actions .link {
    align-self: center;
  }
}

/* --- Cinematic mode: tall chapters, the stage sticks, lines fade in and out - */

.is-cinematic .chapter--opening {
  height: 300vh;
  height: 300svh;
  margin-top: calc(var(--header-h) * -1);   /* starts under the header */
}

.is-cinematic .chapter--oasis {
  height: 260vh;
  height: 260svh;
}

.is-cinematic .chapter--ending {
  height: 400vh;
  height: 400svh;   /* three lines, each with time to be read */
}

.is-cinematic .chapter__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  min-height: 0;
  padding: var(--header-h) 0 0;
  background: none;
  align-content: stretch;
}

.is-cinematic .chapter__stage > [data-beat] {
  grid-area: 1 / 1;
  align-self: center;
  will-change: opacity, transform;
}

/* Header: no bar while it floats over the film. */
.site-header::before {
  transition: opacity 0.35s var(--ease);
}

.site-header.is-over-film {
  border-bottom-color: transparent;
}

.site-header.is-over-film::before {
  opacity: 0;
}

.nav-open .site-header.is-over-film::before {
  opacity: 1;
}

/* --- Text over the film: safe from forced dark modes ------------------------
   Some browsers (Samsung Internet's dark mode) ignore color-scheme and force their own dark
   mode: dark text turns light while images stay as they are, so text over the light film would
   disappear. Text that sits on the film or on a chapter still therefore gets its colour from a
   one-colour gradient clipped to the letters, which those dark modes leave alone. Same colours as
   above; it stays real text (selectable, read by screen readers) and selected text keeps the
   ::selection colours. Browsers without background-clip: text simply keep the normal colours.
   The header only gets this while it floats over the film without its bar (.is-over-film): on its
   bar, dark modes darken bar and text together, as on the rest of the page.                     */

@property --fill {
  syntax: "<color>";
  inherits: false;
  initial-value: transparent;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  body:not(.nav-open) .site-header.is-over-film .wordmark__ink,
  body:not(.nav-open) .site-header.is-over-film .wordmark__accent,
  body:not(.nav-open) .site-header.is-over-film .menu-toggle__label,
  .chapter--opening .chapter__line,
  .chapter--oasis .chapter__line,
  .is-cinematic .chapter--ending .chapter__line,
  .is-cinematic .chapter__mark .wordmark__ink,
  .is-cinematic .chapter__mark .wordmark__accent,
  .chapter__hero .hero__label,
  .chapter__hero .hero__title-ink,
  .chapter__hero .accent,
  .chapter__hero .lead,
  .chapter__hero .link {
    background-image: linear-gradient(var(--paint), var(--paint));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  .wordmark__ink,
  .menu-toggle__label,
  .chapter__line,
  .chapter__hero .lead             { --paint: var(--ink); }
  .site-header .wordmark__accent   { --paint: var(--accent); }
  .chapter__mark .wordmark__accent { --paint: var(--accent-on-sand); }
  .chapter__line--end              { --paint: var(--accent-deep); }
  .chapter__line--landing          { --paint: var(--accent-deepest); }
  .chapter__hero .hero__label,
  .chapter__hero .hero__title-ink,
  .chapter__hero .link             { --paint: var(--text); }
  .chapter__hero .accent           { --paint: var(--heading-accent); }

  /* The underline is drawn through the clipped text too, in the same colour, so its own colour
     is transparent (a dark mode would lighten it). On hover it turns amber, as before. */
  .chapter__hero .link             { text-decoration-color: transparent; }
  .chapter__hero .link:hover       { text-decoration-color: var(--accent); }

  /* From tablet size the navigation sits in the header, over the film. */
  @media (min-width: 640px) {
    .site-header.is-over-film .site-nav__link {
      --paint: var(--ink);
      background-image: linear-gradient(var(--paint), var(--paint));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      text-decoration-color: var(--ink);
    }

    .site-header.is-over-film .site-nav__link[aria-current="page"],
    .site-header.is-over-film .site-nav__link.is-active { text-decoration-color: var(--accent); }
    .site-header.is-over-film .site-nav__link:hover     { text-decoration-color: var(--ink); }
  }
}

/* Firefox draws the underline inside clipped text one pixel higher (or not at all when it is
   transparent), so there the link keeps its plain colour and underline. The forced dark modes this
   protects against are Chromium ones. */
@supports (-moz-appearance: none) {
  .chapter__hero .link {
    background-image: none;
    color: var(--text);
    text-decoration-color: var(--text);
  }
}

/* The menu icon over the film, and the buttons over the film: one-colour gradients, so a forced
   dark mode can't recolour them. The light button labels are left alone by dark modes. */
body:not(.nav-open) .site-header.is-over-film .menu-toggle__icon::before,
body:not(.nav-open) .site-header.is-over-film .menu-toggle__icon::after {
  background: linear-gradient(var(--ink), var(--ink));
}

.chapter__hero .btn {
  --fill: var(--ink);
  background-color: transparent;   /* one fill layer, so the rounded corners stay as they were */
  background-image: linear-gradient(var(--fill), var(--fill));
  transition: --fill 0.2s var(--ease);
}

.chapter__hero .btn:hover {
  --fill: #3A3834;
}

.chapter__hero .btn .icon {
  background: linear-gradient(currentColor, currentColor);
}

@media (min-width: 640px) {
  .site-header.is-over-film .site-nav__cta {
    --fill: var(--ink);
    background-color: transparent;
    background-image: linear-gradient(var(--fill), var(--fill));
    transition: --fill 0.2s var(--ease);
  }

  .site-header.is-over-film .site-nav__cta:hover {
    --fill: #3A3834;
  }

  .site-header.is-over-film .site-nav__cta .icon {
    background: linear-gradient(currentColor, currentColor);
  }
}

/* --- 404 ------------------------------------------------------------------- */

.notfound {
  display: flex;
  align-items: center;
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
}

.notfound .container {
  width: 100%;
}

.notfound .actions {
  margin-top: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem);
}

/* --- Soft light: beige patches behind About, Journal and the articles ------
   A few large, very soft patches of sand (#E4D8C3 and lighter tints) spread
   down the page, like diffused light. They sit on one layer behind everything;
   solid blocks and the footer cover them. On these pages the secondary text and
   the amber heading words use their sand-safe shades, so text stays AA on the
   deepest patch (#5C574F 5.6:1, #9A6220 3.9:1 large).                        */

.page-soft {
  --text-soft: var(--muted-on-sand);
  --heading-accent: var(--accent-on-sand);
  position: relative;
}

.page-soft::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse clamp(420px, 58vw, 1100px) clamp(360px, 44vw, 820px) at 94% 3%, rgba(228, 216, 195, 0.78), rgba(228, 216, 195, 0.49) 32%, rgba(228, 216, 195, 0.16) 58%, rgba(228, 216, 195, 0) 74%),
    radial-gradient(ellipse clamp(300px, 34vw, 640px) clamp(260px, 28vw, 520px) at 78% 9%, rgba(234, 223, 203, 0.68), rgba(234, 223, 203, 0) 70%),
    radial-gradient(ellipse clamp(380px, 46vw, 900px) clamp(340px, 40vw, 760px) at 3% 27%, rgba(234, 223, 203, 0.80), rgba(234, 223, 203, 0.41) 36%, rgba(234, 223, 203, 0) 72%),
    radial-gradient(ellipse clamp(400px, 52vw, 1000px) clamp(360px, 42vw, 800px) at 98% 52%, rgba(228, 216, 195, 0.68), rgba(228, 216, 195, 0.35) 34%, rgba(228, 216, 195, 0) 72%),
    radial-gradient(ellipse clamp(280px, 30vw, 560px) clamp(240px, 24vw, 460px) at 86% 58%, rgba(238, 230, 216, 0.74), rgba(238, 230, 216, 0) 70%),
    radial-gradient(ellipse clamp(380px, 48vw, 940px) clamp(340px, 40vw, 780px) at 1% 76%, rgba(228, 216, 195, 0.73), rgba(228, 216, 195, 0.35) 34%, rgba(228, 216, 195, 0) 72%),
    radial-gradient(ellipse clamp(420px, 56vw, 1060px) clamp(320px, 36vw, 700px) at 70% 96%, rgba(234, 223, 203, 0.68), rgba(234, 223, 203, 0) 72%);
}

/* --- Hero (home) and page hero (About, Journal) ---------------------------- */

.hero,
.page-hero {
  padding-block: clamp(3rem, 1.5rem + 6vw, 8.5rem) clamp(1rem, 4vw, 5rem);
}

.hero__label,
.page-hero__label {
  margin-bottom: clamp(1.5rem, 1rem + 2vw, 2.75rem);
}

.hero__title,
.page-hero__title {
  max-width: 15ch;
}

.hero__body,
.page-hero__text {
  margin-top: clamp(1.75rem, 1.25rem + 2.5vw, 3.5rem);
}

.hero .actions {
  margin-top: clamp(2rem, 1.5rem + 1.5vw, 2.75rem);
}

@media (max-width: 639.98px) {
  .hero .actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero .actions .link {
    align-self: flex-start;
  }
}

@media (min-width: 1025px) {
  .hero {
    display: flex;
    align-items: center;
    min-height: min(calc(100svh - var(--header-h)), 58rem);
  }

  .hero > .container {
    width: 100%;
  }
}

/* The home hero lives inside the opening chapter, which sets its own height. */
.chapter__hero.hero {
  display: block;
  min-height: 0;
  padding-block: 0;
}

/* --- 02 / Current focus (dark) -------------------------------------------- */

.focus__grid {
  display: grid;
  gap: 2rem;
}

.focus__title {
  max-width: 20ch;
}

.focus__text {
  max-width: 36rem;
}

.focus__text .lead {
  color: var(--text);
}

.focus__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  margin-top: var(--head-gap);
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text);
}

.focus__list li {
  display: inline-flex;
  align-items: center;
  gap: 1.25rem;
}

.focus__list li + li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

@media (min-width: 900px) {
  .focus__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 4rem;
    align-items: start;
  }
}

/* --- 03 / For brands and creators ------------------------------------------ */

.duo {
  display: grid;
  gap: 1rem;
}

.duo__card {
  padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.28);
  transition: background-color 0.3s var(--ease);
}

@media (hover: hover) {
  .duo__card:hover {
    background: var(--lift);
  }
}

.duo__title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.duo__title::before {
  content: "";
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--accent);
}

.duo__lead {
  margin-bottom: 1.75rem;
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--text);
}

.checklist {
  display: grid;
  gap: 0.9rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}

.checklist li {
  display: grid;
  grid-template-columns: 1.1rem minmax(0, 1fr);
  gap: 0.75rem;
}

.checklist li::before {
  content: "";
  width: 100%;
  height: 2px;
  margin-top: 0.8em;
  background: var(--accent);
}

.duo__action {
  margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
}

@media (max-width: 639.98px) {
  .duo__action .btn {
    width: 100%;
  }
}

@media (min-width: 640px) {
  .duo {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
  }
}

/* --- 05 / Contact (sand) --------------------------------------------------- */

.contact__grid {
  display: grid;
  gap: 2.5rem;
}

.contact__intro .h2 {
  max-width: 14ch;
}

.contact__intro .lead {
  margin-top: 1.5rem;
}

.contact__direct {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
}

.contact__email {
  display: inline-block;
  margin-top: 0.5rem;
  padding-block: 0.25rem;
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  color: var(--text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  overflow-wrap: anywhere;
}

.contact__email:hover {
  text-decoration-color: var(--heading-accent);
  text-decoration-thickness: 2px;
}

.contact__notes {
  margin-top: 1rem;
  padding: 0;
  list-style: none;
  font-size: var(--fs-small);
  line-height: 1.5;
}

.contact__notes li + li {
  margin-top: 0.3rem;
}

.contact__panel {
  padding: clamp(1.25rem, 0.75rem + 2.5vw, 2.5rem);
  border-radius: var(--radius);
  background: var(--bg);
}

@media (min-width: 900px) {
  .contact__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(2.5rem, 5vw, 4.5rem);
    align-items: start;
  }

  .contact__intro {
    position: sticky;
    top: calc(var(--header-h) + 2rem);
  }
}

/* --- Contact form ---------------------------------------------------------- */

.form fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.form .toggle {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  margin-bottom: 1.5rem;
  padding: 4px;
  border-radius: 8px;
  background: rgba(30, 29, 27, 0.07);
}

.toggle__option {
  position: relative;
  display: block;
}

.toggle__option input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.toggle__option span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.5rem;
  border-radius: 6px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
  text-align: center;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}

.toggle__option input:hover + span {
  background: rgba(255, 255, 255, 0.75);
}

.toggle__option input:checked + span {
  background: var(--ink);
  color: var(--bg);
}

.toggle__option input:focus-visible + span {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.form__note {
  margin-bottom: 1.25rem;
  font-size: var(--fs-small);
}

.form__grid {
  display: grid;
  column-gap: 1rem;
}

.field {
  min-width: 0;
  margin-bottom: 1.25rem;
}

.field__label {
  display: block;
  margin-bottom: 0.45rem;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text);
}

.field__optional {
  font-weight: 400;
  color: var(--text-soft);
}

.field__input {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 0.8rem 0.95rem;
  border: 1px solid #8A857C;          /* 3.2:1 against the panel */
  border-radius: var(--radius-btn);
  background: #FBFAF7;
  color: var(--ink);
  font-size: 1rem;                    /* 16px: no zoom on iOS */
  line-height: 1.45;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.field__input::placeholder {
  color: var(--muted);
  opacity: 1;
}

.field__input:hover {
  border-color: var(--ink);
}

.field__input:focus {
  outline: 2px solid var(--ink);
  outline-offset: 0;
  border-color: var(--ink);
}

textarea.field__input {
  min-height: 132px;
  resize: vertical;
}

.field__select {
  position: relative;
}

.field__select select {
  padding-right: 2.75rem;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.field__select::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 1rem;
  width: 0.75rem;
  height: 0.75rem;
  margin-top: -0.375rem;
  background: var(--ink);
  -webkit-mask: var(--icon-down) center / contain no-repeat;
  mask: var(--icon-down) center / contain no-repeat;
  pointer-events: none;
}

.field__input[aria-invalid="true"] {
  border-color: var(--error);
  box-shadow: inset 0 0 0 1px var(--error);
}

.field__error {
  margin-top: 0.45rem;
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1.45;
  color: var(--error);
}

.field--check {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  gap: 0 0.75rem;
  align-items: start;
  margin-top: 0.25rem;
}

.field__check {
  width: 24px;
  height: 24px;
  margin: 0.1rem 0 0;
  accent-color: var(--ink);
  cursor: pointer;
}

.field--check label {
  font-size: 0.9375rem;
  line-height: 1.55;
  cursor: pointer;
}

.field--check a {
  color: var(--text);
  font-weight: 600;
  text-underline-offset: 0.2em;
}

.field--check .field__error {
  grid-column: 2;
}

.form__hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__footer {
  margin-top: 1.5rem;
}

.form__submit {
  width: 100%;
  min-height: 54px;
  font-size: 1rem;
}

.form__submit[disabled] {
  opacity: 0.7;
  cursor: progress;
}

.form__status:empty {
  display: none;
}

.form__status {
  margin-top: 1.25rem;
  padding: 1rem 1.15rem;
  border-left: 3px solid var(--ink);
  border-radius: 4px;
  background: rgba(30, 29, 27, 0.05);
  color: var(--text);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.5;
}

.form__status.is-error {
  border-left-color: var(--error);
}

.form__status.is-pending {
  border-left-color: var(--accent);
}

.form__status a {
  color: inherit;
  text-underline-offset: 0.2em;
}

/* Quiet email alternative under the form */
.form__alt {
  margin-top: 1.25rem;
  font-size: var(--fs-small);
  color: var(--text-soft);
}

.form__alt a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.form__alt a:hover {
  text-decoration-color: var(--heading-accent);
}

@media (min-width: 640px) {
  .form__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .form__submit {
    width: auto;
  }
}


/* 8. About
   ========================================================================== */

.columns {
  display: grid;
  gap: 1.25rem 3rem;
  max-width: 64rem;
  font-size: var(--fs-lead);
  line-height: 1.6;
}

@media (min-width: 768px) {
  .columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Large statement paragraph (Our vision) */
.statement {
  max-width: 26em;
  font-size: clamp(1.375rem, 1rem + 1.7vw, 2.5rem);
  font-weight: 500;
  line-height: 1.32;
  letter-spacing: -0.018em;
  color: var(--text);
  text-wrap: pretty;
}

/* The story behind the name: a large amber é beside the text */
.name-block {
  display: grid;
  gap: 1rem 3rem;
  align-items: center;
}

.name-block__mark {
  position: relative;
  isolation: isolate;
  justify-self: start;
  padding: 0.12em 0.32em;
  font-family: var(--font-display);
  font-size: clamp(7rem, 4rem + 14vw, 17rem);
  line-height: 0.8;
  color: var(--accent);
}

/* A calm still of the amber silk (from the homepage animation) behind the é. */
.name-block__mark::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -12% -18%;
  background: url("../image/amber-still-desktop.webp") 86% 45% / 260% auto no-repeat;   /* centres the right-hand silk ribbon */
  opacity: 0.65;
  -webkit-mask-image: radial-gradient(closest-side, #000 35%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 35%, transparent 100%);
}

.name-block__text {
  max-width: 34rem;
  font-size: var(--fs-lead);
  line-height: 1.6;
}

@media (min-width: 768px) {
  .name-block {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }
}

/* Dark call-to-action block */
.cta-block__inner {
  display: grid;
  gap: 2rem;
}

.cta-block__title {
  max-width: 16ch;
}

@media (max-width: 639.98px) {
  .cta-block__btn {
    width: 100%;
  }
}

@media (min-width: 900px) {
  .cta-block__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 3rem;
  }
}


/* 9. Journal and articles
   ========================================================================== */

/* Featured article: image left, text right on desktop */
.post-card--feature {
  margin-bottom: clamp(3.5rem, 2.5rem + 4vw, 6rem);
}

.post-card--feature .post-card__media {
  aspect-ratio: 16 / 10;
}

.post-card--feature .post-card__title {
  font-size: clamp(1.625rem, 1.1rem + 2.2vw, 3rem);
  line-height: 1.02;
}

.post-card--feature .post-card__summary {
  margin-top: 1rem;
  font-size: var(--fs-lead);
  line-height: 1.5;
}

.post-card__more {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-top: 1.5rem;
  color: var(--text);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.35em;
}

.post-card--feature:hover .post-card__more .icon {
  transform: translateX(3px);
}

@media (min-width: 900px) {
  .post-card--feature {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(2.5rem, 4vw, 4.5rem);
    align-items: center;
  }

  .post-card--feature .post-card__meta {
    margin-top: 0;
  }
}

@media (min-width: 640px) {
  .post-grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(1.5rem, 3vw, 2.5rem);
  }

  .post-grid--two .post-card__media {
    aspect-ratio: 16 / 10;
  }
}

/* Row with a small heading on the left and a link on the right */
.bar-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  margin-bottom: clamp(1.75rem, 1.25rem + 2vw, 3rem);
  padding-top: 0.75rem;
  border-top: 1px solid var(--rule);
}

/* "Want to work together? Start a conversation" */
.cta-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 2rem;
  padding-block: clamp(2rem, 1.5rem + 2vw, 3rem);
  border-block: 1px solid var(--rule);
}

.cta-line__text {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1rem + 1.6vw, 2.25rem);
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--text);
}

@media (max-width: 639.98px) {
  .cta-line .btn {
    width: 100%;
  }
}

/* --- Article page ----------------------------------------------------------- */

.article__header {
  padding-block: clamp(2.5rem, 1.5rem + 5vw, 6.5rem) clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
}

.article__label {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6em;
  margin-bottom: clamp(1.25rem, 1rem + 1.5vw, 2.25rem);
}

.article__label a {
  display: inline-block;
  margin-block: -0.5rem;
  padding-block: 0.5rem;   /* larger tap target, same layout */
  text-underline-offset: 0.3em;
}

.article__title {
  max-width: 19ch;
  font-size: clamp(2rem, 1rem + 4.4vw, 4.75rem);
  line-height: 0.98;
}

.article__summary {
  max-width: 40rem;
  margin-top: clamp(1.25rem, 1rem + 1vw, 2rem);
}

.article__media {
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius);
  background: var(--sand);
}

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

.article__layout {
  display: grid;
  gap: 2rem;
  padding-top: clamp(2.5rem, 2rem + 3vw, 5rem);
}

.article__meta dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.5rem;
  margin: 0;
  padding-block: 1.25rem;
  border-block: 1px solid var(--rule);
}

.article__meta dt {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.article__meta dd {
  margin: 0.2rem 0 0;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text);
}

.prose {
  max-width: var(--measure);
  font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  line-height: 1.75;
}

.prose p + p {
  margin-top: 1.35em;
}

.prose h2 {
  margin: 2.5em 0 0.75em;
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.3125rem);
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--text);
}

.prose h2:first-child {
  margin-top: 0;
}

.prose h2 + p {
  margin-top: 0;
}

.prose a {
  color: var(--text);
  font-weight: 500;
  text-underline-offset: 0.2em;
}

.prose a:hover {
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
}

/* Small note under an article (sources, disclaimers) */
.prose .article__note {
  margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--text-soft);
}

@media (min-width: 640px) {
  .article__meta dl {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .article__media {
    aspect-ratio: 21 / 9;
  }
}

@media (min-width: 1025px) {
  .article__layout {
    grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
    gap: 4rem;
  }

  .article__meta {
    position: sticky;
    top: calc(var(--header-h) + 2rem);
    align-self: start;
  }

  .article__meta dl {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
    padding-block: 1.25rem 0;
    border-bottom: 0;
  }
}


/* 10. Privacy — reuses the article layout
   ========================================================================== */

.article__layout--flush {
  padding-top: 0;
}

.page-end {
  padding-bottom: var(--section-y);
}

.article__meta dd a {
  display: inline-block;
  padding-block: 0.3rem;
  text-underline-offset: 0.25em;
  overflow-wrap: anywhere;
}


/* 11. Motion — subtle, and off when the visitor prefers reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  /* Hero settles in on load */
  .hero .container > *,
  .page-hero .container > * {
    animation: rise 0.9s var(--ease) both;
  }

  .hero .container > :nth-child(2),
  .page-hero .container > :nth-child(2) { animation-delay: 0.08s; }

  .hero .container > :nth-child(3),
  .page-hero .container > :nth-child(3) { animation-delay: 0.16s; }

  /* In the film the hero fades in with the scroll instead */
  .is-cinematic .chapter__hero .container > * { animation: none; }

  /* Sections fade and slide in as they enter the viewport (js/main.js) */
  .reveal-ready .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
  }

  .reveal-ready .reveal.is-visible {
    opacity: 1;
    transform: none;
  }

  /* Stagger items that sit side by side */
  .reveal-ready .row.reveal:nth-child(2),
  .reveal-ready .post-grid > .reveal:nth-child(2),
  .reveal-ready .duo > .reveal:nth-child(2) { transition-delay: 0.06s; }

  .reveal-ready .row.reveal:nth-child(3),
  .reveal-ready .post-grid > .reveal:nth-child(3) { transition-delay: 0.12s; }
}

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

@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;
  }
}