/* Parchment | coffee roastery & cafe HTML template
   All colours, fonts and the radius live here in :root. The page "roasts" while you scroll: main.js moves the
   page colour from --paper through --roast to --espresso and switches the text between --ink and --cream.
   Labels (.sticker) always stay paper with --ink text, like a real bag label. */

@property --c { syntax: '<length>'; inherits: true; initial-value: 0px; }

:root {
  --paper: #efe6d6;     /* page at the top, label paper */
  --kraft: #d9c7a7;     /* back of a label, lines on paper */
  --roast: #7a4a2a;     /* page in the middle */
  --espresso: #1a110c;  /* page at the bottom, footer */
  --ink: #2b1a12;       /* text on light */
  --cream: #f3ebdd;     /* text on dark */
  --accent: #b8321f;    /* ripe coffee cherry: buttons, roast dots */
  --bean: #8a9a5b;      /* green bean: small marks */

  --f-display: 'Young Serif', Georgia, serif;
  --f-text: 'Work Sans', system-ui, sans-serif;
  --f-mono: 'Courier Prime', ui-monospace, monospace;

  --radius: 4px;
  --gutter: clamp(16px, 4vw, 56px);
  --max: 1440px;
  --header: 72px;

  /* set by main.js while scrolling */
  --bg: var(--paper);
  --fg: var(--ink);
  --line: color-mix(in srgb, var(--fg) 22%, transparent);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 400 17px/1.6 var(--f-text);
  font-optical-sizing: auto;
  transition: color .45s ease;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, figure, dl, dd, ul { margin: 0; }
ul { padding: 0; list-style: none; }
::selection { background: var(--accent); color: #fff; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--ink); color: var(--cream); padding: 8px 14px; }
.skip:focus { left: 8px; }

.label { font: 700 12px/1.4 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; }
.sec-title { font: 700 clamp(30px, 4.2vw, 60px)/1.02 var(--f-display); letter-spacing: -.02em; }
.link { font: 700 13px/1.4 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
  border-bottom: 1.5px solid currentColor; padding-bottom: 3px; justify-self: start; }
.link:hover { color: var(--accent); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 26px;
  border: 1.5px solid var(--accent); border-radius: var(--radius); background: var(--accent); color: #fff;
  font: 700 14px/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
  transition: background .25s, color .25s, border-color .25s, transform .25s, scale .3s cubic-bezier(.3,.6,.2,1); }
.btn:hover, .btn:focus-visible { scale: 1.05; }   /* stays the same button, just a little bigger */
.btn-small { min-height: 40px; padding: 0 16px; font-size: 12px; }
.btn-light { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.btn-ghost { background: transparent; border-color: var(--paper); color: var(--paper); }
/* hover: the same roast as the headings sweeps across the whole button (band of bean and roast, behind the text) */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, transparent 0 26%, var(--roast) 38%, var(--bean) 50%, var(--roast) 62%, transparent 74% 100%)
    no-repeat 130% 0 / 300% 100%; }
.btn:hover::before, .btn:focus-visible::before { animation: btn-roast 1s cubic-bezier(.45,0,.35,1) both; }
@keyframes btn-roast { from { background-position: 130% 0; } to { background-position: -30% 0; } }

/* ---------- header ---------- */
.header { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--header); display: flex; align-items: center; gap: 28px;
  padding-inline: var(--gutter); background: var(--bg); color: var(--fg); border-bottom: 1px solid var(--line);
  transition: background .3s, color .3s, border-color .3s; }
.at-top .header { background: transparent; color: var(--paper); border-color: transparent; }
.logo { display: flex; flex-direction: column; text-decoration: none; line-height: 1; }
.logo-name { font: 700 22px/1 var(--f-display); letter-spacing: -.02em; }
.logo-sub { font: 400 10px/1.4 var(--f-mono); letter-spacing: .2em; text-transform: uppercase; margin-top: 3px; }
.nav-main { display: flex; gap: 24px; margin-left: auto; }
.nav-main a { font-size: 15px; text-decoration: none; padding: 6px 0; border-bottom: 1.5px solid transparent; }
.nav-main a:hover, .nav-main a[aria-current] { border-color: currentColor; }
.menu-btn { display: none; margin-left: auto; min-height: 40px; padding: 0 14px; border: 1.5px solid currentColor;
  border-radius: var(--radius); background: transparent; color: inherit; font: 700 12px/1 var(--f-mono);
  letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.menu { position: fixed; inset: var(--header) 0 0; z-index: 49; background: var(--paper); color: var(--ink);
  padding: 32px var(--gutter); display: flex; flex-direction: column; justify-content: space-between; overflow: auto; }
.menu[hidden] { display: none; }
.menu nav { display: flex; flex-direction: column; }
.menu nav a { font: 700 clamp(30px, 8vw, 48px)/1.2 var(--f-display); text-decoration: none; letter-spacing: -.02em; }
.menu nav a:last-child { color: var(--accent); }
.menu-foot { display: flex; flex-direction: column; gap: 4px; font: 400 14px/1.5 var(--f-mono); padding-top: 32px; }
.menu-open { overflow: hidden; }
.menu-open .header { background: var(--paper); color: var(--ink); border-color: var(--kraft); }

/* ---------- the label (sticker) ---------- */
.sticker { --tilt: 0deg; position: relative; display: flex; flex-direction: column; background: var(--paper); color: var(--ink);
  border-radius: var(--radius); padding: 18px 20px 16px; text-decoration: none;
  box-shadow: 0 1px 0 rgba(0,0,0,.05), 0 6px 14px -8px rgba(30,15,5,.45);
  transform: rotate(var(--tilt));
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%);
  transition: --c .5s cubic-bezier(.3,.7,.2,1); }
