/*
 * MIC Golden Reference — Case Experience 1.0 (FP0.2 / Gate B).
 * Editorial storytelling × product-grade precision.
 * Consumes MIC Experience Language tokens (--mic-*); system fonts only.
 */

.mic-case--golden { background: var(--mic-color-canvas); }

/* ---------------------------------------------------------
   Hero — Thesis in 5 seconds (B1)
   --------------------------------------------------------- */
.golden-hero {
  background: var(--mic-color-authority);
  color: var(--mic-palette-paper-000);
  padding-block: var(--mic-space-12) var(--mic-space-11);
}
.golden-hero__inner { display: grid; gap: var(--mic-space-6); max-width: 1040px; }
.golden-eyebrow { color: var(--mic-color-evidence); letter-spacing: var(--mic-tracking-eyebrow); }
.golden-title {
  margin: 0;
  font-size: clamp(2rem, 4.4vw, 3.75rem);
  line-height: var(--mic-leading-tight);
  letter-spacing: var(--mic-tracking-tight);
  font-weight: var(--mic-font-weight-regular);
  color: var(--mic-palette-paper-000);
  max-width: 22ch;
}
.golden-thesis {
  margin: 0;
  max-width: 62ch;
  font-size: clamp(1.1rem, 1.7vw, 1.5rem);
  line-height: var(--mic-leading-normal);
  color: rgba(255, 255, 255, 0.82);
}

/* Outcome band (B1) */
.golden-outcome {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--mic-space-6);
  margin: var(--mic-space-4) 0 0;
  padding: var(--mic-space-6) 0 0;
  list-style: none;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  max-width: 900px;
}
.golden-outcome__item { display: grid; gap: var(--mic-space-2); }
.golden-outcome__metric {
  font-size: clamp(1.5rem, 2.4vw, 2.25rem);
  line-height: 1;
  color: var(--mic-color-evidence);
  letter-spacing: var(--mic-tracking-tight);
}
.golden-outcome__label {
  font-size: var(--mic-type-caption);
  letter-spacing: var(--mic-tracking-wide);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}
