@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&display=swap');

:root {
  --ink: #17201f;
  --muted: #69706b;
  --cream: #f6f0e5;
  --paper: #fffdf9;
  --line: rgba(23, 32, 31, .14);
  --coral: #ef755d;
  --gold: #f4ba4e;
  --blue: #b7d9d0;
  --green: #284e47;
  --plum: #765066;
  --mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --serif: Fraunces, Georgia, serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--cream); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.55; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
.wrap { width: min(1160px, calc(100% - 48px)); margin: 0 auto; }
.skip-link { position: fixed; z-index: 30; top: -60px; left: 20px; padding: 10px 14px; background: var(--ink); color: white; border-radius: 0 0 8px 8px; }
.skip-link:focus { top: 0; }

.topline { border-bottom: 1px solid var(--line); color: var(--muted); font: 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.topline-inner { display: flex; justify-content: space-between; padding: 11px 0 10px; }
.topline-right { display: flex; gap: 9px; align-items: center; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 3px rgba(239,117,93,.13); }
.nav-row { display: flex; align-items: center; justify-content: space-between; min-height: 86px; }
.brand { display: inline-flex; align-items: center; gap: 11px; }
.brand-mark { position: relative; display: inline-flex; align-items: flex-end; gap: 3px; width: 27px; height: 27px; }
.brand-mark i { display: block; width: 7px; border: 1.7px solid var(--ink); border-radius: 9px 9px 2px 2px; transform: rotate(-14deg); }
.brand-mark i:nth-child(1) { height: 12px; margin-bottom: 3px; background: var(--gold); }
.brand-mark i:nth-child(2) { height: 21px; background: var(--coral); transform: rotate(3deg); }
.brand-mark i:nth-child(3) { height: 16px; margin-bottom: 1px; background: var(--blue); transform: rotate(16deg); }
.brand-type { font-size: 16px; font-weight: 700; letter-spacing: .08em; line-height: 1; }
.brand-type b { font-weight: 700; color: var(--coral); }
.site-nav { display: flex; align-items: center; gap: 26px; font-size: 14px; font-weight: 600; }
.site-nav > a { position: relative; padding: 8px 0; }
.site-nav > a:not(.nav-pill):after { position: absolute; right: 0; bottom: 2px; left: 0; height: 2px; background: var(--coral); content: ''; transform: scaleX(0); transform-origin: left; transition: transform .2s ease; }
.site-nav > a:not(.nav-pill):hover:after, .site-nav > a:not(.nav-pill):focus-visible:after { transform: scaleX(1); }
.nav-pill { padding: 10px 15px !important; border: 1px solid var(--ink); border-radius: 999px; }
.nav-pill:hover { background: var(--ink); color: var(--cream); }
.menu-toggle { display: none; border: 1px solid var(--ink); border-radius: 999px; padding: 9px 14px; background: transparent; font: 12px var(--mono); text-transform: uppercase; }

.hero { display: grid; grid-template-columns: 1.08fr .92fr; align-items: center; gap: 54px; min-height: 630px; padding-top: 58px; padding-bottom: 77px; }
.eyebrow { margin: 0 0 17px; color: var(--muted); font: 11px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.eyebrow-rule { display: inline-block; width: 32px; height: 1px; margin: 0 10px 3px 0; background: var(--coral); }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { font-family: var(--serif); font-weight: 600; letter-spacing: -.045em; }
h1 { max-width: 650px; margin-bottom: 26px; font-size: clamp(55px, 7vw, 90px); line-height: .98; }
h1 em, h2 em { color: var(--coral); font-style: normal; }
.hero-lede { max-width: 545px; margin-bottom: 28px; color: #4b5550; font-size: 19px; line-height: 1.5; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 25px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 16px; padding: 13px 18px; border-radius: 4px; font-size: 13px; font-weight: 700; transition: transform .2s ease, background .2s ease, color .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-dark { background: var(--ink); color: var(--cream); }
.button-dark:hover { background: var(--coral); color: var(--ink); }
.button-outline { border: 1px solid var(--ink); }
.button-outline:hover { background: var(--ink); color: var(--cream); }
.text-link, .signal-link, .card-link, .research-footer a, .play-footer a, .safety-source a, .dialog-source { font-weight: 700; }
.text-link { font-size: 13px; text-decoration: underline; text-decoration-color: var(--coral); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.text-link:hover { color: var(--coral); }
.hero-proof { display: flex; gap: 29px; margin-top: 59px; }
.hero-proof div { display: flex; flex-direction: column; gap: 2px; min-width: 84px; padding-left: 14px; border-left: 1px solid var(--line); }
.hero-proof strong { font: 22px var(--serif); }
.hero-proof span { max-width: 84px; color: var(--muted); font: 10px/1.35 var(--mono); text-transform: uppercase; }
.hero-art { position: relative; min-height: 476px; margin: 0; overflow: hidden; border: 1px solid var(--ink); border-radius: 50% 50% 6px 6px; background: #dbe8dc; box-shadow: 12px 12px 0 var(--gold); }
.hero-art:before { position: absolute; z-index: 2; inset: 20px; border: 1px dashed rgba(246,240,229,.72); border-radius: 50% 50% 3px 3px; content: ''; pointer-events: none; }
.hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 54% center; filter: saturate(.82) contrast(.96); }
.hero-photo-wash { position: absolute; inset: 0; background: linear-gradient(155deg, rgba(23,32,31,.17), transparent 50%, rgba(239,117,93,.18)); }
.sun-disc { position: absolute; top: 74px; right: 77px; width: 82px; height: 82px; border-radius: 50%; background: #f1c85e; }
.tower-shadow { position: absolute; right: 19%; bottom: 75px; width: 230px; height: 28px; border-radius: 50%; background: rgba(23,32,31,.17); filter: blur(2px); }
.tower-ring { position: absolute; left: 50%; border: 2px solid var(--ink); border-radius: 50%; transform: translateX(-50%); }
.ring-one { bottom: 100px; width: 205px; height: 61px; background: var(--coral); }
.ring-two { bottom: 145px; width: 171px; height: 54px; background: var(--gold); }
.ring-three { bottom: 185px; width: 140px; height: 47px; background: #86b7a7; }
.ring-four { bottom: 219px; width: 108px; height: 39px; background: #d7a2a4; }
.tower-top { position: absolute; bottom: 243px; left: calc(50% - 19px); width: 38px; height: 50px; border: 2px solid var(--ink); border-radius: 50% 50% 7px 7px; background: #f0dfb2; }
.tower-stem { position: absolute; bottom: 99px; left: calc(50% - 5px); width: 10px; height: 160px; border: 2px solid var(--ink); border-bottom: 0; border-radius: 5px 5px 0 0; background: rgba(255,253,249,.42); }
.art-note { position: absolute; top: 76px; left: 73px; z-index: 3; display: grid; gap: 7px; padding: 10px 12px; background: rgba(246,240,229,.9); }
.art-note span, .art-caption { font: 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.art-note strong { font: 17px/1.16 var(--serif); }
.photo-credit { position: absolute; right: 29px; bottom: 26px; z-index: 3; display: flex; align-items: center; gap: 8px; color: var(--cream); font: 9px var(--mono); letter-spacing: .05em; text-shadow: 0 1px 8px rgba(0,0,0,.55); }
.photo-credit a { text-decoration: underline; text-underline-offset: 3px; }
.photo-credit a:hover { color: var(--gold); }
.art-caption { position: absolute; right: 29px; bottom: 52px; z-index: 3; padding: 6px 8px; color: var(--cream); line-height: 1.45; text-align: right; text-shadow: 0 1px 8px rgba(0,0,0,.55); }

.signal-band { background: var(--coral); }
.signal-grid { display: grid; grid-template-columns: .8fr 2fr .8fr; align-items: center; gap: 20px; min-height: 126px; }
.signal-label { margin: 0; font: 10px var(--mono); letter-spacing: .1em; }
.signal-text { max-width: 600px; margin: 0; font: 21px/1.25 var(--serif); }
.signal-text strong { text-decoration: underline; text-decoration-color: var(--ink); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.signal-link { justify-self: end; font-size: 13px; }

.visual-journal { display: grid; grid-template-columns: .85fr 1.15fr .65fr; align-items: stretch; gap: 12px; padding-top: 103px; padding-bottom: 111px; }
.journal-intro { display: flex; flex-direction: column; justify-content: center; padding-right: 19px; }
.journal-intro h2 { margin-bottom: 19px; font-size: clamp(42px, 4.8vw, 62px); line-height: .96; }
.journal-intro > p:not(.eyebrow) { max-width: 300px; margin-bottom: 24px; color: var(--muted); font-size: 14px; }
.journal-intro .text-link { align-self: flex-start; font-size: 12px; }
.journal-feature, .journal-inset { min-height: 425px; }
.journal-feature figure, .journal-inset figure { position: relative; height: 100%; margin: 0; overflow: hidden; border: 1px solid var(--ink); background: #d3ded7; }
.journal-feature img, .journal-inset img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.86); transition: transform .5s ease; }
.journal-feature figure:hover img, .journal-inset figure:hover img { transform: scale(1.03); }
.journal-feature figcaption, .journal-inset figcaption { position: absolute; right: 14px; bottom: 14px; left: 14px; display: grid; gap: 4px; padding: 12px 13px; background: rgba(246,240,229,.93); }
.journal-feature figcaption span, .journal-inset figcaption span { color: var(--muted); font: 9px var(--mono); letter-spacing: .08em; }
.journal-feature figcaption strong, .journal-inset figcaption strong { font: 600 19px/1 var(--serif); }
.journal-feature figcaption a, .journal-inset figcaption a { justify-self: start; color: var(--coral); font: 9px var(--mono); text-decoration: underline; text-underline-offset: 3px; }
.journal-feature figcaption a:hover, .journal-inset figcaption a:hover { color: var(--ink); }
.journal-inset { margin-top: 55px; min-height: 370px; }
.journal-inset figure { border-color: var(--coral); }
.journal-inset figcaption { right: 10px; bottom: 10px; left: 10px; }
.journal-inset figcaption strong { font-size: 17px; }

.pathway-section, .research-section, .safety-section, .closing-section, .method-section { padding-top: 123px; padding-bottom: 123px; }
.section-heading { margin-bottom: 47px; }
.split-heading { display: flex; align-items: end; justify-content: space-between; gap: 40px; }
.split-heading h2, .directory-heading h2 { margin-bottom: 0; font-size: clamp(42px, 5vw, 66px); line-height: .98; }
.section-aside { max-width: 365px; margin: 0 0 2px; color: var(--muted); font-size: 15px; line-height: 1.6; }
.pathway-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.pathway-card { position: relative; display: flex; min-height: 265px; flex-direction: column; padding: 21px; overflow: hidden; border: 1px solid var(--ink); transition: transform .25s ease, box-shadow .25s ease; }
.pathway-card:hover { z-index: 1; transform: translateY(-5px); box-shadow: 8px 8px 0 var(--ink); }
.pathway-build { background: #f0c75e; }.pathway-move { background: #a6cfc4; }.pathway-pretend { background: #edb2a9; }.pathway-notice { background: #d3c2d2; }
.pathway-number { font: 10px var(--mono); }
.pathway-icon { margin-top: 31px; font: 37px/1 var(--serif); }
.pathway-card h3 { margin: 13px 0 9px; font: 600 27px/.95 var(--serif); letter-spacing: -.03em; }
.pathway-card p { margin: 0; color: rgba(23,32,31,.7); font: 10px var(--mono); text-transform: uppercase; }
.pathway-arrow { position: absolute; right: 20px; bottom: 17px; font-size: 26px; }

.directory-section { padding: 117px 0 95px; background: #e6eee8; }
.directory-heading { display: flex; justify-content: space-between; align-items: end; }
.directory-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 25px; padding-bottom: 15px; border-bottom: 1px solid var(--line); }
.filter-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.filter-chip { cursor: pointer; padding: 8px 12px; border: 1px solid var(--line); border-radius: 99px; background: transparent; font: 11px var(--mono); transition: background .2s ease, border .2s ease; }
.filter-chip:hover, .filter-chip.active { border-color: var(--ink); background: var(--ink); color: var(--cream); }
.result-count { margin: 0; color: var(--muted); font: 11px var(--mono); white-space: nowrap; }
.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; }
.product-card { display: flex; min-height: 442px; flex-direction: column; padding: 12px 16px 17px; background: var(--paper); border: 1px solid var(--ink); transition: transform .22s ease, box-shadow .22s ease; }
.product-card:hover { transform: translateY(-5px); box-shadow: 7px 7px 0 var(--coral); }
.product-card.is-hidden { display: none; }
.product-visual { position: relative; height: 163px; margin: -1px -5px 19px; overflow: hidden; border-bottom: 1px solid var(--line); }
.product-visual:before { position: absolute; right: 10%; bottom: 15px; left: 10%; height: 1px; background: var(--line); content: ''; }
.visual-rings { background: #f4ddc8; }.visual-bricks { background: #c4dfda; }.visual-bench { background: #f6d699; }.visual-stack { background: #dbd1df; }.visual-dimpl { background: #f3c1ad; }.visual-sorter { background: #d0dfed; }.visual-tegu { background: #ded3bd; }.visual-truck { background: #d1e2d5; }
.visual-rings span { position: absolute; left: 50%; border: 1.5px solid var(--ink); border-radius: 50%; transform: translateX(-50%); }.visual-rings span:nth-child(1) { bottom: 23px; width: 125px; height: 33px; background: var(--coral); }.visual-rings span:nth-child(2) { bottom: 47px; width: 101px; height: 29px; background: var(--gold); }.visual-rings span:nth-child(3) { bottom: 68px; width: 76px; height: 23px; background: var(--blue); }.visual-rings b { position: absolute; bottom: 21px; left: calc(50% - 3px); width: 6px; height: 92px; border: 1px solid var(--ink); background: #f8edd3; }
.visual-bricks span, .visual-bricks i { position: absolute; border: 1.5px solid var(--ink); border-radius: 3px; }.visual-bricks span:nth-child(1) { bottom: 31px; left: 21%; width: 70px; height: 39px; background: var(--coral); }.visual-bricks span:nth-child(2) { bottom: 69px; left: 35%; width: 70px; height: 39px; background: var(--gold); }.visual-bricks span:nth-child(3) { bottom: 31px; left: 53%; width: 70px; height: 39px; background: var(--blue); }.visual-bricks i:nth-of-type(1) { bottom: 31px; left: 30%; width: 8px; height: 8px; background: var(--ink); }.visual-bricks i:nth-of-type(2) { bottom: 69px; left: 44%; width: 8px; height: 8px; background: var(--ink); }
.visual-bench span { position: absolute; bottom: 28px; border: 1.5px solid var(--ink); border-radius: 2px 2px 0 0; }.visual-bench span:nth-child(1) { left: 24%; width: 32px; height: 81px; background: var(--coral); }.visual-bench span:nth-child(2) { left: 43%; width: 32px; height: 62px; background: var(--gold); }.visual-bench span:nth-child(3) { left: 62%; width: 32px; height: 98px; background: var(--blue); }.visual-bench b { position: absolute; right: 18%; bottom: 28px; left: 18%; height: 11px; border: 1.5px solid var(--ink); background: #e9a68e; }
.visual-stack span { position: absolute; left: 50%; border: 1.5px solid var(--ink); border-radius: 50%; transform: translateX(-50%); }.visual-stack span:nth-child(1) { bottom: 23px; width: 114px; height: 27px; background: var(--coral); }.visual-stack span:nth-child(2) { bottom: 45px; width: 91px; height: 26px; background: var(--gold); }.visual-stack span:nth-child(3) { bottom: 66px; width: 70px; height: 23px; background: var(--blue); }.visual-stack span:nth-child(4) { bottom: 85px; width: 50px; height: 20px; background: #d4a2aa; }.visual-stack span:nth-child(5) { bottom: 101px; width: 31px; height: 18px; background: #f1ddae; }.visual-stack b { position: absolute; bottom: 21px; left: calc(50% - 3px); width: 6px; height: 97px; border: 1px solid var(--ink); }
.visual-dimpl span { position: absolute; width: 29px; height: 29px; border: 1.5px solid var(--ink); border-radius: 50%; background: var(--gold); box-shadow: inset 0 0 0 5px #f3c1ad; }.visual-dimpl span:nth-child(1) { top: 41px; left: 23%; }.visual-dimpl span:nth-child(2) { top: 78px; left: 40%; background: var(--blue); }.visual-dimpl span:nth-child(3) { top: 43px; left: 56%; background: var(--coral); }.visual-dimpl span:nth-child(4) { top: 81px; left: 72%; background: #b5a1c5; }.visual-dimpl span:nth-child(5) { top: 23px; left: 43%; width: 15px; height: 15px; background: transparent; box-shadow: none; }
.visual-sorter span { position: absolute; border: 1.5px solid var(--ink); }.visual-sorter span:nth-child(1) { bottom: 33px; left: 25%; width: 96px; height: 74px; background: var(--gold); transform: rotate(-6deg); }.visual-sorter span:nth-child(2) { bottom: 69px; left: 36%; width: 28px; height: 28px; border-radius: 50%; background: var(--coral); }.visual-sorter span:nth-child(3) { bottom: 70px; left: 58%; width: 25px; height: 25px; background: var(--blue); transform: rotate(45deg); }.visual-sorter span:nth-child(4) { bottom: 25px; left: 60%; width: 25px; height: 25px; border-radius: 50%; background: #d3a1ad; }.visual-sorter b { position: absolute; right: 27%; bottom: 36px; width: 16px; height: 16px; background: var(--ink); transform: rotate(45deg); }
.visual-tegu span { position: absolute; bottom: 40px; border: 1.5px solid var(--ink); border-radius: 4px; }.visual-tegu span:nth-child(1) { left: 25%; width: 60px; height: 54px; background: #c49f6c; transform: rotate(-7deg); }.visual-tegu span:nth-child(2) { left: 49%; width: 60px; height: 54px; background: #e7c879; transform: rotate(8deg); }.visual-tegu span:nth-child(3) { bottom: 86px; left: 38%; width: 60px; height: 38px; background: #eab19a; transform: rotate(2deg); }.visual-tegu b { position: absolute; right: 22%; bottom: 28px; width: 13px; height: 13px; border: 1px solid var(--ink); border-radius: 50%; background: var(--ink); }
.visual-truck span { position: absolute; bottom: 43px; left: 24%; width: 111px; height: 51px; border: 1.5px solid var(--ink); border-radius: 5px 14px 4px 4px; background: var(--coral); }.visual-truck span:after { position: absolute; top: -26px; right: 0; width: 44px; height: 27px; border: 1.5px solid var(--ink); border-bottom: 0; border-radius: 6px 10px 0 0; background: var(--gold); content: ''; }.visual-truck span:before { position: absolute; right: 19px; bottom: -25px; width: 21px; height: 21px; border: 1.5px solid var(--ink); border-radius: 50%; background: var(--ink); box-shadow: -66px 0 0 -1px var(--ink); content: ''; }.visual-truck b { position: absolute; bottom: 69px; left: 26%; width: 103px; height: 17px; border: 1.5px solid var(--ink); background: #f4ba4e; transform: rotate(-14deg); }.visual-truck i { position: absolute; bottom: 70px; right: 25%; width: 16px; height: 26px; border: 1.5px solid var(--ink); border-bottom: 0; background: var(--blue); }
.product-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 7px; color: var(--muted); font: 10px var(--mono); letter-spacing: .04em; }
.product-price { color: var(--ink); }
.product-card h3 { margin: 0; font: 600 25px/1.05 var(--serif); letter-spacing: -.035em; }
.product-brand { margin: 5px 0 13px; color: var(--coral); font-size: 12px; font-weight: 700; }
.product-reason { flex: 1; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.product-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 17px; padding-top: 12px; border-top: 1px solid var(--line); font: 10px var(--mono); text-transform: uppercase; }
.card-link { border: 0; background: transparent; cursor: pointer; font-size: 10px; font-weight: 700; text-decoration: underline; text-decoration-color: var(--coral); text-underline-offset: 3px; }
.card-link:hover { color: var(--coral); }
.directory-note { display: flex; align-items: center; gap: 14px; margin-top: 22px; padding: 17px 20px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.note-star { color: var(--coral); font-size: 22px; }
.directory-note p { flex: 1; margin: 0; color: var(--muted); font-size: 12px; }.directory-note strong { color: var(--ink); }.directory-note a { font: 11px var(--mono); white-space: nowrap; }

.evidence-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.evidence-card { position: relative; min-height: 276px; padding: 21px; border: 1px solid var(--ink); background: var(--paper); }
.evidence-card:nth-child(2), .evidence-card:nth-child(5) { margin-top: 29px; }.evidence-card:nth-child(3), .evidence-card:nth-child(6) { margin-top: 58px; }
.evidence-strong { background: #e5e1bc; }.evidence-mid { background: #d2e4da; }.evidence-caution { background: #f2c0ad; }.evidence-mixed { background: #dbcddb; }
.evidence-top { display: flex; justify-content: space-between; color: rgba(23,32,31,.65); font: 10px var(--mono); letter-spacing: .07em; }.evidence-dot { width: 10px; height: 10px; border: 1px solid var(--ink); border-radius: 50%; background: var(--coral); }
.evidence-card h3 { max-width: 260px; margin: 30px 0 12px; font: 600 26px/1.02 var(--serif); letter-spacing: -.03em; }.evidence-card p { margin-bottom: 16px; color: rgba(23,32,31,.72); font-size: 13px; line-height: 1.5; }.evidence-card a { position: absolute; right: 21px; bottom: 18px; font: 11px var(--mono); text-decoration: underline; text-decoration-color: var(--coral); text-underline-offset: 3px; }.evidence-card a:hover { color: var(--coral); }
.research-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 50px; }.research-footer p { margin: 0; color: var(--muted); font-size: 14px; }

.fieldwork-section { padding: 108px 0 101px; background: var(--plum); color: var(--cream); }
.fieldwork-section .light-heading h2 em { color: var(--gold); }
.fieldwork-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.fieldwork-card { display: flex; min-height: 246px; flex-direction: column; padding: 20px; border: 1px solid rgba(246,240,229,.55); transition: background .2s ease, transform .2s ease; }
.fieldwork-card:hover { background: rgba(246,240,229,.12); transform: translateY(-4px); }
.fieldwork-index { color: var(--gold); font: 10px var(--mono); letter-spacing: .08em; }
.fieldwork-card h3 { margin: 27px 0 10px; font: 600 27px/1 var(--serif); }
.fieldwork-card p { flex: 1; margin: 0; color: rgba(246,240,229,.72); font-size: 13px; line-height: 1.48; }
.fieldwork-card strong { color: var(--gold); font: 10px var(--mono); text-transform: uppercase; }

.play-section { padding: 116px 0 91px; background: var(--green); color: var(--cream); }.light-heading .eyebrow, .light-heading .section-aside { color: rgba(246,240,229,.65); }.light-heading h2 em { color: var(--gold); }
.activity-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }.activity-card { min-height: 373px; padding: 19px; border: 1px solid rgba(246,240,229,.6); transition: background .2s ease, transform .2s ease; }.activity-card:hover { background: rgba(246,240,229,.09); transform: translateY(-4px); }.activity-card.is-hidden { display: none; }.activity-index { color: var(--gold); font: 10px var(--mono); letter-spacing: .08em; }.activity-card h3 { margin: 19px 0 10px; font: 600 26px/1 var(--serif); }.activity-card p { min-height: 94px; margin: 0; color: rgba(246,240,229,.72); font-size: 13px; line-height: 1.48; }.activity-tag { display: inline-block; padding-top: 14px; border-top: 1px solid rgba(246,240,229,.25); color: var(--gold); font: 10px var(--mono); text-transform: uppercase; }.activity-sketch { position: relative; height: 128px; margin-top: 21px; border-bottom: 1px solid rgba(246,240,229,.35); }.sketch-bridge i { position: absolute; bottom: 27px; width: 31px; height: 31px; border: 1px solid var(--cream); background: var(--coral); }.sketch-bridge i:nth-child(1) { left: 19%; }.sketch-bridge i:nth-child(2) { left: 43%; height: 48px; background: var(--gold); }.sketch-bridge i:nth-child(3) { left: 67%; background: var(--blue); }.sketch-bridge b { position: absolute; bottom: 53px; left: 29%; width: 59%; height: 10px; border-top: 1px solid var(--cream); border-bottom: 1px solid var(--cream); transform: rotate(-2deg); }.sketch-delivery i { position: absolute; bottom: 24px; left: 25%; width: 88px; height: 38px; border: 1px solid var(--cream); background: var(--coral); }.sketch-delivery i:nth-child(2) { bottom: 24px; left: 61%; width: 28px; height: 28px; border-radius: 50%; background: var(--gold); }.sketch-delivery b { position: absolute; top: 29px; left: 35%; width: 53px; height: 33px; border: 1px solid var(--cream); background: var(--blue); transform: rotate(-16deg); }.sketch-sort i { position: absolute; bottom: 28px; width: 33px; height: 33px; border: 1px solid var(--cream); }.sketch-sort i:nth-child(1) { left: 18%; border-radius: 50%; background: var(--coral); }.sketch-sort i:nth-child(2) { left: 42%; background: var(--gold); transform: rotate(45deg); }.sketch-sort i:nth-child(3) { left: 68%; background: var(--blue); }.sketch-sort b { position: absolute; bottom: 76px; left: 19%; width: 67%; height: 1px; background: var(--cream); }.sketch-story i { position: absolute; bottom: 26px; left: 24%; width: 49px; height: 49px; border: 1px solid var(--cream); border-radius: 50%; background: var(--gold); }.sketch-story i:nth-child(2) { bottom: 28px; left: 61%; width: 39px; height: 39px; background: var(--coral); }.sketch-story b { position: absolute; top: 22px; left: 28%; width: 58%; height: 45px; border: 1px solid var(--cream); border-radius: 50%; }
.play-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 27px; color: rgba(246,240,229,.6); font: 11px var(--mono); }.play-footer a { color: var(--gold); }.play-footer a:hover { color: var(--cream); }

.safety-card { display: grid; grid-template-columns: .8fr 1.2fr; gap: 65px; padding: 55px 58px; border: 1px solid var(--ink); background: #f0c75e; box-shadow: 13px 13px 0 var(--coral); }.safety-copy h2, .closing-section h2, .method-section h2 { margin-bottom: 20px; font-size: clamp(44px, 5vw, 67px); line-height: .95; }.safety-copy p:not(.eyebrow) { max-width: 350px; margin-bottom: 25px; color: rgba(23,32,31,.72); font-size: 14px; }.safety-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 31px; }.safety-list div { padding: 16px 0; border-top: 1px solid rgba(23,32,31,.3); }.safety-list div:nth-child(5) { grid-column: span 2; }.safety-list span { display: block; margin-bottom: 6px; color: rgba(23,32,31,.6); font: 10px var(--mono); }.safety-list strong { font: 600 22px/1 var(--serif); }.safety-list p { margin: 7px 0 0; color: rgba(23,32,31,.7); font-size: 12px; line-height: 1.4; }.safety-source { margin: 30px 0 0; color: var(--muted); font: 11px var(--mono); }.safety-source a { text-decoration: underline; text-decoration-color: var(--coral); text-underline-offset: 3px; }

.closing-section { display: grid; grid-template-columns: .25fr .95fr 1fr; align-items: center; gap: 38px; border-bottom: 1px solid var(--line); }.closing-mark { position: relative; height: 142px; }.closing-mark span { position: absolute; display: block; border: 1.5px solid var(--ink); border-radius: 50%; }.closing-mark span:nth-child(1) { top: 54px; left: 29px; width: 70px; height: 39px; background: var(--coral); transform: rotate(-27deg); }.closing-mark span:nth-child(2) { top: 35px; left: 67px; width: 57px; height: 57px; background: var(--gold); }.closing-mark span:nth-child(3) { top: 13px; left: 31px; width: 37px; height: 82px; background: var(--blue); transform: rotate(32deg); }.closing-copy { max-width: 410px; justify-self: end; }.closing-copy p:first-child { color: #4b5550; font: 22px/1.35 var(--serif); }.closing-signoff { margin-bottom: 0; color: var(--coral); font: 11px var(--mono); text-transform: uppercase; }
.method-section { display: grid; grid-template-columns: .65fr 1.35fr; gap: 70px; padding-top: 82px; padding-bottom: 92px; }.method-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-self: end; }.method-grid p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }

.site-footer { padding: 50px 0 20px; border-top: 1px solid var(--ink); background: var(--ink); color: var(--cream); }.footer-grid { display: grid; grid-template-columns: 1.3fr .8fr .8fr; gap: 40px; padding-bottom: 45px; }.footer-brand { color: var(--cream); }.footer-brand .brand-mark i { border-color: var(--cream); }.footer-brand .brand-type b { color: var(--gold); }.footer-grid > div:first-child p { max-width: 220px; margin: 19px 0 0; color: rgba(246,240,229,.56); font-size: 13px; }.footer-links { display: grid; align-content: start; gap: 8px; font-size: 13px; }.footer-links a:hover { color: var(--gold); }.footer-domain { display: grid; align-content: start; justify-items: start; gap: 7px; }.footer-domain span, .footer-domain small { color: rgba(246,240,229,.55); font: 10px var(--mono); }.footer-domain strong { color: var(--gold); font: 18px var(--serif); }.footer-bottom { display: flex; justify-content: space-between; padding-top: 17px; border-top: 1px solid rgba(246,240,229,.2); color: rgba(246,240,229,.5); font: 10px var(--mono); }.footer-bottom a:hover { color: var(--gold); }

.product-dialog { width: min(560px, calc(100% - 32px)); padding: 37px; border: 1px solid var(--ink); border-radius: 0; background: var(--paper); color: var(--ink); box-shadow: 12px 12px 0 var(--coral); }.product-dialog::backdrop { background: rgba(23,32,31,.65); }.dialog-close { position: absolute; top: 12px; right: 16px; width: 28px; height: 28px; border: 1px solid var(--ink); border-radius: 50%; background: transparent; cursor: pointer; font-size: 20px; line-height: 20px; }.dialog-close:hover { background: var(--coral); }.dialog-kicker { margin-bottom: 14px; color: var(--coral); font: 10px var(--mono); letter-spacing: .09em; text-transform: uppercase; }.product-dialog h2 { margin: 0; font: 600 42px/.96 var(--serif); letter-spacing: -.04em; }.dialog-brand { margin: 7px 0 28px; color: var(--muted); font-size: 13px; }.dialog-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 19px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }.dialog-label { display: block; margin-bottom: 7px; color: var(--muted); font: 10px var(--mono); letter-spacing: .06em; text-transform: uppercase; }.dialog-columns p { margin: 0; font-size: 13px; line-height: 1.5; }.dialog-facts { display: flex; flex-wrap: wrap; gap: 7px; margin: 21px 0; }.dialog-facts span { padding: 6px 8px; background: var(--blue); font: 10px var(--mono); }.dialog-source { color: var(--coral); font-size: 13px; }.dialog-backdrop { display: none; }

:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; }

@media (max-width: 960px) {
  .site-nav { gap: 15px; }.hero { grid-template-columns: 1fr .85fr; gap: 30px; }.hero-art { min-height: 420px; }.product-grid { grid-template-columns: repeat(3, 1fr); }.product-card:nth-child(8) { display: none; }.pathway-grid { grid-template-columns: repeat(2, 1fr); }.pathway-card { min-height: 215px; }.activity-grid { grid-template-columns: repeat(2, 1fr); }.activity-card:nth-child(3), .activity-card:nth-child(4) { margin-top: 0; }.safety-card { gap: 30px; padding: 42px; }
}
@media (max-width: 720px) {
  .wrap { width: min(100% - 32px, 540px); }.topline-inner { gap: 10px; }.topline-inner > span:first-child { max-width: 180px; line-height: 1.4; }.topline-right { text-align: right; }.nav-row { min-height: 72px; }.menu-toggle { display: block; }.site-nav { position: absolute; z-index: 20; top: 122px; right: 16px; left: 16px; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 10px 17px 17px; border: 1px solid var(--ink); background: var(--cream); box-shadow: 6px 6px 0 var(--ink); }.site-nav.is-open { display: flex; }.site-nav > a { padding: 12px 0; border-bottom: 1px solid var(--line); }.site-nav .nav-pill { margin-top: 10px; text-align: center; }.hero { display: block; min-height: 0; padding-top: 62px; padding-bottom: 70px; }.hero-lede { font-size: 17px; }.hero-proof { gap: 14px; margin-top: 45px; }.hero-proof div { min-width: 0; padding-left: 9px; }.hero-proof span { font-size: 9px; }.hero-art { min-height: 370px; margin-top: 58px; }.signal-grid { display: block; padding: 28px 0; }.signal-label { margin-bottom: 10px; }.signal-text { font-size: 19px; }.signal-link { display: block; margin-top: 18px; }.pathway-section, .research-section, .safety-section, .closing-section, .method-section { padding-top: 77px; padding-bottom: 77px; }.split-heading, .directory-heading { display: block; }.section-aside { margin-top: 20px; }.pathway-grid { grid-template-columns: 1fr 1fr; gap: 8px; }.pathway-card { min-height: 190px; padding: 16px; }.pathway-icon { margin-top: 21px; }.pathway-card h3 { font-size: 23px; }.pathway-card p { max-width: 110px; font-size: 9px; }.directory-section { padding: 78px 0 62px; }.directory-toolbar { display: block; }.filter-chips { margin-bottom: 14px; }.result-count { font-size: 10px; }.product-grid { grid-template-columns: 1fr 1fr; gap: 8px; }.product-card { min-height: 404px; padding: 9px 12px 13px; }.product-visual { height: 130px; margin-bottom: 13px; }.product-card h3 { font-size: 22px; }.product-reason { font-size: 12px; }.product-foot { display: block; }.product-foot .card-link { display: block; margin-top: 7px; padding: 0; }.product-card:nth-child(8) { display: flex; }.directory-note { align-items: flex-start; padding: 15px 0; }.directory-note a { display: none; }.evidence-grid { grid-template-columns: 1fr; gap: 9px; }.evidence-card, .evidence-card:nth-child(2), .evidence-card:nth-child(3), .evidence-card:nth-child(5), .evidence-card:nth-child(6) { min-height: 255px; margin-top: 0; }.research-footer { display: block; margin-top: 31px; }.research-footer .button { margin-top: 17px; }.play-section { padding: 78px 0 60px; }.activity-grid { grid-template-columns: 1fr 1fr; gap: 8px; }.activity-card { min-height: 350px; padding: 15px; }.activity-card p { min-height: 115px; font-size: 12px; }.activity-sketch { height: 105px; }.safety-card { display: block; padding: 29px 22px; box-shadow: 7px 7px 0 var(--coral); }.safety-copy p:not(.eyebrow) { font-size: 13px; }.safety-list { margin-top: 31px; gap: 0 17px; }.safety-list strong { font-size: 19px; }.safety-list p { font-size: 11px; }.closing-section { display: block; }.closing-mark { height: 110px; margin-bottom: 20px; transform: scale(.8); transform-origin: left top; }.closing-copy { margin-top: 28px; }.closing-copy p:first-child { font-size: 20px; }.method-section { display: block; }.method-grid { display: block; margin-top: 30px; }.method-grid p + p { margin-top: 18px; }.footer-grid { grid-template-columns: 1fr 1fr; gap: 35px 20px; }.footer-grid > div:first-child { grid-column: span 2; }.footer-domain { grid-column: span 2; }.footer-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }.footer-bottom a { grid-column: span 2; }.product-dialog { padding: 30px 22px 24px; }.product-dialog h2 { font-size: 35px; }.dialog-columns { grid-template-columns: 1fr; gap: 15px; }.dialog-facts { margin: 17px 0; }
}
@media (max-width: 960px) {
  .visual-journal { grid-template-columns: .8fr 1fr; }
  .journal-inset { min-height: 330px; margin-top: 0; }
  .journal-inset figure, .journal-feature, .journal-feature figure { min-height: 460px; }
  .fieldwork-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .art-note { top: 58px; left: 40px; }
  .photo-credit { right: 17px; bottom: 17px; font-size: 8px; }
  .art-caption { right: 17px; bottom: 42px; font-size: 9px; }
  .visual-journal { display: block; padding-top: 77px; padding-bottom: 77px; }
  .journal-intro { padding: 0; }
  .journal-feature { min-height: 410px; margin-top: 35px; }
  .journal-feature figure { min-height: 410px; }
  .journal-inset { min-height: 310px; margin-top: 9px; }
  .journal-inset figure { min-height: 310px; }
  .fieldwork-section { padding: 78px 0 62px; }
  .fieldwork-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .fieldwork-card { min-height: 260px; padding: 15px; }
  .fieldwork-card h3 { font-size: 23px; }
}
@media (max-width: 400px) { h1 { font-size: 49px; }.hero-proof strong { font-size: 19px; }.pathway-card h3 { font-size: 20px; }.product-card h3 { font-size: 19px; }.product-meta { font-size: 8px; }.activity-card h3 { font-size: 22px; }.activity-card p { min-height: 135px; } }
@media print { .site-header, .hero-actions, .filter-chips, .card-link, .button, .site-footer { display: none !important; }.hero, .pathway-section, .directory-section, .research-section, .play-section, .safety-section, .closing-section, .method-section { padding: 30px 0; }.hero { min-height: 0; }.hero-art { min-height: 270px; }.product-grid, .evidence-grid, .activity-grid { grid-template-columns: repeat(2, 1fr); }.play-section { background: white; color: black; }.light-heading .eyebrow, .light-heading .section-aside { color: black; }.activity-card { border-color: black; }.safety-card { box-shadow: none; } }
