/* ============================================================
   Chriz Noir — Tattoo
   White with black accents (yin) — counterpart: maison.css (yang)
   ============================================================ */

:root{
  --paper:        #ffffff;   /* white base */
  --paper-2:      #f3f3f2;   /* light panel */
  --paper-deep:   #f0f0ef;   /* contact panel */
  --ink:          #0b0b0b;   /* black */
  --ink-soft:     #3a3a3a;   /* body text */
  --ink-mute:     #8a8a8a;   /* muted captions */
  --line:         #e2e2e0;   /* hairlines */
  --accent:       #0b0b0b;   /* black accent */
  --on-image:     #fafafa;   /* RULE: text on top of photos is always light, never dark ink */
  --shadow:       26px 40px 80px -50px rgba(0,0,0,.45);

  --f-display: "Fraunces", Georgia, "Times New Roman", serif;
  --f-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --pad: clamp(20px, 5vw, 80px);
  --maxw: 1400px;
}

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

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-body);
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

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

/* subtle film grain over everything */
.grain{
  position:fixed; inset:0; z-index:2; pointer-events:none;
  opacity:.035; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------- NAV */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px var(--pad);
  mix-blend-mode:normal;
  transition:background .4s ease, padding .4s ease, box-shadow .4s ease;
}
/* soft paper-coloured fade behind the nav so the links stay readable
   even where the hero photo runs up to the top edge (text-on-image rule) */
.nav::before{
  content:""; position:absolute; left:0; right:0; top:0; bottom:-48px; z-index:-1;
  pointer-events:none;
  background:linear-gradient(to bottom, rgba(255,255,255,.95) 0%, rgba(255,255,255,.74) 55%, rgba(255,255,255,0) 100%);
  transition:opacity .4s ease;
}
.nav.is-scrolled::before{ opacity:0; }
.nav.is-scrolled{
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(10px);
  padding:14px var(--pad);
  box-shadow:0 1px 0 var(--line);
}
.nav__brand{
  font-family:var(--f-display);
  font-size:1.35rem; font-weight:500; letter-spacing:.02em;
  color:var(--ink); text-decoration:none;
}
.nav__brand, .footer__brand{ white-space:nowrap; }
.brand-noir{ color:var(--ink-mute); }
/* Maison Noir link: small black dot in front — the "yin" point */
.nav__maison::before{
  content:""; display:inline-block; width:7px; height:7px; border-radius:50%;
  background:var(--ink); margin-right:8px; vertical-align:middle; transform:translateY(-1px);
}
.nav__links{ display:flex; gap:clamp(16px,3vw,38px); }
.nav__links a{
  color:var(--ink-soft); text-decoration:none;
  font-size:.82rem; letter-spacing:.14em; text-transform:uppercase;
  position:relative; padding:4px 0;
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--accent); transition:width .35s ease;
}
.nav__links a:hover::after{ width:100%; }

/* ---------------------------------------------------------- HERO */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:flex-end;
  padding:var(--pad);
  padding-bottom:clamp(48px,9vh,120px);
  overflow:hidden;
}
.hero__media{
  position:absolute; inset:-8% 0 -8% auto;
  right:0; width:min(46vw,620px); height:116%;
  z-index:0; will-change:transform;
}
.hero__media img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.06); }  /* header photo: pure black & grey */
.hero__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, var(--paper) 0%, rgba(255,255,255,.2) 40%, transparent 100%);
}
.hero__inner{ position:relative; z-index:1; max-width:min(760px,70vw); }
.hero__eyebrow{
  font-size:.8rem; letter-spacing:.32em; text-transform:uppercase;
  color:var(--accent); margin:0 0 clamp(18px,3vh,30px);
}
.hero__title{
  font-family:var(--f-display);
  font-weight:300;
  font-size:clamp(3rem, 9.5vw, 10rem);   /* full size on wide screens; 9.5vw keeps "Kunsthandwerk," clear of the hero photo on mid-size screens */
  line-height:.94; letter-spacing:-.02em;
  margin:0; color:var(--ink);
}
.hero__title span{ display:block; }
.hero__sub{
  margin:clamp(24px,4vh,40px) 0 0;
  max-width:44ch; font-size:1.08rem; color:var(--ink-soft);
}
.hero__scroll{
  position:absolute; left:var(--pad); bottom:clamp(20px,4vh,40px); z-index:1;
  display:flex; align-items:center; gap:12px;
  color:var(--ink-mute); text-decoration:none;
  font-size:.72rem; letter-spacing:.24em; text-transform:uppercase;
}
.hero__scroll i{ width:44px; height:1px; background:var(--ink-mute); position:relative; overflow:hidden; }
.hero__scroll i::after{
  content:""; position:absolute; inset:0; width:40%; background:var(--accent);
  animation:slide 2.4s cubic-bezier(.7,0,.3,1) infinite;
}
@keyframes slide{ 0%{transform:translateX(-120%)} 60%,100%{transform:translateX(320%)} }

