/* ==========================================================================
   Tribal Ink Tattoos — tribal-ink-tattoos.otlusites.com
   One hand-written stylesheet. Nothing here is loaded from another domain.

   WHERE THE LOOK COMES FROM
   Everything this studio already puts out is black ink and bone white: the
   logo is a white sacred-geometry mandala on a black disc, and every one of
   their portfolio photographs is signed at the foot with that same mandala
   and TRIBAL INK TATTOOS set in light, very widely letterspaced capitals.
   So the site is built out of what they already own — bone, near-black,
   hairlines, and caps opened right up.

   The one colour is the red ink in their neck-dragon piece, sampled off the
   photograph itself: a muted oxblood rather than a bright red, because
   that is what red ink looks like once it is under skin. It is used almost
   nowhere on purpose — a rule, a plate number, a focus ring — which is the
   same thing that piece does: black and grey, and one drop of red.

   The two schemes are two different rooms, not an inversion. Light is a
   warm bone paper with the work sitting on it like prints in a catalogue.
   Dark is the near-black their photographs are actually shot against —
   #030303 and #040404 came off two of their own backgrounds.

   TYPE
   Bodoni Moda for anything said out loud. A Didone's hairlines are the
   closest type gets to single-needle fine line, which is what half their
   book is. Urbanist for everything read quietly, and letterspaced in caps
   for labels and captions, which is the note their own watermark strikes.
   Two families, no more.
   ========================================================================== */


/* ---- fonts, self-hosted -------------------------------------------------
   Both faces are variable and cut down to the characters this site uses.
   Neither Bodoni Moda nor Urbanist carries the rupee sign in any subset, so
   the fourth file is Figtree cut down to that one glyph — 1 KB — and it is
   registered under BOTH families with unicode-range: U+20B9. Prices are set
   in Urbanist, which is what that cut is matched to; the Bodoni
   registration is a safety net so a stray ₹ still renders from a real
   self-hosted file rather than whatever the phone happens to have.
   ------------------------------------------------------------------------ */

@font-face {
  font-family: "Bodoni Moda";
  src: url("/assets/fonts/bodoni-moda-var.woff2") format("woff2-variations");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bodoni Moda";
  src: url("/assets/fonts/bodoni-moda-var-italic.woff2") format("woff2-variations");
  font-weight: 400 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Bodoni Moda";
  src: url("/assets/fonts/rupee-var.woff2") format("woff2-variations");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+20B9;
}
@font-face {
  font-family: "Urbanist";
  src: url("/assets/fonts/urbanist-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Urbanist";
  src: url("/assets/fonts/rupee-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+20B9;
}


/* ---- colour -------------------------------------------------------------
   Three blocks, in this order, and the dark values are written twice on
   purpose:
     1. :root                                    → light, the default
     2. device asks for dark AND light not pinned → dark
     3. dark pinned with the switch               → dark
   The :not() in block 2 is what lets a pinned light choice beat a dark
   phone. Every rule below reads these variables; nothing hard-codes a
   colour.
   ------------------------------------------------------------------------ */

:root {
  --bg:          #efeae1;   /* bone paper — their watermark white, warmed  */
  --bg-2:        #e6e0d5;   /* recessed bands                              */
  --mat:         #e3dcd0;   /* the mount a photograph sits on              */
  --ink:         #17140f;   /* warm near-black, never #000                 */
  --muted:       #64594c;
  --line:        #d5ccbd;   /* hairline                                    */
  --line-2:      #bfb3a0;   /* hairline, one step up                       */
  --accent:      #92382b;   /* the red ink in the dragon piece             */
  --accent-lg:   #b4503f;   /* the same red, large type only               */
  --accent-ink:  #fbf8f2;
  --shadow:      0 1px 2px rgba(23, 20, 15, .07), 0 12px 34px rgba(23, 20, 15, .07);
  --sheen:       rgba(23, 20, 15, .04);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:          #0a0a09;   /* sampled off their own photo backgrounds   */
    --bg-2:        #100f0e;
    --mat:         #161513;
    --ink:         #efe9df;
    --muted:       #9a9083;
    --line:        #262320;
    --line-2:      #3a352f;
    --accent:      #d9705f;   /* lifted: more light, less saturation       */
    --accent-lg:   #e08877;
    --accent-ink:  #0a0a09;
    --shadow:      0 1px 2px rgba(0, 0, 0, .5), 0 14px 40px rgba(0, 0, 0, .45);
    --sheen:       rgba(239, 233, 223, .04);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg:          #0a0a09;
  --bg-2:        #100f0e;
  --mat:         #161513;
  --ink:         #efe9df;
  --muted:       #9a9083;
  --line:        #262320;
  --line-2:      #3a352f;
  --accent:      #d9705f;
  --accent-lg:   #e08877;
  --accent-ink:  #0a0a09;
  --shadow:      0 1px 2px rgba(0, 0, 0, .5), 0 14px 40px rgba(0, 0, 0, .45);
  --sheen:       rgba(239, 233, 223, .04);
  color-scheme: dark;
}


/* ---- measurements ------------------------------------------------------ */

:root {
  --nav-h: 58px;
  --pad: clamp(18px, 5vw, 76px);
  --gap: clamp(28px, 5vw, 72px);
  --maxw: 1360px;
  --track: .22em;      /* the letterspacing on caps, off their watermark */
}

@media (min-width: 900px) { :root { --nav-h: 70px; } }


/* ---- base -------------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Urbanist", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(15.5px, .55vw + 14px, 17.5px);
  line-height: 1.62;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

/* the browser's own rule for [hidden] is display:none at the lowest
   specificity, so any class that sets a display beats it — which is how a
   hidden form field stays on screen after the form has been sent */
[hidden] { display: none !important; }

a { color: inherit; }

::selection { background: var(--accent); color: var(--accent-ink); }

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

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

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--ink);
  color: var(--bg);
  padding: 12px 18px;
  font: 500 13px/1 "Urbanist", sans-serif;
  letter-spacing: var(--track);
  text-transform: uppercase;
}
.skip:focus { left: 8px; top: 8px; }


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

