/* Sable — static front. Shopfront enamel, gilt sign lettering, a felt
 * letterboard for prices. Fonts: OFL, self-hosted (fonts/OFL-*.txt). */

@font-face {
  font-family: "Big Shoulders";
  src: url("/fonts/big-shoulders-latin-800.woff2?v=1") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Big Shoulders";
  src: url("/fonts/big-shoulders-vietnamese-800.woff2?v=1") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "Big Shoulders";
  src: url("/fonts/big-shoulders-latin-600.woff2?v=1") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Big Shoulders";
  src: url("/fonts/big-shoulders-vietnamese-600.woff2?v=1") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "Newsreader";
  src: url("/fonts/newsreader-latin-400.woff2?v=1") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Newsreader";
  src: url("/fonts/newsreader-vietnamese-400.woff2?v=1") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "Newsreader";
  src: url("/fonts/newsreader-latin-400-italic.woff2?v=1") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Newsreader";
  src: url("/fonts/newsreader-vietnamese-400-italic.woff2?v=1") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "Newsreader";
  src: url("/fonts/newsreader-latin-600.woff2?v=1") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Newsreader";
  src: url("/fonts/newsreader-vietnamese-600.woff2?v=1") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

:root {
  color-scheme: light dark;
  --sign: "Big Shoulders", "Arial Narrow", "Roboto Condensed", sans-serif;
  --text: "Newsreader", Georgia, "Noto Serif", serif;

  --towel:    #f1f3ef;
  --sheet:    #fbfcfa;
  --ink:      #17201c;
  --muted:    #56615b;
  --line:     #d3d9d3;
  --enamel:   #1d3a31;
  --enamel-2: #27493e;
  --on-enamel:#e9eee9;
  --gilt:     #c9a452;
  --gilt-ink: #7a5b1e;
  --shade:    #0c1d17;
  --pole:     #a3302a;
  --felt:     #1b1e1d;
  --felt-groove: #121413;
  --letter:   #f3f2ec;
  --focus:    #c9a452;

  --gutter: 16px;
  --measure: 36rem;
  --wide: 76rem;
}
@media (prefers-color-scheme: dark) {
  :root {
    --towel:    #0e1714;
    --sheet:    #121d19;
    --ink:      #e5ebe6;
    --muted:    #9ba69f;
    --line:     #2b3a34;
    --enamel:   #16302a;
    --enamel-2: #1f3d34;
    --on-enamel:#e5ebe6;
    --gilt:     #dcb96d;
    --gilt-ink: #dcb96d;
    --shade:    #050c0a;
    --pole:     #c8473e;
    --felt:     #151817;
    --felt-groove: #0b0d0c;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 12px; }
body {
  margin: 0;
  background: var(--towel);
  color: var(--ink);
  font: 400 1.125rem/1.6 var(--text);
  font-optical-sizing: auto;
}
a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 2px; }

.skip { position: absolute; left: -9999px; top: 8px; z-index: 5; background: var(--sheet); padding: 8px 12px; }
.skip:focus { left: var(--gutter); }

/* ---- Header: the sign over the door, the pole stripe under it ---------- */
.bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap;
  padding: 14px max(var(--gutter), calc((100% - var(--wide)) / 2));
  background: var(--enamel);
  color: var(--on-enamel);
  position: relative;
}
.bar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 6px;
  background: repeating-linear-gradient(-45deg, var(--pole) 0 9px, var(--towel) 9px 18px, var(--enamel-2) 18px 27px, var(--towel) 27px 36px);
}
.sign {
  font: 800 2.1rem/1 var(--sign);
  letter-spacing: .02em;
  color: var(--gilt);
  text-decoration: none;
  text-shadow: .045em .045em 0 var(--shade);
}
.bar ul { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 0; padding: 0; list-style: none; }
.bar nav a { font: 600 1.15rem/1 var(--sign); letter-spacing: .03em; text-decoration: none; padding: 6px 0; display: inline-block; }
.bar nav a:hover { color: var(--gilt); }
.bar nav .staff { color: var(--gilt); }

