/* main.css — the Sea Level design kit (redesign 2026-09).
   One kit for every page: tokens, type, chrome (menu + footer), and the shared components.
   Sizes run fluid between the phone design (390px) and the desktop design (1440px);
   every clamp() below is phone value → desktop value along that range.
   Colors: Sea (#62CFE0) is interaction only (links, hover, focus, selected); Amber
   (#F2A65A) marks labels and the main action and never means hover. An Amber label NAMES
   something (a section, a group, an item's category); a Mist label DESCRIBES (a field name,
   a column head, a count, a date, or a second label under an Amber one). */

:root {
  color-scheme: dark;
  --abyss: #061019;   /* page */
  --deep: #0B1B28;    /* cards, panels */
  --tide: #12293A;    /* insets inside cards */
  --line: #1E3242;    /* card edges */
  --foam: #EEF4F6;    /* text */
  --body: #D6E1E7;    /* long text on dark */
  --mist: #A9BCC8;    /* captions, dates, labels */
  --amber: #F2A65A;
  --sea: #62CFE0;
  --paper: #F4EFE6;
  /* signal colors: one meaning each, everywhere */
  --seaglass: #7ACC9E; --coral: #E17F6B; --dusk: #CAB3F6; --harbor: #5E97D0;
  --hair: rgba(238, 244, 246, 0.08);
  --hair-2: rgba(238, 244, 246, 0.18);
  --hair-3: rgba(238, 244, 246, 0.3);

  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Instrument Sans', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;

  --gutter: clamp(20px, 3.66px + 4.190vw, 64px);
  --nav-h: clamp(56px, 51.54px + 1.143vw, 68px);
  --max: 1600px;
  --eyebrow: clamp(11px, 10.26px + 0.190vw, 13px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 16px); }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--abyss); color: var(--foam);
  font-family: var(--serif); font-weight: 350; font-size: 18px; line-height: 1.6;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}
main { flex: 1 0 auto; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4, p, figure, ul, ol { margin: 0; }
ul[role="list"], .plain { list-style: none; padding: 0; }
a { color: inherit; text-decoration: none; transition: color .15s, border-color .15s, background-color .15s, box-shadow .15s; }
a:hover { color: var(--sea); }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible {
  outline: 2px solid var(--sea); outline-offset: 3px; border-radius: 4px;
}
button { font: inherit; color: inherit; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}

.skip-link {
  position: absolute; left: 16px; top: -64px; z-index: 100;
  padding: 10px 16px; border-radius: 999px; background: var(--foam); color: var(--abyss);
  font: 600 14px/1 var(--sans);
}
.skip-link:focus { top: 12px; color: var(--abyss); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

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

/* ---------- type ---------- */

.eyebrow {
  font: 600 var(--eyebrow)/1.2 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--amber);
}
.lead { font-size: clamp(21px, 18.40px + 0.667vw, 28px); font-weight: 300; line-height: 1.4; color: var(--body); }
.i-arrow { width: 12px; height: 12px; flex-shrink: 0; stroke: currentColor; stroke-width: 1.5; fill: none; }

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

.site-head { position: sticky; top: 0; z-index: 50; }
.nav {
  height: var(--nav-h); padding-inline: var(--gutter);
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  background: rgba(6, 16, 25, .74); border-bottom: 1px solid rgba(238, 244, 246, .1);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  transition: background-color .2s, border-color .2s;
}
/* over a hero: transparent until the page scrolls */
.site-head.over { position: fixed; left: 0; right: 0; }
.site-head.over:not(.scrolled) .nav { background: transparent; border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.wordmark {
  display: flex; align-items: center; gap: clamp(8px, 7.26px + .19vw, 10px);
  font: 600 clamp(12px, 11.63px + .095vw, 13px)/1 var(--sans);
  letter-spacing: clamp(.16em, .145em + .0038vw, .2em); text-transform: uppercase; white-space: nowrap;
  padding-block: 12px; margin-block: -12px; /* a finger-sized tap area, no change to the layout */
}
.wordmark::before { content: ""; width: clamp(6px, 5.63px + .095vw, 7px); aspect-ratio: 1; border-radius: 50%; background: var(--amber); flex-shrink: 0; }
.nav-links { list-style: none; padding: 0; display: flex; gap: clamp(16px, 8.57px + 1.905vw, 36px); font: 500 clamp(14px, 13.63px + .095vw, 15px)/1 var(--sans); }
.nav-links a { position: relative; display: inline-block; padding-block: 8px; }
/* the page you are on is white and underlined; every other item is Mist, on every page */
.nav-links a:not([aria-current]) { color: var(--mist); }
.nav-links a:not([aria-current]):hover { color: var(--sea); }
/* the house (the way home): exactly one line of text tall, so its underline lines up with the words' */
.nav-links .nav-home { display: inline-flex; align-items: center; }
.nav-home svg { display: block; width: 18px; height: 18px; margin-block: calc(.5em - 9px); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.nav-links a[aria-current]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; border-radius: 2px; background: var(--sea);
}
/* phones (under 414) tighten the menu so the wordmark, the house and both links fit on one row;
   the smallest (under 360) a little more */
@media (max-width: 413px) {
  .nav { gap: 8px; }
  .wordmark { gap: 6px; font-size: 10.5px; letter-spacing: .08em; }
  .nav-links { gap: 12px; font-size: 13px; }
  .nav-home svg { width: 16px; height: 16px; margin-block: calc(.5em - 8px); }
}
@media (max-width: 359px) {
  .wordmark { font-size: 10px; letter-spacing: .04em; }
  .nav-links { gap: 8px; }
}
@media (min-width: 1920px) {
  .nav { padding-inline: calc((100vw - var(--max)) / 2); }
}

/* ---------- buttons, pills, tags ---------- */

/* every button is ONE size (Cengiz, 2026-10-05): Amber (.btn) for the main action, the outline
   (.btn-2) for everything secondary. Only small pills (.pill-sm and its kin) are smaller. */
.btn, .btn-2 {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: clamp(48px, 46.51px + .381vw, 52px); padding: 0 24px; border-radius: 999px;
  font: 600 clamp(15px, 14.63px + .095vw, 16px)/1 var(--sans); white-space: nowrap; cursor: pointer;
  background: var(--amber); color: var(--abyss); border: 1px solid transparent;
}
.btn:hover { color: var(--abyss); background: var(--sea); }
.btn-2 { background: transparent; color: var(--foam); border-color: var(--hair-3); font-weight: 500; }
.btn-2:hover { background: transparent; color: var(--sea); border-color: var(--sea); }
.btn:disabled, .btn-2:disabled { opacity: .35; cursor: default; pointer-events: none; }
/* the way into a category's bookmarks: Dusk, with a bookmark mark, so it never reads as notes */
.btn-bm { border-color: var(--dusk); color: var(--dusk); }
.btn-bm .pill-n { color: inherit; }
.i-bm { width: 13px; height: 13px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linejoin: round; }
.tag {
  display: inline-block; padding: 2px 8px; border-radius: 999px; border: 1px solid rgba(238, 244, 246, .2);
  font: 400 11px/1.5 var(--sans); letter-spacing: .08em; color: var(--mist); white-space: nowrap;
}
/* a store-bought dish: a soft filled chip (Tide), the same family as the perks' chips */
.tag.sb { padding: 3px 10px; border: 0; background: var(--tide); font: 500 11.5px/1.3 var(--sans); letter-spacing: .02em; }
/* a dish with a recipe: the same chip in Sea, the link color, since the tile opens the ingredients */
.tag.rc { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border: 0; background: color-mix(in srgb, var(--sea) 14%, transparent); font: 500 11.5px/1.3 var(--sans); letter-spacing: .02em; color: var(--sea); }
.i-rc { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- page header (section pages) ---------- */

.page-head {
  padding-top: clamp(56px, 35.20px + 5.333vw, 112px); padding-bottom: clamp(36px, 22.63px + 3.429vw, 72px);
  display: flex; flex-direction: column; gap: clamp(16px, 13.77px + .571vw, 22px);
}
.page-head .eyebrow { font-size: 13px; }
.page-head h1 { font-size: clamp(64px, 43.20px + 5.333vw, 120px); font-weight: 300; letter-spacing: -.04em; line-height: .95; }
.page-head .lead { margin-top: clamp(4px, 2.51px + .381vw, 8px); max-width: 760px; }
/* list pages (The Notebook, The Comics, The Table, Recommendations): a tighter header */
.list-head { padding-bottom: clamp(32px, 23.09px + 2.286vw, 56px); }
.list-head h1 { font-size: clamp(56px, 32.23px + 6.095vw, 120px); }
.list-head .lead { font-size: clamp(19px, 17.14px + .476vw, 24px); line-height: 1.5; max-width: none; }

/* ---------- footer ---------- */

.site-foot {
  background: #040B11; border-top: 1px solid var(--hair);
  padding: clamp(40px, 28.11px + 3.048vw, 72px) max(24px, var(--gutter)) clamp(28px, 23.54px + 1.143vw, 40px);
  display: flex; flex-direction: column; gap: clamp(32px, 20.11px + 3.048vw, 64px);
  font-family: var(--sans);
}
.foot-groups { display: flex; flex-direction: column; gap: 32px; }
.foot-h { font: 600 clamp(11px, 10.63px + .095vw, 12px)/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--amber); margin-bottom: 18px; }
.foot-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.foot-stack { display: flex; flex-direction: column; gap: 22px; }
.foot-sub { font: 400 10px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--mist); margin-bottom: 10px; }
.foot-sub a { color: inherit; transition: color .15s; }
.foot-sub a:hover { color: var(--sea); }
.foot-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 9px; font-size: 15px; line-height: 1.35; }
.foot-copy { padding-top: 18px; border-top: 1px solid var(--hair); text-align: center; font-size: 13px; color: var(--mist); }
@media (min-width: 760px) {
  .foot-groups { flex-direction: row; justify-content: center; align-items: flex-start; gap: 112px; }
  .foot-h { margin-bottom: 22px; }
  .foot-cols { display: flex; gap: 64px; }
  .foot-more .foot-cols { flex-direction: column; gap: 26px; }
  .foot-stack { gap: 26px; }
  .foot-sub { font-size: 11px; }
  .foot-copy { padding-top: 24px; font-size: 14px; }
}

/* ---------- doors (Contact) ---------- */

.doors { list-style: none; padding: 0 0 clamp(72px, 51.20px + 5.333vw, 128px); display: flex; flex-direction: column; gap: clamp(16px, 14.51px + .381vw, 20px); }
.door {
  position: relative; display: flex; flex-direction: column; gap: 20px;
  padding: 28px 24px; border-radius: 18px; background: var(--deep); border: 1px solid var(--line);
  transition: border-color .15s, box-shadow .15s;
}
.door-link { position: absolute; inset: 0; border-radius: 18px; }
.door-no { font: 600 13px/1 var(--sans); letter-spacing: .22em; color: var(--amber); }
.door-body { display: flex; flex-direction: column; gap: 18px; }
.door-title { display: flex; flex-direction: column; gap: 10px; }
.door h2 { font-size: clamp(38px, 35.03px + .762vw, 46px); font-weight: 300; letter-spacing: -.02em; line-height: 1.02; transition: color .15s; }
.door-text { font-size: clamp(18px, 16.89px + .286vw, 21px); line-height: 1.5; color: var(--body); }
.door-act { display: flex; padding-top: 8px; }
.door:hover, .door:has(:focus-visible) { border-color: var(--sea); box-shadow: inset 0 0 0 1px var(--sea); }
.door:hover h2, .door:has(:focus-visible) h2 { color: var(--sea); }
.door:hover .btn { background: var(--sea); }
.door:hover .btn-2 { color: var(--sea); border-color: var(--sea); }
.door .door-link:focus-visible { outline-offset: -2px; border-radius: 18px; }
.say {
  display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
  padding: 16px 18px; border-radius: 12px; background: var(--tide); max-width: 720px;
}
.say p { font-size: clamp(16px, 15.63px + .095vw, 17px); line-height: 1.5; color: var(--body); }
.say b { font-weight: 600; color: var(--foam); white-space: nowrap; }
/* the line breaks between its phrases (` | ` in contact.md), never inside one while it fits, and a
   phrase that must wrap is balanced, so no word is left alone on its last line */
.say .ph { display: inline-block; text-wrap: balance; }
.say a {
  position: relative; z-index: 1; flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--hair-3);
  font: 500 13px/1 var(--sans);
}
.say a svg { fill: currentColor; }
.say a:hover { border-color: var(--sea); }
/* from 760px the meeting doors are cards (button at the foot), and the quiet door (the fallback)
   is a row: number, words, button. From 1000px the cards pair up and the row runs below them. */
@media (min-width: 760px) {
  .door { padding: 36px 40px; }
  .door:not(.quiet) { gap: 22px; }
  .door:not(.quiet) .door-body { flex: 1; }
  .door.quiet { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; column-gap: 32px; }
  .door.quiet .door-no { align-self: start; padding-top: 16px; }
  .door.quiet .door-act { padding-top: 0; justify-self: end; }
  .door-title { gap: 8px; }
  .door h2 { line-height: 1.05; }
  .door-act :is(.btn, .btn-2) { min-width: 220px; }
}
@media (min-width: 1000px) {
  .doors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .door.quiet { grid-column: 1 / -1; }
}

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

.lost { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
.lost-art { position: absolute; left: 0; right: 0; top: 0; height: 66svh; }
.lost-art img { width: 100%; height: 100%; object-fit: cover; object-position: 66% center; }
.lost-art::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6,16,25,.72) 0%, rgba(6,16,25,.1) 22%, rgba(6,16,25,.15) 50%, rgba(6,16,25,.9) 86%, var(--abyss) 100%);
}
.lost-body {
  position: relative; padding: 0 max(24px, var(--gutter)) clamp(56px, 44.11px + 3.048vw, 88px);
  display: flex; flex-direction: column; gap: clamp(16px, 13.77px + .571vw, 22px);
}
.lost h1 { font-size: clamp(56px, 29.26px + 6.857vw, 128px); font-weight: 300; letter-spacing: -.035em; line-height: .95; }
.lost-text { max-width: 620px; font-size: clamp(19px, 17.14px + .476vw, 24px); font-weight: 300; line-height: 1.5; color: var(--body); }
.lost-act { margin-top: clamp(8px, 7.26px + .19vw, 10px); }
.lost-copy { margin-top: clamp(20px, 17.03px + .762vw, 28px); font: 12px/1 var(--sans); color: var(--mist); }
@media (min-width: 760px) {
  .lost-art { height: auto; bottom: 0; }
  .lost-art img { object-position: center 45%; }
  .lost-art::after { background: linear-gradient(180deg, rgba(6,16,25,.72) 0%, rgba(6,16,25,.1) 22%, rgba(6,16,25,.15) 40%, rgba(6,16,25,.9) 72%, var(--abyss) 100%); }
}

/* =====================================================================
   HOME
   Phone layout first; the wide layout starts at 900px.
   ===================================================================== */

.wide-only { display: none !important; }
@media (min-width: 900px) {
  .wide-only { display: revert !important; }
  .narrow-only { display: none !important; }
}

.sec {
  padding: clamp(48px, 24.23px + 6.095vw, 112px) max(24px, var(--gutter));
  max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto;
}
.character, .notes-sec, .above-below { border-top: 1px solid var(--hair); }
@media (min-width: 900px) { .above-below { border-top: 0; } }
.sec h2, .sec-title h2 { font-size: clamp(38px, 28.34px + 2.476vw, 64px); font-weight: 300; letter-spacing: -.02em; line-height: 1.23; }
.compass .sec-title h2 { line-height: 1.02; }
.character .sec-title, .notes-sec .sec-title { gap: 18px; }
@media (min-width: 900px) { .sec h2, .sec-title h2 { line-height: 1.02; } .character .sec-title, .notes-sec .sec-title { gap: 14px; } }
.sec-title { display: flex; flex-direction: column; gap: clamp(10px, 8.51px + .381vw, 14px); }
.sec-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.sec-note { font-size: 18px; font-style: italic; color: var(--mist); }

/* ---------- hero ---------- */

