/* ==========================================================================
   ROLF SCHWARZ HOMEPAGE — VERSION 13: ANNOTATED STYLESHEET
   Styling values, selectors and rule order are unchanged.

   How to read this file:
   - A selector identifies the HTML elements a rule applies to.
   - A declaration is a property: value pair inside braces.
   - Media queries apply their enclosed rules only in matching conditions.
   - Later rules can override earlier rules of equal specificity.
   - Some card/banner styles remain from earlier layouts; they are retained.
   ========================================================================== */

/* ----------------------------------------------------------------------
   Shared colour palette and browser colour scheme. Custom properties are reused through var(...).
   ---------------------------------------------------------------------- */
:root {
    color-scheme: dark; /* Tell browser-supplied controls which colour scheme this page supports. */
    --bg: #111311; /* Reusable page background colour. */
    --text: #efeee7; /* Reusable main text colour. */
    --muted: #b5b8ac; /* Reusable secondary text colour. */
    --accent: #c4d498; /* Reusable accent/highlight colour. */
}

/* ----------------------------------------------------------------------
   Global box sizing: declared widths include padding and borders.
   ---------------------------------------------------------------------- */
* {
    box-sizing: border-box; /* Include padding and borders in declared element dimensions. */
}

/* ----------------------------------------------------------------------
   Document-level scrolling and browser text-sizing settings.
   ---------------------------------------------------------------------- */
html {
    scroll-behavior: smooth; /* Choose smooth anchor scrolling, or immediate scrolling when set to auto. */
    scroll-padding-top: 85px; /* Reserve space above targets when scrolling them into view. */
}

/* ----------------------------------------------------------------------
   Page background, default text appearance and removal of the browser margin.
   ---------------------------------------------------------------------- */
body {
    margin: 0; /* Outer spacing; shorthand order is top/right/bottom/left (two values mean vertical/horizontal). */
    background: var(--bg); /* Set a background colour, transparency or gradient. */
    color: var(--text); /* Set foreground text colour; currentColor elsewhere reuses it. */
    font-family: Arial,Helvetica,sans-serif; /* Preferred typefaces, followed by fallback fonts. */
}

/* ----------------------------------------------------------------------
   Default link appearance; individual components add their own emphasis.
   ---------------------------------------------------------------------- */
a {
    color: inherit; /* Set foreground text colour; currentColor elsewhere reuses it. */
    text-decoration: none; /* Underline behaviour; none removes text-decoration underlines. */
}

/* ----------------------------------------------------------------------
   Visible keyboard-focus indicators for links and buttons.
   ---------------------------------------------------------------------- */
a:focus-visible,button:focus-visible {
    outline: 3px solid var(--accent); /* Focus-ring styling that does not change layout dimensions. */
    outline-offset: 6px; /* Gap between the focus outline and the element edge. */
}

/* ----------------------------------------------------------------------
   Skip-to-content link: positioned above the viewport until it receives focus.
   ---------------------------------------------------------------------- */
.skip {
    position: absolute; /* Set the positioning mode: relative anchors positioned children; absolute leaves normal flow; fixed anchors to the viewport. */
    top: -80px; /* Offset the positioned element from its top edge. */
    background: var(--accent); /* Set a background colour, transparency or gradient. */
    color: #111; /* Set foreground text colour; currentColor elsewhere reuses it. */
    padding: 16px; /* Inner spacing; shorthand order is top/right/bottom/left (two values mean vertical/horizontal). */
    z-index: 10; /* Stacking order for overlapping positioned elements. */
}

/* ----------------------------------------------------------------------
   Reveal the skip link when a keyboard user focuses it.
   ---------------------------------------------------------------------- */
.skip:focus {
    top: 8px; /* Offset the positioned element from its top edge. */
}

/* ----------------------------------------------------------------------
   Page header layout, spacing and bottom divider.
   ---------------------------------------------------------------------- */
header {
    height: 91px; /* Element height; the later 100dvh declaration follows the dynamic viewport height. */
    display: flex; /* Choose the layout mode or hide the element when set to none. */
    align-items: center; /* Align children on the cross axis in flex layout or within grid areas. */
    justify-content: space-between; /* Distribute or align children along the main flex axis or the grid content axis. */
    padding: 0 5%; /* Inner spacing; shorthand order is top/right/bottom/left (two values mean vertical/horizontal). */
    border-bottom: 1px solid #ffffff20; /* Set the bottom border; eight-digit hex colours include alpha transparency. */
}

/* ----------------------------------------------------------------------
   Site-name typography.
   ---------------------------------------------------------------------- */
.brand {
    font-size: 21px; /* Text size; clamp(min, preferred, max) bounds responsive sizing. */
    font-weight: bold; /* Text weight; 400 is normal and bold is heavier. */
    letter-spacing: -1px; /* Spacing between characters; negative values tighten it. */
}

/* ----------------------------------------------------------------------
   Accent colour for the punctuation in the site name.
   ---------------------------------------------------------------------- */
.brand span {
    color: var(--accent); /* Set foreground text colour; currentColor elsewhere reuses it. */
}

/* ----------------------------------------------------------------------
   Base navigation layout; more specific desktop and drawer rules below override it.
   ---------------------------------------------------------------------- */
nav {
    display: flex; /* Choose the layout mode or hide the element when set to none. */
    gap: 30px; /* Space between flex/grid items. */
    font-size: 13px; /* Text size; clamp(min, preferred, max) bounds responsive sizing. */
}

/* ----------------------------------------------------------------------
   Highlight navigation links on pointer hover.
   ---------------------------------------------------------------------- */
nav a:hover {
    color: var(--accent); /* Set foreground text colour; currentColor elsewhere reuses it. */
}

/* ----------------------------------------------------------------------
   Rounded contact-link styling retained from the earlier header.
   ---------------------------------------------------------------------- */
.contact {
    border: 1px solid #67705c; /* Border shorthand: thickness, line style and colour; zero removes it. */
    border-radius: 30px; /* Corner rounding; 50% makes a circle when width equals height. */
    padding: 12px 20px; /* Inner spacing; shorthand order is top/right/bottom/left (two values mean vertical/horizontal). */
}

/* ----------------------------------------------------------------------
   Centre the main content and limit its maximum width.
   ---------------------------------------------------------------------- */
.wrap {
    max-width: 1500px; /* Upper width limit. */
    margin: auto; /* Outer spacing; shorthand order is top/right/bottom/left (two values mean vertical/horizontal). */
    padding: 0 5%; /* Inner spacing; shorthand order is top/right/bottom/left (two values mean vertical/horizontal). */
}

/* ----------------------------------------------------------------------
   Introductory area: two columns on desktop, with spacing around and between them.
   ---------------------------------------------------------------------- */
.intro {
    padding-top: 74px; /* Inner spacing on the top side(s); inline follows writing direction and block follows document flow. */
    padding-bottom: 55px; /* Inner spacing on the bottom side(s); inline follows writing direction and block follows document flow. */
    display: grid; /* Choose the layout mode or hide the element when set to none. */
    grid-template-columns: 1fr 1fr; /* Define grid columns; fr units divide the available space proportionally. */
    gap: 40px; /* Space between flex/grid items. */
}

/* ----------------------------------------------------------------------
   Small introductory label above the main heading.
   ---------------------------------------------------------------------- */
.eyebrow {
    text-transform: uppercase; /* Change the visual letter case without editing the HTML text. */
    letter-spacing: 2.5px; /* Spacing between characters; negative values tighten it. */
    font-size: 11px; /* Text size; clamp(min, preferred, max) bounds responsive sizing. */
    color: var(--accent); /* Set foreground text colour; currentColor elsewhere reuses it. */
    margin: 0 0 23px; /* Outer spacing; shorthand order is top/right/bottom/left (two values mean vertical/horizontal). */
}

/* ----------------------------------------------------------------------
   Main heading typography, including a fluid font size bounded by minimum and maximum values.
   ---------------------------------------------------------------------- */
.intro h1 {
    font-size: clamp(48px,6vw,90px); /* Text size; clamp(min, preferred, max) bounds responsive sizing. */
    font-weight: 400; /* Text weight; 400 is normal and bold is heavier. */
    line-height: 1.02; /* Line spacing; a unitless value multiplies the font size. */
    letter-spacing: -5px; /* Spacing between characters; negative values tighten it. */
    margin: 0; /* Outer spacing; shorthand order is top/right/bottom/left (two values mean vertical/horizontal). */
}

/* ----------------------------------------------------------------------
   Serif styling and accent colour for the emphasised part of the heading.
   ---------------------------------------------------------------------- */
.intro h1 i {
    font-family: Georgia,serif; /* Preferred typefaces, followed by fallback fonts. */
    font-weight: 400; /* Text weight; 400 is normal and bold is heavier. */
    color: var(--accent); /* Set foreground text colour; currentColor elsewhere reuses it. */
}

/* ----------------------------------------------------------------------
   Position and constrain the introduction text beside the heading.
   ---------------------------------------------------------------------- */
.intro-copy {
    align-self: end; /* Override alignment for this individual flex/grid item. */
    padding-left: 15%; /* Inner spacing on the left side(s); inline follows writing direction and block follows document flow. */
    max-width: 560px; /* Upper width limit. */
}

/* ----------------------------------------------------------------------
   Introductory paragraph typography and spacing.
   ---------------------------------------------------------------------- */
.intro-copy p {
    font-size: 18px; /* Text size; clamp(min, preferred, max) bounds responsive sizing. */
    line-height: 1.65; /* Line spacing; a unitless value multiplies the font size. */
    color: var(--muted); /* Set foreground text colour; currentColor elsewhere reuses it. */
    margin: 0 0 23px; /* Outer spacing; shorthand order is top/right/bottom/left (two values mean vertical/horizontal). */
}

