/* ─────────────────────────────────────────────────────────────────
   Cat's Eye Tattoo & Nail — Denneweg 6, Den Haag

   This one deliberately breaks with the two tattoo builds. Those are dark
   rooms: black ground, white type, photos drained to grey so twenty phone
   snaps read as one set. Wrong instrument here, for two reasons.

   1. On a nail site the colour IS the product. A pastel half-dip and a
      green cat-eye with goldfish on it are two different sales. Drain them
      and you have deleted the catalogue.
   2. Her own surfaces are light: hand-drawn black line art on white, a
      mincho-ish hand, lots of air. The shop sign is the only black thing
      about her, and that is the street's doing, not hers.

   So: warm paper, sumi ink rather than pure black, two quiet accents taken
   off her own work (the indigo in the peony sleeve, the beni red in the
   chrysanthemum), and space. Japanese layout is mostly about the space.
   ───────────────────────────────────────────────────────────────── */

:root{
  --paper:#F7F3EC;        /* warm rice paper, the page */
  --paper2:#EFE9DF;       /* alternating band */
  --card:#FCFAF6;
  --ink:#23201E;          /* sumi. Pure #000 is harsh on cream */
  --ink2:#7C746C;
  --line:rgba(35,32,30,.13);
  --ai:#3F5B6B;           /* indigo, off the peony sleeve */
  --beni:#C4664F;         /* the red in the chrysanthemum */
  --accent:var(--ai);

  --mincho:"Shippori Mincho",'Hiragino Mincho ProN',Georgia,serif;
  --gothic:"Zen Kaku Gothic New",'Hiragino Sans',system-ui,sans-serif;
  --mono:"DM Mono",ui-monospace,Menlo,monospace;

  --wrap:1180px;
  --ease:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body.nav-open{overflow:hidden}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--gothic);font-size:17px;line-height:1.75;
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{font-family:var(--mincho);font-weight:500;line-height:1.18;margin:0;
  letter-spacing:.005em}
em.i{font-style:normal;color:var(--beni)}

.wrap{width:min(100% - 2.6rem,var(--wrap));margin-inline:auto}
.t-xl{font-size:clamp(2.1rem,5.4vw,3.9rem)}
.t-lg{font-size:clamp(1.65rem,3.4vw,2.5rem)}
.lead{font-size:1.05rem;color:#3B3632;max-width:62ch}
.lbl{font-family:var(--mono);font-size:.6rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--ink2);display:block}
.sec{padding:clamp(3.4rem,8vh,6.4rem) 0}
.sec--alt{background:var(--paper2)}
.sec__hd{margin-bottom:clamp(1.6rem,3vw,2.6rem)}
.sec__hd h2{margin-top:.7rem}

/* a single hairline as a section divider, the way a mincho page uses a rule */
.rule{height:1px;background:var(--line);border:0;margin:0}

/* buttons ───────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.78rem 1.5rem;
  border:1px solid var(--ink);border-radius:999px;text-decoration:none;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;transition:.35s var(--ease);background:transparent}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn--solid{background:var(--ink);color:var(--paper)}
.btn--solid:hover{background:var(--ai);border-color:var(--ai);color:#fff}

/* topbar ────────────────────────────────────────────────────────── */
.topbar{position:sticky;top:0;z-index:60;background:rgba(247,243,236,.86);
  border-bottom:1px solid transparent;transition:.4s var(--ease)}
@supports (backdrop-filter:blur(8px)){.topbar{backdrop-filter:blur(10px)}}
.topbar.on{border-bottom-color:var(--line)}
.topbar__in{display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:.7rem 0;width:min(100% - 2.6rem,var(--wrap));margin-inline:auto}
.topbar__mark{display:flex;align-items:center;gap:.6rem;text-decoration:none}
.topbar__mark svg{width:34px;height:auto}
.topbar__mark span{font-family:var(--mincho);font-size:1rem;letter-spacing:.02em}
.topbar__nav{display:flex;gap:1.7rem;align-items:center}
.topbar__nav a{text-decoration:none;font-size:.86rem;color:#4A443F;
  transition:color .3s;position:relative}
.topbar__nav a:hover,.topbar__nav a[aria-current]{color:var(--ink)}
.topbar__nav a[aria-current]::after{content:"";position:absolute;left:0;right:0;
  bottom:-5px;height:1px;background:var(--beni)}
