/* =======================================================================
   Kaalchakra site styles — shared by index.html and legal.html.

   Extracted from index.html when the legal pages were added: two pages
   cannot each carry their own copy of 32KB of CSS without drifting apart.
   ===================================================================== */

/* =====================================================================
   Kaalchakra — the site.

   Deliberately unlike the other Aitele ventures. Siddha, Samadhan, Abhedya
   and Sutra all share one house style: a cream ground, a sticky centred
   translucent pill-bar with the wordmark left and a rounded CTA right, and
   a twelve-column footer grid closing on a right-aligned copyright line.
   None of that appears here. This is an instrument, not a brochure, so the
   ground is ink, the navigation is a measured rail rather than a floating
   bar, nothing is pill-shaped, and the footer is a single scale with the
   colophon set beneath it. The type, palette and rules are the dial's own.
   ===================================================================== */

:root{
  --ground:#0A0C12; --ground-2:#070910; --panel:#12151F; --panel-2:#171B27;
  --rule:#262B3A;   --rule-soft:#1C2130;
  --ink:#E6DFCE;    --ink-2:#B9B3A3;   --dim:#857F6E;
  --brass:#C9A227;  --brass-hi:#F0D57E; --brass-dim:#6B571A;
  --sindoor:#D9482F; --jade:#4E9B7F; --soma:#7A6BA8;
  --display:'Marcellus','Times New Roman',serif;
  --body:'Alegreya Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --deva:'Tiro Devanagari Hindi','Nirmala UI',serif;
  --gutter:clamp(26px, 6.2vw, 148px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font:400 18px/1.78 var(--body); -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit}
h1,h2,h3{margin:0; font-family:var(--display); font-weight:400; letter-spacing:.005em}
p{margin:0}
.mono{font-family:var(--mono)}
.deva{font-family:var(--deva)}
.lbl{
  font:500 12px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase;
  color:var(--brass-dim);
}

/* ---- header : a full-bleed bar with feature tabs ---------------------- */
.site{
  position:sticky; top:0; z-index:50; background:rgba(7,9,16,.94);
  border-bottom:1px solid var(--rule); backdrop-filter:blur(10px);
}
.sitebar{
  max-width:none; margin:0 auto; padding:0 clamp(20px, 3.4vw, 64px);
  display:flex; align-items:center; gap:26px; height:66px;
}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none; flex:0 0 auto; color:var(--brass)}
.brand .mark{
  width:29px; height:29px; flex:0 0 auto; display:block;
  transition:transform .5s cubic-bezier(.22,.61,.36,1);
}
.brand .mark .needle{color:var(--brass-hi)}
.brand:hover .mark{transform:rotate(30deg)}
@media(prefers-reduced-motion:reduce){.brand .mark{transition:none}}
@media(max-width:430px){.brand .mark{width:25px; height:25px}}
.brand b{font:400 22px/1 var(--display); letter-spacing:.03em; color:var(--brass-hi)}
.brand b span{color:var(--dim)}
.brand em{font:400 12px/1 var(--deva); font-style:normal; color:var(--brass-dim)}
.tabs{display:none; align-items:center; gap:2px; margin-left:auto; min-width:0; overflow:hidden}
@media(min-width:1265px){.tabs{display:flex}}
@media(min-width:1265px) and (max-width:1519px){
  .tabs{gap:0}
  .tabs a{padding:9px 8px; font-size:13.5px}
  .sitebar{gap:18px}
}
.tabs a{
  padding:9px 12px; text-decoration:none; color:var(--dim);
  font:400 15px/1 var(--body); border-bottom:2px solid transparent;
  transition:color .18s, border-color .18s;
}
.tabs a:hover{color:var(--ink)}
.tabs a.on{color:var(--brass-hi); border-bottom-color:var(--brass)}
.sitecta{
  margin-left:auto; flex:0 0 auto; padding:11px 20px; text-decoration:none;
  border:1px solid var(--brass); background:rgba(201,162,39,.1); color:var(--brass-hi);
  font:500 11.5px/1 var(--mono); letter-spacing:.15em; text-transform:uppercase;
  transition:background .2s, box-shadow .2s; white-space:nowrap;
}
.sitecta .short, .sitecta .tiny{display:none}
@media(max-width:430px){
  .sitecta .long, .sitecta .short{display:none}
  .sitecta .tiny{display:inline}
  .sitecta{padding:10px 13px; letter-spacing:.1em}
}
@media(min-width:1265px) and (max-width:1519px){
  .sitecta .long{display:none}
  .sitecta .short{display:inline}
  .sitecta{padding:11px 15px; letter-spacing:.11em}
}
@media(min-width:1265px){.sitecta{margin-left:22px}}
.sitecta:hover{background:rgba(201,162,39,.22); box-shadow:0 0 24px rgba(201,162,39,.2)}
.burger{
  flex:0 0 auto; width:40px; height:40px; display:grid; place-items:center;
  border:1px solid var(--rule); background:transparent; color:var(--ink-2); cursor:pointer;
}
@media(min-width:1265px){.burger{display:none}}
.burger:hover{border-color:var(--brass-dim); color:var(--brass-hi)}
.drawer{display:none; border-top:1px solid var(--rule); background:var(--ground-2)}
.drawer.open{display:block}
@media(min-width:1265px){.drawer{display:none !important}}
.drawer nav{max-width:none; margin:0 auto; padding:8px clamp(20px, 3.4vw, 64px) 18px;
  display:grid; grid-template-columns:1fr 1fr; gap:0}
@media(max-width:520px){.drawer nav{grid-template-columns:1fr}}
.drawer a{
  padding:13px 14px; text-decoration:none; color:var(--ink-2);
  font-size:14.5px; border-bottom:1px solid var(--rule-soft);
}
.drawer a:hover{color:var(--brass-hi); background:var(--panel)}
.drawer a i{font-style:normal; font:500 9.5px/1 var(--mono); letter-spacing:.16em;
  color:var(--brass-dim); display:block; margin-bottom:5px}
