/* ═══════════════════════════════════════════════════════════════
   THE PHONE — Beyond Olives
   ───────────────────────────────────────────────────────────────
   Loaded after legibility.css, and last of all, because most of
   what it does is correct something a page already said about
   itself. Nothing here is a redesign; it is the site meeting the
   one screen it is most often read on.

   Five things are being fixed. The first four are the phone as a
   device; the fifth, in section 8, is the page as something read on
   one — and it is the one that matters most.

   THE EDGES. The pages declare viewport-fit=cover, so the
   photography now runs under the notch and past the home
   indicator, which is where full-bleed photography wants to be.
   The type must not follow it there. Everything fixed to an edge
   — the wordmark bar, the section strip, the menu, the foot of
   the page — is pushed back inside the safe area, and because the
   insets are written as max() against the padding that was
   already there, nothing moves at all on a screen that has no
   notch to clear. This matters most when the site is saved to the
   Home Screen: the manifest asks for standalone display, and in
   standalone there is no browser chrome to hide behind.

   THE TARGETS. A finger is about 44px wide. Several things worth
   tapping here were half that — the section strip's tabs at 35px,
   the menu button at 31px, the footer's index at 20px a line.
   They gain height without gaining ink: the type stays where it
   is and the tappable box grows around it.

   THE SMALL PRINT. The quietest type on the site — the scroll
   cue, the place line, the lettering inside the buttons — was set
   between 8.6px and 9.9px. That is a size that works on a desk
   and disappears in daylight on a phone. It comes up to eleven.

   THE ABSENT MOUSE. iOS has no hover, so it fakes one: the last
   thing tapped keeps its :hover state until something else is
   tapped. On this site that left menu items indented and images
   held at 1.04 scale, and it let the section strip's dropdowns
   open on a phantom hover and then fight the tap that was
   supposed to open them. Under (hover: none) those effects stand
   down and the tap alone decides.

   THE READING. Section 8, described where it begins. The type on
   this site was set for a column twice as wide as a phone gives it,
   and centred; at this measure that costs more legibility than any
   of the four above.
   ═══════════════════════════════════════════════════════════════ */


/* ═══ 1. THE VIEWPORT ═══
   Safari inflates type in landscape unless told not to, and paints
   a grey box over anything tapped. Neither is wanted; the focus
   ring is, so it is put back for keyboards. */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
a, button, .menu-toggle, .section-nav-trigger {
    -webkit-tap-highlight-color: transparent;
}
:focus-visible {
    outline: 2px solid rgba(212, 181, 94, .85);
    outline-offset: 3px;
}


/* ═══ 2. THE SAFE AREA ═══
   Only the fixed furniture needs this — the photography is meant
   to run under the notch. Every value is max()'d against the
   padding that element already had at that width, which is why the
   same rules are written out at each breakpoint the site uses: a
   single figure would have been right for the phone and wrong
   everywhere else, and quietly narrowed the desktop. Written this
   way, a screen that reports no insets — every desktop browser,
   every phone without a notch — computes back to the exact value
   it had before this file existed. The nav padding carries
   !important because shared-nav.css sets it that way and would
   otherwise win. */

/* — wide: the desktop layout, and a phone held sideways, where the
     notch moves to the left or right edge — */
nav#navbar {
    padding-top: max(2.4rem, env(safe-area-inset-top)) !important;
}
nav#navbar.scrolled {
    padding-top: max(1.2rem, env(safe-area-inset-top)) !important;
}
nav#navbar,
nav#navbar.scrolled {
    padding-left: max(4.5rem, env(safe-area-inset-left)) !important;
    padding-right: max(4.5rem, env(safe-area-inset-right)) !important;
}
.portal-nav {
    padding-top: max(2.2rem, env(safe-area-inset-top));
    padding-left: max(3.5rem, env(safe-area-inset-left));
    padding-right: max(3.5rem, env(safe-area-inset-right));
}
.portal-nav.scrolled {
    padding-top: max(1.2rem, env(safe-area-inset-top));
}
/* the section strip hangs off the bar above it, which the shared
   script re-measures on resize, so it inherits the top inset for
   free and needs only its sides */
