/* AFC 13 — chrome: brand mark, dock (language + menu), menu, side index, scroll edges.
   Apple's fluid-interface rules (~/.claude/skills/apple-design): the chrome is a translucent functional layer over
   the content (§12), its menu materializes out of the control that opened it and leaves the same way (§7), and
   every moving value is written by a spring in chrome.js — no CSS transitions on anything a gesture can grab (§3).
   Round 2: the chrome reads the ground under it and turns to a dark material over [data-theme="dark"] content; the
   menu speaks in the display voice (Archivo condensed heavy caps) with its numbers in mono.
   Ronda 2 (18 Oct, sitereel ideas): the names rise out of masks on the menu's open spring, and their letters roll up
   into green under the mouse or the keyboard focus (a wave driven by one spring per link in chrome.js); touch gets a
   press highlight, reduced motion a colour change.
   Tokens come from site.css; the fallbacks only keep the chrome intact if a token is missing. Loaded after it. */

/* ── the chrome's palette. chrome.js puts .on-dark on each piece that sits over a dark ground (brand, dock, side
   index; the menu takes its dock's material as it opens). Inside it the tokens flip, so the material, the text and
   the hairlines cross-fade together in ~.2 s: vibrancy that stays legible over a changing background (§12), and the
   light↔dark change eased, never a flash (§14). Dark values follow the dark ground of ROUND2_BRIEF. */
.brand, .dock, .menu, .index {
  --c-hair: rgba(16, 19, 28, .08);          /* the hairline that draws a material's edge */
  --c-fill: rgba(16, 19, 28, .055);         /* the segmented control's track */
  --c-thumb: rgba(255, 255, 255, .94);
  --c-thumb-shadow: 0 1px 3px rgba(16, 19, 28, .14), 0 0 0 .5px rgba(16, 19, 28, .07), inset 0 1px 0 #fff;
  --c-hover: rgba(16, 19, 28, .05);
  --c-grabber: rgba(16, 19, 28, .22);
}
.on-dark {
  --ink: #edf1f9; --ink-2: #c9cfdb; --mute: #939cb2;
  --line: rgba(237, 241, 249, .14); --line-2: rgba(237, 241, 249, .3);
  --apex-deep: var(--apex);                 /* accent text on a dark ground is the bright Apex */
  --focus: var(--apex);                     /* the ring too: :root resolved --focus to the deep green, 1.5:1 on the dark material */
  --mat-regular: rgba(17, 26, 50, .66);
  --mat-thick: rgba(13, 20, 42, .88);
  --mat-edge: inset 0 1px 0 rgba(255, 255, 255, .11);
  --shadow-s: 0 1px 2px rgba(0, 0, 0, .28), 0 10px 24px -12px rgba(0, 0, 0, .62);
  --shadow-l: 0 2px 6px rgba(0, 0, 0, .3), 0 34px 70px -28px rgba(0, 0, 0, .72);
  --c-hair: rgba(237, 241, 249, .1);
  --c-fill: rgba(237, 241, 249, .08);
  --c-thumb: rgba(237, 241, 249, .17);
  --c-thumb-shadow: 0 1px 3px rgba(0, 0, 0, .32), 0 0 0 .5px rgba(237, 241, 249, .1), inset 0 1px 0 rgba(255, 255, 255, .14);
  --c-hover: rgba(237, 241, 249, .07);
  --c-grabber: rgba(237, 241, 249, .3);
  color-scheme: dark;
}

/* the room the floating chrome takes at the bottom on phones: content and focus scrolling stay clear of it */
:root { --chrome-inset-b: 0px; }
@media (min-width: 861px) { html { scroll-padding-top: 104px; } }   /* focus and anchors stop clear of the dock and the top veil */
@media (max-width: 860px) {
  :root { --chrome-inset-b: calc(80px + env(safe-area-inset-bottom, 0px)); }
  html { scroll-padding-top: calc(88px + env(safe-area-inset-top, 0px)); scroll-padding-bottom: var(--chrome-inset-b); }   /* clear of the brand and its veil too */
}

/* ── brand mark: top left, always ────────────────────────────────── */
.brand {
  position: fixed; z-index: 40; left: max(var(--edge), env(safe-area-inset-left, 0px)); top: calc(clamp(16px, 2.2vw, 26px) + env(safe-area-inset-top, 0px));
  display: block; width: clamp(78px, 7.4vw, 104px); color: var(--ink); line-height: 0;
  transition: opacity .35s var(--ease-out), color .2s ease, scale var(--press-t, 100ms) ease-out;
}
.brand svg { width: 100%; height: auto; }
/* the footer's own mark is on screen (chrome.js): one AFC | 13 at a time. Focused from the keyboard it stays */
.brand.is-away:not(:focus-visible) { opacity: 0; pointer-events: none; }