/* ---- page ------------------------------------------------------------- */
.page{margin-left:0}
.band{padding:112px 0; border-bottom:1px solid var(--rule-soft)}
.band:last-of-type{border-bottom:0}

/* The wager, immediately under the hero. It carries the one claim the
   whole instrument rests on, so it reads as prose before it reads as
   cards — a slightly tighter measure than a full band, and the lede
   set larger than body copy. */
.thesis{background:var(--ground-2)}

/* The question is the setup and the answer is the punchline, so they are
   typeset as two different things rather than one paragraph of heading.
   The answer runs the full measure of the page — no max-width — because it
   is the one sentence the whole instrument is staked on. */
.thesis-q{margin:18px 0 0; font-size:clamp(17px,2vw,22px); line-height:1.4;
          color:var(--ink-2); letter-spacing:.01em}
.thesis-a{margin:10px 0 0; max-width:none;
          font:400 clamp(32px,4vw,48px)/1.14 var(--display);
          letter-spacing:-.008em; color:var(--brass-hi); text-wrap:balance}
/* the second half of the claim: what passing that test buys */
.thesis-proof{margin:24px 0 0; max-width:52ch;
              font-size:clamp(17px,2.1vw,23px); line-height:1.55; color:var(--ink)}
.thesis-cta{margin:28px 0 0}
.thesis-cta a{
  display:inline-block; padding:12px 22px; border:1px solid var(--brass-dim);
  font-family:var(--mono); font-size:12px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--brass-hi); text-decoration:none;
  transition:background .18s, border-color .18s;
}
.thesis-cta a:hover{background:rgba(240,213,126,.08); border-color:var(--brass)}

/* one sunrise to the next, as the schedule actually runs */
.swaraband{margin:46px 0 0}
/* Two rows: the schedule as the text gives it, and the same day after the
   chart has moved it. An even barcode would say 'a fixed hourly schedule',
   which is precisely what this is not — so the second row is uneven, and
   the offset between the two IS the claim. */
.sb-row{display:flex; align-items:center; gap:16px; margin-bottom:10px}
.sb-tag{
  flex:0 0 auto; width:64px; text-align:right;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--dim);
}
.sb-tag.on{color:var(--brass-hi)}
.sb-track{
  flex:1 1 auto; display:flex; height:46px; border:1px solid var(--rule);
  overflow:hidden;
}
.sb-track > i{
  display:block; min-width:0;
  border-right:1.5px solid rgba(240,213,126,.85);   /* Sushumna, at each handover */
}
.sb-track > i:last-child{border-right:0}
.sb-track > i.ida{background:rgba(122,107,168,.72)}
.sb-track > i.pin{background:rgba(217,72,47,.68)}
.sb-track.even{
  opacity:.42;
  background-image:
    repeating-linear-gradient(90deg, rgba(240,213,126,.85) 0 1.5px,
      transparent 1.5px calc(100%/24)),
    repeating-linear-gradient(90deg, rgba(122,107,168,.72) 0 calc(100%/24),
      rgba(217,72,47,.68) calc(100%/24) calc(100%/12));
}
.sb-axis{
  display:flex; justify-content:space-between; margin-top:9px;
  padding-left:80px;                       /* clears the row tags */
  font-family:var(--mono); font-size:11px; letter-spacing:.12em; color:var(--dim);
}
.sb-key{display:flex; flex-wrap:wrap; gap:8px 26px; margin-top:18px;
        font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; color:var(--ink-2)}
.sb-key span{display:inline-flex; align-items:center; gap:9px}
.sb-key i{width:12px; height:12px; flex:0 0 auto}
.sb-key i.ida{background:rgba(122,107,168,.72)}
.sb-key i.pin{background:rgba(217,72,47,.68)}
.sb-key i.sus{width:2px; height:14px; background:rgba(240,213,126,.85)}
.swaraband figcaption{margin:20px 0 0; max-width:62ch; font-size:15.5px;
                      line-height:1.75; color:var(--dim)}

/* the prose sits in two columns so it reads as a caption to the band above
   rather than as another wall under it */
.thesis-cols{margin-top:46px; display:grid; gap:26px 46px}
@media(min-width:900px){.thesis-cols{grid-template-columns:1fr 1fr; gap:26px 60px}}
.thesis .lede{margin:0; font-size:17.5px; line-height:1.82; color:var(--ink-2)}
.thesis .lede b{color:var(--ink); font-weight:500}
@media (max-width:720px){
  .thesis .lede{font-size:16px; line-height:1.78}
  .sb-track{height:38px}
  .sb-row{gap:10px}
  .sb-tag{width:44px; font-size:9px; letter-spacing:.1em}
  .sb-axis{padding-left:54px}
  .sb-mark{font-size:9.5px}
  .sb-axis span:nth-child(2), .sb-axis span:nth-child(4){display:none}
}
.inner{max-width:none; margin:0 auto; padding:0 var(--gutter); width:100%}
.wide{max-width:none}

/* ---- hero ------------------------------------------------------------- */
.hero{
  position:relative; min-height:88vh; display:flex; align-items:center;
  padding:88px 0; border-bottom:1px solid var(--rule-soft); overflow:hidden;
}
.hero .inner{position:relative; z-index:2; max-width:none}
.hero .inner > *{max-width:min(44ch, 38vw)}
@media(max-width:1119px){.hero .inner > *{max-width:none}}
.hero h1{
  font-size:clamp(40px,5.2vw,76px); line-height:1.06; letter-spacing:-.008em;
  max-width:14ch;
}
.hero h1 b{font-weight:400; color:var(--brass-hi)}
.hero .sub{
  margin-top:28px; max-width:54ch; font-size:21px; line-height:1.8; color:var(--ink-2);
}
.hero .meta{
  margin-top:42px; display:flex; flex-wrap:wrap; gap:12px 34px;
  font:400 13.5px/1.5 var(--mono); letter-spacing:.09em; color:var(--dim);
}
.hero .meta b{color:var(--brass); font-weight:500}
.builtby{
  margin-top:30px; font:400 13px/1 var(--mono); letter-spacing:.12em;
  text-transform:uppercase; color:var(--dim);
}
.builtby a{color:var(--brass-dim); text-decoration:none; border-bottom:1px solid var(--rule)}
.builtby a:hover{color:var(--brass-hi)}
.tabs a.ext{color:var(--brass-dim)}
.tabs a.ext:hover{color:var(--brass-hi)}
.heroart{
  position:absolute; right:var(--gutter); top:50%; transform:translateY(-50%);
  width:min(42vw, 640px); aspect-ratio:1; z-index:1; display:block;
  text-decoration:none; opacity:.92; transition:opacity .3s;
}
.heroart:hover{opacity:1}
.heroart iframe{
  width:100%; height:100%; border:0; display:block; pointer-events:none;
  background:transparent;
}
/* the frame is a link, so nothing inside it should take the click */
.heroart-veil{position:absolute; inset:0; display:block}
/* Below the two-column threshold the dial sits under the copy, centred and
   whole. It is the thing the page is about, so it is never cropped and
   never dimmed — only its size changes with the room available. */
