/* ============================================================
   Maison Noir — Tattoo Home Coming
   Black with white accents (yang) — counterpart: styles.css (yin)
   ============================================================ */

:root{
  --night:      #050505;   /* black base */
  --night-2:    #0d0d0d;   /* slightly lifted panel */
  --white:      #f2f2f0;   /* headings, accents */
  --soft:       #a8a8a5;   /* body text */
  --mute:       #6c6c69;   /* captions */
  --line:       rgba(255,255,255,.11);
  --on-image:   #f7f7f5;   /* RULE: text on photos always light */

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

  --pad: clamp(20px, 5vw, 80px);
  --maxw: 1320px;
  --ease: cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; background:var(--night); }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0; background:var(--night); color:var(--soft);
  font-family:var(--f-body); font-weight:300; line-height:1.7;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ display:block; max-width:100%; }
section[id]{ scroll-margin-top:64px; }   /* anchors land below the fixed nav */
::selection{ background:var(--white); color:var(--night); }

.grain{
  position:fixed; inset:0; z-index:2; pointer-events:none;
  opacity:.07; mix-blend-mode:screen;
  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:24px var(--pad);
  transition:background .5s ease, padding .5s ease, box-shadow .5s ease;
}
.nav.is-scrolled{
  background:rgba(5,5,5,.78); backdrop-filter:blur(10px);
  padding:15px var(--pad); box-shadow:0 1px 0 var(--line);
}
.nav__brand{
  font-family:var(--f-display); font-weight:400;
  font-size:1.05rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--white); text-decoration:none; white-space:nowrap;
}
.nav__links{ display:flex; align-items:center; gap:clamp(16px,3vw,40px); }
.nav__links a{
  color:var(--soft); text-decoration:none;
  font-size:.74rem; letter-spacing:.2em; text-transform:uppercase;
  position:relative; padding:4px 0; transition:color .3s ease;
}
.nav__links a:hover{ color:var(--white); }
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--white); transition:width .4s var(--ease);
}
.nav__links a:hover::after{ width:100%; }
/* link back to Chriz Noir: small white dot — the "yang" point */
.nav__home{ white-space:nowrap; }
.nav__home::before{
  content:""; display:inline-block; width:7px; height:7px; border-radius:50%;
  background:var(--white); margin-right:8px; vertical-align:middle; transform:translateY(-1px);
}

/* ---------------------------------------------------------- HERO */
.hero{
  position:relative; min-height:100svh; overflow:hidden;
  display:flex; align-items:center; justify-content:center; text-align:center;
  padding:var(--pad);
}
.hero__media{ position:absolute; inset:-10% 0; z-index:0; will-change:transform; }
.hero__media img{
  width:100%; height:100%; object-fit:cover; object-position:50% 45%;
  filter:grayscale(1) brightness(.62) contrast(1.1);
  opacity:0; transition:opacity 2.4s ease .3s;
  /* the photo is only visible where the "light" falls */
  -webkit-mask-image:radial-gradient(circle at var(--lx,50%) var(--ly,50%), #000 0, rgba(0,0,0,.55) 16%, rgba(0,0,0,.12) 42%, rgba(0,0,0,.04) 70%);
          mask-image:radial-gradient(circle at var(--lx,50%) var(--ly,50%), #000 0, rgba(0,0,0,.55) 16%, rgba(0,0,0,.12) 42%, rgba(0,0,0,.04) 70%);
}
.hero.is-ready .hero__media img{ opacity:1; }
.hero__media::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse at center, transparent 30%, rgba(5,5,5,.85) 100%);
}
.hero__inner{ position:relative; z-index:1; }
.hero__eyebrow{
  margin:0 0 clamp(18px,3vh,30px);
  font-size:.72rem; letter-spacing:.42em; text-transform:uppercase; color:var(--on-image); opacity:.7;
}
.hero__title{
  margin:0; font-family:var(--f-display); font-weight:300;
  font-size:clamp(2.6rem, 9vw, 8.4rem); line-height:1;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--on-image); text-shadow:0 4px 40px rgba(0,0,0,.6);
  padding-left:.16em;   /* optically re-centre the trailing letter-spacing */
}
.hero__sub{
  margin:clamp(20px,3.5vh,34px) 0 0;
  font-family:var(--f-display); font-style:italic; font-weight:300;
  font-size:clamp(1.2rem,2.4vw,1.7rem); color:var(--on-image);
  text-shadow:0 2px 20px rgba(0,0,0,.6);
}
.hero__foot{
  position:absolute; left:0; right:0; bottom:clamp(24px,5vh,48px); z-index:1; margin:0;
  font-size:.68rem; letter-spacing:.3em; text-transform:uppercase; color:var(--on-image); opacity:.55;
}

