/* The Corner Grind — warm-local.
   A corner shop writes things down: a name, a row of dots, and a number.
   Every time this page pairs a name with a number it draws that row, and it
   draws it nowhere else. Straw paper, damson ink, mulberry for the numbers. */

@font-face {
  font-family: "Baloo 2";
  src: url(baloo2-subset.woff2) format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Five colours. Mulberry is the value colour: every price, every time, the
     phone number. It only ever sits on a light field, which is why the day
     board in the hero is a cream card and not damson on damson. */
  --bg: #f4ead8;          /* straw, the page */
  --paper: #fdf3e7;       /* the lightest field, and type on damson */
  --tint: #ead9bd;        /* oat, the deeper field */
  --ink: #3a2138;         /* damson, type and the one dark field */
  --accent: #8d2a52;      /* mulberry, every number and nothing else */
  --accent-ink: #fdf3e7;  /* type sitting on mulberry */
  --muted: #6b5560;       /* second voice on straw, oat and paper */
  --pale: #cdb9c2;        /* second voice on damson, on the sign only */
  --rule: #c9b49b;        /* the dots and the hairlines, never type */

  /* Spacing: six steps. Two of them set every section's padding, and the
     page has no third rhythm. */
  --s1: 0.4rem;
  --s2: 0.8rem;
  --s3: 1.4rem;
  --s4: 2.4rem;
  --s5: 3rem;
  --s6: 6rem;

  /* Type: a quiet scale. The display face carries the page by weight and
     roundness, not by size, so h1 sits at 2.95 times the body, where the
     library runs 3.8 to 4.9 and bold-trade runs 5.88. */
  --t-h1: clamp(2.375rem, 3.9vw, 3.5rem);
  --t-h2: clamp(1.625rem, 2.4vw, 2.125rem);
  --t-h3: 1.3125rem;
  --t-num: clamp(2rem, 3.4vw, 3rem);
  --t-body: 1.1875rem;
  --t-small: 1rem;
  --t-tiny: 0.875rem;

  --display: "Baloo 2", "Trebuchet MS", "Segoe UI", sans-serif;
  --body: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;

  --gutter: 1.25rem;
  --field: var(--bg);     /* what the dots are drawn on, set per section */
}

@media (min-width: 62em) {
  :root { --gutter: 2.25rem; }
}

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

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

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

img { max-width: 100%; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 800;
  line-height: 1.05;
  margin: 0;
}

h1 { font-size: var(--t-h1); letter-spacing: -0.02em; text-wrap: balance; }
h2 { font-size: var(--t-h2); letter-spacing: -0.015em; text-wrap: balance; }
h3 { font-size: var(--t-h3); font-weight: 700; letter-spacing: -0.005em; }

p { margin: 0 0 var(--s3); }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

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

.inside {
  width: min(100% - (var(--gutter) * 2), 1120px);
  margin-inline: auto;
}

.past { position: absolute; left: -9999px; background: var(--ink); color: var(--paper); padding: var(--s2) var(--s3); }
.past:focus { left: var(--s2); top: var(--s2); z-index: 20; }

/* ---- the row of dots, which is the whole idea -------------------------- */
/* A name, a run of dots, a number. It appears in the hero, on the board and
   in the hours table, and nowhere that is not a name against a number. */

.entry {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  padding-block: var(--s2);
}

.entry__name { flex: 0 1 auto; }

.entry__dots {
  flex: 1 1 1.5rem;
  min-width: 1.25rem;
  align-self: baseline;
  transform: translateY(2px);
  height: 5px;
  background-image: radial-gradient(circle at 2.5px 2.5px, var(--rule) 2.2px, transparent 2.3px);
  background-size: 9px 5px;
  background-repeat: repeat-x;
}

.entry__val {
  flex: none;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.1875rem;
  color: var(--accent);
  white-space: nowrap;
}

/* ---- the awning -------------------------------------------------------- */

.awning { background: var(--tint); border-bottom: 3px solid var(--ink); padding-block: var(--s2); }

.awning__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s3); }

.name {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.3125rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  padding-block: 0.25rem;
}
.name:hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 4px; }

.awning__nav { display: flex; gap: var(--s3); margin-right: auto; font-size: var(--t-small); }
.awning__nav a { padding: 0.35rem 0; text-underline-offset: 4px; }
.awning__nav a:hover { color: var(--accent); text-decoration-thickness: 2px; }

.awning__where {
  font-size: var(--t-small);
  padding: 0.35rem 0;
  text-underline-offset: 4px;
}
.awning__where:hover { text-decoration-thickness: 2px; }

@media (max-width: 47.99em) {
  .awning__nav { order: 3; width: 100%; margin-right: 0; }
  .awning__where { margin-left: auto; }
}

/* A phone reads a board as a list, not as a table of air: the rows tighten,
   and the long line under the hero takes the stacked form early, because a
   forty-character name leaves a leader nothing to cross. */
@media (max-width: 61.99em) {
  .entry { padding-block: 0.6rem; }
  .front__art .entry { flex-wrap: wrap; }
  .front__art .entry__name { flex: 1 0 100%; }
  .front__art .entry__dots { min-width: 3rem; }
  .front__art .entry__val { margin-left: auto; }
}

