
.amber-frame {
  display: grid;
  grid-template-areas:
    "header"
    "main"
    "footer";
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}
.amber-arch { grid-area: header; }
.amber-main { grid-area: main; padding-top: var(--header-h); min-width: 0; }
.amber-path-end { grid-area: footer; min-width: 0; }
.amber-main__wrap, .amber-main__content { min-width: 0; }


.amber-band { position: relative; }
.amber-band--a { background: var(--color-surface); }
.amber-band--b { background: var(--color-surface-raised); }
.amber-band--hero { background: var(--color-bg); padding: var(--space-lg) 0 var(--space-xl); }

.amber-main__content > .amber-band:not(.amber-band--hero):nth-child(odd) { padding: var(--space-xl) 0 var(--space-2xl); }
.amber-main__content > .amber-band:not(.amber-band--hero):nth-child(even) { padding: var(--space-2xl) 0 var(--space-xl); }

.amber-blend__wrap, .amber-picking__wrap, .amber-letter__wrap, .amber-bloom__wrap,
.amber-hedge__wrap, .amber-routine__wrap, .amber-queries__wrap, .amber-label__wrap,
.amber-markers__wrap, .amber-last-row__wrap, .amber-stall-band__wrap, .amber-trug__wrap,
.amber-ground-rules__wrap, .amber-carrier__wrap, .amber-back__wrap, .amber-door__wrap {
  width: var(--frame-width);
  margin: 0 auto;
}

.amber-blend__inner, .amber-picking__inner, .amber-letter__inner, .amber-bloom__inner,
.amber-hedge__inner, .amber-routine__inner, .amber-queries__inner, .amber-label__inner,
.amber-markers__inner, .amber-last-row__inner {
  padding-left: 4vw;
  padding-right: 2vw;
  min-width: 0;
}
.amber-ground-rules__inner, .amber-carrier__inner, .amber-back__inner {
  max-width: 50rem;
  padding-left: 4vw;
  min-width: 0;
}


.amber-divider { position: absolute; top: 0; left: 0; right: 0; height: 0; z-index: 2; }
.amber-divider::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 1.75rem;
  height: 1.75rem;
  background: var(--color-accent);
  transform: translate(-50%, -50%) rotate(45deg);
  box-shadow: 0.15rem 0.15rem 0.3rem rgba(0, 0, 0, 0.3);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}


.amber-door {
  position: relative;
  min-height: 72vh;
  display: flex;
  align-items: flex-end;
  color: var(--color-text);
  background:
    radial-gradient(ellipse 60vw 50vh at 78% 28%, rgba(255, 196, 107, 0.38), transparent 70%),
    radial-gradient(circle at 10% 95%, rgba(143, 216, 236, 0.12), transparent 40%),
    linear-gradient(160deg, #3b2714 0%, #22180f 45%, #17120d 100%);
  padding: var(--space-lg) 0 var(--space-xl);
}
.amber-door::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 7, 4, 0.85), transparent 70%);
  pointer-events: none;
}
.amber-door > * { position: relative; }
.amber-door__wrap { width: var(--frame-width); }
.amber-door__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  grid-template-areas:
    "head photo"
    "body photo";
  column-gap: var(--space-xl);
  row-gap: var(--space-md);
  align-items: end;
  padding-left: 2vw;
}
.amber-door__head { grid-area: head; min-width: 0; }
.amber-door__photo { grid-area: photo; margin: 0; align-self: center; min-width: 0; }
.amber-door__body { grid-area: body; min-width: 0; }
.amber-door__img {
  display: block;
  width: 100%;
  max-width: min(100%, 34rem);
  height: auto;
  margin-left: auto;
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-md);
}


.amber-stall-band__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-xl);
  align-items: start;
  margin-top: var(--space-md);
}


.amber-trug__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--space-xl);
  align-items: start;
}

.amber-carrier__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg);
}
.amber-carrier__inner { max-width: 64rem; }

@media (max-width: 1023px) {
  .amber-door__inner { column-gap: var(--space-lg); padding-left: 0; }
  .amber-stall-band__grid, .amber-trug__grid { gap: var(--space-lg); }
}

@media (max-width: 767px) {
  :root { --header-top: 1.75rem; --header-bar: 3.75rem; --frame-width: 92vw; }
  .amber-door { min-height: 0; padding: var(--space-md) 0 var(--space-lg); }
  .amber-door__inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "head" "photo" "body";
    row-gap: var(--space-sm);
  }
  .amber-door__img { max-width: 100%; margin: 0 auto; }
  .amber-stall-band__grid, .amber-trug__grid, .amber-carrier__cols { grid-template-columns: minmax(0, 1fr); }
  .amber-blend__inner, .amber-picking__inner, .amber-letter__inner, .amber-bloom__inner,
  .amber-hedge__inner, .amber-routine__inner, .amber-queries__inner, .amber-label__inner,
  .amber-markers__inner, .amber-last-row__inner, .amber-ground-rules__inner,
  .amber-carrier__inner, .amber-back__inner { padding-left: 0; padding-right: 0; }
  .amber-main__content > .amber-band:not(.amber-band--hero):nth-child(odd) { padding: var(--space-lg) 0 var(--space-xl); }
  .amber-main__content > .amber-band:not(.amber-band--hero):nth-child(even) { padding: var(--space-xl) 0 var(--space-lg); }
}


.amber-body { min-height: 100vh; }
.amber-root, .amber-shell { min-height: 100vh; min-width: 0; }
.amber-blend, .amber-picking, .amber-letter, .amber-bloom, .amber-hedge, .amber-routine,
.amber-queries, .amber-label, .amber-markers, .amber-last-row, .amber-stall-band, .amber-trug,
.amber-ground-rules, .amber-carrier, .amber-back { scroll-margin-top: var(--header-h); }
.amber-stall-band__inner, .amber-trug__inner, .amber-trug__items, .amber-trug__info,
.amber-carrier__col, .amber-queries__body, .amber-path-end__ask-text, .amber-crumbs, .amber-walk__tile { min-width: 0; }
.amber-arch__item { list-style: none; }
.amber-arch__name { white-space: nowrap; }
.amber-trug__subtitle { font-size: var(--font-size-lg); }
