/*
Theme Name: CloudDog Games
Theme URI: https://clouddoggames.com/
Author: CloudDog Games
Author URI: https://clouddoggames.com/
Description: A bright, bouncy studio theme for CloudDog Games - a games showcase, a WooCommerce-ready coming-soon shop, and an about/contact site. Zero required plugins, no jQuery, no external requests beyond one font stylesheet.
Version: 2.1.0
Requires at least: 6.2
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: clouddog
Tags: custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, block-styles, wide-blocks, e-commerce, portfolio
*/

/* =========================================================================
   1. TOKENS
   ========================================================================= */
:root{
  /* Colour, sampled straight off the logo art */
  --sky:            #86CEFC;
  --sky-soft:       #A5DBFD;
  --sky-deep:       #5FB4F2;
  --cream:          #FDF9F2;
  --cream-warm:     #FDF6EA;
  --butter:         #FEEB88;
  --butter-deep:    #F5CE4E;
  --butter-shadow:  #D9A92F;
  --blue:           #2E6DB4;
  --blue-deep:      #23558C;
  --ink:            #17395C;
  --ink-soft:       #3D6285;
  --blush:          #F7A9BE;
  --grass:          #6FC96B;
  --grass-deep:     #4CA349;
  --grape:          #B39BE8;

  /* Semantic */
  --page-bg:        var(--sky);
  --surface:        var(--cream);
  --surface-2:      #FFFFFF;
  --line:           var(--blue);
  --text:           var(--ink);
  --text-muted:     var(--ink-soft);
  --accent:         var(--butter-deep);

  /* Shape - the "sticker" look: thick outline + hard offset shadow */
  --stroke:         3px;
  --r-sm:           14px;
  --r:              22px;
  --r-lg:           32px;
  --r-pill:         999px;
  --drop:           0 6px 0 var(--blue);
  --drop-sm:        0 4px 0 var(--blue);
  --drop-soft:      0 14px 32px rgba(23,57,92,.16);

  /* Type */
  --font-display: "Fredoka", ui-rounded, "SF Pro Rounded", "Segoe UI Variable Display", "Trebuchet MS", system-ui, sans-serif;
  --font-body:    "Nunito", ui-rounded, "SF Pro Rounded", "Segoe UI", system-ui, -apple-system, sans-serif;

  --step--1: clamp(.82rem, .79rem + .14vw, .9rem);
  --step-0:  clamp(1rem, .96rem + .2vw, 1.12rem);
  --step-1:  clamp(1.2rem, 1.12rem + .38vw, 1.45rem);
  --step-2:  clamp(1.45rem, 1.3rem + .72vw, 2rem);
  --step-3:  clamp(1.8rem, 1.5rem + 1.4vw, 2.9rem);
  --step-4:  clamp(2.3rem, 1.7rem + 2.8vw, 4.4rem);

  /* Motion. One set of easings for the whole site: a soft overshoot for
     anything that should feel springy, and a long decelerating curve for
     anything entering the page. Using two curves everywhere is most of what
     makes motion read as designed rather than assembled. */
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease-out:    cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --t-fast:      .16s;
  --t-base:      .34s;
  --t-slow:      .7s;
  --t-enter:     .85s;

  /* Rhythm */
  --wrap:      1180px;
  --wrap-wide: 1400px;
  --gutter:    clamp(1rem, .6rem + 2vw, 2.25rem);
  --section:   clamp(3.5rem, 2rem + 6vw, 7rem);
}

/* =========================================================================
   2. RESET / BASE
   ========================================================================= */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:var(--step-0);
  line-height:1.65;
  color:var(--text);
  background-color:var(--page-bg);
  background-image:
    radial-gradient(1200px 520px at 50% -180px, #B7E4FE 0%, rgba(183,228,254,0) 70%),
    linear-gradient(180deg, #8FD2FC 0%, #86CEFC 42%, #9BD8FD 100%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block}
picture{display:contents}
h1,h2,h3,h4,h5{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.08;
  margin:0 0 .5em;
  color:var(--ink);
  text-wrap:balance;
}
h1{font-size:var(--step-4)}
h2{font-size:var(--step-3)}
h3{font-size:var(--step-2)}
h4{font-size:var(--step-1)}
p{margin:0 0 1.1em;text-wrap:pretty}
a{color:var(--blue-deep);text-underline-offset:3px;text-decoration-thickness:2px}
a:hover{color:var(--ink)}
ul,ol{padding-left:1.25em}
hr{border:0;height:var(--stroke);background:var(--blue);border-radius:var(--r-pill);opacity:.35;margin:2.5rem 0}
blockquote{
  margin:1.5rem 0;padding:1rem 1.4rem;border-left:6px solid var(--butter-deep);
  background:rgba(255,255,255,.55);border-radius:0 var(--r) var(--r) 0;font-style:italic;
}
code,kbd,pre{font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;font-size:.9em}
pre{background:var(--ink);color:var(--cream);padding:1.1rem 1.3rem;border-radius:var(--r);overflow:auto}
:where(a,button,input,textarea,select,summary,[tabindex]):focus-visible{
  outline:4px solid var(--butter-deep);outline-offset:3px;border-radius:6px;
}
::selection{background:var(--butter);color:var(--ink)}

.screen-reader-text{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;left:50%;top:-100px;transform:translateX(-50%);z-index:9999;
  background:var(--cream);color:var(--ink);padding:.7rem 1.4rem;border:var(--stroke) solid var(--blue);
  border-radius:var(--r-pill);font-family:var(--font-display);box-shadow:var(--drop);
  transition:top .18s ease;
}
.skip-link:focus{top:12px}

/* =========================================================================
   3. LAYOUT PRIMITIVES
   ========================================================================= */
.wrap{width:min(100% - var(--gutter)*2, var(--wrap));margin-inline:auto}
.wrap--wide{width:min(100% - var(--gutter)*2, var(--wrap-wide))}
.wrap--narrow{width:min(100% - var(--gutter)*2, 760px)}
.section{padding-block:var(--section)}
.section--tight{padding-block:clamp(2.2rem,1.4rem + 3vw,3.6rem)}
.stack>*+*{margin-top:var(--stack-gap,1.1rem)}
.grid{display:grid;gap:clamp(1.1rem,.7rem + 1.6vw,2rem)}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.center{text-align:center}
.center-x{margin-inline:auto}
.cluster{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
.cluster--center{justify-content:center}

/* Section heading block */
.section-head{max-width:62ch;margin-inline:auto;text-align:center;margin-bottom:clamp(2rem,1.2rem + 2vw,3.2rem)}
.section-head p{color:var(--ink-soft);font-size:var(--step-1);margin-bottom:0}
.eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--font-display);font-size:var(--step--1);font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--blue-deep);
  background:var(--butter);border:var(--stroke) solid var(--blue);
  padding:.34rem 1rem;border-radius:var(--r-pill);box-shadow:var(--drop-sm);
  margin-bottom:1.1rem;
}
.eyebrow::before{content:"";width:.55rem;height:.55rem;border-radius:50%;background:var(--blue);flex:none}

