:root {
  --ink: #13221d;
  --forest: #17352e;
  --forest-2: #244c42;
  --cream: #f8f2e7;
  --paper: #fffdf8;
  --gold: #c88b3a;
  --gold-light: #efd7ae;
  --teal: #4d8577;
  --muted: #66736e;
  --line: #dedfd8;
  --white: #ffffff;
  --shadow: 0 18px 60px rgba(20, 53, 46, .12);
  --shadow-soft: 0 12px 34px rgba(20, 53, 46, .08);
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --container: 1200px;
  --transition: 180ms ease;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }

.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 9999;
  padding: 10px 14px;
  background: var(--ink);
  color: white;
  border-radius: 8px;
}
.skip-link:focus { top: 12px; }

.container { width: min(var(--container), calc(100% - 40px)); margin-inline: auto; }
.section { padding: 96px 0; }
.section-sm { padding: 64px 0; }
.section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  color: var(--forest-2);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.section-kicker::before { content: ""; width: 30px; height: 2px; background: var(--gold); }
.section-title {
  max-width: 820px;
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.2rem, 5vw, 4.4rem);
  line-height: 1.04;
  letter-spacing: -.035em;
}
.section-title.small { font-size: clamp(1.8rem, 3.8vw, 3rem); }
.section-copy { max-width: 720px; margin: 20px 0 0; color: var(--muted); font-size: 1.08rem; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255,253,248,.92);
  border-bottom: 1px solid rgba(23,53,46,.09);
  backdrop-filter: blur(18px);
}
.nav-wrap { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; gap: 12px; min-width: 210px; }
.brand img { width: 46px; height: 46px; }
.brand-text { display: grid; line-height: 1.05; }
.brand-text strong { font-family: Georgia, serif; font-size: 1.17rem; }
.brand-text span { margin-top: 5px; color: var(--muted); font-size: .67rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.nav-links { display: flex; align-items: center; gap: 25px; }
.nav-links a { position: relative; color: #31413b; font-size: .91rem; font-weight: 700; }
.nav-links a::after { content:""; position:absolute; left:0; right:0; bottom:-10px; height:2px; transform:scaleX(0); background:var(--gold); transition:transform var(--transition); }
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.menu-toggle { display: none; width: 44px; height: 44px; border: 1px solid var(--line); background: white; border-radius: 12px; }
.menu-toggle span { display:block; width:20px; height:2px; margin:4px auto; background:var(--ink); transition:var(--transition); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-weight: 800;
  transition: transform var(--transition), background var(--transition), color var(--transition), border-color var(--transition);
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--forest); color: white; }
.btn-primary:hover { background: #0f2a23; }
.btn-light { background: white; color: var(--forest); }
.btn-light:hover { background: var(--cream); }
.btn-outline { border-color: rgba(23,53,46,.25); color: var(--forest); background: transparent; }
.btn-outline:hover { border-color: var(--forest); }
.btn-gold { background: var(--gold); color: #20170c; }
.btn-sm { min-height: 40px; padding-inline: 15px; font-size: .85rem; }
.icon-arrow { font-size: 1.08em; transition: transform var(--transition); }
.btn:hover .icon-arrow, .text-link:hover .icon-arrow { transform: translateX(4px); }

.hero {
  position: relative;
  overflow: hidden;
  color: white;
  background: var(--forest) url('../img/hero-pattern.svg') center/cover no-repeat;
}
.hero::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(9,35,28,.84) 0%, rgba(9,35,28,.56) 48%, rgba(9,35,28,.28) 100%); }
.hero-grid { position:relative; z-index:1; display:grid; grid-template-columns:1.18fr .82fr; gap:80px; align-items:center; min-height:690px; padding:80px 0; }
.hero h1 { margin:22px 0 24px; max-width:800px; font-family:Georgia,serif; font-size:clamp(3rem,7vw,6.3rem); line-height:.95; letter-spacing:-.05em; }
.hero h1 em { color: var(--gold-light); font-style: normal; }
.hero p { max-width:680px; margin:0; color:rgba(255,255,255,.78); font-size:1.16rem; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }
.hero-trust { display:flex; flex-wrap:wrap; gap:28px; margin-top:42px; color:rgba(255,255,255,.68); font-size:.84rem; font-weight:700; }
.hero-trust span { display:flex; align-items:center; gap:8px; }
.hero-trust i { width:7px; height:7px; border-radius:50%; background:var(--gold-light); }
.hero-panel {
  position:relative;
  padding:30px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:var(--radius-lg);
  background:rgba(255,255,255,.1);
  box-shadow:0 24px 80px rgba(0,0,0,.18);
  backdrop-filter:blur(16px);
}
.hero-panel-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; }
.hero-panel-head strong { font-family:Georgia,serif; font-size:1.3rem; }
.live-pill { padding:6px 10px; border-radius:999px; background:rgba(245,231,198,.15); color:var(--gold-light); font-size:.7rem; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
.word-card { padding:24px; border-radius:20px; background:var(--paper); color:var(--ink); }
.word-script { min-height:70px; font-family:"Yapiri", Georgia, serif; font-size:2.7rem; color:var(--forest); letter-spacing:.04em; }
.word-roman { margin-top:8px; font-weight:900; font-size:1.2rem; }
.word-meta { margin-top:3px; color:var(--gold); font-size:.75rem; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
.word-meaning { margin-top:16px; padding-top:16px; border-top:1px solid var(--line); color:var(--muted); }
.word-example { margin-top:18px; padding:16px; border-radius:14px; background:var(--cream); font-size:.92rem; }
.word-example strong { display:block; margin-bottom:4px; color:var(--forest); }
.panel-controls { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:18px; }
.dot-row { display:flex; gap:6px; }
.dot-row span { width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.28); }
.dot-row span.active { width:22px; border-radius:10px; background:var(--gold-light); }

.stats-strip { background:var(--cream); border-bottom:1px solid rgba(23,53,46,.08); }
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); }
.stat { padding:30px 24px; border-right:1px solid rgba(23,53,46,.1); }
.stat:last-child { border-right:0; }
.stat strong { display:block; font-family:Georgia,serif; font-size:2.1rem; color:var(--forest); }
.stat span { color:var(--muted); font-size:.85rem; }

