/* ==========================================================================
   Kranea Oysters — public site stylesheet
   Plain CSS, no build step. Loaded by resources/views/layouts/site.blade.php.

   1. Fonts            6. Buttons & links     11. Home
   2. Tokens           7. Header & navigation 12. The Farm
   3. Base             8. Footer              13. Blog
   4. Layout           9. Photos              14. Contact & map
   5. Type & rich text 10. Page head & pills

   Mobile first. Breakpoints: 600px (small tablets), 900px (two columns),
   1024px (desktop navigation).
   ========================================================================== */

/* 1. Fonts ----------------------------------------------------------------
   Self-hosted subsets (SIL Open Font License). Forum has a single weight;
   Montserrat is a variable font covering 100–900. */

@font-face {
    font-family: 'Forum';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/site/forum-cyrillic-ext.woff2') format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
    font-family: 'Forum';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/site/forum-cyrillic.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: 'Forum';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/site/forum-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Forum';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/site/forum-latin.woff2') format('woff2');
    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: 'Montserrat';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/site/montserrat-cyrillic-ext.woff2') format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/site/montserrat-cyrillic.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/site/montserrat-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/site/montserrat-latin.woff2') format('woff2');
    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;
}

/* 2. Tokens --------------------------------------------------------------- */

:root {
    /* Brand colours, taken from logo-full.svg */
    --navy: #1b2c5d;
    --navy-hover: #2a3f7e;
    --blue: #426ab3;

    /* Text */
    --text: #3a4664;
    --muted: #5e6b88;

    /* Surfaces and lines */
    --white: #fff;
    --mist: #eef4f8;
    --mist-strong: #eaf1f7;
    --line: #d5dfea;
    --line-soft: #e3eaf2;
    --control-border: #c5d2e1;

    /* On the navy footer */
    --on-navy: #dce3f2;
    --on-navy-muted: #b9c4dd;

    --font-display: 'Forum', Georgia, 'Times New Roman', serif;
    --font-body: 'Montserrat', 'Segoe UI', system-ui, -apple-system, sans-serif;

    --container: 75rem;                      /* 1200px of content */
    --gutter: clamp(1.5rem, 5vw, 4rem);      /* 24px on phones → 64px */
    --header-height: 4.5rem;                 /* 72px; 96px from 1024px up */
    --radius: 0.5rem;

    --mark: url('../img/brand/oyster-mark.svg');

    /* Corner ripple (.section--ripple and its continuation in the footer),
       drawn only on windows 1000px or wider: width of the mark, how far it
       starts left of the page edge, and how far it hangs below the section
       into the footer. */
    --ripple-width: 32vw;
    --ripple-left: -6.4vw;
    --ripple-drop: 7vw;
}

/* 3. Base ----------------------------------------------------------------- */

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

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

body {
    margin: 0;
    background: var(--white);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
    /* Montserrat ships alternative Bulgarian letterforms that switch on with
       <html lang="bg">. They are turned off so Cyrillic looks the same in
       Bulgarian and Russian; delete this line to get the Bulgarian forms. */
    font-feature-settings: 'locl' 0;
}

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

ul {
    padding: 0;
    list-style: none;
}

img,
svg {
    max-width: 100%;
    height: auto;
}

a {
    color: var(--blue);
    transition: color 0.15s ease;
}

a:hover {
    color: var(--navy);
}

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