/* ---------------------------------------------------------- SHARED TYPE */
.label{
  margin:0; font-size:.7rem; letter-spacing:.36em; text-transform:uppercase; color:var(--mute);
}
.heading{
  margin:18px 0 0; font-family:var(--f-display); font-weight:300;
  font-size:clamp(2.2rem,5vw,4.2rem); line-height:1.05; letter-spacing:.01em; color:var(--white);
}

/* ---------------------------------------------------------- STATEMENT */
.statement{
  padding:clamp(110px,22vh,260px) var(--pad);
  max-width:var(--maxw); margin-inline:auto; text-align:center;
}
.statement__text{
  margin:0 auto; font-family:var(--f-display); font-weight:300;
  font-size:clamp(1.7rem,4vw,3.3rem); line-height:1.22; color:var(--white);
}
.statement__text span{ display:block; }
.reveal-line--muted{ color:var(--mute); font-style:italic; }

/* ---------------------------------------------------------- PRINZIP */
.principle{
  max-width:var(--maxw); margin-inline:auto;
  padding:clamp(50px,10vh,120px) var(--pad) clamp(90px,16vh,200px);
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,6vw,110px);
  border-top:1px solid var(--line);
}
.principle__body p{ margin:0 0 22px; font-size:1.08rem; max-width:54ch; }
.principle__body p:first-child{ margin-top:clamp(0px,4vh,46px); }

.pillars{
  grid-column:1 / -1; list-style:none; margin:clamp(40px,8vh,90px) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,4vw,60px);
}
.pillar{ padding-top:28px; border-top:1px solid var(--line); }
.pillar__num{ font-family:var(--f-display); font-style:italic; font-size:1.1rem; color:var(--mute); }
.pillar__title{
  margin:10px 0 12px; font-family:var(--f-display); font-weight:400;
  font-size:clamp(1.5rem,2.4vw,2rem); color:var(--white); letter-spacing:.02em;
}
.pillar p{ margin:0; font-size:.98rem; }

/* ---------------------------------------------------------- EINDRÜCKE */
.impressions{
  max-width:var(--maxw); margin-inline:auto;
  padding:clamp(60px,12vh,140px) var(--pad) clamp(90px,16vh,200px);
}
.impressions__head{ text-align:center; margin-bottom:clamp(60px,12vh,140px); }
.impressions__note{
  margin:26px auto 0; max-width:46ch;
  font-family:var(--f-display); font-style:italic; font-size:clamp(1.05rem,1.6vw,1.3rem); color:var(--mute);
}

/* asymmetric composition — images step out of the dark one by one */
.shadows{
  display:grid; grid-template-columns:repeat(12,1fr);
  column-gap:clamp(12px,2vw,28px); row-gap:clamp(40px,9vh,110px);
  align-items:start;
}
.shade{ margin:0; position:relative; }
.shade--a{ grid-column:1 / 6; }
.shade--b{ grid-column:8 / 12; margin-top:22vh; }
.shade--c{ grid-column:4 / 10; }
.shade--d{ grid-column:2 / 6; }
.shade--e{ grid-column:7 / 13; margin-top:16vh; }

