/* ==========================================================================
   Simon Fox — acoustic guitar
   Art direction: coastal BC. Cedar and water, fog as the working surface.

   Three rules hold this together:
     1. Text never sits on top of a photograph.
     2. No rounded corners, no shadows, no gradients. Hairlines only.
     3. Everything left-aligned. Small type, large air.
   ========================================================================== */

@font-face {
    font-family: "Instrument Sans";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("/fonts/instrument-sans-latin-e35fad09c70beb975a297c43c6af4e66.woff2") format("woff2");
}

@font-face {
    font-family: "Instrument Sans";
    font-style: italic;
    font-weight: 400 700;
    font-display: swap;
    src: url("/fonts/instrument-sans-latin-italic-ba4ed4ed75904a9f580dd42ddac4fd2c.woff2") format("woff2");
}

:root {
    /* Surfaces */
    --paper: #f8faf9;
    --fog: #edf1f0;
    --seaglass: #c9dad5;

    /* Depths */
    --cedar: #17352c;
    --teal: #2e5e5b;

    /* Ink */
    --ink: #141c1a;
    --muted: #5f6e6a;
    --rule: #d3dcd9;
    --rule-dark: rgba(255, 255, 255, 0.18);

    /* The single accent. Used sparingly — colour belongs to the photographs. */
    --accent: #35708a;
    --accent-light: #8fc0d1;

    --font: "Instrument Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    --wrap: min(1160px, 100vw - clamp(28px, 7vw, 112px));
    --band: clamp(72px, 9vw, 132px);
}

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

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

body {
    margin: 0;
    color: var(--ink);
    background: var(--paper);
    font-family: var(--font);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.62;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

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

a {
    color: inherit;
}

h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
    margin: 0;
}

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

::selection {
    background: var(--seaglass);
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

/* --------------------------------------------------------------- layout -- */

.wrap {
    width: var(--wrap);
    margin-inline: auto;
}

.band {
    padding-block: var(--band);
}

.band-tight {
    padding-block: clamp(52px, 6vw, 84px);
}

.rule {
    height: 1px;
    border: 0;
    margin: 0;
    background: var(--rule);
}

.dark {
    color: var(--paper);
    background: var(--cedar);
}

.dark .label {
    color: var(--accent-light);
}

/* Every hairline component, restated for a cedar background. */
.dark :is(.index, .index-row, .spec, .spec-row, .entry-list, .entry, .section-head) {
    border-color: var(--rule-dark);
}

.dark .rule {
    background: var(--rule-dark);
}

.dark .index-row:hover,
.dark .index-row:focus-visible {
    background: rgba(255, 255, 255, 0.05);
}

.dark .index-datum,
.dark .index-num,
.dark .index-sub {
    color: #9ab3ac;
}

.fog {
    background: var(--fog);
}

.skip-link {
    position: fixed;
    z-index: 100;
    top: 10px;
    left: 10px;
    padding: 10px 16px;
    color: var(--paper);
    background: var(--cedar);
    font-size: 0.8125rem;
    text-decoration: none;
    transform: translateY(-200%);
}

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

/* ------------------------------------------------------------ typography -- */

/* Wide-tracked caps. The specimen label. */
.label {
    color: var(--muted);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    line-height: 1.4;
    text-transform: uppercase;
}

.display {
    max-width: 20ch;
    font-size: clamp(1.95rem, 3.1vw, 2.7rem);
    font-weight: 600;
    letter-spacing: -0.021em;
    line-height: 1.12;
    text-wrap: balance;
}

.heading {
    font-size: clamp(1.35rem, 1.9vw, 1.7rem);
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.2;
}

.subheading {
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.008em;
    line-height: 1.35;
}

.lede {
    max-width: 52ch;
    font-size: 1.0625rem;
    line-height: 1.6;
}

.prose {
    max-width: 62ch;
    color: var(--muted);
}

.prose + .prose {
    margin-top: 1.1em;
}

.dark .prose {
    color: #b8ccc6;
}

.small {
    font-size: 0.875rem;
    line-height: 1.55;
}

.muted {
    color: var(--muted);
}

/* ------------------------------------------------------------ interactive -- */

.button {
    padding: 13px 22px 14px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--cedar);
    color: var(--paper);
    background: var(--cedar);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.005em;
    text-decoration: none;
    transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}

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