.sticker::before { content: ''; position: absolute; inset: 7px; border: 1.5px solid var(--ink); border-radius: 2px; pointer-events: none;
  /* the frame stops a little before the fold, so its ends never peek out from under the lifted corner */
  --cut: calc(var(--c) - 7px + min(9px, var(--c)));
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%); }
/* the lifted corner: the back of the paper folds over the label */
.sticker::after { content: ''; position: absolute; right: 0; bottom: 0; width: var(--c); height: var(--c);
  background: linear-gradient(to bottom right, var(--kraft) 0 50%, transparent 50%);
  filter: drop-shadow(-3px -3px 4px rgba(30,15,5,.25)); pointer-events: none; }
.sticker-top, .sticker-foot { display: flex; justify-content: space-between; gap: 12px; position: relative;
  font: 400 12px/1.3 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; padding: 4px 6px; }
.sticker-top { border-bottom: 1.5px solid var(--ink); padding-bottom: 10px; margin-bottom: 14px; }
.sticker-foot { border-top: 1.5px solid var(--ink); padding-top: 10px; margin-top: auto; }
.code { width: 74px; height: 14px; background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 4px,
  var(--ink) 4px 5px, transparent 5px 8px, var(--ink) 8px 11px, transparent 11px 12px); }

.sticker-coffee { min-height: 100%; padding: 22px 24px 20px; }
.sticker-country { font: 700 12px/1.3 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); padding-inline: 6px; }
.sticker-name { font: 700 clamp(26px, 2.6vw, 36px)/1.02 var(--f-display); letter-spacing: -.02em; padding: 4px 6px 14px; }
.sticker-fields { display: flex; flex-direction: column; padding-inline: 6px; font: 400 13px/1.35 var(--f-mono); }
.sticker-fields > span { display: grid; grid-template-columns: 92px 1fr; gap: 10px; padding: 5px 0; border-bottom: 1px dashed var(--kraft); }
.sticker-fields > span > span:first-child { text-transform: uppercase; letter-spacing: .06em; font-size: 11px; padding-top: 2px; }
.roast { display: grid; grid-template-columns: 92px auto 1fr; gap: 10px; align-items: center; padding: 10px 6px 0;
  font: 400 13px/1.3 var(--f-mono); }
.roast > span:first-child { text-transform: uppercase; letter-spacing: .06em; font-size: 11px; }
.dots { display: flex; gap: 4px; }
.dots i { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--ink); }
.roast[data-dots="1"] i:nth-child(-n+1), .roast[data-dots="2"] i:nth-child(-n+2), .roast[data-dots="3"] i:nth-child(-n+3),
.roast[data-dots="4"] i:nth-child(-n+4), .roast[data-dots="5"] i { background: var(--ink); }
.sticker-notes { display: block; font: 500 19px/1.3 var(--f-display); padding: 16px 6px 18px; }
.sticker-notes::before { content: 'Tastes like'; display: block; font: 400 11px/1.4 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 4px; }

a.sticker:hover { --c: 46px; }
/* shelf labels: the shadow comes from the grid, so it follows the cut corner (a box-shadow would leave lines there) */
.shelf-grid { filter: drop-shadow(0 5px 6px rgba(30,15,5,.18)); }
.shelf-grid .sticker, .motion .shelf-grid [data-stick], .motion .shelf-grid [data-stick].stuck { box-shadow: none; }

/* stick on: the label arrives lifted and tilted, then is pressed flat, corner last */
.motion [data-stick] { --c: 70px; opacity: 0; transform: translate(18px, -26px) rotate(calc(var(--tilt) - 8deg)) scale(1.06);
  box-shadow: 22px 34px 44px -10px rgba(30,15,5,.4);
  transition: opacity .25s ease, transform .75s cubic-bezier(.2,.9,.25,1.15), box-shadow .75s ease, --c .55s cubic-bezier(.3,.7,.2,1) .45s; }
.motion [data-stick].stuck { --c: 0px; opacity: 1; transform: rotate(var(--tilt));
  box-shadow: 0 1px 0 rgba(0,0,0,.05), 0 6px 14px -8px rgba(30,15,5,.45); }
.motion a[data-stick].stuck:hover { --c: 46px; transition-delay: 0s; }

/* soft rise for text and photos */
.motion .rise { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.motion .rise.in { opacity: 1; transform: none; }

/* ---------- hero ---------- */
.hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: space-between;
  color: var(--paper); background: var(--espresso); overflow: hidden; }
.hero-photo { position: absolute; inset: 0; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; }
.hero-photo::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,12,8,.55) 0%, rgba(20,12,8,.05) 30%, rgba(20,12,8,.1) 55%, rgba(20,12,8,.7) 100%); }
.hero-tags { position: relative; display: flex; flex-wrap: wrap; gap: 8px 28px; padding-top: calc(var(--header) + 18px);
  font: 400 12px/1.4 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; }
