/* ════════════════════════════════════════════════════════════════════
   Bell Lane Coffee — one static page.

   Aesthetic: a letterpress café card. Warm oat paper, espresso ink,
   a single terracotta accent, dotted menu leaders, real paper grain.
   No JavaScript, no build step, no data fetching.

   The colours, spacing and type sizes all come from the variables in
   :root below — change one there and it changes everywhere.
   ════════════════════════════════════════════════════════════════════ */

:root {
  /* ink & paper */
  --paper:       #f2e9da;
  --paper-2:     #eaddc8;
  --paper-3:     #e0d1b6;
  --ink:         #2a1d15;
  --ink-2:       #6b5644;
  --ink-3:       #9c8770;
  --accent:      #b4552f;
  --accent-deep: #8e3d1c;
  --olive:       #6c7850;
  --rule:        rgb(42 29 21 / 24%);
  --rule-soft:   rgb(42 29 21 / 13%);
  --shadow:      rgb(42 29 21 / 16%);

  /* type */
  --display: "Fraunces", "Hoefler Text", Georgia, serif;
  --body:    "Karla", "Trebuchet MS", sans-serif;

  /* rhythm */
  --pad:  clamp(1.25rem, 5vw, 5.5rem);
  --gap:  clamp(2.75rem, 5.5vw, 5.5rem);
  --sheet-max: 82rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:       #191310;
    --paper-2:     #221a15;
    --paper-3:     #2d221a;
    --ink:         #f1e6d5;
    --ink-2:       #c1b09a;
    --ink-3:       #8b7a67;
    --accent:      #dc7b4d;
    --accent-deep: #e79063;
    --olive:       #97a377;
    --rule:        rgb(241 230 213 / 22%);
    --rule-soft:   rgb(241 230 213 / 11%);
    --shadow:      rgb(0 0 0 / 45%);
  }
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: clamp(1rem, 0.94rem + 0.3vw, 1.1rem);
  line-height: 1.62;
  font-weight: 400;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ── texture layers ─────────────────────────────────────────────── */

.grain,
.vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

/* Grain sits above the page for a letterpress bite; the vignette sits
   behind it so its light wash never dulls the text on top of it. */
.grain   { z-index: 90; }
.vignette { z-index: 0; }

.grain {
  opacity: 0.42;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.34'/%3E%3C/svg%3E");
}

.vignette {
  background:
    radial-gradient(115% 85% at 22% 8%, rgb(255 246 228 / 55%) 0%, transparent 58%),
    radial-gradient(90% 70% at 92% 96%, rgb(180 85 47 / 9%) 0%, transparent 62%);
}

@media (prefers-color-scheme: dark) {
  .grain { opacity: 0.34; mix-blend-mode: soft-light; }
  .vignette {
    background:
      radial-gradient(115% 85% at 20% 4%, rgb(255 214 160 / 8%) 0%, transparent 60%),
      radial-gradient(90% 70% at 95% 98%, rgb(220 123 77 / 10%) 0%, transparent 64%);
  }
}

/* ── skip link ──────────────────────────────────────────────────── */

.skip {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 120;
  padding: 0.7rem 1.1rem;
  background: var(--ink);
  color: var(--paper);
  font: 600 0.85rem/1 var(--body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
}
.skip:focus { left: 0.75rem; top: 0.75rem; }

/* ── sheet / page grid ──────────────────────────────────────────── */

.sheet {
  position: relative;
  z-index: 1;
  max-width: var(--sheet-max);
  margin-inline: auto;
  padding: clamp(2.5rem, 7vw, 5.5rem) var(--pad) 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--gap);
}

/* ── shared type ────────────────────────────────────────────────── */

.h-display {
  margin: 0;
  font-family: var(--display);
  font-optical-sizing: none;
  font-variation-settings: "SOFT" 60, "WONK" 1, "opsz" 90;
  font-weight: 500;
  font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.4rem);
  line-height: 0.95;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 clamp(1rem, 2vw, 1.6rem);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.bean-mark {
  width: 9px;
  height: 14px;
  flex: none;
  border-radius: 50%;
  background: var(--accent);
  transform: rotate(-20deg);
  box-shadow: inset 2.5px 0 0 -0.5px var(--paper);
}

/* ── masthead ───────────────────────────────────────────────────── */

.masthead { position: relative; }

.wordmark {
  margin: 0;
  font-family: var(--display);
  font-optical-sizing: none;
  font-variation-settings: "SOFT" 30, "WONK" 1, "opsz" 144;
  font-weight: 600;
  font-size: clamp(3.1rem, 1.1rem + 9.4vw, 7.4rem);
  line-height: 0.82;
  letter-spacing: -0.045em;
  color: var(--ink);
}

