:root,
[data-theme="light"] {
--bg: #f3f0e7;
--bg2: #e9e5d9;
--bg-alt: #ebe4d4;
--surface: #fffef8;
--surface2: #f7f4ec;
--ink: #1a221a;
--muted: #5a6354;
--line: rgba(26, 34, 26, 0.11);
--line-strong: rgba(26, 34, 26, 0.18);
--accent: #2f6b4f;
--accent-ink: #f3f0e7;
--sage: #2f6b4f;
--sage-bright: #3d8a64;
--sage-dim: rgba(47, 107, 79, 0.1);
--sage-glow: rgba(47, 107, 79, 0.18);
--earth: #8a6a3d;
--clay: #c4a574;
--paper: #fffef8;
--gold: #b8921f;
--blush: #e8b4b8;
--blush-soft: #f2d4d8;
--blush-deep: #d4a5a5;
--blush-glow: rgba(232, 180, 184, 0.22);
--petal-a: #e8b4b8;
--petal-b: #f2d4d8;
--petal-c: #d4a5a5;
--petal-edge: #c9a227;
--lotus-sub-a: #d4a5a5;
--lotus-sub-b: #b8921f;
--lotus-sub-c: #c4a574;
--header: 68px;
--pad: clamp(18px, 4.8vw, 72px);
--max: 1080px;
--display: "Fraunces", "Iowan Old Style", Georgia, serif;
--sans: "Inter", system-ui, "Segoe UI", sans-serif;
--mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
--shadow: 0 28px 64px rgba(26, 34, 26, 0.09);
--shadow-sm: 0 12px 28px rgba(26, 34, 26, 0.06);
--r: 4px;
--ease: cubic-bezier(.22, 1, .36, 1);
--tap: 44px;
}
[data-theme="dark"] {
--bg: #06070a;
--bg2: #0b0c0e;
--bg-alt: #0d100e;
--surface: #101218;
--surface2: #15171c;
--ink: #f4f3ee;
--muted: #9a9991;
--line: rgba(244, 243, 238, 0.11);
--line-strong: rgba(244, 243, 238, 0.18);
--accent: #7dcaa5;
--accent-ink: #04140e;
--sage: #7dcaa5;
--sage-bright: #9ee0c0;
--sage-dim: rgba(125, 202, 165, 0.12);
--sage-glow: rgba(125, 202, 165, 0.22);
--earth: #c4a574;
--clay: #8a6a3d;
--paper: #101218;
--gold: #f3d437;
--blush: #7dcaa5;
--blush-soft: #9ee0c0;
--blush-deep: #5aa888;
--blush-glow: rgba(125, 202, 165, 0.2);
--petal-a: #7dcaa5;
--petal-b: #9ee0c0;
--petal-c: #7dcaa5;
--petal-edge: #f3d437;
--lotus-sub-a: #c4a574;
--lotus-sub-b: #f3d437;
--lotus-sub-c: #8a6a3d;
--shadow: 0 28px 70px rgba(0, 0, 0, 0.5);
--shadow-sm: 0 12px 32px rgba(0, 0, 0, 0.35);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
html:has(body.quiet-mode) { scroll-behavior: auto; }
html { scroll-padding-block: calc(var(--header, 80px) + 20px) 180px; }
html, body { margin: 0; min-height: 100%; }
body {
position: relative;
background: var(--bg);
color: var(--ink);
font-family: var(--sans);
font-size: 16px;
line-height: 1.6;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; border: 0; background: none; cursor: pointer; color: inherit; }
img, svg, iframe, audio { display: block; max-width: 100%; }
::selection { background: var(--sage); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--sage); outline-offset: 3px; }
.fx {
pointer-events: none;
position: fixed; inset: 0; z-index: 0; overflow: hidden;
}
.fx-wash {
position: absolute; inset: 0;
background:
  radial-gradient(ellipse 80% 50% at 50% -10%, var(--sage-glow), transparent 55%),
  radial-gradient(ellipse 60% 40% at 100% 80%, color-mix(in srgb, var(--clay) 18%, transparent), transparent 50%),
  radial-gradient(ellipse 50% 35% at 0% 60%, color-mix(in srgb, var(--earth) 12%, transparent), transparent 50%);
opacity: .9;
}
.fx-orb {
position: absolute; border-radius: 50%;
filter: blur(100px); opacity: .45; will-change: transform;
}
.fx-orb-a {
width: min(520px, 70vw); height: min(520px, 70vw);
top: -18%; left: -12%;
background: radial-gradient(circle, var(--sage-glow), transparent 70%);
}
.fx-orb-b {
width: min(420px, 55vw); height: min(420px, 55vw);
bottom: 8%; right: -10%;
background: radial-gradient(circle, color-mix(in srgb, var(--clay) 35%, transparent), transparent 70%);
}
.skip {
position: absolute; left: 14px; top: 14px; z-index: 1000;
min-height: var(--tap); padding: 10px 14px;
background: var(--sage); color: var(--accent-ink);
font: 800 11px var(--mono); letter-spacing: .08em; text-transform: uppercase;
border-radius: var(--r);
transform: translateY(-180%);
}
.skip:focus { transform: none; }
@media (prefers-reduced-motion: no-preference) {
.reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }
.hero-inner > * { animation: rise 1.05s var(--ease) both; }
.hero-inner > *:nth-child(1) { animation-delay: .05s; }
.hero-inner > *:nth-child(2) { animation-delay: .14s; }
.hero-inner > *:nth-child(3) { animation-delay: .24s; }
.hero-inner > *:nth-child(4) { animation-delay: .34s; }
.hero-inner > *:nth-child(5) { animation-delay: .44s; }
.hero-card { animation: rise 1.15s .2s var(--ease) both; }
@keyframes rise {
  from { opacity: 0; transform: translateY(32px); }
  to { opacity: 1; transform: none; }
}
.breath-path {
  stroke-dasharray: 900; stroke-dashoffset: 900;
  animation: draw 3.4s .4s ease forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }
.fx-orb-a { animation: drift 18s ease-in-out infinite alternate; }
.fx-orb-b { animation: drift 22s ease-in-out infinite alternate-reverse; }
@keyframes drift {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(24px, 18px) scale(1.06); }
}
}
.site-header {
position: sticky; top: 0; z-index: 100;
min-height: var(--header);
padding: 0 var(--pad);
display: flex; align-items: center; justify-content: space-between; gap: 14px;
background: color-mix(in srgb, var(--bg) 78%, transparent);
border-bottom: 1px solid var(--line);
backdrop-filter: blur(20px) saturate(1.2);
-webkit-backdrop-filter: blur(20px) saturate(1.2);
}
.brand {
display: flex; align-items: center; gap: 12px;
min-height: var(--tap); min-width: 0; flex-shrink: 0;
}
.brand-mark {
width: 40px; height: 40px; flex: 0 0 40px;
display: grid; place-items: center;
border: 1px solid var(--accent);
border-radius: var(--r);
color: var(--accent);
font: 800 12px var(--mono);
letter-spacing: .04em;
transition: background .2s var(--ease), color .2s, border-color .2s, box-shadow .2s;
}
.brand-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.brand-text b {
display: block; font: 800 11px/1.2 var(--mono); letter-spacing: .16em; white-space: nowrap;
}
.brand-text small {
color: var(--sage); font: 700 9px/1.3 var(--mono); letter-spacing: .14em;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nav {
display: flex; align-items: center; gap: 2px;
font: 700 11px var(--mono); letter-spacing: .1em; text-transform: uppercase;
color: var(--muted);
}
.nav > a {
display: inline-flex; align-items: center;
min-height: var(--tap); padding: 0 12px;
border-radius: var(--r);
transition: color .15s, background .15s;
}
.nav > a:hover { color: var(--ink); background: color-mix(in srgb, var(--accent) 6%, transparent); }
.seg {
display: inline-flex; border: 1px solid var(--line);
border-radius: var(--r); overflow: hidden;
}
.seg-btn {
min-width: var(--tap); min-height: var(--tap); padding: 0 12px;
color: var(--muted); font: 800 11px var(--mono);
/* Switch foreground and background together: intermediate theme colors can
   fail WCAG contrast in Firefox while the 150ms transition is running. */
transition: none;
}
.seg-btn:hover { color: var(--ink); }
.seg-btn.is-active, .seg-btn[aria-pressed="true"] {
background: var(--sage); color: var(--accent-ink);
}
.menu-toggle {
display: none; align-items: center; justify-content: center;
width: var(--tap); height: var(--tap);
border: 1px solid var(--line); border-radius: var(--r);
}
.menu-toggle .burger { display: flex; flex-direction: column; gap: 5px; width: 18px; }
.menu-toggle .burger i {
display: block; height: 1.5px; background: currentColor;
transition: transform .25s var(--ease), opacity .2s;
}
.menu-toggle.is-open .burger i:first-child { transform: translateY(6.5px) rotate(45deg); }
.menu-toggle.is-open .burger i:nth-child(2) { opacity: 0; }
.menu-toggle.is-open .burger i:last-child { transform: translateY(-6.5px) rotate(-45deg); }
.btn {
min-height: var(--tap); padding: 0 18px;
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
border: 1px solid transparent; border-radius: var(--r);
font: 800 11px var(--mono); letter-spacing: .1em; text-transform: uppercase;
transition: transform .2s var(--ease), background .2s, color .2s, border-color .2s, box-shadow .2s;
}
.btn:hover { transform: translateY(-2px); }
.btn.primary {
background: var(--sage); color: var(--accent-ink);
box-shadow: 0 12px 32px var(--sage-glow);
}
.btn.primary:hover { box-shadow: 0 16px 40px var(--sage-glow); }
.btn.ghost {
border-color: var(--line); background: transparent; color: var(--ink);
}
.btn.small { min-height: var(--tap); padding: 0 14px; font-size: 10px; }
.kicker {
margin: 0 0 16px;
color: var(--sage);
font: 800 11px/1.4 var(--mono);
letter-spacing: .22em; text-transform: uppercase;
}
h1, h2 {
margin: 0;
font-family: var(--display);
font-weight: 500;
letter-spacing: -.035em;
line-height: .96;
font-variation-settings: "opsz" 144;
}
h1 em, h2 em { color: var(--sage); font-style: italic; font-weight: 400; }
.hero {
max-width: var(--max);
margin: 0 auto;
padding: clamp(48px, 11vh, 120px) var(--pad) clamp(56px, 10vh, 104px);
display: grid;
grid-template-columns: 1fr;
gap: clamp(32px, 5vw, 64px);
align-items: center;
}
.hero-inner { display: flex; flex-direction: column; justify-content: center; }
.hero h1 {
font-size: clamp(52px, 13vw, 100px);
margin: 10px 0 22px;
}
.hero-lead {
margin: 0 0 30px;
max-width: 36ch;
color: var(--muted);
font-size: clamp(16px, 2.1vw, 19px);
line-height: 1.55;
}
.hero-actions {
display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px;
}
.hero-stats {
list-style: none; margin: 0; padding: 28px 0 0;
display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
border-top: 1px solid var(--line);
}
.hero-stats li {
padding: 18px 16px 20px;
background: color-mix(in srgb, var(--surface) 88%, transparent);
border: 1px solid var(--line);
border-radius: var(--r);
display: flex; flex-direction: column; gap: 8px;
min-height: 96px;
backdrop-filter: blur(8px);
transition: border-color .25s, transform .25s var(--ease), box-shadow .25s;
}
.hero-stats li:hover {
border-color: color-mix(in srgb, var(--sage) 45%, var(--line));
transform: translateY(-3px);
box-shadow: var(--shadow-sm);
}
.hero-stats strong {
color: var(--sage);
font: 500 clamp(26px, 4vw, 32px)/1 var(--display);
}
.hero-stats span {
color: var(--muted);
font: 600 12px/1.4 var(--sans);
}
.hero-card {
background: color-mix(in srgb, var(--surface) 92%, transparent);
border: 1px solid var(--line);
border-radius: var(--r);
box-shadow: var(--shadow);
min-height: 340px;
display: flex; flex-direction: column;
position: relative; overflow: hidden;
backdrop-filter: blur(10px);
}
.hero-card::before {
content: "";
position: absolute; inset: 0 auto 0 0; width: 4px;
background: linear-gradient(to bottom, var(--sage), var(--clay));
}
.hero-card header {
min-height: 52px; padding: 0 20px;
display: flex; align-items: center; justify-content: space-between;
border-bottom: 1px solid var(--line);
color: var(--muted); font: 700 10px var(--mono); letter-spacing: .14em;
}
.hero-card .dot { color: var(--sage); }
.hero-card .card-big {
margin: 32px 22px 10px;
font: 500 clamp(52px, 9vw, 72px)/1 var(--display);
color: var(--sage); letter-spacing: -.03em;
}
.hero-card .card-sub {
margin: 0 22px 22px; color: var(--muted); font-size: 14px; line-height: 1.5;
}
.hero-card ol { list-style: none; margin: auto 0 0; padding: 0 22px 22px; }
.hero-card li {
display: flex; align-items: center; gap: 14px;
min-height: 52px; padding: 14px 0;
border-top: 1px solid var(--line);
font: 500 19px var(--display);
}
.hero-card li span { color: var(--sage); font: 800 11px var(--mono); }
@media (min-width: 900px) {
.hero { grid-template-columns: 1fr; }
}
.section {
max-width: var(--max);
margin: 0 auto;
padding: clamp(56px, 10vh, 112px) var(--pad);
}
.section.alt {
background: color-mix(in srgb, var(--bg2) 70%, transparent);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
max-width: none;
padding-left: max(var(--pad), calc((100% - var(--max)) / 2 + var(--pad)));
padding-right: max(var(--pad), calc((100% - var(--max)) / 2 + var(--pad)));
}
.section-head { max-width: 40em; margin-bottom: clamp(28px, 5vh, 48px); }
.section-head h2 { font-size: clamp(36px, 6.5vw, 64px); margin-bottom: 14px; }
.about-lead {
margin: 0; max-width: 42ch;
color: var(--muted); font-size: clamp(16px, 1.8vw, 18px); line-height: 1.6;
}
.about-grid {
display: grid; gap: clamp(28px, 4vw, 48px);
}
.pillars {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
.pillars article {
padding: 24px 22px 28px;
background: color-mix(in srgb, var(--surface) 90%, transparent);
border: 1px solid var(--line);
border-radius: var(--r);
transition: border-color .25s, transform .25s var(--ease), box-shadow .25s;
}
.pillars article:hover {
border-color: color-mix(in srgb, var(--sage) 40%, var(--line));
transform: translateY(-3px);
box-shadow: var(--shadow-sm);
}
.pillars article span {
display: block; margin-bottom: 14px;
color: var(--sage); font: 800 11px var(--mono); letter-spacing: .14em;
}
.pillars article h3 {
margin: 0 0 10px;
font: 500 24px/1.1 var(--display); letter-spacing: -.02em;
}
.pillars article p { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.55; }
.pillars.offer article { min-height: 180px; }
.campo-grid {
display: grid; grid-template-columns: 0.35fr 1.65fr; gap: 16px; align-items: stretch;
}
.campo-audio, .campo-vortex {
padding: 22px;
background: color-mix(in srgb, var(--surface) 92%, transparent);
border: 1px solid var(--line);
border-radius: var(--r);
box-shadow: var(--shadow-sm);
}
.campo-audio {
padding: 14px 16px;
min-height: 0;
align-self: start;
}
.campo-vortex {
display: flex;
flex-direction: column;
min-height: 0;
}
.campo-audio header, .campo-vortex header {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 14px;
font: 800 11px var(--mono); letter-spacing: .14em; color: var(--sage);
}
.campo-audio header {
margin-bottom: 8px;
}
.campo-audio header a, .campo-vortex header a { color: var(--muted); }
.campo-audio header a:hover, .campo-vortex header a:hover { color: var(--sage); }
.campo-audio p { margin: 0 0 18px; color: var(--muted); font-size: 14.5px; }
.campo-audio p { margin: 0 0 10px; font-size: 13px; line-height: 1.45; }
.audio-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.campo-audio .audio-bar { gap: 8px; }
.audio-bar input[type="range"] { flex: 1; min-width: 120px; accent-color: var(--sage); }
.campo-vortex iframe {
width: 100%; height: min(560px, 70vh);
border: 0; border-radius: var(--r); background: #0a0a0a;
flex: 1 1 auto;
min-height: min(560px, 70vh);
}
.timeline {
list-style: none; margin: 0; padding: 0;
display: grid; gap: 0;
border-left: 2px solid color-mix(in srgb, var(--sage) 35%, var(--line));
}
.timeline li {
position: relative;
display: grid; grid-template-columns: 120px 1fr; gap: 20px;
padding: 22px 0 22px 28px;
}
.timeline li::before {
content: "";
position: absolute; left: -6px; top: 30px;
width: 10px; height: 10px; border-radius: 50%;
background: var(--sage);
box-shadow: 0 0 0 4px var(--sage-dim);
}
.timeline em {
color: var(--sage); font: 800 11px/1.4 var(--mono);
letter-spacing: .08em; font-style: normal;
}
.timeline h3 { margin: 0 0 6px; font: 500 22px/1.15 var(--display); }
.timeline p { margin: 0; color: var(--muted); font-size: 14.5px; }
.roles { display: grid; gap: 14px; }
.role {
padding: 24px 26px;
background: color-mix(in srgb, var(--surface) 92%, transparent);
border: 1px solid var(--line);
border-radius: var(--r);
transition: border-color .25s, box-shadow .25s;
}
.role:hover {
border-color: color-mix(in srgb, var(--sage) 40%, var(--line));
box-shadow: var(--shadow-sm);
}
.role header {
display: flex; justify-content: space-between; align-items: center; gap: 12px;
margin-bottom: 10px;
font: 800 11px var(--mono); letter-spacing: .1em; color: var(--muted);
}
.role header em {
color: var(--sage); font-style: normal;
padding: 4px 10px; border: 1px solid color-mix(in srgb, var(--sage) 35%, var(--line));
border-radius: 999px; background: var(--sage-dim);
}
.role h3 { margin: 0 0 4px; font: 500 26px/1.1 var(--display); }
.role-title { margin: 0 0 10px; color: var(--sage); font: 700 13px var(--mono); letter-spacing: .06em; }
.role p:last-child { margin: 0; color: var(--muted); }
.edu-grid {
display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
}
.edu {
padding: 22px 22px 24px;
background: color-mix(in srgb, var(--surface) 90%, transparent);
border: 1px solid var(--line);
border-radius: var(--r);
}
.edu.featured {
grid-column: 1 / -1;
border-color: color-mix(in srgb, var(--sage) 40%, var(--line));
background:
  linear-gradient(135deg, var(--sage-dim), transparent 50%),
  color-mix(in srgb, var(--surface) 92%, transparent);
}
.edu span { color: var(--sage); font: 800 11px var(--mono); letter-spacing: .12em; }
.edu h3 { margin: 10px 0 8px; font: 500 22px/1.15 var(--display); }
.edu p { margin: 0; color: var(--muted); font-size: 14.5px; }
.philo-shell { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }
.philo {
padding: clamp(36px, 6vw, 56px);
background: color-mix(in srgb, var(--surface) 94%, transparent);
border: 1px solid var(--line);
border-radius: var(--r);
box-shadow: var(--shadow);
position: relative; overflow: hidden;
}
.philo::after {
content: "";
position: absolute; inset: auto -20% -40% 40%;
height: 70%;
background: radial-gradient(ellipse, var(--sage-glow), transparent 65%);
pointer-events: none;
}
.philo-top {
display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;
}
.philo-mark { color: var(--sage); font-size: 22px; opacity: .7; }
.philo blockquote { margin: 0; position: relative; z-index: 1; }
.philo blockquote p {
margin: 0 0 12px;
font: 500 clamp(26px, 4.2vw, 40px)/1.2 var(--display);
letter-spacing: -.02em;
}
.philo-second { color: var(--sage) !important; font-style: italic !important; }
.philo-divider { margin: 28px 0; color: var(--sage); opacity: .55; }
.philo-divider svg { width: 100%; height: 40px; }
.tags {
list-style: none; margin: 0; padding: 0;
display: flex; flex-wrap: wrap; gap: 8px;
position: relative; z-index: 1;
}
.tags li {
min-height: 36px; padding: 0 14px;
display: inline-flex; align-items: center;
border: 1px solid var(--line); border-radius: 999px;
font: 700 11px var(--mono); letter-spacing: .06em; color: var(--muted);
background: color-mix(in srgb, var(--bg) 40%, transparent);
}
.philo-foot {
margin: 22px 0 0;
color: var(--sage); font: 800 11px var(--mono); letter-spacing: .16em;
text-transform: uppercase; position: relative; z-index: 1;
}
.cv-band {
margin: clamp(24px, 4vh, 48px) 0;
padding: clamp(48px, 8vh, 88px) var(--pad);
background:
  linear-gradient(180deg, color-mix(in srgb, var(--sage) 8%, transparent), transparent),
  var(--bg2);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.cv-band-inner {
max-width: var(--max); margin: 0 auto;
display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(28px, 4vw, 48px);
align-items: start;
}
.cv-band h2 { font-size: clamp(36px, 5.5vw, 56px); margin: 0 0 14px; }
.cv-band > div > p, .cv-band-inner > div > p {
color: var(--muted); max-width: 40ch; margin: 0 0 22px;
}
.cv-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cv-cards {
display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.cv-card {
padding: 20px 18px 18px;
background: color-mix(in srgb, var(--surface) 94%, transparent);
border: 1px solid var(--line);
border-radius: var(--r);
display: flex; flex-direction: column; gap: 6px;
min-height: 140px;
transition: border-color .25s, transform .25s var(--ease), box-shadow .25s;
}
.cv-card:hover {
border-color: color-mix(in srgb, var(--sage) 45%, var(--line));
transform: translateY(-3px);
box-shadow: var(--shadow-sm);
}
.cv-card > span:first-child {
color: var(--sage); font: 800 10px var(--mono); letter-spacing: .14em;
}
.cv-card strong { font: 500 20px/1.15 var(--display); }
.cv-card small { color: var(--muted); font-size: 12.5px; margin-bottom: auto; }
.cv-card .btn { align-self: flex-start; margin-top: 10px; }
.contact { padding-bottom: clamp(72px, 12vh, 120px); }
.contact-inner { max-width: 42em; }
.contact h2 { font-size: clamp(44px, 8vw, 80px); margin: 0 0 16px; }
.contact-lead { color: var(--muted); font-size: 17px; margin: 0 0 28px; max-width: 38ch; }
.contact-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.langs {
display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px;
}
.langs span {
min-height: 40px; padding: 0 14px;
display: inline-flex; align-items: center; gap: 8px;
border: 1px solid var(--line); border-radius: 999px;
font: 700 12px var(--mono); background: color-mix(in srgb, var(--surface) 70%, transparent);
}
.langs b { color: var(--sage); }
.langs i { font-style: normal; color: var(--muted); font-weight: 600; }
.meta { color: var(--muted); font-size: 14px; }
.meta a:hover { color: var(--sage); }
.site-footer {
display: flex; flex-wrap: wrap; gap: 16px 28px;
justify-content: space-between; align-items: center;
padding: 28px var(--pad);
border-top: 1px solid var(--line);
color: var(--muted);
font: 700 11px var(--mono); letter-spacing: .08em;
}
.site-footer a:hover { color: var(--sage); }
@media (max-width: 900px) {
.nav {
  position: fixed; inset: var(--header) 0 auto;
  display: none; flex-direction: column; align-items: stretch;
  gap: 0; padding: 12px var(--pad) 18px;
  background: color-mix(in srgb, var(--bg) 96%, transparent);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(20px);
  color: var(--ink);
}
.nav.open { display: flex; }
.nav > a {
  min-height: var(--tap); justify-content: flex-start;
  border-bottom: 1px solid var(--line); border-radius: 0; padding: 0 4px;
}
.menu-toggle { display: inline-flex; }
.brand-text { display: flex !important; }
.header-cv { display: inline-flex; }
.pillars { grid-template-columns: 1fr; }
.campo-grid { grid-template-columns: 1fr; }
.timeline li { grid-template-columns: 1fr; gap: 6px; }
.edu-grid { grid-template-columns: 1fr; }
.edu.featured { grid-column: auto; }
.cv-band-inner { grid-template-columns: 1fr; }
.cv-cards { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
.seg-btn { min-width: 40px; padding: 0 8px; }
.hero-stats { grid-template-columns: 1fr; }
.brand-text b { font-size: 10px; letter-spacing: .12em; }
.brand-text small { font-size: 8px; }
.hero-presence-strip { min-height: 0; }
}
@media (min-width: 901px) {
.header-cv { display: inline-flex; }
}
:root, [data-theme="light"] {
--bg: #f4efe4;
--bg2: #ebe4d6;
--surface: #fffef8;
--surface2: #f7f1e6;
--ink: #1a1c16;
--muted: #6a675c;
--line: rgba(26, 28, 22, 0.12);
--sage: #5f8f74;
--sage-2: #3f6b55;
--sage-glow: rgba(95, 143, 116, 0.22);
--earth: #8b6b4a;
--cream: #f4efe4;
--accent: #1a1c16;
--accent-ink: #fffef8;
--r: 8px;
--r-lg: 18px;
--header: 64px;
--pad: clamp(18px, 4vw, 64px);
--display: "Fraunces", "Iowan Old Style", Georgia, serif;
--sans: "Inter", system-ui, "Segoe UI", sans-serif;
--mono: "JetBrains Mono", ui-monospace, monospace;
--shadow-sm: 0 14px 36px rgba(26,28,22,.08);
--tap: 44px;
}
[data-theme="dark"] {
--bg: #06070a;
--bg2: #0c0e10;
--surface: #12151a;
--surface2: #181c22;
--ink: #f4f3ee;
--muted: #9a9991;
--line: rgba(244, 243, 238, 0.12);
--sage: #7dcaa5;
--sage-2: #a8e0c4;
--sage-glow: rgba(125, 202, 165, 0.24);
--earth: #c4a882;
--cream: #0c0e10;
--accent: #f4f3ee;
--accent-ink: #06070a;
}
html { background: var(--bg); }
body {
background: var(--bg);
color: var(--ink);
font-family: var(--sans);
}
.fx { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.fx-wash {
position: absolute; inset: -10%;
background:
  radial-gradient(ellipse 70% 50% at 20% 10%, color-mix(in srgb, var(--sage) 14%, transparent), transparent 60%),
  radial-gradient(ellipse 60% 45% at 90% 80%, color-mix(in srgb, var(--earth) 10%, transparent), transparent 55%);
}
.fx-orb {
position: absolute; border-radius: 50%;
filter: blur(48px);
opacity: .55;
animation: breath 9s ease-in-out infinite;
}
.fx-orb-a {
width: min(52vw, 420px); height: min(52vw, 420px);
left: -8%; top: 18%;
background: color-mix(in srgb, var(--sage) 35%, transparent);
}
.fx-orb-b {
width: min(44vw, 360px); height: min(44vw, 360px);
right: -6%; bottom: 8%;
background: color-mix(in srgb, var(--earth) 28%, transparent);
animation-delay: -4s;
}
@keyframes breath {
0%, 100% { transform: scale(1) translate(0,0); opacity: .45; }
50% { transform: scale(1.08) translate(2%, -1%); opacity: .7; }
}
@media (prefers-reduced-motion: reduce) {
.fx-orb { animation: none; }
}
main, .site-header, .site-footer { position: relative; z-index: 1; }
.site-header {
position: sticky; top: 0; z-index: 50;
display: flex; align-items: center; gap: 12px;
min-height: var(--header);
padding: 0 var(--pad);
background: color-mix(in srgb, var(--bg) 86%, transparent);
border-bottom: 1px solid color-mix(in srgb, var(--sage) 16%, var(--line));
backdrop-filter: blur(18px) saturate(1.15);
-webkit-backdrop-filter: blur(18px) saturate(1.15);
}
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; text-decoration: none; color: inherit; }
.brand-mark {
width: 40px !important; height: 40px !important; flex: 0 0 40px !important;
display: grid; place-items: center;
border-radius: 10px;
border: 1px solid color-mix(in srgb, var(--sage) 50%, transparent);
color: var(--sage);
font: 800 13px/1 var(--mono);
letter-spacing: .06em;
transition: background .25s, color .25s, box-shadow .25s, border-color .25s;
}
.brand:hover .brand-mark {
background: var(--sage); color: var(--accent-ink); border-color: var(--sage);
box-shadow: 0 0 28px var(--sage-glow);
}
.brand-text { display: flex !important; flex-direction: column; gap: 2px; min-width: 0; }
.brand-text b {
font: 800 11px/1.15 var(--mono); letter-spacing: .18em; white-space: nowrap;
}
.brand-text small {
color: var(--sage) !important;
font: 700 9px/1.2 var(--mono);
letter-spacing: .16em;
text-transform: uppercase;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav a {
min-height: 40px; padding: 0 12px;
display: inline-flex; align-items: center;
border-radius: 999px;
font: 600 13px var(--sans);
color: var(--muted);
}
.nav a:hover { color: var(--ink); background: color-mix(in srgb, var(--sage) 10%, transparent); }
.header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.seg {
display: inline-flex;
border: 1px solid color-mix(in srgb, var(--sage) 28%, var(--line));
border-radius: 999px;
overflow: hidden;
background: color-mix(in srgb, var(--surface) 70%, transparent);
}
.seg-btn, .ctrl-btn {
min-width: 42px; min-height: 36px;
padding: 0 12px;
font: 800 11px var(--mono);
letter-spacing: .08em;
color: var(--muted);
background: transparent;
border: 0;
cursor: pointer;
}
.seg-btn.is-active, .seg-btn[aria-pressed="true"],
.ctrl-btn.is-active, .ctrl-btn[aria-pressed="true"] {
background: var(--sage) !important;
color: var(--accent-ink) !important;
}
.btn {
display: inline-flex; align-items: center; justify-content: center;
min-height: 44px; padding: 0 18px;
border-radius: 999px;
font: 700 13px var(--sans);
border: 1px solid transparent;
text-decoration: none;
transition: transform .2s, box-shadow .2s, background .2s, border-color .2s;
}
.btn.primary {
background: var(--sage); color: var(--accent-ink);
box-shadow: 0 10px 28px var(--sage-glow);
}
.btn.primary:hover { transform: translateY(-2px); box-shadow: 0 14px 34px var(--sage-glow); }
.btn.ghost {
border-color: color-mix(in srgb, var(--sage) 35%, var(--line));
color: var(--ink); background: transparent;
}
.btn.ghost:hover { border-color: var(--sage); color: var(--sage); }
.btn.small { min-height: 36px; padding: 0 14px; font-size: 12px; }
.header-cv { background: var(--sage) !important; color: var(--accent-ink) !important; }
.menu-toggle {
display: none;
width: 44px; height: 44px;
place-items: center;
border-radius: 10px;
border: 1px solid var(--line);
}
.menu-toggle .burger, .menu-toggle {
flex-direction: column; gap: 5px;
}
.menu-toggle i, .burger i {
display: block; width: 18px; height: 2px;
background: var(--ink); border-radius: 2px;
}
.hero h1, .section-head h2, .contact h2 {
font-family: var(--display) !important;
font-weight: 600 !important;
letter-spacing: -0.03em !important;
line-height: 1.02 !important;
}
.hero h1 {
font-size: clamp(48px, 10vw, 96px) !important;
margin: 12px 0 18px;
max-width: 12ch;
}
.hero h1 em, .section-head h2 em, .contact h2 em {
color: var(--sage) !important;
font-style: italic !important;
font-weight: 500 !important;
}
.kicker {
font: 800 11px/1.3 var(--mono) !important;
letter-spacing: .18em !important;
text-transform: uppercase;
color: var(--sage) !important;
}
.hero-lead, .about-lead, .contact-lead {
font-size: clamp(16px, 1.7vw, 19px);
line-height: 1.6;
color: var(--muted);
max-width: 42ch;
}
.hero {
display: grid;
grid-template-columns: 1.15fr .85fr;
gap: clamp(24px, 4vw, 56px);
align-items: stretch;
padding: clamp(36px, 7vh, 72px) var(--pad) clamp(48px, 8vh, 88px);
min-height: calc(100svh - var(--header));
}
.hero-card {
border-radius: var(--r-lg);
border: 1px solid color-mix(in srgb, var(--sage) 22%, var(--line));
background:
  linear-gradient(165deg,
    color-mix(in srgb, var(--sage) 10%, var(--surface)),
    var(--surface) 45%,
    var(--surface2));
box-shadow: var(--shadow-sm);
padding: 28px;
display: flex; flex-direction: column; gap: 14px;
min-height: 340px;
}
.hero-card .card-big {
font: 600 clamp(56px, 8vw, 88px)/.9 var(--display);
color: var(--sage);
letter-spacing: -0.04em;
margin: 8px 0;
}
.hero-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin: 28px 0 0;
padding: 0;
list-style: none;
}
.hero-stats li {
border: 1px solid var(--line);
border-radius: var(--r-lg);
padding: 14px 16px;
background: color-mix(in srgb, var(--surface) 80%, transparent);
}
.hero-stats strong {
display: block;
font: 650 22px/1.1 var(--display);
color: var(--sage);
margin-bottom: 4px;
}
.hero-stats span { color: var(--muted); font-size: 13px; }
.section { padding: clamp(56px, 10vh, 110px) var(--pad); }
.section-head { max-width: 40em; margin-bottom: 36px; }
.section-head h2 { font-size: clamp(36px, 6vw, 64px); margin: 10px 0 14px; }
.pillar, .campo-audio, .campo-vortex, .edu, .cv-card, .timeline li {
border-radius: var(--r-lg) !important;
border: 1px solid color-mix(in srgb, var(--sage) 18%, var(--line)) !important;
background: color-mix(in srgb, var(--surface) 88%, transparent) !important;
box-shadow: var(--shadow-sm);
}
.pillar:hover, .cv-card:hover, .edu:hover {
border-color: color-mix(in srgb, var(--sage) 45%, var(--line)) !important;
transform: translateY(-3px);
box-shadow: 0 18px 44px rgba(26,28,22,.1);
}
.audio-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 16px; }
#audio-vol {
flex: 1 1 120px; min-width: 100px; accent-color: var(--sage);
}
.reveal {
opacity: 0; transform: translateY(16px);
transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
}
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.reveal { opacity: 1; transform: none; transition: none; }
}
@media (max-width: 900px) {
.hero { grid-template-columns: 1fr; min-height: auto; padding-top: 28px; }
.hero-card { min-height: 260px; order: -1; }
.nav {
  position: fixed; inset: var(--header) 0 auto;
  display: none; flex-direction: column; align-items: stretch;
  gap: 0; margin: 0; padding: 12px var(--pad) 18px;
  background: color-mix(in srgb, var(--bg) 96%, transparent);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(20px);
  z-index: 40;
}
.nav.open { display: flex; }
.nav a {
  min-height: var(--tap); border-radius: 0;
  border-bottom: 1px solid var(--line); justify-content: flex-start;
}
.menu-toggle { display: inline-flex; }
.brand-text { display: flex !important; }
.header-cv { display: inline-flex; }
.campo-grid, .pillars, .edu-grid, .cv-cards { grid-template-columns: 1fr !important; }
}
@media (max-width: 720px) {
.site-header { --header: 60px; padding: 0 12px; gap: 8px; }
.brand { gap: 8px; flex: 1 1 auto; overflow: hidden; }
.brand-text b { font-size: 10px; letter-spacing: .12em; }
.brand-text small { font-size: 8px; }
.hero-stats { grid-template-columns: 1fr; }
.seg-btn, .ctrl-btn { min-width: 38px; padding: 0 8px; }
.hero-actions { display: flex; flex-direction: column; align-items: stretch; }
.hero-actions .btn { width: 100%; justify-content: center; }
}
html, body { overflow-x: clip; }
.hero {
position: relative;
isolation: isolate;
max-width: var(--max);
margin: 0 auto;
width: 100%;
box-sizing: border-box;
padding: clamp(12px, 2.8vh, 36px) var(--pad) clamp(16px, 3.2vh, 40px) !important;
min-height: calc(100svh - var(--header)) !important;
height: auto !important;
max-height: none !important;
display: grid !important;
grid-template-columns: 1fr !important;
align-content: center;
gap: 0 !important;
overflow: hidden;
overflow-x: clip;
}
.hero-atmosphere {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
color: var(--sage);
overflow: hidden;
}
.hero-grain {
position: absolute;
inset: -20%;
opacity: 0.28;
mix-blend-mode: multiply;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
background-size: 180px 180px;
}
[data-theme="dark"] .hero-grain {
mix-blend-mode: soft-light;
opacity: 0.35;
}
.hero-orb {
position: absolute;
border-radius: 50%;
filter: blur(56px);
will-change: transform, opacity;
}
.hero-orb-1 {
width: min(46vw, 380px);
height: min(46vw, 380px);
top: -8%;
right: 8%;
background: radial-gradient(circle, color-mix(in srgb, var(--sage) 42%, transparent), transparent 68%);
opacity: 0.55;
}
.hero-orb-2 {
width: min(38vw, 300px);
height: min(38vw, 300px);
bottom: 6%;
left: -4%;
background: radial-gradient(circle, color-mix(in srgb, var(--earth) 32%, transparent), transparent 70%);
opacity: 0.4;
}
.hero-orb-3 {
width: min(28vw, 220px);
height: min(28vw, 220px);
top: 42%;
left: 38%;
background: radial-gradient(circle, color-mix(in srgb, var(--sage-2, var(--sage)) 28%, transparent), transparent 72%);
opacity: 0.35;
}
.hero-mandala {
position: absolute;
width: min(52vmin, 420px);
height: min(52vmin, 420px);
top: 50%;
right: max(-4%, calc(50% - 520px));
transform: translateY(-52%);
opacity: 0.55;
color: var(--sage);
}
[data-theme="dark"] .hero-mandala { opacity: 0.7; }
.hero-breath-wave {
position: absolute;
left: var(--pad);
right: var(--pad);
bottom: clamp(8px, 2vh, 20px);
height: clamp(36px, 6vh, 64px);
width: auto;
max-width: calc(100% - 2 * var(--pad));
color: var(--sage);
opacity: 0.7;
}
.breath-caption {
position: absolute;
top: clamp(10px, 2vh, 18px);
right: var(--pad);
margin: 0;
font: 700 10px/1 var(--mono);
letter-spacing: 0.22em;
text-transform: uppercase;
color: color-mix(in srgb, var(--sage) 70%, var(--muted));
opacity: 0.75;
}
.hero-vignette {
position: absolute;
inset: 0;
background: radial-gradient(ellipse 92% 72% at 50% 38%, transparent 42%, color-mix(in srgb, var(--bg) 60%, transparent) 100%);
z-index: 0;
}
[data-theme="dark"] .hero-vignette {
background: radial-gradient(ellipse 92% 72% at 50% 38%, transparent 36%, rgba(0, 0, 0, 0.6) 100%);
}
.hero-halo {
position: absolute;
z-index: 0;
width: min(58vw, 560px);
height: min(58vw, 560px);
left: -10%;
top: 14%;
border-radius: 50%;
background: radial-gradient(circle, var(--sage-glow), transparent 70%);
filter: blur(64px);
opacity: 0.5;
}
.orb-parallax,
.mandala-parallax {
position: absolute;
inset: 0;
transform: translate(calc(var(--px, 0px) * var(--depth, 1)), calc(var(--py, 0px) * var(--depth, 1)));
transition: transform 0.5s cubic-bezier(.22, 1, .36, 1);
will-change: transform;
}
.hero-sparks {
position: absolute;
inset: 0;
overflow: hidden;
z-index: 1;
}
.spark {
position: absolute;
left: var(--sx0, 10%);
bottom: var(--sy0, 4%);
width: var(--size, 4px);
height: var(--size, 4px);
border-radius: 50%;
background: radial-gradient(circle, var(--sage-bright, var(--sage)), transparent 72%);
opacity: 0;
filter: blur(0.4px);
}
[data-theme="dark"] .spark { filter: blur(0.4px) brightness(1.35); }
.mandala-orbit-outer { transform-origin: 210px 210px; }
.hero-stage {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 1fr;
gap: clamp(18px, 3vw, 40px);
align-items: center;
width: 100%;
min-width: 0;
}
.hero-inner {
display: flex;
flex-direction: column;
justify-content: center;
min-width: 0;
max-width: 100%;
}
.hero .kicker {
margin: 0 0 4px !important;
}
.hero h1 {
font-family: var(--display) !important;
font-weight: 600 !important;
font-size: clamp(34px, 6.4vmin, 70px) !important;
line-height: 1.04 !important;
letter-spacing: -0.035em !important;
margin: clamp(4px, 1vh, 10px) 0 clamp(8px, 1.4vh, 14px) !important;
max-width: 11ch !important;
}
.hero-lead {
margin: 0 0 clamp(12px, 2vh, 20px) !important;
max-width: 40ch !important;
font-size: clamp(14px, 1.55vmin + 0.35rem, 17px) !important;
line-height: 1.5 !important;
color: var(--muted);
}
.hero-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: clamp(14px, 2.4vh, 24px) !important;
}
.hero-stats {
list-style: none;
margin: 0 !important;
padding: clamp(12px, 2vh, 18px) 0 0 !important;
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 8px !important;
border-top: 1px solid color-mix(in srgb, var(--sage) 18%, var(--line));
}
.hero-stats li {
min-height: 0 !important;
padding: 10px 12px !important;
background: color-mix(in srgb, var(--surface) 82%, transparent) !important;
border: 1px solid color-mix(in srgb, var(--sage) 14%, var(--line)) !important;
border-radius: 12px !important;
display: flex;
flex-direction: column;
gap: 4px;
backdrop-filter: blur(10px);
box-shadow: none !important;
transform: none !important;
}
.hero-stats li:hover {
border-color: color-mix(in srgb, var(--sage) 40%, var(--line)) !important;
transform: none !important;
box-shadow: var(--shadow-sm) !important;
}
.hero-stats strong {
font: 550 clamp(18px, 2.4vmin, 24px)/1.05 var(--display) !important;
color: var(--sage) !important;
margin: 0 !important;
}
.hero-stats span {
color: var(--muted) !important;
font: 600 11px/1.35 var(--sans) !important;
}
.hero-card {
position: relative;
z-index: 2;
min-height: 0 !important;
margin: 0;
padding: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 0 !important;
border-radius: 18px !important;
border: 1px solid color-mix(in srgb, var(--sage) 26%, var(--line)) !important;
background:
  linear-gradient(160deg,
    color-mix(in srgb, var(--sage) 12%, var(--surface)),
    var(--surface) 42%,
    color-mix(in srgb, var(--earth) 6%, var(--surface2))) !important;
box-shadow:
  0 4px 8px rgba(26, 28, 22, 0.04),
  0 22px 48px rgba(26, 28, 22, 0.1),
  0 0 0 1px color-mix(in srgb, var(--sage) 8%, transparent) inset !important;
overflow: hidden;
backdrop-filter: blur(14px);
align-self: center;
width: 100%;
max-width: 420px;
justify-self: end;
}
.hero-card-glow {
position: absolute;
inset: auto -20% -30% 20%;
height: 55%;
background: radial-gradient(ellipse at center, color-mix(in srgb, var(--sage) 22%, transparent), transparent 70%);
pointer-events: none;
filter: blur(8px);
}
.hero-card::before {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 3px;
background: linear-gradient(to bottom, var(--sage), color-mix(in srgb, var(--earth) 70%, var(--sage)));
z-index: 1;
}
.hero-card header {
position: relative;
z-index: 1;
min-height: 44px !important;
padding: 0 18px 0 22px !important;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid color-mix(in srgb, var(--sage) 14%, var(--line));
color: var(--muted);
font: 700 10px var(--mono);
letter-spacing: 0.16em;
}
.hero-card .dot { color: var(--sage); font-weight: 800; }
.hero-card .card-big {
position: relative;
z-index: 1;
margin: clamp(14px, 2.2vh, 22px) 22px 6px !important;
font: 550 clamp(40px, 6vmin, 64px)/0.92 var(--display) !important;
color: var(--sage) !important;
letter-spacing: -0.04em !important;
}
.hero-card .card-sub {
position: relative;
z-index: 1;
margin: 0 22px 12px !important;
color: var(--muted);
font-size: 13px !important;
line-height: 1.45;
}
.hero-card ol {
position: relative;
z-index: 1;
list-style: none;
margin: auto 0 0 !important;
padding: 0 18px 16px 22px !important;
}
.hero-card li {
display: flex;
align-items: center;
gap: 12px;
min-height: 0 !important;
padding: 10px 0 !important;
border-top: 1px solid color-mix(in srgb, var(--sage) 12%, var(--line));
font: 500 clamp(15px, 2vmin, 18px) var(--display) !important;
}
.hero-card li span {
color: var(--sage);
font: 800 10px var(--mono);
letter-spacing: 0.06em;
}
@media (prefers-reduced-motion: no-preference) {
.hero-inner > * {
  opacity: 0;
  animation: heroRise 0.9s var(--ease) forwards;
}
.hero-inner > *:nth-child(1) { animation-delay: 0.05s; }
.hero-inner > *:nth-child(2) { animation-delay: 0.16s; }
.hero-inner > *:nth-child(3) { animation-delay: 0.3s; }
.hero-inner > *:nth-child(4) { animation-delay: 0.44s; }
.hero-inner > *:nth-child(5) { animation-delay: 0.58s; }
.hero-card {
  animation: heroCardIn 1s var(--ease) 0.4s backwards;
}
.hero[data-breath="cycle"] .hero-card {
  animation: heroCardIn 1s var(--ease) 0.4s backwards, cardFloat 9s ease-in-out 1.4s infinite;
}
.hero[data-breath="cycle"] .hero-halo {
  animation: breath478 19s ease-in-out infinite;
  animation-delay: -3s;
}
.hero[data-breath="cycle"] .hero-orb-1,
.hero[data-breath="cycle"] .hero-orb-2,
.hero[data-breath="cycle"] .hero-orb-3 {
  animation: breath478 19s ease-in-out infinite;
}
.hero[data-breath="cycle"] .hero-orb-2 { animation-delay: -6s; }
.hero[data-breath="cycle"] .hero-orb-3 { animation-delay: -12s; }
.hero[data-breath="cycle"] .mandala-orbit-outer {
  animation: slowSpin 90s linear infinite reverse;
}
.hero-sparks .spark {
  animation: sparkFloat var(--dur, 15s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}
.hero-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(115deg, transparent 42%, color-mix(in srgb, var(--sage) 16%, transparent) 52%, transparent 62%);
  transform: translateX(-130%);
  animation: cardShimmer 9s ease-in-out infinite;
  animation-delay: 1.2s;
  pointer-events: none;
}
.hero[data-breath="cycle"] .mandala-rings {
  transform-origin: 210px 210px;
  animation: breath478 19s ease-in-out infinite;
}
.hero[data-breath="cycle"] .ring-a { animation: ringPulse 19s ease-in-out infinite; transform-origin: 210px 210px; }
.hero[data-breath="cycle"] .ring-b { animation: ringPulse 19s ease-in-out -3s infinite; transform-origin: 210px 210px; }
.hero[data-breath="cycle"] .ring-c { animation: ringPulse 19s ease-in-out -6s infinite; transform-origin: 210px 210px; }
.hero[data-breath="cycle"] .ring-d { animation: ringPulse 19s ease-in-out -9s infinite; transform-origin: 210px 210px; }
.hero[data-breath="cycle"] .ring-core {
  transform-origin: 210px 210px;
  animation: corePulse 19s ease-in-out infinite;
}
.hero[data-breath="cycle"] .mandala-petals {
  transform-origin: 210px 210px;
  animation: slowSpin 72s linear infinite;
}
.hero[data-breath="cycle"] .mandala-petals-sub {
  transform-origin: 210px 210px;
  animation: slowSpin 96s linear infinite reverse;
}
.hero[data-breath="cycle"] .ring-e { animation: ringPulse 19s ease-in-out -1.5s infinite; transform-origin: 210px 210px; }
.hero[data-breath="cycle"] .mandala-orbit {
  transform-origin: 210px 210px;
  animation: slowSpin 48s linear infinite;
}
.hero[data-breath="cycle"] .orbit-dot.delay { animation: dotGlow 19s ease-in-out -4s infinite; }
.hero[data-breath="cycle"] .orbit-dot.delay2 { animation: dotGlow 19s ease-in-out -9s infinite; }
.hero[data-breath="cycle"] .breath-wave-path {
  stroke-dasharray: 12 10;
  animation: waveDrift 19s linear infinite, waveFade 19s ease-in-out infinite;
}
.hero[data-breath="cycle"] .breath-wave-path.soft {
  animation: waveDrift 28s linear reverse infinite, waveFade 19s ease-in-out -4s infinite;
}
.hero[data-phase="inhale"] .breath-caption { opacity: 0.95; }
.hero[data-phase="hold"] .breath-caption { opacity: 0.7; letter-spacing: 0.28em; }
.hero[data-phase="exhale"] .breath-caption { opacity: 0.55; }
@keyframes heroRise {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: none; }
}
@keyframes heroCardIn {
  from { opacity: 0; transform: translateY(20px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
@keyframes sparkFloat {
  0% { opacity: 0; transform: translate(0, 0) scale(0.55); }
  12% { opacity: 0.75; }
  70% { opacity: 0.4; }
  100% { opacity: 0; transform: translate(var(--drift, 12px), var(--rise, -240px)) scale(1); }
}
@keyframes cardShimmer {
  0%, 100% { transform: translateX(-130%); }
  45% { transform: translateX(130%); }
}
@keyframes breath478 {
  0% { transform: scale(1); opacity: 0.38; }
  21.05% { transform: scale(1.1); opacity: 0.72; }   
  57.89% { transform: scale(1.1); opacity: 0.75; }   
  100% { transform: scale(1); opacity: 0.38; }      
}
@keyframes ringPulse {
  0% { transform: scale(1); opacity: 0.28; }
  21.05% { transform: scale(1.045); opacity: 0.55; }
  57.89% { transform: scale(1.045); opacity: 0.58; }
  100% { transform: scale(1); opacity: 0.28; }
}
@keyframes corePulse {
  0% { transform: scale(1); opacity: 0.12; }
  21.05% { transform: scale(1.35); opacity: 0.28; }
  57.89% { transform: scale(1.35); opacity: 0.3; }
  100% { transform: scale(1); opacity: 0.12; }
}
@keyframes slowSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes waveDrift {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -140; }
}
@keyframes waveFade {
  0% { opacity: 0.25; }
  21.05% { opacity: 0.55; }
  57.89% { opacity: 0.5; }
  100% { opacity: 0.25; }
}
@keyframes cardFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes dotGlow {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}
}
@media (prefers-reduced-motion: reduce) {
.hero-inner > *,
.hero-orb,
.hero-halo,
.mandala-rings,
.mandala-petals,
.mandala-petals-sub,
.mandala-orbit,
.mandala-orbit-outer,
.ring,
.ring-core,
.breath-wave-path,
.hero-card,
.hero-card::after,
.hero-sparks .spark {
  animation: none !important;
}
.hero-inner > * { opacity: 1 !important; transform: none !important; }
.hero-card { opacity: 1 !important; transform: none !important; }
.hero-card::after { content: none !important; }
.hero-sparks .spark { opacity: 0 !important; }
.orb-parallax,
.mandala-parallax { transition: none !important; transform: none !important; }
.hero-mandala { opacity: 0.4; }
.hero-orb { opacity: 0.35; }
}
@media (min-width: 900px) {
.hero-stage {
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.82fr);
  gap: clamp(20px, 3.5vw, 48px);
}
.hero-card {
  max-width: none;
  justify-self: stretch;
}
.hero-mandala {
  right: -2%;
  opacity: 0.42;
}
.hero-stats {
  grid-template-columns: 1fr 1fr !important;
}
}
@media (min-width: 900px) and (max-height: 820px) {
.hero {
  min-height: calc(100svh - var(--header)) !important;
  height: calc(100svh - var(--header)) !important;
  max-height: calc(100svh - var(--header)) !important;
  padding: 10px var(--pad) 14px !important;
  align-content: center;
}
.hero h1 {
  font-size: clamp(32px, 5.6vmin, 56px) !important;
  margin: 2px 0 8px !important;
}
.hero-lead {
  margin-bottom: 10px !important;
  font-size: 14px !important;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hero-actions { margin-bottom: 12px !important; }
.hero-actions .btn { min-height: 40px; padding: 0 14px; font-size: 12px; }
.hero-stats { padding-top: 10px !important; gap: 6px !important; }
.hero-stats li { padding: 8px 10px !important; }
.hero-stats strong { font-size: 18px !important; }
.hero-stats span { font-size: 10px !important; }
.hero-card .card-big { margin: 10px 18px 4px !important; font-size: clamp(36px, 5vmin, 52px) !important; }
.hero-card .card-sub { margin: 0 18px 8px !important; font-size: 12px !important; }
.hero-card li { padding: 7px 0 !important; font-size: 15px !important; }
.hero-card header { min-height: 38px !important; }
.hero-mandala { width: min(40vmin, 300px); height: min(40vmin, 300px); opacity: 0.32; }
.hero-breath-wave { height: 32px; bottom: 4px; }
.breath-caption { top: 6px; font-size: 9px; }
}
@media (min-width: 900px) and (min-height: 821px) {
.hero {
  min-height: calc(100svh - var(--header)) !important;
}
}
@media (max-width: 899px) {
.hero {
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  padding: 20px var(--pad) 32px !important;
}
.hero-stage {
  grid-template-columns: 1fr;
}
.hero-card {
  order: -1;
  max-width: 100%;
  justify-self: stretch;
}
.hero-mandala {
  width: min(70vw, 280px);
  height: min(70vw, 280px);
  top: 8%;
  right: -12%;
  transform: none;
  opacity: 0.28;
}
.hero h1 {
  font-size: clamp(36px, 11vw, 56px) !important;
  max-width: 12ch !important;
}
.hero-stats {
  grid-template-columns: 1fr 1fr !important;
}
.hero-actions {
  flex-direction: column;
  align-items: stretch;
}
.hero-actions .btn {
  width: 100%;
  justify-content: center;
}
}
@media (max-width: 720px) {
.hero-stats {
  grid-template-columns: 1fr !important;
}
.hero-breath-wave { opacity: 0.45; }
}
:root, [data-theme="light"] {
--bg: #f3efe4;
--bg2: #ebe6d8;
--bg-alt: #e4dfcf;
--surface: #fffef9;
--surface2: #f8f3e9;
--ink: #172019;
--muted: #5c6456;
--line: rgba(23, 32, 25, 0.11);
--line-strong: rgba(23, 32, 25, 0.18);
--accent: #2f6b4f;
--accent-ink: #f3efe4;
--sage: #2f6b4f;
--sage-2: #3f8260;
--sage-bright: #3d8a64;
--sage-dim: rgba(47, 107, 79, 0.1);
--sage-glow: rgba(47, 107, 79, 0.2);
--forest: #1e2a1f;
--earth: #8a6a3d;
--clay: #c4a574;
--paper: #fffef9;
--gold: #b8921f;

--blush: #e8b4b8;
--blush-soft: #f2d4d8;
--blush-deep: #d4a5a5;
--blush-glow: rgba(232, 180, 184, 0.24);
--petal-a: #e8b4b8;
--petal-b: #f2d4d8;
--petal-c: #d4a5a5;
--petal-edge: #c9a227;
--lotus-sub-a: #d4a5a5;
--lotus-sub-b: #b8921f;
--lotus-sub-c: #c4a574;
--r: 10px;
--r-lg: 18px;
--max: 1100px;
--shadow: 0 28px 64px rgba(23, 32, 25, 0.09);
--shadow-sm: 0 14px 36px rgba(23, 32, 25, 0.07);
}
[data-theme="dark"] {
--bg: #06080a;
--bg2: #0b0e10;
--bg-alt: #0e1210;
--surface: #11151a;
--surface2: #161b20;
--ink: #f3f2ec;
--muted: #9a9a91;
--line: rgba(243, 242, 236, 0.11);
--line-strong: rgba(243, 242, 236, 0.18);
--accent: #7dcaa5;
--accent-ink: #04140e;
--sage: #7dcaa5;
--sage-2: #9ee0c0;
--sage-bright: #9ee0c0;
--sage-dim: rgba(125, 202, 165, 0.12);
--sage-glow: rgba(125, 202, 165, 0.24);
--forest: #0a1210;
--earth: #c4a574;
--clay: #8a6a3d;
--paper: #11151a;
--gold: #f3d437;

--blush: #7dcaa5;
--blush-soft: #9ee0c0;
--blush-deep: #5aa888;
--blush-glow: rgba(125, 202, 165, 0.2);
--petal-a: #7dcaa5;
--petal-b: #9ee0c0;
--petal-c: #7dcaa5;
--petal-edge: #f3d437;
--lotus-sub-a: #c4a574;
--lotus-sub-b: #f3d437;
--lotus-sub-c: #8a6a3d;
--shadow: 0 28px 70px rgba(0, 0, 0, 0.5);
--shadow-sm: 0 14px 36px rgba(0, 0, 0, 0.35);
}
.fx-wash {
background:
  radial-gradient(ellipse 75% 48% at 50% -8%, var(--sage-glow), transparent 58%),
  radial-gradient(ellipse 55% 38% at 100% 70%, color-mix(in srgb, var(--clay) 16%, transparent), transparent 52%),
  radial-gradient(ellipse 48% 32% at 0% 55%, color-mix(in srgb, var(--earth) 11%, transparent), transparent 52%),
  radial-gradient(ellipse 40% 28% at 70% 100%, color-mix(in srgb, var(--sage) 8%, transparent), transparent 55%) !important;
}
body::before {
content: "";
pointer-events: none;
position: fixed;
inset: 0;
z-index: 0;
opacity: 0.035;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
background-size: 220px 220px;
mix-blend-mode: multiply;
}
[data-theme="dark"] body::before {
opacity: 0.07;
mix-blend-mode: soft-light;
}
.site-header {
border-bottom-color: color-mix(in srgb, var(--sage) 18%, var(--line)) !important;
}
.brand-mark {
border-radius: 11px !important;
border-color: color-mix(in srgb, var(--sage) 55%, transparent) !important;
}
.nav > a, .nav a {
font: 700 11px var(--mono) !important;
letter-spacing: 0.12em !important;
text-transform: uppercase;
border-radius: 999px !important;
}
.section {
padding: clamp(64px, 11vh, 120px) var(--pad) !important;
position: relative;
}
.section.alt {
background:
  linear-gradient(180deg, color-mix(in srgb, var(--sage) 4%, transparent), transparent 28%),
  color-mix(in srgb, var(--bg2) 78%, transparent) !important;
}
.section-head {
max-width: 42em !important;
margin-bottom: clamp(32px, 5.5vh, 56px) !important;
}
.section-head h2 {
font-size: clamp(38px, 6.8vw, 68px) !important;
margin-bottom: 16px !important;
}
.section-head::after {
content: "";
display: block;
width: 48px;
height: 2px;
margin-top: 18px;
background: linear-gradient(90deg, var(--sage), transparent);
border-radius: 2px;
}
.about-grid { gap: clamp(32px, 5vw, 56px) !important; }
.pillars {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 16px !important;
}
.pillars article {
position: relative;
padding: 28px 24px 30px !important;
border-radius: var(--r-lg) !important;
border: 1px solid color-mix(in srgb, var(--sage) 20%, var(--line)) !important;
background:
  linear-gradient(165deg, color-mix(in srgb, var(--sage) 6%, var(--surface)), var(--surface)) !important;
box-shadow: var(--shadow-sm);
overflow: hidden;
transition: border-color .28s, transform .28s var(--ease, cubic-bezier(.22,1,.36,1)), box-shadow .28s !important;
}
.pillars article::before {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 3px;
background: linear-gradient(to bottom, var(--sage), color-mix(in srgb, var(--earth) 60%, var(--sage)));
opacity: 0.85;
}
.pillars article:hover {
border-color: color-mix(in srgb, var(--sage) 48%, var(--line)) !important;
transform: translateY(-4px) !important;
box-shadow: 0 20px 48px rgba(23, 32, 25, 0.1) !important;
}
.pillars article h3 {
font: 500 26px/1.12 var(--display) !important;
letter-spacing: -0.02em !important;
}
.pillars.offer article { min-height: 200px !important; }
.campo-grid {
gap: 18px !important;
grid-template-columns: 0.35fr 1.65fr !important;
align-items: stretch !important;
}
.campo-audio, .campo-vortex {
position: relative;
padding: 26px !important;
border-radius: var(--r-lg) !important;
border: 1px solid color-mix(in srgb, var(--sage) 22%, var(--line)) !important;
background:
  linear-gradient(160deg, color-mix(in srgb, var(--sage) 7%, var(--surface)), var(--surface)) !important;
box-shadow: var(--shadow-sm) !important;
overflow: hidden;
}
.campo-audio {
padding: 14px 16px !important;
align-self: start !important;
min-height: 0 !important;
}
.campo-vortex {
display: flex !important;
flex-direction: column !important;
padding: 18px !important;
min-height: 0 !important;
}
.campo-audio::after, .campo-vortex::after {
content: "";
position: absolute;
inset: auto -15% -35% 40%;
height: 55%;
background: radial-gradient(ellipse, var(--sage-glow), transparent 68%);
pointer-events: none;
}
.campo-audio header, .campo-vortex header {
position: relative;
z-index: 1;
margin-bottom: 16px !important;
}
.campo-audio header {
margin-bottom: 8px !important;
}
.campo-audio p { position: relative; z-index: 1; margin: 0 0 10px !important; font-size: 13px !important; line-height: 1.45 !important; }
.audio-bar { position: relative; z-index: 1; }
.campo-audio .audio-bar { gap: 8px !important; }
.campo-vortex iframe {
position: relative;
z-index: 1;
height: min(560px, 70vh) !important;
min-height: min(560px, 70vh) !important;
flex: 1 1 auto !important;
border-radius: 12px !important;
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sage) 15%, transparent);
}
.timeline {
border-left: 2px solid color-mix(in srgb, var(--sage) 40%, var(--line)) !important;
gap: 4px !important;
}
.timeline li {
padding: 26px 0 26px 32px !important;
border-radius: 0 var(--r-lg) var(--r-lg) 0;
transition: background .25s;
}
.timeline li:hover {
background: color-mix(in srgb, var(--sage) 5%, transparent);
}
.timeline li::before {
width: 12px !important;
height: 12px !important;
left: -7px !important;
top: 32px !important;
background: var(--sage) !important;
box-shadow:
  0 0 0 4px var(--sage-dim),
  0 0 16px var(--sage-glow) !important;
}
.timeline h3 {
font: 500 24px/1.15 var(--display) !important;
}
.timeline p { font-size: 15px !important; line-height: 1.55 !important; }
.roles { gap: 16px !important; }
.role {
position: relative;
padding: 28px 28px 28px 32px !important;
border-radius: var(--r-lg) !important;
border: 1px solid color-mix(in srgb, var(--sage) 18%, var(--line)) !important;
background:
  linear-gradient(135deg, color-mix(in srgb, var(--sage) 5%, var(--surface)), var(--surface)) !important;
box-shadow: var(--shadow-sm);
overflow: hidden;
transition: border-color .28s, box-shadow .28s, transform .28s !important;
}
.role::before {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 3px;
background: linear-gradient(to bottom, var(--sage), var(--earth));
}
.role:hover {
border-color: color-mix(in srgb, var(--sage) 45%, var(--line)) !important;
box-shadow: 0 18px 44px rgba(23, 32, 25, 0.1) !important;
transform: translateY(-2px);
}
.role h3 { font: 500 28px/1.1 var(--display) !important; }
.role header em {
border-radius: 999px !important;
background: var(--sage-dim) !important;
border-color: color-mix(in srgb, var(--sage) 40%, var(--line)) !important;
}
.edu-grid { gap: 16px !important; }
.edu {
padding: 26px 24px 28px !important;
border-radius: var(--r-lg) !important;
border: 1px solid color-mix(in srgb, var(--sage) 18%, var(--line)) !important;
background: color-mix(in srgb, var(--surface) 92%, transparent) !important;
box-shadow: var(--shadow-sm);
transition: border-color .25s, transform .25s, box-shadow .25s;
}
.edu:hover {
border-color: color-mix(in srgb, var(--sage) 42%, var(--line)) !important;
transform: translateY(-3px);
box-shadow: 0 16px 40px rgba(23, 32, 25, 0.09);
}
.edu.featured {
border-color: color-mix(in srgb, var(--sage) 42%, var(--line)) !important;
background:
  linear-gradient(135deg, var(--sage-dim), transparent 55%),
  color-mix(in srgb, var(--surface) 94%, transparent) !important;
box-shadow: var(--shadow);
}
.edu h3 { font: 500 24px/1.15 var(--display) !important; }
.philo {
padding: clamp(40px, 6.5vw, 64px) !important;
border-radius: 22px !important;
border: 1px solid color-mix(in srgb, var(--sage) 24%, var(--line)) !important;
background:
  linear-gradient(155deg,
    color-mix(in srgb, var(--sage) 9%, var(--surface)),
    var(--surface) 40%,
    color-mix(in srgb, var(--earth) 5%, var(--surface2))) !important;
box-shadow: var(--shadow) !important;
}
.philo blockquote p {
font: 500 clamp(28px, 4.4vw, 42px)/1.22 var(--display) !important;
}
.tags li {
transition: border-color .2s, color .2s, background .2s;
}
.tags li:hover {
border-color: color-mix(in srgb, var(--sage) 45%, var(--line));
color: var(--sage);
background: var(--sage-dim);
}
.cv-band {
position: relative;
padding: clamp(56px, 9vh, 100px) var(--pad) !important;
background:
  radial-gradient(ellipse 70% 50% at 20% 0%, var(--sage-glow), transparent 55%),
  linear-gradient(180deg, color-mix(in srgb, var(--sage) 7%, transparent), transparent),
  var(--bg2) !important;
overflow: hidden;
}
.cv-band::before {
content: "";
position: absolute;
inset: 0;
opacity: 0.04;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
pointer-events: none;
}
.cv-band-inner { position: relative; z-index: 1; }
.cv-band h2 { font-size: clamp(38px, 5.8vw, 60px) !important; }
.cv-card {
padding: 22px 20px 20px !important;
border-radius: var(--r-lg) !important;
border: 1px solid color-mix(in srgb, var(--sage) 20%, var(--line)) !important;
background:
  linear-gradient(165deg, color-mix(in srgb, var(--sage) 6%, var(--surface)), var(--surface)) !important;
min-height: 152px !important;
box-shadow: var(--shadow-sm);
}
.cv-card:hover {
border-color: color-mix(in srgb, var(--sage) 48%, var(--line)) !important;
transform: translateY(-4px) !important;
box-shadow: 0 18px 44px rgba(23, 32, 25, 0.1) !important;
}
.cv-card strong { font: 500 22px/1.15 var(--display) !important; }
.contact {
position: relative;
padding-bottom: clamp(80px, 13vh, 132px) !important;
}
.contact h2 {
font-size: clamp(46px, 8.2vw, 84px) !important;
}
.contact-actions .btn.primary {
box-shadow: 0 14px 36px var(--sage-glow);
}
.langs span {
border-radius: 999px !important;
border-color: color-mix(in srgb, var(--sage) 22%, var(--line)) !important;
background: color-mix(in srgb, var(--surface) 78%, transparent) !important;
transition: border-color .2s, transform .2s;
}
.langs span:hover {
border-color: color-mix(in srgb, var(--sage) 50%, var(--line));
transform: translateY(-1px);
}
.site-footer {
padding: 32px var(--pad) !important;
border-top-color: color-mix(in srgb, var(--sage) 16%, var(--line)) !important;
background: color-mix(in srgb, var(--bg2) 50%, transparent);
}
@media (prefers-reduced-motion: no-preference) {
.pillars article,
.role,
.edu,
.cv-card,
.campo-audio,
.campo-vortex {
  will-change: transform;
}
.section.reveal.is-in .pillars article:nth-child(1) { transition-delay: .04s; }
.section.reveal.is-in .pillars article:nth-child(2) { transition-delay: .1s; }
.section.reveal.is-in .pillars article:nth-child(3) { transition-delay: .16s; }
.fx-orb-a { animation: maxDrift 20s ease-in-out infinite alternate !important; }
.fx-orb-b { animation: maxDrift 26s ease-in-out infinite alternate-reverse !important; }
@keyframes maxDrift {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(28px, 20px) scale(1.07); }
}
}
@media (prefers-reduced-motion: reduce) {
.pillars article:hover,
.role:hover,
.edu:hover,
.cv-card:hover {
  transform: none !important;
}
body::before { opacity: 0.02; }
}
@media (max-width: 1100px) and (min-width: 901px) {
.pillars { gap: 12px !important; }
.pillars article { padding: 22px 18px 24px !important; }
.pillars article h3 { font-size: 22px !important; }
}
@media (max-width: 900px) {
.pillars { grid-template-columns: 1fr !important; }
.campo-grid {
  grid-template-columns: 1fr !important;
}
.campo-vortex {
  order: -1 !important;
}
.campo-vortex iframe {
  height: min(480px, 62vh) !important;
  min-height: min(420px, 55vh) !important;
}
.campo-audio {
  padding: 12px 14px !important;
}
.edu-grid { grid-template-columns: 1fr !important; }
.cv-band-inner { grid-template-columns: 1fr !important; }
.cv-cards { grid-template-columns: 1fr 1fr !important; }
.timeline li { grid-template-columns: 1fr !important; gap: 8px !important; padding-left: 28px !important; }
.section { padding: clamp(48px, 8vh, 80px) var(--pad) !important; }
.role { padding: 22px 20px 22px 24px !important; }
.role h3 { font-size: 24px !important; }
}
@media (max-width: 560px) {
.cv-cards { grid-template-columns: 1fr !important; }
.contact-actions { flex-direction: column; align-items: stretch; }
.contact-actions .btn { width: 100%; justify-content: center; }
}
.hero-atmosphere { opacity: 1; }
.hero-card {
border-radius: 20px !important;
}
body::before {
content: "";
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
background: radial-gradient(360px circle at var(--presence-x,50%) var(--presence-y,42%),
  color-mix(in srgb, var(--sage) 8%, transparent), transparent 68%);
opacity: .75;
transition: opacity .8s ease;
}
.hero-stage,
.ritual-panel,
.focus-player {
position: relative;
isolation: isolate;
}
.hero-stage::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background:
  radial-gradient(520px circle at var(--presence-x,50%) var(--presence-y,42%),
    color-mix(in srgb, var(--sage) 8%, transparent), transparent 72%),
  radial-gradient(260px circle at 82% 18%,
    color-mix(in srgb, var(--gold) 8%, transparent), transparent 74%);