.hero { position: relative; }
.hero-art { position: relative; aspect-ratio: 3 / 2; overflow: hidden; }
.hero-art img { width: 100%; height: 100%; object-fit: cover; }
.hero-art::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6,16,25,.75) 0%, rgba(6,16,25,0) 35%, rgba(6,16,25,0) 60%, var(--abyss) 100%);
}
.hero-body { padding: 4px 24px 40px; display: flex; flex-direction: column; gap: 12px; }
.hero-body .eyebrow { letter-spacing: .24em; }
.hero h1 { font-size: clamp(60px, 25.83px + 8.762vw, 152px); font-weight: 300; line-height: .95; letter-spacing: -.03em; }
.hero-line { font-size: clamp(20px, 16.29px + .952vw, 30px); line-height: 1.25; font-style: italic; font-weight: 300; color: #C9D6DE; }
@media (min-width: 900px) {
  .hero { height: min(66.67vw, 1280px); min-height: 560px; display: flex; flex-direction: column; justify-content: flex-end; }
  .hero-art { position: absolute; inset: 0; aspect-ratio: auto; }
  .hero-art::after { background: linear-gradient(180deg, rgba(6,16,25,.70) 0%, rgba(6,16,25,0) 18%, rgba(6,16,25,0) 42%, rgba(6,16,25,.88) 78%, var(--abyss) 100%); }
  .hero-body { position: relative; width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding: 0 var(--gutter) 96px; gap: 18px; }
  .hero h1 { line-height: .92; }
  .hero-line { margin-top: 6px; }
}
@media (min-width: 1920px) {
  .hero-art img { max-width: 1920px; margin-inline: auto; }
  /* the picture stops at 1920; its edges fade into the page. Under the text, never over it */
  .hero-art::before { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(90deg, var(--abyss) calc(50% - 960px), rgba(6,16,25,0) calc(50% - 540px), rgba(6,16,25,0) calc(50% + 540px), var(--abyss) calc(50% + 960px)); }
  .hero h1 { font-size: 184px; }
  .hero-line { font-size: 36px; }
  .wordmark { font-size: 15px; }
  .nav-links { font-size: 16px; gap: 40px; }
}

/* ---------- 01 the name ---------- */

.name { display: flex; flex-direction: column; gap: 16px; border-top: 1px solid var(--hair); }
.name-text { display: flex; flex-direction: column; gap: 16px; }
.name-word { font-size: clamp(72px, 51.20px + 5.333vw, 128px) !important; font-weight: 300; line-height: .95 !important; letter-spacing: -.03em !important; }
.name-ipa { font-size: clamp(18px, 15.03px + .762vw, 26px); line-height: 1.25; font-style: italic; color: var(--mist); }
.name-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.name-ipa span { display: none; font-size: .77em; }
.name-say { font-size: clamp(17px, 15.14px + .476vw, 22px); line-height: 1.55; }
.name-say strong { font-weight: 600; }
.name-video { position: relative; display: block; margin-top: 8px; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; }
.name-video img { width: 100%; height: 100%; object-fit: cover; }
/* the Screen's badge, a size up for the larger picture */
.name-video .badge { left: clamp(12px, 9.03px + .762vw, 20px); bottom: clamp(12px, 9.03px + .762vw, 20px); height: clamp(30px, 27.77px + .571vw, 36px); padding: 0 clamp(12px, 10.51px + .381vw, 16px); gap: 8px; font-size: clamp(12px, 11.26px + .19vw, 14px); }
.name-video .badge .i-play { width: 10px; height: 10px; }
.name-video:hover .badge { background: var(--sea); color: var(--abyss); }
.name-frame { position: relative; margin-top: 8px; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; }
.name-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.name-link {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px;
  font: 500 clamp(14px, 13.63px + .095vw, 15px)/1.3 var(--sans);
  padding-bottom: 4px; border-bottom: 1px solid var(--hair-3);
}
.name-link:hover { border-color: var(--sea); }
@media (min-width: 900px) {
  .name { display: grid; grid-template-columns: minmax(0, 520fr) minmax(0, 720fr); grid-template-rows: 1fr auto auto 1fr; column-gap: clamp(40px, 5vw, 72px); row-gap: 0; align-items: center; border-top: 0; }
  .name-text { grid-column: 1; grid-row: 2; gap: 20px; }
  .name-head { flex-direction: column; align-items: flex-start; gap: 20px; }
  .name-ipa span { display: inline; }
  .name-say { margin-top: 8px; line-height: 1.5; }
  .name-video, .name-frame { grid-column: 2; grid-row: 1 / -1; margin: 0; box-shadow: 0 30px 80px rgba(0,0,0,.45); }
  .name-link { grid-column: 1; grid-row: 3; margin-top: 32px; justify-self: start; }
}

/* ---------- 02 the crossings ---------- */

.cross-art { position: relative; aspect-ratio: 390 / 197; overflow: hidden; }
.cross-art img { width: 100%; height: 100%; object-fit: cover; }
.cross-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--abyss) 0%, rgba(6,16,25,0) 30%, rgba(6,16,25,0) 70%, var(--abyss) 100%); }
.cross-body { padding: 8px 24px 48px; display: flex; flex-direction: column; gap: 20px; }
.cross-head { display: flex; flex-direction: column; gap: 6px; }
.cross-head .sec-title { gap: 12px; }
.cross-head h2 { font-size: clamp(30px, 17.37px + 3.238vw, 64px); font-weight: 300; letter-spacing: -.02em; line-height: 1.1; }
.cross-note { font-size: clamp(14px, 13.26px + .19vw, 16px); font-style: italic; color: var(--mist); line-height: 1.28; }
.cross-line { list-style: none; padding: 0; display: flex; flex-direction: column; }
.stop { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 0 0 22px 29px; }
.stop::before { content: ""; position: absolute; left: 0; top: 4px; width: 11px; height: 11px; border-radius: 50%; border: 1px solid var(--amber); background: var(--abyss); }
.stop::after { content: ""; position: absolute; left: 5px; top: 18px; bottom: -4px; width: 1px; background: rgba(238,244,246,.3); }
.stop.now { padding-bottom: 0; }
.stop.now::before { border: 0; background: var(--sea); box-shadow: 0 0 0 6px rgba(98,207,224,.18); }
.stop.now::after { display: none; }
.stop-years { font: 400 clamp(11px, 10.26px + .19vw, 13px)/1.3 var(--sans); letter-spacing: .16em; color: var(--amber); }
.stop.now .stop-years { color: var(--sea); }
.stop-city { font-size: clamp(28px, 22.06px + 1.524vw, 44px); font-weight: 350; letter-spacing: -.01em; line-height: 1.2; }
.stop-line { font-size: clamp(14px, 12.89px + .286vw, 17px); font-style: italic; color: #C9D6DE; line-height: 1.4; }
@media (min-width: 900px) {
  .cross { position: relative; height: min(50.42vw, 968px); min-height: 520px; }
  .cross-art { position: absolute; inset: 0; aspect-ratio: auto; }
  .cross-art::after { background: linear-gradient(180deg, var(--abyss) 0%, rgba(6,16,25,.35) 22%, rgba(6,16,25,0) 40%, rgba(6,16,25,0) 55%, rgba(6,16,25,.85) 84%, var(--abyss) 100%); }
  .cross-body { position: relative; height: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding: 56px var(--gutter); justify-content: space-between; }
  .cross-head { flex-direction: row; justify-content: space-between; align-items: flex-start; gap: 32px; }
  .cross-head .sec-title { gap: 14px; }
  .cross-head h2 { line-height: 1; }
  .cross-note { margin-top: 8px; text-align: right; color: var(--foam); white-space: nowrap; }
  .cross-line { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding-top: 34px; position: relative; }
  .cross-line::before { content: ""; position: absolute; left: 0; right: 0; top: 5px; height: 1px; background: rgba(238,244,246,.35); }
  .stop { padding: 0; gap: 6px; position: static; }
  .stop { position: relative; }
  .stop::before { top: -34px; }
  .stop::after { display: none; }
  .stop.now { padding: 0; }
  .stop-line { line-height: 1.25; }
}
/* wide: each stop takes the room its words need (the dots follow), so the longest line stays on
   one row; below 1200px the equal thirds wrap better */
@media (min-width: 1200px) { .cross-line { grid-template-columns: repeat(3, auto); } }

/* ---------- 03 the compass: the boarding pass ---------- */

.compass { display: flex; flex-direction: column; gap: 22px; padding-top: 8px; padding-bottom: 56px; }
.compass .sec-title { gap: 10px; }
.pass { --ink: var(--abyss); --pl: #5B6B76; --acc: #9A5A12; position: relative; border-radius: 18px; background: var(--paper); color: var(--ink); display: flex; flex-direction: column; }
.pass-main { padding: 24px 22px; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 18px; min-height: 482px; }
.pass .pl { font: 600 10px/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--pl); }
.pass .pl-accent { color: var(--acc); }
.pass-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; font: 600 10px/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--pl); }
.pass-valid { display: flex; align-items: center; gap: 8px; color: var(--acc); }
.pass-valid > span { display: inline-flex; align-items: center; gap: 5px; }
.pass-valid svg { width: 14px; height: 14px; }
.pass-front { display: flex; flex-direction: column; gap: 18px; }
.pass-route { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.pr-end { display: flex; flex-direction: column; gap: 2px; }
.pr-end.to { text-align: right; }
.pr-code { font-size: clamp(44px, 33.60px + 2.667vw, 72px); font-weight: 400; line-height: .95; letter-spacing: -.02em; }
.pr-city { font-size: clamp(13px, 11.51px + .381vw, 17px); line-height: 1.25; font-style: italic; color: #33434E; }
.pr-way { position: relative; height: 28px; display: flex; align-items: center; justify-content: center; }
.pr-way::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 2px dashed rgba(6,16,25,.25); }
.pr-way > span { position: relative; height: 100%; padding: 0 6px; background: var(--paper); display: flex; align-items: center; gap: 10px; }
.pass-sun { width: 22px; height: 22px; } .pass-moon { width: 19px; height: 19px; }
.pass-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; padding-top: 16px; border-top: 1px solid rgba(6,16,25,.12); }
.pass-wants { display: flex; flex-direction: column; gap: 18px; }
.pf { display: flex; flex-direction: column; gap: 4px; }
.pass-facts .pv { font-size: clamp(20px, 17.77px + .571vw, 26px); line-height: 1.25; }
.pass-wants .pv { font-size: 16px; line-height: 1.4; }
.pass-print { display: flex; flex-direction: column; gap: 14px; }
.pass-front, .pass-print { grid-row: 2; grid-column: 1; }
.pass-print[hidden], .pass-front[hidden] { display: none; }
/* with the script, both faces share one cell so turning the pass never changes its height */
.js .pass-print[hidden], .js .pass-front[hidden] { display: flex; visibility: hidden; }
.pass-print p { font-size: 16px; line-height: 1.55; color: #1A2A35; }
.pass-tear { position: relative; height: 2px; border-top: 2px dashed rgba(6,16,25,.22); margin: 0 18px; }
.pass-tear::before, .pass-tear::after { content: ""; position: absolute; top: -15px; width: 28px; height: 28px; border-radius: 50%; background: var(--abyss); }
.pass-tear::before { left: -32px; } .pass-tear::after { right: -32px; }
.pass-stub { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 14px; }
.pass-who { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pass-who .pv { font-size: 17px; line-height: 1.25; }
.pass-marks { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pass-barcode { width: 189px; height: 44px; }
.pass-stamp { width: 78px; height: 78px; flex-shrink: 0; transform: rotate(-12deg); opacity: .88; margin: -17px 10px -17px 0; }
.pass-toggle {
  height: 46px; border-radius: 999px; border: 1.5px solid var(--ink); background: transparent; color: var(--ink);
  font: 600 15px/1 var(--sans); display: flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer;
  transition: color .15s, border-color .15s;
}
.pass-toggle svg { width: 15px; height: 15px; } .pass-toggle svg path { stroke: currentColor; }
.pass-toggle:hover { color: #136F7C; border-color: #136F7C; }
@media (min-width: 900px) {
  .compass { gap: 36px; padding-top: 96px; padding-bottom: 0; }
  .compass .sec-title { gap: 14px; }
}
/* the pass goes sideways only when the stub has room for its barcode and the main part for
   four facts across; in between it stays stacked like the phone */
@media (min-width: 1100px) {
  .pass { flex-direction: row; border-radius: 20px; box-shadow: 0 30px 80px rgba(0,0,0,.35); }
  .pass-main { flex: 1 1 auto; min-width: 0; min-height: 431px; padding: 36px 48px 40px; gap: 28px; }
  .pass .pl { font-size: 11px; }
  .pass-top { font-size: 12px; letter-spacing: .24em; }
  .pass-valid { gap: 14px; }
  .pass-front { gap: 28px; }
  .pass-route { gap: 32px; }
  .pr-end { gap: 4px; }
  .pr-way { height: 40px; }
  .pr-way > span { padding: 0 12px; gap: 18px; }
  .pass-sun { width: 30px; height: 30px; } .pass-moon { width: 26px; height: 26px; }
  .pass-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding-top: 24px; }
  .pf { gap: 6px; }
  .pass-wants { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .pass-wants .pf.wide { grid-column: span 2; }
  .pass-wants .pv { font-size: 19px; line-height: 1.25; }
  .pass-print { gap: 14px; }
  .pass-print p { font-size: 17px; max-width: calc(50% - 20px); }
  .pass-tear { width: 0; height: auto; margin: 0; border-top: 0; border-left: 2px dashed rgba(6,16,25,.22); }
  .pass-tear::before, .pass-tear::after { left: -17px; right: auto; width: 32px; height: 32px; }
  .pass-tear::before { top: -16px; } .pass-tear::after { top: auto; bottom: -16px; }
  .pass-stub { flex: 0 0 max(23.5%, 270px); padding: 36px 32px 36px 40px; gap: 22px; }
  .pass-who { display: flex; flex-direction: column; gap: 22px; }
  .pass-who .pv { font-size: 22px; }
  .pass-marks { flex: 1; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; }
  .pass-barcode { width: 189px; height: 56px; align-self: flex-start; }
  .pass-stamp { width: 106px; height: 106px; align-self: flex-end; margin: -8px 22px -16px 0; }
  .pass-toggle { margin-top: auto; height: 48px; }
}

/* ---------- 04 / 05 above and below ---------- */

.above-below { display: flex; flex-direction: column; gap: 18px; }
.ab { display: grid; grid-template-areas: "label" "art" "title" "cap"; gap: 18px; }
.ab-label { grid-area: label; }
.below .ab-label { color: var(--sea); }
.ab-art { grid-area: art; border-radius: 4px; overflow: hidden; aspect-ratio: 820 / 413; }
.ab-art img { width: 100%; height: 100%; object-fit: cover; }
.ab-title { grid-area: title; font-size: clamp(34px, 24.34px + 2.476vw, 60px) !important; }
.ab-cap { grid-area: cap; margin-top: -8px; font-size: clamp(14px, 12.51px + .381vw, 18px); line-height: 1.28; font-style: italic; color: var(--mist); }
.sea-level { display: flex; align-items: center; gap: 12px; margin: 14px 0; }
.sea-level::before, .sea-level::after { content: ""; flex: 1; height: 1px; }
.sea-level::before { background: rgba(242,166,90,.5); }
.sea-level::after { background: rgba(98,207,224,.5); }
.sea-level span { font: 600 10px/1.3 var(--sans); letter-spacing: .3em; text-transform: uppercase; padding: 6px 12px; border: 1px solid rgba(238,244,246,.2); border-radius: 999px; }
@media (min-width: 900px) {
  .above-below { gap: 64px; }
  .ab { grid-template-columns: minmax(0, 820fr) minmax(0, 428fr); grid-template-areas: "art ." "art label" "art title" "art cap" "art ."; grid-template-rows: 1fr auto auto auto 1fr; column-gap: 64px; row-gap: 16px; }
  .below { grid-template-columns: minmax(0, 428fr) minmax(0, 820fr); grid-template-areas: ". art" "label art" "title art" "cap art" ". art"; text-align: right; }
  .ab-cap { margin-top: 0; }
  .sea-level { margin: 0; gap: 20px; }
  .sea-level::before { background: linear-gradient(90deg, rgba(242,166,90,0), rgba(242,166,90,.6)); }
  .sea-level::after { background: linear-gradient(90deg, rgba(98,207,224,.6), rgba(98,207,224,0)); }
  .sea-level span { font-size: 12px; padding: 8px 16px; }
}

/* ---------- 06 character: letter cards ---------- */

.character { display: flex; flex-direction: column; gap: 18px; }
.letters-grid { display: flex; flex-direction: column; gap: 18px; }
.letters {
  display: flex; flex-direction: column; gap: 18px; padding: 22px; border-radius: 14px;
  background: var(--deep); border: 1px solid var(--line);
}
.letters:hover { color: inherit; border-color: var(--sea); }
.letters:hover .letters-top { color: var(--sea); }
.letters-top { display: flex; justify-content: space-between; align-items: center; font: 600 10px/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--amber); }
.letters-row { display: flex; justify-content: space-between; gap: 6px; align-items: flex-start; }
.lt { display: flex; flex-direction: column; gap: 10px; }
.lt-ch { font-size: clamp(48px, 30.17px + 4.571vw, 96px); font-weight: 300; line-height: .9; }
.lt-ch.hi { color: var(--amber); }
.lt-w { font: 400 10px/1.3 var(--sans); color: var(--mist); }
.letters-name { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; font-size: clamp(22px, 18.29px + .952vw, 32px); font-weight: 350; line-height: 1.25; }
.letters-code { font: 400 clamp(12px, 11.26px + .19vw, 14px)/1.25 var(--sans); letter-spacing: .12em; color: var(--mist); }
@media (min-width: 900px) {
  .character { gap: 48px; }
  .letters-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .letters { padding: 40px; gap: 28px; border-radius: 16px; }
  .letters-top { font-size: 12px; }
  .letters-top .i-arrow { width: 14px; height: 14px; }
  .letters-row { justify-content: flex-start; gap: 18px; }
  .lt-w { font-size: 12px; text-transform: uppercase; letter-spacing: .14em; }
}
@media (min-width: 1100px) { .letters-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- 07 marginalia ---------- */

.marginalia { max-width: none; background: var(--deep); display: flex; flex-direction: column; gap: 20px; padding-top: clamp(56px, 29.26px + 6.857vw, 128px); padding-bottom: clamp(56px, 29.26px + 6.857vw, 128px); }
.motto-stage { display: flex; flex-direction: column; gap: 20px; }
.motto { margin: 0; display: flex; flex-direction: column; justify-content: center; }
.motto p { font-size: clamp(30px, 20.34px + 2.476vw, 56px); font-weight: 300; font-style: italic; line-height: 1.2; letter-spacing: -.015em; transition: opacity .4s; }
.motto.swap p { opacity: 0; }
.motto-count { display: flex; align-items: center; gap: 16px; font: 400 clamp(11px, 10.26px + .19vw, 13px)/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--mist); }
.motto-bar { position: relative; width: 120px; height: 2px; background: rgba(238,244,246,.16); }
.motto-bar span { position: absolute; left: 0; top: 0; height: 2px; width: 0; background: var(--amber); }
.marginalia.ticking .motto-bar span { animation: motto-tick 15s linear infinite; }
@keyframes motto-tick { from { width: 0; } to { width: 100%; } }
@media (min-width: 900px) {
  .marginalia { align-items: center; text-align: center; gap: 40px; }
  .motto-stage { align-items: center; justify-content: center; gap: 40px; }
  .motto { max-width: 1040px; }
  .motto p { line-height: 1.15; }
}

/* ---------- 08 the notebook ---------- */

.notes-sec { display: grid; grid-template-areas: "head" "list" "btn"; gap: 18px; }
.notes-sec .sec-title { grid-area: head; }
.note-cards { grid-area: list; display: flex; flex-direction: column; }
.notes-all { grid-area: btn; justify-self: start; }
.note-card { display: flex; flex-direction: column; gap: 6px; padding: 16px 0; border-bottom: 1px solid rgba(238,244,246,.1); }
.note-card:last-child { border-bottom: 0; }
.nc-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.nc-cat { font: 600 11px/1.25 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--amber); }
.note-card time { font-size: 14px; line-height: 1.28; font-style: italic; color: var(--mist); }
.nc-title { font-size: 22px; line-height: 1.2; font-weight: 350; }
.nc-desc { display: none; font: 400 15px/1.55 var(--sans); color: var(--mist); overflow: hidden; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; }
.note-card:hover { color: inherit; }
.note-card:hover .nc-title { color: var(--sea); }
@media (min-width: 900px) {
  .notes-sec { grid-template-areas: "head btn" "list list"; grid-template-columns: 1fr auto; row-gap: 48px; column-gap: 24px; align-items: end; }
  .notes-all { justify-self: end; }
  .note-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .note-card { gap: 14px; padding: 32px; border-radius: 12px; background: var(--deep); border: 1px solid var(--line); }
  .note-card:last-child { border-bottom: 1px solid var(--line); }
  .note-card:hover { border-color: var(--sea); }
  .nc-cat { font-size: 12px; }
  .note-card time { font-size: 15px; }
  .nc-title { font-size: 30px; line-height: 1.12; }
  .nc-desc { display: -webkit-box; }
}

/* ---------- 09 the collection ---------- */

.collection { display: flex; flex-direction: column; gap: 18px; padding-right: 0; }
.shelf-tabs { display: flex; gap: 8px; flex-wrap: wrap; padding-right: 24px; }
.shelf-tabs button, .pill {
  height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--hair-2); background: transparent; color: var(--foam);
  font: 400 14px/1 var(--sans); cursor: pointer; transition: background-color .15s, color .15s, border-color .15s;
}
.shelf-tabs button:hover { border-color: var(--sea); color: var(--sea); }
.shelf-tabs button[aria-selected="true"] { background: var(--foam); border-color: var(--foam); color: var(--abyss); }
.shelves { margin-top: 10px; }
.shelf { display: flex; flex-direction: column; gap: 18px; }
.shelf + .shelf { margin-top: 48px; }
.js .shelf[hidden] { display: none; }
.js .shelf + .shelf { margin-top: 0 !important; }
.shelf-head { display: flex; flex-direction: column; gap: 10px; padding-right: 24px; }
.shelf-head h2 { font-size: clamp(44px, 27.66px + 4.19vw, 88px); font-weight: 300; letter-spacing: -.03em; line-height: 1; }
.shelf-side { display: flex; flex-direction: column; gap: 10px; }
.shelf-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.shelf-blurb { font-size: clamp(16px, 14.89px + .286vw, 19px); line-height: 1.5; color: var(--body); }

/* rails: a sideways row on phones, a grid on wide screens */
.rail { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 24px 8px 0; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.item { flex-shrink: 0; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.item-pic { position: relative; display: block; border-radius: 4px; overflow: hidden; }
.item-pic img { width: 100%; height: 100%; object-fit: cover; }
.portrait .item { width: 200px; } .portrait .item-pic { width: 200px; aspect-ratio: 3 / 4; }
.wide .item { width: 300px; } .wide .item-pic { width: 300px; aspect-ratio: 16 / 9; }
.item figcaption { display: flex; flex-direction: column; align-items: center; gap: 4px; line-height: 1.25; }
.item-name { font-size: clamp(16px, 14.14px + .476vw, 21px); }
.item-sub { display: none; font: 400 13px/1.25 var(--sans); color: var(--mist); }
/* the name video's "Hear it in my own voice" */
.badge {
  position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 7px;
  height: 30px; padding: 0 12px; border-radius: 999px; background: rgba(6,16,25,.72); color: var(--foam);
  font: 600 12px/1 var(--sans);
}
.i-play { width: 9px; height: 9px; fill: currentColor; flex-shrink: 0; }
.i-zoom { width: 11px; height: 11px; stroke: currentColor; stroke-width: 1.4; fill: none; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

/* the icon chip (Kit.Chip, 2026-10-06): on every picture that is a link, at its bottom left, what
   clicking it does. One meaning per icon: ↗ another site, ▶ it plays, → a page here, zoom a bigger
   photo. Sea on hover, with the picture's link. Small tiles (a game, a dish, the album) wear it smaller. */
.ichip { position: absolute; left: 12px; bottom: 12px; z-index: 1; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(6,16,25,.72); color: var(--foam); transition: background-color .15s, color .15s; }
.ichip svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ichip .fill { fill: currentColor; stroke: none; }
a:hover .ichip, a:focus-visible .ichip { background: var(--sea); color: var(--abyss); }
.game-pic .ichip, .dish .ichip, .dtile .ichip { left: 8px; bottom: 8px; width: 30px; height: 30px; }
.game-pic .ichip svg, .dish .ichip svg, .dtile .ichip svg, .ichip-line svg { width: 14px; height: 14px; }
/* in a line of words (the favorites): in the flow, at the line's start */
.ichip-line { position: static; flex: none; width: 30px; height: 30px; }
/* a dish tile carries both: zoom for the pop-up, → once its tile goes to the recipe (.to-page) */
.zoom .ic-here, .zoom.to-page .ic-zoom { display: none; }
.zoom.to-page .ic-here { display: flex; }

.song-card, .favs { display: none; }
.tracks { display: none; padding-right: 24px; }
.tracks.open { display: flex; flex-direction: column; gap: 14px; }
.tracks-label { font: 600 12px/1.25 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--amber); }
.track-list { list-style: none; padding: 0; }
.track-list a { display: grid; grid-template-columns: 44px minmax(0, 1fr) 16px; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--hair); line-height: 1.25; }
.tr-year { font: 400 13px/1.25 var(--sans); color: var(--amber); }
.tr-title { font-size: 18px; }
.tr-by { font-size: 15px; font-style: italic; color: var(--mist); }
.track-list .i-play { color: var(--mist); }
.track-list a:hover .tr-by, .track-list a:hover .i-play { color: var(--sea); }

.machines { display: flex; flex-direction: column; gap: 22px; }
.machine { display: flex; flex-direction: column; gap: 10px; }
.machine-name { display: flex; flex-direction: column; }
.machine-name .mn, .machine-name .mn-era, .machine-name .mn-count { display: none; }
.mn-short { font: 600 11px/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--mist); }
.games { display: flex; gap: 12px; overflow-x: auto; padding-right: 24px; scrollbar-width: none; scroll-snap-type: x mandatory; }
.games::-webkit-scrollbar { display: none; }
.game { flex-shrink: 0; width: 120px; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.game-pic { position: relative; display: block; width: 120px; height: 120px; border-radius: 4px; overflow: hidden; }
.game img { width: 100%; height: 100%; object-fit: cover; }
.game figcaption { display: flex; flex-direction: column; align-items: center; gap: 2px; line-height: 1.25; }
.game-name { font-size: 14px; line-height: 1.25; }
.game-year { display: none; font: 400 11px/1.2 var(--sans); color: var(--mist); }

/* the home page's Table: two rows; on a phone they scroll sideways together, from 900 five across */
.dishes { display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto); grid-auto-columns: 150px; gap: 22px 12px; overflow-x: auto; padding-right: 24px; scrollbar-width: none; scroll-snap-type: x mandatory; }
.dishes::-webkit-scrollbar { display: none; }
.dish { width: 150px; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.dish .zoom { position: relative; display: block; width: 150px; aspect-ratio: 1; cursor: zoom-in; }
.dish .zoom img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; }
/* a picture in a note: the zoom chip shows on hover */
.zchip { position: absolute; right: 6px; top: 6px; width: 26px; height: 26px; border-radius: 50%; background: rgba(6,16,25,.72); color: var(--foam); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .15s; }
.zoom:hover .zchip, .zoom:focus-visible .zchip { opacity: 1; }
/* a dish with a recipe: its tile goes to the page, not the pop-up */
.zoom.to-page { cursor: pointer; }
.dish figcaption { display: flex; flex-direction: column; align-items: center; gap: 3px; line-height: 1.25; }
.dish-en { font-size: 14px; line-height: 1.25; }
.dish-tr { font: 400 11px/1.3 var(--sans); color: var(--mist); }

.strips { display: flex; gap: 12px; overflow-x: auto; padding-right: 24px; scrollbar-width: none; scroll-snap-type: x mandatory; }
.strips::-webkit-scrollbar { display: none; }
.strip { flex-shrink: 0; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.strip-pic { position: relative; display: block; height: 200px; aspect-ratio: var(--ar); border-radius: 4px; overflow: hidden; }
.strip-pic img { width: 100%; height: 100%; object-fit: cover; }
.strip figcaption { display: flex; flex-direction: column; align-items: center; gap: 6px; line-height: 1.25; }
.strip-title { font-size: clamp(16px, 14.51px + .381vw, 20px); }
.strip time { font-size: clamp(13px, 12.26px + .19vw, 15px); font-style: italic; color: var(--mist); }
.lang-pills { display: flex; gap: 8px; }
.lang-pill { display: inline-flex; align-items: center; height: 26px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--hair-3); font: 500 11px/1 var(--sans); }

@media (min-width: 900px) {
  .collection { gap: 28px; padding-right: var(--gutter); }
  .shelf-tabs { gap: 10px; padding-right: 0; }
  .shelf-tabs button { height: 46px; padding: 0 20px; font-size: 15px; }
  .shelves { margin-top: 20px; }
  .shelf { gap: 36px; }
  .shelf + .shelf { margin-top: 72px; }
  .shelf-head { flex-direction: row; justify-content: space-between; align-items: flex-end; gap: 64px; padding-right: 0; }
  .shelf-head h2 { line-height: .95; flex-shrink: 0; }
  .shelf-side { align-items: flex-end; gap: 16px; }
  .shelf-btns { gap: 10px; }
  .shelf-blurb { max-width: 620px; text-align: right; line-height: 1.55; font-weight: 350; }
  .rail { display: grid; gap: 20px; overflow: visible; padding: 0; }
  .rail.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .rail.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rail.cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .item, .portrait .item, .wide .item { width: auto; gap: 12px; }
  .portrait .item-pic, .wide .item-pic { width: 100%; }
  .item-name .i-arrow { width: 11px; height: 11px; }
  .item-sub { display: block; }
  .song-card {
    display: flex; flex-direction: column; gap: 14px; aspect-ratio: 3 / 4; padding: 32px; border-radius: 4px;
    background: var(--deep); border: 1px solid var(--line);
  }
  .song-card:hover { color: inherit; border-color: var(--sea); }
  .sc-label { font: 600 12px/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--amber); }
  .sc-title { font-size: clamp(36px, 3.33vw, 48px); font-weight: 300; line-height: 1; letter-spacing: -.02em; }
  .sc-by { font: 400 14px/1 var(--sans); color: var(--mist); }
  .sc-quote { margin-top: 8px; font-size: 20px; font-style: italic; line-height: 1.4; color: var(--body); }
  .sc-play { margin-top: auto; display: flex; align-items: center; gap: 14px; font: 600 14px/1 var(--sans); }
  .sc-disc { width: 56px; height: 56px; border-radius: 50%; background: var(--amber); color: var(--abyss); display: flex; align-items: center; justify-content: center; transition: background-color .15s; }
  .sc-disc .i-play { width: 18px; height: 18px; margin-left: 3px; }
  .song-card:hover .sc-disc { background: var(--sea); }
  /* the absolute favorites sharing the last tile (2026-10-06): the album's cover and its line (one
     link), then the song's line. The tile takes the whole row's height (an artist's picture and name). */
  .favs { display: flex; flex-direction: column; border-radius: 4px; overflow: hidden; background: var(--deep); border: 1px solid var(--line); }
  .fav-line { flex: 1; display: flex; align-items: center; gap: 12px; padding: 0 14px; min-height: 0; transition: background-color .15s; }
  .fav-album { display: flex; flex-direction: column; flex: none; }
  .favs > .fav-line { border-top: 1px solid var(--hair); }
  .fav-album .fav-line { padding-top: 12px; padding-bottom: 12px; }
  .favs > .fav-line { padding-top: 12px; padding-bottom: 12px; }
  .fav-text { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; text-align: left; }
  .fav-label { font: 600 10px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--amber); }
  .fav-t { font-size: 20px; font-weight: 350; line-height: 1.1; }
  .fav-by { font: 400 12px/1.3 var(--sans); color: var(--mist); }
  .fav-cover { display: block; aspect-ratio: 1; }
  .fav-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .favs a:hover { color: inherit; }
  .favs a:hover .fav-t { color: var(--sea); }
}
/* a narrower desktop: the favorites' words a size smaller */
@media (min-width: 900px) and (max-width: 1279px) {
  .fav-label { font-size: 9px; letter-spacing: .1em; }
  .fav-t { font-size: 16px; }
  .fav-by { font-size: 11px; }
  .fav-line { gap: 10px; padding: 0 10px; }
  .fav-album .fav-line, .favs > .fav-line { padding-top: 8px; padding-bottom: 8px; }
}
@media (min-width: 900px) {
  .tracks, .tracks.open { display: flex; flex-direction: column; gap: 14px; margin-top: 20px; padding-right: 0; }
  .track-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(var(--rows, 10), auto); grid-auto-flow: column; column-gap: 40px; }
  .machines { gap: 0; }
  .machine { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; padding: 24px 0; border-top: 1px solid var(--hair); }
  .machine-name { display: flex; flex-direction: column; gap: 6px; }
  .machine-name .mn { display: block; font-size: 26px; font-weight: 350; line-height: 1.2; }
  .machine-name .mn-era { display: block; font-size: 16px; line-height: 1.25; font-style: italic; color: var(--mist); }
  .machine-name .mn-count { display: block; font: 400 12px/1.2 var(--sans); color: var(--mist); }
  .mn-short { display: none; }
  .games { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px 16px; overflow: visible; padding: 0; }
  .game { width: auto; gap: 8px; }
  .game-pic { width: 100%; height: auto; aspect-ratio: 1; }
  .game-year { display: block; }
  .dishes { grid-auto-flow: row; grid-template-rows: none; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 30px 20px; overflow: visible; padding: 0; }
  .dish { width: auto; gap: 10px; }
  .dish .zoom { width: 100%; }
  .dish-en { font-size: 16px; }
  .dish-tr { font-size: 12px; }
  .strips { gap: 16px; overflow-x: auto; padding: 0 0 8px; }
  .strip { gap: 12px; }
  .strip-pic { height: 225px; }
  .lang-pill { height: 28px; font-size: 12px; }
}
@media (min-width: 1200px) { .game-name { font-size: 15px; } }

