/* Hesti — theme styles. Every value comes from DESIGN.md (repo root). */

/* Typefaces, served from hesti.uk (assets/fonts/, SIL Open Font License) rather than Google Fonts,
   so no visitor's address goes to Google. Same families and weights DESIGN.md names. */
@font-face { font-family: "IM Fell English"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/im-fell-english-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "IM Fell English SC"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/im-fell-english-sc-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Work Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/work-sans-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Work Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/work-sans-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Work Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/work-sans-latin-ext-500-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Work Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/work-sans-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

:root {
  --verdure: #2D4A2D;
  --parchment: #F5F0E8;
  --sienna: #C4703F;
  --sienna-dark: #B6653A;
  --catalogue: #A69E94;
  --saleroom: #6B6A63;
  --canvas: #E2DDCE;
  --rule: rgba(45, 74, 45, 0.22);
  --rule-strong: rgba(45, 74, 45, 0.55);

  --xxs: 4px; --xs: 8px; --sm: 16px; --md: 24px; --lg: 32px; --xl: 48px; --x2l: 64px; --x3l: 88px;

  --fell: "IM Fell English", "Work Sans", Georgia, serif;
  --fell-sc: "IM Fell English SC", "Work Sans", Georgia, serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--parchment);
  color: var(--verdure);
  font: 400 17px/1.70 var(--fell);
  font-style: normal;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--verdure); text-decoration-color: var(--rule-strong); text-underline-offset: 3px; }
a:hover { color: var(--sienna); text-decoration-color: var(--sienna); }
em, i, cite { font-style: normal; }
b, strong { font-weight: 400; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--verdure); outline-offset: 3px; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- type roles ---------- */
.label {
  margin: 0;
  font: 400 12px/1.4 var(--fell-sc);
  letter-spacing: 0.28em;
  text-transform: lowercase;
  color: var(--saleroom);
}
.kicker {
  margin: 0;
  font: 400 11px/1.4 var(--fell-sc);
  letter-spacing: 0.36em;
  text-transform: lowercase;
  color: var(--saleroom);
}
.note { margin: var(--xs) 0 0; font-size: 15px; line-height: 1.55; color: var(--saleroom); }

/* ---------- buttons (DESIGN: .btn / .btn-ghost) ---------- */
.btn {
  display: flex; align-items: center; justify-content: center; gap: var(--xs);
  min-height: 52px; padding: 18px 44px;
  background: var(--sienna); color: var(--parchment);
  border: 1px solid var(--sienna); border-radius: 2px;
  font: 400 17px/1.0 var(--fell); letter-spacing: 0.02em;
  text-decoration: none; cursor: pointer;
}
.btn:hover, .btn:active { background: var(--sienna-dark); border-color: var(--sienna-dark); color: var(--parchment); }
.btn-ghost { background: transparent; color: var(--verdure); border-color: var(--verdure); }
.btn-ghost:hover, .btn-ghost:active { background: var(--verdure); border-color: var(--verdure); color: var(--parchment); }
.btn svg { flex: 0 0 auto; }

/* ---------- masthead + foot ---------- */
.masthead {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sm);
  min-height: 60px; padding: var(--xs) var(--xs) var(--xs) var(--sm);
  border-bottom: 3px double var(--rule-strong);
}
.masthead-brand {
  display: flex; align-items: center; gap: var(--xs);
  font: 400 20px/1 var(--fell-sc); letter-spacing: 0.18em; text-transform: lowercase;
  text-decoration: none; color: var(--verdure);
}
.masthead-brand img { width: 36px; height: 36px; filter: saturate(0.78); }
.masthead-nav { display: flex; align-items: center; }
.masthead-link {
  display: inline-flex; align-items: center; gap: var(--xs);
  min-height: 44px; padding: 0 var(--xs);
  background: none; border: 0; cursor: pointer;
  font: 400 12px/1 var(--fell-sc); letter-spacing: 0.28em; text-transform: lowercase;
  color: var(--verdure); text-decoration: none;
}
.masthead-link svg { color: var(--sienna); }

.foot {
  display: flex; justify-content: space-between; gap: var(--sm); flex-wrap: wrap;
  margin-top: var(--xl); padding: var(--md) var(--sm) var(--xl);
  border-top: 3px double var(--rule-strong);
  font: 400 10px/1.6 var(--fell-sc); letter-spacing: 0.32em; text-transform: lowercase;
  color: var(--saleroom);
}
.foot a { color: inherit; text-decoration: none; }

