/* COIL — one high-mountain oolong.
   The page opens the way the leaf does: the hero is set in the narrowest,
   heaviest cut of Anybody (the dry pellet), and every steep after it is set a
   little wider and lighter, until the footer's wordmark lies fully open.
   Tokens and the reasons for them: DESIGN.md. */

@font-face {
  font-family: "Anybody";
  src: url("../fonts/anybody-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 50% 150%;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

:root {
  --porcelain: #f4f4ef;   /* page ground: the white sweep of every product shot, multiplied in */
  --paper: #fbfbf8;       /* order panel, inputs */
  --ink: #22231a;         /* all text: the dry pellet's olive-black. 14.4:1 on porcelain, 15.3:1 on paper */
  --olive: #5c5d4b;       /* secondary text. 6.1:1 on porcelain, 6.5:1 on paper */
  --line: #8b8c7a;        /* input and cup rings (non-text UI). 3.1:1 on porcelain, 3.3:1 on paper */
  --rule: #dcddd4;        /* hairlines only */
  --liquor: #cfc354;      /* the fullest cup; fills, never text */
  --s1: #e0d98f; --s2: #cfc354; --s3: #c9bc5a; --s4: #d9d190; --s5: #e8e4bd;

  --display: "Anybody", "Arial Narrow", "Helvetica Neue", sans-serif;
  --text: "Newsreader", "Iowan Old Style", Georgia, serif;

  --gut: clamp(16px, 4vw, 56px);
  --gap: clamp(14px, 2.2vw, 32px);
  --top-h: 64px;
  --r: 3px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --uncoil: 1.6s;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--top-h) + 12px);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--porcelain);
  color: var(--ink);
  font-family: var(--text);
  font-size: 1.125rem;
  line-height: 1.6;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: rgba(34, 35, 26, .12);
  touch-action: manipulation;
}

img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
a { color: inherit; }
ol, ul { margin: 0; padding: 0; }
button, input { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px; }

.wrap {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: var(--gut);
}

.skip {
  position: absolute; left: 12px; top: -80px; z-index: 30;
  background: var(--ink); color: var(--porcelain);
  padding: 12px 16px; border-radius: var(--r);
  font: 600 1rem/1 var(--display); text-decoration: none;
}
.skip:focus { top: 12px; }

/* ---------- type ---------- */

.h1, .h2, .h3, .wordmark, .btn, .textlink, .ledger, .nav, .facts dt, .spec dt, .sum, .order, figcaption, .foot__word {
  font-family: var(--display);
}

.h1 {
  font-stretch: 50%;
  font-weight: 800;
  font-size: clamp(3.5rem, 1.3rem + 7.4vw, 8.25rem);
  line-height: .9;
  letter-spacing: -.004em;
  margin: 0 0 .32em;
  text-wrap: balance;
}

/* Each steep's heading: width, weight, size, leading and tracking loosen together.
   --from-* is where the previous steep left off; the heading uncoils from there. */
.h2 {
  position: relative;
  font-stretch: var(--w);
  font-weight: var(--wt);
  font-size: var(--size);
  line-height: var(--lh);
  letter-spacing: var(--ls, 0);
  margin: 0 0 .5em;
  text-wrap: balance;
}
.s1 { --w: 62%;  --wt: 740; --size: clamp(2.75rem, 1.3rem + 5vw, 6.5rem);   --lh: .9;   --ls: -.004em; --from-w: 50%;  --from-wt: 800; }
.s2 { --w: 80%;  --wt: 650; --size: clamp(2.55rem, 1.25rem + 4.5vw, 5.9rem); --lh: .93;  --ls: -.002em; --from-w: 62%;  --from-wt: 740; }
.s3 { --w: 100%; --wt: 560; --size: clamp(2.4rem, 1.2rem + 4.3vw, 5.6rem);  --lh: .96;  --ls: 0;       --from-w: 80%;  --from-wt: 650; }
.s4 { --w: 122%; --wt: 450; --size: clamp(2.1rem, 1.1rem + 3.3vw, 4.4rem);  --lh: 1;    --ls: .004em;  --from-w: 100%; --from-wt: 560; }
.s5 { --w: 142%; --wt: 350; --size: clamp(1.95rem, 1rem + 3vw, 4.1rem);     --lh: 1.05; --ls: .008em;  --from-w: 122%; --from-wt: 450; }
.buy { --w: 150%; --wt: 300; --size: clamp(2.2rem, 1.2rem + 3.4vw, 4.6rem); --lh: 1;    --ls: .01em;   --from-w: 142%; --from-wt: 350; }

