/* Late Table, for Maude’s. A wine bar page built as a printed wine list: one
   hairline runs down the whole page at a fixed distance from the right edge of
   the column, and every figure on the page — the price of a plate, the price
   of a glass, the hour the door opens, the hours in the footer — hangs to the
   right of it. Nothing else ever crosses it. The menu is not an object in the
   hero; the menu's grid is the page's grid.

   Colour is the room and the paper: two dark plums a value step apart for the
   room, one warm paper for the printed band in the middle, and amber for the
   candle. See README.md before changing any of it. */

:root {
  /* Five colours. The room (plum), the room after dark (night), the printed
     stock (paper), the candle (amber) and the second voice on dark (rose). */
  --bg: #4e3563;          /* plum: the room, the hero and the closing band */
  --deep: #12081a;        /* night: the darkest ground, and the ink on paper */
  --tint: #f2e7d6;        /* paper: the one light band, the printed menu */
  --ink: #f2e7d6;         /* the type on every dark ground: the same paper */
  --muted: #d5bcdc;       /* lilac: the second voice on the dark grounds */
  --accent: #e8b160;      /* amber: every figure on the rail, and the button */
  --accent-ink: #12081a;  /* night, the type sitting on the amber */
  --rule: #9a76a6;        /* the hairline on the dark grounds */
  --deep-muted: #5f4a6b;  /* the second voice on the paper band */
  --deep-rule: #a89272;   /* the hairline on the paper band */

  /* Type. One very large display step and a quiet text face under it. */
  --t-display: clamp(2.25rem, 10.4vw, 9.375rem);
  --t-title: clamp(1.75rem, 3.6vw, 3.25rem);
  --t-rubric: clamp(1.1875rem, 1.9vw, 1.625rem);
  --t-name: clamp(1.1875rem, 1.55vw, 1.375rem);
  --t-fig: clamp(1rem, 1.5vw, 1.375rem);
  --t-lead: clamp(1rem, 1.25vw, 1.125rem);
  --t-body: 1rem;
  --t-small: 0.875rem;

  /* Spacing, each step about 1.6 times the one before it. */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.875rem;
  --s4: 1.5rem;
  --s5: 2.5rem;
  --s6: 4rem;
  --band: clamp(2.75rem, 5.6vw, 5rem);

  /* The grid. Everything on the page is these three numbers. */
  --shell: 68rem;
  --pad: clamp(1.25rem, 3.6vw, 3rem);
  --rail: clamp(4.25rem, 6.6vw, 6rem);
  --gap: clamp(0.75rem, 1.4vw, 1.25rem);
  --col: calc(100% - var(--rail) - var(--gap));

  /* Three measures, so no paragraph sets wider than the eye can track. */
  --m1: 26rem;
  --m2: 28rem;
  --m3: 31rem;

  --display: "Instrument Serif", "Instrument Fallback", Constantia, "Hoefler Text", serif;
  --text: Georgia, "Iowan Old Style", Charter, "Times New Roman", serif;
}

@font-face {
  font-family: "Instrument Serif";
  src: url("instrumentserif-subset.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: optional;
}

/* The twelve Latin-1 characters and the three marks Instrument Serif does not
   draw, handed to a system serif at a matched cap height inside the same
   family, so a fraction or an allergen dagger in a dish name renders at the
   right size instead of jumping. Nothing is fetched: local() only. */
@font-face {
  font-family: "Instrument Serif";
  src: local("Constantia"), local("Hoefler Text"), local("Times New Roman");
  size-adjust: 105%;
  unicode-range: U+00A4, U+00A6, U+00AC, U+00AD, U+00B1-00B3, U+00B5, U+00B9, U+00BC-00BE, U+0192, U+2020, U+2021, U+2044;
}

/* The whole-page fallback, scaled so the headline still sets on two lines when
   the file has not arrived. Constantia is 31 per cent wider than Instrument
   Serif on the h1 string, so the face is taken to 82 per cent of its size. */
@font-face {
  font-family: "Instrument Fallback";
  src: local("Constantia"), local("Hoefler Text"), local("Times New Roman");
  size-adjust: 82%;
}

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

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--text);
  font-size: var(--t-body);
  line-height: 1.6;
  overflow-wrap: break-word;
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: 0;
  text-wrap: balance;
}

p { margin: 0; }
ul { margin: 0; padding: 0; }
li { list-style: none; }
a { color: inherit; }
img { max-width: 100%; height: auto; }

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

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 5;
  background: var(--accent);
  color: var(--accent-ink);
  padding: var(--s2) var(--s3);
  text-decoration: none;
}
.skip:focus { left: 0; }

/* ---------- the rail: the one thing this page is ---------- */
/* A 1px rule, the full height of every band, set so that the column to its
   right is exactly --rail wide and the gutter either side of it is half the
   grid gap. Because it is drawn on the band and not on the container, it runs
   unbroken from the wordmark to the copyright line. */

