/* ==========================================================================
   SITE SYSTEM 2026: shared components for every page on the new design.
   Source of truth: Figma "Homepage | Hero 1 | Desktop 1440 | Classic"
   (EQ5vs6l8ARkiiJ1YLCnUkV, node 372:9689). Reads the --sys-* roles in
   tokens.css only, so colour modes are token overrides, never new rules.
   The nav, utility bar and footer markup come from /js/chrome.js (one copy).
   ========================================================================== */

body.sys {
  background: var(--sys-bg);   /* plain page: no top-of-page wash (Megan, 2026-10-14) */
  color: var(--sys-ink);
  transition: background-color 450ms var(--ease-standard), color 450ms var(--ease-standard);
}
body.sys .site-grid__cols > span { border-color: var(--sys-grid); }
html { scroll-padding-top: var(--sys-nav-height); }
body.sys a:focus-visible,
body.sys button:focus-visible,
body.sys [tabindex]:focus-visible { outline-color: var(--sys-accent); }

/* Shared type roles */
.sys-detail { font: var(--sys-detail); text-transform: uppercase; color: var(--sys-secondary); }
.sys-h2 {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--sys-h2-size);
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--sys-heading);
}
.sys-h2--minor { font-size: var(--sys-minor-h2-size); line-height: 1.1; letter-spacing: -0.025em; }
.sys-slash { color: var(--sys-slash); }

/* ---- Nav (sticky; Figma "Nav (sticky)": 72px, name left, links right) ---- */
.page-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: transparent;
  box-shadow: 0 1px 0 transparent;
  transition: background-color var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard),
              -webkit-backdrop-filter var(--duration-base), backdrop-filter var(--duration-base);
}
/* system.js adds .is-scrolled once the page has moved: translucent + blur + hairline. */
.page-nav.is-scrolled {
  background: var(--sys-nav-scrolled);
  box-shadow: 0 1px 0 var(--sys-rule);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.page-nav__inner {
  height: var(--sys-nav-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.page-nav__name {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: var(--sys-nav-name);
  text-transform: uppercase;
  color: var(--sys-ink);      /* black text in Classic, white in Dark; the glyph carries the blue */
}
.page-nav__glyph { display: grid; place-items: center; width: 18px; height: 18px; color: var(--sys-accent); }
.page-nav__glyph svg { width: 17px; height: 17px; display: block; }
.page-nav__links { display: flex; gap: 32px; }
.page-nav__link {
  font: 500 15px/1 var(--font-detail);   /* Nitti Medium 15 (Figma 12, raised on review: 13, then 15) */
  text-transform: uppercase;
  color: var(--sys-secondary);
  transition: color var(--duration-base) var(--ease-standard);
}
.page-nav__link:hover,
.page-nav__link:focus-visible,
.page-nav__link[aria-current="page"] { color: var(--sys-ink); }

/* ---- Floating utility bar (bottom-left) + mode menu ---------------------- */
.util-bar {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 90;
  display: flex;
  gap: 2px;
  padding: 4px;
  border-radius: var(--radius-pill);
  background: var(--sys-util-bg);   /* opaque: one step off the page in every mode (tokens.css) */
  border: 1px solid var(--sys-util-border);
  box-shadow: 0 10px 30px -14px rgba(0, 0, 0, 0.35);
}
.util-bar__btn {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--sys-util-fg);
  transition: background-color var(--duration-base), color var(--duration-base);
}
.util-bar__btn svg { width: 18px; height: 18px; display: block; }
.util-bar__btn::after { content: ""; position: absolute; inset: -4px; } /* 44px hit area */
.util-bar__btn:hover,
.util-bar__btn[aria-expanded="true"],
.util-bar__btn[aria-pressed="true"] { color: var(--sys-ink); background: var(--sys-util-hover); }
.util-bar__btn:focus-visible { border-radius: 50%; }
.mode-menu {
  position: absolute;
  left: 0;
  bottom: 54px;
  width: 340px;
  padding: 10px;
  border-radius: 20px;
  background: var(--sys-menu-bg);
  color: var(--sys-menu-ink);
  border: 1px solid var(--sys-menu-highlight);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12), 0 28px 64px -20px rgba(0, 0, 0, 0.5);
}
.mode-menu[hidden] { display: none; }
.mode-menu__item {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 14px;
  align-items: center;
  width: 100%;
  padding: 12px;
  border-radius: 14px;
  text-align: left;
  color: var(--sys-menu-ink);
}
.mode-menu__item:hover,
.mode-menu__item:focus-visible,
.mode-menu__item[aria-checked="true"] { background: var(--sys-menu-highlight); }
.mode-menu__item:focus-visible { outline-offset: -2px; border-radius: 14px; }
/* one solid circle per mode (its page or primary colour) with a mid-grey
   hairline, so white and black both read on the dark menu */
.mode-menu__swatch { justify-self: center; width: 20px; height: 20px; border-radius: 50%; border: 1px solid #8E8E8E; }
.mode-menu__name { display: block; font-size: 16px; font-weight: var(--weight-semibold); line-height: 1.4; }
.mode-menu__caption { display: block; margin-top: 2px; font-size: 13.5px; font-weight: var(--weight-light); line-height: 1.4; color: var(--sys-menu-caption); }

/* ---- Text link: no arrows anywhere; a 1px rule under the label ------------ */
/* THE text link, sitewide (homepage, Work, About, case studies). A real
   underline (not a pseudo-element box), so a link shares the baseline of
   any text beside it. Two sizes: 18px, and --lg for closing rows. */
.text-link {
  font-size: 18px;
  font-weight: var(--weight-regular);
  line-height: 1.15;
  letter-spacing: 0;
  color: var(--sys-ink);
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  text-decoration-color: var(--sys-rule);
  transition: color var(--duration-base) var(--ease-standard), text-decoration-color var(--duration-base) var(--ease-standard);
}
.text-link:hover,
.text-link:focus-visible { color: var(--sys-accent); text-decoration-color: currentColor; }
.text-link--lg { font-size: clamp(20px, 0.6vw + 15.5px, 24px); letter-spacing: -0.01em; }

/* ---- Icon button (Figma "Icon Button / Arrow | Plus") --------------------- */
.icon-btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--sys-icon-bg);
  color: var(--sys-icon-fg);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}
