/**
 * @file theme.css
 * LMS Bildungswelt theme.
 *
 * Tokens are imported from the design system export rather than copied. The
 * files under src/tokens/ are verbatim from
 * ~/Documents/design/lms/LMS Bildungswelt Design System (1)/tokens/, so the
 * theme cannot drift from the design the way it did when the values were
 * transcribed by hand.
 *
 * Everything below the imports is this site's own: the Drupal specific
 * bridges (the shadcn variable names the inherited Mercury components read),
 * the component layout, and the page furniture.
 */

@import url('tokens/colors.css');
@import url('tokens/typography.css');
@import url('tokens/spacing.css');
@import url('tokens/effects.css');

:root {
  /* Layout measure. The design centres on a 1440px maximum with a 64px
     gutter, giving 1312px of content. */
  --layout-max: 1440px;
  /* ui_kits/website: every section is maxWidth 1440 with 56px of gutter. */
  --layout-gutter: 56px;

  /* Bridge: the inherited Mercury components are written against these
     shadcn style names. They are fed from the design system tokens above so
     there is one source of truth. */
  --background: var(--surface-page);
  --foreground: var(--text-body);
  --card: var(--surface-card);
  --card-foreground: var(--text-heading);

  /* Primary button is a petrol ground with gold text, per the design system:
     "primary (black bg / gold text -> hover gold bg / black text)". */
  --primary: var(--brand-primary);
  --primary-foreground: var(--brand-accent);

  --secondary: var(--surface-section);
  --secondary-foreground: var(--text-heading);
  --muted: var(--surface-section);
  --muted-foreground: var(--text-muted);
  --accent: var(--brand-accent);
  --accent-foreground: var(--color-navy-900);
  --destructive: var(--color-error);
  --destructive-foreground: var(--color-white);
  --border: var(--border-default);
  --input: var(--border-default);
  --ring: var(--brand-accent);

  --font-sans: var(--font-body);
  --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
  --font-mono: 'Fira Mono', 'Menlo', 'Consolas', 'Liberation Mono', monospace;

  --radius: 0.75rem;
  --shadow-2xs: var(--shadow-xs);
  --shadow-sm: 0 1px 3px rgba(17, 17, 17, .05);
  --shadow: var(--shadow-card);
  --shadow-md: var(--shadow-card);
  --shadow-lg: var(--shadow-hover-lift);
  --shadow-xl: var(--shadow-glass);
  --shadow-2xl: var(--shadow-elevated);

  --tracking-normal: 0em;
  --spacing: 0.25rem;
  --navbar-height: calc(var(--spacing) * 15);
}

@media (min-width: 768px) {
  :root { --navbar-height: calc(var(--spacing) * 18); }
}

/**
 * Dark statement sections. Not a dark mode: the system is ~95% light and this
 * styles the deliberate petrol band, applied to a section and never to the
 * document.
 */
.dark {
  --background: var(--surface-dark);
  --foreground: var(--text-on-dark);
  --card: var(--color-navy-800);
  --card-foreground: var(--text-on-dark);
  --primary: var(--brand-accent);
  --primary-foreground: var(--color-navy-900);
  --secondary: var(--color-navy-800);
  --secondary-foreground: var(--text-on-dark);
  --muted: var(--color-navy-800);
  --muted-foreground: var(--text-on-dark-muted);
  --accent: var(--brand-accent);
  --accent-foreground: var(--color-navy-900);
  --border: rgba(255, 255, 255, .14);
  --input: rgba(255, 255, 255, .14);
  --ring: var(--brand-accent);
}


/**
 * Component grid.
 *
 * Components arrive as a flat list: a heading, then the cards belonging to it,
 * then the next heading. Nothing in that structure says which items group
 * together, so the layout is expressed per component type rather than by
 * wrapping sections. Prose runs the full measure; cards and price tiers tile.
 *
 * The rules target the field item wrapper, selected with :has(), not the
 * component itself. Drupal renders every field value inside its own
 * block-level div, so making the inner element inline-block leaves each card
 * alone on its row: the wrapper is what has to flow. The type class comes
 * from the SDC bridge templates (paragraph--*.html.twig), so the front end and
 * the Mercury preview stay identical.
 */

.lms-block {
  margin-block: var(--space-3);
}

/* Tiles: the wrapper flows, so siblings sit side by side. Floated rather than
   inline-block, because inline-block renders the newline between two elements
   as a space and three 33.333% tiles then no longer fit a row. The gutter is
   padding inside a border-box wrapper for the same reason a margin would not
   work. Headings clear the float, which ends each row. */
:has(> .lms-block--weekday-card),
:has(> .lms-block--stat) {
  float: inline-start;
  box-sizing: border-box;
  width: 100%;
  padding-inline-end: var(--space-2);
  padding-block-end: var(--space-2);
}

:has(> .lms-block--weekday-card) .lms-block,
:has(> .lms-block--stat) .lms-block {
  height: 100%;
  margin-block: 0;
}

@media (min-width: 700px) {
  :has(> .lms-block--weekday-card),
  :has(> .lms-block--stat) {
    width: 50%;
  }
}

@media (min-width: 1024px) {
  :has(> .lms-block--weekday-card),
  :has(> .lms-block--stat) {
    width: 33.333%;
  }
}

/* A heading closes the previous row of tiles and opens the next section. */
.lms-block--heading {
  clear: both;
  margin-block-start: var(--space-6);
}

.lms-block--heading:first-child {
  margin-block-start: 0;
}

/* Stat carries no container. The design system's Stat is a gold number with a
   label and sublabel on the page ground; the sand panel with a gold edge that
   used to be here came from the print manual's Infobox rule and was never part
   of this component. */
