/* ═══════════════════════════════════════════════════════════════════════════
   August Marlow — Photographer
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --ink:      #0b0b0c;
  --ink-2:    #101012;
  --bone:     #ede9e3;
  --bone-dim: rgba(237,233,227,.52);
  --ink-dim:  rgba(11,11,12,.55);
  --line:     rgba(237,233,227,.16);
  --line-ink: rgba(11,11,12,.16);
  --ember:    #ff4a1c;

  --sans:  "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: "Instrument Serif", "Times New Roman", Times, serif;

  --pad: clamp(1.15rem, 3.6vw, 4rem);
  --sect: clamp(6rem, 14vh, 11rem);

  --ease: cubic-bezier(.22,1,.36,1);
  --slow: cubic-bezier(.76,0,.24,1);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{ background:var(--ink); -webkit-text-size-adjust:100%; }
html.is-loading, html.is-loading body{ overflow:hidden; height:100%; }

body{
  font-family:var(--sans);
  font-size:clamp(.95rem,1.05vw,1.0625rem);
  line-height:1.6;
  color:var(--bone);
  background:var(--ink);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; }
::selection{ background:var(--ember); color:#fff; }

/* ─── shared type ─────────────────────────────────────────────────────────── */
.lbl,.sect-tag{
  font-size:.6875rem; font-weight:500; letter-spacing:.18em;
  text-transform:uppercase; line-height:1;
}
.sect-tag{ display:flex; align-items:center; gap:.7em; opacity:.55; margin-bottom:clamp(2rem,5vw,4rem); }
.sect-tag i{ font-style:normal; color:var(--ember); opacity:.9; }
.lbl{ display:block; opacity:.45; margin-bottom:.7em; }

/* split-text primitives */
[data-split]{ }
.w{ display:inline-block; white-space:nowrap; }
.c{ display:inline-block; overflow:hidden; vertical-align:top;
    padding-bottom:.14em; margin-bottom:-.14em; }
.ci{ display:inline-block; transform:translate3d(0,110%,0); will-change:transform; }
.wd{ display:inline-block; }

/* ─── cursor ──────────────────────────────────────────────────────────────── */
.cursor{ position:fixed; inset:0; z-index:500; pointer-events:none;
         mix-blend-mode:difference; display:none; }
/* Position, scale and centring are all owned by GSAP — mixing them with CSS
   transforms makes GSAP flatten the -50% offsets into stale pixel values. */
.cursor__dot,.cursor__ring{ position:absolute; top:0; left:0; border-radius:50%;
  will-change:transform; }
.cursor__dot{ width:6px; height:6px; background:var(--bone); }
.cursor__ring{
  width:82px; height:82px; border:1px solid rgba(237,233,227,.75);
  display:grid; place-items:center;
}
.cursor__label{
  font-size:.625rem; letter-spacing:.16em; text-transform:uppercase;
  opacity:0; transition:opacity .3s; color:var(--bone);
}
.cursor.is-view .cursor__label,
.cursor.is-drag .cursor__label{ opacity:1; }
@media (hover:hover) and (pointer:fine) and (min-width:861px){ .cursor{ display:block; } }

/* ─── loader ──────────────────────────────────────────────────────────────── */
.loader{
  position:fixed; inset:0; z-index:600; background:var(--ink);
  display:grid; align-content:center; padding:var(--pad);
  clip-path:inset(0 0 0 0);
}
.loader__name{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(2.6rem,9vw,8rem); line-height:.95; letter-spacing:-.02em;
}
.loader__meta{
  display:flex; gap:1.5rem; flex-wrap:wrap; margin-top:1.4rem;
  font-size:.6875rem; letter-spacing:.18em; text-transform:uppercase; opacity:0;
}
.loader__count{
  position:absolute; right:var(--pad); bottom:calc(var(--pad) + 1.4rem);
  font-size:clamp(2.5rem,7vw,5rem); line-height:1; font-weight:300;
  letter-spacing:-.03em; font-variant-numeric:tabular-nums;
}
.loader__count i{ font-style:normal; font-size:.28em; vertical-align:super; opacity:.5; margin-left:.2em; }
.loader__bar{ position:absolute; left:var(--pad); right:var(--pad); bottom:var(--pad); height:1px; background:var(--line); }
.loader__bar span{ display:block; height:100%; width:0%; background:var(--bone); }

/* ─── nav ─────────────────────────────────────────────────────────────────── */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:300;
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
  padding:clamp(1.1rem,2.2vw,1.9rem) var(--pad);
  mix-blend-mode:difference; color:#fff;
  will-change:transform;
}
.nav__brand{ display:flex; align-items:center; gap:.6rem;
  font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; font-weight:500; }
