/* public/styles.css - minimal, photo-first dark theme (shared by public site + admin).
   Design rules (award-winning photography portfolios, see docs/DESIGN.md):
   two-tone neutral palette with no accent colour, so the photos carry all the colour;
   photos sit flat (no rounded corners, borders, shadows or hover zoom); one typeface;
   always-visible text navigation; one quiet footer line.
   No external fonts or CDNs: Inter is self-hosted from /static/fonts (privacy, performance).
   All font sizes and spacing come from the tokens below. */

/* Inter 5.3.0 variable (wght 100-900), SIL OFL 1.1: public/fonts/Inter-OFL-LICENSE.txt.
   Split by unicode-range like Fontsource, so most pages load only the 48 KB Latin file. */
@font-face{
  font-family:"Inter";
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url("fonts/inter-5.3.0-latin-wght.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Inter";
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url("fonts/inter-5.3.0-latin-ext-wght.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  color-scheme:dark;

  /* Colour: neutral greys only (no blue cast), so the photos are not tinted by the page.
     Contrast checked in test/frontend-a11y.test.js: --muted on --bg/--panel >= 4.5:1. */
  --bg:#0e0e0e;
  --panel:#151515;
  --panel-2:#1b1b1b;
  --text:#ececec;
  --muted:#a3a3a3;
  --line:#242424;
  --line-strong:#363636;
  --focus:#ececec;
  --ok-bg:rgba(60,180,120,.14);
  --err-bg:rgba(220,80,80,.14);
  --shadow:none;

  /* Type: fluid scale (min @ ~360px, max @ ~1280px) */
  --font-sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --step--2:clamp(.72rem, .7rem + .1vw, .78rem);
  --step--1:clamp(.82rem, .8rem + .12vw, .875rem);
  --step-0:clamp(1rem, .97rem + .15vw, 1.0625rem);
  --step-1:clamp(1.0625rem, 1.03rem + .2vw, 1.2rem);
  --step-2:clamp(1.25rem, 1.15rem + .5vw, 1.5rem);
  --step-3:clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --step-4:clamp(2rem, 1.6rem + 2vw, 3rem);
  --step-5:clamp(2.5rem, 1.9rem + 3vw, 4rem);
  --leading:1.55;
  --leading-tight:1.1;
  --tracking-caps:.14em;
  --tracking-tight:-.022em;

  /* Spacing (4px base) */
  --space-3xs:.25rem;
  --space-2xs:.5rem;
  --space-xs:.75rem;
  --space-s:1rem;
  --space-m:1.5rem;
  --space-l:2rem;
  --space-xl:3rem;
  --space-2xl:4.5rem;
  --space-3xl:6rem;
  --space-gutter:clamp(1rem, .6rem + 2vw, 2.5rem);

  /* Shape & motion: controls get a small radius, photos none. */
  --radius-s:.25rem;
  --radius-m:.375rem;
  --radius:.5rem;
  --radius-pill:999px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --dur:.18s;

  --wrap:1200px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text)}
body{
  font-family:var(--font-sans);
  font-size:var(--step-0);
  line-height:var(--leading);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
a:hover{color:#fff}
p{margin:0 0 var(--space-s)}
img{max-width:100%}
picture{display:contents}

/* ---------- Accessibility primitives ---------- */
:focus:not(:focus-visible){outline:none}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:var(--radius-s)}
main:focus{outline:none}
.visuallyHidden{
  position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.skipLink{
  position:absolute;left:var(--space-s);top:var(--space-s);z-index:100;
  padding:var(--space-2xs) var(--space-s);
  background:var(--text);color:var(--bg);border-radius:var(--radius-s);
  font-weight:600;font-size:var(--step--1);
  transform:translateY(-200%);
}
.skipLink:focus,.skipLink:focus-visible{transform:none;color:var(--bg)}

/* ---------- Header: name left, text links right, always visible, not sticky ---------- */
.nav{background:var(--bg)}
.navInner{
  display:flex;justify-content:space-between;align-items:center;gap:var(--space-m);flex-wrap:wrap;
  padding-block:var(--space-m);
}
.brand{display:flex;align-items:baseline;gap:var(--space-xs);flex-wrap:wrap;min-width:0}
.brandTitle{font-size:var(--step-1);font-weight:600;letter-spacing:-.01em;line-height:1.2}
.brandTag{font-size:var(--step--1);color:var(--muted)}
.links{display:flex;align-items:center;gap:var(--space-m);flex-wrap:wrap}
.links a{color:var(--muted);font-size:var(--step--1);padding-block:var(--space-3xs);border-bottom:1px solid transparent;transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.links a:hover{color:var(--text)}
.links a[aria-current="page"]{color:var(--text);border-bottom-color:currentColor}

/* ---------- Layout & type ---------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--space-gutter)}
.section{margin-block:var(--space-xl)}
.intro{margin-bottom:var(--space-l)}
.h1{font-size:var(--step-4);line-height:var(--leading-tight);margin:0 0 var(--space-xs);letter-spacing:var(--tracking-tight);font-weight:600}
.h2{font-size:var(--step-2);font-weight:600;letter-spacing:-.012em;line-height:1.25;margin:0 0 var(--space-s)}
.lead{font-size:var(--step-1);max-width:60ch}
.measure{max-width:68ch}
.muted{color:var(--muted)}
.small{font-size:var(--step--1)}
.eyebrow{font-size:var(--step--2);font-weight:500;letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--muted);margin:0 0 var(--space-2xs)}
.prose p{margin:0 0 var(--space-s)}
.prose{font-size:var(--step-1);line-height:1.65}

/* ---------- UI primitives (shared by public + admin) ---------- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.cardpad{padding:var(--space-s)}
.row{display:flex;gap:var(--space-xs);margin:var(--space-xs) 0}
.inline{display:inline}

.input{
  width:100%;
  padding:var(--space-2xs) var(--space-xs);
  border-radius:var(--radius-m);
  border:1px solid var(--line-strong);
  background:rgba(255,255,255,.03);
  color:var(--text);
  font:inherit;font-size:var(--step-0);
}
.input:focus{border-color:var(--focus)}
textarea.input{resize:vertical}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2xs);
  padding:var(--space-2xs) var(--space-s);
  border-radius:var(--radius-m);
  border:1px solid var(--line-strong);
  background:rgba(255,255,255,.06);
  color:var(--text);
  cursor:pointer;
  font:inherit;font-weight:500;font-size:var(--step--1);
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.btn:hover{background:rgba(255,255,255,.12)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.ghost{background:transparent}
.btn.small{padding:var(--space-3xs) var(--space-xs);border-radius:var(--radius-s);font-size:var(--step--1)}

.linkbtn{background:none;border:none;color:var(--muted);cursor:pointer;padding:0;margin-left:var(--space-s);font:inherit;font-size:var(--step--1)}
.linkbtn:hover{color:var(--text)}

.alert{margin:var(--space-xs) 0;padding:var(--space-2xs) var(--space-xs);border-radius:var(--radius-m);border:1px solid rgba(255,255,255,.14)}
.alert.ok{background:var(--ok-bg)}
.alert.err{background:var(--err-bg)}

.grid2{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-s);margin-top:var(--space-s)}
.kpi{font-size:var(--step-4);font-weight:650;line-height:var(--leading-tight)}

/* ---------- Photos: flat, no frame. Shared by covers, galleries and the lightbox. ---------- */
.seriesCover,.workCover,.photo,.lbImg{border-radius:0;border:0;box-shadow:none}
.seriesCoverImg,.workCoverImg,.lbTrigger img{transition:opacity var(--dur) var(--ease)}
.seriesCover:hover .seriesCoverImg,.workSeries:hover .workCoverImg,.lbTrigger:hover img{opacity:.88}

/* ---------- Home: series stack ---------- */
.seriesStack{display:flex;flex-direction:column;gap:var(--space-2xl);margin-top:var(--space-m)}
.seriesBlockHead{margin-top:var(--space-s)}
.seriesBlockLabel{font-size:var(--step--2);font-weight:500;letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--muted);margin:0 0 var(--space-3xs)}
.seriesBlockTitle{font-size:var(--step-2);font-weight:600;letter-spacing:-.012em;line-height:1.2;margin:0}
.seriesBlockSub{font-size:var(--step--1);color:var(--muted);margin:var(--space-3xs) 0 0;max-width:70ch}

.seriesCover{
  display:block;position:relative;
  overflow:hidden;
  background:var(--panel);
  aspect-ratio:16 / 9;
}
.seriesCoverImg{display:block;width:100%;height:100%;object-fit:cover}
.seriesCoverPlaceholder{display:block;width:100%;height:100%;min-height:10rem;background:var(--panel)}

/* ---------- Work page ---------- */
.workSeriesGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2xl) var(--space-m);margin-block:var(--space-m) var(--space-xl)}
.workSeries{display:flex;flex-direction:column;gap:var(--space-xs)}
.workCover{display:block;overflow:hidden;background:var(--panel);aspect-ratio:3 / 2}
.workCoverImg{display:block;width:100%;height:100%;object-fit:cover}
.workSeriesText{display:flex;flex-direction:column;gap:var(--space-3xs)}
.workSeriesLabel{font-size:var(--step--2);font-weight:500;letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--muted)}
.workSeriesTitle{font-size:var(--step-1);font-weight:600;letter-spacing:-.01em;line-height:1.25}
.workSeriesSub{font-size:var(--step--1);color:var(--muted)}
.workSeries:hover .workSeriesTitle{text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px}