/* ---------- the end ---------- */

.the-end { background: #040B11; border-top: 1px solid var(--hair); padding: 64px 24px 48px; display: flex; flex-direction: column; gap: 20px; }
.the-end .eyebrow { letter-spacing: .3em; }
.end-en { font-size: clamp(26px, 20.06px + 1.524vw, 42px); font-weight: 300; font-style: italic; line-height: 1.3; letter-spacing: -.01em; }
.end-tr { font-size: clamp(15px, 13.14px + .476vw, 20px); font-style: italic; line-height: 1.6; color: var(--mist); }
.end-sign { display: flex; align-items: center; gap: 12px; margin-top: 4px; font-size: clamp(26px, 23.03px + .762vw, 34px); font-style: italic; font-weight: 400; }
/* the avatar as tall as the signature beside it, so the two read as one sign-off */
.end-sign img { width: clamp(60px, 48px + 3vw, 100px); height: auto; border-radius: 50%; }
.end-sig { display: block; height: clamp(60px, 48px + 3vw, 100px); width: auto; color: var(--foam); overflow: visible; }
@media (min-width: 900px) {
  .the-end { padding: 128px var(--gutter) 104px; align-items: center; text-align: center; gap: 32px; }
  .end-en { max-width: 1040px; line-height: 1.28; }
  .end-tr { max-width: 900px; }
  .end-sign { margin-top: 8px; gap: 16px; }
}

/* ---------- the pop-up (a dish, a strip) ----------
   It opens under the site's own menu, which stays in place and keeps working, and ends in the
   footer's copyright line (main.js copies it from the page). The page between them rests. */

.lb {
  --lb-foot: 46px; --lb-vh: calc(100svh - var(--nav-h) - var(--lb-foot));
  position: fixed; inset: var(--nav-h) 0 0; z-index: 45; width: 100%; height: auto; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: rgb(4, 11, 17); color: var(--foam); overflow: auto;
}
.lb[open] { display: flex; flex-direction: column; align-items: center; }
html.lb-open { overflow: hidden; }
html.lb-open .site-head .nav { background: rgb(4, 11, 17); border-bottom-color: rgba(238, 244, 246, .1); }
.lb-foot { position: sticky; bottom: 0; z-index: 2; width: 100%; margin-top: auto; background: rgb(4, 11, 17); }
.lb-foot .foot-copy { height: var(--lb-foot); display: flex; align-items: center; justify-content: center; padding: 0 var(--gutter); font-size: 13px; }
.lb-top { position: sticky; top: 0; z-index: 2; width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 20px max(20px, var(--gutter)); background: rgb(4, 11, 17); }
.lb-kicker { display: flex; align-items: baseline; gap: 12px; }
.lb-sub { font-size: 16px; font-style: italic; color: var(--mist); }
.lb-btn {
  width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--hair-3); background: rgba(6,16,25,.55);
  color: var(--foam); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: color .15s, border-color .15s;
}
.lb-btn:hover { color: var(--sea); border-color: var(--sea); }
.lb-btn svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.lb-prev, .lb-next { position: fixed; top: 50%; transform: translateY(-50%); z-index: 2; width: 56px; height: 56px; }
.lb-prev { left: max(12px, var(--gutter)); } .lb-next { right: max(12px, var(--gutter)); }
.lb-prev[hidden], .lb-next[hidden] { display: none; }
.lb-fig { width: min(var(--lb-max, 640px), calc(100% - 40px), calc((var(--lb-vh) - 220px) * var(--ar, 1))); margin: 12px auto 40px; display: flex; flex-direction: column; gap: 22px; }
.lb-fig img { width: 100%; height: auto; max-height: calc(var(--lb-vh) - 220px); object-fit: contain; border-radius: 6px; box-shadow: 0 30px 80px rgba(0,0,0,.45); }
.lb-fig figcaption { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.lb-names { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.lb-title { font-size: clamp(28px, 25.03px + .762vw, 36px); font-weight: 300; letter-spacing: -.02em; line-height: 1.05; }
.lb-tr { font: 400 14px/1.3 var(--sans); color: var(--mist); }
.lb-names time { font-size: 16px; font-style: italic; color: var(--mist); }
.lb-names [hidden] { display: none; }
.lb-langs { display: flex; gap: 8px; }
.pill-sm {
  height: 32px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--hair-3); background: transparent; color: var(--foam);
  font: 500 13px/1 var(--sans); cursor: pointer;
}
.pill-sm:hover { border-color: var(--sea); color: var(--sea); }
.pill-sm[aria-pressed="true"] { background: var(--foam); border-color: var(--foam); color: var(--abyss); }
@media (max-width: 899px) {
  .lb-prev, .lb-next { top: auto; bottom: 20px; transform: none; width: 48px; height: 48px; }
}

/* =====================================================================
   FILTER BAR (the notes lists; Recommendations and The Table share it)
   Level 1: categories, solid when selected. Under them one panel for the
   selected category: its search (and its shelves, where it has them).
   ===================================================================== */

.filter {
  display: flex; flex-direction: column; gap: clamp(12px, 11.26px + .19vw, 14px);
  padding: clamp(20px, 17.03px + .762vw, 28px) 0 clamp(24px, 22.51px + .381vw, 28px);
  border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
}
.pills { display: flex; gap: clamp(8px, 7.26px + .19vw, 10px); overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
.pills::-webkit-scrollbar { display: none; }
.pill {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; height: clamp(40px, 38.29px + .571vw, 46px); padding: 0 clamp(16px, 14.51px + .381vw, 20px);
  border-radius: 999px; border: 1px solid var(--hair-2); background: transparent; color: var(--foam);
  font: 400 clamp(14px, 13.63px + .095vw, 15px)/1 var(--sans); white-space: nowrap;
}
.pill-n { font-size: .87em; color: var(--mist); }
.pill:hover { border-color: var(--sea); color: var(--sea); }
.pill[aria-current="page"], .pill[aria-pressed="true"] { background: var(--foam); border-color: var(--foam); color: var(--abyss); }
.pill[aria-current="page"] .pill-n, .pill[aria-pressed="true"] .pill-n { color: rgba(6,16,25,.55); }
.filter-panel { display: none; padding: clamp(14px, 12.51px + .381vw, 18px); border-radius: clamp(18px, 17.26px + .19vw, 20px); background: var(--deep); border: 1px solid var(--line); }
.js .filter-panel { display: block; }
.search {
  display: flex; align-items: center; gap: 10px; height: clamp(44px, 42.51px + .381vw, 48px); padding: 0 18px;
  border-radius: 999px; border: 1px solid rgba(238,244,246,.22); background: var(--abyss); cursor: text;
}
.search:focus-within { border-color: var(--sea); }
.i-search { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: var(--mist); stroke-width: 1.5; stroke-linecap: round; }
.search input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: var(--foam); font: 400 15px/1 var(--sans); outline: none; }
.search input::placeholder { color: var(--mist); opacity: 1; }
/* iPhone Safari zooms the page into any field set below 16px when it gets focus */
@media (pointer: coarse) { .search input { font-size: 16px; } }
.search input::-webkit-search-cancel-button { filter: invert(.8); }
.search-empty { margin-top: 24px; font: 400 14px/1.5 var(--sans); color: var(--mist); }
@media (min-width: 760px) {
  .pills { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; }
}

/* =====================================================================
   FIELD NOTES: the lists
   ===================================================================== */

.notes-cover { display: flex; justify-content: center; padding-bottom: clamp(36px, 28.57px + 1.905vw, 56px); }
.notes-cover figure { width: 100%; max-width: 1024px; }
.notes-cover img { width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line); }
.notes-list { padding-bottom: clamp(72px, 51.20px + 5.333vw, 128px); }
.ncards { margin-top: clamp(24px, 17.91px + 1.524vw, 40px); display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(14px, 11.77px + .571vw, 20px); }
@media (min-width: 760px) { .ncards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .ncards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* the note card */
.ncard {
  position: relative; display: flex; flex-direction: column; gap: 14px; padding: clamp(24px, 22.51px + .381vw, 28px);
  border-radius: 12px; background: var(--deep); border: 1px solid var(--line); transition: border-color .15s, box-shadow .15s;
}
.ncard-link { position: absolute; inset: 0; border-radius: 12px; }
/* a card a filter or the search set aside (its display would otherwise beat [hidden]) */
.ncard[hidden] { display: none; }
.ncard-top { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; }
.ncard-cat { font: 600 clamp(11px, 10.63px + .095vw, 12px)/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--amber); }
/* an offering's pill (Bazaar.cs card_tag) sits where a note card has its date */
.ncard-top .tag { margin-left: auto; }
.ncard time { margin-left: auto; font-size: 15px; line-height: 1.3; font-style: italic; color: var(--mist); }
.ncard-title { font-size: 26px; font-weight: 350; line-height: 1.15; letter-spacing: -.005em; transition: color .15s; }
.ncard-desc { font-size: 16px; line-height: 1.55; color: var(--mist); }
.ncard-foot {
  margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 10px; font: 400 13px/1.3 var(--sans); color: var(--mist);
}
.ncard-foot .langs { position: relative; z-index: 1; }
/* lit while hovered, or while the keyboard is on its link (:focus-visible): a mouse click leaves
   focus on a link that opened a new tab, and :focus-within kept the card lit on the way back */
.ncard:hover, .ncard:has(:focus-visible) { border-color: var(--sea); box-shadow: inset 0 0 0 1px var(--sea); }
.ncard:hover .ncard-title { color: var(--sea); }
.ncard .ncard-link:focus-visible { outline-offset: -2px; }
.langs { display: flex; gap: 8px; flex-wrap: wrap; }
.lang-pill:hover { border-color: var(--sea); color: var(--sea); }
.lang-pill[aria-current="page"] { background: var(--foam); border-color: var(--foam); color: var(--abyss); }

/* =====================================================================
   FIELD NOTES: a note
   Desktop: the contents rail (240) + the text (680 measure, wide parts to
   1008). Under 1180px the rail becomes a closed Contents box above the text.
   ===================================================================== */

.note-wrap { width: 100%; max-width: calc(1312px + 2 * var(--gutter)); margin-inline: auto; padding-inline: max(24px, var(--gutter)); }
.read-bar { position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; background: var(--sea); transform-origin: left; transform: scaleX(0); }
.site-head:has(.read-bar) { isolation: isolate; }

.note-head { border-bottom: 1px solid var(--hair); }
.note-head .note-wrap {
  padding-top: clamp(44px, 24.69px + 4.952vw, 96px); padding-bottom: clamp(32px, 20.11px + 3.048vw, 64px);
  display: flex; flex-direction: column; gap: clamp(16px, 13.77px + .571vw, 22px);
}
.crumbs ol { list-style: none; padding: 0; display: flex; align-items: center; flex-wrap: wrap; gap: clamp(8px, 7.26px + .19vw, 10px); font: 600 clamp(11px, 10.26px + .19vw, 13px)/1.3 var(--sans); letter-spacing: .22em; text-transform: uppercase; }
.crumbs a { color: var(--amber); }
.crumbs a:hover { color: var(--sea); }
.crumbs .sep { color: rgba(242,166,90,.5); }
.note-head h1 { max-width: 1200px; font-size: clamp(48px, 27.20px + 5.333vw, 104px); font-weight: 300; letter-spacing: -.035em; line-height: .98; }
.note-head h1.long { font-size: clamp(40px, 25.14px + 3.810vw, 80px); }
.note-dek { max-width: 900px; font-size: clamp(19px, 16.40px + .667vw, 26px); font-weight: 300; line-height: 1.47; color: var(--body); }
.note-dek { margin-top: clamp(0px, -2.23px + .571vw, 6px); }
.note-meta { margin-top: clamp(4px, 1.77px + .571vw, 10px); display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; font: 400 clamp(13px, 12.63px + .095vw, 14px)/1.3 var(--sans); color: var(--mist); }
.note-meta time { font-family: var(--serif); font-style: italic; font-size: clamp(15px, 14.26px + .19vw, 17px); }
.note-meta .langs { flex-basis: 100%; }
@media (min-width: 760px) { .note-meta .langs { flex-basis: auto; margin-left: 10px; } }

.note-main { padding-top: clamp(28px, 11.66px + 4.190vw, 72px); padding-bottom: clamp(40px, 50.97px - .762vw, 48px); }
.toc { display: none; }
.toc-h { font: 600 11px/1.3 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--mist); }
.toc-box { margin: 0 0 clamp(20px, 17.03px + .762vw, 28px); border: 1px solid var(--line); border-radius: 14px; background: var(--deep); }
.toc-box summary { list-style: none; display: flex; justify-content: space-between; align-items: center; min-height: 55px; padding: 14px 18px; cursor: pointer; font: 600 11px/1.3 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--mist); }
.toc-box summary::-webkit-details-marker { display: none; }
.toc-box summary::after { content: '+'; font: 400 20px/1 var(--sans); letter-spacing: 0; color: var(--sea); }
.toc-box[open] summary::after { content: '–'; }
.toc-box ol { list-style: none; padding: 0 18px 12px; }
.toc-box a { display: flex; gap: 12px; padding: 8px 0; font: 400 15px/1.35 var(--sans); color: var(--mist); }
.toc-box a:hover { color: var(--sea); }
.toc-no { min-width: 20px; font: 600 12px/1.35 var(--sans); font-variant-numeric: tabular-nums; color: rgba(169,188,200,.55); padding-top: .1em; }
@media (min-width: 1180px) {
  .note-main { display: grid; grid-template-columns: 240px minmax(0, 1fr); column-gap: 64px; }
  .toc { display: block; }
  .toc-in { position: sticky; top: calc(var(--nav-h) + 32px); max-height: calc(100vh - var(--nav-h) - 48px); overflow-y: auto; scrollbar-width: none; }
  .toc-in::-webkit-scrollbar { display: none; }
  .toc nav { display: flex; flex-direction: column; gap: 16px; }
  .view-card { display: none; }
  .toc ol { list-style: none; padding: 0; border-left: 1px solid var(--line); }
  .toc a { display: flex; gap: 12px; padding: 7px 0 7px 16px; margin-left: -1px; border-left: 2px solid transparent; font: 400 14px/1.35 var(--sans); color: var(--mist); }
  .toc .toc-no { min-width: 18px; }
  .toc a:hover { color: var(--foam); }
  .toc a[aria-current="true"] { border-left-color: var(--sea); color: var(--foam); }
  .toc a[aria-current="true"] .toc-no { color: var(--amber); }
  .toc-box { display: none; }
}

/* keep reading */
.keep { border-top: 1px solid var(--hair); }
.keep .note-wrap { padding-top: clamp(56px, 41.14px + 3.810vw, 96px); padding-bottom: clamp(64px, 49.14px + 3.810vw, 104px); display: flex; flex-direction: column; gap: clamp(24px, 19.54px + 1.143vw, 36px); }
.keep-head { display: flex; flex-direction: column; gap: 24px; }
.keep-head > div { display: flex; flex-direction: column; gap: clamp(8px, 5.77px + .571vw, 14px); }
.keep h2 { font-size: clamp(36px, 31.54px + 1.143vw, 48px); font-weight: 300; letter-spacing: -.02em; line-height: 1.05; }
.keep-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(14px, 11.77px + .571vw, 20px); }
.keep-head .btn { align-self: flex-start; }
@media (min-width: 760px) {
  .keep-head { flex-direction: row; justify-content: space-between; align-items: flex-end; gap: 32px; }
  .keep-head .btn { order: 0; align-self: auto; }
  .keep-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) { .keep-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 759px) { .keep-head { display: contents; } .keep-grid { order: 1; } .keep-head .btn { order: 2; } }

/* =====================================================================
   THE ARTICLE KIT (Design kits 2, 3 and 4): everything inside .art
   ===================================================================== */

.art {
  min-width: 0; font-weight: 400;
  --ink: var(--foam); --muted: var(--mist); --surface: var(--deep); --grid: var(--tide); --bg: var(--abyss);
  --bull: var(--seaglass); --bear: var(--coral); --liq: var(--amber); --fvg: var(--dusk); --ob: var(--harbor); --link: var(--sea);
  --p: clamp(17px, 15.89px + .286vw, 20px);
}
.art > :not(section), .art section > * { max-width: 680px; }
.art > :is(.fig, .pic.wide, .terms, .code, .fold, .cycle, .stats, .mistakes, .check, .link-card, .toc-box, .view, .view-card, .wide),
.art section > :is(.fig, .pic.wide, .terms, .code, .fold, .cycle, .stats, .mistakes, .check, .link-card, .tenses, .wide) { max-width: 100%; }
/* a section is a flex column, as on the boards: inside it a block's margins add up with its
   neighbor's instead of collapsing (a paragraph's 22px plus the next block's own top margin);
   a section with a floated picture beside the text stays a block so the text wraps around it */
.art section { display: flex; flex-direction: column; margin-top: clamp(56px, 50.06px + 1.524vw, 72px); }
.art section:has(> .beside) { display: block; }
.art section::after { content: ""; display: table; clear: both; }
.art .sec-h { margin: 0 0 26px; }
.sec-eyebrow { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 0 16px; }
/* 16px under the eyebrow plus the kit heading gap (10px): `.art p` must not win here */
.art .sec-h .sec-eyebrow { margin: 0 0 26px; }
.secno { font: 600 13px/1 var(--sans); letter-spacing: .22em; color: var(--amber); }
.art .sec-h h2 { font-size: clamp(34px, 28.80px + 1.333vw, 48px); font-weight: 300; letter-spacing: -.02em; line-height: 1.04; text-wrap: balance; }
.art h3 { font-size: clamp(24px, 22.51px + .381vw, 28px); font-weight: 400; letter-spacing: -.01em; line-height: 1.2; margin: clamp(40px, 33.94px + 1.524vw, 56px) 0 16px; }
.art h3 .chip { vertical-align: .25em; margin-left: 8px; }
.art :is(p, li) { font-size: var(--p); line-height: 1.72; color: var(--body); }
.art p { margin: 0 0 22px; }
.art .intro { font-size: clamp(20px, 18.89px + .286vw, 23px); line-height: 1.6; color: var(--foam); font-weight: 350; margin-bottom: 8px; }
.art strong, .art b { font-weight: 700; color: var(--foam); }
@media (max-width: 759px) { .art :is(p, li) { line-height: 1.7; } }
.art em { font-style: italic; }
.art :is(p, li, dd, td, figcaption, .alert, .lc-text) a:not(.btn):not(.zoom) { border-bottom: 1px solid var(--amber); padding-bottom: 1px; }
.art :is(p, li, dd, td, figcaption, .alert, .lc-text) a:not(.btn):not(.zoom):hover { color: var(--sea); border-bottom-color: var(--sea); }
.art :not(pre) > code { font-family: var(--mono); font-size: .84em; background: var(--tide); border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; color: var(--foam); }
.art ul:not([class]) { display: flow-root; padding-left: 22px; margin: 0 0 24px; }
.art ul:not([class]) > li { margin: 0 0 10px; padding-left: 4px; }
.art ul:not([class]) > li::marker { color: var(--amber); }
.art ol:not([class]) { display: flow-root; padding-left: 24px; margin: 0 0 24px; }
.art ol:not([class]) > li { margin: 0 0 10px; padding-left: 6px; }
.art ol:not([class]) > li::marker { font: 600 15px var(--sans); color: var(--amber); }
.art li > p { margin: 0 0 12px; }
.art li > ul, .art li > ol { margin: 10px 0 0; }

/* quote */
.art blockquote { position: relative; margin: 44px 0; padding: 6px 0 4px 30px; border-left: 2px solid rgba(238,244,246,.3); }
.art blockquote::before { content: '“'; position: absolute; left: -6px; top: -26px; padding: 0 2px; background: var(--abyss); font: 400 64px/1 var(--serif); color: var(--amber); }
.art blockquote p { font-size: clamp(18px, 17.14px + .286vw, 21px); line-height: 1.6; font-style: italic; color: var(--mist); margin: 0 0 14px; }