.nav__mark{ width:9px; height:9px; border:1px solid currentColor; border-radius:50%;
  transition:background-color .4s var(--ease); }
.nav__brand:hover .nav__mark{ background:currentColor; }

.nav__links{ display:flex; gap:clamp(1.2rem,2.6vw,2.6rem); }
.nav__links a{ font-size:.75rem; letter-spacing:.14em; text-transform:uppercase;
  position:relative; overflow:hidden; display:inline-block; padding-block:.15em; }
.nav__links a span{ display:inline-block; transition:transform .55s var(--ease); }
.nav__links a::before{
  content:""; position:absolute; left:0; bottom:.05em; width:100%; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:100% 50%;
  transition:transform .55s var(--ease);
}
.nav__links a:hover::before{ transform:scaleX(1); transform-origin:0 50%; }

.nav__status{ display:flex; align-items:center; gap:.55rem;
  font-size:.6875rem; letter-spacing:.14em; text-transform:uppercase; }
/* it's a mail link now — the nav sits in difference blend, so signal the
   hover with an underline rather than a colour, which would invert */
a.nav__status span:last-child{ position:relative; }
a.nav__status span:last-child::after{
  content:""; position:absolute; left:0; bottom:-.25em; width:100%; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:100% 50%;
  transition:transform .55s var(--ease);
}
a.nav__status:hover span:last-child::after{ transform:scaleX(1); transform-origin:0 50%; }
.nav__status em{ font-style:normal; opacity:.6; }
.dot{ width:6px; height:6px; border-radius:50%; background:#4ade80;
  box-shadow:0 0 0 0 rgba(74,222,128,.6); animation:pulse 2.4s infinite; }
@keyframes pulse{ 70%{ box-shadow:0 0 0 9px rgba(74,222,128,0);} 100%{ box-shadow:0 0 0 0 rgba(74,222,128,0);} }

.nav__burger{ display:none; width:34px; height:34px; position:relative; cursor:pointer; }
.nav__burger i{ position:absolute; left:6px; right:6px; height:1px; background:currentColor;
  transition:transform .45s var(--ease), opacity .3s; }
.nav__burger i:first-child{ top:14px; } .nav__burger i:last-child{ top:20px; }
.nav__burger[aria-expanded="true"] i:first-child{ transform:translateY(3px) rotate(45deg); }
.nav__burger[aria-expanded="true"] i:last-child{ transform:translateY(-3px) rotate(-45deg); }

.menu{
  position:fixed; inset:0; z-index:290; background:var(--ink);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:calc(var(--pad) + 4rem) var(--pad) calc(var(--pad) + 1rem);
  clip-path:inset(0 0 100% 0); pointer-events:none;
  transition:clip-path .8s var(--slow);
}
.menu.is-open{ clip-path:inset(0 0 0% 0); pointer-events:auto; }
.menu__links{ display:flex; flex-direction:column; gap:.15rem; margin-top:auto; }
.menu__links a{ display:flex; align-items:baseline; gap:1rem;
  border-bottom:1px solid var(--line); padding:.5rem 0 .7rem; overflow:hidden; }
.menu__links a i{ font-style:normal; font-size:.625rem; letter-spacing:.14em;
  opacity:.35; min-width:1.6rem; }
.menu__links a span{ font-family:var(--serif);
  font-size:clamp(2.4rem,13vw,4rem); line-height:1; letter-spacing:-.02em; }
.menu__foot{ display:flex; flex-wrap:wrap; gap:1.6rem 2.5rem; margin-top:2.5rem;
  font-size:.75rem; opacity:.75; }
.menu__foot .lbl{ opacity:.4; }

/* ─── hero ────────────────────────────────────────────────────────────────── */
.hero{ position:relative; height:100svh; min-height:600px; overflow:hidden;
       display:flex; flex-direction:column; justify-content:flex-end;
       padding:var(--pad); padding-bottom:calc(var(--pad) + .5rem); }
.hero__canvas{ position:absolute; inset:0; width:100%; height:100%; display:none; }
html.gl-on .hero__canvas{ display:block; }
html.gl-on .hero__fallback{ display:none; }
.hero__fallback{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transform:scale(1.06); }

/* Light scrim — pooled behind the headline and under the meta row rather than
   laid flat over the frame, so the photograph stays open everywhere else.
   The nav needs none of it: it blends in difference mode and inverts itself. */
