/* site.css — Al Fallaha Mosakhan. Reads tokens.css; holds no raw colour, size or easing.

   Mobile first: the base rules are the phone layout, and (min-width: 48rem)
   widens it. Logical properties only, so the same rules serve Arabic (RTL, the
   default) and English. State is a data-* attribute set by site.js.

   One motif runs through the page: the arched mouth of a taboon oven, the dome
   of the owner's logo. The hero photo and the three promise photos are framed
   in it.

   Order: base, shared pieces, then the page top to bottom:
   masthead + phone menu, hero, story, hours + dial, find, contact, footer,
   dock, motion, 404. */

/* ---------- Base ---------- */

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

html {
  background: var(--char);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-block-start: var(--space-5);
  font-synthesis: none;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--dough);
  color: var(--char);
  font-family: var(--font);
  font-size: var(--fs-base);
  font-weight: var(--w-regular);
  line-height: var(--lh-body);
  --focus: var(--sumac);
}

h1, h2, h3, p, ul, ol, table { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, picture { display: block; }
img { max-inline-size: 100%; block-size: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }

:focus-visible {
  outline: var(--focus-width) solid var(--focus);
  outline-offset: var(--focus-offset);
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: var(--w-display);
  line-height: var(--lh-display);
  text-wrap: balance;
}
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-xl); }

/* ---------- Shared pieces ---------- */

.wrap {
  inline-size: min(100% - 2 * var(--gutter), var(--wrap));
  margin-inline: auto;
}

.visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  inset-block-start: var(--space-2);
  inset-inline-start: var(--space-2);
  z-index: calc(var(--z-header) + 1);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--saffron);
  color: var(--char);
  font-weight: var(--w-medium);
  translate: 0 -200%;
}
.skip-link:focus { translate: 0 0; }

.icon {
  flex: none;
  inline-size: var(--icon);
  block-size: var(--icon);
  fill: none;
  stroke: currentColor;
  stroke-width: var(--icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon--brand { fill: currentColor; stroke: none; }
[dir="rtl"] .icon--mirror { scale: -1 1; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-block-size: var(--tap);
  padding: var(--space-2) var(--space-5);
  border: var(--border) solid transparent;
  border-radius: var(--radius-pill);
  font-size: var(--fs-base);
  font-weight: var(--w-medium);
  line-height: var(--lh-snug);
  text-align: center;
  text-decoration: none;
  transition: background-color var(--dur-fast), color var(--dur-fast);
}
.button--saffron { background: var(--saffron); color: var(--char); }
.button--saffron:hover { background: var(--saffron-deep); }
.button--ghost { border-color: var(--line-on-dark); color: var(--milk); }
.button--ghost:hover { background: var(--wash-on-dark); }
.button--sumac { background: var(--sumac); color: var(--milk); }
.button--sumac:hover { background: var(--sumac-deep); }

/* ---------- Masthead ---------- */

.masthead {
  position: relative;
  z-index: var(--z-header);
  background: var(--char);
  color: var(--milk);
  --focus: var(--saffron);
}

.masthead__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-5);
  padding-block: var(--space-4);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--fs-brand);
  font-weight: var(--w-display);
  line-height: 1;
  text-decoration: none;
}
.brand__emblem,
.site-footer__emblem {
  flex: none;
  inline-size: var(--logo);
  block-size: var(--logo);
  fill: none;
  stroke: currentColor;
  stroke-width: var(--emblem-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* On the home pages the bar lies over the hero instead of above it. */
.masthead--over {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  background: none;
}

.menu { flex: 1 0 100%; }

.menu__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--space-5);
}

.menu__link {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--tap);
  font-size: var(--fs-sm);
  font-weight: var(--w-medium);
  text-decoration: none;
}
.menu__link:hover {
  text-decoration: underline;
  text-decoration-thickness: var(--border);
  text-underline-offset: var(--underline-offset);
}

.menu__item--lang .menu__link {
  min-block-size: var(--tap-small);
  padding-inline: var(--space-4);
  border: var(--border) solid var(--line-on-dark);
  border-radius: var(--radius-pill);
}
.menu__item--lang .menu__link:hover {
  background: var(--wash-on-dark);
  text-decoration: none;
}

