/* ==========================================================================
   CorporateLeaks
   Reddit x anonymous confession board x street-sticker aesthetic.
   Deliberately not corporate SaaS: the look is part of the promise that this
   isn't another sanitised employer-branding site.

   Palette rule: yellow is the brand accent, black + off-white dominate,
   blue/teal/lavender appear sparingly on cards and tags. No pink anywhere.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;700&family=Inter:wght@400;500;600;700;800;900&family=Space+Grotesk:wght@600;700&display=swap');

:root {
  /* ---- Brand constants (identical in both themes) ---- */
  --yellow:     #FFD83D;
  --yellow-dk:  #E5B900;
  --blue:       #3155FF;
  --teal:       #35C9B0;
  --red:        #D93A3A;
  --green:      #1F9254;

  /* ---- Semantic tokens: every rule below uses THESE, never raw hex, so a
          theme swap is a matter of redefining this block. ---- */
  --bg:          #FAFAF7;   /* page */
  --surface:     #FFFFFF;   /* cards, header, hero panel */
  --surface-2:   #FAFAF7;   /* insets: avatars, chips, table stripes */
  --ink:         #111111;   /* primary text + borders */
  --ink-soft:    #55585E;   /* body copy */
  --ink-faint:   #8A8F97;   /* meta, captions */
  --line:        #E4E3DD;   /* hairlines */
  --line-soft:   #EFEEE9;
  --border:      #111111;   /* the heavy sticker-style outline */
  --shadow-rgb:  17, 17, 17;

  /* Pale card washes */
  --lt-blue:     #DDE8FF;
  --lt-green:    #DDF4E5;
  --lt-yellow:   #FFF3B0;
  --lt-lav:      #E8E5FF;
  --cream:       #FBF6E8;
  --wash-ink:    #111111;   /* text on the pale washes */

  /* Inverted blocks (sidebar CTA, final CTA, footer) are near-black in light
     mode; in dark mode they lift OFF the page instead, or they vanish. */
  --invert-bg:   #111111;
  --invert-ink:  #FFFFFF;
  --invert-soft: #B9BDC4;
  --invert-faint:#7E838B;
  --invert-line: #34383F;

  /* Solid action buttons. Separate from --invert-bg because a large dark
     panel and a small dark button need different treatment once the page
     itself is dark. */
  --btn-solid-bg:  #111111;
  --btn-solid-ink: #FFFFFF;

  --alert-ok-bg: #DDF4E5;  --alert-ok-ink: #12603A;
  --alert-no-bg: #FBEAEA;  --alert-no-ink: #8E2020;
  --alert-in-bg: #DDE8FF;  --alert-in-ink: #1A3AAF;
  --alert-wa-bg: #FFF3B0;  --alert-wa-ink: #7A5C00;

  --grain-opacity: .028;
  --hero-art-dim: 0;        /* dark mode dims the artwork to sit on dark bg */

  --r-sm: 12px;
  --r:    16px;
  --r-lg: 22px;
}

/* ==========================================================================
   Dark theme
   Not an inversion: the sticker aesthetic depends on heavy outlines, which
   would glare pure white on black. Borders become a soft grey, surfaces are
   raised rather than black, and the pale card washes become deep tints that
   keep their hue identity (blue card still reads blue).
   ========================================================================== */
:root[data-theme="dark"] {
  --bg:          #14161A;
  --surface:     #1C1F25;
  --surface-2:   #23272E;
  --ink:         #F2F3F5;
  --ink-soft:    #B6BBC3;
  --ink-faint:   #868C96;
  --line:        #2E333B;
  --line-soft:   #272B32;
  --border:      #3A404A;
  --shadow-rgb:  0, 0, 0;

  --lt-blue:     #1E2A44;
  --lt-green:    #16301F;
  --lt-yellow:   #322A0E;
  --lt-lav:      #262340;
  --cream:       #2A2620;
  --wash-ink:    #E8EAED;

  /* Inverted blocks lift off the dark page rather than sinking into it. */
  --invert-bg:   #262B33;
  --invert-ink:  #FFFFFF;
  --invert-soft: #B6BBC3;
  --invert-faint:#868C96;
  --invert-line: #3A404A;

  --btn-solid-bg:  #F2F3F5;
  --btn-solid-ink: #111111;

  --alert-ok-bg: #16301F;  --alert-ok-ink: #7CD9A4;
  --alert-no-bg: #3A1D1D;  --alert-no-ink: #F1A3A3;
  --alert-in-bg: #1E2A44;  --alert-in-ink: #A8C0FF;
  --alert-wa-bg: #322A0E;  --alert-wa-ink: #EBC964;

  --grain-opacity: .05;
  --hero-art-dim: .18;
  color-scheme: dark;
}

/* Respect the OS preference when the user has not chosen explicitly. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:          #14161A;
    --surface:     #1C1F25;
    --surface-2:   #23272E;
    --ink:         #F2F3F5;
    --ink-soft:    #B6BBC3;
    --ink-faint:   #868C96;
    --line:        #2E333B;
    --line-soft:   #272B32;
    --border:      #3A404A;
    --shadow-rgb:  0, 0, 0;

    --lt-blue:     #1E2A44;
    --lt-green:    #16301F;
    --lt-yellow:   #322A0E;
    --lt-lav:      #262340;
    --cream:       #2A2620;
    --wash-ink:    #E8EAED;

    --invert-bg:   #262B33;
    --invert-ink:  #FFFFFF;
    --invert-soft: #B6BBC3;
    --invert-faint:#868C96;
    --invert-line: #3A404A;

    --btn-solid-bg:  #F2F3F5;
    --btn-solid-ink: #111111;

    --alert-ok-bg: #16301F;  --alert-ok-ink: #7CD9A4;
    --alert-no-bg: #3A1D1D;  --alert-no-ink: #F1A3A3;
    --alert-in-bg: #1E2A44;  --alert-in-ink: #A8C0FF;
    --alert-wa-bg: #322A0E;  --alert-wa-ink: #EBC964;

    --grain-opacity: .05;
    --hero-art-dim: .18;
    color-scheme: dark;
  }
}

/* Legacy aliases so older rules keep resolving during the migration. */
:root, :root[data-theme="dark"] {
  --paper: var(--bg);
  --white: var(--surface);
  --black: var(--ink);
  --charcoal: var(--invert-bg);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Nothing on this site is meant to scroll sideways. The hero artwork is
     absolutely positioned and deliberately bleeds to the viewport edge, which
     widens the document unless it is clipped here. */
  overflow-x: hidden;
}

body {
  margin: 0;
  overflow-x: hidden;
  width: 100%;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--ink);
  line-height: 1.6;
  font-size: 15px;
  /* Subtle paper grain so flat colour never reads as generic SaaS. */
  background-color: var(--bg);
  background-image:
    radial-gradient(circle at 15% 12%, rgba(49,85,255,.035) 0, transparent 38%),
    radial-gradient(circle at 85% 8%, rgba(255,216,61,.075) 0, transparent 34%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.028'/%3E%3C/svg%3E");
}

