/* ==========================================================
   POTIONS STUDIOS — MAIN STYLESHEET
   Firefly Night Garden / Game Studio Aesthetic
   ========================================================== */

/* 1. FONTS — self-hosted brand faces (see assets/fonts/README.txt)
   ========================================================== */
@font-face {
  font-family: 'Inkverse';
  src: url('../fonts/inkverse.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Crayon Libre';
  src: url('../fonts/crayon-libre.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Crayon Libre';
  src: url('../fonts/crayon-libre-italic.woff2') format('woff2');
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}

/* 2. CSS CUSTOM PROPERTIES
   ========================================================== */
:root {
  /* Palette — warm night soil, chalk-cream ink, firefly glow */
  --bg:              #17100a;
  --bg-secondary:    #1f150c;
  --bg-tertiary:     #2a1d11;
  --bg-card:         #241910;
  --text:            #efe3bd;
  --text-muted:      #a08d63;
  --text-dark:       #17100a;
  --accent:          #e8b93d;
  --accent-light:    #f2d27a;
  --accent-dark:     #b78c22;
  --accent-glow:     rgba(239, 227, 189, 0.3);
  --border-subtle:   rgba(239, 227, 189, 0.12);
  --border-accent:   rgba(239, 227, 189, 0.45);
  --border-input:    rgba(239, 227, 189, 0.22);

  /* SCROOBLIES critter colours — accents that tie the site to the game */
  --c-blom:          #9d8fe0;
  --c-bean:          #4ed6ae;
  --c-clov:          #b3cf49;
  --c-kirs:          #e0706a;   /* the red cherry */
  --c-mort:          #e8b93d;   /* the gold cone   */

  /* Typography */
  --font-display:    'Inkverse', 'Trebuchet MS', sans-serif;
  --font-heading:    'Crayon Libre', 'Comic Sans MS', cursive;
  --font-sans:       'Crayon Libre', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Shape */
  --radius-btn:      4px;
  --radius-card:     6px;
  --radius-input:    4px;

  --transition:      all 0.3s ease;

  --section-v:       100px;
  --section-h:       10%;
}

/* 3. RESET & BASE
   ========================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  /* Crayon Libre runs small; 18px keeps body copy comfortable */
  font-size: 18px;
  font-weight: 400;
  line-height: 1.7;
  overflow-x: hidden;
}

img, video {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol { list-style: none; }

button {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}

input, textarea, select { font-family: inherit; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  line-height: 1.1;
  font-weight: 600;
  color: var(--text);
}

p { line-height: 1.7; }

/* 4. LAYOUT UTILITIES
   ========================================================== */
.section {
  padding: var(--section-v) var(--section-h);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* 5. BUTTONS — Hand-drawn outline with firefly glow
   ========================================================== */
.btn {
  display: inline-block;
  padding: 11px 28px;
  border: 2px solid var(--border-accent);
  /* Uneven radii read as an inked, hand-drawn edge */
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  background: transparent;
  color: var(--text);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 17px;
  letter-spacing: 0.02em;
  transition: var(--transition);
  cursor: pointer;
  position: relative;
  white-space: nowrap;
}

.btn:hover {
  background: rgba(239, 227, 189, 0.08);
  border-color: var(--text);
  color: var(--accent-light);
  box-shadow: 0 0 20px var(--accent-glow);
}

/* Primary CTA — cream filled, lit from within */
.btn-white {
  background: var(--text);
  color: var(--text-dark);
  border-color: var(--text);
  box-shadow: 0 0 18px var(--accent-glow);
}
.btn-white:hover {
  background: #fff8e0;
  border-color: #fff8e0;
  color: var(--text-dark);
  box-shadow: 0 0 34px var(--accent-glow);
}

/* Secondary — gold tinted */
.btn-blue {
  background: rgba(232, 185, 61, 0.12);
  border-color: rgba(232, 185, 61, 0.5);
  color: var(--accent);
}
.btn-blue:hover {
  background: rgba(232, 185, 61, 0.2);
  border-color: var(--accent);
  color: var(--accent-light);
  box-shadow: 0 0 20px rgba(232, 185, 61, 0.3);
}

/* Outline — minimal border */
.btn-outline {
  background: transparent;
  border-color: rgba(239, 227, 189, 0.28);
  color: var(--text);
}
.btn-outline:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.btn-lg {
  padding: 14px 36px;
  font-size: 19px;
}

/* 6. NAVIGATION
   ========================================================== */
.site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99;
  height: 136px;
  transition: background-color 0.4s ease, backdrop-filter 0.4s ease;
}

/* Logged-in admins get WordPress's fixed toolbar over the top of the page.
   Without this the first 32px of the header hides beneath it, which reads as
   the nav sitting too low. */
body.admin-bar .site-header { top: 32px; }

@media screen and (max-width: 782px) {
  body.admin-bar .site-header { top: 46px; }
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 0 var(--section-h);
  gap: 40px;
}

/* Logo */
.nav-logo a { display: block; }

.nav-logo img,
.nav-logo .custom-logo {
  width: 172px;
  height: auto;
  /* Slight warm filter to match palette */
  filter: brightness(0.95) sepia(0.1);
  transition: filter 0.25s ease;
}

/* Firefly-style glow on hover/keyboard focus, so the logo reads as a link. */
.nav-logo a:hover img,
.nav-logo a:focus-visible img,
.nav-logo a:hover .custom-logo,
.nav-logo a:focus-visible .custom-logo {
  filter: brightness(1.08) sepia(0.1)
          drop-shadow(0 0 10px rgba(232, 185, 61, 0.65))
          drop-shadow(0 0 26px rgba(232, 185, 61, 0.35));
}

.nav-logo .site-name {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--accent);
}

/* Desktop menu */
.nav-menu-wrapper {
  flex: 1;
  display: flex;
  justify-content: center;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav-menu .menu-item > a {
  font-family: var(--font-heading);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text);
  padding: 4px 0;
  border-bottom: 2px solid transparent;
  transition: color 0.3s ease, border-color 0.3s ease;
}

.nav-menu .menu-item > a:hover,
.nav-menu .current-menu-item > a {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* Dropdown */
.nav-menu .menu-item-has-children {
  position: relative;
}

.nav-menu .sub-menu {
  display: none;
  position: absolute;
  top: calc(100% + 16px);
  left: -16px;
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  padding: 8px;
  min-width: 180px;
  z-index: 200;
}

.nav-menu .menu-item-has-children:hover .sub-menu {
  display: block;
}

.nav-menu .sub-menu .menu-item > a {
  display: block;
  padding: 10px 14px;
  color: var(--text);
  border: none;
  border-radius: 3px;
  font-size: 13px;
  transition: var(--transition);
}

.nav-menu .sub-menu .menu-item > a:hover {
  background: var(--bg-tertiary);
  color: var(--accent);
}

/* Nav CTA */
.nav-cta .btn {
  padding: 10px 24px;
  font-size: 17px;
}

/* Mobile hamburger */
.mobile-menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 26px;
  height: 18px;
  cursor: pointer;
  z-index: 1001;
}

.mobile-menu-toggle span {
  display: block;
  height: 1px;
  background-color: var(--accent);
  border-radius: 1px;
  transition: var(--transition);
}

.mobile-menu-toggle.is-open span:nth-child(1) { transform: translateY(8.5px) rotate(45deg); }
.mobile-menu-toggle.is-open span:nth-child(2) { opacity: 0; }
.mobile-menu-toggle.is-open span:nth-child(3) { transform: translateY(-8.5px) rotate(-45deg); }

/* Mobile drawer */
.mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  background-color: var(--bg-secondary);
  z-index: 1000;
  flex-direction: column;
  justify-content: center;
  padding: 80px var(--section-h) 40px;
  overflow-y: auto;
  border-right: 1px solid var(--border-subtle);
}

