/* RG Newsletter — 11 Dec to 31 Dec 2024. Colours sampled from the PDF pages. */

@font-face { font-family: "Anton"; src: url("fonts/anton-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Bebas Neue"; src: url("fonts/bebasneue-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/poppins-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/poppins-medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/poppins-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --paper: #f4f4f4;
  --outside: #e4e4e2;
  --ink: #404040;
  --ink-soft: #6a6a6a;
  --blue: #269dd2;
  --blue-deep: #1c64b4;
  --blue-2: #2890f2;
  --red: #dc2c2c;
  --dark-red: #a01c18;
  --yellow: #f8e000;
  --card: #0c1014;
  --box: #343434;
  --rule: #d6d6d4;
  --display: "Anton", "Arial Narrow", Impact, sans-serif;
  --condensed: "Bebas Neue", "Arial Narrow", sans-serif;
  --body: "Poppins", "Segoe UI", Helvetica, Arial, sans-serif;

  --pad: clamp(1rem, 5cqw, 2.6rem);
  --gap: clamp(1rem, 3cqw, 1.6rem);
  --text: clamp(0.94rem, 2.15cqw, 1.08rem);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--outside);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
a:focus-visible, .btn:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

.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;
}

/* ---------- the single centred column ---------- */
.page {
  container-type: inline-size;
  width: min(100%, clamp(640px, 56vw, 780px));
  margin: 0 auto;
  background: var(--paper) url("assets/paper.jpg") repeat-y top center / 100% auto;
  box-shadow: 0 0 40px rgba(0, 0, 0, .12);
}

.story { padding: var(--gap) var(--pad); }
.story > * + * { margin-top: var(--gap); }
.rule { border: 0; border-top: 1px solid var(--rule); margin: 0 var(--pad); }
.rule-dark { border-top: 2px solid #2c2c2c; margin: 0 var(--pad) var(--gap); }

.prose { font-size: var(--text); line-height: 1.5; }
.prose p { margin: 0 0 1em; }
.prose p:last-child { margin-bottom: 0; }
.prose strong { font-weight: 700; }
.centred { text-align: center; }
.centred .btn { margin-top: .25rem; }

/* ---------- headlines ---------- */
.hl {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: .92;
  letter-spacing: .005em;
  color: var(--ink);
}
.hl-line { display: block; }
.hl-sub { font-family: var(--condensed); font-weight: 400; text-transform: uppercase; line-height: .95; margin: 0; color: var(--ink); }

.c-blue { color: var(--blue); }
.c-blue-deep { color: var(--blue-deep); }
.c-blue-2 { color: var(--blue-2); }
.c-red { color: var(--red); }
.c-grey { color: var(--ink-soft); }

/* ---------- buttons, captions, bars ---------- */
.btn {
  display: inline-block;
  min-height: 44px;
  padding: .55em 1.6em;
  background: var(--yellow);
  color: #111;
  font-family: var(--body);
  font-weight: 700;
  font-size: clamp(.85rem, 1.9cqw, .95rem);
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1.6;
  transition: filter .15s;
}
.btn:hover { filter: brightness(.95); }

.bar {
  margin: 0;
  background: var(--box);
  color: #fff;
  text-align: center;
  font-family: var(--body);
  font-weight: 700;
  font-size: clamp(.9rem, 2.1cqw, 1.05rem);
  padding: .55em 1em;
}

.video-block { position: relative; text-align: center; }
.video-link { display: inline-block; position: relative; text-decoration: none; }
.video-link img { display: block; }
.btn-overlap {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 45%);
  white-space: nowrap;
}
.video-block { padding-bottom: 1.4rem; }
.video-wide .video-link { display: block; margin: 0 calc(-1 * var(--pad)); }
.video-wide img { width: 100%; }
.video-link:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

.grid { display: grid; gap: clamp(.6rem, 2cqw, 1.25rem); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); max-width: 92%; margin-inline: auto; }
.thumb { display: block; text-decoration: none; color: var(--ink); min-height: 44px; }
.thumb img { width: 100%; }
.thumb-caption {
  display: block;
  text-align: center;
  font-size: clamp(.72rem, 1.55cqw, .8rem);
  font-weight: 500;
  line-height: 1.3;
  margin-top: .5em;
}
.thumb:hover img { filter: brightness(1.06); }