/* the uncoil: a copy of the heading, laid over it, runs from the last steep's cut to this one's.
   The real heading keeps its final layout (no reflow below it) and stays in the accessibility tree. */
.h2.is-uncoiling { color: transparent; }
.uncoil {
  position: absolute; left: 0; top: 0; width: 100%;
  color: var(--ink);
  pointer-events: none;
  transition: font-stretch var(--uncoil) var(--ease), font-weight var(--uncoil) var(--ease);
}
.uncoil.is-from { font-stretch: var(--from-w); font-weight: var(--from-wt); transition: none; }

.h3 {
  font-stretch: 100%;
  font-weight: 620;
  font-size: 1rem;
  line-height: 1.3;
  letter-spacing: .005em;
  margin: 0 0 .9em;
}

.lede { font-size: clamp(1.15rem, 1.05rem + .35vw, 1.35rem); line-height: 1.55; max-width: 34em; }
.big { font-size: clamp(1.2rem, 1.08rem + .45vw, 1.45rem); line-height: 1.5; }

.textlink {
  font-stretch: 100%; font-weight: 560; font-size: 1rem;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .28em;
  display: inline-flex; align-items: center; min-height: 44px;
}
.textlink:hover { text-decoration-thickness: 2px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .3em;
  min-height: 48px; padding: 0 22px;
  background: var(--ink); color: var(--porcelain);
  border: 0; border-radius: var(--r);
  font-stretch: 100%; font-weight: 600; font-size: 1rem; line-height: 1;
  text-decoration: none; cursor: pointer;
  transition: background-color .15s ease;
}
.btn:hover { background: #3a3b2e; }
.btn:active { transform: translateY(1px); }
.btn--small { min-height: 44px; padding: 0 16px; font-size: .9375rem; }
.btn--wide { width: 100%; }

/* ---------- header ---------- */

.top {
  position: sticky; top: 0; z-index: 20;
  background: rgba(244, 244, 239, .92);
  -webkit-backdrop-filter: saturate(1.2) blur(10px);
  backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 1px solid var(--rule);
}
.top__in { height: var(--top-h); display: flex; align-items: center; gap: var(--gap); }
.wordmark {
  font-stretch: 50%; font-weight: 820; font-size: 1.75rem; line-height: 1;
  letter-spacing: .02em; text-transform: uppercase; text-decoration: none;
  display: inline-flex; align-items: center; min-height: 44px;
}
.nav { margin-left: auto; }
.nav ol { display: flex; list-style: none; gap: clamp(4px, 1.4vw, 22px); }
.nav a {
  display: inline-flex; align-items: center; gap: .5em; min-height: 44px; padding: 0 4px;
  font-stretch: 100%; font-weight: 520; font-size: .9375rem; text-decoration: none;
}
.nav a:hover { text-decoration: underline; text-underline-offset: .3em; }
.nav__n {
  display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--line);
  font-size: .75rem; font-weight: 600; font-variant-numeric: lining-nums;
}
.nav a.is-here .nav__n { background: var(--liquor); box-shadow: none; }
.nav li:nth-child(1) a.is-here .nav__n { background: var(--s1); }
.nav li:nth-child(2) a.is-here .nav__n { background: var(--s2); }
.nav li:nth-child(3) a.is-here .nav__n { background: var(--s3); }
.nav li:nth-child(4) a.is-here .nav__n { background: var(--s4); }
.nav li:nth-child(5) a.is-here .nav__n { background: var(--s5); }
.top .btn--small { margin-left: clamp(4px, 1vw, 16px); }

/* ---------- cups: the session tally, the one repeated device ---------- */