/* ----------------------------------------------------------------------
   Underlined call-to-action link.
   ---------------------------------------------------------------------- */
.textlink {
    font-size: 13px; /* Text size; clamp(min, preferred, max) bounds responsive sizing. */
    border-bottom: 1px solid #7e876f; /* Set the bottom border; eight-digit hex colours include alpha transparency. */
    padding-bottom: 7px; /* Inner spacing on the bottom side(s); inline follows writing direction and block follows document flow. */
}

/* ----------------------------------------------------------------------
   Gap between link text and its arrow.
   ---------------------------------------------------------------------- */
.textlink span {
    padding-left: 25px; /* Inner spacing on the left side(s); inline follows writing direction and block follows document flow. */
}

/* ----------------------------------------------------------------------
   Small uppercase location/background line.
   ---------------------------------------------------------------------- */
.location {
    font-size: 10px; /* Text size; clamp(min, preferred, max) bounds responsive sizing. */
    letter-spacing: 1.8px; /* Spacing between characters; negative values tighten it. */
    text-transform: uppercase; /* Change the visual letter case without editing the HTML text. */
    color: var(--muted); /* Set foreground text colour; currentColor elsewhere reuses it. */
    margin-top: 30px; /* Outer spacing on the top side(s); inline follows writing direction and block follows document flow. */
}

/* ----------------------------------------------------------------------
   Banner container, including the earlier image banner and current video placeholder.
   ---------------------------------------------------------------------- */
.featured {
    display: block; /* Choose the layout mode or hide the element when set to none. */
    position: relative; /* Set the positioning mode: relative anchors positioned children; absolute leaves normal flow; fixed anchors to the viewport. */
    height: 440px; /* Element height; the later 100dvh declaration follows the dynamic viewport height. */
    border-radius: 3px; /* Corner rounding; 50% makes a circle when width equals height. */
    overflow: hidden; /* Clip or hide overflowing content, or suppress scrolling when applied to the body. */
    background: #242024; /* Set a background colour, transparency or gradient. */
}

/* ----------------------------------------------------------------------
   Fill the banner with an image; crop proportionally and animate its hover zoom.
   ---------------------------------------------------------------------- */
.featured img {
    width: 100%; /* Element width; min(...) selects the smaller value and calc(...) performs a calculation. */
    height: 100%; /* Element height; the later 100dvh declaration follows the dynamic viewport height. */
    object-fit: cover; /* Scale the image proportionally to fill its box, cropping excess edges with cover. */
    transition: transform .7s; /* Animate changes to the named property; none disables the transition. */
}

/* ----------------------------------------------------------------------
   Dark gradient overlay above the image to improve overlay-text contrast.
   ---------------------------------------------------------------------- */