.hero__scrim{ position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg, transparent 64%, rgba(11,11,12,.24) 100%),
    radial-gradient(115% 80% at 0% 100%, rgba(11,11,12,.40) 0%,
                    rgba(11,11,12,.14) 40%, transparent 70%); }
.svg-defs{ position:absolute; width:0; height:0; overflow:hidden; }
/* No scrim — the photographs are shown without anything laid over them. */

.hero__type{ position:relative; z-index:2; margin-bottom:clamp(2rem,7vh,5rem); }
.hero__title{ font-family:var(--serif); font-weight:400;
  /* Floor restored to the original 3.6rem so phones read as they did before;
     the fluid range and ceiling are the halved values +30% for desktop. */
  font-size:clamp(3.6rem,10vw,9.75rem); line-height:.86; letter-spacing:-.025em; }
.hero__line{ display:block; }
.hero__line--b{ padding-left:.09em; }
.hero__sub{ margin-top:clamp(1.1rem,2.4vw,1.8rem); max-width:34ch;
  font-size:clamp(.9rem,1.15vw,1.0625rem); line-height:1.5; color:rgba(237,233,227,.78); }
.hero__sub em{ font-family:var(--serif); font-style:italic; font-size:1.15em; color:var(--bone); }

.hero__foot{ position:relative; z-index:2; display:flex; flex-wrap:wrap; gap:1.6rem 3rem;
  padding-top:1.3rem; border-top:1px solid var(--line); font-size:.75rem; }
.hero__col{ display:flex; flex-direction:column; gap:.45rem; }
.hero__col--r{ margin-left:auto; text-align:right; }
.hero__col span:not(.lbl){ opacity:.85; }
.hero__col .lbl{ margin-bottom:0; }

.hero__scroll{ position:absolute; z-index:2; right:var(--pad); top:52%;
  display:flex; align-items:center; gap:.7rem;
  font-size:.625rem; letter-spacing:.2em; text-transform:uppercase; opacity:.7; }
.hero__scroll i{ display:block; width:44px; height:1px; background:currentColor; position:relative; overflow:hidden; }
.hero__scroll i::after{ content:""; position:absolute; inset:0; background:var(--ember);
  transform:translateX(-100%); animation:sweep 2.6s var(--ease) infinite; }
@keyframes sweep{ 50%{transform:translateX(0)} 100%{transform:translateX(100%)} }

/* ─── manifesto (light) ───────────────────────────────────────────────────── */
.manifesto{ background:var(--bone); color:var(--ink); padding:var(--sect) var(--pad);
  position:relative; z-index:2; }
.manifesto .sect-tag{ opacity:.5; }
.manifesto__grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.42fr);
  gap:clamp(2.5rem,6vw,6rem); align-items:end; }
.manifesto__text{ font-family:var(--serif); font-weight:400;
  font-size:clamp(1.7rem,4vw,3.7rem); line-height:1.14; letter-spacing:-.015em;
  max-width:24ch; }
.manifesto__text .wd{ opacity:.14; }
.manifesto__sig{ margin-top:clamp(2.5rem,6vw,4.5rem); font-size:.75rem;
  letter-spacing:.16em; text-transform:uppercase; opacity:.5; }

.manifesto__aside{ justify-self:end; width:min(100%,420px); }
.manifesto__frame{ overflow:hidden; aspect-ratio:3/2; background:#ddd8d0;
  clip-path:inset(0 0 100% 0); }
.manifesto__frame img{ width:100%; height:100%; object-fit:cover;
  filter:grayscale(.3) contrast(1.06); transform:scale(1.16); will-change:transform; }
.manifesto__aside figcaption{ margin-top:.85rem; font-size:.625rem;
  letter-spacing:.14em; text-transform:uppercase; opacity:.5; }
.manifesto__aside figcaption span{ color:var(--ember); opacity:.85; margin-right:.5em; }

/* ─── works (horizontal) ──────────────────────────────────────────────────── */
.works{ background:var(--ink); position:relative; z-index:2; }
.works__pin{ height:100svh; display:flex; flex-direction:column; justify-content:center;
  overflow:hidden; position:relative; }
.works__head{ display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--pad); position:absolute; top:clamp(5.5rem,12vh,8rem); left:0; right:0; }
.works__head .sect-tag{ margin:0; }
.works__hint{ font-size:.6875rem; letter-spacing:.18em; text-transform:uppercase; opacity:.5;
  display:flex; align-items:center; gap:.6rem; }
.works__hint i{ font-style:normal; animation:nudge 1.8s var(--ease) infinite; display:inline-block; }
@keyframes nudge{ 50%{ transform:translateX(6px);} }