.golden-hero__cta { display: flex; flex-wrap: wrap; gap: var(--mic-space-4); margin-top: var(--mic-space-2); }
.mic-btn--ghost.ghost-on-ink { color: #fff; border-color: rgba(255, 255, 255, 0.34); background: transparent; }
.mic-btn--ghost.ghost-on-ink:hover { border-color: #fff; background: rgba(255, 255, 255, 0.08); }

.golden-media { margin-top: calc(-1 * var(--mic-space-8)); position: relative; z-index: 2; }
.golden-hero-media {
  width: 100%;
  height: auto;
  max-height: 70vh;
  object-fit: contain;
  background: var(--mic-color-surface-sunken);
  border-radius: var(--mic-radius-md);
  box-shadow: var(--mic-shadow-lg);
  display: block;
}

/* Perspective switcher spacing */
.mic-case--golden .mic-views { margin: var(--mic-space-8) 0 var(--mic-space-2); }

/* ---------------------------------------------------------
   Body grid
   --------------------------------------------------------- */
.golden-body { padding-block: var(--mic-space-10) var(--mic-space-12); }
.golden-grid { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(260px, 1fr); gap: var(--mic-space-11); align-items: start; }
.golden-main { display: grid; gap: var(--mic-space-10); }
.golden-aside { position: sticky; top: calc(var(--mic-header-height) + var(--mic-space-5)); display: grid; gap: var(--mic-space-6); }

/* Sections — narrative rhythm (B2) */
.golden-section { max-width: 900px; }
.golden-section__title {
  margin: 0 0 var(--mic-space-4);
  font-size: var(--mic-type-caption);
  font-weight: var(--mic-font-weight-semibold);
  letter-spacing: var(--mic-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--mic-color-ink-muted);
}
.golden-prose { font-size: var(--mic-type-md); line-height: var(--mic-leading-relaxed); color: var(--mic-color-ink-soft); }
.golden-prose > * + * { margin-top: var(--mic-space-5); }
.golden-prose p { margin: 0; }

/* Judgement — the hinge (B4) */
.golden-hinge {
  padding-top: var(--mic-space-7);
  border-top: 3px solid var(--mic-color-evidence);
  max-width: 900px;
}
.golden-hinge__label {
  display: block;
  margin-bottom: var(--mic-space-4);
  font-size: var(--mic-type-caption);
  font-weight: var(--mic-font-weight-semibold);
  letter-spacing: var(--mic-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--mic-color-evidence-text);
}
.golden-hinge__text {
  margin: 0;
  font-family: var(--mic-font-serif);
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  line-height: var(--mic-leading-snug);
  letter-spacing: var(--mic-tracking-tight);
  color: var(--mic-color-ink);
  max-width: 28ch;
}

/* Reflection — decision capital (B4) */
.golden-reflection {
  padding: var(--mic-space-8);
  background: var(--mic-color-surface-sunken);
  border-left: 3px solid var(--mic-color-evidence);
  border-radius: var(--mic-radius-sm);
  max-width: 900px;
}
.golden-reflection__label {
  display: block; margin-bottom: var(--mic-space-4);
  font-size: var(--mic-type-caption); font-weight: var(--mic-font-weight-semibold);
  letter-spacing: var(--mic-tracking-eyebrow); text-transform: uppercase;
  color: var(--mic-color-evidence-text);
}
.golden-reflection__text {
  margin: 0; font-family: var(--mic-font-serif);
  font-size: clamp(1.15rem, 1.8vw, 1.5rem); line-height: var(--mic-leading-normal);
  color: var(--mic-color-ink);
}
.golden-reflection__next {
  margin: var(--mic-space-5) 0 0; padding-top: var(--mic-space-4);
  border-top: 1px solid var(--mic-color-border);
  font-size: var(--mic-type-small); color: var(--mic-color-ink-soft);
}

/* ---------------------------------------------------------
   Aside — credibility layer (B3)
   --------------------------------------------------------- */
.golden-card { padding: var(--mic-space-6); background: var(--mic-color-surface); border: 1px solid var(--mic-color-border); border-radius: var(--mic-radius-md); }
.golden-meta { margin: var(--mic-space-4) 0 0; display: grid; gap: var(--mic-space-3); }
.golden-meta__row { display: grid; grid-template-columns: 88px 1fr; gap: var(--mic-space-3); }
.golden-meta dt { font-size: var(--mic-type-caption); text-transform: uppercase; letter-spacing: var(--mic-tracking-wide); color: var(--mic-color-ink-muted); }
.golden-meta dd { margin: 0; font-size: var(--mic-type-small); color: var(--mic-color-ink); }

.golden-cred__list { margin: var(--mic-space-4) 0 0; padding: 0; list-style: none; display: grid; gap: var(--mic-space-5); }
.golden-cred__item { display: grid; gap: var(--mic-space-1); }
.golden-cred__metric { font-size: var(--mic-type-xl); line-height: 1; color: var(--mic-color-ink); letter-spacing: var(--mic-tracking-tight); }
.golden-cred__context { font-size: var(--mic-type-small); color: var(--mic-color-ink-soft); }
.golden-cred__source { font-size: var(--mic-type-caption); color: var(--mic-color-ink-muted); }

.golden-quote { margin: 0; padding: var(--mic-space-6); background: var(--mic-color-authority); color: var(--mic-palette-paper-000); border-radius: var(--mic-radius-md); }
.golden-quote p { margin: 0; font-family: var(--mic-font-serif); font-size: var(--mic-type-h4); line-height: var(--mic-leading-normal); }
.golden-quote cite { display: flex; align-items: center; gap: var(--mic-space-3); margin-top: var(--mic-space-5); font-family: var(--mic-font-sans); font-style: normal; }
.golden-quote__avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: none; }
.golden-quote__who { display: grid; gap: 2px; }
.golden-quote__who strong { color: var(--mic-palette-paper-000); font-size: var(--mic-type-small); }
.golden-quote__who span { color: rgba(255, 255, 255, 0.66); font-size: var(--mic-type-caption); }

/* ---------------------------------------------------------
   Related Work (B6)
   --------------------------------------------------------- */
.golden-related { margin-top: var(--mic-space-12); padding-top: var(--mic-space-8); border-top: 1px solid var(--mic-color-border); }
.golden-related__title { margin: 0 0 var(--mic-space-6); font-size: var(--mic-type-h3); font-weight: var(--mic-font-weight-regular); color: var(--mic-color-ink); }
.golden-related__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--mic-space-5); }
.golden-related__card {
  display: grid; gap: var(--mic-space-2); padding: var(--mic-space-6);
  background: var(--mic-color-surface); border: 1px solid var(--mic-color-border);
  border-radius: var(--mic-radius-md); text-decoration: none; color: inherit;
  transition: border-color var(--mic-duration-base) var(--mic-ease-standard), box-shadow var(--mic-duration-base) var(--mic-ease-standard);
}
.golden-related__card:hover { border-color: var(--mic-color-authority); box-shadow: var(--mic-shadow-md); }
.golden-related__name { font-size: var(--mic-type-h4); line-height: var(--mic-leading-snug); color: var(--mic-color-ink); }