/* ---------------------------------------------------------- INTRO */
.intro{
  padding:clamp(90px,16vh,220px) var(--pad);
  max-width:var(--maxw); margin-inline:auto;
}
.intro__text{
  font-family:var(--f-display); font-weight:300;
  font-size:clamp(1.7rem,4.2vw,3.4rem);
  line-height:1.18; letter-spacing:-.01em; margin:0; color:var(--ink);
  max-width:20ch;
}
.intro__text span{ display:block; }
.reveal-line{
  color:var(--ink);
}
.reveal-line--muted{ color:var(--ink-mute); }

/* ---------------------------------------------------------- SECTION TITLE */
.section-title{
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(.9rem,1.4vw,1.05rem);
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--accent); margin:0;
}

/* ---------------------------------------------------------- WORKS */
.works{ padding:0 var(--pad) clamp(40px,8vh,100px); max-width:var(--maxw); margin-inline:auto; }
.works__head{ padding:clamp(30px,6vh,70px) 0; border-top:1px solid var(--line); }

.work{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(30px,5vw,90px);
  align-items:start;
  padding:clamp(60px,12vh,150px) 0;
}
.work--flip .work__media{ order:2; }

/* sticky media: image "holds" while text scrolls past */
.work__media{ position:relative; }
.work__sticky{
  position:sticky; top:12vh;
  height:76vh;
  border-radius:2px;
  overflow:hidden;
  box-shadow:var(--shadow);
  background:var(--paper-2);
}
.work__sticky img{
  width:100%; height:100%; object-fit:cover;
  will-change:transform;
  transform:scale(1.08); /* slight overscan for parallax drag */
  filter:saturate(.94);
}
.work__index{
  position:absolute; top:16px; left:18px; z-index:2;
  font-family:var(--f-display); font-size:.8rem; letter-spacing:.2em;
  color:rgba(255,255,255,.85); mix-blend-mode:difference;
}

.work__text{
  padding-top:6vh;
  display:flex; flex-direction:column; gap:22px;
  min-height:120vh;               /* gives the sticky image room to "hold" */
  justify-content:center;
}
.work__kicker{
  font-size:.75rem; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-mute);
  margin:0;
}
.work__name{
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(2rem,4.5vw,3.6rem); line-height:1.02; letter-spacing:-.015em;
  margin:0; color:var(--ink);
}
.work__desc{ font-size:1.05rem; color:var(--ink-soft); max-width:46ch; margin:0; }
.work__meta{
  display:flex; gap:26px; flex-wrap:wrap; margin-top:8px;
  padding-top:20px; border-top:1px solid var(--line);
}
.work__meta div{ display:flex; flex-direction:column; gap:3px; }
.work__meta dt{ font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-mute); }
.work__meta dd{ margin:0; font-size:.95rem; color:var(--ink); }