.icon {
    display: block;
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* 4. Layout --------------------------------------------------------------- */

.container {
    width: 100%;
    max-width: calc(var(--container) + 2 * var(--gutter));
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.section {
    padding-block: clamp(3.5rem, 8vw, 7rem);
}

.section--tint {
    background: var(--mist);
}

/* Decorative photos and marks may bleed past the edge of their section. */
.section--clip {
    overflow: hidden;
}

/* Two equal columns from 900px; a single stacked column below. */
.split {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 3rem;
    align-items: center;
}

@media (min-width: 900px) {
    .split {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4.5rem;
    }
}

/* 5. Type & rich text ------------------------------------------------------ */

.eyebrow {
    color: var(--blue);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    line-height: 1.4;
    text-transform: uppercase;
}

/* Content written in the admin's CKEditor. It arrives with inline
   font-family / font-size styles on spans; those are neutralised here so the
   text always follows the site typography. Set sizes on the .rich-text
   container (or a modifier), never on the paragraphs themselves. */
.rich-text {
    font-size: clamp(1rem, 0.977rem + 0.1vw, 1.0625rem);
    line-height: 1.8;
}

.rich-text :is(p, span, strong, b, em, i, li, a, font) {
    font-family: inherit !important;
    font-size: inherit !important;
}

.rich-text > * + * {
    margin-top: 1.25em;
}

.rich-text p {
    max-width: 35rem;
    text-wrap: pretty;
}

.rich-text p:empty {
    display: none;
}

.rich-text :is(h1, h2, h3) {
    margin-bottom: 0.5rem;
    color: var(--navy);
    font-family: var(--font-display);
    font-weight: 400;
    text-wrap: balance;
}

.rich-text :is(h1, h2, h3) :is(strong, b) {
    font-weight: inherit;
}

.rich-text h1 {
    font-size: clamp(2.625rem, 2.02rem + 2.48vw, 4.25rem);
    line-height: 1.05;
}

.rich-text h2 {
    font-size: clamp(1.8125rem, 1.556rem + 1.05vw, 2.5rem);
    line-height: 1.16;
}

.rich-text h3 {
    font-size: 1.5rem;
    line-height: 1.25;
}

.rich-text ul,
.rich-text ol {
    padding-left: 1.25em;
    list-style: revert;
}

.rich-text li + li {
    margin-top: 0.35em;
}

.rich-text li::marker {
    color: var(--blue);
}

/* Slightly smaller page heading for long titles (The Farm). */
.rich-text--compact h1 {
    font-size: clamp(2.375rem, 1.91rem + 1.9vw, 3.625rem);
    line-height: 1.08;
}

/* Larger running text for the short feature paragraphs on the home page. */
.rich-text--lead {
    font-size: clamp(1.0625rem, 1.016rem + 0.19vw, 1.1875rem);
    line-height: 1.75;
}

/* A paragraph set as a centred statement in the display face. */
.rich-text--statement {
    color: var(--navy);
    font-family: var(--font-display);
    font-size: clamp(1.4375rem, 1.252rem + 0.76vw, 1.9375rem);
    line-height: 1.42;
    text-align: center;
}

.rich-text--statement p {
    max-width: 55rem;
    margin-inline: auto;
    text-wrap: balance;
}

/* 6. Buttons & links ------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3.375rem;
    padding: 0 2.25rem;
    border: 0;
    border-radius: 999px;
    background: var(--navy);
    color: var(--white);
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.btn:hover {
    background: var(--navy-hover);
    color: var(--white);
}

.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    min-height: 2.75rem;
    color: var(--navy);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    line-height: 1.2;
    text-decoration: none;
    text-transform: uppercase;
}

.link-arrow:hover {
    color: var(--blue);
}

.actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
}

.actions .link-arrow {
    justify-content: center;
    min-height: 3rem;
}

@media (min-width: 600px) {
    .actions {
        flex-flow: row wrap;
        align-items: center;
        gap: 0.75rem 2rem;
    }
}

/* 7. Header & navigation --------------------------------------------------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--white);
    border-bottom: 1px solid var(--line-soft);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: var(--header-height);
}

.site-logo {
    display: flex;
    align-items: center;
    min-height: 3.5rem;
}

.site-logo img {
    display: block;
    width: 6.5rem;
}

.nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    margin-right: -0.625rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--navy);
    cursor: pointer;
}

.nav-toggle .icon {
    width: 1.625rem;
    height: 1.625rem;
    stroke-width: 1.8;
}

.nav-toggle__close,
.nav-open .nav-toggle__open {
    display: none;
}

.nav-open .nav-toggle__close {
    display: block;
}

.site-nav__link,
.lang-switch__item {
    text-decoration: none;
}

/* Below 1024px the navigation is a full-screen panel under the header. */
@media (max-width: 1023.98px) {
    /* Lock page scroll while the panel is open. Only on <html>: putting
       overflow on <body> as well would un-stick the sticky header. */
    .nav-open {
        overflow: hidden;
    }

    .site-nav {
        position: fixed;
        inset: calc(var(--header-height) + 1px) 0 0;
        display: none;
        flex-direction: column;
        padding: 1.25rem var(--gutter) 2.5rem;
        overflow-y: auto;
        overscroll-behavior: contain;
        /* The oyster mark at half strength, bottom right. */
        background:
            linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)),
            var(--mark) no-repeat right -10.5rem bottom -9.5rem / 27.5rem auto,
            var(--white);
    }

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

    .site-nav__link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        min-height: 4.75rem;
        border-bottom: 1px solid var(--line-soft);
        color: var(--navy);
        font-family: var(--font-display);
        font-size: 2.375rem;
        line-height: 1.1;
    }

    .site-nav__link.is-active {
        color: var(--blue);
    }

    .site-nav__link.is-active::after {
        content: '';
        flex: none;
        width: 0.625rem;
        height: 0.625rem;
        border-radius: 50%;
        background: currentColor;
    }

    .lang-switch {
        display: flex;
        flex-wrap: wrap;
        gap: 0.625rem;
        padding-top: 2rem;
    }

    .lang-switch__item {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 3.5rem;
        height: 2.75rem;
        border: 1px solid var(--control-border);
        border-radius: 999px;
        background: var(--white);
        color: var(--navy);
        font-size: 0.8125rem;
        font-weight: 600;
        letter-spacing: 0.1em;
    }

    .lang-switch__item.is-active {
        border-color: var(--navy);
        background: var(--navy);
        color: var(--white);
        font-weight: 700;
    }

    .site-nav__contact {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding-top: 1.75rem;
    }

    .site-nav__contact a {
        display: flex;
        align-items: center;
        min-height: 2.75rem;
        color: var(--navy);
        font-weight: 500;
        text-decoration: none;
    }
}

