/* =============================================================
   EWB CORNELL - INNER PAGES "OPERATIONS DOSSIER"
   Loaded after style.css on every inner page.
   Dossier primitives + compatibility classes + widgets.
============================================================= */

:root, [data-theme="light"] { --accent-2: #5390DE; }
[data-theme="dark"]        { --accent-2: #7FB0F2; }

/* JS-gated reveal */
/* Scroll reveals removed (Aug 2026): content is visible immediately and does
   not animate in as the page scrolls. The .rv / .rv-d* classes are left in the
   markup so the effect can be restored here if it is ever wanted again. */
.rv, .js .rv, .js .rv.in { opacity: 1 !important; transform: none !important; transition: none !important; }
.js .rv-d1, .js .rv-d2, .js .rv-d3 { transition-delay: 0s !important; }
@media (prefers-reduced-motion: reduce) { .js .rv { opacity: 1 !important; transform: none !important; transition: none !important; } }

/* =============================================================
   DOSSIER PRIMITIVES (rebuilt pages)
============================================================= */
.xindex { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-ink); display: inline-flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.xindex::before { content: ''; width: 22px; height: 1px; background: var(--accent); }
.xhead { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 44px; }
.xhead h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); font-weight: 600; letter-spacing: -0.025em; line-height: 1.12; color: var(--ink); max-width: 20ch; }
.xhead p { color: var(--muted); max-width: 46ch; line-height: 1.6; }
.dmeta { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }

/* Enhanced page hero (mono kicker already styled by .page-hero-tag in style.css) */
.page-hero-tag { font-family: var(--mono); }

/* =============================================================
   COMPATIBILITY - existing inner-page markup
============================================================= */
/* team overview box rows */
.team-overview-item { display: flex; align-items: center; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid var(--border); font-size: .9rem; }
.team-overview-item:last-child { border-bottom: none; }
.team-overview-label { color: var(--muted); font-weight: 500; }
.team-overview-value { font-weight: 700; color: var(--ink); font-family: var(--mono); font-size: .82rem; }
.team-overview-desc h2 { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 14px; }
.team-overview-desc p { color: var(--muted); line-height: 1.7; margin-bottom: 14px; }
.status-active { color: var(--accent-ink) !important; }

/* page hero stats (older markup) */
.page-hero-stat-value { display: block; font-family: var(--mono); font-size: 1.6rem; font-weight: 500; color: var(--accent-ink); line-height: 1; }
.page-hero-stat-label { font-size: .78rem; color: var(--muted); margin-top: 6px; display: block; }

/* project card tags + meta (older markup) */
.project-card-tags { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.tag { font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; padding: 4px 9px; border-radius: 4px; background: var(--accent-soft); color: var(--accent-ink); border: 1px solid var(--accent-soft-bd); }
.tag-completed { background: color-mix(in oklab, var(--ok) 12%, transparent); color: var(--ok); border-color: color-mix(in oklab, var(--ok) 28%, transparent); }
.project-card-meta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px; font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--dim); align-items: center; }
.project-card-meta span { display: inline-flex; align-items: center; gap: 5px; }

/* team subnav links (older markup) */
.team-subnav-link { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; color: var(--accent-ink); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.team-subnav-link:hover { color: var(--accent); }
.team-subnav .container { display: flex; justify-content: space-between; align-items: center; }

/* CTA band inner usage (centered headline + copy) */
.cta-band .container { text-align: center; }
.cta-band h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 600; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 12px; max-width: 22ch; margin-inline: auto; }
.cta-band p { color: var(--muted); max-width: 50ch; margin: 0 auto 26px; line-height: 1.6; }

/* =============================================================
   FILTER BAR (projects, gallery)
============================================================= */
.filterbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 40px; }
.fchip { font-family: var(--mono); font-size: .8rem; letter-spacing: .04em; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); cursor: pointer; transition: all .16s var(--ease-out); }
.fchip:hover { border-color: var(--accent); color: var(--accent-ink); }
.fchip.active { background: var(--accent-solid); border-color: var(--accent-solid); color: #fff; }
.filter-hidden { display: none !important; }

/* =============================================================
   PROJECT INDEX GRID (rebuilt projects page)
============================================================= */
.pgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.pcard { display: block; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; transition: transform .2s var(--ease-out), border-color .2s; }
@media (hover:hover){ .pcard:hover { transform: translateY(-4px); border-color: var(--border-strong); } }
.pcard-media { position: relative; aspect-ratio: 16/10; background: var(--bg-alt); border-bottom: 1px solid var(--border); overflow: hidden; }
.pcard-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease-out); }
@media (hover:hover){ .pcard:hover .pcard-media img { transform: scale(1.04); } }
.pcard-media.noimg { display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; color: var(--dim); }
.pcard-badge { position: absolute; top: 12px; left: 12px; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; padding: 4px 10px; border-radius: 4px; background: rgba(11,20,34,.7); color: #fff; backdrop-filter: blur(4px); }
.pcard-body { padding: 22px 24px 24px; }
.pcard-k { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-ink); }
.pcard-body h3 { font-size: 1.2rem; font-weight: 600; color: var(--ink); margin: 6px 0 8px; letter-spacing: -0.01em; }
.pcard-body p { color: var(--muted); font-size: .9rem; line-height: 1.6; }
@media (max-width: 720px){ .pgrid { grid-template-columns: 1fr; } }

