/* ==========================================================================
   Bonbithi Garden House
   A home-grown organic nursery · Assam
   ========================================================================== */

:root {
  --bg:          #fbf7f0;
  --panel:       #f4eee2;
  --ink:         #2f2a22;
  --ink-soft:    #3f3a30;
  --muted:       #5b5346;
  --faint:       #8a7a63;
  --terracotta:  #a9502c;
  --terracotta-d:#7d3a1f;
  --forest:      #2f4230;
  --forest-d:    #233324;
  --forest-ink:  #f6f1e6;
  --forest-mut:  #cfd8c9;
  --forest-faint:#a9b9a4;
  --line:        #e7ddcb;
  --line-2:      #e2d6c0;
  --line-3:      #cdbfa6;

  --serif: 'Lora', Georgia, serif;
  --sans:  'Karla', Helvetica, Arial, sans-serif;
  --mono:  'IBM Plex Mono', ui-monospace, monospace;

  --maxw: 1180px;
  --pad:  32px;
}

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

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Keyboard focus — visible on every interactive element */
:focus-visible {
  outline: 3px solid var(--terracotta);
  outline-offset: 3px;
}

/* Skip link — hidden until tabbed to */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: 12px 20px;
  background: var(--forest);
  color: var(--forest-ink);
  font-family: var(--sans);
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 6px 0;
}
.skip-link:focus {
  left: 0;
}

