@charset "UTF-8";
/* ==========================================================================
   ENG•UMI — Fakultas Teknik, Universitas Muslim Indonesia
   Theme: "Blueprint" — a technical-drawing visual language.

   The whole design is built from things engineers actually draw with:
   grid paper, dimension lines, corner registration marks, revision stamps,
   annotation callouts and monospace part numbers. Nothing is decorative for
   its own sake — every motif maps to a drafting convention.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Light is what a first visit gets, whatever the OS prefers. Declaring it
     here is what makes the browser's own chrome agree — scrollbars, select
     menus, date pickers and autofill all follow color-scheme, not our custom
     properties, and would otherwise paint dark over a light page. */
  color-scheme: light;

  /* -- brand ------------------------------------------------------------- */
  --blueprint-900: #061320;
  --blueprint-800: #0B1B2B;
  --blueprint-700: #102A40;
  --blueprint-600: #163A57;

  --steel-700: #0F5FA6;   /* primary — drafting ink blue */
  --steel-600: #1573C4;
  --steel-500: #2E8FDD;
  --steel-100: #E3F0FB;
  --steel-050: #F2F8FD;

  --amber-700: #B4541A;   /* accent — safety / annotation orange */
  --amber-600: #D9691F;
  --amber-500: #E88A3C;
  --amber-100: #FCEDE0;

  --verde-600: #1F7A5C;   /* success / environmental */
  --verde-100: #E4F3ED;
  --crimson-600: #B3261E;
  --crimson-100: #FBE9E7;

  /* -- neutrals ---------------------------------------------------------- */
  --ink-900: #0C1620;
  --ink-800: #16232F;
  --ink-700: #2A3B4D;
  --ink-600: #43596E;
  --ink-500: #64798E;
  --ink-400: #8FA3B5;
  --ink-300: #BECBD7;
  --ink-200: #DCE5EC;
  --ink-100: #EDF2F6;
  --ink-050: #F6F9FB;
  --paper:   #FFFFFF;

  /* -- semantic (light) --------------------------------------------------- */
  --bg:            var(--ink-050);
  --bg-raised:     var(--paper);
  --bg-sunken:     var(--ink-100);
  --bg-inverse:    var(--blueprint-800);
  --text:          var(--ink-900);
  --text-soft:     var(--ink-600);
  --text-faint:    var(--ink-500);
  --text-inverse:  #EAF2F8;
  --line:          var(--ink-200);
  --line-strong:   var(--ink-300);
  --grid-line:     rgba(15, 95, 166, .07);
  --primary:       var(--steel-700);
  --primary-hover: var(--steel-600);
  --primary-soft:  var(--steel-100);
  --accent:        var(--amber-600);
  --accent-soft:   var(--amber-100);
  --focus:         #1573C4;

  /* -- type -------------------------------------------------------------- */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", "Noto Sans", Arial, "Apple Color Emoji", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono",
               Consolas, "Liberation Mono", monospace;

  --step--2: clamp(.694rem, .68rem + .07vw, .735rem);
  --step--1: clamp(.833rem, .80rem + .16vw, .919rem);
  --step-0:  clamp(1rem, .95rem + .25vw, 1.125rem);
  --step-1:  clamp(1.2rem, 1.11rem + .45vw, 1.5rem);
  --step-2:  clamp(1.44rem, 1.29rem + .74vw, 2rem);
  --step-3:  clamp(1.728rem, 1.49rem + 1.19vw, 2.66rem);
  --step-4:  clamp(2.074rem, 1.70rem + 1.86vw, 3.55rem);
  --step-5:  clamp(2.488rem, 1.93rem + 2.79vw, 4.73rem);

  /* -- space ------------------------------------------------------------- */
  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4rem;
  --sp-9: 6rem;    --sp-10: 8rem;

  /* -- shape ------------------------------------------------------------- */
  --r-xs: 2px;  --r-sm: 4px;  --r-md: 8px;  --r-lg: 14px;  --r-xl: 22px;
  --r-full: 999px;

  --shadow-1: 0 1px 2px rgba(11, 27, 43, .06), 0 1px 3px rgba(11, 27, 43, .05);
  --shadow-2: 0 2px 6px rgba(11, 27, 43, .07), 0 6px 16px rgba(11, 27, 43, .06);
  --shadow-3: 0 8px 20px rgba(11, 27, 43, .10), 0 20px 44px rgba(11, 27, 43, .08);
  --shadow-focus: 0 0 0 3px rgba(21, 115, 196, .32);

  --ease: cubic-bezier(.32, .72, 0, 1);
  --dur:  .28s;

  --wrap: 1240px;
  --wrap-narrow: 800px;
  --header-h: 76px;

  /* Reader-adjustable via the accessibility panel. */
  --a11y-scale: 1;
  --a11y-spacing: 0;
}

/* -- dark ------------------------------------------------------------------ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg:           #070F18;
    --bg-raised:    #0E1B28;
    --bg-sunken:    #0A141F;
    --bg-inverse:   #050C14;
    --text:         #E6EEF6;
    --text-soft:    #A9BDCE;
    --text-faint:   #7E93A6;
    --text-inverse: #E6EEF6;
    --line:         #1D2E3E;
    --line-strong:  #2A3F53;
    --grid-line:    rgba(110, 175, 235, .08);
    --primary:      #4FA3E8;
    --primary-hover:#77BBF2;
    --primary-soft: #12283C;
    --accent:       #F0954D;
    --accent-soft:  #33200F;
    --focus:        #6BB6F0;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-2: 0 2px 8px rgba(0, 0, 0, .45);
    --shadow-3: 0 12px 32px rgba(0, 0, 0, .55);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:           #070F18;
  --bg-raised:    #0E1B28;
  --bg-sunken:    #0A141F;
  --bg-inverse:   #050C14;
  --text:         #E6EEF6;
  --text-soft:    #A9BDCE;
  --text-faint:   #7E93A6;
  --text-inverse: #E6EEF6;
  --line:         #1D2E3E;
  --line-strong:  #2A3F53;
  --grid-line:    rgba(110, 175, 235, .08);
  --primary:      #4FA3E8;
  --primary-hover:#77BBF2;
  --primary-soft: #12283C;
  --accent:       #F0954D;
  --accent-soft:  #33200F;
  --focus:        #6BB6F0;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-2: 0 2px 8px rgba(0, 0, 0, .45);
  --shadow-3: 0 12px 32px rgba(0, 0, 0, .55);
}

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
  font-size: calc(100% * var(--a11y-scale));
}

body {
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: calc(1.65 + var(--a11y-spacing));
  letter-spacing: calc(var(--a11y-spacing) * .04em);
  word-spacing: calc(var(--a11y-spacing) * .1em);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  overflow-x: hidden;
}

img, picture, svg, video, canvas { display: block; max-width: 100%; }
img, video { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: var(--primary); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--primary-hover); }
ul, ol { padding-inline-start: 1.25em; }
h1, h2, h3, h4, h5, h6 { line-height: 1.2; font-weight: 700; letter-spacing: -.018em; text-wrap: balance; }
p, li { text-wrap: pretty; }
:target { scroll-margin-top: calc(var(--header-h) + 2rem); }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--primary); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* --------------------------------------------------------------------------
   3. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */
.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 2.5rem, var(--wrap-narrow)); margin-inline: auto; }
@media (max-width: 640px) { .wrap, .wrap-narrow { width: calc(100% - 2rem); } }

.section { padding-block: clamp(var(--sp-7), 6vw, var(--sp-9)); }
.section--tight { padding-block: clamp(var(--sp-6), 4vw, var(--sp-7)); }
.section--sunken { background: var(--bg-sunken); }

.grid { display: grid; gap: var(--sp-5); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); }

.stack > * + * { margin-top: var(--flow, var(--sp-4)); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }

.with-sidebar {
  display: grid;
  gap: clamp(var(--sp-6), 4vw, var(--sp-8));
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 1024px) {
  .with-sidebar { grid-template-columns: minmax(0, 1fr) 20rem; }
  .with-sidebar--left { grid-template-columns: 20rem minmax(0, 1fr); }
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   4. BLUEPRINT MOTIFS
   The signature layer: grid paper, corner marks, dimension lines.
   -------------------------------------------------------------------------- */

/* Grid paper — 24px minor, 120px major, exactly like engineering graph paper. */
.blueprint-grid { position: relative; isolation: isolate; }
.blueprint-grid::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  background-position: -1px -1px;
  mask-image: radial-gradient(ellipse 120% 80% at 50% 0%, #000 35%, transparent 78%);
}

/* Registration marks in the corners of a drawing frame. */
.corner-marks { position: relative; }
.corner-marks::before,
.corner-marks::after {
  content: "";
  position: absolute;
  width: 18px; height: 18px;
  border: 2px solid var(--primary);
  opacity: .5;
  pointer-events: none;
}
.corner-marks::before { top: -1px; inset-inline-start: -1px; border-width: 2px 0 0 2px; }
.corner-marks::after  { bottom: -1px; inset-inline-end: -1px; border-width: 0 2px 2px 0; }

/* Monospace annotation label, as used on drawing callouts. */
.annot {
  display: inline-flex;
  align-items: center;
  gap: .5ch;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--primary);
}
.annot::before {
  content: "";
  width: 1.75rem; height: 2px;
  background: currentColor;
  opacity: .55;
}
.annot--accent { color: var(--accent); }
.annot--light  { color: rgba(255, 255, 255, .78); }

/* Dimension line with terminating ticks. */
.dimension {
  position: relative;
  height: 1px;
  background: var(--line-strong);
  margin-block: var(--sp-5);
}
.dimension::before,
.dimension::after {
  content: "";
  position: absolute; top: -5px;
  width: 1px; height: 11px;
  background: var(--line-strong);
}
.dimension::before { inset-inline-start: 0; }
.dimension::after  { inset-inline-end: 0; }

