/* Visit: hours, the hand-drawn map, and the morning laid out on a ruler from 4 am to 3 pm. */
.where { padding: clamp(56px, 8vw, 110px) 0; }
.where__grid { display: grid; grid-template-columns: 5fr 7fr; gap: 32px clamp(28px, 5vw, 80px); align-items: start; }
.hours { width: 100%; max-width: 30rem; border-collapse: collapse; margin: 22px 0 14px; }
.hours th, .hours td { padding: 11px 0; border-bottom: 1px solid var(--line-light); text-align: left; font-weight: 500; }
.hours td { text-align: right; font: 500 15px var(--mono); color: var(--ink-2); }
.hours tr.is-today th, .hours tr.is-today td { color: var(--crust); font-weight: 700; }
.hours tr.is-today th::after { content: ' · today'; font: 500 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.where__note { color: var(--ink-2); }
.where__phone { font: 600 16px var(--mono); }

.map { margin: 0; }
.map svg { width: 100%; height: auto; border-radius: 10px; }
.map__ground { fill: #efe6d8; }
.map__blocks path { fill: #e2d5c2; stroke: rgba(27, 20, 15, .22); stroke-width: 1.5; }
.map__edge { fill: none; stroke: var(--ink); stroke-width: 44; stroke-linecap: round; opacity: .85; }
.map__road { fill: none; stroke: var(--flour); stroke-width: 39; stroke-linecap: round; }
.map__edge--side { stroke-width: 34; }
.map__road--side { stroke-width: 29; }
.map__street { font: 600 15px var(--mono); letter-spacing: .2em; fill: var(--ink); }
.map__street--small { font-size: 13px; fill: var(--ink-2); }
.map__loaf { fill: var(--bake); stroke: var(--ink); stroke-width: 3; }
.map__score { fill: none; stroke: var(--flour); stroke-width: 4; stroke-linecap: round; }
.map__pin { stroke: var(--ink); stroke-width: 3; stroke-dasharray: 3 5; stroke-linecap: round; }
.map__name { font: 900 34px var(--display); fill: var(--ink); text-anchor: middle; }
.map__north circle { fill: var(--flour); stroke: var(--ink); stroke-width: 2; }
.map__north path { fill: var(--crust); }
.map__north text { font: 600 13px var(--mono); fill: var(--ink); text-anchor: middle; }
@media (max-width: 899px) { .where__grid { grid-template-columns: 1fr; } .map { margin-inline: calc(-1 * var(--gutter) + 6px); } }

.clockline { padding: clamp(56px, 8vw, 110px) 0; }
.ruler { position: relative; margin-top: 40px; }
.ruler li { position: relative; display: grid; gap: 2px; padding: 0 0 26px 28px; border-left: 2px solid var(--line-dark); }
.ruler li::before { content: ''; position: absolute; left: -7px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--oven); border: 2px solid var(--yolk); }
.ruler time { font: 900 1.9rem/1 var(--display); color: var(--yolk); }
.ruler b { font: 800 1.2rem/1.2 var(--display); }
.ruler span { color: var(--on-dark-2); }
@media (min-width: 900px) {
  .ruler { height: 300px; margin-top: 48px; }
  .ruler::before { content: ''; position: absolute; left: 0; right: 0; top: 150px; height: 2px; background: var(--on-dark-2); }
  .ruler::after { content: ''; position: absolute; left: 0; right: 0; top: 142px; height: 18px; background: repeating-linear-gradient(to right, var(--on-dark-2) 0 2px, transparent 2px calc(100% / 11 - .2px)); opacity: .55; }
  .ruler li { position: absolute; left: calc(var(--at) * 100%); width: 15rem; padding: 0 0 0 14px; border-left: 2px solid var(--yolk); }
  .ruler li::before { left: -8px; width: 14px; height: 14px; }
  .ruler li:nth-child(odd) { bottom: 150px; padding-bottom: 22px; }
  .ruler li:nth-child(odd)::before { top: auto; bottom: -8px; }
  .ruler li:nth-child(even) { top: 152px; padding-top: 22px; }
  .ruler li:nth-child(even)::before { top: -8px; }
  .ruler li:last-child { transform: translateX(-100%); border-left: 0; border-right: 2px solid var(--yolk); padding: 0 14px 22px 0; text-align: right; }
  .ruler li:last-child::before { left: auto; right: -8px; }
}