/* ---- the hero: the one dark field, and the slot paints it -------------- */

#hero {
  background: var(--ink);
  color: var(--paper);
  padding-block: var(--s5) 0;
}

/* The shopfront slot is a full-bleed band at the foot of the hero, and it is
   never empty: with no photograph it says how to recognise the shop from the
   street, which is the one thing the missing photograph would have told you.
   With a photograph the line goes and the picture takes the band at full
   strength. No type ever sits on it, so it needs no scrim and it is never
   dimmed to keep words readable. */
.front {
  margin: 0;
  overflow: hidden;
  border-top: 3px solid var(--paper);
}
.front img { display: block; width: 100%; height: 100%; object-fit: cover; }

.front:not(.is-empty) {
  aspect-ratio: 3 / 2;
  border-top: 0;
}
.front:not(.is-empty) .front__art { display: none; }

.front__art { display: block; padding-block: var(--s2); }
.front__art .entry { display: flex; padding-block: 0; }
.front__art .entry__name { color: var(--pale); }
.front__art .entry__val { color: var(--paper); }

/* The words stand alone on the field. No card beside them, no second column:
   the two designs in the kit open differently, and this one opens on the field
   with one line of type and the way in. */
.open { margin-bottom: var(--s5); }
.open h1 { max-width: 40rem; }

.say { font-size: 1.1875rem; max-width: 33rem; margin-block: var(--s3) var(--s4); }

.acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin: 0; }

.go {
  display: inline-block;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.1875rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  padding: 0.7rem 1.4rem;
}
.go:hover, .go:focus-visible { background: var(--accent); color: var(--accent-ink); }

.call {
  display: inline-block;
  color: var(--paper);
  font-size: var(--t-small);
  padding: 0.45rem 0;
  text-underline-offset: 4px;
}
.call:hover { text-decoration-thickness: 2px; }

/* The day is a cream band across the whole page under the hero, the same
   full width as the shopfront line above it. It is cream so the times keep
   their mulberry, and it sits under the hero rather than beside the headline
   so that this page and bold-trade do not open the same way. */
.day {
  background: var(--paper);
  color: var(--ink);
  --field: var(--paper);
  padding-block: var(--s3);
  border-top: 3px solid var(--accent);
}

.day__cap {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--t-small);
  color: var(--muted);
  margin: 0 0 var(--s1);
}

.day__list { list-style: none; margin: 0; padding: 0; }
.day__list .entry { border-bottom: 1px solid var(--rule); }
.day__list .entry:last-child { border-bottom: 0; padding-bottom: 0; }

@media (min-width: 62em) {
  #hero { padding-block: var(--s6) 0; }
  .open { margin-bottom: var(--s6); }
  .front:not(.is-empty) { aspect-ratio: 3 / 1; }
  .front__art .entry__val { font-size: 1.375rem; }
  .say { font-size: 1.25rem; }
  .day { padding-block: var(--s4); }
  .day__cap { font-size: var(--t-body); }
  .day .entry__val { font-size: 1.375rem; }
  /* two rows of two, so the band is a band and not a list down one side */
  .day__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s6); }
  .day__list .entry:nth-last-child(-n + 2) { border-bottom: 0; padding-bottom: 0; }
}

/* ---- the board, which is the same row twenty times --------------------- */

#services { padding-block: var(--s5); --field: var(--bg); }

.board__head { margin-bottom: var(--s4); }
.board__note { color: var(--muted); font-size: var(--t-small); max-width: 30rem; margin: var(--s2) 0 0; }

.board { display: grid; gap: var(--s4); }

.board__group h3 { padding-bottom: var(--s1); border-bottom: 3px solid var(--ink); }

.board__list { list-style: none; margin: 0; padding: 0; }
.board__list .entry { border-bottom: 1px solid var(--rule); }

.board__foot { color: var(--muted); font-size: var(--t-small); max-width: 33rem; margin: var(--s4) 0 0; }

@media (min-width: 62em) {
  #services { padding-block: var(--s6); }
  .board { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6); }
  .board__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s3); }
  .board__note { margin: 0; text-align: right; }
}

/* ---- Lena and Marco, beside the sign ----------------------------------- */

#about { background: var(--tint); padding-block: var(--s5); --field: var(--tint); }

.pair { display: grid; gap: var(--s4); }
.pair__say p { max-width: 33rem; margin-top: var(--s3); }

/* The second slot paints the shop sign when it is empty, so the column is
   never a hole; the photograph replaces the sign rather than filling a gap. */
.plaque {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--ink);
  max-width: 19rem;
}
.plaque img { display: block; width: 100%; height: 100%; object-fit: cover; }

.plaque__art {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--s2);
  padding: var(--s3);
  text-align: center;
  color: var(--paper);
}
.plaque:not(.is-empty) .plaque__art { display: none; }

