/* Apsu Deep website system v1.2 (Astra v1.1 base, merged with Claude additions, 29 Sept 2026).
   Original brand values and artwork unchanged.
   Breakpoints and @font-face descriptors must be literal CSS: custom properties
   cannot be substituted there. Their values mirror the tokens below. */
@font-face { font-family: "Manrope"; src: url("./fonts/manrope-variable.woff2") format("woff2"); font-style: normal; font-weight: 200 800; font-display: swap; }
:root {
  --apsu-navy: #071B3F;
  --apsu-red: #F02129;
  --apsu-yellow: #FEC205;
  --apsu-blue: #026CDA;
  --apsu-white: #FFFFFF;
  --font-brand: "Manrope", system-ui, sans-serif;
  --logo-width: 280px;
  --breakpoint-mobile: 48rem;
  --dark-surface-page: #071B3F;
  --dark-surface-band: #0C244A;
  --dark-surface-card: #122D54;
  --dark-surface-raised: #1B385F;
  --dark-text-primary: #F6F8FC;
  --dark-text-secondary: #C2CDDE;
  --dark-text-caption: #A3B2C8;
  --dark-text-link: #B9D8FF;
  --dark-text-link-hover: #FFFFFF;
  --dark-border-subtle: #29466C;
  --dark-border-control: #7C94B5;
  --dark-focus: #B9D8FF;
  --light-surface-page: #F6F8FC;
  --light-surface-band: #EEF2F7;
  --light-surface-card: #FFFFFF;
  --light-text-primary: #071B3F;
  --light-text-secondary: #425571;
  --light-text-caption: #566781;
  --light-text-link: #005BBF;
  --light-text-link-hover: #004EAB;
  --light-border-subtle: #D6DFEB;
  --light-border-control: #6A7C95;
  --light-focus: #005BBF;
  --dark-status-error: #FF9B9B;
  --dark-status-success: #6FD6A0;
  --light-status-error: #C0141C;
  --light-status-success: #127046;
  --primary-text: #071B3F;
  --primary-fill: #FEC205;
  --primary-hover-fill: #FFD24D;
  --primary-active-fill: #FEC205;
  --primary-border: #071B3F;
  --space-0: 0rem;
  --space-4: 0.25rem;
  --space-8: 0.5rem;
  --space-12: 0.75rem;
  --space-16: 1rem;
  --space-24: 1.5rem;
  --space-32: 2rem;
  --space-40: 2.5rem;
  --space-48: 3rem;
  --space-64: 4rem;
  --space-72: 4.5rem;
  --space-80: 5rem;
  --space-96: 6rem;
  --space-112: 7rem;
  --space-128: 8rem;
  --type-hero-size: 4.5rem;
  --type-hero-line: 5rem;
  --type-hero-mobile-size: 2.75rem;
  --type-hero-mobile-line: 3.25rem;
  --type-hero-weight: 600;
  --type-hero-tracking: -0.035em;
  --type-h1-size: 3.5rem;
  --type-h1-line: 4rem;
  --type-h1-mobile-size: 2.25rem;
  --type-h1-mobile-line: 2.75rem;
  --type-h1-weight: 600;
  --type-h1-tracking: -0.03em;
  --type-h2-size: 2.5rem;
  --type-h2-line: 3rem;
  --type-h2-mobile-size: 1.875rem;
  --type-h2-mobile-line: 2.375rem;
  --type-h2-weight: 600;
  --type-h2-tracking: -0.025em;
  --type-h3-size: 1.75rem;
  --type-h3-line: 2.25rem;
  --type-h3-mobile-size: 1.5rem;
  --type-h3-mobile-line: 2rem;
  --type-h3-weight: 600;
  --type-h3-tracking: -0.015em;
  --type-h4-size: 1.375rem;
  --type-h4-line: 1.875rem;
  --type-h4-mobile-size: 1.25rem;
  --type-h4-mobile-line: 1.75rem;
  --type-h4-weight: 600;
  --type-h4-tracking: -0.01em;
  --type-lead-size: 1.25rem;
  --type-lead-line: 2rem;
  --type-lead-mobile-size: 1.125rem;
  --type-lead-mobile-line: 1.75rem;
  --type-lead-weight: 400;
  --type-lead-tracking: 0em;
  --type-body-size: 1rem;
  --type-body-line: 1.75rem;
  --type-body-mobile-size: 1rem;
  --type-body-mobile-line: 1.75rem;
  --type-body-weight: 400;
  --type-body-tracking: 0em;
  --type-small-size: 0.875rem;
  --type-small-line: 1.375rem;
  --type-small-mobile-size: 0.875rem;
  --type-small-mobile-line: 1.375rem;
  --type-small-weight: 400;
  --type-small-tracking: 0em;
  --type-eyebrow-size: 0.75rem;
  --type-eyebrow-line: 1.125rem;
  --type-eyebrow-mobile-size: 0.75rem;
  --type-eyebrow-mobile-line: 1.125rem;
  --type-eyebrow-weight: 700;
  --type-eyebrow-tracking: 0.12em;
  --type-navigation-size: 0.875rem;
  --type-navigation-line: 1.25rem;
  --type-navigation-mobile-size: 0.875rem;
  --type-navigation-mobile-line: 1.25rem;
  --type-navigation-weight: 600;
  --type-navigation-tracking: 0em;
  --type-button-size: 0.875rem;
  --type-button-line: 1.25rem;
  --type-button-mobile-size: 0.875rem;
  --type-button-mobile-line: 1.25rem;
  --type-button-weight: 700;
  --type-button-tracking: 0em;
  --content-max: 75rem;
  --text-max: 65ch;
  --heading-max: 18ch;
  --section-padding: var(--space-112);
  --section-compact-padding: var(--space-72);
  --gutter: var(--space-48);
  --card-padding: var(--space-32);
  --radius-button: 6px;
  --radius-card: 12px;
  --target-min: 3rem;
  --focus-width: 3px;
  --focus-offset: 4px;
  --border-width: 1px;
  --link-underline: 1.5px;
  --link-underline-hover: 2.5px;
  --link-offset: 4px;
  --duration: 160ms;
  --duration-reduced: 0ms;
  --easing: ease;
  --rule-width: 3rem;
  --rule-height: 3px;
  --marker-size: 8px;
  --nav-logo-width: 220px;
  --layout-gap: var(--space-48);
  --hero-columns: 1.55fr 1fr;
  --grid-columns: repeat(2, minmax(0, 1fr));
  --grid-columns-mobile: minmax(0, 1fr);
  --table-min-width: 42rem;
  --section-scroll-margin: var(--space-32);
  --weight-regular: 400;
  --weight-semibold: 600;
  --text-selection-bg: #B9D8FF;
  --text-selection-fg: #071B3F;
}
:root, [data-theme="dark"] {
  --surface-page: var(--dark-surface-page);
  --surface-band: var(--dark-surface-band);
  --surface-card: var(--dark-surface-card);
  --surface-raised: var(--dark-surface-raised);
  --text-primary: var(--dark-text-primary);
  --text-secondary: var(--dark-text-secondary);
  --text-caption: var(--dark-text-caption);
  --text-link: var(--dark-text-link);
  --text-link-hover: var(--dark-text-link-hover);
  --border-subtle: var(--dark-border-subtle);
  --border-control: var(--dark-border-control);
  --focus: var(--dark-focus);
  --status-error: var(--dark-status-error);
  --status-success: var(--dark-status-success);
  --surface-current: var(--surface-page);
}
[data-theme="light"] {
  --surface-page: var(--light-surface-page);
  --surface-band: var(--light-surface-band);
  --surface-card: var(--light-surface-card);
  --surface-raised: var(--light-surface-card);
  --text-primary: var(--light-text-primary);
  --text-secondary: var(--light-text-secondary);
  --text-caption: var(--light-text-caption);
  --text-link: var(--light-text-link);
  --text-link-hover: var(--light-text-link-hover);
  --border-subtle: var(--light-border-subtle);
  --border-control: var(--light-border-control);
  --focus: var(--light-focus);
  --status-error: var(--light-status-error);
  --status-success: var(--light-status-success);
  --surface-current: var(--surface-page);
}
* { box-sizing: border-box; }
html { font-family: var(--font-brand); }
body { margin: 0; background: var(--surface-page); color: var(--text-primary); }
[data-theme] { background: var(--surface-current); color: var(--text-primary); }
::selection { background: var(--text-selection-bg); color: var(--text-selection-fg); }
.apsu-logo { display: block; width: var(--logo-width); max-width: 100%; height: auto; }
.surface-page { --surface-current: var(--surface-page); background: var(--surface-current); }
.surface-band { --surface-current: var(--surface-band); background: var(--surface-current); }
.surface-card { --surface-current: var(--surface-card); background: var(--surface-current); }
.surface-raised { --surface-current: var(--surface-raised); background: var(--surface-current); }
.container { width: 100%; max-width: calc(var(--content-max) + var(--gutter) + var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-padding); scroll-margin-block-start: var(--section-scroll-margin); }
.section--compact { padding-block: var(--section-compact-padding); }
.prose { max-width: var(--text-max); }
.text-secondary { color: var(--text-secondary); }
.text-caption { color: var(--text-caption); }
.hero-title { max-width: var(--heading-max); }
h1,h2,h3,h4,p { margin: 0; }
.hero-title { font-size: var(--type-hero-size); line-height: var(--type-hero-line); font-weight: var(--type-hero-weight); letter-spacing: var(--type-hero-tracking); }
h1, .type-h1 { font-size: var(--type-h1-size); line-height: var(--type-h1-line); font-weight: var(--type-h1-weight); letter-spacing: var(--type-h1-tracking); }
h2, .type-h2 { font-size: var(--type-h2-size); line-height: var(--type-h2-line); font-weight: var(--type-h2-weight); letter-spacing: var(--type-h2-tracking); }
h3, .type-h3 { font-size: var(--type-h3-size); line-height: var(--type-h3-line); font-weight: var(--type-h3-weight); letter-spacing: var(--type-h3-tracking); }
h4, .type-h4 { font-size: var(--type-h4-size); line-height: var(--type-h4-line); font-weight: var(--type-h4-weight); letter-spacing: var(--type-h4-tracking); }
.lead { font-size: var(--type-lead-size); line-height: var(--type-lead-line); font-weight: var(--type-lead-weight); letter-spacing: var(--type-lead-tracking); }
body, .body { font-size: var(--type-body-size); line-height: var(--type-body-line); font-weight: var(--type-body-weight); letter-spacing: var(--type-body-tracking); }
.small { font-size: var(--type-small-size); line-height: var(--type-small-line); font-weight: var(--type-small-weight); letter-spacing: var(--type-small-tracking); }
.eyebrow { font-size: var(--type-eyebrow-size); line-height: var(--type-eyebrow-line); font-weight: var(--type-eyebrow-weight); letter-spacing: var(--type-eyebrow-tracking); }
.nav-link { font-size: var(--type-navigation-size); line-height: var(--type-navigation-line); font-weight: var(--type-navigation-weight); letter-spacing: var(--type-navigation-tracking); }
.button { font-size: var(--type-button-size); line-height: var(--type-button-line); font-weight: var(--type-button-weight); letter-spacing: var(--type-button-tracking); }
.eyebrow { text-transform: uppercase; color: var(--text-caption); }
.stack > * + * { margin-block-start: var(--space-24); }
.stack--tight > * + * { margin-block-start: var(--space-16); }
.stack > .text-link { display: inline-block; }
.card { --surface-current: var(--surface-card); background: var(--surface-current); border: var(--border-width) solid var(--border-subtle); border-radius: var(--radius-card); padding: var(--card-padding); }
.card--raised { --surface-current: var(--surface-raised); }
.card.surface-band { --surface-current: var(--surface-band); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-16); }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: var(--target-min); padding: var(--space-12) var(--space-24); border: var(--border-width) solid var(--border-control); border-radius: var(--radius-button); font-family: var(--font-brand); text-decoration: none; cursor: pointer; background: transparent; color: var(--text-primary); transition: background-color var(--duration) var(--easing), border-color var(--duration) var(--easing); }
.button--primary, .button--primary:visited { background: var(--primary-fill); color: var(--primary-text); border-color: var(--primary-border); }
.button--primary:hover { background: var(--primary-hover-fill); }
.button--primary:active { background: var(--primary-active-fill); text-decoration: underline; text-underline-offset: var(--link-offset); }
.button--secondary, .button--secondary:visited { color: var(--text-primary); }
.button--secondary:hover, .button--secondary:active { background: var(--surface-raised); }
.text-link, .text-link:visited { color: var(--text-link); text-decoration: underline; text-decoration-thickness: var(--link-underline); text-underline-offset: var(--link-offset); }
.text-link:hover, .text-link:active { color: var(--text-link-hover); text-decoration-thickness: var(--link-underline-hover); }
.nav-link, .nav-link:visited { color: var(--text-primary); display: inline-flex; align-items: center; min-height: var(--target-min); text-decoration: none; }
.nav-link:hover { text-decoration: underline; text-underline-offset: var(--link-offset); }
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: var(--focus-offset); }
.accent-rule { display: block; width: var(--rule-width); height: var(--rule-height); background: var(--apsu-blue); }
.accent-rule--red { background: var(--apsu-red); }
.accent-rule--yellow { background: var(--apsu-yellow); }
/* Accent rules are decorative; never put text inside them. No red/yellow text utility exists. */
/* Demo composition: useful building blocks, no theme-specific hard-coded values. */
.site-header { padding-block: var(--space-24); }
.site-header__inner { display: flex; justify-content: space-between; align-items: center; gap: var(--space-32); }
.site-header .apsu-logo { width: var(--nav-logo-width); }
.site-nav { display: flex; gap: var(--space-32); }
.hero-grid { display: grid; grid-template-columns: var(--hero-columns); align-items: start; gap: var(--layout-gap); }
.grid { display: grid; grid-template-columns: var(--grid-columns); gap: var(--space-24); }
.divider { border: none; border-block-start: var(--border-width) solid var(--border-subtle); margin-block: var(--space-32); }
.section-heading { margin-block-end: var(--space-40); }
.preview-note { margin-block-start: var(--space-40); }
.reference { padding: var(--space-24); border: var(--border-width) solid var(--border-control); border-radius: var(--radius-card); }
.reference summary { cursor: pointer; font-weight: var(--weight-semibold); min-height: var(--target-min); }
.table-scroll { overflow-x: auto; padding: var(--space-8); margin-block-start: var(--space-24); }
table { width: 100%; min-width: var(--table-min-width); border-collapse: collapse; font-size: var(--type-small-size); line-height: var(--type-small-line); }
th,td { text-align: left; padding: var(--space-12); border-block-end: var(--border-width) solid var(--border-subtle); }
th { font-weight: var(--weight-semibold); }
.token-chip { display: inline-block; width: var(--space-24); height: var(--space-24); border-radius: var(--radius-button); border: var(--border-width) solid var(--border-control); vertical-align: middle; margin-inline-end: var(--space-8); }
.token-chip--navy { background: var(--apsu-navy); }.token-chip--blue { background: var(--apsu-blue); }.token-chip--yellow { background: var(--apsu-yellow); }.token-chip--red { background: var(--apsu-red); }
.footer { padding-block: var(--space-40); }
@media (width < 48rem) { /* mirrors --breakpoint-mobile; CSS vars cannot be used in media queries */
 :root { --section-padding: var(--space-72); --section-compact-padding: var(--space-48); --gutter: var(--space-24); --card-padding: var(--space-24); --layout-gap: var(--space-32); --grid-columns: var(--grid-columns-mobile); --hero-columns: var(--grid-columns-mobile);  }
 :root { --type-hero-size: var(--type-hero-mobile-size); --type-hero-line: var(--type-hero-mobile-line); }
 :root { --type-h1-size: var(--type-h1-mobile-size); --type-h1-line: var(--type-h1-mobile-line); }
 :root { --type-h2-size: var(--type-h2-mobile-size); --type-h2-line: var(--type-h2-mobile-line); }
 :root { --type-h3-size: var(--type-h3-mobile-size); --type-h3-line: var(--type-h3-mobile-line); }
 :root { --type-h4-size: var(--type-h4-mobile-size); --type-h4-line: var(--type-h4-mobile-line); }
 :root { --type-lead-size: var(--type-lead-mobile-size); --type-lead-line: var(--type-lead-mobile-line); }
 :root { --type-body-size: var(--type-body-mobile-size); --type-body-line: var(--type-body-mobile-line); }
 :root { --type-small-size: var(--type-small-mobile-size); --type-small-line: var(--type-small-mobile-line); }
 :root { --type-eyebrow-size: var(--type-eyebrow-mobile-size); --type-eyebrow-line: var(--type-eyebrow-mobile-line); }
 :root { --type-navigation-size: var(--type-navigation-mobile-size); --type-navigation-line: var(--type-navigation-mobile-line); }
 :root { --type-button-size: var(--type-button-mobile-size); --type-button-line: var(--type-button-mobile-line); }
 .site-header__inner { flex-direction: column; align-items: flex-start; gap: var(--space-16); }
 .site-nav { flex-wrap: wrap; gap: var(--space-24); }
}
@media (prefers-reduced-motion: reduce) { :root { --duration: var(--duration-reduced); } }
/* Status messages (parked until a form exists). Always pair colour with words. */
.status--error { color: var(--status-error); }
.status--success { color: var(--status-success); }