.icon-btn svg { width: 20px; height: 20px; display: block; transition: transform 420ms var(--ease-standard); }

/* ---- Section heading row (H2 + optional text link on the baseline) -------- */
.sys-head { display: flex; justify-content: space-between; align-items: last baseline; gap: 24px; margin-bottom: 40px; }   /* heading and link share a baseline */
.sys-head--minor { margin-bottom: 24px; }

/* ---- Project card (featured) ---------------------------------------------- */
.pcard { display: block; color: var(--sys-ink); }
.pcard__media {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 584 / 389.33;
  border-radius: var(--sys-radius-card);
  background: var(--sys-media-bg);
}
.pcard__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity 420ms var(--ease-standard); }
.pcard__alt { position: absolute; inset: 0; opacity: 0; }
.pcard__icon { position: absolute; top: 18px; right: 18px; z-index: 2; }
.pcard__meta { display: block; margin-top: 18px; font: var(--sys-detail); text-transform: uppercase; color: var(--sys-secondary); }
.pcard__meta .sys-slash { margin: 0 0.35em; }
.pcard__title {
  display: block;
  margin-top: 6px;
  font-size: 26px;
  font-weight: var(--weight-regular);
  line-height: 1.2;
  letter-spacing: -0.015em;
}
@media (hover: hover) and (pointer: fine) {
  .pcard:hover .pcard__alt { opacity: 1; }
  .pcard:hover .icon-btn svg { transform: rotate(45deg); }
}
.pcard:focus-visible .pcard__alt { opacity: 1; }
.pcard:focus-visible { outline-offset: 6px; border-radius: var(--sys-radius-card); }

/* ---- Project tile (more work / archive): title only, whole card shrinks --- */
.ptile__btn { display: block; width: 100%; text-align: left; color: var(--sys-ink); }
.ptile__media {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 1;
  border-radius: var(--sys-radius-tile);
  background: var(--sys-media-bg);
  transition: transform 500ms var(--ease-standard);
}
.ptile__media img,
.ptile__media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.ptile__media video { pointer-events: none; }
/* projects.js fit: "contain": the whole artwork on its own white ground */
.ptile__media.is-contain { background: #FFFFFF; }
.ptile__media.is-contain img,
.ptile__media.is-contain video { object-fit: contain; padding: 0 8%; }
/* Artwork on a white / very light ground (projects.js "edge") gets a hairline,
   drawn over the image so the radius stays clean. Other artwork has none. */
.has-edge::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border: 1px solid var(--sys-rule);
  border-radius: inherit;
  pointer-events: none;
}
.ptile__icon { position: absolute; top: 14px; right: 14px; z-index: 2; }
.ptile__title { display: block; margin-top: 14px; font-size: 18px; font-weight: var(--weight-regular); line-height: 1.15; }
@media (hover: hover) and (pointer: fine) {
  .ptile__btn:hover .ptile__media { transform: scale(0.965); }
  .ptile__btn:hover .icon-btn svg { transform: rotate(180deg); }
}
.ptile__btn:focus-visible .ptile__media { transform: scale(0.965); }
.ptile__btn:focus-visible { outline-offset: 6px; border-radius: var(--sys-radius-tile); }

