/* Homeworlds mood — magic-hour skies. Each card owns a time of day; the page is one long twilight. */
:root{
  --night:#1c1433;--violet:#2c2150;--plum:#4a2d63;--rose:#b4557a;--apricot:#f2a772;
  --gold:#f5c86a;--gold-soft:#f7dca0;--ink:#fbf3e6;--ink-2:#d9cde6;--ink-3:#b8a9cc;
  --surface:rgba(34,24,62,.72);--edge:rgba(247,220,160,.16);
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:"Avenir Next",Avenir,"Segoe UI",ui-sans-serif,system-ui,sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--night);color:var(--ink);font:15px/1.5 var(--sans);display:grid;grid-template-rows:auto 1fr auto;min-height:100%;overflow:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit}
.skip{position:absolute;left:12px;top:-60px;background:var(--gold);color:var(--night);padding:8px 12px;border-radius:8px;z-index:9}
.skip:focus{top:12px}

/* The page atmosphere: violet zenith falling to an apricot horizon glow. */
.sky{position:fixed;inset:0;z-index:-1;background:linear-gradient(180deg,#1a1230 0%,#2b1f4d 38%,#4f2d62 70%,#6e3a63 86%,#80405f 100%)}
.sky .glow{position:absolute;left:50%;bottom:-38vh;width:140vw;height:70vh;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(242,167,114,.24),rgba(242,167,114,0) 70%);filter:blur(10px)}
.sky .stars{position:absolute;inset:0 0 45% 0;background-image:radial-gradient(1.2px 1.2px at 12% 18%,#fff9 50%,transparent 51%),radial-gradient(1px 1px at 28% 8%,#fff7 50%,transparent 51%),radial-gradient(1.4px 1.4px at 47% 22%,#fffa 50%,transparent 51%),radial-gradient(1px 1px at 63% 12%,#fff6 50%,transparent 51%),radial-gradient(1.3px 1.3px at 78% 26%,#fff8 50%,transparent 51%),radial-gradient(1px 1px at 90% 6%,#fff7 50%,transparent 51%),radial-gradient(1px 1px at 36% 34%,#fff5 50%,transparent 51%),radial-gradient(1.2px 1.2px at 7% 40%,#fff6 50%,transparent 51%);animation:twinkle 6s ease-in-out infinite alternate}
@keyframes twinkle{from{opacity:.55}to{opacity:1}}

.top{display:flex;justify-content:space-between;align-items:center;padding:clamp(12px,2.2vh,22px) clamp(16px,3.4vw,52px) 0}
.brand{font:600 21px/1 var(--serif);text-decoration:none;letter-spacing:.01em;display:inline-flex;gap:6px;align-items:baseline}
.brand .spark{color:var(--gold);font-size:15px}
.top-links a{font-size:14px;color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--edge);padding-bottom:2px}
.top-links a:hover,.top-links a:focus-visible{color:var(--gold-soft);border-color:var(--gold)}

main{display:grid;grid-template-rows:auto auto 1fr auto;gap:clamp(8px,1.6vh,18px);padding:clamp(10px,2.4vh,30px) clamp(16px,3.4vw,52px) clamp(8px,1.6vh,16px);min-height:0}
.hero{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(16px,4vw,64px);align-items:end}
.eyebrow{font:600 11.5px/1.2 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-soft);margin:0 0 10px}
h1{font:600 clamp(34px,6.2vh,64px)/.98 var(--serif);margin:0;letter-spacing:-.01em;text-wrap:balance}
h1 em{font-style:italic;font-weight:500;background:linear-gradient(90deg,var(--gold-soft),var(--apricot) 60%,#f08aa0);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.06em}
.thesis{font:400 clamp(17px,2.4vh,21px)/1.4 var(--serif);margin:0 0 8px;color:var(--ink);max-width:40ch;text-wrap:pretty}
.sub{margin:0;color:var(--ink-2);font-size:14px}

.grid-head{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--edge);padding-bottom:8px}
.grid-head .eyebrow{margin:0}
.keys{margin:0;font-size:12.5px;color:var(--ink-3)}
kbd{font:600 11px/1 var(--sans);color:var(--ink);background:rgba(255,255,255,.08);border:1px solid rgba(247,220,160,.28);border-bottom-width:2px;border-radius:5px;padding:3px 6px;margin:0 1px}

.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:clamp(10px,1.4vw,18px);min-height:0}
.card{position:relative;display:grid;grid-template-rows:minmax(0,1fr) auto;background:var(--surface);border:1px solid var(--edge);border-radius:16px;overflow:hidden;text-decoration:none;min-height:0;backdrop-filter:blur(6px);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s var(--ease);opacity:0;animation:rise .7s var(--ease) forwards;animation-delay:calc(var(--i)*55ms + 80ms)}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.card:hover,.card:focus-visible{transform:translateY(-4px);border-color:rgba(247,220,160,.55);box-shadow:0 18px 40px -16px var(--halo,#f2a77288),0 0 0 1px rgba(247,220,160,.25),0 0 36px -6px var(--halo,#f2a77266)}
.card:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.preview{position:relative;min-height:56px;overflow:hidden;background:var(--sky);filter:saturate(.88) brightness(.9);transition:filter .5s var(--ease)}
.card:hover .preview,.card:focus-visible .preview{filter:saturate(1.1) brightness(1.08)}
.preview svg{position:absolute;inset:0;width:100%;height:100%}
.preview::after{content:"";position:absolute;inset:auto 0 0 0;height:40%;background:linear-gradient(transparent,rgba(28,20,51,.28))}
.preview .tw{animation:twinkle 3.2s ease-in-out infinite alternate}
.preview .bob{animation:bob 5s ease-in-out infinite;transform-box:fill-box}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.card:hover .draw,.card:focus-visible .draw{stroke-dashoffset:0}
.draw{stroke-dasharray:var(--len,400);stroke-dashoffset:calc(var(--len,400) * .38);transition:stroke-dashoffset 1.1s var(--ease)}
.chip{position:absolute;font:500 12px/1 var(--serif);color:#2a1b3e;background:rgba(255,248,236,.9);border-radius:999px;padding:6px 10px;box-shadow:0 6px 16px -8px #0008;white-space:nowrap;animation:bob 6s ease-in-out infinite}
.copy{padding:clamp(10px,1.5vh,16px) 16px clamp(10px,1.6vh,16px)}
.meta>span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.meta{display:flex;justify-content:space-between;align-items:center;gap:8px;font:600 10.5px/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
.meta .n{color:var(--gold-soft)}
.new{color:var(--night);background:var(--gold);border-radius:999px;padding:3px 7px;letter-spacing:.1em}
.card h3{font:600 clamp(16px,2.3vh,19px)/1.15 var(--serif);margin:0 0 4px;color:var(--ink)}
.card p{margin:0;font-size:13px;line-height:1.42;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.enter{position:absolute;right:12px;bottom:10px;z-index:1;font:600 12px/1 var(--sans);color:#2a1b3e;background:rgba(255,248,236,.92);border-radius:999px;padding:6px 10px;opacity:0;transform:translateX(-4px);transition:.35s var(--ease)}
.card:hover .enter,.card:focus-visible .enter{opacity:1;transform:none}

.routes{display:flex;justify-content:space-between;align-items:center;gap:16px;background:linear-gradient(90deg,rgba(74,45,99,.55),rgba(180,85,122,.35));border:1px solid var(--edge);border-radius:14px;padding:12px 18px}
.routes h2{font:600 18px/1.2 var(--serif);margin:0 0 2px}
.routes p{margin:0;font-size:13px;color:var(--ink-2)}
.routes b{color:var(--gold-soft);font-weight:600;margin-right:6px}
.btn{flex:none;font:600 13.5px/1 var(--sans);color:var(--night);background:linear-gradient(180deg,var(--gold-soft),var(--gold));border-radius:999px;padding:10px 16px;text-decoration:none;box-shadow:0 6px 18px -8px #f5c86aaa;transition:transform .3s var(--ease)}
.btn:hover,.btn:focus-visible{transform:translateY(-2px)}
.btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

.foot{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:10px clamp(16px,3.4vw,52px) 14px;font-size:12px;color:#fff6ee}
.foot nav{display:flex;gap:12px;flex-wrap:wrap}
.foot nav a{color:#fff3e8;text-decoration-color:rgba(255,243,232,.4);text-underline-offset:3px}
.foot nav a[aria-current]{color:var(--night);background:var(--gold-soft);border-radius:999px;padding:1px 8px;text-decoration:none}

@media (max-width:1180px){.card p{-webkit-line-clamp:2}.keys{display:none}}
@media (max-height:760px){.card p{-webkit-line-clamp:1}.sub{display:none}}
@media (max-width:1023px){
  body{overflow:auto;height:auto}html{height:auto}
  .hero{grid-template-columns:1fr}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none}
  .preview{height:120px}
  .foot{flex-direction:column;align-items:flex-start}
}
@media (max-width:560px){.cards{grid-template-columns:1fr}.routes{flex-direction:column;align-items:flex-start}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.card{opacity:1}.draw{stroke-dashoffset:0}}