/* ==========================================================================
   The Guild — Paper & Ink
   Imported from the "The Guild v2" Claude Design mockup and turned from
   inline styles into classes. Every colour, space, radius and shadow is a
   token already defined in website/css/main.css; the two the mockup added
   (--clr-surface, --radius-pill) are defined here so this sheet is
   self-sufficient without editing the site's base tokens.

   Naming: .gd-* on the directory, .gs-* on the storefront, .gu-* shared.
   ========================================================================== */

:root {
  --clr-surface: #FBF7EE;   /* card stock — one step brighter than paper */
  --radius-pill: 999px;
  --gu-rule: rgba(33,26,18,0.1);
  --gu-rule-faint: rgba(33,26,18,0.08);
}

/* --------------------------------------------------------------------------
   Shared ornament
   -------------------------------------------------------------------------- */

.gu-eyebrow {
  font-family: var(--font-ui);
  font-size: .71875rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--clr-accent);
}

.gu-label {
  font-family: var(--font-ui);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--clr-text-muted);
}

.gu-mono { font-family: var(--font-mono); }

.gu-note {
  font-family: var(--font-body);
  font-size: .875rem;
  font-style: italic;
  line-height: 1.6;
  color: var(--clr-text-muted);
}

.gu-fleuron {
  font-family: var(--font-heading);
  line-height: 1;
  color: var(--clr-accent);
}

/* The closing statement both pages carry. */
.gu-colophon {
  max-width: 64ch;
  margin-inline: auto;
  text-align: center;
  padding-top: var(--space-8);
  border-top: 1px solid var(--clr-border);
}
.gu-colophon .gu-fleuron {
  display: block;
  font-size: 1.25rem;
  opacity: .85;
  margin-bottom: var(--space-5);
}
.gu-colophon p {
  font-family: var(--font-body);
  font-size: .9375rem;
  line-height: 1.8;
  color: var(--clr-text-muted);
}

/* AI disclosure chip — mono code, hairline, full sentence. */
.gu-ai {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 5px 11px 5px 9px;
  background: var(--clr-bg-warm);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
}
.gu-ai svg { flex: none; color: var(--clr-secondary); }
.gu-ai-code {
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--clr-text-muted);
  white-space: nowrap;
}
.gu-ai-rule { width: 1px; height: 13px; background: var(--clr-border); }
.gu-ai-label {
  font-family: var(--font-ui);
  font-size: .75rem;
  font-weight: 500;
  color: var(--clr-secondary);
}

.gu-stars { display: flex; gap: 2px; }

/* The opening bar — one column per week until the stated opening. */
.gu-gutter { display: flex; gap: 3px; }
.gu-gutter span { flex: 1; display: block; height: 26px; }
.gu-gutter .is-busy {
  background: repeating-linear-gradient(135deg, rgba(33,26,18,0.16) 0 2px, transparent 2px 4px);
  border: 1px solid var(--clr-border);
}
.gu-gutter .is-next { background: var(--clr-accent); border: 1px solid var(--clr-accent); }
.gu-gutter .is-free { background: var(--clr-bg); border: 1px solid var(--clr-border); }
.gu-gutter-ends {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
  font-family: var(--font-mono);
  font-size: .5625rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--clr-text-muted);
}

/* Datum — a small stacked label/value pair. */
.gu-datum { display: flex; flex-direction: column; gap: 2px; }
.gu-datum-k {
  font-family: var(--font-ui);
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--clr-text-muted);
}
.gu-datum-k.is-open { color: var(--clr-success); }
.gu-datum-v { font-family: var(--font-mono); font-size: .875rem; color: var(--clr-primary); }

/* --------------------------------------------------------------------------
   Directory — thumb index
   -------------------------------------------------------------------------- */