.burg{display:none;background:none;border:0;padding:.4rem;cursor:pointer}
.burg i{display:block;width:22px;height:1px;background:var(--ink);margin:5px 0}

.sheet{position:fixed;inset:0;z-index:70;background:var(--paper);
  transform:translateY(-100%);transition:transform .5s var(--ease);
  display:flex;flex-direction:column;justify-content:center;padding:2rem}
.sheet.on{transform:none}
.sheet a{font-family:var(--mincho);font-size:1.9rem;text-decoration:none;
  padding:.5rem 0;border-bottom:1px solid var(--line)}
.sheet__x{position:absolute;top:1.2rem;right:1.4rem;background:none;border:0;
  font-size:1.8rem;cursor:pointer;color:var(--ink);line-height:1}

/* hero ──────────────────────────────────────────────────────────── */
.hero{position:relative;overflow:hidden;min-height:calc(100svh - 58px);
  display:grid;grid-template-rows:1fr auto;align-items:center;
  padding:clamp(2rem,6vh,4rem) 0 clamp(1rem,3vh,2rem)}
.hero__in{width:min(100% - 2.6rem,var(--wrap));margin-inline:auto;text-align:center}
.hero__mark{width:min(78vw,340px);margin:0 auto}
.hero h1{margin:1.6rem 0 0;font-size:clamp(1.45rem,3.6vw,2.15rem);letter-spacing:.06em}
.hero__jp{font-family:var(--mincho);font-size:clamp(.95rem,2.4vw,1.15rem);
  letter-spacing:.42em;color:var(--ink2);margin:.5rem 0 0;padding-left:.42em}
.hero__sub{margin:1.1rem auto 0;max-width:46ch;color:#3B3632}
.hero__cta{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap;margin-top:1.7rem}

/* the open/closed pill. One source of truth: the <ul class="hours"> */
.stat{display:inline-flex;align-items:center;gap:.55rem;margin-top:1.3rem;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink2)}
.stat::before{content:"";width:7px;height:7px;border-radius:50%;
  background:var(--ink2);transition:background .4s}
.stat[data-open="1"]::before{background:#5C8A5C;
  box-shadow:0 0 0 4px rgba(92,138,92,.16)}

/* the drawn logo. Every stroke is its own path, so it inks itself in. */
.wm path{fill:transparent;stroke:var(--ink);stroke-width:1.1;
  vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1;stroke-dashoffset:1;
  animation:ink 1.5s var(--ease) forwards;
  animation-delay:calc(.16s + var(--i) * .035s)}
@keyframes ink{
  0%{stroke-dashoffset:1;fill:transparent}
  62%{stroke-dashoffset:0;fill:transparent;stroke-opacity:1}
  100%{stroke-dashoffset:0;fill:var(--ink);stroke-opacity:0}
}
.wm--static path{fill:var(--ink);stroke:none;animation:none}