h1, h2, h3 {
  font-family: "Bodoni Moda", Georgia, "Times New Roman", serif;
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -.005em;
  margin: 0;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.5rem, 6vw, 4.75rem);
  line-height: 1.05;
  font-variation-settings: "opsz" 96, "wght" 500;
}

h2 {
  font-size: clamp(2rem, 4.6vw, 3.5rem);
  font-variation-settings: "opsz" 72, "wght" 500;
}

h3 {
  font-size: clamp(1.28rem, 1.8vw, 1.6rem);
  line-height: 1.12;
  font-variation-settings: "opsz" 28, "wght" 500;
}

em, .it { font-style: italic; }

p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: clamp(1.02rem, 1.05vw + .78rem, 1.32rem);
  line-height: 1.55;
  max-width: 46ch;
  color: var(--ink);
}

.prose { max-width: 60ch; color: var(--muted); }
.prose strong { color: var(--ink); font-weight: 600; }

/* the letterspaced capitals their watermark is set in */
.caps {
  font-family: "Urbanist", sans-serif;
  font-size: .705rem;
  font-weight: 500;
  letter-spacing: var(--track);
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--muted);
  margin: 0;
}
.caps--ink { color: var(--ink); }
.caps--accent { color: var(--accent); }


/* ---- section furniture ------------------------------------------------- */

section { scroll-margin-top: calc(var(--nav-h) + 10px); }
[id] { scroll-margin-top: calc(var(--nav-h) + 10px); }

.sec { padding-block: clamp(56px, 9vw, 132px); }
.sec--band { background: var(--bg-2); }
.sec--rule { border-top: 1px solid var(--line); }

/* section opener: eyebrow, rule, heading — the same three notes each time,
   which is what gives a one-page site a spine */
.sec__head { margin-bottom: clamp(28px, 4.5vw, 60px); }
.sec__eye {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: clamp(14px, 2vw, 22px);
}
.sec__eye::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
.sec__num { color: var(--accent); }
.sec__sub {
  margin-top: 18px;
  max-width: 52ch;
  color: var(--muted);
}


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

