/* ============================================================
   GREGORY GORIN — photography portfolio
   Night-walk system: true black surface, sodium-vapor accent,
   Archivo Expanded display, Chivo Mono contact-sheet data.
   ============================================================ */

:root{
  --bg:            oklch(0.145 0.005 270);
  --bg-raise:      oklch(0.185 0.006 270);
  --ink:           oklch(0.94 0.005 80);
  --ink-2:         oklch(0.80 0.008 80);
  --ink-3:         oklch(0.64 0.01 80);
  --line:          oklch(0.28 0.008 270);
  --sodium:        oklch(0.74 0.16 65);
  --sodium-deep:   oklch(0.55 0.14 55);

  --font-sans: "Archivo", -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "Chivo Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --max: 1600px;
  --gutter: clamp(16px, 4vw, 64px);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  --z-grain: 30;
  --z-nav: 40;
  --z-lightbox: 90;
  --z-cursor: 100;
}

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

html{ scroll-behavior:smooth }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto } }

body{
  background:var(--bg);
  color:var(--ink-2);
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}

::selection{ background:var(--sodium); color:oklch(0.15 0.02 65) }

a{ color:inherit; text-decoration:none }
img{ display:block; max-width:100%; height:auto }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }

:focus-visible{ outline:2px solid var(--sodium); outline-offset:3px }

.skip{
  position:fixed; left:16px; top:-60px; z-index:110;
  background:var(--sodium); color:oklch(0.15 0.02 65);
  padding:10px 18px; font-weight:600; transition:top .2s;
}
.skip:focus{ top:16px }

/* mono data voice — the contact-sheet system */
.data{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.08em;
  color:var(--ink-3);
  text-transform:uppercase;
}

/* ---- film grain ---- */
.grain{
  position:fixed; inset:-50%; width:200%; height:200%;
  pointer-events:none; z-index:var(--z-grain);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.05;
  animation:grain-shift 1.2s steps(4) infinite;
}
@keyframes grain-shift{
  0%{ transform:translate(0,0) } 25%{ transform:translate(-2%,1%) }
  50%{ transform:translate(1%,-2%) } 75%{ transform:translate(-1%,2%) } 100%{ transform:translate(0,0) }
}
@media (prefers-reduced-motion: reduce){ .grain{ animation:none } }

/* ---- topbar ---- */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:var(--z-nav);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:20px var(--gutter);
  background:linear-gradient(to bottom, oklch(0.1 0.005 270 / .8), transparent);
  transition:background .4s var(--ease-out);
}
.topbar.scrolled{ background:oklch(0.1 0.005 270 / .92) }
.topbar .brand{
  font-stretch:125%; font-weight:800; font-size:15px;
  letter-spacing:.04em; text-transform:uppercase; color:var(--ink);
  white-space:nowrap;
}
.topbar .status{ display:none }
.topbar nav{ display:flex; gap:clamp(14px,2.5vw,34px) }
.topbar nav a{
  font-size:13px; font-weight:500; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-2); transition:color .25s;
}
.topbar nav a:hover{ color:var(--sodium) }
.topbar nav a.on{ color:var(--sodium) }
@media (min-width: 900px){
  .topbar .status{
    display:flex; align-items:center; gap:8px;
    position:absolute; left:50%; transform:translateX(-50%);
  }
  .topbar .status::before{
    content:""; width:6px; height:6px; border-radius:50%;
    background:var(--sodium);
  }
}
@media (max-width: 680px){
  .topbar{ padding:10px 16px 8px; flex-wrap:wrap; row-gap:2px }
  .topbar .brand{ font-size:12px }
  .topbar nav{ width:100%; justify-content:space-between; gap:6px }
  .topbar nav a{ font-size:10px; letter-spacing:.03em }
}

