/*
Theme Name: Study Tibetan
Theme URI: https://studytibetan.com/
Author: Tashi Nangchen / Nangchen T Studio
Description: Study Tibetan -- books & apps for learning the Tibetan language. Self-contained theme; content lives in inc/content.php.
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: study-tibetan
*/

/* Modernist -- design-system tokens (brand colors sampled from the Study Tibetan logo). */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;600;800&display=swap');

@font-face { font-family: 'Monlam Uni Ochan2'; src: url('assets/fonts/MonlamUniOchan2.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap; }

:root {
  --color-bg: #f3f2f2;
  --color-surface: #eae9e9;
  --color-text: #1a2036;
  --color-accent: #d6000e;
  --color-accent-2: #0e3a72;
  --color-divider: color-mix(in srgb, #1a2036 40%, transparent);

  --color-neutral-100: #f8f4f4;
  --color-neutral-200: #eae7e7;
  --color-neutral-300: #d7d3d3;
  --color-neutral-400: #bab6b6;
  --color-neutral-500: #9b9797;
  --color-neutral-600: #7d7979;
  --color-neutral-700: #605d5d;
  --color-neutral-800: #444141;
  --color-neutral-900: #2d2b2b;

  --color-accent-100: #fff0ef;
  --color-accent-200: #ffd3cf;
  --color-accent-300: #ffa79f;
  --color-accent-400: #ff6e62;
  --color-accent-500: #fa362a;
  --color-accent-600: #b8000a;
  --color-accent-700: #8c0008;
  --color-accent-800: #630007;
  --color-accent-900: #3d0a08;

  --color-accent-2-100: #eef3fa;
  --color-accent-2-200: #d2e1f1;
  --color-accent-2-300: #a7c3e2;
  --color-accent-2-400: #6c96c7;
  --color-accent-2-500: #2c5490;
  --color-accent-2-600: #0a2e5c;
  --color-accent-2-700: #082247;
  --color-accent-2-800: #061934;
  --color-accent-2-900: #041022;

  --font-tibetan: 'Monlam Uni Ochan2', "Microsoft Himalaya", "Noto Sans Tibetan", var(--font-heading);
  --font-heading: "Archivo", 'Monlam Uni Ochan2', system-ui, sans-serif;
  --font-body: "Archivo", 'Monlam Uni Ochan2', system-ui, sans-serif;
  --font-heading-weight: 800;

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px;
  --radius-sm: 0px; --radius-md: 0px; --radius-lg: 0px;

  --shadow-sm: 0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent);
}

[lang="bo"] { font-family: var(--font-tibetan); }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
*, *::before, *::after { box-sizing: border-box; }
body { margin:0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-size:15px; line-height:1.55; font-weight:400; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); line-height:1.12; letter-spacing:-0.015em; margin:0 0 var(--space-2); }
h1{font-size:42px} h2{font-size:32px} h3{font-size:25px} h4{font-size:20px} h5{font-size:16px} h6{font-size:13px; letter-spacing:0.08em; text-transform:uppercase;}
p{margin:0 0 var(--space-3);}
a{color:var(--color-accent); text-underline-offset:3px;}
img{display:block; max-width:100%;}
.grayscale{filter:grayscale(1) contrast(1.08)}
.text-muted{color: color-mix(in srgb, var(--color-text) 55%, transparent);}
:focus{outline:none;}
:focus-visible{outline:2px solid var(--color-accent); outline-offset:2px;}
::selection{background: color-mix(in srgb, var(--color-accent) 30%, transparent);}
.hr{height:2px; border:0; margin: var(--space-4) 0; background: var(--color-divider);}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:6px; cursor:pointer; text-decoration:none; font-family:var(--font-heading); font-weight:var(--font-heading-weight); font-size:14px; line-height:1.2; color:var(--color-text); background:transparent; border:1px solid transparent; padding: var(--space-2) calc(var(--space-3) * 1.2); border-radius: var(--radius-md);}
.btn svg{display:block;}
.btn:disabled{opacity:.45; cursor:not-allowed;}
.btn-primary{background:var(--color-accent); color:var(--color-bg);}
.btn-primary:hover{background:var(--color-accent-600);}
.btn-primary:active{background:var(--color-accent-700);}
.btn-secondary{border-color:var(--color-divider);}
.btn-secondary:hover{background: color-mix(in srgb, var(--color-text) 7%, transparent);}
.btn-ghost{color:var(--color-accent); padding-inline:var(--space-1);}
.btn-ghost:hover{background: color-mix(in srgb, var(--color-accent) 10%, transparent);}
.btn-icon{width:36px; height:36px; padding:0;}
.btn-block{width:100%; margin-top:var(--space-2); justify-content:flex-start; text-align:left;}

