/* ==========================================================================
   Javishth Chabria — AI Cinema Storyteller
   styles.css · plain CSS, no build step, no external requests
   Instrument palette: near-black / cool white / steel / one ice-cyan accent
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* surfaces */
  --bg:        #04060a;
  --bg-2:      #080b11;
  --bg-3:      #0b1018;

  /* ink */
  --fg:        #e8edf5;   /* 17.2:1 on --bg */
  --fg-2:      #c3ccd9;   /* 12.1:1 */
  --steel:     #7c8899;   /* 5.6:1  — AA for body text */

  /* accent — ice cyan, 13.2:1 on --bg (passes AA/AAA at any size) */
  --key:       #4de2ff;
  --key-2:     #3b9eff;
  --key-line:  rgba(77, 226, 255, 0.32);
  --key-dim:   rgba(77, 226, 255, 0.08);

  /* structure */
  --line:      rgba(232, 237, 245, 0.08);
  --line-2:    rgba(232, 237, 245, 0.14);

  /* type */
  --sans: -apple-system, "Helvetica Neue", "Inter", "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  /* rhythm */
  --gut:   clamp(1.15rem, 4vw, 2.5rem);
  --sec-y: clamp(3.4rem, 7.5vw, 6.4rem);
  --maxw:  1280px;
  --measure: 62ch;
  --r: 3px;
}

/* ---------- 2. Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* `clip`, not `hidden`: overflow-x:hidden on html/body turns them into scroll
     containers and silently breaks position:sticky on the header. */
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: clamp(0.97rem, 0.94rem + 0.18vw, 1.03rem);
  line-height: 1.6;
  letter-spacing: -0.005em;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

/* cool wash — fixed, paint-only, zero warm tones */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(72rem 44rem at 82% -8%, rgba(59, 158, 255, 0.14), transparent 62%),
    radial-gradient(60rem 40rem at 4% 6%,  rgba(77, 226, 255, 0.055), transparent 60%),
    radial-gradient(80rem 50rem at 50% 116%, rgba(20, 40, 68, 0.55), transparent 66%);
}
/* engineered texture: 1px grid, not grain */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    repeating-linear-gradient(0deg,  rgba(232,237,245,0.028) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(90deg, rgba(232,237,245,0.028) 0 1px, transparent 1px 72px);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 10%, transparent 78%);
          mask-image: radial-gradient(120% 90% at 50% 0%, #000 10%, transparent 78%);
}
body > * { position: relative; z-index: 1; }

img, svg, iframe { max-width: 100%; }
img { display: block; }
iframe { border: 0; }

h1, h2, h3, h4, blockquote, p, ul, ol, figure, figcaption { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }

::selection { background: var(--key); color: var(--bg); }

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

/* ---------- 3. Layout primitives ---------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.sec { padding-block: var(--sec-y); scroll-margin-top: 76px; }
.sec-line { border-top: 1px solid var(--line); }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--key);
  color: var(--bg);
  padding: 0.7rem 1rem;
  font: 600 0.8rem/1 var(--sans);
}
.skip:focus { left: 0.75rem; top: 0.75rem; }

/* ---------- 4. Type system ---------- */
.eyebrow,
.kicker,
.sublabel,
.mono-meta,
.venues__meta,
.card__num,
.pcard__geo,
.pcard__go,
.tag,
.mailcard__lbl,
.field label,
.hdr__mark,
.hdr__nav a,
.ftr__role,
.ftr__bot,
.ftr__links a span,
.divider__c,
.shot figcaption,
.terse li::before {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 0.68rem;
  color: var(--key);
  margin-bottom: clamp(0.9rem, 2vw, 1.4rem);
}
.eyebrow__n { color: var(--steel); }
.eyebrow::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, var(--key-line), transparent);
}

.h-sec {
  font-weight: 700;
  font-size: clamp(1.7rem, 1.05rem + 2.9vw, 3.05rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: balance;
  max-width: 22ch;
}

.sublabel {
  font-size: 0.66rem;
  font-weight: 400;
  color: var(--steel);
  margin-top: clamp(2rem, 4vw, 2.8rem);
  margin-bottom: 0.9rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--line);
}

.lede {
  font-size: clamp(1.02rem, 0.98rem + 0.4vw, 1.18rem);
  line-height: 1.5;
  letter-spacing: -0.012em;
  color: var(--fg);
  max-width: var(--measure);
}
.body-copy { color: var(--steel); max-width: var(--measure); }
.lede + .body-copy, .body-copy + .body-copy { margin-top: 0.95rem; }
.body-copy strong, .fine b { color: var(--fg-2); font-weight: 600; }

