/* ==========================================================================
   Pints & Profits 2026 — Report styles
   Brew. Hospitality marketing.
   ========================================================================== */

:root {
  /* Brand palette — primary */
  --c-black: #1E1E1E;
  --c-green: #6BA539;
  --c-white-smoke: #F3F3F4;
  --c-silver: #C6C3C2;
  --c-linen: #ECEBEA;
  /* Brand palette — secondary greys */
  --c-slate: #333333;
  --c-dim: #666666;
  --c-grey: #999999;

  /* Type */
  --ff-sans: Arial, "Helvetica Neue", Helvetica, sans-serif;

  /* Layout */
  --max-width: 1280px;
  --gutter: clamp(20px, 4vw, 56px);

  /* Type scale (fluid) */
  --fs-display: clamp(2.6rem, 7.2vw, 7.2rem);
  --fs-h1: clamp(2rem, 4.8vw, 4rem);
  --fs-h2: clamp(1.6rem, 3.4vw, 2.6rem);
  --fs-h3: clamp(1.2rem, 2.4vw, 1.6rem);
  --fs-lead: clamp(1.05rem, 1.6vw, 1.25rem);
  --fs-body: 1rem;
  --fs-small: 0.8125rem;
  --fs-tiny: 0.6875rem;

  --line-keyline: 1px solid var(--c-green);
  --line-divider: 0.5px solid var(--c-silver);
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--ff-sans);
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--c-black);
  background: var(--c-linen);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }

/* Skip link */
.skip-link {
  position: absolute; top: -100px; left: 0;
  background: var(--c-green); color: var(--c-black);
  padding: 12px 16px; font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: 0; z-index: 100; }

/* Container */
.wrap {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* Section labels (eyebrow type) */
.eyebrow {
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.04em;
  margin: 0 0 8px;
}
.eyebrow::after {
  content: "";
  display: block;
  width: 40px;
  height: 1px;
  background: currentColor;
  margin-top: 8px;
}

/* Sections */
section { padding: clamp(56px, 9vw, 120px) 0; }
.section--dark { background: var(--c-black); color: var(--c-white-smoke); }
.section--light { background: var(--c-white-smoke); color: var(--c-black); }
.section--linen { background: var(--c-linen); color: var(--c-black); }

/* ==========================================================================
   Header — two-tier navigation
   ========================================================================== */

.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--c-black);
  color: var(--c-white-smoke);
  border-bottom: var(--line-keyline);
}
.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 18px;
  padding-bottom: 18px;
  gap: 24px;
}
.masthead__logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--c-white-smoke);
}
.masthead__logo img { width: 92px; height: auto; }
.masthead__nav {
  display: flex;
  align-items: center;
  gap: 24px;
}
.btn-chapters {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--c-white-smoke);
  color: var(--c-black);
  border: 0;
  font-size: var(--fs-small);
  font-weight: 700;
  padding: 12px 20px;
  transition: background-color 120ms ease, color 120ms ease;
}
.btn-chapters svg {
  width: 18px; height: 14px; flex: 0 0 18px;
  transition: transform 220ms cubic-bezier(.2,.7,.3,1);
  transform-origin: center;
}
.btn-chapters:hover, .btn-chapters:focus {
  background: var(--c-green);
  color: var(--c-black);
}
.btn-chapters:hover svg,
.btn-chapters:focus svg { transform: scaleX(1.25); }
.btn-download {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  color: var(--c-white-smoke);
  border: 1px solid var(--c-white-smoke);
  padding: 11px 19px;
  font-size: var(--fs-small);
  font-weight: 700;
  text-decoration: none;
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}
.btn-download:hover, .btn-download:focus {
  background: var(--c-green);
  color: var(--c-black);
  border-color: var(--c-green);
}

/* ==========================================================================
   Hero — ghosted echo type behind feature image
   ========================================================================== */

.hero {
  position: relative;
  background: var(--c-black);
  color: var(--c-white-smoke);
  padding: clamp(40px, 6vw, 80px) 0 clamp(56px, 8vw, 96px);
  overflow: hidden;
}
.hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  position: relative;
  z-index: 2;
}
.hero__type {
  position: relative;
}
.hero__main {
  position: relative;
  z-index: 2;
}
.hero__main .hero__display {
  font-size: var(--fs-display);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 0.95;
  margin: 0 0 24px;
  color: var(--c-white-smoke);
}
.hero__meta {
  font-size: var(--fs-tiny);
  color: var(--c-grey);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 18px;
  font-weight: 700;
}
.hero__strap {
  font-size: var(--fs-lead);
  color: var(--c-white-smoke);
  max-width: 32em;
  margin: 0 0 32px;
}
.hero__strap strong { font-weight: 700; }
.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--c-green);
  color: var(--c-black);
  padding: 16px 24px;
  font-size: var(--fs-small);
  font-weight: 700;
  text-decoration: none;
  border: 0;
  transition: transform 120ms ease;
}
.btn-primary:hover, .btn-primary:focus { transform: translateY(-2px); }
.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: transparent;
  color: var(--c-white-smoke);
  padding: 14px 22px;
  font-size: var(--fs-small);
  font-weight: 700;
  text-decoration: none;
  border: 2px solid var(--c-white-smoke);
}
.btn-secondary:hover, .btn-secondary:focus {
  background: var(--c-white-smoke);
  color: var(--c-black);
}
.hero__credit {
  font-size: var(--fs-tiny);
  color: var(--c-grey);
  margin: 32px 0 0;
}
.hero__image {
  position: relative;
  z-index: 2;
  aspect-ratio: 4 / 3;
  background: var(--c-slate) center/cover no-repeat;
  background-image: url("../img/hero.jpg");
}

