/* Page-specific: homepage */

/* Section head */
.section-01 .section-head{
  display: grid; gap: 10px; margin-bottom: 26px;
}
.section-01 .section-title{
  font-family: "Merriweather", serif; font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  line-height: 1.25; color: var(--hedge);
}
.section-01 .section-lead{
  max-width: 64ch; color: #2b4d3f;
}

/* Trio grid */
.trio-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 350px));
  gap: 18px;
  align-items: start;
}

.tilt-hover img{
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
  will-change: transform;
}

/* Additional paragraph block */
.section-01 .section-text{
  margin-top: 18px;
  display: grid; gap: 12px; max-width: 76ch;
  color: #2a4439;
}

/* Subtle hedge band decoration (CSS only) */
.section-01{
  background:
    linear-gradient(180deg, rgba(223,238,231,.45), rgba(223,238,231,0)) 0 0 / 100% 56px no-repeat;
  border-top: 1px solid #e2efe8;
}

/* Responsive rules for the grid */
@media (max-width: 1100px){
  .trio-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 980px){
  .trio-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); justify-items: center; }
}
@media (max-width: 620px){
  .trio-grid{ grid-template-columns: 1fr; justify-items: center; }
}
/* ===== SECTION 02 — Materials Weave ===== */
.section-02{
  background:
    linear-gradient(180deg, rgba(233,243,239,.7), rgba(233,243,239,0)) 0 0 / 100% 46px no-repeat;
  border-top: 1px solid #e2efe8;
}
.section-02 .section-head{ display:grid; gap:10px; margin-bottom:22px; }
.section-02 .section-title{ font-family:"Merriweather", serif; color: var(--hedge); }

.weave-grid{
  --gap: 18px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 350px));
  gap: var(--gap);
  align-items:start;
}
.weave-grid .weave.a { transform: rotate(-0.4deg); }
.weave-grid .weave.b { transform: rotate(0.6deg); }
.weave-grid .weave.c { transform: rotate(-0.2deg); }
.weave-grid .card{ transition: transform .25s ease, box-shadow .25s ease, rotate .25s ease; }
.weave-grid .card:hover{ rotate: 0deg; }