@media(max-width:1119px){
  /* The dial stops being absolutely positioned here, so it would otherwise
     flow in DOM order and land above the headline. A flex column puts the
     copy first and the dial under it, which is the order the page argues in. */
  .hero{display:flex; flex-direction:column; min-height:0}
  .hero .inner{order:1}
  .heroart{order:2}
  .hero .inner > *{max-width:none}
  .heroart{
    position:relative; right:auto; top:auto; transform:none; opacity:1;
    width:min(72vw, 620px); max-width:100%; margin:52px auto 0;
  }
  .hero{padding-bottom:104px}
}
@media(max-width:900px){.heroart{width:min(86vw, 560px); margin-top:46px}}
@media(max-width:560px){
  /* Buy the dial its width back from the page padding rather than by
     bleeding past it — a negative margin here lands asymmetrically once
     aspect-ratio has had its say, and the dial ends up off one edge. */
  .hero .inner{padding-left:14px; padding-right:14px}
  .heroart{width:100%; max-width:none; margin:38px auto 0}
}
/* Under 380px every pixel of width buys back outer-ring legibility. */
@media(max-width:380px){
  .hero .inner{padding-left:10px; padding-right:10px}
  .heroart{margin-top:32px}
}
@media (prefers-reduced-motion:no-preference){
  .spin-a{animation:spin 260s linear infinite; transform-origin:500px 500px}
  .spin-b{animation:spin 150s linear infinite reverse; transform-origin:500px 500px}
  .spin-c{animation:spin 70s linear infinite; transform-origin:500px 500px}
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---- section heads ---------------------------------------------------- */
.head{margin-bottom:52px}
.head h2{font-size:clamp(32px,4vw,48px); line-height:1.14; max-width:20ch}
.head .deva{
  display:block; margin-top:12px; font-size:15px; color:var(--brass-dim); letter-spacing:.08em;
}
.head p{margin-top:22px; max-width:60ch; color:var(--ink-2); font-size:19px; line-height:1.8}

/* ---- the three readings ----------------------------------------------- */
.three{display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule)}
@media(min-width:860px){.three{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1500px){.feature{gap:70px}}
.card{background:var(--ground); padding:46px 42px 44px; display:flex; flex-direction:column}
.card .glyph{
  width:56px; height:56px; margin-bottom:26px; color:var(--brass); opacity:.92;
}
.card h3{font-size:30px; margin-bottom:6px}
.card .deva{font-size:14.5px; color:var(--brass-dim); letter-spacing:.08em}
.card p{margin-top:20px; color:var(--ink-2); font-size:17.5px; line-height:1.82; flex:1 1 auto}
.card .note{
  margin-top:26px; padding-top:18px; border-top:1px solid var(--rule-soft);
  font:400 13.5px/1.7 var(--mono); color:var(--dim); letter-spacing:.01em;
}

/* ---- the flow : three in, three out ----------------------------------- */
.flow{display:grid; gap:26px}
@media(min-width:900px){.flow{grid-template-columns:1fr 1fr 1fr}}
.out{border:1px solid var(--rule); background:var(--panel); padding:38px 34px 36px; position:relative}
.out::before{
  content:''; position:absolute; left:0; top:0; width:100%; height:2px;
}
.out.k::before{background:var(--jade)}
.out.g::before{background:var(--brass)}
.out.s::before{background:var(--soma)}
.out h3{font-size:20px}
.out .from{
  margin:12px 0 14px; font:400 11.5px/1.6 var(--mono); letter-spacing:.06em; color:var(--dim);
}
.out .from b{color:var(--brass); font-weight:500}
.out p{color:var(--ink-2); font-size:15px}

/* ---- feature bands : muhurta and jeevan -------------------------------- */
.feature{display:grid; gap:46px; align-items:stretch}
@media(min-width:1100px){
  .feature{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}
  .feature.rev .art{order:-1}
}
.feature h2{font-size:clamp(30px,3.6vw,44px); line-height:1.16}
.feature .deva{display:block; margin-top:10px; font-size:14px; color:var(--brass-dim)}
.feature p{margin-top:22px; color:var(--ink-2); font-size:18.5px; line-height:1.8}
.feature ul{margin:24px 0 0; padding:0; list-style:none}
.feature li{
  padding:14px 0 14px 24px; border-top:1px solid var(--rule-soft); position:relative;
  font-size:17px; line-height:1.75; color:var(--ink-2);
}
.feature li::before{
  content:''; position:absolute; left:2px; top:24px; width:8px; height:1px; background:var(--brass);
}
.feature li b{color:var(--ink); font-weight:500}
/* ---- the mock panels ---------------------------------------------------
   These were SVG with a fixed viewBox, so their type scaled with the
   column: at 560 units across, a 7px label came out around 6px on screen
   and none of it could actually be read. They are built from real elements
   now — the type is the size it says it is — and the panel stretches to
   stand level with the prose beside it rather than floating in the middle. */
.art{
  border:1px solid var(--rule); background:var(--panel-2); padding:32px;
  display:flex; flex-direction:column; min-width:0;
  container-type:inline-size; container-name:art;
}
.art .cap{
  margin-top:auto; padding-top:24px; font:400 13px/1.65 var(--mono);
  color:var(--dim); letter-spacing:.03em;
}
.mk{display:flex; flex-direction:column; gap:28px; font-family:var(--mono); min-width:0}
.mk > div{min-width:0}
.mk-h{
  font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--brass);
  padding-bottom:13px; border-bottom:1px solid var(--rule);
}
.mk-t{
  font-size:11.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--dim); margin-bottom:11px;
}
.mk-verdict{font:400 27px/1.25 var(--display); letter-spacing:.01em; margin-bottom:10px}
/* a scored figure standing beside its verdict */
.mk-verdict .of{
  display:block; margin-top:7px; font:400 13px/1.5 var(--mono);
  letter-spacing:.1em; color:var(--dim);
}
.mk-row{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:18px; align-items:baseline;
  padding:13px 0; border-top:1px solid var(--rule-soft);
  font-size:13.5px; line-height:1.55; color:var(--dim);
}
.mk-row b{
  font:400 18px/1.15 var(--mono); font-weight:400; white-space:nowrap;
  color:var(--ink); letter-spacing:.01em;
}
.mk-row .sw{
  display:inline-block; width:9px; height:9px; margin-right:9px; vertical-align:baseline;
}
.mk-win{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:9px 16px;
  align-items:baseline; padding:12px 0 12px 14px;
  border-top:1px solid var(--rule-soft); border-left:2px solid transparent; font-size:13.5px;
}
.mk-win b{grid-column:1; grid-row:1}
.mk-win .in{grid-column:2; grid-row:1}
.mk-win span:not(.tier):not(.in){grid-column:1; grid-row:2}
.mk-win .tier{grid-column:2; grid-row:2; justify-self:end}
/* The single-row form needs 493px of content in the track. Measured: a
   543px panel offers 463, and the time column is the one that gives — so
   the row stays stacked until the panel can actually seat it. */