.featured:after {
    content: ''; /* Generate content for a pseudo-element; an empty string still creates the decorative box. */
    position: absolute; /* Set the positioning mode: relative anchors positioned children; absolute leaves normal flow; fixed anchors to the viewport. */
    inset: 0; /* Position offsets in top/right/bottom/left order; zero fills the positioned container. */
    background: linear-gradient(0deg,#000c,transparent 75%); /* Set a background colour, transparency or gradient. */
}

/* ----------------------------------------------------------------------
   Apply a slight image enlargement on hover.
   ---------------------------------------------------------------------- */
.featured:hover img {
    transform: scale(1.025); /* Visually scale or rotate the element without changing normal layout space. */
}

/* ----------------------------------------------------------------------
   Place banner text over the image, above the gradient overlay.
   ---------------------------------------------------------------------- */
.feature-copy {
    position: absolute; /* Set the positioning mode: relative anchors positioned children; absolute leaves normal flow; fixed anchors to the viewport. */
    bottom: 34px; /* Offset the positioned element from its bottom edge. */
    left: 36px; /* Offset the positioned element from its left edge. */
    z-index: 1; /* Stacking order for overlapping positioned elements. */
}

/* ----------------------------------------------------------------------
   Small uppercase banner/project label.
   ---------------------------------------------------------------------- */
.tag {
    font-size: 10px; /* Text size; clamp(min, preferred, max) bounds responsive sizing. */
    text-transform: uppercase; /* Change the visual letter case without editing the HTML text. */
    letter-spacing: 2px; /* Spacing between characters; negative values tighten it. */
}

/* ----------------------------------------------------------------------
   Banner heading typography and spacing.
   ---------------------------------------------------------------------- */
.feature-copy h2 {
    font-family: Georgia,serif; /* Preferred typefaces, followed by fallback fonts. */
    font-size: clamp(32px,4vw,56px); /* Text size; clamp(min, preferred, max) bounds responsive sizing. */
    font-weight: 400; /* Text weight; 400 is normal and bold is heavier. */
    margin: 14px 0 10px; /* Outer spacing; shorthand order is top/right/bottom/left (two values mean vertical/horizontal). */
}

/* ----------------------------------------------------------------------
   Banner description typography.
   ---------------------------------------------------------------------- */
.feature-copy p {
    font-size: 14px; /* Text size; clamp(min, preferred, max) bounds responsive sizing. */
    color: #e0ded6; /* Set foreground text colour; currentColor elsewhere reuses it. */
    margin: 0; /* Outer spacing; shorthand order is top/right/bottom/left (two values mean vertical/horizontal). */
}

/* ----------------------------------------------------------------------
   Circular arrow indicator positioned at the banner corner.
   ---------------------------------------------------------------------- */
.round {
    position: absolute; /* Set the positioning mode: relative anchors positioned children; absolute leaves normal flow; fixed anchors to the viewport. */
    right: 35px; /* Offset the positioned element from its right edge. */
    bottom: 35px; /* Offset the positioned element from its bottom edge. */
    border: 1px solid #ffffff90; /* Border shorthand: thickness, line style and colour; zero removes it. */
    border-radius: 50%; /* Corner rounding; 50% makes a circle when width equals height. */
    width: 53px; /* Element width; min(...) selects the smaller value and calc(...) performs a calculation. */
    height: 53px; /* Element height; the later 100dvh declaration follows the dynamic viewport height. */
    display: grid; /* Choose the layout mode or hide the element when set to none. */
    place-items: center; /* Set both align-items and justify-items together. */
    font-size: 25px; /* Text size; clamp(min, preferred, max) bounds responsive sizing. */
    z-index: 1; /* Stacking order for overlapping positioned elements. */
}

/* ----------------------------------------------------------------------
   Section heading and supporting label arranged on one row.
   ---------------------------------------------------------------------- */
.section-top {
    display: flex; /* Choose the layout mode or hide the element when set to none. */
    align-items: center; /* Align children on the cross axis in flex layout or within grid areas. */
    justify-content: space-between; /* Distribute or align children along the main flex axis or the grid content axis. */
    margin: 57px 0 24px; /* Outer spacing; shorthand order is top/right/bottom/left (two values mean vertical/horizontal). */
}

/* ----------------------------------------------------------------------
   Small uppercase section heading.
   ---------------------------------------------------------------------- */
.section-top h2 {
    font-size: 12px; /* Text size; clamp(min, preferred, max) bounds responsive sizing. */
    letter-spacing: 2px; /* Spacing between characters; negative values tighten it. */
    text-transform: uppercase; /* Change the visual letter case without editing the HTML text. */
    font-weight: 400; /* Text weight; 400 is normal and bold is heavier. */
    margin: 0; /* Outer spacing; shorthand order is top/right/bottom/left (two values mean vertical/horizontal). */
}

/* ----------------------------------------------------------------------
   Supporting section label.
   ---------------------------------------------------------------------- */
.section-top span {
    font-size: 11px; /* Text size; clamp(min, preferred, max) bounds responsive sizing. */
    color: var(--muted); /* Set foreground text colour; currentColor elsewhere reuses it. */
}

/* ----------------------------------------------------------------------
   Three-column card layout retained from the original homepage.
   ---------------------------------------------------------------------- */
.grid {
    display: grid; /* Choose the layout mode or hide the element when set to none. */
    grid-template-columns: repeat(3,1fr); /* Define grid columns; fr units divide the available space proportionally. */
    gap: 24px; /* Space between flex/grid items. */
}

/* ----------------------------------------------------------------------
   Card illustration area with clipped overflow and hover effects.
   ---------------------------------------------------------------------- */
.card .art {
    height: 230px; /* Element height; the later 100dvh declaration follows the dynamic viewport height. */
    position: relative; /* Set the positioning mode: relative anchors positioned children; absolute leaves normal flow; fixed anchors to the viewport. */
    overflow: hidden; /* Clip or hide overflowing content, or suppress scrolling when applied to the body. */
    transition: filter .3s; /* Animate changes to the named property; none disables the transition. */
}

/* ----------------------------------------------------------------------
   Brighten card artwork on hover.
   ---------------------------------------------------------------------- */
.card:hover .art {
    filter: brightness(1.15); /* Apply a visual image effect such as increased brightness. */
}

/* ----------------------------------------------------------------------
   Decorative arrow drawn with a pseudo-element.
   ---------------------------------------------------------------------- */
.art:after {
    content: '↗'; /* Generate content for a pseudo-element; an empty string still creates the decorative box. */
    position: absolute; /* Set the positioning mode: relative anchors positioned children; absolute leaves normal flow; fixed anchors to the viewport. */
    right: 16px; /* Offset the positioned element from its right edge. */
    bottom: 14px; /* Offset the positioned element from its bottom edge. */
    font-size: 23px; /* Text size; clamp(min, preferred, max) bounds responsive sizing. */
}

/* ----------------------------------------------------------------------
   Background and centring for the original poetry illustration.
   ---------------------------------------------------------------------- */
.art.poetry {
    background: #272c25; /* Set a background colour, transparency or gradient. */
    display: grid; /* Choose the layout mode or hide the element when set to none. */
    place-content: center; /* Set both align-content and justify-content together. */
}

/* ----------------------------------------------------------------------
   Quotation typography inside the original poetry artwork.
   ---------------------------------------------------------------------- */
.poetry blockquote {
    font: italic 26px/1.5 Georgia,serif; /* Font shorthand combining style, size, optional line height and family. */
    margin: 25px; /* Outer spacing; shorthand order is top/right/bottom/left (two values mean vertical/horizontal). */
    color: #d9dfcb; /* Set foreground text colour; currentColor elsewhere reuses it. */
}

/* ----------------------------------------------------------------------
   Small caption in the poetry artwork.
   ---------------------------------------------------------------------- */
.poetry small {
    font: 10px Arial; /* Font shorthand combining style, size, optional line height and family. */
    letter-spacing: 2px; /* Spacing between characters; negative values tighten it. */
    color: #aeb7a1; /* Set foreground text colour; currentColor elsewhere reuses it. */
}

/* ----------------------------------------------------------------------
   Layered colour gradient forming the original abstract landscape.
   ---------------------------------------------------------------------- */
.art.photo {
    background: linear-gradient(160deg,#808b79 0%,#525f56 42%,#243a3d 43%,#394e47 60%,#172b2e 61%); /* Set a background colour, transparency or gradient. */
}

/* ----------------------------------------------------------------------
   Circular sun shape inside the landscape illustration.
   ---------------------------------------------------------------------- */
.photo .sun {
    width: 58px; /* Element width; min(...) selects the smaller value and calc(...) performs a calculation. */
    height: 58px; /* Element height; the later 100dvh declaration follows the dynamic viewport height. */
    background: #e2d5ac; /* Set a background colour, transparency or gradient. */
    border-radius: 50%; /* Corner rounding; 50% makes a circle when width equals height. */
    position: absolute; /* Set the positioning mode: relative anchors positioned children; absolute leaves normal flow; fixed anchors to the viewport. */
    top: 35px; /* Offset the positioned element from its top edge. */
    left: 60%; /* Offset the positioned element from its left edge. */
}

/* ----------------------------------------------------------------------
   Rotated rounded foreground shape in the landscape illustration.
   ---------------------------------------------------------------------- */
.photo:before {
    content: ''; /* Generate content for a pseudo-element; an empty string still creates the decorative box. */
    position: absolute; /* Set the positioning mode: relative anchors positioned children; absolute leaves normal flow; fixed anchors to the viewport. */
    inset: 50% -20% -40%; /* Position offsets in top/right/bottom/left order; zero fills the positioned container. */
    background: #142c27; /* Set a background colour, transparency or gradient. */
    transform: rotate(-18deg); /* Visually scale or rotate the element without changing normal layout space. */
    border-radius: 45%; /* Corner rounding; 50% makes a circle when width equals height. */
}

/* ----------------------------------------------------------------------
   Caption positioned over the landscape illustration.
   ---------------------------------------------------------------------- */
.photo-label {
    position: absolute; /* Set the positioning mode: relative anchors positioned children; absolute leaves normal flow; fixed anchors to the viewport. */
    left: 20px; /* Offset the positioned element from its left edge. */
    bottom: 20px; /* Offset the positioned element from its bottom edge. */
    font-size: 10px; /* Text size; clamp(min, preferred, max) bounds responsive sizing. */
    letter-spacing: 2px; /* Spacing between characters; negative values tighten it. */
    color: #d2daca; /* Set foreground text colour; currentColor elsewhere reuses it. */
}

/* ----------------------------------------------------------------------
   Original essay illustration: coloured background and centred content.
   ---------------------------------------------------------------------- */
.art.essays {
    background: #c0b9a3; /* Set a background colour, transparency or gradient. */
    color: #262922; /* Set foreground text colour; currentColor elsewhere reuses it. */
    display: flex; /* Choose the layout mode or hide the element when set to none. */
    align-items: center; /* Align children on the cross axis in flex layout or within grid areas. */
    justify-content: center; /* Distribute or align children along the main flex axis or the grid content axis. */
}

/* ----------------------------------------------------------------------
   Large rotated serif lettering in the essay illustration.
   ---------------------------------------------------------------------- */
.essays b {
    font: 110px Georgia,serif; /* Font shorthand combining style, size, optional line height and family. */
    letter-spacing: -15px; /* Spacing between characters; negative values tighten it. */
    transform: rotate(-8deg); /* Visually scale or rotate the element without changing normal layout space. */
    opacity: .85; /* Overall transparency; 1 is opaque. */
}

/* ----------------------------------------------------------------------
   Card title typography.
   ---------------------------------------------------------------------- */
.card h3 {
    font-size: 21px; /* Text size; clamp(min, preferred, max) bounds responsive sizing. */
    font-weight: 400; /* Text weight; 400 is normal and bold is heavier. */
    margin: 20px 0 8px; /* Outer spacing; shorthand order is top/right/bottom/left (two values mean vertical/horizontal). */
}

/* ----------------------------------------------------------------------
   Card description typography.
   ---------------------------------------------------------------------- */
.card p {
    font-size: 13px; /* Text size; clamp(min, preferred, max) bounds responsive sizing. */
    line-height: 1.65; /* Line spacing; a unitless value multiplies the font size. */
    color: var(--muted); /* Set foreground text colour; currentColor elsewhere reuses it. */
    margin: 0; /* Outer spacing; shorthand order is top/right/bottom/left (two values mean vertical/horizontal). */
}

/* ----------------------------------------------------------------------
   Small uppercase category/metadata label.
   ---------------------------------------------------------------------- */
.meta {
    display: block; /* Choose the layout mode or hide the element when set to none. */
    text-transform: uppercase; /* Change the visual letter case without editing the HTML text. */
    font-size: 9px; /* Text size; clamp(min, preferred, max) bounds responsive sizing. */
    letter-spacing: 1.6px; /* Spacing between characters; negative values tighten it. */
    color: var(--accent); /* Set foreground text colour; currentColor elsewhere reuses it. */
    margin-top: 18px; /* Outer spacing on the top side(s); inline follows writing direction and block follows document flow. */
}

/* ----------------------------------------------------------------------
   Earlier two-column About section styling, retained for reuse.
   ---------------------------------------------------------------------- */
.about {
    margin-top: 65px; /* Outer spacing on the top side(s); inline follows writing direction and block follows document flow. */
    padding: 42px 0; /* Inner spacing; shorthand order is top/right/bottom/left (two values mean vertical/horizontal). */
    display: grid; /* Choose the layout mode or hide the element when set to none. */
    grid-template-columns: 1fr 1fr; /* Define grid columns; fr units divide the available space proportionally. */
    border-top: 1px solid #ffffff25; /* Set the top border; eight-digit hex colours include alpha transparency. */
    border-bottom: 1px solid #ffffff25; /* Set the bottom border; eight-digit hex colours include alpha transparency. */
    gap: 60px; /* Space between flex/grid items. */
}

/* ----------------------------------------------------------------------
   Earlier About heading typography.
   ---------------------------------------------------------------------- */
.about h2 {
    font: 36px/1.2 Georgia,serif; /* Font shorthand combining style, size, optional line height and family. */
    margin: 0 0 22px; /* Outer spacing; shorthand order is top/right/bottom/left (two values mean vertical/horizontal). */
}

/* ----------------------------------------------------------------------
   Earlier About paragraph typography.
   ---------------------------------------------------------------------- */
.about p {
    font-size: 15px; /* Text size; clamp(min, preferred, max) bounds responsive sizing. */
    line-height: 1.75; /* Line spacing; a unitless value multiplies the font size. */
    color: var(--muted); /* Set foreground text colour; currentColor elsewhere reuses it. */
    margin: 0 0 22px; /* Outer spacing; shorthand order is top/right/bottom/left (two values mean vertical/horizontal). */
}

/* ----------------------------------------------------------------------
   Allow the earlier About links to wrap onto additional rows.
   ---------------------------------------------------------------------- */
.about-links {
    display: flex; /* Choose the layout mode or hide the element when set to none. */
    gap: 24px; /* Space between flex/grid items. */
    flex-wrap: wrap; /* Allow flex children to wrap onto additional rows. */
}

/* ----------------------------------------------------------------------
   Closing invitation and contact link layout.
   ---------------------------------------------------------------------- */
.closing {
    padding: 65px 0; /* Inner spacing; shorthand order is top/right/bottom/left (two values mean vertical/horizontal). */
    display: flex; /* Choose the layout mode or hide the element when set to none. */
    justify-content: space-between; /* Distribute or align children along the main flex axis or the grid content axis. */
    align-items: center; /* Align children on the cross axis in flex layout or within grid areas. */
}

/* ----------------------------------------------------------------------
   Closing invitation heading.
   ---------------------------------------------------------------------- */
.closing h2 {
    font: 40px Georgia,serif; /* Font shorthand combining style, size, optional line height and family. */
    margin: 0; /* Outer spacing; shorthand order is top/right/bottom/left (two values mean vertical/horizontal). */
}

/* ----------------------------------------------------------------------
   Closing contact-link styling.
   ---------------------------------------------------------------------- */
.closing a {
    font-size: 14px; /* Text size; clamp(min, preferred, max) bounds responsive sizing. */
    border-bottom: 1px solid #828c74; /* Set the bottom border; eight-digit hex colours include alpha transparency. */
    padding: 10px 0; /* Inner spacing; shorthand order is top/right/bottom/left (two values mean vertical/horizontal). */
}

/* ----------------------------------------------------------------------
   Footer layout, spacing, text and top divider.
   ---------------------------------------------------------------------- */
footer {
    border-top: 1px solid #ffffff20; /* Set the top border; eight-digit hex colours include alpha transparency. */
    display: flex; /* Choose the layout mode or hide the element when set to none. */
    justify-content: space-between; /* Distribute or align children along the main flex axis or the grid content axis. */
    padding: 24px 5%; /* Inner spacing; shorthand order is top/right/bottom/left (two values mean vertical/horizontal). */
    font-size: 11px; /* Text size; clamp(min, preferred, max) bounds responsive sizing. */
    color: var(--muted); /* Set foreground text colour; currentColor elsewhere reuses it. */
}

/* ----------------------------------------------------------------------
   Footer social-link row.
   ---------------------------------------------------------------------- */
footer div {
    display: flex; /* Choose the layout mode or hide the element when set to none. */
    gap: 24px; /* Space between flex/grid items. */
}

/* ======================================================================
   LARGE DESKTOP: apply these overrides at viewport widths of 1600px and above.
   ====================================================================== */
@media(min-width:1600px) {

    /* ----------------------------------------------------------------------
       Banner container, including the earlier image banner and current video placeholder.
       ---------------------------------------------------------------------- */
    .featured {
        height: 520px; /* Element height; the later 100dvh declaration follows the dynamic viewport height. */
    }
}

/* ======================================================================
   MOBILE/TABLET: apply these overrides at viewport widths of 760px or below.
   ====================================================================== */
@media(max-width:760px) {

    /* ----------------------------------------------------------------------
       Page header layout, spacing and bottom divider.
       ---------------------------------------------------------------------- */
    header {
        height: 78px; /* Element height; the later 100dvh declaration follows the dynamic viewport height. */
    }

    /* ----------------------------------------------------------------------
       Base navigation layout; more specific desktop and drawer rules below override it.
       ---------------------------------------------------------------------- */
    nav {
        gap: 15px; /* Space between flex/grid items. */
    }

    /* ----------------------------------------------------------------------
       Component-specific override for nav .desktop.
       ---------------------------------------------------------------------- */
    nav .desktop {
        display: none; /* Choose the layout mode or hide the element when set to none. */
    }

    /* ----------------------------------------------------------------------
       Introductory area: two columns on desktop, with spacing around and between them.
       ---------------------------------------------------------------------- */
    .intro {
        padding-top: 45px; /* Inner spacing on the top side(s); inline follows writing direction and block follows document flow. */
        grid-template-columns: 1fr; /* Define grid columns; fr units divide the available space proportionally. */
        gap: 26px; /* Space between flex/grid items. */
    }

    /* ----------------------------------------------------------------------
       Main heading typography, including a fluid font size bounded by minimum and maximum values.
       ---------------------------------------------------------------------- */
    .intro h1 {
        letter-spacing: -2px; /* Spacing between characters; negative values tighten it. */
    }

    /* ----------------------------------------------------------------------
       Position and constrain the introduction text beside the heading.
       ---------------------------------------------------------------------- */
    .intro-copy {
        padding-left: 0; /* Inner spacing on the left side(s); inline follows writing direction and block follows document flow. */
        max-width: 100%; /* Upper width limit. */
    }

    /* ----------------------------------------------------------------------
       Introductory paragraph typography and spacing.
       ---------------------------------------------------------------------- */
    .intro-copy p {
        font-size: 16px; /* Text size; clamp(min, preferred, max) bounds responsive sizing. */
    }

    /* ----------------------------------------------------------------------
       Small uppercase location/background line.
       ---------------------------------------------------------------------- */
    .location {
        margin-top: 24px; /* Outer spacing on the top side(s); inline follows writing direction and block follows document flow. */
    }

    /* ----------------------------------------------------------------------
       Banner container, including the earlier image banner and current video placeholder.
       ---------------------------------------------------------------------- */
    .featured {
        height: 370px; /* Element height; the later 100dvh declaration follows the dynamic viewport height. */
    }

    /* ----------------------------------------------------------------------
       Fill the banner with an image; crop proportionally and animate its hover zoom.
       ---------------------------------------------------------------------- */
    .featured img {
        object-position: 55% center; /* Choose which part of a cropped image stays visible. */
    }

    /* ----------------------------------------------------------------------
       Place banner text over the image, above the gradient overlay.
       ---------------------------------------------------------------------- */
    .feature-copy {
        left: 23px; /* Offset the positioned element from its left edge. */
        bottom: 28px; /* Offset the positioned element from its bottom edge. */
        right: 65px; /* Offset the positioned element from its right edge. */
    }

    /* ----------------------------------------------------------------------
       Banner description typography.
       ---------------------------------------------------------------------- */
    .feature-copy p {
        line-height: 1.6; /* Line spacing; a unitless value multiplies the font size. */
    }

    /* ----------------------------------------------------------------------
       Circular arrow indicator positioned at the banner corner.
       ---------------------------------------------------------------------- */
    .round {
        right: 20px; /* Offset the positioned element from its right edge. */
        bottom: 27px; /* Offset the positioned element from its bottom edge. */
        width: 38px; /* Element width; min(...) selects the smaller value and calc(...) performs a calculation. */
        height: 38px; /* Element height; the later 100dvh declaration follows the dynamic viewport height. */
    }

    /* ----------------------------------------------------------------------
       Three-column card layout retained from the original homepage.
       ---------------------------------------------------------------------- */
    .grid {
        grid-template-columns: 1fr; /* Define grid columns; fr units divide the available space proportionally. */
        gap: 32px; /* Space between flex/grid items. */
    }

    /* ----------------------------------------------------------------------
       Card illustration area with clipped overflow and hover effects.
       ---------------------------------------------------------------------- */
    .card .art {
        height: 240px; /* Element height; the later 100dvh declaration follows the dynamic viewport height. */
    }

    /* ----------------------------------------------------------------------
       Earlier two-column About section styling, retained for reuse.
       ---------------------------------------------------------------------- */
    .about {
        grid-template-columns: 1fr; /* Define grid columns; fr units divide the available space proportionally. */
        gap: 22px; /* Space between flex/grid items. */
        margin-top: 45px; /* Outer spacing on the top side(s); inline follows writing direction and block follows document flow. */
    }

    /* ----------------------------------------------------------------------
       Closing invitation and contact link layout.
       ---------------------------------------------------------------------- */
    .closing {
        align-items: start; /* Align children on the cross axis in flex layout or within grid areas. */
        gap: 25px; /* Space between flex/grid items. */
        flex-direction: column; /* Choose horizontal or vertical ordering of flex children. */
    }

    /* ----------------------------------------------------------------------
       Closing invitation heading.
       ---------------------------------------------------------------------- */
    .closing h2 {
        font-size: 33px; /* Text size; clamp(min, preferred, max) bounds responsive sizing. */
    }

    /* ----------------------------------------------------------------------
       Footer layout, spacing, text and top divider.
       ---------------------------------------------------------------------- */
    footer {
        gap: 20px; /* Space between flex/grid items. */
        flex-wrap: wrap; /* Allow flex children to wrap onto additional rows. */
    }
}

/* ======================================================================
   REDUCED MOTION: respect the visitor preference by removing smooth scrolling and transitions.
   ====================================================================== */
@media(prefers-reduced-motion:reduce) {

    /* ----------------------------------------------------------------------
       Document-level scrolling and browser text-sizing settings.
       ---------------------------------------------------------------------- */
    html {
        scroll-behavior: auto; /* Choose smooth anchor scrolling, or immediate scrolling when set to auto. */
    }

    /* ----------------------------------------------------------------------
       Global box sizing: declared widths include padding and borders.
       ---------------------------------------------------------------------- */
    * {
        transition: none!important; /* Animate changes to the named property; none disables the transition. */
    }
}

/* ----------------------------------------------------------------------
   Accordion spacing and top divider.
   ---------------------------------------------------------------------- */
.accordion {
    margin-top: 48px; /* Outer spacing on the top side(s); inline follows writing direction and block follows document flow. */
    border-top: 1px solid #ffffff30; /* Set the top border; eight-digit hex colours include alpha transparency. */
}

/* ----------------------------------------------------------------------
   Individual accordion section; native details controls its open state.
   ---------------------------------------------------------------------- */
.accordion details {
    border-bottom: 1px solid #ffffff30; /* Set the bottom border; eight-digit hex colours include alpha transparency. */
}

/* ----------------------------------------------------------------------
   Clickable accordion heading row with custom marker styling.
   ---------------------------------------------------------------------- */
.accordion summary {
    list-style: none; /* Remove the standard list/disclosure marker where supported. */
    display: flex; /* Choose the layout mode or hide the element when set to none. */
    align-items: center; /* Align children on the cross axis in flex layout or within grid areas. */
    gap: 24px; /* Space between flex/grid items. */
    padding: 27px 0; /* Inner spacing; shorthand order is top/right/bottom/left (two values mean vertical/horizontal). */
    cursor: pointer; /* Pointer appearance over the interactive element. */
}

/* ----------------------------------------------------------------------
   Hide the browser-specific default disclosure marker.
   ---------------------------------------------------------------------- */
.accordion summary::-webkit-details-marker {
    display: none; /* Choose the layout mode or hide the element when set to none. */
}

/* ----------------------------------------------------------------------
   Accent the accordion heading on hover.
   ---------------------------------------------------------------------- */
.accordion summary:hover h2 {
    color: var(--accent); /* Set foreground text colour; currentColor elsewhere reuses it. */
}

/* ----------------------------------------------------------------------
   Keyboard-focus outline for accordion controls.
   ---------------------------------------------------------------------- */
.accordion summary:focus-visible {
    outline: 2px solid var(--accent); /* Focus-ring styling that does not change layout dimensions. */
    outline-offset: 5px; /* Gap between the focus outline and the element edge. */
}

/* ----------------------------------------------------------------------
   Small section number with evenly sized numeric characters.
   ---------------------------------------------------------------------- */
.acc-num {
    font-size: 11px; /* Text size; clamp(min, preferred, max) bounds responsive sizing. */
    color: var(--muted); /* Set foreground text colour; currentColor elsewhere reuses it. */
    font-variant-numeric: tabular-nums; /* Use equal-width digits for aligned section numbers. */
    align-self: center; /* Override alignment for this individual flex/grid item. */
    width: 24px; /* Element width; min(...) selects the smaller value and calc(...) performs a calculation. */
}

/* ----------------------------------------------------------------------
   Accordion heading typography and long-title wrapping.
   ---------------------------------------------------------------------- */
.accordion h2 {
    font-size: clamp(23px,3vw,34px); /* Text size; clamp(min, preferred, max) bounds responsive sizing. */
    font-weight: 400; /* Text weight; 400 is normal and bold is heavier. */
    letter-spacing: -.7px; /* Spacing between characters; negative values tighten it. */
    margin: 0; /* Outer spacing; shorthand order is top/right/bottom/left (two values mean vertical/horizontal). */
}

/* ----------------------------------------------------------------------
   Container for the custom plus/minus indicator, pushed to the right.
   ---------------------------------------------------------------------- */
.acc-icon {
    margin-left: auto; /* Outer spacing on the left side(s); inline follows writing direction and block follows document flow. */
    width: 20px; /* Element width; min(...) selects the smaller value and calc(...) performs a calculation. */
    height: 20px; /* Element height; the later 100dvh declaration follows the dynamic viewport height. */
    position: relative; /* Set the positioning mode: relative anchors positioned children; absolute leaves normal flow; fixed anchors to the viewport. */
}

/* ----------------------------------------------------------------------
   Two thin pseudo-element strokes form the disclosure icon.
   ---------------------------------------------------------------------- */
.acc-icon:before,.acc-icon:after {
    content: ''; /* Generate content for a pseudo-element; an empty string still creates the decorative box. */
    position: absolute; /* Set the positioning mode: relative anchors positioned children; absolute leaves normal flow; fixed anchors to the viewport. */
    background: var(--muted); /* Set a background colour, transparency or gradient. */
    left: 0; /* Offset the positioned element from its left edge. */
    top: 9px; /* Offset the positioned element from its top edge. */
    width: 20px; /* Element width; min(...) selects the smaller value and calc(...) performs a calculation. */
    height: 1px; /* Element height; the later 100dvh declaration follows the dynamic viewport height. */
}

/* ----------------------------------------------------------------------
   Rotate the second stroke to form the vertical part of the plus sign.
   ---------------------------------------------------------------------- */
.acc-icon:after {
    transform: rotate(90deg); /* Visually scale or rotate the element without changing normal layout space. */
}

/* ----------------------------------------------------------------------
   Rotate the vertical stroke flat when open, producing a minus sign.
   ---------------------------------------------------------------------- */
details[open] .acc-icon:after {
    transform: rotate(0); /* Visually scale or rotate the element without changing normal layout space. */
}

/* ----------------------------------------------------------------------
   Accordion content width, padding, centring and word wrapping.
   ---------------------------------------------------------------------- */
.acc-content {
    padding: 5px 48px 38px; /* Inner spacing; shorthand order is top/right/bottom/left (two values mean vertical/horizontal). */
    max-width: 850px; /* Upper width limit. */
    margin-inline: auto; /* Outer spacing on the inline side(s); inline follows writing direction and block follows document flow. */
}

/* ----------------------------------------------------------------------
   Desktop image/text grid; all seven current sections use this class.
   ---------------------------------------------------------------------- */
.acc-content.has-art {
    display: grid; /* Choose the layout mode or hide the element when set to none. */
    grid-template-columns: 1fr 1.1fr; /* Define grid columns; fr units divide the available space proportionally. */
    gap: 40px; /* Space between flex/grid items. */
    max-width: 1000px; /* Upper width limit. */
    align-items: center; /* Align children on the cross axis in flex layout or within grid areas. */
}

/* ----------------------------------------------------------------------
   Size older illustration elements inside accordion content.
   ---------------------------------------------------------------------- */
.acc-content .art {
    height: 200px; /* Element height; the later 100dvh declaration follows the dynamic viewport height. */
}

/* ----------------------------------------------------------------------
   Accordion content heading typography.
   ---------------------------------------------------------------------- */
.acc-content h3 {
    font: 28px/1.25 Georgia,serif; /* Font shorthand combining style, size, optional line height and family. */
    font-weight: 400; /* Text weight; 400 is normal and bold is heavier. */
    margin: 0 0 16px; /* Outer spacing; shorthand order is top/right/bottom/left (two values mean vertical/horizontal). */
}

/* ----------------------------------------------------------------------
   Accordion description typography and spacing.
   ---------------------------------------------------------------------- */
.acc-content p {
    font-size: 15px; /* Text size; clamp(min, preferred, max) bounds responsive sizing. */
    line-height: 1.75; /* Line spacing; a unitless value multiplies the font size. */
    color: var(--muted); /* Set foreground text colour; currentColor elsewhere reuses it. */
    margin: 0 0 24px; /* Outer spacing; shorthand order is top/right/bottom/left (two values mean vertical/horizontal). */
}

/* ----------------------------------------------------------------------
   Keep each text link together as an inline block.
   ---------------------------------------------------------------------- */
.acc-content .textlink {
    display: inline-block; /* Choose the layout mode or hide the element when set to none. */
}

/* ----------------------------------------------------------------------
   Highlight the currently expanded accordion heading.
   ---------------------------------------------------------------------- */
.accordion details[open] summary h2 {
    color: var(--accent); /* Set foreground text colour; currentColor elsewhere reuses it. */
}

/* ======================================================================
   MOBILE/TABLET: apply these overrides at viewport widths of 760px or below.
   ====================================================================== */
@media(max-width:760px) {

    /* ----------------------------------------------------------------------
       Accordion spacing and top divider.
       ---------------------------------------------------------------------- */
    .accordion {
        margin-top: 32px; /* Outer spacing on the top side(s); inline follows writing direction and block follows document flow. */
    }

    /* ----------------------------------------------------------------------
       Clickable accordion heading row with custom marker styling.
       ---------------------------------------------------------------------- */
    .accordion summary {
        padding: 23px 0; /* Inner spacing; shorthand order is top/right/bottom/left (two values mean vertical/horizontal). */
        gap: 15px; /* Space between flex/grid items. */
    }

    /* ----------------------------------------------------------------------
       Responsive accordion content layout and horizontal padding overrides.
       ---------------------------------------------------------------------- */
    .acc-content,.acc-content.has-art {
        display: block; /* Choose the layout mode or hide the element when set to none. */
        padding: 0 0 30px 39px; /* Inner spacing; shorthand order is top/right/bottom/left (two values mean vertical/horizontal). */
    }

    /* ----------------------------------------------------------------------
       Size older illustration elements inside accordion content.
       ---------------------------------------------------------------------- */
    .acc-content .art {
        margin-bottom: 25px; /* Outer spacing on the bottom side(s); inline follows writing direction and block follows document flow. */
        height: 180px; /* Element height; the later 100dvh declaration follows the dynamic viewport height. */
    }

    /* ----------------------------------------------------------------------
       Accordion content heading typography.
       ---------------------------------------------------------------------- */
    .acc-content h3 {
        font-size: 25px; /* Text size; clamp(min, preferred, max) bounds responsive sizing. */
    }

    /* ----------------------------------------------------------------------
       Small section number with evenly sized numeric characters.
       ---------------------------------------------------------------------- */
    .acc-num {
        width: 24px; /* Element width; min(...) selects the smaller value and calc(...) performs a calculation. */
        flex-shrink: 0; /* Control shrinking; zero preserves the item width. */
    }

    /* ----------------------------------------------------------------------
       Container for the custom plus/minus indicator, pushed to the right.
       ---------------------------------------------------------------------- */
    .acc-icon {
        flex-shrink: 0; /* Control shrinking; zero preserves the item width. */
    }
}

/* ----------------------------------------------------------------------
   Image placeholder with a 16:9 preferred shape and centred label/icon.
   ---------------------------------------------------------------------- */
.image-placeholder {
    width: 100%; /* Element width; min(...) selects the smaller value and calc(...) performs a calculation. */
    aspect-ratio: 16/9; /* Preferred width-to-height proportion; 16/9 means sixteen units wide for every nine high. */
    background: #20241f; /* Set a background colour, transparency or gradient. */
    border: 1px solid #495041; /* Border shorthand: thickness, line style and colour; zero removes it. */
    display: flex; /* Choose the layout mode or hide the element when set to none. */
    flex-direction: column; /* Choose horizontal or vertical ordering of flex children. */
    align-items: center; /* Align children on the cross axis in flex layout or within grid areas. */
    justify-content: center; /* Distribute or align children along the main flex axis or the grid content axis. */
    gap: 14px; /* Space between flex/grid items. */
    color: #b5bda9; /* Set foreground text colour; currentColor elsewhere reuses it. */
}

/* ----------------------------------------------------------------------
   Small uppercase placeholder label.
   ---------------------------------------------------------------------- */
.image-placeholder span {
    font-size: 10px; /* Text size; clamp(min, preferred, max) bounds responsive sizing. */
    text-transform: uppercase; /* Change the visual letter case without editing the HTML text. */
    letter-spacing: 2px; /* Spacing between characters; negative values tighten it. */
}

/* ----------------------------------------------------------------------
   Space below an image when the section does not use the two-column class.
   ---------------------------------------------------------------------- */
.acc-content:not(.has-art) .image-placeholder {
    margin-bottom: 28px; /* Outer spacing on the bottom side(s); inline follows writing direction and block follows document flow. */
}

/* ----------------------------------------------------------------------
   Minimum image height in the desktop image/text layout; mobile rules remove it.
   ---------------------------------------------------------------------- */
.acc-content.has-art .image-placeholder {
    min-height: 200px; /* Lower height limit; useful for touch targets and placeholder sizing. */
}

/* ======================================================================
   MOBILE/TABLET: apply these overrides at viewport widths of 760px or below.
   ====================================================================== */
@media(max-width:760px) {

    /* ----------------------------------------------------------------------
       Minimum image height in the desktop image/text layout; mobile rules remove it.
       ---------------------------------------------------------------------- */
    .acc-content.has-art .image-placeholder {
        margin-bottom: 25px; /* Outer spacing on the bottom side(s); inline follows writing direction and block follows document flow. */
        min-height: 0; /* Lower height limit; useful for touch targets and placeholder sizing. */
    }
}

/* ----------------------------------------------------------------------
   Video placeholder background and centred contents.
   ---------------------------------------------------------------------- */
.video-placeholder {
    background: #1c211d; /* Set a background colour, transparency or gradient. */
    border: 1px solid #495041; /* Border shorthand: thickness, line style and colour; zero removes it. */
    display: grid; /* Choose the layout mode or hide the element when set to none. */
    place-items: center; /* Set both align-items and justify-items together. */
}

/* ----------------------------------------------------------------------
   Disable the image-banner gradient for the video placeholder.
   ---------------------------------------------------------------------- */
.video-placeholder:after {
    display: none; /* Choose the layout mode or hide the element when set to none. */
}

/* ----------------------------------------------------------------------
   Stack and centre the video icon and label.
   ---------------------------------------------------------------------- */
.video-label {
    display: flex; /* Choose the layout mode or hide the element when set to none. */
    flex-direction: column; /* Choose horizontal or vertical ordering of flex children. */
    align-items: center; /* Align children on the cross axis in flex layout or within grid areas. */
    gap: 18px; /* Space between flex/grid items. */
    color: #b5bda9; /* Set foreground text colour; currentColor elsewhere reuses it. */
}

/* ----------------------------------------------------------------------
   Video label typography.
   ---------------------------------------------------------------------- */
.video-label span {
    font-size: 11px; /* Text size; clamp(min, preferred, max) bounds responsive sizing. */
    text-transform: uppercase; /* Change the visual letter case without editing the HTML text. */
    letter-spacing: 2.5px; /* Spacing between characters; negative values tighten it. */
}

/* ----------------------------------------------------------------------
   Accordion heading typography and long-title wrapping.
   ---------------------------------------------------------------------- */
.accordion h2 {
    overflow-wrap: anywhere; /* Permit long text to break rather than overflow its container. */
}

/* ======================================================================
   MOBILE/TABLET: apply these overrides at viewport widths of 760px or below.
   ====================================================================== */
@media(max-width:760px) {

    /* ----------------------------------------------------------------------
       Accordion heading typography and long-title wrapping.
       ---------------------------------------------------------------------- */
    .accordion h2 {
        font-size: 23px; /* Text size; clamp(min, preferred, max) bounds responsive sizing. */
        line-height: 1.25; /* Line spacing; a unitless value multiplies the font size. */
    }
}

/* ======================================================================
   DESKTOP ACCORDION: apply from 761px upward to align tabs and content.
   ====================================================================== */
@media(min-width:761px) {

    /* ----------------------------------------------------------------------
       Accordion spacing and top divider.
       ---------------------------------------------------------------------- */
    .accordion {
        border-top: 0; /* Set the top border; eight-digit hex colours include alpha transparency. */
    }

    /* ----------------------------------------------------------------------
       Individual accordion section; native details controls its open state.
       ---------------------------------------------------------------------- */
    .accordion details {
        width: calc(100% - 96px); /* Element width; min(...) selects the smaller value and calc(...) performs a calculation. */
        max-width: 754px; /* Upper width limit. */
        margin-inline: auto; /* Outer spacing on the inline side(s); inline follows writing direction and block follows document flow. */
    }

    /* ----------------------------------------------------------------------
       Top divider for the first accordion section.
       ---------------------------------------------------------------------- */
    .accordion details:first-child {
        border-top: 1px solid #ffffff30; /* Set the top border; eight-digit hex colours include alpha transparency. */
    }

    /* ----------------------------------------------------------------------
       Responsive accordion content layout and horizontal padding overrides.
       ---------------------------------------------------------------------- */
    .acc-content,.acc-content.has-art {
        padding-inline: 0; /* Inner spacing on the inline side(s); inline follows writing direction and block follows document flow. */
    }

    /* ----------------------------------------------------------------------
       Keep accordion numbers and disclosure icons from shrinking.
       ---------------------------------------------------------------------- */
    .acc-num,.acc-icon {
        flex-shrink: 0; /* Control shrinking; zero preserves the item width. */
    }
}

/* ----------------------------------------------------------------------
   Shared styling for the menu-open and menu-close buttons.
   ---------------------------------------------------------------------- */
.main-menu-toggle,.drawer-close {
    display: inline-flex; /* Choose the layout mode or hide the element when set to none. */
    align-items: center; /* Align children on the cross axis in flex layout or within grid areas. */
    gap: 12px; /* Space between flex/grid items. */
    font: 14px Arial,Helvetica,sans-serif; /* Font shorthand combining style, size, optional line height and family. */
    color: var(--text); /* Set foreground text colour; currentColor elsewhere reuses it. */
    background: transparent; /* Set a background colour, transparency or gradient. */
    border: 1px solid #67705c; /* Border shorthand: thickness, line style and colour; zero removes it. */
    border-radius: 28px; /* Corner rounding; 50% makes a circle when width equals height. */
    padding: 12px 18px; /* Inner spacing; shorthand order is top/right/bottom/left (two values mean vertical/horizontal). */
    min-height: 44px; /* Lower height limit; useful for touch targets and placeholder sizing. */
    cursor: pointer; /* Pointer appearance over the interactive element. */
}

/* ----------------------------------------------------------------------
   Container for the three-line hamburger icon.
   ---------------------------------------------------------------------- */
.hamburger {
    width: 18px; /* Element width; min(...) selects the smaller value and calc(...) performs a calculation. */
    display: grid; /* Choose the layout mode or hide the element when set to none. */
    gap: 4px; /* Space between flex/grid items. */
}

/* ----------------------------------------------------------------------
   Individual horizontal hamburger stroke.
   ---------------------------------------------------------------------- */
.hamburger span {
    height: 1px; /* Element height; the later 100dvh declaration follows the dynamic viewport height. */
    background: currentColor; /* Set a background colour, transparency or gradient. */
    width: 18px; /* Element width; min(...) selects the smaller value and calc(...) performs a calculation. */
}

/* ----------------------------------------------------------------------
   Right-edge modal drawer: bounded width, full viewport height and independent vertical scrolling.
   ---------------------------------------------------------------------- */
#main-menu-drawer {
    position: fixed; /* Set the positioning mode: relative anchors positioned children; absolute leaves normal flow; fixed anchors to the viewport. */
    inset: 0 0 0 auto; /* Position offsets in top/right/bottom/left order; zero fills the positioned container. */
    margin: 0; /* Outer spacing; shorthand order is top/right/bottom/left (two values mean vertical/horizontal). */
    width: min(380px,100%); /* Element width; min(...) selects the smaller value and calc(...) performs a calculation. */
    height: 100%; /* Element height; the later 100dvh declaration follows the dynamic viewport height. */
    height: 100dvh; /* Element height; the later 100dvh declaration follows the dynamic viewport height. */
    max-width: 100%; /* Upper width limit. */
    max-height: 100%; /* Upper height limit. */
    padding: 28px 30px; /* Inner spacing; shorthand order is top/right/bottom/left (two values mean vertical/horizontal). */
    background: #191d18; /* Set a background colour, transparency or gradient. */
    color: var(--text); /* Set foreground text colour; currentColor elsewhere reuses it. */
    border: 0; /* Border shorthand: thickness, line style and colour; zero removes it. */
    border-left: 1px solid #495041; /* Set the left border; eight-digit hex colours include alpha transparency. */
    overflow-y: auto; /* Control vertical overflow; auto provides scrolling when needed. */
    overscroll-behavior: contain; /* Keep scroll chaining from continuing into the surrounding page. */
}

/* ----------------------------------------------------------------------
   Dim the page behind the modal drawer.
   ---------------------------------------------------------------------- */
#main-menu-drawer::backdrop {
    background: rgb(0 0 0 / .48); /* Set a background colour, transparency or gradient. */
}