.wordmark__l1,
.wordmark__l2 { display: block; }

.wordmark__l2 {
  margin-left: 0.06em;
  font-weight: 300;
  font-style: italic;
  font-variation-settings: "SOFT" 90, "WONK" 1, "opsz" 144;
  color: var(--accent);
}

.lede {
  max-width: 34ch;
  margin: clamp(1.4rem, 3vw, 2.1rem) 0 0;
  font-size: clamp(1.02rem, 0.95rem + 0.4vw, 1.16rem);
  line-height: 1.66;
  color: var(--ink-2);
  text-wrap: pretty;
}

.jump {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 1.5rem;
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
}

.jump a {
  position: relative;
  padding-bottom: 0.28rem;
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
}

.jump a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.jump a:hover::after,
.jump a:focus-visible::after { transform: scaleX(1); }

/* letterpress stamp */

.stamp {
  width: clamp(6.5rem, 15vw, 9.5rem);
  margin-top: 2.5rem;
  overflow: visible;
  animation: turn 64s linear infinite;
}

.stamp__ring {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.4;
  opacity: 0.75;
}
.stamp__ring--in { stroke-width: 3.5; opacity: 0.22; }

.stamp__text {
  fill: var(--accent-deep);
  font-family: var(--body);
  font-size: 12.4px;
  font-weight: 700;
  letter-spacing: 1.85px;
}

.stamp__bean { fill: var(--ink); }
.stamp__crease {
  fill: none;
  stroke: var(--paper);
  stroke-width: 2.6;
  stroke-linecap: round;
}

@keyframes turn { to { transform: rotate(360deg); } }

/* ── photo plate ────────────────────────────────────────────────── */

.plate { margin: 0; }

.plate__frame {
  position: relative;
  padding: clamp(0.5rem, 1.2vw, 0.85rem);
  background: var(--paper-2);
  border: 1px solid var(--rule-soft);
  box-shadow:
    0 1px 0 rgb(255 255 255 / 35%) inset,
    0 clamp(0.8rem, 2vw, 1.6rem) clamp(1.6rem, 4vw, 3rem) calc(-1 * clamp(0.6rem, 1.5vw, 1.1rem)) var(--shadow);
  transform: rotate(-1.15deg);
}

.plate__frame::after {
  content: "";
  position: absolute;
  inset: clamp(0.5rem, 1.2vw, 0.85rem);
  box-shadow: 0 0 0 1px rgb(42 29 21 / 22%) inset;
  pointer-events: none;
}

.plate img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  object-position: 50% 56%;
  background: var(--paper-3);
  filter: saturate(0.94) contrast(1.02);
}

.plate figcaption {
  max-width: 42ch;
  margin: 1.35rem 0 0 0.4rem;
  font-size: 0.83rem;
  font-style: italic;
  line-height: 1.55;
  color: var(--ink-2);
}

.figcaption__no {
  margin-right: 0.5rem;
  font-style: normal;
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-deep);
}

/* ── bands (hours / menu / find) ────────────────────────────────── */

.band {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 3.25rem);
  padding-top: clamp(2.25rem, 5vw, 3.5rem);
  border-top: 1px solid var(--rule);
}

.band__head > * + * { margin-top: 0.9rem; }

.band__note {
  max-width: 30ch;
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--ink-2);
  text-wrap: pretty;
}

/* ── dotted-leader rows (hours, menu, contact) ──────────────────── */

.rows { margin: 0; }

.rows .row {
  display: flex;
  align-items: flex-end;
  padding: 0.42rem 0;
}

.rows .row + .row { border-top: 1px solid var(--rule-soft); }

.rows dt {
  order: 1;
  max-width: 30ch;
  font-weight: 500;
}

.rows .row::after {
  content: "";
  order: 2;
  flex: 1 1 1.5rem;
  min-width: 1.25rem;
  margin: 0 0.55rem 0.42em;
  border-bottom: 1px dotted var(--ink-3);
  opacity: 0.65;
}

