/* Agavist, the site. One world with the app (research/design/WORLDS.md):
   white ground, agave green for the action and the structure around it, ink for
   everything already recorded, Instrument Sans for every word (its regular for
   reading, its medium and up for the voice), and a serif italic only where a
   botanist would set one: the plants' Latin names and the old journals' titles.
   Scale and spacing follow .claude/skills/award-design/design-tokens.md; this
   world's colours are its own. */

@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/instrument-sans-regular.woff") format("woff");
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/instrument-sans-medium.woff") format("woff");
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/instrument-sans-semibold.woff") format("woff");
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/instrument-sans-bold.woff") format("woff");
}

:root {
  color-scheme: light only;              /* the app is light only; so is its site */
  --paper: #fff;
  --label: #fbf7e9;                      /* paper labels: the 1912 plate's own margin, a third of the way from white; never the page's ground */
  --ink: #171410;                        /* 18.4:1 on white; warm, like the prints' own black */
  --soft: #5c5244;                       /* 7.4:1  secondary text, a grey with the plates' soil in it */
  --cap: #695e50;                        /* 6.4:1  captions, credits */
  --mute: #7e8683;                       /* 3.7:1  large display text only */
  --sage: #5f6f51;                       /* 5.4:1  large display text only: the 1868 tobalá's leaf (#8c9a7f), darkened to read */
  --green: #2f7a6b;                      /* 5.1:1  the accent: actions, links, status */
  --deep: #1e5b50;                       /* 7.9:1  the mark, pressed */
  --tint: #edf4f1;
  --rule: rgba(17, 19, 22, .1);
  --bezel: #17191b;
  /* one light for every object: the warm, soft shadow the 1868 plate casts */
  --lift: 0 1px 2px rgba(58, 46, 26, .1), 0 10px 22px -10px rgba(58, 46, 26, .3);
  --lift-phone: 0 2px 4px rgba(58, 46, 26, .1), 0 26px 46px -20px rgba(58, 46, 26, .4);
  --lie: 0 1px 1px rgba(58, 46, 26, .1), 0 3px 8px -4px rgba(58, 46, 26, .2);          /* paper lying on the page, not lifted off it */
  /* real paper: the fibre of a 1912 plate's margin, its colour taken to near white */
  --paper-grain: var(--label) url("img/paper.webp") 0 0 / 600px 333px;
  --display: "Instrument Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --sans: "Instrument Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: ui-serif, "New York", Georgia, "Times New Roman", serif;
  --gutter: clamp(1rem, 4.2vw, 3.4rem);
  --shell: 72rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1rem/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--green); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--deep); }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 4px; }
p { margin: 0; }
figure { margin: 0; }
/* a plant's Latin name and an old journal's title, set the way the plates set them */
cite, figcaption i, .foot-notes i { font-family: var(--serif); font-size: 1.04em; }

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

/* ---------- skip link ---------- */
.skip { position: absolute; left: .8rem; top: -4rem; z-index: 10; padding: .7rem 1rem; background: var(--ink); color: #fff; border-radius: 6px; font: 600 .9rem/1 var(--display); text-decoration: none; }
.skip:focus { top: .8rem; }

/* ---------- brand row ---------- */
.top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .6rem; }
.brand { display: inline-flex; align-items: center; gap: .5rem; color: var(--ink); text-decoration: none; }
.brand:hover { color: var(--ink); }
.mark { flex: none; width: 2rem; height: 2rem; color: var(--deep); }
/* the wordmark is the app's own lockup: Instrument Sans Bold, lowercase */
.word { font: 700 1.5rem/1 var(--display); letter-spacing: -.02em; transform: translateY(-.04em); }
.nav { display: flex; gap: 1.2rem; }
.nav a { font: 600 .9rem/1 var(--display); color: var(--ink); text-decoration: none; padding: .95rem .2rem; }   /* 44 px to tap */
.nav a:hover, .nav a[aria-current="page"] { color: var(--green); }

