// Tamashii — mythical homepage (desktop + mobile)
// Uses globals from tamashii-primitives.jsx

// ———————————————————————————————————————————————————
// Desktop
// ———————————————————————————————————————————————————
function TamashiiHomeDesktop() {
  return (
    <div style={{ width:1400, background:TAM.cream, color:TAM.indigo, fontFamily:TAM.roman, position:'relative', overflow:'hidden' }}>

      {/* —————————— Announcement bar —————————— */}
      <div style={{ background:TAM.indigo, color:TAM.gold, padding:'8px 0', textAlign:'center', borderBottom:`1px solid ${TAM.gold2}`, position:'relative' }}>
        <Rubric color={TAM.gold} size={10}>✦   A cinereous moon rises 21st ｡ April ｡ MMXXVI   —   new souls read by candlelight   ✦</Rubric>
      </div>

      {/* —————————— Nav —————————— */}
      <div style={{ padding:'18px 56px', display:'flex', justifyContent:'space-between', alignItems:'center', background:TAM.cream, borderBottom:`1px solid ${TAM.cream3}` }}>
        <div style={{ fontFamily:TAM.display, fontSize:34, color:TAM.indigo, letterSpacing:1, lineHeight:1 }}>
          Tamashii<span style={{color:TAM.blood}}>.</span>
        </div>
        <div style={{ display:'flex', gap:30 }}>
          {['The Reading','The Heavens','Arcana','Numerology','Of the Order'].map((l,i)=>(
            <span key={i} style={{ fontFamily:TAM.roman, fontSize:14, color:TAM.indigo, fontVariant:'small-caps', letterSpacing:1.5 }}>{l}</span>
          ))}
        </div>
        <div style={{ display:'flex', gap:12, alignItems:'center' }}>
          <Rubric>Enter the chamber</Rubric>
          <div style={{ padding:'8px 18px', background:TAM.indigo, color:TAM.gold, fontFamily:TAM.roman, fontSize:13, fontVariant:'small-caps', letterSpacing:2, border:`1px solid ${TAM.gold}` }}>Begin →</div>
        </div>
      </div>

      {/* —————————— Hero —————————— */}
      <div style={{ position:'relative', background:TAM.indigo, color:TAM.cream, padding:'90px 56px 110px', overflow:'hidden', borderBottom:`4px solid ${TAM.gold}` }}>
        <Starfield w={1400} h={760} density={1}/>

        {/* moon */}
        <div style={{ position:'absolute', top:64, right:90, width:200, height:200, borderRadius:'50%',
          background:`radial-gradient(circle at 35% 35%, ${TAM.cream}, ${TAM.cream3} 55%, ${TAM.gold2} 100%)`,
          boxShadow:`0 0 80px rgba(201,162,74,0.3), inset -40px -20px 40px rgba(15,13,42,0.8)`,
          opacity:0.95,
        }}>
          {/* craters */}
          <div style={{ position:'absolute', top:40, left:60, width:20, height:20, borderRadius:'50%', background:'rgba(15,13,42,0.15)' }}/>
          <div style={{ position:'absolute', top:110, left:40, width:14, height:14, borderRadius:'50%', background:'rgba(15,13,42,0.12)' }}/>
          <div style={{ position:'absolute', top:80, left:120, width:10, height:10, borderRadius:'50%', background:'rgba(15,13,42,0.1)' }}/>
        </div>

        <div style={{ position:'relative', maxWidth:920 }}>
          <Rubric color={TAM.gold} size={12} style={{display:'block', marginBottom:22}}>✦   The fourth hour  ·  the twenty-first of April  ·  Anno Domini MMXXVI   ✦</Rubric>

          <h1 style={{ fontFamily:TAM.display, fontSize:140, lineHeight:0.88, letterSpacing:0, fontWeight:400, color:TAM.gold, margin:'0 0 20px', textShadow:`0 2px 40px rgba(201,162,74,0.25)` }}>
            You were born<br/>
            <span style={{color:TAM.cream}}>beneath a sky</span><br/>
            that shall not<br/>
            <span style={{fontFamily:TAM.roman, fontStyle:'italic', fontSize:130, color:TAM.gold}}>return.</span>
          </h1>

          <div style={{ maxWidth:640, fontFamily:TAM.roman, fontSize:20, lineHeight:1.55, color:TAM.cream2, margin:'24px 0 36px', letterSpacing:0.3 }}>
            At the precise hour of thy first breath, the seven wandering stars, the twelve houses of the firmament, and the silent numbers of thy name arranged themselves in a pattern no other soul has worn. <em style={{color:TAM.gold}}>Tamashii</em> reads it back to thee.
          </div>

          {/* CTA bar */}
          <div style={{ display:'flex', alignItems:'center', gap:18, marginTop:12 }}>
            <div style={{ background:TAM.cream, color:TAM.indigo, padding:'20px 36px', border:`2px solid ${TAM.gold}`, boxShadow:`0 0 0 4px ${TAM.indigo}, 0 0 0 5px ${TAM.gold}`, fontFamily:TAM.display, fontSize:26, letterSpacing:1 }}>
              Cast thy chart  →
            </div>
            <div style={{ display:'flex', flexDirection:'column' }}>
              <Rubric color={TAM.gold} size={10}>§  First reading  ·  without coin</Rubric>
              <span style={{ fontFamily:TAM.roman, fontSize:13, fontStyle:'italic', color:TAM.cream2, marginTop:4 }}>Four-and-sixty souls read in the last hour</span>
            </div>
          </div>

          {/* Decorative frame line bottom */}
          <div style={{ position:'absolute', left:-56, right:-56, bottom:-110, display:'flex', alignItems:'center' }}>
            <OrnamentRule color={TAM.gold}/>
          </div>
        </div>

        {/* Side marginalia */}
        <div style={{ position:'absolute', right:70, bottom:80, textAlign:'right', color:TAM.gold, fontFamily:TAM.small, fontSize:11, letterSpacing:2, lineHeight:1.9, fontVariant:'small-caps', opacity:0.8 }}>
          fig. i  ·  the veil at dawn<br/>
          mercurius retrograde ·  v. march<br/>
          luna in ♌  ·  venus in ♈
        </div>
      </div>

      {/* —————————— Marquee of zodiac glyphs —————————— */}
      <div style={{ background:TAM.indigo, padding:'18px 0', borderBottom:`1px solid ${TAM.gold2}`, display:'flex', justifyContent:'space-around', alignItems:'center' }}>
        {['aries','taurus','gemini','cancer','leo','virgo','libra','scorpio','sagittarius','capricorn','aquarius','pisces'].map((s,i)=>(
          <div key={i} style={{display:'flex', flexDirection:'column', alignItems:'center', gap:3}}>
            <ZodiacGlyph sign={s} size={26} color={TAM.gold}/>
            <span style={{fontFamily:TAM.small, fontSize:8, letterSpacing:2, color:TAM.gold2, fontVariant:'small-caps'}}>{s.slice(0,3)}</span>
          </div>
        ))}
      </div>

      {/* —————————— Section I · The Reading (astrology-first) —————————— */}
      <div style={{ padding:'100px 56px 80px', background:TAM.cream }}>
        <div style={{ textAlign:'center', maxWidth:900, margin:'0 auto 48px' }}>
          <Rubric>§ the first · of four</Rubric>
          <h2 style={{ fontFamily:TAM.display, fontSize:84, lineHeight:0.96, letterSpacing:0, fontWeight:400, color:TAM.indigo, margin:'14px 0 18px' }}>
            The heavens, as they<br/>
            <span style={{fontFamily:TAM.roman, fontStyle:'italic'}}>stood for thee alone</span>.
          </h2>
          <div style={{ fontSize:17, lineHeight:1.55, color:TAM.indigo2, fontFamily:TAM.roman }}>
            A natal chart rendered by a hand that has cast ten thousand before thine. Twelve houses. Seven planets. Three-and-thirty aspects. One pattern — never to be seen again.
          </div>
          <div style={{ marginTop:24 }}><OrnamentRule color={TAM.gold2}/></div>
        </div>

        {/* Natal wheel centerpiece */}
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1.2fr 1fr', gap:40, alignItems:'center', maxWidth:1260, margin:'0 auto' }}>
          {/* Left annotations */}
          <div style={{ textAlign:'right' }}>
            {[
              ['§ I   Ascendant',       '23° ♎  Libra rising'],
              ['§ II  Mid-Heaven',      '02° ♋  in Cancer'],
              ['§ III Sun',             '01° ♏  ninth house'],
              ['§ IV  Moon',            '14° ♌  fifth house'],
              ['§ V   Venus',           '12° ♏  eighth house'],
            ].map(([k,v],i)=>(
              <div key={i} style={{ marginBottom:18, paddingRight:20, borderRight:`1px solid ${TAM.gold2}` }}>
                <Rubric size={10}>{k}</Rubric>
                <div style={{ fontFamily:TAM.display, fontSize:22, color:TAM.indigo, marginTop:4, letterSpacing:0.5 }}>{v}</div>
              </div>
            ))}
          </div>

          {/* Wheel */}
          <div style={{ position:'relative', aspectRatio:'1/1', padding:24, background:`radial-gradient(circle, ${TAM.indigo}, ${TAM.ink})`, border:`2px solid ${TAM.gold}`, boxShadow:`0 0 0 8px ${TAM.cream}, 0 0 0 9px ${TAM.gold}, 0 10px 40px rgba(15,13,42,0.3)` }}>
            <Starfield w={400} h={400} density={0.5}/>
            <svg viewBox="-110 -110 220 220" style={{position:'relative', width:'100%', height:'100%'}}>
              {/* outer ring */}
              <circle r="100" fill="none" stroke={TAM.gold} strokeWidth="1"/>
              <circle r="86" fill="none" stroke={TAM.gold} strokeWidth="0.6" opacity="0.7"/>
              <circle r="48" fill="none" stroke={TAM.gold} strokeWidth="0.6" opacity="0.7"/>
              <circle r="36" fill="none" stroke={TAM.gold} strokeWidth="0.5" opacity="0.5"/>

              {/* 12 houses */}
              {Array.from({length:12}).map((_,i)=>{
                const a = (i*30) * Math.PI/180;
                const x1 = Math.cos(a)*36, y1 = Math.sin(a)*36;
                const x2 = Math.cos(a)*100, y2 = Math.sin(a)*100;
                const lx = Math.cos(a + 15*Math.PI/180)*93;
                const ly = Math.sin(a + 15*Math.PI/180)*93;
                return (<g key={i}>
                  <line x1={x1} y1={y1} x2={x2} y2={y2} stroke={TAM.gold} strokeWidth="0.5" opacity="0.7"/>
                  <text x={lx} y={ly+3} textAnchor="middle" fontFamily={TAM.small} fontSize="7" fill={TAM.gold} letterSpacing="0.5">{['ARI','TAU','GEM','CAN','LEO','VIR','LIB','SCO','SAG','CAP','AQU','PIS'][i]}</text>
                </g>);
              })}

              {/* cardinal cross emphasized */}
              <line x1="-100" y1="0" x2="100" y2="0" stroke={TAM.gold} strokeWidth="1"/>
              <line x1="0" y1="-100" x2="0" y2="100" stroke={TAM.gold} strokeWidth="1"/>

              {/* aspect lines */}
              <g stroke={TAM.blood} strokeWidth="0.7" fill="none" opacity="0.8">
                <line x1="-38" y1="-22" x2="30" y2="30"/>
                <line x1="30" y1="30" x2="40" y2="-18"/>
                <line x1="-38" y1="-22" x2="40" y2="-18"/>
                <line x1="-10" y1="42" x2="34" y2="10"/>
              </g>

              {/* planet markers */}
              {[
                [-38,-22,'☉',TAM.gold],
                [40,-18,'☽',TAM.cream],
                [30,30,'♀',TAM.gold],
                [-20,34,'♂',TAM.blood],
                [-10,42,'♃',TAM.gold],
                [34,10,'♄',TAM.cream3],
                [-42,14,'☿',TAM.gold],
              ].map(([x,y,g,c],i)=>(
                <g key={i}>
                  <circle cx={x} cy={y} r="6" fill={TAM.indigo} stroke={c} strokeWidth="1"/>
                  <text x={x} y={y+3} textAnchor="middle" fontFamily={TAM.roman} fontSize="8" fill={c}>{g}</text>
                </g>
              ))}

              {/* center ornament */}
              <g opacity="0.9">
                <circle r="10" fill="none" stroke={TAM.gold} strokeWidth="0.8"/>
                <path d="M-6,0 L0,-6 L6,0 L0,6 Z" fill={TAM.gold}/>
              </g>
            </svg>
            <div style={{ position:'absolute', bottom:-28, left:0, right:0, textAlign:'center' }}>
              <Rubric color={TAM.indigo} size={10}>fig. ii  ·  the natal wheel  ·  placidus</Rubric>
            </div>
          </div>

          {/* Right annotations */}
          <div>
            {[
              ['§ VI   Mars',    '09° ♑  fourth house'],
              ['§ VII  Jupiter', '22° ♈  seventh house'],
              ['§ VIII Saturn',  '18° ♉  eighth house'],
              ['§ IX   Descendant','23° ♈  Aries setting'],
              ['§ X    IC',      '02° ♑  in Capricorn'],
            ].map(([k,v],i)=>(
              <div key={i} style={{ marginBottom:18, paddingLeft:20, borderLeft:`1px solid ${TAM.gold2}` }}>
                <Rubric size={10}>{k}</Rubric>
                <div style={{ fontFamily:TAM.display, fontSize:22, color:TAM.indigo, marginTop:4, letterSpacing:0.5 }}>{v}</div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* —————————— Section II · Arcana (tarot) —————————— */}
      <div style={{ padding:'90px 56px', background:TAM.indigo, color:TAM.cream, position:'relative', borderTop:`4px solid ${TAM.gold}`, borderBottom:`4px solid ${TAM.gold}` }}>
        <Starfield w={1400} h={820} density={0.6}/>
        <div style={{ position:'relative', maxWidth:1280, margin:'0 auto' }}>
          <div style={{ display:'grid', gridTemplateColumns:'1fr 1.4fr', gap:60, alignItems:'start' }}>
            <div>
              <Rubric color={TAM.gold}>§ the second · of four</Rubric>
              <h2 style={{ fontFamily:TAM.display, fontSize:72, lineHeight:0.96, fontWeight:400, color:TAM.gold, margin:'14px 0 20px' }}>
                The Arcana,<br/><span style={{fontFamily:TAM.roman, fontStyle:'italic', color:TAM.cream}}>spread before thee</span>.
              </h2>
              <p style={{ fontFamily:TAM.roman, fontSize:17, lineHeight:1.6, color:TAM.cream2 }}>
                A three-card reading — past, present, yet-to-come — drawn from the seventy-eight and crossed with thy natal signature. Each card bears its own voice; together they sing a counsel.
              </p>
              <div style={{ marginTop:28, padding:'20px 22px', border:`1px solid ${TAM.gold2}`, background:'rgba(0,0,0,0.2)' }}>
                <Rubric color={TAM.gold}>The Oracle speaks</Rubric>
                <p style={{ fontFamily:TAM.roman, fontStyle:'italic', fontSize:18, lineHeight:1.55, color:TAM.cream, margin:'10px 0 0' }}>
                  "What thou once mistook for prison is a chrysalis. The tower has already fallen; thou hast only to stop rebuilding it."
                </p>
              </div>
              <OrnamentRule color={TAM.gold2} style={{marginTop:32}}/>
            </div>

            {/* three cards */}
            <div style={{ display:'flex', justifyContent:'center', gap:14, position:'relative', paddingTop:20 }}>
              <div style={{ transform:'rotate(-6deg)' }}>
                <TarotCard name="The Tower" arcanum="XVI · PAST" glyph="🗲" w={170}/>
              </div>
              <div style={{ transform:'translateY(-14px)' }}>
                <TarotCard name="The Moon" arcanum="XVIII · PRESENT" glyph="☽" w={180}/>
              </div>
              <div style={{ transform:'rotate(6deg)' }}>
                <TarotCard name="The Star" arcanum="XVII · TO COME" glyph="✧" w={170}/>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* —————————— Section III · Numerology —————————— */}
      <div style={{ padding:'90px 56px 80px', background:TAM.cream2 }}>
        <div style={{ display:'grid', gridTemplateColumns:'1.1fr 1fr', gap:70, maxWidth:1280, margin:'0 auto', alignItems:'center' }}>
          <div>
            <Rubric>§ the third · of four</Rubric>
            <h2 style={{ fontFamily:TAM.display, fontSize:76, lineHeight:0.96, fontWeight:400, color:TAM.indigo, margin:'14px 0 20px' }}>
              The <span style={{fontFamily:TAM.roman, fontStyle:'italic'}}>silent numbers</span> beneath thy name.
            </h2>
            <p style={{ fontFamily:TAM.roman, fontSize:17, lineHeight:1.6, color:TAM.indigo2 }}>
              <DropCap letter="B"/>
              efore letters there were numbers, and before numbers there was the Name. Tamashii extracts from the six syllables of thine the three sacred ciphers: thy Path, thy Soul, and thy Expression. Each is a key; together they unlock the door that leads to thine own self.
            </p>
            <div style={{ marginTop:24 }}><OrnamentRule color={TAM.gold2}/></div>
          </div>

          {/* three large illuminated numbers */}
          <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:14 }}>
            {[
              ['path',       '7', 'The Seeker'],
              ['soul',       '3', 'The Creator'],
              ['expression', '1', 'The Sovereign'],
            ].map(([k,n,t],i)=>(
              <div key={i} style={{ background:TAM.indigo, border:`1.5px solid ${TAM.gold}`, padding:'20px 16px', textAlign:'center', color:TAM.cream, position:'relative', boxShadow:`0 0 0 3px ${TAM.cream2}, 0 0 0 4px ${TAM.gold2}` }}>
                <Rubric color={TAM.gold} size={9}>{k}</Rubric>
                <div style={{ fontFamily:TAM.display, fontSize:110, lineHeight:0.9, color:TAM.gold, margin:'12px 0 6px', textShadow:`0 0 20px rgba(201,162,74,0.5)` }}>{n}</div>
                <div style={{ fontFamily:TAM.roman, fontStyle:'italic', fontSize:15, color:TAM.cream2 }}>{t}</div>
                {/* tiny starfield accents */}
                <svg width="100%" height="18" style={{marginTop:10, opacity:0.6}}>
                  <circle cx="10" cy="9" r="1" fill={TAM.gold}/>
                  <circle cx="30" cy="4" r="0.8" fill={TAM.gold}/>
                  <circle cx="50" cy="12" r="1.2" fill={TAM.gold}/>
                  <circle cx="78" cy="6" r="0.8" fill={TAM.gold}/>
                  <circle cx="96" cy="10" r="1" fill={TAM.gold}/>
                </svg>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* —————————— Section IV · The Compendium (what's included) —————————— */}
      <div style={{ padding:'90px 56px', background:TAM.cream, borderTop:`1px solid ${TAM.cream3}` }}>
        <div style={{ textAlign:'center', maxWidth:900, margin:'0 auto 48px' }}>
          <Rubric>§ the fourth · of four</Rubric>
          <h2 style={{ fontFamily:TAM.display, fontSize:80, lineHeight:0.96, fontWeight:400, color:TAM.indigo, margin:'14px 0 14px' }}>
            The full <span style={{fontFamily:TAM.roman, fontStyle:'italic'}}>compendium</span>.
          </h2>
          <p style={{ fontSize:17, lineHeight:1.6, color:TAM.indigo2, fontFamily:TAM.roman }}>
            Ten divinatory arts, bound in one volume. Each reading illuminates a facet the others leave in shadow.
          </p>
          <div style={{marginTop:20}}><OrnamentRule color={TAM.gold2}/></div>
        </div>

        <div style={{ maxWidth:1280, margin:'0 auto', display:'grid', gridTemplateColumns:'repeat(5, 1fr)', gap:0, border:`1px solid ${TAM.gold2}` }}>
          {[
            ['I','Astrologia','the natal chart','♈'],
            ['II','Arcana','the tarot','✦'],
            ['III','Numeri','the silent numbers','Ⅶ'],
            ['IV','Locus','astrocartography','⌘'],
            ['V','Design','the human body graph','◈'],
            ['VI','I Ching','the book of changes','☲'],
            ['VII','Genēsi','the gene keys','✧'],
            ['VIII','Sinica','the chinese wheel','龍'],
            ['IX','Enneas','the nine types','⑧'],
            ['X','Humora','the cardinal temper','♨'],
          ].map(([r,n,t,g],i)=>(
            <div key={i} style={{
              padding:'28px 22px',
              borderRight: (i%5)<4 ? `1px solid ${TAM.gold2}` : 'none',
              borderBottom: i<5 ? `1px solid ${TAM.gold2}` : 'none',
              background: i%2===0 ? TAM.cream : TAM.cream2,
              textAlign:'center',
              position:'relative',
            }}>
              <Rubric size={9} color={TAM.blood}>§ {r}</Rubric>
              <div style={{ fontFamily:TAM.display, fontSize:40, color:TAM.gold, lineHeight:1, margin:'14px 0 6px' }}>{g}</div>
              <div style={{ fontFamily:TAM.display, fontSize:24, color:TAM.indigo, lineHeight:1.1, marginBottom:4 }}>{n}</div>
              <div style={{ fontFamily:TAM.roman, fontStyle:'italic', fontSize:13, color:TAM.indigo2 }}>{t}</div>
            </div>
          ))}
        </div>
      </div>

      {/* —————————— Testimonials —————————— */}
      <div style={{ padding:'100px 56px', background:TAM.indigo, color:TAM.cream, position:'relative', borderTop:`4px solid ${TAM.gold}` }}>
        <Starfield w={1400} h={520} density={0.5}/>
        <div style={{ position:'relative', maxWidth:1280, margin:'0 auto' }}>
          <div style={{ textAlign:'center', marginBottom:48 }}>
            <Rubric color={TAM.gold}>⸺  of the order  ⸺</Rubric>
            <h3 style={{ fontFamily:TAM.display, fontSize:56, color:TAM.gold, margin:'14px 0 8px', fontWeight:400 }}>
              Voices <span style={{fontFamily:TAM.roman, fontStyle:'italic', color:TAM.cream}}>from the chamber</span>.
            </h3>
          </div>
          <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:32 }}>
            {[
              ['"It knew me before I knew myself — I wept at the fifth page."', '— A. Whitmore · Edinburgh'],
              ['"The natal reading alone was worth five of what I paid. The tarot crossing sealed it."', '— J. Oduya · Lagos'],
              ['"I have consulted readers for twenty years. Tamashii read deeper in one sitting."', '— M. Costa · Lisboa'],
            ].map(([q,a],i)=>(
              <div key={i} style={{ padding:'30px 28px', border:`1px solid ${TAM.gold2}`, background:'rgba(0,0,0,0.2)', position:'relative' }}>
                <div style={{ fontFamily:TAM.display, fontSize:56, color:TAM.gold, lineHeight:0.6, opacity:0.6, marginBottom:8 }}>"</div>
                <p style={{ fontFamily:TAM.roman, fontStyle:'italic', fontSize:18, lineHeight:1.5, color:TAM.cream, margin:'0 0 18px' }}>{q}</p>
                <Rubric color={TAM.gold} size={10}>{a}</Rubric>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* —————————— Offering / Pricing —————————— */}
      <div style={{ padding:'100px 56px', background:TAM.cream }}>
        <div style={{ textAlign:'center', maxWidth:800, margin:'0 auto 48px' }}>
          <Rubric>⸺ the offering ⸺</Rubric>
          <h2 style={{ fontFamily:TAM.display, fontSize:80, lineHeight:0.96, fontWeight:400, color:TAM.indigo, margin:'14px 0 14px' }}>
            Three <span style={{fontFamily:TAM.roman, fontStyle:'italic'}}>keys</span> to the chamber.
          </h2>
        </div>
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1.1fr 1fr', gap:18, maxWidth:1180, margin:'0 auto' }}>
          {[
            { t:'The Glimpse', p:'0', per:'without coin',
              d:'A sigil of thy sun, moon, and ascendant — enough to know if the mirror is true.',
              f:['Sun · moon · ascendant','A single tarot drawing','A glimpse at thy numbers'], cta:'Begin freely', primary:false },
            { t:'The Codex',   p:'79', per:'once sealed',
              d:'The full leather-bound volume. Ten arts, bound and narrated. Thine forever.',
              f:['All ten divinatory arts','A natal wheel, scribed','Tarot — a nine-card spread','38-minute narrated volume','Illuminated PDF — printed to order'], cta:'Open the Codex', primary:true },
            { t:'The Circle',  p:'199', per:'per annum',
              d:'The Codex, renewed each quarter with new transits. Counsel from the Oracle, as oft as asked.',
              f:['All of the Codex','Quarterly transit scrolls','Speech with the Oracle (unending)','Pairings — for lovers and rivals','The sanctuary of the Order'], cta:'Join the Circle', primary:false },
          ].map((t,i)=>(
            <div key={i} style={{
              padding:'36px 28px 30px',
              background: t.primary ? TAM.indigo : TAM.cream,
              color: t.primary ? TAM.cream : TAM.indigo,
              border: `2px solid ${TAM.gold}`,
              boxShadow: t.primary
                ? `0 0 0 5px ${TAM.cream}, 0 0 0 6px ${TAM.gold}, 0 12px 40px rgba(15,13,42,0.25)`
                : `0 0 0 4px ${TAM.cream2}, 0 0 0 5px ${TAM.gold2}`,
              position:'relative',
              transform: t.primary ? 'translateY(-20px)' : 'none',
            }}>
              <div style={{ textAlign:'center' }}>
                <Rubric color={t.primary ? TAM.gold : TAM.blood} size={10}>§ the {['first','second','third'][i]}</Rubric>
                <h3 style={{ fontFamily:TAM.display, fontSize:42, margin:'10px 0 2px', lineHeight:1, color: t.primary?TAM.gold:TAM.indigo }}>{t.t}</h3>
                <div style={{ fontFamily:TAM.roman, fontSize:72, lineHeight:1, color: t.primary?TAM.cream:TAM.indigo, margin:'14px 0 2px', letterSpacing:-2 }}>
                  <span style={{fontSize:26, color:t.primary?TAM.gold:TAM.blood, verticalAlign:'top', marginRight:2}}>$</span>{t.p}
                </div>
                <div style={{ fontFamily:TAM.roman, fontStyle:'italic', fontSize:13, color: t.primary?TAM.cream2:TAM.indigo2, marginBottom:8 }}>{t.per}</div>
                <p style={{ fontFamily:TAM.roman, fontSize:14, fontStyle:'italic', lineHeight:1.5, color: t.primary?TAM.cream2:TAM.indigo2, margin:'14px 0 18px', minHeight:64 }}>{t.d}</p>
              </div>
              <div style={{ borderTop:`1px solid ${t.primary?TAM.gold2:TAM.cream3}`, paddingTop:16 }}>
                {t.f.map((l,j)=>(
                  <div key={j} style={{ display:'flex', gap:10, fontSize:13, padding:'7px 0', borderBottom:`1px solid ${t.primary?'rgba(201,162,74,0.15)':TAM.cream3}`, color: t.primary?TAM.cream:TAM.indigo2, fontFamily:TAM.roman, alignItems:'baseline' }}>
                    <span style={{color: t.primary?TAM.gold:TAM.blood, fontFamily:TAM.display, fontSize:14}}>✦</span>
                    <span>{l}</span>
                  </div>
                ))}
              </div>
              <div style={{ marginTop:24 }}>
                <div style={{
                  textAlign:'center', padding:'16px 0',
                  background: t.primary?TAM.gold:TAM.indigo,
                  color: t.primary?TAM.indigo:TAM.cream,
                  fontFamily:TAM.display, fontSize:22, letterSpacing:0.5,
                  border: `1px solid ${t.primary?TAM.cream:TAM.gold}`,
                }}>{t.cta}  →</div>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* —————————— Constellation FAQ —————————— */}
      <div style={{ padding:'90px 56px', background:TAM.cream2 }}>
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1.4fr', gap:60, maxWidth:1280, margin:'0 auto' }}>
          <div>
            <Rubric>⸺  queries of the uncertain  ⸺</Rubric>
            <h3 style={{ fontFamily:TAM.display, fontSize:60, lineHeight:0.96, color:TAM.indigo, margin:'14px 0 20px', fontWeight:400 }}>
              That which is <span style={{fontStyle:'italic', fontFamily:TAM.roman}}>often asked</span>.
            </h3>
            <div style={{ aspectRatio:'1.5/1', background:TAM.indigo, border:`2px solid ${TAM.gold}`, position:'relative', overflow:'hidden', marginTop:24 }}>
              <Starfield w={520} h={340} density={0.9}/>
              <Constellation w={520} h={340}
                accent={TAM.gold} star={TAM.cream}
                label="ursa major  ·  the great bear"
                points={[
                  [60,120,true,'Dubhe'],
                  [110,100],
                  [160,130],
                  [210,150,true,'Alioth'],
                  [280,160],
                  [340,190,true,'Alcor'],
                  [410,220,true,'Mizar'],
                ]}/>
            </div>
          </div>

          <div>
            {[
              ['Is Tamashii more than mere entertainment?', 'Astrology has guided emperors, artists, and farmers for four thousand years. Our readings are written by two orders of craftsmen: the casters who compute thy chart, and the scribes who render it in tongue plain enough to live by. Whether thou treatest it as counsel or as curiosity is thine own matter.'],
              ['What if I know not my hour of birth?',    'A reading may be cast from the day alone — some veils remain drawn. A small rite of rectification is offered at no charge to recover the hour within a quarter-hour, should thou wish it.'],
              ['May I receive my reading in paper form?', 'Every Codex is rendered as an illuminated broadside — thirty-two pages, gold-stamped, posted within a fortnight for three coins more.'],
              ['Is my reading kept in privacy?',          'Thy chart is thine alone. It is encrypted in our vaults and may be unmade at thy single word — no trace, no record, no memory.'],
              ['May I read for another — a lover, a child?','Aye. The Circle permits up to seven readings under one key; pairings are cast gratis.'],
            ].map(([q,a],i)=>(
              <div key={i} style={{ borderBottom:`1px solid ${TAM.gold2}`, padding:'22px 0' }}>
                <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline' }}>
                  <div style={{ fontFamily:TAM.display, fontSize:22, color:TAM.indigo, fontWeight:400, flex:1, paddingRight:20 }}>
                    <span style={{color:TAM.blood, marginRight:10, fontFamily:TAM.roman, fontStyle:'italic'}}>{String.fromCharCode(0x2160+i)}.</span>{q}
                  </div>
                  <div style={{ color:TAM.gold, fontFamily:TAM.display, fontSize:28, lineHeight:0.8 }}>{i===0?'−':'+'}</div>
                </div>
                {i===0 && (
                  <div style={{ fontFamily:TAM.roman, fontSize:15, lineHeight:1.65, color:TAM.indigo2, marginTop:14, paddingLeft:20, borderLeft:`2px solid ${TAM.gold}`, fontStyle:'italic' }}>{a}</div>
                )}
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* —————————— Final CTA —————————— */}
      <div style={{ padding:'120px 56px', background:TAM.indigo, color:TAM.cream, textAlign:'center', position:'relative', overflow:'hidden', borderTop:`4px solid ${TAM.gold}` }}>
        <Starfield w={1400} h={500} density={1.2}/>
        <div style={{ position:'relative' }}>
          <Rubric color={TAM.gold}>⸺  the threshold  ⸺</Rubric>
          <h2 style={{ fontFamily:TAM.display, fontSize:140, lineHeight:0.9, fontWeight:400, color:TAM.gold, margin:'18px 0 20px', textShadow:`0 0 40px rgba(201,162,74,0.3)` }}>
            Wilt thou<br/>
            <span style={{fontFamily:TAM.roman, fontStyle:'italic', color:TAM.cream}}>cross the veil</span>?
          </h2>
          <div style={{ fontSize:20, fontFamily:TAM.roman, fontStyle:'italic', color:TAM.cream2, maxWidth:720, margin:'0 auto 40px', lineHeight:1.55 }}>
            It asks no coin. It asks no oath. Only the date, the hour, and the place thou didst first draw breath.
          </div>
          <div style={{ display:'inline-block', background:TAM.cream, color:TAM.indigo, padding:'24px 52px', border:`2px solid ${TAM.gold}`, boxShadow:`0 0 0 5px ${TAM.indigo}, 0 0 0 6px ${TAM.gold}`, fontFamily:TAM.display, fontSize:32, letterSpacing:1 }}>
            Begin thy reading  →
          </div>
          <div style={{ marginTop:24 }}><Rubric color={TAM.gold}>first reading · without coin · without obligation</Rubric></div>
        </div>
      </div>

      {/* —————————— Footer —————————— */}
      <div style={{ padding:'56px 56px 36px', background:TAM.ink, color:TAM.cream2, borderTop:`1px solid ${TAM.gold2}` }}>
        <div style={{ maxWidth:1280, margin:'0 auto' }}>
          <OrnamentRule color={TAM.gold2} style={{marginBottom:36}}/>
          <div style={{ display:'grid', gridTemplateColumns:'2fr 1fr 1fr 1fr 1fr', gap:40, marginBottom:36 }}>
            <div>
              <div style={{ fontFamily:TAM.display, fontSize:42, color:TAM.gold, lineHeight:1 }}>Tamashii<span style={{color:TAM.blood}}>.</span></div>
              <div style={{ fontFamily:TAM.roman, fontStyle:'italic', fontSize:14, color:TAM.cream2, marginTop:12, maxWidth:300, lineHeight:1.55 }}>
                Of the Order of the Veiled Star  ·  est. MMXXIV  ·  cast from a small room in Kyōto.
              </div>
            </div>
            {[
              ['The reading', ['Natal wheel','Arcana','Numerology','Astrocartography','The compendium']],
              ['The order',   ['Of our scribes','Of our method','Of privacy','Of refunds']],
              ['Companions',  ['The journal','The book of hours','Pairings for lovers','Gift a reading']],
              ['Correspond',  ['By quill','By raven','By the ledger']],
            ].map(([h,rows],i)=>(
              <div key={i}>
                <Rubric color={TAM.gold} size={9}>{h}</Rubric>
                <div style={{ marginTop:12 }}>
                  {rows.map((r,j)=>(<div key={j} style={{fontSize:13, fontFamily:TAM.roman, padding:'4px 0'}}>{r}</div>))}
                </div>
              </div>
            ))}
          </div>
          <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', paddingTop:24, borderTop:`1px solid ${TAM.indigo2}`, fontFamily:TAM.small, fontSize:11, color:TAM.cream3, fontVariant:'small-caps', letterSpacing:2 }}>
            <span>© anno domini MMXXVI  ·  tamashii, of kyōto</span>
            <span>✦  the star does not know it is seen  ✦</span>
            <span>terms · privacy · of cookies</span>
          </div>
        </div>
      </div>
    </div>
  );
}

// ———————————————————————————————————————————————————
// Mobile
// ———————————————————————————————————————————————————
function TamashiiHomeMobile() {
  return (
    <div style={{ width:390, background:TAM.cream, color:TAM.indigo, fontFamily:TAM.roman, position:'relative', overflow:'hidden' }}>
      {/* announcement */}
      <div style={{ background:TAM.indigo, color:TAM.gold, padding:'6px 0', textAlign:'center' }}>
        <Rubric color={TAM.gold} size={8}>✦  cinereous moon  ·  21 apr mmxxvi  ✦</Rubric>
      </div>

      {/* nav */}
      <div style={{ padding:'14px 18px', display:'flex', justifyContent:'space-between', alignItems:'center', borderBottom:`1px solid ${TAM.cream3}` }}>
        <div style={{ fontFamily:TAM.display, fontSize:24, color:TAM.indigo }}>Tamashii<span style={{color:TAM.blood}}>.</span></div>
        <div style={{ fontFamily:TAM.small, fontSize:20, color:TAM.indigo }}>☰</div>
      </div>

      {/* hero */}
      <div style={{ background:TAM.indigo, color:TAM.cream, padding:'40px 20px 48px', position:'relative', overflow:'hidden', borderBottom:`3px solid ${TAM.gold}` }}>
        <Starfield w={390} h={560} density={0.9}/>
        <div style={{ position:'absolute', top:20, right:16, width:76, height:76, borderRadius:'50%',
          background:`radial-gradient(circle at 35% 35%, ${TAM.cream}, ${TAM.cream3} 60%, ${TAM.gold2} 100%)`,
          boxShadow:`inset -20px -10px 20px rgba(15,13,42,0.8)`,
        }}/>
        <div style={{ position:'relative' }}>
          <Rubric color={TAM.gold} size={9}>✦  the fourth hour  ·  xxi apr  ✦</Rubric>
          <h1 style={{ fontFamily:TAM.display, fontSize:62, lineHeight:0.88, fontWeight:400, color:TAM.gold, margin:'16px 0 14px' }}>
            You were born<br/>
            <span style={{color:TAM.cream}}>beneath a sky</span><br/>
            that shall not<br/>
            <span style={{fontFamily:TAM.roman, fontStyle:'italic', color:TAM.gold, fontSize:56}}>return.</span>
          </h1>
          <p style={{ fontFamily:TAM.roman, fontSize:14, fontStyle:'italic', lineHeight:1.55, color:TAM.cream2, margin:'14px 0 24px' }}>
            At the hour of thy first breath, the stars arranged themselves in a pattern no other soul has worn. <em style={{color:TAM.gold}}>Tamashii</em> reads it back to thee.
          </p>
          <div style={{ background:TAM.cream, color:TAM.indigo, padding:'14px 20px', border:`1.5px solid ${TAM.gold}`, boxShadow:`0 0 0 3px ${TAM.indigo}, 0 0 0 4px ${TAM.gold}`, fontFamily:TAM.display, fontSize:19, textAlign:'center', letterSpacing:0.5 }}>
            Cast thy chart  →
          </div>
          <div style={{ marginTop:12, textAlign:'center' }}><Rubric color={TAM.gold} size={9}>first reading · without coin</Rubric></div>
        </div>
      </div>

      {/* zodiac strip */}
      <div style={{ background:TAM.indigo, padding:'10px 0', borderBottom:`1px solid ${TAM.gold2}`, display:'flex', justifyContent:'space-around' }}>
        {['aries','taurus','gemini','cancer','leo','virgo'].map((s,i)=>(
          <ZodiacGlyph key={i} sign={s} size={18} color={TAM.gold}/>
        ))}
      </div>

      {/* § I · heavens */}
      <div style={{ padding:'50px 20px 40px' }}>
        <div style={{textAlign:'center'}}>
          <Rubric>§ i · of iv</Rubric>
          <h2 style={{ fontFamily:TAM.display, fontSize:40, lineHeight:0.96, color:TAM.indigo, margin:'12px 0 14px', fontWeight:400 }}>
            The heavens,<br/><span style={{fontFamily:TAM.roman, fontStyle:'italic'}}>as they stood</span>.
          </h2>
        </div>
        <div style={{ aspectRatio:'1/1', background:`radial-gradient(circle, ${TAM.indigo}, ${TAM.ink})`, border:`2px solid ${TAM.gold}`, boxShadow:`0 0 0 4px ${TAM.cream}, 0 0 0 5px ${TAM.gold2}`, position:'relative', margin:'20px 10px' }}>
          <Starfield w={300} h={300} density={0.6}/>
          <svg viewBox="-110 -110 220 220" style={{position:'relative', width:'100%', height:'100%'}}>
            <circle r="100" fill="none" stroke={TAM.gold} strokeWidth="1"/>
            <circle r="86" fill="none" stroke={TAM.gold} strokeWidth="0.5" opacity="0.6"/>
            <circle r="48" fill="none" stroke={TAM.gold} strokeWidth="0.5" opacity="0.6"/>
            {Array.from({length:12}).map((_,i)=>{
              const a = (i*30) * Math.PI/180;
              return <line key={i} x1={Math.cos(a)*48} y1={Math.sin(a)*48} x2={Math.cos(a)*100} y2={Math.sin(a)*100} stroke={TAM.gold} strokeWidth="0.4" opacity="0.6"/>;
            })}
            <g stroke={TAM.blood} strokeWidth="0.7" fill="none" opacity="0.8">
              <line x1="-38" y1="-22" x2="30" y2="30"/>
              <line x1="-38" y1="-22" x2="40" y2="-18"/>
              <line x1="-10" y1="42" x2="34" y2="10"/>
            </g>
            {[[-38,-22,'☉',TAM.gold],[40,-18,'☽',TAM.cream],[30,30,'♀',TAM.gold],[-20,34,'♂',TAM.blood],[34,10,'♄',TAM.cream3],[-10,42,'♃',TAM.gold]].map(([x,y,g,c],i)=>(
              <g key={i}><circle cx={x} cy={y} r="6" fill={TAM.indigo} stroke={c} strokeWidth="1"/><text x={x} y={y+3} textAnchor="middle" fontSize="8" fill={c} fontFamily={TAM.roman}>{g}</text></g>
            ))}
            <path d="M-5,0 L0,-5 L5,0 L0,5 Z" fill={TAM.gold}/>
          </svg>
        </div>
        <div style={{ marginTop:20 }}>
          {[['Ascendant','23° ♎ libra'],['Sun','01° ♏ 9h'],['Moon','14° ♌ 5h'],['Venus','12° ♏ 8h'],['Mars','09° ♑ 4h']].map(([k,v],i)=>(
            <div key={i} style={{ display:'flex', justifyContent:'space-between', padding:'10px 0', borderBottom:`1px solid ${TAM.cream3}` }}>
              <Rubric size={10}>{k}</Rubric>
              <span style={{ fontFamily:TAM.display, fontSize:16, color:TAM.indigo }}>{v}</span>
            </div>
          ))}
        </div>
      </div>

      {/* § II · arcana */}
      <div style={{ padding:'50px 20px', background:TAM.indigo, color:TAM.cream, borderTop:`3px solid ${TAM.gold}`, borderBottom:`3px solid ${TAM.gold}`, position:'relative', overflow:'hidden' }}>
        <Starfield w={390} h={760} density={0.5}/>
        <div style={{ position:'relative', textAlign:'center' }}>
          <Rubric color={TAM.gold}>§ ii · of iv</Rubric>
          <h2 style={{ fontFamily:TAM.display, fontSize:40, lineHeight:0.96, color:TAM.gold, margin:'12px 0 14px', fontWeight:400 }}>
            The Arcana,<br/><span style={{fontFamily:TAM.roman, fontStyle:'italic', color:TAM.cream}}>spread before thee</span>.
          </h2>
          <div style={{ display:'flex', justifyContent:'center', gap:6, marginTop:28, marginBottom:20 }}>
            <div style={{transform:'rotate(-5deg)'}}><TarotCard name="The Tower" arcanum="XVI" glyph="🗲" w={92}/></div>
            <div style={{transform:'translateY(-6px)'}}><TarotCard name="The Moon" arcanum="XVIII" glyph="☽" w={98}/></div>
            <div style={{transform:'rotate(5deg)'}}><TarotCard name="The Star" arcanum="XVII" glyph="✧" w={92}/></div>
          </div>
          <div style={{ padding:'16px 18px', border:`1px solid ${TAM.gold2}`, background:'rgba(0,0,0,0.2)', textAlign:'left', marginTop:20 }}>
            <Rubric color={TAM.gold} size={9}>the oracle speaks</Rubric>
            <p style={{ fontFamily:TAM.roman, fontStyle:'italic', fontSize:14, lineHeight:1.5, color:TAM.cream, margin:'8px 0 0' }}>
              "What thou once mistook for prison is a chrysalis. The tower has already fallen."
            </p>
          </div>
        </div>
      </div>

      {/* § III · numbers */}
      <div style={{ padding:'50px 20px', background:TAM.cream2 }}>
        <div style={{textAlign:'center'}}>
          <Rubric>§ iii · of iv</Rubric>
          <h2 style={{ fontFamily:TAM.display, fontSize:38, lineHeight:0.96, color:TAM.indigo, margin:'12px 0 18px', fontWeight:400 }}>
            The <span style={{fontFamily:TAM.roman, fontStyle:'italic'}}>silent numbers</span>.
          </h2>
        </div>
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:8 }}>
          {[['path','7','Seeker'],['soul','3','Creator'],['expr','1','Sovereign']].map(([k,n,t],i)=>(
            <div key={i} style={{ background:TAM.indigo, border:`1.5px solid ${TAM.gold}`, padding:14, textAlign:'center', color:TAM.cream, boxShadow:`0 0 0 2px ${TAM.cream2}, 0 0 0 3px ${TAM.gold2}` }}>
              <Rubric color={TAM.gold} size={8}>{k}</Rubric>
              <div style={{ fontFamily:TAM.display, fontSize:56, lineHeight:0.9, color:TAM.gold, margin:'6px 0' }}>{n}</div>
              <div style={{ fontFamily:TAM.roman, fontStyle:'italic', fontSize:11, color:TAM.cream2 }}>{t}</div>
            </div>
          ))}
        </div>
      </div>

      {/* compendium */}
      <div style={{ padding:'50px 20px' }}>
        <div style={{textAlign:'center'}}>
          <Rubric>§ iv · of iv</Rubric>
          <h2 style={{ fontFamily:TAM.display, fontSize:38, lineHeight:0.96, color:TAM.indigo, margin:'12px 0 18px', fontWeight:400 }}>
            The full <span style={{fontStyle:'italic', fontFamily:TAM.roman}}>compendium</span>.
          </h2>
        </div>
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', border:`1px solid ${TAM.gold2}` }}>
          {[['I','Astrologia','♈'],['II','Arcana','✦'],['III','Numeri','Ⅶ'],['IV','Locus','⌘'],['V','Design','◈'],['VI','I Ching','☲'],['VII','Genēsi','✧'],['VIII','Sinica','龍'],['IX','Enneas','⑧'],['X','Humora','♨']].map(([r,n,g],i)=>(
            <div key={i} style={{
              padding:'18px 14px',
              textAlign:'center',
              borderRight: i%2===0 ? `1px solid ${TAM.gold2}` : 'none',
              borderBottom: i<8 ? `1px solid ${TAM.gold2}` : 'none',
              background: i%2===0 ? TAM.cream : TAM.cream2,
            }}>
              <Rubric color={TAM.blood} size={8}>§ {r}</Rubric>
              <div style={{ fontFamily:TAM.display, fontSize:30, color:TAM.gold, lineHeight:1, margin:'6px 0 2px' }}>{g}</div>
              <div style={{ fontFamily:TAM.display, fontSize:16, color:TAM.indigo, lineHeight:1.1 }}>{n}</div>
            </div>
          ))}
        </div>
      </div>

      {/* testimonial */}
      <div style={{ padding:'40px 20px', background:TAM.indigo, color:TAM.cream, position:'relative', overflow:'hidden', borderTop:`3px solid ${TAM.gold}` }}>
        <Starfield w={390} h={260} density={0.5}/>
        <div style={{ position:'relative', textAlign:'center' }}>
          <Rubric color={TAM.gold}>⸺ of the order ⸺</Rubric>
          <div style={{ fontFamily:TAM.display, fontSize:48, color:TAM.gold, lineHeight:0.6, opacity:0.6, marginTop:10 }}>"</div>
          <p style={{ fontFamily:TAM.roman, fontStyle:'italic', fontSize:16, lineHeight:1.55, color:TAM.cream, margin:'8px 0 14px' }}>
            It knew me before I knew myself — I wept at the fifth page.
          </p>
          <Rubric color={TAM.gold} size={9}>— a. whitmore · edinburgh</Rubric>
        </div>
      </div>

      {/* pricing */}
      <div style={{ padding:'50px 20px', background:TAM.cream }}>
        <div style={{textAlign:'center'}}>
          <Rubric>⸺ the offering ⸺</Rubric>
          <h2 style={{ fontFamily:TAM.display, fontSize:38, lineHeight:0.96, color:TAM.indigo, margin:'12px 0 24px', fontWeight:400 }}>
            Three <span style={{fontStyle:'italic', fontFamily:TAM.roman}}>keys</span>.
          </h2>
        </div>
        {[
          { t:'The Glimpse', p:'0', per:'without coin', d:'Sun, moon, ascendant.', primary:false },
          { t:'The Codex',   p:'79', per:'once sealed', d:'Ten arts bound in one volume.', primary:true },
          { t:'The Circle',  p:'199', per:'per annum', d:'Renewed quarterly. Oracle at all hours.', primary:false },
        ].map((t,i)=>(
          <div key={i} style={{
            margin:'14px 0', padding:'20px 18px',
            background: t.primary ? TAM.indigo : TAM.cream,
            color: t.primary ? TAM.cream : TAM.indigo,
            border:`1.5px solid ${TAM.gold}`,
            boxShadow: t.primary ? `0 0 0 3px ${TAM.cream}, 0 0 0 4px ${TAM.gold}` : `0 0 0 3px ${TAM.cream2}, 0 0 0 4px ${TAM.gold2}`,
          }}>
            <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline' }}>
              <div>
                <Rubric color={t.primary?TAM.gold:TAM.blood} size={9}>§ the {['first','second','third'][i]}</Rubric>
                <div style={{ fontFamily:TAM.display, fontSize:30, lineHeight:1, color: t.primary?TAM.gold:TAM.indigo, margin:'6px 0 4px' }}>{t.t}</div>
                <div style={{ fontFamily:TAM.roman, fontStyle:'italic', fontSize:12, color: t.primary?TAM.cream2:TAM.indigo2 }}>{t.d}</div>
              </div>
              <div style={{ fontFamily:TAM.roman, fontSize:42, color: t.primary?TAM.cream:TAM.indigo, letterSpacing:-1 }}>
                <span style={{fontSize:16, color:t.primary?TAM.gold:TAM.blood}}>$</span>{t.p}
              </div>
            </div>
            <div style={{ marginTop:12, textAlign:'center', padding:'10px', background: t.primary?TAM.gold:TAM.indigo, color: t.primary?TAM.indigo:TAM.cream, fontFamily:TAM.display, fontSize:16 }}>
              Choose  →
            </div>
          </div>
        ))}
      </div>

      {/* final CTA */}
      <div style={{ padding:'60px 20px', background:TAM.indigo, color:TAM.cream, textAlign:'center', position:'relative', overflow:'hidden', borderTop:`3px solid ${TAM.gold}` }}>
        <Starfield w={390} h={340} density={1.1}/>
        <div style={{ position:'relative' }}>
          <Rubric color={TAM.gold}>⸺ the threshold ⸺</Rubric>
          <h2 style={{ fontFamily:TAM.display, fontSize:54, lineHeight:0.9, color:TAM.gold, margin:'14px 0 16px', fontWeight:400 }}>
            Wilt thou<br/><span style={{fontFamily:TAM.roman, fontStyle:'italic', color:TAM.cream}}>cross the veil</span>?
          </h2>
          <p style={{ fontFamily:TAM.roman, fontStyle:'italic', fontSize:14, color:TAM.cream2, margin:'14px 0 22px' }}>
            It asks no coin. Only the date, the hour, the place.
          </p>
          <div style={{ background:TAM.cream, color:TAM.indigo, padding:'16px 24px', border:`1.5px solid ${TAM.gold}`, boxShadow:`0 0 0 3px ${TAM.indigo}, 0 0 0 4px ${TAM.gold}`, fontFamily:TAM.display, fontSize:22, letterSpacing:0.5 }}>
            Begin thy reading →
          </div>
        </div>
      </div>

      {/* footer */}
      <div style={{ padding:'32px 20px 24px', background:TAM.ink, color:TAM.cream2, textAlign:'center' }}>
        <div style={{ fontFamily:TAM.display, fontSize:32, color:TAM.gold }}>Tamashii<span style={{color:TAM.blood}}>.</span></div>
        <div style={{ fontFamily:TAM.roman, fontStyle:'italic', fontSize:11, color:TAM.cream2, marginTop:8 }}>Of the Order of the Veiled Star · est. MMXXIV</div>
        <OrnamentRule color={TAM.gold2} style={{marginTop:16, marginBottom:14}}/>
        <Rubric color={TAM.cream3} size={8}>✦ the star does not know it is seen ✦</Rubric>
      </div>

    </div>
  );
}

Object.assign(window, { TamashiiHomeDesktop, TamashiiHomeMobile });