.plaque__name { font-family: var(--display); font-weight: 800; font-size: 1.625rem; line-height: 1.1; letter-spacing: -0.015em; }
.plaque__sub { font-size: var(--t-small); color: var(--pale); }
.plaque__year { font-family: var(--display); font-weight: 700; font-size: var(--t-small); color: var(--pale); }

@media (min-width: 62em) {
  #about { padding-block: var(--s6); }
  .pair {
    grid-template-columns: minmax(0, 20rem) minmax(0, 33rem);
    justify-content: center;
    gap: var(--s5);
    align-items: center;
  }
  .pair__say { grid-column: 2; grid-row: 1; }
  .plaque { grid-column: 1; grid-row: 1; width: 100%; max-width: none; }
}

/* ---- the door ---------------------------------------------------------- */

#cta { background: var(--paper); border-top: 3px solid var(--ink); padding-block: var(--s5); --field: var(--paper); }

.door { display: grid; gap: var(--s4); }
.door__say h2 { margin-bottom: var(--s3); }
.door__say p { max-width: 30rem; }

.door__num { margin: var(--s4) 0 var(--s2); }
.door__num a {
  font-family: var(--display);
  font-weight: 800;
  font-size: var(--t-num);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--accent);
  text-decoration: none;
  display: inline-block;
  white-space: nowrap;
}
.door__num a:hover, .door__num a:focus-visible { text-decoration: underline; text-decoration-thickness: 5px; text-underline-offset: 8px; }

.door__also { font-size: var(--t-small); margin-bottom: var(--s1); }
.door__also a { display: inline-block; padding-block: 0.35rem; text-underline-offset: 4px; }
.door__also a:hover { color: var(--accent); }

.when { width: 100%; border-collapse: collapse; text-align: left; }
.when caption {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--t-h3);
  text-align: left;
  padding-bottom: var(--s2);
  border-bottom: 3px solid var(--ink);
  margin-bottom: var(--s1);
}
.when th,
.when td { padding-block: var(--s2); font-weight: normal; vertical-align: baseline; border-bottom: 1px solid var(--rule); }
.when th {
  width: 100%;
  background-image: radial-gradient(circle at 2.5px 2.5px, var(--rule) 2.2px, transparent 2.3px);
  background-size: 9px 5px;
  background-repeat: repeat-x;
  background-position: left bottom 1.15rem;
}
.when th span { background: var(--field); padding-right: var(--s2); }
.when td {
  font-family: var(--display);
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
  padding-left: var(--s2);
  background: var(--field);
}
.when td span { background: var(--field); }

@media (min-width: 62em) {
  #cta { padding-block: var(--s6); }
  .door { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--s6); align-items: start; }
}

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

#contact { background: var(--tint); border-top: 3px solid var(--ink); padding-block: var(--s4); font-size: var(--t-small); }

.base p { margin-bottom: var(--s1); }
.base__line { color: var(--muted); }
.base__line a { display: inline-block; padding-block: 0.35rem; color: var(--ink); text-underline-offset: 4px; }
.base__line a:hover { color: var(--accent); }

.name--base { font-size: var(--t-h3); margin-bottom: var(--s2); }

@media (min-width: 62em) {
  #contact { padding-block: var(--s5); }
  .base { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s5); }
  .base p { margin-bottom: 0; }
  .name--base { margin-right: auto; }
}

/* 320 is a real phone: the scale steps down one notch so the page still ends
   well inside the ceiling and no number breaks across two lines. */
@media (max-width: 22.5em) {
  :root {
    --gutter: 1rem;
    --s3: 1.125rem;
    --s4: 1.75rem;
    --s5: 2.25rem;
    --t-h1: 2.0625rem;
    --t-h2: 1.5rem;
    --t-h3: 1.1875rem;
    --t-num: 1.75rem;
    --t-body: 1.0625rem;
    --t-small: 0.9375rem;
  }
  .say { font-size: 1.0625rem; }
  .go { font-size: 1.0625rem; padding: 0.6rem 1rem; }
  .entry__val { font-size: 1.0625rem; }

  /* At 320 a name of any length wraps, and a leader that runs beside the
     first line of a two-line name points at nothing. So the row stacks on
     purpose: the name takes its own line, and the dots then run the whole
     width to the value underneath it. Longer runs of dots, not shorter. */
  .entry { flex-wrap: wrap; padding-block: 0.35rem; line-height: 1.4; }
  .entry__name { flex: 1 0 100%; }
  .entry__dots { flex: 1 1 3rem; min-width: 3rem; }
  .entry__val { margin-left: auto; }

  /* The hours table keeps its cells, because a table that stops being a
     table stops being read as one. At 288px a day name wraps, and there is
     no width left for a leader to cross, so the dots come off rather than
     run under the second line pointing at a value on the first. The value
     goes to the right edge instead. The device still holds twice at this
     width, in the day card and on the board. */
  .when th, .when td { padding-block: 0.5rem; }
  .when th { background-image: none; }
  .when th span { background: none; padding-right: 0; }
  .when td { text-align: right; }
}

/* Motion: none. Nothing on this page moves, fades or slides, so there is
   nothing for prefers-reduced-motion to turn off. Hover and focus change
   colour and underline, which happens the moment you land on them. */