/* NexC Fotografia — fundament: zmienne, reset, typografia, sygnet, nawigacja, stopka */

:root{
  color-scheme:light;
  padding-top:env(safe-area-inset-top, 0px);
  padding-bottom:env(safe-area-inset-bottom, 0px);

  /* stonowana ściana galerii zamiast czystej bieli */
  --ground:#E9E8E4;
  --paper:#F7F6F3;
  --sunken:#E0DFDA;
  --ink:#1A1A18;
  --ink-2:#4E4E48;
  --muted:#67655D;
  --line:#D7D6D1;
  --line-2:#BFBEB8;

  /* ciemna sala — jedna sekcja na podstronę, dla rytmu */
  --dark:#1B1B18;
  --dark-ink:#EFEDE8;
  --dark-ink-2:#C6C3BB;
  --dark-muted:#9A978E;
  --dark-line:#34332E;

  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Instrument Sans","Helvetica Neue",Arial,sans-serif;

  --gutter:clamp(18px, 5vw, 64px);
  --gap:clamp(10px, 2vw, 26px);
  --section:clamp(52px, 9vw, 124px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}
body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.62;
  letter-spacing:-.003em;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto}
button{font:inherit}

.shell{max-width:1240px;margin:0 auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section)}
.rule{border-top:1px solid var(--line)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:100;background:var(--ink);color:var(--paper);padding:10px 16px}

a{color:inherit;text-decoration:none}
a.link{border-bottom:1px solid var(--line-2);padding-bottom:1px;transition:border-color .25s ease}
a.link:hover{border-color:var(--ink)}
:focus-visible{outline:1.5px solid var(--ink);outline-offset:4px}

/* ——— sygnet ———
   Nazwa jest zestawiona z dwóch ciężarów tego samego kroju: „NexC" w średniej
   grubości, „Fotografia" kursywą o lżejszym tonie. Bez logotypu, bez trzeciego
   kroju — kontrast robi tu robotę za znak graficzny. */
.wm{
  font-family:var(--serif);letter-spacing:-.015em;line-height:1;
  display:inline-flex;align-items:baseline;gap:.26em;white-space:nowrap;
}
.wm b{font-weight:500;font-style:normal}
.wm i{font-weight:300;font-style:italic;color:var(--ink-2)}
.wm-nav{font-size:clamp(19px,2.4vw,22px)}
.wm-foot{font-size:clamp(24px,3.4vw,32px)}
.wm-sub{
  display:block;margin-top:9px;font-family:var(--sans);font-size:10px;font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;color:var(--muted);
}

/* ——— typografia ——— */
h1,h2,h3{font-family:var(--serif);font-weight:300;letter-spacing:-.02em;margin:0}
h1{font-size:clamp(34px,6.4vw,78px);line-height:1.04;text-wrap:balance}
h2{font-size:clamp(26px,4.3vw,46px);line-height:1.1;text-wrap:balance}
h3{font-size:clamp(20px,2.3vw,26px);line-height:1.2}

p{margin:0 0 18px;max-width:60ch}
p:last-child{margin-bottom:0}

.label{
  font-family:var(--sans);font-size:10.5px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
  margin:0;line-height:1.5;
}
.label.ink{color:var(--ink)}
.lead{font-size:clamp(16.5px,1.5vw,18.5px);line-height:1.62;color:var(--ink-2);max-width:52ch}
.serif-lead{
  font-family:var(--serif);font-weight:300;font-size:clamp(20px,2.5vw,27px);
  line-height:1.38;letter-spacing:-.015em;color:var(--ink);max-width:28ch;
}
.muted{color:var(--muted)}
.small{font-size:13.5px}

.grid{display:grid;grid-template-columns:minmax(130px,1fr) minmax(0,3.4fr);gap:0 clamp(24px,5vw,80px)}
@media (max-width:820px){ .grid{grid-template-columns:1fr;gap:14px} }

/* ——— przyciski ——— */
.btn{
  display:inline-block;font-family:var(--sans);font-size:13.5px;font-weight:500;
  letter-spacing:.02em;padding:14px 30px;border:1px solid var(--ink);cursor:pointer;
  background:var(--ink);color:var(--paper);transition:background .25s ease,color .25s ease;
  text-align:center;
}
.btn:hover{background:transparent;color:var(--ink)}
.btn-ghost{background:none;color:var(--ink);border-color:var(--line-2)}
.btn-ghost:hover{background:none;border-color:var(--ink);color:var(--ink)}
.actions{display:flex;flex-wrap:wrap;gap:10px}
@media (max-width:430px){
  .actions{gap:8px}
  .actions .btn{flex:1 1 100%;padding:15px 20px}
}

/* ——— nawigacja ——— */
.nav{position:sticky;top:env(safe-area-inset-top, 0px);z-index:60;background:var(--ground);border-bottom:1px solid var(--line)}
.nav-in{
  max-width:1240px;margin:0 auto;padding:14px var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.nav-links{display:flex;align-items:center;gap:clamp(14px,2.2vw,28px)}
.nav-links a{
  font-size:10.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
  padding-bottom:2px;border-bottom:1px solid transparent;transition:color .2s ease,border-color .2s ease;
}
.nav-links a:hover{color:var(--ink)}
.nav-links a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--ink)}
.nav-toggle{
  display:none;background:none;border:1px solid var(--line-2);padding:10px 15px;cursor:pointer;
  font-size:10.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);
}
@media (max-width:820px){
  .nav-in{position:relative}
  .nav-toggle{display:block}
  .nav-links{
    display:none;position:absolute;left:0;right:0;top:100%;
    background:var(--ground);border-bottom:1px solid var(--line);
    flex-direction:column;align-items:stretch;gap:0;padding:4px var(--gutter) 16px;
  }
  .nav-links.open{display:flex}
  .nav-links a{padding:15px 0;font-size:12px;border-bottom:1px solid var(--line)}
  .nav-links a:last-child{border-bottom:none}
}

/* ——— stopka ——— */
footer{border-top:1px solid var(--ink);padding-block:clamp(30px,4vw,48px) clamp(36px,5vw,60px);margin-top:var(--section)}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:30px 48px;align-items:flex-start}
.foot p{margin:0;font-size:13px;color:var(--muted)}
.foot-links,.foot-nav{display:grid;gap:8px;font-size:13.5px}
@media (max-width:560px){
  .foot{gap:26px 32px}
  .foot-nav,.foot-links{font-size:14.5px}
}