/* ============================================================================
   AI Society at Baylor: interest form (ais.baylor.tech/interest)
   ----------------------------------------------------------------------------
   STANDALONE. This page shares nothing with the main ais.baylor.tech site
   (no site.css, no build.js, no shared chrome). Edit freely without touching
   the rest of the site.

   Design shell is lifted from ORBITH EDIT (edit.orbith.tech): near-black
   ground with a fine noise grain, Cormorant Garamond display over Inter body,
   generous senior-friendly sizing (18px body, >=48px tap targets, 54px
   controls), soft 1px hairlines, pill CTA.

   ONLY the colors are AIS: the three hues sampled from the official triangle
   mark (periwinkle A, teal i + dot, gold S).
   ============================================================================ */

:root {
  /* ==== AIS BRAND HUES (from the official mark) ==== */
  --perry: #646FB4;          /* the A */
  --teal:  #1C9488;          /* the i + dot */
  --gold:  #E4B257;          /* the S */

  /* Lifted for legibility on a near-black ground */
  --teal-lift:  #35B3A4;
  --perry-lift: #8B95D4;
  --gold-rgb:   228, 178, 87;
  --teal-rgb:   53, 179, 164;
  --gold-soft:  rgba(228, 178, 87, .16);
  --teal-soft:  rgba(53, 179, 164, .16);

  /* ORBITH EDIT ground: gray charcoal, softer on the eyes than pure black */
  --bg:      #23262c;
  --panel:   #2b2f36;
  --panel-2: #343943;
  --ink:     #f4f1ea;
  --muted:   #aab0b9;
  --muted-2: #7d848e;
  --line:    rgba(255, 255, 255, .16);
  --line-soft: rgba(255, 255, 255, .09);
  --bad:     #ec8e75;
  --ok:      #92c07c;

  /* Senior-friendly scale (WCAG 2.2): body 18px, 16px floor, >=48px targets */
  --fs-sm:   16px;
  --fs-body: 18px;
  --fs-lg:   21px;
  --lh:      1.6;
  --ctl:     54px;   /* form control height */
  --tap:     48px;   /* minimum tap target */

  --radius:    12px;
  --radius-lg: 16px;
  --shell:     640px;

  --t-fast: .14s;
  --t-med:  .26s;
  --ease-io: cubic-bezier(.4, 0, .2, 1);

  --elev-2: 0 4px 24px rgba(0, 0, 0, .45);
  --elev-3: 0 10px 40px rgba(0, 0, 0, .55);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--fs-body);
  line-height: var(--lh);
  font-weight: 400;
  /* fine fractal grain over the near-black ground (ORBITH EDIT signature) */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.022'/%3E%3C/svg%3E") repeat,
    var(--bg);
}

/* A soft brand aurora behind the masthead, so the page doesn't read as flat black. */
body::before {
  content: "";
  position: fixed;
  inset: -20% -20% auto -20%;
  height: 70vh;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(46% 60% at 28% 0%, rgba(100, 111, 180, .20), transparent 68%),
    radial-gradient(42% 56% at 76% 6%, rgba(28, 148, 136, .16), transparent 70%);
  filter: blur(6px);
}

.wrap {
  position: relative;
  z-index: 1;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 40px 20px 64px;
}

/* ---------------------------------------------------------------- masthead */
.mast { text-align: center; margin-bottom: 34px; }

.mark {
  width: 64px;
  height: 64px;
  display: block;
  margin: 0 auto 18px;
  filter: drop-shadow(0 4px 18px rgba(0, 0, 0, .6));
}

.eyebrow {
  font-size: var(--fs-sm);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 12px;
  font-weight: 500;
}

h1 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 500;
  font-size: clamp(38px, 8vw, 56px);
  line-height: 1.06;
  letter-spacing: -.012em;
  margin: 0 0 14px;
  text-wrap: balance;
}

.lede {
  color: var(--muted);
  font-size: var(--fs-lg);
  margin: 0 auto;
  max-width: 40ch;
  text-wrap: pretty;
}