/* callout */
.art .callout { margin: 44px 0 40px; font-size: clamp(21px, 19.00px + .571vw, 27px); line-height: 1.45; font-style: italic; font-weight: 300; letter-spacing: -.005em; color: var(--foam); }
.art .callout::before { content: ''; display: block; width: 40px; height: 2px; background: var(--amber); margin-bottom: 18px; }
.art .callout.measured { margin: 8px 0 28px; padding: 2px 0 2px 22px; border-left: 3px solid var(--seaglass); font-size: clamp(17px, 16.63px + .095vw, 18px); font-style: normal; font-weight: 400; line-height: 1.6; color: var(--body); }
.art .callout.measured::before { content: 'Measured'; width: auto; height: auto; background: none; margin-bottom: 6px; font: 600 11px/1.3 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--seaglass); }

/* the rule */
.rule-line { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 18px 0; margin: 12px 0 30px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.rule-l { font: 600 11px/1.6 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--amber); white-space: nowrap; }
.art .rule-line p { margin: 0; font-size: clamp(18px, 17.26px + .19vw, 20px); line-height: 1.55; color: var(--foam); }
@media (min-width: 760px) { .rule-line { grid-template-columns: 112px minmax(0, 1fr); gap: 20px; align-items: baseline; } }

/* alerts: note harbor, tip seaglass, important dusk, warning amber, caution coral */
.alert { --ac: var(--harbor); margin: 8px 0 28px; padding: 16px 20px; border-left: 3px solid var(--ac); background: color-mix(in srgb, var(--ac) 6%, transparent); border-radius: 0 12px 12px 0; }
.alert-tip { --ac: var(--seaglass); } .alert-important { --ac: var(--dusk); } .alert-warning { --ac: var(--amber); } .alert-caution { --ac: var(--coral); }
.alert-h { display: flex; align-items: center; gap: 8px; margin: 0 0 6px !important; font: 600 12px/1.3 var(--sans) !important; letter-spacing: .2em; text-transform: uppercase; color: var(--ac) !important; }
.alert-h svg { width: 16px; height: 16px; stroke: var(--ac); }
.alert-h svg .fill { fill: var(--ac); stroke: none; }
.art .alert p, .art .alert li { font-size: 17px; line-height: 1.6; }
.art .alert p:last-child { margin-bottom: 0; }

/* tags */
.chip {
  --ph: var(--mist);
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; white-space: nowrap;
  font: 600 11.5px/1.3 var(--sans); letter-spacing: .04em; color: var(--foam);
  background: color-mix(in srgb, var(--ph) 20%, transparent); border: 1px solid color-mix(in srgb, var(--ph) 55%, transparent);
}
.chip.plain { background: transparent; color: var(--mist); border-color: rgba(238,244,246,.2); font-weight: 500; }
p .chip, li .chip, td .chip { vertical-align: .1em; }
.ph-liq, .tone-liq { --ph: var(--amber); } .ph-bear, .tone-bear { --ph: var(--coral); } .ph-fvg, .tone-fvg { --ph: var(--dusk); }
.ph-ob, .tone-ob { --ph: var(--harbor); } .ph-bull, .tone-bull { --ph: var(--seaglass); }
.ph-none, .tone-none, .tone-muted { --ph: var(--mist); } .tone-ink { --ph: var(--foam); }

/* pictures: wide (opens the pop-up), portrait (in the column), beside (art next to the text) */
.pic { margin: 40px 0; }
.pic .zoom { position: relative; display: block; width: fit-content; max-width: 100%; cursor: zoom-in; }
.pic img { display: block; max-width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line); }
.pic .zchip { right: 12px; top: 12px; width: 34px; height: 34px; }
.pic figcaption, .fig figcaption { margin-top: 16px; font-size: 15px; line-height: 1.55; font-style: italic; color: var(--mist); }
.pic.portrait img { max-width: min(360px, 100%); }
.pic.portrait figcaption { max-width: 460px; }
.beside { float: right; width: 240px; margin: 8px max(0px, calc(100% - 680px)) 20px 36px; }
.beside.detail { width: 320px; }
.beside img { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line); }
.beside + * { margin-top: 0; }
.i-zoom { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 759px) {
  .beside, .beside.detail { float: none; margin: 4px 0 28px; max-width: 100%; }
}

/* code */
.code { margin: 36px 0; background: #040B11; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.code-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 52px; padding: 10px 14px 10px 20px; border-bottom: 1px solid var(--line); background: var(--deep); }
.code-id { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; min-width: 0; }
.code-name { font: 400 13px/1.3 var(--mono); color: var(--foam); overflow-wrap: anywhere; }
.code-lang { font: 600 11px/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--mist); }
.code-copy { display: none; flex-shrink: 0; align-items: center; gap: 8px; height: 32px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--hair-3); background: transparent; color: var(--foam); font: 500 13px/1 var(--sans); cursor: pointer; }
.js .code-copy { display: inline-flex; }
.code-copy:hover { border-color: var(--sea); color: var(--sea); }
.i-copy { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.code pre { margin: 0; padding: 18px 20px; overflow-x: auto; font: 400 13px/1.65 var(--mono); color: var(--body); tab-size: 4; }
.code-more { display: none; }
.js .code.long:not(.open) pre { max-height: calc(14 * 13px * 1.65 + 36px); overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); }
.js .code.long .code-more { display: flex; justify-content: center; padding: 4px 0 18px; }
.js .code.long.open .code-more { display: none; }
.hl-comment { color: #6F8595; font-style: italic; } .hl-keyword, .hl-storage { color: var(--sea); } .hl-string { color: var(--amber); }
.hl-number, .hl-constant { color: #A48BFA; } .hl-property { color: var(--body); } .hl-variable { color: var(--foam); }
.hl-function, .hl-entity { color: var(--seaglass); } .hl-type { color: var(--dusk); } .hl-operator, .hl-punctuation { color: var(--mist); }

/* folded code: a script that backs a section without interrupting it */
.fold { margin: 0 0 16px; background: var(--deep); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.fold summary { list-style: none; display: flex; align-items: center; gap: 16px; padding: 14px 16px 14px 20px; cursor: pointer; }
.fold summary::-webkit-details-marker { display: none; }
.fold-i { width: 36px; height: 36px; flex-shrink: 0; border-radius: 10px; background: var(--tide); display: flex; align-items: center; justify-content: center; font: 400 13px/1 var(--mono); color: var(--mist); }
.fold-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.fold-name { font-size: 19px; line-height: 1.3; color: var(--foam); }
.fold-meta { font: 600 11px/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--mist); }
.fold-btn { flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--hair-3); font: 500 13px/1 var(--sans); color: var(--foam); }
.fold summary:hover .fold-btn { border-color: var(--sea); color: var(--sea); }
.i-chev { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.fold-hide, .fold[open] .fold-show { display: none; }
.fold[open] .fold-hide { display: inline; }
.fold[open] .i-chev { transform: rotate(180deg); }
.fold-body { padding: 0 16px 16px; }
.fold-body .code { margin: 0 0 16px; }
.fold-body > :last-child { margin-bottom: 0; }
@media (max-width: 759px) { .fold-btn span { display: none; } .fold-btn { width: 32px; padding: 0; justify-content: center; } .fold-i { display: none; } }

/* a setup at a glance */
.stack { margin: 8px 0 28px; padding: 20px 24px 8px; background: var(--deep); border: 1px solid var(--line); border-radius: 14px; }
.stack-h { margin: 0 0 6px !important; font: 600 11px/1.3 var(--sans) !important; letter-spacing: .22em; text-transform: uppercase; color: var(--amber) !important; }
.stack ol { list-style: none; padding: 0; margin: 0; counter-reset: st; }
.stack li { counter-increment: st; display: flex; align-items: center; gap: 16px; padding: 12px 0; margin: 0; }
.stack li + li { border-top: 1px solid var(--line); }
.stack li::before { content: counter(st, decimal-leading-zero); min-width: 22px; font: 600 12px/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--amber); }
.art .stack li a { flex: 1; border: 0; padding: 0; font-size: 18px; line-height: 1.4; color: var(--foam); }
.art .stack li a:hover { color: var(--sea); }

/* the link card */
.link-card { margin: 32px 0; display: flex; align-items: center; gap: 24px; padding: 24px 26px; border-radius: 14px; background: var(--deep); border: 1px solid var(--line); }
.lc-glyph { width: 64px; height: 64px; flex-shrink: 0; border-radius: 14px; background: var(--tide); display: flex; align-items: center; justify-content: center; }
.lc-glyph svg { width: 30px; height: 30px; }
.lc-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.lc-kicker { font: 600 11px/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--amber); }
.lc-title { font-size: 26px; font-weight: 350; line-height: 1.15; }
.lc-text { font-size: 16px; line-height: 1.55; color: var(--mist); }
.link-card .btn { flex-shrink: 0; }
@media (max-width: 759px) { .link-card { flex-direction: column; align-items: flex-start; gap: 18px; padding: 22px; } .lc-glyph { width: 52px; height: 52px; } }

/* the one table */
.terms { margin: 28px 0; overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; background: var(--deep); }
.terms table { border-collapse: collapse; width: 100%; min-width: 600px; }
.terms :is(th, td) { text-align: left; padding: 13px 18px; border-bottom: 1px solid var(--line); vertical-align: top; }
.terms thead th { font: 600 11px/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--mist); }
.terms tbody th { font-size: 17px; font-weight: 400; line-height: 1.35; color: var(--foam); width: 28%; }
.terms td { font: 400 15px/1.5 var(--sans); color: var(--body); }
.terms tbody tr:last-child :is(th, td) { border-bottom: 0; }
.terms tr.grp th { font: 600 11px/1.4 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--amber); padding-top: 22px; }
@media (max-width: 759px) {
  .terms { border: 0; background: none; border-radius: 0; overflow: visible; }
  .terms :is(table, tbody, tr, th, td) { display: block; width: auto; min-width: 0; }
  .terms thead { display: none; }
  .terms tr { background: var(--deep); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px 10px; margin: 0 0 12px; }
  .terms tbody th { padding: 0 0 10px; border: 0; width: auto; font-size: 18px; }
  .terms td { padding: 6px 0; border: 0; display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px; }
  .terms td::before { content: attr(data-label); font: 600 10.5px/1.4 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--mist); padding-top: 3px; }
  .terms td > * { justify-self: start; }
  .terms :is(th, td) { border: 0 !important; }
}

/* definitions */
.defs { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin: 8px 0 20px; }
.defs div { background: var(--deep); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; }
.defs dt { font-size: 19px; font-weight: 500; color: var(--foam); margin-bottom: 4px; }
.defs dt .full { margin-left: 8px; font: 500 13px/1.3 var(--sans); color: var(--mist); }
.defs dd { margin: 0; font-size: 17px; line-height: 1.55; color: var(--body); }

/* steps */
.steps { counter-reset: s; list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 10px; }
.art .steps li { counter-increment: s; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: start; margin: 0; font-size: 18px; line-height: 1.6; }
.steps li::before { content: counter(s); width: 28px; height: 28px; border-radius: 50%; background: var(--foam); color: var(--abyss); font: 700 .8rem/1 var(--sans); display: grid; place-items: center; margin-top: 1px; }
.steps b { font-weight: 600; color: var(--foam); }

/* the path: a route of stops, a timeline on a phone and a transit line from 900px. Each stop's
   color is --c; each line segment runs from its stop's color to the next one's (--n). */
.path { list-style: none; margin: 8px 0 28px; padding: 0; display: grid; counter-reset: path; }
.path li { counter-increment: path; position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 16px; padding: 0 0 22px; margin: 0; }
.path li::before { content: counter(path); grid-row: span 2; width: 34px; height: 34px; box-sizing: border-box; border-radius: 50%; border: 4px solid var(--c); background: var(--abyss); display: grid; place-items: center; font: 700 13px/1 var(--sans); color: var(--foam); z-index: 1; }
.path li:not(:last-child)::after { content: ""; position: absolute; left: 15px; top: 30px; bottom: -4px; width: 4px; border-radius: 2px; background: linear-gradient(180deg, var(--c), var(--n)); }
.path b { font: 400 20px/1.25 var(--serif); color: var(--foam); }
.path span { font: 400 15px/1.5 var(--sans); color: var(--mist); }
.path li:nth-child(6n+1) { --c: var(--mist); --n: var(--amber); }
.path li:nth-child(6n+2) { --c: var(--amber); --n: var(--foam); }
.path li:nth-child(6n+3) { --c: var(--foam); --n: var(--dusk); }
.path li:nth-child(6n+4) { --c: var(--dusk); --n: var(--harbor); }
.path li:nth-child(6n+5) { --c: var(--harbor); --n: var(--seaglass); }
.path li:nth-child(6n+6) { --c: var(--seaglass); --n: var(--mist); }
@media (min-width: 900px) {
  .path { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); column-gap: 12px; }
  .path li { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 0; }
  .path li:not(:last-child)::after { left: calc(50% + 15px); right: auto; top: 15px; bottom: auto; width: calc(100% - 18px); height: 4px; background: linear-gradient(90deg, var(--c), var(--n)); }
  .path b { margin-top: 4px; }
  .path span { font-size: 14px; }
}

/* the way to another edition of a page (Kit.OtherEditions): a small pill, the language's own name,
   at the right end of the kicker row (Kit.KickRow) at every width. Its negative margins keep the
   row as tall as the kicker, so the pill never pushes the title down. */
.kick-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; }
.alt-langs { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; margin-block: -8px; }
.alt-lang { display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px 6px 10px; border-radius: 999px; background: var(--tide); border: 1px solid var(--line); font: 500 14px/1.25 var(--sans); color: var(--foam); transition: border-color .15s, color .15s; }
.alt-lang .i-globe { width: 17px; height: 17px; flex-shrink: 0; fill: none; stroke: var(--sea); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.alt-lang:hover { border-color: var(--sea); color: var(--sea); }

/* the card row */
.cycle { list-style: none; padding: 0; margin: 24px 0 20px; display: grid; gap: 12px; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.phase { background: var(--deep); border: 1px solid var(--line); border-top: 2px solid color-mix(in srgb, var(--ph) 75%, transparent); border-radius: 14px; padding: 12px 12px 34px; display: flex; flex-direction: column; gap: 10px; }
.phase svg { display: block; width: 100%; height: auto; border-radius: 6px; background: color-mix(in srgb, var(--abyss) 60%, var(--deep)); }
.art .phase p { margin: 0; }
.art .phase-d { font-size: 15px; line-height: 1.5; color: var(--body); }
.art .phase-t { font: 400 12.5px/1.72 var(--sans); color: var(--mist); }
.art .phase-w { margin-top: auto; padding-top: 8px; border-top: 1px solid var(--line); font: 400 13px/1.72 var(--sans); display: flex; flex-direction: column; gap: 2px; color: var(--body); }
.phase-w span { font: 600 10px/1.72 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--mist); }
@media (max-width: 980px) { .cycle { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .cycle { grid-template-columns: minmax(0, 1fr); } }

/* numbers */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; margin: 4px 0 24px; }
.stats div { background: var(--deep); padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; }
.stats span { font: 600 11px/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--mist); }
.stats b { font: 400 30px/1.2 var(--serif); font-variant-numeric: tabular-nums; color: var(--foam); }
.stats .tp b { color: var(--seaglass); } .stats .sl b { color: var(--coral); }
@media (max-width: 640px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* do and don't */
.mistakes { list-style: none; padding: 0; margin: 8px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.mistakes li { background: var(--deep); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; margin: 0; }
.art .mistakes p { margin: 0; font-size: 17px; line-height: 1.55; }
.mistakes .avoid { color: var(--mist); }
.mistakes .tag { display: inline-block; margin-right: 8px; padding: 2px 7px; border: 0; border-radius: 4px; font: 600 10.5px/1.5 var(--sans); letter-spacing: .18em; text-transform: uppercase; vertical-align: 2px; }
.avoid .tag { color: var(--coral); background: color-mix(in srgb, var(--coral) 12%, transparent); }
.instead .tag { color: var(--seaglass); background: color-mix(in srgb, var(--seaglass) 12%, transparent); }
@media (max-width: 720px) { .mistakes { grid-template-columns: minmax(0, 1fr); } }

/* checklist */
.check { background: var(--deep); border: 1px solid var(--line); border-radius: 14px; padding: 8px 18px 18px; }
.check ul { list-style: none; padding: 0; margin: 0; }
.check li { border-bottom: 1px solid var(--line); margin: 0; }
.check label { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; padding: 12px 0; cursor: pointer; font-size: 17px; line-height: 1.5; color: var(--body); }
.check input { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--seaglass); }
.meter { height: 8px; border-radius: 99px; background: var(--tide); margin: 16px 0 10px; overflow: hidden; }
.meter-fill { height: 100%; width: 100%; background: var(--seaglass); border-radius: 99px; transition: width .25s, background-color .25s; }
.art .verdict { margin: 0; font: 600 clamp(17px, 15.89px + .286vw, 20px)/1.5 var(--sans); }
.verdict[data-state="go"] { color: var(--seaglass); } .verdict[data-state="wait"] { color: var(--amber); } .verdict[data-state="skip"] { color: var(--coral); }
.check[data-state="wait"] .meter-fill { background: var(--amber); } .check[data-state="skip"] .meter-fill { background: var(--coral); }

/* questions */
.art details:not(.fold):not(.toc-box) { border-bottom: 1px solid var(--line); padding: 14px 0; }
.art details:not(.fold):not(.toc-box):first-of-type { border-top: 1px solid var(--line); }
.art details:not(.fold):not(.toc-box) summary { list-style: none; display: flex; justify-content: space-between; gap: 24px; align-items: center; cursor: pointer; font-size: 21px; line-height: 1.35; color: var(--foam); }
.art details:not(.fold):not(.toc-box) summary::-webkit-details-marker { display: none; }
.art details:not(.fold):not(.toc-box) summary::after { content: '+'; flex-shrink: 0; font: 400 22px/1 var(--sans); color: var(--sea); }
.art details[open]:not(.fold):not(.toc-box) summary::after { content: '–'; }
.art details:not(.fold):not(.toc-box) summary:hover { color: var(--sea); }
.art details:not(.fold):not(.toc-box) p { font-size: 18px; margin: 12px 0 0; }

/* the fine print at the end of a note */
.art .foot { margin-top: 72px; padding-top: 20px; border-top: 1px solid var(--line); }
.art .foot p { font: 400 13px/1.6 var(--sans); color: var(--mist); margin: 0 0 .8em; }

/* charts and diagrams: one component for every note (each chart is its own .svg file) */
.fig { margin: 40px 0; background: var(--deep); border: 1px solid var(--line); border-radius: 14px; padding: 22px 22px 18px; }
.fig .scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.fig .scroll > svg { display: block; width: 100%; height: auto; min-width: 600px; }
.fig .scroll > svg.schem { min-width: 680px; }
.fig figcaption { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: flex-start; }
.fig figcaption > span:last-child { flex: 1 1 320px; max-width: 72ch; }
.fig figcaption:not(:has(> span)) { max-width: 72ch; }
.mapref { display: inline-flex; align-items: center; gap: 8px; font: 400 12px/1.4 var(--mono); font-style: normal; color: var(--mist); white-space: nowrap; }
@media (max-width: 759px) { .mapref { white-space: normal; flex-wrap: wrap; } }
.mm .cb { stroke: var(--bull); } .mm .cr { stroke: var(--bear); } .mm line { stroke-width: 2.4; }
.mm-win { fill: var(--ink); fill-opacity: .07; stroke: var(--ink); stroke-opacity: .4; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.lchip { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(238,244,246,.18); background: transparent; color: var(--mist); font: 500 13px/1 var(--sans); cursor: pointer; }
.lchip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ph); opacity: .4; }
.lchip[aria-pressed="true"] { color: var(--foam); background: var(--tide); border-color: color-mix(in srgb, var(--ph) 60%, var(--line)); }
.lchip[aria-pressed="true"] .dot { opacity: 1; }
.lchip:hover { color: var(--sea); }
.chart { font-family: var(--mono); }
.chart .t { fill: var(--ink); paint-order: stroke; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; }
.chart .ax { fill: var(--muted); stroke: none; font-size: 11px; font-variant-numeric: tabular-nums; }
.chart .grid { stroke: var(--grid); stroke-width: 1; }
.chart .candles line { stroke-width: 1.4; }
.chart .cb line { stroke: var(--bull); } .chart .cb rect { fill: var(--bull); }
.chart .cr line { stroke: var(--bear); } .chart .cr rect { fill: var(--bear); }
.chart .z { stroke-width: 1; }
.chart .z-fvg { fill: var(--fvg); fill-opacity: .17; stroke: var(--fvg); stroke-opacity: .6; }
.chart .z-ob { fill: var(--ob); fill-opacity: .14; stroke: var(--ob); stroke-opacity: .55; }
.chart .z-gap { fill: var(--muted); fill-opacity: .16; stroke: var(--muted); stroke-opacity: .3; }
.chart .z-prem { fill: var(--bear); fill-opacity: .07; stroke: none; }
.chart .z-disc { fill: var(--bull); fill-opacity: .08; stroke: none; }
.chart .z-ote { fill: var(--liq); fill-opacity: .24; stroke: var(--liq); stroke-opacity: .7; stroke-dasharray: 3 3; }
.chart .z-brk { fill: var(--bear); fill-opacity: .12; stroke: var(--bear); stroke-opacity: .65; stroke-dasharray: 5 3; }
.chart .z-hl { fill: var(--ph); fill-opacity: .13; stroke: none; }
.chart .zt { font-weight: 600; font-size: 12px; }
.chart .z-fvg-t, .chart .fvgt { fill: var(--fvg); font-weight: 600; } .chart .z-ob-t, .chart .obt { fill: var(--ob); font-weight: 600; }
.chart .z-brk-t, .chart .bert { fill: var(--bear); font-weight: 600; } .chart .z-ote-t { fill: var(--liq); }
.chart .z-prem-t { fill: var(--bear); } .chart .z-disc-t { fill: var(--bull); }
.chart .ln { fill: none; stroke-width: 1.3; }
.chart .brk { stroke: var(--ink); stroke-dasharray: 5 4; } .chart .brk.key { stroke-width: 2; }
.chart .liq { stroke: var(--liq); stroke-dasharray: 2 3; stroke-width: 1.8; }
.chart .eq { stroke: var(--ink); stroke-dasharray: 7 4; }
.chart .rng { stroke: var(--muted); }
.chart .tick { stroke: var(--fvg); stroke-dasharray: 3 3; }
.chart .ce { stroke: var(--fvg); stroke-width: 1.6; }
.chart .lt { font-weight: 600; font-size: 12px; } .chart .lt-liq { fill: var(--liq); } .chart .lt-tick, .chart .lt-ce { fill: var(--fvg); } .chart .lt-rng { fill: var(--muted); font-weight: 500; }
.chart circle.end { fill: var(--liq); }
.chart .dot-liq { fill: var(--liq); }
.chart .sw { font-weight: 600; font-size: 12px; fill: var(--muted); }
.chart .note { fill: var(--muted); font-size: 12px; } .chart .liqt { fill: var(--liq); font-weight: 600; font-size: 12px; }
.chart .mk circle { fill: var(--ink); } .chart .mk text { fill: var(--surface); stroke: none; font-family: var(--sans); font-weight: 700; }
.chart .num circle { fill: var(--surface); stroke: var(--fvg); stroke-width: 1.6; } .chart .num text { fill: var(--fvg); stroke: none; font-weight: 600; }
.chart .tp { fill: var(--bull); fill-opacity: .1; } .chart .sl { fill: var(--bear); fill-opacity: .13; }
.chart .entry { stroke: var(--ink); stroke-width: 1.4; }
.chart .trt { font-size: 12px; font-weight: 600; } .chart .trt-tp { fill: var(--bull); } .chart .trt-sl { fill: var(--bear); }
.chart .brkt { fill: none; stroke: var(--ink); stroke-width: 1.2; }
.chart .phs { fill: var(--ph); fill-opacity: .2; }
.chart .pht { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .03em; fill: var(--ink); stroke: none; }
.chart .lv { stroke: var(--muted); stroke-dasharray: 4 4; }
.chart .ord { fill: var(--liq); fill-opacity: .8; }
.chart .path { fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linejoin: round; }
.chart .actor { fill: var(--ob); fill-opacity: .12; stroke: var(--ob); }
.chart .actt { font-family: var(--sans); font-weight: 700; font-size: 13px; }
.chart .flow { stroke: var(--ob); stroke-width: 1.6; }
.chart .arrh { fill: var(--ob); }
.chart .kzt { font-size: 13px; font-weight: 600; fill: var(--fvg); }
.chart .evt { stroke: var(--fvg); stroke-width: 1.4; }
.chart .sess { fill: var(--ph); fill-opacity: .2; stroke: var(--ph); stroke-opacity: .55; }
.chart .sesst { font-family: var(--sans); font-size: 14px; stroke: none; }
.chart .sn { font-weight: 700; fill: var(--ink); }
.chart .axl { stroke: var(--muted); }
.schem .ax { font-size: 13px; } .schem .note { font-size: 13px; }
.chart .hb { fill: var(--bear); fill-opacity: .35; } .chart .hb-med { fill-opacity: .9; }
.chart .hbt { font-size: 11px; fill: var(--muted); stroke: none; }
.off-structure [data-layer="structure"], .off-liquidity [data-layer="liquidity"], .off-fvg [data-layer="fvg"], .off-ob [data-layer="ob"],
.off-pd [data-layer="pd"], .off-phases [data-layer="phases"], .off-trade [data-layer="trade"] { display: none; }
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pair svg { display: block; width: 100%; height: auto; }
.pair-h { font: 400 .9rem/1.4 var(--sans); margin: 0 0 6px; color: var(--mist); }
.pair-h b { color: var(--foam); margin-right: 6px; }
@media (max-width: 640px) { .pair { grid-template-columns: minmax(0, 1fr); } }

