/* Turning: A Human Practice — styles One deliberate dark "night sky" palette. Colors are set explicitly so the page reads the same whatever the viewer's light/dark setting. */ :root { color-scheme: dark; --night: #070b1f; --night-2: #0c1331; --lapis: #1e2f6e; --gold: #e6c07b; --gold-soft: #f3dcaa; --saffron: #f0a340; --turq: #58cbc2; --rose: #e79a8f; --ivory: #f2ebdd; --mist: #aeb2cc; --hair: rgba(230, 192, 123, 0.24); --panel: rgba(10, 15, 40, 0.72); --scrim: rgba(7, 11, 31, 0.9); --f-display: "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif; --f-body: "Jost", "Futura", "Century Gothic", "Avenir Next", system-ui, sans-serif; --f-fa: "Noto Nastaliq Urdu", "Vazirmatn", "Noto Naskh Arabic", "Segoe UI", Tahoma, serif; --gutter: clamp(16px, 5vw, 72px); --col: 34rem; --bar-h: 56px; } * { box-sizing: border-box; } /* hidden always wins over component display rules. */ [hidden] { display: none !important; } /* Text grows with wide screens: 16px on phones, up to 20px on large monitors. */ html { font-size: clamp(16px, 11px + 0.45vw, 20px); scroll-behavior: smooth; scroll-padding-top: calc(var(--bar-h) + 12px); } body { margin: 0; background: var(--night); color: var(--ivory); font-family: var(--f-body); font-size: 1.125rem; line-height: 1.65; font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } a { color: var(--gold-soft); text-underline-offset: 3px; text-decoration-thickness: 1px; } a:hover { color: var(--ivory); } :focus-visible { outline: 2px solid var(--turq); outline-offset: 3px; border-radius: 4px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip { position: fixed; left: 12px; top: -80px; z-index: 50; background: var(--gold); color: var(--night); padding: 12px 16px; border-radius: 6px; font-weight: 500; text-decoration: none; } .skip:focus { top: calc(env(safe-area-inset-top, 0px) + 10px); } /* ---------- Backdrop: sky, stars, stage ---------- */ /* Sized to the tallest viewport so a phone's collapsing URL bar doesn't resize the canvas. */ .backdrop { position: fixed; top: 0; left: 0; right: 0; height: 100vh; height: 100lvh; z-index: 0; pointer-events: none; overflow: hidden; } .sky { position: absolute; inset: 0; background: radial-gradient(120% 90% at 70% 45%, #121a48 0%, rgba(18, 26, 72, 0) 60%), radial-gradient(90% 70% at 10% 100%, #0d1640 0%, rgba(13, 22, 64, 0) 70%), var(--night); } /* Per-chapter color washes. The script sets data-scene on . */ .wash { position: absolute; inset: -10%; opacity: 0; transition: opacity 1.8s ease; } .wash-lapis { background: radial-gradient(60% 55% at 68% 50%, rgba(46, 72, 170, 0.34), transparent 70%); } .wash-violet { background: radial-gradient(60% 55% at 68% 50%, rgba(92, 64, 170, 0.30), transparent 70%); } .wash-rose { background: radial-gradient(55% 50% at 68% 50%, rgba(190, 96, 110, 0.30), transparent 70%); } .wash-gold { background: radial-gradient(60% 55% at 68% 52%, rgba(214, 150, 60, 0.26), transparent 70%); } .wash-teal { background: radial-gradient(60% 55% at 68% 50%, rgba(40, 150, 150, 0.26), transparent 70%); } .wash-ember { background: radial-gradient(60% 55% at 68% 55%, rgba(200, 100, 40, 0.30), transparent 70%); } .wash-dawn { background: linear-gradient(to top, rgba(240, 163, 64, 0.16), transparent 55%); } [data-scene="earth"] .wash-lapis, [data-scene="galaxy"] .wash-violet, [data-scene="cell"] .wash-teal, [data-scene="womb"] .wash-rose, [data-scene="child"] .wash-gold, [data-scene="skill"] .wash-teal, [data-scene="inward"] .wash-lapis, [data-scene="triad"] .wash-violet, [data-scene="sufi"] .wash-lapis, [data-scene="pahlavani"] .wash-ember, [data-scene="event"] .wash-violet, [data-scene="bring"] .wash-gold, [data-scene="practice"] .wash-lapis, [data-scene="safety"] .wash-teal, [data-scene="still"] .wash-dawn, [data-scene="calm"] .wash-dawn { opacity: 1; } #stars { position: absolute; left: 50%; top: 50%; width: 150vmax; height: 150vmax; margin: -75vmax 0 0 -75vmax; will-change: transform; opacity: 0.9; } #stage { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: auto; touch-action: pan-y pinch-zoom; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; } /* Left-hand scrim keeps text readable over the stage on wide screens. */ .scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7, 11, 31, 0.88) 0, rgba(7, 11, 31, 0.8) calc(var(--gutter) + 36rem), rgba(7, 11, 31, 0) calc(var(--gutter) + 36rem + 8vw)); } .scale-readout { position: fixed; z-index: 3; right: calc(var(--gutter) + 8px); bottom: 20px; font: 500 0.84rem/1.35 var(--f-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--mist); text-align: right; pointer-events: none; font-variant-numeric: tabular-nums; } .scale-readout b { display: block; margin-bottom: 2px; color: var(--gold); font: 600 1.7rem/1.1 var(--f-display); letter-spacing: 0.01em; text-transform: none; } /* ---------- Top bar ---------- */ .topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 20; padding-top: env(safe-area-inset-top, 0px); background: rgba(7, 11, 31, 0.94); } .topbar::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 18px; pointer-events: none; background: linear-gradient(rgba(7, 11, 31, 0.94), rgba(7, 11, 31, 0)); } .topbar-inner { height: var(--bar-h); padding-inline: var(--gutter); display: flex; align-items: center; gap: 16px; } .brand { display: flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; color: var(--ivory); font: 500 0.95rem/1 var(--f-body); letter-spacing: 0.32em; text-transform: uppercase; } .brand svg { width: 26px; height: 26px; flex: none; } .brand-text { white-space: nowrap; } .topnav { display: flex; gap: 8px; margin-left: auto; } .topnav a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 8px; color: var(--mist); text-decoration: none; font-size: 0.94rem; letter-spacing: 0.05em; white-space: nowrap; } .topnav a:hover { color: var(--gold-soft); } .deg { font: 500 0.95rem/1 var(--f-body); color: var(--gold); letter-spacing: 0.08em; font-variant-numeric: tabular-nums; min-width: 3.4em; text-align: right; } .motion-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; min-width: 44px; background: transparent; color: var(--mist); border: 1px solid var(--hair); border-radius: 999px; padding: 0 14px; font: 400 0.82rem/1 var(--f-body); cursor: pointer; white-space: nowrap; } .motion-btn:hover { color: var(--ivory); border-color: var(--gold); } .motion-btn svg { width: 12px; height: 12px; flex: none; } .motion-btn .i-play { display: none; } .motion-btn[data-paused="true"] .i-pause { display: none; } .motion-btn[data-paused="true"] .i-play { display: block; } .sound-btn svg { width: 15px; height: 15px; } .volume { display: flex; align-items: center; min-height: 44px; } .volume input { -webkit-appearance: none; appearance: none; width: 96px; height: 24px; background: transparent; cursor: pointer; } .volume input::-webkit-slider-runnable-track { height: 2px; border-radius: 2px; background: rgba(230, 192, 123, 0.45); } .volume input::-moz-range-track { height: 2px; border-radius: 2px; background: rgba(230, 192, 123, 0.45); } .volume input::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 8px rgba(230, 192, 123, 0.6); } .volume input::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: var(--gold); } .volume input:focus-visible { outline: 2px solid var(--turq); outline-offset: 4px; } .sound-btn[data-on="true"] { color: var(--gold-soft); border-color: var(--gold); } .sound-btn[data-on="false"] { color: var(--gold-soft); border-color: rgba(230, 192, 123, 0.55); } .sound-btn[data-on="false"] .waves { opacity: 0.4; } /* ---------- Chapter dots (wide screens) ---------- */ .dots { position: fixed; z-index: 15; right: 10px; top: 50%; transform: translateY(-50%); list-style: none; margin: 0; padding: 0; display: grid; gap: 0; } .dots a { position: relative; display: grid; place-items: center; width: 26px; height: 24px; } .dots a::before { content: ""; width: 9px; height: 9px; border-radius: 50%; border: 1px solid rgba(230, 192, 123, 0.55); background: transparent; } .dots a[aria-current]::before { background: var(--gold); border-color: var(--gold); box-shadow: 0 0 10px rgba(230, 192, 123, 0.7); } .dots a span { position: absolute; right: 30px; top: 50%; transform: translateY(-50%); white-space: nowrap; font-size: 0.75rem; letter-spacing: 0.08em; color: var(--ivory); background: var(--panel); padding: 4px 9px; border-radius: 4px; opacity: 0; pointer-events: none; transition: opacity 0.2s; } .dots a:hover span, .dots a:focus-visible span { opacity: 1; } /* ---------- Chapters ---------- */ /* Text blocks take clicks; the open space around them lets clicks reach the picture. */ main { position: relative; z-index: 2; pointer-events: none; } .card { pointer-events: auto; } .chapter { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding-inline: var(--gutter); padding-block: calc(var(--bar-h) + 6vh) 8vh; } .card { width: 100%; max-width: var(--col); display: grid; gap: 1.05rem; } .card > * { margin: 0; } .eyebrow { display: flex; align-items: center; gap: 10px; font: 500 0.82rem/1.2 var(--f-body); letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); font-variant-numeric: tabular-nums; } .eyebrow::before { content: ""; width: 18px; height: 18px; flex: none; border-radius: 50%; border: 1px solid var(--gold); background: conic-gradient(var(--gold) var(--deg-frac, 0turn), transparent 0); -webkit-mask: radial-gradient(circle, transparent 5px, #000 5.5px); mask: radial-gradient(circle, transparent 5px, #000 5.5px); } h1, h2, h3 { font-family: var(--f-display); font-weight: 600; text-wrap: balance; margin: 0; } h2 { font-size: clamp(2.4rem, 4.3vw, 4rem); line-height: 1.04; letter-spacing: 0.005em; color: var(--ivory); } h3 { font-size: 1.5rem; line-height: 1.15; } p { text-wrap: pretty; } .lede { font-size: 1.3rem; line-height: 1.5; color: var(--ivory); } .muted { color: var(--mist); } .coda { font-family: var(--f-display); font-style: italic; font-weight: 500; font-size: 1.8rem; line-height: 1.28; color: var(--gold-soft); } em.term { font-style: italic; color: var(--gold-soft); } /* Small source links at the foot of a chapter. */ .src { margin-top: -0.3rem; font-size: 0.74rem; line-height: 1.4; letter-spacing: 0.1em; text-transform: uppercase; } .src a { display: inline-flex; align-items: center; min-height: 24px; color: rgba(174, 178, 204, 0.82); text-decoration: none; border-bottom: 1px solid rgba(174, 178, 204, 0.3); } .src a:hover { color: var(--gold-soft); border-bottom-color: var(--gold); } .src-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; font-size: 0.92rem; line-height: 1.5; color: var(--mist); } .src-list b { color: var(--ivory); font-weight: 500; } .src-list a { color: var(--mist); } .src-list a:hover { color: var(--gold-soft); } /* A small personal note that opens on request. */ details.about summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font: italic 500 1.05rem/1.2 var(--f-display); color: var(--mist); } details.about summary::-webkit-details-marker { display: none; } details.about summary::before { content: "·"; color: var(--gold); font-style: normal; } details.about summary:hover { color: var(--gold-soft); } details.about p { margin: 0; font: italic 500 1.08rem/1.45 var(--f-display); color: var(--mist); } /* Hero */ .hero { align-items: center; } .hero .card { max-width: 36rem; gap: 1.3rem; } .title { display: grid; gap: 0.4rem; font-family: var(--f-display); font-weight: 500; line-height: 0.9; } .title .t-main { font-size: clamp(3.2rem, 6.4vw, 6.4rem); letter-spacing: 0.14em; margin-right: -0.14em; text-transform: uppercase; background: linear-gradient(180deg, #fbf3df 20%, var(--gold) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .title .t-sub { font-style: italic; font-weight: 500; font-size: clamp(1.5rem, 3.2vw, 2.3rem); letter-spacing: 0.02em; color: var(--gold-soft); line-height: 1.1; } .hero .lede { font-family: var(--f-display); font-size: clamp(1.35rem, 2.4vw, 1.7rem); line-height: 1.35; font-weight: 500; } .begin { justify-self: start; display: inline-flex; align-items: center; gap: 12px; min-height: 44px; color: var(--gold-soft); text-decoration: none; font-size: 0.95rem; letter-spacing: 0.1em; } .begin svg { width: 30px; height: 30px; animation: slow-turn 9s linear infinite; } @keyframes slow-turn { to { transform: rotate(-360deg); } } /* The sound invitation: the most visible control on the opening screen. */ .listen { justify-self: start; display: flex; align-items: center; gap: 16px; text-align: left; cursor: pointer; min-height: 64px; padding: 12px 22px 12px 14px; max-width: 100%; color: var(--ivory); background: linear-gradient(120deg, rgba(230, 192, 123, 0.2), rgba(88, 203, 194, 0.12)); border: 1px solid var(--gold); border-radius: 999px; box-shadow: 0 0 0 0 rgba(230, 192, 123, 0.45), 0 0 28px rgba(230, 192, 123, 0.18); animation: listen-glow 2.8s ease-in-out infinite; transition: background 0.2s, transform 0.2s; } .listen:hover { background: linear-gradient(120deg, rgba(230, 192, 123, 0.3), rgba(88, 203, 194, 0.18)); transform: translateY(-1px); } .listen-icon { display: flex; align-items: flex-end; justify-content: center; gap: 3px; flex: none; width: 42px; height: 42px; padding: 10px 0; border-radius: 50%; background: var(--gold); } .listen-icon i { display: block; width: 3px; height: 40%; border-radius: 2px; background: var(--night); } .listen[data-on="true"] .listen-icon i { animation: bar 1.1s ease-in-out infinite; } .listen-icon i:nth-child(2) { height: 75%; animation-delay: -0.3s; } .listen-icon i:nth-child(3) { height: 55%; animation-delay: -0.6s; } .listen-icon i:nth-child(4) { height: 30%; animation-delay: -0.9s; } .listen-text { display: grid; gap: 3px; } .listen-text b { font: 500 1.08rem/1.2 var(--f-body); letter-spacing: 0.04em; color: var(--gold-soft); } .listen-text small { font-size: 0.85rem; line-height: 1.35; color: var(--mist); } .listen[data-on="true"] { animation: none; box-shadow: 0 0 24px rgba(230, 192, 123, 0.14); } @keyframes listen-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(230, 192, 123, 0.4), 0 0 28px rgba(230, 192, 123, 0.16); } 50% { box-shadow: 0 0 0 9px rgba(230, 192, 123, 0), 0 0 34px rgba(230, 192, 123, 0.28); } } @keyframes bar { 0%, 100% { transform: scaleY(0.5); } 50% { transform: scaleY(1.15); } } .listen-icon i { transform-origin: bottom; } /* Persian word & verse */ .word { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; align-items: center; border-top: 1px solid var(--hair); padding-top: 1rem; } .word .fa { grid-row: span 2; font-family: var(--f-fa); font-size: 2.7rem; line-height: 1.6; color: var(--gold); } .word .w-name { font: 500 0.84rem/1.2 var(--f-body); letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); } .word .w-text { font-size: 1.04rem; color: var(--mist); line-height: 1.5; } .verse { margin: 0; display: grid; gap: 0.5rem; padding-block: 0.4rem; } .verse .fa { font-family: var(--f-fa); font-size: clamp(1.4rem, 2.4vw, 1.8rem); line-height: 2.3; color: var(--gold-soft); text-align: right; } .verse .fa span { display: block; } .verse .en { font-family: var(--f-display); font-style: italic; font-size: 1.6rem; line-height: 1.3; color: var(--ivory); } .verse figcaption { font-size: 0.94rem; color: var(--mist); line-height: 1.45; } /* The goldsmith's tale */ .tale { position: relative; padding: 1rem 1.2rem 1.05rem; border-radius: 14px; background: linear-gradient(135deg, rgba(230, 192, 123, 0.12), rgba(10, 15, 40, 0.6)); border: 1px solid var(--hair); } .tale p { margin: 0; font-size: 1.05rem; line-height: 1.55; } .tale .tale-title { font: italic 500 1.35rem/1.2 var(--f-display); color: var(--gold-soft); margin-bottom: 0.35rem; } /* Notes and panels */ .note { border-left: 2px solid var(--turq); padding: 0.2rem 0 0.2rem 1rem; font-size: 1.05rem; color: var(--ivory); } .note strong { color: var(--turq); font-weight: 500; letter-spacing: 0.02em; } .note.warn { border-left-color: var(--saffron); } .note.warn strong { color: var(--saffron); } .symbols { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.55rem; } .symbols li { position: relative; padding-left: 32px; font-size: 1.05rem; line-height: 1.5; } .symbols li::before { position: absolute; left: 0; top: 0; content: ""; width: 9px; height: 9px; margin: 0.55em 0 0 5px; border-radius: 50%; border: 1px solid var(--gold); } details.more { border-top: 1px solid var(--hair); padding-top: 0.25rem; } details.more summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px; min-height: 44px; font: 500 1.02rem/1.3 var(--f-body); letter-spacing: 0.05em; color: var(--gold-soft); } details.more summary::-webkit-details-marker { display: none; } details.more summary::before { content: "+"; display: grid; place-items: center; width: 24px; height: 24px; flex: none; border: 1px solid var(--hair); border-radius: 50%; font-size: 0.95rem; color: var(--gold); } details.more[open] summary::before { content: "−"; } details.more > div { padding-top: 0.4rem; font-size: 1.05rem; color: var(--ivory); display: grid; gap: 0.6rem; } details.more p { margin: 0; } /* Segmented choosers (skill, triad, event lens, ideas) */ .chooser { display: flex; flex-wrap: wrap; gap: 8px; } .chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; background: rgba(12, 18, 48, 0.6); color: var(--ivory); border: 1px solid var(--hair); border-radius: 999px; padding: 9px 16px; font: 400 1rem/1.2 var(--f-body); cursor: pointer; transition: border-color 0.2s, background 0.2s, color 0.2s; } .chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--gold); flex: none; } .chip:hover { border-color: var(--gold); } .chip[aria-selected="true"] { background: rgba(230, 192, 123, 0.14); border-color: var(--gold); color: var(--gold-soft); } .chip[aria-selected="true"]::before { background: var(--gold); } .panel { background: var(--panel); border: 1px solid var(--hair); border-radius: 14px; padding: 1.05rem 1.2rem; font-size: 1.08rem; line-height: 1.55; min-height: 5.4rem; } .panel h3 { font-size: 1.3rem; margin-bottom: 0.25rem; color: var(--gold-soft); } .panel p { margin: 0; } .panel.light { background: none; border: 0; border-left: 1px solid var(--gold); border-radius: 0; padding: 0.2rem 0 0.2rem 1rem; min-height: 0; } .panel.light h3 { font-size: 1.15rem; } .fact { font-size: 1rem; color: var(--mist); border-top: 1px solid var(--hair); padding-top: 0.8rem; } .fact b { color: var(--gold); font-weight: 500; } /* Practice */ .practice { display: grid; gap: 1rem; } .revolution { display: grid; grid-template-columns: 136px 1fr; gap: 20px; align-items: center; } .rev-dial { position: relative; width: 136px; height: 136px; } .rev-dial svg { width: 100%; height: 100%; overflow: visible; } .rev-track { fill: none; stroke: rgba(230, 192, 123, 0.22); stroke-width: 1.2; } .rev-ticks path { stroke: rgba(230, 192, 123, 0.55); stroke-width: 1.2; } /* Fills counterclockwise from the top, the way the figures turn. */ .rev-fill { fill: none; stroke: var(--gold); stroke-width: 3; stroke-linecap: round; transform: rotate(-90deg) scaleY(-1); transform-origin: 60px 60px; filter: drop-shadow(0 0 4px rgba(230, 192, 123, 0.6)); } .rev-breath { fill: rgba(230, 192, 123, 0.05); stroke: rgba(230, 192, 123, 0.45); stroke-width: 1; transform: scale(var(--b, 0.86)); transform-origin: 60px 60px; transition: transform 0.25s linear; } .rev-point { fill: var(--gold); opacity: 0; } .rev-read { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 2px; font: 500 0.7rem/1 var(--f-body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--mist); } .rev-read b { font: 600 1.55rem/1 var(--f-display); letter-spacing: 0.02em; color: var(--gold-soft); font-variant-numeric: tabular-nums; } /* At the end the circle completes, glows, and settles into its center point. */ .revolution.done .rev-fill { animation: rev-settle 3.2s ease forwards; } .revolution.done .rev-breath, .revolution.done .rev-track, .revolution.done .rev-ticks { animation: rev-fade 3.2s ease forwards; } .revolution.done .rev-point { animation: rev-point 3.2s ease forwards; } .revolution.done .rev-read { animation: rev-fade 1.6s ease forwards; } @keyframes rev-settle { 0% { opacity: 1; filter: drop-shadow(0 0 10px rgba(230, 192, 123, 0.9)); } 100% { opacity: 0.12; filter: drop-shadow(0 0 2px rgba(230, 192, 123, 0.4)); } } @keyframes rev-fade { to { opacity: 0.15; } } @keyframes rev-point { 0% { opacity: 0; } 60% { opacity: 1; } 100% { opacity: 1; } } .rev-done { margin: 0; font: italic 500 1.6rem/1.3 var(--f-display); color: var(--gold-soft); } .steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; font-size: 1rem; line-height: 1.45; } .steps li { color: var(--mist); padding-left: 1rem; border-left: 1px solid transparent; transition: color 0.3s, border-color 0.3s; } .steps li b { color: var(--gold); font-weight: 500; } .steps li.now { color: var(--ivory); border-left-color: var(--gold); } .steps li.now b { color: var(--gold-soft); } .controls { display: flex; gap: 10px; flex-wrap: wrap; } .btn { min-height: 44px; background: var(--gold); color: var(--night); border: 1px solid transparent; border-radius: 999px; padding: 10px 20px; font: 500 0.95rem/1 var(--f-body); letter-spacing: 0.04em; cursor: pointer; } .btn:hover { background: var(--gold-soft); } .btn:disabled { opacity: 0.6; cursor: default; } .btn.ghost { background: transparent; color: var(--gold-soft); border: 1px solid var(--hair); } .btn.ghost:hover { border-color: var(--gold); } /* Safety */ .tips { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .tips li { background: var(--panel); border: 1px solid var(--hair); border-radius: 12px; padding: 0.8rem 0.9rem; font-size: 1rem; line-height: 1.45; color: var(--mist); } .tips b { display: block; color: var(--ivory); font-weight: 500; font-size: 1.07rem; margin-bottom: 2px; } .why-dizzy { display: grid; grid-template-columns: 84px 1fr; gap: 14px; align-items: start; font-size: 1.04rem; } .why-dizzy svg { width: 84px; height: 84px; } .why-dizzy p { margin: 0; } /* Stillness */ .still .card { max-width: 34rem; gap: 1.5rem; } .still-verse .fa { font-size: clamp(1.5rem, 2.6vw, 2rem); } .still-verse .en { font-size: clamp(1.7rem, 3vw, 2.3rem); } .still .question { font-family: var(--f-display); font-weight: 600; font-size: clamp(2.6rem, 5.4vw, 4.4rem); line-height: 1.05; letter-spacing: normal; color: var(--gold-soft); } /* Resources + contact */ .end { align-items: flex-start; } .end .card { max-width: 40rem; gap: 1.6rem; } @media (min-width: 1100px) { .end .card { max-width: 36rem; } } .src-note { margin: 0 0 0.6rem; font-size: 0.86rem; color: var(--mist); } /* The quiet stretch after 360° where the circle begins again. */ .chapter.loop-bridge { min-height: 90vh; padding: 0; } .res { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .res a { display: grid; grid-template-columns: 5.4rem 1fr; gap: 12px; align-items: baseline; text-decoration: none; padding: 0.8rem 0.95rem; border: 1px solid var(--hair); border-radius: 12px; background: rgba(12, 18, 48, 0.55); color: var(--ivory); } .res a:hover { border-color: var(--gold); } .res .kind { font: 500 0.78rem/1.2 var(--f-body); letter-spacing: 0.18em; text-transform: uppercase; color: var(--turq); } .res .what { display: grid; gap: 2px; } .res .what b { font-weight: 500; } .res .what span { font-size: 0.97rem; color: var(--mist); line-height: 1.45; } form.contact { display: grid; gap: 0.9rem; } .field { display: grid; gap: 6px; } .field label { font-size: 0.95rem; letter-spacing: 0.06em; color: var(--mist); } .field input, .field textarea { width: 100%; min-height: 44px; font: 400 1.05rem/1.4 var(--f-body); color: var(--ivory); background: rgba(6, 10, 28, 0.8); border: 1px solid rgba(230, 192, 123, 0.55); border-radius: 10px; padding: 11px 13px; } .field textarea { min-height: 7.5rem; resize: vertical; } .field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--saffron); box-shadow: 0 0 0 1px var(--saffron); } .field input:focus-visible, .field textarea:focus-visible { border-color: var(--gold); outline: 2px solid var(--turq); outline-offset: 2px; } .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .form-status { min-height: 1.4em; font-size: 0.95rem; color: var(--turq); margin: 0; } .form-status.warn { color: var(--saffron); } .form-note { font-size: 0.86rem; color: var(--mist); margin: 0; } footer.foot { border-top: 1px solid var(--hair); padding-top: 1.2rem; font-size: 0.92rem; color: var(--mist); display: grid; gap: 0.5rem; } footer.foot p { margin: 0; } /* ---------- Turning control ---------- */ .turn-hint { position: fixed; z-index: 1; left: var(--stage-x, 66%); top: var(--stage-hint-y, 88%); transform: translate(-50%, 0); display: inline-flex; align-items: center; gap: 8px; cursor: pointer; min-height: 44px; background: rgba(7, 11, 31, 0.62); color: var(--mist); border: 1px solid var(--hair); border-radius: 999px; padding: 0 16px; font: 400 0.84rem/1 var(--f-body); letter-spacing: 0.06em; white-space: nowrap; transition: opacity 0.6s, color 0.2s, border-color 0.2s; } .turn-hint svg { width: 15px; height: 15px; } .turn-hint:hover { color: var(--ivory); border-color: var(--gold); } html.has-turned .turn-hint { border-color: transparent; } html.has-turned .turn-hint svg { opacity: 0.55; } .turn-hint:focus-visible { z-index: 25; } /* Without JavaScript, every panel shows and the interactive-only controls are hidden. */ html:not(.js) .chooser, html:not(.js) .turn-hint, html:not(.js) .practice .controls, html:not(.js) .rev-dial, html:not(.js) .motion-btn, html:not(.js) .dots, html:not(.js) .scale-readout, html:not(.js) .deg { display: none; } html:not(.js) .revolution { grid-template-columns: 1fr; } /* ---------- Responsive ---------- */ @media (max-width: 1099px) { :root { --col: 36rem; } .scrim, .dots { display: none; } .chapter { min-height: 0; display: block; padding-top: 60vh; padding-top: 60svh; padding-bottom: 6vh; padding-bottom: 6svh; } .card { margin-inline: auto; padding: 44px 4px 36px; background: linear-gradient(to bottom, rgba(7, 11, 31, 0), var(--scrim) 44px, var(--scrim) calc(100% - 44px), rgba(7, 11, 31, 0)); } .hero { padding-top: 54vh; padding-top: 54svh; } .still { padding-top: 58vh; padding-top: 58svh; } .end { padding-top: 40vh; padding-top: 40svh; } /* On phones the turn button sits at the top left of the picture, clear of the text. */ .turn-hint { left: var(--gutter); top: calc(var(--bar-h) + env(safe-area-inset-top, 0px) + 22px); transform: none; width: 44px; padding: 0; justify-content: center; } .turn-hint .hint-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .scale-readout { z-index: 1; bottom: auto; top: calc(var(--bar-h) + env(safe-area-inset-top, 0px) + 20px); right: var(--gutter); } } @media (max-width: 899px) { .topnav a.opt { display: none; } } @media (max-width: 999px) { html.sound-on .motion-btn .label { display: none; } html.sound-on .motion-btn { padding: 0; } } @media (max-width: 767px) { .topnav { gap: 0; } .motion-btn .label { display: none; } .motion-btn { padding: 0; } .topbar .volume { position: absolute; right: var(--gutter); top: calc(100% + 2px); padding: 0 12px; background: rgba(7, 11, 31, 0.92); border: 1px solid var(--hair); border-radius: 999px; } .topbar-inner { position: relative; } /* The volume pill sits where the readout starts, so the readout steps down while sound is on. */ html.sound-on .scale-readout { top: calc(var(--bar-h) + env(safe-area-inset-top, 0px) + 58px); } } @media (max-width: 560px) { body { font-size: 1.0625rem; } .scale-readout b { font-size: 1.25rem; } .scale-readout { font-size: 0.74rem; } .topbar-inner { gap: 8px; } .brand { letter-spacing: 0.22em; font-size: 0.85rem; } .tips { grid-template-columns: 1fr; } .res a { grid-template-columns: 1fr; gap: 4px; } .listen { padding-right: 16px; border-radius: 28px; } .revolution { grid-template-columns: 1fr; justify-items: start; } .rev-dial { width: 120px; height: 120px; } } @media (max-width: 520px) { .brand-text { display: none; } .brand { min-width: 44px; justify-content: center; } } @media (max-width: 420px) { .deg { display: none; } } @media (max-width: 359px) { .topbar-inner { gap: 4px; } .topnav a { padding-inline: 6px; } } /* Windows high-contrast mode: keep the "current" states visible when author colors are replaced. */ @media (forced-colors: active) { .btn { border-color: ButtonText; } .chip[aria-selected="true"] { border-color: Highlight; } .chip[aria-selected="true"]::before { background: Highlight; border-color: Highlight; } .dots a[aria-current]::before { background: LinkText; } .steps li { border-left: 3px solid Canvas; } .steps li.now { border-left-color: Highlight; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .begin svg, .listen, .listen-icon i { animation: none !important; } .wash { transition: none; } .rev-breath { transition: none; } .revolution.done .rev-fill, .revolution.done .rev-breath, .revolution.done .rev-track, .revolution.done .rev-ticks, .revolution.done .rev-point, .revolution.done .rev-read { animation-duration: 0.01s; } } html.motion-paused .begin svg { animation-play-state: paused; } html.motion-paused .listen, html.motion-paused .listen-icon i { animation: none !important; } /* ---------- Print: a clean text version ---------- */ @media print { :root { color-scheme: light; --ivory: #111; --gold-soft: #111; --mist: #333; --gold: #7a5a1c; --turq: #7a5a1c; --saffron: #8a4b00; } body { background: #fff; color: #111; font-size: 11pt; } .backdrop, .topbar, .dots, .skip, .scale-readout, .listen, .begin, .turn-hint, .practice .controls, .rev-dial, .volume, form.contact, #contact, #contact + .muted, .src, .src-note { display: none !important; } .chapter { min-height: 0; padding: 0 0 14pt; display: block; } main > [data-clone-of] { display: none !important; } .card { max-width: none; background: none !important; padding: 0; } h2, .title .t-main, .title .t-sub, .coda, .verse .en, .still .question, .rev-done { color: #111; -webkit-text-fill-color: #111; background: none; } .eyebrow, .word .w-name, .word .fa, .verse .fa, .note strong, .res .kind { color: #7a5a1c; } .muted, .word .w-text, .verse figcaption, .fact, .tips li, .res .what span, footer.foot, .steps li, .src { color: #333; } .panel, .tips li, .res a, .tale { background: none; border-color: #bbb; } .panel[hidden] { display: block !important; } .chooser { display: none; } a { color: #111; } .res a::after { content: " — " attr(href); font-size: 9pt; color: #555; grid-column: 1 / -1; } .revolution { grid-template-columns: 1fr; } }