/* MOOve hub: Pixar storybook look. Harbour palette shared with the book.
   Moo art is only ever the original hero / cut-out images: never redrawn, flipped or recoloured. */
:root{
  --navy:#0b1f3a; --deep:#134a63; --sea:#1d5c7a; --foam:#e8f4f6; --sand:#f6ecd6; --cream:#fffaf0; --paper:#fff8ea; --ink:#14233a;
  --muted:#4a5363; --coral:#e8735a; --coral-deep:#b33f25; --coral-ink:#7a2614; --sun:#ffd23f; --focus:#ff9e00;
  --tap:48px; --radius:26px;
  --shadow-soft:0 14px 30px rgba(88,58,20,.16),0 3px 8px rgba(88,58,20,.10);
  --shadow-lift:0 20px 40px rgba(88,58,20,.20),0 5px 12px rgba(88,58,20,.12);
  --round:ui-rounded,"SF Pro Rounded","Nunito","Varela Round","Arial Rounded MT Bold",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;color:var(--ink);line-height:1.55;overflow-x:clip;
  background:
    radial-gradient(900px 420px at 10% 105%, rgba(255,214,160,.55) 0, rgba(255,214,160,0) 70%),
    linear-gradient(180deg, #cfe9f2 0, #f3ead6 38%, var(--sand) 72%, #ecd9b4 100%);
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:8px;top:-80px;z-index:20;background:var(--sun);color:var(--navy);padding:12px 16px;border-radius:12px;font-weight:700;min-height:var(--tap)}
.skip:focus{top:8px}
:focus-visible{outline:3px solid var(--navy);outline-offset:3px;box-shadow:0 0 0 3px var(--focus);border-radius:12px}
/* M1: two-tone focus ring: orange beside the control, navy outside, so it shows on cream cards and the teal header alike */
.top :focus-visible{outline-color:#fff}
main:focus{outline:none}
a{color:var(--sea)}

/* Top bar: deep harbour teal with a soft wave edge */
.top{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:calc(10px + env(safe-area-inset-top,0px)) 16px 10px;color:#fff;
  background:linear-gradient(180deg,#1a5a78 0,var(--deep) 100%);box-shadow:0 6px 18px rgba(11,31,58,.25)}
.brand{display:inline-flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-family:var(--round);font-weight:800;font-size:1.2rem;min-height:var(--tap);text-shadow:0 2px 0 rgba(0,0,0,.18)}
.brand img{border-radius:12px;box-shadow:0 0 0 2px rgba(255,255,255,.85),0 3px 8px rgba(0,0,0,.25)}
.top-link{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 18px;border-radius:999px;background:linear-gradient(180deg,#ffe066,var(--sun));color:var(--navy);font-weight:800;text-decoration:none;
  box-shadow:0 3px 0 #c99a0c,0 6px 14px rgba(0,0,0,.18)}
.top-link:hover{filter:brightness(1.04)}

main{max-width:1080px;margin:0 auto;padding:0 16px 8px}

/* Hero: Pixar harbour scene, full-bleed, with a cream storybook panel and framed Moo */
.hero{position:relative;isolation:isolate;display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:center;padding:48px 0 64px;margin-bottom:8px}
.hero-scene{position:absolute;z-index:-1;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);
  background:url("/assets/hub-hero-bg.webp") center 62% / cover no-repeat, #f5d7a6}
.hero-scene::after{content:"";position:absolute;inset:auto 0 0 0;height:90px;
  background:linear-gradient(180deg,rgba(243,234,214,0) 0,#f3ead6 100%)}
.hero-text{background:rgba(255,250,240,.93);border-radius:30px;padding:26px 28px 28px;
  box-shadow:var(--shadow-lift);border:2px solid rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.eyebrow{display:inline-block;margin:0 0 10px;padding:4px 12px;border-radius:999px;background:#d9eef4;color:#164b63;font-weight:800;letter-spacing:.02em;font-size:.95rem}
.hero h1{margin:0 0 12px;font-family:var(--round);font-size:clamp(2.1rem,5.4vw,3.4rem);line-height:1.06;color:var(--navy);letter-spacing:-.01em;font-weight:900}
.hero h1 .moo{color:var(--coral-ink);background:linear-gradient(transparent 60%, #ffd3a1 60%);padding:0 .08em;border-radius:6px}
.lead{margin:0 0 22px;font-size:1.1rem;max-width:34em;color:var(--ink)}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:var(--tap);padding:0 24px;border-radius:999px;font-family:var(--round);font-weight:800;font-size:1.05rem;text-decoration:none;border:0;transition:transform .12s ease, box-shadow .12s ease, filter .12s ease}
.btn-primary{background:linear-gradient(180deg,#c14a2a 0,var(--coral-deep) 100%);color:#fff;box-shadow:0 4px 0 #7f2a16,0 10px 20px rgba(179,63,37,.30)}
.btn-primary:hover{filter:brightness(1.06);transform:translateY(-1px)}
.btn-primary:active{transform:translateY(3px);box-shadow:0 1px 0 #7f2a16,0 4px 10px rgba(179,63,37,.25)}
.btn-ghost{background:#fff;color:#164b63;box-shadow:inset 0 0 0 3px #1d5c7a,0 4px 0 #b9d6df}
.btn-ghost:hover{background:#f0f9fb}
.btn-ghost:active{transform:translateY(3px);box-shadow:inset 0 0 0 3px #1d5c7a,0 1px 0 #b9d6df}
.hero-art{margin:0;justify-self:center;width:min(390px,78vw);aspect-ratio:1;border-radius:36px;overflow:hidden;
  border:8px solid #fffaf0;box-shadow:0 26px 50px rgba(30,40,60,.35),0 4px 10px rgba(30,40,60,.2);transform:rotate(2deg)}
.hero-art img{display:block;width:100%;height:100%;object-fit:cover}

/* Cards: cream storybook pages with Pixar thumbnails */
.card-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.card-grid>li{display:flex}
.card{flex:1;display:flex;align-items:center;gap:16px;padding:14px 16px 14px 14px;min-height:124px;border-radius:var(--radius);
  background:linear-gradient(180deg,#fffdf6 0,var(--paper) 100%);color:var(--ink);text-decoration:none;
  border:2px solid #f1e2c4;box-shadow:var(--shadow-soft);transition:transform .15s ease, box-shadow .15s ease}
a.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}
a.card:active{transform:translateY(1px);box-shadow:0 6px 14px rgba(88,58,20,.16)}
.card-art{position:relative;flex:none;width:132px;height:99px;border-radius:20px;overflow:hidden;background:var(--foam);
  box-shadow:0 0 0 4px #fff,0 6px 14px rgba(60,40,10,.22)}
.card-art-photo img{width:100%;height:100%;object-fit:cover;display:block}
.card-walk .card-art img{object-position:center 58%}
.card-body{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}
.card-title{font-family:var(--round);font-size:1.25rem;font-weight:800;color:var(--navy);display:flex;flex-wrap:wrap;align-items:center;gap:8px;line-height:1.2}
.card-text{color:var(--muted);font-size:.98rem}
.card-go{flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-size:1.35rem;font-weight:900;
  background:linear-gradient(180deg,#ffe066,var(--sun));color:var(--navy);box-shadow:0 3px 0 #c99a0c}
.card-walk .card-go{background:linear-gradient(180deg,#f2876c,var(--coral));color:var(--navy);box-shadow:0 3px 0 #b5513a}
.card-videos .card-go{background:linear-gradient(180deg,#f2876c,var(--coral));color:var(--navy);box-shadow:0 3px 0 #b5513a}
.card-about .card-go{background:linear-gradient(180deg,#7cc3d6,#4fa3bd);color:var(--navy);box-shadow:0 3px 0 #2f7590}

.card-soon{background:linear-gradient(180deg,#fbf6ea,#f3ecdc);border:2px dashed #a99e86;box-shadow:0 6px 14px rgba(88,58,20,.08);color:var(--muted);cursor:default}
.card-soon .card-title{color:#3a4250}
.card-soon .card-art{box-shadow:0 0 0 4px #fbf6ea,0 4px 10px rgba(60,40,10,.12)}
.card-soon .card-art img{filter:saturate(.7) brightness(1.04);opacity:.9}
.badge{font-family:var(--round);font-size:.76rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;padding:3px 10px;border-radius:999px;background:#164b63;color:#fff}

details.card{display:block;padding:0}
details.card>summary{list-style:none;display:flex;align-items:center;gap:16px;padding:14px 16px 14px 14px;min-height:124px;cursor:pointer;border-radius:calc(var(--radius) - 2px)}
details.card>summary::-webkit-details-marker{display:none}
.card-about .card-moo{position:absolute;right:6px;bottom:4px;width:40px;height:auto;filter:drop-shadow(0 3px 4px rgba(0,0,0,.35))}
.card-toggle{transition:transform .15s ease}
details[open] .card-toggle{transform:rotate(45deg)}
.about{padding:0 18px 16px;border-top:2px dashed #e3d2ae;margin:0 16px}
.about p{margin:12px 0 0}
.about a{font-weight:700;display:inline-block;padding:10px 0;color:#164b63}

.foot{max-width:1040px;margin:28px auto 0;padding:16px 16px calc(24px + env(safe-area-inset-bottom,0px));color:var(--ink);text-align:center}
.foot p{margin:4px 0}
.foot .small{font-size:.88rem;color:var(--muted)}
.foot a{display:inline-block;padding:12px 2px;color:#164b63}
.brand-word{font-family:var(--round);font-weight:800}

@media (max-width:720px){
  .hero{grid-template-columns:1fr;gap:18px;padding:22px 0 40px;text-align:left}
  .hero-scene{background-position:62% 60%}
  .hero-art{order:-1;width:min(260px,66vw);border-width:6px}
  .hero-text{padding:20px 18px 22px;border-radius:24px}
  .card-grid{grid-template-columns:1fr;gap:16px}
  .card,details.card>summary{gap:12px;min-height:112px}
  .card-art{width:100px;height:76px;border-radius:16px}
  .card-title{font-size:1.15rem}
  .top-link{padding:0 14px;font-size:.95rem}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}.hero-art{transform:none}a.card:hover,.btn:hover{transform:none}}

/* /videos page */
.vid-page{max-width:1100px;margin:0 auto;padding:28px 18px 40px}
.vid-head h1{font-size:clamp(2rem,5vw,3rem);margin:.2em 0;color:var(--navy)}
.vid-head .lead{max-width:62ch;font-size:1.1rem;color:var(--ink)}
.vid-head .tag{font-weight:800;color:var(--deep)}
.vid-grid{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.vid-card{background:var(--cream);border-radius:22px;padding:14px;box-shadow:0 8px 20px rgba(11,31,58,.14)}
.vid-card h2{font-size:1.2rem;margin:4px 4px 10px;color:var(--navy)}
.vid-frame{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#0b1f3a}
.vid-frame.short{aspect-ratio:9/16;max-height:70vh;margin:0 auto}
.vid-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vid-card p{margin:10px 4px 2px}

/* m3: bigger targets for the small text links on /videos */
.vid-card p a{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;font-weight:700}
/* S5: transcripts under each video */
.transcript{margin:10px 4px 2px;border-top:2px dashed #e3d2ae;padding-top:6px}
.transcript>summary{display:flex;align-items:center;min-height:44px;cursor:pointer;font-weight:800;color:#164b63}
.transcript dl{margin:6px 0 0}
.transcript dt{font-weight:800;margin-top:8px}
.transcript dd{margin:0}
.transcript .scene{font-style:italic;color:var(--muted);margin:10px 0 0}
.vid-note{max-width:62ch;background:var(--cream);border-radius:16px;padding:12px 16px;box-shadow:0 4px 12px rgba(11,31,58,.08)}
/* Accessibility statement and 404 pages */
.doc-page{max-width:760px;margin:0 auto;padding:28px 18px 40px}
.doc-page h1{font-family:var(--round);font-size:clamp(1.9rem,5vw,2.6rem);margin:.2em 0 .4em;color:var(--navy)}
.doc-page h2{font-family:var(--round);font-size:1.3rem;margin:1.6em 0 .4em;color:var(--navy)}
.doc-page li{margin:.35em 0}
.doc-page .panel{background:var(--cream);border-radius:22px;padding:18px 20px;box-shadow:0 8px 20px rgba(11,31,58,.10)}
.doc-links{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:12px}
.doc-links a{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 18px;border-radius:999px;background:#fff;color:#164b63;font-weight:800;text-decoration:none;box-shadow:inset 0 0 0 3px #1d5c7a}
.foot .a11y a{font-weight:700}
.more{max-width:1100px;margin:8px auto 32px;padding:0 20px}
.more h2{font-size:1.25rem;margin:0 0 8px}