.hero-body { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; padding-bottom: 48px; }
.sticker-brand { --tilt: -2.5deg; width: min(560px, 100%); padding: 22px 26px 18px; }
.brand-name { font: 700 120px/.9 var(--f-display); letter-spacing: -.045em; padding: 0 6px; white-space: nowrap; }
.brand-sub { font: 700 14px/1.3 var(--f-mono); letter-spacing: .32em; text-transform: uppercase; padding: 8px 6px 14px; }
.brand-line { font: 400 17px/1.45 var(--f-text); padding: 0 6px 16px; max-width: 42ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- intro ---------- */
.intro { display: grid; grid-template-columns: 1fr 3fr; gap: 32px; padding-block: clamp(80px, 12vw, 170px); }
.intro-title { font: 500 clamp(26px, 3.3vw, 46px)/1.15 var(--f-display); letter-spacing: -.015em; max-width: 26ch; }
.intro-text { max-width: 54ch; margin-top: 28px; font-size: 18px; }

/* ---------- shelf ---------- */
.sec-head { display: grid; grid-template-columns: 1fr 3fr auto; align-items: end; gap: 16px 32px; margin-bottom: 48px; }
.shelf { padding-bottom: clamp(80px, 11vw, 160px); }
.shelf-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(22px, 3vw, 44px); }
.shelf-grid > :nth-child(6n+1) { --tilt: -1.6deg; }
.shelf-grid > :nth-child(6n+2) { --tilt: 1.1deg; }
.shelf-grid > :nth-child(6n+3) { --tilt: -.6deg; }
.shelf-grid > :nth-child(6n+4) { --tilt: 1.7deg; }
.shelf-grid > :nth-child(6n+5) { --tilt: -1.1deg; }
.shelf-grid > :nth-child(6n+6) { --tilt: .7deg; }
.shelf-grid > :nth-child(3n+2) { transition-delay: .08s; }
.shelf-grid > :nth-child(3n+3) { transition-delay: .16s; }

/* ---------- the pile of labels on Home (main.js 11): big labels on top of each other, as tall as the screen ---------- */
.stack-hint, .stack-dots { display: none; }
.is-stack { display: grid; grid-template-columns: minmax(0, 1fr) min(620px, 100%) minmax(0, 1fr); align-items: center; row-gap: 48px; }
.is-stack .shelf-grid { grid-column: 2; display: block; position: relative; filter: none;
  height: clamp(560px, calc(100svh - var(--header) - 110px), 860px); touch-action: pan-y; }
