/* Shavaju homepage. One stylesheet, no framework, no build step.
   Sophistication belongs underneath: the page should feel calm, obvious and
   fast, so the rules below are mostly about restraint. */

/* ---------------------------------------------------------------- type ---
   Two self-hosted faces, latin subset only, no third-party request.

   Newsreader carries the voice. It is a contemporary text serif with real
   warmth in its curves and enough contrast to make the three-line hero read
   as a considered statement rather than a startup tagline. The instance
   below is opsz 36 - mid-way through the 22px-68px range the serif is
   actually used at - so its hairlines survive the small headings and still
   look refined at hero size. One weight only: size and spacing carry the
   hierarchy, which keeps the page quiet and the download small.

   Source Sans 3 carries the reading. Humanist, open apertures, unfashionable
   in the good way; it disappears at body size, which is the whole job.

   Both are SIL OFL 1.1. Licences ship beside the files in assets/fonts/. */

@font-face {
    font-family: "Newsreader";
    src: url("fonts/newsreader-500-latin.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
        U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
        U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Source Sans 3";
    src: url("fonts/source-sans-3-latin.woff2") format("woff2");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
        U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
        U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* -------------------------------------------------------------- tokens --- */

:root {
    /* Approved palette. Blue and navy carry the accents. */
    --bg: #faf9f6;
    --bg-sunk: #f3f1ea;
    --header-bg: #eaf0f7;
    --header-rule: #bdcddd;
    --ink: #0b1f3a;
    --ink-soft: #3a4a63;
    --blue: #1769e0;
    --blue-deep: #0f4fab;
    --teal: #079a91;
    /* The approved teal is 3.08:1 against the sunk band - it clears the 3:1
       bar for a non-text control by nothing at all. This is the same hue one
       step deeper (3.98:1 there, 4.28:1 on the page background) and is what
       the step rings actually use. The approved value stays above as the
       brand token. */
    --teal-ring: #07857e;
    --rule: #e3dfd5;
    --rule-strong: #cfcabd;

    /* Fallbacks are metrically close on purpose: if the webfont is slow or
       blocked, the swap moves the text a little, not a lot. */
    --font-display: "Newsreader", "Iowan Old Style", "Palatino Linotype",
        Palatino, Georgia, "Times New Roman", serif;
    --font-body: "Source Sans 3", -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    --measure: 34rem;         /* readable line length for prose */
    --shell: 68rem;           /* outer content width */
    --gutter: clamp(1rem, 4vw, 2.5rem);

    /* The page is designed in one palette. Declaring it stops the browser
       from applying its own dark-mode adjustments to a page that has no
       dark variant to adjust to. */
    color-scheme: light;
}

/* ---------------------------------------------------------------- base --- */

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

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: clamp(1.0625rem, 0.4vw + 1rem, 1.1875rem);
    line-height: 1.65;
    /* Long unbroken strings must not push the page sideways. */
    overflow-wrap: break-word;
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
    font-family: var(--font-display);
    font-weight: 500;
    color: var(--ink);
    letter-spacing: -0.015em;
    margin: 0;
    text-wrap: pretty;
}

p {
    margin: 0 0 1.15em;
    max-width: var(--measure);
    text-wrap: pretty;
}

p:last-child {
    margin-bottom: 0;
}

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

ol,
ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* One focus treatment everywhere, and it is never removed. Two rings so it
   stays visible on the off-white page and on the navy band. */
:focus-visible {
    outline: 3px solid var(--blue);
    outline-offset: 3px;
    border-radius: 3px;
}

.closing :focus-visible {
    outline-color: var(--bg);
}

/* Anchor targets sit clear of the top edge so a jump never lands with the
   heading tight against the viewport. */
:target {
    scroll-margin-top: 1.5rem;
}

/* <main> only carries tabindex="-1" so the skip link can move focus into it.
   Focusing it is a programmatic consequence of that, not the user pointing at
   it, so it gets no ring: a 3px outline around the whole page would be noise,
   and :focus-visible correctly does not match here anyway. Interactive
   elements keep their indicator - this exempts one non-interactive container,
   nothing else. */
main:focus {
    outline: none;
}

/* --------------------------------------------------------- skip / shell --- */

.skip-link {
    position: absolute;
    left: 0.5rem;
    top: 0.5rem;
    z-index: 10;
    padding: 0.7rem 1.1rem;
    background: var(--ink);
    color: var(--bg);
    font-weight: 600;
    text-decoration: none;
    border-radius: 4px;
    /* Off-canvas rather than display:none, so it is still reachable by Tab. */
    transform: translateY(calc(-100% - 1rem));
}

.skip-link:focus {
    transform: translateY(0);
}

.shell {
    width: 100%;
    max-width: var(--shell);
    margin: 0 auto;
    padding-inline: var(--gutter);
}

/* -------------------------------------------------------------- header --- */

.masthead {
    background: var(--header-bg);
    border-bottom: 1px solid var(--header-rule);
}

.masthead__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    min-height: 5rem;
    padding-block: 0.75rem;
    /* Wrap rather than overflow. At the default text size the brand and the
       action fit on one line at every width down to 320px, so this never
       engages there. It engages when a reader has enlarged text: at 200% on a
       320px viewport the two no longer fit, and without this the action was
       pushed 75px past the right edge and the whole page scrolled sideways.
       Flex items will not shrink below their content, so wrapping is the fix,
       not shrinking. */
    flex-wrap: wrap;
}

