/* HyzerStack — public + admin styles.
   Single light theme by design: the dark palette was carried over from the
   mockup exploration and is not part of the MVP. */

@font-face {
  font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/static/fonts/montserrat-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/static/fonts/montserrat-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/static/fonts/montserrat-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/static/fonts/montserrat-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/static/fonts/montserrat-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/static/fonts/montserrat-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/static/fonts/montserrat-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/static/fonts/montserrat-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* One family throughout, matching the wordmark in the logo. */
  --font: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --bg: #fbfaf7;
  --surface: #ffffff;
  --surface-soft: #f6f3ec;
  --ink: #12231d;
  --ink-soft: #2c3a33;
  /* Darkened from #6e7772, which failed contrast on every surface that is
     not pure white. This passes on --bg, --surface and --surface-soft. */
  --muted: #5a655f;
  --line: #e5e1d9;
  --line-strong: #d5d1c9;
  --accent: #123e29;
  --accent-2: #1f5b3b;
  --accent-soft: #edf3ee;
  --focus: #1f5b3b;
  --danger: #8b2d2d;
  --shadow: 0 8px 24px rgba(24, 38, 30, .055);
  --shadow-hover: 0 14px 32px rgba(24, 38, 30, .09);
  --radius: 14px;
  --header-h: 78px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; color-scheme: light; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 15px/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh; display: flex; flex-direction: column;
}
main { flex: 1 0 auto; }
a { color: inherit; text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
img { max-width: 100%; display: block; }
h1, h2, h3 { line-height: 1.08; letter-spacing: -.03em; text-wrap: balance; }

.wrap { width: min(1280px, calc(100% - 72px)); margin-inline: auto; }
.narrow { width: min(760px, calc(100% - 40px)); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Focus — the stylesheet previously had no focus indicator at all, and two
   rules that removed the browser default. */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 3px;
}
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--accent); color: #fff; padding: 11px 18px;
  border-radius: 0 0 9px 9px; text-decoration: none; font-weight: 700;
  transition: top .15s ease;
}
.skip-link:focus { top: 0; }

/* Header */
.site-header {
  background: rgba(255,255,255,.96); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 30; backdrop-filter: blur(14px);
}
.header-inner {
  width: min(1320px, calc(100% - 56px)); min-height: var(--header-h);
  margin-inline: auto; display: flex; align-items: center;
  justify-content: space-between; gap: 28px;
}
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; min-width: 0; }
.brand > strong { font-size: 22px; line-height: 1; letter-spacing: -.035em; color: var(--accent); white-space: nowrap; }
.brand-mark {
  width: 34px; height: 34px; border-radius: 50%; background: var(--accent);
  color: #fff; display: grid; place-items: center; flex: 0 0 auto;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
}
.brand-mark svg { width: 21px; height: 21px; }
.brand-mark-small { width: 30px; height: 30px; }
.brand-mark-small svg { width: 18px; height: 18px; }

/* The logo lockup carries its own wordmark and tagline, so the header brand
   is the image alone; the footer pairs the basket mark with the site name. */
.brand-lockup { width: auto; height: 50px; display: block; }
.brand-mark-img { width: 30px; height: 30px; flex: 0 0 auto; }
@media (max-width: 480px) { .brand-lockup { height: 38px; } }

.main-nav { display: flex; align-items: stretch; gap: 36px; align-self: stretch; }
.main-nav a {
  display: flex; align-items: center; position: relative; text-decoration: none;
  font-weight: 650; font-size: 14px; color: #16231d; padding: 0 2px;
}
.main-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: transparent;
}
.main-nav a:hover::after, .main-nav a.active::after { background: var(--accent); }

/* The toggle only exists below the nav breakpoint. Without JS the nav stays
   visible, so no link is ever hidden without a way to reach it. */
.nav-toggle { display: none; }

/* Buttons */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 47px; border-radius: 9px; border: 1px solid transparent; padding: 0 20px;
  text-decoration: none; font-weight: 750; color: #fff; background: var(--accent);
  box-shadow: 0 2px 6px rgba(18,62,41,.12);
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.button:hover { background: var(--accent-2); transform: translateY(-1px); box-shadow: 0 6px 15px rgba(18,62,41,.15); }
.button-small { min-height: 40px; padding: 0 14px; font-size: 13px; }
.button-secondary {
  background: var(--surface); color: #1d2923; border-color: var(--line-strong);
  box-shadow: 0 2px 5px rgba(20,34,27,.04);
}
.button-secondary:hover { background: var(--surface-soft); }

