/**
 * Stable and Hoof — Halter Index
 *
 * Auction catalogue + studbook aesthetic. Type-led, lot-numbered, indexed.
 * Single saturated colour (oxblood) carries the brand. Off-white paper
 * surface, warm near-black ink. No cards, no shop-grid. Catalogue rules.
 *
 * See DESIGN.md (this brand's design direction) and PRODUCT.md (voice).
 *
 * Font load (Google Fonts): DM Serif Display (display) + Inter Tight (body) +
 * JetBrains Mono (lot numbers). Inter Tight, not Inter — Inter is banned in
 * the design rules.
 */

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Inter+Tight:ital,wght@0,300..700;1,300..700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ============================================================================
   TOKENS — OKLCH, see DESIGN.md
   ============================================================================ */
:root {
  /* Surface */
  --paper: oklch(97% 0.005 60);
  --paper-rule: oklch(89% 0.008 60);
  --paper-edge: oklch(93% 0.008 60);
  --inkblot: oklch(15% 0.008 30);

  /* Ink */
  --ink: oklch(20% 0.010 30);
  --ink-2: oklch(38% 0.015 30);
  --ink-3: oklch(56% 0.012 30);

  /* Brand colour — single accent */
  --oxblood: oklch(38% 0.130 22);
  --oxblood-deep: oklch(28% 0.130 22);

  /* Typography */
  --display: 'DM Serif Display', 'Recoleta', 'Cardinal', Georgia, serif;
  --body: 'Inter Tight', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;

  /* Type scale */
  --t-1: 0.8125rem;   /* 13 — metadata */
  --t-2: 0.9375rem;   /* 15 — body */
  --t-3: 1.125rem;    /* 18 — lead */
  --t-4: 1.375rem;    /* 22 — sub */
  --t-5: 2rem;        /* 32 — page H */
  --t-6: 3.5rem;      /* 56 — hero */
  --t-7: 5.5rem;      /* 88 — drenched feature */

  /* Legacy aliases (don't remove until pages migrate) */
  --primary: var(--ink);
  --accent: var(--oxblood);
  --surface: var(--paper);
  --muted: var(--ink-3);
  --bodyFont: 'Inter Tight';
  --displayFont: 'DM Serif Display';
}

/* ============================================================================
   RESET + BODY
   ============================================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--t-2);
  font-weight: 400;
  line-height: 1.55;
  font-feature-settings: 'ss01', 'cv11';
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Hairline paper-edge — vertical line at the left margin like a paper gutter */
body::before {
  content: '';
  position: fixed;
  inset: 0 auto 0 24px;
  width: 1px;
  background: var(--paper-rule);
  pointer-events: none;
  z-index: 1;
}
@media (max-width: 720px) {
  body::before { left: 12px; }
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
a:focus-visible {
  outline: 1px solid var(--oxblood);
  outline-offset: 4px;
}

/* ============================================================================
   TYPOGRAPHY
   ============================================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--display);
  font-weight: 400;
  font-style: italic;       /* italic IS the voice */
  color: var(--ink);
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0;
}

p { margin: 0 0 0.85em; max-width: 62ch; }

em { color: var(--ink); font-style: italic; }
strong { color: var(--ink); font-weight: 600; }

/* Lot number marker — used as ::before on rows, and as inline token */
.lot {
  font-family: var(--mono);
  font-size: var(--t-1);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}
.lot::before {
  content: '№ ';
  color: var(--ink-3);
}

/* Dimension / metadata label — uppercase mono, used for spec lines */
.spec {
  font-family: var(--mono);
  font-size: var(--t-1);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3);
}

/* ============================================================================
   LAYOUT — outer gutters, columns
   ============================================================================ */
.page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 56px 0 56px;
}
@media (max-width: 720px) {
  .page { padding: 0 24px 0 24px; }
}

.measure {
  max-width: 64ch;
}