@container art (min-width:600px){
  .mk-win{grid-template-columns:minmax(0,auto) auto 1fr auto; gap:5px 18px}
  .mk-win b, .mk-win .in, .mk-win span:not(.tier):not(.in), .mk-win .tier{
    grid-column:auto; grid-row:auto;
  }
  .mk-win .tier{justify-self:start}
  .mk-win .in{justify-self:end}
}
.mk-win b{
  font:400 19px/1.2 var(--mono); white-space:nowrap;
  color:var(--ink); letter-spacing:.01em;
}
.mk-win span{color:var(--dim); font-size:12.5px}
.mk-win .tier{
  justify-self:start; padding:5px 10px; border:1px solid currentColor;
  letter-spacing:.14em; font-size:10.5px; line-height:1;
}
.mk-win .in{justify-self:end; white-space:nowrap; font-size:13px; color:var(--ink-2)}
.mk-win.on{
  border-left-width:3px; border-left-color:var(--jade);
  background:rgba(78,155,127,.09); padding-left:16px;
}
.mk-win.on b{color:var(--jade); font-size:21px}
.mk-ev{
  display:flex; flex-direction:column; gap:5px; padding:13px 0 13px 14px;
  border-top:1px solid var(--rule-soft); border-left:2px solid transparent; font-size:13.5px;
}
.mk-ev b{font:400 23px/1.15 var(--display); letter-spacing:.01em; color:var(--ink)}
.mk-ev .when{color:var(--ink-2); font-size:14px; line-height:1.5}
.mk-ev span{color:var(--dim); font-size:12.5px; line-height:1.55}
.mk-ev.on{
  border-left-width:3px; border-left-color:var(--jade);
  background:rgba(78,155,127,.09); padding-left:16px;
}
.mk-ev.on b{color:var(--jade)}
.mk-src{
  display:grid; grid-template-columns:78px minmax(0,1fr); gap:18px; align-items:baseline;
  padding:11px 0; border-top:1px solid var(--rule-soft);
  font-size:13.5px; line-height:1.55; color:var(--ink-2);
}
.mk-src b{font:400 17px/1.3 var(--mono); color:var(--ink); font-weight:400}
.mk-glyph{
  display:inline-grid; place-items:center; width:30px; height:30px; margin-right:12px;
  border:1px solid var(--rule); color:var(--brass); font-size:15px; vertical-align:middle;
}
.mk-src i{
  font-style:normal; font-size:11.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--dim);
}
.good{color:var(--jade)} .warn{color:var(--brass)} .bad{color:var(--sindoor)}
.mk-bar{display:flex; height:36px; border:1px solid var(--rule); overflow:hidden}
.mk-bar.slim{height:22px}
.mk-seg{
  display:grid; place-items:center; min-width:0; overflow:hidden;
  font-size:11px; letter-spacing:.1em; color:var(--ink); white-space:nowrap;
}
.mk-scale{
  display:flex; justify-content:space-between; margin-top:9px;
  font-size:12px; color:var(--dim);
}
.mk-note{margin-top:13px; font-size:12.5px; line-height:1.65; color:var(--dim)}
.mk-hist{display:flex; align-items:flex-end; gap:9px; height:132px}
.mk-hist > div{flex:1; display:flex; flex-direction:column; height:100%; gap:7px; min-width:0}
.mk-hist .trk{flex:1; display:flex; align-items:flex-end; min-height:0}
.mk-hist i{display:block; width:100%}
.mk-hist em{font-style:normal; font-size:12px; color:var(--dim); text-align:center}
.mk-hist u{
  text-decoration:none; font:400 14px/1 var(--mono); color:var(--ink-2); text-align:center;
}
.mk-hist .pk u{color:var(--sindoor); font-size:16px}
/* the 100-year band, with the present moment standing on it */
.mk-track{position:relative}
.mk-now{position:absolute; top:-11px; bottom:-11px; width:2px; background:var(--brass-hi)}
.mk-now::before{
  content:''; position:absolute; left:-3px; top:-4px; width:8px; height:8px;
  border-radius:50%; background:var(--brass-hi);
}
.mk-now em{
  position:absolute; left:11px; top:-9px; font-style:normal;
  font-size:11px; letter-spacing:.16em; color:var(--brass-hi);
}
.mk-phases{display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:20px; font-size:12px}
@container art (max-width:469px){
  /* the band labels shrink to fit their own segment */
  .mk-seg{font-size:8px; letter-spacing:0}
  .mk-bar{height:30px}
  .mk-bar.slim{height:20px}
  /* the figures step down just enough to clear their column */
  .mk-verdict{font-size:23px}
  .mk-win b{font-size:16.5px}
  .mk-win.on b{font-size:17.5px}
  .mk-win .tier{padding:4px 7px; letter-spacing:.1em}
  .mk-ev b{font-size:21px}
  /* label and figure stack rather than fight over one line */
  .mk-row{grid-template-columns:minmax(0,1fr); gap:7px; padding:12px 0}
  .mk-row b{justify-self:start; white-space:normal}
  .mk-src{grid-template-columns:minmax(0,1fr); gap:6px}
  .mk-glyph{width:26px; height:26px; margin-right:9px; font-size:14px}
  .mk-hist{height:112px; gap:6px}
}
/* On a 360px phone the panel is 309px and the tier chip sets column two,
   leaving the time about 130px — a hair under what it needs. One more step
   down clears it; below this width nothing else on the row competes. */