.section-02 .section-text{ margin-top: 16px; display:grid; gap:12px; max-width:76ch; color:#2a4439; }

/* ===== SECTION 03 — Snap Gallery ===== */
.section-03{ border-top: 1px solid #e2efe8; }
.snap-gallery{
  position: relative;
  margin-top: 10px;
  padding: 8px 46px; /* room for arrows */
  mask-image: linear-gradient(90deg, transparent 0, black 46px, black calc(100% - 46px), transparent 100%);
}
.snap-strip{
  list-style:none; margin:0; padding:0;
  display:flex; gap: 16px; overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling: touch;
}
.snap-card{
  flex: 0 0 auto;
  scroll-snap-align: center;
  width: 350px;
}
.snap-btn{
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid #d7e7df; background: #fff; box-shadow: var(--shadow);
  cursor: pointer; font-size: 22px; line-height: 1; color: var(--hedge);
  display:grid; place-items:center;
  transition: transform .2s ease, background-color .2s ease;
}
.snap-btn:hover{ transform: translateY(-50%) scale(1.05); background:#f4fbf8; }
.snap-prev{ left: 6px; }
.snap-next{ right: 6px; }

.section-03 .section-text{ margin-top: 18px; display:grid; gap:12px; max-width:76ch; color:#2a4439; }

/* ===== SECTION 04 — Hedge Court Zig ===== */
.section-04{
  border-top: 1px solid #e2efe8;
  background:
    radial-gradient(1200px 80px at 50% 0, rgba(223,238,231,.35), transparent 60%) no-repeat;
}
.zig{
  list-style: none; margin: 10px 0 0; padding: 0;
  display: grid; gap: 22px;
}
.zig-item{
  display: grid;
  grid-template-columns: minmax(0, 350px) minmax(0, 1fr);
  gap: 18px; align-items: start;
  position: relative;
}
.zig-item:nth-child(even){
  grid-template-columns: minmax(0, 1fr) minmax(0, 350px);
}
.zig-item:nth-child(even) .zig-text{ order: -1; } /* swap sides */
.zig-text h3{ margin: 2px 0 8px; color: var(--hedge); }
.zig-text p{ margin: 0; color:#2a4439; }

/* ===== Responsive tweaks for sections 02–04 ===== */
@media (max-width: 1100px){
  .weave-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); justify-items:center; }
}
@media (max-width: 980px){
  .weave-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px){
  .weave-grid{ grid-template-columns: 1fr; }
  .snap-gallery{ padding: 8px 38px; mask-image: linear-gradient(90deg, transparent 0, black 38px, black calc(100% - 38px), transparent 100%); }
  .snap-btn{ width: 34px; height: 34px; }
}
@media (max-width: 680px){
  .zig-item,
  .zig-item:nth-child(even){
    grid-template-columns: 1fr;
  }
  .zig-item:nth-child(even) .zig-text{ order: 0; }
}
/* ===== SECTION 05 — Coastal Plan (quilt + legend) ===== */
.section-05{
  border-top: 1px solid #e2efe8;
  background:
    linear-gradient(180deg, rgba(223,238,231,.35), rgba(223,238,231,0)) 0 0 / 100% 52px no-repeat;
}
.quilt-grid{
  --gap: 18px;
  display: grid;
  grid-template-columns: minmax(0, 350px) 1fr;
  grid-template-areas:
    "img1 legend"
    "img2 legend"
    "img3 legend";
  gap: var(--gap);
  align-items: start;
}
.quilt.a{ grid-area: img1; }
.quilt.b{ grid-area: img2; }
.quilt.c{ grid-area: img3; }
.legend-panel{
  grid-area: legend;
  background: #ffffff;
  border: 1px dashed #d2e5dd;
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  box-shadow: var(--shadow);
}
.legend-panel h3{ margin: 0 0 8px; font-family: "Merriweather", serif; color: var(--hedge); }
.legend-list{ margin: 0 0 8px; padding-left: 0; list-style: none; display: grid; gap: 6px; }
.legend-list .key{
  display: inline-block; width: 14px; height: 6px; border-radius: 6px; margin-right: 8px;
  vertical-align: middle;
}
.key-shelter{ background: #6b9f86; }
.key-vent{ background: #8aa69a; }
.key-drain{ background: #b8c8bf; }
.key-roost{ background: #e1c8a2; }
.legend-note{ color: #2a4439; margin: 6px 0 0; }

/* ===== SECTION 06 — Palette (swatches + media) ===== */
.section-06{ border-top: 1px solid #e2efe8; }
.swatch-grid{
  --gap: 16px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 350px));
  gap: var(--gap);
  align-items: start;
}
.swatch.tone{
  border-radius: var(--radius-lg);
  padding: 16px;
  border: 1px solid #ecf3ef;
  box-shadow: var(--shadow);
  background:
    linear-gradient(135deg, rgba(255,255,255,.5), rgba(255,255,255,.3)),
    repeating-linear-gradient(45deg, rgba(255,255,255,.0) 0, rgba(255,255,255,.0) 6px, rgba(0,0,0,.02) 6px, rgba(0,0,0,.02) 12px);
  transition: transform .25s ease;
}
.swatch.tone:hover{ transform: translateY(-4px); }
.swatch .swatch-label{ display:block; font-weight:700; color: var(--hedge); }
.swatch .swatch-note{ font-size:.9rem; color:#2a4439; }

.swatch.tone.sea-glass{ background-color: #dfeee7; }
.swatch.tone.hedge{ background-color: #cfe2d9; }
.swatch.tone.sand{ background-color: #efe9dc; }

.swatch.media{ background: #fff; }

/* ===== SECTION 07 — Microclimate (metrics) ===== */
.section-07{ border-top: 1px solid #e2efe8; }
.micro-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 350px));
  gap: 18px;
  align-items: start;
}
.micro-item .meter{ margin-top: 10px; }
.bar{
  position: relative;
  height: 10px;
  background: #eaf3ef;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid #dcebe4;
}
.bar-fill{
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #6b9f86, #8bb4a0);
  border-radius: inherit;
  transition: width .9s ease .2s;
}
.reveal.is-visible .bar-fill.to-70{ width: 70%; }
.reveal.is-visible .bar-fill.to-60{ width: 60%; }
.reveal.is-visible .bar-fill.to-85{ width: 85%; }

.meter-label{ margin: 6px 0 0; font-size: .95rem; color:#2a4439; }

/* ===== Responsive for sections 05–07 ===== */
@media (max-width: 1100px){
  .quilt-grid{ grid-template-columns: minmax(0, 350px) 1fr; }
  .swatch-grid, .micro-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); justify-items: center; }
}
@media (max-width: 980px){
  .quilt-grid{
    grid-template-columns: 1fr;
    grid-template-areas:
      "img1"
      "legend"
      "img2"
      "img3";
  }
  .swatch-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .micro-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px){
  .swatch-grid{ grid-template-columns: 1fr; }
  .micro-grid{ grid-template-columns: 1fr; }
}
/* ===== SECTION 08 — Benchcraft (stitch grid) ===== */
.section-08{
  border-top: 1px solid #e2efe8;
  background:
    linear-gradient(180deg, rgba(233,243,239,.55), rgba(233,243,239,0)) 0 0 / 100% 50px no-repeat,
    repeating-linear-gradient(90deg, transparent 0, transparent 18px, rgba(0,0,0,.02) 18px, rgba(0,0,0,.02) 19px);
}
.stitch-grid{
  --gap: 18px;
  display: grid;
  grid-template-columns: minmax(0, 350px) 1fr;
  grid-template-areas:
    "imgA notes"
    "imgB notes"
    "imgC notes";
  gap: var(--gap);
  align-items: start;
}
.stitch.a{ grid-area: imgA; }
.stitch.b{ grid-area: imgB; }
.stitch.c{ grid-area: imgC; }

.pull-notes{
  grid-area: notes;
  background: #ffffff;
  border: 1px dashed #d2e5dd;
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  box-shadow: var(--shadow);
}
.pull-notes h3{ margin: 0 0 8px; font-family:"Merriweather", serif; color: var(--hedge); }
.pull-notes ul{ margin: 0 0 8px; padding-left: 18px; }
.pull-notes .note{ margin: 0; color:#2a4439; }

/* ===== SECTION 09 — Edge Sound (ribbons) ===== */
.section-09{
  border-top: 1px solid #e2efe8;
  background:
    linear-gradient(180deg, rgba(223,238,231,.35), rgba(223,238,231,0)) 0 0 / 100% 42px no-repeat;
}
.ribbon-stack{
  display: grid; gap: 18px;
  grid-template-columns: repeat(3, minmax(0, 350px));
  align-items: start;
}
.ribbon-card{
  position: relative;
  overflow: hidden;
}
.ribbon-card::before,
.ribbon-card::after{
  content:""; position:absolute; inset:auto -30% -18% -30%;
  height: 40%; border-radius: 60% 60% 0 0 / 100% 100% 0 0;
  background: linear-gradient(180deg, rgba(107,159,134,.08), rgba(107,159,134,0));
  transform: rotate(-2deg);
}
.ribbon-card::after{ inset:auto -25% -8% -25%; height: 28%; opacity:.7; filter: blur(1px); }

.sound-bars{
  display:flex; gap:4px; margin-top:8px; height: 18px; align-items: flex-end;
}
.sound-bars span{
  display:block; width: 10px; height: 30%;
  background: linear-gradient(180deg, #8bb4a0, #6b9f86);
  border-radius: 4px;
  transform-origin: bottom;
  animation: bars 1.8s ease-in-out infinite alternate;
}
.sound-bars span:nth-child(2){ animation-delay: .1s; height: 45%; }
.sound-bars span:nth-child(3){ animation-delay: .2s; height: 65%; }
.sound-bars span:nth-child(4){ animation-delay: .3s; height: 55%; }
.sound-bars span:nth-child(5){ animation-delay: .4s; height: 35%; }

@keyframes bars{
  from{ transform: scaleY(.6); }
  to{ transform: scaleY(1); }
}
@media (prefers-reduced-motion: reduce){
  .sound-bars span{ animation: none; }
}

/* ===== SECTION 10 — Path Ledger (stepper) ===== */
.section-10{ border-top: 1px solid #e2efe8; }
.stepper{
  list-style: none; margin: 10px 0 0; padding: 0;
  display: grid; gap: 18px;
  grid-template-columns: repeat(3, minmax(0, 350px));
  align-items: start;
}
.step{ position: relative; }
.step .badge{
  position: absolute; top: -10px; left: -10px;
  width: 28px; height: 28px; border-radius: 50%;
  display:grid; place-items:center;
  background: #dfeee7; color: #2f5b46; font-weight:700;
  box-shadow: var(--shadow);
}
.step h3{ margin: 8px 0 4px; color: var(--hedge); }
.step p{ margin: 0; color:#2a4439; }

.progress{
  margin: 8px 0 6px; height: 8px; border-radius: 999px;
  background: #eaf3ef; border: 1px solid #dcebe4; overflow: hidden;
}
.progress .fill{
  display:block; height: 100%; width: 0;
  background: linear-gradient(90deg, #6b9f86, #8bb4a0);
  transition: width .9s ease;
}
.reveal.is-visible .progress .fill.f1{ width: 100%; transition-delay: .1s; }
.reveal.is-visible .progress .fill.f2{ width: 100%; transition-delay: .25s; }
.reveal.is-visible .progress .fill.f3{ width: 100%; transition-delay: .4s; }

/* ===== Responsive rules for sections 08–10 ===== */
@media (max-width: 1100px){
  .stitch-grid{ grid-template-columns: minmax(0, 350px) 1fr; }
  .ribbon-stack, .stepper{ grid-template-columns: repeat(3, minmax(0, 1fr)); justify-items: center; }
}
@media (max-width: 980px){
  .stitch-grid{
    grid-template-columns: 1fr;
    grid-template-areas:
      "imgA"
      "notes"
      "imgB"
      "imgC";
  }
  .ribbon-stack{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stepper{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px){
  .ribbon-stack{ grid-template-columns: 1fr; }
  .stepper{ grid-template-columns: 1fr; }
}
/* ===== SECTION 11 — Folio of Work ===== */
.section-11{ border-top: 1px solid #e2efe8; }
.folio-spread{
  display: grid; gap: 18px;
  grid-template-columns: 280px 1fr;
  align-items: start;
}
.folio-note{
  position: sticky; top: calc(var(--header-h) + 18px);
  background: #ffffff; border: 1px dashed #d2e5dd;
  border-radius: var(--radius-lg); padding: 14px 16px;
  box-shadow: var(--shadow);
}
.folio-note h3{ margin: 0 0 8px; font-family:"Merriweather", serif; color: var(--hedge); }
.folio-main{
  display: grid; gap: 18px;
  grid-template-columns: repeat(3, minmax(0, 350px));
  align-items: start;
}
.folio-text{
  background: #ffffff; border: 1px solid #ecf3ef; border-radius: var(--radius-lg);
  padding: 14px 16px; color:#2a4439; box-shadow: var(--shadow);
}

@media (max-width: 1100px){
  .folio-spread{ grid-template-columns: 1fr; }
  .folio-note{ position: relative; top: 0; }
  .folio-main{ grid-template-columns: repeat(3, minmax(0, 1fr)); justify-items: center; }
}
@media (max-width: 820px){
  .folio-main{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .folio-main{ grid-template-columns: 1fr; }
}

/* ===== SECTION 12 — Storm Etiquette ===== */
.section-12{
  border-top: 1px solid #e2efe8;
  background:
    radial-gradient(900px 90px at 50% 0, rgba(223,238,231,.35), transparent 60%) no-repeat;
}
.storm-grid{
  display: grid; gap: 18px;
  grid-template-columns: repeat(3, minmax(0, 350px));
  align-items: start;
}
.storm-card figure{ margin: 0; }
.storm-list{
  list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px;
}
.storm-list .dot{
  width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 8px;
  background: linear-gradient(180deg, #8bb4a0, #6b9f86);
  box-shadow: 0 1px 0 rgba(0,0,0,.06);
}
.storm-aside{
  background: #ffffff; border: 1px solid #ecf3ef; border-radius: var(--radius-lg);
  padding: 14px 16px; box-shadow: var(--shadow); color:#2a4439;
}
.storm-aside h3{ margin: 0 0 8px; font-family:"Merriweather", serif; color: var(--hedge); }

@media (max-width: 1100px){
  .storm-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); justify-items: center; }
}
@media (max-width: 900px){
  .storm-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px){
  .storm-grid{ grid-template-columns: 1fr; }
}

/* ===== SECTION 13 — Quiet Uses ===== */
.section-13{ border-top: 1px solid #e2efe8; }
.uses-layout{
  display: grid; gap: 18px;
  grid-template-columns: minmax(0, 350px) 1fr;
  align-items: start;
}
.rules{
  counter-reset: rule; margin: 0; padding-left: 0; list-style: none; display: grid; gap: 8px;
}
.rules li{
  background: #ffffff; border: 1px solid #ecf3ef; border-radius: var(--radius-lg);
  padding: 10px 12px; color:#2a4439; box-shadow: var(--shadow);
  position: relative; overflow: hidden;
}
.rules li::before{
  counter-increment: rule; content: counter(rule) ".";
  position: absolute; left: 10px; top: 8px; font-weight: 700; color: var(--hedge); opacity: .3;
}
.pull{
  margin: 12px 0 0; padding: 12px 14px;
  border-left: 4px solid var(--hedge); background: #f0f7f3; color:#28483b; border-radius: 8px;
}

@media (max-width: 820px){
  .uses-layout{ grid-template-columns: 1fr; }
}
/* ===== SECTION 14 — Hedge Grammar ===== */
.section-14{
  border-top: 1px solid #e2efe8;
  background:
    linear-gradient(180deg, rgba(223,238,231,.45), rgba(223,238,231,0)) 0 0 / 100% 48px no-repeat;
}
.grammar-grid{
  display: grid; gap: 18px;
  grid-template-columns: 1fr minmax(0, 350px);
  align-items: start;
}
.glyphs{ display: grid; gap: 12px; }
.glyph-row{
  display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start;
  background: #ffffff; border: 1px solid #ecf3ef; border-radius: var(--radius-lg);
  padding: 10px 12px; box-shadow: var(--shadow); color:#2a4439;
}
.glyph{
  height: 100%;
  min-height: 28px;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(107,159,134,.2), rgba(107,159,134,0)) 0 0 / 100% 40% no-repeat,
    repeating-linear-gradient(0deg, rgba(0,0,0,.04) 0 10px, rgba(0,0,0,.02) 10px 20px);
  animation: glyphBreath 3.6s ease-in-out infinite alternate;
}
@keyframes glyphBreath{
  from { transform: translateY(-2px); opacity: .9; }
  to   { transform: translateY(2px); opacity: 1; }
}

@media (max-width: 900px){
  .grammar-grid{ grid-template-columns: 1fr; }
}

/* ===== SECTION 15 — Evening Close ===== */
.section-15{ border-top: 1px solid #e2efe8; }
.close-board{
  display: grid; gap: 18px;
  grid-template-columns: 1fr minmax(0, 350px);
  align-items: start;
}
.close-steps{ display: grid; gap: 12px; }
.close-steps .row{
  display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: start;
  background: #ffffff; border: 1px solid #ecf3ef; border-radius: var(--radius-lg);
  padding: 10px 12px; box-shadow: var(--shadow); color:#2a4439;
}
.tick{
  height: 22px; border-radius: 999px; overflow: hidden;
  background: #eaf3ef; border: 1px solid #dcebe4; position: relative;
}
.tick .fill{
  position: absolute; inset: 0 auto 0 0; width: 0;
  background: linear-gradient(90deg, #6b9f86, #8bb4a0);
  transition: width .8s ease;
}
.reveal.is-visible .tick .fill.f-a{ width: 100%; transition-delay: .05s; }
.reveal.is-visible .tick .fill.f-b{ width: 100%; transition-delay: .2s; }
.reveal.is-visible .tick .fill.f-c{ width: 100%; transition-delay: .35s; }

.close-figs{
  display: grid; gap: 16px;
  grid-template-columns: 1fr;
}
.close-figs figure{ margin: 0; }

@media (max-width: 900px){
  .close-board{ grid-template-columns: 1fr; }
}