/* ---- Project modal: a condensed case study --------------------------------- */
.pmodal {
  width: min(1120px, calc(100vw - 32px));
  height: min(900px, calc(100dvh - 32px));
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  border-radius: 24px;
  background: var(--sys-modal-bg);
  color: var(--sys-ink);
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--sys-rule), 0 40px 80px -30px rgba(0, 0, 0, 0.6);
}
.pmodal::backdrop { background: var(--sys-scrim); }
.pmodal__scroll { height: 100%; overflow-y: auto; overscroll-behavior: contain; padding: 72px 80px 80px 72px; scrollbar-width: none; }
.pmodal__scroll::-webkit-scrollbar { display: none; }
.pmodal__close {
  position: absolute;
  top: 16px;
  right: 20px;
  z-index: 3;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--sys-ink);
  transition: background-color var(--duration-base);
}
.pmodal__close svg { width: 26px; height: 26px; }
.pmodal__close:hover,
.pmodal__close:focus-visible { background: color-mix(in srgb, var(--sys-ink) 9%, transparent); }  /* visible on the modal in both modes */
.pmodal__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 32px; flex-wrap: wrap; }
.pmodal__kicker { font: var(--sys-detail-14); text-transform: uppercase; color: var(--sys-ink); margin-bottom: 8px; }
/* External links carry an arrow-up-right; the label + icon is the whole link. */
.text-link--ext { display: inline-flex; text-decoration: none; flex-direction: row; align-items: center; gap: 6px; flex-wrap: wrap; padding-bottom: 6px; border-bottom: 1px solid var(--sys-rule); }
.text-link--ext:hover, .text-link--ext:focus-visible { border-bottom-color: currentColor; }
.text-link__ext { width: 16px; height: 16px; flex: none; }
.pmodal__head .text-link { margin-bottom: 6px; }
.pmodal__title { font-size: var(--sys-statement-size); font-weight: var(--weight-regular); line-height: 1.15; letter-spacing: -0.02em; color: var(--sys-heading); }
.pmodal__rule { margin: 32px 0 0; border: 0; border-top: 1px solid var(--sys-rule); }
.pmodal__intro { margin-top: 32px; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.pmodal__statement { font-size: 28px; font-weight: var(--weight-regular); line-height: 1.35; color: var(--sys-ink); }
.pmodal__media { display: grid; gap: 32px; margin-top: 56px; }
.pmodal__media img,
.pmodal__media video { display: block; width: 100%; height: auto; border-radius: var(--sys-radius-media); border: 1px solid var(--sys-rule); background: var(--sys-media-bg); }
.pmodal__media figure { margin: 0; }
.pmodal__media figcaption { margin-top: 16px; font: var(--sys-detail-14); text-transform: uppercase; color: var(--sys-secondary); }
/* designed scrollbar: a slim rail and a draggable thumb */
.pmodal__bar { position: absolute; right: 10px; top: 84px; bottom: 24px; width: 14px; z-index: 3; cursor: pointer; }
.pmodal__bar[hidden] { display: none; }
.pmodal__bar::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; border-radius: 2px; background: color-mix(in srgb, var(--sys-ink) 8%, transparent); }
.pmodal__thumb { position: absolute; left: 50%; top: 0; width: 4px; margin-left: -2px; border-radius: 4px; background: color-mix(in srgb, var(--sys-ink) 38%, transparent); touch-action: none; transition: width 160ms, margin 160ms, background-color 160ms; }
.pmodal__bar:hover .pmodal__thumb,
.pmodal__bar.is-drag .pmodal__thumb { width: 8px; margin-left: -4px; background: color-mix(in srgb, var(--sys-ink) 62%, transparent); }
@media (max-width: 839px) {
  .pmodal { border-radius: 16px; }
  .pmodal__scroll { padding: 72px 28px 28px 20px; }
  .pmodal__bar { right: 4px; top: 76px; }
  .pmodal__rule { margin-top: 24px; }
  .pmodal__intro { margin-top: 24px; }
  .pmodal__statement { font-size: 22px; }
  .pmodal__media { margin-top: 40px; gap: 20px; }
}

/* ---- Hover reveal (decorative; mouse/trackpad only, never needed) ---------- */
.reveal { position: absolute; inset: 0; pointer-events: none; z-index: 30; }
.reveal__card {
  position: absolute;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: translateY(24px) scale(0.7);
  transition: opacity 240ms var(--ease-standard) calc(var(--i) * 70ms),
              transform 560ms cubic-bezier(.2, 1.35, .4, 1) calc(var(--i) * 70ms),
              translate 400ms var(--ease-standard);
}
.reveal.is-on .reveal__card { opacity: 1; transform: translateY(0) scale(1) rotate(var(--r)); }
.reveal.is-out .reveal__card {
  opacity: 0;
  transform: translateY(40px) scale(0.85) rotate(calc(var(--r) * -2.4));
  transition: opacity 320ms var(--ease-standard) calc(var(--i) * 40ms), transform 520ms var(--ease-standard) calc(var(--i) * 40ms);
}
.reveal__card img { width: 100%; height: 100%; object-fit: cover; display: block; }
html:not(.motion-ok) .reveal__card { transition: none; }

/* ---- Footer: "Always Learning" (sitewide) ---------------------------------
   The panel starts inset with rounded corners and grows to full bleed as it
   scrolls in (--p: 1 entering, 0 filling the screen, set by system.js). Both
   lines are one size, fitted to the content column, and stretch vertically. */
