@font-face {
    font-family: "Sarvatrik";
    src: url("../fonts/SarvatrikWebLatin-Regular.woff2") format("woff2"),
         url("../fonts/SarvatrikWebLatin-Regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: "Sarvatrik";
    src: url("../fonts/SarvatrikWebLatin-Medium.woff2") format("woff2"),
         url("../fonts/SarvatrikWebLatin-Medium.woff") format("woff");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: "Sarvatrik";
    src: url("../fonts/SarvatrikWebLatin-SemiBold.woff2") format("woff2"),
         url("../fonts/SarvatrikWebLatin-SemiBold.woff") format("woff");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: "Sarvatrik";
    src: url("../fonts/Sarvatrik-Latin-Bold.woff2") format("woff2"),
         url("../fonts/Sarvatrik-Latin-Bold.woff") format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }
  /* LHI abc — special display face. Used only in select spots (e.g. the
     Hönnunardeild hero H1), never as body text. Single ExtraBold cut. */
  @font-face {
    font-family: "LHI abc";
    src: url("../fonts/lhiabc-ExtraBold.woff2") format("woff2"),
         url("../fonts/lhiabc-ExtraBold.woff") format("woff");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
  }

  :root {
    --ink: #0a0a0a;
    --ink-2: #1a1a1a;
    --paper: #ffffff;
    --paper-2: #0a0a0a0f;
    --line: rgba(10,10,10,0.12);
    --line-strong: rgba(10,10,10,0.2);
    --muted: rgba(10,10,10,0.6);

    --ice: #c5ecff;
    --pink: #ff9797;
    /* Half-way to white, for the two section backgrounds that want the brand
       colour without the saturation: (c + 255) / 2 per channel. */
    --ice-light: #e2f5ff;
    --pink-light: #ffcbcb;
    /* Eruption Red, from the brand sheet. Was #a51f0f — a shade off the
       brand value, for no reason anyone could name. One red, one name. */
    --red: #931f0f;
    --green: #069367;
    --purple: #53085b;

    --grad: linear-gradient(110deg, #c5ecff 0%, #d6d5ec 50%, #ff9797 100%);
    /* Brand-faithful gradient for headline emphasis: a darker translation
       of --grad's ice → mauve → pink journey. Every stop ≥ AA Large on
       white (3:1). Only safe for display-sized type (≥ 36px). */
    --grad-text: linear-gradient(110deg, #3a8eb5 0%, #a04688 50%, #cc5a6a 100%);

    --maxw: 1440px;
    --pad: clamp(20px, 4vw, 56px);
    --r: 2px;
  }

  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
  html, body { margin: 0; padding: 0; }
  body {
    font-family: "Sarvatrik", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 400;
    color: var(--ink);
    background: var(--paper);
    line-height: 1.45;
    font-feature-settings: "kern";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  a { color: inherit; text-decoration: none; }
  /* color: inherit on hover/focus too — legacy avista-styles has a global
     "a:hover, a:focus { color: #000 }" that otherwise leaks in. It is invisible
     on the paper sections, where the text is near-black anyway, but on the dark
     surfaces (the footer, .dept-hero, the inverted CTAs) it turns a hovered
     link black on black. Same leak the heading rule below fixes. */
  a:hover,
  a:focus { color: inherit; }
  a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
  img, svg { display: block; max-width: 100%; height: auto; }
  button { font: inherit; }
  /* Headings inherit their container's colour (the design is mono; colour comes
     from the section). Overrides the legacy avista-styles heading colours that
     otherwise leak in — e.g. a dark H1 on the dark .dept-hero image header. */
  h1, h2, h3, h4, h5, h6 { color: inherit; }

  /* The legacy stylesheet styles a bare `.tag` as a grey pill (background,
     padding, bold). The redesign reuses `.tag` as a plain uppercase micro-label,
     so strip that styling inside redesign components — scoped, NOT global,
     because legacy blocks rendered inside prose still rely on the old pill. */
  .mega .tag,
  .feature .tag,
  .twoup .pane .tag,
  .dept-cta .tag,
  .news-item .meta .tag,
  .related-card .tag {
    background: none;
    padding: 0;
    border-radius: 0;
    font-weight: inherit;
    line-height: inherit;
  }
  /* .mega .intro is a column flex container, so the label would otherwise
     stretch (and paint) the full column width. */
  .mega .intro .tag { align-self: start; }

  /* ------------------- Utility bar ------------------- */
  .utility {
    border-bottom: 1px solid var(--line);
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .utility .wrap {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 10px var(--pad);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
  }
  .utility .quick { display: flex; gap: 24px; flex-wrap: wrap; }
  .utility .quick a { opacity: 0.8; }
  .utility-right {
    display: flex;
    align-items: center;
    gap: 24px;
  }
  .utility .tools { display: flex; gap: 16px; }
  .utility .tools a { opacity: 0.8; }
  .utility .tools a:hover { opacity: 1; }
  .utility .lang { display: flex; gap: 8px; align-items: center; }
  .utility .lang span { opacity: 0.4; }
  .utility .lang .on { font-weight: 600; opacity: 1; }
  /*
   * The language links are 12px type, which on a phone is a 12×17px target —
   * the smallest thing on the site and the one people reach for when the site
   * came up in the wrong language. The padding grows the hit area to 40px and
   * the negative margin gives the space back, so the utility bar keeps its
   * height and nothing moves.
   */
  @media (max-width: 980px) {
    .utility .lang { gap: 2px; }
    .utility .lang a {
      display: inline-flex;
      align-items: center;
      min-height: 40px;
      padding: 0 10px;
      margin: -12px 0;
    }
  }
  .live-dot {
    display: inline-block;
    width: 6px; height: 6px;
    background: var(--red);
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: middle;
    animation: pulse 1.6s ease-in-out infinite;
  }
  @keyframes pulse { 50% { opacity: 0.4; } }

  /* ------------------- Header ------------------- */
  header.site {
    position: sticky;
    top: 0;
    background: var(--paper);
    z-index: 30;
    border-bottom: 1px solid var(--line);
  }
  header.site .wrap {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 var(--pad);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    min-height: 72px;
  }
  .logo {
    display: inline-flex; align-items: center;
    color: var(--ink);
  }
  .logo svg { height: 30px; width: auto; display: block; }
  .logo svg path, .logo svg polygon, .logo svg rect { fill: currentColor; }
  .logo .sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

  nav.primary { display: flex; gap: 28px; }
  nav.primary .nav-item { position: static; }
  nav.primary > .nav-item > a {
    font-size: 15px;
    font-weight: 500;
    position: relative;
    padding: 22px 0;
    display: inline-block;
  }
  nav.primary > .nav-item > a::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: 16px;
    height: 1px;
    background: var(--ink);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s ease;
  }
  /* The nav link is centred in a 72px bar while the mega panel starts at the
     bar's bottom edge, which leaves about 3px of header between them. Moving
     the pointer down from the link crosses that strip, .nav-item:hover goes
     false, and the panel starts closing — so it only stayed open if you were
     quick. This extends the link's hover area down to meet the panel. */
  nav.primary > .nav-item > a::before {
    content: "";
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    /* The gap measures 3.1px. Six covers it with room for rounding, and stops
       well inside the panel's top padding, so it never sits over a link. */
    height: 6px;
  }
  nav.primary > .nav-item > a:hover { text-decoration: none; }
  nav.primary > .nav-item:hover > a::after,
  nav.primary > .nav-item:focus-within > a::after { transform: scaleX(1); }
  nav.primary > .nav-item > a .caret {
    display: inline-block;
    width: 8px; height: 8px;
    margin-left: 6px;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    opacity: 0.6;
    transition: transform .25s ease, opacity .25s ease;
  }
  nav.primary > .nav-item:hover > a .caret,
  nav.primary > .nav-item:focus-within > a .caret {
    transform: translateY(0) rotate(-135deg);
    opacity: 1;
  }

  /* ------------------- Mega menu ------------------- */
  .mega {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: var(--paper);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease, visibility .25s;
    z-index: 25;
    box-shadow: 0 30px 60px -30px rgba(0,0,0,0.18);
  }
  .nav-item:hover > .mega,
  .nav-item:focus-within > .mega {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }
  /* Opens at once, closes after a beat. The pause covers the rest of the trip —
     moving diagonally toward a column, or clipping the gap between two nav
     items on the way — without which the panel closes under the pointer. */
  .mega { transition-delay: .18s; }
  .nav-item:hover > .mega,
  .nav-item:focus-within > .mega { transition-delay: 0s; }

  .mega-inner {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: clamp(36px, 4vw, 56px) var(--pad);
    display: grid;
    grid-template-columns: 1fr 1.6fr 1fr;
    gap: clamp(32px, 4vw, 64px);
    align-items: stretch;
  }
  .mega .intro {
    display: flex; flex-direction: column; gap: 10px;
    padding-right: 8px;
    border-right: 1px solid var(--line);
    padding-right: clamp(24px, 3vw, 48px);
  }
  .mega .intro .tag {
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    opacity: 0.5;
  }
  .mega .intro h4 {
    margin: 0;
    font-size: clamp(22px, 1.8vw, 28px);
    line-height: 1.15;
    font-weight: 500;
    letter-spacing: -0.01em;
    text-wrap: balance;
  }
  .mega .intro p {
    margin: 4px 0 0;
    font-size: 14px;
    line-height: 1.55;
    opacity: 0.7;
  }
  .mega .intro .all {
    margin-top: auto;
    padding-top: 16px;
    font-size: 13px;
    font-weight: 500;
  }
  .mega .intro .all::after { content: " →"; transition: padding-left .2s ease; }
  .mega .intro .all:hover { text-decoration: none; }
  .mega .intro .all:hover::after { padding-left: 4px; }

  .mega .columns {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px clamp(20px, 2.5vw, 44px);
  }
  .mega .column h5 {
    margin: 0 0 12px;
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    opacity: 0.5;
    font-weight: 500;
  }
  .mega .column ul { list-style: none; margin: 0; padding: 0; }
  .mega .column li + li { border-top: 1px dashed transparent; }
  .mega .column a {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    font-size: 15px;
    font-weight: 400;
    color: var(--ink);
    transition: padding .2s ease, color .2s ease;
  }
  .mega .column a:hover {
    text-decoration: none;
    padding-left: 6px;
  }
  .mega .column a .en {
    font-size: 12px;
    font-style: italic;
    opacity: 0.5;
    white-space: nowrap;
  }

  /*
   * The card is a solid colour. It used to carry a blurred brand gradient in
   * one corner, switchable per menu item — that is gone, along with the toggle
   * that drove it.
   *
   * The default is the second ink rather than the first: #1a1a1a against the
   * panel's paper, not #0a0a0a. It is a slight difference and it is what keeps
   * the card from reading as a hole punched in the menu.
   */
  .mega .featured {
    background: var(--ink-2);
    color: var(--paper);
    padding: 24px;
    border-radius: var(--r);
    display: flex; flex-direction: column; justify-content: space-between;
    min-height: 220px;
    position: relative;
    overflow: hidden;
  }

  /*
   * The card takes any of the surfaces a section can take. Text follows the
   * same rule as the section backgrounds: the light surfaces carry ink,
   * Eruption Red and Dark carry white. Dark has no class of its own — it is
   * what the card already was.
   */
  .mega .featured.featured--bg-paper      { background: var(--paper);      color: var(--ink); }
  .mega .featured.featured--bg-tint       { background: var(--paper-2);    color: var(--ink); }
  .mega .featured.featured--bg-ice        { background: var(--ice);        color: var(--ink); }
  .mega .featured.featured--bg-ice-light  { background: var(--ice-light);  color: var(--ink); }
  .mega .featured.featured--bg-pink       { background: var(--pink);       color: var(--ink); }
  .mega .featured.featured--bg-pink-light { background: var(--pink-light); color: var(--ink); }
  .mega .featured.featured--bg-grad       { background-image: var(--grad); color: var(--ink); }
  .mega .featured.featured--bg-eruption   { background: var(--red);        color: var(--paper); }
  /* Paper needs an edge: without one it is a white card on a white panel. */
  .mega .featured.featured--bg-paper { border: 1px solid var(--line); }
  .mega .featured .tag {
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    opacity: 0.7;
  }
  .mega .featured h6 {
    margin: 14px 0 0;
    font-size: clamp(20px, 1.6vw, 24px);
    line-height: 1.18;
    font-weight: 500;
    letter-spacing: -0.01em;
    text-wrap: balance;
  }
  .mega .featured .more {
    margin-top: 20px;
    font-size: 13px; font-weight: 500;
    display: inline-flex; align-items: center; gap: 6px;
  }
  .mega .featured:hover { text-decoration: none; }
  .mega .featured:hover .more::after { content: ""; }
  .mega .featured .more::after { content: " →"; transition: padding-left .2s ease; }
  .mega .featured:hover .more::after { padding-left: 4px; }

  .header-right { display: flex; align-items: center; gap: 8px; }
  .header-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--ink);
    color: var(--paper);
    padding: 10px 18px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.02em;
    transition: background .2s ease, color .2s ease;
    height: 40px;
  }
  .header-cta:hover { background: var(--pink); color: var(--ink); text-decoration: none; }

  /* Icon buttons (search, menu) */
  .icon-btn {
    appearance: none;
    background: transparent;
    border: 1px solid var(--line-strong);
    width: 40px; height: 40px;
    border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    color: var(--ink);
    transition: background .2s ease, color .2s ease, border-color .2s ease;
    flex-shrink: 0;
  }
  .icon-btn:hover {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
  }
  .icon-btn svg { width: 16px; height: 16px; display: block; }

  /* Burger lines */
  .burger {
    position: relative;
    width: 18px; height: 12px;
    pointer-events: none;
  }
  .burger::before, .burger::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    height: 1.4px;
    background: currentColor;
    transition: transform .3s ease, top .25s ease, opacity .2s ease;
  }
  .burger::before { top: 2px; }
  .burger::after  { top: 8px; }
  body.menu-open .menu-toggle .burger::before { top: 5px; transform: rotate(45deg); }
  body.menu-open .menu-toggle .burger::after  { top: 5px; transform: rotate(-45deg); }

  .menu-toggle { display: none; }
  @media (max-width: 980px) {
    .menu-toggle { display: inline-flex; }
    .header-cta { padding: 10px 16px; }
  }
  @media (max-width: 540px) {
    .header-cta .cta-text { display: none; }
    .header-cta { width: 40px; height: 40px; padding: 0; justify-content: center; }
  }

  /* ------------------- Search overlay ------------------- */
  .search-overlay {
    position: fixed; inset: 0;
    background: rgba(255,255,255,0.94);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 60;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
    display: flex; align-items: flex-start; justify-content: center;
    padding: clamp(24px, 8vh, 80px) var(--pad);
    overflow-y: auto;
  }
  .search-overlay.is-open {
    opacity: 1;
    visibility: visible;
  }
  .search-overlay-inner {
    width: 100%;
    max-width: 760px;
    position: relative;
  }
  .search-form {
    display: flex; align-items: center;
    border-bottom: 1px solid var(--ink);
    padding: 14px 0;
    gap: 18px;
  }
  .search-form .glass { width: 22px; height: 22px; opacity: 0.55; flex-shrink: 0; }
  .search-form input {
    appearance: none;
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: clamp(22px, 3vw, 34px);
    font-weight: 500;
    letter-spacing: -0.015em;
    color: var(--ink);
    width: 100%;
    outline: none;
    padding: 0;
  }
  .search-form input::placeholder { opacity: 0.4; color: var(--ink); }
  .search-suggest { margin-top: 32px; }
  .search-suggest .label {
    font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
    opacity: 0.5; margin-bottom: 14px;
  }
  .search-chips {
    display: flex; flex-wrap: wrap; gap: 8px;
    list-style: none; margin: 0; padding: 0;
  }
  .search-chips a {
    display: inline-block;
    padding: 9px 16px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    font-size: 14px;
    font-weight: 500;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
  }
  .search-chips a:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); text-decoration: none; }
  .search-close {
    position: absolute;
    top: 0; right: 0;
    transform: translateY(-60px);
    width: 44px; height: 44px;
    border-radius: 999px;
    border: 1px solid var(--line-strong);
    background: var(--paper);
    color: var(--ink);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .2s ease, color .2s ease;
  }
  .search-close:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
  @media (max-width: 600px) {
    .search-close { transform: translateY(0); top: -56px; }
  }

  /* ------------------- Mobile menu ------------------- */
  .mobile-menu {
    position: fixed; inset: 0;
    background: var(--ink);
    color: var(--paper);
    z-index: 55;
    display: none;
    flex-direction: column;
    padding: 20px var(--pad) 40px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity .35s ease, transform .35s ease, visibility .35s;
    overflow-y: auto;
  }
  @media (max-width: 980px) {
    .mobile-menu { display: flex; }
  }
  .mobile-menu.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .mobile-menu .menu-head {
    display: flex; justify-content: space-between; align-items: center;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(255,255,255,0.14);
    min-height: 56px;
  }
  .mobile-menu .menu-head .logo { color: var(--paper); }
  .mobile-menu .menu-head .logo svg { height: 24px; }
  .mobile-menu .menu-head .logo img {
    height: 24px;
    width: auto;
    filter: brightness(0) invert(1);
  }
  .mobile-menu .menu-head .icon-btn {
    color: var(--paper);
    border-color: rgba(255,255,255,0.25);
  }
  .mobile-menu .menu-head .icon-btn:hover {
    background: var(--paper); color: var(--ink); border-color: var(--paper);
  }
  .mobile-nav { margin-top: 8px; }
  .mobile-nav details {
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }
  .mobile-nav summary {
    display: flex; justify-content: space-between; align-items: center;
    list-style: none;
    cursor: pointer;
    padding: 20px 0;
    font-size: clamp(26px, 6vw, 36px);
    font-weight: 500;
    letter-spacing: -0.02em;
  }
  .mobile-nav summary::-webkit-details-marker { display: none; }
  .mobile-nav summary .plus {
    display: inline-block;
    width: 20px; height: 20px;
    position: relative;
    opacity: 0.6;
    transition: transform .3s ease;
  }
  .mobile-nav summary .plus::before, .mobile-nav summary .plus::after {
    content: ""; position: absolute;
    background: currentColor;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
  }
  .mobile-nav summary .plus::before { width: 14px; height: 1.4px; }
  .mobile-nav summary .plus::after  { width: 1.4px; height: 14px; transition: opacity .25s ease; }
  .mobile-nav details[open] summary .plus { transform: rotate(180deg); }
  .mobile-nav details[open] summary .plus::after { opacity: 0; }
  .mobile-nav details ul {
    list-style: none;
    margin: 0; padding: 0 0 20px;
    display: grid; gap: 10px;
  }
  .mobile-nav details a {
    font-size: 15px;
    font-weight: 400;
    opacity: 0.78;
    padding: 4px 0;
    display: flex; justify-content: space-between; gap: 12px;
  }
  .mobile-nav details a .en {
    font-size: 12px;
    font-style: italic;
    opacity: 0.5;
  }
  .mobile-nav details a:hover { opacity: 1; text-decoration: none; }

  .mobile-utility {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,0.14);
    display: grid; gap: 12px;
  }
  .mobile-utility a {
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    opacity: 0.75;
  }
  .mobile-foot {
    margin-top: 24px;
    display: flex; justify-content: space-between; align-items: center;
    gap: 16px; flex-wrap: wrap;
    font-size: 13px;
  }
  .mobile-foot .lang a { padding: 0 2px; opacity: 0.55; }
  .mobile-foot .lang a.on { opacity: 1; font-weight: 600; }
  .mobile-foot .btn.primary { background: var(--paper); color: var(--ink); border-color: var(--paper); }
  .mobile-foot .btn.primary:hover { background: var(--pink); border-color: var(--pink); color: var(--ink); }

  body.menu-open, body.search-open { overflow: hidden; }

  /* ------------------- Hero load entrance ------------------- */
  /* Pure CSS, no JS gate. Each part of the hero rises and fades in
     on initial paint with a small per-element delay. animation-fill-
     mode: backwards keeps each element hidden during its delay so
     there's no flash before its turn begins. */
  @keyframes hero-rise {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  @media (prefers-reduced-motion: no-preference) {
    .hero .kicker,
    .dept-hero .breadcrumb {
      animation: hero-rise 1.1s cubic-bezier(.2,.7,.2,1) .15s backwards;
    }
    .hero h1,
    .dept-hero h1 {
      animation: hero-rise 1.1s cubic-bezier(.2,.7,.2,1) .3s backwards;
    }
    .hero .meta,
    .dept-hero .lead {
      animation: hero-rise 1.1s cubic-bezier(.2,.7,.2,1) .5s backwards;
    }
    .hero-figure {
      animation: hero-rise 1.2s cubic-bezier(.2,.7,.2,1) .65s backwards;
    }
  }

  /* ------------------- Scroll reveal ------------------- */
  /* JS adds .reveal to a curated list of elements before paint; an
     IntersectionObserver then adds .is-in when each element crosses
     into the viewport. The selectors targeted live in app.js. */
  @media (prefers-reduced-motion: no-preference) {
    .reveal {
      opacity: 0;
      transform: translateY(20px);
      transition:
        opacity .85s cubic-bezier(.2,.7,.2,1),
        transform .85s cubic-bezier(.2,.7,.2,1);
      transition-delay: calc(var(--i, 0) * 55ms);
      will-change: opacity, transform;
    }
    .reveal.is-in {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* ------------------- Hero ------------------- */
  .hero {
    position: relative;
    overflow: hidden;
    background: var(--paper);
  }
  .hero .wrap {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: clamp(24px, 3vw, 48px) var(--pad) clamp(28px, 3vw, 56px);
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
  }
  .hero-text { display: flex; flex-direction: column; }
  .hero h1 {
    margin: 0;
    font-weight: 700;
    font-size: clamp(40px, 5.6vw, 88px);
    line-height: 0.98;
    letter-spacing: -0.025em;
    text-wrap: balance;
  }
  .hero h1 .grad {
    /* inherits the global .grad gradient emphasis (see end of file) */
  }
  .hero .kicker {
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.18em;
    margin-bottom: clamp(18px, 2vw, 28px);
    display: flex; gap: 16px; align-items: center;
    opacity: 0.7;
  }
  .hero .kicker .bar {
    flex: 0 0 56px; height: 1px; background: var(--ink);
  }
  .hero .meta {
    margin-top: clamp(22px, 2.5vw, 36px);
  }
  .hero .meta p {
    /* Doubled from clamp(16, 1.15vw, 18px) to land as a real
       editorial lede on the homepage hero — matches the .dept-hero
       .lead upgrade. max-width pulled in to keep the line length
       comfortable in the constrained left column. */
    font-size: clamp(22px, 2.2vw, 26px);
    line-height: 1.3;
    margin: 0 0 28px;
    color: var(--ink-2);
    max-width: 38ch;
  }
  .hero .meta .actions { display: flex; gap: 12px; flex-wrap: wrap; }

  /* Hero image */
  .hero-figure {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .image-wrap {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: var(--r);
    background:
      radial-gradient(120% 80% at 30% 20%, rgba(197,236,255,0.55), transparent 60%),
      radial-gradient(100% 80% at 80% 90%, rgba(255,151,151,0.45), transparent 60%),
      #1a1a1a;
    isolation: isolate;
  }
  .image-wrap img,
  .image-wrap .hero-art {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1.2s cubic-bezier(.2,.7,.2,1);
  }
  .image-wrap:hover img,
  .image-wrap:hover .hero-art { transform: scale(1.025); }
  .image-tag {
    position: absolute;
    top: 16px; left: 16px;
    background: rgba(255,255,255,0.94);
    color: var(--ink);
    padding: 9px 14px 9px 12px;
    border-radius: 999px;
    font-size: 12px;
    letter-spacing: 0.04em;
    display: inline-flex; align-items: center; gap: 10px;
    font-weight: 500;
    backdrop-filter: blur(8px);
  }
  .image-tag .dot {
    width: 6px; height: 6px;
    background: var(--red);
    border-radius: 50%;
    animation: pulse 1.6s ease-in-out infinite;
  }
  .image-meta {
    background: rgba(10,10,10,0.5);
    color: var(--paper);
    backdrop-filter: blur(6px);
    position: absolute;
    left: 16px; right: 16px; bottom: 16px;
    padding: 12px 14px;
    border-radius: var(--r);
    display: flex; justify-content: space-between; gap: 12px;
    font-size: 12px;
    letter-spacing: 0.04em;
  }
  .image-meta .l { opacity: 0.8; }
  .image-meta .r { opacity: 0.6; font-style: italic; }
  .hero-figure figcaption {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.55;
    flex-wrap: wrap;
  }
  .btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 14px 22px;
    border-radius: 999px;
    border: 1px solid var(--ink);
    font-size: 14px;
    font-weight: 500;
    background: transparent;
    color: var(--ink);
    transition: all .2s ease;
    cursor: pointer;
  }
  .btn:hover { background: var(--ink); color: var(--paper); text-decoration: none; }
  .btn.primary { background: var(--ink); color: var(--paper); }
  .btn.primary:hover { background: var(--pink); border-color: var(--pink); color: var(--ink); }
  .btn .arrow {
    display: inline-block; transition: transform .2s ease;
  }
  .btn:hover .arrow { transform: translateX(4px); }

  .hero-band {
    height: 14px;
    background: var(--grad);
  }

  /* ------------------- Marquee ------------------- */
  .marquee {
    border-bottom: 1px solid var(--line);
    overflow: hidden;
    background: var(--paper);
  }
  .marquee-track {
    display: flex;
    gap: 48px;
    padding: 14px 0;
    white-space: nowrap;
    animation: scroll 50s linear infinite;
    font-size: 13px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-2);
  }
  .marquee-track span { display: inline-flex; align-items: center; gap: 48px; }
  .marquee-track i { font-style: normal; opacity: 0.4; }
  @keyframes scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }

  /* ------------------- Sections ------------------- */
  section { padding: clamp(64px, 9vw, 128px) 0; }
  .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }

  /* Full-bleed editorial image band — edge-to-edge, sits between sections */
  .full-bleed {
    margin: 0;
    width: 100%;
    overflow: hidden;
    background: var(--paper-2);
  }
  .full-bleed img {
    display: block;
    width: 100%;
    height: clamp(280px, 46vw, 640px);
    object-fit: cover;
  }

  .section-head {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: clamp(24px, 5vw, 64px);
    align-items: end;
    margin-bottom: clamp(40px, 6vw, 80px);
  }
  .section-head .label {
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    opacity: 0.6;
    display: flex; gap: 16px; align-items: center;
  }
  .section-head .label .num {
    display: inline-block;
    border: 1px solid var(--ink);
    border-radius: 999px;
    padding: 3px 10px;
    opacity: 1;
  }
  .section-head h2 {
    margin: 0;
    font-weight: 700;
    font-size: clamp(40px, 5.6vw, 88px);
    line-height: 0.96;
    letter-spacing: -0.025em;
    text-wrap: balance;
  }
  .section-head h2 em {
    font-style: normal;
    font-weight: inherit;
    color: inherit;
  }
  /* Opt-out of the red emphasis on a per-heading basis (keeps the <em>
     so it's reversible). Used on the homepage section heads. */
  .section-head h2.no-accent em { color: inherit; }

  /* Variant: headline on the left, label tucked top-right */
  .section-head--left {
    grid-template-columns: 2fr 1fr;
    align-items: start;
  }
  .section-head--left h2 {
    font-size: clamp(36px, 4.6vw, 68px);
    line-height: 1;
    grid-column: 1;
  }
  .section-head--left .label {
    justify-self: end;
    align-self: start;
    padding-top: 8px;
    grid-column: 2;
  }
  .section-head--left h2 br { display: block; }
  /*
   * Below the breakpoint the head is one column, and the label has to come back
   * to it. Without this it keeps grid-column: 2, lands in an implicit second
   * track, and the heading's longest word sets a floor under the first one:
   * "Nemendaverkefni" at 36px is 297px, so the home page laid out 418px wide in
   * a 390px viewport and the whole site scrolled sideways.
   *
   * Written here rather than in the responsive block because that block sits
   * earlier in the file, and at equal specificity the rules above would win.
   */
  @media (max-width: 980px) {
    .section-head--left h2,
    .section-head--left .label {
      grid-column: 1;
      justify-self: start;
    }
    .section-head--left .label { padding-top: 0; margin-bottom: 10px; }
  }

  /* ------------------- Departments (index) ------------------- */
  .depts-index {
    border-top: 1px solid var(--ink);
  }
  .dept-row {
    display: grid;
    grid-template-columns: 64px 1.2fr 1fr auto 40px;
    align-items: center;
    gap: clamp(16px, 2.4vw, 36px);
    padding: 22px 8px;
    border-bottom: 1px solid var(--line);
    cursor: pointer;
    position: relative;
    transition: padding .35s cubic-bezier(.2,.7,.2,1), background .25s ease, color .25s ease;
  }
  .dept-row:hover {
    background: #0a0a0a;
    color: var(--paper);
    padding-left: 24px;
    padding-right: 24px;
    text-decoration: none;
  }
  .dept-row:hover .ar { transform: translateX(6px); }
  .dept-row:hover .levels { border-color: rgba(255,255,255,0.4); }
  .dept-row .n {
    font-size: 12px;
    letter-spacing: 0.16em;
    opacity: 0.55;
    font-variant-numeric: tabular-nums;
  }
  .dept-row .name {
    margin: 0;
    font-weight: 500;
    font-size: clamp(26px, 3.2vw, 40px);
    line-height: 1;
    letter-spacing: -0.02em;
  }
  .dept-row .en {
    font-size: 14px;
    font-style: italic;
    opacity: 0.55;
    letter-spacing: 0;
    text-align: right;
  }
  .dept-row .levels {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: border-color .25s ease;
  }
  .dept-row .ar {
    font-size: 20px;
    text-align: right;
    transition: transform .25s ease;
    opacity: 0.6;
  }
  .dept-row:hover .ar { opacity: 1; }

  .depts-foot {
    padding-top: 22px;
    display: flex; justify-content: space-between;
    font-size: 13px;
    opacity: 0.65;
    letter-spacing: 0.04em;
    flex-wrap: wrap; gap: 12px;
  }

  /* ------------------- Útskrift 2026 hero block ------------------- */
  .feature {
    background: var(--grad);
    color: var(--ink);
    border-radius: 4px;
    padding: clamp(40px, 6vw, 80px);
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: clamp(32px, 5vw, 64px);
    align-items: end;
    position: relative;
    overflow: hidden;
  }
  .feature {
    --scroll: 0;
  }
  .feature::before {
    content: "";
    position: absolute;
    right: -18%; bottom: -65%;
    width: 980px; height: 980px;
    border-radius: 50%;
    background: var(--grad);
    filter: blur(28px);
    opacity: 0.55;
    z-index: 0;
    animation: feature-drift 26s ease-in-out infinite;
    transform: translate3d(calc(var(--scroll) * 60px), calc(var(--scroll) * -160px), 0);
    transition: transform .15s linear;
    will-change: translate, scale, opacity, filter, transform;
  }
  .feature::after {
    content: "";
    position: absolute;
    left: -18%; top: -50%;
    width: 700px; height: 700px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, rgba(197,236,255,0.92) 0%, rgba(197,236,255,0) 70%);
    filter: blur(48px);
    opacity: 0.45;
    z-index: 0;
    animation: feature-drift-2 34s ease-in-out infinite;
    transform: translate3d(calc(var(--scroll) * -40px), calc(var(--scroll) * 110px), 0);
    transition: transform .15s linear;
    will-change: translate, scale, opacity, transform;
  }
  @keyframes feature-drift {
    0%   { translate: 0% 0%;     scale: 1;     opacity: 0.55; filter: blur(28px); }
    18%  { translate: -14% -10%; scale: 1.15;  opacity: 0.70; filter: blur(40px); }
    36%  { translate: -34% 6%;   scale: 0.88;  opacity: 0.42; filter: blur(22px); }
    54%  { translate: -46% 18%;  scale: 1.10;  opacity: 0.62; filter: blur(48px); }
    72%  { translate: -28% 22%;  scale: 1.18;  opacity: 0.55; filter: blur(34px); }
    88%  { translate: -10% 12%;  scale: 1.02;  opacity: 0.50; filter: blur(26px); }
    100% { translate: 0% 0%;     scale: 1;     opacity: 0.55; filter: blur(28px); }
  }
  @keyframes feature-drift-2 {
    0%   { translate: 0% 0%;     scale: 1;     opacity: 0.45; }
    22%  { translate: 22% 14%;   scale: 1.22;  opacity: 0.62; }
    44%  { translate: 38% 4%;    scale: 0.85;  opacity: 0.30; }
    66%  { translate: 30% -14%;  scale: 1.18;  opacity: 0.55; }
    84%  { translate: 12% -8%;   scale: 1.06;  opacity: 0.48; }
    100% { translate: 0% 0%;     scale: 1;     opacity: 0.45; }
  }
  @media (prefers-reduced-motion: reduce) {
    .feature::before, .feature::after {
      animation: none;
      transform: none;
    }
  }
  .feature > * { position: relative; z-index: 1; }
  .feature .tag {
    text-transform: uppercase; font-size: 12px; letter-spacing: 0.2em;
    opacity: 0.7; margin-bottom: 20px;
  }
  .feature h2 {
    margin: 0 0 24px;
    font-weight: 500;
    font-size: clamp(48px, 7vw, 120px);
    line-height: 0.92;
    letter-spacing: -0.03em;
  }
  .feature h2 .year { color: inherit; font-style: normal; font-weight: inherit; }
  /* Opt-out of the red year accent (homepage Útskrift '26 feature title). */
  .feature h2.no-accent .year { color: inherit; }
  /* Bold the homepage Útskrift feature title (default 500 elsewhere). */
  .feature h2.no-accent { font-weight: 700; }
  /* Alþjóðasamstarf incoming-exchange feature (long title): smaller +
     bold default 700, and tighten the gap above the card (the paper-2
     section above carries a full section bottom padding). */
  #incoming .feature h2 { font-weight: 700; font-size: clamp(40px, 5.5vw, 88px); }
  .feature p { font-size: 17px; line-height: 1.55; max-width: 50ch; color: rgba(10,10,10,0.78); margin: 0 0 28px; }
  .feature .right { display: grid; gap: 18px; }
  .feature .stat { border-top: 1px solid rgba(10,10,10,0.18); padding-top: 14px; }
  .feature .stat .n { font-size: 44px; font-weight: 500; letter-spacing: -0.02em; line-height: 1; }
  .feature .stat .l { font-size: 13px; opacity: 0.7; margin-top: 6px; letter-spacing: 0.04em; }

  /* ------------------- Events agenda ------------------- */
  .agenda {
    margin-top: clamp(40px, 5vw, 64px);
  }
  .agenda-head {
    display: flex; justify-content: space-between; align-items: end;
    gap: 24px; flex-wrap: wrap;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--ink);
  }
  .agenda-head h3 {
    margin: 0;
    font-weight: 700;
    font-size: clamp(28px, 3.4vw, 44px);
    letter-spacing: -0.02em;
    line-height: 1;
  }
  .agenda-head .sub {
    font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.6;
  }
  .agenda-head .filters { display: flex; gap: 8px; flex-wrap: wrap; }
  .agenda-head .filters button {
    border: 1px solid var(--line-strong);
    background: transparent;
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink);
    cursor: pointer;
    transition: all .2s ease;
  }
  .agenda-head .filters button:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
  .agenda-head .filters button.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }

  /* Date picker row — sits between the .agenda-head filters and the
     event list. Native <input type="date"> with a leading calendar
     icon, a contextual "Hreinsa" reset, and a live count of matches. */
  .agenda-datepick {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 16px 0;
    margin-bottom: 4px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
  .agenda-datepick label {
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.55;
    font-weight: 500;
  }
  .agenda-datepick-input {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: var(--paper);
    transition: border-color .2s ease;
  }
  .agenda-datepick-input:focus-within { border-color: var(--ink); }
  .agenda-datepick-input svg { width: 16px; height: 16px; opacity: 0.6; }
  .agenda-datepick input[type="date"] {
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: 14px;
    color: var(--ink);
    outline: none;
    min-width: 140px;
  }
  .agenda-datepick #eventDateClear {
    border: 0;
    background: transparent;
    color: var(--ink);
    font-family: inherit;
    font-size: 13px;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    opacity: 0.65;
    transition: opacity .2s ease;
  }
  .agenda-datepick #eventDateClear:hover { opacity: 1; }
  /* Quick date-range shortcuts next to the date picker */
  .agenda-shortcuts { display: inline-flex; gap: 8px; flex-wrap: wrap; }
  .agenda-shortcuts button {
    font-family: inherit;
    font-size: 12.5px;
    letter-spacing: 0.02em;
    padding: 8px 14px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: var(--paper);
    color: var(--ink);
    cursor: pointer;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
  }
  .agenda-shortcuts button:hover { border-color: var(--ink); }
  .agenda-shortcuts button.is-active {
    background: var(--ink); color: var(--paper); border-color: var(--ink);
  }
  .agenda-datepick .agenda-count {
    margin-left: auto;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    opacity: 0.55;
    font-variant-numeric: tabular-nums;
  }
  .ev.is-hidden { display: none; }
  .agenda-empty {
    padding: clamp(40px, 6vw, 80px) 0;
    text-align: center;
    border-bottom: 1px solid var(--line);
  }
  .agenda-empty p { margin: 0 0 14px; opacity: 0.7; }

  .agenda-list {
    display: grid;
  }
  .ev {
    display: grid;
    grid-template-columns: 110px 90px 1fr auto 180px 40px;
    gap: clamp(16px, 2.4vw, 36px);
    align-items: center;
    padding: 24px 8px;
    border-bottom: 1px solid var(--line);
    transition: padding .25s ease, background .2s ease;
    cursor: pointer;
  }
  .ev:hover {
    background: var(--paper-2);
    padding-left: 20px;
    padding-right: 20px;
    text-decoration: none;
  }
  .ev:hover, .ev:hover * { text-decoration: none; }
  .ev:hover .arrow-cell { transform: translateX(4px); }
  .ev .date {
    font-size: 14px; letter-spacing: 0.04em; line-height: 1.2;
  }
  .ev .date .day { font-weight: 600; font-size: 28px; letter-spacing: -0.02em; display: block; line-height: 1; }
  .ev .date .mo { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.6; margin-top: 6px; display: block; }
  .ev .time { font-size: 14px; letter-spacing: 0.04em; opacity: 0.7; font-variant-numeric: tabular-nums; }
  .ev .title {
    font-size: clamp(17px, 1.7vw, 22px);
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -0.01em;
    text-wrap: balance;
  }
  .ev .title small {
    display: block;
    font-size: 13px;
    font-weight: 400;
    opacity: 0.6;
    margin-top: 4px;
    letter-spacing: 0;
  }
  .ev .pill {
    display: inline-flex; align-items: center;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 500;
    white-space: nowrap;
  }
  .ev .pill::before {
    content: ""; width: 7px; height: 7px; border-radius: 50%; margin-right: 8px; background: currentColor;
  }
  /* All department pills use the same neutral style. */
  .ev .pill.myndlist,
  .ev .pill.honnun,
  .ev .pill.arki,
  .ev .pill.listk,
  .ev .pill.svid,
  .ev .pill.tonlist,
  .ev .pill.kvik,
  .ev .pill.thver {
    color: var(--ink);
    background: transparent;
    border: 1px solid var(--line-strong);
  }

  .ev .venue {
    font-size: 13px; letter-spacing: 0.04em; opacity: 0.7;
    display: flex; align-items: center; gap: 8px;
  }
  .ev .venue::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); opacity: 0.5;
    flex-shrink: 0;
  }
  .ev .arrow-cell {
    font-size: 18px; transition: transform .2s ease; opacity: 0.5;
    text-align: right;
  }
  .ev:hover .arrow-cell { opacity: 1; }

  .agenda-foot {
    padding-top: 28px;
    display: flex; justify-content: space-between; align-items: center;
    gap: 16px; flex-wrap: wrap;
    font-size: 13px; opacity: 0.7;
  }
  .agenda-foot a { font-weight: 500; opacity: 1; display: inline-flex; align-items: center; gap: 8px; }
  .agenda-foot a::after { content: "→"; transition: transform .2s ease; }
  .agenda-foot a:hover::after { transform: translateX(4px); }

  @media (max-width: 900px) {
    .ev {
      grid-template-columns: 84px 1fr;
      grid-template-areas:
        "date title"
        "date pill"
        "date venue";
      gap: 8px 20px;
      padding: 20px 0;
    }
    .ev:hover { padding-left: 12px; padding-right: 12px; }
    .ev .date { grid-area: date; }
    .ev .title { grid-area: title; }
    .ev .pill { grid-area: pill; justify-self: start; }
    .ev .venue { grid-area: venue; }
    .ev .time, .ev .arrow-cell { display: none; }
  }

  /* ------------------- Student projects gallery ------------------- */
  .projects { background: var(--paper); }
  .projects-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }
  .proj {
    position: relative;
    overflow: hidden;
    border-radius: var(--r);
    display: block;
    background: #1a1a1a;
    isolation: isolate;
    transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease;
  }
  .proj:hover {
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 30px 60px -30px rgba(0,0,0,0.32);
  }
  .proj-image { position: absolute; inset: 0; }
  .proj-image svg,
  .proj-image img {
    width: 100%; height: 100%; display: block;
    object-fit: cover;
    object-position: center 20%;
    transition: transform 1.2s cubic-bezier(.2,.7,.2,1);
  }
  .proj:hover .proj-image svg,
  .proj:hover .proj-image img { transform: scale(1.05); }
  .proj-overlay {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 22px 22px 22px;
    color: var(--paper);
    background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.55) 60%, rgba(0,0,0,0.78) 100%);
    display: flex; flex-direction: column; gap: 4px;
    z-index: 1;
  }
  .proj-tag {
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.9;
    margin-bottom: 6px;
  }
  .proj-overlay h3 {
    margin: 0;
    font-size: clamp(18px, 1.7vw, 26px);
    line-height: 1.12;
    font-weight: 500;
    letter-spacing: -0.01em;
    text-wrap: balance;
  }
  .proj-student { font-size: 13px; opacity: 0.78; margin-top: 6px; }
  .proj-arrow {
    position: absolute;
    top: 18px; right: 18px;
    width: 36px; height: 36px;
    border-radius: 999px;
    background: rgba(255,255,255,0.12);
    color: var(--paper);
    display: inline-flex; align-items: center; justify-content: center;
    backdrop-filter: blur(8px);
    z-index: 2;
    transition: background .25s ease, transform .25s ease;
  }
  .proj:hover .proj-arrow { background: var(--paper); color: var(--ink); transform: rotate(-45deg); }
  .proj-arrow svg { width: 14px; height: 14px; }

  /* Aspect-aware layout — each tile's aspect-ratio matches its
     photo's orientation so portrait headshots stop getting cropped
     into landscape boxes. */
  .proj { aspect-ratio: 4 / 5; }                                /* default: portrait */
  .proj-1 { grid-column: span 3; aspect-ratio: 21 / 9; }        /* full-row landscape banner */
  /* proj-6 spans 2 cols beside the 1-col portrait proj-5. A fixed aspect
     ratio can't match proj-5's height once the column gap is added, so
     drop the ratio and let it stretch to the row height proj-5 defines. */
  .proj-6 { grid-column: span 2; aspect-ratio: auto; }
  .proj-1 .proj-overlay h3 { font-size: clamp(26px, 2.6vw, 38px); }

  .projects-foot {
    display: flex; justify-content: space-between;
    margin-top: 32px;
    font-size: 13px;
    opacity: 0.7;
    flex-wrap: wrap; gap: 12px;
  }

  /* ------------------- News carousel ------------------- */
  .news {
    background: var(--paper-2);
    overflow: hidden;
  }
  .news-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    gap: 16px;
  }
  .rail-progress {
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    opacity: 0.55;
    font-variant-numeric: tabular-nums;
  }
  /* Right-side group in .news-toolbar: holds the "Allar fréttir" CTA
     alongside the prev/next rail buttons so they read as one cluster. */
  .rail-actions {
    display: flex;
    align-items: center;
    gap: 16px;
  }
  .rail-buttons { display: flex; gap: 8px; }
  .rail-btn {
    appearance: none;
    width: 44px; height: 44px;
    border-radius: 999px;
    border: 1px solid var(--line-strong);
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease;
  }
  .rail-btn:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
  .rail-btn:disabled { opacity: 0.3; cursor: default; }
  .rail-btn:disabled:hover { background: transparent; color: var(--ink); border-color: var(--line-strong); }
  .rail-btn svg { width: 16px; height: 16px; }

  .news-carousel {
    display: flex;
    gap: 20px;
    /* Vertical padding gives room for the .news-item hover shadow
       (translateY(-3px) + 0 30px 60px -30px drop). overflow-x: auto
       implicitly clips overflow-y, so the shadow must fit inside
       the carousel's own box. */
    padding: 12px var(--pad) 60px;
    margin-top: -12px;
    margin-bottom: -28px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--pad);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .news-carousel::-webkit-scrollbar { display: none; }

  .news-item {
    flex: 0 0 clamp(280px, 28vw, 380px);
    scroll-snap-align: start;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r);
    display: flex; flex-direction: column;
    overflow: hidden;
    transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease;
  }
  .news-item:hover {
    text-decoration: none;
    transform: translateY(-3px);
    box-shadow: 0 30px 60px -30px rgba(0,0,0,0.18);
  }

  /* Archive layout: the same .news-item card, in columns instead of a rail.
     The carousel sizes cards with a fixed flex-basis and snaps them; inside a
     grid the track decides the width, so both are undone here. */
  .news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: clamp(20px, 2.2vw, 28px);
    margin-top: clamp(24px, 3vw, 40px);
  }
  .news-grid .news-item {
    flex: initial;
    scroll-snap-align: none;
  }

  /* Numbered paging under an archive grid. */
  .lhi-pagination {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    margin-top: clamp(32px, 4vw, 48px);
  }
  .lhi-pagination .page-numbers {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 40px; height: 40px; padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 14px;
    line-height: 1;
    color: var(--ink);
    transition: border-color .2s ease, background .2s ease, color .2s ease;
  }
  .lhi-pagination a.page-numbers:hover { border-color: var(--ink); text-decoration: none; }
  .lhi-pagination .page-numbers.current {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
  }
  .lhi-pagination .page-numbers.dots { border-color: transparent; }
  .news-image {
    aspect-ratio: 4 / 3;
    width: 100%;
    background: #1a1a1a;
    border-bottom: 1px solid var(--line);
    overflow: hidden;
  }
  .news-image svg,
  .news-image img {
    width: 100%; height: 100%; display: block;
    object-fit: cover;
    transition: transform 1.2s cubic-bezier(.2,.7,.2,1);
  }
  .news-item:hover .news-image img { transform: scale(1.04); }
  .news-body {
    padding: 22px 22px 24px;
    display: flex; flex-direction: column; gap: 14px;
    flex: 1;
  }
  .news-item .meta {
    display: flex; justify-content: space-between;
    font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
    opacity: 0.55;
  }
  .news-item .meta .tag { color: var(--ink); opacity: 1; }
  .news-item h3 {
    margin: 0;
    font-size: clamp(19px, 1.55vw, 22px);
    line-height: 1.18;
    font-weight: 500;
    letter-spacing: -0.01em;
    text-wrap: balance;
    flex: 1;
  }
  .news-item .read {
    font-size: 13px; font-weight: 500;
    display: inline-flex; align-items: center; gap: 8px;
    margin-top: 4px;
  }
  .news-item .read::after { content: "→"; transition: transform .2s ease; }
  .news-item:hover .read::after { transform: translateX(4px); }

  /* ------------------- Two-up: Research / Open ------------------- */
  .twoup {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* The panes meet edge to edge. The seam used to be a 1px gap with the
       container's line colour showing through it — invisible between two paper
       panes, but a pale hairline down the middle of a dark or coloured pair,
       which reads as a white border rather than as a rule. Stacked on mobile it
       was the same line, horizontally. */
    gap: 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
  .twoup .pane {
    background: var(--paper);
    padding: clamp(48px, 6vw, 88px) clamp(28px, 4vw, 56px);
    display: flex; flex-direction: column; gap: 24px;
    min-height: 480px;
  }
  /* The same palette a section background offers, plus Green, which is this
     element's own and predates the rest.

     Ice and Pink were already in the dropdown with no rules behind them, so
     choosing either gave a pane with no colour — and /lifid-i-lhi had been
     sitting on Pink, rendering white, since it was authored. */
  .twoup .pane.paper      { background: var(--paper); }
  .twoup .pane.tint       { background: var(--paper-2); }
  .twoup .pane.ice        { background: var(--ice); }
  .twoup .pane.ice-light  { background: var(--ice-light); }
  .twoup .pane.grad       { background-image: var(--grad); }
  .twoup .pane.pink       { background: var(--pink); }
  .twoup .pane.pink-light { background: var(--pink-light); }
  .twoup .pane.dark       { background: var(--ink); color: var(--paper); }
  .twoup .pane.green      { background: var(--green); color: var(--paper); }
  .twoup .pane.eruption   { background: var(--red); color: var(--paper); }

  /* The pane's buttons are .ghost-light — a white outline, right on the three
     dark panes and invisible on the seven light ones. Switched to ink there,
     the same way the contained CTA card does it. */
  .twoup .pane.paper .btn.ghost-light,
  .twoup .pane.tint .btn.ghost-light,
  .twoup .pane.ice .btn.ghost-light,
  .twoup .pane.ice-light .btn.ghost-light,
  .twoup .pane.grad .btn.ghost-light,
  .twoup .pane.pink .btn.ghost-light,
  .twoup .pane.pink-light .btn.ghost-light {
    color: var(--ink);
    border-color: var(--ink);
  }
  .twoup .pane.paper .btn.ghost-light:hover,
  .twoup .pane.tint .btn.ghost-light:hover,
  .twoup .pane.ice .btn.ghost-light:hover,
  .twoup .pane.ice-light .btn.ghost-light:hover,
  .twoup .pane.grad .btn.ghost-light:hover,
  .twoup .pane.pink .btn.ghost-light:hover,
  .twoup .pane.pink-light .btn.ghost-light:hover {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
  }
  .twoup .pane h3 {
    margin: 0;
    font-weight: 700;
    font-size: clamp(36px, 4.5vw, 64px);
    line-height: 1;
    letter-spacing: -0.02em;
  }
  .twoup .pane p { font-size: 17px; line-height: 1.55; max-width: 44ch; margin: 0; opacity: 0.85; }
  .twoup .pane .tag { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.7; }
  .twoup .pane .actions { margin-top: auto; display: flex; gap: 12px; flex-wrap: wrap; }
  .btn.ghost { border-color: currentColor; color: currentColor; background: transparent; }
  /* Explicit fill rather than `background: currentColor`. currentColor resolves
     against the colour computed on the element, including the one this same
     rule sets — so `background: currentColor; color: var(--ink)` made the fill
     and the label both --ink and the text vanished. Structured like
     .btn.ghost-light below, which had it right. */
  .btn.ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

  /* Ghost button on dark backgrounds: white outline → fills white on hover with dark text. */
  .btn.ghost-light { color: var(--paper); border-color: var(--paper); background: transparent; }
  .btn.ghost-light:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }

  /* ------------------- Stats strip ------------------- */
  .stats {
    background: var(--paper);
  }
  /* Each figure is its own bordered card with air around it, rather than four
     cells sharing hairlines. That also retires a pile of bookkeeping: the
     shared-border version needed :last-child to drop a right edge and
     nth-child rules at every breakpoint to put bottom edges back, and every
     variant repeated them. A card carries its own border at any column count. */
  .stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(10px, 1.2vw, 18px);
  }
  .stats-grid .s {
    padding: clamp(32px, 4vw, 52px) clamp(20px, 2.4vw, 32px);
    border: 1px solid var(--line);
    border-radius: var(--r);
  }
  .stats-grid .n { font-size: clamp(40px, 5vw, 72px); font-weight: 500; line-height: 1; letter-spacing: -0.02em; }

  /* A figure is usually two or three characters, and the size is set for that.
     Six of the 48 on the site are not figures at all — Listkennsludeild's is
     "Viðbótardiplóma · Diplóma · MA", thirty characters, which at 72px wrapped
     to four lines and blew the card open. The step is chosen in PHP
     (lhi_stat_size_class) because CSS cannot count characters, and leading
     relaxes as the size drops: 1 is right for a numeral, wrong for a sentence. */
  .stats-grid .n.is-long {
    font-size: clamp(26px, 2.8vw, 40px);
    line-height: 1.15;
    letter-spacing: -0.01em;
  }
  .stats-grid .n.is-xlong {
    font-size: clamp(19px, 1.9vw, 26px);
    line-height: 1.3;
    letter-spacing: 0;
  }
  .stats-grid .l { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.6; margin-top: 14px; }
  /* Five-column variant — used by um-lhi.html so the 5 stats (1999 /
     ~600 / ~150 / 7 / 4) lay out evenly instead of 4+1.
     The number font scales down slightly so longer values still fit. */
  .stats-grid--five { grid-template-columns: repeat(5, 1fr); }
  .stats-grid--five .n { font-size: clamp(34px, 4vw, 56px); }
  @media (max-width: 960px) {
    .stats-grid--five { grid-template-columns: repeat(3, 1fr); }
  }
  /* Inline variant — sits inside an editorial body column (no banded
     background, compact numbers, hairline top rule). */
  .stats-grid--inline {
    margin-top: clamp(28px, 3.5vw, 44px);
  }
  .stats-grid--inline .s {
    padding: clamp(18px, 2vw, 24px) clamp(14px, 1.6vw, 22px);
  }
  .stats-grid--inline .n { font-size: clamp(26px, 2.6vw, 40px); }
  .stats-grid--inline .l { margin-top: 8px; font-size: 12px; }
  @media (max-width: 600px) {
    .stats-grid--inline { grid-template-columns: repeat(2, 1fr); }
  }
  /* 2×2 variant — 4 stats laid out two-by-two inside a body column
     (um-lhi.html intro). Borders: hairline between the two columns and
     between the two rows; clean outer edges. */
  .stats-grid--2x2 { grid-template-columns: repeat(2, 1fr); }

  /* ------------------- Footer ------------------- */
  footer {
    background: var(--ink);
    color: var(--paper);
    padding: clamp(64px, 8vw, 112px) 0 32px;
  }
  footer .wrap {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 var(--pad);
  }
  .foot-top {
    display: grid;
    /* Desktop: a wider brand column + the three curated link columns
       (Námið / Um LHÍ / Fyrir), all on one row. These tracks used to be
       1.5fr repeat(5, …), sized for the old footer that rendered every
       Main-menu section — with only three columns left, two empty tracks
       held the links bunched up against the left. The tablet/mobile
       overrides below collapse this to 2 / 1 columns. */
    grid-template-columns: 1.3fr 1fr 1fr 1fr;
    gap: clamp(32px, 5vw, 64px);
    padding-bottom: clamp(48px, 6vw, 80px);
    border-bottom: 1px solid rgba(255,255,255,0.15);
  }
  .foot-top h4 {
    margin: 0 0 18px;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    opacity: 0.5;
  }
  .foot-top ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
  .foot-top a { font-size: 16px; opacity: 0.9; }
  /* On a phone the footer is the site map, and its links were 19px tall with
     10px between them — two thumb-widths of ambiguity per tap. */
  @media (max-width: 780px) {
    .foot-top ul { gap: 2px; }
    .foot-top ul a {
      display: inline-flex;
      align-items: center;
      min-height: 36px;
    }
  }
  .foot-top a:hover { opacity: 1; }
  .foot-top .brand p { font-size: 16px; line-height: 1.6; max-width: 34ch; opacity: 0.7; margin: 16px 0 0; }
  /* Brand logo at the top of the contact column (replaces the old large
     .foot-mark wordmark). Source SVG is dark, so invert it to white. */
  .foot-top .brand .foot-logo {
    display: inline-block;
    margin: 0 0 28px;
    opacity: 1;
    transition: opacity .2s ease;
  }
  .foot-top .brand .foot-logo img {
    display: block;
    height: clamp(40px, 4vw, 48px);
    width: auto;
    filter: brightness(0) invert(1);
  }
  .foot-top .brand .foot-logo:hover { opacity: 0.8; }
  /* Social icon row in the footer brand block. Circular border buttons
     with the icon stroke inheriting from currentColor; invert on hover. */
  .foot-top .social-links {
    display: flex;
    gap: 10px;
    margin-top: 22px;
  }
  .foot-top .social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.22);
    color: var(--paper);
    opacity: 0.85;
    transition: background .2s ease, border-color .2s ease, color .2s ease, opacity .2s ease, transform .2s ease;
  }
  .foot-top .social-links a:hover {
    background: var(--paper);
    color: var(--ink);
    border-color: var(--paper);
    opacity: 1;
    transform: translateY(-1px);
  }
  .foot-top .social-links svg { width: 16px; height: 16px; }

  .foot-bottom {
    display: flex; justify-content: space-between;
    padding-top: 32px;
    font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
    opacity: 0.5;
    flex-wrap: wrap;
    gap: 16px;
  }
  .foot-mark {
    position: relative;
    margin-top: clamp(48px, 6vw, 80px);
    overflow: hidden;
  }
  .foot-mark img {
    display: block;
    width: 100%;
    height: auto;
    filter: brightness(0) invert(1);
    opacity: 0;
    transform: translateY(48px);
    clip-path: inset(0 100% 0 0);
    transition:
      clip-path 1.6s cubic-bezier(.2,.7,.2,1),
      transform 1.4s cubic-bezier(.2,.7,.2,1),
      opacity 1s ease;
    will-change: transform, clip-path;
  }
  .foot-mark.is-in img {
    opacity: 1;
    transform: translateY(0);
    clip-path: inset(0 0 0 0);
  }
  @media (prefers-reduced-motion: reduce) {
    .foot-mark img {
      transform: none;
      clip-path: none;
      opacity: 1;
      transition: none;
    }
  }

  /* ------------------- Department page ------------------- */

  /* Full-bleed image hero with title overlay */
  .dept-hero {
    position: relative;
    min-height: clamp(420px, 64vh, 720px);
    background: var(--ink);
    overflow: hidden;
    color: var(--paper);
  }
  .dept-hero img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: 0.7;
    z-index: 0;
  }
  .dept-hero::after {
    content: "";
    position: absolute; inset: 0;
    background:
      linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.05) 50%, rgba(0,0,0,0.7) 100%);
    pointer-events: none;
    z-index: 1;
  }
  .dept-hero .wrap {
    position: relative;
    z-index: 2;
    min-height: clamp(420px, 64vh, 720px);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-top: clamp(48px, 7vw, 96px);
    padding-bottom: clamp(40px, 5vw, 64px);
  }
  .breadcrumb {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    display: flex; flex-wrap: wrap; gap: 12px;
    margin-bottom: clamp(20px, 3vw, 36px);
    opacity: 0.85;
  }
  .breadcrumb a { opacity: 0.7; }
  .breadcrumb a:hover { opacity: 1; text-decoration: none; }
  .breadcrumb .sep { opacity: 0.4; }
  .breadcrumb .here { opacity: 1; }
  .dept-hero h1 {
    margin: 0;
    font-size: clamp(56px, 11vw, 168px);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 0.9;
    /* Even out the ragged edge when a headline wraps. Ignored where
       unsupported, which just leaves the default greedy wrapping. */
    text-wrap: balance;
    /* Icelandic compounds are long and have nowhere to break: at the 56px
       floor "Rannsóknarþjónusta" is about 570px on a 375px screen, and a word
       with no wrap opportunity in it does not wrap — it leaves the viewport
       and takes the horizontal scrollbar with it. The step chosen in PHP keeps
       that rare, these two keep it impossible.

       hyphens first, so a browser carrying Icelandic patterns breaks the word
       properly, with a hyphen; the document is lang="is-IS", which is what
       makes that possible. Support is uneven, so overflow-wrap stands behind
       it — an ugly break beats a headline running off the page. */
    hyphens: auto;
    overflow-wrap: break-word;
  }
  /* Long headlines step down instead of filling the screen. The step is chosen
     in PHP (lhi_headline_size_class) because CSS cannot measure how much text
     there is. At the top of the clamp a line holds about a dozen characters,
     so display belongs to titles of roughly 26 or fewer; past that a title
     wraps three times and buries the image. Tracking and leading relax as the
     size drops — the tight -0.035em/0.9 belongs to display sizes, not to
     something near body scale. */
  .dept-hero h1.is-long {
    font-size: clamp(40px, 6.4vw, 96px);
    letter-spacing: -0.03em;
    line-height: 0.95;
  }
  .dept-hero h1.is-xlong {
    font-size: clamp(32px, 4.4vw, 64px);
    letter-spacing: -0.02em;
    line-height: 1.05;
    /* Wide enough that the longest titles do not gain lines. Narrowing the
       measure helps readability up to a point, but news headlines reach 124
       characters and event titles 156 — at 22ch those wrapped to eight lines,
       where the full column gives five. */
    max-width: 30ch;
  }
  /* Opt-in special display face (LHI abc ExtraBold). Reusable utility —
     the homepage departments list, selected department heroes, and every
     study-programme hero. Falls back to Sarvatrik per-glyph.

     This note used to say the accented Icelandic glyphs were incomplete and
     rendered wrong. Checked against the font itself before extending its use:
     of 141 glyphs the Icelandic alphabet is complete, and every accented
     letter carries its accent EXCEPT capital Ó, which is drawn as a bare O —
     same outline bounds as the unaccented glyph, so it silently loses the
     acute. No programme title contains one today. The capitals also carry
     their accents at four different heights (É 994, Á/Í 931, Ú/Ý 870), which
     is visible when they appear in the same word.

     So: safe where a headline has no capital Ó, and worth having the font
     redrawn before it goes anywhere it might. */
  .lhi-display {
    font-family: "LHI abc", "Sarvatrik", system-ui, sans-serif;
  }
  /* The LHI abc cut is heavier/wider than Sarvatrik, so ease the hero
     tracking back toward 0 (overrides .dept-hero h1's -0.035em). */
  .dept-hero h1.lhi-display {
    font-weight: 800;
    letter-spacing: -0.02em;
  }
  .dept-hero h1 .en {
    display: block;
    font-size: clamp(16px, 1.4vw, 22px);
    font-weight: 400;
    font-style: italic;
    letter-spacing: 0;
    line-height: 1.4;
    opacity: 0.7;
    margin-top: 10px;
  }
  /* English subtitle / "kicker" placed ABOVE the h1 (replaces the
     breadcrumb, which was removed from the .dept-hero markup). */
  .dept-hero .dept-hero-tag {
    display: block;
    font-size: clamp(16px, 1.4vw, 22px);
    font-weight: 400;
    font-style: italic;
    letter-spacing: 0;
    line-height: 1.4;
    opacity: 0.85;
    margin-bottom: clamp(10px, 1.4vw, 18px);
  }
  .dept-hero .lead {
    /* Doubled from clamp(16, 1.25vw, 19px) to land as a real
       editorial lede on every dept-hero. max-width pulled in to keep
       the line length comfortable at the larger size. */
    margin: clamp(20px, 2vw, 32px) 0 0;
    max-width: 36ch;
    font-size: clamp(28px, 2.4vw, 38px);
    line-height: 1.3;
    opacity: 0.92;
  }

  /* A lede is only a standfirst while it is short. Past that it is a
     paragraph, and setting a paragraph at display scale buries the image and
     pushes everything below the fold — 408 characters at 38px filled the
     screen on Listir og velferð. The step is chosen in PHP
     (lhi_lead_size_class) because CSS cannot measure text. The measure widens
     as the size drops: 36ch is right for six words a line, wrong for sixty. */
  .dept-hero .lead.is-long {
    max-width: 46ch;
    font-size: clamp(21px, 1.7vw, 27px);
    line-height: 1.4;
  }
  .dept-hero .lead.is-xlong {
    max-width: 54ch;
    font-size: clamp(17px, 1.25vw, 21px);
    line-height: 1.55;
  }

  /* ------------------- Plain hero modifier ------------------- */
  /* Used on utility / service pages (e.g. Hafa samband) where we don't
     want the dark cinematic hero. Drops the background image + dark fill,
     switches text to ink, shrinks vertical padding, and adds a dividing
     border below to separate from the section that follows. */
  .dept-hero--plain {
    background: var(--paper);
    color: var(--ink);
    min-height: 0;
    border-bottom: 1px solid var(--ink);
    overflow: visible;
  }
  .dept-hero--plain img { display: none; }
  .dept-hero--plain::after { display: none; }
  .dept-hero--plain .wrap {
    min-height: 0;
    padding-top: clamp(40px, 4vw, 64px);
    padding-bottom: clamp(24px, 2.5vw, 36px);
  }
  .dept-hero--plain h1 {
    font-size: clamp(56px, 9.5vw, 144px);
  }
  .dept-hero--plain .dept-hero-tag { opacity: 0.6; }
  .dept-hero--plain .lead {
    opacity: 1;
    color: var(--ink);
  }

  /* Borderless variant — when the section below provides its own
     visual separation (e.g. .catalog has a paper-2 search bar that
     reads as its own surface), the 1px ink divider is redundant.
     Total bottom padding (section + wrap combined) is locked to 80px
     by zeroing the base section bottom padding and giving the wrap
     the full 80px. */
  .dept-hero--bare {
    border-bottom: 0;
    padding-bottom: 0;
  }
  .dept-hero--bare .wrap {
    padding-bottom: 80px;
  }
  .dept-hero--bare .lead {
    margin-top: clamp(12px, 1.4vw, 20px);
  }

  /* Editorial intro / manifesto */
  /* Child selector, not descendant: with sections rendering inside the body
     column, ".dept-intro .wrap" also matched each of their wraps and laid this
     same grid on them — the section head landed in the 212px sidebar track with
     the content beside it, and a 66px heading overflowed its track into the
     text. */
  .dept-intro > .wrap {
    display: grid;
    /* The sidebar is a nav list, so it is sized to that rather than taking a
       third of the shell: 1fr 2fr gave it 364px at a 1268px viewport and grew
       it without limit on wide screens. Bounded here, and every pixel saved
       goes to the content column — which now carries lists, card grids and
       cover grids, not just prose. */
    grid-template-columns: clamp(200px, 24%, 300px) minmax(0, 1fr);
    gap: clamp(32px, 6vw, 80px);
    align-items: start;
  }
  .dept-intro .body {
    /*
     * Same guard the sidebar carries. A grid item defaults to min-width: auto,
     * which is its content's min-content width — so one wide child sets a floor
     * under the whole column. On a programme at 390px the image slider's slides
     * put that floor at 735px and the page laid out 758 wide: the sidebar was
     * protected, the column beside it was not.
     */
    min-width: 0;
  }
  .dept-intro .label {
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    opacity: 0.6;
    padding-top: 12px;
  }

  /* Sticky in-page TOC sidebar */
  /* Sections rendered inside a sub-page's body column, so the sticky sidebar
     keeps up with them (see parts/elements.php). Each still renders its own
     .wrap, which would put the page gutter back inside a column that already
     has one — the indent compounds and the text drifts right down the page. */
  .dept-intro .body > .lhi-el > .wrap {
    display: block;
    max-width: none;
    padding-inline: 0;
  }
  /* "Body aligned" indents an element to line up with this column. Inside the
     column there is nothing left to line up with, and the indent would apply
     twice. */
  .dept-intro .body > .lhi-el--body-aligned > .wrap > * { grid-column: auto; }
  /* The head sits above the content here rather than beside it, so it is one
     column wide and sized for a column rather than for the page. */
  .dept-intro .body .section-head {
    grid-template-columns: 1fr;
    gap: clamp(8px, 1vw, 14px);
    margin-bottom: clamp(24px, 3vw, 40px);
  }
  .dept-intro .body .section-head h2 { font-size: clamp(30px, 3.2vw, 46px); }
  .dept-intro .body .section-head--left h2 { grid-column: 1; grid-row: 2; }
  .dept-intro .body .section-head--left .label {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    padding-top: 0;
  }
  .dept-intro .body > .lhi-el {
    padding-top: clamp(28px, 3.5vw, 48px);
    padding-bottom: 0;
  }
  .dept-intro .body > .lhi-el:first-child { padding-top: clamp(20px, 2.5vw, 32px); }
  /* A banded background inside the column would be a stripe across the text
     rather than the page, so it reaches the column's edges instead. */
  .dept-intro .body > .lhi-el[class*="--bg-"] {
    padding-inline: clamp(20px, 2.4vw, 32px);
    padding-bottom: clamp(28px, 3.5vw, 48px);
    border-radius: var(--r);
  }
  /*
   * The programme-list rows, scaled for a body column.
   *
   * .program is the full-page programme index: 42px titles, 40px of padding
   * above and below, a fixed 110px lane for the level pill. Four of those in a
   * body column came to 577px — no shorter than the stack of buttons they
   * replaced, which was the point of using them. Here the row is a line of a
   * list rather than a page section, and the level lane collapses when there is
   * no pill to put in it.
   */
  .dept-intro .body .program-list { border-top-color: var(--line); }
  .dept-intro .body .program {
    grid-template-columns: 34px 1fr auto 24px;
    gap: 18px;
    padding: 16px 8px;
  }
  .dept-intro .body .program:hover { padding-left: 16px; padding-right: 16px; }
  .dept-intro .body .program .n { font-size: 11px; }
  .dept-intro .body .program .info { gap: 4px; }
  .dept-intro .body .program .info h3 { font-size: 22px; line-height: 1.15; letter-spacing: -0.015em; }
  .dept-intro .body .program .info h3 .en { font-size: 0.6em; margin-left: 10px; }
  .dept-intro .body .program .info p { font-size: 13.5px; max-width: none; }
  .dept-intro .body .program .ar { font-size: 18px; }

  /*
   * A section inside the body column has been indented once already — by the
   * sidebar. Its own label gutter indents it a second time: on /adgengi that
   * left the prose in 579px of a 948px column with 289px of empty gutter beside
   * it, which reads as text that failed to fill its space.
   *
   * One column here, and the two reading measures lifted, because the column IS
   * the measure. A label that exists becomes an eyebrow above the text, which
   * is what the "wide" text layout does at full page width; an empty one — the
   * gutter the two-column pattern needs and this layout does not — goes.
   */
  .dept-intro .body .section-body {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .dept-intro .body .section-body > .prose,
  .dept-intro .body .section-body p.lede { max-width: none; }
  .dept-intro .body .section-body > .label:empty { display: none; }
  .dept-intro .body .section-body > .label {
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    opacity: 0.6;
    padding-top: 0;
  }

  /* A programme's four facts sat across the full page; in the column they pair
     off, which is the 2×2 the Um LHÍ intro already uses. The figures are sized
     against the page width, so they come down with the boxes — 72px in a card
     a third that wide is a number wearing the card, not filling it. */
  .dept-intro .body .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .dept-intro .body .stats-grid .s {
    padding: clamp(24px, 2.6vw, 36px) clamp(18px, 1.8vw, 26px);
  }
  .dept-intro .body .stats-grid .n { font-size: clamp(32px, 3.4vw, 52px); }
  .dept-intro .body .stats-grid .n.is-long { font-size: clamp(24px, 2.4vw, 34px); }
  .dept-intro .body .stats-grid .n.is-xlong { font-size: clamp(19px, 1.8vw, 25px); }
  .dept-intro .body .stats-grid .l { margin-top: 10px; }

  .dept-sidebar {
    /* A grid item defaults to min-width: auto, which is its content's width —
       so a long nav label could push the column wider than the track it was
       given. */
    min-width: 0;
    position: sticky;
    top: clamp(88px, 10vh, 120px);
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 2.4vw, 32px);
  }
  .dept-sidebar .label {
    padding-top: 0;
  }
  .dept-toc {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 4px;
  }
  .dept-toc a {
    font-size: clamp(16px, 1.2vw, 18px);
    letter-spacing: -0.005em;
    padding: 8px 0;
    color: var(--ink);
    opacity: 0.55;
    display: inline-flex;
    /* Top, not centre: once a label wraps, a centred dash floats against the
       middle of a two-line block instead of marking where the item starts. */
    align-items: flex-start;
    gap: 14px;
    /* max-content keeps a short label's hover area to the words rather than
       the whole column, which is what the growing dash animates against. On
       its own it also let a long one ignore the column entirely — the sidebar
       is 300px at most and "Listkennslufræði með aðfaranámi MA/M.Art.Ed/MT"
       is far wider, so it ran straight over the text beside it. Capped, and
       allowed to break: the long ones here are degree suffixes joined by
       slashes, which is not a wrap opportunity in CSS. */
    width: max-content;
    max-width: 100%;
    overflow-wrap: break-word;
    transition: opacity .2s ease, gap .25s ease;
  }
  .dept-toc a::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 1px;
    background: currentColor;
    /* Sits on the first line's optical centre now that the row aligns to top. */
    margin-top: 0.7em;
    transition: width .3s cubic-bezier(.2,.7,.2,1), background .2s ease;
    flex-shrink: 0;
  }
  .dept-toc a:hover {
    opacity: 1;
    text-decoration: none;
    gap: 16px;
  }
  .dept-toc a.is-active {
    opacity: 1;
    font-weight: 500;
  }
  .dept-toc a.is-active::before {
    width: 36px;
  }
  /* Nested sub-items in an in-page TOC (e.g. Bókasafn "Um safnið" group):
     indent the row and shorten its connector so it reads as a child. */
  .dept-toc a.is-sub {
    padding-left: 28px;
    font-size: clamp(14px, 1vw, 15.5px);
  }
  .dept-toc a.is-sub::before { width: 10px; }
  .dept-toc a.is-sub.is-active::before { width: 22px; }
  .dept-intro .body p {
    font-size: clamp(17px, 1.35vw, 20px);
    line-height: 1.6;
    margin: 0 0 1em;
    max-width: 64ch;
  }
  /* Lists match the paragraph scale. With no rule of their own they inherit
     --bs-body-font-size from avista-styles — calc(1.365rem + 1.38vw), 2.4rem
     past the breakpoint, which is 24px against a 10px root — so bullets came
     out larger than the prose they sit in. Same clamp as .body p above. */
  /* Excludes the lists the theme builds itself, by name. A blanket
     "no class at all" guard cannot work here: redesign.js puts a .reveal
     class on every direct child of .body for the scroll animation, and the
     block editor writes .wp-block-list on its own lists, so almost nothing
     in this column is class-free once the page is running. */
  .dept-intro .body ul:not(.faq-links):not(.body-facts):not(.guide-items):not(.tabset),
  .dept-intro .body ol:not(.faq-links):not(.body-facts):not(.guide-items):not(.tabset) {
    font-size: clamp(17px, 1.35vw, 20px);
    line-height: 1.6;
    margin: 0 0 1em;
    padding-left: 1.2em;
    max-width: 64ch;
  }
  .dept-intro .body ul:not(.faq-links):not(.body-facts):not(.guide-items):not(.tabset) li,
  .dept-intro .body ol:not(.faq-links):not(.body-facts):not(.guide-items):not(.tabset) li { margin-bottom: 0.35em; }
  .dept-intro .body ul:not(.faq-links):not(.body-facts):not(.guide-items):not(.tabset) li > p,
  .dept-intro .body ol:not(.faq-links):not(.body-facts):not(.guide-items):not(.tabset) li > p { font-size: inherit; margin: 0; max-width: none; }
  .dept-intro .body p.lede {
    font-size: clamp(22px, 2.1vw, 32px);
    line-height: 1.35;
    font-weight: 500;
    letter-spacing: -0.015em;
    margin-bottom: 1.2em;
    max-width: 48ch;
  }

  /* Pull quote */
  .pullquote {
    background: var(--paper-2);
  }
  .pullquote .wrap {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: clamp(32px, 6vw, 80px);
    align-items: start;
  }
  .pullquote .label {
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    opacity: 0.6;
    padding-top: 12px;
  }
  .pullquote blockquote {
    margin: 0;
    grid-column: 2;
  }
  .pullquote p {
    margin: 0;
    font-size: clamp(28px, 3.4vw, 48px);
    line-height: 1.18;
    font-weight: 500;
    letter-spacing: -0.02em;
    text-wrap: balance;
  }
  .pullquote .attr {
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.55;
    margin-top: 20px;
  }

  /* Programs list */
  .programs { background: var(--paper); }
  .program-list { border-top: 1px solid var(--ink); }
  .program {
    display: grid;
    grid-template-columns: 64px 1fr 110px 40px;
    gap: clamp(20px, 2.4vw, 44px);
    align-items: center;
    padding: clamp(28px, 3vw, 40px) 8px;
    border-bottom: 1px solid var(--line);
    cursor: pointer;
    position: relative;
    transition: padding .35s cubic-bezier(.2,.7,.2,1), background .25s ease, color .25s ease;
  }
  .program:hover {
    background: var(--ink);
    color: var(--paper);
    padding-left: 24px;
    padding-right: 24px;
    text-decoration: none;
  }
  .program .n {
    font-size: 12px;
    letter-spacing: 0.16em;
    opacity: 0.55;
    font-variant-numeric: tabular-nums;
  }
  .program .info { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
  .program .info h3 {
    margin: 0;
    font-size: clamp(26px, 3vw, 42px);
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1;
  }
  .program .info h3 .en {
    font-style: italic;
    font-weight: 400;
    opacity: 0.55;
    font-size: 0.45em;
    margin-left: 12px;
    letter-spacing: 0;
  }
  .program .info p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    opacity: 0.7;
    max-width: 64ch;
  }
  .program:hover .info p { opacity: 0.85; }
  .program .level {
    padding: 6px 14px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    white-space: nowrap;
    justify-self: end;
    transition: border-color .25s ease;
  }
  .program:hover .level { border-color: rgba(255,255,255,0.4); }
  .program .ar {
    font-size: 20px;
    text-align: right;
    opacity: 0.6;
    transition: transform .25s ease, opacity .25s ease;
  }
  .program:hover .ar { transform: translateX(6px); opacity: 1; }
  .program.is-hidden { display: none; }

  /* Variant: row with a building/photo thumbnail in place of the .n number.
     Used on Hafa samband locations list — wider lead cell, full-bleed image. */
  .program-list--withthumb { border-top: 1px solid var(--ink); }
  .program--withthumb {
    grid-template-columns: clamp(120px, 14vw, 180px) 1fr 120px 40px;
    padding: clamp(18px, 2vw, 24px) 8px;
  }
  .program--withthumb:hover {
    padding-top: clamp(18px, 2vw, 24px);
    padding-bottom: clamp(18px, 2vw, 24px);
  }
  .program--withthumb .thumb {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 6px;
    background: var(--paper-2);
  }
  .program--withthumb .thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .6s cubic-bezier(.2,.7,.2,1), filter .35s ease;
  }
  .program--withthumb:hover .thumb img {
    transform: scale(1.06);
    filter: brightness(1.05);
  }

  /* Partners grid */
  .partners-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1px;
    background: var(--line);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
  .partner {
    background: var(--paper);
    padding: 22px 20px;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -0.005em;
    display: flex;
    align-items: center;
    transition: background .2s ease;
  }
  .partner:hover { background: var(--paper-2); text-decoration: none; }
  .partners-foot {
    margin-top: 24px;
    font-size: 13px;
    opacity: 0.65;
    display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  }

  /* ---- Legacy Bootstrap grid inside a redesign section ----------------
     Legacy blocks bring their own .container > .row > .col-*, sized to narrow
     a full-width page. Inside a redesign column there is nothing left to
     narrow, so the page ends up reading at roughly half the width it has:
     the container adds its own gutter, then a col-lg-10.mx-auto takes 83% of
     that and centres it.

     The container's gutter and max-width go, since the redesign column already
     provides both. A column that is alone in its row expands to fill —
     :only-child is what distinguishes "this was narrowing a wide page" from a
     genuine multi-column row, whose columns keep their widths and gutters. */
  .lhi-el .container,
  .dept-intro .body .container {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
  }
  /* The row's negative margins are the counterpart to the container's padding
     — dropping one without the other pushes the row back out past the column. */
  .lhi-el .row,
  .dept-intro .body .row {
    margin-left: 0;
    margin-right: 0;
  }
  .lhi-el .row > [class*="col-"]:only-child,
  .dept-intro .body .row > [class*="col-"]:only-child {
    width: 100%;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
    margin-left: 0 !important;  /* beats .mx-auto's own !important */
    margin-right: 0 !important;
  }

  /* Reusable: prose body under a section-head (1fr 2fr) */
  .section-body {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: clamp(32px, 6vw, 80px);
    align-items: start;
  }
  .section-body > .prose { max-width: 64ch; }

  /*
   * Full width, set per element by "Text layout". One column, and the two
   * reading measures lifted — .prose's 64ch and p.lede's 48ch, both of which
   * would otherwise keep the text narrow however wide the section is. The
   * label, when there is one, becomes an eyebrow above it; when there is not,
   * the template omits the div entirely rather than leaving an empty cell.
   */
  .section-body--wide {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  /* The class is doubled to outrank .section-body p.lede, which sets 48ch and
     is declared further down — equal specificity would let source order decide,
     and this override has to hold wherever it sits in the file. */
  .section-body.section-body--wide > .prose,
  .section-body.section-body--wide p.lede { max-width: none; }
  .section-body--wide > .label {
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    opacity: 0.6;
    padding-top: 0;
  }
  .section-body p {
    font-size: clamp(17px, 1.35vw, 20px);
    line-height: 1.6;
    margin: 0 0 1em;
  }
  .section-body p:last-child { margin-bottom: 0; }
  .section-body p.lede {
    font-size: clamp(22px, 2.1vw, 32px);
    line-height: 1.35;
    font-weight: 500;
    letter-spacing: -0.015em;
    margin-bottom: 1.2em;
    max-width: 48ch;
  }
  .section-body .meta {
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    opacity: 0.6;
    padding-top: 12px;
  }
  /* Subheadings and lists inside migrated prose (project descriptions and the
     like), which would otherwise fall back to the legacy heading scale. */
  .section-body .prose > :first-child { margin-top: 0; }
  /*
   * h1 and h2 take the design's in-flow section heading — the same values as
   * .section-head--inline h2 — so a heading typed into the editor matches the
   * ones the builder's own elements render.
   *
   * Without this they fall through to avista-styles.css, where h2 is 6rem
   * above 1200px: a 96px heading over 20px body text, which is what prompted
   * this. h1 is included because the format dropdown offers it and a page
   * already has its real h1 in the hero; it is styled rather than left to the
   * legacy scale, not endorsed.
   */
  .section-body .prose h1,
  .section-body .prose h2 {
    font-size: clamp(34px, 4.2vw, 56px);
    line-height: 0.98;
    font-weight: 700;
    letter-spacing: -0.025em;
    text-wrap: balance;
    margin: 1.4em 0 0.4em;
  }
  /* h5 and h6 join h3/h4 rather than fall through, for the same reason. */
  .section-body .prose h3,
  .section-body .prose h4,
  .section-body .prose h5,
  .section-body .prose h6 {
    font-size: clamp(17px, 1.35vw, 20px);
    line-height: 1.35;
    font-weight: 600;
    letter-spacing: -0.005em;
    margin: 1.8em 0 0.5em;
  }
  .section-body .prose ul,
  .section-body .prose ol {
    font-size: clamp(17px, 1.35vw, 20px);
    line-height: 1.6;
    margin: 0 0 1em;
    padding-left: 1.2em;
  }
  .section-body .prose li { margin-bottom: 0.35em; }

  /*
   * Media inserted from the editor, in both places an editor can insert it:
   * the prose column and an accordion body. The global reset makes every img a
   * block, which is right for a standalone image and wrong for a floated one,
   * so the alignment classes restore the float themselves. Without these,
   * choosing "Align left" in the editor does nothing visible.
   */
  .section-body .prose img,
  .section-body .prose figure,
  .faq-item .faq-body img,
  .faq-item .faq-body figure { margin: 1.6em 0; }
  .section-body .prose figure img,
  .faq-item .faq-body figure img { margin: 0; }
  .section-body .prose figcaption,
  .section-body .prose .wp-caption-text,
  .faq-item .faq-body figcaption,
  .faq-item .faq-body .wp-caption-text {
    font-size: 14px;
    line-height: 1.4;
    opacity: 0.6;
    margin: 8px 0 0;
  }
  .section-body .prose .alignleft,
  .faq-item .faq-body .alignleft {
    float: left;
    max-width: 50%;
    margin: 0.3em 1.6em 1.2em 0;
  }
  .section-body .prose .alignright,
  .faq-item .faq-body .alignright {
    float: right;
    max-width: 50%;
    margin: 0.3em 0 1.2em 1.6em;
  }
  .section-body .prose .aligncenter,
  .faq-item .faq-body .aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
  .section-body .prose .alignleft img,
  .section-body .prose .alignright img,
  .section-body .prose .aligncenter img,
  .faq-item .faq-body .alignleft img,
  .faq-item .faq-body .alignright img,
  .faq-item .faq-body .aligncenter img { width: 100%; }
  /* A float must not escape into the element below. */
  .section-body .prose::after,
  .faq-item .faq-body::after { content: ""; display: table; clear: both; }
  @media (max-width: 600px) {
    .section-body .prose .alignleft,
    .section-body .prose .alignright,
    .faq-item .faq-body .alignleft,
    .faq-item .faq-body .alignright { float: none; max-width: 100%; margin: 1.6em 0; }
  }
  .section-body .prose a { text-decoration: underline; text-underline-offset: 0.2em; }

  /* ------------------- Image slider ------------------- */

  /*
   * A scroll-snap rail, the same mechanism as the news carousel. --per is set
   * per element and decides how many slides fit; the basis subtracts the gaps
   * so N slides land exactly on the track's width. It steps down on narrow
   * screens rather than shrinking the images to nothing.
   */
  .lhi-slider .rail-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: clamp(16px, 2vw, 24px);
  }
  .lhi-slider .rail-progress {
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    opacity: 0.6;
  }
  .lhi-slider .rail-buttons { display: flex; gap: 8px; }

  .lhi-slider .slider-track {
    /*
     * The element sets --per-lg inline, and an inline custom property would
     * outrank anything here — so the count the layout actually uses is derived
     * from it, leaving the media queries below free to step it down.
     */
    --per: var(--per-lg, 3);
    --slider-gap: clamp(12px, 1.6vw, 20px);
    display: flex;
    gap: var(--slider-gap);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Room for the focus ring, which overflow-x would otherwise clip. */
    padding: 3px;
    margin: -3px;
  }
  .lhi-slider .slider-track::-webkit-scrollbar { display: none; }
  .lhi-slider .slider-track:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

  .lhi-slider .slide {
    flex: 0 0 calc( (100% - (var(--per) - 1) * var(--slider-gap)) / var(--per) );
    scroll-snap-align: start;
    margin: 0;
    display: block;
    position: relative;
    border-radius: var(--r);
    overflow: hidden;
    background: var(--paper-2);
  }
  .lhi-slider .slide img {
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    transition: transform 1.2s cubic-bezier(.2,.7,.2,1);
  }
  .lhi-slider a.slide:hover img { transform: scale(1.04); }
  .lhi-slider a.slide:hover { text-decoration: none; }
  .lhi-slider .slide-caption {
    display: block;
    font-size: 13px;
    line-height: 1.4;
    opacity: 0.6;
    padding: 8px 2px 0;
  }
  /* A caption that names a person or a work is content, not a footnote, so it
     carries more weight than a media-library caption does. */
  .lhi-slider .slide-caption:has(.slide-tag) { opacity: 1; }
  .lhi-slider .slide-tag {
    display: block;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    opacity: 0.55;
    margin-bottom: 4px;
  }
  /* A slide holding a caption must not crop its subject out of frame. */
  .lhi-slider .slide:has(.slide-caption) img { aspect-ratio: 3 / 4; }

  @media (max-width: 900px) {
    /* Three or four across stops being legible before the phone breakpoint. */
    .lhi-slider .slider-track { --per: 2; }
  }
  @media (max-width: 600px) {
    .lhi-slider .slider-track { --per: 1; }
    .lhi-slider .rail-head { display: none; }
  }

  /* ------------------- Columns element ------------------- */

  /*
   * Twelve tracks, because that is what the content assumes: the legacy
   * acf/columns block emitted Bootstrap col-lg-12/6/4/3, and mixed widths in
   * one block are common. Spans wrap onto a new row when a row fills, so a
   * half beside two quarters works without the editor arranging rows.
   *
   * Typography is not defined here. Each column's body is .section-body--wide
   * > .prose, so it inherits the Rich content rules — headings, lists, links,
   * editor media — rather than growing a parallel set that would drift.
   *
   * The classes are prefixed: a bare .col picks up a rule from the legacy
   * avista-styles.css, which is still enqueued.
   */
  .lhi-cols .lhi-col-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: clamp(24px, 4vw, 64px);
    row-gap: clamp(32px, 4vw, 56px);
    align-items: start;
  }
  .lhi-cols .lhi-col--12 { grid-column: span 12; }
  .lhi-cols .lhi-col--6  { grid-column: span 6; }
  .lhi-cols .lhi-col--4  { grid-column: span 4; }
  .lhi-cols .lhi-col--3  { grid-column: span 3; }

  .lhi-cols .lhi-col-action { margin: 1.4em 0 0; }

  /*
   * The prose h1/h2 is sized for the width of the container. In a column it is
   * not: 54px over a 563px measure is a headline in a paragraph's worth of
   * space. Scaled to the track instead — the same type, fitted, rather than a
   * second set of heading rules.
   */
  .lhi-cols .lhi-col--6 .prose h1,
  .lhi-cols .lhi-col--6 .prose h2 { font-size: clamp(28px, 3vw, 40px); }
  .lhi-cols .lhi-col--4 .prose h1,
  .lhi-cols .lhi-col--4 .prose h2,
  .lhi-cols .lhi-col--3 .prose h1,
  .lhi-cols .lhi-col--3 .prose h2 { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.1; }

  /* A single full-width column is prose, not a layout — hold it to a measure. */
  .lhi-cols .lhi-col--12:only-child > .section-body--wide > .prose { max-width: 64ch; }

  @media (max-width: 900px) {
    .lhi-cols .lhi-col--3 { grid-column: span 6; }
  }
  @media (max-width: 780px) {
    .lhi-cols .lhi-col-grid { grid-template-columns: 1fr; }
    .lhi-cols .lhi-col--12,
    .lhi-cols .lhi-col--6,
    .lhi-cols .lhi-col--4,
    .lhi-cols .lhi-col--3 { grid-column: 1 / -1; }
  }

  /* ------------------- Study program page ------------------- */

  /* Áherslur — focus area / discipline grid */
  .focus-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1px;
    background: var(--line);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    margin-top: clamp(32px, 4vw, 56px);
  }
  .focus {
    background: var(--paper);
    padding: clamp(22px, 2.6vw, 32px) clamp(20px, 2.4vw, 28px);
    display: flex; flex-direction: column; gap: 10px;
  }
  .focus .n {
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.5;
    font-variant-numeric: tabular-nums;
  }
  .focus h3 {
    margin: 0;
    font-size: clamp(20px, 1.7vw, 24px);
    font-weight: 500;
    letter-spacing: -0.015em;
    line-height: 1.1;
  }
  .focus h3 .en {
    display: block;
    font-size: 13px;
    font-weight: 400;
    font-style: italic;
    opacity: 0.55;
    margin-top: 4px;
    letter-spacing: 0;
  }
  .focus p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    opacity: 0.7;
  }

  /* Variant: 3-up tile grid scoped to .dept-intro right column (Hafa samband).
     Forces three columns regardless of viewport (collapses to 2 then 1 below). */
  .focus-grid--triple {
    grid-template-columns: repeat(3, 1fr);
  }
  @media (max-width: 960px) {
    .focus-grid--triple { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 560px) {
    .focus-grid--triple { grid-template-columns: 1fr; }
  }
  /* Variant: 2-up tile grid for narrower editorial columns (e.g. the
     .dept-intro body on Lífið í LHÍ). Collapses to 1 column on phones. */
  .focus-grid--duo { grid-template-columns: repeat(2, 1fr); }
  @media (max-width: 560px) {
    .focus-grid--duo { grid-template-columns: 1fr; }
  }
  /* A titled sub-block inside an editorial .dept-intro body column */
  .body-block { margin-top: clamp(40px, 5vw, 64px); }

  /* Tengileiðir block lives inside .dept-intro .body — spacing + inline head */
  .leidir-block {
    margin-top: clamp(48px, 6vw, 72px);
    padding-top: clamp(32px, 4vw, 48px);
    border-top: 1px solid var(--ink);
  }
  .section-head--inline {
    margin-bottom: clamp(20px, 2.5vw, 32px);
  }
  .section-head--inline h2 {
    font-size: clamp(34px, 4.2vw, 56px);
    line-height: 0.98;
    margin: 0;
  }

  /* Intake — key dates + requirements split */
  .intake { background: var(--paper-2); }
  .intake .wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 5vw, 80px);
    align-items: start;
  }
  .intake .col h3 {
    margin: 0 0 18px;
    font-size: clamp(22px, 2.2vw, 32px);
    font-weight: 500;
    letter-spacing: -0.015em;
    line-height: 1;
  }
  .intake .key-dates,
  .intake .reqs {
    list-style: none;
    margin: 0; padding: 0;
    border-top: 1px solid var(--ink);
  }
  .intake .key-dates li {
    padding: 16px 0;
    border-bottom: 1px solid var(--line);
    display: grid;
    gap: 16px;
    font-size: 17px;
    line-height: 1.5;
    align-items: baseline;
    grid-template-columns: 150px 1fr;
  }
  .intake .key-dates .date {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.005em;
  }
  .intake .key-dates .what { opacity: 0.75; }
  /* Reqs rows: inline prose with a hanging bullet. Position-based so that
     anchors / inline elements stay in the text flow and wrap under the
     first character of the line, not under the bullet. */
  .intake .reqs li {
    position: relative;
    padding: 16px 0 16px 28px;
    border-bottom: 1px solid var(--line);
    font-size: 17px;
    line-height: 1.55;
  }
  .intake .reqs li::before {
    content: "·";
    position: absolute;
    left: 6px;
    top: 14px;
    font-size: 22px;
    line-height: 1.55;
    opacity: 0.4;
  }
  /* Bare checkmark markers instead of dots (e.g. Bókasafn "Aðgengi"
     list). Sized to the first text line and flex-centred on both axes. */
  .intake .reqs.reqs--check li::before {
    content: "✓";
    left: 0;
    top: 16px;
    width: 20px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border-radius: 0;
    color: var(--ink);
    font-size: 16px;
    line-height: 1;
    opacity: 1;
  }

  /* Process — numbered application-process steps */
  .process { border-top: 1px solid var(--ink); }
  .process-step {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: clamp(20px, 2.5vw, 44px);
    padding: clamp(22px, 2.6vw, 36px) 8px;
    border-bottom: 1px solid var(--line);
  }
  .process-step .n {
    font-size: clamp(24px, 2.4vw, 36px);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    opacity: 0.35;
    line-height: 1;
    padding-top: 4px;
  }
  .process-step h3 {
    margin: 0 0 6px;
    font-size: clamp(20px, 1.7vw, 26px);
    font-weight: 500;
    letter-spacing: -0.015em;
    line-height: 1.15;
  }
  .process-step p {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    opacity: 0.72;
    max-width: 64ch;
  }

  /* Related programs grid (cross-link to sibling programs) */
  .related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin-top: clamp(32px, 4vw, 56px);
  }
  .related-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 24px;
    display: flex; flex-direction: column; gap: 10px;
    min-height: 160px;
    transition: background .25s ease, color .25s ease, transform .25s ease, border-color .25s ease;
  }
  .related-card:hover {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
    text-decoration: none;
    transform: translateY(-2px);
  }
  .related-card .tag {
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.6;
  }
  .related-card h3 {
    margin: 0;
    font-size: clamp(18px, 1.6vw, 22px);
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.15;
  }
  .related-card .more {
    margin-top: auto;
    font-size: 13px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .related-card .more::after { content: "→"; transition: transform .2s ease; }
  .related-card:hover .more::after { transform: translateX(3px); }

  /* ------------------- Library page ------------------- */

  /* Inline "Open now" status pill (reuses .live-dot pulse) */
  .status-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(6,147,103,0.12);
    color: var(--green);
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 500;
  }
  .status-pill .live-dot { background: var(--green); margin-right: 0; }
  .status-pill.is-closed {
    background: rgba(10,10,10,0.06);
    color: var(--ink);
  }
  .status-pill.is-closed .live-dot {
    background: var(--ink);
    opacity: 0.4;
    animation: none;
  }

  /* Opening-hours list (rich reuse of .intake .key-dates) */
  .hours-list {
    list-style: none;
    margin: 0; padding: 0;
    border-top: 1px solid var(--ink);
  }
  .hours-list li {
    display: grid;
    grid-template-columns: 200px 1fr auto;
    gap: 24px;
    align-items: baseline;
    padding: 16px 0;
    border-bottom: 1px solid var(--line);
    font-size: 17px;
    line-height: 1.5;
    font-variant-numeric: tabular-nums;
  }
  .hours-list .day { font-weight: 500; }
  .hours-list .hours { opacity: 0.7; }
  .hours-list .note {
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.55;
  }
  .hours-list li.is-today {
    background: var(--paper-2);
    margin: 0 -12px;
    padding-left: 12px; padding-right: 12px;
  }

  /* Staff grid — extends .related-card with email affordance.
     Locked to 3 per row; collapses to 2 on tablet, 1 on phone. */
  .staff-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: clamp(32px, 4vw, 56px);
  }
  @media (max-width: 960px) {
    .staff-grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 600px) {
    .staff-grid { grid-template-columns: 1fr; }
  }
  .staff-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 24px;
    display: flex; flex-direction: column; gap: 8px;
    transition: background .25s ease, border-color .25s ease, transform .25s ease;
  }
  .staff-card:hover {
    background: var(--paper-2);
    border-color: var(--line-strong);
    text-decoration: none;
    transform: translateY(-2px);
  }
  .staff-card .role {
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.6;
  }
  .staff-card h3 {
    margin: 0;
    font-size: clamp(18px, 1.6vw, 22px);
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.15;
  }
  .staff-card .email {
    margin-top: auto;
    font-size: 14px;
    opacity: 0.75;
    font-feature-settings: "tnum";
    padding-top: 12px;
  }

  /* Library catalog search banner (reuses .search-form).
     Renamed from .catalog-search to avoid colliding with the
     namsframbod pill-input rule of the same name further down. */
  /* Library search pulled into the (plain, light) Bókasafn hero. */
  .dept-hero .hero-search {
    margin-top: clamp(28px, 3.5vw, 44px);
    max-width: 760px;
  }
  .dept-hero .hero-search .hint {
    font-size: 13px;
    opacity: 0.6;
    margin: 14px 0 0;
    letter-spacing: 0.04em;
  }

  /* ------------------- Dagatal (calendar) ------------------- */
  /* Category accent colors */
  .dot { display: inline-block; width: 8px; height: 8px; border-radius: 999px; margin-right: 7px; vertical-align: middle; }
  /*
   * One colour per calendar category, named once here and read by the dot, the
   * row pill and the grid chip — the three places a category is shown.
   *
   * Three values, because a category needs three things and they are not the
   * same colour. --cat is the solid, for the dot and the phone bars. --cat-soft
   * is a wash of it, which is what a row label wears: a filled chip on every
   * line reads as the loudest thing in the row, ahead of the event it labels.
   * --cat-text is what stays legible on that wash — Eruption Red can be its own
   * text, but Morning Pink and Ice Blue measure 2.0:1 and 1.3:1 on white and
   * are surfaces, not text colours, so they take ink.
   */
  .dot-fri,       .cat-fri,       .cal-chip.cat-fri       { --cat: var(--pink); --cat-soft: rgba(255, 151, 151, 0.28); --cat-text: var(--ink); }
  .dot-skoli,     .cat-skoli,     .cal-chip.cat-skoli     { --cat: var(--red);  --cat-soft: rgba(147, 31, 15, 0.10);  --cat-text: var(--red); }
  .dot-vidburdur, .cat-vidburdur, .cal-chip.cat-vidburdur { --cat: var(--ice);  --cat-soft: rgba(197, 236, 255, 0.75); --cat-text: var(--ink); }

  /* The ring keeps Ice Blue from disappearing as an 8px dot on paper. */
  .dot-fri,
  .dot-skoli,
  .dot-vidburdur {
    background: var(--cat);
    box-shadow: inset 0 0 0 1px rgba(10, 10, 10, 0.14);
  }

  .cal .wrap { padding-top: clamp(28px, 3vw, 44px); }

  /* Free-text search pill */
  .cal-search {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 16px;
    margin-bottom: 16px;
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: 999px;
    transition: border-color .2s ease, background .2s ease;
  }
  .cal-search:focus-within { border-color: var(--ink); background: var(--paper); }
  .cal-search svg { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.55; }
  .cal-search input {
    flex: 1;
    border: 0; background: transparent;
    padding: 14px 4px;
    font-family: inherit; font-size: 16px; color: var(--ink);
    outline: none; -webkit-appearance: none; appearance: none;
  }
  .cal-search input::placeholder { color: rgba(10,10,10,0.45); }
  .cal-search input::-webkit-search-decoration,
  .cal-search input::-webkit-search-cancel-button { display: none; }
  .cal-search .clear {
    width: 24px; height: 24px; flex-shrink: 0;
    border-radius: 999px; border: 0;
    background: var(--ink); color: var(--paper);
    font-size: 16px; line-height: 1; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
  }

  /* Toolbar */
  .cal-toolbar {
    display: flex;
    align-items: center;
    gap: 14px 20px;
    flex-wrap: wrap;
    padding-bottom: clamp(18px, 2.2vw, 24px);
    border-bottom: 1px solid var(--line);
  }
  .cal-views {
    display: inline-flex;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 4px;
    background: var(--paper-2);
  }
  .cal-view-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 16px;
    border: 0; background: transparent; color: var(--ink);
    font-family: inherit; font-size: 13px; font-weight: 500;
    border-radius: 999px; cursor: pointer; opacity: 0.6;
    transition: background .2s ease, opacity .2s ease, color .2s ease;
  }
  .cal-view-btn svg { width: 16px; height: 16px; }
  .cal-view-btn:hover { opacity: 1; }
  .cal-view-btn.is-active { background: var(--ink); color: var(--paper); opacity: 1; }

  .cal-filters { margin-right: auto; }

  /* Subscribe dropdown (native details) */
  .cal-subscribe { position: relative; }
  .cal-subscribe > summary {
    list-style: none;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 20px;
    border: 1px solid var(--ink);
    border-radius: 999px;
    font-size: 14px; font-weight: 500;
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
  }
  .cal-subscribe > summary::-webkit-details-marker { display: none; }
  .cal-subscribe > summary svg { width: 15px; height: 15px; }
  .cal-subscribe[open] > summary,
  .cal-subscribe > summary:hover { background: var(--ink); color: var(--paper); }
  .cal-subscribe-menu {
    position: absolute;
    right: 0; top: calc(100% + 8px);
    width: 280px;
    background: var(--paper);
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    box-shadow: 0 30px 60px -28px rgba(0,0,0,0.3);
    padding: 8px;
    z-index: 30;
  }
  .cal-subscribe-menu .sub-intro {
    margin: 6px 10px 10px;
    font-size: 12.5px; line-height: 1.45; opacity: 0.6;
  }
  .cal-subscribe-menu .sub-link {
    display: flex; flex-direction: column; gap: 2px;
    padding: 10px 12px;
    border-radius: 7px;
    transition: background .15s ease;
  }
  .cal-subscribe-menu .sub-link:hover { background: var(--paper-2); text-decoration: none; }
  .cal-subscribe-menu .sub-link strong { font-size: 14px; font-weight: 500; }
  .cal-subscribe-menu .sub-link span { font-size: 12px; opacity: 0.6; }

  /* Meta row */
  .cal-meta {
    display: flex; justify-content: space-between; align-items: baseline;
    padding: clamp(18px, 2.2vw, 24px) 0;
    font-size: 13px; letter-spacing: 0.04em;
  }
  .cal-meta #calCount { opacity: 0.6; }
  .cal-reset {
    border: 0; background: transparent; color: var(--ink);
    font-family: inherit; font-size: 13px;
    text-decoration: underline; text-underline-offset: 3px;
    cursor: pointer; opacity: 0.65;
  }
  .cal-reset:hover { opacity: 1; }

  /* List view */
  .cal-month { margin-bottom: clamp(20px, 2.5vw, 32px); }
  .cal-month.is-hidden { display: none; }
  .cal-month-label {
    margin: 0 0 6px;
    font-size: 13px; font-weight: 500;
    letter-spacing: 0.16em; text-transform: uppercase;
    opacity: 0.5;
    padding: 14px 0 10px;
    border-bottom: 1px solid var(--ink);
  }
  .cal-ev {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    gap: clamp(16px, 2vw, 32px);
    align-items: center;
    padding: 16px 8px;
    border-bottom: 1px solid var(--line);
    position: relative;
    transition: padding .3s cubic-bezier(.2,.7,.2,1), background .2s ease;
  }
  .cal-ev:hover { background: var(--paper-2); padding-left: 16px; padding-right: 16px; }
  .cal-ev.is-hidden { display: none; }
  .cal-ev-date {
    display: flex; flex-direction: column; align-items: center;
    line-height: 1;
  }
  .cal-ev-date .d { font-size: clamp(26px, 3vw, 34px); font-weight: 500; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
  .cal-ev-date .m { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.55; margin-top: 4px; }
  .cal-ev-body { min-width: 0; }
  .cal-ev-body h3 { margin: 6px 0 4px; font-size: clamp(17px, 1.5vw, 21px); font-weight: 500; letter-spacing: -0.015em; line-height: 1.2; }
  .cal-ev-body p { margin: 0; font-size: 13.5px; opacity: 0.65; }
  .cal-cat {
    display: inline-block;
    font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600;
    padding: 4px 9px; border-radius: 999px;
  }
  .cat-fri,
  .cat-skoli,
  .cat-vidburdur { background: var(--cat-soft); color: var(--cat-text); }

  /* Add-to-calendar (native details) */
  .cal-add { position: relative; justify-self: end; }
  .cal-add > summary {
    list-style: none;
    white-space: nowrap;
    font-size: 12.5px; font-weight: 500;
    padding: 8px 14px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    cursor: pointer;
    opacity: 0.8;
    transition: background .2s ease, color .2s ease, opacity .2s ease, border-color .2s ease;
  }
  .cal-add > summary::-webkit-details-marker { display: none; }
  .cal-add[open] > summary,
  .cal-add > summary:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); opacity: 1; }
  .cal-add-menu {
    position: absolute;
    right: 0; top: calc(100% + 6px);
    width: 180px;
    background: var(--paper);
    border: 1px solid var(--line-strong);
    border-radius: 9px;
    box-shadow: 0 24px 48px -24px rgba(0,0,0,0.32);
    padding: 6px;
    z-index: 20;
    display: flex; flex-direction: column;
  }
  .cal-add-menu a {
    padding: 9px 12px; border-radius: 6px;
    font-size: 13px;
    transition: background .15s ease;
  }
  .cal-add-menu a:hover { background: var(--paper-2); text-decoration: none; }

  /* Reach further back or forward in the list. Created by the calendar JS, so
     a browser without it simply gets every month, which is the old behaviour
     and no worse than a button that does nothing. */
  .cal-more {
    display: block;
    width: 100%;
    margin: 8px 0;
    padding: 14px 18px;
    background: none;
    border: 1px solid var(--line);
    border-radius: 999px;
    font: inherit;
    font-size: 15px;
    color: inherit;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
  }
  .cal-more:hover { background: rgba(10,10,10,0.04); border-color: var(--ink); }
  .cal-more[hidden] { display: none; }
  .cal-more--earlier { margin-bottom: 18px; }
  .cal-more--later { margin-top: 18px; }

  .cal-empty { padding: clamp(40px, 6vw, 80px) 0; text-align: center; border-bottom: 1px solid var(--line); }
  .cal-empty p { margin: 0 0 16px; opacity: 0.7; }

  /* Month-grid view */
  .cal-grid-view { padding-top: 4px; }
  .cal-grid-head {
    display: flex; align-items: center; gap: 14px;
    padding: clamp(14px, 2vw, 22px) 0;
  }
  .cal-nav {
    width: 40px; height: 40px; border-radius: 999px;
    border: 1px solid var(--line-strong); background: transparent; color: var(--ink);
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
  }
  .cal-nav:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
  .cal-nav svg { width: 16px; height: 16px; }
  .cal-grid-month { margin: 0; font-size: clamp(22px, 2.4vw, 32px); font-weight: 500; letter-spacing: -0.02em; min-width: 200px; }
  .cal-today {
    margin-left: auto;
    border: 1px solid var(--line-strong); background: transparent; color: var(--ink);
    font-family: inherit; font-size: 13px; font-weight: 500;
    padding: 9px 16px; border-radius: 999px; cursor: pointer;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
  }
  .cal-today:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
  .cal-weekdays {
    display: grid; grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    margin-bottom: 1px;
  }
  .cal-weekdays span {
    font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
    opacity: 0.5; padding: 8px 10px; text-align: left;
  }
  .cal-grid {
    display: grid; grid-template-columns: repeat(7, 1fr);
    gap: 1px; background: var(--line);
    border: 1px solid var(--line);
  }
  .cal-day {
    background: var(--paper);
    min-height: clamp(88px, 12vw, 132px);
    padding: 8px;
    display: flex; flex-direction: column; gap: 5px;
  }
  .cal-day.is-empty { background: var(--paper-2); opacity: 0.5; }
  .cal-day.is-today { background: rgba(6,147,103,0.06); }
  .cal-day-num { font-size: 13px; font-variant-numeric: tabular-nums; opacity: 0.65; font-weight: 500; }
  .cal-day.is-today .cal-day-num {
    background: var(--ink); color: var(--paper);
    width: 24px; height: 24px; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .cal-chip {
    font-size: 11.5px; line-height: 1.25;
    padding: 4px 7px; border-radius: 5px;
    border-left: 3px solid transparent;
    background: var(--paper-2);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .cal-chip.cat-fri,
  .cal-chip.cat-skoli,
  .cal-chip.cat-vidburdur { border-left-color: var(--cat); background: var(--cat-soft); }

  /* ------------------- Gjaldskrá (pricing) ------------------- */
  /* Tuition pricing cards — one per study level, headline per-term
     figure on top, itemized breakdown below. */
  .price-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: clamp(32px, 4vw, 48px);
  }
  .price-card {
    display: flex; flex-direction: column;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: clamp(24px, 2.6vw, 34px);
    transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
  }
  .price-card:hover {
    border-color: var(--ink);
    transform: translateY(-3px);
    box-shadow: 0 30px 60px -32px rgba(0,0,0,0.2);
  }
  .price-card .lvl {
    align-self: flex-start;
    font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600;
    padding: 5px 11px;
    border: 1px solid var(--ink);
    border-radius: 999px;
  }
  .price-card .pname {
    margin: 18px 0 0;
    font-size: clamp(20px, 1.8vw, 24px); font-weight: 500;
    letter-spacing: -0.015em; line-height: 1.15;
  }
  .price-card .pname .dur {
    display: block; font-size: 13px; font-weight: 400; opacity: 0.55; margin-top: 4px; letter-spacing: 0;
  }
  .price-card .amount {
    margin-top: clamp(18px, 2vw, 24px);
    font-size: clamp(38px, 4.2vw, 52px); font-weight: 500;
    letter-spacing: -0.03em; line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  .price-card .per { font-size: 13px; opacity: 0.55; margin-top: 6px; letter-spacing: 0.04em; }
  .price-card .rows {
    list-style: none; margin: clamp(20px, 2.4vw, 28px) 0 0; padding: 0;
    border-top: 1px solid var(--line);
  }
  .price-card .rows li {
    display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
    padding: 11px 0;
    border-bottom: 1px solid var(--line);
    font-size: 14px;
  }
  .price-card .rows .k { opacity: 0.7; }
  .price-card .rows .v { font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; }
  .price-card .pc-foot { margin-top: auto; padding-top: clamp(20px, 2.4vw, 26px); }
  .price-card .pc-note { font-size: 12.5px; line-height: 1.5; opacity: 0.6; margin: 0 0 14px; }
  .price-card .pc-cta {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 14px; font-weight: 500;
    text-underline-offset: 4px; text-decoration: underline; text-decoration-thickness: 1px;
  }
  .price-card .pc-cta .ar { transition: transform .2s ease; }
  .price-card:hover .pc-cta .ar { transform: translateX(4px); }

  /* Fee table — itemized price list (name left, amount right) */
  .fee-table { margin-top: clamp(28px, 3.5vw, 44px); border-top: 1px solid var(--ink); }
  .fee-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px 28px;
    align-items: baseline;
    padding: 16px 4px;
    border-bottom: 1px solid var(--line);
    transition: background .2s ease, padding .3s cubic-bezier(.2,.7,.2,1);
  }
  .fee-row:hover { background: var(--paper-2); padding-left: 12px; padding-right: 12px; }
  .fee-row .fee-name { font-size: clamp(16px, 1.4vw, 19px); font-weight: 500; letter-spacing: -0.01em; }
  .fee-row .fee-name .en { font-style: italic; font-weight: 400; opacity: 0.5; font-size: 0.8em; margin-left: 10px; letter-spacing: 0; }
  .fee-row .fee-desc { grid-column: 1; font-size: 13px; opacity: 0.6; margin-top: 4px; max-width: 60ch; }
  .fee-row .fee-amount {
    grid-row: 1; grid-column: 2;
    font-size: clamp(17px, 1.5vw, 20px); font-weight: 500;
    white-space: nowrap; font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
  }

  @media (max-width: 900px) {
    .price-cards { grid-template-columns: 1fr; gap: 14px; }
  }

  /* ------------------- Document library (Lög og reglur) ------------------- */
  /* Searchable + category-filterable list of laws, regulations and
     policy documents. Search pill + chip filters + linked rows. */
  .doc-search {
    display: flex; align-items: center; gap: 10px;
    padding: 0 16px; margin-bottom: 16px;
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: 999px;
    transition: border-color .2s ease, background .2s ease;
  }
  .doc-search:focus-within { border-color: var(--ink); background: var(--paper); }
  .doc-search svg { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.55; }
  .doc-search input {
    flex: 1; border: 0; background: transparent;
    padding: 14px 4px;
    font-family: inherit; font-size: 16px; color: var(--ink);
    outline: none; -webkit-appearance: none; appearance: none;
  }
  .doc-search input::placeholder { color: rgba(10,10,10,0.45); }
  .doc-search input::-webkit-search-decoration,
  .doc-search input::-webkit-search-cancel-button { display: none; }
  .doc-search .clear {
    width: 24px; height: 24px; flex-shrink: 0;
    border-radius: 999px; border: 0;
    background: var(--ink); color: var(--paper);
    font-size: 16px; line-height: 1; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .doc-filters { display: flex; flex-wrap: wrap; gap: 6px; }
  .doc-meta {
    display: flex; justify-content: space-between; align-items: baseline;
    padding: clamp(16px, 2vw, 22px) 0 clamp(12px, 1.6vw, 18px);
    font-size: 13px; letter-spacing: 0.04em;
  }
  .doc-meta #docCount { opacity: 0.6; }
  .doc-reset {
    border: 0; background: transparent; color: var(--ink);
    font-family: inherit; font-size: 13px;
    text-decoration: underline; text-underline-offset: 3px;
    cursor: pointer; opacity: 0.65;
  }
  .doc-reset:hover { opacity: 1; }
  .doc-list { border-top: 1px solid var(--ink); }
  .doc-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px 28px;
    align-items: start;
    padding: 18px 6px;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
    transition: background .2s ease, padding .3s cubic-bezier(.2,.7,.2,1);
  }
  .doc-row:hover { background: var(--paper-2); padding-left: 14px; padding-right: 14px; text-decoration: none; }
  .doc-row.is-hidden { display: none; }
  .doc-row .doc-cat {
    display: inline-block;
    font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600;
    padding: 4px 9px; border-radius: 999px;
    background: var(--paper-2); border: 1px solid var(--line-strong);
    opacity: 0.75;
  }
  .doc-row:hover .doc-cat { background: var(--paper); }
  .doc-row h3 {
    margin: 10px 0 4px;
    font-size: clamp(17px, 1.45vw, 20px); font-weight: 500; letter-spacing: -0.01em; line-height: 1.2;
  }
  .doc-row h3 .en { font-style: italic; font-weight: 400; opacity: 0.5; font-size: 0.78em; margin-left: 10px; letter-spacing: 0; }
  .doc-row p { margin: 0; font-size: 13.5px; line-height: 1.5; opacity: 0.65; max-width: 70ch; }
  .doc-meta-cell {
    grid-row: 1 / span 2; grid-column: 2;
    align-self: center;
    display: inline-flex; align-items: center; gap: 12px;
    white-space: nowrap;
  }
  .doc-meta-cell .doc-type {
    font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.55;
    font-variant-numeric: tabular-nums;
  }
  .doc-meta-cell .ar { font-size: 17px; opacity: 0.6; transition: transform .2s ease, opacity .2s ease; }
  .doc-row:hover .doc-meta-cell .ar { opacity: 1; transform: translateX(3px); }
  .doc-empty { padding: clamp(40px, 6vw, 80px) 0; text-align: center; border-bottom: 1px solid var(--line); }
  .doc-empty p { margin: 0 0 16px; opacity: 0.7; }
  @media (max-width: 600px) {
    .doc-row { grid-template-columns: 1fr; }
    .doc-meta-cell { grid-row: auto; grid-column: 1; justify-content: flex-start; margin-top: 8px; }
  }

  /* ------------------- Staff directory (Starfsfólk) ------------------- */
  .people-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-top: clamp(20px, 2.4vw, 28px); }
  .people-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
    margin-top: clamp(20px, 2.4vw, 28px);
  }
  .person-card {
    display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
    text-align: left;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: clamp(18px, 2vw, 24px);
    font-family: inherit; color: var(--ink);
    cursor: pointer;
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
  }
  .person-card:hover { border-color: var(--ink); transform: translateY(-3px); box-shadow: 0 24px 48px -30px rgba(0,0,0,0.2); }
  .person-card.is-hidden { display: none; }
  .person-mono {
    display: inline-flex; align-items: center; justify-content: center;
    width: 56px; height: 56px; border-radius: 999px;
    background: var(--paper-2); color: var(--ink);
    font-size: 18px; font-weight: 500; letter-spacing: 0.01em;
    margin-bottom: 12px;
  }
  .person-card:hover .person-mono { background: var(--ink); color: var(--paper); transition: background .2s ease, color .2s ease; }
  .person-name { font-size: clamp(15px, 1.3vw, 17px); font-weight: 500; letter-spacing: -0.01em; line-height: 1.2; }
  .person-role { font-size: 12.5px; opacity: 0.6; line-height: 1.3; }
  .people-empty { padding: clamp(36px, 5vw, 64px) 0; text-align: center; opacity: 0.7; }

  /* Toolbar: filter chips on the left, view toggle on the far right */
  .people-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 14px;
    margin-top: clamp(20px, 2.4vw, 28px);
  }
  .people-toolbar .people-filters { margin-top: 0; }

  /* List view — switched in via .people-grid.is-list (reuses .person-card) */
  .people-grid.is-list {
    grid-template-columns: 1fr;
    gap: 0;
    border-top: 1px solid var(--line);
  }
  .people-grid.is-list .person-card {
    flex-direction: row; align-items: center; gap: 16px;
    border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
    padding: 14px clamp(4px, 1vw, 10px);
  }
  .people-grid.is-list .person-card:hover {
    transform: none; box-shadow: none; border-color: transparent;
    border-bottom-color: var(--line); background: var(--paper-2);
  }
  .people-grid.is-list .person-mono {
    width: 42px; height: 42px; font-size: 14px; margin-bottom: 0; flex-shrink: 0;
  }
  .people-grid.is-list .person-name { flex: 1 1 auto; }
  .people-grid.is-list .person-role { flex: 0 0 auto; margin-left: 16px; text-align: right; }

  /* Slide-in panel + overlay */
  .staff-overlay {
    position: fixed; inset: 0;
    background: rgba(10,10,10,0.45);
    opacity: 0; pointer-events: none;
    transition: opacity .3s ease;
    z-index: 200;
  }
  .staff-overlay.is-open { opacity: 1; pointer-events: auto; }
  .staff-panel {
    position: fixed; top: 0; right: 0; height: 100%;
    width: min(440px, 92vw);
    background: var(--paper);
    box-shadow: -30px 0 60px -30px rgba(0,0,0,0.4);
    transform: translateX(100%);
    transition: transform .35s cubic-bezier(.2,.7,.2,1);
    z-index: 201; overflow-y: auto;
  }
  .staff-panel.is-open { transform: translateX(0); }
  .staff-panel-close {
    position: absolute; top: 18px; right: 18px;
    width: 40px; height: 40px; border-radius: 999px;
    border: 1px solid var(--line-strong); background: transparent; color: var(--ink);
    font-size: 22px; line-height: 1; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
  }
  .staff-panel-close:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
  .staff-panel-inner { padding: clamp(44px, 5vw, 64px) clamp(28px, 3.5vw, 44px); }
  .person-mono--lg { width: 96px; height: 96px; font-size: 32px; margin-bottom: 24px; }
  .staff-panel .sp-role { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.55; font-weight: 600; }
  .staff-panel-inner h2 { margin: 8px 0 0; font-size: clamp(26px, 3vw, 36px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; }
  .staff-panel .sp-dept { margin: 10px 0 0; opacity: 0.7; font-size: 15px; }
  .staff-panel .sp-bio { margin: 22px 0 0; line-height: 1.6; opacity: 0.8; }
  .staff-panel .sp-contact {
    margin-top: 28px; padding-top: 24px;
    border-top: 1px solid var(--line);
    display: flex; flex-direction: column; gap: 10px;
  }
  .staff-panel .sp-contact a { font-size: 15px; text-decoration: underline; text-underline-offset: 3px; }
  body.panel-open { overflow: hidden; }
  @media (prefers-reduced-motion: reduce) {
    .staff-panel { transition: none; }
    .staff-overlay { transition: none; }
  }

  /* ------------------- Booking card ------------------- */
  /* Prominent "book an appointment" panel embedded in editorial body
     copy (Námsráðgjöf). Ink-bordered paper-2 panel that lifts the
     primary action out of the running text. */
  .booking-card {
    margin-top: clamp(28px, 3.5vw, 44px);
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .booking-card .booking-tag {
    font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
    font-weight: 600; opacity: 0.55;
  }
  .booking-card h3 {
    margin: 0;
    font-size: clamp(22px, 2.2vw, 30px); font-weight: 500;
    letter-spacing: -0.02em; line-height: 1.15;
  }
  .booking-card p { margin: 0; font-size: 15px; line-height: 1.6; opacity: 0.78; }
  .booking-card .booking-actions {
    display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
    margin-top: 4px;
  }
  .booking-card .booking-more { font-size: 13.5px; opacity: 0.7; }
  .booking-card .booking-more a { text-decoration: underline; text-underline-offset: 3px; }

  /* ------------------- FAQ accordion ------------------- */
  /* Native <details>/<summary> — keyboard accessible, no JS required.
     Each question line is the summary; the + rotates to × on open. */
  .faq-list {
    border-top: 1px solid var(--ink);
  }
  .faq-item {
    border-bottom: 1px solid var(--line);
  }
  .faq-item > summary {
    list-style: none;
    cursor: pointer;
    padding: clamp(18px, 2vw, 28px) 8px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 24px;
    font-size: clamp(18px, 1.5vw, 22px);
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.3;
    text-wrap: balance;
    transition: padding .25s cubic-bezier(.2,.7,.2,1);
  }
  .faq-item > summary::-webkit-details-marker { display: none; }
  .faq-item > summary::marker { content: ""; }
  .faq-item > summary:hover {
    padding-left: 20px;
    padding-right: 20px;
  }
  .faq-item > summary .plus {
    flex-shrink: 0;
    position: relative;
    width: 18px; height: 18px;
    opacity: 0.55;
    transition: transform .3s ease, opacity .2s ease;
  }
  .faq-item > summary:hover .plus { opacity: 1; }
  .faq-item > summary .plus::before,
  .faq-item > summary .plus::after {
    content: "";
    position: absolute;
    background: currentColor;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
  }
  .faq-item > summary .plus::before { width: 14px; height: 1.5px; }
  .faq-item > summary .plus::after  { width: 1.5px; height: 14px; transition: opacity .25s ease; }
  .faq-item[open] > summary .plus { transform: rotate(180deg); }
  .faq-item[open] > summary .plus::after { opacity: 0; }
  .faq-item .faq-body {
    padding: 0 8px clamp(20px, 2.5vw, 32px);
    max-width: 72ch;
  }
  .faq-item .faq-body p {
    margin: 0 0 .9em;
    font-size: 17px;
    line-height: 1.6;
    opacity: 0.8;
  }
  .faq-item .faq-body p:last-child { margin-bottom: 0; }
  /*
   * Headings inside a disclosure body. Deliberately NOT the scale used in the
   * prose column: the panel already has the question as its heading, and it
   * opens inside a list, so a 54px h2 in here would out-shout the thing that
   * was clicked. These are sub-headings within an answer.
   *
   * They are styled at all because the format dropdown is available in this
   * field — without them an h2 falls through to avista-styles.css and renders
   * at 6rem inside the panel.
   */
  /* Kept under the question, which is clamp(18px, 1.5vw, 22px) at weight 500.
     A first attempt used the same ceiling at weight 600 and came out heavier
     than the thing it sits beneath. */
  .faq-item .faq-body h2,
  .faq-item .faq-body h3 {
    font-size: clamp(17px, 1.3vw, 19px);
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 1.6em 0 0.5em;
  }
  /* The lower tier separates by treatment rather than size — there is no room
     left below 17px. This is the design's existing micro-label idiom, the same
     as .faq-tag and .section-body .meta. */
  .faq-item .faq-body h4,
  .faq-item .faq-body h5,
  .faq-item .faq-body h6 {
    font-size: 12px;
    line-height: 1.4;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    opacity: 0.6;
    margin: 1.8em 0 0.5em;
  }
  .faq-item .faq-body > :first-child { margin-top: 0; }
  .faq-item .faq-body ul:not(.faq-links),
  .faq-item .faq-body ol:not(.faq-links) {
    font-size: 17px;
    line-height: 1.6;
    margin: 0 0 .9em;
    padding-left: 1.2em;
    opacity: 0.8;
  }
  .faq-item .faq-body ul:not(.faq-links) li,
  .faq-item .faq-body ol:not(.faq-links) li { margin-bottom: 0.35em; }
  .faq-item .faq-body ul:not(.faq-links) li > p,
  .faq-item .faq-body ol:not(.faq-links) li > p { font-size: inherit; opacity: 1; margin: 0; }
  .faq-list--column .faq-item .faq-body ul:not(.faq-links),
  .faq-list--column .faq-item .faq-body ol:not(.faq-links) { font-size: 16px; }
  .faq-item .faq-body a {
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
  }
  .faq-item .faq-body a:hover { opacity: 1; }

  /* ------------------- Contact form ------------------- */
  /* Editorial form that lives inside .dept-intro .body. Two-column on name/email,
     full-width for subject/message. Sarvatrik throughout, ink border on focus. */
  .contact-form {
    margin-top: clamp(28px, 4vw, 48px);
    padding-top: clamp(28px, 4vw, 40px);
    border-top: 1px solid var(--ink);
    max-width: 64ch;
  }
  .contact-form .form-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: clamp(20px, 2.5vw, 28px);
  }
  .contact-form .form-head h3 {
    margin: 0;
    font-size: clamp(22px, 2vw, 28px);
    font-weight: 500;
    letter-spacing: -0.015em;
    line-height: 1.2;
  }
  .contact-form .form-head .label {
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    opacity: 0.55;
    white-space: nowrap;
  }
  .contact-form .form-intro {
    font-size: 15px;
    line-height: 1.55;
    opacity: 0.78;
    margin: 0 0 clamp(24px, 3vw, 32px);
    max-width: 56ch;
  }
  .contact-form .grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 20px;
  }
  .contact-form .field {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .contact-form .field.full { grid-column: 1 / -1; }
  .contact-form label {
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    opacity: 0.65;
    font-weight: 500;
  }
  .contact-form label .req { color: var(--red, #cc5a6a); margin-left: 2px; }
  .contact-form input,
  .contact-form select,
  .contact-form textarea {
    font-family: inherit;
    font-size: 16px;
    color: var(--ink);
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--line-strong);
    padding: 10px 2px 12px;
    width: 100%;
    border-radius: 0;
    transition: border-color .2s ease, padding .2s ease;
    -webkit-appearance: none;
    appearance: none;
  }
  .contact-form input::placeholder,
  .contact-form textarea::placeholder { color: rgba(10,10,10,0.35); }
  .contact-form input:focus,
  .contact-form select:focus,
  .contact-form textarea:focus {
    outline: none;
    border-bottom-color: var(--ink);
  }
  .contact-form textarea {
    min-height: 140px;
    resize: vertical;
    line-height: 1.5;
  }
  .contact-form select {
    background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%),
                      linear-gradient(135deg, var(--ink) 50%, transparent 50%);
    background-position: calc(100% - 14px) 50%, calc(100% - 8px) 50%;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: 28px;
    cursor: pointer;
  }
  .contact-form .consent {
    grid-column: 1 / -1;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.5;
    opacity: 0.78;
  }
  .contact-form .consent input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin-top: 3px;
    border: 1px solid var(--ink);
    border-radius: 2px;
    flex-shrink: 0;
    cursor: pointer;
    accent-color: var(--ink);
  }
  .contact-form .consent a {
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .contact-form .actions {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: clamp(8px, 1.5vw, 16px);
    flex-wrap: wrap;
  }
  .contact-form .actions .hint {
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.55;
  }
  @media (max-width: 720px) {
    .contact-form .grid { grid-template-columns: 1fr; }
  }

  /* ------------------- Catalog (Námsframboð) ------------------- */
  /* Search + filter chips + view-toggle bar with a switchable
     card-grid / list-row program collection.
     Overrides the default 64–128px section padding so the catalog bar
     sits close to the hero's bottom border for an attached feel. */
  .catalog { padding-top: clamp(48px, 5vw, 88px); }
  .catalog .wrap { padding-top: 0; }

  .catalog-bar {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 14px 20px;
    align-items: stretch;
    margin-bottom: clamp(20px, 2.4vw, 28px);
  }
  .catalog-search {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: 999px;
    transition: border-color .2s ease, background .2s ease;
  }
  .catalog-search:focus-within {
    border-color: var(--ink);
    background: var(--paper);
  }
  .catalog-search svg {
    width: 18px; height: 18px; flex-shrink: 0;
    opacity: 0.55;
  }
  .catalog-search input {
    flex: 1;
    border: 0;
    background: transparent;
    padding: 14px 4px;
    font-family: inherit;
    font-size: 16px;
    color: var(--ink);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
  }
  .catalog-search input::placeholder { color: rgba(10,10,10,0.45); }
  .catalog-search input::-webkit-search-decoration,
  .catalog-search input::-webkit-search-cancel-button { display: none; }
  .catalog-search .clear {
    width: 24px; height: 24px;
    border-radius: 999px;
    border: 0;
    background: var(--ink);
    color: var(--paper);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .catalog-view {
    display: inline-flex;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 4px;
    background: var(--paper-2);
  }
  .view-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border: 0;
    background: transparent;
    color: var(--ink);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    border-radius: 999px;
    cursor: pointer;
    opacity: 0.6;
    transition: background .2s ease, opacity .2s ease, color .2s ease;
  }
  .view-btn svg { width: 16px; height: 16px; }
  .view-btn:hover { opacity: 1; }
  .view-btn.is-active {
    background: var(--ink);
    color: var(--paper);
    opacity: 1;
  }

  .catalog-filters {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: clamp(20px, 2.4vw, 28px) 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
  .filter-group {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 16px;
    align-items: center;
  }
  .filter-label {
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.55;
    font-weight: 500;
  }
  .chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .chip {
    padding: 8px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--paper);
    color: var(--ink);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
  }
  .chip:hover { border-color: var(--ink); }
  .chip.is-active {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
  }

  /* Dropdown filters that sit alongside the chips (staff directory: Deild /
     Svið). Shaped like a chip, with room for the caret. */
  .people-select {
    appearance: none;
    -webkit-appearance: none;
    padding: 8px 34px 8px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background-color: var(--paper);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0a0a' stroke-width='1.75' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px 14px;
    color: var(--ink);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.25;
    cursor: pointer;
    max-width: 100%;
    transition: border-color .2s ease;
  }
  .people-select:hover { border-color: var(--ink); }
  .people-select:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
  /* A chosen value reads as the active filter, mirroring .chip.is-active. */
  .people-select.is-active {
    background-color: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.75' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  }
  .people-select option { background: var(--paper); color: var(--ink); }

  .catalog-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: clamp(20px, 2.4vw, 28px) 0 clamp(20px, 2vw, 24px);
    font-size: 13px;
    letter-spacing: 0.04em;
  }
  .catalog-meta #catalogCount { opacity: 0.65; }
  .catalog-meta .reset {
    border: 0;
    background: transparent;
    color: var(--ink);
    font-family: inherit;
    font-size: 13px;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    opacity: 0.65;
    transition: opacity .2s ease;
  }
  .catalog-meta .reset:hover { opacity: 1; }

  /* Program grid — default card view */
  .program-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }
  .pcard {
    display: flex;
    flex-direction: column;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
    text-decoration: none;
    color: var(--ink);
    transition: transform .3s cubic-bezier(.2,.7,.2,1),
                box-shadow .25s ease,
                border-color .25s ease;
  }
  .pcard:hover {
    transform: translateY(-4px);
    box-shadow: 0 30px 60px -30px rgba(0,0,0,0.22);
    border-color: var(--ink);
    text-decoration: none;
  }
  .pcard-media {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--paper-2);
  }
  .pcard-media img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .6s cubic-bezier(.2,.7,.2,1);
  }
  .pcard:hover .pcard-media img { transform: scale(1.06); }
  .pcard-body {
    padding: 20px 22px 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
  }
  .pcard-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }
  .pcard-meta .pill {
    padding: 4px 10px;
    border: 1px solid var(--ink);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.18em;
  }
  .pcard-meta .dept { opacity: 0.55; }
  .pcard-meta .lang {
    padding: 3px 8px;
    background: var(--paper-2);
    border-radius: 4px;
    font-size: 10px;
    opacity: 0.7;
    letter-spacing: 0.12em;
  }
  .pcard h3 {
    margin: 0;
    font-size: clamp(20px, 1.7vw, 24px);
    font-weight: 500;
    letter-spacing: -0.015em;
    line-height: 1.15;
  }
  .pcard h3 .en {
    display: block;
    font-size: 13px;
    font-weight: 400;
    font-style: italic;
    opacity: 0.55;
    margin-top: 4px;
    letter-spacing: 0;
  }
  .pcard p {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    opacity: 0.75;
    flex: 1;
  }
  .pcard-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 14px;
    margin-top: 6px;
    border-top: 1px solid var(--line);
    font-size: 12px;
    letter-spacing: 0.06em;
    opacity: 0.65;
  }
  .pcard-foot .ar {
    font-size: 18px;
    opacity: 0.7;
    transition: transform .25s ease;
  }
  .pcard:hover .pcard-foot .ar { transform: translateX(4px); opacity: 1; }

  /* List view — switched in via .program-cards.is-list */
  .program-cards.is-list {
    grid-template-columns: 1fr;
    gap: 0;
    border-top: 1px solid var(--ink);
  }
  .program-cards.is-list .pcard {
    flex-direction: row;
    align-items: stretch;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    padding: 18px 8px;
    gap: clamp(20px, 2.4vw, 32px);
    transition: padding .3s cubic-bezier(.2,.7,.2,1), background .2s ease;
  }
  .program-cards.is-list .pcard:hover {
    transform: none;
    box-shadow: none;
    background: var(--paper-2);
    padding-left: 20px;
    padding-right: 20px;
  }
  .program-cards.is-list .pcard-media {
    flex-shrink: 0;
    width: clamp(120px, 14vw, 180px);
    aspect-ratio: 4 / 3;
    border-radius: 6px;
  }
  .program-cards.is-list .pcard:hover .pcard-media img { transform: scale(1); }
  .program-cards.is-list .pcard-body {
    flex-direction: row;
    align-items: center;
    gap: clamp(20px, 3vw, 48px);
    padding: 0;
    flex: 1;
  }
  .program-cards.is-list .pcard-body > .pcard-meta { order: -1; flex-shrink: 0; flex-direction: column; align-items: flex-start; gap: 6px; }
  .program-cards.is-list .pcard h3 {
    font-size: clamp(20px, 2vw, 28px);
    flex: 1;
  }
  .program-cards.is-list .pcard p { display: none; }
  .program-cards.is-list .pcard-foot {
    flex-direction: column;
    align-items: flex-end;
    border-top: 0;
    padding-top: 0;
    margin-top: 0;
    gap: 6px;
    text-align: right;
  }

  /* Filtered-out cards (and grid breakpoints) */
  .pcard.is-hidden { display: none; }
  .catalog-empty {
    text-align: center;
    padding: clamp(40px, 6vw, 80px) 20px;
    border: 1px dashed var(--line);
    border-radius: var(--r);
  }
  .catalog-empty h3 {
    margin: 0 0 12px;
    font-size: clamp(20px, 1.8vw, 26px);
    font-weight: 500;
    letter-spacing: -0.015em;
  }
  .catalog-empty p {
    margin: 0 0 20px;
    opacity: 0.7;
  }

  @media (max-width: 960px) {
    .program-cards { grid-template-columns: repeat(2, 1fr); }
    .catalog-bar { grid-template-columns: 1fr; }
    .filter-group { grid-template-columns: 1fr; gap: 8px; }
    .program-cards.is-list .pcard-body { flex-direction: column; align-items: flex-start; gap: 8px; }
    .program-cards.is-list .pcard-foot { flex-direction: row; align-items: center; text-align: left; }
  }
  @media (max-width: 600px) {
    .program-cards { grid-template-columns: 1fr; }
    .program-cards.is-list .pcard { flex-direction: column; }
    .program-cards.is-list .pcard-media { width: 100%; aspect-ratio: 16 / 9; }
  }

  /* ------------------- Section intro text helper ------------------- */
  /* A capped editorial paragraph that sits between a .section-head and
     a list/grid below. Used across the Um LHÍ sub-pages. */
  .section-intro {
    max-width: 64ch;
    margin: 0 0 clamp(24px, 3vw, 36px);
    font-size: clamp(16px, 1.25vw, 18px);
    line-height: 1.6;
    opacity: 0.78;
  }
  .section-intro a {
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  /* ------------------- Org chart ------------------- */
  /* Organizational chart for Stjórnskipulag. The leadership tree (apex
     + two branch tiers) is wired with comb connectors — a centered drop
     from the parent, a distribution bus across the gap, and a stub up to
     each node. Departments + support units sit below as labeled chip
     clusters (categories, not a literal tree). */
  .org-chart {
    --g: clamp(28px, 3.2vw, 44px);
    margin-top: clamp(32px, 4vw, 56px);
    display: flex;
    flex-direction: column;
    gap: var(--g);
    position: relative;
  }
  .org-tier {
    display: grid;
    gap: clamp(12px, 1.5vw, 20px);
    position: relative;
  }
  .org-tier--top { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; width: 100%; }
  .org-tier--branch { grid-template-columns: repeat(2, 1fr); }

  /* Comb connectors on the leadership tree */
  .org-tier--branch::before {                 /* drop from parent → bus */
    content: ""; position: absolute; left: 50%; top: calc(var(--g) * -1);
    width: 1px; height: calc(var(--g) / 2); background: var(--line-strong);
  }
  .org-tier--branch::after {                  /* distribution bus */
    content: ""; position: absolute; left: 22%; right: 22%; top: calc(var(--g) / -2);
    height: 1px; background: var(--line-strong);
  }
  .org-tier--branch > .org-node::before {     /* stub up to bus */
    content: ""; position: absolute; left: 50%; top: calc(var(--g) / -2);
    width: 1px; height: calc(var(--g) / 2); background: var(--line-strong);
  }

  .org-node {
    position: relative;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: clamp(20px, 2.4vw, 28px) clamp(22px, 2.6vw, 30px);
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
  }
  .org-node:not(.org-node--apex):hover {
    border-color: var(--ink);
    transform: translateY(-2px);
    box-shadow: 0 24px 48px -30px rgba(0,0,0,0.22);
  }
  .org-node--apex {
    border-color: var(--ink);
    background: var(--ink);
    color: var(--paper);
    text-align: center;
    align-items: center;
  }
  .org-node--lite { border-style: dashed; }
  .org-node .org-role {
    font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
    opacity: 0.6; font-weight: 500;
  }
  .org-node h3 {
    margin: 0;
    font-size: clamp(19px, 1.7vw, 24px); font-weight: 500;
    letter-spacing: -0.015em; line-height: 1.15;
  }
  .org-node .org-name {
    font-size: 14px; font-weight: 500; opacity: 0.85; margin-top: 2px;
  }
  .org-node--apex .org-name { opacity: 0.95; }
  .org-node p {
    margin: 4px 0 0; font-size: 13.5px; line-height: 1.5; opacity: 0.72;
  }
  .org-node--apex p { opacity: 0.82; max-width: 46ch; }

  /* Department + support chip clusters (labeled categories) */
  .org-groups {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: clamp(24px, 3.5vw, 48px);
    margin-top: var(--g);
    padding-top: clamp(20px, 2.5vw, 32px);
    border-top: 1px solid var(--line);
  }
  .org-group-label {
    margin: 0 0 14px;
    font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
    font-weight: 600; opacity: 0.5;
  }
  .org-cluster { display: flex; flex-wrap: wrap; gap: 8px; }
  .org-leaf, .org-support {
    background: var(--paper);
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    padding: 9px 16px;
    font-size: 13px; letter-spacing: 0.01em;
    transition: border-color .2s ease, background .2s ease, color .2s ease;
  }
  .org-leaf { font-weight: 500; }
  .org-leaf:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
  .org-support { border-style: dashed; opacity: 0.85; }
  .org-support:hover { opacity: 1; border-color: var(--ink); }

  .org-note {
    margin: clamp(24px, 3vw, 32px) 0 0;
    font-size: 13px; opacity: 0.6;
  }
  @media (max-width: 760px) {
    .org-tier--branch { grid-template-columns: 1fr; }
    .org-tier--branch::before,
    .org-tier--branch::after,
    .org-tier--branch > .org-node::before { display: none; }
    .org-groups { grid-template-columns: 1fr; }
  }

  /* ------------------- About section shell ------------------- */
  /* Used by um-lhi.html + its 11 sub-pages. Same .dept-intro shell as
     the contact page, but the sidebar's TOC links target other HTML
     files instead of in-page anchors. `is-active` is set manually on
     the current page's link. The sidebar reads as the section-wide
     navigation that persists across all sub-pages. */
  .about-shell .dept-sidebar .label::before { content: ""; }
  .about-nav a {
    /* Subpage links can wrap, so allow them more width than the
       in-page TOC variant. */
    width: 100%;
    text-wrap: balance;
  }
  .about-nav a + a {
    border-top: 1px solid transparent;
  }
  /* Tight 11-row layout — slightly less vertical padding than .dept-toc */
  .about-nav { gap: 0; }
  .about-nav a {
    padding: 7px 0;
    font-size: clamp(15px, 1.1vw, 17px);
  }
  /* Nested sub-page (Starfsfólk under Mannauður): indent the row and
     shorten its connector so it reads as a child of the link above. */
  .about-nav a.about-subitem {
    padding-left: 28px;
    font-size: clamp(14px, 1vw, 15.5px);
  }
  .about-nav a.about-subitem::before { width: 10px; }
  .about-nav a.about-subitem.is-active::before { width: 22px; }

  /* About sub-page overview grid */
  .about-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--line);
    border-top: 1px solid var(--ink);
    border-bottom: 1px solid var(--line);
    margin-top: clamp(32px, 4vw, 56px);
  }
  .about-card {
    background: var(--paper);
    padding: clamp(24px, 2.8vw, 32px) clamp(22px, 2.6vw, 30px);
    display: grid;
    grid-template-columns: 40px 1fr 24px;
    grid-template-areas:
      "n head ar"
      ". body .";
    gap: 8px 16px;
    text-decoration: none;
    color: var(--ink);
    transition: background .25s ease, padding .25s ease;
    position: relative;
  }
  .about-card:hover {
    background: var(--paper-2);
    text-decoration: none;
  }
  .about-card .n {
    grid-area: n;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.45;
    font-variant-numeric: tabular-nums;
    padding-top: 3px;
  }
  .about-card h3 {
    grid-area: head;
    margin: 0;
    font-size: clamp(20px, 1.6vw, 22px);
    font-weight: 500;
    letter-spacing: -0.015em;
    line-height: 1.2;
  }
  .about-card h3 .en {
    display: block;
    font-size: 12px;
    font-style: italic;
    font-weight: 400;
    opacity: 0.55;
    margin-top: 4px;
    letter-spacing: 0;
  }
  .about-card p {
    grid-area: body;
    margin: 6px 0 0;
    font-size: 14px;
    line-height: 1.5;
    opacity: 0.7;
  }
  .about-card .ar {
    grid-area: ar;
    font-size: 18px;
    opacity: 0.55;
    transition: transform .25s ease, opacity .25s ease;
  }
  .about-card:hover .ar {
    opacity: 1;
    transform: translateX(4px);
  }
  @media (max-width: 960px) {
    .about-grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 600px) {
    .about-grid { grid-template-columns: 1fr; }
  }

  /* Department CTA / contact */
  .dept-cta {
    background: var(--ink);
    color: var(--paper);
    padding: clamp(64px, 8vw, 112px) 0;
  }
  /* Contained variant (Námsframboð): the dark CTA becomes a rounded card
     inset from the page edges, sitting on the white page with space below
     so it detaches from the dark footer instead of blending into it. */
  .dept-cta--contained {
    background: transparent;
    padding: clamp(40px, 5vw, 72px) var(--pad) clamp(56px, 7vw, 104px);
  }
  .dept-cta--contained .wrap {
    background: var(--grad);
    color: var(--ink);
    border-radius: 4px;
    padding: clamp(44px, 6vw, 96px);
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }
  /* Animated gradient orbs — same moving-gradient treatment as the
     .feature card (reuses the feature-drift keyframes). */
  .dept-cta--contained .wrap::before {
    content: ""; position: absolute;
    right: -18%; bottom: -65%;
    width: 980px; height: 980px;
    border-radius: 50%;
    background: var(--grad);
    filter: blur(28px);
    opacity: 0.55;
    z-index: 0;
    animation: feature-drift 26s ease-in-out infinite;
    will-change: translate, scale, opacity, filter;
  }
  .dept-cta--contained .wrap::after {
    content: ""; position: absolute;
    left: -18%; top: -50%;
    width: 700px; height: 700px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, rgba(197,236,255,0.92) 0%, rgba(197,236,255,0) 70%);
    filter: blur(48px);
    opacity: 0.45;
    z-index: 0;
    animation: feature-drift-2 34s ease-in-out infinite;
    will-change: translate, scale, opacity;
  }
  .dept-cta--contained .wrap > * { position: relative; z-index: 1; }
  .dept-cta--contained .wrap h2 { font-weight: 700; }
  .dept-cta--contained .wrap h2 em { font-style: normal; }
  /* Darker divider on the light card — .wrap-scoped to beat the base
     .dept-cta .contact-block border shorthand. Covers the desktop
     left-border and the mobile top-border. */
  .dept-cta--contained .wrap .contact-block {
    border-left-color: rgba(10,10,10,0.4);
    border-top-color: rgba(10,10,10,0.4);
  }
  .dept-cta--contained .btn.ghost-light {
    color: var(--ink); border-color: var(--ink); background: transparent;
  }
  .dept-cta--contained .btn.ghost-light:hover {
    background: var(--ink); color: var(--paper); border-color: var(--ink);
  }
  @media (prefers-reduced-motion: reduce) {
    .dept-cta--contained .wrap::before,
    .dept-cta--contained .wrap::after { animation: none; }
  }
  /* Outline variant (Alþjóðasamstarf CTA): contained card detached from
     the footer, but inverted to a white bordered surface with dark text. */
  .dept-cta--outline {
    background: transparent;
    padding: clamp(40px, 5vw, 72px) var(--pad) clamp(56px, 7vw, 104px);
  }
  .dept-cta--outline .wrap {
    background: var(--paper);
    color: var(--ink);
    border: 1px solid var(--line-strong);
    border-radius: 4px;
    padding: clamp(44px, 6vw, 96px);
  }
  .dept-cta--outline .wrap .contact-block {
    border-left-color: rgba(10,10,10,0.18);
    border-top-color: rgba(10,10,10,0.18);
  }
  .dept-cta--outline .btn.ghost-light {
    color: var(--ink); border-color: var(--ink); background: transparent;
  }
  .dept-cta--outline .btn.ghost-light:hover {
    background: var(--ink); color: var(--paper); border-color: var(--ink);
  }
  /* Detached variant (Gæðamál CTA): keeps the dark styling but as a
     contained rounded card inset from the edges, with space below so it
     detaches from the dark footer instead of blending into it. */
  .dept-cta--detached {
    background: transparent;
    padding: clamp(40px, 5vw, 72px) var(--pad) clamp(56px, 7vw, 104px);
  }
  .dept-cta--detached .wrap {
    background: var(--ink);
    border-radius: 4px;
    padding: clamp(44px, 6vw, 96px);
  }
  .dept-cta .wrap {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: clamp(32px, 5vw, 64px);
    align-items: end;
  }
  .dept-cta h2 {
    margin: 0;
    font-size: clamp(36px, 5vw, 72px);
    font-weight: 500;
    letter-spacing: -0.025em;
    line-height: 0.96;
    text-wrap: balance;
  }

  /* Same treatment as the hero, different numbers: this H2 tops out at 72px in
     a column beside the actions, so a line holds about twenty characters
     rather than a dozen. The step is chosen in PHP (lhi_cta_size_class). The
     tail is the programme pages, whose headline names the programme —
     "Sæktu um nám við New Audiences and Innovative Practice – NAIP M.Mus." is
     68 characters against a median of 25. Leading relaxes as the size drops;
     0.96 is a display measure and wrong near body scale. */
  .dept-cta h2.is-long {
    font-size: clamp(30px, 3.6vw, 52px);
    letter-spacing: -0.02em;
    line-height: 1.04;
  }
  .dept-cta h2.is-xlong {
    font-size: clamp(26px, 2.8vw, 40px);
    letter-spacing: -0.015em;
    line-height: 1.15;
  }
  .dept-cta .tag {
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    opacity: 0.65;
    margin-bottom: 18px;
  }
  .dept-cta p {
    font-size: clamp(16px, 1.15vw, 18px);
    line-height: 1.55;
    margin: 24px 0 28px;
    opacity: 0.78;
    max-width: 46ch;
  }
  .dept-cta .actions { display: flex; gap: 12px; flex-wrap: wrap; }
  .dept-cta .contact-block {
    display: grid; gap: 18px;
    border-left: 1px solid rgba(255,255,255,0.15);
    padding-left: clamp(24px, 3vw, 40px);
  }
  .dept-cta .contact-block .row .l {
    display: block;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.55;
    margin-bottom: 4px;
  }
  .dept-cta .contact-block .row a,
  .dept-cta .contact-block .row .v {
    font-size: 17px;
    font-weight: 500;
  }
  .dept-cta .contact-block .row a:hover { text-decoration: underline; text-underline-offset: 4px; }

  /* ------------------- Responsive ------------------- */
  @media (max-width: 980px) {
    nav.primary, .mega { display: none; }
    .hero .wrap { grid-template-columns: 1fr; align-items: start; }
    .image-wrap { aspect-ratio: 4 / 3; }
    .section-head { grid-template-columns: 1fr; }
    .dept-row {
      grid-template-columns: 40px 1fr auto;
      grid-template-areas: "n name levels" "n en levels";
      row-gap: 4px;
    }
    .dept-row .n { grid-area: n; align-self: center; }
    .dept-row .name { grid-area: name; }
    .dept-row .en { grid-area: en; text-align: left; }
    .dept-row .levels { grid-area: levels; align-self: center; }
    .dept-row .ar { display: none; }
    .feature { grid-template-columns: 1fr; }
    .news-item { flex: 0 0 78vw; }
    .twoup { grid-template-columns: 1fr; }
    /* Tablet — 2-col grid; landscape tiles span both. */
    .projects-grid { grid-template-columns: repeat(2, 1fr); }
    .proj-1, .proj-6 { grid-column: span 2; aspect-ratio: 16 / 9; }
    .proj-2, .proj-3, .proj-4, .proj-5 { grid-column: span 1; aspect-ratio: 4 / 5; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .foot-top { grid-template-columns: 1fr 1fr; }
    .dept-intro > .wrap,
    .pullquote .wrap,
    .dept-cta .wrap {
      grid-template-columns: 1fr;
    }
    .dept-sidebar {
      position: static;
      flex-direction: column;
    }
    .dept-toc {
      flex-direction: row;
      flex-wrap: wrap;
      gap: 6px 18px;
    }
    .dept-toc a::before { width: 10px; }
    .dept-toc a.is-active::before { width: 18px; }
    .pullquote blockquote { grid-column: 1; }
    .dept-cta .contact-block {
      border-left: 0; padding-left: 0;
      border-top: 1px solid rgba(255,255,255,0.15);
      padding-top: 28px;
    }
    .program {
      grid-template-columns: 40px 1fr auto;
      grid-template-areas:
        "n info level"
        "n info ar";
      row-gap: 6px;
    }
    .program .n { grid-area: n; align-self: center; }
    .program .info { grid-area: info; }
    .program .level { grid-area: level; align-self: center; }
    .program .ar { grid-area: ar; display: none; }
    /* Thumb variant keeps an image lead cell on tablet */
    .program--withthumb {
      grid-template-columns: 120px 1fr auto;
      grid-template-areas:
        "thumb info level"
        "thumb info ar";
    }
    .program--withthumb .thumb { grid-area: thumb; align-self: center; }
    .section-body { grid-template-columns: 1fr; }
    .intake .wrap { grid-template-columns: 1fr; }
    .hours-list li { grid-template-columns: 120px 1fr; row-gap: 4px; }
    .hours-list .note { grid-column: 1 / -1; }
    .intake .key-dates li { grid-template-columns: 110px 1fr; }
    .process-step { grid-template-columns: 48px 1fr; gap: 18px; }
  }
  @media (max-width: 600px) {
    .utility .quick, .utility .tools { display: none; }
    .dept-row {
      grid-template-columns: 36px 1fr;
      grid-template-areas: "n name" "n en" "n levels";
      padding: 18px 4px;
    }
    .dept-row:hover { padding-left: 12px; padding-right: 12px; }
    .dept-row .levels { justify-self: start; }
    .stats-grid { grid-template-columns: 1fr; }
    /* Phone — single column; landscape tiles ease to a less-extreme
       3:2 so the banner crop on the gallery shot stays readable. */
    .projects-grid { grid-template-columns: 1fr; }
    .proj { grid-column: span 1; aspect-ratio: 4 / 5; }
    .proj-1, .proj-6 { aspect-ratio: 3 / 2; }
    .foot-top { grid-template-columns: 1fr; }
    .foot-bottom { flex-direction: column; align-items: flex-start; }
    .program {
      grid-template-columns: 32px 1fr;
      grid-template-areas:
        "n info"
        ". level";
    }
    .program .level { justify-self: start; }
    /* Phone — stack thumb above info, full width */
    .program--withthumb {
      grid-template-columns: 1fr;
      grid-template-areas:
        "thumb"
        "info"
        "level";
      row-gap: 14px;
    }
    .program--withthumb .thumb {
      width: 100%;
      aspect-ratio: 16 / 9;
    }
  }

  /* Dagatal responsive */
  @media (max-width: 720px) {
    .cal-ev {
      grid-template-columns: 52px 1fr;
      grid-template-areas: "date body" ". add";
      align-items: start;
      row-gap: 10px;
    }
    .cal-ev-date { grid-area: date; align-self: start; padding-top: 2px; }
    .cal-ev-body { grid-area: body; }
    .cal-add { grid-area: add; justify-self: start; }
    .cal-filters { margin-right: 0; order: 3; width: 100%; }
    .cal-subscribe { order: 2; }
  }
  @media (max-width: 600px) {
    .cal-grid-month { min-width: 0; }
    .cal-weekdays span { padding: 6px 4px; font-size: 10px; letter-spacing: 0.06em; }
    .cal-day { min-height: 58px; padding: 5px 4px; gap: 4px; }
    .cal-day-num { font-size: 12px; }
    /* Chips collapse to thin colored bars (text hidden) on phones */
    .cal-chip {
      font-size: 0; line-height: 0;
      height: 6px; padding: 0;
      border-left: 0; border-radius: 3px;
    }
    .cal-chip.cat-fri,
    .cal-chip.cat-skoli,
    .cal-chip.cat-vidburdur { background: var(--cat); }
    .cal-subscribe-menu { width: 240px; }
  }

  /* ===================================================================
     Home Hero — forsíðuhetja concepts gallery (home-hero.html only)
     Internal design-review page: one current hero + five alternatives,
     each rendered inside a framed .hh-stage. All concept styles are
     prefixed .hh- so they never touch the live homepage .hero.
     =================================================================== */
  .hh-page {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: clamp(40px, 5vw, 80px) var(--pad) clamp(64px, 7vw, 120px);
  }

  /* Page header */
  .hh-pagehead {
    border-bottom: 1px solid var(--line);
    padding-bottom: clamp(28px, 3vw, 44px);
    margin-bottom: clamp(40px, 5vw, 72px);
  }
  .hh-pagehead h1 {
    margin: 0;
    font-weight: 700;
    font-size: clamp(40px, 6vw, 84px);
    line-height: 0.98;
    letter-spacing: -0.025em;
  }
  .hh-lede {
    margin: 22px 0 0;
    font-size: clamp(17px, 1.4vw, 21px);
    line-height: 1.55;
    color: var(--ink-2);
    max-width: 64ch;
  }
  .hh-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
  .hh-jump a {
    font-size: 12.5px; letter-spacing: 0.04em;
    padding: 8px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
  }
  .hh-jump a:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); text-decoration: none; }

  /* Shared kicker + emphasis inside the gallery */
  .hh-page .kicker, .hh-hero .kicker {
    text-transform: uppercase; font-size: 12px; letter-spacing: 0.18em;
    display: flex; gap: 16px; align-items: center; opacity: 0.7;
    margin: 0 0 20px;
  }
  .hh-page .kicker .bar, .hh-hero .kicker .bar { flex: 0 0 56px; height: 1px; background: currentColor; }
  .hh-hero .kicker--light { color: #fff; opacity: 0.9; }
  .hh-hero .kicker--center { justify-content: center; }
  .hh-page .grad, .hh-hero .grad { color: inherit; }

  /* Specimen = label + framed stage */
  .hh-specimen { margin-top: clamp(48px, 6vw, 96px); scroll-margin-top: 90px; }
  .hh-label { display: flex; align-items: baseline; gap: 18px; margin-bottom: 20px; }
  .hh-num {
    flex: 0 0 auto; line-height: 1;
    font-size: clamp(28px, 3vw, 44px); font-weight: 500; letter-spacing: -0.02em;
    color: var(--ink); opacity: 0.22;
  }
  .hh-label-text { flex: 1 1 auto; }
  .hh-label-text h2 { margin: 0; font-size: clamp(19px, 1.8vw, 26px); font-weight: 500; letter-spacing: -0.015em; }
  .hh-label-text p { margin: 6px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--muted); max-width: 64ch; }
  .hh-tag {
    flex: 0 0 auto; align-self: center; white-space: nowrap;
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em;
    padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; opacity: 0.7;
  }
  .hh-tag--live { border-color: var(--red); color: var(--red); opacity: 1; }

  .hh-stage {
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
    background: var(--paper);
    box-shadow: 0 30px 60px -50px rgba(0,0,0,0.4);
  }

  /* Shared hero base */
  .hh-hero { position: relative; overflow: hidden; }
  .hh-hero h2 { margin: 0; font-weight: 500; letter-spacing: -0.025em; }
  .hh-hero p { margin: 0; }
  .hh-hero em { font-style: normal; }
  .hh-actions { display: flex; gap: 12px; flex-wrap: wrap; }

  /* Buttons on dark concept backgrounds (02, 05) */
  .hh-cinema .btn, .hh-block .btn { border-color: rgba(255,255,255,0.5); color: #fff; background: transparent; }
  .hh-cinema .btn:hover, .hh-block .btn:hover { background: #fff; color: var(--ink); border-color: #fff; }
  .hh-cinema .btn.is-solid, .hh-block .btn.is-solid { background: #fff; color: var(--ink); border-color: #fff; }
  .hh-cinema .btn.is-solid:hover, .hh-block .btn.is-solid:hover { background: var(--pink); border-color: var(--pink); color: var(--ink); }

  /* 02 — Heilmynd (cinematic) */
  .hh-cinema {
    min-height: clamp(440px, 60vh, 620px);
    display: flex; align-items: flex-end;
    background-image: var(--img); background-size: cover; background-position: center;
    isolation: isolate;
  }
  .hh-cinema::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background:
      linear-gradient(180deg, rgba(10,10,10,0.10) 0%, rgba(10,10,10,0.02) 35%, rgba(10,10,10,0.88) 100%),
      linear-gradient(85deg, rgba(10,10,10,0.72) 0%, rgba(10,10,10,0) 58%);
  }
  .hh-cinema-inner { padding: clamp(28px, 4vw, 56px); max-width: 760px; color: #fff; }
  .hh-cinema-h { font-size: clamp(34px, 5vw, 72px); line-height: 0.98; color: #fff; }
  .hh-cinema-h em { color: var(--pink); }
  .hh-cinema-lede { margin: 18px 0 26px; font-size: clamp(16px, 1.4vw, 20px); line-height: 1.45; color: rgba(255,255,255,0.85); max-width: 46ch; }
  .hh-cinema-credit {
    position: absolute; right: clamp(16px, 2vw, 28px); bottom: clamp(16px, 2vw, 22px);
    font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(255,255,255,0.6);
  }

  /* 03 — Týpógrafísk yfirlýsing */
  .hh-type { background: var(--paper); }
  .hh-type-inner { padding: clamp(40px, 5vw, 80px) clamp(28px, 4vw, 56px); }
  .hh-type-h { font-size: clamp(44px, 8vw, 120px); line-height: 0.95; letter-spacing: -0.03em; max-width: 14ch; }
  .hh-type-foot {
    margin-top: clamp(28px, 4vw, 52px);
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px;
  }
  .hh-deptlist {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; align-items: center;
    font-size: clamp(13px, 1.1vw, 15px); letter-spacing: 0.02em;
  }
  .hh-deptlist li { display: inline-flex; align-items: center; opacity: 0.75; }
  .hh-deptlist li:not(:last-child)::after { content: "·"; margin: 0 12px; opacity: 0.5; }

  /* 04 — Mósaík (bento) */
  .hh-bento {
    display: grid; grid-template-columns: 0.85fr 1.15fr;
    gap: clamp(20px, 3vw, 40px); align-items: center;
    padding: clamp(28px, 4vw, 56px);
  }
  .hh-bento-h { font-size: clamp(30px, 3.4vw, 52px); line-height: 1.0; }
  .hh-bento-text p { margin: 18px 0 26px; font-size: clamp(15px, 1.2vw, 18px); line-height: 1.5; color: var(--ink-2); max-width: 34ch; }
  .hh-bento-grid {
    display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 1fr);
    gap: 10px; aspect-ratio: 1 / 1;
  }
  .hh-tile {
    position: relative; margin: 0; border-radius: var(--r); overflow: hidden;
    background-image: var(--img); background-size: cover; background-position: center;
  }
  .hh-tile--big { grid-row: span 2; }
  .hh-tile figcaption {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 20px 12px 9px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em;
    color: #fff; background: linear-gradient(transparent, rgba(0,0,0,0.62));
  }

  /* 05 — Litaspjald (color block) */
  .hh-block { display: grid; grid-template-columns: 1fr 1fr; min-height: clamp(420px, 55vh, 580px); }
  .hh-block-panel {
    position: relative; background: var(--ink); color: #fff;
    padding: clamp(32px, 4vw, 60px);
    display: flex; flex-direction: column; justify-content: center;
  }
  .hh-block-h { font-size: clamp(30px, 3.6vw, 58px); line-height: 0.98; color: #fff; }
  .hh-block-h em { color: var(--ice); }
  .hh-block-panel p { margin: 18px 0 28px; font-size: clamp(15px, 1.3vw, 19px); color: rgba(255,255,255,0.75); }
  .hh-block-band { position: absolute; left: 0; right: 0; bottom: 0; height: 10px; background: var(--grad); }
  .hh-block-media { background-image: var(--img); background-size: cover; background-position: center; min-height: 300px; }

  /* 06 — Lágstemmt (minimal, rotating word) */
  .hh-minimal {
    background: var(--paper);
    display: flex; align-items: center; justify-content: center;
    min-height: clamp(380px, 48vh, 520px); text-align: center;
    padding: clamp(40px, 5vw, 72px);
  }
  .hh-minimal-inner { max-width: 720px; }
  .hh-minimal-h { font-size: clamp(36px, 5.2vw, 76px); line-height: 1.0; letter-spacing: -0.025em; }
  .hh-rotate { display: inline-block; transition: opacity .22s ease; }
  .hh-minimal-inner p { margin: 22px 0 28px; font-size: clamp(16px, 1.3vw, 20px); color: var(--ink-2); }

  .hh-note {
    margin: clamp(48px, 6vw, 80px) 0 0; padding-top: 24px;
    border-top: 1px solid var(--line);
    font-size: 13px; line-height: 1.5; color: var(--muted); max-width: 72ch;
  }

  @media (max-width: 860px) {
    .hh-bento { grid-template-columns: 1fr; }
    .hh-bento-text p { max-width: none; }
    .hh-block { grid-template-columns: 1fr; }
    .hh-block-media { min-height: 240px; order: -1; }
    .hh-label { flex-wrap: wrap; }
    .hh-tag { align-self: flex-start; }
  }

  /* ==================================================================
     Flexible page-builder element wrappers (Hero + Page Elements)
     ================================================================== */
  /* .lhi-el is a <section>, so it inherits the default section rhythm
     (clamp(64px,9vw,128px) 0). These modifiers tune spacing/background. */
  .lhi-el--sp-none  { padding-top: 0; padding-bottom: 0; }
  .lhi-el--sp-tight { padding-top: clamp(32px, 4vw, 56px); padding-bottom: clamp(32px, 4vw, 56px); }
  .lhi-el--sp-loose { padding-top: clamp(96px, 12vw, 180px); padding-bottom: clamp(96px, 12vw, 180px); }
  .lhi-el--bg-tint  { background: var(--paper-2); }

  /* A section that continues a sub-page's body column.

     When a page's content alternates — prose, disclosures, more prose — it
     cannot live in one subpage_intro, because that element renders its parts
     in a fixed order. Splitting it into several elements solved the order but
     left the intro indented past the sidebar and everything after it starting
     at the page gutter, which read as two mismatched halves. This lays the
     same grid as .dept-intro > .wrap and puts the content in the second column,
     so the whole page keeps one measure. */
  .lhi-el--body-aligned > .wrap {
    display: grid;
    grid-template-columns: clamp(200px, 24%, 300px) minmax(0, 1fr);
    gap: clamp(32px, 6vw, 80px);
    align-items: start;
  }
  .lhi-el--body-aligned > .wrap > * { grid-column: 2; }
  /* Below the breakpoint the sidebar sits above the content, so the indent goes
     with it. Both halves live here rather than in the responsive block: that
     block is ~330 lines earlier, and at equal specificity the rule above would
     win — the children kept grid-column: 2, landed in an implicit second track
     and stayed indented by a sidebar that was no longer beside them. */
  @media (max-width: 980px) {
    .lhi-el--body-aligned > .wrap { grid-template-columns: 1fr; }
    .lhi-el--body-aligned > .wrap > * { grid-column: 1; }
  }

  .lhi-el--bg-dark  { background: var(--ink); color: var(--paper); }

  /* Brand backgrounds. The three light ones keep ink text — #0a0a0a clears AA
     on every one of them, the most saturated (Morning Pink) at 9.4:1. Eruption
     Red does not: it is a dark surface and takes the same treatment as
     --bg-dark, which is why the two are written together below. */
  .lhi-el--bg-ice        { background: var(--ice); }
  /* The house gradient, ice → mauve → pink, the same one the CTA card uses.
     Ink stays legible the whole way across: 15.85:1 at the ice end, 13.75:1
     through the middle, 9.55:1 at the pink end. */
  .lhi-el--bg-grad       { background-image: var(--grad); }
  .lhi-el--bg-ice-light  { background: var(--ice-light); }
  .lhi-el--bg-pink       { background: var(--pink); }
  .lhi-el--bg-pink-light { background: var(--pink-light); }
  .lhi-el--bg-eruption   { background: var(--red); color: var(--paper); }

  .lhi-el--bg-dark a,
  .lhi-el--bg-eruption a { color: var(--paper); }
  .lhi-el--bg-dark p,
  .lhi-el--bg-dark .lede,
  .lhi-el--bg-eruption p,
  .lhi-el--bg-eruption .lede { color: var(--paper); }
  /* Hairlines and muted text are mixed from ink, so they vanish on a dark
     surface unless they are restated. */
  .lhi-el--bg-eruption { --line: rgba(255,255,255,0.22); --muted: rgba(255,255,255,0.72); }

  /* Buttons under a plain page header / hero. */
  .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(20px, 2.5vw, 32px); }

  /* ==================================================================
     Guided headline emphasis — [[word]] → <span class="grad">
     AA-safe --grad-text clip, for display-sized type on light surfaces.
     Dark elements get a legible solid accent instead (grad-text fails
     contrast on dark). Explicit opt-outs (.no-accent em, .hh-* .grad)
     keep their own treatment.
     ================================================================== */
  .grad {
    background-image: var(--grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
  .lhi-el--bg-dark .grad,
  .lhi-el--bg-eruption .grad,
  /* A gradient headline on a gradient background reads as a printing fault
     however well it scores, so this surface takes the solid accent too. */
  .lhi-el--bg-grad .grad,
  .dept-hero:not(.dept-hero--plain) .grad {
    background-image: none;
    -webkit-text-fill-color: var(--ice);
    color: var(--ice);
  }

  /* Full-bleed image band caption. */
  .full-bleed-cap { font-size: 12px; letter-spacing: 0.02em; opacity: 0.6; padding: 10px 0 0; }
  .full-bleed-cap em { font-style: italic; }

  /* CTA element: right-hand action column aligns to the bottom-right. */
  .cta-aside { display: flex; align-items: flex-end; justify-content: flex-end; }
  @media (max-width: 860px) {
    .cta-aside { justify-content: flex-start; }
  }

  /* Two-up panes render full-bleed; drop the default section padding
     (the panes carry their own). */
  .lhi-twoup { padding: 0; }

  /* Image gallery (opens in GLightbox). */
  .lhi-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
  .lhi-gallery-grid .gallery-item { display: block; border-radius: var(--r); overflow: hidden; aspect-ratio: 1 / 1; background: var(--paper-2); }
  .lhi-gallery-grid img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
  .lhi-gallery-grid .gallery-item:hover img { transform: scale(1.05); }

  /* Video: poster + play button, opens in GLightbox. */
  /* Video carousel: one centred at full size, its neighbours smaller either
     side, looping without end. The slide is sized in viewport units so the
     ones beside it stay visible at any width — that peek is the whole point,
     since it is what tells a reader there is more to come. */
  .video-carousel .video-track {
    display: flex;
    gap: clamp(12px, 1.8vw, 28px);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-block: clamp(10px, 1.4vw, 22px);
  }
  .video-carousel .video-track::-webkit-scrollbar { display: none; }
  .video-carousel .video-track:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

  .video-carousel .slide {
    flex: 0 0 clamp(240px, 52vw, 640px);
    scroll-snap-align: center;
    /* The resting state is the SMALL one: a slide is a neighbour until the
       carousel says otherwise, so nothing jumps on load before the JS has
       decided which is centred. */
    transform: scale(0.84);
    opacity: 0.45;
    transition: transform .5s cubic-bezier(.2,.7,.2,1), opacity .4s ease;
    transform-origin: center center;
  }
  .video-carousel .slide.is-active { transform: scale(1); opacity: 1; }
  .video-carousel .slide .video-play { aspect-ratio: 16 / 9; }
  /* Only the centred one announces itself; a neighbour's caption competes with
     the video a reader is actually looking at. */
  .video-carousel .slide figcaption { opacity: 0; transition: opacity .4s ease; }
  .video-carousel .slide.is-active figcaption { opacity: 1; }

  @media (prefers-reduced-motion: reduce) {
    .video-carousel .video-track { scroll-behavior: auto; }
    .video-carousel .slide { transition: none; }
  }

  .lhi-video-el figcaption { margin-top: 12px; font-size: 15px; line-height: 1.5; opacity: 0.7; }

  .lhi-video { margin: 0; }
  .lhi-video .video-play { position: relative; display: block; border-radius: var(--r); overflow: hidden; aspect-ratio: 16 / 9; background: #1a1a1a; }
  .lhi-video .video-poster { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.85; transition: transform 1.2s cubic-bezier(.2,.7,.2,1), opacity .3s ease; }
  .lhi-video .video-play:hover .video-poster { transform: scale(1.03); opacity: 1; }
  .lhi-video .video-play-btn {
    position: absolute; inset: 0; margin: auto;
    width: 72px; height: 72px; border-radius: 999px;
    background: rgba(255,255,255,0.94); color: var(--ink);
    display: flex; align-items: center; justify-content: center;
    transition: transform .2s ease, background .2s ease;
  }
  .lhi-video .video-play:hover .video-play-btn { transform: scale(1.06); background: var(--paper); }
  .lhi-video .video-play-btn svg { width: 24px; height: 24px; margin-left: 3px; }
  .lhi-video figcaption { margin-top: 12px; font-size: 12px; letter-spacing: 0.04em; opacity: 0.6; }

  /* Facilities / locations — text cards (no images). */
  .facilities-intro { max-width: 62ch; margin: 0 0 28px; font-size: 16px; line-height: 1.6; }
  .facilities-intro > *:first-child { margin-top: 0; }
  .facilities-intro > *:last-child { margin-bottom: 0; }

  .facilities-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
  .facility-card { border: 1px solid var(--line); border-radius: var(--r); padding: clamp(20px, 2vw, 28px); }
  .facility-card h3 { margin: 0 0 12px; font-size: clamp(18px, 1.5vw, 22px); font-weight: 500; letter-spacing: -0.01em; line-height: 1.2; }
  .facility-card p { margin: 0 0 8px; font-size: 15px; line-height: 1.55; opacity: 0.75; }
  .facility-card p:last-child { margin-bottom: 0; }
  .facility-card .contact a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }

  /* Auto detail-header meta row (date / venue) under the title. */
  .dept-hero .detail-meta {
    margin-top: clamp(16px, 2vw, 24px);
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    opacity: 0.7;
  }

  /* Archive / search pagination. */
  .pagination { margin-top: clamp(40px, 5vw, 72px); }
  .pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; }
  .pagination .page-numbers {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 40px; height: 40px; padding: 0 12px;
    border: 1px solid var(--line-strong); border-radius: 999px;
    font-size: 14px; font-weight: 500;
  }
  .pagination .page-numbers.current { background: var(--ink); color: var(--paper); border-color: var(--ink); }
  .pagination a.page-numbers:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); text-decoration: none; }
  .catalog-empty { padding: clamp(48px, 8vw, 96px) 0; font-size: clamp(18px, 2vw, 24px); opacity: 0.6; }

  /* ---- Form element (Gravity Forms inside the .contact-form shell) ----
     GF renders real input/select/textarea elements, so they inherit the
     .contact-form field styling automatically. These rules cover the bits
     GF adds on top: its own grid, labels, submit button and messages. */
  .form-shell { display: grid; gap: clamp(28px, 4vw, 56px); }
  .form-shell.has-aside { grid-template-columns: 2fr 1fr; align-items: start; }
  @media (max-width: 860px) { .form-shell.has-aside { grid-template-columns: 1fr; } }
  .form-aside { font-size: 15px; line-height: 1.6; opacity: 0.8; padding-top: clamp(28px, 4vw, 40px); }
  .form-aside h3 { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.6; font-weight: 500; margin: 0 0 12px; }
  .form-aside ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
  .form-aside a:hover { text-decoration: underline; text-underline-offset: 3px; }

  .contact-form .gform_wrapper .gform_fields { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
  @media (max-width: 600px) { .contact-form .gform_wrapper .gform_fields { grid-template-columns: 1fr; } }
  .contact-form .gform_wrapper .gfield { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
  .contact-form .gform_wrapper .gfield--width-full { grid-column: 1 / -1; }
  .contact-form .gform_wrapper .gfield_required { color: var(--red); margin-left: 2px; }
  .contact-form .gform_wrapper .gfield_description { font-size: 13px; opacity: 0.6; }
  /* Checkboxes/radios must not take the full-width underline treatment. */
  .contact-form input[type="checkbox"],
  .contact-form input[type="radio"] { width: auto; border-bottom: 0; padding: 0; }
  /* Submit button → pill, matching .btn.primary. */
  .contact-form .gform_footer { margin-top: clamp(24px, 3vw, 32px); }
  .contact-form .gform_footer input[type="submit"],
  .contact-form .gform_button {
    width: auto;
    border: 1px solid var(--ink);
    border-radius: 999px;
    background: var(--ink);
    color: var(--paper);
    padding: 13px 26px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
  }
  .contact-form .gform_footer input[type="submit"]:hover,
  .contact-form .gform_button:hover { background: var(--pink); color: var(--ink); border-color: var(--pink); }
  .contact-form .gform_confirmation_message { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.4; }

  /* ---- Focus grid: linkable cards ----
     The grid draws its hairlines with a 1px gap over a --line background, which
     means any EMPTY trailing cell (e.g. 7 cards in a 4-column row) shows up as a
     grey block. Painting the grid paper-white and giving each card a 1px ring
     produces identical hairlines while leaving empty cells blank. */
  .focus-grid { background: var(--paper); }
  .focus { box-shadow: 0 0 0 1px var(--line); }

  a.focus {
    color: var(--ink);
    transition: background .2s ease, box-shadow .2s ease, transform .2s ease;
  }
  a.focus:hover {
    text-decoration: none;
    background: var(--paper-2);
    box-shadow: 0 0 0 1px var(--ink);
    position: relative; /* lift the hovered ring above its neighbours */
    z-index: 1;
  }
  .focus .more {
    margin-top: auto;
    padding-top: 14px;
    font-size: 13px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .focus .more::after { content: "→"; transition: transform .2s ease; }
  a.focus:hover .more::after { transform: translateX(4px); }

  /* Feed "view all" footer link. */
  .feed-foot { margin-top: clamp(24px, 3vw, 40px); }
  .feed-foot a { font-weight: 500; font-size: 14px; }
  .feed-foot a::after { content: " →"; transition: padding-left .2s ease; }
  .feed-foot a:hover { text-decoration: none; }
  .feed-foot a:hover::after { padding-left: 4px; }

  /* ------------------- Guide list (searchable) -------------------
     A narrow accordion built to sit inside the sub-page body column, so
     everything is single-column and the controls stack on small widths. */
  .guide-list { margin-top: clamp(24px, 3vw, 36px); }
  .guide-tools {
    display: flex; gap: 12px; flex-wrap: wrap;
    margin-bottom: 20px;
  }
  .guide-search { flex: 1 1 220px; }
  .guide-filter { flex: 0 1 200px; }
  .guide-search input,
  .guide-filter select {
    width: 100%;
    font: inherit;
    font-size: 15px;
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 11px 18px;
    appearance: none;
  }
  .guide-filter select {
    /* room for the caret drawn by the background image */
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230a0a0a' stroke-width='1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 12px 8px;
  }
  .guide-search input:focus,
  .guide-filter select:focus { outline: none; border-color: var(--ink); }
  .guide-search input::placeholder { color: rgba(10,10,10,0.5); }

  .guide-items { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
  .guide-item { border-bottom: 1px solid var(--line); }
  .guide-item[hidden] { display: none; }

  .guide-head { margin: 0; font-size: inherit; font-weight: inherit; }
  .guide-head button {
    width: 100%;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 18px 0;
    background: none; border: 0; cursor: pointer;
    text-align: left;
    font-size: clamp(16px, 1.3vw, 18px);
    font-weight: 500;
    line-height: 1.35;
    color: inherit;
  }
  .guide-head button:hover { opacity: 0.7; }

  /* Plus that becomes a minus, drawn rather than typed so it stays centred. */
  .guide-mark { position: relative; flex: 0 0 14px; height: 14px; }
  .guide-mark::before,
  .guide-mark::after {
    content: ""; position: absolute; inset: 0; margin: auto;
    background: currentColor;
    transition: transform .2s ease, opacity .2s ease;
  }
  .guide-mark::before { width: 14px; height: 1.5px; }
  .guide-mark::after { width: 1.5px; height: 14px; }
  .guide-head button[aria-expanded="true"] .guide-mark::after { transform: scaleY(0); opacity: 0; }

  .guide-panel { padding: 0 0 22px; max-width: 62ch; }
  .guide-panel .prose { font-size: 16px; line-height: 1.6; }
  .guide-panel .prose > *:first-child { margin-top: 0; }
  .guide-panel .prose > *:last-child { margin-bottom: 0; }
  .guide-link { margin: 16px 0 0; }
  .guide-link a { font-weight: 500; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
  .guide-link a:hover { text-decoration: none; opacity: 0.7; }

  .guide-empty { margin: 24px 0 0; opacity: 0.6; }

  @media (max-width: 540px) {
    .guide-tools { flex-direction: column; }
    .guide-search, .guide-filter { flex: 1 1 auto; }
  }

  /* --- partner directory ------------------------------------------------ */
  /* The guide list at full width: four dropdowns and 200-odd rows want the
     measure, where a sub-page guide list wants to stay narrow. */
  .partners--directory .guide-list { max-width: none; }
  .partners--directory .guide-panel { max-width: none; }
  .guide-count { margin: 18px 0 0; font-size: 14px; opacity: 0.6; }

  /* Search on its own row, the facets beneath it.
     The shared .guide-tools row suits one search plus a filter or two. With five
     controls it broke: "Sía eftir námsgrein" is long enough to wrap onto a second
     line, which pushed that select below the others and left the row without a
     shared baseline. Giving the search the full width forces the wrap in a chosen
     place rather than an accidental one, and the facets get a row of their own
     where each is wide enough not to wrap. */
  .partners-directory .guide-tools {
    display: grid;
    /* Grid rather than a wrapping flex row. Flexed, the facets that did not fit
       wrapped and then grew to fill the leftover space: at ~760px that produced
       three narrow dropdowns and a fourth stretched across the full width. Grid
       tracks stay equal, so a wrapped facet is the same size as the rest.
       240px is the width at which "Allar námsgreinar" and the caret still fit
       without the label wrapping, so the row goes 4-across on a desktop and 2x2
       on a tablet rather than cramming four into too little. auto-fit keeps this
       right if a fifth facet (deild) is ever shown. */
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 18px 12px;
    /* If a label does still wrap, the controls stay aligned with each other
       instead of stepping down with their labels. */
    align-items: end;
  }
  .partners-directory .guide-search { grid-column: 1 / -1; }

  /* The labels above each control.
     They render as ordinary text today because there is no global .sr utility —
     only .logo .sr — so what was authored as a screen-reader span shows up at body
     size above every control. They are wanted visible, so they are styled as real
     labels here and explicitly un-hidden: if a global .sr rule is added later,
     these must not silently vanish with it. */
  .partners-directory .guide-search .sr,
  .partners-directory .guide-filter .sr {
    position: static;
    width: auto; height: auto;
    margin: 0 0 7px;
    overflow: visible;
    clip: auto; clip-path: none;
    display: block;
    font-size: 13px;
    line-height: 1.3;
    opacity: 0.65;
  }

  @media (max-width: 540px) {
    /* The base rule switches .guide-tools to a flex column here, which a grid
       container ignores; the track minimum would otherwise be wider than a phone,
       so it is relaxed and everything falls into one column. */
    .partners-directory .guide-tools { grid-template-columns: minmax(0, 1fr); }
  }

  .partner-row .guide-head button { align-items: baseline; }
  .partner-id {
    display: flex; align-items: baseline; gap: 6px 18px;
    flex-wrap: wrap;
    min-width: 0;
  }
  .partner-name { font-weight: 500; }
  .partner-where { font-size: 14px; opacity: 0.55; }

  .partner-facts { margin: 0; display: grid; gap: 10px 32px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
  .partner-facts dt { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.55; margin-bottom: 3px; }
  .partner-facts dd { margin: 0; font-size: 15px; line-height: 1.5; }

  @media (max-width: 640px) {
    .partner-id { gap: 2px 12px; }
    .partner-where { flex-basis: 100%; }
  }

  /* Library list — same toolbar and filtering chrome as the guide list, but
     rows of links rather than expandable panels. */
  .lib-count { margin: 0 0 14px; font-size: 13px; opacity: 0.6; }
  .lib-items { border-top: 1px solid var(--line); }
  .lib-item { padding: 16px 0; }
  .lib-title {
    display: inline-flex; align-items: baseline; gap: 8px;
    font-size: clamp(16px, 1.3vw, 18px);
    font-weight: 500;
    line-height: 1.35;
    text-decoration: none;
  }
  a.lib-title:hover { text-decoration: underline; text-underline-offset: 4px; }
  .lib-title .arrow { font-size: 0.85em; opacity: 0.5; transition: transform .2s ease; }
  a.lib-title:hover .arrow { transform: translateX(3px); opacity: 1; }
  .lib-meta { margin: 5px 0 0; font-size: 13px; opacity: 0.65; line-height: 1.45; }

  /* New acquisitions — covers. Sits in the sub-page body column, so the track
     size is small enough to give three or four across ~730px and two on a
     phone. */
  .lib-semesters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
  .lib-semesters a {
    font-size: 13px; line-height: 1;
    padding: 9px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    text-decoration: none;
    white-space: nowrap;
  }
  .lib-semesters a:hover { border-color: var(--ink); text-decoration: none; }
  .lib-semesters a.is-active { background: var(--ink); color: var(--paper); border-color: var(--ink); }

  .lib-covers {
    display: grid;
    /* 170px holds four covers across both column widths; at 140px the wider
       column fitted five and shrank each cover to 143px, which is small for a
       book jacket. */
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: clamp(16px, 2vw, 24px);
    border-top: 0;
    margin-top: 4px;
  }
  .lib-cover { padding: 0; border-bottom: 0; }
  .lib-cover a { display: block; text-decoration: none; }
  .lib-cover-img {
    display: block;
    aspect-ratio: 3 / 4;
    background: var(--paper-2);
    overflow: hidden;
    margin-bottom: 10px;
  }
  .lib-cover-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
  .lib-cover a:hover .lib-cover-img img { transform: scale(1.03); }
  .lib-cover-blank { display: block; width: 100%; height: 100%; }
  .lib-cover-title {
    display: block;
    font-size: 13px;
    line-height: 1.35;
    /* Titles run long — clamp so the grid rows stay even. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .lib-cover a:hover .lib-cover-title { text-decoration: underline; text-underline-offset: 3px; }

  @media (max-width: 480px) {
    .lib-covers { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
  }

  /* Accordion item tag — a status pill above the title, e.g. "Yfirstandandi". */
  .faq-item summary .faq-q { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
  .faq-tag {
    align-self: flex-start;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 4px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    opacity: 0.75;
  }

  /* Focus cards inside a sub-page body column. The full-width grid tracks are
     minmax(280px, 1fr), which gives only two across ~730px and leaves the
     cards oddly wide; these fit three, and two on a phone. The top margin is
     smaller too — in the column the cards follow body text, not a section
     heading. */
  .focus-grid--column {
    /* 240px keeps three across both the 727px column and the 811px one the
       narrower sidebar gives — at 190px the wider column fitted four, which
       split six cards into an unbalanced 4 + 2. */
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    margin-top: clamp(24px, 3vw, 36px);
  }
  .focus-grid--column .focus { padding: 20px 18px; }
  .focus-grid--column .focus h3 { font-size: 16px; }
  .focus-grid--column .focus p { font-size: 14px; }

  /* Accordion inside a sub-page body column. The section version is sized for
     full width — 22px summaries and 28px padding — which is heavy at 811px
     where the accordion is the page rather than a section of it. */
  .faq-list--column { margin-top: clamp(20px, 2.4vw, 28px); }
  .faq-list--column .faq-item > summary {
    font-size: clamp(16px, 1.15vw, 18px);
    padding: 16px 4px;
    gap: 16px;
  }
  .faq-list--column .faq-item .faq-body { padding: 0 4px 22px; }
  .faq-list--column .faq-item .faq-body p { font-size: 16px; }

  /* Lists of external links that make up a panel's body — on several of the
     Halldór Hansen pages the links are the content, not an addendum.
     
     The size is set here because it has to be: the rule that sizes lists in a
     panel is ul:not(.faq-links), so this one was left inheriting the old
     Bootstrap base and came out at 21.6px against 16px paragraphs — a third
     larger than the prose it sits under, which read as a different element
     that had escaped the styling. */
  .faq-body .faq-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
    font-size: 17px;
    line-height: 1.5;
  }
  .faq-list--column .faq-body .faq-links { font-size: 16px; }
  .faq-body .faq-links + .faq-links { margin-top: 8px; }
  .faq-body p + .faq-links { margin-top: 16px; }
  .faq-body .faq-links li { padding-left: 22px; position: relative; }
  /* The arrow is furniture, not text: it keeps the micro-label's size and
     weight so it does not compete with the link it points at. */
  .faq-body .faq-links li::before {
    content: "→";
    position: absolute; left: 0; top: 0.08em;
    font-size: 0.82em;
    line-height: inherit;
    opacity: 0.45;
  }
  .faq-body .faq-links a {
    text-decoration: none;
    border-bottom: 1px solid var(--line);
    padding-bottom: 1px;
  }
  .faq-body .faq-links a:hover { border-bottom-color: currentColor; text-decoration: none; }

  /* Facts list inside a sub-page body — the little key/value blocks the legacy
     intro-block kept in a sidebar (Erasmus code, contact address). */
  .dept-intro .body .body-facts {
    list-style: none;
    margin: 22px 0;
    padding: 0;
    display: grid;
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
  }
  .dept-intro .body .body-facts li {
    background: var(--paper);
    padding: 14px 16px;
    display: grid;
    grid-template-columns: minmax(120px, 30%) 1fr;
    gap: 16px;
    align-items: baseline;
  }
  .dept-intro .body .body-facts .k {
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.6;
  }
  .dept-intro .body .body-facts .v { font-size: 16px; line-height: 1.5; }
  .dept-intro .body .body-facts .v p { margin: 0; }
  @media (max-width: 540px) {
    .dept-intro .body .body-facts li { grid-template-columns: 1fr; gap: 4px; }
  }

  /* Þræðir — journal issues and their articles. */
  .thread-items { border-top: 1px solid var(--line); }
  .thread-issue { padding: 26px 0 10px; }
  .thread-issue:first-child { padding-top: 14px; }
  .thread-issue h3 {
    margin: 0;
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    opacity: 0.55;
  }
  .thread-item { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .thread-title { display: block; font-size: clamp(15px, 1.2vw, 17px); line-height: 1.4; }
  .thread-author { display: block; margin-top: 3px; font-size: 13px; opacity: 0.6; }

  /* Portraits migrated out of a slider — speaker and contributor lists. */
  .dept-intro .body .body-portrait { margin: 24px 0 12px; max-width: 220px; }
  .dept-intro .body .body-portrait img { width: 100%; height: auto; display: block; }
  .dept-intro .body .body-portrait + h4 { margin-top: 0; }

  /* A full-bleed image migrated into the body column — it can only be as wide
     as the column now, so it reads as a figure rather than a band. */
  .dept-intro .body .body-wide-image { margin: 28px 0; }
  .dept-intro .body .body-wide-image img { width: 100%; height: auto; display: block; }

  /* ------------------- Buttons written into editor content ------------------- */

  /*
   * Three shapes of button reach a page and only one of them was wearing the
   * design's pill properly:
   *
   *   317 element buttons — <a class="btn"> rendered inside .prose by the
   *       columns element, from an editor's label + URL fields
   *    54 core button blocks pasted into a content field
   *    15 hand-written class="btn" in a content field
   *
   * The element buttons came out underlined because .section-body .prose a is
   * (0,2,1) and beats .btn's own text-decoration: none at (0,2,0). That rule
   * underlines every link in prose, and a button is a link — so the pill picked
   * up an underline nothing asked for.
   *
   * The core blocks never had the pill at all. With no theme.json the site falls
   * back to classic-themes.css, whose .wp-block-button__link is a dark filled
   * capsule with no hover state of any kind — a second button look, on the same
   * pages, doing the same job.
   *
   * The specificity below is chosen, not guessed: high enough to beat the prose
   * underline and Bootstrap's .btn:hover (whose --bs-btn-hover-bg is undefined
   * on a bare .btn, so the fill disappears wherever that rule wins), and low
   * enough that .btn.primary, .btn.ghost and the two-up pane variants keep
   * theirs.
   */
  .prose a.btn,
  .prose a.btn:hover,
  .section-body .prose a.btn,
  .section-body .prose a.btn:hover { text-decoration: none; }

  /* (0,2,1) — over Bootstrap's .btn:hover, under every variant at (0,3,0). */
  a.btn:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

  /*
   * Core button blocks wear the same pill. No arrow: that belongs to the element
   * button, where the destination was chosen in a field rather than pasted into
   * a paragraph — the arrow is the tell that a button is part of the design
   * rather than part of the prose.
   */
  .prose .wp-block-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 1.6em 0;
  }
  .prose .wp-block-button { margin: 0; }
  .prose a.wp-block-button__link,
  .prose a.wp-element-button,
  .section-body .prose .wp-block-button__link,
  .prose .wp-block-button.is-style-outline > .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 22px;
    border-radius: 999px;
    border: 1px solid var(--ink);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    background: transparent;
    color: var(--ink);
    text-decoration: none;
    box-shadow: none;
    transition: all .2s ease;
  }
  .prose a.wp-block-button__link:hover,
  .prose a.wp-element-button:hover,
  .section-body .prose .wp-block-button__link:hover {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
    text-decoration: none;
  }

  /*
   * On a dark surface an ink outline is invisible and an ink fill is a hole.
   * This was already true of every .btn on a dark section before the content
   * buttons joined them — nothing had ever restated them, because until the
   * brand backgrounds arrived there was no dark section to put one on.
   */
  .lhi-el--bg-dark a.btn,
  .lhi-el--bg-eruption a.btn,
  .lhi-el--bg-dark .prose .wp-block-button__link,
  .lhi-el--bg-eruption .prose .wp-block-button__link {
    color: var(--paper);
    border-color: var(--paper);
    background: transparent;
  }
  .lhi-el--bg-dark a.btn:hover,
  .lhi-el--bg-eruption a.btn:hover,
  .lhi-el--bg-dark .prose .wp-block-button__link:hover,
  .lhi-el--bg-eruption .prose .wp-block-button__link:hover {
    background: var(--paper);
    color: var(--ink);
    border-color: var(--paper);
  }