/* Source D'Amour component library v1
   Reads tokens.css. Every class here is specified in brand/sda-design-legend-v1.md.
   Banned at the class level: gradients, pill radii, hover scale over 1.05,
   boxed text content, emoji chips, autoplay anything. */

/* ---------- Base ---------- */
.sda body, .sda {
  background: var(--sda-paper);
  color: var(--sda-ink);
  font-family: var(--sda-sans);
  font-size: var(--sda-body);
  line-height: var(--sda-lh-body);
}
.sda .prose { font-family: var(--sda-serif); max-width: var(--sda-measure); }
.sda h1, .sda h2, .sda h3 { font-family: var(--sda-serif); font-weight: 600; margin: 0; text-wrap: balance; }
.sda h1 { font-size: var(--sda-h1); line-height: var(--sda-lh-h1); letter-spacing: var(--sda-ls-h1); }
.sda h2 { font-size: var(--sda-h2); line-height: var(--sda-lh-h2); letter-spacing: var(--sda-ls-h2); }
.sda h3 { font-size: var(--sda-h3); line-height: var(--sda-lh-h3); }
.sda :focus-visible { outline: var(--sda-focus); outline-offset: var(--sda-focus-offset); }

/* ---------- Buttons (4 tiers; color moves, size never does) ---------- */
.sda-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: var(--sda-btn-h); padding: 0 1.7rem;
  font-family: var(--sda-sans); font-weight: 500; font-size: 0.95rem;
  letter-spacing: 0.02em; text-decoration: none; cursor: pointer;
  border-radius: var(--sda-radius);
  transition: background-color var(--sda-t-press) ease-out,
              border-color var(--sda-t-press) ease-out,
              color var(--sda-t-press) ease-out;
}
.sda-btn:active { transform: translateY(1px); }
.sda-btn--primary { background: var(--sda-ink); color: var(--sda-paper); border: 1px solid var(--sda-ink); }
.sda-btn--primary:hover { background: var(--sda-oxblood); border-color: var(--sda-oxblood); }
.sda-btn--secondary { background: transparent; color: var(--sda-ink); border: 1px solid var(--sda-ink); }
.sda-btn--secondary:hover { background: var(--sda-ink); color: var(--sda-paper); }
.sda-btn--small { height: var(--sda-btn-h-small); padding: 0 1.2rem; font-size: 0.88rem; }
.sda-btn--night { background: transparent; color: var(--sda-night-ink); border: 1px solid var(--sda-night-ink); }
.sda-btn--night:hover { background: var(--sda-night-ink); color: var(--sda-night); }
/* Tertiary: accent text link with offset underline */
.sda-link-tertiary {
  color: var(--sda-verdigris); font-weight: 500; text-decoration: none;
  border-bottom: 1px solid transparent; transition: border-color var(--sda-t-press) ease-out;
}
.sda-link-tertiary:hover { border-bottom-color: var(--sda-verdigris); }
/* Inline text link: underline draws in from the left */
.sda-link {
  color: inherit; text-decoration: none;
  background-image: linear-gradient(var(--sda-verdigris), var(--sda-verdigris));
  background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 1px;
  transition: background-size var(--sda-t-link) ease-out;
}
.sda-link:hover { background-size: 100% 1px; }

/* ---------- Photo frame (the cardinal rule: contain, never distort/crop) ---------- */
.sda-frame {
  aspect-ratio: var(--sda-frame-ratio);
  background: var(--sda-panel);
  border: var(--sda-hairline);
  box-shadow: var(--sda-mat-shadow);
  overflow: hidden;
  display: block;
}
.sda-frame > img { width: 100%; height: 100%; object-fit: contain; display: block; }
.sda-frame--night { background: var(--sda-night); }   /* featured/editorial variant */
.sda-frame--square { aspect-ratio: 1 / 1; }
/* Editorial slots ONLY (human-picked crop): */
.sda-frame--cover > img { object-fit: cover; }

/* ---------- Product card ---------- */
.sda-card { display: flex; flex-direction: column; gap: 0.65rem; text-decoration: none; color: inherit; }
.sda-card .sda-frame { position: relative; }
.sda-card__name { font-family: var(--sda-serif); font-weight: 600; font-size: 1.02rem; line-height: 1.3; }
.sda-card__stone { font-family: var(--sda-sans); font-size: 0.82rem; color: var(--sda-ink-soft); }
.sda-card__row { display: flex; justify-content: space-between; align-items: baseline; margin-top: 0.3rem; }
.sda-price { font-family: var(--sda-sans); font-variant-numeric: tabular-nums lining-nums; font-size: 1rem; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .sda-card .sda-frame > img {
    transition: transform var(--sda-t-hover-in) var(--sda-ease-lift),
                filter var(--sda-t-hover-in) var(--sda-ease-lift);
  }
  .sda-card:hover .sda-frame > img {
    transform: scale(1.025); filter: brightness(1.03) contrast(1.02);
    transition-duration: var(--sda-t-hover-out);
  }
  /* House move when an alternate photo exists: crossfade beats any transform */
  .sda-card .sda-frame > img.alt { position: absolute; inset: 0; opacity: 0; transition: opacity 450ms ease; }
  .sda-card:hover .sda-frame > img.alt { opacity: 1; }
}

