/* =========================================================
   FROM SCRATCH — Haitam Dahbi
   One stylesheet for every page.

   Layout idea: a six-column grid runs down the whole site as
   hairlines. Six columns = six disciplines (identity, product,
   space, garment, food, image). In Mise en place the grid turns
   into the cutting mat it comes from.

   Order of this file (same order as the HTML):
     1. Fonts
     2. Tokens (:root)
     3. Base / reset
     4. Helpers (grid, labels, placeholders)
     5. Sections, in page order (5.0 is the loader)
        5.1 Header        5.2 Hero        5.3 Origins (globe)
        5.4 The plates    5.5 Mise en place   5.6 Contact
        5.7 Section counter
     6. Project pages (facts, ingredients, method steps, notes, menu)
     7. Reduced motion
     8. Project animations: one block per project, for the pieces
        drawn by motion.js and the *-3d.js files
     9. Backgrounds behind animations (.ground-*), map pins,
        and the Glow poster's lettering
    10. Ronda, the card game (play.html)

   Mobile first: base rules are the phone layout.
   Breakpoints: 768px (tablet), 1024px (desktop).
   ========================================================= */


/* ---------- 1. Fonts ---------- */

@font-face { font-family: "Herold"; src: url("fonts/herold.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Bontang"; src: url("fonts/bontang.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Helvetica Site"; src: url("fonts/helvetica.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Helvetica Site"; src: url("fonts/helvetica-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
/* Handjet: one family drawn for both Latin and Arabic. Each script is its own file;
   unicode-range makes the browser download only the one a page needs. */
@font-face { font-family: "Handjet"; src: url("fonts/handjet-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0000-00FF, U+2013-2014, U+2018-201D; }
@font-face { font-family: "Handjet"; src: url("fonts/handjet-arabic-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF; }


/* ---------- 2. Tokens ----------
   Four colours from the cutting mat: mat green, blade orange,
   ink black, paper white. Everything else is a tint of those. */

:root {
  /* Colour — named by job */
  --paper:        #F6F5F1;               /* page ground */
  --ink:          #111111;               /* type, rules */
  --ink-soft:     #55544F;               /* secondary text */
  --ink-faint:    rgb(17 17 17 / 0.42);  /* inactive text */
  --hairline:     rgb(17 17 17 / 0.12);  /* the grid lines */
  --rule:         rgb(17 17 17 / 0.18);  /* dividers inside a block */
  --mat:          #1F4A38;               /* cutting-mat green */
  --mat-line:     rgb(157 187 168 / 0.35);
  --mat-ink:      #9DBBA8;               /* labels and ticks on the mat */
  --mat-text:     #E6EEE9;               /* body text on the mat */
  --blade:        #FF5B1F;               /* the one accent: rare */
  --placeholder:  #DCDBD6;               /* image still to come */
  --placeholder-2:#E8E7E2;
  --globe-sea:    #FF5B1F;               /* the globe: sea in blade orange… */
  --globe-land:   #FFB48F;               /* …land in a lighter orange */
  --globe-line:   rgb(255 255 255 / 0.45); /* borders and the globe's own grid */
  --kraft:        #B99160;               /* Norma's printed menu */
  --kraft-ink:    #1A1613;

  /* Fonts */
  --font-name:    "Handjet", "Helvetica Site", Arial, sans-serif;   /* your name, both scripts */
  --font-display: "Herold", "Arial Narrow", sans-serif;             /* section and project titles */
  --font-label:   "Bontang", "Helvetica Site", Arial, sans-serif;   /* caps labels (caps-only face) */
  --font-body:    "Helvetica Site", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Type sizes */
  --text-label: 0.75rem;     /* 12px caps labels */
  --text-small: 0.9375rem;   /* 15px */
  --text-body:  1.0625rem;   /* 17px */
  --text-lead:  clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem);     /* hero sentence */
  --text-h3:    clamp(3rem, 2rem + 2.4vw, 4rem);             /* card titles */
  --text-h2:    clamp(4rem, 2rem + 8vw, 9.5rem);             /* section titles */
  --text-giant: clamp(5rem, 1rem + 15vw, 16rem);             /* contact title */

  /* Spacing scale */
  --space-xs: 0.5rem;
  --space-s:  1rem;
  --space-m:  1.5rem;
  --space-l:  2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;

  /* Grid */
  --cols: 3;                                          /* 3 on phones, 6 from 768px */
  --gutter: max(16px, env(safe-area-inset-left, 0px));
  --cell: 0.5rem;                                     /* padding inside a column */

  color-scheme: light;
}

@media (min-width: 768px) {
  :root { --cols: 6; --gutter: 2rem; --cell: 1rem; }
}
@media (min-width: 1200px) {
  :root { --gutter: 3rem; }
}


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

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

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

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

h1, h2, h3, p, figure, dl, dd, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img, video, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

a:focus-visible, button:focus-visible {
  outline: 2px solid var(--blade);
  outline-offset: 4px;
}

h1, h2, h3 { text-wrap: balance; font-weight: 400; }


/* ---------- 4. Helpers ---------- */

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

/* The hairline grid, fixed behind every page. Its columns line up with .grid below. */
.grid-lines {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  padding-inline: var(--gutter);
  pointer-events: none;
}
.grid-lines span { border-left: 1px solid var(--hairline); transform-origin: top; }
.grid-lines span:last-child { border-right: 1px solid var(--hairline); }
.grid-lines span:nth-child(n+4) { display: none; }          /* phones show 3 */
@media (min-width: 768px) { .grid-lines span:nth-child(n+4) { display: block; } }

/* Everything that sits on the grid */
.grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  padding-inline: var(--gutter);
}
.grid > * { min-width: 0; padding-inline: var(--cell); }

main, .site-header, .site-footer { position: relative; z-index: 1; }

/* Dark sections (the cutting mat) cover the page grid,
   so they redraw its lines themselves, in the same columns. */
.section-lines {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  padding-inline: var(--gutter);
  pointer-events: none;
}
.section-lines span { border-left: 1px solid var(--section-line); }
.section-lines span:last-child { border-right: 1px solid var(--section-line); }
.section-lines span:nth-child(n+4) { display: none; }
@media (min-width: 768px) { .section-lines span:nth-child(n+4) { display: block; } }

/* Caps labels in Bontang */
.label {
  font-family: var(--font-label);
  font-size: var(--text-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.3;
}

/* Image still to come: a grey box that says what goes there */
.ph {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-s);
  background: var(--placeholder);
  color: var(--ink-soft);
  font-family: var(--font-label);
  font-size: var(--text-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
}

.link-underline {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}
.link-underline:hover { color: var(--blade); }


/* =========================================================
   5.1 HEADER
   ========================================================= */

.site-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-xs) var(--space-m);
  padding: var(--space-m) calc(var(--gutter) + var(--cell));
}

.site-nav { display: flex; gap: var(--space-m); }
.site-nav a, .site-header__home { padding-block: 0.6rem; }   /* 44px tap height */
.site-nav a:hover, .site-header__home:hover { color: var(--blade); }

.site-header__where { display: none; }
@media (min-width: 768px) { .site-header__where { display: block; } }


/* =========================================================
   5.2 HERO — sentence, three trades, the name
   ========================================================= */

.hero {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-xl);
  min-height: calc(100svh - 5rem);
  padding-bottom: var(--space-m);
}

.hero__intro { row-gap: var(--space-l); padding-top: var(--space-l); }

.hero__lead {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}
.hero__sentence {
  font-size: var(--text-lead);
  line-height: 1.1;
  letter-spacing: -0.02em;
  max-width: 15ch;
}

.hero__trades {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding-inline: 0;
}
.hero__trades > div { display: flex; flex-direction: column; gap: var(--space-xs); padding-inline: var(--cell); }
.hero__trades dd { font-size: var(--text-small); line-height: 1.45; color: var(--ink-soft); }

@media (min-width: 1024px) {
  .hero__lead   { grid-column: 1 / 4; }
  .hero__trades { grid-column: 4 / 7; }
}

/* The name. Latin and Arabic sit on one baseline, Arabic on the right. */
.hero__name { row-gap: var(--space-s); align-items: end; }

.name-latin {
  grid-column: 1 / -1;
  font-family: var(--font-name);
  font-weight: 700;
  font-size: 29vw;
  line-height: 0.8;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
.name-latin .line { display: block; overflow: hidden; padding-bottom: 0.04em; }
.name-latin .char { display: inline-block; }
.name-latin .dot { color: var(--blade); }

.name-arabic {
  grid-column: 1 / -1;
  grid-row: 1;
  font-family: var(--font-name);
  font-weight: 700;
  font-size: 15vw;
  line-height: 1.05;
  text-align: right;
}

@media (min-width: 768px) {
  .name-latin  { grid-column: 1 / 5; font-size: min(19vw, 19rem); }
  .name-arabic { grid-column: 5 / 7; grid-row: auto; font-size: min(9.5vw, 9.5rem); padding-bottom: 0.05em; }
}


/* =========================================================
   5.3 ORIGINS — the globe: from, to, anywhere
   ========================================================= */

/* The globe rises like the sun over the page: two oranges,
   black pins. main.js draws it on a canvas that covers the
   whole section, so when the camera moves in, the globe can
   grow past its box without being cut off. */
.origins {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--ink);
}
.origins__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.origins__inner {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  row-gap: var(--space-m);
  padding-block: var(--space-l);
  align-content: center;
}

.origins__globe {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
}

/* Marks the globe's resting place and size; the drawing itself is on the canvas */
.earth {
  width: min(84vw, 48svh);
  aspect-ratio: 1;
  max-width: 100%;
}

.earth__label {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  margin-left: 10px;
  padding: 0.15rem 0.4rem;
  background: var(--paper);     /* a small paper tag, so the name reads over the lines */
  color: var(--ink);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.origins__text { grid-column: 1 / -1; display: flex; flex-direction: column; gap: var(--space-m); }

.origins__steps { display: flex; flex-direction: column; gap: var(--space-s); }
.origins__step {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-top: var(--space-xs);
  border-top: 1px solid var(--rule);
  color: var(--ink-faint);
  transition: color 0.4s ease, border-color 0.4s ease;
}
.origins__step.is-active { color: var(--ink); border-top-color: var(--ink); }
.origins__place {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 1.6rem + 3vw, 4.5rem);
  line-height: 0.88;
}
.origins__note { font-size: var(--text-small); }

@media (min-width: 1024px) {
  .origins__inner { grid-template-rows: 1fr; align-items: center; }
  .origins__text  { grid-column: 1 / 3; grid-row: 1; }
  .origins__globe { grid-column: 3 / 7; grid-row: 1; }
  .earth { width: min(44vw, 80svh); }
}


/* =========================================================
   5.4 THE PLATES — project cards
   ========================================================= */

.plates { border-top: 1px solid var(--ink); padding-bottom: var(--space-2xl); }

.plates__head { padding-block: var(--space-xl) var(--space-l); row-gap: var(--space-s); align-items: end; }
.plates__title {
  grid-column: 1 / -1;
  font-family: var(--font-display);
  font-size: var(--text-h2);
  line-height: 0.85;
  text-transform: uppercase;
}
.plates__hint { grid-column: 1 / -1; }
@media (min-width: 1024px) {
  .plates__title { grid-column: 1 / 5; }
  .plates__hint  { grid-column: 5 / 7; text-align: right; }
}

.plates__list { row-gap: var(--space-xl); }

.plate {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.plate__cover { overflow: hidden; aspect-ratio: 4 / 5; max-width: 100%; }
.plate__cover > * { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s cubic-bezier(.2,.7,.2,1); }
.plate:hover .plate__cover > * { transform: scale(1.04); }

.plate__previews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xs); }
.plate__previews > * {
  aspect-ratio: 4 / 3;
  width: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(.2,.7,.2,1);
}
.plate__previews .ph { background: var(--placeholder-2); padding: 0.25rem; font-size: 0.625rem; }
.plate:hover .plate__previews > *:nth-child(1) { transform: translateY(-6px); }
.plate:hover .plate__previews > *:nth-child(2) { transform: translateY(-6px); transition-delay: 0.05s; }
.plate:hover .plate__previews > *:nth-child(3) { transform: translateY(-6px); transition-delay: 0.1s; }

.plate__title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-s);
  padding-top: var(--space-xs);
  border-top: 1px solid var(--ink);
}
.plate__name { font-family: var(--font-display); font-size: var(--text-h3); line-height: 0.85; }
.plate:hover .plate__name { color: var(--blade); }
.plate__meta { white-space: nowrap; }
.plate__line { font-size: var(--text-small); line-height: 1.45; color: var(--ink-soft); max-width: 46ch; }
.plate__tags { display: flex; flex-wrap: wrap; gap: 0.25rem 0.9rem; }
.plate__tags li::before { content: "● "; }

/* A project that isn't ready yet: a card with no link and a "coming soon" cover */
.plate--soon { cursor: default; }
.plate--soon .plate__name { color: var(--ink-faint); }
.plate--soon:hover .plate__name { color: var(--ink-faint); }
.soon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--placeholder);
  color: var(--ink-soft);
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
  text-transform: uppercase;
}
.soon--page { aspect-ratio: 16 / 9; font-size: clamp(3rem, 1rem + 8vw, 9rem); }

