/* ============================================================
   STELLAN — "Grove" (3rd option)
   Nature-forward and tactile: a full-bleed green hero, moss/sage
   as the one accent color, fabric and plant texture throughout,
   and a cursor "up close" fabric reveal. Brand stays Mrs Eaves + X.
   Loads AFTER option-a/css/styles.css (type, .reveal, .x-mark, footer).
   ============================================================ */

:root {
  --ink:        #25271f;          /* warm green-black */
  --ink-soft:   #565a48;
  --ink-faint:  #8d9079;
  --paper:      #fbfbf8;
  --paper-soft: #eef0e8;          /* pale sage-tinted stone */
  --line:       #e0e1d6;
  --moss:       #5e6647;          /* the one accent */
  --moss-deep:  #424935;
  --font-display: "Mrs Eaves", "EB Garamond", Georgia, serif;
  --font-body:    "Karla", system-ui, sans-serif;
  --edge: clamp(1.25rem, 5vw, 5rem);
}

body { background: var(--paper); color: var(--ink); }

/* ---- Header ---- */
.ghead {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: clamp(1.1rem, 2.4vw, 1.9rem) var(--edge);
  transition: background 0.5s, padding 0.5s, box-shadow 0.5s;
}
.ghead.solid { background: rgba(251,251,248,0.92); backdrop-filter: blur(8px); padding-top: 0.9rem; padding-bottom: 0.9rem; box-shadow: 0 1px 0 var(--line); }
.gbrand { font-family: var(--font-display); font-size: 1.55rem; letter-spacing: 0.42em; padding-left: 0.42em; color: #fff; transition: color 0.5s; }
.ghead.solid .gbrand { color: var(--ink); }
.gnav { display: flex; align-items: center; gap: clamp(1.1rem, 2.4vw, 2.1rem); }
.gnav a { font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.85); transition: color 0.4s; }
.ghead.solid .gnav a { color: var(--ink-soft); }
.gnav a:hover { color: #fff; }
.ghead.solid .gnav a:hover { color: var(--ink); }
.gnav .visit { border: 1px solid rgba(255,255,255,0.7); border-radius: 999px; padding: 0.5rem 1.2rem; color: #fff; }
.ghead.solid .gnav .visit { border-color: var(--moss); color: var(--moss); }
.gnav .visit:hover { background: #fff; color: var(--ink); }
.ghead.solid .gnav .visit:hover { background: var(--moss); color: #fff; }
.gnav-toggle { display: none; background: none; border: 0; width: 30px; height: 22px; position: relative; cursor: pointer; }
.gnav-toggle span { position: absolute; left: 0; right: 0; height: 1.5px; background: #fff; transition: 0.4s; }
.ghead.solid .gnav-toggle span { background: var(--ink); }
.gnav-toggle span:nth-child(1){top:2px}.gnav-toggle span:nth-child(2){top:10px}.gnav-toggle span:nth-child(3){top:18px}

/* ---- Buttons ---- */
.gbtn { display: inline-block; background: var(--moss); color: #fff; border: 1px solid var(--moss);
  font-family: var(--font-body); font-size: 0.7rem; letter-spacing: 0.24em; text-transform: uppercase; padding: 1rem 2.3rem;
  transition: background 0.4s, color 0.4s; }
.gbtn:hover { background: transparent; color: var(--moss); }
.gbtn--on-dark { background: rgba(255,255,255,0.95); color: var(--ink); border-color: #fff; }
.gbtn--on-dark:hover { background: transparent; color: #fff; }
.gbtn--ghost { background: transparent; color: var(--moss); }
.gbtn--ghost:hover { background: var(--moss); color: #fff; }

/* ---- Hero (full-bleed green) ---- */
.ghero { position: relative; min-height: 100svh; display: grid; align-items: center; justify-items: center; text-align: center; overflow: hidden; color: #fff; }
.ghero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ghero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(22,22,19,0.5), rgba(22,22,19,0.32) 42%, rgba(22,22,19,0.62)); }
.ghero .inner { position: relative; z-index: 2; padding: 7rem var(--edge) 0; max-width: 50rem; }
.ghero .eyebrow { font-size: 0.74rem; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(255,255,255,0.85); margin-bottom: 1.6rem; }
.ghero h1 { font-family: var(--font-display); font-weight: 400; line-height: 1.0; font-size: clamp(2.8rem, 7vw, 6rem); letter-spacing: -0.01em; margin: 0; }
.ghero h1 em { font-style: italic; }
.ghero p { margin: 1.6rem auto 0; max-width: 34rem; color: rgba(255,255,255,0.9); font-size: 1.12rem; }
.ghero .cta { margin-top: 2.4rem; display: flex; gap: 0.9rem; justify-content: center; flex-wrap: wrap; }
.ghero .scroll-cue { position: absolute; bottom: 1.8rem; left: 50%; transform: translateX(-50%); z-index: 2; font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.7); }

/* ---- Section frame ---- */
.g-wrap { max-width: 80rem; margin-inline: auto; padding-inline: var(--edge); }
.g-sec { padding: clamp(4rem, 9vw, 8rem) 0; }
.g-eyebrow { font-size: 0.72rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--moss); margin: 0 0 1rem; }
.g-h2 { font-family: var(--font-display); font-weight: 400; line-height: 1.08; font-size: clamp(2rem, 4.5vw, 3.3rem); margin: 0; }
.g-h2 em { font-style: italic; color: var(--moss); }
.g-lead { color: var(--ink-soft); max-width: 54ch; margin-top: 1.1rem; }
.g-center { text-align: center; } .g-center .g-lead { margin-inline: auto; }

/* X divider with moss */
.g-div { display: flex; align-items: center; gap: 1.4rem; color: var(--line); padding: 0 var(--edge); max-width: 80rem; margin: 0 auto; }
.g-div::before, .g-div::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.g-div .x-mark { width: 22px; height: 22px; color: var(--moss); opacity: 0.7; }

/* ---- Philosophy ---- */
.g-phil { text-align: center; max-width: 52rem; margin-inline: auto; }
.g-phil blockquote { margin: 0; font-family: var(--font-display); font-size: clamp(1.7rem, 3.6vw, 2.7rem); line-height: 1.3; }
.g-phil blockquote .moss { color: var(--moss); font-style: italic; }

/* ---- Fabric "up close" reveal ---- */
.fabric { background: var(--paper-soft); }
.fabric-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; margin-top: clamp(2rem, 4vw, 3rem); }
.fabric-stage { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--paper); cursor: crosshair; }
.fabric-base, .fabric-top { position: absolute; inset: 0; width: 100%; height: 100%; }
.fabric-base { object-fit: cover; }
.fabric-top { background-size: cover; background-position: center;
  -webkit-mask-image: radial-gradient(circle 180px at var(--mx,-999px) var(--my,-999px), #000 36%, rgba(0,0,0,0.5) 66%, transparent 100%);
          mask-image: radial-gradient(circle 180px at var(--mx,-999px) var(--my,-999px), #000 36%, rgba(0,0,0,0.5) 66%, transparent 100%);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.fabric-hint { position: absolute; left: 1rem; bottom: 1rem; z-index: 3; font-size: 0.64rem; letter-spacing: 0.2em; text-transform: uppercase; color: #fff; background: rgba(20,24,16,0.45); padding: 0.45rem 0.8rem; pointer-events: none; transition: opacity 0.4s; }
.fabric-stage.on .fabric-hint { opacity: 0; }

/* ---- Shop categories (objects on a shelf) ---- */
.g-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.5vw, 2rem); margin-top: clamp(2.5rem, 5vw, 4rem); }
.g-card figure { margin: 0 0 1rem; aspect-ratio: 4 / 5; overflow: hidden; background: var(--paper-soft); }
.g-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s cubic-bezier(0.2,0.7,0.2,1); }
.g-card:hover img { transform: scale(1.05); }
.g-card h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; margin: 0 0 0.2rem; }
.g-card p { color: var(--ink-soft); font-size: 0.95rem; margin: 0 0 0.5rem; }
.g-card .go { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--moss); border-bottom: 1px solid var(--moss); padding-bottom: 2px; }

/* ---- Design feature ---- */
.g-design { display: grid; grid-template-columns: 1.1fr 0.9fr; align-items: stretch; }
.g-design figure { margin: 0; overflow: hidden; min-height: 32rem; }
.g-design figure img { width: 100%; height: 100%; object-fit: cover; }
.g-design .copy { background: var(--moss-deep); color: #fff; padding: clamp(2.5rem, 6vw, 5rem); align-self: center; }
.g-design .copy .g-eyebrow { color: rgba(255,255,255,0.7); }
.g-design .copy .g-h2 em { color: #c7cdb4; }
.g-design .copy p { color: rgba(255,255,255,0.82); margin-top: 1rem; max-width: 40ch; }
.g-design .copy .gbtn { margin-top: 1.7rem; background: #fff; color: var(--ink); border-color: #fff; }
.g-design .copy .gbtn:hover { background: transparent; color: #fff; }

/* ---- Visit ---- */
.g-visit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.2rem, 3vw, 2.4rem); margin-top: clamp(2.5rem, 5vw, 4rem); }
.g-visit-card { border: 1px solid var(--line); padding: clamp(1.8rem, 3vw, 2.6rem); background: var(--paper); }
.g-visit-card .place { font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--moss); }
.g-visit-card h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.9rem; margin: 0.3rem 0 1rem; }
.g-visit-card address { font-style: normal; color: var(--ink-soft); line-height: 1.8; }
.g-visit-card address a { color: var(--ink); border-bottom: 1px solid var(--line); }
.g-visit-card .hours { margin-top: 1rem; font-size: 0.94rem; color: var(--ink-soft); }
.g-visit-card .links { margin-top: 1.4rem; }
.g-visit-card .links a { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--moss); border-bottom: 1px solid var(--moss); padding-bottom: 2px; }

