/* ==========================================================================
   PAGES — layout blocks specific to individual page types.
   Anything reused across three or more pages belongs in components.css.

   CONTENTS
     1. Home — hero
     2. Home — editorial intro
     3. Home — collections showcase
     4. Home — stats band
     5. Home — applications mosaic
     6. Home — map / global reach
     7. Collections & products listing
     8. Product detail
     9. About
    10. Contact
    11. Blog
    12. Utility pages (404, search, sitemap)
   ========================================================================== */


/* ==========================================================================
   1. HOME — HERO
   Full-bleed image, dark scrim, copy anchored bottom-left. The stat strip
   sits on the hero's lower edge so the first screen carries proof, not just
   a headline.
   ========================================================================== */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(560px, 88vh, 900px);
  padding-block: var(--space-24) 0;
  background-color: var(--hm-ink-900);
  overflow: hidden;
  isolation: isolate;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Slow drift gives the still image life without a video payload */
  animation: hero-drift 26s var(--ease-in-out) infinite alternate;
}

@keyframes hero-drift {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to   { transform: scale(1.12) translate3d(-1.5%, -1%, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__bg img { animation: none; transform: scale(1.04); }
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--scrim-hero);
}

.hero__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  max-width: 62ch;
  padding-block-end: var(--space-16);
}

.hero__title {
  font-size: var(--text-display-xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: #fff;
  text-wrap: balance;
}

/* The second line sits in light italic — the single most characterful
   typographic move on the page, and the reason Fraunces was chosen. */
.hero__title em {
  display: block;
  font-style: italic;
  font-weight: var(--fw-light);
  color: var(--hm-brass-200);
}

.hero__text {
  font-size: var(--text-lead);
  line-height: var(--lh-relaxed);
  color: rgba(255, 255, 255, 0.84);
  max-width: 54ch;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

.hero .t-eyebrow { color: var(--hm-brass-200); }
.hero .t-eyebrow::before { background-color: var(--hm-brass-500); }

/* Stat strip along the hero base */
.hero__stats {
  position: relative;
  border-block-start: var(--border-hairline) solid rgba(255, 255, 255, 0.18);
  background: rgba(20, 16, 15, 0.42);
  backdrop-filter: blur(8px);
}

.hero__stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-6);
  padding-block: var(--space-8);
}

.hero__stats-grid > * + * {
  padding-inline-start: var(--space-8);
  border-inline-start: var(--border-hairline) solid rgba(255, 255, 255, 0.18);
}

@media (max-width: 767px) {
  .hero { min-height: 620px; }
  .hero__stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
  .hero__stats-grid > * + * { padding-inline-start: 0; border-inline-start: none; }
  .hero__stats-grid > :nth-child(n + 3) { padding-block-start: var(--space-5); border-block-start: var(--border-hairline) solid rgba(255,255,255,.18); }
}

/* Scroll cue */
/* Right-aligned so it never collides with the left-anchored hero copy */
.hero__cue {
  position: absolute;
  right: var(--gutter);
  bottom: calc(100% + var(--space-6));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-label);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: rgba(255, 255, 255, 0.6);
}

.hero__cue::after {
  content: "";
  width: 1px;
  height: 40px;
  background: linear-gradient(180deg, rgba(255,255,255,.6), transparent);
  animation: cue-pulse 2.4s var(--ease-in-out) infinite;
}

@keyframes cue-pulse {
  0%, 100% { opacity: .3; transform: scaleY(.6); transform-origin: top; }
  50%      { opacity: 1;  transform: scaleY(1);  transform-origin: top; }
}

@media (max-width: 1023px) { .hero__cue { display: none; } }


/* ==========================================================================
   2. HOME — EDITORIAL INTRO
   Asymmetric split with an offset image stack. The overlap is what makes it
   read as designed rather than assembled.
   ========================================================================== */

.editorial {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: center;
}