/* ---------------------------------------------------------- GALLERY MOSAIC */
.gallery-head{ padding:clamp(30px,6vh,60px) 0 8px; border-top:1px solid var(--line); margin-top:clamp(30px,6vh,70px); }
.gallery{
  columns: 3;
  column-gap: clamp(10px, 1.4vw, 18px);
  margin-top:26px;
}
.gallery__item{
  margin:0 0 clamp(10px,1.4vw,18px);
  break-inside:avoid;
  overflow:hidden;
  border-radius:2px;
  background:var(--paper-2);
  cursor:pointer;
  position:relative;
}
.gallery__item img{
  width:100%; height:auto; display:block;
  transition:transform .8s cubic-bezier(.2,.7,.2,1), filter .5s ease;
  filter:saturate(.95);
}
.gallery__item::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(0,0,0,.18), transparent 45%);
  opacity:0; transition:opacity .4s ease;
}
.gallery__item:hover img{ transform:scale(1.05); }
.gallery__item:hover::after{ opacity:1; }

@media (max-width: 900px){ .gallery{ columns:2; } }
@media (max-width: 520px){ .gallery{ columns:1; } }

/* ---------------------------------------------------------- LIGHTBOX */
.lightbox{
  position:fixed; inset:0; z-index:100;
  display:flex; align-items:center; justify-content:center;
  background:rgba(6,6,6,.94); backdrop-filter:blur(6px);
  opacity:0; pointer-events:none; transition:opacity .35s ease;
  padding:clamp(20px,5vw,70px);
}
.lightbox.is-open{ opacity:1; pointer-events:auto; }
.lightbox__img{
  max-width:100%; max-height:100%;
  object-fit:contain; border-radius:2px;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.8);
  transform:scale(.96); transition:transform .35s ease;
}
.lightbox.is-open .lightbox__img{ transform:scale(1); }
.lightbox__close, .lightbox__nav{
  position:absolute; background:none; border:none; color:#f2f2f2; cursor:pointer;
  font-size:2.6rem; line-height:1; padding:14px; opacity:.7; transition:opacity .3s ease;
}
.lightbox__close:hover, .lightbox__nav:hover{ opacity:1; }
.lightbox__close{ top:14px; right:20px; font-size:2.2rem; }
.lightbox__nav--prev{ left:8px; top:50%; transform:translateY(-50%); }
.lightbox__nav--next{ right:8px; top:50%; transform:translateY(-50%); }
@media (max-width:560px){ .lightbox__nav{ font-size:2rem; } }

/* ---------------------------------------------------------- INTERLUDE */
.interlude{
  position:relative; height:100svh; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  margin:clamp(20px,5vh,60px) 0;
}
.interlude__media{ position:absolute; inset:-12% 0; z-index:0; will-change:transform; }
.interlude__media img{ width:100%; height:100%; object-fit:cover; filter:brightness(.86) saturate(.9); }
.interlude__media::after{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.42); }
.interlude__quote{
  position:relative; z-index:1; margin:0; padding:0 var(--pad);
  font-family:var(--f-display); font-weight:300;
  font-size:clamp(1.8rem,4.4vw,3.6rem); line-height:1.15; text-align:center;
  color:var(--on-image); max-width:22ch;
  text-shadow:0 2px 18px rgba(0,0,0,.45);
}
.interlude__quote span{ display:block; }
/* the line spans must not inherit the dark ink colour used elsewhere */
.interlude__quote .reveal-line,
.interlude__quote .reveal-line--muted{ color:var(--on-image); }

/* ---------------------------------------------------------- ABOUT */
.about{
  display:grid; grid-template-columns:0.9fr 1.1fr;
  gap:clamp(30px,6vw,100px);
  align-items:center;
  padding:clamp(80px,14vh,180px) var(--pad);
  max-width:var(--maxw); margin-inline:auto;
}
/* layered portrait composition: calm profile as main, "at work" shot overlapping */
.about__media{ position:relative; padding-bottom:12%; }
.about__img{ border-radius:2px; overflow:hidden; box-shadow:var(--shadow); background:var(--paper-2); }
.about__img img{ width:100%; height:100%; object-fit:cover; transform:scale(1.08); will-change:transform; }
.about__img--main{ aspect-ratio:4/5; }
.about__img--aside{
  position:absolute; right:-4%; bottom:0; width:44%; aspect-ratio:3/4;
  border:6px solid var(--paper);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.5);
}
.about__text p{ font-size:1.1rem; color:var(--ink-soft); max-width:52ch; margin:18px 0 0; }
.about__text .section-title{ margin-bottom:10px; }
.about__tags{
  list-style:none; display:flex; flex-wrap:wrap; gap:10px; padding:0; margin:34px 0 0;
}
.about__tags li{
  font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
  padding:8px 16px; border:1px solid var(--line); border-radius:100px; color:var(--ink-soft);
}