.band { position: relative; padding-block: var(--band); }

.band::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: calc(max(0px, (100% - var(--shell)) / 2) + var(--pad) + var(--rail) + var(--gap) / 2);
  width: 1px;
  background: var(--rule);
}

.band--plum { background: var(--bg); }
.band--night { background: var(--deep); }
.band--paper { background: var(--tint); color: var(--deep); }
.band--paper::before { background: var(--deep-rule); }
.band--paper :focus-visible { outline-color: var(--deep); }

.page {
  position: relative;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--pad);
}

/* Every block stops at the rail. The ruled rows below are the exceptions,
   because they are the only things that have a figure to put past it. */
.rail > * { max-width: var(--col); }
.rail > .list,
.rail > .line,
.rail > .foot { max-width: none; }

/* ---------- the ruled row ---------- */

.line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--rail);
  column-gap: var(--gap);
  align-items: baseline;
  border-top: 1px solid var(--rule);
  padding-block: var(--s3) var(--s4);
}

.band--paper .line { border-top-color: var(--deep-rule); }

.line__name {
  grid-column: 1;
  grid-row: 1;
  font-family: var(--display);
  font-size: var(--t-name);
  line-height: 1.15;
}

.line__fig {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  font-family: var(--display);
  font-size: var(--t-fig);
  line-height: 1.15;
  color: var(--accent);
  font-variant-numeric: tabular-nums lining-nums;
}

.band--paper .line__fig { color: var(--deep); }

.line__note {
  grid-column: 1;
  grid-row: 2;
  margin-top: var(--s1);
  font-size: var(--t-small);
  line-height: 1.4;
  color: var(--muted);
}

.band--paper .line__note { color: var(--deep-muted); }

.line.line--head {
  border-top: 0;
  padding-block: 0;
  margin-top: var(--s6);
}

.line.line--end {
  margin-top: var(--s6);
  padding-bottom: 0;
}

.line--end .line__name {
  font-family: var(--text);
  font-size: var(--t-body);
  line-height: 1.55;
  max-width: var(--m3);
}

/* ---------- top bar ---------- */

.top { position: relative; padding-block: var(--s4) 0; }

.top::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: calc(max(0px, (100% - var(--shell)) / 2) + var(--pad) + var(--rail) + var(--gap) / 2);
  width: 1px;
  background: var(--rule);
}

.top__in {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s2) var(--s4);
  padding-right: calc(var(--pad) + var(--rail) + var(--gap));
}

.wordmark {
  font-family: var(--display);
  font-size: var(--t-rubric);
  line-height: 1.1;
}

.top__where {
  font-size: var(--t-small);
  color: var(--muted);
  letter-spacing: 0.04em;
}

.top__link { display: inline-block; padding-block: 0.2rem; font-size: var(--t-small); }

/* ---------- type on the page ---------- */

.display {
  font-size: var(--t-display);
  line-height: 0.94;
  margin-bottom: var(--s5);
}

.title { font-size: var(--t-title); }

.rubric { font-size: var(--t-rubric); }

.lead {
  font-size: var(--t-lead);
  line-height: 1.5;
  max-width: min(var(--m3), var(--col));
}

.say {
  max-width: min(var(--m3), var(--col));
  line-height: 1.6;
}

.say + .say { margin-top: var(--s3); }

.note {
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--muted);
  max-width: min(var(--m2), var(--col));
  margin-top: var(--s3);
}

.band--paper .note { color: var(--deep-muted); }

.note--end { margin-top: var(--s4); }

.sub {
  font-size: var(--t-rubric);
  margin-top: var(--s6);
  margin-bottom: calc(var(--s3) * -1);
  color: var(--muted);
  letter-spacing: 0.05em;
}

.band--paper .sub { color: var(--deep-muted); }

.line--head + .say,
.line--head + .note { margin-top: var(--s4); }

.list { margin-top: var(--s5); }

/* ---------- the two things you can act on ---------- */

.act {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s4);
  margin-top: var(--s5);
}

.act__say {
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--muted);
  max-width: var(--m1);
}

.btn {
  display: inline-block;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 0.7em 1.6em;
  font-size: var(--t-body);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 140ms linear, color 140ms linear;
}
.btn:hover { background: var(--ink); color: var(--deep); }
.btn:active { background: var(--muted); }

.plain,
.top__link {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--accent);
  text-underline-offset: 0.3em;
  transition: text-decoration-thickness 140ms linear;
}
.plain:hover,
.top__link:hover { text-decoration-thickness: 3px; }

.band--paper .plain { text-decoration-color: var(--deep-muted); }

.plain--big {
  font-family: var(--display);
  font-size: var(--t-name);
  white-space: nowrap;
}

