/* Alain Brice-Balan portfolio. Design system: Voyager (see CLAUDE.md).
   Black ground, a classical serif, photographs as standing cards in an arc.
   Tokens live here; nothing below uses a new hex value. */

:root {
  --g: #0A0A0B;        /* ground */
  --g2: #141416;       /* raised panels, image placeholders */
  --t: #EFEBE6;        /* text */
  --m: #8E8A86;        /* secondary text */
  --line: #232326;     /* the rare rule */
  --serif: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --r: 0px;           /* photographs are never cropped at the corners (David, 17 October 2026) */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur: 0.8s;
  --wrap: 1180px;
  --gutter: clamp(18px, 4vw, 48px);
  --header-h: 6.25rem;  /* the sticky header's height; site.js measures the real one so in-page links land under it */
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--g); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 0.75rem); } /* "scroll for more" and the set row land just under the sticky header, not behind it (David, 18 October 2026) */
body {
  margin: 0; background: var(--g); color: var(--t);
  font-family: var(--serif); font-size: 1.25rem; line-height: 1.5;
  font-feature-settings: "kern", "liga";
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; background: var(--g2); }
[hidden] { display: none !important; } /* a display rule on an element must never beat its hidden attribute (the diary button showed on photos with no entry) */
a { color: inherit; text-decoration: none; }
p a, figcaption a { text-decoration: underline; text-underline-offset: 0.14em; text-decoration-thickness: 1px; text-decoration-color: var(--m); }
p a:hover, figcaption a:hover { text-decoration-color: var(--t); }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.05; margin: 0; letter-spacing: -0.01em; text-wrap: balance; }
p { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--t); outline-offset: 3px; border-radius: 2px; }
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.sans { font-family: var(--sans); font-size: 0.8125rem; letter-spacing: 0.01em; }
.skip-link { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--t); color: var(--g); padding: 0.5rem 0.8rem; font-family: var(--sans); font-size: 0.875rem; }
.skip-link:focus { left: 8px; }

/* Header ------------------------------------------------------------- */
.site-header { position: sticky; top: 0; z-index: 40; background: rgba(10, 10, 11, 0.86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); padding-block: 0.75rem 0; } /* closed up a little to make room for the set row (David, 18 October 2026) */
.site-header > .wrap { padding-bottom: 0.7rem; }
.sub-nav { border-top: 1px solid var(--line); }
.sub-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(0.9rem, 2.5vw, 1.6rem); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.sub-nav ul::-webkit-scrollbar { display: none; }
.sub-nav a { display: block; font-family: var(--sans); font-size: 0.8125rem; line-height: 1.25; color: var(--m); letter-spacing: 0.01em; padding-block: 0.5rem; white-space: nowrap; transition: color 0.25s; }
.sub-nav a:hover, .sub-nav a[aria-current="page"] { color: var(--t); }
.sub-nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 0.45em; text-decoration-thickness: 1px; }
/* the set row: his set titles, in his serif, under the collections; site.js marks the one on screen */
.set-nav { border-top: 1px solid var(--line); }
.set-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(1rem, 2.5vw, 1.8rem); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.set-nav ul::-webkit-scrollbar { display: none; }
.set-nav a { display: block; font-family: var(--serif); font-style: italic; font-size: 1.05rem; line-height: 1.2; color: var(--m); padding-block: 0.35rem; white-space: nowrap; transition: color 0.25s; }
.set-nav a:hover, .set-nav a[aria-current="true"] { color: var(--t); }
.set-nav a[aria-current="true"] { text-decoration: underline; text-underline-offset: 0.3em; text-decoration-thickness: 1px; }
.site-header .wrap { display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem; }
.wordmark { font-family: var(--serif); font-weight: 500; font-size: 1.4rem; line-height: 1.1; letter-spacing: 0.005em; white-space: nowrap; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(0.9rem, 2.5vw, 1.6rem); }
.site-nav a { font-family: var(--sans); font-size: 0.8125rem; color: var(--m); letter-spacing: 0.01em; padding-block: 0.2rem; transition: color 0.25s; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--t); }
.menu-toggle { display: none; } /* phones only, below */
.menu-toggle span { display: block; width: 22px; height: 1px; background: currentColor; transition: transform 0.25s ease, opacity 0.2s; }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Home hero ----------------------------------------------------------- */
.hero { text-align: center; padding-block: clamp(2rem, 6vh, 4.5rem) 0.5rem; display: grid; gap: 1.1rem; justify-items: center; }
.hero h1 { font-size: clamp(2.1rem, 4.9vw, 4.2rem); white-space: nowrap; } /* one line on a laptop (David, 18 October 2026); wraps again on phones below */
.hero p { color: var(--m); max-width: 66ch; font-size: 1.125rem; } /* two lines on a laptop */
.hero p a { color: var(--t); }