/* Tablet: two per row, the wide card across both */
@media (min-width: 768px) {
  .plate { grid-column: span 3; }
  .plate--wide { grid-column: 1 / -1; }
  .plate--wide .plate__cover { aspect-ratio: 16 / 9; }
  .plate--full { grid-column: 1 / -1; }                 /* the last card: across the whole row */
  .plate--full .plate__cover { aspect-ratio: 21 / 9; }
  .plate--full .plate__cover > * { object-position: 50% 62%; }   /* keep the open stand in view */
  .plate--full .plate__previews { grid-template-columns: repeat(6, minmax(0, 1fr)); }   /* same small previews as the other cards */
}
/* Desktop: rows of 4+2, 2+2+2, 3+3 columns */
@media (min-width: 1024px) {
  .plate { grid-column: span 2; }
  .plate--wide { grid-column: span 4; }
  .plate--half { grid-column: span 3; }
  .plate--half .plate__cover { aspect-ratio: 4 / 3; }
  .plate--full { grid-column: 1 / -1; }
}


/* =========================================================
   5.5 MISE EN PLACE — the cutting mat
   ========================================================= */

.mise {
  position: relative;
  z-index: 1;
  background-color: var(--mat);
  /* a horizontal mat line every 120px */
  background-image: repeating-linear-gradient(to bottom, transparent 0 119px, var(--mat-line) 119px 120px);
  color: var(--paper);
  padding-bottom: var(--space-2xl);
  overflow: hidden;
}