/* ── dock: a material capsule. The material is its own layer so a phone can dissolve it into the open sheet ── */
.dock {
  --mp: 0;                       /* menu open-progress, written by the menu's spring */
  --dz: 0;                       /* phone: how much of the capsule's material the open sheet has taken over */
  --du: 0;                       /* phone: the open sheet's scroll edge, while its list runs beneath the capsule */
  position: fixed; z-index: 41; right: max(var(--edge), env(safe-area-inset-right, 0px)); top: clamp(12px, 1.8vw, 20px);
  display: flex; align-items: center; gap: 4px; height: 48px; padding: 4px;
  border-radius: 999px; color: var(--ink); transition: opacity .35s var(--ease-out), color .2s ease;
}
.dock::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background-color: var(--mat-regular, rgba(247, 248, 246, .72));
  -webkit-backdrop-filter: var(--mat-regular-filter, blur(24px) saturate(180%)); backdrop-filter: var(--mat-regular-filter, blur(24px) saturate(180%));
  box-shadow: var(--mat-edge, inset 0 1px 0 rgba(255, 255, 255, .7)), inset 0 0 0 .5px var(--c-hair),
    var(--shadow-s, 0 6px 18px -8px rgba(23, 32, 56, .26), 0 1px 3px rgba(23, 32, 56, .07));
  opacity: calc(1 - var(--dz));
  transition: background-color .2s ease, box-shadow .2s ease;   /* light ↔ dark material; --dz stays on its spring */
}

/* PT / EN: a segmented control; the thumb slides on a spring (chrome.js writes --seg from 0 to 1) */
.lang {
  --seg: 0;
  position: relative; display: grid; grid-template-columns: 1fr 1fr; height: 40px; padding: 0 3px;
  border-radius: 999px; background-color: var(--c-fill); transition: background-color .2s ease;
}
.lang-thumb {
  position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 999px;
  background-color: var(--c-thumb); box-shadow: var(--c-thumb-shadow);
  transform: translate3d(calc(var(--seg) * 100%), 0, 0); pointer-events: none;
  transition: background-color .2s ease, box-shadow .2s ease;
}
.lang button {
  position: relative; min-width: 44px; padding: 0 10px; border-radius: 999px;
  font-family: var(--brand, 'Archivo', ui-sans-serif, sans-serif); font-size: max(11px, var(--t-label, .7rem));
  font-weight: 560; font-stretch: 125%; letter-spacing: var(--tr-label, .16em); line-height: 1;
  color: var(--mute); touch-action: manipulation; transition: color .2s ease, scale var(--press-t, 100ms) ease-out;
}
.lang button[aria-pressed="true"] { color: var(--ink); }
.on-dark .lang button:not([aria-pressed="true"]) { color: #b4bccd; }   /* 4.5:1+ on the dark capsule, over the intro's film too */

.menu-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 40px; padding: 0 14px 0 16px;
  border-radius: 999px; touch-action: manipulation; transition: background-color .2s ease;
}
.menu-btn .t-label { line-height: 1; }
@media (hover: hover) { .menu-btn:hover { background: var(--apex-soft); } }
/* two lines that become an X, driven 1:1 by the menu's open-progress (so they reverse mid-flight with it) */
.menu-btn i { position: relative; display: block; width: 16px; height: 12px; }
.menu-btn i::before, .menu-btn i::after {
  content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -.75px; border-radius: 1px; background: currentColor;
}
.menu-btn i::before { transform: translate3d(0, calc((1 - var(--mp)) * -3.5px), 0) rotate(calc(var(--mp) * 45deg)); }
.menu-btn i::after  { transform: translate3d(0, calc((1 - var(--mp)) * 3.5px), 0) rotate(calc(var(--mp) * -45deg)); }

/* wayfinding ("where am I?") lives in the phone capsule only */
.where { display: none; }

/* ── scrim: dims to focus while the menu is up; its opacity is the menu's progress ── */
.scrim {
  position: fixed; inset: 0; z-index: 38; background: var(--scrim, rgba(16, 19, 28, .18));
  opacity: 0; pointer-events: none; -webkit-tap-highlight-color: transparent;
}
.menu-open .scrim { pointer-events: auto; }

