/* The scenes and the system, shared by both routes. Every colour, face and corner comes from the route's custom
   properties (routes.css), so Route 2 restyles these exact components by setting its own values and its own .device,
   .lockup and type-role skins. Objects (phone, window, post, bag, card, chat) scale like pictures: each one is a size
   container and sets its type in cqi, and everything inside is in em, so a phone at 240 px is the phone at 280 px,
   smaller. Neutral world colours (glass, wallpaper, chat) are mixes of the route's ink and ground, never new hues. */

/* Every word a viewer can read in a scene computes to at least this size, at any width: sizes below 1em and every
   cqi size are floored with max(..., var(--text-floor)). Pictures repeated for comparison, hidden from assistive tech
   (the token-swatch phones, the link preview's tiny phone), lift the floor so they shrink as pictures. */
.route { --text-floor: 10px; }
.token-swatch, .og__show { --text-floor: 0px; }

/* ---------- The mark: the route's own file, as a mask, so it takes white or the accent and is never redrawn. ---------- */

.brand-mark {
  display: inline-block;
  flex: none;
  width: 1em;
  aspect-ratio: var(--mark-ratio);
  background-color: currentColor;
  -webkit-mask: var(--mark-image) center / contain no-repeat;
  mask: var(--mark-image) center / contain no-repeat;
}

/* ---------- Mood: colour, type and the mark, without a word of explanation. ---------- */

.mood {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas: "voice voice" "type type" "mark colours";
  gap: var(--s-2);
  margin-bottom: var(--s-10);
}
@media (min-width: 720px) {
  .mood {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-areas:
      "voice voice voice voice voice voice voice type type type type type"
      "voice voice voice voice voice voice voice mark mark colours colours colours";
    grid-template-rows: 1fr 1fr;
  }
}
.mood__voice {
  grid-area: voice;
  min-height: clamp(16rem, 42vw, 34rem);
  padding: clamp(var(--s-5), 4vw, var(--s-9));
  background: var(--action);
  color: var(--on-action);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.mood__line { font-family: var(--face-display); font-size: clamp(2.75rem, 0.9rem + 6.4vw, 6.5rem); line-height: 1.02; letter-spacing: 0.005em; }
.mood__voice-mark { width: clamp(28px, 3vw, 44px); }
.mood__type {
  grid-area: type;
  background: var(--ground);
  color: var(--ink);
  display: flex;
  align-items: baseline;
  gap: var(--s-5);
  padding: var(--s-6);
  min-height: 11rem;
  align-content: flex-end;
  flex-wrap: wrap;
}
.mood__aa { line-height: 1; margin-top: auto; }
.mood__aa--display { font-family: var(--face-display); font-size: clamp(5rem, 3rem + 6vw, 9rem); color: var(--action); }
.mood__aa--text { font-family: var(--face-text); font-weight: 600; font-size: clamp(2.5rem, 1.6rem + 2.6vw, 4rem); letter-spacing: -0.01em; }
.mood__mark { grid-area: mark; background: var(--surface); color: var(--action); display: grid; place-items: center; min-height: 9rem; border: 1px solid var(--edge); }
.mood__mark .brand-mark { width: clamp(44px, 5vw, 72px); }
.mood__colours { grid-area: colours; display: grid; grid-template-columns: 5fr 2.5fr 1.5fr 1fr; min-height: 9rem; border: 1px solid var(--edge); }
.mood__colour--ground { background: var(--ground); }
.mood__colour--action { background: var(--action); }
.mood__colour--surface { background: var(--surface); }
.mood__colour--ink { background: var(--ink); }

/* ---------- In the world: the scene grid. One column on a phone, six from 720, twelve from 1100, with spans that
   follow how much each object needs, not a uniform card size. ---------- */

.world__lead { margin-top: var(--s-3); }
.scenes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-8) var(--s-4);
  margin-top: var(--s-7);
}
@media (min-width: 720px) {
  .scenes { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s-8) var(--s-5); }
  .scene--phone, .scene--sticker, .scene--instagram { grid-column: span 6; }
  .scene--bag, .scene--card { grid-column: span 6; }
  .scene--whatsapp, .scene--homescreen { grid-column: span 3; }
}
@media (min-width: 1100px) {
  .scenes { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .scene--phone { grid-column: span 7; }
  .scene--sticker { grid-column: span 5; }
  .scene--instagram { grid-column: span 8; }
  .scene--bag { grid-column: span 4; }
  /* The cards are short and wide: they take a row of their own rather than being stretched beside the phones. */
  .scene--card { grid-column: span 12; }
  .scene--whatsapp, .scene--homescreen { grid-column: span 6; }
}

.scene { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
/* The stage is the photograph the object sits in: square-cornered, the route's ground, the object centred. */
.scene__stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-6);
  padding: clamp(var(--s-5), 3.5vw, var(--s-8));
  background: var(--ground);
  color: var(--ink);
  font-family: var(--face-text);
  overflow: hidden;
}
.scene__stage--deep { background: color-mix(in srgb, var(--ink) 7%, var(--ground)); }
.scene__caption { font-family: var(--chrome-face); font-size: 0.8125rem; line-height: 1.4; max-width: 60ch; }

