/* GibSearch — production stylesheet
   Ported from the GibSearch v6 Claude Design prototype. Colours, type scale
   and spacing values are taken directly from that file; markup and
   structure are original (the prototype's HTML is a design-tool artifact,
   not something to ship). */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  --black: #0a0a0a;
  --white: #ffffff;
  --orange: #f95300;
  --hair-dark: #1c1c1c;
  --hair-light: #e6e4e0;
  --muted-on-dark: #8d8a84;
  --muted-on-light: #6b6862;
  --body-on-dark: #d6d3ce;
  --body-on-light: #26241f;
  --meta-on-light: #9b9892;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--black);
  font-family: Archivo, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: var(--white);
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--orange); }
::selection { background: var(--orange); color: var(--black); }

button { font-family: inherit; }

img { display: block; max-width: 100%; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.mono {
  font-family: 'IBM Plex Mono', monospace;
}

/* ---------- Cursor mark (the "gibsearch_" wordmark punctuation) ---------- */
.wordmark {
  display: inline-flex;
  align-items: flex-end;
  gap: 0.18em;
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 500;
  letter-spacing: -0.05em;
  text-transform: lowercase;
}
.wordmark .cursor {
  width: 0.4em;
  height: 0.13em;
  background: var(--orange);
  margin-bottom: 0.16em;
  flex: none;
}
.wordmark.blink .cursor { animation: gs-blink 1.4s steps(1, end) infinite; }
@keyframes gs-blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .wordmark.blink .cursor { animation: none; }
}

/* ---------- Top nav ---------- */
.site-nav {
  position: fixed;
  left: 0; right: 0; top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 30px;
  mix-blend-mode: difference;
  color: var(--white);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  pointer-events: none;
}
.site-nav a { pointer-events: auto; }
.site-nav .wordmark { font-size: 13px; pointer-events: auto; }
.site-nav .links { display: flex; gap: 26px; pointer-events: auto; }

/* mix-blend-mode: difference reads fine over black (white diff black =
   white) and white (white diff white = black), but over GibSearch orange
   it resolves to a muddy blue-grey — barely legible. Force plain solid
   white (blend mode off) while the nav overlaps the orange edition
   section instead; see the IntersectionObserver in js/main.js that toggles
   this class. The cursor accent is normally orange-on-transparent, which
   would vanish on an orange backdrop, so it switches to black here too. */
.site-nav.on-orange {
  mix-blend-mode: normal;
  color: var(--white);
}
.site-nav.on-orange a:hover { color: var(--black); }
.site-nav.on-orange .cursor { background: var(--black); }

@media (max-width: 420px) {
  .site-nav { padding: 14px 16px; gap: 12px; font-size: 9.5px; letter-spacing: 0.1em; }
  .site-nav .links { gap: 14px; }
}

/* ---------- Shared section shell: 58px rail + content ---------- */
.rail-section {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  background: var(--black);
}
.rail-section.on-light { background: var(--white); color: var(--black); }
.rail { border-right: 1px solid var(--hair-dark); }
.on-light .rail { border-right-color: var(--hair-light); }

@media (max-width: 640px) {
  .rail-section { grid-template-columns: 24px minmax(0, 1fr); }
}

/* ---------- Hero ---------- */
.hero {
  min-height: 100vh;
}
.hero .rail {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 100px 0 30px;
}
.hero .rail-label {
  writing-mode: vertical-rl;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--muted-on-dark);
  white-space: nowrap;
}
.hero-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 100px 0 34px;
}
.hero-eyebrow {
  padding: 0 30px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-on-dark);
}
.hero-wordmark {
  padding: 0 24px;
  font-size: 15.4vw;
  line-height: 0.78;
}
.hero-wordmark .wordmark { font-size: inherit; letter-spacing: -0.055em; }
.hero-wordmark .cursor { width: 0.34em; height: 0.112em; margin-left: 0.09em; margin-bottom: 0.095em; }