.works__track{ display:flex; align-items:center; gap:clamp(1.12rem,2.56vw,2.72rem);  /* -20% */
  padding-inline:var(--pad); will-change:transform; }
/* Shape is locked to a ratio, never to the window. Height is bounded on both
   axes (--figH) and the width is derived from it, so a panel keeps its 3:4 in
   a 16:9 fullscreen, an ultrawide or a tall window alike. Sizing the width in
   vw and the height in vh — as this did — let the shape drift with the
   viewport aspect and squared off on wide screens. */
.panel{ flex:0 0 auto; position:relative;
  --figH:min(62vh,58vw); width:calc(var(--figH) * 3 / 4); }
.panel--wide{ --figH:min(46vh,34vw); width:calc(var(--figH) * 3 / 2); }
.panel--tall{ --figH:min(70vh,46vw); width:calc(var(--figH) * 2 / 3); }
.panel figure{ overflow:hidden; position:relative; background:var(--ink-2);
  height:var(--figH); aspect-ratio:3/4; }
.panel--wide figure{ aspect-ratio:3/2; }
.panel--tall figure{ aspect-ratio:2/3; }
.panel figure::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(11,11,12,.5)); opacity:0; transition:opacity .6s; }
/* no grade — the photographs run at their own colour */
.panel img{ width:100%; height:100%; object-fit:cover;
  transform:scale(1.14); will-change:transform; }
.panel:hover figure::after{ opacity:1; }
/* same ember lift the contact email makes on hover */
.panel__meta h3{ transition:color .45s var(--ease); }
.panel:hover .panel__meta h3,
.panel:focus-visible .panel__meta h3{ color:var(--ember); }

.panel__meta{ display:flex; align-items:baseline; gap:.85rem; margin-top:1.1rem; flex-wrap:wrap; }
.panel__no{ font-size:.6875rem; letter-spacing:.12em; opacity:.4; }
.panel__meta h3{ font-family:var(--serif); font-weight:400;
  font-size:clamp(1.2rem,1.9vw,1.9rem); line-height:1; letter-spacing:-.01em; }
.panel__cat{ margin-left:auto; font-size:.6875rem; letter-spacing:.14em;
  text-transform:uppercase; opacity:.4; }

.panel--end{ width:26vw; display:flex; flex-direction:column; justify-content:center;
  gap:1.4rem; padding-left:clamp(1rem,2vw,2rem); border-left:1px solid var(--line);
  align-self:stretch; }
.panel--end span{ font-family:var(--serif); font-size:clamp(1.6rem,2.6vw,2.6rem); line-height:1.05; }
.panel--end a{ font-size:.6875rem; letter-spacing:.16em; text-transform:uppercase;
  border-bottom:1px solid var(--line); padding-bottom:.5rem; width:max-content; }
.panel--end a:hover{ border-color:var(--ember); color:var(--ember); }

.works__prog{ position:absolute; left:var(--pad); right:var(--pad);
  bottom:clamp(2rem,6vh,3.5rem); height:1px; background:var(--line); }
.works__prog span{ display:block; height:100%; width:0%; background:var(--bone); }

/* ─── index list ──────────────────────────────────────────────────────────── */
.index{ background:var(--ink); padding:var(--sect) var(--pad); position:relative; z-index:2; }
.list{ list-style:none; border-top:1px solid var(--line); }
.list li{ border-bottom:1px solid var(--line); }
.list a{ display:grid; grid-template-columns:3.5rem 1fr auto auto;
  align-items:center; gap:1.5rem; padding:clamp(1.1rem,2.4vw,1.9rem) 0;
  position:relative; }
.list a::before{ content:""; position:absolute; left:-2vw; right:-2vw; top:0; bottom:0;
  background:rgba(237,233,227,.035); opacity:0; transition:opacity .5s var(--ease); }
.list a:hover::before{ opacity:1; }
.list__no{ font-size:.6875rem; letter-spacing:.12em; opacity:.35; position:relative; }
.list__ttl{ font-family:var(--serif); font-weight:400;
  font-size:clamp(1.7rem,4.4vw,3.6rem); line-height:1; letter-spacing:-.015em;
  position:relative; transition:transform .6s var(--ease), color .5s; }
.list a:hover .list__ttl{ transform:translateX(clamp(.5rem,1.5vw,1.6rem)); }
.list__cat,.list__yr{ font-size:.6875rem; letter-spacing:.14em; text-transform:uppercase;
  opacity:.4; position:relative; }