/* "You do NOT need prior experience" — emphasis without italics. */
.lede em {
  font-style: normal;
  font-weight: 700;
  color: var(--ink);
}

/* ------------------------------------------------------------ meeting card */
/* Sits BELOW the form: the ask comes first, the details back it up. */
.meeting {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  padding: 22px 24px;
  margin: 40px 0 0;
  box-shadow: var(--elev-2);
  position: relative;
  overflow: hidden;
}

/* gold hairline across the top: the AIS "reserved highlight" */
.meeting::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: .85;
}

.meeting h2 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  font-size: 27px;
  margin: 0 0 4px;
  letter-spacing: -.005em;
}

.meeting .kicker {
  font-size: 13px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  margin: 0 0 10px;
}

.meeting .mtg-sub {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-sm);
}

.meeting dl {
  margin: 14px 0 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 9px 16px;
  font-size: var(--fs-sm);
}

.meeting dt {
  color: var(--muted-2);
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 600;
  padding-top: 2px;
}

.meeting dd { margin: 0; color: var(--ink); }

.meeting .note {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  color: var(--muted);
  font-size: var(--fs-sm);
}

/* ------------------------------------------------------------------- form */
form { margin: 0; }

.field { margin-bottom: 24px; }

label.lbl {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .01em;
  margin-bottom: 8px;
  color: var(--ink);
}

.req { color: var(--gold); margin-left: 2px; }

.opt {
  color: var(--muted-2);
  font-weight: 400;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: 12px;
  margin-left: 6px;
}

.hint {
  display: block;
  color: var(--muted);
  font-size: 15px;
  font-weight: 400;
  margin: -2px 0 9px;
}

input[type="text"],
input[type="email"],
textarea,
select {
  width: 100%;
  min-height: var(--ctl);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  font-family: Inter, system-ui, sans-serif;
  font-size: var(--fs-body);
  padding: 14px 16px;
  outline: none;
  transition: border-color var(--t-med) var(--ease-io),
              box-shadow var(--t-med) var(--ease-io);
}

textarea { min-height: 108px; resize: vertical; line-height: 1.5; }

input::placeholder, textarea::placeholder { color: #616974; }

input:focus, textarea:focus, select:focus {
  border-color: var(--teal-lift);
  box-shadow: 0 0 0 3px var(--teal-soft);
}

input[aria-invalid="true"], textarea[aria-invalid="true"] {
  border-color: var(--bad);
}

/* --------------------------------------------------- email prefix + domain */
/* The group carries the border and focus ring; the input inside is bare, so
   "@baylor.edu" reads as part of the same control instead of a second field. */
.emailgrp {
  display: flex;
  align-items: center;
  min-height: var(--ctl);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0 16px;
  gap: 2px;
  transition: border-color var(--t-med) var(--ease-io),
              box-shadow var(--t-med) var(--ease-io);
}

.emailgrp input[type="text"] {
  flex: 1;
  min-width: 0;
  min-height: auto;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 14px 0;
  box-shadow: none;
}

.emailgrp input:focus { box-shadow: none; border-color: transparent; }

.emailgrp .suffix {
  flex: none;
  color: var(--muted);
  font-size: var(--fs-body);
  user-select: none;
  white-space: nowrap;
  padding-left: 12px;
  margin-left: 4px;
  border-left: 1px solid var(--line-soft);
}

/* Once an "@" is typed the person is writing a full address themselves, so the
   fixed domain gets out of the way. Default state still primes the short form. */
.emailgrp.full .suffix { display: none; }

.emailgrp:focus-within {
  border-color: var(--teal-lift);
  box-shadow: 0 0 0 3px var(--teal-soft);
}

.emailgrp:focus-within .suffix { color: var(--ink); }

.emailgrp[aria-invalid="true"] { border-color: var(--bad); }

/* select: native control, restyled with a custom chevron */
select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-right: 46px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23aab0b9' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
}