body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: var(--terracotta); text-decoration: none; transition: color .18s ease; }
a:hover { color: var(--terracotta-d); }
img { max-width: 100%; display: block; }
::selection { background: #e8d9bf; }

h1, h2, h3 { font-family: var(--serif); font-weight: 400; margin: 0; }

/* ---- Layout helpers ---------------------------------------------------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }
.rule { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }
.rule > div { height: 1px; background: var(--line); }

.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin: 0 0 14px;
}
.mono { font-family: var(--mono); }

/* Placeholder image frames — hatched fill, drop a real <img> in later */
.frame {
  background-color: #efe7d8;
  background-image: repeating-linear-gradient(45deg, rgba(169,80,44,0.10) 0 8px, transparent 8px 16px);
  border: 1px solid var(--line-2);
  display: flex;
  align-items: flex-end;
  padding: 18px;
  color: var(--faint);
  overflow: hidden;
}
.frame.green {
  background-image: repeating-linear-gradient(45deg, rgba(47,66,48,0.10) 0 8px, transparent 8px 16px);
}
.frame .cap {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.6;
}
.frame img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Buttons ----------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 15px 26px;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
  cursor: pointer;
}
.btn-forest { background: var(--forest); color: var(--forest-ink); }
.btn-forest:hover { background: var(--forest-d); color: var(--forest-ink); }
.btn-terra { background: var(--terracotta); color: #fdf9f3; }
.btn-terra:hover { background: #8c3f21; color: #fdf9f3; }
.btn-ghost { border-color: var(--line-3); color: var(--ink-soft); }
.btn-ghost:hover { border-color: var(--terracotta); color: var(--terracotta); }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(251,247,240,0.93);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap {
  padding-top: 16px;
  padding-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand { display: flex; align-items: baseline; gap: 10px; color: var(--ink); }
/* The wordmark keeps its baseline alignment; the logo centres against it. */
.brand-logo {
  align-self: center;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
}
.brand .name { font-family: var(--serif); font-size: 21px; letter-spacing: 0.01em; }
.brand .kicker {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--faint);
}
.nav { display: flex; align-items: center; gap: 28px; }
.nav a { font-size: 14px; color: var(--muted); }
.nav a:hover { color: var(--terracotta); }
.nav .pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--terracotta); color: #fdf9f3;
  font-size: 13px; font-weight: 500; letter-spacing: 0.02em;
  padding: 10px 18px; border-radius: 999px;
}
.nav .pill:hover { background: #8c3f21; color: #fdf9f3; }
.nav .pill .dot { width: 6px; height: 6px; border-radius: 999px; background: #f0c99f; }
.nav-toggle { display: none; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 64px;
  align-items: center;
  padding-top: 72px;
  padding-bottom: 64px;
}
.hero h1 {
  font-size: 62px;
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0 0 26px;
  text-wrap: pretty;
}
.hero h1 em { font-style: italic; color: var(--terracotta); }
.hero .lede {
  font-size: 18px; line-height: 1.7; color: var(--muted);
  max-width: 46ch; margin: 0 0 34px; text-wrap: pretty;
}
.hero .cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.hero .fineprint {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
  color: var(--faint); margin: 26px 0 0;
}
.hero-media { position: relative; }
.hero-media .frame { aspect-ratio: 4/5; border-radius: 3px; align-items: flex-start; padding: 22px; }
.hero-media .frame .cap { text-transform: none; }
.hero-media .quote {
  position: absolute; bottom: -26px; left: -26px;
  background: var(--bg); border: 1px solid var(--line);
  padding: 18px 22px; max-width: 230px;
}
.hero-media .quote p {
  font-family: var(--serif); font-style: italic; font-size: 16px;
  line-height: 1.5; color: var(--ink-soft); margin: 0;
}

/* ==========================================================================
   Sections
   ========================================================================== */
section { scroll-margin-top: 80px; }

.section-pad { padding-top: 88px; padding-bottom: 88px; }

.band-cream { background: var(--panel); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.band-forest { background: var(--forest); color: var(--forest-ink); }

/* Story / two-column with sticky heading */
.split {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 64px;
  align-items: start;
}
.split .aside { position: sticky; top: 110px; }
.split .aside h2 { font-size: 34px; line-height: 1.2; color: var(--ink); }
.prose { max-width: 62ch; }
.prose p { color: var(--muted); font-size: 17px; line-height: 1.8; margin: 0 0 22px; text-wrap: pretty; }
.prose p.lead { font-size: 19px; line-height: 1.75; color: var(--ink-soft); }
.prose p em { font-style: italic; color: var(--ink-soft); }
.prose p:last-child { margin-bottom: 0; }

/* Justified row: each frame's width is proportional to its photo's aspect
   ratio (--ar = width/height), which makes every photo in the row land on
   exactly the same height — aligned top and bottom, and still uncropped. */
.photo-pair { display: flex; align-items: flex-start; gap: 20px; margin-top: 44px; }
.photo-pair .frame { flex: var(--ar, 1) 1 0; margin: 0; }
.photo-pair .frame:not(.has-photo) { aspect-ratio: 4/5; }

/* Nursery */
.nursery-head {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: 32px; margin-bottom: 52px;
}
.nursery-head .intro { max-width: 52ch; }
.nursery-head h2 { font-size: 40px; line-height: 1.18; margin: 0 0 18px; color: var(--ink); }
.nursery-head .intro p { font-size: 17px; line-height: 1.75; color: var(--muted); margin: 0; text-wrap: pretty; }
.stat { border-left: 2px solid var(--terracotta); padding-left: 20px; }
.stat .big { font-family: var(--serif); font-size: 42px; line-height: 1; margin: 0; color: var(--forest); }
.stat .lbl { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); margin: 8px 0 0; }

.card-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.card { background: var(--bg); border: 1px solid var(--line); padding: 26px; }
.card .idx { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; color: var(--terracotta); margin: 0 0 18px; }
.card h3 { font-weight: 500; font-size: 22px; margin: 0 0 12px; color: var(--ink); }
.card p { font-size: 15px; line-height: 1.7; color: var(--muted); margin: 0; }

/* Seasonal "what's ready" panel */
.seasonal { margin-top: 52px; background: var(--bg); border: 1px solid var(--line); padding: 34px 32px; }
.seasonal .head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 26px; }
.seasonal .head h3 { font-weight: 500; font-size: 24px; margin: 0; color: var(--ink); }
.seasonal .head .stamp { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); margin: 0; }
.avail { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 40px; }
.avail .row { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; border-top: 1px solid #eee4d3; }
.avail .row span:first-child { font-size: 15px; color: var(--ink-soft); }
/* Common name sits quieter than the botanical one it explains. */
.avail .row span:first-child em { font-style: normal; font-size: 13px; color: var(--faint); }
.avail .row .tag { font-family: var(--mono); font-size: 11px; }
.tag.plenty { color: var(--forest); }
.tag.few { color: var(--terracotta); }
.tag.soon { color: var(--faint); }
.seasonal .note { font-size: 14.5px; line-height: 1.7; color: var(--faint); margin: 24px 0 0; }

/* How we live (forest band) */
.band-forest .eyebrow { color: #c08a5f; }
.band-forest .split .aside h2 { color: var(--forest-ink); }
.living-prose { max-width: 64ch; }
.living-prose .opener {
  font-family: var(--serif); font-size: 26px; line-height: 1.55;
  color: var(--forest-ink); margin: 0 0 30px; text-wrap: pretty;
}
.living-prose p { font-size: 17px; line-height: 1.85; color: var(--forest-mut); margin: 0 0 20px; text-wrap: pretty; }
.living-prose p:last-of-type { margin-bottom: 36px; }
.living-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(240,238,220,0.18); }
.living-facts .cell { background: var(--forest); padding: 22px 18px; }
.living-facts .cell strong { display: block; font-family: var(--serif); font-weight: 400; font-size: 19px; margin: 0 0 8px; color: var(--forest-ink); }
.living-facts .cell span { font-size: 14px; line-height: 1.6; color: var(--forest-faint); }

/* Compost steps.
   Two columns: the story and its two photographs on the left, the method as a
   2x2 block on the right. Both sides fill their column, so the section has no
   hole in the middle the way a single four-wide row of steps did. */
.compost-layout { display: grid; grid-template-columns: 0.9fr 1fr; gap: 64px; align-items: start; }
.compost-intro h2 { font-size: 40px; line-height: 1.18; margin: 0 0 16px; color: var(--ink); }
.compost-intro p { font-size: 17px; line-height: 1.75; color: var(--muted); margin: 0; text-wrap: pretty; }
.steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 28px; }
/* The steps sit against the foot of the left column, so the block starts below
   the heading and its last line lands level with the bottom of the photographs
   rather than leaving the column trailing off short. */
