/* =========================================================
   GLOBAL STYLES  —  edit colors & fonts here once, applies everywhere
   ========================================================= */

:root {
  /* Palette — change these hex codes to re-skin the whole site */
  --paper:      #FBF6EE;   /* page background (warm ivory)            */
  --paper-deep: #F2E9DC;   /* slightly darker panels                 */
  --ink:        #2B2622;   /* main text                              */
  --ink-soft:   #6B6259;   /* muted text                             */
  --clay:       #C0664A;   /* primary accent (terracotta)            */
  --clay-deep:  #9E4F38;   /* accent hover                           */
  --sage:       #7C8B6F;   /* secondary accent                       */
  --line:       #E4D9C8;   /* hairline borders                       */

  --display: "Fraunces", Georgia, serif;
  --body:    "Hanken Grotesk", system-ui, sans-serif;

  --maxw: 1180px;
  --radius: 2px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  /* subtle paper grain */
  background-image:
    radial-gradient(circle at 20% 15%, rgba(192,102,74,0.04), transparent 40%),
    radial-gradient(circle at 85% 70%, rgba(124,139,111,0.05), transparent 45%);
}

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

a { color: inherit; text-decoration: none; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }

/* ---------- Typography ---------- */
h1, h2, h3, h4 { font-family: var(--display); font-weight: 500; line-height: 1.1; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.6rem, 6vw, 5rem); }
h2 { font-size: clamp(1.9rem, 4vw, 3rem); }
h3 { font-size: 1.5rem; }

.eyebrow {
  font-family: var(--body);
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--clay);
  font-weight: 700;
}