/* =============================================================
   STEPS (apply)
============================================================= */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.step { background: var(--surface); padding: 26px 22px; }
.step .sn { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: var(--accent-ink); }
.step h3 { font-size: 1rem; font-weight: 600; margin: 12px 0 8px; }
.step p { color: var(--muted); font-size: .86rem; line-height: 1.55; }
@media (max-width: 900px){ .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .steps { grid-template-columns: 1fr; } }

/* =============================================================
   ACCORDION (FAQ)
============================================================= */
.acc { border-top: 1px solid var(--border); }
.acc-item { border-bottom: 1px solid var(--border); }
.acc-q { width: 100%; text-align: left; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 4px; font-size: 1.05rem; font-weight: 600; color: var(--ink); cursor: pointer; }
.acc-q .ico { flex-shrink: 0; width: 22px; height: 22px; position: relative; transition: transform .25s var(--ease-out); color: var(--accent-ink); }
.acc-q .ico::before, .acc-q .ico::after { content: ''; position: absolute; background: currentColor; border-radius: 2px; }
.acc-q .ico::before { top: 10px; left: 3px; right: 3px; height: 2px; }
.acc-q .ico::after { left: 10px; top: 3px; bottom: 3px; width: 2px; transition: transform .25s var(--ease-out); }
.acc-item.open .acc-q .ico::after { transform: scaleY(0); }
.acc-a { max-height: 0; overflow: hidden; transition: max-height .3s var(--ease-out); }
.acc-a-inner { padding: 0 4px 22px; color: var(--muted); line-height: 1.7; max-width: 70ch; }
@media (prefers-reduced-motion: reduce){ .acc-a { transition: none; } }

/* =============================================================
   SPONSORS - tier cards + calculator + wall
============================================================= */
.tier-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.tcard { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 30px 26px; display: flex; flex-direction: column; transition: transform .2s var(--ease-out), border-color .2s, box-shadow .2s; }
@media (hover:hover){ .tcard:hover { transform: translateY(-4px); border-color: var(--border-strong); box-shadow: var(--shadow-md); } }
.tcard.feat { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.tcard .badge { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: 14px; }
.tcard .amt { font-family: var(--mono); font-size: 2.4rem; font-weight: 500; color: var(--ink); letter-spacing: -0.03em; line-height: 1; }
.tcard .amt span { font-size: .9rem; color: var(--muted); }
.tcard .nm { font-weight: 600; color: var(--ink); margin: 14px 0 6px; }
.tcard ul { margin: 10px 0 22px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.tcard li { display: flex; gap: 9px; font-size: .88rem; color: var(--muted); line-height: 1.45; }
.tcard li i { color: var(--accent-ink); flex-shrink: 0; margin-top: 2px; }
@media (max-width: 900px){ .tier-cards { grid-template-columns: 1fr; } }

/* calculator (mirrors home.css) */
.calc { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: start; }
.calc-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 32px; box-shadow: var(--shadow-sm); }
.calc-label { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); margin-bottom: 12px; display: block; }
.calc-input-wrap { position: relative; }
.calc-input-wrap .dollar { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); font-size: 1.6rem; font-weight: 600; color: var(--dim); }
.calc-input { width: 100%; padding: 16px 18px 16px 38px; font-family: var(--mono); font-size: 1.8rem; font-weight: 500; color: var(--ink); background: var(--bg); border: 1.5px solid var(--border-strong); border-radius: var(--radius); }
.calc-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.calc-presets { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.calc-preset { font-family: var(--mono); font-size: .82rem; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg); color: var(--muted); cursor: pointer; transition: all .15s; }
.calc-preset:hover { border-color: var(--accent); color: var(--accent-ink); }
.calc-preset.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.calc-goal { margin-top: 24px; }
.calc-goal-h { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); margin-bottom: 8px; }
.calc-goal-track { height: 10px; background: var(--bg-alt); border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
.calc-goal-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 999px; transition: width .5s var(--ease-out); }
.calc-out { display: flex; flex-direction: column; gap: 14px; }
.calc-out-h { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: 4px; }
.impact-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; background: var(--surface); display: flex; align-items: center; gap: 18px; }
.impact-card .qty { font-family: var(--mono); font-size: 2rem; font-weight: 500; color: var(--accent); line-height: 1; min-width: 64px; letter-spacing: -0.02em; }
.impact-card .desc { color: var(--ink); font-weight: 600; font-size: .95rem; }
.impact-card .desc small { display: block; color: var(--muted); font-weight: 400; font-size: .82rem; margin-top: 3px; line-height: 1.4; }
@media (max-width: 900px){ .calc { grid-template-columns: 1fr; gap: 28px; } }

/* sponsor wall */
.swall { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.slogo { height: 84px; border: 1px solid var(--border); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; background: var(--surface); font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--dim); text-align: center; padding: 10px; transition: border-color .18s; }
.slogo:hover { border-color: var(--border-strong); color: var(--muted); }

/* =============================================================
   ABOUT - values, lead, stat strip, timeline reused from style.css
============================================================= */
.lead-quote { font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 500; line-height: 1.35; letter-spacing: -0.015em; color: var(--ink); max-width: 22ch; }
.statstrip { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--border); gap: 1px; }
.statstrip .s { background: var(--surface); padding: 28px 22px; text-align: left; }
.statstrip .n { font-family: var(--mono); font-size: 2.4rem; font-weight: 500; color: var(--accent); line-height: 1; letter-spacing: -0.02em; }
.statstrip .t { color: var(--muted); font-size: .85rem; margin-top: 8px; }
@media (max-width: 760px){ .statstrip { grid-template-columns: 1fr 1fr; } }

