/* The Bright Line Fellowships — shared stylesheet for internships.html and the
   three internships-*.html detail pages. Generated pages link this rather than
   inlining it, so the four cannot drift apart.

   White page throughout. Each fellowship carries one accent taken from its own
   artwork, passed in as --a: gold for the kente, turquoise for the Homer,
   coral for the Tanner. StarApple purple stays on the chrome only. */

:root {
  --p: #4A1F8E;
  --ink: #12102A;
  --ink2: #55516E;
  --ink3: #8A86A0;
  --rule: #E9E6F0;
  --a: #4A1F8E; /* overridden per fellowship */
  --f: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fd: 'Fraunces', Georgia, serif;
  --fm: 'JetBrains Mono', ui-monospace, Menlo, monospace;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
  background: #fff;
  color: var(--ink2);
  font-family: var(--f);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--p); }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
h1, h2, h3 { font-family: var(--fd); color: var(--ink); line-height: 1.08; letter-spacing: -0.015em; font-weight: 600; }
:focus-visible { outline: 2px solid var(--a); outline-offset: 3px; border-radius: 6px; }

.kicker {
  font-family: var(--fm);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink3);
}
.who {
  display: block;
  font-family: var(--fm);
  font-size: 11px;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--a);
}

/* ── bar ── */
.bar { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.88); backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px); border-bottom: 1px solid var(--rule); }
.bar-in { max-width: 1120px; margin: 0 auto; padding: 0 24px; height: 62px; display: flex; align-items: center; }
.bar img { height: 22px; width: auto; }
.bar .sp { flex: 1; }
.bar-cta { font-size: 14px; font-weight: 600; text-decoration: none; color: var(--p); }

main { display: block; }
section { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* ── index: opening ── */
.open { padding-top: 88px; padding-bottom: 60px; text-align: center; }
.open .x { color: #0E9AA7; }
.open h1 { margin-top: 26px; font-size: clamp(42px, 7vw, 84px); font-weight: 600; letter-spacing: -0.032em; }
.open .lede { margin: 26px auto 0; max-width: 34ch; font-size: clamp(17px, 1.9vw, 20px); color: var(--ink2); font-weight: 300; }
.stamp { display: inline-flex; align-items: center; gap: 10px; margin-top: 32px; border: 1px solid var(--rule); border-radius: 999px; padding: 9px 18px; font-family: var(--fm); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink2); }
.stamp .dot { width: 6px; height: 6px; border-radius: 50%; background: #D45D4A; }

/* ── index: cards ── */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; padding-bottom: 40px; }
.card {
  display: block; text-decoration: none; color: inherit;
  border: 1px solid var(--rule); border-radius: 22px; overflow: hidden; background: #fff;
  transition: transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s, border-color .5s;
}
.card:hover { transform: translateY(-4px); border-color: #D7D2E4; box-shadow: 0 18px 50px -18px rgba(18,16,42,.22); }
.card-img { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: #F4F2F8; }
.card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.16,1,.3,1); }
.card:hover .card-img img { transform: scale(1.045); }
.pill { position: absolute; top: 15px; left: 15px; background: var(--a); color: #fff; border-radius: 999px; padding: 5px 11px; font-family: var(--fm); font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; }
.card-body { display: block; padding: 26px; }
.card-h { display: block; margin-top: 12px; font-family: var(--fd); font-weight: 600; font-size: 25px; color: var(--ink); letter-spacing: -0.02em; }
.card-p { display: block; margin-top: 11px; font-size: 15px; color: var(--ink2); line-height: 1.55; }
.card-go { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; font-size: 13px; font-weight: 600; color: var(--ink); }
.card-go svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s; }
.card:hover .card-go svg { transform: translateX(4px); }

/* ── index: why ── */
.why { padding-top: 92px; padding-bottom: 92px; }
.why figure { max-width: 880px; margin: 0 auto; }
.why figure img { border-radius: 26px; width: 100%; }
.why figcaption { margin-top: 16px; text-align: center; font-family: var(--fm); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink3); }
.why figcaption a { color: inherit; text-decoration: none; }
.why figcaption a:hover { color: var(--ink); }
.why-copy { max-width: 640px; margin: 62px auto 0; text-align: center; }
.why-copy h2 { font-size: clamp(27px, 3.6vw, 42px); }
.why-copy p { margin-top: 22px; font-size: 17px; color: var(--ink2); }
.why-copy p.lead { color: var(--ink); font-weight: 500; }

