/* build/css/tokens.css */
/**
 * Do not edit directly, this file was auto-generated.
 */

:root {
  --color-brand-red: #d6001c; /** Primary. PANTONE 2035 C. Focal point of all communications. */
  --color-brand-gold: #ffcd00; /** Primary. PANTONE 116 C. Fails contrast as text on white. */
  --color-brand-light-orange: #ffa300; /** Secondary. PANTONE 137 C. */
  --color-brand-dark-orange: #ff671f; /** Secondary. PANTONE 165 C. */
  --color-brand-rubine: #ed0a72; /** Secondary. PANTONE Rubine Red C. */
  --color-brand-berry: #9c0534; /** Secondary. PANTONE 1945 C. */
  --color-reference-arts-elevate-orange: #ff7b1f; /** Observed on the live Arts How to Apply page on 2026-09-23 (its Elevate banner and orange accents). It is UCWS's dark orange band, the same value as color.web.dark-orange, not color.brand.dark-orange: the banner itself now uses uc-bg--dark-orange, and only the page's border and icon accents still use this reference value, until Brand confirms its status. */
  --color-accent-teal: #47a67c; /** PANTONE 2400 C. */
  --color-accent-light-yellow: #fff68d; /** PANTONE 100 C. Matches UC_Palette_RGB.ase; brand site HEX (#FFE57B) disagrees with its own RGB. */
  --color-accent-brown: #6c3302; /** PANTONE 7602 C. */
  --color-accent-taupe: #d3ac8b; /** PANTONE 2311 C. */
  --color-neutral-black: #000000;
  --color-neutral-ink: #2d2d2d; /** UCWS text on light bands (orange, grey, tints). Not in the brand palette file. */
  --color-neutral-charcoal: #3d3d3d; /** UCWS body text colour. Not in the brand palette file; added to match the live site (10.86:1 on white). TODO: confirm with brand. */
  --color-neutral-dark-grey: #6d6e71;
  --color-neutral-grey-500: #8d8d8d; /** UCWS disabled and muted accents. Disabled text, large text and decoration only (3.3:1 on white). */
  --color-neutral-grey-400: #c0c0c0; /** UCWS info shim line, credit icon. Decorative only (1.82:1). */
  --color-neutral-light-grey: #c7c8ca;
  --color-neutral-grey-300: #d8d8d8; /** UCWS outlines and dividers. Decorative only (1.43:1). */
  --color-neutral-grey-200: #e5e5e5; /** UCWS table stripes. */
  --color-neutral-grey-100: #ececec; /** UCWS inverted button fill on dark bands; disabled backgrounds. */
  --color-neutral-off-white: #f4f4f4; /** UCWS card, footer and grey-band background. Not in the brand palette file; added to match the live site. TODO: confirm with brand. */
  --color-neutral-white: #ffffff;
  --color-web-red-bright: #ee0e2c; /** UCWS hover for links and buttons. White on it is 4.44:1 (fails for normal text), so the design system doesn't use it for text or text-bearing fills. */
  --color-web-rubine: #ce0058; /** UCWS rubine band. White text 5.58:1 (brand rubine gives only 4.30). */
  --color-web-dark-orange: #ff7b1f; /** UCWS dark orange band. Ink text 5.32:1. */
  --color-web-chocolate: #6b3529; /** UCWS 'chocolate' band (close to brand brown). White text 9.69:1. Also its accent icons on dark orange bands. */
  --color-web-dark-gold: #614e00; /** UCWS accent icons on light orange bands (4.04:1 on light orange). */
  --color-web-pale-pink: #ffadad; /** UCWS accent icons on red bands (3.05:1 on red). */
  --color-web-pale-berry: #ea7b8a; /** UCWS accent icons on berry bands (3.10:1 on berry). */
  --color-web-pale-rubine: #ffa3c9; /** UCWS accent icons on rubine bands (3.01:1 on web rubine). */
  --color-web-pale-chocolate: #ca7d68; /** UCWS accent icons on chocolate bands (3.07:1 on web chocolate). */
  --color-web-red-light: #ff4242; /** Light end of the UCWS grad5 banner gradient. */
  --color-web-berry-light: #dd213d; /** Light end of the UCWS grad6 banner gradient. */
  --color-web-rubine-light: #ff368b; /** Light end of the UCWS grad7 banner gradient. */
  --color-web-brown-light: #b85a41; /** Light end of the UCWS grad10 banner gradient. */
  --color-web-scrim-dark: rgba(0, 0, 0, 0.65); /** 65% black, behind light text on photos (UCWS banners). */
  --color-web-scrim-light: rgba(255, 255, 255, 0.95); /** 95% white, the backdrop of UCWS's image lightbox. */
  --color-web-divider-on-berry: #ce829a; /** UCWS separator between the links in the header's Faculty Websites list (white at 50% over berry). Decorative. */
  --color-web-faculty-grey: #5d5d5d; /** UCWS grey for a department's parent faculty in the header. 6.59:1 on white. */
  --color-tint-berry: #f6ebed;
  --color-tint-dark-orange: #fff2e9;
  --color-tint-light-orange: #fff6e7;
  --color-tint-taupe: #fbf8f5;
  --color-tint-teal: #f4faf7;
  --color-tint-green: #e7f6ef; /** Success message background. */
  --font-family-sans: 'Proxima Nova', proxima-nova, Arial, Helvetica, sans-serif; /** Official web typeface. Headings h2-h4, body, UI. 'Proxima Nova' first: a licensed local install (all weights, e.g. Adobe Creative Cloud) or ucalgary.ca's self-hosted copy; then the team's Adobe Fonts kit 'proxima-nova' (400 and 700 only). */
  --font-family-slab: museo-slab, 'Museo Slab', Georgia, serif; /** Official web typeface. h1 only. Loaded from the team's Adobe Fonts kit as 'museo-slab' (bold), like ucalgary.ca. */
  --font-weight-regular: 400; /** Body text. */
  --font-weight-medium: 500; /** Light emphasis. */
  --font-weight-semibold: 600; /** h2-h4, links, buttons. */
  --font-weight-bold: 700; /** h1 (Museo Slab is only available in bold). */
  --font-size-h1-base: 2.5rem;
  --font-size-h1-md: 2.8125rem;
  --font-size-h2-base: 1.875rem;
  --font-size-h2-md: 2.125rem;
  --font-size-h3-base: 1.25rem;
  --font-size-h3-md: 1.5625rem;
  --font-size-h4-base: 1.125rem;
  --font-size-h4-md: 1.1875rem;
  --font-size-body: 1rem;
  --font-size-callout: 1.375rem; /** Observed application-deadline callout on Faculty of Arts How to Apply, 2026-09-23. */
  --font-size-small: 0.875rem; /** Captions and meta text only. */
  --font-size-xs: 0.75rem; /** Footer, legal text, the header quick links and the header's partner statement only. Matches UCWS. Never for body copy. */
  --font-size-unit-name: 1.25rem; /** Unit name under the header logo, and a department's parent faculty beside it. Matches UCWS. */
  --font-size-lead: 1.375rem; /** Info shim and short lead lines. Matches UCWS. */
  --font-size-intro: 1.25rem; /** Hero intro paragraph. Matches UCWS. */
  --font-size-date: 2rem; /** Day number in event date badges. Matches UCWS. */
  --font-size-step-number: 3.125rem; /** Step numbers in the Checklist block. Matches UCWS. */
  --font-size-sub-section-number: 3rem; /** Sub-section numbers in the Accordion block, on font.line-height.solid. Matches UCWS (36pt). */
  --font-size-small-title: 1.09375rem; /** Small titles: event titles in Events, sub-section headings in the Accordion and the unit's title in the footer. Matches UCWS (1.094rem). */
  --font-size-control-lg: 1.125rem; /** Buttons in every Hero CTA variant. Matches UCWS (other buttons use font.size.body). */
  --font-size-pager-gap: 2.375rem; /** The Pager's gap, where page numbers are left out: three large bold dots. Matches UCWS (38px bold). */
  --font-line-height-h1-base: 3.125rem;
  --font-line-height-h1-md: 3.375rem;
  --font-line-height-h2-base: 2.4375rem;
  --font-line-height-h2-md: 2.75rem;
  --font-line-height-h3-base: 1.875rem;
  --font-line-height-h3-md: 2.0625rem;
  --font-line-height-h4-base: 1.75rem;
  --font-line-height-h4-md: 1.75rem;
  --font-line-height-body: 1.625rem; /** Also used for small text. */
  --font-line-height-callout: 1.625rem; /** Observed line height for the Arts Co-op deadline callout, 2026-09-23. */
  --font-line-height-link: 1.55em; /** Links in the page's blocks and in the footer's link lists: 1.55 times the link's own font size, as UCWS (24.8px on 16px text, 29.5px on a 19px news title). Buttons keep font.line-height.control. */
  --font-line-height-control: 1.4286em; /** Buttons: 1.4286 times the button's text size, as UCWS (22.86px on 16px text, 25.71px on 18px hero buttons). UCWS buttons have 15px padding (52.8px tall, 55.7px in a hero); ours have space.4 (2px taller), balanced by band padding (space.12, UCWS 50px). */
  --font-line-height-xs: 1.125rem; /** Pairs with font.size.xs. */
  --font-line-height-acknowledgement: 1.0625rem; /** The land acknowledgement's lines in the footer, at font.size.xs. Matches UCWS (1.063rem). */
  --font-line-height-unit-name: 1.375rem; /** Pairs with font.size.unit-name: the unit's name and a department's parent faculty in the header. Matches UCWS. */
  --font-line-height-small-title: 1.5rem; /** Pairs with font.size.small-title where the title isn't a link (the footer's unit title, Accordion sub-section headings). Matches UCWS (1.5rem). Event titles are links: font.line-height.link. */
  --font-line-height-step-number: 2.1875rem; /** Pairs with font.size.step-number: the number's line is shorter than the number, as UCWS. */
  --font-line-height-solid: 1; /** A line exactly as tall as the text: a partner unit's name and statement in the header, and Accordion sub-section numbers, as UCWS. */
  --font-line-height-quote-base: 1.5rem;
  --font-line-height-quote-md: 2rem;
  --font-line-height-lead: 1.625rem; /** Pairs with font.size.lead. Matches UCWS. */
  --font-line-height-intro: 1.875rem; /** Pairs with font.size.intro. */
  --font-letter-spacing-label: 0.125rem; /** Uppercase eyebrow labels only. Matches UCWS. */
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px; /** Main UCWS step: heading sizes change; 33/66, 66/33 and 33/33/33 go side by side. */
  --breakpoint-lg: 992px; /** Most-used UCWS breakpoint: 50/50, 25/75 and four-column layouts reach full width. */
  --breakpoint-xl: 1200px;
  --breakpoint-xxl: 1400px;
  --breakpoint-wide: 1500px; /** Hero and banner image ratios switch here. Matches UCWS. */
  --layout-columns: 12; /** UCWS page grid. */
  --layout-container-max-width: 1170px; /** Max width of header, footer and page content in UCWS. */
  --layout-block-max-width: 1500px; /** Widest a block gets unless it is full bleed: the mini image hero, image banners whose photo is below full-bleed size, and every block on a page that doesn't start with a full-bleed hero. Wider screens show the page's background beside it. The same width as breakpoint.wide. Matches UCWS. */
  --layout-hero-height: 600px; /** Hero CTA height from breakpoint.md up. Matches UCWS. */
  --layout-hero-standalone-image-height: 500px; /** Image height in the stand-alone Hero CTA (the photo is cropped to it). Matches UCWS. */
  --layout-hero-split-text-width: 420px; /** Split Hero CTA: widest the title, intro and buttons get in the panel, from breakpoint.md. Matches UCWS. */
  --layout-hero-panel-inset: 100px; /** Mini image hero: the white panel's distance from the side of the hero, from breakpoint.lg. Matches UCWS. */
  --layout-hero-panel-overlap-base: 44px; /** Mini image hero below breakpoint.lg: how far the panel (under the photo) overlaps it. Matches UCWS. */
  --layout-hero-panel-overlap-lg: 79px; /** Mini image hero with the panel below the photo (uc-hero-mini--below), from breakpoint.lg. Matches UCWS. */
  --layout-hero-title-padding: 45px; /** Space above and below the title in the text Hero CTA (the title band) from breakpoint.md. Matches UCWS. */
  --layout-hero-title-height: 135px; /** Observed title-band height on Faculty of Arts How to Apply at 375px, 2026-09-23. Reference-page measurement, not yet confirmed as a theme-wide rule. */
  --layout-hero-title-gap: 50px; /** Observed gap below title band on Faculty of Arts How to Apply at 375px, 2026-09-23. Reference-page measurement, not yet confirmed as a theme-wide rule. */
  --layout-banner-min-height-short: 300px; /** Short image banner from breakpoint.lg. Matches UCWS. */
  --layout-banner-min-height-tall: 600px; /** Tall image banner from breakpoint.lg. Matches UCWS. */
  --layout-banner-min-height-short-xl: 384px; /** Short image banner from breakpoint.xl on a page that doesn't start with a full-bleed hero: UCWS shows the 1920x384 photo file at its own height there ('full-bleed-ready'). */
  --layout-banner-min-height-tall-xl: 768px; /** Tall image banner from breakpoint.xl on a page that doesn't start with a full-bleed hero (the 1920x768 file). Matches UCWS. */
  --layout-banner-text-width: 550px; /** Banner text column on image, centred and half-width banners. Matches UCWS. */
  --layout-related-height: 380px; /** Related content card height from breakpoint.xl. Matches UCWS. */
  --layout-more-info-two-column-width: 400px; /** More information shows two columns once the block itself is this wide, on screens from breakpoint.md: a 50% region is at least 464px wide, a 33% region at most 358px. UCWS: two columns in 100, 75, 66 and 50% regions, one in 33 and 25%. Used in a container query, as the breakpoints are in media queries. */
  --layout-sidekick-content-width: 575px; /** Width of the Sidekick's text box (at most; narrower where its column is). Matches UCWS. */
  --layout-form-field-width: 555px; /** Widest a form field runs (its label, help and error text too). Matches UCWS webforms. */
  --layout-lightbox-photo-max-width: 80vw; /** Widest a photo shows in the Lightbox: 80% of the window's width, and never wider than its file. Matches UCWS. */
  --layout-lightbox-photo-max-height: 80vh; /** Tallest a photo shows in the Lightbox: 80% of the window's height, less the space UCWS leaves above the photo (space.6 here, 25px there). Matches UCWS. */
  --layout-image-text-min-height: 400px; /** Least height of the Image with text box from breakpoint.lg (the photo fills its half, cropped). Matches UCWS. */
  --layout-thumbnail-image-width: 160px; /** Width of a Thumbnail photo where the sections go two a row (a full-width block from breakpoint.md). Matches UCWS at 1440 (15% of the window, 115 to 160px). */
  --layout-thumbnail-image-width-narrow: 85px; /** Width of a Thumbnail photo where the sections go one a row: in a 75%, 66% or 50% column, and on small screens. Matches UCWS. */
  --layout-masonry-large: 370px; /** Masonry gallery group: width of the first column (the large portrait, as tall as the group). Matches UCWS. */
  --layout-masonry-medium: 270px; /** Masonry gallery group: width of the second column (the medium portrait). Matches UCWS. */
  --layout-masonry-small: 175px; /** Masonry gallery group: width of the third column (the squares) and height of each of its three rows. Matches UCWS. */
  --layout-masonry-intro-width: 561px; /** Widest the Masonry gallery's centred description runs. Matches UCWS. */
  --layout-masonry-progress-width: 500px; /** Width of the Masonry gallery's scroll indicator (at most). Matches UCWS. */
  --layout-masonry-progress-height: 6px; /** Height of the Masonry gallery's scroll indicator. Matches UCWS. */
  --layout-page-filter-filters-width: 309px; /** Width of the Page filter's filters column (keywords, tag dropdowns, Filter and Reset) from breakpoint.lg; the results take the rest. Matches UCWS. */
  --layout-page-filter-tile-bar: 8px; /** Height of the gradient bar along the top of a Page filter tile. Matches UCWS. */
  --layout-testimonial-image-height: 300px; /** Photo height in the 50/50 Testimonial from breakpoint.md (UCWS serves 520x300 files). Matches UCWS. */
  --layout-trio-card-width: 345px; /** Trio CTA card design: the width of each card from breakpoint.lg; the three spread across the row. Matches UCWS. */
  --layout-header-height-mobile: 57px; /** Observed mobile header height on Faculty of Arts How to Apply at 375px, 2026-09-23. Reference-page measurement, not yet confirmed as a theme-wide rule. */
  --layout-header-identity-height: 35px; /** Height of the header's identity row (the unit's name, a department's parent faculty) from breakpoint.lg. Matches UCWS; it can grow with larger text. */
  --layout-header-partner-identity-height: 60px; /** Height of a partner unit's identity row (name, statement, partner logo) from breakpoint.lg. Matches UCWS; it can grow with larger text. */
  --layout-header-partner-name-row: 30px; /** The partner unit's name row; the statement starts below it. Matches UCWS. */
  --layout-header-mega-tab-width: 264px; /** Width of the tabs column in a navigation sub-menu from breakpoint.lg. Matches UCWS. */
  --layout-header-nav-item-max-width: 250px; /** Widest a top-level navigation item gets from breakpoint.lg, so a few items don't stretch across the row. Matches UCWS. */
  --layout-text-grid-icon-gap: 30px; /** Observed gap from the building icon to the text column on Faculty of Arts How to Apply at 375px, 2026-09-23. */
  --layout-text-grid-intro-heading-gap: 25px; /** Observed gap below the text-grid heading on Faculty of Arts How to Apply at 375px, 2026-09-23. */
  --layout-text-grid-intro-paragraph-gap: 10px; /** Observed gap between the text-grid intro paragraphs on Faculty of Arts How to Apply at 375px, 2026-09-23. */
  --layout-text-grid-rule-gap: 25px; /** Observed space above and below the first text-grid divider on Faculty of Arts How to Apply at 375px, 2026-09-23. */
  --layout-text-grid-audience-rule-padding: 25px; /** Observed gap from the text-grid divider to its audience heading and from that heading to the audience entries, 2026-09-23. */
  --layout-text-grid-audience-item-padding: 15px; /** Observed vertical padding for each audience entry on Faculty of Arts How to Apply, 2026-09-23. */
  --layout-text-grid-audience-item-gap: 16px; /** Observed gap between audience entry headings and paragraphs on Faculty of Arts How to Apply, 2026-09-23. */
  --layout-text-grid-rule-width: 3px; /** Observed text-grid separator thickness on Faculty of Arts How to Apply, 2026-09-23. */
  --layout-text-grid-column-edge-padding: 15px; /** Observed vertical text-chunk padding on Faculty of Arts How to Apply, 2026-09-23. */
  --layout-info-shim-rule-height: 25px; /** Height of the half-circle tab that hangs from the info shim's line and holds its icon; the tab is twice as wide. Matches UCWS (every info shim, including the Arts Co-op deadline callout). */
  --layout-info-shim-text-height: 60px; /** Observed minimum text-row height in the Arts Co-op deadline callout at 375px, 2026-09-23. */
  --layout-checklist-icon-size: 35px; /** Observed checklist icon size on Faculty of Arts How to Apply, 2026-09-23. */
  --layout-checklist-text-offset: 45px; /** Observed checklist text start from the row edge on Faculty of Arts How to Apply, 2026-09-23. */
  --layout-checklist-heading-gap: 25px; /** Observed gap below the checklist title and above the step list on Faculty of Arts How to Apply, 2026-09-23. */
  --layout-checklist-item-gap: 30px; /** Observed spacing between checklist entries on Faculty of Arts How to Apply, 2026-09-23. */
  --layout-checklist-inset: 1px; /** Observed inner top and bottom inset of the checklist band on Faculty of Arts How to Apply, 2026-09-23. */
  --layout-divider-rule-space: 35px; /** Observed space above and below the divider rule on Faculty of Arts How to Apply at 375px, 2026-09-23. */
  --layout-divider-after-gap: 50px; /** Observed gap between the divider block and FAQ block on Faculty of Arts How to Apply, 2026-09-23. */
  --layout-divider-rule-width: 3px; /** Observed dotted divider thickness on Faculty of Arts How to Apply, 2026-09-23. */
  --layout-accordion-top-gap: 25px; /** Observed space between the FAQ heading and first accordion panel on Faculty of Arts How to Apply, 2026-09-23. */
  --layout-accordion-panel-padding-block: 10px; /** Observed vertical padding in FAQ accordion panels, 2026-09-23. */
  --layout-accordion-panel-padding-start: 15px; /** Observed start padding in FAQ accordion panels, 2026-09-23. */
  --layout-accordion-panel-padding-end: 5px; /** Observed end padding in FAQ accordion panels, 2026-09-23. */
  --layout-accordion-item-gap: 15px; /** Observed gap between FAQ accordion panels, 2026-09-23. */
  --layout-accordion-section-gap: 30px; /** An open section: the space above and below its content, between its parts (description, sub-sections, button) and between rows of sub-sections. Matches UCWS (15px padding plus 15px margins; 30px between parts). */
  --layout-accordion-section-padding-inline: 15px; /** Space either side of an open section's content. Matches UCWS. */
  --layout-accordion-sub-section-gap: 15px; /** Space either side of the rule between sub-sections (border.width.thick in color.border.berry). Matches UCWS. */
  --layout-accordion-single-line-trigger-height: 52px; /** Observed mobile panel-trigger height for one-line FAQ titles before the outer border, 2026-09-23. */
  --layout-accordion-minimal-row-height: 50px; /** Height of an Accordion (Minimal) item's question row, not counting its rule. Matches UCWS (10px above a 32px row, 8px below). */
  --z-index-dropdown: 1000;
  --z-index-sticky: 1020;
  --z-index-fixed: 1030;
  --z-index-backdrop: 1050;
  --z-index-modal: 1055;
  --z-index-message: 1965;
  --z-index-header: 1966;
  --z-index-skip-link: 1967;
  --aspect-ratio-hero: 5 / 4; /** Hero CTA split image. */
  --aspect-ratio-hero-mini: 5 / 2; /** Mini image hero photo below breakpoint.lg (the 1500x600 file); from breakpoint.lg it is layout.hero.height tall. Matches UCWS. */
  --aspect-ratio-banner-short: 5 / 1; /** Short banner images: image-only banners at every width, and from breakpoint.wide the least height of a short image banner on a page with a full-bleed hero (20% of the width). Matches UCWS. */
  --aspect-ratio-banner-tall: 5 / 2; /** Tall image banners: from breakpoint.wide their least height on a page with a full-bleed hero (40% of the width). Matches UCWS. */
  --aspect-ratio-sidekick-tall: 15 / 8; /** Sidekick CTA, default design, taller option (uc-sidekick--tall): the block takes the shape of the 1500x800 photo from breakpoint.lg, 768px at 1440. Matches UCWS (its default design without the full-bleed option). */
  --aspect-ratio-video: 16 / 9; /** Streaming media. */
  --aspect-ratio-gallery: 4 / 3; /** Image gallery. */
  --aspect-ratio-news: 16 / 9; /** News feed images, cropped to fill (object-fit: cover). Matches UCWS: the news image files are 554x258, but UCWS crops them to 16:9. */
  --aspect-ratio-thumbnail: 32 / 45; /** Thumbnail block images. Matches UCWS. */
  --aspect-ratio-news-featured: 554 / 258; /** The featured (first, full-width) News item's image: UCWS shows the news file at its own shape there, not cropped to 16:9. */
  --aspect-ratio-trio: 23 / 18; /** Trio CTA card design images (345x270 files). Matches UCWS. */
  --motion-duration-instant: 150ms; /** Form field focus. */
  --motion-duration-fast: 250ms; /** Card hover scale, menu toggle. */
  --motion-duration-medium: 300ms; /** Link underline grow. */
  --motion-duration-slow: 500ms; /** Button fills, band backgrounds, icon rotation. UCWS default. */
  --motion-easing-standard: cubic-bezier(0.25, 0.1, 0.25, 1); /** CSS 'ease'. UCWS default. */
  --motion-easing-emphasized: cubic-bezier(0.42, 0, 0.58, 1); /** CSS 'ease-in-out'. Hover scale, menus. */
  --motion-scale-hover-sm: 1.02; /** Cards, trio, image links, gallery on hover. */
  --motion-scale-hover-lg: 1.05; /** Masonry gallery on hover. */
  --border-width-thin: 1px; /** Inputs, dividers, tables. */
  --border-width-thick: 2px; /** Outline (ghost) buttons, emphasis borders. */
  --border-width-accent: 3px; /** Dotted dividers and the testimonial rule (accent lines). Between thick and heavy. Matches UCWS. */
  --border-width-heavy: 4px; /** Active navigation indicator, quote rule. Matches UCWS. */
  --border-width-rule: 6px; /** Source rule beside "In the news" items in News. Matches UCWS. */
  --border-width-bar: 7px; /** Red brand bar at the top of the header. Matches UCWS (the footer's bar is border.width.footer-bar). */
  --border-width-footer-bar: 6px; /** Red brand bar at the top of the footer. Matches UCWS (thinner than the header's border.width.bar). */
  --focus-ring-width: 3px; /** Focus outline width. Matches UCWS buttons. */
  --focus-ring-offset: 3px; /** Gap between element and focus outline. Matches UCWS buttons. */
  --opacity-disabled: 0.65; /** Disabled controls. WCAG exempts disabled controls from contrast, but they must still look disabled. Matches UCWS (0.65). */
  --opacity-idle-icon: 0.2; /** Decorative icons that show a control's available state, e.g. the sort arrows on a table column that isn't sorted. Matches UCWS (0.2). */
  --radius-none: 0px; /** Images, full-bleed blocks, banners. */
  --radius-sm: 4px; /** Checkboxes, small controls. */
  --radius-md: 8px; /** Cards, inputs, search field. UCWS default. */
  --radius-lg: 20px; /** Rounded band corners below breakpoint.xl. Matches UCWS. */
  --radius-xl: 50px; /** Rounded band corners from breakpoint.xl. Matches UCWS. */
  --radius-chip: 15px; /** Chips (tags and filters). Matches UCWS search bubbles. */
  --radius-pill: 9999px; /** Buttons (UCWS buttons are fully rounded). */
  --radius-circle: 50%; /** Radio buttons, avatars, round icon buttons. */
  --shadow-sm: 0px 0px 15px 0px #00000040; /** Soft dark glow behind buttons on photos, where the text is light (image banners and the overlay Hero CTA). Matches UCWS (.light .btn box-shadow: in UCWS light and dark name the text colour). */
  --shadow-md: 0px 8px 16px 0px #00000026; /** Raised surfaces: dropdown menus, popovers. */
  --shadow-sm-light: 0px 0px 15px 0px #FFFFFF40; /** Soft light glow behind buttons where dark text sits on a light photo overlay (UCWS .dark .btn box-shadow). That dark-text option isn't built, so nothing uses it yet. */
  --shadow-header: 0px 10px 15px 0px #3D3D3D1A; /** Sticky header when scrolled. Matches UCWS. */
  --shadow-hover: 0px 0px 20px 0px #0000002D; /** Event card hover. Matches UCWS (news items don't change on hover). */
  --shadow-inset-pressed: inset 0px 0px 15px 0px #2D2D2D40; /** Pressed and focused buttons. Matches UCWS. */
  --shadow-text-glow: 0px 0px 15px #000000; /** Text shadow behind light text on photos. Matches UCWS (0 0 15px black). No spread, so it works as text-shadow. */
  --size-touch-target: 44px; /** Minimum height and width of any clickable or tappable element. */
  --size-logo-height-base: 62px; /** Header logo below breakpoint.lg. Matches UCWS. */
  --size-logo-height-lg: 88px; /** Header logo from breakpoint.lg. Matches UCWS. TODO: check against brand logo minimum-size rules. */
  --size-logo-height-partner-base: 35px; /** Partner logo in the header of a partner unit (e.g. Alberta Health Services on Cumming School of Medicine departments), below breakpoint.lg. Matches UCWS. */
  --size-logo-height-partner-lg: 45px; /** Partner logo in the header from breakpoint.lg. Matches UCWS. */
  --size-quote-mark-base: 27px; /** Testimonial quote mark box below breakpoint.md (a square; the mark is 27x22, as UCWS). */
  --size-quote-mark-md: 49px; /** Testimonial quote mark box from breakpoint.md (a square; the mark is 49x40, as UCWS's 40px glyph). */
  --size-footer-logo: 175px; /** A unit's own logo in the footer, in place of the help icon (e.g. the Schulich School of Engineering; its height follows the file). Matches UCWS. */
  --size-field-height: 48px; /** Height of a text field, dropdown or search field (at least). Matches UCWS webforms. */
  --size-choice: 20px; /** A checkbox's box and a radio button's circle. Matches UCWS webforms (1.25rem). Its row still reaches size.touch-target. */
  --size-page-button: 26px; /** A table's round page buttons (numbers, previous, next). Matches UCWS. Their clickable area still reaches size.touch-target. */
  --size-media-control: 60px; /** Round previous and next buttons for photos: in the Lightbox, and beside the Masonry gallery's strip. Matches UCWS. */
  --size-icon-xs: 14px; /** Inline external-link and mailto icons. */
  --size-icon-sm: 16px; /** Event and news metadata. */
  --size-icon-md: 20px; /** Navigation chevrons, info shim, default. */
  --size-icon-lg: 25px; /** Button arrows. */
  --size-icon-xl: 32px; /** Accordion, close, social icons. */
  --size-icon-2xl: 35px; /** More information and checklist icons. */
  --size-icon-3xl: 56px; /** Text grid icons. */
  --size-avatar-sm: 60px; /** Testimonial portrait. Matches UCWS. */
  --size-avatar-lg: 200px; /** Trio CTA circle image. Matches UCWS. */
  --size-date-badge: 96px; /** Width of the Events date badge. Matches UCWS. */
  --space-0: 0px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px; /** UCWS gutter half-width (15px). */
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px; /** UCWS column gutter (30px). */
  --space-10: 40px; /** UCWS button horizontal padding. */
  --space-12: 48px; /** UCWS space between blocks (50px). */
  --space-14: 56px; /** Mini image hero panel padding from breakpoint.lg (UCWS 55px). */
  --space-15: 60px; /** Card padding. Matches UCWS (60px). */
  --space-16: 64px;
  --space-18: 72px; /** Image with text panel padding (UCWS 75px). */
  --space-24: 96px;
  --color-text-default: var(--color-neutral-charcoal); /** Body text and headings. Matches UCWS (10.86:1 on white, 9.88:1 on color.background.subtle). */
  --color-text-muted: var(--color-neutral-dark-grey);
  --color-text-inverse: var(--color-neutral-white);
  --color-text-on-primary: var(--color-neutral-white); /** Text on color.action.primary (~5.4:1). */
  --color-text-on-light: var(--color-neutral-ink); /** Text and links on light bands: light and dark orange, grey (subtle), tints. 12.52:1 on subtle, 6.88:1 on light orange, 5.32:1 on dark orange (web). Matches UCWS. */
  --color-text-on-inverse-action: var(--color-brand-red); /** Text on color.action.inverse (4.59:1). */
  --color-text-accent: var(--color-brand-red); /** Red headings that aren't links: Trio CTA titles, as UCWS ('red' headings). 5.42:1 on white. Not for body text. */
  --color-text-accordion: var(--color-brand-berry); /** Questions in the bordered accordion (FAQ) and its sub-section numbers, as UCWS. 8.45:1 on white. */
  --color-text-chip: var(--color-brand-berry); /** Chip text on color.background.chip (7.25:1), as UCWS search bubbles. */
  --color-text-parent-unit: var(--color-web-faculty-grey); /** A department's parent faculty beside its name in the header. Matches UCWS (6.59:1 on white). */
  --color-text-lightbox-caption: var(--color-neutral-black); /** Caption, credit and link in the Lightbox, on color.overlay.scrim-light (the page shows faintly through it). Matches UCWS. */
  --color-text-disabled: var(--color-neutral-grey-500); /** Disabled controls only (exempt from contrast rules). */
  --color-text-on-accent: var(--color-neutral-charcoal); /** Text on gold (7.23:1). */
  --color-background-default: var(--color-neutral-white);
  --color-background-subtle: var(--color-neutral-off-white); /** Cards, footer (surface: color.text.default, red links) and grey bands (uc-bg--subtle: color.text.on-light, links inherit). UCWS 'grey-back'. */
  --color-background-chip: var(--color-tint-berry); /** Chips (tags, link chips, removable chips), with color.text.chip. Matches UCWS search bubbles. */
  --color-background-media-control: var(--color-web-faculty-grey); /** Round previous and next buttons for photos (Lightbox, Masonry gallery), with white chevrons (6.59:1; the circle is 6.59:1 on white). Also the Masonry gallery's scroll indicator. Matches UCWS. */
  --color-background-accordion-open: var(--color-brand-berry); /** An open section's tab in the bordered accordion, with color.text.inverse (8.45:1). Matches UCWS. */
  --color-background-red: var(--color-brand-red); /** Block background option. Text: color.text.inverse (5.42:1). Matches UCWS. */
  --color-background-rubine: var(--color-web-rubine); /** Block background option. Text: color.text.inverse (5.58:1). Matches UCWS. */
  --color-background-berry: var(--color-brand-berry); /** Block background option. Text: color.text.inverse (8.45:1). Matches UCWS. */
  --color-background-chocolate: var(--color-web-chocolate); /** Block background option. Text: color.text.inverse (9.69:1). Matches UCWS. */
  --color-background-dark-orange: var(--color-web-dark-orange); /** Block background option. Text: color.text.on-light (5.32:1). Matches UCWS. */
  --color-background-light-orange: var(--color-brand-light-orange); /** Block background option (UCWS 'light-orange-back'). Text: color.text.on-light (6.88:1). Matches UCWS. */
  --color-background-berry-tint: var(--color-tint-berry); /** Block background option. Text: color.text.on-light. */
  --color-background-dark-orange-tint: var(--color-tint-dark-orange); /** Block background option. Text: color.text.on-light. */
  --color-background-light-orange-tint: var(--color-tint-light-orange); /** Block background option. Text: color.text.on-light. */
  --color-background-taupe-tint: var(--color-tint-taupe); /** Block background option. Text: color.text.on-light. */
  --color-background-teal-tint: var(--color-tint-teal); /** Block background option. Text: color.text.on-light. */
  --color-background-accent: var(--color-brand-gold);
  --color-background-disabled: var(--color-neutral-grey-100); /** Disabled control fill. */
  --color-background-inverse: var(--color-neutral-black);
  --color-border-default: var(--color-neutral-grey-300); /** Decorative dividers and outlines only (1.43:1 on white). Matches UCWS. */
  --color-border-strong: var(--color-neutral-dark-grey); /** Input borders (meets 3:1). */
  --color-border-accordion: var(--color-neutral-grey-500); /** Rules between Accordion (Minimal) items. Decorative (3.3:1 on white). Matches UCWS. */
  --color-border-on-berry: var(--color-web-divider-on-berry); /** Separators inside berry panels (header Faculty Websites list). Decorative. Matches UCWS. */
  --color-border-arts-orange: var(--color-reference-arts-elevate-orange); /** Orange accents observed on the Arts How to Apply page; reference-only until confirmed by Brand. */
  --color-border-berry: var(--color-brand-berry); /** The bordered accordion: each section's tab and the rules between sub-sections. Matches UCWS. */
  --color-action-primary: var(--color-brand-red);
  --color-action-selected: var(--color-brand-berry); /** Checked checkboxes and radio buttons, and a hovered field's border, as UCWS webforms (white tick 8.45:1; berry on white 8.45:1). Also pressed icon buttons and filter chips that are on (white text), and the outline of chips that are buttons. */
  --color-action-primary-hover: var(--color-brand-berry); /** Hover/pressed fill for primary actions (white text 8.45:1). UCWS uses color.web.red-bright, which fails with white text (4.44:1). */
  --color-action-inverse: var(--color-neutral-grey-100); /** Primary button fill on red, rubine, berry and chocolate bands, with color.text.on-inverse-action. Matches UCWS. */
  --color-focus-ring: var(--color-neutral-charcoal); /** Default focus outline (10.86:1 on white). Matches UCWS. */
  --color-focus-ring-on-dark: var(--color-neutral-white); /** Focus outline on red, rubine, berry, chocolate bands and dark gradients. Matches UCWS. */
  --color-focus-ring-on-light: var(--color-neutral-ink); /** Focus outline on light bands: orange, grey, tints and the light gradients (UCWS uses it on orange and grey; the default ring elsewhere). 9.3:1 or better on every light band. */
  --color-icon-accent: var(--color-brand-rubine); /** Decorative accent icons (UCWS info shim). 4.30:1 on white, meets 3:1 for graphics only. Added for reference page arts-award-winning-scholarship; confirm. */
  --color-icon-control: var(--color-brand-red); /** Chevrons and other control icons on white and subtle backgrounds (5.42 / 4.93:1). Band classes swap it for the band text colour so it stays at least 3:1. */
  --color-icon-credit: var(--color-neutral-grey-400); /** The camera icon before an Image's credit. Decorative (1.82:1 on white): the credit's own words say what it is. Matches UCWS. */
  --color-icon-arts-orange: var(--color-reference-arts-elevate-orange); /** Icon colour observed on the Arts How to Apply text grid and deadline shim; reference-only until confirmed by Brand. */
  --color-icon-accent-on-light-orange: var(--color-web-dark-gold); /** Accent icons (More information icons, Checklist check marks) on light orange bands. Decorative (4.04:1). Matches UCWS. */
  --color-icon-accent-on-dark-orange: var(--color-web-chocolate); /** Accent icons on dark orange bands. Decorative (3.74:1). Matches UCWS. */
  --color-icon-accent-on-berry: var(--color-web-pale-berry); /** More information icons on berry bands. Decorative (3.10:1). Matches UCWS. */
  --color-icon-accent-on-rubine: var(--color-web-pale-rubine); /** More information icons on rubine bands. Decorative (3.01:1). Matches UCWS. */
  --color-icon-accent-on-chocolate: var(--color-web-pale-chocolate); /** More information icons on chocolate bands. Decorative (3.07:1). Matches UCWS. */
  --color-icon-accent-on-subtle: var(--color-neutral-grey-500); /** More information icons on the light grey band. Decorative (3.02:1). Matches UCWS. */
  --color-icon-accent-on-berry-tint: var(--color-brand-berry); /** More information icons on the berry tint band. Decorative (7.25:1). Matches UCWS. */
  --color-icon-accent-on-dark-orange-tint: var(--color-web-dark-orange); /** More information icons on the dark orange tint band. Decorative (2.36:1). Matches UCWS. */
  --color-icon-accent-on-light-orange-tint: var(--color-brand-light-orange); /** More information icons on the light orange tint band. Decorative (1.87:1). Matches UCWS. */
  --color-icon-accent-on-taupe-tint: var(--color-accent-taupe); /** More information icons on the taupe tint band. Decorative (1.98:1). Matches UCWS. */
  --color-icon-accent-on-teal-tint: var(--color-accent-teal); /** More information icons on the teal tint band. Decorative (2.83:1). Matches UCWS. */
  --color-icon-accent-on-red: var(--color-web-pale-pink); /** Accent icons on red bands. Decorative (3.05:1). Matches UCWS. */
  --color-gradient-red-orange-horizontal: linear-gradient(to right, var(--color-brand-red), var(--color-brand-dark-orange)); /** The bar along the top of a Page filter tile (decorative, no text on it). Matches UCWS, which starts it at #D7011F; this system uses brand red. */
  --color-gradient-red-orange: linear-gradient(to bottom right, var(--color-brand-red), var(--color-brand-dark-orange)); /** UCWS grad1 (hero). White text only on the red end: the orange end is 2.91:1. UCWS starts it at #D7011F; this system uses brand red. */
  --color-gradient-berry-rubine: linear-gradient(to bottom right, var(--color-brand-berry), var(--color-brand-rubine)); /** UCWS grad2 (hero). White text: large only at the rubine end (4.30:1). */
  --color-gradient-red-rubine: linear-gradient(to bottom right, var(--color-brand-red), var(--color-brand-rubine)); /** UCWS grad3 (hero). UCWS starts it at #D7011F; this system uses brand red. */
  --color-gradient-rubine-red-orange: linear-gradient(to bottom right, var(--color-brand-rubine), var(--color-brand-red), var(--color-brand-dark-orange)); /** UCWS grad4 (hero). UCWS starts it at #D7011F; this system uses brand red. */
  --color-gradient-red-light: linear-gradient(to right, var(--color-brand-red), var(--color-web-red-light)); /** UCWS grad5 (banner). White text: large only at the light end (3.44:1). UCWS starts it at #D7011F; this system uses brand red. */
  --color-gradient-berry-light: linear-gradient(to right, var(--color-brand-berry), var(--color-web-berry-light)); /** UCWS grad6 (banner). */
  --color-gradient-rubine-light: linear-gradient(to right, var(--color-brand-rubine), var(--color-web-rubine-light)); /** UCWS grad7 (banner). White text: large only (3.41:1 at the light end). */
  --color-gradient-orange-gold: linear-gradient(to right, var(--color-brand-light-orange), var(--color-brand-gold)); /** UCWS grad8 (banner). Text: color.text.on-light. */
  --color-gradient-dark-orange-light-orange: linear-gradient(to right, var(--color-brand-dark-orange), var(--color-brand-light-orange)); /** UCWS grad9 (banner). Text: color.text.on-light. */
  --color-gradient-brown-light: linear-gradient(to right, var(--color-accent-brown), var(--color-web-brown-light)); /** UCWS grad10 (banner). */
  --color-gradient-grad4: linear-gradient(to right bottom, var(--color-brand-rubine) 0%, var(--color-brand-red) 50%, var(--color-brand-dark-orange) 100%); /** Three-stop gradient observed on the Arts How to Apply hero (UCWS grad4-back) on 2026-09-23. White title text is shown over the band in the reference. */
  --color-link-default: var(--color-brand-red); /** Links on white and subtle backgrounds (5.42 / 4.93:1). On coloured bands links use the band's text colour. */
  --color-link-hover: var(--color-brand-berry); /** UCWS uses color.web.red-bright (4.44:1 on white, fails); berry passes (8.45:1). */
  --color-link-visited: var(--color-brand-berry); /** Matches UCWS. */
  --color-decorative-rule: var(--color-brand-red); /** Quote rules, red divider lines and accent lines. Decorative: never the only signal. */
  --color-decorative-quote: var(--color-brand-red); /** The Testimonial's quote mark and line: red on white (UCWS's default accent). Band classes swap it for the band's accent, as UCWS (.accent): the accent icon colour (pale pink on red, #614E00 on light orange), berry on the berry tint and dark orange on the dark orange tint. Decorative only. */
  --color-decorative-berry: var(--color-brand-berry); /** Divider line colour. Matches UCWS. */
  --color-decorative-rubine: var(--color-web-rubine); /** Divider line colour. Matches UCWS. */
  --color-decorative-dark-orange: var(--color-web-dark-orange); /** Divider line colour. Matches UCWS. */
  --color-decorative-light-orange: var(--color-brand-light-orange); /** Divider line colour. Matches UCWS. */
  --color-decorative-gold: var(--color-brand-gold); /** Divider line colour. Matches UCWS. */
  --color-decorative-light-grey: var(--color-neutral-grey-400); /** Divider line colour (UCWS "light-grey", used on the Science homepage), and the info shim's line and tab on every UCWS page. Grey-400, not color.neutral.light-grey. Decorative only (1.82:1). */
  --color-decorative-grey: var(--color-neutral-grey-500); /** UCWS "dark-grey" accent (dividers, icons, rules and check marks on white), and the source rule beside "In the news" items in News. Matches UCWS. Decorative only. */
  --color-decorative-chocolate: var(--color-web-chocolate); /** UCWS "chocolate" accent: dividers, icons, rules and check marks on white. Matches UCWS. Decorative only. */
  --color-decorative-green: var(--color-accent-teal); /** UCWS "green" accent (the brand's teal): dividers, icons, rules and check marks on white. Matches UCWS. Decorative only (3:1 on white). */
  --color-status-success-background: var(--color-tint-green);
  --color-status-success-icon: var(--color-accent-teal); /** Decorative (2.68:1): the message text carries the meaning. */
  --color-status-warning-background: var(--color-tint-light-orange);
  --color-status-warning-icon: var(--color-web-dark-orange); /** Decorative (2.42:1): the message text carries the meaning. */
  --color-status-error-background: var(--color-tint-berry);
  --color-status-error-icon: var(--color-brand-berry);
  --color-status-error-text: var(--color-brand-red); /** Error messages next to form fields (5.42:1). UCWS forms use Bootstrap's non-brand red. */
  --color-table-header-background: var(--color-brand-berry); /** White header text (8.45:1). Matches UCWS. */
  --color-table-header-text: var(--color-neutral-white);
  --color-table-cell-background: var(--color-neutral-off-white);
  --color-overlay-scrim-dark: var(--color-web-scrim-dark); /** 65% black behind text on photos (UCWS banners). Check text contrast over the lightest part of the image. */
  --color-overlay-scrim-light: var(--color-web-scrim-light); /** The Image gallery lightbox's backdrop, as UCWS: the page shows faintly through it. Text and controls in the lightbox keep their contrast on white. */
  --font-size-label: var(--font-size-small); /** Eyebrow labels, dates, category tags (uppercase). Matches UCWS. */
  --font-size-quote-base: var(--font-size-h3-base);
  --font-size-quote-md: var(--font-size-h3-md);
  --font-line-height-date: var(--font-line-height-body); /** Day number in event date badges: the body line height, shorter than the number, as UCWS (26px). */
  --layout-container-padding: var(--space-4); /** Side padding of the container. UCWS uses 15px. */
  --layout-gutter: var(--space-8); /** Space between columns. UCWS uses 30px. TODO: keep 4px grid or match exactly (see size.md open decisions). */
  --size-social-icon: var(--size-icon-xl); /** Circled social media icons in the footer. Matches UCWS. Their clickable area still reaches size.touch-target. */
}

