/* tokens.css (the only source of colour and type) + site.css + generated rules, served as one file: one render-blocking request, not two (Lighthouse, 1 Oct 2026) */
:root{--k:1}@media (min-width: 1200px){:root{--k:0.9}}
/* tokens.css — the ONLY place colour and type are defined (D9, D10, D18). Palette: BRAND_VISUAL_SPEC v2.0 (Navy & Gold).
   Contrast (WCAG, measured 29 Sep 2026): navy/cream 15.1, olive/cream 6.5, steel/navy 5.1, gold/navy 5.7. Never as text: gold on cream (2.7), olive on navy (2.3), steel on cream (3.0). */
:root {
  --navy: #0B1D30;  --deep: #06111F;  --cream: #FAF0E4;  --lift: #FDF8F0;  --steel: #7E8F9F;  --gold: #C4893A;  --olive: #5A5830;
  --rule: rgba(11, 29, 48, .14);
  --display: "Cormorant Garamond", Georgia, "Times New Roman", serif;   /* D10: display only, 22 px and up */
  --body: "Newsreader", Georgia, serif;                                  /* D10: body, 18 px, line-height 1.55 */
  --sans: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;   /* D10: navigation, labels, small print */
  --caps: .18em; --m: clamp(calc(20px * var(--k)), 5vw, calc(72px * var(--k))); --wrap: calc(1260px * var(--k));
}
@font-face { font-family: "Cormorant Garamond"; src: url("/fonts/CormorantGaramond-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("/fonts/CormorantGaramond-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("/fonts/CormorantGaramond-MediumItalic.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("/fonts/Newsreader-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("/fonts/Newsreader-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("/fonts/Newsreader-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("/fonts/DMSans-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("/fonts/DMSans-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }

/* site.css — the v7 page system (D37, D40, D42, D48–D50, D53), from the approved prototypes of 30 Sep 2026.
   Colour and type come from tokens.css only. build.py appends the per-photograph and per-map rules (hero safe box, map markers). */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: hidden; scroll-padding-top: calc(var(--hdh, calc(64px * var(--k))) + calc(16px * var(--k))); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--lift); color: var(--navy); font: 400 max(14px, calc(18px * var(--k)))/1.55 var(--body); padding-bottom: env(safe-area-inset-bottom, 0px); }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: calc(4px * var(--k)); }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { font-weight: 600; }
.disp { font-family: var(--display); font-weight: 600; letter-spacing: var(--caps); text-transform: uppercase; }
.label { font: 500 12px/1.4 var(--sans); letter-spacing: var(--caps); text-transform: uppercase; color: var(--olive); }
.wrap { max-width: var(--wrap); margin: 0 auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: calc(12px * var(--k)); top: calc(-60px * var(--k)); z-index: 50; padding: calc(10px * var(--k)) calc(16px * var(--k)); background: var(--navy); color: var(--cream); font: 500 max(14px, calc(15px * var(--k))) var(--sans); border-radius: 2px; }
.skip:focus { top: calc(12px * var(--k)); }
.more { /* k:fixed (D148: a link line keeps its 24 px target, WCAG 2.5.8) */ display: block; width: max-content; max-width: 100%; margin: 26px auto 0; padding: 4px 0; font: 500 14px var(--sans); border-bottom: 1px solid var(--gold); }
.more.left { margin-left: 0; }

/* ---------- header: solid cream on every page, always (D53); one navigation (D48) ---------- */
/* the header's height is set here, not measured by script, so nothing on the page moves when the page loads (CLS 0) */
:root { --hdh: calc(env(safe-area-inset-top, 0px) + calc(74px * var(--k))); }
.hd { position: fixed; inset: 0 0 auto 0; z-index: 20; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: calc(16px * var(--k)); height: var(--hdh);
  padding: calc(env(safe-area-inset-top, 0px) + calc(18px * var(--k))) var(--m) calc(18px * var(--k)); background: var(--cream); box-shadow: 0 1px 0 rgba(11, 29, 48, .12); transition: padding .35s; }
.hd.slim { height: calc(env(safe-area-inset-top, 0px) + calc(58px * var(--k))); padding-top: calc(env(safe-area-inset-top, 0px) + calc(10px * var(--k))); padding-bottom: calc(10px * var(--k)); }   /* as the prototype: a slimmer bar once you scroll */
.hd nav { display: flex; align-items: center; gap: calc(26px * var(--k)); font: 500 max(14px, calc(15px * var(--k))) var(--sans); }
.hd nav a { padding: calc(6px * var(--k)) 0; border-bottom: 1px solid transparent; }
.hd nav a:hover, .hd nav a[aria-current="page"] { border-bottom-color: var(--gold); }
.hd .r { justify-self: end; }
.wm { font-family: var(--display); font-weight: 600; letter-spacing: .18em; text-transform: uppercase; font-size: max(20px, calc(22px * var(--k))); line-height: 1.2; white-space: nowrap; }
.wm b { font-weight: 600; color: var(--gold); }
.hd .wm { padding: calc(6px * var(--k)) 0; }
.pill { display: inline-block; padding: calc(10px * var(--k)) calc(18px * var(--k)); border-radius: calc(999px * var(--k)); background: var(--navy); color: var(--cream); font: 500 14px var(--sans); white-space: nowrap; }
.hd nav a.pill { border: 0; padding: calc(10px * var(--k)) calc(18px * var(--k)); }
.menu { display: none; padding: calc(9px * var(--k)) calc(14px * var(--k)); border: 1px solid currentColor; border-radius: calc(999px * var(--k)); background: none; color: inherit; font: 500 14px var(--sans); cursor: pointer; }
.mnav { position: fixed; inset: 0; z-index: 19; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: calc(22px * var(--k)); background: var(--cream);
  font-family: var(--display); font-weight: 600; font-size: max(20px, calc(30px * var(--k))); letter-spacing: .14em; text-transform: uppercase; }
.mnav[hidden] { display: none; }
.mnav a { padding: calc(6px * var(--k)) 0; border-bottom: 1px solid var(--gold); }
.mnav a.ask { margin-top: calc(10px * var(--k)); padding: calc(12px * var(--k)) calc(22px * var(--k)); border: 0; border-radius: calc(999px * var(--k)); background: var(--navy); color: var(--cream); font: 500 max(14px, calc(16px * var(--k))) var(--sans); letter-spacing: 0; text-transform: none; }
@media (max-width: 860px) {
  .hd { grid-template-columns: 1fr auto; }
  .hd .wm { justify-self: start; font-size: max(20px, calc(22px * var(--k))); letter-spacing: .16em; }
  .hd nav.l, .hd nav.r a:not(.pill) { display: none; }
  .js .menu { display: inline-block; }
  html:not(.js) .hd { grid-template-columns: 1fr; justify-items: center; }
  html:not(.js) .hd nav.l { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(4px * var(--k)) calc(18px * var(--k)); }
  html:not(.js) .hd nav.r { justify-self: center; }
  html:not(.js) .hd nav.r a { display: inline; }
}
@media (max-width: 479px) { .js .hd .pill { display: none; } .hd .wm { letter-spacing: .12em; } }
@media (max-width: 359px) { .hd .wm { letter-spacing: .06em; } }
main { display: block; padding-top: var(--hdh, calc(64px * var(--k))); }
html:not(.js) main { padding-top: 0; }
html:not(.js) .hd { position: static; height: auto; }

/* ---------- hero: the photograph under the header; its frame closes in as you scroll (D38); the line on the sky (D20, D50) ---------- */
.hero { position: relative; height: calc(100svh - var(--hdh, calc(64px * var(--k)))); min-height: calc(520px * var(--k)); }
.hero .fr { position: sticky; top: var(--hdh, calc(64px * var(--k))); height: calc(100svh - var(--hdh, calc(64px * var(--k)))); min-height: calc(520px * var(--k)); overflow: hidden; clip-path: inset(var(--ins, 0px)); }
.hero picture, .hero img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero img { object-fit: cover; object-position: var(--pos, 50% 50%); }
.hero .line { position: absolute; left: var(--sl, 8%); right: var(--sr, 8%); top: var(--st, 18%); color: var(--navy); }
/* D70: sentence case (D11: capitals only on titles of five words or fewer; this line has six). Same size and face; tracking for lowercase. */
/* D79: the largest text on the page (the statement below is 52 px / 28 px); measured with the line moved up into the sky */
.hero h1 { margin: 0; font-family: var(--display); font-weight: 600; letter-spacing: .01em; font-size: clamp(max(20px, calc(26px * var(--k))), 4vw, max(20px, calc(58px * var(--k)))); line-height: 1.2; text-wrap: balance; }   /* even lines: no single word left on the last line in sentence case */
.hero .sub { margin: calc(12px * var(--k)) 0 0; font-family: var(--display); font-style: italic; font-weight: 500; font-size: clamp(max(20px, calc(22px * var(--k))), 1.6vw, max(20px, calc(24px * var(--k)))); line-height: 1.25; letter-spacing: .02em; text-wrap: balance; }
@media (max-width: 700px) { .hero h1 { font-size: max(20px, calc(30px * var(--k))); } }
/* D149: the photographs take turns. Only the first is in the page; the others wait in a <template> until site.js brings them in, one
   ahead. A slow fade between photographs; the headline fades out and back where the next photograph's calm space is elsewhere. */
.hero .sl { transition: opacity var(--fade, 1.6s) ease; }
.hero .sl:not(.on) { opacity: 0; }
.hero .line { transition: opacity .55s ease; }
.hero .line.out { opacity: 0; }
/* the Pause button (WCAG 2.2.2): small, quiet, in the corner, on cream so it reads on every photograph */
.hp { /* k:fixed (D167, 9 Oct 2026: a small round icon, 32 px: WCAG 2.5.8 asks 24) */ position: absolute; right: 16px; bottom: 16px; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: rgba(250, 240, 228, .72); color: var(--navy); cursor: pointer; transition: background .2s; }
.hp:hover, .hp:focus-visible { background: rgba(250, 240, 228, .96); }
.hp svg { /* k:fixed */ width: 11px; height: 11px; fill: currentColor; }
.hp[data-state="pause"] .i-play, .hp[data-state="play"] .i-pause { display: none; }

/* ---------- sections ---------- */
.s { padding: clamp(calc(48px * var(--k)), 8vh, calc(96px * var(--k))) var(--m) 0; }
.s h2 { margin: 0 0 calc(14px * var(--k)); font-family: var(--display); font-weight: 600; letter-spacing: var(--caps); text-transform: uppercase; font-size: clamp(max(20px, calc(24px * var(--k))), 2.4vw, max(20px, calc(32px * var(--k)))); line-height: 1.2; text-align: center; }
.lede { margin: 0 auto calc(30px * var(--k)); max-width: 34em; text-align: center; }
.stmt p { margin: 0 auto; max-width: 22em; text-align: center; font-family: var(--display); font-weight: 500; font-size: clamp(max(20px, calc(28px * var(--k))), 3.6vw, max(20px, calc(52px * var(--k)))); line-height: 1.18; }
.stmt .w { opacity: var(--o, 1); }
.rv { transform: translateY(var(--ry, 0px)); }   /* D38: items rise as they arrive; no fade, so text is always at full contrast */

/* portfolios on the home: the newest as a feature, the next ones as cards */
.pf { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(calc(24px * var(--k)), 4vw, calc(56px * var(--k))); align-items: center; }
.pf .cov img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.pf h3 { margin: calc(8px * var(--k)) 0 calc(12px * var(--k)); font-family: var(--display); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; font-size: clamp(max(20px, calc(28px * var(--k))), 3vw, max(20px, calc(40px * var(--k)))); line-height: 1.1; }
.pf p { margin: 0; max-width: 32em; }
.glimpses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(10px * var(--k)); margin: calc(22px * var(--k)) 0 calc(4px * var(--k)); }
.glimpses img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.pcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(40px * var(--k)) calc(26px * var(--k)); margin-top: calc(48px * var(--k)); }
.pcard { display: flex; flex-direction: column; gap: calc(6px * var(--k)); min-width: 0; }
.pcard img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.pcard .t { margin-top: calc(8px * var(--k)); font-family: var(--display); font-weight: 600; font-size: max(20px, calc(24px * var(--k))); letter-spacing: .1em; text-transform: uppercase; line-height: 1.15; }
@media (max-width: 860px) { .pf { grid-template-columns: 1fr; } .pcards { grid-template-columns: 1fr 1fr; gap: calc(30px * var(--k)) calc(16px * var(--k)); } }