/* ---- The window: headline + chairs, then the live appointment book ----- */
.window {
  background: var(--enamel);
  color: var(--on-enamel);
  padding: 44px max(var(--gutter), calc((100% - var(--wide)) / 2)) 40px;
}
.window-head { display: grid; gap: 20px 48px; align-items: end; margin-bottom: 28px; }
@media (min-width: 900px) {
  .window-head { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
  .window-head .lede { grid-column: 1; }
  .window-head .chairs { grid-column: 2; grid-row: 1 / span 2; }
}
.window h1 {
  margin: 0;
  font: 800 clamp(3.1rem, 10vw, 7.25rem)/.86 var(--sign);
  letter-spacing: .005em;
  color: var(--gilt);
  text-shadow: .035em .035em 0 var(--shade);
  max-width: 11ch;
}
.lede { margin: 0; max-width: var(--measure); font-style: italic; font-size: 1.2rem; line-height: 1.55; }
.chairs { margin: 0; display: grid; gap: 0; border-top: 1px solid color-mix(in srgb, var(--gilt) 45%, transparent); }
.chairs > div {
  display: grid; grid-template-columns: 5.5rem 1fr; gap: 12px; align-items: baseline;
  padding: 10px 0; border-bottom: 1px solid color-mix(in srgb, var(--gilt) 45%, transparent);
}
.chairs dt { font: 800 1.7rem/1 var(--sign); color: var(--gilt); letter-spacing: .02em; }
.chairs dd { margin: 0; font-size: 1rem; line-height: 1.45; }

.book {
  background: var(--sheet);
  color: var(--ink);
  border-radius: 10px;
  padding: 18px 16px 16px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gilt) 55%, transparent);
  font-size: 1rem;
  /* calendar island seams (components/calendar/calendar.css) */
  --pc-cal-ink: var(--ink);
  --pc-cal-muted: var(--muted);
  --pc-cal-line: var(--line);
  --pc-cal-surface: var(--towel);
  --pc-cal-accent: var(--enamel-2);
  --pc-cal-accent-ink: var(--on-enamel);
  --pc-cal-radius: 6px;
}
@media (prefers-color-scheme: dark) {
  .book { --pc-cal-accent: var(--gilt); --pc-cal-accent-ink: #14110a; }
}
@media (min-width: 700px) { .book { padding: 24px 24px 20px; } }
.book .pc-cal-toggle .pc-cal-btn { font: 600 1.15rem/1 var(--sign); letter-spacing: .03em; padding: 9px 18px; }
.book .pc-cal-title { font: 800 1.35rem/1.1 var(--sign); letter-spacing: .02em; }
/* the component's `.pc-cal button { color: inherit }` outranks its primary ink */
.book .pc-cal-btn-primary { color: var(--pc-accent-ink); }
.book .pc-wg-now { background: var(--pole); height: 2px; }
.book .pc-wg-block.booking { background: color-mix(in srgb, var(--enamel-2) 22%, transparent); color: var(--ink); }
.book .pc-wg-col.open:not(.past):hover { background-color: color-mix(in srgb, var(--gilt) 10%, transparent); }
@media (max-width: 699px) {
  /* The whole week on a phone: narrow columns, no sideways scroll. */
  .book .pc-wg { min-width: 0; grid-template-columns: 34px repeat(7, minmax(0, 1fr)); gap: 0 2px; }
  .book .pc-wg-block { font-size: 0; }
  .book .pc-wg-dayhead strong { font-size: 1.05rem; }
}
.book .pc-wg-dayhead strong { font: 800 1.25rem/1.1 var(--sign); color: var(--ink); }
.book .pc-wg-dayhead.today strong { color: inherit; }
.book .pc-cal-summary-title { font: 800 1.4rem/1.1 var(--sign); letter-spacing: .02em; }
.book-fallback { margin: 0; }

/* ---- Below the window -------------------------------------------------- */
.lower {
  display: grid; gap: 56px 64px;
  padding: 56px max(var(--gutter), calc((100% - var(--wide)) / 2)) 0;
}
.lower > section { min-width: 0; }
@media (min-width: 1000px) {
  .lower { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; }
}
h2 {
  margin: 0 0 8px;
  font: 800 clamp(2.2rem, 5vw, 3.2rem)/1 var(--sign);
  letter-spacing: .01em;
  color: var(--gilt-ink);
}
.note { margin: 0 0 20px; max-width: var(--measure); color: var(--muted); font-size: 1.05rem; }

/* The letterboard: grooved felt, pressed-in letters. */
.board {
  max-width: 44rem;
  background: repeating-linear-gradient(to bottom, var(--felt) 0 20px, var(--felt-groove) 20px 22px);
  border: 10px solid #3a2a1c;
  border-radius: 4px;
  padding: 14px 18px;
  color: var(--letter);
  font: 600 clamp(1.05rem, 3.6vw, 1.45rem)/1.9 var(--sign);
  letter-spacing: .09em;
  text-transform: uppercase;
}
.board-row { display: grid; grid-template-columns: 1fr auto; gap: 0 18px; }
.board-row span:nth-child(2) { color: color-mix(in srgb, var(--letter) 70%, transparent); grid-column: 1; grid-row: 2; font-size: .8em; line-height: 1.3; margin-bottom: 6px; }
.board-row span:nth-child(3) { grid-column: 2; grid-row: 1; text-align: right; }
@media (min-width: 560px) {
  .board-row { grid-template-columns: 1fr 7rem 9.5rem; }
  .board-row span:nth-child(2) { grid-column: 2; grid-row: 1; font-size: inherit; line-height: inherit; margin: 0; }
  .board-row span:nth-child(3) { grid-column: 3; }
}

.shelf-list { list-style: none; margin: 0; padding: 0; max-width: 34rem; }
.shelf-list li {
  display: flex; justify-content: space-between; gap: 16px; align-items: baseline;
  padding: 10px 0; border-bottom: 1px solid var(--line);
}
.shelf-list li span:last-child { font: 600 1.2rem/1 var(--sign); letter-spacing: .04em; white-space: nowrap; }
/* the live shelf (menu island), read like the static list */
.shelf-live { max-width: 34rem; --pc-menu-dim: var(--muted); --pc-menu-rule: var(--line); }
.shelf-live .pc-menu-cat { font: 600 1.2rem/1.4 var(--sign); letter-spacing: .03em; color: var(--gilt-ink); }
.shelf-live .pc-menu-row { padding: 10px 0; border-bottom: 1px solid var(--line); }
.shelf-live .pc-menu-lead { visibility: hidden; }
.shelf-live .pc-menu-price { font: 600 1.2rem/1 var(--sign); letter-spacing: .04em; }

.how ol { margin: 0; padding: 0 0 0 1.4em; max-width: var(--measure); }
.how li { padding: 4px 0 8px 6px; }
.how li::marker { font: 800 1.3rem var(--sign); color: var(--gilt-ink); }

.visit { display: grid; gap: 8px 48px; }
@media (min-width: 560px) {
  .visit { grid-template-columns: auto 1fr; }
  .visit h2, .visit .note { grid-column: 1 / -1; }
}
.visit address { font-style: normal; font-size: 1.15rem; line-height: 1.6; }
.hours { border-collapse: collapse; font-size: 1.05rem; max-width: 26rem; }
.hours caption { text-align: left; font: 600 1.2rem/1.4 var(--sign); letter-spacing: .03em; padding-bottom: 4px; }
.hours th { text-align: left; font-weight: 400; padding: 5px 24px 5px 0; border-bottom: 1px solid var(--line); }
.hours td { padding: 5px 0; border-bottom: 1px solid var(--line); white-space: nowrap; }

.foot {
  margin-top: 72px;
  padding: 24px max(var(--gutter), calc((100% - var(--wide)) / 2)) 32px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .95rem;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
}
.foot p { margin: 0; max-width: 46rem; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}