/* ---- hero ---- */
.hero{
  position:relative; min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:0 var(--gutter) clamp(28px, 5vh, 64px);
  overflow:hidden;
}
.hero-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 38%;
  filter:brightness(.92);
}
html.js .hero-img{ animation:hero-drift 16s var(--ease-out) both }
@keyframes hero-drift{ from{ transform:scale(1.09) } to{ transform:scale(1) } }
.hero-scrim{
  position:absolute; inset:0;
  background:linear-gradient(to top, oklch(0.1 0.005 270 / .92) 0%, oklch(0.1 0.005 270 / .25) 38%, transparent 62%);
}
.hero-inner{ position:relative; text-shadow:0 1px 14px oklch(0.1 0.005 270 / .85) }
.interlude .say, .contact .say{ text-shadow:0 1px 14px oklch(0.1 0.005 270 / .85) }
.hero h1{
  font-stretch:125%; font-weight:900;
  font-size:clamp(2.6rem, 10.5vw, 6rem);
  line-height:.94; letter-spacing:-0.02em;
  text-transform:uppercase; color:var(--ink);
  text-wrap:balance;
}
.hero h1 .row{ display:block; overflow:hidden }
.hero h1 .row > span{ display:inline-block }
html.js .hero h1 .row > span{
  transform:translateY(110%);
  animation:rise .9s var(--ease-out) forwards;
}
html.js .hero h1 .row:nth-child(2) > span{ animation-delay:.12s }
@keyframes rise{ to{ transform:translateY(0) } }
.hero-sub{
  margin-top:18px; max-width:44ch;
  color:var(--ink-2); font-size:clamp(1rem, 1.4vw, 1.15rem); font-weight:400;
}
.hero-foot{
  position:relative;
  margin-top:clamp(20px, 4vh, 40px);
  display:flex; justify-content:space-between; align-items:flex-end; gap:16px;
}
html.js .hero-sub, html.js .hero-foot{
  opacity:0; animation:fade-in .8s .5s var(--ease-out) forwards;
}
@keyframes fade-in{ to{ opacity:1 } }
.hero-foot .data b{ color:var(--sodium); font-weight:500 }
.scroll-cue{ display:flex; align-items:center; gap:10px; color:var(--ink-3) }
.scroll-cue::after{
  content:""; width:1px; height:34px; background:var(--ink-3);
  animation:cue 2.2s var(--ease-out) infinite;
  transform-origin:top;
}
@keyframes cue{ 0%{ transform:scaleY(0) } 45%{ transform:scaleY(1) } 100%{ transform:scaleY(1); opacity:0 } }
@media (prefers-reduced-motion: reduce){
  html.js .hero-img{ animation:none }
  html.js .hero h1 .row > span{ transform:none; animation:none }
  html.js .hero-sub, html.js .hero-foot{ opacity:1; animation:none }
  .scroll-cue::after{ animation:none }
}

/* ---- ticker ---- */
.ticker{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  overflow:hidden; white-space:nowrap;
  padding:13px 0;
  position:relative; z-index:1; background:var(--bg);
}
.ticker-track{ display:inline-flex; gap:0 }
html.js .ticker-track{ animation:tick 36s linear infinite }
.ticker:hover .ticker-track{ animation-play-state:paused }
@keyframes tick{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }
.ticker span{
  font-stretch:125%; font-weight:700; font-size:13px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3);
  padding:0 1.4em;
}
.ticker span::after{ content:"✕"; color:var(--sodium); margin-left:2.8em; font-weight:400 }
@media (prefers-reduced-motion: reduce){ html.js .ticker-track{ animation:none } }

/* ---- chapters ---- */
.chapter{ padding:clamp(70px, 12vh, 150px) 0 clamp(30px, 6vh, 80px) }
.ch-head{
  max-width:var(--max); margin:0 auto clamp(36px, 7vh, 90px);
  padding:0 var(--gutter);
  display:grid; grid-template-columns:auto 1fr; column-gap:clamp(16px,3vw,40px);
  align-items:baseline;
}
.ch-no{
  font-family:var(--font-mono); font-size:clamp(14px, 1.6vw, 18px);
  color:var(--sodium); letter-spacing:.1em;
}
.ch-head h2{
  font-stretch:125%; font-weight:900;
  font-size:clamp(2.2rem, 7vw, 5rem);
  line-height:1; letter-spacing:-0.02em; text-transform:uppercase;
  color:var(--ink); text-wrap:balance;
}
.ch-head p{
  grid-column:2; margin-top:16px; max-width:52ch;
  color:var(--ink-2); font-size:clamp(.98rem, 1.3vw, 1.1rem);
  text-wrap:pretty;
}

/* sequence grid */
.seq{
  max-width:var(--max); margin:0 auto;
  padding:0 var(--gutter);
  display:grid; grid-template-columns:repeat(12, 1fr);
  column-gap:clamp(12px, 2vw, 28px);
  row-gap:clamp(48px, 9vh, 120px);
  margin-bottom:clamp(48px, 9vh, 120px);
}
.seq:last-child{ margin-bottom:0 }

figure.ph{ position:relative; min-width:0 }
figure.ph .frame{
  display:block; width:100%; overflow:hidden; background:var(--bg-raise);
}
figure.ph img{
  width:100%; height:auto;
  filter:brightness(.94);
  transition:filter .6s var(--ease-out), transform .9s var(--ease-out);
}
figure.ph .frame:hover img,
figure.ph .frame:focus-visible img{ filter:brightness(1.05); transform:scale(1.03) }
@media (prefers-reduced-motion: reduce){
  figure.ph img{ transition:filter .3s }
  figure.ph .frame:hover img{ transform:none }
}
figure.ph figcaption{
  display:flex; justify-content:space-between; gap:12px;
  margin-top:12px;
}
figure.ph figcaption .t{ color:var(--ink-2); text-transform:none; letter-spacing:.02em }