.lms-block--stat > * { height: 100%; }

/**
 * Page furniture from the web design export.
 *
 * The hero, the closing call to action band and the shared button and eyebrow
 * treatments. Measured from "LMS Bildungswelt Design System/standalone":
 * eyebrows are gold, uppercase and widely tracked; the hero title is oversized
 * petrol; sections alternate a white ground with sand; the closing band is
 * full bleed petrol.
 */

.lms-eyebrow {
  /* SectionHeading.jsx: --text-gold on light, --brand-accent only on dark. */
  margin: 0 0 14px;
  color: var(--text-gold);
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

/* ---------------------------------------------------------------- buttons */

.lms-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 14px 24px;
  border: 1px solid transparent;
  border-radius: var(--radius-button);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  transition: transform var(--duration-fast) var(--ease-standard),
              background-color var(--duration-fast) var(--ease-standard);
}

.lms-btn:hover { transform: translateY(-1px); }

.lms-btn--primary { background: var(--brand-primary); color: #fff; }
.lms-btn--gold    { background: var(--brand-accent); color: var(--color-navy-900); }
.lms-btn--ghost   { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .5); }
.lms-btn--outline { background: #fff; color: var(--brand-primary); border-color: var(--border-default); }

/* ------------------------------------------------------------------- hero */

.lms-hero {
  display: grid;
  gap: var(--space-6);
  align-items: center;
  padding-block: 88px;
}

@media (min-width: 900px) {
  .lms-hero { grid-template-columns: 1fr 1fr; }
}

.lms-hero__title {
  margin: 0 0 var(--space-3);
  color: var(--text-heading);
  font-size: clamp(2.25rem, 4vw, 3.5rem);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tighter);
}

.lms-hero__text {
  margin: 0 0 var(--space-3);
  max-width: 46ch;
  color: var(--text-body);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
}

.lms-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  margin: var(--space-3) 0 0;
}

.lms-hero__note { color: var(--text-muted); font-size: var(--text-sm); }

/* Pill badges under the intro. */
.lms-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}

.lms-badge {
  padding: 8px 16px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  background: var(--surface-card);
  color: var(--text-heading);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

/* The image, with the promise card laid over its lower edge. */
.lms-hero__media { position: relative; }

.lms-hero__image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-elevated);
}

.lms-promise {
  margin: 0;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, .97);
  box-shadow: var(--shadow-glass);
}

@media (min-width: 900px) {
  .lms-promise {
    position: absolute;
    inset-inline: var(--space-3);
    inset-block-end: var(--space-3);
  }
}

.lms-promise blockquote {
  margin: 0;
  color: var(--text-heading);
  font-size: var(--text-base);
  line-height: var(--leading-snug);
}

/* -------------------------------------------------------------- cta band */

.lms-ctaband {
  margin-block-start: var(--space-7);
  background: var(--brand-primary);
  color: #fff;
}

/*
 * Full bleed out of the content measure. The class is doubled on purpose: a
 * section lays its slot out as a grid and forces every child to width 100%,
 * which ties on specificity and cancels the bleed. Two classes win.
 */
.lms-ctaband.lms-ctaband {
  width: auto;
  max-width: none;
  margin-inline: calc(50% - 50vw);
  padding-inline: calc(50vw - 50%);
}

.lms-ctaband__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-6);
}

.lms-ctaband__title {
  margin: 0 0 var(--space-1);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: #fff;
}

.lms-ctaband__text { margin: 0; color: rgba(255, 255, 255, .75); max-width: 46ch; }

.lms-ctaband__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; }

/**
 * Float containment.
 *
 * Tiles float, so anything that follows a run of them has to clear or it
 * wraps into the gap beside the last row. That is what collapsed the call to
 * action band into a narrow column next to the price tiles. Every block that
 * is not itself a tile clears.
 */
.lms-block:not(.lms-block--weekday-card):not(.lms-block--stat) {
  clear: both;
}

/* The full bleed band measures against the viewport, so the page must not be
   allowed to scroll sideways when a scrollbar narrows the viewport. */
html { overflow-x: hidden; }

/**
 * A page that opens with a hero supplies its own title, so the page title
 * block and breadcrumb would repeat it. The design shows neither above a hero.
 */
body:has(.lms-hero) header h1,
body:has(.lms-hero) nav[aria-label="breadcrumb"] {
  display: none;
}

/* Content image. */
.lms-figure { margin: 0; }

.lms-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-xl);
}

.lms-figure figcaption {
  margin-block-start: var(--space-1);
  color: var(--text-muted);
  font-size: var(--text-sm);
}

/**
 * Type and spacing, expressed in the design system's own tokens.
 *
 * The readme states these directly, so nothing here is measured off a
 * screenshot: display headlines are bold with tight tracking, body copy is
 * 15px on 1.7, eyebrows are 11px with 2.5px tracking, and buttons are 48px
 * tall on a 12px radius. The inherited Mercury components size headings with
 * Tailwind steps running to text-4xl, which is why the section headings need
 * an explicit size to sit at --text-2xl rather than roughly 48px.
 */

.lms-hero__title {
  font-size: var(--text-4xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tighter);
}

@media (max-width: 720px) {
  .lms-hero__title { font-size: var(--text-3xl); }
}

.lms-hero__text,
.lms-block--text p {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
}

.lms-block--text p { max-width: 68ch; }
.lms-hero__text { max-width: 46ch; }

