/*
  kroupa.cc — apex site (Editorial brutalist)
  Reportage & sports photography. Committed dark "darkroom sheet" world (single theme by design).
*/

:root{
  --ink:#0a0a0b; --paper:#ece7dd; --bone:#f3efe6; --dim:#8f887b;
  --red:#e5341f; --hair:#2a2926;
  --sans:"Helvetica Neue",Helvetica,Arial,"Arimo",sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--ink);color:var(--bone);font-family:var(--sans);
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
::selection{background:var(--red);color:var(--bone)}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}

.wrap{max-width:1400px;margin:0 auto;padding:clamp(16px,3vw,34px)}

/* top meta rail */
.rail{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim);border-bottom:1px solid var(--hair);padding-bottom:12px}
.rail .red{color:var(--red)}
.rail .mid{text-align:center}
.rail .switch{color:var(--dim);transition:color .2s}
.rail .switch:hover{color:var(--red)}
@media(max-width:640px){.rail .mid{display:none}}

/* hero: oversized name bleeding off edge */
.hero{padding:clamp(20px,5vw,58px) 0 clamp(14px,3vw,30px)}
.kicker{font-family:var(--mono);font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--red);margin:0 0 .4em}
h1{font-weight:800;line-height:.82;letter-spacing:-.03em;margin:0;text-transform:uppercase;
  font-size:clamp(4.2rem,20vw,17rem);width:108%;margin-left:-4%;text-wrap:balance}
h1 .l2{display:block;color:var(--ink);-webkit-text-stroke:2px var(--bone)}
.subline{display:flex;flex-wrap:wrap;gap:.4em 1.2em;align-items:baseline;
  margin-top:clamp(14px,2.4vw,26px);font-size:clamp(1rem,1.5vw,1.28rem);color:var(--paper)}
.subline .b{color:var(--dim);font-family:var(--mono);font-size:.78em;letter-spacing:.1em;text-transform:uppercase}

/* contact sheet grid — asymmetric */
.sheet{display:grid;gap:clamp(8px,1.1vw,14px);margin-top:clamp(24px,4vw,52px);
  grid-template-columns:repeat(6,1fr);grid-auto-rows:clamp(88px,11vw,150px);
  grid-auto-flow:dense}
figure{margin:0}
.cell{position:relative;width:100%;height:100%;overflow:hidden;cursor:pointer;display:block;
  padding:0;border:0;font:inherit;color:inherit;text-align:left;
  background:
    radial-gradient(120% 90% at 25% 15%, hsl(var(--h,20) 34% 40% / .9), transparent 60%),
    linear-gradient(155deg, hsl(var(--h,20) 26% 20%), hsl(var(--h2,30) 30% 8%));
  transition:filter .3s, transform .3s}
.cell img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
/* grain only on empty placeholders */
.cell:not(.has-img)::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  opacity:.12;mix-blend-mode:overlay;box-shadow:inset 0 0 70px rgba(0,0,0,.5)}
/* legibility scrim for real photos */
.cell.has-img::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.28),transparent 30%,transparent 62%,rgba(0,0,0,.5))}
.cell:hover{filter:contrast(1.08) saturate(1.1)}
figure:hover .fnum{color:var(--red)}
.fnum{position:absolute;left:8px;top:7px;font-family:var(--mono);font-size:.68rem;
  letter-spacing:.1em;color:var(--bone);text-shadow:0 1px 3px #000;z-index:3;transition:color .2s}
.floc{position:absolute;left:8px;bottom:7px;font-family:var(--mono);font-size:.62rem;
  letter-spacing:.08em;text-transform:uppercase;color:rgba(243,239,230,.82);
  text-shadow:0 1px 3px #000;z-index:3}
.pmark{position:absolute;right:7px;top:7px;font-family:var(--mono);font-size:.55rem;
  letter-spacing:.12em;text-transform:uppercase;color:rgba(243,239,230,.5);z-index:3}

/* asymmetric spans */
.s-a{grid-column:span 3;grid-row:span 2}
.s-b{grid-column:span 2;grid-row:span 2}
.s-c{grid-column:span 1;grid-row:span 1}
.s-d{grid-column:span 2;grid-row:span 1}
.s-e{grid-column:span 4;grid-row:span 2}
.s-f{grid-column:span 2;grid-row:span 3}
@media(max-width:720px){
  .sheet{grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(80px,22vw,120px)}
  .s-a,.s-e{grid-column:span 4;grid-row:span 2}
  .s-b,.s-f{grid-column:span 2;grid-row:span 2}
  .s-c,.s-d{grid-column:span 2;grid-row:span 1}
}

/* footer / inquiry */
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px;
  margin-top:clamp(28px,5vw,60px);padding-top:22px;border-top:1px solid var(--hair)}
.cta{margin:0;font-weight:800;text-transform:uppercase;letter-spacing:-.01em;line-height:.95;
  font-size:clamp(1.6rem,5vw,3.4rem)}
.cta a{border-bottom:4px solid var(--red);transition:color .2s,border-color .2s}
.cta a:hover{color:var(--red);border-color:var(--bone)}
.cta .arrow{color:var(--red)}
.meta-links{display:flex;flex-direction:column;gap:6px;text-align:right;
  font-family:var(--mono);font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.meta-links a:hover{color:var(--red)}

/* lightbox */
.lb{position:fixed;inset:0;background:rgba(6,6,7,.94);display:none;place-items:center;
  z-index:60;padding:5vmin}
.lb.on{display:grid}
.lb .frame{width:fit-content;max-width:min(92vw,900px);margin:0 auto}
.lb .cell{cursor:default}
/* show the whole photo, portrait or landscape — no forced crop in the viewer */
.lb .cell:not(.has-img){aspect-ratio:3/2;width:min(80vw,560px)}
.lb .cell.has-img{background:none;overflow:visible}
.lb .cell.has-img::before,.lb .cell.has-img::after{content:none}
.lb .cell.has-img img{position:static;width:auto;height:auto;
  max-width:min(92vw,900px);max-height:82vh;display:block}
.lb .cap{display:flex;justify-content:space-between;margin-top:14px;font-family:var(--mono);
  font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.lb .cap .r{color:var(--red)}
.lb .x{position:fixed;top:16px;right:24px;background:none;border:0;color:var(--bone);
  font-size:2rem;cursor:pointer;line-height:1}
.lb .x:hover{color:var(--red)}