/* Papercraft mood: warm, flat, bright; crisp white keylines and solid offset shadows; springy motion. */
:root{
  --cream:#fff8e6; --butter:#fdeeb8; --ground:#fbf0d4;
  --ink:#2b2230; --ink-2:#5a4d52;
  --tomato:#e04a3a; --tomato-ink:#b8321f;
  --sun:#f6bf2c; --grass:#46a652; --grass-ink:#2a7a36;
  --sky:#4a95dd; --sky-ink:#2a6db3; --plum:#7b3f90;
  --line:#fff; --shadow:rgba(43,34,48,.16); --shadow-strong:rgba(43,34,48,.24);
  --spring:cubic-bezier(.34,1.56,.64,1); --ease:cubic-bezier(.2,.8,.2,1);
  --round:ui-rounded,"SF Pro Rounded","Arial Rounded MT Bold","Nunito","Varela Round",system-ui,sans-serif;
  --sans:"Avenir Next","Avenir","Segoe UI","Gill Sans","Helvetica Neue",system-ui,sans-serif;
  --gap:clamp(12px,1.6vw,22px);
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--ground);color:var(--ink);font:15px/1.45 var(--sans);display:grid;grid-template-rows:auto 1fr auto;overflow:hidden;
  background-image:radial-gradient(1200px 500px at 85% -10%,#fff5d8 0,transparent 60%),radial-gradient(900px 500px at -10% 110%,#fde6b0 0,transparent 55%)}
a{color:inherit}
.skip{position:absolute;left:12px;top:-60px;background:var(--ink);color:#fff;padding:8px 12px;border-radius:10px;z-index:9}
.skip:focus{top:12px}
:focus-visible{outline:3px solid var(--sky-ink);outline-offset:3px;border-radius:10px}

/* Header */
.top{display:flex;justify-content:space-between;align-items:center;padding:clamp(10px,1.6vh,18px) clamp(16px,3vw,44px)}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font:800 21px/1 var(--round);letter-spacing:-.01em}
.brand-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:var(--tomato);color:#fff;font-size:20px;
  box-shadow:0 0 0 3px var(--line),4px 5px 0 3px var(--shadow);transform:rotate(-6deg);transition:transform .5s var(--spring)}
.brand:hover .brand-mark,.brand:focus-visible .brand-mark{transform:rotate(174deg) scale(1.05)}
.pill{display:inline-block;text-decoration:none;font:700 14px/1 var(--round);padding:10px 16px;border-radius:999px;background:#fff;
  box-shadow:3px 4px 0 var(--shadow);transition:transform .35s var(--spring),box-shadow .35s var(--spring)}
.pill:hover,.pill:focus-visible{transform:translate(-1px,-2px) rotate(-2deg);box-shadow:5px 7px 0 var(--shadow)}

/* Main layout: hero, cards grid (takes the remaining height), routes */
main{display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;gap:clamp(8px,1.6vh,18px);padding:0 clamp(16px,3vw,44px);min-height:0;max-width:1480px;width:100%;margin:0 auto}
.hero{display:grid;grid-template-columns:1.25fr 1fr;align-items:end;gap:clamp(16px,4vw,60px);padding-top:clamp(2px,1vh,14px)}
.eyebrow{margin:0 0 6px;font:800 12px/1 var(--round);letter-spacing:.16em;text-transform:uppercase;color:var(--tomato-ink)}
h1{margin:0;font:800 clamp(34px,min(5.4vw,7.4vh),76px)/.98 var(--round);letter-spacing:-.025em}
h1 .swash{position:relative;display:inline-block;color:var(--plum)}
h1 .swash::after{content:"";position:absolute;left:.04em;right:.2em;bottom:.02em;height:.2em;border-radius:99px;background:var(--sun);z-index:-1;transform:rotate(-1.2deg)}
.thesis{margin:0;font:600 clamp(17px,min(1.55vw,2.5vh),22px)/1.35 var(--round);max-width:36ch}
.sub{margin:8px 0 2px;color:var(--ink-2);font-size:14px}

.grid-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.grid-label{margin:0;font:800 12px/1 var(--round);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.keys{margin:0;font-size:12.5px;color:var(--ink-2);display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.keys .dot{margin:0 4px}
kbd{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:7px;background:#fff;color:var(--ink);font:700 11.5px/1 var(--round);box-shadow:0 2px 0 var(--shadow-strong)}

/* Cards */
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:var(--gap);min-height:0;padding:4px 6px 10px 2px}
.card{--tilt:-.7deg;position:relative;display:grid;grid-template-rows:minmax(44px,1fr) auto;min-height:0;text-decoration:none;background:#fff;border-radius:20px;
  box-shadow:0 0 0 1px rgba(43,34,48,.04),5px 6px 0 var(--shadow);transform:rotate(var(--tilt));
  transition:transform .45s var(--spring),box-shadow .45s var(--spring);outline:none}
.card:nth-child(even){--tilt:.7deg}
.card:nth-child(3n){--tilt:-.35deg}
.card:hover,.card:focus-visible{transform:translate(-2px,-6px) rotate(0deg) scale(1.015);box-shadow:0 0 0 1px rgba(43,34,48,.04),9px 13px 0 var(--shadow)}
.card:focus-visible{box-shadow:0 0 0 3px #fff,0 0 0 6px var(--ink),9px 13px 0 3px var(--shadow)}
.preview{position:relative;margin:8px 8px 0;border-radius:14px;overflow:hidden;min-height:0;background:var(--tone);box-shadow:inset 0 0 0 3px rgba(255,255,255,.55)}
.preview svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.tone-sun{--tone:var(--sun)} .tone-grass{--tone:var(--grass)} .tone-plum{--tone:var(--plum)} .tone-sky{--tone:var(--sky)} .tone-tomato{--tone:var(--tomato)} .tone-butter{--tone:var(--butter)}
.new{position:absolute;top:10px;right:10px;background:#fff;color:var(--tomato-ink);font:800 11px/1 var(--round);letter-spacing:.08em;text-transform:uppercase;padding:6px 9px;border-radius:999px;box-shadow:2px 3px 0 var(--shadow);transform:rotate(4deg)}
.copy{padding:clamp(8px,1.2vh,14px) 16px clamp(10px,1.4vh,16px);display:grid;gap:3px}
.meta{display:flex;align-items:center;gap:8px;min-width:0}
.num{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:9px;background:var(--ink);color:#fff;font:800 11.5px/1 var(--round);transition:transform .6s var(--spring)}
.card:hover .num,.card:focus-visible .num{transform:rotateY(360deg) rotate(-8deg)}
.kicker{font:700 10.5px/1.2 var(--round);letter-spacing:.045em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card h3{margin:2px 0 0;font:800 clamp(16px,min(1.35vw,2.3vh),20px)/1.15 var(--round);letter-spacing:-.01em}
.card p{margin:0;font-size:13px;line-height:1.4;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.go{display:flex;align-items:center;gap:7px;margin-top:4px;font:700 13px/1 var(--round);color:var(--ink)}
.go kbd{height:20px;min-width:20px}
.go .arrow{transition:transform .4s var(--spring)}
.card:hover .go .arrow,.card:focus-visible .go .arrow{transform:translateX(5px)}

/* Preview motion: shapes spring up and lines draw on focus/hover */
.preview .pop,.preview .bob,.preview .tilt,.preview .tilt-r,.preview .glyph{transform-box:fill-box;transform-origin:center;transition:transform .5s var(--spring)}
.preview .pop{transition-delay:calc(var(--i,0) * 45ms)}
.card:hover .pop,.card:focus-visible .pop{transform:translateY(-6px) scale(1.12)}
.card:hover .bob,.card:focus-visible .bob{transform:translateY(-8px) scale(1.18)}
.card:hover .tilt,.card:focus-visible .tilt{transform:rotate(-5deg) translateY(-3px)}
.card:hover .tilt-r,.card:focus-visible .tilt-r{transform:rotate(5deg) translateY(-3px)}
.card:hover .glyph.tilt,.card:focus-visible .glyph.tilt{transform:rotate(-8deg) scale(1.08)}
.preview .line{stroke-dasharray:600;stroke-dashoffset:0}
.card:hover .line,.card:focus-visible .line{animation:draw .9s var(--ease) both}
@keyframes draw{from{stroke-dashoffset:600}to{stroke-dashoffset:0}}
.card.shrug{animation:shrug .45s var(--spring)}
@keyframes shrug{30%{transform:translate(-2px,-6px) rotate(-2deg) scale(1.015)}65%{transform:translate(-2px,-6px) rotate(1.5deg) scale(1.015)}}

/* Routes */
.routes{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(12px,2vw,28px);background:#fff;border-radius:20px;padding:clamp(10px,1.4vh,16px) 20px;box-shadow:5px 6px 0 var(--shadow);margin:0 6px 0 2px}
.routes h2{margin:0;font:800 clamp(16px,1.4vw,20px)/1.1 var(--round);letter-spacing:-.01em}
.route-list{display:flex;flex-wrap:wrap;gap:6px 26px;min-width:0}
.route{margin:0;display:flex;align-items:center;flex-wrap:wrap;gap:5px;font-size:13px}
.route-name{font:800 11px/1 var(--round);letter-spacing:.1em;text-transform:uppercase;color:#fff;padding:5px 9px;border-radius:999px;margin-right:4px}
.r0 .route-name{background:var(--sky-ink)} .r1 .route-name{background:var(--plum)}
.step{font-weight:600}
.arr{color:var(--ink-2)}
.cta{justify-self:end;text-decoration:none;font:800 14px/1 var(--round);color:#fff;background:var(--tomato-ink);padding:12px 18px;border-radius:14px;box-shadow:0 0 0 3px var(--line),4px 5px 0 3px var(--shadow);white-space:nowrap;transition:transform .4s var(--spring),box-shadow .4s var(--spring)}
.cta:hover,.cta:focus-visible{transform:translate(-1px,-3px) rotate(-1.5deg);box-shadow:0 0 0 3px var(--line),6px 8px 0 3px var(--shadow)}

/* Footer */
.foot{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:clamp(8px,1.4vh,14px) clamp(16px,3vw,44px);font-size:12.5px;color:var(--ink-2)}
.foot p{margin:0}
.siblings{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.siblings a{text-decoration-thickness:2px;text-underline-offset:3px;text-decoration-color:var(--sun)}
.siblings .here{font-weight:800;color:var(--ink)}

/* Staggered entrance */
.card,.hero,.routes,.grid-head{opacity:1}
body:not(.ready) .card{opacity:0;transform:translateY(16px) rotate(var(--tilt)) scale(.94)}
body:not(.ready) .hero,body:not(.ready) .routes{opacity:0;transform:translateY(10px)}
body.ready .card{transition:transform .55s var(--spring),box-shadow .45s var(--spring),opacity .35s var(--ease);transition-delay:calc(var(--i) * 45ms + 80ms),0s,calc(var(--i) * 45ms + 80ms)}
body.ready .card:hover,body.ready .card:focus-visible,body.settled .card{transition-delay:0s}
.hero,.routes{transition:opacity .4s var(--ease),transform .5s var(--spring)}
.routes{transition-delay:.4s}

/* Shorter viewports: trim secondary lines rather than scroll */
@media (max-height:760px) and (min-width:1024px){
  .card p{-webkit-line-clamp:1}
  .sub{display:none}
  .go{display:none}
}
@media (max-height:640px) and (min-width:1024px){.card p{display:none}}

/* Below 1024px: natural scrolling, fewer columns */
@media (max-width:1023px){
  body{overflow:auto;height:auto;display:block}
  main{display:block}
  .hero{grid-template-columns:1fr;gap:10px;margin-bottom:18px}
  .grid-head{margin-bottom:10px}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;margin-bottom:18px}
  .card{grid-template-rows:120px auto}
  .routes{grid-template-columns:1fr;margin-bottom:10px}
  .cta{justify-self:start}
  .foot{flex-direction:column;align-items:flex-start}
}
@media (max-width:560px){
  .cards{grid-template-columns:1fr}
  .keys{display:none}
  .top-nav .pill{padding:8px 12px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  body:not(.ready) .card,body:not(.ready) .hero,body:not(.ready) .routes{opacity:1;transform:none}
}