/* =========================================================================
   Lacande — base stylesheet
   -------------------------------------------------------------------------
   Session 1: the typeface + base typographic system and colour.
   Session 2 (LAYOUT block below): the shared chrome — fixed breadcrumb, cart,
   full-screen menu overlay — over a single full-bleed content column, the
   footer + newsletter, the catalogue grid, and the <=768px mobile signature
   (single full-width column of edge-to-edge images; no snap, no 100dvh crop).
   Colour stays #111 on white; nothing decorative.
   ========================================================================= */

/* ---- Typeface -----------------------------------------------------------
   One typeface across the entire site (body, headings, inputs, buttons).
   venezia-bold lives in assets/fonts/ (see DROP-HERE.md there); these paths
   are fixed so the files can be swapped without any code change. woff2 is the
   primary (smallest); woff is the fallback for older browsers. The CSS family
   name is always `venezia-bold`, whatever the font's internal name. */
@font-face {
    font-family: 'venezia-bold';
    src: url('/assets/fonts/venezia-bold.woff2') format('woff2'),
         url('/assets/fonts/venezia-bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* ---- Design tokens ------------------------------------------------------ */
:root {
    /* Fallback stack matches the reference (lido-lido.com) exactly, so the
       scaffold reads the same before venezia-bold.woff2 is dropped in. */
    --font-family: 'venezia-bold', Arial, Helvetica, sans-serif;
    --font-size: 22px;          /* base */
    --letter-spacing: 0.02em;
    --line-height: 1.32;

    --color-ink: #111;          /* near-black */
    --color-paper: #fff;        /* white */

    /* Riso accent — used only on the menu overlay (spinning red vinyl on white).
       A deliberate, approved departure from the strict #111-on-white; the
       "negative space" in the record is the white paper showing through. */
    --riso-red:    #C43C2C;     /* riso ink red */
    --riso-red-d:  #9F2E22;     /* groove shadow / darker red */
}

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

html,
body {
    margin: 0;
    padding: 0;
}

img,
picture,
video {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

/* ---- Base typographic system (metrics per CLAUDE.md) -------------------- */
html {
    font-size: var(--font-size);
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size);
    letter-spacing: var(--letter-spacing);
    line-height: var(--line-height);
    font-weight: normal;
    font-style: normal;

    color: var(--color-ink);
    background: var(--color-paper);

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* One family everywhere — headings, inputs and buttons inherit, matching
   Lido's single-typeface approach. */
h1, h2, h3, h4, h5, h6,
p, ul, ol, li,
input, textarea, select, button {
    font: inherit;
    letter-spacing: inherit;
    color: inherit;
    margin: 0;
}

ul, ol { padding: 0; }


/* =========================================================================
   LAYOUT — shared chrome (Session 2)
   -------------------------------------------------------------------------
   Three fixed pieces of chrome (breadcrumb top-left, cart top-right, menu
   overlay) sit OVER a single full-bleed content column — Lido's structure,
   Lacande's restraint (no decorative colour, no bouncing-balls canvas).
   Content runs to the very top edge; the breadcrumb floats over it (overlay,
   decided 2026-07-01). Text-leading pages use .content-body to clear the
   chrome; full-bleed heroes run under it.
   ========================================================================= */

/* ---- Layout tokens ------------------------------------------------------ */
:root {
    /* Type scale (matches the reference: titles / sub-heads / captions). */
    --font-size-1: 2rem;
    --font-size-2: 1.2rem;
    --font-size-3: 0.7rem;

    --pad: 1rem;            /* chrome edge padding (Lido's .padding); rem-based,
                               so it scales down with the root font on mobile */
    --chrome-h: 3.5rem;     /* space that clears the fixed breadcrumb */
    --space: 6rem;          /* generous vertical whitespace between blocks */

    --menu-size: 15vh;      /* overlay link size — Lido's exact giant nav */

    --z-content: 1;
    --z-menu: 15;
    --z-chrome: 20;         /* chrome above the overlay, so the brand crumb
                               stays clickable to close the menu */
}

/* ---- Small utilities ---------------------------------------------------- */
.padding { padding: var(--pad); }

/* Hidden visually, kept for assistive tech (e.g. the cart label). */
.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
}

/* ---- Content column ----------------------------------------------------- */
.content {
    position: relative;
    z-index: var(--z-content);
    min-height: 100vh;      /* keeps the footer at/below the fold */
}

/* Text-leading content that must clear the fixed chrome (the base fallback
   and later prose pages). Full-bleed heroes skip this and run to the top. */
.content-body {
    padding: var(--chrome-h) var(--pad) var(--space);
}

/* ---- Breadcrumb (fixed, top-left) --------------------------------------- */
.breadcrumb {
    position: fixed;
    top: 0; left: 0;
    z-index: var(--z-chrome);
    max-width: calc(100% - 4.5rem);   /* reserve the top-right cart zone */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: var(--font-size);      /* same scale as body, per Lido */
    font-weight: normal;
}
.breadcrumb-sep { padding: 0 0.25em; }

/* ---- Cart (fixed, top-right) -------------------------------------------- */
.cart {
    position: fixed;
    top: 0; right: 0;
    z-index: var(--z-chrome);
    padding: var(--pad);
}
/* Parens are pure decoration; .cart-count stays a bare number so a real
   quantity drops in later untouched. */
.cart-count::before { content: '('; }
.cart-count::after  { content: ')'; }

/* While the menu overlay is open, hide the fixed chrome (breadcrumb + cart): the
   menu carries the brand + nav, and the vinyl page reads cleaner without it.
   Both fade back in on every normal page. */
.breadcrumb,
.cart { transition: opacity 0.3s ease; }
body.menu-open .breadcrumb,
body.menu-open .cart { opacity: 0; pointer-events: none; }

/* ---- Menu overlay ------------------------------------------------------- */
/* Riso moment: a cream field with the giant links and, beneath them, an
   ambient spinning red vinyl. Stacked top→bottom: logo · Candles · Journal ·
   About · vinyl. `.menu-inner` centres when it fits and scrolls when it can't
   (mobile safety), so every item — the vinyl included — stays reachable. */
.menu {
    position: fixed;
    inset: 0;
    z-index: var(--z-menu);
    background: var(--color-paper);
    display: flex;
    overflow-y: auto;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
body.menu-open { overflow: hidden; }        /* scroll-lock behind the overlay */
body.menu-open .menu {
    opacity: 1;
    pointer-events: auto;
}
.menu-inner {
    margin: auto;                /* centre when short; scroll when taller */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3vh;
    padding: var(--chrome-h) var(--pad) var(--pad);
}
.menu-list {
    list-style: none;
    text-align: center;          /* centre each link (Lido) */
}
.menu-link {
    display: inline-block;
    font-size: var(--menu-size);
    line-height: 1.15;
}

/* ---- Spinning vinyl (menu motif — riso red on cream) -------------------- */
.vinyl {
    position: relative;
    width: clamp(160px, 38vw, 300px);
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    flex: none;
}
/* The disc is an inline SVG (in menu.php): a red base, then grooves made of the
   word "lacande" repeated along concentric paths (SVG textPath, venezia-bold),
   then a dark-red centre label. Rotates only while the menu is open; speed =
   --vinyl-spin (set in the Panel: Site → "Menu vinyl — seconds per turn"). */
.vinyl-disc {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    transform-origin: 50% 50%;
    animation: vinyl-spin var(--vinyl-spin, 16s) linear infinite;
    animation-play-state: paused;
}
.vinyl-disc .v-base  { fill: var(--riso-red); }
.vinyl-disc .v-label { fill: var(--riso-red-d); }
.vinyl-disc text {
    fill: var(--color-paper);
    font-family: 'venezia-bold', Arial, sans-serif;
    letter-spacing: 0;
}
body.menu-open .vinyl-disc { animation-play-state: running; }
/* Spindle hole — fixed, dead centre (white paper punched through). */
.vinyl::before {
    content: '';
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    width: 3.5%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: var(--color-paper);
}
/* Shine — fixed light sweep the grooves pass under. */
.vinyl::after {
    content: '';
    position: absolute;
    z-index: 3;
    inset: 0;
    border-radius: 50%;
    background: linear-gradient(125deg,
        rgba(255, 255, 255, 0.30) 0%,
        rgba(255, 255, 255, 0) 34%,
        rgba(255, 255, 255, 0) 66%,
        rgba(255, 255, 255, 0.14) 100%);
    pointer-events: none;
}
@keyframes vinyl-spin { to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce) {
    .vinyl-disc { animation: none; }   /* freeze to a still record */
}

/* ---- Brand logo (inline SVG, painted in the ink colour) ----------------- */
/* Inlined via site/snippets/brand-logo.php from option('lacande.logo'); the
   source art is near-white, so currentColor repaints it #111 to show on white. */
.brand-logo { display: inline-block; line-height: 0; color: var(--color-ink); }
.brand-logo svg { display: block; width: auto; height: auto; fill: currentColor; }

/* Breadcrumb: the compact single-line wordmark, sized to sit on the same
   baseline as the crumbs that follow (so "lacande / About" reads as one line). */
.breadcrumb-brand { display: inline-block; vertical-align: baseline; }
.breadcrumb-brand .brand-logo svg { height: 0.75em; }

/* Menu: a prominent centred lockup, sized by width so it scales down on mobile. */
.menu-item--brand { margin-bottom: 2vh; }
.menu-link--brand { display: inline-block; }
.menu-link--brand .brand-logo svg { width: min(64vw, 520px); }

/* ---- Footer ------------------------------------------------------------- */
.footer {
    margin-top: var(--space);
    padding-bottom: var(--space);
}
.footer-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}
.newsletter {
    margin-top: 2rem;
    max-width: 32rem;
}
.newsletter-label { display: block; margin-bottom: 0.5rem; }
.newsletter-field { display: flex; gap: 0.75rem; }
.newsletter-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.4em 0;
    border: 0;
    border-bottom: 1px solid var(--color-ink);
    background: transparent;
}
.newsletter-input::placeholder { color: var(--color-ink); opacity: 0.5; }
.newsletter-input:focus { outline: none; border-bottom-width: 2px; }
.newsletter-submit {
    flex: 0 0 auto;
    padding: 0.4em 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

/* ---- Catalogue / gallery grid ------------------------------------------
   Flex, width 100%/N, collapsing to one column at <=768px — the shape every
   grid uses. Populated with content in later sessions; the breakpoint
   behaviour (the mobile signature) is established here now. */
.grid { display: flex; flex-wrap: wrap; }
.grid > * { width: 100%; }               /* one per row by default */
.grid--2 > * { width: 50%; }             /* candles: desktop 2x2 */
.grid--3 > * { width: calc(100% / 3); }
.grid img { width: 100%; }               /* full-bleed, no gaps */


/* =========================================================================
   MOBILE  (<=768px) — the signature
   -------------------------------------------------------------------------
   Base font drops to 15px (all rem-based spacing scales with it). Every grid
   becomes a single full-width column: a continuous, edge-to-edge image scroll,
   one image flowing into the next. No scroll-snap, no 100dvh, no object-fit.
   ========================================================================= */
@media (max-width: 768px) {
    :root {
        --font-size: 15px;
        /* Size the menu links off WIDTH (not height) so long words like
           "Candles"/"Journal" always fit a narrow phone (venezia-bold is wide,
           so 16vw keeps the widest word inside 360–390px); 11vh caps them on
           short-wide screens. */
        --menu-size: min(11vh, 16vw);
    }

    .grid--2 > *,
    .grid--3 > * { width: 100%; }

    .footer-nav { flex-direction: column; gap: 0.5rem; }

    .newsletter-field { flex-direction: column; align-items: stretch; }
    .newsletter-submit { text-align: left; }
}


/* =========================================================================
   HOME  (page-specific)
   -------------------------------------------------------------------------
   Four stacked sections: full-bleed hero, centred manifesto, four-concept
   alternating rows, catalogue 2×2. Everything collapses to one column at
   <=768px. Image/candle slots degrade to neutral placeholder frames until
   Leon's assets and the candle pages land.
   ========================================================================= */

/* Shared prose measure — Lido's ~40em reading width, centred. */
.measure { max-width: 40em; margin-inline: auto; }

/* 1. Hero — full-bleed; multiple images stack with no gaps. */
.hero img { width: 100%; }

/* 2. Manifesto — centred under the hero, generous whitespace. */
.manifesto {
    padding: var(--space) var(--pad);
    text-align: center;
}
.manifesto p { margin: 0; }

/* 3. Four concepts — alternating image/text rows. */
.concept {
    display: flex;
    align-items: center;
}
.concept--flip { flex-direction: row-reverse; }
.concept-media { width: 50%; }
.concept-media img { width: 100%; }
.concept-text { width: 50%; padding: var(--space) var(--pad); }
.concept-heading { font-size: var(--font-size-2); margin-bottom: 0.5em; }
.concept-text p { margin: 0; }

/* 4. Catalogue — square-ish slots inside .grid.grid--2. */
.catalogue { margin-top: var(--space); }
.candle-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 3 / 4;
}

/* Placeholder frames — scaffold only; replaced the moment an image or a real
   candle exists. Hairline #111 border keeps to the palette (no decorative fill). */
.ph {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-ink);
    aspect-ratio: 4 / 3;
}
.ph--hero { aspect-ratio: 16 / 9; }
.candle-slot--ph { border: 1px solid var(--color-ink); }
.ph-label {
    font-size: var(--font-size-3);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.45;
}

@media (max-width: 768px) {
    /* Concepts stack: image on top, text below — one full-width column. */
    .concept,
    .concept--flip { flex-direction: column; }
    .concept-media,
    .concept-text { width: 100%; }
    .concept-text { padding: var(--pad); }
}


/* =========================================================================
   CANDLES  (catalogue card + detail page)
   -------------------------------------------------------------------------
   Card: Lido's products-grid article + a CSS-only unlit→lit flip on hover.
   Detail (Session 8): a static full-bleed hero (the "First picture") → a simple
   name + fragrance + Listen + reserved cart → a flexible blocks body (Text /
   Image / Slideshow) reusing the journal's block styles. Object-fit:cover is
   used only inside two fixed-ratio, distinct UI elements — the flip card and the
   slideshow frame — never on the full-bleed heroes/images, which keep natural
   aspect per the mobile signature.
   ========================================================================= */

/* ---- Catalogue card (index + home) -------------------------------------- */
.candle-card { position: relative; }
.candle-card-link { display: block; color: inherit; }

/* The flip: a fixed-ratio box with two 3D faces. Hover turns unlit → lit;
   on touch (no hover) it simply stays on the unlit face. */
.candle-card-flip {
    position: relative;
    aspect-ratio: 3 / 4;
    perspective: 1200px;
    transform-style: preserve-3d;
    transition: transform 0.6s ease;
}
.candle-card:hover .candle-card-flip { transform: rotateY(180deg); }
.candle-face {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.candle-face img { width: 100%; height: 100%; object-fit: cover; }
.candle-face--lit { transform: rotateY(180deg); }
/* Placeholder faces (no photos yet): unlit = framed white, lit = ink fill, so
   the flip is visibly unlit → lit. Real images override both. */
.candle-face--unlit { border: 1px solid var(--color-ink); }
.candle-face--lit   { background: var(--color-ink); }

/* Name beneath the image — always legible across the flip. */
.candle-card-caption {
    display: flex;
    justify-content: space-between;
    gap: 0.5em;
    padding: var(--pad);
    font-size: var(--font-size-3);
}

/* ---- Detail page (static hero → info → flexible blocks body) ------------ */
/* Session 8: the candle detail leads with a full-bleed hero (the "First
   picture"), then a simple name + fragrance + Listen + reserved cart, then a
   blocks body (Text / Image / Slideshow) reusing the journal's `.paragraph` /
   `.article-images` machinery. The old two-up `.product-gallery` is retired. */

/* 1. Static main picture — full-bleed hero, natural aspect (no crop), running
      under the overlay breadcrumb like the home hero. */
.candle-hero img { display: block; width: 100%; }
.candle-hero .ph--hero { aspect-ratio: 3 / 2; }

/* 2. Name + fragrance + Listen + reserved cart (kept simple for now). The hero
      above already clears the fixed breadcrumb, so the name needs no chrome gap. */
.product-abstract { padding: var(--pad); }
.product-name {
    padding-top: 2rem;
    padding-bottom: 0.5rem;
    font-size: var(--font-size-2);
    line-height: 1.2em;
    text-align: center;
}

/* Fragrance + actions row (release number removed — the candles aren't numbered). */
.product-select { margin-top: 1rem; }
.product-buy {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.product-meta-label { font-size: var(--font-size-3); opacity: 0.6; }
.product-actions {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Lido's pill button — reused for Listen and the reserved add-to-cart slot. */
.button {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 3rem;
    box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.3);
    font-size: 0.7rem;
    letter-spacing: 0.05em;
}
.button:active { color: rgba(0, 0, 0, 0.5); transform: translateY(0.1rem); }
.add-to-cart { margin-top: 0.5rem; }
.add-to-cart[disabled] { opacity: 0.4; cursor: not-allowed; }

/* 3. Flexible body — reuses the journal's block styles (`.paragraph` +
      `.article-images`, both global). Prose gets the same 40em reading measure
      the article scopes to `.single-article`, plus bottom breathing room. */
.candle-body { padding-bottom: var(--space); }
.candle-body .paragraph p {
    width: calc(100% - 2em);
    max-width: 40em;
    margin: 0 auto 1em;
}
.candle-body .paragraph p:last-child { margin-bottom: 0; }

/* Slideshow block (mixed photo + video "diashow"): slides (imgs + videos)
   stacked in one frame, hopped one → next by assets/js/slideshow.js. The cut is
   an **instant cut** by default (like Lido's journal, which cycles frames of an
   animated GIF); set --ss-fade to a duration for a crossfade instead. The frame
   takes the lead slide's natural ratio (--ss-ratio, set by JS) so it isn't
   cropped; later slides object-fit:cover into it. A distinct fixed-frame
   element (like the card-flip) — not the mobile-signature scroll — so object-fit
   here is intentional. Photos and videos share one slide style. */
.slideshow {
    position: relative;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto 4rem;
    aspect-ratio: var(--ss-ratio, 3 / 2);
    overflow: hidden;
    background: var(--color-paper);
}
.slideshow-img,
.slideshow-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity var(--ss-fade, 0s);   /* 0s = instant cut; set for a fade */
}
.slideshow-img.is-active,
.slideshow-video.is-active { opacity: 1; }

@media (max-width: 768px) {
    /* The fragrance/actions row stacks (body prose padding comes from the
       global `.paragraph` mobile rule in the JOURNAL block). */
    .product-select,
    .product-buy { grid-template-columns: 1fr; }
    .product-buy { border-top: 1px solid var(--color-ink); padding-top: 1rem; margin-top: 1rem; }
}


/* =========================================================================
   JOURNAL  (index + article)
   -------------------------------------------------------------------------
   A faithful rebuild of Lido's journal (fetched from source). Index: stacked
   `.article` blocks, each a centred `.article-abstract` (title → teaser →
   "Read more") above a `.article-images` cover shown 50% / centred (the chosen
   Lido-exact index). Article: `.single-article` with a centred `.article-title`,
   the cover full-width (`.landscape`), body prose in a `.paragraph` at a ~40em
   measure, then gallery images two-up. Every image goes full-width at <=768px.
   Metrics mirror Lido's style.css, mapped onto our tokens.
   ========================================================================= */

/* ---- Index (.articles) -------------------------------------------------- */
.articles { padding-top: 4rem; }               /* clears the fixed breadcrumb */
.articles .article { padding-bottom: var(--space); }
.articles .article:last-child { padding-bottom: 2rem; }

.article-abstract {
    padding: var(--pad);
    margin-bottom: 2rem;
    text-align: center;
}
.article-abstract h3 {
    font-size: var(--font-size-2);
    line-height: 1.2em;
    padding-bottom: 0.5rem;
}
.article-more { border-bottom: 1px solid var(--color-ink); }  /* Lido's underline */

/* Images: two-up, wrapping, centred — a lone cover sits centred at 50%. */
.article-images {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding-bottom: 4rem;
}
.article-images:last-child { padding-bottom: 3rem; }
.article-images img { width: 50%; align-self: center; }
.article-images img.landscape { width: 100%; max-width: 1600px; }
.article-images .ph { width: 50%; aspect-ratio: 4 / 3; }
.article-images .ph--landscape { width: 100%; aspect-ratio: 16 / 9; max-width: 1600px; }

/* ---- Article (.single-article) ------------------------------------------ */
.single-article { padding-top: 8rem; }         /* generous lead, clears chrome */
.article-title {
    text-align: center;
    font-size: var(--font-size-1);
    max-width: 20em;
    margin: 0 auto;
    padding-bottom: 1rem;
}
.article-date {
    text-align: center;
    font-size: var(--font-size-3);
    opacity: 0.6;
    padding-bottom: 4rem;
}
/* The whole body is one .paragraph block (not Lido's block-per-paragraph), so
   the reading measure and inter-paragraph rhythm live here. */
.paragraph { padding: var(--pad); margin-bottom: 2rem; }
.single-article .paragraph p {
    width: calc(100% - 2em);
    max-width: 40em;
    margin: 0 auto 1em;
}
.single-article .paragraph p:last-child { margin-bottom: 0; }

@media (max-width: 768px) {
    .article-images { padding-bottom: 0; }
    .article-images img,
    .article-images .ph,
    .article-images .ph--landscape { width: 100%; }
    .paragraph { padding: 0 var(--pad); margin-top: 2rem; }
    .article-title { padding-bottom: 2rem; }
    .article-date { padding-bottom: 2rem; }
}

/* =========================================================================
   STATIC PAGES  (About + Legal)
   -------------------------------------------------------------------------
   Both reuse the article shell (`.single-article` clears the chrome, a centred
   `.article-title`). About reuses the blocks body wholesale (`.paragraph` /
   `.article-images`), so images interleave like the journal, then adds a
   centred `.about-contact` block. Legal is long-form prose in a left-aligned
   reading measure (`.legal-body`) with `## ` section headings.
   ========================================================================= */

/* ---- About contact block ------------------------------------------------ */
.about-contact {
    text-align: center;
    padding: var(--pad);
    padding-bottom: var(--space);
    margin-top: 2rem;
}
.about-contact-row {
    max-width: 40em;
    margin: 0 auto 0.5em;
}
.about-contact-row:last-child { margin-bottom: 0; }
.about-contact-label { opacity: 0.6; margin-right: 0.75em; }
.about-contact a { border-bottom: 1px solid var(--color-ink); }  /* Lido's underline */

/* ---- Legal (long-form notices) ------------------------------------------ */
.legal-body {
    max-width: 40em;
    margin: 0 auto;
    padding: var(--pad);
    padding-bottom: var(--space);
}
.legal-body h2 {
    font-size: var(--font-size-2);
    margin: 2em 0 0.5em;
}
.legal-body h2:first-child { margin-top: 0; }
.legal-body p { margin-bottom: 1em; }
.legal-body p:last-child { margin-bottom: 0; }

/* ---- Footer secondary/legal link ---------------------------------------- */
.footer-link--secondary { opacity: 0.6; }   /* quieter than the primary nav */

@media (max-width: 768px) {
    .about-contact,
    .legal-body { padding-left: var(--pad); padding-right: var(--pad); }
}