.gd-thumbs {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 6px 6px 0;
  background: rgba(245,239,227,0.86);
  backdrop-filter: blur(8px);
  border: 1px solid var(--clr-border);
  border-left: 0;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.gd-thumb {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 38px;
  padding: 9px 4px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  text-decoration: none;
  color: var(--clr-secondary);
  transition: background-color var(--trans-fast), color var(--trans-fast);
}
.gd-thumb:hover { background: rgba(166,58,43,0.08); color: var(--clr-accent); }
.gd-thumb:focus-visible { outline: 2px solid var(--clr-accent); outline-offset: -2px; }
.gd-thumb span {
  font-family: var(--font-mono);
  font-size: .5625rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  text-orientation: mixed;
}
@media (max-width: 1100px) { .gd-thumbs { display: none; } }
/* Set by guild.js while the comparison sheet is open — see the note there. */
.gd-comparing .gd-thumbs { display: none; }

/* --------------------------------------------------------------------------
   Directory — The Record
   -------------------------------------------------------------------------- */

.gd-record {
  background: var(--clr-bg-warm);
  border-top: 1px solid var(--clr-border);
  border-bottom: 1px solid var(--clr-border);
}
.gd-record-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.gd-record-head .gu-note { max-width: 56ch; }
.gd-record-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  border-top: 1px solid var(--clr-primary);
}
.gd-record-cell {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-5) var(--space-5) 0;
  border-right: 1px solid var(--gu-rule);
}
.gd-record-cell dt {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-ui);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--clr-text-muted);
}
.gd-record-cell dt svg { color: var(--clr-secondary); }
.gd-record-cell dd { display: flex; align-items: baseline; gap: 7px; }
.gd-record-n { font-family: var(--font-mono); font-size: 1.5rem; color: var(--clr-primary); }
.gd-record-unit { font-family: var(--font-ui); font-size: .71875rem; color: var(--clr-text-muted); }

/* --------------------------------------------------------------------------
   Directory — filter strip
   -------------------------------------------------------------------------- */

.gd-filters {
  position: sticky;
  top: var(--nav-h);
  z-index: 40;
  background: var(--clr-bg);
  border-bottom: 1px solid var(--clr-border);
  box-shadow: 0 1px 0 0 rgba(33,26,18,0.04);
}
.gd-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-4);
}
.gd-field { flex: 1 1 180px; min-width: 160px; display: flex; flex-direction: column; gap: 6px; }
.gd-select-wrap { position: relative; display: flex; }
.gd-select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  padding: 10px 36px 10px 12px;
  font-family: var(--font-ui);
  font-size: .875rem;
  line-height: 1.4;
  color: var(--clr-primary);
  background: var(--clr-bg);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
  cursor: pointer;
}
.gd-select:focus-visible {
  border-color: var(--clr-accent);
  box-shadow: 0 0 0 3px var(--focus-ring, rgba(166,58,43,0.35));
  outline: none;
}
.gd-select-caret {
  position: absolute;
  right: 12px;
  top: 50%;
  margin-top: -7px;
  pointer-events: none;
  color: var(--clr-text-muted);
}

/* The posture dial. */
.gd-posture {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--clr-border);
}
.gd-posture-head { display: flex; flex-direction: column; gap: 3px; flex: 0 0 auto; }
.gd-posture-head .gu-label { color: var(--clr-accent); }
.gd-posture-sub { font-family: var(--font-ui); font-size: .71875rem; color: var(--clr-text-muted); }
.gd-dial {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--clr-bg);
}
.gd-dial-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 0;
  border-left: 1px solid var(--clr-border);
  background: transparent;
  font-family: var(--font-ui);
  font-size: .8125rem;
  font-weight: 500;
  color: var(--clr-secondary);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--trans-fast), color var(--trans-fast);
}
.gd-dial-opt:first-child { border-left: 0; }
.gd-dial-opt svg { opacity: .65; }
.gd-dial-opt:hover { background: rgba(33,26,18,0.05); color: var(--clr-primary); }
.gd-dial-opt:focus-visible { outline: 2px solid var(--clr-accent); outline-offset: -3px; }
/* The dial's options are links (each position is a URL), so the selected
   state is aria-current — aria-pressed is only defined for buttons. */
.gd-dial-opt[aria-current="true"] {
  background: rgba(166,58,43,0.1);
  box-shadow: inset 0 -2px 0 0 var(--clr-accent);
  font-weight: 600;
  color: var(--clr-accent);
}
.gd-dial-opt[aria-current="true"] svg { opacity: 1; }
.gd-posture-note {
  flex: 1 1 260px;
  min-width: 220px;
  font-family: var(--font-body);
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--clr-secondary);
}

/* --------------------------------------------------------------------------
   Directory — the register
   -------------------------------------------------------------------------- */

/* Filtering lands on #register. The offset clears the nav and the sticky
   filter strip above it, which would otherwise sit over the register head —
   same reason .gd-gathering carries one. */
.gd-register { padding-block: var(--space-10) var(--space-16); scroll-margin-top: 150px; }
.gd-register-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--clr-primary);
}
.gd-register-head .gu-note { max-width: 54ch; }
.gd-register-count { font-family: var(--font-mono); font-size: .8125rem; color: var(--clr-secondary); }