.list__yr{ min-width:3.2rem; text-align:right; }
.list__thumb{ display:none; }

.peek{ position:fixed; top:0; left:0; z-index:60; width:clamp(180px,17vw,290px);
  aspect-ratio:4/5; overflow:hidden; pointer-events:none; opacity:0;
  transform:translate3d(-50%,-50%,0) scale(.86); will-change:transform,opacity; }
.peek img{ width:100%; height:100%; object-fit:cover; filter:grayscale(.15) contrast(1.05); }

/* ─── about (light) ───────────────────────────────────────────────────────── */
.about{ background:var(--bone); color:var(--ink); padding:var(--sect) var(--pad);
  /* .9fr/1.1fr put the portrait at 45% of the available width; .63fr/1.37fr
     is 31.5% — the same picture, 30% narrower. */
  display:grid; grid-template-columns:minmax(0,.63fr) minmax(0,1.37fr);
  gap:clamp(2.5rem,6vw,7rem); align-items:start; position:relative; z-index:2; }
/* the tag is a grid child now — span both columns so it sits at the page edge
   above them, matching Selected work and Contact */
.about > .sect-tag{ grid-column:1 / -1; opacity:.5; }
/* let the portrait drop below the text, so the two columns don't start level */
.about__media{ margin-top:clamp(2rem,5vw,4.5rem); }
.about__frame{ overflow:hidden; background:#ddd8d0; aspect-ratio:4/5;
  clip-path:inset(0 0 100% 0); }
.about__frame img{ width:100%; height:100%; object-fit:cover;
  transform:scale(1.18); will-change:transform; }
.about__cap{ display:block; margin-top:.9rem; font-size:.6875rem;
  letter-spacing:.14em; text-transform:uppercase; opacity:.45; }
.about__h{ font-family:var(--serif); font-weight:400;
  font-size:clamp(2.2rem,5.4vw,4.6rem); line-height:1.02; letter-spacing:-.02em;
  margin-bottom:clamp(1.5rem,3vw,2.4rem); }
.about__body p{ max-width:58ch; color:var(--ink-dim); margin-bottom:1.1rem;  /* 52ch +12% */
  /* Justified, with hyphenation on. Without it the browser can only stretch
     word spaces, which opens rivers of white through a column this narrow —
     especially on a phone. `lang="en"` on <html> is what makes it work. */
  text-align:justify; -webkit-hyphens:auto; hyphens:auto; }
/* the closing invitation, lifted out of the body colour so it reads as an offer */
.about__cta{ color:var(--ink); margin-top:1.8rem; }

/* ─── album overlay ───────────────────────────────────────────────────────── */
/* Sits above the nav but below the cursor, so the custom cursor
   the custom cursor keep working over it. */
/* focus returns to the panel on close — show the ring for keyboards only */
.panel[data-album]{ cursor:pointer; outline:none; }
.panel[data-album]:focus-visible{ outline:1px solid var(--ember); outline-offset:8px; }

.album{
  position:fixed; inset:0; z-index:350; background:var(--ink);
  visibility:hidden; opacity:0;
}
.album.is-open{ visibility:visible; opacity:1; }

.album__scroll{
  position:absolute; inset:0; overflow-y:auto; overflow-x:hidden;
  -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
}

.album__close{
  position:absolute; top:clamp(1rem,2.2vw,1.9rem); right:var(--pad); z-index:3;
  width:46px; height:46px; border-radius:50%; cursor:pointer;
  border:1px solid rgba(237,233,227,.35); background:rgba(11,11,12,.35);
  backdrop-filter:blur(6px); mix-blend-mode:difference;
  transition:border-color .4s var(--ease), transform .5s var(--ease);
}
.album__close i{ position:absolute; left:14px; right:14px; top:22px; height:1px;
  background:var(--bone); transform-origin:50% 50%; }
.album__close i:first-child{ transform:rotate(45deg); }
.album__close i:last-child{ transform:rotate(-45deg); }
.album__close:hover{ border-color:var(--bone); transform:rotate(90deg); }

.album__lead{ position:relative; height:min(74vh,760px); overflow:hidden; background:var(--ink-2); }
/* focal point comes from the album's `lead` field; centre unless stated */
.album__lead img{ width:100%; height:100%; object-fit:cover; object-position:50% 50%; }
.album__leadScrim{ position:absolute; inset:0;
  background:
    linear-gradient(180deg,rgba(11,11,12,.42) 0%,rgba(11,11,12,0) 30%,rgba(11,11,12,.72) 100%),
    linear-gradient(90deg,rgba(11,11,12,.5) 0%,rgba(11,11,12,0) 55%); }