@media (min-width: 880px) {
  .hero__inner {
    grid-template-columns: 1.05fr 1fr;
    gap: 56px;
    align-items: center;
  }
  .hero__image { aspect-ratio: 4 / 5; }
}

/* ==========================================================================
   Argument — pull quote with marks
   ========================================================================== */

.argument { background: var(--c-linen); }
.argument__inner { max-width: 920px; }
.argument__quote {
  position: relative;
  padding-left: 60px;
  margin: 24px 0 32px;
}
.argument__quote::before {
  content: "";
  position: absolute;
  left: 0; top: 8px;
  width: 36px; height: 36px;
  background: var(--c-black);
}
.argument__quote::after {
  content: "";
  position: absolute;
  left: 6px; top: 14px;
  width: 24px; height: 24px;
  background: var(--c-green);
}
.argument__quote p {
  font-size: var(--fs-h1);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 0;
  color: var(--c-black);
}
.argument__quote em { font-style: italic; }
.argument__credit {
  font-size: var(--fs-small);
  color: var(--c-dim);
  margin: 24px 0 0 60px;
  padding-top: 12px;
  border-top: 1px solid var(--c-black);
  width: fit-content;
}
.argument__link {
  margin: 32px 0 0;
  font-size: var(--fs-small);
  font-weight: 700;
}
.argument__link a {
  color: var(--c-black);
  text-decoration: none;
  border-bottom: 2px solid var(--c-green);
  padding-bottom: 2px;
}

/* ==========================================================================
   Two-column intro with numbered list
   ========================================================================== */

.intro__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
@media (min-width: 880px) {
  .intro__grid { grid-template-columns: 1fr 1fr; gap: 64px; }
}
.intro h2 {
  font-size: var(--fs-h2);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
  line-height: 1.1;
}
.intro p { margin: 0 0 16px; max-width: 38em; line-height: 1.6; color: var(--c-slate); }

.numlist { list-style: none; margin: 0; padding: 0; }
.numlist li {
  position: relative;
  padding: 0 0 24px 56px;
  margin: 0 0 24px;
  border-bottom: 0.5px solid var(--c-silver);
}
.numlist li:last-child { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.numlist__bullet {
  position: absolute;
  left: 0; top: 2px;
  width: 36px; height: 36px;
  background: var(--c-green);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--c-black);
  font-size: var(--fs-small);
}
.numlist h3 {
  font-size: var(--fs-h3);
  font-weight: 700;
  margin: 4px 0 6px;
}
.numlist p { margin: 0; color: var(--c-slate); line-height: 1.5; }

/* ==========================================================================
   Key findings — stat grid + chart
   ========================================================================== */

.findings { background: var(--c-black); color: var(--c-white-smoke); }
.findings h2 {
  font-size: var(--fs-h1);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 0 0 12px;
  max-width: 16ch;
}
.findings h2 em { font-style: italic; font-weight: 700; }
.findings__source { font-size: var(--fs-small); color: var(--c-grey); margin: 0 0 40px; }

.stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin-top: 32px;
}
@media (min-width: 880px) {
  .stats {
    grid-template-columns: 1.5fr 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 1px;
  }
  /* If there are 6 stats with a row-spanning hero, the 6th would overflow
     alone into row 3. Stretch it across the full row as a horizontal closer. */
  .stats > .stat:nth-child(6):last-child {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: flex-end;
    gap: 48px;
    min-height: 180px;
  }
  .stats > .stat:nth-child(6):last-child::before {
    position: absolute;
    top: clamp(28px, 3.4vw, 44px);
    left: clamp(28px, 3.4vw, 44px);
    margin: 0;
  }
  .stats > .stat:nth-child(6):last-child .stat__num {
    flex: 0 0 auto;
    margin: 0;
  }
  .stats > .stat:nth-child(6):last-child .stat__label {
    flex: 1 1 auto;
    margin: 0;
    max-width: 48ch;
  }
  .stats > .stat:nth-child(6):last-child .stat__sub {
    flex: 0 1 32ch;
    margin: 0;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
  }
}
.stat {
  position: relative;
  padding: clamp(28px, 3.4vw, 44px);
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 240px;
  background: var(--c-black);
}
.stat::before {
  content: attr(data-eyebrow);
  display: block;
  font-size: var(--fs-tiny);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-grey);
  margin-bottom: clamp(16px, 2vw, 28px);
}
.stat[data-eyebrow=""]::before,
.stat:not([data-eyebrow])::before { display: none; }