.fine { font-size: 0.85rem; line-height: 1.5; color: var(--steel); max-width: 48ch; }
.fine + .fine { margin-top: 0.55rem; }
.mono-meta { font-size: 0.64rem; color: var(--steel); margin-top: 0.9rem; }

/* ---------- 5. Buttons ---------- */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--fg);
  --btn-bd: var(--line-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  padding: 0.85em 1.35em;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  border-radius: 2px;
  font: 600 0.76rem/1 var(--sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.14s linear, color 0.14s linear, border-color 0.14s linear;
}
.btn--key {
  --btn-bg: var(--key);
  --btn-fg: #04060a;
  --btn-bd: var(--key);
}
.btn--key:hover { --btn-bg: #7fecff; --btn-bd: #7fecff; }
.btn--ghost:hover { --btn-bd: var(--key); --btn-fg: var(--key); }
.btn--sm { padding: 0.68em 1em; font-size: 0.7rem; }
.btn__arrow { font-family: var(--mono); }

.textlink {
  color: var(--fg);
  border-bottom: 1px solid var(--key-line);
  padding-bottom: 1px;
  transition: color 0.14s linear, border-color 0.14s linear;
}
.textlink:hover { color: var(--key); border-color: var(--key); }

/* ---------- 6. Header ---------- */
.hdr {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: var(--gut);
  padding: 0.8rem var(--gut);
  border-bottom: 1px solid transparent;
  transition: background 0.18s linear, border-color 0.18s linear;
}
.hdr.is-stuck {
  background: rgba(4, 6, 10, 0.86);
  backdrop-filter: blur(12px) saturate(130%);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
  border-bottom-color: var(--line);
}
.hdr__mark {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--fg);
  line-height: 1.35;
  margin-right: auto;
}
.hdr__mark span { display: block; font-weight: 400; color: var(--steel); letter-spacing: 0.14em; }
.hdr__nav { display: flex; gap: clamp(0.9rem, 1.8vw, 1.7rem); }
.hdr__nav a {
  font-size: 0.66rem;
  color: var(--steel);
  transition: color 0.14s linear;
}
.hdr__nav a:hover { color: var(--key); }
@media (max-width: 960px) { .hdr__nav { display: none; } }

.lbl-short { display: none; }
@media (max-width: 460px) {
  .hdr__mark { font-size: 0.62rem; }
  .hdr .btn { padding: 0.66em 0.85em; font-size: 0.66rem; }
  .hdr .lbl-full { display: none; }
  .hdr .lbl-short { display: inline; }
}

/* ---------- 7. Hero ---------- */
.hero { padding-block: clamp(2.2rem, 6vw, 4.6rem) clamp(2.8rem, 7vw, 5.2rem); }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: clamp(1.8rem, 4vw, 3.2rem);
  align-items: center;
}
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; gap: 2.2rem; }
}

.kicker {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.7rem;
  font-size: 0.66rem;
  color: var(--steel);
  margin-bottom: clamp(1rem, 2.4vw, 1.5rem);
}
.kicker span:first-child { color: var(--key); }
.kicker span + span::before { content: "/ "; color: var(--line-2); }

h1.hero__name {
  font-weight: 700;
  font-size: clamp(2.6rem, 1.1rem + 7.4vw, 5.6rem);
  line-height: 0.9;
  letter-spacing: -0.045em;
  color: var(--fg);
  margin: 0 0 clamp(1rem, 2.2vw, 1.5rem);
}

.hero__deck {
  font-size: clamp(1.12rem, 0.95rem + 1.05vw, 1.6rem);
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: -0.025em;
  color: var(--fg);
  max-width: 24ch;
}
.hero__deck b { font-weight: 500; color: var(--key); }

.hero__sub {
  margin-top: clamp(0.9rem, 2vw, 1.2rem);
  padding-left: 0.95rem;
  border-left: 1px solid var(--key-line);
  font-size: 0.97rem;
  line-height: 1.55;
  color: var(--steel);
  max-width: 46ch;
}
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: clamp(1.5rem, 3vw, 2.1rem);
}
.hero__meta {
  margin-top: clamp(1.2rem, 2.6vw, 1.7rem);
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--steel);
}
.hero__meta a { color: var(--fg); border-bottom: 1px solid var(--key-line); }
.hero__meta a:hover { color: var(--key); }