.lms-block--heading h1,
.lms-block--heading h2,
.lms-block--heading h3 {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

/* "Buttons 48px, 12px radius" (readme, Components). */
.lms-btn {
  min-height: 48px;
  padding-inline: var(--space-3);
  border-radius: var(--radius-button);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

/* "primary (black bg / gold text -> hover gold bg / black text)". */
.lms-btn--primary { background: var(--brand-primary); color: var(--brand-accent); }
.lms-btn--primary:hover { background: var(--brand-accent); color: var(--brand-primary); }
.lms-btn--gold { background: var(--brand-accent); color: var(--color-navy-900); }
.lms-btn--gold:hover { background: var(--brand-accent-hover); color: #fff; }

.lms-badge { font-size: var(--text-sm); }

/**
 * Section rhythm.
 *
 * "Spacing: 8 · 16 · 24 · 32 · 48 · 64 · 96. Whitespace is luxury, never
 * compress; content breathes." A heading opens a band, so it carries the
 * 96px, and the blocks that follow it sit on the 24px step.
 */
.lms-block--heading { margin-block: var(--space-7) var(--space-3); }
.lms-block--heading:first-child { margin-block-start: var(--space-6); }
.lms-block--text { margin-block: 0 var(--space-3); }
.lms-ctaband__inner { padding-block: var(--space-7); }

/**
 * Header.
 *
 * "LMS Standard Page.html" lays the bar out as logo left, navigation centre,
 * call to action right, sticky over a translucent page ground.
 *
 * The blocks here are placed through Canvas, which ids them by uuid, so the
 * previous rules keyed on #block-lms-theme-main-menu matched nothing at all
 * and the navigation never actually centred. Position the region's own
 * children instead: branding, menu, then the button component.
 */

header[role="banner"] {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--surface-page) 85%, transparent);
  backdrop-filter: blur(12px);
}

header[role="banner"] .region-header {
  display: grid;
  /* Equal side tracks are what put the navigation on the page centre rather
     than merely between its neighbours. */
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-4);
  max-width: var(--layout-max);
  margin-inline: auto;
  padding-inline: var(--layout-gutter);
  padding-block: 20px;
  border-block-end: 1px solid var(--border-default);
}

header[role="banner"] .region-header > :nth-child(1) { justify-self: start; }
header[role="banner"] .region-header > :nth-child(2) { justify-self: center; }
header[role="banner"] .region-header > :nth-child(3) { justify-self: end; }

header[role="banner"] .branding img {
  /* The standalone template sets the header wordmark to 52px inside 20px of
     block padding. */
  height: 52px;
  width: auto;
}

/* Navigation: 40px between items, 14px medium petrol labels. */
header[role="banner"] .region-header nav ul {
  gap: 40px;
}

header[role="banner"] .region-header nav a {
  padding: 6px 10px;
  min-height: 0;
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  color: var(--text-heading);
  border-radius: var(--radius-sm);
}

/*
 * Hover.
 *
 * The menu block carries Tailwind's hover:md:bg-primary and
 * hover:md:text-primary-foreground. The background took effect but the colour
 * did not: the rule above is (0,2,3) and Tailwind's is a class plus a pseudo
 * class, (0,2,0), so petrol text stayed on the new petrol ground and the item
 * became unreadable on hover. Both halves are set here instead.
 *
 * The gold label is what the design system pairs with petrol, but #C49A4A on
 * #123D4C measures 4.49:1, just under the 4.5:1 AA needs at this size. The
 * gold tint keeps the pairing and reaches 9.8:1.
 */
header[role="banner"] .region-header nav a:hover,
header[role="banner"] .region-header nav a:focus-visible {
  background: var(--brand-primary);
  color: var(--color-gold-tint);
}

@media (max-width: 900px) {
  header[role="banner"] .region-header {
    grid-template-columns: 1fr auto;
    row-gap: var(--space-2);
  }
  header[role="banner"] .region-header > :nth-child(2) {
    grid-column: 1 / -1;
    justify-self: start;
  }
  header[role="banner"] .region-header nav ul { gap: var(--space-3); }
}

/**
 * Component values taken from the design system's own source rather than
 * measured off a rendering: components/core/{SectionHeading,Stat,Badge}.jsx.
 */

/* Badge.jsx neutral tone. */
.lms-badge {
  padding: 5px 13px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  background: var(--surface-section);
  color: var(--text-body);
  font-size: 12.5px;
  font-weight: var(--weight-medium);
  letter-spacing: .1px;
}

/* SectionHeading.jsx subtitle: 15px, muted, and a 560px measure so the line
   length stays short under a heading. */
.lms-block--heading + .lms-block--text p {
  max-width: 560px;
  color: var(--text-muted);
}

/* Eyebrows on a dark ground use the brighter accent. */
.lms-ctaband .lms-eyebrow { color: var(--brand-accent); }

/**
 * Layout measure.
 *
 * Every section in ui_kits/website is "maxWidth: 1440, margin: 0 auto,
 * padding: 96px 56px", so the content measure is 1328px inside a 1440px
 * frame. The inherited Mercury theme uses Tailwind's .container, which caps at
 * 1248px and applies its own gutter, leaving the page narrower than the design
 * and offset by the wrong amount.
 */
.container,
main .container {
  max-width: var(--layout-max);
  padding-inline: var(--layout-gutter);
}

/* The content region is what actually holds the page. The inherited theme caps
   it at 1280px with a left margin of 80px and a 16px gutter, which renders the
   page 1248px wide starting 96px in. The design is 1440px centred with a 56px
   gutter, so 1328px of content starting at 56px. */
.region-content {
  max-width: var(--layout-max);
  margin-inline: auto;
  padding-inline: var(--layout-gutter);
}