/* ----------------------------------------------------------------------
   Drawer title and close button on one row.
   ---------------------------------------------------------------------- */
.drawer-top {
    display: flex; /* Choose the layout mode or hide the element when set to none. */
    align-items: center; /* Align children on the cross axis in flex layout or within grid areas. */
    justify-content: space-between; /* Distribute or align children along the main flex axis or the grid content axis. */
    gap: 16px; /* Space between flex/grid items. */
    margin-bottom: 28px; /* Outer spacing on the bottom side(s); inline follows writing direction and block follows document flow. */
}

/* ----------------------------------------------------------------------
   Drawer title styling.
   ---------------------------------------------------------------------- */
.drawer-top h2 {
    font-size: 12px; /* Text size; clamp(min, preferred, max) bounds responsive sizing. */
    letter-spacing: 1.8px; /* Spacing between characters; negative values tighten it. */
    text-transform: uppercase; /* Change the visual letter case without editing the HTML text. */
    font-weight: 400; /* Text weight; 400 is normal and bold is heavier. */
    margin: 0; /* Outer spacing; shorthand order is top/right/bottom/left (two values mean vertical/horizontal). */
    color: var(--accent); /* Set foreground text colour; currentColor elsewhere reuses it. */
}

/* ----------------------------------------------------------------------
   Compact close-button overrides.
   ---------------------------------------------------------------------- */