/* ---------- Series gallery ---------- */
.seriesHeader{padding-block:var(--space-xl) var(--space-l)}
.seriesHeaderLabel{font-size:var(--step--2);font-weight:500;letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--muted);margin:0 0 var(--space-2xs)}
.seriesSub{font-size:var(--step-1);color:var(--muted);margin-bottom:var(--space-2xs)}

.photoGrid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:var(--space-m);
  margin:var(--space-xs) 0 var(--space-2xl);
}
.photo{margin:0;overflow:hidden;background:none}
.photo img{display:block;width:100%;height:100%;object-fit:cover;background:var(--panel)}
.photo figcaption{padding:var(--space-2xs) 0 0;color:var(--muted);font-size:var(--step--1)}
.p-s{grid-column:span 4}
.p-m{grid-column:span 6}
.p-l{grid-column:span 12}
.photo.p-l{display:inline-flex;flex-direction:column;align-items:center;justify-self:center;max-width:min(var(--seriesFitW, calc(100vw - 3rem)), var(--wrap))}
.photo.p-l figcaption{align-self:flex-start}
.photo.p-s img{height:15rem}
.photo.p-m img{height:21rem}
.photo.p-l img{display:block;width:auto;height:auto;max-width:min(var(--seriesFitW, calc(100vw - 3rem)), var(--wrap));max-height:var(--seriesFitH, calc(100svh - 8rem));object-fit:contain;margin:0 auto}