/* Sections that carry their own ground bleed full width, with the content
   still held on the measure. WeekSection uses Soft Ivory between hairlines;
   ModelSection and the closing band use petrol. */
.lms-band {
  margin-inline: calc(50% - 50vw);
  padding-inline: calc(50vw - 50%);
}

.lms-band--ivory {
  background: var(--surface-section);
  border-block: 1px solid var(--border-default);
}

.lms-band--petrol { background: var(--brand-primary); color: #fff; }

/**
 * Hero proportions, from Hero.jsx: a 1.05fr / 1fr split with a 64px gap, the
 * image cropped to a fixed height, and the promise card inset 24px.
 */
@media (min-width: 900px) {
  .lms-hero { grid-template-columns: 1.05fr 1fr; gap: var(--space-6); }
}

/**
 * Hero spacing.
 *
 * The hero is drawn as a full-width section in its own right, so on its own it
 * carries the design system's 88px of vertical padding. Canvas, though, wraps
 * every placed component in a section that already pads 64px (pt-16), and the
 * two stack: 152px of empty space above the eyebrow before the grid even
 * centres the copy column. Nested, let the wrapper own the vertical rhythm.
 */
.lms-hero { padding-block: 88px; }
section .lms-hero { padding-block: 0; }

.lms-hero__image {
  height: 520px;
  object-fit: cover;
  box-shadow: 0 20px 50px rgba(14, 46, 60, .14);
}

.lms-hero__media { border-radius: var(--radius-xl); overflow: hidden; }

@media (min-width: 900px) {
  .lms-promise { inset-inline: 24px; inset-block-end: 24px; }
}

.lms-promise {
  padding: var(--space-3);
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 8px 30px rgba(14, 46, 60, .08);
}

.lms-promise blockquote {
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  line-height: 1.5;
  letter-spacing: -.2px;
  margin-block-start: 12px;
}

.lms-promise .lms-eyebrow { font-size: 10.5px; margin-block-end: 0; }

/* Hero copy rhythm, from Hero.jsx. */
.lms-hero__title { margin-block-start: 26px; }
.lms-hero__text  { margin-block-start: var(--space-3); max-width: 440px; }
.lms-hero__actions { gap: var(--space-2); margin-block-start: 40px; }

/* Secondary action: white ground, petrol text and border. */
.lms-btn--outline { background: #fff; color: var(--brand-primary); border-color: var(--brand-primary); }

/**
 * Team.
 *
 * Columns come from the view's grid format, not from this stylesheet: the
 * team is rendered by views_grid at three columns, which also equalises row
 * heights. The float rules that used to sit here fought that and are gone.
 * What remains is the card itself, which is shared by every display of a
 * person, and by the paragraph rows on the team page.
 */

/* Views wraps each row; the card fills the cell so a row closes flush. */
.views-view-grid .views-col > *,
.views-view-grid .views-field > * { height: 100%; }

.lms-block--team-member { height: 100%; }

.lms-person {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  height: 100%;
  /* Card.jsx: padding 28, a plain border on all four sides. No accent edge:
     a gold rule on a card is decoration, which the brief rules out. */
  padding: 28px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
  background: var(--surface-card);
  box-shadow: var(--shadow-card);
}

/* The avatar disc. Sand ground, petrol stroke, gold on hover so the card has
   one small moment of life without decoration. */
.lms-person__avatar {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-block-end: var(--space-1);
  border-radius: var(--radius-circle);
  background: var(--surface-section);
  color: var(--text-heading);
  transition: color var(--duration-fast) var(--ease-standard);
}

.lms-person__avatar svg { width: 34px; height: 34px; }

.lms-person:hover .lms-person__avatar { color: var(--brand-accent); }

.lms-person__funktion {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.lms-person__name {
  margin: 0;
  color: var(--text-heading);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}

.lms-person__role {
  margin: 0 0 var(--space-1);
  color: var(--text-gold);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
}

/* Which stages a person teaches. Badge tone from the design system: a sand
   ground with a hairline border, never a filled colour chip. */
.lms-person__stages {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 var(--space-1);
  padding: 0;
  list-style: none;
}

.lms-person__stages li {
  padding: 4px 11px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  background: var(--surface-section);
  color: var(--text-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
}

/* PillList.jsx: 6px gold dot, 12px gap, 15px on 1.55. */
.lms-person__points {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lms-person__points li {
  display: flex;
  gap: var(--space-1);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-body);
}

.lms-person__points li::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  margin-block-start: 8px;
  border-radius: var(--radius-circle);
  background: var(--brand-accent);
}

/* The overflow line sits at the foot of the card, so every card in a row
   closes flush regardless of how many points its person carries. */
.lms-person__more {
  margin: auto 0 0;
  padding-block-start: var(--space-2);
  border-block-start: 1px solid var(--border-default);
  color: var(--text-gold);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

/* ------------------------------------------------------------ site footer */
/*
 * Petrol ground and the reversed wordmark come from the footer in
 * Homepage.dc.html. The structure is the school's own, from
 * lms-privatschule.ch: what we offer, the school, how to reach us, and a
 * legal line under a hairline. Gold is kept to the column headings, which is
 * the eyebrow treatment used everywhere else.
 */

.lms-footer {
  background: var(--brand-primary);
  border-top: 1px solid rgb(255 255 255 / 10%);
  color: rgb(255 255 255 / 55%);
}

.lms-footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  max-width: 1440px;
  margin-inline: auto;
  padding: var(--space-6) 64px var(--space-5);
}

.lms-footer__logo { display: block; line-height: 0; }

.lms-footer__logo img {
  display: block;
  width: auto;
  height: 34px;
  /* The wordmark is dark; the band is petrol. */
  filter: brightness(0) invert(1);
}

.lms-footer__claim {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  line-height: 1.7;
  color: rgb(255 255 255 / 70%);
}

.lms-footer__social {
  display: flex;
  gap: var(--space-1);
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}

.lms-footer__social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  color: rgb(255 255 255 / 70%);
  border: 1px solid rgb(255 255 255 / 20%);
  border-radius: 100px;
  transition: color .15s ease, border-color .15s ease;
}

.lms-footer__social a:hover,
.lms-footer__social a:focus-visible {
  color: var(--brand-accent);
  border-color: var(--brand-accent);
}

.lms-footer__social svg { width: 18px; height: 18px; }

.lms-footer__coltitle {
  margin: 0 0 var(--space-2);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--brand-accent);
}

.lms-footer__col ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
  line-height: 1.6;
}