.album__leadType{ position:absolute; left:var(--pad); right:var(--pad); bottom:clamp(1.6rem,4vw,3rem); }
.album__leadType .sect-tag{ margin-bottom:.9rem; opacity:.75; }
.album__title{ font-family:var(--serif); font-weight:400;
  font-size:clamp(2.2rem,6.5vw,6rem); line-height:.95; letter-spacing:-.025em; }

.album__body{ padding:clamp(3rem,7vw,6rem) var(--pad) calc(var(--pad) + 2rem); }

/* Multi-column masonry — mixed portrait/landscape flow without needing to
   declare each image's dimensions, so adding a photo stays a one-line edit. */
/* CSS multi-column fills each column top-to-bottom, so the reading order ran
   down and then across. A grid on a fine row unit, with each figure spanning
   however many units it needs, places them left-to-right instead — and still
   lets every photograph keep its own aspect ratio. Spans are set in main.js. */
.album__grid{ --albumGap:clamp(.25rem,.5vw,.5rem); --albumRow:4px;
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:var(--albumGap); grid-auto-rows:var(--albumRow); }
/* grid-row-END, not the `grid-row` shorthand: the shorthand sets the START as
   a span, and a span on both ends makes the browser discard the end one — so
   the JS-computed span would be ignored and every tile would occupy 60 rows. */
.album__grid figure{ grid-row-end:span 60; margin:0;
  overflow:hidden; background:var(--ink-2); position:relative; cursor:pointer; }
/* fills the tile exactly, so rounding the span to the row unit never leaves
   a sliver of background at the bottom */
.album__grid img{ width:100%; height:100%; object-fit:cover; display:block;
  filter:grayscale(.12) contrast(1.03); transform:scale(1.001);
  transition:filter .7s var(--ease), transform 1s var(--ease); }
.album__grid figure:hover img{ filter:grayscale(0) contrast(1); transform:scale(1.04); }
.album__grid figure:focus-visible{ outline:1px solid var(--ember); outline-offset:3px; }

.album__foot{ display:flex; justify-content:space-between; align-items:center; gap:1.5rem;
  flex-wrap:wrap; margin-top:clamp(2.5rem,5vw,4rem); padding-top:1.4rem;
  border-top:1px solid var(--line);
  font-size:.6875rem; letter-spacing:.14em; text-transform:uppercase; }
.album__foot span{ opacity:.45; }
.album__back{ cursor:pointer; letter-spacing:.14em; text-transform:uppercase;
  border-bottom:1px solid var(--line); padding-bottom:.4rem; transition:color .4s, border-color .4s; }
.album__back:hover{ color:var(--ember); border-color:var(--ember); }

/* ─── lightbox ────────────────────────────────────────────────────────────── */
.lbox{
  position:fixed; inset:0; z-index:370; display:grid; place-items:center;
  background:rgba(8,8,9,.94); backdrop-filter:blur(10px);
  visibility:hidden; opacity:0;
}
.lbox.is-open{ visibility:visible; }
.album.lbox-open .album__scroll{ overflow:hidden; }

.lbox__stage{ margin:0; max-width:92vw; max-height:84vh; display:grid; place-items:center; }
.lbox__stage img{ max-width:92vw; max-height:84vh; width:auto; height:auto;
  object-fit:contain; display:block; will-change:transform,opacity; }

.lbox__close,.lbox__nav{
  position:absolute; z-index:2; cursor:pointer; border-radius:50%;
  border:1px solid rgba(237,233,227,.28); background:rgba(11,11,12,.45);
  backdrop-filter:blur(6px); color:var(--bone);
  transition:border-color .4s var(--ease), background-color .4s, transform .5s var(--ease);
}
.lbox__close{ top:clamp(1rem,2.2vw,1.9rem); right:var(--pad); width:46px; height:46px; }
.lbox__close i{ position:absolute; left:14px; right:14px; top:22px; height:1px; background:var(--bone); }
.lbox__close i:first-child{ transform:rotate(45deg); }
.lbox__close i:last-child{ transform:rotate(-45deg); }
.lbox__close:hover{ border-color:var(--bone); transform:rotate(90deg); }

.lbox__nav{ top:50%; margin-top:-27px; width:54px; height:54px; font-size:1.05rem; line-height:1; }
.lbox__nav--prev{ left:clamp(.6rem,2vw,2.2rem); }
.lbox__nav--next{ right:clamp(.6rem,2vw,2.2rem); }
.lbox__nav:hover{ border-color:var(--bone); background:rgba(237,233,227,.12); }
.lbox__nav[disabled]{ opacity:.25; pointer-events:none; }