.editorial--reverse { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.editorial--reverse .editorial__media { order: -1; }

.editorial__body { display: flex; flex-direction: column; gap: var(--space-5); }

.editorial__media { position: relative; }

.editorial__media img {
  width: 100%;
  border-radius: var(--radius-lg);
}

/* Offset secondary image — hidden below lg where it would crowd */
.editorial__media-inset {
  position: absolute;
  right: calc(var(--space-10) * -1);
  bottom: calc(var(--space-10) * -1);
  width: 46%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 6px solid var(--color-bg);
  box-shadow: var(--shadow-lg);
}

.editorial__media-inset img { border-radius: 0; }

/* Brass accent rule behind the media, offset like a printer's registration */
.editorial__media::before {
  content: "";
  position: absolute;
  left: calc(var(--space-8) * -1);
  top: calc(var(--space-8) * -1);
  width: 42%;
  height: 42%;
  border-inline-start: var(--border-hairline) solid var(--color-rule-accent);
  border-block-start: var(--border-hairline) solid var(--color-rule-accent);
  border-start-start-radius: var(--radius-lg);
  z-index: -1;
}

@media (max-width: 1023px) {
  .editorial,
  .editorial--reverse { grid-template-columns: minmax(0, 1fr); }
  .editorial--reverse .editorial__media { order: 0; }
  .editorial__media-inset { display: none; }
  .editorial__media::before { display: none; }
}

.editorial__signature {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-block-start: var(--space-5);
  border-block-start: var(--border-hairline) solid var(--color-border);
}


/* ==========================================================================
   3. HOME — COLLECTIONS SHOWCASE
   Three tiles; the first is taller so the row has a deliberate rhythm rather
   than three identical boxes.
   ========================================================================== */

.collections-showcase {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
  align-items: stretch;
}

.collections-showcase > :first-child { grid-row: span 2; }
.collections-showcase > :first-child .collection-card { aspect-ratio: auto; height: 100%; min-height: 420px; }

@media (max-width: 899px) {
  .collections-showcase { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .collections-showcase > :first-child { grid-row: span 1; grid-column: span 2; }
  .collections-showcase > :first-child .collection-card { min-height: 320px; aspect-ratio: var(--ratio-landscape); }
}

@media (max-width: 559px) {
  .collections-showcase { grid-template-columns: minmax(0, 1fr); }
  .collections-showcase > :first-child { grid-column: span 1; }
}


/* ==========================================================================
   4. HOME — STATS BAND
   ========================================================================== */

.stats-band {
  background:
    radial-gradient(70% 140% at 15% 0%, rgba(126, 34, 51, .55), transparent 60%),
    var(--hm-ink-900);
  color: var(--color-text-inverse);
}


/* ==========================================================================
   5. HOME — APPLICATIONS MOSAIC
   ========================================================================== */

.app-mosaic {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 200px;
  gap: var(--grid-gap);
}

.app-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-6);
  overflow: hidden;
  border-radius: var(--radius-lg);
  background-color: var(--hm-ink-800);
  color: #fff;
  text-decoration: none;
  isolation: isolate;
}

.app-tile img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-image) var(--ease-out);
}

.app-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--scrim-ink);
  transition: opacity var(--duration-base) var(--ease-out);
}

.app-tile:hover img { transform: scale(1.06); }
.app-tile:hover { color: #fff; }

.app-tile__title {
  font-family: var(--font-display);
  font-variation-settings: var(--font-display-settings);
  font-size: var(--text-h4);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-snug);
  color: #fff;
}

.app-tile__text {
  font-size: var(--text-caption);
  color: rgba(255, 255, 255, 0.78);
  max-width: 34ch;
  margin-block-start: var(--space-1);
}

.app-tile--lg { grid-column: span 2; grid-row: span 2; }
.app-tile--wide { grid-column: span 2; }

