/* ===================================================================
   Lunam Ink. — stylesheet

   The colours come from how things actually look under moonlight:
   everything drains toward cool blue-grey. That's deliberate — it
   means the tattoo photographs, which are warm skin tones, are the
   only warm colour anywhere on the page. The work is the colour.

   You shouldn't need to edit this file. If you want to change a
   colour, change it once in the :root block below and it updates
   everywhere.
   =================================================================== */

:root {
  --night:      #1A1E28;   /* page background — a wall at night */
  --night-deep: #12151D;   /* recessed panels */
  --umbra:      #0B0D12;   /* deepest shadow */
  --bone:       #EDE9E1;   /* main text */
  --ash:        #8E96A3;   /* secondary text */
  --silver:     #C6D2E0;   /* the one cool highlight */
  --line:       rgba(198, 210, 224, 0.14);
  --line-soft:  rgba(198, 210, 224, 0.07);

  --display: "Bodoni Moda", Georgia, "Times New Roman", serif;
  --body:    "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --gutter: clamp(1.25rem, 5vw, 5rem);
  --measure: 34rem;
  --shell: 1360px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Bars that span the full window still have to line their contents up with
   the centred content column, or the logo drifts left of everything on a
   wide monitor. Falls back to the plain gutter below 1360px. */
.topbar,
.footer {
  padding-left: max(var(--gutter), calc((100% - var(--shell)) / 2 + var(--gutter)));
  padding-right: max(var(--gutter), calc((100% - var(--shell)) / 2 + var(--gutter)));
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--night);
  color: var(--bone);
  font-family: var(--body);
  font-weight: 300;
  font-size: clamp(1rem, 0.97rem + 0.15vw, 1.075rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a { color: inherit; }

::selection { background: var(--silver); color: var(--umbra); }

:focus-visible {
  outline: 2px solid var(--silver);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--bone);
  color: var(--umbra);
  padding: 0.75rem 1.25rem;
  z-index: 100;
  font-size: 0.9rem;
}
.skip:focus { left: 0; }

/* ---------- shared type ---------- */

.eyebrow {
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ash);
  margin: 0 0 1.4rem;
  font-weight: 500;
}

.section__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.1rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0 0 1.1rem;
}

.section__note {
  color: var(--ash);
  max-width: var(--measure);
  margin: 0;
}

/* ---------- buttons ---------- */

.btn {
  display: inline-block;
  font-family: var(--body);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1rem 1.85rem;
  border: 1px solid var(--bone);
  color: var(--umbra);
  background: var(--bone);
  transition: background 0.45s var(--ease), color 0.45s var(--ease),
              border-color 0.45s var(--ease);
}
.btn:hover {
  background: transparent;
  color: var(--bone);
  border-color: var(--bone);
}

.btn--quiet {
  background: transparent;
  color: var(--bone);
  border-color: var(--line);
}
.btn--quiet:hover {
  background: transparent;
  color: var(--silver);
  border-color: var(--silver);
}

.btn--big {
  padding: 1.15rem 2.4rem;
  font-size: 0.86rem;
}

/* ---------- top bar ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-top: 1.15rem;
  padding-bottom: 1.15rem;
  background: rgba(26, 30, 40, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
}

.mark {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
}

/* The logo art fills its square canvas edge to edge, so it's clipped to a
   circle here rather than relying on any transparency in the file. */
.mark__logo {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex: none;
  display: block;
}

.mark__name {
  font-family: var(--display);
  font-size: 1.14rem;
  letter-spacing: 0.02em;
}

.topnav {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2.5vw, 2rem);
}

/* Vertical padding here is the finger target, not decoration — the text
   itself is only ~18px tall, which is far too small to tap accurately. */
.topnav a {
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ash);
  padding: 0.55rem 0;
  transition: color 0.3s var(--ease);
}
.topnav a:hover { color: var(--bone); }

.topnav__cta {
  color: var(--bone);
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
}

/* ---------- hero ---------- */

.hero {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: clamp(2rem, 6vw, 5rem);
  padding: clamp(3.5rem, 9vw, 8rem) var(--gutter) clamp(4rem, 10vw, 9rem);
  max-width: 1360px;
  margin: 0 auto;
}

.hero__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.6rem, 1.3rem + 5.4vw, 5.4rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin: 0 0 1.6rem;
}

