/* Bistro Subercaseaux — one menu card, three services. */

:root {
  --paper: #f5efe4;
  --card: #fbf8f2;
  --ink: #221d18;
  --muted: #6d6358;
  --faint: #9a8f82;
  --rule: #d9cdb9;
  --accent: #7a2433;      /* bordeaux */

  --display: "EB Garamond", Garamond, Georgia, "Times New Roman", serif;
  --text: "EB Garamond", Garamond, Georgia, "Times New Roman", serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #15120f;
    --card: #1c1814;
    --ink: #ece4d6;
    --muted: #b0a495;
    --faint: #85796c;
    --rule: #3b332b;
    --accent: #d39aa0;
  }
}
:root[data-theme="dark"] {
  --paper: #15120f;
  --card: #1c1814;
  --ink: #ece4d6;
  --muted: #b0a495;
  --faint: #85796c;
  --rule: #3b332b;
  --accent: #d39aa0;
}

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

html {
  background: var(--paper);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: 1.0625rem;
  line-height: 1.5;
  font-feature-settings: "kern", "liga", "onum";
  -webkit-font-smoothing: antialiased;
  padding: clamp(0px, 4vw, 56px) 0;
}

/* The card ------------------------------------------------------------ */

.card {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  background: var(--card);
  padding: 56px clamp(20px, 7vw, 88px) 64px;
  position: relative;
}
@media (min-width: 800px) {
  .card {
    border: 1px solid var(--rule);
    box-shadow: 0 1px 0 rgba(0,0,0,.02), 0 24px 60px -36px rgba(40, 28, 16, .25);
  }
  /* a hairline inner frame, as on a printed card */
  .card::before {
    content: "";
    position: absolute;
    inset: 10px;
    border: 1px solid var(--rule);
    pointer-events: none;
  }
}

/* Masthead ----------------------------------------------------------- */

.masthead { text-align: center; }

.kicker {
  margin: 0;
  font-family: var(--text);
  font-size: .8rem;
  letter-spacing: .5em;
  text-transform: uppercase;
  padding-left: .5em;           /* balance the trailing letter-space */
  color: var(--accent);
}

.wordmark {
  margin: 6px 0 0;
  font-family: var(--display);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(2.5rem, 10.5vw, 4.2rem);
  line-height: 1;
  letter-spacing: .01em;
}

.fleuron {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 22px auto;
  max-width: 220px;
}
.fleuron span { flex: 1 1 0; height: 1px; background: var(--rule); }
.fleuron i {
  width: 7px; height: 7px;
  flex: 0 0 7px;
  transform: rotate(45deg);
  border: 1px solid var(--accent);
}

.tagline {
  margin: 0;
  font-style: italic;
  color: var(--muted);
  font-size: 1rem;
}

/* Tabs --------------------------------------------------------------- */

.tabs {
  display: flex;
  justify-content: center;
  gap: 0;
  margin: 40px 0 8px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.tabs a {
  flex: 1 1 0;
  min-width: 0;
  min-height: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px 6px;
  text-decoration: none;
  color: var(--muted);
  position: relative;
  transition: color .2s ease;
}
.tabs a + a { border-left: 1px solid var(--rule); }
.tabs .fr {
  font-family: var(--display);
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.2;
  white-space: nowrap;
}
.tabs .en {
  font-size: .68rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  padding-left: .28em;
  margin-top: 2px;
}
.tabs a:hover { color: var(--ink); }
.tabs a[aria-selected="true"] { color: var(--accent); }
.tabs a[aria-selected="true"]::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 7px; height: 7px;
  margin-left: -3.5px;
  background: var(--card);
  border: 1px solid var(--accent);
  transform: rotate(45deg);
}
.tabs a:focus-visible { outline: 1px solid var(--accent); outline-offset: -4px; }

@media (max-width: 420px) {
  .tabs .fr { font-size: .95rem; }
  .tabs .en { font-size: .6rem; letter-spacing: .2em; padding-left: .2em; }
}

/* Without the script every menu shows, one after another. */
html:not(.js) .tabs { display: none; }
html:not(.js) .menu + .menu { margin-top: 64px; }

/* A menu ------------------------------------------------------------- */

.menu-head { text-align: center; margin: 44px 0 8px; }
.menu-head h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2rem, 7vw, 2.6rem);
  line-height: 1.1;
}
.hours {
  margin: 6px 0 0;
  font-style: italic;
  color: var(--muted);
  font-size: .95rem;
}

.course { margin-top: 44px; }
.course h3 {
  margin: 0 0 22px;
  text-align: center;
  font-family: var(--text);
  font-weight: 400;
  font-size: .78rem;
  letter-spacing: .38em;
  text-transform: uppercase;
  padding-left: .38em;
  color: var(--accent);
}

.course ul { list-style: none; margin: 0; padding: 0; text-align: center; }
.course li + li { margin-top: 22px; }

.dish { margin: 0; }
.dish .name {
  font-family: var(--display);
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.2;
}
.desc {
  margin: 3px 0 0;
  color: var(--muted);
  font-style: italic;
  max-width: 30em;
  margin-left: auto;
  margin-right: auto;
  text-wrap: pretty;
}
.portion {
  margin: 2px 0 0;
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--faint);
}

/* Short lists: sides and drinks, centered and quiet. */
.inline-list { text-align: center; }
.inline-list li {
  font-family: var(--display);
  font-size: 1.18rem;
  font-weight: 400;
}
.course .inline-list li + li { margin-top: 8px; }

.each {
  margin: 12px 0 0;
  text-align: center;
  font-style: italic;
  color: var(--muted);
  font-size: .95rem;
}
.name sup, .advisory sup {
  font-size: .6em;
  color: var(--accent);
  margin-left: 1px;
}

/* Colophon ----------------------------------------------------------- */

.colophon {
  margin-top: 64px;
  text-align: center;
  color: var(--muted);
  font-size: .95rem;
}
.colophon p { margin: 0 auto 10px; max-width: 30em; }
.colophon .small {
  margin-top: 18px;
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--faint);
}

.colophon .advisory {
  margin-top: 14px;
  font-size: .78rem;
  font-style: italic;
  color: var(--faint);
}

/* Print: the menu on screen, on one page of paper. ---------------------- */

@media print {
  :root { --paper: #fff; --card: #fff; --ink: #000; --muted: #333; --faint: #555; --rule: #bbb; }
  body { padding: 0; font-size: 11pt; }
  .card { max-width: none; border: 0; box-shadow: none; padding: 0; }
  .card::before { display: none; }
  .tabs { display: none; }
  .course { break-inside: avoid; margin-top: 24px; }
}