/* Kind Regards — shared page chrome styles (site-wide, on top of DS tokens). */
html { scroll-behavior: smooth; }
body { background: var(--paper); margin: 0; }

a { color: var(--bronze); text-decoration: none; transition: color var(--duration) var(--ease); }
a:hover { color: var(--ink); }

::selection { background: var(--bronze); color: var(--ink-on-bronze); }

/* scroll-reveal */
.kr-reveal { opacity: 0; transform: translateY(14px); transition: opacity 550ms var(--ease), transform 550ms var(--ease); }
.kr-reveal.kr-in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .kr-reveal { transition: none; }
}

/* product card polish: quiet image lift on hover, never on the card border/shadow */
.kr-card-hover { overflow: hidden; }
.kr-card-hover img { transition: transform 500ms var(--ease); }
.kr-card-hover:hover img { transform: scale(1.025); }

/* letterhead loading veil for route-feel transitions */
.kr-veil { position: fixed; inset: 0; background: var(--paper); z-index: 10000; pointer-events: none; opacity: 0; transition: opacity 260ms var(--ease); }
.kr-veil.on { opacity: 1; pointer-events: all; }

.kr-skip { position: absolute; left: -9999px; }

/* shared across pages */
.kk { font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--bronze); }

.empty-stage { min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 22px; padding: clamp(40px,6vw,90px) clamp(18px,4vw,48px); }
.empty-stage h1 { font-style: italic; font-weight: 400; font-family: var(--font-serif); font-size: clamp(26px,3.4vw,38px); margin: 0; max-width: 20ch; }
.empty-stage a { text-decoration: none; }

/* product-card grids (Home feature grid + PLP grid): keep every card the same
   footprint regardless of the source photo's own aspect ratio/orientation —
   the DS ProductCard only constrains image height, so a wide/landscape photo
   can otherwise overflow its box width. */
.kr-card-hover img { max-width: 100%; max-height: 90% !important; min-height: 0; min-width: 0; }
.kr-card-hover > div > div:first-child { min-height: 0; min-width: 0; }
.kr-card-hover > div { height: 100%; display: flex; flex-direction: column; }
.kr-card-hover > div > div:last-child > span:first-child {
  display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}