@container art (max-width:379px){
  .mk-win b, .mk-win.on b{font-size:15.5px}
  .mk-win .tier{padding:4px 6px; font-size:10px; letter-spacing:.06em}
  .mk-win .in{font-size:12px}
}
.mk-legend{display:none}
@container art (max-width:359px){
  .art{padding:18px 16px}
  /* nothing on a window row can share a line at this width */
  .mk-win{grid-template-columns:minmax(0,1fr); gap:5px; padding-left:12px}
  .mk-win b, .mk-win .in, .mk-win span:not(.tier):not(.in), .mk-win .tier{
    grid-column:1; grid-row:auto; justify-self:start;
  }
  .mk-win.on{padding-left:14px}
  .mk-win b, .mk-win.on b{font-size:17px}
  .mk-verdict{font-size:21px}
  .art .cap{font-size:12px}
}
/* AMRITA needs 29px at 8px type and a segment is one eighth of the band,
   so the labels survive down to about 250px of panel and come off below
   that — with the sequence named underneath instead of sliced in half. */
@container art (max-width:255px){
  .mk-seg{font-size:0}
  .mk-legend{display:block; margin-top:11px; font-size:11.5px; line-height:1.7; color:var(--dim)}
  .mk-legend b{color:var(--ink-2); font-weight:400}
}
.mk-wheel{display:block; width:100%; max-width:186px; height:auto; margin:0 auto}
.mk-split{display:grid; gap:26px; align-items:start}
@container art (min-width:470px){.mk-split{grid-template-columns:186px minmax(0,1fr)}}

/* ---- the resolution ladder -------------------------------------------- */
.ladder{border-top:1px solid var(--rule)}
.rung{display:grid; gap:0; border-bottom:1px solid var(--rule)}
@media(min-width:760px){.rung{grid-template-columns:170px 1fr}}
.scaleno{
  padding:34px 28px 34px 0; font:500 13.5px/1.35 var(--mono); letter-spacing:.16em;
  text-transform:uppercase; color:var(--brass); border-right:1px solid var(--rule-soft);
}
@media(max-width:759px){.scaleno{border-right:0; padding:22px 0 0}}
.rungbody{padding:32px 0 32px 34px}
@media(max-width:759px){.rungbody{padding:10px 0 22px}}
.rungbody h3{font-size:22px; margin-bottom:10px}
.rungbody p{color:var(--ink-2); font-size:17px; line-height:1.78}
.rungbody p b{color:var(--ink); font-weight:500}
.src{
  margin-top:13px; font:400 11px/1 var(--mono); letter-spacing:.16em;
  text-transform:uppercase; color:var(--brass-dim);
}
.claim{
  margin-top:52px; padding:42px 44px; border:1px solid var(--rule); background:var(--panel);
}
.claim h3{font-size:24px; margin-bottom:18px}
.claim p{color:var(--ink-2); font-size:18px; line-height:1.8}
.claim b{color:var(--ink); font-weight:500}

/* ---- what makes it different ------------------------------------------
   This was a three-column table: a question, a typical app, and us — thirty
   cells, and the reader had to carry the question across two columns before
   the point landed. The same material reads far faster as claims: the
   verdict first, the evidence under it, and the thing it displaces set
   beneath in small type. Shorter, and nothing to cross-reference. */
.swaps{
  display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule); margin-top:30px;
}
@media(min-width:720px){.swaps{grid-template-columns:1fr 1fr}}
@media(min-width:1180px){.swaps{grid-template-columns:repeat(3,1fr)}}

/* This grid is pinned to two columns at every width above the phone,
   and carries exactly four cards. Three cards never tile into two
   columns and two never tile into three, so the shared responsive rule
   left an empty cell at one breakpoint or the other whatever the count.
   Fixing the columns and matching the card count to them is the only
   arrangement with no hole at any width. */