/* components/base.css */
/* Base element styles. Tokens only: load build/css/tokens.css first. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-family-sans);
  font-size: var(--font-size-body);
  line-height: var(--font-line-height-body);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-default);
  background: var(--color-background-default);
}

h1,
h2,
h3,
h4 {
  margin: 0 0 var(--space-4);
  font-weight: var(--font-weight-semibold);
  overflow-wrap: anywhere; /* a long word wraps rather than widening the page (WCAG 1.4.10), even in flex and grid items */
}

h1 {
  font-family: var(--font-family-slab);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-h1-base);
  line-height: var(--font-line-height-h1-base);
}

h2 {
  font-size: var(--font-size-h2-base);
  line-height: var(--font-line-height-h2-base);
}

h3 {
  font-size: var(--font-size-h3-base);
  line-height: var(--font-line-height-h3-base);
}

h4 {
  font-size: var(--font-size-h4-base);
  line-height: var(--font-line-height-h4-base);
}

@media (min-width: 768px) { /* breakpoint.md */
  h1 {
    font-size: var(--font-size-h1-md);
    line-height: var(--font-line-height-h1-md);
  }

  h2 {
    font-size: var(--font-size-h2-md);
    line-height: var(--font-line-height-h2-md);
  }

  h3 {
    font-size: var(--font-size-h3-md);
    line-height: var(--font-line-height-h3-md);
  }

  h4 {
    font-size: var(--font-size-h4-md);
    line-height: var(--font-line-height-h4-md);
  }
}

/* Bold inside a heading keeps the heading's weight, as UCWS (the browser's default is bolder still). */
:is(h1, h2, h3, h4) :is(b, strong) {
  font-weight: inherit;
}

p {
  margin: 0 0 var(--space-4);
}

/* A word too long for its line (an email address, a URL) breaks rather than widening the page
   (WCAG 1.4.10), as headings do. Other words wrap as usual. */
p,
li {
  overflow-wrap: anywhere;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Link: semibold and underlined (fonts.md rule 4, colors.md rule 5). */
a {
  color: var(--color-link-default);
  font-weight: var(--font-weight-semibold);
  text-decoration: underline;
  text-decoration-thickness: var(--border-width-thin);
  text-underline-offset: var(--space-1);
}

a:visited {
  color: var(--color-link-visited);
}

/* Links in the page's blocks take a line height from their own font size (font.line-height.link),
   as UCWS. No specificity, so a component that sets its own line height on a link keeps it. Buttons
   keep theirs, and the header parts shown as examples in demo/blocks.html keep the header's. */
:where(main a:not(.uc-button, .uc-header__identity a)) {
  line-height: var(--font-line-height-link);
}

a:hover {
  color: var(--color-link-hover);
}

:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.uc-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.uc-skip-link {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  z-index: var(--z-index-skip-link);
  padding: var(--space-3) var(--space-4);
  background: var(--color-background-default);
  transform: translateY(-200%);
}

.uc-skip-link:focus {
  transform: none;
}

/* Reduced motion: no transitions or hover scaling (size.md → Motion). */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0s !important;
    animation-duration: 0s !important;
    scroll-behavior: auto !important;
  }
}

/* Type helpers: a heading's look is independent of its level (fonts.md rule 2). */
.uc-h1 { font-family: var(--font-family-slab); font-size: var(--font-size-h1-base); line-height: var(--font-line-height-h1-base); font-weight: var(--font-weight-bold); }
.uc-h2 { font-size: var(--font-size-h2-base); line-height: var(--font-line-height-h2-base); font-weight: var(--font-weight-semibold); }
.uc-h3 { font-size: var(--font-size-h3-base); line-height: var(--font-line-height-h3-base); font-weight: var(--font-weight-semibold); }
.uc-h4 { font-size: var(--font-size-h4-base); line-height: var(--font-line-height-h4-base); font-weight: var(--font-weight-semibold); }
/* A small heading that looks like bold body text: UCWS uses bold paragraphs for labels such as
   "Undergraduate" over a list. */
.uc-subheading { font-size: var(--font-size-body); line-height: var(--font-line-height-body); font-weight: var(--font-weight-bold); }

@media (min-width: 768px) { /* breakpoint.md */
  .uc-h1 { font-size: var(--font-size-h1-md); line-height: var(--font-line-height-h1-md); }
  .uc-h2 { font-size: var(--font-size-h2-md); line-height: var(--font-line-height-h2-md); }
  .uc-h3 { font-size: var(--font-size-h3-md); line-height: var(--font-line-height-h3-md); }
  .uc-h4 { font-size: var(--font-size-h4-md); line-height: var(--font-line-height-h4-md); }
}

/* Short uppercase label (eyebrow, category, source). */
.uc-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--font-letter-spacing-label);
  text-transform: uppercase;
}

.uc-lead {
  font-size: var(--font-size-lead);
  line-height: var(--font-line-height-lead);
}

.uc-intro {
  font-size: var(--font-size-intro);
  line-height: var(--font-line-height-intro);
  font-weight: var(--font-weight-medium);
}

/* components/layout.css */
/* Page container, block rhythm and full-bleed bands. Tokens only. */

.uc-container {
  width: 100%;
  max-width: var(--layout-container-max-width);
  margin-inline: auto;
  padding-inline: var(--layout-container-padding);
}

/* Every block is a section; blocks are always space.12 apart (size.md rule 3). */
.uc-block {
  margin-block-end: var(--space-12);
}

/* Full-width band that runs edge to edge; content inside stays in a container. */
.uc-band {
  padding-block: var(--space-12);
}

/* Rounded band, as UCWS ("roundable", rounded both ends): the band's colour carries on above and below
   the block in rounded caps (radius.lg; radius.xl from breakpoint.xl). The blocks around it leave room:
   uc-block--rounded-below on the block before (UCWS "rounded-block-below"), uc-block--rounded-above on
   the block after ("rounded-block-above"). The band sits flush on that block, which leaves the room. */
.uc-band--rounded {
  position: relative;
  margin-block-end: 0;
}

.uc-band--rounded::before,
.uc-band--rounded::after {
  position: absolute;
  inset-inline: 0;
  height: var(--radius-lg);
  background: inherit;
  content: "";
}