.lbox__count{ position:absolute; bottom:clamp(1rem,3vw,2rem); left:50%; transform:translateX(-50%);
  font-size:.6875rem; letter-spacing:.18em; text-transform:uppercase; opacity:.5;
  font-variant-numeric:tabular-nums; }

@media (max-width:640px){
  .lbox__nav{ width:44px; height:44px; margin-top:-22px; }
  .lbox__stage img{ max-width:96vw; max-height:76vh; }
}

/* the element that flies from the clicked panel into the lead slot */
.album__flier{ position:fixed; z-index:360; overflow:hidden; pointer-events:none;
  background:var(--ink-2); }
.album__flier img{ width:100%; height:100%; object-fit:cover; object-position:50% 50%; }

html.album-open, html.album-open body{ overflow:hidden; }

@media (max-width:1100px){ .album__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){
  .album__grid{ grid-template-columns:1fr; }
  .album__lead{ height:min(62vh,560px); }
  .album__close{ width:40px; height:40px; }
  .album__close i{ left:12px; right:12px; top:19px; }
}

/* ─── marquee ─────────────────────────────────────────────────────────────── */
.marquee{ background:var(--ink); padding:clamp(2.5rem,6vw,4.5rem) 0;
  overflow:hidden; border-block:1px solid var(--line); position:relative; z-index:2; }
.marquee__row{ display:flex; width:max-content; will-change:transform; }
.marquee__row span{ font-family:var(--serif);
  font-size:clamp(1.8rem,4.6vw,4rem); line-height:1; white-space:nowrap; padding-right:.4em; }
/* U+2731 HEAVY ASTERISK, not U+2733 — the latter is a real emoji (✳️), so iOS
   resolves it from Apple Color Emoji and paints it green, ignoring `color`.
   The explicit stack keeps the fallback on a text font either way. */
.marquee__row i{ font-style:normal; color:var(--ember); font-size:.5em;
  vertical-align:middle; opacity:.85;
  font-family:"Instrument Serif","Times New Roman",Times,serif;
  /* `middle` aligns to half the x-height, which drops a small glyph ~0.18em
     below the optical centre of the caps around it — nudge it back up. The
     side margins give it more air than a word space, so it reads as a
     separator rather than as part of the phrase. */
  position:relative; top:-.18em; margin-inline:.34em; }

/* ─── contact ─────────────────────────────────────────────────────────────── */
.contact{ background:var(--ink); padding:var(--sect) var(--pad) calc(var(--pad) + 1rem);
  position:relative; z-index:2; }
.contact__h{ font-family:var(--serif); font-weight:400;
  font-size:clamp(2.8rem,11vw,10rem); line-height:.94; letter-spacing:-.025em; }
.mail{ display:inline-block; margin-top:clamp(2rem,5vw,3.5rem); position:relative;
  font-size:clamp(1rem,2.2vw,1.7rem); letter-spacing:-.01em; will-change:transform; }
.mail span{ position:relative; display:inline-block; }
.mail span::after{ content:""; position:absolute; left:0; bottom:-.18em; width:100%; height:1px;
  background:currentColor; transform:scaleX(1); transform-origin:100% 50%;
  transition:transform .6s var(--ease); }
.mail:hover span::after{ transform:scaleX(0); }
.mail:hover{ color:var(--ember); }

.contact__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:2rem;
  margin-top:clamp(4rem,10vw,8rem); padding-top:1.6rem; border-top:1px solid var(--line);
  font-size:.8125rem; }
.contact__grid a{ opacity:.8; transition:opacity .3s, color .3s; }
.contact__grid a:hover{ opacity:1; color:var(--ember); }
.contact__grid > div > span:not(.lbl){ opacity:.7; line-height:1.5; }
.contact__grid .tel{ display:block; font-variant-numeric:tabular-nums; }
.contact__clock #clock{ font-variant-numeric:tabular-nums; }

.contact__bar{ display:flex; justify-content:space-between; gap:1.5rem; flex-wrap:wrap;
  margin-top:clamp(3rem,7vw,5rem); padding-top:1.3rem; border-top:1px solid var(--line);
  font-size:.6875rem; letter-spacing:.1em; text-transform:uppercase; opacity:.45; }