a { color: inherit; text-decoration: none; }
.wrap {
  max-width: 1440px; margin: 0 auto;
  /* Gutters grow with the viewport rather than staying pinned at 20px, so a
     wide screen gets breathing room without a narrow one losing any. */
  padding: 0 clamp(20px, 4vw, 56px);
}

h1, h2, h3 { font-family: 'Space Grotesk', 'Inter', sans-serif; letter-spacing: -.02em; }

/* Handwritten annotations. Used sparingly, always as marginalia. */
.hand { font-family: 'Caveat', cursive; font-weight: 700; }
.scribble {
  font-family: 'Caveat', cursive; font-weight: 700;
  color: var(--ink-faint); font-size: 17px; line-height: 1.25;
  display: inline-block;
}

/* Yellow marker highlight -- slightly irregular, like a real marker stroke. */
.mark {
  background: var(--yellow);
  color: #111111;   /* yellow never changes, so its text must not either */
  padding: 0 .22em; display: inline-block;
  border-radius: 3px 8px 4px 7px;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  white-space: nowrap;
  padding: 11px 20px; border-radius: var(--r-sm);
  font-family: inherit; font-weight: 700; font-size: 14px;
  border: 2px solid var(--border); background: var(--surface); color: var(--ink);
  cursor: pointer; transition: transform .14s ease, box-shadow .14s ease, background .14s;
}
.btn:hover { transform: scale(1.03) translateY(-1px); box-shadow: 3px 3px 0 var(--border); }
.btn:active { transform: scale(.99); box-shadow: 1px 1px 0 var(--border); }
.btn-dark   { background: var(--btn-solid-bg); color: var(--btn-solid-ink); border-color: var(--btn-solid-bg); }
.btn-dark:hover  { box-shadow: 3px 3px 0 var(--yellow-dk); }
.btn-yellow { background: var(--yellow); }
.btn-sm { padding: 7px 13px; font-size: 13px; border-width: 1.5px; }
.btn-lg { padding: 15px 28px; font-size: 16px; border-radius: var(--r); }
.btn-block { width: 100%; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  /* Same track as .wrap, so the logo lines up with the content below it. */
  display: flex; align-items: center; gap: 22px;
  max-width: 1440px; margin: 0 auto; width: 100%;
  padding: 13px clamp(20px, 4vw, 56px);
}
.logo { flex: 0 0 auto; }
.logo {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  font-size: 23px; letter-spacing: -.035em; white-space: nowrap;
  display: inline-flex; align-items: baseline; gap: 1px;
}
.logo .lk {
  background: var(--yellow); color: #111111; padding: 0 7px;
  border-radius: 4px 10px 5px 9px; transform: rotate(-1.2deg);
  display: inline-block;
}
.logo-mask { font-size: 19px; margin-right: 5px; }

/* min-width:0 lets the nav shrink inside the flex row instead of forcing the
   header wider than its 1180px track -- which pushed the CTA off the right
   edge and made the whole page look left-aligned. */
.nav {
  display: flex; gap: 20px; align-items: center;
  min-width: 0; flex: 0 1 auto;
  /* No overflow:hidden -- clipping a link mid-word looks broken. The
     breakpoints below remove whole links instead. */
}
.nav > a { white-space: nowrap; }
.nav .nav-extra { display: none; }
.nav > a {
  font-size: 14px; font-weight: 500; color: var(--ink-soft);
  position: relative; padding: 3px 0; transition: color .12s;
}
.nav > a:hover { color: var(--ink); }
.nav > a.active { color: var(--ink); font-weight: 600; }
/* Hand-drawn underline on the active item. */
.nav > a.active::after {
  content: ""; position: absolute; left: -3px; right: -3px; bottom: -4px; height: 6px;
  background: no-repeat center/100% 100%
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 7'%3E%3Cpath d='M2 4.6C14 2.2 30 1.4 46 2.6c10 .8 20 2.2 32 1' stroke='%23FFD83D' stroke-width='3.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}
/* The actions never shrink: the CTA being fully visible matters more than
   showing every nav link. */
.header-right {
  margin-left: auto; display: flex; align-items: center; gap: 10px;
  flex: 0 0 auto;
}
.icon-btn {
  width: 38px; height: 38px; border-radius: 10px; border: 1.5px solid var(--line);
  background: var(--surface); display: grid; place-items: center; cursor: pointer;
  font-size: 15px; transition: border-color .14s, transform .14s;
}
.icon-btn:hover { border-color: var(--border); transform: translateY(-1px); }
.nav-toggle { display: none; }

/* ---------- Theme toggle ----------
   One button that reports the CURRENT theme and switches to the other.
   The sun/moon swap is driven by the root attribute so it stays correct
   when the theme comes from the OS preference rather than a click. */
.theme-toggle { position: relative; font-size: 16px; }
.theme-toggle .t-dark { display: none; }
.theme-toggle .t-light { display: block; }
:root[data-theme="dark"] .theme-toggle .t-dark { display: block; }
:root[data-theme="dark"] .theme-toggle .t-light { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .t-dark { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .t-light { display: none; }
}

/* Artwork is authored for a light page; in dark mode a slight dim and
   desaturation stops it glowing against the darker surroundings. */
.scene img { filter: brightness(calc(1 - var(--hero-art-dim))) saturate(calc(1 - var(--hero-art-dim) * 0.8)); }

/* ---------- Hero ----------
   Full-bleed: the artwork runs to the top and right edges of the viewport and
   sits flush under the sticky header, with the text column over a white panel
   on the left. The page's paper background resumes below the hero. */
.hero {
  position: relative; background: var(--bg);
  overflow: hidden;
  /* The artwork is absolutely positioned against this element, so .hero must
     carry the height itself -- min-height on .hero-grid only sizes the grid,
     and at wide viewports the text column is short enough that .hero
     collapsed and the image resolved to zero height. */
  min-height: 470px;
}
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 620px) 1fr;
  gap: 0; align-items: center; min-height: 470px;
}
.hero-text {
  padding: 50px 34px 56px 0; position: relative; z-index: 2;
}

.hero h1 {
  font-size: clamp(34px, 4.6vw, 58px); line-height: .98; margin: 0 0 18px;
  font-weight: 700; text-transform: uppercase; letter-spacing: -.035em;
}
.hero h1 .mark { border-radius: 4px 14px 6px 12px; }
.hero-lede { font-size: 17px; color: var(--ink-soft); max-width: 520px; margin: 0 0 26px; }