/* the Journal: squares, a title, the kind and the posted date (D49, D28) */
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(44px * var(--k)) calc(26px * var(--k)); }
.item { display: flex; flex-direction: column; align-items: center; gap: calc(6px * var(--k)); text-align: center; min-width: 0; }
.item img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--cream); }
/* 5 Oct 2026, Robby and Ipek ("this is fine for us"): a card's cover fills its column by rule — before, its <picture> shrank to the width `sizes` announced (175.5 px in a 187 px column on a 390 px phone; 384 in 403 at 1280 px) */
.item picture { width: 100%; }
.item h3 { margin: calc(10px * var(--k)) 0 0; max-width: 100%; overflow-wrap: break-word; font-family: var(--display); font-weight: 600; font-size: max(20px, calc(22px * var(--k))); letter-spacing: .12em; text-transform: uppercase; line-height: 1.2; }
.item:hover h3, .pcard:hover .t { color: var(--olive); }
@media (max-width: 860px) { .grid { grid-template-columns: 1fr 1fr; gap: calc(30px * var(--k)) calc(16px * var(--k)); } }
@media (max-width: 360px) { .grid, .pcards { grid-template-columns: 1fr; } }
/* 5 Oct 2026, Robby and Ipek: on phones a portfolio card takes the whole row ("one card looks cleaner"); the Journal's cards stay two to a row */
@media (max-width: 600px) { .pcards { grid-template-columns: 1fr; gap: calc(40px * var(--k)) 0; } }

