/* =====================================================================
   Five Lakes Studio — design system
   Translated from docs/"Five Lakes Studio Design.pdf"
   Brand: lighthouse mark · Beacon Red / Beam Gold / Lake Blue
   Type: Fredoka (display) · Nunito (body) · Space Mono (mono/eyebrow)
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Nunito:ital,wght@0,400;0,600;0,700;1,400&family=Space+Mono:wght@400;700&display=swap');

:root {
  color-scheme: light;

  /* --- Brand core --- */
  --beacon-red: #da3a34;
  --beacon-red-dark: #b92e29;
  --beam-gold: #edbe3c;
  --beam-gold-dark: #d6a52a;
  --lake-blue: #3b7cb5;

  /* --- Five Lakes accents (one hue per Great Lake) --- */
  --lake-superior: #3b7cb5;
  --lake-michigan: #2aa1b8;
  --lake-huron:    #4fae7b;
  --lake-erie:     #e7b93e;
  --lake-ontario:  #e4623c;

  /* --- Ink (text & structure), warm dark scale --- */
  --ink-900: #17212b;
  --ink-800: #212e3b;
  --ink-700: #33404e;
  --ink-500: #5b6775;
  --ink-400: #7c8794;
  --ink-300: #a7b0bb;
  --ink-200: #ccd3da;
  --ink-100: #e4e9ee;

  /* --- Paper (surfaces), warm off-white --- */
  --paper-0:   #ffffff;
  --paper-50:  #fbf9f5;
  --paper-100: #f5f1ea;
  --paper-200: #ebe5da;

  /* --- Semantic status --- */
  --success: #4fae7b;
  --warning: #edbe3c;
  --danger:  #da3a34;
  --info:    #2aa1b8;

  /* --- Spacing scale (4px grid) --- */
  --space-2: 8px;   --space-3: 12px;  --space-4: 16px;  --space-6: 24px;
  --space-8: 32px;  --space-12: 48px; --space-16: 64px; --space-24: 96px;

  /* --- Corner radii (rounded, tile-friendly) --- */
  --radius-xs: 6px; --radius-sm: 10px; --radius-md: 16px;
  --radius-lg: 24px; --radius-pill: 999px;

  /* --- Shadows (warm, soft + sticker lift) --- */
  --shadow-xs: 0 1px 2px rgba(23,33,43,.08);
  --shadow-sm: 0 4px 14px rgba(23,33,43,.10);
  --shadow-lift: 0 10px 30px rgba(23,33,43,.16);

  --font-display: 'Fredoka', system-ui, sans-serif;
  --font-body: 'Nunito', system-ui, sans-serif;
  --font-mono: 'Space Mono', ui-monospace, monospace;
}

/* --- Base --- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.65;
  color: var(--ink-800);
  background: var(--paper-50);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--font-display); color: var(--ink-900); line-height: 1.1; margin: 0 0 var(--space-4); }
h1 { font-size: clamp(2.4rem, 6vw, 3.4rem); font-weight: 600; }
h2 { font-size: clamp(1.7rem, 4vw, 2.2rem); font-weight: 600; }
h3 { font-size: 1.25rem; font-weight: 600; }
p { margin: 0 0 var(--space-4); }
a { color: var(--beacon-red); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }

.eyebrow {
  font-family: var(--font-mono); font-weight: 700; font-size: .75rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--beam-gold-dark);
  margin: 0 0 var(--space-3);
}
.lead { font-size: 1.15rem; color: var(--ink-500); }

.container { max-width: 1080px; margin: 0 auto; padding: 0 var(--space-6); }
.section { padding: var(--space-24) 0; }
.section-head { max-width: 640px; margin-bottom: var(--space-12); }
.section--paper { background: var(--paper-100); }

/* --- Header / nav --- */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: rgba(251,249,245,.9); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--ink-100);
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.brand { display: flex; align-items: center; gap: var(--space-3); }
.brand img { width: 34px; height: 34px; }
.brand strong { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; color: var(--ink-900); }
.nav { display: flex; gap: var(--space-6); align-items: center; }
.nav a { color: var(--ink-700); font-weight: 600; font-size: .98rem; }
.nav a:hover { color: var(--beacon-red); text-decoration: none; }
@media (max-width: 720px) { .nav { display: none; } }

