/* LIT Insider - the Crew training floor, opened to everybody.
   Shared by the landing page (lit-insider.html) and the six item pages
   (offers.html and the rest, written by build-pages.mjs).
   Landing: a poster hero where L-I-T unfolds into its three words over
   Kory's gym, then Kory's letter, the cards of what lands, featured pieces
   on a rail, a live poll, who it's for, behind the brand, and the sign-up.
   Item pages: a split hero, the detail with a side panel, then the other
   five items. One look only (the Crew's dark floor), so no light theme. */
:root {
  --floor: #0e0f10;
  --mat: #16181a;
  --mat-2: #1d2023;
  --line: #2a2d30;
  --chalk: #ecebe6;
  --chalk-2: #b9bab4;
  --chalk-3: #8f918b;
  --go: #e54476;
  --go-deep: #cf2d65;
  --on-go: #0e0f10;
  --scrim: rgba(14, 15, 16, 0.72);

  --font-display: "Archivo", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --font-body: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --gutter: clamp(1rem, 4vw, 3rem);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
/* The page's own, so `hidden` beats a display rule wherever it is served. */
[hidden] { display: none !important; }
/* Clears the sticky top bar (100px) and the pink band (60px) under it. */
html { scroll-behavior: smooth; scroll-padding-top: calc(100px + 60px + 1rem); }
body {
  margin: 0;
  background: var(--floor);
  color: var(--chalk);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* The page scrollbar in the flare pink. It belongs to the root element, so
   the colour is set there; Safari reads the -webkit- rules instead. */
html { scrollbar-color: var(--go) var(--floor); }
::-webkit-scrollbar { width: 12px; height: 12px; background: var(--floor); }
::-webkit-scrollbar-thumb { background: var(--go); border: 3px solid var(--floor); border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: var(--go-deep); }
body::before {
  content: ""; position: fixed; inset: 0 0 auto;
  height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--floor);
}
::selection { background: var(--go); color: var(--on-go); }
:focus-visible { outline: 2px solid var(--go); outline-offset: 3px; }
a { color: inherit; text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; }

.wrap {
  width: 100%;
  max-width: 88rem;
  margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}

/* ---- Type ------------------------------------------------------------ */
.display {
  font-family: var(--font-display);
  font-stretch: 68%;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  line-height: 0.92;
  text-wrap: balance;
  margin: 0;
}
.h2 { font-size: clamp(2.4rem, 1.6rem + 3.6vw, 4.75rem); }
.h3 { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.25rem); }
.data {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--chalk-3);
  margin: 0;
}
.lede {
  margin: 0;
  max-width: 52ch;
  color: var(--chalk-2);
  font-size: clamp(1.05rem, 0.98rem + 0.3vw, 1.2rem);
  line-height: 1.55;
}
.prose { max-width: 62ch; color: var(--chalk-2); }
.prose p { margin: 0 0 1em; }
.prose p:last-child { margin-bottom: 0; }
.prose strong { color: var(--chalk); font-weight: 600; }
.go-text { color: var(--go); }

/* ---- Buttons --------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: 3.25rem; padding: 0 1.5rem;
  font-family: var(--font-display); font-stretch: 75%; font-weight: 700;
  font-size: 1.15rem; letter-spacing: 0.02em; text-transform: uppercase;
  text-decoration: none; border: 1px solid transparent; border-radius: 0; cursor: pointer;
  transition: transform 120ms var(--ease-out), background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}
.btn-go { background: var(--go); color: var(--on-go); }
.btn-ghost { background: transparent; color: var(--chalk); border-color: var(--line); }
.btn:active { transform: scale(0.97); }
.btn svg { width: 1.1em; height: 1.1em; }
@media (hover: hover) and (pointer: fine) {
  .btn-go:hover { background: var(--chalk); }
  .btn-ghost:hover { border-color: var(--chalk); }
}

/* ---- Bar --------------------------------------------------------------- */
.bar {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
  background: rgba(14, 15, 16, 0.78);
  backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1px solid var(--line);
}
.bar-in { display: flex; align-items: center; gap: 1.5rem; height: 100px; }
.mark { display: inline-flex; align-items: center; gap: 0.8rem; text-decoration: none; }
.mark img { width: 3rem; height: auto; }
.mark span {
  font-family: var(--font-display); font-stretch: 68%; font-weight: 800;
  font-size: 1.75rem; text-transform: uppercase; white-space: nowrap; letter-spacing: 0.01em;
}
.bar-links { display: flex; gap: 0.25rem; list-style: none; margin: 0 0 0 auto; padding: 0; }
.bar-links a {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 0.7rem;
  font-size: 0.875rem; color: var(--chalk-2); text-decoration: none; white-space: nowrap;
  border-bottom: 2px solid transparent; transition: color 160ms ease, border-color 160ms ease;
}
@media (hover: hover) and (pointer: fine) { .bar-links a:hover { color: var(--chalk); border-bottom-color: var(--go); } }
.bar-links a[aria-current="page"] { color: var(--chalk); border-bottom-color: var(--go); }
.bar-in > .btn { min-height: 2.6rem; padding: 0 1rem; font-size: 1rem; }
/* 78rem is where the six links stop fitting beside "My Insider" and Join.
   The bar account, menu button, menu and insider.js switch at the same width. */
/* Without the links the mark takes the spare room, so whatever is left of
   Sign in, Join and the menu button (signed in, Join goes) sits on the right. */
@media (max-width: 78rem) { .bar-links { display: none; } .bar-in > .mark { margin-right: auto; } }
@media (prefers-reduced-transparency: reduce) { .bar { background: var(--floor); backdrop-filter: none; } }

/* The pink band, anchored under the top bar inside the same sticky header. */
.band { background: var(--go); color: var(--on-go); }
.band-in { height: 60px; display: flex; align-items: center; }
/* Packed from the left, every button the same width: a row of equal columns
   as wide as the longest name, so the tabs line up as one set. The list
   starts at the gutter, under the mark above. */
.band-links {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: stretch;
  list-style: none; margin: 0; padding: 0; height: 100%; width: max-content; max-width: 100%;
}
.band-links li { height: 100%; min-width: 0; }
.band-links a {
  position: relative; display: flex; align-items: center; justify-content: center; text-align: center; width: 100%; height: 100%; padding: 0 1.1rem;
  font-family: var(--font-display); font-stretch: 72%; font-weight: 800;
  font-size: clamp(1rem, 0.9rem + 0.35vw, 1.2rem); letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--on-go); text-decoration: none; white-space: nowrap;
  transition: background-color 160ms ease, color 160ms ease;
}
/* The current page is the dark tab the rollover shows, held. */
.band-links a[aria-current="page"] { background: var(--on-go); color: var(--go); }
/* Rollover: the link becomes a dark tab with pink type, the full height of
   the band. Keyboard focus gets the same tab, so it reads the same way. */
.band-links a:focus-visible { outline: none; background: var(--on-go); color: var(--go); }
.band-links a:active { background: var(--floor); color: var(--chalk); }
@media (hover: hover) and (pointer: fine) {
  .band-links a:hover { background: var(--on-go); color: var(--go); }
}
/* Narrower: the same equal buttons, a little tighter; where six in a row
   no longer fit, they sit four and three, still equal, so every link shows
   and none scrolls out of sight. On a phone the band is a dropdown (below). */
@media (max-width: 90rem) {
  .band-links a { padding: 0 0.75rem; font-size: clamp(0.9rem, 0.7rem + 0.45vw, 1.05rem); }
}
@media (max-width: 52rem) {
  .band-in { height: auto; }
  .band-links { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; }
  .band-links li { height: 48px; }
}
@media (max-width: 40rem) {
  .bar-in { height: 68px; }
  .mark img { width: 2.4rem; }
  .mark span { font-size: 1.4rem; }
  .band-in { height: auto; }
  .band-links { padding: 0.25rem 0; }
  .band-links a { height: 2.75rem; font-size: 0.85rem; padding: 0 0.25rem; }
}
/* On a phone, once insider.js is running (data-dropdown), the band is one
   bar naming the current page; tapping it drops the six links down over
   the page as a full-width list. Without the script the 3 x 2 grid above
   stands. */
.band-toggle { display: none; }
@media (max-width: 40rem) {
  .band[data-dropdown] { position: relative; }
  .band[data-dropdown] .band-in { height: 52px; min-height: 0; }
  .band[data-dropdown] .band-toggle {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; height: 100%;
    padding: 0; background: none; border: 0; color: var(--on-go); cursor: pointer;
    font-family: var(--font-display); font-stretch: 72%; font-weight: 800; font-size: 1.15rem;
    letter-spacing: 0.02em; text-transform: uppercase; text-align: left;
  }
  .band[data-dropdown] .band-toggle svg { width: 1.1rem; height: 1.1rem; flex: none; transition: transform 200ms var(--ease-out); }
  .band[data-dropdown][data-open="true"] .band-toggle svg { transform: rotate(180deg); }
  .band[data-dropdown] .band-toggle:focus-visible { outline: 2px solid var(--on-go); outline-offset: -4px; }
  .band[data-dropdown] .band-links {
    display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 40; margin: 0; width: auto; max-width: none; grid-auto-flow: row;
    grid-template-columns: minmax(0, 1fr); padding: 0.25rem 0 0.5rem; height: auto;
    background: var(--go); border-top: 1px solid rgba(0, 0, 0, 0.18); box-shadow: 0 18px 32px rgba(0, 0, 0, 0.45);
  }
  .band[data-dropdown][data-open="true"] .band-links { display: grid; animation: band-drop 180ms var(--ease-out); }
  .band[data-dropdown] .band-links a { justify-content: flex-start; text-align: left; height: 3rem; padding: 0 max(var(--gutter), env(safe-area-inset-left, 0px)); font-size: 1.15rem; }
}
@keyframes band-drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .band[data-dropdown][data-open="true"] .band-links { animation: none; } .band[data-dropdown] .band-toggle svg { transition: none; } }

/* Sign in / My Insider, beside Join (insider.js swaps it once signed in). */
.bar-account { flex: none; margin-left: 1.5rem; margin-right: 1rem; padding: 0.5rem 0.25rem; color: var(--chalk); font-family: var(--font-display); font-stretch: 75%; font-weight: 800; font-size: 1rem; letter-spacing: 0.03em; text-transform: uppercase; text-decoration: none; border-bottom: 2px solid transparent; transition: border-color 160ms ease; }
.bar-account:hover { border-bottom-color: var(--go); }
.bar-account:focus-visible { outline: 2px solid var(--go); outline-offset: 3px; }
@media (max-width: 78rem) { .bar-in > .bar-account { margin-left: 0; } }
.menu-account { margin-top: 1rem; width: 100%; justify-content: center; }
.menu-account + .menu-join { margin-top: 0.6rem; }
@media (max-width: 40rem) { .bar-account { display: none; } }

/* Mobile menu */
.menu-btn {
  display: none; position: relative; width: 2.75rem; height: 2.75rem; margin-left: 0.25rem;
  background: none; border: 1px solid var(--line); cursor: pointer;
  transition: border-color 160ms ease;
}
.menu-btn span {
  position: absolute; left: 0.75rem; right: 0.75rem; height: 2px; background: var(--chalk);
  transition: transform 220ms var(--ease-out), opacity 160ms ease;
}
.menu-btn span:nth-child(1) { top: calc(50% - 7px); }
.menu-btn span:nth-child(2) { top: calc(50% - 1px); }
.menu-btn span:nth-child(3) { top: calc(50% + 5px); }
.menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 78rem) { .menu-btn { display: block; } }

.menu {
  position: fixed; left: 0; right: 0; bottom: 0; top: var(--header-h, 7.5rem); z-index: 19;
  background: var(--floor); overflow-y: auto; overscroll-behavior: contain;
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out), visibility 0s linear 200ms;
}
.menu[data-open="false"] { opacity: 0; transform: translateY(-0.5rem); visibility: hidden; pointer-events: none; }
.menu[data-open="true"] { transition-delay: 0s; }
.menu-in { display: grid; gap: 2rem; padding-block: 1.75rem calc(2rem + env(safe-area-inset-bottom, 0px)); }
.menu-group { display: grid; gap: 0.5rem; }
.menu-group ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.menu-group li { border-bottom: 1px solid var(--line); }
.menu-group a {
  display: flex; align-items: center; justify-content: space-between; min-height: 3.5rem;
  font-family: var(--font-display); font-stretch: 70%; font-weight: 800; font-size: 1.6rem;
  text-transform: uppercase; text-decoration: none; color: var(--chalk);
}
.menu-group a::after { content: "\2192"; color: var(--go); font-size: 1.2rem; }
.menu-join { width: 100%; }
@media (min-width: 78.01rem) { .menu { display: none; } }
html.menu-open { overflow: hidden; }

/* ---- Hero -------------------------------------------------------------- */
.hero { position: relative; isolation: isolate; overflow: hidden; border-bottom: 1px solid var(--line); }
.hero-photo { position: absolute; inset: 0; z-index: -2; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 78% 30%; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, var(--floor) 0%, rgba(14,15,16,0.94) 32%, rgba(14,15,16,0.55) 58%, rgba(14,15,16,0.05) 82%),
    linear-gradient(0deg, var(--floor) 0%, rgba(14,15,16,0) 30%);
}
.hero-in {
  display: grid; gap: 1.5rem;
  padding-block: clamp(3rem, 8vh, 6rem) clamp(2.5rem, 6vh, 4.5rem);
  max-width: 88rem;
}
.hero-copy { display: grid; gap: 1.5rem; max-width: 46rem; }

.acro {
  font-family: var(--font-display); font-stretch: 62%; font-weight: 900;
  text-transform: uppercase; line-height: 0.84; letter-spacing: -0.01em;
  font-size: clamp(3.6rem, 1rem + 7.8vw, 8.25rem);
  margin: 0; display: grid;
}
.acro-line { display: flex; align-items: baseline; }
.acro .i { color: var(--go); position: relative; z-index: 1; }
.acro .r { display: inline-block; overflow: hidden; padding-right: 0.04em; }
.acro .r > span { display: inline-block; }
.hero-sub { font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.4rem); line-height: 0.98; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.neon {
  height: 2px; background: var(--go); transform-origin: left center;
  box-shadow: 0 0 18px 1px rgba(229, 68, 118, 0.55);
  margin-top: 0.5rem;
}

@media (max-width: 47.99rem) {
  .hero-photo { position: relative; inset: auto; height: 21rem; }
  .hero-photo img { object-position: 84% 22%; }
  .hero::before {
    inset: 0 0 auto; height: 21rem;
    background: linear-gradient(0deg, var(--floor) 2%, rgba(14,15,16,0.25) 45%, rgba(14,15,16,0.1) 100%);
  }
  .hero-in { padding-block: 0 2.5rem; margin-top: -4.5rem; }
  .acro { font-size: clamp(3.2rem, 16.5vw, 5.5rem); }
}

/* Load sequence: armed only when the script runs and motion is allowed. */
.anim .acro .r > span { transform: translateX(-101%); }
.anim .neon { transform: scaleX(0); }
.anim [data-rise] { opacity: 0; transform: translateY(14px); }