.hero-meta {
  padding: clamp(30px, 4vw, 58px) 30px 0;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: end;
}
@media (max-width: 780px) {
  .hero-meta { grid-template-columns: 1fr; }
}
.hero-date {
  display: flex;
  align-items: flex-end;
  gap: clamp(18px, 3vw, 40px);
  flex-wrap: wrap;
}
.hero-daynum {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 500;
  font-size: clamp(58px, 8vw, 134px);
  line-height: 0.76;
  letter-spacing: -0.055em;
}
.hero-date-detail {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding-bottom: clamp(6px, 1vw, 14px);
  font-family: 'IBM Plex Mono', monospace;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.hero-date-detail .month-year { font-size: clamp(15px, 1.4vw, 20px); }
.hero-date-detail .when { font-size: clamp(12px, 1.1vw, 14px); color: var(--muted-on-dark); }

.hero-cta { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.hero-cta .lead {
  font-size: clamp(16px, 1.35vw, 20px);
  line-height: 1.45;
  color: var(--body-on-dark);
  max-width: 30ch;
}
.cta-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.going-note {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px;
}
.hero-cta .going-note, .close-copy .going-note { color: var(--muted-on-dark); }

.btn-solid {
  all: unset;
  cursor: pointer;
  background: var(--orange);
  color: var(--black);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 19px 36px;
  transition: background 120ms ease;
}
.btn-solid:hover { background: var(--white); }
.btn-solid[data-going="true"] { background: var(--white); }
.btn-solid[data-going="true"]:hover { background: var(--orange); }

.btn-solid.on-orange { background: var(--black); color: var(--white); }
.btn-solid.on-orange:hover { background: var(--white); color: var(--black); }
.btn-solid.on-orange[data-going="true"] { background: var(--white); color: var(--black); }
.btn-solid.on-orange[data-going="true"]:hover { background: var(--black); color: var(--white); }

/* ---------- Community section ---------- */
.community .rail-content { padding: clamp(80px, 9vw, 130px) 0 0; }
.community-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(30px, 5vw, 70px);
  align-items: center;
  padding: 0 30px;
}
@media (max-width: 780px) { .community-top { grid-template-columns: 1fr; } }

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 800ms ease, transform 800ms cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.in { opacity: 1; transform: none; }

.community-copy { display: flex; flex-direction: column; gap: clamp(20px, 2.4vw, 32px); }
.community-copy .statement {
  font-size: clamp(26px, 3.1vw, 54px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.032em;
  text-transform: uppercase;
  max-width: 20ch;
  text-wrap: balance;
}
.community-copy .sub {
  font-size: clamp(18px, 1.6vw, 24px);
  line-height: 1.4;
  color: var(--body-on-dark);
  max-width: 30ch;
}
.community-copy .sub .accent {
  color: var(--orange);
  font-weight: 800;
}
.community-copy .sub.one-line { max-width: none; white-space: nowrap; }
@media (max-width: 480px) {
  .community-copy .sub.one-line { white-space: normal; }
}
.community-copy .disciplines {
  font-family: 'IBM Plex Mono', monospace;
  font-size: clamp(12px, 1.15vw, 14.5px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-on-dark);
  line-height: 1.9;
  max-width: 34ch;
}

.photo-frame { position: relative; width: 100%; overflow: hidden; background: #141414; }
.photo-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-frame.ratio-4-5 { aspect-ratio: 4 / 5; }
.photo-frame.ratio-16-10 { aspect-ratio: 16 / 10; }
.photo-frame.ratio-16-11 { aspect-ratio: 16 / 11; }

/* ---------- Photo carousel ---------- */
.carousel {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #141414;
}
.carousel-track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 500ms cubic-bezier(0.65, 0, 0.35, 1);
}
.carousel-slide {
  flex: none;
  width: 100%;
  height: 100%;
}
.carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.carousel-arrow {
  all: unset;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: rgba(10, 10, 10, 0.45);
  color: var(--white);
  font-size: 22px;
  line-height: 1;
  backdrop-filter: blur(2px);
  transition: background 120ms ease;
}
.carousel-arrow:hover { background: var(--orange); color: var(--black); }
.carousel-arrow.prev { left: 12px; }
.carousel-arrow.next { right: 12px; }
.carousel-dots {
  position: absolute;
  left: 0; right: 0; bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.carousel-dots button {
  all: unset;
  cursor: pointer;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  transition: background 120ms ease, transform 120ms ease;
}
.carousel-dots button[aria-current="true"] {
  background: var(--orange);
  transform: scale(1.25);
}

/* ---------- Topics + People section ---------- */
.topics-section .rail-content {
  padding: clamp(80px, 10vw, 145px) 30px clamp(70px, 8vw, 120px);
  display: flex;
  flex-direction: column;
  gap: clamp(60px, 7.5vw, 108px);
}

.ask-block { display: flex; flex-direction: column; gap: clamp(20px, 2.4vw, 30px); max-width: 1000px; }
.section-heading {
  font-size: clamp(28px, 3.2vw, 54px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.032em;
  max-width: 20ch;
}
.ask-field {
  display: flex;
  align-items: stretch;
  border: 2px solid var(--black);
  flex-wrap: wrap;
  transition: border-color 120ms ease;
}
.ask-field input {
  all: unset;
  flex: 1;
  padding: clamp(20px, 2.2vw, 28px) 24px;
  font-size: clamp(16px, 1.4vw, 19px);
  color: var(--black);
  min-width: 240px;
  font-family: Archivo, sans-serif;
}
.ask-field input::placeholder { color: #8d8a84; }
.btn-add {
  all: unset;
  cursor: pointer;
  background: var(--orange);
  color: var(--black);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 18px clamp(24px, 2.6vw, 38px);
  display: flex;
  align-items: center;
  transition: background 120ms ease, color 120ms ease;
}
.btn-add:hover { background: var(--black); color: var(--white); }
.ask-explain { font-size: 16.5px; line-height: 1.5; color: var(--muted-on-light); max-width: 50ch; text-wrap: pretty; }

.list-label {
  padding-bottom: 16px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.vote-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(20px, 3vw, 44px);
  align-items: center;
  padding: clamp(18px, 2vw, 26px) 0;
  border-top: 1px solid var(--hair-light);
}
.vote-row .row-main { display: flex; flex-direction: column; gap: 7px; }
.vote-row .row-title {
  font-size: clamp(18px, 1.65vw, 26px);
  font-weight: 600;
  line-height: 1.24;
  letter-spacing: -0.022em;
  text-wrap: pretty;
  color: var(--body-on-light);
}
.vote-row.leader .row-title { color: var(--black); }
.vote-row .row-meta {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px;
  letter-spacing: 0.1em;
  color: var(--meta-on-light);
}
.vote-row .row-meta .count { color: var(--muted-on-light); }
.vote-row.leader .row-meta .count { color: var(--orange); }

.vote-btn {
  all: unset;
  cursor: pointer;
  border: 1px solid var(--black);
  background: transparent;
  color: var(--black);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 12px 24px;
  white-space: nowrap;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.vote-btn:hover:not([disabled]) { background: var(--orange); border-color: var(--orange); color: var(--black); }
.vote-btn[data-voted="true"] { background: var(--black); color: var(--white); }

.people-block {
  display: flex;
  flex-direction: column;
  gap: clamp(22px, 2.4vw, 32px);
  border-top: 1px solid var(--hair-light);
  padding-top: clamp(48px, 5.5vw, 78px);
}
.nominee-list { display: flex; flex-direction: column; max-width: 940px; }
.nominee-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(20px, 3vw, 44px);
  align-items: center;
  padding: clamp(16px, 1.8vw, 24px) 0;
  border-top: 1px solid var(--hair-light);
}
.nominee-row .name {
  font-size: clamp(19px, 1.7vw, 26px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
}
.nominee-row .org {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px;
  letter-spacing: 0.1em;
  color: var(--meta-on-light);
}
.nominee-row .org .count { color: var(--muted-on-light); }
.nominee-row.leader .org .count { color: var(--orange); }

.nominate-field {
  display: flex;
  align-items: stretch;
  border: 2px solid var(--black);
  margin-top: 18px;
  flex-wrap: wrap;
  transition: border-color 120ms ease;
}
.ask-field.shake, .nominate-field.shake { animation: gs-shake 340ms ease; border-color: #c1121f; }
@keyframes gs-shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) {
  .ask-field.shake, .nominate-field.shake { animation: none; }
}
.nominate-field input {
  all: unset;
  flex: 1;
  padding: clamp(18px, 2vw, 24px) 20px;
  font-size: 17px;
  color: var(--black);
  min-width: 200px;
  font-family: Archivo, sans-serif;
}
.nominate-field input::placeholder { color: #8d8a84; }
.btn-nominate {
  all: unset;
  cursor: pointer;
  background: var(--orange);
  color: var(--black);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 14px 26px;
  display: flex;
  align-items: center;
  white-space: nowrap;
  transition: background 120ms ease, color 120ms ease;
}
.btn-nominate:hover { background: var(--black); color: var(--white); }

/* ---------- Edition (orange poster) section ---------- */
.edition {
  background: var(--orange);
  color: var(--black);
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
}
@media (max-width: 780px) { .edition { grid-template-columns: 1fr; } }

.edition-copy {
  padding: clamp(48px, 5.5vw, 88px) clamp(26px, 3.2vw, 52px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(30px, 3.6vw, 52px);
  min-height: min(96vh, 900px);
}
.edition-stamp { display: flex; flex-direction: column; gap: clamp(14px, 1.6vw, 22px); }
.edition-stamp .no {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 500;
  font-size: clamp(30px, 4vw, 66px);
  line-height: 0.86;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}
.edition-stamp .where {
  font-family: 'IBM Plex Mono', monospace;
  font-size: clamp(12px, 1.2vw, 15px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.8;
}

.edition-topic { display: flex; flex-direction: column; gap: clamp(16px, 1.8vw, 26px); }
.edition-topic .label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: clamp(12px, 1.2vw, 15px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.edition-topic .topic {
  font-size: clamp(36px, 5.4vw, 100px);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.048em;
  text-wrap: pretty;
}

.edition-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.edition-foot .going-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.edition-foot .going-note { font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; }
.edition-foot .going-count { color: var(--white); }
.powered-by { display: flex; align-items: center; gap: 13px; }
.powered-by .label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.powered-by img { height: 24px; width: auto; }
.powered-by a { display: flex; align-items: center; transition: opacity 120ms ease; }
.powered-by a:hover { opacity: 0.75; }

.going-divider { display: none; }

@media (max-width: 640px) {
  .edition-foot { align-items: stretch; }
  .edition-foot .going-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    width: 100%;
  }
  .edition-foot .going-count {
    order: 1;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.1em;
  }
  .edition-foot .going-divider {
    order: 2;
    display: block;
    width: 100%;
    height: 1px;
    background: var(--black);
    opacity: 0.18;
  }
  .edition-foot .going-value {
    order: 3;
    font-size: 12.5px;
    font-weight: 700;
  }
}

.edition-photo { position: relative; min-height: 340px; }

/* ---------- Close section ---------- */
.close-section .rail-content {
  padding: clamp(90px, 11vw, 165px) 30px 34px;
  display: flex;
  flex-direction: column;
  gap: clamp(44px, 5.5vw, 80px);
}
.close-statement {
  font-size: clamp(38px, 6.6vw, 122px);
  font-weight: 900;
  line-height: 0.92;
  letter-spacing: -0.042em;
  max-width: 15ch;
  text-wrap: balance;
}
.close-copy { display: flex; flex-direction: column; gap: 22px; }
.close-copy .lead {
  font-size: clamp(18px, 1.7vw, 25px);
  font-weight: 500;
  line-height: 1.35;
  color: var(--body-on-dark);
  max-width: 32ch;
  text-wrap: pretty;
}
.close-copy .cta-row { padding-top: 4px; }
.close-copy .where {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px;
  color: var(--muted-on-dark);
}

.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  border-top: 1px solid var(--hair-dark);
  padding-top: 20px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-on-dark);
}
.site-footer .wordmark { font-size: 14px; color: var(--white); }
.site-footer .powered-by img { height: 22px; }
.site-footer .socials { display: flex; gap: 24px; }

/* ---------- RSVP modal ---------- */
.modal-overlay[hidden] { display: none; }
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(10, 10, 10, 0.72);
  backdrop-filter: blur(3px);
}
.modal {
  position: relative;
  width: 100%;
  max-width: 420px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: var(--white);
  color: var(--black);
  padding: clamp(32px, 5vw, 48px) clamp(26px, 4vw, 36px);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.modal-close {
  all: unset;
  position: absolute;
  top: 14px; right: 16px;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  color: var(--black);
  padding: 4px;
}
.modal-close:hover { color: var(--orange); }
.modal-title {
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.05;
}
.modal-sub { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--muted-on-light); }
.modal-panel[hidden] { display: none; }
.modal-panel { display: flex; flex-direction: column; gap: 14px; }

/* LinkedIn sign-in is the only way in, so it gets LinkedIn's own blue and
   glyph — people need to recognise it instantly. This sits inside the modal,
   away from the page compositions, so it doesn't compete with the single
   functional use of orange (see the brand rules in README.md). */
.btn-linkedin {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 4px;
  padding: 17px 24px;
  background: #0a66c2;
  color: var(--white);
  text-decoration: none;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background 120ms ease;
}
.btn-linkedin:hover { background: var(--black); }
.btn-linkedin svg { width: 17px; height: 17px; flex: none; }

/* Deliberately quiet: the long way is a fallback for people who won't use
   LinkedIn, not an equal-weight choice — LinkedIn is the route that actually
   validates anyone. */
.modal-alt {
  all: unset;
  cursor: pointer;
  align-self: flex-start;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted-on-light);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.modal-alt:hover { color: var(--black); }

#rsvp-manual-form { display: flex; flex-direction: column; gap: 12px; }

/* Confirmation state. Built from the same parts as the hero date stamp —
   mono eyebrow, big day number, uppercase detail lines between hairlines —
   so it reads as a GibSearch ticket rather than a stack of paragraphs in a
   white box. It also gives the no-question version enough substance to fill
   the modal. */
.modal-eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted-on-light);
}
.modal-eyebrow .cursor {
  width: 16px;
  height: 2px;
  background: var(--orange);
  flex: none;
}
.confirm-card {
  display: flex;
  align-items: flex-end;
  gap: 18px;
  padding: 17px 0;
  border-top: 1px solid var(--hair-light);
  border-bottom: 1px solid var(--hair-light);
}
.confirm-daynum {
  flex: none;
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 500;
  font-size: 54px;
  line-height: 0.74;
  letter-spacing: -0.055em;
}
.confirm-detail {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 2px;
  font-family: 'IBM Plex Mono', monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.confirm-detail .month-year { font-size: 14px; }
.confirm-detail .when,
.confirm-detail .where { font-size: 10.5px; color: var(--muted-on-light); }

/* Share block. The preview is the point — people share the card far more
   readily when they can see what they're about to post. */
.share-block {
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding-top: 20px;
  border-top: 1px solid var(--hair-light);
}
.share-preview {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--hair-light);
}
.share-block .modal-actions { flex-wrap: wrap; gap: 16px; }
.share-block .btn-linkedin { margin-top: 0; padding: 15px 20px; font-size: 11.5px; }

#rsvp-title-form[hidden] { display: none; }
#rsvp-title-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 4px;
  padding-top: 20px;
  border-top: 1px solid var(--hair-light);
}
.modal-actions { display: flex; align-items: center; gap: 18px; }
.modal-actions .btn-add { justify-content: center; }
.btn-skip {
  all: unset;
  cursor: pointer;
  white-space: nowrap;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-on-light);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.btn-skip:hover { color: var(--black); }
.modal input {
  all: unset;
  border: 2px solid var(--black);
  padding: 14px 16px;
  font-size: 16px;
  font-family: Archivo, sans-serif;
  color: var(--black);
  box-sizing: border-box;
  width: 100%;
}
.modal input::placeholder { color: #8d8a84; }
/* The global focus outline sits *outside* an element's border, which on these
   2px-bordered inputs drew a second box around the first. Recolour the border
   itself and back it with a soft halo so focus is one ring, not two. */
.modal input:focus-visible {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(249, 83, 0, 0.18);
}
.modal .btn-add { justify-content: center; text-align: center; }
.modal-error {
  margin: 0;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: #c1121f;
}

/* Visible keyboard focus everywhere interactive. */
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}