/* ==========================================================================
   Elvision Photography — elvision.nl
   Editorial portfolio. Vanilla CSS, no build step.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root{
  /* ---------------------------------------------------------------
     Design tokens. Everything tunable lives here and nowhere else.
     Open the site with ?design to adjust these on screen.
     Each measurement keeps a responsive floor; the slider drives the
     ceiling, so tuning for desktop cannot break small screens.
     --------------------------------------------------------------- */

  /* Colour */
  --ground:#0b0b0c;
  --ground-lift:#141416;
  --ink:#f2efe9;
  --ink-dim:#a09a91;
  --ink-faint:#6b655e;
  --accent:#b8583f;
  --line-alpha:.14;
  --line:rgba(242,239,233,var(--line-alpha));

  /* Type family */
  --display:"Bodoni Moda",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;

  /* Type scale — the max of each clamp is the knob */
  --base-max:17px;
  --display-max:9.5rem;
  --h2-max:4.4rem;
  --lede-max:1.35rem;
  --track:.34em;              /* letter-spacing on eyebrows and labels */

  --base:clamp(15px,1.05vw,var(--base-max));
  --display-size:clamp(3rem,11vw,var(--display-max));
  --h2-size:clamp(2rem,5.5vw,var(--h2-max));
  --lede-size:clamp(1.05rem,1.6vw,var(--lede-max));

  /* Spacing */
  --gutter-max:80px;
  --gap-max:34px;
  --rhythm-max:180px;
  --down-max:130px;

  --gutter:clamp(20px,5vw,var(--gutter-max));
  --gap:clamp(12px,2.2vw,var(--gap-max));
  --rhythm:clamp(80px,14vh,var(--rhythm-max));
  --down:clamp(28px,7vw,var(--down-max));

  /* Motion */
  --speed:1;                  /* multiplier on every timed transition */
  --hover-scale:1.035;
  --reveal-y:26px;
  --ease:cubic-bezier(.22,.61,.36,1);
}


/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--base);
  line-height:1.65;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a,a:link,a:visited{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ---------- Typography ---------- */
h1,h2,h3{font-family:var(--display);font-weight:400;margin:0;line-height:1.02}
.display{
  font-size:var(--display-size);
  letter-spacing:-.02em;
  font-weight:400;
}
.display em{font-style:italic}
.eyebrow{
  font-family:var(--sans);
  font-size:.68rem;
  font-weight:500;
  letter-spacing:var(--track);
  text-transform:uppercase;
  color:var(--ink-dim);
}
.lede{
  font-size:var(--lede-size);
  line-height:1.55;
  color:var(--ink-dim);
  font-weight:300;
  max-width:44ch;
}

/* ---------- Header ---------- */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  padding:clamp(18px,2.4vw,30px) var(--gutter);
  transition:background .5s var(--ease),backdrop-filter .5s var(--ease),padding .5s var(--ease);
}
.site-header.is-stuck{
  background:rgba(11,11,12,.82);
  backdrop-filter:saturate(1.4) blur(14px);
  padding-block:clamp(12px,1.5vw,18px);
  border-bottom:1px solid var(--line);
}
.wordmark{
  font-family:var(--display);
  font-size:clamp(1.1rem,1.5vw,1.45rem);
  letter-spacing:.24em;
  text-transform:uppercase;
}
.wordmark span{color:var(--accent)}

.nav{display:flex;gap:clamp(18px,2.6vw,40px);align-items:center}
.nav a{
  font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-dim);position:relative;padding-block:4px;
  transition:color .3s var(--ease);
}
.nav a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--accent);transform:scaleX(0);transform-origin:right;
  transition:transform .4s var(--ease);
}
.nav a:hover{color:var(--ink)}
.nav a:hover::after{transform:scaleX(1);transform-origin:left}

.nav-toggle{display:none;width:34px;height:34px;position:relative;z-index:70}
.nav-toggle i{
  position:absolute;left:6px;right:6px;height:1px;background:var(--ink);
  transition:transform .4s var(--ease),opacity .3s var(--ease);
}
.nav-toggle i:nth-child(1){top:12px}
.nav-toggle i:nth-child(2){top:20px}
.nav-toggle[aria-expanded="true"] i:nth-child(1){transform:translateY(4px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] i:nth-child(2){transform:translateY(-4px) rotate(-45deg)}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden}
.hero-media{position:absolute;inset:0}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:68% center}
.hero-media::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(to right,rgba(11,11,12,.92) 0%,rgba(11,11,12,.55) 42%,rgba(11,11,12,0) 78%),
    linear-gradient(to top,rgba(11,11,12,.9) 0%,rgba(11,11,12,0) 45%);
}
.hero-inner{
  position:relative;z-index:2;
  padding:0 var(--gutter) clamp(60px,10vh,110px);
  width:min(100%,900px);
}
.hero .eyebrow{display:block;margin-bottom:clamp(14px,2vw,24px)}
.hero .display{margin-bottom:clamp(18px,2.4vw,30px)}
.hero .lede{margin:0 0 clamp(26px,4vw,44px)}

