@font-face{ font-family:"Oskari G2"; src:url(fonts/OskariG2-Regular.otf) format("opentype"); font-weight:400; font-display:swap; }
@font-face{ font-family:"Oskari G2"; src:url(fonts/OskariG2-Medium.otf) format("opentype"); font-weight:500 600; font-display:swap; }
@font-face{ font-family:"Oskari G2"; src:url(fonts/OskariG2-Bold.otf) format("opentype"); font-weight:700; font-display:swap; }
:root{
  --bg: #FFFFFF;
  --ink: #111111;
  --gray: #9B9B9B;
  --sans: "Oskari G2", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *{ animation:none !important; transition:none !important; } }
body{
  margin:0; background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing: antialiased;
}
a{ color: inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
::selection{ background: var(--ink); color: var(--bg); }

header.site{
  text-align:left;
  padding: 28px 32px;
}
header.site .brand{
  font-family: var(--sans); font-weight:700; font-size: 20px;
  letter-spacing: 0.04em; display:inline-block; margin:0;
}
header.site nav.main{
  position:fixed; left:0; right:0; bottom:0; z-index:20; justify-content:flex-end;
  padding:20px 32px; background:var(--bg);
}
body:not(:has(.hero-slideshow)){ padding-bottom:70px; }
nav.main{
  display:flex; justify-content:center; flex-wrap:wrap;
  gap: 30px 38px;
}
nav.main a{
  font-family: var(--sans); font-size: 13px; font-weight:600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink);
}
@media (min-width:761px){
  nav.main{ gap: 30px 44px; }
  nav.main a{ font-size: 16px; }
}
nav.main a[aria-current="page"]{ color: var(--gray); }
nav.main a:hover{ opacity:0.6; }

.hero-slideshow{
  position: relative; width:100%; height:100svh; overflow:hidden; background:#000;
}
.hero-slideshow img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition: opacity 1.6s ease;
}
.hero-slideshow img.active{ opacity:1; }
.hero-overlay{
  position:absolute; inset:0; z-index:5;
  background:linear-gradient(to bottom, rgba(0,0,0,0.35), rgba(0,0,0,0) 25%, rgba(0,0,0,0) 75%, rgba(0,0,0,0.35));
}
.hero-overlay .brand{
  position:absolute; top:28px; left:32px;
  font-family: var(--sans); font-weight:700; color:#fff;
  font-size: 20px; letter-spacing:0.04em; line-height:1;
  text-shadow: 0 1px 12px rgba(0,0,0,0.25);
}
.hero-overlay nav.main{ position:absolute; bottom:32px; right:32px; left:auto; padding:0; background:none; }
.hero-overlay nav.main a{ color:#fff; text-shadow: 0 1px 10px rgba(0,0,0,0.3); }
.hero-overlay nav.main a[aria-current="page"]{ color: rgba(255,255,255,0.6); }
@media (max-width:760px){
  header.site nav.main{ justify-content:center; padding:16px 20px; gap:12px 22px; }
  .hero-overlay .brand{ left:20px; }
  .hero-overlay nav.main{ left:20px; right:20px; justify-content:center; gap:12px 22px; }
}

.content{ max-width: 980px; margin: 0 auto; padding: 60px 32px 120px; }
@media (max-width:640px){ .content{ padding: 40px 20px 90px; } }

.entry{ padding: 0 0 90px; text-align:center; }
.entry img{ margin: 0 auto 30px; max-width:100%; }
.entry .meta{ font-size:12px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color: var(--gray); margin:0 0 10px; }
.entry h2{ font-family: var(--sans); font-weight:700; font-size: 26px; margin: 0 0 6px; }
.entry h2 em{ font-style:normal; font-weight:400; color: var(--gray); }
.entry .selection{ font-style: italic; color: var(--gray); font-size: 14px; margin: 10px 0 0; }
.entry p.desc{ font-size: 16px; max-width: 620px; margin: 14px auto 0; color: var(--ink); }

.mini-gallery{ display:grid; grid-template-columns: repeat(5,1fr); gap:6px; margin: 0 0 26px; }
@media (max-width: 760px){ .mini-gallery{ grid-template-columns: repeat(2,1fr); } }
.mini-gallery img{ aspect-ratio: 1/1; object-fit: cover; margin:0; }

.section-label{
  font-size: 12px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase;
  color: var(--gray); text-align:center; padding: 20px 0 50px;
}

.about-photo{ max-width: 340px; margin: 0 auto 40px; }
.about-body{ max-width: 640px; margin: 0 auto; text-align:center; }
.about-body h1{ font-family: var(--sans); font-weight:700; font-size: 30px; margin:0 0 20px; }
.about-body p{ font-size: 16px; margin: 0 0 18px; text-align:left; }
.awards{ max-width: 640px; margin: 60px auto 0; text-align:center; }
.awards h3{ font-size:12px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color: var(--gray); margin: 0 0 22px; }
.awards ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap: 12px; }
.awards li{ font-size: 15px; }
.awards a{ text-decoration: underline; }

.contact-wrap{ max-width: 560px; margin: 0 auto; text-align:center; }
.contact-wrap h1{ font-family: var(--sans); font-weight:700; font-size: clamp(26px,4vw,36px); margin: 0 0 22px; }
.contact-wrap p.lead{ font-size:16px; color: var(--ink); margin: 0 0 40px; }
.contact-wrap p.lead a{ text-decoration: underline; }
form.contact-form{ display:flex; flex-direction:column; gap: 16px; text-align:left; }
form.contact-form input, form.contact-form textarea{
  font-family: var(--sans); font-size: 15px; padding: 13px 15px;
  border: 1px solid #ddd; background: #fff; color: var(--ink);
}
form.contact-form textarea{ min-height: 130px; resize: vertical; }
form.contact-form button{
  align-self:center; font-family: var(--sans); font-size: 13px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase;
  background: var(--ink); color: #fff; border:none; padding: 14px 34px; cursor:pointer;
}
form.contact-form button:hover{ opacity:0.85; }

footer.site{ padding: 40px 0 60px; text-align:center; }
footer.site p{ font-size:12px; color: var(--gray); letter-spacing:0.04em; margin:0; }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{ outline: 2px solid var(--ink); outline-offset: 2px; }

@media (min-width:761px){
  header.site .brand, .hero-overlay .brand{ font-size: 26px; }
}

/* portrait screens: keep each still's subject in frame */
@media (max-aspect-ratio: 1/1){
  .hero-slideshow img{ object-position: var(--pos, 50%) 50%; }
}