.stat--hero {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.78) 100%),
    url('../img/ch3.jpg') center / cover no-repeat;
  color: var(--c-white-smoke);
  grid-row: span 3;
  min-height: 380px;
  padding: clamp(32px, 4vw, 56px);
}
.stat--hero::before { color: rgba(255, 255, 255, 0.7); }
.stat--hero .stat__num {
  font-size: clamp(6rem, 15vw, 13rem);
  color: var(--c-white-smoke);
  margin-top: auto;
}
.stat--hero .stat__num span {
  font-size: 0.28em;
  vertical-align: 0.7em;
  font-weight: 800;
  color: var(--c-green);
}
.stat--hero .stat__body {
  margin-top: 28px;
  padding-top: 24px;
  position: relative;
  max-width: 28ch;
}
.stat--hero .stat__body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 56px;
  height: 3px;
  background: var(--c-green);
}
.stat--hero .stat__label {
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  color: var(--c-white-smoke);
}
.stat--hero .stat__sub { color: rgba(255, 255, 255, 0.75); }

.stat--filled {
  background: var(--c-black);
}
.stat--outline {
  background: var(--c-black);
  outline: 1.5px solid var(--c-green);
  outline-offset: -1px;
}
.stat--outline .stat__num { color: var(--c-green); }

.stat__num {
  font-family: var(--ff-sans);
  font-size: clamp(3.6rem, 8vw, 6rem);
  font-weight: 900;
  letter-spacing: -0.055em;
  line-height: 0.88;
  margin: 0;
  color: var(--c-white-smoke);
}
.stat__num span {
  display: inline-block;
  font-size: 0.3em;
  vertical-align: 0.7em;
  margin-left: 4px;
  font-weight: 800;
  letter-spacing: 0;
}
.stat__label {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 24px 0 0;
  padding-top: 18px;
  line-height: 1.35;
  color: var(--c-white-smoke);
  position: relative;
  max-width: 28ch;
}
.stat__label::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 2px;
  background: var(--c-green);
}
.stat__sub {
  font-size: var(--fs-small);
  margin: 12px 0 0;
  color: var(--c-grey);
  line-height: 1.5;
  font-weight: 400;
  max-width: 32ch;
}
.stat--hero .stat__body .stat__label {
  margin: 0;
  padding-top: 0;
}
.stat--hero .stat__body .stat__label::before { display: none; }
.stat--hero .stat__body .stat__sub { margin-top: 10px; }

.stat__icon {
  position: absolute;
  top: clamp(28px, 3.4vw, 44px);
  right: clamp(28px, 3.4vw, 44px);
  width: 36px;
  height: 36px;
  color: var(--c-green);
  opacity: 0.85;
}
.stat--hero .stat__icon {
  top: clamp(32px, 4vw, 56px);
  right: clamp(32px, 4vw, 56px);
  width: 64px;
  height: 64px;
  color: var(--c-green);
  opacity: 1;
}
.stat--outline .stat__icon { color: var(--c-green); }

.chart {
  margin-top: 16px;
  background: var(--c-white-smoke);
  color: var(--c-black);
  padding: 28px;
}
.chart__title { font-size: var(--fs-small); font-weight: 700; margin: 0 0 4px; }
.chart__hint { font-size: var(--fs-tiny); color: var(--c-dim); margin: 0 0 16px; }
.chart__grid {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 8px 16px;
  align-items: center;
}
.chart__label { font-size: var(--fs-tiny); color: var(--c-dim); }
.chart__bars {
  display: flex;
  align-items: center;
  height: 14px;
  gap: 2px;
}
.chart__seg { height: 100%; transition: opacity 200ms ease; }
.chart__seg--young { background: var(--c-green); }
.chart__seg--mid { background: var(--c-black); }
.chart__seg--old { background: var(--c-silver); }
.chart__seg:hover { opacity: 0.7; }
.chart__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid rgba(0,0,0,0.08);
  font-size: var(--fs-tiny);
  color: var(--c-dim);
}
.chart__legend span::before {
  content: "";
  display: inline-block;
  width: 14px; height: 10px;
  margin-right: 8px;
  vertical-align: -1px;
}
.chart__legend .lg-young::before { background: var(--c-green); }
.chart__legend .lg-mid::before { background: var(--c-black); }
.chart__legend .lg-old::before { background: var(--c-silver); }

/* ==========================================================================
   Chapter list
   ========================================================================== */