.menu-toggle { display: none; }

@media (min-width: 48rem) {
  .brand { --fs-brand: var(--fs-xl); --logo: var(--logo-wide); gap: var(--space-3); }
  .hero__actions .button { padding-inline: var(--space-5); }
  .menu { flex: none; }
  .menu__item--lang { margin-inline-start: var(--space-2); }
}

/* The phone menu: with scripts on, the nav itself becomes a dark full-screen
   panel that grows as a circle from the menu button and shrinks back into it.
   site.js writes --menu-x / --menu-y (the button's centre), toggles data-open
   on the panel, and sets data-menu-open on <html> while it is open.

   Do not put transform, filter or backdrop-filter on .masthead: it would
   become the containing block for this fixed panel and clip it to the bar. */
@media (max-width: 47.99rem) {
  html[data-js][data-menu-open] { overflow: hidden; }

  html[data-js] .menu-above { position: relative; z-index: 1; }

  html[data-js] .menu-toggle {
    display: inline-grid;
    place-items: center;
    inline-size: var(--tap);
    block-size: var(--tap);
    padding: 0;
    border: var(--border) solid var(--line-on-dark);
    border-radius: 50%;
    background: none;
    color: var(--milk);
    cursor: pointer;
  }
  .menu-toggle__bars {
    display: grid;
    gap: var(--bar-gap);
    inline-size: var(--bar-width);
  }
  .menu-toggle__bars::before,
  .menu-toggle__bars::after {
    content: "";
    block-size: var(--bar);
    border-radius: var(--bar);
    background: currentColor;
    transition: translate var(--dur-fast), rotate var(--dur-fast);
  }
  .menu-toggle[aria-expanded="true"] .menu-toggle__bars::before {
    translate: 0 calc((var(--bar-gap) + var(--bar)) / 2);
    rotate: 45deg;
  }
  .menu-toggle[aria-expanded="true"] .menu-toggle__bars::after {
    translate: 0 calc((var(--bar-gap) + var(--bar)) / -2);
    rotate: -45deg;
  }

  html[data-js] .menu {
    position: fixed;
    inset-block: 0;
    inset-inline: 0;
    z-index: 0;
    display: grid;
    place-items: center;
    padding: var(--space-8) var(--gutter);
    background: var(--char-deep);
    overflow-y: auto;
    clip-path: circle(0 at var(--menu-x, 100%) var(--menu-y, 0));
    visibility: hidden;
    transition:
      clip-path var(--menu-dur-out) var(--ease),
      visibility 0s linear var(--menu-dur-out);
  }
  html[data-js] .menu[data-open] {
    clip-path: circle(var(--menu-reach) at var(--menu-x, 100%) var(--menu-y, 0));
    visibility: visible;
    transition: clip-path var(--menu-dur-in) var(--ease);
  }

  html[data-js] .menu__list {
    flex-direction: column;
    gap: var(--space-2);
    text-align: center;
  }
  html[data-js] .menu__item:not(.menu__item--lang) .menu__link {
    font-family: var(--font-display);
    font-size: var(--fs-menu);
    font-weight: var(--w-display);
    line-height: var(--lh-display);
  }
  html[data-js] .menu__item--lang { margin-block-start: var(--space-5); }
  html[data-js] .menu__item--lang .menu__link {
    min-block-size: var(--tap);
    padding-inline: var(--space-5);
    font-size: var(--fs-base);
  }
}

/* Phones with scripts off: the nav is a row of links that can wrap to a second
   line, so the bar goes back above the hero instead of lying over it. */
@media (max-width: 47.99rem) {
  html:not([data-js]) .masthead--over {
    position: relative;
    background: var(--char);
  }
  html:not([data-js]) .hero__grid { padding-block-start: var(--space-3); }
}

/* The links rise in one after another once the bubble is most of the way out,
   and drop away at once when it closes. */