/* the map on the home: one overview beside the index by country (D42) */
.mapx { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(calc(24px * var(--k)), 4vw, calc(56px * var(--k))); align-items: center; }
.mapx h2 { text-align: left !important; }
.mapx .mlede { margin: 0 0 calc(18px * var(--k)); max-width: 30em; }
@media (max-width: 1023px) { .mapx { grid-template-columns: 1fr; } }
.ov { position: relative; margin: 0; }
.ov .plate { display: block; position: relative; background: var(--navy); }
.ov .plate img { width: 100%; height: auto; }
.ov .pin { /* k:fixed (D148: a dot keeps its 12 px, D26) */ position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 2px var(--navy); }
.ov .pin.home { background: var(--navy); box-shadow: 0 0 0 2px var(--gold); }
.ov .cm { position: absolute; padding: calc(6px * var(--k)) calc(9px * var(--k)); background: var(--cream); color: var(--navy); font: 500 max(14px, calc(15px * var(--k)))/1 var(--sans); white-space: nowrap; border-radius: 2px; }
.ov .cm small { margin-left: calc(6px * var(--k)); font-size: 13px; font-weight: 400; color: var(--olive); }
.credit { display: block; margin-top: calc(8px * var(--k)); font: 400 11px/1.4 var(--sans); color: var(--olive); }
.cidx { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--navy); }
.cidx li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px calc(16px * var(--k)); padding: calc(14px * var(--k)) 0; border-bottom: 1px solid var(--rule); }
.cidx .cn { display: inline-block; padding: 2px 0; font-family: var(--display); font-weight: 600; font-size: clamp(max(20px, calc(22px * var(--k))), 2.2vw, max(20px, calc(28px * var(--k)))); letter-spacing: .12em; text-transform: uppercase; }
.cidx .cn:hover { color: var(--olive); }
.cidx .cc { align-self: center; font: 400 13px var(--sans); color: var(--olive); }
.cidx .cps { grid-column: 1 / -1; font: 400 14px var(--sans); }

/* About */
.about .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(calc(28px * var(--k)), 5vw, calc(72px * var(--k))); align-items: center; }
.about img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.about h1 { margin: calc(6px * var(--k)) 0 calc(16px * var(--k)); font-family: var(--display); font-weight: 600; letter-spacing: var(--caps); text-transform: uppercase; font-size: clamp(max(20px, calc(28px * var(--k))), 3vw, max(20px, calc(40px * var(--k)))); line-height: 1.15; }
.about p { margin: 0 0 calc(14px * var(--k)); max-width: 32em; }
@media (max-width: 860px) { .about .wrap { grid-template-columns: 1fr; } }
.idx { list-style: none; margin: 0 auto; padding: 0; max-width: calc(760px * var(--k)); }
.idx li { display: flex; align-items: baseline; justify-content: space-between; gap: calc(16px * var(--k)); padding: calc(14px * var(--k)) 0; border-top: 1px solid var(--rule); }
.idx li:last-child { border-bottom: 1px solid var(--rule); }
.idx .pn { font-family: var(--display); font-weight: 600; font-size: clamp(max(20px, calc(22px * var(--k))), 2.2vw, max(20px, calc(28px * var(--k)))); letter-spacing: .1em; text-transform: uppercase; }
.idx .pk { font: 400 max(14px, calc(15px * var(--k))) var(--sans); color: var(--olive); text-align: right; }

/* D153: a Journal story on its own page — the cover beside their words (5 : 6, as About), one column on phones */
.story { padding: clamp(calc(32px * var(--k)), 6vh, calc(72px * var(--k))) var(--m) 0; }
.story .sgrid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(calc(28px * var(--k)), 5vw, calc(72px * var(--k))); align-items: start; }
.story .scov { margin: 0; }
.story .scov img { display: block; width: 100%; height: auto; }
.story h1 { margin: calc(10px * var(--k)) 0 calc(20px * var(--k)); font-family: var(--display); font-weight: 600; font-size: clamp(max(20px, calc(34px * var(--k))), 3.6vw, max(20px, calc(52px * var(--k)))); line-height: 1.1; text-wrap: balance; }
.story .label a { border-bottom: 1px solid var(--gold); }
.story .prose { max-width: 34em; }
.story .prose p { margin: 0 0 calc(16px * var(--k)); }
.story .prose a { border-bottom: 1px solid var(--gold); overflow-wrap: anywhere; }
.story .prose .label { margin-right: calc(6px * var(--k)); }
.story .asof { max-width: 34em; margin: calc(26px * var(--k)) 0 0; font: 400 14px/1.55 var(--sans); color: var(--olive); }
.story .snav { display: grid; grid-template-columns: 1fr auto 1fr; gap: calc(16px * var(--k)); align-items: end; max-width: var(--wrap); margin: clamp(calc(40px * var(--k)), 7vh, calc(72px * var(--k))) auto 0; padding-top: calc(18px * var(--k)); border-top: 1px solid var(--rule); font: 500 max(14px, calc(15px * var(--k)))/1.4 var(--sans); }
.story .snav a { padding: calc(4px * var(--k)) 0; }
.story .snav .label { display: block; margin-bottom: calc(4px * var(--k)); }
.story .snav [rel="next"] { text-align: right; }
.story .snav .all { border-bottom: 1px solid var(--gold); }
@media (max-width: 860px) { .story .sgrid { grid-template-columns: 1fr; } .story .scov { max-width: calc(560px * var(--k)); } }
@media (max-width: 560px) { .story .snav { grid-template-columns: 1fr 1fr; } .story .snav .all { grid-column: 1 / -1; grid-row: 2; justify-self: center; } }

/* page heads (map, portfolios, essays) */
.ph { padding: clamp(calc(40px * var(--k)), 7vh, calc(80px * var(--k))) var(--m) 0; text-align: center; }
.ph h1 { margin: calc(6px * var(--k)) 0 calc(12px * var(--k)); font-family: var(--display); font-weight: 600; letter-spacing: var(--caps); text-transform: uppercase; font-size: clamp(max(20px, calc(30px * var(--k))), 3.6vw, max(20px, calc(48px * var(--k)))); line-height: 1.1; }
.ph p { margin: 0 auto; max-width: 34em; }
.ph p.left { text-align: left; }
.ph p.pnote { text-wrap: balance; }   /* D171: a place's note is one line or two, centred under its name (it was set left, which read as a slip under a centred title) */
.ph .fine { margin-top: calc(12px * var(--k)); font: 400 max(14px, calc(15px * var(--k))) var(--sans); }
.ph .fine a, .ph p a, .prose a { border-bottom: 1px solid var(--gold); }