.brand {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    gap: 0.6rem;
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 1.5rem;
    letter-spacing: 0.005em;
    /* Kept from when this was a link: the padding gave it a comfortable hit
       area and the negative margin pulled the mark back onto the text edge.
       They cancel horizontally, and the vertical padding sets the header's
       height, so removing them would move the lockup. text-decoration and the
       focus-ring radius went with the link. */
    padding: 0.35rem 0.4rem;
    margin-inline-start: -0.4rem;
}

.brand > span {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Preserve the approved mark proportions, including at enlarged text sizes. */
.brand__mark {
    width: 20px;
    height: 36px;
    object-fit: contain;
    flex: none;
}

.nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    min-width: 0;
    gap: 0.25rem clamp(0.5rem, 2vw, 1.75rem);
}

.nav__link {
    color: var(--ink-soft);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 600;
    padding: 0.75rem 0.5rem;   /* comfortable target without a visible box */
    border-radius: 4px;
    transition: color 140ms ease;
}

.nav__link:hover {
    color: var(--blue-deep);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}


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

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
    padding: 0.8rem min(1.6rem, 6vw);
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
    text-align: center;
    border-radius: 0.75rem;
    font-family: var(--font-body);
    font-size: 1.0625rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 140ms ease, color 140ms ease;
}

.button--primary {
    background: var(--blue);
    color: var(--bg);
}

.button--primary:hover {
    background: var(--blue-deep);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}


/* A text link that still looks like a link with colour ignored: it is
   underlined at rest, not only on hover. */
.textlink {
    color: var(--blue-deep);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 4px;
    transition: color 140ms ease;
}

.textlink:hover {
    color: var(--ink);
    text-decoration-thickness: 2.5px;
}

/* The footer Contact link carries no underline, by the user's decision on
   2026-09-17. Hover restores one and the shared focus ring is untouched, so
   pointer and keyboard users still get a signal that is not colour. In its
   resting state this link is distinguished by colour, weight and position
   only - recorded in AI-HANDOFF.md, SHAV-IMPL-20260917. */
.textlink--bare {
    text-decoration: none;
}

.textlink--bare:hover {
    text-decoration: underline;
    text-decoration-thickness: 2.5px;
}

.actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.75rem;
    margin-top: 2.25rem;
}

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

.hero {
    border-bottom: 1px solid var(--rule);
    padding-block: clamp(2.5rem, 6vw, 5rem);
}

.hero__statement {
    /* The binding constraint is "Use technology second." on a 320px phone: it
       must hold one line and must not overflow. Measured, not guessed - at
       28px that line is 262.5px wide in Newsreader and 276.3px in the widest
       fallback (Iowan Old Style), against 288px of available width. 8.7vw is
       what puts the font at 28px exactly when the viewport is 320px, so the
       narrowest phone is the case the curve is anchored to and every larger
       phone gets a proportionally larger hero instead of the same one. The
       clamp floor is only a backstop below 320px. */
    /* The middle term carries a rem share on purpose. A pure-vw middle term
       ignores the reader's default font size entirely: this heading used to
       compute 60.9px at a 700px viewport at 100%, 150% and 200% text size
       alike. The 0.5rem intercept is chosen so 320px still renders at 27.84px
       and three lines at the default size, which is the approved small-screen
       hero. See AI-HANDOFF.md, SHAV-FIX-20260917. */
    font-size: clamp(1.625rem, 0.5rem + 6.2vw, 4.25rem);
    line-height: 1.04;
    letter-spacing: -0.028em;
    margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
    max-width: 22ch;
}