@media (max-width: 47.99rem) and (prefers-reduced-motion: no-preference) {
  html[data-js] .menu__item {
    opacity: 0;
    translate: 0 var(--menu-shift);
    transition: opacity var(--menu-dur-out) var(--ease), translate var(--menu-dur-out) var(--ease);
  }
  html[data-js] .menu[data-open] .menu__item {
    opacity: 1;
    translate: 0 0;
    transition: opacity var(--menu-dur-in) var(--ease), translate var(--menu-dur-in) var(--ease);
    transition-delay: var(--menu-delay);
  }
  html[data-js] .menu[data-open] .menu__item:nth-child(2) { transition-delay: calc(var(--menu-delay) + var(--menu-stagger)); }
  html[data-js] .menu[data-open] .menu__item:nth-child(3) { transition-delay: calc(var(--menu-delay) + var(--menu-stagger) * 2); }
  html[data-js] .menu[data-open] .menu__item:nth-child(4) { transition-delay: calc(var(--menu-delay) + var(--menu-stagger) * 3); }
  html[data-js] .menu[data-open] .menu__item:nth-child(5) { transition-delay: calc(var(--menu-delay) + var(--menu-stagger) * 4); }
}

@media (max-width: 47.99rem) and (prefers-reduced-motion: reduce) {
  html[data-js] .menu,
  html[data-js] .menu[data-open] { transition-duration: 0s; transition-delay: 0s; }
}

/* ---------- Hero ---------- */

/* Charred wood with an ember glow under the oven. On phones the hero is the
   full height of the screen: the words at the top, the oven at the bottom.
   From 48rem they sit side by side. */
.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  min-block-size: 100vh;
  min-block-size: var(--hero-min);
  overflow: hidden;
  background: var(--hero-glow), var(--char);
  color: var(--milk);
  --focus: var(--saffron);
}

.hero__grid {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: var(--space-6);
  /* The scroll cue may rest on the oven's lower edge: the whole hero fits a 390x844 phone. */
  padding-block: calc(var(--masthead) + var(--space-3)) var(--space-7);
}

/* Holds its height before site.js fills it, so nothing below shifts. */
.hero__status {
  display: flex;
  align-items: center;
  min-block-size: var(--space-6);
  margin-block-end: var(--space-3);
}

.status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--ash);
  font-size: var(--fs-sm);
  font-weight: var(--w-medium);
  line-height: var(--lh-snug);
}
.status__dot {
  flex: none;
  inline-size: var(--dot);
  block-size: var(--dot);
  border-radius: 50%;
  background: var(--shut);
}
.status[data-state="open"] .status__dot { background: var(--open); }

.hero h1 {
  max-inline-size: var(--measure-hero);
  font-size: var(--fs-hero);
}

.hero__lead {
  max-inline-size: var(--measure);
  margin-block-start: var(--space-3);
  color: var(--ash);
  font-size: var(--fs-lg);
  text-wrap: pretty;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-block-start: var(--space-6);
}
/* Narrower buttons, so both fit on one line across a phone. */
.hero__actions .button { padding-inline: var(--space-3); }

/* The oven: the photo in an arched frame with a sumac rim, steam rising over it. */
.oven {
  position: relative;
  align-self: end;
  justify-self: center;
  inline-size: min(100%, var(--oven-max));
  padding-block-start: var(--steam-room);
}

.oven__steam {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  inline-size: var(--steam-width);
  margin-inline: auto;
  fill: none;
  stroke: var(--ash);
  stroke-width: var(--steam-stroke);
  stroke-linecap: round;
}

.oven__photo {
  overflow: hidden;
  border: var(--rim) solid var(--sumac);
  border-start-start-radius: var(--oven-arch);
  border-start-end-radius: var(--oven-arch);
  border-end-start-radius: var(--radius-photo);
  border-end-end-radius: var(--radius-photo);
  background: var(--char-deep);
  box-shadow: var(--ember);
}
.oven__photo img {
  inline-size: 100%;
  aspect-ratio: var(--ratio-hero);
  object-fit: cover;
}

/* The scroll cue. Without scripts the dock is always on screen, so it sits above it. */
.hero__scroll {
  position: absolute;
  inset-inline: 0;
  inset-block-end: calc(var(--dock-height) + var(--dock-gap) * 2 + env(safe-area-inset-bottom, 0px));
  display: grid;
  place-items: center;
  inline-size: var(--tap);
  block-size: var(--tap);
  margin-inline: auto;
  border: var(--border) solid var(--line-on-dark);
  border-radius: 50%;
  background: var(--char);
  color: var(--milk);
  transition: background-color var(--dur-fast);
}
.hero__scroll:hover { background: var(--sumac); }
html[data-js] .hero__scroll { inset-block-end: calc(var(--space-4) + env(safe-area-inset-bottom, 0px)); }