.mobile-menu.is-open { display: flex; }

.mobile-menu .mobile-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mobile-menu .mobile-nav .menu-item > a {
  display: block;
  padding: 14px 0;
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--text);
  border-bottom: 1px solid var(--border-subtle);
  transition: var(--transition);
}

.mobile-menu .mobile-nav .menu-item > a:hover { color: var(--accent); }

.mobile-menu .mobile-nav .sub-menu .menu-item > a {
  font-size: 16px;
  padding-left: 20px;
}

.mobile-cta { margin-top: 40px; }

/* 7. HERO
   ========================================================== */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  padding: var(--section-v) var(--section-h) 140px;
  background-color: var(--bg);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

/* Dark gradient overlay on hero image */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    #17100a 0%,
    rgba(23, 16, 10, 0.7) 40%,
    rgba(23, 16, 10, 0.3) 100%
  );
  z-index: 1;
}

/* Grass silhouette at bottom of hero */
.hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0,120 V85 Q15,8 30,78 Q45,5 60,82 Q75,18 90,75 Q105,3 120,80 Q135,12 150,75 Q165,7 180,80 Q195,20 210,72 Q225,5 240,80 Q255,15 270,75 Q285,8 300,80 Q315,3 330,75 Q345,18 360,80 Q375,6 390,75 Q405,12 420,80 Q435,5 450,72 Q465,20 480,80 Q495,8 510,75 Q525,3 540,80 Q555,15 570,75 Q585,7 600,80 Q615,18 630,72 Q645,5 660,80 Q675,12 690,75 Q705,8 720,80 Q735,3 750,75 Q765,18 780,80 Q795,6 810,75 Q825,12 840,80 Q855,5 870,72 Q885,20 900,80 Q915,8 930,75 Q945,3 960,80 Q975,15 990,75 Q1005,7 1020,80 Q1035,18 1050,72 Q1065,5 1080,80 Q1095,12 1110,75 Q1125,8 1140,80 Q1155,3 1170,75 Q1185,18 1200,80 Q1215,6 1230,75 Q1245,12 1260,80 Q1275,5 1290,72 Q1305,20 1320,80 Q1335,8 1350,75 Q1365,3 1380,80 Q1395,15 1410,75 Q1425,7 1440,80 V120 Z' fill='%2317100a'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  z-index: 3;
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 900px;
  animation: fadeUp 1.2s ease-out forwards;
}

.hero-eyebrow {
  font-family: var(--font-heading);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: 20px;
  opacity: 0.9;
}

.hero h1 {
  font-family: var(--font-display);
  font-size: 80px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--text);
  margin-bottom: 0;
}

.hero-italic {
  font-family: var(--font-heading);
  font-size: 62px;
  font-weight: 400;
  font-style: italic;
  line-height: 1.05;
  display: block;
  color: var(--accent);
  margin-bottom: 40px;
  opacity: 0.95;
}

.hero-cta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* 13. BLOG ARCHIVE
   ========================================================== */
/* Emitted by potions_get_category() on archive, index and single templates. */
.blog-card-category {
  color: var(--accent);
  font-weight: 600;
}

.page-hero {
  padding: 160px var(--section-h) 70px;
  border-bottom: 1px solid var(--border-subtle);
}

.page-hero h1 {
  font-family: var(--font-display);
  font-size: 52px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}

.page-hero .hero-italic {
  font-family: var(--font-heading);
  font-size: 58px;
  font-style: italic;
  color: var(--accent);
  margin-bottom: 0;
}

.page-hero p {
  font-size: 16px;
  color: var(--text-muted);
  max-width: 820px;
  margin-top: 20px;
}

.page-hero .hero-eyebrow {
  font-family: var(--font-heading);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0.7;
  margin-bottom: 20px;
}

.archive-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  padding: var(--section-v) var(--section-h);
}

.archive-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.archive-card-image {
  border-radius: var(--radius-card);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
}

.archive-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
  filter: brightness(0.85);
}

.archive-card:hover .archive-card-image img {
  transform: scale(1.04);
  filter: brightness(1);
}

.archive-card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-heading);
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.archive-card-category { color: var(--accent); font-weight: 600; }

.archive-card h2 {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.02em;
}

.archive-card h2 a:hover {
  color: var(--accent);
  transition: var(--transition);
}

.archive-card p {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.7;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Pagination */
.pagination-wrapper {
  padding: 0 var(--section-h) var(--section-v);
  display: flex;
  justify-content: center;
}

.pagination { display: flex; align-items: center; gap: 8px; }

.pagination a,
.pagination span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border-subtle);
  border-radius: 3px;
  font-family: var(--font-heading);
  font-size: 13px;
  color: var(--text-muted);
  transition: var(--transition);
}

.pagination a:hover,
.pagination .current {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(239, 227, 189, 0.08);
}

/* 14. SINGLE POST
   ========================================================== */
.single-hero {
  padding: 160px var(--section-h) 50px;
}

.single-meta {
  display: flex;
  align-items: center;
  gap: 20px;
  font-family: var(--font-heading);
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 24px;
}

.single-meta .post-category { color: var(--accent); font-weight: 700; }

.single-hero h1 {
  font-family: var(--font-display);
  font-size: 52px;
  font-weight: 700;
  line-height: 1.1;
  max-width: 860px;
  margin-bottom: 0;
  letter-spacing: 0.04em;
}

.single-featured-image {
  padding: 0 var(--section-h) 50px;
}

.single-featured-image img {
  width: 100%;
  max-height: 560px;
  object-fit: cover;
  border-radius: var(--radius-card);
  border: 1px solid var(--border-subtle);
  filter: brightness(0.9);
}

.single-content {
  padding: 0 var(--section-h) var(--section-v);
  max-width: 800px;
}