.foundation-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:44px; }
.foundation-card {
  position:relative;
  min-height:390px;
  padding:32px;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:white;
  overflow:hidden;
  transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.foundation-card:hover { transform:translateY(-7px); border-color:var(--gold-light); box-shadow:var(--shadow); }
.foundation-no { display:flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:50%; background:var(--cream); color:var(--gold); font-weight:900; }
.foundation-card h3 { margin:48px 0 12px; font-family:Georgia,serif; font-size:2rem; line-height:1.1; }
.foundation-card p { color:var(--muted); }
.foundation-list { display:grid; gap:9px; margin-top:24px; color:#3c4a45; font-size:.9rem; }
.foundation-list span { display:flex; align-items:center; gap:9px; }
.foundation-list span::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--gold); }
.card-link { position:absolute; left:32px; bottom:30px; font-weight:900; color:var(--forest); }
.card-watermark { position:absolute; right:-20px; bottom:-45px; font-family:Georgia,serif; font-size:10rem; color:rgba(23,53,46,.035); }

.split { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.visual-board { position:relative; min-height:530px; border-radius:var(--radius-lg); background:var(--forest); overflow:hidden; box-shadow:var(--shadow); }
.visual-board::before { content:""; position:absolute; inset:0; background:url('../img/hero-pattern.svg') center/cover; opacity:.6; }
.floating-card { position:absolute; z-index:2; width:min(82%,390px); padding:24px; border-radius:20px; background:white; box-shadow:0 24px 50px rgba(0,0,0,.2); }
.floating-card.one { left:8%; top:10%; transform:rotate(-2deg); }
.floating-card.two { right:7%; bottom:9%; transform:rotate(2deg); }
.floating-card .tag { display:inline-block; margin-bottom:10px; padding:5px 8px; border-radius:999px; background:var(--cream); color:var(--gold); font-size:.7rem; font-weight:900; text-transform:uppercase; }
.script-demo { font-family:"Yapiri", Georgia, serif; font-size:2.35rem; color:var(--forest); }
.translation-line { display:flex; justify-content:space-between; gap:18px; margin-top:9px; padding-top:9px; border-top:1px solid var(--line); color:var(--muted); font-size:.82rem; }
.feature-list { display:grid; gap:18px; margin-top:32px; }
.feature-item { display:grid; grid-template-columns:44px 1fr; gap:15px; align-items:start; }
.feature-icon { display:flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:13px; background:var(--cream); color:var(--gold); font-weight:900; }
.feature-item h4 { margin:0 0 5px; font-size:1rem; }
.feature-item p { margin:0; color:var(--muted); font-size:.93rem; }

.tool-grid { display:grid; grid-template-columns:1.1fr .9fr .9fr; gap:20px; margin-top:44px; }
.tool-card { min-height:260px; padding:28px; border-radius:var(--radius-lg); background:var(--cream); border:1px solid rgba(23,53,46,.08); }
.tool-card.featured { grid-row:span 2; min-height:540px; color:white; background:var(--forest); }
.tool-card .tool-icon { display:flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:16px; background:rgba(255,255,255,.15); font-size:1.2rem; }
.tool-card:not(.featured) .tool-icon { background:white; color:var(--gold); }
.tool-card h3 { margin:24px 0 10px; font-family:Georgia,serif; font-size:1.65rem; line-height:1.15; }
.tool-card p { margin:0; color:var(--muted); }
.tool-card.featured p { color:rgba(255,255,255,.72); }
.demo-translator { margin-top:34px; padding:20px; border-radius:18px; background:white; color:var(--ink); }
.demo-label { margin-bottom:7px; color:var(--muted); font-size:.72rem; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
.demo-input { padding:14px; border:1px solid var(--line); border-radius:12px; }
.demo-output { min-height:74px; margin-top:12px; padding:14px; border-radius:12px; background:var(--cream); font-family:"Yapiri", Georgia, serif; font-size:1.7rem; color:var(--forest); }
.tool-status { margin-top:15px; color:var(--gold-light); font-size:.8rem; font-weight:800; }

.quote-section { color:white; background:var(--forest); }
.quote-wrap { display:grid; grid-template-columns:.75fr 1.25fr; gap:80px; align-items:start; }
.quote-mark { font-family:Georgia,serif; font-size:10rem; line-height:.65; color:var(--gold); }
.quote-text { margin:0; font-family:Georgia,serif; font-size:clamp(2rem,4vw,3.8rem); line-height:1.12; }
.quote-credit { margin-top:25px; color:rgba(255,255,255,.6); }

.news-grid { display:grid; grid-template-columns:1.2fr .8fr .8fr; gap:20px; margin-top:42px; }
.story { overflow:hidden; border:1px solid var(--line); border-radius:var(--radius-lg); background:white; }
.story-visual { position:relative; min-height:220px; background:linear-gradient(145deg, var(--forest), var(--teal)); }
.story:first-child .story-visual { min-height:350px; }
.story-visual::after { content:""; position:absolute; inset:0; background:url('../img/hero-pattern.svg') center/cover; opacity:.35; }
.story-glyph { position:absolute; z-index:2; right:22px; bottom:12px; font-family:"Yapiri", Georgia,serif; font-size:5.5rem; color:rgba(255,255,255,.74); }
.story-body { padding:24px; }
.story-meta { color:var(--gold); font-size:.72rem; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
.story h3 { margin:10px 0 10px; font-family:Georgia,serif; font-size:1.45rem; line-height:1.2; }
.story:first-child h3 { font-size:2rem; }
.story p { margin:0; color:var(--muted); font-size:.9rem; }

.cta-panel { position:relative; overflow:hidden; display:grid; grid-template-columns:1.3fr .7fr; gap:40px; align-items:center; padding:54px; border-radius:var(--radius-lg); background:var(--gold-light); }
.cta-panel::after { content:""; position:absolute; right:-70px; top:-100px; width:320px; height:320px; border-radius:50%; border:60px solid rgba(23,53,46,.07); }
.cta-panel h2 { margin:0; font-family:Georgia,serif; font-size:clamp(2rem,4vw,3.4rem); line-height:1.04; }
.cta-panel p { max-width:650px; margin:14px 0 0; color:#5e5545; }
.cta-actions { position:relative; z-index:1; display:flex; flex-wrap:wrap; justify-content:flex-end; gap:10px; }

.site-footer { padding:70px 0 24px; color:white; background:#10251f; }
.footer-grid { display:grid; grid-template-columns:1.5fr repeat(3,.75fr); gap:50px; }
.footer-brand { display:flex; gap:14px; align-items:center; }
.footer-brand img { width:50px; }
.footer-brand strong { display:block; font-family:Georgia,serif; font-size:1.35rem; }
.footer-brand span { color:rgba(255,255,255,.48); font-size:.74rem; }
.footer-intro { max-width:380px; margin:20px 0 0; color:rgba(255,255,255,.58); font-size:.9rem; }
.footer-col h4 { margin:0 0 18px; color:var(--gold-light); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; }
.footer-col a { display:block; margin:10px 0; color:rgba(255,255,255,.66); font-size:.9rem; }
.footer-col a:hover { color:white; }
.footer-bottom { display:flex; justify-content:space-between; gap:20px; margin-top:55px; padding-top:22px; border-top:1px solid rgba(255,255,255,.1); color:rgba(255,255,255,.43); font-size:.78rem; }

/* Inner pages */
.page-hero { padding:90px 0 70px; color:white; background:var(--forest) url('../img/hero-pattern.svg') center/cover; }
.page-hero-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:60px; align-items:end; }
.page-hero h1 { margin:18px 0 18px; max-width:850px; font-family:Georgia,serif; font-size:clamp(3rem,6vw,5.5rem); line-height:.98; letter-spacing:-.045em; }
.page-hero p { max-width:720px; margin:0; color:rgba(255,255,255,.72); font-size:1.1rem; }
.page-hero-aside { padding:25px; border:1px solid rgba(255,255,255,.18); border-radius:22px; background:rgba(255,255,255,.08); backdrop-filter:blur(12px); }
.page-hero-aside strong { display:block; font-family:Georgia,serif; font-size:1.25rem; }
.page-hero-aside p { margin-top:8px; font-size:.9rem; }

.breadcrumb { display:flex; flex-wrap:wrap; gap:8px; color:rgba(255,255,255,.55); font-size:.78rem; font-weight:700; }
.breadcrumb span { color:white; }

.content-grid { display:grid; grid-template-columns:270px 1fr; gap:50px; align-items:start; }
.side-nav { position:sticky; top:102px; padding:20px; border:1px solid var(--line); border-radius:18px; background:white; }
.side-nav strong { display:block; margin:0 0 10px; font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); }
.side-nav a { display:block; padding:9px 10px; border-radius:10px; color:var(--muted); font-size:.9rem; font-weight:700; }
.side-nav a:hover, .side-nav a.active { background:var(--cream); color:var(--forest); }
.content-main h2 { margin:0 0 15px; font-family:Georgia,serif; font-size:clamp(2rem,4vw,3.2rem); line-height:1.08; }
.content-main h3 { margin:34px 0 10px; font-family:Georgia,serif; font-size:1.7rem; }
.content-main p { color:var(--muted); }

.search-shell { margin-top:-34px; position:relative; z-index:3; }
.search-bar { display:grid; grid-template-columns:1fr auto auto; gap:10px; padding:12px; border-radius:20px; background:white; box-shadow:var(--shadow); }
.search-input-wrap { display:flex; align-items:center; gap:10px; padding:0 14px; }
.search-input-wrap input { width:100%; min-height:48px; border:0; outline:0; color:var(--ink); background:transparent; }
.select-control { min-height:48px; padding:0 38px 0 14px; border:1px solid var(--line); border-radius:12px; background:white; color:var(--ink); }

.dictionary-layout { display:grid; grid-template-columns:1fr 330px; gap:30px; align-items:start; }
.entry-list { display:grid; gap:14px; }
.entry-card { padding:24px; border:1px solid var(--line); border-radius:18px; background:white; transition:var(--transition); }
.entry-card:hover { border-color:var(--gold-light); box-shadow:var(--shadow-soft); }
.entry-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.entry-script { font-family:"Yapiri", Georgia,serif; font-size:2rem; color:var(--forest); }
.entry-roman { margin-top:2px; font-size:1.3rem; font-weight:900; }
.pos-chip { display:inline-flex; padding:6px 9px; border-radius:999px; background:var(--cream); color:var(--gold); font-size:.72rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.entry-meaning { margin:16px 0 0; color:#34423d; }
.entry-example { margin-top:16px; padding:14px 16px; border-left:3px solid var(--gold); background:var(--cream); border-radius:0 12px 12px 0; color:var(--muted); font-size:.9rem; }
.entry-related { margin-top:14px; color:var(--muted); font-size:.82rem; }
.filter-panel { position:sticky; top:102px; padding:22px; border:1px solid var(--line); border-radius:18px; background:var(--cream); }
.filter-panel h3 { margin:0 0 16px; font-family:Georgia,serif; }
.filter-group { margin-top:18px; }
.filter-group label { display:block; margin-bottom:8px; font-size:.75rem; font-weight:900; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); }
.filter-group select { width:100%; min-height:44px; padding:0 12px; border:1px solid var(--line); border-radius:10px; background:white; }
.result-count { margin-bottom:14px; color:var(--muted); font-size:.85rem; }
.empty-state { display:none; padding:40px; text-align:center; border:1px dashed var(--line); border-radius:18px; color:var(--muted); }

.grammar-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.grammar-card { padding:26px; border:1px solid var(--line); border-radius:20px; background:white; }
.grammar-card .num { color:var(--gold); font-weight:900; }
.grammar-card h3 { margin:22px 0 8px; }
.rule-box { margin-top:20px; padding:20px; border-radius:16px; background:var(--cream); }
.rule-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; padding:10px 0; border-bottom:1px solid rgba(23,53,46,.1); }
.rule-row:last-child { border-bottom:0; }
.rule-row strong { color:var(--forest); }
.rule-row span { color:var(--muted); }

.corpus-toolbar { display:grid; grid-template-columns:1fr auto; gap:12px; margin-bottom:24px; }
.corpus-list { display:grid; gap:15px; }
.sentence-card { padding:24px; border:1px solid var(--line); border-radius:18px; background:white; }
.sentence-number { color:var(--gold); font-size:.7rem; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
.sentence-en { margin-top:8px; font-size:1.15rem; font-weight:800; }
.sentence-roman { margin-top:14px; color:var(--forest); }
.sentence-script { margin-top:8px; font-family:"Yapiri", Georgia,serif; font-size:1.8rem; color:var(--forest-2); }
.sentence-tags { display:flex; flex-wrap:wrap; gap:7px; margin-top:16px; }
.sentence-tags span { padding:5px 8px; border-radius:999px; background:var(--cream); color:var(--muted); font-size:.7rem; font-weight:800; }

.lesson-path { display:grid; gap:14px; counter-reset:lesson; }
.lesson-row { counter-increment:lesson; display:grid; grid-template-columns:64px 1fr auto; gap:20px; align-items:center; padding:22px; border:1px solid var(--line); border-radius:18px; background:white; }
.lesson-row::before { content:counter(lesson, decimal-leading-zero); display:flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:16px; background:var(--cream); color:var(--gold); font-weight:900; }
.lesson-row h3 { margin:0 0 4px; font-family:Georgia,serif; }
.lesson-row p { margin:0; color:var(--muted); font-size:.88rem; }
.lesson-meta { color:var(--muted); font-size:.78rem; white-space:nowrap; }

.tool-lab-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.lab-card { padding:28px; border:1px solid var(--line); border-radius:22px; background:white; }
.lab-card h3 { margin:18px 0 8px; font-family:Georgia,serif; font-size:1.65rem; }
.lab-card p { color:var(--muted); }
.keyboard { display:grid; grid-template-columns:repeat(7,1fr); gap:7px; margin-top:20px; }
.key { min-height:44px; border:1px solid var(--line); border-radius:9px; background:var(--cream); color:var(--forest); font-weight:900; }
.key:hover { background:var(--gold-light); }
.tool-output { min-height:100px; margin-top:16px; padding:18px; border:1px solid var(--line); border-radius:14px; background:var(--cream); font-family:"Yapiri", Georgia,serif; font-size:2rem; color:var(--forest); }

.timeline { position:relative; display:grid; gap:24px; margin-top:40px; }
.timeline::before { content:""; position:absolute; left:22px; top:0; bottom:0; width:2px; background:var(--gold-light); }
.timeline-item { position:relative; display:grid; grid-template-columns:46px 1fr; gap:20px; }
.timeline-dot { position:relative; z-index:1; width:46px; height:46px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:var(--forest); color:white; font-weight:900; }
.timeline-card { padding:22px; border:1px solid var(--line); border-radius:18px; background:white; }
.timeline-card h3 { margin:0 0 7px; }
.timeline-card p { margin:0; }

.notice { padding:18px 20px; border-radius:16px; background:var(--cream); border-left:4px solid var(--gold); color:var(--muted); }
.code-note { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:.88rem; }

.reveal { opacity:1; transform:none; }
body.reveal-ready .reveal { opacity:0; transform:translateY(18px); transition:opacity 650ms ease, transform 650ms ease; }
body.reveal-ready .reveal.visible { opacity:1; transform:none; }

@media (max-width: 1040px) {
  .nav-links { position:fixed; inset:76px 0 auto 0; display:none; flex-direction:column; align-items:stretch; gap:0; padding:18px 20px 28px; background:var(--paper); border-bottom:1px solid var(--line); box-shadow:var(--shadow-soft); }
  .nav-links.open { display:flex; }
  .nav-links a { padding:14px 4px; border-bottom:1px solid rgba(23,53,46,.08); }
  .nav-links a::after { display:none; }
  .menu-toggle { display:block; }
  .nav-actions .btn { display:none; }
  .hero-grid, .page-hero-grid, .split, .quote-wrap { grid-template-columns:1fr; }
  .hero-grid { gap:42px; min-height:auto; }
  .hero-panel { max-width:620px; }
  .stats-grid { grid-template-columns:repeat(2,1fr); }
  .stat:nth-child(2) { border-right:0; }
  .foundation-grid { grid-template-columns:1fr; }
  .foundation-card { min-height:330px; }
  .tool-grid { grid-template-columns:1fr 1fr; }
  .tool-card.featured { grid-row:auto; grid-column:1 / -1; min-height:auto; }
  .news-grid { grid-template-columns:1fr 1fr; }
  .news-grid .story:first-child { grid-column:1 / -1; }
  .footer-grid { grid-template-columns:1.3fr 1fr 1fr; }
  .footer-col:last-child { grid-column:2; }
  .content-grid { grid-template-columns:1fr; }
  .side-nav { position:static; display:flex; gap:6px; overflow:auto; white-space:nowrap; }
  .side-nav strong { display:none; }
  .dictionary-layout { grid-template-columns:1fr; }
  .filter-panel { position:static; }
}

@media (max-width: 720px) {
  .container { width:min(100% - 28px, var(--container)); }
  .section { padding:70px 0; }
  .nav-wrap { min-height:68px; }
  .brand img { width:42px; height:42px; }
  .brand-text span { display:none; }
  .nav-links { top:68px; }
  .hero-grid { padding:58px 0; }
  .hero h1 { font-size:clamp(3rem,15vw,4.6rem); }
  .hero-panel { padding:18px; }
  .stats-grid { grid-template-columns:1fr 1fr; }
  .stat { padding:24px 14px; }
  .stat strong { font-size:1.7rem; }
  .foundation-card { padding:25px; }
  .foundation-card h3 { margin-top:30px; }
  .card-link { left:25px; }
  .tool-grid, .news-grid, .grammar-grid, .tool-lab-grid { grid-template-columns:1fr; }
  .news-grid .story:first-child, .tool-card.featured { grid-column:auto; }
  .story:first-child .story-visual { min-height:260px; }
  .cta-panel { grid-template-columns:1fr; padding:34px 24px; }
  .cta-actions { justify-content:flex-start; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:35px 25px; }
  .footer-grid > div:first-child { grid-column:1 / -1; }
  .footer-col:last-child { grid-column:auto; }
  .footer-bottom { flex-direction:column; }
  .page-hero { padding:65px 0 50px; }
  .search-bar { grid-template-columns:1fr; }
  .select-control { width:100%; }
  .entry-head { flex-direction:column; gap:10px; }
  .corpus-toolbar { grid-template-columns:1fr; }
  .lesson-row { grid-template-columns:50px 1fr; }
  .lesson-meta { grid-column:2; }
  .keyboard { grid-template-columns:repeat(5,1fr); }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior:auto !important; transition:none !important; animation:none !important; }
  .reveal { opacity:1; transform:none; }
}

/* Homepage content expansion */
.mission-section { background:var(--paper); }
.mission-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:90px; align-items:start; }
.mission-copy { padding-top:42px; }
.mission-copy p { margin:0 0 18px; color:var(--muted); font-size:1.1rem; }
.mission-principles { display:flex; flex-wrap:wrap; gap:10px; margin-top:30px; }
.mission-principles span { padding:8px 12px; border:1px solid var(--line); border-radius:999px; color:var(--forest); background:white; font-size:.78rem; font-weight:900; }
.foundation-section { background:var(--cream); }

.learning-home { color:white; background:var(--forest); }
.learning-home .section-kicker { color:var(--gold-light); }
.learning-home .section-copy { color:rgba(255,255,255,.7); }
.learning-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:80px; align-items:center; }
.learning-actions { display:flex; flex-wrap:wrap; align-items:center; gap:18px; margin-top:30px; }
.text-link { display:inline-flex; align-items:center; gap:8px; color:var(--forest); font-weight:900; }
.learning-home .text-link { color:var(--gold-light); }
.lesson-preview { padding:28px; border:1px solid rgba(255,255,255,.15); border-radius:var(--radius-lg); background:rgba(255,255,255,.08); box-shadow:0 25px 80px rgba(0,0,0,.16); backdrop-filter:blur(16px); }
.lesson-preview-head { display:flex; justify-content:space-between; gap:20px; padding-bottom:20px; border-bottom:1px solid rgba(255,255,255,.14); }
.lesson-preview-head span { color:var(--gold-light); font-size:.73rem; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
.lesson-preview-head strong { font-family:Georgia,serif; }
.lesson-preview ol { list-style:none; padding:0; margin:10px 0 0; }
.lesson-preview li { display:grid; grid-template-columns:48px 1fr; gap:16px; align-items:center; padding:17px 0; border-bottom:1px solid rgba(255,255,255,.1); }
.lesson-preview li:last-child { border-bottom:0; }
.lesson-preview li > span { display:flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:13px; background:rgba(239,215,174,.14); color:var(--gold-light); font-weight:900; }
.lesson-preview strong, .lesson-preview small { display:block; }
.lesson-preview small { margin-top:3px; color:rgba(255,255,255,.56); }

.tools-home { background:var(--paper); }
.tool-card .text-link { margin-top:24px; }
.section-link-row { display:flex; justify-content:center; margin-top:34px; }
.section-heading-row { display:flex; justify-content:space-between; align-items:end; gap:30px; }

.featured-language { background:var(--cream); }
.language-feature-grid { display:grid; grid-template-columns:.78fr 1.22fr; gap:22px; margin-top:40px; }
.language-feature-card { padding:32px; border:1px solid var(--line); border-radius:var(--radius-lg); background:white; box-shadow:var(--shadow-soft); }
.feature-card-label { color:var(--gold); font-size:.72rem; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
.feature-script { margin-top:22px; font-family:"Yapiri", Georgia,serif; font-size:3.4rem; color:var(--forest); }
.language-feature-card h3 { margin:4px 0 0; font-family:Georgia,serif; font-size:2rem; }
.entry-tag { display:inline-flex; margin-top:8px; padding:5px 9px; border-radius:999px; background:var(--cream); color:var(--gold); font-size:.7rem; font-weight:900; text-transform:uppercase; }
.feature-definition { margin:22px 0; color:var(--muted); font-size:1.04rem; }
.feature-details { display:grid; gap:10px; margin:0 0 24px; }
.feature-details div { display:flex; justify-content:space-between; gap:24px; padding:9px 0; border-bottom:1px solid var(--line); }
.feature-details dt { color:var(--muted); }
.feature-details dd { margin:0; color:var(--forest); font-weight:800; }
.sentence-feature { position:relative; overflow:hidden; color:white; background:var(--forest); }
.sentence-feature::after { content:""; position:absolute; inset:0; background:url('../img/hero-pattern.svg') center/cover; opacity:.25; pointer-events:none; }
.sentence-feature > * { position:relative; z-index:1; }
.sentence-feature .feature-card-label { color:var(--gold-light); }
.feature-english { margin:28px 0 8px; font-family:Georgia,serif; font-size:clamp(2rem,4vw,3.4rem); line-height:1.05; }
.feature-roman { margin:0; color:var(--gold-light); font-size:1.14rem; font-weight:800; }
.sentence-script-large { margin-top:20px; color:white; font-size:2.25rem; }
.sentence-analysis { display:flex; flex-wrap:wrap; gap:8px; margin-top:28px; }
.sentence-analysis span { padding:6px 9px; border-radius:999px; background:rgba(255,255,255,.1); color:rgba(255,255,255,.7); font-size:.72rem; font-weight:800; }
.feature-note { max-width:620px; margin:24px 0 0; color:rgba(255,255,255,.62); }

.yapiri-intro { background:var(--paper); }
.yapiri-visual { position:relative; display:flex; flex-direction:column; justify-content:center; align-items:center; min-height:520px; overflow:hidden; border-radius:var(--radius-lg); color:white; background:var(--forest); box-shadow:var(--shadow); }
.yapiri-visual::before { content:""; position:absolute; inset:0; background:url('../img/hero-pattern.svg') center/cover; opacity:.45; }
.yapiri-glyph-line, .yapiri-roman-line { position:relative; z-index:2; }
.yapiri-glyph-line { font-family:"Yapiri",Georgia,serif; font-size:clamp(4rem,8vw,7rem); }
.yapiri-roman-line { margin-top:8px; color:var(--gold-light); font-weight:900; letter-spacing:.55em; text-indent:.55em; }
.yapiri-orbit { position:absolute; border:1px solid rgba(239,215,174,.3); border-radius:50%; }
.orbit-one { width:340px; height:340px; }
.orbit-two { width:470px; height:470px; }
.recognition-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:30px; }
.recognition-grid div { padding:18px; border:1px solid var(--line); border-radius:16px; background:var(--cream); }
.recognition-grid strong, .recognition-grid span { display:block; }
.recognition-grid strong { color:var(--forest); }
.recognition-grid span { margin-top:4px; color:var(--muted); font-size:.82rem; }

.progress-section { background:var(--cream); }
.progress-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:40px; }
.progress-card { padding:25px; border:1px solid var(--line); border-radius:22px; background:white; }
.progress-card h3 { margin:24px 0 8px; font-family:Georgia,serif; font-size:1.65rem; }
.progress-card p { min-height:96px; margin:0; color:var(--muted); font-size:.9rem; }
.progress-status { display:inline-flex; padding:6px 9px; border-radius:999px; font-size:.68rem; font-weight:900; letter-spacing:.06em; text-transform:uppercase; }
.progress-status.ready { background:#e9f4ef; color:#246249; }
.progress-status.building { background:#fff3db; color:#8b5b16; }
.progress-status.prototype { background:#e8eef8; color:#375a8b; }
.progress-track { height:7px; margin-top:22px; overflow:hidden; border-radius:99px; background:var(--cream); }
.progress-track i { display:block; height:100%; border-radius:99px; background:var(--gold); }

.contribution-section { color:white; background:var(--forest); }
.contribution-section .section-kicker { color:var(--gold-light); }
.contribution-section .section-copy { color:rgba(255,255,255,.66); }
.contribution-grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:80px; align-items:start; }
.contribution-list { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.contribution-list > div { display:grid; grid-template-columns:42px 1fr; gap:12px; padding:18px; border:1px solid rgba(255,255,255,.12); border-radius:16px; background:rgba(255,255,255,.06); }
.contribution-list span { display:flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:12px; background:rgba(239,215,174,.12); color:var(--gold-light); font-weight:900; }
.contribution-list p { margin:0; color:rgba(255,255,255,.62); font-size:.86rem; }
.contribution-list strong { display:block; color:white; }

.updates-section { background:var(--paper); }
.future-section { color:white; background:#10251f; }
.future-section .section-kicker { color:var(--gold-light); }
.future-section .section-copy { color:rgba(255,255,255,.65); }
.future-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start; }
.future-path { display:grid; gap:14px; }
.future-path div { position:relative; padding:22px 22px 22px 74px; border:1px solid rgba(255,255,255,.12); border-radius:18px; background:rgba(255,255,255,.05); }
.future-path span { position:absolute; left:20px; top:22px; color:var(--gold-light); font-size:.72rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.future-path strong { display:block; font-family:Georgia,serif; font-size:1.35rem; }
.future-path p { margin:4px 0 0; color:rgba(255,255,255,.58); font-size:.88rem; }
.final-cta { background:var(--paper); }

@media (max-width: 1040px) {
  .mission-grid, .learning-grid, .contribution-grid, .future-grid { grid-template-columns:1fr; gap:45px; }
  .mission-copy { padding-top:0; }
  .language-feature-grid { grid-template-columns:1fr; }
  .progress-grid { grid-template-columns:1fr 1fr; }
  .section-heading-row { align-items:start; }
}

@media (max-width: 720px) {
  .section-heading-row { flex-direction:column; }
  .mission-principles { gap:7px; }
  .learning-home .section-title, .contribution-section .section-title, .future-section .section-title { font-size:clamp(2.2rem,11vw,3.3rem); }
  .lesson-preview { padding:20px; }
  .lesson-preview-head { flex-direction:column; gap:5px; }
  .language-feature-card { padding:24px; }
  .recognition-grid, .progress-grid, .contribution-list { grid-template-columns:1fr; }
  .progress-card p { min-height:0; }
  .yapiri-visual { min-height:390px; }
  .orbit-one { width:270px; height:270px; }
  .orbit-two { width:360px; height:360px; }
  .future-path div { padding-left:22px; padding-top:58px; }
}