.button-quiet {
    color: var(--ink);
    background: transparent;
    border-color: var(--rule);
}

.button-quiet:hover,
.button-quiet:focus-visible {
    color: var(--ink);
    border-color: var(--ink);
    background: transparent;
}

.dark .button {
    border-color: var(--paper);
    color: var(--cedar);
    background: var(--paper);
}

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

/* Text link with a hairline that grows on hover. */
.link {
    padding-bottom: 3px;
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    border-bottom: 1px solid var(--rule);
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color 160ms ease, color 160ms ease;
}

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

.dark .link:hover,
.dark .link:focus-visible {
    border-color: var(--accent-light);
    color: var(--accent-light);
}

.link .arrow {
    transition: transform 160ms ease;
}

.link:hover .arrow,
.link:focus-visible .arrow {
    transform: translateX(3px);
}

/* An address set large enough to be the thing you came for. */
.email-link {
    padding-bottom: 7px;
    display: inline-block;
    border-bottom: 1px solid var(--rule);
    font-size: clamp(1.2rem, 2.1vw, 1.65rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    text-decoration: none;
    transition: border-color 160ms ease, color 160ms ease;
}

.email-link:hover,
.email-link:focus-visible {
    border-color: var(--accent);
    color: var(--accent);
}

.actions {
    margin-top: 30px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px 26px;
}

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

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

.header-inner {
    min-height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    text-decoration: none;
}

.brand-mark {
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
}

.brand-name {
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: clamp(18px, 2.6vw, 36px);
}

.site-nav a {
    position: relative;
    padding-block: 4px;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
}

.site-nav a::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 1px;
    content: "";
    background: var(--ink);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 180ms ease;
}

.site-nav a:hover::after,
.site-nav a:focus-visible::after,
.site-nav a[aria-current="page"]::after {
    transform: scaleX(1);
    transform-origin: left;
}

.menu-button {
    display: none;
}

/* ---------------------------------------------------------------- opening -- */

/* Sky above, content entering low. The mountain feeling, as layout.
   Top-aligned on purpose: the label must land at the same height on every
   page, or the nav jumps as you click through. The slack goes underneath,
   where it is empty anyway. */
.opening {
    /* All three values are fixed px on purpose. Mixing a vh min-height with
       px content made the band a different height on every page, so both the
       label and the section below it shifted as you moved through the nav.

       Constraint if you change these: min-height must stay at least 405px
       above padding-top. 405px is the tallest opening content on the site
       (Music, whose lede runs to three lines). Go below that and Music
       outgrows the band, the heights diverge, and the jumping returns. */
    min-height: 568px;
    padding-top: 140px;
    padding-bottom: 88px;
    display: flex;
    align-items: flex-start;
}

.opening .label {
    margin-bottom: 22px;
}

.opening .lede {
    margin-top: 20px;
}

/* ------------------------------------------------------------- photograph -- */

/* Full bleed, standing alone. Caption sits below on paper, never over it. */
.plate img {
    width: 100%;
    height: clamp(320px, 52vh, 560px);
    max-height: 560px;
    object-fit: cover;
    object-position: center 38%;
}

.plate figcaption {
    padding-top: 12px;
    display: flex;
    justify-content: space-between;
    gap: 24px;
}

/* Landscapes are already cropped tight, so keep the middle rather than
   biasing upward the way a portrait needs. */
.plate-wide img {
    object-position: center;
}

/* Photographs shown together, captioned like an archive. Add or remove
   figures freely — the grid takes any number. */
.plates {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: clamp(20px, 3vw, 40px);
}

.plates figure {
    margin: 0;
}

.plates img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.plates figcaption {
    padding-top: 12px;
    display: flex;
    justify-content: space-between;
    gap: 16px;
}

/* ------------------------------------------------------------------ index -- */

/* The catalogue. Numbered entries with their specimen data. */
.index {
    border-top: 1px solid var(--rule);
}