/* ── menu: shared content ────────────────────────────────────────── */
.menu {
  position: fixed; z-index: 40; visibility: hidden; opacity: 0; color: var(--ink);
  background: var(--mat-thick, rgba(243, 245, 250, .86));
  -webkit-backdrop-filter: var(--mat-thick-filter, blur(30px) saturate(160%)); backdrop-filter: var(--mat-thick-filter, blur(30px) saturate(160%));
  box-shadow: var(--mat-edge, inset 0 1px 0 rgba(255, 255, 255, .7)), inset 0 0 0 .5px var(--c-hair),
    var(--shadow-l, 0 30px 60px -28px rgba(23, 32, 56, .38), 0 4px 14px rgba(23, 32, 56, .07));
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
}
.menu::-webkit-scrollbar { display: none; }
.menu.is-live { visibility: visible; }
.menu-grab { display: none; }
.menu-list { list-style: none; margin: 0; padding: 0; display: grid; }
/* the display voice: Archivo condensed heavy caps. Each row is its own mask: the name rises out of it as the menu
   opens (chrome.js writes the row's transform from the open spring; the lean straightens from its bottom-left corner,
   as in the site's line reveals) */
.menu-list li { overflow: hidden; }
.menu-list a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; min-height: 44px; padding: .2em .3em .14em;
  border-radius: 14px; text-decoration: none; color: var(--ink);
  font-family: var(--display, 'Archivo', ui-sans-serif, sans-serif); text-transform: uppercase;
  font-size: clamp(1.8rem, 1.35rem + .9vw, 2.15rem); line-height: .92; letter-spacing: 0;
  font-stretch: 64%; font-weight: 800; white-space: nowrap; transform-origin: 0 100%;
  -webkit-user-drag: none; -webkit-tap-highlight-color: transparent;
  transition: background-color .2s ease, color .2s ease, scale var(--press-t, 100ms) ease-out;
}
.menu-list a > span { min-width: 0; }
/* rolling letters (round 2, chrome.js splits the names; the visually hidden copy keeps the accessible name). The
   word is a clip window exactly one letter-box tall; the box reaches into the link's own padding, so tildes, acute
   accents and the cedilla have room, and the negative margin keeps the row's height as it was. Under each letter
   waits its twin in green (--apex-deep: the deep green on the light material, the bright Apex on the dark one,
   where .on-dark flips the token); the roll moves the letter up by its own height and the twin lands in its place */
.menu-list .sr-only { text-transform: none; }   /* the name is read as written ("Competição"), not spelled as caps */
.roll { display: inline-flex; overflow: hidden; margin: -.2em 0 -.14em; }
.roll-w { display: block; }
/* while a letter moves, its window is cut to the capitals' box (chrome.js .is-rolling; cap line = the .2em padding,
   baseline .28em above the box's foot at line-height .92): the leaving letter disappears at the row's cap line and
   its twin rises from its baseline, nothing spills into the gaps between the rows */
.roll-w.is-rolling { clip-path: inset(.2em 0 .28em); }
.roll-ch, .roll-sp { display: block; padding: .2em 0 .14em; }
.roll-sp { white-space: pre; }
.roll-ch { position: relative; transition: color .2s ease; }
.roll-ch::after {
  content: attr(data-ch); position: absolute; left: 0; top: 100%; padding: inherit; color: var(--apex-deep);
}
/* the current section is already green, so its letters roll to ink: the roll always reveals the other colour */
.menu-list a[aria-current] .roll-ch::after { color: var(--ink); }
/* touch: no hover to roll on, so the press lights the row on pointer-down (§1) and lets go with the finger */
.menu-list a.is-press { background-color: var(--c-hover); }
.menu-list a.is-press .roll-ch { color: var(--apex-deep); transition: none; }
.menu-list a[aria-current].is-press .roll-ch { color: var(--ink); }
/* the section number (chrome.js copies it from the page order), decorative: hidden from assistive tech */
.menu-list a::after {
  content: attr(data-n); content: attr(data-n) / "";
  font-family: var(--mono); font-size: var(--t-footnote, .76rem); font-weight: 500; font-stretch: 100%; letter-spacing: 0;
  color: var(--mute); font-variant-numeric: tabular-nums; text-transform: none;
}
.menu-list a:focus-visible { outline-offset: -2px; border-radius: 14px; }
.menu-list a[aria-current], .menu-list a[aria-current]::after { color: var(--apex-deep); }
.menu-side { display: grid; justify-items: start; gap: 14px; margin-top: 12px; padding: 18px .45em 6px; border-top: 1px solid var(--line); }
.menu-side p {
  margin: 0; max-width: 34ch; color: var(--ink-2);
  font-family: var(--brand, 'Archivo', ui-sans-serif, sans-serif); font-stretch: 100%; font-size: var(--t-subhead, .88rem);
  line-height: var(--lh-subhead, 1.4); letter-spacing: var(--tr-subhead, -.004em);
}
.menu-side .link-arrow {
  font-family: var(--brand, 'Archivo', ui-sans-serif, sans-serif); font-stretch: 100%; font-size: var(--t-callout, .94rem);
  letter-spacing: var(--tr-callout, -.006em); min-height: 44px; padding-bottom: 0;
}
.menu-side .socials { gap: 6px; }
.menu-side .socials svg { fill: currentColor; }   /* four of the icons carry no fill of their own: black on the dark material otherwise */

