/* Relinquished Presence, mock-up A, version 2: separate Home, About me and Gallery pages */
:root {
  --bg: #dedad3;
  --surface: #d3cec6;
  --ink: #0a0a0a;
  --muted: #5c5852;
  --night: #000000;
  --night-ink: #e9e9e7;
  --night-muted: #b4b1ab;

  --display: 'Bebas Neue', 'Arial Narrow', sans-serif;
  --text: 'EB Garamond', Georgia, serif;

  --step-small: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --step-head: clamp(2.75rem, 1.2rem + 5vw, 5.5rem);

  --m: 32px;
  --gap: 24px;
  --section: 180px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}
@media (max-width: 760px) { :root { --m: 16px; --gap: 16px; --section: 112px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--text); font-size: var(--step-body); line-height: 1.55; }
body.dark { background: var(--night); color: var(--night-ink); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
::selection { background: var(--ink); color: var(--bg); }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; font-weight: 400; }
.display { font-family: var(--display); text-transform: uppercase; letter-spacing: -0.01em; line-height: 0.88; }
.wrap { padding-inline: var(--m); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--m); top: 12px; z-index: 50; background: var(--bg); color: var(--ink); padding: 8px 12px; }

/* Photographs: no right-click saving, no dragging, no long-press save on phones */
.photo-guard img, img.guard { -webkit-user-drag: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.shield { position: relative; }
.shield::after { content: ''; position: absolute; inset: 0; }

/* Buttons: square, one fill, taken from the ink of the ground they sit on */
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 26px;
  background: var(--ink); color: var(--bg); font-family: var(--text); font-size: 1.125rem; text-decoration: none;
  border: 0; border-radius: 0; cursor: pointer; transition: transform 180ms var(--ease-out), opacity 180ms;
}
.hero .btn, .dark .btn { background: var(--night-ink); color: var(--night); }
.btn:hover { opacity: 0.86; }
.btn:active { transform: scale(0.97); }

/* ---------- Header ---------- */
.site-head {
  position: absolute; inset: 0 0 auto 0; z-index: 10;
  display: flex; align-items: center; gap: 32px; padding: 22px var(--m) 0; font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem);
}
.site-head.on-dark { color: var(--night-ink); }
.site-head.flow { position: static; }
.site-head a { text-decoration: none; }
.site-head a:hover, .site-head a[aria-current='page'] { text-decoration: underline; }
.site-head .mark { margin-right: auto; display: block; text-decoration: none; }
.site-head .mark img { height: 58px; width: auto; }
/* the logo is black and grey; on black grounds it is shown inverted */
.site-head.on-dark .mark img { filter: invert(1); }
.site-nav { display: flex; align-items: center; gap: 32px; }
.menu-toggle { display: none; }

