/* YJP Marketplace.

   The bones are apple.com's: system font stack, generous whitespace, pill
   buttons, lifted cards. The colour on top is ours, a warm satvik palette of
   saffron, marigold, leaf green and lotus, used on rules, borders and
   accents rather than as flat fills, so the page reads bright without
   shouting. Nothing is downloaded: no webfonts, no icon set, every glyph
   here is inline SVG in the templates. */
:root {
  --ink: #1d1d1f;        /* primary text */
  --ink-70: #454549;     /* secondary text */
  --ink-45: #6e6e73;     /* meta text, placeholders */
  --ink-20: #dcd5c9;     /* hairlines, borders, warmed to suit the paper */
  --ink-08: #e8e1d5;     /* neutral section tint, a step darker than the paper */
  --paper: #f2eee6;      /* page background. Warm sand, not near white: the
                            cards are white, and they need something to sit on */
  --raised: #ffffff;     /* card background */

  /* the satvik palette */
  --saffron: #c2571b;    /* primary accent: links, filled buttons */
  --saffron-deep: #9d430f;
  --saffron-lit: #e8863c; /* the brighter end, for gradients and art */
  --saffron-tint: #fdf1e6;
  --gold: #c9861a;
  --gold-tint: #fdf4e2;
  --teal: #0e7c66;
  --teal-tint: #e7f4f0;
  --lotus: #c8386a;
  --lotus-tint: #fdeef3;
  --indigo: #4a45a8;
  --indigo-tint: #eeeefa;

  --accent: var(--saffron);
  --accent-dark: var(--saffron-deep);
  --spectrum: linear-gradient(90deg, var(--saffron) 0%, var(--gold) 32%, var(--teal) 66%, var(--indigo) 100%);

  --shadow: 0 1px 2px rgba(60,30,10,0.05), 0 6px 22px rgba(60,30,10,0.08);
  --shadow-lift: 0 2px 6px rgba(60,30,10,0.08), 0 18px 40px rgba(60,30,10,0.14);
  --radius: 12px;
  --radius-card: 18px;
  --radius-band: 28px;
  --pill: 980px;
  --pad: clamp(1rem, 4vw, 2.5rem);
  --rule: 1px solid var(--ink-20);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
          "Helvetica Neue", Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.47059;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 var(--pad); }
.serif { font-weight: 600; letter-spacing: -0.022em; line-height: 1.07; }
.saying { font-size: 19px; font-weight: 400; color: var(--ink-70); letter-spacing: -0.011em; margin: 0 0 1rem; }
.eyebrow { font-size: 12px; font-weight: 590; letter-spacing: 0.01em; color: var(--ink-45); }