/* the map page: the Split index (D41) */
.atlas { max-width: calc(1320px * var(--k)); margin: 0 auto; padding: calc(28px * var(--k)) var(--m) 0; display: grid; grid-template-columns: minmax(calc(260px * var(--k)), 4fr) minmax(0, 8fr); grid-template-areas: "tabs tabs" "list map"; gap: 0 calc(36px * var(--k)); }
.tabs { grid-area: tabs; display: flex; justify-content: center; gap: clamp(calc(16px * var(--k)), 3vw, calc(36px * var(--k))); margin: 0 0 calc(18px * var(--k)); overflow-x: auto; scrollbar-width: none; font: 500 max(14px, calc(15px * var(--k))) var(--sans); }
.tabs[hidden] { display: none; }
.tabs button { padding: calc(10px * var(--k)) 2px; background: none; border: 0; border-bottom: 2px solid transparent; color: var(--olive); font: inherit; cursor: pointer; white-space: nowrap; }
.tabs button[aria-selected="true"] { color: var(--navy); border-bottom-color: var(--gold); }
.map { grid-area: map; position: relative; height: clamp(calc(480px * var(--k)), 72vh, calc(720px * var(--k))); background: var(--navy); overflow: hidden; touch-action: pan-y; }
.map > .still { width: 100%; height: 100%; object-fit: contain; }
.map svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.map .land { fill: var(--cream); } .map .mask { fill: var(--navy); }
.map .borders { fill: none; stroke: var(--steel); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; transition: opacity .3s; }
.map svg.far .borders { opacity: 0; }
.map .arc { fill: none; stroke: var(--gold); stroke-width: 1.5; stroke-dasharray: 5 5; vector-effect: non-scaling-stroke; }
.overlay { position: absolute; inset: 0; pointer-events: none; }
.mpin { /* k:fixed (D148: a 44 px tap target centred on its dot) */ position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; padding: 0; border: 0; background: none; pointer-events: auto; display: grid; place-items: center; cursor: pointer; }
.mpin i { /* k:fixed */ display: block; width: 12px; height: 12px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 2px var(--navy); }
.mpin.home i { background: var(--navy); box-shadow: 0 0 0 2px var(--gold); }
.chip { position: absolute; pointer-events: auto; white-space: nowrap; background: var(--cream); color: var(--navy); border: 0; font: 500 14px/1 var(--sans); padding: calc(5px * var(--k)) calc(8px * var(--k)); border-radius: 2px; transition: opacity .25s; }
button.chip { cursor: pointer; }
.chip.region { font-size: max(14px, calc(15px * var(--k))); padding: calc(7px * var(--k)) calc(10px * var(--k)); } .chip.region small { font-weight: 400; color: var(--olive); margin-left: calc(6px * var(--k)); font-size: 13px; }
.chip.edge { display: flex; align-items: center; gap: calc(6px * var(--k)); background: var(--gold); color: var(--navy); } .chip.edge b { font-weight: 500; display: inline-block; }
.hidden { opacity: 0 !important; pointer-events: none !important; }
.attrib { position: absolute; right: 0; top: 0; z-index: 2; background: rgba(250, 240, 228, .94); color: var(--navy); font: 400 12px/1 var(--sans); padding: calc(8px * var(--k)) calc(10px * var(--k)); min-height: calc(28px * var(--k)); }
.plist { grid-area: list; align-self: start; list-style: none; margin: 0; padding: 0; text-align: left; font-family: var(--sans); }
.plist h2 { margin: calc(18px * var(--k)) 0 calc(6px * var(--k)); font: 500 12px var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--olive); }
.plist h2 a, .plist h2 button { display: inline-block; padding: calc(8px * var(--k)) 0; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; background: none; border: 0; border-bottom: 1px solid var(--gold); cursor: pointer; }
.plist .pl { display: flex; width: 100%; justify-content: space-between; align-items: baseline; gap: calc(12px * var(--k)); padding: calc(12px * var(--k)) 0; border: 0; border-top: 1px solid var(--rule); background: none; color: inherit; text-align: left; font: inherit; cursor: pointer; }
.plist .pn { font-family: var(--display); font-weight: 600; font-size: max(20px, calc(22px * var(--k))); letter-spacing: .1em; text-transform: uppercase; }
.plist .pk { font-size: 14px; color: var(--olive); text-align: right; }
.plist .pl:hover .pn { color: var(--olive); }
.plist.off { display: none; }
.panel { grid-area: list; align-self: start; display: none; text-align: left; } .panel.on { display: block; }
.panel .back { padding: calc(10px * var(--k)) 0; background: none; border: 0; border-bottom: 1px solid var(--gold); color: inherit; font: 500 14px var(--sans); cursor: pointer; }
.panel h2 { margin: calc(14px * var(--k)) 0 2px; font-family: var(--display); font-weight: 600; font-size: clamp(max(20px, calc(28px * var(--k))), 2.6vw, max(20px, calc(36px * var(--k)))); letter-spacing: .12em; text-transform: uppercase; }
.panel .note { margin: calc(10px * var(--k)) 0 0; font-style: italic; } .panel .sun { margin: calc(6px * var(--k)) 0 0; font: 400 14px var(--sans); color: var(--olive); }
.panel h3 { margin: calc(26px * var(--k)) 0 calc(10px * var(--k)); padding-top: calc(12px * var(--k)); border-top: 1px solid var(--navy); font: 500 12px var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.shelf { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(14px * var(--k)); }
.post { display: flex; flex-direction: column; gap: calc(6px * var(--k)); min-width: 0; }
.post img, .post .tc { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--cream); }
.post .tc { display: flex; align-items: center; justify-content: center; padding: calc(14px * var(--k)); text-align: center; border: 1px solid rgba(11, 29, 48, .2); font-family: var(--display); font-style: italic; font-weight: 500; font-size: max(20px, calc(22px * var(--k))); line-height: 1.2; }
.post .pt { font: 500 14px/1.3 var(--sans); } .post .pd { font: 400 13px var(--sans); color: var(--olive); }
.post:hover .pt { color: var(--olive); }
.afoot { max-width: calc(1320px * var(--k)); margin: 0 auto; padding: 0 var(--m); }   /* 9 Oct 2026 (D157): the credits sit after the map section: a pinned (sticky) grid item travels the whole grid container, so inside it the map slid over them */
.under { display: flex; justify-content: space-between; gap: calc(16px * var(--k)); flex-wrap: wrap; padding: calc(12px * var(--k)) 2px 0; font: 400 13px var(--sans); color: var(--olive); }
@media (max-width: 860px) { .atlas { grid-template-columns: 1fr; grid-template-areas: "tabs" "map" "list"; } .map { height: min(72vh, 122vw); } }

/* portfolios index and the essay */
.pindex { padding: calc(40px * var(--k)) var(--m) 0; }
.essay { padding: clamp(calc(32px * var(--k)), 5vh, calc(56px * var(--k))) 0 0; }
.essay-cover { max-width: calc(960px * var(--k)); margin: calc(32px * var(--k)) auto 0; padding: 0 var(--m); }
.row { display: grid; gap: clamp(calc(12px * var(--k)), 2vw, calc(24px * var(--k))); margin: 0 auto clamp(calc(32px * var(--k)), 6vh, calc(72px * var(--k))); padding: 0 var(--m); max-width: calc(1500px * var(--k)); }
.row figure { margin: 0; } .row img { width: 100%; height: auto; }
.row figcaption { margin-top: calc(8px * var(--k)); font: 400 14px var(--sans); color: var(--olive); }
.row.full { padding: 0; max-width: none; }
.row.wide { width: min(84vw, calc(1400px * var(--k))); max-width: none; padding: 0; margin-left: auto; margin-right: auto; }   /* D160 (9 Oct 2026, their review): a lone landscape is centred (it alternated left and right) */
/* D85: a pair or triptych shares one height; each photo's width follows its shape (flex-grow = aspect), nothing is cropped */
.row.pair, .row.triptych { display: flex; align-items: flex-start; }
.row.pair figure, .row.triptych figure { flex: var(--a, 1) 1 0; min-width: 0; }
.row.solo { display: flex; justify-content: center; }
.row.solo img, .essay-cover img { width: auto; max-width: 100%; max-height: calc(100svh - var(--hdh) - calc(48px * var(--k))); }
.essay-cover a.lb { display: flex; justify-content: center; }
.row.tall { grid-template-columns: 1fr 1fr; align-items: end; } .row.tall.s1 figure { grid-column: 2; }
.row.triptych { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 820px) { .row.triptych { display: grid; } .row.tall, .row.triptych { grid-template-columns: 1fr; } .row.tall.s1 figure { grid-column: auto; } .row.wide { width: auto; margin-left: 0 !important; margin-right: 0 !important; padding: 0 var(--m); } }
.pnav { display: flex; justify-content: space-between; gap: calc(16px * var(--k)); flex-wrap: wrap; max-width: var(--wrap); margin: 0 auto; padding: calc(24px * var(--k)) var(--m) 0; border-top: 1px solid var(--rule); font: 500 max(14px, calc(15px * var(--k))) var(--sans); }
.pnav a { padding: calc(6px * var(--k)) 0; border-bottom: 1px solid var(--gold); }
a.lb { display: block; cursor: zoom-in; }
dialog.lightbox { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--deep); color: var(--cream); }
dialog.lightbox::backdrop { background: var(--deep); }
dialog.lightbox figure { margin: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: calc(56px * var(--k)) calc(64px * var(--k)) calc(24px * var(--k)); }
dialog.lightbox img { max-width: 100%; max-height: calc(100dvh - calc(120px * var(--k))); width: auto; height: auto; object-fit: contain; }
dialog.lightbox figcaption { margin-top: calc(10px * var(--k)); font: 400 14px var(--sans); color: var(--cream); }
dialog.lightbox button { position: absolute; width: calc(48px * var(--k)); height: calc(48px * var(--k)); border: 0; border-radius: 50%; background: rgba(250, 240, 228, .12); color: var(--cream); font: 400 max(20px, calc(28px * var(--k)))/1 var(--sans); cursor: pointer; }
dialog.lightbox .x { top: calc(12px * var(--k)); right: calc(12px * var(--k)); } dialog.lightbox .p { left: calc(8px * var(--k)); top: 50%; } dialog.lightbox .n { right: calc(8px * var(--k)); top: 50%; }
@media (max-width: 600px) { dialog.lightbox figure { padding: calc(60px * var(--k)) calc(8px * var(--k)) calc(64px * var(--k)); } dialog.lightbox .p, dialog.lightbox .n { top: auto; bottom: calc(8px * var(--k)); } }

