/* ==========================================================================
   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;
    }
}


/* ======================================================================
   PHOTOGRAPHY PAGE — editorial introduction and a wide Instagram gallery.
   Shared homepage styles above retain the agreed header, drawer and footer.
   ====================================================================== */
.photo-breadcrumb { display: block; margin-top: 28px; font-size: 13px; }
.photo-breadcrumb ol { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; color: var(--muted); }
.photo-breadcrumb li + li::before { content: '/'; padding-right: 10px; }
.photo-breadcrumb a { text-decoration: underline; text-underline-offset: 4px; }
.photo-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: end; padding: 56px 0 52px; }
.photo-intro > * { min-width: 0; }
.photo-intro h1 { margin: 0; font-size: clamp(42px, 5.5vw, 76px); font-weight: 400; line-height: 1.05; letter-spacing: -3px; }
.photo-intro h1 em { font-family: Georgia, serif; color: var(--accent); font-weight: 400; }
.photo-intro-copy { max-width: 520px; justify-self: end; }
.photo-intro-copy p { color: var(--muted); font-size: 17px; line-height: 1.75; margin: 0 0 24px; }
.photo-instagram { display: inline-block; padding: 12px 0; border-bottom: 1px solid #7e876f; font-size: 14px; line-height: 1.6; }
.photo-instagram span { margin-left: 16px; }
.gallery-heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; border-top: 1px solid #ffffff30; padding: 22px 0; }
.gallery-heading h2 { font-size: 13px; text-transform: uppercase; letter-spacing: 2px; font-weight: 400; margin: 0; }
.gallery-heading > span { font-size: 12px; color: var(--muted); }
/* LightWidget's script sets the final iframe height. Avoid a min-height that would leave empty space beneath short feeds. */
.photo-feed { display: block; width: 100%; height: 850px; border: 0; background: transparent; }
.photo-feed:focus-visible { outline: 3px solid var(--accent); outline-offset: 5px; }
.photo-fallback { font-size: 13px; line-height: 1.7; color: var(--muted); margin: 22px 0 0; }
.photo-fallback a, .photo-gallery noscript a { text-decoration: underline; text-underline-offset: 4px; }
.photo-closing { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; padding: 44px 0; margin-top: 40px; border-top: 1px solid #ffffff30; }
.photo-closing h2 { margin: 0; font: 30px/1.3 Georgia, serif; }
@media (max-width: 760px) {
  .photo-breadcrumb { margin-top: 22px; }
  .photo-intro { grid-template-columns: 1fr; gap: 28px; padding: 36px 0; }
  .photo-intro h1 { letter-spacing: -1.5px; }
  .photo-intro-copy { max-width: none; justify-self: stretch; }
  .photo-intro-copy p { font-size: 16px; }
  .photo-closing { align-items: start; flex-direction: column; }
}
@media print {
  .photo-feed { display: none; }
  .photo-intro { display: block; }
  .photo-intro-copy { margin-top: 24px; }
}


/* ======================================================================
   SHARED NAVIGATION STATE AND TEMPLATE CONTENT
   JavaScript sets aria-current from the canonical page URL.
   ====================================================================== */
.site-section-current { color: var(--accent); }
.template-content { padding-block: 48px; }


/* ======================================================================
   ESSAYS PAGE — scoped rules; existing homepage and photography styles
   above are preserved unchanged. No new JavaScript is needed.
   ====================================================================== */

.essays-breadcrumb { display: block; margin-top: 28px; font-size: 13px; }
.essays-breadcrumb ol { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; color: var(--muted); }
.essays-breadcrumb li + li::before { content: '/'; padding-right: 10px; }
.essays-breadcrumb a { text-decoration: underline; text-underline-offset: 4px; }

/* Intro: heading left, short description right; stack on narrow screens. */
.essays-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: end; padding: 56px 0 52px; }
.essays-intro > * { min-width: 0; }
.essays-intro h1 { margin: 0; font-size: clamp(44px, 5.5vw, 76px); font-weight: 400; line-height: 1.05; letter-spacing: -3px; }
.essays-intro h1 em { font-family: Georgia, serif; color: var(--accent); font-weight: 400; }
.essays-intro-copy { max-width: 520px; justify-self: end; }
.essays-intro-copy p { font-size: 17px; line-height: 1.75; color: var(--muted); margin: 0 0 20px; }
.essays-intro-copy .essays-availability { font-size: 13px; margin-bottom: 0; }

/* Two-column catalogue with book images beside each entry. */
.essays-collection { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 56px; }
.essay-entry { display: grid; grid-template-columns: 120px minmax(0,1fr); gap: 18px; padding: 34px 0 38px; border-top: 1px solid #ffffff30; scroll-margin-top: 20px; }
/* Preserve the complete square image without cropping or stretching. */
.essay-cover { display: block; width: 100%; max-width: 148px; height: auto; object-fit: contain; }
.essay-copy { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.essay-topic { margin: 0 0 15px; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--accent); line-height: 1.6; }
.essay-copy h2 { font: 400 32px/1.2 Georgia,serif; margin: 0 0 18px; overflow-wrap: anywhere; }
.essay-copy > p:not(.essay-topic) { font-size: 15px; line-height: 1.75; color: var(--muted); margin: 0 0 24px; }
.essay-link { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 16px; min-height: 44px; padding: 10px 0; margin-top: auto; font-size: 14px; border-bottom: 1px solid #7e876f; }
.essay-link:hover { color: var(--accent); }
/* Visually hidden context makes repeated Amazon link names distinct for screen readers. */
.essay-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.essays-closing { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px; padding: 44px 0; margin-top: 20px; border-top: 1px solid #ffffff30; }
.essays-closing h2 { margin: 0; font: 30px/1.3 Georgia,serif; }

@media (max-width: 760px) {
    .essays-intro { grid-template-columns: 1fr; gap: 28px; padding: 36px 0; }
    .essays-intro h1 { letter-spacing: -1.5px; }
    .essays-intro-copy { justify-self: stretch; max-width: none; }
    .essays-intro-copy p { font-size: 16px; }
    .essays-collection { grid-template-columns: 1fr; }
    .essay-entry { grid-template-columns: 100px minmax(0,1fr); gap: 12px; padding-block: 28px; }
    .essay-copy h2 { font-size: 28px; }
    .essays-closing { flex-direction: column; align-items: flex-start; }
}

@media print {
    .essays-intro { display: block; }
    .essays-intro-copy { margin-top: 24px; }
    .essays-collection { display: block; }
    .essay-entry { break-inside: avoid; }
}

/* Small phones: give long book titles the full available width. */
@media (max-width: 420px) {
    .essay-entry { grid-template-columns: 1fr; gap: 20px; }
    .essay-cover { width: 148px; max-width: 100%; }
}

/* ======================================================================
   SCI SECTION — shared with the homepage, essays and photography stylesheet.
   These class names keep section-specific styling separate from other pages.
   ====================================================================== */

/* The left menu button sits in a small section bar, outside the page content. */
.sci-menu-bar { display:flex; align-items:center; gap:24px; padding:14px 5%; border-bottom:1px solid #ffffff20; color:var(--muted); font-size:12px; }
.sci-menu-toggle, .sci-menu-close { font:inherit; color:var(--text); background:transparent; border:1px solid #7e876f; padding:11px 16px; cursor:pointer; min-height:44px; }
.sci-menu-toggle { display:inline-flex; align-items:center; gap:12px; }
.sci-menu-toggle[hidden] { display:none; }
.sci-menu-toggle:hover, .sci-menu-close:hover { border-color:var(--accent); color:var(--accent); }
.sci-menu-toggle:focus-visible, .sci-menu-close:focus-visible, .sci-main a:focus-visible, #sci-menu a:focus-visible, .sci-no-js summary:focus-visible { outline:3px solid var(--accent); outline-offset:4px; }

/* Native dialog supplies modal focus containment and Escape-to-close.
   Its own scrolling leaves the underlying content in its original position. */
#sci-menu { position:fixed; inset:0 auto 0 0; margin:0; width:min(380px,calc(100% - 24px)); max-width:none; height:100%; height:100dvh; max-height:none; box-sizing:border-box; overflow-y:auto; overscroll-behavior:contain; padding:24px; color:var(--text); background:var(--bg); border:0; border-right:1px solid #ffffff30; }
#sci-menu::backdrop { background:#0008; }
.sci-menu-top { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:24px; }
.sci-menu-top h2 { margin:0; font:26px/1.2 Georgia,serif; }
.sci-section-nav { display:block; font-size:15px; }
.sci-section-nav ul { list-style:none; padding:0; margin:0; }
.sci-section-nav h3 { margin:25px 0 12px; color:var(--accent); font-size:12px; letter-spacing:1px; font-weight:400; text-transform:uppercase; }
.sci-section-nav a { display:block; padding:12px 8px; min-height:44px; box-sizing:border-box; line-height:1.5; border-bottom:1px solid #ffffff18; overflow-wrap:anywhere; }
.sci-section-nav a:hover { color:var(--accent); }
.sci-section-nav a[aria-current="page"] { color:var(--accent); background:#ffffff09; border-left:3px solid var(--accent); padding-left:13px; }
.sci-nav-note { color:var(--muted); font-size:12px; line-height:1.7; }
.sci-no-js { margin:20px 5%; }
.sci-no-js summary { cursor:pointer; padding:12px; }

/* Intro and archive use the same restrained type, sage accent and dividers. */
.sci-main { padding-bottom:44px; }
.sci-breadcrumb { display:block; margin:28px 0; font-size:12px; color:var(--muted); }
.sci-breadcrumb ol { display:flex; flex-wrap:wrap; gap:10px; list-style:none; padding:0; margin:0; }
.sci-breadcrumb li + li::before { content:'/'; margin-right:10px; }
.sci-breadcrumb a, .sci-prose a, .sci-story a, .sci-watch-link a { text-decoration:underline; text-underline-offset:4px; }
.sci-intro { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; padding:28px 0 56px; }
.sci-intro > *, .sci-archive-columns > * { min-width:0; }
.sci-eyebrow { color:var(--accent); text-transform:uppercase; font-size:11px; letter-spacing:1.7px; line-height:1.7; margin:0 0 20px; }
.sci-intro h1, .sci-camp h1 { font-size:clamp(40px,5vw,70px); font-weight:400; line-height:1.08; letter-spacing:-2px; margin:0 0 25px; }
.sci-intro h1 em { font-family:Georgia,serif; font-weight:400; color:var(--accent); }
.sci-lead { color:var(--muted); font-size:17px; line-height:1.8; }
.sci-text-link { display:inline-block; padding:12px 0; border-bottom:1px solid #7e876f; font-size:14px; }
.sci-hero-image { display:block; width:100%; height:auto; border:1px solid #ffffff20; }
.sci-story { display:grid; grid-template-columns:1fr 1.5fr; gap:64px; border-top:1px solid #ffffff30; padding:40px 0; }
.sci-story h2, .sci-archive h2 { font:400 32px/1.25 Georgia,serif; margin:0 0 26px; }
.sci-story p, .sci-prose p { margin:0 0 22px; font-size:16px; line-height:1.8; color:var(--muted); }
.sci-archive { border-top:1px solid #ffffff30; padding:42px 0; scroll-margin-top:20px; }
.sci-archive-columns { display:grid; grid-template-columns:1fr 1.5fr; gap:64px; }
.sci-archive h3 { font-weight:400; color:var(--accent); font-size:15px; margin:8px 0 18px; }
.sci-archive ul { padding:0; margin:0; list-style:none; }
.sci-archive li a { display:block; padding:14px 0; border-top:1px solid #ffffff20; line-height:1.6; font-size:14px; }
.sci-year-grid { display:grid; grid-template-columns:1fr 1fr; column-gap:24px; }
.sci-muted, .sci-watch-link { color:var(--muted); font-size:13px; line-height:1.7; }

/* Keep the original films' aspect ratios, including older 4:3 recordings. */
.sci-camp { padding:24px 0 40px; }
.sci-video { width:100%; max-width:960px; margin:32px auto 14px; aspect-ratio:var(--sci-video-ratio,16 / 9); background:#080a08; }
.sci-video iframe { display:block; width:100%; height:100%; border:0; }
.sci-video iframe:focus-visible { outline:3px solid var(--accent); outline-offset:4px; }
.sci-prose { max-width:760px; margin-top:30px; }
.sci-pagination { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px; padding:28px 0; border-top:1px solid #ffffff30; font-size:14px; }
.sci-pagination a { padding:10px 0; }

@media (max-width:760px) {
 .sci-menu-bar { gap:14px; }
 .sci-menu-bar > span { font-size:11px; }
 .sci-intro, .sci-story, .sci-archive-columns { grid-template-columns:1fr; gap:28px; }
 .sci-intro { padding:12px 0 36px; }
 .sci-intro h1, .sci-camp h1 { letter-spacing:-1px; }
 .sci-year-grid { column-gap:18px; }
 .sci-archive li a { font-size:13px; }
 .sci-camp { padding-top:12px; }
 .sci-pagination { align-items:flex-start; flex-direction:column; gap:6px; }
}
@media print {
 .sci-menu-bar, #sci-menu, .sci-no-js { display:none !important; }
 .sci-intro, .sci-story, .sci-archive-columns { display:block; }
 .sci-hero-image { max-width:50%; margin:24px 0; }
 .sci-video { display:none; }
 .sci-watch-link { display:block; }
 .sci-watch-link a::after { content:' (' attr(href) ')'; }
}

/* ======================================================================
   POETRY & STORIES — shared site extension. Earlier site/SCI rules retained.
   The type, spacing and restrained dividers unify the varied artwork.
   ====================================================================== */

/* A left-hand section menu with two collapsible collection indexes. */
.section-menu-bar { padding:14px 5%; border-bottom:1px solid #ffffff20; }
.section-menu-toggle, .section-menu-close { font:inherit; font-size:13px; background:transparent; border:1px solid #7e876f; color:var(--text); padding:11px 16px; min-height:44px; cursor:pointer; }
.section-menu-toggle { display:inline-flex; gap:12px; align-items:center; }
.section-menu-toggle[hidden] { display:none; }
.section-menu-toggle:hover, .section-menu-close:hover { color:var(--accent); border-color:var(--accent); }
.section-menu { position:fixed; inset:0 auto 0 0; margin:0; width:min(390px,calc(100% - 24px)); max-width:none; height:100%; height:100dvh; max-height:none; box-sizing:border-box; overflow-y:auto; overscroll-behavior:contain; padding:24px; border:0; border-right:1px solid #ffffff30; background:var(--bg); color:var(--text); }
.section-menu::backdrop { background:#0008; }
.section-menu-top { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:24px; }
.section-menu-top h2 { margin:0; font:26px/1.2 Georgia,serif; }
.section-menu-nav { display:block; font-size:15px; }
.section-menu-nav ul { list-style:none; margin:0; padding:0; }
.section-menu-nav a { display:block; padding:12px 8px; min-height:44px; line-height:1.6; border-bottom:1px solid #ffffff18; }
.section-menu-nav a[aria-current="page"] { border-left:3px solid var(--accent); padding-left:13px; color:var(--accent); background:#ffffff09; }
.section-menu-nav details { margin-top:18px; }
.section-menu-nav summary { cursor:pointer; padding:14px 0; font-size:17px; color:var(--accent); }
.section-menu-nav h3 { font-size:12px; font-weight:400; letter-spacing:1px; text-transform:uppercase; color:var(--muted); margin:24px 8px 10px; }
.section-menu-fallback { margin:20px 5%; }
.section-menu-fallback summary { padding:12px; cursor:pointer; }
.section-menu button:focus-visible, .section-menu a:focus-visible, .section-menu summary:focus-visible, .section-menu-toggle:focus-visible, .poetry-main a:focus-visible, .poetry-table-scroll:focus-visible { outline:3px solid var(--accent); outline-offset:4px; }

/* Shared page introductions and breadcrumbs. */
.poetry-main { padding-bottom:48px; }
.poetry-breadcrumb { display:block; margin:28px 0; font-size:12px; line-height:1.7; color:var(--muted); }
.poetry-breadcrumb ol { display:flex; flex-wrap:wrap; list-style:none; margin:0; padding:0; gap:10px; }
.poetry-breadcrumb li + li::before { content:'/'; margin-right:10px; }
.poetry-breadcrumb a { text-decoration:underline; text-underline-offset:4px; }
.poetry-kicker { margin:0 0 22px; font-size:11px; text-transform:uppercase; letter-spacing:1.8px; color:var(--accent); line-height:1.7; }
.poetry-intro { padding:30px 0 48px; max-width:800px; }
.poetry-intro h1, .poetry-collection-intro h1 { font-size:clamp(42px,5.4vw,76px); font-weight:400; line-height:1.08; letter-spacing:-2px; margin:0 0 28px; }
.poetry-intro h1 em, .poetry-collection-intro h1 em { font-family:Georgia,serif; font-weight:400; color:var(--accent); }
.poetry-intro-text, .poetry-collection-intro > div > p:not(.poetry-kicker) { font-size:17px; line-height:1.8; color:var(--muted); max-width:660px; }
.poetry-text-link { display:inline-block; border-bottom:1px solid #7e876f; padding:12px 0; font-size:14px; line-height:1.6; }

/* Main landing page: two substantial collection entrances, using poem artwork. */
.poetry-collections { display:grid; grid-template-columns:1fr 1fr; gap:48px; padding-bottom:28px; }
.poetry-collection-card { border-top:1px solid #ffffff30; padding-top:26px; min-width:0; }
.poetry-collection-card img { display:block; width:100%; height:auto; aspect-ratio:3 / 2; object-fit:contain; background:#161916; }
.poetry-collection-card > div { padding:28px 0; }
.poetry-collection-card h2 { margin:0 0 20px; font:38px/1.2 Georgia,serif; }
.poetry-collection-card p:not(.poetry-kicker) { font-size:16px; line-height:1.8; color:var(--muted); }
.poetry-collection-intro { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:56px; padding:30px 0 52px; }
.poetry-collection-intro > * { min-width:0; }
.poetry-collection-intro > img { width:100%; height:auto; display:block; }
.poetry-catalogue { border-top:1px solid #ffffff30; padding:40px 0 0; scroll-margin-top:24px; }
.poetry-catalogue h2 { margin:0 0 24px; font:32px/1.3 Georgia,serif; }
.poetry-index { display:grid; grid-template-columns:1fr 1fr; column-gap:48px; padding:0; margin:0 0 46px; list-style:none; }
.poetry-index li { min-width:0; border-top:1px solid #ffffff20; }
.poetry-index a { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:19px 0; font:22px/1.35 Georgia,serif; min-height:70px; }
.poetry-index small { flex-shrink:0; font:11px/1.5 Arial,sans-serif; color:var(--muted); }

/* Poems: live HTML text is visually primary; artwork stays in its own column.
   Explicit <br> breaks and stanza paragraphs are retained from the originals.
   Normal soft wrapping prevents long lines from causing mobile overflow. */
.poem-heading { padding:30px 0 36px; border-bottom:1px solid #ffffff30; margin-bottom:36px; }
.poem-heading h1 { margin:0 0 20px; font:400 clamp(36px,4.5vw,62px)/1.12 Georgia,serif; letter-spacing:-1px; overflow-wrap:anywhere; }
.poem-byline { font-size:13px; color:var(--muted); margin:0; }
.poem-layout { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); grid-template-areas:'text art'; gap:64px; align-items:start; }
.poem-text { grid-area:text; min-width:0; font:19px/1.85 Georgia,'Times New Roman',serif; overflow-wrap:break-word; }
.poem-text p { margin:0 0 1.7em; }
.poem-text h2 { font:26px/1.3 Georgia,serif; margin:2em 0 1em; color:var(--accent); }
.poem-text blockquote { margin:0 0 1.7em 1.4em; }
.poem-text .poem-indent { margin-left:1.5em; }
.poem-text hr { margin:2em 0; border:0; border-top:1px solid #ffffff30; }
.poem-text a { text-decoration:underline; text-underline-offset:4px; }
.poem-art { grid-area:art; position:sticky; top:24px; margin:0; min-width:0; }
.poem-art img { display:block; width:100%; height:auto; }
.poem-art figcaption { padding-top:12px; font:11px/1.7 Arial,sans-serif; color:var(--muted); }
.poem-layout-prose { display:block; max-width:780px; }
.poem-prose { font-size:20px; line-height:1.85; }

/* Replace old layout tables with responsive grids, preserving the cell order.
   Neuengamme's language columns are stacked on smaller screens. */
.poem-grid-table { display:block; margin-bottom:1.7em; }
.poem-grid-row { display:flex; flex-wrap:wrap; gap:24px; }
.poem-grid-cell { min-width:0; flex:1 1 140px; }
.poem-grid-span { flex-basis:100%; }
.poem-grid-cell p { margin-bottom:1.1em; }
.poem-layout-wide { grid-template-columns:1fr; grid-template-areas:'art' 'text'; gap:36px; }
.poem-layout-wide .poem-art { position:static; max-width:600px; }
.poem-layout-wide .poem-text { font-size:17px; }
.poem-layout-wide .poem-grid-cell { flex-basis:25%; }

/* The existing Definition of Love music table remains a genuine data table. */
.poetry-table-scroll { max-width:100%; overflow-x:auto; margin:30px 0; }
.poetry-music-table { width:100%; border-collapse:collapse; min-width:540px; font:14px/1.7 Arial,sans-serif; }
.poetry-music-table th, .poetry-music-table td { border-bottom:1px solid #ffffff30; text-align:left; vertical-align:top; padding:12px; }
.poetry-music-table img { width:110px; max-width:none; height:auto; }
.poetry-music-table p { margin-bottom:12px; }
.poem-text > img { max-width:100%; height:auto; }
.poetry-pagination { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px; border-top:1px solid #ffffff30; margin-top:50px; padding:28px 0; font-size:13px; }
.poetry-pagination a { padding:10px 0; max-width:40%; line-height:1.6; }

@media (max-width:1000px) {
 .poem-layout { gap:32px; }
 .poem-text { font-size:18px; }
}
@media (max-width:760px) {
 .poetry-intro { padding-top:12px; }
 .poetry-intro h1, .poetry-collection-intro h1 { letter-spacing:-1px; }
 .poetry-collections, .poetry-collection-intro, .poetry-index { grid-template-columns:1fr; gap:28px; }
 .poetry-index { row-gap:0; }
 .poetry-collection-intro { padding:14px 0 36px; }
 .poem-heading { padding:12px 0 28px; margin-bottom:28px; }
 .poem-layout { grid-template-columns:1fr; grid-template-areas:'art' 'text'; gap:32px; }
 .poem-art { position:static; }
 .poem-text { font-size:18px; line-height:1.8; }
 .poem-prose { font-size:19px; }
 .poem-text .poem-indent { margin-left:1em; }
 .poem-layout-wide .poem-grid-cell { flex-basis:100%; }
 .poetry-pagination { align-items:flex-start; flex-direction:column; gap:8px; }
 .poetry-pagination a { max-width:100%; }
}
@media print {
 .section-menu-bar, .section-menu, .section-menu-fallback, .poetry-pagination { display:none !important; }
 .poem-layout, .poetry-collections, .poetry-collection-intro { display:block; }
 .poem-art { position:static; max-width:45%; margin:0 0 24px; }
 .poem-text { font-size:12pt; }
 .poem-text p { break-inside:avoid; }
 .poetry-table-scroll { overflow:visible; }
}

/* Small time markers articulate LandNacht's four stages without changing text. */
.poem-text .poem-time { color:var(--accent); font:12px/1.7 Arial,sans-serif; letter-spacing:2px; margin:2.4em 0 1.2em; }

/* A compact two-column introduction keeps both collection entrances in view. */
@media (min-width:761px) {
 .poetry-intro { max-width:none; display:grid; grid-template-columns:1.1fr 1fr; column-gap:64px; align-items:end; }
 .poetry-intro > .poetry-kicker { grid-column:1 / -1; }
 .poetry-intro h1 { margin:0; }
 .poetry-intro-text { margin:0; padding-bottom:5px; }
}

/* The original music logo supports the poem; it should not fill a text column. */
.poem-text > img { width:160px; }