/* ---------- 1. tribute ---------- */
.story-tribute { text-align: center; padding-top: .5rem; }
.masthead-art { width: 100%; }
.tribute-art { width: 100%; }
.hl-tribute { font-size: clamp(2.6rem, 10.2cqw, 5rem); line-height: 1; margin-top: -1rem; }
.hl-tribute-sub { font-size: clamp(1.6rem, 6.2cqw, 3.1rem); }
.story-tribute .prose { padding: 0 clamp(0rem, 3cqw, 2rem); }
.tribute-collage { width: 92%; margin-inline: auto; }

/* ---------- 2. battle ---------- */
.hero-split { display: grid; grid-template-columns: 58% 1fr; align-items: center; gap: 0 var(--gap); }
.battle-photo { margin-left: calc(-1 * var(--pad)); width: calc(100% + var(--pad)); }
.hl-battle { font-size: clamp(2.7rem, 11.5cqw, 5.7rem); line-height: .9; text-align: right; }
.hl-battle .hl-line:first-child { font-size: .62em; }
.hl-battle .hl-line:nth-child(4), .hl-battle .hl-line:nth-child(5) { font-size: .62em; font-family: var(--condensed); letter-spacing: .01em; }
.quote { margin: 1.4em 0 0; padding: 0; font-weight: 500; }
.quote p { margin: 0; }
.quote-by { font-weight: 700; }

/* ---------- 3. protest ---------- */
.hero-split-protest { grid-template-columns: 52% 1fr; align-items: end; }
.protest-photo { margin-left: calc(-1 * var(--pad)); width: calc(100% + var(--pad)); }
.protest-text { padding-bottom: clamp(1rem, 6cqw, 3.5rem); font-size: clamp(.95rem, 2.5cqw, 1.2rem); }
.protest-text p { margin-bottom: 1em; }

/* ---------- 4. parbhani ---------- */
.hero-parbhani { position: relative; }
.hl-murdered { font-size: clamp(3.4rem, 17cqw, 8.4rem); line-height: .88; }
.hl-murdered .hl-line:first-child { letter-spacing: .01em; }
.hl-murdered .hl-line:nth-child(2), .hl-murdered .hl-line:nth-child(3) { font-size: .36em; font-family: var(--condensed); line-height: 1; }
.hl-murdered .hl-line:nth-child(2) { font-family: var(--display); font-size: .34em; }
.hl-murdered .hl-line:nth-child(2) .c-grey { font-family: var(--condensed); }
@container (min-width: 560px) {
  .hero-parbhani .hl-murdered .hl-line:nth-child(n+2) {
    position: absolute; right: 2%; text-align: left; width: 33%;
  }
  .hero-parbhani .hl-murdered .hl-line:nth-child(2) { top: 40%; }
  .hero-parbhani .hl-murdered .hl-line:nth-child(3) { top: 40%; margin-top: 1.05em; }
  .parbhani-photo { margin-top: -21%; }
}
.parbhani-photo { width: 100%; margin-top: -8%; }

/* ---------- 5. event in focus ---------- */
.story-focus { text-align: center; }
.hl-focus {
  font-size: clamp(2.4rem, 9cqw, 4.4rem);
  color: var(--dark-red);
  display: flex; align-items: center; gap: .4em; justify-content: center;
}
.hl-focus::before, .hl-focus::after { content: ""; flex: 1; height: 2px; background: var(--dark-red); max-width: 4em; }
.hl-food { font-size: clamp(2.5rem, 9.5cqw, 4.8rem); line-height: .95; text-align: center; }
.hl-food .hl-line:nth-child(2) { font-size: .75em; }

