/* Kings Cross Streets
   Layout: bold, minimal. The KXS logo leads; headings borrow its wide geometric capitals and tracked
   "STREETS" line, the logo's red bar is the only ornament, neutral walls let colour and black and white
   sit as equals, photographs uncropped with generous space. */
:root{
  --bg:#f2f2f0; --fg:#121212; --muted:#666664; --line:#d8d8d4; --raised:#e5e5e2;
  --neon:#e3262f;
  --sans:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --display:"Montserrat","Avenir Next","Century Gothic",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --gutter:clamp(16px,4vw,56px);
  --space:clamp(72px,10vw,144px);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{--bg:#121212;--fg:#ecece9;--muted:#949491;--line:#2a2a29;--raised:#1c1c1b;--neon:#ff3b3f;color-scheme:dark}
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);font-size:16px;line-height:1.6;
  padding-left:max(var(--gutter),env(safe-area-inset-left));padding-right:max(var(--gutter),env(safe-area-inset-right))}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-underline-offset:4px;text-decoration-thickness:1px}
:focus-visible{outline:2px solid var(--neon);outline-offset:3px}
.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:16px;background:var(--fg);color:var(--bg);padding:8px 12px;z-index:20}

/* header */
.site-head{max-width:1440px;margin:0 auto;display:flex;flex-wrap:wrap;gap:10px 36px;align-items:center;justify-content:space-between;
  padding-block:max(22px,env(safe-area-inset-top)) 22px;border-bottom:1px solid var(--line)}
.mark{display:block;color:var(--fg);line-height:0}
.mark svg{display:block;height:clamp(30px,3.4vw,44px);width:auto}
.kxs-bar{fill:var(--neon)}
.site-head nav{margin-left:auto}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.site-head nav{display:flex;flex-wrap:wrap;gap:6px 26px;font-family:var(--display);font-size:12.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.site-head nav a{text-decoration:none;color:var(--muted);padding-block:2px}
.site-head nav a:hover{color:var(--fg)}
.site-head nav a[aria-current]{color:var(--fg);box-shadow:inset 0 -2px 0 var(--neon)}

main{max-width:1440px;margin:0 auto}

/* home: straight to photographs */
.intro{display:grid;gap:28px;padding-block:clamp(28px,4vw,48px) var(--space)}
@media (min-width:1000px){.intro{grid-template-columns:minmax(0,auto) minmax(260px,1fr);gap:72px;align-items:end}}
.lead{margin:0}
.lead img{width:auto;max-width:100%;max-height:84vh}
.lead figcaption,.about figcaption{font-family:var(--mono);font-size:12px;color:var(--muted);padding-top:12px}
.statement{font-family:var(--display);font-size:clamp(22px,2.2vw,30px);line-height:1.25;font-weight:600;letter-spacing:-.005em;margin:0 0 18px;max-width:20ch;text-wrap:balance}
.places{font-family:var(--display);font-weight:500;font-size:11.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);margin:0}

.block{padding-bottom:var(--space)}
.label{font-family:var(--display);font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.32em;line-height:1;margin:0 0 32px;padding-top:16px;border-top:2px solid var(--fg)}

/* photograph grid: uncropped, generous gaps */
.grid{display:grid;grid-template-columns:1fr;gap:56px 40px;align-items:start}
@media (min-width:700px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:72px 48px}}
.grid figure{margin:0;min-width:0;scroll-margin-top:24px}
.grid .open{display:block;cursor:zoom-in;background:var(--raised)}
.grid img{width:100%}
.grid figcaption{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 12px;padding-top:12px;font-size:14px;font-weight:500}
.grid figcaption .m{font-family:var(--mono);font-weight:400;font-size:11.5px;color:var(--muted)}