.about-split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.about-split img { width: 100%; height: auto; border-radius: var(--radius-lg); display: block; }
@media (max-width: 900px){ .about-split { grid-template-columns: 1fr; gap: 32px; } }

/* values grid uses style.css .values-grid/.value-card; add tabler icon sizing */
.value-icon i { font-size: 20px; }

/* =============================================================
   GALLERY (real photos)
============================================================= */
.gfilter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 36px; }
.gitem { break-inside: avoid; margin-bottom: 16px; border-radius: var(--radius-lg); overflow: hidden; position: relative; cursor: pointer; background: var(--surface); border: 1px solid var(--border); display: block; }
/* height:auto is required: the width/height attributes on these images exist so
   the masonry can reserve the right box before load. Without it the height
   attribute applies literally and every photo stretches. */
.gitem img { width: 100%; height: auto; display: block; transition: transform .45s var(--ease-out); }
@media (hover:hover){ .gitem:hover img { transform: scale(1.05); } }
.gitem figcaption { position: absolute; inset: auto 0 0 0; padding: 28px 16px 14px; background: linear-gradient(to top, rgba(8,15,28,.82), transparent); color: #fff; font-size: .84rem; font-weight: 600; opacity: 0; transition: opacity .25s; }
.gitem .gc-loc { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; font-weight: 500; color: #ADD0FE; margin-bottom: 3px; }
@media (hover:hover){ .gitem:hover figcaption { opacity: 1; } }
.gitem.filter-hidden { display: none !important; }

/* =============================================================
   PROJECT DETAIL - lead media + back link mono
============================================================= */
.pd-media { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--radius-lg); display: block; margin-bottom: 14px; border: 1px solid var(--border); }
.pd-quote { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; color: var(--accent-ink); border-left: 0; padding: 14px 0; }

/* =============================================================
   FORM SUCCESS / FEEDBACK
============================================================= */
.form-note { font-size: .82rem; color: var(--dim); margin-top: 6px; }
.form-error { color: var(--danger); font-size: .8rem; margin-top: 6px; min-height: 1em; }
.field-ok { border-color: var(--ok) !important; }

/* =============================================================
   CTA BAND BUTTONS on the light accent-soft wash (visible)
============================================================= */
.cta-band .btn-ghost { background: var(--surface); color: var(--ink); border: 1.5px solid var(--border-strong); }
.cta-band .btn-ghost:hover { background: var(--bg-alt); border-color: var(--accent); }
.cta-band .btn-outline { color: var(--ink) !important; border-color: var(--border-strong) !important; background: transparent !important; }
.cta-band .btn-outline:hover { background: var(--ink) !important; color: var(--bg) !important; border-color: var(--ink) !important; }

/* =============================================================
   SUBTEAM PAGE TWEAKS (June 2026 request)
============================================================= */
/* Bigger hero stats on subteam pages */
.page-hero-stats.lg { gap: 44px; align-items: stretch; }
/* Cells vary in height because a phrase value is far shorter than a numeral.
   Pushing each cell's content to the bottom lines every label up on one row
   and drops the phrase onto the numbers' baseline. */
.page-hero-stats.lg .page-hero-stat { display: flex; flex-direction: column; justify-content: flex-end; }
.page-hero-stats.lg .page-hero-stat-value,
.page-hero-stats.lg .page-hero-stat strong { font-family: var(--mono); font-size: clamp(2.8rem, 4.4vw, 4rem); font-weight: 500; line-height: 1; letter-spacing: -0.03em; color: var(--accent); }
/* :not() is load-bearing - the value is itself a <span> inside .page-hero-stat,
   so a bare `span` here outranked the value rule and shrank every number to 14px. */
/* Some subteams use a phrase where the others show a number. Keep those from
   swamping the hero - the big numeric treatment is for actual figures. */
.page-hero-stats.lg .page-hero-stat.is-text .page-hero-stat-value,
.page-hero-stats.lg .page-hero-stat.is-text strong { font-size: 1.45rem; letter-spacing: -0.01em; }

.page-hero-stats.lg .page-hero-stat-label,
.page-hero-stats.lg .page-hero-stat span:not(.page-hero-stat-value) { font-size: var(--fs-sm); color: var(--muted); margin-top: 8px; }

/* End buttons: no divider, centered vertically + horizontally in the section */
.team-subnav { display: flex; flex-direction: row; justify-content: center !important; align-items: center; gap: 14px; flex-wrap: wrap; max-width: var(--maxw); margin: 0 auto; padding: 56px 24px; border-top: none !important; min-height: 34vh; }
@media (max-width: 560px) { .team-subnav { flex-direction: column; align-items: center; min-height: 0; padding: 48px 24px; } .team-subnav .btn { width: 100%; max-width: 340px; justify-content: center; } }

/* Project detail CTA buttons: centered as a group */
.cta-band .cta-buttons { justify-content: center; }
@media (max-width: 560px) { .cta-band .cta-buttons { flex-direction: column; align-items: center; } .cta-band .cta-buttons .btn { width: 100%; max-width: 340px; justify-content: center; } }
/* Teams hub: responsive full-width feature card */
.pgrid .pcard.feature { grid-column: 1 / -1; }
.feature-body { display: grid; grid-template-columns: auto 1fr auto; gap: 22px; align-items: center; }
@media (max-width: 720px) { .feature-body { grid-template-columns: 1fr; gap: 10px; } .feature-body .dmeta { justify-self: start; } }

/* Business "Key Achievements" grid: clean on phones */

/* Whole mobile theme row is the toggle (icon only, no label) */

/* About page: clean multi-column majors list */
.majors-list { columns: 3; column-gap: 40px; max-width: 880px; }
.majors-list li { break-inside: avoid; position: relative; padding: 9px 0 9px 18px; border-bottom: 1px solid var(--border); font-size: var(--fs-sm); color: var(--muted); }
.majors-list li::before { content: ''; position: absolute; left: 0; top: 18px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
@media (max-width: 760px) { .majors-list { columns: 2; column-gap: 28px; } }
@media (max-width: 460px) { .majors-list { columns: 1; } }

/* =============================================================
   MEMBERS DIRECTORY (Aug 2026)
   Executive board block + filterable full roster
============================================================= */
/* Separators are drawn by each card, not by a coloured grid background, so a
   row that does not divide evenly leaves blank space rather than a stray tile. */
.exec-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.exec-card { background: var(--surface); padding: 24px 22px 26px; cursor: pointer; transition: background .18s var(--ease-out); text-align: center; box-shadow: 1px 0 0 var(--border), 0 1px 0 var(--border); }
@media (hover: hover) { .exec-card:hover { background: var(--surface-hover); } }
.exec-office { font-family: var(--mono); font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-ink); line-height: 1.4; min-height: 2.8em; text-align: center; }
/* Every card on this page opens a profile pop-up, so say so once at the top
   rather than decorating each card with an affordance. */
.roster-hint {
  display: flex; width: fit-content; align-items: center; gap: 9px;
  margin: 26px auto 22px;
  padding: 8px 14px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface);
  font-family: var(--mono); font-size: var(--fs-xs); letter-spacing: .03em; color: var(--muted);
}
.roster-hint i { font-size: 16px; color: var(--accent-ink); }
/* Centred above a full-width roster grid, but flush left in the members hero,
   where it sits in a left-aligned column under the heading and stats. */
