/* =========================================================
   Suuz & Zo Fotografie — design system "Duin"
   Palet: schelp / zand / klei / duingras / drijfhout
   ========================================================= */

/* lettertypen: zelf gehost (latin-subset), geen render-blokkerende Google Fonts */
@font-face{
  font-family:'Instrument Serif'; font-style:normal; font-weight:400; font-display:swap;
  src:url(assets/fonts/instrument-serif-normal-latin.woff2) format('woff2');
}
@font-face{
  font-family:'Instrument Serif'; font-style:italic; font-weight:400; font-display:swap;
  src:url(assets/fonts/instrument-serif-italic-latin.woff2) format('woff2');
}
@font-face{
  font-family:'Hanken Grotesk'; font-style:normal; font-weight:400 600; font-display:swap;
  src:url(assets/fonts/hanken-grotesk-normal-latin.woff2) format('woff2');
}

:root{
  /* kleur */
  --c-bg:#F6F0E7;          /* schelp */
  --c-surface:#FBF8F3;
  --c-sand:#E7D8C1;        /* zand */
  --c-sand-2:#EFE4D3;
  --c-ink:#3A2F28;         /* drijfhout */
  --c-ink-2:#6E6054;
  --c-dark:#3A2F28;
  --c-photo-bg:#1E1814;
  --c-accent:#9C5A3C;      /* klei */
  --c-accent-hover:#844A30;
  --c-accent-soft:#E2C4A4; /* klei op donker */
  --c-accent-2:#7A7A5C;    /* duingras */
  --c-border:#E6DCCD; --c-border-glass:rgba(255,255,255,.6);
  --glass-light:rgba(251,248,243,.66); --glass-dark:rgba(58,47,40,.52);

  /* type */
  --f-display:'Instrument Serif',Georgia,serif;
  --f-body:'Hanken Grotesk',system-ui,-apple-system,sans-serif;
  --t-hero:clamp(3.1rem,1.8rem + 6.4vw,7rem);
  --t-h2:clamp(2.3rem,1.5rem + 3.4vw,4rem);
  --t-h3:clamp(1.45rem,1.2rem + 1vw,2rem);
  --t-lead:clamp(1.0625rem,1rem + .5vw,1.375rem);
  --t-body:clamp(1rem,.97rem + .17vw,1.0625rem);
  --t-small:.875rem; --t-eyebrow:.75rem;
  --lh-tight:1.06; --lh-head:1.15; --lh-body:1.65;
  --ls-hero:-.02em; --ls-head:-.01em; --ls-eyebrow:.16em;

  /* ruimte */
  --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem; --s-5:1.5rem;
  --s-6:2rem; --s-7:3rem; --s-8:4rem; --s-9:6rem; --s-10:8rem;
  --section-y:clamp(4rem,2rem + 8vw,10rem);
  --gutter:clamp(1.25rem,5vw,4rem);
  --maxw:76rem; --maxw-text:38rem;

  /* vorm */
  --r-sm:8px; --r-md:14px; --r-lg:22px; --r-xl:32px; --r-pill:999px;

  /* schaduw */
  --sh-1:0 1px 2px rgba(110,96,84,.10);
  --sh-2:0 10px 24px -12px rgba(110,96,84,.30);
  --sh-3:0 28px 60px -28px rgba(58,47,40,.42);
  --sh-inset:0 1px 0 rgba(255,255,255,.85) inset;

  /* beweging */
  --e-out:cubic-bezier(.22,1,.36,1); --e-soft:cubic-bezier(.4,0,.2,1);
  --d-fast:180ms; --d-base:320ms; --d-slow:640ms; --d-reveal:900ms;
}

*,*::before,*::after{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--c-bg);
  color:var(--c-ink);
  font-family:var(--f-body);
  font-size:var(--t-body);
  line-height:var(--lh-body);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block}
a{color:inherit}
[hidden]{display:none!important}

:focus-visible{
  outline:2px solid var(--c-accent);
  outline-offset:3px;
  border-radius:var(--r-sm);
}

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

.skip{
  position:absolute; left:var(--s-4); top:-4rem; z-index:200;
  background:var(--c-accent); color:#fff; padding:var(--s-3) var(--s-5);
  border-radius:var(--r-pill); font-weight:600; text-decoration:none;
  transition:top var(--d-base) var(--e-out);
}
.skip:focus{top:calc(var(--s-4) + env(safe-area-inset-top,0px))}

/* ---------- typografie ---------- */

h1,h2,h3{
  font-family:var(--f-display);
  font-weight:400;
  line-height:var(--lh-head);
  letter-spacing:var(--ls-head);
  margin:0;
}
h2{ font-size:var(--t-h2); }
h3{ font-size:var(--t-h3); }

.eyebrow{
  font-size:var(--t-eyebrow);
  letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;
  font-weight:600;
  color:var(--c-accent);
  margin:0 0 var(--s-4);
}
.on-dark .eyebrow{color:var(--c-accent-soft)}

.accent-italic{
  font-style:italic;
  font-weight:400;
  color:var(--c-accent);
}
.on-dark .accent-italic{color:var(--c-accent-soft)}