/* Section heading with a rule that fills the remaining track. */
.rule-heading {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.rule-heading__line { height: 1px; background: var(--line); }
.rule-heading h2 { font-size: var(--step-2); margin: 0; }

/* --------------------------------------------------------------------------
   5. SKIP LINK & UTILITY BAR
   -------------------------------------------------------------------------- */
.skip-link {
  position: fixed;
  top: -100%; inset-inline-start: var(--sp-4);
  z-index: 200;
  padding: var(--sp-3) var(--sp-5);
  background: var(--primary); color: #fff;
  font-weight: 600;
  border-radius: 0 0 var(--r-md) var(--r-md);
  box-shadow: var(--shadow-2);
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 0; color: #fff; }

.utility-bar {
  background: var(--blueprint-800);
  color: rgba(255, 255, 255, .82);
  font-size: var(--step--1);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.utility-bar__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4);
  min-height: 40px;
  flex-wrap: wrap;
}
.utility-bar a { color: inherit; text-decoration: none; }
.utility-bar a:hover { color: #fff; text-decoration: underline; }
.utility-bar__meta { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.utility-bar__meta span { display: inline-flex; align-items: center; gap: .45rem; }
.utility-bar__links { display: flex; align-items: center; gap: var(--sp-1); flex-wrap: wrap; }
.utility-bar__links a {
  padding: .25rem .6rem;
  border-radius: var(--r-sm);
  display: inline-flex; align-items: center; gap: .35rem;
}
.utility-bar__links a:hover { background: rgba(255, 255, 255, .1); text-decoration: none; }
@media (max-width: 900px) { .utility-bar__meta { display: none; } }
@media (max-width: 560px) { .utility-bar { display: none; } }

/* --------------------------------------------------------------------------
   6. HEADER & NAVIGATION
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--bg-raised) 88%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
.site-header.is-stuck { box-shadow: var(--shadow-2); }

.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-5);
  min-height: var(--header-h);
}

/* -- brand ------------------------------------------------------------------ */
.brand { display: flex; align-items: center; gap: var(--sp-3); text-decoration: none; color: inherit; }
/* The mark is the UMI crest, which carries its own colours and its own shield
   outline. The gradient tile and blueprint grid that used to sit behind the
   old line-art cube are gone: two competing shapes read as a logo pasted onto
   a badge rather than as one mark. */
.brand__mark {
  width: 46px; height: 46px;
  flex: none;
  display: grid; place-items: center;
}
/* The width/height attributes on the <img> set the size and reserve the space
   before it loads; this only stops the inline-image baseline gap. */
.brand__mark img { display: block; object-fit: contain; }
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__name { font-weight: 800; font-size: 1.03rem; letter-spacing: -.02em; }
.brand__sub {
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-faint);
}
@media (max-width: 420px) { .brand__text { display: none; } }

/* -- primary nav ------------------------------------------------------------ */
.nav-primary > ul {
  display: flex; align-items: center; gap: var(--sp-1);
  list-style: none; margin: 0; padding: 0;
}
.nav-primary a {
  display: flex; align-items: center; gap: .35rem;
  padding: .55rem .8rem;
  border-radius: var(--r-md);
  font-size: .935rem;
  font-weight: 550;
  color: var(--text-soft);
  text-decoration: none;
  white-space: nowrap;
  transition: color .18s, background .18s;
}
.nav-primary a:hover { color: var(--primary); background: var(--primary-soft); }
.nav-primary .is-active > a { color: var(--primary); font-weight: 650; }
.nav-primary .is-active > a::after {
  content: "";
  position: absolute; inset-inline: .8rem; bottom: .25rem;
  height: 2px; border-radius: 2px;
  background: var(--primary);
}
.nav-primary li { position: relative; }

/* dropdown */
.nav-primary .has-children > ul {
  position: absolute; top: calc(100% + .4rem); inset-inline-start: 0;
  min-width: 15rem;
  padding: var(--sp-2);
  list-style: none; margin: 0;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-3);
  opacity: 0; visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
  z-index: 20;
}
.nav-primary .has-children:hover > ul,
.nav-primary .has-children:focus-within > ul,
.nav-primary .has-children > ul.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-primary .has-children > ul a {
  padding: .55rem .7rem;
  border-radius: var(--r-sm);
  font-weight: 500;
  width: 100%;
}
.nav-primary .has-children > ul .desc {
  display: block;
  font-size: var(--step--2);
  color: var(--text-faint);
  font-weight: 400;
}
.nav-toggle-sub { padding: .1rem; display: inline-flex; color: inherit; }

@media (max-width: 1100px) { .nav-primary { display: none; } }

/* -- header actions --------------------------------------------------------- */
.header-actions { display: flex; align-items: center; gap: var(--sp-2); }

.icon-btn {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  color: var(--text-soft);
  border: 1px solid transparent;
  transition: all .18s var(--ease);
}
.icon-btn:hover { background: var(--bg-sunken); color: var(--primary); border-color: var(--line); }
.icon-btn[aria-expanded="true"] { background: var(--primary-soft); color: var(--primary); }

.lang-switch { position: relative; }
.lang-switch__menu {
  position: absolute; top: calc(100% + .4rem); inset-inline-end: 0;
  min-width: 12rem;
  padding: var(--sp-2);
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-3);
  list-style: none; margin: 0;
  display: none;
  z-index: 30;
}
.lang-switch__menu.is-open { display: block; }
.lang-switch__menu a {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: .5rem .65rem;
  border-radius: var(--r-sm);
  text-decoration: none;
  color: var(--text);
  font-size: .92rem;
}
.lang-switch__menu a:hover { background: var(--bg-sunken); }
.lang-switch__menu .is-current { color: var(--primary); font-weight: 650; }
.lang-switch__flag { font-size: 1.15rem; line-height: 1; }
.lang-switch__code {
  margin-inline-start: auto;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--text-faint);
  text-transform: uppercase;
}

.nav-open-btn { display: none; }
@media (max-width: 1100px) { .nav-open-btn { display: grid; } }

/* -- mobile drawer ---------------------------------------------------------- */
.drawer {
  position: fixed; inset: 0;
  z-index: 150;
  visibility: hidden;
}
.drawer.is-open { visibility: visible; }
.drawer__scrim {
  position: absolute; inset: 0;
  background: rgba(6, 19, 32, .55);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.drawer.is-open .drawer__scrim { opacity: 1; }
.drawer__panel {
  position: absolute; inset-block: 0; inset-inline-end: 0;
  width: min(92vw, 24rem);
  background: var(--bg-raised);
  border-inline-start: 1px solid var(--line);
  box-shadow: var(--shadow-3);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--dur) var(--ease);
  overflow-y: auto;
  overscroll-behavior: contain;
}
[dir="rtl"] .drawer__panel { transform: translateX(-100%); }
.drawer.is-open .drawer__panel { transform: translateX(0); }
.drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-4);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0;
  background: var(--bg-raised);
  z-index: 2;
}
.drawer__body { padding: var(--sp-4); flex: 1; }
.drawer nav ul { list-style: none; padding: 0; margin: 0; }
.drawer nav > ul > li { border-bottom: 1px solid var(--line); }
.drawer nav a {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3);
  padding: .85rem .25rem;
  color: var(--text);
  text-decoration: none;
  font-weight: 550;
}
.drawer nav a:hover { color: var(--primary); }
.drawer nav ul ul { padding-inline-start: var(--sp-4); padding-bottom: var(--sp-2); display: none; }
.drawer nav ul ul.is-open { display: block; }
.drawer nav ul ul a { padding: .55rem .25rem; font-weight: 450; font-size: .93rem; color: var(--text-soft); }

/* --------------------------------------------------------------------------
   7. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem;
  padding: .7rem 1.3rem;
  border-radius: var(--r-md);
  font-weight: 600;
  font-size: .95rem;
  line-height: 1.2;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .16s var(--ease), background .18s, box-shadow .18s, color .18s, border-color .18s;
}
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--primary); color: #fff; box-shadow: var(--shadow-1); }
.btn--primary:hover { background: var(--primary-hover); color: #fff; box-shadow: var(--shadow-2); }

.btn--accent { background: var(--accent); color: #fff; box-shadow: var(--shadow-1); }
.btn--accent:hover { background: var(--amber-700); color: #fff; }

.btn--outline { border-color: var(--line-strong); color: var(--text); background: var(--bg-raised); }
.btn--outline:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }

.btn--ghost { color: var(--text-soft); }
.btn--ghost:hover { background: var(--bg-sunken); color: var(--primary); }

.btn--light { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .28); backdrop-filter: blur(6px); }
.btn--light:hover { background: rgba(255, 255, 255, .2); color: #fff; }

.btn--sm { padding: .45rem .85rem; font-size: .86rem; }
.btn--lg { padding: .9rem 1.7rem; font-size: 1.02rem; }
.btn--block { width: 100%; }
.btn[disabled], .btn.is-disabled { opacity: .55; pointer-events: none; }

/* --------------------------------------------------------------------------
   8. HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  background: linear-gradient(155deg, var(--blueprint-900) 0%, var(--blueprint-700) 55%, #14456B 100%);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.hero::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, .028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .028) 1px, transparent 1px);
  background-size: 140px 140px, 140px 140px, 28px 28px, 28px 28px;
}
.hero::after {
  content: "";
  position: absolute; z-index: 0;
  inset-inline-end: -12%; top: -25%;
  width: 46rem; height: 46rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(46, 143, 221, .3), transparent 62%);
  filter: blur(16px);
  pointer-events: none;
}
.hero__inner { position: relative; z-index: 1; padding-block: clamp(var(--sp-7), 7vw, var(--sp-9)); }

.hero__grid {
  display: grid;
  gap: clamp(var(--sp-6), 5vw, var(--sp-8));
  align-items: center;
}
@media (min-width: 980px) { .hero__grid { grid-template-columns: 1.05fr .95fr; } }

.hero__eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .38rem .85rem .38rem .55rem;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .18);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .92);
  margin-bottom: var(--sp-4);
}
.hero__eyebrow .pip {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--amber-500);
  box-shadow: 0 0 0 4px rgba(232, 138, 60, .25);
  animation: pip 2.4s ease-in-out infinite;
}
@keyframes pip { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.hero h1 {
  font-size: var(--step-5);
  font-weight: 800;
  letter-spacing: -.03em;
  margin-bottom: var(--sp-4);
}
.hero h1 .accent {
  background: linear-gradient(100deg, var(--amber-500), #FFC178);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero__lead {
  font-size: var(--step-1);
  color: rgba(255, 255, 255, .8);
  max-width: 34rem;
  margin-bottom: var(--sp-5);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-6); }

.hero__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
  gap: var(--sp-4);
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(255, 255, 255, .14);
}
.hero__fact strong {
  display: block;
  font-size: var(--step-2);
  font-weight: 800;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.hero__fact span {
  font-size: var(--step--1);
  color: rgba(255, 255, 255, .62);
}

/* -- hero feature card (the "drawing sheet") -------------------------------- */
.hero__sheet {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .38);
}
.hero__sheet img, .hero__sheet .rimg { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.hero__sheet .rimg img { width: 100%; height: 100%; object-fit: cover; }
.hero__sheet-body {
  position: absolute; inset-inline: 0; bottom: 0;
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
  background: linear-gradient(to top, rgba(6, 19, 32, .95) 12%, rgba(6, 19, 32, .72) 55%, transparent);
}
.hero__sheet-body h2 { font-size: var(--step-1); margin-bottom: var(--sp-2); }
.hero__sheet-body h2 a { color: #fff; text-decoration: none; }
.hero__sheet-body h2 a:hover { text-decoration: underline; }
.hero__sheet-meta {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  font-size: var(--step--1);
  color: rgba(255, 255, 255, .72);
}
.hero__sheet-meta span { display: inline-flex; align-items: center; gap: .35rem; }

/* Rotating stack of secondary features. */
.hero__stack { display: grid; gap: var(--sp-3); margin-top: var(--sp-4); }
.hero__stack a {
  display: grid; grid-template-columns: 4.5rem 1fr; gap: var(--sp-3);
  align-items: center;
  padding: var(--sp-2);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .9);
  text-decoration: none;
  transition: background .2s, transform .2s var(--ease);
}
.hero__stack a:hover { background: rgba(255, 255, 255, .12); transform: translateX(3px); color: #fff; }
.hero__stack .rimg { width: 4.5rem; height: 3rem; border-radius: var(--r-sm); overflow: hidden; }
.hero__stack .rimg img { width: 100%; height: 100%; object-fit: cover; }
.hero__stack strong { display: block; font-size: .88rem; font-weight: 600; line-height: 1.35; }
.hero__stack span { font-size: var(--step--2); color: rgba(255, 255, 255, .58); }

/* --------------------------------------------------------------------------
   9. CARDS
   -------------------------------------------------------------------------- */
.card {
  display: flex; flex-direction: column;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform .24s var(--ease), box-shadow .24s var(--ease), border-color .24s;
  height: 100%;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-3); border-color: var(--line-strong); }

.card__media { position: relative; overflow: hidden; background: var(--bg-sunken); aspect-ratio: 16 / 10; }
.card__media .rimg, .card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__media img { transition: transform .5s var(--ease); }
.card:hover .card__media img { transform: scale(1.05); }

.card__badge {
  position: absolute; top: var(--sp-3); inset-inline-start: var(--sp-3);
  padding: .28rem .65rem;
  border-radius: var(--r-sm);
  background: rgba(6, 19, 32, .82);
  backdrop-filter: blur(6px);
  color: #fff;
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.card__body { padding: var(--sp-4) var(--sp-5) var(--sp-5); display: flex; flex-direction: column; flex: 1; gap: var(--sp-3); }
.card__title { font-size: 1.08rem; line-height: 1.32; }
.card__title a { color: var(--text); text-decoration: none; }
.card__title a:hover { color: var(--primary); }
.card__excerpt { color: var(--text-soft); font-size: .935rem; line-height: 1.6; }
.card__meta {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  font-size: var(--step--1);
  color: var(--text-faint);
  margin-top: auto;
  padding-top: var(--sp-3);
  border-top: 1px dashed var(--line);
}
.card__meta span { display: inline-flex; align-items: center; gap: .35rem; }

/* Wide horizontal variant used in the "latest" column. */
.card--row { flex-direction: row; align-items: stretch; }
.card--row .card__media { width: 13rem; flex: none; aspect-ratio: auto; }
.card--row .card__body { padding: var(--sp-4); }
@media (max-width: 640px) {
  .card--row { flex-direction: column; }
  .card--row .card__media { width: 100%; aspect-ratio: 16 / 9; }
}

/* Compact list item, no media. */
.mini-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-1); }
.mini-list li { border-bottom: 1px dashed var(--line); }
.mini-list li:last-child { border-bottom: 0; }
.mini-list a {
  display: grid; grid-template-columns: 3.4rem 1fr; gap: var(--sp-3);
  align-items: start;
  padding: var(--sp-3) 0;
  text-decoration: none; color: var(--text);
}
.mini-list a:hover .mini-list__title { color: var(--primary); }
.mini-list__date {
  display: grid; place-items: center;
  padding: .3rem;
  border-radius: var(--r-sm);
  background: var(--bg-sunken);
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  line-height: 1.15;
}
.mini-list__date b { font-size: 1.05rem; font-weight: 700; }
.mini-list__date span { font-size: .6rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-faint); }
.mini-list__title { font-size: .92rem; font-weight: 550; line-height: 1.42; transition: color .18s; }
.mini-list__meta { font-size: var(--step--2); color: var(--text-faint); margin-top: .2rem; }