/* ---------- 8. Photography ---------- */
.shot {
  position: relative;
  border: 1px solid var(--line-2);
  background: var(--bg-2);
  overflow: hidden;
  min-width: 0;
}
.shot img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 34%; }
.shot figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 0.7rem 0.85rem;
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  color: var(--fg-2);
  background: linear-gradient(0deg, rgba(4,6,10,0.92), rgba(4,6,10,0));
}
/* corner ticks — instrument framing */
.shot::before, .shot::after {
  content: "";
  position: absolute;
  width: 18px; height: 18px;
  border: 1px solid var(--key-line);
  z-index: 2;
}
.shot::before { top: 10px; left: 10px; border-right: 0; border-bottom: 0; }
.shot::after  { top: 10px; right: 10px; border-left: 0; border-bottom: 0; }

.shot--hero { aspect-ratio: 3 / 4; }
@media (max-width: 900px) {
  /* portrait source — show it whole rather than cropping to a letterbox */
  .shot--hero { max-width: 460px; }
}

/* gallery */
.gal {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: clamp(0.5rem, 1.2vw, 0.9rem);
  aspect-ratio: 16 / 10;
  margin-top: clamp(1.6rem, 3.5vw, 2.4rem);
}
.gal .shot--lead { grid-row: span 2; }
.gal .shot--lead img { object-position: 50% 42%; }
.gal .shot:last-child img { object-position: 50% 26%; }
@media (max-width: 760px) {
  .gal { grid-template-columns: 1fr; grid-template-rows: none; aspect-ratio: auto; }
  .gal .shot { aspect-ratio: 4 / 3; }
  .gal .shot--lead { grid-row: auto; aspect-ratio: 3 / 4; }
}

/* ---------- 9. Credibility band ---------- */
.venues { border-top: 1px solid var(--line); margin-top: clamp(1.4rem, 3vw, 2rem); }
.venues li {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr) auto;
  gap: 0.3rem 1.2rem;
  align-items: baseline;
  padding-block: clamp(0.7rem, 1.8vw, 1rem);
  border-bottom: 1px solid var(--line);
}
.venues__n { font-family: var(--mono); font-size: 0.66rem; color: var(--key); letter-spacing: 0.12em; }
.venues__name {
  font-size: clamp(1.02rem, 0.9rem + 0.7vw, 1.4rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--fg);
  line-height: 1.2;
}
.venues__meta { font-size: 0.62rem; color: var(--steel); text-align: right; }
@media (max-width: 640px) {
  .venues li { grid-template-columns: 2rem minmax(0, 1fr); }
  .venues__meta { grid-column: 2; text-align: left; }
}

.pgrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
@media (max-width: 900px) { .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .pgrid { grid-template-columns: 1fr; } }
.pcard {
  background: var(--bg-2);
  padding: clamp(1rem, 2.2vw, 1.4rem);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
  transition: background 0.14s linear;
}
.pcard:hover { background: var(--bg-3); }
.pcard__geo { font-size: 0.6rem; color: var(--key); }
.pcard__out {
  font-size: clamp(1.02rem, 0.95rem + 0.4vw, 1.2rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--fg);
  line-height: 1.15;
}
.pcard__desc { color: var(--steel); font-size: 0.85rem; line-height: 1.45; flex: 1 1 auto; }
.pcard__go { font-size: 0.6rem; color: var(--fg-2); display: inline-flex; gap: 0.45em; }
.pcard:hover .pcard__go { color: var(--key); }