/* Handwritten kicker above the headline -- never overlapping it. */
.hero-kicker {
  display: inline-block; transform: rotate(-2deg);
  margin: 0 0 12px; font-size: 19px; color: var(--ink-faint);
}
.hero-kicker .arrow { color: var(--yellow-dk); }
.hero-aside { display: inline-block; margin: 12px 0 0 4px; transform: rotate(-2deg); color: var(--ink-faint); }

.searchbar {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 2px solid var(--border);
  border-radius: var(--r-lg); padding: 5px 5px 5px 17px;
  max-width: 540px; box-shadow: 3px 3px 0 rgba(var(--shadow-rgb), .08);
}
.searchbar .mag { color: var(--ink-faint); font-size: 15px; }
.searchbar input {
  flex: 1; border: 0; outline: none; background: transparent;
  font-family: inherit; font-size: 15px; padding: 11px 0; min-width: 0;
}
.searchbar button {
  border: 0; background: var(--btn-solid-bg); color: var(--btn-solid-ink); cursor: pointer;
  font-family: inherit; font-weight: 700; font-size: 14px;
  padding: 12px 26px; border-radius: 16px; transition: transform .14s, background .14s;
  white-space: nowrap;
}
.searchbar button:hover { transform: scale(1.04); opacity: .88; }

.stats { display: flex; gap: 24px; margin-top: 24px; flex-wrap: wrap; }
/* The last stat sits closest to the artwork -- a small chip of page colour
   behind each label keeps every one legible where they overlap. */
.stat-l, .stat-n { position: relative; }
.stat { display: flex; align-items: center; gap: 10px; }
.stat .ico { font-size: 21px; }
.stat-n { font-size: 22px; font-weight: 800; line-height: 1.05; letter-spacing: -.03em; }
.stat-l { font-size: 12px; color: var(--ink-faint); font-weight: 500; }

/* ---------- Hero artwork ----------
   Absolutely positioned so it can bleed past the grid column to the viewport
   edge. The left edge is feathered in the asset AND masked here, so it melts
   into the white text panel rather than ending on a line. */
/* The image is positioned directly rather than filling a percentage-height
   chain: <picture> is an inline wrapper with no height of its own, so
   height:100% on the <img> inside it collapses to zero. Absolute insets on
   the image itself avoid depending on any ancestor's computed height. */
