/* MESH — design system.
 *
 * Visual source of truth: Grok Bot Build Night flyer — cream field,
 * terracotta accent, lime CTAs, charcoal text, serif display + bold
 * rounded sans. The previous dark BUILD013 look is not the default.
 *
 * How that lands technically:
 *  - One committed light look (cream paper, charcoal ink) on every
 *    student-facing surface. Tokens keep the same names so existing
 *    rules invert cleanly: --ink-* is now the cream field, --bone is
 *    charcoal text, --acid is the lime CTA, --coral is terracotta.
 *  - Display type is a serif (Instrument Serif) against a rounded sans
 *    (Nunito) body. Eyebrows stay tracked caps.
 *  - Lime marks the primary action. Terracotta marks MESH language,
 *    eyebrows, and Build Night emphasis.
 *  - Every measurement is in a token. 375 / 390 / 430 are the design widths;
 *    nothing is allowed to overflow horizontally at any of them.
 */

:root {
  /* Field — flyer cream, not dark ink. */
  --ink-900: #FDF8F1;
  --ink-850: #F7F0E6;
  --ink-800: #FFFCF7;
  --ink-700: #F3EBE0;
  --ink-600: #EDE4D6;
  --hairline: rgba(26, 26, 26, 0.10);
  --hairline-strong: rgba(26, 26, 26, 0.18);

  /* Ink — charcoal, from the MESH wordmark. */
  --bone: #1A1A1A;
  --bone-dim: rgba(26, 26, 26, 0.68);
  --bone-faint: rgba(26, 26, 26, 0.42);
  --bone-ghost: rgba(26, 26, 26, 0.20);

  /* Lime CTAs + terracotta accent from the flyer. */
  --acid: #A6CE39;
  --acid-ink: #1A1A1A;
  --coral: #FF5F3D;
  --terracotta: #FF5F3D;
  --sky: #3A6DB5;
  --violet: #7A5C9E;

  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 22px;

  --pad: 20px;
  --gap: 14px;
  --maxw: 620px;

  --serif: 'Instrument Serif', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --sans: Nunito, 'Avenir Next', 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

  --tabbar-h: 62px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--ink-900);
  color: var(--bone);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  /* The single most common mobile bug in a hand-built app: one wide child
     silently making the whole page pan sideways. Forbidden globally. */
  overflow-x: hidden;
}
body {
  min-height: 100vh;
  min-height: 100dvh;
  /* A very low-contrast grain/mesh wash. Gives the ink some depth without
     becoming a "gradient". */
  background-image:
    radial-gradient(1200px 600px at 50% -10%, rgba(255, 95, 61, 0.07), transparent 70%),
    radial-gradient(800px 500px at 100% 100%, rgba(166, 206, 57, 0.06), transparent 70%);
  background-attachment: fixed;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }

::selection { background: var(--acid); color: var(--acid-ink); }

:focus-visible {
  outline: 2px solid var(--acid);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ===== Layout shell ===== */
.app {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad);
  padding-bottom: calc(var(--tabbar-h) + 26px + env(safe-area-inset-bottom, 0px));
  min-height: 100dvh;
}
.app.no-tabs { padding-bottom: 48px; }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: calc(14px + env(safe-area-inset-top, 0px)) 0 10px;
  /* Deliberately NOT sticky. Any fill here — solid or blurred — paints a
     visible rectangle the width of the app column against the body's faint
     radial wash, and a fill is unavoidable if content scrolls under it. The
     wordmark is orientation, not navigation (the tab bar is navigation), so
     it simply scrolls away and the band problem disappears with it. */
  background: transparent;
}
.wordmark {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--bone);
  flex: none;
}
.wordmark-lockup {
  display: block;
  height: 32px;
  width: auto;
  max-width: 168px;
  object-fit: contain;
  object-position: left center;
}
.wordmark .dot { color: var(--terracotta); }
.topbar-tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone-faint);
  text-align: right;
  line-height: 1.35;
}
.build-identity {
  color: var(--bone-dim);
  letter-spacing: 0.11em;
}

.person.opportunity {
  position: relative;
  display: block;
  align-items: flex-start;
  min-height: 176px;
  padding: 0;
  overflow: hidden;
  border-color: var(--hairline);
  transition: border-color 180ms var(--ease), transform 180ms var(--ease), background 180ms var(--ease);
}
.opportunity:hover { border-color: var(--hairline-strong); background: var(--ink-800); transform: translateY(-1px); }
.opportunity-media, .discover-hero {
  position: relative;
  display: block;
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 24%, rgba(166, 206, 57, 0.17), transparent 34%),
    linear-gradient(145deg, rgba(26, 26, 26, 0.09), rgba(26, 26, 26, 0.015));
}
.opportunity-media { aspect-ratio: 16 / 8.4; border-bottom: 1px solid var(--hairline); }
.opportunity-media img, .discover-hero img { width: 100%; height: 100%; display: block; object-fit: cover; }
.opportunity-media img { transition: transform 420ms var(--ease), filter 240ms var(--ease); filter: saturate(0.92) contrast(1.03); }
.opportunity:hover .opportunity-media img { transform: scale(1.025); filter: saturate(1) contrast(1.04); }
.opportunity-body { display: block; padding: 17px 42px 18px 18px; }
.discover-hero { aspect-ratio: 16 / 9; border: 1px solid var(--hairline); border-radius: var(--radius); margin-bottom: 22px; }
.opportunity-kicker { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.source-mark {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.14em;
  color: var(--acid);
}
.opportunity-date { display: block; margin-top: 9px; color: var(--bone); font-size: 13px; font-weight: 600; }
.opportunity-location { display: block; margin-top: 2px; }
.opportunity-arrow { position: absolute; right: 18px; bottom: 18px; color: var(--bone-faint); font-size: 16px; line-height: 1; }

/* ===== Type ===== */
.display {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(38px, 12vw, 58px);
  line-height: 0.98;
  letter-spacing: -0.015em;
  margin: 0 0 14px;
}
.h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(30px, 8.5vw, 40px);
  line-height: 1.04;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}
