/* =========================================================
   ASHWORTH & CROWN — "Quiet Nobility"
   Aesthetic: Scandinavian royal. Pale oak, linen, sage,
   thin brass hairlines. Airy, restrained, asymmetric.
   ========================================================= */

:root{
  --linen:      #f7f3ec;
  --linen-2:    #efe8da;
  --oak:        #d7c3a1;
  --oak-deep:   #b89a6c;
  --sage:       #57654e;
  --sage-deep:  #3c4636;
  --brass:      #a9895a;
  --ink:        #2a251e;
  --ink-soft:   rgba(42,37,30,.68);
  --ink-faint:  rgba(42,37,30,.42);

  --font-display: 'Bodoni Moda', Georgia, serif;
  --font-body:    'Jost', 'Segoe UI', sans-serif;

  --container: 1200px;
  --ease: cubic-bezier(.25,.7,.3,1);
}

*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background: var(--linen); color: var(--ink);
  font-family: var(--font-body); font-weight:300; font-size:17px; line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
::selection{ background: var(--oak-deep); color: var(--linen); }

.reveal{ opacity:0; transform: translateY(22px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.in-view{ opacity:1; transform:none; }

.eyebrow{
  font-family: var(--font-body); text-transform:uppercase; letter-spacing:.32em;
  font-size:.72rem; color: var(--brass); margin:0 0 1.2rem; font-weight:500;
}
.eyebrow.center{ text-align:center; }

.section{ max-width: var(--container); margin:0 auto; padding: 7rem 2rem; }
.section-title{
  font-family: var(--font-display); font-weight:500; font-style:normal;
  font-size: clamp(1.9rem, 3vw, 2.6rem); line-height:1.2; margin:0 0 1.4rem; letter-spacing:-.005em;
}
.section-title.center-title{ text-align:center; max-width:520px; margin-left:auto; margin-right:auto; }
.lede{ color: var(--ink-soft); font-size:1.08rem; max-width: 46ch; margin: 0 0 1.8rem; }

.text-link{
  display:inline-block; font-size:.85rem; letter-spacing:.06em; text-transform:uppercase;
  border-bottom: 1px solid var(--ink); padding-bottom: 3px; transition: border-color .3s var(--ease), color .3s var(--ease);
}
.text-link:hover{ color: var(--brass); border-color: var(--brass); }

.btn{
  display:inline-block; font-family: var(--font-body); font-size:.82rem; letter-spacing:.12em;
  text-transform:uppercase; color: var(--linen); background: var(--ink);
  padding: 1rem 2.2rem; border-radius: 1px; transition: background .35s var(--ease), transform .35s var(--ease);
}
.btn:hover{ background: var(--sage-deep); transform: translateY(-2px); }

/* ---------- header ---------- */
.site-header{
  position: fixed; top:0; left:0; right:0; z-index:200; padding: 1.8rem 0;
  transition: padding .4s ease, background .4s ease, box-shadow .4s ease;
}
.site-header.scrolled{
  padding: 1.1rem 0; background: rgba(247,243,236,.9); backdrop-filter: blur(8px);
  box-shadow: 0 1px 0 rgba(42,37,30,.08);
}
.header-inner{
  max-width: var(--container); margin:0 auto; padding:0 2rem;
  display:flex; align-items:center; justify-content:space-between;
}
.brand-word{ font-family: var(--font-display); font-size:1.25rem; letter-spacing:.02em; }
.brand-word .amp{ color: var(--brass); font-style:italic; }
.main-nav{ display:flex; gap:2.4rem; }
.main-nav a{ font-size:.85rem; letter-spacing:.08em; text-transform:uppercase; color: var(--ink-soft); transition: color .3s ease; }
.main-nav a:hover{ color: var(--ink); }
.nav-toggle{ display:none; flex-direction:column; gap:6px; background:none; border:none; padding:6px; }
.nav-toggle span{ width:20px; height:1px; background: var(--ink); display:block; }

/* ---------- hero ---------- */
.hero{ padding: 9rem 2rem 3rem; max-width: var(--container); margin:0 auto; }
.hero-grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap: 4rem; align-items:center; }
.hero-title{
  font-family: var(--font-display); font-weight:400; font-size: clamp(2.6rem, 5.4vw, 4.3rem);
  line-height:1.08; letter-spacing:-.01em; margin: 0 0 1.6rem;
}
.hero-title em{ font-style:italic; color: var(--sage-deep); }
.hero-sub{ color: var(--ink-soft); font-size:1.08rem; max-width: 40ch; margin:0 0 2.2rem; }
.hero-visual{ display:flex; flex-direction:column; align-items:center; gap: 1rem; }
.hero-ring{
  width: 100%; aspect-ratio: 1; max-width: 320px; border-radius:50%;
  border: 1px solid rgba(169,137,90,.5); display:flex; align-items:center; justify-content:center;
  background: radial-gradient(circle at 50% 40%, var(--linen-2), var(--linen));
}
.hero-icon{ width:60%; color: var(--sage-deep); }
.hero-caption{ font-size:.78rem; letter-spacing:.06em; color: var(--ink-faint); text-align:center; }
.hero-hairline{ height:1px; background: linear-gradient(90deg, transparent, rgba(169,137,90,.6), transparent); margin-top: 5rem; transform-origin:center; }

/* ---------- stat strip ---------- */
.stat-strip{
  display:flex; justify-content:center; gap: clamp(2rem,6vw,5rem); flex-wrap:wrap;
  max-width: var(--container); margin: 0 auto; padding: 3rem 2rem;
  border-top:1px solid rgba(42,37,30,.1); border-bottom:1px solid rgba(42,37,30,.1);
}
.stat-strip div{ display:flex; flex-direction:column; align-items:center; text-align:center; font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; color: var(--ink-faint); }
.stat-strip span{ font-family: var(--font-display); font-size:2rem; color: var(--sage-deep); margin-bottom:.3rem; text-transform:none; letter-spacing:0; }

/* ---------- collections ---------- */
.collection-row{ display:grid; grid-template-columns: repeat(4,1fr); }
.collection-item{
  padding: 2.4rem 1.6rem; border-left: 1px solid rgba(42,37,30,.12); text-align:left;
}
.collection-item:first-child{ border-left:none; padding-left:0; }
.collection-item svg{ width:40px; height:40px; color: var(--brass); margin-bottom: 1.4rem; }
.collection-item h3{ font-family: var(--font-display); font-weight:500; font-size:1.2rem; margin:0 0 .5rem; }
.collection-item p{ color: var(--ink-soft); font-size:.92rem; margin: 0 0 1rem; }

/* ---------- craft ---------- */
.craft-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items:start; }
.craft-quote{ padding: 2.4rem; border-left: 2px solid var(--brass); background: var(--linen-2); }
.craft-quote blockquote{ font-family: var(--font-display); font-style:italic; font-size:1.35rem; line-height:1.5; margin:0 0 1rem; color: var(--sage-deep); }
.craft-attr{ font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; color: var(--ink-faint); }