/* the photo wall under the hero. Slow, low, and it does not shout. */
.wall{margin-top:clamp(2.2rem,5vh,3.4rem);overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.wall__row{display:flex;width:max-content;animation:slide 64s linear infinite}
.wall:hover .wall__row{animation-play-state:paused}
/* NOTE: each tile carries its own margin-right. Do NOT put gap on the row —
   with gap there is one extra gap between the two copies, the track stops
   being two equal halves and translateX(-50%) drifts every loop. */
.wall__row img{width:clamp(126px,15vw,186px);aspect-ratio:4/5;object-fit:cover;
  margin-right:12px;border-radius:2px}
@keyframes slide{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .wall__row{animation:none}
  .wm path{animation:none;fill:var(--ink);stroke:none}
}

.cue{text-align:center;padding:0;color:var(--ink2)}
.cue i{display:block;width:1px;height:30px;background:var(--line);margin:.5rem auto 0}

/* statement ─────────────────────────────────────────────────────── */
.stmt{text-align:center;padding:clamp(3.4rem,8vh,6rem) 0}
.stmt h2{max-width:20ch;margin:1.3rem auto 0}

/* gallery grid ──────────────────────────────────────────────────── */
.grid{display:grid;gap:clamp(.5rem,1.1vw,.9rem)}
.grid--nails{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid--tat{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid figure{margin:0;position:relative;overflow:hidden;border-radius:2px;
  background:var(--paper2);cursor:zoom-in}
.grid img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5;
  transition:transform .8s var(--ease)}
.grid figure:hover img{transform:scale(1.035)}


/* ── carousel ─────────────────────────────────────────────────────
   A snapping rail. The track is the scroller; .car__pad gives it the
   page gutter on both ends so the first and last card line up with the
   text above instead of hugging the screen edge.

   The tilt is on the figure, not the li, because a rotated flex child
   is measured by its BOUNDING box and the row would gap unevenly. The
   li keeps its square box and the picture leans inside it. */
.car{position:relative;margin-top:clamp(1.8rem,4vw,2.8rem)}
.car__pad{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;
  padding:1.6rem max(1.3rem,calc((100vw - var(--wrap))/2)) 2rem}
.car__pad::-webkit-scrollbar{display:none}
.car__track{display:flex;gap:clamp(1rem,2.4vw,2rem);list-style:none;margin:0;
  padding:0;width:max-content}
.car__item{scroll-snap-align:center;flex:none;width:clamp(210px,24vw,280px)}
.car__item figure{margin:0;position:relative;cursor:zoom-in;
  transform:rotate(-2.2deg);transition:transform .6s var(--ease)}
.car__item:nth-child(even) figure{transform:rotate(-1.4deg)}
.car__item figure:hover{transform:rotate(0deg) translateY(-6px)}
.car__item img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:2px;
  box-shadow:0 18px 40px -28px rgba(35,32,30,.75)}
.car__item figcaption{position:absolute;top:-.9rem;left:-.7rem;width:34px;
  height:34px;display:grid;place-items:center;border-radius:50%;
  background:var(--paper);color:var(--ink);font-family:var(--mincho);
  font-size:1rem;border:1px solid var(--line)}
.car__nav{position:absolute;top:calc(50% - .2rem);transform:translateY(-50%);z-index:3;
  width:44px;height:44px;border-radius:50%;border:1px solid var(--line);
  background:rgba(252,250,246,.94);color:var(--ink);cursor:pointer;
  box-shadow:0 8px 22px -14px rgba(35,32,30,.6);
  display:grid;place-items:center;transition:.3s var(--ease)}
.car__nav svg{width:18px;height:18px}
.car__nav:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.car__nav[disabled]{opacity:0;pointer-events:none}
.car__nav--prev{left:.9rem}
.car__nav--next{right:.9rem}
.car__note{font-size:.9rem;color:var(--ink2);max-width:62ch}
.car__note a{white-space:nowrap}
@media (max-width:720px){
  .car__nav{display:none}          /* a thumb is the better control here */
  .car__item{width:min(68vw,250px)}
}

/* two-column blocks ─────────────────────────────────────────────── */
.split{display:grid;grid-template-columns:1fr minmax(0,44%);
  gap:clamp(1.8rem,4.5vw,4.2rem);align-items:start}
.split--flip{grid-template-columns:minmax(0,44%) 1fr}
.split__art img{width:100%;border-radius:2px}
.tilt{transform:rotate(-1.6deg);box-shadow:0 18px 44px -26px rgba(35,32,30,.5)}

.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));
  gap:1.3rem;margin-top:2.1rem;padding-top:1.6rem;border-top:1px solid var(--line)}
.facts dt{font-family:var(--mono);font-size:.57rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink2);margin-bottom:.35rem}
.facts dd{margin:0;font-family:var(--mincho);font-size:1.25rem}

/* menu / price lists ────────────────────────────────────────────── */
.menu{display:grid;gap:0;margin:0;padding:0;list-style:none;
  border-top:1px solid var(--line)}
.menu li{display:flex;align-items:baseline;gap:1rem;padding:.85rem 0;
  border-bottom:1px solid var(--line)}
.menu .m-name{font-family:var(--mincho);font-size:1.08rem}
.menu .m-note{color:var(--ink2);font-size:.85rem}
.menu .m-dots{flex:1;border-bottom:1px dotted var(--line);transform:translateY(-4px)}
.menu .m-price{font-family:var(--mono);font-size:.92rem;white-space:nowrap}
.menu .m-price small{color:var(--ink2);font-size:.78rem}
.cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1.6rem,4vw,3.4rem)}

.card{background:var(--card);border:1px solid var(--line);border-radius:3px;
  padding:clamp(1.3rem,2.6vw,2rem)}
.card h3{font-size:1.2rem;margin-bottom:.5rem}