.is-stack .stack-item { position: absolute; inset: 0; translate: var(--x, 0) var(--y, 0); rotate: var(--r, 0deg); transition-delay: 0s;
  filter: drop-shadow(0 10px 16px rgba(30,15,5,.26)); transition: translate .45s cubic-bezier(.3,.7,.2,1), rotate .45s cubic-bezier(.3,.7,.2,1);
  touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.is-stack .stack-item:not(.is-top) { pointer-events: none; }
.is-stack .stack-item.is-held { transition: none; filter: drop-shadow(0 26px 34px rgba(30,15,5,.34)); }
.is-stack .stack-item.is-nudge { transition-duration: .5s; }
.is-stack .stack-item.is-held .sticker { --c: 46px; }
/* the cursor over the top label: a pointing hand between two arrows, so it reads as "move me", not as a link */
.is-stack .is-top .sticker { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='32' viewBox='0 0 40 32'%3E%3Cg fill='%23efe6d6' stroke='%232b1a12' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M2 16l6-5v10z'/%3E%3Cpath d='M38 16l-6-5v10z'/%3E%3Cpath d='M17 4.5a2.5 2.5 0 0 1 5 0V14h1.2a2.3 2.3 0 0 1 4.3 1.1v.4a2.3 2.3 0 0 1 4.2 1.3v6.7c0 4-3.2 7-7.2 7h-3.3c-2.4 0-4.4-1.1-5.7-3l-4.1-6a2.3 2.3 0 0 1 3.6-2.8L17 21z'/%3E%3C/g%3E%3C/svg%3E") 19 2, grab; }
.is-stack .is-held .sticker { cursor: grabbing; }
.is-stack .sticker-coffee { height: 100%; padding: clamp(24px, 3vw, 40px) clamp(22px, 3vw, 44px) clamp(22px, 2.6vw, 36px); }
.is-stack .sticker-coffee::before { inset: 10px; }
.is-stack .sticker-top, .is-stack .sticker-foot { font-size: 14px; }
.is-stack .sticker-country { font-size: 14px; }
.is-stack .sticker-name { font-size: clamp(42px, 5.4vw, 78px); padding-bottom: 20px; }
.is-stack .sticker-fields { flex: 1; justify-content: space-evenly; font-size: 16px; }
.is-stack .sticker-fields > span { grid-template-columns: 130px 1fr; padding: 8px 0; }
.is-stack .sticker-fields > span > span:first-child, .is-stack .roast > span:first-child { font-size: 12.5px; }
.is-stack .roast { grid-template-columns: 130px auto 1fr; font-size: 16px; padding-top: 14px; }
.is-stack .dots i { width: 14px; height: 14px; }
.is-stack .sticker-notes { font-size: clamp(22px, 2.2vw, 30px); padding: 20px 6px 22px; }
/* the hint under the pile, and the count of the coffee on top */
.is-stack .stack-hint { grid-column: 1 / -1; display: flex; justify-content: center; align-items: center; gap: 10px; margin: 0;
  font: 700 13px/1.3 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; text-align: center; }
.stack-count { margin-left: 14px; padding-left: 14px; border-left: 1.5px solid var(--line); }
.hint-arrow { color: var(--accent); font-size: 18px; }
.motion .hint-arrow:first-child { animation: hint-l 1.8s ease-in-out infinite; }
.motion .hint-arrow:nth-child(4) { animation: hint-r 1.8s ease-in-out infinite; }
@keyframes hint-l { 50% { transform: translateX(-5px); } }
@keyframes hint-r { 50% { transform: translateX(5px); } }
.hint-touch { display: none; }
/* the dots beside the pile (mouse screens): one per coffee, its name shows on hover */
.is-stack .stack-dots { grid-column: 3; grid-row: 1; justify-self: start; display: flex; flex-direction: column; gap: 6px; padding-left: clamp(24px, 4vw, 64px); }
.stack-dots button { position: relative; display: flex; align-items: center; gap: 12px; padding: 7px 0; border: 0; background: none;
  color: var(--fg); font: 700 12px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.stack-dots button::before { content: ''; flex: none; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid currentColor;
  transition: background .25s, transform .25s; }
.stack-dots button[aria-pressed="true"]::before { background: var(--accent); border-color: var(--accent); transform: scale(1.2); }
.stack-dots button span { opacity: 0; transform: translateX(-6px); transition: opacity .25s, transform .25s; white-space: nowrap; }
.stack-dots button:hover span, .stack-dots button:focus-visible span, .stack-dots button[aria-pressed="true"] span { opacity: 1; transform: none; }
@media (hover: none), (pointer: coarse), (max-width: 800px) {
  .is-stack .stack-dots { display: none; }
  .hint-fine { display: none; }
  .hint-touch { display: inline; }
}
@media (max-width: 800px) {
  .is-stack .sticker-fields > span { grid-template-columns: 100px minmax(0, 1fr); }
  .is-stack .roast { grid-template-columns: 100px auto 1fr; }
  .is-stack .roast > span:last-child { grid-column: auto; }
  .is-stack .sticker-fields, .is-stack .roast { font-size: 15px; }
  .is-stack { grid-template-columns: minmax(0, 1fr) 88% minmax(0, 1fr); row-gap: 40px; }
  .is-stack .stack-hint { flex-wrap: wrap; row-gap: 4px; }
}

/* ---------- journey: farm, roastery, cup ---------- */
.journey { display: flex; flex-direction: column; gap: clamp(80px, 10vw, 150px); padding-bottom: clamp(100px, 12vw, 180px); }
.step { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.step:nth-child(even) .step-photo { order: 2; }
.step-photo { overflow: hidden; border-radius: var(--radius); aspect-ratio: 4 / 5; }
.step-photo img { width: 100%; height: 100%; object-fit: cover; }
.step-text { max-width: 480px; }
.step-num { display: flex; align-items: baseline; gap: 14px; font: 700 13px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; }
.step-num span { font: 700 clamp(64px, 8vw, 120px)/.8 var(--f-display); letter-spacing: -.04em; color: var(--accent); }
.step-title { font: 700 clamp(30px, 3.6vw, 52px)/1.04 var(--f-display); letter-spacing: -.02em; margin: 26px 0 18px; }

/* ---------- cafe ---------- */
.cafe { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(32px, 6vw, 96px); align-items: start; padding-bottom: clamp(100px, 12vw, 180px); }
.cafe-photo { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 5; position: sticky; top: calc(var(--header) + 24px); }
.cafe-photo img { width: 100%; height: 100%; object-fit: cover; }
.cafe-text { display: grid; gap: 22px; }
.cafe-text > p:not(.label) { max-width: 52ch; }
.menu-board { border-top: 1.5px solid currentColor; margin-top: 12px; }
.menu-board li { display: flex; align-items: baseline; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.mb-item { font: 700 22px/1.2 var(--f-display); display: flex; flex-direction: column; }
.mb-item small { font: 400 13px/1.4 var(--f-mono); margin-top: 4px; opacity: .8; }
.mb-price { margin-left: auto; font: 700 18px/1 var(--f-mono); }

/* ---------- wholesale ---------- */
.trade { display: grid; grid-template-columns: 6fr 5fr; gap: clamp(32px, 6vw, 96px); align-items: center; padding-bottom: clamp(100px, 12vw, 180px); }
.trade-text { display: grid; gap: 22px; justify-items: start; max-width: 560px; }
.trade-photo { border-radius: var(--radius); overflow: hidden; aspect-ratio: 3 / 2; }
.trade-photo img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- journal ---------- */
.notes { padding-bottom: clamp(100px, 12vw, 180px); }
.notes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(22px, 3vw, 40px); }
.note { display: flex; flex-direction: column; gap: 12px; text-decoration: none; }
.note-photo { display: block; overflow: hidden; border-radius: var(--radius); aspect-ratio: 4 / 3; }
.note-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.note:hover .note-photo img { transform: scale(1.04); }
.note-meta { display: flex; justify-content: space-between; font: 400 12px/1.4 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; margin-top: 6px; }
.note-title { font: 700 24px/1.15 var(--f-display); letter-spacing: -.01em; }
.note:hover .note-title { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.note-text { font-size: 16px; opacity: .85; }

/* ---------- footer ---------- */
.footer { background: var(--espresso); color: var(--cream); padding-top: clamp(70px, 9vw, 130px); overflow: hidden; }
.footer-top { display: grid; grid-template-columns: 5fr 7fr; gap: 48px; }
.footer-invite { display: grid; gap: 18px; justify-items: start; }
.footer-line { font: 700 clamp(30px, 3.6vw, 52px)/1.04 var(--f-display); letter-spacing: -.02em; max-width: 14ch; }
.footer-text { max-width: 44ch; opacity: .85; }
.footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; font-size: 15px; }
.footer-cols .label { margin-bottom: 14px; opacity: .7; }
.footer-cols p + p { margin-top: 6px; }
.footer-cols a { text-decoration: none; }
.footer-cols a:hover { text-decoration: underline; }
.hours div { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font: 400 14px/1.5 var(--f-mono); }
.nav-foot { display: flex; flex-direction: column; gap: 6px; }
.footer-mark { font: 700 clamp(80px, 21vw, 340px)/.8 var(--f-display); letter-spacing: -.055em; color: var(--roast);
  margin-top: clamp(60px, 8vw, 110px); white-space: nowrap; overflow-x: clip; }
.footer-small { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-block: 22px;
  font: 400 12px/1.5 var(--f-mono); opacity: .7; border-top: 1px solid rgba(243,235,221,.18); }

.to-top { position: fixed; right: 20px; bottom: 20px; z-index: 40; width: 46px; height: 46px; display: grid; place-items: center;
  border-radius: 50%; background: var(--accent); color: #fff; opacity: 0; pointer-events: none; transform: translateY(10px);
  transition: opacity .3s, transform .3s; }
.to-top.show { opacity: 1; pointer-events: auto; transform: none; }

/* ---------- inner pages ---------- */
.page-head { display: grid; gap: 22px; justify-items: start; padding-top: calc(var(--header) + clamp(60px, 9vw, 130px)); padding-bottom: clamp(48px, 6vw, 90px); }
.page-title { font: 700 clamp(40px, 6.4vw, 96px)/.98 var(--f-display); letter-spacing: -.03em; max-width: 16ch; }
.page-intro { font-size: clamp(17px, 1.5vw, 20px); max-width: 52ch; }
.back { font: 700 12px/1.4 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; }
.back::before { content: '\2190\00a0\00a0'; }
.back:hover { color: var(--accent); }
.wide-photo { margin-bottom: clamp(80px, 10vw, 150px); }
.wide-photo img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; border-radius: var(--radius); }
.sticker[hidden] { display: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* chips: coffee filters and form choices */
.chip { min-height: 38px; padding: 0 14px; border: 1.5px solid var(--line); border-radius: var(--radius); background: transparent;
  color: inherit; font: 400 13px/1 var(--f-mono); letter-spacing: .04em; cursor: pointer; transition: border-color .2s, background .2s, color .2s; }
.chip:hover { border-color: currentColor; }
.chip[aria-pressed="true"] { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 36px; margin-bottom: 44px; }
.filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.filter-row .label { margin-right: 6px; }
.filter-count { margin-left: auto; font: 400 13px/1.4 var(--f-mono); }

/* reading the label: numbered pins on a sample label */
.guide { display: grid; grid-template-columns: 6fr 5fr; gap: clamp(40px, 7vw, 110px); align-items: center; padding-bottom: clamp(100px, 12vw, 180px); }
.guide-text { display: grid; gap: 22px; }
.guide-list { list-style: none; padding: 0; margin: 12px 0 0; border-top: 1.5px solid currentColor; }
.guide-list li { display: grid; grid-template-columns: 48px 1fr; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.guide-list strong { display: block; font: 700 20px/1.25 var(--f-display); margin-bottom: 4px; }
.guide-n, .pin { font: 700 12px/1 var(--f-mono); color: var(--accent); }
.guide-n { padding-top: 5px; }
.pin { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-left: 6px; border-radius: 50%; background: var(--accent);
  color: #fff; font-size: 10px; font-style: normal; vertical-align: 1px; }
.guide-label { --tilt: 2deg; min-height: 0; }

/* one coffee */
.coffee { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(40px, 6vw, 100px); align-items: start;
  padding-top: calc(var(--header) + clamp(40px, 5vw, 70px)); padding-bottom: clamp(90px, 11vw, 160px); }
.coffee-label { position: sticky; top: calc(var(--header) + 24px); display: grid; gap: 22px; }
.sticker-big { --tilt: -1.5deg; padding: 26px 28px 22px; }
.sticker-big .sticker-name { font-size: clamp(36px, 4.2vw, 62px); }
.sticker-big .sticker-fields { font-size: 14px; }
.coffee-buy { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-top: 8px; }
.coffee-buy p { display: flex; align-items: baseline; gap: 12px; }
.coffee-price { font: 700 34px/1 var(--f-display); }
.coffee-story { display: grid; gap: 26px; }
.coffee-photo { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; margin-bottom: 10px; }
.coffee-photo img { width: 100%; height: 100%; object-fit: cover; }
.prose { display: grid; gap: 20px; max-width: 62ch; font-size: 18px; }
.prose h2 { font: 700 clamp(24px, 2.4vw, 32px)/1.15 var(--f-display); letter-spacing: -.01em; margin-top: 18px; }
.recipe { margin-top: 18px; border: 1.5px solid currentColor; border-radius: var(--radius); padding: 22px 24px; }
.recipe-title { font: 700 22px/1.2 var(--f-display); margin-bottom: 16px; }
.recipe-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.recipe-grid dt { font: 400 11px/1.4 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; opacity: .8; }
.recipe-grid dd { font: 700 18px/1.3 var(--f-mono); margin-top: 4px; }
.more { padding-bottom: clamp(100px, 12vw, 180px); }

/* numbered principles (sourcing, wholesale) */
.principles, .who { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px); padding-bottom: clamp(100px, 12vw, 170px); }
.who { padding-top: 10px; }
.principle { display: grid; gap: 16px; align-content: start; border-top: 1.5px solid currentColor; padding-top: 22px; }
.principle-title { font: 700 clamp(24px, 2.4vw, 32px)/1.1 var(--f-display); letter-spacing: -.01em; }

/* harvest calendar */
.calendar { padding-bottom: clamp(100px, 12vw, 170px); }
.cal-scroll { overflow-x: auto; }
.cal { width: 100%; min-width: 720px; border-collapse: collapse; font: 400 13px/1.3 var(--f-mono); }
.cal th, .cal td { padding: 12px 4px; border-bottom: 1px solid var(--line); text-align: center; }
.cal thead th { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 400; }
.cal tbody th { text-align: left; font: 700 18px/1.2 var(--f-display); padding-right: 16px; white-space: nowrap; }
.cal td { position: relative; height: 52px; }
.cal td.on::before { content: ''; position: absolute; inset: 14px 0; background: var(--accent); }
.cal td.on + td.on::before { left: -1px; }
.cal-note { margin-top: 18px; font: 400 14px/1.5 var(--f-mono); max-width: 60ch; }

/* producers */
.producers { padding-bottom: clamp(100px, 12vw, 170px); }
.prod-list { border-top: 1.5px solid currentColor; }
.prod-list a { display: grid; grid-template-columns: 3fr 3fr 1fr 2fr; gap: 16px; align-items: baseline; padding: 20px 0;
  border-bottom: 1px solid var(--line); text-decoration: none; transition: padding .3s; }
.prod-list a:hover { padding-left: 12px; color: var(--accent); }
.prod-name { font: 700 clamp(20px, 2vw, 28px)/1.2 var(--f-display); }
.prod-place, .prod-since, .prod-coffee { font: 400 14px/1.4 var(--f-mono); }
.prod-coffee { text-align: right; }
.prod-coffee::after { content: '\00a0\2192'; }

/* cafe */
.board { padding-bottom: clamp(90px, 11vw, 160px); }
.board-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px clamp(32px, 5vw, 80px); }
.board-group .label { margin-bottom: 10px; }
.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 22px); padding-bottom: clamp(100px, 12vw, 170px); }
.gallery-item { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 5; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; }
.visit { display: grid; grid-template-columns: 6fr 5fr; gap: clamp(32px, 6vw, 96px); align-items: center; padding-bottom: clamp(100px, 12vw, 180px); }
.visit-photo { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 5; }
.visit-photo img { width: 100%; height: 100%; object-fit: cover; }
.visit-card { --tilt: 1.5deg; padding: 22px 24px 18px; }
.visit-title { font: 700 clamp(34px, 3.6vw, 52px)/1 var(--f-display); letter-spacing: -.02em; padding: 6px 6px 18px; }
.visit-list { padding: 0 6px 18px; font: 400 14px/1.4 var(--f-mono); }
.visit-list div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 7px 0; border-bottom: 1px dashed var(--kraft); }
.visit-list dt { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; padding-top: 2px; }
.visit-list a { text-decoration: none; }
.visit-list a:hover { text-decoration: underline; }

/* roastery */
.log { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(40px, 6vw, 100px); align-items: center; padding-bottom: clamp(100px, 12vw, 170px); }
.log-text { display: grid; gap: 22px; max-width: 480px; }
.log-card { --tilt: -1deg; padding: 22px 24px 18px; }
.log-table { width: 100%; border-collapse: collapse; margin: 0 0 18px; font: 400 14px/1.3 var(--f-mono); }
.log-table th { font-size: 11px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; text-align: left; padding: 6px; }
.log-table td { padding: 10px 6px; border-top: 1px dashed var(--kraft); }
.log-table td:first-child { color: var(--accent); font-weight: 700; }
.team { padding-bottom: clamp(100px, 12vw, 170px); }
.team-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px); }
.person { display: grid; gap: 12px; align-content: start; border-top: 1.5px solid currentColor; padding-top: 22px; }
.person-name { font: 700 clamp(26px, 2.6vw, 36px)/1.05 var(--f-display); letter-spacing: -.02em; }
.cta { display: grid; gap: 20px; justify-items: center; text-align: center; padding-bottom: clamp(110px, 13vw, 190px); }
.cta-title { font: 700 clamp(32px, 4.6vw, 68px)/1.02 var(--f-display); letter-spacing: -.02em; max-width: 18ch; }
.cta p { max-width: 46ch; }