.page-footer-wrap { position: relative; z-index: 1; display: flex; min-height: 100vh; overflow-x: clip; }
.page-footer {
  --p: 0;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--sys-footer-bg);
  color: var(--sys-footer-hi);
  clip-path: inset(calc(var(--p) * 6%) calc(var(--p) * 5%) 0 round calc(var(--p) * 56px));
  transition: background-color 450ms var(--ease-standard);
}
.page-footer > .container { flex: 1; display: flex; flex-direction: column; width: 100%; padding-top: 72px; padding-bottom: 76px; }
.page-footer__phrase {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 72px;
  font-weight: var(--weight-semibold);
  letter-spacing: -0.045em;
  user-select: none;
  -webkit-user-select: none;
}
.page-footer__line { display: flex; width: max-content; white-space: nowrap; font-size: var(--sys-footer-phrase); line-height: 0.8; }
.page-footer__line:first-child { padding-top: 0.3em; }
.page-footer__line + .page-footer__line { margin-top: 0.3em; }
.page-footer__line:last-child { padding-bottom: 0.2em; }
.page-footer__line > span { display: inline-block; transform-origin: 50% 100%; transform: scaleY(1.22); transition: transform 260ms cubic-bezier(.2, 1.5, .4, 1); }
.page-footer__dim { color: var(--sys-footer-dim); }
.page-footer__base {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--sys-footer-rule);
  font: var(--sys-detail);
  text-transform: uppercase;
}
.page-footer__links { display: flex; gap: 28px; }
.page-footer a { color: var(--sys-footer-hi); transition: color var(--duration-base); }
.page-footer a:hover { color: #BEDEFF; }
.page-footer :focus-visible { outline-color: var(--sys-footer-hi); }
html:not(.motion-ok) .page-footer { clip-path: none; }
html:not(.motion-ok) .page-footer__line > span { transition: none; }

/* ---- Credits row (above the footer) ---------------------------------------- */
.credits { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 22px 0; border-top: 1px solid var(--sys-rule); }
.credits__lead { font-size: 16px; font-weight: var(--weight-semibold); line-height: 1.5; color: var(--sys-ink); }
.credits__type { font: var(--sys-detail); text-transform: uppercase; color: var(--sys-secondary); }
.credits__type a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--sys-slash); transition: color var(--duration-base); }
.credits__type a:hover,
.credits__type a:focus-visible { color: var(--sys-accent); text-decoration-color: currentColor; }

/* ---- Responsive ---------------------------------------------------------------- */
@media (max-width: 839px) {
  .page-nav__links { gap: 20px; }
  .util-bar { left: 12px; bottom: 12px; }
  .util-bar__btn { width: 44px; height: 44px; }
  .mode-menu { width: min(340px, calc(100vw - 24px)); bottom: 62px; }
  .sys-head { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 32px; }
  .pcard__media { aspect-ratio: 3 / 2; }
  .pcard__icon { top: 14px; right: 14px; }
  .pcard__meta { margin-top: 14px; }
  .pcard__title { font-size: 22px; }
  .ptile__icon { top: 8px; right: 8px; width: 32px; height: 32px; }
  .ptile__icon svg { width: 16px; height: 16px; }
  .ptile__title { margin-top: 10px; font-size: 16px; line-height: 1.3; }
  .page-footer-wrap { min-height: 0; }
  .page-footer > .container { padding-top: 48px; padding-bottom: 84px; }
  .page-footer__phrase { padding-bottom: 32px; }
  /* Phones: the page ends before an inset panel could open up, so the footer
     is full width from the start (same type, colour and stretch). */
  .page-footer { clip-path: none; }
  /* plain lettering on phones (system.js warps it only under a finger) */
  .page-footer__line > span { transform: scaleY(1); }
  .page-footer__line + .page-footer__line { margin-top: 0.08em; }
  .page-footer__line:first-child { padding-top: 0.1em; }
  .page-footer__base { flex-direction: column-reverse; gap: 14px; }
  .page-footer__links { gap: 20px; }
  .credits { flex-direction: column; align-items: flex-start; gap: 8px; padding-bottom: 40px; }   /* 40 to the footer, as on every page */
}

/* ==========================================================================
   CASE STUDIES: first pass onto the 2026 system. Content, layouts and imagery
   are unchanged (case-study.css). The shared nav and footer come from
   chrome.js; here only the hero title grows to the homepage display scale,
   and text links lose their trailing arrows (sitewide rule: no arrows on
   text links; external links keep their arrow-up-right).
   ========================================================================== */
body.sys .cs-hero__title {
  font-size: var(--sys-hero-size);
  font-weight: var(--weight-semibold);
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--sys-ink);
  text-wrap: balance;
}
body.sys .cs-hero__kicker { margin-bottom: 16px; }
/* Case-study CTAs to the live artifact (View Prototype, View App, Try the
   Degree Planner): links, so they carry the sitewide text-link underline. */
body.sys .cs-cta__link { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; text-decoration-color: var(--sys-rule); transition: color var(--duration-base) var(--ease-standard), text-decoration-color var(--duration-base) var(--ease-standard); }
body.sys a.cs-cta__link:hover,
body.sys a.cs-cta__link:focus-visible { color: var(--sys-accent); text-decoration-color: currentColor; }
/* The closing CTA to the external artifact (ECE prototype, Degree Planner app):
   no panel, just the large text link with its arrow and a small note under it,
   sitting in the text column 32px under the last paragraph. The link wraps on
   narrow screens; the arrow nudges up-right on hover. */
body.sys .cs-cta--text { display: block; padding: 0; border: 0; border-radius: 0; background: none; }
body.sys .cs-prose + .cs-cta--text { margin-top: 32px; }
/* A CTA placed straight under a heading (Degree Planner outcome): close to the
   heading, then a clear break before the body copy. */
body.sys .cs-heading + .cs-cta--text { margin-top: 24px; }
body.sys .cs-cta--text + .cs-prose { margin-top: 40px; }
@media (max-width: 839px) { body.sys .cs-cta--text + .cs-prose { margin-top: 32px; } }
body.sys .cs-cta__textlink { white-space: normal; }
body.sys .cs-cta__textlink .cs-cta__arrow { display: inline-block; transition: transform var(--duration-base) var(--ease-standard); }
body.sys .cs-cta__textlink:hover .cs-cta__arrow,
body.sys .cs-cta__textlink:focus-visible .cs-cta__arrow { transform: translate(2px, -2px); }
body.sys .cs-cta__note { margin-top: 12px; font-size: 14px; font-weight: var(--weight-regular); line-height: 1.5; color: var(--sys-secondary); }
/* Next Case Study + View All Work: the homepage's card type (Nitti label,
   26px title) and THE text link, sharing one baseline. */