select option { background: var(--panel); color: var(--ink); }

/* ------------------------------------------------------- radio card group */
.choices { display: grid; gap: 10px; }

.choice {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: var(--tap);
  padding: 15px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease-io),
              background var(--t-fast) var(--ease-io);
}

.choice:hover { border-color: var(--muted-2); background: var(--panel-2); }

.choice input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.dot {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--muted-2);
  position: relative;
  transition: border-color var(--t-fast) var(--ease-io);
}

.dot::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--teal-lift);
  transform: scale(0);
  transition: transform var(--t-fast) var(--ease-io);
}

.choice .txt { font-size: var(--fs-body); }
.choice .sub { display: block; font-size: 15px; color: var(--muted); }

.choice:has(input:checked) {
  border-color: var(--teal-lift);
  background: rgba(53, 179, 164, .09);
}

.choice:has(input:checked) .dot { border-color: var(--teal-lift); }
.choice:has(input:checked) .dot::after { transform: scale(1); }

.choice:has(input:focus-visible) {
  box-shadow: 0 0 0 3px var(--teal-soft);
}

/* checkbox variant (square + checkmark) for the newsletter opt-in */
.choice.check { align-items: flex-start; }
.choice.check .box {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  border-radius: 6px;
  border: 2px solid var(--muted-2);
  position: relative;
  transition: border-color var(--t-fast) var(--ease-io),
              background var(--t-fast) var(--ease-io);
}
.choice.check .box::after {
  content: "";
  position: absolute;
  left: 6px; top: 2px;
  width: 6px; height: 11px;
  border: solid #0d1512;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg) scale(0);
  transition: transform var(--t-fast) var(--ease-io);
}
.choice.check:has(input:checked) {
  border-color: var(--teal-lift);
  background: rgba(53, 179, 164, .09);
}
.choice.check:has(input:checked) .box {
  border-color: var(--teal-lift);
  background: var(--teal-lift);
}
.choice.check:has(input:checked) .box::after { transform: rotate(45deg) scale(1); }
.choice.check:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--teal-soft); }

/* Compact, low-emphasis variant for the secondary newsletter / cross-subscribe
   opt-ins: no card border or fill, smaller box and muted text, so they read as
   a quiet footnote rather than a primary choice. */
.choice.check.mini {
  padding: 4px 2px;
  gap: 10px;
  min-height: 0;
  border: none;
  background: transparent;
}
.choice.check.mini:hover,
.choice.check.mini:has(input:checked) { border-color: transparent; background: transparent; }
.choice.check.mini .box { width: 17px; height: 17px; margin-top: 1px; border-width: 2px; border-radius: 5px; }
.choice.check.mini .box::after { left: 5px; top: 2px; width: 4px; height: 9px; border-width: 0 2px 2px 0; }
.choice.check.mini .txt { font-size: 13.5px; color: var(--muted); }
.choice.check.mini .sub { font-size: 12px; }

/* topic checkboxes: compact grid, two-up on wider screens */
.topics { display: grid; gap: 10px; }
@media (min-width: 520px) { .topics { grid-template-columns: 1fr 1fr; } }
.topic-other { margin-top: 10px; }

/* ----------------------------------------------------------------- button */
.btn {
  appearance: none;
  width: 100%;
  min-height: var(--ctl);
  padding: 15px 34px;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--fs-body);
  font-weight: 700;
  letter-spacing: .02em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  /* the ONE gold CTA on the page */
  background: linear-gradient(180deg, #EFC271 0%, var(--gold) 52%, #D6A44B 100%);
  border: 1px solid rgba(255, 240, 200, .45);
  color: #17110a;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .28) inset, var(--elev-2);
  transition: filter var(--t-fast) var(--ease-io),
              box-shadow var(--t-med) var(--ease-io),
              transform var(--t-fast) var(--ease-io);
}

.btn:hover { filter: brightness(1.06); box-shadow: 0 1px 0 rgba(255,255,255,.28) inset, var(--elev-3); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; filter: none; transform: none; }