/* wholesale */
.ticks { display: grid; border-top: 1.5px solid currentColor; }
.ticks li { display: flex; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.ticks li::before { content: ''; flex: none; width: 10px; height: 10px; margin-top: 8px; border-radius: 50%; background: var(--accent); }
.how { padding-bottom: clamp(100px, 12vw, 170px); }
.how-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 3vw, 44px); }
.how-grid li { display: grid; gap: 12px; align-content: start; }
.how-n { font: 700 clamp(48px, 5vw, 76px)/.8 var(--f-display); color: var(--accent); }
.how-title { font: 700 22px/1.2 var(--f-display); }

/* forms */
.form-sec { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(40px, 6vw, 100px); align-items: start; padding-bottom: clamp(100px, 12vw, 170px); }
#enquiry { grid-template-columns: 5fr 7fr; }
.form-intro { display: grid; gap: 20px; max-width: 440px; }
.form { display: flex; flex-direction: column; gap: 30px; border-top: 1.5px solid currentColor; padding-top: 26px; }
.field-group { border: 0; margin: 0; padding: 0; min-width: 0; }
.field-group legend { padding: 0; margin-bottom: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field-wide { grid-column: 1 / -1; }
.field span { font: 400 11px/1.4 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; }
.field input, .field textarea { width: 100%; padding: 10px 0; border: 0; border-bottom: 1.5px solid var(--line); border-radius: 0;
  background: transparent; color: inherit; font: 400 17px/1.4 var(--f-text); resize: vertical; }
.field input:focus, .field textarea:focus { outline: 0; border-bottom-color: currentColor; }
.field input::placeholder, .field textarea::placeholder { color: inherit; opacity: .45; }
.bad input, .bad textarea { border-bottom-color: var(--accent); }
.bad legend, .field.bad span { color: var(--accent); }
.bad .chip { border-color: var(--accent); }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.form-note { font: 400 14px/1.4 var(--f-mono); }
.form-sec .visit-card { position: sticky; top: calc(var(--header) + 24px); }

/* journal */
.notes-all { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.post .page-head { padding-bottom: clamp(40px, 5vw, 70px); }
.post .note-meta { gap: 24px; margin: 0; }
.post-body { padding-bottom: clamp(70px, 9vw, 120px); }
.post-body .prose { margin-inline: auto; max-width: 680px; }
.post-sign { max-width: 680px; margin: 40px auto 0; padding-top: 16px; border-top: 1px solid var(--line); font: 400 13px/1.4 var(--f-mono); }
.next { padding-bottom: clamp(100px, 12vw, 170px); }
.next-link { display: grid; gap: 12px; padding: 30px 0; border-top: 1.5px solid currentColor; border-bottom: 1px solid var(--line); text-decoration: none; }
.next-title { font: 700 clamp(30px, 4.4vw, 64px)/1.02 var(--f-display); letter-spacing: -.02em; }
.next-link:hover .next-title { color: var(--accent); }

/* 404 */
.lost { min-height: 100svh; display: grid; place-content: center; justify-items: center; gap: 36px; padding-top: calc(var(--header) + 40px); padding-bottom: 80px; }
.lost-label { --tilt: -3deg; width: min(440px, 100%); }
.lost-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 24px; }

/* ---------- motion: everything roasts ----------
   headings: each letter arrives green-bean pale and slightly big, roasts through brown to the text colour and shrinks,
   like a bean in the drum (main.js splits the letters). Photos rise and unfold from their corners.
   Data fills in order: roast dots, harvest bars, menu and log rows. Hero photo settles on load. */
.split .w { display: inline-block; white-space: nowrap; }
.split .ch { display: inline-block; }
.motion .split:not(.roasted) .ch { color: var(--bean); opacity: 0; }
.motion .roasted .ch { animation: roast-ch .95s cubic-bezier(.3,.6,.2,1) both; animation-delay: calc(min(var(--i), 32) * 30ms); }
.motion .roasted .ch.done { animation: none; }   /* afterwards the letter follows the page colour again */
@keyframes roast-ch {
  0% { color: var(--bean); opacity: 0; transform: translateY(.12em) scale(1.14); }
  20% { color: var(--bean); opacity: 1; }
  55% { color: var(--roast); }
}

/* photos come up from below as a small tilted shape, and its four corners spread out to the full frame
   (the clip is on the img, so the figure keeps its rounded corners) */
.motion .unfold.rise { opacity: 1; }
.motion .unfold { transform: translateY(90px); transition: transform 1.2s cubic-bezier(.2,.75,.2,1); }
.motion .unfold img { clip-path: polygon(22% 30%, 80% 22%, 74% 74%, 28% 80%); transform: scale(1.22);
  transition: clip-path 1.2s cubic-bezier(.65,0,.2,1) .1s, transform 1.6s cubic-bezier(.2,.7,.2,1) .1s; }
.motion .unfold.in { transform: none; }
.motion .unfold.in img { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); transform: none; }
.motion .gallery-item:nth-child(3n+2), .motion .notes-grid .note:nth-child(3n+2) .unfold { transition-delay: .1s; }
.motion .gallery-item:nth-child(3n+2) img, .motion .notes-grid .note:nth-child(3n+2) .unfold img { transition-delay: .2s; }
.motion .gallery-item:nth-child(3n+3), .motion .notes-grid .note:nth-child(3n+3) .unfold { transition-delay: .2s; }
.motion .gallery-item:nth-child(3n+3) img, .motion .notes-grid .note:nth-child(3n+3) .unfold img { transition-delay: .3s; }
.motion .note:hover .note-photo img { transform: scale(1.04); }