/* placement classes (desktop art direction) */
.c-1-7  { grid-column:1/7 }
.c-1-8  { grid-column:1/8 }
.c-1-9  { grid-column:1/9 }
.c-2-12 { grid-column:2/12 }
.c-3-11 { grid-column:3/11 }
.c-4-10 { grid-column:4/10 }
.c-6-13 { grid-column:6/13 }
.c-7-13 { grid-column:7/13 }
.c-8-13 { grid-column:8/13 }
.drop   { margin-top:clamp(48px, 10vh, 140px) }

@media (max-width: 760px){
  .seq{ grid-template-columns:1fr; row-gap:44px }
  .seq figure.ph{ grid-column:1 / -1 }
  .drop{ margin-top:0 }
  .ch-head{ grid-template-columns:1fr }
  .ch-head p{ grid-column:1 }
}

/* full-bleed statements */
figure.bleed{
  position:relative; margin:clamp(48px, 9vh, 120px) 0;
}
figure.bleed .frame{ display:block; width:100%; position:relative }
figure.bleed .frame::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:140px;
  background:linear-gradient(to top, oklch(0.1 0.005 270 / .6), transparent);
  pointer-events:none;
}
figure.bleed img{
  width:100%; height:clamp(420px, 92vh, 960px); object-fit:cover;
}
figure.bleed figcaption{
  position:absolute; left:var(--gutter); right:var(--gutter); bottom:22px;
  display:flex; justify-content:space-between; gap:12px;
  text-shadow:0 1px 14px oklch(0.1 0.005 270 / .9);
}
figure.bleed figcaption .t{ color:var(--ink); text-transform:none; letter-spacing:.02em }
figure.bleed figcaption.data{ color:var(--ink-2) }

/* scroll reveal — enhance-only; JS arms below-fold elements only on visible pages,
   so hidden tabs, prerenderers and no-JS all get fully visible content */
.rv.armed{ opacity:0; transform:translateY(24px);
  transition:opacity .8s var(--ease-out), transform .8s var(--ease-out) }
.rv.armed.in{ opacity:1; transform:none }
@media (prefers-reduced-motion: reduce){
  .rv.armed{ opacity:1; transform:none; transition:none }
}

/* ---- interlude (chapter divider over photograph) ---- */
.interlude{ position:relative; overflow:hidden }
.interlude img{ width:100%; height:clamp(420px, 88vh, 900px); object-fit:cover }
.interlude .veil{
  position:absolute; inset:0;
  background:linear-gradient(to top, oklch(0.1 0.005 270 / .82), transparent 55%);
}
.interlude .say{
  position:absolute; left:var(--gutter); right:var(--gutter); bottom:clamp(24px,6vh,56px);
}
.interlude .say h2, .interlude .say .big{
  font-stretch:125%; font-weight:900; text-transform:uppercase;
  font-size:clamp(1.9rem, 5.5vw, 4rem); line-height:1; letter-spacing:-0.02em;
  color:var(--ink); text-wrap:balance;
}
.interlude .say .data{ margin-top:10px; color:var(--ink-2) }

/* ---- about ---- */
.about{
  max-width:var(--max); margin:0 auto;
  padding:clamp(80px, 14vh, 170px) var(--gutter);
  display:grid; grid-template-columns:repeat(12,1fr); column-gap:clamp(12px,2vw,28px); row-gap:32px;
}
.about h2{
  grid-column:1/5;
  font-stretch:125%; font-weight:900; text-transform:uppercase;
  font-size:clamp(1.8rem, 3.6vw, 2.9rem); line-height:1.02; letter-spacing:-0.02em;
  color:var(--ink); text-wrap:balance;
}
.about .body{ grid-column:5/11 }
.about .body p{
  font-size:clamp(1.05rem, 1.5vw, 1.3rem); line-height:1.75;
  max-width:62ch; text-wrap:pretty; color:var(--ink-2);
}
.about .body p + p{ margin-top:1.2em }
.about .body .sig{ margin-top:2em; color:var(--sodium) }
@media (max-width: 900px){
  .about{ display:block }
  .about h2{ margin-bottom:22px }
}