.field>label{display:block; font-size:12px; margin-bottom:5px; color: color-mix(in srgb, var(--color-text) 70%, transparent);}
.input{width:100%; min-height:36px; padding:6px 10px; font:inherit; font-size:14px; color:var(--color-text); caret-color:var(--color-accent); background:var(--color-surface); border:1px solid var(--color-divider); border-radius: var(--radius-md);}
.input:hover{border-color: color-mix(in srgb, var(--color-text) 45%, transparent);}
.input:focus-visible{border-color:var(--color-accent); outline-offset:0;}
textarea.input{min-height:90px; resize:vertical;}

.card-kicker{font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--color-accent);}
.tag{display:inline-flex; align-items:center; font-size:11px; letter-spacing:.02em; padding:3px 10px; border-radius: calc(var(--radius-md) * .75);}
.tag-accent{background:var(--color-accent-100); color:var(--color-accent-800);}
.tag-neutral{background:var(--color-neutral-100); color:var(--color-neutral-800);}
.tag-outline{border:1px solid var(--color-accent); color:var(--color-accent);}

.dialog-backdrop{position:fixed; inset:0; z-index:80; display:grid; place-items:center; padding:var(--space-4); background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent);}
.dialog{width:min(440px,100%); display:flex; flex-direction:column; gap:var(--space-3); padding:var(--space-4); border-radius:var(--radius-lg); background:var(--color-surface); box-shadow:var(--shadow-lg);}
.dialog-title{font-family:var(--font-heading); font-weight:var(--font-heading-weight); font-size:20px;}
.dialog-body{font-size:14px; opacity:.85;}

/* ── layout shells ── */
.st-page{min-height:100vh; display:flex; flex-direction:column;}
.st-main{flex:1;}
.st-container{width:100%; max-width:1200px; margin:0 auto; padding:0 24px;}
.st-grid{display:grid; gap:28px; grid-template-columns:repeat(3,1fr);}
.st-grid-2{display:grid; gap:28px; grid-template-columns:repeat(2,1fr);}
.st-split{display:grid; gap:48px; grid-template-columns:1fr 1fr; align-items:center;}
.st-section{padding-top:64px; padding-bottom:24px;}
.st-section-head{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:36px;}
.st-section-title{font-size:clamp(28px,4vw,44px); line-height:1.02; letter-spacing:-.02em; margin:0;}

/* ── announcement + header ── */
.st-announce{width:100%; border:0; cursor:pointer; background:var(--color-accent); color:var(--color-bg); font-family:var(--font-heading); font-weight:800; font-size:13px; letter-spacing:.04em; padding:9px 16px; display:flex; align-items:center; justify-content:center; gap:10px;}
.st-site-header{position:sticky; top:0; z-index:40; background:var(--color-bg); border-bottom:2px solid var(--color-divider);}
.st-header-row{display:flex; align-items:center; gap:24px; padding-top:14px; padding-bottom:14px;}
.st-brand{background:none; border:0; padding:0; cursor:pointer; display:flex; align-items:center; gap:12px; margin-right:auto; text-decoration:none; color:inherit;}
.st-brand-logo{width:52px; height:52px; object-fit:contain; display:block; flex:none;}
.st-brand-text{display:flex; flex-direction:column; gap:2px; text-align:left;}
.st-brand-tib{font-family:var(--font-heading); font-weight:400; font-size:28px; line-height:1.1; letter-spacing:-.01em; color:var(--color-accent-2);}
.st-brand-tag{font-family:var(--font-heading); font-weight:700; font-size:12px; line-height:1.2; letter-spacing:.07em; text-transform:uppercase; color:var(--color-neutral-700);}
.st-desktop-nav{display:flex; align-items:center; gap:28px;}
.st-desktop-nav a{cursor:pointer; color:inherit; text-decoration:none; font-family:var(--font-heading); font-weight:800; font-size:14px;}
.st-desktop-nav a:hover{color:var(--color-accent);}
.st-toggle{display:none;}
.st-mobile-menu{position:fixed; inset:0; z-index:60; background:var(--color-bg); display:flex; flex-direction:column;}
.st-mobile-menu-top{display:flex; align-items:center; padding-top:14px; padding-bottom:14px; border-bottom:2px solid var(--color-divider);}
.st-mobile-menu-title{font-family:var(--font-heading); font-weight:800; font-size:19px; margin-right:auto;}
.st-mobile-nav{display:flex; flex-direction:column; padding-top:8px;}
.st-mobile-nav a{cursor:pointer; color:inherit; text-decoration:none; font-family:var(--font-heading); font-weight:800; font-size:30px; padding:18px 0; border-bottom:2px solid var(--color-divider);}
.st-mobile-subscribe{justify-content:center; margin-top:24px; padding:14px;}