@media (min-width: 48rem) {
  .hero {
    min-block-size: min(var(--hero-min), var(--hero-max));
    background: var(--hero-glow-wide), var(--char);
  }
  .hero__grid {
    grid-template-columns: 1fr 1.1fr;
    grid-template-rows: none;
    align-items: center;
    gap: var(--space-8);
    padding-block: calc(var(--masthead) + var(--space-6)) calc(var(--tap) + var(--space-8));
  }
  .oven { align-self: center; }
  .hero__scroll,
  html[data-js] .hero__scroll { inset-block-end: var(--space-6); }
}

/* ---------- Story: the owner's words, the menu, three promises ---------- */

.story {
  padding-block: var(--section);
  background: var(--dough);
}

.story__head {
  display: grid;
  gap: var(--space-5);
}
.story__body {
  display: grid;
  justify-items: start;
  gap: var(--space-4);
}
.story__body p {
  max-inline-size: var(--measure);
  font-size: var(--fs-lg);
  text-wrap: pretty;
}
.story__body .story__note {
  color: var(--bark);
  font-size: var(--fs-sm);
}

/* On phones a rail: each promise snaps into place and the next one peeks in. */
.promises {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--rail-card);
  gap: var(--space-4);
  margin-block-start: var(--space-7);
  padding-inline: var(--gutter);
  padding-block-end: var(--space-2);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}
.promises::-webkit-scrollbar { display: none; }

.promise {
  scroll-snap-align: start;
}
.promise__frame { position: relative; }
.promise__photo {
  overflow: hidden;
  border-start-start-radius: var(--oven-arch);
  border-start-end-radius: var(--oven-arch);
  border-end-start-radius: var(--radius-photo);
  border-end-end-radius: var(--radius-photo);
  background: var(--dough-deep);
  box-shadow: var(--shadow-card);
}
.promise__photo img {
  inline-size: 100%;
  aspect-ratio: var(--ratio-promise);
  object-fit: cover;
}
.promise__badge {
  position: absolute;
  inset-block-end: calc(var(--badge) / -2);
  inset-inline-start: var(--space-5);
  display: grid;
  place-items: center;
  inline-size: var(--badge);
  block-size: var(--badge);
  border: var(--badge-ring) solid var(--dough);
  border-radius: 50%;
  background: var(--saffron);
  color: var(--char);
}
.promise h3 { margin-block-start: calc(var(--badge) / 2 + var(--space-4)); }
.promise p {
  margin-block-start: var(--space-2);
  color: var(--bark);
  text-wrap: pretty;
}

@media (min-width: 48rem) {
  .story__head {
    grid-template-columns: 1.1fr 1fr;
    align-items: end;
    gap: var(--space-8);
  }

  .promises {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
    inline-size: min(100% - 2 * var(--gutter), var(--wrap));
    margin-inline: auto;
    margin-block-start: var(--space-8);
    align-items: start;
    padding-inline: 0;
    overflow: visible;
  }
  /* A margin, not a translate: translate belongs to the reveal (see Motion). */
  .promise:nth-child(2) { margin-block-start: var(--promise-offset); }
}

/* ---------- Hours: a round of taboon bread as a 24-hour dial ---------- */

.hours {
  padding-block: var(--section);
  background: var(--sumac-deep);
  color: var(--milk);
  --focus: var(--saffron);
}

.hours__grid {
  display: grid;
  gap: var(--space-6);
}

.hours__intro p {
  max-inline-size: var(--measure);
  margin-block-start: var(--space-3);
  color: var(--ash);
}

/* Noon is at the top (sun), midnight at the bottom (moon). The sumac arc is
   the hours the shop is open; the bead is the time in Amman right now. */
.dial {
  display: grid;
  place-items: center;
  inline-size: var(--dial);
  margin-inline: auto;
}
.dial > * { grid-area: 1 / 1; }
.dial__svg { inline-size: 100%; block-size: auto; }