.uc-band--rounded::before {
  inset-block-end: 100%;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.uc-band--rounded::after {
  inset-block-start: 100%;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.uc-block--rounded-below {
  margin-block-end: 0;
  padding-block-end: calc(var(--space-12) + var(--radius-lg));
}

.uc-block--rounded-above {
  padding-block-start: calc(var(--space-12) + var(--radius-lg));
}

@media (min-width: 1200px) { /* breakpoint.xl */
  .uc-band--rounded::before,
  .uc-band--rounded::after {
    height: var(--radius-xl);
  }

  .uc-band--rounded::before {
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  }

  .uc-band--rounded::after {
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  }

  .uc-block--rounded-below {
    padding-block-end: calc(var(--space-12) + var(--radius-xl));
  }

  .uc-block--rounded-above {
    padding-block-start: calc(var(--space-12) + var(--radius-xl));
  }
}

/* Blocks that stack edge to edge with the next block (UCWS "no-bottom-margin"), e.g. banners. */
.uc-block--flush {
  margin-block-end: 0;
}

/* Wide Double Banner (UCWS layout col2-50-50-fw): two full-bleed halves from breakpoint.lg.
   Where the text column sits in each half follows the page, as in UCWS: see the rules below. */
.uc-layout-wide-double {
  display: grid;
}

@media (min-width: 992px) { /* breakpoint.lg */
  .uc-layout-wide-double {
    grid-template-columns: 1fr 1fr;
  }

  .uc-layout-wide-double > * > .uc-container {
    max-width: none;
    margin: 0;
    padding-inline: var(--space-12);
  }

  /* Where the text column sits follows the page, not the text's alignment, as UCWS. By default each half
     centres its column (layout.banner.text-width) between space.12 paddings, left-aligned text too. */
  .uc-layout-wide-double .uc-banner__content {
    width: 100%;
    max-width: var(--layout-banner-text-width);
    margin-inline: auto;
  }

  /* On a page that starts with a full-bleed hero (the overlay, split, stand-alone or text Hero CTA), both
     columns line up with the page container instead, and centred text centres inside its column.
     Each half is half the page, so 100% - max-width / 2 is the page's side margin. */
  main:has(> :is(.uc-banner--hero, .uc-hero-split, .uc-hero-standalone, .uc-hero-title)) .uc-layout-wide-double > :first-child > .uc-container {
    padding-inline-start: max(var(--layout-container-padding), calc(100% - var(--layout-container-max-width) / 2 + var(--layout-container-padding)));
  }

  main:has(> :is(.uc-banner--hero, .uc-hero-split, .uc-hero-standalone, .uc-hero-title)) .uc-layout-wide-double > :last-child > .uc-container {
    padding-inline-end: max(var(--layout-container-padding), calc(100% - var(--layout-container-max-width) / 2 + var(--layout-container-padding)));
  }

  main:has(> :is(.uc-banner--hero, .uc-hero-split, .uc-hero-standalone, .uc-hero-title)) .uc-layout-wide-double .uc-banner__content {
    margin-inline: 0;
  }

  /* UCWS gives every banner in this layout the short minimum height. */
  .uc-layout-wide-double > .uc-banner {
    min-height: var(--layout-banner-min-height-short);
  }
}

/* Page width, as UCWS. Only a page that starts with a full-bleed hero (the overlay, split, stand-alone or
   text Hero CTA) runs its full-width blocks edge to edge on every screen. On any other page (a mini image
   hero, or no hero) no block is wider than layout.block.max-width: wider screens show the page's background
   beside it. Contained blocks are narrower already; the header and the footer stay full width. */
@media (min-width: 1500px) { /* breakpoint.wide */
  main:not(:has(> :is(.uc-banner--hero, .uc-hero-split, .uc-hero-standalone, .uc-hero-title))) > :where(:not(.uc-container, .uc-visually-hidden)) {
    max-width: var(--layout-block-max-width);
    margin-inline: auto;
  }
}

/* Layout regions on the 12-column grid (layout.md → How each layout stacks).
   Markup: <div class="uc-layout uc-layout--33-66 uc-container">
             <div class="uc-layout__region"> blocks… </div>
             <div class="uc-layout__region"> blocks… </div>
           </div>
   Blocks inside a region drop their own container (the layout provides it). */
.uc-layout {
  display: grid;
  gap: var(--layout-gutter);
}

/* A region with its own background needs inner padding (the container padding is neutralised). */
.uc-layout__region--padded {
  padding: var(--space-8);
}

.uc-layout > .uc-layout__region {
  min-width: 0;
}

.uc-layout__region .uc-container {
  max-width: none;
  padding-inline: 0;
}

/* The 12-column grid starts at breakpoint.md: below it regions simply stack, so narrow
   screens never have to fit 11 gutters (WCAG 1.4.10 reflow at 320px). */
@media (min-width: 768px) { /* breakpoint.md */
  .uc-layout {
    grid-template-columns: repeat(var(--layout-columns), 1fr);
  }

  .uc-layout > .uc-layout__region {
    grid-column: span 12;
  }
}

@media (min-width: 768px) { /* breakpoint.md */
  .uc-layout--25-75 > :nth-child(1),
  .uc-layout--33-66 > :nth-child(1),
  .uc-layout--66-33 > :nth-child(2),
  .uc-layout--75-25 > :nth-child(2),
  .uc-layout--33-33-33 > .uc-layout__region {
    grid-column: span 4;
  }

  .uc-layout--25-75 > :nth-child(2),
  .uc-layout--33-66 > :nth-child(2),
  .uc-layout--66-33 > :nth-child(1),
  .uc-layout--75-25 > :nth-child(1) {
    grid-column: span 8;
  }

  .uc-layout--25-25-25-25 > .uc-layout__region,
  .uc-layout--50-25-25 > :nth-child(n + 2),
  .uc-layout--25-25-50 > :nth-child(-n + 2) {
    grid-column: span 6;
  }
}

@media (min-width: 992px) { /* breakpoint.lg */
  .uc-layout--50-50 > .uc-layout__region,
  .uc-layout--50-25-25 > :nth-child(1),
  .uc-layout--25-25-50 > :nth-child(3) {
    grid-column: span 6;
  }

  .uc-layout--25-75 > :nth-child(1),
  .uc-layout--75-25 > :nth-child(2),
  .uc-layout--25-25-25-25 > .uc-layout__region,
  .uc-layout--50-25-25 > :nth-child(n + 2),
  .uc-layout--25-25-50 > :nth-child(-n + 2) {
    grid-column: span 3;
  }

  .uc-layout--25-75 > :nth-child(2),
  .uc-layout--75-25 > :nth-child(1) {
    grid-column: span 9;
  }
}

/* Centred heading (and optional intro) at the top of a block, as on UCWS feeds and grids. */
.uc-block-header {
  margin-block-end: var(--space-12);
  text-align: center;
}

.uc-block-header > :last-child {
  margin-block-end: 0;
}

/* The row supplies the space after itself, so the last block in a region adds none. */
.uc-layout__region > :last-child {
  margin-block-end: 0;
}

/* An empty region that only holds a column (e.g. one block in the right half): hidden while
   regions stack, so it leaves no gap. Markup: <div class="uc-layout__region uc-layout__region--spacer" aria-hidden="true"></div> */
@media (max-width: 767.98px) { /* below breakpoint.md */
  .uc-layout__region--spacer {
    display: none;
  }
}

/* components/background.css */
/* Block background options (colors.md → Backgrounds and block background options).
   Each class sets the band colour plus the text, link, focus ring, primary button and accent
   icon colours that go with it, by overriding the role variables inside the band. Accent icons
   (More information icons, Checklist check marks) take the band's text colour, except on the
   three bands where UCWS gives them their own colour: light orange, dark orange and red. */

[class*="uc-bg--"] a:not(.uc-button, .uc-chip),
[class*="uc-bg--"] a:not(.uc-button, .uc-chip):visited,
[class*="uc-bg--"] a:not(.uc-button, .uc-chip):hover {
  color: inherit;
}

/* Light bands: ink text, ink focus ring, red primary button. */
.uc-bg--subtle,
.uc-bg--light-orange,
.uc-bg--dark-orange,
.uc-bg--berry-tint,
.uc-bg--dark-orange-tint,
.uc-bg--light-orange-tint,
.uc-bg--taupe-tint,
.uc-bg--teal-tint,
.uc-bg--gradient-orange-gold,
.uc-bg--gradient-dark-orange-light-orange {
  color: var(--color-text-on-light);
  --color-text-default: var(--color-text-on-light);
  --color-text-muted: var(--color-text-on-light);
  --color-focus-ring: var(--color-focus-ring-on-light);
  --color-border-strong: var(--color-text-on-light);
  --color-icon-control: var(--color-text-on-light);
  --color-icon-accent: var(--color-text-on-light);
  --color-decorative-quote: var(--color-icon-accent); /* the Testimonial's mark and line: the band's accent, as UCWS */
}

/* Dark bands: white text, white focus ring, inverted primary button.
   Gradients: white body text passes on berry-light and brown-light only. On red-orange,
   rubine-red-orange, red-light, red-rubine and berry-rubine keep white text large (a heading) and on
   the dark end; on rubine-light, large text only (colors.md → Gradients). */
.uc-bg--red,
.uc-bg--rubine,
.uc-bg--berry,
.uc-bg--chocolate,
.uc-bg--gradient-red-orange,
.uc-bg--gradient-berry-rubine,
.uc-bg--gradient-red-rubine,
.uc-bg--gradient-rubine-red-orange,
.uc-bg--gradient-red-light,
.uc-bg--gradient-berry-light,
.uc-bg--gradient-rubine-light,
.uc-bg--gradient-brown-light {
  color: var(--color-text-inverse);
  --color-text-default: var(--color-text-inverse);
  --color-text-muted: var(--color-text-inverse);
  --color-focus-ring: var(--color-focus-ring-on-dark);
  --color-border-strong: var(--color-text-inverse);
  --color-icon-control: var(--color-text-inverse);
  --color-icon-accent: var(--color-text-inverse);
  --color-decorative-quote: var(--color-icon-accent);
  --color-action-primary: var(--color-action-inverse);
  --color-text-on-primary: var(--color-text-on-inverse-action);
  --color-action-primary-hover: var(--color-background-default);
}

.uc-bg--subtle { background: var(--color-background-subtle); }
.uc-bg--light-orange { background: var(--color-background-light-orange); --color-icon-accent: var(--color-icon-accent-on-light-orange); }
.uc-bg--dark-orange { background: var(--color-background-dark-orange); --color-icon-accent: var(--color-icon-accent-on-dark-orange); }
.uc-bg--berry-tint { background: var(--color-background-berry-tint); --color-decorative-quote: var(--color-decorative-berry); }
.uc-bg--dark-orange-tint { background: var(--color-background-dark-orange-tint); --color-decorative-quote: var(--color-decorative-dark-orange); }
.uc-bg--light-orange-tint { background: var(--color-background-light-orange-tint); }
.uc-bg--taupe-tint { background: var(--color-background-taupe-tint); }
.uc-bg--teal-tint { background: var(--color-background-teal-tint); }
.uc-bg--red { background: var(--color-background-red); --color-icon-accent: var(--color-icon-accent-on-red); }
.uc-bg--rubine { background: var(--color-background-rubine); }
.uc-bg--berry { background: var(--color-background-berry); }
.uc-bg--chocolate { background: var(--color-background-chocolate); }
.uc-bg--gradient-red-orange { background: var(--color-gradient-red-orange); }
.uc-bg--gradient-berry-rubine { background: var(--color-gradient-berry-rubine); }
.uc-bg--gradient-red-rubine { background: var(--color-gradient-red-rubine); }
.uc-bg--gradient-rubine-red-orange { background: var(--color-gradient-rubine-red-orange); }
.uc-bg--gradient-red-light { background: var(--color-gradient-red-light); }
.uc-bg--gradient-berry-light { background: var(--color-gradient-berry-light); }
.uc-bg--gradient-rubine-light { background: var(--color-gradient-rubine-light); }
.uc-bg--gradient-orange-gold { background: var(--color-gradient-orange-gold); }
.uc-bg--gradient-dark-orange-light-orange { background: var(--color-gradient-dark-orange-light-orange); }
.uc-bg--gradient-brown-light { background: var(--color-gradient-brown-light); }

/* components/icon.css */
/* Icon: inline SVG from the sprite. Sizes are tokens (size.md → Icon sizes). */

.uc-icon {
  display: inline-block;
  flex: none;
  width: var(--size-icon-md);
  height: var(--size-icon-md);
  vertical-align: middle;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.uc-icon--xs { width: var(--size-icon-xs); height: var(--size-icon-xs); }
.uc-icon--sm { width: var(--size-icon-sm); height: var(--size-icon-sm); }
.uc-icon--lg { width: var(--size-icon-lg); height: var(--size-icon-lg); }
.uc-icon--xl { width: var(--size-icon-xl); height: var(--size-icon-xl); }
.uc-icon--2xl { width: var(--size-icon-2xl); height: var(--size-icon-2xl); }
.uc-icon--3xl { width: var(--size-icon-3xl); height: var(--size-icon-3xl); }

/* Sprite of <symbol> definitions. SVG ignores the hidden attribute, so hide it here. */
.uc-icon-sprite {
  display: none;
}

/* components/link.css */
/* Link variants. Base link styles are in base.css.
   "More" link (UCWS "read-more"): ends a card or item; an arrow slides in on hover.
   The arrow is an inline element after the text: invisible until hover but always taking
   its space, so wrapping matches UCWS and text never reflows on hover. */

.uc-link__arrow {
  width: var(--size-icon-lg);
  height: var(--size-icon-lg);
  margin-inline-start: var(--space-1);
  opacity: 0;
  transform: translateX(calc(-1 * var(--space-2)));
  transition:
    opacity var(--motion-duration-slow) var(--motion-easing-standard),
    transform var(--motion-duration-slow) var(--motion-easing-standard);
}

.uc-link--more:hover .uc-link__arrow,
.uc-link--more:focus-visible .uc-link__arrow {
  opacity: 1;
  transform: none;
}

/* components/button.css */
/* Button: primary (default) and outline. Links styled as buttons use the same classes. */

.uc-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--size-touch-target);
  padding: var(--space-4) var(--space-10);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-action-primary);
  color: var(--color-text-on-primary);
  font-family: var(--font-family-sans);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-semibold);
  line-height: var(--font-line-height-control);
  text-align: center;
  text-decoration: none;
  overflow-wrap: anywhere; /* a label wraps wherever it doesn't fit, as UCWS; a word too long for the button (e.g. an email address) breaks (WCAG 1.4.10) */
  cursor: pointer;
  transition:
    background-color var(--motion-duration-slow) var(--motion-easing-standard),
    border-color var(--motion-duration-slow) var(--motion-easing-standard),
    color var(--motion-duration-slow) var(--motion-easing-standard);
}

.uc-button:visited {
  color: var(--color-text-on-primary);
}

.uc-button:active:not(:disabled, [aria-disabled="true"]) {
  box-shadow: var(--shadow-inset-pressed);
}

.uc-button:disabled,
.uc-button[aria-disabled="true"] {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
}

.uc-button:hover:not(:disabled, [aria-disabled="true"]) {
  background: var(--color-action-primary-hover);
  color: var(--color-text-on-primary);
}

/* UCWS underlines the label on focus as well as drawing the outline. */
.uc-button:focus-visible {
  text-decoration: underline;
}

/* Outline: takes the surrounding text colour, so it works on white and on every band. */
.uc-button--outline,
.uc-button--outline:visited {
  background: transparent;
  color: inherit;
  border: var(--border-width-thick) solid currentColor;
  padding: calc(var(--space-4) - var(--border-width-thick)) calc(var(--space-10) - var(--border-width-thick));
}

/* Hover fills like the primary hover; on dark bands the band classes turn that into a white fill with red text. */
.uc-button--outline:hover:not(:disabled, [aria-disabled="true"]) {
  background: var(--color-action-primary-hover);
  border-color: var(--color-action-primary-hover);
  color: var(--color-text-on-primary);
}

/* components/icon-button.css */
/* Icon button (components.md → Icon button): a button (or link) that shows only an icon, named with
   visually hidden text. Plain: the icon alone in a size.touch-target box, in the control icon colour
   (band classes swap it); it turns berry on hover, as UCWS's lightbox close button. Round
   (uc-icon-button--round): a size.media-control grey circle with a white icon, as UCWS's previous and
   next buttons for photos (Lightbox, Masonry gallery). A genuine toggle takes aria-pressed; pressed, it
   fills berry, as a checked checkbox. */

.uc-icon-button {
  display: inline-grid;
  flex: none;
  place-items: center;
  min-width: var(--size-touch-target);
  min-height: var(--size-touch-target);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-icon-control);
  font: inherit;
  cursor: pointer;
  transition:
    background-color var(--motion-duration-slow) var(--motion-easing-standard),
    color var(--motion-duration-slow) var(--motion-easing-standard);
}

.uc-icon-button:visited {
  color: var(--color-icon-control);
}

.uc-icon-button:hover:not(:disabled, [aria-disabled="true"]) {
  color: var(--color-action-primary-hover);
}

.uc-icon-button[aria-pressed="true"] {
  background: var(--color-action-selected);
  color: var(--color-text-inverse);
}

.uc-icon-button:disabled,
.uc-icon-button[aria-disabled="true"] {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
}

/* Round: the media control. Hover fills like the Button's hover. */
.uc-icon-button--round {
  width: var(--size-media-control);
  height: var(--size-media-control);
  border-radius: var(--radius-circle);
  background: var(--color-background-media-control);
  color: var(--color-text-inverse);
}

.uc-icon-button--round:hover:not(:disabled, [aria-disabled="true"]) {
  background: var(--color-action-primary-hover);
  color: var(--color-text-on-primary);
}

.uc-icon-button--round .uc-icon {
  width: var(--size-icon-xl);
  height: var(--size-icon-xl);
}

/* Windows high contrast drops the fill: a pressed button keeps a visible edge. */
@media (forced-colors: active) {
  .uc-icon-button[aria-pressed="true"] {
    border: var(--border-width-thick) solid CanvasText;
  }
}

/* components/image.css */
/* Image: figure with optional caption and credit. Modifier: uc-image--rounded.
   The image fills its column but is never enlarged (base.css: max-width 100%), as UCWS: a file narrower
   than the column shows at its own size. */

.uc-image {
  margin: 0;
}

/* A linked image: the link is a block as wide as the image, so its focus ring goes around the image
   (an inline link around a block image draws no visible ring) and only the image is clickable. It
   grows slightly on hover, as UCWS. The link grows, not the image inside it, so the focus ring grows
   with it and is never covered. */
.uc-image > a {
  display: block;
  width: fit-content;
  max-width: 100%;
  transition: transform var(--motion-duration-fast) var(--motion-easing-standard);
}

.uc-image > a:hover {
  transform: scale(var(--motion-scale-hover-sm));
}

/* Caption and credit. The figcaption holds plain text (a caption alone), or paragraphs: the caption,
   then the credit straight under it (or the credit alone). */
.uc-image__caption {
  margin-block-start: var(--space-4);
  font-size: var(--font-size-small);
}

.uc-image__caption p {
  margin: 0;
}

/* Credit: a camera icon as tall as the text (decorative, color.icon.credit), then the credit. */
.uc-image__credit {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.uc-image__credit .uc-icon {
  width: 1em;
  height: 1em;
  color: var(--color-icon-credit);
}

/* Rounded corners (UCWS "roundable" images). */
.uc-image--rounded img {
  border-radius: var(--radius-md);
}

/* Short label captions only (fonts.md rule 5). */
.uc-image__caption--label {
  text-transform: uppercase;
}

/* The Image block's optional heading, over the photo (blocks.md → Image). */
.uc-block > h2:has(+ .uc-image) {
  margin-block-end: var(--space-6);
}

/* Reduced motion: no hover scaling (size.md → Motion). */
@media (prefers-reduced-motion: reduce) {
  .uc-image > a:hover {
    transform: none;
  }
}

/* components/lightbox.css */
/* Lightbox: photos from a group of links (data-uc-lightbox) shown one at a time in a modal dialog over a
   nearly white backdrop, with the caption, a link and the credit, as UCWS's image lightbox. The dialog is
   built by components/lightbox.js; its buttons are Icon buttons (icon-button.css) and its link is a More
   link (link.css). Used by the Image gallery and the Masonry gallery. */

.uc-lightbox {
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding: var(--space-6) var(--space-4);
  border: 0;
  background: transparent;
  color: var(--color-text-default);
  overflow-y: auto;
}

.uc-lightbox[open] {
  display: flex;
}

.uc-lightbox::backdrop {
  background: var(--color-overlay-scrim-light);
}

/* The viewer is as wide as its photo, so Close, previous, next and the caption follow the photo, as
   UCWS. */
.uc-lightbox__viewer {
  display: flex;
  flex-direction: column;
  width: fit-content;
  max-width: var(--layout-lightbox-photo-max-width);
  margin: auto;
}

/* An Icon button, dark as UCWS's (berry on hover). */
.uc-lightbox__close {
  align-self: flex-end;
  color: var(--color-text-default);
}

.uc-lightbox__figure {
  margin: 0;
}

/* At least a button tall, so the previous and next buttons don't cover the close button while a
   photo loads. */
.uc-lightbox__frame {
  position: relative;
  display: flex;
  justify-content: center;
  min-height: var(--size-media-control);
}

/* The photo shows at its file's size, scaled down (keeping its shape) to fit
   layout.lightbox.photo-max-width and -max-height; space.6 of that height stays free above it, as UCWS. */
.uc-lightbox__image {
  width: auto;
  max-width: 100%;
  max-height: calc(var(--layout-lightbox-photo-max-height) - var(--space-6));
  object-fit: contain;
}

/* More than one photo: a click on the photo shows the next one, as UCWS (the script adds the class). */
.uc-lightbox__image--next {
  cursor: pointer;
}

/* Previous and next: round Icon buttons (grey circles with white chevrons), beside the photo from
   breakpoint.xl and over its edges below. */
.uc-lightbox__step {
  position: absolute;
  inset-block-start: 50%;
  transform: translateY(-50%);
}

.uc-lightbox__step--previous {
  inset-inline-start: var(--space-2);
}

.uc-lightbox__step--next {
  inset-inline-end: var(--space-2);
}

.uc-lightbox__step--previous .uc-icon {
  transform: rotate(90deg);
}

.uc-lightbox__step--next .uc-icon {
  transform: rotate(-90deg);
}

@media (min-width: 1200px) { /* breakpoint.xl */
  /* Close hangs outside the photo's top right corner, as UCWS: its icon (size.icon.xl, in the middle of
     the size.touch-target button) touches the corner, so the button's own corner laps over the photo's.
     It sits above the photo there, so its focus ring shows whole. Only space.6 of the button counts as
     room above the photo (UCWS 25px), so the photo sits where UCWS has it. Below breakpoint.xl Close
     stays over the photo's end. */
  .uc-lightbox__close {
    --uc-lightbox-close-inset: calc((var(--size-touch-target) - var(--size-icon-xl)) / 2); /* button edge to icon */
    position: relative;
    z-index: 1;
    margin-block: calc(var(--space-6) - var(--size-touch-target) + var(--uc-lightbox-close-inset)) calc(-1 * var(--uc-lightbox-close-inset));
    margin-inline-end: calc(var(--uc-lightbox-close-inset) - var(--size-touch-target));
  }

  .uc-lightbox__step--previous {
    inset-inline-start: calc(-1 * (var(--size-media-control) + var(--space-15)));
  }

  .uc-lightbox__step--next {
    inset-inline-end: calc(-1 * (var(--size-media-control) + var(--space-15)));
  }
}

/* The caption is as wide as the photo: its own words never widen the viewer (inline-size containment).
   Black on the nearly white backdrop, with space.4 above and below, as UCWS. */
.uc-lightbox__caption {
  contain: inline-size;
  padding-block: var(--space-4);
  color: var(--color-text-lightbox-caption);
}

.uc-lightbox__caption p {
  margin: 0;
}

/* The link runs on after the caption's words, in the caption's colour; its arrow shows on hover and
   focus (link.css), as UCWS. */
.uc-lightbox__caption a,
.uc-lightbox__caption a:visited,
.uc-lightbox__caption a:hover {
  color: inherit;
}

/* Credit: a camera icon as tall as the text, then the credit. */
.uc-lightbox__credit {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.uc-lightbox__credit .uc-icon {
  width: 1em;
  height: 1em;
}

/* The script hides what a photo doesn't have (and the previous and next buttons for a single photo). */
.uc-lightbox__step[hidden],
.uc-lightbox__credit[hidden] {
  display: none;
}

/* components/embed.css */
/* Media embed: a provider's player (YouTube, Vimeo, YuJa, Spotify, SoundCloud, Libsyn, …) in an
   iframe, with an optional caption and credit. Markup: demo/components.html → Media embed.
     <figure class="uc-embed">
       <iframe src="…" title="…" width="560" height="315" allow="…" allowfullscreen loading="lazy"></iframe>
       <figcaption class="uc-embed__caption"><p>Caption</p><p class="uc-embed__credit">Credit</p></figcaption>
     </figure>
   Video fills the width at aspect-ratio.video. Audio (uc-embed--audio) fills the width and keeps the
   height from the provider's embed code: the iframe's height attribute. */

.uc-embed {
  margin: 0;
}

.uc-embed iframe {
  display: block;
  width: 100%;
  border: 0;
}

/* The height attribute only reserves space until CSS takes over: video is sized by its ratio. */
.uc-embed:not(.uc-embed--audio) iframe {
  height: auto;
  aspect-ratio: var(--aspect-ratio-video);
}

/* Caption and credit take the surrounding text colour, as UCWS and as Image captions do. */
.uc-embed__caption {
  margin-block-start: var(--space-4);
  font-size: var(--font-size-small);
}

.uc-embed__caption p {
  margin: 0;
}

/* components/quote.css */
/* Quote: blockquote with a red rule on the left, as in UCWS text blocks.
   Markup: <figure class="uc-quote"><blockquote><p>…</p></blockquote><figcaption>Name, role</figcaption></figure>
   A plain <blockquote> in editor text (a Text block, an open Accordion panel) gets the same style.
   Testimonial variant (uc-quote--testimonial): a large quote mark, an accent line and larger text,
   with the person's name, role and optional round portrait in the caption. Accent colour of the
   rule and mark: uc-quote--light-grey, --dark-grey, --dark-orange, --light-orange, --berry, --rubine,
   --gold, --chocolate, --green (default red), as the UCWS accent option. Without one, a testimonial's
   mark and line are color.decorative.quote: red on white, the band's accent on a colour band
   (background.css), as UCWS. */

.uc-quote,
:is(.uc-text, .uc-accordion__panel) blockquote {
  margin: var(--space-6) 0 var(--space-6) var(--space-4);
  padding-inline-start: var(--space-4);
  border-inline-start: var(--border-width-heavy) solid var(--uc-quote-accent, var(--color-decorative-rule));
  font-weight: var(--font-weight-medium);
}

.uc-quote blockquote {
  margin: 0;
}

.uc-quote p:last-child,
:is(.uc-text, .uc-accordion__panel) blockquote p:last-child {
  margin-block-end: 0;
}

.uc-quote figcaption {
  margin-block-start: var(--space-2);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
}

@media (min-width: 768px) { /* breakpoint.md */
  .uc-quote,
  :is(.uc-text, .uc-accordion__panel) blockquote {
    margin-inline-start: var(--space-16);
  }
}

/* Accent colour (decorative: the words carry the meaning). */
.uc-quote--light-grey { --uc-quote-accent: var(--color-decorative-light-grey); }
.uc-quote--dark-orange { --uc-quote-accent: var(--color-decorative-dark-orange); }
.uc-quote--light-orange { --uc-quote-accent: var(--color-decorative-light-orange); }
.uc-quote--berry { --uc-quote-accent: var(--color-decorative-berry); }
.uc-quote--rubine { --uc-quote-accent: var(--color-decorative-rubine); }
.uc-quote--gold { --uc-quote-accent: var(--color-decorative-gold); }
.uc-quote--dark-grey { --uc-quote-accent: var(--color-decorative-grey); }
.uc-quote--chocolate { --uc-quote-accent: var(--color-decorative-chocolate); }
.uc-quote--green { --uc-quote-accent: var(--color-decorative-green); }

/* Testimonial variant, as UCWS: the mark, then an accent line beside the quote, the caption under it.
   <figure class="uc-quote uc-quote--testimonial">
     <svg class="uc-icon uc-quote__mark" aria-hidden="true"><use href="#icon-quote"/></svg>
     <blockquote><p>…</p></blockquote>
     <figcaption><img class="uc-quote__portrait" …><span class="uc-quote__by"><span class="uc-quote__name">…</span> <span class="uc-quote__role">…</span></span></figcaption>
   </figure> */
.uc-quote--testimonial {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--space-2);
  margin: 0;
  padding: 0;
  border: 0;
}

.uc-quote__mark {
  grid-row: 1;
  width: var(--size-quote-mark-base);
  height: var(--size-quote-mark-base);
  color: var(--uc-quote-accent, var(--color-decorative-quote));
  fill: currentColor;
  stroke: none;
}

.uc-quote--testimonial blockquote {
  display: flex;
  align-items: center; /* a short quote sits in the middle of the line, as UCWS */
  padding-inline-start: var(--space-3);
  border-inline-start: var(--border-width-accent) solid var(--uc-quote-accent, var(--color-decorative-quote));
}

.uc-quote--testimonial blockquote p {
  margin: 0;
  font-size: var(--font-size-quote-base);
  line-height: var(--font-line-height-quote-base);
  font-weight: var(--font-weight-medium);
}

.uc-quote--testimonial figcaption {
  grid-column: 2;
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin-block-start: var(--space-5);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
}

.uc-quote__portrait {
  flex: none;
  width: var(--size-avatar-sm);
  height: var(--size-avatar-sm);
  border-radius: var(--radius-circle);
  object-fit: cover;
}

.uc-quote__name,
.uc-quote__role {
  display: block;
}

.uc-quote__name {
  font-weight: var(--font-weight-bold);
}

@media (min-width: 768px) { /* breakpoint.md */
  .uc-quote--testimonial {
    column-gap: var(--space-3);
  }

  .uc-quote__mark {
    width: var(--size-quote-mark-md);
    height: var(--size-quote-mark-md);
  }

  .uc-quote--testimonial blockquote {
    min-height: var(--size-quote-mark-md); /* UCWS keeps 48px beside the mark */
    padding-inline-start: var(--space-8);
  }

  .uc-quote--testimonial blockquote p {
    font-size: var(--font-size-quote-md);
    line-height: var(--font-line-height-quote-md);
  }
}

/* components/pager.css */
/* Pager (components.md → Pager): round page buttons, as UCWS's (DataTables in a Table, Drupal's pager in
   a Page filter): small red circles with the current page filled, previous and next with chevrons, and
   a gap (…) where numbers are left out. Each one's clickable area still reaches size.touch-target: an
   invisible area around the circle that takes no room. The script that owns the list builds it
   (table.js, page-filter.js): ul.uc-pager > li > button.uc-pager__page (--previous, --next) or
   span.uc-pager__gap. */

.uc-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.uc-pager__page {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--size-page-button);
  height: var(--size-page-button);
  padding: 0;
  border: var(--border-width-thin) solid var(--color-action-primary);
  border-radius: var(--radius-circle);
  background: var(--color-background-default);
  color: var(--color-action-primary);
  font: inherit;
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
  line-height: var(--font-line-height-solid);
  cursor: pointer;
}

