/* ChoreHacks home v3 — MOCKUP ONLY (Isabella, 2026-10-23). Not for the live site. Follows good-css. */

@font-face { font-family: "Fraunces"; src: url("/home-v6/fonts/fraunces.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Atkinson"; src: url("/home-v6/fonts/atkinson-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Atkinson"; src: url("/home-v6/fonts/atkinson-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url("/home-v6/fonts/courierprime-CourierPrime-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url("/home-v6/fonts/courierprime-CourierPrime-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Permanent Marker"; src: url("/home-v6/fonts/permanentmarker-PermanentMarker-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }

/* ---------- reset (good-css foundations) ---------- */
*, *::before, *::after { box-sizing: border-box; min-width: 0; }
:root {
  interpolate-size: allow-keywords;
  scrollbar-gutter: stable;
  text-wrap: pretty;
  overflow-wrap: break-word;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}
body { margin: 0; min-height: 100svh; }
h1, h2, h3, h4 { text-wrap: balance; margin: 0; }
p { margin: 0; }
img, svg { display: block; max-width: 100%; height: auto; }
input, textarea, select { font-size: max(16px, 1rem); }
button, a, [role="button"] { touch-action: manipulation; }
button { user-select: none; -webkit-user-select: none; font: inherit; color: inherit; }
html:has(dialog:modal) { overflow: hidden; }
html { scroll-padding-block-start: var(--bar-h); overscroll-behavior-y: none; }
@media (any-pointer: coarse) { html { overscroll-behavior-y: auto; } }

/* ---------- tokens ---------- */
:root {
  color-scheme: light;
  /* brand kit (logo-final/spec.md, brand-sheet.png) */
  --paper: oklch(98.5% 0.004 95);       /* #fbfaf7 */
  --card: oklch(100% 0 none);
  --ink: oklch(20% 0.012 60);           /* #1a1511 */
  --pencil: oklch(44% 0.01 70);
  --tomato: oklch(52% 0.19 32);         /* tick red, button fill */
  --on-tomato: oklch(98% 0.005 85);
  --sage: oklch(86% 0.035 150);         /* #c2d8c5 the note */
  --sage-fold: oklch(80% 0.04 150);     /* #a6c4ac fold shade */
  --sage-deep: oklch(47% 0.05 150);     /* #47634c, white on it 6.65:1 */
  --sage-wash: color-mix(in oklch, var(--sage) 35%, var(--paper));
  --rule: 1.5px solid var(--ink);
  --tap: max(48px, 3rem);
  --bar-h: 4.25rem;
  --radius: 3px;

  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Atkinson", system-ui, sans-serif;
  --font-type: "Courier Prime", ui-monospace, monospace;
  --font-hand: "Permanent Marker", "Comic Sans MS", cursive;

  /* one fluid scale */
  --step-0: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-1: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --step-2: clamp(1.5rem, 1.25rem + 1.1vw, 2.125rem);
  --step-3: clamp(2.375rem, 1.6rem + 3.6vw, 4.5rem);
  --space-s: clamp(0.75rem, 0.65rem + 0.4vw, 1rem);
  --space-m: clamp(1.25rem, 1rem + 1vw, 2rem);
  --space-l: clamp(2rem, 1.4rem + 2.6vw, 3.75rem);
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

body { background: var(--paper); color: var(--ink); font: 400 var(--step-0) / 1.5 var(--font-body); }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1.5px; }
:focus-visible { outline: max(2px, 0.08em) solid var(--tomato); outline-offset: 0.2em; }
.visually-hidden { position: absolute; inline-size: 1px; block-size: 1px; overflow: clip; clip-path: inset(50%); white-space: nowrap; }

.wrap { inline-size: min(100% - 2 * var(--gutter), 76rem); margin-inline: auto; }
header, main, footer { container-type: inline-size; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  min-block-size: var(--tap); padding-inline: 1.15rem;
  border: var(--rule); border-radius: var(--radius);
  background: var(--card); color: var(--ink);
  font: 700 1rem / 1.1 var(--font-body); text-decoration: none; cursor: pointer;
}
.btn-primary { background: var(--tomato); border-color: var(--tomato); color: var(--on-tomato); }
.btn-primary:focus-visible { outline-color: var(--ink); }
.btn-ink { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn:active { transform: scale(0.97); }
@media (prefers-reduced-motion: no-preference) {
  .btn { transition: transform 140ms var(--ease-out), background-color 140ms var(--ease-out); }
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: color-mix(in oklch, var(--sage) 45%, var(--card)); }
  .btn-primary:hover { background: color-mix(in oklch, var(--tomato) 88%, black); }
  .btn-ink:hover { background: color-mix(in oklch, var(--ink) 85%, white); }
}

/* ---------- header ---------- */
.topbar { display: flex; align-items: center; gap: var(--space-s); padding-block: 0.75rem; border-block-end: var(--rule); }
.brand { margin-inline-end: auto; line-height: 0; }
.brand a { display: inline-flex; align-items: center; min-block-size: var(--tap); }
/* logo sized by height; the 1.5° tilt lives in the SVG — never rotate it here */
.brand img { block-size: clamp(2.75rem, 2.2rem + 1.6vw, 3.75rem); inline-size: auto; }
.brand .icon { display: none; }
.navlinks { display: flex; gap: 0 1.25rem; font-weight: 700; }
.navlinks a { display: inline-flex; align-items: center; min-block-size: var(--tap); }
@container (width < 42rem) { .navlinks { display: none; } }
@container (width < 23rem) { .brand .logo { display: none; } .brand .icon { display: block; block-size: 3.25rem; } }

/* ---------- hero ---------- */
.hero { display: flex; flex-wrap: wrap; gap: var(--space-m) var(--space-l); align-items: center; padding-block: var(--space-l) var(--space-m); }
.hero-copy { flex: 1 1 26rem; display: grid; gap: var(--space-s); }
.eyebrow { font: 700 0.875rem / 1.2 var(--font-type); letter-spacing: 0.06em; text-transform: uppercase; color: var(--pencil); }
.hero h1 {
  font: 900 var(--step-3) / 0.98 var(--font-display);
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
  letter-spacing: -0.02em;
}
.hero h1 .tick { color: var(--tomato); }
.hero .lede { max-inline-size: 34rem; color: var(--pencil); font-size: var(--step-1); line-height: 1.4; }
.hero .lede strong { color: var(--ink); }
.promise { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; font-weight: 700; font-size: 1rem; }
.promise li::marker { color: var(--tomato); }
.promise { padding: 0; list-style: none; }
.promise li { display: inline-flex; gap: 0.4em; align-items: center; }
.promise li::before { content: "✓"; color: var(--tomato); font-weight: 700; }

/* ---------- sticky-note card (sage, folded bottom-right, no tape, no shadow-gloss) ---------- */
.note {
  --fold: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
  position: relative;
  background: var(--sage);
  color: var(--ink);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--fold)), calc(100% - var(--fold)) 100%, 0 100%);
}
.note::after {
  content: ""; position: absolute; inset-inline-end: 0; inset-block-end: 0;
  inline-size: var(--fold); block-size: var(--fold);
  background: linear-gradient(to bottom right, var(--sage-fold) 50%, transparent 50%);
  pointer-events: none;
}

/* ---------- daily email card ---------- */
.daily { flex: 1 1 22rem; max-inline-size: 30rem; padding: var(--space-m); padding-block-end: calc(var(--space-m) + 0.75rem); display: grid; gap: 0.85rem; }
.daily h2 { font: 800 var(--step-2) / 1.05 var(--font-display); font-variation-settings: "SOFT" 100, "WONK" 1; }
.daily .sub { font-size: 1rem; }
.signup { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.signup input[type="email"] {
  flex: 1 1 13rem; min-block-size: var(--tap); padding-inline: 0.9rem;
  border: var(--rule); border-radius: var(--radius); background: var(--card); color: var(--ink); font-family: var(--font-body);
}
.signup input[type="email"]:user-invalid { border-color: var(--tomato); }
.signup .btn { flex: 0 0 auto; }
.hp { position: absolute; inset-inline-start: -100vw; }
.hand { font: 400 1.0625rem / 1.25 var(--font-hand); color: var(--sage-deep); }
.daily .hand { color: var(--ink); }

/* ---------- sticky category bar ---------- */
.catbar {
  position: sticky; inset-block-start: 0; z-index: 5;
  background: color-mix(in oklch, var(--paper) 94%, transparent);
  backdrop-filter: blur(6px);
  border-block: var(--rule);
}
.catbar .wrap { display: flex; align-items: center; gap: 0.75rem; min-block-size: var(--bar-h); }
.catbar .mini { flex: none; line-height: 0; }
.catbar .mini img { inline-size: 2.5rem; }
.chips {
  --fade-start: 0px; --fade-end: 0px;
  display: flex; gap: 0.5rem; margin: 0; padding: 0.5rem 0.125rem; list-style: none;
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
  scroll-snap-type: x proximity;
  animation: edges linear; animation-timeline: scroll(self inline);
  mask-image: linear-gradient(to right, transparent, #000 var(--fade-start), #000 calc(100% - var(--fade-end)), transparent);
}
.chips::-webkit-scrollbar { display: none; }
@property --fade-start { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --fade-end { syntax: "<length>"; inherits: false; initial-value: 0px; }
@keyframes edges { from { --fade-start: 0px; --fade-end: 2.5rem; } 10%, 90% { --fade-start: 2.5rem; --fade-end: 2.5rem; } to { --fade-start: 2.5rem; --fade-end: 0px; } }
.chips li { flex: none; scroll-snap-align: start; }
.chip {
  display: inline-flex; align-items: center; gap: 0.45em;
  min-block-size: var(--tap); padding-inline: 1rem;
  border: var(--rule); border-radius: 999px; background: var(--card);
  font-weight: 700; font-size: 1rem; text-decoration: none; white-space: nowrap;
}
.chip .n { font: 400 0.875rem / 1 var(--font-type); color: var(--pencil); }
.chip[aria-current="page"] { background: var(--sage-deep); border-color: var(--sage-deep); color: var(--card); }
.chip[aria-current="page"] .n { color: color-mix(in oklch, var(--card) 85%, var(--sage-deep)); }
.chip:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .chip:not([aria-current]):hover { background: var(--sage-wash); } }
@media (prefers-reduced-motion: no-preference) { .chip { transition: transform 140ms var(--ease-out), background-color 140ms var(--ease-out); } }

/* ---------- list tools: search + top/new ---------- */
.tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem var(--space-m); padding-block: var(--space-m) var(--space-s); }
.tools h2 { font: 800 var(--step-2) / 1.05 var(--font-display); font-variation-settings: "SOFT" 100, "WONK" 1; margin-inline-end: auto; }
.search { display: flex; flex: 1 1 18rem; max-inline-size: 26rem; }
.search input { flex: 1; min-block-size: var(--tap); padding-inline: 0.9rem; border: var(--rule); border-inline-end: 0; border-radius: var(--radius) 0 0 var(--radius); background: var(--card); font-family: var(--font-body); }
.search .btn { border-radius: 0 var(--radius) var(--radius) 0; }
.toggle { display: inline-flex; border: var(--rule); border-radius: 999px; padding: 3px; background: var(--card); }
.toggle button { min-block-size: calc(var(--tap) - 6px); padding-inline: 1rem; border: 0; border-radius: 999px; background: none; font-weight: 700; font-size: 1rem; cursor: pointer; }
.toggle button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.toggle button:active { transform: scale(0.97); }
.updated { flex-basis: 100%; font: 400 0.9375rem / 1.3 var(--font-type); color: var(--pencil); }
.example-tag { font: 700 0.75rem / 1 var(--font-body); letter-spacing: 0.05em; text-transform: uppercase; border: 1.5px dashed currentColor; padding: 0.2em 0.45em; border-radius: 2px; margin-inline-start: 0.4em; }

/* ---------- cards ---------- */
.grid { display: grid; gap: var(--space-s); grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); padding-block-end: var(--space-l); margin: 0; padding-inline: 0; list-style: none; }
.card {
  position: relative; display: flex; flex-direction: column; gap: 0.6rem;
  padding: 1.1rem 1.15rem 0.9rem; background: var(--card); border: var(--rule); border-radius: var(--radius);
}
.card .cat { font: 700 0.875rem / 1.2 var(--font-type); text-transform: uppercase; letter-spacing: 0.04em; color: var(--sage-deep); }
.card .cat a { position: relative; z-index: 1; text-decoration: none; display: inline-flex; align-items: center; min-block-size: 2rem; }
.card h3 { font: 700 var(--step-1) / 1.15 var(--font-display); font-variation-settings: "SOFT" 100, "WONK" 0, "opsz" 48; }
.card-link { text-decoration: none; }
.card-link::after { content: ""; position: absolute; inset: 0; }
.card-link:focus-visible { outline: 2px solid transparent; }
.card:has(.card-link:focus-visible) { outline: 3px solid var(--tomato); outline-offset: 2px; }
.card :is(button, a:not(.card-link)) { position: relative; z-index: 1; }
.card .desc { color: var(--pencil); font-size: 1rem; }
.card .row { display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; margin-block-start: auto; padding-block-start: 0.5rem; border-block-start: 2px dotted color-mix(in oklch, var(--pencil) 50%, transparent); }
.act {
  display: inline-flex; align-items: center; gap: 0.4em; min-block-size: var(--tap); padding-inline: 0.6rem;
  border: 0; border-radius: var(--radius); background: none; font-weight: 700; font-size: 0.9375rem; cursor: pointer;
}
.act svg { flex: none; inline-size: 1.15em; block-size: 1.15em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.act[aria-pressed="true"] { color: var(--sage-deep); }
.act[aria-pressed="true"] svg { fill: currentColor; }
.act:active { transform: scale(0.97); }
.open-hint { margin-inline-start: auto; align-self: center; font: 400 0.9375rem / 1 var(--font-hand); color: var(--tomato); }
@media (hover: hover) and (pointer: fine) {
  .card:hover { background: color-mix(in oklch, var(--sage) 14%, var(--card)); }
  .act:hover { background: var(--sage-wash); }
}
@media (prefers-reduced-motion: no-preference) {
  .card { transition: background-color 160ms var(--ease-out); }
  .act { transition: transform 140ms var(--ease-out); }
}
.badge-new {
  position: absolute; inset-block-start: -0.7rem; inset-inline-end: 0.9rem; z-index: 1;
  padding: 0.15rem 0.6rem; background: var(--card); border: 1.5px solid var(--tomato); border-radius: 2px;
  font: 400 1rem / 1.3 var(--font-hand); color: var(--tomato);
}
.card.sponsor { border-style: dashed; background: var(--paper); }
.card.sponsor .cat { color: var(--pencil); }

/* ---------- dialog: side panel on wide screens, full-screen sheet on phones (same rule) ---------- */
.panel {
  inline-size: min(44rem, 100%); max-inline-size: 100%;
  block-size: 100dvh; max-block-size: 100dvh;
  margin-block: 0; margin-inline: auto 0; padding: 0; border: 0; border-inline-start: var(--rule);
  background: var(--paper); color: var(--ink);
  flex-direction: column;
  opacity: 0;
  transition: opacity 0.25s var(--ease-out), translate 0.3s var(--ease-out), display 0.3s allow-discrete, overlay 0.3s allow-discrete;
}
.panel[open] { display: flex; opacity: 1; }
.panel::backdrop { background: color-mix(in oklch, var(--ink) 45%, transparent); opacity: 0; transition: opacity 0.25s var(--ease-out), display 0.3s allow-discrete, overlay 0.3s allow-discrete; }
.panel[open]::backdrop { opacity: 1; }
@starting-style { .panel[open], .panel[open]::backdrop { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .panel { translate: 2rem 0; }
  .panel[open] { translate: 0 0; }
  @starting-style { .panel[open] { translate: 2rem 0; } }
}
.panel-head {
  flex: none; display: flex; align-items: center; gap: 0.5rem;
  padding: calc(0.5rem + env(safe-area-inset-top, 0px)) var(--gutter) 0.5rem; border-block-end: var(--rule); background: var(--paper);
}
.panel-head .cat { font: 700 0.875rem / 1.2 var(--font-type); text-transform: uppercase; letter-spacing: 0.04em; color: var(--sage-deep); margin-inline-end: auto; }
.panel-head .cat a { display: inline-flex; align-items: center; min-block-size: var(--tap); text-decoration: none; }
.close { inline-size: var(--tap); padding: 0; font-size: 1.5rem; }
.panel-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: var(--space-m) var(--gutter) calc(var(--space-l) + env(safe-area-inset-bottom, 0px)); display: grid; gap: var(--space-m); align-content: start; }
.panel-body > * + * { margin: 0; }
.panel h2 { font: 900 var(--step-2) / 1.05 var(--font-display); font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 96; }
.panel .desc { font-size: var(--step-1); line-height: 1.35; color: var(--pencil); }
.words { padding: var(--space-m); padding-block-end: calc(var(--space-m) + 1.25rem); display: grid; gap: 0.9rem; }
.words .label { font: 400 1.125rem / 1 var(--font-hand); color: var(--ink); }
.words pre { margin: 0; white-space: pre-wrap; font: 400 1.0625rem / 1.55 var(--font-type); }
.words mark { background: var(--card); color: var(--ink); padding: 0 0.2em; border-radius: 2px; box-decoration-break: clone; -webkit-box-decoration-break: clone; font-weight: 700; }
.words .hint { font-size: 0.9375rem; }
.copy-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.copy-row .or { font-size: 0.9375rem; color: var(--ink); }
.facts { display: grid; gap: var(--space-s); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.facts div { border-block-start: var(--rule); padding-block-start: 0.6rem; }
.facts h3 { font: 700 0.875rem / 1.2 var(--font-type); text-transform: uppercase; letter-spacing: 0.04em; margin-block-end: 0.3rem; }
.caution { border-inline-start: 4px solid var(--tomato); padding: 0.6rem 0.9rem; background: var(--card); font-size: 1rem; }
.panel .row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.fullpage { font-weight: 700; display: inline-flex; align-items: center; min-block-size: var(--tap); }

/* inline email card inside the panel: not a modal, easy to close */
.ask { display: grid; gap: 0.6rem; padding: 1rem 1.1rem; background: var(--card); border: 2px dashed var(--sage-deep); border-radius: var(--radius); }
.ask[hidden] { display: none; }
.ask .ask-head { display: flex; align-items: start; gap: 0.5rem; }
.ask h3 { font: 800 var(--step-1) / 1.15 var(--font-display); font-variation-settings: "SOFT" 100, "WONK" 1; }
.ask .ask-head > div { margin-inline-end: auto; }
.ask .x { flex: none; white-space: nowrap; min-block-size: var(--tap); padding-inline: 0.75rem; border: 0; background: none; font-weight: 700; text-decoration: underline; cursor: pointer; font-size: 0.9375rem; }
.ask .x:active { transform: scale(0.97); }

.toast { position: fixed; inset-block-end: calc(1rem + env(safe-area-inset-bottom, 0px)); inset-inline: 0; margin-inline: auto; inline-size: fit-content; padding: 0.7rem 1rem; background: var(--ink); color: var(--paper); border-radius: var(--radius); font-weight: 700; z-index: 20; }
.toast[hidden] { display: none; }

/* ---------- footer ---------- */
.site-footer { border-block-start: var(--rule); padding-block: var(--space-m); font-size: 0.9375rem; color: var(--pencil); }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; align-items: center; }
.site-footer a { display: inline-flex; align-items: center; min-block-size: var(--tap); }

/* ---------- v4: hero photo + wide Monday band ---------- */
.hero-photo { flex: 1 1 24rem; margin: 0; border: var(--rule); border-radius: var(--radius); overflow: clip; aspect-ratio: 4 / 3; }
.hero-photo img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 60% 30%; }
.band-wrap { padding-block: 0 var(--space-m); container-type: inline-size; }
.daily.band { max-inline-size: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem var(--space-l);
  padding-block: var(--space-s) calc(var(--space-s) + 0.5rem); padding-inline: var(--space-m) calc(var(--space-m) + 1.5rem); }
.band-copy { flex: 1 1 22rem; display: grid; gap: 0.35rem; }
.band .tick { color: var(--tomato); }
.band .signup { flex: 1 1 24rem; align-items: center; }
.band .signup .hand { flex-basis: 100%; margin: 0; }

/* ---------- v5: full-bleed photo hero (logo + menu + copy over the photo, down to the chips) ---------- */
.hero-bg { position: relative; isolation: isolate; overflow: clip; }
.hero-bg .hero-photo { position: absolute; inset: 0; z-index: -2; margin: 0; border: 0; border-radius: 0; aspect-ratio: auto; }
.hero-bg .hero-photo img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 72% 30%; }
/* paper scrim: solid behind the text column, clear over the girl */
.hero-bg::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to right,
    color-mix(in oklch, var(--paper) 94%, transparent) 0%,
    color-mix(in oklch, var(--paper) 88%, transparent) 34%,
    color-mix(in oklch, var(--paper) 40%, transparent) 50%,
    transparent 62%);
}
.hero-bg .topbar { border-block-end: 0; }
.hero-bg .hero { min-block-size: clamp(26rem, 52vw, 40rem); padding-block: var(--space-m) var(--space-l); }
.hero-bg .hero-copy { flex: 0 1 36rem; }
.hero-bg .lede { color: var(--ink); }
.hero-bg .navlinks a { padding-inline: 0.6rem; border-radius: var(--radius); background: color-mix(in oklch, var(--paper) 82%, transparent); }
@media (width < 52rem) {
  /* phone/tablet: text on a paper wash up top, girl shows in the lower half */
  .hero-bg .hero-photo { inset-block-start: auto; block-size: calc(clamp(16rem, 72vw, 24rem) + 4rem); }
  .hero-bg .hero-photo img { object-position: 74% 25%; mask-image: linear-gradient(to bottom, transparent, #000 22%); }
  .hero-bg { background: var(--paper); }
  .hero-bg::before { content: none; }
  .hero-bg .hero { min-block-size: 0; align-items: start; padding-block-end: clamp(16rem, 72vw, 24rem); }
}
.band-wrap { padding-block: var(--space-m); }

/* ---------- v5: card actions restored from live (thumb-up vote + open in ChatGPT / Claude / Grok) ---------- */
.card .open-in { display: grid; grid-template-columns: auto auto repeat(3, minmax(0, 1fr)); align-items: center; column-gap: 0.375rem; inline-size: 100%; }
.open-label { color: var(--pencil); font: 400 0.8125rem / 1.2 var(--font-type); white-space: nowrap; }
.apps { display: contents; margin: 0; padding: 0; list-style: none; }
.apps li { min-inline-size: 0; }
.open-in .upvote { display: grid; align-items: center; block-size: var(--tap); padding-inline-end: 0.375rem; border-inline-end: 2px dotted color-mix(in oklch, var(--pencil) 50%, transparent); }
.vote { display: grid; place-items: center; inline-size: 3.25rem; block-size: 2.5rem; padding: 0; border: 1px solid color-mix(in oklch, var(--ink) 30%, transparent); border-radius: 0.5rem; background: var(--card); color: var(--ink); cursor: pointer; }
.vote .thumb { inline-size: 1.35rem; block-size: 1.35rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.vote[aria-pressed="true"] { border-color: var(--sage-deep); background: var(--sage-deep); color: var(--on-tomato); }
.vote[aria-pressed="true"] .thumb { fill: currentColor; }
.vote:focus-visible, .app:focus-visible { outline: 3px solid var(--tomato); outline-offset: 2px; }
.vote:active { scale: 0.92; }
.app { display: grid; place-items: center; inline-size: 100%; block-size: var(--tap); border-radius: 0.5rem; }
.app .app-mark { display: grid; place-items: center; inline-size: 100%; block-size: 2.5rem; border-radius: 0.5rem; border: 1px solid color-mix(in oklch, var(--ink) 30%, transparent); }
.app svg { inline-size: 1.25rem; block-size: 1.25rem; }
.app-chatgpt svg, .app-claude svg { fill: currentColor; }
.app-chatgpt .app-mark { background: oklch(100% 0 none); color: oklch(0% 0 none); }
.app-claude .app-mark { background: oklch(97% 0.012 85); color: oklch(66% 0.13 40); }
.app-grok .app-mark { background: oklch(0% 0 none); border-color: oklch(0% 0 none); }
.app:active .app-mark { scale: 0.96; }
@container (width < 20rem) { .open-label { display: none; } .card .open-in { grid-template-columns: repeat(4, minmax(0, 1fr)); } .open-in .vote { inline-size: 100%; } }
@media (hover: hover) and (pointer: fine) {
  .vote[aria-pressed="false"]:hover { background: var(--ink); color: var(--card); }
  .app:hover .app-mark { box-shadow: 0 0 0 2px var(--ink); }
}
@media (prefers-reduced-motion: no-preference) {
  .vote { transition: scale 140ms var(--ease-out), background-color 140ms var(--ease-out); }
  .app .app-mark { transition: scale 140ms var(--ease-out), box-shadow 140ms var(--ease-out); }
}

/* ---------- v5: big-type colophon footer, ink on the contrast side ---------- */
.site-footer.colophon { margin-block-start: var(--space-l); padding-block: var(--space-l); border: 0; background: var(--ink); color: var(--paper); }
.colophon .wrap { display: grid; gap: var(--space-m); }
.colophon-line { font: 900 clamp(2.75rem, 1.4rem + 6.4vw, 7rem) / 0.95 var(--font-display); font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144; letter-spacing: -0.02em; max-inline-size: 14ch; text-wrap: balance; }
.colophon-line .tick { color: oklch(68% 0.17 32); }
.colophon .small { display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.75rem; font-size: 1rem; }
.colophon .small a { color: var(--paper); }
.colophon .sep { color: oklch(68% 0.01 70); }
.colophon-c { font: 400 0.875rem / 1.2 var(--font-type); color: oklch(78% 0.01 70); }
.card { container-type: inline-size; }

/* ---------- v6: band inside the hero, pill menu, phone hero = headline only ---------- */
.hero-bg .hero { min-block-size: clamp(20rem, 38vw, 30rem); padding-block-end: var(--space-m); }
.hero-band { padding-block: 0 var(--space-m); }
/* band over the photo: solid sage note so text never sits on the image */
.hero-band .daily.band { background: var(--sage); }
/* menu: soft pills, no tabs, no underline */
.navlinks { gap: 0 0.375rem; }
.hero-bg .navlinks a, .navlinks a {
  padding-inline: 1rem; border-radius: 999px; text-decoration: none; color: var(--ink);
  background: color-mix(in oklch, var(--paper) 90%, transparent);
  border: 1px solid color-mix(in oklch, var(--ink) 14%, transparent);
}
.navlinks a[aria-current] { background: var(--ink); color: var(--paper); }
.navlinks a:focus-visible { outline: 2px solid var(--tomato); outline-offset: 2px; }
.navlinks a:active { background: var(--sage); }
@media (hover: hover) and (pointer: fine) { .navlinks a:hover { background: var(--card); border-color: var(--ink); } }
@media (prefers-reduced-motion: no-preference) { .navlinks a { transition: background-color 140ms var(--ease-out), border-color 140ms var(--ease-out); } }

@media (width < 52rem) {
  /* phone: photo + headline only up top, everything else follows on paper */
  .hero-bg { --photo-h: clamp(24rem, 100vw, 30rem); display: grid; grid-template-columns: 100%; }
  .hero-bg .hero-photo { inset: 0 0 auto 0; block-size: var(--photo-h); }
  .hero-bg .hero-photo img { object-position: 70% 20%; mask-image: none; }
  .hero-bg::before { content: ""; inset: 0 0 auto 0; block-size: var(--photo-h);
    background: linear-gradient(to bottom, color-mix(in oklch, var(--paper) 70%, transparent) 0%, transparent 28%, transparent 52%, color-mix(in oklch, var(--paper) 92%, transparent) 82%, var(--paper) 100%); }
  .hero-bg .hero { display: block; min-block-size: 0; padding-block: 0; }
  .hero-bg .hero-copy { display: flex; flex-direction: column; gap: var(--space-s); }
  .hero-bg .hero h1 { order: -1; min-block-size: calc(var(--photo-h) - 4.5rem); display: flex; align-items: end; padding-block-end: 0.5rem; }
  .hero-bg .hero h1 .tick { display: contents; }
  .hero-band { padding-block: var(--space-m); }
}

/* Live port: cards outside the current sort (Newest / Top this week) stay in the DOM, hidden. */
.grid .card[hidden] { display: none; }