/* The arc ------------------------------------------------------------- */
.arc-block { position: relative; }
.arc-block .label { font-family: var(--sans); font-size: 0.8125rem; letter-spacing: 0.04em; color: var(--m); text-align: center; margin-top: clamp(1.5rem, 4vh, 2.5rem); }
.arc { position: relative; aspect-ratio: 10 / 3.5; max-height: 480px; perspective: 1400px; overflow: hidden; margin-top: 1rem; } /* cards are 22% wide at 3:4, plus a little air */
.arc figure { margin: 0; position: absolute; left: 50%; top: 24px; width: 22%; aspect-ratio: 3 / 4; }
.arc figure a, .arc figure .card { display: block; width: 100%; height: 100%; overflow: hidden; }
.arc img { transition: transform 0.5s ease; transform-origin: 50% 50%; }
.arc figure:hover img { transform: scale(1.08); }
.js .arc { touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.js .arc.dragging figure { transition: none; }
.js .arc.snapping figure { transition: transform 0.4s var(--ease), opacity 0.3s; }
.js .arc.dragging img { transition: none; }
.js .arc.dragging figure:hover img { transform: none; }
.arc img { width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; }
.arc figcaption { position: absolute; left: 8%; right: 8%; bottom: 7%; text-align: center; font-family: var(--serif); font-size: clamp(1rem, 1.6vw, 1.35rem); line-height: 1.2; color: var(--t); text-shadow: 0 2px 16px rgba(0, 0, 0, 0.85); transition: opacity 0.4s 0.3s; }
.arc figure:not(.p0) figcaption { opacity: 0; transition-delay: 0s; }

/* positions are written by the script as p-3 ... p3 */
.js .arc figure { transform: translateX(calc(-50% + var(--x))) translateZ(var(--z)) rotateY(var(--ry)); transition: transform var(--dur) var(--ease), opacity 0.5s; opacity: var(--o, 1); z-index: var(--zi); }
.js .arc .p0  { --x: 0%;    --z: 0px;    --ry: 0deg;   --zi: 5; }
.js .arc .p1  { --x: 118%;  --z: -90px;  --ry: -26deg; --zi: 4; }
.js .arc .p-1 { --x: -118%; --z: -90px;  --ry: 26deg;  --zi: 4; }
.js .arc .p2  { --x: 222%;  --z: -220px; --ry: -40deg; --zi: 3; }
.js .arc .p-2 { --x: -222%; --z: -220px; --ry: 40deg;  --zi: 3; }
.js .arc .p3, .js .arc .p-3, .js .arc .pf { --x: 0%; --z: -700px; --ry: 0deg; --zi: 1; --o: 0; pointer-events: none; }
.js .arc figure:not(.p0) { cursor: pointer; }
.js .arc .p0 img { cursor: pointer; }

/* without the script the arc is a strip you scroll sideways */
.no-js .arc { height: auto; perspective: none; overflow-x: auto; display: flex; gap: 10px; scroll-snap-type: x mandatory; padding-bottom: 0.5rem; }
.no-js .arc figure { position: static; flex: 0 0 60%; max-width: 320px; scroll-snap-align: center; }
.no-js .arc figcaption { position: static; opacity: 1; text-shadow: none; padding-top: 0.5rem; }

.arc-controls { display: flex; justify-content: center; align-items: center; gap: 0.75rem; padding-block: 0.6rem 0.4rem; }
.arc-controls button { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); color: var(--t); display: grid; place-items: center; transition: background 0.25s, color 0.25s, border-color 0.25s; }
.arc-controls button:hover { background: var(--t); color: var(--g); border-color: var(--t); }
.arc-controls button svg { width: 16px; height: 16px; }
.arc-controls .count { font-family: var(--sans); font-size: 0.8125rem; color: var(--m); min-width: 5ch; text-align: center; font-variant-numeric: tabular-nums; }
.no-js .arc-controls { display: none; }

