/* ============================================================
   GOVORIN — shared design tokens (both variants)
   Palette + fonts + placeholders + form contract base
   ============================================================ */

:root{
  --bg:        #383E42;   /* slate grey */
  --bg-deep:   #2E3337;   /* slightly darker panel */
  --bg-deeper: #24282B;   /* deepest */
  --ink:       #FFFFFF;
  --ink-soft:  rgba(255,255,255,.72);
  --ink-dim:   rgba(255,255,255,.46);
  --ink-faint: rgba(255,255,255,.16);
  --accent:    #FCFBB1;   /* pale yellow — dosed */
  --line:      rgba(255,255,255,.14);
  --line-soft: rgba(255,255,255,.08);

  --font-head: "Manrope", system-ui, sans-serif;  /* Gilroy substitute */
  --font-body: "Tenor Sans", Georgia, serif;
  --font-mono: "Space Mono", ui-monospace, monospace;

  --maxw: 1240px;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
::selection{ background:var(--accent); color:#1c1f21; }

/* focus visibility for accessibility (form fields, links) */
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

/* ---- shared micro-type ---- */
.eyebrow{
  font-family:var(--font-head);
  font-weight:600;
  font-size:.7rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--accent);
}
.label{
  font-family:var(--font-head);
  font-weight:700;
  font-size:.62rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--accent);
}
.tag-city{
  font-family:var(--font-head);
  font-weight:600;
  font-size:.7rem;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--ink-soft);
}

/* ---- GOVORIN wordmark with thin underline ---- */
.wordmark{
  font-family:var(--font-head);
  font-weight:600;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--accent);
  position:relative;
  display:inline-block;
  padding-bottom:.32em;
  font-size:.92rem;
}
.wordmark::after{
  content:"";
  position:absolute;
  left:0; right:.32em;
  bottom:0;
  height:1px;
  background:currentColor;
  opacity:.7;
}

/* ============================================================
   Cinematic placeholder (until real photos)
   ============================================================ */
.ph{
  position:relative;
  overflow:hidden;
  background:
    repeating-linear-gradient(135deg,
      rgba(255,255,255,.022) 0 2px,
      transparent 2px 11px),
    radial-gradient(120% 90% at 70% 18%, rgba(252,251,177,.05), transparent 55%),
    linear-gradient(150deg, #30353a 0%, #202427 60%, #191c1f 100%);
  display:grid;
  place-items:center;
}
.ph::before{
  content:attr(data-ph);
  font-family:var(--font-mono);
  font-size:.66rem;
  letter-spacing:.14em;
  text-transform:lowercase;
  color:rgba(255,255,255,.34);
  padding:.5em 1em;
  border:1px solid rgba(255,255,255,.12);
  border-radius:2px;
  text-align:center;
  max-width:80%;
  line-height:1.4;
}

/* ============================================================
   Booking form — EXACT backend contract
   POST /{lang}/book  →  /{lang}/thanks
   field names are fixed: name, contact, preferred_channel,
   requested_date, requested_time, consent, website(honeypot)
   ============================================================ */
.book-form{ display:grid; gap:1.15rem; }
.field{ display:grid; gap:.5rem; }
.field > label{
  font-family:var(--font-head);
  font-weight:600;
  font-size:.66rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-dim);
}
.field > label .req{ color:var(--accent); }
.book-form input,
.book-form select,
.book-form textarea{
  width:100%;
  background:transparent;
  border:none;
  border-bottom:1px solid var(--line);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:1rem;
  padding:.7rem 0;
  transition:border-color .25s ease;
}
.book-form textarea{ resize:vertical; min-height:3.2em; }
.book-form input::placeholder,
.book-form textarea::placeholder{ color:var(--ink-dim); }
.book-form input:focus,
.book-form select:focus,
.book-form textarea:focus{
  outline:none;
  border-bottom-color:var(--accent);
}
.book-form select{ -webkit-appearance:none; appearance:none; cursor:pointer; }
.book-form select option{ background:var(--bg-deep); color:var(--ink); }
.field-2{ display:grid; gap:1.15rem; }
@media(min-width:620px){ .field-2{ grid-template-columns:1fr 1fr; } }

/* consent row */
.consent{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:.7rem;
  align-items:start;
  font-size:.82rem;
  color:var(--ink-soft);
  line-height:1.5;
}
.consent input{ width:18px; height:18px; margin-top:.2em; accent-color:var(--accent); }
.consent a{ color:var(--accent); text-decoration:underline; text-underline-offset:2px; }

/* honeypot — visually hidden, kept in DOM */
.hp{
  position:absolute !important;
  left:-9999px !important;
  width:1px; height:1px;
  overflow:hidden;
  opacity:0;
  pointer-events:none;
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}