/* ── desktop: a popover that materializes out of the dock (scale + blur + lift + opacity on one spring) ── */
@media (min-width: 861px) {
  .menu {
    top: calc(clamp(12px, 1.8vw, 20px) + 48px + 10px); right: var(--edge);
    width: min(24rem, calc(100vw - 2 * var(--edge)));
    max-height: calc(100svh - clamp(12px, 1.8vw, 20px) - 58px - var(--edge));
    padding: 10px 10px 14px; border-radius: 24px;
    transform-origin: calc(100% - 44px) -34px;   /* the MENU button: it opens out of, and closes back into, the dock */
    transform: translate3d(0, -8px, 0) scale(.92);
  }
}

/* ── side index (desktop): section number, name and reading progress ── */
.index {
  position: fixed; z-index: 30; right: calc(var(--edge) + 4px); top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 14px; pointer-events: none;
  transition: opacity .2s ease;
}
/* a ticker or the Palmarés track runs through its lane, or a panel edge cuts through it: it steps aside until it
   sits on one clear ground again (chrome.js), the same .2 s as its colour */
.index.is-away { opacity: 0; }
.index-text {
  writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; text-transform: uppercase; color: var(--ink-2);
  font-family: var(--brand, 'Archivo', ui-sans-serif, sans-serif); font-size: max(11px, var(--t-label, .7rem));
  font-weight: 560; font-stretch: 125%; letter-spacing: .22em; transition: color .2s ease;
}
.index-text b { font-family: var(--mono); font-weight: 500; letter-spacing: .08em; color: var(--ink); transition: color .2s ease; }
.index-num[hidden] { display: none; }   /* the intro: the label alone ("Início" / "Home"), no number */
/* over a dark ground the label takes the full ink, with a soft shadow that keeps it legible over the intro's film */
.index.on-dark .index-text { color: var(--ink); text-shadow: 0 0 1px rgb(0 0 0 / .35), 0 0 12px rgb(0 0 0 / .55); }
.index-rule { position: relative; width: 1px; height: 96px; background-color: var(--line-2); overflow: hidden; transition: background-color .2s ease; }
.index-rule i { position: absolute; left: 0; top: 0; width: 1px; height: 100%; background: var(--apex); transform-origin: top; transform: scaleY(var(--progress, 0)); }

/* ── scroll edges instead of hard lines: content softens where it runs under the floating chrome ── */
/* The fade lives in the mask and the colour in background-color, so over a dark ground the veil's colour cross-fades
   with the chrome (.veil-t-dark / .veil-b-dark from chrome.js) instead of switching gradients. Pearl, not white. */