/* Collection page ----------------------------------------------------- */
.page-head { padding-block: clamp(1.5rem, 5vh, 3.5rem) 0.5rem; display: grid; gap: 1rem; max-width: 62ch; }
.page-head h1 { font-size: clamp(2.6rem, 6.5vw, 5rem); }
.page-head p, .set > p { color: var(--t); font-size: 1.2rem; line-height: 1.55; max-width: 62ch; }
.set { margin-top: clamp(2rem, 6vh, 4rem); } /* a margin, not padding: an in-page link to the set then lands on its title, not on the air above it (David, 18 October 2026) */
.set > h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); max-width: 24ch; }
.set > p { color: var(--m); margin-top: 0.8rem; }
.wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 45%), 1fr)); gap: 10px; margin-top: 1rem; }
.wall figure { margin: 0; }
.wall figure { overflow: hidden; }
.wall img { width: 100%; height: auto; cursor: zoom-in; transition: transform 0.5s ease; }
.wall img:hover { transform: scale(1.06); }
.wall .wide { grid-column: span 2; }
.wall figcaption { padding-top: 0.5rem; font-size: 1.05rem; color: var(--m); }
.neighbours { display: flex; justify-content: space-between; gap: 1rem; padding-block: clamp(2.5rem, 7vh, 5rem) 1rem; border-top: 1px solid var(--line); margin-top: clamp(2rem, 6vh, 4rem); }
.neighbours a { display: grid; gap: 0.2rem; font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
.neighbours a span { font-family: var(--sans); font-size: 0.75rem; color: var(--m); letter-spacing: 0.02em; }
.neighbours a:last-child { text-align: right; }
.neighbours a:hover { text-decoration: underline; text-underline-offset: 0.12em; text-decoration-thickness: 1px; }
.embed { margin-top: 1rem; max-width: 420px; }
.embed iframe { width: 100%; aspect-ratio: 612 / 710; border: 0; border-radius: var(--r); background: var(--g2); }

/* Masonry: equal-width columns, each photo at its own height, no cropping.
   The script places each photo in the shortest column, as his Squarespace grid does;
   without the script the browser's own columns do a near-enough job. */
.masonry { margin-top: 1.25rem; columns: 3; column-gap: 10px; }
.masonry figure { margin: 0 0 10px; break-inside: avoid; overflow: hidden; }
.masonry img { width: 100%; height: auto; cursor: zoom-in; transition: transform 0.5s ease; }
.masonry img:hover { transform: scale(1.06); }
.masonry figcaption { padding: 0.5rem 0 0.2rem; font-size: 1.05rem; color: var(--m); }
.js .masonry { columns: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: start; }
.masonry[data-cols="4"] { columns: 4; }
.js .masonry[data-cols="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.jrows { --gap: 10px; display: grid; gap: var(--gap); margin-top: 1.25rem; }
.jrow { display: flex; gap: var(--gap); align-items: stretch; }
.jrow figure { margin: 0; min-width: 0; overflow: hidden; }
.jrow img { width: 100%; height: auto; display: block; cursor: zoom-in; transition: transform 0.5s ease; }
.jrow img:hover { transform: scale(1.06); }
.jrow figcaption { padding-top: 0.5rem; font-size: 1.05rem; color: var(--m); }
.jrow .reel iframe { display: block; width: 100%; height: 100%; aspect-ratio: 612 / 710; border: 0; background: var(--g2); }
.reel-tile { position: relative; display: block; height: 100%; color: var(--t); } /* the reel's first frame under a veil, a play mark, a line of Archivo */
.reel-tile img { cursor: pointer; }
.reel-tile .veil { position: absolute; inset: 0; background: rgba(10, 10, 11, 0.6); display: grid; place-content: center; justify-items: center; gap: 0.9rem; transition: background 0.5s ease; }
.reel-tile:hover .veil { background: rgba(10, 10, 11, 0.45); }
.reel-tile .play { width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--t); display: grid; place-items: center; transition: background 0.3s, color 0.3s; }
.reel-tile:hover .play { background: var(--t); color: var(--g); }
.reel-tile .play svg { width: 18px; height: 18px; fill: currentColor; margin-left: 3px; }
.reel-tile .label { font-family: var(--sans); font-size: 0.8rem; letter-spacing: 0.04em; }
.row-3, .row-2, .row-4 { display: grid; gap: 10px; margin-top: 1.25rem; }
.row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.row-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.row-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
[class^="row-"] figure { margin: 0; overflow: hidden; }
[class^="row-"] img { width: 100%; height: auto; cursor: zoom-in; transition: transform 0.5s ease; }
[class^="row-"] img:hover { transform: scale(1.06); }
[class^="row-"] figcaption { padding-top: 0.5rem; font-size: 1.05rem; color: var(--m); }
.set.feature { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.set.feature .copy { display: grid; gap: 1rem; }
.set.feature.photo-left .copy { order: 2; }
.set.feature.photo-left .photo { order: 1; }
.set.feature .copy > h2, .set.feature .copy > p { margin: 0; }
.set.feature .photo figure { margin: 0; overflow: hidden; }
.set.feature .photo img { width: 100%; height: auto; cursor: zoom-in; transition: transform 0.5s ease; }
.set.feature .photo img:hover { transform: scale(1.04); }
.js .masonry .col { display: grid; gap: 10px; align-content: start; min-width: 0; }
.js .masonry .col figure { margin: 0; }

/* Story and contact --------------------------------------------------- */
.story-portrait { margin: clamp(0.5rem, 2vh, 1.5rem) 0 0; overflow: hidden; }
.story-portrait img { width: 100%; height: auto; }
.story { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(1.5rem, 5vw, 5rem); align-items: start; padding-block: clamp(2rem, 6vh, 4rem) 0; }
.story .copy { display: grid; gap: 1.3rem; font-size: clamp(1.35rem, 1.9vw, 1.7rem); line-height: 1.45; max-width: 40ch; }
.story figure { margin: 0; overflow: hidden; }
.story img { width: 100%; height: auto; transition: transform 0.5s ease; }
.story img:hover { transform: scale(1.04); }
.story .pair { display: flex; gap: 10px; align-items: stretch; }
.story .pair figure { min-width: 0; }
.contact-page { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; padding-block: clamp(1rem, 3vh, 2rem) 0; }
.contact-page .photos { display: grid; gap: 10px; }
.contact-page figure, .contact-wide figure { margin: 0; overflow: hidden; }
.contact-page img, .contact-wide img { width: 100%; height: auto; transition: transform 0.5s ease; }
.contact-page img:hover, .contact-wide img:hover { transform: scale(1.04); }
.contact-wide { margin: 10px 0 0; }
.form { display: grid; gap: 1.3rem; max-width: 560px; font-family: var(--sans); font-size: 0.9375rem; }
.form fieldset.name legend { margin-bottom: 0.6rem; }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form label { display: grid; gap: 0.4rem; color: var(--t); }
.form label small, .form fieldset small { color: var(--m); font-size: 0.8125rem; }
.form input:not([type="checkbox"]), .form textarea { font: inherit; color: var(--t); background: var(--g2); border: 1px solid var(--line); border-radius: var(--r); padding: 0.7rem 0.8rem; width: 100%; }
.form textarea { min-height: 8rem; resize: vertical; }
.form fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.form legend { padding: 0; margin-bottom: 0.3rem; }
.form .checks { display: flex; flex-wrap: wrap; gap: 0.5rem 1.2rem; }
.form .checks label { display: flex; gap: 0.5rem; align-items: center; }
.form .checks input { appearance: none; -webkit-appearance: none; flex: none; width: 1rem; height: 1rem; margin: 0; border: 1px solid var(--t); background: transparent; cursor: pointer; } /* square and drawn by us, so every browser shows the empty boxes (David, 20 October 2026) */
.form .checks input:checked { background: var(--t); box-shadow: inset 0 0 0 3px var(--g); }
.form .checks input:focus-visible { outline: 1px solid var(--t); outline-offset: 2px; }
a.button { display: inline-block; text-decoration: none; font-family: var(--sans); font-size: 0.875rem; letter-spacing: 0.04em; background: var(--t); color: var(--g); padding: 0.85rem 1.4rem; border-radius: 999px; margin-top: 0.4rem; }
a.button:hover { background: var(--m); }
.form button { font-family: var(--sans); font-size: 0.875rem; letter-spacing: 0.04em; background: var(--t); color: var(--g); padding: 0.85rem 1.4rem; border-radius: 999px; justify-self: start; }
.form button:disabled { opacity: 0.6; cursor: default; }
.form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* the honeypot: people never see it, bots fill it */
.form .cf-turnstile:empty { display: none; } /* Turnstile shows itself only when it needs the visitor */
.form-status { margin: 0; color: var(--t); }
.form-status a { text-decoration: underline; text-underline-offset: 0.2em; }
.marquee { overflow: hidden; white-space: nowrap; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-top: clamp(2.5rem, 7vh, 5rem); padding-block: 0.8rem; font-size: clamp(1.4rem, 3vw, 2.2rem); }
.marquee span { display: inline-block; padding-right: 2rem; }
.js.motion-full .marquee span { animation: marquee 22s linear infinite; }
.marquee:hover span { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-100%); } }