/* steps ─────────────────────────────────────────────────────────── */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1rem,2.4vw,2rem);counter-reset:s;list-style:none;padding:0;margin:0}
.steps li{counter-increment:s}
.steps li::before{content:counter(s,decimal-leading-zero);display:block;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;color:var(--beni);
  margin-bottom:.5rem}
.steps h3{font-size:1.05rem;margin-bottom:.3rem}
.steps p{margin:0;color:#3B3632;font-size:.95rem}

/* faq ───────────────────────────────────────────────────────────── */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;padding:1.05rem 0;font-family:var(--mincho);
  font-size:1.08rem;list-style:none;display:flex;justify-content:space-between;
  gap:1rem;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);color:var(--ink2);
  transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{margin:0 0 1.1rem;color:#3B3632;max-width:66ch}

/* reviews — three across on desktop, one or two on a phone */
.revs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(.8rem,2vw,1.4rem)}
.rev{background:var(--card);border:1px solid var(--line);border-radius:3px;
  padding:1.3rem}
.rev p{margin:.5rem 0 0;font-family:var(--mincho);font-size:1.02rem}
.rev .stars{color:var(--beni);letter-spacing:.14em;font-size:.82rem}
.rev .who{margin-top:.9rem;font-family:var(--mono);font-size:.62rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink2)}

/* visit ─────────────────────────────────────────────────────────── */
.hours{list-style:none;margin:1rem 0 0;padding:0}
.hours li{display:flex;justify-content:space-between;gap:1rem;
  padding:.42rem 0;border-bottom:1px solid var(--line);font-size:.94rem}
.hours li[data-today]{color:var(--ink);font-weight:500}
.hours span:last-child{font-family:var(--mono);font-size:.84rem;color:var(--ink2)}

.form{display:grid;gap:.75rem}
.form label{display:grid;gap:.3rem;font-family:var(--mono);font-size:.6rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink2)}
.form input,.form textarea,.form select{
  font:inherit;font-size:.95rem;padding:.7rem .85rem;border:1px solid var(--line);
  border-radius:2px;background:var(--card);color:var(--ink);width:100%}
.form input:focus,.form textarea:focus,.form select:focus{
  outline:none;border-color:var(--ai)}
.form textarea{min-height:110px;resize:vertical}
.hp{position:absolute;left:-9999px}
.formmsg{font-size:.9rem;min-height:1.2em}
.form button[type=submit]{justify-self:start}
.formmsg{color:#4A7A4A}
.formmsg[data-state="err"]{color:var(--beni)}

.socials{display:flex;gap:.9rem;margin-top:1.2rem}
.socials a{width:38px;height:38px;border:1px solid var(--line);border-radius:50%;
  display:grid;place-items:center;transition:.3s var(--ease)}
.socials a:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.socials svg{width:17px;height:17px}

.foot{border-top:1px solid var(--line);padding:1.8rem 0;font-size:.82rem;
  color:var(--ink2);display:flex;justify-content:space-between;gap:1rem;
  flex-wrap:wrap}

/* reveal ────────────────────────────────────────────────────────── */
.rv{opacity:0;transform:translateY(16px);
  transition:opacity .9s var(--ease),transform .9s var(--ease);
  transition-delay:var(--d,0s)}
.rv.on{opacity:1;transform:none}
.fade{opacity:0;animation:fade .9s var(--ease) forwards;animation-delay:var(--d,0s)}
@keyframes fade{to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none}.fade{opacity:1;animation:none}
}

/* ── lightbox ────────────────────────────────────────────────────── */
.lb{position:fixed;inset:0;z-index:120;background:rgba(24,21,19,.94);
  display:none;place-items:center}
.lb[data-open="1"]{display:grid}
.lb__stage{max-width:min(94vw,1000px);max-height:88vh;display:grid;place-items:center}
.lb__stage img{max-width:100%;max-height:88vh;width:auto;height:auto;
  object-fit:contain;border-radius:2px}
.lb__x,.lb__nav{position:absolute;background:rgba(247,243,236,.1);border:0;
  color:#F7F3EC;cursor:pointer;border-radius:50%;display:grid;place-items:center;
  transition:background .3s}
.lb__x:hover,.lb__nav:hover{background:rgba(247,243,236,.24)}
.lb__x{position:static;width:44px;height:44px;font-size:1.3rem;line-height:1}
.lb__nav{top:50%;transform:translateY(-50%);width:48px;height:48px;font-size:1.3rem}
.lb__nav--prev{left:1rem}
.lb__nav--next{right:1rem}
.lb__bar{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;
  justify-content:space-between;padding:1rem 1.2rem;z-index:2}