.gd-gathering { padding-top: var(--space-16); scroll-margin-top: 150px; }
.gd-gathering-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-6);
  padding-bottom: var(--space-5);
  border-bottom: 2px solid var(--clr-primary);
}
.gd-gathering-mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-bg-warm);
  box-shadow: inset 0 0 0 1px var(--clr-bg), inset 0 0 0 2px rgba(33,26,18,0.09);
  color: var(--clr-primary);
}
.gd-gathering-body { flex: 1 1 320px; min-width: 0; }
.gd-gathering-title { display: flex; align-items: baseline; gap: var(--space-3); margin-bottom: 4px; }
.gd-gathering-num {
  font-family: var(--font-mono);
  font-size: .6875rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--clr-accent);
}
.gd-gathering-title h2 {
  font-size: clamp(1.5rem, 3vw, 2.125rem);
  font-weight: 300;
  letter-spacing: -.025em;
  line-height: 1.1;
}
.gd-gathering-blurb {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--clr-secondary);
  max-width: 62ch;
}
.gd-gathering-n {
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .06em;
  color: var(--clr-text-muted);
  white-space: nowrap;
}

/* An entry. */
.gd-entry {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  padding-block: var(--space-8);
  border-bottom: 1px solid var(--clr-border);
}
.gd-entry-plate { flex: none; display: flex; flex-direction: column; gap: 7px; width: 158px; }
.gd-entry-plate .gd-plate-caption {
  font-family: var(--font-mono);
  font-size: .5625rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--clr-text-muted);
  text-align: center;
}
.gd-entry-body { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.gd-entry-top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}
.gd-entry-name {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--clr-primary);
  text-decoration: none;
}
.gd-entry-name:hover { color: var(--clr-accent); }
.gd-entry-name:focus-visible { outline: 2px solid var(--clr-accent); outline-offset: 3px; }
.gd-entry-price { font-family: var(--font-mono); font-size: .9375rem; color: var(--clr-primary); white-space: nowrap; }
.gd-entry-headline {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--clr-secondary);
  max-width: 58ch;
}
.gd-entry-rating { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.gd-entry-rating-n { font-family: var(--font-mono); font-size: .8125rem; color: var(--clr-primary); }
.gd-entry-rating-c { font-family: var(--font-ui); font-size: .75rem; color: var(--clr-text-muted); }
.gd-hair { width: 1px; height: 12px; background: var(--clr-border); }
.gd-entry-chips { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.gd-entry-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-ui);
  font-size: .71875rem;
  font-weight: 600;
  color: var(--clr-secondary);
}
.gd-entry-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--gu-rule-faint);
}
.gd-entry-foot .gd-spacer { flex: 1; }

/* The type specimen — the drawn stand-in when a seller has no plates. */
.gd-specimen {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  aspect-ratio: 3 / 4;
  padding: 14px 13px 11px;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: 2px;
  box-shadow: var(--shadow-sm), inset -6px 0 12px -8px rgba(33,26,18,0.16);
  overflow: hidden;
}
.gd-specimen-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--gu-rule);
}
.gd-specimen-running {
  font-family: var(--font-ui);
  font-size: .4375rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--clr-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gd-specimen-mark { color: var(--clr-accent); opacity: .8; }
.gd-specimen-open { display: flex; gap: 7px; }
.gd-specimen-cap {
  font-family: var(--font-heading);
  font-size: 1.875rem;
  line-height: .78;
  color: var(--clr-primary);
}
.gd-specimen-lines { flex: 1; display: flex; flex-direction: column; gap: 5px; padding-top: 3px; }
.gd-specimen-block { display: flex; flex-direction: column; gap: 5px; }
.gd-specimen-lines i,
.gd-specimen-block i { display: block; height: 1px; background: rgba(33,26,18,0.32); }
.gd-specimen-orn {
  display: grid;
  place-items: center;
  padding-block: 4px;
  font-family: var(--font-heading);
  font-size: .625rem;
  line-height: 1;
  color: var(--clr-accent);
  opacity: .75;
}
.gd-specimen-folio {
  margin-top: auto;
  text-align: center;
  font-family: var(--font-mono);
  font-size: .4375rem;
  letter-spacing: .1em;
  color: var(--clr-text-muted);
}
/* A real portfolio plate uses the same frame as the drawn specimen. */
.gd-plate-img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  background: var(--clr-bg-warm);
  border: 1px solid var(--clr-border);
  border-radius: 2px;
  box-shadow: var(--shadow-sm);
}