/* Gallery + closing */
.golden-gallery { margin-top: var(--mic-space-10); }
.golden-closing { margin-top: var(--mic-space-10); padding: var(--mic-space-10); background: var(--mic-color-surface-sunken); border-radius: var(--mic-radius-md); text-align: center; }
.golden-closing__line { margin: 0 0 var(--mic-space-6); font-family: var(--mic-font-serif); font-size: clamp(1.15rem, 2vw, 1.6rem); color: var(--mic-color-ink); }

/* ---------------------------------------------------------
   Responsive — mobile reading rhythm (Gate A + B)
   --------------------------------------------------------- */
@media (max-width: 900px) {
  .golden-grid { grid-template-columns: 1fr; gap: var(--mic-space-9); }
  .golden-aside { position: static; }
  .golden-outcome { grid-template-columns: 1fr; gap: var(--mic-space-5); }
  .golden-hero-media { border-radius: var(--mic-radius-sm); }
}
@media (max-width: 600px) {
  .golden-hero { padding-block: var(--mic-space-10) var(--mic-space-8); }
  .golden-thesis { font-size: 1.05rem; }
  .golden-hinge__text { max-width: none; }
  .golden-closing { padding: var(--mic-space-8) var(--mic-space-5); }
}

/* ---------------------------------------------------------
   Experience Index — /cases/  (Selected Experience)
   --------------------------------------------------------- */
.mic-index__hero {
  background: var(--mic-color-authority);
  color: var(--mic-palette-paper-000);
  padding-block: var(--mic-space-11) var(--mic-space-10);
}
.mic-index__hero-inner { display: grid; gap: var(--mic-space-5); max-width: 900px; }
.mic-index__hero .mic-eyebrow { color: var(--mic-color-evidence); }
.mic-index__title {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: var(--mic-leading-tight);
  letter-spacing: var(--mic-tracking-tight);
  font-weight: var(--mic-font-weight-regular);
  color: var(--mic-palette-paper-000);
}
.mic-index__lead { margin: 0; max-width: 60ch; font-size: clamp(1.05rem, 1.6vw, 1.35rem); line-height: var(--mic-leading-normal); color: rgba(255,255,255,0.82); }

.mic-index__body { padding-block: var(--mic-space-11); }
.mic-index__section + .mic-index__section { margin-top: var(--mic-space-12); }
.mic-index__section-title {
  margin: 0 0 var(--mic-space-6);
  font-size: var(--mic-type-caption);
  font-weight: var(--mic-font-weight-semibold);
  letter-spacing: var(--mic-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--mic-color-ink-muted);
}
.mic-index__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--mic-space-6); }
.mic-index__grid--featured { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }

.mic-index-card {
  display: grid; gap: var(--mic-space-3); padding: var(--mic-space-7);
  background: var(--mic-color-surface); border: 1px solid var(--mic-color-border);
  border-radius: var(--mic-radius-md); text-decoration: none; color: inherit;
  transition: border-color var(--mic-duration-base) var(--mic-ease-standard), box-shadow var(--mic-duration-base) var(--mic-ease-standard), transform var(--mic-duration-base) var(--mic-ease-standard);
}
.mic-index-card:hover { border-color: var(--mic-color-authority); box-shadow: var(--mic-shadow-lg); transform: translateY(-2px); }
.mic-index-card__title { font-size: var(--mic-type-h4); line-height: var(--mic-leading-snug); color: var(--mic-color-ink); }
.mic-index-card--featured .mic-index-card__title { font-size: var(--mic-type-h3); }
.mic-index-card__summary { font-size: var(--mic-type-small); line-height: var(--mic-leading-normal); color: var(--mic-color-ink-soft); }
.mic-index-card__outcome {
  margin-top: var(--mic-space-2); padding-top: var(--mic-space-3);
  border-top: 1px solid var(--mic-color-border-faint);
  font-size: var(--mic-type-caption); letter-spacing: var(--mic-tracking-wide);
  text-transform: uppercase; color: var(--mic-color-evidence-text);
}

.mic-index__cta { margin-top: var(--mic-space-12); padding: var(--mic-space-10); background: var(--mic-color-surface-sunken); border-radius: var(--mic-radius-md); text-align: center; }
.mic-index__cta-line { margin: 0 0 var(--mic-space-6); font-family: var(--mic-font-serif); font-size: clamp(1.15rem, 2vw, 1.6rem); color: var(--mic-color-ink); }