.hero__statement span {
    display: block;
}

.hero__statement span:nth-child(2) {
    color: var(--blue-deep);
}

.hero__lede {
    font-size: clamp(1.1875rem, 0.7vw + 1.05rem, 1.5rem);
    line-height: 1.55;
    color: var(--ink);
    max-width: 33rem;
}

.hero__mission {
    color: var(--ink-soft);
    max-width: 33rem;
}

/* -------------------------------------------------- section furniture --- */

.band {
    padding-block: clamp(2.5rem, 5vw, 4.25rem);
}

.band--sunk {
    background: var(--bg-sunk);
    border-block: 1px solid var(--rule);
}

.eyebrow {
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin: 0 0 1rem;
    max-width: none;
}

/* The one repeated structural motif on the page. */
.eyebrow::before {
    content: "";
    display: block;
    width: 1.75rem;
    height: 2px;
    background: var(--blue);
    margin-bottom: 0.9rem;
}

.band__heading {
    font-size: clamp(1.75rem, 3.2vw, 2.75rem);
    line-height: 1.12;
    max-width: 30ch;
    margin-bottom: 1.5rem;
}

.prose {
    font-size: clamp(1.0625rem, 0.3vw + 1rem, 1.1875rem);
}

.prose--lead p {
    font-size: clamp(1.125rem, 0.5vw + 1rem, 1.3125rem);
    line-height: 1.6;
}

/* A statement that closes a section. Serif, larger, and set off by space and
   a rule rather than by a box. */
.pullquote {
    font-family: var(--font-display);
    font-size: clamp(1.4375rem, 2.6vw, 2.125rem);
    line-height: 1.22;
    letter-spacing: -0.015em;
    color: var(--ink);
    max-width: 26ch;
    margin: clamp(2.25rem, 4vw, 3rem) 0 0;
    padding-left: 1.25rem;
    border-left: 3px solid var(--blue);
}

/* ------------------------------------------------------------ sequence ---
   The four steps of the activity. An ordered list, so the order is in the
   markup and not only in the drawn connectors; the numerals and the line are
   decoration on top of that. No arrow glyph, which also spares a screen
   reader from reading one out. */

.sequence {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    margin: clamp(2rem, 4vw, 2.75rem) 0 clamp(1.75rem, 3vw, 2.25rem);
}

.sequence li {
    position: relative;
    display: flex;
    align-items: center;
    /* Wrapping drops the label under the numeral when the two stop fitting
       side by side, instead of pushing the page sideways. Never engages at
       normal text sizes. */
    flex-wrap: wrap;
    gap: 0.85rem;
    padding-block: 0.55rem;
    font-weight: 600;
    font-size: clamp(1.0625rem, 0.4vw + 1rem, 1.1875rem);
}

/* The label used to be an anonymous flex item, which has an automatic minimum
   size and cannot shrink below its longest word: at 200% text the page gained
   6px of horizontal scroll. Naming it fixes that, but the minimum alone is not
   enough. In the wide layout each step is a COLUMN flex container, so width is
   the cross axis, where neither flex-shrink nor min-width applies and the item
   takes its max-content width - 176px inside a 138px grid column. The
   max-width is what actually binds it; the inherited overflow-wrap then breaks
   the word instead of the layout. min-width stays for the narrow row layout.
   Measured both ways: see AI-HANDOFF.md, SHAV-SEQ-FIX-20260917. */
.sequence__label {
    overflow-wrap: anywhere;
    min-width: 0;
    max-width: 100%;
}

.sequence__num {
    flex: none;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 2px solid var(--teal-ring);
    color: var(--ink);
    background: var(--bg);
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* The connector. Vertical while the steps are stacked. */
.sequence li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 1rem;
    top: 2.55rem;
    bottom: -0.05rem;
    width: 2px;
    background: var(--rule-strong);
}

/* The draft notice. Same left-rule treatment as the origin note, so the page
   has one way of saying "this is an aside", not two. Colour pairing is
   ink-soft on the sunk band, already covered by the contrast checker. */
.note {
    border-left: 2px solid var(--rule-strong);
    padding-left: 0.9rem;
    color: var(--ink-soft);
}

/* ---------------------------------------------------------- origin note ---
   Deliberately quieter than the section it sits in: smaller heading, softer
   text, one rule instead of a card. Confusables is part of the origin story,
   not a second product tile. */