.scene { position: static; }
.scene picture { display: contents; }
.scene img {
  /* Pinned to the right of the viewport and sized as a share of it. An
     earlier calc() mixing % of .hero with vw produced a negative width past
     1440px, which removed the image entirely on large monitors. */
  position: absolute; top: 0; bottom: 0; right: 0;
  width: clamp(560px, 52vw, 1020px);
  height: 100%; object-fit: cover; object-position: left center;
  z-index: 1; pointer-events: none; display: block;
  /* Two-axis fade: the left edge dissolves into the text column, and the
     bottom softens so the art does not end on a hard horizontal cut where
     the feature cards begin. */
  -webkit-mask-image:
    linear-gradient(to right,  transparent 0, #000 30%, #000 100%),
    linear-gradient(to bottom, #000 0, #000 76%, transparent 99%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right,  transparent 0, #000 30%, #000 100%),
    linear-gradient(to bottom, #000 0, #000 76%, transparent 99%);
  mask-composite: intersect;
}

@media (max-width: 900px) {
  /* Stacked: text first, artwork full-width below it. */
  .hero-grid { grid-template-columns: 1fr; min-height: 0; }
  .hero-text { padding: 34px 0 26px; }
  /* Artwork leads on mobile: it carries the whole premise (sticky notes about
     bad managers, toxic culture, layoffs) faster than the headline does, and
     a phone screen shows one thing at a time. Source order already puts it
     first, so the flex column just needs to preserve that. */
  .hero { display: flex; flex-direction: column; }
  .scene { order: 1; margin: 0 -16px; display: block; width: auto; }
  .hero .wrap { order: 2; }
  .scene img {
    position: static !important;   /* clears the desktop absolute placement */
    width: 100%; height: auto;
    /* The artwork is 3:2. At phone width that renders as a short strip where
       none of the sticky-note detail is legible, so crop to a taller slice
       centred on the laptop rather than shrinking the whole scene. */
    /* Slightly shorter now that it leads, so the headline still appears
       without scrolling on a small phone. */
    aspect-ratio: 16 / 11;
    object-fit: cover; object-position: 58% center;
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 90%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 0, #000 90%, transparent 100%);
  }
  .hero-aside { display: none; }
}

/* ---------- Feature cards ---------- */
.section { margin: 46px 0; }
.section-head {
  display: flex; align-items: baseline; gap: 14px; margin-bottom: 20px; flex-wrap: wrap;
}
.section-head h2 { font-size: 27px; margin: 0; letter-spacing: -.03em; }
.section-head .more { margin-left: auto; font-size: 14px; font-weight: 600; }
.section-head > .btn:last-child { margin-left: auto; }
.section-head .more:hover .arw { transform: translateX(4px); }
.arw { display: inline-block; transition: transform .16s ease; }

.features {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px;
  /* The hero's artwork fades out at its lower edge, so without a gap the
     cards read as sitting on top of the illustration rather than below it. */
  margin-top: 36px;
}
.feature {
  border: 2px solid var(--border); border-radius: var(--r); padding: 18px 16px 15px;
  position: relative; transition: transform .16s ease, box-shadow .16s ease;
  display: flex; flex-direction: column; min-height: 158px;
}
.feature:hover { transform: translateY(-4px); box-shadow: 5px 5px 0 var(--border); }
.feature:hover .fa { transform: translateX(4px); }
.feature .ico { font-size: 27px; line-height: 1; }
.feature h3 { font-size: 15px; margin: 11px 0 5px; letter-spacing: -.02em; }
.feature p { font-size: 12.5px; color: var(--ink-soft); margin: 0; line-height: 1.42; }
.fa {
  width: 27px; height: 27px; border-radius: 50%; border: 1.5px solid var(--border);
  display: grid; place-items: center; font-size: 13px; margin-top: auto;
  background: rgba(255,255,255,.55); transition: transform .16s ease;
}
.f-1 { background: var(--lt-yellow); }
.f-2 { background: var(--lt-green); }
.f-3 { background: var(--lt-lav); }
.f-4 { background: var(--lt-blue); }
.f-5 { background: var(--cream); }
.f-6 { background: var(--lt-green); }

/* ---------- Trending companies ---------- */
/* Auto-fit rather than a fixed scrolling row: on a wide screen the whole set
   fits and no scrollbar appears; on a narrow one it still scrolls. */
.rail {
  display: grid; gap: 13px; padding: 4px 2px 6px;
  /* A smaller minimum lets the trailing "Suggest" tile share the first row
     rather than wrapping alone and leaving a gap. */
  grid-template-columns: repeat(auto-fit, minmax(124px, 1fr));
  align-items: stretch;
}
.rail .co-card { display: flex; flex-direction: column; justify-content: center; }
.rail::-webkit-scrollbar { height: 7px; }
.rail::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
.co-card {
  display: block; flex: 0 0 142px;
  background: var(--surface); border: 2px solid var(--border); border-radius: var(--r);
  padding: 16px 12px; text-align: center;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s;
}
.co-card:hover { transform: translateY(-4px); box-shadow: 4px 4px 0 var(--yellow-dk); }
.co-logo {
  width: 42px; height: 42px; margin: 0 auto 9px; border-radius: 11px;
  display: grid; place-items: center; font-weight: 800; font-size: 17px;
  background: var(--bg); border: 2px solid var(--border);
}
.co-name {
  font-weight: 700; font-size: 13.5px; letter-spacing: -.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.co-rating { font-size: 12.5px; font-weight: 700; color: var(--yellow-dk); margin-top: 3px; }
.co-count { font-size: 11.5px; color: var(--ink-faint); }
.co-add { border-style: dashed; background: var(--bg); }

/* Wrapping grid of company cards, for the listing and search pages. The
   homepage uses .rail (a single scrolling row) instead. */
.co-grid {
  display: grid; gap: 13px;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
}
/* .co-card is authored for the flex .rail; in a grid the anchor stays inline
   and its border and padding collapse, so it needs an explicit block. */
.co-grid .co-card { flex: none; display: block; }

/* ---------- Main two-column layout ---------- */
.cols { display: grid; grid-template-columns: 65fr 35fr; gap: 26px; align-items: start; }

.card {
  background: var(--surface); border: 2px solid var(--border);
  border-radius: var(--r); padding: 22px; margin-bottom: 20px;
}

.tabs { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 6px; }
.tab {
  padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 600;
  border: 1.5px solid var(--line); color: var(--ink-soft); background: var(--surface);
  transition: border-color .14s, color .14s, background .14s;
}
.tab:hover { border-color: var(--border); color: var(--ink); }
.tab.active { background: var(--btn-solid-bg); border-color: var(--btn-solid-bg); color: var(--btn-solid-ink); }

/* ---------- Post cards ---------- */
.post {
  border: 1.5px solid var(--line); border-radius: var(--r-sm);
  padding: 17px; margin-top: 14px; position: relative;
  transition: background .16s ease, border-color .16s ease;
}
.post:hover { background: var(--surface-2); border-color: var(--line); }
.post-top { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; flex-wrap: wrap; }
.post-logo {
  width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center;
  font-weight: 800; font-size: 13px; background: var(--bg); border: 1.5px solid var(--border);
}
.post-co { font-weight: 700; font-size: 14px; letter-spacing: -.01em; }
.post-meta { font-size: 12px; color: var(--ink-faint); }
.post h3 { font-size: 16.5px; margin: 0 0 6px; letter-spacing: -.02em; }
.post h3 a:hover { text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 3px; }
.post p { margin: 0 0 12px; color: var(--ink-soft); font-size: 14px; }

.react { margin-left: auto; display: flex; gap: 13px; align-items: center; }
.react span, .react a {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; color: var(--ink-faint); font-weight: 600;
  transition: transform .14s ease, color .14s;
}
.react a:hover { color: var(--ink); transform: scale(1.14); }

.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  font-size: 11.5px; padding: 4px 11px; border-radius: 999px;
  background: var(--bg); border: 1px solid var(--line-soft);
  color: var(--ink-soft); font-weight: 500;
}
.badge {
  font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: .5px;
}
.badge-verified { background: var(--green); color: var(--invert-ink); }
.badge-flag { background: var(--red); color: var(--invert-ink); }

/* Annotation pinned to a post card. */
.post-note {
  position: absolute; right: -6px; bottom: -12px;
  font-family: 'Caveat', cursive; font-weight: 700; font-size: 15px;
  color: var(--ink-faint); transform: rotate(-3deg); background: var(--bg);
  padding: 2px 7px; pointer-events: none;
}

/* ---------- Sidebar ---------- */
.cta-dark {
  background: var(--invert-bg); color: var(--invert-ink); border-radius: var(--r);
  padding: 24px; margin-bottom: 20px; position: relative; overflow: hidden;
}
.cta-dark h3 { font-size: 22px; margin: 0 0 9px; color: var(--invert-ink); }
.cta-dark p { font-size: 13.5px; color: var(--invert-soft); margin: 0 0 18px; }
.cta-dark .fine { font-size: 11.5px; color: var(--invert-faint); text-align: center; margin: 11px 0 0; }

.quote-card {
  background: var(--lt-blue); border: 2px solid var(--border); border-radius: var(--r);
  padding: 20px; margin-bottom: 20px; position: relative;
}
.quote-card p {
  font-family: 'Caveat', cursive; font-weight: 700; font-size: 19px;
  line-height: 1.32; margin: 0; padding-right: 54px;
}
/* Tiny character holding a SPILL IT sign. */
.spill {
  position: absolute; right: 12px; bottom: 12px; width: 46px; text-align: center;
}
.spill .head {
  width: 22px; height: 22px; border-radius: 50%; background: var(--surface);
  border: 2px solid var(--border); margin: 0 auto;
}
.spill .body {
  width: 30px; height: 18px; border: 2px solid var(--border); border-bottom: 0;
  border-radius: 9px 9px 0 0; background: var(--surface); margin: -2px auto 0;
}
.spill .sign {
  position: absolute; top: -14px; right: -8px; background: var(--yellow);
  border: 2px solid var(--border); border-radius: 3px; padding: 1px 6px;
  font-family: 'Caveat', cursive; font-weight: 700; font-size: 12px;
  transform: rotate(9deg);
}

.pills { display: flex; flex-wrap: wrap; gap: 7px; }
.pills a {
  font-size: 12.5px; padding: 6px 13px; border-radius: 999px;
  background: var(--surface); border: 1.5px solid var(--line); font-weight: 500;
  transition: border-color .14s, transform .14s;
}
.pills a:hover { border-color: var(--border); transform: translateY(-1px); }

.redflag-card {
  background: var(--lt-green); border: 2px solid var(--border);
  border-radius: var(--r); padding: 24px; position: relative; overflow: hidden;
}
.redflag-card h3 {
  font-size: 21px; margin: 0 0 12px; line-height: 1.16; text-transform: uppercase;
}
.redflag-card .flagico { font-size: 30px; margin-bottom: 8px; }

/* ---------- Final CTA ---------- */
.final-cta {
  background: var(--invert-bg); color: var(--invert-ink); border-radius: 26px;
  padding: 58px 30px; text-align: center; position: relative; overflow: hidden;
  margin: 50px 0;
}
.final-cta h2 {
  font-size: clamp(30px, 5vw, 52px); margin: 0 0 14px; color: var(--invert-ink);
  text-transform: uppercase; letter-spacing: -.035em;
}
.final-cta p { color: var(--invert-soft); font-size: 16px; margin: 0 0 26px; }
.final-cta .doodle { position: absolute; color: var(--invert-faint); pointer-events: none; }
.fd-1 { top: 30px;    left: 6%;   transform: rotate(-8deg); }
.fd-2 { bottom: 34px; left: 10%;  transform: rotate(4deg); }
.fd-3 { top: 46px;    right: 7%;  transform: rotate(7deg); }
.fd-4 { bottom: 30px; right: 11%; transform: rotate(-5deg); }

/* ---------- Footer ---------- */
.site-footer { background: var(--invert-bg); color: var(--invert-soft); padding: 46px 0 26px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 30px; }
.site-footer h4 {
  color: var(--invert-ink); font-size: 11.5px; text-transform: uppercase;
  letter-spacing: .9px; margin: 0 0 13px; font-family: 'Inter', sans-serif; font-weight: 700;
}
.site-footer a { display: block; font-size: 13.5px; padding: 3px 0; color: var(--invert-soft); }
.site-footer a:hover { color: var(--yellow); }
.site-footer .logo { color: var(--invert-ink); }
.footer-bottom {
  border-top: 1px solid var(--invert-line); margin-top: 30px; padding-top: 20px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 12px; color: var(--invert-faint); align-items: center;
}
.social { display: flex; gap: 9px; }
.social a {
  width: 34px; height: 34px; border-radius: 9px; border: 1.5px solid var(--invert-line);
  display: grid; place-items: center; font-size: 13px; transition: all .14s;
}
.social a:hover { border-color: var(--yellow); color: var(--yellow); transform: translateY(-2px); }

/* ---------- Forms ---------- */
.field { margin-bottom: 18px; }
.field label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.field input[type=text], .field input[type=email], .field input[type=number],
.field input[type=url], .field input[type=password], .field input[type=search],
.field textarea, .field select, .field input[type=file] {
  width: 100%; padding: 11px 14px; border: 2px solid var(--line);
  border-radius: var(--r-sm); font-family: inherit; font-size: 14px; background: var(--surface);
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--border);
}
.field .help { font-size: 12px; color: var(--ink-faint); margin-top: 5px; }
.field.error input, .field.error textarea { border-color: var(--red); }
.field .err { color: var(--red); font-size: 13px; margin-top: 5px; font-weight: 500; }
.star-input { display: none; }
.star-row { display: flex; gap: 4px; align-items: center; }
.star-row label { cursor: pointer; font-size: 26px; color: var(--line); margin: 0; line-height: 1; }
.star-row label.on { color: var(--yellow-dk); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* ---------- Alerts & misc ---------- */
.alert {
  padding: 13px 16px; border-radius: var(--r-sm); margin-bottom: 16px;
  border: 2px solid; font-size: 14px; font-weight: 500;
}
.alert-success { background: var(--lt-green); border-color: var(--green); color: var(--alert-ok-ink); }
.alert-error   { background: var(--alert-no-bg); border-color: var(--red); color: var(--alert-no-ink); }
.alert-info    { background: var(--lt-blue); border-color: var(--blue); color: var(--alert-in-ink); }
.alert-warn    { background: var(--lt-yellow); border-color: var(--yellow-dk); color: var(--alert-wa-ink); }

.notice {
  background: var(--lt-yellow); border-left: 4px solid var(--yellow-dk);
  padding: 14px 16px; border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: 13px; margin-bottom: 20px; color: var(--ink-soft);
}
.notice strong { color: var(--ink); }

.page-head { margin: 32px 0 22px; }
.page-head h1 { font-size: 36px; margin: 0 0 7px; letter-spacing: -.035em; }
.page-head p { color: var(--ink-soft); margin: 0; }

.empty { text-align: center; padding: 46px 20px; color: var(--ink-faint); }
.empty .ico { font-size: 40px; margin-bottom: 10px; }

.pagination { display: flex; gap: 8px; justify-content: center; margin: 26px 0; flex-wrap: wrap; }
.pagination a, .pagination span {
  padding: 8px 14px; border: 1.5px solid var(--line); border-radius: 10px;
  background: var(--surface); font-size: 14px;
}
.pagination .cur { background: var(--btn-solid-bg); color: var(--btn-solid-ink); border-color: var(--btn-solid-bg); }

table.data { width: 100%; border-collapse: collapse; font-size: 14px; }
table.data th, table.data td { padding: 11px 12px; text-align: left; border-bottom: 1px solid var(--line); }
table.data th {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--ink-faint); font-weight: 700;
}

.rating-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 13px; }
.rating-row .lbl { width: 140px; color: var(--ink-soft); flex-shrink: 0; }
.bar { flex: 1; height: 8px; background: var(--line-soft); border-radius: 4px; overflow: hidden; }
.bar span { display: block; height: 100%; background: var(--yellow); }
.rating-row .val { width: 28px; text-align: right; font-weight: 700; }
.big-rating { font-size: 42px; font-weight: 800; line-height: 1; letter-spacing: -.04em; }
.stars { color: var(--yellow-dk); }

.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.photo-grid img { width: 100%; height: 160px; object-fit: cover; display: block; }
.photo-item { border: 2px solid var(--border); border-radius: var(--r-sm); overflow: hidden; background: var(--surface); }
.photo-item .cap { padding: 10px 12px; font-size: 12px; }

.prose { max-width: 720px; }
.prose h2 { font-size: 24px; margin: 28px 0 10px; }
.prose h3 { font-size: 16px; margin: 20px 0 8px; }
.prose p, .prose li { color: var(--ink-soft); font-size: 15px; }
.prose ul { padding-left: 20px; }
.prose li { margin-bottom: 7px; }

/* ---------- Moderation ---------- */
.mod-bar { background: var(--invert-bg); color: var(--invert-ink); padding: 11px 0; font-size: 14px; margin-bottom: 22px; }
.mod-bar .wrap { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.mod-bar a { color: var(--invert-soft); font-weight: 500; }
.mod-bar a:hover { color: var(--yellow); }
.flag-box { background: var(--alert-no-bg); border: 2px solid var(--red); border-radius: var(--r-sm); padding: 12px 14px; margin: 12px 0; font-size: 13px; }
.overdue { background: var(--alert-no-bg); }

/* ==========================================================================
   Responsive
   ========================================================================== */
/* Signed-in staff carry two extra header items (Dashboard, Sign out), so the
   row runs out of room sooner than it does for a visitor. Shed the least
   useful links progressively rather than overflowing. */
/* Counting from the START keeps these stable: a signed-in moderator has an
   extra Dashboard link at the end, and counting from the end would hide the
   one link they actually came for.
   Order: 1 Home, 2 Companies, 3 Reviews, 4 Salaries, 5 Photos,
          6 Discussions, 7 More, [8 Dashboard for staff] */
@media (max-width: 1400px) {
  .header-inner { gap: 18px; }
  .nav { gap: 16px; }
  .nav > a:nth-of-type(7) { display: none; }        /* More */
}

/* Staff see Dashboard + Sign out on top of the usual row, so the same
   pressure arrives at a wider viewport. `body.is-staff` is set server-side. */
@media (max-width: 1500px) {
  body.is-staff .nav > a:nth-of-type(6) { display: none; }   /* Discussions */
}
@media (max-width: 1320px) {
  body.is-staff .nav > a:nth-of-type(5) { display: none; }   /* Photos */
}
@media (max-width: 1200px) {
  body.is-staff .nav > a:nth-of-type(4) { display: none; }   /* Salaries */
}
@media (max-width: 1080px) {
  body.is-staff .nav > a:nth-of-type(3) { display: none; }   /* Reviews */
}

@media (max-width: 1160px) {
  .nav { gap: 14px; }
  .nav > a:nth-of-type(6) { display: none; }        /* Discussions */
  .hdr-login { display: none; }
}

@media (max-width: 1120px) {
  .features { grid-template-columns: repeat(3, 1fr); }
  .header-inner { gap: 14px; }
  .nav > a:nth-of-type(5) { display: none; }        /* Photos */
}

@media (max-width: 1040px) {
  .nav > a:nth-of-type(4) { display: none; }        /* Salaries */
}

@media (max-width: 1000px) {
  .nav { gap: 12px; }
  .nav > a { font-size: 13.5px; }
}

@media (max-width: 900px) {
  /* Hero stacks, illustration drops below the text. */
  .hero-grid { grid-template-columns: 1fr; gap: 30px; }
  .hero-scribble { display: none; }
  .cols { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }

  /* Navigation collapses to logo + search + hamburger. */
  .nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg); border-bottom: 2px solid var(--border); padding: 8px 20px 16px;
  }
  .nav > a { padding: 11px 0; border-bottom: 1px solid var(--line); }
  .nav > a.active::after { display: none; }
  /* Controls hidden from the cramped header reappear here. */
  .nav .nav-extra { display: flex; gap: 8px; padding: 12px 0 2px; }
  .nav .nav-extra .btn { flex: 1; }
  .nav-toggle { display: grid; }
  #nav-check:checked ~ .nav { display: flex; }
  .header-inner { position: relative; }
  .hdr-login { display: none; }
}

