/* ===================================================================
   Brelsey — "Field Guide" design system
   Appalachian craft × New England editorial restraint
   =================================================================== */
:root {
  /* palette */
  --forest:      #233215;
  --forest-2:    #2F421D;   /* lifted green for cards/hover on dark */
  --paper:       #EFEBDE;   /* warm birch paper */
  --paper-2:     #E5E0CF;   /* deeper paper */
  --ink:         #1C2413;   /* dark green-black text on light */
  --ink-2:       #4C543F;   /* muted body text on light */
  --brass:       #A8813C;   /* burnished brass accent */
  --brass-lift:  #C89A4A;   /* brighter brass for dark backgrounds */
  --stone:       #6E7A63;   /* sage stone, utility text */
  --cream:       #F2EFE6;   /* text on dark green */
  --cream-2:     #CFCDBD;   /* muted text on dark green */
  --line:        rgba(28,36,19,0.14);
  --line-dark:   rgba(242,239,230,0.16);

  --f-display: 'Fraunces', Georgia, serif;
  --f-body:    'Inter', system-ui, sans-serif;
  --f-mono:    'JetBrains Mono', monospace;

  --max: 1160px;
  --gutter: 32px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

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

/* ---- typographic primitives ---- */
.eyebrow {
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 22px;
}
.eyebrow::before {
  content: "";
  width: 26px; height: 1px;
  background: var(--brass);
  display: inline-block;
}
.band-dark .eyebrow { color: var(--brass-lift); }
.band-dark .eyebrow::before { background: var(--brass-lift); }

h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 500; letter-spacing: -0.012em; }

.display {
  font-size: clamp(2.6rem, 6.5vw, 5rem);
  line-height: 1.02;
  font-weight: 500;
  margin: 0 0 26px;
}
.display em { font-style: italic; color: var(--brass); }
.band-dark .display em { color: var(--brass-lift); }

.section-head {
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  line-height: 1.08;
  margin: 0 0 20px;
  max-width: 20ch;
}

.lede {
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 48ch;
  margin: 0 0 38px;
}
.band-dark .lede { color: var(--cream-2); }

/* ---- bands (rhythm of light / dark) ---- */
.band-light { background: var(--paper); color: var(--ink); }
.band-dark  { background: var(--forest); color: var(--cream); }
.band-dark h1, .band-dark h2, .band-dark h3, .band-dark h4 { color: var(--cream); }
section { padding: clamp(64px, 9vw, 120px) 0; }

/* contour motif */
.contour {
  position: relative;
  overflow: hidden;
}
.contour::before {
  content: "";
  position: absolute;
  inset: 0;
  background-position: right -80px top -120px;
  background-repeat: no-repeat;
  background-size: 1000px auto;
  pointer-events: none;
}
.band-dark.contour::before  { background-image: url('../assets/contours-dark.svg'); }
.band-light.contour::before { background-image: url('../assets/contours-light.svg'); }
.contour > .wrap { position: relative; z-index: 1; }

/* hairline rule */
.rule {
  height: 1px;
  background: var(--line);
  border: none;
  margin: 0;
}
.band-dark .rule { background: var(--line-dark); }

/* =================== header =================== */
header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(239,235,222,0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav {
  display: flex; align-items: center; justify-content: space-between;
  max-width: var(--max); margin: 0 auto;
  padding: 20px var(--gutter);
}
.brand {
  font-family: var(--f-display);
  font-size: 25px; font-weight: 500; letter-spacing: -0.01em;
}
.brand .dot { color: var(--brass); }
.nav-links {
  display: flex; gap: 36px;
  font-family: var(--f-mono);
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
}
.nav-links a { position: relative; padding-bottom: 3px; color: var(--ink-2); transition: color .2s; }
.nav-links a:hover { color: var(--ink); }
.nav-links a.active { color: var(--ink); }
.nav-links a.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 1.5px; background: var(--brass);
}
.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 6px; }
.nav-toggle span { width: 24px; height: 1.5px; background: var(--ink); display: block; }