/* ---------- gallery / masonry ---------- */
.masonry{ display:grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 10px; gap: 1.6rem 1.6rem; margin-top: 3rem; }
.plate{ margin:0; grid-row: span 24; display:flex; flex-direction:column; }
.plate-tall{ grid-row: span 30; }
.plate svg{ flex:1; width:100%; height:auto; color: var(--sage-deep); background: var(--linen-2); padding: 1.6rem; border: 1px solid rgba(42,37,30,.08); }
.plate figcaption{ margin-top: .9rem; font-size:.85rem; color: var(--ink-soft); }
.plate-num{ font-family: var(--font-display); color: var(--brass); margin-right:.4rem; }
.plate figcaption em{ font-style:normal; color: var(--ink-faint); display:block; margin-top:.15rem; font-size:.8rem; }

/* ---------- testimonial ---------- */
.testimonial{ max-width: 720px; margin: 0 auto; padding: 6rem 2rem; text-align:center; }
.testimonial-text{ font-family: var(--font-display); font-style:italic; font-size: clamp(1.25rem,2.4vw,1.6rem); line-height:1.6; color: var(--ink); margin:0 0 1.4rem; }
.testimonial-attr{ font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; color: var(--ink-faint); }

/* ---------- cta ---------- */
.cta-band{ background: var(--sage-deep); color: var(--linen); padding: 6rem 2rem; text-align:center; }
.cta-inner{ max-width: 520px; margin:0 auto; }
.cta-inner h2{ font-family: var(--font-display); font-style:italic; font-weight:500; font-size: clamp(2rem,3.4vw,2.6rem); margin:0 0 1rem; }
.cta-inner > p{ color: rgba(247,243,236,.75); margin:0 0 2.2rem; }
.cta-form{ display:flex; gap:0; border-bottom: 1px solid rgba(247,243,236,.4); padding-bottom: .6rem; }
.cta-form input{ flex:1; background:none; border:none; color: var(--linen); font-family: var(--font-body); font-size:1rem; padding: .4rem; }
.cta-form input::placeholder{ color: rgba(247,243,236,.5); }
.cta-form input:focus{ outline:none; }
.cta-form button{ background:none; border:none; color: var(--linen); font-family: var(--font-body); letter-spacing:.08em; text-transform:uppercase; font-size:.82rem; }

/* ---------- footer ---------- */
.site-footer{ padding: 5rem 2rem 2rem; border-top: 1px solid rgba(42,37,30,.1); }
.footer-top{ max-width: var(--container); margin:0 auto 3rem; display:grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap:3rem; }
.footer-brand p{ color: var(--ink-faint); font-size:.88rem; margin-top:.8rem; }
.footer-col h4{ font-size:.76rem; letter-spacing:.12em; text-transform:uppercase; color: var(--brass); margin:0 0 1rem; font-weight:500; }
.footer-col a{ display:block; color: var(--ink-soft); font-size:.92rem; margin-bottom:.65rem; }
.footer-col a:hover{ color: var(--ink); }
.footer-bottom{ max-width: var(--container); margin:0 auto; display:flex; justify-content:space-between; font-size:.78rem; color: var(--ink-faint); flex-wrap:wrap; gap:.5rem; }

/* ---------- responsive ---------- */
@media (max-width: 980px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-visual{ order:-1; }
  .collection-row{ grid-template-columns: 1fr 1fr; }
  .collection-item{ border-left:none; border-top:1px solid rgba(42,37,30,.12); padding-left:0; }
  .collection-item:nth-child(odd){ padding-right:1.6rem; }
  .craft-grid{ grid-template-columns:1fr; }
  .masonry{ grid-template-columns: 1fr 1fr; }
  .footer-top{ grid-template-columns:1fr 1fr; }
}
@media (max-width:620px){
  .main-nav{
    display:flex; flex-direction:column; align-items:flex-end; gap:1.3rem;
    position:fixed; top:0; right:0; height:100vh; width: min(75vw,300px);
    background: var(--linen); padding: 6rem 2rem 2rem; border-left:1px solid rgba(42,37,30,.1);
    transform: translateX(100%); transition: transform .45s var(--ease); z-index:150;
  }
  .main-nav.open{ transform:none; }
  .nav-toggle{ display:flex; position:relative; z-index:160; }
  .collection-row{ grid-template-columns:1fr; }
  .masonry{ grid-template-columns:1fr; }
  .plate, .plate-tall{ grid-row: span 26; }
  .footer-top{ grid-template-columns:1fr; gap:2rem; }
}