.rule {
  border: 0;
  border-top: 1px solid var(--paper-rule);
  margin: 56px 0;
}

/* ============================================================================
   HERO — drenched, single italic word at scale
   ============================================================================ */
.hero {
  background: var(--inkblot);
  color: var(--paper);
  padding: 96px 56px 88px;
  position: relative;
  overflow: hidden;
}
@media (max-width: 720px) {
  .hero { padding: 56px 24px 48px; }
}

.hero-eyebrow {
  font-family: var(--mono);
  font-size: var(--t-1);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: oklch(70% 0.012 30);
  margin-bottom: 32px;
}

.hero-title {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.5rem, 7vw, var(--t-7));
  line-height: 0.96;
  letter-spacing: -0.025em;
  color: var(--paper);
  max-width: 12ch;
  margin: 0 0 32px;
}

.hero-sub {
  font-family: var(--body);
  font-size: var(--t-3);
  font-weight: 400;
  line-height: 1.5;
  color: oklch(82% 0.010 30);
  max-width: 50ch;
}

.hero-meta {
  font-family: var(--mono);
  font-size: var(--t-1);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: oklch(60% 0.010 30);
  margin-top: 56px;
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
}
.hero-meta span { display: inline-flex; gap: 8px; }
.hero-meta span::before {
  content: '№';
  color: var(--oxblood);
}

/* ============================================================================
   THE INDEX — replaces product cards. Lot-numbered catalogue rows.
   ============================================================================ */
.index {
  margin: 88px 0 88px;
}
.index-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--ink);
  margin-bottom: 0;
}
.index-head h2 {
  font-size: var(--t-4);
  font-style: italic;
}
.index-head .spec {
  align-self: end;
}

.index-row {
  display: grid;
  grid-template-columns: 56px 1fr auto 100px;
  align-items: baseline;
  gap: 24px;
  padding: 24px 0 24px;
  border-bottom: 1px solid var(--paper-rule);
  text-decoration: none;
  color: var(--ink);
  position: relative;
  transition: background-color 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.index-row:hover {
  background: oklch(95% 0.006 60);
}
.index-row::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 1px;
  width: 0;
  background: var(--oxblood);
  transition: width 240ms cubic-bezier(0.22, 1, 0.36, 1);
}
.index-row:hover::after { width: 100%; }

.index-row__lot {
  font-family: var(--mono);
  font-size: var(--t-1);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  align-self: center;
}
.index-row__lot::before { content: '№ '; }

.index-row__title {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--t-4);
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.index-row__desc {
  font-family: var(--body);
  font-size: var(--t-2);
  font-style: normal;
  font-weight: 400;
  color: var(--ink-2);
  line-height: 1.5;
  margin: 6px 0 0;
  max-width: 56ch;
}
.index-row__spec {
  font-family: var(--mono);
  font-size: var(--t-1);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3);
}
.index-row__price {
  font-family: var(--mono);
  font-size: var(--t-2);
  font-weight: 500;
  color: var(--ink);
  text-align: right;
  white-space: nowrap;
}
.index-row__price small {
  font-size: var(--t-1);
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: block;
  margin-bottom: 2px;
}

@media (max-width: 720px) {
  .index-row {
    grid-template-columns: 40px 1fr;
    grid-template-rows: auto auto auto;
    gap: 4px 16px;
  }
  .index-row__spec, .index-row__price {
    grid-column: 2 / -1;
    text-align: left;
  }
}

/* ============================================================================
   CTA — typed, not pilled. Underline-as-button.
   ============================================================================ */
.cta {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--t-4);
  color: var(--oxblood);
  text-decoration: none;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  position: relative;
}
.cta::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 1px;
  background: var(--oxblood);
}
.cta:hover { color: var(--oxblood-deep); }
.cta:hover::after { background: var(--oxblood-deep); height: 2px; bottom: -7px; }
.cta::before { content: '→'; font-family: var(--mono); font-style: normal; }