.scroll-cue{
  display:inline-flex;align-items:center;gap:14px;
  font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-dim);
}
.scroll-cue::after{
  content:"";width:clamp(40px,6vw,74px);height:1px;background:var(--ink-faint);
  transform-origin:left;animation:cue 2.6s var(--ease) infinite;
}
@keyframes cue{0%,100%{transform:scaleX(.35);opacity:.5}50%{transform:scaleX(1);opacity:1}}

/* ---------- Section shell ---------- */
.section{padding:var(--rhythm) var(--gutter)}
.section-head{
  display:flex;flex-wrap:wrap;gap:clamp(16px,3vw,50px);
  align-items:baseline;justify-content:space-between;
  padding-bottom:clamp(30px,5vw,60px);
  border-bottom:1px solid var(--line);
  margin-bottom:clamp(40px,7vw,90px);
}
.section-head h2{font-size:var(--h2-size);letter-spacing:-.02em}
.section-head .meta{color:var(--ink-faint);font-size:.72rem;letter-spacing:.24em;text-transform:uppercase}

/* ---------- Gallery ---------- */
.gallery{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:var(--gap) var(--gap);
  align-items:start;
}
.shot{margin:0;position:relative}
.shot button{
  display:block;width:100%;padding:0;position:relative;overflow:hidden;
  background:var(--ground-lift);
}
.shot img{
  width:100%;transition:transform calc(1.1s * var(--speed)) var(--ease),filter calc(.7s * var(--speed)) var(--ease);
  will-change:transform;
}
.shot button::after{
  content:"";position:absolute;inset:0;
  background:rgba(11,11,12,.28);opacity:0;transition:opacity .6s var(--ease);
}
.shot button:hover img{transform:scale(var(--hover-scale))}
.shot button:hover::after{opacity:1}
.shot figcaption{
  margin-top:12px;font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-faint);
  display:flex;justify-content:space-between;gap:12px;
}

/* placements — 12-col editorial rhythm */
.c-full {grid-column:1 / -1}
.c-wide {grid-column:2 / 12}
.c-solo {grid-column:4 / 10}
.c-half-l{grid-column:1 / 7}
.c-half-r{grid-column:7 / 13}
.c-nar-l{grid-column:1 / 6}
.c-nar-r{grid-column:8 / 13}
.c-big-l{grid-column:1 / 8}
.c-sm-r {grid-column:9 / 13}
.down   {margin-top:var(--down)}

/* ---------- Reveal ---------- */
.reveal{opacity:0;transform:translateY(var(--reveal-y));transition:opacity calc(1s * var(--speed)) var(--ease),transform calc(1s * var(--speed)) var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ---------- About ---------- */
.about{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);align-items:center}
.about-media{grid-column:1 / 6}
.about-body{grid-column:7 / 12}
.about-body h2{font-size:calc(var(--h2-size) * .78);margin-bottom:clamp(18px,2.6vw,30px)}
.about-body p{color:var(--ink-dim);margin:0 0 1.15em;max-width:52ch}
.stats{display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,56px);margin-top:clamp(28px,4vw,48px)}
.stat b{display:block;font-family:var(--display);font-size:clamp(1.7rem,3.2vw,2.6rem);font-weight:400}
.stat span{font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-faint)}

/* ---------- Contact ---------- */
.contact{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap) clamp(30px,5vw,80px)}
.contact-aside{grid-column:1 / 5}
.contact-form{grid-column:6 / 13}
.contact-aside h2{font-size:calc(var(--h2-size) * .78);margin-bottom:clamp(16px,2.4vw,26px)}
.contact-aside p{color:var(--ink-dim);max-width:34ch}
.detail{margin-top:clamp(24px,3.4vw,40px)}
.detail dt{font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:6px}
.detail dd{margin:0 0 20px;font-size:1rem}
.detail a:hover{color:var(--accent)}