/* ---------- Chips (stamped, hairline, one per card max, no emoji) ---------- */
.sda-chip {
  display: inline-block; padding: 0.18rem 0.55rem;
  font-family: var(--sda-sans); font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  border: 1px solid currentColor; border-radius: var(--sda-radius);
  background: transparent;
}
.sda-chip--sold { color: var(--sda-oxblood); }
.sda-chip--hold { color: var(--sda-verdigris); }
.sda-chip--new { color: var(--sda-ink); }
.sda-chip--new::before { content: ""; display: inline-block; width: 5px; height: 5px;
  border-radius: 50%; background: currentColor; margin-right: 0.4rem; vertical-align: 1px; }
.sda-chip--mine { color: var(--sda-verdigris); font-variant: small-caps; text-transform: none; letter-spacing: 0.06em; }
.sda-card .sda-chip { position: absolute; top: 0.6rem; left: 0.6rem; background: var(--sda-paper); }

/* ---------- Forms ---------- */
.sda-field { display: flex; flex-direction: column; gap: 0.35rem; }
.sda-field label { font-family: var(--sda-sans); font-size: var(--sda-label);
  font-weight: 500; letter-spacing: var(--sda-ls-label); text-transform: uppercase; color: var(--sda-ink-soft); }
.sda-input, .sda-textarea, .sda-select {
  font-family: var(--sda-sans); font-size: 1rem; color: var(--sda-ink);
  background: var(--sda-paper); border: 1px solid var(--sda-wood-line);
  border-radius: var(--sda-radius); padding: 0.7rem 0.9rem;
}
.sda-input:focus, .sda-textarea:focus, .sda-select:focus { outline: var(--sda-focus); outline-offset: 1px; }
.sda-field--error .sda-input { border-color: var(--sda-oxblood); }
.sda-field__error { font-size: var(--sda-caption); color: var(--sda-oxblood); }
.sda-field__ok { font-size: var(--sda-caption); color: var(--sda-verdigris); }
.sda-reassure { font-family: var(--sda-serif); font-style: italic; font-size: var(--sda-caption); color: var(--sda-ink-soft); }

/* ---------- Section furniture ---------- */
.sda-eyebrow { font-family: var(--sda-sans); font-size: var(--sda-label); font-weight: 500;
  letter-spacing: var(--sda-ls-label); text-transform: uppercase; color: var(--sda-verdigris); margin: 0 0 1rem; }
.sda-rule { border: 0; border-top: var(--sda-rule); margin: var(--sda-space-5) 0; }
.sda-fleuron { display: flex; justify-content: center; margin: var(--sda-space-5) 0; }
.sda-fleuron svg, .sda-fleuron img { width: 22px; opacity: 0.4; }  /* the enso, once per page max */
.sda-caption { font-family: var(--sda-serif); font-style: italic;
  font-size: var(--sda-caption); line-height: var(--sda-lh-caption); color: var(--sda-ink-soft); }
.sda-pullquote { font-family: var(--sda-serif); font-size: var(--sda-h3); line-height: 1.35;
  max-width: var(--sda-measure-lead); border-left: 2px solid var(--sda-verdigris); padding-left: 1.2rem; }
/* Provenance dossier (piece pages): the auction-catalog block */
.sda-dossier { border-top: var(--sda-rule); border-bottom: var(--sda-rule);
  padding: 1rem 0; font-family: var(--sda-serif); font-size: var(--sda-small);
  font-feature-settings: "onum"; }
.sda-dossier dt { font-family: var(--sda-sans); font-size: var(--sda-label); letter-spacing: var(--sda-ls-label);
  text-transform: uppercase; color: var(--sda-ink-soft); }
.sda-dossier dd { margin: 0.1rem 0 0.7rem; }

/* ---------- Scroll reveal (rationed: story blocks + grid containers only) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .sda-reveal { opacity: 0; transform: translateY(14px); }
  .sda-reveal.is-in { opacity: 1; transform: none;
    transition: opacity var(--sda-t-reveal) var(--sda-ease-settle),
                transform var(--sda-t-reveal) var(--sda-ease-settle); }
}

/* ---------- The signature moment (enso settles in, once per session) ----------
   True stroke draw-on needs a stroked centerline asset (future). Until then:
   a conic wipe that follows the circle reads as the mark being drawn. */
@media (prefers-reduced-motion: no-preference) {
  .sda-mark-draw { animation: sda-mark-wipe var(--sda-t-mark) ease-out both; }
  @supports (mask: conic-gradient(#000 50%, transparent 0)) {
    .sda-mark-draw { animation: sda-mark-sweep var(--sda-t-mark) ease-out both; }
  }
  @keyframes sda-mark-wipe { from { opacity: 0; transform: scale(1.05); } to { opacity: 1; transform: none; } }
  @keyframes sda-mark-sweep {
    from { mask: conic-gradient(from -80deg, #000 0deg, transparent 2deg); }
    30%  { mask: conic-gradient(from -80deg, #000 108deg, transparent 110deg); }
    to   { mask: conic-gradient(from -80deg, #000 360deg, transparent 360deg); }
  }
}