.compost-layout .steps { align-self: end; }
.step .step-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.step .step-head .n { font-family: var(--mono); font-size: 11px; color: var(--terracotta); }
.step .step-head .bar { flex: 1; height: 1px; background: var(--line-2); }
.step h3 { font-weight: 500; font-size: 20px; margin: 0 0 10px; color: var(--ink); }
.step p { font-size: 15px; line-height: 1.7; color: var(--muted); margin: 0; }

/* Gallery */
.gallery-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 44px; }
.gallery-head h2 { font-size: 40px; line-height: 1.18; margin: 0; color: var(--ink); }
.gallery-head .aside-note { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: var(--faint); margin: 0; max-width: 30ch; line-height: 1.7; }
/* Even grid. Every photo here shares the same 3:4 portrait ratio, so equal
   columns put them all on identical heights — rows line up exactly, and
   nothing is cropped because the frame ratio already matches the photo. */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; }
.gallery .frame { background-color: #e9e0cd; margin: 0; }
/* Frames still waiting for a photo have no image to set their height. */
.gallery .frame:not(.has-photo) { aspect-ratio: 3/4; }

/* ---- Frames holding a real photo ---------------------------------------
   Declared after the section rules so it overrides their fixed aspect
   ratios. The frame takes the PHOTO's proportions rather than forcing the
   photo into the frame, so nothing is ever cropped — portrait and
   landscape shots simply produce frames of different heights. */
.frame.has-photo {
  position: relative;
  display: block;
  padding: 0;
  background-image: none;
  aspect-ratio: auto;
  height: auto;
}
.frame.has-photo img {
  display: block;
  width: 100%;
  height: auto;      /* intrinsic ratio preserved — no object-fit cropping */
}
.frame.has-photo .cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 44px 18px 16px;
  color: #f4efe4;
  background: linear-gradient(to top, rgba(24,30,24,0.70), rgba(24,30,24,0));
}
/* Compost photographs. Declared after the has-photo block so the square crop
   overrides its intrinsic-ratio default — a landscape plate and an upright
   bucket shot only sit level with each other if both are cropped square. */
.compost-photos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 36px; }
.compost-photos .frame.has-photo { margin: 0; aspect-ratio: 1/1; }
.compost-photos .frame.has-photo img { height: 100%; object-fit: cover; }
/* The compost sits in the upper half of the bucket shot — hold the crop there. */
.compost-photos .frame.has-photo:last-child img { object-position: 50% 28%; }

/* In the hero the quote card overlaps the lower-left corner, so the caption
   stays at the top — as the empty placeholder did — with the scrim flipped. */
.hero-media .frame.has-photo .cap {
  top: 0; bottom: auto;
  padding: 20px 22px 44px;
  background: linear-gradient(to bottom, rgba(24,30,24,0.70), rgba(24,30,24,0));
}

/* Journal */
.journal-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 44px; }
.journal-head .intro { max-width: 52ch; }
.journal-head h2 { font-size: 40px; line-height: 1.18; margin: 0; color: var(--ink); }
.notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.note-card { padding-top: 22px; border-top: 2px solid var(--forest); }
.note-card.alt { border-top-color: var(--terracotta); }
.note-card .meta { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); margin: 0 0 14px; }
.note-card h3 { font-weight: 500; font-size: 23px; line-height: 1.3; margin: 0 0 12px; color: var(--ink); }
.note-card p { font-size: 15.5px; line-height: 1.75; color: var(--muted); margin: 0 0 16px; }
.note-card a { font-size: 14px; font-weight: 500; }