@media (max-width: 780px) {
  .nav-links {
    position: fixed; top: 65px; left: 0; right: 0;
    flex-direction: column; gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    max-height: 0; overflow: hidden; transition: max-height .32s ease;
  }
  .nav-links.open { max-height: 340px; }
  .nav-links a { padding: 17px var(--gutter); border-top: 1px solid var(--line); }
  .nav-toggle { display: flex; }
}

/* =================== hero =================== */
.hero { padding: clamp(90px,13vw,150px) 0 clamp(70px,10vw,120px); }
.hero .display { max-width: 15ch; }
.almanac {
  font-family: var(--f-mono);
  font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--stone);
  display: flex; flex-wrap: wrap; gap: 10px 22px;
  margin-top: 44px; padding-top: 22px;
  border-top: 1px solid var(--line);
}
.band-dark .almanac { color: var(--cream-2); border-color: var(--line-dark); }

/* =================== buttons =================== */
.btn-row { display: flex; gap: 14px; flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-mono);
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 15px 26px; border-radius: 1px;
  transition: transform .16s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn::after { content: "→"; font-family: var(--f-body); font-size: 15px; transition: transform .2s ease; }
.btn:hover::after { transform: translateX(4px); }
.btn-primary { background: var(--brass); color: var(--forest); }
.btn-primary:hover { background: var(--brass-lift); }
.btn-ghost { border: 1px solid currentColor; color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--paper); }
.band-dark .btn-ghost { color: var(--cream); }
.band-dark .btn-ghost:hover { background: var(--cream); color: var(--forest); }

/* =================== service index (editorial list) =================== */
.index-row {
  display: grid;
  grid-template-columns: 76px 1fr 1.15fr;
  gap: 40px; align-items: start;
  padding: 40px 0;
  border-top: 1px solid var(--line);
  transition: padding-left .25s ease;
}
.band-dark .index-row { border-color: var(--line-dark); }
.index-row:hover { padding-left: 10px; }
.index-num {
  font-family: var(--f-display);
  font-size: 26px; font-style: italic; color: var(--brass);
  line-height: 1;
}
.band-dark .index-num { color: var(--brass-lift); }
.index-row h3 { font-size: clamp(1.5rem, 2.6vw, 2.05rem); margin: 0; line-height: 1.1; }
.index-row .desc { color: var(--ink-2); margin: 0; }
.band-dark .index-row .desc { color: var(--cream-2); }
.taglist {
  list-style: none; padding: 0; margin: 18px 0 0;
  font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.04em;
  color: var(--stone); display: flex; flex-wrap: wrap; gap: 8px 16px;
}
.band-dark .taglist { color: var(--cream-2); }
.taglist li { position: relative; padding-left: 15px; }
.taglist li::before { content: "—"; position: absolute; left: 0; color: var(--brass); }
@media (max-width: 820px) {
  .index-row { grid-template-columns: 50px 1fr; }
  .index-row .desc-cell { grid-column: 2; }
}
@media (max-width: 520px) {
  .index-row { grid-template-columns: 1fr; gap: 12px; }
  .index-row .desc-cell { grid-column: 1; }
}

/* compact 4-up on home */
.mini-index { display: grid; grid-template-columns: repeat(2,1fr); gap: 0 56px; }
@media (max-width: 640px){ .mini-index { grid-template-columns: 1fr; } }
.mini-row {
  display: grid; grid-template-columns: 52px 1fr; gap: 22px; align-items: baseline;
  padding: 26px 0; border-top: 1px solid var(--line);
}
.mini-row .index-num { font-size: 21px; }
.mini-row h3 { font-size: 1.35rem; margin: 0 0 6px; }
.mini-row p { margin: 0; color: var(--ink-2); font-size: 15px; }

/* =================== editorial statement =================== */
.statement {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 3.2vw, 2.4rem);
  line-height: 1.32;
  letter-spacing: -0.01em;
  max-width: 24ch;
}
.statement em { font-style: italic; color: var(--brass); }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
@media (max-width: 820px){ .two-col { grid-template-columns: 1fr; gap: 28px; } }
.two-col p { color: var(--ink-2); margin: 0 0 18px; }
.band-dark .two-col p { color: var(--cream-2); }