.hero-split-text .roster-hint { margin-inline: 0; }
@media (max-width: 560px) { .roster-hint { font-size: 11px; padding: 7px 11px; gap: 7px; } }

/* Six cards over two rows of three. Cap the grid so each photo stays
   portrait-sized instead of stretching to a third of the page width. */
.exec-grid:not(.leads-grid) { max-width: 760px; margin-inline: auto; }
@media (max-width: 720px) { .exec-grid:not(.leads-grid) { max-width: none; } }
/* Office titles wrap to different line counts, so the reserved space matches
   the measured worst case and every photo in a row keeps one baseline. The two
   lines above cover both grids until the board's columns narrow below ~780px,
   where "External Communications Officer" needs a third. */
@media (max-width: 780px) { .exec-grid:not(.leads-grid) .exec-office { min-height: 4.2em; } }
/* Photo well on top, name underneath: keeps every card's photo on the same
   baseline no matter how many lines the office title wraps to. */
.exec-id { display: flex; flex-direction: column; align-items: stretch; gap: 12px; margin-top: 18px; }
.exec-av {
  /* Fills the card width so every photo scales with the column and the whole
     row shares one baseline, instead of a small fixed square in the corner. */
  width: 100%; aspect-ratio: 1 / 1; height: auto; flex-shrink: 0; border-radius: 12px;
  background: var(--accent-solid); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 1.5rem; font-weight: 500; letter-spacing: .02em;
  overflow: hidden;
}
.exec-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.exec-card:nth-child(2) .exec-av { background: oklch(48% 0.09 245); }
.exec-card:nth-child(3) .exec-av { background: oklch(46% 0.1 150); }
.exec-card:nth-child(4) .exec-av { background: oklch(45% 0.08 290); }
.exec-card:nth-child(5) .exec-av { background: oklch(44% 0.09 210); }
.exec-name { font-size: var(--fs-base); font-weight: 700; color: var(--ink); line-height: 1.35; }
.exec-sub { font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); margin-top: 4px; }
@media (max-width: 1100px) { .exec-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .exec-grid { grid-template-columns: repeat(2, 1fr); } .exec-card { padding: 18px 15px 20px; } }
@media (max-width: 380px)  { .exec-office { font-size: 11px; letter-spacing: .04em; } .exec-card { padding: 14px 12px 16px; } }

/* Roster group headers between filtered blocks */
.roster-group { margin-top: 52px; }
.roster-group:first-of-type { margin-top: 0; }
.roster-group-h { display: flex; align-items: baseline; gap: 14px; padding-bottom: 12px; margin-bottom: 22px; border-bottom: 1px solid var(--border); }
.roster-group-h h3 { font-size: 1.05rem; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.roster-group-h .n { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: var(--dim); }
.roster-group-h a { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--accent-ink); margin-left: auto; }
.roster-group.filter-hidden { display: none !important; }
.roster-note { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--dim); margin-top: 26px; }