body.sys .case-next { border-top-color: var(--sys-rule); }
body.sys .case-next__inner { align-items: last baseline; }
body.sys .case-next__link { gap: 8px; }
body.sys .case-next__label { font: var(--sys-detail); text-transform: uppercase; color: var(--sys-secondary); }
body.sys .case-next__title { font-family: var(--font-body); font-size: 26px; font-weight: var(--weight-regular); line-height: 1.2; letter-spacing: -0.015em; color: var(--sys-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; text-decoration-color: var(--sys-rule); transition: color var(--duration-base) var(--ease-standard), text-decoration-color var(--duration-base) var(--ease-standard); }   /* a link, so it carries the text-link underline */
body.sys .case-next__arrow { display: none; }
body.sys .case-next__link:hover .case-next__title,
body.sys .case-next__link:focus-visible .case-next__title { color: var(--sys-accent); text-decoration-color: currentColor; }
@media (max-width: 839px) { body.sys .case-next__title { font-size: 22px; } }

/* ==========================================================================
   ABOUT: simplified onto the 2026 system (October 2026). Same content and
   ON/OFF behaviour (about.js); black and white with the accent blue only on
   the switch and the numbers. The full interactive redesign comes later.
   ========================================================================== */
/* Hero (Gabriel Valdivia reference): the H1 spans the full content width;
   below it the intro (left) and the photo stack (right) are vertically
   centred against each other. DOM order unchanged; phones keep about.css
   (H1, stack, intro). */
body.sys .about-hero__grid > .about-title { padding-top: 112px; }
body.sys .about-title {
  font-size: var(--sys-hero-size);
  font-weight: var(--weight-semibold);
  line-height: 1.1;
  letter-spacing: -0.035em;
  column-gap: 0.22em;
  color: var(--sys-ink);
}
body.sys .about-title__name { font-weight: var(--weight-semibold); }
/* A content-width black rule closes the H1: it sits close under the headline
   (40 / 32 / 24) and the intro + photos start twice that far below it
   (80 / 64 / 40), so the rule clearly belongs to the H1. */
body.sys .about-hero__grid > .about-title { padding-bottom: 40px; border-bottom: 1px solid var(--sys-rule-strong); }
body.sys .about-intro__lead { font-size: clamp(20px, 0.9vw + 15px, 28px); line-height: 1.3; letter-spacing: -0.01em; color: var(--sys-ink); }
body.sys .about-intro__lead + .about-intro__body { margin-top: 20px; }
body.sys .about-intro__body { font-size: clamp(16px, 0.2vw + 15px, 18px); line-height: 1.6; color: var(--sys-supporting); }
@media (min-width: 840px) {
  body.sys .about-hero__grid { grid-template-rows: auto auto; align-items: center; row-gap: 80px; }
  body.sys .about-hero__grid > .about-title { grid-column: 1 / -1; grid-row: 1; align-self: start; }
  body.sys .about-hero__grid > .about-intro { grid-column: 1 / span 6; grid-row: 2; margin-top: 0; padding-bottom: 0; }
  body.sys .about-hero__stacks { grid-column: 8 / span 5; grid-row: 2; padding-block: 0 48px; }
}
@media (min-width: 1200px) {
  body.sys .about-hero__stacks { grid-column: 9 / span 4; }
}
/* ON / OFF: clearly clickable toggles in the accent (filled = current) */
body.sys .about-switch {
  font-size: 0.36em;
  letter-spacing: 0;
  padding: 0.12em 0.9em 0.1em;
  border: 2px solid var(--sys-accent);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--sys-accent);
  top: 0.53em;   /* centres the pill on the headline's x-height (measured: 10.4px low at 70px, scales in em) */
}
body.sys .about-switch[aria-pressed="true"] { background: var(--sys-accent); color: var(--sys-bg); }
body.sys .about-switch[aria-pressed="false"] { border-color: var(--sys-secondary); color: var(--sys-secondary); }
body.sys .about-switch[aria-pressed="false"]:hover,
body.sys .about-switch[aria-pressed="false"]:focus-visible { border-color: var(--sys-accent); color: var(--sys-accent); }
body.sys .about-switch:focus-visible { border-radius: var(--radius-pill); }
/* Section headings: the homepage's minor heading */
body.sys .about-section-heading {
  font-size: var(--sys-minor-h2-size);
  font-weight: var(--weight-regular);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--sys-heading);
}
/* Approach to Work / Approach to Life: the homepage About callout's language.
   A strong rule above, 40px to the title, then six numbered rows with only the
   five rules BETWEEN them (32px row padding, as on the homepage). */