.cups { display: flex; gap: 8px; list-style: none; }
.cups li {
  width: 14px; height: 14px; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--line);
}
.cups li:nth-child(1).is-poured, .cups li:nth-child(1).is-now { background: var(--s1); }
.cups li:nth-child(2).is-poured, .cups li:nth-child(2).is-now { background: var(--s2); }
.cups li:nth-child(3).is-poured, .cups li:nth-child(3).is-now { background: var(--s3); }
.cups li:nth-child(4).is-poured, .cups li:nth-child(4).is-now { background: var(--s4); }
.cups li:nth-child(5).is-poured, .cups li:nth-child(5).is-now { background: var(--s5); }
.cups li.is-poured { box-shadow: none; }
.cups li.is-now { box-shadow: 0 0 0 2px var(--porcelain), 0 0 0 3.5px var(--ink); }
.cups--empty { gap: 10px; }
.cups--empty li { width: 18px; height: 18px; }

/* ---------- hero: dry ---------- */

.hero {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  align-items: center;
  min-height: calc(100svh - var(--top-h));
  padding-block: clamp(28px, 5vh, 64px);
}
.hero__text { grid-column: 1 / span 6; grid-row: 1; }
.hero__img { grid-column: 7 / -1; grid-row: 1; justify-self: end; width: min(100%, calc(100svh - var(--top-h) - 110px)); }
.hero__img figcaption { text-align: center; }
.hero__act { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin: 1.6em 0 2.2em; }
.session { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 18px; border-top: 1px solid var(--rule); max-width: 34rem; }
.session__txt { font-size: 1rem; color: var(--olive); margin: 0; }

/* ---------- a steep ---------- */

.steep { padding-top: clamp(80px, 11vw, 170px); }

.ledger {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: 8px;
  align-items: baseline;
  border-top: 1.5px solid var(--ink);
  padding-block: 16px 18px;
  margin-bottom: clamp(40px, 6vw, 88px);
  font-stretch: 100%;
  font-size: .9375rem;
  line-height: 1.4;
}
.ledger p { margin: 0; }
.ledger__n { grid-column: 1 / span 2; grid-row: 1; font-weight: 640; font-size: 1.0625rem; }
.ledger__n > span { color: var(--olive); font-weight: 500; }
.ledger .cups { grid-column: 3 / span 2; grid-row: 1; align-self: center; }
.ledger__time { grid-column: 5 / span 2; grid-row: 1; }
.ledger__time > span:first-child { font-size: 1.625rem; font-weight: 520; line-height: 1; font-variant-numeric: lining-nums tabular-nums; }
.ledger__at { color: var(--olive); white-space: nowrap; font-family: var(--text); font-size: 1rem; }  /* Anybody's degree sign is a speck */
.ledger__taste { grid-column: 7 / span 3; grid-row: 1; font-family: var(--text); font-size: 1.0625rem; }
.ledger__leaf { grid-column: 10 / -1; grid-row: 1; color: var(--olive); }
.ledger__k { display: block; color: var(--ink); font-weight: 600; }

figcaption { font-stretch: 100%; font-weight: 500; font-size: .8125rem; line-height: 1.4; color: var(--olive); margin-top: 10px; }

/* steep 1 */
.s1__grid, .s2__grid, .s3__grid, .s4__grid, .s5__grid, .buy__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
}
.s1__text { grid-column: 1 / span 6; grid-row: 1; }
.s1__text > p { max-width: 31em; }
.s1__img { grid-column: 8 / -1; grid-row: 1; align-self: start; }

.facts, .spec { margin: 2em 0 0; max-width: 34rem; }
.facts div, .spec div {
  display: grid; grid-template-columns: 9.5rem 1fr; gap: 12px;
  padding: 10px 0; border-top: 1px solid var(--rule);
}
.facts div:last-child, .spec div:last-child { border-bottom: 1px solid var(--rule); }
.facts dt, .spec dt { font-stretch: 100%; font-weight: 560; font-size: .9375rem; color: var(--olive); }
.facts dd, .spec dd { margin: 0; }

/* steep 2 */
.s2__img { grid-column: 1 / span 6; grid-row: 1; }
.s2__text { grid-column: 8 / -1; grid-row: 1; align-self: center; }
.s2__text > p { max-width: 30em; }