/* Footer -------------------------------------------------------------- */
.site-footer { margin-top: clamp(2rem, 5vh, 3rem); padding-block: 1.5rem 2rem; border-top: 1px solid var(--line); }
.site-footer .wrap { display: grid; grid-template-columns: 1fr auto; gap: 1rem 3rem; align-items: start; }
.site-footer .left { display: grid; gap: 1.1rem; min-width: 0; }
.site-footer .tagline { color: var(--m); font-size: 1.05rem; line-height: 1.4; }
.site-footer .tagline a { color: var(--t); }
.site-footer .contact { display: grid; gap: 0.2rem; }
.site-footer .contact a { font-size: clamp(1.5rem, 3vw, 2.2rem); }
.site-footer .contact a:hover { text-decoration: underline; text-underline-offset: 0.12em; text-decoration-thickness: 1px; }
.site-footer .contact p { color: var(--m); font-size: 1.1rem; }
.site-footer .links { display: grid; gap: 0.6rem; justify-items: end; padding-top: 0.15rem; }
.site-footer .icons { display: flex; gap: 1rem; }
.site-footer .icons a { display: block; width: 22px; height: 22px; color: var(--m); transition: color 0.25s, transform 0.25s; }
.site-footer .icons a:hover { color: var(--t); transform: translateY(-1px); }
.site-footer .icons svg { width: 100%; height: 100%; display: block; }
.site-footer .links .motion { margin-top: 0.2rem; font-family: var(--sans); font-size: 0.8125rem; color: var(--m); transition: color 0.25s; }
.site-footer .links .motion:hover { color: var(--t); }