.rows dd {
  order: 3;
  margin: 0;
  flex: none;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.row__sub,
.row__thru {
  display: inline;
  font-size: 0.82em;
  font-weight: 400;
  font-style: italic;
  color: var(--ink-3);
}
.row__thru { font-style: normal; color: var(--ink-2); }

/* hours read as the headline information on the page */
.rows--hours dt,
.rows--hours dd {
  font-family: var(--display);
  font-optical-sizing: none;
  font-variation-settings: "SOFT" 50, "WONK" 0, "opsz" 40;
  font-size: clamp(1.15rem, 0.95rem + 0.9vw, 1.6rem);
  line-height: 1.24;
}
.rows--hours dt { font-weight: 500; }
.rows--hours dd { font-weight: 600; color: var(--ink); }
.rows--hours .row { padding: 0.6rem 0; }

.rows--hours .is-shut {
  font-weight: 400;
  font-style: italic;
  color: var(--ink-3);
}

.asides {
  grid-column: 1 / -1;
  margin: 0.35rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.7rem;
  max-width: 62ch;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--ink-2);
}

.asides li {
  display: grid;
  grid-template-columns: 5.6rem minmax(0, 1fr);
  gap: 0 0.5rem;
}

.asides__k {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  line-height: 1.85;
  text-transform: uppercase;
  color: var(--accent-deep);
}

/* ── menu ───────────────────────────────────────────────────────── */

.menu-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.25rem, 5vw, 4rem);
}

.menu-col__title {
  margin: 0 0 1rem;
  padding-bottom: 0.55rem;
  border-bottom: 2px solid var(--ink);
  font-family: var(--body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.price {
  font-family: var(--display);
  font-optical-sizing: none;
  font-variation-settings: "SOFT" 40, "WONK" 0, "opsz" 30;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--accent-deep);
}

.menu-col__foot {
  margin: 1.2rem 0 0;
  font-size: 0.83rem;
  line-height: 1.6;
  color: var(--ink-3);
  text-wrap: pretty;
}

/* ── find us ────────────────────────────────────────────────────── */

.find {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 4.5vw, 3.5rem);
  align-items: start;
}

.addr {
  margin: 0 0 1.35rem;
  font-style: normal;
  display: grid;
  gap: 0.1rem;
}

.addr__line {
  font-family: var(--display);
  font-optical-sizing: none;
  font-variation-settings: "SOFT" 50, "WONK" 1, "opsz" 60;
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.4rem);
  font-weight: 400;
  line-height: 1.28;
}

.addr__line--big {
  font-size: clamp(1.7rem, 1.2rem + 2vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.addr__line--pc {
  margin-top: 0.4rem;
  font-family: var(--body);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--accent-deep);
}

.find__travel {
  max-width: 40ch;
  margin: 0 0 1.6rem;
  font-size: 0.93rem;
  line-height: 1.65;
  color: var(--ink-2);
  text-wrap: pretty;
}

.rows--contact dt {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.rows--contact dd { font-size: 0.95rem; }
.rows--contact { max-width: 34rem; }

a { color: var(--accent-deep); }

.rows--contact a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 1px;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.rows--contact a:hover,
.rows--contact a:focus-visible {
  background: var(--accent);
  color: var(--paper);
}

.find__links { margin: 1.9rem 0 0; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.72rem 1.15rem;
  background: transparent;
  border: 1.5px solid var(--ink);
  color: var(--ink);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.28s ease, color 0.28s ease, transform 0.28s ease;
}

.btn svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.btn:hover,
.btn:focus-visible {
  background: var(--ink);
  color: var(--paper);
  transform: translateY(-2px);
}

/* sketch map */

.find__map { max-width: 34rem; }

.find__map svg {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--rule);
  background: var(--paper-2);
}

.map__bg { fill: var(--paper-2); }
.map__blocks rect { fill: var(--paper-3); }

.map__road {
  fill: none;
  stroke: var(--paper);
  stroke-width: 32;
}

.map__kerb {
  fill: none;
  stroke: var(--rule);
  stroke-width: 1;
}

.map__label text,
.map__station text,
.map__compass text {
  fill: var(--ink-3);
  font-family: var(--body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-anchor: middle;
}

/* Rotated street labels need their own anchor: with rotate(-90) an
   "end" anchor runs the text off the bottom of the canvas. */
.map__label text { text-anchor: end; }
.map__label text.at-start { text-anchor: start; }
.map__label text.at-mid { text-anchor: middle; }

.map__station circle {
  fill: var(--paper);
  stroke: var(--olive);
  stroke-width: 3.5;
}

.map__pin-shape {
  fill: var(--accent);
}
.map__pin-dot { fill: var(--paper-2); }

.map__pin-label {
  fill: var(--accent-deep);
  font-family: var(--body);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-anchor: middle;
}

.map__compass path { fill: var(--ink-3); }

/* ── footer ─────────────────────────────────────────────────────── */

.foot {
  /* the sheet's row-gap already separates this from the section above */
  padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
}

.foot__rule {
  height: 6px;
  margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
  background-image: repeating-linear-gradient(
    90deg,
    var(--accent) 0 10px,
    transparent 10px 20px
  );
  opacity: 0.55;
}

.foot__name {
  margin: 0 0 0.5rem;
  font-family: var(--display);
  font-optical-sizing: none;
  font-variation-settings: "SOFT" 40, "WONK" 1, "opsz" 90;
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.85rem);
  font-weight: 500;
  letter-spacing: -0.02em;
}

.foot__small {
  margin: 0;
  font-size: 0.84rem;
  color: var(--ink-2);
}

.foot__small--quiet {
  margin-top: 0.75rem;
  font-style: italic;
  color: var(--ink-3);
}

.foot__small a { color: inherit; text-decoration-color: var(--accent); }

/* ── focus ──────────────────────────────────────────────────────── */

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

/* ── load reveal ────────────────────────────────────────────────── */

.reveal {
  animation: rise 0.85s cubic-bezier(0.22, 0.75, 0.2, 1) backwards;
  animation-delay: var(--d, 0ms);
}

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* the plate keeps its tilt while it rises */
.plate.reveal { animation-name: rise-plate; }

@keyframes rise-plate {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}

/* ── wide screens: split masthead / photo, sticky band headings ──── */

@media (min-width: 56.25rem) {
  .sheet {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
    column-gap: clamp(2.5rem, 5vw, 5rem);
  }

  .masthead {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
  }

  .plate {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    margin-right: calc(-1 * clamp(0.5rem, 2.5vw, 2.75rem));
  }

  .band,
  .foot { grid-column: 1 / -1; }

  .stamp {
    position: absolute;
    right: clamp(-5rem, -3vw, -1rem);
    bottom: clamp(-1rem, 1vw, 1.5rem);
    margin-top: 0;
    z-index: 3;
    filter: drop-shadow(0 6px 14px var(--shadow));
  }

  .band {
    grid-template-columns: minmax(11rem, 15rem) minmax(0, 1fr);
    column-gap: clamp(2.5rem, 5vw, 5rem);
  }

  .band__head {
    position: sticky;
    top: clamp(2rem, 5vw, 4rem);
    align-self: start;
  }

  .asides { grid-column: 2; }

  .menu-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .find { grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); }
}

