@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500&family=DM+Sans:wght@400;500;700&family=JetBrains+Mono:wght@400;500&display=swap");
:root{--cream:#FBF7F0;--linen:#F1EBE1;--stone:#DDD5C8;--pebble:#B9B1A4;--slate:#5C6664;--ink:#13292C;--teal:#006D77;--sea:#83C5BE;--blaze:#FF5B14;--butter:#FFDE7A;--serif:"Fraunces",Georgia,serif;--sans:"DM Sans",-apple-system,"Segoe UI",sans-serif;--mono:"JetBrains Mono",ui-monospace,Menlo,monospace}
*{box-sizing:border-box}body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--sans);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--teal)}img{max-width:100%;display:block}
.wrap{max-width:1160px;margin:0 auto;padding:0 28px}
.logo{display:flex;align-items:center;gap:12px;color:var(--cream);text-decoration:none;font:500 21px var(--serif)}.logo img{width:36px;height:36px}
.eyebrow{font:500 12px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--sea)}
.page-hero{padding:40px 0 72px}.page-hero h1{font:400 clamp(40px,6vw,64px)/1.05 var(--serif);letter-spacing:-.02em;margin:14px 0 0;max-width:20ch}.page-hero p{max-width:56ch;color:#DDEEEB;font-size:18px;margin:16px 0 0}

.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 24px;border-radius:99px;font-weight:500;text-decoration:none;font-size:15px;transition:.15s}
.btn.primary{background:var(--blaze);color:var(--ink)}.btn.primary:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(255,91,20,.35)}
.btn.ghost{border:1px solid rgba(131,197,190,.7);color:var(--cream)}.btn.ghost:hover{background:rgba(131,197,190,.15)}
/* Sections */
.sec{padding:88px 0}.sec.alt{background:var(--linen);border-top:1px solid var(--stone);border-bottom:1px solid var(--stone)}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;margin-bottom:36px}.sec-head h2{font:400 clamp(30px,4vw,42px)/1.1 var(--serif);margin:10px 0 0;letter-spacing:-.01em}.sec-head .eyebrow{color:var(--teal)}
.more{font-weight:500;text-decoration:none}.more:hover{text-decoration:underline}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px}
/* Post cards */
.pc{display:flex;flex-direction:column;background:#fff;border:1px solid var(--stone);border-radius:18px;overflow:hidden;text-decoration:none;color:var(--ink);transition:.2s}
.pc:hover{transform:translateY(-4px);box-shadow:0 18px 40px -18px rgba(19,41,44,.35);border-color:var(--sea)}
.pc .img{aspect-ratio:16/10;background:var(--teal) center/cover}.pc .body{padding:22px 24px 26px;display:flex;flex-direction:column;gap:10px;flex:1}
.tag{font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--teal)}.pc h3{font:400 25px/1.2 var(--serif);margin:0}.pc p{margin:0;color:var(--slate);font-size:15px}.pc .foot{margin-top:auto;padding-top:8px;font-size:13px;color:var(--slate)}
.pc.feature{grid-column:1/-1;flex-direction:row}.pc.feature .img{flex:1.25;aspect-ratio:auto;min-height:340px}.pc.feature .body{flex:1;padding:40px;justify-content:center}.pc.feature h3{font-size:36px}
@media(max-width:760px){.pc.feature{flex-direction:column}.pc.feature .img{min-height:220px}.pc.feature .body{padding:24px}}
/* Game cards */
.gc{display:flex;flex-direction:column;border-radius:18px;overflow:hidden;text-decoration:none;color:var(--ink);background:#fff;border:1px solid var(--stone);transition:.2s}
.gc:hover{transform:translateY(-4px);box-shadow:0 18px 40px -18px rgba(19,41,44,.35)}.gc svg{display:block;width:100%;height:auto}.gc .body{padding:18px 22px 22px}.gc h3{font:400 23px var(--serif);margin:0 0 4px}.gc p{margin:0;color:var(--slate);font-size:14px}
/* About */
.about{display:grid;grid-template-columns:240px 1fr;gap:40px}.about .lead{font:400 30px/1.3 var(--serif);margin:0 0 20px}.about p{font-size:18px;max-width:60ch}
@media(max-width:760px){.about{grid-template-columns:1fr;gap:10px}}
/* Connect + footer */
.connect{padding:72px 0}.connect .wrap{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}.connect h2{font:400 clamp(34px,4vw,48px)/1.1 var(--serif);margin:0}.connect h2 em{font-style:normal;color:var(--butter)}
.links{display:flex;gap:10px;flex-wrap:wrap}.links a{color:var(--cream);text-decoration:none;border:1px solid rgba(131,197,190,.6);padding:10px 18px;border-radius:99px}.links a:hover{background:rgba(131,197,190,.15)}
.sf{background:var(--ink);color:var(--pebble);font-size:14px;padding:28px 0}.sf .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}.sf a{color:var(--cream);text-decoration:none;margin-left:18px}.sf a:hover{color:var(--sea)}
/* Article */
.post-hero{padding:36px 0 140px}.post-hero h1{font:400 clamp(38px,5.5vw,62px)/1.06 var(--serif);letter-spacing:-.02em;margin:16px 0 0;max-width:22ch}.post-hero .meta{margin-top:20px;color:#DDEEEB;font-size:15px}.post-hero .meta a{color:var(--butter)}
.cover{max-width:960px;margin:-104px auto 0;padding:0 28px;position:relative}.cover img{width:100%;border-radius:20px;box-shadow:0 30px 60px -30px rgba(19,41,44,.5);aspect-ratio:16/9;object-fit:cover}
.article{max-width:700px;margin:0 auto;padding:56px 28px 40px;font-size:19px;line-height:1.75}
.article>p:first-of-type::first-letter{font:500 64px/0.9 var(--serif);float:left;margin:6px 10px 0 0;color:var(--teal)}
.article h2{font:500 13px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--teal);margin:52px 0 10px}
.article img{border-radius:14px;margin:28px 0}.article li{margin-bottom:10px}.article strong{font-weight:700}
.article blockquote{margin:28px 0;padding:6px 0 6px 22px;border-left:3px solid var(--blaze);font:400 24px/1.4 var(--serif)}
.post-end{max-width:700px;margin:0 auto;padding:0 28px 88px}.post-end .box{background:var(--linen);border:1px solid var(--stone);border-radius:16px;padding:24px 26px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
/* SF carousel */
.car{position:relative}.track{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding-bottom:6px;scrollbar-width:none}.track::-webkit-scrollbar{display:none}
.slide{flex:0 0 clamp(240px,28vw,330px);scroll-snap-align:start;margin:0;position:relative;border-radius:18px;overflow:hidden;aspect-ratio:3/4;background:var(--stone)}
.slide img{width:100%;height:100%;object-fit:cover;transition:transform .6s}.slide:hover img{transform:scale(1.04)}
.slide figcaption{position:absolute;left:0;right:0;bottom:0;padding:40px 18px 16px;background:linear-gradient(transparent,rgba(19,41,44,.75));color:var(--cream);font:400 18px var(--serif)}
.arrows{display:flex;gap:10px}.arrows button{width:44px;height:44px;border-radius:50%;border:1px solid var(--pebble);background:transparent;color:var(--ink);font-size:18px;cursor:pointer}.arrows button:hover{background:var(--teal);border-color:var(--teal);color:var(--cream)}
.track{align-items:flex-start;padding:4px 4px 10px}
.slide{flex:0 0 clamp(250px,30vw,360px);width:clamp(250px,30vw,360px);height:auto;aspect-ratio:3/4;border:10px solid #fff;outline:1px solid var(--stone);border-radius:16px;box-shadow:0 14px 30px -18px rgba(19,41,44,.45)}
.slide img{border-radius:8px}.slide figcaption{left:0;right:0;bottom:0;border-radius:0 0 8px 8px}
.slide{border:6px solid var(--teal);outline:none;border-radius:18px;box-shadow:0 0 0 1px var(--teal),0 16px 30px -18px rgba(0,109,119,.55);background:var(--teal)}
.slide img{border-radius:12px}
.connect{position:relative;background:var(--teal);color:var(--cream);overflow:hidden}.connect::before{content:"";position:absolute;inset:0;background:url(/assets/squiggle.svg) 0 0/330px repeat}.connect>*{position:relative}