/* Lightbox ------------------------------------------------------------ */
.lightbox { position: fixed; inset: 0; z-index: 60; background: var(--g); display: grid; grid-template-rows: minmax(0, 1fr) auto auto; align-items: center; justify-items: center; padding: 3.5rem var(--gutter) 1.5rem; opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.lightbox .note { font-family: var(--serif); font-size: 1.05rem; line-height: 1.45; color: var(--t); max-width: 70ch; max-height: calc(4 * 1.45em + 0.6rem); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line) transparent; white-space: pre-line; text-align: left; padding: 0.6rem 0.75rem 0 0; margin: 0; } /* four lines at most, the rest by scrolling, so the photo keeps the room (David, 17 October 2026) */
.lightbox .bar .note-toggle { width: auto; height: auto; border-radius: 999px; padding: 0.45rem 0.8rem; font-family: var(--sans); font-size: 0.75rem; letter-spacing: 0.04em; white-space: nowrap; }
.lightbox .bar .note-toggle[aria-expanded="true"] { background: var(--t); color: var(--g); border-color: var(--t); }
.lightbox.open { opacity: 1; pointer-events: auto; }
/* The photo sits absolutely inside a stage that fills its row. Safari does not resolve a percentage max-height
   against a grid row, so a photo placed straight in the row kept its natural height and the bar and the diary entry
   drew over it on phones (David, 18 October 2026). Against an absolutely positioned box the percentages always resolve. */