/* ---------- Phone: a frame, a screen, the pick. ---------- */

.scene__stage--phones { flex-wrap: wrap; align-items: flex-start; }
.phone-wrap { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); flex: 1 1 12rem; max-width: 17rem; }
.phone-wrap__label { font-family: var(--chrome-face); font-size: 0.8125rem; color: var(--ink-muted); }

.phone {
  position: relative;
  container-type: inline-size;
  width: 100%;
  max-width: 17rem;
  aspect-ratio: 9 / 18.6;
  border-radius: 15% / 7%;
  background: var(--ink);
  flex: none;
}
.phone__screen {
  position: absolute;
  inset: 2.6cqi;
  border-radius: 12.5cqi / 6cqi;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0.55em;
  padding: 0 0.6em;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--face-text);
  font-size: max(4.4cqi, var(--text-floor));
  line-height: 1.4;
}
/* The camera island and the home bar: the two marks that make a rectangle read as a phone. */
.phone__screen::before { content: ""; position: absolute; top: 0.7em; left: 50%; translate: -50% 0; width: 30%; height: 1.65em; border-radius: 1em; background: var(--ink); }
.phone__screen::after { content: ""; position: absolute; bottom: 0.45em; left: 50%; translate: -50% 0; width: 34%; height: 0.28em; border-radius: 1em; background: var(--ink); }
.phone__status { padding: 0.95em 1.1em 0.2em; font-size: max(0.82em, var(--text-floor)); font-weight: 600; font-feature-settings: "tnum"; }

.phone .device { padding: 1.1em 1.1em 1.25em; border-radius: var(--radius-card); }
.phone .device__mark { width: 1.45em; }

.pick {
  display: grid;
  grid-template-columns: 4.6em minmax(0, 1fr);
  gap: 0.85em;
  padding: 0.7em;
  border-radius: var(--radius-card);
  background: var(--surface);
}
.pick__photo { aspect-ratio: 1 / 2; font-size: max(0.62em, var(--text-floor)); border-radius: 0.9em; }
.pick__text { display: flex; flex-direction: column; gap: 0.15em; min-width: 0; }
.pick__name { font-family: var(--face-display); font-size: 1.4em; line-height: 1.08; margin-bottom: 0.2em; }
.pick__shop { font-size: max(0.8em, var(--text-floor)); color: var(--ink-muted); }
.pick__stock { font-size: max(0.8em, var(--text-floor)); font-weight: 600; }
.pick__price { margin-top: auto; font-family: var(--face-mono); font-feature-settings: var(--face-mono-features); font-size: 1.1em; font-weight: 600; }
.phone__chips { display: flex; flex-wrap: wrap; gap: 0.4em; }
.chip { padding: 0.35em 0.75em; border: 1px solid var(--edge); border-radius: 2em; background: var(--surface); font-size: max(0.78em, var(--text-floor)); font-weight: 500; }
/* Pickup or delivery, chosen before reserving (the Bottle surface in .design/CONTRACT.md). It follows the chips at the
   screen's gap plus space.1 (4 px at the 16 px base, in em so it scales with the phone); spare height goes above the tab bar. */