/* ---------- Home: hero, text on the left and the portrait on the right ---------- */
.hero { min-height: 100svh; background: var(--night); color: var(--night-ink); display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.hero-text { padding: 120px var(--m) 56px; display: flex; flex-direction: column; justify-content: center; gap: 48px; }
.hero h1 { font-size: clamp(72px, 10.4vw, 170px); }
.hero .line { display: block; overflow: hidden; padding-bottom: 0.06em; margin-bottom: -0.06em; }
.hero .line > span { display: block; }
.hero-mid { max-width: 36ch; }
.hero-mid .what { font-size: var(--step-lead); line-height: 1.3; margin-bottom: 18px; }
.hero-mid .tag { color: var(--night-muted); margin-bottom: 28px; }
.hero-pic { margin: 0; height: 100svh; min-height: 640px; overflow: hidden; }
.hero-pic img { height: 100%; width: auto; max-width: 50vw; object-fit: cover; object-position: 50% 30%; }

/* ---------- Home: in-between ---------- */
.intro { padding-top: 0; }
.intro .grid { align-items: center; }
.intro-tall { grid-column: 7 / 13; grid-row: 1; margin: 0 calc(var(--m) * -1) 0 0; background: var(--night); }
.intro-tall img { width: 100%; height: min(100svh, 62vw); object-fit: cover; object-position: 50% 30%; }
.intro-text { grid-column: 1 / 7; grid-row: 1; padding-block: 56px; max-width: 40em; }
.intro-head { font-size: var(--step-head); margin-bottom: 40px; }
.intro-text p { font-size: var(--step-lead); line-height: 1.45; }
.intro-text p:last-child { margin-bottom: 0; }

/* ---------- Home: three portraits that slide over each other (left, right, centre) ---------- */
.curtain { position: relative; }
.curtain .sheet { position: sticky; top: 0; height: 100svh; margin: 0; background: var(--night); overflow: hidden; }
.curtain .sheet img { height: 100%; width: auto; max-width: none; object-fit: contain; }
.curtain .s1 img { margin-left: 8vw; }
.curtain .s2 img { margin-left: auto; margin-right: 8vw; }
.curtain .s3 img { margin: 0 auto; }

/* ---------- Home: approach ---------- */
.approach { padding-top: 160px; }
.approach h2 { font-size: var(--step-head); }
.approach-text { margin-top: 48px; }
.approach-text p { grid-column: span 4; }
.approach-text p:first-child { font-size: var(--step-lead); line-height: 1.4; }
.row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--gap); padding: 56px var(--m) 0; }
.row h3 { font-family: var(--text); font-weight: 500; font-size: var(--step-lead); line-height: 1.2; margin-bottom: 8px; }
.row p { font-size: var(--step-body); line-height: 1.45; margin: 0; }
.row .pic { background: var(--night); }
.row .pic img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; }
.row article:nth-child(1) .pic { margin-top: 96px; }
.row article:nth-child(2) .pic { margin-top: 136px; }
.row article:nth-child(3) .pic { margin-top: 80px; }
.row article:nth-child(4) .pic { margin-top: 120px; }
.row article:nth-child(5) .pic { margin-top: 88px; }
.row article:nth-child(6) .pic { margin-top: 140px; }
.next { padding: 96px var(--m) 0; display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; }
.next p { font-size: var(--step-lead); line-height: 1.35; max-width: 34ch; margin: 0; }

/* ---------- About ---------- */
.page-head { padding: 72px var(--m) 0; }
.page-head h1 { font-size: clamp(88px, 12vw, 190px); }
.page-head .lead { font-size: var(--step-lead); line-height: 1.35; max-width: 44ch; margin: 28px 0 0; }
/* the photo stretches to the height of the text, so its bottom lines up with the button */
.about-body { padding-top: 88px; align-items: stretch; }
.about-body figure { grid-column: 1 / 5; margin: 0; background: var(--night); position: relative; min-height: 420px; }
.about-body figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.about-body .bio { grid-column: 6 / 13; font-size: clamp(1.0625rem, 0.55rem + 0.85vw, 1.625rem); line-height: 1.55; }
.about-body .bio p { max-width: 46em; }
.about-body .bio .role { font-size: var(--step-lead); line-height: 1.35; }
.about-body .bio p:last-child { margin-bottom: 0; }

.from-series { padding-top: var(--section); }
.from-series h2 { font-size: var(--step-head); margin-bottom: 40px; }
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.trio figure { margin: 0; background: var(--night); }
.trio img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; }

/* ---------- Gallery ---------- */
.statement { padding-top: 72px; align-items: start; }
.statement .col { grid-column: 1 / 6; }
.statement h1 { font-size: clamp(88px, 12vw, 190px); }
.statement .lead { font-size: var(--step-lead); line-height: 1.35; margin: 28px 0 0; }
.statement h2 { font-size: var(--step-head); margin: 88px 0 40px; }
.statement .text p { font-size: var(--step-lead); line-height: 1.45; }
.statement figure { grid-column: 8 / 13; margin: 0; position: sticky; top: 40px; }
.statement figure img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; }
.portraits { padding-top: var(--section); }
.portraits h2 { font-size: var(--step-head); padding-inline: var(--m); margin-bottom: 56px; }
.portraits ol { list-style: none; margin: 0; padding: 0 var(--m); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.portraits a { display: block; cursor: zoom-in; }
.portraits img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; transition: opacity 200ms; }
.portraits a:hover img { opacity: 0.88; }
.portraits a:focus-visible { outline-offset: 4px; }