.lb__count{color:rgba(247,243,236,.7);font-family:var(--mono);font-size:.7rem;
  letter-spacing:.16em}
.lb__foot{position:absolute;bottom:1.1rem;left:0;right:0;text-align:center;
  color:rgba(247,243,236,.45);font-family:var(--mono);font-size:.62rem;
  letter-spacing:.14em}
@media (max-width:720px){.lb__foot{display:none}}

/* ── de aanvraagbalk (dock) ──────────────────────────────────────
   Portable block. Only these six variables change per site.        */
.dock{--dk-bg:var(--card);--dk-ink:var(--ink);--dk-ink2:var(--ink2);
  --dk-line:var(--line);--dk-pill:var(--ink);--dk-pill-ink:var(--paper);
  position:fixed;right:1rem;bottom:1rem;z-index:100;
  font-family:var(--gothic)}
.dock__btn{display:inline-flex;align-items:center;gap:.55rem;border:0;
  background:var(--dk-pill);color:var(--dk-pill-ink);cursor:pointer;
  padding:.85rem 1.3rem;border-radius:999px;font-family:var(--mono);
  font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  box-shadow:0 12px 30px -14px rgba(35,32,30,.7);transition:.3s var(--ease)}
.dock__btn:hover{transform:translateY(-2px)}
.dock__panel[hidden]{display:block}   /* [hidden] is the JS switch; the
   transition needs the node to keep its box, so visibility does the hiding */
.dock__panel{position:absolute;right:0;bottom:calc(100% + .7rem);
  width:min(92vw,352px);background:var(--dk-bg);border:1px solid var(--dk-line);
  border-radius:6px;padding:1.1rem;box-shadow:0 26px 60px -30px rgba(35,32,30,.6);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:.35s var(--ease)}
.dock[data-open="1"] .dock__panel{opacity:1;visibility:visible;transform:none}
.dock__hd{display:flex;justify-content:space-between;align-items:flex-start;
  gap:1rem;margin-bottom:.8rem}
.dock__hd h3{font-size:1.05rem}
.dock__hd p{margin:.15rem 0 0;font-size:.78rem;color:var(--dk-ink2)}
.dock__x{background:none;border:0;font-size:1.3rem;line-height:1;cursor:pointer;
  color:var(--dk-ink2)}
.dock__wa{display:flex;align-items:center;gap:.6rem;padding:.6rem .8rem;
  border:1px solid var(--dk-line);border-radius:3px;text-decoration:none;
  margin-bottom:.8rem;font-size:.9rem;transition:.3s var(--ease)}
.dock__wa:hover{border-color:var(--dk-ink)}
.dock__wa svg{width:17px;height:17px;flex:none;color:#25D366}
.dock__wa small{display:block;font-family:var(--mono);font-size:.56rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--dk-ink2)}
.dock .form input,.dock .form textarea,.dock .form select{padding:.55rem .7rem;
  font-size:.88rem}
.dock .form textarea{min-height:72px}

/* ── mobile ──────────────────────────────────────────────────────── */
@media (max-width:1000px){
  .grid--nails{grid-template-columns:repeat(3,minmax(0,1fr))}
  .grid--tat{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split,.split--flip{grid-template-columns:minmax(0,1fr)}
  .split__art{order:-1}
  .cols{grid-template-columns:minmax(0,1fr)}
  .steps{grid-template-columns:minmax(0,1fr)}
  .revs{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:720px){
  body{font-size:16px}
  .topbar__nav{display:none}
  .burg{display:block}
  .sec{padding:clamp(2.4rem,6vh,3.8rem) 0}
  .stmt{padding:clamp(2.4rem,6vh,4rem) 0}
  .stmt h2{max-width:16ch}
  .grid--nails{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* the mark is 1000x1370, so a width in vw gets tall fast and pushes the
     name, the pill and both buttons off a phone screen */
  .hero__mark{width:min(54vw,230px)}
  .hero{padding-top:1.6rem}
  .hero__jp{letter-spacing:.3em}
  .facts{margin-top:1.5rem;padding-top:1.2rem;gap:1rem}
  .dock{right:.7rem;bottom:.7rem}
  .lb__nav{width:40px;height:40px}
  .lb__nav--prev{left:.4rem}
  .lb__nav--next{right:.4rem}
}