/* collections on home */
.cols{display:grid;grid-template-columns:1fr;gap:48px 40px}
@media (min-width:700px){.cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
.col{display:grid;gap:4px;text-decoration:none;min-width:0}
.col img{width:100%;margin-bottom:14px}
.col-name{font-family:var(--display);font-weight:600;font-size:clamp(26px,3vw,40px);line-height:1;letter-spacing:.01em;text-transform:uppercase}
.col:hover .col-name{color:var(--neon)}
.col-meta{font-family:var(--mono);font-size:12px;color:var(--muted)}

/* collection pages */
.page-head{padding-block:clamp(28px,4vw,48px) var(--space);display:grid;gap:16px;max-width:64ch}
.page-head h1,.about h1{font-family:var(--display);font-weight:600;font-size:clamp(40px,6.4vw,92px);line-height:.98;text-transform:uppercase;letter-spacing:.005em;margin:0}
.page-head p{margin:0;font-size:19px;color:var(--muted);max-width:52ch}
.page-head .count{font-family:var(--mono);font-size:12px}
.chapter{display:grid;gap:6px;margin-bottom:36px;padding-top:16px;border-top:2px solid var(--fg);max-width:64ch}
.chapter h2{font-family:var(--display);font-weight:600;font-size:22px;line-height:1.1;letter-spacing:.02em;text-transform:uppercase;margin:0}
.chapter p{margin:0;color:var(--muted)}

/* about */
.about{display:grid;gap:56px;padding-block:clamp(28px,4vw,48px) var(--space)}
@media (min-width:900px){.about{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:88px;align-items:start}}
.about h1{font-size:clamp(34px,4.4vw,60px);margin-bottom:36px;max-width:14ch}
.about-text p{font-size:19px;max-width:54ch;margin:0 0 18px}
.about-text p:first-of-type{font-family:var(--display);font-size:clamp(22px,2.2vw,30px);font-weight:600;line-height:1.25;max-width:24ch}
.about-text p:nth-last-of-type(2){font-family:var(--display);font-weight:600;font-size:22px;margin-top:32px}
.about-text .note{font-size:14px;color:var(--muted);margin-top:40px;padding-top:16px;border-top:1px solid var(--line)}
.about figure{margin:0}
@media (min-width:900px){.about figure{position:sticky;top:32px}}

/* not found */
.lost{padding-block:clamp(28px,4vw,48px) var(--space);display:grid;gap:18px;justify-items:start}
.lost img{width:min(100%,880px)}
.lost h1{font-family:var(--display);font-weight:600;font-size:clamp(32px,4vw,52px);text-transform:uppercase;margin:12px 0 0}
.lost p{margin:0;font-size:18px;color:var(--muted)}

/* footer */
.site-foot{max-width:1440px;margin:0 auto;border-top:2px solid var(--fg);padding-block:24px calc(40px + env(safe-area-inset-bottom));display:flex;flex-wrap:wrap;gap:8px 32px;font-size:13px;color:var(--muted)}
.site-foot p{margin:0}

/* lightbox: always a dark room */
.lightbox{border:0;padding:0;margin:0;width:100vw;height:100dvh;max-width:none;max-height:none;background:#0c0c0c;color:#ecece9}
.lightbox::backdrop{background:#0c0c0c}
.lightbox[open]{display:grid;grid-template-rows:1fr auto}
.lb-stage{display:grid;place-items:center;min-height:0;padding:max(20px,env(safe-area-inset-top)) 20px 8px}
.lb-stage img{max-width:100%;max-height:calc(100dvh - 120px);width:auto;height:auto;object-fit:contain}
.lb-bar{display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;align-items:center;padding:12px max(20px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left))}
.lb-cap{display:grid;gap:2px}
.lb-title{font-weight:600}
.lb-meta,.lb-count{font-family:var(--mono);font-size:12px;color:#8f8f8c}
.lb-ctl{display:flex;gap:8px;align-items:center}
.lb-ctl button{font:500 13px var(--sans);color:#ecece9;background:transparent;border:1px solid #3a3a39;border-radius:2px;padding:8px 14px;cursor:pointer}
.lb-ctl button:hover{border-color:#ff3b3f}
body.lb-open{overflow:hidden}

@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
@media (max-width:480px){.site-head nav{gap:6px 16px;letter-spacing:.1em;font-size:11.5px}}

/* phones: comfortable tap targets, tighter spacing under titles */
@media (max-width:700px){
  .site-head{padding-block:max(16px,env(safe-area-inset-top)) 6px}
  .site-head nav{gap:0 18px}
  .site-head nav a{padding-block:12px;display:inline-block}
  .page-head{padding-block:24px 48px}
  .block{padding-bottom:64px}
  .lb-ctl button{padding:12px 16px}
}