.phone__how { margin-top: 0.25em; display: grid; grid-template-columns: 1fr 1fr; padding: 0.25em; border-radius: var(--radius-control); background: color-mix(in srgb, var(--ink) 7%, var(--ground)); font-size: max(0.78em, var(--text-floor)); text-align: center; color: var(--ink-muted); }
.phone__how > span { padding: 0.55em 0.3em; border-radius: calc(var(--radius-control) - 0.2em); }
.phone__how-on { background: var(--surface); color: var(--ink); font-weight: 600; }
.phone__action { padding: 0.8em; border-radius: var(--radius-control); background: var(--action); color: var(--on-action); text-align: center; font-weight: 600; }
.phone__more { text-align: center; font-size: max(0.82em, var(--text-floor)); color: var(--ink-muted); text-decoration: underline; text-underline-offset: 0.2em; }
.phone__tabs {
  margin: auto -0.6em 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 0.75em 0 1.7em;
  border-top: 1px solid var(--edge);
  background: var(--surface);
  color: var(--ink-muted);
  font-size: max(0.72em, var(--text-floor));
  text-align: center;
}
.phone__tab--on { color: var(--action); font-weight: 600; }

/* A dashed box that says which photograph goes there (decisions row 5: bottles and shops, shot honestly). */
.photo-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.6em;
  border: 1px dashed var(--ink-muted);
  background: var(--surface);
  color: var(--ink-muted);
  font-family: var(--face-text);
  line-height: 1.3;
}

/* ---------- Shop window: a fascia, a dark pane, a sticker at eye level. The shop's own lettering is set in the page's
   neutral face: it is the shop's sign, not ours. ---------- */

.scene__stage--street { background: color-mix(in srgb, var(--ink) 12%, var(--ground)); align-items: stretch; padding-bottom: 0; }
.shopfront { container-type: inline-size; width: 100%; max-width: 27rem; display: flex; flex-direction: column; }
.shopfront__fascia {
  padding: 3.4cqi 2cqi;
  background: var(--ink);
  color: var(--ground);
  font-family: var(--chrome-face);
  font-size: max(4.4cqi, var(--text-floor));
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
}
.shopfront__window {
  position: relative;
  flex: 1 0 auto;
  min-height: 96cqi;
  border: 2.6cqi solid var(--ink);
  border-top-width: 1.6cqi;
  background: color-mix(in srgb, var(--ink) 86%, var(--ground));
  overflow: hidden;
}
/* One soft diagonal band reads as glass; the mullion splits the pane as a real window would. */
.shopfront__window::before { content: ""; position: absolute; inset: 0; background: linear-gradient(118deg, transparent 0 46%, color-mix(in srgb, var(--ground) 8%, transparent) 46% 60%, transparent 60%); }
.shopfront__window::after { content: ""; position: absolute; top: 0; bottom: 0; left: 64%; width: 2.2cqi; background: var(--ink); }
.shopfront__sill { height: 6cqi; background: color-mix(in srgb, var(--ink) 30%, var(--ground)); }
.sticker {
  position: absolute;
  left: 7cqi;
  bottom: 8cqi;
  width: 45cqi;
  font-size: max(3.2cqi, var(--text-floor));
  border-radius: var(--radius-card);
  box-shadow: 0 0 0 1.1cqi var(--surface);
}
.sticker .device { padding: 1.3em; border-radius: var(--radius-card); }
.sticker .device__mark { width: 2em; }
.shopfront__hours {
  position: absolute;
  right: 5cqi;
  bottom: 7cqi;
  color: var(--ground);
  font-family: var(--chrome-face);
  font-size: max(2.9cqi, var(--text-floor));
  letter-spacing: 0.06em;
  line-height: 1.5;
  text-align: right;
}