/* ---------- the shared objects: a phone, a paper label ---------- */
.phone {
  --w: 15rem;
  position: relative; width: var(--w);
  padding: calc(var(--w) * .03);
  border-radius: calc(var(--w) * .185);
  background: var(--bezel);
  box-shadow: inset 0 0 0 1px #3d4145, inset 0 0 0 calc(var(--w) * .012) #25282b, var(--lift-phone);
}
.phone > img { width: 100%; border-radius: calc(var(--w) * .155); background: #fff; }
.phone::before, .phone::after { content: ""; position: absolute; width: 3px; background: #2b2e31; }
.phone::before { left: -3px; top: 21%; height: 7%; border-radius: 2px 0 0 2px; }
.phone::after { right: -3px; top: 27%; height: 12%; border-radius: 0 2px 2px 0; }

.specimen {
  margin: 0; display: grid; gap: .15rem; width: max-content; max-width: 15rem;
  padding: .65rem .85rem .6rem;
  background: var(--paper-grain); color: var(--soft);   /* 5.1:1 even on the paper's darkest specks */
  border: 1px solid rgba(17, 19, 22, .55); outline: 1px solid rgba(17, 19, 22, .2); outline-offset: -5px;
  border-radius: 3px;
  box-shadow: var(--lift);
  font: 400 .875rem/1.15 var(--sans);
  transform: rotate(var(--tilt, -.8deg));
}
.specimen b { font: 600 1.05rem/1.15 var(--display); color: var(--ink); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.specimen i { font: italic 400 .95rem/1.15 var(--serif); color: var(--ink); }

/* ---------- hero ---------- */
.hero { overflow-x: clip; }
.hero-grid { display: grid; gap: 1.6rem; align-items: center; padding-block: clamp(1rem, 4vw, 2.4rem) clamp(3.4rem, 8vw, 4.5rem); }
h1 {
  margin: 0;
  /* t-hero at its ceiling; sized so "Know the agave." (7.4em wide) always holds one line */
  font: 500 clamp(2.2rem, 11.8vw, 4.4rem)/1 var(--display);
  letter-spacing: -.032em;
  word-spacing: .04em;                   /* display type at this tracking closes its word gaps */
}
h1 span { display: block; }
h1 .tone { color: var(--sage); }
h1 span, h2 { text-wrap: balance; }
.lede { margin: 1.2rem 0 1.4rem; max-width: 22rem; text-wrap: balance; font-size: clamp(1.15rem, 1rem + .4vw, 1.25rem); line-height: 1.5; color: var(--soft); }
/* the honest status today: plain ink, no icon, no store badge. It is news, and there is nothing to download yet. The one
   action is to write to us, labelled as that, with the address in it */
.status { display: grid; justify-items: start; gap: .2rem; max-width: 24rem; color: var(--ink); }
.status b { font: 600 1.15rem/1.2 var(--display); letter-spacing: -.01em; }
.status span { font-size: 1rem; line-height: 1.45; color: var(--soft); text-wrap: balance; }
.btn {
  display: inline-flex; align-items: center; flex: none; min-height: 3.2rem; padding: .75rem 1.5rem;
  background: var(--green); color: #fff; border-radius: 8px; text-decoration: none;
  font: 600 1.06rem/1.1 var(--display); letter-spacing: -.005em;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .2), 0 1px 2px rgba(58, 46, 26, .18);   /* a pressed edge, no glow */
  transition: background-color .15s ease, translate .15s ease;
}
.btn:hover { background: var(--deep); color: #fff; translate: 0 -1px; }
.btn:active { translate: 0 0; }
.btn:focus-visible { outline-offset: 4px; }
/* the hero's ask: the button, then what it is for, with the address printed so it can be copied */
.ask-cta { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1.2rem; margin-top: 1.2rem; max-width: 27rem; }
.ask-cta span { flex: 1 1 12rem; font-size: .92rem; line-height: 1.35; color: #3f372c; text-wrap: balance; }
.ask-cta > .mail { font: 600 1rem/1.2 var(--display); letter-spacing: -.005em; padding-block: .8rem; }   /* 44 px to tap */
.ask-cta span a { display: inline-block; padding-block: .45rem; font: 600 1rem/1.3 var(--display); letter-spacing: -.005em; }   /* 44 px to tap */

/* the art: the 1868 plate, the phone that names it, the plate's label */
.hero-art { position: relative; container-type: inline-size; aspect-ratio: 100 / 176; margin-inline: calc(-1 * var(--gutter)); }
@media (min-width: 34rem) and (max-width: 59.99rem) { .hero-art { width: 30rem; margin-inline: auto; } }
.plate { position: absolute; z-index: 1; top: 0; left: 0; width: 100%; }
.plate img { position: relative; z-index: 1; width: 100%; }
.plate::after { /* the plant's own shadow on the ground */
  content: ""; position: absolute; z-index: 0; left: 18%; right: 14%; bottom: 0; height: 12%;
  background: radial-gradient(closest-side, rgba(74, 60, 36, .18), rgba(74, 60, 36, 0));
}
.hero-art .phone { --w: 58cqw; position: absolute; z-index: 3; left: 3%; top: 58cqw; }
.hero-art .specimen { position: absolute; z-index: 4; right: max(3.4%, 12px); top: 81cqw; --tilt: 1.2deg; }

/* when the page opens the phone's result develops under a scan line, top to bottom, once (a clock, not a scroll; none with
   reduced motion): a white sheet over the screen is wiped away, the green line riding its edge */
.hero-develop { display: none; position: absolute; z-index: 1; left: calc(var(--w) * .03); top: calc(var(--w) * .03); width: calc(100% - var(--w) * .06); aspect-ratio: 402 / 874; border-radius: calc(var(--w) * .155); overflow: hidden; background: #fff; pointer-events: none; }

/* a loupe: one line of the screen, lifted onto paper at a size you can read */
.loupe {
  position: absolute; z-index: 2;
  padding: .6rem;
  background: var(--paper-grain);
  border: 1px solid rgba(17, 19, 22, .55); outline: 1px solid rgba(17, 19, 22, .2); outline-offset: -5px;
  border-radius: 3px;
  box-shadow: var(--lift);
  transform: rotate(-.7deg);
}
.loupe img { width: 100%; border-radius: 6px; box-shadow: 0 0 0 1px rgba(17, 19, 22, .08); }
/* the taste and the maker start at 47% of the phone's height, under the bottle's name; the label covers them, wider
   than the phone */
/* on a phone it stays inside the page with a gutter to spare: 95.8cqw is what is left of the art's width after the phone's
   own left edge and this label's, minus 14 px */
.hero-art .loupe--rows { top: 47%; left: 2%; width: min(166%, calc(94.5cqw - 14px)); }

@media (min-width: 60rem) {
  h1 { font-size: clamp(3.5rem, 5.7vw, 4.4rem); }
  /* the first screen is the hero alone: the next heading starts below the fold, never sliced by it */
  .hero { display: grid; align-items: center; min-height: min(calc(100svh - 4rem), 56rem); }
  .hero-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .hero-art { aspect-ratio: auto; height: 42rem; margin-inline: 0; }
  /* the plate is the star, as on the phone: twice the column's plant, cropped by the
     page's right edge on purpose, its leftmost leaves stopping short of the headline */
  .plate { left: -6%; width: 158%; top: .1rem; }
  .hero-art { height: 40rem; }
  .hero-grid { padding-bottom: 2.4rem; }
  /* the phone steps over the column line toward the words it proves */
  .hero-art .phone { --w: clamp(14.5rem, 18vw, 17rem); left: -6%; top: auto; bottom: 0; }
  .hero-art .specimen { left: auto; right: -2%; top: 70%; }
  /* on a wide page the label reaches back under the headline, tying the words to the screen */
  .hero-art .loupe--rows { left: -48%; width: 148%; }
}
@media (min-width: 72rem) {
  /* room for a bigger phone: its rows read at 11 px and more */
  .hero-art .phone { --w: clamp(17rem, 21vw, 19rem); left: -4%; }
  .hero-art .loupe--rows { left: -38%; width: 142%; }
}
@media (min-width: 60rem) and (max-width: 72rem) {
  /* on a narrow desktop the headline column is narrow too: the headline and the phone keep the wide page's proportions, the
     phone a little further from the words, and the label reaching back less, clear of the status line */
  h1 { font-size: clamp(3.4rem, 6.2vw, 4.2rem); }
  .hero-art .phone { --w: clamp(15.5rem, 21vw, 17rem); left: 2%; }   /* a clear gap after "Know the agave." (a judge measured 36 px) */
  .hero-art .loupe--rows { left: -12%; width: 116%; }
  .hero-art .specimen { top: 4%; right: 3%; }   /* the column is too narrow beside the phone: the plate's label goes up on its leaves */
}
@media (min-width: 34rem) and (max-width: 59.99rem) {
  /* a tablet held upright: the headline across the page, the lede and the status side by side under it, and the ask at the
     page's left edge, where the headline starts */
  .hero-copy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 2.4rem; align-items: start; }
  .hero-copy h1 { grid-column: 1 / -1; }
  .hero-copy .lede { grid-column: 1; grid-row: 2; margin: 1.2rem 0 0; }
  .hero-copy .status { grid-column: 2; grid-row: 2; margin-top: 1.45rem; }
  .hero-copy .ask-cta { grid-column: 1 / -1; grid-row: 3; margin-top: 1.8rem; }
  /* the plate's label stands clear of the phone's bezel, out past the art's right edge (a judge saw it overlap by 10 px) */
  .hero-art .specimen { right: -7%; }
}
@media (max-width: 33.99rem) {
  /* on a phone the plant keeps the page's own gutters, so its leaf tips stop where the text stops; the phone climbs over its
     lower leaves, so the product is on the first screen and not below it */
  .plate { left: 4.3%; width: 91.4%; }
  .hero-art { aspect-ratio: 100 / 186; }   /* the phone (66cqw wide, 2.1 times that tall) ends at 179cqw */
  .hero-art .phone { --w: 66cqw; top: 40cqw; left: 4.3%; }   /* on the page's own gutter, where the words start */
  .hero-art .specimen { top: 14cqw; right: 6%; }   /* up on the plate's leaves, well clear of the phone's own drawn plant */

}

@media (prefers-reduced-motion: no-preference) {
  .hero-develop { display: block; animation: develop 1.2s cubic-bezier(.5, .05, .3, 1) .55s both; }
  .hero-develop .scan-line { opacity: 0; animation: develop-line 1.2s cubic-bezier(.5, .05, .3, 1) .55s both; }
  @keyframes develop { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(100% 0 0 0); } }
  @keyframes develop-line { 0% { translate: 0 0; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { translate: 0 100%; opacity: 0; } }
  /* the copy settles into its lines, the headline first; position only, never opacity, so the words are at full contrast
     (and readable by anything that looks) from the first frame. The art follows on its own clock below */
  .hero-copy h1 span, .hero-copy .lede, .hero-copy .status, .hero-copy .ask-cta { animation: line-up .9s cubic-bezier(.16, 1, .3, 1) both; }
  .hero-copy h1 span + span { animation-delay: .09s; }
  .hero-copy .lede { animation-delay: .2s; }
  .hero-copy .status { animation-delay: .28s; }
  .hero-copy .ask-cta { animation-delay: .36s; }
  @keyframes line-up { from { translate: 0 .36em; } to { translate: 0 0; } }
  .plate img { animation: rise .6s ease-out both; }
  .hero-art .phone { animation: rise .5s ease-out .15s both; }
  .hero-art .specimen { animation: rise .4s ease-out .45s both; }
  @keyframes rise { from { opacity: 0; translate: 0 4px; } to { opacity: 1; translate: 0 0; } }
  /* a lifted label starts as the screen's own line, at the screen's size, then rises onto its paper as it scrolls into
     view. --from is the scale that matches the screen; --ox is the one point that lands the label's centre on the line's
     centre at that scale: (line's centre in label widths - from / 2) / (1 - from). The top edge stays put. */
  .loupe { --from: .52; transform-origin: var(--ox, 50%) 0; }

  @keyframes lift {
    from { transform: rotate(0deg) scale(var(--from)); box-shadow: none; }
    to { transform: rotate(var(--to, -.7deg)) scale(1); box-shadow: var(--shade-to, var(--lift)); }
  }
  @supports (animation-timeline: view()) {
    .hero-art .loupe--rows { --ox: 4%; --from: .53; animation: lift linear both; animation-timeline: view(); animation-range: entry 0% cover 34%; }
    /* the app's card is pinned onto the plant as the section comes in */
    .loupe--kin { animation: pin-on linear both; animation-timeline: view(); animation-range: entry 10% entry 100%; }
    @keyframes pin-on { from { opacity: 0; translate: 0 .9rem; } to { opacity: 1; translate: 0 0; } }
  }
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    /* "your map fills in, state by state": the one-bottle states first, Oaxaca last, then the pins, then its tag */
    .map-fill { animation: map-in linear both; animation-timeline: --map; animation-range: entry calc(6% + var(--i) * 10%) entry calc(20% + var(--i) * 10%); }
    .map-places { animation: map-drop linear both; animation-timeline: --map; animation-range: entry 64% entry 86%; }
    .map-tag { animation: map-in linear both; animation-timeline: --map; animation-range: entry 78% entry 98%; }
    @keyframes map-in { from { opacity: 0; } to { opacity: 1; } }
    @keyframes map-drop { from { opacity: 0; translate: 0 -2.2%; } to { opacity: 1; translate: 0 0; } }
  }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 60rem) {
  /* on a wide page the hero is in view at load, so its label lifts on a clock, once */
  /* the lifted row waits for the scan line: invisible until the screen has developed past it, then it rises onto its paper */
  .hero-art .loupe--rows { --ox: 90%; --from: .54; animation: lift .6s cubic-bezier(.2, .8, .2, 1) 1.25s both, appear .01s linear 1.25s both; animation-timeline: auto, auto; animation-range: normal; }
  @keyframes appear { from { opacity: 0; } to { opacity: 1; } }
}

/* ---------- sections ---------- */
h2 {
  margin: 0 0 .8rem;
  font: 500 clamp(1.9rem, 1.1rem + 2.1vw, 3.2rem)/1.06 var(--display);
  letter-spacing: -.028em;
  word-spacing: .04em;
  text-wrap: balance;
}
.section-copy p { font-size: clamp(1.05rem, 1rem + .3vw, 1.3rem); color: var(--soft); max-width: 27rem; text-wrap: balance; }
.section-copy p span { display: block; }

/* the scan: a real bottle, Madre Mezcal Ensamble, in its maker's own photograph, loaded from the maker's own address (never
   copied here) and drawn over as the app's scanner draws: four white corners close on the label, a green line reads down
   it, and two of its lines are boxed. Each box leads out of the photograph to what the app makes of it. Beside it, on a
   wide page, the phone shows the app's own answer for the same bottle, developing under its own line as the label is read.
   The photograph is cropped by CSS only: --cx/--cy/--cw/--ch are the window onto its 1038 x 1164 pixels, and the marks are
   drawn in those same pixels, so they stay on the words at every width. If the picture stops answering, the reader takes
   .is-gone (the image's onerror) and shows the app's drawn plants instead, as the app does, with no leaders. */
.scan { padding-block: clamp(2rem, 5.5vw, 3rem) clamp(2.4rem, 5.5vw, 3.4rem); overflow-x: clip; }
.scan-stage { display: grid; justify-items: start; gap: 1.8rem; margin-top: 2rem; timeline-scope: --reader; }   /* under a left-set heading, the bottle starts where the words start */
/* a phone shows the reader alone: the photograph is the camera's view, and the answers sit beside it */
.scan-stage .phone { display: none; }
/* the phone's answer develops under the line: a white sheet over the screen, wiped away top to bottom as the label is read.
   Without the animation it is not there at all */
.phone--scan .scan-screen { display: none; position: absolute; z-index: 1; left: calc(var(--w) * .03); top: calc(var(--w) * .03); width: calc(100% - var(--w) * .06); aspect-ratio: 402 / 874; border-radius: calc(var(--w) * .155); overflow: hidden; pointer-events: none; background: #fff; }
/* the line sits on the wipe's edge: three pixels of the app's green, and the soft glow the scanner itself draws around it */
.scan-line { position: absolute; inset: 0; opacity: 0; background: linear-gradient(var(--green), var(--green)) 0 0 / 100% 3px no-repeat, linear-gradient(to bottom, rgba(47, 122, 107, 0), rgba(47, 122, 107, .34) 50%, rgba(47, 122, 107, 0)) 0 -2.2rem / 100% 4.4rem no-repeat; }

.reader {
  --cx: 380; --cy: 80; --cw: 300; --ch: 1000;      /* the photograph's window, in its own pixels: a phone sees the bottle alone */
  --pw: 50%; --gap: .9rem;
  position: relative; display: grid; grid-template-columns: var(--pw) minmax(0, 1fr); column-gap: var(--gap); align-items: stretch;
  width: min(100%, 26rem); margin: 0; view-timeline: --reader block;
}
.shot { position: relative; aspect-ratio: var(--cw) / var(--ch); overflow: hidden; border-radius: 6px; background: linear-gradient(#1f0a06 0 38%, #7a2f1c 58%, #a9492b); box-shadow: var(--lift); }   /* while the photo loads: its dark wall and its red floor */
.shot-photo, .shot-marks { position: absolute; max-width: none; width: calc(1038 / var(--cw) * 100%); height: calc(1164 / var(--ch) * 100%); left: calc(var(--cx) / var(--cw) * -100%); top: calc(var(--cy) / var(--ch) * -100%); }
.shot-marks { overflow: visible; }
.shot-plants { display: none; }
.r-corners { fill: none; stroke: #fff; stroke-width: 4px; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35)); }
.r-box { fill: rgba(47, 122, 107, .14); stroke: var(--green); stroke-width: 2.4px; vector-effect: non-scaling-stroke; }
.r-leader { fill: none; stroke: var(--green); stroke-width: 2.5px; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.r-leader.r-halo { stroke: #fff; stroke-width: 6px; opacity: .9; }   /* on the photograph's red floor the green alone is too close in tone */
.r-sweep { opacity: 0; }
/* the answers: each one's first line sits on its leader, at the height of the boxed words; the leader runs on from the
   photograph's edge to a dot before the words */
.r-answers { position: relative; }
.r-answer { --y: 627.5; position: absolute; left: 1.05rem; right: 0; top: calc((var(--y) - var(--cy)) / var(--ch) * 100%); margin: 0; display: grid; gap: .22rem; font-size: 1.15rem; line-height: 1; translate: 0 -.5em; }
.r-answer--place { --y: 867.5; }
.r-answer b { font: 600 1em/1 var(--display); letter-spacing: -.012em; color: var(--ink); }
.r-answer > span { font-size: .9375rem; line-height: 1.25; color: var(--soft); }
.r-answer i { font: italic 400 1.04em/1.25 var(--serif); color: var(--ink); }
.r-answer .lat { display: none; }   /* a phone gives the plain names; wider, the Latin follows */
.r-answer::before { content: ""; position: absolute; top: .5em; right: 100%; width: calc(var(--gap) + 1.05rem - .5rem); height: 2.5px; translate: 0 -50%; margin-right: .5rem; background: var(--green); border-radius: 2px; transform-origin: left center; }
.r-answer::after { content: ""; position: absolute; top: .5em; left: -.95rem; width: .7rem; height: .7rem; translate: 0 -50%; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 2.5px #fff; }
.r-answer--place::after { background: var(--deep); }
/* the credit, as the app gives it under a maker's picture: a camera, the maker's address, a way out to their page */
.shot-credit { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 0 1rem; margin-top: .55rem; font-size: .875rem; line-height: 1.3; color: var(--cap); }
.shot-credit a { display: inline-flex; align-items: center; gap: .35rem; min-height: 2.75rem; color: var(--soft); font-weight: 500; text-decoration: none; }
.shot-credit a:hover { color: var(--deep); }
.shot-credit a span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; text-decoration-color: rgba(92, 82, 68, .45); }
.shot-credit svg { width: 1rem; height: 1rem; flex: none; }
.shot-credit svg.out { width: .8rem; height: .8rem; }
/* the picture stopped answering: the app's drawn plants stand where it was, and nothing points at words that are gone */
.reader.is-gone .shot { background: var(--paper-grain); display: grid; place-items: center; aspect-ratio: 1; align-self: start; }
.reader.is-gone .shot-photo, .reader.is-gone .shot-marks, .reader.is-gone .shot-credit a, .reader.is-gone .r-answer::before, .reader.is-gone .r-answer::after { display: none; }
.reader.is-gone .shot-plants { display: block; width: 86%; }
.reader.is-gone .shot-credit { display: none; }
.reader.is-gone .r-answers { display: grid; align-content: center; gap: 1.8rem; }
.reader.is-gone .r-answer { position: static; translate: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (min-width: 40rem) {
  /* wider than a phone: the bottle stands in its own light, its shadow running out to the right, where the leaders cross */
  .reader { --cx: 340; --cw: 450; --pw: 17.5rem; --gap: 2.2rem; width: min(100%, 38rem); }
  .r-answer { font-size: 1.45rem; left: 1.25rem; }
  .r-answer::before { width: calc(var(--gap) + 1.25rem - .5rem); }
  .r-answer::after { left: -1.1rem; width: .8rem; height: .8rem; }
  .r-answer > span { font-size: 1rem; }
  .r-answer .lat { display: inline; font-size: 1em; }
}
@media (min-width: 52rem) {
  /* the group is one object, the whole phone and the bottle, centred under its heading */
  .scan-copy { text-align: center; }
  .scan-copy h2 { font-size: clamp(2.6rem, 3.9vw, 3.5rem); letter-spacing: -.03em; margin-bottom: 1rem; }   /* clearly a step under the hero's headline */
  .scan-copy h2, .scan-copy p { margin-inline: auto; }
  /* read left to right: the label, the words the scan picked out, then the app's own page for the bottle */
  .scan-stage { grid-template-columns: auto auto; justify-content: center; align-items: center; gap: 2rem clamp(1.4rem, 3vw, 3rem); margin-top: 2.8rem; }
  .scan-stage .phone { display: block; --w: 14rem; order: 2; }
  .reader { --pw: clamp(15rem, 21vw, 18.5rem); width: auto; grid-template-columns: var(--pw) 13.5rem; }
  .r-answer .lat { display: none; }   /* three objects in a row leave the answers a narrow column: the plain names alone */
}
@media (min-width: 60rem) {
  .scan-stage .phone { --w: 15.5rem; }
  .reader { grid-template-columns: var(--pw) 14.5rem; }
  .r-answer .lat { display: inline; }
}
@media (min-width: 72rem) {
  /* room for the phone at a size its rows read at: 11 px and more */
  .scan-stage .phone { --w: 17.5rem; }
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    /* one reading: the corners close on the label, the line goes down it (and down the phone's screen with it), then each
       boxed line says what it is, the leader running out to its answer */
    .r-corners { transform-box: fill-box; transform-origin: center; animation: r-close linear both; animation-timeline: --reader; animation-range: entry 10% entry 55%; }
    .r-sweep { animation: r-sweep linear both; animation-timeline: --reader; animation-range: entry 55% contain 6%; }
    .r-box { animation: r-fade linear both; animation-timeline: --reader; }
    .r-box--plant { animation-range: contain 4% contain 9%; }
    .r-box--place { animation-range: contain 14% contain 19%; }
    .r-leader { stroke-dasharray: 1; animation: r-draw linear both; animation-timeline: --reader; }
    .r-leader--plant { animation-range: contain 8% contain 13%; }
    .r-leader--place { animation-range: contain 18% contain 23%; }
    .r-answer::before { animation: r-line linear both; animation-timeline: --reader; animation-range: contain 13% contain 16%; }
    .r-answer--place::before { animation-range: contain 23% contain 26%; }
    .r-answer::after { animation: r-fade linear both; animation-timeline: --reader; animation-range: contain 15% contain 17%; }
    .r-answer--place::after { animation-range: contain 25% contain 27%; }
    .r-answer > * { animation: r-rise linear both; animation-timeline: --reader; animation-range: contain 16% contain 22%; }
    .r-answer--place > * { animation-range: contain 26% contain 32%; }
    @keyframes r-close { from { opacity: 0; scale: 1.12; } 55% { opacity: 1; } to { opacity: 1; scale: 1; } }
    @keyframes r-sweep { from { opacity: 0; translate: 0 0; } 8% { opacity: 1; } 92% { opacity: 1; } to { opacity: 0; translate: 0 517px; } }
    @keyframes r-fade { from { opacity: 0; } to { opacity: 1; } }
    @keyframes r-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
    @keyframes r-line { from { scale: 0 1; } to { scale: 1 1; } }
    @keyframes r-rise { from { opacity: 0; translate: -.6em 0; } to { opacity: 1; translate: 0 0; } }
  }
  @supports (animation-timeline: view()) and (timeline-scope: --reader) {
    .phone--scan .scan-screen { display: block; animation: scan-wipe linear both; animation-timeline: --reader; animation-range: entry 55% contain 6%; }
    .phone--scan .scan-line { animation: scan-line linear both; animation-timeline: --reader; animation-range: entry 55% contain 6%; }
    /* the sheet starts under the status bar (6.5% of the screen), so the phone never enters as a blank white slab */
    @keyframes scan-wipe { from { clip-path: inset(6.5% 0 0 0); } to { clip-path: inset(100% 0 0 0); } }
    @keyframes scan-line { 0% { translate: 0 6.5%; opacity: 0; } 6% { opacity: 1; } 94% { opacity: 1; } 100% { translate: 0 100%; opacity: 0; } }
  }
}
@media (max-width: 39.99rem) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    /* on a phone the bottle is taller than half the screen: the reading plays as it comes in, and is done before it is whole */
    .r-corners { animation-range: entry 0% entry 30%; }
    .r-sweep { animation-range: entry 30% entry 70%; }
    .r-box--plant { animation-range: entry 52% entry 58%; }
    .r-leader--plant { animation-range: entry 56% entry 62%; }
    .r-answer::before { animation-range: entry 61% entry 64%; }
    .r-answer::after { animation-range: entry 63% entry 65%; }
    .r-answer > * { animation-range: entry 63% entry 70%; }
    .r-box--place { animation-range: entry 70% entry 76%; }
    .r-leader--place { animation-range: entry 74% entry 80%; }
    .r-answer--place::before { animation-range: entry 79% entry 82%; }
    .r-answer--place::after { animation-range: entry 81% entry 83%; }
    .r-answer--place > * { animation-range: entry 81% entry 88%; }
  }
}

/* kinship: the one plant both bottles come from, labelled twice, and what the app says about it: its own card, lifted onto
   paper and pinned across the plant. No phone here: the hero and the scan already hold one */
.kin { padding-block: clamp(2.4rem, 6.5vw, 4rem) clamp(2.2rem, 5vw, 3rem); overflow-x: clip; }
.kin-grid { display: grid; gap: 2.4rem; align-items: center; }
.kin-stage { position: relative; display: grid; grid-template-columns: 1fr; }
/* the one plant behind the cuishe and the barril, engraved in 1877 and lifted off its newspaper page, pot and all; it
   stands on the table like the hero's tobalá, with its own soft shadow */
.kin-plate { position: relative; z-index: 1; width: min(58%, 26rem); margin: 0 0 3.6rem .2rem; }   /* the margin is the card's overhang */
.kin-plate img { position: relative; z-index: 1; width: 100%; }
.kin-plate::after {
  content: ""; position: absolute; z-index: 0; left: 22%; right: 20%; bottom: -1%; height: 9%;
  background: radial-gradient(closest-side, rgba(74, 60, 36, .2), rgba(74, 60, 36, 0));
}
.kin-plate .specimen { position: absolute; z-index: 3; padding: .5rem .7rem .45rem; }
.kin-plate .specimen b { font-size: 1rem; }
.kin-plate .tag-a { left: 40%; top: 4%; --tilt: -1.3deg; }
.kin-plate .tag-b { left: 66%; top: 34%; --tilt: 1.2deg; }
.kin-plate figcaption { position: absolute; left: 0; right: 0; top: 100%; margin-top: .5rem; font-size: .875rem; line-height: 1.3; color: var(--cap); }
@media (max-width: 40rem) {
  .kin-plate .specimen span { display: none; }   /* the names stay on the plant */
  .kin-plate figcaption { left: 106%; right: auto; top: 3%; width: 8.4rem; margin: 0; }   /* the card covers the line under the pot; the corner beside the plant's top is free */
}
/* the app's own card, "Same plant as your Barril", pinned across the plant's foot and reaching out to its right */
.kin-plate .loupe--kin { z-index: 4; left: 20%; top: 79%; width: min(150%, 22rem); }
@media (min-width: 40rem) {
  .kin-plate { margin: 0 auto 2.6rem; }
  .kin-plate .loupe--kin { left: 46%; top: 70%; }
}
@media (min-width: 80rem) {
  /* the plant leads, labelled twice, and the app's card is pinned across its lower leaves; the words stand to their right,
     centred on them. Below 80rem the section stays stacked */
  .kin-grid { grid-template-columns: minmax(0, 1fr) 27.4rem; grid-template-areas: "stage copy"; column-gap: 3.4rem; align-items: center; }
  .kin-grid > .section-copy { grid-area: copy; }
  .kin-stage { grid-area: stage; display: block; padding-bottom: 2.6rem; }
  .kin-plate { width: 28rem; margin: 0 0 0 auto; }
  /* on a wide page the card reaches back out to the left, into the stage's open side, across the lower leaves */
  .kin-plate .loupe--kin { left: -47%; top: 60%; width: 22rem; }
  .kin-plate .tag-a { left: 22%; top: 3%; --tilt: -1.3deg; }
  .kin-plate .tag-b { left: auto; right: -3%; top: 50%; --tilt: 1.2deg; }
  .kin-plate figcaption { text-align: center; }
}

/* plain words: the word as the bottle's page shows it, the sheet that opens when it is tapped, and the plain names the app gives
   other label words. The two strips stand one over the other, the same width, like the one screen they were cut from; a touch
   ring marks the tap. Beside them, the heading and the slip of words */
.words { padding-block: clamp(2.8rem, 7vw, 4.4rem); overflow-x: clip; }
.words-grid { display: grid; gap: 1.8rem; }
.words h2 span { display: block; }
.words-stage { display: grid; gap: 1.1rem; }
.words-stage .loupe { position: relative; transform: none; --shade-to: var(--lie); box-shadow: var(--lie); }
.loupe--page { z-index: 1; }
/* the sheet's top corners are clear in the picture itself, so the paper shows there; it brings its own edge */
.loupe--sheet { z-index: 2; }
.loupe--sheet img { border-radius: 0; box-shadow: none; filter: brightness(1.075); }   /* the sheet as the phone draws it, a step brighter, so it reads as the white sheet it is */
/* the plain names the app gives other label words, in the app's own form: the plain words first, the label's word after it
   in brackets. An open list, ruled, in the page's own type (the paper is for the screens) */
.word-slip { margin: 0; padding: 0; max-width: 100%; list-style: none; }
/* one quiet line says what the list is, so its ruled rows do not read as links */
.slip-lead { margin: 0 0 .5rem; font-size: 1rem; line-height: 1.4; color: var(--soft); }
.word-slip li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .5rem; padding: .95rem 0; border-top: 1px solid rgba(17, 19, 22, .16); }
.word-slip li:last-child { border-bottom: 1px solid rgba(17, 19, 22, .16); }
.word-slip b { font: 600 1.45rem/1.15 var(--display); letter-spacing: -.02em; color: var(--ink); }
.word-slip span { font-size: 1.1rem; line-height: 1.3; color: var(--soft); }
@media (min-width: 52rem) {
  .words-grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); grid-template-areas: "stage copy" "stage slip"; column-gap: clamp(2.4rem, 6vw, 5.4rem); row-gap: 0; }
  .words-stage { grid-area: stage; align-self: center; }
  .words-copy { grid-area: copy; align-self: end; }
  .word-slip-block { grid-area: slip; align-self: start; justify-self: start; width: min(100%, 27rem); margin-top: 1.9rem; }
}
@media (min-width: 63rem) {
  .words-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); column-gap: 3.4rem; }
  .words-stage { justify-self: start; width: min(100%, 35rem); }
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .loupe--sheet { animation: sheet-up linear both; animation-timeline: view(); animation-range: entry 34% cover 44%; }
    @keyframes sheet-up { from { opacity: 0; translate: 0 1.4rem; } to { opacity: 1; translate: 0 0; } }
  }
}

/* the map: the app's map at page size on a sheet of the labels' paper that runs the page's full width, its title
   printed on the sheet like a map's own title, where the other sections put words on white */
.map-spread { padding-block: clamp(1.2rem, 3.4vw, 2rem); }
/* a band, not a card: no shadow on one edge, a hairline on both */
.map-sheet {
  background: var(--paper-grain);
  border-block: 1px solid rgba(23, 20, 16, .08);
  box-shadow: 0 14px 18px -16px rgba(58, 46, 26, .42);   /* the sheet lies on the page: the labels' light, falling below it */
  padding-block: clamp(2rem, 6vw, 3.4rem) clamp(4.6rem, 10vw, 4.6rem);   /* the map's tag hangs below the map: room for it, and a margin under it */
}
/* the paper's specks never touch the words: a halo of the paper's own colour around each letter */
.map-title h2, .map-title p { text-shadow: 0 0 .3rem var(--label), 0 0 .15rem var(--label), 0 0 .08rem var(--label); }
.map-grid { display: grid; gap: 1.2rem; }
/* the one thing the map must say: this is a sample. Reading size, in ink, right under the line it qualifies */
.map-key { display: flex; align-items: center; gap: .3rem; margin-top: .9rem; font-size: .95rem; line-height: 1; color: var(--soft); }
.map-key i { display: block; width: 1.7rem; height: .8rem; background: var(--c); border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(23, 20, 16, .12); }
.map-key span { margin-inline: .35rem .45rem; }
.map-key span:last-child { margin-right: 0; }
.map-title .map-sample { margin-top: 1rem; font-size: 1rem; line-height: 1.4; color: var(--ink); }
.map-stage { position: relative; container-type: inline-size; view-timeline: --map block; }
/* the land, then each tinted state, then the pins, stacked; multiplied onto the paper as one picture, so the tints replace
   the land beneath them instead of darkening it */
.map-art { position: relative; mix-blend-mode: multiply; }
.map-art img { display: block; width: 100%; height: auto; }
.map-art .map-fill { position: absolute; inset: 0; height: 100%; }
/* the villages: a ringed dot at each place the map could place, its name on a leader line in the blank sea below (written by
   tools/map.py). They are real elements, not part of the picture, so they keep one readable size at every width */
.map-places { position: absolute; inset: 0; pointer-events: none; }
.map-leaders { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.map-leaders path { fill: none; stroke: var(--deep); stroke-width: 1.4px; vector-effect: non-scaling-stroke; }
.map-leaders path.halo { stroke: #fff; stroke-width: 3.8px; }   /* a white underlay: the line shows over the dark state too */
.pin { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); z-index: 2; width: clamp(10px, 1.7cqw, 13px); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: #fff; border: clamp(2.2px, .38cqw, 3px) solid var(--deep); box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .95); }
.plabel { position: absolute; z-index: 2; top: calc(var(--y) * 1%); translate: 0 -50%; font: 600 clamp(.875rem, 1.8cqw, .95rem)/1 var(--display); letter-spacing: -.005em; color: var(--ink); white-space: nowrap; text-shadow: 0 0 .3rem var(--label), 0 0 .15rem var(--label), 0 0 .08rem var(--label); }
.plabel { line-height: 1.12; }
.plabel--l { right: calc((100 - var(--x)) * 1%); margin-right: .5rem; text-align: right; }
.pin--n { display: grid; place-items: center; width: clamp(15px, 2.4cqw, 19px); }
.pin--n::after { content: attr(data-n); font: 700 clamp(.5625rem, 1.25cqw, .6875rem)/1 var(--display); color: var(--deep); }
.plabel--r { left: calc(var(--x) * 1%); margin-left: .5rem; }
/* one tag gives the map its reading: where the sample shelf's bottles cluster */
.map-tag { position: absolute; z-index: 3; left: 67%; top: 100%; --tilt: 0deg; padding: .45rem .7rem .4rem; background: transparent; box-shadow: none; }   /* printed, not stuck on */
.map-tag b { font-size: .95rem; }
@media (max-width: 51.99rem) {
  .map-stage { margin-bottom: 3.4rem; }
  .map-sheet { padding-bottom: 2.2rem; }
}
@media (min-width: 52rem) {
  .map-grid { grid-template-columns: minmax(0, .6fr) minmax(0, 1.4fr); gap: 2.4rem; align-items: center; }
  .map-tag { left: 69%; top: 101%; }   /* in the Pacific below Chiapas, off every tinted state, clear of the names */
}

/* the close: the whole plate the hero's tobalá was cut out of, edge to edge, then the one line and where to say hello */
.close { padding-block: 0 clamp(3.4rem, 8vw, 4.5rem); }
.close-plate { margin: 0; }
/* the print's own top edge, kept hard: the leaf tips touch it in the 1868 print itself. Only its paper's foot softens into the page */
.close-plate img { width: 100%; height: auto; -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 7px), transparent 100%); mask-image: linear-gradient(to bottom, #000 calc(100% - 7px), transparent 100%); }
.close-plate figcaption { margin-top: .8rem; font-size: .875rem; line-height: 1.4; color: var(--cap); }
/* the line gets a section's worth of room and the page's largest type: it is the last beat, not the plate's caption */
.close-row { display: grid; gap: 1.8rem; margin-top: clamp(3.4rem, 8vw, 6rem); }
.close h2 { margin: 0; font: 500 clamp(3rem, 8.4vw, 7.4rem)/.97 var(--display); letter-spacing: -.042em; word-spacing: .04em; }
.close h2 span { display: block; text-wrap: balance; }
.get { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .9rem 1rem; }
.get > .ask-cta { grid-column: 1 / -1; margin-top: .4rem; max-width: 26rem; }
.app-icon { flex: none; width: 3.4rem; height: 3.4rem; border-radius: 22.4%; box-shadow: var(--lift); }
.get > p:not(.ask-cta) { display: grid; gap: .2rem; max-width: 19rem; }
.get b { font: 600 clamp(1.15rem, 1rem + .6vw, 1.5rem)/1.15 var(--display); letter-spacing: -.01em; }
.get > p:not(.ask-cta) span { color: var(--soft); font-size: .9rem; }
@media (min-width: 52rem) {
  /* under the line, one row: the icon and the status, then the way to say hello */
  .close-row { gap: 2.6rem; }
  .get { grid-template-columns: auto auto auto; justify-content: start; column-gap: 1rem; }
  .get > .ask-cta { grid-column: auto; margin: 0 0 0 2.2rem; }
}


/* ---------- footer: an agave field in one green ink, the words in its sky ----------
   The field is an 1887 wood engraving (tools/footer.py), printed on the labels' paper. The mark and the address sit top left,
   two lines of small print below them (the age line, then the name, the year and Credits); the field rises under the words,
   its sky fading into the paper, so the horizon does the work. */
.foot { position: relative; background: var(--paper-grain); border-top: 1px solid rgba(23, 20, 16, .08); color: var(--cap); font-size: .875rem; overflow: hidden; }
.foot-sky { position: relative; z-index: 1; display: grid; justify-items: start; gap: 1rem; padding-top: clamp(2.2rem, 5vw, 3.4rem); }
.foot-id { display: grid; justify-items: start; gap: .15rem; }
.foot .word { font-size: 1.25rem; }
.foot .mark { width: 1.6rem; height: 1.6rem; }
.foot-mail { font: 600 1rem/1.2 var(--display); letter-spacing: -.005em; padding-block: .75rem; }   /* 44 px to tap */
.foot-notes { display: grid; gap: .5rem; max-width: 40rem; line-height: 1.55; }
.foot-notes span { display: inline-block; }   /* a narrow screen breaks the age line between its two sentences, never inside one */
.foot-notes a { position: relative; color: inherit; }
.foot-notes a::after { content: ""; position: absolute; inset: -.7rem -.4rem; }   /* a target a thumb can find, its focus ring still the word's */
.foot-notes a:hover, .foot-notes a[aria-current="page"] { color: var(--green); }
/* the engraving's lines never touch the words: a halo of the paper's own colour round each letter, as on the map's band */
.foot-sky a, .foot-notes p { text-shadow: 0 0 .3rem var(--label), 0 0 .15rem var(--label), 0 0 .08rem var(--label); }
/* the field: the whole width, cut from the top so the plants always reach the page's foot; its sky fades into the paper
   under the fine print */
.foot-field { display: block; width: 100%; height: 25rem; object-fit: cover; object-position: 8% 100%; margin-top: -2.4rem; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 34%); mask-image: linear-gradient(to bottom, transparent, #000 34%); }
@media (min-width: 40rem) {
  /* wider: the whole engraving, edge to edge, its sky and hills rising behind the fine print */
  .foot-field { height: auto; aspect-ratio: 1637 / 808; margin-top: calc(-1 * min(15vw, 13rem)); -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%); mask-image: linear-gradient(to bottom, transparent, #000 22%); }
}

/* ---------- reading pages (privacy, terms, support) ---------- */
.doc { padding-block: clamp(2.4rem, 6vw, 3.6rem) clamp(3.4rem, 9vw, 5.4rem); }

.doc h1 { font-size: clamp(2.5rem, 1.6rem + 3vw, 3.4rem); letter-spacing: -.03em; }
.doc-meta { margin: 1rem 0 2rem; color: var(--cap); font-size: .9rem; }
.doc-lede { font: 600 clamp(1.15rem, 1rem + .6vw, 1.5rem)/1.15 var(--display); letter-spacing: -.01em; color: var(--ink); margin-bottom: 1.6rem; }
.doc ul, .doc ol { margin: 0; padding-left: 1.2rem; display: grid; gap: .9rem; }
.doc li { padding-left: .3rem; }
.doc li::marker { color: var(--green); }
.doc ol > li::marker { font: 600 1rem var(--display); }
.doc li ul { margin-top: .6rem; gap: .4rem; }
.doc strong { font-weight: 600; }
.doc .contact { margin-top: 2rem; }
/* a long policy reads in sections: a heading a size above the text, never a home-page headline */
.doc h2 { margin: 2.4rem 0 .8rem; font: 600 clamp(1.2rem, 1.1rem + .4vw, 1.35rem)/1.2 var(--display); letter-spacing: -.01em; }
.doc h2 + p { margin-bottom: .8rem; }
.doc p + p { margin-top: .8rem; }
/* support: the app's own Settings rows, lifted onto paper; after the questions on a phone, across the band's lower edge on a
   wide page, so the first screen holds the address and where it lives in the app */
.doc-aside--card { display: grid; justify-items: start; margin-top: 2rem; }
.doc-aside--card .loupe--settings { position: relative; width: min(100%, 22rem); transform: rotate(-.7deg); }
.doc-aside--card .specimen { position: relative; z-index: 3; margin: -.5rem 0 0 auto; --tilt: 1.2deg; }
@media (min-width: 60rem) {
  .has-card { position: relative; }
  .ask-band { min-height: 19.5rem; }
  .ask-band > .wrap { display: flex; flex-direction: column; align-items: flex-start; min-height: calc(19.5rem - 6.4rem); }
  .doc-aside--card { position: absolute; z-index: 4; top: 2.6rem; right: max(var(--gutter), calc((100% - var(--shell)) / 2)); width: 29rem; margin: 0; justify-items: end; }
  .doc-aside--card .loupe--settings { width: 100%; }
  .doc-aside--card .specimen { margin: -.5rem 1.2rem 0 0; }
  .doc { display: block; padding-top: 4.4rem; }
}
/* the founder's blanks in a draft: impossible to miss, gone before anything is published */
.fill { background: #fff1b8; box-shadow: 0 0 0 .15em #fff1b8; border-radius: 2px; color: var(--ink); -webkit-box-decoration-break: clone; box-decoration-break: clone; }

.ask { display: grid; gap: .5rem; margin-block: 1.2rem 0; }
/* support: the ask on a band of the labels' paper, like the map's; the specks never touch the words */
.ask-band { background: var(--paper-grain); border-block: 1px solid rgba(23, 20, 16, .08); box-shadow: 0 14px 18px -16px rgba(58, 46, 26, .42); padding-block: clamp(2rem, 6vw, 3.2rem); }
.ask-band h1, .ask-band .doc-meta, .ask-band a { text-shadow: 0 0 .3rem var(--label), 0 0 .15rem var(--label), 0 0 .08rem var(--label); }
.ask-band h1 { font-size: clamp(2.5rem, 1.6rem + 3vw, 3.4rem); letter-spacing: -.03em; }
.ask .doc-meta { margin: 0; font-size: clamp(1.05rem, 1rem + .3vw, 1.15rem); color: var(--soft); }
.ask a { font: 700 clamp(1.5rem, 1.1rem + 2vw, 2.6rem)/1.05 var(--display); letter-spacing: -.03em; overflow-wrap: anywhere; }
.faq { margin: 0; display: grid; gap: 1.6rem; }
.faq dt { font: 600 1.15rem/1.15 var(--display); letter-spacing: -.01em; }
.faq dd { margin: .4rem 0 0; max-width: 34rem; color: var(--soft); text-wrap: pretty; }   /* about 70 characters a line */
.faq dd b { font-weight: 600; color: var(--ink); }   /* the app's own button and tab names */
.faq .plain { margin: 0 0 .5rem; padding-left: 1.1rem; display: grid; gap: .15rem; }
.faq .plain li::marker { color: var(--green); }
@media (min-width: 60rem) {
  .faq { display: block; column-count: 2; column-gap: 5rem; }
  .faq > div { break-inside: avoid; margin-bottom: 2.2rem; }
}

/* ---------- credits: the support page's band without its card, then a short list ----------
   The old prints read like a botanical book's list of plates: each one small at the left, at its own shape, its name and
   year beside it, the journal under that in a botanist's italic. Links stay in the text's own colour; there is no action
   on this page to give the green to. */
.ask-band--plain .doc-meta { margin: .8rem 0 0; font-size: clamp(1.05rem, 1rem + .3vw, 1.15rem); color: var(--soft); }
.credit-list { margin: 0; display: grid; gap: 2rem; }
.credit-list dt { font: 600 1.15rem/1.15 var(--display); letter-spacing: -.01em; }
.credit-list dd { margin: .5rem 0 0; color: var(--soft); text-wrap: pretty; }
.credit-list dd > p { max-width: 34rem; }
.credit-list dd > p + p { margin-top: .3rem; }
.credit-list a { color: inherit; }
.credit-list a:hover { color: var(--green); }
.doc .credit-pics { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: 1.2rem; }
.doc .credit-pics li { padding: 0; display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 1rem; align-items: center; }
.credit-pics img { grid-row: 1 / 3; justify-self: center; }
.credit-pics b { align-self: end; font: 600 1rem/1.25 var(--display); color: var(--ink); }
.credit-pics b i { font: italic 400 1.04em/1 var(--serif); }
.credit-pics span { align-self: start; font-size: .9rem; }
.t-plate { width: 5.5rem; border-radius: 2px; box-shadow: var(--lie); }
.t-engraving { width: 4.4rem; }
.t-field { width: 5.5rem; background: var(--paper-grain); border-radius: 2px; box-shadow: var(--lie); }   /* as the footer prints it */
/* the band's grain is the 1912 paper's, so its credit is a label of the same paper, hung from the band's edge */
.band-tag { max-width: 100%; margin: 1.2rem 0 -2.6rem auto; position: relative; z-index: 2; --tilt: 1.2deg; }
.band-tag b { font-variant-numeric: normal; }
@media (min-width: 60rem) {
  .ask-band--plain, .ask-band--plain > .wrap { min-height: 0; }
  .ask-band--plain > .wrap { position: relative; }
  .band-tag { position: absolute; right: 1.2rem; bottom: -4.4rem; margin: 0; }
  .doc.credits { padding-top: 3.4rem; }
  .doc .credit-pics li { grid-template-columns: 7rem minmax(0, 1fr); column-gap: 1.2rem; }
  .t-plate, .t-field { width: 7rem; }
  .t-engraving { width: 5.6rem; }
  .credit-list { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 5rem; row-gap: 2.2rem; align-items: start; }
  .credit-old { grid-row: span 4; }
}

/* ---------- wide page: one right-hand column, last so it wins over each section's own ---------- */
@media (min-width: 72rem) {
  .words-grid { grid-template-columns: minmax(0, 1fr) 27.4rem; }
}