.mise { --section-line: var(--mat-line); }

/* Ruler along the top edge: a small tick every 1/8 column, a tall one per column */
.ruler {
  position: relative;
  height: 2.75rem;
  margin-inline: var(--gutter);
  background-image:
    repeating-linear-gradient(to right, var(--mat-ink) 0 1px, transparent 1px 100%),
    repeating-linear-gradient(to right, var(--mat-ink) 0 1px, transparent 1px 100%);
  background-size: calc(100% / (var(--cols) * 8)) 10px, calc(100% / var(--cols)) 22px;
  background-repeat: repeat-x;
}
.ruler ol {
  position: absolute;
  left: 0; right: 0; bottom: 4px;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  color: var(--mat-ink);
}
.ruler li { padding-left: 4px; }
.ruler li:nth-child(n+4) { display: none; }          /* phones: 3 columns, 3 numbers */
@media (min-width: 768px) { .ruler li:nth-child(n+4) { display: block; } }

.mise__inner { position: relative; row-gap: var(--space-xl); padding-top: var(--space-xl); }

.mise__text { grid-column: 1 / -1; display: flex; flex-direction: column; gap: var(--space-m); }
.mise__coord { color: var(--mat-ink); }
.mise__title {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  line-height: 0.85;
  text-transform: uppercase;
}
.mise__text p:not(.label) { color: var(--mat-text); max-width: 54ch; line-height: 1.6; }

/* The photos lie on the mat. Each print is placed by its centre (x, y),
   its size (w, h) and its tilt — one line each, further down. */
.mise__photos {
  grid-column: 1 / -1;
  position: relative;
  width: 100%;
  max-width: 34rem;
  justify-self: center;
  aspect-ratio: 720 / 880;
  container-type: inline-size;
}
.print {
  position: absolute;
  left: var(--x); top: var(--y); width: var(--w); height: var(--h);
  transform: translate(-50%, -50%) rotate(var(--tilt));
  margin: 0;
  padding: 1.2cqw;
  background: var(--paper);
  box-shadow: 0 0.4rem 1rem rgb(0 0 0 / 0.25);
}
.print img { width: 100%; height: 100%; object-fit: cover; }

.print--portrait { --x: 50%; --y: 42%; --w: 53%; --h: 58%; --tilt: -2deg; outline: 1.5px dashed var(--blade); outline-offset: 2.4cqw; }
.print--1 { --x: 18%; --y: 19%; --w: 26%; --h: 31%; --tilt: -8deg; }
.print--2 { --x: 84%; --y: 20%; --w: 22%; --h: 31%; --tilt: 7deg; }
.print--3 { --x: 82%; --y: 54%; --w: 27%; --h: 20%; --tilt: 9deg; }
.print--3 img { object-position: 50% 62%; }
.print--4 { --x: 18%; --y: 77%; --w: 25%; --h: 29%; --tilt: -7deg; }
.print--5 { --x: 63%; --y: 82%; --w: 43%; --h: 23%; --tilt: 6deg; }

.mise__cut { position: absolute; left: 20%; top: 4%; color: var(--blade); }
.mise__tag { position: absolute; color: var(--mat-ink); }

@media (min-width: 1024px) {
  .mise__inner { align-items: center; }
  .mise__text   { grid-column: 1 / 4; padding-right: var(--space-l); }
  .mise__photos { grid-column: 4 / 7; }
}