/* --------------------------------------------------------------------------
   10. PROGRAMME CARDS
   -------------------------------------------------------------------------- */
.prog-card {
  position: relative;
  display: flex; flex-direction: column; gap: var(--sp-4);
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform .24s var(--ease), box-shadow .24s var(--ease);
  height: 100%;
}
.prog-card::before {
  content: "";
  position: absolute; inset-block-start: 0; inset-inline: 0;
  height: 4px;
  background: var(--prog-color, var(--primary));
  transform: scaleX(.28);
  transform-origin: inline-start;
  transition: transform .38s var(--ease);
}
.prog-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-3); }
.prog-card:hover::before { transform: scaleX(1); }

.prog-card__icon {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--prog-color, var(--primary)) 12%, transparent);
  color: var(--prog-color, var(--primary));
}
.prog-card__no {
  position: absolute; top: var(--sp-4); inset-inline-end: var(--sp-5);
  font-family: var(--font-mono);
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1;
  color: var(--line);
  opacity: .8;
  pointer-events: none;
}
.prog-card h3 { font-size: 1.2rem; }
.prog-card__en { font-size: var(--step--1); color: var(--text-faint); font-style: italic; }
.prog-card__tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: auto; }
.pill {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .25rem .6rem;
  border-radius: var(--r-full);
  background: var(--bg-sunken);
  border: 1px solid var(--line);
  font-size: var(--step--2);
  font-weight: 600;
  color: var(--text-soft);
}
.pill--accredited { background: var(--verde-100); border-color: transparent; color: var(--verde-600); }
:root[data-theme="dark"] .pill--accredited { background: #10382B; color: #7FD9B8; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pill--accredited { background: #10382B; color: #7FD9B8; }
}

/* --------------------------------------------------------------------------
   10b. PROGRAMME PAGE
   Each programme carries its own accent, passed in as --prog, so the page
   takes on the discipline's colour without a stylesheet per programme.
   -------------------------------------------------------------------------- */
.prog-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(150deg, var(--blueprint-900) 0%, var(--blueprint-700) 55%, var(--prog, var(--steel-700)) 165%);
}
.prog-hero::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
  background-size: 140px 140px, 140px 140px, 28px 28px, 28px 28px;
  mask-image: radial-gradient(ellipse 100% 85% at 25% 15%, #000 45%, transparent 88%);
}
.prog-hero::after {
  content: "";
  position: absolute; z-index: -1;
  inset-inline-end: -12%; bottom: -45%;
  width: 34rem; height: 34rem;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--prog, var(--steel-500)) 45%, transparent), transparent 64%);
  filter: blur(14px);
  pointer-events: none;
}

/* Cover photo, heavily dimmed so the copy always wins. */
.prog-hero__bg {
  position: absolute; inset: 0; z-index: -2;
  opacity: .17;
}
.prog-hero__bg .rimg, .prog-hero__bg img { width: 100%; height: 100%; object-fit: cover; }

.prog-hero__inner { padding-block: clamp(var(--sp-5), 4vw, var(--sp-7)) clamp(var(--sp-6), 5vw, var(--sp-8)); }

.prog-hero__crumb {
  display: flex; align-items: center; gap: .5rem;
  font-size: var(--step--1);
  color: rgba(255, 255, 255, .55);
  margin-bottom: clamp(var(--sp-4), 3vw, var(--sp-6));
}
.prog-hero__crumb a { color: rgba(255, 255, 255, .78); text-decoration: none; }
.prog-hero__crumb a:hover { color: #fff; text-decoration: underline; }

.prog-hero__head { display: flex; align-items: flex-start; gap: var(--sp-4); flex-wrap: wrap; }

.prog-hero__icon {
  width: 78px; height: 78px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--prog, var(--steel-500)) 30%, rgba(255, 255, 255, .08));
  border: 1px solid rgba(255, 255, 255, .22);
  backdrop-filter: blur(8px);
}
@media (max-width: 560px) { .prog-hero__icon { width: 60px; height: 60px; } }

.prog-hero__kicker {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
  margin-bottom: .3rem;
}
.prog-hero h1 {
  font-size: var(--step-4);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.08;
}
.prog-hero__en {
  font-size: var(--step-0);
  font-style: italic;
  color: rgba(255, 255, 255, .6);
  margin-top: .25rem;
}
.prog-hero__blurb {
  font-size: var(--step-1);
  color: rgba(255, 255, 255, .82);
  line-height: 1.6;
  max-width: 46rem;
  margin-top: var(--sp-5);
}
.prog-hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); }

/* -- specification strip --------------------------------------------------- */
.prog-spec {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1px;
  margin: var(--sp-6) 0 0;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.prog-spec > div {
  padding: var(--sp-4);
  background: rgba(6, 19, 32, .34);
  backdrop-filter: blur(6px);
}
.prog-spec dt {
  display: flex; align-items: center; gap: .4rem;
  font-size: var(--step--2);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
  margin-bottom: .35rem;
}
.prog-spec dd {
  margin: 0;
  font-size: 1.06rem;
  font-weight: 700;
  letter-spacing: -.01em;
}

/* -- focus areas ----------------------------------------------------------- */
.focus-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--sp-3);
  list-style: none;
  padding: 0;
  margin: 0;
}
.focus-item {
  position: relative;
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-5);
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s;
}
.focus-item::before {
  content: "";
  position: absolute;
  inset-block: 0; inset-inline-start: 0;
  width: 3px;
  background: var(--prog, var(--primary));
  transform: scaleY(.3);
  transform-origin: center;
  transition: transform .3s var(--ease);
}
.focus-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: var(--line-strong); }
.focus-item:hover::before { transform: scaleY(1); }
.focus-item__no {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--prog, var(--primary));
  opacity: .5;
  flex: none;
}
.focus-item__label { font-weight: 600; font-size: .95rem; line-height: 1.35; }

/* -- tabbed sections ------------------------------------------------------- */
.prog-tabs {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.prog-tabs__list {
  display: flex;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: thin;
  background: var(--bg-sunken);
  border-bottom: 1px solid var(--line);
}
.prog-tab {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .95rem 1.25rem;
  font-size: .93rem;
  font-weight: 600;
  color: var(--text-soft);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color .18s, border-color .18s, background .18s;
}
.prog-tab:hover { color: var(--prog, var(--primary)); background: var(--bg-raised); }
.prog-tab.is-active {
  color: var(--prog, var(--primary));
  border-bottom-color: var(--prog, var(--primary));
  background: var(--bg-raised);
}
.prog-tab svg { flex: none; }

.prog-panel { padding: clamp(var(--sp-4), 3vw, var(--sp-6)); }
.prog-panel[hidden] { display: none; }
.prog-panel .prose { max-width: none; font-size: 1rem; }
.prog-panel .prose > :first-child { margin-top: 0; }

/* Imported tables in these panels are dense; tighten them up. */
.prog-panel .data-table { font-size: .88rem; }
.prog-panel .data-table th, .prog-panel .data-table td { padding: .55rem .7rem; }

/* -- roster inside a tab panel ---------------------------------------------
   The people tabs carry no prose of their own, so they open with a count and
   a way out to the full directory instead of a heading that would only repeat
   the tab's own label. */
.roster { display: grid; gap: var(--sp-4); }

.roster__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--line);
}

.roster__count {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin: 0;
  font-size: var(--step--1);
  color: var(--text-soft);
}
.roster__count svg { color: var(--prog, var(--primary)); flex: none; }
.roster__count strong {
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.roster__all {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  margin-inline-start: auto;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--prog, var(--primary));
  text-decoration: none;
}
.roster__all svg { transition: transform .22s var(--ease); }
.roster__all:hover svg { transform: translateX(3px); }
.roster__all:hover { text-decoration: underline; }

/* A tab panel is roughly half the width of the directory page, so the cards
   step down a size rather than dropping to a single column. */
.staff-grid--compact {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 10.5rem), 1fr));
  gap: var(--sp-3);
}
.staff-grid--compact .staff-card__body { padding: var(--sp-3); }
.staff-grid--compact .staff-card__name { font-size: var(--step--1); }
/* On the leadership tab the job title is the whole point of the card, so it
   carries more weight here than in the directory listing. */
.staff-grid--compact .staff-card__role {
  font-size: var(--step--2);
  color: var(--text-soft);
}
.staff-grid--compact .staff-card__rank { font-size: .62rem; }
.staff-grid--compact .staff-card__meta { gap: .25rem; }
.staff-grid--compact .staff-card__nidn { font-size: .68rem; }

/* The programme badge says what the page it sits on already says. */
.staff-grid--compact .staff-card__prog { display: none; }

/* Shown where a people tab has nobody to show. The imported page for such a
   tab is a table of headings with no rows, which reads as a broken page. */
.roster-empty {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-5);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--bg-sunken);
}
.roster-empty__icon { color: var(--prog, var(--primary)); opacity: .7; flex: none; }
.roster-empty > div { flex: 1 1 16rem; }
.roster-empty__title { margin: 0; font-weight: 700; }
.roster-empty__note {
  margin: .3rem 0 0;
  font-size: var(--step--1);
  color: var(--text-soft);
  max-width: 46ch;
}

/* -- personnel roster ------------------------------------------------------- */
.staff-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
  gap: var(--sp-4);
  list-style: none;
  padding: 0;
  margin: 0;
}

.staff-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s;
}
.staff-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-2);
  border-color: color-mix(in srgb, var(--prog, var(--primary)) 45%, var(--line));
}

/* A hairline in the programme colour, drawn only on hover so the resting grid
   stays calm. */
.staff-card::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 3px;
  background: var(--prog, var(--primary));
  opacity: 0;
  transition: opacity .22s var(--ease);
  z-index: 2;
}
.staff-card:hover::before,
.staff-card:focus-within::before { opacity: 1; }

.staff-card__photo {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--bg-sunken);
  overflow: hidden;
}
.staff-card__photo .rimg,
.staff-card__photo img {
  width: 100%;
  height: 100%;
  /* Portraits are shot at wildly different crops; anchor on the face. */
  object-fit: cover;
  object-position: 50% 22%;
}
.staff-card__photo img { transition: transform .5s var(--ease); }
.staff-card:hover .staff-card__photo img { transform: scale(1.04); }

.staff-card__initials {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: .02em;
  color: color-mix(in srgb, var(--prog, var(--primary)) 65%, transparent);
  background:
    linear-gradient(140deg,
      color-mix(in srgb, var(--prog, var(--primary)) 12%, transparent),
      transparent 70%);
}

/* The academic rank rides on the portrait rather than competing with the name
   for space in the body. */