.hero__title em {
  font-style: italic;
  color: var(--silver);
}

.lede {
  font-size: clamp(1.02rem, 0.98rem + 0.3vw, 1.18rem);
  color: var(--ash);
  max-width: 30rem;
  margin: 0 0 2.4rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-bottom: 2.4rem;
}

.hero__status {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ash);
  margin: 0;
}

.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--silver);
  flex: none;
  box-shadow: 0 0 0 0 rgba(198, 210, 224, 0.5);
  animation: pulse 3.4s ease-out infinite;
}

@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(198, 210, 224, 0.45); }
  70%  { box-shadow: 0 0 0 9px rgba(198, 210, 224, 0); }
  100% { box-shadow: 0 0 0 0 rgba(198, 210, 224, 0); }
}

/* ---------- the logo ---------- */

.hero__moon {
  margin: 0;
}

/* images/logo.png is pre-cropped and centred on the artwork itself (not
   just the canvas), with the design sized to fill most of the circle
   already — so the clip below needs no CSS transform or object-position
   to compensate. That matters: a live transform on top of the clip is
   what caused the blur last time. Sizing only, so the browser does a
   plain, sharp resample straight from the file. */
.moon {
  position: relative;
  width: min(100%, 27rem);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bone);
  box-shadow:
    0 0 0 1px rgba(198, 210, 224, 0.16),
    0 0 90px -20px rgba(198, 210, 224, 0.22);
}

.moon__logo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- section frame ---------- */

.section {
  padding: clamp(3.5rem, 8vw, 7.5rem) var(--gutter);
  max-width: 1360px;
  margin: 0 auto;
  border-top: 1px solid var(--line-soft);
  /* Clears the sticky header when a nav link jumps to this section,
     otherwise the heading lands underneath it. */
  scroll-margin-top: 5rem;
}

.section__head { margin-bottom: clamp(2.25rem, 5vw, 3.75rem); }

/* ---------- gallery ---------- */

.gallery {
  columns: 3;
  column-gap: 1.1rem;
}

/* The "no photos yet" notice must not be split across the columns.
   Two class names so this still wins against the responsive rules
   for .gallery further down the file. */
.gallery.gallery--empty { columns: 1; }

.shot {
  break-inside: avoid;
  margin: 0 0 1.1rem;
  position: relative;
  background: var(--night-deep);
  cursor: zoom-in;
  border: none;
  padding: 0;
  width: 100%;
  display: block;
  overflow: hidden;
  font: inherit;
  color: inherit;
  text-align: left;
}

.shot img {
  width: 100%;
  height: auto;
  transition: transform 0.9s var(--ease), filter 0.9s var(--ease);
  filter: saturate(0.94);
}

.shot:hover img { transform: scale(1.035); filter: saturate(1.06); }

/* Shown when photos.js is empty — tells you what to do next. */
.gallery__empty {
  border: 1px dashed var(--line);
  padding: clamp(2rem, 5vw, 3.5rem);
  text-align: center;
  color: var(--ash);
}

.gallery__empty strong {
  display: block;
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--bone);
  margin-bottom: 0.75rem;
}

.gallery__empty code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 0.85em;
  background: var(--night-deep);
  padding: 0.15em 0.45em;
  color: var(--silver);
}

/* ---------- about ---------- */

.about__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}

.about__body p {
  color: var(--ash);
  max-width: var(--measure);
}

.creds {
  list-style: none;
  padding: 0;
  margin: 2.5rem 0 0;
  border-top: 1px solid var(--line-soft);
}

.creds li {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 0.92rem;
}

.creds span {
  color: var(--ash);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding-top: 0.25rem;
}

.portrait { margin: 0; position: relative; }

.portrait img {
  width: 100%;
  filter: saturate(0.9);
}

.portrait figcaption {
  display: none;
  border: 1px dashed var(--line);
  padding: 3.5rem 1.5rem;
  text-align: center;
  color: var(--ash);
  font-size: 0.85rem;
}

.portrait figcaption code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  color: var(--silver);
}

/* Until a portrait.jpg exists, the space holds a note saying so. */
.portrait--empty img { display: none; }
.portrait--empty figcaption {
  display: grid;
  place-content: center;
  min-height: 22rem;
}