@media (max-width: 560px) {
  /* Four icon-only buttons in a row made the primary action look like a
     decoration -- a lone detective emoji reads as nothing. Search and theme
     move into the menu; the CTA keeps its words, because "Leak Anonymously"
     is the only thing on this page we actually want tapped. */
  .header-inner { gap: 10px; padding: 10px 14px; }
  .logo { font-size: 18px; }
  .logo-mask { display: none; }
  .header-right { gap: 8px; }

  /* Search lives in the hero and in the menu; the header icon is redundant
     on a screen this narrow. */
  .header-right > a.icon-btn[aria-label="Search"] { display: none; }
  .theme-toggle { display: none; }

  /* Yellow rather than black on mobile: it is the single action we want
     tapped, and against a dark header a black button disappears. The brand
     colour is fixed in both themes, so the label is pinned dark. */
  .header-right .btn-dark {
    padding: 9px 14px; font-size: 13px; border-radius: 999px;
    background: var(--yellow); color: #111111; border-color: var(--yellow);
  }
  .header-right .btn-dark:hover { box-shadow: 2px 2px 0 var(--yellow-dk); }
  .btn-cta-label { display: inline; }
  /* Emoji stays: with search and theme moved into the menu there is room,
     and it makes the button read as an action rather than a nav link. */
  .nav-toggle { width: 36px; height: 36px; }
}