.drawer-close {
    font-size: 13px; /* Text size; clamp(min, preferred, max) bounds responsive sizing. */
    padding: 9px 14px; /* Inner spacing; shorthand order is top/right/bottom/left (two values mean vertical/horizontal). */
}

/* ----------------------------------------------------------------------
   Size the close symbol.
   ---------------------------------------------------------------------- */
.drawer-close span {
    font-size: 22px; /* Text size; clamp(min, preferred, max) bounds responsive sizing. */
    line-height: 1; /* Line spacing; a unitless value multiplies the font size. */
}

/* ----------------------------------------------------------------------
   Vertical list of main navigation links inside the drawer.
   ---------------------------------------------------------------------- */
#main-menu-drawer nav {
    display: flex; /* Choose the layout mode or hide the element when set to none. */
    flex-direction: column; /* Choose horizontal or vertical ordering of flex children. */
    gap: 0; /* Space between flex/grid items. */
    font-size: 21px; /* Text size; clamp(min, preferred, max) bounds responsive sizing. */
}

/* ----------------------------------------------------------------------
   Drawer links with generous target height and separating lines.
   ---------------------------------------------------------------------- */
#main-menu-drawer nav a {
    display: block; /* Choose the layout mode or hide the element when set to none. */
    padding: 17px 0; /* Inner spacing; shorthand order is top/right/bottom/left (two values mean vertical/horizontal). */
    border-bottom: 1px solid #ffffff25; /* Set the bottom border; eight-digit hex colours include alpha transparency. */
    min-height: 56px; /* Lower height limit; useful for touch targets and placeholder sizing. */
}