.staff-card__rank {
  position: absolute;
  inset-block-end: .5rem;
  inset-inline-start: .5rem;
  z-index: 1;
  max-width: calc(100% - 1rem);
  padding: .18rem .5rem;
  border-radius: 999px;
  font-size: var(--step--2);
  font-weight: 650;
  line-height: 1.3;
  color: #fff;
  background: color-mix(in srgb, var(--prog, var(--primary)) 88%, #000);
  backdrop-filter: blur(4px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.staff-card__body {
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: .25rem;
  flex: 1;
}

.staff-card__name {
  font-size: .96rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -.01em;
  /* Long academic titles must not blow out the card. */
  overflow-wrap: break-word;
  hyphens: auto;
}
.staff-card__role {
  font-size: var(--step--1);
  color: var(--text-faint);
  line-height: 1.45;
  padding-top: .35rem;
}

/* Identifiers and programme sit at the foot of the card, pushed there so cards
   of differing text length still line their footers up. */
.staff-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem .5rem;
  align-items: center;
  margin-top: auto;
  padding-top: .6rem;
}

.staff-card__prog {
  display: inline-flex;
  align-items: center;
  gap: .28rem;
  padding: .12rem .45rem;
  border-radius: var(--r-sm, 6px);
  font-size: var(--step--2);
  font-weight: 600;
  line-height: 1.4;
  color: var(--prog, var(--primary));
  background: color-mix(in srgb, var(--prog, var(--primary)) 12%, transparent);
}
.staff-card__prog svg { flex: none; }

.staff-card__profiles {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  margin-top: .5rem;
}
.staff-card__profile {
  position: relative;
  z-index: 1;
  padding: .1rem .45rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm, 6px);
  font-size: var(--step--2);
  font-weight: 600;
  color: var(--text-soft);
  text-decoration: none;
}
.staff-card__profile:hover {
  color: var(--prog, var(--primary));
  border-color: currentColor;
  text-decoration: none;
}

/* The head of programme leads the roster: wider, photo alongside the name. */
@media (min-width: 640px) {
  .staff-card.is-lead {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: stretch;
  }
  .staff-card.is-lead .staff-card__photo {
    width: 13rem;
    flex: none;
    aspect-ratio: 4 / 5;
  }
  .staff-card.is-lead .staff-card__body {
    justify-content: center;
    padding: var(--sp-5) var(--sp-6);
    gap: .35rem;
  }
  .staff-card.is-lead .staff-card__name { font-size: var(--step-1); }
  /* The body is centred here, so the footer must not be flung to the bottom. */
  .staff-card.is-lead .staff-card__meta { margin-top: .6rem; }
  .staff-card.is-lead .staff-card__role {
    font-size: 1rem;
    margin-top: 0;
    color: var(--prog, var(--primary));
    font-weight: 600;
  }
  /* An accent rule marks the first entry without asserting a job title. */
  .staff-card.is-lead .staff-card__role::before {
    content: "";
    display: block;
    width: 2.2rem;
    height: 3px;
    border-radius: 2px;
    background: currentColor;
    margin-bottom: .6rem;
    opacity: .8;
  }
}
@media (min-width: 1024px) {
  /* Inside the article column the lead card should not span every track. */
  .staff-card.is-lead { grid-column: 1 / -1; }
}

/* -- directory extras ------------------------------------------------------ */
.staff-grid--compact { grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); }
.staff-grid--compact .staff-card__photo { aspect-ratio: 1; }
.staff-grid--compact .staff-card__body { padding: var(--sp-3); }
.staff-grid--compact .staff-card__name { font-size: .88rem; }

/* The name is the accessible link; its ::after stretches the hit area over the
   whole card, which leaves the research-profile links clickable on top of it. */
.staff-card__link {
  color: inherit;
  text-decoration: none;
}
.staff-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
}
.staff-card__link:hover { color: var(--prog, var(--primary)); text-decoration: none; }
.staff-card:focus-within { border-color: var(--prog, var(--primary)); }
.staff-card__link:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: var(--r-sm, 6px); }

.staff-card__nidn {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--text-faint);
  letter-spacing: .01em;
}

.staff-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-6);
  margin-top: var(--sp-5);
  padding: 0;
  list-style: none;
}
.staff-stats li {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  padding-inline-start: var(--sp-3);
  border-inline-start: 3px solid color-mix(in srgb, var(--primary) 40%, transparent);
}
.staff-stats strong {
  font-size: var(--step-2);
  font-weight: 800;
  line-height: 1.1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.staff-stats span {
  font-size: var(--step--1);
  color: var(--text-soft);
}

/* -- directory filter bar --------------------------------------------------- */
.staff-bar {
  position: sticky;
  /* Clears the site header, which is sticky too. */
  top: var(--header-h, 0px);
  z-index: 30;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(150%) blur(10px);
  border-block: 1px solid var(--line);
}
.staff-bar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-4);
  padding-block: var(--sp-3);
}

.staff-search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 15rem;
  max-width: 22rem;
}
.staff-search__icon {
  position: absolute;
  inset-inline-start: .7rem;
  display: inline-flex;
  color: var(--text-faint);
  pointer-events: none;
}
.staff-search__input {
  width: 100%;
  padding: .5rem .7rem .5rem 2.3rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-raised);
  color: var(--text);
  font: inherit;
  font-size: var(--step--1);
}
.staff-search__input::-webkit-search-cancel-button { display: none; }
.staff-search__input:focus-visible {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent);
}
.staff-search__clear {
  position: absolute;
  inset-inline-end: .35rem;
  display: inline-flex;
  padding: .3rem;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--text-faint);
  cursor: pointer;
}
.staff-search__clear:hover { color: var(--text); background: var(--bg-sunken); }

.staff-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.staff-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .7rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-raised);
  color: var(--text-soft);
  font: inherit;
  font-size: var(--step--1);
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: color .18s, border-color .18s, background-color .18s;
}
.staff-chip:hover { color: var(--chip, var(--primary)); border-color: currentColor; }
/* Programme colours are chosen to read against paper, not to sit behind white
   text; darkening the fill is what keeps the active chip legible for all of
   them. */
.staff-chip.is-active {
  color: #fff;
  background: color-mix(in srgb, var(--chip, var(--primary)) 82%, #08131F);
  border-color: transparent;
}
.staff-chip__n {
  font-variant-numeric: tabular-nums;
  font-size: var(--step--2);
  opacity: .72;
}
.staff-chip.is-active .staff-chip__n { opacity: .85; }

/* [hidden] loses to the display below without this. */
.staff-noresult[hidden] { display: none; }
.staff-noresult {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: var(--sp-7) var(--sp-4);
  color: var(--text-faint);
  font-size: var(--step--1);
}

/* A programme heading reads as one line: icon, then name. */
.staff-section__title {
  display: flex;
  align-items: center;
  gap: .6rem;
}
.staff-section__icon {
  display: inline-flex;
  color: var(--prog, var(--primary));
}
.staff-section[hidden] { display: none; }
.staff-card[hidden] { display: none; }

/* The directory's own sticky bar sits below the site header, so a jump to a
   programme has to clear both. */
html:has(body.is-staff) { scroll-padding-top: calc(var(--header-h) + 5.5rem); }

/* ==========================================================================
   LEADERSHIP — /pimpinan-fakultas
   The dean as a title block, the vice deans as numbered plates, and a line
   diagram of the reporting structure. Drawing conventions rather than a
   generic team grid.
   ========================================================================== */

/* -- the dean -------------------------------------------------------------- */
.lead-figure {
  display: grid;
  gap: clamp(var(--sp-5), 4vw, var(--sp-7));
  align-items: center;
  padding: clamp(var(--sp-5), 3vw, var(--sp-7));
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--bg-raised);
  box-shadow: var(--shadow-1);
  position: relative;
}
/* Corner registration mark — the same device the hero and cards use. */
.lead-figure::before {
  content: "";
  position: absolute;
  inset-block-start: var(--sp-4);
  inset-inline-start: var(--sp-4);
  width: 26px; height: 26px;
  border-block-start: 2px solid var(--accent);
  border-inline-start: 2px solid var(--accent);
  border-start-start-radius: var(--r-sm);
  opacity: .7;
  pointer-events: none;
}
@media (min-width: 820px) {
  .lead-figure { grid-template-columns: 22rem minmax(0, 1fr); }
}

.lead-figure__photo {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bg-sunken);
  border: 1px solid var(--line);
}
.lead-figure__photo .rimg,
.lead-figure__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 20%;
}

.lead-figure__body { min-width: 0; }

.lead-figure__rank {
  display: flex;
  align-items: center;
  gap: .7rem;
  color: var(--primary);
  margin-bottom: var(--sp-3);
}
/* Sheet number, as on a drawing sheet. */
.lead-figure__plate {
  display: inline-grid;
  place-items: center;
  min-width: 2.1rem;
  padding: .12rem .45rem;
  border: 1px solid color-mix(in srgb, var(--primary) 40%, var(--line));
  border-radius: var(--r-sm);
  background: var(--primary-soft);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: .06em;
}

.lead-figure__name {
  font-size: var(--step-2);
  line-height: 1.2;
  letter-spacing: -.02em;
  margin-bottom: var(--sp-3);
  overflow-wrap: break-word;
}

.lead-figure__note {
  color: var(--text-soft);
  max-width: 52ch;
  margin-bottom: var(--sp-5);
}

/* -- the vice deans -------------------------------------------------------- */
.lead-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--sp-4);
  list-style: none;
  padding: 0;
  margin: 0;
}

.lead-card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-raised);
  overflow: hidden;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s;
}
.lead-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-2);
  border-color: color-mix(in srgb, var(--primary) 45%, var(--line));
}

.lead-card__link {
  display: block;
  height: 100%;
  color: inherit;
  text-decoration: none;
}
.lead-card__link:hover { color: inherit; text-decoration: none; }
.lead-card__link:hover .lead-card__name { color: var(--primary); }
.lead-card__link:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: var(--r-lg); }

/* Roman numeral over the photo — the rank reads before the face does. */
.lead-card__numeral {
  position: absolute;
  z-index: 2;
  inset-block-start: .6rem;
  inset-inline-start: .6rem;
  min-width: 2rem;
  padding: .18rem .5rem;
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--ink-900, #0B1B2B) 78%, transparent);
  color: #fff;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: .08em;
  text-align: center;
  backdrop-filter: blur(3px);
}

.lead-card__photo {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--bg-sunken);
  overflow: hidden;
}
.lead-card__photo .rimg,
.lead-card__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 20%;
  transition: transform .5s var(--ease);
}
.lead-card:hover .lead-card__photo img { transform: scale(1.04); }

.lead-card__body { padding: var(--sp-4); }

.lead-card__rank {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: .4rem;
}
.lead-card__field {
  display: block;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-faint);
  font-family: var(--font-sans);
  font-size: var(--step--1);
  margin-top: .15rem;
}

.lead-card__name {
  font-size: .96rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -.01em;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* -- reporting-line diagram ------------------------------------------------ */
.orgchart {
  margin: 0;
  padding: clamp(var(--sp-5), 3vw, var(--sp-7)) var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-sunken);
  text-align: center;
  overflow-x: auto;
}

.orgchart__node {
  display: inline-grid;
  gap: .2rem;
  padding: .6rem .9rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--bg-raised);
  min-width: 11rem;
  text-align: start;
}
.orgchart__node--head {
  border-color: color-mix(in srgb, var(--primary) 55%, var(--line));
  background: var(--primary-soft);
  min-width: 15rem;
}
.orgchart__role {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--primary);
}
.orgchart__who {
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--text);
}

/* Trunk dropping from the dean into the deputies' bus line. */
.orgchart__top { position: relative; padding-bottom: var(--sp-6); }
.orgchart__top::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 50%;
  width: 2px;
  height: var(--sp-6);
  background: var(--line-strong);
}

.orgchart__row {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-4);
  padding-top: var(--sp-5);
}
/* Horizontal bus; each node grows its own riser up to it. */
.orgchart__row::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 12%;
  height: 2px;
  background: var(--line-strong);
}
.orgchart__row .orgchart__node { position: relative; }
.orgchart__row .orgchart__node::before {
  content: "";
  position: absolute;
  inset-block-start: calc(-1 * var(--sp-5));
  inset-inline-start: 50%;
  width: 2px;
  height: var(--sp-5);
  background: var(--line-strong);
}
/* Stacked on narrow screens the bus and risers describe nothing — hide them. */
@media (max-width: 700px) {
  .orgchart__row::before,
  .orgchart__row .orgchart__node::before,
  .orgchart__top::after { display: none; }
  .orgchart__top { padding-bottom: var(--sp-4); }
  .orgchart__row { padding-top: 0; }
  .orgchart__node { min-width: 0; width: 100%; }
}

.orgchart figcaption { margin-top: var(--sp-5); }

/* -- onward links ---------------------------------------------------------- */
.lead-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: var(--sp-4);
}

.lead-link {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-raised);
  color: inherit;
  text-decoration: none;
  transition: border-color .2s, transform .22s var(--ease), box-shadow .22s var(--ease);
}
.lead-link:hover {
  color: inherit;
  text-decoration: none;
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--primary) 45%, var(--line));
  box-shadow: var(--shadow-2);
}
.lead-link:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.lead-link > .icon:first-child { color: var(--primary); flex: none; }
.lead-link > .icon:last-child  { color: var(--text-faint); flex: none; margin-inline-start: auto; }
.lead-link span { display: grid; gap: .15rem; font-size: var(--step--1); color: var(--text-faint); }
.lead-link strong { font-size: var(--step-0); font-weight: 650; color: var(--text); }
.lead-link:hover strong { color: var(--primary); }