.h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.15;
  margin: 0 0 6px;
}
.eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.lede {
  font-size: 17px;
  line-height: 1.5;
  color: var(--bone-dim);
  margin: 0 0 20px;
  max-width: 46ch;
}
.muted { color: var(--bone-dim); }
.faint { color: var(--bone-faint); }
.tiny { font-size: 13px; line-height: 1.45; }

.section { margin: 30px 0; }
.section-head { margin-bottom: 14px; }

/* ===== Cards ===== */
.card {
  background: linear-gradient(170deg, var(--ink-800), var(--ink-850));
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 18px;
  position: relative;
}
.card + .card { margin-top: var(--gap); }
.card-tight { padding: 15px 16px; }

/* Recommendation card — the product's signature object. The category
   eyebrow, the human blurb, and the "why Mesh chose this" line are three
   visually distinct registers on purpose: the last one is the promise the
   product is actually making. */
.rec {
  display: block;
  width: 100%;
  text-align: left;
  text-decoration: none;
  background: linear-gradient(170deg, var(--ink-800), var(--ink-850));
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 15px 16px 14px;
  cursor: pointer;
  transition: transform 0.28s var(--ease), border-color 0.28s var(--ease);
  overflow: hidden;
}
.rec:active { transform: scale(0.985); }
.rec + .rec { margin-top: var(--gap); }
.rec::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--cat, var(--bone-ghost));
  opacity: 0.85;
}
.rec { position: relative; }
.rec-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 9px;
}
.cat-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--cat, var(--bone-ghost));
  flex: none;
}
.cat-label {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--cat, var(--bone-dim));
}
.cat-hint {
  font-size: 11.5px;
  color: var(--bone-faint);
  margin-left: auto;
  text-align: right;
}
.rec-title {
  font-family: var(--serif);
  font-size: 24px;
  line-height: 1.1;
  margin: 0 0 2px;
}
.rec-sub {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--bone-faint);
  text-transform: uppercase;
  margin-bottom: 9px;
}
.rec-blurb { font-size: 14.5px; line-height: 1.45; color: var(--bone-dim); margin: 0 0 11px; }
.rec-why {
  border-top: 1px solid var(--hairline);
  padding-top: 9px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
}
.why-label {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone-faint);
  width: 100%;
  margin-bottom: 2px;
}
.reason {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.01em;
  color: var(--bone-dim);
  background: rgba(26, 26, 26, 0.05);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 2px 7px;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rec-cta {
  margin-top: 11px;
  font-size: 14px;
  font-weight: 600;
  color: var(--cat, var(--bone));
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.rec-cta .arr { transition: transform 0.3s var(--ease); }

.rec-primary-row{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:11px}
.rec-primary-row .rec-cta{margin-top:0;min-width:0}
.rec-cta-button{border:0;background:transparent;padding:0;font:inherit;cursor:pointer;text-align:left}
.rec-cta-button[disabled]{cursor:default;opacity:.72}
.rec-detail{flex:0 0 auto;color:var(--bone-faint);font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;padding:8px 0}
.rec-detail:hover,.rec-detail:focus-visible{color:var(--bone)}
.rec-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px;padding-top:12px;border-top:1px solid var(--hairline)}
.rec-action,.link-btn{background:transparent;color:var(--bone-dim);font:inherit;font-size:10px;font-weight:700;letter-spacing:.08em;padding:8px 10px;cursor:pointer;min-height:40px;border-radius:999px;-webkit-tap-highlight-color:transparent}
.rec-action{border:1px solid var(--hairline);transition:color 160ms var(--ease),border-color 160ms var(--ease),background 160ms var(--ease),transform 160ms var(--ease)}
.rec-action:hover,.rec-action:focus-visible{color:var(--bone);border-color:var(--hairline-strong);background:rgba(26, 26, 26,.055)}
.rec-action:active{transform:scale(.97)}
.rec-actions .rec-action{color:var(--acid);border-color:rgba(166, 206, 57,.28)}
.rec-action.is-current{background:rgba(26, 26, 26,.09);border-color:var(--bone-faint);color:var(--bone)}
.trajectory{border-top:1px solid var(--hairline);padding-top:26px}
.move-list{display:grid;gap:8px}
.move-row{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:11px 0;border-bottom:1px solid var(--hairline);width:100%;border-left:0;border-right:0;border-top:0;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}
.move-row>span:first-child{min-width:0;line-height:1.35}
.move-row:hover,.move-row:focus-visible{color:var(--bone)}
.evidence-group{margin-top:20px}
.evidence-label{letter-spacing:.14em}
.evidence-row{padding:12px 0;border-bottom:1px solid var(--hairline);line-height:1.45}
.evidence-row>span:first-child{color:var(--bone-dim)}
.evidence-controls{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.link-btn{border:0;padding-left:0;margin-right:10px;color:var(--bone-faint);text-decoration:underline;text-decoration-color:var(--hairline-strong);text-underline-offset:3px;transition:color 160ms var(--ease),text-decoration-color 160ms var(--ease)}
.link-btn:hover,.link-btn:focus-visible{color:var(--bone);text-decoration-color:var(--acid)}
.rec-more{margin:14px auto 0;max-width:230px}
.compact-details>summary{list-style:none;cursor:pointer;font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--bone-dim);padding:8px 30px 8px 0;position:relative}
.compact-details>summary::-webkit-details-marker{display:none}
.compact-details>summary::after{content:'+';position:absolute;right:2px;color:var(--acid);font-size:18px;line-height:.6}
.compact-details[open]>summary::after{content:'−'}
.compact-details[open]>summary{margin-bottom:12px;color:var(--bone)}
.now-card{border-color:rgba(166, 206, 57,.28);background:linear-gradient(170deg,rgba(166, 206, 57,.055),var(--ink-850))}
.now-next{margin:16px 0 0;padding-top:12px;border-top:1px solid var(--hairline)}
.tonight-collaborators:empty{display:none}
.rec:hover .rec-cta .arr { transform: translateX(3px); }

.cat-meet { --cat: var(--coral); }
.cat-build { --cat: var(--acid); }
.cat-go { --cat: var(--sky); }
.cat-explore { --cat: var(--bone-dim); }
.cat-stretch { --cat: var(--violet); }

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 14px 22px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--acid);
  color: var(--acid-ink);
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  width: 100%;
  transition: transform 0.2s var(--ease), opacity 0.2s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(0.975); }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.btn-ghost {
  background: transparent;
  color: var(--bone);
  border-color: var(--hairline-strong);
}
.btn-quiet {
  background: rgba(26, 26, 26, 0.07);
  color: var(--bone);
  border-color: var(--hairline);
}
.btn-sm { min-height: 42px; padding: 10px 16px; font-size: 14px; width: auto; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; }
.btn-row .btn { width: auto; flex: 1 1 auto; min-width: 140px; }