.lead { font-size: 1.18rem; color: var(--ink-soft); }

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(251,246,238,0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav {
  display: flex; align-items: center; justify-content: space-between;
  height: 78px;
}
.brand {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.brand span { color: var(--clay); }
.nav-links { display: flex; gap: 34px; align-items: center; }
.nav-links a {
  font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 600; color: var(--ink-soft);
  position: relative; transition: color .25s;
}
.nav-links a:hover { color: var(--ink); }
.nav-links a::after {
  content:""; position:absolute; left:0; bottom:-6px; height:1.5px; width:0;
  background: var(--clay); transition: width .28s ease;
}
.nav-links a:hover::after { width:100%; }
.nav-ig {
  border: 1px solid var(--ink); border-radius: 40px;
  padding: 8px 18px !important; color: var(--ink) !important;
}
.nav-ig:hover { background: var(--ink); color: var(--paper) !important; }
.nav-ig::after { display:none; }

.menu-btn { display:none; background:none; border:none; font-size:1.6rem; cursor:pointer; color:var(--ink); }

/* ---------- Hero ---------- */
.hero { padding: 90px 0 70px; }
.hero-grid { display:grid; grid-template-columns: 1.1fr 0.9fr; gap: 60px; align-items:center; }
.hero h1 { margin: 18px 0 22px; }
.hero h1 em { font-style: italic; color: var(--clay); }
.hero .lead { max-width: 30ch; }
.hero-cta { margin-top: 34px; display:flex; gap:16px; flex-wrap:wrap; }

.hero-img {
  aspect-ratio: 4/5; border-radius: var(--radius);
  background: linear-gradient(135deg, var(--sage), var(--clay));
  position: relative; overflow:hidden;
  box-shadow: 0 30px 60px -30px rgba(43,38,34,0.4);
}
.hero-img::after {
  content:"your photo here";
  position:absolute; inset:0; display:grid; place-items:center;
  color: rgba(255,255,255,0.65); font-size:0.8rem; letter-spacing:0.2em; text-transform:uppercase;
}

/* ---------- Buttons ---------- */
.btn {
  display:inline-block; font-weight:600; font-size:0.82rem;
  letter-spacing:0.12em; text-transform:uppercase;
  padding:14px 28px; border-radius:40px; transition:all .25s; cursor:pointer;
  border:1px solid transparent;
}
.btn-primary { background:var(--clay); color:#fff; }
.btn-primary:hover { background:var(--clay-deep); transform:translateY(-2px); }
.btn-ghost { border-color:var(--ink); color:var(--ink); }
.btn-ghost:hover { background:var(--ink); color:var(--paper); }

/* ---------- Section heading ---------- */
.section { padding: 80px 0; }
.section-head { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:46px; flex-wrap:wrap; gap:16px; }
.section-head h2 { max-width: 16ch; }
.link-more { font-size:0.82rem; letter-spacing:0.14em; text-transform:uppercase; font-weight:600; color:var(--clay); border-bottom:1.5px solid var(--clay); padding-bottom:3px; }
.link-more:hover { color:var(--clay-deep); }

/* ---------- Post cards (magazine grid) ---------- */
.post-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:40px; }
.post-card { display:flex; flex-direction:column; }
.post-card .thumb {
  aspect-ratio: 3/2; border-radius:var(--radius); overflow:hidden; margin-bottom:18px;
  background: var(--paper-deep);
  position:relative;
}
.post-card .thumb .ph { position:absolute; inset:0; background:linear-gradient(135deg,var(--paper-deep),var(--line)); }
.post-card img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.post-card:hover img { transform:scale(1.05); }
.post-meta { font-size:0.74rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:10px; }
.post-meta .cat { color:var(--clay); font-weight:700; }
.post-card h3 { margin-bottom:10px; transition:color .25s; }
.post-card:hover h3 { color:var(--clay); }
.post-card p { font-size:0.98rem; color:var(--ink-soft); }

/* feature (large first post) */
.post-feature { display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center; margin-bottom:60px; }
.post-feature .thumb { aspect-ratio:4/3; }
.post-feature h2 { margin:14px 0; }

/* ---------- Shop category cards ---------- */
.cat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:34px; }
.cat-card {
  position:relative; aspect-ratio:3/4; border-radius:var(--radius); overflow:hidden;
  display:flex; align-items:flex-end; padding:30px; color:#fff;
  box-shadow: 0 20px 40px -24px rgba(43,38,34,0.4);
}
.cat-card .bg { position:absolute; inset:0; z-index:0; transition:transform .6s ease; }
.cat-card:hover .bg { transform:scale(1.06); }
.cat-card::before { content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(transparent 30%, rgba(43,38,34,0.78)); }
.cat-card .label { position:relative; z-index:2; }
.cat-card .label h3 { font-size:1.8rem; color:#fff; }
.cat-card .label span { font-size:0.74rem; letter-spacing:0.18em; text-transform:uppercase; opacity:0.85; }
.cat-1 .bg { background:linear-gradient(135deg,#C0664A,#9E4F38); }
.cat-2 .bg { background:linear-gradient(135deg,#7C8B6F,#5d6b53); }
.cat-3 .bg { background:linear-gradient(135deg,#C99B6E,#a87c4f); }

/* ---------- Product grid (shop pages) ---------- */
.product-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:30px; }
.product {
  display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  transition:transform .25s, box-shadow .25s;
}
.product:hover { transform:translateY(-4px); box-shadow:0 24px 40px -28px rgba(43,38,34,0.45); }
.product .img { aspect-ratio:1; background:var(--paper-deep); position:relative; }
.product .img .ph { position:absolute; inset:0; background:linear-gradient(135deg,var(--paper-deep),var(--line)); display:grid; place-items:center; color:var(--ink-soft); font-size:0.7rem; letter-spacing:0.14em; text-transform:uppercase; }
.product .body { padding:18px 18px 22px; display:flex; flex-direction:column; flex:1; }
.product .retailer { font-size:0.66rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--sage); font-weight:700; margin-bottom:8px; }
.product h4 { font-family:var(--display); font-size:1.12rem; font-weight:500; margin-bottom:8px; }
.product .note { font-size:0.9rem; color:var(--ink-soft); flex:1; margin-bottom:16px; }
.product .shop-link { font-size:0.78rem; letter-spacing:0.1em; text-transform:uppercase; font-weight:700; color:var(--clay); }
.product .shop-link:hover { color:var(--clay-deep); }
.product .shop-link::after { content:" \2192"; }

/* ---------- Page header (interior pages) ---------- */
.page-head { padding:80px 0 30px; text-align:center; }
.page-head .eyebrow { display:block; margin-bottom:16px; }
.page-head p { max-width:54ch; margin:18px auto 0; color:var(--ink-soft); }

/* ---------- Article (blog post) ---------- */
.article { max-width:720px; margin:0 auto; padding:60px 28px 40px; }
.article .post-meta { text-align:center; margin-bottom:20px; }
.article h1 { text-align:center; margin-bottom:30px; }
.article .hero-photo { aspect-ratio:16/9; border-radius:var(--radius); margin-bottom:44px; background:linear-gradient(135deg,var(--sage),var(--clay)); }
.article p { margin-bottom:24px; }
.article h2 { font-size:1.7rem; margin:40px 0 16px; }
.article blockquote {
  border-left:3px solid var(--clay); padding:6px 0 6px 26px; margin:34px 0;
  font-family:var(--display); font-style:italic; font-size:1.4rem; color:var(--ink);
}
.article a.inline { color:var(--clay); border-bottom:1px solid var(--clay); }

/* ---------- Instagram strip ---------- */
.ig-strip { background:var(--paper-deep); }
.ig-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:6px; }
.ig-grid .tile { aspect-ratio:1; background:linear-gradient(135deg,var(--line),var(--paper-deep)); position:relative; overflow:hidden; }
.ig-grid .tile:nth-child(odd) { background:linear-gradient(135deg,#e9d9c5,#d8c4a8); }
.ig-grid .tile:hover { opacity:0.85; }

/* ---------- Newsletter ---------- */
.news { background:var(--ink); color:var(--paper); text-align:center; }
.news h2 { color:var(--paper); }
.news p { color:rgba(251,246,238,0.7); max-width:46ch; margin:16px auto 30px; }
.news form { display:flex; gap:10px; max-width:440px; margin:0 auto; }
.news input {
  flex:1; padding:14px 18px; border:1px solid rgba(251,246,238,0.3);
  background:transparent; color:var(--paper); border-radius:40px; font-family:var(--body); font-size:0.95rem;
}
.news input::placeholder { color:rgba(251,246,238,0.5); }

/* ---------- Footer ---------- */
.footer { padding:70px 0 40px; border-top:1px solid var(--line); }
.footer-grid { display:flex; justify-content:space-between; flex-wrap:wrap; gap:30px; align-items:flex-start; }
.footer .brand { margin-bottom:10px; }
.footer p { font-size:0.92rem; color:var(--ink-soft); max-width:36ch; }
.footer-links { display:flex; gap:50px; }
.footer-col h5 { font-size:0.72rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--ink); margin-bottom:14px; }
.footer-col a { display:block; font-size:0.92rem; color:var(--ink-soft); margin-bottom:8px; }
.footer-col a:hover { color:var(--clay); }
.footer-bottom { margin-top:50px; padding-top:24px; border-top:1px solid var(--line); display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:0.82rem; color:var(--ink-soft); }

.disclosure { font-size:0.82rem; color:var(--ink-soft); background:var(--paper-deep); border-radius:var(--radius); padding:16px 22px; margin:30px auto; max-width:720px; text-align:center; }

/* ---------- Load animation ---------- */
.reveal { opacity:0; transform:translateY(20px); animation:rise .8s cubic-bezier(.2,.7,.2,1) forwards; }
.reveal:nth-child(2){animation-delay:.08s}
.reveal:nth-child(3){animation-delay:.16s}
.reveal:nth-child(4){animation-delay:.24s}
@keyframes rise { to { opacity:1; transform:none; } }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .nav-links { display:none; }
  .menu-btn { display:block; }
  .nav-links.open { display:flex; position:absolute; top:78px; left:0; right:0; flex-direction:column; background:var(--paper); padding:24px 28px; gap:20px; border-bottom:1px solid var(--line); }
  .hero-grid, .post-feature { grid-template-columns:1fr; }
  .post-grid, .cat-grid { grid-template-columns:1fr 1fr; }
  .product-grid { grid-template-columns:1fr 1fr; }
  .ig-grid { grid-template-columns:repeat(3,1fr); }
}
@media (max-width: 560px) {
  body { font-size:17px; }
  .post-grid, .cat-grid, .product-grid { grid-template-columns:1fr; }
  .news form { flex-direction:column; }
  .news input { border-radius:8px; }
  .btn { width:auto; }
}