/* =========================================================
   5.6 CONTACT
   ========================================================= */

.contact { padding-top: var(--space-2xl); }

.contact__inner { row-gap: var(--space-l); }
.contact__inner > * { grid-column: 1 / -1; }
.contact__title {
  font-family: var(--font-display);
  font-size: var(--text-giant);
  line-height: 0.8;
  text-transform: uppercase;
}
.contact__title .dot { color: var(--blade); }

.contact__email { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-xs) var(--space-m); }
.contact__address { font-size: clamp(1.5rem, 1rem + 2vw, 2.5rem); letter-spacing: -0.01em; user-select: all; overflow-wrap: anywhere; }
.copy-btn {
  border: 1px solid var(--ink);
  background: transparent;
  padding: 0.6rem 0.9rem;
  cursor: pointer;
}
.copy-btn:hover { background: var(--ink); color: var(--paper); }

.contact__links { display: flex; flex-wrap: wrap; gap: var(--space-m); }
.contact__links a { padding-block: 0.6rem; }
.contact__links a:hover { color: var(--blade); }

.site-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-m);
  margin: var(--space-xl) calc(var(--gutter) + var(--cell)) 0;
  padding-block: var(--space-s) var(--space-m);
  border-top: 1px solid var(--ink);
}


/* =========================================================
   5.7 SECTION COUNTER — fixed on the right edge (desktop)
   ========================================================= */

.counter {
  position: fixed;
  right: max(0.75rem, env(safe-area-inset-right, 0px));
  top: 50%;
  z-index: 5;
  writing-mode: vertical-rl;
  transform: translateY(-50%);
  padding: 0.6rem 0.3rem;
  background: var(--paper);   /* a small paper tab: reads over the globe and the mat alike */
  color: var(--ink);
  display: none;
}
@media (min-width: 1024px) { .counter { display: block; } }


/* =========================================================
   6. PROJECT PAGES — Ingredients, Method, Notes
   ========================================================= */

.case-head { row-gap: var(--space-l); padding-top: var(--space-l); align-items: end; }
.case-title {
  grid-column: 1 / -1;
  font-family: var(--font-display);
  font-size: clamp(6rem, 2rem + 18vw, 19rem);
  line-height: 0.8;
  text-transform: uppercase;
}
.case-title .dot { color: var(--blade); }
.case-facts { grid-column: 1 / -1; }
@media (min-width: 1024px) {
  .case-title { grid-column: 1 / 5; }
  .case-facts { grid-column: 5 / 7; }
}

.facts > div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-s);
  padding-block: 0.6rem;
  border-bottom: 1px solid var(--rule);
}
.facts dd { font-size: var(--text-small); text-align: right; }

.disciplines {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: var(--space-l) calc(var(--gutter)) 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px dashed var(--rule);
}
.disciplines li { padding: 0.75rem var(--cell); color: var(--ink-faint); }
.disciplines li.is-on { color: var(--ink); }
.disciplines li::before { content: "○ "; }
.disciplines li.is-on::before { content: "● "; }
@media (min-width: 768px) { .disciplines { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.case-media { padding: var(--space-m) calc(var(--gutter) + var(--cell)) 0; }
.case-media > * { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

.case-intro { padding-block: var(--space-2xl); }
.case-intro p {
  grid-column: 1 / -1;
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
}
@media (min-width: 1024px) { .case-intro p { grid-column: 2 / 6; } }

.case-section { padding-bottom: var(--space-2xl); }
.case-section__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-xs) var(--space-m);
  margin-inline: calc(var(--gutter) + var(--cell));
  padding-bottom: var(--space-s);
  border-bottom: 1px solid var(--ink);
}
.case-section__title {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 2rem + 5vw, 6rem);
  line-height: 0.85;
  text-transform: uppercase;
}

.ingredients { row-gap: var(--space-m); }
.ingredients > div { grid-column: span 3; display: flex; flex-direction: column; gap: var(--space-xs); padding-top: var(--space-m); }
.ingredients dd { font-size: var(--text-small); line-height: 1.45; color: var(--ink-soft); }
@media (min-width: 768px) { .ingredients > div { grid-column: span 2; } }
@media (min-width: 1024px) { .ingredients > div { grid-column: span 1; } }

.case-prose { padding-top: var(--space-l); row-gap: var(--space-l); }
.case-prose > p { grid-column: 1 / -1; max-width: 60ch; line-height: 1.6; }
.case-prose > figure, .case-prose > .ph { grid-column: 1 / -1; }
.case-prose figure img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.case-prose figcaption { margin-top: var(--space-xs); }
@media (min-width: 768px) {
  .case-prose > p { grid-column: 1 / 4; }
  .case-prose > figure.half { grid-column: span 3; }
  .case-prose > figure.wide { grid-column: 1 / -1; }
  .case-prose > figure.wide img { aspect-ratio: 16 / 9; }
}

.step { row-gap: var(--space-s); padding-block: var(--space-l); border-bottom: 1px solid var(--rule); margin-inline: 0; }
.step__n { grid-column: 1 / -1; font-family: var(--font-display); font-size: clamp(4rem, 2rem + 4vw, 7.5rem); line-height: 0.8; }
.step__media { grid-column: 1 / -1; }
.step__media .ph { aspect-ratio: 16 / 10; }
.step__text { grid-column: 1 / -1; display: flex; flex-direction: column; gap: var(--space-xs); }
.step__text p { color: var(--ink-soft); font-size: var(--text-small); }
@media (min-width: 1024px) {
  .step__n { grid-column: 1 / 2; }
  .step__media { grid-column: 2 / 5; }
  .step__text { grid-column: 5 / 7; }
}

.notes { row-gap: var(--space-m); }
.notes > * { grid-column: 1 / -1; }
.notes p:not(.label) { font-size: clamp(1.25rem, 1rem + 0.8vw, 1.5rem); line-height: 1.4; max-width: 50ch; }
@media (min-width: 1024px) {
  .notes .case-section__title { grid-column: 1 / 3; }
  .notes > div { grid-column: 3 / 7; }
}