/* stagger the bands in on wide screens too */
@media (min-width: 56.25rem) {
  .band--hours { --d: 520ms; }
}

/* ── narrow screens ─────────────────────────────────────────────── */

@media (max-width: 56.1875rem) {
  .stamp { margin-left: auto; display: block; }
  .plate { margin-top: 0.5rem; }
}

@media (max-width: 30rem) {
  .rows--hours dt,
  .rows--hours dd { font-size: 1.08rem; }

  .rows dt { max-width: 22ch; }

  .asides li { grid-template-columns: minmax(0, 1fr); }
  .asides__k { line-height: 1.4; margin-bottom: 0.15rem; }
}

/* Very narrow phones: the contact values are long and set to nowrap, which
   would otherwise force the whole page wider than the screen. Stack the
   label above the value and drop the leader instead. */
@media (max-width: 23.5rem) {
  .rows--contact .row {
    display: grid;
    gap: 0.05rem;
    padding: 0.5rem 0;
  }

  .rows--contact .row::after { display: none; }

  .rows--contact dt,
  .rows--contact dd {
    max-width: none;
    text-align: left;
    white-space: normal;
  }
}

/* ── respect reduced motion ─────────────────────────────────────── */

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

/* ── print: a clean card to pin up behind the counter ───────────── */

@media print {
  .grain,
  .vignette,
  .jump,
  .skip,
  .stamp,
  .find__map,
  .find__links,
  .foot__rule { display: none !important; }

  body { background: #fff; color: #000; font-size: 10.5pt; }

  .sheet {
    display: block;
    max-width: none;
    padding: 0;
  }

  .plate { break-inside: avoid; margin-top: 1rem; }
  .plate__frame { transform: none; box-shadow: none; border: 1px solid #999; }
  .plate img { aspect-ratio: 16 / 9; }

  .band {
    break-inside: avoid;
    display: block;
    padding-top: 1.1rem;
    border-top: 1px solid #999;
    margin-top: 1.1rem;
  }

  .band__head { position: static; }
  .menu-cols { display: block; }
  .menu-col + .menu-col { margin-top: 1.2rem; }
  .find { display: block; }

  .wordmark { font-size: 34pt; }
  .wordmark__l2 { color: #000; }
  .price,
  .addr__line--pc,
  .asides__k,
  .figcaption__no { color: #000; }
  .reveal { animation: none; }
}