:root {
  color-scheme: light;
  --paper: #f7f3e9;
  --surface: #fffdf7;
  --ink: #192e29;
  --muted: #4f5e54;
  --line: #d7d8cb;
  --green: #1b3a33;
  --deep: #152f2b;
  --copper: #994221;
  --gold: #f1bd87;
  --serif: Georgia, 'Times New Roman', serif;
  --sans: 'Trebuchet MS', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 3px solid #a84a29; outline-offset: 4px; }
[hidden] { display: none !important; }
.icon-definitions { position: absolute; }
.icon { display: block; width: 14px; height: 14px; flex: 0 0 14px; fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
.icon-down-right { transform: rotate(90deg); }
.wrap { width: min(100% - 88px, 1184px); margin-inline: auto; }

.site-header { border-bottom: 1px solid var(--line); }
.header-inner, .footer-inner { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.header-inner { min-height: 74px; }
.identity { display: inline-flex; align-items: center; gap: 12px; font-size: .87rem; font-weight: 700; letter-spacing: .02em; }
.identity img { display: block; }
.header-link { display: inline-flex; align-items: center; gap: 16px; color: var(--green); font-size: .83rem; font-weight: 700; }
.header-link .icon, .footer-inner a .icon { color: var(--copper); }
.header-link:hover, .footer-inner a:hover { text-decoration: underline; text-underline-offset: 4px; }

.hero { display: grid; grid-template-columns: 1fr 1.03fr; gap: clamp(36px, 6.3vw, 90px); align-items: center; padding-block: 58px 62px; }
.eyebrow { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--copper); font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.accent-line { display: inline-block; width: 24px; height: 1px; flex: 0 0 24px; background: currentColor; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; }
h1 { margin: 15px 0 18px; font-size: clamp(4.1rem, 7.3vw, 7.45rem); line-height: .91; letter-spacing: -.084em; }
h1 span, h1 em { display: block; }
h1 em { color: var(--copper); font-weight: inherit; padding-inline-end: .12em; }
.mantra { margin: 0 0 13px; font-size: clamp(.95rem, 2vw, 1.16rem); letter-spacing: .055em; font-weight: 800; }
.intro { max-width: 415px; margin: 0 0 24px; color: var(--muted); font-size: 1rem; line-height: 1.65; }
.hero-link { display: inline-flex; min-height: 48px; align-items: center; gap: 26px; padding: 0 16px 0 18px; border-radius: 5px; background: var(--green); color: var(--surface); font-size: .88rem; font-weight: 700; transition: background .18s; }
.hero-link .icon { color: var(--gold); }
.hero-link:hover { background: #2b5148; }

.hero-art { position: relative; display: grid; grid-template-rows: auto 1fr auto; min-width: 0; min-height: 376px; padding: 19px; isolation: isolate; overflow: hidden; border-radius: 13px; background: radial-gradient(ellipse at 51% 48%, #294b42, var(--deep) 73%); color: #e8ebe0; }
.hero-art::before { position: absolute; z-index: -1; inset: 11px; border: 1px solid #b5c6b938; border-radius: 6px; content: ''; }
.art-top { display: flex; z-index: 1; justify-content: space-between; gap: 10px; padding: 7px 8px 0; color: #d6e0d3; font-size: .68rem; font-weight: 700; letter-spacing: .12em; }
.art-diagram { width: 100%; height: auto; max-height: 340px; place-self: center; }
.art-caption { z-index: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 9px; margin: -4px 0 5px; font-size: .73rem; letter-spacing: .025em; }
.art-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.caption-divider { width: 15px; height: 1px; background: #b5c6b980; }

.pathway { padding: 43px 0 51px; border-top: 1px solid var(--line); background: #edeee5; scroll-margin-top: 12px; }
.pathway-heading { display: flex; justify-content: space-between; align-items: end; gap: 16px 30px; margin: 0 0 22px; }
h2 { margin: 8px 0 0; font-size: clamp(2.25rem, 4.8vw, 3.65rem); line-height: 1.02; letter-spacing: -.06em; }
.pathway-instruction { margin: 0 0 4px; color: var(--muted); font-size: .9rem; line-height: 1.45; }
.pathway-layout { display: grid; grid-template-columns: 1.17fr 1fr; align-items: start; gap: 22px; }
.steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.step { position: relative; display: flex; flex-direction: column; justify-content: space-between; align-items: stretch; min-width: 0; min-height: 92px; gap: 9px; padding: 13px 15px; text-align: left; border: 1px solid #c8cfc1; border-radius: 8px; background: #f9f8f0; color: var(--ink); cursor: pointer; transition: background .18s, border-color .18s; }
.step:hover { border-color: #82998a; background: #fdfcf6; }
.step-meta { display: flex; align-items: center; gap: 8px; }
.step-number { font-size: .7rem; font-weight: 800; font-variant-numeric: tabular-nums; color: #476557; }
.step-arrow { display: grid; flex: 0 0 22px; width: 22px; height: 22px; place-items: center; margin-left: auto; border-radius: 50%; color: #416051; font-size: .9rem; line-height: 1; }
.step-arrow .icon { width: 12px; height: 12px; }
.step-title { display: block; font-family: var(--serif); font-size: clamp(1.18rem, 2vw, 1.55rem); letter-spacing: -.035em; line-height: 1.08; }
.step-note { font-size: .81rem; line-height: 1.35; }
.step.foundation { min-height: 150px; gap: 5px; padding: 14px 16px 16px; border-color: #39584c; background: var(--green); color: #fffaf0; }
.foundation:hover { background: #2b5148; }
.foundation .step-number, .foundation .step-arrow { color: var(--gold); }
.foundation .step-title { margin-top: auto; font-size: clamp(1.5rem, 3.1vw, 2.6rem); }
.foundation .step-note { color: #e1e9de; }
.step-kind { padding: 3px 6px; border: 1px solid #e8ba8475; border-radius: 3px; color: #f1c697; font-size: .54rem; font-weight: 800; line-height: 1.1; letter-spacing: .09em; text-transform: uppercase; }
.step[aria-selected="true"] { border-color: #ad5832; box-shadow: inset 0 0 0 1px #ad5832; }
.step[aria-selected="true"] .step-arrow { background: #eec197; color: #49291f; }
.step.foundation[aria-selected="true"] { border-color: #e3a46d; box-shadow: inset 0 0 0 1px #e3a46d; }

.details { min-width: 0; }
.panel { min-height: 335px; padding: 21px 23px 16px; scroll-margin-top: 14px; border: 1px solid #d1d1c3; border-top: 3px solid #ae5932; border-radius: 8px; background: var(--surface); box-shadow: 0 6px 18px #1c352709; }
.panel-index { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; color: var(--copper); font-size: .68rem; font-variant-numeric: tabular-nums; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.panel-index span { padding-left: 10px; border-left: 1px solid #d9cab8; }
.panel h3 { margin: 0 0 16px; font-size: clamp(2rem, 3.5vw, 3.05rem); line-height: 1; letter-spacing: -.06em; }
.panel dl { margin: 0; }
.panel dt, .practice span { margin-bottom: 3px; color: var(--green); font-size: .71rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.panel dd { margin: 0 0 12px; color: #35473e; font-size: .92rem; line-height: 1.5; }
.practice { margin: 5px 0 8px; padding: 9px 11px; border-left: 2px solid #bc744d; border-radius: 0 4px 4px 0; background: #f4eee1; color: #35473e; font-size: .85rem; line-height: 1.5; }
.practice span { display: block; }
.next-step { display: inline-flex; min-height: 44px; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 2px 1px; border: 0; background: transparent; color: var(--copper); text-align: left; font-size: .82rem; cursor: pointer; }
.next-name { font-weight: 800; }
.next-step:hover .next-name { text-decoration: underline; text-underline-offset: 3px; }
.noscript-note { color: var(--muted); }

.site-footer { border-top: 1px solid var(--line); }
.footer-inner { min-height: 74px; color: var(--muted); font-size: .8rem; }
.footer-inner p { margin: 0; line-height: 1.45; }
.footer-inner a { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; color: var(--green); font-weight: 700; }

@media (max-width: 930px) {
  .wrap { width: calc(100% - 54px); }
  .hero { gap: 26px; }
  .hero-art { min-height: 300px; }
  .pathway-layout { grid-template-columns: 1fr 1fr; gap: 14px; }
  .step, .step.foundation { padding-inline: 12px; }
}

@media (max-width: 720px) {
  .wrap { width: calc(100% - 36px); }
  .header-inner { min-height: 61px; }
  .header-link { gap: 7px; }
  .hero { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-block: 35px 34px; }
  h1 { font-size: clamp(3.65rem, 13vw, 6rem); }
  .hero-art { min-height: 0; }
  .art-diagram { max-height: 252px; }
  .pathway { padding-block: 32px 36px; }
  .pathway-heading { display: block; margin-bottom: 17px; }
  .pathway-instruction { margin-top: 10px; }
  .pathway-layout { grid-template-columns: minmax(0, 1fr); }
  .step.foundation { min-height: 122px; }
  .foundation .step-title { font-size: clamp(1.4rem, 6.4vw, 2.6rem); }
}

@media (max-width: 370px) {
  .wrap { width: calc(100% - 28px); }
  .identity { gap: 7px; font-size: .77rem; }
  .header-link { font-size: .75rem; }
  .step, .step.foundation { padding-inline: 9px; }
  .step-meta { gap: 4px; }
  .step-arrow { flex-basis: 19px; width: 19px; height: 19px; }
  .panel { padding-inline: 15px; }
  .footer-inner { gap: 8px; font-size: .74rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}