.next-plate {
  display: block;
  margin-inline: calc(var(--gutter) + var(--cell));
  padding-block: var(--space-m) var(--space-xl);
  border-top: 1px solid var(--ink);
}
.next-plate__name {
  display: block;
  margin-top: var(--space-s);
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 2rem + 10vw, 13rem);
  line-height: 0.8;
  text-transform: uppercase;
}
.next-plate:hover .next-plate__name { color: var(--blade); }

.placeholder-note { color: var(--ink-soft); font-style: italic; }

/* ---------- Norma's menu: one kraft sheet, folded once ----------
   .menu-fold        the stage; motion.js pins it while you scroll
   .menu-fold__sheet the open sheet: left page + the flap
   .menu-fold__flap  the right half, hinged on the fold (its left edge);
                     inside it the drinks page, on its back the cover
   --open goes from 0 (closed, cover on top) to 1 (open flat).
   --zoom and --pan are only used on phones, to read each page. */
.menu-fold {
  --open: 1;                 /* without JavaScript the menu simply lies open */
  --zoom: 0;
  --pan: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100svh;
  padding: var(--space-l) calc(var(--gutter) + var(--cell));
  overflow: hidden;
  perspective: 2400px;
}

.menu-fold__sheet {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));   /* two equal halves, whatever is printed on them */
  width: min(100%, 64rem, (100svh - 7rem) * 2 / 1.419);
  transform-style: preserve-3d;
  /* closed, the card covers only the left half: slide it to the middle */
  transform: translateX(calc((1 - var(--open)) * 25%));
}

.menu-fold__flap {
  position: relative;
  transform-style: preserve-3d;
  transform-origin: left center;
  /* lifted 2px towards you, so when closed it lies on top of the left page, not inside it */
  transform: translateZ(2px) rotateY(calc((var(--open) - 1) * 180deg));
}
.menu-fold__inside, .menu-fold__cover { backface-visibility: hidden; }
.menu-fold .menu-fold__cover { position: absolute; inset: 0; transform: rotateY(180deg); }   /* sits on the back of the flap */

/* Shadow: the left page is in the shade while the flap lies on it */
.menu-fold__left::after,
.menu-fold__inside::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to right, rgb(48 28 12 / 0.28), transparent 18%);
}
.menu-fold__left::after { background: rgb(48 28 12 / 0.5); opacity: calc(1 - var(--open)); }
.menu-fold__inside::after { opacity: calc(0.6 - 0.45 * var(--open)); }

/* Phones: once open, zoom into the left page, then slide across to the right one */
@media (max-width: 767px) {
  .menu-fold__sheet {
    transform:
      translateX(calc((1 - var(--open)) * 25% + var(--zoom) * (50% - var(--pan) * 100%)))
      scale(calc(1 + var(--zoom)));
  }
}

/* A page of the menu. Sizes are in cqw (1% of the page's width), so the
   whole page scales like the printed sheet, at any screen size. */
.kraft-page {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 1 / 1.419;
  padding: 7% 6% 5%;
  display: flex;
  flex-direction: column;
  background-color: var(--kraft);
  background-image: url("images/fibres.svg"), linear-gradient(105deg, rgb(255 255 255 / 0.06), rgb(71 38 12 / 0.06));
  background-size: 180px, 100%;
  color: var(--kraft-ink);
  font-family: var(--font-label);
  box-shadow: 0.3rem 0.9rem 1.9rem rgb(48 28 12 / 0.22);
}

/* the cover */
.kraft-page--cover { justify-content: center; align-items: center; gap: 2.5cqw; }
.kraft-cover-title { font-family: var(--font-display); font-size: 22cqw; line-height: 0.9; }
.kraft-cover-tag { font-size: 2.6cqw; letter-spacing: 0.44em; text-transform: uppercase; }

/* the heading at the top of each page */
.kraft-head { text-align: center; margin-bottom: 7cqw; }
.kraft-name { font-family: var(--font-display); font-size: 12cqw; line-height: 1; }
.kraft-tag { margin-top: 1.2cqw; font-size: 2.1cqw; letter-spacing: 0.44em; text-transform: uppercase; }

/* one line of the menu: name | description (Portuguese, English below) | price */
.kraft-item { display: grid; grid-template-columns: 30cqw 1fr auto; align-items: center; column-gap: 2.5cqw; padding-block: 1.1cqw; }
.kraft-item--gap { margin-top: 5cqw; }
.kraft-item b { font-family: var(--font-display); font-weight: 400; font-size: 8.6cqw; line-height: 0.95; }
.kraft-item i { font-style: normal; display: flex; flex-direction: column; gap: 0.5em; font-size: 2.35cqw; text-transform: uppercase; line-height: 1.2; }
.kraft-item i span { padding-left: 1em; opacity: 0.7; }
.kraft-item em { font-style: normal; font-family: var(--font-display); font-size: 6.4cqw; line-height: 1; }

/* the small print at the bottom of the food page */
.kraft-foot { margin-top: auto; display: flex; flex-direction: column; gap: 1.6cqw; font-size: 1.9cqw; text-transform: uppercase; }
.kraft-extras { display: flex; justify-content: space-between; gap: 2cqw; }
.kraft-foot small { font-size: 1em; opacity: 0.7; }

/* the drinks page fits more lines: smaller names, section labels */
.kraft-page--drinks .kraft-head { margin-bottom: 3cqw; }
.kraft-page--drinks .kraft-name { font-size: 7cqw; }
.kraft-course {
  display: flex;
  justify-content: space-between;
  margin-top: 3cqw;
  font-size: 1.8cqw;
  letter-spacing: 0.44em;
  text-transform: uppercase;
}
.kraft-unit { font-size: 0.8em; letter-spacing: 0.05em; text-transform: none; }
.kraft-page--drinks .kraft-item { grid-template-columns: 28cqw 1fr auto; padding-block: 0.2cqw; }
.kraft-page--drinks .kraft-item b { font-size: 5.9cqw; }
.kraft-page--drinks .kraft-item i { font-size: 1.95cqw; }
.kraft-page--drinks .kraft-item em { font-size: 5cqw; }


