:root {
  color-scheme: light;
  --ink: #183733;
  --muted: #4c665f;
  --forest: #173b39;
  --green: #154c49;
  --paper: #faf9f5;
  --line: #d4dfd6;
  --sage: #e9f1e7;
  --focus: #a54c1b;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 1.5rem; }
body { margin: 0; background: var(--paper); color: var(--ink); font-size: 1rem; line-height: 1.65; }
a { color: inherit; }
a:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
p, h1, h2, h3, blockquote { margin-top: 0; }
.container { width: min(71.25rem, calc(100% - 3rem)); margin-inline: auto; }
.skip-link { position: absolute; z-index: 10; top: .5rem; left: .5rem; padding: .7rem 1rem; background: #fff; color: var(--forest); font-weight: 700; transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }

.site-header { background: #faf9f5; border-bottom: 1px solid var(--line); }
.header-inner { min-height: 5.35rem; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; }
.brand { display: inline-flex; align-items: center; gap: .7rem; min-height: 2.75rem; color: var(--forest); text-decoration: none; }
.brand-mark, .footer-mark { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; flex: none; border: 1px solid #659387; border-radius: 50%; font: italic 1.2rem Georgia, serif; }
.brand-name { font-size: .94rem; font-weight: 750; line-height: 1.05; letter-spacing: -.025em; }
.brand-name > span { display: block; }
.brand-name small { display: block; margin-top: .28rem; color: #526c64; font-size: .6rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.navigation { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.8rem; }
.navigation a { display: inline-flex; align-items: center; min-height: 2.75rem; font-size: .85rem; font-weight: 650; text-decoration: none; }
.navigation a:hover { text-decoration: underline; text-underline-offset: .3rem; }

.hero { overflow: hidden; background: linear-gradient(108deg, #f5f7ef 0%, #f5f7ef 57%, #eaf2e7 57%, #eaf2e7 100%); }
.hero-layout { display: grid; grid-template-columns: 1.08fr .92fr; align-items: center; gap: 3.4rem; min-height: 35rem; padding-block: 4.6rem; }
.hero-copy { max-width: 38rem; }
.eyebrow { display: flex; align-items: center; gap: .65rem; margin-bottom: 1.35rem; color: #356759; font-size: .72rem; font-weight: 750; letter-spacing: .13em; text-transform: uppercase; }
.eyebrow::before { content: ""; width: 1.6rem; height: 1px; flex: none; background: #73a091; }
h1, h2, .approach-intro h3, .reviewer-quote { font-family: Georgia, "Times New Roman", serif; font-weight: 400; letter-spacing: -.045em; }
.hero h1 { max-width: 38rem; margin-bottom: 1.5rem; font-size: clamp(3rem, 5.5vw, 4.6rem); line-height: 1.05; }
h1 em, h2 em { color: #397368; font-weight: 400; }
.hero-lead { max-width: 31rem; margin-bottom: 1.8rem; color: var(--muted); font-size: 1.04rem; line-height: 1.8; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem 1.5rem; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 1.4rem; min-height: 3.1rem; padding: .8rem 1.15rem; border: 1px solid var(--green); border-radius: 3px; background: var(--green); color: #fff; font-size: .84rem; font-weight: 700; text-decoration: none; }
.button:hover { background: #23635d; }
.text-link { display: inline-flex; align-items: center; gap: .45rem; min-height: 2.75rem; color: var(--forest); font-size: .84rem; font-weight: 700; text-decoration-thickness: 1px; text-underline-offset: .3rem; }
.status-note { display: flex; align-items: center; flex-wrap: wrap; gap: .55rem; margin: 1.6rem 0 0; color: #4f6d64; font-size: .76rem; }
.status-note > span { width: .5rem; height: .5rem; flex: none; border: 1px solid #568d79; border-radius: 50%; }

.hero-art { position: relative; display: grid; place-items: center; min-height: 25rem; isolation: isolate; }
.orbit { position: absolute; width: 22rem; aspect-ratio: 1; border: 1px solid #c4d8c3; border-radius: 50%; }
.orbit-two { width: 19rem; border-color: #d0e0cc; }
.orbit-three { width: 15.5rem; border-color: #dce8d7; }
.paper-shadow { position: absolute; width: 18rem; height: 22rem; border: 1px solid #d2e1d2; background: #e4ede1; transform: rotate(4deg) translate(1rem, .4rem); }
.paper { position: relative; width: min(19.5rem, 82%); min-height: 22.5rem; padding: 2rem 1.8rem 1.55rem; border: 1px solid #e0e9dc; background: #fff; box-shadow: 0 1.4rem 4rem #294e3b20; transform: rotate(-4deg); }
.paper-top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; color: #526f65; font-size: .63rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.paper-mark { color: #3c7569; font: italic 1.4rem Georgia, serif; text-transform: none; }
.paper-title { margin: 2.1rem 0 1.35rem; color: #244c43; font: 1.5rem/1.25 Georgia, serif; letter-spacing: -.025em; }
.paper-line { width: 100%; height: .3rem; margin-top: .55rem; border-radius: 1rem; background: #e5ece6; }
.paper-line.medium { width: 86%; }.paper-line.short { width: 67%; }.paper-line.long { width: 96%; }
.paper-label { display: inline-block; margin-top: 1.8rem; padding: .4rem .55rem; background: #eff6ee; color: #356759; font-size: .63rem; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; }
.paper-footer { margin-top: 2rem; padding-top: .9rem; border-top: 1px solid #e4ece4; color: #526f65; font-size: .56rem; letter-spacing: .04em; }
.art-note { position: absolute; right: 0; bottom: 2.4rem; display: flex; align-items: center; gap: .7rem; padding: .8rem 1rem; border: 1px solid #d6e5d8; background: #fff; box-shadow: 0 .75rem 1.8rem #31523e15; }
.art-note-icon { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: #e9f3e8; color: #376c5b; }
.art-note strong, .art-note small { display: block; }.art-note strong { font-size: .75rem; }.art-note small { color: #526f65; font-size: .68rem; }

.principles { border-block: 1px solid var(--line); background: #fff; }
.principles-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; padding-block: 1.55rem; }
.principle { display: flex; align-items: center; gap: 1rem; }.principle + .principle { padding-left: 1.8rem; border-left: 1px solid var(--line); }
.principle-number, .list-number { color: #548b79; font: italic 1.2rem Georgia, serif; }
.principle strong, .principle span:not(.principle-number) { display: block; }.principle strong { font-size: .85rem; }.principle span:not(.principle-number) { color: #526b62; font-size: .76rem; }
.section { padding-block: clamp(4.5rem, 9vw, 7rem); }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 3rem; margin-bottom: 3rem; }
.section-heading > div { max-width: 35rem; }.section-heading > p { max-width: 23rem; margin: 0 0 .25rem; color: var(--muted); font-size: .95rem; }
h2 { margin-bottom: 0; font-size: clamp(2.35rem, 4.4vw, 3.4rem); line-height: 1.15; }
.approach-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 4.5rem; padding-top: 2.15rem; border-top: 1px solid #aebfb2; }
.section-index { color: #526f65; font-size: .69rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.approach-intro h3 { margin: 1.1rem 0 1.2rem; font-size: 2rem; line-height: 1.2; }.approach-intro p { max-width: 28rem; color: var(--muted); font-size: .94rem; }
.approach-list { border-top: 1px solid var(--line); }.approach-list article { display: grid; grid-template-columns: 2rem 1fr; gap: 1rem; padding: 1.35rem 0; border-bottom: 1px solid var(--line); }.approach-list h3, .process-list h3 { margin-bottom: .25rem; font-size: 1rem; }.approach-list p, .process-list p { margin-bottom: 0; color: var(--muted); font-size: .88rem; }

.authors { background: #eaf1e7; }.authors-layout { display: grid; grid-template-columns: 1fr .92fr; gap: 6rem; align-items: center; }.authors-copy h2 { max-width: 32rem; margin-bottom: 1.5rem; }.authors-copy > p:not(.eyebrow), .reviewer-layout > div:first-child > p:not(.eyebrow) { max-width: 31rem; color: var(--muted); font-size: .98rem; }
.process-panel { padding: clamp(1.5rem, 3.5vw, 2.4rem); border: 1px solid #d6e3d4; background: #fff; box-shadow: 0 1rem 3.5rem #294e3b0c; }
.panel-head { display: flex; justify-content: space-between; gap: 1rem; color: #526f65; font-size: .64rem; font-weight: 750; letter-spacing: .1em; }
.process-list { list-style: none; margin: 1.45rem 0 0; padding: 0; border-top: 1px solid var(--line); }.process-list li { display: grid; grid-template-columns: 2rem 1fr; gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--line); }.process-number { color: #548b79; font: italic 1.1rem Georgia, serif; }.panel-foot { margin: 1.25rem 0 0; color: #526b62; font-size: .76rem; }

.reviewer-layout { display: grid; grid-template-columns: 1fr .84fr; gap: 7rem; align-items: center; }.reviewer-layout h2 { margin-bottom: 1.5rem; }.reviewer-detail { padding: 2rem 0 0 2rem; border-left: 1px solid #aebfb2; }.reviewer-detail > p { max-width: 24rem; color: var(--muted); font-size: .91rem; }.reviewer-detail > .reviewer-quote { margin: 1.6rem 0 1rem; color: #285b4e; font-size: clamp(1.6rem, 2.6vw, 2rem); line-height: 1.35; }.reviewer-signature { display: flex; align-items: center; gap: .7rem; margin-top: 2rem; color: var(--forest); font-size: .76rem; font-weight: 700; }.signature-mark { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border: 1px solid #83a798; border-radius: 50%; font: italic 1rem Georgia, serif; }.reviewer-signature small { display: block; color: #526f65; font-size: .68rem; font-weight: 400; }
.closing { padding: 5.4rem 0; background: #f0f1e8; text-align: center; }.closing-inner { max-width: 47rem; }.closing .eyebrow { justify-content: center; }.closing h2 { margin-bottom: 1.25rem; }.closing p:not(.eyebrow) { max-width: 31rem; margin: 0 auto 1.2rem; color: var(--muted); }
.site-footer { background: var(--forest); color: #e6f0e8; }.footer-inner { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; min-height: 7.25rem; padding-block: 1.5rem; }.footer-brand { display: flex; align-items: center; gap: .7rem; }.footer-mark { color: #fff; border-color: #86ae9b; }.footer-brand strong, .footer-brand small { display: block; }.footer-brand strong { font-size: .82rem; }.footer-brand small, .footer-inner > p { margin: .15rem 0 0; color: #d0e1d4; font-size: .75rem; }

@media (max-width: 760px) {
  .container { width: min(100% - 2.25rem, 71.25rem); }
  .header-inner { flex-wrap: wrap; gap: .5rem 1rem; padding-block: .85rem; }
  .navigation { gap: 0 1.2rem; }.navigation a { font-size: .8rem; }
  .hero { background: #f2f6ed; }.hero-layout { grid-template-columns: 1fr; gap: .75rem; padding-block: 4.2rem 2.3rem; }.hero h1 { font-size: clamp(2.8rem, 10vw, 4rem); }.hero-art { min-height: 21rem; }.orbit { width: 19rem; }.orbit-two { width: 16.5rem; }.orbit-three { width: 13.5rem; }.paper-shadow { width: 15rem; height: 19rem; }.paper { width: min(16.5rem, 75%); min-height: 19rem; padding: 1.5rem; }.paper-title { margin-top: 1.5rem; font-size: 1.25rem; }.paper-footer { margin-top: 1.4rem; }.art-note { right: 2%; bottom: 1rem; }
  .principles-grid { grid-template-columns: 1fr; gap: 1rem; }.principle + .principle { padding-left: 0; border-left: 0; }
  .section-heading, .approach-layout, .authors-layout, .reviewer-layout { display: grid; grid-template-columns: 1fr; gap: 1.75rem; }.section-heading { margin-bottom: 2rem; }.approach-layout { gap: 2rem; }.authors-layout, .reviewer-layout { gap: 2.75rem; }.reviewer-detail { padding-left: 1.5rem; }.closing { padding-block: 4.5rem; }
}
@media (max-width: 420px) { .navigation { width: 100%; justify-content: space-between; gap: .3rem; }.navigation a { font-size: .76rem; }.hero-actions { align-items: stretch; }.hero-actions .button { width: 100%; }.footer-inner { align-items: flex-start; flex-direction: column; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; } }
