/* Fallen Tear: The Ascension — cave teal, gold ring, orange cape. Not a fleet skin. */
:root{
  --bg:#050b13;
  --panel:#0d1820;
  --panel-2:#13292e;
  --ink:#eef5fc;
  --muted:#99b9bf;
  --accent:#d4af37;
  --accent-2:#e85d04;
  --cyan:#79b7d8;
  --danger:#c23b22;
  --good:#7fb069;
  --border:#275552;
  --hard:#02060a;
  --radius:2px;
  --radius-sm:2px;
  --maxw:1120px;
  --font:"Segoe UI",system-ui,-apple-system,sans-serif;
  --display:Palatino,"Palatino Linotype","Book Antiqua",Georgia,serif;
  --shadow:6px 6px 0 #02060a;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{
  margin:0;color:var(--ink);font:16px/1.65 var(--font);
  -webkit-font-smoothing:antialiased;background:var(--bg);
  background-image:
    radial-gradient(900px 420px at 12% -10%, rgba(39,85,82,.35), transparent 60%),
    radial-gradient(700px 380px at 90% 8%, rgba(232,93,4,.12), transparent 55%);
}
img{max-width:100%;height:auto}
a{color:var(--cyan);text-decoration:none}
a:hover{color:var(--accent);text-decoration:underline}
a:focus-visible{outline:2px dashed var(--accent);outline-offset:2px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 18px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:var(--panel);padding:8px 12px;z-index:50}