/* ---------------------------------------------------------- MAISON NOIR TEASER
   the black point inside the white page (yin-yang) */
.maison-teaser{
  display:flex; justify-content:center;
  padding:clamp(40px,10vh,120px) var(--pad) clamp(80px,14vh,170px);
}
.yy-circle{
  position:relative;
  width:min(84vw, 540px); aspect-ratio:1; border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  gap:14px; padding:12%;
  background:var(--ink); color:#f5f5f3; text-decoration:none;
  box-shadow:0 40px 90px -50px rgba(0,0,0,.7);
}
.yy-circle.is-in{ transition:opacity .9s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.yy-circle.is-in:hover{ transform:scale(1.025); }
.yy-circle__eyebrow{ font-size:.68rem; letter-spacing:.34em; text-transform:uppercase; color:#8f8f8f; }
.yy-circle__title{
  font-family:"Cormorant Garamond", var(--f-display); font-weight:300;
  font-size:clamp(1.9rem,5.4vw,3.4rem); line-height:1; letter-spacing:.14em; text-transform:uppercase;
  margin:0;
}
.yy-circle__text{ margin:0; font-size:clamp(.84rem,1.4vw,1rem); color:#bdbdbd; max-width:30ch; line-height:1.55; }
.yy-circle__cta{
  margin-top:8px; font-size:.72rem; letter-spacing:.26em; text-transform:uppercase;
  padding-bottom:4px; border-bottom:1px solid rgba(255,255,255,.4);
}

/* ---------------------------------------------------------- CONTACT */
.contact{
  background:var(--paper-deep);
  padding:clamp(80px,14vh,180px) var(--pad);
  border-top:1px solid var(--line);
}
.contact__inner{ max-width:720px; margin-inline:auto; }
.contact__title{
  font-family:var(--f-display); font-weight:300;
  font-size:clamp(2.6rem,7vw,5rem); line-height:1; letter-spacing:-.02em;
  margin:0; color:var(--ink);
}
.contact__lead{ font-size:1.1rem; color:var(--ink-soft); max-width:48ch; margin:22px 0 44px; }
.contact__note{ font-size:.92rem; color:var(--ink-mute); max-width:54ch; margin:-28px 0 44px; }

.form{ display:flex; flex-direction:column; gap:22px; }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.form__hp{ position:absolute; left:-9999px; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field span{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-mute); }
.field input, .field textarea{
  font-family:var(--f-body); font-size:1rem; color:var(--ink);
  background:transparent; border:none; border-bottom:1px solid var(--line);
  padding:10px 2px; transition:border-color .3s ease;
  resize:vertical;
}
.field input::placeholder, .field textarea::placeholder{ color:#b0b0b0; }
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--accent); }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-size:.82rem; letter-spacing:.16em; text-transform:uppercase;
  padding:16px 34px; border-radius:100px; text-decoration:none; cursor:pointer;
  transition:transform .3s ease, background .3s ease, color .3s ease, border-color .3s ease;
  border:1px solid var(--ink);
}
.btn--solid{ background:var(--ink); color:var(--paper); align-self:flex-start; font-family:var(--f-body); }
.btn--solid:hover{ transform:translateY(-2px); background:var(--paper); color:var(--ink); }
.btn--ghost{ background:transparent; color:var(--ink); }
.btn--ghost:hover{ background:var(--ink); color:var(--paper); transform:translateY(-2px); }

.contact__direct{ margin-top:52px; padding-top:34px; border-top:1px solid var(--line); }
.contact__or{ font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-mute); }
.contact__buttons{ display:flex; gap:14px; margin-top:16px; flex-wrap:wrap; }