/* ----------------------------------------------------------------------
   Highlight the current page in the drawer.
   ---------------------------------------------------------------------- */
#main-menu-drawer nav a[aria-current=page] {
    color: var(--accent); /* Set foreground text colour; currentColor elsewhere reuses it. */
}

/* ----------------------------------------------------------------------
   Supporting link subtitles, with wrapping for long words.
   ---------------------------------------------------------------------- */
#main-menu-drawer nav small {
    font-size: 12px; /* Text size; clamp(min, preferred, max) bounds responsive sizing. */
    display: block; /* Choose the layout mode or hide the element when set to none. */
    color: var(--muted); /* Set foreground text colour; currentColor elsewhere reuses it. */
    margin-top: 6px; /* Outer spacing on the top side(s); inline follows writing direction and block follows document flow. */
}

/* ----------------------------------------------------------------------
   Contact link below the drawer navigation.
   ---------------------------------------------------------------------- */
.drawer-contact {
    display: inline-block; /* Choose the layout mode or hide the element when set to none. */
    margin-top: 30px; /* Outer spacing on the top side(s); inline follows writing direction and block follows document flow. */
    font-size: 14px; /* Text size; clamp(min, preferred, max) bounds responsive sizing. */
    border-bottom: 1px solid #7e876f; /* Set the bottom border; eight-digit hex colours include alpha transparency. */
    padding-bottom: 8px; /* Inner spacing on the bottom side(s); inline follows writing direction and block follows document flow. */
}