.btn {
  --btn-bg: transparent;
  --btn-ink: var(--ink);
  --btn-line: var(--line-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 46px;
  padding: 11px 22px;
  background: var(--btn-bg);
  color: var(--btn-ink);
  border: 1px solid var(--btn-line);
  border-radius: 999px;
  font-family: "Urbanist", sans-serif;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn svg { width: 15px; height: 15px; flex: none; }

.btn:hover {
  --btn-bg: var(--ink);
  --btn-ink: var(--bg);
  --btn-line: var(--ink);
}

.btn--solid {
  --btn-bg: var(--ink);
  --btn-ink: var(--bg);
  --btn-line: var(--ink);
}
.btn--solid:hover {
  --btn-bg: var(--accent);
  --btn-ink: var(--accent-ink);
  --btn-line: var(--accent);
}

.btns {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}


/* ---- header ------------------------------------------------------------ */

.hdr {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

.hdr__in {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: var(--nav-h);
}

.brand {
  display: inline-flex;
  align-items: baseline;
  gap: .6em;
  text-decoration: none;
  margin-right: auto;
  font-family: "Urbanist", sans-serif;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: var(--track);
  text-transform: uppercase;
  white-space: nowrap;
}
.brand span { color: var(--muted); font-weight: 400; }
@media (max-width: 520px) { .brand span { display: none; } }

.nav { display: none; }

@media (min-width: 900px) {
  .nav {
    display: flex;
    align-items: center;
    gap: clamp(18px, 2vw, 34px);
  }
  .nav a {
    font-size: .705rem;
    font-weight: 500;
    letter-spacing: var(--track);
    text-transform: uppercase;
    text-decoration: none;
    color: var(--muted);
    padding-block: 6px;
    border-bottom: 1px solid transparent;
    transition: color .18s ease, border-color .18s ease;
  }
  .nav a:hover { color: var(--ink); border-bottom-color: var(--accent); }
}

.hdr__tools { display: flex; align-items: center; gap: 8px; }

/* the light / dark switch: one button, two states.
   The word lives in aria-label; the mark shows which way it is. */
.theme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  color: var(--ink);
  cursor: pointer;
  transition: border-color .18s ease, color .18s ease;
}
.theme:hover { border-color: var(--ink); color: var(--accent); }
.theme svg { width: 17px; height: 17px; }
.theme .disc { fill: none; stroke: currentColor; stroke-width: 1.4; }
.theme .half { fill: currentColor; }

.burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 12px;
  background: none;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  cursor: pointer;
  color: var(--ink);
}
.burger i {
  display: block;
  height: 1px;
  background: currentColor;
  transition: transform .2s ease, opacity .2s ease;
}
.burger i:last-child { width: 62%; }
.burger[aria-expanded="true"] i:first-child { transform: translateY(3px) rotate(45deg); }
.burger[aria-expanded="true"] i:last-child  { transform: translateY(-3px) rotate(-45deg); width: 100%; }
@media (min-width: 900px) { .burger { display: none; } }

.panel {
  border-top: 1px solid var(--line);
  background: var(--bg);
}
.panel[hidden] { display: none; }
.panel ul {
  list-style: none;
  margin: 0;
  padding: 10px 0 4px;
}
.panel li + li { border-top: 1px solid var(--line); }
.panel ul a {
  display: block;
  padding: 15px 2px;
  font-family: "Bodoni Moda", serif;
  font-size: 1.5rem;
  font-variation-settings: "opsz" 28, "wght" 500;
  text-decoration: none;
}
.panel .btns { padding: 18px 0 26px; }
.panel .btn { flex: 1 1 auto; }
@media (min-width: 900px) { .panel { display: none; } }


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

.hero { border-bottom: 1px solid var(--line); }

/* phone: the work lands first. The h1 is still first in the DOM, so a
   screen reader still meets the heading before the photograph. */
@media (max-width: 899px) {
  .hero__in { display: flex; flex-direction: column; }
  .hero__fig { order: -1; }
}

.hero__fig {
  position: relative;
  margin: 0;
  background: #0a0a09;
}
.hero__fig img {
  width: 100%;
  height: clamp(300px, 58vh, 460px);
  object-fit: cover;
  object-position: 50% 32%;
}

.hero__body {
  padding-block: clamp(34px, 6vw, 64px) clamp(38px, 6vw, 70px);
}

.hero__eye {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: clamp(18px, 2.4vw, 26px);
}
.hero__eye::before {
  content: "";
  width: clamp(24px, 4vw, 54px);
  height: 1px;
  background: var(--accent);
  flex: none;
}

h1 .it { color: var(--accent-lg); }

.hero__lede { margin-top: clamp(20px, 2.6vw, 30px); }
.hero .btns { margin-top: clamp(26px, 3.2vw, 38px); }

/* the credential line: three real, checkable facts, set as running text
   with hairlines between. Deliberately not a row of boxes with big
   numbers in them. */
.creds {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px clamp(14px, 2vw, 26px);
  margin-top: clamp(30px, 4vw, 44px);
  padding-top: clamp(20px, 2.6vw, 28px);
  border-top: 1px solid var(--line);
}
.creds > * { display: inline-flex; align-items: center; gap: 8px; }
.creds a { color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--line-2); }
.creds a:hover { color: var(--ink); border-bottom-color: var(--accent); }
.stars { display: inline-flex; gap: 2px; color: var(--accent); }
.stars svg { width: 11px; height: 11px; fill: currentColor; }