/* Entry content (blog post body) */
.entry-content h2 { font-family: var(--font-heading); font-size: 28px; margin: 44px 0 18px; color: var(--accent); }
.entry-content h3 { font-family: var(--font-heading); font-size: 22px; margin: 36px 0 14px; }
.entry-content h4 { font-family: var(--font-heading); font-size: 18px; margin: 28px 0 12px; }
.entry-content p  { font-size: 16px; line-height: 1.9; margin-bottom: 22px; color: var(--text); }
.entry-content ul,
.entry-content ol { margin: 0 0 22px 24px; }
.entry-content li { font-size: 16px; line-height: 1.9; color: var(--text); margin-bottom: 8px; }
.entry-content ul li { list-style-type: disc; }
.entry-content ol li { list-style-type: decimal; }
.entry-content a  { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.entry-content a:hover { color: var(--accent-light); }
.entry-content img { border-radius: var(--radius-card); margin: 28px 0; border: 1px solid var(--border-subtle); }
.entry-content blockquote {
  border-left: 3px solid var(--accent);
  padding: 18px 28px;
  margin: 28px 0;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 18px;
  color: var(--text-muted);
  background-color: var(--bg-secondary);
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
}
.entry-content code {
  background-color: var(--bg-tertiary);
  padding: 2px 7px;
  border-radius: 3px;
  font-size: 14px;
  font-family: 'Courier New', monospace;
  color: var(--accent);
}
.entry-content pre {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  padding: 22px;
  border-radius: var(--radius-card);
  overflow-x: auto;
  margin: 28px 0;
}
.entry-content pre code { background: none; padding: 0; }
.entry-content hr { border: none; border-top: 1px solid var(--border-subtle); margin: 44px 0; }

.single-back {
  padding: 0 var(--section-h) 60px;
}

.single-back a {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: var(--transition);
}

.single-back a:hover { gap: 16px; }

/* 15. GENERIC PAGE
   ========================================================== */
.page-content {
  padding: 160px var(--section-h) var(--section-v);
  max-width: 860px;
}

.page-content h1 {
  font-family: var(--font-display);
  font-size: 52px;
  font-weight: 700;
  margin-bottom: 36px;
  letter-spacing: 0.04em;
}

/* 16. CONTACT PAGE
   ========================================================== */
.contact-hero {
  padding: 160px var(--section-h) 70px;
}

.contact-hero h1 {
  font-family: var(--font-display);
  font-size: 68px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0;
}

.contact-hero .hero-italic {
  font-size: 76px;
  color: var(--accent);
  margin-bottom: 0;
}

.contact-section {
  padding: 0 var(--section-h) var(--section-v);
}

.contact-form { max-width: 860px; }

.form-row {
  display: flex;
  gap: 30px;
  margin-bottom: 20px;
}

.form-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-group.full-width { flex: 1 1 100%; }

.form-group label {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 13px 16px;
  background: transparent;
  border: 1px solid var(--border-input);
  border-radius: var(--radius-input);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 15px;
  outline: none;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  resize: vertical;
}

.form-group textarea { min-height: 130px; }

.form-group input:focus,
.form-group textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(232, 185, 61, 0.12);
}

.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--text-muted); }

.form-submit { margin-top: 28px; }

.form-message {
  margin-top: 20px;
  padding: 14px 18px;
  border-radius: var(--radius-card);
  font-size: 14px;
  font-family: var(--font-heading);
  letter-spacing: 0.04em;
}

.form-message.success {
  background: rgba(239, 227, 189, 0.08);
  border: 1px solid var(--border-accent);
  color: var(--accent);
}

.form-message.error {
  background: rgba(180, 60, 60, 0.1);
  border: 1px solid rgba(180, 60, 60, 0.4);
  color: #c87070;
}

/* 16b. CONTACT PAGE — layout
   ========================================================== */
.ct-hero {
  padding: 200px var(--section-h) 90px;
  text-align: center;
  background-color: var(--bg-secondary);
}

body.admin-bar .ct-hero { padding-top: 230px; }

.ct-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(34px, 4.5vw, 56px);
  letter-spacing: 0.02em;
  margin-bottom: 18px;
}

.ct-intro {
  max-width: 56ch;
  margin: 0 auto;
  font-size: 20px;
  color: var(--text);
}

/* The greeting takes the lighter band; the form drops back to the base
   background so the two read as separate zones. */
.ct-main {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 70px;
  align-items: start;
  padding: var(--section-v) var(--section-h);
  background-color: var(--bg);
  border-top: 1px solid var(--border-subtle);
}

.ct-form-wrap .contact-form { max-width: none; }

/* Who to write to about what */
.ct-who { display: grid; gap: 30px; }

.ct-who li {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 20px;
  align-items: start;
}

.ct-who img {
  width: 60px;
  height: 60px;
  object-fit: contain;
  object-position: top center;
  filter: drop-shadow(0 0 14px rgba(239, 227, 189, 0.25));
}

.ct-who h2 {
  font-family: var(--font-heading);
  font-size: 24px;
  margin-bottom: 4px;
}

.ct-who li:nth-child(1) h2 { color: var(--c-bean); }
.ct-who li:nth-child(2) h2 { color: var(--c-blom); }
.ct-who li:nth-child(3) h2 { color: var(--c-clov); }

.ct-who p { color: var(--text-muted); }

.ct-direct {
  margin-top: 36px;
  padding-top: 26px;
  border-top: 1px solid var(--border-subtle);
  color: var(--text-muted);
}

.ct-direct a {
  color: var(--accent);
  border-bottom: 2px solid rgba(232, 185, 61, 0.35);
  transition: var(--transition);
}

.ct-direct a:hover {
  color: var(--accent-light);
  border-bottom-color: var(--accent-light);
}

.ct-note {
  margin-top: 18px;
  font-size: 16px;
  color: var(--text-muted);
  opacity: 0.85;
}

/* The shared form styles size their labels for the old uppercase tracking;
   the crayon face needs a little more room to stay readable. */
.ct-main .form-group label {
  font-size: 16px;
  letter-spacing: 0.02em;
  text-transform: none;
}

.ct-main .form-group input,
.ct-main .form-group textarea { font-size: 17px; }

@media (max-width: 1024px) {
  .ct-main { grid-template-columns: 1fr; gap: 56px; }
}

@media (max-width: 768px) {
  .ct-hero { padding: 150px var(--section-h) 10px; }
  body.admin-bar .ct-hero { padding-top: 190px; }
  .ct-intro { font-size: 18px; }
}

/* 17. FAQ
   ========================================================== */
.faq-section {
  padding: 0 var(--section-h) var(--section-v);
  max-width: 860px;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.faq-item {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--bg-card);
  transition: border-color 0.3s ease;
}

.faq-item[open] {
  background: var(--bg-secondary);
  border-color: var(--border-accent);
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px 40px;
  flex-wrap: wrap;
  text-align: center;
  padding: 20px 24px;
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.03em;
  cursor: pointer;
  list-style: none;
  user-select: none;
  color: var(--text);
  transition: color 0.3s ease;
}

.faq-question::-webkit-details-marker { display: none; }

.faq-item[open] .faq-question { color: var(--accent); }

.faq-question::after {
  content: '›';
  font-size: 20px;
  font-weight: 300;
  transform: rotate(90deg);
  transition: transform 0.3s ease;
  flex-shrink: 0;
  margin-left: 16px;
  color: var(--accent);
  opacity: 0.6;
}

.faq-item[open] .faq-question::after {
  transform: rotate(270deg);
  opacity: 1;
}

.faq-answer {
  padding: 16px 24px 22px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--text-muted);
  border-top: 1px solid var(--border-subtle);
}

