/* =========================================================
   VALKE — Creative Studio
   ========================================================= */

:root{
  --black: #0D0D0D;
  --cream: #F5F3EE;
  --grey:  #6B6B6B;
  --line-dark:  rgba(245, 243, 238, 0.14);
  --line-light: rgba(13, 13, 13, 0.14);

  --font-sans:  "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-serif: "DM Serif Display", Georgia, "Times New Roman", serif;

  --gutter: clamp(20px, 5vw, 64px);
  --max: 1200px;
  --section-y: clamp(96px, 14vw, 176px);
  --header-h: 72px;

  --ease: cubic-bezier(.2, .7, .1, 1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:var(--header-h); -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--black);
  color:var(--cream);
  font-family:var(--font-sans);
  font-size:clamp(1rem, .96rem + .2vw, 1.0625rem);
  line-height:1.65;
  font-weight:350;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,p,ol,ul{ margin:0; }
ol,ul{ padding:0; list-style:none; }
::selection{ background:var(--cream); color:var(--black); }

.skip-link{
  position:absolute; left:16px; top:-60px; z-index:100;
  background:var(--cream); color:var(--black);
  padding:10px 16px; font-size:.8rem;
}
.skip-link:focus{ top:16px; }

:focus-visible{ outline:1px solid currentColor; outline-offset:4px; }

.container{
  width:100%;
  max-width:var(--max);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.logo-svg{ fill:currentColor; aspect-ratio:1527 / 240; height:auto; }

/* ---------- Type ---------- */
.label{
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--grey);
  margin-bottom:clamp(32px, 5vw, 56px);
}

.heading{
  font-stretch:125%;
  font-weight:700;
  text-transform:uppercase;
  line-height:1;
  letter-spacing:-.01em;
  font-size:clamp(2rem, 1.3rem + 3vw, 4rem);
}
.heading-lg{ font-size:clamp(2.6rem, 1.2rem + 6vw, 7rem); }

.lead{
  font-family:var(--font-serif);
  font-size:clamp(1.5rem, 1.2rem + 1.2vw, 2.2rem);
  line-height:1.15;
}

.text-link{
  display:inline-block;
  font-stretch:112%;
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  padding-bottom:6px;
  background:linear-gradient(currentColor, currentColor) left bottom / 100% 1px no-repeat;
  transition:background-size .4s var(--ease);
}
.text-link:hover{ background-size:0 1px; background-position:right bottom; }

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:50;
  padding-top:env(safe-area-inset-top, 0px);
  mix-blend-mode:difference;
  color:var(--cream);
}
.header-inner{
  height:var(--header-h);
  max-width:var(--max);
  margin-inline:auto;
  padding-inline:var(--gutter);
  display:flex; align-items:center;
}
.header-logo .logo-svg{ width:96px; }

.site-nav{ margin-left:auto; }
.site-nav ul{ display:flex; gap:clamp(20px, 3vw, 40px); }
.site-nav a{
  font-stretch:112%;
  font-size:.68rem;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  opacity:.75;
  transition:opacity .3s;
}
.site-nav a:hover{ opacity:1; }

.nav-toggle{
  display:none;
  margin-left:auto;
  width:44px; height:44px;
  background:none; border:0; padding:0;
  position:relative; cursor:pointer;
  color:inherit;
}
.nav-toggle span{
  position:absolute; left:10px; right:10px; height:1px;
  background:currentColor;
  transition:transform .4s var(--ease), top .4s var(--ease);
}
.nav-toggle span:first-child{ top:18px; }
.nav-toggle span:last-child{ top:26px; }
.nav-open .nav-toggle span:first-child{ top:22px; transform:rotate(45deg); }
.nav-open .nav-toggle span:last-child{ top:22px; transform:rotate(-45deg); }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  min-height:100vh;
  min-height:100svh;
  display:flex; align-items:center;
  padding-block:calc(var(--header-h) + 60px) 96px;
}
.hero-inner{ display:flex; flex-direction:column; align-items:center; text-align:center; }

.hero-logo{ margin:0 0 clamp(40px, 6vw, 64px); font-weight:400; }
.hero-logo .logo-svg{
  width:min(640px, 76vw);
  margin-inline:auto;
  animation:rise 1.4s var(--ease) both;
}
.hero-sub{
  display:block;
  margin-top:clamp(12px, 2vw, 24px);
  font-stretch:118%;
  font-size:clamp(.68rem, .5rem + .7vw, 1rem);
  letter-spacing:.52em;
  padding-left:.52em; /* optically centre the tracked text */
  text-transform:uppercase;
  color:rgba(245,243,238,.7);
  animation:rise 1.4s .15s var(--ease) both;
}
.hero-intro{
  max-width:30em;
  color:rgba(245,243,238,.7);
  margin-bottom:40px;
}