.dial__loaf { fill: var(--crust); }
.dial__spots { fill: var(--crust-spot); }
.dial__plate { fill: var(--dough); }
.dial__track,
.dial__open {
  fill: none;
  stroke-width: var(--dial-stroke);
}
.dial__track { stroke: var(--crust-deep); }
.dial__open {
  stroke: var(--sumac);
  stroke-linecap: round;
}
.dial__glyph,
.dial__steam {
  fill: none;
  stroke: var(--char);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dial__glyph { stroke-width: var(--glyph-stroke); }
.dial__steam { stroke-width: var(--dial-steam-stroke); }
.dial__bead {
  fill: var(--milk);
  stroke: var(--char);
  stroke-width: var(--now-stroke);
}
.dial__ping {
  fill: none;
  stroke: var(--milk);
  stroke-width: var(--now-stroke);
  opacity: 0;
}

/* Once site.js knows the time, the steam gives way to the status. */
.dial[data-live] .dial__steam { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .dial[data-revealed] .dial__open { transition: stroke-dasharray var(--dur-dial) var(--ease); }
}

.dial__status {
  display: grid;
  justify-items: center;
  max-inline-size: var(--status-width);
  color: var(--char);
  line-height: var(--lh-snug);
  text-align: center;
}
.dial__status strong {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--w-display);
}
.dial__status span { font-size: var(--fs-xs); }

.hours__table {
  inline-size: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.hours__table th,
.hours__table td {
  padding: var(--space-3) var(--space-4);
  border-block-end: var(--hairline) solid var(--line-on-dark);
  line-height: var(--lh-snug);
}
.hours__table th {
  font-weight: var(--w-medium);
  text-align: start;
}
.hours__table td {
  font-variant-numeric: tabular-nums;
  text-align: end;
  white-space: nowrap;
}
.hours__table tr:last-child > * { border-block-end: 0; }

.hours__table tr[data-current] > * {
  border-block-end-color: transparent;
  background: var(--saffron);
  color: var(--char);
}
.hours__table tr[data-current] > th {
  border-start-start-radius: var(--radius-row);
  border-end-start-radius: var(--radius-row);
}
.hours__table tr[data-current] > td {
  border-start-end-radius: var(--radius-row);
  border-end-end-radius: var(--radius-row);
}

.hours__note {
  margin-block-start: var(--space-3);
  padding-inline: var(--space-4);
  color: var(--ash);
  font-size: var(--fs-xs);
}

@media (min-width: 48rem) {
  .hours__grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "intro dial"
      "table dial";
    align-items: center;
    gap: var(--space-6) var(--space-8);
  }
  .hours__intro { grid-area: intro; align-self: end; }
  .hours__week { grid-area: table; align-self: start; }
  .dial { grid-area: dial; --dial: min(28rem, 100%); }
  .dial__status strong { font-size: var(--fs-xl); }
  .dial__status span { font-size: var(--fs-sm); }
}

/* ---------- Find us: the owner's directions as a route ---------- */

.find {
  padding-block: var(--section);
  background: var(--dough);
}

.find__grid {
  display: grid;
  align-items: center;
  gap: var(--space-7);
}

.find__text p {
  max-inline-size: var(--measure);
  margin-block: var(--space-3) var(--space-5);
  color: var(--bark);
  font-size: var(--fs-lg);
}

/* Numbered landmarks joined by a dashed road; the last one is the door. */
.route {
  display: grid;
  gap: var(--space-5);
  padding: var(--space-6) var(--space-5);
  border-radius: var(--radius-card);
  background: var(--milk);
  box-shadow: var(--shadow-card);
  counter-reset: route;
}
.route__step {
  position: relative;
  display: grid;
  grid-template-columns: var(--marker) 1fr;
  align-items: center;
  gap: var(--space-4);
  min-block-size: var(--marker);
  font-weight: var(--w-medium);
  line-height: var(--lh-snug);
  counter-increment: route;
}
.route__step::before {
  content: counter(route);
  display: grid;
  place-items: center;
  inline-size: var(--marker);
  block-size: var(--marker);
  border-radius: 50%;
  background: var(--sumac);
  color: var(--milk);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  line-height: 1;
}
.route__step:not(:last-child)::after {
  content: "";
  position: absolute;
  inset-block-start: var(--marker);
  inset-block-end: calc(var(--space-5) * -1);
  inset-inline-start: calc(var(--marker) / 2 - var(--dash) / 2);
  border-inline-start: var(--dash) dashed var(--crust-deep);
}
.route__step:last-child {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--w-display);
}
.route__step:last-child::before {
  background: var(--saffron);
  color: var(--char);
}