@media(min-width:720px){.thesis .swaps{grid-template-columns:1fr 1fr}}
.swap{background:var(--ground); padding:34px 32px 28px; display:flex; flex-direction:column}
.swap > i{
  font-style:normal; font:500 11px/1 var(--mono); letter-spacing:.22em; color:var(--brass-dim);
}
.swap h4{
  margin:17px 0 0; font:400 25px/1.28 var(--display);
  letter-spacing:.01em; color:var(--ink);
}
.swap h4 b{color:var(--brass-hi); font-weight:400}
.swap p{margin:15px 0 0; font-size:16.5px; line-height:1.78; color:var(--ink-2)}
.swap p em{color:var(--ink); font-style:italic}
.swap .not{
  margin-top:auto; padding-top:22px; display:grid; grid-template-columns:auto minmax(0,1fr);
  gap:10px; align-items:start; font:400 13px/1.65 var(--mono); color:var(--dim);
}
.swap .not::before{content:'×'; color:var(--sindoor); font-size:15px; line-height:1.5}
.swap.wide{grid-column:1/-1; background:var(--panel)}
@media(min-width:720px){
  .swap.wide{
    display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:10px 46px; align-items:start; padding:38px 32px 34px;
  }
  .swap.wide > i{grid-column:1/-1}
  .swap.wide h4, .swap.wide p{margin-top:15px}
  .swap.wide .not{margin-top:16px; padding-top:0; grid-column:2}
}
/* ---- provenance ------------------------------------------------------- */
.proof{display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule)}
@media(min-width:760px){.proof{grid-template-columns:1fr 1fr}}
@media(min-width:1400px){.proof{grid-template-columns:repeat(3,1fr)}}
.proof > div{background:var(--ground); padding:38px 34px 36px}
.proof h3{font-size:20px; margin-bottom:10px; color:var(--ink)}
.proof p{font-size:16.5px; color:var(--ink-2); line-height:1.76}
.proof .tick{color:var(--jade); font-family:var(--mono); font-size:13px}
.proof .cross{color:var(--sindoor); font-family:var(--mono); font-size:13px}

/* ---- closing CTA ------------------------------------------------------- */
.close{text-align:center}
.close h2{font-size:clamp(30px,4.4vw,52px); line-height:1.12; max-width:18ch; margin:0 auto}
.close p{margin:24px auto 0; max-width:52ch; color:var(--ink-2); font-size:19px; line-height:1.8}
.bigstart{
  display:inline-block; margin-top:40px; padding:18px 44px;
  border:1px solid var(--brass); background:rgba(201,162,39,.1); color:var(--brass-hi);
  text-decoration:none; font:500 13.5px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase;
  transition:background .2s, box-shadow .2s;
}
.bigstart:hover{background:rgba(201,162,39,.22); box-shadow:0 0 34px rgba(201,162,39,.25)}
.close .fine{margin-top:20px; font:400 12px/1.7 var(--mono); color:var(--dim)}

/* ---- contact form -----------------------------------------------------
   The one part of this site that talks to a server. Everything else runs in
   the visitor own browser, so the form says as much in its own note rather
   than leaving the privacy claim looking quietly broken. */