/* ---------- Instagram: a post and a story, at the proportions Instagram crops to. The app's own furniture is a
   neutral bar, not its logo. ---------- */

.scene__stage--instagram { flex-wrap: wrap; align-items: flex-end; }
.insta { container-type: inline-size; min-width: 0; }
.insta--post { flex: 1 1 15rem; max-width: 24rem; background: var(--surface); }
.insta--story { flex: 0 1 13.5rem; }
.insta__bar { display: flex; align-items: center; gap: 0.55em; padding: 0.6em 0.75em; font-family: var(--chrome-face); font-size: max(4cqi, 11px, var(--text-floor)); font-weight: 600; color: var(--ink); }
.insta__avatar { width: 2em; height: 2em; border-radius: 50%; background: var(--action); color: var(--on-action); display: grid; place-items: center; }
.insta__avatar .brand-mark { width: 0.95em; }
.post { aspect-ratio: 1; font-size: max(4.2cqi, var(--text-floor)); }
.post .device { height: 100%; padding: 8cqi; }
.post .device__line { margin-top: auto; font-size: 2.3em; }
.post .device__reason { font-size: max(0.86em, var(--text-floor)); }
.post .device__foot { margin-top: auto; }
.post .lockup { font-size: 1.35em; }

.story {
  position: relative;
  aspect-ratio: 9 / 16;
  display: flex;
  flex-direction: column;
  gap: 0.6em;
  padding: 11cqi 8cqi 7cqi;
  border: 1px solid var(--edge);
  border-radius: 5cqi;
  background: var(--ground);
  color: var(--ink);
  font-size: max(6.4cqi, var(--text-floor));
  line-height: 1.35;
}
.story__progress { position: absolute; top: 4cqi; left: 5cqi; right: 5cqi; height: 0.14em; border-radius: 1em; background: color-mix(in srgb, var(--ink) 30%, var(--ground)); }
.story__kicker { font-size: max(0.72em, var(--text-floor)); font-weight: 500; color: var(--ink-muted); }
.story__photo { flex: 1; font-size: max(0.66em, var(--text-floor)); border-radius: var(--radius-control); }
.story__line { font-family: var(--face-display); font-size: 1.75em; line-height: 1.04; }
.story__body { font-size: max(0.74em, var(--text-floor)); }
.story__foot { color: var(--action); margin-top: 0.2em; }
.story__link { padding: 0.55em; border: 1px dashed var(--ink-muted); border-radius: var(--radius-control); color: var(--ink-muted); font-size: max(0.62em, var(--text-floor)); text-align: center; }

/* ---------- The bottle bag and the delivery tag. The bag is plain paper with the lockup; the tag is the device. ---------- */

/* The objects stand on a table: the lower band of the stage is its top, seen from the front. */
.scene__stage--bag { align-items: flex-end; gap: 0; padding-bottom: var(--s-7); background: linear-gradient(to bottom, var(--ground) 0 calc(100% - 3.25rem), color-mix(in srgb, var(--ink) 9%, var(--ground)) calc(100% - 3.25rem)); }
.bag { container-type: inline-size; flex: 0 1 10rem; min-width: 0; display: flex; flex-direction: column; align-items: center; }
.bag__handle { width: 44%; margin-bottom: -1px; color: var(--ink-muted); }
.bag__handle path { fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; }
.bag__body {
  width: 100%;
  aspect-ratio: 1 / 2.15;
  display: flex;
  align-items: center;
  justify-content: center;
  /* The side gussets as two fold lines. */
  background: linear-gradient(to right, transparent 11%, var(--edge) 11% 12%, transparent 12% 88%, var(--edge) 88% 89%, transparent 89%), var(--surface);
  color: var(--action);
  /* A serrated top edge, as paper bags are cut. */
  clip-path: polygon(0 1.6%, 5% 0, 10% 1.6%, 15% 0, 20% 1.6%, 25% 0, 30% 1.6%, 35% 0, 40% 1.6%, 45% 0, 50% 1.6%, 55% 0, 60% 1.6%, 65% 0, 70% 1.6%, 75% 0, 80% 1.6%, 85% 0, 90% 1.6%, 95% 0, 100% 1.6%, 100% 100%, 0 100%);
}
.bag .lockup { font-size: max(21cqi, var(--text-floor)); }
/* The tag leans against the bag, over its corner, as it does on a doorstep. */
.delivery-tag { position: relative; z-index: 1; container-type: inline-size; flex: 0 1 12.5rem; min-width: 0; margin-left: -1.5rem; margin-bottom: var(--s-2); }
.delivery-tag .device { padding: 9cqi; font-size: max(6.2cqi, var(--text-floor)); border-radius: var(--radius-card); }
.delivery-tag .device__line { font-size: 1.85em; }
.delivery-tag .device__reason { font-size: max(0.92em, var(--text-floor)); }