/* ==========================================================================
   DEAN'S MESSAGE — /sambutan-dekan
   Set as correspondence: portrait and title block on one side, the letter on
   the other, closing with a ruled signature.
   ========================================================================== */
.letter {
  display: grid;
  gap: clamp(var(--sp-5), 4vw, var(--sp-7));
  align-items: start;
  padding: clamp(var(--sp-5), 3vw, var(--sp-7));
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--bg-raised);
  box-shadow: var(--shadow-1);
}
@media (min-width: 880px) {
  .letter { grid-template-columns: 18rem minmax(0, 1fr); }
  /* The sender panel follows the reader down a long letter. */
  .letter__sender { position: sticky; top: 6rem; }
}

.letter__portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bg-sunken);
  border: 1px solid var(--line);
  margin-bottom: var(--sp-4);
}
.letter__portrait .rimg,
.letter__portrait img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 20%;
}

.letter__name {
  font-weight: 700;
  line-height: 1.35;
  margin-bottom: .2rem;
  overflow-wrap: break-word;
}
.letter__role {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--primary);
}

.letter__body { min-width: 0; }

.letter__text {
  font-size: var(--step-0);
  line-height: 1.9;
  color: var(--text-soft);
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  margin-bottom: 1.15em;
}
/* The greeting opens the letter; give it the weight of a salutation. */
.letter__text--open {
  font-size: var(--step-1);
  line-height: 1.65;
  font-weight: 600;
  color: var(--text);
  text-align: start;
  margin-bottom: 1em;
}

.letter__sign { margin-top: var(--sp-6); }
.letter__rule {
  display: block;
  width: 5rem;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
  margin-bottom: var(--sp-4);
}
.letter__sign-role {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: .3rem;
}
.letter__sign-name { font-weight: 700; color: var(--text); }

/* ==========================================================================
   PROGRAMME MANAGEMENT — /manajemen-prodi
   ========================================================================== */
.mgmt-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: var(--sp-4);
}

.mgmt-slot {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-raised);
  color: inherit;
  text-decoration: none;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s;
}
a.mgmt-slot:hover {
  color: inherit;
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
  border-color: color-mix(in srgb, var(--prog, var(--primary)) 45%, var(--line));
}
a.mgmt-slot:hover .mgmt-slot__name { color: var(--prog, var(--primary)); }
a.mgmt-slot:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

/* A vacancy is stated, not hidden — but it must not look clickable. */
.mgmt-slot.is-empty {
  display: grid;
  gap: .25rem;
  border-style: dashed;
  background: var(--bg-sunken);
  color: var(--text-faint);
}

.mgmt-slot__photo {
  position: relative;
  width: 5.5rem;
  flex: none;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--bg-sunken);
  border: 1px solid var(--line);
}
.mgmt-slot__photo .rimg,
.mgmt-slot__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 20%;
}
.mgmt-slot__photo .staff-card__initials { font-size: 1.2rem; }

.mgmt-slot__text { display: grid; gap: .2rem; min-width: 0; }
.mgmt-slot__role {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--prog, var(--primary));
  line-height: 1.4;
}
.mgmt-slot.is-empty .mgmt-slot__role { color: var(--text-faint); }
.mgmt-slot__name {
  font-weight: 700;
  font-size: .95rem;
  line-height: 1.35;
  overflow-wrap: break-word;
  hyphens: auto;
}
.mgmt-slot__nidn {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--text-faint);
}

/* -- single profile -------------------------------------------------------- */
.person {
  display: grid;
  gap: clamp(var(--sp-5), 4vw, var(--sp-7));
  align-items: start;
}
@media (min-width: 720px) { .person { grid-template-columns: 20rem minmax(0, 1fr); } }

.person__photo {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bg-sunken);
  border: 1px solid var(--line);
}
.person__photo .rimg, .person__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 20%;
}

/* min-width:0 stops a long unbroken value (a Scopus URL, an email) from
   forcing the grid column wider than its track. */
.person__body { min-width: 0; }

.person__name {
  font-size: var(--step-3);
  letter-spacing: -.025em;
  margin-block: .35rem .4rem;
}
.person__role {
  font-size: var(--step-1);
  color: var(--prog, var(--primary));
  font-weight: 600;
  margin-bottom: var(--sp-5);
}

.person__facts {
  display: grid;
  gap: 0;
  margin: 0;
  border-top: 1px solid var(--line);
}
.person__facts > div {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  gap: var(--sp-3);
  padding-block: .75rem;
  border-bottom: 1px solid var(--line);
}
@media (max-width: 560px) {
  .person__facts > div { grid-template-columns: 1fr; gap: .15rem; }
}
.person__facts dt {
  font-size: var(--step--1);
  color: var(--text-faint);
  font-weight: 600;
}
.person__facts dd { margin: 0; font-weight: 550; }

/* -- laboratories ---------------------------------------------------------- */
.lab-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.lab-list li {
  display: flex; align-items: flex-start; gap: .55rem;
  font-size: .92rem;
  color: var(--text-soft);
  line-height: 1.45;
}
.lab-list svg { flex: none; margin-top: .15rem; color: var(--prog, var(--verde-600)); }

/* Editorial flag — rendered only for signed-in staff, never for visitors. */
.editor-flag {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-5);
  background: var(--amber-100);
  border: 1px solid var(--amber-600);
  border-inline-start-width: 4px;
  border-radius: var(--r-md);
  color: #7A3810;
  font-size: .93rem;
}
.editor-flag svg { flex: none; margin-top: .15rem; }
.editor-flag strong { display: block; margin-bottom: .3rem; }
.editor-flag p { margin: 0 0 .5rem; line-height: 1.6; }
.editor-flag ul { margin: 0 0 .5rem; padding-inline-start: 1.2em; }
.editor-flag li { margin-bottom: .2rem; }
.editor-flag a { color: inherit; font-weight: 600; text-decoration: underline; }
.editor-flag a svg { display: inline; vertical-align: -.15em; margin: 0; }
.editor-flag__note { font-size: var(--step--1); opacity: .75; margin: 0; }
:root[data-theme="dark"] .editor-flag { background: #33210F; color: #E9C08C; border-color: #B4541A; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .editor-flag { background: #33210F; color: #E9C08C; border-color: #B4541A; }
}

/* -- careers --------------------------------------------------------------- */
.career-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--sp-3);
}
.career-card {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  font-weight: 550;
  font-size: .95rem;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.career-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.career-card__icon {
  width: 38px; height: 38px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--prog, var(--primary)) 12%, transparent);
  color: var(--prog, var(--primary));
}

/* --------------------------------------------------------------------------
   11. STAT BAND
   -------------------------------------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.stat {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  padding: var(--sp-6) var(--sp-4);
  background: var(--bg-raised);
  text-align: center;
  position: relative;
}
.stat__icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  background: var(--primary-soft);
  color: var(--primary);
}
.stat__value {
  font-size: var(--step-3);
  font-weight: 800;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.stat__label { font-size: var(--step--1); color: var(--text-soft); }

/* --------------------------------------------------------------------------
   12. ARTICLE / PROSE
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   ARTICLE MEASURE
   Article pages keep the same 1240px shell as the front page, so the outer
   edges line up across the site.

   Everything inside the article — header, cover image, contents, body — fills
   the column edge to edge. Capping the text at a reading measure inside this
   shell would leave a wide dead band beside it, and shrinking the shell would
   break alignment with the rest of the site.

   Filling a column this wide means longer lines, so the body type is scaled up
   and the leading opened to keep each line comfortable to track.
   -------------------------------------------------------------------------- */
.is-single article,
.is-page article { --measure: 100%; }

.is-single article > *,
.is-page article > * { max-width: var(--measure); }

@media (min-width: 1024px) {
  /* A slightly wider sidebar trims the reading column and gives the widgets
     room to breathe. */
  .is-single .with-sidebar,
  .is-page .with-sidebar { grid-template-columns: minmax(0, 1fr) 23rem; }
}

.is-single .prose,
.is-page .prose {
  font-size: 1.2rem;
  line-height: 1.85;
}
.is-single .entry-summary,
.is-page .entry-summary { font-size: 1.24rem; line-height: 1.7; }

/* Navigational blocks are not reading matter — let them use the full column. */
.is-single article > .post-nav,
.is-single article > section,
.is-page article > .post-nav,
.is-page article > section { max-width: none; }

.entry-header { margin-bottom: var(--sp-6); }

/* --------------------------------------------------------------------------
   HEADLINE
   Four size brackets chosen in the template from the character count — see
   theme/single.php. The default sits at --step-3; a short headline is allowed
   to grow into display type, a long one steps down so it stays a headline
   instead of becoming a wall.
   -------------------------------------------------------------------------- */
.entry-title {
  font-size: var(--step-3);
  line-height: 1.16;
  letter-spacing: -.025em;

  /* Ragged right, unlike the body copy below. Justification was tried here and
     looked wrong: a headline has few words per line, so flushing both edges
     opens visible gaps between them, and at display sizes those gaps are as
     large as the letters. `balance` evens out the line lengths instead, which
     is what gives a headline its shape. Hyphenation is off for the same reason
     — a broken word in a headline reads as a typo. */
  text-wrap: balance;
  overflow-wrap: break-word;

  margin-bottom: var(--sp-4);
  position: relative;
}
.entry-title.is-display { font-size: var(--step-4); line-height: 1.08; letter-spacing: -.032em; }
.entry-title.is-long    { font-size: var(--step-2); line-height: 1.22; letter-spacing: -.018em; }
/* Its own clamp rather than --step-1: that step lands on top of the summary
   and the body copy, and a headline that matches its own lead is no headline. */
.entry-title.is-xlong {
  font-size: clamp(1.34rem, 1.18rem + .72vw, 1.8rem);
  line-height: 1.32;
  letter-spacing: -.012em;
}

/* Dimension rule closing the headline — the same drafting device the section
   headings and the dean's signature use. */
.entry-title::after {
  content: "";
  display: block;
  width: 3.5rem;
  height: 3px;
  border-radius: 2px;
  background: var(--accent);
  margin-top: var(--sp-4);
}

.entry-summary {
  font-size: var(--step-1);
  color: var(--text-soft);
  line-height: 1.6;
  padding-inline-start: var(--sp-4);
  border-inline-start: 3px solid var(--primary);
  margin-bottom: var(--sp-5);
}
.entry-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4);
  padding-block: var(--sp-4);
  border-block: 1px solid var(--line);
  font-size: var(--step--1);
  color: var(--text-soft);
}
.entry-meta > * { display: inline-flex; align-items: center; gap: .4rem; }
.entry-author { display: flex; align-items: center; gap: var(--sp-3); }
.avatar {
  width: 34px; height: 34px; flex: none;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 700;
  font-size: .8rem;
  overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }

.entry-figure {
  margin-block: var(--sp-5);
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
}
.entry-figure .rimg img, .entry-figure img { width: 100%; }
.entry-figure figcaption {
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-sunken);
  font-size: var(--step--1);
  color: var(--text-faint);
  border-top: 1px solid var(--line);
}

.prose {
  font-size: 1.055rem;
  line-height: 1.78;
  color: var(--text);
  /* Falls back when .prose is used outside an article (programme panels). */
  max-width: var(--measure, 68ch);
  /* Indonesian compounds are long; allow breaking rather than a ragged gutter. */
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
}

/* Paragraph rhythm: a clear gap between paragraphs, a larger one before a
   new section, and no gap collapsing at the edges. */
.prose > * + * { margin-top: 1.4em; }
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }

/* Body copy is justified, following Indonesian editorial convention. Automatic
   hyphenation is essential here: without it, justification opens rivers of
   white space between words. */
.prose p,
.prose li,
.prose blockquote p {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
}

.prose p {
  margin-block: 0;
  text-wrap: pretty;      /* avoids a single-word last line */
}

/* Short lines have nowhere to distribute the extra space, so justification
   only makes them look broken. Captions and metadata stay ranged-left. */
.prose figcaption,
.prose .wp-caption-text,
.prose td, .prose th,
.prose .wp-block-button__link {
  text-align: start;
  hyphens: manual;
}
.prose figcaption, .prose .wp-caption-text { text-align: center; }

