/* Scoped presentation for the Deeper Reflection Zone. */
.reflection-zone-document { --zone-gold: #e9b75e; --zone-cream: #f5e9cd; background: #070a11; color: #f4ead5; }
.reflection-zone-cover .screen-reader-text { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.reflection-zone-document :where(a, button, summary):focus-visible { outline: 3px solid #f6cf79; outline-offset: 5px; }
.reflection-zone-document .site-header { background: #080d18ec; }
.reflection-zone-document .site-header .wordmark, .reflection-zone-document .site-nav a { color: #f5e9d1; }
.reflection-zone-document .site-header .wordmark-mark { border-color: var(--zone-gold); }
.reflection-zone-shell { overflow-x: clip; }
.reflection-zone-cover { position: relative; width: 100%; background: #080b13; }
.reflection-zone-cover::after { content: ''; position: absolute; z-index: 3; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(circle at 68% 35%, #ffe5a8aa, transparent 44%); transition: opacity .32s ease; }
.reflection-zone-cover.is-entering::after { opacity: 1; }
.reflection-zone-cover__desktop { position: relative; }
.reflection-zone-cover__desktop picture { display: block; width: 100%; }
.reflection-zone-cover__desktop img { display: block; width: 100%; height: auto; }
.reflection-zone-cover__desktop-enter { position: absolute; z-index: 2; top: 64.3%; left: 5%; width: 22.4%; height: 8.8%; border-radius: .5rem; }
.reflection-zone-cover__desktop-enter:hover { box-shadow: 0 0 0 2px #f6d187, 0 0 2rem #f5bf6caa; }
.reflection-zone-cover__mobile { display: none; }
.reflection-zone-cover__desktop-title { position: absolute; }
.reflection-zone-cover__desktop-title h1 { margin: 0; }
.reflection-observatory, .reflection-zone-index, .reflection-zone-reader { scroll-margin-top: 5.5rem; }
.reflection-zone-eyebrow { margin: 0 0 1rem; color: var(--zone-gold); font-family: var(--mono); font-size: .69rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; }
.reflection-observatory { position: relative; min-height: 48rem; padding: clamp(5rem, 9vw, 9rem) clamp(1.3rem, 5vw, 5rem) 5rem; overflow: hidden; isolation: isolate; background: radial-gradient(ellipse at 54% 15%, #83501e 0, #352315 22%, transparent 46%), radial-gradient(ellipse at 50% 80%, #132032 0, #080d19 60%, #05070e 100%); }
.reflection-observatory::before { content: ''; position: absolute; z-index: -1; left: 50%; top: -24rem; width: min(110vw, 100rem); aspect-ratio: 1; border: 1px solid #eec47755; border-radius: 50%; box-shadow: 0 0 0 7rem #c78b2210, 0 0 0 14rem #d8a84d0c, inset 0 0 7rem #db972b22; transform: translateX(-50%); }
.reflection-observatory::after { content: ''; position: absolute; z-index: -1; left: 50%; bottom: -24rem; width: 130%; height: 45rem; border-top: 1px solid #e8b55b77; border-radius: 50% 50% 0 0; box-shadow: 0 -2rem 6rem #d8942929, inset 0 8rem 8rem #060a15; transform: translateX(-50%); }
.reflection-observatory__rings { position: absolute; z-index: 0; inset: 0; display: grid; place-items: center; overflow: hidden; pointer-events: none; }
.reflection-observatory__rings span { position: absolute; width: min(92vw, 70rem); aspect-ratio: 1; border: 1px solid rgba(238, 196, 119, .21); border-radius: 50%; box-shadow: inset 0 0 2.5rem rgba(219, 151, 43, .025); animation: zone-awareness-pulse 9s ease-in-out infinite; }
.reflection-observatory__rings span:nth-child(2) { width: min(66vw, 51rem); border-color: rgba(238, 196, 119, .18); animation-delay: -3s; }
.reflection-observatory__rings span:nth-child(3) { width: min(42vw, 32rem); border-color: rgba(238, 196, 119, .16); animation-delay: -6s; }
.reflection-observatory__sky { position: absolute; z-index: 1; inset: 0; pointer-events: none; background-image: radial-gradient(#ffdf9acc 1px, transparent 1.5px), radial-gradient(#f2c17188 1px, transparent 1.5px); background-size: 137px 113px, 227px 181px; background-position: 16px 23px, 88px 71px; opacity: .58; }
.reflection-observatory__sky::before { content: ''; position: absolute; inset: -12%; pointer-events: none; opacity: .2; background: radial-gradient(ellipse at 22% 46%, rgba(244, 195, 117, .12), transparent 43%), radial-gradient(ellipse at 78% 58%, rgba(194, 133, 71, .1), transparent 47%); animation: zone-atmosphere-drift 28s ease-in-out infinite alternate; }
.reflection-observatory__sky span { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff1b0; box-shadow: 0 0 18px 7px #ffc75b88; animation: zone-glimmer 6s ease-in-out infinite alternate; }
.reflection-observatory__sky span:nth-child(1) { top: 22%; left: 22%; }
.reflection-observatory__sky span:nth-child(2) { top: 34%; right: 16%; animation-delay: 1.9s; }
.reflection-observatory__sky span:nth-child(3) { bottom: 19%; left: 58%; animation-delay: 3.1s; }
.reflection-observatory__inner { position: relative; z-index: 2; width: min(100%, 86rem); margin: 0 auto; text-align: center; }
.reflection-observatory h2, .reflection-zone-index h2 { margin: 0; color: #fff7e5; font-family: var(--serif); font-size: clamp(2.8rem, 6vw, 5.7rem); font-weight: 400; line-height: 1.12; }
.reflection-observatory__intro { margin: 1rem 0 3.4rem; color: #f0dec0; font-family: var(--serif); font-size: clamp(1.12rem, 2vw, 1.55rem); font-style: italic; }
.reflection-observatory__points { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem 1.2rem; }
.reflection-observatory__point { position: relative; isolation: isolate; display: flex; min-width: 0; min-height: 11rem; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; padding: 1rem .5rem; border: 1px solid #d3a45122; border-radius: 50% 50% 1rem 1rem; background: linear-gradient(180deg, #f9c87309, #080e1c55); transition: background .45s ease, transform .3s ease, border-color .45s ease, box-shadow .45s ease; }
.reflection-observatory__point:hover, .reflection-observatory__point:focus-visible { border-color: #e9b75e88; background: #f2c3751b; transform: translateY(-4px); }
.reflection-observatory__point[href="#reflection-01"] { border-color: #e9b75e88; background: linear-gradient(180deg, #080b16a6, #080b16c9), url('../images/reflection-zone/reflection-01-golden.jpg') center / cover no-repeat; }
.reflection-observatory__point[href="#reflection-01"]:hover, .reflection-observatory__point[href="#reflection-01"]:focus-visible { border-color: #ffdc91; background: linear-gradient(180deg, #080b168c, #080b16b8), url('../images/reflection-zone/reflection-01-golden.jpg') center / cover no-repeat; }
.reflection-observatory__point[href="#reflection-02"] { --zone-card-art: url('../images/reflection-zone/reflection-02-golden.jpg'); }
.reflection-observatory__point[href="#reflection-03"] { --zone-card-art: url('../images/reflection-zone/reflection-03-golden.jpg'); }
.reflection-observatory__point[href="#reflection-04"] { --zone-card-art: url('../images/reflection-zone/reflection-04-golden.jpg'); }
.reflection-observatory__point[href="#reflection-05"] { --zone-card-art: url('../images/reflection-zone/reflection-05-golden.jpg'); }
.reflection-observatory__point[href="#reflection-06"] { --zone-card-art: url('../images/reflection-zone/reflection-06-golden.jpg'); }
.reflection-observatory__point[href="#reflection-07"] { --zone-card-art: url('../images/reflection-zone/reflection-07-golden.jpg'); }
.reflection-observatory__point[href="#reflection-08"] { --zone-card-art: url('../images/reflection-zone/reflection-08-golden.jpg'); }
.reflection-observatory__point[href="#reflection-09"] { --zone-card-art: url('../images/reflection-zone/reflection-09-golden.jpg'); }
.reflection-observatory__point[href="#reflection-10"] { --zone-card-art: url('../images/reflection-zone/reflection-10-golden.jpg'); }
.reflection-observatory__point[href="#reflection-11"] { --zone-card-art: url('../images/reflection-zone/reflection-11-golden.jpg'); }
.reflection-observatory__point[href="#reflection-12"] { --zone-card-art: url('../images/reflection-zone/reflection-12-golden.jpg'); }
.reflection-observatory__point[href^="#reflection-"]:not([href="#reflection-01"]) { border-color: #e9b75e88; background: linear-gradient(180deg, #080b16a6, #080b16c9), var(--zone-card-art) center / cover no-repeat; }
.reflection-observatory__point[href^="#reflection-"]:not([href="#reflection-01"]):hover, .reflection-observatory__point[href^="#reflection-"]:not([href="#reflection-01"]):focus-visible { border-color: #ffdc91; background: linear-gradient(180deg, #080b168c, #080b16b8), var(--zone-card-art) center / cover no-repeat; }
.reflection-observatory__point::before, .reflection-observatory__point::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .55s ease; }
.reflection-observatory__point::before { z-index: 0; background: radial-gradient(ellipse at 50% 27%, #ffe5a58a 0, #efaa4852 30%, #b96d2736 54%, transparent 80%), linear-gradient(180deg, #ffcb6120, transparent 62%); }
.reflection-observatory__point::after { z-index: 1; background: radial-gradient(circle at 18% 32%, #ffe8ae 0 1px, transparent 2px), radial-gradient(circle at 80% 24%, #fff2c2 0 1px, transparent 2px), radial-gradient(circle at 72% 67%, #ffe1a0 0 1px, transparent 2px), radial-gradient(circle at 27% 72%, #ffd88d 0 1px, transparent 2px), radial-gradient(circle at 91% 51%, #fff2c2 0 1px, transparent 2px); }
.reflection-observatory__beacon { position: relative; z-index: 2; isolation: isolate; display: block; width: 2.5rem; height: 2.5rem; margin-bottom: .7rem; border: 1px solid #ffdf8d; border-radius: 50%; background: radial-gradient(circle, #fff1bf 0 12%, #e7ae51 25%, #7c4b18 55%, #160d0a 100%); box-shadow: 0 0 1.5rem #e7ad56aa, inset 0 0 .6rem #ffdd84; transition: background .45s ease, box-shadow .45s ease; }
.reflection-observatory__beacon::before, .reflection-observatory__beacon::after { content: ''; position: absolute; z-index: -1; top: 50%; left: 50%; width: 22rem; height: 22rem; border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity .5s ease; }
.reflection-observatory__beacon::before { background: repeating-conic-gradient(from 0deg, #ffeab399 0deg .28deg, transparent .65deg 5deg), repeating-conic-gradient(from 2deg, #ffcc704d 0deg .75deg, transparent 1.6deg 11deg); -webkit-mask-image: radial-gradient(circle, transparent 0 5%, #000 9%, #0009 31%, transparent 65%); mask-image: radial-gradient(circle, transparent 0 5%, #000 9%, #0009 31%, transparent 65%); transform: translate(-50%, -50%); }
.reflection-observatory__beacon::after { width: 4.25rem; height: 4.25rem; border: 1px solid #ffe6a6aa; box-shadow: 0 0 1.2rem #ffd06c99, inset 0 0 1.2rem #ffe4a855; transform: translate(-50%, -50%) scale(.75); }
.reflection-observatory__number { position: relative; z-index: 2; color: #d9b579; font: .66rem var(--mono); letter-spacing: .1em; }
.reflection-observatory__label { position: relative; z-index: 2; max-width: 17ch; margin-top: .4rem; color: #f8ebd2; font-family: var(--serif); font-size: clamp(.95rem, 1.5vw, 1.2rem); line-height: 1.25; }
@media (hover: hover) {
  .reflection-observatory__point:hover { border-color: #ffe2a0; box-shadow: 0 0 1.5rem #efb65355, inset 0 0 2rem #f4ba6440; }
  .reflection-observatory__point:hover::before, .reflection-observatory__point:hover::after, .reflection-observatory__point:hover .reflection-observatory__beacon::before, .reflection-observatory__point:hover .reflection-observatory__beacon::after { opacity: 1; }
  .reflection-observatory__point:hover::after { animation: zone-particles 3.8s ease-in-out infinite alternate; }
  .reflection-observatory__point:hover .reflection-observatory__beacon { background: radial-gradient(circle, #fffef0 0 13%, #ffe3a0 27%, #e9a747 58%, #653811 100%); box-shadow: 0 0 1.25rem .25rem #ffe1aacc, 0 0 3rem #ffc36999, inset 0 0 .7rem #fff4cb; }
  .reflection-observatory__point:hover .reflection-observatory__beacon::before { animation: zone-rays 18s linear infinite; }
  .reflection-observatory__point:hover .reflection-observatory__beacon::after { animation: zone-halo 3s ease-out infinite; }
}
.reflection-observatory__point:focus-visible { border-color: #ffe2a0; box-shadow: 0 0 1.5rem #efb65355, inset 0 0 2rem #f4ba6440; }
.reflection-observatory__point:focus-visible::before, .reflection-observatory__point:focus-visible::after, .reflection-observatory__point:focus-visible .reflection-observatory__beacon::before, .reflection-observatory__point:focus-visible .reflection-observatory__beacon::after { opacity: 1; }
.reflection-observatory__point:focus-visible::after { animation: zone-particles 3.8s ease-in-out infinite alternate; }
.reflection-observatory__point:focus-visible .reflection-observatory__beacon { background: radial-gradient(circle, #fffef0 0 13%, #ffe3a0 27%, #e9a747 58%, #653811 100%); box-shadow: 0 0 1.25rem .25rem #ffe1aacc, 0 0 3rem #ffc36999, inset 0 0 .7rem #fff4cb; }
.reflection-observatory__point:focus-visible .reflection-observatory__beacon::before { animation: zone-rays 18s linear infinite; }
.reflection-observatory__point:focus-visible .reflection-observatory__beacon::after { animation: zone-halo 3s ease-out infinite; }
@media (hover: none) {
  .reflection-observatory__point:hover { transform: none; }
  .reflection-observatory__point:active { border-color: #eac47c; box-shadow: 0 0 1rem #e9b75e55; }
  .reflection-observatory__point:active::before { opacity: .55; }
}
.reflection-zone-action { display: inline-flex; min-height: 3.4rem; align-items: center; gap: 1rem; margin-top: 3.5rem; padding: .8rem 1.5rem; border: 1px solid var(--zone-gold); border-radius: .25rem; color: #ffe0a1; background: #0b1019; font: 600 .72rem var(--mono); letter-spacing: .14em; }
.reflection-zone-action:hover { background: #3b2916; }
.reflection-zone-back { display: table; margin: 2rem auto 0; color: #d9bd89; font: .7rem var(--mono); letter-spacing: .12em; }
.reflection-zone-back:hover { color: #fff0c7; }
.reflection-zone-index { padding: clamp(5rem, 8vw, 8rem) 1.25rem; background: linear-gradient(180deg, #090d16, #12151b); }
.reflection-zone-index__inner { width: min(100%, 68rem); margin: 0 auto; text-align: center; }
.reflection-zone-index ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem 2rem; margin: 2.7rem 0 0; padding: 0; list-style: none; text-align: left; }
.reflection-zone-index li { min-width: 0; }
.reflection-zone-index li a { display: grid; min-height: 4.3rem; grid-template-columns: 2.2rem minmax(0, 1fr) auto; gap: .8rem; align-items: center; padding: .7rem .6rem; border-bottom: 1px solid #d9b9794a; color: #f5e8cd; }
.reflection-zone-index li a:hover { color: #fff5da; background: #f4c36b13; }
.reflection-zone-index li a span:first-child { color: #d5ae6b; font: .67rem var(--mono); }
.reflection-zone-index li a span:last-child { color: var(--zone-gold); }
.reflection-zone-readers { padding: 1px 1.25rem 6rem; background: radial-gradient(ellipse at center top, #503113, #0b0e17 48%, #070a11 100%); }
.reflection-zone-reader { width: min(100%, 72rem); margin: 5rem auto 0; }
.reflection-zone-reader__sheet { padding: clamp(2rem, 5vw, 5.5rem); border: 1px solid #bd9557; background: linear-gradient(140deg, #fbf3e3, #eee0c7); box-shadow: 0 2.5rem 5rem #0007; color: #241b17; }
.reflection-zone-reader .reflection-zone-eyebrow { color: #7b511f; }
.reflection-zone-reader h2 { max-width: 20ch; margin: 0; color: #211915; font-family: var(--serif); font-size: clamp(2.2rem, 5vw, 4.3rem); font-weight: 400; line-height: 1.12; }
.reflection-zone-reader__credit { margin: 1.3rem 0 2.6rem; padding-bottom: 1.3rem; border-bottom: 1px solid #ad8553; color: #704b26; font-family: var(--serif); font-size: 1.2rem; font-style: italic; }
.reflection-zone-reader__body { max-width: 66ch; margin: 0; font-family: var(--serif); font-size: clamp(1.15rem, 1.7vw, 1.36rem); line-height: 1.85; }
.reflection-zone-reader__controls { display: flex; flex-wrap: wrap; gap: .75rem 1rem; margin-top: 3rem; padding-top: 1.7rem; border-top: 1px solid #b99b70; }
.reflection-zone-reader__controls a { display: inline-flex; min-height: 2.8rem; align-items: center; padding: .5rem .75rem; border: 1px solid #8d643c; border-radius: .2rem; color: #38271d; font: 600 .67rem/1.3 var(--mono); letter-spacing: .04em; }
.reflection-zone-reader__controls a:hover { color: #160d08; background: #d9b981; }
@keyframes zone-awareness-pulse { 0%, 100% { opacity: .1; transform: scale(.985); } 50% { opacity: .32; transform: scale(1.014); } }
@keyframes zone-atmosphere-drift { 0% { transform: translate3d(-1.5%, -.7%, 0) scale(1.02); } 50% { transform: translate3d(1%, .5%, 0) scale(1.035); } 100% { transform: translate3d(1.5%, -.4%, 0) scale(1.02); } }
@keyframes zone-glimmer { to { opacity: .28; transform: scale(.7); } }
@keyframes zone-rays { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes zone-halo { 0% { transform: translate(-50%, -50%) scale(.72); opacity: .75; } 100% { transform: translate(-50%, -50%) scale(1.6); opacity: 0; } }
@keyframes zone-particles { to { transform: translateY(-.55rem); opacity: .55; } }
@media (max-width: 1100px) {
  .reflection-zone-cover__desktop { display: none; }
  .reflection-zone-cover__desktop-title { display: none; }
  .reflection-zone-cover__mobile { display: flex; min-height: 100svh; flex-direction: column; align-items: center; padding: 9rem 1.25rem 3rem; text-align: center; background: radial-gradient(circle at 65% 65%, #8e541f, #1a1720 60%, #080b13); }
  .reflection-zone-cover__eyebrow { margin: 0; color: #e8c992; font: 600 .67rem/1.5 var(--mono); letter-spacing: .2em; }
  .reflection-zone-cover__mobile h1 { max-width: 14ch; margin: 1.2rem 0 .9rem; color: #ffebbd; font-family: var(--serif); font-size: clamp(3rem, 9vw, 5rem); font-weight: 400; line-height: 1.04; }
  .reflection-zone-cover__attribution { margin: 0; color: #f1ca89; font: italic clamp(1.2rem, 3vw, 1.6rem) var(--serif); }
  .reflection-zone-cover__description { max-width: 40ch; margin: 1.2rem 0 0; color: #f2e5cc; font: clamp(1.08rem, 2.3vw, 1.3rem)/1.5 var(--serif); }
  .reflection-zone-cover__mobile-enter { display: inline-flex; min-height: 3.6rem; align-items: center; gap: 1rem; margin: 1.7rem 0; padding: .8rem 1.5rem; border: 2px solid #f1bb69; border-radius: .3rem; color: #ffe0a2; background: #100e0dcc; box-shadow: 0 0 1.5rem #efac5166; font: 600 .8rem var(--mono); letter-spacing: .15em; }
  .reflection-zone-cover__mobile-art { position: relative; width: min(100%, 590px); aspect-ratio: 836 / 941; overflow: hidden; }
  .reflection-zone-cover__mobile-art picture { display: block; width: 100%; height: 100%; }
.reflection-zone-cover__mobile-art img { display: block; position: absolute; top: 0; left: -100%; width: 200%; max-width: none; height: auto; }
  .reflection-observatory__points { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .reflection-zone-document .site-header { padding: 1.35rem 1.3rem; }
  .reflection-zone-cover__mobile { padding-top: 7.5rem; }
  .reflection-observatory { padding-top: 5rem; }
  .reflection-observatory__points { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
  .reflection-observatory__point { min-height: 10rem; }
  .reflection-zone-index ol { grid-template-columns: 1fr; gap: 0; }
  .reflection-zone-reader { margin-top: 3rem; }
  .reflection-zone-reader__sheet { padding: 2rem 1.25rem; }
}
@media (max-width: 380px) {
  .reflection-zone-cover__eyebrow { font-size: .6rem; letter-spacing: .1em; }
  .reflection-observatory__points { grid-template-columns: 1fr; }
  .reflection-observatory__point { min-height: 7.5rem; }
  .reflection-zone-reader__controls a { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .reflection-zone-cover::after { transition: none; }
  .reflection-observatory__sky span { animation: none; }
  .reflection-observatory__rings span, .reflection-observatory__sky::before { animation: none; transform: none; }
  .reflection-observatory__point { transition: none; }
  .reflection-observatory__point:hover, .reflection-observatory__point:focus-visible { transform: none; }
  .reflection-observatory__point::after, .reflection-observatory__beacon::before, .reflection-observatory__beacon::after { animation: none !important; }
  .reflection-observatory__point:hover::after, .reflection-observatory__point:focus-visible::after { opacity: .6; }
  .reflection-observatory__point:hover .reflection-observatory__beacon::after, .reflection-observatory__point:focus-visible .reflection-observatory__beacon::after { transform: translate(-50%, -50%) scale(1); }
}