/* ---------- Business card, 85 x 55 mm. ---------- */

.scene__stage--card { flex-wrap: wrap; gap: var(--s-4); }
.bizcard { position: relative; container-type: inline-size; flex: 1 1 12rem; max-width: 21rem; aspect-ratio: 85 / 55; border-radius: 3.5% / 5.4%; overflow: hidden; }
.bizcard__face { position: absolute; inset: 0; padding: 7cqi; font-size: max(4.6cqi, var(--text-floor)); line-height: 1.35; display: flex; }
.bizcard--front { background: var(--action); color: var(--on-action); }
.bizcard--front .bizcard__face { align-items: center; justify-content: center; }
.bizcard--front .lockup { font-size: 3.3em; }
.bizcard--back { background: var(--surface); color: var(--ink); border: 1px solid var(--edge); }
.bizcard--back .bizcard__face { flex-direction: column; justify-content: space-between; }
.bizcard__mark { width: 1.7em; color: var(--action); }
.bizcard__name { font-weight: 600; font-size: 1.25em; }
.bizcard__role { color: var(--ink-muted); font-size: max(0.82em, var(--text-floor)); }
.bizcard__contact { margin-top: 0.6em; font-size: max(0.82em, var(--text-floor)); }

/* ---------- A chat with the link preview. The chat's furniture is neutral: it is the messaging app, not us. ---------- */

.chat { container-type: inline-size; width: 100%; max-width: 18rem; border-radius: 1rem; overflow: hidden; border: 1px solid var(--edge); background: color-mix(in srgb, var(--ink) 4%, var(--ground)); font-family: var(--chrome-face); color: var(--ink); }
.chat__head { display: flex; align-items: center; gap: 0.6em; padding: 0.7em 0.85em; background: var(--surface); border-bottom: 1px solid var(--edge); font-size: max(4.6cqi, 12px); font-weight: 600; }
.chat__avatar { width: 2.1em; height: 2.1em; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--ink) 14%, var(--surface)); font-size: max(0.85em, var(--text-floor)); }
.chat__body { display: flex; flex-direction: column; gap: 0.6em; padding: 0.9em 0.7em 1.1em; font-size: max(4.3cqi, 11px); line-height: 1.35; }
.msg { max-width: 80%; padding: 0.5em 0.65em; border-radius: 0.9em; background: var(--surface); }
.msg--in { align-self: flex-start; border-top-left-radius: 0.2em; }
.msg--out { align-self: flex-end; max-width: 90%; border-top-right-radius: 0.2em; background: color-mix(in srgb, var(--ink) 8%, var(--surface)); }
.msg__time { display: block; margin-top: 0.15em; text-align: right; font-size: max(0.72em, var(--text-floor)); color: var(--ink-muted); }
.msg__link { text-decoration: underline; text-underline-offset: 0.18em; }
.linkcard { margin: -0.2em -0.3em 0.55em; border-radius: 0.6em; overflow: hidden; background: var(--surface); }
.linkcard__meta { padding: 0.5em 0.65em 0.6em; background: color-mix(in srgb, var(--ink) 4%, var(--surface)); }
.linkcard__title { font-weight: 600; }
.linkcard__desc { font-size: max(0.86em, var(--text-floor)); }
.linkcard__domain { font-size: max(0.78em, var(--text-floor)); color: var(--ink-muted); }