.origin {
    margin-top: clamp(2rem, 3vw, 2.5rem);
    padding-left: clamp(1rem, 2.5vw, 1.75rem);
    border-left: 2px solid var(--rule-strong);
    max-width: 38rem;
}

.origin__heading {
    font-size: clamp(1.25rem, 1.6vw, 1.5rem);
    line-height: 1.25;
    margin-bottom: 0.9rem;
}

.origin p {
    color: var(--ink-soft);
    font-size: 1.0625rem;
}

.origin__more {
    margin-top: 1.25rem;
}

/* ------------------------------------------------------------- closing --- */

.closing {
    background: var(--ink);
    color: var(--bg);
    padding-block: clamp(2.5rem, 5vw, 4rem);
}

.closing__statement {
    font-family: var(--font-display);
    font-size: clamp(1.875rem, 4.4vw, 3.25rem);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--bg);
    /* Wide enough that "Machines will keep getting more capable." holds one
       line on a desktop, so the close reads as the two sentences it is. It
       still wraps on a phone, where two lines per sentence is unavoidable. */
    max-width: 40ch;
    margin: 0;
}

.closing__statement span {
    display: block;
}

.closing__slogan {
    font-family: var(--font-display);
    font-size: clamp(1.125rem, 1.6vw, 1.4375rem);
    line-height: 1.4;
    color: #cfd8e6;      /* 11.5:1 on the navy band */
    margin: clamp(1.75rem, 3vw, 2.25rem) 0 0;
    max-width: none;
}

/* Each sentence of the slogan is an inline-block, so a narrow screen breaks
   between sentences instead of stranding "Use" at the end of a line. */
.closing__slogan span {
    display: inline-block;
    max-width: 100%;
    overflow-wrap: anywhere;
}


/* -------------------------------------------------------------- footer --- */

.footer {
    border-top: 1px solid var(--rule);
    padding-block: 2rem;
    font-size: 1rem;
}

.footer__inner {
    display: grid;
    justify-items: start;
    gap: 0.4rem;
}

/* Spacing here belongs to the grid, not to the paragraphs. Zeroing the
   inherited margins is what lets both columns share one rhythm, so their rows
   line up instead of drifting apart by half a line. */
.footer__inner > * {
    margin: 0;
    max-width: none;
}

/* Stacked, Contact and the copyright read as a second group. */
.footer__contact {
    margin-top: 1.1rem;
}

.footer__brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-display);
    font-size: 1.25rem;
    color: var(--ink);
}

.footer__mark {
    width: 17px;
    height: 30px;
    object-fit: contain;
    flex: none;
}

/* The lockup stays optically centred, exactly as the header's does. This one
   line is what lets it sit level with Contact on the two-column layout: a flex
   container with no baseline-aligned item reports the first item's bottom edge
   as its baseline, which here is the mark's, eleven pixels off the wordmark's.
   Letting the wordmark align to the baseline makes the container report that
   instead, and the mark does not move. */
.footer__brand span {
    align-self: baseline;
}

.footer__line,
.footer__copyright {
    color: var(--ink-soft);
}

/* ----------------------------------------------------------- 404 page --- */

/* public/404.html only. Compact on purpose: an error page should orient the
   visitor and get out of the way, not repeat the homepage. */
.notfound {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-height: 100vh;
    padding-block: clamp(2.5rem, 5vw, 4rem);
}

.notfound__brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-display);
    font-size: 1.25rem;
    color: var(--ink);
    text-decoration: none;
    padding: 0.35rem 0.4rem;
    margin-left: -0.4rem;
}

.notfound__heading {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(1.75rem, 3.2vw, 2.75rem);
    line-height: 1.15;
    color: var(--ink);
    margin: clamp(1.5rem, 3vw, 2rem) 0 0;
}

.notfound__line {
    font-size: clamp(1.125rem, 0.5vw + 1rem, 1.3125rem);
    color: var(--ink-soft);
    max-width: var(--measure);
    margin: 0.75rem 0 0;
}

.notfound__back {
    margin: clamp(1.5rem, 3vw, 2rem) 0 0;
}

/* ---------------------------------------------------------- responsive --- */

/* The footer pairs up much earlier than the step sequence does: its widest
   line is about 200px, so it has room for two columns long before four steps
   do. Sharing the 46rem breakpoint left it stacked against half a screen of
   empty space on tablets. */