/* =========================================================
   5.0 LOADER — the cutting mat (loader.js)
   Two halves of the same mat, each showing its half of it.
   The blade and the cut line run across the middle; then the
   halves slide apart (.is-cut) and the page shows through.
   ========================================================= */

.loader { display: none; }
.is-loading .loader, .loader.is-cut { display: block; }
.is-loading, .is-loading body { overflow: hidden; }          /* no scrolling while it loads */

.loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  --section-line: var(--mat-line);
}
.loader.is-cut { pointer-events: none; }

.loader__half {
  position: absolute;
  left: 0;
  right: 0;
  height: 50%;
  overflow: hidden;
  transition: transform 1.15s cubic-bezier(0.7, 0, 0.2, 1);
}
.loader__half--top { top: 0; transform-origin: 0 100%; }
.loader__half--bottom { bottom: 0; transform-origin: 100% 0; }
.loader.is-cut .loader__half--top { transform: translateY(-104%) rotate(-2deg); }
.loader.is-cut .loader__half--bottom { transform: translateY(104%) rotate(-2deg); }

/* the whole mat, the size of the screen: each half shows its own part */
.loader__mat {
  position: absolute;
  left: 0;
  right: 0;
  height: 200%;
  background-color: var(--mat);
  background-image: repeating-linear-gradient(to bottom, transparent 0 119px, var(--mat-line) 119px 120px);
  color: var(--mat-text);
}
.loader__half--top .loader__mat { top: 0; }
.loader__half--bottom .loader__mat { bottom: 0; }
.loader__mat .ruler { margin-top: var(--space-m); }

/* the counter sits on the cut, so the blade slices it in two */
.loader__count {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-name);
  font-weight: 700;
  font-size: clamp(8rem, 4rem + 22vw, 24rem);
  line-height: 0.8;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.loader__note { position: absolute; bottom: var(--space-m); color: var(--mat-ink); }
.loader__note--left { left: calc(var(--gutter) + var(--cell)); }
.loader__note--right { right: calc(var(--gutter) + var(--cell)); }

/* the cut line grows from the left behind the blade */
.loader__line {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 3px;
  margin-top: -1.5px;
  background: var(--blade);
  transform: scaleX(0);
  transform-origin: 0 50%;
}
/* the blade: its tip is the leading edge of the cut */
.loader__blade {
  position: absolute;
  left: clamp(-120px, -8vw, -64px);
  top: 50%;
  width: clamp(64px, 8vw, 120px);
  height: auto;
  margin-top: calc(clamp(64px, 8vw, 120px) / -3 * 1 - 1px);   /* sits on the line: its height is a third of its width */
  fill: var(--blade);
  filter: drop-shadow(0 4px 6px rgb(0 0 0 / 0.35));
}
.loader.is-cut .loader__line, .loader.is-cut .loader__blade { opacity: 0; transition: opacity 0.2s; }


/* =========================================================
   5.6 PLAY — the way into the card game, on the homepage
   ========================================================= */

.play { border-top: 1px solid var(--ink); }
.play__inner { row-gap: var(--space-l); padding-block: var(--space-2xl); align-items: center; }
.play__text { grid-column: 1 / -1; display: flex; flex-direction: column; gap: var(--space-s); }
.play__title { font-family: var(--font-display); font-size: var(--text-h2); line-height: 0.85; text-transform: uppercase; }
.play__title .dot { color: var(--blade); }
.play__line { max-width: 44ch; color: var(--ink-soft); }
.play__go { margin-top: var(--space-xs); }
.play__inner:hover .play__go, .play__inner:hover .play__title { color: var(--blade); }

/* four cards fanned out; they open wider on hover */
.play__fan { grid-column: 1 / -1; position: relative; height: clamp(12rem, 30vw, 20rem); }
.play__fan svg {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: auto;
  height: 85%;
  aspect-ratio: 2 / 3;
  transform-origin: 50% 120%;
  transform: translateX(-50%) rotate(var(--turn));
  transition: transform 0.5s cubic-bezier(.2,.7,.2,1);
  filter: drop-shadow(0 0.4rem 0.6rem rgb(0 0 0 / 0.18));
}
.play__fan svg:nth-child(1) { --turn: -15deg; }
.play__fan svg:nth-child(2) { --turn: -5deg; }
.play__fan svg:nth-child(3) { --turn: 5deg; }
.play__fan svg:nth-child(4) { --turn: 15deg; }
.play__inner:hover .play__fan svg { transform: translateX(-50%) rotate(calc(var(--turn) * 1.6)); }
@media (min-width: 1024px) {
  .play__text { grid-column: 1 / 4; }
  .play__fan { grid-column: 4 / 7; }
}


/* =========================================================
   10. RONDA — the card game (play.html, ronda.js)
   The table is the cutting mat. Cards are SVG drawn by ronda.js.
   ========================================================= */

.ronda {
  --card-w: clamp(54px, 10.5vw, 104px);
  position: relative;
  margin-top: var(--space-l);
  padding: var(--space-l) calc(var(--gutter) + var(--cell));
  background-color: var(--mat);
  background-image: repeating-linear-gradient(to bottom, transparent 0 119px, var(--mat-line) 119px 120px);
  color: var(--mat-text);
  --section-line: var(--mat-line);
  overflow: hidden;
}
.ronda__board { position: relative; display: flex; flex-direction: column; gap: var(--space-m); min-height: 80svh; justify-content: space-between; }
.ronda__player { display: flex; align-items: center; justify-content: space-between; gap: var(--space-s); color: var(--mat-ink); }
.ronda__player b { color: var(--mat-text); font-weight: 400; font-size: 1.4em; }

/* hands and table: rows of cards that wrap */
.ronda__hand, .ronda__table { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(var(--card-w) * 0.12); min-height: calc(var(--card-w) * 1.5); }
.ronda__middle { display: flex; align-items: center; gap: var(--space-m); }
.ronda__table { flex: 1; padding: var(--space-s); border: 1px dashed var(--mat-line); border-radius: 8px; }