/* The preview image: the landing's link-preview layout (packages/brand/og), the name and one line on the left and
   the phone on the right, redrawn in the route. */
.og { container-type: inline-size; aspect-ratio: 1.91 / 1; display: grid; grid-template-columns: 58% 42%; overflow: hidden; background: var(--action); color: var(--on-action); }
.og__say { display: flex; flex-direction: column; justify-content: space-between; padding: 7cqi 0 7cqi 7cqi; }
.og__say .lockup { font-size: max(7cqi, var(--text-floor)); align-self: flex-start; }
.og__line { font-family: var(--face-display); font-size: max(7.6cqi, var(--text-floor)); line-height: 1.04; }
.og__show { position: relative; }
.og__phone { position: absolute; left: 18%; top: 12%; width: 64%; aspect-ratio: 9 / 18; padding: 4%; border-radius: 14% / 7%; background: var(--ink); rotate: 4deg; }
.og__screen { height: 100%; display: flex; flex-direction: column; gap: 6%; padding: 22% 7% 0; border-radius: 11% / 5.5%; background: var(--ground); color: var(--ink); }
.og__voice { padding: 12% 10%; border-radius: 0.6em; background: var(--action); color: var(--on-action); font-family: var(--face-display); font-size: max(3.2cqi, var(--text-floor)); line-height: 1.1; }
.og__pick { padding: 10%; border-radius: 0.6em; background: var(--surface); font-size: max(2.1cqi, var(--text-floor)); line-height: 1.3; }

/* ---------- Home screen: anonymous neighbours, so the one icon in colour is ours. ---------- */

.phone--home { max-width: 15rem; }
.phone--home .phone__screen { background: color-mix(in srgb, var(--ink-muted) 34%, var(--ground)); gap: 0; }
.phone--home .phone__screen::after { background: var(--ink); }
.home__grid { list-style: none; margin: 0; padding: 1.4em 0.4em 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1em 0.7em; }
.home__app { display: flex; flex-direction: column; align-items: center; gap: 0.35em; font-size: max(0.66em, var(--text-floor)); text-align: center; color: var(--ink); white-space: nowrap; }
.home__icon, .app-icon { width: 100%; aspect-ratio: 1; border-radius: 23%; }
.home__icon { display: block; background: color-mix(in srgb, var(--ink-muted) 22%, var(--surface)); }
/* Proportions of packages/brand/icon/app-icon-1024.png: the mark is 44% of the icon's width, centred. */
.app-icon { display: grid; place-items: center; background: var(--action); color: var(--on-action); font-size: inherit; }
.app-icon .brand-mark { width: 44%; }
.home__dock { margin: auto 0.1em 1.5em; padding: 0.75em; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.85em; border-radius: 1.6em; background: color-mix(in srgb, var(--surface) 45%, transparent); }

/* ---------- The system: a title column and a body column on a wide screen, stacked on a phone. ---------- */

.system { margin-top: var(--s-10); }
.system__lead { margin-top: var(--s-3); }
.system__part { margin-top: var(--s-8); padding-top: var(--s-6); border-top: 1px solid var(--rule); display: grid; gap: var(--s-5); }
@media (min-width: 1100px) {
  .system__part { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-6); }
  .system__intro { grid-column: span 3; }
  .system__body { grid-column: span 9; }
}
.system__name { font-family: var(--chrome-face); font-size: 1.0625rem; line-height: 1.3; font-weight: 600; }
.system__note { margin-top: var(--s-2); font-family: var(--chrome-face); font-size: 0.9375rem; line-height: 1.5; max-width: 40ch; }
.system__caption { font-family: var(--chrome-face); font-size: 0.8125rem; line-height: 1.45; max-width: 62ch; }
.system__body { min-width: 0; }