/* ── hero ── */
.st-hero-section{padding-top:72px; padding-bottom:72px;}
.st-hero{display:grid; gap:48px; grid-template-columns:1.05fr .95fr; align-items:stretch;}
.st-hero-copy{display:flex; flex-direction:column; justify-content:center;}
.st-hero-kicker{align-self:flex-start; margin-bottom:24px;}
.st-hero-title{font-size:clamp(40px,6vw,76px); line-height:.98; letter-spacing:-.02em; margin:0;}
.st-hero-lede{font-size:18px; line-height:1.55; max-width:46ch; margin-top:24px; margin-bottom:32px;}
.st-hero-stats{display:flex; gap:32px; margin-top:44px; padding-top:28px; border-top:2px solid var(--color-divider);}
.st-hero-stat-num{font-family:var(--font-heading); font-weight:800; font-size:30px;}
.st-hero-visual{position:relative; min-height:420px; background:var(--color-surface);}
.st-hero-slider{position:relative; width:100%; height:100%; min-height:420px; overflow:hidden; background:var(--color-surface); border:2px solid var(--color-divider);}
.st-hero-slide{position:absolute; inset:0; opacity:0; transition:opacity .9s ease; pointer-events:none;}
.st-hero-slide.is-active{opacity:1; pointer-events:auto; z-index:1;}
.st-hero-slide-btn{border:0; padding:0; margin:0; width:100%; height:100%; cursor:pointer; background:none; display:flex; flex-direction:column; text-align:left; text-decoration:none; color:inherit;}
.st-hero-slide-btn:focus-visible{outline:2px solid var(--color-accent); outline-offset:-2px;}
.st-hero-stage{flex:1 1 auto; min-height:0; overflow:hidden; display:grid; place-items:center; padding:clamp(20px,4vw,40px); background:linear-gradient(155deg, var(--color-surface), color-mix(in srgb, var(--color-surface) 55%, var(--color-neutral-200)));}
.st-hero-cover-img{max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; display:block; transform:scale(1); transition:transform 6.5s ease-out; filter:drop-shadow(0 20px 30px color-mix(in srgb, var(--color-text) 30%, transparent));}
.st-hero-slide.is-active .st-hero-cover-img{transform:scale(1.035);}
.st-hero-caption{flex:none; display:flex; align-items:center; gap:14px; padding:16px 20px; background:var(--color-text); color:var(--color-bg); border-top:2px solid var(--color-divider);}
.st-hero-caption-title{font-family:var(--font-heading); font-weight:800; font-size:15px; line-height:1.2; flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.st-hero-caption-cta{font-size:12px; letter-spacing:.02em; opacity:.75; flex:none;}
.st-hero-arrow{position:absolute; top:calc(50% - 28px); transform:translateY(-50%); width:40px; height:40px; border-radius:999px; border:0; cursor:pointer; display:grid; place-items:center; background: color-mix(in srgb, var(--color-bg) 90%, transparent); color:var(--color-text); box-shadow:var(--shadow-sm); z-index:2; transition:background .2s ease, transform .2s ease;}
.st-hero-arrow:hover{background:var(--color-bg); transform:translateY(-50%) scale(1.06);}
.st-hero-arrow--prev{left:14px;} .st-hero-arrow--next{right:14px;}
.st-hero-dots{position:absolute; left:0; right:0; top:14px; display:flex; justify-content:center; gap:8px; z-index:2;}
.st-hero-dot{width:8px; height:8px; border-radius:999px; border:0; padding:0; cursor:pointer; background: color-mix(in srgb, var(--color-text) 25%, transparent); box-shadow:0 0 0 1px color-mix(in srgb, var(--color-bg) 70%, transparent); transition:width .3s ease, background .3s ease;}
.st-hero-dot.is-active{width:24px; background:var(--color-accent);}
@media (max-width:760px){ .st-hero-arrow{display:none;} }

/* ── cards ── */
.st-card{text-align:left; background:var(--color-surface); border:0; padding:0; cursor:pointer; display:flex; flex-direction:column; text-decoration:none; color:inherit; transition:box-shadow .15s ease;}
.st-card:hover{box-shadow:var(--shadow-md);}
.st-card-cover{aspect-ratio:3/4; background:var(--color-neutral-200); overflow:hidden;}
.st-card-cover img{width:100%; height:100%; object-fit:cover;}
.st-card-body{padding:18px; display:flex; flex-direction:column; gap:8px; flex:1;}
.st-card-title{font-family:var(--font-heading); font-weight:800; font-size:19px; line-height:1.15;}
.st-card-sub{font-size:13px; flex:1;}
.st-card-price{font-family:var(--font-heading); font-weight:800; font-size:15px; color:var(--color-accent-700);}

.st-apps-band{background:var(--color-neutral-100); margin-top:64px; border-top:2px solid var(--color-divider); border-bottom:2px solid var(--color-divider);}
.st-app-card{background:var(--color-bg); border:1px solid var(--color-divider); padding:22px; display:flex; flex-direction:column; gap:16px;}
.st-app-card-head{text-align:left; background:none; border:0; padding:0; cursor:pointer; display:flex; align-items:center; gap:14px; text-decoration:none; color:inherit;}
.st-app-card-head:hover{opacity:.72;}
.st-app-icon{width:56px; height:56px; flex:none;}
.st-app-icon-img{width:100%; height:100%; object-fit:cover; border-radius:22%; display:block;}
.st-app-name{font-family:var(--font-heading); font-weight:800; font-size:18px; line-height:1.15;}
.st-app-platform{font-size:11px; letter-spacing:.05em; text-transform:uppercase; margin-top:4px;}
.st-app-tagline{font-size:14px; margin:0; flex:1;}
.st-badge{display:inline-flex; align-items:center; gap:10px; padding:9px 15px; border-radius:9px; background:var(--color-text); color:var(--color-bg); text-decoration:none; border:1px solid transparent;}
.st-badge:hover{background:var(--color-neutral-800);}
.st-badge--light{background:var(--color-bg); color:var(--color-text); border-color:var(--color-divider);}
.st-badge--light:hover{background:var(--color-neutral-100);}
.st-badge-top{font-size:9px; letter-spacing:.04em; text-transform:uppercase; opacity:.85; line-height:1.1;}
.st-badge-big{font-family:var(--font-heading); font-weight:800; font-size:15px; line-height:1.1;}

.st-lesson-card{text-align:left; background:none; border:0; border-top:2px solid var(--color-divider); padding:20px 0 0; cursor:pointer; display:flex; flex-direction:column; gap:12px; text-decoration:none; color:inherit;}
.st-lesson-card:hover{opacity:.72;}
.st-lesson-thumb{aspect-ratio:16/10; background:var(--color-neutral-200); overflow:hidden;}
.st-lesson-thumb img{width:100%; height:100%; object-fit:cover;}
.st-lesson-meta{display:flex; gap:10px; align-items:center; font-size:11px; letter-spacing:.05em; text-transform:uppercase;}
.st-lesson-cat{color:var(--color-accent);}
.st-lesson-title{font-family:var(--font-heading); font-weight:800; font-size:20px; line-height:1.15;}
.st-lesson-excerpt{font-size:14px;}

.st-faq{padding-top:72px; padding-bottom:16px;}
.st-faq-item{border-top:2px solid var(--color-divider); padding-top:20px;}
.st-faq-item h3{font-size:19px; margin:0 0 10px;}
.st-faq-item p{font-size:15px; line-height:1.6; margin:0;}

.st-newsletter-band{background:var(--color-accent); color:var(--color-bg); margin-top:64px; padding-top:72px; padding-bottom:72px;}
.st-inline-subscribe{display:flex; flex-direction:column; gap:12px; background: color-mix(in srgb, #000 15%, transparent); padding:28px;}
.st-inline-subscribe-success{background: color-mix(in srgb, #000 18%, transparent); padding:28px;}

/* ── listing pages ── */
.st-listing{padding-top:56px; padding-bottom:72px;}
.st-listing-lede{font-size:17px; max-width:56ch; margin-bottom:40px;}
.st-app-rows{display:flex; flex-direction:column; gap:0;}
.st-app-row{text-align:left; background:none; border:0; border-top:2px solid var(--color-divider); padding:36px 0; cursor:pointer; display:grid; grid-template-columns:auto 1fr auto; gap:28px; align-items:center; text-decoration:none; color:inherit;}
.st-app-row:hover{opacity:.75;}
.st-app-row-icon{width:76px; height:76px; flex:none;}
.st-app-row-name{font-family:var(--font-heading); font-weight:800; font-size:24px;}
.st-app-row-blurb{font-size:15px; margin:0; max-width:60ch;}

/* ── detail pages ── */
.st-detail-wrap{padding-top:24px; padding-bottom:64px;}
.st-detail{display:grid; gap:48px; grid-template-columns:.85fr 1.15fr; align-items:start;}
.st-detail-cover{aspect-ratio:3/4; background:var(--color-surface); position:sticky; top:96px; overflow:hidden;}
.st-detail-cover img{width:100%; height:100%; object-fit:cover;}
.st-detail-title{font-size:clamp(32px,5vw,52px); line-height:1.02; letter-spacing:-.02em; margin:8px 0 12px;}
.st-detail-subtitle{font-size:19px; margin-bottom:24px;}
.st-detail-blurb{font-size:16px; line-height:1.6; max-width:60ch;}
.st-detail-meta{display:flex; align-items:center; flex-wrap:wrap; gap:8px 16px; margin:28px 0; padding:20px 0; border-top:2px solid var(--color-divider); border-bottom:2px solid var(--color-divider);}
.st-detail-author{font-family:var(--font-heading); font-weight:800; font-size:18px;}
.st-rating{display:flex; align-items:center; gap:8px; font-size:14px;}
.st-rating-stars{color:var(--color-accent); letter-spacing:1px;}
.st-eyebrow{font-size:15px; letter-spacing:.08em; text-transform:uppercase; margin-bottom:16px;}
.st-highlights{list-style:none; padding:0; margin:0 0 32px; display:flex; flex-direction:column; gap:0;}
.st-highlight{display:flex; gap:14px; padding:14px 0; border-top:1px solid var(--color-divider); font-size:16px;}
.st-highlight-n{color:var(--color-accent); font-family:var(--font-heading); font-weight:800;}
.st-gallery{display:grid; gap:14px; grid-template-columns:repeat(auto-fill, minmax(180px,1fr));}
.st-gallery-tile{aspect-ratio:4/3; background:var(--color-neutral-200); overflow:hidden;}
.st-zoomable{border:0; padding:0; margin:0; width:100%; height:100%; cursor:zoom-in; background:none; display:block; touch-action:manipulation;}
.st-zoomable img{width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; transition:filter .35s ease;}
.st-zoomable:hover img{filter:brightness(.92);}
.st-zoomable:focus-visible{outline:2px solid var(--color-accent); outline-offset:2px;}
.st-crosssell{background:var(--color-surface);}
.st-cross-card{text-align:left; background:var(--color-bg); border:0; padding:16px; cursor:pointer; display:flex; gap:14px; align-items:center; text-decoration:none; color:inherit;}
.st-cross-card:hover{box-shadow:var(--shadow-sm);}
.st-cross-cover{width:60px; height:80px; flex:none; background:var(--color-neutral-200); overflow:hidden;}
.st-cross-cover img{width:100%; height:100%; object-fit:cover;}
.st-cross-title{font-family:var(--font-heading); font-weight:800; font-size:15px; line-height:1.2;}
.st-cross-price{font-size:12px; margin-top:4px;}

.st-app-hero{background:var(--color-text); color:var(--color-bg);}
.st-app-hero-inner{padding-top:28px; padding-bottom:64px;}
.st-app-hero-icon{width:84px; height:84px; margin-bottom:24px;}
.st-app-hero-title{font-size:clamp(34px,5vw,56px); line-height:1.0; letter-spacing:-.02em; margin:0 0 14px;}
.st-app-hero-tagline{font-size:19px; opacity:.82; margin-bottom:28px; max-width:44ch;}
.st-app-hero-stats{display:flex; gap:28px; margin-top:36px; color: color-mix(in srgb, var(--color-bg) 65%, transparent);}
.st-app-hero-stat{font-family:var(--font-heading); font-weight:800; font-size:22px; color:var(--color-bg);}
.st-app-hero-shot{aspect-ratio:9/16; max-height:520px; margin:0 auto; width:100%; background: color-mix(in srgb, var(--color-bg) 10%, transparent);}
.st-feature{border-top:2px solid var(--color-divider); padding-top:20px;}
.st-feature-title{font-family:var(--font-heading); font-weight:800; font-size:18px; margin-bottom:8px;}
.st-feature-desc{font-size:14px; margin:0;}
.st-shot-tile{aspect-ratio:9/16; background:var(--color-surface); overflow:hidden;}

/* ── lesson pages ── */
.st-lesson-wrap{padding-top:28px; padding-bottom:64px; max-width:940px;}
.st-lesson-title-h1{font-size:clamp(30px,4.5vw,46px); line-height:1.05; letter-spacing:-.02em; margin:0 0 24px;}
.st-lesson-hero-img{aspect-ratio:16/9; margin:28px 0; background:var(--color-neutral-200); overflow:hidden;}
.st-lesson-hero-img img{width:100%; height:100%; object-fit:cover;}
.st-lesson-cta{background:var(--color-accent); color:var(--color-bg); padding:32px; margin-top:40px;}
.st-alpha{display:grid; gap:2px; background:var(--color-divider); border:2px solid var(--color-divider); grid-template-columns:repeat(6,1fr);}
.st-alpha-cell{background: color-mix(in srgb, var(--st-cell-color, var(--color-accent)) 16%, var(--color-bg)); border:0; padding:14px 6px; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:6px; transition:background .18s ease, color .18s ease, transform .18s ease; touch-action:manipulation;}
.st-alpha-cell:hover, .st-alpha-cell:focus-visible{background:var(--st-cell-color, var(--color-accent)); color:var(--color-bg); transform:scale(1.04); outline:0; z-index:1;}
.st-alpha-tb{font-size:28px; line-height:1; color:var(--st-cell-color, var(--color-accent)); transition:color .18s ease;}
.st-alpha-cell:hover .st-alpha-tb, .st-alpha-cell:focus-visible .st-alpha-tb{color:var(--color-bg);}
.st-alpha-r{font-size:11px; letter-spacing:.03em; text-transform:uppercase; color:var(--color-neutral-600);}
.st-alpha-cell:hover .st-alpha-r, .st-alpha-cell:focus-visible .st-alpha-r{color:var(--color-bg); opacity:.9;}
.st-alpha-cell:nth-child(6n+1){--st-cell-color:var(--color-accent);}
.st-alpha-cell:nth-child(6n+2){--st-cell-color:var(--color-accent-700);}
.st-alpha-cell:nth-child(6n+3){--st-cell-color:var(--color-neutral-800);}
.st-alpha-cell:nth-child(6n+4){--st-cell-color:var(--color-accent-2-600);}
.st-alpha-cell:nth-child(6n+5){--st-cell-color:var(--color-accent-600);}
.st-alpha-cell:nth-child(6n+6){--st-cell-color:var(--color-accent-2-700);}
.st-vowels{display:grid; gap:20px; grid-template-columns:repeat(2,1fr);}
.st-vowel-card{background:var(--color-surface); border-top:4px solid var(--color-accent); padding:22px; display:flex; align-items:center; gap:18px; transition:transform .18s ease;}
.st-vowel-card:hover{transform:translateY(-3px);}
.st-vowel-card:nth-child(2){border-top-color:var(--color-accent-2-600);}
.st-vowel-card:nth-child(3){border-top-color:var(--color-accent-700);}
.st-vowel-card:nth-child(4){border-top-color:var(--color-neutral-800);}
.st-compare-strip{display:grid; gap:2px; background:var(--color-divider); border:2px solid var(--color-divider); grid-template-columns:repeat(4,1fr);}
.st-compare-cell{background:var(--color-bg); padding:20px 12px; text-align:center;}
.st-compare-cell:nth-child(1){border-bottom:4px solid var(--color-accent);}
.st-compare-cell:nth-child(2){border-bottom:4px solid var(--color-accent-2-600);}
.st-compare-cell:nth-child(3){border-bottom:4px solid var(--color-accent-700);}
.st-compare-cell:nth-child(4){border-bottom:4px solid var(--color-neutral-800);}
.st-stack-grid{display:grid; gap:16px; grid-template-columns:repeat(2,1fr);}
.st-stack-card{background:var(--color-surface); padding:22px; border-left:4px solid var(--color-accent);}
.st-stack-card:nth-child(2){border-left-color:var(--color-accent-2-600);}
.st-stack-card:nth-child(3){border-left-color:var(--color-accent-700);}
.st-stack-card:nth-child(4){border-left-color:var(--color-neutral-800);}
.st-phrase-grid{display:flex; flex-direction:column; gap:0;}
.st-phrase-card{display:grid; grid-template-columns:32px 1fr; gap:16px; padding:18px 0; border-top:2px solid var(--color-divider); align-items:start;}
.st-phrase-num{font-family:var(--font-heading); font-weight:800; font-size:15px; color:var(--color-accent);}

/* ── about / contact ── */
.st-about-photo{aspect-ratio:4/5; background:var(--color-surface);}
.st-about-num{font-family:var(--font-heading); font-weight:800; font-size:40px; color:var(--color-accent-700);}
.st-contact-row{border-top:2px solid var(--color-divider); padding:16px 0;}
.st-contact-label{font-size:11px; letter-spacing:.08em; text-transform:uppercase;}
.st-contact-value{font-family:var(--font-heading); font-weight:800; font-size:18px; margin-top:4px;}
.st-contact-card{background:var(--color-surface); padding:32px;}
.st-contact-card form{display:flex; flex-direction:column; gap:16px;}

/* ── footer ── */
.st-footer{background:var(--color-text); color:var(--color-bg);}
.st-footer-top{padding-top:56px; padding-bottom:40px;}
.st-footcols{display:grid; gap:40px; grid-template-columns:1.4fr 1fr 1fr 1.4fr;}
.st-footcols a{cursor:pointer; color:inherit; text-decoration:none; font-size:14px;}
.st-footer-bottom{display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; align-items:center; margin-top:48px; padding-top:24px; border-top:1px solid color-mix(in srgb, var(--color-bg) 20%, transparent); font-size:13px; opacity:.6;}

/* ── lightbox ── */
.st-lightbox{position:fixed; inset:0; z-index:100; background: color-mix(in srgb, var(--color-text) 94%, transparent); display:flex; align-items:center; justify-content:center; padding:32px;}
.st-ph{width:100%; height:100%; min-height:inherit; display:flex; align-items:center; justify-content:center; padding:16px; background: repeating-linear-gradient(45deg, var(--color-neutral-200), var(--color-neutral-200) 11px, var(--color-neutral-300) 11px, var(--color-neutral-300) 22px);}
.st-ph>span{font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size:10.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--color-neutral-700); background:var(--color-bg); padding:5px 9px; text-align:center; max-width:88%; line-height:1.4;}

/* ── responsive ── */
@media (max-width:960px){ .st-grid{grid-template-columns:repeat(2,1fr);} .st-footcols{grid-template-columns:1fr 1fr;} }
@media (max-width:860px){ .st-hero, .st-split, .st-detail{grid-template-columns:1fr; gap:32px;} .st-detail-cover{position:static;} }
@media (max-width:760px){ .st-desktop-nav{display:none;} .st-toggle{display:inline-flex;} }
@media (max-width:720px){ .st-alpha{grid-template-columns:repeat(4,1fr);} }
@media (max-width:620px){ .st-grid, .st-grid-2{grid-template-columns:1fr;} .st-footcols{grid-template-columns:1fr; gap:28px;} .st-container{padding:0 18px;} .st-vowels{grid-template-columns:1fr;} .st-compare-strip{grid-template-columns:repeat(2,1fr);} .st-stack-grid{grid-template-columns:1fr;} }
@media (max-width:480px){ .st-alpha{grid-template-columns:repeat(3,1fr);} }