/* Additions on top of the original compiled CSS (site.css). */
.ver-tag{position:fixed;right:8px;bottom:6px;z-index:60;font:11px/1 ui-monospace,Menlo,Consolas,monospace;color:#fff;opacity:.3;text-shadow:0 0 3px #000;pointer-events:none;user-select:none}
/* no mix-blend-mode on the version tag: a blended fixed layer is re-composited on every scroll frame on phones */
html{scroll-behavior:smooth}
[hidden]{display:none!important}

/* Utility classes the compiled CSS did not include */
.bg-black\/30{background-color:rgba(0,0,0,.3)}
.bg-black\/60{background-color:rgba(0,0,0,.6)}
.bg-black\/55{background-color:rgba(0,0,0,.55)}
.max-w-64{max-width:16rem}
.list-disc{list-style:disc}
.space-y-2>*+*{margin-top:.5rem}
.text-2xl{font-size:1.5rem;line-height:2rem}
.pl-6{padding-left:1.5rem}
.mx-auto{margin-left:auto;margin-right:auto}
.max-w-3xl{max-width:48rem}.max-w-5xl{max-width:64rem}
.px-5{padding-left:1.25rem;padding-right:1.25rem}
.py-24{padding-top:6rem;padding-bottom:6rem}
.pb-24{padding-bottom:6rem}
.mt-8{margin-top:2rem}.mb-8{margin-bottom:2rem}.mb-6{margin-bottom:1.5rem}.mb-4{margin-bottom:1rem}.mt-24{margin-top:6rem}.pb-10{padding-bottom:2.5rem}
.text-3xl{font-size:1.875rem;line-height:2.25rem}
.gap-y-2{row-gap:.5rem}.gap-x-4{column-gap:1rem}
.opacity-80{opacity:.8}
.flex-wrap{flex-wrap:wrap}
@media (min-width:48rem){.md\:text-5xl{font-size:3rem;line-height:1}.md\:px-10{padding-left:2.5rem;padding-right:2.5rem}.md\:px-5{padding-left:1.25rem;padding-right:1.25rem}}

/* Hero still image: subtle slow zoom */
.hero-still img{animation:ws-kb 28s ease-in-out infinite alternate;transform-origin:50% 60%;will-change:transform}
@keyframes ws-kb{from{transform:scale(1)}to{transform:scale(1.08)}}
.card-still{transition:transform 6s ease-out}
@media (hover:hover){.bento-tilt_1:hover .card-still,.bento-tilt_2:hover .card-still{transform:scale(1.05)}}
@media (prefers-reduced-motion:reduce){.hero-still img,.card-still{animation:none;transition:none}}
.hero-clip{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s ease}
.hero-clip.on{opacity:1}
.hero-still.has-clip img{animation-play-state:paused}
a.bento-tilt_2{text-decoration:none}

/* Navigation */
.nav-desktop{display:none}
.nav-burger{display:flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;margin-left:.25rem;padding:11px 10px;background:none;border:0;cursor:pointer}
.nav-burger span{display:block;height:2px;background:#fff;transition:transform .25s,opacity .25s}
.nav-burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-burger.open span:nth-child(2){opacity:0}
.nav-burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (min-width:64rem){.nav-desktop{display:block}.nav-burger{display:none}}
.mobile-menu{position:absolute;top:calc(100% + .5rem);left:0;right:0;display:flex;flex-direction:column;background:#000;border:1px solid #ffffff33;border-radius:.5rem;overflow:hidden;font-family:var(--font-eb-garamond);opacity:0;visibility:hidden;transform:translateY(-.5rem);pointer-events:none;transition:opacity .25s ease,transform .25s ease,visibility 0s linear .25s}
.mobile-menu.open{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition-delay:0s}
.mobile-menu a{color:#dfdff0;text-transform:uppercase;font-size:.9rem;letter-spacing:.04em;padding:.9rem 1.25rem;border-bottom:1px solid #ffffff1a;text-decoration:none}
.mobile-menu a:last-child{border-bottom:0}
.mobile-menu a:hover,.mobile-menu a:focus-visible{background:#171717;color:#fde047}
@media (min-width:64rem){.mobile-menu{display:none!important}}
#site-nav .mobile-menu{top:calc(100% - .5rem);margin:0 1rem}
#site-nav .nav-desktop .nav-hover-btn{margin-inline-start:calc(var(--spacing)*7)}

/* Home: recent posts + Patreon list */
.recent-posts{list-style:none;margin:0;padding:0;font-family:var(--font-eb-garamond)}
.recent-posts a{display:flex;justify-content:space-between;gap:1rem;padding:1rem 0;border-bottom:1px solid #ffffff26;color:#dfdff0;text-decoration:none;font-size:1.15rem}
.recent-posts a:hover .rp-title{color:#fde047}
.recent-posts .rp-date{opacity:.6;font-size:.95rem;white-space:nowrap}
@media (max-width:40rem){.recent-posts a{flex-direction:column;gap:.15rem}}

/* YouTube facade */
.yt{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:.5rem;overflow:hidden;margin:1.5rem 0}
.yt-link,.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.yt img{width:100%;height:100%;object-fit:cover;display:block}
.yt-play{position:absolute;left:50%;top:50%;width:76px;height:54px;margin:-27px 0 0 -38px;border-radius:14px;background:rgba(0,0,0,.72);transition:background .2s}
.yt-play:after{content:"";position:absolute;left:30px;top:15px;border-left:20px solid #fff;border-top:12px solid transparent;border-bottom:12px solid transparent}
.yt-link:hover .yt-play,.yt-link:focus-visible .yt-play{background:#fde047}
.yt-link:hover .yt-play:after,.yt-link:focus-visible .yt-play:after{border-left-color:#000}

/* Sub pages (blog, policies) */
.page-body{background:#000;color:#dfdff0;min-height:100vh}
.page-header{position:relative;z-index:50;max-width:72rem;margin:0 auto;padding:1rem 1rem 0}
.page-header-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.page-logo{display:flex;align-items:center;gap:.75rem;color:#fff;text-decoration:none;font-family:Ghibli,sans-serif;font-size:1.4rem}
.page-header .nav-hover-btn{margin-inline-start:calc(var(--spacing)*7)}
.page-header .mobile-menu{top:calc(100% + .25rem)}
.page-main{max-width:72rem;margin:0 auto;padding:1.5rem 1rem 5rem}
.breadcrumb ol{display:flex;flex-wrap:wrap;list-style:none;margin:0 0 2rem;padding:0;font-family:var(--font-eb-garamond);font-size:.95rem;color:#dfdff0b3}
.breadcrumb li+li:before{content:"\203A";margin:0 .6rem;opacity:.6}
.breadcrumb a{color:#dfdff0;text-decoration:underline;text-underline-offset:3px}
.breadcrumb a:hover{color:#fde047}
.breadcrumb [aria-current]{color:#fff}
.prose-ws{max-width:720px;margin:0 auto;font-family:var(--font-eb-garamond);font-size:1.25rem;line-height:1.75}
.prose-ws.wide{max-width:900px}
.prose-ws h1{font-family:Ghibli,sans-serif;font-weight:700;color:#fff;font-size:clamp(2rem,6vw,3.25rem);line-height:1.05;letter-spacing:-.02em;margin:0 0 .75rem}
.prose-ws h2{font-family:Ghibli,sans-serif;color:#fff;font-size:clamp(1.5rem,4vw,2rem);line-height:1.15;margin:2.25rem 0 .75rem}
.prose-ws h3,.prose-ws h4{color:#fff;font-weight:600;font-size:1.35rem;line-height:1.3;margin:1.75rem 0 .5rem}
.prose-ws p{margin:0 0 1.15rem}
.prose-ws ul,.prose-ws ol{margin:0 0 1.25rem;padding-left:1.5rem}
.prose-ws ul{list-style:disc}.prose-ws ol{list-style:decimal}
.prose-ws li{margin:.35rem 0}
.prose-ws li>p{margin:0}
.prose-ws a{color:#fde047;text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.prose-ws a:hover{color:#fff}
.prose-ws strong{color:#fff;font-weight:600}
.prose-ws img{max-width:100%;height:auto;border-radius:.5rem;margin:1.25rem 0;display:block}
.prose-ws .btn{display:inline-block;background:#dfdff0;color:#000;text-decoration:none;padding:.6rem 1.5rem;border-radius:.375rem;text-transform:uppercase;font-size:.9rem}
.prose-ws .btn:hover{background:#fde047;color:#000}
.prose-ws .embed-form{width:100%;height:900px;border:0;background:#fff;border-radius:.5rem;margin:1rem 0}
.prose-ws table{width:100%;border-collapse:collapse;font-size:1rem;margin:1rem 0}
.prose-ws td,.prose-ws th{border:1px solid #ffffff33;padding:.5rem;vertical-align:top}
.post-meta{opacity:.65;font-size:1rem!important;margin-bottom:2rem!important}
.post-list{list-style:none;margin:2rem 0 0!important;padding:0!important}
.post-card{margin:0 0 1.25rem!important}
.post-card a{display:flex;gap:1.25rem;color:#dfdff0;text-decoration:none;border:1px solid #ffffff26;border-radius:.5rem;overflow:hidden}
.post-card a:hover{border-color:#fde047}
.post-card img,.post-card-noimg{width:200px;min-height:130px;object-fit:cover;flex:none;margin:0;border-radius:0;background:#171717}
.post-card-text{display:flex;flex-direction:column;gap:.3rem;padding:1rem 1rem 1rem 0;font-size:1.05rem;line-height:1.45}
.post-card-text strong{font-size:1.3rem;line-height:1.25}
.post-card-text time{opacity:.6;font-size:.9rem}
.post-card-text span{opacity:.8;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media (max-width:40rem){.post-card a{flex-direction:column}.post-card img,.post-card-noimg{width:100%;height:170px}.post-card-text{padding:0 1rem 1rem}}
.post-pager{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:3rem 0 1.5rem;font-size:1.1rem}
.post-pager a{display:block;border:1px solid #ffffff26;border-radius:.5rem;padding:.9rem 1rem;color:#dfdff0;text-decoration:none;line-height:1.35}
.post-pager a:hover{border-color:#fde047;color:#fde047}
.post-pager small{display:block;opacity:.6;text-transform:uppercase;letter-spacing:.06em;font-size:.75rem;margin-bottom:.25rem}
.post-pager .next{text-align:right}
@media (max-width:40rem){.post-pager{grid-template-columns:1fr}.post-pager .next{text-align:left}}
.notfound{text-align:center;padding-top:6rem;font-family:var(--font-eb-garamond)}
.notfound h1{font-family:Ghibli,sans-serif;font-size:3rem;color:#fff;margin-bottom:1rem}
.notfound p{font-size:1.25rem;margin-bottom:2rem}
.notfound a{margin:0 auto}

/* Mobile fit for the big animated titles; keep button labels on one line */
.group>span>span{white-space:nowrap}
@media (max-width:40rem){
  .animated-word{font-size:2.1rem!important}
  .animated-title>div{padding-inline:1rem!important}
}

.prose-ws{overflow-wrap:anywhere}
.prose-ws pre,.prose-ws table{max-width:100%;overflow-x:auto;display:block}
.prose-ws .post-list{list-style:none}

/* ---------- Polish pass ---------- */
picture{display:contents}

/* Nav: the compiled classes put transition-all/700ms on the fixed bar, which fought the 0.2s GSAP hide/show.
   Only the background and border fade now; GSAP owns position and opacity. */
#site-nav{transition-property:background-color,border-color;transition-duration:.3s}
#site-nav button[aria-label$="audio"]{min-width:44px;min-height:44px;justify-content:center;margin-left:.5rem}
@media (min-width:64rem){#site-nav button[aria-label$="audio"]{margin-left:2.5rem}}

/* Loader fades out by itself (CSS), so it can never get stuck if a deferred script is slow */
#loader{backdrop-filter:none;animation:ws-loader-out .4s ease .35s forwards}
@keyframes ws-loader-out{to{opacity:0;visibility:hidden}}

/* Footer and social targets: at least 44px to tap */
.social-row{gap:0}
.social-row a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}
.foot-links a{display:inline-block;padding:.7rem .25rem}
@media (max-width:40rem){.foot-links{column-gap:.75rem}.foot-links>span{display:none}}
.page-logo{min-height:44px}
.breadcrumb a{display:inline-block;padding:.35rem 0}

/* The goo filter re-rasterises the whole 100dvh story block every frame; invisible gain, real cost on phones */
@media (max-width:1023px),(pointer:coarse){.story-img-container{filter:none}}

/* Phones: one column for the platform cards (the two-column grid squeezed titles to "INTERE" / "SEEKIN") */
@media (max-width:767px){
  .bento-grid{grid-template-columns:minmax(0,1fr)}
  .bento-grid>*{grid-column:auto!important;margin-inline:0!important}
  .bento-grid a.bento-tilt_2{min-height:8.5rem}
  .bento-tilt_1 p,.bento-tilt_2 p{font-size:.9375rem;line-height:1.45}
  .bento-title{font-size:2.25rem;line-height:1}
}

/* Phones and tablets: the contact portrait sat on top of the title and copy. In the flow now, poking out of the card's top edge; the side pair returns at 1024px. */
@media (max-width:1023px){
  #contact .contact-pair{display:none}
  #contact>div{overflow:visible}
  #contact .contact-hero-img{position:relative;top:auto;left:auto;right:auto;width:11rem;margin:-8.5rem auto 2rem}
  #contact .contact-hero-img>div{height:15rem}
}

/* Phones and touch: About image grows with a plain scale (no pin, no layout work); see home.js */
@media (max-width:767px),(pointer:coarse){
  #clip{position:relative;overflow:hidden}
  #clip .about-image{position:absolute;inset:0;translate:none;width:100%;height:100%;border-radius:0;transform-origin:50% 50%;will-change:transform}
}

/* Blog and inner pages on phones */
@media (max-width:40rem){
  .prose-ws{font-size:1.125rem;line-height:1.7}
  .page-main{padding-top:1rem}
  .prose-ws img{margin:1rem 0}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .animated-word{opacity:1;transform:none;will-change:auto}
  .cinematic-logo{opacity:1}
  .indicator-line.active{animation:none}
  #loader{animation-duration:.01s;animation-delay:0s}
  .mobile-menu,.nav-burger span{transition:none}
}

/* Breadcrumbs: one line, the current page truncates instead of wrapping under a dangling separator */
.breadcrumb ol{flex-wrap:nowrap;overflow:hidden}
.breadcrumb li{flex:none}
.breadcrumb li[aria-current]{flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Posts without a cover image: quiet emblem tile instead of an empty dark box */
.post-card-noimg{position:relative}
.post-card-noimg:after{content:"";position:absolute;inset:0;background:url(/images/icon-light.svg) center/44px no-repeat;opacity:.22}

/* Button label swap: the hidden duplicate label peeked out under long labels ("FOR REAL... SUPPORT US ON PATREON").
   It is only rendered while the button is hovered or focused (touch has no hover swap, so never there). */
.group>span>span[aria-hidden]{visibility:hidden}
@media (hover:hover){.group:hover>span>span[aria-hidden],.group:focus-visible>span>span[aria-hidden]{visibility:visible}}

/* The four store cards: same size and same button width, so no platform looks like an afterthought. 2x2 from 768px, one column below. */
.bento-grid>.platform-card{grid-column:span 1/span 1;min-height:20rem;margin:0}
.platform-card a[href^="http"]{min-width:13.5rem;justify-content:center}
@media (min-width:768px){.bento-grid>.platform-card{min-height:26rem}}
@media (min-width:1024px){.platform-card a[href^="http"]{min-width:15rem}}
@media (min-width:768px) and (max-width:1023px){.platform-card a[href^="http"]{min-width:0;width:100%}}
.bento-tilt_2 .justify-between>a{margin-top:1rem}

/* ---------- Polish pass 2 ---------- */
/* Phones: the compact button (py-2) was 32px tall; a thumb needs 44. Label stays centred by the flex row. */
@media (max-width:639px){a.group{min-height:44px}.prose-ws .btn{display:inline-flex;align-items:center;min-height:44px}}
/* Breadcrumb and footer links: 44px touch height without moving the text (negative margin cancels the padding) */
.breadcrumb a{padding:.7rem .4rem;margin:0 -.4rem}
.breadcrumb ol{margin:-.35rem 0 1.65rem}
.foot-links a{padding:.75rem .25rem}
/* Titles on phones: the 3D flip-in threw words sideways and clipped them at the edge ("WHO ... WE ... A"). A short rise and fade instead, same timing. */
@media (max-width:767px),(pointer:coarse){.animated-word{transform:translate3d(0,24px,0);transform-origin:50% 50%!important}}
/* Play section intro: the line under "Play Worldseekers" was 50% opacity on black (about 4:1); and the 8rem padding left a dead gap on phones */
#play .opacity-50{opacity:.7}
@media (max-width:767px){#play>div>.py-32{padding-block:3.5rem}}
/* Mailing list and Discord buttons: same width so the pair reads as a set (stacked on phones, side by side from 640px) */
#contact .mt-10.flex>a.group{min-width:13.5rem;justify-content:center}
/* Contact card on phones: seven social icons wrapped 6 + 1 with Patreon orphaned; cap the row width so it breaks 4 + 3 */
@media (max-width:639px){#contact .social-row{max-width:11.5rem;margin-inline:auto}}
/* mt-6 is not in the compiled CSS, so the social icons sat flush under the buttons */
#contact .social-row{margin-top:1.5rem}
/* Footer: the "|" separators rode high once the links got 44px touch padding */
.foot-links{align-items:center}
/* Tablet: 60px card titles cut "INTERESTED?" off at the card edge (card is 330px wide at 768). Scales with the viewport, capped at the original 60px from ~1300px. */
@media (min-width:768px){.bento-grid .bento-title{font-size:clamp(2.1rem,4.6vw,3.75rem);line-height:1}}
/* Breadcrumb: centre the separator against the padded links */
.breadcrumb ol{align-items:center}

/* ---------- Features: home cards (#features) and /features pages ---------- */
.feat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.75rem}
.feat-card{position:relative;overflow:hidden;min-height:20rem;border-radius:var(--radius-md,.375rem);border:1px solid #fff3;grid-column:auto}
.feat-card .feat-shade{background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.25) 55%,rgba(0,0,0,.55))}
.feat-card .bento-title{text-shadow:0 2px 14px rgba(0,0,0,.55)}
.feat-card p{text-shadow:0 1px 10px rgba(0,0,0,.6)}
.feat-card a.group{min-width:11rem;justify-content:center}
.feat-card.feat-wide{grid-column:1/-1;min-height:24rem}
.feat-card.feat-more{grid-column:1/-1;min-height:9rem;text-decoration:none;border-color:transparent}
.feat-card.feat-more>div{min-height:9rem}
.feat-card.feat-more .bento-title{font-size:1.75rem}
@media (min-width:768px){
  .feat-card{min-height:24rem}
  .feat-card.feat-wide{min-height:31rem}
  .feat-card.feat-more{min-height:10rem}
  .feat-card .bento-title{font-size:clamp(2.1rem,4.6vw,3.75rem);line-height:1}
  .feat-card.feat-more .bento-title{font-size:clamp(1.6rem,3vw,2.25rem)}
  /* the second card sits at a slight angle (CSS rotate, separate from the hover tilt's transform) */
  .feat-card.feat-tilt{rotate:-1.4deg}
}
@media (max-width:767px){
  .feat-grid{grid-template-columns:minmax(0,1fr)}
  .feat-card p{font-size:.9375rem;line-height:1.45}
  .feat-card .bento-title{font-size:2.25rem;line-height:1}
  .feat-card.feat-more .bento-title{font-size:1.5rem}
}
@media (prefers-reduced-motion:reduce){.feat-card.feat-tilt{rotate:0deg}}
#features .opacity-50{opacity:.7}
@media (max-width:767px){#features>div>.py-32{padding-block:3.5rem}}

.feat-hero{margin:0 0 1.5rem}
.feat-hero img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;margin:0;border-radius:.5rem}
.feat-lede{font-size:1.4rem;line-height:1.55;color:#fff;margin:0 0 1.5rem}
.feat-split{display:grid;gap:1.5rem;margin:1.5rem 0}
.feat-split h2:first-child{margin-top:0}
@media (min-width:760px){.feat-split.has-shot{grid-template-columns:minmax(0,1fr) 250px;align-items:start;gap:2.5rem}}
.feat-shot{margin:0}
.feat-shot img{margin:0;width:100%;height:auto;border-radius:.75rem;border:1px solid #fff3}
.feat-shot figcaption,.feat-wide-shot figcaption{font-size:.9rem;line-height:1.4;opacity:.75;margin-top:.5rem}
@media (max-width:759px){.feat-shot{max-width:17rem}}
.feat-wide-shot{margin:1.5rem 0}
.feat-wide-shot img{margin:0;width:100%;height:auto;border-radius:.5rem}
.feat-cta{margin:3rem 0 1rem;padding:1.5rem;border:1px solid #fff3;border-radius:.5rem;background:rgba(255,255,255,.05)}
.feat-cta h2{margin-top:0}
.feat-cta .btns{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:1rem}
.feat-cta .back-link{margin:0}
.feat-index{list-style:none;padding:0;display:grid;gap:1rem;margin:0 0 1.5rem}
.feat-index a{display:flex;gap:1rem;align-items:stretch;color:inherit;text-decoration:none;border:1px solid #fff3;border-radius:.5rem;overflow:hidden}
.feat-index a:hover{border-color:#fde047}
.feat-index img{margin:0;border-radius:0;width:9rem;height:auto;object-fit:cover;flex:none}
.feat-index-text{display:flex;flex-direction:column;gap:.25rem;padding:.75rem .75rem .75rem 0;font-size:1.05rem;line-height:1.4}
.feat-index-text strong{font-family:Ghibli,sans-serif;font-size:1.35rem;text-transform:uppercase;letter-spacing:.01em}
@media (max-width:519px){.feat-index a{flex-direction:column}.feat-index img{width:100%;aspect-ratio:16/9}.feat-index-text{padding:0 .9rem .9rem}}
.feat-card.feat-more .bento-title,.feat-card.feat-more p{text-shadow:none}
.feat-card.feat-more>div{gap:.5rem}