/* ========================================================================== Grace Browne — site.css Four pigments, named as they are dug: white clay (nzu), blue black (uli), red ochre and yellow ochre. Nothing else. Contrast is checked against the white clay ground — see the notes beside each token. ========================================================================== */ /* -------------------------------------------------------------------------- 1. FONTS The .woff2 files are not included — see README.md for how to download them. Until they are in /fonts/, the fallback stack below is used automatically and the site still looks correct. -------------------------------------------------------------------------- */ @font-face { font-family: "Fraunces"; src: url("../fonts/fraunces-variable.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; } @font-face { font-family: "Fraunces"; src: url("../fonts/fraunces-italic-variable.woff2") format("woff2"); font-weight: 300 700; font-style: italic; font-display: swap; } @font-face { font-family: "Karla"; src: url("../fonts/karla-variable.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; } /* -------------------------------------------------------------------------- 2. TOKENS -------------------------------------------------------------------------- */ :root { /* colour — four foraged pigments */ --clay: #EFEAE0; /* WHITE CLAY (nzu) — the page ground */ --clay-deep: #E1D9C9; /* white clay, shadowed — hairlines */ --clay-warm: #E8E0D2; /* white clay, warmed — image placeholders */ --uli: #1C2431; /* BLUE BLACK — uli dye oxidised on skin. Body text. */ --uli-soft: #4A5364; /* blue black, thinned — secondary text (6.5:1) */ --red-ochre: #9A4526; /* RED OCHRE — links and emphasis (5.4:1, passes AA) */ --red-ochre-lt:#B25334; /* red ochre, lighter — for use on dark ground only */ --yellow-ochre: #C79238; /* YELLOW OCHRE — decorative only on light ground (2.3:1). Used for rules, selection, active states, and as text on blue black, where it passes at 5.6:1. */ --yellow-ochre-deep: #8A6420; /* yellow ochre, deepened — large text on light ground */ --shade: #141A24; /* blue black, deepened — footer and lightbox ground */ --heading: var(--yellow-ochre-deep); /* page titles (h1) */ --link: var(--yellow-ochre-deep); /* links, eyebrows, emphasis */ --rule: var(--red-ochre); /* accent hairlines */ /* type */ --serif: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif; --sans: "Karla", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; /* measure + rhythm */ --measure: 75ch; --gutter: clamp(20px, 4vw, 40px); --page: 1180px; --page-narrow: 880px; /* motion */ --ease: cubic-bezier(.22, .61, .36, 1); } /* -------------------------------------------------------------------------- 2b. DARK THEME — project pages only Added with class="theme-dark" on the element of files in projects/. This is NOT an inversion. Red ochre only manages 2.7:1 on this ground, so it is thinned with white clay to #C9714F (4.95:1) — which is what thinning red ochre with clay actually does. Yellow ochre, stuck as a decorative colour on the light ground at 2.3:1, becomes properly legible here at 6.3:1. -------------------------------------------------------------------------- */ .theme-dark { --clay: #141A24; /* uli ink becomes the ground */ --clay-deep: #2C3542; /* hairlines */ --clay-warm: #232B37; /* image placeholders */ --uli: #EFEAE0; /* white clay becomes the text — 14.6:1 */ --uli-soft: #EFEAE0; /* secondary text — white clay, same as body */ --red-ochre: #C9714F; /* red ochre thinned with clay — 4.95:1 */ --yellow-ochre: #C79238; /* 6.3:1 — legible on this ground */ --yellow-ochre-deep: #D9A64B; /* 7.9:1 */ --shade: #0B0F16; /* deeper still — footer and lightbox */ --heading: #D9A64B; /* page titles — yellow ochre deep, 7.9:1 */ --link: #C79238; /* links and emphasis — yellow ochre, 6.3:1 */ --rule: #C9714F; /* accent hairlines — red ochre */ } /* Rules that assumed --clay was the light colour. */ .theme-dark ::selection { background: var(--yellow-ochre); color: #141A24; } /* secondary text is now full-strength white clay, so the nav needs its own resting colour or every link looks like the current page. */ .theme-dark .site-nav a { color: #B0AAA0; } .theme-dark .site-nav a:hover { color: #EFEAE0; } .theme-dark .site-nav a[aria-current="page"] { color: var(--red-ochre); border-bottom-color: var(--red-ochre); } .theme-dark .nav-overlay a, .theme-dark .nav-overlay__close, .theme-dark .site-footer { color: #EFEAE0; } .theme-dark .site-footer { border-top: 1px solid #2C3542; } /* Give photographs a defined edge, so they read as images rather than as holes cut in the page. */ .theme-dark .work-item img, .theme-dark .feature__media img, .theme-dark .pod-feature__cover img, .theme-dark .project-figure img, .theme-dark .project-gallery img, .theme-dark .about-portrait img { background: #232B37; } /* ---- LIGHTBOX: soft white ---------------------------------------------- The one bright room in the site. Opening an image is a change of light — the work is lifted out of the ink and onto a gallery wall. It also means photographs shot against white sit correctly here, whatever they do in the grid. ----------------------------------------------------------------------- */ .theme-dark .lightbox { background: rgba(250, 249, 247, .99); } .theme-dark .lightbox__caption { color: #4A5364; } .theme-dark .lightbox__close, .theme-dark .lightbox__prev, .theme-dark .lightbox__next { color: #1C2431; /* was inheriting the dark --clay */ border-color: rgba(28, 36, 49, .25); } .theme-dark .lightbox__close:hover, .theme-dark .lightbox__prev:hover, .theme-dark .lightbox__next:hover { border-color: #1C2431; } .theme-dark .lightbox__figure img { background: transparent; } /* -------------------------------------------------------------------------- 3. RESET -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; /* so anchors clear the sticky bar */ } body { margin: 0; background: var(--clay); color: var(--uli); font-family: var(--sans); font-weight: 300; font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; } h1, h2, h3, h4 { font-family: var(--serif); font-weight: 300; margin: 0; } p { margin: 0 0 1em; } ::selection { background: var(--yellow-ochre); color: var(--uli); } :focus-visible { outline: 2px solid var(--red-ochre); outline-offset: 3px; } .skip-link { position: absolute; left: -9999px; top: 0; background: var(--uli); color: var(--clay); padding: 12px 18px; z-index: 200; font-size: 14px; } .skip-link:focus { left: 12px; top: 12px; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* -------------------------------------------------------------------------- 4. LAYOUT -------------------------------------------------------------------------- */ .wrap { width: 100%; max-width: var(--page); margin: 0 auto; padding-inline: var(--gutter); } .wrap--narrow { max-width: var(--page-narrow); } .rule { border: 0; border-top: 1px solid var(--clay-deep); margin: 0; } /* -------------------------------------------------------------------------- 5. HEADER + NAVIGATION -------------------------------------------------------------------------- */ /* The bar stays at the top of the window as the page scrolls. It is a full-width element so the ground and the ochre rule reach the edges. */ .site-bar { position: sticky; top: 0; z-index: 100; background: var(--clay); /* The bar's ground is the same ink as the page, so this line is what marks where it ends as content scrolls under it. 1px, not 2 — an edge, not a graphic element. */ border-bottom: 1px solid var(--yellow-ochre); margin-bottom: clamp(18px, 3vw, 30px); } .site-header { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding-block: 20px 16px; } .site-header__name { font-family: var(--serif); font-weight: 400; font-size: 19px; letter-spacing: .01em; margin: 0; } .site-header__name a { text-decoration: none; } .site-header__name a:hover { color: var(--link); } .site-nav { display: flex; gap: 26px; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; } .site-nav a { color: var(--uli-soft); text-decoration: none; padding-bottom: 3px; border-bottom: 1px solid transparent; transition: color .18s var(--ease), border-color .18s var(--ease); } .site-nav a:hover { color: var(--uli); border-bottom-color: var(--clay-deep); } .site-nav a[aria-current="page"] { color: var(--red-ochre); border-bottom-color: var(--red-ochre); } /* hamburger — hidden on desktop */ .nav-toggle { display: none; background: none; border: 0; padding: 8px; margin: -8px; cursor: pointer; color: var(--uli); } .nav-toggle__bars { display: block; width: 24px; height: 12px; position: relative; } .nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: currentColor; transition: transform .28s var(--ease), opacity .2s var(--ease); } .nav-toggle__bars::before { top: 0; } .nav-toggle__bars::after { bottom: 0; } body.nav-open .nav-toggle__bars::before { transform: translateY(5.5px) rotate(45deg); } body.nav-open .nav-toggle__bars::after { transform: translateY(-5.5px) rotate(-45deg); } /* full-screen overlay menu */ .nav-overlay { position: fixed; inset: 0; z-index: 140; background: var(--shade); display: flex; flex-direction: column; justify-content: center; padding: var(--gutter); opacity: 0; visibility: hidden; transition: opacity .28s var(--ease), visibility .28s; } body.nav-open .nav-overlay { opacity: 1; visibility: visible; } .nav-overlay a { font-family: var(--serif); font-size: clamp(30px, 9vw, 46px); font-weight: 300; text-decoration: none; padding: 10px 0; color: var(--clay); border-bottom: 1px solid rgba(199, 146, 56, .35); /* yellow ochre hairline */ } .nav-overlay a:hover { color: var(--red-ochre); } .nav-overlay a:last-of-type { border-bottom: 0; } .nav-overlay__close { position: absolute; top: 22px; right: var(--gutter); background: none; border: 0; cursor: pointer; font-size: 30px; line-height: 1; color: var(--clay); padding: 6px; } /* -------------------------------------------------------------------------- 6. HOME — an editorial scroll: who she is, what she has made, the podcast, and how to reach her. -------------------------------------------------------------------------- */ /* the lead image, full width of the content column */ .home-lead { margin: 0 0 clamp(30px, 4.5vw, 50px); } .home-lead img { width: 100%; height: clamp(300px, 56vh, 620px); object-fit: cover; display: block; background: var(--clay-warm); } .home-lead figcaption { font-size: 12.5px; color: var(--uli-soft); padding-top: 12px; } .home-intro { text-align: center; padding: 0 0 clamp(38px, 6vw, 62px); border-bottom: 1px solid var(--clay-deep); } .home-intro__name { font-size: clamp(42px, 7vw, 78px); line-height: 1; letter-spacing: -.018em; color: var(--heading); margin: 0 0 16px; } .home-intro__role { font-family: var(--serif); font-style: italic; font-weight: 300; color: var(--red-ochre); font-size: clamp(18px, 2.4vw, 25px); line-height: 1.3; margin: 0 auto 28px; max-width: 32ch; } .home-intro__text { max-width: 68ch; margin: 0 auto; font-size: clamp(16px, 1.9vw, 17.5px); line-height: 1.75; } .home-intro__text p { margin: 0 0 1em; } .home-intro__text p:last-child { margin-bottom: 0; } .home-intro__text em { font-family: var(--serif); font-style: italic; } .home-section { padding: clamp(42px, 6vw, 66px) 0 0; border-top: 2px solid var(--yellow-ochre); } .section-label { font-family: var(--sans); font-weight: 400; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--red-ochre); margin: 0 0 clamp(20px, 3vw, 30px); } /* a highlighted work: image one side, the writing the other */ .feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(26px, 4.5vw, 52px); align-items: center; padding: clamp(30px, 4.5vw, 48px) 0; border-top: 1px solid var(--clay-deep); } .feature:first-of-type { border-top: 0; } .feature:nth-of-type(even) .feature__media { order: 2; } .feature__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: center; display: block; background: var(--clay-warm); } .feature__media img[src*="keepers-00"] { object-position: center 34%; } .feature__kind { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--red-ochre); margin: 0 0 11px; } .feature__title { font-size: clamp(24px, 3vw, 33px); line-height: 1.15; color: var(--heading); margin: 0 0 11px; } .feature__title a { text-decoration: none; } .feature__title a:hover { color: var(--link); } .feature__meta { font-size: 13.5px; color: var(--uli-soft); margin: 0 0 15px; max-width: 44ch; } .feature__desc { font-size: 15.5px; margin: 0 0 21px; max-width: 55ch; } .read-more { font-size: 12px; letter-spacing: .11em; text-transform: uppercase; color: var(--link); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 3px; } .read-more:hover { color: var(--uli); } .home-allwork { text-align: right; margin: clamp(22px, 3vw, 30px) 0 0; } /* podcast, below the work */ .home-podcast { padding: clamp(46px, 6vw, 70px) 0 0; border-top: 2px solid var(--yellow-ochre); margin-top: clamp(30px, 4vw, 44px); } .pod-feature { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(26px, 4.5vw, 52px); align-items: center; } .pod-feature__cover img { width: 100%; display: block; background: var(--clay-warm); } .pod-feature__title { font-size: clamp(24px, 3vw, 33px); line-height: 1.15; color: var(--red-ochre); margin: 0 0 14px; } .pod-feature__title a { text-decoration: none; } .pod-feature__title a:hover { color: var(--link); } .pod-guests { font-size: 14px; color: var(--uli-soft); margin: 0 0 21px; max-width: 55ch; } .pod-guests span { display: block; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--red-ochre); margin-bottom: 6px; } /* commissioning invitation */ .home-cta { text-align: center; padding: clamp(52px, 8vw, 84px) 0 clamp(50px, 8vw, 80px); border-top: 1px solid var(--rule); margin-top: clamp(40px, 6vw, 64px); } .home-cta h2 { font-size: clamp(23px, 3.2vw, 33px); line-height: 1.25; margin: 0 auto 26px; max-width: 26ch; } .home-cta h2 em { font-style: italic; color: var(--heading); font-family: var(--serif); } .home-cta a { display: inline-block; border: 1px solid var(--rule); color: var(--uli); text-decoration: none; padding: 14px 32px; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; transition: background .18s var(--ease), color .18s var(--ease); } .home-cta a:hover { background: var(--red-ochre); color: #141A24; } /* -------------------------------------------------------------------------- 7. PAGE HEADS -------------------------------------------------------------------------- */ .page-head { padding-block: clamp(40px, 7vw, 74px) clamp(28px, 4vw, 44px); } .page-head h1 { font-size: clamp(34px, 5.5vw, 58px); line-height: 1.04; letter-spacing: -.012em; margin: 0 0 18px; color: var(--heading); } /* add class="title--red" to an

to set that one title in red ochre */ .page-head h1.title--red { color: var(--red-ochre); } .page-head__intro { font-size: 17px; color: var(--uli-soft); max-width: 68ch; margin: 0; } .eyebrow { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--link); margin: 0 0 14px; } .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--rule); padding-bottom: 12px; margin-bottom: 30px; } .section-head h2 { font-size: clamp(20px, 2.6vw, 26px); } .link-more { font-size: 12.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--link); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; white-space: nowrap; } .link-more:hover { color: var(--uli); } /* -------------------------------------------------------------------------- 8. WORK GRID — two columns, masonry via CSS multi-column -------------------------------------------------------------------------- */ /* Uniform landscape crops, so the rows line up. object-fit: cover means the image fills a 3:2 box and is trimmed rather than squashed — object-position below nudges the crop on the few images that need it. */ .work-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 4.5vw, 54px) clamp(20px, 3.4vw, 40px); padding-bottom: clamp(50px, 8vw, 90px); align-items: start; } .work-item { margin: 0; } .work-item a { text-decoration: none; display: block; } .work-item img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: center; background: var(--clay-warm); transition: opacity .25s var(--ease); } /* portrait originals — shift the crop so the subject is not cut off */ .work-item img[src*="keepers-00"] { object-position: center 34%; } .work-item a:hover img { opacity: .87; } .work-item__caption { padding-top: 13px; } .work-item__kind { display: block; font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--red-ochre); margin-bottom: 7px; } .work-item__title { font-family: var(--serif); font-style: italic; font-size: 17px; display: block; line-height: 1.3; color: var(--link); } .work-item a:hover .work-item__title { color: var(--uli); } .work-item__meta { display: block; font-size: 13px; color: var(--uli-soft); margin-top: 3px; letter-spacing: .01em; } /* the one-sentence description shown in the grid */ .work-item__desc { font-size: 14px; line-height: 1.55; color: var(--uli-soft); margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--rule); max-width: 55ch; } /* -------------------------------------------------------------------------- 9. PROJECT PAGES -------------------------------------------------------------------------- */ .back-link { display: inline-block; font-size: 12.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--uli-soft); text-decoration: none; padding-block: 20px 0; } .back-link:hover { color: var(--link); } .project-head { padding-block: 30px 40px; } .project-head h1 { font-size: clamp(32px, 5.2vw, 54px); line-height: 1.05; margin: 0 0 14px; letter-spacing: -.012em; color: var(--heading); } .project-head__meta { font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--uli-soft); margin: 0; } .project-lede { font-family: var(--serif); color: var(--red-ochre); font-size: clamp(19px, 2.3vw, 24px); font-weight: 300; line-height: 1.45; max-width: 55ch; margin: 26px 0 0; } .project-body { max-width: var(--measure); font-size: 16.5px; line-height: 1.75; padding-block: 12px 20px; } .project-body p { margin: 0 0 1.3em; } .project-body em { font-family: var(--serif); font-style: italic; } .project-body h2 { font-size: 22px; margin: 2em 0 .6em; } .project-figure { margin: 0 0 clamp(30px, 4vw, 48px); } .project-figure img { width: 100%; background: var(--clay-warm); } .project-figure figcaption { font-size: 13.5px; color: var(--uli-soft); padding-top: 11px; max-width: 58ch; line-height: 1.55; } /* Responsive video embed — keeps a 16:9 box whatever the screen width. */ .project-video video { width: 100%; display: block; background: var(--clay-warm); } .project-video { position: relative; width: 100%; background: var(--clay-warm); margin: 0 0 12px; padding-top: 56.25%; /* 16:9 fallback for older browsers */ } @supports (aspect-ratio: 16 / 9) { .project-video video { width: 100%; display: block; background: var(--clay-warm); } .project-video { padding-top: 0; aspect-ratio: 16 / 9; } } .project-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .project-video + figcaption { font-size: 13.5px; color: var(--uli-soft); padding-top: 11px; display: block; } .credits { margin: 0; max-width: var(--measure); } .credit { display: grid; grid-template-columns: minmax(0, 190px) minmax(0, 1fr); gap: 18px; padding: 9px 0; border-bottom: 1px solid var(--clay-deep); align-items: baseline; } .credit:last-child { border-bottom: 0; } .credit dt { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--uli-soft); } .credit dd { margin: 0; font-size: 15.5px; } .download { display: inline-flex; align-items: center; gap: 12px; border: 1px solid var(--rule); color: var(--uli); text-decoration: none; padding: 15px 22px; font-size: 14.5px; margin: 6px 0 30px; transition: background .18s var(--ease), color .18s var(--ease); } .download:hover { background: var(--red-ochre); color: #141A24; } .download small { display: block; font-size: 12px; color: var(--uli-soft); letter-spacing: .04em; } .download:hover small { color: rgba(20,26,36,.75); } /* long-form research pages */ /* The essay is the one place on the site where someone reads at length rather than scans, so it keeps a narrower measure than the rest (75ch). */ .essay { max-width: 68ch; font-size: 16.5px; line-height: 1.8; } .essay p { margin: 0 0 1.25em; } .essay em { font-family: var(--serif); font-style: italic; } .essay h2 { font-family: var(--serif); font-weight: 300; color: var(--heading); font-size: clamp(21px, 2.6vw, 26px); margin: 2.2em 0 .7em; } .essay blockquote { margin: 1.6em 0; padding-left: 20px; border-left: 2px solid var(--rule); font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--uli-soft); } .essay ul { padding-left: 20px; margin: 0 0 1.4em; } .essay li { margin-bottom: .5em; } .essay a { color: var(--link); text-underline-offset: 3px; } .byline { font-size: 13px; color: var(--uli-soft); letter-spacing: .06em; margin: 0 0 30px; } /* labelled sub-sections within a project page */ .project-section { padding-top: clamp(34px, 5vw, 50px); border-top: 1px solid var(--rule); margin-bottom: clamp(22px, 3vw, 32px); } .project-section h2 { font-size: clamp(20px, 2.6vw, 26px); color: var(--heading); margin: 0 0 8px; } .project-section > p { color: var(--uli-soft); font-size: 15.5px; max-width: var(--measure); margin: 0 0 4px; } .project-section .prose { font-size: 16.5px; margin-top: 14px; } .project-section .prose a { color: var(--link); text-underline-offset: 3px; } .screenings { list-style: none; margin: 0; padding: 0; max-width: var(--measure); } .screenings li { padding: 9px 0 9px 20px; border-bottom: 1px solid var(--clay-deep); font-size: 15.5px; position: relative; } .screenings li::before { content: ""; position: absolute; left: 0; top: 20px; width: 9px; height: 1px; background: var(--rule); } .screenings li:last-child { border-bottom: 0; } .screenings a, .cv__list a { color: var(--link); text-underline-offset: 3px; } .screenings a:hover, .cv__list a:hover { color: var(--uli); } .screenings em { font-family: var(--serif); font-style: italic; } /* Thumbnails in rows of three, cropped to a uniform landscape box. Click any one to see it whole in the lightbox — nothing is lost, only the thumbnail is trimmed. */ .project-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 22px); padding-bottom: clamp(40px, 6vw, 70px); } .project-gallery .lightbox-trigger { padding: 0; border: 0; background: none; cursor: zoom-in; display: block; width: 100%; } .project-gallery img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; transition: opacity .25s var(--ease); background: var(--clay-warm); } .project-gallery .lightbox-trigger:hover img { opacity: .87; } .project-nav { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; border-top: 1px solid var(--clay-deep); padding-block: 30px; margin-bottom: 40px; font-size: 13px; letter-spacing: .06em; } .project-nav a { color: var(--link); text-decoration: none; } .project-nav a:hover { color: var(--uli); } /* -------------------------------------------------------------------------- 10. LIGHTBOX (project pages only) -------------------------------------------------------------------------- */ .lightbox { position: fixed; inset: 0; z-index: 150; background: rgba(20, 26, 36, .975); display: none; padding: clamp(16px, 3vw, 40px); grid-template-rows: 1fr auto; gap: 18px; } .lightbox[open], .lightbox.is-open { display: grid; } .lightbox__figure { margin: 0; min-height: 0; display: flex; align-items: center; justify-content: center; } .lightbox__figure img { max-width: 100%; max-height: 100%; object-fit: contain; width: auto; } .lightbox__caption { color: rgba(239, 234, 224, .82); font-size: 14px; line-height: 1.55; max-width: 66ch; margin: 0 auto; text-align: center; } .lightbox__caption[hidden] { display: none; } .lightbox__close, .lightbox__prev, .lightbox__next { position: absolute; background: none; border: 1px solid rgba(242, 237, 228, .3); color: var(--clay); cursor: pointer; font-family: var(--sans); transition: border-color .2s var(--ease); } .lightbox__close:hover, .lightbox__prev:hover, .lightbox__next:hover { border-color: var(--clay); } .lightbox__close { top: 16px; right: 16px; width: 40px; height: 40px; font-size: 22px; line-height: 1; } .lightbox__prev, .lightbox__next { top: 50%; transform: translateY(-50%); width: 44px; height: 60px; font-size: 18px; } .lightbox__prev { left: 14px; } .lightbox__next { right: 14px; } body.lightbox-open { overflow: hidden; } /* -------------------------------------------------------------------------- 11. ABOUT -------------------------------------------------------------------------- */ /* The lead photograph runs full width — it is a landscape aerial and needs the room. The bio then sits in a reading measure beneath it. */ .about-portrait { margin: 0 0 clamp(30px, 5vw, 52px); } .about-portrait img { width: 100%; background: var(--clay-warm); } .about-portrait figcaption { font-size: 13px; color: var(--uli-soft); padding-top: 12px; max-width: 62ch; line-height: 1.55; } .about-layout { padding-bottom: clamp(40px, 6vw, 70px); } .prose { max-width: var(--measure); font-size: 16.5px; line-height: 1.75; } .prose p { margin: 0 0 1.3em; } .prose em { font-family: var(--serif); font-style: italic; } .prose h2 { font-size: 21px; margin: 2.2em 0 .7em; padding-bottom: 10px; border-bottom: 1px solid var(--clay-deep); } .prose h2:first-child { margin-top: 0; } .prose a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 3px; } /* CV */ .cv { padding-bottom: clamp(50px, 8vw, 90px); } .cv h2 { font-size: 21px; margin: 0 0 4px; } .cv__group { padding-block: 26px; border-top: 1px solid var(--clay-deep); } .cv__group:first-of-type { border-top: 0; padding-top: 6px; } .cv__group h3 { font-family: var(--sans); font-weight: 500; font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--yellow-ochre-deep); margin: 0 0 16px; } .cv__list { list-style: none; margin: 0; padding: 0; } .cv__list li { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 18px; padding-block: 7px; font-size: 15px; align-items: baseline; } .cv__year { color: var(--uli-soft); font-size: 13.5px; letter-spacing: .04em; } .cv__venue { color: var(--uli-soft); } /* -------------------------------------------------------------------------- 12. PODCAST -------------------------------------------------------------------------- */ /* statement left, show cover right */ .podcast-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: clamp(30px, 5vw, 64px); align-items: start; padding-bottom: clamp(34px, 5vw, 54px); } .podcast-side { display: flex; flex-direction: column; gap: 18px; } .podcast-cover img { width: 100%; display: block; background: var(--clay-warm); } .podcast-side .show-player { margin: 0; padding-top: 16px; border-top: 2px solid var(--yellow-ochre); } .show-player__label { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--red-ochre); margin: 0 0 12px; } .podcast-side .show-player iframe { width: 100%; border: 0; display: block; } .podcast-cover figcaption { font-size: 12.5px; color: var(--uli-soft); padding-top: 10px; } /* the statement — this is the page's real content */ .podcast-statement { max-width: 56ch; font-size: clamp(16.5px, 1.9vw, 18.5px); line-height: 1.75; } .podcast-statement p { margin: 0 0 1.15em; } .podcast-statement em { font-family: var(--serif); font-style: italic; } .podcast-statement a { color: var(--link); text-underline-offset: 3px; } .podcast-statement__lede { font-family: var(--serif); font-weight: 300; font-size: clamp(19px, 2.3vw, 24px); line-height: 1.4; color: var(--heading); margin: 0 0 1.1em; } .podcast-statement .signoff { font-family: var(--serif); font-style: italic; color: var(--red-ochre); margin-top: 1.4em; } /* one player for the whole show — never needs updating */ .show-player { margin: 0 0 clamp(34px, 5vw, 54px); } .show-player iframe { border: 0; width: 100%; max-width: 620px; display: block; border-radius: 12px; color-scheme: normal; } /* guests */ .guest-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(22px, 3vw, 34px) clamp(30px, 5vw, 56px); padding-bottom: clamp(40px, 6vw, 64px); } .guest h3 { font-family: var(--serif); font-weight: 300; font-style: italic; font-size: clamp(19px, 2.2vw, 23px); line-height: 1.25; margin: 0 0 5px; } .guest h3 a { color: var(--link); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .18s var(--ease); } .guest h3 a:hover { border-bottom-color: var(--link); } .guest p { font-size: 14.5px; color: var(--uli-soft); margin: 0; max-width: 40ch; } /* listen links at the foot of the page */ .listen-block { border-top: 1px solid var(--rule); padding-top: clamp(26px, 4vw, 38px); padding-bottom: clamp(50px, 8vw, 84px); } .listen-block h2 { font-size: clamp(20px, 2.6vw, 25px); margin: 0 0 6px; } .listen-block > p { color: var(--uli-soft); font-size: 15px; margin: 0 0 24px; max-width: 52ch; } .listen-row { display: flex; flex-wrap: wrap; gap: 14px; } /* "Watch on Vimeo", "Read more on the blog" and similar off-site links at the foot of a project page. Same treatment as the podcast Listen buttons. */ .listen-links { display: flex; flex-wrap: wrap; gap: 14px; } .listen-links a { display: inline-flex; align-items: center; border: 1px solid var(--rule); color: var(--uli); text-decoration: none; padding: 13px 20px; font-size: 14.5px; letter-spacing: .02em; transition: background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease); } .listen-links a:hover { background: var(--red-ochre); border-color: var(--red-ochre); color: #141A24; } /* the email links are assembled by JS; they inherit the surrounding style */ .email-link { color: inherit; } .listen-row a { display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--rule); color: var(--uli); text-decoration: none; padding: 13px 20px; font-size: 14.5px; letter-spacing: .02em; transition: background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease); } .listen-row a:hover { background: var(--red-ochre); border-color: var(--red-ochre); color: #141A24; } .listen-row a::before { content: "\25B6"; font-size: 10px; color: var(--link); transition: color .18s var(--ease); } .listen-row a:hover::before { color: #141A24; } @media (max-width: 860px) { .podcast-intro { grid-template-columns: minmax(0, 1fr); } .podcast-cover { max-width: 340px; } } @media (max-width: 700px) { .guest-grid { grid-template-columns: minmax(0, 1fr); } /* "Watch on Vimeo", "Read more on the blog" and similar off-site links at the foot of a project page. Same treatment as the podcast Listen buttons. */ .listen-links { display: flex; flex-wrap: wrap; gap: 14px; } .listen-links a { display: inline-flex; align-items: center; border: 1px solid var(--rule); color: var(--uli); text-decoration: none; padding: 13px 20px; font-size: 14.5px; letter-spacing: .02em; transition: background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease); } .listen-links a:hover { background: var(--red-ochre); border-color: var(--red-ochre); color: #141A24; } /* the email links are assembled by JS; they inherit the surrounding style */ .email-link { color: inherit; } .listen-row a { width: 100%; } } /* -------------------------------------------------------------------------- 13. CONTACT -------------------------------------------------------------------------- */ .contact-list { list-style: none; margin: 0; padding: 0; max-width: 620px; padding-bottom: clamp(50px, 8vw, 90px); } .contact-list li { border-top: 1px solid var(--clay-deep); padding-block: 24px; } .contact-list li:last-child { border-bottom: 1px solid var(--clay-deep); } .contact-list__label { display: block; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--link); margin-bottom: 8px; } .contact-list__value { font-family: var(--serif); font-size: clamp(20px, 3vw, 27px); font-weight: 300; text-decoration: none; word-break: break-word; } .contact-list__value:hover { color: var(--link); } .contact-list__note { font-size: 14px; color: var(--uli-soft); margin: 8px 0 0; } /* -------------------------------------------------------------------------- 14. FOOTER -------------------------------------------------------------------------- */ .site-footer { background: var(--shade); /* blue black, deepened */ color: var(--clay); /* white clay text — 13:1 */ border-top: 0; padding-block: 42px 52px; margin-top: 20px; font-size: 13px; } .site-footer__inner { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; align-items: baseline; } .site-footer a { color: var(--red-ochre); /* 5.5:1 on the footer ground */ text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .18s var(--ease); } .site-footer a:hover { border-bottom-color: var(--red-ochre); } .site-footer__links { display: flex; gap: 20px; flex-wrap: wrap; } /* -------------------------------------------------------------------------- 15. MOTION — subtle fade-up as items enter view -------------------------------------------------------------------------- */ .reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .7s var(--ease); will-change: opacity, transform; } .reveal.is-visible { opacity: 1; transform: none; } /* If JS is unavailable, never leave content invisible. */ .no-js .reveal { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } } /* -------------------------------------------------------------------------- 16. RESPONSIVE -------------------------------------------------------------------------- */ @media (max-width: 820px) { .feature { grid-template-columns: minmax(0, 1fr); gap: 20px; } .feature:nth-of-type(even) .feature__media { order: 0; } .pod-feature { grid-template-columns: minmax(0, 1fr); gap: 22px; } .pod-feature__cover { max-width: 300px; } } @media (max-width: 700px) { .credit { grid-template-columns: minmax(0, 1fr); gap: 3px; padding: 11px 0; } .work-grid { grid-template-columns: minmax(0, 1fr); } /* Responsive video embed — keeps a 16:9 box whatever the screen width. */ .project-video video { width: 100%; display: block; background: var(--clay-warm); } .project-video { position: relative; width: 100%; background: var(--clay-warm); margin: 0 0 12px; padding-top: 56.25%; /* 16:9 fallback for older browsers */ } @supports (aspect-ratio: 16 / 9) { .project-video video { width: 100%; display: block; background: var(--clay-warm); } .project-video { padding-top: 0; aspect-ratio: 16 / 9; } } .project-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .project-video + figcaption { font-size: 13.5px; color: var(--uli-soft); padding-top: 11px; display: block; } } @media (max-width: 620px) { .site-nav { display: none; } .nav-toggle { display: block; } .site-header { align-items: center; padding-block: 20px; } .cv__list li { grid-template-columns: 58px minmax(0, 1fr); gap: 12px; font-size: 14.5px; } .lightbox__prev, .lightbox__next { width: 38px; height: 50px; } } /* -------------------------------------------------------------------------- 17. PRINT — so a CV or bio prints cleanly -------------------------------------------------------------------------- */ @media print { .site-nav, .nav-toggle, .nav-overlay, .site-footer, .lightbox, .link-more { display: none !important; } body { background: #fff; color: #000; font-size: 11pt; } .reveal { opacity: 1 !important; transform: none !important; } a { text-decoration: none; color: #000; } }