@media (max-width: 899px) {
  .app-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 180px; }
  .app-tile--lg { grid-column: span 2; grid-row: span 1; }
}

@media (max-width: 559px) {
  .app-mosaic { grid-template-columns: minmax(0, 1fr); }
  .app-tile--lg, .app-tile--wide { grid-column: span 1; }
}


/* ==========================================================================
   6. HOME — GLOBAL REACH
   ========================================================================== */

.reach {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}

@media (max-width: 899px) { .reach { grid-template-columns: minmax(0, 1fr); } }

.reach__regions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
}

.reach__region {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-block-start: var(--space-4);
  border-block-start: var(--border-hairline) solid var(--color-border-inverse);
}

.reach__region-name {
  font-size: var(--text-body-sm);
  font-weight: var(--fw-semibold);
  color: #fff;
}

.reach__region-list {
  font-size: var(--text-caption);
  color: rgba(251, 249, 247, 0.6);
}

@media (max-width: 479px) { .reach__regions { grid-template-columns: minmax(0, 1fr); } }


/* ==========================================================================
   7. COLLECTIONS & PRODUCTS LISTING
   ========================================================================== */

.listing-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 3vw, 3.5rem);
  align-items: start;
}

@media (max-width: 1023px) {
  .listing-layout { grid-template-columns: minmax(0, 1fr); }
}

.listing-sidebar {
  position: sticky;
  top: calc(var(--header-height) + var(--space-6));
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

@media (max-width: 1023px) {
  .listing-sidebar { position: static; }
}

.facet { display: flex; flex-direction: column; gap: var(--space-3); }

.facet__title {
  font-size: var(--text-label);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--color-text-muted);
  padding-block-end: var(--space-3);
  border-block-end: var(--border-hairline) solid var(--color-border);
}

.facet__options { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* Vertical facet list for the sidebar */
.facet--stacked .facet__options { flex-direction: column; gap: 0; }

.facet--stacked .tag {
  border: none;
  border-radius: 0;
  background: none;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-3) 0;
  border-block-end: var(--border-hairline) solid var(--color-border-subtle);
}

.facet--stacked .tag:hover { background: none; padding-inline-start: var(--space-2); }

.facet--stacked .tag.is-active,
.facet--stacked .tag[aria-pressed="true"] {
  background: none;
  color: var(--color-primary);
  font-weight: var(--fw-semibold);
}

.facet--stacked .tag.is-active .tag__count { color: var(--color-accent); }

/* Sticky enquiry card in the sidebar */
.sidebar-cta {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  background-color: var(--color-primary-deep);
  color: var(--color-text-inverse);
  border-radius: var(--radius-lg);
}

.sidebar-cta__title {
  font-size: var(--text-h5);
  font-weight: var(--fw-semibold);
  color: #fff;
}

.sidebar-cta__text {
  font-size: var(--text-caption);
  color: rgba(255, 255, 255, 0.74);
  max-width: none;
}

/* Shade swatch dots next to filter labels */
.swatch {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex: none;
  border: 1px solid rgba(0, 0, 0, .15);
}