/* ===== Chips (multi-select) ===== */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font-size: 14.5px;
  line-height: 1.2;
  padding: 11px 15px;
  border-radius: 999px;
  border: 1px solid var(--hairline-strong);
  background: rgba(26, 26, 26, 0.035);
  color: var(--bone-dim);
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.14s var(--ease);
  -webkit-tap-highlight-color: transparent;
  min-height: 44px;
}
.chip:active { transform: scale(0.96); }
.chip[aria-pressed='true'] {
  background: var(--bone);
  color: var(--ink-900);
  border-color: var(--bone);
  font-weight: 600;
}
.chip-acid[aria-pressed='true'] { background: var(--acid); border-color: var(--acid); color: var(--acid-ink); }

/* Stacked radio-style options with a detail line. */
.opts { display: grid; gap: 9px; }
.opt {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 14px 15px;
  border-radius: var(--radius);
  border: 1px solid var(--hairline-strong);
  background: rgba(26, 26, 26, 0.03);
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease), transform 0.14s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.opt:active { transform: scale(0.99); }
.opt[aria-pressed='true'] { border-color: var(--acid); background: rgba(166, 206, 57, 0.07); }
.opt-mark {
  width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid var(--hairline-strong);
  flex: none; margin-top: 2px;
  position: relative;
  transition: border-color 0.2s var(--ease);
}
.opt[aria-pressed='true'] .opt-mark { border-color: var(--acid); }
.opt[aria-pressed='true'] .opt-mark::after {
  content: ''; position: absolute; inset: 3px;
  border-radius: 50%; background: var(--acid);
}
.opt-body { flex: 1; min-width: 0; }
.opt-title { font-size: 15.5px; font-weight: 560; line-height: 1.25; }
.opt-detail { font-size: 13px; color: var(--bone-faint); margin-top: 2px; line-height: 1.35; }

/* ===== Forms ===== */
.field { margin-bottom: 16px; }
.label {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone-faint);
  margin-bottom: 7px;
}
.input, .textarea, .select {
  width: 100%;
  background: rgba(26, 26, 26, 0.045);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-sm);
  padding: 14px 14px;
  /* 16px minimum: anything smaller makes iOS Safari zoom the whole page on
     focus, which is how a mobile form starts feeling broken. */
  font-size: 16px;
  color: var(--bone);
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
  min-height: 50px;
}
.input:focus, .textarea:focus, .select:focus {
  border-color: var(--acid);
  background: rgba(166, 206, 57, 0.045);
  outline: none;
}
.input::placeholder, .textarea::placeholder { color: var(--bone-ghost); }
.textarea { min-height: 110px; resize: vertical; line-height: 1.45; }
.textarea-short { min-height: 78px; }
.builder-search { margin: 14px 0 10px; }
.tag-skill { border-style: dashed; }
.room-match { margin: 18px 0 14px; }
.select { appearance: none; -webkit-appearance: none; background-image: none; }
.help { font-size: 12.5px; color: var(--bone-faint); margin-top: 6px; line-height: 1.4; }
.err {
  font-size: 13.5px;
  color: var(--coral);
  margin-top: 8px;
  line-height: 1.4;
}
.switch-row {
  display: flex; align-items: center; gap: 13px;
  padding: 14px 0;
  border-top: 1px solid var(--hairline);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.switch-row:first-of-type { border-top: none; }
.switch-body { flex: 1; min-width: 0; }
.switch {
  width: 46px; height: 27px; border-radius: 999px; flex: none;
  background: rgba(26, 26, 26, 0.13);
  border: 1px solid var(--hairline-strong);
  position: relative;
  transition: background 0.24s var(--ease);
}
.switch::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 21px; height: 21px; border-radius: 50%;
  background: var(--bone);
  transition: transform 0.24s var(--ease);
}
.switch-row[aria-pressed='true'] .switch { background: var(--acid); border-color: var(--acid); }
.switch-row[aria-pressed='true'] .switch::after { transform: translateX(19px); background: var(--acid-ink); }

/* ===== Progress (onboarding) ===== */
.progress {
  display: flex; gap: 5px; margin: 0 0 22px;
}
.progress i {
  height: 3px; flex: 1; border-radius: 2px;
  background: rgba(26, 26, 26, 0.12);
  transition: background 0.4s var(--ease);
}
.progress i.on { background: var(--acid); }

/* ===== Bottom nav ===== */
.tabbar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 100%;
  max-width: var(--maxw);
  z-index: 60;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: rgba(253, 248, 241, 0.92);
  -webkit-backdrop-filter: saturate(150%) blur(18px);
  backdrop-filter: saturate(150%) blur(18px);
  border-top: 1px solid var(--hairline);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: var(--tabbar-h);
  text-decoration: none;
  color: var(--bone-faint);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  position: relative;
  transition: color 0.2s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.tab svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 1.5; }