/* Logo */
.logo-grounds { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
@media (min-width: 720px) { .logo-grounds { grid-template-columns: 1fr 1fr; } }
.logo-ground { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-around; gap: var(--s-6) var(--s-7); padding: var(--s-8) var(--s-6); font-size: clamp(2.25rem, 1.6rem + 1.8vw, 3.25rem); }
.logo-ground--action { background: var(--action); color: var(--on-action); }
.logo-ground--shelf { background: var(--ground); color: var(--action); }
.logo-rules { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-7); margin-top: var(--s-7); }
@media (min-width: 720px) { .logo-rules { grid-template-columns: auto auto; justify-content: start; align-items: end; column-gap: var(--s-9); } }
.clearspace, .mark-sizes { display: flex; flex-direction: column; gap: var(--s-3); }
/* Clear space: one circle on every side. A circle is 30.36 of the mark's 100 units across, so the padding is the
   mark's width x 0.3036. The outlined circle in the corner is that unit. */
.clearspace__box { --m: 96px; position: relative; align-self: flex-start; padding: calc(var(--m) * 0.3036); border: 1px dashed var(--ink-muted); background: var(--surface); color: var(--action); }
.clearspace__box .brand-mark { width: var(--m); display: block; }
.clearspace__unit { position: absolute; top: 0; left: 0; width: calc(var(--m) * 0.3036); aspect-ratio: 1; border: 1px solid var(--ink-muted); border-radius: 50%; }
.mark-sizes__row { display: flex; align-items: flex-end; gap: var(--s-7); padding: var(--s-6); background: var(--ground); color: var(--action); }
.mark-size { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); font-family: var(--chrome-face); font-size: 0.8125rem; color: var(--ink); }
.mark-size .brand-mark { color: var(--action); }
.mark-size--48 .brand-mark { width: 48px; }
.mark-size--24 .brand-mark { width: 24px; }
.mark-size--16 .brand-mark { width: 16px; }

/* Colour */
.palette { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.swatch {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  grid-template-areas: "chip name" "chip hex" "chip use";
  column-gap: var(--s-4);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--chrome-face);
}
@media (min-width: 720px) {
  .swatch { grid-template-columns: 3.5rem 12rem 6rem minmax(0, 1fr); grid-template-areas: "chip name hex use"; align-items: center; }
}
.swatch__chip { grid-area: chip; width: 3rem; height: 3rem; border: 1px solid var(--rule); align-self: start; }
.swatch__chip--action { background: var(--action); }
.swatch__chip--ground { background: var(--ground); }
.swatch__chip--surface { background: var(--surface); }
.swatch__chip--ink { background: var(--ink); }
.swatch__chip--muted { background: var(--ink-muted); }
.swatch__name { grid-area: name; font-weight: 600; font-size: 0.9375rem; }
.swatch__hex { grid-area: hex; font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.swatch__use { grid-area: use; font-size: 0.8125rem; line-height: 1.45; }

.proportion { display: flex; height: 4.5rem; margin-top: var(--s-7); margin-bottom: var(--s-3); border: 1px solid var(--rule); font-family: var(--chrome-face); font-size: 0.8125rem; font-weight: 500; }
.proportion__part { display: flex; align-items: flex-end; padding: var(--s-2); min-width: 0; overflow: hidden; white-space: nowrap; }
.proportion__part--ground { background: var(--ground); color: var(--ink); }
.proportion__part--action { background: var(--action); color: var(--on-action); }
.proportion__part--surface { background: var(--surface); color: var(--ink); }
.proportion__part--ink { background: var(--ink); color: var(--surface); }

.token-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); margin-top: var(--s-8); max-width: 34rem; }
.token-pair > figcaption { grid-column: 1 / -1; margin-top: var(--s-2); }
.token-swatch { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); padding: var(--s-5) var(--s-3) var(--s-4); background: var(--action); color: var(--on-action); }
.token-swatch .phone { max-width: 9.5rem; }
.token-swatch__label { font-family: var(--chrome-face); font-size: 0.8125rem; font-weight: 600; }

