.guide-body { background: #dce9dd; }
.guide-nav {
  position: relative;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 92px;
  padding: 0 var(--gutter);
  color: #dce9dd;
  background: #263d2a;
  border-bottom: 1px solid rgba(220,233,221,.19);
}
.back-link { min-height: 44px; display: inline-flex; align-items: center; gap: 1.5rem; font-size: .62rem; font-weight: 800; letter-spacing: .16em; text-decoration: none; text-transform: uppercase; }
.back-link span { font-family: var(--display); font-size: 1.25rem; }
.guide-hero {
  position: relative;
  min-height: 740px;
  display: grid;
  align-content: center;
  padding: 8rem var(--gutter);
  color: #e9f1e9;
  background:
    radial-gradient(circle at 72% 46%, rgba(111,143,95,.28), transparent 33%),
    #263d2a;
  overflow: hidden;
}
.guide-hero::after { content: ''; position: absolute; width: min(55vw, 760px); aspect-ratio: 1; right: -5%; top: 3%; border: 1px solid rgba(220,233,221,.13); border-radius: 50%; }
.guide-hero .eyebrow { position: relative; z-index: 2; color: #afc4b0; }
.guide-hero h1 { position: relative; z-index: 2; max-width: 980px; margin: 0; font-family: var(--display); font-size: clamp(5rem, 9vw, 9rem); font-weight: 300; letter-spacing: -.065em; line-height: .79; }
.guide-hero h1 em { color: #9caf8c; font-weight: 300; }
.guide-lede { position: relative; z-index: 2; max-width: 31rem; margin: 3.2rem 0 0 8%; color: #c4d3c5; }
.guide-stamp { position: absolute; right: var(--gutter); top: 4rem; z-index: 3; width: 115px; height: 115px; display: grid; place-content: center; text-align: center; border: 1px solid #819a82; border-radius: 50%; transform: rotate(8deg); }
.guide-stamp span, .guide-stamp small { font-size: .45rem; letter-spacing: .13em; text-transform: uppercase; }
.guide-stamp b { font-family: var(--display); font-size: 2.6rem; font-style: italic; font-weight: 300; line-height: 1; }
.guide-botanical { position: absolute; z-index: 1; right: 8%; bottom: -8%; width: min(28vw, 370px); opacity: .38; }
.guide-botanical path { fill: none; stroke: #b5c9b4; stroke-width: 1.2; }
.guide-botanical ellipse { fill: rgba(111,143,95,.3); stroke: #b5c9b4; }

.guide-article { display: grid; grid-template-columns: 240px minmax(0, 790px); justify-content: center; gap: clamp(3rem, 8vw, 9rem); padding: 9rem var(--gutter) 11rem; background: #e5eee5; }
.guide-toc { position: sticky; top: 2rem; align-self: start; display: grid; border-top: 1px solid rgba(32,50,38,.3); }
.guide-toc span { padding: 1.2rem 0 1.6rem; font-size: .58rem; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; }
.guide-toc a { min-height: 44px; display: flex; align-items: center; border-top: 1px solid rgba(32,50,38,.15); font-family: var(--display); font-size: 1.05rem; font-style: italic; text-decoration: none; }
.guide-copy section { padding-bottom: 4.75rem; margin-bottom: 4.75rem; border-bottom: 1px solid rgba(32,50,38,.24); scroll-margin-top: 2rem; }
.guide-copy section:last-child { padding-bottom: 0; margin-bottom: 0; border: 0; }
.guide-number { margin: 0 0 2rem !important; color: #536d56 !important; font-size: .58rem !important; font-weight: 800; letter-spacing: .18em; }
.guide-copy h2 { max-width: 700px; margin: 0 0 2.8rem; font-family: var(--display); font-size: clamp(2.7rem, 5vw, 4.7rem); font-weight: 300; letter-spacing: -.045em; line-height: .95; }
.guide-copy p { max-width: 700px; margin: 0 0 1.45rem; color: #344a39; font-size: .98rem; line-height: 1.9; }
.guide-copy code { padding: .12em .35em; color: #28432e; background: rgba(111,143,95,.14); font-family: var(--body); font-size: .85em; font-weight: 700; }
.token-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 0 0 2.8rem; background: rgba(32,50,38,.18); border: 1px solid rgba(32,50,38,.18); }
.token-grid div { display: grid; grid-template-columns: 54px 1fr auto; align-items: center; gap: 1rem; padding: 1rem; background: #e5eee5; }
.token-grid i { width: 54px; aspect-ratio: 1; background: var(--swatch); border-radius: 50%; border: 1px solid rgba(32,50,38,.13); }
.token-grid b { font-family: var(--display); font-size: 1.15rem; font-weight: 400; }
.token-grid span { color: #526756; font-size: .55rem; letter-spacing: .1em; text-transform: uppercase; }

@media (max-width: 760px) {
  .guide-nav { min-height: 72px; }
  .guide-nav .wordmark small { display: none; }
  .back-link { gap: .7rem; }
  .guide-hero { min-height: 660px; padding-top: 8rem; padding-bottom: 7rem; }
  .guide-hero h1 { font-size: clamp(3.7rem, 16.5vw, 4.65rem); line-height: .82; }
  .guide-lede { margin-left: .6rem; }
  .guide-stamp { width: 88px; height: 88px; top: 2.5rem; right: 1rem; }
  .guide-stamp b { font-size: 2rem; }
  .guide-botanical { width: 65vw; right: -16%; bottom: -2%; }
  .guide-article { grid-template-columns: 1fr; gap: 4rem; padding-top: 4.5rem; padding-bottom: 6rem; }
  .guide-toc { position: static; }
  .guide-copy section { padding-bottom: 4.5rem; margin-bottom: 4.5rem; }
  .guide-copy h2 { font-size: 2.8rem; }
  .guide-copy p { font-size: .92rem; line-height: 1.85; }
  .token-grid { grid-template-columns: 1fr; }
}

/* Pass 2 — the guide demonstrates the layers it describes. */
.guide-body { background: #d6e4d8; }
.guide-nav { position: absolute; left: 0; right: 0; background: transparent; }
.guide-nav .wordmark,.back-link { position: relative; z-index: 4; }
.back-link span { transition: transform .3s ease; }
.back-link:hover span { transform: translate(5px,-5px); }
.guide-hero {
  min-height: 900px;
  padding-top: 11rem;
  background:
    linear-gradient(105deg,rgba(220,233,221,.045) 0 1px,transparent 1px) 0 0/12vw 100%,
    radial-gradient(circle at 77% 48%,rgba(111,143,95,.28),transparent 32%),
    linear-gradient(145deg,#182f21,#27472e 72%,#1a3223);
}
.guide-hero::before { content: 'anatomy of a closed atmosphere'; position: absolute; right: var(--gutter); bottom: 2rem; color: rgba(220,233,221,.5); font-size: .5rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.guide-hero::after { width: min(62vw,880px); right: -8%; top: 8%; }
.guide-hero .eyebrow { margin-left: 7%; }
.guide-hero h1 { max-width: 1050px; font-size: clamp(6rem,9.4vw,10rem); line-height: .75; }
.guide-hero h1 em { display: block; margin-left: 7%; }
.guide-lede { margin-left: 20%; padding-left: 1.4rem; border-left: 1px solid rgba(204,220,204,.3); }
.guide-stamp { top: 9.5rem; right: 4%; width: 128px; height: 128px; backdrop-filter: blur(5px); }
.guide-botanical { right: 1%; width: min(27vw,390px); opacity: .3; }
.guide-vessel {
  position: absolute;
  z-index: 1;
  right: 12%;
  top: 22%;
  width: min(31vw,430px);
  height: min(40vw,550px);
  border: 1px solid rgba(222,238,222,.23);
  border-radius: 45% 45% 36% 36%;
  box-shadow: inset 15px 0 30px rgba(255,255,255,.06), inset -24px -10px 34px rgba(12,30,18,.22), 0 30px 80px rgba(8,20,12,.14);
  opacity: .88;
}
.guide-vessel::before,.guide-vessel::after { content: ''; position: absolute; left: 13%; right: 13%; height: 18px; border: 1px solid rgba(216,232,220,.28); background: #4c3427; }
.guide-vessel::before { top: -8px; border-radius: 50% 50% 20% 20%; }
.guide-vessel::after { bottom: -9px; border-radius: 20% 20% 50% 50%; }
.guide-soil { position: absolute; left: 5%; right: 5%; bottom: 4%; height: 25%; border-radius: 50% 50% 30% 30%; background: linear-gradient(rgba(111,143,95,.52),rgba(34,65,41,.74)); }
.guide-frond { position: absolute; bottom: 18%; width: 1px; background: #9bb394; transform-origin: bottom; }
.guide-frond::before { content: ''; position: absolute; inset: 0 -34px 0 -34px; background: repeating-linear-gradient(155deg,transparent 0 20px,rgba(150,177,142,.42) 21px 31px,transparent 32px 42px); clip-path: polygon(50% 0,100% 94%,50% 76%,0 94%); }
.guide-frond.f1 { left: 46%; height: 52%; transform: rotate(-6deg); }
.guide-frond.f2 { left: 68%; height: 39%; transform: rotate(16deg); }
.guide-drop { position: absolute; z-index: 2; width: 7px; height: 10px; border: 1px solid rgba(239,248,240,.7); border-radius: 50% 50% 58% 58%; background: rgba(255,255,255,.1); animation: guideDrop 6s ease-in infinite; }
.guide-drop.d1 { left: 20%; top: 27%; }
.guide-drop.d2 { right: 19%; top: 19%; animation-delay: -2.5s; }
.guide-drop.d3 { left: 32%; top: 50%; animation-delay: -4s; }
@keyframes guideDrop { 0%,30% { transform: translateY(0) scale(.7); opacity: .3; } 60% { opacity: 1; } 100% { transform: translateY(150px) scale(1,1.6); opacity: 0; } }

.guide-article { grid-template-columns: 230px minmax(0,840px); padding-top: 10rem; background: radial-gradient(circle at 70% 8%,rgba(255,255,255,.85),transparent 23%),#e5eee5; }
.guide-toc span { color: #526a56; }
.guide-toc a { transition: padding-left .25s ease,color .25s ease; }
.guide-toc a:hover { padding-left: .65rem; color: #527352; }
.guide-copy section { position: relative; }
.guide-copy h2 { font-size: clamp(3rem,5.4vw,5.2rem); }
.guide-copy p { font-size: 1rem; }
.guide-number { display: flex; align-items: center; gap: 1rem; }
.guide-number::after { content: ''; width: 4rem; height: 1px; background: currentColor; opacity: .35; }
.system-map { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; margin-top: 3.5rem; border-top: 1px solid rgba(32,50,38,.2); border-bottom: 1px solid rgba(32,50,38,.2); }
.system-map div { padding: 1.5rem .8rem; }
.system-map div:first-child { padding-left: 0; }
.system-map span,.system-map small { display: block; color: #58705b; font-size: .52rem; letter-spacing: .12em; text-transform: uppercase; }
.system-map b { display: block; margin: 1rem 0 .35rem; font-family: var(--display); font-size: 1.25rem; font-weight: 400; }
.system-map > i { align-self: center; color: #6c856d; font-family: var(--display); font-size: 1.5rem; }
.token-grid { box-shadow: 14px 18px 0 rgba(63,92,64,.06); }
.token-grid div { min-height: 100px; }
.token-grid i { border-radius: 50% 46% 52% 48%; box-shadow: inset 0 0 0 7px rgba(255,255,255,.12); }

@media (max-width: 900px) {
  .guide-hero { min-height: 820px; }
  .guide-hero h1 { font-size: clamp(5rem,11vw,7rem); }
  .guide-vessel { right: 3%; width: 38vw; height: 50vw; }
  .guide-article { grid-template-columns: 190px minmax(0,1fr); gap: 4rem; }
}

@media (max-width: 760px) {
  .guide-hero { min-height: 740px; padding-top: 10rem; }
  .guide-hero::before { right: 1rem; bottom: 1rem; }
  .guide-hero h1 { font-size: clamp(4rem,17.5vw,4.8rem); line-height: .77; }
  .guide-hero h1 em { margin-left: 0; }
  .guide-hero .eyebrow { margin-left: 0; }
  .guide-lede { margin: 3.2rem 0 0 .5rem; max-width: 19rem; }
  .guide-stamp { top: 6rem; }
  .guide-vessel { right: -18%; top: 34%; width: 65vw; height: 82vw; opacity: .38; }
  .guide-botanical { display: none; }
  .guide-article { grid-template-columns: 1fr; padding-top: 5rem; }
  .guide-copy h2 { font-size: 3rem; }
  .system-map { grid-template-columns: 1fr; }
  .system-map > i { display: none; }
  .system-map div,.system-map div:first-child { padding: 1.2rem 0; border-bottom: 1px solid rgba(32,50,38,.12); }
}

@media (prefers-reduced-motion: reduce) {
  .guide-drop { animation: none !important; }
}

/* Pass 3 — the field guide enters like an opened specimen drawer. */
.guide-hero > .eyebrow,
.guide-hero > h1,
.guide-lede,
.guide-stamp,
.guide-vessel {
  animation: guideArrival 1s cubic-bezier(.16,.84,.24,1) both;
}
.guide-hero > .eyebrow { animation-delay: .12s; }
.guide-hero > h1 { animation-delay: .2s; }
.guide-lede { animation-delay: .38s; }
.guide-vessel { animation-delay: .32s; animation-name: guideSpecimenArrival; animation-duration: 1.35s; }
.guide-stamp { animation-delay: .58s; }
@keyframes guideArrival { from { opacity: 0; transform: translateY(16px); filter: blur(7px); } }
@keyframes guideSpecimenArrival { from { opacity: 0; transform: translate(24px,12px) scale(.96); filter: blur(9px); } }
.guide-copy p { text-wrap: pretty; }
.guide-copy h2 { text-wrap: balance; }
.guide-toc a:hover, .guide-toc a:focus-visible { padding-left: .65rem; color: #365e3c; }
.token-grid div { transition: background .3s ease, transform .3s cubic-bezier(.16,.84,.24,1); }
.token-grid div:hover { position: relative; z-index: 2; background: #f0f5ef; transform: translateY(-3px); }
.token-grid span { font-variant-numeric: tabular-nums; }
.back-link:focus-visible span { transform: translate(5px,-5px); }

@media (prefers-reduced-motion: reduce) {
  .guide-hero > .eyebrow,
  .guide-hero > h1,
  .guide-lede,
  .guide-stamp,
  .guide-vessel { animation: none !important; opacity: 1; filter: none; transform: none; }
  .guide-stamp { transform: rotate(8deg); }
}