/* ---------- booking steps ---------- */

/* A sequence, so it runs top to bottom: number, then what happens.
   A row of five cards would break into an orphan at most widths. */
.steps {
  list-style: none;
  padding: 0;
  margin: 0 0 clamp(3rem, 7vw, 5rem);
  border-top: 1px solid var(--line-soft);
}

.step {
  display: grid;
  grid-template-columns: 2.75rem minmax(9rem, 15rem) 1fr;
  gap: 0 clamp(1rem, 3vw, 2.5rem);
  align-items: baseline;
  padding: clamp(1.4rem, 3vw, 2rem) 0;
  border-bottom: 1px solid var(--line-soft);
}

.step__n {
  font-family: var(--display);
  font-size: 1.05rem;
  color: var(--silver);
  font-variant-numeric: lining-nums;
}

.step h3 {
  font-family: var(--body);
  font-size: 1.05rem;
  font-weight: 400;
  letter-spacing: 0.005em;
  margin: 0;
}

.step p {
  color: var(--ash);
  font-size: 0.96rem;
  margin: 0;
  max-width: 34rem;
}

/* ---------- faq ---------- */

.faq {
  border-top: 1px solid var(--line-soft);
  max-width: 46rem;
}

.faq details {
  border-bottom: 1px solid var(--line-soft);
}

.faq summary {
  cursor: pointer;
  padding: 1.25rem 2rem 1.25rem 0;
  position: relative;
  list-style: none;
  font-size: 1rem;
  transition: color 0.3s var(--ease);
}

.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--silver); }

.faq summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ash);
  font-size: 1.15rem;
  transition: transform 0.35s var(--ease);
}

.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }

.faq p {
  color: var(--ash);
  margin: 0 0 1.4rem;
  padding-right: 2rem;
  font-size: 0.96rem;
}

.price-list {
  list-style: none;
  padding: 0;
  margin: 0 2rem 1.4rem 0;
  border-top: 1px solid var(--line-soft);
}

.price-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 0.9rem;
}

.price-list li span:first-child { color: var(--ash); }
.price-list li span:last-child {
  color: var(--bone);
  font-family: var(--display);
  white-space: nowrap;
}

/* ---------- contact ---------- */

.contact__inner {
  max-width: 40rem;
}

.contact__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2rem, 1.2rem + 3.2vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 1.2rem;
}

.contact__note {
  color: var(--ash);
  margin: 0 0 2.4rem;
}

/* ---------- booking form ---------- */

.booking-form {
  display: grid;
  gap: 1.5rem;
  margin-bottom: 1rem;
}

.field {
  display: grid;
  gap: 0.55rem;
}

.field label {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ash);
}

.field__optional {
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.7;
}

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field select,
.field textarea {
  font: inherit;
  font-size: 0.98rem;
  color: var(--bone);
  background: var(--night-deep);
  border: 1px solid var(--line);
  padding: 0.85rem 1rem;
  width: 100%;
  transition: border-color 0.3s var(--ease);
}

.field input::placeholder,
.field textarea::placeholder { color: var(--ash); opacity: 0.6; }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--silver);
}

.field textarea { resize: vertical; min-height: 7rem; }

.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%238E96A3' d='M5 7l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}

/* File input can't be restyled much cross-browser, so it's kept close to
   native but recoloured to sit quietly against the dark background. */
.field input[type="file"] {
  font: inherit;
  font-size: 0.88rem;
  color: var(--ash);
  width: 100%;
}
.field input[type="file"]::file-selector-button {
  font: inherit;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bone);
  background: transparent;
  border: 1px solid var(--line);
  padding: 0.6rem 1rem;
  margin-right: 1rem;
  cursor: pointer;
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.field input[type="file"]::file-selector-button:hover {
  border-color: var(--silver);
  color: var(--silver);
}

/* Shown only when "Phone call" is picked above — see site.js. Present in
   the HTML either way so Netlify's form parser can still detect the field. */
.field--conditional { display: none; }
.field--conditional.is-visible { display: grid; }