/* Justified text is harder to track for readers with dyslexia — the
   accessibility panel's readable mode turns it off along with the font swap. */
html.a11y-readable .prose p,
html.a11y-readable .prose li,
html.a11y-readable .prose blockquote p {
  text-align: start;
  hyphens: manual;
}

/* A very narrow column cannot justify without large gaps. */
@media (max-width: 380px) {
  .prose p, .prose li { text-align: start; }
}

/* Opening paragraph reads as a lead-in. */
.prose p.is-lead {
  font-size: 1.12rem;
  line-height: 1.68;
  color: var(--text);
}
.prose p.is-lead + p { margin-top: 1.5em; }

/* A dateline like "Makassar, ft.umi.ac.id –" opens most articles. */
.prose p.is-lead > strong:first-child { color: var(--primary); }

/* Whole-paragraph quotations. Faculty news is largely quotation, so these are
   set apart to break up the column rather than left to blend into it. */
.prose p.is-quote {
  position: relative;
  margin-block: 1.7em;
  padding: .1em 0 .1em 1.35em;
  border-inline-start: 3px solid var(--accent);
  color: var(--text-soft);
  font-size: 1.04rem;
  line-height: 1.72;
}
.prose p.is-quote::before {
  content: "";
  position: absolute;
  inset-inline-start: -3px; top: 0;
  width: 3px; height: 1.6em;
  background: var(--primary);
}
.prose p.is-quote + p.is-quote { margin-top: 1.1em; }
.prose h2 { font-size: var(--step-2); margin-top: 2.1em; margin-bottom: .55em; scroll-margin-top: 6rem; }
.prose h3 { font-size: var(--step-1); margin-top: 1.7em; margin-bottom: .45em; scroll-margin-top: 6rem; }
.prose h4 { font-size: 1.08rem; margin-top: 1.4em; }
.prose h2::before {
  content: "";
  display: block;
  width: 2.2rem; height: 3px;
  border-radius: 2px;
  background: var(--accent);
  margin-bottom: .55rem;
}
.prose a { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--primary) 40%, transparent); }
.prose a:hover { text-decoration-color: currentColor; }
.prose ul, .prose ol { padding-inline-start: 1.4em; }
.prose li + li { margin-top: .45em; }
.prose li { line-height: 1.72; }
.prose li::marker { color: var(--primary); }
.prose img, .prose picture, .prose figure { border-radius: var(--r-md); }

/* Figures get more air than paragraphs so they read as a break in the flow. */
.prose figure { margin-block: 2.1em; }
.prose > figure:first-child { margin-top: 0; }

/* Headings never sit tight against the paragraph above them. */
.prose h2 + p, .prose h3 + p, .prose h4 + p { margin-top: .55em; }

/* Never leave a heading stranded at the foot of a column or page. */
.prose h2, .prose h3, .prose h4 { break-after: avoid; page-break-after: avoid; }
.prose p, .prose li { orphans: 2; widows: 2; }
.prose figcaption { font-size: var(--step--1); color: var(--text-faint); margin-top: .6rem; text-align: center; }
.prose blockquote {
  margin-block: 1.8em;
  padding: var(--sp-5);
  background: var(--bg-sunken);
  border-inline-start: 4px solid var(--accent);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-size: 1.08rem;
  color: var(--text-soft);
}
.prose blockquote p:first-child::before { content: "“"; color: var(--accent); font-size: 1.8em; line-height: 0; vertical-align: -.28em; margin-inline-end: .1em; }
.prose code {
  font-family: var(--font-mono);
  font-size: .88em;
  padding: .16em .4em;
  border-radius: var(--r-xs);
  background: var(--bg-sunken);
  border: 1px solid var(--line);
}
.prose pre {
  padding: var(--sp-4);
  background: var(--blueprint-800);
  color: #DCE7F2;
  border-radius: var(--r-md);
  overflow-x: auto;
  font-size: .88rem;
  line-height: 1.6;
}
.prose pre code { background: none; border: 0; padding: 0; color: inherit; }
.prose hr { border: 0; border-top: 1px dashed var(--line-strong); margin-block: 2.4em; }

.heading-anchor {
  opacity: 0;
  margin-inline-start: .4em;
  color: var(--text-faint);
  text-decoration: none;
  font-weight: 400;
  transition: opacity .18s;
}
.has-anchor:hover .heading-anchor, .heading-anchor:focus { opacity: 1; }

.table-scroll { overflow-x: auto; margin-block: 1.8em; border: 1px solid var(--line); border-radius: var(--r-md); }
.data-table { width: 100%; border-collapse: collapse; font-size: .93rem; }
.data-table th, .data-table td { padding: .7rem .9rem; text-align: start; border-bottom: 1px solid var(--line); }
.data-table thead th { background: var(--bg-sunken); font-weight: 650; font-size: var(--step--1); text-transform: uppercase; letter-spacing: .04em; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover { background: var(--bg-sunken); }

.embed-responsive { position: relative; aspect-ratio: 16 / 9; margin-block: 1.8em; border-radius: var(--r-md); overflow: hidden; background: var(--bg-sunken); }
.embed-responsive iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.is-external::after {
  content: "↗";
  font-size: .8em;
  margin-inline-start: .2em;
  opacity: .6;
}

/* --------------------------------------------------------------------------
   PANES
   Sections recovered from Elementor toggle/accordion widgets. The titles came
   from that widget in capitals, so they are set as a label bar where capitals
   read as deliberate rather than shouted.
   -------------------------------------------------------------------------- */
.prose .pane {
  margin-block: 1.6em;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-raised);
  overflow: hidden;
  counter-increment: pane;
}

.prose .pane > h2 {
  display: flex;
  align-items: baseline;
  gap: .7rem;
  margin: 0;
  padding: .8rem clamp(1rem, 3vw, 1.6rem);
  border-bottom: 1px solid var(--line);
  background: var(--bg-sunken);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.4;
  color: var(--primary);
  scroll-margin-top: 6rem;
}
/* Sheet number in the label bar, matching the drawing-sheet motif. */
.prose .pane > h2::before {
  content: counter(pane, decimal-leading-zero);
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--accent);
  flex: none;
}

.prose .pane > :not(h2) { padding-inline: clamp(1rem, 3vw, 1.6rem); }
.prose .pane > :nth-child(2) { margin-block-start: 1.1em; }
.prose .pane > :last-child { margin-block-end: 1.1em; }

/* Lists keep their padding inside the pane rather than gaining it twice. */
.prose .pane > ol,
.prose .pane > ul { padding-inline-start: calc(clamp(1rem, 3vw, 1.6rem) + 1.3em); }

/* A single quoted sentence — the vision statement — carries the pane alone. */
.prose .pane > p.is-quote:only-of-type {
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--text);
  font-weight: 500;
}

.prose { counter-reset: pane; }

/* A notice inside the copy itself. Unlike .editor-flag this one is public:
   placeholder figures must announce themselves to every reader, not only to
   whoever is signed in. */
.callout {
  display: block;
  margin-block: 1.6em;
  padding: 1rem 1.2rem;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  border-inline-start: 4px solid var(--primary);
  background: var(--bg-sunken);
  font-size: var(--step--1);
  line-height: 1.7;
  color: var(--text-soft);
}
.callout p { margin: 0; }
.callout strong { color: var(--text); }
.callout--draft {
  border-inline-start-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, var(--bg-sunken));
}

/* --------------------------------------------------------------------------
   LEGACY WORDPRESS CONTENT
   The 105 imported articles carry WordPress block classes. Rather than rewrite
   their markup, honour the handful that actually affect layout so the archive
   reads the way it was authored.
   -------------------------------------------------------------------------- */
.prose .wp-block-image { margin-block: 1.8em; }
.prose .wp-block-image img { border-radius: var(--r-md); }
.prose .wp-block-image figcaption { text-align: center; }

.prose .alignleft {
  float: inline-start;
  margin: .4em 1.6em 1.2em 0;
  max-width: min(50%, 22rem);
}
.prose .alignright {
  float: inline-end;
  margin: .4em 0 1.2em 1.6em;
  max-width: min(50%, 22rem);
}
.prose .aligncenter,
.prose .wp-block-image.aligncenter { margin-inline: auto; text-align: center; }
.prose .alignwide  { width: min(112%, 100vw - 3rem); margin-inline: auto; }
.prose .alignfull  { width: min(120%, 100vw - 2rem); margin-inline: auto; }
.prose .alignnone  { float: none; margin-inline: 0; }

/* Clear floats so a short paragraph never collides with the next heading. */
.prose h2, .prose h3, .prose h4 { clear: both; }

.prose .size-full   { width: 100%; height: auto; }
.prose .size-large  { max-width: 100%; height: auto; }
.prose .size-medium { max-width: min(100%, 30rem); height: auto; }

/* Galleries: WordPress emits either a flex layout or nested figures. */
.prose .wp-block-gallery,
.prose .wp-block-gallery-is-layout-flex {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--sp-3);
  margin-block: 1.8em;
  padding: 0;
  list-style: none;
}
.prose .wp-block-gallery figure,
.prose .wp-block-gallery .wp-block-image { margin: 0; }
.prose .wp-block-gallery img {
  width: 100%;
  border-radius: var(--r-md);
}

/* WordPress distinguishes cropped galleries (uniform tiles) from uncropped
   ones (native aspect ratios). Honour both rather than forcing one. */
.prose .wp-block-gallery.is-cropped img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.prose .wp-block-gallery:not(.is-cropped) img {
  height: auto;
  object-fit: contain;
}

/* Explicit column counts; `columns-default` keeps the responsive auto-fit. */
.prose .wp-block-gallery.columns-default { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.prose .wp-block-gallery.columns-1 { grid-template-columns: 1fr; }
.prose .wp-block-gallery.columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.prose .wp-block-gallery.columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.prose .wp-block-gallery.columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 640px) {
  .prose .wp-block-gallery.columns-3,
  .prose .wp-block-gallery.columns-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.prose .wp-block-separator {
  border: 0;
  border-top: 1px dashed var(--line-strong);
  margin-block: 2.4em;
  max-width: 100%;
}
.prose .wp-block-separator.is-style-wide { max-width: 100%; }
.prose .wp-block-separator.is-style-dots {
  border: 0;
  text-align: center;
  line-height: 1;
}
.prose .wp-block-separator.is-style-dots::before {
  content: "···";
  color: var(--accent);
  font-size: 1.6rem;
  letter-spacing: .6em;
}

.prose .wp-block-button__link,
.prose .wp-element-button {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .7rem 1.3rem;
  border-radius: var(--r-md);
  background: var(--primary);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}
.prose .wp-block-button__link:hover { background: var(--primary-hover); color: #fff; }

.prose .wp-block-table { margin-block: 1.8em; }
.prose .wp-block-embed { margin-block: 1.8em; }
.prose .wp-block-embed__wrapper { position: relative; }

/* Applied by Content::upgradeImage() to every rewritten <img>. */
.img-fluid { max-width: 100%; height: auto; }

/* Imported carousels (Swiper) — the library is not shipped, so degrade the
   markup into a readable grid instead of a collapsed, unusable slider. */
.prose .swiper,
.prose .swiper-container { overflow: visible; }
.prose .swiper-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--sp-3);
  transform: none !important;
  margin-block: 1.6em;
}
.prose .swiper-slide {
  width: auto !important;
  margin: 0 !important;
  flex: none;
}
.prose .swiper-slide img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-md);
}
.prose .swiper-button-next,
.prose .swiper-button-prev,
.prose .swiper-pagination,
.prose .swiper-scrollbar { display: none; }

/* Page-builder wrappers left in imported markup (Elementor). Their own
   stylesheet is not shipped, so flatten them to plain flow rather than let
   half-applied grid classes distort the column. */
.prose [class*="elementor-"] {
  width: auto;
  max-width: 100%;
  margin-inline: 0;
  padding: 0;
  background: none;
}
.prose .elementor-widget-container > :first-child { margin-top: 0; }

/* Font Awesome markers without the font loaded would render as empty boxes. */
.prose i[class^="fa"], .prose i[class*=" fa"],
.prose span[class^="fa-"], .prose span[class*=" fa-"] { display: none; }

