/* The home page. */

.splash {
    --deep: #19313e;
    --deeper: #0e1f29;
    --teal: #1f7a8c;
    --aqua: #5fb0b0;
    /* The furthest wave's turquoise, and a paler one: links, and links under the pointer. */
    --foam: #8cc6c4;
    --foam-light: #c6e4e2;
    --gold: #f2b632;
    --sky: #becbd3;

    --wave-height: clamp(3rem, 8cqw, 5.5rem);
    --turbines-width: clamp(13rem, 34cqw, 28rem);
    /* How much of the turbines' height is kept clear below the headline. */
    --turbines-clearance: 1;

    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding-top: var(--topbar-height);
    background: var(--deep);
    /* Layouts respond to the width left beside the sidebar, not to the window. */
    container-type: inline-size;
}

.splash-wrap {
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 6cqw, 5rem);
}

/* As wide as a whole number of the latest list's tiles, 1 to 4, with at least 1.5rem either side, so the hero, the
   text and the list all start and end in line with the list's outer tiles. Tiles are 320px with 16px between them
   (toe-horz-list's default card and gap), as .tile-columns in app.css. Narrower than one tile, the content takes the
   width there is. */
@container (min-width: 368px) {
    .splash-wrap {
        width: 320px;
        padding-inline: 0;
    }
}

@container (min-width: 704px) {
    .splash-wrap {
        width: 656px;
    }
}

@container (min-width: 1040px) {
    .splash-wrap {
        width: 992px;
    }
}

@container (min-width: 1376px) {
    .splash-wrap {
        width: 1328px;
    }
}

.splash h1 {
    max-width: 12em;
    font-size: clamp(2.75rem, 9cqw, 5.5rem);
    line-height: 1;
    letter-spacing: -0.03em;
    text-wrap: balance;
}

.splash h3 {
    margin-bottom: 0.6rem;
    font-size: 1.75rem;
}

.splash-byline {
    margin: 1.5rem 0 0;
    font-family: var(--serif);
    font-size: clamp(1.0625rem, 0.9rem + 0.8cqw, 1.4375rem);
    line-height: 1.5;
}

.splash-sectors {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: var(--sans);
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.9;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.splash-sectors li:not(:last-child)::after {
    content: "\2219";
    margin: 0 0.6em;
}

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

/* Sky: deeper overhead, paling to a bright haze at the horizon. */

.s1-hero {
    position: relative;
    /* Leaves room below the text for the turbines and waves, so they never sit behind it. */
    padding: clamp(1.25rem, 3.5cqw, 2.5rem) 0
        calc(var(--wave-height) * 0.72 + var(--turbines-width) * 0.344 * var(--turbines-clearance) + 1.25rem);
    color: #3a505c;
    background:
        radial-gradient(90% 60% at 68% 100%, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 70%),
        linear-gradient(180deg, #a7bac5 0%, var(--sky) 45%, #e3eaed 100%);
    overflow: hidden;
}

.s1-hero h1 {
    margin-top: clamp(4.5rem, 15cqw, 11rem);
    color: var(--deep);
}

.s1-hero h1::before {
    content: "";
    display: block;
    width: 3.5rem;
    height: 5px;
    margin-bottom: 1.5rem;
    background: var(--gold);
}

.s1-hero .splash-sectors {
    color: var(--deep);
}

/* Stands on the horizon: the tower bases are hidden behind the furthest wave. */
.s1-turbines {
    position: absolute;
    right: clamp(0.5rem, 5cqw, 5rem);
    bottom: calc(var(--wave-height) * 0.72);
    width: var(--turbines-width);
    /* Lets the towers run on down behind the waves. */
    overflow: visible;
}

/* Wheels around the upper half of the turbines and the sky just above them. */
.s1-birds {
    position: absolute;
    right: clamp(0.5rem, 5cqw, 5rem);
    bottom: calc(var(--wave-height) * 0.72 + var(--turbines-width) * 0.19);
    width: var(--turbines-width);
    fill: none;
    stroke: var(--deep);
    stroke-width: 1.2px;
    stroke-linecap: round;
    stroke-opacity: 0.75;
}

.s1-birds path {
    vector-effect: non-scaling-stroke;
}

/* With room to spare, the headline drops down beside the turbines instead of stopping above them. */
@container (min-width: 1200px) {
    .s1-hero {
        --turbines-clearance: 0.45;
    }
}

.s1-waves {
    position: absolute;
    inset: auto 0 -1px 0;
    height: var(--wave-height);
}

.s1-waves svg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 200%;
    height: 100%;
    animation: s1-drift 40s linear infinite;
}

/* Furthest to nearest, each darker and faster than the last, drifting in alternating directions. */
.s1-waves .s1-wave-1 {
    fill: var(--foam);
    animation-duration: 90s;
}

.s1-waves .s1-wave-2 {
    fill: var(--aqua);
    animation-duration: 70s;
    animation-direction: reverse;
}

.s1-waves .s1-wave-3 {
    fill: #3a94a0;
    animation-duration: 56s;
}

.s1-waves .s1-wave-4 {
    fill: var(--teal);
    animation-duration: 44s;
    animation-direction: reverse;
}

.s1-waves .s1-wave-5 {
    fill: var(--deep);
    animation-duration: 36s;
}

@keyframes s1-drift {
    to {
        transform: translateX(-50%);
    }
}

/* Sea: dark, below the waves. */

.s1-body {
    flex: 1;
    padding: clamp(2rem, 5cqw, 3.5rem) 0 clamp(3rem, 8cqw, 6rem);
    color: #d5e1e5;
    background: linear-gradient(180deg, var(--deep) 0%, var(--deeper) 100%);
}

.s1-body a {
    color: var(--foam);
}

.s1-body a:hover {
    color: var(--foam-light);
}

/* The opening text, as wide as the about card below it: two paragraphs under a gold rule, set apart by their size and
   colour rather than their weight, which is the page's reading text's. */
.s1-lede {
    margin: 0;
    font-family: var(--serif);
    font-size: clamp(1.125rem, 0.95rem + 0.7cqw, 1.5rem);
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: -0.01em;
    color: #fff;
    text-wrap: pretty;
}

.s1-lede + .s1-lede {
    margin-top: 1em;
}

.s1-lede:first-child::before {
    content: "";
    display: block;
    width: 3.5rem;
    height: 4px;
    margin-bottom: 1.5rem;
    background: var(--gold);
}

/* About: a pale card, its portrait bleeding to its left edge (above, when narrow), and "Get in touch" a button. The
   card itself has no background, only its text side: one behind the portrait would show at its rounded corners. */
.s1-about {
    display: grid;
    margin-top: clamp(2.5rem, 6cqw, 4.5rem);
    overflow: hidden;
    color: var(--ink);
    border-radius: 8px;
    box-shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.7);
}