/* Shortlist toggle. */
/* `display` on the class beats the UA stylesheet's `[hidden]`, so the
   no-JS state must be restated explicitly — the button ships hidden and
   only guild.js reveals it. Without this line, JS-off readers see a
   control that does nothing. */
.gd-pick[hidden] { display: none; }
.gd-pick {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px 7px 10px;
  background: transparent;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-ui);
  font-size: .75rem;
  font-weight: 600;
  color: var(--clr-secondary);
  cursor: pointer;
  transition: border-color var(--trans-fast), color var(--trans-fast);
}
.gd-pick:hover { border-color: var(--clr-primary); color: var(--clr-primary); }
.gd-pick:focus-visible { outline: 2px solid var(--clr-accent); outline-offset: 2px; }
.gd-pick-box {
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
  background: var(--clr-bg);
  border: 1px solid var(--clr-border);
  border-radius: 2px;
  color: transparent;
}
.gd-pick[aria-pressed="true"] {
  background: rgba(166,58,43,0.1);
  border-color: var(--clr-accent);
  color: var(--clr-accent);
}
.gd-pick[aria-pressed="true"] .gd-pick-box {
  background: var(--clr-accent);
  border-color: var(--clr-accent);
  color: var(--clr-text-on-dark, #F3ECDD);
}
.gd-pick .gd-pick-on { display: none; }
.gd-pick[aria-pressed="true"] .gd-pick-on { display: inline; }
.gd-pick[aria-pressed="true"] .gd-pick-off { display: none; }

/* "New in this gathering" — set among peers, in a warm panel. */
.gd-fresh {
  margin-top: var(--space-10);
  padding: var(--space-8) var(--space-8) var(--space-4);
  background: var(--clr-bg-warm);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
}
.gd-fresh-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-4);
  margin-bottom: var(--space-2);
}
.gd-fresh-tag { display: inline-flex; align-items: center; gap: 9px; }
.gd-fresh-tag .gu-fleuron { font-size: 1.125rem; }
.gd-fresh-tag span:last-child {
  font-family: var(--font-ui);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--clr-accent);
}
.gd-fresh-head p {
  flex: 1 1 300px;
  font-family: var(--font-body);
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--clr-secondary);
  max-width: 62ch;
}
.gd-fresh .gd-entry { border-bottom: 0; border-top: 1px solid var(--clr-border); padding-block: var(--space-6); }
.gd-fresh .gd-entry-plate { width: 132px; }
.gd-fresh .gd-entry-name { font-size: 1.3125rem; }
.gd-noreviews { display: flex; align-items: flex-start; gap: 9px; }
.gd-noreviews .gu-fleuron { font-size: 1rem; line-height: 1.3; }
.gd-noreviews span:last-child {
  font-family: var(--font-body);
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--clr-secondary);
}

/* Empty state. */
.gd-empty { max-width: 56ch; margin: var(--space-16) auto var(--space-12); text-align: center; }
.gd-empty .gu-fleuron { display: block; font-size: 1.75rem; opacity: .9; margin-bottom: var(--space-5); }
.gd-empty h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 300;
  letter-spacing: -.02em;
  margin-bottom: var(--space-4);
}
.gd-empty p {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--clr-secondary);
  margin-bottom: var(--space-6);
}
.gd-empty-actions { display: flex; justify-content: center; gap: var(--space-3); flex-wrap: wrap; }
.gd-empty-foot {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--clr-border);
}

/* --------------------------------------------------------------------------
   Shortlist tray
   -------------------------------------------------------------------------- */

.gd-tray {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 520;
  background: var(--clr-primary);
  border-top: 1px solid rgba(243,236,221,0.16);
  box-shadow: 0 -14px 40px rgba(33,26,18,0.34);
}
.gd-tray[hidden] { display: none; }
.gd-tray-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding: 13px var(--space-6) 15px;
}
.gd-tray-title {
  font-family: var(--font-ui);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  /* .45 measured 3.19:1 on the ink ground — below AA for text this small.
     .66 clears 4.5:1; same for the other faint tray colours below. */
  color: rgba(243,236,221,0.66);
}
.gd-tray-items { display: flex; flex-wrap: wrap; gap: 8px; }
.gd-tray-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 5px 8px 5px 11px;
  background: rgba(243,236,221,0.07);
  border: 1px solid rgba(243,236,221,0.18);
  border-radius: 6px;
  font-family: var(--font-ui);
  font-size: .78125rem;
  font-weight: 600;
  color: #F3ECDD;
}
.gd-tray-chip button {
  display: grid;
  place-items: center;
  width: 18px; height: 18px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: rgba(243,236,221,0.55);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}