/* ----------------------------------------------------------------------
   Gap before the contact arrow.
   ---------------------------------------------------------------------- */
.drawer-contact span {
    margin-left: 25px; /* Outer spacing on the left side(s); inline follows writing direction and block follows document flow. */
}

/* ----------------------------------------------------------------------
   Prevent background-page scrolling while JavaScript marks the drawer as open.
   ---------------------------------------------------------------------- */
body.menu-is-open {
    overflow: hidden; /* Clip or hide overflowing content, or suppress scrolling when applied to the body. */
}

/* ======================================================================
   MOBILE/TABLET: apply these overrides at viewport widths of 760px or below.
   ====================================================================== */
@media(max-width:760px) {

    /* ----------------------------------------------------------------------
       Right-edge modal drawer: bounded width, full viewport height and independent vertical scrolling.
       ---------------------------------------------------------------------- */
    #main-menu-drawer {
        width: min(350px,calc(100% - 24px)); /* Element width; min(...) selects the smaller value and calc(...) performs a calculation. */
        padding: 22px; /* Inner spacing; shorthand order is top/right/bottom/left (two values mean vertical/horizontal). */
    }

    /* ----------------------------------------------------------------------
       Responsive menu-button sizing or visibility.
       ---------------------------------------------------------------------- */
    .main-menu-toggle {
        padding: 10px 14px; /* Inner spacing; shorthand order is top/right/bottom/left (two values mean vertical/horizontal). */
        font-size: 13px; /* Text size; clamp(min, preferred, max) bounds responsive sizing. */
    }

    /* ----------------------------------------------------------------------
       Drawer title and close button on one row.
       ---------------------------------------------------------------------- */
    .drawer-top {
        margin-bottom: 18px; /* Outer spacing on the bottom side(s); inline follows writing direction and block follows document flow. */
    }
}

/* ======================================================================
   FORCED COLOURS: use operating-system colours for high-contrast display modes.
   ====================================================================== */
@media(forced-colors:active) {

    /* ----------------------------------------------------------------------
       Component-specific override for .main-menu-toggle,.drawer-close,#main-menu-drawer.
       ---------------------------------------------------------------------- */
    .main-menu-toggle,.drawer-close,#main-menu-drawer {
        border: 1px solid ButtonText; /* Border shorthand: thickness, line style and colour; zero removes it. */
    }
}

/* ----------------------------------------------------------------------
   Desktop navigation visibility, spacing and alignment.
   ---------------------------------------------------------------------- */
.desktop-main-nav {
    display: none; /* Choose the layout mode or hide the element when set to none. */
}

/* ======================================================================
   DESKTOP NAVIGATION: apply these overrides at 1200px and above; later subtitle rules refine the earlier settings.
   ====================================================================== */
@media(min-width:1200px) {

    /* ----------------------------------------------------------------------
       Page header layout, spacing and bottom divider.
       ---------------------------------------------------------------------- */
    header {
        gap: 28px; /* Space between flex/grid items. */
        padding-inline: 4%; /* Inner spacing on the inline side(s); inline follows writing direction and block follows document flow. */
        height: 91px; /* Element height; the later 100dvh declaration follows the dynamic viewport height. */
    }

    /* ----------------------------------------------------------------------
       Desktop navigation visibility, spacing and alignment.
       ---------------------------------------------------------------------- */
    .desktop-main-nav {
        display: flex; /* Choose the layout mode or hide the element when set to none. */
        align-items: center; /* Align children on the cross axis in flex layout or within grid areas. */
        gap: clamp(14px,1.65vw,30px); /* Space between flex/grid items. */
        font-size: 13px; /* Text size; clamp(min, preferred, max) bounds responsive sizing. */
        white-space: nowrap; /* Prevent wrapping when set to nowrap. */
    }

    /* ----------------------------------------------------------------------
       Desktop link alignment and minimum clickable height.
       ---------------------------------------------------------------------- */
    .desktop-main-nav a {
        display: inline-flex; /* Choose the layout mode or hide the element when set to none. */
        align-items: center; /* Align children on the cross axis in flex layout or within grid areas. */
        min-height: 44px; /* Lower height limit; useful for touch targets and placeholder sizing. */
    }

    /* ----------------------------------------------------------------------
       Accent the current page in the desktop navigation.
       ---------------------------------------------------------------------- */
    .desktop-main-nav a[aria-current=page] {
        color: var(--accent); /* Set foreground text colour; currentColor elsewhere reuses it. */
    }

    /* ----------------------------------------------------------------------
       Rounded Say hello link and alignment.
       ---------------------------------------------------------------------- */
    .desktop-main-nav .desktop-hello {
        border: 1px solid #67705c; /* Border shorthand: thickness, line style and colour; zero removes it. */
        border-radius: 28px; /* Corner rounding; 50% makes a circle when width equals height. */
        padding: 10px 17px; /* Inner spacing; shorthand order is top/right/bottom/left (two values mean vertical/horizontal). */
    }

    /* ----------------------------------------------------------------------
       Responsive menu-button sizing or visibility.
       ---------------------------------------------------------------------- */
    .main-menu-toggle {
        display: none; /* Choose the layout mode or hide the element when set to none. */
    }
}

/* ======================================================================
   PRINT: adapt colours and layout for printing.
   ====================================================================== */