opacity: calc(.55 + (var(--scroll-energy, 0) * .18));
}
.in-motion .hero-stage::after {
opacity: .42;
}
.in-motion .hero h1 {
letter-spacing: -.038em;
}
.sound-active .focus-player {
box-shadow:
  0 14px var(--sound-blur, 20px) color-mix(in srgb, var(--sage) 18%, transparent),
  0 0 0 1px color-mix(in srgb, var(--sage) 28%, transparent);
}
.sound-active .player-play {
box-shadow:
  0 0 var(--sound-blur, 20px) color-mix(in srgb, var(--sage) 52%, transparent);
}
.sanctuary-dock {
position: fixed;
left: 18px;
bottom: 18px;
z-index: 120;
width: min(340px, calc(100vw - 36px));
padding: 10px;
border: 1px solid var(--line);
border-radius: 24px;
background: color-mix(in srgb, var(--surface) 88%, transparent);
backdrop-filter: blur(24px) saturate(1.1);
-webkit-backdrop-filter: blur(24px) saturate(1.1);
box-shadow:
  0 22px 70px color-mix(in srgb, var(--ink) 10%, transparent),
  inset 0 1px 0 color-mix(in srgb, var(--ink) 8%, transparent);
transition: opacity .35s ease, transform .35s var(--ease), background .35s ease;
}
.sanctuary-breath {
width: 100%;
min-height: 70px;
padding: 7px 10px;
display: grid;
grid-template-columns: 54px 1fr auto;
align-items: center;
gap: 12px;
color: var(--ink);
text-align: left;
border-radius: 18px;
}
.sanctuary-breath:hover {
background: color-mix(in srgb, var(--sage) 7%, transparent);
}
.breath-ring {
position: relative;
width: 50px;
height: 50px;
display: grid;
place-items: center;
border-radius: 50%;
background: conic-gradient(var(--sage) var(--breath-pct,0%), color-mix(in srgb,var(--ink) 9%,transparent) 0);
transition: background .16s linear;
}
.breath-ring::after {
content: "";
position: absolute;
inset: 3px;
border-radius: 50%;
background: var(--surface);
}
.breath-ring-core {
position: relative;
z-index: 1;
width: 13px;
height: 13px;
border-radius: 50%;
background: var(--sage);
box-shadow: 0 0 18px color-mix(in srgb, var(--sage) 44%, transparent);
}
[data-breath-phase="inhale"] .breath-ring-core { transform: scale(1.38); }
[data-breath-phase="hold"] .breath-ring-core { transform: scale(1.12); }
[data-breath-phase="exhale"] .breath-ring-core { transform: scale(.82); }
.breath-copy {
min-width: 0;
display: grid;
gap: 4px;
}
.breath-kicker {
color: var(--muted);
font: 800 8px/1 var(--mono);
letter-spacing: .18em;
text-transform: uppercase;
}
.breath-copy strong {
font: 600 20px/1 var(--display);
letter-spacing: -.015em;
}
.breath-time {
color: var(--sage);
font: 800 10px var(--mono);
font-style: normal;
letter-spacing: .08em;
}
.sanctuary-dock-tools {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 10px;
padding: 7px 10px 2px;
border-top: 1px solid var(--line);
}
.sanctuary-section {
min-width: 0;
color: var(--muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font: 800 8px var(--mono);
letter-spacing: .15em;
text-transform: uppercase;
}
.sanctuary-quiet {
min-height: 30px;
padding: 0 9px;
border: 1px solid var(--line);
border-radius: 999px;
color: var(--muted);
font: 800 8px var(--mono);
letter-spacing: .08em;
text-transform: uppercase;
}
.sanctuary-quiet:hover,
.sanctuary-quiet[aria-pressed="true"] {
color: var(--ink);
border-color: color-mix(in srgb, var(--sage) 32%, transparent);
background: color-mix(in srgb, var(--sage) 7%, transparent);
}
.quiet-mode body::before {
opacity: 0;
}
body.quiet-mode .fx,
body.quiet-mode .spotlight,
body.quiet-mode .hero-sparks,
body.quiet-mode .hero-breath-wave,
body.quiet-mode .mandala-conic-halo,
body.quiet-mode .scroll-progress {
opacity: 0 !important;
}
body.quiet-mode .hero-stage::before {
opacity: .15;
}
body.quiet-mode .hero-orb,
body.quiet-mode .hero-mandala .mandala-orbit,
body.quiet-mode .hero-mandala .mandala-orbit-mid,
body.quiet-mode .hero-mandala .mandala-orbit-outer {
animation-play-state: paused !important;
}
body.quiet-mode .sanctuary-dock {
opacity: .68;
}
[data-theme="dark"] .sanctuary-dock {
background: color-mix(in srgb, #0b100d 90%, transparent);
}
@media (max-width: 640px) {
.sanctuary-dock {
  left: 10px;
  right: 10px;
  bottom: 10px;
  width: auto;
  border-radius: 20px;
}
.sanctuary-breath {
  min-height: 64px;
}
.breath-ring {
  width: 46px;
  height: 46px;
}
}
@media (prefers-reduced-motion: reduce) {
body::before { display: none; }
.sound-active .focus-player,
.sound-active .player-play { box-shadow: none; }
.breath-ring,
.breath-ring-core { transition: none; }
}
:root,
[data-theme="light"] {
--bg: #eee9de;
--bg2: #e6dfd1;
--bg-alt: #e9e2d4;
--surface: #f8f5ed;
--surface2: #f0eade;
--ink: #1d2c24;
--muted: #637067;
--line: rgba(29,44,36,.12);
--line-strong: rgba(29,44,36,.2);
--accent: #214b38;
--accent-ink: #f7f4ec;
--sage: #4f765f;
--sage-2: #6f947d;
--sage-bright: #86aa94;
--sage-dim: rgba(79,118,95,.09);
--sage-glow: rgba(79,118,95,.16);
--earth: #8f684f;
--clay: #a97162;
--gold: #9b7a48;
--blush: #c6948a;
--blush-soft: #e2c4bc;
--blush-deep: #a97162;
--petal-a: #6f947d;
--petal-b: #a7c3af;
--petal-c: #a97162;
--petal-edge: #9b7a48;
--mandala-soft: #4f765f;
--mandala-accent: #8f684f;
--mandala-core: #4f765f;
}
[data-theme="dark"] {
--bg: #09130f;
--bg2: #0c1812;
--bg-alt: #0e1b15;
--surface: #111d17;
--surface2: #15241d;
--ink: #edf1e9;
--muted: #9eaba3;
--line: rgba(237,241,233,.12);
--line-strong: rgba(237,241,233,.2);
--accent: #93c5a6;
--accent-ink: #09130f;
--sage: #80b798;
--sage-2: #a6d1b7;
--sage-bright: #b7dcc5;
--sage-dim: rgba(128,183,152,.11);
--sage-glow: rgba(128,183,152,.2);
--earth: #b79b78;
--clay: #bd7d6d;
--gold: #c5a56b;
--blush: #bc8275;
--blush-soft: #d7aea3;
--blush-deep: #aa7064;
--petal-a: #80b798;
--petal-b: #b7dcc5;
--petal-c: #bd7d6d;
--petal-edge: #c5a56b;
--mandala-soft: #80b798;
--mandala-accent: #c5a56b;
--mandala-core: #80b798;
}
html,
body {
background: var(--bg);
color: var(--ink);
}
body {
background:
  radial-gradient(52vw 32vw at 82% 10%, color-mix(in srgb,var(--sage-glow) 70%,transparent), transparent 72%),
  radial-gradient(38vw 30vw at 4% 84%, color-mix(in srgb,var(--earth) 7%,transparent), transparent 74%),
  linear-gradient(180deg, var(--bg) 0%, var(--bg2) 52%, var(--bg) 100%);
}
.site-header {
background: color-mix(in srgb, var(--bg) 78%, transparent);
border-bottom-color: var(--line);
}
.hero {
max-width: 1180px !important;
min-height: calc(100svh - var(--header)) !important;
padding: clamp(20px, 4vh, 52px) clamp(18px, 4vw, 70px) clamp(28px, 6vh, 72px) !important;
align-items: center;
}
.hero-stage {
min-height: min(760px, calc(100svh - var(--header) - 30px));
display: grid !important;
grid-template-columns: minmax(0, 1.14fr) minmax(300px, .86fr) !important;
align-items: center;
gap: clamp(24px, 4vw, 80px);
position: relative;
overflow: visible !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
.hero-stage::before {
content: "";
position: absolute;
z-index: 0;
left: 58%;
top: 12%;
bottom: 12%;
width: 1px;
background: linear-gradient(to bottom, transparent, var(--line-strong), transparent);
opacity: .6;
pointer-events: none;
}
.hero-stage::after {
content: "";
position: absolute;
z-index: 0;
left: 64%;
right: -8%;
bottom: 16%;
height: 1px;
background: linear-gradient(90deg, transparent, color-mix(in srgb,var(--sage) 26%,transparent), transparent);
opacity: .7;
pointer-events: none;
}
.hero-inner {
grid-column: 1;
max-width: 760px !important;
padding: clamp(44px, 6vh, 92px) 0 !important;
position: relative;
z-index: 4;
}
.hero .kicker {
margin: 0 0 18px !important;
color: var(--sage) !important;
font: 800 9px/1.2 var(--mono) !important;
letter-spacing: .24em !important;
}
.hero h1 {
max-width: 8.7ch !important;
margin: 0 !important;
font-family: var(--display) !important;
font-size: clamp(56px, 7.8vw, 112px) !important;
line-height: .88 !important;
letter-spacing: -.065em !important;
font-weight: 600 !important;
text-wrap: balance;
}
.hero h1 .hero-line {
display: block;
}
.hero h1 .hero-line-a,
.hero h1 .hero-line-b {
color: var(--ink);
}
.hero h1 .hero-line-c {
margin: .14em 0 0 .82em;
font-size: .62em;
line-height: .94;
}
.hero h1 em {
color: var(--sage) !important;
font-style: italic !important;
font-weight: 500 !important;
}
.hero-lead {
max-width: 46ch !important;
margin: clamp(24px, 3vh, 34px) 0 0 !important;
color: var(--muted) !important;
font-size: clamp(15px, 1.28vw, 18px) !important;
line-height: 1.62 !important;
}
.hero-actions {
margin: clamp(24px, 3vh, 34px) 0 0 !important;
gap: 10px !important;
}
.hero-actions .btn {
min-height: 46px;
padding-inline: 18px;
}
.hero-presence-strip {
max-width: 690px;
margin: clamp(34px, 4vh, 48px) 0 0 !important;
padding: 16px 0 14px !important;
border-top: 1px solid var(--line-strong) !important;
border-bottom: 1px solid var(--line) !important;
background: transparent !important;
}
.presence-kicker {
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 7px;
color: var(--sage);
font: 800 9px/1 var(--mono);
letter-spacing: .18em;
text-transform: uppercase;
}
.presence-sep { color: var(--gold); }
.presence-sub {
margin: 0;
color: var(--muted);
font-size: 12px;
}
.presence-items {
margin: 12px 0 0;
padding: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
list-style: none;
}
.presence-items li {
display: flex;
align-items: center;
gap: 8px;
padding-right: 14px;
font-size: 11px;
color: var(--ink);
}
.presence-items li + li {
padding-left: 14px;
border-left: 1px solid var(--line);
}
.presence-items li span {
color: var(--sage);
font: 800 9px/1 var(--mono);
}
.hero-stats {
max-width: 690px;
margin: 18px 0 0 !important;
padding: 0 !important;
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 0 !important;
border-top: 0 !important;
}
.hero-stats li {
min-height: 62px !important;
padding: 8px 16px 4px 0 !important;
background: transparent !important;
border: 0 !important;
border-right: 1px solid var(--line) !important;
border-radius: 0 !important;
box-shadow: none !important;
backdrop-filter: none !important;
}
.hero-stats strong {
color: var(--sage) !important;
font: 600 clamp(18px, 2vw, 25px)/1 var(--display) !important;
}
.hero-stats span {
color: var(--muted) !important;
font: 600 9px/1.35 var(--sans) !important;
}
.hero-scroll-cue {
left: clamp(18px, 4vw, 70px) !important;
right: auto !important;
bottom: 10px !important;
transform: none !important;
padding: 7px 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
backdrop-filter: none !important;
color: var(--muted) !important;
font: 800 8px var(--mono) !important;
letter-spacing: .16em;
text-transform: uppercase;
}
.hero-scroll-cue::before {
background: var(--sage) !important;
}
.hero-atmosphere {
opacity: 1 !important;
}
.hero-grain {
opacity: .12 !important;
mix-blend-mode: multiply;
}
[data-theme="dark"] .hero-grain {
opacity: .15 !important;
mix-blend-mode: soft-light;
}
.hero-orb-1 {
width: min(38vw, 460px) !important;
height: min(38vw, 460px) !important;
top: 2% !important;
right: 4% !important;
opacity: .28 !important;
filter: blur(84px) !important;
background: radial-gradient(circle,color-mix(in srgb,var(--sage) 30%,transparent),transparent 72%) !important;
}
.hero-orb-2 {
width: min(24vw, 300px) !important;
height: min(24vw, 300px) !important;
left: 20% !important;
bottom: 4% !important;
opacity: .17 !important;
filter: blur(72px) !important;
background: radial-gradient(circle,color-mix(in srgb,var(--earth) 18%,transparent),transparent 72%) !important;
}
.hero-orb-3 {
width: min(20vw, 240px) !important;
height: min(20vw, 240px) !important;
left: 62% !important;
top: 44% !important;
opacity: .15 !important;
filter: blur(68px) !important;
background: radial-gradient(circle,color-mix(in srgb,var(--sage-bright) 22%,transparent),transparent 72%) !important;
}
.hero-halo {
width: min(42vw, 520px) !important;
height: min(42vw, 520px) !important;
left: 52% !important;
top: 22% !important;
filter: blur(86px) !important;
opacity: .28 !important;
background: radial-gradient(circle,color-mix(in srgb,var(--sage) 15%,transparent),transparent 70%) !important;
}
.hero-mandala {
z-index: 2 !important;
width: min(54vmin, 640px) !important;
height: min(54vmin, 640px) !important;
top: 50% !important;
right: clamp(-60px, -2vw, -12px) !important;
transform: translateY(-50%) !important;
color: var(--mandala-accent) !important;
opacity: .3 !important;
filter: none !important;
}
[data-theme="dark"] .hero-mandala { opacity: .38 !important; }
.mandala-conic-halo { display: none !important; }
.hero-mandala .mandala-petals {
opacity: .78 !important;
transform-origin: 250px 250px;
}
.hero-mandala .mandala-rings {
transform-origin: 250px 250px;
}
.hero-mandala .ring-core-stroke {
color: var(--mandala-accent);
}
@media (prefers-reduced-motion: no-preference) {
.hero[data-breath="cycle"] .mandala-petals {
  animation: quietSpin 120s linear infinite;
}
.hero[data-breath="cycle"] .mandala-rings {
  animation: quietBreathe 19s ease-in-out infinite;
}
@keyframes quietSpin {
  to { transform: rotate(360deg); }
}
@keyframes quietBreathe {
  0%,100% { transform: scale(.985); opacity: .82; }
  28%,58% { transform: scale(1.012); opacity: 1; }
}
}
@media (max-width: 900px) {
.hero {
  min-height: auto !important;
  padding-top: 18px !important;
}
.hero-stage {
  min-height: 760px;
  grid-template-columns: 1fr !important;
  align-items: end;
}
.hero-stage::before {
  left: auto;
  right: 12%;
  top: 6%;
  bottom: 30%;
}
.hero-inner {
  grid-column: 1;
  padding: 52px 0 120px !important;
  max-width: 680px !important;
}
.hero-mandala {
  width: min(74vw, 470px) !important;
  height: min(74vw, 470px) !important;
  top: 2% !important;
  right: -12% !important;
  transform: none !important;
  opacity: .23 !important;
}
.hero-presence-strip,
.hero-stats { max-width: 100%; }
.hero-scroll-cue { left: 0 !important; }
}
@media (max-width: 620px) {
.hero-stage {
  min-height: 720px;
}
.hero-inner {
  padding: 42px 0 104px !important;
}
.hero h1 {
  font-size: clamp(48px, 15vw, 78px) !important;
  max-width: 8.2ch !important;
}
.hero h1 .hero-line-c {
  margin-left: .35em;
  font-size: .67em;
}
.hero-lead {
  max-width: 35ch !important;
  font-size: 15px !important;
}
.presence-items {
  grid-template-columns: 1fr;
  gap: 9px;
}
.presence-items li + li {
  padding-left: 0;
  border-left: 0;
}
.hero-stats {
  grid-template-columns: 1fr 1fr !important;
  row-gap: 8px;
}
.hero-stats li {
  border-right: 1px solid var(--line) !important;
}
.hero-stats li:nth-child(2n) {
  border-right: 0 !important;
}
.hero-stats li + li {
  padding-left: 10px !important;
}
}
@media (prefers-reduced-motion: reduce) {
.hero-mandala,
.hero-orb,
.hero-halo {
  animation: none !important;
  transition: none !important;
}
}
.hero h1 {
max-width: 9.5ch !important;
font-size: clamp(58px, 8.6vw, 122px) !important;
line-height: .82 !important;
letter-spacing: -.072em !important;
text-wrap: pretty;
}
.hero h1 .hero-line-a {
transform: translateX(-.02em);
}
.hero h1 .hero-line-b {
margin-left: .22em;
}
.hero h1 .hero-line-c {
margin: .18em 0 0 1.08em !important;
font-size: .58em !important;
line-height: .92 !important;
letter-spacing: -.045em !important;
}
.hero h1 em {
text-decoration: none;
text-shadow: 0 0 1px color-mix(in srgb,var(--sage) 20%,transparent);
}
.hero-lead {
max-width: 49ch !important;
margin-top: 30px !important;
font-size: clamp(15px, 1.18vw, 18px) !important;
line-height: 1.68 !important;
}
.hero-inner {
max-width: 820px !important;
}
.mandala-parallax {
z-index: 1;
pointer-events: none;
}
.mandala-parallax::before {
content: "";
position: absolute;
width: min(50vmin, 560px);
aspect-ratio: 1;
left: 59%;
top: 50%;
transform: translate(-50%,-50%);
border-radius: 50%;
background:
  radial-gradient(circle,
    color-mix(in srgb,var(--mandala-core) 10%,transparent) 0 10%,
    transparent 32% 100%);
opacity: .75;
}
.hero-mandala {
width: min(58vmin, 680px) !important;
height: min(58vmin, 680px) !important;
right: clamp(-96px, -4vw, -22px) !important;
top: 50% !important;
transform: translateY(-50%) rotate(-7deg) !important;
opacity: .42 !important;
color: var(--mandala-soft) !important;
mix-blend-mode: multiply;
overflow: visible;
}
.hero-mandala .mandala-rings {
stroke: currentColor;
opacity: .82;
}
.hero-mandala .mandala-petals {
opacity: .96 !important;
}
.hero-mandala .mandala-orbit-outer {
stroke: var(--mandala-accent);
opacity: .5;
}
.hero-mandala .mandala-sparks {
color: var(--mandala-accent);
}
.hero-mandala .ring-core-stroke {
stroke-width: 1.5;
}
[data-theme="dark"] .hero-mandala {
opacity: .48 !important;
mix-blend-mode: screen;
}
[data-theme="dark"] .mandala-parallax::before {
opacity: .62;
}
@media (prefers-reduced-motion: no-preference) {
.hero[data-breath="cycle"] .hero-mandala {
  animation: mandalaDrift 19s ease-in-out infinite;
}
@keyframes mandalaDrift {
  0%,100% { transform: translateY(-50%) rotate(-7deg) scale(.985); }
  21%,58% { transform: translateY(-50%) rotate(-5deg) scale(1.008); }
}
}
[data-theme="light"] body {
background:
  radial-gradient(900px 520px at 78% 8%, rgba(92,130,105,.11), transparent 72%),
  radial-gradient(720px 520px at 8% 92%, rgba(173,122,92,.07), transparent 72%),
  linear-gradient(180deg,#eee9de 0%,#e7e0d2 50%,#eee9de 100%);
}
[data-theme="light"] .site-header {
background: rgba(238,233,222,.72);
box-shadow: 0 1px 0 rgba(31,48,39,.04);
}
[data-theme="light"] .btn.primary {
background: #214b38;
color: #f8f5ed;
box-shadow: 0 12px 28px rgba(33,75,56,.18);
}
[data-theme="light"] .btn.primary:hover {
background: #173d2c;
}
[data-theme="light"] .btn.ghost {
background: rgba(248,245,237,.36);
border-color: rgba(33,75,56,.22);
color: #214b38;
}
[data-theme="light"] .btn.ghost:hover {
background: rgba(79,118,95,.08);
border-color: rgba(33,75,56,.36);
}
[data-theme="dark"] body {
background:
  radial-gradient(900px 620px at 78% 4%, rgba(128,183,152,.13), transparent 70%),
  radial-gradient(720px 540px at 6% 90%, rgba(189,125,109,.06), transparent 72%),
  linear-gradient(180deg,#09130f 0%,#0c1812 52%,#09130f 100%);
}
[data-theme="dark"] .site-header {
background: rgba(9,19,15,.72);
box-shadow: 0 1px 0 rgba(237,241,233,.03);
}
[data-theme="dark"] .btn.primary {
background: #93c5a6;
color: #09130f;
box-shadow: 0 14px 34px rgba(93,163,122,.16);
}
[data-theme="dark"] .btn.primary:hover {
background: #b0d5bb;
}
[data-theme="dark"] .btn.ghost {
background: rgba(17,29,23,.34);
border-color: rgba(166,209,183,.22);
color: #dfe9e1;
}
[data-theme="dark"] .btn.ghost:hover {
background: rgba(128,183,152,.08);
border-color: rgba(166,209,183,.38);
}
.hero-stage {
grid-template-columns: 44px minmax(0, 1fr) !important;
gap: 18px !important;
min-height: min(780px, calc(100svh - var(--header) - 20px));
padding: 0 clamp(8px, 2vw, 26px);
}
.hero-inner {
grid-column: 2 !important;
padding-right: clamp(160px, 21vw, 290px) !important;
}
.hero-rail {
grid-column: 1;
align-self: stretch;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 18px;
color: var(--muted);
font: 800 8px/1 var(--mono);
letter-spacing: .16em;
text-transform: uppercase;
writing-mode: vertical-rl;
transform: rotate(180deg);
position: relative;
z-index: 5;
}
.hero-rail span:first-child {
color: var(--sage);
letter-spacing: .08em;
}
.hero-rail i {
width: 1px;
height: clamp(80px, 14vh, 150px);
background: linear-gradient(to bottom, transparent, var(--sage), transparent);
display: block;
}
.hero-stage::before {
left: 63% !important;
top: 10% !important;
bottom: 10% !important;
background: linear-gradient(to bottom, transparent, var(--line-strong) 24%, var(--line-strong) 76%, transparent) !important;
}
.hero-stage::after {
left: 62% !important;
right: -4% !important;
bottom: 17% !important;
background: linear-gradient(90deg, transparent, color-mix(in srgb,var(--sage) 22%,transparent) 32%, transparent 92%) !important;
}
.hero-manifesto {
display: grid;
grid-template-columns: 22px minmax(0,1fr);
gap: 14px;
align-items: start;
max-width: 520px;
margin-top: 30px;
}
.manifesto-rule {
width: 1px;
min-height: 42px;
background: linear-gradient(to bottom,var(--sage),transparent);
}
.manifesto-lead {
margin: 0;
color: var(--ink);
font: 500 clamp(15px,1.25vw,18px)/1.42 var(--display);
letter-spacing: -.015em;
}
.manifesto-tags {
margin: 8px 0 0;
color: var(--muted);
font: 800 8px/1.3 var(--mono);
letter-spacing: .18em;
}
[data-theme="dark"] .manifesto-lead {
color: #edf1e9;
}
.hero-inner {
transform: translate3d(var(--copy-x,0px),var(--copy-y,0px),0);
transition: transform .7s cubic-bezier(.22,1,.36,1);
will-change: transform;
}
.hero h1 .hero-line {
transition: transform .8s cubic-bezier(.22,1,.36,1), color .4s ease;
}
.hero h1 .hero-line-b { transform: translateX(.22em); }
.hero h1 .hero-line-c { transform: translateX(.02em); }
.hero:hover h1 .hero-line-b { transform: translateX(.28em); }
.hero:hover h1 .hero-line-c { transform: translateX(.06em); }
.hero-actions .btn {
transition: transform .35s cubic-bezier(.22,1,.36,1), background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.hero-actions .btn:hover {
transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
.hero-inner,
.hero h1 .hero-line,
.hero-actions .btn { transition: none !important; transform: none !important; }
}
.zintro {
position: fixed;
inset: 0;
z-index: 300;
display: grid;
place-items: center;
overflow: hidden;
background: var(--bg);
color: var(--sage);
opacity: 0;
visibility: hidden;
pointer-events: none;
}
html.intro-on .zintro {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
html.intro-done .zintro {
animation: arrivalExit .72s cubic-bezier(.77,0,.18,1) forwards;
}
.zintro::before {
content: "";
position: absolute;
width: 72vmin;
aspect-ratio: 1;
border: 1px solid var(--line);
border-radius: 50%;
opacity: .55;
}
.zintro-core {
width: 180px;
height: 180px;
display: grid;
place-items: center;
position: relative;
}
.zintro-mandala {
width: 180px;
height: 180px;
color: var(--sage);
opacity: .65;
animation: introBreath 2.1s ease-in-out infinite;
}
.zintro-gb {
position: absolute;
font: 800 11px/1 var(--mono);
letter-spacing: .2em;
color: var(--ink);
}
.zintro-breath {
position: absolute;
left: 7vw;
bottom: 7vh;
margin: 0;
color: var(--muted);
font: 800 9px/1 var(--mono);
letter-spacing: .22em;
text-transform: uppercase;
}
.zintro-words {
position: absolute;
right: 7vw;
bottom: 7vh;
display: grid;
gap: 4px;
text-align: right;
}
.zintro-words .zw {
color: var(--ink);
font: 500 clamp(16px,2vw,24px)/1.02 var(--display);
letter-spacing: -.025em;
}
.zintro-words .zw em { color: var(--sage); }
.zintro-bar {
position: absolute;
left: 7vw;
right: 7vw;
bottom: 5vh;
height: 1px;
background: var(--line);
}
.zintro-bar i {
background: var(--sage) !important;
}
@keyframes introBreath {
0%,100% { transform: scale(.94); opacity: .48; }
42%,58% { transform: scale(1.04); opacity: .9; }
}
@keyframes arrivalExit {
to { opacity: 0; visibility: hidden; transform: translateY(-2vh); }
}
@media (max-width: 640px) {
.zintro-breath { left: 18px; }
.zintro-words { right: 18px; }
.zintro-bar { left: 18px; right: 18px; }
}
@media (prefers-reduced-motion: reduce) {
html.intro-on .zintro { display: none !important; }
.zintro-mandala { animation: none !important; }
}
@media (max-width: 900px) {
.hero {
  padding-inline: 18px !important;
}
.hero-stage {
  grid-template-columns: 1fr !important;
  min-height: 790px;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 0 !important;
}
.hero-rail {
  display: none;
}
.hero-inner {
  grid-column: 1 !important;
  padding: 46px 0 122px !important;
  max-width: 100% !important;
  z-index: 6;
}
.hero-stage::before {
  left: auto !important;
  right: 9% !important;
  top: 12% !important;
  bottom: 24% !important;
}
.hero-stage::after {
  left: 8% !important;
  right: -20% !important;
  bottom: 19% !important;
}
.hero-mandala {
  width: min(82vw, 460px) !important;
  height: min(82vw, 460px) !important;
  right: -23% !important;
  top: 4% !important;
  transform: rotate(-7deg) !important;
  opacity: .27 !important;
}
[data-theme="dark"] .hero-mandala { opacity: .34 !important; }
.hero h1 {
  max-width: 7.7ch !important;
  font-size: clamp(54px, 15.4vw, 88px) !important;
}
.hero h1 .hero-line-b { margin-left: .12em; }
.hero h1 .hero-line-c {
  margin-left: .42em !important;
  font-size: .63em !important;
}
.hero-lead {
  max-width: 33ch !important;
  margin-top: 24px !important;
}
.hero-manifesto {
  max-width: 92%;
  margin-top: 26px;
}
.hero-stats {
  grid-template-columns: repeat(2,1fr) !important;
  max-width: 88%;
  margin-top: 16px !important;
}
.hero-stats li {
  padding-right: 12px !important;
}
.hero-stats li + li {
  padding-left: 12px !important;
}
}
@media (max-width: 560px) {
.hero-stage { min-height: 760px; }
.hero-inner { padding-top: 34px !important; }
.hero h1 { font-size: clamp(50px,16vw,76px) !important; }
.hero-lead { font-size: 15px !important; line-height: 1.58 !important; }
.hero-actions { align-items: flex-start; }
.hero-actions .btn {
  width: auto !important;
  min-width: 0;
}
.hero-actions .btn.primary { padding-inline: 20px; }
.hero-mandala {
  right: -34% !important;
  top: 2% !important;
  opacity: .22 !important;
}
[data-theme="dark"] .hero-mandala { opacity: .29 !important; }
.hero-manifesto {
  max-width: 100%;
  grid-template-columns: 16px 1fr;
}
.hero-stats { max-width: 100%; }
}
.hero,
.hero-stage,
.hero-atmosphere,
.hero-mandala {
-webkit-tap-highlight-color: transparent;
}
.hero-atmosphere {
contain: layout paint;
}
.hero-mandala {
transform-origin: 50% 50%;
will-change: transform, opacity;
}
.hero-rail {
user-select: none;
}
.hero a:focus-visible,
.hero button:focus-visible,
.site-header a:focus-visible,
.site-header button:focus-visible {
outline: 2px solid var(--sage);
outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
.hero-atmosphere {
  contain: none;
}
.hero-mandala {
  will-change: auto;
}
.hero h1 .hero-line-b,
.hero h1 .hero-line-c,
.hero-inner {
  transform: none !important;
}
}
@media (max-width: 900px) {
.hero-mandala {
  will-change: opacity;
}
}
/* ================================================================
 PRODUCTION VISUAL LOCK · 2026-10-06
 Critical visual rules live in the primary stylesheet so the live
 page cannot lose its art direction because of a secondary asset.
 ================================================================ */
.hero {
position: relative !important;
isolation: isolate !important;
width: min(1280px, calc(100vw - 64px)) !important;
max-width: 1280px !important;
min-height: max(720px, calc(100svh - var(--header))) !important;
margin: 0 auto !important;
padding: 34px 28px 54px !important;
}
.hero-atmosphere {
position: absolute !important;
inset: 0 !important;
overflow: hidden !important;
pointer-events: none !important;
}
.hero-stage {
position: relative !important;
z-index: 3 !important;
display: grid !important;
grid-template-columns: 44px minmax(0, 1fr) minmax(420px, .92fr) !important;
gap: clamp(20px, 3vw, 48px) !important;
align-items: center !important;
width: 100% !important;
max-width: 1220px !important;
min-height: max(650px, calc(100svh - var(--header) - 80px)) !important;
margin: 0 auto !important;
padding: 12px 0 52px !important;
overflow: visible !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
.hero-stage::before {
content: "" !important;
position: absolute !important;
left: 62.8% !important;
top: 8% !important;
bottom: 8% !important;
width: 1px !important;
z-index: 1 !important;
background: linear-gradient(to bottom, transparent, var(--line-strong), transparent) !important;
opacity: .6 !important;
pointer-events: none !important;
}
.hero-stage::after {
content: "" !important;
position: absolute !important;
left: 66% !important;
right: -3% !important;
bottom: 16% !important;
height: 1px !important;
z-index: 1 !important;
background: linear-gradient(90deg, transparent, color-mix(in srgb,var(--sage) 26%,transparent), transparent) !important;
opacity: .75 !important;
pointer-events: none !important;
}
.hero-rail {
grid-column: 1 !important;
align-self: center !important;
position: relative !important;
z-index: 6 !important;
}
.hero-inner {
grid-column: 2 !important;
align-self: center !important;
max-width: 720px !important;
padding: 36px 0 54px !important;
position: relative !important;
z-index: 7 !important;
opacity: 1 !important;
visibility: visible !important;
}
.hero-inner > * {
opacity: 1 !important;
visibility: visible !important;
}
.hero h1 {
max-width: 8.6ch !important;
margin: 0 !important;
font-size: clamp(64px, 7.1vw, 112px) !important;
line-height: .85 !important;
letter-spacing: -.072em !important;
text-wrap: balance !important;
}
.hero h1 .hero-line {
display: block !important;
}
.hero h1 .hero-line-a,
.hero h1 .hero-line-b {
color: var(--ink) !important;
}
.hero h1 .hero-line-b {
margin-left: .16em !important;
}
.hero h1 .hero-line-c {
margin: .13em 0 0 .68em !important;
font-size: .59em !important;
}
.hero h1 em {
color: var(--sage) !important;
font-style: italic !important;
}
.hero-lead {
max-width: 47ch !important;
margin: 28px 0 0 !important;
font-size: clamp(15px, 1.16vw, 18px) !important;
line-height: 1.62 !important;
}
.hero-actions {
margin: 28px 0 0 !important;
display: flex !important;
flex-wrap: wrap !important;
gap: 10px !important;
}
.hero-manifesto {
max-width: 560px !important;
margin: 34px 0 0 !important;
}
.hero-stats {
max-width: 720px !important;
margin: 20px 0 0 !important;
padding: 0 !important;
grid-template-columns: repeat(4, minmax(0,1fr)) !important;
gap: 0 !important;
border-top: 0 !important;
}
.hero-stats li {
min-height: 62px !important;
padding: 8px 16px 4px 0 !important;
background: transparent !important;
border: 0 !important;
border-right: 1px solid var(--line) !important;
border-radius: 0 !important;
box-shadow: none !important;
transform: none !important;
backdrop-filter: none !important;
}
.hero-stats li + li {
padding-left: 16px !important;
}
.hero-stats li:last-child {
border-right: 0 !important;
}
.mandala-parallax {
position: absolute !important;
inset: 0 !important;
z-index: 2 !important;
transform: translate3d(calc(var(--px,0px) * .55), calc(var(--py,0px) * .55), 0) !important;
}
.mandala-parallax::before {
content: "" !important;
position: absolute !important;
left: 79% !important;
top: 49% !important;
width: min(42vw, 610px) !important;
aspect-ratio: 1 !important;
transform: translate(-50%,-50%) !important;
border-radius: 50% !important;
background:
  radial-gradient(circle,
    color-mix(in srgb,var(--sage) 11%,transparent) 0 18%,
    color-mix(in srgb,var(--gold) 5%,transparent) 33%,
    transparent 72%) !important;
opacity: 1 !important;
}
.hero-mandala {
position: absolute !important;
left: 79% !important;
right: auto !important;
top: 49% !important;
width: min(43vw, 620px) !important;
height: min(43vw, 620px) !important;
transform: translate(-50%,-50%) rotate(-4deg) !important;
transform-origin: 50% 50% !important;
opacity: .68 !important;
color: var(--mandala-soft) !important;
mix-blend-mode: normal !important;
overflow: visible !important;
filter:
  drop-shadow(0 20px 60px color-mix(in srgb,var(--sage) 9%,transparent)) !important;
}
[data-theme="dark"] .hero-mandala {
opacity: .8 !important;
filter:
  drop-shadow(0 20px 70px color-mix(in srgb,var(--sage) 12%,transparent)) !important;
}
.hero-mandala .mandala-rings {
stroke: currentColor !important;
opacity: .88 !important;
}
.hero-mandala .mandala-petals {
stroke-width: 1.6 !important;
opacity: 1 !important;
}
.hero-mandala .mandala-petals-sub {
stroke-width: .95 !important;
opacity: .58 !important;
}
.hero-mandala .mandala-orbit-outer {
stroke: var(--mandala-accent) !important;
opacity: .64 !important;
}
.hero-mandala .mandala-sparks {
color: var(--mandala-accent) !important;
opacity: .84 !important;
}
@media (prefers-reduced-motion: no-preference) {
.hero[data-breath="cycle"] .hero-mandala {
  animation: productionMandala 58s linear infinite !important;
}
.hero[data-breath="cycle"] .mandala-rings {
  animation: productionBreath 19s ease-in-out infinite !important;
  transform-origin: 250px 250px !important;
}
.hero[data-breath="cycle"] .mandala-orbit-outer {
  animation: productionOrbit 31s linear infinite reverse !important;
  transform-origin: 250px 250px !important;
}
@keyframes productionMandala {
  0% { transform: translate(-50%,-50%) rotate(-4deg) scale(.985); }
  50% { transform: translate(-50%,-50%) rotate(176deg) scale(1.025); }
  100% { transform: translate(-50%,-50%) rotate(356deg) scale(.985); }
}
@keyframes productionBreath {
  0%,100% { transform: scale(.986); opacity: .74; }
  26%,58% { transform: scale(1.018); opacity: 1; }
}
@keyframes productionOrbit {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
}
.ritual.section {
position: relative !important;
isolation: isolate !important;
display: grid !important;
grid-template-columns: minmax(330px,.72fr) minmax(0,1.28fr) !important;
gap: clamp(28px,5vw,78px) !important;
align-items: stretch !important;
width: min(1180px, calc(100vw - 64px)) !important;
max-width: 1180px !important;
margin: 0 auto !important;
padding: clamp(104px,12vh,150px) 28px clamp(110px,14vh,168px) !important;
}
.ritual.section::before {
content: "02" !important;
position: absolute !important;
top: 56px !important;
left: 28px !important;
color: var(--sage) !important;
font: 800 9px/1 var(--mono) !important;
letter-spacing: .24em !important;
opacity: .8 !important;
}
.ritual-intro {
position: relative !important;
z-index: 2 !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
min-width: 0 !important;
}
.ritual-intro h2 {
max-width: 8.4ch !important;
margin: 0 !important;
font-size: clamp(48px,5.7vw,80px) !important;
line-height: .88 !important;
letter-spacing: -.065em !important;
}
.ritual-intro > .about-lead {
max-width: 38ch !important;
margin: 24px 0 0 !important;
font-size: clamp(16px,1.25vw,19px) !important;
line-height: 1.62 !important;
}
.ritual-orb-wrap {
min-height: 230px !important;
margin-top: 42px !important;
display: flex !important;
align-items: flex-end !important;
gap: 24px !important;
padding: 12px 0 0 !important;
}
.ritual-orb {
width: clamp(160px,14vw,214px) !important;
height: clamp(160px,14vw,214px) !important;
flex: 0 0 auto !important;
}
.ritual-status {
max-width: 250px !important;
padding-bottom: 8px !important;
}
.ritual-status strong {
font-size: clamp(28px,2.8vw,40px) !important;
}
.ritual-panel {
position: relative !important;
z-index: 2 !important;
min-width: 0 !important;
padding: clamp(26px,3vw,40px) !important;
border: 1px solid color-mix(in srgb,var(--sage) 24%,var(--line)) !important;
border-radius: 30px !important;
background:
  radial-gradient(420px 300px at 84% 8%, color-mix(in srgb,var(--sage) 8%,transparent), transparent 66%),
  linear-gradient(145deg,
    color-mix(in srgb,var(--surface) 97%,transparent),
    color-mix(in srgb,var(--surface2) 95%,transparent)) !important;
box-shadow:
  0 30px 90px color-mix(in srgb,var(--ink) 9%,transparent),
  inset 0 1px 0 color-mix(in srgb,var(--ink) 7%,transparent) !important;
}
.ritual-panel-head {
position: relative !important;
z-index: 3 !important;
grid-template-columns: 52px minmax(0,1fr) !important;
padding-bottom: 24px !important;
}
.ritual-panel-head p {
max-width: 42ch !important;
margin: 0 !important;
font-size: 15px !important;
line-height: 1.55 !important;
}
.ritual-choices {
position: relative !important;
z-index: 3 !important;
display: grid !important;
grid-template-columns: repeat(2,minmax(0,1fr)) !important;
gap: 12px !important;
margin-top: 22px !important;
}
.ritual-choice {
min-height: 154px !important;
padding: 20px !important;
border: 1px solid var(--line) !important;
border-radius: 18px !important;
background: color-mix(in srgb,var(--bg) 30%,transparent) !important;
transition:
  transform .3s var(--ease),
  border-color .3s var(--ease),
  background .3s var(--ease),
  box-shadow .3s var(--ease) !important;
}
.ritual-choice:hover,
.ritual-choice.is-active {
transform: translateY(-4px) !important;
border-color: color-mix(in srgb,var(--sage) 52%,var(--line)) !important;
background: color-mix(in srgb,var(--sage) 8%,transparent) !important;
box-shadow: 0 18px 42px color-mix(in srgb,var(--ink) 8%,transparent) !important;
}
.choice-copy b {
font-size: clamp(20px,1.8vw,28px) !important;
}
.ritual-foot {
position: relative !important;
z-index: 3 !important;
}
.campo.section {
position: relative !important;
isolation: isolate !important;
width: min(1180px, calc(100vw - 64px)) !important;
max-width: 1180px !important;
margin: 0 auto !important;
padding: clamp(100px,13vh,154px) 28px clamp(112px,15vh,180px) !important;
}
.campo .section-head {
max-width: 780px !important;
margin: 0 0 clamp(34px,5vh,54px) !important;
}
.campo .section-head h2 {
max-width: 10ch !important;
margin: 12px 0 0 !important;
font-size: clamp(54px,6.1vw,88px) !important;
line-height: .87 !important;
letter-spacing: -.068em !important;
}
.campo .section-head .about-lead {
max-width: 55ch !important;
margin-top: 24px !important;
font-size: clamp(15px,1.18vw,18px) !important;
line-height: 1.62 !important;
}
.campo-stage {
position: relative !important;
z-index: 2 !important;
width: 100% !important;
max-width: 1180px !important;
margin: 0 auto !important;
display: grid !important;
grid-template-columns: minmax(310px,.62fr) minmax(0,1.38fr) !important;
gap: clamp(18px,2.5vw,34px) !important;
align-items: stretch !important;
}
.focus-player {
position: relative !important;
min-width: 0 !important;
min-height: 620px !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-end !important;
padding: 32px !important;
overflow: hidden !important;
border: 1px solid color-mix(in srgb,var(--sage) 30%,var(--line)) !important;
border-radius: 30px !important;
background:
  radial-gradient(360px 280px at 16% 12%, color-mix(in srgb,var(--sage) 12%,transparent), transparent 68%),
  linear-gradient(155deg,
    color-mix(in srgb,var(--surface) 97%,transparent),
    color-mix(in srgb,var(--surface2) 94%,transparent)) !important;
box-shadow:
  0 30px 84px color-mix(in srgb,var(--ink) 11%,transparent),
  inset 0 1px 0 color-mix(in srgb,var(--ink) 8%,transparent) !important;
}
.focus-player::before {
content: "01  ·  SILENCE BETWEEN NOTES" !important;
position: absolute !important;
top: 26px !important;
left: 30px !important;
color: var(--sage) !important;
font: 800 8px/1 var(--mono) !important;
letter-spacing: .18em !important;
}
.focus-player::after {
content: "" !important;
position: absolute !important;
top: 11% !important;
right: -34% !important;
width: 120% !important;
aspect-ratio: 1 !important;
border-radius: 50% !important;
border: 1px solid color-mix(in srgb,var(--sage) 14%,transparent) !important;
box-shadow:
  0 0 0 32px color-mix(in srgb,var(--sage) 2.5%,transparent),
  0 0 0 64px color-mix(in srgb,var(--gold) 2.5%,transparent) !important;
pointer-events: none !important;
}
.focus-player .player-play {
position: relative !important;
z-index: 3 !important;
width: 82px !important;
height: 82px !important;
min-width: 82px !important;
margin: 0 0 32px !important;
border-radius: 50% !important;
background: var(--sage) !important;
color: var(--accent-ink) !important;
border: 1px solid color-mix(in srgb,var(--sage) 34%,var(--line)) !important;
box-shadow: 0 16px 38px var(--sage-glow) !important;
}
.focus-player .player-meta {
position: relative !important;
z-index: 3 !important;
display: grid !important;
gap: 8px !important;
margin-bottom: 22px !important;
}
.focus-player .player-meta strong {
display: block !important;
max-width: 10ch !important;
color: var(--ink) !important;
font: 600 clamp(30px,3.2vw,48px)/.96 var(--display) !important;
letter-spacing: -.04em !important;
}
.focus-player .player-meta small {
max-width: 34ch !important;
color: var(--muted) !important;
font: 500 13px/1.58 var(--sans) !important;
}
.focus-player .player-timeline {
position: relative !important;
z-index: 3 !important;
display: grid !important;
grid-template-columns: auto minmax(0,1fr) auto !important;
gap: 10px !important;
align-items: center !important;
margin-bottom: 12px !important;
}
.focus-player .player-timeline input,
.focus-player .player-vol input {
width: 100% !important;
min-width: 0 !important;
}
.focus-player .player-vol {
position: relative !important;
z-index: 3 !important;
display: grid !important;
grid-template-columns: auto minmax(0,1fr) !important;
gap: 12px !important;
align-items: center !important;
margin-bottom: 16px !important;
}
.focus-player .player-mute {
min-height: 34px !important;
padding-inline: 12px !important;
border: 1px solid var(--line) !important;
border-radius: 999px !important;
background: color-mix(in srgb,var(--surface) 58%,transparent) !important;
color: var(--muted) !important;
font: 800 9px var(--mono) !important;
letter-spacing: .08em !important;
}
.focus-player .player-link {
position: relative !important;
z-index: 3 !important;
display: flex !important;
min-height: 40px !important;
align-items: center !important;
justify-content: space-between !important;
padding: 0 14px !important;
border-top: 1px solid var(--line) !important;
color: var(--muted) !important;
font: 800 9px var(--mono) !important;
letter-spacing: .1em !important;
text-transform: uppercase !important;
text-decoration: none !important;
}
.focus-player .player-link.player-vortex {
margin-top: 8px !important;
border: 1px solid color-mix(in srgb,var(--sage) 24%,var(--line)) !important;
border-radius: 999px !important;
background: color-mix(in srgb,var(--sage) 6%,transparent) !important;
}
.campo-vortex-full {
position: relative !important;
min-width: 0 !important;
min-height: 620px !important;
padding: 10px !important;
overflow: hidden !important;
border: 1px solid color-mix(in srgb,var(--sage) 32%,var(--line)) !important;
border-radius: 32px !important;
background:
  radial-gradient(600px 460px at 72% 48%, color-mix(in srgb,var(--sage) 7%,transparent), transparent 70%),
  linear-gradient(145deg,
    color-mix(in srgb,var(--surface) 86%,transparent),
    color-mix(in srgb,var(--surface2) 90%,transparent)) !important;
box-shadow:
  0 34px 110px color-mix(in srgb,var(--ink) 14%,transparent),
  inset 0 1px 0 color-mix(in srgb,var(--ink) 9%,transparent) !important;
}
.campo-vortex-full::before {
content: "VÓRTICE  ·  CAMPO VIVO" !important;
position: absolute !important;
top: 20px !important;
left: 20px !important;
z-index: 5 !important;
padding: 9px 12px !important;
border: 1px solid color-mix(in srgb,var(--sage) 28%,var(--line)) !important;
border-radius: 999px !important;
background: color-mix(in srgb,var(--surface) 82%,transparent) !important;
backdrop-filter: blur(16px) !important;
color: var(--sage) !important;
font: 800 8px/1 var(--mono) !important;
letter-spacing: .16em !important;
pointer-events: none !important;
}
.campo-vortex-full::after {
content: "ABRIR ↗" !important;
position: absolute !important;
top: 20px !important;
right: 20px !important;
z-index: 5 !important;
padding: 9px 12px !important;
border: 1px solid var(--line) !important;
border-radius: 999px !important;
background: color-mix(in srgb,var(--surface) 76%,transparent) !important;
backdrop-filter: blur(16px) !important;
color: var(--muted) !important;
font: 800 8px/1 var(--mono) !important;
letter-spacing: .12em !important;
pointer-events: none !important;
}
.campo-vortex-full iframe {
position: relative !important;
z-index: 2 !important;
display: block !important;
width: 100% !important;
height: 600px !important;
min-height: 600px !important;
border: 0 !important;
border-radius: 24px !important;
background: #06100b !important;
box-shadow:
  inset 0 0 0 1px color-mix(in srgb,var(--sage) 18%,transparent) !important;
}
@media (max-width: 1100px) {
.hero-stage {
  grid-template-columns: 34px minmax(0,1fr) minmax(340px,.82fr) !important;
  gap: 26px !important;
}
.hero-mandala,
.mandala-parallax::before {
  left: 76% !important;
}
.ritual.section {
  grid-template-columns: 1fr !important;
}
.campo-stage {
  grid-template-columns: minmax(280px,.72fr) minmax(0,1.28fr) !important;
}
}
@media (max-width: 900px) {
.hero {
  width: 100% !important;
  min-height: auto !important;
  padding: 18px 18px 48px !important;
}
.hero-stage {
  grid-template-columns: 1fr !important;
  min-height: 760px !important;
  padding: 30px 0 118px !important;
  gap: 0 !important;
}
.hero-rail {
  display: none !important;
}
.hero-inner {
  grid-column: 1 !important;
  padding: 40px 0 120px !important;
  max-width: 100% !important;
}
.hero-mandala {
  left: 78% !important;
  top: 18% !important;
  width: min(88vw,500px) !important;
  height: min(88vw,500px) !important;
  opacity: .25 !important;
}
.mandala-parallax::before {
  left: 78% !important;
  top: 18% !important;
  width: min(86vw,490px) !important;
}
.hero h1 {
  max-width: 8ch !important;
  font-size: clamp(54px,14vw,92px) !important;
}
.hero-stats {
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
}
.ritual.section,
.campo.section {
  width: 100% !important;
  max-width: none !important;
  padding-inline: 18px !important;
}
.ritual.section {
  grid-template-columns: 1fr !important;
  padding-top: 94px !important;
}
.ritual.section::before {
  left: 18px !important;
}
.ritual-choices {
  grid-template-columns: 1fr !important;
}
.ritual-choice {
  min-height: 120px !important;
}
.ritual-orb-wrap {
  min-height: 0 !important;
  align-items: flex-start !important;
}
.campo-stage {
  grid-template-columns: 1fr !important;
}
.focus-player {
  min-height: 460px !important;
}
.campo-vortex-full {
  min-height: 0 !important;
}
.campo-vortex-full iframe {
  height: min(72vh,620px) !important;
  min-height: min(72vh,620px) !important;
}
}
@media (max-width: 560px) {
.hero {
  padding-inline: 16px !important;
}
.hero-stage {
  min-height: 720px !important;
}
.hero h1 {
  font-size: clamp(50px,15.5vw,78px) !important;
}
.hero-mandala {
  left: 84% !important;
  top: 14% !important;
  width: min(96vw,410px) !important;
  height: min(96vw,410px) !important;
  opacity: .2 !important;
}
.mandala-parallax::before {
  left: 84% !important;
  top: 14% !important;
  width: min(92vw,395px) !important;
}
.ritual.section {
  padding-top: 78px !important;
  padding-bottom: 88px !important;
}
.ritual-intro h2 {
  font-size: clamp(42px,13vw,64px) !important;
}
.ritual-orb-wrap {
  flex-direction: column !important;
}
.ritual-panel {
  padding: 20px !important;
  border-radius: 24px !important;
}
.campo.section {
  padding-top: 82px !important;
  padding-bottom: 92px !important;
}
.focus-player {
  min-height: 430px !important;
  padding: 22px !important;
  border-radius: 24px !important;
}
.focus-player .player-meta strong {
  font-size: 32px !important;
}
.campo-vortex-full {
  padding: 7px !important;
  border-radius: 24px !important;
}
.campo-vortex-full iframe {
  min-height: 500px !important;
  height: 500px !important;
  border-radius: 18px !important;
}
}
@media (prefers-reduced-motion: reduce) {
.hero-mandala,
.mandala-rings,
.mandala-orbit-outer,
.ritual-orb,
.ritual-orb-ring {
  animation: none !important;
}
}
.hero {
width: min(1320px, calc(100vw - 48px)) !important;
max-width: 1320px !important;
padding-inline: 18px !important;
}
.hero-stage {
grid-template-columns: 42px minmax(0, 1fr) minmax(440px, .84fr) !important;
gap: clamp(24px, 2.6vw, 46px) !important;
min-height: max(680px, calc(100svh - var(--header) - 70px)) !important;
padding-top: 4px !important;
}
.hero-inner {
max-width: 650px !important;
padding: 26px 0 54px !important;
}
.hero h1 {
max-width: 7.7ch !important;
font-size: clamp(62px, 7vw, 108px) !important;
line-height: .86 !important;
letter-spacing: -.074em !important;
}
.hero h1 .hero-line-b {
margin-left: .12em !important;
}
.hero h1 .hero-line-c {
margin-top: .16em !important;
margin-left: .58em !important;
font-size: .54em !important;
}
.hero-lead {
max-width: 44ch !important;
margin-top: 30px !important;
}
.hero-actions {
align-items: center !important;
margin-top: 26px !important;
flex-wrap: nowrap !important;
}
.hero-actions .btn {
flex: 0 0 auto !important;
white-space: nowrap !important;
}
.hero-manifesto {
display: grid !important;
grid-template-columns: 1px minmax(0,1fr) !important;
gap: 14px !important;
max-width: 540px !important;
margin-top: 32px !important;
}
.hero-stats {
max-width: 650px !important;
margin-top: 18px !important;
}
.mandala-parallax::before {
left: 78% !important;
top: 50% !important;
width: min(39vw, 550px) !important;
transform: translate(-50%,-50%) !important;
}
.hero-mandala {
left: 78% !important;
top: 50% !important;
width: min(40vw, 560px) !important;
height: min(40vw, 560px) !important;
transform: translate(-50%,-50%) rotate(-4deg) !important;
opacity: .64 !important;
}
[data-theme="dark"] .hero-mandala {
opacity: .77 !important;
}
.hero-stage::before {
left: 62.5% !important;
top: 10% !important;
bottom: 10% !important;
opacity: .4 !important;
}
.hero-stage::after {
left: 66% !important;
right: 3% !important;
bottom: 15% !important;
opacity: .52 !important;
}
.mandala-parallax::after {
content: "BREATH  /  4·7·8" !important;
position: absolute !important;
left: 78% !important;
top: calc(50% + min(21vw, 292px)) !important;
transform: translateX(-50%) !important;
color: color-mix(in srgb,var(--muted) 68%,transparent) !important;
font: 800 8px/1 var(--mono) !important;
letter-spacing: .24em !important;
white-space: nowrap !important;
pointer-events: none !important;
}
.ritual.section {
width: min(1320px, calc(100vw - 48px)) !important;
max-width: 1320px !important;
grid-template-columns: minmax(360px,.72fr) minmax(0,1.28fr) !important;
gap: clamp(34px, 5.2vw, 88px) !important;
padding: clamp(104px,13vh,156px) 18px clamp(112px,14vh,174px) !important;
}
.ritual-intro {
padding-top: 6px !important;
}
.ritual-intro .kicker {
margin-bottom: 24px !important;
}
.ritual-intro h2 {
max-width: 7.8ch !important;
font-size: clamp(52px,5.6vw,82px) !important;
}
.ritual-intro > .about-lead {
max-width: 39ch !important;
margin-top: 26px !important;
}
.ritual-orb-wrap {
min-height: 260px !important;
margin-top: 48px !important;
align-items: flex-end !important;
}
.ritual-orb {
width: clamp(176px,14.5vw,224px) !important;
height: clamp(176px,14.5vw,224px) !important;
}
.ritual-status {
max-width: 220px !important;
}
.ritual-panel {
min-height: 560px !important;
padding: clamp(30px,3.2vw,42px) !important;
border-radius: 34px !important;
background:
  radial-gradient(520px 360px at 88% 4%, color-mix(in srgb,var(--sage) 10%,transparent), transparent 67%),
  linear-gradient(150deg,
    color-mix(in srgb,var(--surface) 98%,transparent),
    color-mix(in srgb,var(--surface2) 94%,transparent)) !important;
}
.ritual-panel-head {
padding-bottom: 28px !important;
}
.ritual-choices {
grid-template-columns: repeat(2,minmax(0,1fr)) !important;
gap: 14px !important;
margin-top: 26px !important;
}
.ritual-choice {
min-height: 164px !important;
padding: 22px !important;
border-radius: 20px !important;
}
.choice-copy b {
font-size: clamp(21px,1.75vw,29px) !important;
}
.choice-copy small {
max-width: 20ch !important;
font-size: 12px !important;
}
.ritual-foot {
margin-top: 26px !important;
padding-top: 20px !important;
}
.campo.section {
width: min(1320px, calc(100vw - 48px)) !important;
max-width: 1320px !important;
padding: clamp(104px,14vh,168px) 18px clamp(120px,16vh,192px) !important;
}
.campo .section-head {
max-width: 820px !important;
}
.campo .section-head h2 {
max-width: 8.5ch !important;
font-size: clamp(56px,6vw,88px) !important;
}
.campo-stage {
grid-template-columns: minmax(320px,.54fr) minmax(0,1.46fr) !important;
gap: clamp(20px,2.6vw,36px) !important;
}
.focus-player {
min-height: 640px !important;
padding: 34px !important;
border-radius: 32px !important;
}
.focus-player .player-play {
width: 86px !important;
height: 86px !important;
min-width: 86px !important;
}
.focus-player .player-meta strong {
max-width: 9ch !important;
font-size: clamp(34px,3vw,49px) !important;
}
.campo-vortex-full {
min-height: 640px !important;
padding: 11px !important;
border-radius: 34px !important;
}
.campo-vortex-full iframe {
width: 100% !important;
height: 618px !important;
min-height: 618px !important;
border-radius: 26px !important;
}
.campo-vortex-full::before,
.campo-vortex-full::after {
top: 24px !important;
}
.campo-vortex-full::before { left: 24px !important; }
.campo-vortex-full::after { right: 24px !important; }
.campo-stage::before {
content: "02";
position: absolute;
top: -34px;
right: 0;
color: color-mix(in srgb,var(--sage) 46%,transparent);
font: 800 8px/1 var(--mono);
letter-spacing: .24em;
pointer-events: none;
}
@media (max-width: 1180px) and (min-width: 901px) {
.hero {
  width: calc(100vw - 32px) !important;
}
.hero-stage {
  grid-template-columns: 34px minmax(0,1fr) minmax(370px,.78fr) !important;
  gap: 22px !important;
}
.hero-mandala,
.mandala-parallax::before {
  left: 76% !important;
}
.mandala-parallax::after {
  left: 76% !important;
}
.hero h1 {
  font-size: clamp(58px,7vw,94px) !important;
}
.hero-actions {
  flex-wrap: wrap !important;
}
.ritual.section,
.campo.section {
  width: calc(100vw - 32px) !important;
}
.campo-stage {
  grid-template-columns: minmax(300px,.62fr) minmax(0,1.38fr) !important;
}
}
@media (max-width: 900px) {
.hero,
.ritual.section,
.campo.section {
  width: 100% !important;
  max-width: none !important;
}
.hero-stage {
  min-height: 790px !important;
  padding-bottom: 122px !important;
}
.hero-inner {
  padding-top: 34px !important;
}
.hero-actions {
  flex-wrap: wrap !important;
}
.hero-mandala {
  left: 78% !important;
  top: 17% !important;
  width: min(84vw,470px) !important;
  height: min(84vw,470px) !important;
  opacity: .22 !important;
}
.mandala-parallax::before {
  left: 78% !important;
  top: 17% !important;
  width: min(82vw,460px) !important;
}
.mandala-parallax::after {
  display: none !important;
}
.ritual.section {
  grid-template-columns: 1fr !important;
  gap: 44px !important;
  padding: 92px 18px 108px !important;
}
.ritual-panel {
  min-height: auto !important;
}
.campo.section {
  padding: 94px 18px 112px !important;
}
.campo-stage {
  grid-template-columns: 1fr !important;
}
.focus-player {
  min-height: 470px !important;
}
.campo-vortex-full {
  min-height: auto !important;
}
.campo-vortex-full iframe {
  height: min(72vh,620px) !important;
  min-height: min(72vh,620px) !important;
}
}
@media (max-width: 560px) {
.hero-stage {
  min-height: 730px !important;
}
.hero h1 {
  font-size: clamp(50px,15vw,78px) !important;
}
.hero-actions {
  gap: 8px !important;
}
.hero-actions .btn {
  min-height: 44px !important;
  padding-inline: 15px !important;
  font-size: 10px !important;
}
.ritual-orb-wrap {
  gap: 18px !important;
}
.ritual-orb {
  width: 154px !important;
  height: 154px !important;
}
.ritual-choices {
  grid-template-columns: 1fr !important;
}
.ritual-choice {
  min-height: 118px !important;
}
.campo-vortex-full iframe {
  height: 500px !important;
  min-height: 500px !important;
}
}
.hero-stage {
grid-template-columns: 42px minmax(0, 1fr) minmax(420px, .86fr) !important;
gap: clamp(26px, 3vw, 54px) !important;
min-height: max(690px, calc(100svh - var(--header) - 60px)) !important;
padding-bottom: 42px !important;
}
.hero-inner {
max-width: 650px !important;
padding-top: 10px !important;
padding-bottom: 36px !important;
}
.hero h1 {
max-width: 7.9ch !important;
font-size: clamp(62px, 6.9vw, 108px) !important;
line-height: .84 !important;
letter-spacing: -.077em !important;
}
.hero h1 .hero-line-b {
margin-left: .11em !important;
}
.hero h1 .hero-line-c {
margin-left: .57em !important;
font-size: .56em !important;
}
.hero-lead {
max-width: 43ch !important;
margin-top: 28px !important;
}
.hero-actions {
margin-top: 24px !important;
gap: 9px !important;
flex-wrap: nowrap !important;
}
.hero-actions .btn {
min-height: 42px !important;
white-space: nowrap !important;
padding-inline: 16px !important;
}
.hero-manifesto {
max-width: 520px !important;
margin-top: 30px !important;
}
.hero-stats {
max-width: 650px !important;
margin-top: 18px !important;
grid-template-columns: repeat(4,minmax(0,1fr)) !important;
}
.mandala-parallax {
position: absolute !important;
inset: 0 0 0 63% !important;
z-index: 2 !important;
transform: translate3d(calc(var(--px,0px) * .35), calc(var(--py,0px) * .35), 0) !important;
overflow: visible !important;
}
.mandala-parallax::before {
left: 50% !important;
top: 50% !important;
width: min(34vw, 500px) !important;
transform: translate(-50%,-50%) !important;
background:
  radial-gradient(circle,
    color-mix(in srgb,var(--sage) 12%,transparent) 0 20%,
    color-mix(in srgb,var(--gold) 5%,transparent) 35%,
    transparent 72%) !important;
opacity: 1 !important;
}
.mandala-parallax::after {
content: "LOTUS  /  4·7·8" !important;
left: 50% !important;
top: calc(50% + min(18vw, 270px)) !important;
transform: translateX(-50%) !important;
color: color-mix(in srgb,var(--muted) 68%,transparent) !important;
font: 800 8px/1 var(--mono) !important;
letter-spacing: .24em !important;
white-space: nowrap !important;
}
.hero-mandala {
left: 50% !important;
right: auto !important;
top: 50% !important;
width: min(35vw, 520px) !important;
height: min(35vw, 520px) !important;
transform: translate(-50%,-50%) !important;
opacity: .66 !important;
color: var(--mandala-soft) !important;
mix-blend-mode: normal !important;
filter: drop-shadow(0 24px 70px color-mix(in srgb,var(--sage) 9%,transparent)) !important;
}
[data-theme="dark"] .hero-mandala {
opacity: .78 !important;
}
.hero-mandala .lotus-guide circle:nth-child(1) { opacity: .42 !important; }
.hero-mandala .lotus-guide circle:nth-child(2) { opacity: .30 !important; }
.hero-mandala .lotus-guide circle:nth-child(3) { opacity: .48 !important; }
.hero-mandala .lotus-guide circle:nth-child(4) { opacity: .35 !important; }
.hero-mandala .mandala-lotus {
stroke-width: 1.85 !important;
}
.hero-mandala .lotus-inner {
opacity: .46 !important;
}
.hero-mandala .mandala-orbit-outer {
opacity: .62 !important;
}
@media (prefers-reduced-motion: no-preference) {
.hero[data-breath="cycle"] .hero-mandala {
  animation: lotusBreath 19s ease-in-out infinite !important;
}
.hero[data-breath="cycle"] .mandala-orbit-outer {
  animation: lotusOrbit 38s linear infinite !important;
  transform-origin: 280px 280px !important;
}
.hero[data-breath="cycle"] .lotus-guide {
  animation: lotusGuide 28s ease-in-out infinite alternate !important;
  transform-origin: 280px 280px !important;
}
@keyframes lotusBreath {
  0%,100% { transform: translate(-50%,-50%) scale(.988); }
  38%,64% { transform: translate(-50%,-50%) scale(1.018); }
}
@keyframes lotusOrbit {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes lotusGuide {
  from { transform: scale(.992); opacity: .94; }
  to { transform: scale(1.012); opacity: 1; }
}
}
.ritual.section {
width: min(1320px, calc(100vw - 48px)) !important;
max-width: 1320px !important;
margin: 0 auto !important;
padding: clamp(110px,14vh,170px) 18px clamp(116px,15vh,180px) !important;
display: grid !important;
grid-template-columns: minmax(380px,.74fr) minmax(0,1.26fr) !important;
gap: clamp(36px, 6vw, 96px) !important;
position: relative !important;
isolation: isolate !important;
}
.ritual.section::after {
content: "";
position: absolute;
left: 18px;
right: 18px;
bottom: 0;
height: 1px;
background: linear-gradient(90deg,transparent,var(--line-strong) 20%,var(--line-strong) 80%,transparent);
opacity: .65;
}
.ritual.section::before {
content: "02  /  ARRIVAL";
position: absolute !important;
left: 18px !important;
top: 54px !important;
color: var(--sage) !important;
font: 800 9px/1 var(--mono) !important;
letter-spacing: .2em !important;
}
.ritual-intro {
min-width: 0 !important;
padding-top: 10px !important;
display: flex !important;
flex-direction: column !important;
}
.ritual-intro-top {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 22px;
}
.ritual-intro-top .section-number {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 20px;
border: 1px solid color-mix(in srgb,var(--sage) 28%,var(--line));
border-radius: 999px;
color: var(--sage);
font: 800 8px/1 var(--mono);
letter-spacing: .12em;
}
.ritual-intro h2 {
max-width: 8.4ch !important;
margin: 0 !important;
font-size: clamp(50px,5.4vw,80px) !important;
line-height: .88 !important;
letter-spacing: -.066em !important;
}
.ritual-intro h2 em {
color: var(--sage) !important;
}
.ritual-intro > .about-lead {
max-width: 38ch !important;
margin: 24px 0 0 !important;
font-size: clamp(16px,1.2vw,18px) !important;
line-height: 1.63 !important;
}
.ritual-arrival {
display: flex;
align-items: flex-end;
gap: 24px;
margin-top: 52px;
}
.ritual-orb {
width: clamp(150px,13vw,200px) !important;
height: clamp(150px,13vw,200px) !important;
flex: 0 0 auto;
}
.ritual-status {
max-width: 210px !important;
padding-bottom: 6px !important;
}
.ritual-status-kicker {
color: var(--sage) !important;
}
.ritual-status strong {
display: block;
margin: 7px 0 5px;
font-size: clamp(30px,2.7vw,40px) !important;
}
.ritual-status small {
color: var(--muted) !important;
font-size: 12px !important;
line-height: 1.45 !important;
}
.ritual-panel {
min-width: 0 !important;
min-height: 540px !important;
padding: clamp(28px,3vw,44px) !important;
border-radius: 34px !important;
border: 1px solid color-mix(in srgb,var(--sage) 28%,var(--line)) !important;
background:
  linear-gradient(145deg,
    color-mix(in srgb,var(--surface) 98%,transparent),
    color-mix(in srgb,var(--surface2) 92%,transparent)) !important;
box-shadow:
  0 36px 100px color-mix(in srgb,var(--ink) 10%,transparent),
  inset 0 1px 0 color-mix(in srgb,var(--ink) 7%,transparent) !important;
}
.ritual-panel-head {
display: grid !important;
grid-template-columns: auto minmax(0,1fr) !important;
gap: 24px !important;
padding-bottom: 26px !important;
align-items: start !important;
}
.ritual-panel-head > div {
display: grid;
gap: 7px;
}
.ritual-panel-index {
color: var(--sage) !important;
font: 800 9px/1 var(--mono) !important;
letter-spacing: .18em !important;
}
.ritual-panel-label {
color: var(--muted);
font: 800 8px/1 var(--mono);
letter-spacing: .16em;
}
.ritual-panel-head p {
max-width: 38ch !important;
margin: 0 !important;
justify-self: end;
color: var(--muted) !important;
font-size: 14px !important;
line-height: 1.55 !important;
}
.ritual-choices {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 0 !important;
margin-top: 0 !important;
}
.ritual-choice {
display: grid !important;
grid-template-columns: 44px minmax(0,1fr) auto !important;
gap: 18px !important;
align-items: center !important;
width: 100% !important;
min-height: 92px !important;
padding: 14px 4px !important;
border: 0 !important;
border-top: 1px solid var(--line) !important;
border-radius: 0 !important;
background: transparent !important;
color: var(--ink) !important;
text-align: left !important;
box-shadow: none !important;
transform: none !important;
}
.ritual-choice:hover,
.ritual-choice.is-active {
border-color: var(--line) !important;
background: linear-gradient(90deg,
  color-mix(in srgb,var(--sage) 8%,transparent),
  transparent 72%) !important;
transform: none !important;
}
.ritual-choice .choice-index {
width: 32px;
height: 32px;
display: grid;
place-items: center;
border: 1px solid var(--line);
border-radius: 50%;
color: var(--muted);
font: 800 8px/1 var(--mono);
}
.ritual-choice.is-active .choice-index {
border-color: var(--sage);
color: var(--sage);
box-shadow: 0 0 0 6px color-mix(in srgb,var(--sage) 7%,transparent);
}
.ritual-choice .choice-copy {
display: grid;
gap: 6px;
}
.ritual-choice .choice-copy b {
font: 600 clamp(22px,2vw,31px)/1 var(--display) !important;
letter-spacing: -.025em;
}
.ritual-choice .choice-copy small {
max-width: 34ch;
color: var(--muted);
font: 500 12px/1.45 var(--sans);
}
.ritual-choice .choice-arrow {
width: 34px;
height: 34px;
display: grid;
place-items: center;
border: 1px solid var(--line);
border-radius: 50%;
color: var(--sage);
font-size: 14px;
transition: transform .3s var(--ease), border-color .3s var(--ease);
}
.ritual-choice:hover .choice-arrow,
.ritual-choice.is-active .choice-arrow {
transform: translate(2px,-2px);
border-color: color-mix(in srgb,var(--sage) 40%,var(--line));
}
.ritual-foot {
display: flex;
align-items: center;
gap: 12px;
margin-top: 24px;
padding-top: 20px;
border-top: 0 !important;
color: var(--muted);
font: 800 8px/1.4 var(--mono);
letter-spacing: .15em;
text-transform: uppercase;
}
.ritual-line {
width: 38px !important;
height: 1px !important;
background: var(--sage) !important;
}
.campo.section {
width: min(1320px, calc(100vw - 48px)) !important;
max-width: 1320px !important;
padding: clamp(112px,14vh,170px) 18px clamp(120px,16vh,190px) !important;
}
.campo .section-head {
max-width: 830px !important;
margin-bottom: clamp(38px,5vh,56px) !important;
}
.campo .section-head h2 {
max-width: 9ch !important;
font-size: clamp(58px,6vw,88px) !important;
line-height: .86 !important;
}
.campo .section-head .about-lead {
max-width: 55ch !important;
margin-top: 24px !important;
}
.campo-stage {
grid-template-columns: minmax(300px,.54fr) minmax(0,1.46fr) !important;
gap: clamp(20px,2.7vw,38px) !important;
}
.focus-player {
min-height: 640px !important;
border-radius: 34px !important;
padding: 34px !important;
}
.focus-player .player-meta strong {
font-size: clamp(34px,3vw,50px) !important;
}
.campo-vortex-full {
min-height: 640px !important;
border-radius: 36px !important;
padding: 11px !important;
}
.campo-vortex-full iframe {
height: 618px !important;
min-height: 618px !important;
border-radius: 27px !important;
}
@media (max-width: 1100px) and (min-width: 901px) {
.hero-stage {
  grid-template-columns: 34px minmax(0,1fr) minmax(350px,.78fr) !important;
}
.mandala-parallax {
  inset: 0 0 0 61% !important;
}
.hero-mandala {
  width: min(34vw,470px) !important;
  height: min(34vw,470px) !important;
}
}
@media (max-width: 900px) {
.hero-stage {
  grid-template-columns: 1fr !important;
  min-height: 790px !important;
}
.mandala-parallax {
  inset: 0 !important;
  z-index: 1 !important;
}
.hero-mandala {
  left: 78% !important;
  top: 17% !important;
  width: min(82vw,470px) !important;
  height: min(82vw,470px) !important;
  opacity: .22 !important;
}
.mandala-parallax::before {
  left: 78% !important;
  top: 17% !important;
  width: min(80vw,460px) !important;
}
.hero-actions {
  flex-wrap: wrap !important;
}
.ritual.section {
  grid-template-columns: 1fr !important;
  gap: 48px !important;
  padding: 96px 18px 108px !important;
}
.ritual.section::before {
  left: 18px !important;
}
.ritual-arrival {
  margin-top: 40px !important;
}
.ritual-panel {
  min-height: auto !important;
}
.campo-stage {
  grid-template-columns: 1fr !important;
}
.focus-player {
  min-height: 470px !important;
}
.campo-vortex-full {
  min-height: auto !important;
}
.campo-vortex-full iframe {
  height: min(72vh,620px) !important;
  min-height: min(72vh,620px) !important;
}
}
@media (max-width: 560px) {
.hero-stage {
  min-height: 730px !important;
}
.hero h1 {
  font-size: clamp(50px,15vw,78px) !important;
}
.hero-actions .btn {
  padding-inline: 14px !important;
}
.ritual.section {
  padding-top: 78px !important;
  padding-bottom: 90px !important;
}
.ritual-intro h2 {
  font-size: clamp(42px,13vw,64px) !important;
}
.ritual-arrival {
  flex-direction: column !important;
  align-items: flex-start !important;
}
.ritual-panel {
  padding: 22px 20px !important;
  border-radius: 26px !important;
}
.ritual-panel-head {
  grid-template-columns: 1fr !important;
  gap: 14px !important;
}
.ritual-panel-head p {
  justify-self: start !important;
}
.ritual-choice {
  min-height: 104px !important;
  grid-template-columns: 36px minmax(0,1fr) auto !important;
  gap: 12px !important;
}
.campo.section {
  padding-top: 86px !important;
  padding-bottom: 96px !important;
}
}
/* ================================================================
 SANCTUARY V2.1 · LOTUS IDENTITY + RITUAL EDITORIAL
 ------------------------------------------------
 The lotus is the visual signature:
 dark = luminous white
 light = vivid natural green
 no central dot, no "portal" / projection cue
 ================================================================ */
:root,
[data-theme="light"] {
--lotus-color: #3f9a68;
--lotus-highlight: #63bb87;
--lotus-guide: rgba(63,154,104,.42);
--lotus-fill: rgba(63,154,104,.055);
--lotus-fill-soft: rgba(99,187,135,.035);
}
[data-theme="dark"] {
--lotus-color: #f8fff9;
--lotus-highlight: #c0d6b9;
--lotus-guide: rgba(248,255,249,.28);
--lotus-fill: rgba(248,255,249,.045);
--lotus-fill-soft: rgba(255,255,255,.022);
}
.hero-mandala {
width: min(36vw, 540px) !important;
height: min(36vw, 540px) !important;
opacity: 1 !important;
filter:
  drop-shadow(0 20px 60px color-mix(in srgb,var(--lotus-color) 12%,transparent))
  drop-shadow(0 0 38px color-mix(in srgb,var(--lotus-color) 10%,transparent)) !important;
}
[data-theme="light"] .hero-mandala {
color: var(--lotus-color) !important;
}
[data-theme="dark"] .hero-mandala {
color: var(--lotus-color) !important;
opacity: .98 !important;
filter:
  drop-shadow(0 0 24px color-mix(in srgb,var(--lotus-color) 19%,transparent))
  drop-shadow(0 22px 70px color-mix(in srgb,var(--lotus-color) 12%,transparent)) !important;
}
.hero-mandala .lotus-halo {
opacity: .9 !important;
}
.hero-mandala .lotus-guide {
stroke: var(--lotus-guide) !important;
opacity: .68 !important;
}
.hero-mandala .mandala-lotus,
.hero-mandala .lotus-bloom {
stroke: var(--lotus-color) !important;
fill: none !important;
}
.ritual.section {
width: min(1320px, calc(100vw - 48px)) !important;
max-width: 1320px !important;
padding: clamp(116px,14vh,174px) 18px clamp(120px,15vh,188px) !important;
grid-template-columns: minmax(390px,.68fr) minmax(0,1.32fr) !important;
gap: clamp(42px,6.5vw,104px) !important;
align-items: center !important;
}
.ritual.section::before {
content: "02  /  ARRIVAL" !important;
top: 48px !important;
left: 18px !important;
opacity: .72 !important;
}
.ritual-intro {
justify-content: center !important;
}
.ritual-intro-top {
margin-bottom: 28px !important;
}
.ritual-intro-top .section-number {
width: 36px !important;
height: 22px !important;
border-color: color-mix(in srgb,var(--sage) 36%,var(--line)) !important;
color: var(--sage) !important;
}
.ritual-intro h2 {
max-width: 8.1ch !important;
font-size: clamp(54px,5.55vw,82px) !important;
line-height: .87 !important;
}
.ritual-intro > .about-lead {
max-width: 36ch !important;
margin-top: 28px !important;
font-size: clamp(16px,1.16vw,18px) !important;
}
.ritual-arrival {
position: relative !important;
display: grid !important;
grid-template-columns: 156px minmax(0,1fr) !important;
gap: 24px !important;
align-items: center !important;
margin-top: 48px !important;
min-height: 166px !important;
}
.ritual-arrival::before {
content: "BREATHE";
position: absolute;
left: 0;
top: -16px;
color: var(--muted);
font: 800 7px/1 var(--mono);
letter-spacing: .24em;
}
.ritual-orb {
position: relative !important;
width: 156px !important;
height: 156px !important;
display: grid !important;
place-items: center !important;
border-radius: 50% !important;
background:
  radial-gradient(circle,
    color-mix(in srgb,var(--sage) 16%,transparent) 0 18%,
    transparent 20% 48%,
    color-mix(in srgb,var(--sage) 5%,transparent) 49% 67%,
    transparent 68%) !important;
box-shadow:
  inset 0 0 0 1px color-mix(in srgb,var(--sage) 20%,transparent),
  0 18px 46px color-mix(in srgb,var(--sage) 10%,transparent) !important;
}
.ritual-orb::before,
.ritual-orb::after {
content: "";
position: absolute;
inset: 18%;
border: 1px solid color-mix(in srgb,var(--sage) 28%,transparent);
border-radius: 50%;
transform: rotate(22deg) scaleY(.42);
}
.ritual-orb::after {
transform: rotate(-68deg) scaleY(.42);
opacity: .58;
}
.ritual-orb-ring {
position: absolute !important;
inset: 31% !important;
border: 1px solid color-mix(in srgb,var(--lotus-color) 50%,var(--line)) !important;
border-radius: 50% !important;
}
.ritual-orb-core {
width: 13px !important;
height: 13px !important;
border-radius: 50% !important;
background: var(--lotus-color) !important;
box-shadow: 0 0 0 9px color-mix(in srgb,var(--lotus-color) 8%,transparent),
            0 0 28px color-mix(in srgb,var(--lotus-color) 18%,transparent) !important;
}
.ritual-status {
max-width: 220px !important;
padding: 0 !important;
}
.ritual-status strong {
font-size: clamp(30px,2.7vw,41px) !important;
color: var(--ink) !important;
}
.ritual-status small {
max-width: 19ch !important;
}
.ritual-panel {
position: relative !important;
min-height: 566px !important;
padding: clamp(30px,3.2vw,46px) !important;
border-radius: 32px !important;
border: 1px solid color-mix(in srgb,var(--sage) 22%,var(--line)) !important;
background:
  radial-gradient(460px 330px at 85% 0%,color-mix(in srgb,var(--sage) 8%,transparent),transparent 72%),
  linear-gradient(152deg,
    color-mix(in srgb,var(--surface) 98%,transparent),
    color-mix(in srgb,var(--surface2) 92%,transparent)) !important;
box-shadow:
  0 32px 90px color-mix(in srgb,var(--ink) 9%,transparent),
  inset 0 1px 0 color-mix(in srgb,var(--ink) 7%,transparent) !important;
}
.ritual-panel::before {
content: "";
position: absolute;
right: 28px;
top: 28px;
width: 84px;
height: 84px;
border: 1px solid color-mix(in srgb,var(--sage) 18%,transparent);
border-radius: 50%;
box-shadow: 0 0 0 18px color-mix(in srgb,var(--sage) 2%,transparent);
pointer-events: none;
}
.ritual-panel-head {
padding-bottom: 28px !important;
border-bottom: 1px solid var(--line) !important;
}
.ritual-choices {
margin-top: 6px !important;
}
.ritual-choice {
min-height: 101px !important;
padding: 16px 4px !important;
}
.ritual-choice .choice-index {
width: 34px !important;
height: 34px !important;
border-color: var(--line-strong) !important;
}
.ritual-choice .choice-copy b {
font-size: clamp(23px,1.95vw,32px) !important;
}
.ritual-choice .choice-copy small {
font-size: 12px !important;
}
.ritual-choice .choice-arrow {
width: 36px !important;
height: 36px !important;
}
.ritual-foot {
margin-top: 28px !important;
padding-top: 20px !important;
}
[data-theme="light"] .ritual-panel {
background:
  radial-gradient(500px 360px at 90% 0%,rgba(63,154,104,.09),transparent 72%),
  linear-gradient(150deg,#fffef8,#f6f5eb) !important;
}
[data-theme="light"] .ritual-choice:hover,
[data-theme="light"] .ritual-choice.is-active {
background: linear-gradient(90deg,rgba(63,154,104,.09),transparent 76%) !important;
}
[data-theme="dark"] .ritual-panel {
border-color: rgba(248,255,249,.18) !important;
}
[data-theme="dark"] .ritual-panel::before {
border-color: rgba(248,255,249,.16) !important;
}
@media (max-width: 1100px) and (min-width: 901px) {
.hero-mandala {
  width: min(34vw,470px) !important;
  height: min(34vw,470px) !important;
}
.ritual.section {
  grid-template-columns: minmax(330px,.64fr) minmax(0,1.36fr) !important;
  gap: 34px !important;
}
}
@media (max-width: 900px) {
.ritual.section {
  grid-template-columns: 1fr !important;
  gap: 46px !important;
}
.ritual-arrival {
  grid-template-columns: 140px minmax(0,1fr) !important;
}
.ritual-orb {
  width: 140px !important;
  height: 140px !important;
}
.ritual-panel {
  min-height: auto !important;
}
}
@media (max-width: 560px) {
.hero-mandala {
  width: min(78vw,380px) !important;
  height: min(78vw,380px) !important;
  opacity: .9 !important;
}
.ritual.section {
  padding-top: 82px !important;
}
.ritual-arrival {
  grid-template-columns: 1fr !important;
  margin-top: 38px !important;
}
.ritual-orb {
  width: 148px !important;
  height: 148px !important;
}
.ritual-panel-head {
  grid-template-columns: 1fr !important;
}
.ritual-panel::before {
  width: 64px;
  height: 64px;
  right: 20px;
  top: 20px;
}
}
:root,
[data-theme="light"] {
--lotus-color: #46a96f;
--lotus-highlight: #74c895;
}
[data-theme="dark"] {
--lotus-color: #fbfffc;
--lotus-highlight: #c0d6b9;
}
.mandala-parallax {
inset: 0 0 0 63% !important;
overflow: visible !important;
background: none !important;
filter: none !important;
}
.mandala-parallax::before {
content: "" !important;
left: 50% !important;
top: 50% !important;
width: min(36vw, 510px) !important;
aspect-ratio: 1 !important;
transform: translate(-50%,-50%) !important;
border-radius: 50% !important;
background:
  radial-gradient(circle,
    color-mix(in srgb,var(--lotus-color) 7%,transparent) 0 18%,
    color-mix(in srgb,var(--lotus-color) 3%,transparent) 44%,
    transparent 68%) !important;
opacity: 1 !important;
}
.mandala-parallax::after {
content: "RESPIRA  ·  4 / 7 / 8" !important;
left: 50% !important;
top: calc(50% + min(19vw, 260px)) !important;
transform: translateX(-50%) !important;
color: color-mix(in srgb,var(--lotus-color) 52%,var(--muted)) !important;
font: 800 8px/1 var(--mono) !important;
letter-spacing: .24em !important;
white-space: nowrap !important;
pointer-events: none !important;
}
.hero-mandala {
left: 50% !important;
top: 50% !important;
width: min(33vw, 470px) !important;
height: min(33vw, 470px) !important;
transform: translate(-50%,-50%) !important;
opacity: 1 !important;
overflow: visible !important;
color: var(--lotus-color) !important;
filter:
  drop-shadow(0 0 28px color-mix(in srgb,var(--lotus-color) 12%,transparent))
  drop-shadow(0 24px 68px color-mix(in srgb,var(--lotus-color) 8%,transparent)) !important;
}
[data-theme="dark"] .hero-mandala {
color: #fbfffc !important;
opacity: 1 !important;
filter:
  drop-shadow(0 0 22px rgba(255,255,255,.24))
  drop-shadow(0 22px 66px rgba(255,255,255,.08)) !important;
}
.hero-mandala .lotus-guide,
.hero-mandala .mandala-orbit-outer,
.hero-mandala .lotus-halo,
.hero-mandala .lotus-sparks {
display: none !important;
}
.hero-mandala .lotus-bloom {
fill: none !important;
stroke: var(--lotus-color) !important;
stroke-width: 2.55 !important;
}
.hero-mandala .lotus-detail {
stroke: var(--lotus-highlight) !important;
stroke-width: 1.05 !important;
}
[data-theme="dark"] .hero-mandala .lotus-detail {
stroke: #ffffff !important;
}
@media (prefers-reduced-motion: no-preference) {
.hero[data-breath="cycle"] .hero-mandala {
  animation: signatureLotusBreath 19s ease-in-out infinite !important;
}
@keyframes signatureLotusBreath {
  0%,100% { transform: translate(-50%,-50%) scale(.988); }
  50% { transform: translate(-50%,-50%) scale(1.018); }
}
}
.ritual.section {
width: min(1320px, calc(100vw - 48px)) !important;
max-width: 1320px !important;
min-height: min(760px, calc(100svh - var(--header))) !important;
margin: 0 auto !important;
padding: clamp(98px, 12vh, 144px) 24px !important;
display: grid !important;
grid-template-columns: minmax(360px,.72fr) minmax(0,1.28fr) !important;
gap: clamp(34px,5.5vw,86px) !important;
align-items: center !important;
}
.ritual.section::before {
content: "02  /  RITUAL" !important;
top: 42px !important;
left: 24px !important;
color: var(--sage) !important;
font: 800 9px/1 var(--mono) !important;
letter-spacing: .22em !important;
}
.ritual-intro {
min-width: 0 !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
padding: 18px 0 !important;
}
.ritual-intro-top {
margin-bottom: 26px !important;
}
.ritual-intro h2 {
max-width: 8ch !important;
margin: 0 !important;
font-size: clamp(52px,5.2vw,78px) !important;
line-height: .9 !important;
letter-spacing: -.066em !important;
}
.ritual-intro > .about-lead {
max-width: 38ch !important;
margin: 26px 0 0 !important;
font-size: clamp(16px,1.12vw,18px) !important;
line-height: 1.65 !important;
}
.ritual-arrival {
position: relative !important;
display: grid !important;
grid-template-columns: 164px minmax(0,1fr) !important;
gap: 24px !important;
align-items: center !important;
margin-top: 54px !important;
}
.ritual-arrival::before {
content: "BREATHE";
position: absolute;
left: 2px;
top: -18px;
color: var(--muted);
font: 800 7px/1 var(--mono);
letter-spacing: .25em;
}
.ritual-orb {
width: 164px !important;
height: 164px !important;
display: grid !important;
place-items: center !important;
border-radius: 50% !important;
background:
  radial-gradient(circle,
    color-mix(in srgb,var(--sage) 12%,transparent) 0 20%,
    transparent 20% 52%,
    color-mix(in srgb,var(--sage) 5%,transparent) 53% 68%,
    transparent 69%) !important;
box-shadow:
  inset 0 0 0 1px color-mix(in srgb,var(--sage) 22%,transparent),
  0 22px 58px color-mix(in srgb,var(--sage) 9%,transparent) !important;
}
.ritual-orb::before,
.ritual-orb::after {
inset: 18% !important;
border-color: color-mix(in srgb,var(--sage) 24%,transparent) !important;
}
.ritual-orb-ring {
inset: 31% !important;
border-color: color-mix(in srgb,var(--sage) 48%,var(--line)) !important;
}
.ritual-orb-core {
width: 12px !important;
height: 12px !important;
background: var(--lotus-color) !important;
box-shadow:
  0 0 0 9px color-mix(in srgb,var(--lotus-color) 7%,transparent),
  0 0 26px color-mix(in srgb,var(--lotus-color) 15%,transparent) !important;
}
.ritual-status strong {
margin: 7px 0 !important;
font-size: clamp(30px,2.5vw,39px) !important;
}
.ritual-panel {
min-height: 560px !important;
padding: clamp(30px,3.2vw,44px) !important;
border-radius: 34px !important;
border: 1px solid color-mix(in srgb,var(--sage) 22%,var(--line)) !important;
background:
  linear-gradient(145deg,
    color-mix(in srgb,var(--surface) 98%,transparent),
    color-mix(in srgb,var(--surface2) 92%,transparent)) !important;
box-shadow:
  0 36px 110px color-mix(in srgb,var(--ink) 10%,transparent),
  inset 0 1px 0 color-mix(in srgb,var(--ink) 6%,transparent) !important;
}
.ritual-panel-head {
display: grid !important;
grid-template-columns: auto minmax(0,1fr) !important;
gap: 22px !important;
align-items: start !important;
padding-bottom: 24px !important;
border-bottom: 1px solid var(--line) !important;
}
.ritual-panel-label {
color: var(--sage) !important;
}
.ritual-panel-head p {
max-width: 38ch !important;
justify-self: end !important;
margin: 0 !important;
color: var(--muted) !important;
font-size: 14px !important;
line-height: 1.55 !important;
}
.ritual-choices {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 0 !important;
margin-top: 4px !important;
}
.ritual-choice {
min-height: 96px !important;
grid-template-columns: 42px minmax(0,1fr) auto !important;
gap: 18px !important;
padding: 12px 4px !important;
border-top: 1px solid var(--line) !important;
border-radius: 0 !important;
background: transparent !important;
}
.ritual-choice:last-child {
border-bottom: 1px solid var(--line) !important;
}
.ritual-choice:hover,
.ritual-choice.is-active {
background: linear-gradient(90deg,color-mix(in srgb,var(--sage) 8%,transparent),transparent 80%) !important;
}
.ritual-choice .choice-index {
width: 34px !important;
height: 34px !important;
display: grid !important;
place-items: center !important;
border: 1px solid var(--line-strong) !important;
border-radius: 50% !important;
color: var(--muted) !important;
}
.ritual-choice.is-active .choice-index {
color: var(--sage) !important;
border-color: var(--sage) !important;
box-shadow: 0 0 0 6px color-mix(in srgb,var(--sage) 7%,transparent) !important;
}
.ritual-choice .choice-copy {
display: grid !important;
gap: 6px !important;
}
.ritual-choice .choice-copy b {
font-size: clamp(23px,1.9vw,31px) !important;
}
.ritual-choice .choice-copy small {
color: var(--muted) !important;
font-size: 12px !important;
line-height: 1.45 !important;
}
.ritual-choice .choice-arrow {
width: 36px !important;
height: 36px !important;
display: grid !important;
place-items: center !important;
border: 1px solid var(--line) !important;
border-radius: 50% !important;
color: var(--sage) !important;
}
.ritual-foot {
margin-top: 24px !important;
padding-top: 18px !important;
border: 0 !important;
color: var(--muted) !important;
}
@media (max-width: 900px) {
.mandala-parallax {
  inset: 0 !important;
  opacity: .92 !important;
}
.hero-mandala {
  left: 74% !important;
  top: 18% !important;
  width: min(72vw,390px) !important;
  height: min(72vw,390px) !important;
}
.mandala-parallax::before {
  left: 74% !important;
  top: 18% !important;
  width: min(72vw,390px) !important;
}
.ritual.section {
  grid-template-columns: 1fr !important;
  min-height: auto !important;
  gap: 48px !important;
  padding: 92px 18px 110px !important;
}
}
@media (max-width: 560px) {
.hero-mandala {
  left: 78% !important;
  top: 15% !important;
  width: min(76vw,340px) !important;
  height: min(76vw,340px) !important;
}
.mandala-parallax::before {
  left: 78% !important;
  top: 15% !important;
  width: min(74vw,330px) !important;
}
.ritual.section {
  padding-top: 78px !important;
}
.ritual-arrival {
  grid-template-columns: 1fr !important;
}
}
.mandala-parallax {
inset: 0 0 0 64% !important;
}
.hero-mandala {
left: 50% !important;
top: 48% !important;
width: min(32vw, 450px) !important;
height: min(32vw, 450px) !important;
filter: drop-shadow(0 18px 44px color-mix(in srgb,var(--lotus-color) 13%,transparent)) !important;
}
[data-theme="dark"] .hero-mandala {
filter:
  drop-shadow(0 0 18px rgba(255,255,255,.28))
  drop-shadow(0 18px 46px rgba(255,255,255,.09)) !important;
}
.ritual.section {
min-height: min(820px, calc(100svh - var(--header))) !important;
grid-template-columns: minmax(340px,.82fr) minmax(520px,1.18fr) !important;
gap: clamp(34px,7vw,108px) !important;
padding-top: clamp(110px,15vh,170px) !important;
padding-bottom: clamp(110px,15vh,170px) !important;
}
.ritual-intro {
position: relative !important;
min-height: 560px !important;
justify-content: center !important;
}
.ritual-intro::after {
content: "PRÁCTICA / 01";
position: absolute;
right: 0;
top: 0;
color: var(--muted);
font: 800 8px/1 var(--mono);
letter-spacing: .2em;
writing-mode: vertical-rl;
opacity: .58;
}
.ritual-intro h2 {
max-width: 7.3ch !important;
font-size: clamp(54px,5.5vw,84px) !important;
line-height: .86 !important;
}
.ritual-intro > .about-lead {
max-width: 34ch !important;
}
.ritual-arrival {
margin-top: 58px !important;
}
.ritual-arrival::before {
content: "RESPIRACIÓN  /  ESTADO ACTUAL" !important;
color: var(--muted) !important;
}
.ritual-orb {
width: 172px !important;
height: 172px !important;
border: 1px solid color-mix(in srgb,var(--sage) 20%,transparent) !important;
background:
  radial-gradient(circle at 50% 50%,
    color-mix(in srgb,var(--sage) 9%,transparent) 0 16%,
    transparent 17% 46%,
    color-mix(in srgb,var(--sage) 5%,transparent) 47% 63%,
    transparent 64%) !important;
}
.ritual-status {
max-width: 230px !important;
}
.ritual-status-kicker {
letter-spacing: .22em !important;
}
.ritual-status strong {
font-size: clamp(32px,2.6vw,42px) !important;
}
.ritual-panel {
min-height: 590px !important;
padding: clamp(32px,3.4vw,48px) !important;
border-radius: 36px !important;
}
.ritual-panel-head {
gap: 28px !important;
}
.ritual-panel-index {
font-size: 10px !important;
}
.ritual-panel-label {
letter-spacing: .2em !important;
}
.ritual-panel-head p {
max-width: 32ch !important;
font-size: 14px !important;
}
.ritual-choice {
min-height: 104px !important;
padding: 16px 4px !important;
}
.ritual-choice .choice-copy b {
font-size: clamp(24px,2vw,33px) !important;
}
.ritual-choice .choice-arrow {
width: 38px !important;
height: 38px !important;
}
[data-theme="light"] .ritual-panel {
background:
  linear-gradient(145deg,#fffef9,#f4f4ea) !important;
box-shadow:
  0 38px 110px rgba(34,49,39,.09),
  inset 0 1px 0 rgba(255,255,255,.85) !important;
}
[data-theme="dark"] .ritual-panel {
background:
  linear-gradient(145deg,#0e1511,#0a100d) !important;
box-shadow:
  0 40px 120px rgba(0,0,0,.36),
  inset 0 1px 0 rgba(255,255,255,.035) !important;
}
@media (max-width: 1100px) and (min-width: 901px) {
.mandala-parallax {
  inset: 0 0 0 61% !important;
}
.hero-mandala {
  left: 50% !important;
  width: min(33vw,430px) !important;
  height: min(33vw,430px) !important;
}
.ritual.section {
  grid-template-columns: minmax(300px,.7fr) minmax(0,1.3fr) !important;
  gap: 32px !important;
}
}
@media (max-width: 900px) {
.mandala-parallax {
  inset: 0 !important;
}
.hero-mandala {
  left: 74% !important;
  top: 18% !important;
  width: min(70vw,370px) !important;
  height: min(70vw,370px) !important;
  opacity: .94 !important;
}
.ritual.section {
  min-height: auto !important;
  grid-template-columns: 1fr !important;
}
.ritual-intro {
  min-height: auto !important;
}
.ritual-intro::after {
  display: none !important;
}
}
@media (max-width: 560px) {
.hero-mandala {
  left: 77% !important;
  top: 15% !important;
  width: min(72vw,320px) !important;
  height: min(72vw,320px) !important;
}
.ritual.section {
  padding-top: 80px !important;
  padding-bottom: 88px !important;
}
.ritual-orb {
  width: 148px !important;
  height: 148px !important;
}
.ritual-panel {
  min-height: auto !important;
}
}
/* ================================================================
 LOTUS SIGNATURE v5 · BOTANICAL LOTUS
 ------------------------------------------------
 Layered botanical petals; the shared breath clock controls their opening.
 ================================================================ */
:root,
[data-theme="light"] {
--lotus-color: #466e58;
--lotus-highlight: #466e58;
--petal-rose: #cf8e9d;
--petal-blush: #e4b9be;
--petal-paper: #f3e9dd;
--petal-light: #fff9ec;
--petal-sage: #b7c7ab;
--petal-shadow: #91aa90;
--petal-leaf: #54745c;
--petal-edge: #ac7786;
}
[data-theme="dark"] {
--lotus-color: #c0d6b9;
--lotus-highlight: #c0d6b9;
--petal-rose: #d697ab;
--petal-blush: #d5abb9;
--petal-paper: #d7ddd0;
--petal-light: #f4edde;
--petal-sage: #849d86;
--petal-shadow: #546f62;
--petal-leaf: #6e947f;
--petal-edge: #d3a0b0;
}
.mandala-parallax {
inset: 0 0 0 61% !important;
overflow: visible !important;
background: transparent !important;
filter: none !important;
}
.mandala-parallax::before,
.mandala-parallax::after {
display: none !important;
}
.hero .mandala-parallax .hero-mandala {
left: 50% !important;
right: auto !important;
top: 50% !important;
width: min(39vw, 570px) !important;
height: auto !important;
aspect-ratio: 560 / 400 !important;
transform: translate(-50%,-50%) !important;
overflow: visible !important;
opacity: 1 !important;
color: var(--lotus-color) !important;
filter: drop-shadow(0 12px 16px color-mix(in srgb,var(--petal-leaf) 12%,transparent)) !important;
animation: none !important;
mix-blend-mode: normal !important;
}
.hero-mandala .lotus-bloom {
fill: none !important;
stroke: none !important;
transform-box: view-box !important;
transform-origin: 280px 330px !important;
transform: translateY(calc(var(--lotus-open,.5) * -5px)) scale(calc(.98 + var(--lotus-open,.5) * .02));
transition: transform .3s linear;
}
.hero-mandala .lotus-petal {
fill: url(#lotus-wash);
stroke: url(#lotus-edge);
stroke-width: 1;
}
.hero-mandala .lotus-petal-back { fill: url(#lotus-back-wash); }
.hero-mandala .lotus-petal-side { fill: url(#lotus-side-wash); }
.hero-mandala .lotus-petal-front,
.hero-mandala .lotus-petal-cup { fill: url(#lotus-front-wash); }
.hero-mandala .lotus-sepal { fill: url(#lotus-leaf-wash); }
.hero-mandala .lotus-wing {
transform-box: view-box;
transform-origin: 280px 320px;
transform: rotate(calc(var(--lotus-open,.5) * var(--lotus-side) * 1.7deg));
transition: transform .3s linear;
}
.lotus-wing-left { --lotus-side: -1; }
.lotus-wing-right { --lotus-side: 1; }
.lotus-stop-rose { stop-color: var(--petal-rose); }
.lotus-stop-blush { stop-color: var(--petal-blush); }
.lotus-stop-paper { stop-color: var(--petal-paper); }
.lotus-stop-light { stop-color: var(--petal-light); }
.lotus-stop-sage { stop-color: var(--petal-sage); }
.lotus-stop-shadow { stop-color: var(--petal-shadow); }
.lotus-stop-leaf { stop-color: var(--petal-leaf); }
.lotus-stop-rose-edge { stop-color: var(--petal-edge); }
.hero-mandala .lotus-vein {
fill: none;
stroke: var(--petal-leaf);
stroke-width: .7;
opacity: .28;
}
.hero-mandala .lotus-glint {
fill: none;
stroke: var(--petal-light);
stroke-width: 1.2;
opacity: .72;
}
.hero-mandala .lotus-throat {
fill: none;
stroke: #ac8753;
stroke-width: 1.6;
opacity: .8;
}
.hero-mandala .lotus-water {
stroke: var(--lotus-color);
stroke-width: .8;
opacity: .22;
}
body.quiet-mode .hero-mandala .lotus-bloom,
body.quiet-mode .hero-mandala .lotus-wing {
transition: none;
}
body.quiet-mode .hero .mandala-parallax {
transform: none !important;
transition: none !important;
}
@media (prefers-reduced-motion: reduce) {
.hero-mandala .lotus-bloom,
.hero-mandala .lotus-wing { transition: none; }
.hero .mandala-parallax {
transform: none !important;
transition: none !important;
}
}
@media (max-width: 1100px) and (min-width: 901px) {
.mandala-parallax {
  inset: 0 0 0 60% !important;
}
.hero .mandala-parallax .hero-mandala {
  width: min(38vw, 470px) !important;
}
}
@media (max-width: 900px) {
.hero {
  --lotus-band: clamp(188px,44vw,275px);
  padding-top: calc(var(--lotus-band) + 28px) !important;
}
.hero-stage { min-height: 0 !important; }
.mandala-parallax {
  inset: 0 !important;
  transform: none !important;
  opacity: 1 !important;
}
.hero .mandala-parallax .hero-mandala {
  left: 50% !important;
  top: calc(var(--lotus-band) / 2 + 18px) !important;
  width: clamp(240px,74vw,360px) !important;
  max-width: calc(100% - 32px) !important;
}
}
@media (min-width: 901px) and (max-height: 620px) {
.hero .mandala-parallax .hero-mandala {
  width: min(35vw,460px) !important;
}
}
.instructor-flow {
position: relative;
isolation: isolate;
}
.instructor-flow-head {
max-width: 760px;
}
.flow-console {
position: relative;
margin-top: clamp(32px, 5vw, 64px);
padding: clamp(24px, 4vw, 44px);
border: 1px solid var(--line);
border-radius: 28px;
background:
  radial-gradient(480px circle at 12% 0%, color-mix(in srgb, var(--sage) 9%, transparent), transparent 68%),
  linear-gradient(145deg, color-mix(in srgb, var(--surface) 96%, transparent), color-mix(in srgb, var(--surface2) 92%, transparent));
box-shadow:
  0 30px 90px color-mix(in srgb, var(--ink) 8%, transparent),
  inset 0 1px 0 color-mix(in srgb, var(--ink) 7%, transparent);
}
.flow-console-top {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
}
.flow-phase {
display: grid;
gap: 7px;
}
.flow-phase-kicker {
font-size: 10px;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--muted);
}
#flow-phase-label {
font-size: clamp(32px, 5vw, 64px);
line-height: .95;
letter-spacing: -.045em;
}
 #flow-phase-meta {
color: var(--muted);
font-variant-numeric: tabular-nums;
}
#flow-phase-cue {
max-width: 560px;
margin: 4px 0 0;
color: var(--muted);
font-size: 13px;
line-height: 1.5;
}
.flow-session-clock small {
display: block;
}
#flow-phase-target {
opacity: .42;
}
#flow-phase-target::before {
content: "OBJETIVO · ";
}
#flow-phase-time {
color: var(--sage);
font-size: .78rem;
letter-spacing: .06em;
}
.flow-state {
padding: 9px 13px;
border: 1px solid var(--line);
border-radius: 999px;
font-size: 10px;
letter-spacing: .14em;
color: var(--muted);
white-space: nowrap;
}
.flow-progress {
height: 4px;
margin: 30px 0 24px;
overflow: hidden;
border-radius: 999px;
background: color-mix(in srgb, var(--ink) 9%, transparent);
}
#flow-progress-bar {
display: block;
width: 100%;
height: 100%;
transform: scaleX(0);
transform-origin: left center;
border-radius: inherit;
background: var(--sage);
transition: transform .45s var(--ease);
}
.flow-phase-progress {
height: 3px;
margin: -12px 0 24px;
overflow: hidden;
border-radius: 999px;
background: color-mix(in srgb, var(--ink) 7%, transparent);
}
#flow-phase-progress-bar {
display: block;
width: 100%;
height: 100%;
transform: scaleX(0);
transform-origin: left center;
border-radius: inherit;
background: color-mix(in srgb, var(--gold) 72%, var(--sage));
transition: transform .2s linear;
}
.flow-controls {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
}
.flow-control,
.flow-start {
min-height: 48px;
padding: 12px 16px;
border: 1px solid var(--line);
border-radius: 14px;
font: inherit;
font-size: 12px;
font-weight: 650;
letter-spacing: .03em;
cursor: pointer;
transition: transform .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
}
.flow-control:hover,
.flow-start:hover {
transform: translateY(-2px);
}
.flow-control.ghost {
background: transparent;
color: var(--ink);
}
.flow-control.primary,
.flow-start {
border-color: color-mix(in srgb, var(--sage) 55%, var(--line));
background: var(--sage);
color: var(--surface);
}
.flow-console-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
margin-top: 20px;
color: var(--muted);
font-size: 10px;
line-height: 1.5;
letter-spacing: .06em;
text-transform: uppercase;
}
.flow-start {
flex: 0 0 auto;
}
@media (max-width: 680px) {
.flow-console-top,
.flow-console-foot {
  align-items: stretch;
  flex-direction: column;
}
.flow-controls {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.flow-start {
  width: 100%;
}
}
@media (prefers-reduced-motion: reduce) {
#flow-progress-bar,
.flow-control,
.flow-start {
  transition: none;
}
}
.flow-session-clock {
display: grid;
gap: .2rem;
justify-items: end;
min-width: 5.5rem;
}
.flow-session-clock span {
font: 700 .62rem/1 JetBrains Mono, monospace;
letter-spacing: .14em;
opacity: .55;
}
.flow-session-clock strong {
font: 600 1.05rem/1 Inter, sans-serif;
font-variant-numeric: tabular-nums;
letter-spacing: .04em;
}
@media (max-width: 640px) {
.flow-session-clock {
  justify-items: start;
}
}
.flow-session-clock small {
font: 600 .62rem/1 JetBrains Mono, monospace;
letter-spacing: .08em;
opacity: .5;
}
/* Yoga V5: accessible controls and compact mobile ambience. */
:focus-visible { outline: 3px solid var(--sage); outline-offset: 5px; }
[hidden] { display: none !important; }
section[id] { scroll-margin-top: calc(var(--header) + 20px); }
@media (max-width: 600px) {
:root { --header: 112px; }
.site-header { --header: 112px; flex-wrap: wrap; padding: 10px 12px; gap: 8px; }
.site-header .brand { flex: 1 1 100%; }
.header-actions { flex: 1 1 100%; justify-content: space-between; }
.header-actions .header-cv { display: none; }
.sanctuary-dock { left: 12px; bottom: 12px; }
.sanctuary-dock .sanctuary-section { display: none; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.fx, .spotlight, .zintro { display: none !important; }
}
[lang="en"] #flow-phase-target::before { content: "TARGET · "; }
/* Keep informational text readable throughout the breathing cycle. */
.hero .breath-caption,
.hero[data-phase] .breath-caption,
body.quiet-mode .sanctuary-dock,
.flow-session-clock span,
.flow-session-clock small,
#flow-phase-target {
opacity: 1;
}
.flow-session-clock span,
.flow-session-clock small { color: var(--muted); }
[data-theme="light"] .header-cv,
[data-theme="light"] .contact-actions .btn.primary {
background: #214b38 !important;
color: #f8f5ed !important;
}
[data-theme="dark"] .header-cv,
[data-theme="dark"] .contact-actions .btn.primary {
background: #93c5a6 !important;
color: #09130f !important;
}
@media (max-width: 600px) {
.hero h1 {
  width: 100% !important;
  max-width: none !important;
  font-size: clamp(34px, 10.5vw, 60px) !important;
  line-height: 1.02 !important;
  letter-spacing: -.045em !important;
}
.hero h1 .hero-line-b,
.hero h1 .hero-line-c {
  margin-left: 0 !important;
  transform: none !important;
}
.hero h1 .hero-line-c { font-size: .78em !important; }
.sanctuary-dock {
  display: flex;
  align-items: center;
  gap: 8px;
  width: calc(100vw - 24px);
  max-width: 360px;
  right: auto;
  padding: 6px;
}
.sanctuary-breath {
  display: flex;
  flex: 1;
  gap: 8px;
  width: auto;
  min-height: 44px;
  padding: 5px;
}
.breath-ring { width: 32px; height: 32px; flex: 0 0 32px; }
.breath-copy strong { font-size: 15px; }
.breath-kicker, .breath-time { display: none; }
.sanctuary-dock .sanctuary-dock-tools { display: block; border: 0; padding: 0; }
.sanctuary-quiet { min-height: 44px; font-size: 9px; }
body { padding-bottom: 80px; }
}
.btn.primary, .header-cv { transition-property: transform, box-shadow, border-color; }
@media (min-width: 601px) {
.sanctuary-dock { left: auto; right: 18px; }
}

body.quiet-mode .hero .hero-mandala { filter: none !important; }

/* Keep decorative parallax fully still without a compositing layer in quiet
   mode. The old desktop !important transform otherwise overrode this rule. */
body.quiet-mode .hero .mandala-parallax,
body.quiet-mode .hero .orb-parallax {
  transform: none !important;
  transition: none !important;
  will-change: auto !important;
}
@media (prefers-reduced-motion: reduce) {
  .hero .mandala-parallax,
  .hero .orb-parallax {
    transform: none !important;
    transition: none !important;
    will-change: auto !important;
  }
}

/* Firefox narrow-viewport compositing budget: don't pre-promote the whole page.
 The browser still promotes actual transforms when animation demands it. */
@media (max-width: 900px) {
.fx-orb, .hero-orb, .orb-parallax, .mandala-parallax,
.pillars article, .role, .edu, .cv-card, .campo-audio,
.campo-vortex, .hero-inner, .hero-mandala { will-change: auto; }
}


/* Universe-family signature: keep Yoga's existing title, lotus artwork and native palette. */
.hero-mandala{filter:drop-shadow(0 0 13px rgba(131,194,149,.27)) drop-shadow(0 0 32px rgba(125,173,129,.13))}
.hero .lotus-bloom{transform-box:fill-box;transform-origin:center}
@media(prefers-reduced-motion:reduce){.hero-mandala,.hero .lotus-bloom{animation:none}}


/* V9 · Cover contract: Identity → Promise → Symbol → Evidence → Action. */
.hero{isolation:isolate;overflow:hidden}
.hero-stage{position:relative;z-index:3}
.hero-inner h1{text-wrap:balance}
.hero-mandala{opacity:1;filter:brightness(1.12) drop-shadow(0 0 14px rgba(139,200,155,.43)) drop-shadow(0 0 38px rgba(111,171,140,.22))}
.mandala-parallax{pointer-events:none}
.hero-actions .btn{min-height:46px}
.hero-manifesto{position:relative;z-index:2}
@media(max-width:760px){.hero-mandala{max-width:100%;filter:drop-shadow(0 0 17px rgba(130,192,151,.35))}.hero-inner h1{max-width:100%}}
@media(prefers-reduced-motion:reduce){.hero-mandala{animation:none}}

/* V10: human signature in header, lotus and practice title own the cover. */
.brand-text b{font-size:clamp(.69rem,.83vw,.92rem)}

/* V85 release accessibility: stable AA ink on blended editorial surfaces.
 * Scoped specificity outranks earlier pale-sage decorative tokens. */
html[data-theme="light"] #trayectoria .v77-entry-training :is(.v77-entry-meta,.v77-entry-meta span,.v77-sub,.v77-entry p){color:#263e30}
html[data-theme="dark"] #trayectoria .v77-entry-training :is(.v77-entry-meta,.v77-entry-meta span,.v77-sub,.v77-entry p){color:#e2efdf}
html[data-theme="light"] #orientacion :is(.v80-topline,.v80-topline-end,.v80-header p,.v80-choice-number,.v80-choice-body small,.v80-route-steps a>span:first-child,.v80-fineprint,.v80-duration){color:#254331}
html[data-theme="dark"] #orientacion :is(.v80-topline,.v80-topline-end,.v80-header p,.v80-choice-number,.v80-choice-body small,.v80-route-steps a>span:first-child,.v80-fineprint,.v80-duration){color:#deecdf}
html[data-theme="light"] #demostracion :is(.v78-ticks,.v78-chapters button>span,.v78-chapters small,.v78-heading-aside,.v78-note){color:#304635}
html[data-theme="dark"] #demostracion :is(.v78-ticks,.v78-chapters button>span,.v78-chapters small,.v78-heading-aside,.v78-note){color:#e4eee3}
html[data-theme="light"] #studio-asana-library :is(.v82-lead,.v82-disclaimer,.v82-safety p,.v81-tracks small,.v81-results){color:#324737}
html[data-theme="dark"] #studio-asana-library :is(.v82-lead,.v82-disclaimer,.v82-safety p,.v81-tracks small,.v81-results){color:#e3eee4}