/* ---------- the photo slots ---------- */
/* Neither figure is ever display: none. With no photograph the slot draws the
   thing it is a photograph of — the plan of the room, the shelf behind the bar
   — at the same aspect the photograph will take, so nothing moves when one
   arrives and no column is left stranded. */

.plate { margin: var(--s6) 0 0; }

.plate__box {
  border: 1px solid var(--rule);
  background: var(--deep);
  aspect-ratio: 16 / 9;
  padding: var(--s3);
}

.band--paper .plate__box { border-color: var(--deep-rule); background: transparent; }
.band--paper .plate img { border-color: var(--deep-rule); }

.plate__draw {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.plate img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid var(--rule);
}

.plate:not(.is-empty) .plate__box,
.plate:not(.is-empty) .plate__key { display: none; }

.plate__key,
.plate__cap {
  font-size: var(--t-small);
  line-height: 1.45;
  max-width: var(--m2);
  margin-top: var(--s3);
}

.plate__key { color: var(--muted); }
.band--paper .plate__key { color: var(--deep-muted); }

.plate__cap { border-top: 1px solid var(--rule); padding-top: var(--s2); }
.band--paper .plate__cap { border-top-color: var(--deep-rule); }

/* the drawings */

.wall, .bar, .tbl, .door, .seat circle { vector-effect: non-scaling-stroke; }

.wall { fill: none; stroke: var(--deep); stroke-width: 1; }
.door { fill: none; stroke: var(--deep-rule); stroke-width: 1; }
.bar { fill: none; stroke: var(--deep); stroke-width: 1; }
.tbl { fill: none; stroke: var(--deep); stroke-width: 1; }
.seat circle { fill: none; stroke: var(--deep); stroke-width: 1; }
.held circle { fill: var(--deep); }

.btl rect { fill: var(--rule); }
.btl .cap { fill: var(--accent); }
.shelf { fill: var(--muted); }

/* ---------- the room and Dana ---------- */

.about { display: grid; gap: var(--s5); }

.about .say { font-size: var(--t-lead); line-height: 1.55; max-width: var(--m3); }

.about .line--head { margin-top: 0; }

.plate--tall { margin-top: var(--s4); max-width: none; }
.plate--tall .plate__box { aspect-ratio: 4 / 3; }
.plate--tall img { aspect-ratio: 4 / 3; }

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

.foot { display: grid; gap: var(--s5); margin-top: var(--s5); }

.addr {
  font-style: normal;
  font-size: var(--t-lead);
  line-height: 1.6;
}

.ways { margin-top: var(--s4); display: grid; gap: var(--s2); justify-items: start; }

.ways a,
.addr a { display: inline-block; padding-block: 0.2rem; }

.hours { width: 100%; border-collapse: collapse; text-align: left; }

.hours caption {
  text-align: left;
  font-family: var(--display);
  font-size: var(--t-rubric);
  color: var(--muted);
  padding-bottom: var(--s2);
}

.hours th {
  font-weight: 400;
  text-align: left;
  padding: var(--s2) var(--gap) var(--s2) 0;
  border-top: 1px solid var(--rule);
}

.hours .is-shut { color: var(--muted); }

.hours td {
  width: var(--rail);
  text-align: right;
  padding: var(--s2) 0;
  border-top: 1px solid var(--rule);
  font-family: var(--display);
  font-size: var(--t-fig);
  color: var(--accent);
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}

/* ---------- wider ---------- */

@media (min-width: 46em) {
  .foot { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--s6); }
}

@media (min-width: 62em) {
  .display { margin-bottom: var(--s6); }

  .about {
    grid-template-columns: minmax(0, 1fr) 19rem;
    column-gap: var(--s6);
    align-items: start;
  }

  .plate--tall { margin-top: 0; }

  .line { padding-block: var(--s3) var(--s5); }
}

/* ---------- phones ---------- */
/* Two step-downs, so a narrower screen is a shorter page rather than a longer
   one. Everything here is the same scale with smaller steps in it. */

@media (max-width: 45.99em) {
  :root { --band: 1.75rem; --s5: 1.75rem; --s6: 2rem; --t-fig: 0.9375rem; }

  .line { padding-block: var(--s2) var(--s3); }
  .display { margin-bottom: var(--s4); }
  .plate__box { padding: var(--s3); }
  .plate--tall .plate__box, .plate--tall img { aspect-ratio: 3 / 2; }
  .list { margin-top: var(--s4); }
}

@media (max-width: 22.5em) {
  :root {
    --t-body: 0.9375rem;
    --t-small: 0.8125rem;
    --t-lead: 0.9375rem;
    --band: 1.25rem;
    --s5: 1.25rem;
    --s6: 1.5rem;
  }

  .display { margin-bottom: var(--s3); }

  .say + .say { margin-top: var(--s2); }
}

@media (forced-colors: active) {
  .band::before,
  .top::before { forced-color-adjust: none; background: CanvasText; }

  .btn { border: 1px solid ButtonBorder; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}