/* Nolabel Immersive (owner, 6 Oct): one fixed screen, a multilayer Sri Yantra. The page never scrolls: the six layers of the
   yantra (bindu to gates) hold the content; body[data-layer] says which is forward. Light and dark follow the system
   (html[data-theme] overrides). The cards are printed paper with fixed inks, as the v3 comic was; the page round them is themed. */
:root { --paper: #F3E7C9; --ink: #2A170A; --ink-2: #4E3218; --ink-3: #7A5A36; --accent: #A9301B; --gold: #E8B84A; --gold-2: #9C7536; --gold-3: #F2C14E; --rule: rgba(120, 80, 40, .26);
  --k: #1C1108; --k2: #4A2E14; --pp: #F6EBCF; --cap: #F2D98A; --bub: #FFFBF0; --verm: #A02D18; --blue: #1F3A6B; --dots: rgba(28, 17, 8, .16);
  --yk: #2A170A; --yp: #FBF3DD; --yg: #E8B84A; --yv: #A02D18; --yb: #688DC2; --ys: #D2A06C; --yt: #C8884A; --yn: #1F3A6B; --yw: #FFFBF0;
  --card-shadow: 4px 5px 0 rgba(28, 17, 8, .28); --grain-op: .55; --grain-blend: multiply; --glow: rgba(255, 220, 120, .9);
  --top: 104px; --base: 86px; --sw: 660px; --sh: calc(100vh - var(--top) - var(--base)); --rw: 540px; --bead: #9C7536; color-scheme: light; }
@media (prefers-color-scheme: dark) { html:not([data-theme="light"]) { --paper: #16100A; --ink: #F0E3C7; --ink-2: #D7C29C; --ink-3: #A88F68; --accent: #EC8467; --gold: #D9AE5C; --gold-2: #D9AE5C; --rule: rgba(233, 196, 120, .16);
  --pp: #EEE0BF; --card-shadow: 0 0 0 1.5px rgba(217, 174, 92, .55), 5px 6px 0 rgba(0, 0, 0, .6); --grain-op: .22; --grain-blend: screen; --bead: #D9AE5C; color-scheme: dark; } }
html[data-theme="dark"] { --paper: #16100A; --ink: #F0E3C7; --ink-2: #D7C29C; --ink-3: #A88F68; --accent: #EC8467; --gold: #D9AE5C; --gold-2: #D9AE5C; --rule: rgba(233, 196, 120, .16);
  --pp: #EEE0BF; --card-shadow: 0 0 0 1.5px rgba(217, 174, 92, .55), 5px 6px 0 rgba(0, 0, 0, .6); --grain-op: .22; --grain-blend: screen; --bead: #D9AE5C; color-scheme: dark; }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
html.js, html.js body { overflow: hidden; overscroll-behavior: none; }
html.js body { position: fixed; inset: 0; width: 100%; height: 100%; height: 100dvh; touch-action: none; -webkit-tap-highlight-color: transparent; }
body { background: var(--paper); color: var(--ink); font: 400 17px/1.5 Eczar, Georgia, serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  background-image: radial-gradient(ellipse at 20% 0%, rgba(255, 250, 232, .7), transparent 60%), radial-gradient(ellipse at 100% 100%, rgba(201, 168, 101, .22), transparent 55%); }
@media (prefers-color-scheme: dark) { html:not([data-theme="light"]) body { background-image: radial-gradient(ellipse at 20% 0%, rgba(120, 80, 30, .18), transparent 60%), radial-gradient(ellipse at 100% 100%, rgba(169, 48, 27, .10), transparent 55%); } }
html[data-theme="dark"] body { background-image: radial-gradient(ellipse at 20% 0%, rgba(120, 80, 30, .18), transparent 60%), radial-gradient(ellipse at 100% 100%, rgba(169, 48, 27, .10), transparent 55%); }
a { color: var(--accent); text-underline-offset: 3px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
img { max-width: 100%; -webkit-user-drag: none; user-select: none; -webkit-user-select: none; }
html.js .frame { user-select: none; -webkit-user-select: none; } html.js .layer.on .card, html.js .layer.on .guide, html.js .made { user-select: text; -webkit-user-select: text; }

/* ---- the frame: the app's red patterned border (a plate's edge) with the paper grain over everything */
.frame { position: absolute; inset: 0; border: 16px solid transparent; overflow: hidden;
  border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Crect width='48' height='48' fill='%23A02D18'/%3E%3Crect x='6' y='6' width='36' height='36' fill='none' stroke='%23E8B84A' stroke-width='2'/%3E%3Cg fill='%23F6EBCF'%3E%3Cpath d='M24 2 l5 4 l-5 4 l-5-4z'/%3E%3Cpath d='M24 38 l5 4 l-5 4 l-5-4z'/%3E%3Cpath d='M2 24 l4-5 l4 5 l-4 5z'/%3E%3Cpath d='M38 24 l4-5 l4 5 l-4 5z'/%3E%3C/g%3E%3Cg fill='%23E8B84A'%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Ccircle cx='36' cy='12' r='2'/%3E%3Ccircle cx='12' cy='36' r='2'/%3E%3Ccircle cx='36' cy='36' r='2'/%3E%3C/g%3E%3Crect x='14' y='14' width='20' height='20' fill='%237A1F10'/%3E%3Cpath d='M24 16 l6 8 l-6 8 l-6-8z' fill='%23A02D18' stroke='%23E8B84A' stroke-width='1.2'/%3E%3C/svg%3E") 14 round; }
.frame::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 9; opacity: var(--grain-op); mix-blend-mode: var(--grain-blend);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .2 0 0 0 0 .1 0 0 0 .18 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23g)'/%3E%3C/svg%3E"); }

/* ---- the brand: the two site links, the Hindi strip, the name, the sound switch */
.brand { position: absolute; left: 0; right: 0; top: 0; height: var(--top); z-index: 6; text-align: center; pointer-events: none; }
.brand > * { pointer-events: auto; }
.top { position: absolute; left: 14px; right: 14px; top: 10px; display: flex; justify-content: space-between; font: 600 15px/1.2 Eczar, serif; }
.top a { text-decoration: none; color: var(--ink-2); } .top .back { color: var(--ink); font-weight: 700; } .top .back::before { content: '‹ '; } .top .src { margin-right: 150px; }
.mast { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); width: max-content; max-width: 70%; }
.strip { display: inline-block; margin: 0 0 4px; padding: 3px 12px 2px; background: var(--verm); color: #FBEFD3; font: 400 14px/1.4 'Tiro Devanagari Hindi', 'Noto Serif Devanagari', serif; letter-spacing: .02em; clip-path: polygon(2% 0, 100% 6%, 98% 100%, 0 92%); }
.strip i { font-style: normal; opacity: .8; }
h1 { margin: 0; font: 800 30px/1 Eczar, serif; letter-spacing: .02em; text-transform: uppercase; color: var(--ink); }
h1 .h1-sub { display: block; margin-top: 3px; font: italic 500 15px/1.2 'EB Garamond', Georgia, serif; text-transform: none; letter-spacing: 0; color: var(--ink-2); }
.snd { position: absolute; right: 12px; top: 4px; display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 6px; border: 0; background: none; color: var(--ink); cursor: pointer; font: 600 12.5px/1 Eczar, serif; }
.snd svg { width: 22px; height: 22px; } .snd .x { opacity: 0; } .snd .wv { transition: opacity .2s; } .snd.off .x { opacity: 1; } .snd.off .wv { opacity: 0; }
.snd .hint { color: var(--accent); } .snd.on .hint, .snd.off .hint { display: none; }
.snd:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }

/* ---- the scene: the yantra in CSS 3D. The rig turns with a drag (--spin); the camera (--tilt, --zoom, --rise) moves per layer */
.scene { position: absolute; left: 50%; top: var(--top); width: var(--sw); height: var(--sh); transform: translateX(-50%); perspective: 1700px; perspective-origin: 50% calc(var(--ry, 54%) - var(--rw) * .22); z-index: 1; }
.rig { position: absolute; left: 50%; top: var(--ry, 54%); --zs: calc(var(--rw) / 540px); width: var(--rw); aspect-ratio: 1; --spin: 0deg; --tilt: 58deg; --zoom: 1; --rise: 0px;
  transform: translate(-50%, -50%) translateY(var(--rise)) scale(var(--zoom)) rotateX(var(--tilt)) rotateZ(var(--spin)); transform-style: preserve-3d; transition: transform 1.1s cubic-bezier(.4, .1, .2, 1), width .9s cubic-bezier(.4, .1, .2, 1), top .9s cubic-bezier(.4, .1, .2, 1); }
.rig.drag, .fit .rig, .fit .pl, .fit .layer, .fit .bb { transition: none !important; }
.rig::after { content: ''; position: absolute; inset: -8%; border-radius: 50%; background: radial-gradient(ellipse at 50% 55%, rgba(28, 17, 8, .38), transparent 62%); transform: translateZ(-3px); }
body[data-layer="0"] .rig { --tilt: 48deg; --zoom: 1.1; --rise: 0px; }
body[data-layer="1"] .rig { --tilt: 53deg; --zoom: 1.05; --rise: 0px; }
body[data-layer="2"] .rig { --tilt: 58deg; --zoom: 1; --rise: 0px; }
body[data-layer="3"] .rig { --tilt: 60deg; --zoom: .98; --rise: 0px; }
body[data-layer="4"] .rig { --tilt: 62deg; --zoom: .95; --rise: 0px; }
body[data-layer="5"] .rig { --tilt: 64deg; --zoom: .9; --rise: 0px; }
.pl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; --lift: 0px; --z: 0px; opacity: 1;
  transform: translateZ(calc((var(--z) + var(--lift)) * var(--zs))); transform-style: preserve-3d; transition: transform 1s cubic-bezier(.4, .1, .2, 1), opacity .9s, filter .9s; }
.p0 { --z: 0px; } .p1 { --z: 26px; } .pf { --z: 27px; } .p2 { --z: 60px; } .p3 { --z: 96px; } .p4 { --z: 130px; } .pv { --z: 133px; } .p5 { --z: 150px; }
.p5 { inset: auto; left: 50%; top: 50%; width: 12%; height: 12%; transform: translate(-50%, -50%) translateZ(calc((var(--z) + var(--lift)) * var(--zs))); }
.pl { pointer-events: none; } .pl .hit { pointer-events: visiblePainted; cursor: pointer; transition: filter .7s, fill-opacity .7s; }
.pl .hit.lit { filter: drop-shadow(0 0 5px var(--glow)) drop-shadow(0 0 2px #FFF3C4) brightness(1.18); transition: filter .08s; }
.pl .tri.lit { fill-opacity: .95; fill: #FFD36A; transition: fill .08s, fill-opacity .08s; }
/* the layer forward: its plate lifts and glows; the plates above it fade and rise away; the ones beneath stay as the body */
.pl.fore { --lift: 22px; filter: drop-shadow(0 0 14px var(--glow)) drop-shadow(0 0 3px rgba(255, 236, 170, .8)); }
.pl.above { --lift: 120px; opacity: .16; }
.pv { opacity: 0; } .pv.fore, body[data-layer="2"] .pv { opacity: 1; }
.pf.above { opacity: .35; }
.pl .spin { transform-box: view-box; transform-origin: 0 0; }
.flow .dash { stroke-dasharray: 7 11; opacity: .95; stroke: #FFD86A; stroke-width: 3.4; }
.thread { opacity: .9; }
body:not([data-layer="2"]) .flow .dash { opacity: .5; }
.ripples { position: absolute; inset: 0; pointer-events: none; }
.rip { transform-box: fill-box; transform-origin: center; animation: rip .9s ease-out forwards; pointer-events: none; }
@keyframes rip { from { transform: scale(.2); opacity: .95; } to { transform: scale(1); opacity: 0; } }

/* the medallions on their pillars: discs that always face the reader */
.med { position: absolute; left: calc(50% + var(--x) / 560 * 100%); top: calc(50% + var(--y) / 560 * 100%); width: 0; height: 0; transform: translateZ(calc(26px * var(--zs))); transform-style: preserve-3d; transition: opacity .9s; opacity: .78; }
body[data-layer="2"] .med { opacity: 1; } body[data-layer="5"] .med { opacity: .28; }
.med .pillar { position: absolute; left: -2px; bottom: 0; width: 4px; height: calc(var(--h) * var(--zs)); background: linear-gradient(#7A5A36, #E8B84A 50%, #9C7536); transform-origin: 50% 100%; transform: rotateX(-90deg); border-radius: 2px; }
.med .disc { position: absolute; left: 0; top: 0; width: clamp(40px, 4.6vw, 66px); height: clamp(40px, 4.6vw, 66px); cursor: pointer; transform-origin: 0 0;
  transform: translateZ(calc(var(--h) * var(--zs))) rotateZ(calc(-1 * var(--spin))) rotateX(calc(-1 * var(--tilt))) translate(-50%, -62%); transition: filter .6s; }
.med .disc svg { display: block; width: 100%; height: 100%; overflow: visible; }
.med .disc.lit { filter: drop-shadow(0 0 8px var(--glow)); transition: filter .08s; }
.tag { position: absolute; left: 50%; bottom: calc(100% + 4px); transform: translateX(-50%); padding: 4px 9px 3px; background: var(--k); color: var(--gold-3); font: 700 12px/1.2 Eczar, serif; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; border-radius: 3px; opacity: 0; pointer-events: none; transition: opacity .2s; }
.tag::after { content: ''; position: absolute; left: 50%; top: 100%; margin-left: -5px; border: 5px solid transparent; border-top-color: var(--k); }
.disc:hover .tag, .disc.lit .tag, .disc.on .tag { opacity: 1; }
/* Valmiki at the bindu: a billboard whose pose changes with the layer */
.bb { position: absolute; left: 50%; top: 50%; margin: 0; width: 21%; transform-origin: 50% 100%; transform: translate(-50%, -100%) translateZ(calc(150px * var(--zs))) rotateZ(calc(-1 * var(--spin))) rotateX(calc(-1 * var(--tilt))); }
.bb { pointer-events: none; } .bb img { display: none; width: 100%; height: auto; }
body[data-layer="0"] .bb .for0, body[data-layer="1"] .bb .for1, body[data-layer="2"] .bb .for2, body[data-layer="3"] .bb .for3, body[data-layer="4"] .bb .for4, body[data-layer="5"] .bb .for5 { display: block; }
.bb.bub-om { width: clamp(170px, var(--rw) * .48, 260px); transform-origin: 0 0; transform: translateZ(calc(150px * var(--zs))) rotateZ(calc(-1 * var(--spin))) rotateX(calc(-1 * var(--tilt))) translate(calc(var(--rw) * .09), calc(var(--rw) * -.2)) translateY(-100%); transition: opacity .6s; pointer-events: auto; }
.bub-om .bub { font-size: 17px; line-height: 1.35; padding: 12px 16px 11px; }
.bub-om .bub .tail { top: auto; bottom: 10px; left: auto; right: calc(100% - 3px); width: 34px; height: 34px; }
body:not([data-layer="0"]) .bub-om { opacity: 0; pointer-events: none; }
@supports not (transform-style: preserve-3d) { .rig, .pl, .med, .med .disc, .bb { transform: none; } .rig { transform: translate(-50%, -50%); } .med .pillar { display: none; } .bb { transform: translate(-50%, -100%); } .bb.bub-om { transform: translate(10%, -140%); } }

/* ---- the layers: the content of each layer of the yantra; one forward at a time, the others recede (still in the DOM) */
.layers { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.layer { position: absolute; left: 0; right: 0; top: var(--top); bottom: var(--base); display: grid; grid-template-columns: minmax(0, 1fr) var(--sw) minmax(0, 1fr); align-items: center; gap: 0 10px; padding: 0 56px 0 20px;
  opacity: 0; visibility: visible; transform: translateY(18px); transition: opacity .7s ease-out, transform .9s cubic-bezier(.2, .8, .3, 1); pointer-events: none; }
.layer.on { opacity: 1; transform: none; }
.layer.on :is(.card, .guide, .made) { pointer-events: auto; }
.layer > :nth-child(1 of :is(.card, .made)) { grid-column: 1; justify-self: end; }
.layer > :nth-child(2 of :is(.card, .made)) { grid-column: 3; justify-self: start; }
.layer .sec-h ~ .card:nth-of-type(1) { grid-column: 1; justify-self: end; } .layer .sec-h ~ .card:nth-of-type(2) { grid-column: 3; justify-self: start; }
.layer > .sec-h { grid-column: 2; align-self: start; justify-self: center; margin: 6px 0 0; }
.card { position: relative; width: min(100%, 360px); padding: 16px 18px 16px; background: var(--pp); color: var(--k); border: 2.5px solid var(--k); border-radius: 6px; box-shadow: var(--card-shadow); }
.card::before { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: 4px; background-image: radial-gradient(circle at center, var(--dots) 1.2px, transparent 1.7px); background-size: 7px 7px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 100% 100%, #000 0%, transparent 70%); mask-image: radial-gradient(ellipse 80% 70% at 100% 100%, #000 0%, transparent 70%); }
.card > * { position: relative; }
.card p { margin: 0; }
.sec-h { display: inline-block; margin: 0 0 10px; padding: 4px 12px 3px; background: var(--cap); color: var(--k); border: 2.5px solid var(--k); font: 700 15px/1.15 Eczar, serif; text-transform: uppercase; letter-spacing: .04em; transform: rotate(-1.2deg); box-shadow: 3px 3px 0 var(--k); }
.card .sec-h { margin: -24px 0 8px -4px; }
.ct { margin: 0 0 6px; font: 700 20px/1.1 Eczar, serif; text-transform: uppercase; color: var(--verm); letter-spacing: .01em; transform: rotate(-1.5deg); transform-origin: left; }
.say { font: 400 17px/1.4 'EB Garamond', Georgia, serif; color: var(--k); text-wrap: pretty; }
.cap { display: block; padding: 8px 12px 7px; background: var(--cap); color: var(--k); border: 2.5px solid var(--k); font: 500 15.5px/1.42 Eczar, serif; box-shadow: 3px 3px 0 rgba(28, 17, 8, .22); text-wrap: pretty; }
.cap.big { font-size: 16.5px; }
.cap-t { display: block; font: 700 12.5px/1.3 Eczar, serif; letter-spacing: .14em; text-transform: uppercase; color: var(--verm); margin-bottom: 2px; }
.bub { position: relative; margin: 0; padding: 12px 16px 11px; background: var(--bub); color: var(--k); border: 3px solid var(--k); border-radius: 22px; font: 500 17.5px/1.38 Eczar, serif; text-wrap: pretty; }
.bub .tail { position: absolute; top: calc(100% - 3.5px); left: 22%; width: 36px; height: 36px; overflow: visible; }
.bub .tail path { fill: var(--bub); stroke: var(--k); stroke-width: 3; stroke-linejoin: round; }
.who { display: block; font: 700 12px/1.3 Eczar, serif; letter-spacing: .14em; text-transform: uppercase; color: var(--verm); margin-bottom: 3px; }
.bub.sm { padding: 8px 12px 7px; border-radius: 16px; font-size: 15.5px; line-height: 1.3; } .bub.sm .who { font-size: 11px; } .bub.sm .tail { width: 26px; height: 26px; }
.bub.big { font: 700 20px/1.2 Eczar, serif; padding: 12px 18px 11px; border-width: 3.5px; background: #FFF4D2; }
.bub .t-up ~ *, .g-vote .bub .tail { top: auto; bottom: calc(100% - 3.5px); left: 38%; }
.g-jat .bub .tail { top: 30%; left: auto; right: calc(100% - 3px); }
.cta { display: flex; justify-content: center; margin: 22px 0 0 !important; } .cta.l { justify-content: flex-start; margin-top: 14px !important; }
.open { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 22px 8px; background: var(--verm); color: #FFF4DC; border: 3px solid var(--k); border-radius: 999px; box-shadow: 4px 5px 0 var(--k);
  font: 700 17px/1 Eczar, serif; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; transition: transform .12s, box-shadow .12s; }
.open:hover { transform: translate(-1px, -1px); box-shadow: 5px 6px 0 var(--k); } .open:active { transform: translate(3px, 4px); box-shadow: 1px 1px 0 var(--k); } .open:focus-visible { outline: 3px dashed var(--k); outline-offset: 4px; }
.fig { margin: 0; } .fig img { display: block; width: 100%; height: auto; }
.fig.side { position: absolute; right: -14px; bottom: -6px; width: 92px; pointer-events: none; }
.hero { padding-bottom: 20px; } .hero .bub { font-size: 20px; line-height: 1.35; margin-bottom: 26px; }
.omp .art { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: 14px; }
.omp .fig.head { flex: 0 0 72px; } .omp .bowl { width: 120px; flex: 0 1 120px; height: auto; } .omp .waves { width: min(200px, 68%); height: auto; }
.hz { margin: 0; font: 700 38px/1 Eczar, serif; color: var(--verm); -webkit-text-stroke: 1.2px var(--k); transform: rotate(-3deg); white-space: nowrap; } .hz small { font-size: .45em; margin-left: 3px; -webkit-text-stroke: 0; color: var(--k); }
/* the engines list (the names of the thirteen medallions) */
.eng { width: min(100%, 300px); padding: 24px 14px 12px; }
.tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 8px; }
.tile { display: flex; align-items: center; gap: 6px; padding: 4px 6px 3px; background: var(--bub); border: 2px solid var(--k); border-radius: 6px; box-shadow: 2px 2px 0 var(--k); }
.tile .n { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--k); color: #F2C14E; border: 1.5px solid #E8B84A; font: 700 12px/1 Eczar, serif; }
.tile .ic { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--k); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.tile .nm { font: 700 13px/1.1 Eczar, serif; color: var(--k); }
/* the guides round the machine (layer 2) */
.guide { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.guide .fig { width: 120px; } .guide .fig.head { width: 76px; }
.g-jat { flex-direction: row; align-items: center; gap: 8px; right: calc(50% + var(--sw) / 2 - 150px); top: -2px; }
.g-jat .fig.jat { width: 190px; aspect-ratio: 12 / 5; overflow: hidden; } .g-jat .fig.jat img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 49%; }
.g-gar { left: calc(50% - var(--sw) / 2 + 20px); bottom: 10px; } .g-van { right: calc(50% - var(--sw) / 2 + 20px); bottom: 10px; }
.g-vote { grid-column: 3; justify-self: start; position: relative; align-items: flex-start; gap: 22px; width: min(100%, 340px); }
.g-vote .fig.head { order: -1; margin-left: 24%; }
/* version one, one world */
.v1 .road { display: block; width: 100%; height: auto; margin-top: 24px; } .one .worlds { display: block; width: 70%; height: auto; margin-top: 24px; }
.v1 .bub, .one .bub, .diwali .bub { margin-bottom: 4px; }
/* the invitation and Diwali */
.inv .cta.l { min-height: 92px; align-items: flex-end; margin-right: 90px; } .inv .fig.side { width: 92px; right: -6px; bottom: -4px; }
.diwali { background: radial-gradient(ellipse 70% 55% at 50% 100%, rgba(232, 128, 42, .45), transparent 70%), linear-gradient(#1E1838, #3A2240); color: #FFF4DC; border-color: #0E0A1C; }
.diwali::before { background-image: radial-gradient(circle at center, rgba(255, 233, 168, .35) 1.1px, transparent 1.6px); background-size: 13px 11px; mask-image: none; -webkit-mask-image: none; }
.diwali .sparks { position: absolute; top: 4px; left: 0; width: 100%; height: auto; opacity: .9; } .diwali .bub { margin-top: 36px; }
.dw-art { display: flex; align-items: flex-end; justify-content: center; margin-top: 26px; } .dw-art .fig { width: 120px; } .dw-art .fig img { transform: scaleX(-1); } .diya { width: 72px; height: auto; margin: 0 0 8px -12px; flex: none; overflow: visible; }
/* made with, who we are */
.made { margin: 0; padding: 14px 18px; text-align: center; width: min(100%, 340px); background: var(--k); color: #F6EBCF; border: 2.5px solid #E8B84A; box-shadow: 5px 6px 0 var(--verm); font: italic 400 16px/1.45 'EB Garamond', Georgia, serif; text-wrap: balance; }
.made b { font: normal 700 1.02em/1.4 Eczar, serif; color: #F2C14E; letter-spacing: .02em; }
.whoc { width: min(100%, 380px); padding: 22px 16px 14px; }
.burst { position: relative; float: right; display: grid; place-items: center; width: 118px; aspect-ratio: 1; margin: -4px -4px 4px 8px; text-align: center; shape-outside: circle(50% at 50% 50%); shape-margin: 8px; }
.burst svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.burst .b1 { fill: var(--verm); stroke: var(--k); stroke-width: 4; stroke-linejoin: round; } .burst .b2 { fill: #F2C14E; stroke: var(--k); stroke-width: 3; stroke-linejoin: round; }
.burst .bt { position: relative; display: block; width: 60%; margin: 0; color: var(--k); font: 700 9px/1.15 Eczar, serif; text-transform: uppercase; letter-spacing: .04em; }
.burst .bs { display: block; font-size: 12px; line-height: 1.05; margin: 2px 0; }
.whoc .cap { font-size: 13.5px; line-height: 1.38; padding: 7px 10px 6px; } .whoc .cap::after { content: ""; display: block; clear: both; }
.contact { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 12px; margin-top: 10px; font: 500 13.5px/1.4 Eczar, serif; color: var(--k2); }
.contact .logo { display: block; width: 120px; height: auto; } .contact .logo-w { display: none; } .contact p { margin: 0; } .contact a { color: var(--verm); }

/* ---- the rail of beads: one per layer, the active one named */
.rail { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); z-index: 5; display: flex; flex-direction: column; gap: 14px; }
.bead { position: relative; width: 22px; height: 22px; padding: 0; border: 0; background: none; cursor: pointer; }
.bead::before { content: ''; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--bead); border: 1.5px solid var(--ink); transition: transform .3s, background .3s; }
.bead.on::before { transform: translate(-50%, -50%) scale(1.6); background: var(--gold-3); }
.bead .lb { position: absolute; right: calc(100% + 4px); top: 50%; transform: translateY(-50%); white-space: nowrap; font: 700 11px/1 Eczar, serif; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); opacity: 0; transition: opacity .3s; }
.bead:hover .lb, .bead:focus-visible .lb { opacity: 1; } .bead:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 50%; }

/* ---- the base: the five icons (no words) and the site's pages */
.base { position: absolute; left: 0; right: 0; bottom: 0; height: var(--base); z-index: 6; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; padding-bottom: 8px; color: var(--ink-2); }
.follow .rl-social { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; gap: 10px; }
.follow a { display: grid; place-items: center; width: 42px; height: 42px; border: 2px solid currentColor; border-radius: 50%; color: inherit; opacity: .85; }
.follow a:hover, .follow a:focus-visible { opacity: 1; color: var(--accent); } .follow a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; } .follow svg { display: block; width: 20px; height: 20px; }
.pages { font: 600 13px/1.3 Eczar, serif; letter-spacing: .03em; color: var(--ink-2); } .pages a { color: inherit; text-decoration: none; } .pages a:hover { color: var(--accent); text-decoration: underline; }

/* ---- motion: the rings turn, the bindu breathes, the flows run; calmer with reduced motion (nothing turns on its own) */
@media (prefers-reduced-motion: no-preference) {
  .anim .p2 .spin { animation: spinA 120s linear infinite; } .anim .p3 .spin { animation: spinB 90s linear infinite; }
  @keyframes spinA { to { transform: rotate(360deg); } } @keyframes spinB { from { transform: rotate(360deg); } to { transform: rotate(0deg); } }
  .anim .p5 .glow { transform-box: fill-box; transform-origin: center; animation: breathe 3.6s ease-in-out infinite; } @keyframes breathe { 50% { transform: scale(1.5); opacity: .6; } }
  .anim body[data-layer="2"] .flow .dash, body[data-layer="2"] .anim .flow .dash { animation: dash 2.4s linear infinite; } @keyframes dash { to { stroke-dashoffset: -36; } }
  body[data-layer="2"] .thread { animation: votes 1.6s linear infinite; } @keyframes votes { to { stroke-dashoffset: -22; } }
  .anim .med .disc svg { animation: lift 13s ease-in-out infinite; animation-delay: calc(var(--i) * -1s); } @keyframes lift { 0%, 100% { transform: translateY(0); } 4% { transform: translateY(-5px); } 8% { transform: translateY(0); } }
  .diya .flame, .diya .halo { transform-box: fill-box; transform-origin: 50% 100%; animation: flick 1.4s ease-in-out infinite alternate; }
  @keyframes flick { 0% { transform: scale(1, 1) skewX(0); } 40% { transform: scale(.94, 1.05) skewX(-3deg); } 100% { transform: scale(1.03, .97) skewX(2deg); } } }
@media (prefers-reduced-motion: reduce) { .rig, .pl, .layer { transition-duration: .3s; } .rip { animation-duration: .5s; } }

/* ---- the phone (portrait): the yantra in the upper part, the layer's cards beneath, nothing scrolls */
@media (max-width: 760px) {
  :root { --top: 86px; --base: 84px; --sw: 100vw; --sh: 250px; --rw: 226px; }
  .top { left: 10px; right: 10px; top: 8px; font-size: 13px; } .top .src { margin-right: 118px; }
  .mast { top: 26px; max-width: 86%; } .strip { font-size: 11.5px; padding: 2px 9px 1px; margin-bottom: 2px; }
  h1 { font-size: 21px; } h1 .h1-sub { font-size: 12.5px; margin-top: 2px; }
  .snd { right: 6px; top: 2px; height: 28px; } .snd svg { width: 20px; height: 20px; } .snd .hint { font-size: 11px; }
  .scene { perspective: 1200px; }
  body[data-layer="0"] .rig { --zoom: 1.2; --rise: 4%; } body[data-layer="1"] .rig { --zoom: 1.08; --rise: 2%; } body[data-layer="5"] .rig { --zoom: .88; }
  .pl.fore { --lift: 18px; } .pl.above { --lift: 80px; } .bb { width: 24%; }
  .med .disc { width: calc(var(--rw) * .15); height: calc(var(--rw) * .15); } .rig { --zs: calc(var(--rw) / 420px); }
  .layer { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto auto; align-items: end; align-content: stretch; gap: 8px; padding: 0 12px 6px; }
  .layer > :is(.card, .made, .g-vote) { grid-column: 1 !important; justify-self: center !important; width: 100%; }
  .layer > .sec-h { display: none; }
  .layer > :nth-child(1 of :is(.card, .made, .g-vote)) { grid-row: 2; } .layer > :nth-child(2 of :is(.card, .made, .g-vote)) { grid-row: 3; }
  .card { padding: 10px 10px 10px; border-width: 2px; } .card .sec-h { margin: -18px 0 4px -2px; }
  .sec-h { font-size: 12px; padding: 3px 9px 2px; border-width: 2px; box-shadow: 2px 2px 0 var(--k); }
  .hero { margin-top: 4px; } .hero .bub { font-size: 16.5px; line-height: 1.32; margin-bottom: 22px; } .cta { margin-top: 18px !important; } .open { min-height: 40px; font-size: 15px; padding: 8px 18px 6px; }
  .ct { font-size: 15px; margin-bottom: 3px; } .say { font-size: 13.5px; line-height: 1.32; }
  .omp .art { margin-top: 6px; } .omp .fig.head { flex-basis: 48px; } .omp .bowl { width: 84px; flex-basis: 84px; } .omp .waves { width: 150px; } .hz { font-size: 26px; }
    .eng { width: 100%; padding: 10px 8px 8px; } .tiles { grid-template-columns: 1fr 1fr; gap: 4px 6px; } .tile { padding: 2px 5px 1px; gap: 5px; min-width: 0; box-shadow: 1.5px 1.5px 0 var(--k); border-width: 1.5px; } .tile .n { width: 19px; height: 19px; font-size: 11px; } .tile .ic { display: none; } .tile .nm { font-size: 13px; white-space: nowrap; }
  .guide { gap: 8px; } .guide .fig { width: 52px; } .guide .fig.head { width: 44px; }
  .g-jat { right: 4px; top: 2px; } .g-jat .fig.jat { width: 92px; }
  .g-gar, .g-van { top: calc(var(--sh) * .52) !important; } .bub.sm { padding: 5px 9px 4px; font-size: 13px; border-width: 2.5px; border-radius: 12px; } .bub.sm .who { font-size: 10.5px; letter-spacing: .1em; } .bub.sm .tail { width: 18px; height: 18px; }
  .g-gar { left: 4px; bottom: auto; } .g-van { right: 4px; bottom: auto; }
  .g-vote { position: relative; flex-direction: row; align-items: center; gap: 10px; width: 100%; } .g-vote .fig.head { order: 0; margin: 0; width: 48px; flex: none; }
  .g-vote .bub.big { font-size: 15.5px; padding: 8px 12px 7px; border-width: 2.5px; } .g-vote .bub .tail { top: 30%; bottom: auto; left: auto; right: calc(100% - 3px); width: 22px; height: 22px; } .g-vote .bub .tail path { d: path('M44 6 L2 30 L44 38'); }
  .layer.l2 > :nth-child(1 of :is(.card, .made, .g-vote)) { grid-row: 3; } .layer.l2 .g-vote { grid-row: 2; }
  .bub { font-size: 14px; padding: 8px 12px 7px; border-width: 2.5px; border-radius: 16px; } .bub .tail { width: 26px; height: 26px; } .who { font-size: 10.5px; }
  .bb { width: 26%; } .bb.bub-om { width: min(236px, 70vw); transform: translateZ(calc(150px * var(--zs))) rotateZ(calc(-1 * var(--spin))) rotateX(calc(-1 * var(--tilt))) translate(-50%, calc(var(--rw) * -.37)) translateY(-100%); }
  .bub-om .bub .tail { top: calc(100% - 3px); bottom: auto; left: calc(50% - 12px); right: auto; width: 24px; height: 24px; } .bub-om .bub .tail path { d: path("M6 0 L32 42 L39 0"); } .bub-om .bub { font-size: 13px; line-height: 1.3; padding: 8px 10px 7px; } .bub-om .bub .tail { width: 24px; height: 24px; bottom: 8px; }
  .fig.side { display: none; } .v1, .one { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; } .v1 .sec-h, .one .sec-h { flex: 0 0 auto; width: 100%; } .v1 .bub, .one .bub { flex: 1 1 180px; margin: 0 0 16px; } .v1 .bub .tail, .one .bub .tail { left: 14%; } .v1 .road { flex: 0 0 120px; width: 120px; margin: 0; } .one .worlds { flex: 0 0 96px; width: 96px; margin: 0; }
  .inv { padding-right: 10px; } .cap.big { font-size: 13px; line-height: 1.3; padding: 5px 8px 4px; } .inv .cta.l { position: absolute; right: 6px; top: -16px; margin: 0 !important; min-height: 0; align-items: center; } .inv .open { min-height: 32px; font-size: 12.5px; padding: 5px 12px 3px; box-shadow: 3px 3px 0 var(--k); }
  .diwali .sparks { top: 0; width: 60%; left: 40%; } .diwali .bub { margin-top: 0; } .dw-art { margin-top: 2px; } .dw-art .fig { width: 42px; } .diya { width: 32px; margin-bottom: 3px; } .layer.l4 { gap: 6px; }
  .made { padding: 7px 10px; font-size: 13px; line-height: 1.3; width: 100%; box-shadow: 3px 4px 0 var(--verm); }
  .whoc { padding: 16px 10px 8px; } .burst { width: 96px; margin: -2px -2px 2px 6px; } .burst .bt { font-size: 7.5px; } .burst .bs { font-size: 10px; }
  .whoc .cap { font-size: 13px; line-height: 1.3; padding: 5px 8px 4px; } .contact { margin-top: 6px; font-size: 13px; gap: 2px 8px; } .contact .logo { width: 96px; }
  .rail { right: 6px; top: calc(var(--top) + var(--sh) * .35); transform: none; gap: 10px; } .bead { width: 18px; height: 18px; } .bead::before { width: 8px; height: 8px; } .bead .lb { display: none; }
  .base { gap: 3px; padding-bottom: 5px; } .follow .rl-social { gap: 8px; } .follow a { width: 34px; height: 34px; border-width: 1.5px; } .follow svg { width: 16px; height: 16px; } .pages { font-size: 12.5px; line-height: 1.25; padding: 0 10px; text-align: center; }
}
@media (min-width: 761px) and (max-height: 760px) { :root { --top: 92px; } }
/* a short phone (640 px tall): a tighter brand and base, slightly tighter plates, so the last layer still leaves the yantra a place */
@media (max-width: 760px) and (max-height: 700px) { :root { --top: 76px; --base: 76px; } .mast { top: 22px; } .strip { font-size: 11px; padding: 1px 8px 0; margin-bottom: 1px; } h1 { font-size: 19px; } h1 .h1-sub { font-size: 11.5px; margin-top: 1px; }
  .card { padding: 8px 9px 8px; } .made { padding: 6px 9px; font-size: 12.5px; line-height: 1.25; } .whoc .cap { font-size: 12.5px; line-height: 1.25; padding: 4px 7px 3px; } .burst { width: 84px; } .contact { margin-top: 4px; font-size: 12.5px; } .contact .logo { width: 80px; }
  .cap.big { font-size: 12.5px; line-height: 1.25; } .say { font-size: 13px; line-height: 1.25; } .base { gap: 2px; padding-bottom: 4px; } .pages { font-size: 12px; } .follow a { width: 30px; height: 30px; } .layer { gap: 6px; } }
@media (min-width: 761px) and (max-width: 1400px) { :root { --sw: 560px; } .card { width: min(100%, 330px); } .layer { padding: 0 48px 0 16px; } }
@media (min-width: 761px) and (max-width: 1100px) { :root { --sw: 500px; } .card { width: min(100%, 300px); } .whoc { width: min(100%, 320px); } }

/* ---- without JavaScript: the layers read as a plain page (the noscript list follows) */
html.nojs body { position: static; height: auto; overflow: auto; }
html.nojs .frame { position: relative; min-height: 100vh; } html.nojs .scene, html.nojs .rail, html.nojs .snd .hint { display: none; }
html.nojs .brand, html.nojs .layers, html.nojs .base, html.nojs .layer { position: relative; inset: auto; height: auto; opacity: 1; transform: none; display: block; padding: 16px; pointer-events: auto; }
html.nojs .top, html.nojs .snd { position: static; } html.nojs .layer > * { margin: 18px auto; } html.nojs .guide { position: static; } html.nojs .bb, html.nojs .mast { position: static; transform: none; }
.plain { max-width: 720px; margin: 0 auto 40px; padding: 0 16px; font: 400 16px/1.5 'EB Garamond', Georgia, serif; }