/* Shared stylesheet for the inner pages (policy.html, contact.html).
   Loaded after tokens.css and layout.css, in place of home.css.
   Only colours and sizes from tokens.css, no raw hex, no new dependencies. */

/* ---------- page shell ----------
   The header is position: fixed, so the first section of every inner page
   has to reserve its height, otherwise the title slides under the bar. */
.section--top { padding-top: calc(var(--header-h) + clamp(36px, 6vw, 88px)); }

.page-head { text-align: center; }
/* Same setting as BROWBESTIIE MENU and BROWBESTIIE POLICY: Jost 200, uppercase,
   0.2em. This was the only serif, mixed-case title on the site and read as a
   page from a different project. */
.page-title {
  font-family: var(--font-sans);
  font-weight: 200;
  font-size: var(--fs-h1);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  padding-left: 0.2em; /* balance the trailing letterspace */
  max-width: 22ch;
  margin-inline: auto;
}
/* the two words the mockup underlines, drawn with a border, never an image */
.title-mark {
  font-style: italic;
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 0.04em;
}
.page-lede {
  margin: clamp(18px, 2.4vw, 26px) auto 0;
  max-width: 52ch;
  color: var(--ink-soft);
}

/* ---------- three column blocks ---------- */
.tri-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 5vw, 68px);
  margin-top: clamp(44px, 6vw, 80px);
}
@media (min-width: 800px) {
  .tri-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Some headings wrap to two lines and some do not. Reserving two lines keeps
     the hairlines and the body copy on one level across the three columns.
     Measured in em, so it follows the Thai line height as well. */
  .tri-col__title { min-height: calc(2em * var(--lh-tight)); }
}

.tri-col { text-align: center; }
.tri-col__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  letter-spacing: 0.01em;
}
.tri-col__rule {
  width: 44px; height: 1px; border: 0;
  background: var(--line-strong);
  margin: 16px auto 20px;
}
.tri-col__text { color: var(--ink-soft); }
.tri-col__text + .tri-col__text { margin-top: 14px; }
.tri-col__text strong { font-weight: 500; color: var(--ink); }

.tri-col__icon {
  display: block;
  width: 34px; height: 34px;
  margin: 0 auto 20px;
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- closing call to action ---------- */
.page-cta {
  margin-top: clamp(48px, 7vw, 88px);
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: center;
}
@media (max-width: 480px) { .page-cta .btn { flex: 1 1 100%; } }

/* ---------- contact layout ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 5vw, 60px);
  margin-top: clamp(44px, 6vw, 80px);
}
@media (min-width: 920px) { .contact-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* weight 300, the same as every other small uppercase label on the site: the
   menu's THE SERVICES and THB, the policy's BOOKING, the footer column heads.
   This one sat at 400 and read a step heavier than all of them. */
.col-head {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--ink-muted);
  padding-bottom: 14px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--line);
}
.col-head--spaced { margin-top: clamp(34px, 4vw, 46px); }

/* opening hours */
.hours-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding-block: 13px;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-small);
}
.hours-row:last-child { border-bottom: 0; }
.hours-day { letter-spacing: 0.04em; }
.hours-time { color: var(--ink-soft); white-space: nowrap; }
/* Tajskie „11:00 ถึง 18:00" jest dłuższe od angielskiego, a nowrap wypychałby
   wtedy kolumnę na wąskim ekranie. Po tajsku wolno złamać wiersz. */
:root[lang="th"] .hours-time { white-space: normal; }
.hours-time strong { font-weight: 500; color: var(--ink); }

/* contact details */
.contact-list li + li { margin-top: 16px; }
.contact-label {
  display: block;
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--ls-mid);
  color: var(--ink-muted);
}
.contact-value {
  display: inline-flex; align-items: center;
  min-height: 44px; /* tap target */
  font-size: var(--fs-small);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
a.contact-value:hover { color: var(--accent); border-bottom-color: var(--accent); }
.contact-text {
  padding-block: 8px;
  font-size: var(--fs-small);
  color: var(--ink-soft);
}
.contact-social a { width: 44px; height: 44px; }

/* ---------- join the list, contact page ----------
   The same sign up that used to live in the footer, now inside the third column,
   directly above the message form. The footer on this page is only the legal line. */
.join-note {
  margin-bottom: 20px;
  /* No max-width. The column is 339px and the line needs 314px, so it fits, but
     a 40ch cap measured about 289px and wrapped the sentence for no reason. The
     column itself is the measure here. */
  color: var(--ink-soft);
  font-size: var(--fs-small);
  line-height: 1.7;
}
.join-form .btn { width: 100%; margin-top: 4px; }
.join-consent {
  margin-top: 14px;
  /* No max-width: at this size 42ch measured 257px while the inputs above are
     339px, so the consent sat visibly narrower than the form it belongs to. The
     column is the measure. */
  color: var(--ink-muted);
  font-size: var(--fs-eyebrow);
  line-height: 1.7;
}

/* Contact keeps only the legal strip, so the block padding above it goes away. */
.site-footer--slim { padding-block: 0; background: var(--bg); }
.site-footer--slim .footer-bottom { margin-top: 0; }

/* ---------- policy document ----------
   The policy reads like the printed menu on booking.html: a wordmark title,
   a hairline, a bar of two labels, then rules separated by hairlines.
   On a wide screen each rule splits in two, the heading on the left and the
   copy on the right at a comfortable measure, on a phone it stacks. */
.doc-head {
  /* the header is position: fixed, so the first block clears it by hand */
  padding-top: calc(var(--header-h) + clamp(44px, 7vw, 96px));
  padding-bottom: clamp(26px, 4vw, 44px);
}
.doc-head__title {
  font-family: var(--font-sans);
  font-weight: 200;
  font-size: var(--fs-h1);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  line-height: 1.2;
  text-align: center;
  /* absorbs the trailing letter space so the line optically centres */
  margin-right: -0.2em;
}

.doc { padding-bottom: var(--section-y); }

.doc-cols {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: clamp(14px, 3vw, 48px);
  align-items: end;
  padding-top: clamp(22px, 3vw, 34px);
  padding-bottom: clamp(12px, 1.6vw, 18px);
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--ink-muted);
  line-height: 1.5;
}
.doc-cols__right { text-align: right; }