/* Legacy cta classes — keep working but restyle */
.cta-primary, .cta-secondary {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--t-4);
  color: var(--oxblood);
  text-decoration: none;
  background: transparent;
  border: 0;
  padding: 0;
  position: relative;
}
.cta-primary::after, .cta-secondary::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 1px;
  background: var(--oxblood);
}
.cta-primary:hover, .cta-secondary:hover { color: var(--oxblood-deep); }

/* ============================================================================
   STUDBOOK ENTRY — used on breed / persona / gift pages
   ============================================================================ */
.entry-head {
  padding: 64px 0 24px;
  border-bottom: 1px solid var(--ink);
}
.entry-head .lot { margin-bottom: 12px; display: block; }
.entry-head h1 {
  font-size: clamp(2rem, 5vw, var(--t-5));
  font-style: italic;
  margin: 0 0 16px;
}
.entry-head .entry-tagline {
  font-family: var(--body);
  font-size: var(--t-3);
  font-style: normal;
  color: var(--ink-2);
  max-width: 60ch;
}

.entry-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  padding: 56px 0;
}
.entry-body p { font-size: var(--t-2); line-height: 1.65; }
@media (max-width: 720px) {
  .entry-body { grid-template-columns: 1fr; gap: 24px; padding: 32px 0; }
}

/* ============================================================================
   LONG-FORM CONTENT — readable two-column not allowed (catalogue is dense)
   ============================================================================ */
.long-content {
  max-width: 62ch;
  margin: 56px auto;
  padding: 0 56px;
  font-size: var(--t-2);
  line-height: 1.65;
  color: var(--ink);
}
@media (max-width: 720px) {
  .long-content { padding: 0 24px; margin: 32px auto; }
}
.long-content .content-block { margin-bottom: 56px; }
.long-content h2 {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--t-4);
  margin: 0 0 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--paper-rule);
}
.long-content p { margin: 0 0 14px; }
.long-content ul { padding-left: 22px; margin: 0 0 14px; }
.long-content li { margin-bottom: 8px; }
.long-content a {
  color: var(--oxblood);
  text-decoration-thickness: 1px;
}
.long-content strong { color: var(--ink); font-weight: 600; }
.long-content em { color: var(--ink); font-style: italic; }

/* ============================================================================
   RELATED — kept as a styleless list with lot numbers
   ============================================================================ */
.breed-grid, .collection-grid, .persona-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0;
  border-top: 1px solid var(--paper-rule);
}
.breed-tile, .collection-tile, .persona-tile {
  display: block;
  padding: 16px 0;
  border-bottom: 1px solid var(--paper-rule);
  text-decoration: none;
  color: var(--ink);
  font-size: var(--t-2);
  position: relative;
}
.breed-tile::before, .collection-tile::before, .persona-tile::before {
  content: '→ ';
  color: var(--oxblood);
  margin-right: 6px;
}
.breed-tile:hover, .collection-tile:hover, .persona-tile:hover {
  color: var(--oxblood-deep);
}

.related-breeds, .related-collections, .other-personas {
  max-width: 1200px;
  margin: 88px auto;
  padding: 0 56px;
}
.related-breeds h2, .related-collections h2, .other-personas h2 {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--t-4);
  margin: 0 0 24px;
  text-align: left;
}
@media (max-width: 720px) {
  .related-breeds, .related-collections, .other-personas { padding: 0 24px; margin: 48px auto; }
}

/* ============================================================================
   BACKWARDS COMPAT — old class names still on some pages until rewrite
   ============================================================================ */