.section-nav-inner {
    padding-left: max(2rem, env(safe-area-inset-left));
    padding-right: max(2rem, env(safe-area-inset-right));
}
.fullscreen-menu .menu-inner {
    padding-left: max(2rem, env(safe-area-inset-left));
    padding-right: max(2rem, env(safe-area-inset-right));
    padding-bottom: max(2rem, calc(env(safe-area-inset-bottom) + 1.5rem));
}
footer {
    padding-left: max(4rem, env(safe-area-inset-left));
    padding-right: max(4rem, env(safe-area-inset-right));
}
/* the foot of the page is not fixed, but with viewport-fit=cover
   the last line of it still ends up under the home indicator. The
   inset is added inside the footer rather than to it, so that the
   several different bottom paddings the pages declare are all left
   alone and the spacing only ever grows */
footer .footer-bottom {
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
/* the scroll cue sits at the foot of a full-height hero, where the
   home indicator would otherwise cross it */
.scroll-hint,
.scroll-indicator {
    bottom: max(3rem, calc(env(safe-area-inset-bottom) + 2rem));
}

/* — the portal's own first step down — */
@media (max-width: 820px) {
    .portal-nav {
        padding-top: max(1.5rem, env(safe-area-inset-top));
        padding-left: max(1.5rem, env(safe-area-inset-left));
        padding-right: max(1.5rem, env(safe-area-inset-right));
    }
    .portal-nav.scrolled {
        padding-top: max(1rem, env(safe-area-inset-top));
    }
}

/* — phone — */
@media (max-width: 700px) {
    nav#navbar {
        padding-top: max(1.5rem, env(safe-area-inset-top)) !important;
    }
    nav#navbar.scrolled {
        padding-top: max(1rem, env(safe-area-inset-top)) !important;
    }
    nav#navbar,
    nav#navbar.scrolled {
        padding-left: max(1.5rem, env(safe-area-inset-left)) !important;
        padding-right: max(1.5rem, env(safe-area-inset-right)) !important;
    }
    .section-nav-inner {
        padding-left: max(0.8rem, env(safe-area-inset-left));
        padding-right: max(0.8rem, env(safe-area-inset-right));
    }
    .fullscreen-menu .menu-inner {
        padding-left: max(1.5rem, env(safe-area-inset-left));
        padding-right: max(1.5rem, env(safe-area-inset-right));
        padding-bottom: max(3rem, calc(env(safe-area-inset-bottom) + 2rem));
    }
    footer {
        padding-left: max(1.5rem, env(safe-area-inset-left));
        padding-right: max(1.5rem, env(safe-area-inset-right));
    }
}

/* — small phone: the portal tightens once more — */
@media (max-width: 600px) {
    .portal-nav {
        padding-top: max(1.2rem, env(safe-area-inset-top));
        padding-left: max(1.2rem, env(safe-area-inset-left));
        padding-right: max(1.2rem, env(safe-area-inset-right));
    }
}