/* ---------------------------------------------------------- FOOTER */
.footer{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;
  padding:34px var(--pad);
  font-family:var(--f-display);
}
.footer__muted{ font-family:var(--f-body); font-size:.82rem; color:var(--ink-mute); letter-spacing:.04em; }
.footer__quote{
  margin:0; flex:1; text-align:center;
  font-family:var(--f-display); font-style:italic; font-weight:300;
  font-size:clamp(.95rem, 1.3vw, 1.15rem); line-height:1.4;
  color:var(--ink-soft); padding:0 24px;
}
@media (max-width: 700px){
  .footer{ flex-direction:column; text-align:center; gap:14px; }
  .footer__quote{ padding:0; max-width:34ch; margin-inline:auto; }
}

/* ---------------------------------------------------------- REVEAL ANIM */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .9s ease var(--d,0s), transform .9s cubic-bezier(.2,.7,.2,1) var(--d,0s); }
.reveal.is-in{ opacity:1; transform:none; }

.reveal-line{ opacity:0; transform:translateY(18px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal-line.is-in{ opacity:1; transform:none; }

/* ---------------------------------------------------------- RESPONSIVE */
@media (max-width: 900px){
  .nav__links{ gap:18px; }
  .work{ grid-template-columns:1fr; gap:24px; padding:56px 0; }
  .work--flip .work__media{ order:0; }
  .work__sticky{ position:relative; top:0; height:auto; aspect-ratio:4/5; }
  .work__sticky img{ transform:none; }
  .work__text{ min-height:0; padding-top:0; gap:18px; }
  .about{ grid-template-columns:1fr; }
  .about__media{ padding-bottom:14%; }
  .about__img img{ transform:none; }
  .hero__media{ width:70vw; opacity:.55; }
  .form__row{ grid-template-columns:1fr; }
  .interlude{ height:80svh; }
}
@media (max-width: 560px){
  .nav{ padding:16px 20px; flex-wrap:wrap; row-gap:6px; }
  .nav__brand{ font-size:1.1rem; }
  .nav__links{ gap:14px; }
  .hide-sm{ display:none; }
  .nav__links a{ font-size:.68rem; letter-spacing:.06em; }
}
@media (max-width: 400px){
  .nav__brand{ font-size:1rem; }
  .nav__links{ gap:12px; }
  .nav__links a{ font-size:.64rem; letter-spacing:.05em; }
  .hero__media{ width:100vw; opacity:.4; }
}

/* ---------------------------------------------------------- LEGAL PAGES (Impressum / Datenschutz) */
.footer__muted a{ color:inherit; text-decoration:none; border-bottom:1px solid transparent; transition:border-color .3s ease, color .3s ease; }
.footer__muted a:hover{ color:var(--ink); border-color:var(--ink); }
.legal-page .footer{ border-top:1px solid var(--line); }
.legal{
  max-width:760px; margin-inline:auto;
  padding:clamp(120px,18vh,180px) var(--pad) clamp(70px,12vh,120px);
}
.legal__title{
  font-family:var(--f-display); font-weight:300;
  font-size:clamp(2.6rem,7vw,4.6rem); line-height:1; letter-spacing:-.02em;
  color:var(--ink); margin:18px 0 0;
}
.legal .legal__lead{ font-size:1.05rem; color:var(--ink-mute); max-width:56ch; margin:22px 0 46px; }
.legal h2{
  font-family:var(--f-body); font-weight:500; font-size:.74rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink); margin:40px 0 12px; padding-top:22px; border-top:1px solid var(--line);
}
.legal p{ font-size:1rem; color:var(--ink-soft); margin:0 0 12px; max-width:64ch; }
.legal strong{ font-weight:500; color:var(--ink); }
.legal__link{ color:var(--ink); text-underline-offset:3px; }
.legal__stand{ margin-top:44px !important; font-size:.85rem !important; color:var(--ink-mute) !important; }
.ph{ background:#fff3b0; padding:0 4px; }   /* placeholder: must be filled in before going live */
.form__privacy{ margin:-6px 0 0; font-size:.82rem; color:var(--ink-mute); }
.form__privacy a{ color:var(--ink-soft); text-underline-offset:3px; }