.tab-logo {
  width: 22px;
  height: 22px;
  object-fit: cover;
  object-position: 12% 50%;
  border-radius: 5px;
  background: #FDF8F1;
}
.tab.active { color: var(--bone); }
.tab.active::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 22px; height: 2px;
  background: var(--acid);
  border-radius: 0 0 2px 2px;
}

/* ===== Lists / builders ===== */
.person {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  padding: 15px 16px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: linear-gradient(170deg, var(--ink-800), var(--ink-850));
  text-decoration: none;
  cursor: pointer;
  width: 100%;
  text-align: left;
  transition: border-color 0.24s var(--ease), transform 0.2s var(--ease);
}
.person:active { transform: scale(0.99); }
.person + .person { margin-top: 10px; }
.avatar {
  width: 44px; height: 44px; border-radius: 13px; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif);
  font-size: 20px;
  background: rgba(26, 26, 26, 0.07);
  border: 1px solid var(--hairline);
  color: var(--bone-dim);
}
.person-body { flex: 1; min-width: 0; }
.person-name { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.person-meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--bone-faint);
  margin-top: 2px;
}
.taglist { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.tag {
  font-size: 11.5px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(26, 26, 26, 0.06);
  border: 1px solid var(--hairline);
  color: var(--bone-dim);
}
.tag-acid { background: rgba(166, 206, 57, 0.12); border-color: rgba(166, 206, 57, 0.3); color: var(--acid); }

/* ===== Filters ===== */
.filters {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding: 2px 0 12px;
  margin: 0 calc(var(--pad) * -1);
  padding-left: var(--pad);
  padding-right: var(--pad);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.filters::-webkit-scrollbar { display: none; }
.filters {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--pad), #000 calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 var(--pad), #000 calc(100% - 28px), transparent 100%);
}
.filters .chip { flex: none; font-size: 13.5px; padding: 9px 13px; min-height: 38px; }

/* ===== Schedule ===== */
.slot {
  display: flex;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid var(--hairline);
}
.slot:first-child { border-top: none; }
.slot-time {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--acid);
  width: 72px;
  flex: none;
  padding-top: 2px;
}
.slot-title { font-size: 16px; font-weight: 570; line-height: 1.25; }
.slot-detail { font-size: 13.5px; color: var(--bone-faint); margin-top: 3px; line-height: 1.4; }

/* ===== Projects ===== */
.proj-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-sm);
  margin-bottom: 13px;
  background: rgba(26, 26, 26, 0.05);
  border: 1px solid var(--hairline);
}
.vote-row { display: flex; gap: 7px; margin-top: 14px; flex-wrap: wrap; }
.vote {
  flex: 1 1 0;
  min-width: 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 10px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--hairline-strong);
  background: rgba(26, 26, 26, 0.035);
  cursor: pointer;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.14s var(--ease);
  -webkit-tap-highlight-color: transparent;
  min-height: 58px;
}
.vote:active { transform: scale(0.96); }
.vote[aria-pressed='true'] { background: rgba(166, 206, 57, 0.12); border-color: var(--acid); }
.vote-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--bone-faint);
  text-align: center;
  line-height: 1.25;
}
.vote[aria-pressed='true'] .vote-label { color: var(--acid); }
.vote-count { font-size: 17px; font-weight: 650; font-variant-numeric: tabular-nums; }

/* ===== States ===== */
.empty {
  text-align: center;
  padding: 44px 22px;
  border: 1px dashed var(--hairline-strong);
  border-radius: var(--radius-lg);
}
.empty .h2 { margin-bottom: 8px; }
.empty p { color: var(--bone-faint); font-size: 14.5px; margin: 0 auto 18px; max-width: 34ch; line-height: 1.5; }

.skeleton {
  border-radius: var(--radius);
  background: linear-gradient(100deg, rgba(26, 26, 26,0.045) 30%, rgba(26, 26, 26,0.09) 50%, rgba(26, 26, 26,0.045) 70%);
  background-size: 300% 100%;
  animation: shimmer 1.5s linear infinite;
  height: 128px;
}
.skeleton + .skeleton { margin-top: var(--gap); }
@keyframes shimmer { from { background-position: 150% 0; } to { background-position: -150% 0; } }

.banner {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 13px 15px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--hairline-strong);
  background: rgba(26, 26, 26, 0.045);
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--bone-dim);
  margin-bottom: 16px;
}
.banner-warn { border-color: rgba(255, 107, 74, 0.4); background: rgba(255, 107, 74, 0.08); }
.banner-acid { border-color: rgba(166, 206, 57, 0.35); background: rgba(166, 206, 57, 0.07); }
.banner b { color: var(--bone); font-weight: 600; }

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--tabbar-h) + 18px + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 14px);
  z-index: 90;
  background: var(--bone);
  color: var(--ink-900);
  font-size: 14px;
  font-weight: 560;
  padding: 12px 18px;
  border-radius: 999px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.26s var(--ease), transform 0.26s var(--ease);
  max-width: calc(100vw - 40px);
  text-align: center;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ===== Landing ===== */
.landing {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding-top: calc(24px + env(safe-area-inset-top, 0px));
  padding-bottom: 30px;
}
.landing-hero { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 34px 0; }
.landing .display { font-size: clamp(56px, 20vw, 104px); letter-spacing: -0.035em; line-height: 0.86; margin-bottom: 20px; }
.landing-sub {
  font-family: var(--serif);
  font-size: clamp(25px, 7.5vw, 34px);
  line-height: 1.12;
  color: var(--bone);
  margin: 0 0 16px;
}
.landing-sub em { font-style: normal; color: var(--terracotta); }
.landing-grok { font-family: var(--serif); font-weight: 400; }
.landing-build-night {
  font-family: var(--sans);
  font-weight: 800;
  color: var(--terracotta);
  letter-spacing: -0.02em;
}
.mesh-mark { margin: 0 0 26px; }