/* =================== The Junk Drawer / products =================== */
.store-note {
  border: 1px solid var(--line-dark);
  padding: 24px 28px; margin-bottom: 56px;
  display: flex; gap: 18px; flex-wrap: wrap; align-items: baseline;
}
.store-note p { margin: 8px 0 0; color: var(--cream-2); max-width: 54ch; }

.product-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 30px; }
@media (max-width: 900px){ .product-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .product-grid { grid-template-columns: 1fr; } }
.product {
  background: var(--paper);
  border: 1px solid var(--line);
  transition: transform .2s ease, box-shadow .2s ease;
}
.band-dark .product { background: var(--forest-2); border-color: var(--line-dark); }
.product:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(28,36,19,0.14); }
.product .thumb {
  aspect-ratio: 4/3; position: relative; overflow: hidden;
  background: linear-gradient(150deg, var(--forest) 0%, var(--forest-2) 60%, var(--stone) 140%);
}
.product .thumb::before {
  content: ""; position: absolute; inset: 0;
  background: url('../assets/contours-brass.svg') no-repeat center/150% ;
  opacity: .5;
}
.product .body { padding: 20px 22px 24px; }
.band-dark .product .body { color: var(--cream); }
.p-tag { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brass); }
.band-dark .p-tag { color: var(--brass-lift); }
.product h4 { font-size: 1.2rem; margin: 9px 0 6px; }
.product .body p { margin: 0; font-size: 14.5px; color: var(--ink-2); }
.band-dark .product .body p { color: var(--cream-2); }
.p-price { font-family: var(--f-mono); font-size: 14px; margin-top: 14px; }

/* =================== contact =================== */
.contact-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 72px; }
@media (max-width: 820px){ .contact-grid { grid-template-columns: 1fr; gap: 40px; } }
.info-item { padding: 22px 0; border-top: 1px solid var(--line); }
.info-item:last-child { border-bottom: 1px solid var(--line); }
.info-item .k { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brass); display: block; margin-bottom: 7px; }
.info-item .v { font-size: 16px; color: var(--ink); }

form { display: flex; flex-direction: column; gap: 20px; }
.field label { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--stone); display: block; margin-bottom: 8px; }
input, select, textarea {
  width: 100%; padding: 13px 15px;
  border: 1px solid var(--ink); background: transparent;
  font-family: var(--f-body); font-size: 15px; color: var(--ink);
  border-radius: 1px;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--brass); outline-offset: 1px; }
textarea { resize: vertical; min-height: 130px; }
.form-status { font-family: var(--f-mono); font-size: 12.5px; color: var(--forest); display: none; }
.form-status.show { display: block; }

/* =================== footer =================== */
footer { background: var(--forest); color: var(--cream); padding: 60px 0 40px; }
.foot-top { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; align-items: flex-start; }
.foot-brand { font-family: var(--f-display); font-size: 32px; }
.foot-brand .dot { color: var(--brass-lift); }
.foot-cols { display: flex; gap: 64px; flex-wrap: wrap; }
.foot-col h5 { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brass-lift); margin: 0 0 14px; font-weight: 500; }
.foot-col a, .foot-col span { display: block; color: var(--cream-2); font-size: 14.5px; padding: 4px 0; transition: color .2s; }
.foot-col a:hover { color: var(--cream); }
.foot-bottom {
  margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--line-dark);
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font-family: var(--f-mono); font-size: 11.5px; letter-spacing: 0.08em; color: var(--cream-2);
}

/* =================== motion =================== */
.fade-up { opacity: 0; transform: translateY(18px); animation: fadeUp .8s cubic-bezier(.2,.7,.2,1) forwards; }
.fade-up.d1 { animation-delay: .08s; }
.fade-up.d2 { animation-delay: .16s; }
.fade-up.d3 { animation-delay: .24s; }
@keyframes fadeUp { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .fade-up { opacity: 1; transform: none; }
}