/* =============================================================
   RECRUITMENT (apply page, Aug 2026)
============================================================= */
.rstatus { display: inline-flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ok); background: color-mix(in oklab, var(--ok) 10%, transparent); border: 1px solid color-mix(in oklab, var(--ok) 30%, transparent); border-radius: 999px; padding: 6px 14px; }
.rstatus .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
/* Closed variant: the upperclassmen round ends while first-year + transfer is
   still open, so the two states sit side by side and must read differently. */
.rstatus-row { display: flex; flex-wrap: wrap; gap: 10px; }
.rstatus.closed {
  color: var(--dim);
  background: color-mix(in oklab, var(--dim) 10%, transparent);
  border-color: color-mix(in oklab, var(--dim) 30%, transparent);
}
.rstatus.closed .dot { background: var(--dim); }

/* The one thing a returning upperclassman needs: applications are shut, watch
   your Cornell inbox. Sits directly under the status pills in the hero. */
.hero-notice {
  display: flex; align-items: flex-start; gap: 10px;
  margin-top: 18px; max-width: 68ch; padding: 12px 15px;
  background: var(--accent-soft); border: 1px solid var(--accent-soft-bd);
  border-left: 3px solid var(--accent); border-radius: var(--radius);
  color: var(--ink); font-size: .88rem; line-height: 1.6;
}
.hero-notice i { color: var(--accent-ink); font-size: 17px; line-height: 1.5; flex-shrink: 0; }
.hero-notice strong { color: var(--accent-ink); }

/* A retired application link: same footprint as the button it replaces, but
   plainly inert so nobody tries to submit to a closed round. */
.btn-closed {
  background: var(--bg-alt); color: var(--dim);
  border: 1.5px dashed var(--border-strong);
  cursor: not-allowed; pointer-events: none;
}
.deadline-bar .val.is-closed { color: var(--dim); text-decoration: line-through; text-decoration-thickness: 1px; }
.rtl-head .rtl-tag.is-closed { color: var(--dim); background: color-mix(in oklab, var(--dim) 10%, transparent); border-color: color-mix(in oklab, var(--dim) 28%, transparent); }

.appgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.appcard { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 30px 28px; display: flex; flex-direction: column; }
.appcard.req { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.appcard .step-k { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-ink); }
.appcard h3 { font-size: 1.15rem; font-weight: 600; color: var(--ink); margin: 10px 0 10px; letter-spacing: -0.01em; }
.appcard p { color: var(--muted); font-size: .9rem; line-height: 1.65; flex: 1; }
.appcard .btn { margin-top: 22px; align-self: flex-start; }
.appcard .host { font-family: var(--mono); font-size: 10px; letter-spacing: .06em; color: var(--dim); margin-top: 12px; word-break: break-word; }
@media (max-width: 760px) { .appgrid { grid-template-columns: 1fr; } }

.deadline-bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 24px; padding: 20px 26px; border: 1px solid var(--accent-soft-bd); background: var(--accent-soft); border-radius: var(--radius-lg); }
.deadline-bar .lbl { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-ink); }
.deadline-bar .val { font-family: var(--mono); font-size: 1.3rem; font-weight: 500; color: var(--ink); letter-spacing: -0.01em; }
.deadline-bar .note { color: var(--muted); font-size: .86rem; max-width: 42ch; line-height: 1.5; }

/* Recruitment timeline. A rail runs down each track with a marker per
   milestone; the two class-year tracks sit side by side so the whole
   season is visible without scrolling. Key dates carry a filled marker. */
/* The two branches mirror each other about the trunk: the left one runs its
   rail down its right edge with the text reading back toward the centre, the
   right one runs its rail down its left edge. That puts both rails a fixed
   125px either side of the centre line, so the fork is symmetric and centred
   with no dead half-columns. */
.rtl-tracks { display: grid; grid-template-columns: 1fr 1fr; gap: 0 240px; align-items: start; }

.rtl-tracks .rtl-track:first-child { text-align: right; }
.rtl-tracks .rtl-track:first-child .rtl { padding-left: 0; padding-right: 26px; }
.rtl-tracks .rtl-track:first-child .rtl::before { left: auto; right: 4px; }
.rtl-tracks .rtl-track:first-child .rtl-row::before { left: auto; right: -26px; }
/* keep the flag beside its date rather than stranded at the column edge */
.rtl-tracks .rtl-track:first-child .rtl-row { grid-template-columns: 1fr auto auto; }
.rtl-tracks .rtl-track:first-child .rtl-row .flag { grid-column: 2; grid-row: 1; justify-self: end; }
.rtl-tracks .rtl-track:first-child .rtl-row .when { grid-column: 3; grid-row: 1; justify-self: end; }
.rtl-tracks .rtl-track:first-child .rtl-row .what { grid-column: 1 / -1; }
.rtl-tracks .rtl-track:last-child .rtl-row { grid-template-columns: auto auto 1fr; }
.rtl-tracks .rtl-track:last-child .rtl-row .when { grid-column: 1; grid-row: 1; }
.rtl-tracks .rtl-track:last-child .rtl-row .flag { grid-column: 2; grid-row: 1; justify-self: start; }
.rtl-tracks .rtl-track:last-child .rtl-row .what { grid-column: 1 / -1; }
.rtl-tracks .rtl-track:first-child .rtl-head { justify-content: flex-end; }

.rtl { position: relative; padding-left: 26px; }
.rtl::before { content: ''; position: absolute; left: 4px; top: 6px; bottom: 10px; width: 2px; background: var(--border-strong); border-radius: 1px; }