/* ---------- front page (ported from holding-page/index.html) ---------- */
.home-template {
  background: var(--canvas); min-height: 100vh; padding: 32px 20px;
  display: flex; align-items: center; justify-content: center;
}
.holding {
  width: 100%; max-width: 720px; margin: 0; padding: 56px 56px 40px;
  background: var(--parchment); text-align: center; text-wrap: pretty;
}
.holding-mark { width: 100%; max-width: 440px; margin: 16px auto 40px; filter: saturate(0.78); }
.holding-title { margin: 0 0 28px; font: 400 64px/1.05 var(--fell); letter-spacing: 0.01em; }
.holding-copy { max-width: 520px; margin: 0 auto; font-size: 19px; line-height: 1.7; }
.holding-sign { font-size: 17px; line-height: 1.4; margin-bottom: 14px; }
.holding-domain { font: 400 12px/1.4 var(--fell-sc); letter-spacing: 0.32em; color: var(--saleroom); }
.rule-handpulled {
  display: block; width: 100%; max-width: 520px; height: 8px; margin: 40px auto 28px;
  color: var(--verdure); overflow: visible;
}
.rule-handpulled path { fill: none; stroke: currentColor; stroke-width: 0.9; stroke-linecap: round; vector-effect: non-scaling-stroke; }
@media (max-width: 560px) {
  .home-template { padding: 16px 12px; }
  .holding { padding: 36px 24px 28px; }
  .holding-title { font-size: 44px; margin-bottom: 22px; }
  .holding-copy { font-size: 17px; }
  .holding-mark { max-width: 305px; margin: 8px auto 28px; }
  .rule-handpulled { margin: 28px auto 22px; max-width: 360px; }
}

/* ---------- page frame ---------- */
.page { max-width: 600px; margin: 0 auto; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; padding: 0 var(--sm); margin-bottom: var(--sm); }
.status {
  display: flex; gap: var(--xs); align-items: center;
  margin: var(--sm) var(--sm) 0; padding: var(--sm);
  border-top: 1px solid var(--rule-strong); border-bottom: 1px solid var(--rule-strong);
  font-size: 15px; line-height: 1.5;
}
.status[hidden] { display: none; }

/* ---------- reactions ---------- */
.react { display: flex; gap: var(--xs); margin-top: var(--sm); }
.react-btn {
  flex: 1 1 0; min-width: 0; min-height: 44px; padding: 0 var(--xs);
  display: flex; align-items: center; justify-content: center; gap: var(--xs);
  background: transparent; border: 1px solid var(--rule-strong); border-radius: 2px;
  font: 400 17px/1 var(--fell); color: var(--verdure); cursor: pointer;
}
.react-btn:hover { border-color: var(--verdure); }
.react-btn svg { flex: 0 0 auto; }
.react-btn[data-value="like"][aria-pressed="true"] { border-color: var(--sienna); color: var(--sienna); }
.react-btn[data-value="like"][aria-pressed="true"] svg path { fill: var(--sienna); }
.react-btn[data-value="pass"][aria-pressed="true"] { border-color: var(--verdure); background: var(--canvas); }
body:not(.is-member) .react-btn { color: var(--saleroom); border-color: var(--rule); }
body:not(.is-member) .react-btn:hover { color: var(--verdure); border-color: var(--rule-strong); }
.react[aria-busy="true"] .react-btn { cursor: progress; }

/* One line for guests at the top of the finds. */
.hint {
  display: flex; gap: var(--sm); align-items: flex-start;
  margin: 0; padding: var(--sm);
  border-bottom: 1px dotted var(--rule-strong);
  font-size: 15px; line-height: 1.5; color: var(--verdure);
}
.hint svg { flex: 0 0 auto; margin-top: 2px; color: var(--sienna); }

/* Titles under the small photos in "Hesti also found", on a listing. */
.shelf-title { display: block; margin-top: var(--xs); font-size: 17px; line-height: 1.3; }
.shelf-meta { display: block; margin-top: var(--xxs); font: 400 10px/1.6 var(--fell-sc); letter-spacing: 0.22em; text-transform: lowercase; color: var(--saleroom); }

/* ---------- the finds: pieces or dealers, kinds, the grid ---------- */
.page-grid { max-width: 1120px; }
.browse { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0 var(--sm); }
.browse a {
  display: flex; align-items: center; justify-content: center; min-height: 52px;
  font-size: 19px; line-height: 1; text-decoration: none; color: var(--saleroom);
  border-bottom: 1px solid var(--rule);
}
.browse a[aria-current="page"] { color: var(--verdure); border-bottom-color: var(--verdure); }
.browse a:hover { color: var(--sienna); }