/* ═══ responsive ══════════════════════════════════════════════════════════ */
@media (max-width:1100px){
  /* No panel width overrides here. Setting width in vw while the figure is
     still sized from --figH split the two apart: between 861 and 1100px the
     panel box grew to 50vw while the photograph stayed at the ratio's width,
     so the title and year ran ~120px past the edge of the image. Width is
     derived from --figH at every size above the mobile breakpoint. */
  .about{ grid-template-columns:1fr;
    /* justified copy needs a little more breathing room from the edges on a
       narrow screen, or the flush right margin reads as touching the bezel */
    padding-inline:calc(var(--pad) + .85rem); }
  .about__media{ max-width:300px; }
  .contact__grid{ grid-template-columns:repeat(2,1fr); gap:2.2rem; }
}

@media (max-width:860px){
  .nav__links,.nav__status{ display:none; }
  .nav__burger{ display:block; }

  .hero{ min-height:560px; }
  .hero__scroll{ display:none; }
  /* type runs the full width here, so a band reads better than a corner pool */
  .hero__scrim{ background:linear-gradient(180deg, transparent 42%, rgba(11,11,12,.38) 100%); }
  .hero__foot{ gap:1.1rem 2rem; font-size:.6875rem; }
  .hero__col--r{ margin-left:0; text-align:left; }
  .hero__sub{ max-width:28ch; }

  .manifesto__grid{ grid-template-columns:1fr; gap:clamp(2.5rem,9vw,4rem); }
  .manifesto__text{ max-width:100%; }
  .manifesto__sig{ margin-top:2rem; }
  .manifesto__aside{ justify-self:start; width:min(100%,260px); }

  /* horizontal → vertical */
  .works__pin{ height:auto; padding:var(--sect) 0 clamp(3rem,10vw,5rem); overflow:visible; }
  .works__head{ position:static; padding:0 var(--pad); margin-bottom:2.5rem; }
  .works__hint{ display:none; }
  .works__track{ flex-direction:column; align-items:stretch; transform:none !important;
    gap:clamp(2.5rem,9vw,4rem); }
  .panel,.panel--wide,.panel--tall,.panel--end{ width:100%; }
  .panel figure,.panel--tall figure,.panel--wide figure{ height:auto; aspect-ratio:4/5; }
  .panel--wide figure{ aspect-ratio:3/2; }
  .panel img{ transform:scale(1.06); }
  .panel--end{ border-left:0; border-top:1px solid var(--line); padding:2rem 0 0; align-self:auto; }
  .works__prog{ display:none; }

  .list a{ grid-template-columns:2.2rem 1fr auto; gap:.9rem 1rem; }
  /* background-image (set inline), not <img> — a display:none box never
     generates a request, so desktop pays nothing for these. */
  .list__thumb{ display:block; grid-row:2; grid-column:1/-1; margin-top:.4rem;
    aspect-ratio:16/7; background-size:cover;
    background-position:center 32%; filter:grayscale(.2) contrast(1.05); }
  .list__cat{ display:none; }
  .list a:hover .list__ttl{ transform:none; }
  .peek{ display:none; }

  .contact__bar{ flex-direction:column; gap:.5rem; }
}

@media (max-width:480px){
  .contact__grid{ grid-template-columns:1fr; }
  .hero__foot .hero__col:nth-child(2){ display:none; }
}

/* Reduced motion kills the scroll-driven reel, so the horizontal track has no
   driver — lay the same photographs out as a plain grid instead. */
@media (min-width:861px){
  html.reduced .works__pin{ height:auto; overflow:visible;
    padding:var(--sect) 0 clamp(3rem,8vw,5rem); }
  html.reduced .works__head{ position:static; padding:0 var(--pad); margin-bottom:clamp(2rem,4vw,3rem); }
  html.reduced .works__hint,
  html.reduced .works__prog{ display:none; }
  html.reduced .works__track{ display:grid; grid-template-columns:repeat(2,1fr);
    gap:clamp(2rem,4vw,3.5rem); align-items:start; transform:none !important; }
  html.reduced .panel,
  html.reduced .panel--wide,
  html.reduced .panel--tall{ width:auto; }
  html.reduced .panel figure,
  html.reduced .panel--tall figure,
  html.reduced .panel--wide figure{ height:auto; aspect-ratio:4/5; }
  html.reduced .panel img{ transform:none; }
  html.reduced .panel--wide{ grid-column:span 2; }
  html.reduced .panel--wide figure{ aspect-ratio:16/9; }
  html.reduced .panel--end{ grid-column:span 2; width:auto; align-self:auto;
    flex-direction:row; align-items:baseline; justify-content:space-between;
    border-left:0; border-top:1px solid var(--line); padding:2rem 0 0; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; }
  .ci{ transform:none !important; }
}