.lead{
  font-size:var(--t-lead);
  color:var(--c-ink-2);
  max-width:var(--maxw-text);
  line-height:1.55;
}
.on-dark .lead{color:rgba(255,255,255,.76)}

/* ---------- glas ---------- */

.glass-nav{
  background:linear-gradient(180deg,rgba(246,240,231,.84),rgba(246,240,231,.68));
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border-bottom:1px solid rgba(255,255,255,.55);
  box-shadow:var(--sh-inset),0 8px 28px -14px rgba(58,47,40,.35);
}

.glass-on-photo{
  color:#fff;
  background:var(--glass-dark);
  backdrop-filter:blur(20px) saturate(140%) brightness(.65);
  -webkit-backdrop-filter:blur(20px) saturate(140%) brightness(.65);
  border:1px solid rgba(255,255,255,.22);
  border-radius:var(--r-lg);
  box-shadow:0 1px 0 rgba(255,255,255,.28) inset,0 24px 48px -24px rgba(0,0,0,.55);
}

.glass-panel{
  background:linear-gradient(145deg,rgba(255,255,255,.72),rgba(255,255,255,.48));
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border:1px solid var(--c-border-glass);
  border-radius:var(--r-lg);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 18px 40px -22px rgba(110,96,84,.45);
}

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass-nav{background:var(--c-bg)}
  .glass-panel{background:var(--c-surface)}
  .glass-on-photo{background:rgba(58,47,40,.88)}
}
@media (prefers-reduced-transparency:reduce){
  .glass-nav{background:var(--c-bg)}
  .glass-panel{background:var(--c-surface)}
  .glass-on-photo{background:rgba(58,47,40,.88)}
}

/* ---------- knoppen ---------- */

.btn{
  display:inline-flex; align-items:center; gap:var(--s-2);
  font-family:var(--f-body); font-size:var(--t-body); font-weight:600;
  letter-spacing:.01em; text-decoration:none; cursor:pointer;
  padding:.875rem 2rem; border-radius:var(--r-pill);
  border:1px solid transparent;
  transition:background var(--d-base) var(--e-out),
             color var(--d-base) var(--e-out),
             transform var(--d-base) var(--e-out),
             box-shadow var(--d-base) var(--e-out);
}
.btn-primary{background:var(--c-accent); color:#fff}
.btn-primary:hover{background:var(--c-accent-hover); transform:translateY(-2px); box-shadow:var(--sh-2)}

.btn-ghost{background:transparent; color:var(--c-accent); border-color:var(--c-accent)}
.btn-ghost:hover{background:var(--c-accent); color:#fff; transform:translateY(-2px)}

.on-photo .btn-ghost,.on-dark .btn-ghost{
  color:#fff; border-color:rgba(255,255,255,.55);
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.on-photo .btn-ghost:hover,.on-dark .btn-ghost:hover{
  background:rgba(255,255,255,.18); border-color:#fff;
}

.btn .arw{transition:transform var(--d-base) var(--e-out)}
.btn:hover .arw{transform:translateX(4px)}

/* ---------- secties ---------- */

section{position:relative}
.section{padding-block:var(--section-y)}
.section-dark{background:var(--c-dark); color:#fff}
.section-head{margin-bottom:var(--s-8); max-width:var(--maxw-text)}

/* ---------- fotoframe ---------- */

.frame{
  position:relative; overflow:hidden;
  border-radius:var(--r-md);
  aspect-ratio:4/5;
  box-shadow:var(--sh-2);
  background:var(--c-border);
}
.frame img{
  width:100%; height:100%; object-fit:cover;
  transition:transform var(--d-slow) var(--e-out);
}
.frame:hover img{transform:scale(1.04)}

/* ---------- footer ---------- */

.site-footer{
  background:var(--c-dark); color:rgba(255,255,255,.72);
  padding-block:var(--s-8) calc(var(--s-7) + env(safe-area-inset-bottom,0px));
  border-top:1px solid rgba(255,255,255,.12);
}

/* ---------- tekstpagina's (privacy) ---------- */
.legal{ padding-block:calc(var(--s-10) + env(safe-area-inset-top,0px)) var(--section-y); }
.legal-wrap{ max-width:44rem; }
.legal h1{ font-size:var(--t-h2); margin-bottom:var(--s-5); }
.legal h2{ font-size:var(--t-h3); margin:var(--s-8) 0 var(--s-3); }
.legal p,.legal li{ color:var(--c-ink-2); }
.legal .lead{ font-size:var(--t-lead); color:var(--c-ink); }
.legal ul{ padding-left:1.25rem; margin:var(--s-3) 0; }
.legal li + li{ margin-top:var(--s-2); }
.legal strong{ color:var(--c-ink); }
.legal a:not(.btn){ color:var(--c-accent); text-underline-offset:3px; }
.legal-meta{ font-size:var(--t-small); }
.legal .eyebrow{ color:var(--c-accent); }
.legal-back{ margin-top:var(--s-8); }
.site-footer a{ color:inherit; text-underline-offset:3px; }
.site-footer a:hover{ color:#fff; }