@media (min-width: 1024px) {
    :root {
        --header-height: 6rem;
    }

    .site-header {
        position: static;
    }

    .site-logo img {
        width: 8.25rem;
    }

    .nav-toggle,
    .site-nav__contact {
        display: none;
    }

    .site-nav,
    .site-nav__links {
        display: flex;
        align-items: center;
        gap: 2.25rem;
    }

    .site-nav__link {
        display: flex;
        align-items: center;
        min-height: 2.75rem;
        border-bottom: 2px solid transparent;
        color: var(--muted);
        font-size: 0.8125rem;
        font-weight: 600;
        letter-spacing: 0.14em;
        line-height: 1.2;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .site-nav__link:hover {
        color: var(--blue);
    }

    .site-nav__link.is-active {
        border-bottom-color: var(--navy);
        color: var(--navy);
    }

    .lang-switch {
        display: flex;
        align-items: center;
        gap: 0.125rem;
        padding-left: 1.625rem;
        border-left: 1px solid var(--line);
    }

    .lang-switch__item {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 2.5rem;
        height: 2.75rem;
        color: var(--muted);
        font-size: 0.75rem;
        font-weight: 500;
        letter-spacing: 0.1em;
    }

    .lang-switch__item:hover {
        color: var(--blue);
    }

    .lang-switch__item.is-active {
        color: var(--navy);
        font-weight: 700;
    }
}

/* 8. Footer ---------------------------------------------------------------- */

.site-footer {
    /* The oyster mark, toned down with a navy veil, bottom right. */
    background:
        linear-gradient(rgba(27, 44, 93, 0.55), rgba(27, 44, 93, 0.55)),
        var(--mark) no-repeat right -9.5rem bottom -9.5rem / 26.25rem auto,
        var(--navy);
    color: var(--white);
}

.site-footer__inner {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    padding-block: 3.5rem 9.5rem;
}

/* Variant for a page whose last section is a .section--ripple (the home
   page): the same mark is drawn again at the top of the footer, in white,
   placed so its lines carry on exactly where the section cut them off.
   Like the section's ripple, it is not shown below 1000px. */
@media (min-width: 1000px) {
    .site-footer--ripple {
        position: relative;
        overflow: hidden;
    }

    .site-footer--ripple::before {
        content: '';
        position: absolute;
        /* the part of the mark that hangs below the section, minus its height */
        top: calc(var(--ripple-drop) - var(--ripple-width) * 162 / 234);
        left: var(--ripple-left);
        width: var(--ripple-width);
        aspect-ratio: 234 / 162;
        background: var(--mark) no-repeat center / contain;
        filter: brightness(0) invert(1);   /* turns the coloured mark white */
        opacity: 0.55;
        transform: scaleX(-1);
        /* the lines dissolve before they reach the footer logo */
        -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 91%);
        mask-image: linear-gradient(to bottom, #000 78%, transparent 91%);
        pointer-events: none;
    }

    .site-footer--ripple .site-footer__inner {
        position: relative;
    }
}

.site-footer__logo {
    display: block;
    align-self: flex-start;
}

.site-footer__logo img {
    display: block;
    width: 8.75rem;
}

.footer-col {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    min-width: 9.5rem;
}

/* On phones the social links close the footer. */
.footer-col--social {
    order: 1;
}

.footer-col__title {
    color: var(--on-navy-muted);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    line-height: 1.4;
    text-transform: uppercase;
}

.footer-list {
    display: flex;
    flex-direction: column;
    color: var(--on-navy);
    line-height: 1.5;
}

.footer-list--menu {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1rem;
}

.footer-list a {
    display: flex;
    align-items: center;
    min-height: 2.75rem;
    color: inherit;
    text-decoration: none;
}

.footer-list a:hover {
    color: var(--white);
}

.footer-list--address {
    gap: 0.375rem;
}

.social {
    display: flex;
    gap: 0.75rem;
}

.social__link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    color: var(--on-navy);
}

