/* TAN GLOBAL STUDIOS — design tokens
   Aligned to tangloballlc.com (Cormorant Garamond display / Barlow text, gold #d4a848).
   Studio keeps its own navy so the two sites read as siblings, not clones. */
:root {
  --navy:#142b4b; --navy-deep:#0b1b31; --navy-panel:#1d3b62;
  --cream:#f5f0df; --cream-2:#ece6d2;
  --gold:#d4a848; --gold-hover:#c79f40; --gold-ink:#8a6d22;
  --ink:#142b4b; --ink-soft:#4e5d6e; --muted:#6f7c8c;
  --on-dark:#e9e4d3; --on-dark-soft:#c5cdd6;
  --display:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --text:'Barlow', Arial, Helvetica, sans-serif;
  --gutter:clamp(20px, 7vw, 120px);
  --measure:62ch;
  --bg:var(--navy-deep); --light:var(--cream); --accent:var(--gold); --fc:var(--text);
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
body { margin:0; background:var(--cream); color:var(--ink); font-family:var(--text); font-weight:400; line-height:1.55; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; height:auto; }
:focus-visible { outline:2px solid var(--gold); outline-offset:3px; }
:focus:not(:focus-visible) { outline:none; }
.skip { position:absolute; left:-999px; top:8px; background:var(--gold); color:var(--navy-deep); padding:8px 14px; z-index:9; }
.skip:focus { left:8px; }

h1,h2,h3 { font-family:var(--display); font-weight:500; margin:0; }
p { margin:0; }
h1 { font-size:clamp(3.2rem, 7vw, 6.6rem); letter-spacing:-.03em; line-height:.98; margin-bottom:30px; }
h2 { font-size:clamp(2.4rem, 4.6vw, 4.4rem); letter-spacing:-.02em; line-height:1.04; }
h1 em,h2 em { color:var(--gold); font-style:italic; font-weight:400; }
.h-small { font-size:clamp(1.6rem, 2.6vw, 2.4rem); }
.eyebrow { color:var(--gold); font-size:.74rem; font-weight:500; letter-spacing:.18em; margin:0 0 20px; text-transform:uppercase; }

/* header */
.site-header { align-items:center; display:flex; justify-content:space-between; padding:26px var(--gutter); position:absolute; top:0; width:100%; z-index:2; }
.wordmark { white-space:nowrap; color:var(--cream); font-size:.86rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase; }
.wordmark span { color:var(--gold); }
nav { display:flex; gap:28px; }
nav a { color:var(--on-dark); font-size:.78rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; }
nav a:hover { color:var(--gold); }

/* hero */
.hero { background:var(--navy); color:var(--cream); display:grid; gap:5vw; grid-template-columns:1.1fr .9fr; min-height:700px; overflow:hidden; padding:170px var(--gutter) 110px; position:relative; }
.hero:after { pointer-events:none; border:1px solid rgba(212,168,72,.55); border-radius:50%; content:""; height:620px; position:absolute; right:-150px; top:80px; transform:rotate(-15deg); width:830px; }
.hero-copy,.hero-mark { position:relative; z-index:1; }
.hero-copy,.hero-mark { min-width:0; }
.hero-copy { align-self:center; max-width:640px; }
.hero-intro { color:var(--on-dark-soft); font-size:1.12rem; font-weight:300; max-width:34em; }
.hero-actions { display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }
.hero-mark { align-self:center; display:flex; flex-direction:column; justify-content:center; position:relative; }
.ignition-wrap { max-width:100%; position:relative; width:600px; } .ignition-wrap img { display:block; width:100%; } .ignition-mark { display:block; height:100%; left:0; overflow:visible; position:absolute; top:0; width:100%; } .ring-guide { fill:none; stroke:none; } .orbiting-star { transform-box:fill-box; transform-origin:center; } .spark-core { transform-box:fill-box; transform-origin:center; }

.button { border:1px solid var(--gold); color:var(--cream); display:inline-flex; gap:18px; padding:14px 20px; text-transform:uppercase; letter-spacing:.12em; font-size:.72rem; font-weight:500; }
.button span { color:var(--gold); }
.button:hover { background:var(--gold); color:var(--navy-deep); }
.button:hover span { color:var(--navy-deep); }
.button-ghost { border-color:rgba(245,240,223,.35); }
.text-link { border-bottom:1px solid rgba(212,168,72,.6); color:var(--gold); font-size:.92rem; }
.text-link:hover { border-color:currentColor; color:var(--cream); }

/* generic section chrome */
.section-heading { align-items:end; display:grid; gap:40px; grid-template-columns:1.2fr .8fr; margin-bottom:56px; }
.section-intro { color:var(--ink-soft); font-size:1.05rem; max-width:var(--measure); }
.updates-section .section-heading { grid-template-columns:1fr; }

/* studio */
.studio-section { padding:120px var(--gutter); }
.pillars { display:grid; gap:18px; grid-template-columns:repeat(3,1fr); }
.pillar { background:var(--cream-2); padding:34px 30px 38px; }
.pillar h3 { font-size:1.7rem; margin-bottom:12px; }
.pillar p { color:var(--ink-soft); }
.capability-strip { border-top:1px solid rgba(20,43,75,.25); display:flex; flex-wrap:wrap; gap:0 36px; list-style:none; margin:48px 0 0; padding:22px 0 0; }
.capability-strip li { color:var(--ink-soft); font-size:.9rem; padding:6px 0; }
.capability-strip li:before { color:var(--gold); content:"◆"; font-size:.55rem; margin-right:12px; position:relative; top:-2px; }

/* worlds */
.worlds-section { background:var(--navy-deep); color:var(--cream); padding:120px var(--gutter); }
.worlds-section .section-intro { color:var(--on-dark-soft); }
.world-tabs { border-bottom:1px solid rgba(212,168,72,.35); display:flex; gap:34px; }
.world-tab { background:none; border:0; border-bottom:2px solid transparent; color:#93a1b3; cursor:pointer; font:inherit; font-family:var(--display); font-size:1.35rem; font-weight:500; margin-bottom:-1px; padding:0 0 14px; }
.world-tab:hover { color:var(--cream); }
.world-tab.is-active { border-color:var(--gold); color:var(--cream); }
.world-panel[hidden] { display:none; }
.world-panel { display:grid; grid-template-columns:.85fr 1.15fr; margin-top:40px; }
.world-art { align-items:center; display:flex; justify-content:center; padding:36px; }
.world-art img { max-width:min(100%, 440px); }
.world-art-liri { background:#2a4671; }
.world-art-nevo { background:#d7c79c; }
.world-copy { background:var(--navy-panel); padding:48px 52px 52px; }
.world-copy h3 { font-size:clamp(2.2rem, 3.6vw, 3.4rem); margin-bottom:16px; }
.world-lede { color:var(--on-dark); font-size:1.05rem; max-width:var(--measure); }
.world-facts { border-top:1px solid rgba(212,168,72,.35); margin:28px 0 0; max-width:640px; }
.world-facts div { border-bottom:1px solid rgba(212,168,72,.18); display:grid; gap:18px; grid-template-columns:90px 1fr; padding:11px 0; }
.world-facts dt { color:var(--gold); font-size:.7rem; font-weight:500; letter-spacing:.14em; padding-top:3px; text-transform:uppercase; }
.world-facts dd { color:var(--on-dark-soft); font-size:.95rem; margin:0; }
.world-facts em { color:var(--cream); font-family:var(--display); font-size:1.15rem; font-style:italic; }
.world-links { align-items:center; display:flex; flex-wrap:wrap; gap:22px; margin-top:30px; }

/* updates */
.updates-section { padding:110px var(--gutter); }
.timeline { border-top:1px solid rgba(20,43,75,.25); list-style:none; margin:0; padding:0; }
.timeline li { border-bottom:1px solid rgba(20,43,75,.18); display:grid; gap:10px 40px; grid-template-columns:170px 1fr; padding:22px 0; }
.timeline time { color:var(--gold-ink); font-size:.78rem; font-weight:500; letter-spacing:.14em; padding-top:6px; text-transform:uppercase; }
.timeline strong { display:block; font-family:var(--display); font-size:1.5rem; font-weight:500; }
.timeline p { color:var(--ink-soft); grid-column:2; }

/* family */
.family-section { background:var(--cream-2); padding:70px var(--gutter); }
.family-list { display:grid; gap:14px; grid-template-columns:repeat(4,1fr); list-style:none; margin:26px 0 0; padding:0; }
.family-list li { border-top:1px solid rgba(20,43,75,.3); display:flex; flex-direction:column; gap:4px; padding-top:12px; }
.family-list li > :first-child { font-family:var(--display); font-size:1.3rem; }
.family-list a:hover { color:var(--gold-ink); }
.family-list li > :last-child { color:var(--muted); font-size:.82rem; }

/* contact */
.contact-section { align-items:center; background:var(--navy); color:var(--cream); display:grid; gap:40px; grid-template-columns:1.2fr .8fr; padding:110px var(--gutter); }
.contact-intro { color:var(--on-dark-soft); margin-top:22px; max-width:var(--measure); }
.channels { display:grid; gap:12px; grid-template-columns:1fr 1fr; list-style:none; margin:34px 0 0; max-width:640px; padding:0; }
.channels a { border:1px solid rgba(212,168,72,.4); display:flex; flex-direction:column; gap:3px; padding:16px 18px; }
.channels a:hover { background:rgba(212,168,72,.12); border-color:var(--gold); }
.channels strong { font-family:var(--display); font-size:1.25rem; font-weight:500; }
.channels span { color:var(--on-dark-soft); font-size:.85rem; }
.contact-detail { color:var(--on-dark-soft); font-size:.9rem; margin-top:28px; }
.contact-detail a { color:var(--gold); }
.seal-wrap { display:flex; justify-content:center; }
.seal-wrap img { max-width:360px; opacity:.75; width:80%; }

/* legal pages */
.legal-body { background:var(--cream); }
.site-header-legal { background:var(--navy); position:static; }
.legal-page { margin:0 auto; max-width:760px; padding:64px var(--gutter) 90px; }
.back-link { color:var(--gold-ink); font-size:.82rem; letter-spacing:.12em; text-transform:uppercase; }
.back-link:hover { color:var(--ink); }
.legal-page h1 { font-size:clamp(2.4rem, 4.6vw, 3.6rem); letter-spacing:-.02em; line-height:1.05; margin:26px 0 8px; }
.legal-page .legal-date { color:var(--muted); font-size:.85rem; margin:0 0 34px; }
.legal-page h2 { border-top:1px solid rgba(20,43,75,.2); font-size:1.5rem; margin:30px 0 8px; padding-top:22px; }
.legal-page p,.legal-page li { color:var(--ink-soft); font-size:1rem; line-height:1.65; max-width:var(--measure); }
.legal-page ul { margin:8px 0; padding-left:20px; } .legal-page li { margin:4px 0; }
.legal-page a { color:var(--gold-ink); border-bottom:1px solid rgba(138,109,34,.4); }
.legal-footer { padding:36px var(--gutter) 24px; }
.legal-footer .footer-links { margin-top:0; }
.footer-bottom-legal { grid-template-columns:1fr; text-align:center; }
nav a[aria-current="page"] { color:var(--gold); }

/* footer */
.site-footer { background:var(--navy-deep); color:#aeb9c5; padding:64px var(--gutter) 28px; }
.footer-main { margin:0 auto; max-width:1100px; text-align:center; }
.footer-brand { display:flex; flex-direction:column; gap:10px; }
.footer-brand strong { color:var(--cream); font-family:var(--display); font-size:2rem; font-weight:500; letter-spacing:.14em; }
.footer-brand span { color:#8b97a7; font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; }
.footer-links { display:flex; flex-wrap:wrap; gap:36px; justify-content:center; margin-top:40px; }
.footer-links a { color:var(--gold); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; }
.footer-links a:hover { color:var(--cream); }
.footer-legal { margin:40px auto 0; max-width:820px; }
.footer-legal details { border-top:1px solid rgba(212,168,72,.35); padding:14px 0; }
.footer-legal summary { color:var(--cream); cursor:pointer; font-family:var(--display); font-size:1.15rem; }
.legal-date { color:#8b97a7; font-size:.8rem; margin-top:10px; }
.footer-legal h4 { color:var(--gold); font-size:.74rem; letter-spacing:.12em; margin:18px 0 6px; text-transform:uppercase; }
.footer-legal p,.footer-legal li { color:#aeb9c5; font-size:.9rem; line-height:1.6; }
.footer-legal p { margin-top:4px; }
.footer-legal a { color:var(--gold); }
.footer-legal ul { margin:6px 0; padding-left:18px; }
.footer-bottom { border-top:1px solid rgba(212,168,72,.35); color:#8b97a7; display:grid; font-size:.76rem; gap:20px; grid-template-columns:1fr 2fr; margin-top:40px; padding-top:22px; }

@media (max-width:900px) {
  .site-header { padding:20px var(--gutter); }
  .wordmark { font-size:.7rem; letter-spacing:.12em; } nav { gap:12px; } nav a { font-size:.62rem; letter-spacing:.08em; }
  .hero { grid-template-columns:1fr; min-height:auto; padding:140px var(--gutter) 80px; }
  .hero:after { height:370px; opacity:.4; right:-220px; top:430px; width:560px; }
  .hero-mark { margin-top:20px; } .ignition-wrap { width:480px; }
  .section-heading,.pillars,.world-panel,.contact-section,.channels,.family-list,.footer-bottom { grid-template-columns:1fr; }
  .studio-section,.worlds-section,.updates-section { padding:80px var(--gutter); }
  .contact-section,.family-section { padding:70px var(--gutter); }
  .world-tabs { gap:22px; overflow:auto; } .world-tab { font-size:1.1rem; white-space:nowrap; }
  .world-art { min-height:260px; } .world-copy { padding:34px 26px 38px; }
  .world-facts div { grid-template-columns:80px 1fr; }
  .timeline li { grid-template-columns:1fr; } .timeline p { grid-column:1; }
  .footer-brand strong { font-size:1.4rem; } .footer-links { gap:18px; }
}

/* bounded mobile layout and contact-dialog support */
@media (max-width:520px) {
  .site-header { align-items:flex-start; flex-wrap:wrap; gap:14px; padding:18px var(--gutter); }
  nav { flex:1 0 100%; gap:10px 16px; justify-content:space-between; }
  nav a { font-size:.68rem; letter-spacing:.05em; }
  .hero { padding-top:142px; }
  h1 { font-size:clamp(2.7rem, 13vw, 3.6rem); }
  .hero-actions { align-items:stretch; flex-direction:column; }
  .hero-actions .button { justify-content:space-between; }
  .hero-mark { margin-inline:auto; width:100%; }
  .ignition-wrap { width:min(480px,100%); }
}

@media (prefers-reduced-motion:reduce) {
  .ignition-mark { display:none; }
  *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
}

#contact.contact-section { overscroll-behavior:contain; }
#contact .contact-copy { padding:clamp(20px,4vw,32px); }
#contact .contact-intro { margin-top:12px; }
#contact .channels { margin-top:20px; }
#contact .contact-detail { margin-top:18px; }
#contact .studio-contact-form { margin-top:18px; }