.swatch--white       { background: #f2efe9; }
.swatch--black       { background: #1c1a19; }
.swatch--beige-cream { background: #ddcbae; }
.swatch--grey        { background: #a5a3a0; }
.swatch--brown       { background: #6f4c33; }
.swatch--blue        { background: #4a6b8a; }
.swatch--green       { background: #5c7355; }
.swatch--red-pink    { background: #9c5261; }
.swatch--gold-yellow { background: #c9a63e; }
.swatch--multicolour { background: linear-gradient(135deg, #b9a48b 0%, #7d8a91 50%, #9c7d6a 100%); }


/* ==========================================================================
   8. PRODUCT DETAIL
   ========================================================================== */

.product-detail {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: start;
}

@media (max-width: 899px) {
  .product-detail { grid-template-columns: minmax(0, 1fr); }
}

/* --- Gallery --- */
.product-gallery { display: flex; flex-direction: column; gap: var(--space-4); }

.product-gallery__main {
  position: relative;
  display: block;
  aspect-ratio: var(--ratio-square);
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: var(--border-hairline) solid var(--color-border-subtle);
  background-color: var(--color-surface-muted);
  cursor: zoom-in;
}

.product-gallery__main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}

.product-gallery__main:hover img { transform: scale(1.04); }

.product-gallery__zoom {
  position: absolute;
  right: var(--space-4);
  bottom: var(--space-4);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background-color: rgba(255, 255, 255, 0.94);
  color: var(--hm-ink-800);
  border-radius: var(--radius-pill);
  font-size: var(--text-caption);
  font-weight: var(--fw-semibold);
  box-shadow: var(--shadow-sm);
  pointer-events: none;
}

.product-gallery__zoom svg { width: 15px; height: 15px; }

.product-gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: var(--space-3);
}

.product-gallery__thumb {
  aspect-ratio: var(--ratio-square);
  overflow: hidden;
  border-radius: var(--radius-sm);
  border: var(--border-thick) solid transparent;
  background-color: var(--color-surface-muted);
  padding: 0;
  transition: var(--transition-base);
}

.product-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.product-gallery__thumb:hover { border-color: var(--color-border-strong); }
.product-gallery__thumb.is-active { border-color: var(--color-primary); }

/* --- Info column --- */
.product-info {
  position: sticky;
  top: calc(var(--header-height) + var(--space-6));
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

@media (max-width: 899px) { .product-info { position: static; } }

.product-info__title {
  font-size: var(--text-h1);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-display);
}

.product-info__meta { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.product-info__text {
  font-size: var(--text-body-sm);
  line-height: var(--lh-relaxed);
  color: var(--color-text-secondary);
}

.product-info__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding-block: var(--space-5);
  border-block: var(--border-hairline) solid var(--color-border);
}

/* Option pills (finishes, thicknesses) — display only, no ecommerce */
.option-group { display: flex; flex-direction: column; gap: var(--space-3); }

.option-group__label {
  font-size: var(--text-label);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--color-text-muted);
}

.option-group__items { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.option-pill {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-caption);
  font-weight: var(--fw-medium);
  color: var(--color-text-secondary);
  background-color: var(--color-surface);
  border: var(--border-hairline) solid var(--color-border);
  border-radius: var(--radius-sm);
}

/* Trust strip under the actions */
.product-assurance {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  padding: var(--space-5);
  background-color: var(--color-surface-sunken);
  border-radius: var(--radius-lg);
}

.product-assurance__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-caption);
  color: var(--color-text-secondary);
}

.product-assurance__item svg {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--color-accent);
  margin-block-start: 1px;
}

@media (max-width: 479px) { .product-assurance { grid-template-columns: minmax(0, 1fr); } }


/* ==========================================================================
   9. ABOUT
   ========================================================================== */

.about-lead {
  font-family: var(--font-display);
  font-variation-settings: var(--font-display-settings);
  font-size: var(--text-h3);
  font-weight: var(--fw-light);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
  color: var(--color-text);
  max-width: 32ch;
}

.about-body { display: flex; flex-direction: column; gap: var(--space-5); }
.about-body p { font-size: var(--text-body-lg); line-height: var(--lh-relaxed); color: var(--color-text-secondary); }

.about-split {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(2rem, 1rem + 4vw, 5rem);
}

@media (max-width: 899px) {
  .about-split { grid-template-columns: minmax(0, 1fr); }
  .about-lead { max-width: none; }
}


/* ==========================================================================
   10. CONTACT
   ========================================================================== */

.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: start;
}

@media (max-width: 899px) { .contact-layout { grid-template-columns: minmax(0, 1fr); } }

.contact-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  background-color: var(--color-surface);
  border: var(--border-hairline) solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
}

.contact-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  background-color: var(--color-primary-deep);
  color: var(--color-text-inverse);
  border-radius: var(--radius-lg);
}

.contact-card__row {
  display: flex;
  gap: var(--space-4);
  padding-block-end: var(--space-5);
  border-block-end: var(--border-hairline) solid rgba(255, 255, 255, 0.14);
}

.contact-card__row:last-child { border-block-end: none; padding-block-end: 0; }

.contact-card__icon {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background-color: rgba(255, 255, 255, 0.09);
  border-radius: var(--radius-sm);
  color: var(--hm-brass-200);
}

.contact-card__icon svg { width: 19px; height: 19px; }

.contact-card__label {
  font-size: var(--text-label);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: rgba(255, 255, 255, 0.5);
  margin-block-end: 3px;
}

.contact-card__value {
  font-size: var(--text-body-sm);
  color: #fff;
  font-style: normal;
  line-height: var(--lh-body);
}

.contact-card__value a { color: #fff; text-decoration: none; }
.contact-card__value a:hover { color: var(--hm-brass-200); }

/* Map */
.map-embed {
  width: 100%;
  aspect-ratio: var(--ratio-wide);
  border: 0;
  border-radius: var(--radius-lg);
  background-color: var(--color-surface-muted);
  display: block;
}

.map-embed--flush { border-radius: 0; aspect-ratio: 21 / 7; }

@media (max-width: 767px) {
  .map-embed, .map-embed--flush { aspect-ratio: 4 / 3; }
}


/* ==========================================================================
   11. BLOG
   ========================================================================== */

.article {
  max-width: var(--container-narrow);
  margin-inline: auto;
}

.article__body > * + * { margin-block-start: var(--space-6); }

.article__body h2 {
  font-size: var(--text-h3);
  margin-block-start: var(--space-12);
}

.article__body h3 {
  font-size: var(--text-h4);
  margin-block-start: var(--space-8);
}

.article__body p { font-size: var(--text-body-lg); line-height: var(--lh-relaxed); color: var(--color-text-secondary); }

.article__body ul,
.article__body ol {
  padding-inline-start: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  color: var(--color-text-secondary);
}

.article__body img { border-radius: var(--radius-lg); }

.article__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  padding-block: var(--space-5);
  border-block: var(--border-hairline) solid var(--color-border);
  font-size: var(--text-caption);
  color: var(--color-text-muted);
}


/* ==========================================================================
   12. UTILITY PAGES
   ========================================================================== */

.error-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  text-align: center;
  padding-block: var(--section-y-lg);
}

.error-page__code {
  font-family: var(--font-display);
  font-variation-settings: var(--font-display-settings);
  font-size: clamp(6rem, 3rem + 14vw, 13rem);
  font-weight: var(--fw-semibold);
  line-height: 0.85;
  letter-spacing: var(--ls-display);
  color: var(--color-primary);
  opacity: 0.16;
}

.error-page__title { font-size: var(--text-h1); margin-block-start: calc(var(--space-16) * -1); }

/* Sitemap */
.sitemap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: var(--space-10);
}

.sitemap-col { display: flex; flex-direction: column; gap: var(--space-3); }

.sitemap-col__title {
  font-size: var(--text-label);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--color-accent);
  padding-block-end: var(--space-3);
  border-block-end: var(--border-hairline) solid var(--color-border);
}

.sitemap-col a {
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
  text-decoration: none;
}

.sitemap-col a:hover { color: var(--color-primary); }

/* Search results */
.search-result {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-block: var(--space-6);
  border-block-end: var(--border-hairline) solid var(--color-border-subtle);
}

.search-result__title { font-size: var(--text-h5); font-weight: var(--fw-semibold); }
.search-result__url { font-size: var(--text-caption); color: var(--color-accent); }
.search-result__text { font-size: var(--text-body-sm); color: var(--color-text-secondary); }