/* 18. PORTFOLIO PAGE
   ========================================================== */
.portfolio-section {
  padding: 0 var(--section-h) var(--section-v);
}

.portfolio-full-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.portfolio-card {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  transition: border-color 0.3s ease;
}

.portfolio-card:hover { border-color: var(--border-accent); }

.portfolio-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
  filter: brightness(0.85) sepia(0.05);
}

.portfolio-card:hover img {
  transform: scale(1.04);
  filter: brightness(1) sepia(0);
}

.portfolio-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(23, 16, 10, 0.9) 0%, transparent 60%);
  display: flex;
  align-items: flex-end;
  padding: 28px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.portfolio-card:hover .portfolio-card-overlay { opacity: 1; }

.portfolio-card-info h3 {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--text);
}

.portfolio-card-info p {
  font-size: 13px;
  color: var(--text-muted);
}

/* 19. ABOUT PAGE
   ========================================================== */
.about-section { padding: 0 var(--section-h) var(--section-v); }

.about-section .about-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

.about-text h2 {
  font-family: var(--font-heading);
  font-size: 36px;
  font-weight: 600;
  margin-bottom: 22px;
  letter-spacing: 0.03em;
}

.about-text p {
  font-size: 16px;
  color: var(--text-muted);
  line-height: 1.9;
  margin-bottom: 20px;
}

.about-image {
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  position: sticky;
  top: 120px;
}

/* 19b. ABOUT PAGE
   ========================================================== */
.ab-hero {
  padding: 0 var(--section-h) var(--section-v);
  text-align: center;
  background-color: var(--bg);
}

body.admin-bar .ab-band { padding-top: 240px; }

.ab-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.1;
  letter-spacing: 0.02em;
  margin-bottom: 20px;
}

.ab-lede {
  font-size: 20px;
  max-width: 56ch;
  margin: 0 auto;
  color: var(--text);
}

.ab-band {
  background-color: var(--bg);
  padding: 210px var(--section-h) 50px;
}

.ab-band img {
  width: 100%;
  max-width: 820px;
  height: auto;
  display: block;
  margin: 0 auto;
  border: 3px solid var(--border-accent);
  border-radius: 14px;
  box-shadow: 0 0 50px rgba(239, 227, 189, 0.12);
}

/* --- The team --- */
.ab-team {
  padding: var(--section-v) var(--section-h);
  text-align: center;
  background-color: var(--bg-secondary);
  border-top: 1px solid var(--border-subtle);
}

.ab-team h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 40px);
  letter-spacing: 0.02em;
}

.ab-team-lede {
  max-width: 54ch;
  margin: 14px auto 0;
  color: var(--text-muted);
}

.ab-people {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 34px;
  margin-top: 64px;
}

.ab-person {
  padding: 0 12px 28px;
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  transition: transform 0.35s ease, background-color 0.35s ease;
}

.ab-person-art {
  height: 230px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin-bottom: 18px;
  border-bottom: 2px solid var(--border-subtle);
}

.ab-person-art img {
  max-height: 210px;
  width: auto;
  transition: transform 0.35s ease, filter 0.35s ease;
}

.ab-person h3 {
  font-family: var(--font-heading);
  font-size: 27px;
  margin-bottom: 2px;
}

.ab-role {
  font-family: var(--font-heading);
  font-size: 17px;
  color: var(--accent);
  margin-bottom: 10px;
}

.ab-line { font-size: 16px; color: var(--text-muted); }

.ab-person:hover { transform: translateY(-6px); background-color: rgba(239, 227, 189, 0.04); }
.ab-person:hover .ab-person-art img { transform: translateY(-8px) scale(1.04); }

