/* Playlunch Games: rebuilt as a standalone, static website from a 2024 homepage archive. */
:root {
  --teal: #00d1d5;
  --yellow: #ffd000;
  --pink: #fca3ee;
  --dark-maroon: #361717;
  --content-width: 774px;
  --font-body: 'Open Sans', Arial, sans-serif;
  --font-heading: 'Signika', 'Open Sans', Arial, sans-serif;
  --font-nav: 'Poppins', Arial, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; color:#121212; font: 300 16px/1.5 var(--font-body); background: var(--teal); }
img { display:block; max-width:100%; }
a { color: inherit; }
a:focus-visible { outline: 3px solid var(--yellow); outline-offset:5px; }
.container { width: min(var(--content-width), calc(100% - 48px)); margin-inline:auto; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.skip-link { position:absolute; z-index:99; top:-100px; left:20px; background:white; padding:12px; }
.skip-link:focus { top:12px; }

/* Header overlays the first image, just as on the archived Squarespace site. */
.site-header { position:absolute; top:0; left:0; width:100%; height:128px; z-index:5;
  background:linear-gradient(to bottom, rgba(255,255,255,.94) 0%, rgba(249,246,246,.83) 19%, rgba(150,117,117,.44) 64%, rgba(255,255,255,0) 100%); }
.header-inner { display:flex; justify-content:space-between; align-items:flex-start; padding-top:20px; }
.site-logo { display:block; width:95px; flex-shrink:0; }
.site-logo img { width:100%; height:auto; }
.site-nav { display:flex; align-items:center; gap:20px; padding-top:27px; }
.site-nav a { color:#222; text-decoration:none; text-transform:uppercase; font:400 15px/1.4 var(--font-nav); letter-spacing:.075em; border-bottom:1px solid transparent; }
.site-nav a:hover, .site-nav a[aria-current=page] { border-bottom-color:currentColor; }

.section-image { background-repeat:no-repeat; background-size:cover; }
.hero { min-height:453px; background-color:var(--dark-maroon); background-image:linear-gradient(180deg, rgba(35,17,17,.18), rgba(35,17,17,.22)),url('/assets/images/skybox-town-square.jpg'); background-position:50% 83%; }
.hero-inner { min-height:453px; display:flex; align-items:flex-end; padding-bottom:41px; }
.hero h1 { max-width:518px; margin:0; padding:18px 32px 20px; border-radius:7px; background:rgba(0,0,0,.76); color:#fff; font:500 21px/1.34 var(--font-heading); }

.intro-section { background:var(--teal); color:white; }
.intro-inner { min-height:241px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:23px; padding-top:12px; padding-bottom:20px; text-align:center; }
.intro-inner p { margin:0; max-width:455px; font:300 16px/1.45 var(--font-body); }
.button { min-width:122px; min-height:41px; border:0; border-radius:7px; display:inline-flex; align-items:center; justify-content:center; padding:12px 22px; text-decoration:none; font:600 10px/1.1 var(--font-nav); text-transform:uppercase; letter-spacing:.045em; transition:filter .18s,transform .18s; }
.button:hover { filter:brightness(.96); transform:translateY(-1px); }
.button-yellow { background:var(--yellow); color:white; }
.button-teal { background:var(--teal); color:white; }

.learner-section { background-color:#d9d9d9; background-image:url('/assets/images/learners-at-laptop.jpg'); background-position:center 41%; }
.learner-inner { min-height:382px; display:flex; align-items:flex-end; padding-bottom:17px; }
.mission-callout { max-width:355px; margin:0; padding:20px 32px 26px; border-radius:6px; background:rgba(0,0,0,.62); color:#fff; font:300 15px/1.5 var(--font-body); }

.game-section { background-color:#ebeae8; background-image:url('/assets/images/town-squared.webp'); background-position:center 50%; }
.game-inner { min-height:382px; display:flex; align-items:flex-start; justify-content:flex-end; padding-top:84px; }
.game-card { width:258px; min-height:184px; background:rgba(255,255,255,.91); padding:18px 32px 16px; border-radius:7px; }
.game-card h2 { margin:0 0 9px; font:600 17px/1.4 var(--font-heading); }
.game-card p { margin:0 0 20px; font:300 11.5px/1.48 var(--font-body); }
.game-card .button { min-width:130px; min-height:34px; padding:10px 14px; font-size:8.5px; border-radius:6px; }

.why-section { background:var(--pink); color:white; }
.why-inner { min-height:430px; display:grid; grid-template-columns: 1fr 1fr; gap:48px; padding-top:40px; padding-bottom:37px; }
.why-copy { display:flex; flex-direction:column; align-items:flex-start; }
.why-copy h2 { margin:0 0 20px; font:500 22px/1.35 var(--font-heading); }
.why-copy p { margin:0 0 14px; font:300 11.7px/1.42 var(--font-body); }
.why-copy .button { margin-top:auto; }
.why-quote { align-self:center; padding:6px 2px 0; text-align:center; }
.why-quote .quote-label { opacity:.82; margin:0 0 11px; font:300 10.5px/1.4 var(--font-body); }
.why-quote blockquote { margin:0; font:300 16px/1.45 var(--font-body); }

.site-footer { background:var(--teal); color:white; }
.footer-inner { min-height:160px; padding:26px 0 20px; }
.footer-inner h2 { font:500 16px/1.3 var(--font-heading); margin:0 0 17px; }
.footer-inner p { margin:0 0 12px; font:300 11px/1.35 var(--font-body); }
.footer-inner p a { text-underline-offset:2px; }
.footer-inner small { display:block; font:300 8px/1.5 var(--font-body); }

/* Secondary pages, styled consistently with the recovered homepage. */
.careers-hero { background-color:var(--dark-maroon); background-image:linear-gradient(rgba(0,0,0,.1),rgba(0,0,0,.32)),url('/assets/images/skybox-town-square.jpg'); background-position:center 83%; }
.careers-hero-inner { min-height:420px; display:flex; align-items:flex-end; padding-bottom:48px; }
.careers-hero h1 { margin:0; padding:17px 30px; background:rgba(0,0,0,.76); border-radius:7px; color:white; font:500 34px/1.3 var(--font-heading); }
.careers-content { background:var(--pink); color:white; }
.careers-inner { min-height:360px; padding-block:55px; max-width:700px; }
.careers-inner h2 { margin:0 0 18px; font:500 28px/1.3 var(--font-heading); }
.careers-inner p { max-width:550px; }
.careers-inner .button { margin-top:12px; }
.careers-inner .small-note { margin-top:34px; font-size:12px; opacity:.85; }

@media (max-width:767px) {
  .container { width:calc(100% - 40px); }
  .site-header { height:125px; }
  .header-inner { padding-top:18px; }
  .site-logo { width:84px; }
  .site-nav { padding-top:24px; gap:17px; }
  .site-nav a { font-size:12px; }
  .hero, .hero-inner { min-height:440px; }
  .hero { background-position:53% 100%; }
  .hero-inner { padding-bottom:32px; }
  .hero h1 { max-width:510px; font-size:21px; padding:19px 21px; }
  .intro-inner { min-height:260px; padding:38px 0; gap:25px; }
  .intro-inner p { font-size:15px; }
  .learner-inner { min-height:350px; padding-bottom:21px; }
  .learner-section { background-position:59% center; }
  .mission-callout { max-width:330px; font-size:15px; padding:19px 23px; }
  .game-section { background-position:center center; }
  .game-inner { min-height:385px; align-items:flex-end; padding:0 0 22px; }
  .game-card { width:min(290px,88%); min-height:0; padding:18px 24px; }
  .game-card p { font-size:12px; }
  .why-inner { min-height:0; display:block; padding:42px 0 52px; }
  .why-copy h2 { font-size:25px; }
  .why-copy p { font-size:13px; }
  .why-copy .button { margin-top:16px; }
  .why-quote { max-width:390px; margin:50px auto 0; }
  .footer-inner { padding:28px 0 26px; }
  .careers-hero-inner { min-height:390px; }
  .careers-inner { padding-block:48px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } .button { transition:none; } }