.prose .wp-caption { max-width: 100%; }
.prose .wp-caption-text {
  font-size: var(--step--1);
  color: var(--text-faint);
  text-align: center;
  margin-top: .5rem;
}
.prose .screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 640px) {
  /* Floats are unreadable on a narrow column. */
  .prose .alignleft, .prose .alignright {
    float: none;
    max-width: 100%;
    margin-inline: 0;
  }
}

/* -- table of contents ------------------------------------------------------ */
.toc {
  padding: var(--sp-4) var(--sp-5);
  background: var(--bg-sunken);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  margin-bottom: var(--sp-6);
}
.toc summary { font-weight: 700; cursor: pointer; display: flex; align-items: center; gap: .5rem; }
.toc summary::-webkit-details-marker { display: none; }
.toc ol { list-style: none; padding: 0; margin-top: var(--sp-3); counter-reset: toc; }
.toc li { counter-increment: toc; }
.toc li[data-level="3"] { padding-inline-start: var(--sp-4); }
.toc a {
  display: block;
  padding: .35rem 0;
  color: var(--text-soft);
  text-decoration: none;
  font-size: .92rem;
  border-inline-start: 2px solid transparent;
  padding-inline-start: .7rem;
  transition: color .18s, border-color .18s;
}
.toc a::before { content: counter(toc) ". "; font-family: var(--font-mono); font-size: .8em; color: var(--text-faint); }
.toc a:hover, .toc a.is-current { color: var(--primary); border-inline-start-color: var(--primary); }

/* -- share / tags ----------------------------------------------------------- */
.tag-list { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.tag-list a {
  padding: .3rem .7rem;
  border-radius: var(--r-full);
  background: var(--bg-sunken);
  border: 1px solid var(--line);
  font-size: var(--step--1);
  color: var(--text-soft);
  text-decoration: none;
  transition: all .18s;
}
.tag-list a:hover { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); }

.share { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.share__btn {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--bg-raised);
  color: var(--text-soft);
  transition: all .18s;
}
.share__btn:hover { background: var(--primary); border-color: var(--primary); color: #fff; transform: translateY(-2px); }

.post-nav { display: grid; gap: var(--sp-4); margin-block: var(--sp-7); }
@media (min-width: 720px) { .post-nav { grid-template-columns: 1fr 1fr; } }
.post-nav a {
  display: flex; flex-direction: column; gap: .35rem;
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-raised);
  text-decoration: none;
  transition: all .2s var(--ease);
}
.post-nav a:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: var(--shadow-2); }
.post-nav .dir { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); display: flex; align-items: center; gap: .35rem; }
.post-nav .ttl { font-weight: 600; color: var(--text); line-height: 1.4; }
.post-nav .prev { text-align: start; }
.post-nav .next { text-align: end; }
.post-nav .next .dir { justify-content: flex-end; }

/* --------------------------------------------------------------------------
   13. SIDEBAR
   -------------------------------------------------------------------------- */
.sidebar { display: grid; gap: var(--sp-5); align-content: start; }
@media (min-width: 1024px) { .sidebar { position: sticky; top: calc(var(--header-h) + var(--sp-4)); } }

.widget {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
}
.widget__title {
  display: flex; align-items: center; gap: .5rem;
  font-size: 1rem;
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--line);
}
.widget__title svg { color: var(--primary); }

.widget--cta {
  background: linear-gradient(145deg, var(--blueprint-800), var(--blueprint-600));
  border-color: transparent;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.widget--cta::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 20px 20px;
}
.widget--cta > * { position: relative; }
.widget--cta .widget__title { border-color: rgba(255, 255, 255, .18); }
.widget--cta p { color: rgba(255, 255, 255, .78); font-size: .93rem; margin-bottom: var(--sp-4); }

.cat-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .1rem; }
.cat-list a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: .5rem .6rem;
  border-radius: var(--r-sm);
  text-decoration: none;
  color: var(--text-soft);
  font-size: .93rem;
  transition: all .16s;
}
.cat-list a:hover { background: var(--primary-soft); color: var(--primary); }
.cat-list .count {
  font-family: var(--font-mono);
  font-size: .72rem;
  padding: .1rem .45rem;
  border-radius: var(--r-full);
  background: var(--bg-sunken);
  border: 1px solid var(--line);
  color: var(--text-faint);
}

/* --------------------------------------------------------------------------
   14. FORMS
   -------------------------------------------------------------------------- */
.field { display: grid; gap: .4rem; margin-bottom: var(--sp-4); }
.field > label { font-weight: 600; font-size: .92rem; }
.field .req { color: var(--crimson-600); }
.field .hint { font-size: var(--step--1); color: var(--text-faint); }
.field .err { font-size: var(--step--1); color: var(--crimson-600); display: flex; align-items: center; gap: .3rem; }

.input, .textarea, .select {
  width: 100%;
  padding: .68rem .9rem;
  border-radius: var(--r-md);
  border: 1px solid var(--line-strong);
  background: var(--bg-raised);
  color: var(--text);
  transition: border-color .18s, box-shadow .18s;
  font-size: .97rem;
}
.input:hover, .textarea:hover, .select:hover { border-color: var(--text-faint); }
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--shadow-focus);
}
.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--crimson-600); }
.textarea { min-height: 8.5rem; resize: vertical; line-height: 1.6; }
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364798E' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .8rem center;
  padding-inline-end: 2.4rem;
}
[dir="rtl"] .select { background-position: left .8rem center; padding-inline-end: .9rem; padding-inline-start: 2.4rem; }

.checkbox { display: flex; align-items: start; gap: .6rem; font-size: .92rem; cursor: pointer; }
.checkbox input { width: 1.1rem; height: 1.1rem; margin-top: .18rem; accent-color: var(--primary); flex: none; }

.form-row { display: grid; gap: var(--sp-4); }
@media (min-width: 640px) { .form-row--2 { grid-template-columns: 1fr 1fr; } }

/* -- captcha ---------------------------------------------------------------- */
.captcha { display: flex; align-items: flex-end; gap: var(--sp-3); flex-wrap: wrap; }
.captcha__challenge {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--bg-sunken);
}
.captcha__challenge img { border-radius: var(--r-sm); }
.captcha__math {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  font-weight: 700;
  padding: .5rem .9rem;
  letter-spacing: .02em;
}
.captcha__field { flex: 1; min-width: 9rem; }

/* -- alerts ----------------------------------------------------------------- */
.alert {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-4);
  border-radius: var(--r-md);
  border: 1px solid;
  margin-bottom: var(--sp-4);
  font-size: .94rem;
}
.alert svg { flex: none; margin-top: .1rem; }
.alert--success { background: var(--verde-100); border-color: var(--verde-600); color: #14523E; }
.alert--error   { background: var(--crimson-100); border-color: var(--crimson-600); color: #7A1A14; }
.alert--warn    { background: var(--amber-100); border-color: var(--amber-600); color: #7A3810; }
.alert--info    { background: var(--steel-100); border-color: var(--steel-700); color: #0B3E6E; }
:root[data-theme="dark"] .alert { color: var(--text); }

/* --------------------------------------------------------------------------
   15. PAGINATION
   -------------------------------------------------------------------------- */
.pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); margin-top: var(--sp-7); }
.pagination a, .pagination span {
  min-width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  padding-inline: .7rem;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--bg-raised);
  color: var(--text-soft);
  text-decoration: none;
  font-weight: 600;
  font-size: .92rem;
  font-variant-numeric: tabular-nums;
  transition: all .18s;
}
.pagination a:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }
.pagination .is-current { background: var(--primary); border-color: var(--primary); color: #fff; }
.pagination .is-gap { border: 0; background: none; }

/* --------------------------------------------------------------------------
   16. BREADCRUMB
   -------------------------------------------------------------------------- */
.breadcrumb { padding-block: var(--sp-4); font-size: var(--step--1); }
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; list-style: none; padding: 0; margin: 0; }
.breadcrumb li { display: inline-flex; align-items: center; gap: .4rem; color: var(--text-faint); }
.breadcrumb a { color: var(--text-soft); text-decoration: none; }
.breadcrumb a:hover { color: var(--primary); text-decoration: underline; }
.breadcrumb [aria-current] { color: var(--text); font-weight: 550; }
.breadcrumb .sep { color: var(--line-strong); }

/* --------------------------------------------------------------------------
   17. PAGE HEADER (archives)
   -------------------------------------------------------------------------- */
.page-head {
  position: relative;
  padding-block: clamp(var(--sp-6), 5vw, var(--sp-8));
  background: var(--bg-sunken);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.page-head::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: linear-gradient(to bottom, #000, transparent 85%);
}
.page-head__inner { position: relative; display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap; }
.page-head__icon {
  width: 68px; height: 68px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--r-lg);
  background: var(--bg-raised);
  border: 1px solid var(--line);
  color: var(--primary);
  box-shadow: var(--shadow-1);
}
.page-head h1 { font-size: var(--step-3); margin-bottom: .35rem; }
.page-head p { color: var(--text-soft); max-width: 60ch; }
.page-head__count {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--text-faint);
  margin-top: .5rem;
}

/* --------------------------------------------------------------------------
   18. GALLERY
   -------------------------------------------------------------------------- */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: var(--sp-3); }
.gallery-item {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-sunken);
  cursor: zoom-in;
  display: block;
}
.gallery-item .rimg, .gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s var(--ease); }
.gallery-item:hover img { transform: scale(1.07); }
.gallery-item__cap {
  position: absolute; inset-inline: 0; bottom: 0;
  padding: var(--sp-4) var(--sp-3) var(--sp-3);
  background: linear-gradient(to top, rgba(6, 19, 32, .9), transparent);
  color: #fff;
  font-size: var(--step--1);
  opacity: 0;
  transform: translateY(6px);
  transition: all .25s var(--ease);
}
.gallery-item:hover .gallery-item__cap, .gallery-item:focus-visible .gallery-item__cap { opacity: 1; transform: translateY(0); }

/* lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: none;
  place-items: center;
  background: rgba(4, 12, 20, .95);
  padding: var(--sp-5);
}
.lightbox.is-open { display: grid; }
.lightbox img { max-width: min(94vw, 1400px); max-height: 86vh; border-radius: var(--r-md); object-fit: contain; }
.lightbox__cap { color: rgba(255, 255, 255, .8); text-align: center; margin-top: var(--sp-3); font-size: .93rem; }
.lightbox__close, .lightbox__nav {
  position: absolute;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .2);
  transition: background .18s;
}
.lightbox__close:hover, .lightbox__nav:hover { background: rgba(255, 255, 255, .24); }
.lightbox__close { top: var(--sp-4); inset-inline-end: var(--sp-4); }
.lightbox__nav--prev { inset-inline-start: var(--sp-4); top: 50%; transform: translateY(-50%); }
.lightbox__nav--next { inset-inline-end: var(--sp-4); top: 50%; transform: translateY(-50%); }

/* --------------------------------------------------------------------------
   19. FAQ / ACCORDION
   -------------------------------------------------------------------------- */
.faq { display: grid; gap: var(--sp-3); }
.faq details {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-raised);
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}
.faq details[open] { border-color: var(--primary); box-shadow: var(--shadow-1); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  font-weight: 620;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  width: 12px; height: 12px; flex: none;
  border-inline-end: 2px solid var(--text-faint);
  border-block-end: 2px solid var(--text-faint);
  transform: rotate(45deg);
  transition: transform .25s var(--ease);
  margin-bottom: 4px;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-bottom: 0; margin-top: 5px; }
.faq summary:hover { color: var(--primary); }
.faq__body { padding: 0 var(--sp-5) var(--sp-5); color: var(--text-soft); line-height: 1.72; }

/* --------------------------------------------------------------------------
   20. SEARCH
   -------------------------------------------------------------------------- */
.search-overlay {
  position: fixed; inset: 0; z-index: 160;
  background: rgba(6, 19, 32, .6);
  backdrop-filter: blur(6px);
  display: none;
  padding-top: 12vh;
}
.search-overlay.is-open { display: block; }
.search-overlay__box {
  width: min(92vw, 40rem);
  margin-inline: auto;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-3);
  overflow: hidden;
}
.search-overlay form { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); }
.search-overlay input {
  flex: 1;
  border: 0; background: none;
  font-size: 1.1rem;
  padding: .4rem 0;
}
.search-overlay input:focus { outline: none; }
.search-overlay__hint { padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--line); font-size: var(--step--1); color: var(--text-faint); background: var(--bg-sunken); }
kbd {
  font-family: var(--font-mono);
  font-size: .75rem;
  padding: .1rem .4rem;
  border-radius: var(--r-xs);
  border: 1px solid var(--line-strong);
  background: var(--bg-raised);
  box-shadow: 0 1px 0 var(--line-strong);
}

