/* Fonts are linked from the of each page, not @import-ed here — an @import forces the browser to fetch this stylesheet before it can even discover the font request, which delays first paint. */ :root { --bg: #F7F6F4; --ink: #1A1A18; --mid: #8A8A85; --border: #E2E0DB; --f-display: 'IM Fell English', Georgia, serif; --f-body: 'Lora', Georgia, serif; --f-mono: 'Roboto Mono', monospace; --gap: clamp(1rem, 3vw, 2rem); --max: 1400px; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { background: var(--bg); color: var(--ink); font-family: var(--f-body); -webkit-font-smoothing: antialiased; } img { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } nav { position: sticky; top: 0; z-index: 100; display: flex; justify-content: space-between; align-items: baseline; padding: 1.25rem var(--gap); background: var(--bg); border-bottom: 1px solid transparent; transition: border-color 0.3s; } nav.scrolled { border-bottom-color: var(--border); } .nav-name { font-family: var(--f-display); font-style: italic; font-size: 1.1rem; } .nav-links { display: flex; gap: 2rem; list-style: none; font-family: var(--f-mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--mid); } .nav-links a:hover { color: var(--ink); } .intro { max-width: var(--max); margin: 0 auto; padding: clamp(2rem, 5vw, 3.5rem) var(--gap) 1.25rem; } .intro h1 { font-family: var(--f-display); font-style: italic; font-weight: 400; font-size: clamp(1.8rem, 4vw, 3rem); line-height: 1.15; margin-bottom: 0.5rem; } .intro p { font-family: var(--f-mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--mid); } .grid { max-width: var(--max); margin: 0 auto; padding: 1.25rem var(--gap) 4rem; columns: 2; column-gap: 6px; } @media (min-width: 1100px) { .grid { columns: 3; } } .cell { break-inside: avoid; margin-bottom: 6px; } /* Each cell is a button so photos can be opened by keyboard as well as mouse. */ .cell-open { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; font: inherit; color: inherit; } .cell-open:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; } .cell img { width: 100%; height: auto; display: block; transition: opacity 0.3s ease; } .cell:hover img { opacity: 0.92; } .text-page { max-width: 600px; margin: 0 auto; padding: clamp(2rem, 6vw, 4rem) var(--gap) 5rem; } .text-page .eyebrow { font-family: var(--f-mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--mid); margin-bottom: 1.25rem; } .text-page h1 { font-family: var(--f-display); font-style: italic; font-weight: 400; font-size: clamp(1.8rem, 3.5vw, 2.5rem); line-height: 1.2; margin-bottom: 1.5rem; } .text-page p { line-height: 1.85; margin-bottom: 1.2rem; font-size: 0.95rem; } .contact-email { display: inline-block; margin-top: 1.5rem; font-family: var(--f-mono); font-size: 0.8rem; letter-spacing: 0.05em; border-bottom: 1px solid #B8A898; padding-bottom: 0.1rem; transition: border-color 0.2s; } .contact-email:hover { border-color: var(--ink); } footer { border-top: 1px solid var(--border); padding: 1.25rem var(--gap); display: flex; justify-content: space-between; font-family: var(--f-mono); font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--mid); } /* --- Lightbox ------------------------------------------------------------ */ body.lightbox-open { overflow: hidden; } .lightbox { --matte: clamp(0.9rem, 2.4vw, 2.25rem); position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; background: rgba(20, 20, 18, 0.96); padding: clamp(0.75rem, 2vw, 1.5rem); } .lightbox[hidden] { display: none; } .lightbox-stage { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; } /* The photo is mounted on a paper-coloured matte and centred, rather than stretched to the edges of the screen. */ .lightbox-frame { padding: var(--matte); background: var(--bg); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45); line-height: 0; } .lightbox-stage img { max-width: calc(84vw - 2 * var(--matte)); max-height: calc(78vh - 2 * var(--matte)); width: auto; height: auto; object-fit: contain; } .lightbox-bar { display: flex; align-items: baseline; justify-content: center; padding-top: 1rem; font-family: var(--f-mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(247, 246, 244, 0.55); } .lightbox button { border: 0; background: none; color: rgba(247, 246, 244, 0.7); font-family: var(--f-mono); font-size: 0.8rem; letter-spacing: 0.1em; cursor: pointer; padding: 0.6rem 0.8rem; transition: color 0.2s; } .lightbox button:hover, .lightbox button:focus-visible { color: #fff; } .lightbox-close { position: absolute; top: clamp(0.5rem, 2vw, 1rem); right: clamp(0.5rem, 2vw, 1rem); font-size: 1.1rem !important; line-height: 1; z-index: 2; } .lightbox-prev, .lightbox-next { position: absolute; top: 50%; transform: translateY(-50%); font-size: 1.5rem !important; padding: 1.2rem 0.9rem !important; z-index: 2; } .lightbox-prev { left: 0; } .lightbox-next { right: 0; } @media (prefers-reduced-motion: reduce) { .cell img { transition: none; } } @media (max-width: 700px) { .grid { columns: 1; } footer { flex-direction: column; gap: 0.4rem; } /* A narrow screen has no room to spare, so the matte gets thinner. */ .lightbox { --matte: 0.6rem; } }