/* ---------- the footer: engraved head, colophon body (D40), the published removal promise (D47) ---------- */
.ft { margin-top: clamp(calc(64px * var(--k)), 10vh, calc(120px * var(--k))); padding: clamp(calc(56px * var(--k)), 9vh, calc(104px * var(--k))) var(--m) calc(26px * var(--k)); background: var(--cream); color: var(--navy); text-align: center; }
.ft .lab { font: 500 12px/1.4 var(--sans); letter-spacing: var(--caps); text-transform: uppercase; color: var(--olive); }
.ft .eh { max-width: calc(1200px * var(--k)); margin: 0 auto; padding-bottom: calc(18px * var(--k)); border-bottom: calc(4px * var(--k)) double var(--navy); }
.ft .eh .wm { display: block; font-size: clamp(max(20px, calc(26px * var(--k))), 3.2vw, max(20px, calc(44px * var(--k)))); letter-spacing: .22em; }
.ft .eh .lab { display: block; margin-top: calc(10px * var(--k)); }
.ft .date { display: block; margin: clamp(calc(32px * var(--k)), 5vh, calc(48px * var(--k))) 0 0; }
.ft .ask { margin: calc(14px * var(--k)) auto calc(22px * var(--k)); font-family: var(--display); font-style: italic; font-weight: 500; font-size: clamp(max(20px, calc(22px * var(--k))), 2.4vw, max(20px, calc(32px * var(--k)))); line-height: 1.2; text-wrap: balance; }   /* D171: the longer line no longer leaves 'it.' alone on phones */
.ft .amail { display: inline-block; white-space: nowrap; font-family: var(--display); font-weight: 500; font-size: min(max(20px, calc(80px * var(--k))), max(max(20px, calc(24px * var(--k))), 5.6vw), 7.4vw); line-height: 1.05;
  text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 1px; text-underline-offset: .16em; }
.ft .sig { margin: calc(14px * var(--k)) 0 0; font-family: var(--display); font-style: italic; font-weight: 400; font-size: max(20px, calc(22px * var(--k))); color: var(--olive); }
.ft .colo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: calc(1200px * var(--k)); margin: clamp(calc(48px * var(--k)), 7vh, calc(80px * var(--k))) auto 0; border-top: 1px solid var(--navy); text-align: left; }
.ft .colo.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: calc(960px * var(--k)); }   /* D170: three columns while paid photography is not offered */
.ft .colo > div { padding: calc(22px * var(--k)) calc(22px * var(--k)) calc(4px * var(--k)); border-left: 1px solid rgba(11, 29, 48, .18); }
.ft .colo > div:first-child { border-left: 0; padding-left: 0; }
.ft .colo p { margin: calc(10px * var(--k)) 0 0; font: 400 14px/1.55 var(--sans); }
.ft .ln { display: inline-block; padding: calc(4px * var(--k)) 0; border-bottom: 1px solid var(--gold); }
@media (max-width: 820px) { .ft .colo { grid-template-columns: 1fr 1fr; } .ft .colo.n3 { grid-template-columns: 1.2fr .8fr 1.1fr; } .ft .colo:not(.n3) > div:nth-child(3) { border-left: 0; padding-left: 0; } }
@media (max-width: 740px) { .ft .colo.n3 { grid-template-columns: 1fr; } .ft .colo.n3 > div { border-left: 0; padding-left: 0; border-bottom: 1px solid rgba(11, 29, 48, .18); padding-bottom: calc(18px * var(--k)); } }   /* D170: three columns side by side on tablets, one under the other on phones */
@media (max-width: 480px) { .ft .colo, .ft .colo.n3 { grid-template-columns: 1fr; } .ft .colo > div { border-left: 0; padding-left: 0; border-bottom: 1px solid rgba(11, 29, 48, .18); padding-bottom: calc(18px * var(--k)); } }
.ft .proof { margin: calc(30px * var(--k)) auto 0; max-width: calc(1200px * var(--k)); font: 400 13px var(--sans); color: var(--olive); }
.ft .small { display: flex; justify-content: space-between; flex-wrap: wrap; gap: calc(8px * var(--k)) calc(24px * var(--k)); max-width: calc(1200px * var(--k)); margin: clamp(calc(48px * var(--k)), 7vh, calc(80px * var(--k))) auto 0; padding-top: calc(16px * var(--k));
  border-top: 1px solid rgba(11, 29, 48, .18); font: 400 12px/1.5 var(--sans); color: var(--olive); }
.ft .small a { border-bottom: 1px solid var(--olive); }

/* ---------- motion off: nothing moves, nothing is hidden (D38) ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero .fr { clip-path: none !important; } .stmt .w { opacity: 1 !important; } .rv { transform: none !important; opacity: 1 !important; }
  .hero .sl, .hero .line { transition: none; }
  .chip, .mlab, .map .borders, .hd { transition: none; }
}
@media print { .hd, .mnav, .skip, .menu, dialog { display: none !important; } main { padding-top: 0; } .hero { height: auto; min-height: 0; } .hero .fr { position: static; height: auto; min-height: 0; } .hero picture, .hero img { position: static; } .hero .line { position: static; margin-top: calc(16px * var(--k)); } }

/* follow-ups to the markup */
.ft h3.lab { margin: 0; font-weight: 500; } .ft h2.ask { font-weight: 500; } .ft p.wm { margin: 0; }
.plist ul { list-style: none; margin: 0; padding: 0; }
.hero .sub { max-width: 30em; }
[data-draft] { }   /* the preview bundle outlines these; the live site shows nothing */