.index-row {
    padding-block: 26px;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 104px 176px 82px 24px;
    align-items: baseline;
    gap: 20px;
    border-bottom: 1px solid var(--rule);
    color: inherit;
    text-decoration: none;
    transition: background 160ms ease;
}

/* The highlight is exactly the row: as tall as the row, and as wide as the
   hairlines above and below it.

   It used to bleed outwards on all four sides (box-shadow: 0 0 0 Npx). That
   made it both taller than the row and wider than the rules, so the fill
   overhung the ends of the very lines that draw the table. Nothing else on the
   page steps outside the wrap, and the eye reads those hairlines as the table's
   edge — so the fill has to stop where they stop. Extending the rules to meet
   the fill instead was the other way out, but that pushes them past the section
   heading and reads as a misalignment. */
.index-row:hover,
.index-row:focus-visible {
    background: var(--fog);
}

/* Single-line cells, kept tight so the row height is set by the title block. */
.index-num,
.index-datum,
.index-price,
.index-arrow {
    line-height: 1.3;
}

.index-num {
    color: var(--muted);
    font-size: 0.8125rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Flex, so whitespace in the template can't leave a stray empty line box. */
.index-body {
    display: flex;
    flex-direction: column;
}

.index-title {
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.008em;
    line-height: 1.3;
}

.index-sub {
    margin-top: 3px;
    color: var(--muted);
    font-size: 0.875rem;
    line-height: 1.4;
}

.index-datum {
    color: var(--muted);
    font-size: 0.8125rem;
}

.index-price {
    font-size: 0.9375rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.index-arrow {
    color: var(--muted);
    text-align: right;
    transition: transform 160ms ease, color 160ms ease;
}

/* An index row with no specimen columns — a plain list of links. */
.index-row-simple {
    grid-template-columns: 42px minmax(0, 1fr) 82px 24px;
}

/* Not on sale yet. Still listed, but nothing to click and no hover response. */
.index-row-soon {
    cursor: default;
}

.index-row-soon:hover {
    background: none;
}

.index-row-soon .index-title,
.index-row-soon .index-price {
    color: var(--muted);
    font-weight: 500;
}

.index-row:hover .index-arrow,
.index-row:focus-visible .index-arrow {
    color: var(--accent);
    transform: translateX(3px);
}

/* ----------------------------------------------------------------- entry -- */

/* The catalogue index, opened up. Same numbered hairline rhythm as .index,
   but with room for artwork, a description and its own buy button. */
.entry-list {
    border-top: 1px solid var(--rule);
}

.entry {
    padding-block: 38px;
    display: grid;
    grid-template-columns: 42px 148px minmax(0, 1fr) 168px;
    align-items: start;
    gap: 34px;
    border-bottom: 1px solid var(--rule);
}

.entry-art img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}

.entry-soon .entry-art img {
    opacity: 0.55;
}

.entry-kind {
    margin-bottom: 9px;
}

.entry-title {
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.25;
}

.entry-desc {
    max-width: 56ch;
    margin-top: 11px;
    color: var(--muted);
    font-size: 0.9375rem;
    line-height: 1.55;
}

.entry-meta {
    margin-top: 16px;
}

.entry-buy {
    display: flex;
    align-items: stretch;
    flex-direction: column;
    gap: 13px;
}

.entry-price {
    font-size: 1.25rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.015em;
    line-height: 1.2;
}

.entry-buy .button {
    justify-content: center;
    padding-block: 11px 12px;
}

/* Same specimen rhythm as the index, but static — nothing to click. */
.spec {
    border-top: 1px solid var(--rule);
}

.spec-row {
    padding-block: 22px;
    display: grid;
    grid-template-columns: 42px 220px minmax(0, 1fr);
    align-items: baseline;
    gap: 20px;
    border-bottom: 1px solid var(--rule);
}

/* The six strings, as data. */
.strings {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    border-top: 1px solid var(--rule-dark);
    border-bottom: 1px solid var(--rule-dark);
}

.strings li {
    padding-block: 22px;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 10px;
    border-left: 1px solid var(--rule-dark);
}

.strings li:first-child {
    border-left: 0;
}

.strings .label {
    color: var(--accent-light);
}

.strings strong {
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1;
}

/* --------------------------------------------------------------- sections -- */

.section-head {
    margin-bottom: 40px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 32px;
}

.section-head .label {
    margin-bottom: 14px;
}

/* Asymmetric two-column. Deliberately uneven — not a template split. */
.split {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(36px, 6vw, 88px);
}

.split-narrow {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
}

.split-center {
    align-items: center;
}

.split img {
    width: 100%;
}

.stack > * + * {
    margin-top: 18px;
}

/* -------------------------------------------------------------- chapter -- */

/* The memoir pattern. A rail down the left carrying the chapter's number,
   title, time and place, and its photographs; the prose on the right.

   This is the one thing a plain .split-narrow could not do here. At six
   hundred words the left column of a split is empty for its entire height,
   with a single small label floating at the top of it. Giving that column
   the chapter's photographs fills it with the only thing that belongs
   beside that particular text — and a longer chapter simply takes more
   photographs, so the two sides grow together instead of apart. */
.chapter {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "head body"
        "rail body";
    gap: 0 clamp(36px, 6vw, 88px);
}

/* Chapters run continuously, so the hairline is the only thing marking the
   turn. No rule above the first one — the opening already sits above it. */
.chapter + .chapter {
    border-top: 1px solid var(--rule);
}

.chapter-head {
    grid-area: head;
}

/* Flex so the number can sit on the title's first baseline rather than in a
   line of its own above it. Stacked, it pushed the title down and the head
   no longer lined up with the first line of prose across the gutter — and
   that alignment is the thing holding the two columns together. */
.chapter-title {
    display: flex;
    align-items: baseline;
    gap: 14px;
    font-size: clamp(1.35rem, 1.9vw, 1.7rem);
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.2;
    text-wrap: balance;
}

.chapter-num {
    flex: none;
    color: var(--muted);
    font-size: 0.8125rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Time and place, stated by every chapter. This is the spine of the page:
   however deep into the story you are, you can always see where you are
   standing without scrolling back to find out. */
.chapter-where {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--rule);
    color: var(--muted);
    font-size: 0.8125rem;
    line-height: 1.5;
}

.chapter-where span {
    display: block;
}

.chapter-rail {
    grid-area: rail;
    padding-top: 40px;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: clamp(22px, 2.4vw, 34px);
}

.chapter-rail figure {
    margin: 0;
}

/* 4:3 is the shape of the existing archive scans, so it crops nothing. */
.chapter-rail img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* For an upright frame — a portrait, or a sleeve shot worth more height. */
.chapter-rail .tall img {
    aspect-ratio: 4 / 5;
}

/* Album sleeves are square. Let them stay square rather than cropping a
   band out of the middle of the artwork. */
.chapter-rail .square img {
    aspect-ratio: 1 / 1;
}

.chapter-rail figcaption {
    padding-top: 10px;
    display: flex;
    justify-content: space-between;
    gap: 16px;
}

/* A line lifted out of the chapter and set in the margin. Two purposes:
   it gives the rail something to do when a chapter has more words than
   photographs, and it puts the best sentence where someone skimming will
   actually see it. Optional — a chapter with plenty of pictures needs
   none, a thin one might take two. */
.chapter-pull {
    padding-top: 20px;
    border-top: 1px solid var(--rule);
    font-size: 1.0625rem;
    letter-spacing: -0.008em;
    line-height: 1.5;
    text-wrap: pretty;
}

/* For a pull that is somebody else's line rather than one of yours. */
.chapter-pull cite {
    margin-top: 12px;
    display: block;
    color: var(--muted);
    font-size: 0.8125rem;
    font-style: normal;
}

/* -------------------------------------------------------------- contents -- */

/* The front of a book. The least clever navigation device there is, which
   is exactly why it is the right one here: nothing to open, nothing to
   learn, and every chapter visible at once. */
.contents {
    border-top: 1px solid var(--rule);
}

.contents a {
    padding-block: 18px;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 20px;
    border-bottom: 1px solid var(--rule);
    color: inherit;
    text-decoration: none;
    transition: background 160ms ease;
}

.contents a:hover,
.contents a:focus-visible {
    background: var(--fog);
}

.contents-title {
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.008em;
    line-height: 1.3;
}

.chapter-body {
    grid-area: body;
}

/* Full ink, not --muted. Everywhere else on the site .prose runs two or
   three paragraphs and muted reads as quiet; here it runs to thousands of
   words in one sitting, where muted just reads as thin. The labels around
   it stay quiet instead, so the page keeps its hierarchy. */
.chapter-body .prose {
    color: var(--ink);
}

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

.site-footer {
    padding-block: 56px 40px;
    border-top: 1px solid var(--rule);
}

.footer-grid {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 3fr);
    gap: 40px;
}