.social__link:hover {
    border-color: var(--white);
    color: var(--white);
}

.social__link .icon {
    stroke-width: 1.7;
}

/* The same buttons on a light background (contact page). */
.social--light .social__link {
    border-color: var(--control-border);
    color: var(--navy);
}

.social--light .social__link:hover {
    border-color: var(--navy);
    color: var(--navy);
}

@media (min-width: 900px) {
    .site-footer {
        background:
            linear-gradient(rgba(27, 44, 93, 0.55), rgba(27, 44, 93, 0.55)),
            var(--mark) no-repeat right -8.75rem bottom -18.75rem / 40rem auto,
            var(--navy);
    }

    .site-footer__inner {
        flex-flow: row wrap;
        justify-content: space-between;
        gap: 3rem 2.5rem;
        padding-block: 5rem 8rem;
    }

    .site-footer__logo img {
        width: 9.75rem;
    }

    .footer-col {
        gap: 1.125rem;
    }

    .footer-col--social {
        order: 0;
    }

    .footer-list {
        font-size: 0.9375rem;
    }

    .footer-list--menu {
        display: flex;
    }

    .footer-list a {
        min-height: 2.25rem;
    }

    .footer-list--address {
        gap: 0.625rem;
        padding-top: 0.4375rem;
    }

    .social__link {
        width: 2.75rem;
        height: 2.75rem;
    }

    .social__link .icon {
        width: 1.125rem;
        height: 1.125rem;
    }
}

/* 9. Photos ---------------------------------------------------------------- */

.photo {
    display: block;
    width: 100%;
    border-radius: var(--radius);
    object-fit: cover;
}

.photo--portrait {
    aspect-ratio: 5 / 6;
}

.photo--landscape {
    aspect-ratio: 4 / 3;
}

/* A photo with a pale block peeking out behind its bottom-right corner. */
.photo-offset {
    position: relative;
}

.photo-offset::before {
    content: '';
    position: absolute;
    right: -0.875rem;
    bottom: -0.875rem;
    width: 62%;
    height: 62%;
    border-radius: var(--radius);
    background: var(--mist-strong);
}

.photo-offset .photo {
    position: relative;
}

@media (min-width: 900px) {
    .photo-offset::before {
        right: -1.75rem;
        bottom: -1.75rem;
    }
}

/* Round photos. The home-page pictures are already circles on a white square,
   so the image is scaled up 15.6% to crop the white corners away. */
.photo-circle {
    position: relative;
    width: min(100%, 18.75rem);
    margin-inline: auto;
}

.photo-circle__crop {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 50%;
}

.photo-circle__crop img {
    position: absolute;
    top: -7.7%;
    left: -7.7%;
    width: 115.6%;
    max-width: none;
    height: 115.6%;
    object-fit: cover;
}

/* Variant: a thin ring around the photo. */
.photo-circle--ring {
    padding: 0.875rem;
    border: 1px solid var(--line);
    border-radius: 50%;
}

/* Variant: a soft shadow under the photo. */
.photo-circle--shadow .photo-circle__crop {
    box-shadow: 0 1.5rem 3rem -1.5rem rgba(27, 44, 93, 0.35);
}

@media (min-width: 900px) {
    .photo-circle {
        width: min(100%, 27.5rem);
    }

    .photo-circle--ring {
        padding: 1.125rem;
    }

}

/* 10. Page head & pills ---------------------------------------------------- */