/* header, blurred and sticky, with the palette drawn across the very top */
header.site {
  border-bottom: 1px solid rgba(90,60,25,0.12);
  background: rgba(255,255,255,0.9);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  position: sticky; top: 0; z-index: 20;
}
header.site::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--spectrum);
}
header.site .bar { display: flex; align-items: center; gap: 1rem; padding: 0.7rem 0 0.65rem; min-height: 44px; }
.wordmark {
  font-weight: 600; font-size: 19px; letter-spacing: -0.014em; color: var(--ink);
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 0.55rem;
}
.mark {
  width: 28px; height: 28px; border-radius: 8px; display: block; flex: 0 0 auto;
  box-shadow: 0 1px 2px rgba(76,29,149,0.28);
}
.wordmark:hover { text-decoration: none; }
.wordmark:hover .wordmark-text span { color: var(--saffron-deep); }
.wordmark-text span { color: var(--saffron); font-weight: 400; }
nav.site {
  margin-left: auto; display: flex; gap: 1.4rem; align-items: center;
  font-size: 12px; color: var(--ink-70);
  min-width: 0; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
nav.site::-webkit-scrollbar { display: none; }
nav.site a {
  white-space: nowrap; color: var(--ink-70);
  padding-bottom: 2px; border-bottom: 2px solid transparent;
}
nav.site a:hover { color: var(--saffron); border-bottom-color: var(--saffron); text-decoration: none; }
nav.site a.active { color: var(--saffron); font-weight: 590; border-bottom-color: var(--saffron); }

/* announcement strip */
.strip {
  background: var(--saffron-tint); color: var(--saffron-deep);
  font-size: 12px; text-align: center; padding: 0.5rem 0;
  border-bottom: 1px solid rgba(194,87,27,0.14);
}
.strip a { margin-left: 0.4rem; font-weight: 590; }

/* ---- the home page band: hero copy beside the aparigraha drawing ---- */
.band {
  position: relative; overflow: hidden;
  margin: 1.75rem 0 3rem;
  padding: clamp(1.5rem, 4vw, 3rem) clamp(1.1rem, 3.5vw, 2.75rem) clamp(1.3rem, 3vw, 2rem);
  border: 1px solid #f0dfcb;
  border-radius: var(--radius-band);
  background:
    radial-gradient(120% 90% at 88% 12%, rgba(14,124,102,0.12) 0%, rgba(14,124,102,0) 55%),
    radial-gradient(90% 80% at 6% 90%, rgba(200,56,106,0.09) 0%, rgba(200,56,106,0) 55%),
    linear-gradient(155deg, #ffffff 0%, #fdf0df 48%, #eef6f2 100%);
  box-shadow: var(--shadow);
}
.band::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: var(--spectrum);
}
.band-inner {
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(1rem, 3vw, 2.5rem); align-items: center;
}

.hero { text-align: left; padding: 0; }
.hero h1 {
  font-weight: 600; letter-spacing: -0.024em;
  font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1.05;
  margin: 0.4rem 0 0.7rem; max-width: 15ch; text-wrap: balance;
}
.hero .saying {
  display: inline-block;
  font-size: clamp(1rem, 2vw, 1.2rem); font-weight: 600; color: var(--saffron-deep);
  letter-spacing: -0.014em; margin: 0 0 0.9rem;
  padding-bottom: 0.3rem;
  border-bottom: 2px solid rgba(194,87,27,0.28);
}
.hero p.lede {
  color: var(--ink-70); max-width: 42ch; margin: 0 0 1.5rem;
  font-size: clamp(14px, 1.7vw, 17px); line-height: 1.5;
}
.hero-cta { display: flex; gap: 1.1rem; align-items: center; flex-wrap: wrap; margin: 0; }

.band-art { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 0.6rem; }
.band-art .apari { width: 100%; max-width: 400px; height: auto; display: block; }
.band-art figcaption {
  font-size: 12px; font-weight: 590; letter-spacing: 0.01em; color: var(--teal);
  text-align: center;
}

/* the four claims under the band, each in its own colour */
.chips {
  list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem;
  margin: clamp(1.2rem, 3vw, 1.9rem) 0 0; padding: 1.2rem 0 0;
  border-top: 1px dashed rgba(157,67,15,0.22);
}
.chips li {
  font-size: 12px; font-weight: 590; letter-spacing: 0.01em;
  padding: 0.32rem 0.8rem; border-radius: var(--pill);
  border: 1px solid currentColor; background: rgba(255,255,255,0.65);
}
.tone-saffron { color: var(--saffron); }
.tone-gold    { color: var(--gold); }
.tone-teal    { color: var(--teal); }
.tone-lotus   { color: var(--lotus); }
.tone-indigo  { color: var(--indigo); }

/* ---- shared section furniture ---- */
.section { padding: clamp(1.75rem, 4vw, 2.75rem) 0; }
.section + .section { border-top: 1px solid var(--ink-20); }
.section-eyebrow { color: var(--saffron); margin: 0 0 0.35rem; text-transform: uppercase; letter-spacing: 0.06em; }
.section-title {
  font-weight: 600; letter-spacing: -0.02em; line-height: 1.1;
  font-size: clamp(1.35rem, 3vw, 1.95rem); margin: 0 0 1.4rem;
}
.page-head { padding: clamp(1.6rem, 4vw, 2.4rem) 0 0.4rem; }
.page-head h1 {
  font-weight: 600; letter-spacing: -0.022em; line-height: 1.08;
  font-size: clamp(1.7rem, 4vw, 2.6rem); margin: 0.2rem 0 0.5rem;
}
.page-head .lede { color: var(--ink-45); font-size: 14px; margin: 0; }

.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.section-head .section-title { margin-bottom: 1rem; }
.section-note { font-size: 13px; color: var(--ink-45); margin: 0; text-align: center; }

/* a ruled divider with a caption set into it */
.thread {
  display: flex; align-items: center; gap: 0.9rem;
  margin: 1.8rem 0 0.9rem; font-size: 11px; font-weight: 590;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-45);
}
.thread::before, .thread::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--ink-20) 35%, var(--ink-20) 65%, transparent);
}
.thread span { flex: 0 0 auto; }