/* =========================================================================
   4. STICKER SURFACES
   ========================================================================= */
.card{
  background:var(--surface);
  border:var(--stroke) solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--drop);
  padding:clamp(1.3rem,1rem + 1.2vw,2.1rem);
  position:relative;
}
.card--flat{box-shadow:none}
.card--white{background:var(--surface-2)}
.card--butter{background:var(--butter)}
.card--lift{transition:transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s ease}
.card--lift:hover,.card--lift:focus-within{transform:translateY(-5px);box-shadow:0 11px 0 var(--blue)}

/* =========================================================================
   5. BUTTONS
   ========================================================================= */
.btn{
  --btn-bg:var(--butter);
  --btn-fg:var(--ink);
  --btn-line:var(--blue);
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--font-display);font-weight:600;font-size:var(--step-0);
  line-height:1;text-decoration:none;cursor:pointer;
  padding:.9em 1.6em;
  color:var(--btn-fg);background:var(--btn-bg);
  border:var(--stroke) solid var(--btn-line);border-radius:var(--r-pill);
  box-shadow:0 5px 0 var(--btn-line);
  transition:transform .12s ease, box-shadow .12s ease, background-color .15s ease;
  -webkit-tap-highlight-color:transparent;
}
.btn:hover{color:var(--btn-fg);transform:translateY(-2px);box-shadow:0 7px 0 var(--btn-line)}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 var(--btn-line)}
.btn--lg{font-size:var(--step-1);padding:1em 1.9em}
.btn--sm{font-size:var(--step--1);padding:.7em 1.2em;box-shadow:0 4px 0 var(--btn-line)}
.btn--cream{--btn-bg:var(--cream)}
.btn--white{--btn-bg:#fff}
.btn--grass{--btn-bg:var(--grass);--btn-fg:#0E3D18;--btn-line:var(--grass-deep)}
.btn--ink{--btn-bg:var(--ink);--btn-fg:var(--cream);--btn-line:var(--blue-deep)}
.btn--ghost{--btn-bg:transparent;box-shadow:none;color:var(--ink)}
.btn--ghost:hover{--btn-bg:rgba(255,255,255,.5);box-shadow:none;transform:translateY(-2px)}
.btn[aria-disabled="true"],.btn:disabled{opacity:.55;pointer-events:none}
.btn .icon{width:1.15em;height:1.15em;flex:none}

/* =========================================================================
   6. DECOR - stars, sparks, clouds
   ========================================================================= */
.decor{position:absolute;pointer-events:none;user-select:none;z-index:0}
.star{color:var(--butter);filter:drop-shadow(0 2px 0 var(--butter-shadow))}
.spark{color:var(--butter);opacity:.9}
@media (prefers-reduced-motion:no-preference){
  .float{animation:float 6s ease-in-out infinite}
  .float--slow{animation-duration:9s}
  .float--alt{animation-delay:-3s}
}
@keyframes float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-14px) rotate(5deg)}}

/* Cloud divider between bands */
.cloudline{display:block;width:100%;height:auto;color:var(--cream)}
.band{background:var(--cream);position:relative}
.band--warm{background:var(--cream-warm)}
.band--sky{background:transparent}

/* =========================================================================
   7. HEADER / NAV
   ========================================================================= */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(253,249,242,.86);
  -webkit-backdrop-filter:saturate(150%) blur(10px);
  backdrop-filter:saturate(150%) blur(10px);
  border-bottom:var(--stroke) solid var(--blue);
}
.site-header__inner{
  display:flex;align-items:center;gap:1rem;
  min-height:74px;padding-block:.55rem;
}
/* min-width:0 is what lets a flex item shrink below its content. Without it
   the brand block stays as wide as the site title plus tagline, and on a narrow
   phone it shoves the menu button off the right-hand edge - which is a header
   that scrolls sideways, on every page. */