/* ═══ 3. WHAT A FINGER CAN HIT ═══ */
@media (max-width: 820px) {
    .menu-toggle {
        min-width: 44px;
        min-height: 44px;
        align-items: center;
        justify-content: center;
    }
    .nav-logo-wrap,
    .portal-logo {
        min-height: 44px;
    }
    footer .footer-logo {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
    footer .footer-col ul li a,
    footer .footer-bottom a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
    .menu-group a {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
    .section-nav-dropdown a {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
    /* the map on the home page ships its own controls at 28px */
    .leaflet-control-zoom a,
    .leaflet-popup-close-button {
        min-width: 44px;
        min-height: 44px;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }
}


/* ═══ 4. THE SECTION STRIP ═══
   Four tabs, and on a 375px phone they came to 380px: CONNECT ran
   off the right edge with no way to scroll to it, because the
   strip clips rather than scrolls — and it has to clip, since its
   dropdowns hang below it and a scroll container would cut them
   off. So the tabs are made to fit instead. The type does not get
   smaller; the space around it does. */
@media (max-width: 700px) {
    .section-nav-trigger {
        padding: 0 0.7rem;
        min-height: 44px;
        letter-spacing: 0.15em;
    }
}
@media (max-width: 360px) {
    .section-nav-trigger {
        padding: 0 0.5rem;
        font-size: 0.6rem;
        letter-spacing: 0.1em;
    }
}


/* ═══ 5. THE SMALL PRINT ═══
   The floor is eleven pixels. Everything below is type that was
   set as texture rather than as words, and on a phone the
   difference stops being available. Held to the site's own phone
   breakpoint: a step wider than this the same type is already
   comfortably above the floor, and reaching up there would only
   have pulled it back down. */
@media (max-width: 700px) {
    .scroll-hint span,
    .scroll-indicator span {
        font-size: .7rem;
        letter-spacing: .22em;
    }
    .enter-location {
        font-size: .68rem;
        letter-spacing: .26em;
    }
    .trees-content h3,
    .founder-inner h3,
    .map-detail h4,
    footer .footer-col h4 {
        font-size: .7rem;
        letter-spacing: .2em;
    }
    /* the buttons carried the site's widest padding around its
       narrowest lettering — the proportion inverts on a narrow
       screen, and at 375px the longer labels ran to the edge of the
       page. It is the padding that gives way, not the type: the
       lettering is left at whatever each button already chose. */
    .cta-btn,
    .cta-btn-dark,
    .cta-btn-earth,
    .enter-btn {
        padding-left: clamp(1.5rem, 7vw, 3.5rem);
        padding-right: clamp(1.5rem, 7vw, 3.5rem);
        max-width: 100%;
        white-space: normal;
        text-align: center;
    }
    .cta-group {
        width: 100%;
    }
}


/* ═══ 6. THE ABSENT MOUSE ═══
   Scoped to pointers that cannot hover, so a desktop browser
   never sees any of it. */
@media (hover: none) {
    /* indents that stuck to the last thing tapped */
    .menu-group a:hover,
    .fullscreen-menu .menu-group a:hover {
        padding-left: 0;
    }
    .section-nav-dropdown a:hover {
        padding-left: 1.5rem;
    }
    /* images left held at their hover scale */
    .hands-cell:hover img,
    .trees-image:hover img,
    .steward-image:hover img,
    .oil-hero-image:hover img,
    .split-image:hover img,
    .card:hover img,
    .image-grid img:hover,
    .gallery-track img:hover {
        transform: none;
    }
    /* the dropdowns open on tap, through .dropdown-open, and the
       phantom hover only gets in the way of closing them again —
       :not() keeps this off the tab that is genuinely open */
    .section-nav-group:hover:not(.dropdown-open) .section-nav-dropdown {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateX(-50%) translateY(-4px);
    }
}
@media (hover: none) and (max-width: 700px) {
    .section-nav-group:hover:not(.dropdown-open) .section-nav-dropdown {
        transform: translateX(0) translateY(-4px);
    }
}


/* ═══ 7. THE PORTAL ═══
   index.html centres a single column inside a full-screen flex
   section. Its ENTER button was set to never wrap, which made the
   column wider than an iPhone SE and pushed both of the button's
   own borders off the screen. */
@media (max-width: 700px) {
    .portal-content,
    .elder-content {
        max-width: 100%;
    }
    .enter-btn {
        display: block;
        width: 100%;
    }
}


/* ═══════════════════════════════════════════════════════════════
   8. THE READING
   ───────────────────────────────────────────────────────────────
   Everything above this line is about the hardware — the notch, the
   finger, the mouse that isn't there. This is about the page, at the
   width it is actually read at.

   legibility.css set this type for a column of about seven hundred
   pixels. An iPhone gives it three hundred and forty. Four of the
   decisions that were right at the wider measure invert at the
   narrower one, and they invert together.

   THE LEFT EDGE. Nearly every prose section here is centred — the
   intro, the philosophy, the vision, the dark grounds. At a wide
   measure, where a paragraph runs three or four lines, that reads as
   editorial. At 340px the same paragraph runs to eight, and centred
   text gives the eye no fixed column to come back to: every line
   starts somewhere new, and the reader hunts for the beginning of
   each one. The prose goes flush left. Everything that was centred
   as composition rather than as text — the headings, the kickers,
   the dividers, the pull quotes, the counters, the buttons — is left
   exactly where it was, so the sections still read as centred and
   only the paragraphs inside them stop moving.

   THE LEADING. Leading is read against the measure, never on its
   own. 1.95 across fifty-eight characters is generous; across forty
   it is a gap, and the return sweep starts missing. It comes in to
   1.75, and the blank line between paragraphs comes in with it —
   which has the second effect of cutting a good deal of empty screen
   out of the scroll without removing a word.

   THE SIZE. What is left after that is simply small: the narrative
   panels at 16.6px, the detail lists at 14.7px, the footer at 11.8.
   Sizes chosen at a desk, read at arm's length in daylight. They
   come up, and the headings that now wrap to three lines get the
   leading that wrapping asks for.

   THE FILM. Two full-page layers lie over the type — the turning
   cast of light, and the grain. Both cost contrast, and a phone
   outdoors is the one place on this site that cannot spare any.
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 700px) {

    /* — 8a. the prose goes flush left —
       :not(.pull-quote) because the quotes are set as objects on the
       page rather than as reading, and they are short enough to stay
       centred. Nothing else in these sections is a <p>: the kickers
       and the counter labels are spans, so they are untouched by
       this and remain centred with their sections. */
    .intro p:not(.pull-quote),
    .section-intro p:not(.pull-quote),
    .dark-section p:not(.pull-quote),
    .bee-section p:not(.pull-quote),
    .philosophy p:not(.pull-quote),
    .vision p:not(.pull-quote),
    .contact-cta p:not(.pull-quote) {
        text-align: left;
        text-wrap: pretty;    /* ignored where unsupported */
    }

    /* — 8b. the measure, the leading, the gap —
       One size for all the body copy, because at this width the
       distinction between a narrative panel and an intro column is
       no longer visible: both are the full page. The panels come up
       from 16.6px, the dark grounds from 17, the intro down a
       fraction from 17.3 — they meet at 17.6 and the page stops
       changing size as it is scrolled. */
    .intro p:not(.pull-quote),
    .section-intro p:not(.pull-quote),
    .dark-section p:not(.pull-quote),
    .bee-section p:not(.pull-quote),
    .philosophy p:not(.pull-quote),
    .vision p:not(.pull-quote),
    .contact-cta p:not(.pull-quote),
    .split-content p:not(.pull-quote),
    .steward-content p:not(.pull-quote),
    .harvest-content p:not(.pull-quote),
    .vintage-content p:not(.pull-quote),
    .tasting-notes-content p:not(.pull-quote),
    .trees-content p:not(.pull-quote),
    .founder-inner p:not(.pull-quote),
    .oil-hero-inner p:not(.pull-quote) {
        font-size: 1.1rem;
        line-height: 1.75;
        margin-bottom: 1.55em;
    }
    /* the last paragraph of a block keeps sitting flush against the
       section's own padding, as it did before */
    .intro p:last-child,
    .section-intro p:last-child,
    .split-content p:last-child {
        margin-bottom: 0;
    }

    /* the shorter columns — a card or a pillar holds four or five
       lines, so it wants the same treatment at a slightly smaller
       size rather than a different one */
    .card p,
    .pillar p {
        font-size: 1.05rem;
        line-height: 1.75;
    }
    .detail-list li {
        font-size: 1rem;
        line-height: 1.6;
    }

    /* the pull quotes are Cormorant italic at 300, which carries far
       less ink per point than the sans around it; at 1.3rem on a
       phone it was the lightest thing on the page that was still
       meant to be read as a sentence */
    .pull-quote,
    .steward-content .pull-quote,
    .dark-section .pull-quote,
    .bee-section .pull-quote,
    .quote-section .pull-quote,
    .founder-inner .pull-quote,
    .vision .pull-quote {
        font-size: 1.5rem;
        line-height: 1.55;
    }

    /* — 8c. headings that now wrap —
       Display leading is set for one or two lines. On a phone these
       headings break to three and four, and at 0.88–1.08 the
       descenders of one line run into the capitals of the next.
       Each value opens just far enough to clear. */
    h1, h2, h3, h4 {
        line-height: 1.16;
    }
    .hero-title {
        line-height: 0.98;
    }
    .split-content h2,
    .steward-content h2,
    .trees-content h2,
    .oil-hero-inner h2,
    .founder-inner h2,
    .bee-section h2,
    .vision h2,
    .enter-title {
        line-height: 1.12;
    }

    /* — 8d. the foot of the page —
       The footer carries the site index, which is the one part of
       these pages a reader arrives at looking for something
       specific. It was the smallest type on the site. */
    footer .footer-tagline {
        font-size: 1rem;
        line-height: 1.75;
    }
    footer .footer-col ul li a {
        font-size: .98rem;
    }
    footer .footer-bottom p {
        font-size: .8rem;
    }
    footer .footer-longevity {
        font-size: .95rem;
    }

    /* captions stand on photographs, where they have no ground of
       their own and only the shadow legibility.css gave them */
    .split-image-caption,
    .hands-strip-label,
    .panorama-label,
    .oil-process-label,
    .reno-figure figcaption {
        font-size: .95rem;
    }

    /* — 8e. the film over the page —
       The cast of light is a fixed soft-light layer across
       everything, type included, and the grain is a second one above
       it. legibility.css already held the light back from 1 to .6
       for the desktop; a phone read outdoors needs the rest of that
       margin. Both stay clearly visible — the hour still turns. */
    .puglia-light {
        opacity: .45;
    }
    body::after {
        opacity: .018;
    }
}