/* ============================================================
   Gert Guriev — portfoolio
   ============================================================ */

:root{
  /* värvid — tekst on 80% must, mitte päris must */
  --ink:        #333333;
  --ink-soft:   #6e6e6e;
  --ink-faint:  #9c9c9c;
  --bg:         #ffffff;
  --rule:       #e4e4e4;

  /* tüpograafia */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

  /* rütm — vertikaalne samm */
  --gutter: clamp(20px, 5vw, 72px);
  --step-s: clamp(28px, 4vw, 48px);
  --step-m: clamp(56px, 8vw, 104px);
  --step-l: clamp(96px, 14vw, 184px);

  /* pildilaiused */
  --w-full:   1180px;
  --w-wide:    960px;
  --w-mid:     680px;
  --w-narrow:  440px;

  /* pildi maksimaalne kõrgus — hoiab suured pildid kontrolli all */
  --img-max-h: 76vh;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  font-size:16px;
  font-weight:400;
  line-height:1.65;
  letter-spacing:-0.005em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img{ display:block; max-width:100%; height:auto; }

a{ color:inherit; text-decoration:none; }

h1,h2,h3{ font-weight:500; margin:0; letter-spacing:-0.018em; }

/* ------------------------------------------------------------
   Päis — nimi keskel
   ------------------------------------------------------------ */
.site-head{
  display:flex;
  justify-content:center;
  padding:clamp(28px,5vh,52px) var(--gutter) 0;
}

.wordmark{
  font-size:.9375rem;
  font-weight:400;
  letter-spacing:.16em;
  color:var(--ink);
}

/* esimene pilt algab päisest allpool, rahulikult
   ------------------------------------------------------------ */
main > .fig:first-child{ margin-top:clamp(56px,10vh,120px); }

/* ------------------------------------------------------------
   Pilt + üherealine allkiri
   ------------------------------------------------------------ */
.fig{
  /* laius = väiksem kolmest: soovitud laius, kõrgusest tulenev laius, ekraan.
     Nii jääb figure täpselt pildi laiuseks (allkiri joondub pildi servaga)
     ja pilt ei kasva kunagi üle --img-max-h. */
  --w:var(--w-full);
  --ar:1.5;
  width:min(
    var(--w),
    calc(var(--img-max-h) * var(--ar)),
    calc(100% - 2*var(--gutter))
  );
  margin:0 auto var(--step-l);
  padding:0;
}
.fig > img{
  width:100%;
  height:auto;
  aspect-ratio:var(--ar);
}

.fig.w-full  { --w:var(--w-full);   }
.fig.w-wide  { --w:var(--w-wide);   }
.fig.w-mid   { --w:var(--w-mid);    }
.fig.w-narrow{ --w:var(--w-narrow); }

.fig figcaption{
  margin-top:1.15em;
  font-size:.8125rem;
  line-height:1.5;
  letter-spacing:.005em;
  color:var(--ink-soft);
}
.fig figcaption strong{ font-weight:500; color:var(--ink); }

/* trükipoognal on valge paberiserv — peenike joon annab sellele piiri */
.sheet img{ box-shadow:0 0 0 1px var(--rule); }

/* ------------------------------------------------------------
   CV
   ------------------------------------------------------------ */
.cv{
  max-width:var(--w-full);
  margin:0 auto;
  padding:var(--step-l) var(--gutter) 0;
  border-top:1px solid var(--rule);
  margin-top:var(--step-l);
}

.cv-lede{
  display:grid;
  grid-template-columns:minmax(0,4fr) minmax(0,6fr);
  gap:var(--step-s) clamp(32px,6vw,88px);
  align-items:start;
  margin-bottom:var(--step-l);
}
.cv-portrait img{ width:100%; max-width:280px; filter:grayscale(1); }

.cv-bio h2{
  margin:0 0 1.6em;
  font-size:.8125rem;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink);
}
.cv-bio p{
  margin:0 0 1.35em;
  max-width:62ch;
  font-size:.9375rem;
  line-height:1.8;
  color:var(--ink-soft);
}
.cv-bio p:last-child{ margin-bottom:0; }

.cv-block{
  display:grid;
  grid-template-columns:minmax(0,4fr) minmax(0,6fr);
  gap:var(--step-s) clamp(32px,6vw,88px);
  align-items:start;
  margin-top:var(--step-l);
}
.cv-block h3{
  margin:0;
  font-size:.8125rem;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink);
}

.years{
  margin:0;
  padding:0;
  list-style:none;
  font-size:.8125rem;
  line-height:1.6;
}
.years li{
  display:grid;
  grid-template-columns:6.5em 1fr;
  gap:0 1.25em;
  padding:.42em 0;
  break-inside:avoid;
}
.years li > span:first-child{
  color:var(--ink-faint);
  font-variant-numeric:tabular-nums;
}
.years li > span:last-child{ color:var(--ink-soft); }