/* ---- Sections ---------------------------------------------------------- */
.section { padding-block: clamp(4rem, 10vw, 8rem); border-bottom: 1px solid var(--line); }
.section-head { display: grid; gap: 1rem; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.section-head .lede { max-width: 56ch; }

/* Letter */
.letter { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.quote {
  font-family: var(--font-display); font-stretch: 70%; font-weight: 800;
  font-size: clamp(2rem, 1.3rem + 2.9vw, 3.9rem); line-height: 0.96;
  text-transform: uppercase; text-wrap: balance; margin: 0 0 2rem;
  text-indent: -0.42em;
}
.quote .go-text { font-weight: 900; }
.beliefs { list-style: none; margin: 2rem 0; padding: 0; display: grid; border-top: 1px solid var(--line); }
.beliefs li {
  display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1rem; align-items: baseline;
  padding: 0.9rem 0; border-bottom: 1px solid var(--line);
}
.beliefs li span:last-child {
  font-family: var(--font-display); font-stretch: 72%; font-weight: 700;
  text-transform: uppercase; font-size: 1.3rem; line-height: 1.1;
}
.portrait { position: relative; margin: 0; }
.portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.portrait figcaption { display: flex; justify-content: space-between; gap: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--line); margin-top: 0.75rem; }
.stat { display: flex; align-items: baseline; gap: 0.75rem; margin-top: 1.5rem; }
.stat b {
  font-family: var(--font-display); font-stretch: 62%; font-weight: 900;
  font-size: clamp(3.5rem, 2.5rem + 4vw, 6rem); line-height: 0.8; color: var(--go);
}
@media (max-width: 55.99rem) { .letter { grid-template-columns: 1fr; } .portrait { max-width: 26rem; } }

/* What lands: six cards. Three across on a wide screen, two on a tablet,
   one on a phone; auto-fill picks the count from the space. */
.cards {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
}
.card {
  display: flex; flex-direction: column; gap: 1rem; min-width: 0;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  background: var(--mat); border: 1px solid var(--line);
  border-top: 2px solid var(--line);
  transition: border-color 200ms ease, background-color 200ms ease;
}
.card-tag {
  align-self: flex-start; padding: 0.3rem 0.55rem; border: 1px solid var(--line);
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}
.card-title {
  margin: 0;
  font-family: var(--font-display); font-stretch: 68%; font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.6rem, 1.3rem + 1vw, 2.15rem); line-height: 0.95; text-wrap: balance;
}
.card .prose { font-size: 0.975rem; }
.card-link {
  margin-top: auto; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.75rem;
  font-family: var(--font-display); font-stretch: 75%; font-weight: 700; font-size: 1.05rem;
  text-transform: uppercase; letter-spacing: 0.02em; text-decoration: none; color: var(--go);
}
.card-link::after { content: "\2192"; transition: transform 160ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .card:hover { border-color: var(--chalk-3); border-top-color: var(--go); background: var(--mat-2); }
  .card:hover .card-tag { background: var(--go); border-color: var(--go); color: var(--on-go); }
  .card-link:hover::after { transform: translateX(3px); }
}

/* Rail */
.rail-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1.5rem; margin-bottom: 2rem; }
.rail-ctrl { display: flex; gap: 0.5rem; }
.sq { width: 3rem; height: 3rem; display: grid; place-items: center; background: none; border: 1px solid var(--line); cursor: pointer; transition: border-color 160ms ease, transform 120ms var(--ease-out); }
.sq:active { transform: scale(0.95); }
.sq svg { width: 1.1rem; height: 1.1rem; }
@media (hover: hover) and (pointer: fine) { .sq:hover { border-color: var(--chalk); } }
.rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(15rem, 19rem); gap: 1rem;
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
  scroll-padding-inline: max(var(--gutter), env(safe-area-inset-left, 0px));
  scrollbar-width: none; cursor: grab; touch-action: pan-x pan-y;
}
.rail::-webkit-scrollbar { display: none; }
.rail.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.rail.is-settling { scroll-snap-type: none; }
.piece { scroll-snap-align: start; margin: 0; }
.piece-img { overflow: hidden; background: var(--mat); }
.piece img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; pointer-events: none; transition: transform 500ms var(--ease-out); }
.piece figcaption { display: grid; gap: 0.2rem; padding-top: 0.85rem; }
.piece-name { font-family: var(--font-display); font-stretch: 72%; font-weight: 700; text-transform: uppercase; font-size: 1.2rem; line-height: 1.05; }
@media (hover: hover) and (pointer: fine) { .piece:hover img { transform: scale(1.03); } }
.rail-foot { margin-top: 2rem; }

/* Poll */
.voice { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.wants { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; gap: 0.35rem; }
.wants li { display: flex; gap: 0.75rem; align-items: baseline; color: var(--chalk-2); }
.wants li::before { content: ""; width: 0.6rem; height: 2px; background: var(--go); flex: none; transform: translateY(-0.3rem); }
.poll { background: var(--mat); border: 1px solid var(--line); padding: clamp(1.25rem, 3vw, 2.25rem); display: grid; gap: 1.25rem; }
.poll-q { font-size: clamp(1.7rem, 1.3rem + 1.5vw, 2.5rem); }
.options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
.opt {
  position: relative; display: grid; gap: 0.25rem; text-align: left; padding: 1rem 1.1rem; min-height: 5.25rem;
  background: var(--mat-2); border: 1px solid var(--line); cursor: pointer;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 120ms var(--ease-out);
}
.opt:active { transform: scale(0.98); }
.opt b { font-family: var(--font-display); font-stretch: 72%; font-weight: 800; text-transform: uppercase; font-size: 1.25rem; line-height: 1; }
.opt span { font-size: 0.875rem; color: var(--chalk-3); transition: color 180ms ease; }
.opt[aria-checked="true"] { background: var(--go); border-color: var(--go); color: var(--on-go); }
.opt[aria-checked="true"] span { color: rgba(14, 15, 16, 0.75); }
@media (hover: hover) and (pointer: fine) { .opt:not([aria-checked="true"]):hover { border-color: var(--chalk-3); } }
.poll-status { min-height: 1.6rem; color: var(--chalk-2); font-size: 0.9375rem; margin: 0; }
@media (max-width: 55.99rem) { .voice { grid-template-columns: 1fr; } }
@media (max-width: 26rem) { .options { grid-template-columns: 1fr; } }

/* Everybody */
.everybody { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.nots { list-style: none; margin: 0 0 2.5rem; padding: 0; display: grid; gap: 0.6rem; }
.nots li {
  font-family: var(--font-display); font-stretch: 70%; font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.35rem, 1rem + 1.5vw, 2.2rem); line-height: 1.05; color: var(--chalk-3);
}
/* The strike is a background so it follows the words across a wrap. */
.nots .strike {
  background: linear-gradient(var(--go), var(--go)) left 56% / 100% max(2px, 0.09em) no-repeat;
  transition: background-size 700ms var(--ease-in-out);
  transition-delay: var(--d, 0ms);
}
.nots.armed .strike { background-size: 0% max(2px, 0.09em); }
.nots.armed.is-in .strike { background-size: 100% max(2px, 0.09em); }
.belong { font-size: clamp(2rem, 1.3rem + 3vw, 3.9rem); margin-bottom: 1.5rem; }
.crowd { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 2rem 0 0; padding: 0; }
.crowd li { padding: 0.45rem 0.8rem; border: 1px solid var(--line); font-size: 0.9375rem; color: var(--chalk-2); }
.mosaic { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
.mosaic img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.mosaic img:nth-child(even) { transform: translateY(2rem); }
@media (max-width: 55.99rem) { .everybody { grid-template-columns: 1fr; } .mosaic { max-width: 30rem; margin-bottom: 2rem; } }

/* Behind the brand */
.behind { position: relative; isolation: isolate; overflow: hidden; border-bottom: 1px solid var(--line); }
.behind-photo { position: absolute; inset: 0; z-index: -2; }
.behind-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 25%; }
.behind::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, var(--floor) 0%, rgba(14,15,16,0.92) 36%, rgba(14,15,16,0.3) 70%, rgba(14,15,16,0.1) 100%);
}
.behind-in { padding-block: clamp(5rem, 14vw, 10rem); display: grid; gap: 1.5rem; }
.behind-in > * { max-width: 40rem; }
.behind .h2 { font-size: clamp(2.6rem, 1.5rem + 4.6vw, 5.75rem); }
@media (max-width: 47.99rem) {
  .behind-photo { position: relative; height: 18rem; }
  .behind::before { inset: 0 0 auto; height: 18rem; background: linear-gradient(0deg, var(--floor) 0%, rgba(14,15,16,0) 60%); }
  .behind-in { padding-block: 0 4rem; margin-top: -3rem; }
}

/* Join */
.join { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.join-quote { font-size: clamp(2.3rem, 1.4rem + 4vw, 5rem); margin-bottom: 1.75rem; }
.form { background: var(--mat); border: 1px solid var(--line); padding: clamp(1.25rem, 3vw, 2rem); display: grid; gap: 1.1rem; }
.field { display: grid; gap: 0.4rem; }
.field label { font-size: 0.875rem; font-weight: 500; color: var(--chalk-2); }
.field input {
  min-height: 3.1rem; padding: 0 0.9rem; font: inherit; color: var(--chalk);
  background: var(--floor); border: 1px solid var(--line); border-radius: 0;
  transition: border-color 160ms ease;
}
.field input:focus-visible { outline: none; border-color: var(--go); box-shadow: 0 0 0 1px var(--go); }
.field input[aria-invalid="true"] { border-color: var(--go); }
.field-err { margin: 0; font-size: 0.875rem; color: var(--go); min-height: 1.3rem; }
.form .btn { width: 100%; }
.form-note { margin: 0; font-size: 0.8125rem; color: var(--chalk-3); line-height: 1.5; }
.form-done { display: grid; gap: 0.75rem; }
.signoff { display: grid; gap: 0.35rem; margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); max-width: 34rem; }
.signoff .sig { font-family: var(--font-display); font-stretch: 75%; font-weight: 800; font-size: 2rem; text-transform: uppercase; line-height: 1; }
@media (max-width: 55.99rem) { .join { grid-template-columns: 1fr; } }

/* Footer */
/* The bottom padding leaves room for the scroll-to-top button at the very end. */
.foot { padding-block: 3rem calc(6rem + env(safe-area-inset-bottom, 0px)); }
.foot-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; align-items: end; }
.foot-line { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2.1rem); color: var(--chalk-2); }
.foot-line b { color: var(--chalk); font-weight: 800; }
.foot-links { display: flex; flex-wrap: wrap; gap: 0.6rem; list-style: none; margin: 0; padding: 0; }

/* Scroll to top: floats bottom-right once the hero is gone. */
.to-top {
  position: fixed; z-index: 15;
  right: max(1rem, calc(env(safe-area-inset-right, 0px) + 1rem));
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; gap: 0.45rem;
  min-height: 3rem; padding: 0 1rem;
  background: rgba(22, 24, 26, 0.86); color: var(--chalk);
  backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid var(--line); border-radius: 0; cursor: pointer;
  font-family: var(--font-display); font-stretch: 75%; font-weight: 700; font-size: 1rem;
  letter-spacing: 0.04em; text-transform: uppercase;
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out), visibility 0s linear 200ms, border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}
.to-top svg { width: 1rem; height: 1rem; }
.to-top[data-shown="false"] { opacity: 0; transform: translateY(0.75rem); visibility: hidden; }
.to-top[data-shown="true"] { transition-delay: 0s; }
.to-top:active { transform: scale(0.96); }
@media (hover: hover) and (pointer: fine) { .to-top:hover { background: var(--go); border-color: var(--go); color: var(--on-go); } }
@media (prefers-reduced-transparency: reduce) { .to-top { background: var(--mat); backdrop-filter: none; } }
.foot-legal { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
/* The social accounts (the Linktree's four), under the rule, above the legal line. */
.foot-social { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.foot-social > p { margin: 0; color: var(--chalk-3); }
.foot-social ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.foot-social a { display: inline-flex; align-items: center; gap: 0.65rem; min-height: 3rem; padding: 0.45rem 1rem 0.45rem 0.8rem; border: 1px solid var(--line); color: var(--chalk); text-decoration: none; transition: border-color 160ms ease, background-color 160ms ease; }
.foot-social svg { width: 1.25rem; height: 1.25rem; fill: currentColor; flex: none; }
.foot-social a > span { display: grid; line-height: 1.15; }
.foot-social b { font-size: 0.9375rem; font-weight: 600; }
.foot-social b + span { font-family: var(--font-mono); font-size: 0.75rem; color: var(--chalk-3); }
.foot-social a:focus-visible { outline: 2px solid var(--go); outline-offset: 2px; }
.foot-social a:active { background: var(--mat); }
@media (hover: hover) and (pointer: fine) { .foot-social a:hover { border-color: var(--go); background: var(--mat); } }
@media (max-width: 40rem) { .foot-social ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; } .foot-social a { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .foot-social a { transition: none; } }
@media (max-width: 40rem) { .foot-in { grid-template-columns: 1fr; } }

/* ---- Item pages --------------------------------------------------------- */
/* Split hero: what the item is on the left, its picture on the right. */
.page-hero { border-bottom: 1px solid var(--line); }
.page-hero-in {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 5rem); align-items: center;
  padding-block: clamp(2.5rem, 6vw, 5rem);
}
.page-hero-copy { display: grid; gap: 1.35rem; min-width: 0; }
.crumbs { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.crumbs a { color: var(--chalk-3); text-decoration: none; }
.crumbs a:hover { color: var(--chalk); }
.page-title { font-size: clamp(2.8rem, 1.6rem + 5vw, 6.25rem); line-height: 0.88; }
.page-tag { align-self: start; justify-self: start; padding: 0.3rem 0.55rem; background: var(--go); color: var(--on-go); }
.page-photo { margin: 0; }
.page-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
@media (max-width: 55.99rem) {
  .page-hero-in { grid-template-columns: 1fr; }
  .page-photo { order: -1; max-width: 28rem; }
  .page-photo img { aspect-ratio: 4 / 3; object-position: 50% 18%; }
}

/* Detail: the words on the left, a panel beside them. */
.detail { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.detail .prose { font-size: 1.05rem; }
.detail h2 { margin-bottom: 1.5rem; }
.points { list-style: none; margin: 2rem 0 0; padding: 0; border-top: 1px solid var(--line); }
.points li {
  display: flex; gap: 0.9rem; align-items: baseline; padding: 0.95rem 0; border-bottom: 1px solid var(--line);
  font-family: var(--font-display); font-stretch: 72%; font-weight: 700; text-transform: uppercase;
  font-size: 1.3rem; line-height: 1.1;
}
.points li::before { content: ""; width: 0.7rem; height: 2px; background: var(--go); flex: none; transform: translateY(-0.3rem); }
.panel-box {
  position: sticky; top: calc(100px + 60px + 1.5rem);
  display: grid; gap: 1rem; padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--mat); border: 1px solid var(--line); border-top: 2px solid var(--go);
}
.panel-box .btn { width: 100%; }
.panel-box .prose { font-size: 0.975rem; }
.page-quote {
  margin: 2.5rem 0 0; padding: 1.25rem 0 0 1.25rem; border-left: 2px solid var(--go);
  font-family: var(--font-display); font-stretch: 72%; font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.3rem); line-height: 1; text-wrap: balance;
}
.page-quote cite { display: block; margin-top: 0.85rem; font-style: normal; }
.mini-pieces { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); gap: 1rem; margin-top: 2.5rem; }
.mini-pieces .piece img { pointer-events: auto; }
@media (max-width: 55.99rem) { .detail { grid-template-columns: 1fr; } .panel-box { position: static; } }

/* The other five items, as the landing page's cards. */
/* Five cards: one row of five when there is room, three then two on a
   tablet, one column on a phone, so none is ever left alone on a row. */