.uc-pager__page::before {
  content: "";
  position: absolute;
  inset: calc((var(--size-page-button) - var(--size-touch-target)) / 2);
}

.uc-pager__page[aria-current="true"],
.uc-pager__page:hover:not([aria-disabled="true"]) {
  border-color: var(--color-action-primary);
  background: var(--color-action-primary);
  color: var(--color-text-on-primary);
}

/* Hover: the Button's hover colour (UCWS's pale pink fails contrast). */
.uc-pager__page:hover:not([aria-disabled="true"], [aria-current="true"]) {
  border-color: var(--color-action-primary-hover);
  background: var(--color-action-primary-hover);
}

.uc-pager__page[aria-disabled="true"] {
  border-color: var(--color-text-disabled);
  color: var(--color-text-disabled);
  cursor: not-allowed;
}

.uc-pager__page .uc-icon {
  width: var(--size-icon-sm);
  height: var(--size-icon-sm);
}

.uc-pager__page--previous .uc-icon {
  transform: rotate(90deg);
}

.uc-pager__page--next .uc-icon {
  transform: rotate(-90deg);
}

/* The gap where numbers are left out: three large grey dots, as UCWS. They take no line of their own, so
   the row stays as tall as the circles, and sit border.width.thick above the text line: level with the
   circles' centres. */
.uc-pager__gap {
  position: relative;
  inset-block-end: var(--border-width-thick);
  color: var(--color-decorative-grey);
  font-size: var(--font-size-pager-gap);
  font-weight: var(--font-weight-bold);
  line-height: 0;
}

/* components/chip.css */
/* Chip (components.md → Chip): a short label in a rounded box, after UCWS's search bubbles (berry on a
   berry tint, 36px tall, 15px corners, 15px apart). The element says what it does:
   - span.uc-chip: a tag, plain text, not focusable;
   - a.uc-chip: a link, underlined and semibold as every link;
   - button.uc-chip: an action, outlined in berry; a filter is a toggle (aria-pressed) that fills berry
     and shows a tick when on, so the state isn't colour alone;
   - uc-chip--removable: a tag with its own remove button (uc-chip__remove), as UCWS's search results.
     components/chip.js moves the focus and says what was removed.
   A chip is size.touch-target less space.2 tall: the clickable area of a link or button chip takes
   space.1 more above and below, to reach size.touch-target, and chips are space.4 apart, so those areas
   never meet. */

.uc-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
}

.uc-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: calc(var(--size-touch-target) - var(--space-2));
  margin: 0;
  padding: calc(var(--space-1) - var(--border-width-thin)) calc(var(--space-4) - var(--border-width-thin));
  /* Transparent, so it only shows in Windows high contrast, where the fill is dropped. */
  border: var(--border-width-thin) solid transparent;
  border-radius: var(--radius-chip);
  background: var(--color-background-chip);
  color: var(--color-text-chip);
  font: inherit;
  font-weight: var(--font-weight-regular);
  line-height: var(--font-line-height-body);
  text-align: start;
  text-decoration: none;
  overflow-wrap: anywhere;
}

/* ---- Link ---- */

a.uc-chip,
a.uc-chip:visited {
  color: var(--color-text-chip);
  font-weight: var(--font-weight-semibold);
  text-decoration: underline;
  text-decoration-thickness: var(--border-width-thin);
  text-underline-offset: var(--space-1);
}

a.uc-chip:hover {
  background: var(--color-action-primary-hover);
  color: var(--color-text-on-primary);
}

/* ---- Button: an action, or a filter that's on or off ---- */

button.uc-chip {
  border-color: var(--color-action-selected);
  background: var(--color-background-default);
  cursor: pointer;
}

a.uc-chip::after,
button.uc-chip::after {
  content: "";
  position: absolute;
  inset: calc(var(--space-2) / -2) 0;
}

button.uc-chip:hover:not(:disabled, [aria-pressed="true"]) {
  background: var(--color-background-chip);
}

button.uc-chip[aria-pressed="true"] {
  background: var(--color-action-selected);
  color: var(--color-text-inverse);
  font-weight: var(--font-weight-semibold);
}

/* Tick: two borders of a box, turned, as the Checkbox's. */
button.uc-chip[aria-pressed="true"]::before {
  content: "";
  flex: none;
  width: calc(var(--size-icon-sm) * 0.3);
  height: calc(var(--size-icon-sm) * 0.55);
  margin-block-start: calc(var(--size-icon-sm) * -0.15);
  border: solid currentColor;
  border-width: 0 var(--border-width-thick) var(--border-width-thick) 0;
  transform: rotate(45deg);
}

button.uc-chip:disabled {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
}

/* ---- Removable: the label, then a small round remove button ---- */

.uc-chip--removable {
  padding-inline-end: calc(var(--space-1) - var(--border-width-thin));
}

.uc-chip__remove {
  position: relative;
  display: grid;
  flex: none;
  place-items: center;
  margin: 0;
  padding: var(--space-1);
  border: 0;
  border-radius: var(--radius-circle);
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.uc-chip__remove:visited {
  color: inherit;
}

/* Its clickable area: a size.touch-target square round the button, reaching less than half the gap
   past the chip. */
.uc-chip__remove::before {
  content: "";
  position: absolute;
  inset: calc((var(--size-icon-xs) + 2 * var(--space-1) - var(--size-touch-target)) / 2);
}

.uc-chip__remove .uc-icon {
  width: var(--size-icon-xs);
  height: var(--size-icon-xs);
  stroke-width: 3;
}

.uc-chip__remove:hover {
  background: var(--color-action-selected);
  color: var(--color-text-inverse);
}

/* blocks/header.css */
/* Header, matching UCWS. Reference markup: demo/blocks.html → Block: Header.
   Two parts:
   - Toolbar (uc-header__toolbar): the red toolbox tab, the search and the UCalgary quick links.
     Closed, it takes no height: the tab (and, from breakpoint.lg, the search) sit over the logo row.
     Open, it grows and pushes the logo row down. From breakpoint.lg the open toolbar is split like
     UCWS: red under the logins group (the first third of the container), grey under the other links.
   - Logo row (uc-header__inner): menu button (below breakpoint.lg), logo, then the unit's identity row
     (uc-header__identity) and the navigation, whose items share the full width (a chevron at the
     right of items with a sub-menu). The identity row holds the unit name; a department adds its
     parent faculty (uc-header__parent), a partner unit a statement line and the partner's logo.
   Quick links: two ul.uc-header__quicklinks-group lists (the first with --logins), the second ending
   with a dropdown (li.uc-header__dropdown: a button and its list). blocks/header.js opens and closes
   the toolbox, the menu and the dropdown.
   From breakpoint.lg the header casts shadow.header on the page below it. */

.uc-header {
  border-top: var(--border-width-bar) solid var(--color-decorative-rule);
  background: var(--color-background-default);
}

/* Toolbar */

.uc-header__toolbar {
  height: 0;
}

/* Open whenever the toolbox shows, so it also works before (or without) the script. */
.uc-header__toolbar:has(.uc-header__toolbox:not([hidden])) {
  height: auto;
  background: var(--color-background-subtle);
}

.uc-header__toolbar-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  column-gap: var(--space-4);
}

.uc-header__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--size-touch-target);
  min-height: var(--size-touch-target);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-text-default);
  font: inherit;
  cursor: pointer;
}

/* Red tab hanging from the brand bar; a round close button once open. It sits over the logo row
   while the toolbar is closed, so it's lifted above it. */
.uc-header__toggle--toolbox {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  z-index: 1;
  min-height: calc(var(--size-touch-target) + var(--space-2));
  border-radius: 0 0 var(--radius-pill) var(--radius-pill);
  background: var(--color-action-primary);
  color: var(--color-text-on-primary);
}

.uc-header__toggle--toolbox[aria-expanded="true"] {
  min-height: var(--size-touch-target);
  margin-block-start: var(--space-4);
  border-radius: var(--radius-circle);
}

.uc-header__toolbox-icon--more,
.uc-header__toolbox-icon--close,
.uc-header__toggle--toolbox[aria-expanded="true"] .uc-header__toolbox-icon--search {
  display: none;
}

.uc-header__toggle--toolbox[aria-expanded="true"] .uc-header__toolbox-icon--close {
  display: inline-block;
}

/* The toolbox's search and quick links take their own places in the toolbar grid. */
.uc-header__toolbox {
  display: contents;
}

.uc-header__toolbox[hidden] {
  display: none;
}

.uc-header__search {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  margin-block-start: var(--space-4);
  border: var(--border-width-thin) solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-background-default);
}

/* The children round their own outer corners (no overflow clipping, so focus rings stay visible),
   and the ring sits just inside each control. */
.uc-header__search input {
  flex: 1;
  min-width: 0;
  min-height: var(--size-touch-target);
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  background: transparent;
  font-family: var(--font-family-sans);
  font-size: var(--font-size-small);
  color: var(--color-text-default);
}

.uc-header__search button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--size-touch-target);
  border: 0;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: transparent;
  color: var(--color-text-default);
  cursor: pointer;
}

/* Hover, as UCWS: the field's border turns berry and the button fills. (UCWS also thickens the
   border, which moves the field by a pixel; here only its colour changes.) */
.uc-header__search:hover {
  border-color: var(--color-action-selected);
}

.uc-header__search button:hover {
  background: var(--color-action-primary-hover);
  color: var(--color-text-inverse);
}

.uc-header__search :focus-visible {
  outline-offset: calc(-1 * var(--focus-ring-width));
}

/* Quick links */

.uc-header__quicklinks {
  grid-column: 1 / -1;
  grid-row: 2;
  display: grid;
  gap: var(--space-4);
  padding-block: var(--space-4);
  color: var(--color-text-default);
}

.uc-header__quicklinks-group {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.uc-header__quicklinks a,
.uc-header__dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--size-touch-target);
  color: inherit;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
}

.uc-header__quicklinks a:hover {
  color: inherit;
  text-decoration: underline;
}

/* Dropdown: a button that shows and hides a berry list of links. */
.uc-header__dropdown {
  position: relative;
  grid-column: 1 / -1;
}

.uc-header__dropdown-toggle {
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  cursor: pointer;
}

.uc-header__dropdown-toggle:hover,
.uc-header__dropdown-toggle[aria-expanded="true"] {
  color: var(--color-link-default);
  text-decoration: underline;
}

.uc-header__dropdown-toggle[aria-expanded="true"] .uc-icon {
  transform: rotate(180deg);
}

.uc-header__dropdown-menu {
  margin: var(--space-2) 0 0;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-background-berry);
  color: var(--color-text-inverse);
  list-style: none;
  --color-focus-ring: var(--color-focus-ring-on-dark);
}

.uc-header__dropdown-menu[hidden] {
  display: none;
}

.uc-header__dropdown-menu li + li {
  border-top: var(--border-width-thin) solid var(--color-border-on-berry);
}

.uc-header__quicklinks .uc-header__dropdown-menu a {
  display: flex;
  font-weight: var(--font-weight-semibold);
}

/* Logo row */

.uc-header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.uc-header__toggle--menu {
  grid-column: 1;
  justify-self: start;
}

.uc-header__logo {
  grid-column: 2;
}

.uc-header__logo img {
  width: auto;
  height: var(--size-logo-height-base);
}

.uc-header__nav-panel {
  grid-column: 1 / -1;
  border-top: var(--border-width-thin) solid var(--color-action-primary);
}

.uc-header__nav-panel[hidden] {
  display: none;
}

/* Identity row (UCWS "menu id"). Faculty and other top-level sites: the unit name alone, upper case.
   Department sites (a uc-header__parent follows the unit): the department's name as typed, and the
   parent faculty in grey, upper case, at the right (UCWS "sub-group" sites). */
.uc-header__identity {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-6);
  margin: var(--space-4) 0 var(--space-3);
}

.uc-header__unit,
.uc-header__parent {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
  text-transform: uppercase;
}

/* The names keep their colour once visited (UCWS). */
.uc-header__unit,
.uc-header__unit:visited {
  color: var(--color-link-default);
}

.uc-header__parent,
.uc-header__parent:visited {
  color: var(--color-text-parent-unit);
}

.uc-header__unit:hover,
.uc-header__parent:hover {
  color: var(--color-link-hover);
  text-decoration: underline;
}

/* A department's name is long: shown as typed (fonts.md rule 5), so type it in title case. */
.uc-header__identity:has(> .uc-header__parent) > .uc-header__unit {
  text-transform: none;
}

/* Partner units (UCWS "arms-length", e.g. Cumming School of Medicine departments run with Alberta
   Health Services): the unit name, a statement line under it and the partner's logo at the right. */
.uc-header__identity:has(> .uc-header__partner) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0 var(--space-4);
}

.uc-header__statement {
  grid-column: 1 / -1;
  margin: 0;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: var(--font-line-height-xs);
}

.uc-header__partner {
  grid-column: 2;
  grid-row: 1;
}

.uc-header__partner img {
  width: auto;
  height: var(--size-logo-height-partner-base);
}

.uc-header__nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Top-level items: a link, or a button that opens the item's sub-menu (uc-header__nav-toggle). */
.uc-header__nav > ul > li > a,
.uc-header__nav-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  min-height: var(--size-touch-target);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  border: 0;
  border-top: var(--border-width-thin) solid var(--color-border-default);
  background: transparent;
  color: var(--color-text-default);
  font: inherit;
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
  text-align: start;
  text-decoration: none;
  cursor: pointer;
}

.uc-header__nav-chevron {
  flex: none;
  color: var(--color-icon-control);
  transition: rotate var(--motion-duration-fast) var(--motion-easing-standard);
}

/* Where the page is: aria-current="true" on the section that holds it, aria-current="page" on a link
   to the page itself. */
.uc-header__nav > ul > li > a:hover,
.uc-header__nav > ul > li > a[aria-current="true"],
.uc-header__nav > ul > li > a[aria-current="page"],
.uc-header__nav-toggle:hover,
.uc-header__nav-toggle[aria-current="true"] {
  color: var(--color-action-primary);
}

/* Open: berry with white text, as UCWS, and the chevron points up. (While the pointer or the focus is
   on it UCWS shows its brighter hover red, on which white 14px text is 4.44:1; here it stays berry.) */
.uc-header__nav-toggle[aria-expanded="true"],
.uc-header__nav-toggle[aria-expanded="true"]:hover {
  background: var(--color-background-berry);
  color: var(--color-text-inverse);
}

.uc-header__nav-toggle[aria-expanded="true"] .uc-header__nav-chevron {
  color: currentColor;
  rotate: 180deg;
}

/* Sub-menu (UCWS mega menu): an overview link for the section, then either its links, or tabs
   (uc-header__mega-tab) that each show a panel of links. Below breakpoint.lg it opens in place in the
   menu; from breakpoint.lg it drops over the page. blocks/header.js opens and closes it. */
.uc-header__mega {
  padding: var(--space-5) var(--space-4) 0;
  background: var(--color-background-default);
}

.uc-header__mega[hidden],
.uc-header__mega-panel[hidden] {
  display: none;
}

.uc-header__mega-overview {
  display: inline-block;
  margin-block-end: var(--space-5);
  color: var(--color-link-default);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--font-letter-spacing-label);
  text-transform: uppercase;
  text-decoration: none;
}

/* Where the page is, as UCWS: its link has a thicker underline (and so has a link on the way to it),
   and an overview link takes the text colour. */
.uc-header__mega-overview[aria-current="page"],
.uc-header__mega-links a[aria-current="page"],
.uc-header__mega-links a[aria-current="true"] {
  text-decoration: underline;
  text-decoration-thickness: var(--border-width-thick);
}

.uc-header__mega-overview[aria-current="page"] {
  color: var(--color-text-default);
}

/* Hover, as UCWS: the hover colour and the thicker underline. */
.uc-header__mega-overview:hover,
.uc-header__mega-links a:hover {
  color: var(--color-link-hover);
  text-decoration: underline;
  text-decoration-thickness: var(--border-width-thick);
}

/* The list carries the links' size, so each line is as tall as the body line height, as UCWS. */
.uc-header__mega-links {
  font-size: var(--font-size-small);
}

.uc-header__mega-links > li {
  padding-block-end: var(--space-6);
  break-inside: avoid;
}

.uc-header__mega-links a,
.uc-header__mega-heading {
  color: var(--color-text-default);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
}

/* A link's own sub-pages: a list under it with grey bullets, as UCWS. */
.uc-header__nav .uc-header__mega-links ul {
  padding-inline-start: var(--space-6);
  list-style: disc;
}

.uc-header__mega-links ul li::marker {
  color: var(--color-border-default);
}

.uc-header__mega-links ul a {
  font-weight: var(--font-weight-regular);
}

.uc-header__mega-tablist > li + li {
  margin-block-start: var(--space-1);
}

.uc-header__mega-tab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  min-height: var(--size-touch-target);
  padding: 0 var(--space-2) 0 var(--space-5);
  border: 0;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: transparent;
  color: var(--color-text-default);
  font: inherit;
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
  text-align: start;
  text-decoration: none;
  cursor: pointer;
}

.uc-header__mega-tab .uc-icon {
  flex: none;
  color: var(--color-icon-control);
  rotate: -90deg;
}

/* The tab on the way to the page: a red bar at its start, as UCWS. */
.uc-header__mega-tab[aria-current="true"],
.uc-header__mega-tab[aria-current="page"] {
  box-shadow: inset var(--border-width-heavy) 0 0 var(--color-action-primary);
}

/* Hover fills the tab, as UCWS (in color.action.primary-hover: UCWS's brighter red fails contrast). */
.uc-header__mega-tab:hover {
  background: var(--color-action-primary-hover);
  color: var(--color-text-inverse);
}

.uc-header__mega-tab[aria-expanded="true"] {
  background: var(--color-background-berry);
  color: var(--color-text-inverse);
}

.uc-header__mega-tab:hover .uc-icon,
.uc-header__mega-tab[aria-expanded="true"] .uc-icon {
  color: currentColor;
}

.uc-header__mega-panel {
  padding-block-start: var(--space-5);
}

.uc-header__mega-panel .uc-header__mega-overview {
  margin-block-end: var(--space-6);
}

@media (min-width: 992px) { /* breakpoint.lg */
  /* The header's shadow falls on the page below it, as UCWS, so the header is stacked above the page. */
  .uc-header {
    position: relative;
    z-index: var(--z-index-header);
    box-shadow: var(--shadow-header);
  }

  /* The search always shows from here, so only the tab's state opens the toolbar. */
  .uc-header__toolbar:has(.uc-header__toolbox:not([hidden])) {
    height: 0;
    background: none;
  }

  /* Open: the toolbar covers the brand bar too, and splits red / grey at the container's first third
     (full-width strip half and half, container third and two thirds, as UCWS does it). */
  .uc-header__toolbar:has(.uc-header__toggle--toolbox[aria-expanded="true"]) {
    height: auto;
    margin-block-start: calc(-1 * var(--border-width-bar));
    background: linear-gradient(90deg, var(--color-background-red) 50%, var(--color-background-subtle) 50%);
  }

  .uc-header__toolbar:has(.uc-header__toggle--toolbox[aria-expanded="true"]) .uc-header__toolbar-inner {
    padding-block-start: var(--border-width-bar);
    background: linear-gradient(90deg, var(--color-background-red) calc(100% / 3), var(--color-background-subtle) calc(100% / 3));
  }

  .uc-header__toolbox-icon--search {
    display: none;
  }

  .uc-header__toggle--toolbox[aria-expanded="false"] .uc-header__toolbox-icon--more {
    display: inline-block;
  }

  /* The close button, as UCWS: a red mark on the strip's grey (its circle only shows on hover, red
     with a white mark). */
  .uc-header__toggle--toolbox[aria-expanded="true"] {
    background: var(--color-background-subtle);
    color: var(--color-icon-control);
  }

  .uc-header__toggle--toolbox[aria-expanded="true"]:hover {
    background: var(--color-action-primary);
    color: var(--color-text-on-primary);
  }

  /* Search is always visible; only the quick links wait for the tab. */
  .uc-header__toolbox[hidden] {
    display: contents;
  }

  .uc-header__toggle--toolbox[aria-expanded="false"] ~ .uc-header__toolbox .uc-header__quicklinks {
    display: none;
  }

  .uc-header__search {
    position: relative;
    z-index: 1;
    justify-self: end;
    width: calc(var(--layout-container-max-width) / 3);
  }

  /* Logins under the red third, the other links under the grey two thirds. */
  .uc-header__quicklinks {
    grid-template-columns: calc((100% + 2 * var(--layout-container-padding)) / 3 - var(--layout-container-padding)) 1fr;
    gap: 0;
    padding-block: var(--space-4) var(--space-3);
  }

  /* Columns share the width with no gap, as UCWS; the end padding only shows when space is tight. */
  .uc-header__quicklinks-group {
    column-gap: 0;
  }

  .uc-header__quicklinks-group > li {
    padding-inline-end: var(--space-2);
  }

  .uc-header__quicklinks-group--logins {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding-inline-end: var(--space-8);
    color: var(--color-text-inverse);
    --color-focus-ring: var(--color-focus-ring-on-dark);
  }

  .uc-header__quicklinks-group:not(.uc-header__quicklinks-group--logins) {
    grid-template-columns: repeat(6, auto);
    padding-inline-start: var(--space-8);
  }

  .uc-header__quicklinks-group:not(.uc-header__quicklinks-group--logins) > li > a:hover {
    color: var(--color-link-default);
  }

  /* As wide as its button (no end padding, unlike the other items), so the list lines up with the
     button's right edge. */
  .uc-header__dropdown {
    grid-column: auto;
    justify-self: start;
  }

  .uc-header__quicklinks-group > li.uc-header__dropdown {
    padding-inline-end: 0;
  }

  .uc-header__dropdown-menu {
    position: absolute;
    inset-block-start: 100%;
    inset-inline-end: 0;
    z-index: var(--z-index-dropdown);
    width: max-content;
    padding: var(--space-4);
  }

  .uc-header__inner {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .uc-header__toggle--menu {
    display: none;
  }

  .uc-header__logo {
    grid-column: 1;
    justify-self: start;
    /* The logo file has built-in left padding; UCWS pulls it back to the content edge. */
    margin-inline-start: calc(-1 * var(--space-5));
  }

  .uc-header__logo img {
    height: var(--size-logo-height-lg);
  }

  .uc-header__nav-panel,
  .uc-header__nav-panel[hidden] {
    display: block;
    border-top: 0;
  }

  /* The identity row is layout.header.identity-height tall, as UCWS (it grows with larger text). */
  .uc-header__identity {
    min-height: var(--layout-header-identity-height);
    margin: 0;
  }

  /* UCWS's 22px lines are under the minimum target size (WCAG 2.5.8): each link fills the row's height
     instead, so the text sits where UCWS's does and the clickable area is layout.header.identity-height.
     Inline-block, so it also works in older markup without the identity row (a flex item ignores it). */
  .uc-header__unit,
  .uc-header__parent {
    display: inline-block;
    vertical-align: top;
    min-height: var(--layout-header-identity-height);
    font-size: var(--font-size-unit-name);
    font-weight: var(--font-weight-semibold);
    line-height: var(--font-line-height-unit-name);
  }

  /* Partner units, as UCWS: the name on a line as tall as its text, in a row of
     layout.header.partner-name-row; the statement in the row under it, which ends where the logo
     beside them ends; all at the top of a layout.header.partner-identity-height row. */
  .uc-header__identity:has(> .uc-header__partner) {
    grid-template-rows:
      minmax(var(--layout-header-partner-name-row), auto)
      minmax(calc(var(--size-logo-height-partner-lg) - var(--layout-header-partner-name-row)), auto);
    align-content: start;
    align-items: start;
    min-height: var(--layout-header-partner-identity-height);
  }

  .uc-header__identity:has(> .uc-header__partner) > .uc-header__unit {
    min-height: var(--layout-header-partner-name-row);
    line-height: var(--font-line-height-solid);
  }

  .uc-header__statement {
    grid-column: 1;
    line-height: var(--font-line-height-solid);
  }

  .uc-header__partner {
    grid-row: 1 / span 2;
  }

  .uc-header__partner img {
    height: var(--size-logo-height-partner-lg);
  }

  .uc-header__nav {
    position: relative;
  }

  .uc-header__nav > ul {
    display: flex;
    border-top: var(--border-width-thin) solid var(--color-border-default);
  }

  /* The items share the row, each at most layout.header.nav-item-max-width wide, as UCWS (so a few
     items don't stretch across it). A long label wraps (UCWS cuts it with an ellipsis). */
  .uc-header__nav > ul > li {
    flex: 1 1 auto;
    max-width: var(--layout-header-nav-item-max-width);
  }

  .uc-header__nav > ul > li > a,
  .uc-header__nav-toggle {
    padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
    border-top: 0;
    border-bottom: var(--border-width-heavy) solid transparent;
    font-weight: var(--font-weight-medium);
  }

  /* An item without a sub-menu centres its label; one with a sub-menu keeps its chevron close to its
     end. Both as UCWS, so the items' edges fall where UCWS's do. */
  .uc-header__nav > ul > li > a {
    justify-content: center;
    padding-inline: var(--space-3);
    text-align: center;
  }

  .uc-header__nav-toggle {
    gap: var(--space-1);
    padding-inline-end: var(--space-1);
  }

  /* The section that holds the page: a red line under its item, as UCWS. */
  .uc-header__nav > ul > li > a[aria-current="true"],
  .uc-header__nav-toggle[aria-current="true"] {
    color: var(--color-text-default);
    border-bottom-color: var(--color-action-primary);
  }

  /* A link to the page itself: filled berry with white text, as UCWS. */
  .uc-header__nav > ul > li > a[aria-current="page"] {
    background: var(--color-background-berry);
    color: var(--color-text-inverse);
  }

  /* Hover fills the item, with white text and chevron, as UCWS (in color.action.primary-hover: UCWS's
     brighter red fails contrast). The current section keeps its red line under the fill. */
  .uc-header__nav > ul > li > a:hover,
  .uc-header__nav-toggle:hover {
    background: var(--color-action-primary-hover);
    color: var(--color-text-inverse);
  }

  .uc-header__nav-toggle:hover .uc-header__nav-chevron {
    color: currentColor;
  }

  .uc-header__nav-toggle[aria-expanded="true"] {
    color: var(--color-text-inverse);
  }

  /* The sub-menu drops over the page, as wide as the navigation, under a rule, as UCWS. It opens from
     its top edge (not where the reader asks for less motion: base.css). */
  .uc-header__mega {
    position: absolute;
    top: 100%;
    inset-inline: 0;
    z-index: var(--z-index-dropdown);
    padding-inline: var(--space-5);
    border-top: var(--border-width-thin) solid var(--color-border-default);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    box-shadow: var(--shadow-header);
    animation: uc-header-mega-open var(--motion-duration-slow) var(--motion-easing-emphasized);
  }

  .uc-header__mega-links {
    column-count: 4;
    column-gap: var(--space-12);
  }

  /* Tabs on the left (flush with the panel's edge), the chosen tab's panel on the right, with a rule
     between them and its links in three columns, as UCWS. */
  .uc-header__mega-tabs {
    position: relative;
    display: grid;
    grid-template-columns: var(--layout-header-mega-tab-width) minmax(0, 1fr);
    column-gap: var(--space-5);
    margin-inline-start: calc(-1 * var(--space-5));
  }

  /* The rule starts level with the first tab and stops short of the menu's bottom edge, as UCWS; the
     tabs keep the same space under the last one. */
  .uc-header__mega-tabs::after {
    content: "";
    position: absolute;
    inset-block: 0 var(--space-8);
    inset-inline-start: calc(var(--layout-header-mega-tab-width) + var(--space-5));
    border-inline-start: var(--border-width-thin) solid var(--color-border-default);
  }

  .uc-header__nav .uc-header__mega-tablist {
    padding-block-end: var(--space-8);
  }

  /* Every panel shares one cell, so the menu is as tall as its tallest tab and keeps its size when
     another tab is chosen, as UCWS. A hidden panel is only invisible: it stays out of the keyboard
     order and what screen readers read. The start padding leaves room for the rule. */
  .uc-header__mega-panel,
  .uc-header__mega-panel[hidden] {
    display: block;
    grid-area: 1 / 2;
    padding: var(--space-2) 0 0 calc(var(--space-5) + var(--border-width-thin));
  }

  .uc-header__mega-panel[hidden] {
    visibility: hidden;
  }

  .uc-header__mega-panel .uc-header__mega-links {
    column-count: 3;
  }
}

/* A sub-menu opens from its top edge. The clip reaches past the sides and the bottom edge, so the
   menu's shadow shows while it opens. */
@keyframes uc-header-mega-open {
  from {
    clip-path: inset(0 calc(-1 * var(--space-8)) 100%);
  }

  to {
    clip-path: inset(0 calc(-1 * var(--space-8)) calc(-1 * var(--space-8)));
  }
}

/* blocks/hero-cta.css */
/* Hero CTA: the text, split, stand-alone and mini image heroes, matching UCWS. The overlay hero is an
   image banner (uc-banner--hero, blocks/banner.css). */

/* Buttons in every Hero CTA variant (overlay, mini image, split, stand-alone, text) are larger, as UCWS:
   font.size.control-lg, and the button's line height follows its size. Two buttons that wrap onto two
   rows are space.5 apart (UCWS 20px), and the row sits space.3 under the text by padding, so it adds to
   the text's own margin (UCWS 26px from an intro to the buttons). */
:is(.uc-banner--hero, .uc-hero-mini, .uc-hero-split, .uc-hero-standalone, .uc-hero-title) .uc-button {
  font-size: var(--font-size-control-lg);
}

/* Text hero (UCWS "text hero CTA"): the page title with an optional intro (p.uc-intro) and buttons
   (uc-hero-title__actions), layout.hero.title-padding above and below. On the page's background, or on
   a band (uc-bg--*): berry, or a gradient such as uc-bg--gradient-rubine-red-orange (UCWS grad4, the
   How to Apply page). Stacked by default (UCWS "stacked"; uc-hero-title--center centres it), or side by
   side (uc-hero-title--side, UCWS "side-by-side"): from breakpoint.lg the title and the intro share a row. */
.uc-hero-title {
  margin-block-end: var(--space-12);
  padding-block: var(--layout-hero-title-padding);
}

.uc-hero-title__title {
  margin: 0;
}

.uc-hero-title__body {
  margin-block-start: var(--space-2);
}

.uc-hero-title__body > :last-child {
  margin-block-end: 0;
}

.uc-hero-title__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5) var(--space-3);
  padding-block-start: var(--space-3);
}