@media (min-width: 900px) {
  /* the photograph bleeds to the edge of the screen; the type column still
     lines up with .wrap on the rest of the page */
  .hero__in {
    display: grid;
    grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
    align-items: stretch;
    gap: 0;
  }
  .hero__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: none;
    padding: clamp(56px, 7vh, 96px) clamp(40px, 4.4vw, 78px) clamp(56px, 7vh, 96px)
             max(var(--pad), calc((100vw - var(--maxw)) / 2 + var(--pad)));
    border-right: 1px solid var(--line);
    min-height: min(86vh, 880px);
  }
  .hero__fig {
    position: relative;
    overflow: hidden;
  }
  .hero__fig img {
    height: 100%;
    min-height: min(86vh, 880px);
    object-position: 46% 40%;
  }
  /* their name, set the way their own watermark sets it, running up the
     rule between the two halves */
  .hero__spine {
    position: absolute;
    left: 0;
    bottom: clamp(28px, 4vw, 56px);
    writing-mode: vertical-rl;
    transform: rotate(180deg) translateX(-1px);
    padding: 14px 0;
    background: #0a0a09;
    color: rgba(239, 233, 223, .62);
    font-size: .66rem;
    letter-spacing: var(--track);
    text-transform: uppercase;
    font-weight: 500;
  }
}
@media (max-width: 899px) { .hero__spine { display: none; } }


/* ---- the work: plates -------------------------------------------------- */

.plates {
  display: grid;
  gap: clamp(34px, 5vw, 74px) var(--gap);
}

.plate { margin: 0; }

.plate__frame {
  background: var(--mat);
  border: 1px solid var(--line);
  padding: clamp(9px, 1.1vw, 16px);
  box-shadow: var(--shadow);
}
.plate__frame img { width: 100%; }

.plate__cap {
  display: flex;
  gap: 12px;
  margin-top: 14px;
  align-items: baseline;
}
.plate__no {
  font-family: "Urbanist", sans-serif;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--accent);
  flex: none;
}
.plate__txt {
  font-size: .845rem;
  line-height: 1.45;
  color: var(--muted);
  max-width: 34ch;
}

@media (min-width: 760px) {
  .plates { grid-template-columns: repeat(12, 1fr); }
  .plate--a { grid-column: 1 / span 7; }
  .plate--b { grid-column: 9 / span 4;  margin-top: clamp(34px, 5vw, 84px); }
  .plate--c { grid-column: 2 / span 4; }
  .plate--d { grid-column: 7 / span 6;  margin-top: clamp(-56px, -3.5vw, 0px); }
  .plate--e { grid-column: 1 / span 4; }
  .plate--f { grid-column: 5 / span 4;  margin-top: clamp(34px, 6vw, 90px); }
  .plate--g { grid-column: 9 / span 4; }
  .plate--h { grid-column: 4 / span 3;  margin-top: clamp(20px, 3vw, 48px); }
}

/* on a phone, alternate full-bleed and inset so the scroll has a rhythm
   instead of eight identical cards */
@media (max-width: 759px) {
  .plate--b, .plate--f, .plate--h { margin-inline: clamp(20px, 9vw, 58px); }
}

.plates__foot {
  margin-top: clamp(38px, 5vw, 64px);
  padding-top: clamp(20px, 2.6vw, 28px);
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
}
.plates__foot p { margin: 0; color: var(--muted); font-size: .9rem; max-width: 44ch; }


/* ---- styles: an index, not a grid of cards ----------------------------- */

.index { border-top: 1px solid var(--line-2); }