.chapters h2 {
  font-size: var(--fs-h1);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 0 0 12px;
  max-width: 14ch;
}
.chapters h2 em { font-style: italic; }
.chapters__list {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  border-top: 1px solid var(--c-black);
}
.chapters__list a {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 28px 0;
  text-decoration: none;
  color: var(--c-black);
  border-bottom: 0.5px solid var(--c-silver);
  transition: padding 200ms ease;
}
.chapters__list a:hover, .chapters__list a:focus {
  padding-left: 12px;
}
.chapters__num {
  font-size: var(--fs-h3);
  font-weight: 700;
}
.chapters__title { display: block; font-size: var(--fs-h3); font-weight: 700; margin: 0; }
.chapters__sub { display: block; font-size: var(--fs-small); color: var(--c-dim); margin: 6px 0 0; line-height: 1.45; }
.chapters__meta {
  font-size: var(--fs-tiny);
  color: var(--c-dim);
  white-space: nowrap;
}
.chapters__list .feature {
  background: var(--c-green);
  border-bottom: 0;
  padding-left: 20px;
  padding-right: 20px;
}
.chapters__list .feature:hover, .chapters__list .feature:focus { padding-left: 32px; }
.chapters__list .feature .chapters__sub { color: var(--c-black); }
.chapters__list .feature .chapters__meta { color: var(--c-black); }
@media (max-width: 640px) {
  .chapters__list a {
    grid-template-columns: 40px 1fr;
    column-gap: 12px;
    row-gap: 4px;
    padding: 20px 0;
  }
  .chapters__num { font-size: var(--fs-h3); align-self: start; grid-row: 1 / span 2; }
  .chapters__list a > span:not([class]) { grid-column: 2; min-width: 0; }
  .chapters__meta { grid-column: 2; font-size: var(--fs-tiny); }
  .chapters__list .feature { padding-left: 16px; padding-right: 16px; }
  .chapters__list .feature:hover, .chapters__list .feature:focus { padding-left: 24px; }
}

/* ==========================================================================
   Methodology snapshot
   ========================================================================== */

.method__inner { max-width: 920px; }
.method h2 {
  font-size: var(--fs-h3);
  font-weight: 700;
  margin: 0 0 12px;
}
.method p { margin: 0 0 16px; color: var(--c-slate); line-height: 1.6; }
.method__link {
  font-size: var(--fs-small);
  font-weight: 700;
  text-decoration: none;
  color: var(--c-black);
  border-bottom: 2px solid var(--c-green);
  padding-bottom: 2px;
}
.section--dark.method p { color: var(--c-silver); }
.section--dark .method__link { color: var(--c-white-smoke); }

/* ==========================================================================
   Pre-footer: "Let's make something brew'tiful"
   ========================================================================== */

.prefooter {
  background: var(--c-black);
  color: var(--c-white-smoke);
  padding: clamp(48px, 8vw, 96px) 0;
}
.prefooter__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}
.prefooter h2 {
  font-size: var(--fs-h1);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 0 0 16px;
}
.prefooter h2 .apos { color: var(--c-white-smoke); }
.prefooter p { color: var(--c-silver); margin: 0 0 24px; max-width: 32em; }
.prefooter .btn-primary { background: var(--c-green); color: var(--c-black); }
.pattern {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  background: var(--c-white-smoke);
  padding: 16px;
  width: 100%;
  max-width: 360px;
  justify-self: end;
}
.pattern__cell { aspect-ratio: 1 / 1; background: var(--c-black); }
.pattern__cell svg { width: 100%; height: 100%; }
.prefooter__awards {
  display: block;
  width: 100%;
  max-width: 480px;
  height: auto;
  justify-self: end;
}
@media (min-width: 880px) {
  .prefooter__inner { grid-template-columns: 1.4fr 1fr; gap: 64px; }
}

/* ==========================================================================
   Footer
   ========================================================================== */

.footer {
  background: var(--c-black);
  color: var(--c-white-smoke);
  padding: 32px 0;
  font-size: var(--fs-tiny);
}
.footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.footer__brand {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
  color: var(--c-white-smoke);
}
.footer__brand img { width: 72px; height: auto; }
.footer__brand span { color: var(--c-grey); }
.footer__links { display: flex; gap: 16px; }
.footer__links a { color: var(--c-silver); text-decoration: none; }
.footer__links a:hover, .footer__links a:focus { color: var(--c-white-smoke); }

/* ==========================================================================
   Chapters drawer (overlay)
   ========================================================================== */

.drawer {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0,0,0,0.6);
  display: flex;
  justify-content: flex-end;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}
.drawer[aria-hidden="false"] { opacity: 1; pointer-events: auto; }
.drawer__panel {
  width: min(460px, 90vw);
  height: 100%;
  background: var(--c-black);
  color: var(--c-white-smoke);
  padding: 32px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 280ms ease;
}
.drawer[aria-hidden="false"] .drawer__panel { transform: translateX(0); }
.drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--c-slate);
  padding-bottom: 16px;
  margin-bottom: 24px;
}
.drawer__title { font-size: var(--fs-small); font-weight: 700; margin: 0; }
.drawer__close {
  background: transparent;
  border: 0;
  color: var(--c-white-smoke);
  font-size: 24px;
  line-height: 1;
  padding: 4px 8px;
}
.drawer__list { list-style: none; padding: 0; margin: 0; }
.drawer__list li { border-bottom: 0.5px solid var(--c-slate); }
.drawer__list a {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 12px;
  align-items: baseline;
  padding: 20px 0;
  text-decoration: none;
  color: var(--c-white-smoke);
  transition: transform 220ms ease, padding 220ms ease;
}
.drawer__list a:hover, .drawer__list a:focus { transform: translateX(8px); }
.drawer__list .ch-num { font-size: var(--fs-small); font-weight: 700; color: var(--c-silver); }
.drawer__list .ch-name { font-size: var(--fs-h3); font-weight: 700; line-height: 1.2; }
.drawer__list .ch-aux .ch-name { font-size: var(--fs-small); font-weight: 400; grid-column: 1 / -1; }
.drawer[aria-hidden="true"] { display: none; }