.more .cards { grid-template-columns: 1fr; }
@media (min-width: 40rem) { .more .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 72rem) { .more .cards { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.more .card-title { font-size: clamp(1.4rem, 1.2rem + 0.6vw, 1.75rem); }

/* ---- Hero carousel (item pages) ----------------------------------------- */
/* Three slides stacked in one grid cell. Every photo fills the whole slide;
   the words are always on the left, over a gradient. A slide arrives behind
   blinds: eight vertical slats that open across it (--blind, registered
   below so it animates), over the slide that is leaving. */
@property --blind { syntax: '<percentage>'; inherits: false; initial-value: 12.5%; }
.carousel { position: relative; isolation: isolate; border-bottom: 1px solid var(--line); background: var(--floor); overflow: hidden; }
.slides { display: grid; touch-action: pan-y; }
.slide {
  grid-area: 1 / 1; position: relative; isolation: isolate;
  display: flex; align-items: center;
  min-height: clamp(32rem, 70vh, 44rem);
  visibility: hidden;
}
.slide.is-active, .slide.is-leaving { visibility: visible; }
.slide.is-leaving { z-index: 1; }
.slide.is-active { z-index: 2; }
.slide.is-entering {
  -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 var(--blind), transparent var(--blind) 12.5%);
  mask-image: repeating-linear-gradient(90deg, #000 0 var(--blind), transparent var(--blind) 12.5%);
  animation: blinds 900ms var(--ease-in-out) both;
}
@keyframes blinds { from { --blind: 0%; } to { --blind: 12.5%; } }
.slide-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.slide-bg img {
  width: 100%; max-width: none; height: 100%; object-fit: cover;
  transform: scale(1.06); transition: transform 1800ms var(--ease-out);
}
.slide.is-active .slide-bg img { transform: scale(1); }
/* A standing product photo, on a wide screen, is drawn wider than the slide
   from its left edge, which moves the person right of the middle, clear of
   the words, and crops from near the top so faces stay in frame. */
@media (min-width: 48rem) {
  .slide[data-fit="portrait"] .slide-bg img { width: 118%; }
}
.slide-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, var(--floor) 0%, rgba(14,15,16,0.9) 30%, rgba(14,15,16,0.45) 58%, rgba(14,15,16,0.05) 85%),
    linear-gradient(0deg, rgba(14,15,16,0.85) 0%, rgba(14,15,16,0) 32%);
}
.slide-in { width: 100%; padding-block: 4rem 7rem; }
.slide-copy { display: grid; gap: 1.25rem; max-width: 40rem; min-width: 0; justify-items: start; text-align: left; }
.slide-title { font-size: clamp(2.6rem, 1.4rem + 4.4vw, 5.5rem); line-height: 0.88; }
.slide .lede { color: var(--chalk); max-width: 44ch; }
/* Each slide's words rise in once its blinds are opening. */
.slide .slide-copy > * {
  opacity: 0; transform: translateY(14px);
  transition: opacity 500ms ease, transform 700ms var(--ease-out);
}
.slide.is-active .slide-copy > * { opacity: 1; transform: none; }
.slide.is-active .slide-copy > :nth-child(1) { transition-delay: 380ms; }
.slide.is-active .slide-copy > :nth-child(2) { transition-delay: 450ms; }
.slide.is-active .slide-copy > :nth-child(3) { transition-delay: 520ms; }
.slide.is-active .slide-copy > :nth-child(4) { transition-delay: 590ms; }

.carousel-ui {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-block: 0 1.5rem; pointer-events: none;
}
.carousel-ui > * { pointer-events: auto; }
.carousel-crumbs { color: var(--chalk-2); }
.carousel-ctrl { display: flex; align-items: center; gap: 0.5rem; }
.carousel-ctrl .sq { background: rgba(14, 15, 16, 0.55); }
.carousel-pause .i-play { display: none; }
.carousel-pause[aria-pressed="true"] .i-play { display: block; }
.carousel-pause[aria-pressed="true"] .i-pause { display: none; }
.dots { display: flex; gap: 0.35rem; margin-left: 0.5rem; }
.dot { display: grid; place-items: center; width: 3rem; height: 3rem; padding: 0; background: none; border: 0; cursor: pointer; }
.dot span { position: relative; display: block; width: 2.5rem; height: 3px; background: rgba(236, 235, 230, 0.3); overflow: hidden; }
.dot span::after {
  content: ""; position: absolute; inset: 0; background: var(--go);
  transform-origin: left center; transform: scaleX(var(--fill, 0));
  transition: transform 120ms linear;
}
.dot[aria-current="true"] span { background: rgba(236, 235, 230, 0.45); }
@media (hover: hover) and (pointer: fine) { .dot:hover span { background: var(--chalk-2); } }

@media (max-width: 47.99rem) {
  .slide { align-items: flex-end; min-height: 38rem; }
  .slide-bg::after {
    background: linear-gradient(0deg, var(--floor) 4%, rgba(14,15,16,0.82) 42%, rgba(14,15,16,0.2) 75%, rgba(14,15,16,0.1) 100%);
  }
  .slide-in { padding-block: 3rem 6rem; }
  .carousel-crumbs { display: none; }
  .carousel-ui { justify-content: flex-start; padding-block: 0 1rem; }
  .dots { margin-left: 0.25rem; }
  .dot { width: 2.5rem; }
  .dot span { width: 1.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .slide.is-entering { animation: none; -webkit-mask-image: none; mask-image: none; }
  .slide-bg img, .slide .slide-copy > * { transition: none; transform: none; }
  .slide .slide-copy > * { opacity: 1; }
}

.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; }