/* Each SCROOBLY glows in the colour its owner drew it */
.ab-felix:hover   .ab-person-art img { filter: drop-shadow(0 0 24px #7ecbff); }
.ab-artjoms:hover .ab-person-art img { filter: drop-shadow(0 0 24px #ff5f7e); }
.ab-hanna:hover   .ab-person-art img { filter: drop-shadow(0 0 24px #dbe45a); }
.ab-philipp:hover .ab-person-art img { filter: drop-shadow(0 0 24px #9d8fe0); }

/* --- Story --- */
.ab-story {
  display: grid;
  grid-template-columns: 1fr 0.9fr;
  align-items: center;
  gap: 70px;
  padding: var(--section-v) var(--section-h);
  background-color: var(--bg);
  border-top: 1px solid var(--border-subtle);
}

.ab-story-text { display: grid; gap: 40px; }

.ab-story h2 {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.6vw, 32px);
  letter-spacing: 0.02em;
  margin-bottom: 12px;
}

.ab-story p { color: var(--text-muted); max-width: 52ch; }

.ab-photo {
  width: 100%;
  height: auto;
  border: 3px solid var(--border-accent);
  border-radius: 16px;
  box-shadow: 0 0 44px rgba(239, 227, 189, 0.1);
  transform: rotate(-0.8deg);
}

/* --- Responsive --- */
@media (max-width: 1024px) {
  .ab-band { padding-top: 180px; }
  .ab-people { grid-template-columns: repeat(2, 1fr); row-gap: 46px; }
  .ab-story { grid-template-columns: 1fr; gap: 44px; }
  .ab-story p { margin: 0 auto; }
  .ab-story-text { text-align: center; }
}

@media (max-width: 768px) {
  .ab-band { padding-top: 150px; }
  body.admin-bar .ab-band { padding-top: 190px; }
  .ab-lede { font-size: 18px; }
  .ab-person-art { height: 180px; }
  .ab-person-art img { max-height: 165px; }
}

/* 20. 404
   ========================================================== */
.not-found {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px var(--section-h);
}

.not-found-number {
  font-family: var(--font-display);
  font-size: 160px;
  font-weight: 900;
  line-height: 1;
  color: var(--bg-secondary);
  margin-bottom: 0;
  letter-spacing: 0.08em;
}

.not-found h1 {
  font-family: var(--font-heading);
  font-size: 36px;
  font-weight: 600;
  margin-bottom: 16px;
  color: var(--text);
}

.not-found p {
  font-size: 16px;
  color: var(--text-muted);
  margin-bottom: 36px;
  max-width: 480px;
}

/* 21. FOOTER
   ========================================================== */
.site-footer {
  background-color: var(--bg-secondary);
  border-top: 1px solid var(--border-subtle);
  position: relative;
}

/* Grass at top of footer */
.site-footer::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 100px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0,0 V35 Q20,90 40,30 Q60,85 80,25 Q100,80 120,30 Q140,90 160,25 Q180,75 200,32 Q220,88 240,25 Q260,80 280,30 Q300,90 320,25 Q340,80 360,32 Q380,90 400,25 Q420,80 440,30 Q460,90 480,25 Q500,75 520,32 Q540,88 560,25 Q580,80 600,30 Q620,90 640,25 Q660,80 680,32 Q700,88 720,25 Q740,80 760,30 Q780,90 800,25 Q820,75 840,32 Q860,88 880,25 Q900,80 920,30 Q940,90 960,25 Q980,80 1000,32 Q1020,88 1040,25 Q1060,80 1080,30 Q1100,90 1120,25 Q1140,75 1160,32 Q1180,88 1200,25 Q1220,80 1240,30 Q1260,90 1280,25 Q1300,80 1320,32 Q1340,88 1360,25 Q1380,80 1400,30 Q1420,90 1440,25 V0 Z' fill='%2317100a'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  pointer-events: none;
  z-index: 1;
}

.footer-main {
  padding: 120px var(--section-h) 0;
  position: relative;
  z-index: 2;
}

.footer-main { text-align: center; }

.footer-cta-heading {
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.05em;
  margin: 0 auto 26px;
  max-width: 820px;
  color: var(--text);
}

.footer-cta-heading em {
  font-style: italic;
  color: var(--accent);
  font-family: var(--font-heading);
}

/* Contact address — answers the question the heading just asked, so it sits
   between the heading and the link columns. */
.footer-email {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 28px;
  color: var(--accent);
  margin-bottom: 60px;
  padding-bottom: 4px;
  border-bottom: 2px solid rgba(232, 185, 61, 0.35);
  transition: var(--transition);
}

.footer-email:hover {
  color: var(--accent-light);
  border-bottom-color: var(--accent-light);
  text-shadow: 0 0 18px rgba(232, 185, 61, 0.45);
}

/* Social row — inked circles that light up like the fireflies on hover */
.social-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin: -34px 0 56px;
}

.social-link {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 2px solid var(--border-input);
  /* Slightly irregular circle, in keeping with the hand-drawn buttons */
  border-radius: 52% 48% 47% 53% / 49% 52% 48% 51%;
  color: var(--text);
  transition: var(--transition);
}

.social-link svg {
  width: 21px;
  height: 21px;
  fill: currentColor;
  display: block;
}

.social-link:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(232, 185, 61, 0.1);
  box-shadow: 0 0 18px rgba(232, 185, 61, 0.3);
  transform: translateY(-2px);
}

.social-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.footer-grid {
  display: grid;
  /* Columns are conditional (address/email/social may be unset), so size them
     to content rather than reserving four fixed slots. */
  grid-template-columns: repeat(auto-fit, minmax(200px, max-content));
  justify-content: center;
  gap: 30px 70px;
  padding-bottom: 70px;
  border-bottom: 1px solid var(--border-subtle);
}

.footer-col h4 {
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0.6;
  margin-bottom: 18px;
}

.footer-col p,
.footer-col a {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.9;
  display: block;
  transition: var(--transition);
}

.footer-col a:hover {
  color: var(--accent);
}

.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: 6px;
}



.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px 40px;
  flex-wrap: wrap;
  text-align: center;
  padding: 20px var(--section-h);
  border-top: 1px solid var(--border-subtle);
  font-family: var(--font-heading);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  position: relative;
  z-index: 2;
}

/* Footer nav menu — one row, divided by hairlines.
   The extra ul/a in the selectors outweighs the generic .footer-col rules,
   which would otherwise stack the items vertically again. */
ul.footer-nav {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0;
}

.footer-nav .menu-item > a,
.footer-col .footer-nav a {
  display: inline-block;
  font-size: 17px;
  color: var(--text);
  padding: 2px 22px;
  transition: var(--transition);
}

/* The line between links belongs to every item after the first, so wrapped
   rows never start with a stray divider. */
.footer-nav .menu-item + .menu-item {
  border-left: 1px solid var(--border-subtle);
}

.footer-nav .menu-item > a:hover { color: var(--accent); }

/* 21a. SCROOBLIES PAGE — cast-led game page
   ========================================================== */

/* --- Hero: the game, moving --- */
.sg-hero {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: 60px;
  padding: 220px var(--section-h) 110px;
  background:
    linear-gradient(to bottom, rgba(23, 16, 10, 0.55), rgba(23, 16, 10, 0.9) 70%, var(--bg)),
    url("../img/garden-bg.jpg") center 30% / cover no-repeat;
  overflow: hidden;
}

body.admin-bar .sg-hero { padding-top: 250px; }

.sg-hero-copy { position: relative; z-index: 2; }

.sg-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(34px, 4vw, 54px);
  line-height: 1.1;
  letter-spacing: 0.02em;
  margin-bottom: 20px;
}

.sg-lede {
  font-size: 21px;
  max-width: 44ch;
  color: var(--text);
  margin-bottom: 32px;
}

.sg-cta { display: flex; flex-wrap: wrap; gap: 16px; }

/* Phone showing the gameplay loop */
.sg-phone {
  position: relative;
  z-index: 2;
  justify-self: center;
  width: min(320px, 78vw);
  border: 3px solid var(--border-accent);
  border-radius: 30px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 0 60px rgba(239, 227, 189, 0.16);
  transform: rotate(1.5deg);
}

.sg-phone img { width: 100%; height: auto; }
.sg-phone-still { display: none; }

/* An animated WebP cannot be paused by CSS, so swap in the still instead. */
@media (prefers-reduced-motion: reduce) {
  .sg-phone-motion { display: none; }
  .sg-phone-still  { display: block; }
  .firefly         { animation: none; }
  .sg-pest-row li  { animation: none; }
}

/* --- Shared section furniture --- */
.sg-cast,
.sg-rules,
.sg-pests,
.sg-trailer { padding: var(--section-v) var(--section-h); }

.sg-cast h2,
.sg-rules h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 40px);
  letter-spacing: 0.02em;
  text-align: center;
}

.sg-section-lede {
  text-align: center;
  max-width: 56ch;
  margin: 14px auto 0;
  color: var(--text-muted);
}

/* --- The cast --- */
.sg-cast { background-color: var(--bg-secondary); }

.sg-cast-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  margin-top: 60px;
}

.sg-cast-member {
  text-align: center;
  padding: 0 10px 26px;
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  transition: transform 0.35s ease, background-color 0.35s ease;
}

/* Each one stands on its own patch of ground */
.sg-cast-art {
  height: 150px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin-bottom: 14px;
  border-bottom: 2px solid var(--border-subtle);
}

.sg-cast-art img {
  max-height: 130px;
  width: auto;
  transition: transform 0.35s ease, filter 0.35s ease;
}

.sg-cast-member h3 {
  font-family: var(--font-heading);
  font-size: 25px;
  margin-bottom: 6px;
}

.sg-cast-member p { font-size: 16px; color: var(--text-muted); }

.sg-cast-member:hover { transform: translateY(-6px); background-color: rgba(239, 227, 189, 0.04); }
.sg-cast-member:hover .sg-cast-art img { transform: translateY(-8px) scale(1.06); }

/* Colour each name to its own art */
.sg-c-bean h3 { color: var(--c-bean); }
.sg-c-blom h3 { color: var(--c-blom); }
.sg-c-clov h3 { color: var(--c-clov); }
.sg-c-kirs h3 { color: var(--c-kirs); }
.sg-c-mort h3 { color: var(--c-mort); }