/* ── index: close ── */
.close { padding: 74px 24px; text-align: center; border-top: 1px solid var(--rule); max-width: none; }
.chips { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 26px; }
.chip { border: 1px solid var(--rule); border-radius: 999px; padding: 12px 26px; font-size: 13px; font-weight: 600; color: var(--ink); text-decoration: none; transition: .3s; }
.chip:hover { background: var(--a); border-color: var(--a); color: #fff; }
.also { margin-top: 38px; font-size: 13px; color: var(--ink3); }

/* ── detail ── */
.detail-head { padding-top: 46px; }
.back { display: inline-flex; align-items: center; gap: 8px; font-family: var(--fm); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink3); text-decoration: none; transition: .25s; }
.back:hover { color: var(--ink); }
.back svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; margin-top: 40px; }
.detail-head h1 { margin-top: 16px; font-size: clamp(40px, 6vw, 68px); font-weight: 600; letter-spacing: -0.032em; }
.detail-head .lede { margin-top: 22px; font-size: clamp(17px, 1.9vw, 20px); color: var(--ink2); max-width: 30ch; font-weight: 300; }
.terms { display: flex; flex-wrap: wrap; gap: 42px; margin-top: 40px; }
.terms dt { font-family: var(--fm); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink3); }
.terms dd { margin-top: 6px; font-family: var(--fd); font-weight: 600; font-size: 20px; color: var(--ink); }
.btn { display: inline-block; margin-top: 40px; background: var(--a); color: #fff; border-radius: 999px; padding: 15px 34px; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; transition: opacity .25s; }
.btn:hover { opacity: .9; }
.detail-head figure img { border-radius: 26px; width: 100%; }
.detail-head figcaption { margin-top: 15px; font-family: var(--fm); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink3); }
.detail-head figcaption a { color: inherit; text-decoration: none; }
.detail-head figcaption a:hover { color: var(--ink); }

.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 76px; padding-top: 96px; padding-bottom: 96px; }
.cols h2 { font-size: 22px; }
.cols ul { list-style: none; margin-top: 24px; }
.cols li { position: relative; padding-left: 20px; margin-bottom: 16px; font-size: 15.5px; color: var(--ink2); line-height: 1.6; }
.cols li::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: #C9C5D6; }
.cols li.a::before { background: var(--a); }

.origin { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); max-width: none; padding: 82px 24px; text-align: center; }
.origin .kicker { color: var(--a); }
.origin-t { max-width: 44ch; margin: 24px auto 0; font-family: var(--fd); font-size: clamp(20px, 2.4vw, 28px); line-height: 1.45; color: var(--ink); font-weight: 500; }

.deliver { padding-top: 96px; padding-bottom: 88px; max-width: 900px; }
.deliver h2 { font-size: clamp(26px, 3vw, 35px); text-align: center; }
.deliver ol { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 32px 48px; margin-top: 48px; }
.deliver li { display: flex; gap: 20px; font-size: 15.5px; color: var(--ink2); line-height: 1.6; }
.deliver .ix { font-family: var(--fm); font-size: 12px; color: var(--a); padding-top: 3px; flex: none; }

.whobox { max-width: 680px; padding-bottom: 96px; text-align: center; }
.whobox h2 { font-size: 22px; }
.whobox p { margin-top: 18px; font-size: 16px; color: var(--ink2); }