/* ---- Interact: community feed and messages (community.js) ------------- */
.c-hero { padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(1.5rem, 4vw, 2.5rem); border-bottom: 1px solid var(--line); }
.c-hero .wrap { display: grid; gap: 1rem; }
.c-title { font-size: clamp(2.6rem, 2rem + 3vw, 4.5rem); margin: 0; }
.c-hero .lede { margin: 0; max-width: 56ch; }
.c-section { padding-block: clamp(2rem, 5vw, 3.5rem); }
.c-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, 22rem); gap: 2rem; align-items: start; }
.c-main { display: grid; gap: 1.25rem; min-width: 0; }
.c-side { position: sticky; top: calc(var(--header-h, 160px) + 1rem); display: grid; gap: 1rem; }
@media (max-width: 64rem) {
  .c-grid { grid-template-columns: minmax(0, 1fr); }
  .c-side { position: static; order: -1; }
}
.c-card { background: var(--mat); border: 1px solid var(--line); padding: 1.25rem; display: grid; gap: 0.85rem; }
.c-card > p { margin: 0; color: var(--chalk-2); }
.c-card .data { color: var(--chalk-3); }
.c-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.c-row-between { justify-content: space-between; }
.c-card .btn { min-height: 2.75rem; padding: 0 1.15rem; font-size: 1rem; }
.c-loading { margin: 0; }
.c-small { margin: 0; font-size: 0.8125rem; line-height: 1.5; color: var(--chalk-3); }
.c-error { margin: 0; color: #ff8fae; font-size: 0.875rem; }
.c-error:empty { display: none; }
.c-link { background: none; border: 0; padding: 0; color: var(--chalk); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.c-label { font-size: 0.875rem; color: var(--chalk-2); }
.c-card input[type="text"], .c-card textarea, .c-dialog textarea {
  width: 100%; background: var(--floor); color: var(--chalk); border: 1px solid var(--line);
  padding: 0.75rem 0.85rem; font: inherit; font-size: 1rem; resize: vertical;
}
.c-card input[type="text"]:focus-visible, .c-card textarea:focus-visible, .c-dialog textarea:focus-visible { outline: 2px solid var(--go); outline-offset: 1px; }
.c-check { display: flex; gap: 0.6rem; align-items: flex-start; color: var(--chalk-2); font-size: 0.9375rem; }
.c-check input { width: 1.15rem; height: 1.15rem; margin-top: 0.15rem; accent-color: var(--go); }
.c-count { margin-left: 0.25rem; }

.c-avatar { flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; overflow: hidden; display: inline-grid; place-items: center; background: var(--mat-2); border: 1px solid var(--line); color: var(--chalk); font-family: var(--font-display); font-weight: 800; }
.c-avatar img { width: 100%; height: 100%; object-fit: cover; }
.c-avatar-sm { width: 1.85rem; height: 1.85rem; font-size: 0.8rem; }
.c-avatar-btn { cursor: pointer; border-radius: 50%; }
.c-avatar-btn:focus-within, .c-avatar-btn:hover { outline: 2px solid var(--go); outline-offset: 2px; }
.c-who { display: flex; align-items: center; gap: 0.75rem; }
.c-who b { color: var(--chalk); }
.c-posting { display: grid; gap: 0.1rem; }
.c-preview { display: grid; gap: 0.5rem; justify-items: start; }
.c-preview img { max-height: 14rem; max-width: 100%; border: 1px solid var(--line); }

.c-feed { display: grid; gap: 1rem; }
.c-post-head { display: flex; align-items: center; gap: 0.75rem; }
.c-post-who { display: grid; gap: 0.1rem; flex: 1; min-width: 0; }
.c-post-who b { color: var(--chalk); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-who { color: inherit; text-decoration: none; min-width: 0; }
.c-who:hover b, .c-who:focus-visible b { text-decoration: underline; text-underline-offset: 3px; }
.c-post-who .c-who b { display: block; }
.c-off { margin: 0.25rem 0 0; color: var(--chalk-3); }
.c-body { margin: 0; color: var(--chalk); white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; }
.c-photo { display: block; border: 1px solid var(--line); background: var(--floor); }
.c-photo img { display: block; width: 100%; max-height: 34rem; object-fit: contain; }
/* Formatted posts: headlines, lists, bold and italic (community.js rich()). */
.c-rich { white-space: normal; display: grid; gap: 0.6rem; }
.c-rich p, .c-rich ul, .c-rich ol { margin: 0; }
.c-rich ul, .c-rich ol { padding-left: 1.3rem; display: grid; gap: 0.25rem; }
.c-rich li::marker { color: var(--go); }
.c-rich .c-h { margin: 0.2rem 0 0; font-family: var(--font-display); font-size: 1.3rem; line-height: 1.15; text-transform: uppercase; letter-spacing: 0.01em; color: var(--chalk); }
.c-rich strong { color: var(--chalk); }
.c-rich a { color: var(--chalk); text-decoration: underline; text-decoration-color: var(--go); text-underline-offset: 0.2em; }
.c-post-meta { display: inline-flex; flex-wrap: wrap; gap: 0.35rem; }
.c-time { color: inherit; text-decoration: none; }
.c-time:hover, .c-time:focus-visible { text-decoration: underline; }
/* Link previews: the linked page's picture, site and title. */
.c-linkcard { display: grid; grid-template-columns: minmax(0, 1fr); border: 1px solid var(--line); background: var(--floor); color: inherit; text-decoration: none; overflow: hidden; }
.c-linkcard:hover .c-linkcard-text b, .c-linkcard:focus-visible .c-linkcard-text b { text-decoration: underline; }
.c-linkcard:focus-visible { outline: 2px solid var(--go); outline-offset: 2px; }
.c-linkcard-img { display: block; aspect-ratio: 1.91 / 1; background: var(--mat-2); }
.c-linkcard-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.c-linkcard-text { display: grid; gap: 0.2rem; padding: 0.75rem 0.9rem; min-width: 0; }
.c-linkcard-text .data { color: var(--chalk-3); text-transform: uppercase; font-size: 0.6875rem; }
.c-linkcard-text b { color: var(--chalk); line-height: 1.3; }
.c-linkcard-text > span:last-child:not(.data) { color: var(--chalk-2); font-size: 0.875rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.c-linkcard.is-small { grid-template-columns: 5.5rem minmax(0, 1fr); }
.c-linkcard.is-small .c-linkcard-img { aspect-ratio: 1; }
.c-linkcard.is-small .c-linkcard-text { padding: 0.55rem 0.7rem; }
.c-linkcard.is-small .c-linkcard-text b { font-size: 0.875rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Several photos: a swipeable row that snaps one photo at a time. */
.c-carousel { position: relative; border: 1px solid var(--line); background: var(--floor); }
.c-carousel-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.c-carousel-track::-webkit-scrollbar { display: none; }
.c-carousel-track:focus-visible { outline: 2px solid var(--go); outline-offset: -2px; }
.c-slide { flex: 0 0 100%; margin: 0; scroll-snap-align: start; display: grid; place-items: center; aspect-ratio: var(--ratio, 1); max-height: 34rem; }
.c-slide img { width: 100%; height: 100%; object-fit: contain; display: block; }
.c-carousel-btn { position: absolute; top: 50%; translate: 0 -50%; width: 2.75rem; height: 2.75rem; border: 0; background: rgba(10, 10, 12, 0.72); color: var(--chalk); font-size: 1.6rem; line-height: 1; cursor: pointer; }
.c-carousel-btn.is-prev { left: 0.5rem; }
.c-carousel-btn.is-next { right: 0.5rem; }
.c-carousel-btn:disabled { opacity: 0; pointer-events: none; }
.c-carousel-btn:focus-visible { outline: 2px solid var(--go); outline-offset: 2px; }
.c-carousel-count { position: absolute; top: 0.6rem; right: 0.6rem; padding: 0.2rem 0.5rem; background: rgba(10, 10, 12, 0.72); color: var(--chalk); }
.c-dots { position: absolute; bottom: 0.6rem; left: 50%; translate: -50% 0; display: flex; gap: 0.35rem; }
.c-dots span { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: rgba(255, 255, 255, 0.45); }
.c-dots span.is-on { background: var(--go); }
.c-video { border: 1px solid var(--line); background: #000; }
.c-video video { display: block; width: 100%; height: auto; max-height: 34rem; background: #000; }
/* A repost: the shared post as a card inside it. */
.c-embed { display: grid; gap: 0.7rem; padding: 0.9rem; border: 1px solid var(--line); background: var(--floor); }
.c-embed .c-photo img, .c-embed .c-video video, .c-embed .c-slide { max-height: 22rem; }
.c-embed.is-gone { padding: 0.75rem 0.9rem; }
.c-hidden-note { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.c-hidden-note p { margin: 0; color: var(--chalk-2); }
.c-shared { display: grid; gap: 0.6rem; margin-bottom: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--line); }
.c-shared .data { margin: 0; color: var(--go); }
.c-edit-wrap { display: grid; gap: 0.6rem; }
.c-edit { width: 100%; min-height: 6rem; padding: 0.7rem 0.8rem; background: var(--floor); color: var(--chalk); border: 1px solid var(--line); font: inherit; line-height: 1.5; resize: vertical; }
.c-edit:focus-visible { outline: 2px solid var(--go); outline-offset: 1px; }
.c-reply-foot { margin-top: 0.15rem !important; }
.c-reply-like { font-size: 0.8125rem; min-height: 2rem; }
.c-reply-like[aria-pressed="true"] { color: var(--go); }
/* The composer's formatting buttons and upload tray. */
.c-tools { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.c-tool { min-width: 2.5rem; min-height: 2.5rem; padding: 0 0.6rem; background: none; border: 1px solid var(--line); color: var(--chalk-2); font: inherit; font-weight: 700; cursor: pointer; }
.c-tool:hover { color: var(--chalk); border-color: var(--chalk-3); }
.c-tool:focus-visible { outline: 2px solid var(--go); outline-offset: 2px; }
.c-tray { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); gap: 0.5rem; }
.c-tray[hidden] { display: none; }
.c-tray-item { position: relative; aspect-ratio: 1; border: 1px solid var(--line); background: var(--floor); overflow: hidden; }
.c-tray-item img, .c-tray-item video { width: 100%; height: 100%; object-fit: cover; display: block; }
.c-tray-item.is-uploading img, .c-tray-item.is-uploading video { opacity: 0.45; }
.c-tray-item.is-error { border-color: #e5484d; }
.c-tray-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255, 255, 255, 0.15); }
.c-tray-bar span { display: block; height: 100%; width: 0; background: var(--go); transition: width 0.2s linear; }
.c-tray-item:not(.is-uploading) .c-tray-bar { display: none; }
.c-tray-status { position: absolute; left: 0.35rem; bottom: 0.45rem; font-size: 0.6875rem; color: var(--chalk); text-shadow: 0 1px 2px #000; }
.c-tray-remove { position: absolute; top: 0.25rem; right: 0.25rem; width: 2rem; height: 2rem; border: 0; background: rgba(10, 10, 12, 0.8); color: var(--chalk); font-size: 1.1rem; line-height: 1; cursor: pointer; }
.c-tray-remove:focus-visible { outline: 2px solid var(--go); outline-offset: 1px; }
@media (prefers-reduced-motion: reduce) { .c-tray-bar span { transition: none; } }
.c-acts { gap: 1.25rem; }
.c-act { background: none; border: 1px solid var(--line); color: var(--chalk); padding: 0.4rem 0.8rem; min-height: 2.5rem; font: inherit; cursor: pointer; }
.c-act[aria-pressed="true"] { border-color: var(--go); color: var(--go); }
@media (hover: hover) and (pointer: fine) { .c-act:hover { border-color: var(--chalk-3); } }
.c-replies { display: grid; gap: 0.75rem; border-left: 2px solid var(--line); padding-left: 0.9rem; }
.c-replies:empty { display: none; }
.c-reply { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.6rem; align-items: start; }
.c-reply p { margin: 0; }
.c-reply b { color: var(--chalk); }
.c-reply-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem; }
.c-reply-form .c-error { grid-column: 1 / -1; }
.c-new, .c-more, .c-empty { text-align: center; }

.c-menu { position: relative; }
.c-menu-btn { background: none; border: 1px solid transparent; color: var(--chalk-2); width: 2.5rem; height: 2.5rem; font-size: 1.25rem; line-height: 1; cursor: pointer; }
.c-menu-btn:hover, .c-menu-btn[aria-expanded="true"] { border-color: var(--line); color: var(--chalk); }
.c-menu-list { position: absolute; right: 0; top: 100%; z-index: 5; min-width: 13rem; display: grid; background: var(--mat-2); border: 1px solid var(--line); }
.c-menu-list[hidden] { display: none; }
.c-menu-list button { background: none; border: 0; border-bottom: 1px solid var(--line); color: var(--chalk); text-align: left; padding: 0.7rem 0.9rem; font: inherit; font-size: 0.9375rem; cursor: pointer; }
.c-menu-list button:last-child { border-bottom: 0; }
.c-menu-list button:hover, .c-menu-list button:focus-visible { background: var(--go); color: var(--on-go); outline: none; }

.c-side-head { display: flex; align-items: center; justify-content: space-between; margin: 0; }
.c-badge { display: inline-grid; place-items: center; min-width: 1.4rem; height: 1.4rem; padding: 0 0.35rem; border-radius: 999px; background: var(--go); color: var(--on-go); font-size: 0.75rem; font-weight: 700; font-family: var(--font-body); letter-spacing: 0; }
.c-convos { list-style: none; margin: 0; padding: 0; display: grid; }
.c-convo { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.65rem; align-items: center; background: none; border: 0; border-top: 1px solid var(--line); color: var(--chalk-2); padding: 0.7rem 0; text-align: left; font: inherit; cursor: pointer; }
.c-convo:hover b, .c-convo:focus-visible b { color: var(--go); }
.c-saved-wrap:empty, .c-friends-wrap:empty, .c-msgs-wrap:empty { display: none; }
/* Saved posts: the Friends list box, with each post's first line under its author. */
.c-saved .c-person .c-convo-text .data { font-size: 0.6875rem; }
/* The side column is sticky, so a long list scrolls inside the box. */
.c-saved .c-people { max-height: 22rem; overflow-y: auto; overscroll-behavior: contain; }
.c-post:focus { outline: none; }
.c-post:focus-visible { outline: 2px solid var(--go); outline-offset: 2px; }
/* Feed filters: All posts, Following, Saved. */
.c-tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem; }
.c-tabs[hidden] { display: none; }
.c-tabs button { min-height: 2.5rem; padding: 0 0.9rem; background: none; border: 1px solid var(--line); color: var(--chalk-2); font: inherit; font-size: 0.9375rem; font-weight: 600; cursor: pointer; }
.c-tabs button[aria-pressed="true"] { background: var(--go); border-color: var(--go); color: var(--on-go); }
.c-tabs button:focus-visible { outline: 2px solid var(--go); outline-offset: 2px; }
/* Friends list: a box that folds open. */
.c-friends { padding: 0; }
.c-friends-sum { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 1rem 1.25rem; cursor: pointer; list-style: none; }
.c-friends-sum::-webkit-details-marker { display: none; }
.c-friends-sum::after { content: "+"; font-size: 1.25rem; line-height: 1; color: var(--go); }
.c-friends[open] .c-friends-sum::after { content: "\2212"; }
.c-friends-sum:focus-visible { outline: 2px solid var(--go); outline-offset: -2px; }
.c-friends-count { display: inline-flex; align-items: center; gap: 0.5rem; margin-left: auto; }
.c-friends-count .data { color: var(--chalk-3); }
.c-friends-body { display: grid; gap: 1rem; padding: 0 1.25rem 1.25rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.c-friends-head { margin: 0 0 0.35rem; color: var(--chalk-2); font-size: 0.75rem; }
.c-people { list-style: none; margin: 0; padding: 0; display: grid; }
.c-person { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.6rem; align-items: center; padding: 0.55rem 0; border-top: 1px solid var(--line); }
.c-person:first-child { border-top: 0; }
.c-person .c-convo-text span { font-size: 0.8125rem; color: var(--chalk-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-person-acts { display: inline-flex; align-items: center; gap: 0.6rem; }
.c-person-acts .c-link { font-size: 0.8125rem; min-height: 2rem; }
.c-mini { min-height: 2rem; padding: 0 0.7rem; font-size: 0.8125rem; }
.c-side-title { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-size: inherit; }
.c-new-msg { min-height: 2.4rem; padding: 0 0.85rem; font-size: 0.875rem; }
.c-convo-top { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; min-width: 0; }
.c-convo-top b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-convo-top .data { flex: none; color: var(--chalk-3); }
.c-convo:disabled { cursor: not-allowed; opacity: 0.55; }
.c-convo:disabled:hover b { color: var(--chalk); }
.c-found:empty { display: none; }
.c-side-card input[type="search"] { width: 100%; min-height: 2.75rem; padding: 0.6rem 0.75rem; background: var(--floor); color: var(--chalk); border: 1px solid var(--line); font: inherit; }
.c-side-card input[type="search"]:focus-visible { outline: 2px solid var(--go); outline-offset: 1px; }
.c-seen { justify-self: end; color: var(--on-go); opacity: 0.85; }
.c-convo-text { display: grid; min-width: 0; }
.c-convo-text b { color: var(--chalk); }
.c-convo-text span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.875rem; }
.c-convo.is-unread .c-convo-text span { color: var(--chalk); }
.c-avatar-wrap { position: relative; display: inline-flex; }
.c-online { position: absolute; right: -1px; bottom: -1px; width: 0.75rem; height: 0.75rem; border-radius: 50%; background: #4ade80; border: 2px solid var(--mat); }
.c-chat-head { display: flex; justify-content: space-between; align-items: center; }
.c-chat-who { display: flex; align-items: center; gap: 0.6rem; margin: 0; }
.c-chat-who b { color: var(--chalk); }
.c-card .c-status { color: #4ade80; }
.c-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; max-height: 22rem; overflow-y: auto; align-content: start; }
.c-msg { justify-self: start; max-width: 85%; background: var(--mat-2); border: 1px solid var(--line); padding: 0.55rem 0.75rem; display: grid; gap: 0.2rem; }
.c-msg p { margin: 0; color: var(--chalk); white-space: pre-wrap; overflow-wrap: anywhere; }
.c-msg.is-mine { justify-self: end; background: var(--go); border-color: var(--go); }
.c-msg.is-mine p, .c-card .c-msg.is-mine .data { color: var(--on-go); }
.c-msg-report { font-size: 0.75rem; color: var(--chalk-3); justify-self: start; }
.c-chat-form { display: grid; gap: 0.5rem; }
.c-chat-actions { display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; }

/* Speech to text (community.js micButton): a mic beside each box. The full
   button says Speak / Stop; the compact one is the mic alone, named for
   screen readers. While it listens it turns flare pink and its dot pulses. */
.c-mic { display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; }
.c-mic svg { width: 1.1rem; height: 1.1rem; flex: none; }
.c-mic-compact {
  justify-content: center; width: 2.75rem; height: 2.75rem; padding: 0;
  background: transparent; color: var(--chalk-2); border: 1px solid var(--line);
  transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease, transform 120ms var(--ease-out);
}
.c-mic-compact:active { transform: scale(0.95); }
@media (hover: hover) and (pointer: fine) { .c-mic-compact:hover { color: var(--chalk); border-color: var(--chalk); } }
.c-mic.is-listening { background: var(--go); border-color: var(--go); color: var(--on-go); position: relative; }
.c-mic.is-listening::after {
  content: ''; position: absolute; top: -4px; right: -4px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--go); box-shadow: 0 0 0 2px var(--mat); animation: c-mic-pulse 1.2s ease-in-out infinite;
}
@keyframes c-mic-pulse { 50% { opacity: 0.35; } }
.c-reply-form.has-mic { grid-template-columns: minmax(0, 1fr) auto auto; }
@media (prefers-reduced-motion: reduce) { .c-mic.is-listening::after { animation: none; } }

.c-dialog { max-width: 36rem; width: calc(100% - 2rem); background: var(--mat); color: var(--chalk); border: 1px solid var(--line); padding: 1.5rem; }
.c-dialog::backdrop { background: rgba(0, 0, 0, 0.7); }
.c-dialog form { display: grid; gap: 0.85rem; }
.c-dialog h2 { margin: 0 0 0.75rem; }
.c-rules { margin: 0 0 1rem; padding-left: 1.25rem; display: grid; gap: 0.6rem; color: var(--chalk-2); line-height: 1.5; }
.c-rules b { color: var(--chalk); }
.c-dialog > .c-small { margin-bottom: 1rem; }
.c-small a { color: var(--chalk); }
.c-flash { position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%); z-index: 50; margin: 0; background: var(--chalk); color: var(--floor); padding: 0.75rem 1.1rem; font-size: 0.9375rem; }
.c-flash[hidden] { display: none; }

/* ---- LIT Insider sign-up above the footer (insider.js) ------------------
   The pink band from the top of the page, again at the bottom. Dark type on
   pink (~5:1). Motion is feedback only and stays under 300ms: the form
   settles out and "You're in." settles in (8px rise, strong ease-out), the
   check draws. Reduced motion keeps the cross-fade and drops the movement. */
.nl { background: var(--go); color: var(--on-go); padding-block: clamp(2.75rem, 7vw, 4.5rem); }
.nl-in { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(1.5rem, 5vw, 4.5rem); align-items: end; position: relative; }
@media (max-width: 56rem) { .nl-in { grid-template-columns: minmax(0, 1fr); align-items: start; } }
.nl-copy { display: grid; gap: 0.9rem; }
.nl .nl-eyebrow { color: var(--on-go); opacity: 0.75; margin: 0; }
.nl-title { margin: 0; display: grid; font-size: clamp(2.4rem, 1.6rem + 3.6vw, 4.75rem); line-height: 0.92; letter-spacing: -0.01em; }
/* Both lines share one grid cell, so swapping them never moves the layout. */
.nl-line { grid-area: 1 / 1; transition: opacity 200ms var(--ease-out), transform 240ms var(--ease-out); }
.nl-done-line { opacity: 0; transform: translateY(8px); }
.nl-lede { margin: 0; max-width: 44ch; font-size: 1.0625rem; line-height: 1.5; }

.nl-form, .nl-done { grid-area: auto; }
.nl-form { display: grid; gap: 0.6rem; transition: opacity 200ms var(--ease-out), transform 240ms var(--ease-out); }
.nl-label { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; }
.nl-field { display: grid; grid-template-columns: minmax(0, 1fr) auto; background: var(--on-go); border: 2px solid var(--on-go); }
.nl-field input {
  min-width: 0; min-height: 3.25rem; padding: 0 1rem; border: 0; background: var(--floor); color: var(--chalk);
  font: inherit; font-size: 1.0625rem;
}
.nl-field input::placeholder { color: var(--chalk-3); }
.nl-field input:focus-visible { outline: 3px solid var(--chalk); outline-offset: -3px; }
.nl-field input[aria-invalid="true"] { box-shadow: inset 0 0 0 2px #ffd1dc; }
.nl-btn {
  min-height: 3.25rem; padding: 0 1.35rem; border: 0; cursor: pointer;
  background: var(--on-go); color: var(--go);
  font-family: var(--font-display); font-stretch: 75%; font-weight: 800; font-size: 1.15rem; letter-spacing: 0.02em; text-transform: uppercase;
  transition: transform 120ms var(--ease-out), background-color 160ms ease, color 160ms ease;
}
.nl-btn:active { transform: scale(0.97); }
.nl-btn:focus-visible { outline: 3px solid var(--chalk); outline-offset: 2px; }
.nl-btn[aria-busy="true"] { cursor: progress; opacity: 0.85; }
@media (hover: hover) and (pointer: fine) { .nl-btn:hover { background: var(--floor); color: var(--chalk); } }
@media (max-width: 30rem) {
  .nl-field { grid-template-columns: minmax(0, 1fr); }
  .nl-btn { width: 100%; }
}
.nl-msg { margin: 0; font-size: 0.875rem; min-height: 1.3em; }
.nl-msg.is-error { font-weight: 600; }

.nl-done { display: flex; gap: 0.85rem; align-items: center; align-self: end; opacity: 0; transform: translateY(8px); transition: opacity 200ms var(--ease-out), transform 240ms var(--ease-out); }
.nl-done[hidden] { display: none; }
.nl-done-note { margin: 0; max-width: 40ch; font-size: 1.0625rem; line-height: 1.45; font-weight: 500; }
.nl-done-note:focus { outline: none; }
.nl-check { flex: none; width: 2.75rem; height: 2.75rem; padding: 0.55rem; background: var(--on-go); color: var(--go); }
.nl-check path { stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset 360ms var(--ease-out) 120ms; }

.nl[data-state="done"] [data-nl-line] { opacity: 0; transform: translateY(-8px); }
.nl[data-state="done"] .nl-done-line { opacity: 1; transform: none; }
.nl[data-state="done"] .nl-form { opacity: 0; transform: translateY(-8px); pointer-events: none; }
.nl[data-state="done"] .nl-done { opacity: 1; transform: none; }
.nl[data-state="done"] .nl-check path { stroke-dashoffset: 0; }
@media (min-width: 56.01rem) {
  /* The confirmation takes the form's place in the grid rather than stacking under it. */
  .nl-form, .nl-done { grid-column: 2; grid-row: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .nl-line, .nl-form, .nl-done { transform: none !important; transition-property: opacity; }
  .nl-check path { transition: none; }
}

/* ---- Codes & Offers: live offers (offers.js) ---------------------------- */
.o-section .section-head { margin-bottom: 1.5rem; }
.o-status { margin-bottom: 1.5rem; }
.o-banner { background: var(--mat); border: 1px solid var(--line); border-left: 3px solid var(--go); padding: 1.25rem; display: grid; gap: 0.75rem; max-width: 46rem; }
.o-banner.is-in { border-left-color: #4ade80; }
.o-banner > p { margin: 0; color: var(--chalk-2); }
.o-banner b { color: var(--chalk); }
.o-banner .data { color: var(--chalk-3); }
.o-row { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.o-banner .btn, .o-card .btn { min-height: 2.75rem; padding: 0 1.15rem; font-size: 1rem; }
.o-join { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem; max-width: 30rem; }
.o-join input[type="email"] { background: var(--floor); color: var(--chalk); border: 1px solid var(--line); padding: 0 0.85rem; min-height: 2.75rem; font: inherit; font-size: 1rem; }
.o-join input[type="email"]:focus-visible { outline: 2px solid var(--go); outline-offset: 1px; }
.o-trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.o-error { margin: 0; color: #ff8fae; font-size: 0.875rem; }
.o-error:empty { display: none; }
.o-done { margin: 0; color: var(--chalk); }
.o-small { margin: 0; font-size: 0.8125rem; color: var(--chalk-3); }
.o-small a { color: var(--chalk); }

.o-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: 1rem; }
.o-card { background: var(--mat); border: 1px solid var(--line); border-top: 3px solid var(--go); padding: 1.5rem; display: grid; gap: 1rem; align-content: start; }
.o-card > p { margin: 0; color: var(--chalk-2); }
.o-card .data { color: var(--chalk-3); }
.o-card-head { display: grid; gap: 0.5rem; justify-items: start; }
.o-card .o-ends { color: var(--on-go); }
.o-headline { margin: 0; font-size: clamp(2rem, 1.6rem + 1.6vw, 2.75rem); line-height: 1; }
.o-title { margin: 0; color: var(--chalk-2); }
.o-pieces { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.o-pieces a { display: grid; gap: 0.35rem; color: var(--chalk-2); text-decoration: none; font-size: 0.8125rem; }
.o-pieces img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: var(--floor); border: 1px solid var(--line); }
.o-pieces a:hover span { color: var(--chalk); }
.o-terms { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.35rem; color: var(--chalk-2); font-size: 0.9375rem; }
.o-terms li::before { content: "— "; color: var(--go); }
.o-code { border-top: 1px solid var(--line); padding-top: 1rem; display: grid; gap: 0.5rem; }
.o-code p { margin: 0; }
.o-code-text { font-family: var(--font-mono); font-size: 1.5rem; letter-spacing: 0.08em; color: var(--chalk); user-select: all; }
.o-code-text.is-locked { color: var(--chalk-3); user-select: none; letter-spacing: 0.15em; }
.o-empty { border-top-color: var(--line); max-width: 46rem; }

.o-how-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (max-width: 56rem) { .o-how-grid { grid-template-columns: minmax(0, 1fr); } }
.o-how h2 { margin: 0.5rem 0 1.5rem; }
.o-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
.o-steps li { display: grid; grid-template-columns: 3rem minmax(0, 1fr); column-gap: 0.75rem; row-gap: 0.2rem; }
.o-step-n { grid-row: span 2; color: var(--go) !important; font-size: 1rem; }
.o-steps b { color: var(--chalk); font-family: var(--font-display); font-stretch: 75%; font-size: 1.25rem; text-transform: uppercase; letter-spacing: 0.02em; }
.o-steps span:last-child { color: var(--chalk-2); }
.o-fine { background: var(--mat); border: 1px solid var(--line); padding: 1.25rem 1.5rem; }
.o-fine ul { margin: 0.75rem 0 0; padding-left: 1.1rem; display: grid; gap: 0.5rem; color: var(--chalk-2); font-size: 0.9375rem; line-height: 1.5; }

/* Giveaways (giveaways.js): the cards borrow Codes & Offers' .o-* parts. */
.g-group + .g-group { margin-top: 2.5rem; }
.o-empty + .g-grid, .o-empty + .p-grid { margin-top: 2.5rem; }
.g-group-title { margin: 0 0 1rem; color: var(--chalk-3); }
.g-card { scroll-margin-top: 6rem; }
.g-card:focus { outline: none; }
.g-card.is-closed { border-top-color: var(--line); }
.g-card.is-closed .o-ends, .g-card.is-upcoming .o-ends { background: var(--floor); color: var(--chalk-2); border: 1px solid var(--line); }
.g-img { display: block; margin: -1.5rem -1.5rem 0; }
.g-img img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 20%; background: var(--floor); }
.g-title { margin: 0; font-size: clamp(1.75rem, 1.45rem + 1.2vw, 2.25rem); line-height: 1.02; }
.g-note { margin: 0; color: var(--chalk-2); }
.g-action { border-top: 1px solid var(--line); padding-top: 1rem; }
.g-enter { display: grid; gap: 0.65rem; }
.g-check { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); gap: 0.6rem; align-items: start; color: var(--chalk-2); font-size: 0.9375rem; line-height: 1.45; cursor: pointer; }
.g-check input { width: 1.15rem; height: 1.15rem; margin: 0.1rem 0 0; accent-color: var(--go); }
.g-in { display: grid; gap: 0.35rem; }
.g-in p { margin: 0; color: var(--chalk-2); }
.g-in .data { color: #4ade80; }
.g-winners { display: grid; gap: 0.5rem; }
.g-winners p { margin: 0; }
.g-winners ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.g-winners li { padding: 0.35rem 0.7rem; border: 1px solid var(--go); color: var(--chalk); font-weight: 600; }
.g-rules { border-top: 1px solid var(--line); padding-top: 0.75rem; }
.g-rules summary { cursor: pointer; font-family: var(--font-mono); font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--chalk-2); }
.g-rules summary:hover { color: var(--chalk); }
.g-rules[open] summary { color: var(--chalk); margin-bottom: 0.75rem; }
.g-rules-body { display: grid; gap: 0.9rem; max-height: 26rem; overflow: auto; padding-right: 0.5rem; font-size: 0.875rem; line-height: 1.55; color: var(--chalk-2); }
.g-rules-body h4 { margin: 0 0 0.25rem; color: var(--chalk); font-size: 0.875rem; }
.g-rules-body p { margin: 0 0 0.4rem; }
/* New Arrivals (arrivals.js). */
.a-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: 1rem; }
.a-card { background: var(--mat); border: 1px solid var(--line); display: grid; grid-template-rows: auto 1fr; }
.a-img { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--floor); }
.a-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1); }
.a-card:hover .a-img img { transform: scale(1.03); }
.a-body { padding: 1.1rem 1.25rem 1.25rem; display: grid; gap: 0.5rem; align-content: start; justify-items: start; }
.a-name { margin: 0; font-family: var(--font-display); font-stretch: 75%; font-size: 1.375rem; line-height: 1.05; text-transform: uppercase; color: var(--chalk); }
.a-name a { color: inherit; text-decoration: none; }
.a-name a:hover { text-decoration: underline; text-underline-offset: 3px; }
.a-meta { margin: 0; color: var(--chalk-3); }
.a-line { margin: 0; color: var(--chalk-2); }
.a-note { margin: 0.25rem 0 0; padding-left: 0.85rem; border-left: 2px solid var(--go); display: grid; gap: 0.3rem; }
.a-note p { margin: 0; color: var(--chalk); font-size: 0.9375rem; line-height: 1.5; }
.a-note cite { font-style: normal; color: var(--chalk-3); }
.a-shop { margin-top: 0.35rem; min-height: 2.5rem; padding: 0 1rem; }
.a-locked { display: grid; place-items: center; background: repeating-linear-gradient(135deg, var(--floor) 0 12px, var(--mat) 12px 24px); }
.a-locked span { padding: 0.35rem 0.6rem; border: 1px solid var(--line); background: var(--mat); color: var(--chalk-2); }
.a-drops { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr)); gap: 1rem; }
.a-drop { display: grid; grid-template-columns: 8rem minmax(0, 1fr); background: var(--mat); border: 1px solid var(--line); border-top: 3px solid var(--go); color: inherit; text-decoration: none; }
.a-drop img { width: 100%; height: 100%; min-height: 10rem; object-fit: cover; display: block; }
.a-drop.no-img { grid-template-columns: minmax(0, 1fr); }
.a-drop-body { padding: 1rem 1.25rem; display: grid; gap: 0.45rem; align-content: start; justify-items: start; }
.a-drop-name { font-size: 1.75rem; line-height: 1; }
.a-drop:hover .a-drop-name { text-decoration: underline; text-underline-offset: 4px; }

/* Mindset (mindset.js). */
.m-topics { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; }
.m-chip { font: inherit; font-size: 0.875rem; padding: 0.45rem 0.9rem; min-height: 2.5rem; background: transparent; color: var(--chalk-2); border: 1px solid var(--line); cursor: pointer; }
.m-chip:hover { color: var(--chalk); border-color: var(--chalk-3); }
.m-chip[aria-pressed="true"] { background: var(--go); border-color: var(--go); color: var(--on-go); }
.m-chip:focus-visible { outline: 2px solid var(--go); outline-offset: 2px; }
.m-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: 1rem; }
.m-card { background: var(--mat); border: 1px solid var(--line); }
.m-link { display: grid; color: inherit; text-decoration: none; height: 100%; }
.m-img { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--floor); }
.m-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1); }
.m-link:hover .m-img img { transform: scale(1.03); }
.m-body { padding: 1.25rem 1.5rem 1.5rem; display: grid; gap: 0.6rem; align-content: start; }
.m-meta { color: var(--chalk-3); }
.m-title { margin: 0; font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem); line-height: 1.02; }
.m-stand { color: var(--chalk-2); line-height: 1.5; }
.m-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.m-tags span { padding: 0.2rem 0.45rem; border: 1px solid var(--line); color: var(--chalk-3); }
.m-read { color: var(--chalk); font-weight: 600; }
.m-read::after { content: " →"; color: var(--go); }
.m-link:hover .m-read { text-decoration: underline; text-underline-offset: 3px; }
/* The featured post: photo full width, the story over a shade (wide screens);
   photo above the story on phones, where nothing sits over the picture. */