@media (min-width: 48rem) {
  .find__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }
  .route { padding: var(--space-7) var(--space-6); }
}

/* ---------- Contact ---------- */

.contact {
  padding-block: var(--section);
  background: var(--char);
  color: var(--milk);
  --focus: var(--saffron);
}

.contact__grid {
  display: grid;
  grid-template-areas: "head" "lines" "social";
  gap: var(--space-6);
}
.contact__head { grid-area: head; }
.contact__head p {
  margin-block-start: var(--space-3);
  color: var(--ash);
  font-size: var(--fs-lg);
}

.contact__lines {
  display: grid;
  grid-area: lines;
  gap: var(--space-3);
}

.line {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border: var(--border) solid var(--line-on-dark);
  border-radius: var(--radius-row);
  text-decoration: none;
  transition: background-color var(--dur-fast);
}
a.line:hover { background: var(--wash-on-dark); }
.line > .icon {
  grid-row: span 2;
  inline-size: var(--icon-line);
  block-size: var(--icon-line);
  color: var(--saffron);
}
.line__label {
  color: var(--ash);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}
.line__value {
  font-size: var(--fs-cliq);
  font-weight: var(--w-heavy);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-value);
}

/* The CliQ line keeps its copy button at the end, once site.js shows it. */
.line--cliq { grid-template-columns: auto 1fr auto; }
.line--cliq .line__label,
.line--cliq .line__value { grid-column: 2; }
.copy {
  display: inline-flex;
  grid-row: 1 / span 2;
  grid-column: 3;
  align-items: center;
  gap: var(--space-2);
  min-block-size: var(--tap-small);
  padding-inline: var(--space-4);
  border: var(--border) solid var(--line-on-dark);
  border-radius: var(--radius-pill);
  background: none;
  font-size: var(--fs-sm);
  font-weight: var(--w-medium);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-fast), color var(--dur-fast);
}
.copy:hover { background: var(--wash-on-dark); }
.copy[data-done] { background: var(--saffron); color: var(--char); border-color: transparent; }

.social {
  display: flex;
  flex-wrap: wrap;
  grid-area: social;
  gap: var(--space-2);
}
.social a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: var(--tap);
  padding-inline: var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--wash-on-dark);
  font-size: var(--fs-sm);
  font-weight: var(--w-medium);
  text-decoration: none;
  transition: background-color var(--dur-fast), color var(--dur-fast);
}
.social a:hover { background: var(--saffron); color: var(--char); }

@media (min-width: 48rem) {
  .contact__grid {
    grid-template-columns: 1fr 1.15fr;
    grid-template-areas:
      "head lines"
      "social lines";
    grid-template-rows: auto 1fr;
    align-items: start;
    gap: var(--space-5) var(--space-8);
  }
}

/* ---------- Footer ---------- */

.site-footer {
  padding-block: var(--space-7) calc(var(--space-7) + var(--dock-height) + var(--dock-gap));
  background: var(--char-deep);
  color: var(--ash);
  font-size: var(--fs-sm);
  --focus: var(--saffron);
}

.site-footer__brand {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.site-footer__emblem {
  inline-size: var(--logo-footer);
  block-size: var(--logo-footer);
  color: var(--saffron);
}
.site-footer__name {
  color: var(--milk);
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
}

.site-footer__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2) var(--space-5);
  margin-block-start: var(--space-6);
  padding-block-start: var(--space-5);
  border-block-start: var(--hairline) solid var(--line-on-dark);
  font-size: var(--fs-xs);
}
.site-footer__base a { color: var(--milk); text-underline-offset: var(--underline-offset); }

@media (min-width: 48rem) {
  .site-footer { padding-block-end: var(--space-7); }
}

