/* ABC OF TECHNOLOGY V11 — BIG BRAND / ENTERTAINMENT LAYOUT
   Original visual system using ABC of Technology owned characters and art.
*/

:root{
  --v11-navy:#061a42;
  --v11-blue:#0877ff;
  --v11-sky:#23c6ff;
  --v11-yellow:#ffd52e;
  --v11-orange:#ff6a24;
  --v11-red:#ff293a;
  --v11-green:#28c96f;
  --v11-purple:#7548ff;
}

/* --- Navigation: big-brand desktop first --- */
.v11-nav{
  background:rgba(255,255,255,.985)!important;
  box-shadow:0 6px 26px rgba(6,26,66,.09);
}
.v11-nav .navrow{min-height:88px;gap:20px}
.v11-brand{gap:11px!important;min-width:245px}
.v11-brand img{
  width:70px!important;height:70px!important;object-fit:contain!important;
  filter:drop-shadow(0 5px 12px rgba(3,38,91,.10));
}
.v11-brand span{min-width:0!important}
.v11-brand span b{font-size:1.04rem!important;letter-spacing:-.02em}
.v11-brand span small{font-size:.70rem!important;letter-spacing:.02em;color:#61738d}
.v11-nav .navlinks{gap:15px!important;justify-content:flex-end!important}
.v11-nav .navlinks>a:not(.btn){
  font-size:.84rem!important;font-weight:950!important;color:#142846!important;
  padding:13px 1px!important;border-bottom:3px solid transparent!important;
}
.v11-nav .navlinks>a:not(.btn):hover{color:#0877ff!important;border-color:#0877ff!important}
.v11-nav .nav-updates{
  color:#0757ba!important;background:#edf6ff!important;border:1px solid #cfe5ff!important;
  border-radius:999px!important;padding:10px 12px!important;
}
.v11-nav .nav-subscribe{
  color:#fff!important;background:linear-gradient(180deg,#ff3645,#ed1729)!important;
  border-radius:999px!important;padding:11px 14px!important;border:0!important;
  box-shadow:0 7px 0 #b91322,0 14px 24px rgba(214,27,43,.17)!important;
}
.v11-nav .nav-subscribe:hover{transform:translateY(-2px);box-shadow:0 5px 0 #b91322,0 13px 24px rgba(214,27,43,.20)!important}

/* --- Full-width entertainment billboard --- */
.brand-billboard{
  position:relative;background:#03112d;overflow:hidden;
  border-bottom:9px solid #1fc8ff;
}
.brand-billboard-media{
  width:100%;background:#03112d;position:relative;
}
.brand-billboard-media:after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:18%;
  background:linear-gradient(180deg,transparent,rgba(2,10,30,.18));
  pointer-events:none;
}
.brand-billboard-media img{
  width:100%;height:auto;display:block;
  max-height:min(760px,72vh);object-fit:cover;object-position:center;
}
.brand-billboard-actions{
  margin-top:-2px;padding:18px 0 22px;
  display:grid;grid-template-columns:repeat(5,1fr);gap:12px;
}
.brand-action{
  min-height:86px;border-radius:22px;padding:14px 16px;
  display:grid;grid-template-columns:42px 1fr;grid-template-rows:auto auto;
  align-items:center;gap:1px 10px;color:#fff!important;
  border:2px solid rgba(255,255,255,.30);box-shadow:0 14px 30px rgba(0,0,0,.22);
  transition:.18s ease;
}
.brand-action:hover{transform:translateY(-4px) scale(1.01);filter:saturate(1.08)}
.brand-action>span{grid-row:1/3;font-size:1.55rem}
.brand-action b{font-size:1rem;line-height:1.1}
.brand-action small{font-size:.72rem;opacity:.90;font-weight:750}
.action-start{background:linear-gradient(135deg,#ff7b16,#ff3b25)}
.action-watch{background:linear-gradient(135deg,#126dff,#26c8ff)}
.action-play{background:linear-gradient(135deg,#7044ff,#a14fff)}
.action-read{background:linear-gradient(135deg,#10a957,#39d578)}
.action-print{background:linear-gradient(135deg,#ffb311,#ffd52e);color:#142846!important}

/* --- Story hero: bigger art, cleaner premium visual balance --- */
.v11-story-hero{padding:5.2rem 0 3.2rem!important}
.v11-story-hero .adventure-hero-grid{grid-template-columns:.86fr 1.14fr;gap:3.2rem}
.v11-story-hero .adventure-hero-copy{
  border-radius:38px!important;padding:clamp(28px,3.6vw,52px)!important;
  box-shadow:0 24px 70px rgba(17,65,118,.13)!important;border:1px solid #e6eef9;
}
.v11-story-hero .adventure-hero-copy h1{
  font-size:clamp(3.8rem,6.4vw,7.3rem)!important;letter-spacing:-.06em!important;
}
.v11-story-hero .adventure-hero-copy p{font-size:1.06rem;max-width:600px;color:#425b79}
.v11-story-hero .adventure-hero-art{min-height:650px}
.v11-story-hero .hero-bus{width:min(820px,66vw)!important;right:-9vw!important}
.v11-story-hero .hero-book-float{transform:rotate(4deg) scale(1.12)}
.v11-story-hero .hero-book-float img{width:145px!important}

/* --- Shared section title --- */
.v11-section-title span{
  display:inline-block;font-size:.76rem;letter-spacing:.15em;font-weight:1000;color:#086eea;
}
.v11-section-title h2{
  margin:.4rem 0 .7rem!important;font-size:clamp(2.8rem,5vw,5rem)!important;
  line-height:.97!important;letter-spacing:-.05em!important;color:#0b2b5f;
}
.v11-section-title p{font-size:1.05rem;max-width:760px;color:#5c708b}

/* --- Explore world: large visual cards --- */
.v11-world{
  padding:86px 0 96px;background:
   radial-gradient(circle at 5% 10%,rgba(35,198,255,.18),transparent 32%),
   radial-gradient(circle at 95% 90%,rgba(255,213,46,.22),transparent 32%),
   #fff;
}
.v11-world-grid{
  display:grid;grid-template-columns:1.2fr .8fr .8fr;gap:18px;margin-top:34px;
}
.v11-world-card{
  position:relative;min-height:500px;border-radius:34px;overflow:hidden;background:#0a2252;
  box-shadow:0 25px 60px rgba(6,26,66,.16);border:4px solid #fff;
}
.v11-world-card img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .35s ease;filter:saturate(1.04);
}
.v11-world-card:hover img{transform:scale(1.035)}
.v11-world-card:after{
  content:"";position:absolute;inset:35% 0 0;background:linear-gradient(180deg,transparent,rgba(2,10,30,.94));
}
.v11-world-card>div{
  position:absolute;z-index:2;left:25px;right:25px;bottom:24px;color:#fff;
}
.v11-world-card span{font-size:.72rem;letter-spacing:.14em;font-weight:1000;color:#79e7ff}
.v11-world-card h3{font-size:clamp(1.65rem,2.6vw,2.8rem);line-height:1.02;margin:.35rem 0 .7rem}
.v11-world-card b{display:inline-flex;background:#fff;color:#0a2b5e;padding:9px 13px;border-radius:999px;font-size:.83rem}
.world-book img{object-fit:contain;background:linear-gradient(145deg,#fff4bd,#cbefff);padding:44px}
.world-free img{object-fit:contain;background:#eefaff;padding:42px}
.world-book:after,.world-free:after{inset:40% 0 0}

/* --- Character franchise row: bigger art --- */
.character-road{padding:90px 0!important;background:linear-gradient(180deg,#fff9d7,#fff 88%)!important}
.character-road-grid{gap:20px!important;margin-top:36px}
.character-road-grid article{
  min-height:560px!important;padding:22px 20px 26px!important;border-radius:34px!important;
  display:flex!important;flex-direction:column!important;justify-content:flex-end!important;
  background:#fff!important;box-shadow:0 22px 55px rgba(22,66,113,.12)!important;
  border:4px solid #fff!important;
}
.character-road-grid article:nth-child(1){outline:3px solid #88d7ff}
.character-road-grid article:nth-child(2){outline:3px solid #ffd66b}
.character-road-grid article:nth-child(3){outline:3px solid #83e59b}
.character-road-grid article:nth-child(4){outline:3px solid #d1a4ff}
.character-road-grid article img{
  width:100%!important;height:360px!important;object-fit:contain!important;margin:auto auto 16px!important;
  filter:drop-shadow(0 18px 15px rgba(17,55,95,.16));
}
.character-road-grid article h3{font-size:1.55rem!important;color:#082b60!important;margin:.35rem 0!important}
.character-road-grid article p{font-size:.96rem!important;color:#5a708a!important;margin:0!important}

/* --- Shop = large retail/editorial presentation --- */
.shop11{padding:100px 0!important;background:linear-gradient(180deg,#fff,#fff8dc)!important}
.shop11-grid{grid-template-columns:.92fr 1.08fr!important;gap:46px!important;align-items:center}
.book-display{min-height:720px!important;border-radius:42px!important;background:linear-gradient(145deg,#e3f4ff,#fff1b7)!important}
.book-display img{width:min(510px,86%)!important;max-height:650px!important;object-fit:contain!important;filter:drop-shadow(0 30px 26px rgba(14,49,86,.22))}
.shop11-options{gap:15px!important}
.shop-option{min-height:132px!important;padding:20px!important;border-radius:26px!important}
.shop-option>span{font-size:2rem!important}
.shop-option h3{font-size:1.35rem!important;margin:0 0 3px!important}

/* --- Featured arena stays huge like a children's entertainment billboard --- */
.arena11{padding:96px 0!important}
.arena11-stage{border-radius:38px!important;overflow:hidden!important;box-shadow:0 30px 70px rgba(8,15,67,.30)!important}
.arena11-stage img{width:100%!important;min-height:560px!important;object-fit:cover!important}

/* --- Videos: bigger, more cinematic --- */
.videos11{padding:100px 0!important;background:linear-gradient(180deg,#eafaff,#fff)!important}
.media-grid{grid-template-columns:1fr 1fr!important;gap:24px!important}
.video-card{border-radius:32px!important;overflow:hidden!important;box-shadow:0 24px 55px rgba(12,57,105,.14)!important}
.video-box{aspect-ratio:16/9!important}
.video-copy{padding:24px!important}
.video-copy h3{font-size:1.7rem!important}

/* --- Music: larger art + platform cards --- */
.music11{padding:100px 0!important}
.music11-grid{grid-template-columns:1.05fr .95fr!important;gap:52px!important}
.music11-art img{width:min(620px,100%)!important;filter:drop-shadow(0 35px 28px rgba(0,0,0,.32))}
.music11 h2{font-size:clamp(3.5rem,5vw,5.8rem)!important;line-height:.96!important}
.platform{min-height:96px!important}

/* --- Authors: big editorial portraits --- */
.authors11{padding:100px 0!important}
.authors11-grid{gap:24px!important}
.creator-card{border-radius:34px!important;overflow:hidden!important;box-shadow:0 24px 56px rgba(21,57,98,.13)!important}
.creator-photo img{height:460px!important;width:100%!important;object-fit:cover!important}

/* --- Resources bigger and easier to browse --- */
.coloring11{padding:100px 0!important}
.coloring-grid11{grid-template-columns:repeat(4,1fr)!important;gap:18px!important}
.color-card{border-radius:24px!important;overflow:hidden}
.color-preview-wrap{min-height:320px!important;background:#fff}
.color-preview-wrap img{width:100%!important;height:300px!important;object-fit:contain!important;padding:10px}

/* --- Email = premium adult conversion panel --- */
.grownup-updates{padding:100px 0!important}
.updates-card{border-radius:38px!important;box-shadow:0 35px 80px rgba(0,0,0,.32)!important}
.updates-copy h2{font-size:clamp(3.4rem,5vw,5.9rem)!important}

/* --- Desktop nav breakpoint moved lower so desktop feels like a real media brand --- */
@media (min-width:981px){
  .v11-nav .navlinks{display:flex!important}
  .v11-nav .mobile-toggle{display:none!important}
}
@media (max-width:1180px) and (min-width:981px){
  .v11-nav .navrow{gap:12px}
  .v11-brand{min-width:205px}
  .v11-brand img{width:62px!important;height:62px!important}
  .v11-brand span b{font-size:.92rem!important}
  .v11-brand span small{font-size:.62rem!important}
  .v11-nav .navlinks{gap:10px!important}
  .v11-nav .navlinks>a:not(.btn){font-size:.76rem!important}
  .v11-nav .nav-updates,.v11-nav .nav-subscribe{padding:9px 10px!important;font-size:.73rem!important}
}

/* --- Tablet / phone --- */
@media(max-width:980px){
  .v11-nav .navlinks{display:none!important}
  .v11-nav .mobile-toggle{display:grid!important}
  .v11-nav .navlinks.open{
    display:flex!important;position:absolute!important;top:calc(100% + 8px)!important;right:0!important;left:auto!important;
    width:min(440px,94vw)!important;max-height:76vh;overflow:auto;flex-direction:column!important;align-items:stretch!important;
    gap:5px!important;background:#fff!important;border:1px solid #dce8f6;border-radius:22px;padding:14px!important;
    box-shadow:0 28px 70px rgba(6,26,66,.24)!important;
  }
  .v11-nav .navlinks.open>a{width:100%;padding:12px 14px!important;border-radius:12px!important}
  .brand-billboard-media img{max-height:none;aspect-ratio:16/9;object-fit:cover}
  .brand-billboard-actions{grid-template-columns:repeat(3,1fr)}
  .v11-world-grid{grid-template-columns:1fr 1fr}
  .v11-world-card:first-child{grid-column:1/-1}
  .v11-story-hero .adventure-hero-grid,.shop11-grid,.music11-grid{grid-template-columns:1fr!important}
  .v11-story-hero .adventure-hero-art{min-height:540px}
  .book-display{min-height:620px!important}
  .character-road-grid{grid-template-columns:repeat(2,1fr)!important}
  .coloring-grid11{grid-template-columns:repeat(3,1fr)!important}
}
@media(max-width:700px){
  .v11-brand{min-width:0}
  .v11-brand img{width:58px!important;height:58px!important}
  .v11-brand span b{font-size:.88rem!important}
  .v11-brand span small{font-size:.62rem!important}
  .brand-billboard-media img{
    aspect-ratio:4/3;object-fit:cover;object-position:center;
  }
  .brand-billboard-actions{grid-template-columns:1fr 1fr;padding:12px 0 16px}
  .brand-action{min-height:76px}
  .brand-action:last-child{grid-column:1/-1}
  .v11-story-hero{padding-top:3.3rem!important}
  .v11-story-hero .adventure-hero-copy h1{font-size:clamp(3.2rem,15vw,5.2rem)!important}
  .v11-story-hero .adventure-hero-art{min-height:430px}
  .v11-world{padding:68px 0}
  .v11-world-grid{grid-template-columns:1fr}
  .v11-world-card:first-child{grid-column:auto}
  .v11-world-card{min-height:420px}
  .character-road-grid{grid-template-columns:1fr!important}
  .character-road-grid article{min-height:500px!important}
  .character-road-grid article img{height:320px!important}
  .book-display{min-height:520px!important}
  .arena11-stage img{min-height:0!important}
  .media-grid{grid-template-columns:1fr!important}
  .coloring-grid11{grid-template-columns:repeat(2,1fr)!important}
  .color-preview-wrap{min-height:240px!important}
  .color-preview-wrap img{height:220px!important}
}
@media(max-width:430px){
  .brand-billboard-actions{grid-template-columns:1fr}
  .brand-action:last-child{grid-column:auto}
  .v11-brand span small{display:none}
  .v11-section-title h2{font-size:2.75rem!important}
  .coloring-grid11{grid-template-columns:1fr!important}
}