.lightbox .stage { position: relative; align-self: stretch; justify-self: stretch; width: 100%; min-height: 0; }
.lightbox img { position: absolute; inset: 0; margin: auto; max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: var(--r); background: transparent; }
.lightbox .bar { display: flex; align-items: center; gap: 1rem; padding-top: 0.9rem; font-family: var(--sans); font-size: 0.8125rem; color: var(--m); }
.lightbox .bar .cap { font-family: var(--serif); font-size: 1.15rem; color: var(--t); }
.lightbox .bar button, .lightbox .close { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); color: var(--t); display: grid; place-items: center; }
.lightbox .bar button:hover, .lightbox .close:hover { background: var(--t); color: var(--g); border-color: var(--t); }
.lightbox .bar button svg, .lightbox .close svg { width: 16px; height: 16px; }
.lightbox .close { position: absolute; top: 1rem; right: var(--gutter); }
body.lightbox-open { overflow: hidden; }

/* Reveal, view transitions, motion ----------------------------------- */
.js.motion-full [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.js.motion-full [data-reveal].in { opacity: 1; transform: none; }
.motion-reduce *, .motion-reduce *::before, .motion-reduce *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
.motion-reduce .arc figure { transition: none; }
.todo { font-family: var(--sans); font-size: 0.8125rem; color: var(--g); background: #E7D77A; padding: 0.5rem 0.7rem; border-radius: var(--r); margin-top: 1rem; max-width: 60ch; }

/* Phones -------------------------------------------------------------- */
@media (max-width: 760px) {
  body { font-size: 1.15rem; }
  .hero h1 { white-space: normal; font-size: clamp(2.2rem, 9.5vw, 3rem); max-width: 14ch; }
  .site-header .wrap { flex-wrap: wrap; gap: 0.4rem 1rem; }
  /* the main links fold behind the menu button, so the top row is the name alone (David, 20 October 2026); without script they stay out */
  .js .site-header > .wrap { align-items: center; }
  .js .menu-toggle { display: flex; flex-direction: column; justify-content: center; align-items: flex-end; gap: 5px; order: 1; width: 44px; height: 44px; margin: -10px -10px -10px 0; padding: 10px; background: none; border: 0; color: var(--t); cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .js .site-nav { display: none; order: 2; flex-basis: 100%; border-top: 1px solid var(--line); margin-top: 0.35rem; }
  .js .site-header.menu-open .site-nav { display: block; }
  .js .site-nav ul { flex-direction: column; gap: 0; padding-top: 0.25rem; }
  .js .site-nav a { display: block; font-size: 1.05rem; padding-block: 0.6rem; }
  .sub-nav ul, .set-nav ul { -webkit-mask-image: linear-gradient(to right, #000 85%, transparent); mask-image: linear-gradient(to right, #000 85%, transparent); padding-right: 2rem; } /* hints that the row scrolls */
  :root { --header-h: 9.5rem; }
  .arc { aspect-ratio: 100 / 84; height: auto; max-height: none; } /* a 56%-wide 3:4 card plus its 24px offset and a little air */
  .arc figure { width: 56%; }
  .js .arc .p1  { --x: 60%;  --z: -160px; --ry: -32deg; }
  .js .arc .p-1 { --x: -60%; --z: -160px; --ry: 32deg; }
  .js .arc .p2, .js .arc .p-2 { --o: 0; pointer-events: none; }
  .wall { grid-template-columns: 1fr 1fr; gap: 6px; }
  .wall .wide { grid-column: span 2; }
  .masonry, .masonry[data-cols="4"] { columns: 1; }
  .row-3, .row-4, .row-2 { grid-template-columns: 1fr; gap: 8px; }
  .jrows { --gap: 8px; grid-template-columns: 1fr; } /* one photo per row on phones: whole, full width, no ragged pairs */
  .jrow { display: contents; }
  .jrow figure { flex: none !important; }
  .set.feature { grid-template-columns: 1fr; }
  .masonry figure { margin-bottom: 6px; }
  .js .masonry, .js .masonry[data-cols="4"] { grid-template-columns: 1fr; gap: 8px; }
  .js .masonry .col { gap: 6px; }
  .story { grid-template-columns: 1fr; }
  .form .row { grid-template-columns: 1fr; }
  .contact-page { grid-template-columns: 1fr; }
  .site-footer .wrap { grid-template-columns: 1fr; }
  .site-footer .links { justify-items: start; }
  .neighbours a { font-size: 1.3rem; }
  .lightbox { padding: 3.5rem 1rem 1rem; }
  .lightbox .note { font-size: 1rem; }
}
@media (hover: none) {
  .arc-controls button { display: none; }
  .arc figure:hover img { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html:not(.motion-full) .marquee span { animation: none; }
}