.uc-hero-title--center {
  text-align: center;
}

.uc-hero-title--center .uc-hero-title__actions {
  justify-content: center;
}

@media (min-width: 768px) { /* breakpoint.md */
  /* Space below, as UCWS: on the page's own background the hero's padding already sets it apart, so only
     space.4 follows (UCWS 15px); a side-by-side hero on a band gets space.15 (UCWS 60px); a stacked one on
     a band keeps space.12. */
  .uc-hero-title:not([class*="uc-bg--"]) {
    margin-block-end: var(--space-4);
  }

  .uc-hero-title--side[class*="uc-bg--"] {
    margin-block-end: var(--space-15);
  }
}

/* Flush on the next block, or before a rounded band: no space below (components/layout.css). */
.uc-hero-title:is(.uc-block--flush, .uc-block--rounded-below) {
  margin-block-end: 0;
}

@media (min-width: 992px) { /* breakpoint.lg */
  /* Stacked: the title and the text take at most three quarters of the container, as UCWS. */
  .uc-hero-title:not(.uc-hero-title--side) :is(.uc-hero-title__title, .uc-hero-title__body) {
    max-width: calc(100% * 3 / 4);
  }

  .uc-hero-title--center :is(.uc-hero-title__title, .uc-hero-title__body) {
    margin-inline: auto;
  }

  /* Side by side: one row. The text takes up to two thirds and the title gives way first, as UCWS;
     an accent rule runs the row's full height between them, the gutter on each side. */
  .uc-hero-title--side > .uc-container {
    display: flex;
  }

  .uc-hero-title--side .uc-hero-title__title {
    flex: 0 2 auto;
    align-self: center;
    max-width: calc(100% * 2 / 3);
    padding-block: var(--space-2);
  }

  /* A title on its own (no intro, so no rule beside it) needs no room above and below, as UCWS. */
  .uc-hero-title--side .uc-hero-title__title:only-child {
    padding-block: 0;
  }

  .uc-hero-title--side .uc-hero-title__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    max-width: calc(100% * 2 / 3 + var(--layout-gutter) + var(--border-width-accent));
    margin-block-start: 0;
    margin-inline-start: var(--layout-gutter);
    padding-block: var(--space-2);
    padding-inline-start: var(--layout-gutter);
    border-inline-start: var(--border-width-accent) solid var(--color-decorative-berry);
  }

  /* On a band the rule takes the band's text colour (white on berry, as UCWS). */
  .uc-hero-title--side[class*="uc-bg--"] .uc-hero-title__body {
    border-inline-start-color: currentColor;
  }

  .uc-hero-title--side .uc-intro {
    line-height: var(--font-line-height-body);
  }
}

@media (max-width: 767px) { /* below breakpoint.md */
  .uc-hero-title {
    min-height: var(--layout-hero-title-height); /* grows with a long title (white text must stay on the band) */
    margin-block-end: var(--layout-hero-title-gap);
    padding-block: var(--space-10) 0;
  }
}

/* Split 50/50 (UCWS split-50-50-image-hero): a photo in one half, the title panel in the other.
   Below breakpoint.md: the panel, then the photo. From breakpoint.md: side by side, at least
   layout.hero.height tall and growing when the text needs more, the photo on the left;
   uc-hero-split--image-right puts it on the right, where the text starts at the page container's edge.
   The panel comes first in the source, so it's first on small screens.
   In the panel, uc-hero-split__content holds the h1, an optional p.uc-intro and optional buttons
   (uc-hero-split__actions), centred vertically and at most layout.hero.split-text-width wide, as UCWS.
   A title on its own can sit straight in the panel. */
.uc-hero-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* a long title word wraps instead of widening the page */
}

.uc-hero-split__panel {
  display: flex;
  align-items: center;
  padding: var(--space-12) var(--layout-container-padding) var(--space-6);
}

.uc-hero-split__content {
  width: 100%;
}

.uc-hero-split__title {
  margin: 0;
}

.uc-hero-split__content > .uc-hero-split__title {
  margin-block-end: var(--space-2);
}

.uc-hero-split__content > :last-child {
  margin-block-end: 0;
}

.uc-hero-split__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5) var(--space-3);
  padding-block-start: var(--space-3);
}

.uc-hero-split__media img {
  width: 100%;
  height: 100%;
  aspect-ratio: var(--aspect-ratio-hero);
  object-fit: cover;
}

@media (min-width: 768px) { /* breakpoint.md */
  .uc-hero-split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: var(--layout-hero-height);
  }

  .uc-hero-split__media {
    position: relative;
    grid-row: 1;
    grid-column: 1;
    overflow: hidden;
  }

  /* The photo fills its half whatever its own shape, and never sets the hero's height. */
  .uc-hero-split__media img {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
  }

  .uc-hero-split__panel {
    grid-row: 1;
    grid-column: 2;
    padding: var(--space-12) var(--layout-container-padding);
  }

  .uc-hero-split--image-right .uc-hero-split__media {
    grid-column: 2;
  }

  .uc-hero-split--image-right .uc-hero-split__panel {
    grid-column: 1;
  }

  .uc-hero-split__content,
  .uc-hero-split__panel > .uc-hero-split__title {
    max-width: var(--layout-hero-split-text-width);
  }
}

@media (min-width: 992px) { /* breakpoint.lg */
  .uc-hero-split__panel {
    padding-inline-start: calc(var(--space-16) + var(--space-4));
  }

  /* Photo on the right: the panel is the page's left half, so 100% - max-width / 2 is the page's side
     margin, and the text starts at the page container's edge, as UCWS. */
  .uc-hero-split--image-right .uc-hero-split__panel {
    padding-inline-start: max(var(--layout-container-padding), calc(100% - var(--layout-container-max-width) / 2 + var(--layout-container-padding)));
  }
}

/* Stand-alone variant: image across the top, title panel underneath.
   The live image is a fixed height (cropped), not the 5/2 ratio stretched to the viewport. */

/* Space below, as UCWS: space.15 under a panel on a band (UCWS 60px), space.4 under a panel on the page's
   own background (UCWS 15px); none when it is flush on the next block or before a rounded band. */
.uc-hero-standalone {
  margin-block-end: var(--space-15);
}

.uc-hero-standalone:not(:has(> [class*="uc-bg--"])) {
  margin-block-end: var(--space-4);
}

.uc-hero-standalone:is(.uc-block--flush, .uc-block--rounded-below) {
  margin-block-end: 0;
}

.uc-hero-standalone__media {
  overflow: hidden;
  height: var(--layout-hero-standalone-image-height);
}

.uc-hero-standalone__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 768px) { /* breakpoint.md */
  .uc-hero-standalone__media {
    height: var(--layout-hero-height);
  }
}

/* Background is a uc-bg--* class on the panel (live stand-alone hero: gradient red-orange).
   Padding as UCWS, on the 4px grid: space.10 above (UCWS 40px), space.12 below (UCWS 45px). The text is
   as wide as a container's content, as UCWS. */
.uc-hero-standalone__panel {
  padding: var(--space-10) var(--layout-container-padding) var(--space-12);
}

.uc-hero-standalone__inner {
  max-width: calc(var(--layout-container-max-width) - 2 * var(--layout-container-padding));
  margin-inline: auto;
}

.uc-hero-standalone__title {
  margin: 0 0 var(--space-2);
}

/* The paragraph under the title is in the intro style, as UCWS (20px, medium). */
.uc-hero-standalone__panel p {
  margin: 0 0 var(--space-4);
  font-size: var(--font-size-intro);
  font-weight: var(--font-weight-medium);
  line-height: var(--font-line-height-intro);
}

.uc-hero-standalone__panel p:last-child {
  margin-block-end: 0;
}

/* Optional buttons under the text. */
.uc-hero-standalone__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5) var(--space-3);
  padding-block-start: var(--space-3);
}

/* uc-hero-standalone--center: centred title, text and buttons (UCWS alignment "center"). */
.uc-hero-standalone--center .uc-hero-standalone__inner {
  text-align: center;
}

.uc-hero-standalone--center .uc-hero-standalone__actions {
  justify-content: center;
}

/* From breakpoint.wide the split hero and the stand-alone photo grow with the page, as the overlay hero does
   and as UCWS: aspect-ratio.banner-tall of the width (40%: 768px at 1920). The split hero still grows when
   its text needs more. */
@media (min-width: 1500px) { /* breakpoint.wide */
  .uc-hero-split {
    min-height: auto;
    aspect-ratio: var(--aspect-ratio-banner-tall);
  }

  .uc-hero-standalone__media {
    height: auto;
    aspect-ratio: var(--aspect-ratio-banner-tall);
  }
}

/* Mini image hero (UCWS mini-image-hero): a photo with the page title in a white panel.
   - Default: the panel sits over the photo, vertically centred, at the left (UCWS "vmiddle hleft").
   - uc-hero-mini--right: the same, at the right.
   - uc-hero-mini--below: a panel as wide as the page container under the photo, overlapping it
     (UCWS "vbottom hcenter"). It keeps the space below it: don't make it flush.
   - uc-hero-mini--center: centred text and buttons, from breakpoint.lg (UCWS alignment "center"; left
     by default, wherever the panel sits).
   Below breakpoint.lg every variant stacks: the photo, then the panel overlapping its bottom.
   The panel holds the h1, an optional p.uc-intro and optional buttons (uc-hero-mini__actions).
   Dark text on white: no scrim needed. The hero is never wider than layout.block.max-width, as UCWS:
   wider screens show the page's background beside it. */

.uc-hero-mini {
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* a long title word wraps instead of widening the page */
  max-width: var(--layout-block-max-width);
  margin-inline: auto;
  background: var(--color-background-subtle); /* beside the panel on small screens, as UCWS */
}

.uc-hero-mini__media img {
  width: 100%;
  aspect-ratio: var(--aspect-ratio-hero-mini);
  object-fit: cover;
}

.uc-hero-mini__panel {
  position: relative; /* above the photo where they overlap */
  margin: calc(-1 * var(--layout-hero-panel-overlap-base)) var(--layout-container-padding) 0;
  padding: var(--space-5);
  border: var(--border-width-thin) solid var(--color-border-default);
  border-radius: var(--radius-md);
  background: var(--color-background-default);
  color: var(--color-text-default);
}

.uc-hero-mini__panel > :is(h1, .uc-h1) {
  margin-block-end: var(--space-2);
}

.uc-hero-mini__panel > :last-child {
  margin-block-end: 0;
}

.uc-hero-mini__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5) var(--space-3);
  padding-block-start: var(--space-3);
}

@media (min-width: 992px) { /* breakpoint.lg */
  .uc-hero-mini__media img {
    height: var(--layout-hero-height);
    aspect-ratio: auto;
  }

  /* Over the photo: both share one grid cell, so a long title grows the hero instead of spilling out. */
  .uc-hero-mini:not(.uc-hero-mini--below) {
    grid-template-areas: "hero";
  }

  .uc-hero-mini:not(.uc-hero-mini--below) > * {
    grid-area: hero;
  }

  .uc-hero-mini:not(.uc-hero-mini--below) .uc-hero-mini__panel {
    align-self: center;
    justify-self: start;
    max-width: var(--layout-banner-text-width);
    margin: var(--space-12) var(--layout-hero-panel-inset);
    padding: var(--space-14);
    border: 0;
  }

  .uc-hero-mini--right:not(.uc-hero-mini--below) .uc-hero-mini__panel {
    justify-self: end;
  }

  .uc-hero-mini--below {
    background: none;
  }

  .uc-hero-mini--below .uc-hero-mini__panel {
    width: calc(100% - 2 * var(--layout-hero-panel-inset));
    max-width: var(--layout-container-max-width);
    margin: calc(-1 * var(--layout-hero-panel-overlap-lg)) auto 0;
    padding: var(--space-14);
  }

  .uc-hero-mini--center .uc-hero-mini__panel {
    text-align: center;
  }

  .uc-hero-mini--center .uc-hero-mini__actions {
    justify-content: center;
  }

  /* Before a rounded band (uc-block--rounded-below, components/layout.css), as UCWS: the photo keeps its
     height and runs under the band's rounded cap, and a panel over the photo keeps clear of the cap by the
     room the block would otherwise leave. (A panel under the photo leaves that room below itself.) */
  .uc-hero-mini.uc-block--rounded-below:not(.uc-hero-mini--below) {
    padding-block-end: 0;
  }

  .uc-hero-mini.uc-block--rounded-below:not(.uc-hero-mini--below) .uc-hero-mini__panel {
    margin-block-end: calc(var(--space-12) + var(--radius-lg));
  }
}

@media (min-width: 1200px) { /* breakpoint.xl */
  .uc-hero-mini.uc-block--rounded-below:not(.uc-hero-mini--below) .uc-hero-mini__panel {
    margin-block-end: calc(var(--space-12) + var(--radius-xl));
  }
}

/* blocks/text.css */
/* Text block: headings, paragraphs, lists, quotes, dividers and buttons, as in UCWS.
   Markup: <section class="uc-block uc-container uc-text"> … rich text … </section>
   Headings, paragraphs and links come from base.css; this file styles the rest.
   Modifier: uc-text--center (centred text, e.g. a short introduction).
   Two columns of text (UCWS "two-col"): wrap the text in div.uc-text__columns, after the heading and
   before the buttons.
   The list and rule styles (and the quote's, in quote.css) are for editor text wherever it sits: the
   Text block and an open Accordion panel, as UCWS, which styles them the same in every block. The
   Accordion's own list of sub-sections (uc-accordion__steps) is left alone; :where() keeps every
   selector as specific as it was with .uc-text alone. */

.uc-text--center {
  text-align: center;
}

/* Lists, quotes and columns of text stay left-aligned in a centred block, as UCWS. */
.uc-text--center :is(ul, ol, blockquote, .uc-text__columns) {
  text-align: start;
}

/* A centred block heading is at most 75% of the column, as UCWS, so a long one wraps sooner. */
@media (min-width: 768px) { /* breakpoint.md */
  .uc-text--center > :is(h1, h2):first-child {
    max-width: 75%;
    margin-inline: auto;
  }
}

/* Headings in rich text keep space.2 below them, as UCWS (0.5rem); a paragraph's space.4 comes before
   the next heading. */
.uc-text :is(h2, h3, h4) {
  margin-block-end: var(--space-2);
}

/* A subheading keeps a paragraph's space.4 below it (UCWS uses a bold paragraph there). */
.uc-text .uc-subheading {
  margin-block-end: var(--space-4);
}

:is(.uc-text, .uc-accordion__panel) :is(ul, ol):where(:not(.uc-accordion__steps)) {
  margin: 0 0 var(--space-4);
  padding-inline-start: var(--space-4);
}

/* A list that follows a paragraph is indented further, as UCWS (40px bullets; numbers below). */
:is(.uc-text, .uc-accordion__panel) p ~ ul:where(:not(.uc-accordion__steps)) {
  padding-inline-start: var(--space-10);
}

:is(.uc-text, .uc-accordion__panel) li:where(:not(.uc-accordion__step)) {
  margin-block: var(--space-2);
}

/* A list inside a list item has no space of its own below it, as UCWS. */
:is(.uc-text, .uc-accordion__panel) :is(ul, ol):where(:not(.uc-accordion__steps)) :is(ul, ol) {
  margin-block-end: 0;
}

/* Ordered lists: bold numbers in a column of their own (space.8, UCWS 2em), so every item's text and
   its wrapped lines start at the same place, beside the number. The column starts at the block's edge,
   or space.6 in when the list follows a paragraph (UCWS 25px). */
:is(.uc-text, .uc-accordion__panel) ol:where(:not(.uc-accordion__steps)) {
  padding-inline-start: var(--space-8);
  list-style: none;
  counter-reset: uc-item;
}

:is(.uc-text, .uc-accordion__panel) p ~ ol:where(:not(.uc-accordion__steps)) {
  padding-inline-start: calc(var(--space-6) + var(--space-8));
}

:is(.uc-text, .uc-accordion__panel) ol:where(:not(.uc-accordion__steps)) > li {
  position: relative;
  counter-increment: uc-item;
}

:is(.uc-text, .uc-accordion__panel) ol:where(:not(.uc-accordion__steps)) > li::before {
  position: absolute;
  inset-inline-start: calc(-1 * var(--space-8));
  content: counter(uc-item) ".";
  font-weight: var(--font-weight-bold);
}

/* A list straight under the block heading starts space.4 below it, and a list that starts or ends the
   block keeps its first or last item's space.2 inside the block, as UCWS, where the items' margins
   don't collapse (18.8px under the heading, 8.8px at the block's ends). */
.uc-text > :is(h1, h2):first-child + :is(ul, ol) > li:first-child {
  margin-block-start: var(--space-4);
}

.uc-text > :is(ul, ol):first-child {
  padding-block-start: var(--space-2);
}

.uc-text > :is(ul, ol):first-child > li:first-child {
  margin-block-start: 0;
}

.uc-text > :is(ul, ol):last-child {
  padding-block-end: var(--space-2);
}

.uc-text > :is(ul, ol):last-child > li:last-child {
  margin-block-end: 0;
}

:is(.uc-text, .uc-accordion__panel) hr {
  margin: var(--space-4) 0;
  border: 0;
  border-top: var(--border-width-thin) solid currentColor;
  color: inherit; /* browsers give <hr> a grey text colour; use the block's text colour, as UCWS does */
}

.uc-text > :last-child {
  margin-block-end: 0;
}

/* Two columns of text, as UCWS: from breakpoint.md, layout.gutter apart, under a heading that keeps the
   full width. Only in a full-width block: in a layout region the text stays in one column. */
.uc-text__columns > :last-child {
  margin-block-end: 0;
}

@media (min-width: 768px) { /* breakpoint.md */
  .uc-text__columns {
    column-count: 2;
    column-gap: var(--layout-gutter);
  }

  .uc-layout__region .uc-text__columns {
    column-count: auto;
  }
}

/* Buttons at the end of a text block sit in a wrapping row, space.6 below the text (UCWS 25px). */
.uc-text__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-block-start: var(--space-6);
}

/* Centred with the text, as UCWS. */
.uc-text--center .uc-text__actions {
  justify-content: center;
}

/* blocks/text-grid.css */
/* Text grid: an optional icon, the heading and introduction, then any number of sections, two a row, and an
   optional audience list, split by rules. */

/* Accent colour of the icon and every rule (UCWS "accents"): UCalgary red by default, or one of the
   library's accents (uc-text-grid--dark-orange, as the Arts Co-op How to Apply page…). Decorative. */
.uc-text-grid { --uc-text-grid-accent: var(--color-decorative-rule); }
.uc-text-grid--dark-orange { --uc-text-grid-accent: var(--color-decorative-dark-orange); }
.uc-text-grid--light-orange { --uc-text-grid-accent: var(--color-decorative-light-orange); }
.uc-text-grid--gold { --uc-text-grid-accent: var(--color-decorative-gold); }
.uc-text-grid--rubine { --uc-text-grid-accent: var(--color-decorative-rubine); }
.uc-text-grid--berry { --uc-text-grid-accent: var(--color-decorative-berry); }
.uc-text-grid--chocolate { --uc-text-grid-accent: var(--color-decorative-chocolate); }
.uc-text-grid--light-grey { --uc-text-grid-accent: var(--color-decorative-light-grey); }
.uc-text-grid--dark-grey { --uc-text-grid-accent: var(--color-decorative-grey); }
.uc-text-grid--green { --uc-text-grid-accent: var(--color-decorative-green); }

/* The icon is optional: without it the heading and intro take the full width. */
.uc-text-grid__lead:has(> .uc-text-grid__icon) {
  display: grid;
  grid-template-columns: var(--space-14) minmax(0, 1fr);
  column-gap: var(--layout-text-grid-icon-gap);
}

.uc-text-grid__icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--space-14);
  height: var(--space-14);
  margin-block-start: var(--space-2); /* as UCWS: the icon sits 8px below the block's top */
  border: var(--border-width-thin) solid var(--uc-text-grid-accent);
  border-radius: var(--radius-circle);
  color: var(--uc-text-grid-accent);
}

.uc-text-grid__icon .uc-icon {
  width: var(--space-10);
  height: var(--space-10);
}

.uc-text-grid__heading {
  margin-block-end: var(--layout-text-grid-intro-heading-gap);
}

/* An icon and a heading without an intro: the heading is centred on the icon, as UCWS (the Arts homepage). */
.uc-text-grid__icon + div:has(> .uc-text-grid__heading:last-child) {
  align-self: center;
}

.uc-text-grid__icon + div > .uc-text-grid__heading:last-child {
  margin-block: var(--space-2) 0;
}

.uc-text-grid__icon + div > .uc-text-grid__heading:last-child > :last-child {
  margin-block-end: 0;
}

/* The intro is medium weight, as UCWS (a block header's paragraphs). */
.uc-text-grid__intro p {
  margin-block-end: var(--layout-text-grid-intro-paragraph-gap);
  font-weight: var(--font-weight-medium);
}

.uc-text-grid__intro p:last-child {
  margin-block-end: 0;
}

/* The sections (UCWS "text chunks"): any number, two a row from breakpoint.lg. A thin rule in the accent
   stands above every section after the first two, layout.text-grid.column-edge-padding above and below its
   text; the last section has no padding below it (UCWS takes it back). */
.uc-text-grid__columns {
  display: grid;
  gap: 0;
  margin-block-start: var(--layout-text-grid-rule-gap);
  padding-block-start: var(--layout-text-grid-rule-gap);
  border-block-start: var(--layout-text-grid-rule-width) solid var(--uc-text-grid-accent);
}

.uc-text-grid__columns > div:nth-child(n + 3) {
  padding-block: var(--layout-text-grid-column-edge-padding);
  border-block-start: var(--border-width-thin) solid var(--uc-text-grid-accent);
}

.uc-text-grid__columns > div:nth-child(2):not(:last-child) {
  padding-block-end: var(--layout-text-grid-column-edge-padding);
}

.uc-text-grid__columns > div:last-child {
  padding-block-end: 0;
}

.uc-text-grid__columns ul {
  padding-inline-start: var(--space-10);
}

.uc-text-grid__columns li + li {
  margin-block-start: var(--space-2);
}

/* A section: its heading, space.4, then its text, which keeps its space.4 below it, as UCWS's rich text and
   as the audience items; a More link can end it. A section that is only a heading ends at the heading. */
.uc-text-grid__columns h3 {
  margin-block-end: var(--space-4);
  font-size: var(--font-size-h4-base);
  line-height: var(--font-line-height-h4-base);
}

.uc-text-grid__columns > div > h3:last-child {
  margin-block-end: 0;
}

/* Sections of plain text (uc-text-grid__columns--plain), as UCWS when a section's text has no formatting:
   the text sits space.1 under its heading and adds no space below itself (the Block Library's example). */
.uc-text-grid__columns--plain h3 {
  margin-block-end: var(--space-1);
}

.uc-text-grid__columns--plain > div > :last-child {
  margin-block-end: 0;
}

.uc-text-grid__audience {
  margin-block-start: var(--space-10);
  padding-block-start: var(--layout-text-grid-audience-rule-padding);
  border-block-start: var(--layout-text-grid-rule-width) solid var(--uc-text-grid-accent);
}

.uc-text-grid__audience > h3 {
  margin-block-end: var(--layout-text-grid-audience-rule-padding);
}