/* Lightbox trigger (added by site.js) */
.lbTrigger{display:block;width:100%;height:100%;padding:0;margin:0;border:0;background:none;color:inherit;cursor:zoom-in;border-radius:0}
.photo.p-l .lbTrigger{width:auto}
.lbTrigger:focus-visible{outline-offset:-4px;border-radius:0}

/* ---------- Lightbox (JS-only enhancement) ---------- */
html.lbOpen,html.lbOpen body{overflow:hidden}
.lb{position:fixed;inset:0;z-index:9999}
.lb[hidden]{display:none}
.lbBackdrop{position:absolute;inset:0;background:rgba(8,8,8,.97)}
.lbChrome{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.lbStage{position:relative;margin:0;padding:var(--space-s);display:flex;flex-direction:column;align-items:center;gap:var(--space-2xs);max-width:100vw;max-height:100vh}
.lbImg{
  display:block;
  max-width:calc(100vw - 2rem);
  max-height:calc(100vh - 4.5rem);
  width:auto;height:auto;
  object-fit:contain;
  cursor:pointer;
}
.lbCaption{color:var(--muted);font-size:var(--step--1);text-align:center;max-width:70ch}
.lbCount{position:absolute;top:var(--space-s);left:var(--space-m);margin:0;color:var(--muted);font-size:var(--step--1);font-variant-numeric:tabular-nums;z-index:1}
.lbClose,.lbNav{
  position:absolute;z-index:1;
  display:flex;align-items:center;justify-content:center;
  border-radius:var(--radius-pill);
  border:0;
  background:transparent;
  color:var(--muted);
  font:inherit;font-weight:300;line-height:1;
  cursor:pointer;
  opacity:0;
  transition:opacity var(--dur) var(--ease),color var(--dur) var(--ease),background var(--dur) var(--ease);
}
.lbClose{top:var(--space-s);right:var(--space-s);width:2.75rem;height:2.75rem;font-size:var(--step-3)}
.lbNav{top:50%;transform:translateY(-50%);width:3.5rem;height:3.5rem;font-size:var(--step-4)}
.lbClose:hover,.lbNav:hover{color:var(--text);background:rgba(255,255,255,.06)}
.lbPrev{left:var(--space-s)}
.lbNext{right:var(--space-s)}
.lb.lbShow .lbClose,.lb.lbShow .lbNav,
.lbClose:focus-visible,.lbNav:focus-visible{opacity:1}
@media (hover:none){
  .lb .lbClose,.lb .lbNav{opacity:1}
}

/* ---------- 404 ---------- */
.notFound{padding-block:var(--space-2xl);text-align:left}
.notFound .h1{max-width:16ch}
.notFoundLinks{display:flex;gap:var(--space-xs);flex-wrap:wrap;margin-top:var(--space-l)}

/* ---------- Footer: one quiet line ---------- */
.footer{color:var(--muted);margin-top:var(--space-3xl);font-size:var(--step--1)}
.footerInner{display:flex;justify-content:space-between;align-items:center;gap:var(--space-s);flex-wrap:wrap;padding-block:var(--space-l) var(--space-xl);border-top:1px solid var(--line)}
.footerCopy{margin:0}
.footerLinks{display:flex;gap:var(--space-m);flex-wrap:wrap}
.footerLinks a{color:var(--muted)}
.footerLinks a:hover{color:var(--text)}

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .grid2{grid-template-columns:1fr}
  .workSeriesGrid{grid-template-columns:1fr;gap:var(--space-xl)}
  .seriesCover{aspect-ratio:4 / 3}
  .photoGrid{gap:var(--space-s)}
  .p-s,.p-m,.p-l{grid-column:span 12}
  .photo.p-s img{height:16rem}
  .photo.p-m img{height:21rem}
  .photo.p-l{max-width:var(--seriesFitW, calc(100vw - 2.5rem))}
  .photo.p-l img{max-width:var(--seriesFitW, calc(100vw - 2.5rem));max-height:var(--seriesFitH, calc(100svh - 7rem))}
  .lbNav{width:2.75rem;height:2.75rem;font-size:var(--step-3)}
}
@media (max-width: 560px){
  .navInner{padding-block:var(--space-s)}
  .brandTag{display:none}
  .links{gap:var(--space-s)}
  .seriesStack{gap:var(--space-xl)}
}

/* Respect users who ask for less motion (WCAG 2.3.3) */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}