@media (max-width: 380px) {
  /* Very narrow: shorten the label rather than dropping it. */
  .logo { font-size: 16.5px; }
  .header-inner { gap: 8px; padding: 10px 12px; }
  .btn-cta-label { font-size: 0; }
  .btn-cta-label::after {
    content: "Leak"; font-size: 13px;
  }
}

@media (max-width: 640px) {
  /* Nothing may reach the screen edge: one gutter, set once on the wrapper. */
  .wrap { padding-left: 16px; padding-right: 16px; }

  /* The search field was being squeezed to about 20 visible characters by the
     button beside it. Stack them so the input gets the full width. */
  /* A wrapping flex row let the input drop below the icon once the
     placeholder outgrew the space. Switching to a two-row grid pins the
     icon and input to row one and the button to row two, so they cannot
     separate at any width. */
  .searchbar {
    max-width: 100%; display: grid; gap: 8px;
    grid-template-columns: auto 1fr;
    padding: 10px 12px 10px 14px; border-radius: var(--r);
  }
  .searchbar .mag { grid-column: 1; align-self: center; }
  /* 16px minimum, or iOS zooms the page on focus. */
  .searchbar input {
    grid-column: 2; min-width: 0; padding: 6px 0; font-size: 16px;
  }
  .searchbar button {
    grid-column: 1 / -1; margin: 2px 0 0;
    padding: 11px 0; border-radius: 10px; font-size: 14px;
  }

  .hero { padding: 0; }
  .hero h1 { font-size: clamp(29px, 9vw, 40px); }
  .hero-text { padding: 4px 0 26px; }
  .hero-lede { font-size: 15.5px; margin-bottom: 20px; }

  /* Two even columns instead of content-width columns that left one stat
     hanging. */
  /* Four columns with hairline dividers, stacked icon over number over
     label -- reads as one band of proof rather than four loose items. */
  .stats {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
    margin-top: 22px;
  }
  .stat {
    flex-direction: column; align-items: center; text-align: center;
    gap: 4px; padding: 4px 4px;
    border-right: 1px solid var(--line);
    justify-content: flex-start;
  }
  .stat:last-child { border-right: 0; }
  .stat .ico { font-size: 20px; }
  .stat > span { display: block; }
  .stat-n { font-size: 17px; letter-spacing: -.03em; }
  /* Fixed height so a label that wraps to two lines does not make its column
     taller than the others. */
  .stat-l {
    font-size: 10px; line-height: 1.2; min-height: 2.4em;
    display: flex; align-items: flex-start; justify-content: center;
  }

  /* Feature cards scroll horizontally, bleeding to the screen edge so the
     cut-off card is a visible affordance rather than looking broken. */
  /* A 2x2 grid rather than a rail: four tiles visible at once beats two
     visible and four hidden behind a swipe nobody performs. The last two
     features stay reachable from the nav and the footer. */
  .features {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    margin: 22px 0 0; padding: 0; overflow: visible;
  }
  .feature {
    min-height: 84px; padding: 13px 13px 12px;
    position: relative; flex-direction: column;
  }
  .feature:nth-child(n+5) { display: none; }
  .feature .ico { font-size: 21px; }
  /* Right padding keeps the two-line labels clear of the arrow, which is
     absolutely positioned in that corner. */
  .feature h3 {
    font-size: 13.5px; margin: 7px 34px 0 0; line-height: 1.2;
  }
  .feature p { display: none; }
  /* --ink inverts in dark mode, which made a near-white arrow sit on a
     near-white circle. --btn-solid-* is the pair that stays legible in both
     themes (it already backs the solid buttons). */
  .feature .fa {
    position: absolute; right: 11px; bottom: 11px;
    width: 26px; height: 26px; margin: 0; font-size: 12px;
    background: var(--btn-solid-bg); color: var(--btn-solid-ink);
    border-color: var(--btn-solid-bg);
  }

  /* Phone keeps the horizontal rail: a grid of eight tiles is a wall. */
  .rail {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    padding: 2px 16px 12px; margin: 0 -16px;
  }
  .rail .co-card { flex: 0 0 142px; scroll-snap-align: start; }
  .rail::after { content: ""; flex: 0 0 4px; }

  .section { margin: 30px 0; }
  .section-head { margin-bottom: 14px; gap: 8px; }
  .section-head h2 { font-size: 22px; }
  .section-head .scribble { font-size: 15px; }
  .section-head .more { font-size: 13px; }

  .grid-2 { grid-template-columns: 1fr; }
  .cols { gap: 18px; }
  .card { padding: 18px; margin-bottom: 16px; }
  .final-cta { padding: 38px 20px; margin: 34px 0; }
  .final-cta .doodle { display: none; }
  .footer-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* Cards on the pale washes: their backgrounds become deep tints in dark mode,
   so text and icon strokes follow --wash-ink instead of assuming black. */
.feature, .feature h3, .quote-card, .quote-card p,
.redflag-card, .redflag-card h3 { color: var(--wash-ink); }
.feature p { color: var(--ink-soft); }
/* Desktop: a translucent disc on the pale wash. Scoped to the wide viewport
   so it cannot override the solid mobile treatment below, which needs higher
   contrast against the deep dark-mode tints. */
@media (min-width: 641px) {
  .fa { background: rgba(255,255,255,.55); border-color: var(--border); color: var(--wash-ink); }
  :root[data-theme="dark"] .fa { background: rgba(255,255,255,.08); }
}
@media (min-width: 641px) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .fa { background: rgba(255,255,255,.08); }
}
.spill .head, .spill .body { background: var(--surface); border-color: var(--border); }
.spill .sign { color: #111; }

/* ---------- Fixed-contrast surfaces ----------
   These are painted with brand colours that are identical in both themes, so
   their text is pinned dark rather than following --ink (which inverts). */
.btn-yellow { color: #111111; }
.badge-verified, .badge-flag { color: #FFFFFF; }
.spill .sign { color: #111111; }
.sticker, .note { color: #111111; }

/* ---------- Programmatic SEO pages ---------- */
.crumbs {
  font-size: 12.5px; color: var(--ink-faint); margin: 22px 0 14px;
  display: flex; gap: 7px; flex-wrap: wrap; align-items: center;
}
.crumbs a { color: var(--ink-soft); }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }

.seo-head {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  justify-content: space-between;
}
.seo-head-main { display: flex; align-items: center; gap: 16px; min-width: 0; }
.seo-head h1 {
  font-size: clamp(21px, 3vw, 30px); margin: 0; letter-spacing: -.03em; line-height: 1.15;
}
.seo-sub { color: var(--ink-faint); font-size: 13.5px; margin: 5px 0 0; }
.seo-score { text-align: center; }
.seo-h2 { font-size: 19px; margin: 0 0 14px; letter-spacing: -.02em; }

.role-icon {
  width: 54px; height: 54px; border-radius: 13px; display: grid;
  place-items: center; font-size: 24px;
  background: var(--lt-yellow); border: 2px solid var(--border);
}

.salary-band {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  justify-content: space-between;
}
.salary-big {
  font-size: 32px; font-weight: 800; letter-spacing: -.035em; line-height: 1;
}
.salary-range {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 600; color: var(--ink-soft);
}
.salary-bar {
  width: 110px; height: 7px; border-radius: 4px;
  background: linear-gradient(to right, var(--teal), var(--yellow));
}

/* Pros/cons lines on the SEO review cards. */
.pc { font-size: 13px; margin: 0 0 5px; }
.pc-pro { color: var(--green); }
.pc-con { color: var(--red); }

.pill-n {
  font-size: 11px; color: var(--ink-faint); font-weight: 700; margin-left: 3px;
}

@media (max-width: 640px) {
  .seo-head { gap: 14px; }
  .salary-band { gap: 14px; }
}

/* ---------- Admin dashboard ---------- */
.kpis {
  display: grid; gap: 14px; margin-bottom: 20px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.kpi {
  background: var(--surface); border: 2px solid var(--border);
  border-radius: var(--r); padding: 18px;
}
.kpi-n { font-size: 30px; font-weight: 800; letter-spacing: -.035em; line-height: 1; }
.kpi-l {
  font-size: 12px; color: var(--ink-faint); font-weight: 600;
  text-transform: uppercase; letter-spacing: .5px; margin-top: 6px;
}
.kpi-sub { font-size: 12.5px; color: var(--ink-faint); margin-top: 4px; }

.spark { width: 100%; height: 64px; display: block; overflow: visible; }
.spark-axis {
  display: flex; justify-content: space-between;
  font-size: 11.5px; color: var(--ink-faint); margin-top: 6px;
}

.mini-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
}

.queue-row, .rank-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--line-soft); font-size: 14px;
}
.queue-row:last-child, .rank-row:last-child { border-bottom: 0; }
.queue-row:hover { text-decoration: none; }
.queue-row:hover span:first-child { text-decoration: underline; }
.rank-row a:hover { text-decoration: underline; }
.queue-n {
  min-width: 26px; text-align: center; font-weight: 800; font-size: 13px;
  padding: 2px 8px; border-radius: 999px;
  background: var(--surface-2); color: var(--ink-faint);
}
.queue-n.hot { background: var(--red); color: #fff; }

@media (max-width: 640px) {
  .kpi { padding: 14px; }
  .kpi-n { font-size: 25px; }
}

/* ---------- First-post empty state ----------
   A launch-day homepage has no content by definition; this is the most
   important screen on the site until someone posts, so it gets real copy
   rather than a shrug. */
.first-post { padding: 46px 26px; max-width: 560px; margin: 0 auto; }
.first-post .ico { font-size: 44px; margin-bottom: 14px; }
/* .empty sets a muted colour on the whole block, so the headline has to
   reassert it or it reads as body text. */
.first-post-h {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  font-size: 21px; color: var(--ink) !important; margin: 0 0 10px;
  letter-spacing: -.02em; line-height: 1.25;
}
.first-post-p {
  color: var(--ink-soft); font-size: 14.5px; margin: 0 0 22px; line-height: 1.55;
}
.first-post-fine {
  font-size: 12.5px; color: var(--ink-faint); margin: 12px 0 0;
}

/* ---------- Share row ---------- */
.share {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding-top: 14px; margin-top: 16px; border-top: 1px solid var(--line-soft);
}
.share-l {
  font-size: 12px; font-weight: 700; color: var(--ink-faint);
  text-transform: uppercase; letter-spacing: .5px; margin-right: 2px;
}
.share-b {
  font-family: inherit; font-size: 12.5px; font-weight: 600;
  padding: 6px 13px; border-radius: 999px; cursor: pointer;
  border: 1.5px solid var(--line); background: var(--surface); color: var(--ink-soft);
  transition: border-color .14s, color .14s, transform .14s;
}
.share-b:hover {
  text-decoration: none; transform: translateY(-1px);
  border-color: var(--border); color: var(--ink);
}
.share-b.wa:hover { border-color: #25D366; color: #128C4A; }
.share-b.li:hover { border-color: #0A66C2; color: #0A66C2; }
.share-b.copy.done { border-color: var(--green); color: var(--green); }

/* Share prompt on the confirmation page. Placed here because someone who has
   just posted is the most willing they will ever be to tell other people. */
.post-share {
  margin-top: 26px; padding-top: 22px; border-top: 2px dashed var(--line);
  text-align: left;
}
.post-share-h {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  font-size: 17px; margin: 0 0 6px; color: var(--ink);
}
.post-share-p {
  font-size: 14px; color: var(--ink-soft); margin: 0 0 4px; line-height: 1.5;
}
.post-share .share { border-top: 0; padding-top: 6px; margin-top: 8px; }

/* Theme toggle inside the mobile menu uses the same icon-swap logic as the
   header button. */
.theme-toggle-menu .t-dark { display: none; }
.theme-toggle-menu .t-light { display: inline; }
:root[data-theme="dark"] .theme-toggle-menu .t-dark { display: inline; }
:root[data-theme="dark"] .theme-toggle-menu .t-light { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle-menu .t-dark { display: inline; }
  :root:not([data-theme="light"]) .theme-toggle-menu .t-light { display: none; }
}

/* ---------- Admin screens ---------- */
.mod-bar .wrap { gap: 16px; }
.mod-bar a.on { color: var(--yellow); font-weight: 600; }
.mod-bar-right { margin-left: auto; }

.admin-row { padding: 16px 18px; margin-bottom: 12px; }
.admin-row-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.admin-toggle {
  cursor: pointer; font-size: 13.5px; font-weight: 600;
  color: var(--ink-soft); padding: 10px 0 2px;
}
.admin-toggle:hover { color: var(--ink); }
.admin-form { padding-top: 14px; }

.admin-actions {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  padding-top: 12px; margin-top: 12px; border-top: 1px solid var(--line-soft);
}
.admin-actions input[type=text] {
  flex: 1; min-width: 180px; padding: 7px 12px; font-size: 13px;
  border: 1.5px solid var(--line); border-radius: 9px;
  background: var(--surface); color: var(--ink); font-family: inherit;
}
.admin-actions input[type=text]:focus { outline: none; border-color: var(--border); }

.inline-check {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13.5px; font-weight: 500; cursor: pointer; margin: 0;
}
.inline-check input { width: auto; margin: 0; }

code {
  background: var(--surface-2); padding: 2px 7px; border-radius: 5px;
  font-size: 12.5px; border: 1px solid var(--line-soft);
}

@media (max-width: 640px) {
  .mod-bar .wrap { gap: 12px; font-size: 13px; }
  .mod-bar-right { margin-left: 0; }
  .admin-row-head { gap: 10px; }
  .admin-actions input[type=text] { min-width: 100%; }
}

/* ---------- Hero handwritten aside ----------
   Hidden on desktop, where the artwork already fills the right-hand column
   and this would collide with it. */
.hero-head { display: block; }
.hero-note { display: none; }

.scroll-cue { display: none; }

@media (max-width: 640px) {
  /* Headline and the handwritten note sit side by side; the note takes the
     space the headline's short third line leaves empty. */
  /* The note sits BELOW the headline now rather than beside it: the new
     two-line headline needs the full column width, and squeezing it wrapped
     "BEFORE YOU JOIN." onto two lines of its own. */
  .hero-head { display: block; }
  .hero-note {
    display: flex; align-items: center; gap: 10px;
    margin: 12px 0 0; text-align: left;
  }
  .hero-arrow {
    width: 38px; height: 26px; color: var(--ink);
    display: block; flex: 0 0 auto;
    transform: scaleX(-1) rotate(-8deg);   /* point back at the headline */
  }
  .hero-note-t {
    font-family: 'Caveat', cursive; font-weight: 700;
    font-size: 16px; line-height: 1.2; color: var(--ink-soft);
    display: block;
  }
  .hero-note-t { flex: 1 1 auto; }
  .hero-crown {
    color: var(--yellow-dk); font-size: 16px;
    transform: rotate(-8deg); flex: 0 0 auto;
  }

  /* Tells the reader there is more below, which an above-the-fold hero
     otherwise hides. */
  .scroll-cue {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    margin: 20px 0 4px; font-size: 11px; font-weight: 700;
    letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink-faint);
  }
  .scroll-cue svg { width: 15px; height: 9px; }
}

@media (max-width: 360px) {
  .hero-note-t { font-size: 15px; }
  .hero-arrow { width: 32px; }
}

@media (max-width: 640px) {
  /* Caveat for the wordmark on mobile, matching the hand-drawn reference.
     Desktop keeps Space Grotesk, where the tighter geometry suits the wider
     header. */
  .logo { font-family: 'Caveat', cursive; font-size: 25px; font-weight: 700; }
  .logo .lk {
    padding: 0 8px; border-radius: 5px 12px 6px 11px;
    transform: rotate(-2deg);
  }
}

/* ---------- Staff sign-in ---------- */
.login-card { margin-top: 56px; padding: 34px 28px 28px; text-align: center; }
.login-mark { font-size: 38px; line-height: 1; margin-bottom: 10px; }
.login-card h1 { font-size: 26px; margin: 0 0 4px; letter-spacing: -.03em; }
.login-sub { color: var(--ink-faint); font-size: 14px; margin: 0 0 22px; }
.login-card .field { text-align: left; }
.login-fine {
  font-size: 12.5px; color: var(--ink-faint); margin: 18px 0 0; line-height: 1.5;
}
.login-fine a { text-decoration: underline; }