.doc-item {
  border-top: 1px solid var(--line);
  padding-block: clamp(26px, 3.4vw, 40px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(14px, 2vw, 20px) clamp(32px, 5vw, 88px);
  align-items: start;
}
.doc-item__title {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(1rem, 1.9vw, 1.28rem);
  text-transform: uppercase;
  letter-spacing: var(--ls-mid);
  line-height: 1.3;
}
.doc-item__meta {
  margin-top: 9px;
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--ls-mid);
  color: var(--ink-muted);
  line-height: 1.6;
}
.doc-item__body { max-width: 66ch; }
.doc-item__text { color: var(--ink-soft); }
.doc-item__text + .doc-item__text { margin-top: 14px; }
.doc-item__text strong { font-weight: 500; color: var(--ink); }
.doc-item__note {
  /* a lighter aside, told apart by size and colour only, no rule down the side */
  margin-top: clamp(16px, 2vw, 22px);
  max-width: 62ch;
  font-size: var(--fs-small);
  line-height: 1.8;
  color: var(--ink-muted);
}

.doc-close {
  margin: clamp(28px, 4vw, 44px) auto 0;
  max-width: 56ch;
  text-align: center;
  font-size: var(--fs-small);
  line-height: 1.85;
  color: var(--ink-muted);
}

/* ---- jump bar (phones and tablets) ----
   Chosen 2026-09-16 (mock-up C). Every section stays open, the bar sticks under
   the header and scrolls sideways, and a tap jumps to that section. */
.doc-jump { display: none; }
@media (max-width: 899px) {
  .doc-jump {
    display: flex;
    gap: 8px;
    position: sticky;
    top: var(--header-h);
    z-index: 20;
    background: var(--bg);
    margin-inline: calc(-1 * var(--pad-x));
    padding: 10px var(--pad-x);
    border-bottom: 1px solid var(--line);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .doc-jump::-webkit-scrollbar { display: none; }
  .doc-jump a {
    flex: none;
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid var(--line);
    font-size: var(--fs-eyebrow);
    letter-spacing: var(--ls-mid);
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--ink-soft);
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
  }
  .doc-jump a.is-active { background: var(--ink); border-color: var(--ink); color: var(--on-dark); }
  .doc-jump a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  /* the section heading lands just under the header and the bar */
  .doc-item { scroll-margin-top: calc(var(--header-h) + 72px); }
  /* the first section starts right under the bar, no double line */
  .doc-jump + .doc-list > .doc-item:first-child { border-top: 0; }
}
:root[lang="th"] .doc-jump a { text-transform: none; letter-spacing: 0.02em; }

@media (max-width: 520px) {
  /* wide tracking eats the line on a 360px screen, so the label bar tightens */
  .doc-cols { letter-spacing: var(--ls-mid); }
}
@media (min-width: 900px) {
  /* heading on the left, copy on the right, both starting at the same line:
     nothing sits above the title any more, so the body needs no top offset */
  .doc-item { grid-template-columns: minmax(0, 0.8fr) minmax(0, 2fr); }
}

/* ---------- Thai ----------
   Thai has no capitals and composed glyphs break under wide tracking,
   so the uppercase labels added by this file go back to normal case. */
:root[lang="th"] .col-head,
:root[lang="th"] .contact-label,
:root[lang="th"] .hours-day,
:root[lang="th"] .doc-head__title,
:root[lang="th"] .doc-cols,
:root[lang="th"] .doc-item__title,
:root[lang="th"] .doc-item__meta { text-transform: none; letter-spacing: 0.02em; }
:root[lang="th"] .title-mark { font-style: normal; }
:root[lang="th"] .doc-head__title { margin-right: 0; }
/* the wordmark carries its own wide tracking from layout.css, which would tear
   a Thai title apart, so inside this one heading it follows the heading */
:root[lang="th"] .doc-head__title .brand-mark { letter-spacing: inherit; }
:root[lang="th"] .doc-item__note,
:root[lang="th"] .doc-close { line-height: var(--lh-body); }
/* Thai marks sit above and below the line, so the tight label leading opens up */
:root[lang="th"] .doc-head__title { line-height: 1.45; }
:root[lang="th"] .doc-item__title { line-height: 1.5; }
:root[lang="th"] .doc-cols,
:root[lang="th"] .doc-item__meta { line-height: 1.8; }