.uc-text-grid__audiences {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.uc-text-grid__audience-item {
  padding-block: var(--layout-text-grid-audience-item-padding);
  border-block-start: var(--border-width-thin) solid var(--uc-text-grid-accent);
}

.uc-text-grid__audience-item h4 {
  margin: 0;
  font-size: var(--font-size-h4-base);
  line-height: var(--font-line-height-h4-base);
}

.uc-text-grid__audience-item p {
  margin-block-start: var(--layout-text-grid-audience-item-gap);
}

/* Stacked columns (below breakpoint.lg): space before the second. */
@media (max-width: 991px) { /* below breakpoint.lg */
  .uc-text-grid__columns > div + div {
    padding-block-start: var(--space-4);
  }
}

@media (max-width: 767px) { /* below breakpoint.md */
  .uc-text-grid__columns > div:first-child {
    margin-block-start: calc(-1 * var(--layout-text-grid-column-edge-padding));
    margin-block-end: 0;
    padding-block: var(--layout-text-grid-column-edge-padding) calc(var(--layout-text-grid-column-edge-padding) + var(--space-1));
  }
}

/* Two a row from breakpoint.lg, each row's sections starting at the top, as UCWS: the first two sections
   keep layout.text-grid.column-edge-padding above and below their text as well, and the block's own space
   above them is that much less. */
@media (min-width: 992px) { /* breakpoint.lg */
  .uc-text-grid__columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--layout-gutter);
    padding-block-start: calc(var(--layout-text-grid-rule-gap) - var(--layout-text-grid-column-edge-padding));
  }

  .uc-text-grid__columns > div {
    padding-block: var(--layout-text-grid-column-edge-padding);
  }

  .uc-text-grid__audiences {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--layout-gutter);
  }
}

/* Headings step up with the h4 size, as UCWS (19px). */
@media (min-width: 768px) { /* breakpoint.md */
  .uc-text-grid__columns h3,
  .uc-text-grid__audience-item h4 {
    font-size: var(--font-size-h4-md);
    line-height: var(--font-line-height-h4-md);
  }
}

/* blocks/accordion-minimal.css */
/* Accordion (Minimal): the block heading beside a lighter accordion, as UCWS: questions in the text
   colour between grey rules. The block's own width decides, not the window's: from breakpoint.lg wide
   (a full-width layout) the heading takes a third and the questions the rest; in a narrower column
   the heading sits above them, as UCWS in every layout region. (UCWS's heading column is 356px at 1440;
   a 33/66 layout's 4 columns, 358px, wrap the Award page's heading onto a fifth line here, so the
   heading keeps a full third.) The heading can bring a description: wrap both in
   uc-accordion-minimal__header. The heading is optional: without it the questions take the block's
   full width. */

.uc-block:has(> .uc-accordion-minimal) {
  container: uc-accordion-minimal / inline-size;
}

/* The heading above the questions (a layout region): space.5 between them, as UCWS (20px). */
.uc-accordion-minimal {
  display: grid;
  gap: var(--space-5);
}

.uc-accordion-minimal__heading {
  margin: 0;
}

.uc-accordion-minimal__header > .uc-accordion-minimal__heading {
  margin-block-end: var(--space-2);
}

.uc-accordion-minimal__header > :last-child {
  margin-block-end: 0;
}

.uc-accordion-minimal .uc-accordion {
  border-block-start: var(--border-width-thick) solid var(--color-border-accordion);
}

.uc-accordion-minimal .uc-accordion__item {
  border-block-end: var(--border-width-thick) solid var(--color-border-accordion);
}

/* A question that wraps keeps space.2 above and below it (UCWS 10px and 8px); one line stays
   layout.accordion.minimal-row-height tall. */
.uc-accordion-minimal .uc-accordion__trigger {
  min-height: var(--layout-accordion-minimal-row-height);
  padding-block: var(--space-2);
}

/* An open section's content ends space.5 above the rule, as UCWS (20px). */
.uc-accordion-minimal .uc-accordion__panel {
  padding-block-end: var(--space-5);
}

.uc-accordion-minimal .uc-accordion__panel > :last-child {
  margin-block-end: 0;
}

/* A section's button (p.uc-accordion__actions, last in the panel) sits at the start, as UCWS: space.6
   below the text (26px) and space.2 more above the rule (30px in all). */
.uc-accordion-minimal .uc-accordion__actions {
  justify-content: flex-start;
  margin-block-start: var(--space-6);
}

.uc-accordion-minimal .uc-accordion__panel > .uc-accordion__actions:last-child {
  margin-block-end: var(--space-2);
}

/* Beside the questions only when there is a heading: without one they take the full width, as UCWS
   ("no-heading"). */
@container uc-accordion-minimal (min-width: 992px) { /* breakpoint.lg: the block's width */
  .uc-accordion-minimal:has(> .uc-accordion-minimal__heading, > .uc-accordion-minimal__header) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: var(--layout-gutter);
  }
}

/* blocks/more-info.css */
/* More information: items with an icon, heading, text and link. Background comes from a uc-bg--* class. */

.uc-more-info__items {
  display: grid;
  gap: var(--space-8) var(--layout-gutter);
  margin: 0;
  padding: 0;
  list-style: none;
}

.uc-more-info__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4);
  align-items: start;
}

/* Icons above the text (UCWS "stacked icons"); the default is beside it ("inline icons"). */
.uc-more-info--stacked .uc-more-info__item {
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
}

.uc-more-info__heading {
  margin-block-end: var(--space-6);
}

/* An optional description under the heading (UCWS: up to 500 characters), medium weight as UCWS's block
   header paragraphs. */
.uc-more-info__intro {
  margin-block-end: var(--space-6);
  font-weight: var(--font-weight-medium);
}

/* More than four items: several blocks stacked as one band (UCWS "collapse whitespace").
   uc-more-info--collapse on a block puts the next More information block straight under it, and on a
   band that block drops its top padding, so the rows of items are one band padding apart. */
.uc-more-info.uc-more-info--collapse {
  margin-block-end: 0;
}

.uc-more-info--collapse + .uc-more-info.uc-band {
  padding-block-start: 0;
}

/* Accent icons, as UCWS: on a band, the band's accent colour (background.css, and the bands listed
   below); on white, light grey by default or one of the library's accents (uc-more-info--red…), which
   apply on white only. */
.uc-more-info { --uc-more-info-accent: var(--color-decorative-light-grey); }

/* The block is the container its columns follow (its width, not the window's): the section with
   uc-more-info, or the block holding the items where older markup leaves that class off. */
.uc-more-info,
.uc-block:has(> .uc-container > .uc-more-info__items) {
  container: uc-more-info / inline-size;
}
.uc-more-info[class*="uc-bg--"] { --uc-more-info-accent: var(--color-icon-accent); }
/* The other solid bands and the tints have an accent of their own on UCWS too (colors.md → Accent icons). */
.uc-more-info.uc-bg--subtle { --uc-more-info-accent: var(--color-icon-accent-on-subtle); }
.uc-more-info.uc-bg--rubine { --uc-more-info-accent: var(--color-icon-accent-on-rubine); }
.uc-more-info.uc-bg--berry { --uc-more-info-accent: var(--color-icon-accent-on-berry); }
.uc-more-info.uc-bg--chocolate { --uc-more-info-accent: var(--color-icon-accent-on-chocolate); }
.uc-more-info.uc-bg--berry-tint { --uc-more-info-accent: var(--color-icon-accent-on-berry-tint); }
.uc-more-info.uc-bg--dark-orange-tint { --uc-more-info-accent: var(--color-icon-accent-on-dark-orange-tint); }
.uc-more-info.uc-bg--light-orange-tint { --uc-more-info-accent: var(--color-icon-accent-on-light-orange-tint); }
.uc-more-info.uc-bg--taupe-tint { --uc-more-info-accent: var(--color-icon-accent-on-taupe-tint); }
.uc-more-info.uc-bg--teal-tint { --uc-more-info-accent: var(--color-icon-accent-on-teal-tint); }
.uc-more-info--red { --uc-more-info-accent: var(--color-decorative-rule); }
.uc-more-info--dark-orange { --uc-more-info-accent: var(--color-decorative-dark-orange); }
.uc-more-info--light-orange { --uc-more-info-accent: var(--color-decorative-light-orange); }
.uc-more-info--gold { --uc-more-info-accent: var(--color-decorative-gold); }
.uc-more-info--rubine { --uc-more-info-accent: var(--color-decorative-rubine); }
.uc-more-info--berry { --uc-more-info-accent: var(--color-decorative-berry); }
.uc-more-info--chocolate { --uc-more-info-accent: var(--color-decorative-chocolate); }
.uc-more-info--light-grey { --uc-more-info-accent: var(--color-decorative-light-grey); }
.uc-more-info--dark-grey { --uc-more-info-accent: var(--color-decorative-grey); }
.uc-more-info--green { --uc-more-info-accent: var(--color-decorative-green); }

.uc-more-info__item > .uc-icon {
  width: var(--size-icon-2xl);
  height: var(--size-icon-2xl);
  color: var(--uc-more-info-accent);
}

.uc-more-info__item h3 {
  margin-block-end: var(--space-2);
}

/* No space under an item's last line (UCWS). */
.uc-more-info__item > div > :last-child {
  margin-block-end: 0;
}

/* A list of links in place of the text and "more" link (UCWS: bullets indented 1.125em, items
   0.55em apart; the list is the item's last child, so no space below it). */
.uc-more-info__item ul {
  margin: 0;
  padding-inline-start: var(--space-4);
}

.uc-more-info__item li {
  margin-block: var(--space-2);
}

/* Columns by the block's own width (UCWS stacks the sections to suit the column): one; two from
   layout.more-info.two-column-width wide on screens from breakpoint.md (a 50% region or wider, as UCWS:
   a 33% or 25% region keeps one); three (or four) from breakpoint.lg wide. */
@media (min-width: 768px) { /* breakpoint.md */
  @container uc-more-info (min-width: 400px) { /* layout.more-info.two-column-width: the block's width */
    .uc-more-info__items {
      grid-template-columns: 1fr 1fr;
    }
  }
}

@container uc-more-info (min-width: 992px) { /* breakpoint.lg: the block's width */
  .uc-more-info__items {
    grid-template-columns: 1fr 1fr 1fr;
  }

  /* Two items share the row, half each, and one item takes half (UCWS). */
  .uc-more-info__items:has(> :nth-child(2):last-child),
  .uc-more-info__items:has(> :only-child) {
    grid-template-columns: 1fr 1fr;
  }

  /* Four items, as on the explore-programs page. Default stays three. */
  .uc-more-info--four .uc-more-info__items {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

/* blocks/info-shim.css */
/* Info shim: one short line with a link, above a divider carrying an accent icon.
   Modifiers: uc-info-shim--callout (the Arts Co-op How to Apply deadline callout, page-observed
   spacing) and uc-info-shim--grid. */

.uc-info-shim {
  text-align: center;
}

.uc-info-shim__text {
  margin-block-end: var(--space-4);
  font-size: var(--font-size-lead);
  line-height: var(--font-line-height-lead);
}

/* The divider, as UCWS: a line (color.decorative.light-grey) with a half-circle tab hanging from its
   middle, holding the icon. The tab is layout.info-shim.rule-height tall and twice as wide, and covers
   the line where they meet. */
.uc-info-shim__rule {
  display: flex;
  justify-content: center;
  border-top: var(--border-width-thick) solid var(--color-decorative-light-grey);
  color: var(--color-decorative-light-grey);
}

/* On a colour band the icon takes the band's accent (background.css). */
[class*="uc-bg--"] .uc-info-shim__rule {
  color: var(--color-icon-accent);
}

.uc-info-shim__icon {
  display: flex;
  justify-content: center;
  width: calc(2 * var(--layout-info-shim-rule-height));
  height: var(--layout-info-shim-rule-height);
  margin-block-start: calc(-1 * var(--border-width-thick));
  border: var(--border-width-thick) solid var(--color-decorative-light-grey);
  border-top: 0;
  border-radius: 0 0 var(--layout-info-shim-rule-height) var(--layout-info-shim-rule-height);
  background: var(--color-background-default);
}

/* The icon starts above the tab by as much as the tab is taller than the icon, as UCWS. */
.uc-info-shim__icon .uc-icon {
  margin-block-start: calc(var(--size-icon-md) - var(--layout-info-shim-rule-height));
}

/* Icon colour options, as UCWS (the Divider's colours). Without one, light grey on white (the Block
   Library's default) and the band's accent on a band. The icon is decorative, so no contrast minimum
   applies. */
.uc-info-shim--red .uc-info-shim__rule { color: var(--color-decorative-rule); }
.uc-info-shim--berry .uc-info-shim__rule { color: var(--color-decorative-berry); }
.uc-info-shim--rubine .uc-info-shim__rule { color: var(--color-decorative-rubine); }
.uc-info-shim--dark-orange .uc-info-shim__rule { color: var(--color-decorative-dark-orange); }
.uc-info-shim--light-orange .uc-info-shim__rule { color: var(--color-decorative-light-orange); }
.uc-info-shim--gold .uc-info-shim__rule { color: var(--color-decorative-gold); }
.uc-info-shim--light-grey .uc-info-shim__rule { color: var(--color-decorative-light-grey); }
.uc-info-shim--dark-grey .uc-info-shim__rule { color: var(--color-decorative-grey); }
.uc-info-shim--chocolate .uc-info-shim__rule { color: var(--color-decorative-chocolate); }
.uc-info-shim--green .uc-info-shim__rule { color: var(--color-decorative-green); }

/* Deadline callout (Arts Co-op How to Apply): values observed on that page (layout.md → Arts Co-op
   How to Apply reference observations), not confirmed for every info shim. It sits above a rounded
   band there, so the page gives it uc-block--rounded-below. */
.uc-info-shim--callout {
  margin-block-end: 0;
}

.uc-info-shim--callout .uc-info-shim__text {
  font-size: var(--font-size-callout);
  line-height: var(--font-line-height-callout);
}

/* The text row's minimum height was observed at 375px (two lines there); from breakpoint.md it's one
   line, as tall as its link. */
@media (max-width: 767px) { /* below breakpoint.md */
  .uc-info-shim--callout .uc-info-shim__text {
    min-height: var(--layout-info-shim-text-height);
  }
}


/* Grid variant observed on the How to Apply reference page. */
.uc-info-shim--grid {
  text-align: start;
}

.uc-info-shim--grid .uc-info-shim__heading {
  margin-block-end: var(--space-4);
  padding-block-end: var(--space-2);
  border-block-end: var(--border-width-thick) solid var(--color-action-primary);
}

.uc-info-shim__items {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5) var(--layout-gutter);
  margin: 0;
  padding: 0;
  list-style: none;
}

.uc-info-shim__item {
  padding-block-start: var(--space-2);
  border-block-start: var(--border-width-thin) solid var(--color-action-primary);
}

.uc-info-shim__item h3 {
  margin-block-end: var(--space-2);
  font-size: var(--font-size-h4-base);
  line-height: var(--font-line-height-h4-base);
}

@media (min-width: 992px) { /* breakpoint.lg */
  .uc-info-shim__items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* blocks/checklist.css */
/* Checklist: ordered steps on a full-width band. The band class (uc-bg--*) gives its colours, the
   check marks included. A plain band (uc-band) has the band's padding; a rounded one (uc-band--rounded,
   without uc-band) gets its space from the rounded caps. Each step's heading starts with its number,
   as UCWS. A step can end with a More link (components/link.css), inline after its text. */

.uc-checklist > .uc-container {
  padding-block: var(--layout-checklist-inset);
}

.uc-checklist h2 {
  margin-block-end: var(--layout-checklist-heading-gap);
}

/* The intro under the heading is medium weight, as UCWS (a block header's paragraphs). */
.uc-checklist > .uc-container > p {
  margin-block-end: 0;
  font-weight: var(--font-weight-medium);
}

.uc-checklist__steps {
  counter-reset: uc-step;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--layout-checklist-item-gap) var(--layout-gutter);
  margin: var(--layout-checklist-heading-gap) 0 0;
  padding: 0;
  list-style: none;
}

/* The check marks' accent colour, as UCWS: on a band, the band's accent (background.css); on white,
   light grey by default or one of the library's accents (uc-checklist--red…), on white only. */
.uc-checklist { --uc-checklist-accent: var(--color-decorative-light-grey); }
.uc-checklist[class*="uc-bg--"] { --uc-checklist-accent: var(--color-icon-accent); }
.uc-checklist--red { --uc-checklist-accent: var(--color-decorative-rule); }
.uc-checklist--dark-orange { --uc-checklist-accent: var(--color-decorative-dark-orange); }
.uc-checklist--light-orange { --uc-checklist-accent: var(--color-decorative-light-orange); }
.uc-checklist--gold { --uc-checklist-accent: var(--color-decorative-gold); }
.uc-checklist--rubine { --uc-checklist-accent: var(--color-decorative-rubine); }
.uc-checklist--berry { --uc-checklist-accent: var(--color-decorative-berry); }
.uc-checklist--chocolate { --uc-checklist-accent: var(--color-decorative-chocolate); }
.uc-checklist--light-grey { --uc-checklist-accent: var(--color-decorative-light-grey); }
.uc-checklist--dark-grey { --uc-checklist-accent: var(--color-decorative-grey); }
.uc-checklist--green { --uc-checklist-accent: var(--color-decorative-green); }

.uc-checklist__step {
  counter-increment: uc-step;
  position: relative;
  padding-inline-start: var(--layout-checklist-text-offset);
}

.uc-checklist__step::before {
  position: absolute;
  inset-block-start: calc(-1 * var(--space-1));
  inset-inline-start: calc(-1 * var(--space-1));
  display: flex;
  width: var(--layout-checklist-icon-size);
  height: var(--layout-checklist-icon-size);
  align-items: center;
  justify-content: center;
  border: var(--border-width-thick) solid;
  color: var(--uc-checklist-accent);
  content: "✓" / ""; /* decorative */
  font-size: var(--font-size-callout);
  font-weight: var(--font-weight-bold);
}

.uc-checklist__step h3 {
  margin-block-end: var(--space-2);
}

/* The step number: decorative (the list is ordered, so screen readers already say which step). */
.uc-checklist__step h3::before {
  display: block;
  margin-block-end: var(--space-2);
  content: counter(uc-step) / "";
  font-size: var(--font-size-step-number);
  font-weight: var(--font-weight-bold);
  line-height: var(--font-line-height-step-number);
}

.uc-checklist__step > :last-child {
  margin-block-end: 0;
}

/* A step's More link: the arrow takes its own width and no more, as UCWS's (size.icon.lg), so that in these
   narrow columns a link wraps where live's does. */
.uc-checklist__step > .uc-link--more .uc-link__arrow {
  margin-inline-start: 0;
}

@media (min-width: 768px) { /* breakpoint.md */
  .uc-checklist__steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* From breakpoint.lg the steps share the row by their count, as UCWS ("two-items", "three-items",
   "max-items"): two or three steps fill it; four or more go four a row. */
@media (min-width: 992px) { /* breakpoint.lg */
  .uc-checklist__steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .uc-checklist__steps:has(> :nth-child(2):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .uc-checklist__steps:has(> :nth-child(3):last-child) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* blocks/cards.css */
/* Cards block: stacked below breakpoint.lg, three across from it.
   UCWS leaves a band above the cards (its block heading area), even when there is no heading. */

.uc-cards {
  padding-block-start: var(--space-12);
}

/* A visible heading takes that band's place. */
.uc-cards:has(> h2:not(.uc-visually-hidden), > .uc-block-header) {
  padding-block-start: 0;
}

/* It is centred, space.12 above the cards, as UCWS: in a uc-block-header (which can hold a description
   too, space.6 under the heading), or as a bare h2. */
.uc-cards > h2:not(.uc-visually-hidden) {
  margin-block-end: var(--space-12);
  text-align: center;
}

.uc-cards .uc-block-header > h2:not(:last-child) {
  margin-block-end: var(--space-6);
}

.uc-cards__list {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The whole card follows its link (UCWS does this with a script): the action's link is stretched over
   the card. A link in the card's heading or text stays above it. */
.uc-cards .uc-card {
  position: relative;
}

.uc-cards .uc-card__action a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-md);
}

.uc-cards .uc-card > :not(.uc-card__action) a {
  position: relative;
  z-index: 1;
}

@media (min-width: 992px) { /* breakpoint.lg */
  .uc-cards__list {
    grid-template-columns: 1fr 1fr 1fr;
  }

  /* Cards grow slightly on hover, as UCWS. */
  .uc-cards .uc-card {
    transition: transform var(--motion-duration-fast) var(--motion-easing-emphasized);
  }

  .uc-cards .uc-card:hover {
    transform: scale(var(--motion-scale-hover-sm));
  }
}

/* Reduced motion: no hover scaling (size.md → Motion). */
@media (prefers-reduced-motion: reduce) {
  .uc-cards .uc-card:hover {
    transform: none;
  }
}

/* blocks/banner.css */
/* Banner, matching UCWS (most-used block after Text: 91 uses on 45 of 60 surveyed pages).
   Two kinds:
   - Graphic banner: a colour or gradient band. Add a uc-bg--* class for the background.
   - Image banner (uc-banner--image): a photo behind light text, with a dark scrim behind the text.
   Content sits in the page container with space.12 above and below.
   Modifiers: --center, --right (where the text column sits; --center also centres the text);
   --text-center, --text-left (text alignment, when it differs from the position's own);
   --bottom (vertical position, image banners); --short, --tall (image banner minimum height);
   --standard (photo below full-bleed size); --no-scrim; --no-shadow; --focus-left, --focus-right (the
   side of the photo that stays in view); --rounded-top, --rounded (graphic banners);
   --image-only (words in the picture, no heading).
   Short and tall heights follow the page, as UCWS: see "Page mode" at the end. */

.uc-banner {
  position: relative;
  display: flex;
  isolation: isolate;
  overflow: hidden;
}

.uc-banner__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.uc-banner__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.uc-banner__inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: var(--space-12);
}

.uc-banner__content {
  max-width: calc(100% * 11 / 12);
}

.uc-banner__content h1,
.uc-banner__content h2 {
  margin-block-end: var(--space-2);
}

/* Overlay hero (Hero CTA, homepage variant): a tall image banner that starts the page,
   with the h1 and an intro paragraph (uc-intro). layout.hero.height from breakpoint.md. */
@media (min-width: 768px) { /* breakpoint.md */
  .uc-banner--hero {
    min-height: var(--layout-hero-height);
  }
}

.uc-banner__content > :last-child {
  margin-block-end: 0;
}

/* Buttons: space.3 apart on a row; two that wrap onto two rows are space.5 apart (UCWS 20px). */
.uc-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5) var(--space-3);
  margin: 0;
  list-style: none; /* the actions can be a div or a list of buttons */
  padding-inline-start: 0;
  padding-block-start: var(--space-3); /* padding, not margin, so it adds to the heading/paragraph margin as in UCWS */
}

/* Position and alignment are two settings, as UCWS. Position, where the text column sits: left (default),
   --center or --right. Alignment: left, except in the centred column, whose text is centred. To choose it
   apart from the position: --text-center centres the text and buttons in a left or right column,
   --text-left left-aligns them in a centred one.
   The centred and right columns are layout.banner.text-width wide however short the text is (width: 100%):
   an auto margin would otherwise shrink them to their longest line and move the text. */
.uc-banner--center .uc-banner__content {
  width: 100%;
  max-width: var(--layout-banner-text-width);
  margin-inline: auto;
  text-align: center;
}

.uc-banner--center .uc-banner__actions {
  justify-content: center;
}

.uc-banner--right .uc-banner__content {
  width: 100%;
  max-width: var(--layout-banner-text-width);
  margin-inline-start: auto;
}

.uc-banner--text-center .uc-banner__content {
  text-align: center;
}

.uc-banner--text-center .uc-banner__actions {
  justify-content: center;
}

.uc-banner--text-left .uc-banner__content {
  text-align: start;
}

.uc-banner--text-left .uc-banner__actions {
  justify-content: flex-start;
}

.uc-banner--bottom .uc-banner__inner {
  justify-content: flex-end;
}

/* Image banner: light text on a photo. The primary button keeps its red fill. */
.uc-banner--image {
  color: var(--color-text-inverse);
  --color-focus-ring: var(--color-focus-ring-on-dark);
}

.uc-banner--image a:not(.uc-button) {
  color: inherit;
}

.uc-banner--image .uc-banner__content {
  max-width: var(--layout-banner-text-width);
  text-shadow: var(--shadow-text-glow);
}

/* Bottom centre (UCWS "vbottom hcenter"): from breakpoint.md the text column is three quarters of the
   container, as UCWS, so a long heading takes fewer lines. */
@media (min-width: 768px) { /* breakpoint.md */
  .uc-banner--image.uc-banner--bottom.uc-banner--center .uc-banner__content {
    max-width: calc(100% * 3 / 4);
  }
}

/* Buttons on photos don't inherit the text glow (it smudges their label); they get the dark button
   glow instead, as UCWS (its "light" text option). */
.uc-banner--image .uc-button {
  text-shadow: none;
  box-shadow: var(--shadow-sm);
}

/* No shadow (UCWS "no-shadow"): no glow behind the text or the buttons. The scrim still gives the text
   its contrast. */
.uc-banner--no-shadow .uc-banner__content {
  text-shadow: none;
}

.uc-banner--no-shadow .uc-button {
  box-shadow: none;
}

/* Focal point (UCWS "focus-left", "focus-right"): the side of the photo that stays in view where the
   banner crops it. Default: the centre. */
.uc-banner--focus-left .uc-banner__media img {
  object-position: left center;
}

.uc-banner--focus-right .uc-banner__media img {
  object-position: right center;
}

/* Scrim: full strength from the edge to the end of the text column, then fading out, so white text
   passes on any photo (UCWS fades it out at 70% of the width, which leaves text on bare photo).
   --uc-banner-text-end is where the text column ends: the container edge plus the text width. */
.uc-banner--image .uc-banner__media::after {
  --uc-banner-text-end: calc(max(var(--layout-container-padding), (100% - var(--layout-container-max-width)) / 2 + var(--layout-container-padding)) + var(--layout-banner-text-width));
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, var(--color-overlay-scrim-dark) var(--uc-banner-text-end), transparent calc(var(--uc-banner-text-end) + 20%));
}

.uc-banner--image.uc-banner--right .uc-banner__media::after {
  background: linear-gradient(to left, var(--color-overlay-scrim-dark) var(--uc-banner-text-end), transparent calc(var(--uc-banner-text-end) + 20%));
}

/* Centred text in the middle: full strength under the centred text column, fading towards both sides
   (UCWS draws no scrim there; white text needs one). Bottom-left and bottom-right keep the side scrim (UCWS). */
.uc-banner--image.uc-banner--center .uc-banner__media::after {
  background: linear-gradient(to right, transparent, var(--color-overlay-scrim-dark) calc(50% - var(--layout-banner-text-width) / 2 - var(--space-8)), var(--color-overlay-scrim-dark) calc(50% + var(--layout-banner-text-width) / 2 + var(--space-8)), transparent);
}

/* Bottom centre: the scrim rises from the bottom edge, as UCWS. UCWS's runs from 60% black at the edge to
   nothing at 40% of the height, which leaves the top of the text on bare photo. Here it hangs on the text
   block, so it follows the text: full strength from the bottom edge to the top of the text, whatever the
   text's height, then fading out over space.24 above it. The banner clips it at its sides and bottom. */
.uc-banner--image.uc-banner--bottom.uc-banner--center .uc-banner__media::after {
  display: none;
}

.uc-banner--image.uc-banner--bottom.uc-banner--center .uc-banner__content {
  position: relative;
}

.uc-banner--image.uc-banner--bottom.uc-banner--center:not(.uc-banner--no-scrim) .uc-banner__content::before {
  content: "";
  position: absolute;
  inset-block: calc(-1 * var(--space-24)) -100vw;
  inset-inline: -100vw;
  z-index: -1;
  background: linear-gradient(to bottom, transparent, var(--color-overlay-scrim-dark) var(--space-24));
}

.uc-banner--no-scrim .uc-banner__media::after {
  display: none;
}