.beta-stamp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone-faint);
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  padding: 6px 13px;
  margin-bottom: 26px;
}
.beta-stamp .pulse {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--acid);
  animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

/* ===== Reveal motion ===== */
.reveal { opacity: 0; transform: translateY(14px); animation: rise 0.62s var(--ease) forwards; }
@keyframes rise { to { opacity: 1; transform: none; } }
.d1 { animation-delay: 0.05s; }
.d2 { animation-delay: 0.11s; }
.d3 { animation-delay: 0.17s; }
.d4 { animation-delay: 0.23s; }
.d5 { animation-delay: 0.29s; }
.d6 { animation-delay: 0.35s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

@media (max-width: 480px) {
  .rec-actions { display: block; }
  .rec-action { width: 100%; min-height: 44px; }
  .move-row { align-items: flex-start; }
  .rec-primary-row { align-items: flex-start; }
}

/* ===== Detail views ===== */
.back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bone-faint);
  text-decoration: none;
  padding: 10px 0;
  margin-bottom: 4px;
  background: none;
  border: none;
  cursor: pointer;
}
.kv { display: grid; gap: 14px; margin-top: 4px; }
.kv-item { }
.kv-key {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone-faint);
  margin-bottom: 4px;
}
.kv-val { font-size: 15px; line-height: 1.5; color: var(--bone); white-space: pre-wrap; overflow-wrap: anywhere; }

.link-out {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14.5px;
  color: var(--acid);
  text-decoration: none;
  font-weight: 560;
  overflow-wrap: anywhere;
}

/* Long user-authored strings (a pasted URL, a one-word project name typed by
   a very enthusiastic freshman) must wrap, not widen the page. */
.card, .rec, .person, .kv-val, .lede, .rec-blurb { overflow-wrap: anywhere; }

hr.rule { border: none; border-top: 1px solid var(--hairline); margin: 24px 0; }

/* ===== Desktop polish ===== */
@media (min-width: 780px) {
  :root { --pad: 30px; }
  .app { padding-bottom: 70px; }
  .tabbar {
    position: sticky;
    bottom: auto;
    top: 0;
    max-width: none;
    width: auto;
    left: auto;
    transform: none;
    grid-template-columns: repeat(5, auto);
    justify-content: center;
    gap: 6px;
    border-top: none;
    border-bottom: 1px solid var(--hairline);
    margin: 0 calc(var(--pad) * -1) 8px;
    padding: 0 var(--pad);
    background: rgba(253, 248, 241, 0.92);
  }
  .tab { flex-direction: row; gap: 8px; height: 54px; padding: 0 14px; font-size: 11px; }
  .tab svg { width: 17px; height: 17px; }
  .tab.active::before { top: auto; bottom: 0; width: 100%; border-radius: 2px 2px 0 0; }
  .toast { bottom: 30px; }
  .landing .display { font-size: 122px; }
  .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
  .grid-2 .rec + .rec, .grid-2 .card + .card, .grid-2 .person + .person { margin-top: 0; }
}

/* ===== BUILD010: public editorial surface ===== */
.landing-wide {
  width: min(1120px, calc(100vw - 40px));
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  isolation: isolate;
}
.landing-wide .topbar { position: relative; z-index: 4; }
.landing-wide .landing-hero {
  min-height: min(760px, 83vh);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr);
  align-items: center;
  overflow: hidden;
}
.landing-copy { position: relative; z-index: 3; max-width: 690px; }
.landing-wide .display {
  font-size: clamp(76px, 14vw, 174px);
  line-height: .78;
  text-shadow: 0 24px 80px rgba(0,0,0,.5);
}
.landing-wide .landing-sub { font-size: clamp(34px, 5vw, 62px); max-width: 13ch; margin-top: 30px; }
.landing-lede { font-size: clamp(17px, 2vw, 21px); max-width: 55ch; }
.landing-actions { display: flex; gap: 10px; flex-wrap: wrap; max-width: 500px; }
.landing-actions .btn { width: auto; min-width: 180px; }
.landing-orbit {
  position: absolute;
  z-index: 1;
  right: -4%;
  top: 50%;
  width: min(48vw, 510px);
  aspect-ratio: 1;
  transform: translateY(-50%) rotateX(64deg) rotateZ(-16deg);
  transform-style: preserve-3d;
  filter: drop-shadow(0 46px 60px rgba(0,0,0,.52));
}
.orbit { position: absolute; inset: 8%; border: 1px solid rgba(26, 26, 26,.18); border-radius: 50%; animation: orbitSpin 18s linear infinite; }
.orbit::before, .orbit::after { content:''; position:absolute; inset:17%; border:1px solid rgba(166, 206, 57,.22); border-radius:50%; }
.orbit::after { inset:36%; border-color:rgba(255,107,74,.24); }
.orbit-b { inset:22%; transform: translateZ(70px); animation-direction: reverse; animation-duration: 13s; }
.orbit-node { position:absolute; width:15px; height:15px; border-radius:50%; background:var(--acid); box-shadow:0 0 0 8px rgba(166, 206, 57,.08), 0 0 34px rgba(166, 206, 57,.65); }
.node-a { top:8%; left:48%; transform:translateZ(40px); }
.node-b { right:11%; bottom:25%; background:var(--coral); box-shadow:0 0 0 8px rgba(255,107,74,.08), 0 0 34px rgba(255,107,74,.55); }
.node-c { left:18%; bottom:20%; background:var(--sky); box-shadow:0 0 0 8px rgba(143,184,255,.08), 0 0 34px rgba(143,184,255,.45); }
@keyframes orbitSpin { to { transform: rotateZ(360deg); } }

