/* ==========================================================================
   SHARED COMPONENTS — single source of truth for patterns repeated across
   index.html, about.html, and all case-study pages.

   Each page keeps its own <style> block for page-specific rules: unique
   layout (e.g. Marriott's .metrics-row, Blizzard's .showcase system,
   Monster's .img-pair), and theme overrides (Blizzard redefines the
   :root tokens below for its dark theme — those overrides just need to be
   declared AFTER this stylesheet is linked, which they already are, since
   embedded <style> blocks always come after <link> tags in <head>).
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --black: #111111;
  --gray-dark: #333333;
  --gray-mid: #666666;
  --gray-light: #767676;
  --gray-rule: #E0E0E0;
  --white: #FFFFFF;
  --font: 'Georgia', serif;
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  /* Component-specific tokens — pages with a different theme (Blizzard)
     override just these, not the whole component rule. */
  --chip-bg: #F5F5F5;
  --badge-bg: #F5F5F5;
}

body {
  font-family: var(--font-sans);
  color: var(--black);
  background: var(--white);
  font-size: 17px;
  line-height: 1.7;
}

/* NAV */
nav {
  border-bottom: 1px solid rgba(0, 0, 0, 0.14);
  padding: 20px 0;
}
nav .nav-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
nav .nav-name {
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  color: var(--black);
}
nav ul {
  list-style: none;
  display: flex;
  gap: 28px;
}
nav ul a {
  text-decoration: none;
  font-size: 16px;
  color: var(--black);
}
nav ul a:hover { color: var(--black); }
nav ul a.active { font-weight: 600; }

/* LAYOUT */
.container {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 24px;
}

/* CHIP — shared tag/pill component (skill chips, case-study tags). */
.chip {
  display: inline-block;
  font-size: 13px;
  line-height: 1.4;
  color: var(--gray-mid);
  background: var(--chip-bg);
  border-radius: 4px;
  padding: 4px 10px;
}

/* CASE HEADER */
.case-header {
  padding: 72px 0 48px;
  border-bottom: 1px solid var(--gray-rule);
  margin-bottom: 64px;
  animation: fadeUp 0.6s ease forwards;
}
.case-tag {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-light);
  margin-bottom: 20px;
}
.case-header h1 {
  font-family: var(--font);
  font-size: 38px;
  font-weight: normal;
  line-height: 1.2;
  margin-bottom: 28px;
  color: var(--black);
}
.case-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 25px;
  margin-bottom: 28px;
}
.case-meta { display: flex; gap: 40px; flex-wrap: wrap; }
.case-meta-item { font-size: 14px; }
.case-meta-item .label {
  color: var(--gray-light);
  display: block;
  margin-bottom: 2px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.case-meta-item .value { color: var(--gray-dark); }

/* CASE TOC */
.case-toc {
  position: sticky;
  top: 0;
  background: var(--white);
  border-bottom: 1px solid var(--gray-rule);
  padding: 14px 0;
  margin-bottom: 40px;
  z-index: 10;
}
.case-toc-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
.case-toc a {
  font-size: 13px;
  color: var(--gray-mid);
  text-decoration: none;
  white-space: nowrap;
}
.case-toc a:hover { color: var(--black); }

/* CASE STUDY BODY TYPOGRAPHY */
section { margin-bottom: 64px; }
section h2 {
  font-family: var(--font);
  font-size: 24px;
  font-weight: normal;
  margin-bottom: 24px;
  color: var(--black);
}
/* Section subheads (e.g. "Seven League Progression", "Registration Flow")
   and the smaller sub-subheads beneath them — unified across all case
   studies so the same heading level reads at the same size everywhere. */
section h3 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 14px;
  margin-top: 40px;
  color: var(--black);
}
section h3:first-child { margin-top: 0; }
section h4 {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 10px;
  margin-top: 24px;
  color: var(--black);
}
section h4:first-child { margin-top: 0; }

p { color: var(--gray-dark); margin-bottom: 18px; }
p:last-child { margin-bottom: 0; }

/* Image captions — the "subheader" beneath each figure. Unified size/
   color/spacing across every case study; page-specific inline styles on
   individual <figcaption> tags have been removed so this rule applies
   everywhere without being overridden. */
figcaption {
  font-size: 14px;
  color: var(--gray-light);
  margin-top: 10px;
  margin-bottom: 48px;
  line-height: 1.5;
}

/* OUTCOME BADGE */
.outcome-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--badge-bg);
  color: var(--gray-mid);
  padding: 6px 12px;
  border-radius: 4px;
  margin-bottom: 20px;
}

/* CASE NAV — prev/next footer links */
.case-nav {
  border-top: 1px solid var(--gray-rule);
  padding: 56px 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin-top: 16px;
}
.case-nav-link { text-decoration: none; max-width: 280px; }
.case-nav-link:hover .case-nav-title { color: var(--gray-mid); }
.case-nav-direction {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-light);
  margin-bottom: 8px;
}
.case-nav-title {
  font-family: var(--font);
  font-size: 18px;
  font-weight: normal;
  color: var(--black);
  transition: color 0.15s;
  line-height: 1.3;
}
.case-nav-right { text-align: right; }

/* FOOTER */
footer {
  border-top: 1px solid rgba(0, 0, 0, 0.14);
  padding: 40px 0;
  margin-top: 80px;
}
footer .footer-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
footer p { font-size: 18px; color: var(--black); margin: 0; }
footer a { font-size: 18px; color: var(--black); text-decoration: none; }
footer a:hover { color: var(--black); }

/* ANIMATIONS — shared reveal-on-scroll system */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.5s ease, transform 0.5s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.metric { opacity: 0; transform: translateY(12px); transition: opacity 0.4s ease, transform 0.4s ease; }
.metric.visible { opacity: 1; transform: translateY(0); }
.reveal-h3 { opacity: 0; transform: translateX(-10px); transition: opacity 0.4s ease, transform 0.4s ease; }
.reveal-h3.visible { opacity: 1; transform: translateX(0); }
.reveal-img { opacity: 0; transform: translateY(12px) scale(0.99); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal-img.visible { opacity: 1; transform: translateY(0) scale(1); }
.reveal-img img { display: block; width: 100%; height: auto; image-rendering: -webkit-optimize-contrast; backface-visibility: hidden; }
.reveal-badge { opacity: 0; transform: scale(0.9); transition: opacity 0.3s ease, transform 0.3s ease; }
.reveal-badge.visible { opacity: 1; transform: scale(1); }

@media (max-width: 620px) {
  nav ul { gap: 16px; }
  nav ul a { font-size: 16px; }
  .case-header { padding: 48px 0 32px; }
  .case-header h1 { font-size: 26px; }
  .case-nav { flex-direction: column; gap: 32px; }
  .case-nav-right { text-align: left; }
}