@media (max-width: 759px) {
  .art .fig { padding: 14px 14px 12px; margin: 28px -8px; border-radius: 12px; }
  .art .defs { grid-template-columns: minmax(0, 1fr); }
  .art .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .art .callout { margin: 36px 0 32px; }
}

/* =====================================================================
   REFERENCE NOTES (Design kit 4): time colors, timelines, reference
   cards, view controls. Past, present and future are named after times
   of day: Nightfall, Noon, Daybreak. They are used for time and nothing else.
   ===================================================================== */

:root { --past: #979CEB; --present: #E6D67A; --future: #F29BC5; }
.t-past { --tc: var(--past); --ph: var(--past); } .t-present { --tc: var(--present); --ph: var(--present); } .t-future { --tc: var(--future); --ph: var(--future); }

.art .fig.tl { margin: 28px 0 20px; padding: 18px 22px 10px; }
.fig.tl .scroll > svg { min-width: 0; }
.tl-narrow { display: none; }
@media (max-width: 759px) { .tl-wide { display: none; } .tl-narrow { display: block; } .art .fig.tl { margin: 20px -8px; padding: 14px 12px 6px; } }
.chart .tl-axis { stroke: rgba(238,244,246,.24); stroke-width: 1.5; }
.chart .tl-tick { stroke: rgba(238,244,246,.4); stroke-width: 1.5; }
.chart .tl-now { stroke: var(--foam); stroke-width: 1.2; stroke-dasharray: 3 4; }
.chart .tl-lab { fill: var(--mist); font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .2em; }
.chart .tl-lab.now { fill: var(--foam); }
.chart .tl-note { fill: var(--mist); font-family: var(--sans); font-size: 12px; paint-order: stroke; stroke: var(--deep); stroke-width: 5px; stroke-linejoin: round; }
.chart .tl-verb { fill: var(--tc, var(--foam)); font-family: var(--sans); font-size: 12px; font-weight: 600; paint-order: stroke; stroke: var(--deep); stroke-width: 5px; stroke-linejoin: round; }
.chart .tl-m { fill: var(--tc, var(--foam)); }
.chart .tl-bg { fill: var(--deep); }
.chart .tl-span { stroke: var(--tc, var(--foam)); stroke-width: 6; stroke-linecap: round; opacity: .85; }
.chart .tl-arc { fill: none; stroke: var(--tc, var(--foam)); stroke-width: 1.4; stroke-dasharray: 4 4; opacity: .85; }
.chart .tl-ev { stroke: var(--mist); stroke-width: 1.5; }
.chart .tl-g { transition: opacity .15s; }
.chart .tl-g.off { opacity: .15; }
.chart .tl-g.on :is(.tl-m, .tl-span, .tl-arc) { filter: drop-shadow(0 0 6px var(--tc)); }
.chart .tl-g.on :is(.tl-span, .tl-arc) { opacity: 1; stroke-width: 7; }
.chart .tl-g.on .tl-arc { stroke-width: 2; }
.chart .tl-g.on .tl-note { fill: var(--tc); }

.tenses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0 0 8px; }
.tenses.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1099px) { .tenses { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 759px) { .tenses, .tenses.two { grid-template-columns: minmax(0, 1fr); } }
.tense { background: var(--deep); border: 1px solid var(--line); border-top: 3px solid var(--tc, var(--line)); border-radius: 14px; padding: 22px 20px 20px; display: flex; flex-direction: column; gap: 18px; transition: border-color .15s, box-shadow .15s; }
.tense[hidden] { display: none; }
.tense.on { border-color: var(--tc); box-shadow: inset 0 0 0 1px var(--tc), 0 0 36px color-mix(in srgb, var(--tc) 16%, transparent); }
.tense-h { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.art .tense-h h3 { margin: 0; font-size: 23px; font-weight: 400; line-height: 1.2; letter-spacing: -.01em; color: var(--tc, var(--foam)); }
.art .tense .use { margin: 0; font-size: 16px; line-height: 1.55; color: var(--mist); }
.forms { padding: 12px; background: #040B11; border: 1px solid var(--line); border-radius: 10px; display: flex; flex-direction: column; gap: 7px; }
.forms div { display: flex; gap: 10px; align-items: center; }
.art .forms code { font: 400 13px/1.4 var(--mono); color: var(--body); white-space: nowrap; word-spacing: -.22em; background: none; border: 0; padding: 0; }
.forms i { font-style: normal; width: 18px; height: 18px; flex-shrink: 0; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; font: 700 13px/1 var(--sans); }
.forms .pos i { color: var(--seaglass); background: rgba(122,204,158,.13); }
.forms .neg i { color: var(--coral); background: rgba(225,127,107,.13); }
.forms .q i { color: var(--mist); background: rgba(169,188,200,.13); }
.art .ex { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.art .ex li { margin: 0; font-size: 17px; line-height: 1.45; color: var(--foam); }
.art .ex b { font-weight: 600; color: var(--tc, var(--foam)); }
.art .ex .tr { display: block; margin-top: 4px; font-size: 15px; font-style: italic; line-height: 1.45; color: var(--mist); }
.art .ex .tr b { color: var(--tc, var(--body)); }
.study .tr:not(.shown) { filter: blur(5px); opacity: .4; cursor: pointer; user-select: none; }
.study .tr { transition: filter .15s, opacity .15s; }
.signals { margin-top: auto; padding-top: 16px; border-top: 1px dashed var(--line); display: flex; flex-direction: column; gap: 10px; }
.signals .sl { font: 600 11px/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--mist); }
.signals .sw { display: flex; flex-wrap: wrap; gap: 6px; }

.study-t table { min-width: 720px; }
.study-t tbody th { font: 600 11px/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--tc, var(--mist)); width: auto; padding-top: 16px; }
.study-t tr.grp :is(th, td) { border-top: 1px solid rgba(238,244,246,.18); }
.study-t td.tn { color: var(--tc); font-family: var(--serif); font-size: 17px; }
.study-t td:nth-child(3) code, .study-t td:nth-child(4) { white-space: nowrap; }
.study-t td .tr { display: block; font-style: italic; color: var(--body); font-family: var(--serif); font-size: 16px; }
.study-t td .cmp { margin-top: 3px; font-style: normal; font-size: 15px; color: var(--mist); }
.study-t tr[hidden] { display: none; }
@media (max-width: 759px) { .study-t td .cmp { grid-column: 2; margin-top: 0; } .study-t table { min-width: 0; } .study-t tbody th:empty { display: none; } .study-t td:nth-child(3) code, .study-t td:nth-child(4) { white-space: normal; } }

/* view controls: in the contents rail on wide screens, a card above the text below that */
.view-ctl { display: none; flex-direction: column; gap: 14px; }
.js .view-ctl { display: flex; }
.toc .view-ctl { margin-top: 18px; padding-top: 22px; border-top: 1px solid var(--line); }
.view-card { display: none; margin: 0 0 28px; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--deep); }
.js .view-card { display: block; }
.vc-row { display: flex; flex-direction: column; gap: 8px; }
.vc-l { font: 400 12px/1.3 var(--sans); color: var(--mist); }
.vc-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.vc-pill { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--hair-3); background: transparent; color: var(--foam); font: 500 12px/1 var(--sans); cursor: pointer; }
.vc-pill:hover { border-color: var(--sea); color: var(--sea); }
.vc-pill[aria-pressed="true"] { background: var(--foam); border-color: var(--foam); color: var(--abyss); }
.vc-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--tc); display: inline-block; }
.vc-switch { display: flex; align-items: center; gap: 10px; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; color: var(--foam); }
.vc-track { position: relative; width: 36px; height: 20px; border-radius: 999px; flex-shrink: 0; border: 1px solid rgba(238,244,246,.35); transition: background-color .15s, border-color .15s; }
.vc-knob { position: absolute; top: 2px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--mist); transition: left .15s, background-color .15s; }
.vc-switch[aria-checked="true"] .vc-track { background: var(--sea); border-color: var(--sea); }
.vc-switch[aria-checked="true"] .vc-knob { left: 19px; background: var(--abyss); }
.vc-sw-t { display: flex; flex-direction: column; gap: 2px; font: 400 13px/1.3 var(--sans); }
.vc-hint { font-size: 12px; line-height: 1.35; color: var(--mist); }
@media (min-width: 1180px) { .art .view-card { display: none; } }

/* the filter bar when its pills are buttons (they filter in place): without the script the
   whole list simply shows, so the bar only appears with it */
.filter-js { display: none; }
.js .filter-js { display: flex; }
.filter-panel { display: none; }
.js .filter-panel { display: flex; flex-direction: column; gap: 16px; }
.panel-row { display: flex; align-items: center; gap: 16px; min-width: 0; }
.panel-l { flex-shrink: 0; font: 600 11px/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--mist); }
.pills-2 { gap: 8px; margin: 0; padding: 0; }
.pill-2 { height: 34px; padding: 0 14px; font-size: 13px; color: var(--mist); border-color: rgba(238,244,246,.14); }
.pill-2 .pill-n { color: rgba(169,188,200,.7); }
/* on, it is solid white like every other pick on the site (2026-10-16: it was a Sea tint) */
.pill-2[aria-pressed="true"] { background: var(--foam); border-color: var(--foam); color: var(--abyss); }
.pill-2[aria-pressed="true"] .pill-n { color: rgba(6,16,25,.55); }
.pill { cursor: pointer; }
@media (max-width: 759px) {
  .panel-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .panel-l { display: none; }
  .pills-2 { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -14px; padding-right: 14px; }
  .pills-2::-webkit-scrollbar { display: none; }
}

/* =====================================================================
   THE COMICS
   ===================================================================== */

.ccards { margin-top: clamp(24px, 17.91px + 1.524vw, 40px); display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(16px, 14.51px + .381vw, 20px); }
@media (min-width: 900px) { .ccards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ccard { position: relative; display: flex; flex-direction: column; border-radius: 16px; background: var(--deep); border: 1px solid var(--line); overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.ccard[hidden] { display: none; }
.ccard .ncard-link { border-radius: 16px; }
.ccard-pic { display: block; padding: 14px 14px 0; }
.ccard-pic img { display: block; width: 100%; height: auto; border-radius: 4px; }
.ccard-body { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 18px 20px 20px; }
.ccard time { font-size: 15px; line-height: 1.3; font-style: italic; color: var(--mist); }
.ccard .ncard-title { font-size: clamp(26px, 24.51px + .381vw, 30px); line-height: 1.12; letter-spacing: -.01em; }
.ccard .ncard-desc { font-size: clamp(15px, 14.63px + .095vw, 16px); }
.ccard .ncard-foot { flex-wrap: wrap; }
.ccard:hover, .ccard:has(:focus-visible) { border-color: var(--sea); box-shadow: inset 0 0 0 1px var(--sea); }
.ccard:hover .ncard-title { color: var(--sea); }
@media (min-width: 900px) {
  .ccard-pic { height: 400px; padding: 16px; display: flex; align-items: center; justify-content: center; background: #040B11; }
  .ccard-pic img { width: auto; height: auto; max-width: 100%; max-height: 100%; }
  .ccard-body { padding: 24px 28px 26px; }
}

/* a strip */
.strip-head { padding-top: clamp(48px, 30.17px + 4.571vw, 96px); padding-bottom: clamp(32px, 23.09px + 2.286vw, 56px); gap: clamp(14px, 11.03px + .762vw, 22px); }
.strip-head h1 { font-size: clamp(48px, 27.20px + 5.333vw, 104px); letter-spacing: -.035em; line-height: .98; }
.strip-head .lead { font-size: clamp(19px, 16.40px + .667vw, 26px); line-height: 1.45; max-width: none; margin-top: clamp(2px, .51px + .381vw, 6px); }
.strip-head .note-meta { margin-top: clamp(4px, 1.77px + .571vw, 10px); gap: 12px 14px; }
.strip-head .note-meta .langs { flex-basis: auto; margin: 0; }
.strip-fig { display: flex; justify-content: center; padding: 0 max(20px, var(--gutter)); }
.strip-fig img { display: block; width: auto; height: auto; max-width: min(1120px, 100%); max-height: 900px; border-radius: 6px; box-shadow: 0 30px 80px rgba(0,0,0,.45); }
.strip-note { padding-top: 40px; }
.strip-pager { padding-top: clamp(48px, 33.14px + 3.810vw, 88px); padding-bottom: clamp(72px, 51.20px + 5.333vw, 128px); display: flex; flex-direction: column; gap: clamp(12px, 9.03px + .762vw, 20px); }
.pager-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.pager-card { display: flex; align-items: center; gap: 18px; padding: 16px; border-radius: 16px; background: var(--deep); border: 1px solid var(--line); min-width: 0; transition: border-color .15s, box-shadow .15s; }
.pager-card:hover { color: inherit; border-color: var(--sea); box-shadow: inset 0 0 0 1px var(--sea); }
.pager-card:hover .pager-name { color: var(--sea); }
.pager-pic { width: auto; height: 72px; max-width: 130px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }
.pager-t { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pager-l { display: inline-flex; align-items: center; gap: 6px; font: 600 11px/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--mist); }
.i-chev-s { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pager-name { font-size: clamp(20px, 18.51px + .381vw, 24px); font-weight: 350; line-height: 1.15; transition: color .15s; }
.pager-card time { font-size: 14px; font-style: italic; color: var(--mist); }
.pager-all { display: flex; justify-content: center; margin-top: 8px; }
@media (min-width: 760px) {
  .pager-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .pager-pic { height: 96px; max-width: 180px; }
  .pager-card.next { flex-direction: row-reverse; text-align: right; }
  .pager-card.next .pager-t { align-items: flex-end; }
}

/* =====================================================================
   THE TABLE: the gallery, a dish page, the ingredients
   ===================================================================== */

.table-list { padding-bottom: clamp(72px, 51.20px + 5.333vw, 128px); }
/* the first shelf that shows sits close under the filter, the rest a sea apart (a hidden shelf
   is still a sibling, so "first" means: no shown shelf before it) */
.shelf-sec { margin-top: clamp(32px, 26.06px + 1.524vw, 48px); }
.shelf-sec:not([hidden]) ~ .shelf-sec { margin-top: clamp(32px, 8.23px + 6.095vw, 96px); }
.shelf-sec[hidden] { display: none; }
/* a shelf's replaced picks (superseded: true), folded at its end */
.replaced { margin: clamp(20px, 17.03px + .762vw, 28px) 0 0; }
.replaced[hidden] { display: none; }
.replaced .fold-body { padding: 4px 16px 16px; }
.replaced .picks { border-bottom: 0; }
.replaced .pick-card { opacity: .82; }
.shelf-sec-h { display: flex; align-items: baseline; gap: 14px; margin: 0 0 clamp(20px, 17.03px + .762vw, 28px); }
.shelf-sec-h h2 { font-size: clamp(30px, 25.34px + 1.333vw, 44px); font-weight: 300; letter-spacing: -.02em; line-height: 1.05; }
.shelf-sec-h span { font: 400 clamp(13px, 12.63px + .095vw, 14px)/1.3 var(--sans); color: var(--mist); }
.dgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 23.54px + 1.143vw, 40px) clamp(12px, 7.54px + 1.143vw, 24px); }
@media (min-width: 600px) { .dgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .dgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .dgrid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.dtile { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; min-width: 0; }
.dtile[hidden] { display: none; }
.dtile .zoom { position: relative; display: block; width: 100%; aspect-ratio: 1; cursor: zoom-in; }
.dtile .zoom img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; }
.dtile .zoom:hover img { outline: 1px solid var(--sea); outline-offset: 2px; }
.dtile figcaption { display: flex; flex-direction: column; align-items: center; gap: 4px; line-height: 1.25; }
.dtile .dish-en { font-size: clamp(15px, 14.26px + .19vw, 17px); }
.dtile .dish-tr { font: 400 clamp(11px, 10.63px + .095vw, 12px)/1.3 var(--sans); color: var(--mist); }
.dtile .tag { margin-top: 4px; }

/* the ingredients: one list, or named parts on shaded bands that stay pinned while their list scrolls */
.ingr-top { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 14px; }
.ingr-h { font: 600 11px/1.3 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--amber); }
.ingr-y { font: 400 13px/1.3 var(--sans); color: var(--mist); }
.ingr-part + .ingr-part { margin-top: 16px; }
.ingr-band { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; align-items: center; height: 36px; padding: 0 12px; border-radius: 8px; background: var(--tide); font: 600 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--foam); }
.ingr-n { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--mist); }
.ingr ul { list-style: none; margin: 4px 0 0; padding: 0 12px; }
.ingr-part:only-of-type ul { padding: 0; }
.ingr li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: clamp(5px, 9.11px - .286vw, 8px) 0; font-size: clamp(16px, 17.37px - .095vw, 17px); line-height: 1.3; }
.ingr li + li { border-top: 1px solid rgba(238,244,246,.07); }
.amt { font: 400 13px/1.3 var(--sans); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--foam); }
.amt span { margin-left: 4px; color: var(--mist); }

/* a dish page: the pop-up, as a page of its own */
.dish-page { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; padding-top: clamp(32px, 11.20px + 5.333vw, 88px); padding-bottom: clamp(72px, 51.20px + 5.333vw, 128px); }
.dish-pic img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 6px; box-shadow: 0 30px 80px rgba(0,0,0,.45); }
.dish-side { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.dish-side h1 { font-size: clamp(40px, 37.77px + .571vw, 46px); font-weight: 300; letter-spacing: -.02em; line-height: 1.02; }
.dish-tr-l { font: 400 15px/1.3 var(--sans); color: var(--mist); margin-top: -8px; }
.dish-back { margin-top: 12px; }
@media (min-width: 900px) {
  .dish-page { grid-template-columns: minmax(0, 600px) minmax(0, 1fr); gap: 56px; align-items: start; max-width: 1200px; }
  .dish-side { position: sticky; top: calc(var(--nav-h) + 32px); }
}

/* the pop-up's count through the gallery */
.lb-count { margin: 0 0 28px; font: 400 13px/1 var(--sans); color: var(--mist); }
.lb-count[hidden] { display: none; }
@media (max-width: 899px) {
  .lb-count { margin-bottom: 84px; }
}

/* =====================================================================
   RECOMMENDATIONS: pillars, shelves, the picks
   One pillar at a time; a pick is a card that links out (list rows on a phone).
   ===================================================================== */

.rec-head h1 { font-size: clamp(52px, 26.74px + 6.476vw, 120px); }
.rec-disc { font: 400 13px/1.55 var(--sans); color: var(--mist); max-width: 820px; }
.rec-list { padding-bottom: clamp(72px, 51.20px + 5.333vw, 128px); }
.rec-list .shelf-sec:not([hidden]) ~ .shelf-sec,
.rec-notices:not([hidden]) ~ .shelf-sec { margin-top: clamp(56px, 41.14px + 3.810vw, 96px); }
[data-when][hidden] { display: none; }
/* while a search runs across the whole pillar, its shelf pills step back */
.is-searching .pills-2 .pill-2[aria-pressed="true"] { background: transparent; border-color: rgba(238,244,246,.14); color: var(--mist); }
.is-searching .pills-2 .pill-2[aria-pressed="true"] .pill-n { color: rgba(169,188,200,.7); }
/* the search over every product: no pill is the pick while it runs, each shelf carries its
   pillar's name, and "Show more" brings the next page of matches */
.shelf-sec-p { display: none; }
.is-search-all .shelf-sec-p { display: block; margin-bottom: 8px; font: 600 11px/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--amber); }
.is-search-all .filter-panel .panel-row { opacity: .45; }
.is-search-all [data-f="pillar"][aria-pressed="true"]:not([class*="st-"]):not([data-v="all"]) { background: transparent; color: var(--foam); border-color: var(--hair-3); }
.is-search-all [data-f="pillar"][aria-pressed="true"]:not([data-v="all"]) .pill-n { color: var(--mist); }
.is-search-all .shelf-sec-h > span { display: none; } /* a shelf's count is its whole shelf, not the matches */
.search-more { display: flex; justify-content: center; margin: clamp(32px, 26.06px + 1.524vw, 48px) 0 0; }
.search-more[hidden] { display: none; }
/* a panel's top line with a switch at its right (Recommendations: the shelves, then Affiliate:
   Both | Yes | No, alone at the right when the pillar has no shelves; on a phone, its own line) */