/* a card */
.card {
  position: relative;
  display: block;
  width: var(--card-w);
  aspect-ratio: 2 / 3;
  padding: 0;
  border: 0;
  background: none;
  filter: drop-shadow(0 0.3rem 0.4rem rgb(0 0 0 / 0.3));
}
.card svg { display: block; width: 100%; height: 100%; }
.card__index { font-family: var(--font-name); font-weight: 700; font-size: 20px; }
.card__figure { font-family: var(--font-display); font-size: 15px; fill: var(--ink); }
.card__suit { font-family: var(--font-name); font-weight: 700; font-size: 10px; }          /* the suit's name in Arabic */
button.card { cursor: pointer; transition: transform 0.2s ease; }
button.card:not(:disabled):hover { transform: translateY(-10%); }
button.card:disabled { cursor: default; opacity: 0.85; }
button.card:focus-visible { outline: 3px solid var(--blade); outline-offset: 3px; border-radius: 6px; }
.card--takes::after {                                   /* this card takes something: an orange dot */
  content: "";
  position: absolute;
  top: -6px; right: -6px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--blade);
}
.card--flying { z-index: 200; pointer-events: none; }
.card--flying svg { width: 100%; height: 100%; }

/* the deck and the two piles: little stacks of backs with a count */
.ronda__deck, .ronda__pile {
  position: relative;
  flex: none;
  width: calc(var(--card-w) * 0.8);
  aspect-ratio: 2 / 3;
  border-radius: 6px;
  background: url("images/ronda-back.svg") center / cover;
  box-shadow: 3px 3px 0 var(--mat-line), 6px 6px 0 rgb(0 0 0 / 0.15);
  display: grid;
  place-items: center;
}
.ronda__pile { width: calc(var(--card-w) * 0.55); }
.ronda__deck span, .ronda__pile span {
  padding: 0.1rem 0.4rem;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-name);
  font-weight: 700;
  font-size: 1.1rem;
}
.ronda__deck.is-empty, .ronda__pile.is-empty { background: none; box-shadow: none; border: 1px dashed var(--mat-line); }

.ronda__status { color: var(--mat-text); text-align: center; flex: 1; }

/* the log of what happened */
.ronda__log {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: var(--space-l);
  padding-top: var(--space-s);
  border-top: 1px solid var(--mat-line);
  color: var(--mat-ink);
  text-transform: none;
  letter-spacing: 0.02em;
  min-height: 9rem;
}
.ronda__log li:first-child { color: var(--mat-text); }
.ronda__log li.is-you::before { content: "● "; color: var(--blade); }
.ronda__log li.is-bot::before { content: "● "; color: var(--mat-ink); }

/* "Missa!", "Bount!" in big letters for a moment */
.ronda__flash {
  position: absolute;
  left: 50%;
  top: 45%;
  translate: -50% -50%;
  padding: 0.2em 0.5em;
  background: var(--blade);
  color: var(--paper);
  font-family: var(--font-display);
  font-size: clamp(3rem, 2rem + 5vw, 7rem);
  line-height: 1;
  text-transform: uppercase;
  pointer-events: none;
  z-index: 5;
}

.ronda__overlay {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-m);
  background: rgb(31 74 56 / 0.92);
  text-align: center;
}
.ronda__overlay[hidden] { display: none; }
.ronda__overlay-text { font-family: var(--font-display); font-size: clamp(2.5rem, 1.5rem + 4vw, 5rem); line-height: 0.95; text-transform: uppercase; max-width: 16ch; }
.ronda__again { border-color: var(--paper); color: var(--paper); }
.ronda__again:hover { background: var(--paper); color: var(--mat); }

.ronda-rules { padding-top: var(--space-2xl); }

@media (min-width: 1024px) {
  .ronda { display: grid; grid-template-columns: 1fr 18rem; column-gap: var(--space-l); }
  .ronda__log { margin-top: 0; padding-top: 0; padding-left: var(--space-m); border-top: 0; border-left: 1px solid var(--mat-line); }
}


/* ---------- 7. Reduced motion ----------
   !important on purpose: this must beat every other rule. */

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


/* ---------- 8. Project motion pieces (motion.js) ---------- */

/* BORA! logo: fills are set by motion.js from the brand palette */
.bora-logo { display: block; width: 100%; height: 100%; }
.case-media .bora-logo { aspect-ratio: 16 / 9; height: auto; }

/* BORA! pattern: a canvas drawn by motion.js */
.bora-pattern { display: block; width: 100%; max-width: 100%; }
.case-band {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: 0 calc(var(--gutter) + var(--cell)) var(--space-2xl);
}
.case-band .bora-pattern { aspect-ratio: 4 / 5; cursor: crosshair; }
@media (min-width: 768px) { .case-band .bora-pattern { aspect-ratio: 21 / 9; } }

/* Case-study images: method steps and the full-width photo */
.step__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.case-photo { margin: 0; row-gap: var(--space-s); }
.case-photo img { grid-column: 1 / -1; width: 100%; }
.case-photo figcaption { grid-column: 1 / -1; color: var(--ink-soft); }
@media (min-width: 1024px) {
  .case-photo img { grid-column: 2 / 6; }
  .case-photo figcaption { grid-column: 2 / 6; }
}

/* BORA! packs: 3D boxes folded from the dielines (bora-3d.js) */
.packs { row-gap: var(--gutter); }
.bora-pack {
  grid-column: 1 / -1;
  aspect-ratio: 4 / 5;
  background: var(--ground, var(--placeholder));
  cursor: grab;
  touch-action: pan-y;          /* vertical swipes still scroll the page */
}
.bora-pack:active { cursor: grabbing; }
.bora-pack canvas { display: block; width: 100%; height: 100%; }
@media (min-width: 768px) { .bora-pack { grid-column: span 2; } }

/* BORA! wipes: a soft pouch in 3D (bora-3d.js) */
.bora-pillow {
  grid-column: 1 / -1;
  aspect-ratio: 4 / 3;
  background: var(--ground, var(--placeholder));
  cursor: grab;
  touch-action: pan-y;
}
.bora-pillow:active { cursor: grabbing; }
.bora-pillow canvas { display: block; width: 100%; height: 100%; }
@media (min-width: 768px) { .bora-pillow { aspect-ratio: 21 / 9; } }