/* ---- the three aparigraha cards ---- */
.principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(0.8rem, 2vw, 1.25rem); }
.principle {
  position: relative; overflow: hidden;
  background: var(--raised); border: 1px solid var(--ink-20);
  border-radius: var(--radius-card); padding: 1.4rem 1.3rem 1.5rem;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.principle::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: currentColor;
}
.principle:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: currentColor; }
.principle-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 15px;
  background: #fff;
  background: color-mix(in srgb, currentColor 13%, #fff);
  border: 1px solid currentColor; box-shadow: 0 1px 2px rgba(60,30,10,0.06);
  margin-bottom: 0.9rem;
}
.principle-icon svg { width: 24px; height: 24px; display: block; }
.principle h3 { font-size: 17px; font-weight: 600; letter-spacing: -0.014em; margin: 0 0 0.3rem; color: var(--ink); }
.principle p { font-size: 14px; color: var(--ink-70); margin: 0; line-height: 1.45; }
.principle.tone-saffron { color: var(--saffron); background: linear-gradient(180deg, var(--saffron-tint), #fff 62%); }
.principle.tone-teal    { color: var(--teal);    background: linear-gradient(180deg, var(--teal-tint), #fff 62%); }
.principle.tone-lotus   { color: var(--lotus);   background: linear-gradient(180deg, var(--lotus-tint), #fff 62%); }
.principle.tone-indigo  { color: var(--indigo);  background: linear-gradient(180deg, var(--indigo-tint), #fff 62%); }

/* ---- how it works ---- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.5vw, 2rem); }
.steps li { position: relative; padding-left: 1.4rem; border-left: 2px solid var(--ink-20); }
.steps li:nth-child(1) { border-left-color: var(--saffron); }
.steps li:nth-child(2) { border-left-color: var(--gold); }
.steps li:nth-child(3) { border-left-color: var(--teal); }
.step-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  font-size: 13px; font-weight: 600; color: #fff; background: var(--ink);
  margin-bottom: 0.65rem;
}
.steps li:nth-child(1) .step-n { background: var(--saffron); }
.steps li:nth-child(2) .step-n { background: var(--gold); }
.steps li:nth-child(3) .step-n { background: var(--teal); }
.steps h3 { font-size: 16px; font-weight: 600; letter-spacing: -0.014em; margin: 0 0 0.3rem; }
.steps p { font-size: 14px; color: var(--ink-70); margin: 0; line-height: 1.45; }

/* buttons: filled pill and chevron text link */
.btn {
  display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.62rem 1.4rem;
  border: none; border-radius: var(--pill);
  background: linear-gradient(180deg, var(--saffron-lit), var(--saffron));
  color: #fff; font-size: 17px; font-weight: 500; letter-spacing: -0.01em; cursor: pointer;
  box-shadow: 0 1px 2px rgba(157,67,15,0.2), 0 6px 16px rgba(157,67,15,0.18);
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.btn:hover {
  background: linear-gradient(180deg, var(--saffron), var(--saffron-deep));
  box-shadow: 0 2px 4px rgba(157,67,15,0.24), 0 10px 22px rgba(157,67,15,0.24);
  transform: translateY(-1px); text-decoration: none;
}
.btn.ghost {
  background: none; color: var(--accent); padding: 0.62rem 0.2rem;
  border: none; box-shadow: none; font-weight: 400;
}
.btn.ghost::after { content: "\2039"; display: inline-block; transform: rotate(180deg) translateY(-1px); margin-left: 1px; }
.btn.ghost:hover { background: none; box-shadow: none; transform: none; text-decoration: underline; }
.btn.small { padding: 0.35rem 0.9rem; font-size: 13px; }
.btn.ghost.small {
  color: var(--ink-70); border: 1px solid var(--ink-20); border-radius: var(--pill);
  padding: 0.3rem 0.75rem; box-shadow: none;
}
.btn.ghost.small::after { content: none; }
.btn.ghost.small:hover { border-color: var(--saffron); color: var(--saffron); text-decoration: none; background: var(--saffron-tint); }

/* grid of listings */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.25rem; margin: 0.5rem 0 1rem; }
.card {
  position: relative; overflow: hidden;
  background: var(--raised); border: 1px solid var(--ink-20);
  border-radius: var(--radius-card); box-shadow: var(--shadow);
  padding: 1rem; display: flex; flex-direction: column; gap: 0.7rem;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.card::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--spectrum); opacity: 0; transition: opacity 0.18s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: rgba(194,87,27,0.35); }
.card:hover::before { opacity: 1; }
.card .frames { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; height: 150px; }
.frame { border-radius: 10px; overflow: hidden; background: var(--saffron-tint); }
.frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.frame.blank {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.4rem; color: var(--saffron); background: var(--saffron-tint);
  border: 1px dashed rgba(194,87,27,0.3);
}
.frame.blank svg { width: 26px; height: 26px; opacity: 0.65; }
.frame.blank span { font-size: 11px; font-weight: 590; letter-spacing: 0.01em; opacity: 0.75; }
.card-cat { color: var(--teal); font-weight: 590; }
.card h3 { font-size: 15px; margin: 0; font-weight: 590; letter-spacing: -0.01em; }
.card .row { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; }
.price { font-weight: 600; font-size: 19px; letter-spacing: -0.014em; color: var(--saffron-deep); }
.tag { font-size: 11px; font-weight: 590; color: var(--teal); background: var(--teal-tint); padding: 0.2rem 0.55rem; border-radius: var(--pill); }
.sold { position: relative; }
.sold::after { content: "Sold"; position: absolute; top: 1.1rem; right: 1.1rem; background: var(--ink); color: #fff; font-size: 11px; font-weight: 590; padding: 0.22rem 0.6rem; border-radius: var(--pill); z-index: 1; }

/* filters */
.filters { display: flex; flex-wrap: wrap; gap: 0.6rem; padding: 1.3rem 0; border-bottom: 2px solid var(--saffron-tint); }
.filters input[type=search], .filters select {
  border: 1px solid var(--ink-20); background: var(--raised); border-radius: var(--pill);
  padding: 0.55rem 0.9rem; font: inherit; font-size: 14px; color: var(--ink);
}
.filters input[type=search]:focus, .filters select:focus { border-color: var(--saffron); }
.chip {
  display: inline-block; font-size: 12px; font-weight: 500; padding: 0.35rem 0.75rem;
  border: 1px solid var(--ink-20); border-radius: var(--pill); color: var(--ink-70);
  background: var(--raised); transition: border-color 0.15s ease, color 0.15s ease;
}
a.chip:hover { border-color: var(--saffron); color: var(--saffron); text-decoration: none; }
.chip.on { background: var(--saffron); color: #fff; border-color: var(--saffron); }
a.chip.on:hover { color: #fff; background: var(--saffron-deep); border-color: var(--saffron-deep); }
.cats { display: flex; flex-wrap: wrap; gap: 0.45rem; padding: 1rem 0 1.4rem; }

@media (max-width: 640px) {
  .cats {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    margin: 0 calc(var(--pad) * -1); padding: 1rem var(--pad) 1.4rem;
  }
  .cats::-webkit-scrollbar { display: none; }
  .cats .chip { flex: 0 0 auto; white-space: nowrap; }
}

/* detail, product page shape */
.detail { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 2.5rem; padding: 2.5rem 0; }
.gallery { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; }
.gallery .frame:first-child { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
.gallery .frame { aspect-ratio: 1 / 1; border-radius: var(--radius-card); }
.detail h1 { font-weight: 600; letter-spacing: -0.022em; font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.08; margin: 0.5rem 0; }
.spec { display: flex; justify-content: space-between; padding: 0.7rem 0; border-bottom: 1px solid var(--ink-20); font-size: 14px; }
.spec dt { color: var(--ink-45); }

/* forms */
form.stack { max-width: 620px; }
form.stack label { display: block; font-size: 12px; font-weight: 590; color: var(--ink-45); margin-bottom: 0.4rem; }
form.stack input[type=text], form.stack input[type=email], form.stack input[type=password],
form.stack input[type=number], form.stack input[type=file], form.stack select, form.stack textarea {
  width: 100%; padding: 0.7rem 0.9rem; border: 1px solid var(--ink-20); border-radius: var(--radius);
  background: var(--raised); font: inherit; font-size: 15px; margin-bottom: 1.1rem;
}
form.stack input:focus, form.stack select:focus, form.stack textarea:focus { border-color: var(--accent); }
form.stack .check { display: flex; gap: 0.6rem; align-items: flex-start; margin-bottom: 1.2rem; }
form.stack .check label { font-weight: 400; font-size: 13px; color: var(--ink-70); margin: 0; }
.helptext, .errorlist { font-size: 12px; }
.helptext { color: var(--ink-45); margin: -0.8rem 0 1rem; }
.errorlist { color: var(--ink); list-style: none; padding: 0.6rem 0.9rem; margin: 0 0 0.8rem; border-radius: var(--radius); background: var(--lotus-tint); border-left: 3px solid var(--lotus); }
.slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; margin-bottom: 1.4rem; }
.slot { border: 1px dashed var(--ink-20); border-radius: var(--radius); padding: 0.75rem; }
.slot .eyebrow { display: block; margin-bottom: 0.5rem; }
.slot input[type=file] { font-size: 11px; margin-bottom: 0; border: none; padding: 0; }

/* notices, empty states, panels */
.notice {
  border-radius: var(--radius); background: var(--ink-08);
  border-left: 3px solid var(--ink-20);
  padding: 0.85rem 1.1rem; margin: 1rem 0; font-size: 13px;
}
.notice.accent { background: var(--gold-tint); border-left-color: var(--gold); color: var(--ink-70); }

.empty {
  border-radius: var(--radius-card); background: var(--saffron-tint);
  border: 1px dashed rgba(194,87,27,0.3);
  padding: clamp(2rem, 5vw, 3rem) 1.25rem; text-align: center; color: var(--ink-70);
  margin: 0.5rem 0 1rem;
}
.empty-art { width: 52px; height: 52px; color: var(--saffron); opacity: 0.65; margin-bottom: 0.9rem; }
.empty-title { font-size: 17px; font-weight: 600; letter-spacing: -0.014em; color: var(--ink); margin: 0 0 0.4rem; }
.empty p { margin: 0 auto 0.9rem; max-width: 42ch; font-size: 14px; }
.empty p:last-child { margin-bottom: 0; }

.panel {
  background: linear-gradient(160deg, var(--saffron-tint), var(--teal-tint));
  border: 1px solid rgba(194,87,27,0.14);
  border-radius: var(--radius-card);
  padding: clamp(1.4rem, 3.5vw, 2.4rem); margin: 2rem 0;
}
.panel h2 { font-weight: 600; letter-spacing: -0.018em; font-size: clamp(1.5rem, 3.5vw, 2.1rem); line-height: 1.12; margin: 0.3rem 0 0.8rem; }
.panel p:last-child { margin-bottom: 0; }
.panel-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.6rem; }
.panel-row > div { border-left: 2px solid var(--saffron); padding-left: 1rem; }
.panel-row .price { display: block; margin: 0.2rem 0 0.4rem; }
.panel-row p:last-child { font-size: 13px; color: var(--ink-70); margin: 0; }

.coffee {
  display: grid; grid-template-columns: auto 1fr; gap: 1.5rem; align-items: start;
  background: linear-gradient(150deg, #241a12 0%, #14100d 55%, #0d1512 100%);
  color: #fff; border-radius: var(--radius-card);
  padding: clamp(1.6rem, 4vw, 2.6rem); margin: 2.5rem 0;
  position: relative; overflow: hidden;
}
.coffee::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: var(--spectrum);
}
.coffee-mark { font-size: clamp(2.2rem, 6vw, 3.2rem); line-height: 1; opacity: 0.9; }
.coffee h2 { font-weight: 600; letter-spacing: -0.018em; font-size: clamp(1.4rem, 3.4vw, 2rem); line-height: 1.12; margin: 0.25rem 0 0.7rem; color: #fff; }
.coffee .eyebrow { color: var(--saffron-lit); }
.coffee p { color: #ded6cd; margin: 0 0 0.6rem; max-width: 58ch; }
.coffee-cta { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; margin-top: 1rem; }
.coffee-cta .eyebrow { color: #a09589; }
@media (max-width: 560px) { .coffee { grid-template-columns: 1fr; gap: 0.6rem; } }

main h2.serif { font-size: clamp(1.4rem, 3.2vw, 1.9rem); margin: 2.4rem 0 0.7rem; }
main h2.serif::after {
  content: ""; display: block; width: 44px; height: 3px; margin-top: 0.55rem;
  border-radius: 2px; background: var(--spectrum);
}
.coffee h2.serif::after { content: none; }
main ul { padding-left: 1.1rem; color: var(--ink-70); }
main ul li { margin-bottom: 0.5rem; }
main ul li::marker { color: var(--saffron); }
main a.btn, main a.card { text-decoration: none; }

/* footer */
footer.site {
  background: #e6ded0; border-top: 3px solid transparent;
  border-image: var(--spectrum) 1;
  margin-top: 3rem; padding: 2.5rem 0 2rem; font-size: 12px; color: var(--ink-45);
}
footer.site .tag-line { font-weight: 590; font-size: 15px; color: var(--ink-70); }
footer.site a { color: var(--ink-70); }
footer.site a:hover { color: var(--saffron); }
.foot-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1.5rem; margin-top: 1.8rem; padding-top: 1.6rem; border-top: 1px solid var(--ink-20); }
.foot-cols .eyebrow { color: var(--saffron); text-transform: uppercase; letter-spacing: 0.06em; }
.foot-cols p:first-child.eyebrow { margin-bottom: 0.6rem; }
.foot-cols a { display: inline-block; margin-top: 0.3rem; }

table.plain { width: 100%; border-collapse: collapse; font-size: 14px; }
table.plain td, table.plain th { text-align: left; padding: 0.8rem 0; border-bottom: 1px solid var(--ink-20); }
table.plain tr td:first-child { color: var(--ink); }

@media (max-width: 900px) {
  .band-inner { grid-template-columns: 1fr; }
  .band-art { order: -1; }
  .band-art .apari { max-width: 300px; }
  .hero { text-align: center; }
  .hero h1 { margin-left: auto; margin-right: auto; }
  .hero p.lede { margin-left: auto; margin-right: auto; }
  .hero-cta { justify-content: center; }
  .chips { justify-content: center; }
}
@media (max-width: 760px) {
  .detail { grid-template-columns: 1fr; gap: 1.5rem; }
  nav.site { gap: 1.1rem; font-size: 12px; }
  .principles { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; gap: 1.2rem; }
  .grid { grid-template-columns: 1fr; gap: 1rem; }
  .coffee { padding: 1.4rem; }
  .coffee h2 { font-size: 1.25rem; }
  .coffee p { font-size: 14px; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  header.site .bar { flex-direction: column; align-items: flex-start; gap: 0.35rem; padding: 0.75rem 0 0.55rem; }
  nav.site { margin-left: 0; width: 100%; }
  .strip { font-size: 11px; text-align: left; }
  .hero-cta { gap: 0.9rem; }
  .band { border-radius: 20px; }
  .band-art .apari { max-width: 240px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }