/* Sunshine mood: high-noon holiday light. Saturated azure, hot sun, mango warmth, glossy white. */
@property --gx{syntax:'<percentage>';inherits:true;initial-value:78%}
@property --gy{syntax:'<percentage>';inherits:true;initial-value:8%}
:root{
  --sky-deep:#0457a6; --sky:#0a6fc2; --azure:#1a8fe3; --cerulean:#2aa8f2; --turquoise:#12bfc4;
  --sun:#ffc81f; --sun-hot:#ffb000; --mango:#ff8a1f; --coral:#ff5a4e;
  --white:#ffffff; --cream:#fff8e7; --ink:#0b2a4a; --ink-2:#34536f; --kicker:#b4360f;
  --radius:22px; --spring:cubic-bezier(.34,1.56,.64,1); --ease:cubic-bezier(.2,.8,.2,1);
  --display:ui-rounded,"SF Pro Rounded","Arial Rounded MT Bold","Nunito","Varela Round",system-ui,sans-serif;
  --text:"Avenir Next","Avenir","SF Pro Text",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  font:15px/1.45 var(--text);color:var(--white);overflow:hidden;
  background:linear-gradient(172deg,var(--sky-deep) 0%,var(--sky) 55%,#0a73bf 100%);
  display:grid;grid-template-rows:auto 1fr auto;
  transition:--gx 1.1s var(--ease),--gy 1.1s var(--ease);
}
a{color:inherit}
.skip{position:absolute;left:12px;top:-60px;background:var(--sun);color:var(--ink);padding:10px 16px;border-radius:999px;font-weight:800;z-index:9;text-decoration:none}
.skip:focus{top:12px}

/* Ambient light: the sun glow drifts toward whatever card is selected. */
.light{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.sun{position:absolute;left:var(--gx);top:var(--gy);width:62vmax;height:62vmax;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(255,236,150,.32) 0%,rgba(255,200,31,.16) 22%,rgba(42,168,242,.16) 48%,transparent 68%)}
.haze{position:absolute;border-radius:50%;filter:blur(40px);opacity:.5;mix-blend-mode:screen}
.h1{width:48vmax;height:30vmax;left:-12vmax;bottom:-14vmax;background:radial-gradient(closest-side,rgba(18,191,196,.7),transparent);animation:drift 18s ease-in-out infinite alternate}
.h2{width:36vmax;height:22vmax;right:10vmax;bottom:-10vmax;background:radial-gradient(closest-side,rgba(255,138,31,.35),transparent);animation:drift 23s ease-in-out infinite alternate-reverse}
@keyframes drift{from{transform:translate(0,0) scale(1)}to{transform:translate(6vmax,-3vmax) scale(1.12)}}

/* Header */
.top,.foot{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px clamp(16px,2.6vw,40px)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:800 20px/1 var(--display);letter-spacing:-.01em}
.mark{width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff3b0,var(--sun) 45%,var(--sun-hot));box-shadow:0 0 0 4px rgba(255,200,31,.25),0 0 22px rgba(255,200,31,.8)}
.pill{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:999px;background:var(--sky-deep);border:1px solid rgba(255,255,255,.45);font-weight:700;font-size:14px;text-decoration:none;transition:background .2s,transform .3s var(--spring)}
.pill:hover{background:#034a8e;transform:translateY(-1px)}
:focus-visible{outline:3px solid var(--sun);outline-offset:3px;border-radius:12px}

/* Main stage: hero column + 4×2 cards */
.stage{position:relative;z-index:1;display:grid;grid-template-columns:minmax(290px,31%) 1fr;gap:clamp(18px,2.4vw,40px);padding:clamp(4px,1vh,14px) clamp(16px,2.6vw,40px) clamp(8px,1.4vh,16px);min-height:0}
.hero{display:flex;flex-direction:column;min-height:0;padding-top:clamp(4px,2vh,28px)}
.eyebrow{margin:0 0 clamp(8px,1.6vh,16px);font:800 12px/1 var(--text);letter-spacing:.16em;text-transform:uppercase;color:var(--cream)}
h1{margin:0;font:900 min(4.3vw,8.2vh)/.96 var(--display);letter-spacing:-.035em;text-wrap:balance}
h1 span{display:block}
h1 .glow{color:var(--sun);text-shadow:0 0 28px rgba(255,200,31,.45)}
.thesis{margin:clamp(10px,2.2vh,22px) 0 6px;font:600 clamp(15px,2.2vh,19px)/1.35 var(--text);max-width:30ch}
.sub{margin:0;font-size:14px;color:var(--cream);max-width:36ch}
.routes{margin-top:auto;padding:clamp(12px,1.8vh,18px) 18px;border-radius:var(--radius);background:linear-gradient(160deg,rgba(4,70,140,.55),rgba(4,70,140,.3));border:1px solid rgba(255,255,255,.35);box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
.routes h2{margin:0 0 8px;font:800 17px/1.2 var(--display)}
.route{display:flex;align-items:center;flex-wrap:wrap;gap:4px 6px;margin:0 0 6px;font-size:13px}
.route b{display:inline-flex;align-items:center;gap:6px;font:800 11px/1 var(--text);letter-spacing:.12em;text-transform:uppercase;color:var(--white);width:76px}
.route b::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--sun);box-shadow:0 0 8px var(--sun)}
.route i{font-style:normal;opacity:.75}
.routes-cta{display:inline-flex;margin-top:6px;font-weight:800;font-size:14px;text-decoration:none;border-bottom:2px solid var(--sun)}
.keys{margin:clamp(8px,1.6vh,14px) 0 0;font-size:12.5px;color:var(--cream)}
kbd{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;margin:0 1px;border-radius:7px;background:rgba(255,255,255,.95);color:var(--ink);font:800 11px/1 var(--display);box-shadow:0 2px 0 rgba(4,60,120,.45)}
.dot{opacity:.6;margin:0 4px}

.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:clamp(12px,1.4vw,20px);min-height:0}
.card{position:relative;display:flex;flex-direction:column;min-height:0;border-radius:var(--radius);background:var(--white);color:var(--ink);text-decoration:none;overflow:hidden;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 10px 24px -12px rgba(2,40,90,.55);
  transition:transform .45s var(--spring),box-shadow .35s var(--ease);opacity:0;animation:rise .7s var(--spring) forwards;animation-delay:calc(var(--i)*55ms + 120ms)}
@keyframes rise{from{opacity:0;translate:0 22px;scale:.97}to{opacity:1;translate:0 0;scale:1}}
.ready .card{animation:none;opacity:1}
.card:hover,.card:focus-visible{transform:translateY(-7px) scale(1.015);box-shadow:0 0 0 3px var(--sun),0 0 0 7px rgba(255,200,31,.3),0 24px 40px -14px rgba(2,40,90,.7);outline:none}
.ready .card.bump{animation:bump .35s var(--spring)}
@keyframes bump{50%{translate:calc(var(--bx,0)*6px) calc(var(--by,0)*6px)}}
.preview{position:relative;flex:1 1 auto;min-height:0;overflow:hidden;background:var(--bg)}
.preview::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 80% at var(--mx,30%) -10%,rgba(255,255,255,.55),transparent 55%);opacity:.7;transition:opacity .3s}
.card:hover .preview::after,.card:focus-visible .preview::after{opacity:1}
.preview svg{position:absolute;inset:0;width:100%;height:100%}
.chips{position:absolute;inset:auto 10px 10px;display:flex;flex-wrap:wrap;gap:6px;z-index:1}
.chip{padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.94);color:var(--ink);font:800 11.5px/1 var(--display);box-shadow:0 3px 8px -3px rgba(2,40,90,.45);transition:transform .5s var(--spring)}
.card:hover .chip,.card:focus-visible .chip{transform:translateY(-3px)}
.card:hover .chip:nth-child(2),.card:focus-visible .chip:nth-child(2){transition-delay:.05s}
.num{position:absolute;top:10px;left:10px;z-index:1;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.95);color:var(--ink);font:900 12px/1 var(--display);box-shadow:0 2px 0 rgba(2,40,90,.3)}
.new{position:absolute;top:12px;right:10px;z-index:1;padding:5px 9px;border-radius:999px;color:var(--white);font:900 10.5px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;background:#d93a2f}
.copy{flex:0 0 auto;padding:clamp(10px,1.5vh,16px) 16px clamp(10px,1.4vh,14px)}
.kicker{margin:0 0 5px;min-height:2.5em;font:800 10px/1.25 var(--text);letter-spacing:.08em;text-transform:uppercase;color:var(--kicker);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card h2{margin:0 0 5px;font:800 clamp(15px,2.2vh,19px)/1.12 var(--display);letter-spacing:-.015em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card p{margin:0;font-size:12.5px;line-height:1.4;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.enter{display:flex;justify-content:space-between;align-items:center;margin-top:8px;font:800 12.5px/1 var(--display);color:var(--ink)}
.enter .arrow{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--cream);transition:transform .45s var(--spring),background .25s}
.card:hover .arrow,.card:focus-visible .arrow{transform:translateX(3px) rotate(-45deg);background:var(--sun)}

/* Motif animation on select */
.m-draw{stroke-dasharray:420;stroke-dashoffset:0}
.card:hover .m-draw,.card:focus-visible .m-draw{animation:draw 1.1s var(--ease)}
@keyframes draw{from{stroke-dashoffset:420}to{stroke-dashoffset:0}}
.m-bob{transform-box:fill-box;transform-origin:center}
.card:hover .m-bob,.card:focus-visible .m-bob{animation:bob 1.6s var(--spring) infinite alternate}
@keyframes bob{to{transform:translateY(-6px)}}
.m-spin{transform-box:fill-box;transform-origin:center}
.card:hover .m-spin,.card:focus-visible .m-spin{animation:spin 6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.m-slide{transform-box:fill-box}
.card:hover .m-slide,.card:focus-visible .m-slide{animation:arrive 1.6s var(--ease) infinite}
@keyframes arrive{0%{transform:translateX(-110px)}55%{transform:translateX(12px)}75%{transform:translateX(-4px)}100%{transform:translateX(0)}}

.foot{font-size:12px;color:var(--cream);padding-top:8px;padding-bottom:12px}
.foot>span{max-width:70ch}
.siblings{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center}
.siblings a{text-decoration:none;font-weight:700;opacity:.9;border-bottom:1px solid transparent}
.siblings a:hover{border-bottom-color:currentColor}
.siblings a[aria-current]{color:var(--ink);background:var(--sun);padding:3px 9px;border-radius:999px;opacity:1}

@media (max-height:780px){.card p{-webkit-line-clamp:2}.sub{display:none}}
@media (max-width:1180px){.stage{grid-template-columns:minmax(250px,28%) 1fr}.card p{-webkit-line-clamp:2}.kicker{font-size:9.5px;letter-spacing:.05em}}
@media (max-width:900px){
  body{overflow:auto;height:auto;min-height:100%}
  .stage{grid-template-columns:1fr}
  h1{font-size:clamp(40px,10vw,64px)}
  .routes{margin-top:18px}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none}
  .card{min-height:300px}
  .foot{flex-direction:column;align-items:flex-start}
}
@media (max-width:520px){.cards{grid-template-columns:1fr}.card{min-height:280px}.keys{display:none}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .card{opacity:1}
}