/* roast dots fill one by one once the label is stuck */
.motion [data-stick]:not(.stuck) .dots i { background: transparent; }
.motion .dots i { transition: background .2s ease; }
.motion .dots i:nth-child(1) { transition-delay: .7s; }
.motion .dots i:nth-child(2) { transition-delay: .85s; }
.motion .dots i:nth-child(3) { transition-delay: 1s; }
.motion .dots i:nth-child(4) { transition-delay: 1.15s; }
.motion .dots i:nth-child(5) { transition-delay: 1.3s; }

/* harvest bars grow month by month */
.motion .cal td.on::before { transform: scaleX(0); transform-origin: left; transition: transform .3s ease-out calc(var(--m) * 55ms + .2s); }
.motion .cal-scroll.in td.on::before { transform: none; }

/* rows written one after another: menu boards, roast log, visit details */
.motion [data-rows] > * { opacity: 0; clip-path: inset(0 100% 0 0); transition: opacity .3s ease, clip-path .7s cubic-bezier(.3,.7,.2,1);
  transition-delay: calc(var(--r, 0) * 90ms + .25s); }
.motion tbody[data-rows] > * { clip-path: none; }
.motion :is(.in, .stuck) [data-rows] > *, .motion [data-rows].in > * { opacity: 1; clip-path: inset(0 0 0 0); }