.sg-c-bean:hover .sg-cast-art img { filter: drop-shadow(0 0 22px var(--c-bean)); }
.sg-c-blom:hover .sg-cast-art img { filter: drop-shadow(0 0 22px var(--c-blom)); }
.sg-c-clov:hover .sg-cast-art img { filter: drop-shadow(0 0 22px var(--c-clov)); }
.sg-c-kirs:hover .sg-cast-art img { filter: drop-shadow(0 0 22px var(--c-kirs)); }
.sg-c-mort:hover .sg-cast-art img { filter: drop-shadow(0 0 22px var(--c-mort)); }

/* --- How it plays --- */
.sg-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px;
  margin-top: 56px;
}

.sg-step {
  position: relative;
  padding: 34px 28px 28px;
  background-color: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
}

.sg-step-n {
  position: absolute;
  top: -22px;
  left: 26px;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--text-dark);
  background: var(--accent);
  border-radius: 52% 48% 47% 53% / 49% 52% 48% 51%;
  box-shadow: 0 0 20px rgba(232, 185, 61, 0.35);
}

.sg-step h3 {
  font-family: var(--font-heading);
  font-size: 26px;
  margin-bottom: 8px;
  color: var(--accent-light);
}

.sg-step p { color: var(--text-muted); }

/* --- The parasites --- */
.sg-pests {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 60px;
  background-color: #120c07;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}

.sg-pests h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 40px);
  letter-spacing: 0.02em;
  margin-bottom: 16px;
}

.sg-pests p { color: var(--text-muted); max-width: 46ch; }

.sg-pest-row {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 26px;
  flex-wrap: wrap;
}

/* Each drifts on its own offset, the way they do in game */
.sg-pest-row li {
  animation: pest-drift 5s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.6s);
}

.sg-pest-row img {
  width: 96px;
  height: auto;
  filter: drop-shadow(0 0 16px rgba(224, 112, 106, 0.25));
}

@keyframes pest-drift {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}





/* --- Trailer --- */
/* Extra room above so the video reads as its own beat rather than tacked
   onto the parasites section. */
.sg-trailer { padding-top: calc(var(--section-v) + 40px); }

.sg-trailer-frame {
  position: relative;
  max-width: 980px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  border: 3px solid var(--border-accent);
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 0 50px rgba(239, 227, 189, 0.12);
}

.sg-trailer-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}



/* --- Responsive --- */
@media (max-width: 1024px) {
  .sg-hero  { grid-template-columns: 1fr; gap: 44px; text-align: center; padding-top: 180px; }
  .sg-cta   { justify-content: center; }
  .sg-lede  { margin-left: auto; margin-right: auto; }
  .sg-cast-row { grid-template-columns: repeat(3, 1fr); row-gap: 40px; }
  .sg-steps { grid-template-columns: 1fr; gap: 44px; }
  .sg-pests { grid-template-columns: 1fr; gap: 40px; text-align: center; }
  .sg-pests p { margin: 0 auto; }
  
  
}

@media (max-width: 768px) {
  .sg-hero { padding: 150px var(--section-h) 70px; }
  body.admin-bar .sg-hero { padding-top: 190px; }
  .sg-lede { font-size: 19px; }
  .sg-cast-row { grid-template-columns: repeat(2, 1fr); }
  .sg-cast-art { height: 120px; }
  .sg-cast-art img { max-height: 104px; }
  .sg-pest-row img { width: 72px; }
}

/* 21b. HOMEPAGE — GAME-LED SECTIONS
   Firefly garden treatment: chalk lettering, glowing accents, critter art.
   ========================================================== */

/* --- Hero: game logo front and centre --- */
.hero-home {
  align-items: center;
  text-align: center;
  padding: 150px var(--section-h) 150px;
  background-image: url('../img/garden-bg.jpg');
  background-position: center 20%;
}

.hero-home .hero-content {
  max-width: 820px;
  margin: 0 auto;
}

.hero-game-logo {
  width: min(620px, 86vw);
  margin: 0 auto 10px;
  filter: drop-shadow(0 0 30px rgba(239, 227, 189, 0.22));
}

.hero-tagline {
  font-size: 21px;
  max-width: 46ch;
  margin: 0 auto 34px;
  color: var(--text);
}

.hero-tagline strong {
  color: var(--accent);
  font-weight: 400;
}

.hero-home .hero-cta { justify-content: center; }

.hero-studio-line {
  margin-top: 44px;
  font-size: 17px;
  color: var(--text-muted);
}

/* Fireflies — drifting motes of light over the hero */
.firefly {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--text);
  box-shadow: 0 0 9px 3px var(--accent-glow);
  z-index: 2;
  opacity: 0.6;
  animation: firefly-drift 7s ease-in-out infinite;
  pointer-events: none;
}

@keyframes firefly-drift {
  0%, 100% { transform: translate(0, 0);      opacity: 0.2; }
  50%      { transform: translate(14px, -22px); opacity: 0.85; }
}



/* --- Game feature: SCROOBLIES pitch --- */
.section-game {
  display: grid;
  /* Fixed-width image column: a fractional one left the small phone shot
     marooned in the middle of a very wide track. */
  grid-template-columns: 1fr minmax(300px, 380px);
  gap: 60px;
  align-items: center;
  padding: var(--section-v) var(--section-h);
  background-color: var(--bg);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}

/* Cap the copy so the heading and paragraph share one measure, instead of a
   full-width heading sitting above a narrow paragraph. */
.game-copy { max-width: 620px; }

.section-game h2 {
  font-family: var(--font-display);
  font-size: 44px;
  line-height: 1.1;
  letter-spacing: 0.02em;
  margin-bottom: 20px;
}

.section-game p { margin-bottom: 18px; }

.game-quote {
  display: inline-block;
  font-size: 20px;
  color: var(--c-bean);
  margin-bottom: 26px;
  text-shadow: 0 0 16px rgba(78, 214, 174, 0.3);
}

.game-shot {
  justify-self: center;
  width: min(360px, 82vw);
  border: 3px solid var(--border-accent);
  border-radius: 26px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 0 44px rgba(239, 227, 189, 0.12);
  transform: rotate(1.5deg);
}

/* --- Values cards, each perched on by a critter --- */
.section-values {
  padding: var(--section-v) var(--section-h);
  background-color: var(--bg-secondary);
}

.section-values h2,
.section-team h2 {
  font-family: var(--font-display);
  font-size: 40px;
  letter-spacing: 0.02em;
  margin-bottom: 14px;
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 56px;
}

.value-card {
  position: relative;
  background-color: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  padding: 34px 30px 30px;
}

.value-card h3 {
  font-family: var(--font-heading);
  font-size: 26px;
  margin-bottom: 10px;
}

.value-card p { color: var(--text-muted); }

/* Critter peeks over the top-right corner of each card */
.value-critter {
  position: absolute;
  top: -38px;
  right: 22px;
  /* The critters have very different proportions (the clover is wide and
     short, the flower tall and narrow). Fitting each inside the same square
     box makes their longest side match, so none looks oversized. */
  width: 66px;
  height: 66px;
  object-fit: contain;
  object-position: bottom center;
  filter: drop-shadow(0 0 14px rgba(239, 227, 189, 0.28));
}