/* ---------- 10. Thesis ---------- */
.thesis { background: linear-gradient(180deg, transparent, rgba(11,22,38,0.5), transparent); }
.beats { margin-top: clamp(1.4rem, 3vw, 2rem); }
.beat {
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.035em;
  color: var(--fg);
  padding-block: 0.12em;
  text-wrap: balance;
}
.beat--lg { font-size: clamp(1.45rem, 0.95rem + 2.4vw, 2.6rem); }
.beat--md {
  font-size: clamp(1.02rem, 0.96rem + 0.5vw, 1.2rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.5;
  color: var(--steel);
  max-width: var(--measure);
  margin-bottom: clamp(1.1rem, 2.5vw, 1.8rem);
}
.beat--in { padding-left: clamp(0.7rem, 4vw, 3rem); }
.beat--key { color: var(--key); }
.thesis__prose { margin-top: clamp(1.5rem, 3.2vw, 2.2rem); }

/* ---------- 11. Typographic dividers ---------- */
.divider {
  border-top: 1px solid var(--line);
  padding-block: clamp(2.4rem, 6vw, 4.4rem);
  background: linear-gradient(180deg, rgba(77,226,255,0.03), transparent 70%);
}
.divider__q {
  font-size: clamp(1.3rem, 0.9rem + 2.1vw, 2.35rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.038em;
  color: var(--fg);
  text-wrap: balance;
  max-width: 24ch;
}
.divider__q b { font-weight: 600; color: var(--key); }
.divider__c {
  margin-top: 1rem;
  font-size: 0.62rem;
  color: var(--steel);
}

/* ---------- 12. Keynote / lite embed ---------- */
.video {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
  gap: clamp(1.4rem, 3.5vw, 2.6rem);
  align-items: center;
  margin-top: clamp(1.6rem, 3.5vw, 2.4rem);
}
@media (max-width: 860px) { .video { grid-template-columns: 1fr; } }
.lite {
  position: relative;
  width: 100%;
  max-width: 720px;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line-2);
  background: var(--bg-2);
  overflow: hidden;
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
  color: inherit;
  font: inherit;
}
/* the poster is a 480x360 title card — contained, never upscaled past its frame */
.lite__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.lite__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(4,6,10,0.12), rgba(4,6,10,0.62)),
    repeating-linear-gradient(0deg, rgba(232,237,245,0.03) 0 1px, transparent 1px 5px);
}
.lite__play {
  position: absolute;
  left: clamp(0.8rem, 2vw, 1.2rem);
  bottom: clamp(0.8rem, 2vw, 1.2rem);
  width: clamp(46px, 6vw, 58px);
  height: clamp(46px, 6vw, 58px);
  border: 1px solid var(--key);
  background: rgba(4, 6, 10, 0.55);
  display: grid;
  place-items: center;
  transition: background 0.14s linear;
}
.lite__play::after {
  content: "";
  width: 0; height: 0;
  border-left: 13px solid var(--key);
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  margin-left: 3px;
}
.lite:hover .lite__play { background: var(--key-dim); }
.lite iframe { position: absolute; inset: 0; width: 100%; height: 100%; }
.video__after {
  margin-top: 1.2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.4rem;
  font-size: 0.88rem;
}

/* ---------- 13. Topic cards ---------- */
.cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-top: clamp(1.6rem, 3.5vw, 2.4rem);
}
@media (max-width: 700px) { .cards { grid-template-columns: 1fr; } }
.card {
  background: var(--bg-2);
  padding: clamp(1.1rem, 2.6vw, 1.7rem);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
  transition: background 0.14s linear;
}
.card--wide { grid-column: 1 / -1; }
@media (max-width: 700px) { .card--wide { grid-column: auto; } }
.card:hover { background: var(--bg-3); }
.card__num { font-size: 0.64rem; color: var(--key); }
.card__title {
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.28rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--fg);
  text-wrap: balance;
}
.card__body { color: var(--steel); font-size: 0.9rem; line-height: 1.5; }

/* ---------- 14. CTE ---------- */
.cte__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(1.6rem, 4vw, 3.2rem);
  align-items: start;
  margin-top: clamp(1.4rem, 3vw, 2rem);
}
@media (max-width: 860px) { .cte__grid { grid-template-columns: 1fr; } }
.taglist { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1.3rem; }
.tag {
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  color: var(--key);
  border: 1px solid var(--key-line);
  border-radius: 2px;
  padding: 0.45em 0.7em;
}
.cte__cta { margin-top: clamp(1.4rem, 3vw, 2rem); }

.pull {
  border-left: 1px solid var(--key);
  padding: 0.3rem 0 0.3rem clamp(1rem, 2.5vw, 1.6rem);
}
.pull p {
  font-size: clamp(1.12rem, 0.9rem + 1.1vw, 1.55rem);
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: -0.03em;
  color: var(--fg);
  text-wrap: balance;
}
.pull cite {
  display: block;
  margin-top: 0.9rem;
  font-family: var(--mono);
  font-size: 0.62rem;
  font-style: normal;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--steel);
}

/* ---------- 15. Formats + rooms ---------- */
.two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.4rem, 4vw, 3.4rem);
  margin-top: clamp(0.5rem, 1vw, 1rem);
}
@media (max-width: 760px) { .two { grid-template-columns: 1fr; } }
.two__col .sublabel { margin-top: 0; }
.terse { counter-reset: t; }
.terse li {
  counter-increment: t;
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
  padding-block: 0.42rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.94rem;
  color: var(--fg-2);
  line-height: 1.35;
}
.terse li::before {
  content: counter(t, decimal-leading-zero);
  flex: 0 0 auto;
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  color: var(--key);
}
.terse--alt li::before { content: "—"; color: var(--steel); letter-spacing: 0; }
.terse + .fine { margin-top: 1.1rem; }