.kinds {
  display: flex; gap: var(--md); padding: var(--xxs) var(--sm) 0;
  border-bottom: 1px solid var(--rule-strong);
  overflow-x: auto; scrollbar-width: none; white-space: nowrap;
}
.kinds::-webkit-scrollbar { display: none; }
.kinds[hidden] { display: none; }
.kind {
  flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 44px; padding: 0;
  background: none; border: 0; border-bottom: 1px solid transparent; border-radius: 0; cursor: pointer;
  font: 400 12px/1 var(--fell-sc); letter-spacing: 0.28em; text-transform: lowercase; color: var(--saleroom);
}
.kind:hover { color: var(--verdure); }
.kind[aria-pressed="true"] { color: var(--verdure); border-bottom-color: var(--sienna); }
.kind-count { margin-left: var(--xxs); font-size: 10px; letter-spacing: 0.1em; color: var(--saleroom); font-variant-numeric: tabular-nums; }
.kind-count:empty { display: none; }

.grid-head { display: flex; flex-direction: column; gap: var(--xxs); padding: var(--xs) var(--sm) var(--sm); }
.grid-head .page-title { margin: 0; }
.back {
  display: inline-flex; align-items: center; gap: var(--xxs); align-self: flex-start; min-height: 44px;
  font: 400 12px/1 var(--fell-sc); letter-spacing: 0.28em; text-transform: lowercase;
  text-decoration: none; color: var(--saleroom);
}
.back:hover { color: var(--sienna); }
.grid-meta { margin: 0; font: 400 12px/1.6 var(--fell-sc); letter-spacing: 0.22em; text-transform: lowercase; color: var(--saleroom); }
.grid-meta span + span::before { content: " · "; }
.grid-meta [data-piece-count]:empty { display: none; }

.finds-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--md) var(--sm);
  padding: var(--sm) var(--sm) 0;
}
.finds-grid > .empty { grid-column: 1 / -1; margin: 0; }
.find-cell { min-width: 0; }
.find-cell[hidden], .find[hidden] { display: none; }
.find { display: flex; flex-direction: column; min-width: 0; }
.find .photo { aspect-ratio: 3 / 4; }
.find-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--xs); padding-top: var(--xs); }
.find-price { min-width: 0; text-align: right; font: 400 17px/1.25 var(--fell); font-variant-numeric: tabular-nums; }
.find-title { margin: var(--xs) 0 0; font: 400 17px/1.3 var(--fell); }
.find-title a { text-decoration: none; }
.find-dealer { margin: var(--xxs) 0 0; font: 400 10px/1.6 var(--fell-sc); letter-spacing: 0.22em; text-transform: lowercase; color: var(--saleroom); }
.find-dealer a { color: inherit; text-decoration: none; }
.find-dealer a:hover { color: var(--sienna); }

/* Marks on a card: two square buttons. The words stay for screen readers. */
.react-compact { flex: 0 0 auto; gap: var(--xxs); margin-top: 0; }
.react-compact .react-btn { flex: 0 0 44px; width: 44px; padding: 0; }
.react-compact .react-btn span {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* "Not for me" folds the card away inside its own cell. */
.find-cell .passed { margin: 0; padding: var(--sm) 0; border-top: 1px dotted var(--rule-strong); }
.find-cell .passed-row { flex-direction: column; align-items: flex-start; gap: var(--xs); }
.find-cell .passed-row button { padding: 0; }
.find-cell .reasons button { padding: 0 var(--xs); }

.more { padding: var(--lg) var(--sm) 0; }
.more[hidden] { display: none; }
.more .btn { width: 100%; }

/* ---------- /dealers/ ---------- */
.dealers { padding: 0 var(--sm); }
.dealer-row {
  display: flex; flex-direction: column; gap: var(--xs); padding: var(--md) 0;
  border-bottom: 1px dotted var(--rule-strong); text-decoration: none; color: var(--verdure);
}
.dealer-row-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sm); }
.dealer-row-name { font-size: 22px; line-height: 1.3; }
.dealer-row-count, .dealer-row-town { font: 400 10px/1.6 var(--fell-sc); letter-spacing: 0.22em; text-transform: lowercase; color: var(--saleroom); }
.dealer-row-count { white-space: nowrap; }
.dealer-row-strip { display: flex; gap: var(--xs); padding-top: var(--xxs); }
.dealer-row-strip img { width: 72px; height: 96px; object-fit: cover; background: var(--canvas); }