.value-card:nth-child(1) h3 { color: var(--c-bean); }
.value-card:nth-child(2) h3 { color: var(--c-blom); }
.value-card:nth-child(3) h3 { color: var(--c-clov); }

/* --- Team --- */
.section-team {
  padding: var(--section-v) var(--section-h);
  text-align: center;
  background-color: var(--bg);
}

.section-team p {
  max-width: 60ch;
  margin: 0 auto;
  color: var(--text-muted);
}

.team-photo {
  margin: 36px auto 0;
  max-width: 780px;
  width: 100%;
  border: 3px solid var(--border-accent);
  border-radius: 16px;
  box-shadow: 0 0 44px rgba(239, 227, 189, 0.1);
  transform: rotate(-0.6deg);
}

/* --- Responsive --- */
@media (max-width: 1024px) {
  .section-game { grid-template-columns: 1fr; gap: 44px; }
  .section-game h2 { font-size: 36px; }
  .values-grid { grid-template-columns: 1fr; gap: 58px; }
}

@media (max-width: 768px) {
  .hero-home { padding: 130px var(--section-h) 110px; }
  .hero-tagline { font-size: 19px; }
  .section-game h2 { font-size: 30px; }
  .section-values h2,
  .section-team h2 { font-size: 30px; }
}

/* 22. SCROLL ANIMATIONS
   ========================================================== */
.anim-up,
.anim-left,
.anim-right {
  opacity: 0;
  transition: opacity 1s ease, transform 1s ease;
}

.anim-up    { transform: translateY(50px); }
.anim-left  { transform: translateX(-50px); }
.anim-right { transform: translateX(50px); }

.anim-up.in-view,
.anim-left.in-view,
.anim-right.in-view {
  opacity: 1;
  transform: translate(0);
}

/* 23. KEYFRAMES
   ========================================================== */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* 24. WORDPRESS BLOCK ALIGNMENT
   ========================================================== */
.alignleft  { float: left; margin: 0 24px 16px 0; }
.alignright { float: right; margin: 0 0 16px 24px; }
.aligncenter { text-align: center; margin: 0 auto 16px; }
.alignwide  { width: 100%; }
.alignfull  { width: 100vw; margin-left: calc(50% - 50vw); }

/* 25. RESPONSIVE — TABLET (max 1024px)
   ========================================================== */
@media (max-width: 1024px) {
  :root { --section-h: 6%; }

  .hero h1           { font-size: 58px; }
  .hero-italic       { font-size: 64px; }
  .footer-grid       { grid-template-columns: repeat(2, 1fr); gap: 36px; }
  .about-section .about-layout { grid-template-columns: 1fr; gap: 40px; }
  .portfolio-full-grid { grid-template-columns: 1fr; }
  .about-image { position: static; }
  .contact-hero h1   { font-size: 50px; }
  .contact-hero .hero-italic { font-size: 56px; }
}

/* 26. RESPONSIVE — MOBILE (max 768px)
   ========================================================== */
@media (max-width: 768px) {
  :root {
    --section-v: 60px;
    --section-h: 5%;
  }

  .nav-menu-wrapper,
  .nav-cta          { display: none; }
  .mobile-menu-toggle { display: flex; }
  .site-header      { height: 104px; }
  .nav-logo img,
  .nav-logo .custom-logo { width: 132px; }

  .hero             { padding-bottom: 110px; }
  .hero h1          { font-size: 36px; }
  .hero-italic      { font-size: 44px; }
  .hero-cta         { flex-direction: column; align-items: flex-start; }
  .hero-cta .btn    { width: 100%; text-align: center; }


  .archive-grid     { grid-template-columns: 1fr; }
  .stat-number      { font-size: 38px; }
  .stat-suffix      { font-size: 26px; }

  .form-row         { flex-direction: column; gap: 16px; }

  .page-hero h1,
  .contact-hero h1  { font-size: 32px; }
  .page-hero .hero-italic,
  .contact-hero .hero-italic { font-size: 38px; }
  .single-hero h1   { font-size: 28px; }

  .footer-grid         { grid-template-columns: 1fr; gap: 28px; }
  .footer-cta-heading  { font-size: 26px; }
  /* Long addresses would otherwise overflow a narrow screen. */
  .footer-email        { font-size: 20px; margin-bottom: 40px; word-break: break-all; }
  .social-row          { margin: -24px 0 40px; gap: 12px; }
  .footer-bottom       { flex-direction: column; gap: 10px; text-align: center; }
  .not-found-number    { font-size: 90px; }
  .not-found h1        { font-size: 26px; }
}

@media (max-width: 480px) {
  .hero h1     { font-size: 28px; }
  .hero-italic { font-size: 34px; }
}

/* 27. DOWNLOAD PAGE
   ========================================================== */
.dl-hero {
  padding: 200px var(--section-h) 40px;
  text-align: center;
}

body.admin-bar .dl-hero { padding-top: 230px; }

.dl-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(34px, 4.5vw, 56px);
  letter-spacing: 0.02em;
  color: var(--accent);
}

.dl-lede {
  max-width: 52ch;
  margin: 18px auto 0;
  font-size: 20px;
  color: var(--text-muted);
}

.dl-platforms {
  padding: 60px var(--section-h) var(--section-v);
}

.dl-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  max-width: 820px;
  margin: 40px auto 0;
  list-style: none;
  padding: 0;
}

/* Same hand-drawn card as the homepage values, plus room for a button. */
.dl-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background-color: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  padding: 34px 30px 30px;
}

.dl-card h2 {
  font-family: var(--font-heading);
  font-size: 26px;
  margin-bottom: 10px;
}

.dl-card p {
  color: var(--text-muted);
  flex-grow: 1;          /* pushes the button/badge to a shared baseline */
  margin-bottom: 22px;
}

/* Heading colour matches the critter perched on each card. */
.dl-ios h2     { color: var(--c-kirs); }
.dl-android h2 { color: var(--c-mort); }

/* Critter peeks over the top-right corner, exactly like the value cards. */
.dl-critter {
  position: absolute;
  top: -38px;
  right: 22px;
  width: 66px;
  height: 66px;
  object-fit: contain;
  object-position: bottom center;
  filter: drop-shadow(0 0 14px rgba(239, 227, 189, 0.28));
}

/* Stores that aren't open yet get a quiet badge instead of a button. */
.dl-soon {
  display: inline-block;
  padding: 10px 22px;
  border: 1px dashed var(--text-muted);
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  font-family: var(--font-heading);
  font-size: 17px;
  color: var(--text-muted);
}

/* Small "how do I install this?" link under the iOS button */
.dl-guide-link {
  margin-top: 12px;
  font-size: 14px;
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.dl-guide-link:hover { color: var(--accent); }

/* --- Install guide: three steps on the lighter band --- */
.dl-guide {
  padding: var(--section-v) var(--section-h);
  background-color: var(--bg-secondary);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  text-align: center;
}

.dl-guide h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 40px);
  letter-spacing: 0.02em;
}

.dl-guide-lede {
  color: var(--text-muted);
  margin: 10px 0 44px;
}