/* --- Buttons --- */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-display); font-weight: 600; font-size: 1rem;
  padding: 12px 24px; border-radius: var(--radius-pill);
  border: 2px solid transparent; cursor: pointer; transition: transform .08s ease, box-shadow .2s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn--primary { background: var(--beacon-red); color: #fff; box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--beacon-red-dark); }
.btn--gold { background: var(--beam-gold); color: var(--ink-900); box-shadow: var(--shadow-sm); }
.btn--gold:hover { background: var(--beam-gold-dark); }
.btn--ghost { background: var(--paper-0); color: var(--ink-900); border-color: var(--ink-200); }
.btn--ghost:hover { border-color: var(--ink-400); }
.btn--sm { padding: 8px 18px; font-size: .9rem; }
.btn--lg { padding: 15px 30px; font-size: 1.1rem; }

/* --- Badges & tags --- */
.badge {
  display: inline-block; font-family: var(--font-mono); font-size: .72rem; font-weight: 700;
  padding: 3px 10px; border-radius: var(--radius-pill); letter-spacing: .02em;
}
.badge--new { background: #d9f2e4; color: #1e7a4d; }
.badge--free { background: #fbeecb; color: #9a7413; }
.badge--updated { background: #d9e8f5; color: #285f8c; }
.badge--sale { background: #f7dcda; color: #a72a24; }
.badge--info { background: var(--beacon-red); color: #fff; }
.tag {
  display: inline-block; font-family: var(--font-mono); font-size: .72rem; font-weight: 700;
  padding: 3px 10px; border-radius: var(--radius-pill); text-transform: uppercase;
  background: var(--paper-100); color: var(--ink-500); border: 1px solid var(--ink-100);
}

/* --- Cards --- */
.card {
  background: var(--paper-0); border: 1px solid var(--ink-100);
  border-radius: var(--radius-md); box-shadow: var(--shadow-xs); padding: var(--space-6);
}
.card--interactive { transition: transform .12s ease, box-shadow .2s ease; }
.card--interactive:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }

/* --- Game card (product) --- */
.gamecard { display: flex; gap: var(--space-4); align-items: flex-start; position: relative; overflow: hidden; }
.gamecard::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--accent, var(--beacon-red)); }
.gamecard .icon { width: 64px; height: 64px; border-radius: 14px; flex: none; box-shadow: var(--shadow-xs); object-fit: cover; }
.gamecard h3 { margin-bottom: 4px; }
.gamecard .desc { color: var(--ink-500); font-size: .98rem; margin-bottom: var(--space-3); }
.gamecard .tags { display: flex; gap: 6px; margin-bottom: var(--space-3); flex-wrap: wrap; }
.gamecard .foot { display: flex; align-items: center; justify-content: space-between; }
.gamecard .price { color: var(--success); font-weight: 700; }

.grid { display: grid; gap: var(--space-6); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 780px) { .grid--2, .grid--3 { grid-template-columns: 1fr; } }

/* --- Stat pills --- */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); text-align: center; }
.stat .num { font-family: var(--font-display); font-weight: 700; font-size: 2.6rem; line-height: 1; }
.stat .lbl { font-family: var(--font-mono); font-weight: 700; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-400); }
.stat--red .num { color: var(--beacon-red); }
.stat--blue .num { color: var(--lake-michigan); }
.stat--gold .num { color: var(--beam-gold-dark); }
@media (max-width: 560px) { .stats { grid-template-columns: 1fr; gap: var(--space-8); } }

