@import 'tokens/colors.css';
@import 'tokens/typography.css';
@import 'tokens/spacing.css';
@import 'tokens/shadows-radii.css';
@import 'base.css';

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

.wrap {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.eyebrow {
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 var(--space-4);
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  margin: 0;
}

p { margin: 0 0 var(--space-4); }

/* ---------- header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--surface-page);
  border-bottom: 1px solid var(--border-subtle);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
}

.wordmark {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-h3);
  color: var(--text-primary);
  text-decoration: none;
  letter-spacing: var(--tracking-tight);
  white-space: nowrap;
}

.wordmark:hover { color: var(--text-primary); opacity: 0.7; }
.wordmark .accent { color: var(--accent-red); }

/* ---------- buttons ---------- */

.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  letter-spacing: 0.01em;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: opacity var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard);
}

.btn:active { transform: scale(0.97); }

.btn-primary {
  background: var(--accent-green);
  color: var(--text-on-accent);
}

.btn-primary:hover { color: var(--text-on-accent); opacity: 0.85; }

.btn-ghost {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--border-default);
}

.btn-ghost:hover { color: var(--accent-red); opacity: 1; }

/* ---------- hero ---------- */

.hero {
  position: relative;
  overflow: hidden;
  padding: var(--space-20) 0 var(--space-16);
  text-align: center;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('assets/brand/pattern-tiles.svg') repeat;
  background-size: 190px 190px;
  opacity: 0.22;
  pointer-events: none;
  /* clear the centre so the pattern never sits behind the headline or body copy */
  -webkit-mask-image: radial-gradient(ellipse 58% 54% at 50% 46%, transparent 42%, #000 100%);
  mask-image: radial-gradient(ellipse 58% 54% at 50% 46%, transparent 42%, #000 100%);
}

.hero .wrap { position: relative; }

.hero h1 {
  font-size: var(--text-display-1);
  margin-bottom: var(--space-5);
}

.hero h1 em { font-style: italic; color: var(--accent-red); }

.hero-sub {
  font-size: var(--text-body-lg);
  color: var(--text-secondary);
  max-width: 30rem;
  margin: 0 auto var(--space-8);
}

.hero-rule {
  width: 40px;
  height: 1px;
  background: var(--accent-gold);
  margin: var(--space-10) auto 0;
  border: 0;
}

/* ---------- statement ---------- */

.statement {
  padding: var(--space-16) 0;
  text-align: center;
}

.statement h2 {
  font-size: var(--text-display-2);
  font-style: italic;
  margin-bottom: var(--space-6);
}

.statement p {
  font-size: var(--text-body-lg);
  color: var(--text-secondary);
  max-width: 34rem;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- collections ---------- */

.collection {
  padding: var(--space-16) 0;
  border-top: 1px solid var(--border-subtle);
}

.collection-head {
  max-width: 34rem;
  margin-bottom: var(--space-10);
}

.collection-head h2 {
  font-size: var(--text-display-2);
  margin-bottom: var(--space-4);
}

.collection-head p {
  color: var(--text-secondary);
  margin: 0;
}

/* framed image plate — keeps saturated product shots from fighting the cream page */
.plate {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-5);
  overflow: hidden;
}

.plate img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.plate-lead {
  margin-bottom: var(--space-12);
}

/* drawn banners are artwork, not photographs — they carry their own frame,
   so the ivory mount that keeps saturated product shots calm is dropped */
.plate-art {
  padding: 0;
  border-color: transparent;
}

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

.plate-lead img {
  aspect-ratio: 16 / 10;
}

.products {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: 1fr;
}

.product .plate { margin-bottom: var(--space-5); }
.product .plate img { aspect-ratio: 1 / 1; }

.product h3 {
  font-size: var(--text-h3);
  font-style: italic;
  margin-bottom: var(--space-2);
}

.product p {
  font-size: var(--text-small);
  color: var(--text-secondary);
  margin: 0;
}

/* ---------- quality ---------- */

.quality {
  padding: var(--space-16) 0;
  border-top: 1px solid var(--border-subtle);
}

.quality-inner {
  max-width: 34rem;
  text-align: center;
}

.quality-inner h2 { margin-bottom: var(--space-6); }

.quality h2 {
  font-size: var(--text-display-2);
  margin-bottom: var(--space-5);
}

.quality p { color: var(--text-secondary); }
.quality p:last-child { margin-bottom: 0; }

/* ---------- enquire ---------- */

.enquire {
  padding: var(--space-20) 0;
  border-top: 1px solid var(--border-subtle);
  text-align: center;
}

.enquire h2 {
  font-size: var(--text-display-2);
  font-style: italic;
  margin-bottom: var(--space-5);
}

.enquire p {
  color: var(--text-secondary);
  max-width: 28rem;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--space-8);
}

.enquire .btn-primary { font-size: var(--text-body); padding: var(--space-4) var(--space-10); }

.enquire-note {
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  margin: var(--space-6) 0 0;
}

/* ---------- footer ---------- */

.site-footer {
  border-top: 1px solid var(--border-subtle);
  padding: var(--space-10) 0;
}

.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.site-footer p {
  font-size: var(--text-caption);
  color: var(--text-muted);
  margin: 0;
}

.site-footer a { color: var(--text-muted); text-decoration-color: var(--border-default); }
.site-footer a:hover { color: var(--accent-red); }

/* ---------- responsive ---------- */

@media (min-width: 700px) {
  .wrap { padding: 0 var(--space-10); }
  .hero { padding: var(--space-24) 0 var(--space-20); }
  .products { grid-template-columns: repeat(2, 1fr); gap: var(--space-10); }
}

@media (min-width: 1000px) {
  .products-three { grid-template-columns: repeat(3, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn { transition: none; }
  .btn:active { transform: none; }
}