/* ---------- Dock: the three things people come for, in thumb reach ---------- */

.dock { display: none; }

@media (max-width: 47.99rem) {
  .dock {
    position: fixed;
    inset-inline: var(--dock-gap);
    inset-block-end: calc(var(--dock-gap) + env(safe-area-inset-bottom, 0px));
    z-index: var(--z-dock);
    display: block;
    border-radius: var(--radius-pill);
    background: var(--char-deep);
    color: var(--milk);
    box-shadow: var(--shadow-dock);
    --focus: var(--saffron);
    transition: translate var(--dur-dock) var(--ease), visibility 0s;
  }
  /* site.js tucks it away while the hero's own buttons are on screen. */
  .dock[data-tucked] {
    translate: 0 calc(100% + var(--dock-gap) * 2);
    visibility: hidden;
    transition: translate var(--dur-dock) var(--ease), visibility 0s linear var(--dur-dock);
  }

  .dock__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    block-size: var(--dock-height);
    padding: var(--space-1);
  }
  .dock__list li { display: grid; }
  .dock a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    border-radius: var(--radius-pill);
    font-size: var(--fs-sm);
    font-weight: var(--w-medium);
    line-height: var(--lh-snug);
    text-decoration: none;
  }
  .dock li:first-child a { background: var(--saffron); color: var(--char); }
}

@media (max-width: 47.99rem) and (prefers-reduced-motion: reduce) {
  .dock, .dock[data-tucked] { transition: none; }
}

/* ---------- Motion ----------

   Everything here is decoration: under prefers-reduced-motion none of it runs
   and the page is simply there. Four kinds:

   1. On load (CSS only): the words of the hero arrive in turn and the photo
      eases back from a slight zoom.
   2. Arriving on scroll: site.js marks blocks that start below the fold with
      data-armed and adds data-shown when they scroll into view. A block that
      is already on screen is never armed, so nothing painted is ever hidden,
      and with scripts off nothing is hidden at all. --reveal-i (the place of
      the block among its siblings, set by site.js) staggers neighbours. The
      dial's loaf rises like dough as it arrives.
   3. Tied to the scroll position (CSS scroll timelines, where supported): the
      hero's words lift away, the promise photos ease down from a slight zoom
      as they enter. Browsers without scroll timelines skip these.
   4. Alive: the steam over the oven breathes, the open dot and the dial's
      bead pulse, the scroll cue bobs. */

@keyframes rise { from { opacity: 0; translate: 0 var(--rise); } }
@keyframes fade { from { opacity: 0; } }
@keyframes settle { from { scale: var(--photo-zoom); } }
@keyframes nudge { 50% { translate: 0 var(--nudge); } }
@keyframes steam {
  0% { opacity: 0; translate: 0 var(--steam-sink); }
  40% { opacity: var(--steam-opacity); }
  100% { opacity: 0; translate: 0 var(--steam-rise); }
}
@keyframes ping {
  from { box-shadow: 0 0 0 0 var(--open-ring); }
  to { box-shadow: 0 0 0 var(--ping) var(--open-ring-end); }
}
@keyframes ping-bead {
  from { opacity: 0.9; scale: 1; }
  to { opacity: 0; scale: var(--ping-scale); }
}
@keyframes lift { to { opacity: 0; translate: 0 var(--hero-lift); } }
@keyframes develop { from { scale: var(--photo-zoom); } }