.shade__frame{ overflow:hidden; border-radius:1px; background:var(--night-2); }
.shade--a .shade__frame{ aspect-ratio:3/4; }
.shade--b .shade__frame{ aspect-ratio:4/5; }
.shade--c .shade__frame{ aspect-ratio:16/10; }
.shade--d .shade__frame{ aspect-ratio:4/5; }
.shade--e .shade__frame{ aspect-ratio:5/6; }

.shade__frame img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.1); will-change:transform;
  filter:grayscale(1) brightness(.28) contrast(1.15);
  transition:filter 1.8s ease;
}
.shade.is-lit .shade__frame img,
.shade:hover .shade__frame img{ filter:grayscale(1) brightness(.92) contrast(1.08); }
.shade--c .shade__frame img{ object-position:50% 38%; }
.shade--b .shade__frame img{ object-position:50% 40%; }

.shade figcaption{
  margin-top:14px; font-family:var(--f-display); font-style:italic;
  font-size:1rem; color:var(--mute); letter-spacing:.1em;
}
.shade--b figcaption, .shade--e figcaption{ text-align:right; }

/* ---------------------------------------------------------- DER WEG */
.path{
  max-width:980px; margin-inline:auto;
  padding:clamp(60px,12vh,140px) var(--pad) clamp(90px,16vh,190px);
  border-top:1px solid var(--line);
}
.path__steps{ list-style:none; margin:clamp(30px,6vh,60px) 0 0; padding:0; }
.step{
  display:grid; grid-template-columns:clamp(60px,10vw,120px) 1fr; align-items:baseline;
  padding:clamp(22px,4vh,36px) 0; border-bottom:1px solid var(--line);
}
.step__num{ font-family:var(--f-display); font-style:italic; font-size:clamp(1.3rem,2vw,1.7rem); color:var(--mute); }
.step h3{
  margin:0 0 6px; font-family:var(--f-display); font-weight:400;
  font-size:clamp(1.6rem,3vw,2.3rem); color:var(--white); line-height:1.1;
}
.step p{ margin:0; font-size:1rem; max-width:52ch; }

/* ---------------------------------------------------------- ANFRAGE */
.inquiry{
  background:var(--night-2);
  padding:clamp(90px,16vh,200px) var(--pad);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.inquiry__inner{ max-width:720px; margin-inline:auto; }
.inquiry__title{
  margin:0; font-family:var(--f-display); font-weight:300;
  font-size:clamp(2.6rem,7vw,5.2rem); line-height:1; color:var(--white);
}
.inquiry__lead{ margin:24px 0 50px; font-size:1.08rem; max-width:50ch; }

.reach__label{ margin:0; font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--mute); }
.reach__list{
  list-style:none; margin:14px 0 40px; padding:0;
  display:flex; flex-wrap:wrap; gap:10px;
}
.reach__list li{
  font-size:.82rem; padding:8px 16px; border:1px solid var(--line); border-radius:100px; color:var(--soft);
}
.reach__buttons{ display:flex; flex-wrap:wrap; gap:14px; }

.btn{
  align-self:flex-start; margin-top:8px;
  font-family:var(--f-body); font-size:.76rem; letter-spacing:.24em; text-transform:uppercase;
  padding:17px 38px; border-radius:100px; cursor:pointer;
  background:var(--white); color:var(--night); border:1px solid var(--white);
  transition:background .35s ease, color .35s ease, transform .35s ease;
}
.btn{ display:inline-flex; text-decoration:none; }
.btn:hover{ background:transparent; color:var(--white); transform:translateY(-2px); }
.btn--ghost{ background:transparent; color:var(--white); border-color:rgba(255,255,255,.35); }
.btn--ghost:hover{ background:var(--white); color:var(--night); border-color:var(--white); }
.form__note{ margin:26px 0 0; font-size:.85rem; color:var(--mute); }
.form__note a{ color:var(--soft); text-underline-offset:3px; }
.form__note a:hover{ color:var(--white); }