body.sys .about-principles { padding-block: 88px 0; }
body.sys .about-principles > .container { position: relative; padding-top: 40px; }
body.sys .about-principles > .container::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--page-margin);
  right: var(--page-margin);
  border-top: 1px solid var(--sys-rule-strong);
}
body.sys .about-section-heading { margin-bottom: 16px; }
body.sys .about-principles__list { display: block; }
body.sys .about-principle {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gutter);
  align-items: baseline;
  padding-block: 32px;
  border-top: 0;
}
body.sys .about-principle + .about-principle { border-top: 1px solid var(--sys-rule); }
body.sys .about-principle__num { grid-column: 1; grid-row: 1; font: 500 13px/1.35 var(--font-detail); color: var(--sys-accent); }
body.sys .about-principle__title { grid-column: 2 / span 6; grid-row: 1; font-size: 24px; line-height: 1.25; letter-spacing: -0.015em; color: var(--sys-ink); }
body.sys .about-principle--accent .about-principle__title { color: var(--sys-ink); }
body.sys .about-principle__desc { grid-column: 8 / -1; grid-row: 1; font-size: 16px; line-height: 1.5; color: var(--sys-supporting); }
/* Experience / Currently: hidden for launch, markup kept */
body.sys .about-info[hidden] { display: none; }
/* Closing: the homepage's black section rule, the statement at the hero
   size (it fills the content width without being stretched), then ONE
   baseline-aligned row: "Let's Connect" + an arrow pointing at the links
   (informational, not a link) on the left, Email / LinkedIn / Resume on the
   right. All four share the large link size (.text-link--lg). */
body.sys .about-cta { padding-block: var(--sys-section-y) 22px; }   /* last row to footer = the homepage credits row */
body.sys .about-cta__row {
  display: grid;
  gap: 40px;
  position: relative;
  padding-top: 40px;
}
/* the rule runs the content width (the row is a padded .container) */
body.sys .about-cta__row::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--page-margin);
  right: var(--page-margin);
  border-top: 1px solid var(--sys-rule-strong);
}
body.sys .about-cta__heading { font-size: var(--sys-hero-size); font-weight: var(--weight-semibold); line-height: 1.05; letter-spacing: -0.035em; color: var(--sys-ink); }
body.sys .about-cta__line { display: flex; justify-content: space-between; align-items: baseline; gap: 16px 32px; flex-wrap: wrap; }
body.sys .about-cta__connect { flex: none; display: inline-flex; align-items: baseline; gap: 0.4em; margin: 0; color: var(--sys-ink); }
body.sys .about-cta__arrows { display: inline-grid; align-self: center; position: relative; top: 0.15em; margin-left: 0.2em; transform: rotate(-90deg); }   /* top: centres it on the text's optical middle (cap + x-height), 3.7px below the line-box centre at 24px */
body.sys .about-cta__arrow-slot { height: auto; font-size: inherit; }
body.sys .about-cta__arrow--vector { width: 0.5em; height: 0.6em; margin: 0; background: var(--sys-accent); }
body.sys .about-cta__links { display: flex; align-items: baseline; gap: 32px; }
@media (max-width: 1199px) { body.sys .about-hero__grid > .about-title { padding-top: 96px; } }
@media (min-width: 840px) and (max-width: 1199px) {
  body.sys .about-hero__grid > .about-title { padding-bottom: 32px; }
  body.sys .about-hero__grid { row-gap: 64px; }
}
@media (max-width: 839px) {
  body.sys .about-hero__grid > .about-title { padding-top: 48px; padding-bottom: 24px; }
  body.sys .about-hero__grid > .about-intro { grid-column: 1 / -1; margin-top: 0; }
  /* phone rhythm: the site's 40px step. Rule 40 stack 40 intro 40 Approach
     rule, last principle 40 closing rule, contact links 40 footer. The stack
     is centred in the content column. */
  body.sys .about-hero__stacks { padding-block: 40px; justify-self: center; position: relative; left: 9px; }   /* left: the fanned cards lean left; this centres them optically (measured) */
  body.sys .about-hero__grid > .about-intro { padding-bottom: 0; }
  body.sys .about-principles { padding-block: 40px 0; }
  body.sys .about-principles > .container { padding-top: 32px; }
  body.sys .about-cta { padding-block: 40px; }
  /* the links sit BELOW "Let's Connect" here, so the arrow points down */
  body.sys .about-cta__arrows { transform: none; top: 0; }
  body.sys .about-section-heading { margin-bottom: 24px; }
  body.sys .about-principle { grid-template-columns: 40px minmax(0, 1fr); column-gap: 0; row-gap: 6px; padding-block: 20px; }
  body.sys .about-principle__num { grid-row: 1 / span 2; }
  body.sys .about-principle__title { grid-column: 2; font-size: 20px; }
  body.sys .about-principle__desc { grid-column: 2; grid-row: 2; }
  body.sys .about-cta__row { gap: 32px; padding-top: 32px; }
  body.sys .about-cta__line { flex-direction: column; align-items: flex-start; }
  body.sys .about-cta__links { flex-wrap: wrap; gap: 12px 28px; }
}

/* ==========================================================================
   CASE STUDY: BOLD EDITORIAL PASS (reference implementation on K–12 only,
   body.cs-bold; review before it moves to the other three). Same copy,
   order, metrics and images. Bigger type, and every artwork on the full
   content width in a simpler, repeatable grid: narrative column, then the
   visual at full width; pairs and sets keep their own proportions.
   ========================================================================== */