.rtl-row { position: relative; display: grid; grid-template-columns: 1fr auto; column-gap: 12px; padding: 0 0 15px; border: 0; }
.rtl-row:last-child { padding-bottom: 0; }
/* marker, centred on the rail (rail left 4 + half of 2 = 5) */
.rtl-row::before { content: ''; position: absolute; left: -26px; top: 5px; width: 10px; height: 10px; box-sizing: border-box;
  border-radius: 50%; background: var(--surface); border: 2px solid var(--border-strong); }
.rtl-row.key::before { background: var(--accent); border-color: var(--accent); }

.rtl-row .when { grid-column: 1; grid-row: 1; font-family: var(--mono); font-size: .82rem; font-weight: 500; color: var(--accent-ink); letter-spacing: .02em; }
.rtl-row .flag { grid-column: 2; grid-row: 1; justify-self: end; font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.rtl-row.key .flag { color: var(--accent-ink); }
.rtl-row .what { grid-column: 1 / -1; grid-row: 2; margin-top: 2px; font-size: .95rem; font-weight: 600; color: var(--ink); }
.rtl-row .what small { display: block; font-weight: 400; font-size: .82rem; color: var(--muted); margin-top: 3px; line-height: 1.45; }

@media (max-width: 900px) { .rtl-tracks { grid-template-columns: 1fr; gap: 0; } }
@media (max-width: 640px) { .rtl-row .flag { font-size: 9px; } }

/* Recruitment timeline: two tracks (upperclassmen vs first-year + transfer) */
.rtl-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 4px; }
.rtl-head h3 { font-size: 1.15rem; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.rtl-head .rtl-tag { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); background: var(--accent-soft); border: 1px solid var(--accent-soft-bd); border-radius: 999px; padding: 4px 12px; }
@media (max-width: 900px) { .rtl-track + .rtl-track { margin-top: 48px; } }
.rtl-note { color: var(--muted); font-size: .86rem; line-height: 1.55; max-width: 62ch; margin: 6px 0 15px; }

/* Subteam leads reuse the board card, but there are nine of them and they wrap.
   Use real gaps rather than the board grid's 1px-divider trick, so a partly
   filled last row does not leave a coloured empty cell. */
.leads-grid {
  grid-template-columns: repeat(5, 1fr);
  gap: 14px; background: transparent; border: 0; border-radius: 0; overflow: visible;
}
@media (max-width: 1100px) { .leads-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .leads-grid { grid-template-columns: repeat(2, 1fr); } }
/* Tighter padding than the board's cards, so the ten leads still fit five to a
   row while their photos take more of each card. */
.leads-grid .exec-card { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px 14px 22px; }
@media (max-width: 720px) { .leads-grid .exec-card { padding: 18px 12px 20px; } }
.leads-grid .exec-av { background: var(--accent-solid); }
.leads-grid .exec-card:nth-child(3n+2) .exec-av { background: oklch(48% 0.09 245); }
.leads-grid .exec-card:nth-child(3n+3) .exec-av { background: oklch(46% 0.1 150); }

/* Subteam pages close with a single .cta-band holding all three actions
   (join / all projects / support). The old standalone .team-subnav bar was
   removed: it duplicated the band and left an awkward strip above the footer. */
.cta-band .cta-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* Dig Ag / IoT work tracks: cards instead of one long column of prose */
.track-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 30px; }
.track-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 26px 24px; }
.track-card .tk { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-ink); }
.track-card h3 { font-size: 1.08rem; font-weight: 600; color: var(--ink); margin: 8px 0 10px; letter-spacing: -0.01em; }
.track-card p { color: var(--muted); font-size: .9rem; line-height: 1.65; }
.track-card ul { margin-top: 12px; display: flex; flex-direction: column; gap: 9px; padding-left: 17px; }
.track-card li { color: var(--muted); font-size: .88rem; line-height: 1.55; }
.track-card li strong { color: var(--ink); font-weight: 600; }
.track-card .note { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); font-size: .86rem; }
.track-card.wide { grid-column: 1 / -1; }
@media (max-width: 820px) { .track-grid { grid-template-columns: 1fr; } }

/* Sponsor wall: real logos */
.swall-logos { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 18px; align-items: stretch; }
.slogo-img {
  display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 22px 26px; min-height: 146px; transition: border-color .18s;
}
.slogo-img:hover { border-color: var(--border-strong); }
.slogo-img img { max-width: 100%; max-height: 92px; width: auto; height: auto; object-fit: contain; display: block; }

/* Subteam group photo, sits above the roster grid on each team page. */
.team-photo { margin: 0 0 30px; }
.team-photo img {
  width: 100%; aspect-ratio: 3/2; object-fit: cover; display: block;
  border-radius: var(--radius-lg); border: 1px solid var(--border);
}
.team-photo figcaption { margin-top: 10px; }
@media (max-width: 640px) { .team-photo img { aspect-ratio: 4/3; } }

/* App screenshots. Phone captures are ~1:2 portrait, so the 16/9 cover crop
   used by .pd-media cuts the top and bottom off. Show them whole instead. */
.app-shots { display: flex; gap: 16px; flex-wrap: wrap; margin: 0 0 12px; }
.app-shots figure { flex: 1 1 200px; min-width: 0; margin: 0; }
.app-shots img {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius-lg); border: 1px solid var(--border);
  background: var(--surface);
}
.app-shots figcaption { margin-top: 8px; }
@media (max-width: 520px) { .app-shots { gap: 12px; } .app-shots figure { flex: 1 1 100%; } }

/* Partner logos. A logo is artwork, not a photograph: the cover crop used by
   .pd-media would cut it, and the green ink needs a light ground to read in
   dark mode. Show it whole, centred, on its own panel. */
.partner-logo {
  display: flex; align-items: center; justify-content: center;
  background: #ffffff; border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 28px 32px;
}
.partner-logo img { width: 100%; max-width: 520px; height: auto; display: block; }
@media (max-width: 560px) { .partner-logo { padding: 20px; } }

/* Logo used as a card thumbnail: contain, never cover, on the same light ground. */
.pcard-media.logo-thumb { background: #ffffff; }
.pcard-media.logo-thumb img { object-fit: contain; padding: 18px; }

/* Subteams hub (/teams/): the five cards are the whole page, so their copy
   runs a step larger than the same card used in a dense projects grid. */
.subteams-grid .pcard-k { font-size: 12px; letter-spacing: .08em; font-weight: 600; }
.subteams-grid .pcard-body h3 { font-size: 1.45rem; margin: 8px 0 10px; }
.subteams-grid .pcard-body p { font-size: 1rem; line-height: 1.65; }
.subteams-grid .dmeta { font-size: 13px; letter-spacing: .08em; }
.subteams-grid .feature .pcard-k { font-size: 13px; }
.subteams-grid .feature .pcard-body h3 { font-size: 1.7rem; }
.subteams-grid .feature .pcard-body p { font-size: 1.05rem; }
@media (max-width: 720px) {
  .subteams-grid .pcard-body h3,
  .subteams-grid .feature .pcard-body h3 { font-size: 1.25rem; }
  .subteams-grid .pcard-body p,
  .subteams-grid .feature .pcard-body p { font-size: .95rem; }
}

/* =============================================================
   SPLIT PAGE HERO - copy left, photograph right (members page)
============================================================= */
.hero-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); gap: 48px; align-items: center; }
.hero-split-text { min-width: 0; }
.hero-photo {
  margin: 0; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--border); box-shadow: var(--shadow-lg); background: var(--surface);
}
/* height:auto so the width/height attributes only supply the aspect ratio. */
.hero-photo img { width: 100%; height: auto; display: block; }
@media (max-width: 900px) {
  .hero-split { grid-template-columns: 1fr; gap: 28px; }
  .hero-photo { order: 2; }
}

/* =============================================================
   404 SITEMAP + SLIM FOOTER
   The 404 body carries the full link directory, so its footer is
   reduced to the legal bar rather than repeating those links.
============================================================= */
.sitemap-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 48px; }
.sitemap-grid h4 { font-family: var(--mono); font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); margin-bottom: 16px; }
.sitemap-grid li { margin-bottom: 9px; }
.sitemap-grid a { font-size: var(--fs-sm); color: var(--muted); transition: color 0.18s ease; }
.sitemap-grid a:hover { color: var(--accent-ink); }
@media (max-width: 900px) { .sitemap-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; } }
@media (max-width: 520px) { .sitemap-grid { grid-template-columns: 1fr; gap: 28px; } }

.footer-slim { padding: 30px 0 28px; }
.footer-slim .footer-bottom { border-top: 0; padding-top: 0; }

/* =============================================================
   BRANCHING RECRUITMENT TIMELINE
   Three events are identical for every applicant, so they run on one
   trunk. After the info session the trunk splits by class year: it
   continues straight into the Upperclassmen rail and peels off to the
   right into the First-Year + Transfer rail.

   Geometry note: .rtl sets padding-left 26px with its rail at left 4px,
   width 2px, so every rail centre sits at x = 5px inside its column.
   .rtl-tracks is 1fr 1fr with a 56px gap, so column two begins at
   calc(50% + 28px) and its rail centre lands at calc(50% + 33px).
   The fork's arms are pinned to those two numbers.
============================================================= */
.rtl-shared { margin-bottom: 0; }
.rtl-shared .rtl { padding-left: 0; }
.rtl-shared .rtl::before { left: calc(50% - 1px); }        /* trunk on the centre line */
.rtl-shared .rtl-head { justify-content: center; }
.rtl-shared .rtl-row { grid-template-columns: 1fr 1fr; column-gap: 56px; }
.rtl-shared .rtl-row::before { left: calc(50% - 5px); }
.rtl-shared .rtl-row .when { grid-column: 1; grid-row: 1; text-align: right; }
.rtl-shared .rtl-row .flag { grid-column: 1; grid-row: 2; justify-self: end; margin-top: 3px; }
.rtl-shared .rtl-row .what { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
.rtl-shared .rtl::before { bottom: 0; }              /* run the trunk into the fork */
.rtl-shared .rtl-row:last-child { padding-bottom: 8px; }
.rtl-shared .rtl-row .what small { max-width: 44ch; }

/* Symmetric fork. Column one's rail sits at x = 5px and column two's at
   calc(50% + 33px), so their midpoint - where the trunk comes down - is
   calc(25% + 19px). Each arm travels the same distance outwards. */
.rtl-fork { position: relative; height: 36px; }
.rtl-fork::before,
.rtl-fork::after { content: ''; position: absolute; top: 0; bottom: 0; }
/* left arm: out to column one's centre line (25% - 14px) */
.rtl-fork::before {
  left: calc(50% - 126px); right: calc(50% - 1px);
  border-left: 2px solid var(--border-strong);
  border-top: 2px solid var(--border-strong);
  border-top-left-radius: 16px;
}
/* right arm: out to column two's centre line (75% + 14px) */
.rtl-fork::after {
  left: calc(50% - 1px); right: calc(50% - 126px);
  border-right: 2px solid var(--border-strong);
  border-top: 2px solid var(--border-strong);
  border-top-right-radius: 16px;
}

/* stacked layout: no branch to draw, just carry the trunk down */
@media (max-width: 900px) {
  .rtl-shared { margin-left: 0; max-width: none; }
  .rtl-fork { height: 26px; }
  .rtl-fork::after { display: none; }
  .rtl-tracks .rtl-track:first-child { text-align: left; }
  .rtl-tracks .rtl-track:first-child .rtl { padding-left: 26px; padding-right: 0; }
  .rtl-tracks .rtl-track:first-child .rtl::before { left: 4px; right: auto; }
  .rtl-tracks .rtl-track:first-child .rtl-row::before { left: -26px; right: auto; }
  .rtl-tracks .rtl-track:first-child .rtl-row .when { grid-column: 1; justify-self: start; }
  .rtl-tracks .rtl-track:first-child .rtl-row .flag { grid-column: 2; justify-self: end; }
  .rtl-tracks .rtl-track:first-child .rtl-head { justify-content: flex-start; }
  /* the desktop mirror puts the tag before the heading; put it back after */
  .rtl-tracks .rtl-track:first-child .rtl-head h3 { order: -1; }

  /* One unbroken rail. On phones the fork is meaningless, so the trunk simply
     runs on through each branch's heading and note into its rows, with a solid
     node marking where each class year picks up. */
  .rtl-tracks { grid-template-columns: 1fr; gap: 0; }
  .rtl-track { position: relative; padding-left: 26px; }
  .rtl-track::before { content: ''; position: absolute; left: 4px; top: 0; bottom: 0; width: 2px; background: var(--border-strong); }
  .rtl-track::after { content: ''; position: absolute; left: 0; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
  .rtl-track + .rtl-track { margin-top: 0; padding-top: 34px; }
  .rtl-track + .rtl-track::after { top: 39px; }
  .rtl-track .rtl { padding-left: 0 !important; padding-right: 0; }
  .rtl-track .rtl::before { display: none; }
  .rtl-track .rtl-row::before { left: -26px; right: auto; }
  .rtl-track .rtl-head, .rtl-track .rtl-note, .rtl-track .rtl-alert { position: relative; }

  .rtl-shared .rtl { padding-left: 26px; }
  .rtl-shared .rtl::before { left: 4px; }
  .rtl-shared .rtl-head { justify-content: flex-start; }
  .rtl-shared .rtl-row { grid-template-columns: 1fr auto; }
  .rtl-shared .rtl-row::before { left: -26px; }
  .rtl-shared .rtl-row .when { grid-column: 1; grid-row: 1; text-align: left; }
  .rtl-shared .rtl-row .flag { grid-column: 2; grid-row: 1; justify-self: end; margin-top: 0; }
  .rtl-shared .rtl-row .what { grid-column: 1 / -1; grid-row: 2; }
  .rtl-fork::before { left: 4px; right: auto; width: 2px; border: 0; background: var(--border-strong); border-radius: 0; }
}

/* two cohort applications side by side inside one app card */
.app-links { display: flex; flex-wrap: wrap; gap: 10px; }
.app-links .btn { flex: 1 1 auto; justify-content: center; }

/* recruitment notice on a timeline branch */
.rtl-alert {
  font-size: .84rem; line-height: 1.5; color: var(--ink);
  background: var(--accent-soft); border: 1px solid var(--accent-soft-bd);
  border-radius: var(--radius); padding: 9px 13px; margin: 0 0 15px;
}

/* Named contacts, sat with the application buttons they relate to so an
   applicant with a question does not have to hunt for the chapter address. */
.apply-contact {
  margin-top: 16px; padding: 12px 14px;
  background: var(--accent-soft); border: 1px solid var(--accent-soft-bd);
  border-left: 3px solid var(--accent); border-radius: var(--radius);
  font-size: .84rem; line-height: 1.6;
}
.apply-contact .k {
  display: block; margin-bottom: 4px;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--accent-ink);
}
.apply-contact .k i { margin-right: 6px; }
.apply-contact a {
  display: block; color: var(--ink); word-break: break-word;
  text-decoration: underline; text-underline-offset: 2px;
  text-decoration-color: var(--accent-soft-bd);
  transition: color .16s ease, text-decoration-color .16s ease;
}
@media (hover: hover) {
  .apply-contact a:hover { color: var(--accent-ink); text-decoration-color: var(--accent); }
}

/* "Project Horizon" - forward-looking work, lifted out of the surrounding
   body copy so it reads as a callout rather than another paragraph. */
.track-card .note.horizon {
  margin-top: 16px; padding: 14px 16px; border-top: 0;
  background: var(--accent-soft); border: 1px solid var(--accent-soft-bd);
  border-left: 3px solid var(--accent); border-radius: var(--radius);
  color: var(--ink);
}
.track-card .note.horizon strong { color: var(--accent-ink); display: block; margin-bottom: 5px;
  font-family: var(--mono); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; }