.row {
  display: grid;
  gap: 4px 5%;
  padding-block: clamp(20px, 2.6vw, 30px);
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.row__no {
  font-family: "Urbanist", sans-serif;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--accent);
}
.row__name {
  font-family: "Bodoni Moda", serif;
  font-size: clamp(1.35rem, 2.5vw, 2.05rem);
  font-variation-settings: "opsz" 40, "wght" 500;
  line-height: 1.08;
}
.row__txt { color: var(--muted); font-size: .93rem; max-width: 52ch; }

@media (min-width: 760px) {
  .row { grid-template-columns: 3.5rem minmax(0, 1fr) minmax(0, 1.25fr); gap: 0 4%; }
}

/* prices */
.tariff {
  margin-top: clamp(38px, 5vw, 62px);
  display: grid;
  gap: clamp(26px, 4vw, 54px);
}
@media (min-width: 860px) { .tariff { grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); } }

.tariff__list { border-top: 1px solid var(--line-2); }
.tariff__row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-block: 14px;
  border-bottom: 1px solid var(--line);
}
.tariff__row dt {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
.tariff__row dd {
  margin: 0;
  flex: none;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
}
.tariff__row .dots {
  flex: 1;
  min-width: 18px;
  height: 1px;
  border-bottom: 1px dotted var(--line-2);
  transform: translateY(-4px);
}
.tariff dl { margin: 0; }

.note {
  padding: clamp(20px, 2.6vw, 30px);
  background: var(--mat);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: .93rem;
}
.note p + p { margin-top: .8em; }


/* ---- studio ------------------------------------------------------------ */

.split {
  display: grid;
  gap: clamp(30px, 4.6vw, 70px);
  align-items: start;
}
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, .62fr) minmax(0, 1fr); }
  .split--wide { grid-template-columns: minmax(0, 1fr) minmax(0, .72fr); }
}

.stack { display: grid; gap: clamp(14px, 2vw, 22px); }
.stack figure { margin: 0; }
.stack img {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--mat);
}
.stack figcaption {
  margin-top: 9px;
  font-size: .78rem;
  color: var(--muted);
}
@media (min-width: 440px) {
  .stack {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(12px, 1.6vw, 20px);
    align-items: start;
  }
  .stack figure:last-child { margin-top: clamp(18px, 3vw, 40px); }
}

.pull {
  margin: clamp(26px, 3.4vw, 40px) 0;
  padding-left: clamp(18px, 2.4vw, 30px);
  border-left: 2px solid var(--accent);
  font-family: "Bodoni Moda", serif;
  font-size: clamp(1.22rem, 2vw, 1.72rem);
  font-variation-settings: "opsz" 40, "wght" 400;
  font-style: italic;
  line-height: 1.28;
  color: var(--ink);
  max-width: 30ch;
}

.aftercare {
  margin-top: clamp(44px, 6vw, 78px);
  padding-top: clamp(28px, 3.4vw, 44px);
  border-top: 1px solid var(--line);
}
.steps {
  list-style: none;
  margin: clamp(20px, 2.6vw, 28px) 0 0;
  padding: 0;
  display: grid;
  gap: clamp(18px, 2.4vw, 26px);
  counter-reset: step;
}
@media (min-width: 720px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.steps li {
  counter-increment: step;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.steps li::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  margin-bottom: 8px;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--accent);
}
.steps h3 { margin-bottom: 6px; }
.steps p { color: var(--muted); font-size: .92rem; margin: 0; }


/* ---- visit ------------------------------------------------------------- */

.places { display: grid; gap: clamp(26px, 3.4vw, 46px); align-items: start; }
@media (min-width: 860px) { .places { grid-template-columns: minmax(0, 1.25fr) minmax(0, .9fr); } }

.place {
  padding: clamp(22px, 3vw, 36px);
  background: var(--mat);
  border: 1px solid var(--line);
}
.place--main { border-color: var(--line-2); }
.place h3 { margin-bottom: 10px; }
.place address {
  font-style: normal;
  color: var(--muted);
  margin-bottom: 4px;
  max-width: 38ch;
  text-wrap: pretty;
}
.place .btns { margin-top: 20px; }

.hours {
  margin-top: clamp(26px, 3.4vw, 40px);
  padding-top: clamp(18px, 2.4vw, 26px);
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  align-items: baseline;
}
.hours b { font-weight: 600; }


/* ---- the enquiry form -------------------------------------------------- */