/* --- Hero --- */
.hero { background: var(--ink-900); color: #fff; border-radius: 0; }
.hero .container { padding-top: var(--space-24); padding-bottom: var(--space-24); }
.hero-grid { display: grid; grid-template-columns: 120px 1fr; gap: var(--space-8); align-items: center; }
.hero h1 { color: #fff; }
.hero .lead { color: #cdd6df; }
.hero .eyebrow { color: var(--beam-gold); }
.hero-cta { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-6); }
@media (max-width: 640px) { .hero-grid { grid-template-columns: 1fr; text-align: left; } .hero-grid > img { width: 96px; } }

/* --- Footer --- */
.site-footer { background: var(--ink-900); color: #b9c2cc; padding: var(--space-16) 0 var(--space-8); }
.site-footer a { color: #cdd6df; }
.site-footer a:hover { color: #fff; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--space-8); }
.footer-grid h4 { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--beam-gold); margin: 0 0 var(--space-3); }
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin-bottom: var(--space-2); }
.footer-brand strong { font-family: var(--font-display); color: #fff; font-size: 1.15rem; }
.footer-bottom { margin-top: var(--space-12); padding-top: var(--space-6); border-top: 1px solid rgba(255,255,255,.1); font-size: .85rem; color: var(--ink-400); }
@media (max-width: 640px) { .footer-grid { grid-template-columns: 1fr; gap: var(--space-6); } }

.section-tag { font-family: var(--font-mono); font-weight: 700; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--lake-michigan); }

/* --- Platform pills (iOS / iPad / Mac / Android) --- */
.plat { display: inline-block; font-family: var(--font-mono); font-weight: 700; font-size: .68rem;
  padding: 3px 9px; border-radius: var(--radius-pill); border: 1px solid var(--ink-200);
  color: var(--ink-700); background: var(--paper-0); letter-spacing: .02em; }
.plat--ios     { border-color: #cbd5df; color: #2b3a4a; }
.plat--mac     { border-color: #d7cfc0; color: #6b5a3a; background: #faf6ee; }
.plat--android { border-color: #bfe3cf; color: #1e7a4d; background: #eefaf2; }

/* --- Screenshot carousel (App Store style: compact, rounded, horizontal scroll) --- */
.shots { display: flex; gap: var(--space-4); overflow-x: auto; scroll-snap-type: x proximity;
  padding: var(--space-2) 0; -webkit-overflow-scrolling: touch; }
.shots img { height: 300px; width: auto; flex: none; border-radius: 18px;
  border: 1px solid var(--ink-100); box-shadow: var(--shadow-xs); scroll-snap-align: start; background: var(--paper-100); }
.shots--wide img { height: 220px; }
@media (max-width: 640px) { .shots img { height: 240px; } .shots--wide img { height: 170px; } }

/* Product pages: tight, balanced space around screenshots (scrollbar sits in bottom pad) */
.section.section--product {
  padding-top: 20px;
  padding-bottom: var(--space-16);
}
.section.section--product .shots {
  padding: 0 0 14px;
  margin: 0 0 20px;
}

/* --- Collapsible Retired subsections --- */
.retire-fold {
  margin-top: var(--space-12);
  border-top: 1px solid var(--ink-100);
  padding-top: var(--space-6);
}
.retire-fold > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-500);
  user-select: none;
  padding: var(--space-2) 0;
}
.retire-fold > summary::-webkit-details-marker { display: none; }
.retire-fold > summary::before {
  content: "";
  width: 0; height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 7px solid var(--ink-400);
  transition: transform .15s ease;
}
.retire-fold[open] > summary::before { transform: rotate(90deg); }
.retire-fold__count {
  font-size: .68rem;
  letter-spacing: .04em;
  color: var(--ink-400);
  background: var(--paper-100);
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-pill);
  padding: 2px 8px;
  text-transform: none;
}
.retire-fold .grid { margin-top: var(--space-6); }