/* Homepage hero */
.home-hero {
  position: relative; overflow: hidden; border-bottom: 1px solid var(--line);
  background-color: var(--bg);
  background-image: linear-gradient(180deg, #fbfaf7 0%, #f6f3ea 62%, #f1efe4 100%);
  min-height: 400px;
}
.hero-inner { min-height: 400px; display: flex; align-items: center; position: relative; z-index: 3;
  /* Only the copy itself should take clicks; the rest of this box sits over
     the marquee and would otherwise block every pill behind it. */
  pointer-events: none; }
.hero-copy-block { width: min(620px, 62%); padding: 44px 0 40px 42px; pointer-events: auto; }
/* The headline reads as three lines by design:
     Discover the / businesses building / disc golf.
   Measured in this face, the longest of those lines is 9.5em wide and the
   next word would push it to 11.6em. A measure of 10.2em therefore produces
   exactly that break at every size in the clamp range — em, not px, because
   the ratio holds only if the measure scales with the type.
   text-wrap must stay normal: balance would even the lines out and undo it. */
.hero-copy-block h1 {
  margin: 0; font-family: var(--font);
  font-size: clamp(38px, 3.7vw, 52px); line-height: 1.02; letter-spacing: -.035em;
  color: #0a2a20; font-weight: 700; text-wrap: normal; max-width: 10.2em;
}
.hero-copy-block p { max-width: 44ch; margin: 17px 0 0; color: #34413d; font-size: 16px; line-height: 1.45; }
.hero-actions { display: flex; gap: 14px; margin-top: 22px; flex-wrap: wrap; }
.hero-primary { min-width: 200px; justify-content: space-between; }

/* Homepage sections */
.home-section { padding-top: 30px; }
.page-section { padding-top: 8px; padding-bottom: 24px; }
.home-section-heading {
  min-height: 36px; display: flex; align-items: center; justify-content: space-between;
  gap: 20px; margin-bottom: 12px;
}
.home-section-heading h2 {
  display: flex; align-items: center; gap: 10px; margin: 0;
  font-size: 19px; line-height: 1.1; letter-spacing: -.02em;
}
.home-section-heading > a {
  text-decoration: none; font-size: 13px; font-weight: 650;
  display: flex; align-items: center; gap: 8px; padding: 8px 4px; color: var(--accent-2);
}
.section-icon { width: 20px; height: 20px; display: inline-flex; color: #41554a; }
.section-icon svg { width: 100%; height: 100%; }

/* New & Notable rail. Cards size to the container so a whole number fits —
   the previous minmax(190px, 1fr) always collapsed to its 190px minimum,
   which is what left the last card sliced at every width. */
.notable-rail { position: relative; }
.new-notable-track {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--rail-gap) * (var(--rail-cards) - 1))) / var(--rail-cards));
  --rail-cards: 6; --rail-gap: 14px;
  gap: var(--rail-gap); overflow-x: auto; padding: 4px 2px 12px;
  scrollbar-width: thin; scroll-snap-type: x mandatory;
  scroll-padding-left: 2px;
}
.new-notable-track > * { scroll-snap-align: start; }
.rail-hint { margin: 0; font-size: 12px; color: var(--muted); }