.book { display: grid; gap: clamp(30px, 4.4vw, 66px); align-items: start; }
@media (min-width: 900px) { .book { grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); } }

.enquiry { display: grid; gap: 16px; }

.enquiry__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.enquiry__field { display: grid; gap: 7px; }
.enquiry__field label {
  font-size: .705rem;
  font-weight: 500;
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--muted);
}
.enquiry__optional { text-transform: none; letter-spacing: .02em; }

.enquiry input,
.enquiry textarea {
  width: 100%;
  padding: 13px 15px;
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--line-2);
  border-radius: 0;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
  transition: border-color .18s ease;
}
.enquiry input:focus,
.enquiry textarea:focus { border-color: var(--accent); }
.enquiry textarea { resize: vertical; min-height: 120px; }

.enquiry button[type="submit"] {
  justify-self: start;
  min-height: 50px;
  padding: 13px 34px;
  background: var(--ink);
  color: var(--bg);
  border: 1px solid var(--ink);
  border-radius: 999px;
  font-family: "Urbanist", sans-serif;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.enquiry button[type="submit"]:hover:not(:disabled) {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.enquiry button[type="submit"]:disabled { opacity: .55; cursor: default; }

.enquiry__done {
  margin: 0;
  padding: 20px 22px;
  border: 1px solid var(--accent);
  color: var(--ink);
  font-family: "Bodoni Moda", serif;
  font-size: 1.24rem;
  font-variation-settings: "opsz" 28, "wght" 400;
  font-style: italic;
}


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

.foot {
  border-top: 1px solid var(--line);
  padding-block: clamp(44px, 6vw, 82px) clamp(26px, 3vw, 38px);
  background: var(--bg-2);
}

.foot__grid {
  display: grid;
  gap: clamp(28px, 4vw, 52px);
}
@media (min-width: 760px) {
  .foot__grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr); }
}

.foot h2 {
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  font-variation-settings: "opsz" 40, "wght" 500;
  margin-bottom: 14px;
}
.foot address { font-style: normal; color: var(--muted); }
.foot address + address { margin-top: 12px; }

.foot ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 9px; }
.foot a { color: var(--muted); text-decoration: none; }
.foot a:hover { color: var(--ink); }
.foot ul a { border-bottom: 1px solid transparent; }
.foot ul a:hover { border-bottom-color: var(--accent); }

.foot__end {
  margin-top: clamp(34px, 4.4vw, 58px);
  padding-top: clamp(18px, 2.2vw, 26px);
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
  font-size: .78rem;
  color: var(--muted);
}

/* the OTLU credit — quiet, below their own line */
.built-by {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  color: var(--muted);
  font-size: .72rem;
  letter-spacing: .07em;
  transition: color .18s ease;
}
.built-by:hover { color: var(--ink); }
.built-by img { width: 96px; height: 20px; }
.built-by .on-dark { display: none; }
:root[data-theme="dark"] .built-by .on-dark { display: block; }
:root[data-theme="dark"] .built-by .on-light { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .built-by .on-dark { display: block; }
  :root:not([data-theme="light"]) .built-by .on-light { display: none; }
}


/* ---- 404 --------------------------------------------------------------- */

.lost {
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(60px, 12vh, 140px);
}
.lost .btns { margin-top: 30px; }


/* ---- motion ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}


/* ---- print -------------------------------------------------------------
   Price lists and addresses get printed. A printed page with a sticky
   navigation bar and a WhatsApp button on it looks careless.
   ------------------------------------------------------------------------ */

@media print {
  .hdr, .panel, .hero__fig, .btns, .btn, .theme, .burger,
  .plates, .plates__foot, .stack, .skip, .built-by, .enquiry { display: none !important; }

  :root {
    --bg: #fff; --bg-2: #fff; --mat: #fff; --ink: #000;
    --muted: #333; --line: #bbb; --line-2: #888; --accent: #000;
  }
  body { background: #fff; color: #000; font-size: 11pt; line-height: 1.45; }
  .sec { padding-block: 14pt; }
  .sec--band { background: none; }
  h1 { font-size: 26pt; }
  h2 { font-size: 16pt; }
  h3 { font-size: 12pt; }
  .place, .note { border: 1px solid #bbb; padding: 8pt; }
  a { text-decoration: none; }
  .row, .tariff__row, .steps li { break-inside: avoid; }
}