@media (prefers-reduced-motion: no-preference) {
  /* 1. On load */
  .hero__status,
  .hero h1,
  .hero__lead,
  .hero__actions { animation: rise var(--dur-rise) var(--ease) both; }
  .hero h1 { animation-delay: var(--stagger); }
  .hero__lead { animation-delay: calc(var(--stagger) * 2); }
  .hero__actions { animation-delay: calc(var(--stagger) * 3); }
  .oven { animation: fade var(--dur-rise) var(--ease) calc(var(--stagger) * 2) both; }
  .hero__scroll { animation: fade var(--dur-rise) var(--ease) calc(var(--stagger) * 8) both; }
  .oven__photo img { animation: settle var(--dur-settle) var(--ease) both; }

  /* 2. Arriving on scroll */
  [data-armed] {
    opacity: 0;
    translate: 0 var(--rise);
  }
  [data-armed][data-shown] {
    opacity: 1;
    translate: 0 0;
    transition: opacity var(--dur-reveal) var(--ease), translate var(--dur-reveal) var(--ease);
    transition-delay: calc(var(--reveal-i, 0) * var(--stagger));
  }

  /* The week arrives a row at a time. */
  .hours__week[data-armed] tr {
    opacity: 0;
    translate: 0 var(--rise-row);
  }
  .hours__week[data-shown] tr {
    opacity: 1;
    translate: 0 0;
    transition: opacity var(--dur-reveal) var(--ease), translate var(--dur-reveal) var(--ease);
  }
  .hours__week[data-shown] tr:nth-child(2) { transition-delay: var(--stagger-row); }
  .hours__week[data-shown] tr:nth-child(3) { transition-delay: calc(var(--stagger-row) * 2); }
  .hours__week[data-shown] tr:nth-child(4) { transition-delay: calc(var(--stagger-row) * 3); }
  .hours__week[data-shown] tr:nth-child(5) { transition-delay: calc(var(--stagger-row) * 4); }
  .hours__week[data-shown] tr:nth-child(6) { transition-delay: calc(var(--stagger-row) * 5); }
  .hours__week[data-shown] tr:nth-child(7) { transition-delay: calc(var(--stagger-row) * 6); }

  /* The loaf rises like dough, then the glyphs and the status settle on it. */
  .dial__bread,
  .dial__core {
    transform-box: view-box;
    transform-origin: 50% 50%;
  }
  .dial[data-armed] .dial__bread,
  .dial[data-armed] .dial__core { scale: var(--loaf-start); }
  .dial[data-armed] .dial__glyph,
  .dial[data-armed] .dial__status { opacity: 0; }
  .dial[data-shown] .dial__bread,
  .dial[data-shown] .dial__core {
    scale: 1;
    transition: scale var(--dur-bake) var(--ease-spring);
  }
  .dial[data-shown] .dial__core { transition-delay: var(--stagger); }
  .dial[data-shown] .dial__glyph,
  .dial[data-shown] .dial__status {
    opacity: 1;
    transition: opacity var(--dur-reveal) var(--ease) calc(var(--stagger) * 4);
  }

  /* 4. Alive */
  .oven__steam path { animation: steam var(--dur-steam) ease-in-out infinite both; }
  .oven__steam path:nth-child(2) { animation-delay: calc(var(--dur-steam) / -3); }
  .oven__steam path:nth-child(3) { animation-delay: calc(var(--dur-steam) / -1.5); }
  .status[data-state="open"] .status__dot { animation: ping var(--dur-ping) var(--ease) infinite; }
  .dial__ping {
    transform-box: fill-box;
    transform-origin: 50% 50%;
    animation: ping-bead var(--dur-ping) var(--ease) infinite;
  }
  .hero__scroll .icon { animation: nudge var(--dur-nudge) ease-in-out infinite; }
}

/* 3. Tied to the scroll position */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero__text {
      animation: lift linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 calc(var(--hero-min) * 0.7);
    }

    /* On phones the promises sit in a sideways rail, so they follow the swipe. */
    .promise__photo img {
      animation: develop linear both;
      animation-timeline: view(inline);
      animation-range: entry 0% cover 50%;
    }
  }

  @media (prefers-reduced-motion: no-preference) and (min-width: 48rem) {
    .promise__photo img { animation-timeline: view(block); }
  }
}

/* ---------- 404 ---------- */

.not-found {
  display: grid;
  align-content: center;
  min-block-size: 70svh;
  padding-block: var(--section);
  background: var(--hero-glow), var(--char);
  color: var(--milk);
  --focus: var(--saffron);
}
.not-found h1,
.not-found h2 { font-size: var(--fs-h2); }
.not-found p {
  max-inline-size: var(--measure);
  margin-block: var(--space-3) var(--space-5);
  color: var(--ash);
}
.not-found__other {
  margin-block-start: var(--space-7);
  padding-block-start: var(--space-6);
  border-block-start: var(--hairline) solid var(--line-on-dark);
}