/* ── form ── */
.apply { max-width: 640px; padding-top: 88px; padding-bottom: 88px; border-top: 1px solid var(--rule); }
.apply h2 { font-size: clamp(28px, 3.4vw, 40px); text-align: center; }
.apply form { margin-top: 40px; border: 1px solid var(--rule); border-radius: 22px; padding: 38px; }
.apply label { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink3); margin-bottom: 8px; }
.apply input, .apply select, .apply textarea { width: 100%; background: #fff; border: 1px solid var(--rule); border-radius: 12px; padding: 13px 15px; font-size: 15px; transition: border-color .2s; }
.apply textarea { min-height: 132px; resize: vertical; line-height: 1.55; }
.apply input:focus, .apply select:focus, .apply textarea:focus { outline: none; border-color: var(--a); }
.apply input::placeholder, .apply textarea::placeholder { color: #B6B2C6; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.fw { margin-bottom: 22px; }
.consent { display: flex !important; align-items: flex-start; gap: 12px; text-transform: none !important; letter-spacing: 0 !important; cursor: pointer; margin-bottom: 22px !important; }
.consent input { width: 17px; height: 17px; margin-top: 1px; flex: none; accent-color: var(--a); }
.consent span { font-size: 13.5px; font-weight: 400; color: var(--ink2); line-height: 1.55; text-transform: none; letter-spacing: 0; }
.apply button { width: 100%; background: var(--a); color: #fff; border-radius: 999px; padding: 17px; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; transition: opacity .25s; }
.apply button:hover { opacity: .9; }
.apply button[disabled] { opacity: .55; cursor: not-allowed; }
.hp { position: absolute; left: -9999px; }
.err { display: none; margin-bottom: 16px; background: #FDECEA; color: #B3372B; border-radius: 12px; padding: 11px 14px; font-size: 13.5px; }
.err.on { display: block; }
.done { margin-top: 40px; border: 1px solid var(--rule); border-radius: 22px; padding: 56px 34px; text-align: center; }
.done .tick { width: 56px; height: 56px; border-radius: 50%; background: color-mix(in srgb, var(--a) 12%, #fff); color: var(--a); display: flex; align-items: center; justify-content: center; font-size: 25px; margin: 0 auto 20px; }
.done h3 { font-size: 24px; }
.done p { margin-top: 12px; font-size: 15px; color: var(--ink2); max-width: 40ch; margin-left: auto; margin-right: auto; }
.done a { display: inline-block; margin-top: 26px; font-size: 13px; font-weight: 600; color: var(--ink); }

/* ── faq ── */
.faq { max-width: 760px; padding-top: 74px; padding-bottom: 74px; border-top: 1px solid var(--rule); }
.faq h2 { font-size: 22px; margin-bottom: 26px; }
.faq details { border-top: 1px solid var(--rule); padding: 18px 0; }
.faq details:first-of-type { border-top: 0; padding-top: 0; }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 22px; align-items: flex-start; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary span { font-family: var(--fd); font-weight: 600; font-size: 17px; color: var(--ink); line-height: 1.35; }
.faq summary i { font-style: normal; font-size: 19px; color: var(--ink3); line-height: 1; transition: transform .25s; flex: none; }
.faq details[open] summary i { transform: rotate(45deg); }
.faq details p { margin-top: 11px; font-size: 15px; color: var(--ink2); }

/* ── others ── */
.others { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding-top: 68px; padding-bottom: 68px; border-top: 1px solid var(--rule); }
.other { display: flex; align-items: center; gap: 20px; border: 1px solid var(--rule); border-radius: 20px; padding: 20px; text-decoration: none; color: inherit; transition: .4s; }
.other:hover { border-color: #D7D2E4; transform: translateY(-2px); }
.other-img { width: 78px; height: 78px; border-radius: 16px; overflow: hidden; flex: none; background: #F4F2F8; }
.other-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s; }
.other:hover .other-img img { transform: scale(1.06); }
.other-h { display: block; margin-top: 6px; font-family: var(--fd); font-weight: 600; font-size: 19px; color: var(--ink); }

/* ── footer ── */
footer.site { border-top: 1px solid var(--rule); padding: 34px 24px; text-align: center; font-size: 14px; color: var(--ink3); }
footer.site a { color: var(--ink2); text-decoration: none; }
footer.site a:hover { color: var(--p); }
footer.site p + p { margin-top: 8px; }

/* ── responsive ── */
@media (max-width: 900px) {
  .cards { grid-template-columns: 1fr; gap: 18px; }
  .detail-grid { grid-template-columns: 1fr; gap: 34px; }
  .cols { grid-template-columns: 1fr; gap: 44px; padding-top: 64px; padding-bottom: 64px; }
  .deliver ol { grid-template-columns: 1fr; gap: 26px; }
  .others { grid-template-columns: 1fr; }
  .open { padding-top: 60px; }
  .why { padding-top: 64px; padding-bottom: 64px; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .row { grid-template-columns: 1fr; gap: 20px; }
  .apply form { padding: 26px 22px; }
  .terms { gap: 28px; }
  .detail-head .lede, .open .lede { max-width: none; }
}