@media (min-width: 30rem) {
    /* Brand over tagline on the left, Contact over the copyright on the right.
       Each row shares a baseline, so "Shavaju" sits level with Contact and the
       tagline with the copyright, and both right-hand items end on one edge. */
    .footer__inner {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "brand contact"
            "line  copyright";
        align-items: baseline;
        column-gap: 2rem;
        row-gap: 0.55rem;
    }

    .footer__brand {
        grid-area: brand;
    }

    .footer__line {
        grid-area: line;
    }

    .footer__contact {
        grid-area: contact;
        margin-top: 0;
    }

    .footer__copyright {
        grid-area: copyright;
    }

    .footer__contact,
    .footer__copyright {
        justify-self: end;
    }
}

/* Steps run across the page once there is room for four of them. */
@media (min-width: 46rem) {
    .sequence {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0 1.25rem;
        max-width: 46rem;
    }

    .sequence li {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.85rem;
        padding-block: 0;
    }

    .sequence li:not(:last-child)::after {
        left: 2.4rem;
        top: 1rem;
        bottom: auto;
        right: -1.25rem;
        width: auto;
        height: 2px;
    }
}

/* Below this the header stops having room for both section anchors beside the
   brand. Nothing is folded into a hamburger: the sections they point at are the
   next thing down the page anyway, and the hero carries its own link to the
   thesis. The header has had no button since the call-to-action reduction. */
@media (max-width: 46rem) {
    /* Only the thinking anchor goes. "Why Shavaju?" in the hero reaches the
       same section, while the work anchor has no equivalent above the fold.
       This used to key off the header CTA, which no longer exists - that
       selector would now hide the whole nav. */
    .nav__link--thinking {
        display: none;
    }
}

@media (max-width: 26rem) {
    .brand {
        font-size: 1.3125rem;
    }

    .nav__link {
        padding-inline: 0.35rem;
    }
}

/* ---------------------------------------------------- editorial layout ---
   Quiet surfaces separate sections; the desktop grid uses the available width
   rather than leaving an empty right half. DOM reading order is unchanged.
   Narrow viewports return to the single column; enlarged text can wrap freely. */
.eyebrow {
    overflow-wrap: anywhere;
}

.eyebrow::before {
    display: inline-block;
    vertical-align: middle;
    margin: 0 0.75rem 0 0;
}

.closing__statement span + span {
    margin-top: 0.35em;
}

@media (min-width: 68rem) {
    .hero {
        display: grid;
        grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
        column-gap: 3rem;
        align-items: start;
    }

    .hero__statement {
        grid-row: 1 / 3;
        font-size: clamp(2.5rem, 3.7vw, 3.35rem);
        line-height: 1.12;
        margin-bottom: 0;
    }

    .hero > .prose,
    .hero > .actions {
        grid-column: 2;
    }

    .hero__lede {
        font-size: 1.25rem;
    }

    .hero > .actions {
        gap: 1rem 1.25rem;
        margin-top: 1.5rem;
    }

    .band:not(.band--sunk) > .shell {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-rows: auto auto 1fr;
        column-gap: 4rem;
        align-items: start;
    }

    .band:not(.band--sunk) .eyebrow {
        grid-column: 1 / -1;
    }

    .band:not(.band--sunk) .band__heading {
        grid-column: 1;
        grid-row: 2;
    }

    /* Column two carries the prose. A section may have more than one prose
       block - a lead paragraph and then the detail beneath it - so a second
       one has to stack under the first. Without the sibling rule both land in
       the same cell and the text renders on top of itself. */
    .band:not(.band--sunk) .prose {
        grid-column: 2;
        grid-row: 2;
    }

    .band:not(.band--sunk) .prose + .prose {
        grid-column: 2;
        grid-row: 3;
        margin-top: 1.15em;
    }

    .pullquote {
        grid-column: 1;
        margin-top: 1rem;
        font-size: 1.625rem;
    }

    .band--sunk > .shell {
        display: grid;
        grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
        grid-template-rows: repeat(5, auto) 1fr;
        column-gap: 4rem;
    }

    .band--sunk .eyebrow,
    .band--sunk .band__heading,
    .band--sunk .prose--lead,
    .band--sunk .sequence {
        grid-column: 1 / -1;
    }

    .band--sunk .origin {
        grid-column: 2;
        grid-row: 5 / 7;
        margin-top: 0;
        align-self: start;
    }

    .band--sunk > .shell > .actions {
        grid-column: 1;
        align-self: start;
    }
}

/* --------------------------------------------------------- reduced motion ---
   Everything above is a colour or background transition on a deliberate
   interaction; there is no entrance animation and nothing reveals on scroll.
   Honour the preference anyway. */

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}