.gd-tray-chip button:hover { color: #F3ECDD; }
.gd-tray-count {
  font-family: var(--font-mono);
  font-size: .65625rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(243,236,221,0.66);
}
/* Says whose place a fourth pick took. Full-strength paper on the ink ground:
   it is the one line in the tray a reader has not asked for and must not
   miss, so it is not held back to the .66 the static labels use. */
.gd-tray-note {
  font-family: var(--font-ui);
  font-size: .75rem;
  /* Full-strength paper, where the static labels above sit at .66 — this is
     the one line in the tray nobody asked for and must not be missed. The
     literal matches its neighbours; the tray's ink ground is not themed. */
  color: rgb(243,236,221);
}
.gd-tray-note[hidden] { display: none; }
.gd-tray-spacer { flex: 1; }
.gd-tray-btn {
  padding: 9px 18px;
  background: var(--clr-accent);
  border: 0;
  border-radius: var(--radius-pill);
  font-family: var(--font-ui);
  font-size: .8125rem;
  font-weight: 600;
  color: #F3ECDD;
  cursor: pointer;
}
.gd-tray-btn.is-ghost {
  padding: 9px 14px;
  background: transparent;
  border: 1px solid rgba(243,236,221,0.28);
  color: rgba(243,236,221,0.75);
}
.gd-tray-sheet {
  max-height: 58vh;
  overflow: auto;
  padding: 22px var(--space-6) 8px;
  border-bottom: 1px solid rgba(243,236,221,0.12);
}
.gd-tray-sheet[hidden] { display: none; }
.gd-tray-sheet-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.gd-tray-sheet-head .gu-eyebrow { color: #CC6B57; }
.gd-tray-sheet-head .gu-note { color: rgba(243,236,221,0.66); }
.gd-compare { width: 100%; border-collapse: collapse; min-width: 480px; }
.gd-compare th[scope="row"] {
  text-align: left;
  padding: 11px 12px 11px 0;
  border-bottom: 1px solid rgba(243,236,221,0.08);
  font-family: var(--font-ui);
  font-size: .65625rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(243,236,221,0.66);
  vertical-align: top;
  width: 150px;
}
/* Comparison-sheet header chips (built by guild.js — keep styles here, not
   inline in the script). */
.gd-compare-fam {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  color: #CC6B57;
}
.gd-compare-fam span {
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.gd-compare thead th {
  text-align: left;
  padding: 0 12px 12px 0;
  border-bottom: 1px solid rgba(243,236,221,0.24);
}
.gd-compare-name {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: 600;
  color: #F3ECDD;
}
.gd-compare td {
  padding: 11px 12px 11px 0;
  border-bottom: 1px solid rgba(243,236,221,0.08);
  font-family: var(--font-body);
  font-size: .90625rem;
  line-height: 1.5;
  color: rgba(243,236,221,0.86);
  vertical-align: top;
}

/* --------------------------------------------------------------------------
   Storefront
   -------------------------------------------------------------------------- */

/* .site-nav is position:fixed, so the first element on the page carries the
   offset itself — the same job .page-hero does with margin-top elsewhere.
   Without this the band sits under the nav and reads as a stray strip. */
.gs-band {
  margin-top: var(--nav-h);
  padding-block: var(--space-10);
  background: var(--clr-bg-warm);
  background-image: repeating-linear-gradient(180deg, transparent 0 15px, rgba(33,26,18,0.055) 15px 16px);
  border-bottom: 1px solid var(--clr-border);
}
.gs-band p {
  text-align: center;
  font-family: var(--font-ui);
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--clr-text-muted);
}
.gs-band-img { padding: 0; background-image: none; }
.gs-band-img img {
  display: block;
  width: 100%;
  max-height: 320px;
  object-fit: cover;
}

.gs-titlepage {
  max-width: 640px;
  margin-inline: auto;
  padding: var(--space-10) var(--space-8);
  text-align: center;
  background: var(--clr-surface);
  border: 1px solid var(--clr-primary);
  box-shadow: inset 0 0 0 1px var(--clr-surface), inset 0 0 0 2px rgba(33,26,18,0.22);
}
.gs-device {
  display: inline-grid;
  place-items: center;
  width: 84px; height: 84px;
  margin-bottom: var(--space-6);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-bg-warm);
  box-shadow: inset 0 0 0 1px var(--clr-surface), inset 0 0 0 2px rgba(33,26,18,0.1);
  overflow: hidden;
}
.gs-device-inner { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.gs-device-mono {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: .06em;
  line-height: 1;
  color: var(--clr-accent);
}
.gs-device-orn { font-family: var(--font-heading); font-size: .75rem; line-height: 1; color: var(--clr-accent); opacity: .7; }
.gs-device img { width: 100%; height: 100%; object-fit: cover; }
.gs-of {
  font-family: var(--font-ui);
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--clr-accent);
  margin-bottom: var(--space-4);
}
.gs-titlepage h1 {
  font-size: clamp(2rem, 4.4vw, 3.25rem);
  font-weight: 300;
  letter-spacing: -.025em;
  line-height: 1.05;
  margin-bottom: var(--space-4);
}
.gs-headline {
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-style: italic;
  line-height: 1.6;
  color: var(--clr-secondary);
  max-width: 46ch;
  margin-inline: auto;
  margin-bottom: var(--space-5);
}
.gs-rule { display: block; width: 44px; height: 1px; background: var(--clr-border); margin: 0 auto var(--space-5); }
.gs-imprint-line {
  font-family: var(--font-mono);
  font-size: .6875rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--clr-text-muted);
}