/* ---------- photos ---------- */
.photo { display: block; width: 100%; background: var(--canvas); overflow: hidden; }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo-empty { display: flex; align-items: center; justify-content: center; color: var(--saleroom); font: 400 10px/1 var(--fell-sc); letter-spacing: 0.28em; }

/* ---------- feed card ---------- */
.feed { padding-bottom: var(--md); }
.feed > .label { padding: 0 var(--sm); margin-bottom: var(--sm); }
.piece { padding: 0 var(--sm) var(--lg); margin-bottom: var(--lg); border-bottom: 1px dotted var(--rule-strong); }
.piece .photo { aspect-ratio: 1 / 1; }
.piece-title { margin: var(--sm) 0 0; font: 400 22px/1.3 var(--fell); }
.piece-title a { text-decoration: none; }
.piece-meta { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sm); margin: var(--xxs) 0 0; }
.piece-dealer { font: 400 10px/1.6 var(--fell-sc); letter-spacing: 0.22em; text-transform: lowercase; color: var(--saleroom); }
.piece-dealer a { color: inherit; text-decoration: none; }
.piece-price { font: 400 18px/1.3 var(--fell); white-space: nowrap; font-variant-numeric: tabular-nums; }

.passed {
  margin: 0 var(--sm) var(--lg); padding: 0 0 var(--sm);
  border-bottom: 1px dotted var(--rule-strong);
}
.passed-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sm); font-size: 15px; line-height: 1.45; }
.passed-row button, .reasons button {
  min-height: 44px; padding: 0 var(--sm); background: none; cursor: pointer;
  border: 1px solid var(--rule-strong); border-radius: 2px; font: 400 15px/1 var(--fell); color: var(--verdure);
}
.passed-row button { border-color: transparent; text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: 3px; padding: 0 var(--xs); }
.reasons-label { margin: var(--sm) 0 var(--xs); font-size: 15px; color: var(--saleroom); }
.reasons { display: flex; flex-wrap: wrap; gap: var(--xs); }
.reasons button[aria-pressed="true"] { border-color: var(--verdure); background: var(--canvas); }

/* ---------- pagination ---------- */
.pagination { display: flex; justify-content: space-between; align-items: center; gap: var(--sm); padding: 0 var(--sm); font: 400 12px/1 var(--fell-sc); letter-spacing: 0.28em; text-transform: lowercase; color: var(--saleroom); }
.pagination a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }

/* ---------- listing ---------- */
.listing-photos { position: relative; background: var(--canvas); }
.listing-track {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.listing-track::-webkit-scrollbar { display: none; }
.listing-photo { flex: 0 0 100%; margin: 0; aspect-ratio: 1 / 1; scroll-snap-align: start; }
.listing-photo img { width: 100%; height: 100%; object-fit: cover; }
.listing-count {
  position: absolute; top: var(--sm); right: var(--sm); margin: 0; padding: var(--xxs) var(--xs);
  background: var(--parchment); border-radius: 2px;
  font: 400 12px/1 var(--fell-sc); letter-spacing: 0.28em; color: var(--verdure);
}
.listing-count[hidden] { display: none; }
.listing-step {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; display: none; align-items: center; justify-content: center;
  background: var(--parchment); border: 1px solid var(--rule); border-radius: 2px; cursor: pointer; color: var(--verdure);
}
.listing-step[data-step="-1"] { left: var(--sm); }
.listing-step[data-step="1"] { right: var(--sm); }
@media (hover: hover) and (pointer: fine) { .listing-photos.is-multi .listing-step { display: flex; } }
.listing-step:disabled { color: var(--catalogue); border-color: var(--rule); cursor: default; }

.listing-inner { padding: 0 var(--sm); }
.listing .react { margin-top: var(--sm); }
.listing-head { padding-top: var(--lg); }
.listing-title { margin: var(--xs) 0 var(--xs); font: 400 32px/1.2 var(--fell); }
.listing-dealer { margin: 0; font: 400 12px/1.6 var(--fell-sc); letter-spacing: 0.22em; text-transform: lowercase; color: var(--saleroom); }
.listing-dealer a { color: inherit; text-decoration: none; }
.listing-tools { display: flex; justify-content: flex-start; margin-top: var(--xs); }
.listing-share {
  display: inline-flex; align-items: center; gap: var(--xs); min-height: 44px; padding: 0;
  background: none; border: 0; cursor: pointer;
  font: 400 12px/1 var(--fell-sc); letter-spacing: 0.28em; text-transform: lowercase; color: var(--verdure);
}
.listing-body { margin-top: var(--md); padding-top: var(--md); border-top: 1px solid var(--rule-strong); }

.gh-content > * { margin-top: 0; margin-bottom: 0; }
.gh-content > * + * { margin-top: var(--md); }
.gh-content h2 { margin: var(--xl) 0 0; font: 400 32px/1.2 var(--fell); }
.gh-content h3 { margin: var(--lg) 0 0; font: 400 22px/1.55 var(--fell); }
.gh-content blockquote { margin: var(--lg) 0; padding: 0; font-size: 24px; line-height: 1.45; text-align: center; }
.gh-content figure { margin: var(--lg) 0; }
.gh-content figcaption { margin-top: var(--xs); font: 400 10px/1.6 var(--fell-sc); letter-spacing: 0.22em; text-transform: lowercase; color: var(--saleroom); }
.gh-content hr { border: 0; border-top: 1px solid var(--rule-strong); margin: var(--xl) 0; }
.gh-content ul, .gh-content ol { padding-left: var(--md); }
.gh-content .kg-width-wide, .gh-content .kg-width-full { margin-left: calc(var(--sm) * -1); margin-right: calc(var(--sm) * -1); }
.gh-content .kg-width-wide img, .gh-content .kg-width-full img { width: 100%; }

/* Details: a <dl> in an HTML card, written as the last block of a listing. */
.gh-content dl { margin-top: var(--lg); border-top: 1px solid var(--rule-strong); }
.gh-content dl > div, .gh-content dl > dt { display: grid; }
.gh-content dl > div { grid-template-columns: 120px minmax(0, 1fr); gap: var(--sm); padding: var(--xs) 0; border-bottom: 1px dotted var(--rule); }
.gh-content dt { font: 400 12px/1.9 var(--fell-sc); letter-spacing: 0.22em; text-transform: lowercase; color: var(--saleroom); }
.gh-content dd { margin: 0; font-size: 15px; line-height: 1.7; font-variant-numeric: tabular-nums; }

.listing-price { margin-top: var(--xl); }
.listing-price .price { margin: var(--xs) 0 0; font: 400 32px/1.2 var(--fell); font-variant-numeric: tabular-nums; }
.listing-contact { display: flex; flex-direction: column; gap: var(--xs); margin-top: var(--xl); }
.listing-contact .label { margin-bottom: var(--xs); }

.related { margin-top: var(--xl); padding-top: var(--lg); border-top: 1px solid var(--rule-strong); }
.related-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sm); margin-top: var(--sm); }
.related-grid .photo { aspect-ratio: 1 / 1; }
.related-grid a { display: block; text-decoration: none; }

/* ---------- article (Field Notes) ---------- */
.article { padding: 0 var(--sm); }
.article-head { padding: var(--xl) 0 var(--md); }
.article-title { margin: var(--xs) 0 var(--xs); font: 400 32px/1.2 var(--fell); }
.article-meta { margin: 0; font: 400 12px/1.6 var(--fell-sc); letter-spacing: 0.28em; text-transform: lowercase; color: var(--saleroom); }
.article-image { margin: 0 calc(var(--sm) * -1) var(--lg); }
.notes-list { list-style: none; margin: 0; padding: 0 var(--sm); }
.notes-list li { padding: var(--md) 0; border-top: 1px dotted var(--rule-strong); }
.notes-list li:last-child { border-bottom: 1px dotted var(--rule-strong); }
.notes-list a { text-decoration: none; font-size: 22px; line-height: 1.3; }

/* ---------- dealer + taste pages ---------- */
.page-head { padding: var(--xl) var(--sm) var(--lg); }
.page-title { margin: var(--xs) 0 0; font: 400 32px/1.2 var(--fell); }
.page-lead { margin: var(--sm) 0 0; font-size: 19px; line-height: 1.55; }
.empty { margin: 0 var(--sm); padding: var(--md) 0; border-top: 1px dotted var(--rule-strong); border-bottom: 1px dotted var(--rule-strong); }