.lms-footer__col a {
  color: rgb(255 255 255 / 70%);
  text-decoration: none;
  transition: color .15s ease;
}

.lms-footer__col a:hover,
.lms-footer__col a:focus-visible { color: var(--brand-accent); }

.lms-footer__legal { border-top: 1px solid rgb(255 255 255 / 10%); }

.lms-footer__legalinner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  justify-content: space-between;
  max-width: 1440px;
  margin-inline: auto;
  padding: 24px 64px;
  font-size: 13px;
}

.lms-footer__legalinner p { margin: 0; }

.lms-footer__legalinner ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.lms-footer__legalinner a {
  color: rgb(255 255 255 / 55%);
  text-decoration: none;
}

.lms-footer__legalinner a:hover,
.lms-footer__legalinner a:focus-visible { color: var(--brand-accent); }

@media (width <= 900px) {
  .lms-footer__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

@media (width <= 560px) {
  .lms-footer__inner {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--space-5) var(--space-3) var(--space-4);
  }

  .lms-footer__legalinner { padding: 20px var(--space-3); }
}

/*
 * A closing band that bleeds full width has to sit flush on the footer. The
 * content region carries 32px of bottom padding from the inherited build,
 * which otherwise shows as a strip of page ground between the two petrol
 * bands. Only drop it when the page actually ends in such a band.
 */
.region-content:has(> :last-child .lms-ctaband) { padding-bottom: 0; }

/* Menu blocks sit in the footer's link slots; their block title is the gold
   eyebrow that heads the column. */
.lms-footer__col h2,
.lms-footer__col .block > h2 {
  margin: 0 0 var(--space-2);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--brand-accent);
}

.lms-footer__col nav ul,
.lms-footer__col .menu {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
  line-height: 1.6;
}

.lms-footer__legalinner .menu,
.lms-footer__legalinner nav ul {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* The skip link is a keyboard affordance, not page furniture: it was printing
   "Skip to main content" above the header on every page. Off screen until it
   takes focus. */
.skip-link,
a[href="#main-content"]:not(:focus):not(:focus-visible) {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link:focus,
a[href="#main-content"]:focus {
  position: static !important;
  width: auto;
  height: auto;
  padding: var(--space-1) var(--space-2);
  overflow: visible;
  clip-path: none;
  color: var(--brand-accent);
  background: var(--brand-primary);
}

/* -------------------------------------------------------- contact details */

.lms-contact {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
}

.lms-contact + .lms-contact { margin-block-start: var(--space-3); }

.lms-contact__icon {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--brand-accent);
  background: var(--surface-section);
  border-radius: 100px;
}

.lms-contact__icon svg { width: 20px; height: 20px; }

.lms-contact__label {
  margin: 0 0 2px;
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.lms-contact__lines {
  margin: 0;
  /* Body scale, not the step above it: these are reference lines, not copy. */
  font-size: var(--text-base);
  line-height: 1.55;
  color: var(--text-heading);
}

/*
 * The details pair up instead of running down one column: the two locations
 * side by side, then the ways to reach us. Stacked, the list pushed the page
 * down and read as five unrelated things.
 */
/* The column that holds the map and the details is itself self-start, so it
   shrinks to fit and hands its children no width to work with.
   Scoped to div: Canvas bleeds its sections full width with negative inline
   margins, and width:100% on the section resolved against the 1328px content
   region instead, so above 1440 the whole block stayed pinned to the left
   while every other section centred. */
div[class*="flex-col"]:has(.geolocation-map-wrapper),
div[class*="flex-col"]:has(.lms-contact) {
  align-self: stretch;
  width: 100%;
}

[class*="flex-row"]:has(> .lms-contact) {
  flex-wrap: wrap;
  /* The group carries self-start, so it shrinks to fit and there is no width
     to wrap into. Same shape of bug as the map container. */
  align-self: stretch;
  width: 100%;
}
[class*="flex-row"] > .lms-contact { flex: 1 1 218px; min-width: 0; }

.lms-contact__icon { width: 38px; height: 38px; }
.lms-contact__icon svg { width: 18px; height: 18px; }

.lms-contact__lines a { color: inherit; }

/* ------------------------------------------------------------------- map */

.lms-map { margin: 0; }

.lms-map__title {
  margin: 0 0 var(--space-2);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--brand-accent);
}

.lms-map__frame {
  display: block;
  width: 100%;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
}

.lms-map__link {
  display: inline-block;
  margin-block-start: var(--space-1);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/*
 * Drupal's own form buttons. Webform and every core form render
 * .button--primary, which the theme had no rule for, so the submit button on
 * the contact form was unstyled browser default. Same shape as .lms-btn:
 * 48px tall, 12px radius, petrol ground with gold text.
 */
.button,
.form-submit,
input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding-inline: 26px;
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--brand-primary);
  background: #fff;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-button);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

.button--primary,
.form-submit.button--primary,
input[type="submit"].button--primary {
  color: var(--brand-accent);
  background: var(--brand-primary);
  border-color: var(--brand-primary);
}

.button--primary:hover,
.button--primary:focus-visible {
  color: var(--brand-primary);
  background: var(--brand-accent);
  border-color: var(--brand-accent);
}

/*
 * The contact form reads as the thing to do on the page, so it gets the Card
 * treatment from Card.jsx: 28px, a plain border on all four sides, the card
 * radius and shadow. No accent edge.
 */
.webform-submission-form {
  padding: 28px;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

/*
 * A form is read one line at a time, so it is held to a comfortable measure
 * rather than stretched across its column. At 806px the inputs said nothing
 * about what belongs in them.
 */
/*
 * Form controls, taken from the lead form in CampaignLanding.dc.html rather
 * than left to Drupal: a filled field on the page ground with a 12px radius,
 * not an underline, and 14px between fields. The default spacing made the
 * form twice as tall as it needed to be.
 */
.webform-submission-form {
  max-width: 620px;
  padding: 32px;
  border-radius: var(--radius-dialog);
  /* The form is already a flex column with a 32px gap; that plus a margin on
     each item put 46px between fields where the template asks for 14.
     CampaignLanding also pairs e-mail and telephone on one row, so the layout
     is a two column grid: everything spans both tracks except those two. */
  display: grid;
  grid-template-columns: 1fr 1fr;
  row-gap: 14px;
  column-gap: 12px;
}

.webform-submission-form > * { grid-column: 1 / -1; }
.webform-submission-form > .webform-type-email { grid-column: 1 / 2; }
.webform-submission-form > .webform-type-tel { grid-column: 2 / -1; }

@media (max-width: 600px) {
  .webform-submission-form > .webform-type-email,
  .webform-submission-form > .webform-type-tel { grid-column: 1 / -1; }
}

/* The campaign lead form follows the reader down the page, as the template
   has it, so the offer stays in view beside the long copy. */
.webform-submission-schnuppertag-form {
  position: sticky;
  top: 24px;
}

.webform-submission-form .js-form-item { margin: 0; }

.webform-submission-form label {
  display: block;
  margin-block-end: 6px;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-heading);
}

.webform-submission-form input[type="text"],
.webform-submission-form input[type="email"],
.webform-submission-form input[type="tel"],
.webform-submission-form select,
.webform-submission-form textarea {
  width: 100%;
  padding: 0 14px;
  font-family: inherit;
  font-size: var(--text-base);
  color: var(--text-heading);
  background: var(--surface-page);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-input);
}

.webform-submission-form input[type="text"],
.webform-submission-form input[type="email"],
.webform-submission-form input[type="tel"],
.webform-submission-form select { height: 46px; }

.webform-submission-form textarea {
  padding: 12px 14px;
  line-height: 1.55;
  resize: vertical;
}

.webform-submission-form input:focus-visible,
.webform-submission-form select:focus-visible,
.webform-submission-form textarea:focus-visible {
  outline: 2px solid var(--brand-accent);
  outline-offset: 1px;
}

.webform-submission-form .description {
  margin-block-start: 4px;
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* The stage choice is a row of pills, as the template draws it. Webform names
   this wrapper js-webform-radios, not form-radios. */
.webform-submission-form .js-webform-radios {
  display: flex;
  /* Webform's own .webform-options-display-one-column sets flex-direction to
     column, so without this the three pills stack and the block runs to 182px
     instead of the single 44px row the template draws. */
  flex-direction: row;
  flex-wrap: wrap;
  gap: 12px;
}

.webform-submission-form .js-webform-radios .js-form-item { margin: 0; }

.webform-submission-form .js-webform-radios label.option {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 8px 16px;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-heading);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  cursor: pointer;
}

.webform-submission-form .js-webform-radios input.form-radio {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.webform-submission-form .js-webform-radios input.form-radio:checked + label.option {
  color: var(--brand-accent);
  background: var(--brand-primary);
  border-color: var(--brand-primary);
}

.webform-submission-form .js-webform-radios input.form-radio:focus-visible + label.option {
  outline: 2px solid var(--brand-accent);
  outline-offset: 2px;
}

.webform-submission-form fieldset.radios--wrapper { margin: 0; padding: 0; border: 0; }

.webform-submission-form legend .fieldset-legend {
  display: block;
  margin-block-end: 6px;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-heading);
}

.webform-submission-form .form-actions { margin-block-start: 20px; }

/*
 * The map. Geolocation ships the rule that gives this container its height in
 * geolocation/geolocation-map, and that stylesheet does not reach the page:
 * the container computed to 432x0 and Leaflet drew nothing into it. Height
 * here, plus the card edge the design system puts on framed media.
 */