.page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem 3rem;
    padding-block: 2.75rem 2.25rem;
}

.page-title {
    color: var(--navy);
    font-family: var(--font-display);
    font-size: clamp(2.875rem, 2.364rem + 2.1vw, 4.25rem);
    font-weight: 400;
    line-height: 1.04;
}

.categories {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.625rem 0.75rem;
}

.categories__label {
    width: 100%;
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    line-height: 1.4;
    text-transform: uppercase;
}

.pill {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    min-height: 2.75rem;
    padding: 0 1.375rem;
    border: 1px solid var(--control-border);
    border-radius: 999px;
    background: var(--white);
    color: var(--navy);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    transition: border-color 0.15s ease;
}

.pill:hover {
    border-color: var(--navy);
    color: var(--navy);
}

.pill__count {
    color: var(--muted);
    font-weight: 500;
}

.pill.is-active {
    border-color: var(--navy);
    background: var(--navy);
    color: var(--white);
}

.pill.is-active .pill__count {
    color: var(--on-navy-muted);
}

@media (min-width: 900px) {
    .page-head {
        padding-block: 4.5rem 3rem;
    }

    .categories__label {
        width: auto;
        padding-right: 0.5rem;
    }
}

/* 11. Home ----------------------------------------------------------------- */

/* The oyster photo keeps the size and place it had on the old site: as wide
   as the old 1110px container, centred, straight under the header. The title
   and intro text sit below it, centred on the same axis. */
.hero {
    padding-bottom: 3.5rem;
}

/* Edge to edge on phones, so the oyster stays large. */
.hero__photo {
    display: block;
    width: calc(100% + 2 * var(--gutter));
    max-width: none;
    margin-inline: calc(-1 * var(--gutter));
}

.hero__copy {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding-top: 1rem;
}

.hero__copy .actions {
    padding-top: 0.5rem;
}

.feature--spat {
    padding-top: 2.5rem;
}

/* The oyster mark as ripples in the lower-left corner of a tinted section.
   It is mirrored so the bright blue outer rings face into the page, and sized
   with the viewport. Use together with .section--tint and .section--clip.
   Not shown on windows narrower than 1000px. */
@media (min-width: 1000px) {
    .section--ripple {
        position: relative;
    }

    .section--ripple::before {
        content: '';
        position: absolute;
        bottom: calc(-1 * var(--ripple-drop));
        left: var(--ripple-left);
        width: var(--ripple-width);
        aspect-ratio: 234 / 162;
        background: var(--mark) no-repeat center / contain;
        opacity: 0.6;
        transform: scaleX(-1);
        pointer-events: none;
    }

    .section--ripple > .container {
        position: relative;
    }

    /* A long text can reach down to the ripples. A soft halo in the section
       colour makes the lines fade out there instead of crossing the text. */
    .section--ripple .rich-text {
        background: var(--mist);
        box-shadow: 0 0 2rem 1.5rem var(--mist);
    }
}

@media (min-width: 600px) {
    .hero__photo {
        width: min(100%, 69.375rem);
        margin-inline: auto;
    }

    .hero__copy {
        align-items: center;
        text-align: center;
    }

    .hero__copy .rich-text h1 {
        max-width: 16em;
        margin-inline: auto;
    }

    .hero__copy .rich-text p {
        max-width: 43rem;
        margin-inline: auto;
    }

    .hero__copy .actions {
        justify-content: center;
    }
}

@media (min-width: 900px) {
    .hero {
        padding-bottom: 5.5rem;
    }

    .hero__copy {
        gap: 1.75rem;
        padding-top: 0.5rem;
    }

    .feature--spat {
        padding-top: 1.5rem;
    }
}

/* 12. The Farm ------------------------------------------------------------- */

.farm-intro {
    padding-block: 2.75rem 4.5rem;
}

.farm-intro__copy {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.farm-banner img {
    display: block;
    width: 100%;
    height: clamp(18.75rem, 42vw, 38.75rem);
    object-fit: cover;
    object-position: 50% 58%;
}

.statement__inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1.75rem;
}

.statement__mark {
    display: block;
    align-self: center;
    width: 6rem;
}

@media (min-width: 600px) {
    .statement__inner {
        align-items: center;
    }
}