.landing-statement {
  border-top:1px solid var(--hairline-strong);
  border-bottom:1px solid var(--hairline-strong);
  padding:70px 0;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(260px,.55fr);
  gap:50px;
  align-items:end;
}
.landing-statement h2 { font-family:var(--serif); font-weight:400; font-size:clamp(35px,5.4vw,68px); line-height:.98; letter-spacing:-.02em; margin:0; max-width:18ch; }
.landing-statement>p:last-child { color:var(--bone-dim); font-size:16px; line-height:1.65; margin:0; }
.landing-portals { perspective:1200px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; padding:72px 0; }
.landing-portal {
  min-width:0; min-height:260px; padding:20px; position:relative; overflow:hidden;
  border:1px solid var(--hairline-strong); border-radius:var(--radius-lg); color:var(--bone);
  background:linear-gradient(155deg,rgba(26, 26, 26,.075),rgba(26, 26, 26,.018));
  display:flex; flex-direction:column; align-items:flex-start; text-align:left; cursor:pointer;
  transform:rotateY(-2deg) translateZ(0); transform-style:preserve-3d;
  box-shadow:0 24px 80px rgba(0,0,0,.22);
  transition:transform .5s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.landing-portal::before { content:''; position:absolute; inset:-40%; opacity:.35; background:radial-gradient(circle,rgba(166, 206, 57,.16),transparent 58%); transform:translate(-35%,-20%); }
.landing-portal:hover { transform:rotateY(0) translateY(-8px) translateZ(25px); border-color:rgba(166, 206, 57,.34); background:linear-gradient(155deg,rgba(26, 26, 26,.11),rgba(26, 26, 26,.025)); }
.landing-portal>* { position:relative; z-index:1; }
.portal-index { font-family:var(--mono); font-size:11px; color:var(--acid); margin-bottom:auto; }
.landing-portal .eyebrow { margin-top:46px; }
.landing-portal strong { font-family:var(--serif); font-size:34px; font-weight:400; line-height:1; margin-bottom:10px; }
.portal-arrow { position:absolute; right:18px; top:17px; color:var(--bone-faint); }
.landing-capsule-feature { min-height:480px; display:grid; grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr); border:1px solid var(--hairline-strong); border-radius:28px; overflow:hidden; background:var(--ink-850); }
.landing-capsule-feature>img { width:100%; height:100%; object-fit:cover; filter:saturate(.86) contrast(1.04); }
.landing-capsule-feature>div { padding:clamp(28px,5vw,62px); display:flex; flex-direction:column; justify-content:center; align-items:flex-start; }
.landing-capsule-feature h2 { font-family:var(--serif); font-weight:400; font-size:clamp(38px,5vw,64px); line-height:.94; margin:0 0 16px; }
.landing-footer { margin-top:72px; border-top:1px solid var(--hairline); padding:24px 0 0; display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.landing-footer>a { font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.12em; text-decoration:none; color:var(--bone-dim); }
.landing-footer>p { margin-left:auto !important; max-width:480px; text-align:right; }

/* ===== Capsules ===== */
.capsule-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.capsule-card { min-width:0; padding:0; color:var(--bone); border:1px solid var(--hairline); border-radius:var(--radius-lg); overflow:hidden; background:var(--ink-850); text-align:left; cursor:pointer; transition:transform .35s var(--ease), border-color .25s var(--ease), box-shadow .35s var(--ease); }
.capsule-card:hover { transform:translateY(-5px); border-color:var(--hairline-strong); box-shadow:0 26px 70px rgba(0,0,0,.28); }
.capsule-media { position:relative; overflow:hidden; background:var(--ink-700); }
.capsule-media img { width:100%; height:100%; object-fit:cover; display:block; filter:saturate(.92) contrast(1.02); }
.capsule-card-media { aspect-ratio:16/10; }
.capsule-article-media { aspect-ratio:16/9; border-radius:var(--radius-lg); margin:0 0 22px; }
.capsule-number { font-family:var(--serif); font-size:34px; line-height:1; color:var(--bone-faint); }
.capsule-card-topline { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.capsule-card-topline .eyebrow { margin:0; }
.capsule-body { display:flex; flex-direction:column; min-height:220px; padding:19px; }
.capsule-body strong { font-family:var(--serif); font-size:31px; font-weight:400; line-height:.96; margin:4px 0 12px; overflow-wrap:anywhere; }
.capsule-body>.muted { font-size:14px; line-height:1.5; }
.capsule-enter { margin-top:auto; padding-top:18px; font-family:var(--mono); font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--acid); }
.capsule-article-head h1 { font-family:var(--serif); font-weight:400; font-size:clamp(46px,11vw,76px); letter-spacing:-.025em; line-height:.87; margin:10px 0 20px; overflow-wrap:anywhere; }
.image-credit { position:absolute; right:9px; bottom:9px; z-index:2; background:rgba(26, 26, 26,.76); color:#FDF8F1; text-decoration:none; border:1px solid rgba(26, 26, 26,.13); border-radius:999px; padding:5px 8px; font-family:var(--mono); font-size:8px; letter-spacing:.04em; backdrop-filter:blur(8px); }
.capsule-copy { max-width:58ch; margin:0 auto; }
.capsule-copy p { font-family:var(--serif); font-size:23px; line-height:1.48; color:rgba(26, 26, 26,.88); margin:0 0 24px; }
.capsule-copy .dropcap::first-letter { float:left; font-size:79px; line-height:.7; margin:15px 9px 0 0; color:var(--acid); }
.capsule-question { margin:42px 0; padding:30px 0 30px 24px; border:0; border-left:2px solid var(--acid); }
.capsule-question strong { display:block; font-family:var(--serif); font-size:clamp(30px,7vw,45px); font-weight:400; line-height:1.05; }
.capsule-response { background:linear-gradient(145deg,rgba(166, 206, 57,.07),rgba(26, 26, 26,.025)); border:1px solid rgba(166, 206, 57,.22); border-radius:var(--radius-lg); padding:20px; margin-bottom:30px; }
.signal-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.signal-button { min-height:54px; padding:11px; border:1px solid var(--hairline-strong); border-radius:var(--radius-sm); color:var(--bone-dim); background:rgba(253, 248, 241, 0.72); cursor:pointer; text-align:left; }
.signal-button[aria-pressed='true'] { color:var(--acid); border-color:var(--acid); background:rgba(166, 206, 57,.09); }
.signal-followup { margin-top:22px; border-top:1px solid var(--hairline); padding-top:20px; }
.choice-list .chip { min-height:38px; }
.signal-privacy { border-top:1px solid var(--hairline); padding-top:14px; margin:20px 0 0; }

/* ===== Student Access ===== */
.access-trust { display:flex; flex-wrap:wrap; gap:7px; }
.access-trust span { font-family:var(--mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:var(--acid); border:1px solid rgba(166, 206, 57,.25); border-radius:999px; padding:5px 8px; }
.access-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.access-card { min-width:0; background:linear-gradient(155deg,var(--ink-800),var(--ink-850)); border:1px solid var(--hairline); border-radius:var(--radius-lg); padding:19px; display:flex; flex-direction:column; box-shadow:0 18px 55px rgba(0,0,0,.16); }
.access-featured { grid-column:1/-1; min-height:440px; padding:0; overflow:hidden; position:relative; background:var(--ink-850); color:var(--bone); }
.access-image { margin:-19px -19px 18px; height:190px; position:relative; overflow:hidden; }
.access-image::after { content:''; position:absolute; inset:0; background:linear-gradient(to top,var(--ink-850),transparent 58%); }
.access-image img { width:100%; height:100%; object-fit:cover; filter:saturate(.88) contrast(1.03); }
.access-featured .access-image { margin:0; height:245px; }
.access-featured .access-image::after { background:linear-gradient(to top, var(--ink-850) 0%, transparent 42%); }
.access-copy { display:flex; flex-direction:column; flex:1; }
.access-featured .access-copy {
  padding: 18px 22px 22px;
  background: var(--ink-850);
  color: var(--bone);
}
.access-featured .access-summary,
.access-featured .access-facts,
.access-featured .access-source { color:var(--bone-dim); }
.access-featured .h2,
.access-featured .access-brand,
.access-featured .access-facts b { color:var(--bone); }
.access-featured .access-actions { margin-bottom:0; }
.access-topline { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.access-brand { font-family:var(--serif); font-size:27px; }
.access-value { font-family:var(--mono); font-size:9px; color:var(--acid); letter-spacing:.11em; border:1px solid rgba(166, 206, 57,.25); border-radius:999px; padding:5px 8px; }
.access-summary { font-size:14px; line-height:1.55; margin:5px 0 14px; }
.access-facts { font-size:12px; line-height:1.5; color:var(--bone-faint); border-top:1px solid var(--hairline); padding-top:12px; }
.access-facts p { margin:0 0 8px; }
.access-facts b { color:var(--bone-dim); font-weight:600; }
.access-source { font-family:var(--mono); font-size:8px; letter-spacing:.04em; text-transform:uppercase; color:var(--bone-faint); display:flex; justify-content:space-between; gap:10px; border-top:1px solid var(--hairline); padding-top:10px; margin-top:auto; }
.access-actions { margin-top:15px; }
.access-state-row { display:flex; flex-wrap:wrap; gap:6px; margin-top:9px; }
.access-state-row .rec-action { flex:1 1 92px; min-height:39px; }
.access-problem { margin-top:12px; }
.access-disclaimer { border-top:1px solid var(--hairline); padding-top:16px; margin-top:24px; }

/* ===== Discover portals + Elsewhere ===== */
.discover-portals { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:22px; }
.discover-portal { min-width:0; min-height:150px; position:relative; text-align:left; color:var(--bone); border:1px solid var(--hairline-strong); border-radius:var(--radius); padding:16px; cursor:pointer; overflow:hidden; background:linear-gradient(145deg,rgba(26, 26, 26,.075),rgba(26, 26, 26,.02)); }
.discover-portal::before { content:''; position:absolute; width:140px; height:140px; border:1px solid rgba(166, 206, 57,.15); border-radius:50%; right:-50px; bottom:-80px; }
.discover-portal strong,.discover-portal>span { display:block; position:relative; z-index:1; }
.discover-portal strong { font-family:var(--serif); font-size:27px; font-weight:400; line-height:1; margin-bottom:8px; }
.discover-portal>span:not(.eyebrow) { color:var(--bone-faint); font-size:12.5px; line-height:1.4; max-width:22ch; }
.discover-portal>i { position:absolute; top:13px; right:14px; color:var(--acid); font-style:normal; }
.tag-elsewhere { border-color:rgba(143,184,255,.3); color:var(--sky); }
.elsewhere-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.elsewhere-link { min-width:0; display:flex; align-items:center; gap:11px; padding:12px; border:1px solid var(--hairline); border-radius:var(--radius-sm); text-decoration:none; background:rgba(26, 26, 26,.025); transition:border-color .2s, transform .2s; }
.elsewhere-link:hover { border-color:rgba(143,184,255,.4); transform:translateY(-2px); }
.elsewhere-link>span:nth-child(2) { min-width:0; flex:1; }
.elsewhere-link strong,.elsewhere-link small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.elsewhere-link strong { font-size:13px; }
.elsewhere-link small { font-family:var(--mono); font-size:8px; text-transform:uppercase; color:var(--bone-faint); }
.elsewhere-link>i { color:var(--bone-faint); font-style:normal; }
.elsewhere-monogram { width:34px; height:34px; border-radius:10px; display:grid; place-items:center; flex:none; border:1px solid rgba(143,184,255,.25); background:rgba(143,184,255,.08); color:var(--sky); font-family:var(--mono); font-size:10px; }
.elsewhere-edit-row { min-width:0; display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--hairline); }
.elsewhere-edit-row .row-body { min-width:0; flex:1; }
.elsewhere-edit-row strong,.elsewhere-edit-row small { display:block; }
.elsewhere-edit-row small { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--bone-faint); font-size:10px; }
.elsewhere-add { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; margin-top:12px; }
.elsewhere-add .btn { width:auto; min-width:82px; }
.tonight-one-action { max-width:360px; }
.tonight-one-action .btn { box-shadow:0 0 0 1px rgba(166, 206, 57,.18),0 16px 42px rgba(166, 206, 57,.12); }

@media (max-width: 760px) {
  .landing-wide .landing-hero { grid-template-columns:1fr; min-height:760px; }
  .landing-orbit { width:410px; right:-190px; opacity:.62; }
  .landing-copy { padding-right:12px; }
  .landing-wide .display { font-size:clamp(78px,24vw,118px); }
  .landing-wide .landing-sub { max-width:10ch; font-size:clamp(36px,11vw,50px); }
  .landing-statement { grid-template-columns:1fr; gap:24px; padding:55px 0; }
  .landing-portals { grid-template-columns:1fr 1fr; padding:48px 0; }
  .landing-portal { min-height:220px; }
  .landing-capsule-feature { grid-template-columns:1fr; }
  .landing-capsule-feature>img { aspect-ratio:16/10; }
  .landing-footer>p { margin-left:0!important; text-align:left; }
}
@media (max-width: 520px) {
  .capsule-grid,.access-grid,.discover-portals { grid-template-columns:1fr; }
  .access-featured { grid-column:auto; }
  .capsule-body strong { font-size:34px; }
  .elsewhere-grid { grid-template-columns:1fr; }
  .landing-portals { grid-template-columns:1fr; }
  .landing-portal { min-height:190px; }
  .landing-portal .eyebrow { margin-top:28px; }
  .landing-actions { display:grid; grid-template-columns:1fr; }
  .landing-actions .btn { width:100%; }
  .signal-grid { grid-template-columns:1fr; }
  .access-source { display:block; }
}

/* ===== BUILD011: event-first arrival + completeness behind it ===== */
.landing-event {
  width: min(640px, calc(100vw - 32px));
  margin: 0 auto;
}
.landing-event .landing-hero {
  min-height: min(72vh, 640px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 28px 0 12px;
}
.landing-event .display {
  font-size: clamp(72px, 22vw, 120px);
  line-height: .8;
  margin-bottom: 12px;
}
.landing-event .landing-sub {
  max-width: 18ch;
  font-size: clamp(28px, 7vw, 36px);
}
.landing-primary-only { display: grid; gap: 10px; max-width: 420px; }
.landing-primary-cta { min-height: 54px; font-size: 16px; }
.landing-secondary-cta { min-height: 48px; }
.landing-secondary-nav {
  border-top: 1px solid var(--hairline);
  margin-top: 28px;
  padding-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 18px;
  align-items: baseline;
}
.landing-secondary-nav > a {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--bone-faint);
}

.avatar-mark { position: relative; overflow: hidden; }
.avatar-mark .avatar-ring {
  position: absolute; inset: 5px;
  border: 1px solid currentColor; border-radius: 50%;
  opacity: .45; pointer-events: none;
}
.avatar-mark.tone-0 { color: var(--acid); background: rgba(166, 206, 57,.08); }
.avatar-mark.tone-1 { color: var(--sky); background: rgba(143,184,255,.1); }
.avatar-mark.tone-2 { color: var(--coral); background: rgba(255,107,74,.1); }
.avatar-mark.tone-3 { color: var(--violet); background: rgba(185,155,255,.1); }

.work-card .work-topline { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.work-summary { font-size: 15px; line-height: 1.5; margin: 0 0 12px; max-width: 52ch; }
.work-links { display: flex; flex-wrap: wrap; gap: 10px 16px; margin: 0 0 12px; }
.work-feedback { flex-wrap: wrap; }

.recent-ud { border-top: 1px solid var(--hairline); padding-top: 26px; }
.recent-ud-note { margin: 6px 0 14px; max-width: 54ch; }
.recent-ud-grid { display: grid; grid-template-columns: 1fr; gap: var(--gap); }
.recent-ud-card { padding: 0; overflow: hidden; }
.recent-ud-card + .recent-ud-card { margin-top: 0; }
.recent-ud-media { display: block; aspect-ratio: 1200 / 628; background: var(--ink-800); overflow: hidden; }
.recent-ud-media img { width: 100%; height: 100%; object-fit: cover; }
.recent-ud-body { padding: 17px; }
.recent-ud-creator { margin: 6px 0 10px; }

@media (min-width: 780px) {
  .recent-ud-grid { grid-template-columns: 1fr 1fr; }
}

.capsule-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.capsule-featured {
  display: grid;
  gap: 0;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--ink-850);
  color: var(--bone);
  margin-bottom: 22px;
}
.capsule-featured-media { min-height: 220px; aspect-ratio: 16/10; }
.capsule-featured-copy { padding: 22px 18px; }
.capsule-carousel-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.capsule-carousel-controls { display: flex; gap: 8px; }
.capsule-carousel-controls .btn { width: 44px; min-width: 44px; min-height: 44px; padding: 0; }
.capsule-carousel-track {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;
  max-width: 100%;
}
.capsule-slide {
  flex: 0 0 86%;
  min-width: 0;
  scroll-snap-align: start;
}
.capsule-slide .capsule-card { width: 100%; }
@media (min-width: 780px) {
  .capsule-featured { grid-template-columns: 1.15fr 0.85fr; align-items: stretch; }
  .capsule-featured-media { aspect-ratio: auto; min-height: 100%; height: 100%; }
  .capsule-featured-copy { padding: 28px; display: flex; flex-direction: column; justify-content: center; }
  .capsule-slide { flex-basis: 48%; }
}
@media (prefers-reduced-motion: reduce) {
  .capsule-carousel-track { scroll-behavior: auto; }
}