.panel-top { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.panel-rows { flex: 1 1 auto; min-width: 0; }
.panel-rows:not(:has(> .panel-row:not([hidden]))) { display: none; }
.panel-aff { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.panel-aff .g-seg { flex-wrap: nowrap; }
@media (max-width: 759px) {
  .panel-top { flex-direction: column; align-items: stretch; gap: 10px; }
  .panel-rows { width: 100%; }
  .panel-aff { margin-left: 0; justify-content: space-between; }
  .panel-aff .panel-l { display: inline; }
}
.search-hint { margin: clamp(32px, 26.06px + 1.524vw, 48px) 0 0; text-align: center; font: 400 clamp(15px, 14.26px + .19vw, 17px)/1.5 var(--sans); color: var(--mist); }
.search-hint[hidden] { display: none; }

/* notices: a pillar's pair under the filter, a shelf's own under its name */
.rec-notices { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: clamp(24px, 18.06px + 1.524vw, 40px); }
@media (min-width: 900px) { .rec-notices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rec-list .alert { margin: 0; }
.rec-list .shelf-sec-h + .alert { margin: 0 0 clamp(20px, 17.03px + .762vw, 28px); max-width: 880px; }
.rec-list .alert p { font-size: clamp(16px, 15.63px + .095vw, 17px); line-height: 1.6; color: var(--body); }
.rec-list .alert b { color: var(--foam); font-weight: 600; }
.rec-list .alert a { border-bottom: 1px solid var(--amber); padding-bottom: 1px; }
.rec-list .alert a:hover { color: var(--sea); border-bottom-color: var(--sea); }

/* a pick: a row on a phone (picture tile beside the words), a card from 760 */
.picks { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--line); }
@media (max-width: 759px) { .rec-list .shelf-sec-h { margin-bottom: 8px; } }
.pick[hidden] { display: none; }
/* the three parts (2026-10-06): Products | Services | Applications, the page's own switch, a size up from a card's */
.kind-row { margin-top: 8px; margin-bottom: 4px; }
.kind-row[hidden], .rec-list[hidden] { display: none; }
.g-seg.kind button { display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; font-size: 15px; }
.g-seg.kind .pill-n { font-size: 12px; }
.kind-short { display: none; }
@media (max-width: 759px) {
  .kind-long { display: none; } .kind-short { display: inline; }
  .g-seg.kind button { gap: 6px; padding: 11px 14px; }
}
@media (max-width: 359px) { .g-seg.kind button { gap: 5px; padding: 10px 10px; font-size: 14px; } }
.g-seg.kind button[aria-pressed="true"] .pill-n { color: rgba(6,16,25,.55); }
/* a service has no picture: its card is the body alone (on a phone too, where a pick's is a row) */
.svc .pick-card { grid-template-columns: minmax(0, 1fr); }
.pick-perk { display: flex; }
/* a separate referral link: its perk chip, over the card's stretched link */
.perk-link { position: relative; z-index: 2; display: inline-flex; }
.perk-link .w-perk { gap: 6px; transition: background-color .15s, color .15s; }
.perk-link .i-arrow { width: 9px; height: 9px; }
.perk-link:hover .w-perk { background: var(--sea); color: var(--abyss); }
.pick-perk .w-perks { display: flex; flex-wrap: wrap; gap: 6px; }
/* the card is one link out: the <a> itself, or (a book with a format switch) a box whose title
   link stretches over all of it, with the switch above that link so a press only switches */
.pick-card { position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; padding: 20px 0; border-top: 1px solid var(--line); color: var(--foam); }
.pick-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.pick-link:hover { color: inherit; }
.pick-link:focus-visible { outline: none; }
.pick-link:focus-visible::after { outline: 2px solid var(--sea); outline-offset: -2px; border-radius: 4px; }
.pick-pic { display: flex; align-items: center; justify-content: center; width: 96px; height: 96px; padding: 10px; border-radius: 12px; background: var(--foam); }
/* a pick still waiting for its photo: a quiet tile, not an empty white one */
.pick-pic-none { flex-direction: column; gap: 8px; background: var(--tide); color: var(--mist); }
.i-photo { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.pick-pic-note { font: 600 9px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.pick-pic img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.pick-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pick-title { font-size: 18px; font-weight: 350; line-height: 1.25; transition: color .15s; }
.pick-desc { font-size: 14px; font-weight: 400; line-height: 1.5; color: var(--mist); }
.pick-foot { display: flex; flex-direction: column; gap: 8px; }
.pick-tag { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px; }
/* an over-the-counter medicine: a quiet "OTC" with a pill at the right of its tag (2026-10-18) */
.pick-otc { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; align-self: center; font: 600 10.5px/1 var(--sans); letter-spacing: .14em; color: var(--mist); }
.pick-otc .i-pill { width: 15px; height: 15px; flex: none; }
.pick-otc abbr { text-decoration: none; cursor: help; }
.pick-pn { font: 400 11px/normal var(--mono); color: var(--mist); }
.pick-pn-v { color: var(--body); overflow-wrap: anywhere; }
.pick-go { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 2px; }
.pick-cta { display: inline-flex; align-items: center; gap: 8px; font: 500 13px/normal var(--sans); color: var(--foam); transition: color .15s; }
.pick-cta .i-arrow { width: 11px; height: 11px; color: var(--mist); }
a.pick-card:hover .pick-title, a.pick-card:hover .pick-cta, a.pick-card:hover .pick-cta .i-arrow,
.pick-card:has(.pick-link:hover) .pick-title, .pick-card:has(.pick-link:hover) .pick-cta, .pick-card:has(.pick-link:hover) .pick-cta .i-arrow { color: var(--sea); }
/* a book's format switch (Paperback | Kindle): shown only with the script, which runs it */
.pick-fmt { display: none; position: relative; z-index: 2; align-self: flex-start; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--tide); }
.js .pick-fmt { display: inline-flex; }
.pick-fmt button { appearance: none; margin: 0; padding: 7px 14px; border: 0; border-radius: 999px; background: none; font: 500 12.5px/1 var(--sans); color: var(--mist); cursor: pointer; transition: color .15s, background-color .15s; }
.pick-fmt button:hover { color: var(--foam); }
.pick-fmt button[aria-pressed="true"] { background: var(--foam); color: var(--abyss); cursor: default; }
.pick-fmt button:focus-visible { outline-offset: 1px; border-radius: 999px; }
.pick-pn[hidden] { display: none; }
@media (min-width: 760px) {
  .picks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; border: 0; }
  .pick { display: flex; }
  .pick-card { flex: 1; display: flex; flex-direction: column; gap: 0; padding: 0; border: 1px solid var(--line); border-radius: 16px; background: var(--deep); overflow: hidden; transition: border-color .15s, box-shadow .15s; }
  a.pick-card:hover, .pick-card:has(.pick-link:hover) { border-color: var(--sea); box-shadow: inset 0 0 0 1px var(--sea); }
  .pick-link:focus-visible::after { border-radius: 16px; }
  .pick-pic { position: relative; width: auto; height: auto; aspect-ratio: 311 / 236; padding: 0; border-radius: 0; }
  .pick-pic-none { gap: 12px; }
  .pick-pic-none .i-photo { width: 36px; height: 36px; }
  .pick-pic-note { font-size: 11px; }
  .pick-pic img { position: absolute; inset: 22px; width: calc(100% - 44px); height: calc(100% - 44px); max-width: none; max-height: none; }
  .pick-body { flex: 1; gap: 10px; padding: 20px 22px; }
  .pick-title { font-size: clamp(19px, 18.26px + .19vw, 21px); line-height: 1.2; letter-spacing: -.005em; }
  .pick-desc { font-size: 15px; line-height: 1.55; }
  .pick-foot { margin-top: auto; padding-top: 6px; gap: 12px; }
  .pick-pn { display: flex; align-items: baseline; gap: 8px; font-size: 12px; }
  .pick-go { justify-content: space-between; margin: 0; padding-top: 14px; border-top: 1px solid var(--line); }
  .pick-cta { font-size: 14px; }
  .pick-go .chip { margin-block: -3px; } /* the Non-affiliate chip doesn't make its foot taller than a card's without it */
  /* a service's card shares its row's lines (areas, name, text, foot), so a card with two lines of
     area chips doesn't push its name below its neighbors' */
  .svc { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
  .svc .pick-card, .svc .pick-body { display: grid; grid-row: 1 / -1; grid-template-rows: subgrid; }
  .svc .pick-card { row-gap: 0; }
  .svc .pick-tag { align-self: start; }
  .svc .pick-foot { align-self: end; }
}
@media (min-width: 900px) { .picks { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .picks { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* =====================================================================
   DEVELOPER: the header and dossier, the cover, four numbered sections
   (the transit map and the inventory, method, the notebook, selected
   work) and the closing card
   ===================================================================== */

.dev-head { padding-top: clamp(48px, 24.23px + 6.095vw, 112px); padding-bottom: clamp(40px, 22.17px + 4.571vw, 88px); display: flex; flex-direction: column; gap: 32px; }
.dev-intro { flex: 1; display: flex; flex-direction: column; gap: clamp(16px, 13.77px + .571vw, 22px); }
.dev-intro .eyebrow { font-size: clamp(11px, 10.26px + .19vw, 13px); }
.dev-intro h1 { font-size: clamp(64px, 40.23px + 6.095vw, 128px); font-weight: 300; letter-spacing: -.04em; line-height: .92; }
.dev-lead { margin-top: clamp(4px, 2.51px + .381vw, 8px); max-width: 700px; font-size: clamp(18px, 16.51px + .381vw, 22px); font-weight: 300; line-height: 1.6; color: var(--body); }
@media (min-width: 1100px) {
  .dev-head { flex-direction: row; align-items: flex-start; gap: 80px; }
  .dossier { width: 440px; flex-shrink: 0; }
}

.dossier { padding: 8px clamp(22px, 19.77px + .571vw, 28px); border-radius: 18px; background: var(--deep); border: 1px solid var(--line); }
.dossier-h { padding: 16px 0 12px; font: 600 11px/1.3 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--amber); }
.dossier dl { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dossier dd { margin: 0; line-height: 1.25; }
.dossier dl > div { display: flex; flex-direction: column; gap: 6px; padding: 16px 12px 16px 0; border-top: 1px solid var(--line); min-width: 0; }
.dossier dl > .wide { grid-column: span 2; }
.dossier dt { font: 600 11px/1.3 var(--sans); letter-spacing: clamp(.14em, .125em + .0038vw, .18em); text-transform: uppercase; color: var(--mist); white-space: nowrap; }
.dossier dd a { display: inline-flex; align-items: center; gap: 8px; font-size: clamp(18px, 17.63px + .095vw, 19px); line-height: 1.25; white-space: nowrap; }
.dossier dd a .i-arrow { width: 11px; height: 11px; color: var(--mist); }
.dossier dd a:hover .i-arrow { color: inherit; }
.dossier-name { display: block; font-size: 26px; font-weight: 350; line-height: 1.3; }
.dossier-say { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 6px; font-size: 15px; line-height: 1.25; color: var(--body); }
.dossier-say :is(b, strong) { font-weight: 600; color: var(--foam); white-space: nowrap; }
.dossier .hear { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--hair-3); font: 500 12px/1 var(--sans); }
.dossier .hear svg { fill: currentColor; }
.dossier .hear:hover { border-color: var(--sea); }

.dev-cover { display: flex; justify-content: center; padding-bottom: clamp(56px, 32.23px + 6.095vw, 120px); }
.dev-cover img { display: block; width: 1024px; max-width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line); }

.dev-sec { padding-bottom: clamp(72px, 48.23px + 6.095vw, 136px); }
.dev-sec-h { display: flex; flex-direction: column; gap: clamp(10px, 8.51px + .381vw, 14px); margin: 0 0 clamp(24px, 19.54px + 1.143vw, 36px); }
.dev-no { font: 600 clamp(12px, 11.63px + .095vw, 13px)/1.3 var(--sans); letter-spacing: .22em; color: var(--amber); }
.dev-sec-h h2 { font-size: clamp(38px, 28.34px + 2.476vw, 64px); font-weight: 300; letter-spacing: -.03em; line-height: 1; }
.dev-text { font-size: clamp(17px, 16.26px + .19vw, 19px); line-height: 1.65; color: var(--body); }
.dev-text b, .dev-text strong { color: var(--foam); font-weight: 700; }

/* the transit map: full width on a wide screen, a swipeable strip below 900 */
.metro-hint { display: none; margin: 28px 0 12px; font: 400 12px/1.3 var(--sans); color: var(--mist); }
.metro-fig { margin-top: 28px; padding: clamp(20px, 17.03px + .762vw, 28px) clamp(16px, 11.54px + 1.143vw, 28px) clamp(18px, 15.77px + .571vw, 24px); border-radius: 18px; background: var(--deep); border: 1px solid var(--line); overflow: hidden; }
.metro-scroll { overflow-x: auto; scrollbar-width: none; }
.metro-scroll::-webkit-scrollbar { display: none; }
svg.metro { display: block; width: 100%; height: auto; }
.metro text { font: 400 12.5px var(--sans); fill: var(--body); paint-order: stroke; stroke: var(--deep); stroke-width: 4px; stroke-linejoin: round; }
.metro .m-line-label { font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; stroke-width: 0; }
.metro .m-hub { font: 400 26px var(--serif); fill: var(--foam); }
.metro-legend { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.metro-legend .chip { gap: 8px; line-height: 18px; }
.metro-legend .sw { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.metro-legend .sw-ms { background: var(--mist); }
.metro-legend .sw-x { width: 12px; height: 12px; background: var(--foam); box-shadow: 0 0 0 2px var(--deep), 0 0 0 3px var(--mist); }
@media (max-width: 899px) {
  .metro-hint { display: block; }
  .metro-hint + .metro-fig { margin-top: 0; }
  .metro-in { width: 880px; }
}

/* the full inventory (drawn by stack-map.js; only with the script) */
.inv { display: none; }
.js .inv { display: block; }
.inv > .dev-text { margin-top: 40px; }
.inv-bar { display: flex; align-items: center; gap: 8px; margin: 24px 0 14px; }
.inv-sp { flex: 1; }
.inv-btn, .inv-z { height: 32px; border-radius: 999px; border: 1px solid var(--hair-3); background: transparent; color: var(--foam); font: 500 13px/1 var(--sans); cursor: pointer; }
.inv-btn { padding: 0 14px; }
.inv-z { width: 32px; padding: 0; font-size: 16px; }
.inv-btn:hover, .inv-z:hover { border-color: var(--sea); color: var(--sea); }
.inv-fig { padding: clamp(12px, 9.03px + .762vw, 20px) clamp(8px, .57px + 1.905vw, 28px); border-radius: 18px; background: var(--deep); border: 1px solid var(--line); overflow: hidden; }
.stack-map { display: block; width: 100%; height: 640px; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.stack-map.panning { cursor: grabbing; }
@media (max-width: 759px) {
  .stack-map { height: 460px; }
  .stack-map.folded { height: 230px; }
}
.stack-map .link { fill: none; stroke: var(--line); stroke-width: 1.5; }
.stack-map .pill rect { fill: var(--tide); stroke: var(--line); }
.stack-map .pill.root rect { fill: var(--deep); stroke: var(--amber); }
.stack-map .pill text { font: 400 17px var(--serif); fill: var(--foam); }
.stack-map .pill.root text { font-size: 20px; }
.stack-map .more { font: 400 12px var(--sans); fill: var(--mist); }
.stack-map .cat { --c: var(--mist); }
.stack-map .cat text { font: 400 14px var(--sans); fill: var(--body); }
.stack-map .cat.tint text { font-weight: 600; fill: var(--c); }
.stack-map .cat circle { fill: var(--c); stroke: var(--c); stroke-width: 1.5; }
.stack-map .cat.open circle { fill: var(--deep); }
.stack-map .tool rect { fill: color-mix(in srgb, var(--c) 18%, transparent); stroke: color-mix(in srgb, var(--c) 55%, transparent); }
.stack-map .tool text { font: 500 12.5px var(--sans); fill: var(--foam); }
.stack-map .sub text { font: 400 13px var(--sans); fill: var(--mist); }
@media (max-width: 759px) {
  .stack-map .pill text { font-size: 15px; }
  .stack-map .pill.root text { font-size: 19px; }
}
.stack-map [data-fold], .stack-map a { cursor: pointer; }
.stack-map a:hover text, .stack-map a:focus-visible text { fill: var(--sea); }
.stack-map [data-fold]:focus { outline: none; }
.stack-map [data-fold]:focus-visible circle, .stack-map [data-fold]:focus-visible rect { stroke: var(--sea); stroke-width: 2; }

/* method */
.method { list-style: none; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(14px, 11.77px + .571vw, 20px); }
.method li { display: flex; flex-direction: column; gap: 14px; padding: clamp(24px, 19.54px + 1.143vw, 36px) clamp(24px, 19.54px + 1.143vw, 36px) clamp(24px, 21.03px + .762vw, 32px); border-radius: 18px; background: var(--deep); border: 1px solid var(--line); }
.method h3 { font-size: clamp(26px, 23.77px + .571vw, 32px); font-weight: 300; letter-spacing: -.015em; line-height: 1.15; }
.method p { font-size: clamp(17px, 16.26px + .19vw, 19px); line-height: 1.6; color: var(--body); }
@media (min-width: 760px) { .method { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* the notebook: the newest, and the favorite */
.dnotes { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(14px, 11.77px + .571vw, 20px); margin-top: 28px; }
@media (min-width: 760px) { .dnotes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dnote { display: flex; flex-direction: column; gap: 14px; padding: 28px; border-radius: 12px; background: var(--deep); border: 1px solid var(--line); color: var(--foam); transition: border-color .15s, box-shadow .15s; }
.dnote.fav { background: linear-gradient(180deg, rgba(242,166,90,.10), rgba(242,166,90,0) 70%), var(--deep); border-color: rgba(242,166,90,.55); }
.dnote:hover { color: var(--foam); border-color: var(--sea); box-shadow: inset 0 0 0 1px var(--sea); }
.dnote:hover .dnote-t { color: var(--sea); }
.dnote-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 12px; }
.dnote-l { font: 600 12px/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--amber); }
.dnote time { font-size: 15px; font-style: italic; color: var(--mist); white-space: nowrap; }
.dnote-t { font-size: 26px; font-weight: 350; line-height: 1.15; transition: color .15s; }
.dnote-d { font-size: 16px; line-height: 1.55; color: var(--mist); }
.fav-pill { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; background: rgba(242,166,90,.16); font: 600 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--amber); }
.fav-pill svg { width: 11px; height: 11px; fill: currentColor; }
.dnotes-more { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

/* selected work */
.work { list-style: none; margin-top: 24px; padding: 0; border-bottom: 1px solid var(--line); }
.work-row { display: flex; flex-direction: column; gap: 10px; padding: clamp(22px, 20.51px + .381vw, 26px) 0; border-top: 1px solid var(--line); }
.work-kind { display: flex; }
.work-main { display: flex; flex-direction: column; gap: 10px; }
@media (min-width: 900px) { .work-main { gap: 6px; } }
.work-main h3 { font-size: clamp(26px, 24.51px + .381vw, 30px); font-weight: 350; line-height: 1.233; }
.work-main h3 a { display: inline-flex; align-items: center; gap: 10px; }
.work-main h3 .i-arrow { width: 11px; height: 11px; color: var(--mist); }
.work-main h3 a:hover .i-arrow { color: inherit; }
.work-main p { font-size: clamp(16px, 15.26px + .19vw, 18px); line-height: 1.55; color: var(--body); }
.work-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.work-badges a, .nuget-b a { display: inline-flex; flex-shrink: 0; max-width: 100%; }
/* a badge never runs past a narrow phone (the longest package names are wider than 320px) */
.work-badges img, .nuget-b img { display: block; width: auto; height: auto; max-width: 100%; max-height: 20px; }
.nuget-btn { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--hair-3); background: transparent; color: var(--foam); font: 500 13px/1 var(--sans); white-space: nowrap; cursor: pointer; }
.nuget-btn > span { color: var(--mist); }
.nuget-btn:hover { border-color: var(--sea); }
.i-chev { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.nuget-btn[aria-expanded="true"] .i-chev { transform: rotate(180deg); }
.nuget-panel { margin-top: 4px; padding: 6px clamp(16px, 13.03px + .762vw, 24px); border-radius: 12px; background: var(--deep); border: 1px solid var(--line); }
.nuget-panel[hidden] { display: none; }
.nuget-g { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 16px 0; }
.nuget-g + .nuget-g { border-top: 1px solid var(--line); }
.nuget-l { font: 600 11px/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--mist); padding-top: 3px; }
.nuget-b { display: flex; flex-wrap: wrap; gap: 8px; }
.work-more { padding: 22px 0; border-top: 1px solid var(--line); font-size: clamp(16px, 15.26px + .19vw, 18px); line-height: 1.233; font-style: italic; color: var(--mist); }
@media (min-width: 900px) {
  .work-row { display: grid; grid-template-columns: 150px minmax(0, 1fr) 320px; align-items: baseline; column-gap: 32px; row-gap: 16px; }
  .work-badges { justify-content: flex-end; align-self: center; margin: 0; }
  .nuget-panel { grid-column: 2 / -1; }
  .nuget-g { grid-template-columns: 190px minmax(0, 1fr); gap: 20px; }
}

/* the board's plain text on this page is regular (400), not the site's 350 */
.dev-text, .method p, .work-main p, .work-more, .dnote-d, .dossier-say, .dossier dd a { font-weight: 400; }

/* the closing card */
.dev-close { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(24px, 22.51px + .381vw, 28px); padding: clamp(56px, 35.20px + 5.333vw, 112px) var(--gutter) clamp(72px, 51.20px + 5.333vw, 128px); border-top: 1px solid var(--hair); }
.dev-motto { font: 400 clamp(16px, 13.77px + .571vw, 22px)/1.5 var(--mono); color: var(--seaglass); }
.dev-close h2 { font-size: clamp(40px, 31.09px + 2.286vw, 64px); font-weight: 300; letter-spacing: -.03em; line-height: 1.05; }
/* two doors: beyond the code (the home page) and talk shop (Contact), side by side from 760px */
.dev-close-cols { display: grid; gap: clamp(40px, 34.06px + 1.524vw, 56px); width: 100%; max-width: 1240px; }
.dev-close-cols > div { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(24px, 22.51px + .381vw, 28px); }
@media (min-width: 760px) {
  .dev-close { align-items: center; text-align: center; }
  .dev-close-cols { grid-template-columns: 1fr 1fr; gap: 0; }
  /* the buttons sit level even when one question wraps */
  .dev-close-cols > div { align-items: center; justify-content: space-between; padding: 0 clamp(20px, 4.8px + 2vw, 32px); }
  .dev-close-cols > div + div { border-left: 1px solid var(--hair); }
}

/* =====================================================================
   BAZAAR (/bazaar/, its categories and one page per offering, Bazaar.cs):
   the lists are note cards with the price in the foot. An offering is
   a landing page: the opening block (text, and a picture or chart beside it
   from 1100px), one full-width band per section, and a closing band.
   ===================================================================== */
.offer-page {
  --ink: var(--foam); --muted: var(--mist); --surface: var(--deep); --grid: var(--tide); --bg: var(--abyss);
  --bull: var(--seaglass); --bear: var(--coral); --liq: var(--amber); --fvg: var(--dusk); --ob: var(--harbor); --link: var(--sea);
  --p: clamp(17px, 15.89px + .286vw, 20px);
}
.offer-hero { border-bottom: 1px solid var(--hair); }
.offer-hero-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 20px + 2vw, 56px); align-items: center; padding-top: clamp(44px, 24.69px + 4.952vw, 96px); padding-bottom: clamp(36px, 24px + 3vw, 72px); }
.offer-hero-text { display: flex; flex-direction: column; gap: clamp(16px, 13.77px + .571vw, 22px); max-width: 820px; min-width: 0; }
.offer-hero h1 { font-size: clamp(48px, 27.20px + 5.333vw, 96px); font-weight: 300; letter-spacing: -.035em; line-height: .98; }
.offer-lead { font-size: clamp(19px, 16.40px + .667vw, 24px); font-weight: 300; line-height: 1.47; color: var(--body); }
.offer-visual { min-width: 0; border-radius: 16px; overflow: hidden; background: var(--deep); border: 1px solid var(--line); }
.offer-visual img { display: block; width: 100%; height: auto; }
.offer-visual.chart-box { padding: clamp(10px, 8px + .5vw, 16px); }
.offer-visual.chart-box svg { display: block; width: 100%; height: auto; }
@media (min-width: 1100px) { .offer-hero.has-visual .offer-hero-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
/* the crumbs row spans the hero, so the language pill sits at its right edge, above a picture;
   its negative margin turns the hero's wide gap into the text's own */
.offer-hero-in > .kick-row { grid-column: 1 / -1; margin-bottom: calc(clamp(16px, 13.77px + .571vw, 22px) - clamp(28px, 20px + 2vw, 56px)); }

/* the facts: chips with an icon */
.facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.facts li { display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: 999px; background: var(--tide); color: var(--foam); font: 500 13px/1.15 var(--sans); }
.facts svg { width: 15px; height: 15px; flex-shrink: 0; fill: none; stroke: var(--sea); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

/* the price panel */
.buy { width: 100%; max-width: 760px; display: flex; flex-direction: column; gap: 14px; padding: clamp(18px, 15px + .8vw, 26px); border-radius: 14px; background: var(--deep); border: 1px solid var(--line); scroll-margin-top: 96px; }
.buy-note { font: 400 14px/1.5 var(--sans); color: var(--mist); }
.buy-btns { display: flex; flex-wrap: wrap; gap: 10px 12px; }
.buy-fine { padding-top: 12px; border-top: 1px solid var(--line); font: 400 13px/1.55 var(--sans); color: var(--mist); }
/* a boxed notice under the price panel (`notices:`), as the Recommendations' health ones */
.offer-hero-text .alert { width: 100%; max-width: 760px; margin: 0; box-sizing: border-box; }
.offer-hero-text .alert p { margin: 0; font-size: clamp(16px, 15.63px + .095vw, 17px); line-height: 1.6; color: var(--body); }
.offer-hero-text .alert b { color: var(--foam); font-weight: 600; }
.offer-hero-text .alert a { border-bottom: 1px solid var(--amber); padding-bottom: 1px; }
.offer-hero-text .alert a:hover { color: var(--sea); border-bottom-color: var(--sea); }
.buy :is(.buy-note, .buy-fine) a { border-bottom: 1px solid var(--amber); padding-bottom: 1px; }
.buy :is(.buy-note, .buy-fine) a:hover { color: var(--sea); border-bottom-color: var(--sea); }
.tiers { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.tier { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name price" "who btn"; align-items: center; gap: 6px 16px; padding: 14px 0; border-top: 1px solid var(--line); }
.tier:first-child { padding-top: 0; border-top: 0; }
.tier-name { grid-area: name; font: 400 21px/1.2 var(--serif); color: var(--foam); }
.tier-who { grid-area: who; font: 400 14px/1.35 var(--sans); color: var(--mist); }
.tier-price { grid-area: price; justify-self: end; white-space: nowrap; font: 400 14px/1 var(--sans); color: var(--mist); }
.tier-price b { margin-right: 2px; font: 400 26px/1 var(--serif); color: var(--foam); }
.tier .btn { grid-area: btn; justify-self: end; }
@media (min-width: 640px) {
  .tier { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "name price btn" "who price btn"; gap: 4px 24px; }
  .tier:not(:has(.tier-who)) .tier-name { grid-row: 1 / span 2; align-self: center; }
}

/* the lists: two shelves (sessions, then the things I built); a product is a wide card, its chart beside it */
.shelf-h { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; margin-top: clamp(32px, 24px + 2vw, 48px); }
.shelf-h h2 { font-size: clamp(26px, 22px + 1vw, 34px); font-weight: 300; letter-spacing: -.01em; line-height: 1.1; }
.shelf-h p { font: 400 15px/1.4 var(--sans); color: var(--mist); }
.shelf-h + .ncards { margin-top: 18px; }

/* the bands: one per section, the number and heading on the left, the article kit on the right */
.offer-sec { border-bottom: 1px solid var(--hair); padding: clamp(48px, 36px + 3vw, 88px) 0; }
.offer-sec h2 { font-size: clamp(34px, 28.80px + 1.333vw, 48px); font-weight: 300; letter-spacing: -.02em; line-height: 1.04; margin-bottom: clamp(18px, 14px + 1vw, 28px); }
.offer-sec h2 small { display: block; margin-bottom: 14px; font: 600 12px/1 var(--sans); letter-spacing: .2em; color: var(--amber); }
.offer-sec h2 .chip { vertical-align: .3em; margin-left: 8px; }
.offer-split { display: grid; gap: 22px 64px; }
.offer-split > h2 { margin: 0; }
@media (min-width: 900px) {
  .offer-split { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: start; }
  .offer-split > h2 { position: sticky; top: 96px; }
}
.offer-sec .art > * { max-width: none; }
.offer-sec .art > :last-child { margin-bottom: 0; }
.offer-sec .art .foot { margin-top: 40px; }
/* a section of one paragraph (and perhaps the small print) is a statement */
.offer-sec .art > p:first-child:only-of-type { font: 300 clamp(22px, 19px + .8vw, 28px)/1.45 var(--serif); color: var(--foam); }
/* topics: tiles, one under another, an icon box on the left */
.offer-sec .art .defs { grid-template-columns: minmax(0, 1fr); gap: 14px; margin: 0 0 20px; }
.offer-sec .defs div { position: relative; padding: 22px; border-radius: 16px; }
.offer-sec .defs .ico { padding-left: 88px; }
.offer-sec .defs .ib { position: absolute; left: 22px; top: 22px; width: 48px; height: 48px; border-radius: 12px; background: var(--tide); display: grid; place-items: center; }
.offer-sec .defs .ib svg { width: 24px; height: 24px; fill: none; stroke: var(--sea); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.offer-sec .defs dt { margin: 2px 0 4px; font: 600 19px/1.3 var(--sans); color: var(--foam); }
.offer-sec .defs dd { font: 400 16px/1.6 var(--sans); color: var(--mist); }
/* the path is the one full-width band (its heading on top): a transit line, left to right, from
   1200px; a timeline below that, where the stations don't fit in a row */
@media (min-width: 900px) {
  .offer-split:has(.path) { grid-template-columns: minmax(0, 1fr); }
  .offer-split:has(.path) > h2 { position: static; }
  .offer-split:has(.path) .art > p { max-width: 760px; }
}
@media (min-width: 1200px) {
  .offer-sec .path b { font-size: clamp(15px, 1.25vw, 18px); }  /* ten stops: the longest name fits its column */
}
@media (min-width: 900px) and (max-width: 1199.98px) {
  .offer-sec .path { grid-auto-flow: row; }
  .offer-sec .path li { display: grid; gap: 0 16px; padding: 0 0 22px; text-align: left; }
  .offer-sec .path li:not(:last-child)::after { left: 15px; top: 30px; bottom: -4px; width: 4px; height: auto; background: linear-gradient(180deg, var(--c), var(--n)); }
  .offer-sec .path b { margin-top: 0; }
  .offer-sec .path span { font-size: 15px; }
}
/* steps: a numbered timeline, a title and a line of detail each */
.offer-sec .art .steps { display: block; margin: 0 0 8px; }
.offer-sec .art .steps li { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 0 20px; padding: 0 0 30px; margin: 0; }
.offer-sec .art .steps li:last-child { padding-bottom: 0; }
.offer-sec .steps li::before { grid-row: span 2; width: 56px; height: 56px; box-sizing: border-box; margin: 0; border-radius: 50%; border: 1px solid var(--amber); background: none; color: var(--amber); font: 300 28px/1 var(--serif); }
.offer-sec .steps li:not(:last-child)::after { content: ""; position: absolute; left: 27px; top: 64px; bottom: 8px; width: 2px; border-radius: 1px; background: var(--hair-2); }
.offer-sec .steps b { display: block; margin: 10px 0 6px; font: 400 26px/1.2 var(--serif); letter-spacing: -.01em; color: var(--foam); }
.offer-sec .steps li > span { font: 400 16.5px/1.6 var(--sans); color: var(--mist); }

/* the closing band */
.offer-close { padding: clamp(48px, 36px + 3vw, 88px) 0; }
.band { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px 32px; padding: clamp(26px, 20px + 1.5vw, 44px); border-radius: 18px; background: linear-gradient(135deg, var(--tide), var(--deep)); border: 1px solid var(--line); }
.band h2 { font-size: clamp(30px, 26px + 1vw, 42px); font-weight: 300; letter-spacing: -.02em; line-height: 1.1; }
.band p { margin-top: 8px; font-size: 17px; line-height: 1.5; color: var(--body); }
.band-act { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.band-price { font: 400 22px/1.2 var(--serif); color: var(--foam); }

/* =====================================================================
   I KNOW A GUY (/i-know-a-guy/, GoTos.cs): a note card per go-to. The trade in Amber, the name,
   the people there in grey italic, then where (a pin). A card with a website is the link, with
   ↗ at the top right like the Character cards; one without (a phone at most, as text) is not a
   link and doesn't light up. A home pill's #trade rings its card.
   ===================================================================== */
.go-card { gap: 6px; scroll-margin-top: 96px; }
.go-card .ncard-top { align-items: center; }
.go-card .ncard-top .i-arrow { width: 12px; height: 12px; margin-left: auto; color: var(--mist); transition: color .15s; }
.go-link:hover .ncard-top .i-arrow { color: var(--sea); }
.go-card:not(.go-link):hover:not(:has(:focus-visible)) { border-color: var(--line); box-shadow: none; }
.go-card:not(.go-link):hover .ncard-title { color: inherit; }
/* a home pill's #trade: the card rings once and fades, so it doesn't stay lit */
.go-card:target { animation: go-ring 2.4s ease-out 1; }
@keyframes go-ring { 0%, 40% { border-color: var(--sea); box-shadow: inset 0 0 0 1px var(--sea); } 100% { border-color: var(--line); box-shadow: inset 0 0 0 1px transparent; } }
.go-people { font-size: 16px; line-height: 1.55; font-style: italic; color: var(--mist); }
.go-foot { display: flex; align-items: flex-start; gap: 8px 16px; margin-top: auto; padding-top: 12px; }
.go-place, .go-tel { display: inline-flex; align-items: flex-start; gap: 6px; font: 500 12.5px/1.35 var(--sans); color: var(--mist); }
.go-place { flex: 1 1 0; min-width: 0; }
.go-tel { flex-shrink: 0; color: var(--foam); }
.go-place svg, .go-tel svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 1px; fill: none; stroke: var(--sea); stroke-width: 1.3; }

/* =====================================================================
   BOOKMARKS (/bookmarks/ and /bookmarks/<category>/): a notes list
   of links. A link shows its name; its description and address show as a
   card on hover or keyboard focus, and under the name on a phone. From
   760px every family is open; a phone folds all but the first.
   ===================================================================== */
/* the lead row: the twin button (notes <-> bookmarks), and the count and date */
.head-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: clamp(18px, 14px + 1vw, 28px); }
.head-meta { font: 400 13px/1.3 var(--sans); color: var(--mist); }
.head-meta a { border-bottom: 1px solid var(--amber); padding-bottom: 1px; }
.head-meta a:hover { color: var(--sea); border-bottom-color: var(--sea); }
.bm-page .filter { margin-bottom: clamp(24px, 18px + 1.5vw, 40px); }
.bm-page .note-main { padding-top: 0; }
.bm-body { min-width: 0; }

/* a family: its own section; on a phone it folds (from 760px it stays open) */
.bm-fam { border-top: 1px solid var(--line); }
.bm-fam:last-of-type { border-bottom: 1px solid var(--line); }
.bm-fam summary { list-style: none; display: flex; align-items: baseline; gap: 14px; padding: clamp(18px, 15px + .8vw, 28px) 0; cursor: pointer; }
.bm-fam summary::-webkit-details-marker { display: none; }
.bm-fam summary h2, .bm-fam summary h3 { font: 300 clamp(28px, 22px + 1.6vw, 44px)/1.05 var(--serif); letter-spacing: -.02em; }
.bm-fam-n { font: 400 13px/1 var(--mono); color: var(--amber); }
.bm-fam .i-chev { width: 14px; height: 14px; margin-left: auto; align-self: center; color: var(--mist); }
.bm-fam[open] .i-chev { transform: rotate(180deg); }
.bm-fam .bm-groups { padding-bottom: 8px; }
@media (min-width: 760px) { .bm-fam > summary { pointer-events: none; cursor: default; } .bm-fam > summary .i-chev { display: none; } }

/* groups flow in columns: 1, 2 from 760px, 3 from 1100px */
.bm-groups { columns: 1; column-gap: clamp(32px, 20px + 2.5vw, 56px); }
@media (min-width: 760px) { .bm-groups { columns: 2; } }
@media (min-width: 1100px) { .bm-groups { columns: 3; } }
.bm-group { break-inside: avoid; margin: 0 0 clamp(26px, 22px + 1vw, 36px); }
.bm-gh { display: flex; align-items: baseline; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line); font: 600 11px/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--amber); }
.bm-gh span { letter-spacing: .05em; color: var(--mist); font-weight: 400; }
.bm-list { list-style: none; margin: 0; padding: 0; }
.bm-list li { position: relative; }
.bm-list a { display: flex; padding: 10px 0; border-bottom: 1px solid var(--hair); color: var(--foam); }
.bm-main { display: flex; flex-direction: column; min-width: 0; }
.bm-line { display: inline-flex; align-items: center; gap: 8px; }
.bm-name { font: 400 17px/1.3 var(--serif); }
.bm-list a:hover .bm-name, .bm-list a:focus-visible .bm-name { color: var(--sea); }
.i-note { width: 12px; height: 12px; flex-shrink: 0; fill: none; stroke: var(--mist); stroke-width: 1.5; stroke-linecap: round; }

/* the card: clipped away (a screen reader still hears the description) until hover or focus.
   Never wider than its column, so it never pushes the page sideways. */
.bm-tip { position: absolute; left: -14px; top: calc(100% - 2px); z-index: 5; width: max-content; max-width: calc(100% + 14px);
  padding: 10px 14px; border-radius: 10px; background: var(--deep); border: 1px solid var(--line); box-shadow: 0 14px 36px rgba(0,0,0,.5);
  pointer-events: none; clip-path: inset(50%); opacity: 0; }
.bm-list a:hover .bm-tip, .bm-list a:focus-visible .bm-tip { clip-path: none; opacity: 1; }
.bm-desc { display: block; font: 400 14px/1.45 var(--sans); color: var(--body); }
.bm-url { display: block; font: 400 12px/1.45 var(--mono); color: var(--mist); overflow-wrap: anywhere; }
.bm-desc + .bm-url { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
@media (max-width: 759px), (hover: none) {
  .bm-tip { display: none; }
  .bm-list .bm-tip.has-desc { display: block; position: static; width: auto; max-width: none; margin-top: 4px; padding: 0; background: none; border: 0; box-shadow: none; clip-path: none; opacity: 1; }
  .bm-desc { color: var(--mist); }
  .bm-desc + .bm-url { margin-top: 4px; padding-top: 0; border-top: 0; font-size: 11px; color: rgba(169,188,200,.7); }
  .i-note { display: none; }
}

/* /bookmarks/: a category is a block with its own heading */
.bm-cat + .bm-cat { margin-top: clamp(48px, 40px + 2vw, 72px); }
.bm-cat-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 16px; padding-bottom: clamp(12px, 10px + .5vw, 18px); }
.bm-cat-h h2 { font: 300 clamp(40px, 30px + 2.6vw, 64px)/1 var(--serif); letter-spacing: -.02em; }
.bm-cat-h .head-row { margin: 0 0 0 auto; }
.bm-cat-lead { font-size: clamp(17px, 16px + .3vw, 20px); color: var(--body); margin-bottom: clamp(16px, 12px + 1vw, 24px); }
.bm-cat .bm-fam summary h3 { font-size: clamp(26px, 21px + 1.3vw, 38px); }
.toc .toc-cat { font: 600 11px/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; }
.toc .toc-cat a { display: inline; margin: 0; padding: 0; border: 0; font: inherit; color: var(--amber); }
.toc .toc-cat a:hover { color: var(--sea); }
.toc .toc-cat + ol { margin-top: -6px; }

/* =====================================================================
   RECIPE NOTES (`> [!TIP] …` lines in content/table/<slug>.md): small
   cards under the ingredients, on the dish page and in the pop-up, in the
   article kit's alert colors and icons, the kind as their label.
   ===================================================================== */
.rnotes { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 8px; }
.rnote { --ac: var(--harbor); --ri: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' stroke='black'%3E%3Ccircle cx='8' cy='8' r='6.8' fill='none' stroke-width='1.4'/%3E%3Cpath d='M8 7.2v4' stroke-width='1.6' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='4.9' r='.95' fill='black' stroke='none'/%3E%3C/svg%3E"); padding: 12px 14px 13px; border-radius: 10px; background: color-mix(in srgb, var(--ac) 8%, transparent); border: 1px solid color-mix(in srgb, var(--ac) 22%, transparent); }
.rnote-tip { --ac: var(--seaglass); --ri: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' stroke='black'%3E%3Cpath d='M8 1.8a4.4 4.4 0 0 0-2.6 8v1.7h5.2V9.8A4.4 4.4 0 0 0 8 1.8Z M6.2 14h3.6' fill='none' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.rnote-important { --ac: var(--dusk); --ri: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' stroke='black'%3E%3Crect x='1.8' y='2.2' width='12.4' height='9.6' rx='2' fill='none' stroke-width='1.4'/%3E%3Cpath d='M5 11.8v2.4l2.6-2.4M8 4.6v3.2' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='9.5' r='.9' fill='black' stroke='none'/%3E%3C/svg%3E"); }
.rnote-warning { --ac: var(--amber); --ri: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' stroke='black'%3E%3Cpath d='M8 1.8 14.6 13.6H1.4Z' fill='none' stroke-width='1.4' stroke-linejoin='round'/%3E%3Cpath d='M8 6v3.6' stroke-width='1.6' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='11.6' r='.9' fill='black' stroke='none'/%3E%3C/svg%3E"); }
.rnote-caution { --ac: var(--coral); --ri: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' stroke='black'%3E%3Cpath d='M5.3 1.8h5.4l3.5 3.5v5.4l-3.5 3.5H5.3l-3.5-3.5V5.3Z' fill='none' stroke-width='1.4' stroke-linejoin='round'/%3E%3Cpath d='M8 4.8v3.8' stroke-width='1.6' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='10.9' r='.9' fill='black' stroke='none'/%3E%3C/svg%3E"); }
.rnote-k { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; font: 600 11px/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ac); }
.rnote-k::before { content: ""; width: 15px; height: 15px; flex-shrink: 0; background: var(--ac); -webkit-mask: var(--ri) center / contain no-repeat; mask: var(--ri) center / contain no-repeat; }
.rnote-t { display: block; font: 400 15px/1.5 var(--sans); color: var(--body); }

/* =====================================================================
   HOME, 10 · WORTH IT: four random picks (to their place on /recommendations/)
   and the referrals (out, sponsored), two cards side by side from 1000px.
   ===================================================================== */
.worth .sec-title { margin-bottom: clamp(24px, 18px + 1.5vw, 40px); }
.worth-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
/* side by side only where the referrals card is wide enough to set each description beside its name */
@media (min-width: 1600px) {
  .worth-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: start; }
  /* every referral showing (All, or no script): the referrals run down the left, and I Know a Guy
     fills the space under Recommendations; a page at a time (data-paged): I Know a Guy runs under both */
  .w-refs { grid-row: span 2; }
  .w-guy { grid-column: 2; }
  .worth-grid:has(.w-refs[data-paged]) .w-refs { grid-row: auto; }
  .worth-grid:has(.w-refs[data-paged]) .w-guy { grid-column: 1 / -1; }
}
.w-card { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; padding: clamp(22px, 18px + 1vw, 32px); border-radius: 18px; background: var(--deep); border: 1px solid var(--line); }
.w-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font: 300 clamp(30px, 24px + 1.6vw, 44px)/1.05 var(--serif); letter-spacing: -.02em; }
.w-h span { font: 400 13px/1 var(--mono); color: var(--amber); letter-spacing: 0; }
.w-lead { font-size: 17px; line-height: 1.5; color: var(--body); }
/* the recommendations card reads like a collection shelf: its head (words, then the Amber button
   beside them once the card is wide enough), the pillar pills, then the pictures */
.w-recs { container-type: inline-size; }
/* I Know a Guy: the head like the recommendations card, then a tile per group (its count and its
   first trades) to its filter on the page (where it sits from 1600px: the Worth it grid above). Five across where they fit, else
   one under another (two columns left one tile alone) */
.w-guy { container-type: inline-size; }
.w-groups { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
@container (min-width: 760px) { .w-groups { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; } }
.w-group { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; border-radius: 12px; border: 1px solid var(--line); background: color-mix(in srgb, var(--tide) 40%, transparent); color: var(--foam); transition: border-color .15s; }
.w-group:hover { color: var(--foam); border-color: var(--sea); }
.w-group:hover .w-group-n { color: var(--sea); }
.w-group-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.w-group-n { font: 400 24px/1.1 var(--serif); transition: color .15s; }
.w-group-c { font: 400 13px/1 var(--mono); color: var(--amber); }
.w-group-t { font: 400 13.5px/1.5 var(--sans); color: var(--mist); }
.w-head { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.w-head-text { display: flex; flex-direction: column; gap: 18px; }
.w-head .w-all { flex-shrink: 0; }
@container (min-width: 760px) { .w-head { flex-direction: row; justify-content: space-between; align-items: flex-end; gap: 32px; } }
.w-picks { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (min-width: 700px) { .w-picks { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.w-pick { display: flex; flex-direction: column; gap: 6px; color: var(--foam); }
.w-pic { display: block; aspect-ratio: 1; padding: 14px; border-radius: 12px; background: var(--foam); overflow: hidden; }
.w-pic img { display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.w-name { margin-top: 4px; font: 400 15px/1.3 var(--serif); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.w-shelf { font: 400 12px/1.2 var(--sans); color: var(--mist); }
.w-pick:hover .w-name { color: var(--sea); }
.w-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.w-pills .pill { height: 36px; padding: 0 14px; font-size: 13px; }
.w-all-short { display: none; }
@media (max-width: 359px) { .w-all-long { display: none; } .w-all-short { display: inline; } }
.w-reflist { list-style: none; margin: 0; padding: 0; width: 100%; container-type: inline-size; }
.w-reflist li[hidden] { display: none; }
.w-ref { display: grid; grid-template-areas: "area" "name" "desc" "perk"; gap: 4px; padding: 14px 0; border-top: 1px solid var(--line); color: var(--foam); }
.w-area { grid-area: area; } .w-rname { grid-area: name; } .w-perk, .w-perks { grid-area: perk; }
/* a referral code the link doesn't carry: a dashed chip beside the perk, like a coupon */
.w-perks { justify-self: start; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.w-code { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; border: 1px dashed rgba(238, 244, 246, .3); font: 500 12px/1.1 var(--sans); color: var(--mist); }
.w-code b { font: 500 12.5px/1.1 var(--mono); letter-spacing: .04em; color: var(--foam); }
.w-rdesc { grid-area: desc; margin: 2px 0 4px; font: 400 14px/1.5 var(--sans); color: var(--mist); }
/* an Amazon referral's Associates line: a quiet aside under the description, not a second pitch */
.w-rnote { display: block; margin-top: 6px; font: italic 400 13.5px/1.45 var(--serif); color: var(--mist); opacity: .85; }
/* a wide card: what the site is, beside the name. The empty 1fr rows above and below take up
   the slack when the description is the taller side (Amazon's Associates line), so the name and
   the perk keep their own height instead of stretching to it */
@container (min-width: 520px) {
  .w-ref { grid-template-columns: minmax(0, 13.5rem) minmax(0, 1fr); grid-template-rows: 1fr auto auto auto 1fr; grid-template-areas: ". desc" "area desc" "name desc" "perk desc" ". desc"; column-gap: 28px; row-gap: 0; }
  .w-rname, .w-perk, .w-perks { margin-top: 4px; }
  .w-perks .w-perk { margin-top: 0; }
  .w-rdesc { align-self: center; margin: 0; }
}
.w-reflist { border-bottom: 1px solid var(--line); }
/* the referrals' pager: under the list, at its right; the line between the arrows says where you are */
.w-pfoot { width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 20px; }
.w-pfoot[hidden], .w-pager[hidden] { display: none; }
/* "Show 3 · 5": how many at a time, the pressed one Foam on a Tide track */
.w-per { display: flex; align-items: center; gap: 10px; }
.w-per-l { font: 400 13px/1 var(--mono); color: var(--mist); }
.w-seg { display: inline-flex; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--tide); }
.w-seg button { min-width: 38px; margin: 0; padding: 7px 12px; border: 0; border-radius: 999px; background: none; font: 500 13px/1 var(--sans); color: var(--mist); cursor: pointer; transition: color .15s, background-color .15s; }
.w-seg button:hover { color: var(--foam); }
.w-seg button[aria-pressed="true"] { background: var(--foam); color: var(--abyss); cursor: default; }
.w-seg button:focus-visible { outline-offset: 1px; border-radius: 999px; }
.w-pager { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.pg-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: var(--tide); color: var(--foam); cursor: pointer; transition: border-color .15s, color .15s; }
.pg-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pg-btn:hover:not(:disabled) { border-color: var(--sea); color: var(--sea); }
.pg-btn:disabled { opacity: .35; cursor: default; }
.pg-n { font: 400 13px/1 var(--mono); color: var(--mist); white-space: nowrap; }
.pg-n b { font-weight: 400; color: var(--foam); }
.w-area { font: 600 11px/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--amber); }
.w-rname { display: flex; align-items: center; gap: 8px; font: 400 20px/1.2 var(--serif); }
.w-rname .i-arrow { width: 11px; height: 11px; color: var(--mist); }
.w-ref:hover .w-rname, .w-ref:hover .w-rname .i-arrow { color: var(--sea); }
/* the perk: a soft chip (Tide), the same look as the Developer page's plain chips */
.w-perk { justify-self: start; display: inline-flex; align-items: center; padding: 5px 11px; border-radius: 999px; background: var(--tide); font: 500 13px/1.1 var(--sans); color: var(--foam); }
.w-refs .wmore { margin-top: 0; }
/* /recommendations/#pick-…: the pick the home page pointed at */
.pick.is-target .pick-card { border-radius: 12px; box-shadow: 0 0 0 1px var(--sea), 0 0 0 6px color-mix(in srgb, var(--sea) 14%, transparent); }

/* =====================================================================
   A DISH'S VIDEOS (`videos:` in content/table/<slug>.md): Watch rows under
   the notes, on the dish page and in the pop-up. Each one links out to its
   own site; nothing plays here.
   ===================================================================== */
.watch-sec { margin-top: 24px; }
.watch-sec .ingr-h { display: block; margin-bottom: 12px; }
.watch { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.watch li[hidden] { display: none; }
.wrow { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 10px 14px 10px 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--deep); color: var(--foam); }
.wrow:hover { border-color: var(--sea); box-shadow: inset 0 0 0 1px var(--sea); color: var(--foam); }
.wp { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(238, 244, 246, .08); }
.wp .i-play { width: 12px; height: 12px; fill: currentColor; margin-left: 2px; }
.wt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.wt b { font: 400 17px/1.25 var(--serif); }
.wt small { font: 400 13px/1.25 var(--sans); color: var(--mist); }
.wrow .i-arrow { color: var(--mist); }
.wrow:hover .i-arrow { color: var(--sea); }
.wmore { margin-top: 12px; }

/* =====================================================================
   THE GMAIL SIGNATURE (/signature/, Pages.cs BuildSignature): Cengiz's own page, unlisted. The
   signature sits on white, the way it will look in an email; its colors are inline in the
   markup (all Gmail keeps), so nothing here may style it. Copy, then the steps.
   ===================================================================== */
.sig { max-width: 760px; padding-bottom: clamp(56px, 40px + 4vw, 112px); }
.sig-paper { padding: clamp(24px, 20px + 1vw, 36px); border-radius: 18px; background: #fff; color: #0b1a24; overflow-x: auto; }
.sig-act { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 24px 0 36px; }
.sig-status { font: 600 14px/1.4 var(--sans); color: var(--sea); }
.sig-steps { margin: 0; padding-left: 22px; font: 400 16px/1.6 var(--sans); color: var(--body); }
.sig-steps li { margin-bottom: 10px; padding-left: 4px; }
.sig-steps li::marker { color: var(--amber); font-weight: 600; }
.sig-steps b, .sig-steps strong { color: var(--foam); font-weight: 600; }

/* =====================================================================
   THE GYM (/gym/, /gym/<slug>/ and its home shelf; Gym.cs, gym.js, the workout in main.js).
   Kit parts reused: note cards (.ncard), the filter row and the Table's second row (.pill-2, solid
   white when on), the switch (.g-seg, the same as Show 3 | All), small pills (.pill-sm, solid white
   when pressed: a locked muscle; a card's "Added" badge wears the same white), round buttons
   (.pg-btn), alerts (the medical notice, as on Recommendations), Amber buttons.
   The Gym's own: the stage (the figure's dark floor), the − + steppers, and three muscle colors
   used nowhere else, strongest first. Good and bad on the figure are Seaglass and Coral.
   ===================================================================== */
:root { --m1: #F2545B; --m2: #F7C948; --m3: #7C8CFF; }
html:not(.js) .js-only { display: none !important; }
/* the stage: the figure's floor, behind a transparent picture or the live figure */
.gstage { position: relative; display: block; overflow: hidden; background: radial-gradient(ellipse 72% 62% at 50% 76%, #173246, var(--deep) 72%); }
.gstage img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* the switch: one definition with the referrals' Show 3 | All */
.g-seg { display: inline-flex; flex-wrap: wrap; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--tide); }
.g-seg button { min-width: 38px; margin: 0; padding: 7px 12px; border: 0; border-radius: 999px; background: none; font: 500 13px/1 var(--sans); color: var(--mist); cursor: pointer; transition: color .15s, background-color .15s; }
.g-seg button:hover { color: var(--foam); }
.g-seg button[aria-pressed="true"] { background: var(--foam); color: var(--abyss); cursor: default; }
.g-seg button:disabled { opacity: .35; cursor: default; text-decoration: line-through; }

/* ---- /gym/: the cards, five to a row on a wide screen (two on a phone) ---- */
.gcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .gcards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 960px) { .gcards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .gcards { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.gcard { gap: 6px; padding: 16px 16px 18px; scroll-margin-top: 96px; }
/* the picture lets a click through to the card's link */
.gcard-pic { margin: -16px -16px 8px; aspect-ratio: 16 / 11; border-radius: 12px 12px 0 0; pointer-events: none; }
.gcard .ncard-title { font-size: clamp(19px, 18px + .25vw, 22px); line-height: 1.2; }
.gcard-mus { font: 400 13.5px/1.45 var(--sans); color: var(--body); }
/* the equipment on the left, Add on the right (on its own line, still right, when the card is narrow) */
.gcard-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 8px; }
.gcard-eq { font: 500 12.5px/1.35 var(--sans); color: var(--mist); }
.gcard-add { position: relative; z-index: 2; margin-left: auto; height: 32px; white-space: nowrap; }
/* how many times the move is in the workout: the selected state (solid white) */
.gcard-in { position: absolute; top: 8px; right: 8px; display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border-radius: 999px; background: var(--foam); color: var(--abyss); font: 600 12px/1 var(--sans); white-space: nowrap; }
.gcard-in svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gcard-in[hidden] { display: none; }
@media (max-width: 639px) { .gcard { padding: 12px 12px 14px; } .gcard-pic { margin: -12px -12px 6px; } .gcard-in { top: 6px; right: 6px; padding: 5px 8px; font-size: 11px; } }
.gym-h { margin: 0 0 clamp(18px, 14px + 1vw, 26px); font-size: clamp(30px, 24px + 1.5vw, 44px); font-weight: 300; letter-spacing: -.02em; line-height: 1.05; }
.gym-shown { margin-left: auto; font: 500 13px/1 var(--sans); color: var(--mist); white-space: nowrap; }
/* a move's medical notice, boxed like the Recommendations' health ones, just under the figure */
.gym-notices .alert { margin: 0; }
.gym-notices .alert p { font-size: clamp(16px, 15.63px + .095vw, 17px); line-height: 1.6; color: var(--body); }
.gym-notices .alert b, .gmove-panel .alert b { color: var(--foam); font-weight: 600; }
.gym { padding-bottom: clamp(72px, 51.20px + 5.333vw, 128px); }
@media (max-width: 899px) { .gym-shown { margin-left: 0; } }

/* ---- /gym/: the workout (only with the script; it lives in the page's address) ---- */
.workout { margin-bottom: clamp(40px, 28px + 3vw, 72px); padding: clamp(18px, 12px + 1.5vw, 30px); border-radius: 18px; border: 1px solid var(--line); background: linear-gradient(135deg, var(--tide), var(--deep)); }
.wk-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 18px; }
.wk-head .eyebrow { margin-bottom: 6px; }
.wk-head h2 { font-size: clamp(30px, 24px + 1.5vw, 44px); font-weight: 300; letter-spacing: -.02em; line-height: 1.05; }
.wk-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.wk-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.wk-row { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto auto; grid-template-areas: "pic main dose x" "pic opts dose x"; align-items: center; gap: 0 18px; padding: 10px 14px 10px 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--deep); }
.wk-pic { grid-area: pic; width: 76px; aspect-ratio: 16 / 11; border-radius: 8px; }
.wk-main { grid-area: main; align-self: end; }
.wk-row:not(:has(.wk-opts)) .wk-main { grid-row: 1 / span 2; align-self: center; }
.wk-dose { grid-area: dose; }
.wk-row > .pg-btn { grid-area: x; }
.wk-name { display: block; font: 400 19px/1.2 var(--serif); color: var(--foam); }
.wk-name:hover { color: var(--sea); }
.wk-sub { display: block; margin-top: 4px; font: 500 12.5px/1.3 var(--sans); color: var(--mist); }
.wk-opts { grid-area: opts; align-self: start; display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; }
.wk-opt { display: inline-flex; align-items: center; gap: 8px; }
.wk-opt > span { font: 600 10px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--mist); }
.wk-opt .g-seg button { padding: 6px 11px; font-size: 12px; }
.wk-dose { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; }
.wk-x { font: 500 13px/1 var(--mono); color: var(--mist); }
.wk-num { display: inline-flex; align-items: center; gap: 6px; padding: 3px; border-radius: 999px; border: 1px solid var(--hair-2); }
.wk-num button { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: var(--tide); color: var(--foam); font: 500 15px/1 var(--sans); cursor: pointer; transition: border-color .15s, color .15s; }
.wk-num button:hover:not(:disabled) { border-color: var(--sea); color: var(--sea); }
.wk-num button:disabled { opacity: .35; cursor: default; }
.wk-num output { min-width: 24px; text-align: center; font: 400 14px/1 var(--mono); color: var(--foam); }
.wk-num small { margin-right: 6px; font: 500 11px/1 var(--sans); color: var(--mist); }
.wk-row > .pg-btn { width: 34px; height: 34px; }
.wk-empty { margin: 4px 0 0; }
/* the workout by body area: the area's name as on the cards, then its moves and sets */
.wk-groups { gap: clamp(18px, 14px + 1vw, 26px); }
.wk-group { display: grid; gap: 10px; }
.wk-group-h { display: flex; align-items: baseline; gap: 12px; margin: 0; font: 600 12px/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--amber); }
.wk-group-h span { font: 500 12.5px/1.3 var(--sans); letter-spacing: 0; text-transform: none; color: var(--mist); }
.wk-note { margin-top: 16px; font: 400 13px/1.5 var(--sans); color: var(--mist); }
@media (max-width: 899px) {
  .wk-row { grid-template-columns: 64px minmax(0, 1fr) auto; grid-template-areas: "pic main x" "opts opts opts" "dose dose dose"; row-gap: 12px; }
  .wk-pic { width: 64px; }
  .wk-row .wk-main, .wk-row:not(:has(.wk-opts)) .wk-main { grid-row: auto; align-self: center; }
  .wk-opts { margin-top: 0; }
  .wk-dose { justify-content: flex-start; }
  .wk-opt { flex-wrap: wrap; gap: 5px; }
  .wk-opt > span { flex-basis: 100%; }
}

/* ---- a move's page ---- */
.gmove { padding-top: clamp(32px, 11.20px + 5.333vw, 72px); padding-bottom: clamp(72px, 51.20px + 5.333vw, 128px); }
/* the head follows a note's: crumbs, the name at a note title's size, and its other names as the dek
   (.note-dek), at a note's spacing */
.gmove-title { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 32px; margin: clamp(16px, 13.77px + .571vw, 22px) 0 clamp(20px, 16px + 1vw, 28px); }
.gmove-title > div:first-child { display: flex; flex-direction: column; gap: clamp(16px, 13.77px + .571vw, 22px); }
.gmove h1 { max-width: 1200px; font-size: clamp(48px, 27.20px + 5.333vw, 104px); font-weight: 300; letter-spacing: -.035em; line-height: .98; }
/* Before you start: the move's tempo and equipment as the Bazaar's fact chips */
.mp-card .facts { margin-top: 12px; }
.gmove-main { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 20px; align-items: start; }
/* the figure and its notice stay pinned together while the panel scrolls; the figure takes what
   the notice leaves */
.gmove-side { position: sticky; top: calc(var(--nav-h) + 12px); display: flex; flex-direction: column; gap: 20px; height: min(calc(100vh - var(--nav-h) - 24px), 880px); min-height: 600px; }
.gmove-stage { flex: 1 1 auto; min-height: 400px; border-radius: 18px; border: 1px solid var(--line); }
.gym-notices { flex: none; }
.gstage-still { position: absolute; inset: 0; }
.gmove-stage.is-ready .gstage-still { display: none; }
.gstage-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.gstage-msg { position: absolute; left: 50%; bottom: 72px; transform: translateX(-50%); padding: 6px 12px; border-radius: 999px; background: rgba(6,16,25,.75); font: 500 12.5px/1.3 var(--sans); color: var(--mist); text-align: center; }
.gmarks { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.gmk { position: absolute; left: 0; top: 0; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; border: 2.5px solid currentColor; background: color-mix(in srgb, currentColor 18%, transparent); }
.glab { position: absolute; left: 0; top: 0; white-space: nowrap; padding: 4px 10px; border-radius: 999px; font: 600 11.5px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.gmk.good { color: var(--seaglass); } .gmk.bad { color: var(--coral); }
.glab.good { background: var(--seaglass); color: var(--abyss); } .glab.bad { background: var(--coral); color: var(--abyss); }
.g-glass { background: rgba(11, 27, 40, .82); backdrop-filter: blur(6px); }
.ghud-top { position: absolute; top: 12px; left: 12px; right: 12px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 8px; pointer-events: none; }
.ghud-top > * { pointer-events: auto; }
.gstatus { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; margin-left: auto; }
.gstat { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; font: 600 12.5px/1 var(--sans); }
.gstat svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.gstat.good { color: var(--seaglass); background: color-mix(in srgb, var(--seaglass) 16%, var(--abyss)); }
.gstat.bad { color: var(--coral); background: color-mix(in srgb, var(--coral) 16%, var(--abyss)); }
.gchip { position: absolute; padding: 5px 11px; border-radius: 999px; background: rgba(11, 27, 40, .82); font: 500 12px/1.3 var(--sans); color: var(--mist); pointer-events: none; white-space: nowrap; }
.gpos { left: 12px; top: 60px; }
.glegend { left: 12px; bottom: 66px; }
.ghint { left: 50%; bottom: 66px; transform: translateX(-50%); transition: opacity .6s; }
.ghud-bottom { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 14px; background: rgba(11, 27, 40, .82); backdrop-filter: blur(6px); }
.gplay { flex: none; width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: var(--foam); color: var(--abyss); cursor: pointer; }
.gplay:hover { background: var(--sea); }
.gplay svg { width: 15px; height: 15px; fill: currentColor; }
.gtl { flex: 1; min-width: 0; display: flex; gap: 3px; height: 36px; }
.gtl button { position: relative; overflow: hidden; min-width: 0; padding: 0 4px; border: 0; border-radius: 8px; background: var(--tide); font: 500 12px/1 var(--sans); color: var(--mist); white-space: nowrap; cursor: pointer; }
.gtl button::before { content: ""; position: absolute; inset: 0; width: calc(var(--pr, 0) * 100%); background: color-mix(in srgb, var(--sea) 22%, transparent); }
.gtl button.now { color: var(--foam); }
.gtl button span, .gtl button em { position: relative; }
.gtl button em { margin-left: 4px; font: 400 11px/1 var(--mono); font-style: normal; color: var(--mist); }
.gspeed { flex: none; height: 36px; min-width: 46px; border: 1px solid var(--line); border-radius: 10px; background: transparent; font: 400 13px/1 var(--mono); color: var(--foam); cursor: pointer; }
.gspeed:hover { border-color: var(--sea); color: var(--sea); }
.gmove-stage:not(.is-live) > :not(.gstage-still) { display: none; }
/* the panel */
.gmove-panel { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.gmove-panel .alert { margin: 0; }
.gmove-panel .alert p { font: 400 15px/1.55 var(--sans); color: var(--body); }
.mp-card { padding: clamp(18px, 16px + .5vw, 22px); border-radius: 12px; border: 1px solid var(--line); background: var(--deep); }
.mp-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.mp-h { font: 600 12px/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--amber); }
.mp-h2 { margin-top: 20px; }
.mp-sub { margin: 6px 0 12px; font: 400 13.5px/1.5 var(--sans); color: var(--mist); }
.mp-card .g-seg { margin: 4px 0 12px; }
.opt-list { margin: 0; display: grid; gap: 10px; }
.opt-list > div[hidden] { display: none; }
.opt-list dt { font: 600 14px/1.3 var(--sans); color: var(--foam); }
.opt-list dt span { margin-left: 6px; font-weight: 500; color: var(--mist); }
.opt-list dd { margin: 4px 0 0; font: 400 15px/1.55 var(--sans); color: var(--body); }
.mtiers { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.mtier-h { display: flex; align-items: baseline; gap: 8px; font: 400 12.5px/1.3 var(--sans); color: var(--mist); }
.mtier-h b { font: 600 11px/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--mist); }
.mchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.mchip { display: inline-flex; align-items: center; gap: 9px; padding: 7px 12px 7px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--tide); color: var(--foam); text-align: left; font: 500 14px/1.2 var(--sans); cursor: pointer; transition: border-color .15s; }
.mchip small { display: block; margin-top: 2px; font: 400 11.5px/1.2 var(--sans); color: var(--mist); }
.mchip:hover { border-color: var(--sea); }
.mchip[aria-pressed="true"] { background: var(--foam); border-color: var(--foam); color: var(--abyss); }
.mchip[aria-pressed="true"] small { color: rgba(6,16,25,.6); }
.msw { width: 12px; height: 12px; flex: none; border-radius: 4px; }
.msw.t1 { background: var(--m1); } .msw.t2 { background: var(--m2); } .msw.t3 { background: var(--m3); }
.cues { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cue-b { width: 100%; display: grid; grid-template-columns: 28px minmax(0, 1fr) 18px; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--tide); color: var(--foam); text-align: left; cursor: pointer; transition: border-color .15s; }
.cue-b:hover { border-color: var(--sea); }
.cue-ic { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; }
.cue-ic svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cue.do .cue-ic { color: var(--seaglass); background: color-mix(in srgb, var(--seaglass) 14%, transparent); }
.cue.dont .cue-ic { color: var(--coral); background: color-mix(in srgb, var(--coral) 14%, transparent); }
.cue-t { display: block; font: 500 14.5px/1.35 var(--sans); }
.cue-term { display: block; margin-top: 3px; font: 400 12px/1.3 var(--sans); color: var(--mist); }
.cue-chev { width: 18px; height: 18px; fill: none; stroke: var(--mist); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
html:not(.js) .cue-chev { display: none; }
.cue.do .cue-b[aria-expanded="true"] { border-color: var(--seaglass); }
.cue.dont .cue-b[aria-expanded="true"] { border-color: var(--coral); }
.cue-b[aria-expanded="true"] .cue-chev { transform: rotate(90deg); }
.cue-d { display: grid; gap: 8px; margin: 8px 4px 8px 52px; font: 400 14.5px/1.55 var(--sans); color: var(--body); }
.cue-d[hidden] { display: none; }
.cue-k { display: block; font: 600 11px/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--mist); }
.cue-fix { padding: 8px 12px; border-radius: 10px; background: color-mix(in srgb, var(--seaglass) 10%, transparent); }
.cue-fix .cue-k { color: var(--seaglass); }
@media (max-width: 899px) {
  .gmove-main { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  /* a phone: the figure alone stays pinned; the notice follows it, then the panel */
  .gmove-side { display: contents; }
  .gmove-stage { position: sticky; top: var(--nav-h); height: 52svh; min-height: 330px; border-radius: 14px; }
  /* a phone: each moment's seconds under its name (the tempo lives only here) */
  .gtl button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 0 2px; }
  .gtl button em { margin-left: 0; font-size: 10px; }
  .ghud-top .g-seg button { padding: 6px 9px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .cue-chev, .ghint { transition: none; } }

/* ---- the home shelf: ten moves, each to its page ---- */
.gtiles { display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto); grid-auto-columns: 200px; gap: 22px 12px; overflow-x: auto; padding-right: 24px; scrollbar-width: none; scroll-snap-type: x mandatory; }
.gtiles::-webkit-scrollbar { display: none; }
.gtile { scroll-snap-align: start; display: flex; flex-direction: column; gap: 8px; color: var(--foam); }
.gtile-pic { aspect-ratio: 16 / 11; border-radius: 12px; border: 1px solid var(--line); transition: border-color .15s; }
.gtile:hover .gtile-pic { border-color: var(--sea); }
.gtile:hover .gtile-name { color: var(--sea); }
.gtile-name { font-size: 16px; line-height: 1.25; transition: color .15s; }
.gtile-sub { margin-top: -4px; font: 500 12px/1.3 var(--sans); color: var(--mist); }
@media (min-width: 900px) {
  .gtiles { grid-auto-flow: row; grid-template-rows: none; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 30px 20px; overflow: visible; padding: 0; }
  .gtile-name { font-size: 17px; }
}