/* Type */
.specimen__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-1); padding: var(--s-4) 0; border-bottom: 1px solid var(--rule); color: var(--ink); }
.specimen__row:first-child { padding-top: 0; }
@media (min-width: 720px) { .specimen__row { grid-template-columns: 15rem minmax(0, 1fr); align-items: baseline; column-gap: var(--s-6); } }
.specimen__meta { font-family: var(--chrome-face); font-size: 0.8125rem; color: var(--ink-muted); }
.specimen__sample { min-width: 0; color: var(--ink); }

/* The device, large */
.device-demo { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
@media (min-width: 720px) { .device-demo { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); align-items: start; } }
.device-demo__card { container-type: inline-size; }
.device-demo__card .device { aspect-ratio: 1; padding: 8cqi; font-size: max(4.5cqi, var(--text-floor)); border-radius: var(--radius-card); }
.device-demo__card .device__line { margin-top: auto; font-size: 2.1em; }
.device-demo__card .device__reason { font-size: max(0.9em, var(--text-floor)); }
.device-demo__card .device__foot { margin-top: auto; }
.device-demo__card .device__foot .brand-mark { width: 1.4em; }
.device-demo__parts { margin: 0; padding-left: 1.4em; display: grid; gap: var(--s-3); font-family: var(--chrome-face); font-size: 0.9375rem; line-height: 1.5; max-width: 46ch; }
.device-demo__parts li::marker { font-variant-numeric: tabular-nums; font-weight: 600; }
.device-demo__text { display: grid; gap: var(--s-6); align-content: start; }

/* Photography */
.photo-direction { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
@media (min-width: 720px) { .photo-direction { grid-template-columns: minmax(0, 15rem) minmax(0, 26rem); align-items: end; } }
.photo-direction__item { display: flex; flex-direction: column; gap: var(--s-3); }
.photo-direction__slot { font-size: 0.875rem; padding: var(--s-5); background: var(--ground); }
.photo-direction__slot--bottle { aspect-ratio: 3 / 4; }
.photo-direction__slot--shop { aspect-ratio: 4 / 3; }

/* Don'ts: small pictures of the mistake, each flagged in the page's own voice. */
.donts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 8.5rem), 1fr)); gap: var(--s-6) var(--s-4); }
@media (min-width: 1100px) { .donts { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.dont { display: flex; flex-direction: column; gap: var(--s-3); }
.dont__visual { position: relative; container-type: inline-size; aspect-ratio: 4 / 3; display: grid; place-items: center; padding: var(--s-4); overflow: hidden; background: var(--ground); color: var(--ink); font-family: var(--face-text); }
/* The "wrong" mark: one ink stroke corner to corner, so no visual reads as an example to follow. Ink, not red. */
.dont__visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top right, transparent calc(50% - 1px), var(--ink) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)); pointer-events: none; }
.dont__text { font-family: var(--chrome-face); font-size: 0.875rem; line-height: 1.45; }
.dont__flag { font-weight: 700; }
.dont__serif { padding: 6cqi; font-size: max(5.2cqi, var(--text-floor)); border-radius: var(--radius-card); }
.dont__serif .device__reason { font-family: var(--face-display); font-size: 1.2em; line-height: 1.15; }
.dont__word { font-family: var(--face-display); font-size: max(17cqi, var(--text-floor)); line-height: 1; color: var(--action); }
.dont__crowd { display: inline-flex; align-items: center; gap: 1px; font-size: max(6.5cqi, var(--text-floor)); font-weight: 600; color: var(--action); }
.dont__crowd .brand-mark { width: 2.4em; }
.dont__list { width: 100%; display: grid; gap: 2cqi; font-size: max(5.6cqi, var(--text-floor)); }
.dont__list p { display: flex; justify-content: space-between; gap: 1em; padding: 0.55em 0.7em; background: var(--surface); border-radius: 0.6em; }
.dont__input { width: 100%; padding: 0.7em 0.9em; border: 1px solid var(--edge); border-radius: 2em; background: var(--surface); color: var(--ink-muted); font-size: max(6cqi, var(--text-floor)); }