/* Pop-up viewer */
.viewer { position: fixed; inset: 0; z-index: 100; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--night); color: var(--night-ink); }
.viewer::backdrop { background: #000; }
.viewer[open] { display: grid; place-items: center; }
.viewer figure { margin: 0; height: 100svh; display: flex; align-items: center; }
.viewer img { max-height: 100svh; width: auto; }
.viewer .count { position: absolute; left: var(--m); bottom: 28px; margin: 0; font-size: var(--step-small); color: var(--night-muted); }
.viewer button { position: absolute; display: grid; place-items: center; width: 56px; height: 56px; padding: 0; border: 0; background: none; color: var(--night-ink); cursor: pointer; opacity: 0.75; transition: opacity 160ms, transform 160ms var(--ease-out); }
.viewer button:hover, .viewer button:focus-visible { opacity: 1; }
.viewer button:active { transform: scale(0.92); }
.viewer .go-prev { left: 12px; top: 50%; translate: 0 -50%; }
.viewer .go-next { right: 12px; top: 50%; translate: 0 -50%; }
.viewer .close { right: 12px; top: 12px; }

/* ---------- Privacy policy ---------- */
.legal { padding-top: 64px; max-width: 46em; }
.legal > p:first-child { font-size: var(--step-lead); line-height: 1.4; }
.legal h2 { font-family: var(--display); text-transform: uppercase; font-weight: 400; font-size: clamp(2rem, 1.5rem + 1.6vw, 3rem); line-height: 0.95; margin: 64px 0 20px; }
.legal h3 { font-family: var(--text); font-weight: 500; font-size: var(--step-lead); margin: 32px 0 8px; }
.legal ul { padding-left: 1.1em; margin: 0 0 1em; }
.legal li { margin-bottom: 0.5em; }
.legal li strong { font-weight: 500; }

/* ---------- Footer ---------- */
.foot { background: var(--surface); color: var(--ink); padding: 72px var(--m) 32px; margin-top: 120px; }
.foot .mail { display: block; text-decoration: none; font-size: clamp(56px, 8.4vw, 150px); line-height: 0.9; letter-spacing: -0.01em; }
.foot .mail span { display: block; }
.foot-meta { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: baseline; gap: 12px 40px; margin-top: 48px; font-size: var(--step-small); }
.foot-meta p { margin: 0; }
.foot-meta .foot-logo img { height: 48px; width: auto; }
.foot-meta .side { align-items: center; }
.foot-meta .side { display: flex; justify-content: space-evenly; gap: 12px 24px; }
.foot-meta .side p { min-width: 0; max-width: 30ch; }
.foot-meta .copy { text-align: center; max-width: 46ch; }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .hero .line > span { transform: translateY(105%); animation: line-up 800ms var(--ease-out) forwards; animation-delay: calc(var(--i) * 110ms + 120ms); }
  .js .hero-mid > * { opacity: 0; transform: translateY(16px); animation: rise 700ms var(--ease-out) forwards; animation-delay: 650ms; }
  .js .hero-pic img { animation: drift 24s ease-in-out infinite alternate; }
  .js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 500ms var(--ease-out), transform 600ms var(--ease-out); transition-delay: calc(var(--d, 0) * 80ms); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
  .js .curtain .sheet img { transform: scale(1.06); transition: transform 1600ms var(--ease-out); }
  .js .curtain .sheet.is-in img { transform: none; }
  .js .portraits li img { transform: scale(0.96); transition: transform 1200ms var(--ease-out); }
  .js .portraits li.is-in img { transform: none; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 1100px) {
  /* long tablet and phone pages: parts rise into place but are never invisible */
  .js [data-reveal] { opacity: 1; transform: translateY(16px); }
}
@keyframes line-up { to { transform: none; } }
@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes drift { from { transform: scale(1); } to { transform: scale(1.06) translateY(-1.5%); } }

/* ---------- Phone ---------- */
@media (max-width: 760px) {
  .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* phones: text is centred; the privacy policy stays left-aligned so its lists read properly */
  main { text-align: center; }
  .hero-text { align-items: center; }
  .hero-mid, .intro-text, .page-head .lead { margin-inline: auto; }
  .legal { text-align: left; }
  .statement figure { display: none; }
  /* phone: the logo and a menu button; the links open as a panel underneath */
  .site-head, .site-head.flow { position: relative; z-index: 20; flex-wrap: wrap; justify-content: space-between; gap: 0; padding: 18px var(--m) 14px; }
  .site-head.on-dark { background: var(--night); }
  .site-head .mark { flex-basis: auto; margin-right: 0; }
  .site-head .mark img { height: 60px; }
  .menu-toggle { display: grid; place-content: center; gap: 6px; width: 48px; height: 48px; margin-right: -10px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
  .menu-toggle span { display: block; width: 26px; height: 2px; background: currentColor; transition: transform 220ms var(--ease-out), opacity 160ms; }
  .site-head.open .menu-toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .site-head.open .menu-toggle span:nth-child(2) { opacity: 0; }
  .site-head.open .menu-toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
  .site-nav { flex-basis: 100%; flex-direction: column; align-items: flex-end; gap: 0; padding-top: 12px; font-size: 1.625rem; text-align: right; }
  .js .site-nav { display: none; }
  .js .site-head.open .site-nav { display: flex; }
  .site-nav a { display: block; width: 100%; padding-block: 10px; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero-text { padding: 32px var(--m) 40px; gap: 28px; }
  .hero h1 { font-size: 18vw; }
  .hero-pic { height: auto; min-height: 0; }
  .hero-pic img { width: 100%; max-width: 100%; height: auto; aspect-ratio: 4 / 5; }
  .intro { padding-top: 0; }
  .intro-tall { grid-column: 1 / 5; grid-row: 2; margin: 0 calc(var(--m) * -1); }
  .intro-tall img { height: auto; aspect-ratio: 4 / 5; }
  .intro-text { grid-column: 1 / 5; grid-row: 1; padding-block: 72px 40px; }
  .intro-text p { font-size: var(--step-body); }
  .shown { grid-column: 1 / 5; grid-row: 4; }
  .curtain .sheet { height: 88svh; }
  .curtain .sheet img, .curtain .sheet:nth-child(n) img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; margin: 0; }
  .approach-text p { grid-column: 1 / 5; }
  .row { grid-template-columns: 1fr 1fr; row-gap: 48px; }
  .row article .pic, .row article:nth-child(n) .pic { margin-top: 20px; }
  .row article:nth-child(even) { margin-top: 56px; }
  .page-head { padding-top: 32px; }
  .trio { grid-template-columns: 1fr 1fr; }
  .trio figure:last-child { display: none; }
  .page-head h1 { font-size: 13vw; }
  .about-body figure, .about-body .bio, .statement .col, .statement figure { grid-column: 1 / 5; }
  .statement h1 { font-size: 13vw; }
  .statement h2 { margin-top: 56px; }
  .viewer figure { height: auto; padding-inline: 8px; }
  .viewer img { max-height: 80svh; }
  .viewer .go-prev, .viewer .go-next { top: auto; bottom: 8px; translate: none; }
  .viewer .go-prev { left: auto; right: 72px; }
  .about-body figure, .statement figure { position: static; margin-bottom: 40px; }
  .about-body figure { min-height: 0; }
  .about-body figure img { position: static; height: auto; aspect-ratio: 2 / 3; }
  .about-body .bio { font-size: var(--step-body); }
  .statement figure { margin: 32px 0 0; }
  .portraits ol { grid-template-columns: 1fr; gap: 16px; }
  .approach { padding-top: 64px; }
  .next { padding-top: 64px; flex-direction: column; align-items: center; text-align: center; }
  .foot { margin-top: 72px; text-align: center; padding-top: 56px; }
  .foot .mail { font-size: 8.6vw; }
  .foot-meta { grid-template-columns: 1fr; justify-items: center; font-size: 0.875rem; }
  .foot-meta .side { flex-direction: column; align-items: center; gap: 8px; }
  .foot-meta .copy { text-align: center; order: 3; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .hero h1 { font-size: 9.6vw; }
  .row { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 48px; }
  .row article:nth-child(n) .pic { margin-top: 32px; }
}