.dl-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  max-width: 1080px;
  margin: 0 auto;
  list-style: none;
  padding: 0;
  text-align: left;
}

.dl-step {
  position: relative;
  background-color: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  padding: 34px 30px 30px;
}

.dl-step-n {
  position: absolute;
  top: -20px;
  left: 24px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  background-color: var(--accent);
  border-radius: 50%;
  color: var(--bg);
  font-family: var(--font-heading);
  font-size: 19px;
  font-weight: 700;
}

.dl-step h3 {
  font-family: var(--font-heading);
  font-size: 22px;
  margin-bottom: 10px;
}

.dl-step p { color: var(--text-muted); }

/* Feedback note — its own strip so the page still ends on the darker brown */
.dl-outro {
  padding: 60px var(--section-h) var(--section-v);
  text-align: center;
}

.dl-note {
  margin: 0 auto;
  max-width: 60ch;
  text-align: center;
  color: var(--text-muted);
}

.dl-note a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.dl-note a:hover { color: var(--text); }

@media (max-width: 1024px) {
  .dl-grid { grid-template-columns: 1fr; max-width: 520px; }
  /* Cards stack, so each needs its own headroom for the peeking critter. */
  .dl-grid { row-gap: 56px; }
}

@media (max-width: 900px) {
  /* Stacked steps need headroom for their floating number badges. */
  .dl-steps { grid-template-columns: 1fr; max-width: 520px; row-gap: 40px; }
}

@media (max-width: 768px) {
  .dl-lede { font-size: 18px; }
}

/* 28. PRESS KIT PAGE
   Deliberately plainer than the rest of the site — this page serves
   journalists on a deadline, so facts and files outrank atmosphere.
   ========================================================== */
.pk-hero {
  padding: 200px var(--section-h) 70px;
  text-align: center;
  background-color: var(--bg-secondary);
}

body.admin-bar .pk-hero { padding-top: 230px; }

.pk-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(34px, 4.5vw, 56px);
  letter-spacing: 0.02em;
}

.pk-lede {
  max-width: 62ch;
  margin: 18px auto 30px;
  font-size: 19px;
  color: var(--text-muted);
}

.pk-contact-line { margin-top: 22px; color: var(--text-muted); }

.pk-contact-line a,
.pk-factsheet a,
.pk-hint a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pk-contact-line a:hover,
.pk-factsheet a:hover,
.pk-hint a:hover { color: var(--text); }

/* --- Factsheet + descriptions --- */
.pk-facts {
  display: grid;
  grid-template-columns: minmax(260px, 340px) 1fr;
  gap: 60px;
  align-items: start;
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--section-v) var(--section-h);
}

.pk-factsheet {
  background-color: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  padding: 30px 28px;
}

.pk-factsheet h2,
.pk-descriptions h2,
.pk-media h2,
.pk-assets h2 {
  font-family: var(--font-heading);
  font-size: 26px;
  margin-bottom: 16px;
}

.pk-factsheet dt {
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 14px;
}

.pk-factsheet dd { margin: 2px 0 0; }

.pk-descriptions h2 + .pk-descriptions h2,
.pk-descriptions > h2:not(:first-child) { margin-top: 36px; }

.pk-descriptions p { margin-bottom: 18px; }

.pk-pitch { font-size: 19px; }

.pk-team {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 6px;
  color: var(--text-muted);
}

.pk-team strong { color: var(--text); }

/* --- Media galleries --- */
.pk-media {
  padding: var(--section-v) var(--section-h);
  background-color: var(--bg-secondary);
  text-align: center;
}

.pk-assets {
  padding: var(--section-v) var(--section-h);
  text-align: center;
}

.pk-hint { color: var(--text-muted); margin-bottom: 28px; }

.pk-empty { color: var(--text-muted); }

.pk-grid {
  display: grid;
  gap: 22px;
  max-width: 1080px;
  margin: 0 auto;
  list-style: none;
  padding: 0;
}

.pk-grid-screens { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.pk-grid-art     { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); margin-bottom: 40px; }

.pk-grid a {
  display: block;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  transition: border-color 0.2s ease;
}

.pk-grid a:hover,
.pk-grid a:focus-visible { border-color: var(--accent); }

.pk-grid img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.pk-trailer {
  position: relative;
  max-width: 880px;
  margin: 0 auto 18px;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  overflow: hidden;
}

.pk-trailer iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 900px) {
  .pk-facts { grid-template-columns: 1fr; gap: 44px; }
}

/* 29. NEWS PAGE ADDITIONS
   ========================================================== */
.archive-empty {
  grid-column: 1 / -1;
  padding: 60px 0;
  color: var(--text-muted);
  text-align: center;
}

/* 29b. SCROOBLIES FAQ
   ========================================================== */
.sg-faq {
  padding: var(--section-v) var(--section-h);
  background-color: var(--bg-secondary);
  border-top: 1px solid var(--border-subtle);
}

.sg-faq h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 40px);
  letter-spacing: 0.02em;
  text-align: center;
  margin-bottom: 44px;
}

.sg-faq-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  max-width: 1080px;
  margin: 0 auto;
}

.sg-faq-item {
  background-color: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  padding: 28px 30px;
}

.sg-faq-item dt {
  font-family: var(--font-heading);
  font-size: 21px;
  color: var(--accent);
  margin-bottom: 10px;
}

.sg-faq-item dd {
  margin: 0;
  color: var(--text-muted);
}

@media (max-width: 820px) {
  .sg-faq-list { grid-template-columns: 1fr; max-width: 560px; }
}

/* 30. FOOTER NEWSLETTER SIGNUP
   ========================================================== */
.newsletter {
  max-width: 520px;
  margin: 0 auto 60px;
  text-align: center;
}

.newsletter-heading {
  font-family: var(--font-heading);
  font-size: 24px;
  margin-bottom: 8px;
}

.newsletter-sub {
  color: var(--text-muted);
  margin-bottom: 22px;
}

.newsletter-row {
  display: flex;
  gap: 12px;
}

.newsletter-row input[type='email'] {
  flex: 1;
  min-width: 0;
  padding: 12px 18px;
  background-color: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
}

.newsletter-row input[type='email']:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.newsletter-consent {
  display: flex;
  gap: 10px;
  align-items: baseline;
  justify-content: center;
  margin-top: 16px;
  font-size: 14px;
  color: var(--text-muted);
  cursor: pointer;
  text-align: left;
}

.newsletter-consent a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.newsletter-consent a:hover { color: var(--text); }

/* Honeypot — parked far off screen, not display:none, so naive bots still
   fill it in while screen readers skip it via aria-hidden. */
.nl-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

#newsletter-message { display: none; margin-top: 14px; }

@media (max-width: 560px) {
  .newsletter-row { flex-direction: column; }
  .newsletter-row .btn { width: 100%; }
}

/* Nudge toward the game at the foot of every post */
.single-cta {
  margin: 0 var(--section-h);
  max-width: 800px;
  padding: 34px 0 44px;
  border-top: 1px solid var(--border-subtle);
}

.single-cta p {
  color: var(--text-muted);
  margin-bottom: 18px;
}