.products {
  display: block;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 56px;
}
.product-card {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: baseline;
  gap: 24px;
  padding: 24px 0;
  border: 0;
  border-bottom: 1px solid var(--paper-rule);
  background: transparent;
  border-radius: 0;
  text-decoration: none;
  color: var(--ink);
  position: relative;
  overflow: visible;
}
.product-card:hover {
  box-shadow: none;
  transform: none;
  background: oklch(95% 0.006 60);
}
.product-card img {
  grid-column: 3;
  grid-row: 1 / span 4;
  width: 120px;
  height: 90px;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 0;
}
.product-card-body { padding: 0; display: contents; }
.product-card-name {
  grid-column: 2;
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--t-4);
  margin: 0;
  color: var(--ink);
}
.product-card-desc {
  grid-column: 2;
  font-size: var(--t-2);
  color: var(--ink-2);
  opacity: 1;
  margin: 0;
  max-width: 56ch;
}
.product-card-price {
  grid-column: 2;
  font-family: var(--mono);
  font-size: var(--t-2);
  color: var(--ink);
  font-weight: 500;
}
@media (max-width: 720px) {
  .products { padding: 0 24px; }
  .product-card { grid-template-columns: 40px 1fr; gap: 4px 16px; }
  .product-card img { display: none; }
}

.section-heading {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--t-4);
  color: var(--ink);
  text-align: left;
  max-width: 1200px;
  margin: 64px auto 0;
  padding: 0 56px 12px;
  border-bottom: 1px solid var(--ink);
}
@media (max-width: 720px) {
  .section-heading { padding: 0 24px 12px; margin: 32px auto 0; }
}

.breed-hero-image, .gift-hero-image, .persona-hero-image, .cal-hero-image {
  max-width: 1200px;
  margin: 32px auto;
  padding: 0 56px;
}
.breed-hero-image img, .gift-hero-image img, .persona-hero-image img, .cal-hero-image img {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: 0;
  display: block;
}
@media (max-width: 720px) {
  .breed-hero-image, .gift-hero-image, .persona-hero-image, .cal-hero-image { padding: 0 24px; }
}

/* ============================================================================
   MOTION
   ============================================================================ */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    animation: reveal 480ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  @keyframes reveal {
    from { opacity: 0; filter: blur(4px); transform: translateY(4px); }
    to   { opacity: 1; filter: blur(0); transform: none; }
  }
}

/* ============================================================================
   MOBILE-FIRST UPLIFT (2026-06-02) — see docs/plans/2026-06-02-mobile-first-
   redesign-design.md. Fluid large type, no iOS zoom, coarse-pointer tap
   targets, thumb-first buy bar. Desktop pixels preserved: clamp upper bounds
   equal the prior fixed values, and touch rules are scoped to small viewports
   / coarse pointers (the Desktop-Chrome visual projects are pointer:fine).
   ============================================================================ */

/* Horizontal-scroll guard (a11y + visual-regression) + brand tap highlight. */
html { overflow-x: clip; scroll-behavior: smooth; }
body { -webkit-tap-highlight-color: oklch(38% 0.130 22 / 0.18); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Fluid large type: shrink on small screens, identical at/above the cap. */
:root {
  --t-5: clamp(1.5rem, 5.5vw, 2rem);
  --t-6: clamp(2.25rem, 8vw, 3.5rem);
  --t-7: clamp(2.75rem, 11vw, 5.5rem);
}

/* iOS Safari zooms when a focused field is < 16px. Force 16px on small
   screens for text-entry fields only (not buttons/radios). */
@media (max-width: 720px) {
  input:not([type='radio']):not([type='checkbox']):not([type='file']),
  select, textarea {
    font-size: 16px;
  }
}

/* Comfortable tap targets on touch devices. Scoped to coarse pointers so
   desktop-mouse rendering (and the visual-regression baselines) are untouched.
   Bare inline <a> ignore min-height, so only block/flex controls grow. */
@media (pointer: coarse) {
  nav a, footer a, .cta, .cta-primary, .cta-secondary, .buy-btn,
  button[type='submit'], summary, [role='button'] { min-height: 44px; }
  input:not([type='radio']):not([type='checkbox']), select, textarea { min-height: 48px; }
  .size-option label { min-height: 44px; display: inline-flex; align-items: center; }
}

/* ----------------------------------------------------------------------------
   Thumb-first buy bar — mobile only. Mirrors price from #price-display via a
   decoupled MutationObserver; the button only scrolls to the form, never
   submits, so it cannot affect the proven checkout JS. #buy-btn stays the sole
   submit control.
   ---------------------------------------------------------------------------- */
.buybar { display: none; }
@media (max-width: 720px) {
  .buybar {
    display: flex;
    align-items: center;
    gap: 14px;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 50;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: oklch(97% 0.005 60 / 0.96);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--ink);
  }
  .buybar-price {
    font-family: var(--mono);
    font-weight: 500;
    font-size: 1rem;
    color: var(--ink);
    white-space: nowrap;
  }
  .buybar-btn {
    margin-left: auto;
    flex: 1 1 auto;
    min-height: 50px;
    padding: 0 20px;
    font-family: var(--display);
    font-style: italic;
    font-size: 1.125rem;
    color: var(--paper);
    background: var(--oxblood);
    border: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
  }
  .buybar-btn::after { content: '→'; font-family: var(--mono); font-style: normal; }
  .buybar-btn:active { background: var(--oxblood-deep); }
  /* Keep the footer/content clear of the fixed bar. */
  body:has(.buybar) { padding-bottom: 78px; }
}