.gs-verdict {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-5);
  margin-top: var(--space-8);
}
.gs-verdict-rating { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.gs-verdict-n { font-family: var(--font-mono); font-size: .9375rem; color: var(--clr-primary); }
.gs-verdict-link { font-family: var(--font-ui); font-size: .8125rem; color: var(--clr-accent); text-underline-offset: 3px; }
.gs-newpill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  background: rgba(166,58,43,0.06);
  border: 1px solid var(--accent-border, rgba(166,58,43,0.3));
  border-radius: var(--radius);
  flex-wrap: wrap;
}
.gs-newpill .gu-fleuron { font-size: 1rem; }
.gs-newpill-k {
  font-family: var(--font-ui);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--clr-accent);
}
.gs-newpill-v { font-family: var(--font-body); font-size: .9375rem; color: var(--clr-secondary); }

.gs-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  border-top: 1px solid var(--clr-primary);
  border-bottom: 1px solid var(--clr-border);
}
.gs-meta > div { padding: var(--space-5) var(--space-5) var(--space-5) 0; border-right: 1px solid var(--gu-rule); }
.gs-meta dt {
  font-family: var(--font-ui);
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--clr-text-muted);
  margin-bottom: 6px;
}
.gs-meta dd { font-family: var(--font-body); font-size: 1rem; line-height: 1.5; color: var(--clr-text); }

.gs-columns { display: flex; flex-wrap: wrap; gap: var(--space-12); padding-block: var(--space-12) var(--space-16); }
.gs-main { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-16); }

.gs-section-intro {
  font-family: var(--font-body);
  font-size: .9375rem;
  color: var(--clr-secondary);
  max-width: 62ch;
}
.gs-h { margin-bottom: var(--space-2); }
.gs-h + .gs-section-intro { margin-bottom: var(--space-5); }

/* Imprint — credentials with dot leaders. */
.gs-creds { border-top: 1px solid var(--clr-primary); border-bottom: 1px solid var(--clr-primary); max-width: 60ch; }
.gs-cred {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 13px 4px;
  border-bottom: 1px solid var(--gu-rule-faint);
  text-decoration: none;
  color: inherit;
  transition: background-color var(--trans-fast);
}
.gs-cred:last-child { border-bottom: 0; }
.gs-cred:hover { background: rgba(33,26,18,0.04); }
.gs-cred:focus-visible { outline: 2px solid var(--clr-accent); outline-offset: -2px; }
.gs-cred-label { font-family: var(--font-ui); font-size: .875rem; font-weight: 600; color: var(--clr-primary); }
.gs-cred-leader {
  flex: 1;
  height: 1em;
  min-width: 24px;
  background-image: radial-gradient(circle, rgba(33,26,18,0.34) 0.8px, transparent 0.9px);
  background-size: 5px 1px;
  background-repeat: repeat-x;
  background-position: 0 bottom 0.28em;
}
.gs-cred-ev {
  font-family: var(--font-mono);
  font-size: .6875rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--clr-accent);
  white-space: nowrap;
}

/* About — with a drop cap. */
.gs-about { max-width: 64ch; }
.gs-about p { font-size: 1.0625rem; line-height: 1.8; color: var(--clr-text); margin-bottom: var(--space-5); }
.gs-about p:last-child { margin-bottom: 0; }
.gs-about > p:first-child::first-letter {
  float: left;
  font-family: var(--font-heading);
  font-size: 3.5rem;
  font-weight: 400;
  line-height: .8;
  padding: 5px 12px 0 0;
  color: var(--clr-primary);
}