.ribbon{background:#071540;color:var(--accent);font:700 12px/1.3 var(--font);letter-spacing:.08em;text-transform:uppercase;border-bottom:3px solid var(--hard);padding:8px 0}
.sticker{display:none}

.topbar{position:sticky;top:0;z-index:30;background:rgba(5,11,19,.94);border-bottom:3px solid var(--hard);backdrop-filter:blur(8px)}
.topbar .bar{display:flex;align-items:center;gap:14px;min-height:64px}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);font-family:var(--display);font-weight:700;font-size:18px;white-space:nowrap}
.brand span{white-space:nowrap}
.brand img{width:40px;height:40px;border:3px solid var(--hard);box-shadow:3px 3px 0 var(--accent-2);object-fit:cover}
.nav{margin-left:auto;display:flex;align-items:center;gap:12px}
.nav > ul{display:flex;gap:4px;margin:0;padding:0;list-style:none;flex-wrap:wrap}
.nav a{color:var(--ink);font-weight:700;padding:8px 12px;display:block}
.nav .active > a{color:var(--accent)}
.nav li{position:relative}
.nav .kids{display:none;position:absolute;top:100%;left:0;min-width:210px;background:#071540;border:3px solid var(--hard);box-shadow:var(--shadow);padding:6px;flex-direction:column;z-index:40}
.nav .kids a{white-space:nowrap}
.nav li.has-kids::after{content:"";position:absolute;left:-10px;right:-10px;top:100%;height:12px;z-index:39}
.nav .caret{display:inline-block;width:9px;height:6px;margin-left:8px;vertical-align:middle;opacity:.85;background:currentColor;clip-path:polygon(0 0,100% 0,50% 100%)}
.nav li.has-kids:hover>a>.caret,.nav li.has-kids:focus-within>a>.caret{transform:rotate(180deg)}
.nav li.has-kids:hover .kids,.nav li.has-kids:focus-within .kids{display:flex}
.nav .cta{border:3px solid var(--accent);padding:6px 12px;font-weight:700;box-shadow:3px 3px 0 var(--hard)}
@media (max-width:820px){
  .topbar .bar{flex-wrap:wrap;padding-top:8px;padding-bottom:8px}
  .brand span{max-width:58vw;overflow:hidden;text-overflow:ellipsis}
  .nav{margin-left:0;width:100%;overflow-x:auto}
  .nav > ul{flex-wrap:nowrap;white-space:nowrap}
  .nav .kids{left:0}
  .nav li.has-kids::after{height:18px}
  .hero{min-height:360px;background-position:70% 30%}
  .hero-in{padding:40px 18px 36px;max-width:none}
  .hero-cta{flex-direction:column;align-items:stretch}
  .hero-cta .btn{text-align:center}
}

.hero{
  position:relative;min-height:440px;border-bottom:3px solid var(--hard);
  background:
    linear-gradient(90deg, rgba(5,11,19,.92) 0%, rgba(5,11,19,.55) 42%, rgba(5,11,19,.18) 70%),
    var(--hero) 55% 42% / cover no-repeat;
}
.hero-in{padding:72px 18px 56px;max-width:34rem}
.eyebrow{color:var(--accent);font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:12px;margin:0 0 10px}
.hero h1{font-family:var(--display);font-size:clamp(34px,6vw,56px);line-height:1.02;margin:0 0 12px;text-shadow:3px 3px 0 var(--hard)}
.lead{color:var(--ink);font-size:18px;max-width:46ch;margin:0}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.btn{background:var(--accent);color:#1a1204;border:3px solid var(--hard);padding:10px 16px;font-weight:800;box-shadow:var(--shadow);display:inline-block}
.btn.ghost{background:transparent;color:var(--ink)}
.btn:hover{text-decoration:none;transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--hard)}

.facts-strip{background:#071540;border-bottom:3px solid var(--hard)}
.facts{display:flex;flex-wrap:wrap;gap:0}
.fact{flex:1 1 160px;padding:14px 16px;border-right:3px solid var(--hard)}
.fact-k{display:block;color:var(--accent);font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700}
.fact-v{display:block;font-family:var(--display);font-size:18px;margin-top:4px}

.section-head{margin:28px 0 8px}
.overline{display:block;color:var(--accent-2);font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700}
.section-head h2{font-family:var(--display);margin:4px 0 0;font-size:28px}
.count-pill{display:inline-block;margin-left:10px;background:var(--accent);color:#1a1204;border:3px solid var(--hard);font-size:14px;padding:0 8px;transform:rotate(-6deg);vertical-align:middle}

.grid{display:flex;flex-wrap:wrap;gap:16px;margin:18px 0 30px}
.card{flex:1 1 260px;display:flex;flex-direction:column;background:var(--panel);border:3px solid var(--hard);box-shadow:var(--shadow);color:var(--ink);overflow:hidden}
.card:hover{text-decoration:none;transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--accent-2)}
.card .thumb{position:relative;display:block}
.card img{aspect-ratio:16/9;object-fit:cover;width:100%;display:block}
.card-body{padding:12px 14px 16px}
.card h3{margin:6px 0 6px;font-family:var(--display);font-size:20px}
.card p{margin:0 0 10px;color:var(--muted);font-size:14px}
.card .go{color:var(--accent);font-weight:800;font-size:14px}
.card .stamp{display:block;color:var(--muted);font-size:12px;margin-top:6px}
.pill-tag{position:absolute;left:8px;top:8px;background:var(--accent-2);color:#fff;border:2px solid var(--hard);font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:3px 7px}

.article-grid{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:28px;padding:22px 0 48px}
@media (max-width:900px){.article-grid{grid-template-columns:1fr}}
article{padding:8px 0 24px}
article h1, .wrap h1{font-family:var(--display);font-size:clamp(26px,5vw,40px);line-height:1.1}
article h2{margin-top:34px;font-size:23px;font-family:var(--display);border-bottom:3px solid var(--accent);padding-bottom:6px}
article h3{margin-top:24px;font-size:19px}
article img.zoom{border:3px solid var(--hard);box-shadow:var(--shadow);cursor:zoom-in;display:block;margin:14px 0}
.tbl-wrap{overflow-x:auto;margin:14px 0}
table{border-collapse:collapse;width:100%;font-size:15px;background:var(--panel)}
th,td{border:2px solid var(--border);padding:10px 12px;text-align:left;vertical-align:top}
th{background:#071540;color:var(--accent);font-family:var(--display)}
.quick-answer{background:#071540;border:3px solid var(--hard);border-left:8px solid var(--accent-2);padding:14px 16px;margin:12px 0 20px;box-shadow:var(--shadow)}
.qa-stamp{display:block;color:var(--accent);font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;margin-bottom:6px}
.crumb{font-size:13px;color:var(--muted);margin:0 0 10px}
.crumb .sep{margin:0 6px;opacity:.5}
.toc{position:sticky;top:84px;align-self:start}
.toc-list{display:flex;flex-direction:column;gap:6px;border-left:3px solid var(--accent);padding-left:10px}
.toc-list a{color:var(--muted);font-size:13px}
.callout, .note, article .note, .md-note{
  border:3px solid var(--hard);border-left:8px solid var(--cyan);background:var(--panel-2);padding:12px 14px;margin:16px 0
}
.foot{background:#02060a;border-top:3px solid var(--hard);padding:28px 0 40px;color:var(--muted);font-size:14px}
.disclaimer{color:var(--ink)}
.foot-links a{margin:0 4px}
.muted{color:var(--muted)}
.all-guides{margin-top:36px}
article p, article ul, article ol, article blockquote, article .callout, article h2, article h3{max-width:72ch}
.tbl-wrap.two-col table th:first-child,.tbl-wrap.two-col table td:first-child{white-space:normal;width:31%}
.tbl-wrap.two-col table th:last-child,.tbl-wrap.two-col table td:last-child{width:69%}
img.zoom.open{position:relative;z-index:80;outline:3px solid var(--accent)}
.hero h1{text-wrap:balance}

.ad-slot{display:none;margin:26px auto;max-width:var(--maxw)}
@media (hover: hover) and (pointer: fine){
  .ad-slot{display:block}
}
@media not all and (hover: hover) and (pointer: fine){
  .ad-slot{display:none}
}

@media (hover:hover) and (pointer:fine){
  .ad-slot-native{display:block}
}
@media not all and (hover:hover) and (pointer:fine){
  .ad-slot-native,.ad-slot-mobile{display:none}
}
@media print{
  .ad-slot,.ad-slot-native,.ad-slot-mobile,.topbar,.ribbon{display:none}
}
