*,*::before,*::after { box-sizing:border-box; }
body { margin:0; color:var(--fg); background:var(--bg); font-family:var(--sans);
       font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased; }
img { max-width:100%; display:block; }
a { color:inherit; }
.wrap { max-width:var(--max); margin:0 auto; padding:0 24px; }
.skip { position:absolute; left:-9999px; }
.skip:focus { left:8px; top:8px; background:var(--bg); padding:8px 12px; z-index:99; }

/* --- galerii --- */
.galerii { display:grid; gap:var(--gap); grid-template-columns:repeat(auto-fill,minmax(var(--cell),1fr)); }
.galerii a { display:block; overflow:hidden; background:var(--tile); border-radius:var(--rad);
             aspect-ratio:1; position:relative; }
.galerii img { width:100%; height:100%; object-fit:cover; transition:transform .45s ease; }
.galerii a:hover img, .galerii a:focus-visible img { transform:scale(1.045); }
.galerii a:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.album-pealkiri { margin:40px 0 16px; font-size:15px; letter-spacing:.08em;
                  text-transform:uppercase; color:var(--muted); }

/* --- rivi: uks tookaik omaette plokina galerii alguses, ilma tekstita --- */
.rivi { margin:0 0 var(--gap); padding:var(--gap); background:var(--tile);
        border-radius:var(--rad); }
.rivi .galerii { --cell:170px; }
@media (max-width:600px) {
  .rivi { padding:10px; }
}

/* Kitsal ekraanil oleks --cell nii suur, et galerii kukuks UHE veeru peale.
   274 fotoga tahendaks see ~90 000 px kerimist. Vahendame lahtri, et
   telefonis oleks kaks veergu, ja votame servadest ruumi juurde. */
@media (max-width:620px) {
  .wrap { padding:0 14px; }
  .galerii { --cell:140px; gap:8px; }
  .rivi .galerii { --cell:140px; }
}

/* --- lightbox --- */
#lb { position:fixed; inset:0; background:rgba(16,14,12,.96); display:none;
      z-index:200; align-items:center; justify-content:center; }
#lb.avatud { display:flex; }
#lb img { max-width:92vw; max-height:88vh; object-fit:contain; border-radius:2px; }
#lb .nupp { position:absolute; background:none; border:0; color:#fff; cursor:pointer;
            font-size:36px; line-height:1; padding:16px; opacity:.7; }
#lb .nupp:hover { opacity:1; }
#lb .eelm { left:8px; top:50%; transform:translateY(-50%); }
#lb .jargm { right:8px; top:50%; transform:translateY(-50%); }
#lb .sulge { right:8px; top:8px; font-size:30px; }
#lb .loend { position:absolute; bottom:16px; left:0; right:0; text-align:center;
             color:rgba(255,255,255,.65); font-size:14px; }
@media (max-width:640px) {
  #lb .nupp { font-size:28px; padding:10px; }
}

/* --- kontakt --- */
.kontakt-rida { display:flex; gap:12px; align-items:baseline; margin:0 0 14px; }
.kontakt-rida dt { color:var(--muted); min-width:82px; font-size:15px; }
.kontakt-rida dd { margin:0; font-size:19px; }
.kontakt-rida a { text-decoration:none; border-bottom:1px solid var(--line); }
.kontakt-rida a:hover { border-color:var(--accent); }

:root {
  --bg:#1c1917; --fg:#ede7dd; --muted:#9b9186; --line:#38322c; --tile:#282320;
  --accent:#c8944e; --max:1220px; --gap:14px; --cell:210px; --rad:3px;
  --sans:"Segoe UI",system-ui,-apple-system,sans-serif;
}
h1,h2,h3 { font-weight:600; letter-spacing:-.015em; }
header.top { border-bottom:1px solid var(--line); position:sticky; top:0;
             background:rgba(28,25,23,.94); backdrop-filter:blur(8px); z-index:50; }
header.top .wrap { display:flex; justify-content:space-between; align-items:center;
                   min-height:72px; flex-wrap:wrap; gap:14px; }
.logo { font-size:19px; font-weight:600; text-decoration:none; letter-spacing:.01em; }
.logo span { color:var(--accent); }
nav ul { list-style:none; display:flex; gap:24px; margin:0; padding:0; font-size:15px; }
nav a { text-decoration:none; color:var(--muted); }
nav a:hover, nav a[aria-current] { color:var(--accent); }
.hero { position:relative; min-height:min(74vh,620px); display:flex; align-items:flex-end;
        overflow:hidden; }
.hero .taust { position:absolute; inset:0; }
.hero .taust img { width:100%; height:100%; object-fit:cover; opacity:.42; }
.hero .taust::after { content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(28,25,23,.5) 0%,rgba(28,25,23,.25) 40%,var(--bg) 100%); }
.hero .wrap { position:relative; padding-bottom:56px; padding-top:80px; }
.hero h1 { font-size:clamp(32px,5vw,54px); line-height:1.1; margin:0 0 20px; max-width:15ch; }
.hero .alla { color:var(--accent); font-size:14px; letter-spacing:.14em;
              text-transform:uppercase; margin:0 0 18px; }
.lugu { padding:64px 0; }
.lugu .veerud { display:grid; gap:40px; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.lugu p { margin:0 0 18px; color:#cfc6ba; }
.mark { margin-top:40px; padding:24px; border-left:2px solid var(--accent); background:var(--tile); }
.mark strong { color:var(--accent); display:block; font-size:32px; line-height:1; }
.mark span { color:var(--muted); font-size:14px; }
.sekts { padding:56px 0; border-top:1px solid var(--line); }
.sekts h2 { font-size:24px; margin:0 0 8px; }
.sekts .sisse { color:var(--muted); margin:0 0 30px; }
.kaardid { display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); }
.kaart { text-decoration:none; display:block; position:relative; overflow:hidden;
         border-radius:var(--rad); }
.kaart .pilt { aspect-ratio:3/2; background:var(--tile); }
.kaart img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.kaart:hover img { transform:scale(1.05); }
.kaart .silt { position:absolute; inset:auto 0 0 0; padding:18px 16px 14px;
  background:linear-gradient(0deg,rgba(20,17,15,.92),transparent); }
.kaart h3 { margin:0; font-size:18px; }
.kaart .arv { color:var(--muted); font-size:13px; }
footer.all { border-top:1px solid var(--line); margin-top:64px; padding:40px 0 60px;
             color:var(--muted); font-size:15px; }
footer.all a { color:var(--accent); }