.result { padding: var(--sp-5) 0; border-bottom: 1px solid var(--line); }
.result:last-child { border-bottom: 0; }
.result h3 { font-size: 1.12rem; margin-bottom: .3rem; }
.result h3 a { color: var(--text); text-decoration: none; }
.result h3 a:hover { color: var(--primary); text-decoration: underline; }
.result__url { font-family: var(--font-mono); font-size: var(--step--2); color: var(--verde-600); margin-bottom: .5rem; word-break: break-all; }
.result p { color: var(--text-soft); font-size: .94rem; }
.result mark { background: var(--amber-100); color: inherit; padding: 0 .15em; border-radius: 2px; }

/* --------------------------------------------------------------------------
   21. FOOTER
   -------------------------------------------------------------------------- */
.site-footer {
  position: relative;
  background: var(--blueprint-900);
  color: rgba(255, 255, 255, .72);
  padding-top: var(--sp-8);
  margin-top: var(--sp-8);
  overflow: hidden;
}
.site-footer::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(to bottom, #000, transparent 60%);
}
.site-footer > * { position: relative; }
.site-footer a { color: rgba(255, 255, 255, .72); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }

.footer-grid { display: grid; gap: var(--sp-6); }
@media (min-width: 720px)  { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr; } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: 1.8fr 1fr 1fr 1.2fr; } }

.footer-brand { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.footer-brand .brand__name { color: #fff; }
.footer-about { font-size: .93rem; line-height: 1.7; max-width: 34ch; margin-bottom: var(--sp-4); }

.footer-title {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.footer-links { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; font-size: .93rem; }
.footer-links a { display: inline-flex; align-items: center; gap: .4rem; }
.footer-links a::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--amber-500); opacity: .55; flex: none; }

.footer-contact { display: grid; gap: var(--sp-3); font-size: .93rem; }
.footer-contact li { display: flex; gap: var(--sp-3); align-items: flex-start; list-style: none; }
.footer-contact svg { flex: none; margin-top: .15rem; color: var(--amber-500); }

.social-row { display: flex; gap: var(--sp-2); margin-top: var(--sp-4); }
.social-row a {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .12);
  color: rgba(255, 255, 255, .85);
  transition: all .2s var(--ease);
}
.social-row a:hover { background: var(--primary); border-color: var(--primary); color: #fff; transform: translateY(-3px); }

.newsletter { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); }
.newsletter input {
  flex: 1; min-width: 0;
  padding: .6rem .8rem;
  border-radius: var(--r-md);
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .07);
  color: #fff;
  font-size: .92rem;
}
.newsletter input::placeholder { color: rgba(255, 255, 255, .45); }
.newsletter input:focus { outline: none; border-color: var(--steel-500); box-shadow: 0 0 0 3px rgba(46, 143, 221, .25); }

.footer-bottom {
  margin-top: var(--sp-7);
  padding-block: var(--sp-4);
  border-top: 1px solid rgba(255, 255, 255, .1);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--sp-3);
  font-size: var(--step--1);
}
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: var(--sp-4); }

/* --------------------------------------------------------------------------
   22. FLOATING CONTROLS
   Accessibility panel bottom-start, back-to-top bottom-end.
   -------------------------------------------------------------------------- */
.fab {
  position: fixed;
  z-index: 120;
  width: 50px; height: 50px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--bg-raised);
  color: var(--primary);
  box-shadow: var(--shadow-2);
  transition: transform .22s var(--ease), background .2s, opacity .22s, visibility .22s;
}
.fab:hover { transform: translateY(-3px) scale(1.04); background: var(--primary); color: #fff; border-color: var(--primary); }

.a11y-fab { inset-block-end: var(--sp-5); inset-inline-start: var(--sp-5); }
.a11y-fab[aria-expanded="true"] { background: var(--primary); color: #fff; }

.top-fab {
  inset-block-end: var(--sp-5); inset-inline-end: var(--sp-5);
  opacity: 0; visibility: hidden;
}
.top-fab.is-visible { opacity: 1; visibility: visible; }
.top-fab__ring { position: absolute; inset: -1px; transform: rotate(-90deg); pointer-events: none; }
.top-fab__ring circle { fill: none; stroke-width: 2.5; }
.top-fab__ring .track { stroke: var(--line); }
.top-fab__ring .bar {
  stroke: var(--accent);
  stroke-linecap: round;
  stroke-dasharray: var(--circ, 151);
  stroke-dashoffset: var(--dash, 151);
  transition: stroke-dashoffset .1s linear;
}

@media (max-width: 640px) {
  .a11y-fab, .top-fab { width: 44px; height: 44px; }
  .a11y-fab { inset-block-end: var(--sp-4); inset-inline-start: var(--sp-4); }
  .top-fab  { inset-block-end: var(--sp-4); inset-inline-end: var(--sp-4); }
}

/* -- accessibility panel ---------------------------------------------------- */
.a11y-panel {
  position: fixed;
  inset-block-end: calc(var(--sp-5) + 62px);
  inset-inline-start: var(--sp-5);
  z-index: 121;
  width: min(92vw, 20.5rem);
  padding: var(--sp-5);
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-3);
  display: none;
}
.a11y-panel.is-open { display: block; animation: pop .22s var(--ease); }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.97); } }
@media (max-width: 640px) { .a11y-panel { inset-inline: var(--sp-4); inset-block-end: calc(var(--sp-4) + 56px); width: auto; } }

.a11y-panel h2 { font-size: 1rem; display: flex; align-items: center; gap: .5rem; margin-bottom: var(--sp-4); }
.a11y-group + .a11y-group { margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--line); }
.a11y-group__label {
  display: flex; align-items: center; justify-content: space-between;
  font-size: var(--step--1);
  font-weight: 650;
  color: var(--text-soft);
  margin-bottom: var(--sp-2);
}
.a11y-group__label output { font-family: var(--font-mono); color: var(--primary); }
.seg { display: grid; grid-auto-flow: column; gap: 2px; padding: 3px; background: var(--bg-sunken); border: 1px solid var(--line); border-radius: var(--r-md); }
.seg button {
  padding: .45rem .3rem;
  border-radius: var(--r-sm);
  font-size: .85rem;
  font-weight: 600;
  color: var(--text-soft);
  transition: all .16s;
}
.seg button:hover { background: var(--bg-raised); color: var(--text); }
.seg button[aria-pressed="true"] { background: var(--primary); color: #fff; }

.a11y-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  width: 100%;
  padding: .6rem .2rem;
  font-size: .92rem;
  color: var(--text);
  text-align: start;
}
.a11y-toggle:hover { color: var(--primary); }
.switch {
  width: 42px; height: 24px; flex: none;
  border-radius: var(--r-full);
  background: var(--line-strong);
  position: relative;
  transition: background .2s;
}
.switch::after {
  content: "";
  position: absolute; top: 3px; inset-inline-start: 3px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--shadow-1);
  transition: transform .22s var(--ease);
}
[aria-pressed="true"] .switch { background: var(--primary); }
[aria-pressed="true"] .switch::after { transform: translateX(18px); }
[dir="rtl"] [aria-pressed="true"] .switch::after { transform: translateX(-18px); }

.a11y-reset { width: 100%; margin-top: var(--sp-4); }

/* -- accessibility modes ---------------------------------------------------- */
html.a11y-links a:not(.btn):not(.icon-btn):not(.brand) {
  text-decoration: underline !important;
  text-underline-offset: .2em;
}
html.a11y-readable * {
  font-family: Verdana, Tahoma, "DejaVu Sans", sans-serif !important;
  letter-spacing: .02em;
}
html.a11y-contrast {
  --text: #000; --text-soft: #1A1A1A; --text-faint: #333;
  --bg: #fff; --bg-raised: #fff; --bg-sunken: #F0F0F0;
  --line: #000; --line-strong: #000;
  --primary: #003C7A; --primary-soft: #E0EBF5;
}
html.a11y-contrast[data-theme="dark"] {
  --text: #fff; --text-soft: #EEE; --text-faint: #DDD;
  --bg: #000; --bg-raised: #0A0A0A; --bg-sunken: #141414;
  --line: #fff; --line-strong: #fff;
  --primary: #6EC1FF; --primary-soft: #0A2337;
}
html.a11y-contrast .card, html.a11y-contrast .widget, html.a11y-contrast .btn { border-width: 2px; }
html.a11y-no-motion *, html.a11y-no-motion *::before, html.a11y-no-motion *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}
html.a11y-mask body::after {
  content: "";
  position: fixed; inset: 0;
  z-index: 119;
  pointer-events: none;
  background: rgba(0, 0, 0, .55);
  mask-image: linear-gradient(to bottom,
    #000 0, #000 calc(var(--mask-y, 50vh) - 5.5rem),
    transparent calc(var(--mask-y, 50vh) - 5.5rem), transparent calc(var(--mask-y, 50vh) + 5.5rem),
    #000 calc(var(--mask-y, 50vh) + 5.5rem), #000 100%);
}

/* --------------------------------------------------------------------------
   23. UTILITIES & MISC
   -------------------------------------------------------------------------- */
.rimg { display: block; position: relative; overflow: hidden; }
.rimg img { width: 100%; height: 100%; object-fit: cover; }
.rimg.is-placeholder { display: grid; place-items: center; color: var(--primary); background: var(--bg-sunken); aspect-ratio: 16/10; }
.rimg.is-placeholder svg { width: 100%; height: 100%; }

.text-center { text-align: center; }
.text-soft { color: var(--text-soft); }
.text-mono { font-family: var(--font-mono); }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.lead { font-size: var(--step-1); color: var(--text-soft); line-height: 1.6; }

.empty-state {
  display: grid; place-items: center; gap: var(--sp-4);
  padding: var(--sp-8) var(--sp-5);
  text-align: center;
  border: 2px dashed var(--line);
  border-radius: var(--r-lg);
  color: var(--text-faint);
}
.empty-state svg { color: var(--line-strong); }

.divider-marks {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-3);
  margin-block: var(--sp-6);
  color: var(--line-strong);
}
.divider-marks::before, .divider-marks::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.badge-live {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .18rem .55rem;
  border-radius: var(--r-full);
  background: var(--crimson-100);
  color: var(--crimson-600);
  font-size: var(--step--2);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.badge-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: pip 1.6s infinite; }

/* -- service tiles ---------------------------------------------------------- */
.service-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: var(--sp-3); }
.service-tile {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-3);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--bg-raised);
  text-decoration: none;
  color: var(--text);
  text-align: center;
  transition: all .22s var(--ease);
}
.service-tile:hover { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); transform: translateY(-3px); box-shadow: var(--shadow-2); }
.service-tile__icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  background: var(--bg-sunken);
  color: var(--primary);
  transition: all .22s;
}
.service-tile:hover .service-tile__icon { background: var(--primary); color: #fff; }
.service-tile strong { font-size: .92rem; font-weight: 620; }
.service-tile span { font-size: var(--step--2); color: var(--text-faint); }

/* -- CTA band --------------------------------------------------------------- */
.cta-band {
  position: relative;
  padding: clamp(var(--sp-6), 5vw, var(--sp-8));
  border-radius: var(--r-xl);
  background: linear-gradient(135deg, var(--steel-700), var(--blueprint-700) 70%);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.cta-band::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px);
  background-size: 26px 26px;
}
.cta-band::after {
  content: "";
  position: absolute; z-index: -1;
  inset-inline-end: -8%; bottom: -60%;
  width: 30rem; height: 30rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232, 138, 60, .32), transparent 65%);
}
.cta-band h2 { font-size: var(--step-3); margin-bottom: var(--sp-3); }
.cta-band p { color: rgba(255, 255, 255, .82); max-width: 46ch; margin-bottom: var(--sp-5); }
.cta-band__inner { display: grid; gap: var(--sp-5); align-items: center; }
@media (min-width: 880px) { .cta-band__inner { grid-template-columns: 1.4fr auto; } }

/* -- print ------------------------------------------------------------------ */
@media print {
  .utility-bar, .site-header, .site-footer, .fab, .a11y-panel,
  .sidebar, .post-nav, .share, .drawer, .search-overlay { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .prose { max-width: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
  .wrap { width: 100%; }
}