/* ==========================================================================
   Reveal-on-scroll — progressive enhancement
   .reveal stays visible without JS. The .js class is added by scripts.js
   to opt-in to the hidden initial state, then .is-visible reveals.
   ========================================================================== */

.reveal { transition: opacity 600ms ease, transform 600ms ease; }
.js .reveal { opacity: 0; transform: translateY(16px); }
.js .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* Mobile menu adjustments */
@media (max-width: 640px) {
  .masthead__nav .btn-chapters span { display: none; }
  .masthead__logo img { width: 78px; }
  .btn-download { padding: 10px 14px; font-size: var(--fs-tiny); }
  .stat--hero { grid-row: span 1; }
}

/* ==========================================================================
   Sub-bar — sticky section anchors on chapter pages
   ========================================================================== */

.subnav {
  position: sticky;
  top: var(--masthead-h, 81px); /* flush under primary masthead — JS keeps this current */
  z-index: 49;
  background: #2a2a2a;
  color: var(--c-white-smoke);
  border-bottom: 0.5px solid var(--c-slate);
}
.subnav__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-top: 14px;
  padding-bottom: 14px;
}
.subnav__inner::-webkit-scrollbar { display: none; }
.subnav__label {
  font-size: var(--fs-tiny);
  color: var(--c-grey);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  flex-shrink: 0;
  font-weight: 700;
}
.subnav__list {
  display: flex;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
}
.subnav__list a {
  display: inline-block;
  padding: 4px 0;
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--c-silver);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color 180ms ease, border-color 180ms ease;
}
.subnav__list a:hover,
.subnav__list a:focus,
.subnav__list a.is-active {
  color: var(--c-white-smoke);
  border-bottom-color: var(--c-green);
}
.subnav__next {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--c-silver);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: auto;
  border-bottom: 2px solid transparent;
  transition: color 180ms ease, border-color 180ms ease;
}
.subnav__next::after {
  content: "→";
  font-size: 1em;
  line-height: 1;
  transition: transform 160ms ease;
}
.subnav__next:hover,
.subnav__next:focus {
  color: var(--c-white-smoke);
  border-bottom-color: var(--c-green);
}
.subnav__next:hover::after,
.subnav__next:focus::after { transform: translateX(3px); }

/* ==========================================================================
   Chapter hero
   ========================================================================== */

.chapter-hero {
  background: var(--c-black);
  color: var(--c-white-smoke);
  padding: clamp(48px, 7vw, 96px) 0;
}
.chapter-hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}
.chapter-hero__num {
  font-size: var(--fs-tiny);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-grey);
  margin: 0 0 16px;
  font-weight: 700;
}
.chapter-hero__num::after {
  content: "";
  display: block;
  width: 32px;
  height: 1px;
  background: var(--c-green);
  margin-top: 8px;
}
.chapter-hero__title {
  font-size: var(--fs-display);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1;
  margin: 0 0 24px;
  max-width: 14ch;
}
.chapter-hero__strap {
  font-size: var(--fs-lead);
  color: var(--c-silver);
  margin: 0 0 24px;
  max-width: 30em;
}
.chapter-hero__meta {
  display: flex;
  gap: 20px;
  font-size: var(--fs-tiny);
  color: var(--c-grey);
  flex-wrap: wrap;
}
.chapter-hero__image {
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
}
@media (min-width: 880px) {
  .chapter-hero__inner { grid-template-columns: 1.2fr 1fr; gap: 64px; }
  .chapter-hero__image { aspect-ratio: 4 / 5; }
  .chapter-hero__title--narrow {
    max-width: 11ch;
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: manual;
  }
}

/* ==========================================================================
   Article body
   ========================================================================== */

.article {
  background: var(--c-white-smoke);
  color: var(--c-black);
  padding: clamp(48px, 7vw, 96px) 0;
}
.article__inner {
  max-width: 760px;
  margin: 0 auto;
}
.article section { padding: 0 0 clamp(48px, 6vw, 72px); }
.article section + section { border-top: 1px solid var(--c-silver); padding-top: clamp(48px, 6vw, 72px); }
.article h2 {
  font-size: var(--fs-h1);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 0 0 24px;
  max-width: 18ch;
  scroll-margin-top: 160px;
}
.article h2 em { font-style: italic; }
.article h3 {
  font-size: var(--fs-h3);
  font-weight: 700;
  margin: 32px 0 12px;
}
.article p {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--c-slate);
  margin: 0 0 18px;
}
.article p.lead {
  font-size: var(--fs-lead);
  font-weight: 700;
  color: var(--c-black);
}
.article ul, .article ol { margin: 0 0 20px; padding-left: 1.5em; color: var(--c-slate); }
.article li { margin-bottom: 8px; line-height: 1.6; }

.article-eyebrow {
  font-size: var(--fs-tiny);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 16px;
  color: var(--c-dim);
}
.article-eyebrow::after {
  content: "";
  display: block;
  width: 28px;
  height: 1px;
  background: var(--c-black);
  margin-top: 8px;
}

