/* nuances by nafis
   Structure: tokens -> base -> layout -> components -> gallery -> viewer -> utilities */

/* ---------- Fonts (self-hosted, Latin subset, SIL OFL) ---------- */
@font-face {
  font-family: 'Bodoni Moda';
  src: url('../fonts/bodoni-moda-latin-wght-normal.woff2') format('woff2');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Bodoni Moda';
  src: url('../fonts/bodoni-moda-latin-wght-italic.woff2') format('woff2');
  font-weight: 400 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/cormorant-garamond-latin-wght-normal.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/cormorant-garamond-latin-wght-italic.woff2') format('woff2');
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Kaushan Script';
  src: url('../fonts/kaushan-script-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('../fonts/manrope-latin-wght-normal.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  color-scheme: light dark;

  /* Light values below are the fallback for browsers without light-dark(). */
  /* Text is only ever black, white or the accent (blue on light, red on dark; AA
     on both themes). Backgrounds and hairlines may be neutral. Secondary text keeps the same colour and is set
     apart by size, weight and style instead (see --ink-muted). */
  --paper: #fff;
  --paper-sunken: #eceef2;
  --ink: #000;
  --ink-muted: var(--ink);
  --on-ink: #fff; /* text on an ink- or accent-coloured fill */
  --rule: #d8dbe2;
  --accent: #0071e3; /* Apple blue */
  --footer-accent: #2997ff;

  --font-display: 'Bodoni Moda', Didot, 'Bodoni MT', Georgia, serif;
  --font-script: 'Kaushan Script', 'Snell Roundhand', 'Segoe Script', cursive; /* the "by nafis" signature */
  --font-prose: 'Cormorant Garamond', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --font-text: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Fluid type scale */
  --step--1: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --step-1: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --step-2: clamp(1.5rem, 1.3rem + 1vw, 2.1rem);
  --step-3: clamp(2.25rem, 1.7rem + 2.6vw, 3.75rem);
  --step-4: clamp(3rem, 1.9rem + 5.5vw, 6.75rem);

  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --page-max: 96rem;
  --measure: 38rem;
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Dark values come from light-dark(), which follows the device setting until a
   visitor picks a theme with the toggle (js/theme.js sets data-theme). */
@supports (color: light-dark(#000, #fff)) {
  :root {
    --paper: light-dark(#fff, #0a0a0a);
    --paper-sunken: light-dark(#eceef2, #171717);
    --ink: light-dark(#000, #fff);
    --on-ink: light-dark(#fff, #000);
    --rule: light-dark(#d8dbe2, #333);
    --accent: light-dark(#0071e3, #ff4d5e);
    --footer-accent: light-dark(#2997ff, #ff4d5e);
  }
}

:root[data-theme='light'] {
  color-scheme: light;
}

:root[data-theme='dark'] {
  color-scheme: dark;
}

/* ---------- Base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Everything is sized in rem, so on big monitors (from about 1760px wide) the
     whole page scales up with the screen instead of floating in empty margins. */
  font-size: max(100%, calc(0.5vw + 7.2px));
}

html.has-viewer {
  overflow: hidden;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--step-0);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover {
  color: var(--accent);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection {
  background: var(--accent);
  color: var(--on-ink);
}

/* ---------- Layout ---------- */
.wrap {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: 0;
  z-index: 10;
  padding: 0.6rem 1rem;
  background: var(--ink);
  color: var(--on-ink);
  transform: translateY(-120%);
  transition: transform 0.2s var(--ease);
}

.skip-link:focus {
  transform: translateY(0.5rem);
  color: var(--on-ink);
}

/* ---------- Header and footer ---------- */
.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 2rem;
  padding-block: 1.5rem;
}

.wordmark,
.intro-mark {
  font-family: var(--font-display);
  font-size: 2.1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  text-decoration: none;
}

.wordmark span,
.intro-mark span {
  color: var(--accent);
}

.site-nav {
  margin-left: auto;
}

.theme-toggle {
  display: inline-grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  padding: 0;
  border: 1px solid var(--rule);
  background: none;
  color: var(--ink);
  cursor: pointer;
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
  color: var(--on-ink);
}

.theme-toggle {
  user-select: none;
  -webkit-touch-callout: none;
}

/* Brief confirmation ("Following your device") when the saved choice is cleared. */
.theme-status {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  z-index: 40;
  padding: 0.7rem 1.25rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--on-ink);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  opacity: 0;
  pointer-events: none;
  text-transform: uppercase;
  transform: translate(-50%, 0.75rem);
  transition: opacity 0.3s var(--ease), transform 0.5s var(--ease-out);
}

.theme-status.is-shown {
  opacity: 1;
  transform: translate(-50%, 0);
}

.theme-toggle svg {
  transition: transform 0.7s var(--ease-out);
}

.theme-toggle[aria-pressed='true'] svg {
  transform: rotate(180deg);
}

@media (max-width: 40rem) {
  /* Toggle sits opposite the wordmark; the nav drops to its own full-width row. */
  .theme-toggle {
    order: 1;
    margin-left: auto;
  }

  .site-nav {
    order: 2;
    flex-basis: 100%;
  }
}

.site-nav ul {
  display: flex;
  gap: clamp(0.15rem, 1vw, 0.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav a {
  display: inline-block;
  padding: 0.65rem 1.1rem;
  border: 1px solid transparent;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-decoration: none;
  text-transform: uppercase;
}

.site-nav a:hover {
  color: var(--on-ink);
}

@media (max-width: 30rem) {
  .site-nav ul {
    flex-wrap: wrap;
    gap: 0;
  }

  .site-nav a {
    padding: 0.6rem 0.7rem;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
  }
}

.site-nav a[aria-current='page'] {
  border-color: var(--ink);
}

.site-nav a[aria-current='page']:hover {
  border-color: var(--ink);
}

/* Interactive pills. A circle of colour grows from wherever the pointer entered
   (js/interactions.js sets --mx / --my) and shrinks back toward where it left. */
.site-nav a,
.button,
.filter,
.theme-toggle {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 999px;
}

.site-nav a::before,
.button::before,
.filter::before,
.theme-toggle::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--fill, var(--ink));
  clip-path: circle(0 at var(--mx, 50%) var(--my, 50%));
  transition: clip-path 0.6s var(--ease-out);
}

.site-nav a:hover::before,
.site-nav a:focus-visible::before,
.button:hover::before,
.button:focus-visible::before,
.filter:hover::before,
.filter:focus-visible::before,
.theme-toggle:hover::before,
.theme-toggle:focus-visible::before {
  clip-path: circle(150% at var(--mx, 50%) var(--my, 50%));
}

/* Button label that rolls up to reveal a copy of itself (built by interactions.js). */
.roll {
  position: relative;
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}

.roll__face {
  display: block;
  transition: transform 0.55s var(--ease-out);
}

.roll__face + .roll__face {
  position: absolute;
  inset: 0;
  transform: translateY(110%);
}

a:hover > .roll .roll__face,
a:focus-visible > .roll .roll__face,
button:hover > .roll .roll__face,
button:focus-visible > .roll .roll__face {
  transform: translateY(-110%);
}

a:hover > .roll .roll__face + .roll__face,
a:focus-visible > .roll .roll__face + .roll__face,
button:hover > .roll .roll__face + .roll__face,
button:focus-visible > .roll .roll__face + .roll__face {
  transform: translateY(0);
}

.site-footer {
  --footer-ink: #fff;
  --logo-size: clamp(11rem, 8rem + 20vw, 20rem);
  --n-height: calc(var(--logo-size) * 0.47); /* height of a Bodoni "n" */
  margin-top: clamp(3rem, 7vw, 5.5rem);
  background: #000;
  color: var(--footer-ink);
  font-size: var(--step--1);
}

.site-footer a {
  text-decoration: none;
}

.site-footer a:hover,
.site-footer a:focus-visible {
  color: var(--footer-accent);
}

/* Painted lettering: pictures seen through the letters (js/painted-text.js).
   Two layers crossfade; the letters are plain ink until the first picture has loaded. */
.painted {
  display: inline-grid;
}

.painted__layer {
  grid-area: 1 / 1;
  background: var(--painted-url, none) 50% 50% / cover no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  filter: brightness(var(--painted-brightness, 1)) saturate(1.1);
  transition: opacity 1.6s var(--ease);
}

.painted__layer + .painted__layer {
  opacity: 0;
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  [data-painted].is-painted .painted__layer {
    color: transparent;
    animation: painted-drift 22s ease-in-out infinite alternate;
  }
}

[data-painted].is-painted .painted__layer.is-shown {
  opacity: 1;
}

[data-painted].is-painted .painted__layer:not(.is-shown) {
  opacity: 0;
}

@keyframes painted-drift {
  from {
    background-position: 30% 25%;
  }

  to {
    background-position: 70% 75%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .painted__layer {
    animation: none !important;
    transition: none;
  }
}

/* Footer: a big "n." filled with photographs (js/footer-art.js), an invitation to write, and the link lists.
   --logo-size sets the letter; the text beside it is sized to end level with the letter's top and baseline. */
.footer__top {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.75rem 2rem;
  padding-block: clamp(2.25rem, 5vw, 3.5rem) clamp(1.75rem, 4vw, 2.5rem);
}

.footer__logo,
.footer__hello {
  grid-column: 1 / -1;
}

/* Boxes are .73em tall so the baseline sits on the bottom edge; the 0.47em letter then fills the lower part. */
.footer__logo {
  display: flex;
  align-items: flex-end;
  justify-self: start;
  height: var(--n-height);
  font-family: var(--font-display);
  font-size: var(--logo-size);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 0.73;
  color: #fff;
}

/* The letter and the dot are taller than the link (their boxes poke up above the letter), so only the link's
   own box, exactly the letter's height, takes the pointer. Otherwise the empty space above the "n." would
   steal clicks from whatever sits just over the footer. */
.footer__logo > * {
  pointer-events: none;
}

.footer__n {
  --painted-brightness: 1.25; /* keeps dusk photographs readable on black */
}

.footer__dot {
  color: var(--footer-accent);
}

.footer__hello {
  justify-self: start;
  margin-top: -0.07em; /* lets the capital's top, not the line box, meet the letter's top */
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.2rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
}

.footer__arrow {
  display: inline-block;
  color: var(--footer-accent);
  transition: transform 0.5s var(--ease-out);
}

.footer__hello:hover .footer__arrow,
.footer__hello:focus-visible .footer__arrow {
  transform: translateX(0.25em);
}

/* Wide screens: the letter on the left, "Say hello" pointing across to the two link lists on the right. */
@media (min-width: 70rem) {
  .site-footer {
    --logo-size: 22rem;
  }

  .footer__top {
    grid-template-columns: auto auto minmax(1rem, 1fr) auto auto;
    grid-template-areas: 'logo hello . explore elsewhere';
    align-items: start;
    gap: 0 clamp(1.5rem, 3vw, 3.5rem);
    min-height: var(--n-height);
  }

  .footer__logo {
    grid-area: logo;
    align-self: end;
  }

  .footer__hello {
    grid-area: hello;
  }

  .footer__explore {
    grid-area: explore;
  }

  .footer__elsewhere {
    grid-area: elsewhere;
  }
}

.footer__heading {
  margin-bottom: 0.6rem;
  font-family: var(--font-text);
  color: var(--footer-accent);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.footer__list {
  display: grid;
  gap: 0;
  margin: 0 0 -0.15rem; /* the last link's text, not its padding, rests on the letter's baseline */
  padding: 0;
  list-style: none;
}

.footer__list a {
  display: inline-block;
  padding-block: 0.15rem;
  font-size: 0.95rem;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size 0.5s var(--ease-out), color 0.3s var(--ease);
}

.footer__list a:hover,
.footer__list a:focus-visible {
  background-size: 100% 1px;
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  padding-block: 1rem 1.25rem;
  border-top: 1px solid #333;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
}

.footer__top-link {
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ---------- Page sections ---------- */
/* Home hero: fills the first screen. The canvas (js/hero-window.js) draws the name as a window onto
   the paintings inside .hero__stage; the lede and button sit below it. */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  padding-inline: var(--gutter);
}

.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.hero__stage {
  flex: 1 1 auto;
  display: grid;
  place-items: center;
  min-height: 45vh;
  padding-top: 6rem; /* the header sits over the top of the hero */
}

.hero__foot {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: clamp(1.75rem, 4vw, 2.5rem);
  padding-bottom: clamp(1.5rem, 4vh, 2.5rem);
  text-align: center;
}

.hero__lede {
  max-width: 44rem;
  font-family: var(--font-prose);
  font-size: clamp(1.45rem, 1.25rem + 0.7vw, 1.8rem);
  font-weight: 500;
  line-height: 1.35;
  text-wrap: balance;
}

/* Two lines on screens wide enough; on narrow ones the sentence just wraps. */
.hero__break {
  display: none;
}

@media (min-width: 40rem) {
  .hero__break {
    display: inline;
  }
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem 1rem;
}

/* Which work is showing, with a link to it and a way to move on. */
.hero__credit {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 1.25rem;
  padding-block: 1rem 1.5rem;
  border-top: 1px solid var(--rule);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.hero__count {
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

.hero__title-link {
  text-decoration: none;
}

.hero__next {
  margin-left: auto;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}

.hero__title-link:hover,
.hero__title-link:focus-visible,
.hero__next:hover,
.hero__next:focus-visible {
  color: var(--accent);
}

/* Shown only when scripts are off: the name as plain type. */
.hero__fallback {
  font-family: var(--font-display);
  font-size: clamp(4rem, 18vw, 12rem);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1;
}

.hero__dot {
  color: var(--accent);
}

.hero__by {
  display: block;
  text-align: right;
  color: var(--accent);
  font-family: var(--font-script);
  font-size: 0.3em;
  font-weight: 400;
  letter-spacing: 0;
  rotate: -3deg;
}

/* If the canvas cannot start, the visually hidden heading becomes the visible name. */
.hero--static .hero__title {
  position: static;
  width: auto;
  height: auto;
  margin: auto;
  overflow: visible;
  clip: auto;
  font-family: var(--font-display);
  font-size: clamp(3rem, 12vw, 8rem);
  font-weight: 500;
  white-space: normal;
}

/* The header floats over the top of the home page's hero. */
[data-page='home'] .site-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 5;
}

.button {
  display: inline-block;
  padding: 0.95rem 1.8rem;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.35s var(--ease), border-color 0.35s var(--ease),
    transform 0.45s var(--ease-out);
}

.button:hover,
.button:focus-visible {
  color: var(--on-ink);
}

.button--solid {
  --fill: var(--accent);
  background: var(--ink);
  color: var(--on-ink);
}

.button--solid:hover,
.button--solid:focus-visible {
  border-color: var(--accent);
}

.section {
  margin-top: clamp(3rem, 7vw, 6rem);
}

.section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  position: relative;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  padding-top: 1rem;
}

.section__head::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: var(--rule);
  transform-origin: left;
  transition: transform 1.4s var(--ease-out) var(--reveal-delay, 0s);
}

.eyebrow {
  margin: 0;
  font-family: var(--font-text);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.text-link {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.page-title {
  padding-block: clamp(2rem, 6vw, 5rem) clamp(1.5rem, 3vw, 2.5rem);
  font-size: var(--step-3);
}

/* Gallery: a photographer leaning in from the bottom-right corner of the screen, shown only while the
   Photography filter is active. The picture is already cropped at the bag and the legs, so those edges sit
   exactly on the screen's edges. */
.gallery-peek {
  position: fixed;
  right: 0;
  bottom: 0;
  z-index: 5;
  width: clamp(5rem, 11vw, 10rem);
  height: auto;
  pointer-events: none;
  user-select: none;
  opacity: 0;
  transform: translate(25%, 25%);
  transition: opacity 0.4s var(--ease-out), transform 0.7s var(--ease-out);
}

.gallery-peek.is-shown {
  opacity: 1;
  transform: none;
  transition: opacity 1s var(--ease-out) 0.25s, transform 1.5s var(--ease-out) 0.25s;
}

/* On first load, wait for the page entrance before the photographer arrives. */
.js-motion:not(.is-ready) .gallery-peek.is-shown {
  opacity: 0;
  transform: translate(25%, 25%);
}

@media (prefers-reduced-motion: reduce) {
  .gallery-peek,
  .gallery-peek.is-shown {
    transform: none;
    transition: opacity 0.3s linear;
  }
}

/* Series */
.series-back {
  margin: clamp(1.5rem, 3vw, 2.5rem) 0 0;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.series-back[hidden] + .page-title {
  padding-top: clamp(2rem, 6vw, 5rem);
}

.series-back + .page-title {
  padding-top: clamp(0.75rem, 1.5vw, 1.25rem);
}

.series-note {
  max-width: var(--measure);
  margin: 0 0 clamp(1.75rem, 3vw, 2.75rem);
  font-family: var(--font-prose);
  font-size: var(--step-1);
}

.series-note--meta {
  font-family: var(--font-text);
  font-size: var(--step--1);
}

.series-note:empty {
  display: none;
}

.series-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem) clamp(0.75rem, 1.6vw, 1.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.series-list[hidden] {
  display: none;
}

.series-card {
  display: block;
  text-decoration: none;
}

.series-card:hover {
  color: inherit;
}

.series-card .tile__image {
  aspect-ratio: 4 / 5;
  height: auto;
  object-fit: cover;
}

/* Medium index on the home page */
.medium-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule);
}

.medium-list a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.1rem;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
}

.medium-list__name {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
  transition: color 0.2s var(--ease);
}

.medium-list__name {
  display: inline-block;
  transition: transform 0.5s var(--ease-out), color 0.3s var(--ease);
}

.medium-list a:hover .medium-list__name,
.medium-list a:focus-visible .medium-list__name {
  color: var(--accent);
  font-style: italic;
  transform: translateX(0.6rem);
}

.medium-list__count {
  color: var(--ink-muted);
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
}

/* About and contact */
.prose-layout {
  display: grid;
  gap: 2rem clamp(2rem, 6vw, 6rem);
}

@media (min-width: 56rem) {
  .prose-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  }
}

.prose {
  max-width: var(--measure);
  font-family: var(--font-prose);
  font-size: clamp(1.35rem, 1.2rem + 0.7vw, 1.65rem);
  font-weight: 500;
  line-height: 1.45;
}

.prose p + p {
  margin-top: 1.25em;
}

.prose .prose__links {
  margin-top: 2em;
  font-family: var(--font-text);
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.prose .muted,
.muted {
  color: var(--ink-muted);
}

/* ---------- Contact ---------- */
.contact {
  --paint: none; /* set by js/contact.js to the painting currently in the headline */
}

.contact__head {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  padding-block: clamp(2rem, 6vw, 4.5rem) clamp(2.5rem, 5vw, 4rem);
}

.contact__title {
  width: fit-content;
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 20vw, 19rem);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.1;
  cursor: pointer;
}

/* room for the descender of the "y", which would otherwise fall outside the painted box */
.contact__title .painted__layer {
  padding-block: 0.04em 0.12em;
}

.contact__title .painted {
  margin-bottom: -0.12em;
}

.contact__dot {
  color: var(--accent);
}

.contact__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem 3rem;
}

.contact__lede {
  max-width: 28rem;
  font-family: var(--font-prose);
  font-size: clamp(1.3rem, 1.15rem + 0.6vw, 1.6rem);
  font-weight: 500;
  line-height: 1.35;
}

.contact__credit {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 1.25rem;
  font-size: var(--step--1);
}

.contact__credit a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.contact__shuffle {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}

.contact__shuffle span {
  display: inline-block;
  transition: transform 0.6s var(--ease-out);
}

.contact__shuffle:hover span,
.contact__shuffle:focus-visible span {
  transform: rotate(180deg);
}

.contact__grid {
  display: grid;
  gap: clamp(3rem, 6vw, 4rem) clamp(2.5rem, 7vw, 7rem);
  align-items: start;
}

@media (min-width: 56rem) {
  .contact__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }
}

/* 404: the same painted headline, a little smaller because the words are longer. */
.lost__head {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  padding-block: clamp(2rem, 6vw, 4.5rem) clamp(3rem, 6vw, 5rem);
}

.lost__title {
  font-size: clamp(3rem, 15vw, 14rem);
}

.lost__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

/* The note: a form that composes an email (see js/contact.js). */
.note__form {
  display: grid;
  gap: 1.75rem;
  margin-top: 1.5rem;
}

.note__topics {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.note__label {
  display: block;
  padding: 0; /* the <legend> shares this class */
  margin-bottom: 0.6rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.note__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.625rem;
}

.chip {
  position: relative;
}

.chip__input {
  position: absolute;
  opacity: 0;
  inset: 0;
  cursor: pointer;
}

.chip__text {
  display: block;
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: var(--step--1);
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease),
    transform 0.4s var(--ease-out);
}

.chip:hover .chip__text {
  border-color: var(--ink);
  transform: translateY(-2px);
}

.chip__input:checked + .chip__text {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}

.chip__input:focus-visible + .chip__text {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.note__field {
  display: block;
}

.note__input {
  display: block;
  width: 100%;
  padding: 0.4rem 0 0.7rem;
  border: 0;
  border-bottom: 1px solid var(--ink);
  border-radius: 0;
  background: none;
  color: inherit;
  font-family: var(--font-prose);
  font-size: clamp(1.3rem, 1.15rem + 0.5vw, 1.55rem);
  font-weight: 500;
  line-height: 1.35;
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.note__input--message {
  resize: vertical;
  min-height: 7rem;
}

.note__input::placeholder {
  color: inherit;
  opacity: 0.4;
}

.note__input:focus {
  outline: none;
  border-bottom-color: var(--accent);
  box-shadow: 0 1px 0 var(--accent);
}

.note__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.note__status {
  min-height: 1.4em;
  font-size: var(--step--1);
}

/* Elsewhere: big links that fill with the headline's painting when pointed at. */
.contact-list {
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule);
}

.contact-list li {
  display: grid;
  gap: 0.1rem;
  padding-block: 1rem;
  border-bottom: 1px solid var(--rule);
}

.contact-list__label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.contact-list a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1rem + 1.1vw, 1.75rem);
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: padding-left 0.5s var(--ease-out);
}

.contact-list a::after {
  content: '\2197';
  flex: none;
  font-family: var(--font-text);
  font-size: 0.7em;
  transition: transform 0.5s var(--ease-out);
}

.contact-list a:hover,
.contact-list a:focus-visible {
  padding-left: 0.6rem;
}

.contact-list a:hover::after,
.contact-list a:focus-visible::after {
  transform: translate(0.2em, -0.2em);
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .contact-list a:hover,
  .contact-list a:focus-visible {
    background: var(--paint) 50% 50% / cover no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

/* Where I am: two clocks, with a dot that glows by day. */
.clocks {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2.5rem;
  margin: 2.25rem 0 0;
  padding: 0;
  list-style: none;
}

.clocks__place {
  display: grid;
  gap: 0.15rem;
}

.clocks__name {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.clocks__name::before {
  content: '';
  width: 0.55rem;
  height: 0.55rem;
  border: 1px solid var(--ink);
  border-radius: 50%;
}

.clocks__place.is-day .clocks__name::before {
  border-color: var(--accent);
  background: var(--accent);
  animation: clock-glow 3.2s ease-in-out infinite;
}

.clocks__time {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

@keyframes clock-glow {
  50% {
    box-shadow: 0 0 0 0.35rem transparent;
    opacity: 0.55;
  }
}

@media (prefers-reduced-motion: reduce) {
  .clocks__place.is-day .clocks__name::before {
    animation: none;
  }
}

/* ---------- About ---------- */
/* The portrait is a cut-out, so it sits straight on the page; the title and statement share the other column. */
.about__body {
  display: grid;
  gap: clamp(1.5rem, 4vw, 2.5rem) clamp(2rem, 5vw, 5rem);
  padding-block: clamp(2rem, 6vw, 4.5rem) 0;
}

.about__title {
  font-size: var(--step-4);
  letter-spacing: -0.03em;
  line-height: 1;
}

.about__dot {
  color: var(--accent);
}

.about__figure {
  margin: 0;
}

.about__image {
  display: block;
  width: 100%;
  height: auto;
}

@media (min-width: 56rem) {
  .about__body {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    grid-template-areas:
      'figure title'
      'figure text';
    grid-template-rows: auto 1fr;
    align-items: start;
  }

  .about__title {
    grid-area: title;
  }

  /* The picture stays in view while the statement scrolls past. */
  .about__figure {
    grid-area: figure;
    position: sticky;
    top: 2rem;
  }

  .about__text {
    grid-area: text;
  }
}

@media (max-width: 55.99rem) {
  .about__figure {
    width: min(100%, 30rem);
  }
}

.about__text {
  max-width: 34rem;
  font-family: var(--font-prose);
  font-size: clamp(1.2rem, 1.1rem + 0.35vw, 1.4rem);
  font-weight: 500;
  line-height: 1.5;
}

.about__text p + p {
  margin-top: 1.1em;
}

/* The opening paragraph is set larger, with a display initial. */
.about__lead {
  font-size: 1.18em;
  line-height: 1.38;
}

.about__lead::first-letter {
  float: left;
  margin: 0.06em 0.1em 0 -0.02em;
  font-family: var(--font-display);
  font-size: 4.1em;
  font-weight: 500;
  line-height: 0.78;
}

/* One sentence from the statement, pulled out as a break between its halves. */
.about__pull {
  margin-block: 2rem;
  padding-left: 1.4rem;
  border-left: 3px solid var(--accent);
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.15;
}

.about__text .about__pull {
  margin-top: 2rem;
}

.about__text .about__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2.25rem;
  font-family: var(--font-text);
}

/* ---------- Filters ---------- */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.625rem;
  margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
  padding: 0;
  list-style: none;
}

.filter {
  appearance: none;
  min-height: 2.75rem;
  padding: 0.5rem 1.1rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: var(--step--1);
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease),
    color 0.2s var(--ease);
}

.filter:hover {
  border-color: var(--ink);
  color: var(--on-ink);
}

.filter[aria-pressed='true'] {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--on-ink);
}

.filter__count {
  margin-left: 0.45em;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

.filter[aria-pressed='true'] .filter__count {
  color: inherit;
}

/* ---------- Gallery: justified rows without JavaScript layout ----------
   Each item's flex-basis and flex-grow follow its aspect ratio (--ar), so
   images in a row share one height and rows fill the full width. */
.gallery {
  --gap: clamp(0.75rem, 1.6vw, 1.5rem);
  --row-height: clamp(9rem, 17vw, 16.5rem);
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--gap) * 1.5) var(--gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Keeps a short last row from stretching across the whole width. */
.gallery::after {
  content: '';
  flex-grow: 1000000;
  height: 0;
}

.gallery__item {
  flex-grow: calc(var(--ar) * 100);
  flex-basis: calc(var(--ar) * var(--row-height));
  min-width: 0;
}

.tile {
  display: block;
  text-decoration: none;
}

.tile:hover {
  color: inherit;
}

.tile__frame {
  display: block;
  overflow: hidden;
  background: var(--paper-sunken);
}

.tile__image {
  width: 100%;
  height: auto;
  opacity: 0;
  transition: opacity 0.5s var(--ease), transform 1.6s var(--ease-out);
}

.tile__image.is-loaded {
  opacity: 1;
}

.tile__caption {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding-top: 0.65rem;
}

.tile__title {
  font-family: var(--font-prose);
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.2;
}

.tile:hover .tile__title {
  font-style: italic;
}

.tile__meta {
  color: var(--ink-muted);
  font-size: var(--step--1);
}

/* ---------- Viewer ---------- */
.viewer {
  width: 100%;
  max-width: none;
  height: 100vh;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--paper);
  color: var(--ink);
}

.viewer[open] {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
}

.viewer:focus {
  outline: none; /* the container is focused only so arrow keys work */
}

.viewer::backdrop {
  background: var(--paper);
}

.viewer__stage {
  container-type: size; /* lets the picture size itself from the stage (cqw / cqh) */
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  place-items: center;
  padding: clamp(0.75rem, 3vw, 2.5rem);
  touch-action: pan-y pinch-zoom;
}

/* The box is exactly the picture: as large as fits the stage, never past 2x its real size. */
.viewer__image {
  width: min(100cqw, calc(100cqh * var(--picture-ratio, 1)), var(--picture-max-width, 100%));
  height: auto;
  aspect-ratio: var(--picture-ratio, 1);
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}

.viewer__image.is-loaded {
  opacity: 1;
}

.viewer__bar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1rem var(--gutter) calc(1.25rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--rule);
}

.viewer__title {
  font-size: var(--step-1);
}

.viewer__meta {
  color: var(--ink-muted);
  font-size: var(--step--1);
}

.viewer__controls {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0.25rem;
}

.viewer__button {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  background: none;
  color: inherit;
  cursor: pointer;
  transition: border-color 0.2s var(--ease);
}

.viewer__button:hover {
  border-color: var(--rule);
  color: var(--accent);
}

.viewer__button[hidden] {
  display: none;
}

.viewer__button svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.viewer__count {
  min-width: 6ch;
  color: var(--ink-muted);
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

/* ---------- Marquee: slow ticker of mediums under the hero ---------- */
.marquee {
  margin-top: clamp(2.5rem, 6vw, 5rem);
  padding-block: clamp(1rem, 2.4vw, 1.75rem);
  overflow: hidden;
  border-block: 1px solid var(--rule);
  user-select: none;
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 48s linear infinite;
}

.marquee:hover .marquee__track {
  animation-play-state: paused;
}

.marquee__group {
  display: flex;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.marquee__group li {
  display: flex;
  align-items: center;
  font-family: var(--font-display);
  font-size: clamp(2rem, 1rem + 4vw, 4.25rem);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.1;
  white-space: nowrap;
}

/* A small red dot between words, echoing the one in the logo. */
.marquee__group li::after {
  content: '';
  width: 0.14em;
  height: 0.14em;
  margin-inline: 0.6em;
  border-radius: 50%;
  background: var(--accent);
}

@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}

/* ---------- Motion (only when motion.js has added .js-motion) ---------- */
.js-motion [data-reveal] {
  opacity: 0;
  transform: translateY(1.75rem);
  transition: opacity 1s var(--ease-out) var(--reveal-delay, 0s),
    transform 1.1s var(--ease-out) var(--reveal-delay, 0s);
}

.js-motion [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* Hero text and button settle in after the name is written. */
.js-motion .hero__lede,
.js-motion .hero__actions,
.js-motion .hero__credit {
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity 1s var(--ease-out) var(--enter-delay), transform 1.1s var(--ease-out) var(--enter-delay);
}

.hero__lede { --enter-delay: 1.05s; }
.hero__actions { --enter-delay: 1.2s; }
.hero__credit { --enter-delay: 1.5s; }

.js-motion.is-ready .hero__lede,
.js-motion.is-ready .hero__actions,
.js-motion.is-ready .hero__credit {
  opacity: 1;
  transform: none;
}

/* Gallery pictures settle from slightly enlarged as their tile scrolls in. */
.js-motion .gallery__item[data-reveal]:not(.is-in) .tile__image {
  transform: scale(1.12);
}

/* Section lines draw in from the left as they scroll into view. */
.js-motion [data-reveal]:not(.is-in) .section__head::before,
.js-motion .section__head[data-reveal]:not(.is-in)::before {
  transform: scaleX(0);
}

/* Progress line along the top of the page (built by interactions.js). */
.scroll-progress {
  position: fixed;
  inset: 0 0 auto;
  z-index: 20;
  height: 3px;
  background: var(--accent);
  transform: scaleX(var(--progress, 0));
  transform-origin: left;
  pointer-events: none;
}

/* Round magnifier that follows the pointer over pictures (js/magnifier.js). */
.lens {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 30;
  width: 10.5rem;
  height: 10.5rem;
  border-radius: 50%;
  background-color: var(--paper-sunken);
  background-repeat: no-repeat;
  box-shadow: 0 0 0 2px var(--paper), 0 1.25rem 3rem rgb(0 0 0 / 0.28);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(var(--lens-x, -20rem), var(--lens-y, -20rem), 0) translate(-50%, -50%) scale(0.6);
  transition: opacity 0.25s var(--ease), transform 0.45s var(--ease-out);
}

.lens.is-visible {
  opacity: 1;
  transform: translate3d(var(--lens-x, -20rem), var(--lens-y, -20rem), 0) translate(-50%, -50%) scale(1);
}

/* The lens replaces the arrow while it is over a picture. */
.has-lens .tile__frame {
  cursor: none;
}

/* The new theme grows out of the toggle as a circle (js/theme.js animates it). */
.is-theme-switching::view-transition-old(root),
.is-theme-switching::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

/* Opening animation (js/intro.js): a large "n." on a page-coloured cover. */
.intro-cover,
.intro-mark {
  display: none;
}

.js-intro {
  overflow: hidden;
}

.js-intro .intro-cover,
.js-intro .intro-mark {
  display: block;
  position: fixed;
}

.js-intro .intro-cover {
  inset: 0;
  z-index: 100;
  background: var(--paper);
}

.js-intro .intro-mark {
  top: 50%;
  left: 50%;
  z-index: 101;
  font-size: clamp(6rem, 3rem + 11vw, 9.5rem);
  text-decoration: none;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  animation: intro-mark-in 1s var(--ease-out) backwards;
}

.js-intro .wordmark {
  visibility: hidden; /* the large mark lands here, then this takes over */
}

@keyframes intro-mark-in {
  from {
    opacity: 0;
    filter: blur(8px);
  }
}

/* Pictures glide between a tile and the viewer (js/lightbox.js). */
::view-transition-group(work-picture) {
  animation-duration: 0.6s;
  animation-timing-function: var(--ease-out);
}

/* Smooth cross-fade between pages where the browser supports it. */
@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.35s;
}

/* ---------- Resume ---------- */
/* Same three voices as the artist statement: Bodoni for names and headings, Cormorant for reading text,
   Manrope only for small labels such as dates. */
.resume-head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 1.5rem 2rem;
  padding-block: clamp(2rem, 6vw, 4.5rem) clamp(1.75rem, 4vw, 3rem);
}

.resume-head__name {
  max-width: 14ch;
  font-size: clamp(2.6rem, 1.5rem + 5vw, 5.5rem);
  letter-spacing: -0.03em;
  line-height: 1;
}

.resume-head__sub {
  margin-top: 1.1rem;
  font-family: var(--font-prose);
  font-size: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
  font-style: italic;
  font-weight: 500;
}

.resume-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.resume-section {
  display: grid;
  gap: 1rem clamp(2rem, 6vw, 6rem);
  padding-block: clamp(2rem, 4vw, 3.5rem);
  border-top: 1px solid var(--rule);
  font-family: var(--font-prose);
  font-size: clamp(1.2rem, 1.1rem + 0.3vw, 1.35rem);
  font-weight: 500;
  line-height: 1.45;
}

@media (min-width: 56rem) {
  .resume-section {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2.5fr);
  }

  /* The section name stays beside its entries while they scroll. */
  .resume-section__title {
    position: sticky;
    top: 2rem;
    align-self: start;
  }
}

.resume-section__title {
  font-size: var(--step-2);
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.resume-entry + .resume-entry {
  margin-top: clamp(2rem, 4vw, 3rem);
}

.resume-entry__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1.5rem;
}

.resume-entry__title {
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.2;
}

.resume-entry__date {
  font-family: var(--font-text);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

.resume-entry__org {
  margin-top: 0.2rem;
  font-style: italic;
}

.resume-entry ul {
  margin: 0.9rem 0 0;
  padding: 0;
  max-width: 40rem;
  list-style: none;
}

/* An en dash instead of a bullet, in the accent colour. */
.resume-entry li {
  position: relative;
  padding-left: 1.4rem;
}

.resume-entry li::before {
  content: '\2013';
  position: absolute;
  left: 0;
  color: var(--accent);
}

.resume-entry li + li {
  margin-top: 0.45rem;
}

/* Coursework and skills read as tags instead of one long sentence. */
.resume-courses {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}

.resume-section > .resume-courses,
.resume-section > div > .resume-courses:first-child {
  margin-top: 0;
}

.resume-courses__title {
  margin-bottom: 0.9rem;
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.2;
}

.resume-courses__group {
  margin: 1.1rem 0 0.55rem;
  font-family: var(--font-text);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.resume-courses__group:first-child,
.resume-courses__title + .resume-courses__group {
  margin-top: 0;
}

.resume-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.resume-tags li {
  padding: 0.2rem 0.85rem 0.25rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: 1.05rem;
  line-height: 1.35;
}

@media print {
  [data-reveal],
  [data-reveal] .section__head::before,
  [data-reveal] .tile__image {
    opacity: 1 !important;
    transform: none !important;
  }

  .intro-cover,
  .intro-mark,
  .lens,
  .theme-status,
  .theme-toggle {
    display: none !important;
  }

  @page {
    margin: 1.6cm;
  }

  :root {
    --paper: #fff;
    --ink: #000;
    --rule: #bbb;
    --accent: #000;
  }

  body {
    font-size: 10.5pt;
  }

  .skip-link,
  .site-header,
  .site-footer,
  .no-print {
    display: none !important;
  }

  .resume-head,
  .resume-section {
    padding-block: 0.6cm;
  }

  .resume-section,
  .resume-entry {
    break-inside: avoid;
  }

  .resume-section {
    font-size: 11pt;
  }

  .resume-entry__title,
  .resume-courses__title {
    font-size: 13pt;
  }

  .resume-section__title {
    position: static;
    font-size: 15pt;
  }

  .resume-head__name {
    font-size: 26pt;
  }

  .resume-head__sub {
    font-size: 12pt;
  }

  .resume-tags li {
    padding: 0.05rem 0.5rem;
    font-size: 9.5pt;
  }
}

/* ---------- Utilities ---------- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

[hidden] {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .tile:hover .tile__image {
    transform: none;
  }

  .marquee__track {
    animation: none;
    flex-wrap: wrap;
    width: auto;
  }

  .scroll-progress {
    display: none;
  }

  .marquee__group + .marquee__group {
    display: none;
  }

  @view-transition {
    navigation: none;
  }
}