.m-feature { grid-column: 1 / -1; position: relative; overflow: hidden; background: var(--mat); border: 1px solid var(--line); }
.m-feature-link { display: grid; color: inherit; text-decoration: none; }
.m-feature-img { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--floor); }
.m-feature-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; display: block; transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1); }
.m-feature-link:hover .m-feature-img img { transform: scale(1.03); }
.m-feature-shade { display: none; }
.m-feature-body { display: grid; gap: 0.85rem; justify-items: start; align-content: end; padding: clamp(1.25rem, 4vw, 3rem); }
.m-feature-top { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.85rem; }
.m-feature-tag { padding: 0.3rem 0.6rem; background: var(--go); color: var(--on-go); }
.m-feature-meta { color: var(--chalk-2); }
.m-feature-title { margin: 0; max-width: 16ch; font-size: clamp(2.25rem, 1.5rem + 3.2vw, 4.25rem); line-height: 0.95; color: var(--chalk); text-wrap: balance; }
.m-feature-stand { max-width: 46ch; font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); line-height: 1.55; color: var(--chalk); }
.m-feature-tags span { border-color: rgba(255, 255, 255, 0.28); color: var(--chalk-2); }
.m-feature-cta { margin-top: 0.4rem; pointer-events: none; }
.m-feature-cta::after { content: " \2192"; }
@media (hover: hover) { .m-feature-link:hover .m-feature-cta { background: var(--chalk); border-color: var(--chalk); color: var(--floor); } }
.m-feature-link:focus-visible .m-feature-cta { background: var(--chalk); border-color: var(--chalk); color: var(--floor); }
.m-feature-link:focus-visible { outline: 2px solid var(--go); outline-offset: 4px; }
@media (min-width: 48rem) {
  /* The photo fills the box but never sizes it: a portrait cover would
     otherwise stretch the feature far past the fold. */
  .m-feature-link { position: relative; min-height: clamp(26rem, 40vw, 36rem); }
  .m-feature-img { position: absolute; inset: 0; aspect-ratio: auto; }
  .m-feature-img img { object-position: 72% 18%; }
  .m-feature-shade { display: block; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(90deg, rgba(10, 10, 12, 0.95) 0%, rgba(10, 10, 12, 0.88) 34%, rgba(10, 10, 12, 0.45) 58%, rgba(10, 10, 12, 0) 78%),
                linear-gradient(0deg, rgba(10, 10, 12, 0.7) 0%, rgba(10, 10, 12, 0) 45%); }
  .m-feature-body { position: relative; z-index: 2; max-width: min(40rem, 62%); }
}
@media (prefers-reduced-motion: reduce) { .m-feature-img img { transition: none; } }
@media (max-width: 47.99rem) { .m-card.is-lead .m-link { grid-template-columns: minmax(0, 1fr); } .m-card.is-lead .m-img { min-height: 0; aspect-ratio: 16 / 10; } .a-drop { grid-template-columns: 6rem minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .a-img img, .m-img img { transition: none; } .a-card:hover .a-img img, .m-link:hover .m-img img { transform: none; } }

/* Polls & feedback (polls.js). */
.p-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr)); gap: 1rem; }
.p-card { scroll-margin-top: 10rem; }
.p-card:focus { outline: none; }
.p-card.is-closed { border-top-color: var(--line); }
.p-card.is-closed .o-ends { background: var(--floor); color: var(--chalk-2); border: 1px solid var(--line); }
.p-q { margin: 0; font-size: clamp(1.6rem, 1.35rem + 1vw, 2.1rem); line-height: 1.02; }
.p-ballot { display: grid; gap: 0.75rem; }
.p-options { display: grid; gap: 0.5rem; }
.p-opt { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); align-items: center; gap: 0.75rem; padding: 0.75rem 0.9rem; border: 1px solid var(--line); background: var(--floor); cursor: pointer; transition: border-color 160ms ease; }
.p-opt.has-img { grid-template-columns: 1.25rem 3.25rem minmax(0, 1fr); }
.p-opt img { width: 3.25rem; height: 4rem; object-fit: cover; }
.p-opt input { width: 1.15rem; height: 1.15rem; margin: 0; accent-color: var(--go); }
.p-opt:has(input:checked) { border-color: var(--go); }
.p-opt:has(input:disabled) { cursor: default; }
.p-opt:has(input:focus-visible) { outline: 2px solid var(--go); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .p-opt:hover:not(:has(input:disabled)) { border-color: var(--chalk-3); } }
.p-opt-text { display: grid; gap: 0.1rem; }
.p-opt-text b { color: var(--chalk); font-weight: 600; }
.p-opt-text span { color: var(--chalk-3); font-size: 0.875rem; }
.p-hint { margin: 0; color: var(--chalk-3); }
.p-results { display: grid; gap: 0.6rem; }
.p-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.p-bar { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.7rem 0.9rem; border: 1px solid var(--line); background: var(--floor); overflow: hidden; }
.p-fill { position: absolute; inset: 0 auto 0 0; background: rgba(255, 255, 255, 0.07); transform-origin: left center; animation: p-grow 600ms var(--ease-out); }
.p-bar.is-top .p-fill { background: color-mix(in srgb, var(--go) 32%, transparent); }
.p-bar.is-mine { border-color: var(--go); }
.p-bar-label { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; color: var(--chalk); font-weight: 600; }
.p-mine { color: var(--go); font-weight: 500; }
.p-share { position: relative; color: var(--chalk); }
.p-total, .p-thanks { margin: 0; color: var(--chalk-3); }
.p-thanks { font-size: 0.9375rem; }
@keyframes p-grow { from { transform: scaleX(0); } }
.p-fb-form { display: grid; gap: 0.75rem; margin-top: 0.75rem; }
.p-fb-form select, .p-fb-form textarea { width: 100%; background: var(--floor); color: var(--chalk); border: 1px solid var(--line); padding: 0.7rem 0.85rem; font: inherit; font-size: 1rem; }
.p-fb-form select { min-height: 2.75rem; }
.p-fb-form textarea { resize: vertical; min-height: 7rem; line-height: 1.5; }
.p-fb-form select:focus-visible, .p-fb-form textarea:focus-visible { outline: 2px solid var(--go); outline-offset: 1px; }
.p-count { color: var(--chalk-3); margin-left: auto; }
.p-fb-note { margin: 0.75rem 0 0; color: var(--chalk-2); }
.p-fb-go { margin-top: 1rem; }
.p-fb-done { margin-top: 0.75rem; display: grid; gap: 0.25rem; }
.p-fb-done p { margin: 0; color: var(--chalk-2); }
.p-fb-done .data { color: #4ade80; }

/* Behind the Brand roadmap (brand.js); the stories reuse Mindset's .m-* cards. */
.r-line { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 1.75rem; max-width: 46rem; }
.r-line::before { content: ""; position: absolute; left: 0.55rem; top: 0.6rem; bottom: 0.6rem; width: 2px; background: var(--line); }
.r-step { position: relative; display: grid; grid-template-columns: 1.1rem minmax(0, 1fr); gap: 1.25rem; }
.r-dot { width: 1.1rem; height: 1.1rem; margin-top: 0.3rem; border-radius: 50%; border: 2px solid var(--chalk-3); background: var(--floor); position: relative; z-index: 1; }
.r-step.is-done .r-dot { background: var(--go); border-color: var(--go); }
.r-step.is-now .r-dot { border-color: var(--go); box-shadow: 0 0 0 4px color-mix(in srgb, var(--go) 30%, transparent); }
.r-body { display: grid; gap: 0.35rem; }
.r-meta { margin: 0; display: flex; flex-wrap: wrap; gap: 0.75rem; color: var(--chalk-3); }
.r-status { color: var(--chalk-2); }
.r-step.is-done .r-status, .r-step.is-now .r-status { color: var(--go); }
.r-title { margin: 0; font-family: var(--font-display); font-stretch: 75%; font-size: 1.5rem; line-height: 1.05; text-transform: uppercase; color: var(--chalk); }
.r-step.is-next .r-title { color: var(--chalk-2); }
.r-detail { margin: 0; color: var(--chalk-2); }
@media (prefers-reduced-motion: reduce) { .p-fill { animation: none; } }

/* Challenges & live (challenges.js). */
.ch-card.is-ended { border-top-color: var(--line); }
.ch-card.is-ended .o-ends, .ch-card.is-upcoming .o-ends { background: var(--floor); color: var(--chalk-2); border: 1px solid var(--line); }
.ch-title { margin: 0; font-size: clamp(1.6rem, 1.35rem + 1vw, 2.1rem); line-height: 1.02; }
.ch-progress { display: grid; gap: 0.45rem; }
.ch-progress .data { margin: 0; color: var(--chalk-2); }
.ch-bar { height: 0.6rem; background: var(--floor); border: 1px solid var(--line); overflow: hidden; }
.ch-bar span { display: block; height: 100%; background: var(--go); transition: width 400ms var(--ease-out); }
.ch-act { display: grid; gap: 0.6rem; justify-items: start; }
.ch-done { margin: 0; color: #4ade80; }
/* A challenge that counts by itself (challenges.js autoAction): what to do instead of a Check in button. */
.ch-auto { margin: 0; color: var(--chalk-2); }
.ch-sessions { display: grid; gap: 1rem; max-width: 56rem; }
.ch-session { display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: 1.5rem; padding: 1.5rem; background: var(--mat); border: 1px solid var(--line); border-left: 3px solid var(--go); }
.ch-session.is-past { border-left-color: var(--line); }
.ch-session.is-live { box-shadow: 0 0 0 1px var(--go); }
.ch-when { display: grid; gap: 0.5rem; align-content: start; justify-items: start; }
.ch-when .data { margin: 0; color: var(--chalk-2); }
.ch-session-body { display: grid; gap: 0.6rem; align-content: start; justify-items: start; }
.ch-session-body > p { margin: 0; }
@media (max-width: 40rem) { .ch-session { grid-template-columns: minmax(0, 1fr); gap: 0.75rem; } }

/* My Insider (me.js). */
.me-head { padding-top: clamp(2.5rem, 6vw, 4rem); }
.me-head h1 { margin: 0.5rem 0 1.5rem; }
.me-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; margin-bottom: 1.25rem; }
.me-top .btn { min-height: 2.6rem; padding: 0 1rem; }
.me-hello { margin: 0; color: var(--chalk-2); font-size: 1.125rem; }
.me-out { max-width: 40rem; }
.me-grid { margin-top: 1.25rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: 1rem; align-items: start; }
.me-card { background: var(--mat); border: 1px solid var(--line); padding: 1.5rem; display: grid; gap: 0.85rem; justify-items: start; }
.me-card > p { margin: 0; color: var(--chalk-2); }
.me-label { margin: 0; color: var(--chalk-3); }
.me-level-card { grid-row: span 2; border-top: 3px solid var(--go); }
.me-level-card .ch-bar { width: 100%; }
.me-level { margin: 0 !important; font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem); line-height: 0.95; color: var(--chalk) !important; }
.me-lines, .me-how ul { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; gap: 0.4rem; }
.me-lines li, .me-how li { display: flex; justify-content: space-between; gap: 1rem; color: var(--chalk-2); font-size: 0.9375rem; }
.me-lines .data, .me-how .data { color: var(--go); }
.me-lines a { color: var(--chalk); }
.me-how { width: 100%; border-top: 1px solid var(--line); padding-top: 0.75rem; }
.me-how summary { cursor: pointer; font-family: var(--font-mono); font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--chalk-2); }
.me-how[open] summary { margin-bottom: 0.75rem; color: var(--chalk); }
.me-note { font-size: 0.875rem; color: var(--chalk-3) !important; }
.me-codes { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; gap: 0.5rem; }
.me-codes li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.6rem 0.75rem; background: var(--floor); border: 1px solid var(--line); }
.me-codes li > span { display: grid; gap: 0.15rem; }
.me-code { font-family: var(--font-mono); font-size: 1.05rem; letter-spacing: 0.06em; color: var(--chalk); user-select: all; }
.me-codes .data { color: var(--chalk-3); }
.me-card .btn { min-height: 2.6rem; padding: 0 1rem; }
.me-link { width: 100%; padding: 0.6rem 0.75rem; background: var(--floor); border: 1px solid var(--line); font-family: var(--font-mono); font-size: 0.875rem; color: var(--chalk) !important; overflow-wrap: anywhere; user-select: all; }
.me-bday select { background: var(--floor); color: var(--chalk); border: 1px solid var(--line); min-height: 2.6rem; padding: 0 0.6rem; font: inherit; }
.me-bday { display: grid; gap: 0.5rem; }
.me-badges { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.me-badges li { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.4rem 0.75rem; border: 1px solid var(--go); color: var(--chalk); font-weight: 600; }
.me-badge { color: var(--go); }
/* Badges you can earn: beside Your level, over the cards that follow it. */
@media (min-width: 49rem) { .me-earn-card { grid-column: 2 / -1; } }
.me-earn { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11.5rem), 1fr)); gap: 0.5rem; }
.me-earn li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.2rem 0.75rem; align-content: start; padding: 0.75rem; background: var(--floor); border: 1px solid var(--line); }
.me-earn li[data-earned] { border-color: var(--go); }
.me-earn-icon { grid-row: 1 / span 3; width: 2.25rem; height: 2.25rem; color: var(--go); }
.me-earn-icon svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.me-earn b { color: var(--chalk); }
.me-earn p { margin: 0; font-size: 0.875rem; color: var(--chalk-2); }
.me-earn .data { color: var(--chalk-3); }
.me-earn li[data-earned] .data { color: var(--go); }
/* Forms on My Insider: sign-in and the profile (me-profile.js). */
.me-profile { width: 100%; display: grid; gap: 1rem; }
.me-socials { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 0.75rem; }
.me-field { display: grid; gap: 0.35rem; min-width: 0; align-content: start; }
.me-field > label, .mp-pic-label { font-size: 0.875rem; font-weight: 600; color: var(--chalk-2); }
.me-field input:not([type="file"]), .me-field textarea, .me-field select, .mp-vis select { width: 100%; min-height: 2.75rem; padding: 0.6rem 0.75rem; background: var(--floor); color: var(--chalk); border: 1px solid var(--line); font: inherit; }
.me-field textarea { resize: vertical; }
.me-field input::placeholder, .me-field textarea::placeholder { color: var(--chalk-3); }
.me-field input:focus-visible, .me-field textarea:focus-visible, .me-field select:focus-visible, .mp-vis select:focus-visible { outline: 2px solid var(--go); outline-offset: 1px; }
.me-field input[aria-invalid="true"] { border-color: #ff8fae; }
.me-count { justify-self: end; color: var(--chalk-3); }
.me-saved { align-self: center; color: var(--go); }
.me-saved:focus { outline: none; }
.me-hint { margin: 0; font-size: 0.8125rem; color: var(--chalk-3); }
.me-check { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.9375rem; color: var(--chalk-2); cursor: pointer; }
.me-check .me-hint { display: block; margin-top: 0.2rem; }
.me-check input { width: 1.15rem; height: 1.15rem; margin: 0.15rem 0 0; flex: none; accent-color: var(--go); }
.me-link { background: none; border: 0; padding: 0.4rem 0; color: var(--chalk); font: inherit; font-size: 0.9375rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; justify-self: start; }
.me-link:focus-visible { outline: 2px solid var(--go); outline-offset: 2px; }

/* Sign in / create an account / reset. */
.me-auth { max-width: 34rem; background: var(--mat); border: 1px solid var(--line); border-top: 3px solid var(--go); padding: clamp(1.25rem, 4vw, 2rem); }
.me-tabs { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 1.25rem; border-bottom: 1px solid var(--line); }
.me-tabs button { min-height: 2.75rem; background: none; border: 0; border-bottom: 3px solid transparent; margin-bottom: -1px; color: var(--chalk-3); font-family: var(--font-display); font-stretch: 75%; font-weight: 800; font-size: 1.05rem; letter-spacing: 0.03em; text-transform: uppercase; cursor: pointer; }
.me-tabs button[aria-selected="true"] { color: var(--chalk); border-bottom-color: var(--go); }
.me-tabs button:focus-visible { outline: 2px solid var(--go); outline-offset: -2px; }
.me-auth-form { display: grid; gap: 1rem; }
.me-auth-lede { margin: 0; color: var(--chalk-2); }
.me-pass { display: flex; }
.me-pass input { flex: 1; min-width: 0; border-right: 0; }
.me-show { flex: none; min-width: 4.25rem; min-height: 2.75rem; padding: 0 0.85rem; background: var(--floor); color: var(--chalk); border: 1px solid var(--line); font: inherit; font-size: 0.875rem; font-weight: 600; cursor: pointer; }
.me-show:focus-visible { outline: 2px solid var(--go); outline-offset: -2px; }
.me-done { margin: 0; color: var(--chalk); }
.me-done:empty { display: none; }

/* Profile and privacy. */
.mp-head { margin: clamp(2.5rem, 6vw, 4rem) 0 0; gap: 0.6rem; }
.mp-head h2, .mp-lede { margin: 0; }
.mp-lede { max-width: 62ch; color: var(--chalk-2); }
.mp-grid { grid-template-columns: minmax(0, 1fr); }
.mp-card > p { max-width: 70ch; }
.mp-card h3, .mp-card h4 { margin: 0; }
.mp-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1rem; }
.mp-set { margin: 0; padding: 0; border: 0; display: grid; gap: 0.6rem; min-width: 0; }
.mp-set legend { padding: 0; margin-bottom: 0.4rem; font-size: 0.875rem; font-weight: 600; color: var(--chalk-2); }
.mp-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); gap: 0.5rem 1rem; }
.mp-vis { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.6rem; }
.mp-vis-label { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--chalk-3); }
/* 16px, or iPhones zoom the page when the picker is tapped. */
.mp-vis select { width: auto; min-height: 2.4rem; padding: 0.35rem 0.6rem; font-size: 1rem; }
.mp-vis-note { color: var(--go); }
.mp-page-link { justify-self: start; color: var(--chalk); font-size: 0.875rem; }
.mp-pics { width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.mp-pic { justify-items: start; }
.mp-avatar { width: 6rem; height: 6rem; border-radius: 50%; object-fit: cover; }
.mp-banner { width: 100%; aspect-ratio: 3 / 1; object-fit: cover; }
.mp-empty { display: grid; place-items: center; background: var(--floor); border: 1px dashed var(--line); color: var(--chalk-3); font-size: 0.8125rem; }
.mp-rlist { width: 100%; display: grid; gap: 0.6rem; }
.mp-rlist ul, .mp-hlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; width: 100%; }
.mp-r, .mp-h { display: grid; gap: 0.6rem; padding: 0.85rem; background: var(--floor); border: 1px solid var(--line); }
.mp-r p { margin: 0; color: var(--chalk-2); }
.mp-r b, .mp-h-text { color: var(--chalk); overflow-wrap: anywhere; white-space: pre-line; }
.mp-hlist:focus, .mp-rlist h4:focus { outline: none; }
.mp-h-img.mp-h-avatar { width: 4rem; height: 4rem; border-radius: 50%; object-fit: cover; }
.mp-h-img.mp-h-banner { width: min(100%, 24rem); aspect-ratio: 3 / 1; object-fit: cover; }
.mp-data { width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 1.5rem; }
.mp-data > div { display: grid; gap: 0.75rem; align-content: start; justify-items: start; }
.mp-data p { margin: 0; color: var(--chalk-2); }
.mp-data a:not(.btn) { color: var(--chalk); }

