/* Each route's own world. Later tasks set these values and add selectors; the property names are the contract and never change.
   Colour values are left unset here: each route's task fills them in. */

@font-face { font-family: "Inter Variable"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("assets/fonts/route-1/inter-latin-wght-normal.woff2") format("woff2-variations"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Inter Variable"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("assets/fonts/route-1/inter-latin-ext-wght-normal.woff2") format("woff2-variations"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/route-1/instrument-serif-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("assets/fonts/route-1/instrument-serif-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/route-1/instrument-serif-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+1E00-1EFF; }

[data-route="1"] {
  /* color.light in tokens.json, except the burgundy: #82182e, the landing's value, by the controller's call (spec). */
  --ground: #f0ece7;          /* ground.shelf: the cream you browse on */
  --surface: #ffffff;         /* surface.card */
  --ink: #1d1316;             /* ink */
  --ink-muted: #6b5a60;       /* ink-muted */
  --action: #82182e;          /* the voice and the accent: the sommelier's card, buttons, the mark on cream */
  --on-action: #ffffff;       /* on.voice, on.accent */
  --accent-mark: #82182e;     /* Route 1 has no marker: its one accent is the burgundy */
  --on-action-muted: #e6d6db; /* on.voice-muted: the kicker and the address on the voice */
  --edge: #e3ddd6;            /* border: card edges and rules, never text */
  /* radius.card and radius.control (16 and 12 px at a 16 px body), in em so they scale with each drawn object. */
  --radius-card: 1em;
  --radius-control: 0.75em;
  /* The deck's mark, the byte-identical copy in assets/ (directions.test.mjs), shown as a mask. */
  --mark-image: url("assets/mark/grapes-mark.svg");
  --mark-ratio: 100 / 121;
  /* font.serif and font.sans in tokens.json; Route 1 has no mono, so facts set in Inter with tabular figures. */
  --face-display: "Instrument Serif", Georgia, serif;
  --face-text: "Inter Variable", Inter, system-ui, sans-serif;
  --face-mono: "Inter Variable", Inter, system-ui, sans-serif;
  --face-mono-features: "tnum";
}

/* Today's token, once: the same phone at ground.voice as tokens.json holds it today, beside the route's burgundy. */
[data-route="1"] .token-swatch--token { --action: #4a1626; }

/* Route 1's device: the voice card from the brand sheet, page 4. The big line in the serif, one reason, the mark,
   grapeswine.app, on burgundy. Light text on the dark ground takes the on-voice tracking (type.on-voice-tracking).
   scenes.css sets each card's size, padding and corners; this sets its look. */
[data-route="1"] .device {
  display: flex;
  flex-direction: column;
  gap: 0.6em;
  background: var(--action);
  color: var(--on-action);
  font-family: var(--face-text);
  line-height: 1.45;
  letter-spacing: 0.01em;
}
[data-route="1"] .device__kicker { color: var(--on-action-muted); font-size: max(0.8125em, var(--text-floor)); font-weight: 500; line-height: 1.3; letter-spacing: 0.02em; }
[data-route="1"] .device__line { font-family: var(--face-display); font-size: 2.125em; line-height: 1.08; letter-spacing: 0.015em; text-wrap: balance; }
[data-route="1"] .device__reason { text-wrap: pretty; }
[data-route="1"] .device__url { color: var(--on-action-muted); font-size: max(0.75em, var(--text-floor)); letter-spacing: 0.02em; }
[data-route="1"] .device__foot { display: flex; align-items: center; justify-content: space-between; gap: 1em; }
[data-route="1"] .device__foot > .brand-mark { width: 1.3em; }
[data-route="1"] .phone .device__line { font-size: 2.9em; }
[data-route="1"] .sticker .device__line { font-size: 2.4em; }

/* The lockup as the brand sheet sets it: mark height 1.6 x the word's cap height (1.152 em), the gap one circle
   radius (0.1445 em); stacked, the word rises under the mark. Instrument Serif's metrics, so Route 1's own. */
[data-route="1"] .lockup { display: inline-flex; align-items: flex-start; gap: 0.1445em; font-family: var(--face-display); font-weight: 400; line-height: normal; letter-spacing: 0.005em; white-space: nowrap; }
[data-route="1"] .lockup .brand-mark { width: auto; height: 1.152em; margin-top: 0.054em; }
[data-route="1"] .lockup--stacked { flex-direction: column; align-items: center; gap: 0; }
[data-route="1"] .lockup--stacked .brand-mark { margin-top: 0; }
[data-route="1"] .lockup--stacked .lockup__word { margin-top: -0.1255em; }

/* How much of each, by area. */
[data-route="1"] .proportion__part--ground { flex: 50; }
[data-route="1"] .proportion__part--action { flex: 25; }
[data-route="1"] .proportion__part--surface { flex: 15; }
[data-route="1"] .proportion__part--ink { flex: 10; }

/* The type roles of tokens.json (type.*). */
[data-route="1"] .t-display-lg { font-family: var(--face-display); font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem); line-height: 1.02; letter-spacing: 0.005em; }
[data-route="1"] .t-display { font-family: var(--face-display); font-size: 2.125rem; line-height: 1.08; letter-spacing: 0.005em; }
[data-route="1"] .t-title { font-family: var(--face-text); font-size: 1.25rem; line-height: 1.25; font-weight: 600; }
[data-route="1"] .t-body { font-family: var(--face-text); font-size: 1rem; line-height: 1.45; }
[data-route="1"] .t-price { font-family: var(--face-mono); font-feature-settings: var(--face-mono-features); font-size: 1.25rem; line-height: 1.2; font-weight: 600; }
[data-route="1"] .t-label { font-family: var(--face-text); font-size: 0.8125rem; line-height: 1.3; font-weight: 500; letter-spacing: 0.01em; }
[data-route="1"] .t-caption { font-family: var(--face-text); font-size: 0.75rem; line-height: 1.35; letter-spacing: 0.01em; }

/* ---------- Route 2, "Etiqueta": the clerk's note. ---------- */

/* Newsreader (display, with optical sizes), Hanken Grotesk (text and UI), DM Mono (the tag's facts): OFL, from the
   Google Fonts API, latin and latin-ext, each family's OFL.txt beside the files. */
@font-face { font-family: "DM Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/route-2/dm-mono-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "DM Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/route-2/dm-mono-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "DM Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/fonts/route-2/dm-mono-latin-ext-500-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "DM Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/fonts/route-2/dm-mono-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("assets/fonts/route-2/hanken-grotesk-latin-ext-wght-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("assets/fonts/route-2/hanken-grotesk-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 200 800; font-display: swap; src: url("assets/fonts/route-2/newsreader-latin-ext-opsz-wght-italic.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 200 800; font-display: swap; src: url("assets/fonts/route-2/newsreader-latin-opsz-wght-italic.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("assets/fonts/route-2/newsreader-latin-ext-opsz-wght-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("assets/fonts/route-2/newsreader-latin-opsz-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
[data-route="2"] {
  /* The market scan's palette (design/brand/research/2026-10-20-market-scan.md, Etiqueta), unchanged: every pair in use
     passes AA. One paper world: paper is the ground everywhere, the tag card is the one raised surface, wine is what
     you press and the mark, vermilion is the clerk's marker and only that. */
  --r2-vermilion: #b5381a;     /* the marker: one underline under a reason (assets/route-2/underline.svg draws it) */
  --ground: #f3eee4;           /* paper */
  --surface: #e9dfcc;          /* the tag card */
  --ink: #1a1a1a;              /* 15.0:1 on paper, 13.1:1 on the tag (ratios rounded down) */
  --ink-muted: #625a4f;        /* added for small print: 5.8:1 on paper, 5.1:1 on the tag */
  --action: #5a1a2b;           /* wine: the button, links, the mark and the word; 11.2:1 on paper */
  --on-action: #f3eee4;        /* paper on wine, 11.2:1 */
  --accent-mark: var(--r2-vermilion);
  --on-action-muted: #d4bfc4;  /* small print on wine, 7.4:1 */
  --edge: #d3c7b2;             /* hairlines, never text */
  /* Cut card and printed paper: small corners. */
  --radius-card: 0.25em;
  --radius-control: 0.3em;
  /* The proposed mark, candidate A; the other candidates are shown in the logo section. */
  --mark-image: url("assets/route-2/mark-g-tag.svg");
  --mark-ratio: 68 / 108;
  --face-display: "Newsreader", Georgia, serif;
  --face-text: "Hanken Grotesk", system-ui, sans-serif;
  --face-mono: "DM Mono", ui-monospace, monospace;
  --face-mono-features: normal;
  /* Not a brand colour: the white of a paper bag, card stock and other apps' chrome, mixed from the paper. */
  --paper-white: color-mix(in srgb, var(--ground) 40%, white);
}

/* ----- The tag: card stock cut with two corners off, a punched hole with its ring, a string, a slight lean. -----
   The card is drawn by ::before (clip-path for the cut, a mask for the hole, so the hole shows whatever is behind it);
   ::after is the same card a hair lower and darker, the thickness of the stock. The text sits on top. */
[data-route="2"] .tag {
  --tag-cut: 0.9em;
  --hole-x: 1.3em;
  --hole-y: 1.3em;
  --hole-r: 0.3em;
  --ring-r: 0.52em;
  --hole-at: var(--hole-x) 50%;
  --tag-shape: polygon(var(--tag-cut) 0, 100% 0, 100% 100%, var(--tag-cut) 100%, 0 calc(100% - var(--tag-cut)), 0 var(--tag-cut));
  position: relative;
  isolation: isolate;
  padding-left: 2.5em;
  rotate: -1.5deg;
}
[data-route="2"] .tag--hang {
  --hole-at: 50% var(--hole-y);
  --tag-shape: polygon(var(--tag-cut) 0, calc(100% - var(--tag-cut)) 0, 100% var(--tag-cut), 100% 100%, 0 100%, 0 var(--tag-cut));
  padding-left: 1.1em;
  padding-top: 2.3em;
  rotate: 2deg;
}
[data-route="2"] .tag::before,
[data-route="2"] .tag::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  clip-path: var(--tag-shape);
  -webkit-mask: radial-gradient(circle at var(--hole-at), transparent var(--hole-r), black calc(var(--hole-r) + 0.5px));
  mask: radial-gradient(circle at var(--hole-at), transparent var(--hole-r), black calc(var(--hole-r) + 0.5px));
}
[data-route="2"] .tag::before {
  background:
    radial-gradient(circle at var(--hole-at), transparent calc(var(--hole-r) + 0.5px), color-mix(in srgb, var(--ink) 11%, var(--surface)) calc(var(--hole-r) + 1px) var(--ring-r), transparent calc(var(--ring-r) + 0.5px)),
    var(--surface);
}
[data-route="2"] .tag::after { z-index: -2; translate: 0 0.12em; background: color-mix(in srgb, var(--ink) 24%, var(--surface)); }
/* The string leaves through the hole. Cotton, not a colour of its own. */
[data-route="2"] .tag__string {
  position: absolute;
  left: calc(var(--hole-x) - 3.07em);
  top: calc(50% - 0.8em);
  width: 3.2em;
  height: 1.6em;
  max-width: none;
  overflow: visible;
  color: color-mix(in srgb, var(--ink) 58%, var(--surface));
  pointer-events: none;
}
[data-route="2"] .tag__string path { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; vector-effect: non-scaling-stroke; }
[data-route="2"] .tag--hang .tag__string { left: calc(50% - 1.25em); top: calc(var(--hole-y) - 4.875em); width: 2.5em; height: 5em; }
/* A sticker is die-cut: the hole is cut through to the glass, with no ring and no string. */
[data-route="2"] .tag--sticker::before { background: var(--surface); }

/* The marker: one stroke of the clerk's pen under the reason, on every line the phrase breaks onto. */
[data-route="2"] .marker {
  background: url("assets/route-2/underline.svg") 0 100% / 100% 0.42em no-repeat;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding-bottom: 0.14em;
}

/* The tag's words: the kicker and the facts in the mono, the clerk's line in Newsreader italic, the reason in Hanken. */
[data-route="2"] .device {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  background: none;
  color: var(--ink);
  font-family: var(--face-text);
  line-height: 1.4;
}
[data-route="2"] .device__kicker { font-family: var(--face-mono); font-size: max(0.75em, var(--text-floor)); line-height: 1.3; color: var(--ink-muted); }
[data-route="2"] .device__line { font-family: var(--face-display); font-style: italic; font-weight: 500; font-size: 2em; line-height: 1.02; letter-spacing: -0.012em; text-wrap: balance; }
[data-route="2"] .device__reason { text-wrap: pretty; }
[data-route="2"] .device__url, [data-route="2"] .tag__facts { font-family: var(--face-mono); font-size: max(0.75em, var(--text-floor)); line-height: 1.3; }
[data-route="2"] .device__url { color: var(--ink-muted); }
[data-route="2"] .device__foot { display: flex; align-items: center; justify-content: space-between; gap: 1em; margin-top: 0.2em; }
[data-route="2"] .device__foot > .brand-mark { width: 1.05em; color: var(--action); }
[data-route="2"] .device__mark { position: absolute; top: 0.95em; right: 1em; width: 1.05em; color: var(--action); }

/* ----- The wordmark: the word inside the tag. "grapes" in Hanken Grotesk bold, lowercase, set tight, on card stock cut
   at two corners with its hole punched. One g per place: the g mark never stands beside the word. On paper the tag is
   wine and the word paper; reversed, on wine, the tag is paper and the word wine. ----- */
[data-route="2"] .wordtag {
  --cut: 0.34em;
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 0.08em 0.36em 0.2em 1em;
  background: var(--action);
  color: var(--on-action);
  font-family: var(--face-text);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.035em;
  white-space: nowrap;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut));
  -webkit-mask: radial-gradient(circle at 0.46em 50%, transparent 0.12em, black calc(0.12em + 0.5px));
  mask: radial-gradient(circle at 0.46em 50%, transparent 0.12em, black calc(0.12em + 0.5px));
}
[data-route="2"] .wordtag--reversed { background: var(--on-action); color: var(--action); }

/* ----- Mood ----- */
[data-route="2"] .mood__voice { container-type: inline-size; display: grid; place-items: center; background: color-mix(in srgb, var(--ink) 5%, var(--ground)); color: var(--ink); }
[data-route="2"] .tag--mood { width: min(100%, 29em); padding: 1.5em 1.6em 1.6em 3.1em; font-size: max(clamp(0.7rem, 3.7cqi, 1.6rem), var(--text-floor)); --hole-x: 1.45em; --hole-r: 0.34em; --ring-r: 0.58em; --tag-cut: 1.1em; }
[data-route="2"] .tag--mood .device__line { font-size: 2.85em; line-height: 0.98; }
[data-route="2"] .tag--mood .tag__string { left: calc(var(--hole-x) - 6.88em); top: calc(50% - 1.15em); width: 7em; height: 2.3em; }
[data-route="2"] .mood__aa--display { font-style: italic; font-weight: 500; color: var(--ink); }
[data-route="2"] .mood__aa--mono { font-family: var(--face-mono); font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); line-height: 1; margin-top: auto; }
[data-route="2"] .mood__mark { background: var(--surface); border-color: var(--surface); }
[data-route="2"] .mood__colours { grid-template-columns: 12fr 3fr 3fr 2fr 0.6fr; }
[data-route="2"] .mood__colour--marker { background: var(--r2-vermilion); }

/* ----- The phone ----- */
[data-route="2"] .phone .device { padding: 1.05em 1.1em 1.15em 2.7em; }
[data-route="2"] .phone .device__kicker { padding-right: 1.6em; }
[data-route="2"] .phone .device__line { font-size: 2.72em; }
[data-route="2"] .phone .tag { rotate: -1deg; margin-inline: 0.15em; }
[data-route="2"] .photo-slot { background: color-mix(in srgb, var(--ink) 4%, var(--ground)); }
[data-route="2"] .pick { background: none; padding: 0.8em 0.15em; border-block: 1px solid var(--edge); border-radius: 0; grid-template-columns: 5.2em minmax(0, 1fr); }
[data-route="2"] .pick__photo { border-radius: var(--radius-card); }
[data-route="2"] .pick__name { font-weight: 500; font-size: 1.45em; letter-spacing: -0.01em; }
[data-route="2"] .pick__shop, [data-route="2"] .pick__stock { font-family: var(--face-mono); font-size: max(0.78em, var(--text-floor)); }
[data-route="2"] .pick__stock { font-weight: 500; color: var(--ink); }
[data-route="2"] .pick__price { font-weight: 500; font-size: 1.2em; }
[data-route="2"] .chip { background: none; border-color: color-mix(in srgb, var(--ink) 28%, var(--ground)); border-radius: var(--radius-control); }
[data-route="2"] .phone__how { background: color-mix(in srgb, var(--ink) 6%, var(--ground)); }
[data-route="2"] .phone__how-on { background: var(--ground); box-shadow: inset 0 0 0 1px var(--edge); }
[data-route="2"] .phone__action { letter-spacing: 0.01em; }
[data-route="2"] .phone__more { color: var(--action); }
[data-route="2"] .phone__tabs { background: var(--ground); }

/* ----- The shop window: the die-cut sticker, at eye level, slightly off true. ----- */
[data-route="2"] .sticker { box-shadow: none; border-radius: 0; width: 50cqi; rotate: -2deg; }
[data-route="2"] .sticker .device { padding: 1.2em 1.4em 1.3em 2.6em; }
[data-route="2"] .sticker .device__line { font-size: 2.15em; }
/* The word in its tag closes the sticker, as it closes the post, sized to be read from the pavement. */
[data-route="2"] .sticker .device__foot { flex-wrap: wrap; row-gap: 0.5em; margin-top: 0.4em; }
[data-route="2"] .sticker .wordtag { margin-left: auto; font-size: 1.4em; }

/* ----- Instagram ----- */
[data-route="2"] .post { display: grid; place-items: center; padding: 8cqi 7cqi; background: var(--ground); }
[data-route="2"] .post .device { height: auto; width: 100%; padding: 6cqi 6cqi 6cqi 13cqi; rotate: -2deg; }
[data-route="2"] .post .device__line { margin-top: 0.1em; font-size: 1.85em; }
[data-route="2"] .post .device__foot { margin-top: 0.5em; }
[data-route="2"] .post .wordtag { font-size: 1.1em; }
[data-route="2"] .insta--post { background: var(--paper-white); }
[data-route="2"] .insta__avatar { background: var(--surface); color: var(--action); }
[data-route="2"] .story__kicker, [data-route="2"] .story__link { font-family: var(--face-mono); }
[data-route="2"] .story__line { font-weight: 500; letter-spacing: -0.01em; }

/* ----- The bag and the delivery tag, tied to the handle. ----- */
[data-route="2"] .bag__body { background: linear-gradient(to right, transparent 11%, var(--edge) 11% 12%, transparent 12% 88%, var(--edge) 88% 89%, transparent 89%), var(--paper-white); }
[data-route="2"] .bag .wordtag { font-size: max(12.5cqi, var(--text-floor)); align-self: center; }
[data-route="2"] .delivery-tag { margin-left: -2rem; margin-bottom: var(--s-6); }
[data-route="2"] .delivery-tag .device { padding: 17cqi 8cqi 9cqi 9cqi; --hole-y: 8cqi; }
/* Its string runs up and back to the bag's handle. */
[data-route="2"] .delivery-tag .tag__string { left: calc(50% - 10.8em); top: calc(var(--hole-y) - 10.3em); width: 11em; height: 10.5em; }
[data-route="2"] .delivery-tag .device__line { font-size: 1.75em; }

/* ----- Business card: the front is cut as a tag. ----- */
[data-route="2"] .bizcard--front { border-radius: 0; background: none; color: var(--action); }
[data-route="2"] .bizcard--front .bizcard__face {
  padding-left: 16cqi;
  background: var(--surface);
  clip-path: polygon(10% 0, 100% 0, 100% 100%, 10% 100%, 0 84%, 0 16%);
  -webkit-mask: radial-gradient(circle at 9% 50%, transparent 0.55em, black calc(0.55em + 0.5px));
  mask: radial-gradient(circle at 9% 50%, transparent 0.55em, black calc(0.55em + 0.5px));
}
/* The card is the tag, so the word on it is the wordmark. */
[data-route="2"] .bizcard__word { color: var(--action); font-family: var(--face-text); font-weight: 700; font-size: 3em; line-height: 1; letter-spacing: -0.035em; }
[data-route="2"] .bizcard--back { background: var(--paper-white); }
[data-route="2"] .bizcard__name { font-family: var(--face-display); font-style: italic; font-weight: 500; font-size: 1.5em; line-height: 1.1; }
[data-route="2"] .bizcard__contact { font-family: var(--face-mono); }

/* ----- The link preview: paper, the word in wine, the line in Newsreader. ----- */
/* The chat is the messaging app, not us: its furniture is plain white, not the tag card. */
[data-route="2"] .chat__head, [data-route="2"] .msg, [data-route="2"] .linkcard { background: var(--paper-white); }
[data-route="2"] .msg--out { background: color-mix(in srgb, var(--ink) 7%, var(--paper-white)); }
[data-route="2"] .linkcard__meta { background: color-mix(in srgb, var(--ink) 3%, var(--paper-white)); }
[data-route="2"] .og { background: var(--ground); color: var(--ink); }
[data-route="2"] .og__line { font-style: italic; font-weight: 500; }
[data-route="2"] .og__screen { background: var(--ground); }
[data-route="2"] .og__say .wordtag { font-size: max(6.4cqi, var(--text-floor)); }
/* The thumbnail's line stays whole: it never breaks before its full stop. */
[data-route="2"] .og__voice { background: var(--surface); color: var(--ink); font-style: italic; font-size: max(2.1cqi, var(--text-floor)); white-space: nowrap; padding-inline: 8%; border-radius: 0.2em; }
[data-route="2"] .og__pick { background: none; border-top: 1px solid var(--edge); border-radius: 0; font-family: var(--face-mono); }

/* ----- The app icon: something you press, so wine, with the mark in paper. ----- */
[data-route="2"] .app-icon .brand-mark { width: 38%; }

/* ----- The system ----- */
[data-route="2"] .mark-candidates { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6) var(--s-5); margin-bottom: var(--s-8); }
@media (min-width: 720px) { [data-route="2"] .mark-candidates { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
[data-route="2"] .mark-candidate { display: flex; flex-direction: column; gap: var(--s-3); }
[data-route="2"] .mark-candidate__show { display: flex; align-items: flex-end; justify-content: center; gap: var(--s-7); padding: var(--s-7) var(--s-5); background: var(--ground); color: var(--action); }
[data-route="2"] .mark-candidate[data-primary] .mark-candidate__show { box-shadow: inset 0 0 0 2px var(--ink); }
[data-route="2"] .mark-candidate__big { width: 72px; }
[data-route="2"] .mark-candidate__small { width: 16px; }
[data-route="2"] .mark-candidate__name { display: block; font-weight: 600; color: var(--ink); }
[data-route="2"] .mark-candidate--g-tag { --mark-image: url("assets/route-2/mark-g-tag.svg"); --mark-ratio: 68 / 108; }
[data-route="2"] .mark-candidate--tag { --mark-image: url("assets/route-2/mark-tag.svg"); --mark-ratio: 64 / 100; }
[data-route="2"] .mark-candidate--tag-string { --mark-image: url("assets/route-2/mark-tag-string.svg"); --mark-ratio: 76 / 112; }
/* Clear space is the hole's width: 28 of the mark's 68 units. */
[data-route="2"] .clearspace__box { padding: calc(var(--m) * 0.412); }
[data-route="2"] .clearspace__unit { width: calc(var(--m) * 0.412); }
[data-route="2"] .swatch__chip--marker { background: var(--r2-vermilion); }
[data-route="2"] .proportion__part--ground { flex: 60; }
[data-route="2"] .proportion__part--ink { flex: 16; }
[data-route="2"] .proportion__part--surface { flex: 14; }
[data-route="2"] .proportion__part--action { flex: 8; }
[data-route="2"] .proportion__part--marker { flex: 1.5; background: var(--r2-vermilion); padding: 0; }
/* Below 540 the wine share is narrower than its word, so the word turns to read upward and the share stays true. */
@media (max-width: 539px) {
  [data-route="2"] .proportion__part--action { writing-mode: vertical-rl; rotate: 180deg; align-items: flex-start; }
}
[data-route="2"] .palette__check { margin-top: var(--s-2); }

/* The type roles. */
[data-route="2"] .t-display-lg { font-family: var(--face-display); font-style: italic; font-weight: 500; font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem); line-height: 1.02; letter-spacing: -0.015em; }
[data-route="2"] .t-display { font-family: var(--face-display); font-weight: 500; font-size: 2.125rem; line-height: 1.08; letter-spacing: -0.01em; }
[data-route="2"] .t-title { font-family: var(--face-text); font-size: 1.25rem; line-height: 1.25; font-weight: 600; }
[data-route="2"] .t-body { font-family: var(--face-text); font-size: 1rem; line-height: 1.45; }
[data-route="2"] .t-price { font-family: var(--face-mono); font-size: 1.25rem; line-height: 1.2; font-weight: 500; }
[data-route="2"] .t-label { font-family: var(--face-mono); font-size: 0.8125rem; line-height: 1.3; }
[data-route="2"] .t-caption { font-family: var(--face-text); font-size: 0.75rem; line-height: 1.35; }

/* The device, large. */
[data-route="2"] .device-demo__card .device { aspect-ratio: auto; padding: 7cqi 7cqi 7cqi 14cqi; rotate: -1.5deg; }
[data-route="2"] .device-demo__card .device__line { margin-top: 0.2em; font-size: 2em; }
[data-route="2"] .device-demo__card .device__foot { margin-top: 0.6em; }
@media (min-width: 720px) { [data-route="2"] .device-demo { grid-template-columns: minmax(0, 27rem) minmax(0, 1fr); } }
[data-route="2"] .device-demo__card { padding: var(--s-6) var(--s-5) var(--s-6) var(--s-7); background: var(--ground); }

/* Don'ts: small tags, each showing one mistake, struck through in ink. */
[data-route="2"] .dont__minitag {
  position: relative;
  display: inline-block;
  max-width: 92%;
  padding: 0.55em 0.9em 0.6em 1.9em;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--face-display);
  font-style: italic;
  font-weight: 500;
  font-size: max(10cqi, var(--text-floor));
  line-height: 1.15;
  clip-path: polygon(0.7em 0, 100% 0, 100% 100%, 0.7em 100%, 0 calc(100% - 0.7em), 0 0.7em);
  -webkit-mask: radial-gradient(circle at 0.95em 50%, transparent 0.22em, black calc(0.22em + 0.5px));
  mask: radial-gradient(circle at 0.95em 50%, transparent 0.22em, black calc(0.22em + 0.5px));
  white-space: nowrap;
  rotate: -1.5deg;
}
[data-route="2"] .dont__marker { text-decoration: underline var(--r2-vermilion) 0.12em; text-underline-offset: 0.2em; font-style: normal; font-family: var(--face-mono); }
[data-route="2"] .dont__minitag--fact { font-family: var(--face-mono); font-style: normal; font-weight: 400; font-size: max(9cqi, var(--text-floor)); }
[data-route="2"] .dont__pair { display: grid; place-items: center; }
[data-route="2"] .dont__pair .dont__minitag { grid-area: 1 / 1; }
[data-route="2"] .dont__pair .dont__minitag:first-child { translate: -12% -38%; rotate: -4deg; }
[data-route="2"] .dont__pair .dont__minitag:last-child { translate: 14% 42%; rotate: 5deg; }
[data-route="2"] .dont__minitag--fallen { rotate: 16deg; }
[data-route="2"] .dont__minitag--mono { font-family: var(--face-mono); font-style: normal; font-weight: 400; font-size: max(6.4cqi, var(--text-floor)); line-height: 1.35; white-space: normal; }
[data-route="2"] .dont__visual--wine { background: var(--action); }
/* On the wine the ink strike would vanish, so this one is struck in paper. */
[data-route="2"] .dont__visual--wine::after { background: linear-gradient(to top right, transparent calc(50% - 1px), var(--ground) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)); }