/* lanamcleansgallery.com — the ONLY stylesheet (replaced the five 2004 ones, 2026-10-28), loaded
   in <head> by every page. Pages are in quirks mode (no doctype) — left that way so the old
   markup lays out as it always has. Calm blue-grey palette; one typeface, Inter, self-hosted in
   fonts/ (Latin subset, SIL OFL). Every text element uses one of the --t-* styles below — nothing
   else — so all pages share one type scale: headings 500, text 400. */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 500;
    font-display: swap;
    src: url(fonts/inter-latin.woff2) format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: italic;
    font-weight: 400 500;
    font-display: swap;
    src: url(fonts/inter-latin-italic.woff2) format('woff2');
}

/* The few 2004 layout rules still needed (from mystyle/header/home/event.css). */
body {
    margin: 0;
    padding: 0;
    text-align: center;
}
#frame {
    margin: 0 auto;
}
#frame a img {
    border: 0;
}
#header {
    text-align: left;
}
#nav {
    list-style: none;
    padding: 0;
}
#nav a {
    display: block;
}
#left {
    clear: left;
    float: left;
    width: 160px;
}
#right {
    float: right;
    width: 160px;
}
#middle {
    margin: 0 160px;
    padding: 0 10px;
    text-align: center;
}
#middle h1,
#middle h2,
#middle h3,
#middle h4 {
    margin: 0;
    padding: 0;
}
#middle p {
    margin: 10px 25px;
}
#middle img,
#image img {
    margin-top: 10px;
}
#block {
    margin-top: 10px;
    text-align: center;
}
#block img {
    margin: 10px 0;
}

:root {
    --ink: #1f2a33;
    --text: #36424c;
    --muted: #6e7c88;
    --line: #dde4ea;
    --accent: #2f6f9f; /* slate blue — the old site's #39c hover, calmer: years, current menu, hover */
    --page: #f0f7ff; /* near-white with a hint of blue (Marlon's pick) — lighter than the bands */
    --band: #e4ebf1; /* soft blue-grey for the header/footer — the old grey bars, freshened */
    --sans: Inter, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --serif: var(
        --sans
    ); /* the headings' face — all sans now; kept as a token so it's one switch */

    --t-logo: 500 25px/1.1 var(--serif);
    --t-title: 500 29px/1.2 var(--serif); /* page title */
    --t-section: 500 21px/1.3 var(--serif); /* section heading */
    --t-name: 500 17px/1.35 var(--serif); /* artwork caption / person */
    --t-work: italic 400 15px/1.45 var(--serif); /* title of a work */
    --t-year: 500 14.5px/1.65 var(--serif);
    --t-body: 400 15px/1.65 var(--sans);
    --t-meta: 400 13px/1.5 var(--sans); /* medium, dates, small print */
    --t-label: 500 11px/1.7 var(--sans); /* SPACED CAPITALS — use with .label rules */
    --t-nav: 400 14px/1.5 var(--sans);
}

body {
    background: var(--page);
    color: var(--ink);
    -webkit-text-size-adjust: 100%;
}

/* Fluid instead of a fixed 770px: same on desktop, fits a phone. */
body #frame {
    width: auto;
    max-width: 770px;
    background: #fff;
    box-shadow: 0 1px 18px -6px rgba(31, 42, 51, 0.12); /* soft lift off the blue-grey */
}
body #frame::after {
    content: '';
    display: table;
    clear: both;
}
body #header,
body #footer {
    width: auto;
}
body img {
    max-width: 100%;
    height: auto;
}

/* Reset: everything upright, sans, body colour; the roles below opt in to serif/italic. */
body #frame * {
    font-family: var(--sans);
    font-variant-numeric: lining-nums; /* tabular-safe, no old-style figures */
}
body #frame h1,
body #frame h2,
body #frame h3,
body #frame h4,
body #frame p,
body #frame dt,
body #frame dd {
    font-style: normal;
    color: var(--ink);
    letter-spacing: normal;
}
body #frame a {
    color: var(--ink);
    text-decoration-color: var(--line);
    text-underline-offset: 3px;
}
body #frame a:hover {
    color: var(--accent);
}

/* ---- Roles ------------------------------------------------------------------------------- */

/* Page title */
body #frame #content h1,
body #frame > h1 {
    margin: 18px 0 4px;
    font: var(--t-title);
}

/* Section heading */
body #frame > h4,
body #frame #middle h1 {
    margin: 30px 0 12px;
    font: var(--t-section);
}
body #frame #middle h1 {
    margin: 14px 0 6px;
}

/* Artwork caption / person */
body #frame #image h1,
body #frame #block h1 {
    margin: 12px 0 2px;
    font: var(--t-name);
    background: none;
}

/* Title of a work */
body #frame #block h4,
body #frame #middle h2:first-of-type {
    margin: 4px 0;
    font: var(--t-work);
    color: var(--text);
}

/* Body text */
body #frame > p,
body #frame dd,
body #frame #middle h2 + h2 {
    font: var(--t-body);
    color: var(--text);
}

/* Meta: medium, dates, small print */
body #frame #image h2,
body #frame #block h2,
body #frame #block h3,
body #frame #middle h4,
body #frame #block a,
body #frame #footer h1 {
    margin: 0;
    font: var(--t-meta);
    color: var(--muted);
}

/* Labels in spaced capitals */
body #frame #content h3,
body #frame #bigger h3,
body #frame > h2,
body #frame #home span {
    margin: 2px 0;
    font: var(--t-label);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--muted);
}

/* "Artist" under the painting on the About page repeats the "Contemporary Artist" label. */
body #frame > h3 {
    display: none;
}

/* ---- Header & menu ----------------------------------------------------------------------- */

body #header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px 24px;
    padding: 24px 24px 16px;
    margin-bottom: 10px;
    background: var(--band);
    border-bottom: 1px solid var(--line);
}
body #frame #home {
    font: var(--t-logo);
    color: var(--ink);
    text-decoration: none;
}
body #frame #home span {
    display: block;
    margin-top: 7px;
}
body #nav {
    display: flex;
    float: none;
    width: auto;
    margin: 0;
    background: none;
}
body #nav li {
    float: none;
}
body #nav li:hover,
body #nav li.sfhover {
    background: none;
}
body #frame #nav a {
    padding: 4px 0 4px 24px;
    font: var(--t-nav);
    color: #555;
    text-decoration: none;
}
body #frame #nav a:hover {
    color: var(--ink);
}
body #frame #nav a[aria-current] {
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: var(--accent);
    text-decoration-thickness: 1.5px;
    text-underline-offset: 8px;
}

/* ---- Home page --------------------------------------------------------------------------- */

body #block {
    border: 1px solid var(--line);
    padding: 0 6px 10px;
}
body #frame #block h1 a.heading {
    font: inherit;
    color: var(--ink);
    text-decoration: none;
}
body #frame #block h4 {
    font-size: 14px; /* --t-work, a size down to fit the narrow cards */
}
body #block h1 a.heading:hover {
    background: none;
    color: var(--accent);
}

/* ---- Paintings: a white mat and a soft shadow, like a framed print ------------------------ */

body #middle > img,
body #image img,
body #frame > img {
    background: #fff;
    padding: 8px;
    border: 1px solid var(--line);
    box-shadow: 0 12px 26px -14px rgba(0, 0, 0, 0.4);
}
body #image {
    margin: 14px 12px 0;
}

/* ---- About page -------------------------------------------------------------------------- */

body #frame p {
    width: auto;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
}
body #frame > p {
    padding: 0 16px;
}
body #frame > img {
    margin-top: 16px;
}

/* Exhibitions: a two-column timeline — year | entry — with hairlines between rows. */
body #frame dl {
    display: grid;
    grid-template-columns: 7.5em 1fr;
    column-gap: 14px;
    max-width: 640px;
    margin: 0 auto 10px;
    padding: 0 16px;
    text-align: left;
}
body #frame dt,
body #frame dd {
    margin: 0;
    padding: 9px 0;
    border-top: 1px solid var(--line);
}
body #frame dt {
    grid-column: 1;
    font: var(--t-year);
    color: var(--accent);
}
body #frame dd {
    grid-column: 2;
    text-indent: 0;
}

/* ---- Footer: a soft grey band with a quiet centred line ---------------------------------- */

body #footer {
    float: none;
    clear: both;
    height: auto;
    margin-top: 28px;
    padding: 16px 8px 20px;
    background: var(--band);
    border-top: 1px solid var(--line);
    text-align: center;
}

/* Lining figures everywhere. Must come after the roles: the `font` shorthand resets
   font-variant-numeric, and Cormorant's default old-style figures make 2016 read as "2o16". */
body #frame * {
    font-variant-numeric: lining-nums !important;
}

/* ---- Phones: the 3-column home page stacks — feature painting first, then the two cards --- */

@media (max-width: 640px) {
    body #frame {
        display: flex;
        flex-direction: column;
    }
    body #header {
        order: 0;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    body #middle {
        order: 1;
        margin: 0;
        padding: 0 12px;
    }
    body #left,
    body #right {
        order: 2;
        float: none;
        width: auto;
        max-width: 260px;
        margin: 16px auto 0;
    }
    body #footer {
        order: 3;
        margin-top: 16px;
    }
    body #frame #nav a {
        padding: 4px 12px;
    }
    body #frame #content h1,
    body #frame > h1 {
        font-size: 25px;
    }
}