@font-face {
  font-family: "DM Sans";
  src: url("/assets/type/dm-sans-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: light;
  --ink: #214332;
  --canvas: #f5efda;
  --paper: #f7f0dd;
  --clay: #a63e27;
  --rule: #b4b7a0;
  --serif: Georgia, "Times New Roman", serif;
  color: var(--ink);
  background: var(--canvas);
  font-family: "DM Sans", Arial, sans-serif;
  font-synthesis: none;
  -webkit-text-size-adjust: 100%;
}

* { box-sizing: border-box; }
body { margin: 0; }
button, a { color: inherit; }
a { text-decoration-thickness: 1px; text-underline-offset: .21em; }
button { font: inherit; }
a:focus-visible, button:focus-visible, .paper:focus-visible { outline: 3px solid var(--clay); outline-offset: 4px; }
::selection { color: var(--canvas); background: var(--ink); }
.sr, .skip:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip:focus { position: absolute; z-index: 8; top: 8px; left: 8px; padding: 12px 15px; background: var(--paper); }
[hidden] { display: none !important; }

.topline {
  display: grid;
  align-items: center;
  grid-template-columns: 1fr auto 1fr;
  margin: 0 2.7%;
  border-bottom: 1px solid var(--ink);
  min-height: 57px;
  font-size: 14px;
  font-weight: 560;
}
.topline a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.topline a:hover, .topline a:focus-visible { text-decoration: underline; }
.locale { justify-self: start; }
.topline nav { display: flex; gap: 35px; }
.concept { justify-self: end; gap: .3em; font-size: 12px; font-weight: 500; }
.fascia { display: grid; grid-template-columns: 1fr 2.8fr 1fr; align-items: center; position: relative; padding: 13px 3% 20px; }
.sign { position: relative; margin: 0; width: 100%; }
.sign img { display: block; width: 100%; }
.coffee { position: absolute; right: 7.4%; bottom: .5%; font-family: var(--serif); font-size: clamp(13px, 1.53vw, 27px); line-height: 1; font-weight: normal; text-transform: uppercase; letter-spacing: .43em; }
.sign-side { font-family: var(--serif); font-size: clamp(16px,1.48vw,28px); font-style: italic; line-height: 1.13; }
.sign-side > span { display: block; }
.right-side b { font-weight: inherit; white-space: nowrap; }
.left-side { justify-self: start; }
.right-side { justify-self: end; text-align: right; }
.window { position: relative; background: #a59a7b; isolation: isolate; }
.window picture, .doorstep-photo { display: block; width: 100%; }
.doorstep-photo { height: clamp(430px, 45vw, 770px); object-fit: cover; object-position: 50% 72%; }
.roller { container-type: inline-size; background: var(--paper); }
.menu-sheet { padding: clamp(19px, calc(6.4cqw - 2px), 36px) clamp(17px, calc(12cqw - 25px), 68px) clamp(13px, 3.4cqw, 23px); }
.menu-heading { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: clamp(12px, 3cqw, 20px); }
.menu-heading h2, .visit h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -.085em; font-style: italic; margin: 0; }
.menu-heading h2 { font-size: clamp(39px, 10.6cqw, 76px); line-height: 1; }
.cup { width: clamp(42px, 10.4cqw, 75px); transform: rotate(-7deg); }
.tabs { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 6px; border-block: 1px solid var(--ink); }
.tabs a { touch-action: manipulation; display: inline-flex; align-items: center; position: relative; padding: 4px 1px; min-height: 44px; text-decoration: none; font-size: clamp(15px, 2.7cqw, 16px); font-weight: 620; }
.tabs a:hover, .tabs a[aria-selected="true"] { color: var(--clay); }
.tabs a[aria-selected="true"]::after { content: ""; position: absolute; bottom: -1px; left: 0; right: 0; height: 3px; background: var(--clay); }
.boards { margin: clamp(12px, 2.9cqw, 19px) 0 clamp(12px, 3.4cqw, 22px); }
.paper { margin-block: 15px 30px; }
.paper h3 { font: italic 34px/1 var(--serif); margin: 10px 0; }
.serving { margin: 0 0 clamp(6px, calc(3cqw - 4px), 14px); font-size: 14px; font-style: italic; font-family: var(--serif); }
.dishes, .visit dl { margin: 0; }
.dishes > div { display: grid; grid-template-columns: 1fr auto; align-items: baseline; padding: clamp(6px, 1.6cqw, 10px) 0; border-bottom: 1px solid var(--rule); }
.dishes dt { font: normal clamp(21px, 3.8cqw, 32px)/1.08 var(--serif); letter-spacing: -.025em; }
.dishes dd { margin: 0; }
.dishes .price { font-size: clamp(15px, 2.5cqw, 16px); font-variant-numeric: tabular-nums; padding-left: 12px; }
.dishes .description { grid-column: 1/-1; font-size: 14px; margin-top: 3px; line-height: 1.4; }
.menu-note { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; font-size: 11px; }
.window-ready .window { display: flow-root; overflow: clip; min-height: clamp(430px, 45vw, 770px); }
.window-ready .window picture { position: absolute; height: 100%; inset: 0; z-index: -1; }
.window-ready .doorstep-photo { height: 100%; }
.window-ready .roller {
  --blind-offset: -100%;
  --cord: clamp(20px, 2vw, 26px);
  --pull-height: 44px;
  --travel: .58s cubic-bezier(.32,.02,.18,1);
  position: relative;
  width: min(91%, clamp(432px, calc(240px + 28%), 700px));
  margin-inline: auto clamp(4.5%, calc(8% - 16px), 6.5%);
  margin-bottom: calc(var(--cord) + var(--pull-height) + 18px);
  background: none;
}
.window-ready .menu-out .roller { --blind-offset: 0%; }
.window-ready .roller::before, .window-ready .blind-edge::after {
  content: ""; position: absolute; left: -2px; right: -2px; height: 5px;
  background: #475943; border-block: 1px solid #253f2c; border-radius: 2px;
}
.window-ready .roller::before { top: 0; z-index: 1; pointer-events: none; }
.window-ready .blind-edge { position: absolute; inset: 0; pointer-events: none; transform: translateY(var(--blind-offset)); }
.window-ready .blind-edge::after { bottom: -3px; }
.window-ready .window-animated:not(.in-hand) .menu-sheet { transition: clip-path var(--travel); }
.window-ready .window-animated:not(.in-hand) .blind-edge { transition: transform var(--travel); }
.window.in-hand .pull { cursor: grabbing; }
.window-ready .menu-sheet {
  position: relative; background: var(--paper);
  border: 1px solid rgba(55,65,40,.55); border-top: 0;
  box-shadow: 5px 7px 12px rgba(36,33,18,.18);
  clip-path: inset(0 -18px calc(0% - var(--blind-offset)) -18px);
}
/* Stack the printed pages so the longest one sets the blind's size even while rolled up. */
.window-ready .boards { display: grid; }
.window-ready .boards .paper { grid-area: 1 / 1; min-width: 0; margin: 0; }
.window-ready .boards .paper[inert] { visibility: hidden; }
.window-ready .paper h3 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.pull {
  position: absolute; top: calc(100% + var(--cord)); left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px;
  width: max-content; min-width: min(10em, 100% - 20px); max-width: calc(100% - 20px); padding: 3px 12px; pointer-events: auto;
  background: var(--paper); color: var(--ink); border: 1px solid var(--ink);
  box-shadow: 2px 3px 0 rgba(31,46,29,.23); cursor: pointer; touch-action: none; user-select: none; font: italic clamp(17px, 3cqw, 18px)/1.15 var(--serif);
}
.pull::before, .pull::after { content: ""; position: absolute; bottom: 100%; height: var(--cord); width: 1px; background: var(--ink); box-shadow: 1px 0 0 #e2d5b0; }
.pull::before { left: 18%; }
.pull::after { right: 18%; }
.pull-label { display: grid; }
.pull-label > span { grid-area: 1 / 1; }
.pull[aria-expanded="true"] .when-closed, .pull[aria-expanded="false"] .when-open { visibility: hidden; }
.pull svg { width: 16px; height: 16px; }
.menu-out .pull svg { transform: rotate(180deg); }
.pull:hover { background: #fff8e4; }
.visit { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 5vw; padding: 69px 5.4% 78px; background: var(--canvas); }
.visit h2 { font-size: clamp(56px,6vw,110px); line-height: .95; }
.visit h2 span { color: var(--clay); }
.visit h3 { font: 400 clamp(23px, 2vw, 38px)/1.1 var(--serif); letter-spacing: -.045em; margin: 0 0 15px; }
.times dl > div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--rule); }
.times dd { margin: 0; white-space: nowrap; }
.visit p, .visit dl, .visit a { font-size: 14px; line-height: 1.45; }
.neighbourhood p { margin: 0 0 12px; max-width: 30em; }
footer { border-top: 1px solid var(--ink); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0 20px; padding: 9px 2.7%; font-size: 12px; }
footer a { display: inline-flex; align-items: center; gap: .3em; min-height: 42px; text-decoration: none; }
footer a:hover { text-decoration: underline; }
@media (max-width: 850px) {
  .visit { gap: 25px; padding-inline: 4%; }
}
@media (max-width: 640px) {
  .topline { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 6px; margin: 0 5%; min-height: 49px; font-size: 13px; }
  .topline .city, .topline .nav-hours { display: none; }
  .topline nav { gap: clamp(8px, 2.5vw, 22px); }
  .topline nav a { min-width: 42px; justify-content: center; }
  .topline .concept { font-size: 11.5px; white-space: nowrap; }
  .fascia { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 14px 5% 12px; }
  .sign { flex-basis: 100%; order: -1; }
  .coffee { font-size: clamp(10px, 2.6vw, 16px); }
  .left-side { display: none; }
  .right-side { display: flex; flex-wrap: wrap; width: 100%; justify-content: space-between; align-items: baseline; margin-top: 3px; gap: 4px 12px; text-align: left; font-size: clamp(13px, 3.7vw, 18px); }
  .right-side b { display: inline; }
  .doorstep-photo { height: clamp(360px, 116vw, 620px); object-position: 50% 77%; }
  .visit { grid-template-columns: 1fr; gap: 25px; padding: 26px 5% 35px; }
  .visit h2 { font-size: 56px; }
  .visit h3 { margin: 0 0 10px; }
  .times p { margin: 9px 0 0; }
  .visit p, .visit dl, .visit a { font-size: 15px; }
  footer { padding: 10px 5%; display: grid; grid-template-columns: 1fr auto; }
  footer a { min-height: 34px; }
  footer a:nth-child(2) { grid-column: 1; }
  footer a:last-child { grid-column: 2; grid-row: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .window-ready .window-animated:not(.in-hand) :is(.menu-sheet, .blind-edge) { transition: none; }
}