/* Testimonials */
.tstack { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.tstack figure { margin: 0; }
.tstack blockquote { font-family: var(--serif); font-size: 20px; line-height: 1.6; color: var(--ink-soft); margin: 0 0 18px; text-wrap: pretty; }
.tstack figcaption { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }

/* Visit */
.visit { display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: start; }
.visit h2 { font-size: 44px; line-height: 1.14; margin: 0 0 20px; color: var(--ink); }
.visit .say { font-size: 17.5px; line-height: 1.8; color: var(--muted); margin: 0 0 30px; max-width: 50ch; text-wrap: pretty; }
.visit .cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 36px; }
.visit .btn { padding: 16px 28px; }
.visit .privacy { font-family: var(--mono); font-size: 11px; line-height: 1.9; letter-spacing: 0.06em; color: var(--faint); margin: 0; }
.contact-card { background: var(--panel); border: 1px solid var(--line); padding: 34px 32px; }
.contact-card .row { display: flex; justify-content: space-between; gap: 20px; padding: 16px 0; border-bottom: 1px solid #e4d9c5; }
.contact-card .row:last-child { border-bottom: 0; }
.contact-card .row .k { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
.contact-card .row .v { font-size: 15.5px; }
.contact-card .row span.v { color: var(--ink-soft); text-align: right; }

/* Footer */
.site-footer { background: var(--forest); color: var(--forest-mut); }
.site-footer .wrap { padding-top: 52px; padding-bottom: 52px; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px; }
.site-footer .f-name { font-family: var(--serif); font-size: 26px; color: var(--forest-ink); margin: 0 0 8px; }
.site-footer .f-blurb { font-size: 14.5px; line-height: 1.7; color: var(--forest-faint); margin: 0; max-width: 40ch; }
.site-footer .f-legal { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: #8a9c85; margin: 0; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1000px) {
  .hero { grid-template-columns: 1fr; gap: 48px; }
  .hero h1 { font-size: 48px; }
  .hero-media { max-width: 460px; }
  .split { grid-template-columns: 1fr; gap: 32px; }
  .split .aside { position: static; }
  .visit { grid-template-columns: 1fr; gap: 40px; }
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  /* The two compost columns stack; the steps stay 2x2 underneath, and the
     photographs stay side by side so they still read as before-and-after. */
  .compost-layout { grid-template-columns: 1fr; gap: 48px; }
  /* Stacked, the column is the full page width — hold the prose to a readable
     measure and the photographs to roughly the size they are on desktop. */
  .compost-intro h2, .compost-intro > p { max-width: 62ch; }
  .compost-photos { max-width: 560px; }
  .living-facts { grid-template-columns: repeat(2, 1fr); }
  .avail { grid-template-columns: repeat(2, 1fr); }
  .notes { grid-template-columns: 1fr; }
  .tstack { grid-template-columns: 1fr; gap: 28px; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  :root { --pad: 20px; }
  .nav { display: none; }
  .nav.open {
    display: flex; flex-direction: column; align-items: flex-start;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--bg); border-bottom: 1px solid var(--line);
    padding: 18px var(--pad) 24px; gap: 18px;
  }
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 38px; border: 1px solid var(--line-3);
    border-radius: 8px; background: transparent; cursor: pointer; color: var(--ink);
  }
  .section-pad { padding-top: 60px; padding-bottom: 60px; }
  .hero { padding-top: 48px; padding-bottom: 48px; }
  .hero h1 { font-size: 38px; }
  .hero-media .quote { position: static; margin-top: 20px; max-width: none; }
  .nursery-head h2, .compost-intro h2, .gallery-head h2, .journal-head h2 { font-size: 30px; }
  .visit h2 { font-size: 34px; }
  .card-grid, .steps, .living-facts, .avail { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: 1fr; }
  /* Stacked, there is no row left to justify — drop the aspect-ratio flex
     weighting, which would otherwise apply its 0 basis to the frames' HEIGHT
     and collapse both photographs to nothing. Each frame simply takes the
     column's width and its photo's own height. */
  .photo-pair { flex-direction: column; align-items: stretch; }
  .photo-pair .frame { flex: 0 0 auto; }
}