body.cs-bold .cs-hero__title { font-size: clamp(48px, 5.6vw + 10px, 100px); letter-spacing: -0.04em; line-height: 1; }
body.cs-bold .cs-hero__statement { font-size: clamp(24px, 1.1vw + 18px, 36px); line-height: 1.25; letter-spacing: -0.015em; }
body.cs-bold .cs-heading { font-size: clamp(30px, 2vw + 14px, 48px); line-height: 1.1; letter-spacing: -0.025em; }
body.cs-bold .cs-heading { max-width: var(--cs-measure); }   /* never wider than the prose under it (790px, 655px on the narrow Degree Planner) */
/* Editorial spacing for the larger type (K-12): label 16 -> heading 48 -> body,
   body 88 -> first artifact (72 / 56 on tablet, 12 / 28 / 48 on phones) */
body.cs-bold .cs-label { margin-bottom: 16px; }
body.cs-bold .cs-split { row-gap: 48px; }   /* Challenge: heading -> text + image, same 48 */
body.cs-bold .cs-heading + .cs-prose { margin-top: 48px; }
/* Key Insights icons carry the mode's accent */
body.cs-bold .cs-insight__eyebrow > span { color: var(--sys-accent); }
body.cs-bold .case-study { --cs-text-media: 88px; }
@media (max-width: 1199px) {
  body.cs-bold .cs-heading + .cs-prose { margin-top: 40px; }
  body.cs-bold .cs-split { row-gap: 40px; }
  body.cs-bold .case-study { --cs-text-media: 72px; }
}
@media (max-width: 839px) {
  body.cs-bold .cs-label { margin-bottom: 12px; }
  body.cs-bold .cs-hero__kicker { margin-bottom: 12px; }
  body.cs-bold .cs-heading + .cs-prose { margin-top: 28px; }
  body.cs-bold .cs-split { row-gap: 28px; }
  body.cs-bold .cs-split > .cs-split__media { margin-top: calc(var(--cs-text-media) - 28px); }   /* + the row gap = text -> media */
  body.cs-bold .case-study { --cs-text-media: 48px; }
  /* the facts' own first rule is the divider; drop the column's extra one */
  body.cs-bold .cs-hero .cs-meta { padding-top: 0; border-top: 0; }
}
/* chapter rules (under the hero, before the Launch) and the project nav rule:
   the site's strong section rule, black in Classic */
body.cs-bold .cs-rule { background-image: linear-gradient(var(--sys-rule-strong), var(--sys-rule-strong)); }
body.cs-bold .case-next { border-top-color: var(--sys-rule-strong); }
/* stat cards: equal cells; the figure and its line are one group, centred
   both ways, 12px apart; the line drops to Regular so the figure leads */
body.cs-bold .cs-stat { display: flex; align-items: center; justify-content: center; padding: 40px 24px; }
body.cs-bold .cs-stat__text { display: flex; flex-direction: column; align-items: center; gap: 12px; font-size: 18px; font-weight: var(--weight-regular); line-height: 1.35; text-wrap: balance; }
body.cs-bold .cs-stat__number { font-size: clamp(36px, 2.6vw + 14px, 60px); line-height: 1; letter-spacing: -0.02em; }
body.cs-bold .cs-result__number { font-size: clamp(40px, 2vw + 20px, 56px); }
/* the launch proof figures are phrases ("Approved + Published"), one step
   smaller than the numeric stats so each holds one line */
body.cs-bold .cs-outcome--launch .cs-stat__number { font-size: clamp(30px, 2.2vw + 12px, 44px); text-wrap: balance; }
body.cs-bold .cs-reflection__quote { font-size: clamp(28px, 1.6vw + 18px, 42px); line-height: 1.2; }
body.cs-bold .cs-insight__heading { font-size: 22px; }
/* Colour: black / white / grey only; project imagery supplies the colour.
   The case-study colour roles are re-pointed here, so every blue tile, rule,
   number, band and label turns neutral without touching case-study.css. */
body.cs-bold {
  --color-blue-text: var(--sys-ink);
  --color-blue-gray: var(--sys-supporting);
  --color-tile-bg: var(--sys-band);
  --color-tile-border: var(--sys-rule);
  --color-band: var(--sys-band);
  --color-things-rule: var(--sys-rule);
  --color-light-blue: var(--sys-rule);
  --color-light-blue-50: var(--sys-band);
}
body.cs-bold .cs-reflection { background: var(--sys-ink); color: var(--sys-bg); }
body.cs-bold .cs-reflection__kicker,
body.cs-bold .cs-reflection__quote,
body.cs-bold .cs-reflection__note { color: var(--sys-bg); }
body.cs-bold .cs-insight { border-color: var(--sys-rule); }
/* Captions sit in the same columns as their artwork, so they can never run
   wider than the image they describe: a caption under a wide + narrow pair
   belongs to the wide image (8 of 12 columns) and wraps inside it. */
body.cs-bold .cs-caption { max-width: 100%; }
@media (min-width: 840px) {
  body.cs-bold .cs-grid > .cs-pair + .cs-caption { grid-column: 1 / span 8; }
}

/* Hero: title, then the summary on the left (8 cols) and the project details
   in a compact right-hand column, rows separated by thin rules. */
