@font-face {
  font-family: 'Goblin One';
  src: url('assets/fonts/GoblinOne.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Qanelas';
  src: url('assets/fonts/QANELAS-LIGHT.TTF') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Qanelas';
  src: url('assets/fonts/QANELAS-LIGHTITALIC.TTF') format('truetype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Qanelas';
  src: url('assets/fonts/QANELAS-REGULAR.TTF') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Qanelas';
  src: url('assets/fonts/QANELAS-MEDIUM.TTF') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Qanelas';
  src: url('assets/fonts/QANELAS-BLACK.TTF') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root{
  --ink: #151a20;
  --cream: #f0ebe5;
  --cream-2: #e7e0d8;
  --blue: #1d5fe5;
  --blue-soft: #4f7ae8;
  --line: rgba(77,78,83,0.8);
  --line-soft: rgba(240,235,231,0.18);
  --font-display: 'Goblin One', 'Qanelas', serif;
  --font-body: 'Qanelas', -apple-system, BlinkMacSystemFont, sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink: #151a20;
    --cream: #f0ebe5;
    --cream-2: #e7e0d8;
    --blue: #3f74ff;
    --blue-soft: #7096ff;
    --line: rgba(77,78,83,0.8);
    --line-soft: rgba(240,235,231,0.18);
  }
}
:root[data-theme="dark"]{
  --ink: #151a20;
  --cream: #f0ebe5;
  --cream-2: #e7e0d8;
  --blue: #3f74ff;
  --blue-soft: #7096ff;
  --line: rgba(77,78,83,0.8);
  --line-soft: rgba(240,235,231,0.18);
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight:400;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

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

.wrap{
  max-width:1760px;
  margin:0 auto;
  padding:0 0;
}

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

/* ---------- header ---------- */
header{
  background: var(--ink);
  position:sticky;
  top:0;
  z-index:50;
}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:40px;
  max-width:1840px;
  margin:0 auto;
  gap:20px;
}
.logo-mark{ height:80px; width:auto; flex-shrink:0; }
.nav-links{
  display:flex;
  gap:44px;
  font-size:clamp(1.2rem, 2.3vw, 1.95rem);
  letter-spacing:0.02em;
}
.nav-links a{
  color: var(--blue-soft);
  transition: opacity 0.2s ease;
}
.nav-links a:hover{ opacity:0.75; }
.nav-contact a{
  color:#f5f2ee;
  font-size:clamp(1.2rem, 2.3vw, 1.95rem);
  letter-spacing:0.03em;
  border-bottom:1px solid transparent;
  transition:border-color 0.2s ease;
}
.nav-contact a:hover{ border-color:#f5f2ee; }

.nav-toggle{
  display:none;
  background:none;
  border:none;
  color:#f5f2ee;
  font-size:1.6rem;
  line-height:1;
  cursor:pointer;
}

/* ---------- hero ---------- */
.hero{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:stretch;
  min-height:640px;
  padding-bottom:110px;
}
.hero-text{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-around;
  text-align:center;
  padding:64px 56px 56px;
}
.hero-name{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(2.6rem, 5vw, 7rem);
  line-height:0.98;
  letter-spacing:-0.01em;
  opacity:0;
  transform:translateY(18px);
  animation:heroIn 0.8s cubic-bezier(.22,.9,.32,1) 0.15s forwards;
}
.hero-role{
  color:var(--blue);
  font-size:clamp(1.2rem, 2.3vw, 1.95rem);
  /*font-size:1.95rem;*/
  letter-spacing:0.1em;
  line-height:1.2;
  /*max-width:360px;*/
  text-transform: uppercase;
  font-weight: 600;
  margin-top:18px;
  opacity:0;
  transform:translateY(18px);
  animation:heroIn 0.8s cubic-bezier(.22,.9,.32,1) 0.38s forwards;
}
@keyframes heroIn{
  to{ opacity:1; transform:translateY(0); }
}
.hero-photo{
  position:relative;
  overflow:hidden;
  background:#0d1116;
  opacity:0;
  animation:heroPhotoIn 1.1s ease 0.1s forwards;
}
.hero-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 18%;
}
@keyframes heroPhotoIn{
  to{ opacity:1; }
}
@media (prefers-reduced-motion: reduce){
  .hero-name, .hero-role, .hero-photo{
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
  }
}

/* ---------- section labels ---------- */
.section-label{
  color:var(--blue);
  font-weight:700;
  font-size:1.45rem;
  letter-spacing:0.06em;
}
.rule{
  border:none;
  border-top:1px solid var(--line);
  margin:0;
}

/* ---------- galerie ---------- */
.galerie{
  padding: 56px 20px 0 20px;
}
.galerie-head{
  padding-bottom:70px;
}
.gallery-grid{
  display:grid;
  grid-template-columns: 1.8fr 0.8fr 1.3fr;
  gap:70px;
  align-items:start;
}
.gallery-grid figure{ margin:0; }
.gallery-grid img{
  width:100%;
  border-radius:2px;
}
.gallery-col{
  display:flex;
  flex-direction:column;
  gap:100px;
}
.g-caption{
  font-style:italic;
  font-size:1.1rem;
  color:var(--ink);
  opacity:0.75;
  margin-top:14px;
  line-height:1.25;
}
.portfolio-btn{
  border:1.5px solid var(--blue);
  border-radius:50px;
  color:var(--blue);
  font-size:2.05rem;
  font-weight:600;
  letter-spacing:0.02em;
  text-align:center;
  line-height:1.3;
  padding:100px 20px;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:190px;
  transition: background 0.2s ease, color 0.2s ease;
}
.portfolio-btn:hover{
  background:var(--blue);
  color:#f5f2ee;
}
.gallery-row3{
  margin-top:64px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
}
.gallery-row3 img{ border-radius:0; }
.gallery-row3 figcaption{
  grid-column:1 / -1;
  font-style:italic;
  font-size:0.95rem;
  opacity:0.75;
  margin-top:18px;
}

/* fade-in on scroll for gallery photos */
.fade-in-img{
  opacity:0;
  transform:translateY(24px);
  transition:opacity 0.8s cubic-bezier(.22,.9,.32,1), transform 0.8s cubic-bezier(.22,.9,.32,1);
}
.fade-in-img.is-visible{
  opacity:1;
  transform:translateY(0);
  justify-self: stretch;
}
@media (prefers-reduced-motion: reduce){
  .fade-in-img{ opacity:1 !important; transform:none !important; transition:none !important; }
}

.aloge {
  max-width: 440px;
}

/* ---------- a propos ---------- */
.apropos{
  padding:64px 20px 88px 20px;
}
.apropos-head{ padding-bottom:36px; }
.apropos-body{
  display:grid;
  grid-template-columns: 130px 1fr;
  gap:24px;
}
.apropos-body p{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(1.3rem, 1.8vw, 2.2rem);
  line-height:1.55;
  /*max-width:920px;*/
}

/* ---------- footer ---------- */
footer{
  background:var(--ink);
  color:#f5f2ee;
  padding:100px 20px 28px 20px;
}
.footer-label{
  color:var(--blue-soft);
  font-weight:700;
  font-size:1.45rem;
  letter-spacing:0.06em;
}
.footer-rule{
  border:none;
  border-top:1px solid var(--line-soft);
  margin-bottom:50px;
}
.footer-grid{
  display:grid;
  grid-template-columns: 30px 1fr 1fr;
  gap:32px;
  max-width:1240px;
  padding-bottom:70px;
  padding-top: 70px;
}
.footer-grid div{
  justify-self: center;
}
.footer-grid h3{
  font-family:var(--font-display);
  font-weight:400;
  font-size:2.2rem;
  margin-bottom:10px;
}
.footer-grid a{
  color:#d9d4cd;
  font-size: 1.4rem;
  letter-spacing: 0.1em;
}
.footer-grid a:hover{ color:#fff; }
.footer-bottom{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:20px;
}
.footer-logo{ height:80px; width:auto; }
.footer-bottom-rule{
  border-top:1px solid var(--line-soft);
  margin-top:80px;
  padding-top:18px;
  font-size:1.4rem;
  color:#a9a39b;
}

/* ---------- responsive ---------- */
@media (max-width: 980px){
  .hero{ grid-template-columns:1fr; }
  .hero-photo{ min-height:420px; order:-1; }
  .hero-text{ padding:44px 28px 40px; }
  .gallery-grid{ grid-template-columns:1fr; }
  .gallery-col{ gap:24px; }
  .gallery-row3{ grid-template-columns:1fr; }
  .apropos-body{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .wrap{ padding:0 24px; }
  .nav{ padding:16px 24px; }
}
@media (max-width: 720px){
  .logo-mark {height: 45px;}
  .nav-links{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background:var(--ink);
    flex-direction:column;
    gap:0;
    max-height:0;
    overflow:hidden;
    transition:max-height 0.25s ease;
	font-size: 1.45rem;
  }
  .nav-links.open{ max-height:260px; }
  .nav-links a{
    padding:16px 24px;
    border-top:1px solid var(--line-soft);
  }
  .nav-toggle{ display:block; }
  .nav-contact{ display:none; }
  
  .hero {padding-bottom: 20px;}
  .galerie {padding: 20px 20px 0 20px;}
  .galerie-head {padding-bottom: 20px;}
  .gallery-grid {gap: 40px;}
  
  .apropos {padding: 20px 20px 60px 20px;}
  .apropos-head {padding-bottom: 0;}
  
  footer {padding: 20px 20px 28px 20px;}
  .footer-rule {margin-bottom: 20px;}
  .footer-grid {padding-bottom: 40px;padding-top: 0;}
  .footer-bottom {justify-content: start;}
  .footer-grid div {justify-self: flex-start;}
  .footer-grid h3 {font-size: 1.2rem;}
  .footer-grid a {font-size: 1.2rem}
  
  
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ transition:none !important; }
}

a:focus-visible, button:focus-visible{
  outline:2px solid var(--blue);
  outline-offset:3px;
}