.brand{display:flex;align-items:center;gap:.65rem;text-decoration:none;min-width:0;margin-right:auto}
.brand img{height:48px;width:auto;flex:none}
.brand__wordmark{height:42px;width:auto;border-radius:10px}
.brand__text{
  font-family:var(--font-display);font-weight:600;font-size:1.22rem;color:var(--ink);
  line-height:1.05;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
@media (max-width:520px){
  .brand img{height:40px}
  .brand__text{font-size:1.02rem}
  .brand__text small{font-size:.7em}
}
/* On the narrowest phones the tagline is the first thing to go - the site name
   and the menu button both have to fit, and they are what people need. */
@media (max-width:430px){
  .brand__text small{display:none}
  .header-cta{flex:none}
}
.brand__text small{display:block;font-size:.72em;color:var(--blue-deep);font-weight:500;overflow:hidden;text-overflow:ellipsis}

.nav{display:flex;align-items:center;gap:.15rem}
.nav ul{display:flex;align-items:center;gap:.1rem;list-style:none;margin:0;padding:0}
.nav a{
  display:block;padding:.55rem .9rem;border-radius:var(--r-pill);
  font-family:var(--font-display);font-weight:500;color:var(--ink);text-decoration:none;
  transition:background-color .15s ease,color .15s ease;
}
.nav a:hover{background:var(--sky-soft)}
.nav .current-menu-item>a,.nav .current_page_item>a,.nav .current-menu-parent>a{
  background:var(--butter);box-shadow:inset 0 0 0 2px var(--blue);
}
/* dropdowns */
.nav li{position:relative}
.nav .sub-menu{
  position:absolute;top:calc(100% + .4rem);left:0;min-width:220px;display:block;
  flex-direction:column;align-items:stretch;gap:.15rem;
  background:var(--cream);border:var(--stroke) solid var(--blue);border-radius:var(--r);
  box-shadow:var(--drop);padding:.45rem;
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:.16s ease;
}
.nav li:hover>.sub-menu,.nav li:focus-within>.sub-menu{opacity:1;visibility:visible;transform:none}
.nav .sub-menu a{white-space:nowrap}

.header-cta{display:flex;align-items:center;gap:.5rem;flex:none}
.nav-toggle{
  display:none;flex:none;width:48px;height:48px;padding:0;align-items:center;justify-content:center;
  background:var(--butter);border:var(--stroke) solid var(--blue);border-radius:var(--r-sm);
  box-shadow:var(--drop-sm);cursor:pointer;
}
.nav-toggle span{display:block;width:22px;height:3px;border-radius:2px;background:var(--ink);position:relative}
.nav-toggle span::before,.nav-toggle span::after{
  content:"";position:absolute;left:0;width:22px;height:3px;border-radius:2px;background:var(--ink);
  transition:transform .2s ease, top .2s ease;
}
.nav-toggle span::before{top:-7px}.nav-toggle span::after{top:7px}
.nav-toggle[aria-expanded="true"] span{background:transparent}
.nav-toggle[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

@media (max-width:960px){
  .nav-toggle{display:flex}
  .header-cta .btn--nav{display:none}
  .nav{
    position:absolute;top:100%;left:0;right:0;
    background:var(--cream);border-bottom:var(--stroke) solid var(--blue);
    padding:.8rem var(--gutter) 1.4rem;
    display:none;
  }
  .nav.is-open{display:block}
  .nav ul{flex-direction:column;align-items:stretch;gap:.2rem}
  .nav a{padding:.8rem 1rem;font-size:var(--step-1)}
  .nav .sub-menu{
    position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;
    border:0;border-left:var(--stroke) solid var(--sky-deep);border-radius:0;
    margin:.2rem 0 .4rem .8rem;padding:0 0 0 .5rem;background:transparent;
  }
}

/* =========================================================================
   8. HERO
   ========================================================================= */
.hero{position:relative;padding-block:clamp(2.5rem,1.5rem + 5vw,5.5rem) clamp(4rem,2rem + 7vw,7rem);overflow:hidden}
.hero__inner{position:relative;z-index:2;text-align:center;display:grid;justify-items:center;gap:1.2rem}
/* `picture` is display:contents, so the hero sizing lives on the img itself. */
.hero__logo img{
  width:min(100%,780px);
  filter:drop-shadow(0 10px 22px rgba(23,57,92,.18));
}
.hero__tag{
  font-size:var(--step-1);max-width:56ch;color:var(--ink);
  background:rgba(253,249,242,.72);
  /* A pill radius is right at two lines and a lozenge blob at five, which is
     what a phone gets. A large fixed radius reads as soft at every length. */
  border-radius:var(--r-lg);
  padding:.85rem 1.6rem;margin:0;
}
.hero__actions{margin-top:.4rem}
.hero .decor{z-index:1}
.hero__stat-row{
  display:flex;flex-wrap:wrap;justify-content:center;gap:.7rem;margin-top:1.6rem;
}
.pill-stat{
  display:inline-flex;align-items:baseline;gap:.45rem;
  background:var(--cream);border:var(--stroke) solid var(--blue);border-radius:var(--r-pill);
  padding:.5rem 1.1rem;box-shadow:var(--drop-sm);
}
.pill-stat b{font-family:var(--font-display);font-size:var(--step-1);line-height:1}
.pill-stat span{font-size:var(--step--1);color:var(--ink-soft);font-weight:700;letter-spacing:.04em;text-transform:uppercase}

/* =========================================================================
   9. GAME CARDS
   ========================================================================= */
.game-card{
  display:flex;flex-direction:column;overflow:hidden;padding:0;
  background:var(--surface-2);
}
.game-card__media{
  position:relative;aspect-ratio:16/10;overflow:hidden;
  background:linear-gradient(160deg,var(--sky-soft),var(--sky-deep));
  border-bottom:var(--stroke) solid var(--blue);
}
.game-card__media img{width:100%;height:100%;object-fit:cover}
.game-card__media--empty{display:grid;place-items:center}
.game-card__media--empty img{width:56%;height:auto;object-fit:contain;filter:drop-shadow(0 6px 12px rgba(23,57,92,.22))}
.game-card__body{padding:1.3rem 1.4rem 1.5rem;display:flex;flex-direction:column;gap:.6rem;flex:1}
.game-card__body h3{margin:0}
.game-card__body p{margin:0;color:var(--ink-soft);flex:1}
.game-card__foot{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin-top:.5rem}
.badge{
  display:inline-flex;align-items:center;gap:.4rem;
  font-family:var(--font-display);font-size:var(--step--1);font-weight:600;
  padding:.3rem .85rem;border-radius:var(--r-pill);
  border:2px solid var(--blue);background:var(--cream);color:var(--ink);
}
.badge--live{background:var(--grass);border-color:var(--grass-deep);color:#0E3D18}
.badge--soon{background:var(--butter);border-color:var(--butter-shadow)}
.badge--dev{background:var(--grape);border-color:#7C5FD0;color:#fff}
.badge--live .dot{width:.5rem;height:.5rem;border-radius:50%;background:#0E3D18}
@media (prefers-reduced-motion:no-preference){
  .badge--live .dot{animation:pulse 1.8s ease-in-out infinite}
}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.8)}}

/* =========================================================================
   10. FEATURE / STEP TILES
   ========================================================================= */
/* THE ICON SITS ABOVE THE COPY, NOT BESIDE IT.
   Side by side, a 56px icon plus its gap took 72 of a 306px content column and
   left the paragraph at 228px - five lines of four words, with every heading
   wrapping. Stacked, the copy gets the full card width and the headings fit on
   one line. */
.feature{display:flex;flex-direction:column;gap:1rem;align-items:flex-start}
.feature__icon{
  flex:none;width:54px;height:54px;display:grid;place-items:center;
  background:var(--butter);border:var(--stroke) solid var(--blue);border-radius:16px;
  box-shadow:var(--drop-sm);
}
.feature h3{margin:0 0 .3rem;font-size:var(--step-1)}
.feature p{margin:0;color:var(--ink-soft)}

/* =========================================================================
   11. SHOP / COMING SOON
   ========================================================================= */
.shop-hero{text-align:center;position:relative;overflow:hidden}
.soon-grid{margin-top:clamp(2rem,1rem + 3vw,3.4rem)}
.soon-card{
  position:relative;overflow:hidden;padding:0;background:var(--surface-2);
  display:flex;flex-direction:column;
}
.soon-card__media{
  aspect-ratio:1;display:grid;place-items:center;position:relative;
  background:repeating-linear-gradient(45deg,var(--cream) 0 18px,var(--cream-warm) 18px 36px);
  border-bottom:var(--stroke) solid var(--blue);
}
.soon-card__media img{width:62%;height:auto;filter:drop-shadow(0 6px 12px rgba(23,57,92,.2))}
.soon-card__body{padding:1.1rem 1.2rem 1.4rem;text-align:center;display:grid;gap:.4rem}
.soon-card__body h3{margin:0;font-size:var(--step-1)}
.soon-card__body p{margin:0;color:var(--ink-soft);font-size:var(--step--1)}
/* A corner ribbon has to be sized, not padded: a rotated box grown by big
   horizontal padding ends up with a bounding box taller than the corner it is
   supposed to cross, and overflow:hidden then eats most of it. Fixed width,
   centred text, rotated about its own middle. */
.soon-ribbon{
  position:absolute;top:26px;right:-46px;z-index:2;
  width:168px;text-align:center;
  transform:rotate(40deg);
  background:var(--butter);border-block:2px solid var(--blue);color:var(--ink);
  font-family:var(--font-display);font-size:.72rem;line-height:1;
  letter-spacing:.12em;text-transform:uppercase;
  padding:.4rem 0;
  box-shadow:0 2px 0 rgba(35,85,140,.2);
}

.notify{
  max-width:640px;margin-inline:auto;text-align:center;
}
.notify form{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center;margin-top:1.2rem}
.notify input[type=email]{
  flex:1 1 260px;min-width:0;
  font:inherit;font-family:var(--font-body);
  padding:.85rem 1.2rem;color:var(--ink);
  background:#fff;border:var(--stroke) solid var(--blue);border-radius:var(--r-pill);
  box-shadow:inset 0 2px 0 rgba(35,85,140,.12);
}
.notify input[type=email]::placeholder{color:#8AA4BC}
.notify .form-note{font-size:var(--step--1);color:var(--ink-soft);margin:.9rem 0 0}
.form-msg{
  margin-top:1rem;padding:.8rem 1.2rem;border-radius:var(--r);
  border:var(--stroke) solid var(--blue);background:var(--butter);
  font-family:var(--font-display);
}
.form-msg--error{background:#FFD9DE;border-color:#D4536B}

/* Countdown */
.countdown{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap;margin-top:1.6rem}
.countdown div{
  min-width:82px;background:var(--cream);border:var(--stroke) solid var(--blue);
  border-radius:var(--r);box-shadow:var(--drop-sm);padding:.7rem .6rem;text-align:center;
}
.countdown b{display:block;font-family:var(--font-display);font-size:var(--step-2);line-height:1}
.countdown span{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);font-weight:800}

/* =========================================================================
   12. CONTACT FORM
   ========================================================================= */
.jc-form{display:grid;gap:1rem}
.jc-form .row{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.jc-form label{display:block;font-family:var(--font-display);font-weight:600;margin-bottom:.35rem}
.jc-form input,.jc-form textarea,.jc-form select{
  width:100%;font:inherit;font-family:var(--font-body);color:var(--ink);
  padding:.8rem 1rem;background:#fff;
  border:var(--stroke) solid var(--blue);border-radius:var(--r-sm);
  box-shadow:inset 0 2px 0 rgba(35,85,140,.1);
}
.jc-form textarea{min-height:170px;resize:vertical;border-radius:var(--r)}
/* The spam honeypot, on EVERY form. This was scoped to .jc-form, which meant
   the shop's notify-me box - which is not a .jc-form - printed "Leave this
   empty" and a visible text field right in the middle of the page. */
.hp{position:absolute!important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* =========================================================================
   13. FOOTER
   ========================================================================= */
.site-footer{
  margin-top:auto;
  background:var(--ink);color:#D6E6F3;
  border-top:var(--stroke) solid var(--blue-deep);
  padding-block:clamp(2.5rem,1.6rem + 3vw,4rem) 2.4rem;
}
.site-footer h2,.site-footer h3{color:#fff;font-size:var(--step-1)}
.site-footer a{color:#BFDDF4;text-decoration:none}
.site-footer a:hover{color:var(--butter);text-decoration:underline}
.footer-grid{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));align-items:start}
.footer-brand img{width:96px;height:auto;margin-bottom:.9rem}
.footer-menu ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.socials{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.4rem}
.socials a{
  width:44px;height:44px;display:grid;place-items:center;
  background:rgba(255,255,255,.09);border:2px solid rgba(191,221,244,.35);border-radius:14px;
  transition:transform .16s ease,background-color .16s ease;
}
.socials a:hover{transform:translateY(-3px);background:var(--butter);color:var(--ink);border-color:var(--butter)}
.socials svg{width:22px;height:22px}
.colophon{
  margin-top:2.4rem;padding-top:1.3rem;border-top:2px solid rgba(191,221,244,.22);
  display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;justify-content:space-between;align-items:center;
  font-size:var(--step--1);color:#9FC2DC;
}
.disclaimer{font-size:.8rem;color:#8FB4D1;max-width:70ch;margin-top:.8rem;line-height:1.5}

/* =========================================================================
   14. PAGE / POST CONTENT
   ========================================================================= */
.page-hero{padding-block:clamp(2.6rem,1.6rem + 4vw,4.6rem) clamp(2rem,1.2rem + 3vw,3.4rem);text-align:center;position:relative;overflow:hidden}
.page-hero h1{margin-bottom:.35rem}
.page-hero p.lede{font-size:var(--step-1);color:var(--ink);max-width:60ch;margin-inline:auto}
.entry{background:var(--cream);border:var(--stroke) solid var(--blue);border-radius:var(--r-lg);box-shadow:var(--drop);padding:clamp(1.4rem,1rem + 2vw,3rem)}
.entry :where(h2,h3,h4){margin-top:1.8em}
.entry :where(h2,h3,h4):first-child{margin-top:0}
.entry img{border-radius:var(--r);border:var(--stroke) solid var(--blue)}
.entry ul li,.entry ol li{margin-bottom:.4em}
.entry .alignwide{width:min(100%, calc(var(--wrap) - 2rem));margin-inline:auto}
.entry .alignfull{width:100%}
.entry .alignleft{float:left;margin:.3rem 1.4rem 1rem 0}
.entry .alignright{float:right;margin:.3rem 0 1rem 1.4rem}
.entry .aligncenter{margin-inline:auto}
.entry .wp-caption-text,.entry figcaption{font-size:var(--step--1);color:var(--ink-soft);text-align:center;margin-top:.5rem}
.entry table{width:100%;border-collapse:collapse}
.entry :is(th,td){border:2px solid var(--sky-deep);padding:.6rem .8rem;text-align:left}
.entry th{background:var(--sky-soft)}

.post-meta{display:flex;flex-wrap:wrap;gap:.5rem .9rem;color:var(--ink-soft);font-size:var(--step--1);margin-bottom:1.2rem}
.post-card{display:flex;flex-direction:column;padding:0;overflow:hidden;background:var(--surface-2)}
.post-card__media{aspect-ratio:16/9;overflow:hidden;border-bottom:var(--stroke) solid var(--blue)}
.post-card__media img{width:100%;height:100%;object-fit:cover}
.post-card__body{padding:1.2rem 1.3rem 1.5rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.post-card__body h3{margin:0;font-size:var(--step-1)}
.post-card__body h3 a{text-decoration:none;color:var(--ink)}
.post-card__body h3 a:hover{color:var(--blue-deep)}

.pagination{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap;margin-top:2.5rem}
.pagination .page-numbers{
  display:grid;place-items:center;min-width:46px;height:46px;padding:0 .8rem;
  background:var(--cream);border:var(--stroke) solid var(--blue);border-radius:var(--r-sm);
  box-shadow:var(--drop-sm);font-family:var(--font-display);text-decoration:none;color:var(--ink);
}
.pagination .page-numbers.current{background:var(--butter)}
.pagination .page-numbers:hover{transform:translateY(-2px)}

/* Comments */
.comments-area{margin-top:2.5rem}
.comment-list{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
.comment-list .children{list-style:none;padding-left:clamp(.8rem,3vw,2rem);margin-top:1rem;display:grid;gap:1rem}
.comment-body{background:#fff;border:var(--stroke) solid var(--blue);border-radius:var(--r);padding:1.1rem 1.3rem}
.comment-meta{display:flex;gap:.6rem;align-items:center;margin-bottom:.6rem;font-size:var(--step--1)}
.comment-author img{border-radius:50%;border:2px solid var(--blue)}
.comment-form{display:grid;gap:1rem}
.comment-form :is(input[type=text],input[type=email],input[type=url],textarea){
  width:100%;font:inherit;padding:.8rem 1rem;background:#fff;
  border:var(--stroke) solid var(--blue);border-radius:var(--r-sm);
}
.comment-form .submit{
  font-family:var(--font-display);font-weight:600;cursor:pointer;
  padding:.9em 1.6em;background:var(--butter);color:var(--ink);
  border:var(--stroke) solid var(--blue);border-radius:var(--r-pill);box-shadow:0 5px 0 var(--blue);
}

/* 404 */
.error-404{text-align:center;padding-block:var(--section)}
.error-404 img{width:min(260px,60vw);margin-inline:auto;filter:drop-shadow(0 10px 20px rgba(23,57,92,.2))}

/* Search form */
.search-form{display:flex;gap:.5rem;flex-wrap:wrap}
.search-form input[type=search]{
  flex:1 1 200px;font:inherit;padding:.75rem 1.1rem;background:#fff;
  border:var(--stroke) solid var(--blue);border-radius:var(--r-pill);
}
.search-form button{
  font-family:var(--font-display);cursor:pointer;padding:.75rem 1.4rem;
  background:var(--butter);border:var(--stroke) solid var(--blue);border-radius:var(--r-pill);
  box-shadow:0 4px 0 var(--blue);color:var(--ink);
}

/* =========================================================================
   15. WOOCOMMERCE
   ========================================================================= */
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-error{
  background:var(--cream);border:var(--stroke) solid var(--blue);border-left-width:8px;
  border-radius:var(--r);box-shadow:var(--drop-sm);padding:1rem 1.2rem;list-style:none;
}
.woocommerce-notices-wrapper .woocommerce-error{background:#FFD9DE;border-color:#D4536B}
.woocommerce ul.products{
  display:grid!important;gap:clamp(1.1rem,.7rem + 1.6vw,2rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
  list-style:none;margin:0;padding:0;
}
.woocommerce ul.products::before,.woocommerce ul.products::after{display:none}
.woocommerce ul.products li.product{
  width:auto!important;margin:0!important;float:none!important;
  background:var(--surface-2);border:var(--stroke) solid var(--blue);border-radius:var(--r-lg);
  box-shadow:var(--drop);overflow:hidden;padding:0 0 1.3rem;text-align:center;
  transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .18s ease;
}
.woocommerce ul.products li.product:hover{transform:translateY(-5px);box-shadow:0 11px 0 var(--blue)}
.woocommerce ul.products li.product a img{margin:0 0 1rem;border-bottom:var(--stroke) solid var(--blue)}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--font-display);font-size:var(--step-1)!important;padding:0 1rem!important;color:var(--ink);
}
.woocommerce ul.products li.product .price{color:var(--blue-deep)!important;font-family:var(--font-display);font-size:var(--step-1)}
.woocommerce ul.products li.product .button,
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,
.woocommerce #respond input#submit,.woocommerce a.button.alt,.woocommerce button.button.alt{
  font-family:var(--font-display)!important;font-weight:600!important;
  background:var(--butter)!important;color:var(--ink)!important;
  border:var(--stroke) solid var(--blue)!important;border-radius:var(--r-pill)!important;
  box-shadow:0 5px 0 var(--blue);padding:.8em 1.5em!important;
  transition:transform .12s ease,box-shadow .12s ease;
}
.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce a.button.alt:hover{
  background:var(--butter-deep)!important;transform:translateY(-2px);box-shadow:0 7px 0 var(--blue);
}
.woocommerce span.onsale{
  background:var(--grass)!important;color:#0E3D18!important;border:2px solid var(--grass-deep);
  font-family:var(--font-display);border-radius:var(--r-pill);
}
.woocommerce div.product .product_title{font-family:var(--font-display)}
.woocommerce div.product p.price,.woocommerce div.product span.price{color:var(--blue-deep);font-family:var(--font-display)}
.woocommerce div.product .woocommerce-tabs ul.tabs li{
  background:var(--cream);border:var(--stroke) solid var(--blue);border-radius:var(--r-pill);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active{background:var(--butter)}
.woocommerce div.product div.images img{border:var(--stroke) solid var(--blue);border-radius:var(--r-lg)}
.woocommerce .quantity .qty{
  border:var(--stroke) solid var(--blue);border-radius:var(--r-sm);padding:.55rem;font:inherit;
}
.woocommerce-cart table.cart,.woocommerce table.shop_table{
  border:var(--stroke) solid var(--blue);border-radius:var(--r-lg);overflow:hidden;background:var(--surface-2);
}
.woocommerce-cart table.cart th,.woocommerce table.shop_table th{background:var(--sky-soft);font-family:var(--font-display)}
.woocommerce-store-notice,p.demo_store{background:var(--butter);color:var(--ink);border-bottom:var(--stroke) solid var(--blue)}

/* Shop catalog-mode notice (used while the shop is in coming-soon mode) */
.shop-locked{
  text-align:center;max-width:680px;margin:2rem auto 0;
}

/* =========================================================================
   16. UTILITIES + PRINT
   ========================================================================= */
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.text-muted{color:var(--ink-soft)}
.is-hidden{display:none!important}
.relative{position:relative}
.overflow-clip{overflow:hidden}

@media print{
  .site-header,.site-footer,.decor,.btn{display:none!important}
  body{background:#fff!important}
  .entry,.card{border:1px solid #999;box-shadow:none}
}

/* Socials on a light card (contact page) */
.socials--light a{background:var(--cream);border:var(--stroke) solid var(--blue);color:var(--ink);box-shadow:var(--drop-sm)}
.socials--light a:hover{background:var(--butter);color:var(--ink);border-color:var(--blue)}

/* Contact page: single column on narrow screens */
@media (max-width:860px){
  .jc-contact-grid{grid-template-columns:1fr!important}
}


/* =========================================================================
   17. MOTION
   -------------------------------------------------------------------------
   Everything below is decoration. It is written so that with JavaScript off,
   or with prefers-reduced-motion set, the page is fully visible and fully
   usable - nothing here is load-bearing. The reduced-motion block at the very
   bottom of this section switches all of it off in one place.
   ========================================================================= */

/* ---- 17.1 Cross-page transitions ----------------------------------------
   Modern browsers can cross-fade between two page loads. Everything else
   navigates normally and never knows this exists. The header is given its own
   transition name so it stays put instead of fading with the rest. */
@view-transition { navigation: auto; }

::view-transition-old(root) { animation: vtOut .2s cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: vtIn .38s var(--ease-out) both; }
@keyframes vtOut { to   { opacity: 0; transform: translateY(-6px); } }
@keyframes vtIn  { from { opacity: 0; transform: translateY(10px); } }

.site-header { view-transition-name: site-header; }

/* ---- 17.2 Scroll progress ------------------------------------------------
   A CSS-only scroll-linked bar. Where scroll timelines are not supported it
   simply stays at zero width, which is invisible - so there is no fallback to
   maintain and no JS scroll listener running on every frame. */
.scroll-progress {
  position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 200;
  background: linear-gradient(90deg, var(--butter-deep), var(--grass));
  transform: scaleX(0); transform-origin: 0 50%;
  pointer-events: none;
}
@supports (animation-timeline: scroll()) {
  .scroll-progress {
    animation: scrollProgress linear both;
    animation-timeline: scroll(root block);
  }
}
@keyframes scrollProgress { to { transform: scaleX(1); } }

/* ---- 17.3 The hero, on load ---------------------------------------------
   A single choreographed sequence rather than four things fading in at once:
   the wordmark settles, the line under it follows, then the buttons, then the
   pills count in one after another. Delays are small enough that it reads as
   one movement. */
@media (prefers-reduced-motion: no-preference) {
  .hero__logo img { animation: heroRise 1s var(--ease-out) both; }
  .hero__tag      { animation: heroRise .8s var(--ease-out) .16s both; }
  .hero__actions  { animation: heroRise .8s var(--ease-out) .28s both; }
  .hero__stat-row .pill-stat {
    animation: heroPop .6s var(--ease-spring) both;
    animation-delay: calc(.42s + var(--i, 0) * .09s);
  }
  /* The decor drifts in last and keeps floating (see .float). */
  .hero .decor { animation: heroFade 1.2s ease .5s both; }
}
@keyframes heroRise { from { opacity: 0; transform: translateY(26px); } }
@keyframes heroPop  { from { opacity: 0; transform: translateY(14px) scale(.9); } }
@keyframes heroFade { from { opacity: 0; } to { opacity: 1; } }

/* A slow breathing glow behind the wordmark. Pure atmosphere; sits under
   everything and never intercepts a pointer. */
.hero::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  left: 50%; top: 8%; width: min(900px, 90%); aspect-ratio: 2 / 1;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(255,255,255,.55), rgba(255,255,255,0) 68%);
}
@media (prefers-reduced-motion: no-preference) {
  .hero::before { animation: breathe 9s var(--ease-in-out) infinite; }
}
@keyframes breathe {
  0%, 100% { opacity: .55; transform: translateX(-50%) scale(1); }
  50%      { opacity: .9;  transform: translateX(-50%) scale(1.08); }
}

/* ---- 17.4 Scroll reveal --------------------------------------------------
   The .jc-reveal-on flag is added by JavaScript, and only when the visitor has
   not asked for reduced motion - so with JS off nothing is ever hidden by
   this. --i is the item's index within its own group, which is what turns a
   row of three cards from one blink into a sweep. */
.jc-reveal-on .reveal {
  opacity: 0;
  transform: translateY(22px) scale(.985);
  transition:
    opacity   var(--t-slow) var(--ease-out),
    transform var(--t-slow) var(--ease-out);
  transition-delay: calc(var(--i, 0) * .08s);
  will-change: opacity, transform;
}
.jc-reveal-on .reveal.is-in { opacity: 1; transform: none; }
/* Once it has arrived, stop promising the compositor a layer it no longer
   needs - hundreds of will-change layers is its own performance problem. */
.jc-reveal-on .reveal.is-done { will-change: auto; }

/* Section headings come up a touch further and slower - they lead. */
.jc-reveal-on .section-head.reveal { transform: translateY(30px); }

/* ---- 17.5 The wave dividers ---------------------------------------------
   The SVG holds two copies of one wave period, so sliding it exactly half its
   own width lands on an identical frame and the loop is invisible. */
.cloudline { display: block; width: 100%; line-height: 0; overflow: hidden; color: var(--cream); }
/* max-width:100% in the reset caps this at the container width, which would
   leave the right-hand half of the strip empty as the wave drifts left. It has
   to be twice the container: two periods wide, sliding exactly one period. */
.cloudline svg {
  display: block; width: 200%; max-width: none;
  height: clamp(46px, 5.5vw, 92px);
}
@media (prefers-reduced-motion: no-preference) {
  .cloudline svg { animation: waveDrift 32s linear infinite; }
  .cloudline--slow svg { animation-duration: 46s; animation-direction: reverse; }
}
@keyframes waveDrift { to { transform: translateX(-50%); } }
.cloudline--flip { transform: scaleY(-1); }

/* ---- 17.6 Cards ---------------------------------------------------------
   A lift, and a single soft highlight that crosses the card once. The sweep
   is a pseudo-element so it costs nothing until hover, and it is clipped by
   the card's own radius. */
.card--lift { overflow: hidden; }
.card--lift::after {
  content: ""; position: absolute; inset: 0; z-index: 3;
  border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg,
    rgba(255,255,255,0) 38%,
    rgba(255,255,255,.5) 50%,
    rgba(255,255,255,0) 62%);
  transform: translateX(-130%);
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .card--lift::after { transition: transform .9s var(--ease-out), opacity .2s ease; }
  .card--lift:hover::after,
  .card--lift:focus-within::after { transform: translateX(130%); opacity: 1; }
}

/* The placeholder crest inside an art-less game card leans in on hover. */
.game-card__media--empty img { transition: transform .45s var(--ease-spring); }
.card--lift:hover .game-card__media--empty img { transform: scale(1.07) rotate(-2deg); }
/* Real cover art gets a slow push-in instead. */
.game-card__media img { transition: transform .7s var(--ease-out); }
.card--lift:hover .game-card__media > a img { transform: scale(1.06); }

/* Feature icons tip over as the card lifts. */
.feature__icon { transition: transform .4s var(--ease-spring), background-color .3s ease; }
.card--lift:hover .feature__icon { transform: rotate(-8deg) scale(1.08); background: var(--butter-deep); }
.feature__icon svg { width: 26px; height: 26px; color: var(--ink); }

/* ---- 17.7 Buttons and links ---------------------------------------------
   The press physics are already on .btn. This is the small stuff: the icon
   reacting a beat before the rest, which is what makes a button feel live. */
.btn .icon { transition: transform .3s var(--ease-spring); }
.btn:hover .icon { transform: scale(1.15); }
.btn:has(.icon:last-child):hover .icon:last-child { transform: translateX(3px) scale(1.05); }

/* Nav items grow their pill from the middle rather than blinking one on. */
.nav a { position: relative; z-index: 1; }
.nav a::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: var(--r-pill); background: var(--sky-soft);
  transform: scale(.72); opacity: 0;
  transition: transform .28s var(--ease-spring), opacity .18s ease;
}
.nav a:hover::before { transform: scale(1); opacity: 1; }
.nav :is(.current-menu-item, .current_page_item, .current-menu-parent) > a::before { display: none; }

/* The mark in the header gives a small nod when you point at the brand. */
.brand img { transition: transform .45s var(--ease-spring); }
.brand:hover img { transform: rotate(-7deg) scale(1.06); }

/* ---- 17.8 Header on scroll ----------------------------------------------
   Tightens and gains a shadow once the page has moved, so it reads as a bar
   over content rather than part of the hero. */
.site-header {
  transition: box-shadow .3s ease, background-color .3s ease;
}
.site-header__inner { transition: min-height .3s var(--ease-out), padding-block .3s var(--ease-out); }
.site-header.is-scrolled {
  box-shadow: 0 6px 24px rgba(23, 57, 92, .13);
  background: rgba(253, 249, 242, .95);
}
.site-header.is-scrolled .site-header__inner { min-height: 62px; padding-block: .3rem; }
.site-header.is-scrolled .brand img { height: 40px; }
.brand img { transition: transform .45s var(--ease-spring), height .3s var(--ease-out); }

/* ---- 17.9 Mobile menu ---------------------------------------------------
   Slides down as a panel, with its items following one after another. */
@media (max-width: 960px) {
  .nav { transform-origin: top center; }
  .nav.is-open { animation: menuDrop .32s var(--ease-out) both; }
  .nav.is-open li {
    animation: menuItem .34s var(--ease-out) both;
    animation-delay: calc(.06s + var(--i, 0) * .045s);
  }
}
@keyframes menuDrop { from { opacity: 0; transform: translateY(-10px); } }
@keyframes menuItem { from { opacity: 0; transform: translateY(-8px); } }

/* ---- 17.10 Small touches ------------------------------------------------ */
.badge--soon { position: relative; overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .badge--soon::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(110deg, transparent 40%, rgba(255,255,255,.75) 50%, transparent 60%);
    transform: translateX(-100%);
    animation: badgeSheen 3.6s ease-in-out infinite;
  }
}
@keyframes badgeSheen { 0%, 70% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }

/* The countdown digits tick rather than swap. */
.countdown b { display: block; transition: transform .18s var(--ease-spring); }
.countdown b.is-tick { transform: scale(1.16); }

.socials a { transition: transform .3s var(--ease-spring), background-color .2s ease, color .2s ease; }
.pagination .page-numbers { transition: transform .2s var(--ease-spring), background-color .2s ease; }
.form-msg { animation: heroPop .45s var(--ease-spring) both; }

/* ---- 17.11 The off switch ----------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .jc-reveal-on .reveal { opacity: 1 !important; transform: none !important; }
  .cloudline svg { width: 200%; }
  .scroll-progress { display: none; }
}

/* The warm band's edge has to be the warm cream, not the cool one. */
.cloudline--warm { color: var(--cream-warm); }

/* Printing must never inherit a pending reveal - a hidden section would print
   as a blank page. */
@media print {
  .jc-reveal-on .reveal { opacity: 1 !important; transform: none !important; }
  .scroll-progress, .cloudline { display: none !important; }
}