/* pikad nimekirjad kahes veerus */
.years.cols{ column-count:2; column-gap:clamp(28px,4vw,64px); }
.years.cols li{ display:block; }
.years.cols li > span:first-child{
  display:inline-block;
  width:4.2em;
}

/* ------------------------------------------------------------
   Kontakt
   ------------------------------------------------------------ */
.contact{
  max-width:var(--w-full);
  margin:var(--step-l) auto 0;
  padding:var(--step-m) var(--gutter) var(--step-l);
  border-top:1px solid var(--rule);
  display:grid;
  grid-template-columns:minmax(0,4fr) minmax(0,6fr);
  gap:var(--step-s) clamp(32px,6vw,88px);
  align-items:start;
}
.contact h3{
  margin:0;
  font-size:.8125rem;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.contact-list{
  margin:0;
  padding:0;
  list-style:none;
  font-size:.9375rem;
  line-height:2;
}
.contact-list a{
  color:var(--ink);
  border-bottom:1px solid var(--rule);
  padding-bottom:1px;
  transition:border-color .25s ease;
}
.contact-list a:hover{ border-bottom-color:var(--ink); }

.colophon{
  grid-column:1 / -1;
  margin:var(--step-m) 0 0;
  font-size:.75rem;
  letter-spacing:.02em;
  color:var(--ink-faint);
}

/* ------------------------------------------------------------
   Suurenduse vaade
   ------------------------------------------------------------ */
.zoomable{ cursor:zoom-in; }

.lightbox{
  position:fixed;
  inset:0;
  z-index:100;
  display:none;
  place-items:center;
  padding:clamp(16px,4vw,56px);
  background:rgba(255,255,255,.97);
  opacity:0;
  transition:opacity .3s ease;
}
.lightbox.is-open{ display:grid; }
.lightbox.is-shown{ opacity:1; }

.lightbox img{
  max-width:100%;
  max-height:calc(100vh - 2*clamp(16px,4vw,56px) - 44px);
  width:auto;
  object-fit:contain;
  cursor:zoom-out;
}
.lightbox-cap{
  margin-top:1em;
  font-size:.75rem;
  letter-spacing:.015em;
  color:var(--ink-faint);
  text-align:center;
  min-height:1.2em;
}
.lightbox-fig{ margin:0; display:flex; flex-direction:column; align-items:center; max-width:100%; }

.lightbox-close,
.lightbox-nav{
  position:absolute;
  border:0;
  background:none;
  color:var(--ink-faint);
  font:inherit;
  font-size:.75rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  cursor:pointer;
  padding:14px 18px;
  transition:color .2s ease;
}
.lightbox-close:hover,
.lightbox-nav:hover{ color:var(--ink); }
.lightbox-close{ top:clamp(8px,2vw,24px); right:clamp(8px,2vw,24px); }
.lightbox-nav.prev{ left:clamp(4px,1.5vw,20px); top:50%; transform:translateY(-50%); font-size:1.5rem; letter-spacing:0; }
.lightbox-nav.next{ right:clamp(4px,1.5vw,20px); top:50%; transform:translateY(-50%); font-size:1.5rem; letter-spacing:0; }

body.is-locked{ overflow:hidden; }

/* ------------------------------------------------------------
   Sisenemisanimatsioon — vaevumärgatav
   ------------------------------------------------------------ */
@media (prefers-reduced-motion:no-preference){
  .reveal{
    opacity:0;
    transform:translateY(14px);
    transition:opacity .9s cubic-bezier(.22,.61,.36,1),
               transform .9s cubic-bezier(.22,.61,.36,1);
  }
  .reveal.is-visible{ opacity:1; transform:none; }
}

/* ------------------------------------------------------------
   Mobiil
   ------------------------------------------------------------ */
@media (max-width:820px){
  :root{
    --img-max-h:64vh;
    /* mobiilis veidi tihedam rütm */
    --step-s: clamp(24px,5vw,36px);
    --step-m: clamp(44px,9vw,72px);
    --step-l: clamp(72px,15vw,120px);
  }

  .cv-lede,
  .cv-block,
  .contact{ grid-template-columns:1fr; }

  .cv-portrait img{ max-width:180px; }

  .years.cols{ column-count:1; }
  .years.cols li{ display:grid; grid-template-columns:4.6em 1fr; gap:0 1.25em; }
  .years.cols li > span:first-child{ display:block; width:auto; }


  .meta > div{ grid-template-columns:5em 1fr; }
}

@media (max-width:520px){
  body{ font-size:15px; }
  .years li{ grid-template-columns:4.6em 1fr; }
}