/* ═══════════════════════════════════════════════════════════════
   LEGIBILITY & AIR — Beyond Olives
   ───────────────────────────────────────────────────────────────
   This file is the last word in the cascade on every page, which is
   the only reason it can do its job: the type on this site is set
   fourteen times over, once inside each page's own <style> block,
   and the values below are the ones that have to win.

   Two things are being fixed, and they are the same thing.

   CONTRAST. Almost every colour that carried text here was a tone
   picked to sit *inside* a photograph rather than to be read off
   one. Body copy on the parchment grounds ran about 3.5:1; the
   paragraphs on the dark grounds ran 2.9:1; the footers bottomed
   out near 1.4:1, which is not faint, it is invisible. None of that
   is a fault of the palette — the estate's colours are good — it is
   a fault of the *tone within* the palette. So nothing here changes
   a hue. The browns go deeper, the creams go brighter, the golds
   stay gold, and every line of type ends up somewhere between 5:1
   and 11:1 against the ground it is actually standing on.

   AIR. The pages were dense in the specific way that makes prose
   feel like more prose than it is: long measures, small type, tight
   paragraph gaps, sections butted up against each other. The
   remedy is not less writing but more room around it — a shorter
   line, a larger size, a full blank line between paragraphs, and a
   great deal more space between one section and the next. The same
   words, given room, read as fewer.

   A later pass added sections 12 and 13, and they are still
   contrast — but they answer the thing the first pass got wrong.
   Setting a colour per class works only while a class lives on one
   ground. Several here live on two: the counters, the stat
   figures, the doorway buttons, the oil panel. Tuned for the
   parchment they went invisible on the bark, and tuned for the
   bark they went invisible on the parchment, so those rules are
   scoped by the ground a thing actually stands on rather than by
   the name it happens to carry.
   ═══════════════════════════════════════════════════════════════ */


/* ═══ 1. THE TEXT TONES ═══
   Declared on html:root so they outrank the per-page :root blocks,
   which on every content page are written before this file loads.
   These four tokens carry essentially all the body copy on the
   light grounds, so deepening them here fixes every page at once. */
html:root {
    /* body copy — was #8a6e56 (3.5:1), then #6d5340 (5.2:1) */
    --earth-light: #4a382a;   /* 7.8–8.4:1 on the parchment grounds */
    --earth:       #493a2c;
    /* the detail lists under a split — was #6e6252 (4.4:1) */
    --stone:       #514032;   /* 7.0–7.4:1 */
    --stone-light: #5c4636;
}


/* ═══ 2. THE PAPER ═══
   The light grounds are lifted and evened out. Two reasons: the
   darker of them (the card and pillar sections) were pulling body
   copy down by a full point of contrast for no compositional gain,
   and a page that alternates between three near-identical shades of
   beige reads as busier than one that mostly holds still. They stay
   translucent, so the turning sky still reads through — just less
   of it, and less unevenly. */
.intro,
.section-intro,
.split-content,
.split-olive .split-content,
.split-biodiversity .split-content,
.harvest-section,
.tasting-notes-section,
.cta-section,
.reno-gallery,
.steward-content,
.oil-hero-content {
    background-color: rgba(235, 227, 209, .94);
}
.cards-section,
.philosophy,
.pillars-section,
.pressing-stats,
.vintage-section {
    background-color: rgba(228, 219, 198, .93);
}
.map-section,
.split-trullo .split-content {
    background-color: rgba(231, 222, 202, .94);
}

/* The cast of light lies over the whole page at soft-light,
   including over the type. At full strength it was worth a
   noticeable slice of contrast on both grounds. Held back far
   enough that the hour still turns visibly but the paragraphs no
   longer turn with it. */
.puglia-light {
    opacity: .6;
}


/* ═══ 3. BODY COPY ON THE LIGHT GROUNDS ═══
   Larger, more open, and — the part that matters most for how much
   text a page *feels* like — a shorter line and a full blank line
   between paragraphs. */
.intro p,
.section-intro p {
    font-size: clamp(1.12rem, 1.2vw, 1.22rem);
    line-height: 1.95;
    max-width: 58ch;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2.1em;
}
.split-content p,
.steward-content p,
.harvest-content p,
.vintage-content p,
.tasting-notes-content p {
    font-size: clamp(1.04rem, 1.1vw, 1.12rem);
    line-height: 1.95;
    max-width: 54ch;
    margin-bottom: 2em;
}
.card p,
.pillar p {
    font-size: 1rem;
    line-height: 1.85;
}
.map-section .map-subtitle,
.counter-label,
.pressing-stat-label,
.vintage-stat-label {
    color: var(--earth-light);
}
.map-detail p { color: var(--earth); }
/* the sage green on parchment was 2.1:1 — the sage stays in the
   palette, it just stops being asked to carry words */
.map-detail h4 { color: #4a6228; }

/* a paragraph's last line should not sit hard against what follows */
.intro p:last-child,
.section-intro p:last-child,
.split-content p:last-child { margin-bottom: 0; }

.detail-list li {
    font-size: .92rem;
    line-height: 1.7;
    padding: 1rem 0;
    color: var(--stone);
}

/* pull quotes are the one place the type is already large enough;
   they only needed the tone deepened */
.pull-quote,
.steward-content .pull-quote { color: #17240e; }


/* ═══ 4. KICKERS AND NUMERALS ═══
   The small tracked capitals were the least legible type on the
   site: half a rem tall, spaced a third of an em apart, and set in
   a mid sage that never cleared 2.2:1. They come up in size, come
   in in tracking, and go to a terracotta deep enough to read. */
.section-label {
    font-size: .74rem;
    letter-spacing: .26em;
    color: #8e3f1a;
}
.split-content h3,
.steward-content h3,
.tasting-note-item h3 {
    font-size: .68rem;
    letter-spacing: .24em;
    color: #8e3f1a;
}
.card-number,
.pillar-number,
.vintage-stat-number { color: #8e3f1a; }
/* the counters stay gold — they are display figures, set large */
.counter-value,
.pressing-stat-value { color: #9a7a2c; }


/* ═══ 5. TEXT ON THE DARK GROUNDS ═══
   These paragraphs were set in the parchment tone at 50–75% alpha,
   which lands between 2.1:1 and 4.8:1 on olive and bark. Alpha is
   what was costing them, so the alpha goes and a solid cream takes
   its place — the same colour the design was reaching for, at the
   weight it was always meant to have. */
.dark-section p,
.bee-section p,
.quote-section p,
.vision p,
.founder-inner p,
.trees-content p,
.contact-cta p,
.oil-section-dark .oil-hero-inner p {
    color: #e4dcc8;              /* ≈11:1 */
    font-size: clamp(1.06rem, 1.15vw, 1.16rem);
    line-height: 1.95;
    max-width: 58ch;
    margin-bottom: 2.1em;
}
.dark-section .container-narrow p,
.bee-section p,
.quote-section p,
.vision p,
.contact-cta p {
    margin-left: auto;
    margin-right: auto;
}

/* kickers on the dark grounds */
.dark-section .section-label,
.bee-section .section-label,
.vision .section-label,
.trees-content .section-label,
.contact-cta .section-label,
.oil-section-dark .oil-hero-inner .section-label {
    color: #e0c477;              /* ≈8.8:1 */
}
.trees-content h3 { color: #e0c477; }
/* the terracotta kicker over bark had to go the other way — lighter,
   not darker, to clear the same bar */
.founder-inner h3 { color: #dd8f5c; }

/* headings and quotes on the dark grounds */
.dark-section h2,
.bee-section h2,
.vision h2,
.trees-content h2,
.contact-cta h2,
.founder-inner h2,
.gallery-text h2,
.oil-section-dark .oil-hero-inner h2 { color: #ecdcae; }
.dark-section .pull-quote,
.bee-section .pull-quote,
.quote-section .pull-quote { color: #eddcaa; }
.founder-inner .pull-quote,
.vision .pull-quote { color: #9fc8d6; }
.oil-section-dark .oil-hero-inner em,
.oil-section-dark .oil-hero-inner p em { color: #edb98a; }


/* ═══ 6. HOME'S OIL PANEL ═══
   One genuine mismatch rather than a matter of degree. The shared
   ground rules paint .oil-hero-content as parchment, which is right
   on the oil page, where that panel is light — but on the home page
   the same panel sits inside a bark-dark .oil-section and is
   written in gold-pale and cream. The light ground was landing
   underneath it and taking the section to roughly 1.2:1.

   The two panels are identical in markup and identical in class,
   which is the whole difficulty: .oil-section is bark on home.html
   and bare on the-oil.html, so no selector can tell them apart and
   the scoping this section originally claimed was not real — it
   applied to both, and the oil page was left reading cream on
   parchment at 1.00:1. home.html therefore carries an explicit
   .oil-section-dark marker, and every rule that assumes a dark
   ground under this panel — the ones above and the counters in
   section 12 — hangs off that instead of off the ambiguous class. */
.oil-section-dark .oil-hero-content {
    background-color: transparent;
}
/* the oil page keeps its parchment panel and its own dark type; it
   still wants the measure and the leading the dark twin gets, and
   its italics were set in the light terracotta that only works
   against bark — 2.65:1 on paper, so they take the deep one */
.oil-hero-inner p {
    font-size: clamp(1.06rem, 1.15vw, 1.16rem);
    line-height: 1.95;
    max-width: 58ch;
    margin-bottom: 2.1em;
}
.oil-hero-inner em,
.oil-hero-inner p em { color: #8e3f1a; }


/* ═══ 7. TYPE OVER PHOTOGRAPHS ═══
   Captions, strip labels and scroll cues sit on pictures whose
   brightness is not knowable in advance, so they are lifted to a
   near-white and given a shadow of their own to stand on rather
   than trusting the image underneath. */
.split-image-caption,
.hands-strip-label,
.panorama-label,
.oil-process-label,
.reno-figure figcaption {
    color: #f4efe3;
    font-size: .92rem;
    letter-spacing: .08em;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .85), 0 2px 18px rgba(0, 0, 0, .6);
}
.scroll-indicator span,
.scroll-hint span {
    font-size: .62rem;
    letter-spacing: .26em;
    color: rgba(238, 230, 212, .78);
    text-shadow: 0 1px 4px rgba(0, 0, 0, .7);
}
.hero-eyebrow {
    font-size: .7rem;
    letter-spacing: .3em;
    color: #eed9a4;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .6);
}
.hero-tagline {
    font-size: .72rem;
    letter-spacing: .2em;
    color: #e7c887;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .6);
}
.hero-title em { color: #ecdcb8; }


/* ═══ 8. THE FOOTER ═══
   Set between 1.4:1 and 2.1:1, which is to say not set at all. */
footer .footer-tagline { color: #c6bba0; font-size: .95rem; line-height: 1.8; }
footer .footer-col h4 {
    color: #d3b76e;
    font-size: .66rem;
    letter-spacing: .24em;
}
footer .footer-col ul li a {
    color: #cfc4a8;
    font-size: .92rem;
}
footer .footer-col ul li a:hover { color: #f0dfae; }
footer .footer-bottom p {
    color: #a89e86;
    font-size: .74rem;
}
footer .footer-logo { color: #ecdcae; }
footer .footer-longevity { color: #d9bd72; }

/* the site index in the fullscreen menu */
.fullscreen-menu .menu-group a { color: #e8e0cd; }
.fullscreen-menu .menu-group-title { color: #e0c477; }
.nav-logo,
.portal-logo span { color: #ecdcae; }


/* ═══ 9. AIR ═══
   Room between the sections, and room around the columns inside
   them. This is most of what "more spacious" means here — the
   sections were running about 7rem of padding at the low end and
   sitting flush against each other. */
.intro,
.section-intro,
.dark-section,
.cards-section,
.philosophy,
.pillars-section,
.quote-section,
.cta-section,
.harvest-section,
.tasting-notes-section,
.pressing-stats,
.reno-gallery,
.vintage-section,
.contact-cta,
.vision {
    padding-top: clamp(9rem, 24vh, 17rem);
    padding-bottom: clamp(9rem, 24vh, 17rem);
}
.map-section,
.bee-section {
    padding-top: clamp(9rem, 24vh, 17rem);
}
.split-content {
    padding: clamp(6rem, 16vh, 11rem) clamp(2.5rem, 7vw, 7rem);
}
.split-content-inner { max-width: 470px; }
.oil-hero-content,
.founder-content { padding: clamp(6rem, 16vh, 11rem) clamp(2.5rem, 6vw, 6rem); }
.oil-hero-inner,
.founder-inner { max-width: 500px; }

/* headings step further away from the copy that follows them */
.intro h2,
.section-intro h2,
.cards-section h2,
.philosophy h2,
.pillars-section h2,
.map-section h2,
.dark-section h2,
.bee-section h2,
.vision h2 { margin-bottom: 3.2rem; }
.split-content h2,
.steward-content h2,
.trees-content h2,
.oil-hero-inner h2,
.founder-inner h2 { margin-bottom: 2.6rem; }
.section-label { margin-bottom: 2.4rem; }

/* the grids open up */
.cards-grid { gap: clamp(3rem, 5vw, 5.5rem); }
.pillars { gap: clamp(2.5rem, 4.5vw, 5rem); }
.stats-grid,
.vintage-stats-grid,
.pressing-stats-grid { gap: clamp(2.5rem, 4vw, 4.5rem); }
.harvest-stats { gap: clamp(2.5rem, 4vw, 4rem); padding: clamp(6rem, 14vh, 9rem) 3rem; }
.harvest-gallery { gap: 2.6rem; margin: 6rem auto; }
.map-details { gap: clamp(2.5rem, 5vw, 5rem); padding-bottom: clamp(6rem, 14vh, 9rem); }
.card { padding-top: 5.2rem; padding-bottom: 3rem; }

/* the narrow columns get a touch narrower — a shorter line is the
   cheapest way to make a page of prose feel like less of one */
.container-narrow { max-width: 680px; }


/* ═══ 10. SMALLER SCREENS ═══
   The air scales down, but the contrast does not — a phone in
   Puglian sunlight is the hardest reading condition this site has. */
@media (max-width: 820px) {
    .intro p,
    .section-intro p { font-size: 1.08rem; line-height: 1.9; }
    .split-content { padding: clamp(4.5rem, 11vh, 7rem) 2rem; }
    .split-content-inner,
    .oil-hero-inner,
    .founder-inner { max-width: 100%; }
    .oil-hero-content,
    .founder-content { padding: clamp(4.5rem, 11vh, 7rem) 2rem; }
    .intro,
    .section-intro,
    .dark-section,
    .cards-section,
    .philosophy,
    .pillars-section,
    .quote-section,
    .cta-section,
    .harvest-section,
    .tasting-notes-section,
    .pressing-stats,
    .reno-gallery,
    .vintage-section,
    .contact-cta,
    .vision {
        padding-top: clamp(6rem, 15vh, 9rem);
        padding-bottom: clamp(6rem, 15vh, 9rem);
    }
    .map-section,
    .bee-section { padding-top: clamp(6rem, 15vh, 9rem); }
    .card { padding-top: 4rem; }
}

/* ═══ 11. THE PORTAL ═══
   index.html sets its own readability block inline and is already
   tuned for type standing on full-bleed photography; only the two
   quietest lines on it needed lifting to match the rest of the
   site. */
.enter-location { color: rgba(224, 212, 186, .68); }
.portal-location { color: #e2c184; }


/* ═══ 12. THE SAME CLASS ON TWO GROUNDS ═══
   Everything above this line set a colour per *class*. That works
   right up until a class appears on both a parchment ground and an
   olive one, and on this site several of them do — the counters,
   the stat figures, the doorway buttons, the pull quotes. A tone
   deep enough to read on cream is, by construction, too dark to
   read on bark; picking either one leaves half the site worse than
   it started. So the rules below are scoped by *ground* rather than
   by class, and they are the last ones in the file for the same
   reason the file is the last one in the cascade.

   Every value here was measured against the colour actually behind
   it after the section's own alpha is composited, not against the
   token it nominally sits on. */

/* — the counters and stat figures where the ground is dark — */
/* var(--earth-light) is a deep brown: correct on parchment, 1.35:1
   on olive. These are the sections where that same label is
   standing on the dark. */
.dark-section .counter-label,
.dark-section .pressing-stat-label,
.dark-section .vintage-stat-label,
.bee-section .counter-label,
.quote-section .counter-label,
.vision .counter-label,
.contact-cta .counter-label,
.hands-strip .counter-label,
.oil-section-dark .counter-label,
.founder-inner .counter-label,
.trees-content .counter-label { color: #c9bda0; }
/* the gold figures: #9a7a2c is a reading gold on cream and a dim
   one on olive, so the dark grounds get the brighter cast */
.dark-section .counter-value,
.dark-section .pressing-stat-value,
.bee-section .counter-value,
.quote-section .counter-value,
.vision .counter-value,
.contact-cta .counter-value,
.hands-strip .counter-value,
.oil-section-dark .counter-value,
.founder-inner .counter-value,
.trees-content .counter-value { color: #d4b55e; }

/* — the pressing figures where the ground is light — */
/* #9a7a2c cleared 3:1 as a display numeral, and as display numerals
   these would have been allowed to stop there. They are set in
   Playfair at weight 300, though, and a hairline serif at 4.5rem is
   not the "large text" the 3:1 allowance was written for — the
   strokes are thinner than the body copy's. So they are taken to
   4.5:1 flat, measured against the stat card's faint gold tint
   rather than the parchment underneath it. */
.counter-value,
.pressing-stat-value { color: #78591b; }

/* — the doorway buttons where the ground is light — */
/* .cta-btn is drawn for photography: pale gold on a 30%-alpha gold
   hairline. Standing on parchment the label runs 1.21:1 and the
   border is not visibly there at all. Three of them on this site
   are missing the .cta-btn-dark modifier that would have handled
   it; rather than depend on the modifier being remembered, the
   ground decides. .cta-btn-earth is exempt — it is only ever used
   over imagery — and .oil-hero-content is deliberately absent from
   this list because .oil-section is dark on home.html and light on
   the-oil.html, and only the ground it paints itself can be trusted. */
.intro .cta-btn:not(.cta-btn-earth),
.section-intro .cta-btn:not(.cta-btn-earth),
.cta-section .cta-btn:not(.cta-btn-earth),
.steward-content .cta-btn:not(.cta-btn-earth),
.split-content .cta-btn:not(.cta-btn-earth),
.harvest-section .cta-btn:not(.cta-btn-earth),
.tasting-notes-section .cta-btn:not(.cta-btn-earth),
.vintage-section .cta-btn:not(.cta-btn-earth),
.cards-section .cta-btn:not(.cta-btn-earth),
.philosophy .cta-btn:not(.cta-btn-earth),
.pillars-section .cta-btn:not(.cta-btn-earth),
.reno-gallery .cta-btn:not(.cta-btn-earth) {
    color: var(--olive-deep);
    border-color: rgba(28, 43, 18, .55);
}

/* — the pull quote on the hands strip — */
/* section 3 sent every .pull-quote to #17240e for the parchment
   grounds, and the hands strip is a photograph. It escapes only
   because its quote carries an inline colour; the ground says so
   explicitly here so the next edit to that markup cannot undo it. */
.hands-strip .pull-quote { color: #eddcaa; }


/* ═══ 13. THE NAVIGATION ═══
   The section nav and its dropdown are painted on a near-opaque
   olive panel, so there is no photograph underneath to justify the
   low alpha the labels were set at — the type was simply faded.
   The current-page marker was the worst of it: the one link a
   reader is looking for was the one hardest to see. */
.section-nav-trigger { color: #d3c3a0; }
.section-nav-dropdown a { color: #d3c3a0; }
.section-nav-dropdown a.current-page,
.section-nav-dropdown a:hover { color: #e0c477; }
.fullscreen-menu .menu-group a.menu-active { color: #e0c477; }