.footer-grid .label {
    margin-bottom: 16px;
}

.footer-list li + li {
    margin-top: 9px;
}

.footer-list a {
    font-size: 0.9375rem;
    text-decoration: none;
}

.footer-list a:hover,
.footer-list a:focus-visible {
    color: var(--accent);
}

.footer-base {
    margin-top: 48px;
    padding-top: 22px;
    display: flex;
    justify-content: space-between;
    gap: 24px;
    border-top: 1px solid var(--rule);
}

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

@media (max-width: 880px) {
    :root {
        --wrap: min(100% - 32px, 720px);
    }

    .menu-button {
        padding: 8px 0;
        display: inline-flex;
        align-items: center;
        gap: 9px;
        border: 0;
        color: var(--ink);
        background: none;
        font-family: inherit;
        font-size: 0.8125rem;
        font-weight: 600;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        cursor: pointer;
    }

    .menu-lines,
    .menu-lines::before,
    .menu-lines::after {
        width: 18px;
        height: 1.5px;
        display: block;
        content: "";
        background: currentColor;
    }

    .menu-lines {
        position: relative;
    }

    .menu-lines::before {
        position: absolute;
        top: -5px;
    }

    .menu-lines::after {
        position: absolute;
        top: 5px;
    }

    .site-nav {
        position: absolute;
        z-index: 20;
        right: 0;
        left: 0;
        padding: 8px 0 24px;
        display: none;
        align-items: stretch;
        flex-direction: column;
        gap: 0;
        border-bottom: 1px solid var(--rule);
        background: var(--paper);
    }

    .site-nav.is-open {
        display: flex;
    }

    .site-nav a {
        width: var(--wrap);
        margin-inline: auto;
        padding-block: 12px;
        font-size: 1rem;
    }

    .site-nav a::after {
        display: none;
    }

    .split,
    .split-narrow,
    .footer-grid {
        grid-template-columns: 1fr;
    }

    /* Title first, then the reading, then the photographs — rather than a
       stack of pictures wedged between a chapter's heading and its text. */
    .chapter {
        grid-template-columns: 1fr;
        grid-template-areas:
            "head"
            "body"
            "rail";
    }

    /* Stacked, the head would otherwise sit straight on the first line. */
    .chapter-body {
        margin-top: 30px;
    }

    .chapter-rail {
        padding-top: 34px;
    }

    .contents a {
        grid-template-columns: 30px minmax(0, 1fr);
        gap: 4px 16px;
    }

    .contents a .label {
        grid-column: 2;
    }

    .opening {
        min-height: auto;
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .index-row {
        grid-template-columns: 30px minmax(0, 1fr) auto;
        gap: 12px 16px;
    }

    /* The whole row is the link, so the affordance is redundant here. */
    .index-datum,
    .index-arrow {
        display: none;
    }

    .spec-row {
        grid-template-columns: 30px minmax(0, 1fr);
        gap: 4px 16px;
    }

    .spec-row .small {
        grid-column: 2;
    }

    /* Artwork and body side by side; number folded in, buy button below. */
    .entry {
        grid-template-columns: 96px minmax(0, 1fr);
        gap: 20px;
    }

    .entry-num {
        display: none;
    }

    .entry-buy {
        grid-column: 2;
        align-items: flex-start;
        flex-direction: row;
        align-items: center;
        gap: 18px;
    }

    .strings li {
        padding-block: 16px;
        gap: 7px;
    }

    .section-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 16px;
    }

    .footer-base {
        flex-direction: column;
        gap: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
    }
}