/* Inline pull quote within article */
.article-quote {
  margin: 48px -24px;
  padding: 36px 32px 30px 36px;
  background: var(--c-black);
  color: var(--c-white-smoke);
  position: relative;
  overflow: hidden;
}
.article-quote::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 6px;
  background: var(--c-green);
}
.article-quote p {
  margin: 0;
  font-size: var(--fs-h3);
  font-weight: 500;
  font-style: italic;
  line-height: 1.4;
  color: var(--c-white-smoke);
  letter-spacing: -0.005em;
}
.article-quote cite {
  display: block;
  font-style: normal;
  font-size: var(--fs-tiny);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-white-smoke);
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.12);
  font-weight: 700;
}
.article-quote cite::before { content: "— "; }
@media (min-width: 720px) {
  .article-quote { margin: 48px -40px; padding: 40px 48px 34px 56px; }
}

/* Inline code block within article — matches article-quote breakout + colours */
.article-code {
  margin: 32px -24px;
  padding: 24px 28px;
  background: var(--c-black);
  color: var(--c-white-smoke);
  overflow-x: auto;
  position: relative;
}
.article-code::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 6px;
  background: var(--c-green);
}
.article-code code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--c-white-smoke);
  white-space: pre;
}
.article p code,
.article li code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.95em;
  background: var(--c-silver);
  color: var(--c-black);
  padding: 1px 6px;
  border-radius: 3px;
}
@media (min-width: 720px) {
  .article-code { margin: 32px -40px; padding: 28px 40px; }
}

/* Inline stat strip within article — dark editorial data band */
.stat-strip {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--c-slate);
  margin: clamp(40px, 5vw, 56px) 0;
}
@media (min-width: 720px) {
  .stat-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.stat-strip__item {
  background: var(--c-black);
  padding: clamp(28px, 3.4vw, 40px);
  display: flex;
  flex-direction: column;
  min-height: 240px;
  position: relative;
}
.stat-strip__item::before {
  content: attr(data-eyebrow);
  display: block;
  font-size: var(--fs-tiny);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-green);
  margin-bottom: clamp(12px, 1.6vw, 20px);
  min-height: 1.2em;
}
.stat-strip__item[data-eyebrow=""]::before,
.stat-strip__item:not([data-eyebrow])::before { content: ""; }
.stat-strip .stat-strip__num {
  font-size: clamp(2.6rem, 4.4vw, 3.6rem);
  font-weight: 900;
  letter-spacing: -0.05em;
  line-height: 0.88;
  margin: 0;
  color: var(--c-white-smoke);
}
.stat-strip .stat-strip__num span {
  font-size: 0.32em;
  vertical-align: 0.65em;
  margin-left: 4px;
  font-weight: 800;
  letter-spacing: 0;
  color: var(--c-green);
  white-space: nowrap;
}
.stat-strip .stat-strip__label {
  font-size: var(--fs-small);
  margin: 24px 0 0;
  padding-top: 16px;
  line-height: 1.45;
  color: var(--c-silver);
  font-weight: 500;
  position: relative;
  max-width: 32ch;
}
.stat-strip .stat-strip__label::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 32px;
  height: 2px;
  background: var(--c-green);
}

/* Data table */
.data-table {
  margin: 32px 0;
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-small);
  font-variant-numeric: tabular-nums;
}
.data-table caption {
  caption-side: top;
  text-align: left;
  padding: 18px 24px;
  background: var(--c-linen);
  border-bottom: 1px solid rgba(0,0,0,0.08);
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--c-black);
}
.data-table thead th {
  text-align: right;
  padding: 14px 10px;
  background: var(--c-black);
  color: var(--c-white-smoke);
  font-weight: 700;
  font-size: var(--fs-tiny);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.data-table thead th:first-child {
  text-align: left;
  padding-left: 24px;
}
.data-table thead th:last-child {
  padding-right: 24px;
}
.data-table tbody td {
  text-align: right;
  padding: 14px 10px;
  background: var(--c-linen);
  border-bottom: 1px solid rgba(0,0,0,0.08);
  color: var(--c-slate);
  font-weight: 500;
}
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody td:first-child {
  text-align: left;
  padding-left: 24px;
  font-weight: 700;
  color: var(--c-black);
}
.data-table tbody td:last-child { padding-right: 24px; }
.data-table tbody td:nth-child(2) {
  font-weight: 700;
  color: var(--c-black);
}
.data-table tbody tr:hover td { background: #E3E1DF; }
.data-table .rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--c-green);
  color: var(--c-black);
  font-weight: 800;
  width: 26px; height: 26px;
  border-radius: 50%;
  font-size: var(--fs-tiny);
  margin-right: 10px;
  vertical-align: middle;
}
@media (max-width: 640px) {
  .data-table { font-size: 0.7rem; }
  .data-table caption { padding: 12px 14px; }
  .data-table thead th { padding: 8px 3px; font-size: 0.6rem; letter-spacing: 0.04em; }
  .data-table thead th:first-child { padding-left: 12px; }
  .data-table thead th:last-child { padding-right: 12px; }
  .data-table tbody td { padding: 10px 3px; }
  .data-table tbody td:first-child { padding-left: 12px; }
  .data-table tbody td:last-child { padding-right: 12px; }
  .data-table .rank { width: 18px; height: 18px; font-size: 0.55rem; margin-right: 6px; }
}