/* Contents — numbered services. */
.gs-services { margin-top: var(--space-6); border-top: 2px solid var(--clr-primary); }
.gs-service {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  padding-block: var(--space-6);
  border-bottom: 1px solid var(--clr-border);
}
.gs-service-num {
  flex: none;
  width: 44px;
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 300;
  line-height: 1;
  color: var(--clr-accent);
  opacity: .85;
}
.gs-service-body { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start; }
.gs-service-body h3 { font-family: var(--font-heading); font-size: 1.375rem; font-weight: 600; line-height: 1.25; }
.gs-service-body p { font-family: var(--font-body); font-size: 1rem; line-height: 1.7; color: var(--clr-secondary); max-width: 56ch; }
.gs-service-aside { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.gs-service-price { font-family: var(--font-mono); font-size: 1rem; color: var(--clr-primary); }
.gs-service-cta { font-family: var(--font-ui); font-size: .8125rem; font-weight: 600; color: var(--clr-accent); text-underline-offset: 3px; }

/* Plates. */
.gs-plates { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--space-5); }
.gs-plate { display: flex; flex-direction: column; gap: var(--space-3); }
.gs-plate img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--clr-bg-warm);
  border: 1px solid var(--clr-border);
}
.gs-plate figcaption { display: flex; flex-direction: column; gap: 3px; }
.gs-plate-n {
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--clr-accent);
}
.gs-plate-cap { font-family: var(--font-body); font-size: .875rem; font-style: italic; line-height: 1.5; color: var(--clr-text-muted); }

/* Reviews — marginalia. */
.gs-reviews-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-6);
  padding-bottom: var(--space-6);
  border-bottom: 2px solid var(--clr-primary);
}
.gs-reviews-score { display: flex; align-items: baseline; gap: var(--space-3); }
.gs-reviews-n {
  font-family: var(--font-heading);
  font-size: 3rem;
  font-weight: 300;
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--clr-primary);
}
.gs-reviews-of { display: flex; flex-direction: column; gap: 5px; }
.gs-reviews-count { font-family: var(--font-mono); font-size: .75rem; color: var(--clr-text-muted); }
.gs-reviews-head p {
  flex: 1 1 280px;
  font-family: var(--font-body);
  font-size: .9375rem;
  line-height: 1.7;
  color: var(--clr-secondary);
  max-width: 52ch;
}
.gs-review { display: flex; flex-wrap: wrap; gap: var(--space-6); padding-block: var(--space-8); border-bottom: 1px solid var(--clr-border); }
.gs-review-rail {
  flex: 0 0 150px;
  min-width: 132px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding-right: var(--space-4);
  border-right: 1px solid var(--gu-rule);
}
.gs-review-who { font-family: var(--font-ui); font-size: .8125rem; font-weight: 600; color: var(--clr-primary); }
.gs-review-fam { font-family: var(--font-ui); font-size: .6875rem; color: var(--clr-text-muted); }
.gs-review-date { font-family: var(--font-mono); font-size: .6875rem; color: var(--clr-text-muted); }
.gs-review-seal { display: inline-flex; align-items: flex-start; gap: 6px; margin-top: 2px; }
.gs-review-seal svg { flex: none; color: var(--clr-success); margin-top: 1px; }
.gs-review-seal span {
  font-family: var(--font-ui);
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1.35;
  color: var(--clr-success);
}
.gs-review-body { flex: 1 1 320px; min-width: 0; }
.gs-review-body > p { font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.75; color: var(--clr-text); max-width: 60ch; }
.gs-reply {
  margin-top: var(--space-5);
  padding: var(--space-4) var(--space-5);
  background: var(--clr-bg-warm);
  border-left: 2px solid var(--clr-border);
  max-width: 56ch;
}
.gs-reply-k {
  display: block;
  font-family: var(--font-ui);
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--clr-text-muted);
  margin-bottom: var(--space-2);
}
.gs-reply p { font-family: var(--font-body); font-size: .9375rem; line-height: 1.7; color: var(--clr-secondary); }