/* hero photo settles back on load */
.hero-photo { transform: translate3d(0, var(--hy, 0px), 0); }   /* main.js: the photo scrolls slower than the page */

/* hero, in order: the drum door opens (a circle from the middle) while the photo turns and settles, the tags drop in,
   the label flies in and sticks, its line roasts word by word, then the buttons */
.motion .hero-photo { animation: drum-open 1.5s cubic-bezier(.7,0,.25,1) .15s both; }
.motion .hero-photo img { animation: drum-turn 2.6s cubic-bezier(.2,.7,.2,1) .15s both; }
@keyframes drum-open { from { clip-path: circle(0% at 50% 52%); } to { clip-path: circle(75% at 50% 52%); } }
@keyframes drum-turn { from { transform: scale(1.35) rotate(-14deg); } }
.motion .hero-tags span { animation: tag-drop .6s cubic-bezier(.2,.8,.2,1) both; }
.motion .hero-tags span:nth-child(1) { animation-delay: 1.05s; }
.motion .hero-tags span:nth-child(2) { animation-delay: 1.17s; }
.motion .hero-tags span:nth-child(3) { animation-delay: 1.29s; }
@keyframes tag-drop { from { opacity: 0; transform: translateY(-14px); } }
.motion .hero .sticker-brand { transition-delay: 1.2s, 1.2s, 1.2s, 1.65s; }
.motion .hero .words .wd { animation-delay: calc(min(var(--i), 60) * 40ms + 2s); }
.motion .hero-actions .btn { animation: tag-drop .7s cubic-bezier(.2,.8,.2,1) both; animation-name: btn-rise; }
.motion .hero-actions .btn:nth-child(1) { animation-delay: 2.1s; }
.motion .hero-actions .btn:nth-child(2) { animation-delay: 2.22s; }
@keyframes btn-rise { from { opacity: 0; transform: translateY(18px); } }