/* ---------------------------------------------------------- HOME TEASER
   the white point inside the black page (yin-yang) */
.home-teaser{ display:flex; justify-content:center; padding:clamp(90px,18vh,220px) var(--pad); }
.yy-circle{
  width:min(80vw, 420px); aspect-ratio:1; border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  gap:12px; padding:12%;
  background:#ffffff; color:#0b0b0b; text-decoration:none;
  box-shadow:0 0 120px -30px rgba(255,255,255,.18);
}
.yy-circle.is-in{ transition:opacity 1.2s ease, transform .7s var(--ease), box-shadow .7s ease; }
.yy-circle.is-in:hover{ transform:scale(1.03); box-shadow:0 0 160px -20px rgba(255,255,255,.28); }
.yy-circle__eyebrow{ font-size:.66rem; letter-spacing:.32em; text-transform:uppercase; color:#8a8a8a; }
.yy-circle__title{
  font-family:"Fraunces", var(--f-display); font-weight:400;
  font-size:clamp(1.9rem,5vw,2.8rem); line-height:1;
}
.yy-circle__noir{ color:#8a8a8a; }
.yy-circle__text{ font-size:clamp(.84rem,1.4vw,.95rem); color:#555; max-width:26ch; line-height:1.5; }
.yy-circle__cta{
  margin-top:6px; font-size:.7rem; letter-spacing:.26em; text-transform:uppercase;
  padding-bottom:4px; border-bottom:1px solid rgba(0,0,0,.35);
}

/* ---------------------------------------------------------- FOOTER */
.footer{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;
  padding:34px var(--pad); border-top:1px solid var(--line);
}
.footer__brand{ font-family:var(--f-display); letter-spacing:.3em; text-transform:uppercase; color:var(--white); font-size:.95rem; }
.footer__line{ margin:0; font-family:var(--f-display); font-style:italic; font-size:1.05rem; color:var(--mute); }
.footer__muted{ font-size:.8rem; color:var(--mute); }
.footer__muted a{ color:inherit; text-decoration:none; transition:color .3s ease; }
.footer__muted a:hover{ color:var(--white); }

/* ---------------------------------------------------------- REVEAL */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity 1.2s ease var(--d,0s), transform 1.2s var(--ease) var(--d,0s); }
.reveal.is-in{ opacity:1; transform:none; }
.reveal-line{ opacity:0; transform:translateY(16px); filter:blur(4px); transition:opacity 1.2s ease, transform 1.2s var(--ease), filter 1.2s ease; }
.reveal-line.is-in{ opacity:1; transform:none; filter:none; }

/* ---------------------------------------------------------- RESPONSIVE */
@media (max-width: 900px){
  .principle{ grid-template-columns:1fr; }
  .pillars{ grid-template-columns:1fr; }
  .shadows{ grid-template-columns:repeat(6,1fr); }
  .shade--a{ grid-column:1 / 6; }
  .shade--b{ grid-column:2 / 7; margin-top:0; }
  .shade--c{ grid-column:1 / 7; }
  .shade--d{ grid-column:1 / 5; }
  .shade--e{ grid-column:2 / 7; margin-top:0; }
}
@media (max-width: 560px){
  .nav{ padding:18px 20px; }
  .nav.is-scrolled{ padding:13px 20px; }
  .nav__brand{ font-size:.9rem; letter-spacing:.26em; }
  .nav__links{ gap:16px; }
  .nav__links a{ font-size:.66rem; letter-spacing:.12em; }
  .hide-sm{ display:none; }
  .hero__title{ letter-spacing:.1em; padding-left:.1em; }
  .footer{ flex-direction:column; text-align:center; }
}