/* BORA! symbol in step 02 (motion.js) */
.step__media .bora-symbol { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; }
.step__media .bora-tiles { display: block; width: 100%; height: auto; }

/* BORA! 3D range and stand in the method steps (bora-3d.js) */
.bora-3d {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--ground, var(--placeholder));
  cursor: grab;
  touch-action: pan-y;
}
.bora-3d:active { cursor: grabbing; }
.bora-3d canvas { display: block; width: 100%; height: 100%; }
.bora-3d img { width: 100%; height: 100%; object-fit: cover; }
.bora-3d.is-live img { display: none; }        /* the poster only shows without WebGL */

/* CerciOeiras: brand shapes and the grip film */
.step__media .cerci-shapes { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; }
.case-film { padding-inline: calc(var(--gutter) + var(--cell)); }
.case-film video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #2b2b2b; }
.plate__cover video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* CerciOeiras lines and patterns (motion.js) */
.case-band--method { padding: var(--space-l) calc(var(--gutter) + var(--cell)); border-bottom: 1px solid var(--rule); }
.cerci-lines { display: block; width: 100%; aspect-ratio: 4 / 3; }
@media (min-width: 768px) { .cerci-lines { aspect-ratio: 21 / 9; } }

/* The Glow (DeLightful) */
.glow-room { aspect-ratio: 16 / 9; }
.buck { display: grid; grid-template-columns: 1fr 1fr; aspect-ratio: 16 / 10; background: #FFFFFF; }
.buck img { width: 100%; height: 100%; object-fit: contain; }
.buck-face {
  background: #F7A21B url("../images/delightful/buck-faces.webp") no-repeat;
  background-size: 200% 400%;
  background-position: 0 0;
  align-self: center; aspect-ratio: 2 / 1; width: 100%;
}
.slides { position: relative; aspect-ratio: 16 / 10; background: #000; overflow: hidden; }
.slides img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.9s ease; }
.slides img.is-on { opacity: 1; }
.glow-poster { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; background: #1462AE; cursor: pointer; }
.glow-poster__halo { opacity: 0; transition: opacity 0.6s ease; pointer-events: none; }
.glow-poster__body { transition: fill 0.4s ease; }
.glow-poster__person.is-glowing .glow-poster__body { fill: #FFC93C; }
.is-glowing > .glow-poster__halo { opacity: 1; }
.glow-poster__person:focus-visible { outline: none; }
.glow-poster__person:focus-visible .glow-poster__body { stroke: #FFFFFF; stroke-width: 3; }
@media (prefers-reduced-motion: reduce) { .slides img, .glow-poster__halo, .glow-poster__body { transition: none; } }

/* Moscavide */
.mosc-hero { position: relative; aspect-ratio: 16 / 9; background: #FFFCD6; overflow: hidden; }
.mosc-hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.mosc-hero .mosc-hero__map--overview { -webkit-mask-image: radial-gradient(closest-side, #000 75%, transparent); mask-image: radial-gradient(closest-side, #000 75%, transparent); }
.mosc-hero .mosc-hero__map { inset: auto; left: 0; top: 0; transform-origin: 0 0; opacity: 0; will-change: transform, opacity; }  /* size and place set by moscavide-map.js */
.mosc-hero__logo { position: absolute; left: 50%; top: 50%; width: 38%; height: auto; transform: translate(-50%, -50%); opacity: 0; pointer-events: none; }
.mosc-hero__credit { position: absolute; right: 8px; bottom: 6px; font-size: 9px; color: rgb(79 48 36 / .6); }
.mosc-pattern, .mosc-picto, .mosc-map { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; background: #FFFCD6; }
.mosc-signs { aspect-ratio: 16 / 10; }
.slides--contain { background: var(--ground, #000); }
.slides--contain img { object-fit: contain; }

/* ---------- 9. Backgrounds behind animations ----------
   Each 3D scene or animation sits on a coloured ground, chosen on
   the element with one of these classes (they set --ground). */
.ground-cream { --ground: #FFFCD6; }
:root { --mosc-orange: #F47922; --mosc-ink: #4F3024; }   /* Moscavide brand colours */
.ground-butter { --ground: #FDEBB4; }
.ground-pink { --ground: #F9D3E2; }
.ground-rose { --ground: #F6DCE6; }
.ground-lilac { --ground: #E4DCEE; }
.ground-mint { --ground: #CDEFEC; }
.ground-paper { --ground: #F4EEE3; }
.ground-night { --ground: #1A1820; }
.ground-sun { --ground: #FED944; }
.ground-blue { --ground: #28438A; }

/* Moscavide: survey chart and alphabet (motion.js section 12) */
.mosc-chart, .mosc-alphabet { display: block; width: 100%; height: auto; }
.mosc-chart text, .mosc-alphabet text { font-family: var(--font-body); fill: var(--mosc-ink); }
.mosc-chart__title { font-size: 38px; font-weight: 700; fill: var(--mosc-orange); }
.mosc-chart__sub { font-size: 17px; }
.mosc-chart__lang { font-size: 19px; text-anchor: end; }
.mosc-chart__total { font-size: 19px; font-weight: 700; }
.mosc-chart__key { font-size: 15px; }
.mosc-alphabet__grid path { stroke: var(--mosc-orange); stroke-width: 1.2; fill: none; opacity: 0.7; }
.mosc-alphabet__letter { fill: var(--ink); fill-rule: evenodd; }
.mosc-alphabet__name { font-size: 34px; }

/* The Moscavide map pins scale from their own centre */
.map-pin { transform-box: fill-box; transform-origin: 50% 50%; }

/* The Glow poster's lettering */
.glow-poster text { font-family: var(--font-body); }
.glow-poster__title { fill: #F7A21B; font-weight: 700; font-size: 96px; letter-spacing: -3px; }
.glow-poster__sub { fill: #FFFFFF; font-weight: 700; font-size: 52px; letter-spacing: -1.5px; }
.glow-poster__hint { fill: #FFFFFF; font-size: 20px; }