/* Netlify's spam honeypot — real visitors never see this. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__status {
  margin: 0;
  font-size: 0.9rem;
  min-height: 1.2em;
}
.form__status[data-state="error"] { color: #E8B27A; }
.form__status[data-state="ok"] { color: var(--silver); }

.booking-form[hidden] { display: none; }

.form__success[hidden] { display: none; }

.form__success {
  border: 1px solid var(--line);
  padding: 2rem;
  display: grid;
  gap: 0.5rem;
}
.form__success h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.4rem;
  margin: 0;
  color: var(--bone);
}
.form__success p { margin: 0; color: var(--ash); }

.contact__list {
  list-style: none;
  padding: 0;
  margin: 3rem 0 0;
  border-top: 1px solid var(--line-soft);
}

.contact__list li {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 0.92rem;
}

.contact__list span {
  color: var(--ash);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding-top: 0.25rem;
}

.contact__list a {
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  transition: border-color 0.3s var(--ease);
}
.contact__list a:hover { border-color: var(--silver); }

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

.footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2rem;
  padding-top: 2.25rem;
  padding-bottom: 2.25rem;
  border-top: 1px solid var(--line-soft);
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ash);
}

.footer__mark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
}

.footer__logo {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  flex: none;
  display: block;
}

.footer__name {
  font-family: var(--display);
  font-size: 1rem;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--bone);
}

.footer__social {
  display: flex;
  gap: 1.25rem;
}

.footer__social a {
  color: var(--ash);
  text-decoration: none;
  transition: color 0.3s var(--ease);
}
.footer__social a:hover { color: var(--bone); }

/* ---------- lightbox ---------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(11, 13, 18, 0.96);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: clamp(1rem, 4vw, 3rem);
}

.lightbox[hidden] { display: none; }

.lightbox__figure {
  margin: 0;
  max-width: min(100%, 60rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
}

.lightbox__figure img {
  max-height: 80vh;
  width: auto;
  object-fit: contain;
}

.lightbox__close,
.lightbox__nav {
  background: none;
  border: 1px solid var(--line);
  color: var(--bone);
  cursor: pointer;
  font-family: var(--body);
  line-height: 1;
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}

.lightbox__close:hover,
.lightbox__nav:hover { border-color: var(--silver); color: var(--silver); }

.lightbox__close {
  position: absolute;
  top: clamp(1rem, 3vw, 2rem);
  right: clamp(1rem, 3vw, 2rem);
  width: 2.75rem;
  height: 2.75rem;
  font-size: 1.5rem;
}

.lightbox__nav {
  width: 2.75rem;
  height: 4.5rem;
  font-size: 1.75rem;
  flex: none;
}

/* ---------- scroll reveal ---------- */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}

.reveal.is-in {
  opacity: 1;
  transform: none;
}

/* ---------- responsive ---------- */

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

/* The about text needs a readable column before it sits beside a photo. */
@media (max-width: 980px) {
  .about__grid { grid-template-columns: 1fr; }
  .portrait { max-width: 26rem; }
}

@media (max-width: 860px) {
  .hero {
    grid-template-columns: 1fr;
    text-align: left;
    padding-top: clamp(2rem, 6vw, 3.5rem);
    gap: 2.25rem;
  }
  /* Moon first, but small enough that the headline stays above the fold. */
  .hero__moon { order: -1; align-items: flex-start; }
  .moon { width: min(56%, 15rem); }
}

@media (max-width: 760px) {
  /* Number and title on one line, the explanation underneath. */
  .step {
    grid-template-columns: 2.25rem 1fr;
    gap: 0.35rem 0.75rem;
  }
  .step p { grid-column: 2; }
}

@media (max-width: 620px) {
  .gallery { columns: 1; }
  /* Tighter bar padding to pay for the taller tap targets on the links,
     so the wrapped header doesn't eat the screen. */
  .topbar { flex-wrap: wrap; gap: 0.15rem 1rem; padding-top: 0.7rem; padding-bottom: 0.7rem; }
  .mark__name { font-size: 1rem; }
  .topnav { gap: 1.1rem; width: 100%; }
  .topnav a { font-size: 0.74rem; letter-spacing: 0.11em; }
  .section { scroll-margin-top: 6.5rem; }
  .creds li,
  .contact__list li { flex-direction: column; gap: 0.2rem; }
  .lightbox__nav { width: 2.25rem; height: 3.5rem; }
  .btn { padding: 0.95rem 1.4rem; font-size: 0.76rem; }
}

/* ---------- respect motion preferences ---------- */

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