.gs-noreviews { padding: var(--space-10) var(--space-8); background: var(--clr-surface); border: 1px solid var(--clr-border); text-align: center; }
.gs-noreviews .gu-fleuron { display: block; font-size: 1.5rem; opacity: .85; margin-bottom: var(--space-4); }
.gs-noreviews-lead {
  font-family: var(--font-heading);
  font-size: 1.375rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--clr-primary);
  max-width: 44ch;
  margin-inline: auto;
  margin-bottom: var(--space-4);
}
.gs-noreviews-sub { font-family: var(--font-body); font-size: .9375rem; line-height: 1.75; color: var(--clr-secondary); max-width: 56ch; margin-inline: auto; }
.gs-noreviews-actions { display: flex; justify-content: center; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-6); }

/* Commission rail. */
.gs-rail { flex: 0 1 320px; min-width: 280px; }
.gs-rail-inner {
  position: sticky;
  top: calc(var(--nav-h) + var(--space-6));
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-6);
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  box-shadow: var(--shadow-sm);
}
.gs-rail-k {
  display: block;
  font-family: var(--font-ui);
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--clr-accent);
  margin-bottom: var(--space-2);
}
.gs-rail-name { display: block; font-family: var(--font-heading); font-size: 1.375rem; font-weight: 600; line-height: 1.25; color: var(--clr-primary); }
.gs-rail-from {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-4);
  border-top: 1px solid var(--clr-border);
  border-bottom: 1px solid var(--clr-border);
}
.gs-rail-from dt { font-family: var(--font-ui); font-size: .8125rem; color: var(--clr-text-muted); }
.gs-rail-from dd { font-family: var(--font-mono); font-size: 1.125rem; color: var(--clr-primary); }
.gs-rail-open { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.gs-rail-note { font-family: var(--font-body); font-size: .875rem; line-height: 1.65; color: var(--clr-text-muted); }
.gs-rail-seal { display: flex; gap: var(--space-3); padding-top: var(--space-5); border-top: 1px solid var(--clr-border); }
.gs-rail-seal > svg { flex: none; color: var(--clr-success); margin-top: 2px; }
.gs-rail-seal-k {
  display: block;
  font-family: var(--font-ui);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--clr-secondary);
  margin-bottom: 4px;
}
.gs-rail-seal-v { display: block; font-family: var(--font-body); font-size: .875rem; line-height: 1.65; color: var(--clr-text-muted); }

/* The enquiry form. Server-rendered as the signed-out state; guild.js swaps
   in the composer when it finds a token, so the page never shows a box that
   cannot post. */
.gs-enquire { display: flex; flex-direction: column; gap: var(--space-3); }
.gs-enquire label { font-family: var(--font-ui); font-size: .6875rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--clr-text-muted); }
.gs-enquire select,
.gs-enquire textarea {
  width: 100%;
  padding: 10px 12px;
  font-family: var(--font-ui);
  font-size: .875rem;
  line-height: 1.5;
  color: var(--clr-primary);
  background: var(--clr-bg);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
}
.gs-enquire textarea { min-height: 110px; resize: vertical; font-family: var(--font-body); font-size: .9375rem; }
.gs-enquire select:focus-visible,
.gs-enquire textarea:focus-visible {
  border-color: var(--clr-accent);
  box-shadow: 0 0 0 3px rgba(166,58,43,0.35);
  outline: none;
}
.gs-enquire-msg { font-family: var(--font-ui); font-size: .8125rem; line-height: 1.5; }
.gs-enquire-msg.is-ok { color: var(--clr-success); }
.gs-enquire-msg.is-bad { color: var(--clr-fail); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  /* The filter strip stacks to three rows plus the dial on a phone — taller
     than a third of the viewport. Stuck, it hides the gathering heading you
     just scrolled to. It rides with the page here instead. */
  .gd-filters { position: static; }
  .gd-gathering { scroll-margin-top: var(--space-6); }
  .gd-register { scroll-margin-top: var(--space-6); }
  .gd-entry-plate { width: 108px; }
  .gd-fresh { padding: var(--space-6) var(--space-5) var(--space-3); }
  .gd-record-cell,
  .gs-meta > div { border-right: 0; border-bottom: 1px solid var(--gu-rule); }
  .gs-review-rail {
    flex: 1 1 100%;
    border-right: 0;
    border-bottom: 1px solid var(--gu-rule);
    padding-right: 0;
    padding-bottom: var(--space-3);
  }
  .gs-columns { gap: var(--space-10); }
  .gs-rail-inner { position: static; }
  .gd-tray-bar { padding: 11px var(--space-4) 13px; }
  .gd-tray-sheet { padding: 16px var(--space-4) 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .gd-thumb, .gd-dial-opt, .gd-pick, .gs-cred { transition: none; }
}