@media (min-width: 840px) {
  body.cs-bold .cs-hero .cs-grid > .cs-hero__head { grid-column: 1 / -1; grid-row: 1; margin-bottom: 40px; }
  body.cs-bold .cs-hero .cs-grid > .cs-hero__intro { grid-column: 1 / span 7; grid-row: 2; }
  body.cs-bold .cs-hero .cs-grid > .cs-meta { grid-column: 9 / -1; grid-row: 2; }
}
@media (min-width: 1200px) { body.cs-bold .cs-hero .cs-grid > .cs-hero__head { margin-bottom: 64px; } }
@media (max-width: 839px) { body.cs-bold .cs-hero .cs-grid > .cs-hero__head { margin-bottom: 24px; } }
body.cs-bold .cs-meta { gap: 0; }
body.cs-bold .cs-meta__item { padding-block: 16px; border-top: 1px solid var(--sys-rule); }
body.cs-bold .cs-meta__item:last-child { border-bottom: 1px solid var(--sys-rule); }
body.cs-bold .cs-meta dt { color: var(--sys-secondary); }
body.cs-bold .cs-meta dd { font-size: 16px; color: var(--sys-ink); }

@media (min-width: 840px) {
  /* every visual uses all 12 columns */
  body.cs-bold .cs-grid > .cs-media--left,
  body.cs-bold .cs-grid > .cs-media--right,
  body.cs-bold .cs-grid > .cs-media--inset,
  body.cs-bold .cs-grid > .cs-pair--left,
  body.cs-bold .cs-grid > .cs-pair--right,
  body.cs-bold .cs-grid > .cs-film--inset,
  body.cs-bold .cs-grid > .cs-caption--right,
  body.cs-bold .cs-grid > .cs-caption--inset,
  body.cs-bold .cs-grid > .cs-caption--offset { grid-column: 1 / -1; }
  /* wide + narrow pairs fill all 12 columns (8 + 4) */
  body.cs-bold .cs-pair > .cs-pair__narrow { grid-column: span 4; }
  /* Splits: the heading always shares its text's measure (never wider), and
     the media starts level with the text, 48px under the heading.
     Default (K-12's tall flow): text 6 columns, media 8-12.
     --wide (Student Dashboard's landscape "before"): text 5, media 6-12.
     --tall (Degree Planner's full result) keeps its own case-study.css split. */
  body.cs-bold .cs-split:not(.cs-split--wide):not(.cs-split--tall) > .cs-split__head { grid-column: 1 / span 6; grid-row: 1; }
  body.cs-bold .cs-split:not(.cs-split--wide):not(.cs-split--tall) > .cs-split__text { grid-column: 1 / span 6; grid-row: 2; }
  body.cs-bold .cs-split:not(.cs-split--wide):not(.cs-split--tall) > .cs-split__media { grid-column: 8 / -1; grid-row: 2; }
  body.cs-bold .cs-split--wide > .cs-split__head { grid-column: 1 / span 5; grid-row: 1; }
  body.cs-bold .cs-split--wide > .cs-split__text { grid-column: 1 / span 5; grid-row: 2; }
  body.cs-bold .cs-split--wide > .cs-split__media { grid-column: 6 / -1; grid-row: 2; }
  /* Project stories (ECE, Degree Planner): the hero CTA sits under the facts
     column, 32px below it */
  body.cs-bold .case-study--project .cs-hero .cs-grid > .cs-hero__intro { grid-row: 2 / span 2; }
  body.cs-bold .case-study--project .cs-hero .cs-grid > .cs-hero__action { grid-column: 9 / -1; grid-row: 3; }
  /* Shared outcome split (ECE + Degree Planner): the story column (label,
     headline, the external CTA + note, any paragraphs) on 5 columns, the proof
     tiles on columns 7-12, centred vertically against the story column.
     Tiles stack by default; .cs-proof--row puts two side by side (ECE) from
     1200px, where each tile is wide enough to keep its figure whole. */
  body.cs-bold .cs-outcome--split { align-items: center; }
  body.cs-bold .cs-outcome--split > .cs-outcome__head { grid-column: 1 / span 5; grid-row: 1; }
  body.cs-bold .cs-outcome--split > .cs-proof { grid-column: 7 / -1; grid-row: 1; grid-template-columns: 1fr; gap: var(--grid-gutter); }

  /* Key Insights: full content width. The statement and the intro (a reading
     measure) sit above a plain 2 x 2 card grid: no stagger, equal rows. */
  body.cs-bold .cs-grid > .cs-band__grid { grid-column: 1 / -1; }
  body.cs-bold .cs-band--tuck .cs-band__grid { grid-template-rows: none; row-gap: var(--grid-gutter); }
  body.cs-bold .cs-band--tuck .cs-band__head { grid-column: 1 / -1; grid-row: auto; padding-right: 0; margin-bottom: 0; }
  body.cs-bold .cs-band--tuck .cs-band__head .cs-heading { max-width: var(--cs-measure); text-wrap: balance; }   /* no wider than the intro */
  body.cs-bold .cs-band--tuck .cs-band__intro { grid-column: 1 / -1; grid-row: auto; max-width: var(--cs-measure); padding-right: 0; margin: 16px 0 32px; }
  body.cs-bold .cs-band--tuck .cs-insight,
  body.cs-bold .cs-band--tuck .cs-band__intro + .cs-insight { grid-column: auto; grid-row: auto; align-self: stretch; }
}
@media (min-width: 1200px) {
  body.cs-bold .cs-outcome--split > .cs-proof--row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}