/* A member's profile page (member.js). */
.pf { padding-top: 0; }
.pf-banner { width: 100%; aspect-ratio: 3 / 1; max-height: 22rem; object-fit: cover; background: linear-gradient(120deg, var(--go), var(--floor) 70%); display: block; }
.pf-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem 1.5rem; margin-top: calc(-1 * clamp(2.5rem, 6vw, 4rem)); }
.pf-avatar { width: clamp(5.5rem, 14vw, 8rem); height: clamp(5.5rem, 14vw, 8rem); border-radius: 50%; border: 4px solid var(--floor); background: var(--mat); object-fit: cover; display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 2.5rem; color: var(--chalk); flex: none; }
.pf-who { display: grid; gap: 0.25rem; padding-bottom: 0.5rem; min-width: 0; }
.pf-who h1 { margin: 0; overflow-wrap: anywhere; }
.pf-who .data { color: var(--chalk-3); }
.pf-actions { margin-top: 1.25rem; }
.pf-note { margin: 0.5rem 0 0; color: #ff8fae; font-size: 0.875rem; }
.pf-note:empty { display: none; }
.pf-self { margin: 1.5rem 0 0; padding: 0.85rem 1rem; background: var(--mat); border: 1px solid var(--line); color: var(--chalk-2); }
.pf-self a { color: var(--chalk); }
.pf-body { margin-top: 2rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: 1rem; align-items: start; }
.pf-bio { grid-column: 1 / -1; margin: 0; max-width: 62ch; font-size: 1.125rem; color: var(--chalk); white-space: pre-line; overflow-wrap: anywhere; }
.pf-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.pf-chips li { padding: 0.3rem 0.65rem; border: 1px solid var(--line); color: var(--chalk-2); font-size: 0.875rem; }
.pf-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.pf-links a { color: var(--chalk); overflow-wrap: anywhere; }
.pf-empty { margin: 2rem 0 0; color: var(--chalk-2); }
@media (prefers-reduced-motion: reduce) { .ch-bar span { transition: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .card, .card-tag, .card-link::after, .piece img, .nots .strike { transition-duration: 0.01ms; }
  .btn:active, .sq:active, .opt:active, .to-top:active, .to-top[data-shown="false"], .menu[data-open="false"] { transform: none; }
}

/* ==========================================================================
   Featured (/insider/featured): one piece up close. The photo is the page:
   seven columns of it, the story in five, and picking a colour swaps the
   shorts on the same person in place (featured.js).
   ========================================================================== */
.f-section { padding-block: clamp(3.5rem, 8vw, 7rem); }
.f-grid { display: grid; gap: clamp(1.75rem, 4vw, 4rem); align-items: start; }
@media (min-width: 60rem) { .f-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.f-stage { margin: 0; display: grid; gap: 0.75rem; }
@media (min-width: 60rem) { .f-stage { position: sticky; top: calc(var(--header-h, 160px) + 1rem); } }
.f-frame { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--mat); }
.f-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 24%; opacity: 0; transition: opacity 280ms var(--ease-out); }
.f-photo.is-shown { opacity: 1; }
.f-photo:not([src]) { visibility: hidden; }
.f-caption { display: flex; gap: 0.5rem; color: var(--chalk-2); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; }
/* The stage carousel (featured.js): arrows and a count over the photo, four thumbnails under it. */
.f-frame { touch-action: pan-y; user-select: none; }
.f-frame:focus-visible { outline: 2px solid var(--go); outline-offset: 3px; }
.f-car-ctrl { position: absolute; left: 0.75rem; bottom: 0.75rem; display: flex; gap: 0.5rem; z-index: 1; }
.f-car-ctrl .sq { background: rgba(14, 15, 16, 0.62); }
.f-car-count { position: absolute; top: 0.75rem; right: 0.75rem; z-index: 1; padding: 0.25rem 0.55rem; background: rgba(14, 15, 16, 0.62); color: var(--chalk); font-size: 0.75rem; }
.f-thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; }
.f-thumb { padding: 0; border: 1px solid var(--line); background: var(--mat); aspect-ratio: 4 / 5; overflow: hidden; cursor: pointer; opacity: 0.6; transition: opacity 160ms var(--ease-out), border-color 160ms var(--ease-out); }
.f-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 24%; }
.f-thumb:hover { opacity: 0.9; }
.f-thumb[aria-current="true"] { opacity: 1; border-color: var(--go); box-shadow: inset 0 -3px 0 var(--go); }
.f-thumb:focus-visible { outline: 2px solid var(--go); outline-offset: 2px; }
.f-panel { display: grid; gap: 1.5rem; align-content: start; max-width: 34rem; }
.f-eyebrow { margin: 0; color: var(--go); letter-spacing: 0.12em; }
.f-title { margin: 0; font-stretch: 118%; font-weight: 800; font-size: clamp(2.5rem, 1.4rem + 3.6vw, 4.5rem); line-height: 0.9; letter-spacing: -0.025em; text-transform: uppercase; color: var(--chalk); text-wrap: balance; }
.f-lede { margin: 0; color: var(--chalk-2); font-size: 1.0625rem; line-height: 1.6; max-width: 32rem; }
.f-price { margin: 0; display: flex; align-items: baseline; gap: 0.85rem; padding-block: 1rem; border-block: 1px solid var(--line); }
.f-price .display { font-size: 2.25rem; font-weight: 800; font-stretch: 90%; letter-spacing: -0.02em; color: var(--chalk); font-variant-numeric: tabular-nums; }
.f-price .data { color: var(--chalk-3); letter-spacing: 0.08em; }
.f-pick { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: 0.75rem; }
.f-pick legend { padding: 0; margin-bottom: 0.75rem; color: var(--chalk-3); letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.75rem; }
.f-pick-note { margin-left: 0.5rem; color: var(--chalk-2); letter-spacing: 0.02em; text-transform: none; font-family: var(--font-body); }
.f-swatches { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; }
.f-swatch { display: grid; justify-items: center; gap: 0.5rem; padding: 0.6rem 0.25rem 0.55rem; background: none; border: 1px solid transparent; color: var(--chalk-2); font: inherit; cursor: pointer; transition: border-color 160ms ease, color 160ms ease; }
.f-chip { width: 2.5rem; height: 2.5rem; border-radius: 50%; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18) inset; transition: transform 160ms var(--ease-out); }
.f-swatch-name { font-size: 0.8125rem; line-height: 1.2; text-align: center; }
.f-swatch[aria-checked="true"] { border-color: var(--line); color: var(--chalk); background: var(--mat); }
.f-swatch[aria-checked="true"] .f-chip { box-shadow: 0 0 0 2px var(--mat), 0 0 0 4px var(--go); }
.f-swatch:active .f-chip { transform: scale(0.94); }
.f-swatch:focus-visible { outline: 2px solid var(--go); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .f-swatch:hover { color: var(--chalk); } }
.f-scenes { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.f-scene { min-height: 2.5rem; padding: 0 0.9rem; background: none; border: 1px solid var(--line); color: var(--chalk-2); font: inherit; font-size: 0.875rem; cursor: pointer; transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease; }
.f-scene[aria-checked="true"] { background: var(--chalk); border-color: var(--chalk); color: var(--floor); }
.f-scene:active { background: var(--mat-2); }
.f-scene:focus-visible { outline: 2px solid var(--go); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .f-scene:not([aria-checked="true"]):hover { border-color: var(--chalk-3); color: var(--chalk); } }
.f-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.f-specs { display: grid; gap: clamp(2rem, 4vw, 4rem); margin-top: clamp(3.5rem, 8vw, 6rem); padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--line); }
@media (min-width: 60rem) { .f-specs { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.f-specs-title { margin: 0 0 1.25rem; color: var(--chalk-3); letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.75rem; font-weight: 500; }
.f-build { margin: 0; display: grid; }
.f-row { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1rem; padding-block: 0.9rem; border-top: 1px solid var(--line); }
.f-row:last-child { border-bottom: 1px solid var(--line); }
.f-row dt { color: var(--chalk-3); letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.75rem; padding-top: 0.15rem; }
.f-row dd { margin: 0; color: var(--chalk); line-height: 1.5; }
.f-feel { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.f-meter { display: grid; grid-template-columns: 8rem minmax(0, 1fr); align-items: center; gap: 1rem; }
.f-meter-label { color: var(--chalk); font-size: 0.9375rem; }
.f-meter-bar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; max-width: 14rem; }
.f-meter-bar span { height: 6px; background: var(--line); }
.f-meter-bar span.on { background: var(--chalk); }
.f-small { margin: 1.5rem 0 0; color: var(--chalk-2); font-size: 0.9375rem; line-height: 1.6; max-width: 34rem; }
@media (prefers-reduced-motion: reduce) {
  .f-photo { transition-duration: 120ms; }
  .f-chip { transition: none; }
}

/* Interact: extra message boxes. Under the Messages box, two pink squares
   add (+) and remove (−) boxes for other conversations; a new box arrives
   just above them, where the + was pressed. */
.c-boxes { display: grid; gap: 1rem; }
.c-boxes:empty { display: none; }
.c-box-ctrl { display: flex; align-items: center; gap: 0.5rem; }
.c-box-ctrl[hidden] { display: none; }
.c-box-btn { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; padding: 0; border: 0; background: var(--go); color: var(--on-go); font-family: var(--font-display); font-size: 1.6rem; font-weight: 800; line-height: 1; cursor: pointer; transition: background-color 160ms ease, transform 120ms var(--ease-out); }
.c-box-btn:active:not(:disabled) { transform: scale(0.94); }
.c-box-btn:disabled { background: var(--mat-2); color: var(--chalk-3); cursor: not-allowed; }
.c-box-btn:focus-visible { outline: 2px solid var(--chalk); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .c-box-btn:hover:not(:disabled) { background: var(--go-deep); } }
.c-box-count { margin-left: 0.35rem; color: var(--chalk-3); font-size: 0.75rem; letter-spacing: 0.06em; }
.c-extra { animation: c-box-in 220ms var(--ease-out); }
.c-extra-n { color: var(--chalk-3); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; }
.c-extra input[type="search"], .c-friends input[type="search"] { width: 100%; min-height: 2.75rem; padding: 0.6rem 0.75rem; background: var(--floor); color: var(--chalk); border: 1px solid var(--line); font: inherit; }
.c-extra input[type="search"]:focus-visible, .c-friends input[type="search"]:focus-visible { outline: 2px solid var(--go); outline-offset: 1px; }
@keyframes c-box-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) {
  .c-extra { animation-name: c-box-fade; }
  .c-box-btn { transition: background-color 160ms ease; }
}
@keyframes c-box-fade { from { opacity: 0; } }

/* Friends: + Add friend by a name, Requested, Accept, ✓ Friends. */
.c-post-name { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.6rem; }
.c-friend-btn { min-height: 2rem; padding: 0 0.7rem; border: 1px solid var(--go); background: none; color: var(--go); font: inherit; font-size: 0.8125rem; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background-color 160ms ease, color 160ms ease; }
.c-friend-btn.is-go { background: var(--go); color: var(--on-go); }
.c-friend-btn.is-sent { border-color: var(--line); color: var(--chalk-2); }
.c-friend-btn.is-small { min-height: 1.85rem; padding: 0 0.55rem; font-size: 0.75rem; }
.c-friend-btn:focus-visible { outline: 2px solid var(--chalk); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .c-friend-btn.is-go:hover { background: var(--go-deep); border-color: var(--go-deep); }
  .c-friend-btn.is-sent:hover { color: var(--chalk); border-color: var(--chalk-3); }
}
.c-friend-state { color: var(--chalk-3); font-size: 0.6875rem; letter-spacing: 0.06em; white-space: nowrap; }
.c-friends-group .c-found { margin-top: 0.5rem; }

/* Featured: In Kory's words. His introduction and the interview on the left
   (the same seven columns as the photo above), what makes the piece work on
   the right, held in view while the interview scrolls on wide screens. */
.k-section { padding-block: clamp(3.5rem, 8vw, 7rem); }
.k-grid { display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: start; }
@media (min-width: 60rem) { .k-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.k-main { display: grid; gap: 1.5rem; max-width: 44rem; }
.k-eyebrow { margin: 0; color: var(--go); letter-spacing: 0.12em; }
.k-title { margin: 0; font-stretch: 118%; font-weight: 800; font-size: clamp(2.1rem, 1.3rem + 2.8vw, 3.5rem); line-height: 0.92; letter-spacing: -0.025em; text-transform: uppercase; color: var(--chalk); }
.k-byline { display: flex; align-items: center; gap: 0.85rem; padding-block: 1rem; border-block: 1px solid var(--line); }
.k-byline img { width: 3.25rem; height: 3.25rem; border-radius: 50%; object-fit: cover; object-position: 50% 12%; background: var(--mat); }
.k-byline > span { display: grid; gap: 0.15rem; }
.k-byline b { color: var(--chalk); }
.k-byline .data { color: var(--chalk-3); font-size: 0.75rem; letter-spacing: 0.08em; }
.k-intro { display: grid; gap: 1rem; }
.k-intro p { margin: 0; color: var(--chalk); font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.3rem); line-height: 1.6; max-width: 38rem; }
.k-sub { margin: 1.5rem 0 0; font-stretch: 100%; font-weight: 800; font-size: 1.35rem; letter-spacing: -0.01em; text-transform: uppercase; color: var(--chalk); }
.k-interview { margin: 0; display: grid; }
.k-qa { display: grid; gap: 0.6rem; padding-block: 1.35rem; border-top: 1px solid var(--line); }
.k-qa:last-child { border-bottom: 1px solid var(--line); }
.k-qa dt, .k-qa dd { margin: 0; display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); align-items: baseline; }
.k-mark { font-size: 0.75rem; letter-spacing: 0.08em; }
.k-qa dt .k-mark { color: var(--go); }
.k-qa dd .k-mark { color: var(--chalk-3); }
.k-q { color: var(--chalk); font-weight: 600; font-size: 1.0625rem; line-height: 1.45; }
.k-qa dd p { margin: 0; color: var(--chalk-2); line-height: 1.65; max-width: 38rem; }
.k-side { display: grid; gap: 1.25rem; align-content: start; }
@media (min-width: 60rem) { .k-side { position: sticky; top: calc(var(--header-h, 160px) + 1rem); } }
.k-side-title { margin: 0; color: var(--chalk-3); letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.75rem; font-weight: 500; }
.k-callouts { list-style: none; margin: 0; padding: 0; display: grid; }
.k-callout { display: grid; gap: 0.3rem; padding: 1rem 0 1rem 1rem; border-top: 1px solid var(--line); border-left: 2px solid transparent; transition: border-color 160ms ease; }
.k-callout:last-child { border-bottom: 1px solid var(--line); }
.k-callout-title { margin: 0; font-family: var(--font-display); font-stretch: 100%; font-weight: 800; font-size: 1.05rem; letter-spacing: 0.01em; text-transform: uppercase; color: var(--chalk); }
.k-callout p { margin: 0; color: var(--chalk-2); font-size: 0.9375rem; line-height: 1.5; }
@media (hover: hover) and (pointer: fine) { .k-callout:hover { border-left-color: var(--go); } }
.k-shop { justify-self: start; }