/* ---------- ask sheet ---------- */
.ask {
  width: 100%; max-width: 600px; margin: auto auto 0; padding: var(--sm) var(--md) var(--lg);
  border: 0; border-top: 3px double var(--rule-strong); border-radius: 0;
  background: var(--parchment); color: var(--verdure);
}
.ask::backdrop { background: rgba(45, 74, 45, 0.55); }
.ask-grip { display: block; width: 40px; height: 3px; margin: 0 auto var(--md); background: var(--rule-strong); }
.ask-piece { display: flex; align-items: center; gap: var(--sm); padding: var(--xs) 0; margin-bottom: var(--md); border-top: 1px dotted var(--rule-strong); border-bottom: 1px dotted var(--rule-strong); }
.ask-piece[hidden] { display: none; }
.ask-piece img { width: 52px; height: 52px; object-fit: cover; background: var(--canvas); }
.ask-piece-title { display: block; font-size: 17px; line-height: 1.35; }
.ask-piece-state { display: flex; align-items: center; gap: var(--xs); font-size: 15px; color: var(--sienna); }
.ask h2 { margin: 0; font: 400 32px/1.2 var(--fell); }
.ask p { margin: var(--sm) 0 0; }
.field-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  margin-top: var(--md); border-bottom: 1px solid var(--rule-strong);
}
.field-row:focus-within { border-bottom-color: var(--sienna); }
.field {
  width: 100%; min-height: 48px; padding: 12px 0; border: 0; background: transparent;
  font: 400 17px/1.4 var(--fell); color: var(--verdure); border-radius: 0;
}
.field::placeholder { color: var(--catalogue); }
.field:focus { outline: none; }
.field-submit {
  min-height: 48px; padding: 0 0 0 var(--sm); border: 0; background: none; cursor: pointer;
  font: 400 12px/1 var(--fell-sc); letter-spacing: 0.28em; text-transform: lowercase; color: var(--sienna);
}
.ask-form.loading .field-submit { color: var(--catalogue); cursor: progress; }
.ask-success, .ask-error { display: none; }
.ask-form.success { display: none; }
.ask-form.success ~ .ask-success { display: block; }
.ask-form.error ~ .ask-error { display: block; }
.ask-switch { display: flex; align-items: center; flex-wrap: wrap; gap: var(--xs); min-height: 44px; margin: var(--sm) 0 0; font-size: 15px; line-height: 1.5; color: var(--saleroom); }
.ask-link {
  min-height: 44px; padding: 0; background: none; border: 0; cursor: pointer;
  font: inherit; color: var(--verdure);
  text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: 3px;
}
.ask-link:hover { color: var(--sienna); text-decoration-color: var(--sienna); }
.ask-form.loading ~ .ask-switch .ask-link { pointer-events: none; }
/* Two modes in one sheet (hesti.js sets data-mode): show only what belongs to the current one. */
.ask[data-mode="signin"] [data-ask-mode="signup"],
.ask[data-mode="signup"] [data-ask-mode="signin"] { display: none; }
/* Sign-in shows Ghost's own reason, inside the form; sign-up keeps the line below it. */
.ask[data-mode="signin"] .ask-form.error .ask-error { display: block; }
.ask[data-mode="signin"] .ask-form.error ~ .ask-error { display: none; }
/* The sheet's "and the piece stays marked" only makes sense when a piece is waiting. */
.ask:not([data-post]) .ask-kept { display: none; }
/* After a sign-up send the sheet is as it was; after a sign-in send the switch stays, for someone who has not joined. */
.ask[data-mode="signup"] .ask-form.success ~ .ask-switch { display: none; }
.ask-later {
  display: block; margin: var(--md) auto 0; min-height: 44px; padding: 0 var(--sm);
  background: none; border: 0; cursor: pointer; color: var(--saleroom); font: 400 15px/1 var(--fell);
}
.ask-fine { font-size: 15px; line-height: 1.5; color: var(--saleroom); }

/* Ghost's own card styles (card_assets) bring italics, shadows and round corners.
   DESIGN.md allows none of them, so take them back out. */
.gh-content [class^="kg-"], .gh-content [class*=" kg-"] {
  font-style: normal !important; box-shadow: none !important; border-radius: 0 !important;
}
.gh-content [class*="kg-"][class*="-btn"], .gh-content [class*="kg-"][class*="-button"] { border-radius: 2px !important; }

/* No backend configured: hide everything that needs it. */
.no-api .react, .no-api .hint { display: none; }
.listing-photos[hidden] { display: none; }

/* ---------- wider screens ---------- */
@media (min-width: 720px) {
  .page { padding-top: var(--md); }
  .finds-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--xl) var(--md); }
  .more { max-width: 360px; margin: 0 auto; }
  .listing-inner, .article { padding: 0; }
  .masthead { padding-left: var(--md); padding-right: var(--md); }
}
@media (min-width: 1000px) {
  .finds-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}