/* ESLO site stylesheet
 * Workstream 14 — Brand Color and Aesthetic Pass (Bo Aesthetic Approval gate)
 * Direction (Bo verbatim 2026-05-04): retro 1950s/60s character.
 * Hierarchy: Main = Dynasty Marquee blue, Secondary = Irish Folklore green,
 * Accent = Flirt Alert red. Trailing letters on color codes preserved verbatim.
 */

:root {
    /* Brand colors — Behr base codes resolved 2026-05-09; trailing letters
       (U/M/O) on Percy and Bo's color card preserved verbatim per ./CLAUDE.md.
       PPU13-09 is currently published by Behr as "Tahoe Blue"; verbatim Bo
       label "Dynasty Marquee" is preserved per the same guardrail. */
    --color-irish-folklore:  #D3E3BF;  /* P380-3U  — fair green   */
    --color-dynasty-marquee: #94B8C1;  /* PPU13-09M — soft blue    */
    --color-flirt-alert:     #BE3C37;  /* P150-7O  — intense red  */

    /* Surface and text — built around Bo's blue-as-main hierarchy */
    --color-surface:        #FBF9F2;  /* warm off-white, retro cream  */
    --color-surface-tint:   #EFF1E9;  /* subtle Irish Folklore wash    */
    --color-surface-deep:   #5C7C85;  /* deepened Dynasty Marquee — heading text */
    --color-slab:           #3F5961;  /* inverted-slab background; cream body
                                         text on this clears WCAG AA (5.8:1) */
    --color-ink:            #1F2A2D;  /* near-black with blue undertone */
    --color-ink-muted:      #5C6A6E;
    --color-line:           #C7CFC1;
    --color-line-strong:    #5C7C85;
    /* Link color matches the slab: darker than surface-deep so body links
       on the cream surface clear WCAG AA (4.5:1). */
    --color-link:           #3F5961;

    /* Spacing scale — 1950s editorial layouts ran generous white space. */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  24px;
    --space-6:  32px;
    --space-7:  48px;
    --space-8:  64px;
    --space-9:  96px;
    --space-10: 128px;

    /* Type stacks — system-only, no external CDN.
       Display: slab serif typewriter — period-correct mid-century signage.
       American Typewriter ships with every modern macOS and reads chunkier
       than Cooper Black would have on Bo's MacBook Air. Rockwell covers
       Windows / older systems; Charter / Georgia are last-resort fallbacks.
       Body: geometric retro sans (Futura era). */
    --font-display: "Rockwell", "American Typewriter",
                    "Charter", "Georgia", serif;
    --font-body:    "Futura", "Futura PT", "Avenir Next", "Avenir",
                    "Helvetica Neue", "Helvetica", system-ui, sans-serif;
    --font-mono:    "SF Mono", "Menlo", "Consolas", "Courier New", monospace;

    /* Type scale — modular ratio 1.25 (major third) anchored at 1rem. */
    --text-xs:   0.8rem;
    --text-sm:   0.9rem;
    --text-base: 1rem;
    --text-lg:   1.25rem;
    --text-xl:   1.563rem;
    --text-2xl:  1.953rem;
    --text-3xl:  2.441rem;
    --text-4xl:  3.052rem;
    --text-5xl:  3.815rem;

    /* Line and weight */
    --leading-tight:   1.15;
    --leading-snug:    1.3;
    --leading-normal:  1.55;
    --leading-relaxed: 1.7;

    /* Radii — restrained; mid-century signage favoured square-cornered
       cards over the soft 12px corners of modern SaaS. */
    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-lg: 4px;
    --radius-pill: 999px;

    /* Borders */
    --border-thin:   1px solid var(--color-line);
    --border-strong: 2px solid var(--color-line-strong);

    /* Shadows — subtle, period-correct (no modern glassmorphism) */
    --shadow-card: 0 1px 0 rgba(31, 42, 45, 0.04),
                   0 4px 12px rgba(31, 42, 45, 0.08);
    --shadow-press: 0 1px 0 rgba(31, 42, 45, 0.06) inset;
}

/* Reset and base */
*, *::before, *::after { box-sizing: border-box; }

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

html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--color-ink);
    background: var(--color-surface);
}

/* Type scale */
h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 400;
    color: var(--color-surface-deep);
    line-height: var(--leading-tight);
    margin: 0 0 var(--space-4) 0;
    letter-spacing: -0.01em;
}
h5, h6 {
    font-family: var(--font-body);
    font-weight: 600;
    color: var(--color-ink);
    line-height: var(--leading-snug);
    margin: 0 0 var(--space-3) 0;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
h1 { font-size: var(--text-5xl); }
h2 { font-size: var(--text-4xl); }
h3 { font-size: var(--text-3xl); }
h4 { font-size: var(--text-2xl); }
h5 { font-size: var(--text-lg);  }
h6 { font-size: var(--text-base); }

p, ul, ol {
    margin: 0 0 var(--space-4) 0;
}

small { font-size: var(--text-sm); color: var(--color-ink-muted); }

a {
    color: var(--color-link);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}
a:hover  { color: var(--color-flirt-alert); }
a:focus-visible {
    outline: 2px solid var(--color-flirt-alert);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

code, pre, kbd {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    background: var(--color-surface-tint);
    padding: 1px 6px;
    border-radius: var(--radius-sm);
}

/* Layout helpers */
.container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 var(--space-5);
}

.section {
    padding: var(--space-8) 0;
    border-top: var(--border-thin);
}
.section:first-of-type { border-top: 0; }
.section--invert {
    background: var(--color-irish-folklore);
    color: var(--color-ink);
    /* Strong top rule preserves the "you've reached the end" visual
       boundary that the slab→cream contrast used to provide. */
    border-top: var(--border-strong);
}
.section--invert .bar__sub { color: var(--color-ink); }
/* Links in the Irish-Folklore footer use the body ink color so they stay
   readable against the green wash; hover keeps the accent-red affordance. */
.section--invert a { color: var(--color-ink); }
.section--invert a:hover { color: var(--color-flirt-alert); }

/* Inline link list — semantic <ul> with CSS-rendered separators so
   screen readers announce a list rather than literal middle-dot text. */
.linklist {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) 0;
}
.linklist li { display: inline; }
.linklist li + li::before {
    content: " · ";
    padding: 0 var(--space-2);
    color: inherit;
    opacity: 0.55;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-md);
    border: 2px solid var(--color-slab);
    background: var(--color-slab);
    color: var(--color-surface);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease,
                border-color 120ms ease, transform 80ms ease;
}
.btn:hover {
    background: var(--color-flirt-alert);
    border-color: var(--color-flirt-alert);
    color: var(--color-surface);
}
.btn:focus-visible {
    outline: 2px solid var(--color-flirt-alert);
    outline-offset: 3px;
}
.btn:active { transform: translateY(1px); box-shadow: var(--shadow-press); }
.btn[disabled],
.btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--color-line);
    border-color: var(--color-line);
    color: var(--color-ink-muted);
}

.btn--secondary {
    background: transparent;
    color: var(--color-slab);
}
.btn--secondary:hover {
    background: var(--color-irish-folklore);
    color: var(--color-ink);
    border-color: var(--color-surface-deep);
}

.btn--accent {
    background: var(--color-flirt-alert);
    border-color: var(--color-flirt-alert);
    color: var(--color-surface);
}
.btn--accent:hover {
    background: var(--color-slab);
    border-color: var(--color-slab);
}

/* Demo-only state simulators — used in the styleguide to show :hover,
   :focus-visible, and :active without forcing user interaction. They share
   the canonical declarations above so the styleguide stays truthful. */
.btn--demo-hover {
    background: var(--color-flirt-alert);
    border-color: var(--color-flirt-alert);
    color: var(--color-surface);
}
.btn--demo-focus {
    outline: 2px solid var(--color-flirt-alert);
    outline-offset: 3px;
}
.btn--demo-pressed {
    transform: translateY(1px);
    box-shadow: var(--shadow-press);
}

/* Card (image card) */
.card {
    background: var(--color-surface);
    border: var(--border-thin);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
}
.card__media {
    aspect-ratio: 4 / 3;
    background:
      linear-gradient(135deg,
        var(--color-dynasty-marquee) 0%,
        var(--color-surface-deep)    100%);
    color: var(--color-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    letter-spacing: 0.02em;
}
.card__media--folklore {
    background:
      linear-gradient(135deg,
        var(--color-irish-folklore) 0%,
        var(--color-surface-deep)   100%);
    color: var(--color-ink);
}
.card__media--accent {
    background:
      linear-gradient(135deg,
        var(--color-dynasty-marquee) 0%,
        var(--color-flirt-alert)     100%);
}
.card__body {
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.card__title {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    color: var(--color-surface-deep);
    margin: 0;
}
.card__meta {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-ink-muted);
}

/* Color swatch */
.swatch {
    border: var(--border-thin);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
}
.swatch__chip {
    height: 140px;
}
/* Swatch chip color modifiers — exist so the styleguide can demonstrate
   every brand and surface token without inline style attributes. */
.swatch__chip--dynasty-marquee { background: var(--color-dynasty-marquee); }
.swatch__chip--irish-folklore  { background: var(--color-irish-folklore);  }
.swatch__chip--flirt-alert     { background: var(--color-flirt-alert);     }
.swatch__chip--surface         { background: var(--color-surface);         }
.swatch__chip--surface-tint    { background: var(--color-surface-tint);    }
.swatch__chip--surface-deep    { background: var(--color-surface-deep);    }
.swatch__chip--ink             { background: var(--color-ink);             }
.swatch__body {
    padding: var(--space-4);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-1);
}
.swatch__name {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    color: var(--color-surface-deep);
    margin: 0;
}
.swatch__code,
.swatch__hex,
.swatch__rgb {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
}
.swatch__hex,
.swatch__rgb { color: var(--color-ink-muted); }
.swatch__code { color: var(--color-ink); }

/* Page utilities for the styleguide */
.tag {
    display: inline-block;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 2px var(--space-2);
    border-radius: var(--radius-pill);
    background: var(--color-irish-folklore);
    color: var(--color-ink);
}
.tag--accent {
    background: var(--color-flirt-alert);
    color: var(--color-surface);
}

.kv {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--space-2) var(--space-5);
    font-size: var(--text-sm);
}
.kv dt { color: var(--color-ink-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.kv dd { margin: 0; color: var(--color-ink); }

/* Page header bar — uses Dynasty Marquee as the dominant surface color */
.bar {
    background: var(--color-dynasty-marquee);
    color: var(--color-ink);
    padding: var(--space-5) 0;
    border-bottom: var(--border-strong);
}
.bar__title {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    margin: 0;
    color: var(--color-ink);
    line-height: var(--leading-tight);
}
/* Accent-Red treatment for page titles per Bo's 2026-05-11 redlines.
   Applied via `.bar__title--accent` (top banner, on Dynasty Marquee) and
   `.hero__title--accent` (hero H2, on slab). Text-shadow boosts perceived
   contrast on both backgrounds where the strict WCAG AA ratio is borderline. */
.bar__title--accent,
.hero__title--accent {
    color: var(--color-flirt-alert);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
.bar__sub {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin: 0;
    color: var(--color-ink);
}

/* Grids — collapse to one column at narrow widths */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--space-5);
}

/* Responsive — three breakpoints to match QA targets */
@media (max-width: 768px) {
    h1 { font-size: var(--text-4xl); }
    h2 { font-size: var(--text-3xl); }
    h3 { font-size: var(--text-2xl); }
    .section { padding: var(--space-7) 0; }
}

@media (max-width: 360px) {
    h1 { font-size: var(--text-3xl); }
    h2 { font-size: var(--text-2xl); }
    .container { padding: 0 var(--space-4); }
    .section { padding: var(--space-6) 0; }
}

/* Skip link for keyboard users — visually hidden until focused */
.skip-link {
    position: absolute;
    top: 0;
    left: 0;
    padding: var(--space-3) var(--space-4);
    background: var(--color-flirt-alert);
    color: var(--color-surface);
    font-weight: 600;
    text-decoration: none;
    transform: translateY(-110%);
    transition: transform 120ms ease;
    z-index: 100;
}
.skip-link:focus {
    transform: translateY(0);
    color: var(--color-surface);
}

/* Site navigation — sits inside the .bar header */
.nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4) var(--space-5);
    margin-top: var(--space-3);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.10em;
}
.nav a {
    color: var(--color-ink);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    padding-bottom: 2px;
}
.nav a:hover,
.nav a:focus-visible { border-bottom-color: var(--color-flirt-alert); color: var(--color-ink); }
.nav a[aria-current="page"] {
    border-bottom-color: var(--color-flirt-alert);
    color: var(--color-ink);
    font-weight: 600;
}

/* Hero — anchor photo for the homepage */
.hero {
    background: var(--color-slab);
    color: var(--color-surface);
    border-bottom: var(--border-strong);
}
.hero__media {
    width: 100%;
    /* height: auto lets CSS aspect-ratio win over the <img> height attr
       — without this, the HTML height="..." would lock rendered height. */
    height: auto;
    /* Tighter than 16:9 so ESLO sits above the fold on most desktop heights
       — Bo's 2026-05-11 redline: "Crop the Hero image top and bottom, so
       Eslo is immediately visible without scrolling (wow factor)". */
    aspect-ratio: 21 / 9;
    object-fit: cover;
    object-position: center 60%;
    display: block;
}
.hero__body {
    /* Vertical-only longhand. Earlier shorthand `padding: var(--space-7) 0` set
       horizontal padding to 0 which clobbered .container's `padding: 0 var(--space-5)`
       at mobile widths (same specificity, later rule wins) — hero content rendered
       flush-left on mobile while the nav inside .bar > .container stayed indented. */
    padding-top: var(--space-7);
    padding-bottom: var(--space-7);
    text-align: left;
}
.hero__title {
    font-family: var(--font-display);
    font-size: var(--text-5xl);
    color: var(--color-surface);
    margin: 0 0 var(--space-4) 0;
    line-height: var(--leading-tight);
}
.hero__lede {
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    max-width: 60ch;
    margin: 0 0 var(--space-5) 0;
    color: var(--color-surface);
}
.hero__cta { margin-top: var(--space-3); }

/* Section utility for primary background tint — Dynasty Marquee wash */
.section--tint    { background: var(--color-surface-tint); }
.section--marquee {
    background: var(--color-dynasty-marquee);
    border-top: 0;
}

/* Two-column prose section.
   Bo's 2026-05-12 REMARKS: bullet font must match body paragraph font,
   so .prose p and .prose li share font-size + line-height. */
.prose { max-width: 64ch; margin: 0 auto; }
.prose p,
.prose li { font-size: var(--text-lg); line-height: var(--leading-relaxed); }
/* In-text headings inside .prose: keep the H2 semantic level (better
   for SEO and screen readers — confirmed by Bo 2026-05-11 Q3) but render
   visually at H3 scale. Shorthand `margin: 0 0 X 0` is intentional — it
   zeroes margin-top for the FIRST-child case where no `* +` sibling rule
   matches; subsequent siblings pick up the larger top margin from the
   sibling rule below (which appears later in the cascade and therefore
   wins on equal specificity). */
.prose h2 {
    font-size: var(--text-2xl);
    margin: 0 0 var(--space-3) 0;
}
.prose h3 {
    font-size: var(--text-xl);
    margin: 0 0 var(--space-2) 0;
}
/* One sibling-spacing rule for every element pair inside .prose.
   Bo's 2026-05-11 redline asked for "een beetje meer ruimte" between
   paragraphs — space-6 is what she accepted. */
.prose * + p,
.prose * + h2,
.prose * + h3,
.prose * + ul { margin-top: var(--space-6); }
/* Tight heading-to-list pairing — without this, h2+ul and h3+ul would
   pick up the general --space-6 sibling-rule top margin and the heading
   would visually float above its own list. Higher specificity wins. */
.prose h2 + ul,
.prose h3 + ul { margin-top: var(--space-2); }
.prose blockquote {
    border-left: 4px solid var(--color-flirt-alert);
    margin: var(--space-5) 0;
    padding: var(--space-2) var(--space-5);
    font-style: italic;
    color: var(--color-ink);
}
.prose blockquote p { margin: 0; }

/* Specs table — parallels the .kv pattern but uses real <table> markup
   so screen readers announce row/column relationships. */
.spec-table {
    border-collapse: collapse;
    width: 100%;
    font-size: var(--text-base);
}
.spec-table caption {
    text-align: left;
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    color: var(--color-surface-deep);
    padding: var(--space-3) 0;
    caption-side: top;
}
.spec-table th,
.spec-table td {
    text-align: left;
    padding: var(--space-3) var(--space-4);
    border-top: var(--border-thin);
    vertical-align: top;
}
.spec-table th {
    font-family: var(--font-body);
    font-weight: 600;
    color: var(--color-ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: var(--text-sm);
    width: 30%;
}
.spec-table tr:first-child th,
.spec-table tr:first-child td { border-top: var(--border-strong); }

/* Gallery grid + lightbox */
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--space-4);
}
.gallery__item {
    margin: 0;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--radius-md);
    border: var(--border-thin);
    background: var(--color-surface-tint);
    position: relative;
}
.gallery__item button {
    all: unset;
    display: block;
    width: 100%;
    height: 100%;
    cursor: zoom-in;
}
.gallery__item button:focus-visible {
    outline: 3px solid var(--color-flirt-alert);
    outline-offset: 2px;
}
.gallery__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 220ms ease;
}
.gallery__item:hover .gallery__img,
.gallery__item button:focus-visible .gallery__img {
    transform: scale(1.03);
}

.gallery__group + .gallery__group { margin-top: var(--space-7); }
.gallery__group-title {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    color: var(--color-surface-deep);
    margin: 0 0 var(--space-4) 0;
}

.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(31, 42, 45, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
    padding: var(--space-5);
}
.lightbox[hidden] { display: none; }
.lightbox__img {
    max-width: 100%;
    max-height: 88vh;
    object-fit: contain;
    border-radius: var(--radius-md);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.45);
}
.lightbox__caption {
    position: absolute;
    bottom: var(--space-5);
    left: 0; right: 0;
    text-align: center;
    color: var(--color-surface);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    letter-spacing: 0.04em;
}
.lightbox__btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(251, 249, 242, 0.10);
    color: var(--color-surface);
    border: 2px solid var(--color-surface);
    width: 48px; height: 48px;
    border-radius: 999px;
    cursor: pointer;
    font-size: 1.5rem;
    display: grid;
    place-items: center;
}
.lightbox__btn:hover,
.lightbox__btn:focus-visible {
    background: var(--color-flirt-alert);
    border-color: var(--color-flirt-alert);
    outline: none;
}
.lightbox__prev  { left:  var(--space-5); }
.lightbox__next  { right: var(--space-5); }
.lightbox__close {
    top: var(--space-5);
    right: var(--space-5);
    transform: none;
    width: 44px; height: 44px;
}

/* Contact form */
.form {
    display: grid;
    gap: var(--space-4);
    max-width: 60ch;
}
.form__row {
    display: grid;
    gap: var(--space-2);
}
.form label {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-ink);
}
.form input[type="text"],
.form input[type="email"],
.form textarea {
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--color-ink);
    background: var(--color-surface);
    border: 1px solid var(--color-line-strong);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    width: 100%;
}
.form input:focus,
.form textarea:focus {
    outline: 2px solid var(--color-flirt-alert);
    outline-offset: 2px;
    border-color: var(--color-surface-deep);
}
.form textarea { min-height: 10rem; resize: vertical; }
.form__hint { font-size: var(--text-sm); color: var(--color-ink-muted); }
.form__captcha { margin-top: var(--space-3); }
.form__actions { margin-top: var(--space-3); }

/* Page footer reuses .section--invert; nothing new needed. */