/* Article bar chart */
.bar-chart {
  margin: 32px 0;
  padding: 24px;
  background: var(--c-linen);
}
.bar-chart__title { font-weight: 700; margin: 0 0 6px; font-size: var(--fs-small); }
.bar-chart__hint { font-size: var(--fs-tiny); color: var(--c-dim); margin: 0 0 18px; }
.bar-chart__group {
  margin: 0 0 18px;
  padding: 0 0 14px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.bar-chart__group:last-of-type { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.bar-chart__group-label {
  font-size: var(--fs-small);
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--c-black);
}
.bar-chart__row {
  display: grid;
  grid-template-columns: 130px 1fr 50px;
  gap: 12px;
  align-items: center;
  margin-bottom: 8px;
}
.bar-chart__row:last-child { margin-bottom: 0; }
.bar-chart__group .bar-chart__row { grid-template-columns: 96px 1fr 50px; }
.bar-chart__lbl { font-size: var(--fs-small); color: var(--c-dim); }
.bar-chart__bar {
  height: 12px;
  background: var(--c-black);
  transition: opacity 200ms ease;
  min-width: 2px;
}
.bar-chart__bar:hover { opacity: 0.7; }
.bar-chart__bar--green { background: var(--c-green); }
.bar-chart__bar--grey { background: var(--c-silver); }
.bar-chart__bar--dark   { background: #3A3A3A; }
.bar-chart__bar--mid    { background: #6C6C6C; }
.bar-chart__bar--silver { background: #B6B6B6; }
.bar-chart__bar--light  { background: #D8D8D8; }
.bar-chart__bar--age-18-24 { background: #B6B6B6; }
.bar-chart__bar--age-25-34 { background: var(--c-green); }
.bar-chart__bar--age-35-44 { background: #D8D8D8; }
.bar-chart__bar--age-45-54 { background: #1E1E1E; }
.bar-chart__bar--age-55-64 { background: #6C6C6C; }
.bar-chart__bar--age-65    { background: #FFFFFF; box-shadow: inset 0 0 0 1px #C6C3C2; }

/* Summary bar-chart variant: one bar per category, percentage inside the bar */
.bar-chart--summary .bar-chart__row {
  grid-template-columns: clamp(160px, 22vw, 220px) 1fr;
  gap: 16px;
  margin-bottom: 10px;
}
.bar-chart--summary .bar-chart__lbl {
  font-weight: 700;
  color: var(--c-black);
  font-size: var(--fs-small);
}
.bar-chart--summary .bar-chart__bar {
  height: 42px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  color: #fff;
  font-weight: 800;
  font-size: var(--fs-small);
  min-width: 64px;
}
.bar-chart--summary .bar-chart__bar--silver,
.bar-chart--summary .bar-chart__bar--light { color: var(--c-black); }
@media (max-width: 640px) {
  .bar-chart--summary .bar-chart__row {
    grid-template-columns: 1fr;
    gap: 6px;
    margin-bottom: 14px;
  }
  .bar-chart--summary .bar-chart__lbl { font-size: var(--fs-small); }
  .bar-chart--summary .bar-chart__bar {
    display: block;
    min-width: 0;
    height: 26px;
    padding: 0;
    overflow: visible;
    color: var(--c-black);
    font-size: var(--fs-tiny);
    line-height: 26px;
    white-space: nowrap;
    text-indent: calc(100% + 8px);
  }
}
.bar-chart__pct {
  font-size: var(--fs-small);
  font-weight: 700;
  text-align: right;
}
.bar-chart__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(0,0,0,0.08);
  font-size: var(--fs-tiny);
  color: var(--c-dim);
}
.bar-chart__key { display: inline-flex; align-items: center; gap: 8px; }
.bar-chart__key::before {
  content: "";
  display: inline-block;
  width: 14px; height: 10px;
  background: var(--c-black);
}
.bar-chart__key--green::before { background: var(--c-green); }
.bar-chart__key--grey::before { background: var(--c-silver); }
.bar-chart__key--black::before { background: var(--c-black); }
.bar-chart__key--dark::before { background: #3a3a3a; }
.bar-chart__key--mid::before { background: #6c6c6c; }
.bar-chart__key--light::before { background: #cfcfcf; }
.bar-chart__key--age-18-24::before { background: #B6B6B6; }
.bar-chart__key--age-25-34::before { background: var(--c-green); }
.bar-chart__key--age-35-44::before { background: #D8D8D8; }
.bar-chart__key--age-45-54::before { background: #1E1E1E; }
.bar-chart__key--age-55-64::before { background: #6C6C6C; }
.bar-chart__key--age-65::before    { background: #FFFFFF; box-shadow: inset 0 0 0 1px #C6C3C2; }

/* Stacked 100% bar chart */
.stack-chart {
  margin: 32px 0;
  padding: 18px 14px;
  background: var(--c-linen);
}
.stack-chart__title { font-weight: 700; margin: 0 0 6px; font-size: var(--fs-small); }
.stack-chart__hint { font-size: var(--fs-tiny); color: var(--c-dim); margin: 0 0 18px; }
.stack-chart__row {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}
.stack-chart__row:last-of-type { margin-bottom: 0; }
.stack-chart__row--total .stack-chart__lbl { font-weight: 800; color: var(--c-black); }
.stack-chart__row--total { margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px dashed rgba(0,0,0,0.15); }
.stack-chart__lbl {
  font-size: var(--fs-tiny);
  font-weight: 700;
  color: var(--c-dim);
  text-align: right;
}
.stack-chart__track {
  display: flex;
  width: 100%;
  height: 22px;
  background: #efefef;
  overflow: hidden;
  position: relative;
}
.stack-chart__seg {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--c-black);
  white-space: nowrap;
  overflow: hidden;
  transition: opacity 200ms ease;
}
.stack-chart__seg:hover { opacity: 0.8; }
.stack-chart__seg--green { background: var(--c-green); color: var(--c-black); }
.stack-chart__seg--dark  { background: #3a3a3a; color: #fff; }
.stack-chart__seg--mid   { background: #6c6c6c; color: #fff; }
.stack-chart__seg--silver{ background: #b6b6b6; color: var(--c-black); }
.stack-chart__seg--light { background: #d8d8d8; color: var(--c-black); }
.stack-chart__seg--lightest{ background: #ebebeb; color: var(--c-black); }
.stack-chart__seg[data-narrow]::after { content: ""; }
.stack-chart__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(0,0,0,0.08);
  font-size: var(--fs-tiny);
  color: var(--c-dim);
}
.stack-chart__key { display: inline-flex; align-items: center; gap: 8px; }
.stack-chart__key::before {
  content: "";
  display: inline-block;
  width: 14px; height: 10px;
  background: var(--c-black);
}
.stack-chart__key--green::before  { background: var(--c-green); }
.stack-chart__key--dark::before   { background: #3a3a3a; }
.stack-chart__key--mid::before    { background: #6c6c6c; }
.stack-chart__key--silver::before { background: #b6b6b6; }
.stack-chart__key--light::before  { background: #d8d8d8; }
.stack-chart__key--lightest::before{ background: #ebebeb; }

/* Shrink in-segment percentage labels on mobile */
@media (max-width: 640px) {
  .stack-chart__seg { font-size: 0.6rem; }
}

/* Recommendation card */
.reco {
  margin: 0 0 24px;
  background: var(--c-white-smoke);
  border-left: 4px solid var(--c-green);
  padding: 28px 28px 28px 40px;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 20px;
  align-items: start;
}
.reco__num {
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--c-black);
}
.reco h3 { margin: 0 0 8px; font-size: var(--fs-h3); }
.reco p { font-size: 1rem; margin: 0 0 10px; line-height: 1.55; color: var(--c-slate); }
.reco__action {
  display: inline-block;
  font-size: var(--fs-tiny);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--c-black);
  color: var(--c-white-smoke);
  padding: 6px 12px;
  margin-top: 8px;
}

/* Prev / Next chapter bar */
.chnav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  background: var(--c-black);
  color: var(--c-white-smoke);
}
.chnav a {
  display: block;
  padding: 32px var(--gutter);
  text-decoration: none;
  color: inherit;
  transition: background-color 200ms ease;
}
.chnav a:hover, .chnav a:focus { background: #2a2a2a; }
.chnav__dir { font-size: var(--fs-tiny); color: var(--c-grey); text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 8px; font-weight: 700; }
.chnav__num { font-size: var(--fs-small); color: var(--c-silver); margin-right: 8px; }
.chnav__name { font-size: var(--fs-h3); font-weight: 700; line-height: 1.2; margin: 0; }
.chnav__next { text-align: right; border-left: 0.5px solid var(--c-slate); }
@media (max-width: 640px) {
  .chnav { grid-template-columns: 1fr; }
  .chnav__next { border-left: 0; border-top: 0.5px solid var(--c-slate); text-align: left; }
}

/* ==========================================================================
   Cookie consent banner — bottom bar, dark
   ========================================================================== */

.cookie-consent {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 200;
  background: var(--c-black);
  color: var(--c-white-smoke);
  border-top: 1px solid var(--c-slate);
}
.cookie-consent__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.cookie-consent__text {
  margin: 0;
  font-size: var(--fs-small);
  line-height: 1.45;
  flex: 1 1 320px;
  color: var(--c-silver);
}
.cookie-consent__actions {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}
.cookie-consent__btn {
  display: inline-flex;
  align-items: center;
  background: var(--c-white-smoke);
  color: var(--c-black);
  border: 0;
  padding: 10px 18px;
  font-size: var(--fs-small);
  font-weight: 700;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}
.cookie-consent__btn:hover, .cookie-consent__btn:focus {
  background: var(--c-green);
  color: var(--c-black);
}
.cookie-consent__btn--ghost {
  background: transparent;
  color: var(--c-white-smoke);
  border: 1px solid var(--c-white-smoke);
  padding: 9px 17px;
}
.cookie-consent__btn--ghost:hover, .cookie-consent__btn--ghost:focus {
  background: var(--c-green);
  color: var(--c-black);
  border-color: var(--c-green);
}
@media (max-width: 640px) {
  .cookie-consent__inner { padding: 14px 16px; }
}