/* Interact: a box with a new message pulses pink three times, 1.8 s in all
   (under the three-flashes-a-second limit). Reduced motion: one glow that fades. */
.c-card.is-alert { animation: c-alert 1.8s ease-in-out; }
@keyframes c-alert {
  0%, 33%, 66%, 100% { box-shadow: 0 0 0 0 rgba(229, 68, 118, 0); border-color: var(--line); }
  16%, 50%, 83% { box-shadow: 0 0 0 3px var(--go), 0 0 24px 2px rgba(229, 68, 118, 0.45); border-color: var(--go); background-color: #2a1720; }
}
@media (prefers-reduced-motion: reduce) {
  .c-card.is-alert { animation: c-alert-calm 2.4s ease-out; }
}
@keyframes c-alert-calm {
  from { box-shadow: 0 0 0 3px var(--go); border-color: var(--go); }
  to { box-shadow: 0 0 0 0 rgba(229, 68, 118, 0); border-color: var(--line); }
}

/* Listen: read aloud by the browser. */
.c-listen { display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer; }
.c-listen svg { flex: none; }
.c-listen[aria-pressed="true"] { color: var(--go); border-color: var(--go); }
.c-act.c-listen { font-size: 0.9375rem; }
.c-link.c-listen { font-size: 0.8125rem; min-height: 2rem; }
.c-reply-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1rem; }
.c-msg-foot { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.c-msg-listen { font-size: 0.75rem !important; min-height: 1.75rem !important; }
.c-msg.is-mine .c-listen { color: var(--on-go); }

/* Featured: one tab per featured piece, above the piece. Each tab carries a
   small photo, the name and the price, so the row reads as a shelf of picks;
   the open one is underlined in pink. On a phone the row scrolls sideways
   inside itself, never the page. */
.f-tabs-bar { padding-top: clamp(2.5rem, 6vw, 4.5rem); border-bottom: 1px solid var(--line); }
.f-tabs-label { margin: 0 0 1rem; color: var(--go); letter-spacing: 0.12em; }
.f-tabs { display: flex; gap: clamp(0.5rem, 2vw, 1.5rem); overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; scroll-snap-type: x proximity; margin-bottom: -1px; }
.f-tabs::-webkit-scrollbar { display: none; }
.f-tab { position: relative; flex: none; display: flex; align-items: center; gap: 0.85rem; padding: 0.75rem 1rem 1.1rem 0; background: none; border: 0; border-bottom: 3px solid transparent; color: var(--chalk-2); font: inherit; text-align: left; cursor: pointer; scroll-snap-align: start; transition: color 160ms ease, border-color 160ms ease; }
.f-tab-thumb { width: 3rem; height: 3.75rem; object-fit: cover; object-position: 50% 30%; background: var(--mat); opacity: 0.7; transition: opacity 160ms ease; }
.f-tab-text { display: grid; gap: 0.2rem; }
.f-tab-name { font-family: var(--font-display); font-stretch: 100%; font-weight: 800; font-size: clamp(1rem, 0.9rem + 0.4vw, 1.2rem); letter-spacing: 0.005em; text-transform: uppercase; line-height: 1.1; }
.f-tab-note { color: var(--chalk-3); font-size: 0.75rem; letter-spacing: 0.06em; }
.f-tab[aria-selected="true"] { color: var(--chalk); border-bottom-color: var(--go); }
.f-tab[aria-selected="true"] .f-tab-thumb { opacity: 1; }
.f-tab:focus-visible { outline: 2px solid var(--go); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .f-tab:hover { color: var(--chalk); }
  .f-tab:hover .f-tab-thumb { opacity: 1; }
}
.f-panel-wrap:focus { outline: none; }
.f-panel-wrap.is-entering { animation: f-panel-in 240ms var(--ease-out); }
@keyframes f-panel-in { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) {
  .f-panel-wrap.is-entering { animation-name: f-panel-fade; }
}
@keyframes f-panel-fade { from { opacity: 0; } }
/* A piece in one colour: the colour, said once, instead of a picker. */
.f-one-colour { margin: 0; display: flex; align-items: center; gap: 0.85rem; color: var(--chalk); }
.f-one-colour .f-chip { flex: none; width: 2.25rem; height: 2.25rem; }
.f-one-colour .data { margin-right: 0.35rem; color: var(--chalk-3); letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.75rem; }
.f-one-colour .f-pick-note { margin-left: 0; }
/* Narrow screens: the tabs share the width, so every featured piece is in view. */
@media (max-width: 40rem) {
  .f-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(9.5rem, 1fr); gap: 0.5rem; }
  .f-tab { gap: 0.6rem; padding-right: 0.25rem; }
  .f-tab-thumb { width: 2.25rem; height: 2.85rem; }
  .f-tab-name { font-size: 0.875rem; }
  .f-tab-note { font-size: 0.6875rem; }
}

