/* Fonts are loaded via in each page . An @import here would fetch the same two families a second time AND block CSS parsing until it resolves. */ :root { --burgundy: #43151d; --burgundy-deep: #2e0d13; --burgundy-soft: #5a2027; --ivory: #f6f0e6; --paper: #eee1cf; --paper-deep: #e3d1b8; --gold: #c49855; --gold-pale: #e6c17e; --ink: #30201e; --muted: #71635d; --line: rgba(103, 66, 50, .28); --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; --sans: 'DM Sans', Arial, Helvetica, sans-serif; --container: 1200px; --shadow: 0 20px 50px rgba(44, 20, 15, .14); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; color: var(--ink); background: var(--ivory); font-family: var(--sans); font-size: 16px; line-height: 1.65; text-rendering: optimizeLegibility; } body.modal-open { overflow: hidden; } img, video { display: block; max-width: 100%; height: auto; } button, input, textarea, select { font: inherit; } button, a { -webkit-tap-highlight-color: transparent; } a { color: inherit; text-decoration: none; } a:hover { color: var(--burgundy-soft); } h1, h2, h3, p { margin-top: 0; } h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: .98; letter-spacing: -.025em; } h1, h2 { text-wrap: balance; } p { margin-bottom: 1rem; } .container { width: min(calc(100% - 84px), var(--container)); margin-inline: auto; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .skip-link { position: fixed; left: 1rem; top: -4rem; z-index: 1000; background: var(--gold-pale); color: var(--burgundy-deep); padding: .65rem .9rem; border-radius: 2px; font-weight: 600; } .skip-link:focus { top: 1rem; } /* Header */ .site-header { position: sticky; top: 0; z-index: 40; min-height: 76px; display: flex; align-items: center; background: rgba(249, 246, 239, .98); border-bottom: 1px solid rgba(68, 31, 26, .12); } .nav-wrap { display: flex; align-items: center; justify-content: space-between; gap: 2rem; } .brand { color: var(--ink); font-family: var(--serif); font-size: clamp(1.35rem, 2.2vw, 1.65rem); font-weight: 700; letter-spacing: -.02em; white-space: nowrap; } .brand:hover { color: var(--burgundy); } .nav-links { display: flex; align-items: center; gap: clamp(1.7rem, 3.5vw, 3.25rem); margin: 0; padding: 0; list-style: none; text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; font-weight: 600; } .nav-links a { display: inline-block; padding: .45rem 0; color: var(--ink); } .nav-links a:hover, .nav-links a[aria-current='page'] { color: var(--burgundy); } .nav-short { display: none; } /* Shared type and buttons */ .eyebrow { margin-bottom: 1.15rem; color: var(--burgundy-soft); font-family: var(--sans); font-size: .72rem; font-weight: 600; letter-spacing: .12em; line-height: 1.2; text-transform: uppercase; } .eyebrow::after { content: ''; display: block; width: 3.8rem; height: 1px; margin-top: .85rem; background: var(--gold); } .button { display: inline-flex; align-items: center; justify-content: center; min-height: 2.9rem; padding: .7rem 1.45rem; border: 1px solid transparent; border-radius: 2px; cursor: pointer; font-family: var(--sans); font-size: .78rem; font-weight: 600; letter-spacing: .03em; line-height: 1.2; transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease; } .button:hover { transform: translateY(-1px); } .button--gold { background: var(--gold); color: var(--burgundy-deep); box-shadow: 0 7px 18px rgba(36, 12, 13, .18); } .button--gold:hover { background: var(--gold-pale); color: var(--burgundy-deep); } .button--burgundy { background: var(--burgundy); color: var(--ivory); } .button--burgundy:hover { background: var(--burgundy-soft); color: var(--ivory); } .button--outline { border-color: rgba(92, 46, 37, .48); background: transparent; color: var(--burgundy); } .button--outline:hover { border-color: var(--burgundy); background: var(--burgundy); color: var(--ivory); } .muted { color: var(--muted); } /* Home hero */ .hero { position: relative; overflow: hidden; background: var(--burgundy); color: var(--ivory); } .hero-art { position: absolute; inset: 0; background: url('/assets/hero-botanical.webp') center / cover no-repeat; } .hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, .9fr) minmax(320px, 1.1fr); align-items: center; gap: 3rem; min-height: 660px; padding-block: 4.8rem 5.4rem; } .hero-copy { padding-inline: 1.15rem 0; } .hero h1 { margin-bottom: 1.65rem; color: #f8eedf; font-size: clamp(4.6rem, 6.8vw, 6.7rem); line-height: .8; } .hero h1 span { display: block; white-space: nowrap; } .gold-rule { width: 4.6rem; height: 2px; margin-bottom: 1.1rem; background: var(--gold-pale); } .hero-role { margin-bottom: .55rem; color: #fbf0df; font-family: var(--serif); font-size: clamp(1.35rem, 2.4vw, 2rem); font-weight: 600; } .hero-strap { margin-bottom: 2rem; color: var(--gold-pale); font-family: var(--serif); font-size: clamp(1.2rem, 2.4vw, 1.7rem); font-style: italic; line-height: 1.1; } .hero .button { min-width: 15rem; } .hero-portrait { justify-self: center; width: min(100%, 430px); margin: 0; } .portrait-mat { padding: .55rem; background: #eee0c9; border: 1px solid rgba(255, 238, 201, .65); box-shadow: 0 18px 38px rgba(21, 7, 8, .3); } .portrait-mat picture, .portrait-mat img { width: 100%; height: auto; } .portrait-mat img { border: 1px solid rgba(61, 24, 24, .2); } .hero-statement { position: relative; z-index: 2; background: rgba(45, 12, 18, .88); border-top: 1px solid rgba(223, 188, 116, .2); } .statement-inner { display: flex; align-items: center; gap: 1.3rem; min-height: 102px; padding-block: 1rem; } .book-mark { width: 2.5rem; flex: 0 0 auto; color: var(--gold-pale); } .statement-inner p { margin: 0; color: #f8ecdd; font-family: var(--serif); font-size: 1.12rem; line-height: 1.2; } /* Biography and film */ .biography-section { background: var(--ivory); } .bio-intro { display: grid; grid-template-columns: .83fr 1.17fr; align-items: center; gap: clamp(3rem, 8vw, 8rem); padding-block: clamp(5.2rem, 9vw, 8.5rem) clamp(4.2rem, 7vw, 6.5rem); } .bio-copy { max-width: 31rem; } .bio-copy h2 { margin-bottom: 1.3rem; font-size: clamp(3.5rem, 6vw, 5.6rem); } .bio-copy > p:not(.eyebrow) { max-width: 29rem; color: var(--muted); font-size: .96rem; } .bio-copy .button { margin-top: 1.35rem; } .still-life { position: relative; min-height: 330px; margin: 0; overflow: hidden; } .still-life img { width: 100%; height: 100%; min-height: 330px; object-fit: cover; object-position: 62% center; } /* Abey block: a full-width statement, then the two objects it refers to — the film and the book — side by side and top-aligned, so nothing floats at an unrelated height. */ .film-block { padding-block: 3.2rem 5.2rem; border-top: 1px solid var(--line); } .film-intro { margin-bottom: clamp(2rem, 3.5vw, 3rem); } .film-intro h2 { margin-bottom: 1.1rem; font-size: clamp(3rem, 5vw, 4.3rem); } .film-intro > p:not(.eyebrow) { max-width: 34rem; margin-bottom: 0; color: var(--muted); } /* Proportional tracks (not a fixed px track) so neither object gets squeezed at mid widths. 2.85:1 lands the film at ~854px and the cover at ~300px in a full-width container. */ .film-objects { display: grid; grid-template-columns: minmax(0, 2.85fr) minmax(0, 1fr); align-items: start; gap: clamp(1.75rem, 2.5vw, 2.5rem); } .film-book .eyebrow { margin-bottom: 1rem; } .film-book .book-cover { max-width: 100%; } .film-credit { color: #9b7041; font-family: var(--serif); font-size: 1.05rem; font-style: italic; } /* Bare wrapper: the shadow and letterbox colour live on the video itself, so the credit below it sits on the page background instead of inside a dark caption bar. */ /* Hard cap at the film's native 854px — beyond this it upscales and visibly softens. */ .film-frame { margin: 0; max-width: 854px; } .film-frame video { width: 100%; aspect-ratio: 16 / 9; background: #1d1010; object-fit: cover; box-shadow: var(--shadow); } /* Colour/type deliberately omitted — .film-credit supplies them (this selector would outrank it). */ .film-frame figcaption { margin-top: .9rem; } /* Journey */ .journey-section { background: var(--paper); padding-block: clamp(4.8rem, 8vw, 7rem) clamp(4.6rem, 8vw, 6.8rem); } .section-heading { max-width: 49rem; } .section-heading h2 { margin-bottom: 1.1rem; font-size: clamp(3.6rem, 6.4vw, 5.8rem); } .section-heading > p:not(.eyebrow) { color: var(--muted); font-size: 1.02rem; } .timeline { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.4rem; margin-top: 4.3rem; } .timeline::before { content: ''; position: absolute; top: .35rem; left: 4%; right: 4%; height: 1px; background: #b2854d; } .timeline-item { position: relative; padding-top: 2rem; } .timeline-dot { position: absolute; top: 0; left: 0; width: .9rem; height: .9rem; border-radius: 50%; background: var(--burgundy); border: 2px solid var(--gold); box-shadow: 0 0 0 3px var(--paper); } .timeline-item h3 { margin-bottom: .45rem; font-size: 1.2rem; } .timeline-item p { margin: 0; color: var(--muted); font-size: .77rem; line-height: 1.45; } /* Archive preview */ .archive-section { background: #faf8f3; overflow: hidden; } .archive-preview { display: grid; grid-template-columns: 1fr .88fr; align-items: center; gap: 4rem; min-height: 430px; padding-block: 5.5rem 5.2rem; } .archive-copy { max-width: 36rem; } .archive-copy h2 { margin-bottom: .9rem; font-size: clamp(3.45rem, 5.5vw, 5.25rem); } .archive-copy > p:not(.eyebrow) { max-width: 32rem; color: var(--muted); font-size: .94rem; } .archive-search { display: flex; max-width: 31rem; margin-top: 1.4rem; border: 1px solid rgba(83, 55, 40, .42); background: #fffdfa; } .archive-search input { min-width: 0; flex: 1; padding: .82rem .95rem; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: .8rem; } .archive-search input::placeholder { color: #9b8d82; } .search-button { width: 3rem; border: 0; background: transparent; color: var(--burgundy); cursor: pointer; font-size: 1.35rem; line-height: 1; } .archive-actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: .85rem; } .archive-art { height: 310px; margin: 0; overflow: hidden; } .archive-art img { width: 100%; height: 100%; object-fit: cover; object-position: 58% center; } /* Inner pages and archive */ .page-main { background: var(--ivory); } .page-hero { position: relative; overflow: hidden; background: var(--burgundy); color: var(--ivory); } .page-hero::before { content: ''; position: absolute; inset: 0; background: url('/assets/hero-botanical.webp') center / cover no-repeat; opacity: .6; } .page-hero .container { position: relative; z-index: 1; padding-block: clamp(5rem, 9vw, 8rem); } .page-hero .eyebrow { color: var(--gold-pale); } .page-hero h1 { max-width: 58rem; margin-bottom: 1.25rem; color: #f8eedf; font-size: clamp(4rem, 8vw, 7.2rem); } .page-hero p:not(.eyebrow) { max-width: 36rem; color: #f1dfcc; font-size: 1.05rem; } .section { padding-block: clamp(4.4rem, 8vw, 7rem); } .biography-reading { background: var(--ivory); } .bio-layout { display: grid; grid-template-columns: minmax(240px, .72fr) minmax(0, 1.28fr); gap: clamp(3rem, 8vw, 8rem); align-items: start; } .bio-aside { max-width: 25rem; } .bio-aside figure { margin: 0; } .bio-aside .portrait-mat { max-width: 24rem; } .bio-aside figcaption { margin-top: .8rem; color: var(--muted); font-family: var(--serif); font-size: 1.1rem; } .bio-details { display: grid; gap: .8rem; margin-top: 1.6rem; border-top: 1px solid var(--line); } .bio-detail { display: flex; gap: 1rem; padding-top: .8rem; border-bottom: 1px solid var(--line); color: var(--muted); font-size: .84rem; } .bio-detail strong { min-width: 5.5rem; color: var(--burgundy); font-size: .71rem; letter-spacing: .1em; text-transform: uppercase; } .prose { max-width: 47rem; } .prose h2 { margin: 2.8rem 0 1.1rem; font-size: clamp(2.8rem, 5vw, 4.5rem); } .prose h2:first-of-type { margin-top: 0; } .prose p { color: var(--muted); font-family: var(--serif); font-size: 1.18rem; line-height: 1.52; } .prose em { color: var(--ink); } .book-cover { max-width: 16rem; margin: 1.6rem 0 2rem; padding: .55rem; background: #eee0c9; border: 1px solid rgba(255, 238, 201, .65); box-shadow: 0 18px 38px rgba(21, 7, 8, .3); } .book-cover picture, .book-cover img { width: 100%; height: auto; } .book-cover img { border: 1px solid rgba(61, 24, 24, .2); } .book-cover figcaption { margin-top: .7rem; color: var(--muted); font-family: var(--serif); font-size: .92rem; text-align: center; } .archive-catalog { background: #faf8f3; } .archive-toolbar { display: grid; grid-template-columns: 1.55fr repeat(3, 1fr); gap: .75rem; margin-top: 2.25rem; } .field, .select { width: 100%; min-height: 2.9rem; padding: .72rem .82rem; border: 1px solid rgba(83, 55, 40, .38); border-radius: 2px; outline: 0; background: #fffdfa; color: var(--ink); font-size: .82rem; } .field:focus, .select:focus, .archive-search:focus-within { border-color: var(--burgundy); box-shadow: 0 0 0 2px rgba(196, 152, 85, .28); } .archive-meta { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1rem; color: var(--muted); font-size: .78rem; } .archive-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1.6rem; } .doc-card { display: flex; flex-direction: column; min-height: 12rem; padding: 1.2rem; border: 1px solid rgba(83, 55, 40, .22); background: #fffdfa; } .doc-card__type { margin-bottom: .5rem; color: #9b7041; font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; } .doc-card h3 { margin-bottom: .65rem; font-size: 1.45rem; line-height: 1.05; overflow-wrap: anywhere; } .doc-card__path { margin-bottom: 1rem; color: var(--muted); font-size: .75rem; overflow-wrap: anywhere; } .doc-card__action { align-self: flex-start; margin-top: auto; padding: 0; border: 0; background: transparent; color: var(--burgundy); cursor: pointer; font-size: .75rem; font-weight: 600; } .doc-card__action:hover { color: var(--gold); } .results-empty { padding: 3rem 1rem; text-align: center; color: var(--muted); } .load-more-wrap { display: flex; justify-content: center; margin-top: 2rem; } .request-section { background: var(--burgundy); color: var(--ivory); } .request-panel { display: grid; grid-template-columns: .75fr 1.25fr; gap: clamp(3rem, 7vw, 7rem); align-items: start; } .request-panel .eyebrow { color: var(--gold-pale); } .request-panel h2 { color: #f8eedf; font-size: clamp(3rem, 5vw, 4.6rem); } .request-panel > div > p:not(.eyebrow) { max-width: 24rem; color: #e6d2c1; } .request-form { display: grid; gap: 1rem; } .request-form label { display: block; margin-bottom: .35rem; color: inherit; font-size: .74rem; font-weight: 600; } .request-form .field { border-color: rgba(246, 240, 230, .34); background: rgba(255, 253, 250, .96); } .request-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .form-status { min-height: 1.4rem; margin: 0; color: var(--gold-pale); font-size: .8rem; } .form-status[data-state='error'] { color: #ffd3c4; } .honeypot { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; } /* Footer and modal */ .site-footer { background: #fbf7ef; border-top: 1px solid rgba(83, 55, 40, .25); } .footer-inner { display: grid; grid-template-columns: 1.3fr .8fr .8fr 1fr; gap: 2rem; align-items: start; padding-block: 2.1rem 1.45rem; } .footer-brand h2 { margin-bottom: .15rem; font-size: 1.5rem; } .footer-brand p { margin-bottom: .1rem; color: var(--muted); font-size: .78rem; } .footer-brand em { color: #a37a46; font-family: var(--serif); font-size: .9rem; } .footer-nav { display: grid; gap: .45rem; align-content: start; padding-top: .35rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; } .footer-nav a:hover { color: var(--burgundy); } .footer-meta { display: grid; gap: .15rem; justify-content: end; padding-top: .35rem; color: var(--muted); font-size: .68rem; text-align: right; } .modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 1rem; background: rgba(24, 8, 11, .72); opacity: 0; pointer-events: none; transition: opacity .2s ease; } .modal.is-open { opacity: 1; pointer-events: auto; } .modal__panel { position: relative; width: min(100%, 38rem); max-height: min(90vh, 48rem); overflow-y: auto; padding: clamp(1.5rem, 4vw, 3rem); background: var(--ivory); box-shadow: var(--shadow); } .modal__close { position: absolute; top: .8rem; right: .8rem; width: 2.35rem; height: 2.35rem; border: 1px solid var(--line); background: transparent; color: var(--burgundy); cursor: pointer; font-size: 1.35rem; line-height: 1; } .modal__panel h2 { margin-bottom: .7rem; font-size: clamp(2.7rem, 5vw, 4rem); } /* Motion */ .reveal { opacity: 1; transform: none; transition: opacity .65s ease, transform .65s ease; } .reveal.is-visible { opacity: 1; transform: none; } @media (max-width: 900px) { .container { width: min(calc(100% - 48px), var(--container)); } .hero-inner { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 1.7rem; min-height: 590px; padding-block: 4rem 4.2rem; } .hero-copy { max-width: 36rem; padding-left: 0; } .hero h1 { font-size: clamp(4.2rem, 7vw, 6rem); } .hero-portrait { width: min(100%, 390px); } .bio-intro { grid-template-columns: 1fr 1fr; gap: 2.8rem; } .film-objects, .archive-preview { gap: 2.5rem; } .footer-inner { grid-template-columns: 1.2fr .8fr .8fr; } .footer-meta { justify-content: start; text-align: left; } .request-panel { grid-template-columns: 1fr; gap: 2.5rem; } } @media (max-width: 720px) { .container { width: min(calc(100% - 36px), var(--container)); } /* Mobile header: brand on its own line, full navigation always visible beneath it. No hamburger — every destination is reachable in one tap. */ .site-header { min-height: 0; } .nav-wrap { flex-direction: column; align-items: stretch; gap: 0; padding-block: .5rem 0; } .brand { align-self: center; padding-block: .2rem; font-size: 1.3rem; } .site-header nav { margin-top: .45rem; border-top: 1px solid rgba(68, 31, 26, .1); } .nav-links { justify-content: space-between; gap: .35rem; font-size: .64rem; letter-spacing: .07em; } .nav-links li { flex: 1 1 0; text-align: center; } .nav-links a { display: block; padding: .85rem .1rem; } .nav-links a[aria-current='page'] { color: var(--burgundy); box-shadow: inset 0 -2px 0 var(--gold); } .nav-long { display: none; } .nav-short { display: inline; } .hero-inner { grid-template-columns: 1fr; min-height: auto; padding-block: 4rem 3.2rem; } .hero h1 { font-size: clamp(4.25rem, 18vw, 6.4rem); } .hero h1 span { white-space: normal; } .hero-portrait { width: min(100%, 390px); } .statement-inner { align-items: flex-start; min-height: 0; padding-block: 1.1rem; } .statement-inner p { font-size: .98rem; } .statement-break, .desktop-break { display: none; } .bio-intro, .film-objects, .archive-preview, .bio-layout { grid-template-columns: 1fr; } .bio-intro { gap: 2.5rem; padding-block: 4.5rem 3.5rem; } .bio-copy { max-width: 34rem; } .bio-copy h2 { font-size: clamp(3.4rem, 15vw, 5rem); } .still-life { min-height: 260px; } .still-life img { min-height: 260px; } .film-block { padding-block: 2.7rem 4.2rem; } .film-intro h2 { font-size: clamp(3.2rem, 13vw, 4.8rem); } /* The book cover reads as a deliberate object on mobile: centred under the copy, not floated left */ /* Must match .film-book .book-cover specificity (media queries add none) or the desktop max-width:100% would win here and the cover would stretch full width on phones. */ .film-book .book-cover { max-width: 15rem; margin-inline: auto; } .journey-section { padding-block: 4.4rem; } .section-heading h2 { font-size: clamp(3.5rem, 14vw, 5.2rem); } .timeline { grid-template-columns: 1fr; gap: 1.35rem; margin-top: 2.6rem; padding-left: 1.45rem; } .timeline::before { top: 0; bottom: 0; left: .4rem; width: 1px; height: auto; } .timeline-item { padding-top: 0; padding-left: .9rem; } .timeline-dot { top: .2rem; left: -.02rem; width: .8rem; height: .8rem; } .timeline-item p br { display: none; } .archive-preview { gap: 2rem; padding-block: 4.5rem 4rem; } .archive-copy h2 { font-size: clamp(3.35rem, 14vw, 5rem); } .archive-art { height: 240px; } .page-hero h1 { font-size: clamp(3.9rem, 15vw, 6rem); } .bio-layout { gap: 3rem; } .bio-aside { max-width: 28rem; } .prose h2 { font-size: clamp(3rem, 12vw, 4.5rem); } .prose p { font-size: 1.1rem; } .archive-toolbar, .archive-grid { grid-template-columns: 1fr; } .archive-meta { align-items: flex-start; flex-direction: column; } .request-form__row { grid-template-columns: 1fr; gap: 1rem; } .footer-inner { grid-template-columns: 1fr 1fr; gap: 1.6rem; } .footer-brand { grid-column: 1 / -1; } .footer-meta { grid-column: 1 / -1; } } /* Narrow phones: stack the footer and give links comfortable tap targets */ @media (max-width: 430px) { .footer-inner { grid-template-columns: 1fr; gap: 1.9rem; } .footer-nav a { padding-block: .3rem; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .reveal { opacity: 1; transform: none; } }