.geolocation-map-wrapper {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.geolocation-map-container {
  width: 100%;
  height: 340px;
}

@media (width <= 860px) {
  .geolocation-map-container { height: 260px; }
}

/* Without JavaScript the raw rows show; they are for the map, not the reader. */
.geolocation-location.js-hide { display: none; }

/*
 * The map sits in a flex column whose items align to the start, so a child
 * declared width:100% resolves against a shrink to fit parent and computes to
 * zero: the container measured 0 x 340 and Leaflet had nowhere to draw.
 * Stretch the chain that holds it.
 */
.geolocation-map-wrapper { width: 100%; }

.views-element-container:has(.geolocation-map-wrapper),
[id^="block-"]:has(.geolocation-map-wrapper) {
  align-self: stretch;
  width: 100%;
}

/*
 * A petrol section hands its contents --primary-foreground, which is the gold
 * meant for a button label, not for a band of copy. The blockquote then set
 * body colour over it and rendered dark on dark. Prose here reads white; gold
 * stays on the eyebrow, which is the ~5% the brief allows it.
 */
.text-primary-foreground blockquote,
.text-primary-foreground blockquote p,
.text-primary-foreground blockquote footer {
  color: #fff;
}

.text-primary-foreground blockquote cite,
.text-primary-foreground blockquote cite span {
  color: rgb(255 255 255 / 70%);
}

.text-primary-foreground blockquote svg { color: rgb(255 255 255 / 25%); }

/* A pill is a control: 44px is the smallest comfortable target. */
.webform-submission-form .js-webform-radios label.option { min-height: 44px; }

/* Validation has to say what to fix, in the interface's voice. */
.webform-submission-form .form-item--error-message,
.webform-submission-form .error-message {
  margin-block-start: 6px;
  font-size: var(--text-sm);
  color: #B3261E;
}

.webform-submission-form input.error,
.webform-submission-form select.error,
.webform-submission-form textarea.error { border-color: #B3261E; }

/*
 * The decorative quote mark is 64px positioned back and up, so it sat across
 * the first line of the quote. It introduces the quote: it goes above it, and
 * the text starts below.
 */
blockquote > svg {
  inset-block-start: -0.25rem;
  inset-inline-start: -2.25rem;
  width: 2.25rem;
  height: 2.25rem;
}

blockquote { padding-block-start: 2rem; }

/* ------------------------------------------------------------------ blog */
/*
 * The overview: the newest post leads, the rest follow in a grid. Cards are
 * Card.jsx, a plain border and the card radius, no accent edge.
 */

.lms-post { height: 100%; }

.lms-post__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
  transition: border-color .15s ease;
}

.lms-post__link:hover,
.lms-post__link:focus-visible { border-color: var(--brand-accent); }

.lms-post__img {
  display: block;
  width: 100%;
  height: 168px;
  object-fit: cover;
}

.lms-post__img--empty { background: linear-gradient(135deg, #DCE6E2, #E9EDE6 60%, #E4DFD2); }

.lms-post__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3);
}

.lms-post__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.lms-post__meta em { font-style: normal; color: var(--brand-accent-ink); }

.lms-post__title {
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  line-height: 1.3;
  color: var(--brand-primary);
}

.lms-post__ex { font-size: var(--text-sm); line-height: 1.55; }

/* The lead post: the first row of the lead block runs wide. */
.view-blog-overview.view-display-id-block_lead .lms-post__link {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: center;
}

.view-blog-overview.view-display-id-block_lead .lms-post__img { height: 100%; min-height: 260px; }
.view-blog-overview.view-display-id-block_lead .lms-post__body { padding: var(--space-5); }
.view-blog-overview.view-display-id-block_lead .lms-post__title { font-size: var(--text-xl); line-height: 1.2; }

@media (width <= 780px) {
  .view-blog-overview.view-display-id-block_lead .lms-post__link { grid-template-columns: 1fr; }
  .view-blog-overview.view-display-id-block_lead .lms-post__img { min-height: 200px; }
}

/* The article ---------------------------------------------------------- */

.lms-article__crumb {
  margin: 0 0 var(--space-3);
  padding-block-end: var(--space-2);
  font-size: var(--text-xs);
  color: var(--text-muted);
  border-block-end: 1px solid var(--border-default);
}

.lms-article__crumb a { color: inherit; }

.lms-article__title {
  margin: 0 0 var(--space-1);
  max-width: 20ch;
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tighter);
  color: var(--brand-primary);
  text-wrap: balance;
}

.lms-article__date { margin: 0 0 var(--space-4); font-size: var(--text-sm); color: var(--text-muted); }

.lms-article__hero {
  display: block;
  width: 100%;
  max-height: 420px;
  margin-block-end: var(--space-5);
  object-fit: cover;
  border-radius: var(--radius-card);
}

.lms-article__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--space-6);
  align-items: start;
}

@media (width <= 860px) { .lms-article__grid { grid-template-columns: 1fr; } }

/* Running text stays on a readable measure whatever the column does. */
.lms-article__prose { max-width: 68ch; }
.lms-article__prose p { margin: 0 0 var(--space-2); font-size: var(--text-base); line-height: var(--leading-relaxed); }

.lms-article__prose h2 {
  margin: var(--space-4) 0 var(--space-1);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--brand-primary);
}

.lms-article__aside { position: sticky; top: var(--space-3); display: grid; gap: var(--space-2); }

.lms-article__card {
  padding: var(--space-3);
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
}

.lms-article__card--dark {
  color: #fff;
  background: var(--brand-primary);
  border-color: var(--brand-primary);
}

.lms-article__card p { margin: 0 0 var(--space-2); font-size: var(--text-sm); color: rgb(255 255 255 / 75%); }

.lms-article__cardtitle {
  margin: 0 0 var(--space-1) !important;
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--brand-accent) !important;
}

/* ------------------------------------------------------------ answer card */
/*
 * From the "Was Eltern oft fragen" band in Homepage.dc.html: white on the
 * ivory ground, a plain border on all four sides, 24px padding, a 20px gold
 * check beside 14.5px text whose opening clause is semibold.
 */

.lms-answer {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  padding: var(--space-3);
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.lms-answer__icon {
  flex: 0 0 auto;
  margin-block-start: 2px;
  color: var(--brand-accent);
}

.lms-answer__icon svg { width: 20px; height: 20px; display: block; }

.lms-answer__text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--brand-primary);
}