.btn:focus-visible { outline: 3px solid var(--teal-lift); outline-offset: 3px; }

.privacy {
  text-align: center;
  color: var(--muted-2);
  font-size: 15px;
  margin: 16px 0 0;
}

/* ------------------------------------------------------------ form errors */
.err {
  color: var(--bad);
  font-size: 15px;
  margin: 7px 0 0;
  display: none;
}

.err.on { display: block; }

.formerr {
  display: none;
  margin: 0 0 20px;
  padding: 14px 16px;
  border: 1px solid rgba(236, 142, 117, .45);
  background: rgba(236, 142, 117, .10);
  border-radius: var(--radius);
  color: #f3b5a3;
  font-size: var(--fs-sm);
}

.formerr.on { display: block; }

/* ---------------------------------------------------------- success state */
.done { display: none; text-align: center; padding: 8px 0 0; }
.done.on { display: block; }

.done .tick {
  width: 76px;
  height: 76px;
  margin: 0 auto 22px;
  border-radius: 50%;
  border: 2px solid var(--teal-lift);
  background: rgba(53, 179, 164, .12);
  display: grid;
  place-items: center;
}

.done .tick svg { width: 34px; height: 34px; }

.done h2 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 500;
  font-size: clamp(32px, 7vw, 44px);
  line-height: 1.1;
  margin: 0 0 12px;
}

.done p { color: var(--muted); margin: 0 auto 26px; max-width: 36ch; }

/* --------------------------------------------------------------- instagram */
.ig {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: var(--tap);
  padding: 15px 26px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--fs-body);
  transition: border-color var(--t-fast) var(--ease-io),
              background var(--t-fast) var(--ease-io);
}

.ig:hover { border-color: var(--perry-lift); background: var(--panel-2); }
.ig svg { width: 22px; height: 22px; flex: none; }
.ig .at { color: var(--muted); font-weight: 400; }

/* The standing follow button, directly under the submit block. Instagram is
   the second thing we want off this page, so it gets real presence:
   full-width target, brand-gradient hairline, larger glyph. */
.follow { margin-top: 22px; text-align: center; }
.follow.hidden { display: none; }

.ig-big {
  position: relative;
  padding: 17px 28px;
  font-size: var(--fs-lg);
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border-color: var(--line);
  overflow: hidden;
  box-shadow: var(--elev-2);
}

/* the three logo hues, drawn as a hairline across the top of the button */
.ig-big::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, var(--perry), var(--teal) 52%, var(--gold));
  opacity: .9;
}

.ig-big svg { width: 27px; height: 27px; }
.ig-big strong { font-weight: 700; }

.ig-big:hover {
  border-color: var(--perry-lift);
  background: linear-gradient(180deg, #171a21, var(--panel-2));
}

.ig-big:focus-visible { outline: 3px solid var(--perry-lift); outline-offset: 3px; }

/* ------------------------------------------------------------------ footer */
footer {
  margin-top: 34px;
  padding-top: 24px;
  border-top: 1px solid var(--line-soft);
  text-align: center;
  color: var(--muted-2);
  font-size: 15px;
}

footer a { color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--line); }
footer a:hover { color: var(--gold); border-bottom-color: var(--gold); }

footer .sep { margin: 0 10px; opacity: .5; }

/* --------------------------------------------------------------- a11y/misc */
.hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

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

.spin {
  width: 19px; height: 19px;
  border: 2px solid rgba(23, 17, 10, .3);
  border-top-color: #17110a;
  border-radius: 50%;
  animation: spin .7s linear infinite;
  display: none;
}

.btn.busy .spin { display: block; }

@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@media (max-width: 430px) {
  .wrap { padding: 30px 16px 52px; }
  .meeting { padding: 20px 18px; }
  .meeting dl { grid-template-columns: 1fr; gap: 3px; }
  .meeting dt { padding-top: 9px; }
}