/* Cairn Games: dark, media-first. Palette is the logo's: navy, cream, orange, gray. Gray .ph frames stand in for video and screenshots. */
:root{
  color-scheme:dark;
  --bg:#161c21;--panel:#1d252b;--line:#2c353c;--fg:#f6e3c0;--mute:#898378;--accent:#e35022;--accent-text:#f08a5e;--ph-a:#1b2329;--ph-b:#212b32;
  --display:"Archivo","Arial Narrow",system-ui,sans-serif;
  --body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --gutter:max(16px,env(safe-area-inset-left,0px));
  --gutter-r:max(16px,env(safe-area-inset-right,0px));
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.6 var(--body)}
a{color:inherit}
img,video{max-width:100%;height:auto;display:block}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
h1,h2,h3{font-family:var(--display);font-stretch:85%;font-weight:700;line-height:1.05;letter-spacing:-.01em;text-wrap:balance;margin:0}

.site-header{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:14px var(--gutter-r) 14px var(--gutter);border-bottom:1px solid var(--line)}
.brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none}
.brand-mark{height:36px;width:auto;flex:none}
.brand-word{height:28px;width:auto;flex:none}
.site-header nav{display:flex;gap:20px;flex-wrap:wrap}
.site-header nav a{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);text-decoration:none}
.site-header nav a:hover{color:var(--fg)}
.site-footer{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:24px var(--gutter-r) 32px var(--gutter);border-top:1px solid var(--line);color:var(--mute);font-size:13px}

.ph{background:repeating-linear-gradient(135deg,var(--ph-a) 0 14px,var(--ph-b) 14px 28px);color:#69747b;font-size:12px;letter-spacing:.12em;text-transform:uppercase;display:flex;align-items:center;justify-content:center;text-align:center;min-width:0}
.tag{margin:0 0 6px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-text)}
.tag a{text-decoration:none}
.cta{display:inline-block;margin-top:14px;padding:9px 18px;border:1px solid var(--fg);font-size:13px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none}
.cta:hover{background:var(--fg);color:var(--bg)}

/* Home carousel */
.hero{position:relative;background:#0f1417}
.slide{display:none;position:relative}
.slide.is-active{display:block}
.slide>.ph{aspect-ratio:21/9;max-height:56vh;width:100%}
.caption{position:absolute;left:var(--gutter);right:var(--gutter-r);bottom:112px;max-width:520px;text-shadow:0 1px 14px rgba(0,0,0,.7)}
.caption h1,.caption h2{font-size:clamp(34px,6vw,64px)}
.caption p{margin:8px 0 0}
.thumbs{display:flex;gap:10px;justify-content:center;padding:12px var(--gutter-r) 12px var(--gutter);background:linear-gradient(transparent,rgba(0,0,0,.85));position:absolute;left:0;right:0;bottom:0}
.thumb{position:relative;display:block;width:clamp(110px,20vw,190px);opacity:.6;text-decoration:none}
.thumb .ph{aspect-ratio:16/9;font-size:10px}
.thumb.is-active,.thumb:hover{opacity:1}
.thumb .bar{position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--accent)}
.thumb.is-active .bar{width:100%;animation:fill calc(var(--rotate-seconds) * 1s) linear forwards}
.hero:hover .thumb.is-active .bar,.hero:focus-within .thumb.is-active .bar{animation-play-state:paused}
.hero:not([data-carousel-ready]) .thumb.is-active .bar{animation:none}
@keyframes fill{from{width:0}to{width:100%}}
@media(max-width:600px){.caption{bottom:88px}.slide>.ph{aspect-ratio:4/5;max-height:none}}
@media(prefers-reduced-motion:reduce){.thumb.is-active .bar{animation:none}}

.strip{padding:36px var(--gutter-r) 48px var(--gutter);max-width:1100px;margin:0 auto}
.strip-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:18px}
.strip-head h2{font-size:22px}
.strip-head a{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.strip-list,.post-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.post-card{display:flex;flex-direction:column;gap:10px;text-decoration:none;min-width:0}
.post-card .ph,.post-card img{aspect-ratio:16/9;width:100%;object-fit:cover}
.post-card time{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-text)}
.post-card h3{font-size:20px}
.post-card p{margin:0;color:var(--mute);font-size:14px}
.post-card:hover h3{text-decoration:underline}

/* Game pages */
.game-hero .ph{aspect-ratio:21/9;width:100%;max-height:60vh}
.game-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:40px;padding:40px var(--gutter-r) 56px var(--gutter);max-width:1100px;margin:0 auto}
.game-text h1{font-size:clamp(34px,5vw,56px)}
.lead{font-size:18px;color:var(--mute);margin:12px 0 0;max-width:60ch}
.bullets{margin:22px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px;max-width:60ch}
.bullets li{padding-left:18px;position:relative}
.bullets li::before{content:"";position:absolute;left:0;top:.7em;width:8px;height:2px;background:var(--accent)}
.links{margin-top:26px;color:var(--mute);font-size:14px}
.shots{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-content:start}
.shots .ph{aspect-ratio:16/9}
@media(max-width:800px){.game-body{grid-template-columns:minmax(0,1fr)}}

/* Devlog */
.prose-wrap{padding:40px var(--gutter-r) 64px var(--gutter);max-width:820px;margin:0 auto}
.prose-wrap h1{font-size:clamp(32px,5vw,52px);margin-bottom:6px}
.post-list{margin-top:28px}
.prose{margin-top:24px;max-width:68ch}
.prose img,.prose video{margin:22px 0;width:100%}
.prose a{color:var(--accent-text)}
.prose ul{padding-left:20px}
.prose h2{font-size:26px;margin:32px 0 8px}

/* Mobile menu */
.nav-toggle{display:none;width:44px;height:44px;padding:0;border:1px solid var(--line);background:none;color:var(--fg);cursor:pointer;align-items:center;justify-content:center}
.nav-toggle-bars,.nav-toggle-bars::before,.nav-toggle-bars::after{display:block;width:20px;height:2px;background:currentColor;transition:transform .2s,opacity .2s}
.nav-toggle-bars{position:relative}
.nav-toggle-bars::before,.nav-toggle-bars::after{content:"";position:absolute;left:0}
.nav-toggle-bars::before{top:-6px}
.nav-toggle-bars::after{top:6px}
.nav-open .nav-toggle-bars{background:transparent}
.nav-open .nav-toggle-bars::before{transform:translateY(6px) rotate(45deg)}
.nav-open .nav-toggle-bars::after{transform:translateY(-6px) rotate(-45deg)}
@media(max-width:640px){
  .site-header.nav-ready{flex-wrap:wrap}
  .site-header.nav-ready .nav-toggle{display:inline-flex}
  .site-header.nav-ready nav{display:none;flex-basis:100%;flex-direction:column;gap:0;border-top:1px solid var(--line);margin-top:6px}
  .site-header.nav-ready.nav-open nav{display:flex}
  .site-header.nav-ready nav a{padding:14px 0;font-size:15px;border-bottom:1px solid var(--line)}
}
@media(prefers-reduced-motion:reduce){.nav-toggle-bars,.nav-toggle-bars::before,.nav-toggle-bars::after{transition:none}}