@media (min-width: 900px) {
    .farm-intro {
        padding-block: 4.5rem 6.5rem;
    }

    .farm-intro__copy {
        gap: 1.75rem;
    }

    .statement__inner {
        gap: 2.25rem;
    }

    .statement__mark {
        width: 7.5rem;
    }
}

/* 13. Blog ----------------------------------------------------------------- */

.post-grid {
    display: grid;
    gap: 3.5rem 3rem;
    padding-bottom: 5rem;
}

.post-card {
    display: flex;
    flex-direction: column;
    gap: 1.125rem;
}

.post-card__image {
    display: block;
    overflow: hidden;
    border-radius: var(--radius);
    text-decoration: none;
}

.post-card__image > img {
    display: block;
    width: 100%;
    aspect-ratio: 690 / 510;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.post-card__image:hover > img {
    transform: scale(1.03);
}

/* Shown where a post has no photo yet (partials/photo_placeholder). */
.photo-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.125rem;
    aspect-ratio: 690 / 510;
    padding: 1rem;
    border-radius: var(--radius);
    background: var(--mist);
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    line-height: 1.4;
    text-align: center;
    text-transform: uppercase;
}

.photo-placeholder img {
    display: block;
    width: min(34%, 8.5rem);
}

.post-card__title {
    font-family: var(--font-display);
    font-size: clamp(1.875rem, 1.78rem + 0.38vw, 2.125rem);
    font-weight: 400;
    line-height: 1.14;
}

.post-card__title a {
    color: var(--navy);
    text-decoration: none;
}

.post-card__title a:hover {
    color: var(--blue);
}

.post-card__excerpt {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
}

.post-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.375rem 1.25rem;
}

.post-meta__category {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    color: var(--blue);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    line-height: 1.4;
    text-decoration: none;
    text-transform: uppercase;
}

.post-meta__info {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    color: var(--muted);
    font-size: 0.8125rem;
    line-height: 1.4;
}

.post-meta__views {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
}

.post-meta__views .icon {
    width: 1.125rem;
    height: 1.125rem;
}

/* Single post. On desktop the photo and categories sit in the left column
   while the header and text run down the right one. */
.post-back {
    padding-top: 1.25rem;
}

.post {
    display: grid;
    gap: 1.5rem;
    padding-block: 0.75rem 4.5rem;
}

.post__header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
}

.post__title {
    color: var(--navy);
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 2.129rem + 1.52vw, 3.5rem);
    font-weight: 400;
    line-height: 1.06;
    text-wrap: balance;
}

.post__header .post-meta__info {
    font-size: 0.875rem;
}

.post__figure > img {
    display: block;
    width: 100%;
    border-radius: var(--radius);
}

.post__body > * + * {
    margin-top: 0.875em;
}

.post__categories {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--line);
}

.post__categories .categories__label {
    width: 100%;
    padding-right: 0;
}

@media (min-width: 700px) {
    .post-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 900px) {
    .post-grid {
        gap: 4rem 3rem;
        padding-bottom: 8rem;
    }

    .post-card {
        gap: 1.375rem;
    }

    .post-back {
        padding-top: 2.5rem;
    }

    .post {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: auto auto 1fr;
        grid-template-areas:
            'figure header'
            'figure body'
            'categories body';
        gap: 2rem 4.5rem;
        padding-block: 1.75rem 8rem;
    }

    .post__header {
        grid-area: header;
        gap: 1.5rem;
        padding-bottom: 1.5rem;
        border-bottom: 1px solid var(--line);
    }

    .post__header .post-meta__info {
        gap: 1.5rem;
    }

    .post__figure {
        grid-area: figure;
    }

    .post__body {
        grid-area: body;
    }

    .post__categories {
        grid-area: categories;
        align-self: start;
        margin-top: 1rem;
    }
}

/* 14. Contact & map -------------------------------------------------------- */

.contact {
    display: grid;
    gap: 2.5rem;
    padding-block: 2.75rem 3.5rem;
}

.contact__intro {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.contact__intro p {
    max-width: 31.25rem;
    font-size: clamp(1rem, 0.977rem + 0.1vw, 1.0625rem);
    line-height: 1.8;
    text-wrap: pretty;
}

.contact-details {
    max-width: 31.25rem;
    border-top: 1px solid var(--line);
}

.contact-details__row {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding-block: 0.875rem;
    border-bottom: 1px solid var(--line);
}

.contact-details__label {
    flex: none;
    width: 7.5rem;
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    line-height: 1.4;
    text-transform: uppercase;
}

.contact-details__value {
    color: var(--navy);
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.5;
}

.contact-details__value > a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    color: inherit;
    text-decoration: none;
}