.field{position:relative;margin-bottom:clamp(20px,2.6vw,30px)}
.field label{
  display:block;font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:10px;
}
.field input,.field textarea{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--line);
  color:var(--ink);font:inherit;padding:10px 0;border-radius:0;
  transition:border-color .4s var(--ease);
}
.field textarea{resize:vertical;min-height:120px}
.field input:focus,.field textarea:focus{outline:none;border-bottom-color:var(--accent)}
.field .err{display:block;margin-top:8px;font-size:.72rem;color:var(--accent);min-height:1em}
.field.invalid input,.field.invalid textarea{border-bottom-color:var(--accent)}

/* honeypot — hidden from people, visible to naive bots */
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

/* skip link — off-screen until focused by keyboard */
.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--accent);color:var(--ink);
  padding:12px 20px;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
}
.skip:focus{left:0}

.btn{
  display:inline-flex;align-items:center;gap:14px;
  border:1px solid var(--line);padding:16px clamp(24px,3vw,38px);
  font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;
  position:relative;overflow:hidden;transition:color .45s var(--ease),border-color .45s var(--ease);
}
.btn::before{
  content:"";position:absolute;inset:0;background:var(--accent);
  transform:translateY(101%);transition:transform .5s var(--ease);z-index:-1;
}
.btn:hover{border-color:var(--accent)}
.btn:hover::before{transform:translateY(0)}
.btn[disabled]{opacity:.5;pointer-events:none}

.form-note{
  margin-top:20px;font-size:.78rem;color:var(--ink-faint);
  border-left:2px solid var(--accent);padding-left:14px;
}
.form-status{margin-top:18px;font-size:.85rem;min-height:1.4em}
.form-status.ok{color:var(--ink)}
.form-status.bad{color:var(--accent)}

/* ---------- Footer ---------- */
.site-footer{
  border-top:1px solid var(--line);
  padding:clamp(40px,6vw,70px) var(--gutter);
  display:flex;flex-wrap:wrap;gap:20px;
  align-items:center;justify-content:space-between;
  color:var(--ink-faint);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
}
.site-footer a:hover{color:var(--ink)}
.social{display:flex;gap:clamp(16px,2.4vw,30px)}

/* ---------- Lightbox ---------- */
.lightbox{
  position:fixed;inset:0;z-index:100;display:none;
  background:rgba(7,7,8,.97);
  align-items:center;justify-content:center;
  padding:clamp(16px,4vw,54px);
}
.lightbox[open]{display:flex}
.lightbox img{
  max-width:100%;max-height:86svh;width:auto;object-fit:contain;
  opacity:0;transform:scale(.985);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.lightbox img.ready{opacity:1;transform:none}
.lb-close,.lb-prev,.lb-next{
  position:absolute;z-index:2;width:52px;height:52px;
  display:grid;place-items:center;color:var(--ink-dim);
  transition:color .3s var(--ease);
}
.lb-close:hover,.lb-prev:hover,.lb-next:hover{color:var(--ink)}
.lb-close{top:clamp(12px,2.4vw,28px);right:clamp(12px,2.4vw,28px);font-size:1.6rem;line-height:1}
.lb-prev{left:clamp(6px,1.6vw,22px);top:50%;transform:translateY(-50%)}
.lb-next{right:clamp(6px,1.6vw,22px);top:50%;transform:translateY(-50%)}
.lb-prev svg,.lb-next svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.2}
.lb-counter{
  position:absolute;bottom:clamp(14px,2.6vw,30px);left:50%;transform:translateX(-50%);
  font-size:.66rem;letter-spacing:.28em;color:var(--ink-faint);
}
body.lb-open{overflow:hidden}

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .about-media{grid-column:1 / 6}
  .about-body{grid-column:6 / 13}
  .contact-aside{grid-column:1 / 6}
  .contact-form{grid-column:6 / 13}
}
@media (max-width:760px){
  .nav{
    position:fixed;inset:0;z-index:65;
    flex-direction:column;justify-content:center;gap:34px;
    background:rgba(11,11,12,.97);backdrop-filter:blur(16px);
    transform:translateY(-100%);transition:transform .55s var(--ease);
  }
  .nav.open{transform:none}
  .nav a{font-size:1rem;letter-spacing:.3em}
  .nav-toggle{display:block}

  .gallery > .shot{grid-column:1 / -1 !important;margin-top:0 !important}
  .about,.contact{display:block}
  .about-media{margin-bottom:clamp(30px,6vw,50px)}
  .contact-aside{margin-bottom:clamp(40px,8vw,70px)}
  .hero-media img{object-position:center 22%}
  .hero-media::after{
    background:linear-gradient(to top,rgba(11,11,12,.95) 12%,rgba(11,11,12,.25) 60%,rgba(11,11,12,.45) 100%);
  }
  .site-footer{flex-direction:column;align-items:flex-start;text-align:left}
}

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