/* steep 3 */
.s3__h { max-width: 14em; }
/* the whole argument in one row: the same size, the same white, side by side */
.s3__grid { align-items: start; row-gap: 22px; }
.s3__fig--leaf { grid-column: 1 / span 6; grid-row: 1; }
.s3__fig--bag  { grid-column: 7 / -1; grid-row: 1; }
.s3__say { margin: 0; max-width: 26em; }
.s3__say--leaf { grid-column: 1 / span 6; grid-row: 2; }
.s3__say--bag  { grid-column: 7 / -1; grid-row: 2; color: var(--olive); }

/* steep 4 */
.s4__grid { align-items: center; }
.s4__tin { grid-column: 1 / span 7; grid-row: 1; }
.s4__text { grid-column: 8 / -1; grid-row: 1; }
.s4__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; margin-top: 1.6em; font-family: var(--display); font-stretch: 100%; }
.s4__amt { font-stretch: 122%; font-weight: 450; font-size: 2.25rem; line-height: 1; }
.s4__or { color: var(--olive); font-weight: 500; font-size: .9375rem; }

/* steep 5 */
.s5__h { max-width: 16em; }
.brew__need { grid-column: 1 / span 4; grid-row: 1; }
.brew__steps { grid-column: 6 / -1; grid-row: 1; }
.need { list-style: none; }
.need li { padding: 10px 0; border-top: 1px solid var(--rule); }
.need li:last-child { border-bottom: 1px solid var(--rule); }
.brew__cup { margin-top: 28px; width: min(100%, 300px); }

.steps { list-style: none; counter-reset: s; margin-bottom: 1.6em; }
.steps li {
  counter-increment: s;
  display: grid; grid-template-columns: 2.2rem 5.5rem 1fr; gap: 14px; align-items: start;
  padding: 14px 0; border-top: 1px solid var(--rule);
}
.steps li:last-child { border-bottom: 1px solid var(--rule); }
.steps li::before {
  content: counter(s);
  font-family: var(--display); font-stretch: 100%; font-weight: 600; font-size: .8125rem;
  display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
}
.steps__note { padding-top: 1px; line-height: 1.45; }
.steps li:nth-child(1)::before { background: var(--s1); }
.steps li:nth-child(2)::before { background: var(--s2); }
.steps li:nth-child(3)::before { background: var(--s3); }
.steps li:nth-child(4)::before { background: var(--s4); }
.steps li:nth-child(5)::before { background: var(--s5); }
.steps__t { font-family: var(--display); font-stretch: 122%; font-weight: 450; font-size: 1.5rem; line-height: 1; font-variant-numeric: lining-nums tabular-nums; }
.note { color: var(--olive); max-width: 36em; }
.aside { margin-top: 1.8em; padding: 18px 20px; background: var(--paper); border-left: 3px solid var(--liquor); max-width: 36em; }
.aside .h3 { margin-bottom: .4em; }

/* ---------- buy ---------- */

.buy { padding-block: clamp(96px, 12vw, 180px) clamp(72px, 9vw, 130px); }
.buy__grid { row-gap: 40px; align-items: start; }
.buy__intro { grid-column: 1 / span 5; grid-row: 1; }
.buy__intro > p { max-width: 28em; }
.buy__tin { width: min(100%, 420px); margin-top: 28px; }
.order {
  grid-column: 7 / -1; grid-row: 1;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  padding: clamp(20px, 3vw, 36px);
  box-shadow: 0 24px 60px -36px rgba(34, 35, 26, .35);
  font-stretch: 100%;
}
.order__set { border: 0; margin: 0 0 26px; padding: 0; min-width: 0; }
.order__set legend, .order__set > label.h3 { display: block; padding: 0; margin-bottom: 12px; }
.order__hint { font-size: .875rem; color: var(--olive); margin: 10px 0 0; }

.choice { display: block; cursor: pointer; }
.choice + .choice { margin-top: 10px; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice > span {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 52px; padding: 10px 16px 10px 46px; position: relative;
  border: 1px solid var(--line); border-radius: var(--r);
  font-weight: 520; font-size: 1rem;
}
.choice > span::before {
  content: ""; position: absolute; left: 16px; top: 50%; width: 18px; height: 18px; margin-top: -9px;
  border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line); background: var(--paper);
}
.choice input:checked + span { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.choice input:checked + span::before { box-shadow: inset 0 0 0 5px var(--ink); }
.choice input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 3px; }
.choice:hover > span { border-color: var(--ink); }
.choice__price { font-weight: 600; white-space: nowrap; }

.stepper { display: inline-flex; align-items: stretch; border: 1px solid var(--line); border-radius: var(--r); }
.stepper__b { width: 48px; min-height: 48px; border: 0; background: none; cursor: pointer; font-size: 1.25rem; }
.stepper__b:disabled { color: #a9aa9c; cursor: default; }
.stepper__b:not(:disabled):hover { background: var(--porcelain); }
.stepper input {
  width: 3.5rem; border: 0; border-inline: 1px solid var(--line); background: none; text-align: center;
  font-weight: 600; font-size: 1.125rem; -moz-appearance: textfield; appearance: textfield;
}
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.sum { margin: 0 0 22px; border-top: 1px solid var(--rule); }
.sum div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--rule); font-size: .9375rem; }
.sum dt { color: var(--olive); }
.sum dd { margin: 0; font-weight: 560; font-variant-numeric: tabular-nums; }
.sum__total dt, .sum__total dd { color: var(--ink); font-weight: 650; font-size: 1.125rem; }
.order__status { margin: 14px 0 0; font-size: .9375rem; min-height: 1.4em; }

/* ---------- footer: open ---------- */

.foot { border-top: 1.5px solid var(--ink); padding-block: clamp(28px, 4vw, 56px) 40px; overflow: hidden; }
.foot__word {
  --w: 150%; --wt: 300; --from-w: 50%; --from-wt: 820;
  position: relative;
  font-stretch: 150%; font-weight: 300;
  font-size: clamp(5rem, 1rem + 19vw, 19rem);
  line-height: .8; letter-spacing: .01em;
  margin: 0 0 .22em -.04em;
}
.foot__word.is-uncoiling { color: transparent; }
.foot__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px 32px; font-size: 1rem; color: var(--olive); }
.foot__row p { margin: 0; max-width: 34em; }
.foot__row a { color: var(--ink); }

/* ---------- smaller screens ---------- */

@media (max-width: 1100px) {
  .ledger__taste { grid-column: 7 / -1; }
  .ledger__leaf { grid-column: 7 / -1; grid-row: 2; }
}

@media (max-width: 899px) {
  :root { --top-h: 58px; }
  .nav { display: none; }
  .top .btn--small { margin-left: auto; }
  .hero { min-height: 0; padding-block: 28px 8px; row-gap: 24px; }
  .hero__text, .hero__img { grid-column: 1 / -1; }
  .hero__img { grid-row: 2; justify-self: center; width: min(100%, 520px); }
  .hero__act { margin: 1.3em 0 1.6em; }

  .ledger { grid-template-columns: auto auto 1fr; column-gap: 16px; row-gap: 10px; }
  .ledger__n { grid-column: 1; grid-row: 1; }
  .ledger .cups { grid-column: 2; grid-row: 1; }
  .ledger__time { grid-column: 3; grid-row: 1; justify-self: end; }
  .ledger__taste { grid-column: 1 / -1; grid-row: 2; }
  .ledger__leaf { grid-column: 1 / -1; grid-row: 3; }
  .ledger__k { display: inline; margin-right: .4em; }

  .s1__text, .s1__img, .s2__img, .s2__text, .s4__tin, .s4__text,
  .brew__need, .brew__steps, .buy__intro, .order { grid-column: 1 / -1; grid-row: auto; }
  .s1__img, .s2__text, .s4__text, .brew__steps { margin-top: 36px; }
  .s3__fig--leaf { grid-column: 1 / -1; grid-row: 1; }
  .s3__say--leaf { grid-column: 1 / -1; grid-row: 2; }
  .s3__fig--bag  { grid-column: 1 / -1; grid-row: 3; margin-top: 28px; }
  .s3__say--bag  { grid-column: 1 / -1; grid-row: 4; }
  .buy__grid { row-gap: 28px; }
  .s1__img { max-width: 560px; }
  .brew__cup { width: min(60%, 240px); }
  .facts div, .spec div { grid-template-columns: 7.5rem 1fr; }
  .buy__tin { display: none; }
}

@media (max-width: 420px) {
  body { font-size: 1.0625rem; }
  .steps li { grid-template-columns: 1.9rem 4.6rem 1fr; gap: 10px; }
  .steps__t { font-size: 1.3rem; }
}

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