// Tamashi v4 — homepage (desktop + mobile)
// "The Library" — global syncretic soul-reading. Aged paper, multi-script, candlelight.

function TamashiV4HomeDesktop() {
  return (
    <div style={{ width:1400, background:T4.paper, color:T4.ink, fontFamily:T4.body, position:'relative' }}>

      {/* —————— masthead —————— */}
      <div style={{ borderBottom:`1px solid ${T4.rule}`, padding:'14px 56px', display:'flex', justifyContent:'space-between', alignItems:'center', background:T4.cream, position:'relative' }}>
        <PaperTexture w={1400} h={60} opacity={0.12}/>
        <Rubric4 size={9} style={{position:'relative'}}>vol. iv  ·  no. xxiii  ·  april mmxxvi  ·  printed in twelve cities</Rubric4>
        <Rubric4 size={9} color={T4.madder} style={{position:'relative'}}>the keeper is in residence ·  ⌖  marrakech</Rubric4>
      </div>

      {/* —————— wordmark —————— */}
      <div style={{ padding:'40px 56px 24px', textAlign:'center', borderBottom:`1px solid ${T4.rule}`, position:'relative', background:T4.paper }}>
        <PaperTexture w={1400} h={200} opacity={0.18}/>
        <div style={{position:'relative'}}>
          <Rubric4 size={10}>est.  ·  a library of the world's traditions</Rubric4>
          <div style={{ fontFamily:T4.display, fontSize:78, lineHeight:1, color:T4.ink, letterSpacing:14, marginTop:14, marginBottom:6, fontWeight:400 }}>
            T A M A S H I
          </div>
          <Rubric4 size={9} color={T4.ink3}>᠅  every soul, in every tongue  ᠅</Rubric4>
        </div>
        <div style={{ position:'relative', marginTop:18, display:'flex', justifyContent:'center', gap:36 }}>
          {['The Reading','The Traditions','The Keeper','The Catalogue','Of the House'].map((l,i)=>(
            <span key={i} style={{ fontFamily:T4.body, fontSize:13, color:T4.ink, fontVariant:'small-caps', letterSpacing:2 }}>{l}</span>
          ))}
        </div>
      </div>

      {/* —————— hero · the library —————— */}
      <div style={{ padding:'80px 56px 90px', position:'relative', background:T4.paper, borderBottom:`1px solid ${T4.rule}` }}>
        <PaperTexture w={1400} h={760} opacity={0.22}/>
        <div style={{ position:'relative', display:'grid', gridTemplateColumns:'1.4fr 1fr', gap:60, alignItems:'center' }}>
          <div>
            <Rubric4 size={10}>§ i  ·  the premise</Rubric4>
            <h1 style={{ fontFamily:T4.display, fontSize:104, lineHeight:0.96, fontWeight:400, color:T4.ink, margin:'18px 0 22px', letterSpacing:-0.5 }}>
              Every civilisation<br/>independently devised<br/>a way to read <span style={{fontFamily:T4.serif, fontStyle:'italic'}}>you</span>.
            </h1>
            <p style={{ fontFamily:T4.serif, fontSize:21, lineHeight:1.55, color:T4.ink2, margin:'0 0 24px', maxWidth:720 }}>
              The Greeks gave us the planets. The Yoruba, the Odu. India, the Kundali. China, four pillars and the Yi. The Maya, the Tzolk'in. Modern psychology, the Big Five and the Enneagram. Each tradition holds a piece of the picture, none holds all. <em>Tamashi</em> reads thee through every one of them — and tells thee what they all agree on.
            </p>
            <Catalog style={{margin:'28px 0 28px', maxWidth:560}}/>
            <div style={{ display:'flex', gap:22, alignItems:'center' }}>
              <div style={{ background:T4.ink, color:T4.paper, padding:'18px 32px', fontFamily:T4.sans, fontSize:14, letterSpacing:3, textTransform:'uppercase' }}>
                Begin a reading  →
              </div>
              <div>
                <Rubric4 size={9}>without coin · without obligation</Rubric4>
                <div style={{fontFamily:T4.serif, fontStyle:'italic', fontSize:14, color:T4.ink3, marginTop:4}}>10 traditions · cross-referenced · one reading</div>
              </div>
            </div>
          </div>

          {/* the keeper portrait + cards */}
          <div style={{ position:'relative', display:'flex', justifyContent:'center' }}>
            <SagePortrait w={340} h={420}/>
            {/* layered manuscript scraps */}
            <div style={{ position:'absolute', top:-20, right:-20, transform:'rotate(6deg)', background:T4.cream, border:`1px solid ${T4.rule}`, padding:'10px 14px', boxShadow:`2px 2px 0 ${T4.paper3}`, width:170 }}>
              <Rubric4 size={8} color={T4.madder}>fragment  ·  vedic</Rubric4>
              <div style={{fontFamily:T4.serif, fontSize:18, color:T4.ink, marginTop:4, lineHeight:1.2}}>राशि  ·  कुंडली</div>
              <div style={{fontFamily:T4.serif, fontStyle:'italic', fontSize:11, color:T4.ink3, marginTop:2}}>"the wheel of birth"</div>
            </div>
            <div style={{ position:'absolute', bottom:30, left:-30, transform:'rotate(-5deg)', background:T4.cream, border:`1px solid ${T4.rule}`, padding:'10px 14px', boxShadow:`2px 2px 0 ${T4.paper3}`, width:170 }}>
              <Rubric4 size={8} color={T4.teal}>fragment  ·  mayan</Rubric4>
              <div style={{fontFamily:T4.serif, fontSize:18, color:T4.ink, marginTop:4, lineHeight:1.2}}>Tzolk'in</div>
              <div style={{fontFamily:T4.serif, fontStyle:'italic', fontSize:11, color:T4.ink3, marginTop:2}}>"the count of days"</div>
            </div>
            <div style={{ position:'absolute', bottom:-10, right:-10, transform:'rotate(4deg)', background:T4.cream, border:`1px solid ${T4.rule}`, padding:'10px 14px', boxShadow:`2px 2px 0 ${T4.paper3}`, width:160 }}>
              <Rubric4 size={8} color={T4.indigo}>fragment  ·  ifa</Rubric4>
              <div style={{fontFamily:T4.serif, fontSize:18, color:T4.ink, marginTop:4, lineHeight:1.2}}>Odù Ifá</div>
              <div style={{fontFamily:T4.serif, fontStyle:'italic', fontSize:11, color:T4.ink3, marginTop:2}}>"the verses of fate"</div>
            </div>
          </div>
        </div>

        {/* multi-script soul line */}
        <div style={{ marginTop:60, paddingTop:30, borderTop:`1px solid ${T4.rule}`, position:'relative' }}>
          <div style={{textAlign:'center', marginBottom:14}}><Rubric4 size={9}>the same word ·  in ten tongues</Rubric4></div>
          <SoulInScripts size={20} color={T4.ink2}/>
        </div>
      </div>

      {/* —————— ten traditions catalogue —————— */}
      <div style={{ padding:'90px 56px', background:T4.paper2, borderBottom:`1px solid ${T4.rule}`, position:'relative' }}>
        <PaperTexture w={1400} h={800} opacity={0.18}/>
        <div style={{ position:'relative', maxWidth:1280, margin:'0 auto' }}>
          <div style={{ textAlign:'center', marginBottom:48 }}>
            <Rubric4 size={10}>§ ii  ·  the catalogue</Rubric4>
            <h2 style={{ fontFamily:T4.display, fontSize:64, lineHeight:1, color:T4.ink, margin:'14px 0 14px', fontWeight:400 }}>
              Ten traditions. <span style={{fontFamily:T4.serif, fontStyle:'italic'}}>One reading.</span>
            </h2>
            <p style={{fontFamily:T4.serif, fontSize:17, fontStyle:'italic', color:T4.ink3, maxWidth:680, margin:'0 auto'}}>
              The library holds the working manuscripts of ten traditions, gathered over thirty years from twelve cities. Each is read in its own language, then translated into thine.
            </p>
          </div>

          <div style={{ border:`1px solid ${T4.ink}`, background:T4.cream, position:'relative' }}>
            {/* catalogue header */}
            <div style={{ display:'grid', gridTemplateColumns:'80px 200px 1fr 280px 120px', borderBottom:`1px solid ${T4.ink}`, background:T4.paper3, padding:'12px 20px' }}>
              {['№','tradition','what it sees','origin · earliest record','script'].map((h,i)=>(
                <Rubric4 key={i} size={9} color={T4.ink}>{h}</Rubric4>
              ))}
            </div>

            {[
              ['I',  'Astrologia',     'western', 'the celestial timing of thy birth — the pattern of seven wandering stars across twelve houses', 'Mesopotamia · 2nd m. BCE',          '♈♉♊♋'],
              ['II', 'Jyotiṣa',        'vedic',   'the lunar architecture — twenty-seven nakshatras and the law of karma',                          'Indus valley · 1500 BCE',           'ज्योतिष'],
              ['III','Bā Zì',          'bazi',    'the four pillars of thy birth — heaven, earth, hour, day — five elements in proportion',         'China · Tang dynasty',              '八字'],
              ['IV', 'Yì Jīng',        'iching',  'the sixty-four hexagrams — the dynamic shape of thy character in motion',                       'China · 9th c. BCE',                '易經'],
              ['V',  'Ifá',            'ifa',     'two hundred and fifty-six Odù — the speech of Òrúnmìlà concerning thee',                        'Yorubaland · 8th c. CE',            'ifá  ·  ọdù'],
              ['VI', 'Tzolk\'in',      'tzolkin', 'the sacred count — twenty signs across thirteen tones, a 260-day soul cycle',                   'Maya · 6th c. BCE',                 'k\'iche\''],
              ['VII','Kyūsei',         'nine_star','the nine stars — direction, energy, and the geometry of thy year',                            'Japan · adapted from Han China',    '九星'],
              ['VIII','Enneatypon',    'enneagram','the nine fixations — the shape of thy attention under pressure',                              'Sufi · Christian desert · ⤳ 1960s', 'enneatypon'],
              ['IX', 'Quinque',        'bigfive', 'the five-factor measurement — modern psychometrics in five dimensions',                        'IPIP · 1990s',                      'OCEAN'],
              ['X',  'Āyurveda',       'ayurveda','the three doṣas — the elemental disposition of thy body and temper',                          'India · Atharva Veda',              'आयुर्वेद'],
            ].map(([n,name,sigil,desc,origin,script],i)=>(
              <div key={i} style={{
                display:'grid', gridTemplateColumns:'80px 200px 1fr 280px 120px',
                padding:'22px 20px', alignItems:'center',
                borderBottom: i<9 ? `1px solid ${T4.rule}` : 'none',
                background: i%2===0 ? T4.cream : T4.paper,
              }}>
                <div style={{ fontFamily:T4.display, fontSize:20, color:T4.ink3, letterSpacing:1 }}>{n}</div>
                <div style={{ display:'flex', alignItems:'center', gap:14 }}>
                  <Sigil tradition={sigil} size={32} color={T4.ink}/>
                  <div style={{ fontFamily:T4.display, fontSize:22, color:T4.ink, lineHeight:1 }}>{name}</div>
                </div>
                <div style={{ fontFamily:T4.serif, fontSize:15, color:T4.ink2, lineHeight:1.5, paddingRight:32, fontStyle:'italic' }}>{desc}</div>
                <div style={{ fontFamily:T4.small, fontSize:11, color:T4.ink3, letterSpacing:1, fontVariant:'small-caps' }}>{origin}</div>
                <div style={{ fontFamily:T4.serif, fontSize:18, color:T4.madder, textAlign:'right', letterSpacing:0.5 }}>{script}</div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* —————— the convergence —————— */}
      <div style={{ padding:'90px 56px', background:T4.paper, borderBottom:`1px solid ${T4.rule}`, position:'relative' }}>
        <PaperTexture w={1400} h={680} opacity={0.18}/>
        <div style={{ position:'relative', maxWidth:1180, margin:'0 auto', display:'grid', gridTemplateColumns:'1fr 1.1fr', gap:60, alignItems:'center' }}>
          <div>
            <Rubric4 size={10}>§ iii  ·  the convergence</Rubric4>
            <h2 style={{ fontFamily:T4.display, fontSize:62, lineHeight:1, color:T4.ink, margin:'14px 0 22px', fontWeight:400 }}>
              What ten traditions <span style={{fontFamily:T4.serif, fontStyle:'italic'}}>agree on</span> about thee.
            </h2>
            <p style={{ fontFamily:T4.serif, fontSize:18, lineHeight:1.6, color:T4.ink2 }}>
              <span style={{ float:'left', fontFamily:T4.display, fontSize:78, lineHeight:0.85, color:T4.madder, marginRight:10, marginTop:6, fontWeight:400 }}>I</span>
              t is one thing for a Vedic astrologer to call thee a Seeker. It is another when the Yoruba babalawo, the Mayan day-keeper, and the Big-Five questionnaire say so without speaking. The reading lays the ten verdicts beside one another and shows where they coincide — and where, beautifully, they disagree.
            </p>
            <Catalog style={{marginTop:28}}/>
          </div>

          {/* convergence diagram — concentric */}
          <div style={{ aspectRatio:'1/1', position:'relative', maxWidth:480, margin:'0 auto' }}>
            <MapBorder style={{aspectRatio:'1/1', background:T4.cream, padding:24, position:'relative'}}>
              <PaperTexture w={460} h={460} opacity={0.25}/>
              <svg viewBox="-110 -110 220 220" style={{width:'100%', height:'100%', position:'relative'}}>
                {/* outer ring of 10 traditions */}
                {[
                  ['Astrologia','western'],['Jyotiṣa','vedic'],['Bā Zì','bazi'],['Yì Jīng','iching'],['Ifá','ifa'],
                  ['Tzolk\'in','tzolkin'],['Kyūsei','nine_star'],['Enneatypon','enneagram'],['Quinque','bigfive'],['Āyurveda','ayurveda'],
                ].map(([name,sig],i)=>{
                  const a=(i*36-90)*Math.PI/180;
                  const x=Math.cos(a)*88, y=Math.sin(a)*88;
                  return (
                    <g key={i}>
                      <line x1="0" y1="0" x2={x*0.5} y2={y*0.5} stroke={T4.rule} strokeWidth="0.4" opacity="0.6"/>
                      <circle cx={x} cy={y} r="14" fill={T4.cream} stroke={T4.ink} strokeWidth="0.6"/>
                      <text x={x} y={y-22} textAnchor="middle" fontFamily={T4.small} fontSize="6" fill={T4.ink} letterSpacing="1">{name.toUpperCase()}</text>
                      <g transform={`translate(${x-11},${y-11}) scale(0.5)`}>
                        <Sigil tradition={sig} size={44} color={T4.ink}/>
                      </g>
                    </g>
                  );
                })}
                {/* center */}
                <circle r="34" fill={T4.ink} stroke={T4.ochre} strokeWidth="1"/>
                <text y="-4" textAnchor="middle" fontFamily={T4.display} fontSize="9" fill={T4.paper} letterSpacing="2">THOU</text>
                <text y="8" textAnchor="middle" fontFamily={T4.serif} fontStyle="italic" fontSize="7" fill={T4.ochre}>art here</text>
              </svg>
            </MapBorder>
            <div style={{textAlign:'center', marginTop:10}}><Rubric4 size={9}>fig. ii  ·  the wheel of agreement</Rubric4></div>
          </div>
        </div>
      </div>

      {/* —————— sample finding —————— */}
      <div style={{ padding:'90px 56px', background:T4.ink, color:T4.paper, position:'relative', borderBottom:`4px solid ${T4.ochre}` }}>
        <div style={{ maxWidth:1080, margin:'0 auto' }}>
          <div style={{textAlign:'center', marginBottom:36}}>
            <Rubric4 size={10} color={T4.ochre}>§ iv  ·  a finding from the field</Rubric4>
            <h2 style={{ fontFamily:T4.display, fontSize:54, lineHeight:1.05, color:T4.paper, margin:'14px 0 8px', fontWeight:400 }}>
              "Six of ten traditions name thee <span style={{fontFamily:T4.serif, fontStyle:'italic', color:T4.ochre}}>a bridge</span>."
            </h2>
            <p style={{fontFamily:T4.serif, fontSize:15, fontStyle:'italic', color:T4.paper3}}>excerpt from the reading of m·i·n, b. lima, 1989</p>
          </div>

          <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:0, border:`1px solid ${T4.ochre}` }}>
            {[
              ['western',  'Astrologia',  'Libra rising · venus exalted',                  'a peace-keeper'],
              ['vedic',    'Jyotiṣa',     'Tula lagna · Viśākhā nakṣatra',                'one who reconciles'],
              ['bazi',     'Bā Zì',       'metal day · earth supports',                    'a vessel for others'],
              ['iching',   'Yì Jīng',     'hexagram 14 · 大有 · the great possession',     'one who gathers'],
              ['ifa',      'Ifá',         'Òdí Méjì',                                      'a binder of broken things'],
              ['enneagram','Enneatypon',  'type 9 · with 1-wing',                          'a peacemaker'],
            ].map(([sig,name,verdict,gloss],i)=>(
              <div key={i} style={{
                padding:'24px 22px', background: i%2===0?'rgba(168,122,44,0.06)':'transparent',
                borderRight: (i%3)<2 ? `1px solid ${T4.ochre}` : 'none',
                borderBottom: i<3 ? `1px solid ${T4.ochre}` : 'none',
              }}>
                <div style={{display:'flex', alignItems:'center', gap:10, marginBottom:10}}>
                  <Sigil tradition={sig} size={26} color={T4.ochre}/>
                  <Rubric4 size={9} color={T4.ochre}>{name}</Rubric4>
                </div>
                <div style={{fontFamily:T4.serif, fontSize:15, color:T4.paper, marginBottom:6, fontStyle:'italic'}}>{verdict}</div>
                <div style={{fontFamily:T4.serif, fontSize:14, color:T4.paper3}}>↳ <em>{gloss}</em></div>
              </div>
            ))}
          </div>
          <div style={{textAlign:'center', marginTop:36, fontFamily:T4.serif, fontSize:18, fontStyle:'italic', color:T4.paper2, lineHeight:1.5}}>
            "Where six tongues use one word, the meaning has weight."
            <div style={{marginTop:10}}><Rubric4 size={9} color={T4.ochre}>— from the keeper's preface</Rubric4></div>
          </div>
        </div>
      </div>

      {/* —————— the keeper —————— */}
      <div style={{ padding:'90px 56px', background:T4.paper, borderBottom:`1px solid ${T4.rule}`, position:'relative' }}>
        <PaperTexture w={1400} h={620} opacity={0.18}/>
        <div style={{ position:'relative', maxWidth:1180, margin:'0 auto', display:'grid', gridTemplateColumns:'1fr 1.3fr', gap:70, alignItems:'center' }}>
          <SagePortrait w={420} h={500}/>
          <div>
            <Rubric4 size={10}>§ v  ·  the keeper</Rubric4>
            <h2 style={{ fontFamily:T4.display, fontSize:60, lineHeight:1, color:T4.ink, margin:'14px 0 22px', fontWeight:400 }}>
              The library has <span style={{fontFamily:T4.serif, fontStyle:'italic'}}>one keeper</span>.
            </h2>
            <p style={{ fontFamily:T4.serif, fontSize:18, lineHeight:1.6, color:T4.ink2, marginBottom:18 }}>
              She has been studying for thirty years — Kyōto and Varanasi, Ile-Ife and Antigua, Beijing and Athens. She is not a guru. She does not wear costumes. She is a scholar who became a sage by the slow method: by reading every tradition in its own language and waiting until they began to speak to one another.
            </p>
            <p style={{ fontFamily:T4.serif, fontSize:18, fontStyle:'italic', lineHeight:1.6, color:T4.ink3 }}>
              She does not read thee herself. She built a method that does — and trains the readers who deliver it. <em>Tamashi</em> is her library, made available to thee.
            </p>
            <Catalog style={{marginTop:30}}/>
            <div style={{display:'flex', gap:24, marginTop:24, flexWrap:'wrap'}}>
              {[
                ['xxx','years studying'],
                ['xii','cities resident'],
                ['x','traditions held'],
                ['vi','languages read'],
              ].map(([n,l],i)=>(
                <div key={i}>
                  <div style={{fontFamily:T4.display, fontSize:38, color:T4.ink, lineHeight:1, letterSpacing:2}}>{n}</div>
                  <Rubric4 size={9} style={{display:'block', marginTop:4}}>{l}</Rubric4>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      {/* —————— the offering —————— */}
      <div style={{ padding:'90px 56px', background:T4.paper2, borderBottom:`1px solid ${T4.rule}`, position:'relative' }}>
        <PaperTexture w={1400} h={680} opacity={0.18}/>
        <div style={{ position:'relative', maxWidth:1240, margin:'0 auto' }}>
          <div style={{textAlign:'center', marginBottom:48}}>
            <Rubric4 size={10}>§ vi  ·  the offering</Rubric4>
            <h2 style={{ fontFamily:T4.display, fontSize:58, lineHeight:1, color:T4.ink, margin:'14px 0 8px', fontWeight:400 }}>
              Three ways to enter <span style={{fontFamily:T4.serif, fontStyle:'italic'}}>the library</span>.
            </h2>
          </div>
          <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr 1fr', border:`1px solid ${T4.ink}`, background:T4.cream }}>
            {[
              { n:'I',   t:'The Visit',     p:'0',   per:'a single afternoon',
                d:'A reading from three of the ten traditions — chosen by the keeper to fit thy season.',
                f:['Three traditions, briefly read','One convergence finding','A printed catalogue card'], cta:'Begin freely', primary:false },
              { n:'II',  t:'The Volume',    p:'89',  per:'sealed once · thine forever',
                d:'The full reading, all ten traditions, bound in a single illuminated volume.',
                f:['All ten traditions, in depth','The convergence wheel','A 42-minute narration','A printed broadside, posted','One year of new transits'], cta:'Open the Volume', primary:true },
              { n:'III', t:'The Residency', p:'24',  per:'per month · cancel at any hour',
                d:'The Volume, held living. New findings each season. The keeper\'s reader, available by letter.',
                f:['Everything in the Volume','Quarterly transit chapters','Letters with thy reader','Pairings — for two souls','The annual journal'], cta:'Take residency', primary:false },
            ].map((t,i)=>(
              <div key={i} style={{
                padding:'34px 30px',
                borderRight: i<2 ? `1px solid ${T4.rule}` : 'none',
                background: t.primary ? T4.ink : 'transparent',
                color: t.primary ? T4.paper : T4.ink,
                position:'relative',
              }}>
                <Rubric4 size={9} color={t.primary ? T4.ochre : T4.madder}>№ {t.n}  ·  {t.per}</Rubric4>
                <h3 style={{ fontFamily:T4.display, fontSize:36, lineHeight:1, color: t.primary?T4.paper:T4.ink, margin:'12px 0 14px', fontWeight:400 }}>{t.t}</h3>
                <div style={{ fontFamily:T4.serif, fontSize:64, lineHeight:1, color: t.primary?T4.ochre:T4.ink, letterSpacing:-1 }}>
                  <span style={{fontSize:24, color:t.primary?T4.paper3:T4.ink3, verticalAlign:'top'}}>$</span>{t.p}
                </div>
                <p style={{ fontFamily:T4.serif, fontSize:14, lineHeight:1.55, fontStyle:'italic', color: t.primary?T4.paper3:T4.ink3, margin:'14px 0 18px', minHeight:50 }}>{t.d}</p>
                <div style={{borderTop:`1px solid ${t.primary?T4.ochre:T4.rule}`, paddingTop:14}}>
                  {t.f.map((l,j)=>(
                    <div key={j} style={{ display:'flex', gap:10, fontFamily:T4.serif, fontSize:14, padding:'6px 0', color: t.primary?T4.paper2:T4.ink2 }}>
                      <span style={{color:t.primary?T4.ochre:T4.madder, fontFamily:T4.display}}>·</span>
                      <span>{l}</span>
                    </div>
                  ))}
                </div>
                <div style={{ marginTop:24, padding:'14px 0', textAlign:'center', background: t.primary?T4.ochre:T4.ink, color:t.primary?T4.ink:T4.paper, fontFamily:T4.sans, fontSize:13, letterSpacing:3, textTransform:'uppercase' }}>
                  {t.cta}  →
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* —————— testimonials, three voices three cities —————— */}
      <div style={{ padding:'90px 56px', background:T4.paper, borderBottom:`1px solid ${T4.rule}` }}>
        <div style={{ maxWidth:1180, margin:'0 auto' }}>
          <div style={{textAlign:'center', marginBottom:48}}>
            <Rubric4 size={10}>§ vii  ·  voices from the catalogue</Rubric4>
            <h2 style={{ fontFamily:T4.display, fontSize:54, lineHeight:1, color:T4.ink, margin:'14px 0', fontWeight:400 }}>Three voices. <span style={{fontFamily:T4.serif, fontStyle:'italic'}}>Three cities.</span></h2>
          </div>
          <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:36 }}>
            {[
              ['"I had a Vedic chart, an enneagram report, and a Big-Five score. None of them spoke to each other. Tamashi made them argue and agree in the same room."', 'A. Subramanian', 'Madras', '⌖'],
              ['"It found a thread in my life that I had never seen — running from my Yoruba grandmother to my Greek mother to me. I cried at the convergence page."', 'A. Adékúnlé-Pappás', 'Lagos · Athens', '⌖'],
              ['"I have ordered readings for forty years. This was the first one written by someone who had read all the others."', 'M. Hayashida', 'Kyōto', '⌖'],
            ].map(([q,n,c,m],i)=>(
              <div key={i} style={{ padding:'30px 28px', borderTop:`2px solid ${T4.ink}`, position:'relative' }}>
                <div style={{ fontFamily:T4.display, fontSize:54, color:T4.madder, lineHeight:0.7, opacity:0.8, marginBottom:8 }}>"</div>
                <p style={{ fontFamily:T4.serif, fontSize:18, fontStyle:'italic', lineHeight:1.55, color:T4.ink2, margin:'0 0 22px' }}>{q}</p>
                <div style={{display:'flex', justifyContent:'space-between', alignItems:'baseline'}}>
                  <Rubric4 size={9} color={T4.ink}>{n}</Rubric4>
                  <span style={{fontFamily:T4.small, fontSize:11, color:T4.ink3, letterSpacing:1.5}}>{m} {c}</span>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* —————— closing CTA —————— */}
      <div style={{ padding:'120px 56px', background:T4.cream, position:'relative', borderBottom:`1px solid ${T4.rule}` }}>
        <PaperTexture w={1400} h={520} opacity={0.22}/>
        <div style={{ position:'relative', maxWidth:920, margin:'0 auto', textAlign:'center' }}>
          <Rubric4 size={10}>§ viii  ·  the threshold</Rubric4>
          <h2 style={{ fontFamily:T4.display, fontSize:104, lineHeight:0.96, color:T4.ink, margin:'20px 0 22px', fontWeight:400 }}>
            The library has <span style={{fontFamily:T4.serif, fontStyle:'italic'}}>opened</span><br/>its catalogue to thee.
          </h2>
          <p style={{ fontFamily:T4.serif, fontSize:20, fontStyle:'italic', color:T4.ink3, margin:'0 0 36px', lineHeight:1.55 }}>
            Tell only the date, the hour, and the place thou drewest first breath.<br/>The traditions will do the rest.
          </p>
          <div style={{ display:'inline-block', background:T4.ink, color:T4.paper, padding:'22px 56px', fontFamily:T4.sans, fontSize:15, letterSpacing:4, textTransform:'uppercase' }}>
            Begin a reading  →
          </div>
          <div style={{ marginTop:18 }}><Rubric4 size={9}>without coin · without obligation · 4-and-twenty minutes</Rubric4></div>
        </div>
      </div>

      {/* —————— footer · colophon —————— */}
      <div style={{ padding:'56px 56px 32px', background:T4.paper3, color:T4.ink2 }}>
        <div style={{ maxWidth:1280, margin:'0 auto' }}>
          <Catalog mark="᠅"/>
          <div style={{ display:'grid', gridTemplateColumns:'2.2fr 1fr 1fr 1fr 1fr', gap:30, margin:'30px 0' }}>
            <div>
              <div style={{ fontFamily:T4.display, fontSize:32, color:T4.ink, letterSpacing:8 }}>TAMASHI</div>
              <p style={{fontFamily:T4.serif, fontStyle:'italic', fontSize:13, color:T4.ink2, marginTop:10, maxWidth:340, lineHeight:1.55}}>
                A library of the world's traditions of self-knowledge — gathered, translated, cross-referenced, and made available to thee.
              </p>
              <div style={{marginTop:14}}><Rubric4 size={9}>est. mmxxiv  ·  marrakech · kyōto · lima · lagos</Rubric4></div>
            </div>
            {[
              ['the reading',['the visit','the volume','the residency','pairings']],
              ['the traditions',['catalogue','the keeper','the readers','our method']],
              ['of the house',['of privacy','of refunds','of language','press']],
              ['correspondence',['by letter','by ledger','the journal','gift a reading']],
            ].map(([h,r],i)=>(
              <div key={i}>
                <Rubric4 size={9}>{h}</Rubric4>
                <div style={{marginTop:10}}>{r.map((s,j)=>(<div key={j} style={{fontFamily:T4.serif, fontSize:13, padding:'4px 0', color:T4.ink2}}>{s}</div>))}</div>
              </div>
            ))}
          </div>
          <Hair color={T4.ink} opacity={0.3}/>
          <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', paddingTop:16, fontFamily:T4.small, fontSize:10, color:T4.ink3, letterSpacing:1.5, fontVariant:'small-caps'}}>
            <span>© anno domini mmxxvi  ·  the house of tamashi</span>
            <span>᠅ what every soul has, every soul deserves to know ᠅</span>
            <span>terms · privacy · cookies · sitemap</span>
          </div>
        </div>
      </div>
    </div>
  );
}

// —————————————————————————————————————————————————
// Mobile
// —————————————————————————————————————————————————
function TamashiV4HomeMobile() {
  return (
    <div style={{ width:390, background:T4.paper, color:T4.ink, fontFamily:T4.body, position:'relative' }}>
      {/* masthead */}
      <div style={{ borderBottom:`1px solid ${T4.rule}`, padding:'10px 18px', textAlign:'center', background:T4.cream, position:'relative' }}>
        <PaperTexture w={390} h={40} opacity={0.12}/>
        <Rubric4 size={8} style={{position:'relative'}}>vol. iv · no. xxiii · apr mmxxvi</Rubric4>
      </div>

      {/* wordmark */}
      <div style={{ padding:'24px 18px 18px', textAlign:'center', borderBottom:`1px solid ${T4.rule}`, position:'relative', background:T4.paper }}>
        <PaperTexture w={390} h={120} opacity={0.18}/>
        <div style={{position:'relative'}}>
          <Rubric4 size={8}>a library of every tradition</Rubric4>
          <div style={{ fontFamily:T4.display, fontSize:34, letterSpacing:8, color:T4.ink, marginTop:8, marginBottom:4 }}>TAMASHI</div>
          <Rubric4 size={8} color={T4.ink3}>᠅  every soul, in every tongue  ᠅</Rubric4>
        </div>
      </div>

      {/* hero */}
      <div style={{ padding:'34px 20px 36px', position:'relative', borderBottom:`1px solid ${T4.rule}` }}>
        <PaperTexture w={390} h={620} opacity={0.22}/>
        <div style={{position:'relative', textAlign:'center'}}>
          <Rubric4 size={9}>§ i · the premise</Rubric4>
          <h1 style={{ fontFamily:T4.display, fontSize:42, lineHeight:0.98, color:T4.ink, margin:'12px 0 14px', fontWeight:400 }}>
            Every civilisation devised a way to read <span style={{fontFamily:T4.serif, fontStyle:'italic'}}>you</span>.
          </h1>
          <p style={{ fontFamily:T4.serif, fontSize:15, lineHeight:1.55, color:T4.ink2, margin:'0 auto 20px', maxWidth:340 }}>
            Greek planets. Vedic kundali. Yoruba odù. Mayan tzolk'in. Bā Zì. The Big Five. Each holds a piece. <em>Tamashi</em> reads thee through every one — and tells thee what they all agree on.
          </p>
          <div style={{margin:'0 auto 20px', display:'inline-block'}}>
            <SagePortrait w={240} h={280}/>
          </div>
          <div style={{ background:T4.ink, color:T4.paper, padding:'14px 24px', fontFamily:T4.sans, fontSize:12, letterSpacing:3, textTransform:'uppercase', display:'inline-block' }}>Begin a reading  →</div>
          <div style={{marginTop:10}}><Rubric4 size={9}>10 traditions · cross-referenced · one reading</Rubric4></div>
        </div>
        <div style={{marginTop:30, paddingTop:20, borderTop:`1px solid ${T4.rule}`}}>
          <div style={{textAlign:'center', marginBottom:10}}><Rubric4 size={8}>the same word · in ten tongues</Rubric4></div>
          <SoulInScripts size={14} color={T4.ink2}/>
        </div>
      </div>

      {/* catalogue */}
      <div style={{ padding:'40px 18px', background:T4.paper2, borderBottom:`1px solid ${T4.rule}`, position:'relative' }}>
        <PaperTexture w={390} h={780} opacity={0.18}/>
        <div style={{position:'relative'}}>
          <div style={{textAlign:'center', marginBottom:24}}>
            <Rubric4 size={9}>§ ii · the catalogue</Rubric4>
            <h2 style={{ fontFamily:T4.display, fontSize:32, lineHeight:1, color:T4.ink, margin:'10px 0 0', fontWeight:400 }}>Ten traditions. <em style={{fontFamily:T4.serif}}>One reading.</em></h2>
          </div>
          <div style={{border:`1px solid ${T4.ink}`, background:T4.cream}}>
            {[
              ['I','Astrologia','western','♈♉♊'],
              ['II','Jyotiṣa','vedic','ज्योतिष'],
              ['III','Bā Zì','bazi','八字'],
              ['IV','Yì Jīng','iching','易經'],
              ['V','Ifá','ifa','ọdù'],
              ['VI','Tzolk\'in','tzolkin','k\'iche\''],
              ['VII','Kyūsei','nine_star','九星'],
              ['VIII','Enneatypon','enneagram','ix'],
              ['IX','Quinque','bigfive','OCEAN'],
              ['X','Āyurveda','ayurveda','आयुर्वेद'],
            ].map(([n,name,sig,script],i)=>(
              <div key={i} style={{
                display:'grid', gridTemplateColumns:'30px 28px 1fr auto',
                padding:'14px 14px', alignItems:'center', gap:12,
                borderBottom: i<9 ? `1px solid ${T4.rule}` : 'none',
                background: i%2===0 ? T4.cream : T4.paper,
              }}>
                <div style={{fontFamily:T4.display, fontSize:14, color:T4.ink3}}>{n}</div>
                <Sigil tradition={sig} size={22} color={T4.ink}/>
                <div style={{fontFamily:T4.display, fontSize:17, color:T4.ink}}>{name}</div>
                <div style={{fontFamily:T4.serif, fontSize:14, color:T4.madder}}>{script}</div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* convergence diagram */}
      <div style={{padding:'40px 18px', borderBottom:`1px solid ${T4.rule}`, position:'relative'}}>
        <PaperTexture w={390} h={520} opacity={0.18}/>
        <div style={{position:'relative', textAlign:'center'}}>
          <Rubric4 size={9}>§ iii · the convergence</Rubric4>
          <h2 style={{ fontFamily:T4.display, fontSize:32, lineHeight:1, color:T4.ink, margin:'10px 0 14px', fontWeight:400 }}>What ten traditions <em style={{fontFamily:T4.serif}}>agree on</em>.</h2>
          <p style={{fontFamily:T4.serif, fontSize:14, lineHeight:1.55, color:T4.ink2, marginBottom:24}}>The reading lays the ten verdicts beside one another and shows where they coincide — and where, beautifully, they disagree.</p>
          <MapBorder style={{aspectRatio:'1/1', background:T4.cream, padding:14, position:'relative', maxWidth:340, margin:'0 auto'}}>
            <PaperTexture w={310} h={310} opacity={0.25}/>
            <svg viewBox="-110 -110 220 220" style={{width:'100%', height:'100%', position:'relative'}}>
              {[['western'],['vedic'],['bazi'],['iching'],['ifa'],['tzolkin'],['nine_star'],['enneagram'],['bigfive'],['ayurveda']].map(([s],i)=>{
                const a=(i*36-90)*Math.PI/180;
                const x=Math.cos(a)*84, y=Math.sin(a)*84;
                return (<g key={i}>
                  <line x1="0" y1="0" x2={x*0.5} y2={y*0.5} stroke={T4.rule} strokeWidth="0.4" opacity="0.6"/>
                  <circle cx={x} cy={y} r="13" fill={T4.cream} stroke={T4.ink} strokeWidth="0.5"/>
                  <g transform={`translate(${x-9},${y-9}) scale(0.4)`}><Sigil tradition={s} size={44} color={T4.ink}/></g>
                </g>);
              })}
              <circle r="30" fill={T4.ink} stroke={T4.ochre} strokeWidth="0.8"/>
              <text y="-2" textAnchor="middle" fontFamily={T4.display} fontSize="9" fill={T4.paper} letterSpacing="2">THOU</text>
              <text y="9" textAnchor="middle" fontFamily={T4.serif} fontStyle="italic" fontSize="7" fill={T4.ochre}>art here</text>
            </svg>
          </MapBorder>
        </div>
      </div>

      {/* sample finding */}
      <div style={{padding:'40px 20px', background:T4.ink, color:T4.paper, borderBottom:`3px solid ${T4.ochre}`}}>
        <div style={{textAlign:'center', marginBottom:20}}>
          <Rubric4 size={9} color={T4.ochre}>§ iv · a finding</Rubric4>
          <h2 style={{ fontFamily:T4.display, fontSize:30, lineHeight:1.1, color:T4.paper, margin:'10px 0', fontWeight:400 }}>"Six of ten name thee <em style={{fontFamily:T4.serif, color:T4.ochre}}>a bridge</em>."</h2>
        </div>
        <div style={{border:`1px solid ${T4.ochre}`}}>
          {[
            ['western','Astrologia','libra rising · venus exalted','a peace-keeper'],
            ['vedic','Jyotiṣa','tula lagna · viśākhā','one who reconciles'],
            ['ifa','Ifá','òdí méjì','a binder of broken things'],
            ['enneagram','Enneatypon','type 9 · with 1-wing','a peacemaker'],
          ].map(([s,n,v,g],i)=>(
            <div key={i} style={{padding:'14px 16px', borderBottom: i<3 ? `1px solid ${T4.ochre}` : 'none'}}>
              <div style={{display:'flex', alignItems:'center', gap:8, marginBottom:4}}>
                <Sigil tradition={s} size={20} color={T4.ochre}/>
                <Rubric4 size={8} color={T4.ochre}>{n}</Rubric4>
              </div>
              <div style={{fontFamily:T4.serif, fontSize:14, fontStyle:'italic', color:T4.paper}}>{v}</div>
              <div style={{fontFamily:T4.serif, fontSize:13, color:T4.paper3}}>↳ {g}</div>
            </div>
          ))}
        </div>
      </div>

      {/* keeper */}
      <div style={{padding:'40px 20px', borderBottom:`1px solid ${T4.rule}`, position:'relative'}}>
        <PaperTexture w={390} h={620} opacity={0.18}/>
        <div style={{position:'relative', textAlign:'center'}}>
          <Rubric4 size={9}>§ v · the keeper</Rubric4>
          <h2 style={{ fontFamily:T4.display, fontSize:32, lineHeight:1, color:T4.ink, margin:'10px 0 16px', fontWeight:400 }}>The library has <em style={{fontFamily:T4.serif}}>one keeper</em>.</h2>
          <SagePortrait w={240} h={280}/>
          <p style={{ fontFamily:T4.serif, fontSize:14, lineHeight:1.6, color:T4.ink2, margin:'18px auto 0', maxWidth:340 }}>
            Thirty years of study — Kyōto, Varanasi, Ile-Ife, Antigua, Beijing, Athens. A scholar who became a sage by the slow method: reading every tradition in its own language until they began to speak to one another.
          </p>
          <div style={{display:'flex', justifyContent:'center', gap:18, marginTop:20, flexWrap:'wrap'}}>
            {[['xxx','years'],['xii','cities'],['x','traditions'],['vi','languages']].map(([n,l],i)=>(
              <div key={i} style={{textAlign:'center'}}>
                <div style={{fontFamily:T4.display, fontSize:24, color:T4.ink, letterSpacing:1.5}}>{n}</div>
                <Rubric4 size={8}>{l}</Rubric4>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* offering */}
      <div style={{padding:'40px 18px', background:T4.paper2, borderBottom:`1px solid ${T4.rule}`}}>
        <div style={{textAlign:'center', marginBottom:20}}>
          <Rubric4 size={9}>§ vi · the offering</Rubric4>
          <h2 style={{ fontFamily:T4.display, fontSize:30, lineHeight:1, color:T4.ink, margin:'10px 0', fontWeight:400 }}>Three ways to enter.</h2>
        </div>
        {[
          {n:'I',t:'The Visit',p:'0',d:'Three traditions · one finding',primary:false},
          {n:'II',t:'The Volume',p:'89',d:'All ten traditions · sealed forever',primary:true},
          {n:'III',t:'The Residency',p:'24',d:'The Volume, held living · per month',primary:false},
        ].map((t,i)=>(
          <div key={i} style={{
            margin:'12px 0', padding:'18px 18px',
            background: t.primary ? T4.ink : T4.cream,
            color: t.primary ? T4.paper : T4.ink,
            border:`1px solid ${t.primary ? T4.ochre : T4.ink}`,
          }}>
            <div style={{display:'flex', justifyContent:'space-between', alignItems:'baseline'}}>
              <div>
                <Rubric4 size={8} color={t.primary?T4.ochre:T4.madder}>№ {t.n}</Rubric4>
                <div style={{fontFamily:T4.display, fontSize:24, color:t.primary?T4.paper:T4.ink, marginTop:4, lineHeight:1}}>{t.t}</div>
                <div style={{fontFamily:T4.serif, fontSize:12, fontStyle:'italic', color:t.primary?T4.paper3:T4.ink3, marginTop:4}}>{t.d}</div>
              </div>
              <div style={{fontFamily:T4.serif, fontSize:34, color:t.primary?T4.ochre:T4.ink, letterSpacing:-1}}>
                <span style={{fontSize:14, color:t.primary?T4.paper3:T4.ink3}}>$</span>{t.p}
              </div>
            </div>
            <div style={{marginTop:14, padding:'10px 0', textAlign:'center', background:t.primary?T4.ochre:T4.ink, color:t.primary?T4.ink:T4.paper, fontFamily:T4.sans, fontSize:11, letterSpacing:3, textTransform:'uppercase'}}>Choose →</div>
          </div>
        ))}
      </div>

      {/* closing CTA */}
      <div style={{padding:'60px 20px', background:T4.cream, textAlign:'center', position:'relative', borderBottom:`1px solid ${T4.rule}`}}>
        <PaperTexture w={390} h={400} opacity={0.22}/>
        <div style={{position:'relative'}}>
          <Rubric4 size={9}>§ vii · the threshold</Rubric4>
          <h2 style={{ fontFamily:T4.display, fontSize:42, lineHeight:0.98, color:T4.ink, margin:'14px 0 14px', fontWeight:400 }}>
            The library has <em style={{fontFamily:T4.serif}}>opened</em> its catalogue.
          </h2>
          <p style={{ fontFamily:T4.serif, fontSize:14, fontStyle:'italic', color:T4.ink3, margin:'0 0 20px', lineHeight:1.55 }}>
            Tell only the date, the hour, and the place thou drewest first breath.
          </p>
          <div style={{ background:T4.ink, color:T4.paper, padding:'16px 28px', fontFamily:T4.sans, fontSize:12, letterSpacing:3, textTransform:'uppercase', display:'inline-block' }}>Begin a reading  →</div>
        </div>
      </div>

      {/* footer */}
      <div style={{padding:'30px 20px 24px', background:T4.paper3, color:T4.ink2, textAlign:'center'}}>
        <div style={{ fontFamily:T4.display, fontSize:24, color:T4.ink, letterSpacing:6 }}>TAMASHI</div>
        <div style={{fontFamily:T4.serif, fontStyle:'italic', fontSize:11, color:T4.ink2, marginTop:6}}>marrakech · kyōto · lima · lagos · est. mmxxiv</div>
        <Catalog mark="᠅" style={{marginTop:14, marginBottom:10}}/>
        <Rubric4 size={8}>᠅ what every soul has, every soul deserves to know ᠅</Rubric4>
      </div>
    </div>
  );
}

Object.assign(window, { TamashiV4HomeDesktop, TamashiV4HomeMobile });