/* ---------- 16. Booking ---------- */
.book { background: linear-gradient(180deg, transparent, rgba(11,22,38,0.55)); }
.book__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(1.6rem, 4vw, 3.2rem);
  margin-top: clamp(1.5rem, 3vw, 2.2rem);
}
@media (max-width: 900px) { .book__grid { grid-template-columns: 1fr; } }

.mailcard {
  margin-top: clamp(1.3rem, 3vw, 1.8rem);
  border: 1px solid var(--key-line);
  border-radius: var(--r);
  background: linear-gradient(180deg, rgba(77,226,255,0.06), transparent);
  padding: clamp(1.1rem, 2.6vw, 1.5rem);
}
.mailcard__lbl { font-size: 0.6rem; color: var(--key); }
.mailcard a.mail {
  display: inline-block;
  margin: 0.55rem 0 0.8rem;
  font-size: clamp(1.05rem, 0.9rem + 0.9vw, 1.42rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--fg);
  border-bottom: 1px solid var(--key-line);
  overflow-wrap: anywhere;
}
.mailcard a.mail:hover { color: var(--key); }

.f-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; }
@media (max-width: 620px) { .f-grid { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: 0.6rem; color: var(--steel); }
.field .req { color: var(--key); }
.field input,
.field select,
.field textarea {
  width: 100%;
  background: rgba(232, 237, 245, 0.03);
  border: 1px solid var(--line-2);
  border-radius: 2px;
  padding: 0.72em 0.8em;
  color: var(--fg);
  font-family: var(--sans);
  font-size: 0.95rem;
  line-height: 1.4;
  transition: border-color 0.14s linear, background 0.14s linear;
  -webkit-appearance: none;
  appearance: none;
}
.field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--key) 50%),
                    linear-gradient(135deg, var(--key) 50%, transparent 50%);
  background-position: calc(100% - 19px) 55%, calc(100% - 14px) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2.3em;
}
.field select option { background: var(--bg-2); color: var(--fg); }
.field textarea { min-height: 7.5rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--key);
  background: rgba(232, 237, 245, 0.05);
}
.field input::placeholder, .field textarea::placeholder { color: #79839a; }
.f-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem;
  margin-top: 0.2rem;
}
.f-status {
  grid-column: 1 / -1;
  font-size: 0.88rem;
  color: var(--key);
  min-height: 1.3em;
}

/* ---------- 17. Sticky invite pill (desktop only) ---------- */
.pill {
  position: fixed;
  right: clamp(1rem, 2.5vw, 2rem);
  bottom: clamp(1rem, 2.5vw, 2rem);
  z-index: 55;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.18s linear, transform 0.18s linear;
}
.pill.is-on { opacity: 1; transform: none; pointer-events: auto; }
@media (max-width: 780px) { .pill { display: none; } }

/* ---------- 18. Footer ---------- */
.ftr { border-top: 1px solid var(--line-2); padding-block: clamp(2.2rem, 5vw, 3.6rem) 1.8rem; }
.ftr__top {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(1.6rem, 4vw, 3rem);
}
@media (max-width: 800px) { .ftr__top { grid-template-columns: 1fr; } }
.ftr__name {
  font-size: clamp(1.4rem, 1rem + 1.6vw, 2.1rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: var(--fg);
}
.ftr__role {
  margin-top: 0.7rem;
  font-size: 0.62rem;
  color: var(--steel);
  line-height: 2;
}
.ftr__mail { margin-top: 1.2rem; }
.ftr__links { display: grid; gap: 0.35rem; align-content: start; }
.ftr__links a {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.45rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.92rem;
  color: var(--fg-2);
  transition: color 0.14s linear;
}
.ftr__links a:hover { color: var(--key); }
.ftr__links a span { font-size: 0.6rem; color: var(--steel); }
.ftr__bot {
  margin-top: clamp(1.8rem, 4vw, 2.8rem);
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
  justify-content: space-between;
  font-size: 0.6rem;
  color: var(--steel);
}

/* ---------- 19. Motion — short, fast, minimal ---------- */
.js .reveal { opacity: 0; transform: translateY(8px); }
.js .reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.26s ease-out, transform 0.26s ease-out;
}
.js .reveal.is-in.d1 { transition-delay: 0.05s; }
.js .reveal.is-in.d2 { transition-delay: 0.1s; }
.js .reveal.is-in.d3 { transition-delay: 0.15s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal, .js .reveal.is-in { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ---------- 20. Print ---------- */
@media print {
  body { background: #fff; color: #000; }
  body::before, body::after, .hdr, .pill, .lite { display: none; }
  a { color: #000; }
}