/* tinasystem.live — site layer on top of the vaporwave design system */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400&family=Noto+Serif+SC:wght@400;600&family=Great+Vibes&family=Ma+Shan+Zheng&family=Orbitron:wght@500;700&family=Inter:wght@400;600&family=JetBrains+Mono&display=swap');

:root { --site-read: 'Cormorant Garamond', 'Noto Serif SC', Georgia, serif; }

* { box-sizing: border-box; }
body {
  margin: 0; color: var(--vw-ink);
  background:
    radial-gradient(1000px 500px at 80% -10%, rgba(185,103,255,.22), transparent 60%),
    radial-gradient(800px 460px at 0% 110%, rgba(1,205,254,.18), transparent 55%),
    var(--vw-night);
  font-family: var(--vw-font-body); line-height: 1.6;
}
a { color: var(--vw-cyan); text-decoration: none; }
a:hover { text-shadow: var(--vw-glow-cyan); }

.site-nav {
  display: flex; justify-content: space-between; align-items: center;
  max-width: 780px; margin: 0 auto; padding: 20px clamp(20px,5vw,40px);
  font-family: var(--vw-font-mono); font-size: .78rem; letter-spacing: .12em; color: var(--vw-muted);
}
.site-nav a.brand { font-family: var(--vw-font-display); color: var(--vw-ink); letter-spacing: .2em; }

.wrap { max-width: 780px; margin: 0 auto; padding: 32px clamp(20px,5vw,40px) 80px; position: relative; }

/* landing */
.hero { text-align: center; padding: 12vh 0 7vh; }
.hero .mark {
  font-family: var(--vw-font-display); font-size: clamp(2.4rem,8vw,4.5rem); letter-spacing: .18em;
  background: var(--vw-grad-primary); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero .tag { font-family: var(--vw-font-script); font-size: 2.2rem; color: var(--vw-ink); text-shadow: var(--vw-subsurface); }
.cards { display: grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap: 20px; }
.card {
  display: block; background: var(--vw-surface); border: var(--vw-border); border-radius: var(--vw-radius);
  padding: 26px; box-shadow: var(--vw-glow-soft); transition: transform .2s, box-shadow .2s;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--vw-glow-magenta); }
.card .zh { font-family: var(--vw-font-brush); font-size: 2.8rem; color: var(--vw-ink); text-shadow: var(--vw-subsurface); }
.card h3 { font-family: var(--vw-font-display); color: var(--vw-cyan); margin: .35em 0 .25em; letter-spacing: .05em; font-size: 1.15rem; }
.card p { font-family: var(--site-read); font-size: 1.12rem; color: #EAD9F5; margin: 0; }

/* article */
.article .zh-title { font-family: var(--vw-font-brush); font-size: clamp(3rem,9vw,5rem); color: var(--vw-ink); text-shadow: var(--vw-subsurface); margin: .1em 0 0; }
.article h1 { font-family: var(--vw-font-display); font-size: clamp(1.8rem,4.5vw,2.7rem); line-height: 1.12; letter-spacing: .03em; margin: .15em 0; }
.article .byline { font-family: var(--vw-font-mono); color: var(--vw-muted); font-size: .78rem; letter-spacing: .1em; }
.article .lead { font-family: var(--site-read); font-size: 1.5rem; color: var(--vw-ink); }
.article h2 { font-family: var(--vw-font-display); text-transform: uppercase; letter-spacing: .1em; color: var(--vw-cyan); font-size: 1.05rem; margin: 2.6em 0 .3em; text-shadow: var(--vw-glow-cyan); }
.article h3 { font-family: var(--site-read); font-weight: 600; color: var(--vw-heliotrope); font-size: 1.55rem; margin: 1.7em 0 .15em; }
.article p, .article li { font-family: var(--site-read); font-size: 1.24rem; color: #EAD9F5; }
.zh { font-family: 'Noto Serif SC', serif; }

blockquote {
  margin: 1.7em 0; padding: .6em 1.3em; border-left: 3px solid var(--vw-magenta);
  background: rgba(185,103,255,.07); font-family: var(--site-read); font-style: italic; font-size: 1.35rem; color: var(--vw-ink);
}
blockquote cite { display: block; font-style: normal; font-size: .82rem; color: var(--vw-muted); font-family: var(--vw-font-mono); margin-top: .5em; letter-spacing: .06em; }

hr.rule { border: none; height: 1px; background: var(--vw-grad-text); opacity: .45; margin: 2.6em 0; }

table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-family: var(--vw-font-body); font-size: .96rem; }
th, td { text-align: left; padding: 9px 11px; border-bottom: 1px solid rgba(1,205,254,.2); vertical-align: top; }
th { color: var(--vw-cyan); font-family: var(--vw-font-mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; }
.sym { font-size: 1.4rem; }

.backlink { font-family: var(--vw-font-mono); font-size: .78rem; letter-spacing: .1em; }
.footer { margin-top: 4em; padding-top: 1.4em; border-top: 1px solid rgba(1,205,254,.2); font-family: var(--vw-font-mono); font-size: .7rem; color: var(--vw-muted); letter-spacing: .1em; }