/* A photo before or after a rounded block (UCWS "rounded-block-below" and "rounded-block-above" on image
   banners and the overlay hero): the photo keeps its height and runs under the block's rounded cap, and
   the text keeps clear of the cap by the room the block would otherwise leave (components/layout.css). */
.uc-banner--image.uc-block--rounded-below {
  padding-block-end: 0;
}

.uc-banner--image.uc-block--rounded-below > .uc-banner__inner {
  padding-block-end: calc(var(--space-12) + var(--radius-lg));
}

.uc-banner--image.uc-block--rounded-above {
  padding-block-start: 0;
}

.uc-banner--image.uc-block--rounded-above > .uc-banner__inner {
  padding-block-start: calc(var(--space-12) + var(--radius-lg));
}

/* Rounded ends (UCWS "roundable" banners: rounded-top and rounded-both; graphic banners). The banner's
   colour carries on above the block, and for --rounded below it too, in a rounded cap (radius.lg;
   radius.xl from breakpoint.xl) that lies over the block next to it and takes the place of the banner's
   padding at that end. The cap overlaps the banner by border.width.thin, so no line shows between them.
   The block before sits flush under the cap when it is a photo (an image banner or hero with
   uc-block--rounded-below); any other block leaves room with uc-block--rounded-below, and the block after
   a --rounded banner with uc-block--rounded-above. --rounded has no space below; --rounded-top keeps its
   bottom padding and the space below. In a half of the Wide Double layout neither does anything, as UCWS. */
:not(.uc-layout-wide-double) > :is(.uc-banner--rounded-top, .uc-banner--rounded):not(.uc-banner--image) {
  z-index: 1; /* above the blocks its caps lie over */
  overflow: visible;
}

:not(.uc-layout-wide-double) > :is(.uc-banner--rounded-top, .uc-banner--rounded):not(.uc-banner--image) > .uc-banner__inner {
  padding-block-start: 0;
}

:not(.uc-layout-wide-double) > .uc-banner--rounded:not(.uc-banner--image) {
  margin-block-end: 0;
}

:not(.uc-layout-wide-double) > .uc-banner--rounded:not(.uc-banner--image) > .uc-banner__inner {
  padding-block-end: 0;
}

:not(.uc-layout-wide-double) > :is(.uc-banner--rounded-top, .uc-banner--rounded):not(.uc-banner--image)::before,
:not(.uc-layout-wide-double) > .uc-banner--rounded:not(.uc-banner--image)::after {
  position: absolute;
  inset-inline: 0;
  height: var(--radius-lg);
  background: inherit;
  content: "";
}

:not(.uc-layout-wide-double) > :is(.uc-banner--rounded-top, .uc-banner--rounded):not(.uc-banner--image)::before {
  inset-block-end: calc(100% - var(--border-width-thin));
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

:not(.uc-layout-wide-double) > .uc-banner--rounded:not(.uc-banner--image)::after {
  inset-block-start: calc(100% - var(--border-width-thin));
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

@media (min-width: 1200px) { /* breakpoint.xl */
  .uc-banner--image.uc-block--rounded-below > .uc-banner__inner {
    padding-block-end: calc(var(--space-12) + var(--radius-xl));
  }

  .uc-banner--image.uc-block--rounded-above > .uc-banner__inner {
    padding-block-start: calc(var(--space-12) + var(--radius-xl));
  }

  :not(.uc-layout-wide-double) > :is(.uc-banner--rounded-top, .uc-banner--rounded):not(.uc-banner--image)::before,
  :not(.uc-layout-wide-double) > .uc-banner--rounded:not(.uc-banner--image)::after {
    height: var(--radius-xl);
  }

  :not(.uc-layout-wide-double) > :is(.uc-banner--rounded-top, .uc-banner--rounded):not(.uc-banner--image)::before {
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  }

  :not(.uc-layout-wide-double) > .uc-banner--rounded:not(.uc-banner--image)::after {
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  }
}

/* Photo below full-bleed size (UCWS: an image banner without "full-bleed-ready", for a photo smaller than
   the full-bleed files): it keeps layout.banner.min-height.short or .tall on every page and at every
   width (the Page mode rules below leave it alone), and is never wider than layout.block.max-width. */
.uc-banner--standard {
  max-width: var(--layout-block-max-width);
  margin-inline: auto;
}

@media (min-width: 992px) { /* breakpoint.lg */
  .uc-banner--short {
    min-height: var(--layout-banner-min-height-short);
  }

  .uc-banner--tall {
    min-height: var(--layout-banner-min-height-tall);
  }

  /* The set height holds until the text needs more, as UCWS, which centres the text in a fixed height and
     lets it run into the padding. Here the padding shrinks to space.6 instead, so a short banner fits text
     up to 252px tall; taller text still makes it grow, so nothing is cut off. */
  .uc-banner--short .uc-banner__inner,
  .uc-banner--tall .uc-banner__inner {
    flex: 1;
    padding-block: var(--space-6);
  }

  /* Text at the bottom keeps the banner's own space.12 under it (UCWS 50px). */
  .uc-banner--bottom .uc-banner__inner {
    padding-block-end: var(--space-12);
  }
}

/* Page mode, as UCWS. On a page that starts with a full-bleed hero (the overlay, split, stand-alone or
   text Hero CTA: every hero but the mini image hero), short image banners are layout.banner.min-height.short
   tall and, from breakpoint.wide, at least aspect-ratio.banner-short of the width (tall ones: .tall and
   aspect-ratio.banner-tall): UCWS "full-bleed". On any other page, such as one with a mini image hero, UCWS
   shows the photo at its file's own height instead ("full-bleed-ready"): from breakpoint.xl short banners are
   layout.banner.min-height.short-xl tall and tall ones .tall-xl, at every wider width; so is a short image
   banner in a half of the Wide Double layout, on every page.
   Image-only banners keep their picture's ratio on every page, and --standard banners their own height. */
@media (min-width: 1200px) { /* breakpoint.xl */
  main:not(:has(> :is(.uc-banner--hero, .uc-hero-split, .uc-hero-standalone, .uc-hero-title))) .uc-banner--short:not(.uc-banner--image-only, .uc-banner--standard),
  .uc-layout-wide-double > .uc-banner--short:not(.uc-banner--image-only, .uc-banner--standard) {
    min-height: var(--layout-banner-min-height-short-xl);
  }

  main:not(:has(> :is(.uc-banner--hero, .uc-hero-split, .uc-hero-standalone, .uc-hero-title))) .uc-banner--tall:not(.uc-banner--standard) {
    min-height: var(--layout-banner-min-height-tall-xl);
  }
}

@media (min-width: 1500px) { /* breakpoint.wide */
  /* A spacer as tall as the ratio: the banner is at least that tall and still grows with its text.
     The overlay hero always grows (40% of the width, as UCWS's full-bleed hero). */
  .uc-banner--hero::before {
    content: "";
    flex: none;
    width: 100%;
    margin-inline-end: -100%;
    aspect-ratio: var(--aspect-ratio-banner-tall);
  }

  main:has(> :is(.uc-banner--hero, .uc-hero-split, .uc-hero-standalone, .uc-hero-title)) :is(.uc-banner--short, .uc-banner--tall):not(.uc-banner--image-only, .uc-banner--standard)::before {
    content: "";
    flex: none;
    width: 100%;
    margin-inline-end: -100%;
    aspect-ratio: var(--aspect-ratio-banner-short);
  }

  main:has(> :is(.uc-banner--hero, .uc-hero-split, .uc-hero-standalone, .uc-hero-title)) .uc-banner--tall:not(.uc-banner--image-only, .uc-banner--standard)::before {
    aspect-ratio: var(--aspect-ratio-banner-tall);
  }
}

/* Image only: the words are in the picture, so the whole picture must show. It keeps its ratio at
   every width, with no minimum height (a minimum would crop it, and together with the ratio it
   would push a minimum width wider than the page). */
.uc-banner--image-only {
  aspect-ratio: var(--aspect-ratio-banner-short);
  min-height: 0;
}

/* blocks/related-content.css */
/* Related content: photo cards with a centred title and a grey pill that opens over the card on hover
   or keyboard focus, showing the title again, a short description and the link text (UCWS). One link
   per card (the title), stretched over the whole card; UCWS nests two links, which fails WCAG.
   Three across from breakpoint.xl (two items: half width each); stacked below. */

.uc-related__list {
  display: grid;
  gap: var(--layout-gutter);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* A second block, for more items, follows as another row of cards (UCWS: 20px), unless it starts with
   a heading of its own. */
.uc-related + .uc-related:not(:has(> h2:not(.uc-visually-hidden), > .uc-block-header)) {
  margin-block-start: calc(var(--space-5) - var(--space-12));
}

/* One cell: the title and the panel both sit at its bottom, so the open panel covers the title. */
.uc-related__item {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: var(--layout-related-height);
  padding: var(--space-6);
  overflow: hidden;
  border-radius: var(--radius-md);
  color: var(--color-text-inverse);
}

.uc-related__image {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Dark gradient behind the title. */
.uc-related__item::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, var(--color-overlay-scrim-dark), var(--color-overlay-scrim-dark) 35%, transparent 75%); /* full strength under the title */
}

.uc-related__title,
.uc-related__panel {
  grid-area: 1 / 1;
  align-self: end;
}

/* space.4 above the closed panel. */
.uc-related__title {
  margin: 0 0 calc(var(--space-3) + var(--space-4));
  text-align: center;
  text-shadow: var(--shadow-text-glow);
}

/* The title keeps the heading's line height: on UCWS the title text isn't a link (font.line-height.link). */
.uc-related__link,
.uc-related__link:visited,
.uc-related__link:hover {
  color: inherit;
  line-height: inherit;
  text-decoration: none;
}

/* The title link covers the whole card, the open panel too. */
.uc-related__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.uc-related__link:focus-visible {
  outline: none;
}

/* Drawn outside the card, on the page, so it keeps the page's ring colour (not the white used on photos). */
.uc-related__item:focus-within {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
}

/* Light pill that opens into a panel as tall as the card less space.6 on every side (UCWS: 330px of
   380px). It stays in the flow: text too long for it makes the card taller rather than being cut off
   (UCWS fades it out). */
.uc-related__panel {
  display: grid;
  grid-template-rows: 0fr;
  min-height: var(--space-3);
  padding-inline: var(--space-5);
  border-radius: var(--radius-md);
  background: var(--color-background-subtle);
  color: var(--color-text-on-light);
  transition:
    min-height var(--motion-duration-slow) var(--motion-easing-emphasized),
    grid-template-rows var(--motion-duration-slow) var(--motion-easing-emphasized),
    padding var(--motion-duration-slow) var(--motion-easing-emphasized);
}

.uc-related__panel > * {
  overflow: hidden;
  min-height: 0;
  margin: 0;
}

.uc-related__item:hover .uc-related__panel,
.uc-related__item:focus-within .uc-related__panel {
  grid-template-rows: 1fr;
  min-height: calc(var(--layout-related-height) - 2 * var(--space-6));
  padding-block: var(--space-6);
}

/* What the open panel holds: the title again (p.uc-related__panel-title, aria-hidden: the link above
   already names the card), the description, and the link text at the bottom (span.uc-related__more,
   aria-hidden: it is not a second link, the title's link covers the card). */
.uc-related__panel-inner {
  display: flex;
  flex-direction: column;
}

.uc-related__panel-inner > * {
  margin: 0 0 var(--space-4);
}

.uc-related__panel-inner > :last-child {
  margin-block-end: 0;
}

.uc-related__panel-title {
  overflow-wrap: anywhere; /* as the headings: a long word wraps */
}

.uc-related__more {
  margin-block-start: auto;
  font-weight: var(--font-weight-semibold);
  line-height: var(--font-line-height-link);
  text-decoration: underline;
}

@media (min-width: 1200px) { /* breakpoint.xl */
  .uc-related__list {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Two items share the row, half each (UCWS col-xl-6). */
  .uc-related__list:has(> :nth-child(2):last-child) {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* blocks/sidekick.css */
/* Sidekick CTA (UCWS "sidekick-cta"): a large photo and a grey box with a heading, a short text and
   buttons. Two designs, as UCWS:
   - Default ("overlay display"): from breakpoint.lg the photo fills the block, layout.hero.height tall
     (from breakpoint.wide at least aspect-ratio.banner-tall of the width, like the overlay Hero CTA), and
     the box sits over it, centred, at the left of the page container (uc-sidekick--right: at the right).
     uc-sidekick--tall makes the block as tall as the photo's own shape (aspect-ratio.sidekick-tall).
   - Offset (uc-sidekick--offset, "offset display"): from breakpoint.md the photo keeps its own shape in
     the page container and the box overlaps its edge, centred. As UCWS's grid (30/45/25, not mirrored),
     the photo takes the right 70% (with uc-sidekick--right, the left 75% and the box goes right).
   Below those breakpoints the photo spans the page above the box. The box is always grey with the
   default text colour: UCWS's option to colour the text area below breakpoint.lg isn't built. */

.uc-sidekick__media picture,
.uc-sidekick__media img {
  display: block;
  width: 100%;
}

.uc-sidekick__media img {
  height: auto;
}

.uc-sidekick__content {
  padding: var(--space-8) var(--space-6);
  background: var(--color-background-subtle);
  color: var(--color-text-default);
}

.uc-sidekick__content h2 {
  margin-block-end: var(--space-5);
}

.uc-sidekick__content > :last-child {
  margin-block-end: 0;
}

/* The offset box has rounded corners at every width; the default design's only while it floats over the
   photo (from breakpoint.lg, below), as UCWS. */
.uc-sidekick--offset .uc-sidekick__content {
  border-radius: var(--radius-md);
}

/* Buttons side by side are space.3 apart; a second row sits space.5 below the first (UCWS 20px). */
.uc-sidekick__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5) var(--space-3);
  margin-block-start: var(--space-6);
}

/* The buttons show an arrow on hover and focus, as UCWS's call-to-action buttons: it fades in inside the
   button's end padding (size.icon.lg, space.4 from the edge), sliding space.8 into place; the label
   doesn't move. Markup: svg.uc-icon.uc-button__arrow (aria-hidden) after the label. */
.uc-sidekick__actions .uc-button {
  position: relative;
}

.uc-sidekick__actions .uc-button__arrow {
  position: absolute;
  inset-block: 0;
  inset-inline-end: var(--space-4);
  width: var(--size-icon-lg);
  height: var(--size-icon-lg);
  margin-block: auto;
  opacity: 0;
  transform: translateX(calc(-1 * var(--space-8)));
  transition:
    opacity var(--motion-duration-slow) var(--motion-easing-standard),
    transform var(--motion-duration-slow) var(--motion-easing-standard);
}

/* The outline button's border is part of that space. */
.uc-sidekick__actions .uc-button--outline .uc-button__arrow {
  inset-inline-end: calc(var(--space-4) - var(--border-width-thick));
}

.uc-sidekick__actions .uc-button:hover .uc-button__arrow,
.uc-sidekick__actions .uc-button:focus-visible .uc-button__arrow {
  opacity: 1;
  transform: none;
}

/* Reduced motion: the arrow appears without sliding (size.md → Motion). */
@media (prefers-reduced-motion: reduce) {
  .uc-sidekick__actions .uc-button__arrow {
    transform: none;
  }
}

/* Stacked: the photo runs to the edges of the page, as UCWS. */
@media (max-width: 991px) { /* below breakpoint.lg */
  .uc-sidekick:not(.uc-sidekick--offset) .uc-sidekick__media {
    margin-inline: calc(-1 * var(--layout-container-padding));
  }
}

@media (max-width: 767px) { /* below breakpoint.md */
  .uc-sidekick--offset .uc-sidekick__media {
    margin-inline: calc(-1 * var(--layout-container-padding));
  }
}

/* Offset design: the photo and the box share one grid row. */
@media (min-width: 768px) { /* breakpoint.md */
  .uc-sidekick--offset .uc-sidekick__inner {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 9fr) minmax(0, 5fr);
    align-items: center;
  }

  .uc-sidekick--offset .uc-sidekick__media,
  .uc-sidekick--offset .uc-sidekick__content {
    grid-row: 1;
  }

  .uc-sidekick--offset .uc-sidekick__media {
    grid-column: 2 / 4;
  }

  .uc-sidekick--offset .uc-sidekick__content {
    grid-column: 1 / 3;
    justify-self: start;
    width: min(100%, var(--layout-sidekick-content-width));
    padding: var(--space-10);
  }

  .uc-sidekick--offset.uc-sidekick--right .uc-sidekick__media {
    grid-column: 1 / 3;
  }

  .uc-sidekick--offset.uc-sidekick--right .uc-sidekick__content {
    grid-column: 2 / 4;
    justify-self: end;
  }
}

/* Default design: the photo fills the block, the box floats over it. */
@media (min-width: 992px) { /* breakpoint.lg */
  .uc-sidekick:not(.uc-sidekick--offset) {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    min-height: var(--layout-hero-height);
  }

  /* Taller (uc-sidekick--tall; UCWS's default design without its full-bleed option): the block takes the
     shape of the photo, aspect-ratio.sidekick-tall, instead of layout.hero.height, and still grows with
     its text. */
  .uc-sidekick--tall:not(.uc-sidekick--offset) {
    min-height: auto;
    aspect-ratio: var(--aspect-ratio-sidekick-tall);
  }

  .uc-sidekick:not(.uc-sidekick--offset) .uc-sidekick__inner {
    display: flex;
  }

  .uc-sidekick--right:not(.uc-sidekick--offset) .uc-sidekick__inner {
    justify-content: flex-end;
  }

  .uc-sidekick:not(.uc-sidekick--offset) .uc-sidekick__media {
    position: absolute;
    inset: 0;
    z-index: -1;
  }

  .uc-sidekick:not(.uc-sidekick--offset) .uc-sidekick__media :is(picture, img) {
    height: 100%;
  }

  .uc-sidekick:not(.uc-sidekick--offset) .uc-sidekick__media img {
    object-fit: cover;
  }

  .uc-sidekick:not(.uc-sidekick--offset) .uc-sidekick__content {
    width: var(--layout-sidekick-content-width);
    padding: var(--space-12);
    border-radius: var(--radius-md);
  }
}

@media (min-width: 1500px) { /* breakpoint.wide */
  /* A spacer as tall as the ratio: the block is at least that tall, as the overlay Hero CTA. */
  .uc-sidekick:not(.uc-sidekick--offset)::before {
    content: "";
    flex: none;
    width: 100%;
    margin-inline-end: -100%;
    aspect-ratio: var(--aspect-ratio-banner-tall);
  }
}

/* blocks/events.css */
/* Events block (UCWS events feed): event cards with a date badge, title link, time,
   location and a short description. Two across once the block is breakpoint.lg wide: its own width,
   not the window's, so in a 50% column the cards go one a row. */

.uc-events {
  container: uc-events / inline-size;
}

.uc-events__header {
  margin-block-end: var(--space-6);
  padding-block-end: var(--space-6);
  border-bottom: var(--border-width-thick) solid var(--color-decorative-light-grey);
}

.uc-events__header h2 {
  margin: 0;
}

.uc-events__list {
  display: grid;
  gap: var(--space-6) var(--layout-gutter);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The card is its title link's clickable area (the link is stretched over it, below) and takes
   shadow.hover, as UCWS's cards, which are a second control round the title link (role="button"). */
.uc-event {
  position: relative;
  display: flex;
  height: 100%;
  overflow: hidden;
  border: var(--border-width-thin) solid var(--color-border-default);
  border-radius: var(--radius-md);
}

.uc-event:hover,
.uc-event:focus-within {
  box-shadow: var(--shadow-hover);
}

/* Date badge: berry block with day and month. */
.uc-event__date {
  display: flex;
  margin: 0; /* it's a paragraph: without this the badge stops short of the card bottom */
  flex: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: var(--size-date-badge);
  background: var(--color-background-berry);
  color: var(--color-text-inverse);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  text-align: center;
}

.uc-event__day {
  font-size: var(--font-size-date);
  line-height: var(--font-line-height-date);
}

.uc-event__month {
  font-size: var(--font-size-h4-base);
  line-height: var(--font-line-height-body);
}

.uc-event__body {
  flex: 1;
  min-width: 0;
  padding: var(--space-5);
}

/* The title link's line height comes from its own size (font.line-height.link), as UCWS: 27px lines. */
.uc-event__title {
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-small-title);
  line-height: var(--font-line-height-link);
}

/* The title link covers the whole card. */
.uc-event__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* Focus outlines the whole card, not just the title. */
@supports selector(:has(*)) {
  .uc-event__title a:focus-visible {
    outline: none;
  }

  .uc-event:has(.uc-event__title a:focus-visible) {
    outline: var(--focus-ring-width) solid var(--color-focus-ring);
    outline-offset: var(--focus-ring-offset);
  }
}

/* Time and location flow as text, as UCWS: the icon stays on the first line (centred on it), a second
   line starts under the icon, and the row is clipped after two lines. */
.uc-event__meta {
  display: -webkit-box;
  margin: 0 0 var(--space-3);
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.uc-event__meta .uc-icon {
  width: var(--size-icon-sm);
  height: var(--size-icon-sm);
  margin-block: calc((var(--font-line-height-body) - var(--size-icon-sm)) / 2);
  margin-inline-end: var(--space-1);
  vertical-align: top;
}

.uc-event__desc {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.uc-events__footer {
  display: flex;
  justify-content: flex-end;
  margin-block-start: var(--space-6);
}

.uc-events__footer p {
  margin: 0;
}

@container uc-events (min-width: 992px) { /* breakpoint.lg: the block's width */
  .uc-events__list {
    grid-template-columns: 1fr 1fr;
  }
}

/* blocks/image-text.css */
/* Image with text: a rounded coloured box, image on one half and text on the other.
   Markup: <section class="uc-block uc-container"><div class="uc-image-text uc-bg--*">
             <div class="uc-image-text__media"><img …></div>
             <div class="uc-image-text__body">heading (any level), p, uc-link--more</div></div></section>
   Modifiers: --image-right, --center (text alignment), --plain (the plain white version: no uc-bg--*
   class). Stacked below breakpoint.md. */

.uc-image-text {
  display: grid;
  overflow: hidden;
  border-radius: var(--radius-md);
}

.uc-image-text__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The plain white version: no fill, so the photo has its own rounded corners on every side, as UCWS.
   Text and link take the page's colours. */
.uc-image-text--plain .uc-image-text__media {
  overflow: hidden;
  border-radius: var(--radius-md);
}

.uc-image-text__body {
  padding: var(--space-12) var(--layout-container-padding);
}

.uc-image-text__body > :is(h2, h3, h4) {
  margin-block-end: var(--space-8);
}

.uc-image-text__body > :last-child {
  margin-block-end: 0;
}

.uc-image-text--center .uc-image-text__body {
  text-align: center;
}

/* Centred text: the link's hidden arrow takes room after its words, which pulls the words left of the
   centre line. The link starts space.6 in to balance it (the words end up 2.5px left, as UCWS). */
.uc-image-text--center .uc-link--more {
  margin-inline-start: var(--space-6);
}

@media (min-width: 768px) { /* breakpoint.md */
  .uc-image-text {
    grid-template-columns: 1fr 1fr;
  }

  .uc-image-text--image-right .uc-image-text__media {
    grid-column: 2;
    grid-row: 1;
  }

  .uc-image-text__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-18) var(--space-24) var(--space-18) var(--space-18);
  }
}

@media (min-width: 992px) { /* breakpoint.lg */
  /* At least layout.image-text.min-height tall, as UCWS. The photo fills its half (cropped), so the
     shape of its file never sets the box's height: the text does, down to that least height. */
  .uc-image-text {
    min-height: var(--layout-image-text-min-height);
  }

  .uc-image-text__media {
    position: relative;
  }

  .uc-image-text__media img {
    position: absolute;
    inset: 0;
  }
}

/* blocks/image-gallery.css */
/* Image gallery (UCWS "image gallery"): a grid of 4:3 thumbnails; each opens its photo in the Lightbox
   (components/lightbox.css and .js: the list has data-uc-lightbox). Four across in a full-width block
   from breakpoint.lg, three otherwise, also in a layout region, as UCWS.
   Without JavaScript each thumbnail links to the full-size photo. */

.uc-gallery > h2 {
  margin-block-end: var(--space-6);
}

/* The optional description, in the block-header style (UCWS). */
.uc-gallery__intro {
  margin-block-end: var(--space-6);
  font-weight: var(--font-weight-medium);
}

.uc-gallery__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--layout-gutter);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 992px) { /* breakpoint.lg */
  .uc-gallery__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .uc-layout__region .uc-gallery__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* The link is a block, so its focus ring goes round the thumbnail. It grows slightly on hover, as UCWS
   (the focus ring grows with it). */
.uc-gallery__link {
  display: block;
  transition: transform var(--motion-duration-fast) var(--motion-easing-standard);
}

.uc-gallery__link:hover {
  transform: scale(var(--motion-scale-hover-sm));
}

.uc-gallery__thumb {
  width: 100%;
  aspect-ratio: var(--aspect-ratio-gallery);
  object-fit: cover;
}

/* Reduced motion: no hover scaling (size.md → Motion). */
@media (prefers-reduced-motion: reduce) {
  .uc-gallery__link:hover {
    transform: none;
  }
}

/* blocks/masonry-gallery.css */
/* Masonry gallery (UCWS "masonry gallery"): photos in groups of five, a strip that scrolls sideways
   across the full width of the page, as UCWS. Each group, left to right: a large portrait as tall as the
   group, a wide photo over a medium portrait, and two squares under the wide photo's end:
     large  wide    wide
     large  medium  square
     large  medium  square
   One list holds every photo; the group pattern comes from each photo's place in it (5n+1 … 5n+5), so
   there's no nesting. Photos keep their spot at every width (the strip scrolls). A single group is
   centred. Each photo opens in the Lightbox (the list has data-uc-lightbox).
   blocks/masonry-gallery.js adds the previous and next buttons and the scroll indicator, and only then
   hides the browser's scrollbar, so without JavaScript the strip still scrolls. */

/* A block formatting context, so the strip's top margin stays inside the block when there's no header. */
.uc-masonry {
  display: flow-root;
}

.uc-masonry .uc-block-header h2 {
  margin-block-end: var(--space-6);
}

.uc-masonry .uc-block-header p {
  max-width: var(--layout-masonry-intro-width);
  margin-inline: auto;
}

.uc-masonry__viewport {
  position: relative;
  margin-block: var(--space-12) var(--space-8);
  padding-inline: var(--layout-container-padding);
}

.uc-masonry__list {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(3, var(--layout-masonry-small));
  grid-auto-columns: var(--layout-masonry-large) var(--layout-masonry-medium) var(--layout-masonry-small);
  gap: var(--space-5);
  justify-content: safe center;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  list-style: none;
}

/* Each photo's spot in its group. */
.uc-masonry__list > :nth-child(5n + 1) {
  grid-row: 1 / -1;
}

.uc-masonry__list > :nth-child(5n + 2) {
  grid-row: 1;
  grid-column: span 2;
}

.uc-masonry__list > :nth-child(5n + 3) {
  grid-row: 2 / 4;
}

.uc-masonry__list > :nth-child(5n + 4) {
  grid-row: 2;
}

.uc-masonry__list > :nth-child(5n) {
  grid-row: 3;
}

.uc-masonry__link,
.uc-masonry__image {
  display: block;
  width: 100%;
  height: 100%;
}

/* The photo zooms a little inside its spot on hover, as UCWS: the link clips it (the link's own focus
   ring is outside it, so it isn't clipped). */
.uc-masonry__link {
  overflow: hidden;
}

.uc-masonry__image {
  object-fit: cover;
  transition: transform var(--motion-duration-medium) var(--motion-easing-emphasized);
}

.uc-masonry__link:hover .uc-masonry__image {
  transform: scale(var(--motion-scale-hover-lg));
}

/* With the script: no browser scrollbar (the indicator and buttons replace it, as UCWS). */
.uc-masonry--enhanced .uc-masonry__list {
  scrollbar-width: none;
}

.uc-masonry--enhanced .uc-masonry__list::-webkit-scrollbar {
  display: none;
}

/* Previous and next: round Icon buttons (grey circles with white chevrons), over the strip's ends,
   space.12 inside the strip (which starts layout.container.padding from the page's edge), as UCWS. */
.uc-masonry__step {
  position: absolute;
  inset-block-start: 50%;
  transform: translateY(-50%);
}

.uc-masonry__step[hidden] {
  display: none;
}

.uc-masonry__step--previous {
  inset-inline-start: calc(var(--layout-container-padding) + var(--space-12));
}

.uc-masonry__step--next {
  inset-inline-end: calc(var(--layout-container-padding) + var(--space-12));
}

.uc-masonry__step--previous .uc-icon {
  transform: rotate(90deg);
}

.uc-masonry__step--next .uc-icon {
  transform: rotate(-90deg);
}

/* Scroll indicator: it shows how far along the strip is, and works as a scrollbar for a mouse or a
   finger (a press on it moves the strip there, a drag moves it along), as UCWS. Hidden from assistive
   technology: the buttons and the Tab key do the same. A finger moving up or down on it still scrolls
   the page. */
.uc-masonry__progress {
  position: relative;
  width: var(--layout-masonry-progress-width);
  max-width: calc(100% - 2 * var(--layout-container-padding));
  height: var(--layout-masonry-progress-height);
  margin: 0 auto;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--color-border-default);
  cursor: pointer;
  touch-action: pan-y;
}