/* Your photo: in the top bar beside My Insider, at the top of My Insider, and
   "Change photo" in Interact's composer. One photo, changed in either place. */
.bar-account { display: inline-flex; align-items: center; gap: 0.5rem; }
.bar-photo { width: 1.75rem; height: 1.75rem; border-radius: 50%; object-fit: cover; background: var(--mat-2); box-shadow: 0 0 0 1px var(--line); }
.me-photo { display: flex; align-items: center; gap: 1rem; flex-basis: 100%; }
.me-photo-img { flex: none; width: 4.5rem; height: 4.5rem; border-radius: 50%; object-fit: cover; background: var(--mat-2); box-shadow: 0 0 0 2px var(--mat), 0 0 0 3px var(--line); }
.me-photo-none { display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 1.75rem; color: var(--chalk-2); }
.me-photo-text { display: grid; gap: 0.4rem; justify-items: start; }
.me-photo-text .data { color: var(--chalk-3); letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.75rem; }
.me-photo-note { color: var(--chalk-2); font-size: 0.875rem; }
.me-photo-note:empty { display: none; }
.c-posting .c-photo-link { font-size: 0.8125rem; color: var(--chalk-2); cursor: pointer; }
.c-posting .c-photo-link:hover { color: var(--chalk); }

/* Challenge cards: a picture across the top, edge to edge under the pink rule. */
.ch-img { margin: -1.5rem -1.5rem 0.25rem; aspect-ratio: 16 / 9; overflow: hidden; background: var(--floor); }
.ch-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ch-card.is-ended .ch-img img { filter: grayscale(0.6) brightness(0.8); }
/* Challenge proof with a check-in (challenges.js proofForm) and check-ins staff didn't accept. */
.ch-proof { display: grid; gap: 0.5rem; padding: 1rem; background: var(--floor); border: 1px solid var(--line); }
.ch-proof-ask { margin: 0; color: var(--chalk); }
.ch-label { font-size: 0.875rem; color: var(--chalk-2); }
.ch-proof textarea { width: 100%; min-height: 5.5rem; padding: 0.6rem 0.75rem; background: var(--mat); color: var(--chalk); border: 1px solid var(--line); font: inherit; font-size: 1rem; line-height: 1.5; resize: vertical; }
.ch-proof textarea::placeholder { color: var(--chalk-3); }
.ch-proof textarea:focus-visible { outline: 2px solid var(--go); outline-offset: 1px; }
.ch-count { justify-self: end; margin-top: -0.25rem; color: var(--chalk-3); font-size: 0.75rem; }
.ch-proof-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.ch-file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ch-pick:has(+ .ch-file:focus-visible) { outline: 2px solid var(--go); outline-offset: 2px; }
.ch-pick { cursor: pointer; }
.ch-thumb { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: end; }
.ch-thumb[hidden] { display: none; }
.ch-thumb img { display: block; width: 7.5rem; height: 7.5rem; object-fit: cover; border: 1px solid var(--line); }
.ch-private { margin: 0; font-size: 0.8125rem; color: var(--chalk-3); }
.ch-no { margin: 0; color: #ff8fae; }
.ch-rejected { display: grid; gap: 0.35rem; padding: 0.75rem 1rem; border: 1px solid var(--line); border-left: 3px solid #ff8fae; }
.ch-rejected .data { margin: 0; color: #ff8fae; }
.ch-rejected ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.25rem; font-size: 0.875rem; color: var(--chalk-2); }
.ch-rejected strong { color: var(--chalk); font-weight: 600; }

/* ---- Behind the Brand: the story so far, and what we're building toward ----
   (build-pages storySections; brand.js storyRail and the reveal).
   The story is a rail of chapter cards you can drag, flick, swipe or step
   through. One wide card at a time, the next one showing at the edge so it
   reads as "there's more". Above it, the chapter bar fills in pink as you
   go: the only accent in the section, because the order is real. Each card
   is a photograph and the chapter's words; the figure that used to be set
   huge is now a small stamp at the foot of the words. */
.st-section { overflow: hidden; }
.st-head {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 1rem clamp(2rem, 6vw, 5rem);
  align-items: end; margin-bottom: clamp(2rem, 5vw, 3.5rem);
}
.st-eyebrow { grid-column: 1 / -1; }
.st-headline { font-size: clamp(2.6rem, 1.4rem + 4.6vw, 5.6rem); line-height: 0.88; }
.st-headline span { display: block; color: var(--chalk-3); }
.st-lede { max-width: 38ch; padding-bottom: 0.4rem; }

/* The chapter bar and the arrows. */
.st-controls { display: flex; align-items: end; gap: 1.5rem; margin-bottom: 1.25rem; }
.st-tabs { list-style: none; margin: 0; padding: 0; flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; min-width: 0; }
.st-tab { display: grid; gap: 0.6rem; width: 100%; padding: 0.5rem 0 0.25rem; background: none; border: 0; color: var(--chalk-3); text-align: left; cursor: pointer; font: inherit; }
.st-tab-bar { position: relative; display: block; height: 3px; background: var(--line); overflow: hidden; }
.st-tab-bar span { position: absolute; inset: 0; background: var(--go); transform-origin: 0 50%; transform: scaleX(var(--fill, 0)); }
.st-tab-name { color: inherit; letter-spacing: 0.1em; transition: color 160ms ease; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-tab[aria-current="step"] { color: var(--chalk); }
.st-tab:focus-visible { outline: 2px solid var(--go); outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) { .st-tab:hover { color: var(--chalk); } }
.st-arrows { display: flex; gap: 0.5rem; flex: none; }
.st-arrows .sq { color: var(--chalk); }
.st-arrows .sq:disabled { opacity: 0.35; cursor: default; }
@media (hover: hover) and (pointer: fine) { .st-arrows .sq:not(:disabled):hover { border-color: var(--chalk); } }

/* The rail: a native scroller (touch and trackpads keep their own momentum),
   which brand.js also lets you drag and fling with a mouse. The first card
   lines up with the page's text edge; the last can scroll fully into view. */
.st-rail {
  --edge: max(var(--gutter), calc((100vw - 88rem) / 2 + var(--gutter)));
  position: relative; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding-inline: var(--edge);
  scrollbar-width: none; overscroll-behavior-x: contain; cursor: grab; outline: none;
  -webkit-user-select: none; user-select: none;
}
.st-rail::-webkit-scrollbar { display: none; }
.st-rail:focus-visible { box-shadow: inset 0 0 0 2px var(--go); }
.st-rail.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.st-rail.is-gliding { scroll-snap-type: none; }
.st-track { list-style: none; margin: 0; padding: 0 var(--edge); display: flex; gap: clamp(0.75rem, 2vw, 1.5rem); width: max-content; }
.st-card {
  scroll-snap-align: start; flex: none; width: min(64rem, calc(100vw - var(--edge) - 4.5rem));
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  background: var(--mat); border: 1px solid var(--line);
  transition: opacity 260ms var(--ease-out);
}
.st-card:not(.is-current) { opacity: 0.45; }
.st-photo { margin: 0; position: relative; min-height: 100%; aspect-ratio: 4 / 5; overflow: hidden; background: var(--mat-2); }
.st-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.st-copy { display: grid; align-content: start; gap: 1rem; padding: clamp(1.5rem, 3.5vw, 3rem); min-width: 0; }
.st-label { margin: 0; color: var(--chalk-3); letter-spacing: 0.12em; }
.st-title { font-size: clamp(2rem, 1.3rem + 2.4vw, 3.4rem); line-height: 0.92; margin-bottom: 0.25rem; }
.st-copy > p:not(.st-label):not(.st-stamp) { margin: 0; color: var(--chalk-2); line-height: 1.65; max-width: 44ch; }
.st-stamp { margin: 0.75rem 0 0; display: flex; align-items: baseline; gap: 0.75rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.st-stamp b { font-family: var(--font-display); font-stretch: 110%; font-weight: 900; font-size: 1.9rem; line-height: 1; letter-spacing: -0.02em; color: var(--chalk); font-variant-numeric: tabular-nums; }
.st-stamp .data { color: var(--chalk-3); letter-spacing: 0.1em; }

.fw-head { max-width: 46rem; }
.fw-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.fw-item { display: grid; gap: 0.75rem; align-content: start; padding: 1.75rem 1.5rem 2rem 0; min-width: 0; }
.fw-item + .fw-item { padding-left: 1.5rem; border-left: 1px solid var(--line); }
.fw-title { margin: 0; font-family: var(--font-display); font-stretch: 100%; font-weight: 800; text-transform: uppercase; font-size: 1.15rem; line-height: 1.1; letter-spacing: 0.005em; color: var(--chalk); text-wrap: balance; }
.fw-item p { margin: 0; color: var(--chalk-2); font-size: 0.9375rem; line-height: 1.6; }
.fw-close { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1.5rem 3rem; margin-top: clamp(3rem, 7vw, 5rem); padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--line); }
.fw-line { font-size: clamp(2rem, 1.3rem + 3vw, 3.9rem); max-width: 18ch; color: var(--chalk-3); }
.fw-line span { color: var(--chalk); }
.fw-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

@media (max-width: 55.99rem) {
  .st-head { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .st-card { grid-template-columns: minmax(0, 1fr); width: min(30rem, calc(100vw - var(--edge) - 3rem)); }
  .st-photo { aspect-ratio: 4 / 3; min-height: 0; }
  .fw-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fw-item:nth-child(3) { padding-left: 0; border-left: 0; }
  .fw-item:nth-child(n + 3) { border-top: 1px solid var(--line); }
}
@media (max-width: 34rem) {
  /* Phones swipe the rail; the chapter bar takes the full width. */
  .st-arrows { display: none; }
  .st-tab-name { font-size: 0.6875rem; letter-spacing: 0.06em; }
  .fw-list { grid-template-columns: minmax(0, 1fr); }
  .fw-item, .fw-item + .fw-item { padding: 1.5rem 0; border-left: 0; }
  .fw-item + .fw-item { border-top: 1px solid var(--line); }
}

/* Motion. The rail itself moves on a spring in brand.js; here, only the
   section's arrival (the rail rises in once, softly unblurring) and the
   "What we're building toward" items, which settle in one after another. */
.st-armed.st-rail, .st-armed.fw-item, .st-armed.fw-close { opacity: 0; transform: translateY(18px); filter: blur(4px); }
.st-rail, .fw-item, .fw-close { transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out), filter 700ms var(--ease-out); }
.fw-item { transition-delay: calc(var(--i, 0) * 70ms); }
.st-armed.is-in.st-rail, .st-armed.is-in.fw-item, .st-armed.is-in.fw-close { opacity: 1; transform: none; filter: none; }
@media (prefers-reduced-motion: reduce) {
  .st-rail, .fw-item, .fw-close, .st-card, .st-tab-name { transition: none; transform: none; filter: none; opacity: 1; }
  .st-card:not(.is-current) { opacity: 0.6; }
}

/* ---- New Arrivals: Afterglow, the next drop (build-pages afterglowSection,
   arrivals.js). On top, the photo stage exactly as Featured draws a piece
   (the .f-stage rules: crossfade, arrows, count, thumbnails, caption), made
   wide because it spans the section. Below it, the drop: the name set huge
   with its line and description on the left; the countdown, buttons and the
   pieces on the right. The pink only on the live dot and, once open, the clock. */
.ag-section { border-bottom: 1px solid var(--line); }
.ag-stage { margin-bottom: clamp(2.5rem, 6vw, 4.5rem); }
@media (min-width: 60rem) { .ag-stage { position: static; } }
.ag-stage .f-frame { aspect-ratio: 16 / 9; }
.ag-thumbs { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.ag-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.ag-copy, .ag-side-col { display: grid; gap: 1.25rem; align-content: start; min-width: 0; }
.ag-eyebrow { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--chalk-2); letter-spacing: 0.12em; }
.ag-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--go); box-shadow: 0 0 0 4px rgb(229 68 118 / 0.18); }
.ag-title { font-size: clamp(3.4rem, 1.8rem + 6vw, 7.5rem); line-height: 0.84; letter-spacing: -0.01em; }
.ag-line { margin: -0.25rem 0 0; font-family: var(--font-display); font-stretch: 100%; font-weight: 800; text-transform: uppercase; font-size: clamp(1.1rem, 0.9rem + 0.8vw, 1.5rem); color: var(--chalk-3); letter-spacing: 0.01em; }
.ag-lede { max-width: 46ch; }
.ag-count { display: grid; gap: 0.6rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--line); }
.ag-count-label { color: var(--chalk-3); letter-spacing: 0.12em; }
.ag-clock { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; max-width: 26rem; }
.ag-clock div { display: grid; gap: 0.25rem; }
.ag-clock dd { margin: 0; order: -1; font-family: var(--font-display); font-weight: 900; font-stretch: 110%; font-size: clamp(2rem, 1.4rem + 2vw, 3rem); line-height: 1; color: var(--chalk); font-variant-numeric: tabular-nums; }
.ag-clock dt { color: var(--chalk-3); letter-spacing: 0.1em; font-size: 0.6875rem; }
.ag-section.is-open .ag-clock dd { color: var(--go); }
.ag-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.ag-pieces { display: grid; gap: 0.6rem; }
.ag-pieces .data { color: var(--chalk-3); letter-spacing: 0.12em; }
.ag-pieces ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.ag-pieces li { padding: 0.35rem 0.7rem; border: 1px solid var(--line); color: var(--chalk-2); font-size: 0.875rem; }
@media (max-width: 55.99rem) {
  .ag-grid { grid-template-columns: minmax(0, 1fr); }
  .ag-stage .f-frame { aspect-ratio: 4 / 5; }
  .ag-thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* --- Interact group chats (community.js, lib/insider/groups) ------------------ */
.c-side-btns { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.c-side-sub { margin: 0.9rem 0 0; color: var(--chalk-3); }
.c-group-faces { display: inline-flex; }
.c-group-faces.is-pair .c-avatar + .c-avatar { margin-left: -0.9rem; box-shadow: 0 0 0 2px var(--mat-2); }
.c-group-title { color: var(--chalk); padding: 0; text-align: left; }
.c-group-title b { color: var(--chalk); }
.c-members { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.c-members .c-person { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.65rem; align-items: center; padding: 0.55rem 0; border-bottom: 1px solid var(--line); }
.c-members .c-convo-text span { font-size: 0.8125rem; color: var(--chalk-3); }
.c-msg-from { display: flex; align-items: center; gap: 0.4rem; font-size: 0.8125rem; }
.c-msg-from b { color: var(--chalk-2); }
.c-msg-event { justify-self: center; text-align: center; color: var(--chalk-3); font-size: 0.75rem; padding: 0.25rem 0.5rem; max-width: 92%; }
.c-group-form { display: grid; gap: 0.5rem; }
.c-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.c-chips:empty { display: none; }
.c-chip { display: inline-flex; align-items: center; gap: 0.35rem; border: 1px solid var(--line); background: var(--mat-2); padding: 0.2rem 0.3rem 0.2rem 0.25rem; font-size: 0.8125rem; color: var(--chalk); }
.c-chip .c-avatar { width: 1.4rem; height: 1.4rem; font-size: 0.7rem; }
.c-chip .c-link { font-size: 1rem; line-height: 1; padding: 0 0.2rem; }

/* LIT's own account (Interact Studio posts). */
.c-official { display: inline-flex; align-items: center; gap: 0.4rem; }
.c-official-badge { font-family: var(--data, inherit); font-size: 0.625rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-go); background: var(--go); padding: 0.1rem 0.35rem; }