.contact{display:grid; gap:44px; align-items:start; margin-top:34px}
.contact > *{min-width:0}
.contact-say .direct a{overflow-wrap:anywhere}
@media(min-width:900px){.contact{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:60px}}
.contact-say h3{font-size:23px; margin:0 0 14px}
.contact-say p{color:var(--ink-2); font-size:17px; line-height:1.8; margin-bottom:18px}
.contact-say .direct{
  margin-top:26px; padding-top:22px; border-top:1px solid var(--rule);
  font:400 13.5px/1.9 var(--mono); color:var(--dim);
}
.contact-say .direct a{color:var(--brass-hi); text-decoration:none; border-bottom:1px solid var(--brass-dim)}
.cform{border:1px solid var(--rule); background:var(--panel); padding:36px 34px 32px}
.cgrid{display:grid; gap:20px}
@media(min-width:620px){.cgrid.two{grid-template-columns:1fr 1fr}}
.cfield{display:block; min-width:0}
.cfield > span{
  display:block; margin-bottom:9px; font:500 11px/1 var(--mono);
  letter-spacing:.18em; text-transform:uppercase; color:var(--dim);
}
.cfield > span i{font-style:normal; color:var(--brass)}
.cfield input, .cfield select, .cfield textarea{
  width:100%; box-sizing:border-box; padding:14px 15px;
  background:var(--ground); border:1px solid var(--rule); color:var(--ink);
  font:400 16px/1.6 var(--body); border-radius:0; -webkit-appearance:none; appearance:none;
  transition:border-color .16s, background .16s;
}
.cfield textarea{min-height:150px; resize:vertical}
.cfield select{font-family:var(--mono); font-size:14.5px; cursor:pointer}
.cfield input:focus, .cfield select:focus, .cfield textarea:focus{
  outline:none; border-color:var(--brass-dim); background:var(--ground-2);
}
.cfield input::placeholder, .cfield textarea::placeholder{color:#4a4740}
.cpot{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.csend{margin-top:26px; display:flex; flex-wrap:wrap; gap:16px 22px; align-items:center}
.csend button{
  padding:15px 30px; background:var(--brass); color:var(--ground-2);
  border:1px solid var(--brass); font:500 12px/1 var(--mono);
  letter-spacing:.18em; text-transform:uppercase; cursor:pointer;
  transition:background .16s, color .16s;
}
.csend button:hover{background:var(--brass-hi); border-color:var(--brass-hi)}
.csend button[disabled]{opacity:.5; cursor:default}
/* the floor exists to push this onto its own line, not to outgrow the
   form it sits in — at 320px the form is 183px wide */
.csend .fine{font:400 12.5px/1.7 var(--mono); color:var(--dim); flex:1; min-width:min(210px,100%)}
.cmsg{margin-top:20px; padding:15px 17px; font:400 14px/1.7 var(--mono); border:1px solid var(--rule)}
.cmsg.err{color:var(--sindoor); border-color:rgba(217,72,47,.45); background:rgba(217,72,47,.07)}
.cdone{padding:6px 0}
.cdone h3{margin:16px 0 12px; font-size:26px; color:var(--ink)}
.cdone p{color:var(--ink-2); font-size:17px; line-height:1.8}
.cdone a{color:var(--brass-hi); text-decoration:none; border-bottom:1px solid var(--brass-dim)}

/* ---- footer ----------------------------------------------------------- */
footer.site-foot{background:var(--ground-2); border-top:1px solid var(--rule); margin-top:0}
/* The footer opens on the mark itself, with the venture line set directly
   under it behind a rule — the same attribution the other Aitele sites
   carry, given room rather than buried in the copyright line. */
.foothead{
  padding:82px var(--gutter) 46px; display:grid; gap:40px 64px; align-items:end;
  border-bottom:1px solid var(--rule-soft);
}
@media(min-width:900px){.foothead{grid-template-columns:auto minmax(0,1fr)}}
.footlogo{display:flex; align-items:center; gap:16px}
.footmark .mark{
  width:46px; height:46px; flex:0 0 auto; display:block; color:var(--brass);
}
.footmark .mark .needle{color:var(--brass-hi)}
.footmark b{font:400 42px/1 var(--display); letter-spacing:.035em; color:var(--brass-hi)}
@media(max-width:560px){
  .footlogo{gap:13px}
  .footmark .mark{width:38px; height:38px}
  .footmark b{font-size:35px}
}
.footmark b span{color:var(--dim)}
.footmark .deva{
  display:block; margin-top:13px; font-family:var(--deva); font-size:16px;
  letter-spacing:.2em; color:var(--brass-dim);
}
.footmark .venture{
  display:block; margin-top:24px; padding-top:20px; border-top:1px solid var(--rule);
  font:400 13px/1.7 var(--mono); letter-spacing:.09em; color:var(--dim);
}
.footmark .venture a{
  color:var(--ink-2); text-decoration:none; border-bottom:1px solid var(--brass-dim);
  transition:color .16s;
}
.footmark .venture a:hover{color:var(--brass-hi)}
.footsay p{margin:0; max-width:54ch; font-size:17px; line-height:1.85; color:var(--dim)}
.footsay .stamp{
  margin-top:22px; display:inline-block; padding:8px 13px; border:1px solid var(--rule);
  font:400 11px/1 var(--mono); letter-spacing:.1em; color:var(--dim);
}
.socials{display:flex; flex-wrap:wrap; gap:8px; margin-top:24px}
.socials a{
  width:36px; height:36px; display:grid; place-items:center;
  border:1px solid var(--rule); color:var(--dim);
  transition:color .18s, border-color .18s, background .18s;
}
.socials a:hover{color:var(--brass-hi); border-color:var(--brass-dim); background:var(--panel)}
.footgrid{
  max-width:none; margin:0 auto; padding:52px var(--gutter) 58px;
  display:grid; gap:42px 34px; grid-template-columns:1fr;
}
@media(min-width:640px){.footgrid{grid-template-columns:1fr 1fr}}
@media(min-width:980px){.footgrid{grid-template-columns:repeat(3,1fr)}}
/* five columns since Legal joined them; three then five avoids a lone
   orphan column sitting under the others at middling widths */
@media(min-width:1200px){.footgrid{grid-template-columns:repeat(5,1fr)}}
@media(min-width:1400px){.footgrid{gap:46px 60px}}
.footcol h4{
  font:500 10.5px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase;
  color:var(--brass-dim); margin:0 0 18px; font-weight:500;
}
.footcol a{
  display:block; padding:8px 0; text-decoration:none; color:var(--ink-2);
  font-size:16px; transition:color .16s;
}
.footcol a:hover{color:var(--brass-hi)}
.footnote{border-top:1px solid var(--rule)}
.footnote .in{max-width:none; margin:0 auto; padding:30px var(--gutter) 46px}
.footnote p{font-size:14.5px; line-height:1.85; color:var(--dim); max-width:92ch}
.footnote .row{
  margin-top:22px; display:flex; flex-wrap:wrap; gap:10px 26px;
  align-items:center; justify-content:space-between;
  font:400 11.5px/1.7 var(--mono); color:var(--dim);
}
.footnote a{color:var(--ink-2); text-decoration:none; border-bottom:1px solid var(--rule)}
.footnote a:hover{color:var(--brass-hi)}

/* ---- mobile ------------------------------------------------------------ */
@media(max-width:1264px){
  .sitebar{padding:0 20px; gap:14px; height:60px}
  .brand b{font-size:19px}
  .sitecta{padding:10px 14px; font-size:10.5px; letter-spacing:.12em}
}
@media(max-width:960px){
  .band{padding:74px 0}
  .card{padding:32px 26px 30px}
  .out{padding:28px 24px}
  .proof > div{padding:28px 24px}
  .hero{min-height:auto; padding:66px 0 78px}
  .foothead{padding:56px 22px 34px}
  .footgrid{padding:40px 22px 38px}
  .footnote .in{padding:22px 22px 36px}
  .claim{padding:24px 22px}
}
@media(max-width:520px){
  .brand em{display:none}
  .sitecta{padding:9px 11px; letter-spacing:.08em}
}

/* ---- the legal pages ---------------------------------------------------
   Long-form prose, so it takes a measure rather than the full width: past
   about 75 characters a line stops being readable however much room there
   is. Set on the site's own palette so the documents read as part of the
   product and not as boilerplate bolted on. */
.legal{max-width:78ch}
.legal h3{
  font:400 clamp(28px,3.4vw,38px)/1.18 var(--display); color:var(--ink);
  margin:0 0 6px; letter-spacing:.01em;
}
.legal h4{
  margin:38px 0 12px; font:500 12px/1.4 var(--mono); letter-spacing:.18em;
  text-transform:uppercase; color:var(--brass);
}
.legal p{margin:0 0 16px; font-size:17.5px; line-height:1.85; color:var(--ink-2)}
.legal b{color:var(--ink); font-weight:500}
.legal em{color:var(--ink); font-style:italic}
.legal a{color:var(--brass-hi); text-decoration:none; border-bottom:1px solid var(--brass-dim)}
.legal a:hover{color:var(--ink)}
.legal ul{margin:0 0 16px; padding:0; list-style:none}
.legal li{
  padding:11px 0 11px 24px; border-top:1px solid var(--rule-soft); position:relative;
  font-size:16.5px; line-height:1.8; color:var(--ink-2);
}
.legal li::before{
  content:''; position:absolute; left:2px; top:22px; width:8px; height:1px; background:var(--brass);
}
.legal code{
  font:400 14px/1 var(--mono); color:var(--brass-hi);
  background:var(--panel); border:1px solid var(--rule); padding:3px 6px; border-radius:2px;
}
.legalmeta{font:400 13px/1 var(--mono); color:var(--dim); letter-spacing:.06em; margin-bottom:26px}
.legaladdr{font:400 15px/1.9 var(--mono); color:var(--ink-2)}
.backlink{font-family:var(--mono); font-size:14px}

/* the one paragraph in each document that must not be skimmed past */
.legalcall{
  margin:0 0 26px; padding:20px 22px; border:1px solid var(--rule);
  border-left:3px solid var(--brass); background:var(--panel);
  font-size:17px; line-height:1.8; color:var(--ink-2);
}
.legalcall b{color:var(--brass-hi); font-weight:400}
.legalcall.warn{border-left-color:var(--sindoor)}
.legalcall.warn b{color:var(--sindoor)}

.legalnav{display:flex; flex-wrap:wrap; gap:2px; border-bottom:1px solid var(--rule)}
.legalnav a{
  padding:12px 18px; text-decoration:none; color:var(--dim);
  font:500 12px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase;
  border-bottom:2px solid transparent; transition:color .16s, border-color .16s;
}
.legalnav a:hover{color:var(--ink-2)}
.legalnav a.on{color:var(--brass-hi); border-bottom-color:var(--brass)}
@media(max-width:520px){.legalnav a{padding:10px 11px; font-size:11px; letter-spacing:.08em}}

/* on a legal page the sections are one document, not separate pitches */
#terms, #privacy, #disclaimer, #contactlegal{padding:56px 0}
#legaltop{padding-bottom:0; border-bottom:0}


/* =====================================================================
   guide.html — how to read the dial
   The same captured plate repeated once per component, each with a
   highlight annulus and a leader line drawn over it in the dial’s own
   1000-unit coordinates, so a mark always lands on the ring it names.
   ===================================================================== */
.guidetop{background:var(--ground-2); padding-bottom:72px}
.dg-title{margin:18px 0 0; max-width:none;
          font:400 clamp(32px,4vw,48px)/1.14 var(--display);
          letter-spacing:-.008em; color:var(--brass-hi)}
.dg-lede{margin:20px 0 0; max-width:74ch; font-size:17.5px; line-height:1.82;
         color:var(--ink-2)}
.dg-lede b{color:var(--ink); font-weight:500}

.dg-toc{display:grid; gap:1px; margin-top:38px;
        background:var(--rule); border:1px solid var(--rule)}
@media(min-width:640px){.dg-toc{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1020px){.dg-toc{grid-template-columns:repeat(3,1fr)}}
.dg-toc a{display:block; padding:13px 16px; background:var(--ground);
          font-family:var(--mono); font-size:12px; letter-spacing:.06em;
          color:var(--ink-2); text-decoration:none}
.dg-toc a b{color:var(--brass-dim); font-weight:400; margin-right:9px}
.dg-toc a:hover{background:var(--panel); color:var(--ink)}
.dg-toc a.on{background:var(--panel); color:var(--brass-hi)}
.dg-toc a.on b{color:var(--brass-hi)}

.dg-list{padding-top:72px; padding-bottom:24px}
.dg{display:grid; gap:26px 46px; align-items:center;
    padding:0 0 64px; border-bottom:1px solid var(--rule-soft); margin-bottom:64px;
    --gd-hi:#FF2D9B;                    /* leader, dot, band edges, heading */
    --gd-glow:#FF2D9B;                  /* the shade it connects to         */
    --gd-casing:rgba(6,2,10,.72)}       /* keeps the leader legible on gold */
.dg:last-child{border-bottom:0}
@media(min-width:900px){.dg{grid-template-columns:minmax(0,440px) minmax(0,1fr); gap:26px 60px}}

/* the plate and its mark share one box and one coordinate system */
/* The marker colour is deliberately OUTSIDE the instrument's palette.
   It was brass first, which was the mistake: brass is the dial's own
   dominant colour, so the leader line read as one more arc on the plate.
   Sampling the captured SVG gives 41 colours, and the chromatic ones sit
   in two bands — warm reds and golds at hue 6-48, muted blues and purples
   at 199-290. Saturated magenta is the one empty region: the closest thing
   drawn is Ketu's mauve at 26% saturation, where a cyan marker would have
   had a 48%-saturation blue twenty degrees away. Hue 329 at full chroma
   therefore collides with nothing, and it is used for both the line and
   the shade so the two read as one overlay rather than as part of the dial. */
.dg-stage{position:relative; width:100%; max-width:440px; aspect-ratio:1/1;
          margin:0 auto}
.dg-stage img{display:block; width:100%; height:100%}
.dg-mark{position:absolute; inset:0; width:100%; height:100%;
         overflow:visible; pointer-events:none}

.dg-num{display:block; font-family:var(--mono); font-size:11px;
        letter-spacing:.24em; color:var(--brass-dim)}
/* the heading is the marker's colour, not the instrument's — the label and
   the ring it points at should read as one thing */
.dg-note h3{margin:12px 0 0; font:400 clamp(21px,2.4vw,27px)/1.25 var(--display);
            color:var(--gd-hi); max-width:24ch}
.dg-num{color:var(--gd-hi); opacity:.62}
.dg-note p{margin:14px 0 0; max-width:60ch; font-size:16.5px; line-height:1.8;
           color:var(--ink-2)}
.dg-span{margin-top:16px; font-family:var(--mono); font-size:11px;
         letter-spacing:.12em; color:var(--dim)}

.cta{display:inline-block; padding:14px 26px; border:1px solid var(--brass-dim);
     font-family:var(--mono); font-size:12px; letter-spacing:.16em;
     text-transform:uppercase; color:var(--brass-hi); text-decoration:none;
     transition:background .18s, border-color .18s}
.cta:hover{background:rgba(240,213,126,.08); border-color:var(--brass)}
.cta.ghost{color:var(--ink-2); border-color:var(--rule)}
.cta.ghost:hover{color:var(--brass-hi); border-color:var(--brass-dim)}

/* the two hero actions: start, or learn to read it first */
.herocta{display:flex; flex-wrap:wrap; gap:12px; margin:30px 0 0}
@media(max-width:560px){ .herocta .cta{flex:1 1 100%; text-align:center} }

@media(max-width:720px){
  .dg{padding-bottom:48px; margin-bottom:48px}
  .dg-note p{font-size:15.5px}
}