/* ---- contact ---- */
.contact{ position:relative; overflow:hidden }
.contact img{
  width:100%; height:clamp(560px, 100svh, 1000px); object-fit:cover;
  object-position:center 30%;
}
.contact .veil{
  position:absolute; inset:0;
  background:linear-gradient(to top, oklch(0.1 0.005 270 / .94) 8%, oklch(0.1 0.005 270 / .45) 50%, oklch(0.1 0.005 270 / .2));
}
.contact .say{
  position:absolute; inset:0;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:0 var(--gutter) clamp(28px, 6vh, 64px);
}
.contact .say .kick{ color:var(--sodium) }
.contact h2{
  margin-top:14px;
  font-stretch:125%; font-weight:900; text-transform:uppercase;
  font-size:clamp(2.4rem, 9vw, 6rem); line-height:.96; letter-spacing:-0.02em;
  color:var(--ink); text-wrap:balance;
}
.contact .mail-row{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:14px 26px;
  margin-top:26px;
}
.contact .mail{
  display:inline-block; width:fit-content;
  font-size:clamp(1.15rem, 2.6vw, 1.9rem); font-weight:500;
  color:var(--ink);
  border-bottom:2px solid var(--sodium);
  padding-bottom:4px;
  transition:color .3s, border-color .3s;
}
.contact .mail:hover{ color:var(--sodium) }
.contact .copy{
  border:1px solid oklch(0.45 0.02 270 / .8);
  padding:8px 14px; color:var(--ink-2);
  transition:color .25s, border-color .25s;
}
.contact .copy:hover{ color:var(--sodium); border-color:var(--sodium) }
.contact .copy.ok{ color:var(--sodium); border-color:var(--sodium) }
.contact .foot{
  margin-top:clamp(40px, 8vh, 80px);
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px 24px;
  border-top:1px solid oklch(0.35 0.01 270 / .6); padding-top:18px;
}
.contact .foot .ig{ transition:color .25s }
.contact .foot .ig:hover{ color:var(--sodium) }

/* ---- lightbox ---- */
.lb{
  position:fixed; inset:0; z-index:var(--z-lightbox);
  background:oklch(0.08 0.005 270 / .97);
  display:none; align-items:center; justify-content:center;
  opacity:0; transition:opacity .3s;
}
.lb.open{ display:flex; opacity:1 }
.lb img{
  max-width:min(92vw, 1800px); max-height:82vh; object-fit:contain;
  opacity:0; transition:opacity .35s var(--ease-out), filter .35s var(--ease-out);
}
.lb img.blur{ opacity:.75; filter:blur(18px) brightness(.85) }
.lb img.ready{ opacity:1; filter:none }
@media (prefers-reduced-motion: reduce){
  .lb img{ transition:none }
}
.lb .x{
  position:absolute; top:14px; right:14px; z-index:2;
  font-family:var(--font-mono); font-size:13px; letter-spacing:.1em;
  color:var(--ink-2); padding:12px 16px;
}
.lb .hint{
  position:absolute; top:22px; left:50%; transform:translateX(-50%);
  color:var(--ink-2);
}
.lb .x:hover{ color:var(--sodium) }
.lb .nav{
  position:absolute; top:0; bottom:0; width:min(14vw, 150px); z-index:1;
  display:flex; align-items:center;
  font-size:30px; color:var(--ink-3); font-weight:200;
}
.lb .nav:hover{ color:var(--sodium) }
.lb .prev{ left:0; justify-content:flex-start; padding-left:clamp(10px,2.5vw,30px) }
.lb .next{ right:0; justify-content:flex-end; padding-right:clamp(10px,2.5vw,30px) }
.lb .meta{
  position:absolute; left:0; right:0; bottom:20px;
  display:flex; justify-content:center; gap:2em;
}
.lb .meta .n{ color:var(--sodium) }

/* ---- viewfinder cursor (pointer:fine + js only) ---- */
.vf{
  position:fixed; left:0; top:0; z-index:var(--z-cursor);
  width:44px; height:44px; margin:-22px 0 0 -22px;
  pointer-events:none; opacity:0;
  transition:opacity .25s, transform .18s var(--ease-out);
}
.vf::before, .vf::after,
.vf i::before, .vf i::after{
  content:""; position:absolute; width:12px; height:12px;
  border:2px solid var(--sodium);
}
.vf::before{ left:0; top:0; border-right:0; border-bottom:0 }
.vf::after{ right:0; top:0; border-left:0; border-bottom:0 }
.vf i::before{ left:0; bottom:0; border-right:0; border-top:0 }
.vf i::after{ right:0; bottom:0; border-left:0; border-top:0 }
.vf.on{ opacity:1 }
html.cursor-active .frame{ cursor:none }

/* ---- footer-less fine print handled in .contact .foot ---- */