@keyframes rise{
  from{ opacity:0; transform:translateY(20px); }
  to{ opacity:1; transform:none; }
}

/* =========================================================
   SECTIONS
   ========================================================= */
.section{ padding-block:var(--section-y); }
.section-light{ background:var(--cream); color:var(--black); }

.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(40px, 8vw, 120px);
  align-items:start;
}
.split-body{ display:flex; flex-direction:column; gap:24px; max-width:34rem; }
.split-body > p:not(.lead):not(.signature){ opacity:.72; }

/* Services */
.service-list{ border-top:1px solid var(--line-dark); }
.service{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
  gap:12px clamp(24px, 6vw, 96px);
  align-items:baseline;
  padding-block:clamp(24px, 3vw, 36px);
  border-bottom:1px solid var(--line-dark);
}
.service h3{
  font-stretch:125%;
  font-weight:600;
  font-size:clamp(1.05rem, .9rem + .6vw, 1.4rem);
  line-height:1.2;
  text-transform:uppercase;
}
.service p{ color:rgba(245,243,238,.62); max-width:30rem; }

/* Work */
.work-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:clamp(16px, 2vw, 28px);
}
.work-card{ display:flex; flex-direction:column; gap:14px; }
.work-media{
  aspect-ratio:4 / 5;
  background:#E4E1DA;
  overflow:hidden;
  transition:opacity .4s var(--ease);
}
.work-media img{ width:100%; height:100%; object-fit:cover; }
.work-card:hover .work-media{ opacity:.85; }
.work-meta{
  display:flex; justify-content:space-between;
  font-stretch:112%;
  font-size:.66rem;
  letter-spacing:.2em;
  text-transform:uppercase;
}

/* About */
.signature{
  display:flex; flex-direction:column; gap:2px;
  margin-top:16px;
  padding-top:24px;
  border-top:1px solid var(--line-dark);
  font-weight:500;
}
.signature span{
  font-size:.64rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--grey);
  font-weight:400;
}

/* Contact */
.contact-email{
  display:inline-block;
  margin-top:clamp(40px, 6vw, 72px);
  font-size:clamp(1.1rem, .9rem + .8vw, 1.6rem);
  font-weight:400;
  padding-bottom:4px;
  background:linear-gradient(currentColor, currentColor) left bottom / 100% 1px no-repeat;
  transition:background-size .4s var(--ease);
}
.contact-email:hover{ background-size:0 1px; background-position:right bottom; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{ padding-block:32px calc(32px + env(safe-area-inset-bottom, 0px)); }
.footer-inner{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px 24px;
  font-stretch:112%;
  font-size:.66rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--grey);
}

/* =========================================================
   REVEAL
   ========================================================= */
.js .reveal{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.js .reveal.is-visible{ opacity:1; transform:none; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 860px){
  :root{ --header-h:64px; }

  .nav-toggle{ display:block; z-index:2; }
  .site-nav{
    position:fixed; inset:0;
    background:var(--black);
    display:flex; align-items:center;
    padding:calc(var(--header-h) + 24px) var(--gutter) 48px;
    opacity:0; visibility:hidden;
    transition:opacity .45s var(--ease), visibility .45s;
  }
  .nav-open .site-nav{ opacity:1; visibility:visible; }
  .site-nav ul{ flex-direction:column; gap:10px; }
  .site-nav a{
    font-stretch:125%;
    font-weight:700;
    font-size:clamp(1.8rem, 8vw, 2.6rem);
    letter-spacing:0;
    opacity:1;
  }
  .header-logo{ position:relative; z-index:2; }
  .nav-open{ overflow:hidden; }
  /* blend mode would invert the open menu */
  .nav-open .site-header{ mix-blend-mode:normal; }

  .split{ grid-template-columns:1fr; }
  .service{ grid-template-columns:1fr; }
  .work-grid{ grid-template-columns:1fr; }
  .work-media{ aspect-ratio:4 / 3; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation:none !important; transition-duration:.01ms !important; }
  .js .reveal{ opacity:1; transform:none; }
}