.s1-about-photo {
    position: relative;
    aspect-ratio: 4 / 3;
}

.s1-about-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 22%;
}

.s1-about-text {
    padding: clamp(1.5rem, 4cqw, 3rem);
    background: #f7fafb;
}

.s1-about-text p {
    max-width: 46rem;
}

.splash .s1-about-kicker {
    margin-bottom: 0.4rem;
    font-family: var(--sans);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--teal);
}

.splash .s1-about h3 {
    font-size: clamp(1.75rem, 1.4rem + 1cqw, 2.25rem);
    color: var(--deep);
}

.s1-about-aka {
    font-size: 1.125rem;
    color: var(--primary);
}

.s1-about-aka i {
    color: var(--teal);
}

.s1-about-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    margin-top: 1.75rem;
    color: var(--muted);
}

/* White, over the sea's turquoise links. */
.s1-body .s1-about-cta .button {
    color: #fff;
}

@container (min-width: 704px) {
    .s1-about {
        grid-template-columns: minmax(15rem, 2fr) 5fr;
    }

    .s1-about-photo {
        aspect-ratio: auto;
        min-height: 22rem;
    }
}

/* The latest content list, drawn light on the dark sea. */

.s1-latest {
    margin-top: clamp(2.5rem, 6cqw, 4.5rem);
    margin-bottom: 0;
}

.s1-latest .thl-title {
    color: #fff;
}

.s1-latest .thl-filter,
.s1-latest .ttp-add {
    color: #d5e1e5;
    background: transparent;
    border-color: rgba(213, 225, 229, 0.35);
}

.s1-latest .thl-filter:hover,
.s1-latest .ttp-add:hover {
    border-color: var(--aqua);
}

.s1-latest .ttp-open .ttp-add {
    color: var(--deep);
    background: var(--sky);
    border-color: var(--sky);
}

.s1-latest .thl-filter-icon {
    color: #9fb3bc;
}

.s1-latest .thl-filter[aria-pressed="true"] {
    color: var(--deep);
    background: var(--sky);
    border-color: var(--sky);
}

.s1-latest .thl-filter[aria-pressed="true"]:hover {
    background: #fff;
}

.s1-latest .thl-counter,
.s1-latest .thl-message {
    color: #9fb3bc;
}

.s1-latest .thl-placeholder {
    background: linear-gradient(90deg, #1d3846 0%, #274a5a 50%, #1d3846 100%) 0 0 / 200% 100%;
}

/* The arrows in the sky's colour, as the site's usual dark ones would vanish into the sea. */
.s1-latest .thl-arrow {
    color: var(--deep);
    background: var(--sky);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.s1-latest .thl-arrow:hover {
    background: #fff;
}

/* The subscriber content switch above the latest list, drawn light on the dark sea like it. */
.s1-body .switch-track {
    background: rgba(213, 225, 229, 0.35);
}

@media (prefers-reduced-motion: reduce) {
    .s1-waves svg {
        animation: none;
    }
}