.uc-masonry__progress[hidden] {
  display: none;
}

.uc-masonry__progress-thumb {
  position: absolute;
  inset-block: 0;
  border-radius: var(--radius-pill);
  background: var(--color-background-media-control);
}

/* Reduced motion: no hover zoom (size.md → Motion). */
@media (prefers-reduced-motion: reduce) {
  .uc-masonry__link:hover .uc-masonry__image {
    transform: none;
  }
}

/* blocks/page-filter.css */
/* Page filter (blocks.md → Page filter): a list of pages to filter by keywords and tags, as UCWS's Page
   filter block. A header (heading, optional description, a red rule under them); from breakpoint.lg the
   filters (Form fields: a keyword field, a dropdown per group of tags, then Filter and Reset) in a
   column at the left and the results at the right; below it the filters sit above the results. Results
   show as a list (title link and summary, with grey rules between) or as tiles (three a row, each with a
   red-to-orange bar on top), 15 a page with a Pager and "Show all". Behaviour: page-filter.js. */

.uc-page-filter__header {
  margin-block-end: var(--space-12);
  padding-block-end: var(--space-3);
  border-block-end: var(--border-width-thick) solid var(--color-decorative-rule);
}

.uc-page-filter__header h2 {
  margin-block-end: var(--space-6);
}

.uc-page-filter__header > :last-child {
  margin-block-end: 0;
}

.uc-page-filter__body {
  display: grid;
  gap: var(--layout-gutter);
}

@media (min-width: 992px) { /* breakpoint.lg */
  .uc-page-filter__body {
    grid-template-columns: var(--layout-page-filter-filters-width) minmax(0, 1fr);
    align-items: start;
  }
}

/* ---- Filters ---- */

.uc-page-filter__form {
  display: grid;
  gap: var(--space-6);
}

.uc-page-filter__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
}

/* Where the filters are a column, Filter and Reset share its width, as UCWS. */
@media (min-width: 992px) { /* breakpoint.lg */
  .uc-page-filter__actions .uc-button {
    flex: 1 1 0;
    padding-inline: var(--space-4);
  }
}

/* ---- List or tile view: a pair of toggle buttons, joined ---- */

.uc-page-filter__views {
  display: flex;
  margin-block-end: var(--space-4);
}

.uc-page-filter__views[hidden] {
  display: none;
}

.uc-page-filter__view {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--size-touch-target);
  margin: 0;
  padding: var(--space-2) var(--space-4);
  border: var(--border-width-thin) solid var(--color-border-strong);
  background: var(--color-background-default);
  color: var(--color-text-default);
  font: inherit;
  cursor: pointer;
}

.uc-page-filter__view:first-child {
  border-start-start-radius: var(--radius-sm);
  border-end-start-radius: var(--radius-sm);
}

.uc-page-filter__view:last-child {
  border-start-end-radius: var(--radius-sm);
  border-end-end-radius: var(--radius-sm);
}

.uc-page-filter__view + .uc-page-filter__view {
  border-inline-start-width: 0;
}

.uc-page-filter__view:hover:not([aria-pressed="true"]) {
  background: var(--color-background-subtle);
}

/* On: filled, as a pressed Icon button or a Chip filter that's on. */
.uc-page-filter__view[aria-pressed="true"] {
  border-color: var(--color-action-selected);
  background: var(--color-action-selected);
  color: var(--color-text-inverse);
  font-weight: var(--font-weight-semibold);
}

@media (forced-colors: active) {
  .uc-page-filter__view[aria-pressed="true"] {
    border-width: var(--border-width-thick);
  }
}

/* ---- The filters in use: "Results for:", a chip each, then "Clear all filters" ---- */

.uc-page-filter__active {
  margin-block-end: var(--space-4);
}

.uc-page-filter__active[hidden] {
  display: none;
}

.uc-page-filter__terms {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-block-end: var(--space-4);
}

.uc-page-filter__terms > p,
.uc-page-filter__terms > .uc-chips {
  margin: 0;
}

/* Text buttons: "Clear all filters" (grey, as UCWS) and "Show all" / "Show less" (a link's red). Each
   one's clickable area reaches size.touch-target tall, and takes no room. */
.uc-page-filter__clear,
.uc-page-filter__more {
  position: relative;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: var(--font-weight-semibold);
  line-height: var(--font-line-height-link);
  text-decoration: underline;
  text-decoration-thickness: var(--border-width-thin);
  text-underline-offset: var(--space-1);
  cursor: pointer;
}

.uc-page-filter__clear::before,
.uc-page-filter__more::before {
  content: "";
  position: absolute;
  inset-block: min(0%, calc((100% - var(--size-touch-target)) / 2));
  inset-inline: 0;
}

.uc-page-filter__clear {
  color: var(--color-text-muted);
}

.uc-page-filter__more {
  color: var(--color-link-default);
}

.uc-page-filter__clear:hover,
.uc-page-filter__more:hover {
  color: var(--color-link-hover);
}

/* ---- Results ---- */

/* space.8 under the view buttons or the filters in use, as UCWS (30px): their own space.4 is part of it. */
.uc-page-filter__items {
  display: grid;
  gap: var(--space-4);
  margin: var(--space-8) 0 0;
  padding: 0;
  list-style: none;
}

/* With no view buttons and no filters in use, the results start at the top of their column. */
.uc-page-filter__views[hidden] ~ .uc-page-filter__active[hidden] ~ .uc-page-filter__items {
  margin-block-start: 0;
}

.uc-page-filter__item {
  padding-block-end: var(--space-4);
  border-block-end: var(--border-width-thin) solid var(--color-border-default);
}

.uc-page-filter__item[hidden] {
  display: none;
}

.uc-page-filter__title {
  margin: 0;
  font-size: var(--font-size-body);
  line-height: var(--font-line-height-body);
}

.uc-page-filter__summary {
  margin: var(--space-3) 0 0;
}

/* Tiles: bordered boxes, three a row from breakpoint.lg (two from breakpoint.md), with the red-to-orange
   gradient bar along the top, as UCWS. */
.uc-page-filter__items--tile {
  gap: var(--space-8);
}

@media (min-width: 768px) { /* breakpoint.md */
  .uc-page-filter__items--tile {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 992px) { /* breakpoint.lg */
  .uc-page-filter__items--tile {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.uc-page-filter__items--tile .uc-page-filter__item {
  overflow: hidden;
  padding: 0 var(--space-6) var(--space-6);
  border: var(--border-width-thin) solid var(--color-border-default);
  border-radius: var(--radius-sm);
}

.uc-page-filter__items--tile .uc-page-filter__item::before {
  content: "";
  display: block;
  height: var(--layout-page-filter-tile-bar);
  margin: 0 calc(-1 * var(--space-6)) var(--space-6);
  background: var(--color-gradient-red-orange-horizontal);
}

.uc-page-filter__empty {
  margin: 0;
}

/* ---- Footer: the Pager, then "Show all" / "Show less", centred ---- */

.uc-page-filter__footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  margin-block-start: var(--space-14);
}

.uc-page-filter__footer[hidden],
.uc-page-filter__pager[hidden],
.uc-page-filter__more[hidden] {
  display: none;
}

/* blocks/thumbnail.css */
/* Thumbnail: sections, each with an image, heading, text and link.
   One column with a small photo, or two columns of image-and-text pairs with a larger photo once the
   block is breakpoint.md wide (its own width, not the window's). In a layout region (a 75%, 66% or 50%
   column) the sections always stack, with the small photo, as UCWS.
   Photos are portraits (aspect-ratio.thumbnail, cropped); uc-thumbnails--freeform on the list keeps each
   file's own shape. */

.uc-block:has(> .uc-thumbnails) {
  container: uc-thumbnails / inline-size;
}

/* The block's heading, over the sections. */
.uc-block:has(> .uc-thumbnails) > h2 {
  margin-block-end: var(--space-6);
}

.uc-thumbnails {
  display: grid;
  gap: var(--space-6) var(--layout-gutter);
  margin: 0;
  padding: 0;
  list-style: none;
}

.uc-thumbnail {
  display: grid;
  grid-template-columns: var(--layout-thumbnail-image-width-narrow) 1fr;
  gap: var(--space-6);
  align-items: start;
}

.uc-thumbnail img {
  width: 100%;
  aspect-ratio: var(--aspect-ratio-thumbnail);
  object-fit: cover;
}

/* Freeform photos: each keeps its file's own shape (UCWS "freeform" thumbnails, e.g. logos). */
.uc-thumbnails--freeform .uc-thumbnail img {
  aspect-ratio: auto;
}

.uc-thumbnail h3 {
  margin-block-end: var(--space-2);
}

@container uc-thumbnails (min-width: 768px) { /* breakpoint.md: the block's width */
  .uc-thumbnails {
    grid-template-columns: 1fr 1fr;
  }

  .uc-thumbnail {
    grid-template-columns: var(--layout-thumbnail-image-width) 1fr;
  }
}

/* In a layout region: one section a row with the small photo, however wide the column is (UCWS). */
.uc-layout__region .uc-thumbnails {
  grid-template-columns: 1fr;
}

.uc-layout__region .uc-thumbnail {
  grid-template-columns: var(--layout-thumbnail-image-width-narrow) 1fr;
}

/* blocks/trio-cta.css */
/* Trio CTA (UCWS trio-cta): three items, each an image, an optional label, a heading, optional text
   and one action. Reference markup: demo/blocks.html → Block: Trio CTA. Two designs, as UCWS:
   - Card (default; UCWS "card buttons"): a white card with a grey outline, the image across the
     top, a red heading, and the action as a red bar along the bottom (a.uc-trio__action). The
     action's link is stretched over the card, so the whole card is clickable (UCWS makes it so with a
     script); focus outlines the card. From breakpoint.lg cards are layout.trio.card-width wide,
     spread across the row, and grow slightly on hover.
   - Circle (uc-trio--circle; UCWS "circle buttons"): a round image (size.avatar.lg), centred text and
     a pill button (the Button component in p.uc-trio__actions).
   Stacked below breakpoint.md, three across from it; items in a row share the tallest height. */

.uc-trio__list {
  display: grid;
  gap: var(--space-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.uc-trio__item {
  position: relative; /* the stretched action link */
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--layout-trio-card-width);
  margin-inline: auto;
  border-radius: var(--radius-md);
  background: var(--color-background-default);
}

.uc-trio__image {
  width: 100%;
  aspect-ratio: var(--aspect-ratio-trio);
  border: var(--border-width-thin) solid var(--color-border-default);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  object-fit: cover;
}

.uc-trio__content {
  flex: 1 0 auto; /* pushes the action to the bottom of the card */
  padding: var(--space-8) var(--space-8) var(--space-10);
  border-inline: var(--border-width-thin) solid var(--color-border-default);
}

.uc-trio__content > :last-child {
  margin-block-end: 0;
}

/* An item without an action closes its outline at the bottom (UCWS rounded-bottom-border). */
.uc-trio:not(.uc-trio--circle) .uc-trio__content:last-child {
  border-block-end: var(--border-width-thin) solid var(--color-border-default);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

/* Optional line above the heading (UCWS content label). */
.uc-trio__label {
  margin: 0 0 var(--space-2);
  font-weight: var(--font-weight-semibold);
}

.uc-trio__title {
  margin: 0 0 var(--space-5);
  color: var(--color-text-accent);
}

/* An item without an action: its title takes the text colour (UCWS), red being the colour of the action. */
.uc-trio__content:last-child .uc-trio__title {
  color: var(--color-text-default);
}

/* An optional description under the block heading: space.6 below the heading, medium weight (UCWS). */
.uc-trio .uc-block-header > h2:not(:last-child) {
  margin-block-end: var(--space-6);
}

.uc-trio .uc-block-header p {
  font-weight: var(--font-weight-medium);
}

/* The action bar: a link styled as the card's bottom edge, text at the left and an arrow that
   slides in on hover and focus, space.6 from the card's edge (UCWS). */
.uc-trio__action,
.uc-trio__action:visited {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: var(--size-touch-target);
  padding: var(--space-2) var(--space-6) var(--space-2) var(--space-8);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  background: var(--color-action-primary);
  color: var(--color-text-on-primary);
  font-weight: var(--font-weight-bold);
  line-height: var(--font-line-height-control);
  text-decoration: none;
  transition: background-color var(--motion-duration-slow) var(--motion-easing-standard);
}

/* The whole card is the link's target. */
.uc-trio__action::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-md);
}

.uc-trio__action .uc-icon {
  flex: none;
  opacity: 0;
  transform: translateX(calc(-1 * var(--space-4)));
  transition:
    opacity var(--motion-duration-slow) var(--motion-easing-standard),
    transform var(--motion-duration-slow) var(--motion-easing-standard);
}

.uc-trio__item:hover .uc-trio__action {
  background: var(--color-action-primary-hover);
}

.uc-trio__item:hover .uc-trio__action .uc-icon,
.uc-trio__action:focus-visible .uc-icon {
  opacity: 1;
  transform: none;
}

/* Focus outlines the whole card (as UCWS), not just the bar. */
@supports selector(:has(*)) {
  .uc-trio__action:focus-visible {
    outline: none;
    text-decoration: underline;
  }

  .uc-trio__item:has(.uc-trio__action:focus-visible) {
    outline: var(--focus-ring-width) solid var(--color-focus-ring);
    outline-offset: var(--focus-ring-offset);
  }
}

/* Circle design */

.uc-trio--circle .uc-trio__item {
  max-width: none;
  text-align: center;
  background: none;
}

.uc-trio--circle .uc-trio__image {
  width: var(--size-avatar-lg);
  height: var(--size-avatar-lg);
  aspect-ratio: auto;
  margin-inline: auto;
  border: 0;
  border-radius: var(--radius-circle);
}

.uc-trio--circle .uc-trio__content {
  padding: var(--space-6) 0 var(--space-5);
  border: 0;
}

/* Without an action the item ends at its last line of text (UCWS). */
.uc-trio--circle .uc-trio__content:last-child {
  padding-block-end: 0;
}

.uc-trio__actions {
  margin: 0;
}

/* Trio CTA buttons are bold, as UCWS (the card design's red bar is too). */
.uc-trio__actions .uc-button {
  position: relative; /* the arrow */
  font-weight: var(--font-weight-bold);
}

/* The pill button shows an arrow on hover and focus, as UCWS's call-to-action buttons: it fades in inside
   the button's end padding (size.icon.lg, space.4 from the edge), sliding space.8 into place; the label
   doesn't move. Markup: svg.uc-icon.uc-button__arrow (aria-hidden) after the label. */
.uc-trio__actions .uc-button__arrow {
  position: absolute;
  inset-block: 0;
  inset-inline-end: var(--space-4);
  width: var(--size-icon-lg);
  height: var(--size-icon-lg);
  margin-block: auto;
  opacity: 0;
  transform: translateX(calc(-1 * var(--space-8)));
  transition:
    opacity var(--motion-duration-slow) var(--motion-easing-standard),
    transform var(--motion-duration-slow) var(--motion-easing-standard);
}

/* The outline button's border is part of that space. */
.uc-trio__actions .uc-button--outline .uc-button__arrow {
  inset-inline-end: calc(var(--space-4) - var(--border-width-thick));
}

.uc-trio__actions .uc-button:hover .uc-button__arrow,
.uc-trio__actions .uc-button:focus-visible .uc-button__arrow {
  opacity: 1;
  transform: none;
}

@media (min-width: 768px) { /* breakpoint.md */
  .uc-trio__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--layout-gutter);
  }

  /* UCWS: 35px, then 6px under its button; ours is one step: the pill button sits space.10 below the text. */
  .uc-trio--circle .uc-trio__content {
    padding-block-end: var(--space-10);
  }

  .uc-trio__actions {
    margin-block-start: auto; /* buttons line up along the bottom of the row */
  }
}

@media (min-width: 992px) { /* breakpoint.lg */
  /* Cards up to layout.trio.card-width, spread across the row (narrower when the row is). */
  .uc-trio:not(.uc-trio--circle) .uc-trio__list {
    grid-template-columns: repeat(3, minmax(0, var(--layout-trio-card-width)));
    justify-content: space-between;
  }

  .uc-trio:not(.uc-trio--circle) .uc-trio__item {
    transition: transform var(--motion-duration-fast) var(--motion-easing-emphasized);
  }

  .uc-trio:not(.uc-trio--circle) .uc-trio__item:hover {
    transform: scale(var(--motion-scale-hover-sm));
  }
}

/* Reduced motion: no hover scaling or sliding arrow (size.md → Motion). */
@media (prefers-reduced-motion: reduce) {
  .uc-trio .uc-trio__item:hover {
    transform: none;
  }

  .uc-trio__action .uc-icon,
  .uc-trio__actions .uc-button__arrow {
    transform: none;
  }
}

/* blocks/testimonial.css */
/* Testimonial (UCWS testimonial): a quote with decorative quote marks and the quoted person's name,
   role and optional round portrait (the Quote component, uc-quote--testimonial). Reference markup:
   demo/blocks.html → Block: Testimonial. As UCWS:
   - Default: <section class="uc-block uc-container uc-testimonial"> optional h2 and intro, then the quote.
   - On a colour band (only without a photo): uc-band and any uc-bg--* option on the section, the
     content in an inner uc-container. UCWS pages use the dark orange tint, the berry tint, red and
     light orange. The mark and line take the band's accent (quote.css, background.css).
   - 50/50 (UCWS "image display"): div.uc-testimonial__layout > div.uc-testimonial__media (a photo)
     + the quote; the photo is on the left, or on the right with uc-testimonial--image-right.
   Full width (100% layout) only. */

.uc-testimonial h2 {
  margin-block-end: var(--space-5);
}

/* A visible heading or intro keeps space.10 before the quote (UCWS 40px). */
.uc-testimonial :is(h2, p):not(.uc-visually-hidden) + :is(.uc-quote, .uc-testimonial__layout) {
  margin-block-start: var(--space-10);
}

.uc-testimonial__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
}

.uc-testimonial__media img {
  width: 100%;
  border-radius: var(--radius-md);
}

@media (min-width: 768px) { /* breakpoint.md */
  .uc-testimonial__layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    column-gap: var(--layout-gutter);
  }

  /* The photo stays at the top; a shorter quote is centred beside it (UCWS). */
  .uc-testimonial__media {
    align-self: start;
  }

  .uc-testimonial__media img {
    height: var(--layout-testimonial-image-height);
    object-fit: cover;
  }

  .uc-testimonial--image-right .uc-testimonial__media {
    order: 1;
  }
}

/* blocks/streaming-media.css */
/* Streaming media, as UCWS: an optional heading and description, then the Media embed
   (components/embed.css). Reference markup: demo/blocks.html → Block: Streaming media.
     <section class="uc-block uc-container uc-streaming" aria-labelledby="…"> h2, p, figure.uc-embed </section>
     <div class="uc-block uc-container uc-streaming"> figure.uc-embed </div>   (no heading)
   On a one-column page a video is 75% of the container from breakpoint.lg, centred (UCWS; the
   heading stays full width). In a layout region it fills the region. Audio always fills the width. */

.uc-streaming > h2,
.uc-streaming > p {
  margin-block-end: var(--space-6);
}

/* The description, as UCWS. */
.uc-streaming > p {
  font-weight: var(--font-weight-medium);
}

@media (min-width: 992px) { /* breakpoint.lg */
  .uc-streaming > .uc-embed:not(.uc-embed--audio) {
    width: 75%;
    margin-inline: auto;
  }

  .uc-layout__region .uc-streaming > .uc-embed {
    width: auto;
  }
}

/* blocks/footer.css */
/* Footer, matching UCWS: red bar, unit row with help icon and social links, then
   legal links, wordmark and address, then the land acknowledgement. All on the subtle surface. */

.uc-footer {
  border-top: var(--border-width-footer-bar) solid var(--color-decorative-rule);
  background: var(--color-background-subtle);
  color: var(--color-text-default);
  text-align: center;
}

.uc-footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Footer link lists are navigation, so they're identified by position rather than underline. On
   hover they take the link hover colour and an underline (UCWS: its bright red and a bar). */
.uc-footer a {
  color: var(--color-text-default);
  text-decoration: none;
}

.uc-footer a:hover {
  color: var(--color-link-hover);
  text-decoration: underline;
}

.uc-footer__pre {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  padding-block: var(--space-6);
  border-bottom: var(--border-width-thin) solid var(--color-decorative-light-grey);
}

.uc-footer__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
}

/* A unit's own logo in place of the help icon (UCWS shows it on some faculty sites). Decorative:
   the title beside it names the unit. */
.uc-footer__logo {
  flex: none;
  width: var(--size-footer-logo);
  height: auto;
}

.uc-footer__title {
  margin: 0;
  font-size: var(--font-size-small-title);
  line-height: var(--font-line-height-small-title);
  font-weight: var(--font-weight-semibold);
}

.uc-footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  font-weight: var(--font-weight-semibold);
  line-height: var(--font-line-height-link);
}

.uc-footer__social {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

/* Icons in size.social-icon boxes, space.5 apart, as UCWS. Each link's clickable area still reaches
   size.touch-target: an invisible area around the icon that takes no room in the layout. */
.uc-footer__social {
  gap: var(--space-5);
}

.uc-footer__social a {
  position: relative;
  display: flex; /* a block: no line-box space under the icon */
  align-items: center;
  justify-content: center;
  width: var(--size-social-icon);
  height: var(--size-social-icon);
  border-radius: var(--radius-circle);
}

/* An icon keeps the text colour on hover: only its fill changes (below). */
.uc-footer__social a:hover {
  color: var(--color-text-default);
}

/* The unit's icons are solid and the University's outlined, and each turns into the other on hover
   and keyboard focus, as UCWS. Solid: the link is a disc in the text colour and the glyph takes the
   footer's surface colour. The icon files stay as they are (stand-in artwork): their own ring would
   show as a second edge on the disc, so it's clipped away. */
.uc-footer__pre .uc-footer__social a:not(:hover, :focus-visible),
.uc-footer__main .uc-footer__social a:is(:hover, :focus-visible) {
  --uc-footer-icon-clip: circle(40%);
  background: var(--color-text-default);
  color: var(--color-background-subtle);
}

.uc-footer__social a::before {
  content: "";
  position: absolute;
  inset: calc((var(--size-social-icon) - var(--size-touch-target)) / 2);
}

.uc-footer__social svg {
  width: var(--size-social-icon);
  height: var(--size-social-icon);
  stroke-width: 1.5;
  clip-path: var(--uc-footer-icon-clip, none);
}

/* Windows high contrast drops the disc: every icon keeps its ring. */
@media (forced-colors: active) {
  .uc-footer__social svg {
    clip-path: none;
  }
}

.uc-footer__main {
  display: grid;
  gap: var(--space-6);
  padding-block: var(--space-6);
  font-size: var(--font-size-xs);
  line-height: var(--font-line-height-xs);
}

.uc-footer__legal {
  display: flex;
  flex-direction: column;
  font-weight: var(--font-weight-semibold);
}

/* The legal links sit space.6 below the University's social icons (UCWS 24px), clear of the icons'
   clickable area. */
.uc-footer__social + .uc-footer__legal {
  margin-block-start: var(--space-6);
}

/* Small text links still need a 24px target (WCAG 2.2 target size). */
.uc-footer__legal a {
  display: inline-block;
  padding-block: var(--space-1);
}

.uc-footer__wordmark {
  margin: 0;
}

.uc-footer__wordmark img {
  margin-inline: auto;
}

/* The wordmark links to the campaign's site: the link is as big as the image, so the focus ring fits it. */
.uc-footer__wordmark a {
  display: block;
  width: fit-content;
  margin-inline: auto;
}

/* Address and copyright line, at the body line height as UCWS; the copyright sits space.5 below
   (UCWS 20px). */
.uc-footer__address {
  font-style: normal;
  line-height: var(--font-line-height-body);
}

/* The postal code stands a little apart from the province (UCWS 6px). */
.uc-footer__postal-code {
  padding-inline-start: var(--space-1);
}

.uc-footer__copyright {
  margin: var(--space-5) 0 0;
  line-height: var(--font-line-height-body);
}

.uc-footer__acknowledgement {
  padding-block: var(--space-6);
  border-top: var(--border-width-thin) solid var(--color-decorative-light-grey);
  font-size: var(--font-size-xs);
  line-height: var(--font-line-height-acknowledgement);
  text-align: start;
}

.uc-footer__acknowledgement p {
  margin-block-end: var(--space-4); /* UCWS 15px */
}

.uc-footer__acknowledgement p:last-child {
  margin-block-end: 0;
}

@media (min-width: 992px) { /* breakpoint.lg */
  .uc-footer {
    text-align: start;
  }

  .uc-footer__pre {
    flex-flow: row wrap;
    justify-content: space-between;
    column-gap: var(--space-10);
  }

  /* The unit takes the width the icons leave, and only its title wraps: the links and the icons each
     stay on one line (UCWS). If even that doesn't fit, the icons move below the unit. */
  .uc-footer__unit {
    flex: 1 1 0;
    flex-direction: row;
    gap: var(--space-4);
  }

  .uc-footer__title {
    overflow-wrap: break-word; /* wraps between words: never narrower than its longest word */
  }

  .uc-footer__links {
    flex: none;
    flex-direction: row;
    gap: var(--space-4);
  }

  .uc-footer__links li {
    display: flex;
    align-items: center;
    white-space: nowrap;
  }

  /* A rule before every link, so the unit name is divided from the first one too (UCWS). Drawn, not
     typed: there's nothing for a screen reader to read. */
  .uc-footer__links li::before {
    content: "";
    height: 80%;
    margin-inline-end: var(--space-4);
    border-inline-start: var(--border-width-thin) solid currentColor;
  }

  .uc-footer__social {
    flex: none;
    justify-content: flex-start;
  }

  .uc-footer__main {
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
  }

  .uc-footer__contact {
    text-align: end;
  }
}