/* ---- Footer tint (reuses base .footer markup) ---- */
.footer { background: var(--moss-deep); }
.footer .big-x { color: rgba(255,255,255,0.4); }

@media (max-width: 860px) {
  .gnav { position: fixed; inset: 0 0 0 auto; width: min(80vw,360px); flex-direction: column; justify-content: center; align-items: flex-start; gap: 1.5rem; background: var(--paper); padding: 2rem; transform: translateX(100%); transition: transform 0.5s cubic-bezier(0.2,0.7,0.2,1); box-shadow: -1px 0 0 var(--line); }
  .gnav.open { transform: none; }
  .gnav a, .ghead .gnav a { color: var(--ink-soft); font-size: 1.05rem; }
  .gnav .visit, .ghead .gnav .visit { border-color: var(--moss); color: var(--moss); }
  .gnav-toggle { display: block; z-index: 60; }
  body.menu-open .gnav-toggle span { background: var(--ink); }
  body.menu-open .gnav-toggle span:nth-child(1){transform:translateY(8px) rotate(45deg)}
  body.menu-open .gnav-toggle span:nth-child(2){opacity:0}
  body.menu-open .gnav-toggle span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
  .fabric-grid { grid-template-columns: 1fr; }
  .fabric-stage { cursor: default; }
  .g-grid3 { grid-template-columns: 1fr; }
  .g-design { grid-template-columns: 1fr; }
  .g-design .copy { margin-top: 0; }
  .g-visit-grid { grid-template-columns: 1fr; }
}

/* Succulents demoted to a faint background texture (not a focal hero). */
.phil-bg { position: relative; overflow: hidden; }
.phil-bg::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: url("../../assets/img/succulents-green-sm.jpg") center/cover no-repeat;
  opacity: 0.08;
}
.phil-bg > * { position: relative; z-index: 1; }