:root{
  --bg:#071018; --panel:#0d1924; --panel2:#122333; --line:#28465a;
  --text:#eef6f7; --muted:#a9bbc2; --cyan:#72d9df; --green:#98d99b;
  --gold:#dfbe72; --danger:#e48c67; --max:1320px; --radius:18px;
}
*{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth}
body{margin:0;color:var(--text);font-family:Inter,Segoe UI,Arial,sans-serif;background:
 radial-gradient(circle at 12% 8%,rgba(74,167,176,.11),transparent 28rem),
 radial-gradient(circle at 88% 18%,rgba(136,185,92,.08),transparent 30rem),var(--bg);line-height:1.55}
a{color:inherit;text-decoration:none}.wrap{width:min(var(--max),calc(100% - 44px));margin:auto}
.topbar{position:sticky;top:0;z-index:30;background:rgba(6,15,23,.94);backdrop-filter:blur(12px);border-bottom:1px solid rgba(114,217,223,.18)}
.navrow{min-height:72px;display:flex;align-items:center;gap:22px}.brand{display:flex;align-items:center;gap:12px;font-weight:900;letter-spacing:.12em;white-space:nowrap}
.mark{width:34px;height:34px;border:1px solid var(--cyan);border-radius:50%;display:grid;place-items:center;color:var(--cyan);font-size:15px;box-shadow:0 0 24px rgba(114,217,223,.16)}
.navlinks{display:flex;align-items:center;gap:4px;flex:1;justify-content:center}.navlinks a{padding:10px 11px;border-radius:10px;color:#c8d7dc;font-size:14px}.navlinks a:hover{background:#122331;color:#fff}
.actions{display:flex;gap:8px}.btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;border:1px solid #315064;border-radius:11px;background:#10212d;color:white;font-weight:700;font-size:14px;cursor:pointer}.btn:hover{border-color:var(--cyan)}.btn.primary{background:linear-gradient(135deg,#17606a,#1e4856);border-color:#4db8c3}
.hero{position:relative;overflow:hidden;min-height:620px;border-bottom:1px solid #213947;display:flex;align-items:flex-end;background:
 linear-gradient(180deg,rgba(3,8,12,.12),rgba(3,8,12,.84)),
 radial-gradient(ellipse at 50% 65%,rgba(121,181,103,.19),transparent 34%),
 linear-gradient(150deg,#102b38 0%,#16394a 28%,#193228 55%,#071018 100%)}
.hero:before{content:"";position:absolute;inset:0;background:
 radial-gradient(ellipse at 25% 85%,rgba(85,151,93,.33),transparent 28%),
 radial-gradient(ellipse at 73% 78%,rgba(102,137,76,.22),transparent 27%),
 linear-gradient(115deg,transparent 50%,rgba(123,211,216,.08) 51%,transparent 52%);opacity:.92}
.hero:after{content:"PRELIMINARY HERO ART SLOT";position:absolute;top:96px;right:6%;padding:7px 10px;border:1px solid rgba(255,255,255,.2);border-radius:8px;color:rgba(255,255,255,.62);font-size:11px;letter-spacing:.14em;background:rgba(0,0,0,.2)}
.hero-content{position:relative;z-index:2;padding:90px 0 70px;max-width:900px}.eyebrow{font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--cyan);font-weight:800}.hero h1{font-size:clamp(58px,9vw,124px);line-height:.88;margin:14px 0 20px;letter-spacing:-.055em}.hero .lede{font-size:clamp(18px,2.3vw,28px);max-width:850px;color:#d5e3e6;margin:0 0 28px}.pillrow{display:flex;flex-wrap:wrap;gap:8px}.pill{padding:8px 11px;border-radius:999px;border:1px solid #335568;background:rgba(5,17,24,.67);color:#cde1e4;font-size:13px}
.section{padding:64px 0}.section.alt{background:rgba(13,25,36,.48);border-top:1px solid rgba(114,217,223,.11);border-bottom:1px solid rgba(114,217,223,.11)}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:26px}.kicker{text-transform:uppercase;letter-spacing:.18em;color:var(--cyan);font-weight:800;font-size:12px}.section h2{font-size:clamp(30px,4vw,46px);margin:6px 0 0;letter-spacing:-.03em}.section-note{color:var(--muted);max-width:680px;margin:8px 0 0}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.card{display:flex;flex-direction:column;min-height:360px;background:linear-gradient(180deg,#132635,#0c1822);border:1px solid #254354;border-radius:var(--radius);overflow:hidden;box-shadow:0 14px 36px rgba(0,0,0,.18);transition:.2s transform,.2s border-color}.card:hover{transform:translateY(-3px);border-color:#58aeb8}.card-art{height:176px;position:relative;overflow:hidden;background:#152a34}.card-art:after{content:attr(data-slot);position:absolute;left:14px;bottom:12px;font-size:10px;letter-spacing:.12em;color:rgba(255,255,255,.66);padding:5px 7px;border:1px solid rgba(255,255,255,.16);border-radius:6px;background:rgba(0,0,0,.24)}
.art-world{background:radial-gradient(circle at 70% 25%,#6e9b7a,transparent 18%),linear-gradient(150deg,#163f52,#284634 55%,#09151b)}
.art-avian{background:linear-gradient(130deg,#0c273a,#2a5667 42%,#9c865c 43%,#1b2f3b 64%,#071018)}
.art-insect{background:radial-gradient(circle at 70% 40%,#718d4a,transparent 18%),linear-gradient(140deg,#13241a,#344126 45%,#6e4d31 46%,#101714)}
.art-bio{background:radial-gradient(circle at 35% 45%,#699a67 0 12%,transparent 13%),radial-gradient(circle at 60% 55%,#8ab46f 0 10%,transparent 11%),linear-gradient(145deg,#10312f,#1b493f,#09161d)}
.art-tech{background:linear-gradient(115deg,#0d2230 0 45%,#4a7782 46% 48%,#10202a 49% 67%,#7a7047 68% 70%,#0b151c 71%)}
.art-war{background:linear-gradient(164deg,#2a4d5d 0 38%,#d08758 39% 40%,#17222b 41% 58%,#996438 59% 60%,#10171d 61%)}
.art-history{background:linear-gradient(110deg,#46392e,#1d3d3d 47%,#0c1820)}.art-books{background:linear-gradient(120deg,#192c38 0 30%,#7b5a3c 31% 33%,#273d4a 34% 65%,#4f7349 66%)}
.card-body{padding:21px 21px 22px;display:flex;flex-direction:column;flex:1}.card h3{font-size:23px;line-height:1.08;margin:0 0 8px}.card p{color:#b7c8cd;margin:0 0 16px}.meta{margin-top:auto;color:var(--cyan);font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.arrow{font-size:22px;margin-left:auto;color:var(--gold)}
.split{display:grid;grid-template-columns:1.15fr .85fr;gap:28px}.panel{border:1px solid #284656;background:#0d1a24;border-radius:var(--radius);padding:26px}.panel h3{margin-top:0;font-size:25px}.factgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.fact{padding:16px;border-radius:13px;background:#122531;border:1px solid #244252}.fact b{display:block;color:#fff;font-size:20px}.fact span{color:#9fb3ba;font-size:13px}
.breadcrumb{padding:22px 0;color:#8fa6ae;font-size:13px}.pagehero{padding:66px 0 48px;border-bottom:1px solid #213847;background:linear-gradient(135deg,#0e2937,#12251e 70%,#081119)}.pagehero h1{font-size:clamp(42px,6vw,72px);margin:6px 0 12px;letter-spacing:-.045em}.pagehero p{max-width:850px;color:#bfd0d5;font-size:18px}.status{color:var(--gold);font-weight:800}
.article{max-width:900px}.article h2{font-size:32px;margin-top:42px}.article p,.article li{color:#bdcdd1}.article li{margin:8px 0}.callout{padding:20px;border-left:3px solid var(--cyan);background:#0e1e29;border-radius:0 12px 12px 0;color:#cfe0e3;margin:24px 0}.tag-ok{color:#9de09d}.tag-work{color:#e3c27a}.tag-reserve{color:#d99c83}
.bookgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.book{border:1px solid #2d4d5e;background:#0d1a24;border-radius:16px;padding:24px}.booknum{font-size:12px;letter-spacing:.18em;color:var(--cyan);font-weight:800}.book h3{font-size:26px;margin:9px 0}.book p{color:#afc1c7}.small{font-size:12px;color:#8ea6ae}
footer{border-top:1px solid #223a49;padding:32px 0 50px;color:#849ba4;font-size:13px}.footerrow{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.searchbox{display:none;position:fixed;inset:0;z-index:99;background:rgba(0,0,0,.74);padding:10vh 20px}.searchbox.open{display:block}.searchpanel{width:min(760px,100%);margin:auto;background:#0d1924;border:1px solid #315466;border-radius:18px;padding:20px;box-shadow:0 40px 120px #000}.searchtop{display:flex;gap:10px}.searchtop input{flex:1;background:#07121a;color:#fff;border:1px solid #315064;border-radius:10px;padding:13px 14px;font-size:16px}.results a{display:block;border-top:1px solid #203948;padding:12px 6px}.results span{display:block;color:#9db1b8;font-size:12px}
@media(max-width:980px){.navlinks{display:none}.actions{margin-left:auto}.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.split{grid-template-columns:1fr}.hero{min-height:560px}.bookgrid{grid-template-columns:1fr}.factgrid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.wrap{width:min(100% - 26px,var(--max))}.navrow{min-height:64px;gap:10px}.brand{font-size:13px}.mark{width:30px;height:30px}.actions .btn:first-child{display:none}.btn{padding:9px 11px}.hero{min-height:520px}.hero-content{padding:72px 0 48px}.hero h1{font-size:54px}.hero .lede{font-size:18px}.grid{grid-template-columns:1fr}.section{padding:46px 0}.section-head{display:block}.card{min-height:0}.card-art{height:190px}.factgrid{grid-template-columns:1fr}.pagehero{padding:48px 0 38px}}

/* ===== SKYHIVE PHASE 1 VISUAL REVIEW REV0.2 ===== */
.hero{
  min-height:720px;
  background-image:linear-gradient(90deg,rgba(2,7,10,.82) 0%,rgba(2,7,10,.47) 43%,rgba(2,7,10,.16) 68%,rgba(2,7,10,.44) 100%),linear-gradient(0deg,rgba(3,8,12,.92) 0%,rgba(3,8,12,.08) 62%),url('img/world.webp');
  background-size:cover;background-position:center 50%;
}
.hero:before{background:linear-gradient(110deg,rgba(114,217,223,.08),transparent 38%),linear-gradient(0deg,rgba(5,14,20,.42),transparent 40%);opacity:1}
.hero:after{content:"PHASE 1 · VISUAL CONCEPT";top:104px;right:4%;background:rgba(1,8,12,.48);border-color:rgba(255,255,255,.28);color:#d9e7ea}
.hero-content{padding:120px 0 82px;max-width:950px;text-shadow:0 2px 26px rgba(0,0,0,.65)}
.hero h1{font-size:clamp(68px,9.5vw,138px)}
.hero .lede{max-width:920px;color:#eef5f6;text-shadow:0 2px 18px rgba(0,0,0,.85)}

.pagehero{position:relative;overflow:hidden;min-height:465px;display:flex;align-items:flex-end;padding:0;border-bottom:1px solid #355163;background-size:cover;background-position:center}
.pagehero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,9,13,.88) 0%,rgba(3,9,13,.54) 52%,rgba(3,9,13,.24) 100%),linear-gradient(0deg,rgba(3,9,13,.86),transparent 55%)}
.pagehero .wrap{position:relative;z-index:2;padding-top:118px;padding-bottom:52px}
.pagehero h1{font-size:clamp(54px,6.8vw,92px);max-width:1000px;text-shadow:0 3px 24px #000}
.pagehero p{font-size:20px;max-width:930px;color:#e2ecee;text-shadow:0 2px 16px #000}
.pagehero .status{font-size:12px;color:#f0ce81;letter-spacing:.08em;text-transform:uppercase}
.page-world{background-image:url('img/world.webp');background-position:center 58%}
.page-species{background-image:url('img/species.webp')}
.page-avian{background-image:url('img/avian.webp');background-position:center 36%}
.page-arthropod{background-image:url('img/arthropod.webp');background-position:center 58%}
.page-civilizations{background-image:url('img/civilizations.webp')}
.page-technology{background-image:url('img/technology.webp');background-position:center 34%}
.page-warfare{background-image:url('img/battle.webp');background-position:center 48%}
.page-history{background-image:url('img/history.webp');background-position:center 42%}
.page-books{background-image:url('img/books.webp');background-position:center}

.grid{gap:20px}.card{min-height:385px;border-color:#315062;background:linear-gradient(180deg,#10222f,#0b151d);box-shadow:0 18px 44px rgba(0,0,0,.28)}
.card-art{height:205px;background-size:cover!important;background-position:center!important}
.card-art:before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(4,11,15,.76),transparent 60%)}
.card-art:after{z-index:2;background:rgba(1,8,12,.62);border-color:rgba(255,255,255,.24);color:#eef5f6}
.art-world{background-image:url('img/world.webp')!important}.art-avian{background-image:url('img/avian.webp')!important}.art-insect{background-image:url('img/arthropod.webp')!important}.art-bio{background-image:url('img/biome.webp')!important}.art-tech{background-image:url('img/technology.webp')!important}.art-war{background-image:url('img/battle.webp')!important}.art-history{background-image:url('img/history.webp')!important}.art-books{background-image:url('img/books.webp')!important}
.card h3{font-size:25px}.card p{font-size:15px}.meta{display:flex;align-items:center;gap:8px}.meta .arrow{margin-left:auto}

.feature-band{display:grid;grid-template-columns:1.18fr .82fr;gap:24px;align-items:stretch}.feature-image{min-height:420px;border:1px solid #315062;border-radius:20px;background-size:cover;background-position:center;position:relative;overflow:hidden;box-shadow:0 18px 50px rgba(0,0,0,.26)}.feature-image:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(4,11,16,.68),transparent 55%)}
.feature-copy{border:1px solid #2b4859;border-radius:20px;padding:30px;background:linear-gradient(160deg,#102331,#0a151d)}.feature-copy h3{font-size:30px;line-height:1.05;margin:7px 0 15px}.feature-copy p{color:#b9cbd0}.feature-copy ul{padding-left:19px;color:#b9cbd0}.feature-copy li{margin:9px 0}
.visual-world{background-image:url('img/biome.webp')}.visual-avian{background-image:url('img/avian.webp')}.visual-arthropod{background-image:url('img/arthropod.webp')}.visual-split{background-image:url('img/species.webp')}.visual-tech{background-image:url('img/technology.webp')}.visual-war{background-image:url('img/battle.webp')}.visual-history{background-image:url('img/history.webp')}.visual-books{background-image:url('img/books.webp')}

.ribbon{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}.ribbon span{border:1px solid #35596c;background:#0d1b25;border-radius:999px;padding:8px 11px;color:#bcd0d5;font-size:12px}
.timeline{display:grid;gap:11px}.time-row{display:grid;grid-template-columns:150px 1fr;gap:15px;align-items:start;padding:14px;border:1px solid #2b4858;border-radius:12px;background:#0d1b25}.time-row b{color:#e7c87f}.time-row span{color:#b7c8cd}
.covergrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.covercard{min-height:510px;border-radius:18px;border:1px solid #345466;overflow:hidden;position:relative;background-size:cover;background-position:center;box-shadow:0 18px 50px rgba(0,0,0,.3)}.covercard:before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(3,9,13,.95) 0%,rgba(3,9,13,.25) 60%,rgba(3,9,13,.12))}.coverbody{position:absolute;left:0;right:0;bottom:0;padding:26px;z-index:2}.coverbody .booknum{color:#8ae2e6}.coverbody h3{font-size:29px;line-height:1.05;margin:8px 0 10px}.coverbody p{color:#c3d3d6}.cover-one{background-image:url('img/avian.webp');background-position:64% center}.cover-two{background-image:url('img/battle.webp')}.cover-three{background-image:url('img/arthropod.webp');background-position:35% center}

@media(max-width:980px){.feature-band{grid-template-columns:1fr}.covergrid{grid-template-columns:1fr}.covercard{min-height:430px}.pagehero{min-height:420px}}
@media(max-width:620px){.hero{min-height:620px;background-position:58% center}.pagehero{min-height:390px}.pagehero .wrap{padding-top:90px;padding-bottom:38px}.pagehero h1{font-size:48px}.pagehero p{font-size:17px}.feature-image{min-height:300px}.feature-copy{padding:22px}.time-row{grid-template-columns:1fr}.covercard{min-height:390px}}

/* ===== SKYHIVE PHASE 2 TABLET RESPONSIVE REV0.3 ===== */
@media (min-width:621px) and (max-width:1100px){
  .wrap{width:min(var(--max),calc(100% - 36px))}
  .navrow{min-height:68px;gap:14px}
  .brand{font-size:14px;letter-spacing:.1em}
  .navlinks{display:none}
  .actions{margin-left:auto}
  .btn{padding:10px 13px}

  .hero{min-height:630px;background-position:59% center}
  .hero-content{padding:104px 0 64px;max-width:760px}
  .hero h1{font-size:clamp(66px,12vw,96px)}
  .hero .lede{font-size:clamp(20px,2.9vw,24px);max-width:720px}
  .pillrow{max-width:720px}
  .pill{font-size:12px;padding:7px 10px}
  .hero:after{display:none}

  .section{padding:54px 0}
  .section-head{align-items:start}
  .section h2{font-size:clamp(32px,4.7vw,42px)}
  .section-note{max-width:760px}

  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .card{min-height:350px;border-radius:16px}
  .card-art{height:190px}
  .card-art:after{display:none}
  .card-body{padding:19px 19px 20px}
  .card h3{font-size:23px}
  .card p{font-size:14px;line-height:1.48}
  .meta{font-size:11px}

  .split{grid-template-columns:1fr;gap:18px}
  .panel{padding:24px}
  .factgrid{grid-template-columns:repeat(2,1fr)}

  .pagehero{min-height:405px;background-position:center}
  .pagehero .wrap{padding-top:92px;padding-bottom:42px}
  .pagehero h1{font-size:clamp(54px,8.5vw,72px);max-width:820px}
  .pagehero p{font-size:18px;max-width:780px}

  .feature-band{grid-template-columns:1fr;gap:18px}
  .feature-image{min-height:350px}
  .feature-copy{padding:26px}
  .feature-copy h3{font-size:28px}

  .bookgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .bookgrid .book:nth-child(3){grid-column:1 / -1}
  .book{padding:22px}
  .book h3{font-size:24px}

  .covergrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .covergrid .covercard:nth-child(3){grid-column:1 / -1;min-height:380px}
  .covercard{min-height:420px}
  .coverbody{padding:22px}
  .coverbody h3{font-size:26px}

  .timeline{gap:10px}
  .time-row{grid-template-columns:125px 1fr;gap:13px;padding:13px}

  .footerrow{display:grid;grid-template-columns:1fr;gap:8px}
  .searchbox{padding:8vh 22px}
  .searchpanel{width:min(720px,100%)}

  .article{max-width:100%}
  .article h2{font-size:30px}
  .callout{margin:20px 0}
}

@media (min-width:901px) and (max-width:1100px){
  .hero{min-height:600px}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bookgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .bookgrid .book:nth-child(3){grid-column:auto}
  .covergrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .covergrid .covercard:nth-child(3){grid-column:auto;min-height:420px}
}