/* Keepset, reduced to what one page needs.
   Values copied from keepset-design/tokens/build/tokens.css — that file is generated and is
   the source of truth. Copied rather than imported because this repo has no build step and
   no dependency on the design repo; if a colour here disagrees with tokens.css, tokens.css
   is right. */

@font-face {
  font-family: 'Cormorant Garamond';
  src: url('fonts/cormorant-garamond-var.woff2') format('woff2-variations');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Jost';
  src: url('fonts/jost-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --cream: #f3efe7;
  --raised: #ffffff;
  --sunken: #ede8e3;
  --ink: #2b3947;
  --ink-muted: #637586;
  --navy: #41576b;
  --navy-hover: #354758;
  --border: #ded6cc;
  --sage: #8a957f;
  --display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans: 'Jost', Futura, 'Century Gothic', 'Helvetica Neue', Arial, sans-serif;
  --touch: 48px;

  color-scheme: light;
}

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

body {
  margin: 0;
  padding: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  font-synthesis-style: none;
}

.wrap {
  max-width: 34rem;
  margin: 0 auto;
  padding: 1.25rem 1.25rem 2.5rem;
}

/* --- masthead --------------------------------------------------------- */

/* The wordmark and nothing else. The sign they just scanned already said what this is;
   repeating it here spends the first screen on something they have read. */
.masthead {
  text-align: center;
  padding-block: 0 1rem;
}

.masthead img {
  width: 124px;
  height: auto;
}

/* --- the menu --------------------------------------------------------- */

/* Section labels. The gap belongs to the label rather than to whatever sits above it, so
   the rhythm holds however the page is reordered — and the first one needs none of it,
   since the wordmark has already spaced itself. */
.eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 1.75rem 0 0.625rem;
}

.masthead + .eyebrow {
  margin-top: 0;
}

.menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.625rem;
}

.menu a {
  display: block;
  min-height: var(--touch);
  background: var(--raised);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  transition: border-color 120ms cubic-bezier(0.2, 0, 0.2, 1);
}

.menu a:hover,
.menu a:focus-visible {
  border-color: var(--navy);
}

.menu a:focus-visible {
  outline: 2px solid var(--navy-hover);
  outline-offset: 2px;
}

/* The photograph is the menu. Two products that are easy to confuse in words — "nine
   magnets" against "a mosaic of nine" — are unmistakable side by side, so the picture
   carries the distinction and the sentence underneath only confirms it.

   Squared off with object-fit rather than cropped files, because the two source shots are
   different shapes and a menu of mismatched tiles reads as an accident. Width and height
   are on the element so nothing reflows once they land. */
.shot {
  display: block;
  width: 100%;
  /* `height: auto` is load-bearing: the width/height attributes on the element are there so
     the layout does not jump when the file lands, and without this the attribute wins and
     the tile renders at the source photograph's own height. */
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--sunken);
}

.what {
  display: block;
  padding: 0.875rem 1.125rem 1rem;
}

.what strong {
  display: block;
  font-weight: 400;
  font-size: 1.1875rem;
  color: var(--navy);
}

.what span {
  display: block;
  font-size: 0.9375rem;
  color: var(--ink-muted);
  line-height: 1.45;
  margin-top: 0.125rem;
  text-wrap: pretty;
}

/* --- how it works ----------------------------------------------------- */

.steps {
  list-style: none;
  counter-reset: step;
  margin: 0;
  padding: 1rem 1.125rem 1.125rem;
  background: var(--sunken);
  border-radius: 0.5rem;
  display: grid;
  gap: 0.75rem;
}

.steps li {
  counter-increment: step;
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
  font-size: 0.9375rem;
}

.steps li::before {
  content: counter(step);
  flex: none;
  width: 1.25rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--sage);
  font-variant-numeric: tabular-nums;
}

.note {
  margin: 0.875rem 0 0;
  font-size: 0.9375rem;
  color: var(--ink-muted);
  text-wrap: pretty;
}

/* --- footer ----------------------------------------------------------- */

.away {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
  text-align: center;
  font-size: 0.9375rem;
  color: var(--ink-muted);
}

.away a {
  color: var(--navy);
  text-underline-offset: 0.2em;
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}