/* D84: a chapter inside a portfolio (a trip told in parts); its heading is an h2 under the page's h1 (D73) */
.essay .chapter { margin: clamp(calc(40px * var(--k)), 7vw, calc(88px * var(--k))) auto clamp(calc(16px * var(--k)), 2.5vw, calc(28px * var(--k))); max-width: calc(960px * var(--k)); padding: 0 var(--gut, calc(20px * var(--k))); }
.essay .chapter h2 { font-family: var(--display); font-weight: 500; font-size: clamp(max(20px, calc(26px * var(--k))), 3vw, max(20px, calc(36px * var(--k)))); line-height: 1.15; margin: 0 0 calc(6px * var(--k)); }
.essay .chapter .fine { margin: 0; }

/* Session 3b: the Journal page — kind filters (shown only with JavaScript; without it every post shows), excerpts, title tiles */
/* 5 Oct 2026: the Journal page keeps the page margin like every other page; its wrap sits directly in <main> (on a place page the same block sits inside a section that already has the margin), so below 1,404 px the cards and the title ran to the screen's edge */
main > .wrap.journal { max-width: calc(var(--wrap) + 2 * var(--m)); padding-left: var(--m); padding-right: var(--m); }
.journal .filters { display: flex; flex-wrap: wrap; gap: calc(8px * var(--k)); margin: 0 0 clamp(calc(20px * var(--k)), 3vw, calc(32px * var(--k))); }
.journal .filters button { font: inherit; font-size: max(14px, calc(15px * var(--k))); padding: calc(10px * var(--k)) calc(14px * var(--k)); min-height: calc(44px * var(--k)); border: 1px solid currentColor; border-radius: calc(999px * var(--k)); background: transparent; color: inherit; cursor: pointer; }
.journal .filters button[aria-pressed="true"] { background: var(--ink, #0B1D30); color: var(--cream, #FAF0E4); border-color: var(--ink, #0B1D30); }
.journal .filters button span { opacity: .75; margin-left: calc(4px * var(--k)); }
.item .tile { width: 100%; aspect-ratio: 1; display: grid; place-items: center; padding: calc(12px * var(--k)); background: var(--cream, #FAF0E4); font-family: var(--display); font-size: max(20px, calc(24px * var(--k))); text-align: center; }
.item h3.long { text-transform: none; letter-spacing: 0; }
.item .ex { margin: 2px 0 0; font-size: max(14px, calc(15px * var(--k))); line-height: 1.45; max-width: 34ch; }
.item[hidden] { display: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* The Journal page: card titles are h2 (D73); cards left-aligned, so excerpts are never long centred text (D11) */
.journal .item h2 { margin: calc(10px * var(--k)) 0 0; max-width: 100%; overflow-wrap: break-word; font-family: var(--display); font-weight: 600; font-size: max(20px, calc(22px * var(--k))); letter-spacing: .12em; text-transform: uppercase; line-height: 1.2; }
.journal .item { align-items: flex-start; text-align: left; }
.journal .item h2.long { text-transform: none; letter-spacing: 0; }

/* WCAG 2.5.8: a link standing alone is a target of at least 24 px (the place page's 'On the map' measured 21 px) */
.ph .solo a { display: inline-block; padding: calc(8px * var(--k)) calc(6px * var(--k)); }

/* Journal summaries: at most two lines, so cards sit evenly; screen readers still read the whole sentence */
.item .ex { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* The map panel's link to the place page: a 44 px target (measured 18 px, 2 Oct 2026; WCAG 2.2 2.5.8 asks 24) */
.pagelink { display: flex; width: fit-content; align-items: center; min-height: calc(44px * var(--k)); margin-top: 2px; }   /* its own line under the dates: inline, it ran on from the label (rendered 2 Oct 2026) */

/* 8 Oct 2026: the arrow on cards that open instagram.com (DM Sans has the glyph; the display faces do not) */
.ext { margin-left: .3em; font-family: var(--sans); font-weight: 400; font-size: .72em; letter-spacing: 0; vertical-align: .12em; color: var(--olive); }
/* 8 Oct 2026 (the browser extension's review of the map page) */
.mlab { position: absolute; pointer-events: none; white-space: nowrap; transition: opacity .3s; }
.mlab.sea { color: var(--cream); font: italic 400 max(14px, calc(16px * var(--k)))/1 var(--body); letter-spacing: .03em; }   /* D10: Cormorant only from 22 px; the body face, italic, below that */
.mlab.land { color: var(--navy); font: 500 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; }
@media (min-width: 861px) { .map { position: sticky; top: calc(var(--hdh, calc(64px * var(--k))) + calc(16px * var(--k))); align-self: start; } }   /* the map stays in view while a long place list scrolls beside it */
.under { margin-top: calc(48px * var(--k)); padding-top: calc(14px * var(--k)); border-top: 1px solid var(--rule); }   /* the credits read as the page's footnote, not as the list's last line */
.panel h2:focus { outline: none; }   /* the heading takes focus so screen readers start there (D43); it is not a control, so no ring */

/* D154 (9 Oct 2026): Work with us. The top is the About page's split; the offers are two ruled columns, as the footer's colophon;
   the figures are set large, each with its own date; who shared us and who co-signed sit side by side. */
@media (max-width: 400px) { .wk h1 { font-size: max(20px, calc(26px * var(--k))); letter-spacing: .12em; } }   /* 'COLLABORATIONS' inside 280 px */
.wk .go { display: flex; flex-wrap: wrap; align-items: center; gap: calc(12px * var(--k)) calc(18px * var(--k)); margin-top: calc(26px * var(--k)); }
.wk .go span { font: 400 max(14px, calc(15px * var(--k)))/1.5 var(--sans); }
.wk .go .ln { border-bottom: 1px solid var(--gold); padding: 3px 0; }
.offers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: calc(1040px * var(--k)); margin: calc(34px * var(--k)) auto 0; border-top: 1px solid var(--navy); }
.offers > div { padding: calc(26px * var(--k)) calc(34px * var(--k)) calc(4px * var(--k)); border-left: 1px solid var(--rule); }
.offers > div:first-child { border-left: 0; padding-left: 0; }
.offers h3 { margin: calc(10px * var(--k)) 0 calc(12px * var(--k)); font-family: var(--display); font-weight: 600; font-size: clamp(max(20px, calc(26px * var(--k))), 2.4vw, max(20px, calc(32px * var(--k)))); line-height: 1.15; }
.offers p { margin: 0; max-width: 30em; }
.offers.one { grid-template-columns: 1fr; max-width: calc(600px * var(--k)); }   /* D170: one offer (Invitations) while paid photography waits for registration */
.offers.one > div { padding-right: 0; }
.offers.one p { max-width: none; }
.pf2 .figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(220px * var(--k)), 1fr)); gap: calc(30px * var(--k)) calc(40px * var(--k)); max-width: calc(1100px * var(--k)); margin: calc(36px * var(--k)) auto 0; padding: 0; list-style: none; }
.pf2 .figs li { display: flex; flex-direction: column; gap: calc(8px * var(--k)); padding-top: calc(16px * var(--k)); border-top: 1px solid var(--navy); }
.pf2 .fig { font-family: var(--display); font-weight: 600; font-size: clamp(max(20px, calc(48px * var(--k))), 5vw, max(20px, calc(68px * var(--k)))); line-height: 1; letter-spacing: .02em; }
.pf2 .fl { font: 400 max(14px, calc(16px * var(--k)))/1.5 var(--body); }
.pf2 .figs .ln { align-self: flex-start; padding: calc(4px * var(--k)) 0; font: 500 14px var(--sans); border-bottom: 1px solid var(--gold); }
.pf2 .fd { font: 500 12px/1.4 var(--sans); letter-spacing: var(--caps); text-transform: uppercase; color: var(--olive); }
.pf2 .note { max-width: 40em; margin: calc(30px * var(--k)) auto 0; font: 400 14px/1.55 var(--sans); color: var(--olive); text-align: center; }
.pf2 .shared { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(30px * var(--k)) calc(60px * var(--k)); max-width: calc(1100px * var(--k)); margin: clamp(calc(48px * var(--k)), 7vh, calc(80px * var(--k))) auto 0; }
.pf2 h3 { margin: 0 0 calc(14px * var(--k)); font: 500 12px/1.4 var(--sans); letter-spacing: var(--caps); text-transform: uppercase; color: var(--olive); }
.pf2 .shared p { margin: 0 0 calc(14px * var(--k)); max-width: 30em; }
.pf2 .ev, .pf2 .cs { margin: 0; padding: 0; list-style: none; }
.pf2 .ev li { padding: calc(14px * var(--k)) 0; border-top: 1px solid var(--rule); }
.pf2 .ev .fd { display: block; margin-top: calc(6px * var(--k)); }
.pf2 .cs { display: flex; flex-wrap: wrap; gap: calc(4px * var(--k)) calc(22px * var(--k)); }
.pf2 .cs a { display: inline-block; padding: calc(6px * var(--k)) 0; border-bottom: 1px solid var(--gold); }
@media (max-width: 820px) { .pf2 .note { text-align: left; } .offers, .pf2 .shared { grid-template-columns: 1fr; } .offers > div { border-left: 0; padding-left: 0; padding-right: 0; border-bottom: 1px solid var(--rule); padding-bottom: calc(22px * var(--k)); } }

/* D158 (9 Oct 2026): beside the words on Work with us, one photograph from each portfolio takes its turn (their idea), its portfolio named
   underneath. The stage keeps the 4:5 frame of the About page; the caption keeps two lines' room so a longer title moves nothing. */
.wkrot { margin: 0; min-width: 0; }
.wkstage { position: relative; aspect-ratio: 4 / 5; max-width: 100%; overflow: hidden; background: var(--cream); }
.wkstage picture, .wkstage img { position: absolute; inset: 0; width: 100%; height: 100%; }
.wk .wkstage img { object-fit: cover; aspect-ratio: auto; object-position: 50% 50%; }   /* not the About photograph's framing (.about img, generated) */
.wkstage .ws { transition: opacity 1.2s ease; }
.wkstage .ws:not(.on) { opacity: 0; }
.wkrot .hp { right: calc(12px * var(--k)); bottom: calc(12px * var(--k)); }
.wkcap { display: grid; margin-top: calc(12px * var(--k)); }
.wkcap .wc { grid-area: 1 / 1; display: flex; flex-wrap: wrap; align-items: baseline; align-content: start; gap: calc(4px * var(--k)) calc(14px * var(--k)); }
.wkcap .wc:not(.on) { visibility: hidden; }
.wkcap .wc a { font-family: var(--display); font-weight: 600; font-size: max(20px, calc(22px * var(--k))); letter-spacing: .1em; text-transform: uppercase; line-height: 1.15; border-bottom: 1px solid var(--gold); }
@media (prefers-reduced-motion: reduce) { .wkstage .ws { transition: none; } }

/* D163 (9 Oct 2026): Work with us ends with what helps them reply, the address to copy and an email that opens with the same questions. */
.wr .wrap { max-width: calc(760px * var(--k)); }
.wpts { margin: calc(8px * var(--k)) auto 0; padding: 0; list-style: none; counter-reset: w; border-top: 1px solid var(--navy); }
.wpts li { counter-increment: w; display: grid; grid-template-columns: 2.2em minmax(0, 1fr); gap: calc(12px * var(--k)); padding: calc(14px * var(--k)) 0; border-bottom: 1px solid var(--rule); }
.wpts li::before { content: counter(w); font: 600 max(20px, calc(22px * var(--k)))/1.2 var(--display); color: var(--olive); }
.wmail { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: calc(12px * var(--k)) calc(18px * var(--k)); margin-top: calc(34px * var(--k)); }
.wmail .addr { font: 500 clamp(max(20px, calc(26px * var(--k))), 3.4vw, 40px)/1.2 var(--display); overflow-wrap: anywhere; user-select: all; }
.wmail .cp { min-height: calc(40px * var(--k)); padding: 0 calc(16px * var(--k)); border: 1px solid var(--rule); border-radius: calc(999px * var(--k)); background: none; color: var(--navy); font: 500 14px var(--sans); cursor: pointer; }
.wmail .cp:hover { border-color: var(--navy); }
.wreply { margin: calc(14px * var(--k)) 0 0; text-align: center; font: 400 max(14px, calc(15px * var(--k)))/1.5 var(--sans); color: var(--olive); }
.wgo { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: calc(12px * var(--k)) calc(22px * var(--k)); margin: calc(22px * var(--k)) 0 0; }
.wgo .ln { padding: calc(4px * var(--k)) 0; font: 500 max(14px, calc(15px * var(--k))) var(--sans); border-bottom: 1px solid var(--gold); }

/* D164 (9 Oct 2026, their reference: sydneyandavis.com on a phone): on phones and small tablets a portfolio reads as a grid of two —
   a pair of portraits side by side, one height, nothing cropped, a 4 px seam — and the rows close up to the same 4 px. A lone
   photograph (a feature or a landscape) still takes the full width: the breath between pairs. Wider screens keep the essay rhythm. */
@media (max-width: 820px) {
  .essay .row { margin-bottom: calc(4px * var(--k)); }
  .essay .row.pair { gap: calc(4px * var(--k)); }
}

/* D168 (9 Oct 2026): the footer's accounts as icons (their reference: sydneyandavis.com): Instagram, TikTok, Pinterest and the address,
   each a 44 px target around a 30 px glyph (Instagram's guideline: at least 29 px), in the ink colour; the handle stays as words. */
.ft .socials { display: flex; flex-wrap: wrap; gap: 2px calc(4px * var(--k)); margin: calc(6px * var(--k)) 0 0 calc(-7px * var(--k)); }
.ft .si { /* k:fixed */ display: grid; place-items: center; width: 44px; height: 44px; color: var(--navy); border-radius: 50%; transition: color .2s, background .2s; }
.ft .si svg { /* k:fixed */ width: 30px; height: 30px; fill: currentColor; }
.ft .si svg.o { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.ft .si:hover { color: var(--olive); background: rgba(11, 29, 48, .05); }

/* ---- generated by build.py from content.json and the places ---- */
.hero{--fade:1.6s}.hero picture.h0{--pos:100% 30%} .hero .line.h0{--sl:30%;--sr:4%;--st:10%}.hero picture.h1{--pos:50% 50%} .hero .line.h1{--sl:22%;--sr:4%;--st:12%}.hero picture.h2{--pos:50% 50%} .hero .line.h2{--sl:22%;--sr:4%;--st:20%}.hero picture.h3{--pos:50% 50%} .hero .line.h3{--sl:22%;--sr:4%;--st:12%}.hero picture.h4{--pos:50% 50%} .hero .line.h4{--sl:22%;--sr:4%;--st:12%}.hero picture.h5{--pos:50% 50%} .hero .line.h5{--sl:6%;--sr:32%;--st:10%}.hero picture.h6{--pos:50% 50%} .hero .line.h6{--sl:18%;--sr:4%;--st:8%}.hero picture.h7{--pos:50% 50%} .hero .line.h7{--sl:22%;--sr:4%;--st:12%}
@media (max-width: 700px){.hero .line.h0{--sl:8%;--sr:8%;--st:10%}.hero .line.h1{--sl:8%;--sr:8%;--st:10%}.hero .line.h2{--sl:8%;--sr:8%;--st:10%}.hero .line.h3{--sl:8%;--sr:8%;--st:10%}.hero .line.h4{--sl:8%;--sr:8%;--st:10%}.hero .line.h5{--sl:8%;--sr:8%;--st:12%}.hero .line.h6{--sl:8%;--sr:8%;--st:10%}.hero .line.h7{--sl:8%;--sr:8%;--st:10%}}
@media (orientation: landscape) and (min-width: 1000px){.hero .line.h1{--sl:4%;--sr:52%;--st:2%}}
@media (orientation: portrait){.hero picture.h0{--pos:100% 30%} .hero .line.h0{--sl:20%;--sr:8%;--st:8%}.hero picture.h1{--pos:58% 50%} .hero .line.h1{--sl:8%;--sr:8%;--st:10%}.hero picture.h2{--pos:60% 50%} .hero .line.h2{--sl:12%;--sr:8%;--st:20%}.hero picture.h3{--pos:71% 50%} .hero .line.h3{--sl:16%;--sr:8%;--st:10%}.hero picture.h4{--pos:96% 50%} .hero .line.h4{--sl:8%;--sr:8%;--st:10%}.hero picture.h5{--pos:29% 50%} .hero .line.h5{--sl:8%;--sr:8%;--st:10%}.hero picture.h6{--pos:100% 50%} .hero .line.h6{--sl:8%;--sr:8%;--st:10%}.hero picture.h7{--pos:50% 50%} .hero .line.h7{--sl:8%;--sr:8%;--st:10%}}
.ov .p-antwerp{left:28.29%;top:22.96%}
.ov .p-bodrum{left:85.58%;top:77.30%}
.ov .p-brussels{left:28.11%;top:24.54%}
.ov .p-etretat{left:19.09%;top:28.29%}
.ov .p-groot-bijgaarden{left:27.93%;top:24.41%}
.ov .p-leuven{left:28.83%;top:24.47%}
.ov .p-lille{left:25.39%;top:25.16%}
.ov .p-oostende{left:25.26%;top:22.61%}
.ov .c-BE{left:13.06%;top:11.43%}
.ov .c-FR{left:8.57%;top:31.31%}
.ov .c-TR{left:69.58%;top:64.93%}
@media (max-width: 559px){.ov .cm small{display:none}.ov .c-BE{left:12.84%;top:2.73%}.ov .c-FR{left:9.09%;top:34.95%}.ov .c-TR{left:68.18%;top:55.03%}}
.ar-05624{--a:0.5624}.ar-05625{--a:0.5625}.ar-05626{--a:0.5626}.ar-06664{--a:0.6664}.ar-06666{--a:0.6666}.ar-06667{--a:0.6667}.ar-07404{--a:0.7404}.ar-07500{--a:0.75}.ar-07999{--a:0.7999}.ar-08000{--a:0.8}.ar-08001{--a:0.8001}.ar-15000{--a:1.5}.about img{object-position:50% 41%}.item.f-instagram-2026-DdyVsUIDjuy_alt img,.post.f-instagram-2026-DdyVsUIDjuy_alt img{object-position:50% 0%}.item.f-instagram-2026-DeEXnGDjjpm img,.post.f-instagram-2026-DeEXnGDjjpm img{object-position:50% 0%}.item.f-instagram-2026-DePOjE7jDQD img,.post.f-instagram-2026-DePOjE7jDQD img{object-position:50% 0%}.item.f-instagram-2026-Db5_VZcsYhJ img,.post.f-instagram-2026-Db5_VZcsYhJ img{object-position:50% 0%}.item.f-instagram-2026-Dd9P_ogMpdT img,.post.f-instagram-2026-Dd9P_ogMpdT img{object-position:50% 12%}.item.f-instagram-2026-DdrRXgooZkE img,.post.f-instagram-2026-DdrRXgooZkE img{object-position:50% 40%}.item.f-instagram-2026-DeKFhajDG1A img,.post.f-instagram-2026-DeKFhajDG1A img{object-position:50% 30%}.item.f-instagram-2026-Dd4C3BLjMSs img,.post.f-instagram-2026-Dd4C3BLjMSs img{object-position:50% 20%}.item.f-instagram-2026-DdrL8BfDLnQ img,.post.f-instagram-2026-DdrL8BfDLnQ img{object-position:50% 0%}.item.f-instagram-2026-DdHDOP_jKj3 img,.post.f-instagram-2026-DdHDOP_jKj3 img{object-position:50% 25%}.item.f-instagram-2026-Dc1KyQhCMxX img,.post.f-instagram-2026-Dc1KyQhCMxX img{object-position:50% 15%}.item.f-instagram-2026-DcYeVdAjPFQ img,.post.f-instagram-2026-DcYeVdAjPFQ img{object-position:50% 25%}.item.f-instagram-2026-DcRI2GnjAjc img,.post.f-instagram-2026-DcRI2GnjAjc img{object-position:50% 10%}.item.f-instagram-2026-Db_I6UODIjx img,.post.f-instagram-2026-Db_I6UODIjx img{object-position:50% 20%}.item.f-instagram-2026-Dbij0hqDHrM img,.post.f-instagram-2026-Dbij0hqDHrM img{object-position:50% 0%}.item.f-instagram-2026-DbbEyEcDJe4 img,.post.f-instagram-2026-DbbEyEcDJe4 img{object-position:50% 10%}.item.f-instagram-2026-DbQwyojlvaL img,.post.f-instagram-2026-DbQwyojlvaL img{object-position:50% 15%}.item.f-instagram-2026-DbJD08sFk9- img,.post.f-instagram-2026-DbJD08sFk9- img{object-position:50% 0%}.item.f-instagram-2026-Da3B5YKliSN img,.post.f-instagram-2026-Da3B5YKliSN img{object-position:50% 0%}.item.f-instagram-2026-DasXtcGlrxy img,.post.f-instagram-2026-DasXtcGlrxy img{object-position:50% 0%}.item.f-instagram-2026-DalCGirFnS4 img,.post.f-instagram-2026-DalCGirFnS4 img{object-position:50% 0%}.item.f-instagram-2026-Daf24LCFgIL img,.post.f-instagram-2026-Daf24LCFgIL img{object-position:50% 0%}.item.f-instagram-2026-DaS-YUclu5Y img,.post.f-instagram-2026-DaS-YUclu5Y img{object-position:50% 0%}.item.f-instagram-2026-DaN1htyFjHX img,.post.f-instagram-2026-DaN1htyFjHX img{object-position:50% 0%}.item.f-instagram-2026-DaIsDLSltDf img,.post.f-instagram-2026-DaIsDLSltDf img{object-position:50% 0%}.item.f-instagram-2026-DaA7WGNDK-L img,.post.f-instagram-2026-DaA7WGNDK-L img{object-position:50% 0%}.item.f-instagram-2026-DZ75H8jFheB img,.post.f-instagram-2026-DZ75H8jFheB img{object-position:50% 0%}.item.f-instagram-2026-DZu9AHYFruL img,.post.f-instagram-2026-DZu9AHYFruL img{object-position:50% 0%}.item.f-instagram-2026-DZpyGDjFhR6 img,.post.f-instagram-2026-DZpyGDjFhR6 img{object-position:50% 5%}