.contact-details__value > a:hover {
    color: var(--blue);
}

.contact-details__value--text {
    padding-block: 0.375rem;
    font-size: 1rem;
    font-weight: 400;
}

.contact-details .social {
    padding-block: 0.5rem 0.25rem;
}

/* The form is a full-bleed tinted band on phones and a card from 900px. */
.form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-inline: calc(-1 * var(--gutter));
    padding: 2.25rem var(--gutter) 2.75rem;
    background: var(--mist);
}

.form__row {
    display: grid;
    gap: 1.25rem;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.field__label {
    color: var(--navy);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.4;
}

.field__input {
    width: 100%;
    min-height: 3.25rem;
    padding: 0 1rem;
    border: 1px solid var(--control-border);
    border-radius: var(--radius);
    background: var(--white);
    color: var(--navy);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.6;
}

textarea.field__input {
    min-height: 10rem;
    padding-block: 0.875rem;
    resize: vertical;
}

.field__input:focus {
    border-color: var(--blue);
    outline: 2px solid var(--blue);
    outline-offset: 1px;
}

.form__footer {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding-top: 0.25rem;
}

/* The anti-spam sum, e.g. “7+3=”, with its answer box. */
.captcha {
    display: flex;
    align-items: center;
    gap: 0.875rem;
}

.captcha__label {
    color: var(--navy);
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    white-space: nowrap;
}

.captcha__input {
    width: 5.5rem;
    text-align: center;
}

.alert {
    padding: 0.875rem 1.125rem;
    border: 1px solid;
    border-radius: var(--radius);
    font-size: 0.9375rem;
    line-height: 1.6;
}

.alert--success {
    border-color: #b9dfc9;
    background: #e6f4ec;
    color: #17573a;
}

@media (min-width: 600px) {
    .form__row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .form__footer {
        flex-flow: row wrap;
        align-items: center;
        justify-content: space-between;
    }

    .form__footer .btn {
        padding-inline: 3rem;
    }

    .contact-details__row {
        flex-direction: row;
        align-items: center;
        gap: 0.25rem 1.5rem;
        min-height: 4.25rem;
        padding-block: 0.625rem;
    }
}

@media (min-width: 900px) {
    .contact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: auto 1fr;
        grid-template-areas:
            'intro form'
            'details form';
        gap: 2.5rem 4.5rem;
        padding-block: 4.5rem 7rem;
    }

    .contact__intro {
        grid-area: intro;
        gap: 1.75rem;
    }

    .contact-details {
        grid-area: details;
        align-self: start;
        width: 100%;
    }

    .form {
        grid-area: form;
        align-self: start;
        gap: 1.375rem;
        margin-inline: 0;
        padding: clamp(1.5rem, 4vw, 3rem);
        border-radius: 0.75rem;
    }
}

/* Leaflet map. z-index: 0 keeps Leaflet's own layers below the sticky header
   and the mobile navigation panel. */
.map {
    position: relative;
    z-index: 0;
    height: 22.5rem;
    background: var(--mist);
}

.map.leaflet-container {
    font-family: var(--font-body);
}

.map-marker {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5.25rem;
    height: 5.25rem;
    border-radius: 50%;
    background: var(--white);
    box-shadow: 0 0.625rem 1.5rem -0.625rem rgba(27, 44, 93, 0.5);
}

.map-marker img {
    display: block;
    width: 3.875rem;
}

.map .leaflet-popup-content-wrapper {
    border-radius: var(--radius);
    box-shadow: 0 0.75rem 1.75rem -0.75rem rgba(27, 44, 93, 0.45);
}

.map .leaflet-popup-content {
    margin: 0.875rem 1.25rem;
    color: var(--navy);
    font-size: 0.875rem;
    line-height: 1.5;
}

.map .leaflet-popup-content p {
    margin: 0;
}

.map-popup__title {
    font-weight: 600;
}

.map .leaflet-popup-content a {
    display: inline-flex;
    align-items: center;
    min-height: 1.75rem;
    color: var(--blue);
    font-weight: 500;
}

@media (min-width: 900px) {
    .map {
        height: 30rem;
    }
}

/* Respect a reduced-motion preference. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition: none !important;
    }
}