/* top: past the intro, a blurred fade under the brand and the dock */
body::after {
  content: ''; position: fixed; z-index: 39; left: 0; right: 0; top: 0; height: calc(clamp(80px, 6.6vw, 92px) + env(safe-area-inset-top, 0px));
  background-color: rgba(236, 239, 245, .92);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  -webkit-mask-image: linear-gradient(to bottom, #000, rgba(0, 0, 0, .8) 50%, rgba(0, 0, 0, .63) 60%, rgba(0, 0, 0, .2) 80%, transparent);
  mask-image: linear-gradient(to bottom, #000, rgba(0, 0, 0, .8) 50%, rgba(0, 0, 0, .63) 60%, rgba(0, 0, 0, .2) 80%, transparent);
  pointer-events: none; opacity: 0; transition: opacity .4s ease, background-color .2s ease;
}
.veil-t-dark body::after { background-color: rgba(9, 17, 40, .9); }
.past-intro body::after { opacity: 1; }
.menu-open body::after { opacity: 0; }
/* bottom (phones): only behind the capsule, and only while content actually runs under it */
.edge-b { display: none; }

@media (pointer: coarse) {
  .brand { padding: 10px 0; margin-top: -10px; line-height: 0; }
  .dock { height: 52px; }                       /* touch on a wide screen: 44 px targets in the dock too */
  .lang, .menu-btn { height: 44px; }
}

/* ── phone: a floating capsule at the bottom (thumb reach) and a sheet that rises out of it ── */
@media (max-width: 860px) {
  .index { display: none; }

  .dock {
    top: auto; left: 0; right: 0; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); margin: 0 auto;
    width: min(calc(100% - 24px), 24rem); height: 56px; padding: 6px 6px 6px 18px; gap: 6px;
    touch-action: none;          /* the capsule is a handle: a pull up opens the sheet, 1:1 */
    -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
  }
  .where { display: grid; flex: 1; min-width: 0; height: 44px; align-items: center; cursor: pointer; transition: scale var(--press-t, 100ms) ease-out; }
  .where:active { scale: var(--press, .97); }   /* §1: the label toggles the sheet, so it answers on pointer-down too */
  .where-t {
    grid-area: 1 / 1; display: block; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
    opacity: 0; transition: opacity .2s ease;
  }
  .where-t.is-on { opacity: 1; }
  .where-t b { margin-right: .7em; font-family: var(--mono); font-size: var(--t-footnote, .76rem); font-weight: 500; letter-spacing: 0; color: var(--mute); transition: color .2s ease; }
  .where-t b:empty { display: none; }   /* the intro: "Início" / "Home" alone */
  .where-t .t-label { color: var(--ink); letter-spacing: .1em; transition: color .2s ease; }
  .lang { height: 44px; }
  .lang button { padding: 0 8px; }
  .menu-btn { width: 44px; height: 44px; padding: 0; }
  .menu-btn .t-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

  .menu {
    left: 0; right: 0; bottom: 0;
    max-height: calc(100svh - 64px - env(safe-area-inset-top, 0px));
    padding: 0 calc(var(--edge) - 6px) calc(var(--chrome-inset-b) + 6px);
    border-radius: 24px 24px 0 0; opacity: 1;
    /* the last shadow continues the material below the sheet, so a rubber-band lift never opens a gap at the bottom */
    box-shadow: var(--mat-edge, inset 0 1px 0 rgba(255, 255, 255, .7)), 0 240px 0 0 var(--mat-thick, rgba(243, 245, 250, .86)),
      var(--shadow-l, 0 30px 60px -28px rgba(23, 32, 56, .38));
    transform: translate3d(0, 100%, 0);
    touch-action: pan-y;
    scroll-padding: 34px 0 var(--chrome-inset-b);   /* a focused link scrolls clear of the grabber and the capsule */
  }
  /* drag-to-dismiss: the grabber always; the body too when it fits, or (where supported) when scrolled to its top */
  .menu.at-top { touch-action: pan-y; touch-action: pan-down; }
  .menu.is-fit, .menu-grab { touch-action: none; }
  .menu.is-dragging { -webkit-user-select: none; user-select: none; }
  .menu-grab {
    display: block; position: sticky; top: 0; z-index: 1; height: 34px; margin: 0 calc(10px - var(--edge));   /* 10px: at 320px wide the old 6px pushed the page 3px sideways */
    background: linear-gradient(var(--mat-thick, rgba(243, 245, 250, .86)) 50%, transparent);
  }
  .menu-grab::before {
    content: ''; position: absolute; left: 50%; top: 10px; width: 38px; height: 5px; margin-left: -19px;
    border-radius: 3px; background: var(--c-grabber);
  }
  .menu-list a { padding: .26em .3em .18em; font-size: clamp(1.75rem, 1.35rem + 1.8vw, 2.1rem); }
  .menu-side { padding-top: 16px; }

  .edge-b {
    display: block; position: fixed; z-index: 39; left: 0; right: 0; bottom: 0; height: calc(104px + env(safe-area-inset-bottom, 0px));
    background-color: rgba(236, 239, 245, .8);
    -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
    -webkit-mask-image: linear-gradient(to top, #000, rgba(0, 0, 0, .6) 40%, rgba(0, 0, 0, .15) 70%, transparent);
    mask-image: linear-gradient(to top, #000, rgba(0, 0, 0, .6) 40%, rgba(0, 0, 0, .15) 70%, transparent);
    pointer-events: none; opacity: 0; transition: opacity .3s ease, background-color .2s ease;
  }
  .veil-b-dark .edge-b { background-color: rgba(9, 17, 40, .82); }
  .edge-b.is-on { opacity: 1; }
  .menu-open .edge-b { opacity: 0; }
  /* the sheet's own scroll edge: where its list runs under the capsule, the list softens behind the capsule's glass
     (full width, from the screen's bottom to just above the capsule); chrome.js writes --du */
  .dock::after {
    content: ''; position: absolute; z-index: -2; pointer-events: none;
    left: calc(50% - 50vw); right: calc(50% - 50vw); bottom: calc(-12px - env(safe-area-inset-bottom, 0px));
    height: calc(100% + 36px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(to top, var(--mat-thick, rgba(243, 245, 250, .86)) 45%, transparent);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    -webkit-mask-image: linear-gradient(to top, #000 55%, transparent); mask-image: linear-gradient(to top, #000 55%, transparent);
    opacity: var(--du);
  }

  /* the top veil: on a phone the brand sits right on the content's way up, so the veil is solid behind the mark and
     fades out below it (still an edge, not a bar) */
  body::after {
    height: calc(76px + env(safe-area-inset-top, 0px));
    background-color: rgba(236, 239, 245, .96);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 62%, rgba(0, 0, 0, .45) 82%, transparent);
    mask-image: linear-gradient(to bottom, #000 0, #000 62%, rgba(0, 0, 0, .45) 82%, transparent);
  }
  .veil-t-dark body::after { background-color: rgba(9, 17, 40, .95); }
}
/* the narrowest phones (320): the capsule drops the number and tightens the label, so every name fits whole; the six
   social circles in the sheet read as a tidy 3 + 3, as in the contact card, never 5 + 1 */
@media (max-width: 359px) {
  .dock { padding-left: 14px; gap: 4px; }
  .where-t b { display: none; }
  .where-t .t-label { letter-spacing: .06em; font-stretch: 108%; }
  .menu-side .socials { display: grid; grid-template-columns: repeat(3, 44px); gap: 12px; }
}

/* ── accessibility: reduced motion, reduced transparency, more contrast (§14) ── */
@media (prefers-reduced-motion: reduce) {
  /* the springs jump; the surfaces cross-fade instead of moving. While a finger drags the sheet, its opacity
     follows the finger directly (chrome.js), so feedback stays continuous without any motion */
  .menu, .scrim { transition: opacity .2s ease, visibility 0s linear .2s; }
  .menu.is-live, .scrim { transition: opacity .2s ease, visibility 0s; }
  .menu { transform: none !important; filter: none !important; }
  .menu.is-dragging, .scrim.is-dragging { transition: none; }
  .menu-list li, .menu-list li > a, .menu-side { opacity: 1 !important; transform: none !important; }
  /* no roll: under the mouse or the keyboard focus the letters change colour in place */
  .roll-ch { transform: none !important; }
  .menu-list a.is-hot .roll-ch { color: var(--apex-deep); }
  .menu-list a[aria-current].is-hot .roll-ch { color: var(--ink); }
  /* the light ↔ dark cross-fade is a colour change, not motion: it stays */
  .dock::before { transition: opacity .2s ease, background-color .2s ease, box-shadow .2s ease; }
  .dock::after { transition: opacity .2s ease; }
  .where-t { transition-duration: .12s; }
}
/* materials turn solid and lose their blur through the tokens (site.css); the dark material and the hand-made
   veils follow here */
@media (prefers-reduced-transparency: reduce) {
  .on-dark { --mat-regular: #151e36; --mat-thick: #121a2f; }
  .edge-b {
    background-color: var(--pearl, #eceff5);
    -webkit-mask-image: linear-gradient(to top, #000 35%, transparent); mask-image: linear-gradient(to top, #000 35%, transparent);
  }
  .veil-b-dark .edge-b { background-color: #091128; }
  .dock::after { -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  .on-dark { --mat-regular: #0e162a; --mat-thick: #0c1428; --mute: #bcc3d3; --ink-2: #dfe3ec; --line-2: rgba(237, 241, 249, .62); }
  .on-dark .lang button:not([aria-pressed="true"]) { color: var(--mute); }
  .dock::before, .menu { outline: 1px solid var(--line-2); outline-offset: -1px; }
  .lang { background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); }
  .lang-thumb { box-shadow: inset 0 0 0 1.5px var(--ink); }
  .scrim { background: rgba(16, 19, 28, .34); }
  .menu-side { border-top-color: var(--line-2); }
}