/* ---------- 6. snapshot showcase ---------- */
.story-showcase { text-align: center; }
.hl-showcase { font-size: clamp(2.6rem, 10cqw, 5rem); text-align: center; }
.hl-showcase .hl-line { display: inline; }
.hl-showcase .c-blue { margin-left: .18em; }
.tile { display: block; text-decoration: none; color: #fff; overflow: hidden; }
.tile img { width: 100%; }
.tile-dark { margin: 0 calc(-1 * var(--pad)); background: var(--card); }
.tile-dark-caption {
  display: block;
  max-width: 82%; margin-inline: auto;
  font-family: var(--condensed);
  font-size: clamp(1.6rem, 5.7cqw, 2.85rem);
  line-height: .96;
  text-transform: uppercase;
  padding: clamp(.8rem, 3cqw, 1.5rem) var(--pad) clamp(.7rem, 2.5cqw, 1.3rem);
}
.tile-dark-caption .c-red { display: block; }
.tile .tap, .tap { width: clamp(1.9rem, 5.5cqw, 2.7rem); margin: .5em auto 0; }
.tiles { display: grid; gap: var(--gap); width: 92%; margin-inline: auto; }
.tiles .tile { text-align: center; }
.tiles .tile > img { width: 100%; }
.tile-caption {
  display: flex; align-items: center; justify-content: center; gap: .6em;
  background: var(--box);
  width: 80%; margin: -6% auto 0; position: relative;
  padding: .6em 1em;
  font-family: var(--body);
  font-size: clamp(.72rem, 1.6cqw, .82rem);
  font-weight: 400;
  line-height: 1.35;
  text-align: center;
}
.tile .tile-caption .tap { width: clamp(1.1rem, 3cqw, 1.5rem); margin: 0; flex: none; }
.tile:hover img:first-child { filter: brightness(1.06); }
.subscribe { display: block; width: 78%; margin-inline: auto; min-height: 44px; }

/* ---------- 7. look back / BJNY ---------- */
.story-bjny { text-align: center; }
.hl-lookback { display: flex; align-items: center; justify-content: center; gap: .35em; font-size: clamp(4.2rem, 19cqw, 9.6rem); line-height: .85; }
.hl-lookback .hl-line:first-child { font-family: var(--condensed); font-size: .34em; line-height: .9; }
.hl-lookback .hl-line:nth-child(2) { font-size: 1em; letter-spacing: .01em; }
.story-bjny .hl-lookback + img { width: 100%; margin-top: 0; }
.hl-bjny { font-size: clamp(2.3rem, 8.6cqw, 4.3rem); white-space: nowrap; line-height: .9; margin-top: -.6rem; }
.story-bjny .hl-sub { font-size: clamp(1.4rem, 5.3cqw, 2.6rem); margin-top: .35rem; }

/* ---------- 8. lok sabha ---------- */
.hero-overlay { position: relative; }
.hero-overlay img { width: 100%; }
.overlay-text { position: absolute; left: 0; top: 0; }
.hero-loksabha .overlay-text { left: 4%; top: 2%; width: 52%; }
.hl-loksabha { font-size: clamp(2.2rem, 9.6cqw, 4.7rem); line-height: .88; }
.hl-loksabha-sub { font-size: clamp(1rem, 4.2cqw, 2.05rem); margin-top: .3em; }

/* ---------- 9. listening ---------- */
.hero-listening .overlay-text { left: 4%; top: 0; width: 55%; }
.hl-listening { font-size: clamp(1.7rem, 7.1cqw, 3.5rem); line-height: .95; font-family: var(--condensed); }
.hl-listening .hl-line:nth-child(3) { font-family: var(--display); font-size: 2.15em; line-height: .86; margin-top: .03em; }

/* ---------- 10. raising / numbers ---------- */
.hero-split-raising { grid-template-columns: 46% 1fr; align-items: center; }
.raising-photo { margin-left: calc(-1 * var(--pad) / 2); width: 100%; }
.hl-raising { font-size: clamp(2.4rem, 9.4cqw, 4.6rem); line-height: .9; }
.hl-raising .hl-line:first-child, .hl-raising .hl-line:last-child { font-size: .62em; font-family: var(--condensed); line-height: 1; }
.hl-raising .hl-line:first-child { margin-bottom: .1em; }
.hl-raising .hl-line:last-child { margin-top: .1em; }

.numbers { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: var(--gap); padding-top: var(--gap); }
.numbers-art { position: relative; }
.numbers-portrait { width: 100%; position: relative; z-index: 1; }
.numbers-circle {
  position: absolute; z-index: 0;
  width: 66%; aspect-ratio: 1; border-radius: 50%;
  background: var(--blue);
  left: 38%; top: 30%;
}
.numbers-states {
  position: absolute; z-index: 2;
  left: 58%; top: 40%; width: 46%;
  color: #fff; text-align: center;
  font-size: clamp(.7rem, 2cqw, 1rem); font-weight: 700; line-height: 1.15;
}
.numbers-states .stat-label { display: block; }
.numbers-states .stat-value { display: block; font-family: var(--display); font-size: 4.2em; line-height: .9; margin-top: .05em; }
.hl-numbers { position: absolute; z-index: 2; left: 0; bottom: 6%; font-size: clamp(2.6rem, 9.4cqw, 4.7rem); line-height: .9; }
.hl-numbers .hl-line:nth-child(2) { font-family: var(--condensed); font-size: .42em; color: var(--ink); line-height: 1; margin-top: .1em; }

.stats { list-style: none; margin: 0; padding: 0 0 var(--gap); display: grid; gap: clamp(.5rem, 1.6cqw, .9rem); }
.stats li { font-size: clamp(.78rem, 2cqw, 1rem); font-weight: 500; line-height: 1.15; }
.stats li:nth-child(even) { text-align: right; }
.stats .stat-label { display: block; }
.stats .stat-value { display: block; font-family: var(--display); color: var(--blue); font-size: 2.4em; line-height: 1; }

/* ---------- footer ---------- */
.footer { padding: var(--gap) var(--pad) calc(var(--gap) * 1.5); }
.social { display: flex; justify-content: center; gap: clamp(.6rem, 2.4cqw, 1.2rem); }
.social-icon { width: clamp(2.2rem, 6.2cqw, 3rem); }

/* ---------- narrow column ---------- */
@container (max-width: 559px) {
  .hero-split, .hero-split-protest, .hero-split-raising { grid-template-columns: 1fr; }
  .hl-battle { text-align: center; margin-top: .5rem; }
  .battle-photo { width: 78%; margin: 0 auto; }
  .protest-photo { width: 70%; margin: 0 auto; }
  .protest-text { text-align: center; padding-top: var(--gap); padding-bottom: 0; }
  .raising-photo { width: 62%; margin: 0 auto; }
  .hl-raising { text-align: center; margin-top: .6rem; }
  .hl-murdered { text-align: center; }
  .parbhani-photo { margin-top: 0; }
  .numbers { grid-template-columns: 1fr; }
  .numbers-art { max-width: 80%; margin-inline: auto; }
  .stats li:nth-child(even) { text-align: left; }
  .stats { grid-template-columns: 1fr 1fr; }
  .grid-2 { max-width: 100%; }
  .hl-focus::before, .hl-focus::after { max-width: 1.5em; }
}
@container (max-width: 340px) {
  .grid-3, .grid-2, .stats { grid-template-columns: 1fr; }
}
@container (min-width: 341px) and (max-width: 559px) {
  .grid-3 { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }