/* SHARED TYPE AND COMPONENT STYLES. Theme values live in theme.css.
   Loaded last so labels/headings retain the guide’s font, size and colour. */

html {
    font-size: 100%;
    color-scheme: light;
    /* Paint the browser canvas too: mobile history restoration can expose it. */
    background-color: var(--bg);
    min-height: 100%;
}

body {
    font-family: var(--font-body);
    font-size: var(--type-body);
    line-height: 1.7;
    color: var(--ink);
    background: var(--bg)
}

h1,
h2,
h3,
h4,
.display-title {
    font-family: var(--font-display);
    font-weight: 400;
    color: var(--ink);
    text-transform: none
}

h1 {
    font-size: var(--type-page);
    line-height: 1.05;
    letter-spacing: -.05em
}

h2 {
    font-size: var(--type-section);
    line-height: 1.1;
    letter-spacing: -.04em
}

h3,
h4 {
    font-size: var(--type-subsection);
    line-height: 1.25;
    letter-spacing: -.025em
}

p,
li,
dd,
blockquote {
    font-family: var(--font-body);
    font-size: var(--type-body);
    line-height: 1.7
}

a {
    font: inherit
}

button,
input,
select,
textarea {
    font-family: var(--font-body);
    font-size: var(--type-small);
    line-height: 1.5
}

.lede,
.field-intro,
.intro {
    font-family: var(--font-body);
    font-size: var(--type-intro);
    line-height: 1.6
}

.eyebrow,
.kicker,
.number,
.label,
.resource-type,
.credential-issuer,
.credential-date,
.map-list-label,
.map-filters,
.map-key,
.map-attribution,
.membership-mark {
    font-family: var(--font-body);
    font-size: var(--type-label);
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .12em;
    text-transform: uppercase
}

.eyebrow,
.kicker,
.number,
.resource-type,
.label {
    color: var(--accent)
}

.top .brand {
    font-family: var(--font-display);
    font-size: var(--type-brand);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.03em
}

.top .brand .portfolio-label {
    font-family: var(--font-body);
    font-size: var(--type-label);
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: .12em;
    text-transform: uppercase
}

.top .brand small {
    font-family: var(--font-body);
    font-size: var(--type-label);
    font-weight: 400;
    letter-spacing: .04em
}

.top nav,
.actions,
.case-links,
.case-links a,
.button,
.text-link,
.resource-link,
.source-link,
.media-filters,
.story-menu,
.breadcrumb,
.next-project,
.media-intro-links,
.collection-links p,
.result-count,
.film .watch {
    font-family: var(--font-body);
    font-size: var(--type-small);
    line-height: 1.5
}

.button,
.actions,
.resource-link,
.source-link {
    font-weight: 600
}

figcaption,
.photo-grid figcaption,
.photo-grid figcaption strong,
.photo-note,
.hero-art small,
.source-note,
.credit,
.page-note,
.footer-signature,
.role,
.project-facts,
.tags,
.tags span,
.lightbox-top,
.lightbox p,
.lightbox small,
.education-list dd span,
.certification-list article>p:last-child {
    font-family: var(--font-body);
    font-size: var(--type-small);
    line-height: 1.6
}

figcaption h3 {
    font-family: var(--font-display);
    font-size: var(--type-subsection);
    line-height: 1.25
}

figcaption p {
    font-size: var(--type-body);
    line-height: 1.7
}

figcaption a,
figcaption small,
.photo-story figcaption small {
    font: inherit
}

.photo-grid figcaption strong {
    font-weight: 600
}

.project-title,
.film h3,
.campaign h3,
.collection-links h3,
.education-list dt,
.membership-heading {
    font-family: var(--font-display);
    font-size: var(--type-subsection);
    font-weight: 400;
    line-height: 1.25;
    letter-spacing: -.025em
}

.education-list dd {
    font-family: var(--font-body);
    font-size: var(--type-body);
    line-height: 1.7
}

.quote {
    font-family: var(--font-display);
    font-size: var(--type-subsection);
    line-height: 1.4;
    letter-spacing: -.025em
}

.proof-strip strong,
.metric strong {
    font-family: var(--font-display);
    font-size: var(--type-section);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -.04em
}

.proof-strip span,
.metric span {
    font-family: var(--font-body);
    font-size: var(--type-label);
    line-height: 1.5
}

.section-head h2.gallery-label,
.section-head #locations-heading {
    font-family: var(--font-display);
    font-size: var(--type-section);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -.04em;
    text-transform: none;
    color: var(--ink)
}

.pin-label {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0
}

.footer-signature {
    font-size: var(--type-small)
}

.play,
.arrow {
    font-family: var(--font-body);
    font-size: var(--type-intro);
    line-height: 1
}

.stamp {
    font-family: var(--font-body);
    font-size: var(--type-intro);
    font-weight: 700;
    line-height: 1.2
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0
}

@media(max-width:760px) {
    .top nav {
        font-size: var(--type-label)
    }

    .hero .hero-disciplines {
        font-size: var(--type-label)
    }

    .hero .lede {
        font-size: var(--type-intro)
    }

    .story-menu {
        position: static
    }

    .top .brand {
        white-space: normal
    }
}

@media(max-width:480px) {
    .proof-strip>div {
        grid-template-columns: 165px minmax(0, 1fr);
        gap: 15px
    }

    .proof-strip strong {
        font-size: 2rem
    }
}

small {
    font-size: var(--type-small);
    line-height: 1.6
}

.map-key,
.map-attribution {
    font-size: var(--type-small);
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none
}

.top nav a {
    font-weight: 600
}

/* Section labels retain the shared accent over contextual paragraph colours. */
.section-head p.kicker,
.about p.kicker {
    color: var(--accent);
    margin: 0 0 16px
}

/* Shared education and certification entries. */
.learning-layout .learning-heading {
    margin: 0 0 28px
}

.learning-list {
    display: grid;
    gap: 24px
}

.learning-entry {
    border-top: 1px solid var(--line);
    padding-top: 20px
}

.learning-entry .kicker {
    margin: 0 0 8px;
    color: var(--accent)
}

.learning-entry .learning-title {
    margin: 0 0 8px;
    font-size: var(--type-body);
    line-height: 1.7;
    color: var(--ink)
}

.learning-title strong {
    font-weight: 600
}

.learning-entry .learning-meta {
    margin: 0;
    font-size: var(--type-small);
    line-height: 1.6;
    color: var(--muted)
}


.photo-grid [data-photo="7"] img {
    object-position: 50% 50%
}

/* A closer thumbnail of Jonathan; the lightbox retains the full photograph. */
.photo-grid [data-photo="7"] img {
    transform: scale(1.85);
    transform-origin: 50% 80%;
    object-position: 50% 50%
}

.footer-signature .footer-reuse,
.footer-signature .footer-copyright {
    font-size: var(--type-small);
    line-height: 1.6;
    max-width: 360px;
    margin: 18px 0 0;
    color: var(--muted)
}

.footer-signature a {
    text-underline-offset: 3px
}

/* V4: Palette A with original editorial typography.
   Text spacing and responsive track sizing must withstand user overrides. */
.map-place-picker select { min-height: 44px; }
.button { white-space: normal; text-align: center; overflow-wrap: anywhere; }
.story-hero, .media-intro, .hero, .feature, .case, .field-feature,
.story-layout, .section-head, .about { min-width: 0; }
.story-hero > *, .media-intro > *, .hero > *, .feature > *, .case > *,
.field-feature > *, .story-layout > *, .section-head > *, .about > *,
.top > *, .project-facts > * { min-width: 0; }
h1, h2, h3, h4, .eyebrow, .kicker, .project-facts, .tags, .tags span,
.source-link, .resource-link, .footer-reuse { overflow-wrap: anywhere; }
.story-hero { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
.stats > *, .stats dd, .stats dt { min-width: 0; overflow-wrap: anywhere; }
.map-place-picker { margin: 0 0 20px; max-width: 550px; }
.map-place-picker label { display: block; font-weight: 600; margin-bottom: 6px; }
.map-place-picker select { width: 100%; font: inherit; color: var(--ink);
    background: var(--bg); border: 1px solid var(--muted); padding: 8px 12px; }
.map-focus-overlay { pointer-events: none; }
.document-actions { display: flex; flex-wrap: wrap; gap: 12px 24px; margin: 20px 0; }
.document-note { font-size: var(--type-small); color: var(--muted); }
.reading-document { max-width: 850px; }
.reading-document section { margin: 36px 0; }
.reading-document h2 { margin: 0 0 18px; }
.reading-document h3 { margin: 24px 0 12px; }
.reading-document ul { padding-left: 1.4em; }
.reading-document li { margin: 8px 0; }
.reading-document a { overflow-wrap: anywhere; }
@media (max-width: 760px) {
    .story-hero { grid-template-columns: minmax(0,1fr); }
    .brand-identity { white-space: normal !important; }
    .stats strong, .stats .stat-number { white-space: normal; }
}
@media (forced-colors: active) {
    .button, button, select { border: 1px solid ButtonText; }
    :focus-visible { outline: 3px solid Highlight !important; }
    .map-marker:focus-visible .pin-shape { stroke: Highlight; }
}

/* Long call-to-action labels must wrap under user text-spacing overrides. */
.story-invitation .button { white-space: normal; max-width: 100%; }

/* Text alternatives remain readable and usable at high text magnification. */
.transcript-lines { list-style: none; padding: 0; }
.transcript-lines li { display: grid; grid-template-columns: 4rem minmax(0,1fr); gap: 16px; margin: 18px 0; }
.transcript-time { font-variant-numeric: tabular-nums; }
.footer-accessibility { font-size: var(--type-small); line-height: 1.6; }

/* Map controls share one row: assignment filters left, location menu right.
   The menu retains an accessible name without a repeated visible label. */
.map-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin: 0 0 24px; }
.map-toolbar .map-filters { margin: 0; }
.map-toolbar .map-place-picker { margin: 0; width: 32%; max-width: 550px; min-width: 0; }
@media (max-width: 900px) {
    .map-toolbar { align-items: stretch; flex-direction: column; gap: 16px; }
    .map-toolbar .map-place-picker { width: 100%; max-width: none; }
}