/* ============================================================================
   VISUAL-LED CATALOGUE (2026-06-03) — image-forward browse cards.
   The image leads; brand type stays (serif names, mono lot chip, oxblood).
   Used by home, products, breeds, gifts, for/persona indexes.
   ============================================================================ */
.cat {
  max-width: 1200px;
  margin: 0 auto 96px;
  padding: 0 56px;
}
.cat-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 0 0 16px;
  margin-bottom: 36px;
  border-bottom: 1px solid var(--ink);
}
.cat-head h2 { font-size: var(--t-4); font-style: italic; }

.cat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px 32px;
}

.cat-card {
  display: block;
  text-decoration: none;
  color: var(--ink);
}
.cat-card__frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--paper-edge);
  border: 1px solid var(--paper-rule);
}
.cat-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.cat-card:hover .cat-card__img { transform: scale(1.04); }

.cat-card__lot {
  position: absolute;
  top: 12px;
  left: 12px;
  font-family: var(--mono);
  font-size: var(--t-1);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--paper);
  background: oklch(15% 0.008 30 / 0.55);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  padding: 2px 8px;
}

.cat-card__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 2px 0;
}
.cat-card__name {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--t-4);
  line-height: 1.1;
  letter-spacing: -0.01em;
  position: relative;
}
.cat-card__name::after {
  content: '';
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -3px;
  height: 1px;
  background: var(--oxblood);
  transition: right 280ms cubic-bezier(0.22, 1, 0.36, 1);
}
.cat-card:hover .cat-card__name::after { right: 0; }

.cat-card__price {
  font-family: var(--mono);
  font-size: var(--t-2);
  font-weight: 500;
  white-space: nowrap;
  color: var(--ink);
  text-align: right;
}
.cat-card__price small {
  display: block;
  font-size: var(--t-1);
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.cat-card__desc {
  font-family: var(--body);
  font-size: var(--t-2);
  color: var(--ink-2);
  line-height: 1.5;
  margin: 8px 2px 0;
  max-width: 42ch;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

/* Collage detail-page hero (visual-led parity with other product pages). */
.collage-hero {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--paper-rule);
  margin: 0 0 36px;
}

@media (max-width: 900px) {
  .cat-grid { grid-template-columns: repeat(2, 1fr); gap: 36px 24px; }
}
@media (max-width: 560px) {
  .cat { padding: 0 24px; margin-bottom: 56px; }
  .cat-grid { grid-template-columns: 1fr; gap: 32px; }
  .cat-card__frame { aspect-ratio: 4 / 3; }
}