/* Listing cards */
.listing-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.listing-card {
  position: relative; display: flex; gap: 14px; min-height: 168px; padding: 18px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.listing-card:hover { transform: translateY(-2px); border-color: var(--line-strong); box-shadow: var(--shadow-hover); }
/* The card-wide hit area is a pseudo-element on the title link rather than a
   second anchor: one tab stop per card, and the focus ring renders on the
   title where it is actually visible.
   The overlay sits at z-index 0 and the copy at 1, so the padding and logo
   area still navigate while the description stays selectable text. */
.card-link { text-decoration: none; }
.card-link::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.card-link:hover { text-decoration: underline; }
.card-copy p, .card-meta { position: relative; z-index: 1; }
.listing-card:focus-within { border-color: var(--line-strong); box-shadow: var(--shadow-hover); }

/* Listing tile. The initials sit underneath; a logo image, when present,
   covers them, and app.js removes an image that fails to load so the
   initials show through rather than leaving an empty box. */
.logo-shell {
  position: relative; width: 48px; height: 48px; flex: 0 0 48px;
  border-radius: 10px; display: grid; place-items: center; overflow: hidden;
  background: var(--tone, #2b4a3a); color: #fff;
}
.logo-shell.large { width: 82px; height: 82px; flex-basis: 82px; border-radius: 18px; }
.logo-initials {
  font-weight: 800; letter-spacing: -.02em; line-height: 1;
  font-variant-ligatures: none;
}
.logo-initials.len-1 { font-size: 22px; }
.logo-initials.len-2 { font-size: 18px; }
.logo-initials.len-3 { font-size: 14px; }
.logo-shell.large .logo-initials.len-1 { font-size: 38px; }
.logo-shell.large .logo-initials.len-2 { font-size: 31px; }
.logo-shell.large .logo-initials.len-3 { font-size: 24px; }
.logo-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; background: #fff;
}

/* Tile tones, assigned from the slug in app.py. Every one clears 7:1 against
   the white initials, so no listing can land on an illegible pairing. */
.tone-0  { --tone: #1d5236; }
.tone-1  { --tone: #27506e; }
.tone-2  { --tone: #1c565e; }
.tone-3  { --tone: #54325c; }
.tone-4  { --tone: #8a3a2a; }
.tone-5  { --tone: #77500f; }
.tone-6  { --tone: #3a3f6b; }
.tone-7  { --tone: #425a26; }
.tone-8  { --tone: #7a3f2e; }
.tone-9  { --tone: #39525e; }
.tone-10 { --tone: #6d2f42; }
.tone-11 { --tone: #22483a; }

.card-copy { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.card-copy h3 { font-size: 17px; line-height: 1.2; letter-spacing: -.025em; margin: 3px 0 8px; }
.card-copy p { margin: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.45; }
.card-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px;
  margin-top: auto; padding-top: 12px; color: var(--muted); font-size: 12px;
}
.category-label {
  position: relative; z-index: 2; text-decoration: none; font-weight: 750;
  color: var(--accent-2); padding: 4px 0; display: inline-block;
}
.category-label:hover { text-decoration: underline; }
.category-apps-software { color: #1f5c9c; }
.category-tech-gadgets { color: #216078; }
.category-disc-brands { color: #1f6440; }
.category-retailers-marketplaces { color: #7d5511; }
/* Was #ef6e18 at 3.04:1 against white. */
.category-gear-accessories { color: #ad4a07; }
.category-dyes-custom-discs { color: #7d3970; }
.category-media-content { color: #5f3f93; }
.category-training-coaching { color: #2a6853; }
.category-events-tours { color: #7d4f23; }
.category-course-services { color: #46654a; }
.category-organizations-foundations { color: #8c2f4f; }

.listing-card--compact {
  min-height: 186px; padding: 14px; gap: 0 11px;
  display: grid; grid-template-columns: 48px 1fr; grid-template-rows: auto auto 1fr;
  border-radius: 12px; box-shadow: 0 3px 10px rgba(30,40,34,.025);
}
.listing-card--compact .logo-shell { grid-column: 1; grid-row: 1; }
.listing-card--compact .card-copy { display: contents; }
/* Two title lines are always reserved so descriptions share a baseline
   whether the name wraps or not. */
.listing-card--compact .card-copy h3 {
  grid-column: 2; grid-row: 1; align-self: center; margin: 0; font-size: 15px;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.listing-card--compact .card-copy > p {
  grid-column: 1 / -1; grid-row: 2; margin: 10px 0 0; font-size: 13px; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3;
  -webkit-box-orient: vertical; overflow: hidden;
}
.listing-card--compact .card-meta {
  grid-column: 1 / -1; grid-row: 3; flex-direction: column; align-items: flex-start;
  gap: 2px; margin-top: auto; padding-top: 10px;
}
.listing-card--compact .category-label { font-size: 12px; }
.date-added { font-size: 12px; color: var(--muted); }

/* Category grid — steps down 5 → 4 → 3 → 2 → 1 instead of jumping
   straight from five columns to two. */
/* Six across at desktop: twelve categories land as a clean 6x2, degrading to
   4x3 and 3x4 at the narrower breakpoints below. */
.category-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px 14px; }
.category-card {
  min-height: 68px; padding: 14px 18px; display: grid;
  grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px;
  text-decoration: none; background: var(--surface); border: 1px solid var(--line);
  border-radius: 11px; transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.category-card:hover { transform: translateY(-1px); border-color: var(--line-strong); box-shadow: var(--shadow); }
.category-card--empty { opacity: .62; }
.category-name { font-size: 15px; line-height: 1.25; font-weight: 700; min-width: 0; }
.category-count {
  min-width: 24px; height: 22px; padding: 0 7px; border-radius: 999px;
  justify-self: end; display: grid; place-items: center; background: var(--accent-soft);
  color: var(--accent); font-size: 11px; font-weight: 800;
}

/* Why panel */
.why-panel {
  margin-top: 30px; margin-bottom: 16px; display: grid;
  grid-template-columns: 250px 1fr; align-items: center; gap: 30px;
  padding: 18px 24px; border: 1px solid var(--line); border-radius: 12px;
  background: linear-gradient(90deg, #f6f5ed, #faf9f5);
}
/* The source art now carries a real alpha channel, so it needs no blend mode
   to sit on the panel. It ships at 2x its display size for retina. */
.why-art {
  width: 250px; height: 72px;
  background: url('/static/why-art.webp') left center / contain no-repeat;
}
.why-panel h2 { margin: 0 0 4px; font-size: 18px; letter-spacing: -.02em; }
.why-panel p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.45; max-width: 78ch; }

/* Footer */
.site-footer { margin-top: 24px; background: var(--surface); border-top: 1px solid var(--line); padding: 24px 0 18px; }
.footer-inner {
  width: min(1280px, calc(100% - 72px)); margin-inline: auto; display: grid;
  grid-template-columns: 2.2fr 1fr 1.2fr 1fr; gap: 36px; align-items: start;
}
.footer-brand .brand > strong { font-size: 16px; }
.footer-brand p { margin: 8px 0 0; color: var(--muted); font-size: 12.5px; }
.footer-column { display: grid; gap: 2px; font-size: 13px; }
.footer-column strong { color: var(--ink); margin-bottom: 4px; font-size: 12.5px; }
.footer-column a { text-decoration: none; color: var(--muted); padding: 7px 0; }
.footer-column a:hover { color: var(--accent); text-decoration: underline; }
/* Was #9aa09d at 10px — 2.66:1, the worst text on the site. */
.footer-copyright { text-align: center; color: var(--muted); font-size: 12px; margin: 18px 0 0; }

/* Internal pages */
.eyebrow { color: var(--accent); text-transform: uppercase; letter-spacing: .12em; font-weight: 800; font-size: 11px; margin: 0 0 8px; }
.page-intro { padding: 52px 0 24px; }
.page-intro h1 { font-family: var(--font); font-size: clamp(38px, 4.4vw, 56px); margin: 0 0 12px; color: var(--accent); }
.page-intro > p:not(.eyebrow) { color: var(--muted); max-width: 68ch; font-size: 17px; }
/* Utility pages (report, 404) get a calmer heading than the marketing pages. */
.page-intro--utility { padding: 44px 0 20px; }
.page-intro--utility h1 { font-size: clamp(28px, 3vw, 38px); }
.lead { font-size: 19px; color: var(--ink-soft); }
.quiet { color: var(--muted); font-size: 13px; }
.back-link { display: inline-block; padding: 8px 0; text-decoration: none; color: var(--accent-2); font-weight: 650; font-size: 14px; }
.back-link:hover { text-decoration: underline; }

.filter-bar { display: grid; grid-template-columns: 1.4fr .8fr auto auto; gap: 9px; margin-bottom: 16px; align-items: end; }
.filter-bar label { display: grid; gap: 5px; font-size: 12px; font-weight: 700; color: var(--ink-soft); }
.filter-bar input, .filter-bar select,
.stack-form input, .stack-form select, .stack-form textarea {
  width: 100%; border: 1px solid var(--line-strong); background: var(--surface);
  border-radius: 10px; padding: 11px 12px; color: var(--ink);
}
.filter-bar button, .search-submit {
  border: 0; background: var(--accent); color: #fff; font-weight: 750;
  border-radius: 9px; padding: 12px 18px; min-height: 44px;
}
.filter-bar button:hover { background: var(--accent-2); }
.filter-bar > a { align-self: center; padding: 12px 8px; }
.result-count { color: var(--muted); font-size: 13.5px; margin: 0 0 16px; }

.listing-detail { padding: 56px 0 72px; display: grid; grid-template-columns: 1fr 320px; gap: 56px; }
.listing-detail-main { display: flex; align-items: flex-start; gap: 22px; }
.listing-detail h1 { font-family: var(--font); font-size: clamp(36px, 4.4vw, 56px); margin: 10px 0 16px; color: var(--accent); }
.detail-description { font-size: 19px; color: var(--ink-soft); max-width: 62ch; }
.detail-actions { display: flex; gap: 10px; margin-top: 26px; flex-wrap: wrap; }
.detail-facts { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 18px; align-self: start; }
.detail-facts div { padding: 12px 0; border-bottom: 1px solid var(--line); }
.detail-facts div:last-child { border: 0; }
.detail-facts span, .detail-facts strong { display: block; }
.detail-facts span { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.detail-facts strong { margin-top: 4px; }
.category-pill {
  display: inline-flex; padding: 6px 10px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent); text-decoration: none;
  font-weight: 750; font-size: 12px;
}
.category-pill:hover { text-decoration: underline; }
.pill-inactive { background: #f0ece6; color: #6b5540; margin-left: 6px; }
.pill-inactive:hover { text-decoration: none; }
.inactive-notice {
  margin: 14px 0 0; padding: 13px 16px; max-width: 62ch;
  background: var(--surface-soft); border-left: 3px solid #b09371;
  border-radius: 0 8px 8px 0; color: var(--ink-soft); font-size: 14px; line-height: 1.5;
}
/* Inactive cards read as part of the record rather than as live listings. */
.listing-card--inactive { background: var(--surface-soft); }
.listing-card--inactive .logo-shell { filter: grayscale(1); opacity: .8; }
.status-note { font-size: 12px; font-weight: 750; color: #6b5540; }
.status.inactive { background: #f0ece6; color: #6b5540; }

.form-panel { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 24px; box-shadow: var(--shadow); margin-bottom: 72px; }
.stack-form { display: grid; gap: 18px; }
.stack-form label { display: grid; gap: 6px; font-weight: 700; font-size: 14px; }
/* "optional" sits with the label text rather than claiming its own row. */
.stack-form .label-text { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.stack-form .label-text .hint { color: var(--muted); font-weight: 500; font-size: 12px; }
.stack-form textarea { resize: vertical; min-height: 96px; }
.stack-form .button { justify-self: start; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.stack-form .check { display: flex; grid-template-columns: none; flex-direction: row; align-items: flex-start; gap: 10px; font-weight: 600; }
.stack-form .check input { width: auto; margin-top: 3px; }

.success-box, .error-box { border-radius: 12px; padding: 17px 18px; margin-bottom: 18px; }
.success-box { background: #e8f3eb; border: 1px solid #a9c9b5; color: #17422b; }
.error-box { background: #fdeeea; border: 1px solid #dfab9e; color: #6d2a1d; }
.success-box p, .error-box p { margin: 4px 0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.prose h2 { margin-top: 34px; font-size: 26px; }
.prose p { color: var(--ink-soft); font-size: 16px; max-width: 70ch; }
.empty-state {
  border: 1px dashed var(--line-strong); border-radius: 12px; padding: 30px;
  color: var(--ink-soft); grid-column: 1/-1; background: var(--surface);
}
.empty-state strong { display: block; margin-bottom: 6px; color: var(--ink); font-size: 16px; }
.empty-state p { margin: 0; color: var(--muted); font-size: 14px; }

/* Admin */
.admin-shell { padding: 40px 0 72px; }
.admin-nav { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 32px; }
.admin-nav a { padding: 10px 12px; border-radius: 9px; background: var(--surface); border: 1px solid var(--line); text-decoration: none; font-size: 13px; font-weight: 700; }
.admin-nav a:hover { border-color: var(--line-strong); }
/* This class was used by all five admin templates and defined by none of
   them, so the primary action stacked under the heading. */
.section-heading {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin-bottom: 26px;
}
.section-heading h1 { font-size: clamp(28px, 3vw, 36px); margin: 0; }
.section-heading p:not(.eyebrow) { margin: 8px 0 0; color: var(--muted); font-size: 14px; max-width: 62ch; }
.stat-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin: 0 0 36px; }
.stat-grid > div { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 18px; }
.stat-grid span, .stat-grid strong { display: block; }
.stat-grid span { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.stat-grid strong { font-size: 32px; margin-top: 4px; font-variant-numeric: tabular-nums; }
.admin-list { display: grid; gap: 8px; }
.admin-list a { display: flex; justify-content: space-between; gap: 20px; background: var(--surface); border: 1px solid var(--line); padding: 14px 15px; border-radius: 10px; text-decoration: none; }
.admin-list span { color: var(--muted); font-size: 13px; }
.table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.admin-table { width: 100%; border-collapse: collapse; min-width: 760px; }
.admin-table th, .admin-table td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.admin-table th { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; background: var(--surface-soft); }
.admin-table td { font-size: 14px; }
.admin-table tr:last-child td { border-bottom: 0; }
.admin-table td small { display: block; color: var(--muted); max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status { display: inline-flex; border-radius: 999px; padding: 4px 8px; font-size: 11px; font-weight: 800; background: #eceeea; color: #4d564f; }
.status.published, .status.approved { background: #e0efe5; color: #245537; }
.status.archived, .status.dismissed { background: #efeae5; color: #64503f; }
.status.pending { background: #fbecd2; color: #6f4610; }
.narrow-admin { max-width: 820px; }
.source-note { border-left: 3px solid #7ea287; padding: 12px 14px; background: var(--surface-soft); border-radius: 0 8px 8px 0; }
.source-note p { margin: 4px 0 0; }
.danger-zone { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.danger-zone button { border: 0; background: transparent; color: var(--danger); text-decoration: underline; padding: 10px 4px; font-weight: 650; }
.queue-list { display: grid; gap: 12px; }
.queue-item { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 18px; }
.queue-item.resolved { opacity: .62; }
.queue-top { display: flex; justify-content: space-between; gap: 15px; color: var(--muted); font-size: 12px; flex-wrap: wrap; }
.queue-item h2 { font-size: 20px; margin: 12px 0 4px; }
.queue-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.queue-actions form { display: flex; gap: 10px; }
.link-button { border: 0; background: transparent; color: var(--accent-2); text-decoration: underline; padding: 11px 8px; font-weight: 650; }
.link-button.muted { color: var(--muted); }
.analytics-stats { grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); }
.admin-nav a[aria-current="page"] { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Admin filters and paging */
.admin-filters {
  display: grid; grid-template-columns: 1.6fr 1fr 1.2fr auto auto;
  gap: 10px; align-items: end; margin-bottom: 16px;
}
.admin-filters label { display: grid; gap: 5px; font-size: 12px; font-weight: 700; color: var(--ink-soft); }
.admin-filters input, .admin-filters select {
  width: 100%; border: 1px solid var(--line-strong); background: var(--surface);
  border-radius: 10px; padding: 10px 12px; color: var(--ink);
}
.admin-filters button {
  border: 0; background: var(--accent); color: #fff; font-weight: 750;
  border-radius: 9px; padding: 11px 18px; min-height: 44px;
}
.admin-filters > a { padding: 12px 4px; }
.inline-actions { display: flex; flex-wrap: wrap; gap: 2px 10px; }
.inline-actions .link-button { padding: 6px 2px; font-size: 13px; }
.row-links { white-space: nowrap; }
.row-links a { display: inline-block; padding: 6px 8px 6px 0; }
.pager { display: flex; align-items: center; gap: 18px; margin-top: 18px; font-size: 14px; }
.pager a { padding: 10px 0; font-weight: 650; color: var(--accent-2); }

/* New & Notable curation */
.curation-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 40px; align-items: start; }
.curation-heading { font-size: 17px; margin: 0 0 12px; display: flex; align-items: baseline; gap: 10px; }
.curation-heading:not(:first-child) { margin-top: 34px; }
.rank-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rank-row {
  position: relative; display: grid; grid-template-columns: 70px 1fr; gap: 14px;
  align-items: center; background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; padding: 10px 14px;
}
/* Ranks past the homepage cap never appear, so they are shown as such. */
.rank-row--offscreen { opacity: .55; }
.rank-cutoff {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  font-size: 11px; font-weight: 750; color: #6b5540; text-transform: uppercase; letter-spacing: .06em;
}
.rank-input {
  width: 100%; border: 1px solid var(--line-strong); border-radius: 8px;
  padding: 8px 10px; font-variant-numeric: tabular-nums; text-align: center;
}
.rank-name strong { display: block; font-size: 15px; }
.rank-name small { color: var(--muted); font-size: 12px; }
.curation-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 18px; }
.curation-remove { margin-top: 30px; }
.curation-remove h3 { font-size: 14px; margin: 0 0 8px; }
.chip-row { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.preview-list { margin: 0; padding-left: 20px; display: grid; gap: 5px; font-size: 14px; }
.preview-list small { color: var(--muted); }

@media (max-width: 900px) {
  .admin-filters { grid-template-columns: 1fr 1fr; }
  .curation-grid { grid-template-columns: 1fr; gap: 30px; }
}

/* ---------- Responsive ---------- */

@media (max-width: 1180px) {
  .wrap { width: min(100% - 48px, 1280px); }
  .header-inner { width: calc(100% - 40px); }
  .main-nav { gap: 26px; }
  .category-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .new-notable-track { --rail-cards: 5; }
  .footer-inner { width: calc(100% - 48px); gap: 28px; }
}

@media (max-width: 960px) {
  .hero-copy-block { padding-left: 8px; width: min(560px, 62%); }
  .category-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .new-notable-track { --rail-cards: 4; }
  .listing-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .listing-detail { grid-template-columns: 1fr 280px; gap: 36px; }
  .filter-bar { grid-template-columns: 1.4fr .9fr auto; }
  .filter-bar > a { grid-column: 1 / -1; justify-self: start; }
}

/* Mobile navigation. Below this width the links collapse behind a toggle —
   but only once JS has marked the document, so a no-JS visitor keeps a
   plain stacked nav rather than losing the links entirely. */
@media (max-width: 820px) {
  :root { --header-h: 58px; }
  .wrap, .narrow { width: min(100% - 28px, 1280px); }
  .header-inner { width: calc(100% - 26px); flex-wrap: wrap; }
  .brand > strong { font-size: 19px; }

  .nav-toggle {
    display: none; align-items: center; gap: 9px; min-height: 44px;
    padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: 9px;
    background: var(--surface); color: var(--ink); font-size: 14px; font-weight: 700;
  }
  .nav-toggle-bars { display: grid; gap: 4px; width: 17px; }
  .nav-toggle-bars span { display: block; height: 2px; background: currentColor; border-radius: 2px; }
  .js .nav-toggle { display: inline-flex; }

  .main-nav {
    order: 3; width: 100%; flex-direction: column; align-items: stretch;
    gap: 0; padding-bottom: 8px;
  }
  .main-nav a { min-height: 48px; padding: 0 4px; font-size: 15px; border-bottom: 1px solid var(--line); }
  .main-nav a:last-child { border-bottom: 0; }
  .main-nav a::after { display: none; }
  .main-nav a.active { color: var(--accent); font-weight: 800; }
  .js .main-nav { display: none; }
  .js .main-nav.is-open { display: flex; }

  .home-hero { min-height: 396px; }
  .hero-inner { min-height: 396px; align-items: center; }
  .hero-copy-block { width: 100%; padding: 26px 4px; }
  .hero-copy-block h1 { font-size: clamp(32px, 8.2vw, 44px); max-width: 10.2em; }
  .hero-copy-block p { font-size: 15px; }
  .hero-actions { margin-top: 20px; }

  .new-notable-track { --rail-cards: 2; }
  .category-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .footer-inner { width: calc(100% - 28px); grid-template-columns: 1fr 1fr; gap: 26px 20px; }
  .footer-brand { grid-column: 1/-1; }
  .listing-grid { grid-template-columns: 1fr; }
  .filter-bar { grid-template-columns: 1fr; }
  .listing-detail { grid-template-columns: 1fr; gap: 28px; padding-top: 40px; }
  .listing-detail-main { flex-direction: column; }
  .detail-facts { width: 100%; }
  .form-row { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .why-panel { grid-template-columns: 1fr; gap: 14px; padding: 18px; }
  .why-art { width: 100%; max-width: 240px; height: 74px; }
}

@media (max-width: 520px) {
  .new-notable-track { --rail-cards: 1.12; }
  .category-grid { grid-template-columns: 1fr; }
  .hero-actions { display: grid; grid-template-columns: 1fr; }
  .hero-primary { min-width: 0; }
  .stat-grid { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; }
  .page-intro { padding-top: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .listing-card:hover, .category-card:hover, .button:hover { transform: none; }
  .new-notable-track { scroll-snap-type: none; }
}

/* Email sign-up for new additions */
.subscribe {
  margin: 0 0 64px; padding: 30px 32px; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--accent-soft);
}
.subscribe-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.subscribe-copy { flex: 1 1 320px; min-width: 0; }
.subscribe-copy h2 { margin: 0 0 6px; font-size: 22px; color: var(--accent); }
.subscribe-copy p { margin: 0; color: var(--ink-soft); max-width: 56ch; font-size: 15px; }
.subscribe-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-start; }
.subscribe-form input[type="email"] {
  min-width: 240px; padding: 11px 13px; border: 1px solid var(--line-strong);
  border-radius: 10px; background: var(--surface); color: var(--ink);
}
.subscribe-form input[type="email"]:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.subscribe-form button {
  padding: 11px 20px; border: 0; border-radius: 10px; font-weight: 600;
  background: var(--accent); color: #fff;
}
.subscribe-form button:hover { background: var(--accent-2); }
.subscribe-done { margin: 0; font-weight: 600; color: var(--accent); }
.subscribe-error { flex-basis: 100%; margin: 2px 0 0; color: var(--danger); font-size: 14px; }
@media (max-width: 620px) {
  .subscribe { padding: 24px 20px; }
  .subscribe-form { width: 100%; }
  .subscribe-form input[type="email"] { flex: 1 1 100%; min-width: 0; }
  .subscribe-form button { width: 100%; }
}

/* Homepage logo marquee
   The pills sit inside the hero rather than beneath it: they fill the whole
   band, slide underneath the headline and reappear on the other side. Four
   rows at different scales, opacities and speeds, alternating direction, so
   the wall reads with depth instead of as one flat belt. Each track holds its
   row twice, so translating by half its width loops seamlessly. */
.hero-marquee {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; justify-content: space-between; gap: 12px;
  padding: 10px 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
/* Cream scrim between the pills and the copy: the pills dissolve into the
   page as they pass behind the headline, then re-emerge on the right. */
.home-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg,
    rgba(251,250,247,0) 0%, rgba(251,250,247,.55) 4%, rgba(251,250,247,.97) 11%,
    rgba(251,250,247,.97) 44%, rgba(251,250,247,.6) 53%, rgba(251,250,247,.12) 61%,
    rgba(251,250,247,0) 68%);
}
.marquee-row { overflow: hidden; }
.marquee-track {
  display: flex; width: max-content; gap: 10px;
  animation: marquee-slide var(--speed, 64s) linear infinite;
}
/* Uniform treatment: one size, one speed, direction alternating row to row.
   Depth variants were tried and read as busier rather than deeper. Every row
   shares --speed, so the pace of the whole wall is a single number. */
.marquee-row { --speed: 92s; }
.marquee-row:nth-child(even) .marquee-track { animation-direction: reverse; }
.marquee-track { animation-duration: var(--speed); }
.marquee-row { opacity: .9; }
.marquee-item { transform: scale(.92); }

.marquee-item {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 15px 9px 10px; border: 1px solid var(--line);
  border-radius: 999px; background: var(--surface); text-decoration: none;
  color: var(--ink); white-space: nowrap; box-shadow: var(--shadow);
  pointer-events: auto;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.marquee-item img { width: 26px; height: 26px; object-fit: contain; border-radius: 6px; }
.marquee-item span { font-size: 13px; font-weight: 600; letter-spacing: -.01em; }
.marquee-item:hover { border-color: var(--line-strong); box-shadow: var(--shadow-hover); }

/* Hovering or tabbing into the wall stops every row, so a logo can be read
   and clicked rather than chased. */
.hero-marquee:hover .marquee-track,
.hero-marquee:focus-within .marquee-track { animation-play-state: paused; }

@keyframes marquee-slide {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - 5px)); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  .marquee-row { overflow-x: auto; scrollbar-width: none; }
  .marquee-row::-webkit-scrollbar { display: none; }
}

/* Phone overrides for the marquee live here, after the base rules above:
   placed with the other breakpoints they lost to later declarations. */
@media (max-width: 820px) {
  .home-hero::after {
    /* Portrait screens protect the copy vertically, and the copy is centred:
       clear the middle band and let the pills show in strips top and bottom. */
    background: linear-gradient(180deg,
      rgba(251,250,247,0) 0%, rgba(251,250,247,.5) 8%, rgba(251,250,247,.9) 22%,
      rgba(251,250,247,.9) 78%, rgba(251,250,247,.5) 92%, rgba(251,250,247,0) 100%);
  }
  .hero-marquee { gap: 10px; }
  .marquee-row:nth-child(n+6) { display: none; }
  .marquee-item { padding: 7px 12px 7px 8px; }
  .marquee-item img { width: 22px; height: 22px; }
  .marquee-item span { font-size: 12px; }
}

@media (max-width: 520px) {
  /* Narrow phones: fewer rows again, and the pills tighten up. */
  .marquee-row:nth-child(n+5) { display: none; }
  .marquee-item { padding: 6px 11px 6px 7px; gap: 7px; }
  .marquee-item img { width: 20px; height: 20px; }
}