/* loam & light — concept build · Rod & Staff Media · 2026-08-08
   light-editorial lane: paper / ink / sage / terracotta · Fraunces + Instrument Sans */

:root {
  --paper: #F6F2E9;
  --paper-2: #EFEADD;
  --ink: #262419;
  --sage: #7B8A6A;
  --terra: #C06B44;
  --mut: #8C8574;
  --hairline: rgba(38, 36, 25, 0.14);
  --serif: "Fraunces", Georgia, serif;
  --sans: "Instrument Sans", system-ui, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: auto; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--sage); color: var(--paper); }

/* contour backdrop */
.contours { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.contour { fill: none; stroke: var(--sage); stroke-width: 1.1; opacity: 0.22; }

/* ---------- header ---------- */
#hdr {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: baseline; gap: 28px;
  padding: 22px 5vw;
  background: linear-gradient(to bottom, rgba(246,242,233,0.96) 60%, rgba(246,242,233,0));
}
.wordmark { font-family: var(--serif); font-weight: 500; font-size: 1.35rem; color: var(--ink); text-decoration: none; letter-spacing: 0.01em; }
.amp { color: var(--terra); font-style: italic; }
nav { margin-left: auto; display: flex; gap: 26px; align-items: baseline; }
.nav-link { font-size: 0.86rem; color: var(--ink); text-decoration: none; letter-spacing: 0.04em; border-bottom: 1px solid transparent; padding-bottom: 2px; transition: border-color 0.25s, color 0.25s; }
.nav-link:hover { border-color: var(--sage); }
.nav-link.is-active { border-color: var(--terra); }
.nav-cta { color: var(--terra); }

/* ---------- structure ---------- */
main { position: relative; z-index: 1; }
section { padding: 90px 5vw; max-width: 1180px; margin: 0 auto; }
.kicker {
  display: block; font-size: 0.72rem; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--sage); margin-bottom: 22px;
}

/* ---------- hero ---------- */
.hero { padding-top: 190px; }
.hero-short { padding-top: 170px; padding-bottom: 30px; }
h1, h2 { font-family: var(--serif); font-weight: 380; letter-spacing: -0.01em; }
.hero h1 { font-size: clamp(2.9rem, 7.4vw, 6.2rem); line-height: 1.02; }
.hero h1 em, .contact h2 em { font-style: italic; color: var(--sage); }
.hero-sub { max-width: 460px; margin-top: 26px; color: var(--mut); }

.frame { margin-top: 64px; }
.frame-img {
  aspect-ratio: 4 / 3; background-size: cover; background-position: center;
  border-radius: 2px;
}
.frame-wide .frame-img { aspect-ratio: 21 / 9; }
.frame figcaption { margin-top: 12px; font-size: 0.78rem; color: var(--mut); letter-spacing: 0.06em; }

/* botanical placeholder art */
.frame-art .frame-img { display: grid; place-items: center; background: var(--paper-2); }
.frame-art svg { width: 52%; height: 52%; }
.botanical path { fill: none; stroke: var(--sage); stroke-width: 2.4; stroke-linecap: round; }
.art-leaf .botanical path { stroke: var(--terra); }

/* ---------- philosophy / studio ---------- */
.phi-line { font-family: var(--serif); font-weight: 380; font-size: clamp(1.5rem, 3.2vw, 2.5rem); line-height: 1.3; max-width: 900px; }
@media (max-width: 900px) { .br-wide { display: none; } }

/* ---------- featured gardens ---------- */
.sec-row { display: flex; align-items: baseline; justify-content: space-between; }
.text-link { font-size: 0.86rem; color: var(--terra); text-decoration: none; border-bottom: 1px solid rgba(192,107,68,0.4); padding-bottom: 2px; }
.text-link:hover { border-color: var(--terra); }
.garden-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; margin-top: 40px; }
.garden-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .garden-list, .garden-grid { grid-template-columns: 1fr; } }
.garden { text-decoration: none; color: var(--ink); }
.garden .frame { margin-top: 0; overflow: hidden; }
.garden .frame-img { transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.garden:hover .frame-img { transform: scale(1.035); }
.garden-meta { margin-top: 14px; }
.garden-meta h3 { font-family: var(--serif); font-weight: 450; font-size: 1.25rem; }
.garden-meta span { font-size: 0.8rem; color: var(--mut); letter-spacing: 0.04em; }

/* ---------- process ---------- */
.steps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px; }
@media (max-width: 980px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .steps { grid-template-columns: 1fr; } }
.step { border-top: 1px solid var(--hairline); padding-top: 20px; }
.step-num { font-family: var(--serif); font-style: italic; color: var(--terra); font-size: 1.1rem; }
.step h3 { font-family: var(--serif); font-weight: 450; font-size: 1.2rem; margin: 8px 0 8px; }
.step p { font-size: 0.9rem; color: var(--mut); }

/* ---------- latin index ---------- */
.index-band { background: var(--paper-2); max-width: none; }
.index-band .kicker, .index-band .latin { max-width: 1180px; margin-inline: auto; }
.latin { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 30px; }
@media (max-width: 900px) { .latin { grid-template-columns: repeat(2, 1fr); } }
.latin span { font-family: var(--serif); font-style: italic; font-weight: 350; font-size: 1.05rem; color: var(--ink); border-bottom: 1px solid var(--hairline); padding-bottom: 10px; }

/* ---------- contact ---------- */
.contact { text-align: center; padding-top: 130px; padding-bottom: 150px; }
.contact h2 { font-size: clamp(2.6rem, 6.5vw, 5rem); line-height: 1.04; margin-bottom: 40px; }
.btn-quiet {
  display: inline-block; cursor: pointer; text-decoration: none;
  font-family: var(--sans); font-size: 0.92rem; letter-spacing: 0.06em; color: var(--paper);
  background: var(--ink); border: 0; padding: 16px 34px; border-radius: 999px;
  transition: background 0.25s;
}
.btn-quiet:hover { background: var(--terra); }
.sent-note { display: none; margin-top: 22px; color: var(--terra); font-size: 0.88rem; font-style: italic; font-family: var(--serif); }
.contact.sent .sent-note { display: block; }

/* ---------- footer / badge ---------- */
footer { position: relative; z-index: 1; border-top: 1px solid var(--hairline); padding: 30px 5vw 42px; text-align: center; font-size: 0.82rem; color: var(--mut); }
.foot-note { margin-top: 8px; font-size: 0.74rem; max-width: 540px; margin-inline: auto; }
.badge-concept {
  position: fixed; bottom: 18px; left: 18px; z-index: 60;
  background: rgba(246,242,233,0.9); border: 1px solid rgba(192,107,68,0.55);
  color: var(--terra); padding: 6px 10px; font-size: 0.58rem; letter-spacing: 0.2em; font-family: var(--sans);
}

/* ---------- swup transitions (per lenis-swup-transitions skill) ---------- */
html.is-changing .transition-fade { transition: opacity 0.35s ease; opacity: 1; }
html.is-animating .transition-fade { opacity: 0; }

/* ---------- reveal prep ---------- */
.js .reveal-title { visibility: hidden; }
.js.fonts-ready .reveal-title { visibility: visible; }
.mask-reveal { clip-path: inset(0 0 0 0); }

@media (prefers-reduced-motion: reduce) {
  .js .reveal-title { visibility: visible; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}