.lms-answer__text b { font-weight: var(--weight-semibold); }

/**
 * Standard page.
 *
 * Values taken from standalone/"LMS Standard Page.html" rather than measured
 * off a rendering: breadcrumb hero on petrol, a 1fr/320px body with a sticky
 * aside, feature cards, and a tinted pull quote.
 */

.lms-stdhero {
  background: var(--color-navy-900, #0E2E3A);
  color: #fff;
  /* Canvas already pads the section that wraps this, the same double padding
     the page hero had, so the band carries its own inner measure instead. */
  margin-block: 0;
}

.lms-stdhero__inner {
  max-width: var(--layout-max);
  margin-inline: auto;
  padding: 72px var(--layout-gutter);
}

.lms-stdhero__trail {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, .55);
}

.lms-stdhero__trail a { color: inherit; text-decoration: none; }
.lms-stdhero__trail a:hover { color: #fff; }
.lms-stdhero__chev { display: inline-flex; opacity: .55; }
.lms-stdhero__current { color: var(--brand-accent); }

.lms-stdhero__eyebrow { margin-block-start: 28px; color: var(--brand-accent); }

.lms-stdhero__title {
  margin-block-start: 14px;
  max-width: 760px;
  font-size: 48px;
  font-weight: var(--weight-bold);
  letter-spacing: -1px;
  line-height: 1.08;
  color: #fff;
}

.lms-stdhero__lead {
  margin-block-start: 20px;
  max-width: 620px;
  font-size: var(--text-lg);
  line-height: 1.7;
  color: rgba(255, 255, 255, .72);
}

@media (max-width: 900px) {
  .lms-stdhero__title { font-size: var(--text-3xl); }
  .lms-stdhero__inner { padding-block: var(--space-6); }
}

/* The aside tracks the reader down the page. */
.lms-toc,
.lms-download { border-radius: var(--radius-card); }

.lms-toc {
  background: var(--surface-card, #fff);
  border: 1px solid var(--border-default);
  padding: var(--space-3);
  box-shadow: 0 1px 3px rgba(14, 46, 60, .05);
}

.lms-toc__title {
  font-size: var(--text-xs);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: var(--weight-semibold);
  color: var(--brand-accent-ink, #A97B2E);
}

.lms-toc__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-block-start: var(--space-2);
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
}

.lms-toc__list a { color: var(--text-body); text-decoration: none; }
.lms-toc__list a:hover { color: var(--brand-primary); }
.lms-toc__list a.is-current { color: var(--brand-primary); font-weight: var(--weight-semibold); }

.lms-download {
  background: var(--brand-primary);
  padding: var(--space-3);
  color: #fff;
}

.lms-download__title { font-size: var(--text-md); font-weight: var(--weight-semibold); }

.lms-download__text {
  margin-block-start: var(--space-1);
  font-size: var(--text-sm);
  line-height: 1.55;
  color: rgba(255, 255, 255, .65);
}

.lms-download__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  width: 100%;
  min-height: 44px;
  margin-block-start: var(--space-2);
  border-radius: var(--radius-button);
  background: var(--brand-accent);
  color: var(--brand-primary);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-decoration: none;
}

.lms-download__btn:hover { background: var(--brand-accent-hover); color: #fff; }

/**
 * The two column body of a standard page.
 *
 * Canvas gives its group and grid components no custom class, so these key off
 * the aside's own content instead: the grid is the element two levels above
 * the table of contents, the aside column the one directly above it.
 */

/* 72px between the measure and the aside, per the template. */
div:has(> div > .lms-toc) { gap: 72px; }

/* Canvas hands its groups `align-items: start`, which shrinks every child to
   fit. In the prose column that collapsed the feature card grid to 164px with
   66px columns; in the aside it collapsed the cards to their text width. Both
   columns and everything they hold are pushed back out to their full track. */
div:has(> div > .lms-toc) > * ,
div:has(> div > .lms-toc) > * > * { width: 100%; }

.lms-download,
.lms-toc { width: 100%; }

/* The aside tracks the reader down the page. */
div:has(> .lms-toc) {
  position: sticky;
  top: 100px;
  align-self: start;
}

/* Opening statement of an interior page: heavier and petrol, then body copy. */
.lms-lead {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  color: var(--brand-primary);
  line-height: 1.5;
  letter-spacing: -.2px;
}

/* The pull quote sits on the mint tint with a gold edge. Scoped to the
   standard page so testimonial quotes elsewhere keep their own treatment. */
div:has(> div > .lms-toc) blockquote {
  margin-block-start: var(--space-5);
  padding: 28px;
  background: var(--surface-mint, #EAF1F3);
  border: 1px solid var(--border-default);
  border-inline-start: 3px solid var(--brand-accent);
  border-radius: var(--radius-card);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  font-style: italic;
  line-height: 1.5;
  color: var(--brand-primary);
}


/* Feature card, per "LMS Standard Page.html". */
.lms-feature {
  display: flex;
  flex-direction: column;
  padding: var(--space-3);
  background: var(--surface-card, #fff);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
  box-shadow: 0 1px 3px rgba(14, 46, 60, .05);
  text-decoration: none;
}

a.lms-feature:hover { border-color: var(--brand-accent); }

.lms-feature__icon { display: inline-flex; color: var(--brand-accent); }
.lms-feature__icon svg { width: 24px; height: 24px; }

.lms-feature__title {
  margin-block-start: var(--space-2);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--brand-primary);
}

.lms-feature__text {
  margin-block-start: var(--space-1);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--text-body);
}