@media print {

    /* ----------------------------------------------------------------------
       Component-specific override for .desktop-main-nav,.main-menu-toggle,#main-menu-drawer.
       ---------------------------------------------------------------------- */
    .desktop-main-nav,.main-menu-toggle,#main-menu-drawer {
        display: none!important; /* Choose the layout mode or hide the element when set to none. */
    }
}

/* ======================================================================
   DESKTOP NAVIGATION: apply these overrides at 1200px and above; later subtitle rules refine the earlier settings.
   ====================================================================== */
@media(min-width:1200px) {

    /* ----------------------------------------------------------------------
       Desktop navigation visibility, spacing and alignment.
       ---------------------------------------------------------------------- */
    .desktop-main-nav {
        gap: clamp(12px,1.3vw,24px); /* Space between flex/grid items. */
    }

    /* ----------------------------------------------------------------------
       Desktop link alignment and minimum clickable height.
       ---------------------------------------------------------------------- */
    .desktop-main-nav a {
        flex-direction: column; /* Choose horizontal or vertical ordering of flex children. */
        align-items: flex-start; /* Align children on the cross axis in flex layout or within grid areas. */
        justify-content: center; /* Distribute or align children along the main flex axis or the grid content axis. */
    }

    /* ----------------------------------------------------------------------
       Place parenthetical navigation subtitles below their main labels.
       ---------------------------------------------------------------------- */
    .desktop-main-nav small {
        display: block; /* Choose the layout mode or hide the element when set to none. */
        font-size: 11px; /* Text size; clamp(min, preferred, max) bounds responsive sizing. */
        color: var(--muted); /* Set foreground text colour; currentColor elsewhere reuses it. */
        margin-top: 4px; /* Outer spacing on the top side(s); inline follows writing direction and block follows document flow. */
    }

    /* ----------------------------------------------------------------------
       Rounded Say hello link and alignment.
       ---------------------------------------------------------------------- */
    .desktop-main-nav .desktop-hello {
        align-items: center; /* Align children on the cross axis in flex layout or within grid areas. */
    }
}

/* ----------------------------------------------------------------------
   Supporting link subtitles, with wrapping for long words.
   ---------------------------------------------------------------------- */
#main-menu-drawer nav small {
    overflow-wrap: anywhere; /* Permit long text to break rather than overflow its container. */
}

/* ----------------------------------------------------------------------
   Document-level scrolling and browser text-sizing settings.
   ---------------------------------------------------------------------- */
html {
    -webkit-text-size-adjust: 100%; /* Keep the browser text-size adjustment at the specified percentage; does not disable user zoom. */
}

/* ----------------------------------------------------------------------
   Remove the outline from the programmatically focused skip-link destination, not from interactive controls.
   ---------------------------------------------------------------------- */
main:focus {
    outline: none; /* Focus-ring styling that does not change layout dimensions. */
}

/* ----------------------------------------------------------------------
   Allow grid children to shrink so long content does not force horizontal overflow.
   ---------------------------------------------------------------------- */
.acc-content > *, .intro > * {
    min-width: 0; /* Lower width limit; zero allows grid/flex content to shrink. */
}

/* ----------------------------------------------------------------------
   Accordion content width, padding, centring and word wrapping.
   ---------------------------------------------------------------------- */
.acc-content {
    overflow-wrap: anywhere; /* Permit long text to break rather than overflow its container. */
}

/* ----------------------------------------------------------------------
   Small section number with evenly sized numeric characters.
   ---------------------------------------------------------------------- */
.acc-num {
    flex-shrink: 0; /* Control shrinking; zero preserves the item width. */
}

/* ----------------------------------------------------------------------
   Offset text-decoration underlines when they are displayed.
   ---------------------------------------------------------------------- */
.textlink, .closing a, footer a {
    text-underline-offset: .25em; /* Distance between text and its underline. */
}

/* ----------------------------------------------------------------------
   Show a text underline on hover.
   ---------------------------------------------------------------------- */
.textlink:hover, .closing a:hover, footer a:hover {
    text-decoration: underline; /* Underline behaviour; none removes text-decoration underlines. */
}

/* ======================================================================
   VERY NARROW SCREENS: allow the header to wrap and reduce the heading size.
   ====================================================================== */
@media (max-width: 380px) {

    /* ----------------------------------------------------------------------
       Page header layout, spacing and bottom divider.
       ---------------------------------------------------------------------- */
    header {
        height: auto; /* Element height; the later 100dvh declaration follows the dynamic viewport height. */
        min-height: 78px; /* Lower height limit; useful for touch targets and placeholder sizing. */
        flex-wrap: wrap; /* Allow flex children to wrap onto additional rows. */
        gap: 16px; /* Space between flex/grid items. */
        padding-block: 16px; /* Inner spacing on the block side(s); inline follows writing direction and block follows document flow. */
    }

    /* ----------------------------------------------------------------------
       Main heading typography, including a fluid font size bounded by minimum and maximum values.
       ---------------------------------------------------------------------- */
    .intro h1 {
        font-size: clamp(36px, 12vw, 48px); /* Text size; clamp(min, preferred, max) bounds responsive sizing. */
    }
}

/* ======================================================================
   FORCED COLOURS: use operating-system colours for high-contrast display modes.
   ====================================================================== */
@media (forced-colors: active) {

    /* ----------------------------------------------------------------------
       Use a system colour for icon strokes in forced-colour mode.
       ---------------------------------------------------------------------- */
    .acc-icon::before, .acc-icon::after {
        background: ButtonText; /* Set a background colour, transparency or gradient. */
    }

    /* ----------------------------------------------------------------------
       Use system-colour borders in forced-colour mode.
       ---------------------------------------------------------------------- */
    .image-placeholder, .video-placeholder {
        border-color: CanvasText; /* Set the color border; eight-digit hex colours include alpha transparency. */
    }
}

/* ======================================================================
   PRINT: adapt colours and layout for printing.
   ====================================================================== */
@media print {

    /* ----------------------------------------------------------------------
       Shared colour palette and browser colour scheme. Custom properties are reused through var(...).
       ---------------------------------------------------------------------- */
    :root {
        color-scheme: light; /* Tell browser-supplied controls which colour scheme this page supports. */
        --bg: white; /* Reusable page background colour. */
        --text: black; /* Reusable main text colour. */
        --muted: #333; /* Reusable secondary text colour. */
        --accent: #333; /* Reusable accent/highlight colour. */
    }

    /* ----------------------------------------------------------------------
       Component-specific override for header nav, .skip, .video-placeholder, .image-placeholder, .acc-icon, .closing, footer div.
       ---------------------------------------------------------------------- */
    header nav, .skip, .video-placeholder, .image-placeholder, .acc-icon, .closing, footer div {
        display: none; /* Choose the layout mode or hide the element when set to none. */
    }

    /* ----------------------------------------------------------------------
       Individual accordion section; native details controls its open state.
       ---------------------------------------------------------------------- */
    .accordion details {
        width: 100%; /* Element width; min(...) selects the smaller value and calc(...) performs a calculation. */
        max-width: none; /* Upper width limit. */
        break-inside: avoid; /* Discourage a printed page break inside this element. */
    }

    /* ----------------------------------------------------------------------
       Request visible disclosure content in print where this pseudo-element is supported; JavaScript also opens panels for printing.
       ---------------------------------------------------------------------- */
    .accordion details::details-content {
        display: block; /* Choose the layout mode or hide the element when set to none. */
        content-visibility: visible; /* Request rendering of the element content. */
    }

    /* ----------------------------------------------------------------------
       Desktop image/text grid; all seven current sections use this class.
       ---------------------------------------------------------------------- */
    .acc-content.has-art {
        display: block; /* Choose the layout mode or hide the element when set to none. */
    }
}

/* ----------------------------------------------------------------------
   Visible navigation fallback inside noscript when JavaScript is disabled.
   ---------------------------------------------------------------------- */
.no-script-nav {
    padding: 18px 5%; /* Inner spacing; shorthand order is top/right/bottom/left (two values mean vertical/horizontal). */
    display: flex; /* Choose the layout mode or hide the element when set to none. */
    flex-wrap: wrap; /* Allow flex children to wrap onto additional rows. */
    gap: 18px; /* Space between flex/grid items. */
    border-bottom: 1px solid #ffffff30; /* Set the bottom border; eight-digit hex colours include alpha transparency. */
    font-size: 14px; /* Text size; clamp(min, preferred, max) bounds responsive sizing. */
}

/* ----------------------------------------------------------------------
   Underline links in the no-JavaScript navigation fallback.
   ---------------------------------------------------------------------- */
.no-script-nav a {
    text-decoration: underline; /* Underline behaviour; none removes text-decoration underlines. */
}


/* ======================================================================
   REAL ACCORDION IMAGES
   Replace placeholder artwork with responsive image elements.
   Existing grid rules keep images left of text on desktop.
   ====================================================================== */

.accordion-image {
    display: block; /* Remove the inline-image baseline gap. */
    width: 100%; /* Fill the available image column. */
    max-width: 100%; /* Keep the image within its container. */
    height: auto; /* Preserve the source image proportions without cropping. */
    min-width: 0; /* Allow the image to shrink inside the grid. */
}

/* ----------------------------------------------------------------------
   MOBILE: images stack above their accompanying text.
   ---------------------------------------------------------------------- */

@media (max-width: 760px) {
    .accordion-image {
        margin-bottom: 25px; /* Separate the image from the text below. */
    }
}

/* ----------------------------------------------------------------------
   PRINT: space consecutive section images and text clearly.
   ---------------------------------------------------------------------- */

@media print {
    .accordion-image {
        margin-bottom: 16px;
    }
}