/* paragraphs roast word by word, like the headings do letter by letter */
.motion .words.rise { opacity: 1; transform: none; }
.motion .words:not(.roasted) .wd { opacity: 0; }
.motion .roasted .wd { animation: roast-wd .8s ease both; animation-delay: calc(min(var(--i), 60) * 16ms); }
.motion .roasted .wd.done { animation: none; }
@keyframes roast-wd {
  0% { color: var(--bean); opacity: 0; }
  25% { color: var(--bean); opacity: 1; }
  65% { color: var(--roast); }
}

/* ---------- smaller screens ---------- */
@media (max-width: 1100px) {
  .nav-main, .header-cta { display: none; }
  .menu-btn { display: inline-flex; align-items: center; }
  .shelf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-top { grid-template-columns: 1fr; }
  .how-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .recipe-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
  body { font-size: 16px; }
  .intro, .sec-head { grid-template-columns: 1fr; }
  .hero-body { flex-direction: column; align-items: stretch; padding-bottom: 28px; }
  .sticker-brand { --tilt: -1.5deg; width: 100%; padding: 16px 18px 14px; }
  .hero-tags span:last-child { display: none; }
  .brand-sub { font-size: 12px; letter-spacing: .26em; padding-bottom: 10px; }
  .brand-line { font-size: 15px; padding-bottom: 12px; }
  .hero-actions .btn { flex: 1 1 140px; padding: 0 12px; white-space: nowrap; }
  .shelf-grid, .notes-grid { grid-template-columns: minmax(0, 1fr); }
  .step, .cafe, .trade { grid-template-columns: 1fr; }
  .step:nth-child(even) .step-photo { order: 0; }
  .step-photo { aspect-ratio: 4 / 3; }
  .cafe-photo { position: static; aspect-ratio: 4 / 3; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
  .guide, .coffee, .log, .visit, .form-sec, #enquiry { grid-template-columns: minmax(0, 1fr); }
  .coffee-label, .form-sec .visit-card { position: static; }
  .principles, .who, .team-grid, .board-grid, .notes-all { grid-template-columns: minmax(0, 1fr); }
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wide-photo img { aspect-ratio: 4 / 3; }
  .prod-list a { grid-template-columns: minmax(0, 1fr) auto; }
  .prod-since { display: none; }
  .prod-place { grid-row: 2; }
  .prod-coffee { grid-row: 1 / 3; grid-column: 2; align-self: center; }
  .filter-count { margin-left: 0; width: 100%; }
  .visit-photo { aspect-ratio: 4 / 3; }
}
@media (max-width: 480px) {
  .footer-cols { grid-template-columns: 1fr; }
  .sticker-coffee { padding: 18px 16px 16px; }
  .sticker-fields > span, .roast { grid-template-columns: 78px minmax(0, 1fr); }
  .roast > span:last-child { grid-column: 2; }
  .fields, .how-grid { grid-template-columns: minmax(0, 1fr); }
  .recipe-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .visit-list div { grid-template-columns: 86px minmax(0, 1fr); }
  .log-table { font-size: 12px; }
  .log-table th:nth-child(3), .log-table td:nth-child(3) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; }
}

.copied-tip { position: absolute; margin: -28px 0 0 8px; padding: 3px 8px; border-radius: var(--radius); background: var(--accent);
  color: #fff; font: 700 11px/1.4 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; pointer-events: none; }