/* ==========================================================================
   NRI Affairs — home.css
   Front-page modules only. Loads after base.css.
   Every selector is scoped under `body.home` so nothing can reach the global
   chrome. The homepage comp's own chrome (.topbar/.masthead/nav/.ticker) is
   retired — see work/DESIGN-SYSTEM.md for the full deletion list.
   Generated from the supplied comps. Do not hand-edit values: every colour,
   size, weight, radius, shadow and transition below traces back to
   work/extract/home.css or work/extract/article.css.
   See work/DESIGN-SYSTEM.md for the token table, conflicts and inventory.
   ========================================================================== */


body.home {
  --navy-900: #0a1524;
  --navy-850: #0d1a2d;
  --navy-800: #112236;
  --navy-750: #152840;
  --navy-700: #1b3251;
  --line: rgba(173,194,224,.13);
  --line-2: rgba(173,194,224,.22);
  --ink: #eef3f9;
  --ink-2: #a9b8cc;
  --ink-3: #7d8da4;                          /* was #76869d — 4.33:1 on --navy-800 at 10px bold (A11Y-10); 4.76:1 now */
  --gold: #d6ac5b;
  --gold-bright: #ecca7f;
  --gold-deep: #a87f33;
  --gold-paper: #7d5b22;                     /* base.css:667 — paper-safe gold, for the cream cards in The Break */
  --ink-faint-paper: #67655e;                /* base.css:668 */
  --red: #e0584a;
  --green: #5fb98f;
  --display: "Fraunces",Georgia,serif;
  --serif: "Newsreader",Georgia,serif;
  --sans: "Hanken Grotesk",system-ui,sans-serif;
  /* comp value: 1300px — narrowed 60px to match the global chrome's --site-width */
  --maxw: 1240px;
}

body.home {
  font-family: var(--sans);
  background: var(--navy-900);
  color: var(--ink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

body.home::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}

body.home .wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 28px;
  position: relative;
  z-index: 2;
}

body.home .kicker {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
}

body.home .meta {
  font-size: 11.5px;
  color: var(--ink-3);
  letter-spacing: .02em;
}

body.home .meta .au {
  color: var(--ink-2);
  font-weight: 600;
}

body.home .ph {
  position: relative;
  overflow: hidden;
  background: var(--navy-750);
}

body.home .ph img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

/* DEVIATION from the comp — hero/feature legibility over light photography.
   The comp's ramp reached its .5 stop at 40% and was effectively clear from 78%
   up, which was safe only because the comp shipped a dark photograph under a
   two-line headline. A light featured image behind a three-line headline leaves
   the gold kicker on bare picture (measured 1.03:1). Same colour, same three
   stops, same order — only the two upper stop positions are raised so the ramp
   spans the whole card and the text block is always inside it.
   Reversible by restoring the two positions to 40% and 78%. */
body.home .ph .scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(0deg,rgba(7,15,28,.94) 0%,rgba(7,15,28,.5) 78%,rgba(7,15,28,.05) 100%);
}

body.home .ph .over {
  position: relative;
  z-index: 3;
}

/* --------------------------------------------------------------------------
   HOME-04 — the kicker over a light lead image
   --------------------------------------------------------------------------
   The scrim above is a vertical ramp and the kicker sits at the TOP of the
   `.over` block, where its alpha is lowest — .05 at the 100% stop. With a light
   photograph underneath (the current lead is a plate of banknotes: mean
   luminance 0.239, max 0.996) the gold `.kicker` composited at 1.35:1. The
   headline is fine at 4.03:1 against a 3:1 large-text threshold, the dek 6.85:1
   and the byline 5.67:1 — it is the kicker alone, and only because of where it
   sits in the gradient.

   A local plate rather than a heavier global ramp: raising the scrim's upper
   stops would darken the whole top third of every hero and every feature card,
   which is a comp change; this affects one 10.5px label. Measured against the
   worst case there is — pure white underneath, no scrim at all — rgba(7,15,28,
   .82) composites to rgb(51,58,69) and the gold reads 5.4:1. With the scrim's
   own contribution it is better than that everywhere.

   Editorial mitigation (dark lead images) is not a fix: the editor cannot see
   the ratio and the module takes whatever the newest post carries.
   -------------------------------------------------------------------------- */
body.home .ph .over .kicker {
  background: rgba(7, 15, 28, .82);
  border-radius: 2px;
  display: inline-block;
  padding: 3px 7px;
  margin-left: -7px;                         /* optical: keep the text on the grid */
}

body.home .ph::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  box-shadow: inset 0 0 0 1px var(--line);
  pointer-events: none;
}

body.home .f1 {
  background: radial-gradient(120% 120% at 20% 0%,#27486f,#16273e 55%,#0e1b2c);
}

body.home .f2 {
  background: radial-gradient(120% 130% at 80% 10%,#3a5070,#1c2c44 60%,#101d2f);
}

body.home .f3 {
  background: radial-gradient(130% 120% at 10% 90%,#7a5e2e,#2a3147 55%,#111e30);
}

body.home .f4 {
  background: radial-gradient(120% 120% at 70% 20%,#2f5d5a,#1a2c3e 60%,#0f1c2d);
}

body.home .f5 {
  background: radial-gradient(120% 120% at 30% 30%,#5a3550,#241f3a 55%,#101a2c);
}

body.home .f6 {
  background: radial-gradient(120% 130% at 85% 85%,#274a6b,#172a42 60%,#0e1c2e);
}

body.home .logo {
  font-family: var(--display);
  font-weight: 600;
  font-size: 52px;
  letter-spacing: .01em;
  line-height: 1;
}

body.home .logo .a {
  color: var(--gold);
}

body.home .sect {
  padding: 32px 0;
  border-bottom: 1px solid var(--line);
}

body.home .sect.nb {
  border-bottom: 0;
}

body.home .sect-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 20px;
}

body.home .sect-head h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink);
}

body.home .sect-head .ln {
  flex: 1;
  height: 1px;
  background: var(--line-2);
}

body.home .sect-head .more {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold);
  white-space: nowrap;
}

/* Pause with Nandini interview wall */

body.home .interview-wall {
  margin-top: 28px;
  padding-top: 25px;
  border-top: 1px solid var(--line);
}

body.home .interview-wall-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}

body.home .interview-wall-head h3 {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: .01em;
}

body.home .interview-wall-head p {
  font-family: var(--serif);
  font-size: 13px;
  color: var(--ink-3);
}

body.home .portrait-wall {
  display: grid;
  grid-template-columns: repeat(6,minmax(0,1fr));
  gap: 4px;
}

body.home .portrait-tile {
  display: block;
  min-width: 0;
  color: inherit;
}

body.home .portrait-art {
  position: relative;
  display: block;
  aspect-ratio: 4/5;
  overflow: hidden;
  background: #e8e3d7;
}

body.home .portrait-art img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
  transition: transform .35s ease;
}

body.home .portrait-art::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg,rgba(255,255,255,.02),rgba(8,14,22,.06));
  mix-blend-mode: multiply;
}

body.home .portrait-art::after {
  content: "▶";
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border: 1px solid rgba(245,239,225,.66);
  background: rgba(8,18,31,.64);
  color: #fff;
  font-size: 8px;
  border-radius: 50%;
  opacity: .82;
}

body.home .portrait-tile:hover .portrait-art img {
  transform: scale(1.025);
}

body.home .portrait-name,
body.home .portrait-role {
  display: block;
}

body.home .portrait-name {
  margin-top: 8px;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.15;
  color: var(--ink);
}

body.home .portrait-role {
  margin-top: 3px;
  font-size: 9px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
}

/* hero */

body.home .hero {
  padding: 28px 0 32px;
  border-bottom: 1px solid var(--line);
}

body.home .hero-grid {
  display: grid;
  grid-template-columns: 1.55fr 1.05fr .85fr;
  gap: 0;
}

body.home .hero-grid > * {
  padding: 0 30px;
}

body.home .hero-grid > :first-child {
  padding-left: 0;
}

body.home .hero-grid > :last-child {
  padding-right: 0;
}

body.home .col-mid {
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
}

body.home .lead .ph {
  height: 440px;
  border-radius: 5px;
  display: flex;
  align-items: flex-end;
}

body.home .lead .over {
  padding: 26px;
}

body.home .lead h1 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 40px;
  line-height: 1.05;
  letter-spacing: -.012em;
  margin: 12px 0 0;
  color: #fff;
}

body.home .lead .dek {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.42;
  color: var(--ink-2);
  margin-top: 13px;
  max-width: 46ch;
}

body.home .lead .byline {
  margin-top: 15px;
}

body.home .col-lead {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

body.home .aaf-ad {
  position: relative;
  display: block;
  flex: 1;
  min-height: 210px;
  margin-top: 20px;
  overflow: hidden;
  isolation: isolate;
  border-radius: 4px;
  background: #f1b9cf;
  color: #181017;
}

body.home .aaf-ad::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(24,16,23,.14);
}

body.home .aaf-ad-art {
  position: absolute;
  inset: 0 0 0 34%;
  z-index: 1;
  overflow: hidden;
}

body.home .aaf-ad-art img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 46%;
  transition: transform .5s cubic-bezier(.2,.7,.3,1);
}

body.home .aaf-ad-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,#f1b9cf 0%,rgba(241,185,207,.78) 13%,rgba(241,185,207,0) 43%);
}

body.home .aaf-ad-copy {
  position: relative;
  z-index: 3;
  display: flex;
  min-height: 100%;
  width: 50%;
  padding: 17px 0 17px 19px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

/* A11Y-R3-05: the disclosure was 8px at rgba(24,16,23,.58) — #735764 on
   #f1b9cf, 3.84:1, the only non-decorative contrast failure on the front page.
   Now 11px at .8 alpha, #43323c, 7.15:1. Label only: `.aaf-ad` keeps its
   min-height and flex sizing and `.aaf-ad-copy` centres its column inside the
   same box, so the slot's position and size are unchanged (contract §8). */
body.home .aaf-sponsored {
  margin-bottom: 9px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: rgba(24,16,23,.8);
}

body.home .aaf-ad h2 {
  font-family: var(--sans);
  font-size: 25px;
  font-weight: 700;
  line-height: .91;
  letter-spacing: -.055em;
  color: #181017;
}

body.home .aaf-ad h2 span {
  display: block;
  margin-top: 5px;
  font-family: var(--display);
  font-size: 27px;
  font-style: italic;
  font-weight: 500;
  letter-spacing: -.035em;
}

body.home .aaf-ad-meta {
  margin-top: 10px;
  font-size: 9.5px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: .025em;
  color: rgba(24,16,23,.74);
}

body.home .aaf-ad-cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 13px;
  padding: 8px 11px;
  background: #181017;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background .2s,color .2s,transform .2s;
}

body.home .aaf-ad-cta::after {
  content: "↗";
  font-size: 12px;
  line-height: 1;
}

body.home .aaf-ad:hover .aaf-ad-art img {
  transform: scale(1.025);
}

body.home .aaf-ad:hover .aaf-ad-cta {
  background: #fff;
  color: #181017;
  transform: translateY(-1px);
}

body.home .mid-item {
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

body.home .mid-item:last-child {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}

body.home .mid-item .ph {
  height: 150px;
  border-radius: 4px;
  margin-bottom: 11px;
}

body.home .mid-item h3 {
  font-family: var(--display);
  font-weight: 500;
  font-size: 21px;
  line-height: 1.1;
  margin: 6px 0 7px;
  letter-spacing: -.01em;
}

body.home .mid-item .dek {
  font-family: var(--serif);
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.38;
}

body.home .rail h3.rh {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  padding-bottom: 9px;
  border-bottom: 2px solid var(--gold);
  margin-bottom: 13px;
  display: inline-block;
}

body.home .mostread {
  margin-top: 22px;
}

body.home .mr-item {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

body.home .mr-item:last-child {
  border-bottom: 0;
}

body.home .mr-item .n {
  font-family: var(--display);
  font-size: 23px;
  font-weight: 600;
  color: var(--gold-deep);
  line-height: .9;
  width: 22px;
  flex-shrink: 0;
}

body.home .mr-item p {
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.22;
  color: var(--ink);
}

body.home .mr-item .sh {
  display: block;
  font-size: 10.5px;
  color: var(--ink-3);
  margin-top: 3px;
  font-family: var(--sans);
}

/* marquee */

body.home .marquee {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 18px 22px;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  background: linear-gradient(90deg,rgba(214,172,91,.07),rgba(214,172,91,0));
  margin-top: 4px;
}

body.home .marquee .spon {
  font-size: 9.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-deep);
  font-weight: 700;
}

body.home .marquee .box {
  width: 130px;
  height: 48px;
  border: 1px dashed var(--gold-deep);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10.5px;
  color: var(--gold);
  font-weight: 600;
  flex-shrink: 0;
}

body.home .marquee .txt b {
  font-family: var(--serif);
  font-size: 16px;
  color: var(--ink);
}

body.home .marquee .txt span {
  display: block;
  font-size: 12.5px;
  color: var(--ink-3);
  margin-top: 2px;
}

/* big read */

body.home .bigread {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 34px;
  align-items: center;
}

body.home .bigread .ph {
  height: 330px;
  border-radius: 5px;
}

body.home .bigread h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 34px;
  line-height: 1.06;
  letter-spacing: -.012em;
  margin: 12px 0 12px;
}

body.home .bigread .dek {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 50ch;
}

body.home .bigread .byline {
  margin-top: 16px;
}

/* desks */

body.home .desks {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 22px;
}

body.home .dk {
  cursor: pointer;
}

body.home .dk .ph {
  height: 150px;
  border-radius: 4px;
  margin-bottom: 11px;
}

body.home .dk .place {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
}

body.home .dk h3 {
  font-family: var(--display);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.14;
  margin: 6px 0;
}

body.home .native {
  grid-column: span 4;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 16px 22px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--navy-850);
  margin-top: 4px;
}

body.home .native .box {
  width: 96px;
  height: 60px;
  background: var(--navy-750);
  border-radius: 4px;
  flex-shrink: 0;
  border: 1px solid var(--line);
}

body.home .native .sp {
  font-size: 9.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 700;
}

body.home .native b {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 500;
  display: block;
  margin-top: 4px;
  color: var(--ink);
}

/* toolkit */

body.home .toolkit {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 18px;
}

body.home .tk {
  background: var(--navy-800);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 22px 20px;
  transition: .2s;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

body.home .tk::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: .25s;
}

body.home .tk:hover {
  background: var(--navy-750);
}

body.home .tk:hover::before {
  transform: scaleX(1);
}

body.home .tk .ic {
  font-family: var(--display);
  font-size: 25px;
  font-weight: 600;
  color: var(--gold);
}

body.home .tk h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 19px;
  margin: 13px 0 6px;
}

body.home .tk p {
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.45;
}

body.home .tk .partner {
  margin-top: 13px;
  padding-top: 11px;
  border-top: 1px solid var(--line);
  font-size: 10px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* visa list */

body.home .visa {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 0 36px;
}

body.home .vrow {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

body.home .vrow .n {
  font-family: var(--display);
  font-size: 14px;
  color: var(--gold-deep);
  font-weight: 600;
  flex-shrink: 0;
  width: 18px;
}

body.home .vrow :is(h3, h4) {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 16.5px;
  line-height: 1.22;
}

body.home .vrow .sh {
  font-size: 10.5px;
  color: var(--ink-3);
  margin-top: 4px;
}

body.home .vrow .pill {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid var(--line-2);
  border-radius: 20px;
  padding: 3px 9px;
  align-self: center;
}

/* nandini */

body.home .nandini {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 30px;
  align-items: stretch;
}

body.home .nandini .feat .ph {
  height: 320px;
  border-radius: 6px;
  display: flex;
  align-items: flex-end;
}

body.home .nandini .play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.85);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 21px;
  background: rgba(10,21,36,.4);
  z-index: 5;
  transition: .2s;
}

body.home .nandini .feat:hover .play {
  background: var(--gold);
  border-color: var(--gold);
  color: #1a1303;
}

body.home .nandini .feat .over {
  padding: 22px;
}

body.home .nandini .feat h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.1;
  margin-top: 8px;
  color: #fff;
}

body.home .nandini .feat .dek {
  font-family: var(--serif);
  font-size: 14px;
  color: var(--ink-2);
  margin-top: 7px;
}

body.home .ep {
  display: flex;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}

body.home .ep:first-child {
  padding-top: 0;
}

body.home .ep:last-child {
  border-bottom: 0;
}

body.home .ep .num {
  font-family: var(--display);
  font-size: 19px;
  color: var(--gold-deep);
  font-weight: 600;
  width: 34px;
  flex-shrink: 0;
}

body.home .ep h4 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 15.5px;
  line-height: 1.22;
}

body.home .ep .meta {
  margin-top: 4px;
}

/* cartoon */

body.home .cartoon {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 34px;
  align-items: center;
}

body.home .cartoon .frame {
  background: #f3efe6;
  border-radius: 6px;
  padding: 14px;
  border: 1px solid var(--line-2);
}

body.home .cartoon .frame img {
  width: 100%;
  display: block;
  border-radius: 3px;
}

body.home .cartoon .frame .fb {
  width: 100%;
  height: 420px;
  border-radius: 3px;
  background: radial-gradient(circle at 50% 40%,#cdbfa0,#9a875f);
}

body.home .cartoon .cap {
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  font-size: 28px;
  line-height: 1.15;
  color: #fff;
}

body.home .cartoon p {
  font-family: var(--serif);
  font-size: 15px;
  color: var(--ink-2);
  margin-top: 12px;
  line-height: 1.5;
  max-width: 42ch;
}

body.home .cartoon .sig {
  margin-top: 16px;
  font-size: 12px;
  color: var(--ink-3);
  letter-spacing: .04em;
}

/* voices */

body.home .voices {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
}

body.home .voices > * {
  padding: 0 26px;
  border-right: 1px solid var(--line);
}

body.home .voices > :first-child {
  padding-left: 0;
}

body.home .voices > :last-child {
  padding-right: 0;
  border-right: 0;
}

body.home .vx {
  display: flex;
  gap: 13px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
}

body.home .vx:first-child {
  padding-top: 0;
}

body.home .vx:last-child {
  border-bottom: 0;
}

body.home .vx .av {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--navy-700);
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-weight: 600;
  font-size: 14px;
  flex-shrink: 0;
  border: 1px solid var(--line-2);
}

body.home .vx :is(h3, h4) {
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  font-size: 17px;
  line-height: 1.18;
  overflow-wrap: anywhere;
}

body.home .vx > :not(.av) {
  min-width: 0;
}

body.home .vx .au {
  margin-top: 5px;
  font-size: 11px;
  color: var(--ink-3);
}

body.home .vx .au b {
  color: var(--ink-2);
  font-weight: 600;
  font-style: normal;
}

/* culture */

body.home .culture {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 22px;
}

body.home .cu {
  cursor: pointer;
}

body.home .cu .ph {
  height: 200px;
  border-radius: 5px;
  margin-bottom: 12px;
}

body.home .cu .kicker {
  margin-bottom: 5px;
  display: block;
}

body.home .cu h3 {
  font-family: var(--display);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.12;
}

body.home .cu .dek {
  font-family: var(--serif);
  font-size: 13.5px;
  color: var(--ink-2);
  margin-top: 7px;
  line-height: 1.4;
}

/* books we are reading */

body.home .bookshelf {
  display: grid;
  grid-template-columns: repeat(5,1fr);
  gap: 22px;
}

body.home .book {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

body.home .book-cover {
  aspect-ratio: 2/3;
  border-radius: 5px;
  display: block;
  position: relative;
  overflow: hidden;
  background: #ece7dc;
  box-shadow: 0 15px 30px rgba(0,0,0,.24);
  transition: transform .22s ease,box-shadow .22s ease;
}

body.home .book-cover img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: #ece7dc;
}

body.home .book-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: inherit;
  pointer-events: none;
}

body.home .book:hover .book-cover {
  transform: translateY(-5px);
  box-shadow: 0 22px 38px rgba(0,0,0,.32);
}

body.home .book h3 {
  font-family: var(--display);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.15;
  margin-top: 15px;
}

body.home .book p {
  font-size: 11.5px;
  color: var(--ink-3);
  margin-top: 5px;
}

body.home .book .amazon {
  margin-top: 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold);
}

/* Hindi reading shelf */

body.home .hindi-desk {
  position: relative;
  overflow: hidden;
  background: linear-gradient(115deg,rgba(214,172,91,.055),rgba(214,172,91,0) 43%);
}

body.home .hindi-desk::before {
  content: "अ";
  position: absolute;
  right: -12px;
  top: -82px;
  font-family: "Noto Serif Devanagari","Nirmala UI",serif;
  font-size: 360px;
  font-weight: 700;
  line-height: 1;
  color: rgba(214,172,91,.026);
  pointer-events: none;
}

body.home .hindi-head {
  align-items: center;
  margin-bottom: 22px;
}

body.home .hindi-head h2 {
  font-family: "Noto Serif Devanagari","Nirmala UI",serif;
  font-size: 25px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}

body.home .hindi-head h2 span {
  display: inline-block;
  margin-left: 10px;
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
  vertical-align: middle;
}

body.home .hindi-head .more {
  font-family: "Noto Sans Devanagari","Nirmala UI",sans-serif;
  font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
}

body.home .hindi-grid {
  display: grid;
  grid-template-columns: 1.16fr 1fr 1fr;
  grid-template-rows: repeat(2,minmax(166px,1fr));
  gap: 14px;
}

body.home .hindi-lead {
  grid-row: 1 / 3;
  position: relative;
  min-height: 346px;
  overflow: hidden;
  border-radius: 5px;
  background: var(--navy-750);
}

body.home .hindi-lead img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform .45s cubic-bezier(.2,.7,.3,1);
}

body.home .hindi-lead::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg,rgba(5,13,24,.97) 0%,rgba(5,13,24,.68) 38%,rgba(5,13,24,.06) 76%);
  box-shadow: inset 0 0 0 1px rgba(173,194,224,.12);
}

body.home .hindi-lead-copy {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 25px 26px;
}

body.home .hindi-tag {
  display: block;
  font-family: "Noto Sans Devanagari","Nirmala UI",sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--gold-bright);
}

body.home .hindi-lead h3 {
  max-width: 18ch;
  margin-top: 7px;
  font-family: "Noto Serif Devanagari","Nirmala UI",serif;
  font-size: 27px;
  font-weight: 600;
  line-height: 1.22;
  color: #fff;
}

body.home .hindi-lead p {
  max-width: 45ch;
  margin-top: 8px;
  font-family: "Noto Serif Devanagari","Nirmala UI",serif;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-2);
}

body.home .hindi-lead:hover img {
  transform: scale(1.025);
}

body.home .hindi-card {
  display: grid;
  grid-template-columns: 112px minmax(0,1fr);
  gap: 14px;
  align-items: stretch;
  min-width: 0;
  padding: 11px;
  border-radius: 5px;
  background: rgba(21,40,64,.54);
  box-shadow: inset 0 0 0 1px rgba(173,194,224,.075);
  transition: background .2s,transform .2s;
}

body.home .hindi-card:hover {
  background: rgba(27,50,81,.68);
  transform: translateY(-2px);
}

body.home .hindi-card .thumb {
  min-height: 122px;
  overflow: hidden;
  border-radius: 3px;
  background: var(--navy-750);
}

body.home .hindi-card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .35s ease;
}

body.home .hindi-card:hover img {
  transform: scale(1.035);
}

body.home .hindi-card-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 3px 2px 3px 0;
}

body.home .hindi-card h3 {
  margin-top: 7px;
  font-family: "Noto Serif Devanagari","Nirmala UI",serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.34;
  color: var(--ink);
}

body.home .hindi-byline {
  display: block;
  margin-top: 8px;
  font-family: "Noto Sans Devanagari","Nirmala UI",sans-serif;
  font-size: 10px;
  line-height: 1.35;
  color: var(--ink-3);
}

/* trending + popular */

body.home .tp {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 36px;
}

body.home .trend .tr {
  display: flex;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

body.home .trend .tr:first-child {
  padding-top: 0;
}

body.home .trend .tr:last-child {
  border-bottom: 0;
}

body.home .trend .tr .n {
  font-family: var(--display);
  font-size: 20px;
  color: var(--gold-deep);
  font-weight: 600;
  width: 24px;
  flex-shrink: 0;
}

body.home .trend .tr :is(h3, h4) {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.2;
}

body.home .trend .tr .meta {
  margin-top: 3px;
}

body.home .pop .pi {
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}

body.home .pop .pi:first-child {
  padding-top: 0;
}

body.home .pop .pi:last-child {
  border-bottom: 0;
}

body.home .pop .pi .kicker {
  display: block;
  margin-bottom: 5px;
}

body.home .pop .pi :is(h3, h4) {
  font-family: var(--display);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.16;
}

body.home .pop .pi .sh {
  font-size: 10.5px;
  color: var(--ink-3);
  margin-top: 5px;
}

/* newsletter */

body.home .news {
  background: linear-gradient(120deg,var(--navy-800),var(--navy-750));
  border: 1px solid var(--line-2);
  border-radius: 10px;
  padding: 36px 38px;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 34px;
  align-items: center;
}

body.home .news .kicker {
  margin-bottom: 10px;
}

body.home .news h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 28px;
  line-height: 1.06;
  color: #fff;
}

body.home .news p {
  font-family: var(--serif);
  font-size: 14.5px;
  color: var(--ink-2);
  margin-top: 9px;
  max-width: 44ch;
}

body.home .news .form {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

body.home .news input {
  height: 46px;
  border-radius: 5px;
  border: 1px solid var(--line-2);
  background: var(--navy-900);
  color: var(--ink);
  padding: 0 15px;
  font-family: var(--sans);
  font-size: 14px;
}

body.home .news input::placeholder {
  color: var(--ink-3);
}

body.home .news .row {
  display: flex;
  gap: 11px;
}

body.home .news .btn {
  height: 46px;
  background: var(--gold);
  color: #1a1303;
  border: 0;
  border-radius: 5px;
  font-weight: 700;
  font-family: var(--sans);
  font-size: 14px;
  cursor: pointer;
  padding: 0 24px;
  white-space: nowrap;
}

body.home .news .wa {
  height: 46px;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line-2);
  border-radius: 5px;
  font-weight: 600;
  font-family: var(--sans);
  font-size: 14px;
  cursor: pointer;
  flex: 1;
}

/* events */

body.home .events {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 18px;
}

body.home .ev {
  background: var(--navy-800);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 18px 20px;
  display: flex;
  gap: 16px;
  cursor: pointer;
  transition: .2s;
}

body.home .ev:hover {
  border-color: var(--line-2);
  background: var(--navy-750);
}

body.home .ev .date {
  text-align: center;
  flex-shrink: 0;
  border-right: 1px solid var(--line);
  padding-right: 16px;
}

body.home .ev .date .d {
  font-family: var(--display);
  font-weight: 600;
  font-size: 25px;
  line-height: 1;
  color: var(--gold);
}

body.home .ev .date .m {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 3px;
}

body.home .ev :is(h3, h4) {
  font-family: var(--display);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.16;
}

body.home .ev .meta {
  margin-top: 5px;
}

body.home footer .grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 34px;
}

body.home footer .logo {
  font-family: var(--display);
  font-size: 32px;
  font-weight: 600;
}

body.home .footer .logo .a,
body.home footer .logo .a {
  color: var(--gold);
}

body.home footer p.ab {
  font-family: var(--serif);
  font-size: 13.5px;
  margin-top: 13px;
  max-width: 36ch;
  color: var(--ink-2);
  line-height: 1.5;
}

body.home footer h5 {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 13px;
}

body.home footer ul {
  list-style: none;
}

body.home footer li {
  font-size: 13.5px;
  padding: 6px 0;
  cursor: pointer;
  color: var(--ink-2);
}

body.home footer li:hover {
  color: var(--ink);
}

body.home footer .advertise {
  color: var(--gold-bright);
  font-weight: 600;
}

body.home footer .bottom {
  border-top: 1px solid var(--line);
  margin-top: 32px;
  padding-top: 18px;
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
  color: var(--ink-3);
  flex-wrap: wrap;
  gap: 10px;
}

/* latest live timeline */

body.home .lt {
  display: block;
  padding: 11px 0 11px 18px;
  border-bottom: 1px solid var(--line);
  position: relative;
}

body.home .lt:first-of-type {
  padding-top: 0;
}

body.home .lt:last-child {
  border-bottom: 0;
}

body.home .lt::before {
  content: "";
  position: absolute;
  left: 0;
  top: 15px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 3px rgba(214,172,91,.16);
}

body.home .lt:first-of-type::before {
  top: 4px;
}

body.home .lt .t {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--red);
}

body.home .lt h4 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.22;
  margin-top: 3px;
  color: var(--ink);
}

body.home .lt:hover h4 {
  color: var(--gold-bright);
}

/* immersive lead feature */

body.home .potd-sect {
  position: relative;
  z-index: 2;
  border-bottom: 1px solid var(--line);
}

body.home .potd {
  position: relative;
  min-height: 520px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: radial-gradient(120% 120% at 60% 20%,#1f3a57,#0c1a2b);
}

body.home .potd img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 56% 68%;
  z-index: 1;
}

body.home .potd-grad {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(90deg,rgba(6,12,22,.76),rgba(6,12,22,.18) 58%,rgba(6,12,22,.02) 78%),linear-gradient(0deg,rgba(6,12,22,.9),rgba(6,12,22,.08) 62%,rgba(6,12,22,.24));
}

body.home .potd-cap {
  position: relative;
  z-index: 3;
  padding-top: 40px;
  padding-bottom: 40px;
}

body.home .potd-cap h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 38px;
  line-height: 1.05;
  color: #fff;
  margin: 10px 0 10px;
  letter-spacing: -.01em;
  max-width: 18ch;
}

body.home .potd-cap p {
  font-family: var(--serif);
  font-size: 17px;
  color: #d6dde8;
  max-width: 52ch;
  line-height: 1.45;
}

body.home .potd-cap .cred {
  display: block;
  margin-top: 14px;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #9fb0c4;
}

body.home .potd-cap .cred a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(159,176,196,.45);
  text-underline-offset: 3px;
}

/* the break */

body.home .breakband {
  background: #f1ece1;
  position: relative;
  z-index: 2;
  border-bottom: 1px solid var(--line-2);
}

body.home .breakband .wrap {
  padding-top: 30px;
  padding-bottom: 34px;
}

body.home .break-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 20px;
}

body.home .break-head h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #1c1812;
}

body.home .break-head span {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: #6b6253;
}

body.home .break-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1.1fr;
  gap: 22px;
}

body.home .bcard {
  background: #fbf8f1;
  border: 1px solid #e2d9c6;
  border-radius: 9px;
  padding: 22px;
}

body.home .bcard .bk {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

body.home .bcard h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.18;
  color: #1c1812;
  margin: 9px 0 14px;
}

body.home .trivia .opts {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

body.home .trivia .opts button {
  text-align: left;
  background: #fff;
  border: 1px solid #e2d9c6;
  border-radius: 6px;
  padding: 10px 13px;
  font-family: var(--sans);
  font-size: 13.5px;
  color: #2a241a;
  cursor: pointer;
  transition: .15s;
}

body.home :is(.trivia, .poll) > .bk {
  color: var(--gold-paper);                  /* was --gold-deep #a87f33 — 3.44:1 at 10px bold */
}

body.home .trivia .opts button:hover:not(:disabled) {
  border-color: var(--gold);
  background: #fffdf6;
}

body.home .trivia .opts button.ok {
  background: #e8f3ec;
  border-color: #5fb98f;
  color: #1d5b40;
  font-weight: 600;
}

body.home .trivia .opts button.no {
  background: #fdeceb;
  border-color: #e0584a;
  color: #9a2f25;
}

/* No `display: none`. The region ships EMPTY and is written into on click, so
   it must be in the accessibility tree BEFORE the update or `aria-live` has
   nothing to observe — the old markup carried the full answer text from page
   load and only flipped `display`, which announces nothing (A11Y-04). `:empty`
   below collapses the margin so an unanswered card looks exactly as it did. */
body.home .trivia .ans {
  font-family: var(--serif);
  font-size: 13.5px;
  color: #4a4234;
  margin-top: 13px;
  line-height: 1.45;
}

body.home .trivia .ans:empty {
  margin-top: 0;
}

body.home .trivia .ans.show {
  display: block;
}

/* A11Y-04 — right and wrong carried by more than colour. `.ok` is a green
   ground and `.no` a red one; a red-green colour-blind reader saw two tinted
   boxes and no verdict. The glyph is decorative (`aria-hidden`); the words that
   go with it are appended as `.screen-reader-text` by home.js. */
body.home .trivia .opts button .verdict {
  font-weight: 700;
  margin-left: 7px;
}

body.home .trivia .opts button.ok .verdict {
  color: #1d5b40;
}

body.home .trivia .opts button.no .verdict {
  color: #9a2f25;
}

body.home .ghan-ad {
  padding: 0;
  overflow: hidden;
  background: #0b1b30;
  border-color: rgba(168,127,51,.45);
}

body.home .ghan-ad-link {
  display: grid;
  grid-template-rows: 132px 1fr;
  height: 100%;
  min-height: 100%;
  color: #fff;
  text-decoration: none;
}

body.home .ghan-ad-media {
  position: relative;
  overflow: hidden;
  background: #16273b;
}

body.home .ghan-ad-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 59% 61%;
  transition: transform .45s ease;
}

body.home .ghan-ad-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,rgba(5,13,23,.08),rgba(5,13,23,.56));
}

body.home .ghan-ad .sponsored {
  position: absolute;
  z-index: 2;
  top: 12px;
  left: 12px;
  padding: 5px 8px;
  background: rgba(251,248,241,.94);
  color: #2a241a;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}

body.home .ghan-ad-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 16px 18px 18px;
  background: linear-gradient(135deg,#10253d,#091725);
}

body.home .ghan-ad-route {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #d7b968;
}

body.home .ghan-ad h3 {
  margin: 7px 0 6px;
  color: #fff;
  font-size: 20px;
  line-height: 1.08;
}

body.home .ghan-ad p {
  font-family: var(--serif);
  font-size: 13.5px;
  line-height: 1.38;
  color: #cbd5e1;
  margin: 0 0 14px;
}

body.home .ghan-ad-cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 11px;
  border: 1px solid rgba(215,185,104,.7);
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #f1d88f;
  transition: .2s;
}

body.home .ghan-ad-link:hover .ghan-ad-media img {
  transform: scale(1.035);
}

body.home .ghan-ad-link:hover .ghan-ad-cta {
  background: #d7b968;
  color: #0b1b30;
}

body.home .ghan-ad-link:focus-visible {
  outline: 3px solid #d7b968;
  outline-offset: -3px;
}

body.home .poll .popts {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

body.home .poll .popts button {
  position: relative;
  overflow: hidden;
  text-align: left;
  background: #fff;
  border: 1px solid #e2d9c6;
  border-radius: 6px;
  padding: 11px 13px;
  font-family: var(--sans);
  font-size: 13.5px;
  color: #2a241a;
  cursor: pointer;
  display: flex;
  align-items: center;
}

body.home .poll .popts button:hover:not(:disabled) {
  border-color: var(--gold);
}

body.home .poll .popts button span {
  position: relative;
  z-index: 2;
}

body.home .poll .popts button i {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: rgba(168,127,51,.2);
  z-index: 1;
  transition: width .6s cubic-bezier(.2,.7,.3,1);
}

body.home .poll .popts button b {
  position: relative;
  z-index: 2;
  margin-left: auto;
  font-weight: 700;
  opacity: 0;
  transition: .4s;
  color: var(--gold-deep);
}

body.home .poll .popts button.me {
  border-color: var(--gold);
  font-weight: 600;
}

body.home .poll .pnote {
  display: block;
  margin-top: 12px;
  font-size: 11.5px;
  color: #6b6253;
}

@media (max-width:1000px) {
  body.home .break-grid {
    grid-template-columns: 1fr 1fr;
  }

  body.home .poll {
    grid-column: span 2;
  }
}

@media (max-width:760px) {
  body.home .potd {
    min-height: 400px;
  }

  body.home .potd img {
    object-position: 68% 68%;
  }

  body.home .potd-cap h2 {
    font-size: 27px;
  }

  body.home .break-grid {
    grid-template-columns: 1fr;
  }

  body.home .poll {
    grid-column: auto;
  }
}

body.home .inv-zone {
  position: relative;
}

/* KEPT, and load-bearing. `template-parts/home/partner-strip.php:25` emits
   `<span class="inv-badge">Partner inventory</span>` verbatim from the comp;
   this is what hides it. The comp's authoring furniture around it — the
   `.invtoggle` floating switch, the `body.home.show-inv` reveal rules and the
   `.inv-zone` dashed outlines — was a design-review overlay that should never
   have shipped and is deleted in 1.3.0 (CODE-17). `events.php`'s stray
   `class="ev inv-zone t2"`, copied straight out of the comp, is gone too. */
body.home .inv-badge {
  display: none;
}

body.home .fade {
  opacity: 0;
  transform: translateY(12px);
  animation: rise .7s cubic-bezier(.2,.7,.3,1) forwards;
}

@keyframes rise {
  to {
    opacity: 1;
    transform: none;
  }
}

@media (max-width:1000px) {
  body.home .hero-grid {
    grid-template-columns: 1fr 1fr;
  }

  body.home .hero-grid .col-rail {
    grid-column: span 2;
    border-top: 1px solid var(--line);
    margin-top: 22px;
    padding: 22px 0 0;
  }

  body.home .rail {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }

  body.home .mostread {
    margin-top: 0;
  }

  body.home .voices {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  body.home .voices > * {
    padding: 0 22px;
  }

  body.home .voices > :nth-child(2) {
    border-right: 0;
    padding-right: 0;
  }

  body.home .voices > :nth-child(3) {
    grid-column: span 2;
    border-top: 1px solid var(--line);
    margin-top: 14px;
    padding: 14px 0 0;
  }

  body.home .bookshelf {
    grid-template-columns: repeat(3,1fr);
  }

  body.home .hindi-grid {
    grid-template-columns: 1.12fr 1fr;
    grid-template-rows: repeat(4,minmax(118px,auto));
  }

  body.home .hindi-lead {
    grid-row: 1 / 5;
    min-height: 514px;
  }

  body.home .hindi-card {
    grid-column: 2;
  }
}

@media (max-width:760px) {
  body.home .logo {
    font-size: 36px;
  }

  body.home .hero-grid {
    grid-template-columns: 1fr;
  }

  body.home .hero-grid > * {
    padding: 0;
  }

  body.home .hero-grid .col-mid {
    border: 0;
    border-top: 1px solid var(--line);
    margin-top: 22px;
    padding-top: 22px;
  }

  body.home .hero-grid .col-rail {
    grid-column: auto;
  }

  body.home .rail {
    grid-template-columns: 1fr;
  }

  body.home .lead .ph {
    height: 300px;
  }

  body.home .lead h1 {
    font-size: 31px;
  }

  body.home .aaf-ad {
    min-height: 220px;
    margin-top: 18px;
  }

  body.home .aaf-ad-copy {
    width: 52%;
    padding-left: 17px;
  }

  body.home .aaf-ad-art {
    left: 31%;
  }

  body.home .bigread,
  body.home .nandini,
  body.home .cartoon,
  body.home .tp,
  body.home .news {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  body.home .bigread h2 {
    font-size: 28px;
  }

  body.home .cartoon .frame {
    order: -1;
  }

  body.home .toolkit,
  body.home .desks {
    grid-template-columns: 1fr 1fr;
  }

  body.home .native {
    grid-column: span 2;
  }

  body.home .visa {
    grid-template-columns: 1fr;
  }

  body.home .culture {
    grid-template-columns: 1fr;
  }

  body.home .bookshelf {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 12px;
  }

  body.home .book {
    flex: 0 0 44%;
    scroll-snap-align: start;
  }

  body.home .hindi-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 10px;
  }

  body.home .hindi-lead {
    grid-column: auto;
    grid-row: auto;
    min-height: 330px;
  }

  body.home .hindi-card {
    grid-column: auto;
    min-height: 124px;
  }

  body.home .hindi-card .thumb {
    min-height: 102px;
  }

  body.home .sect-head {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 6px 12px;
  }

  body.home .sect-head .more {
    width: 100%;
    margin-left: 0;
    white-space: normal;
  }

  body.home .events {
    grid-template-columns: 1fr;
  }

  body.home .news {
    padding: 26px 22px;
  }

  body.home footer .grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width:480px) {
  body.home .toolkit,
  body.home .desks {
    grid-template-columns: 1fr;
  }

  body.home .native {
    grid-column: auto;
  }

  body.home .voices {
    grid-template-columns: minmax(0, 1fr);
  }

  body.home .voices > * {
    padding: 0;
    border-right: 0;
    border-top: 1px solid var(--line);
    margin-top: 14px;
    padding-top: 14px;
  }

  /* The ≤1000 px rule gives the third column `grid-column: span 2`. Left in
     place here it creates an implicit second track beside the one-column
     grid, and the three Voices columns sat side by side at 155 + 197 px in a
     300 px box — 25 px of horizontal scroll on the phone homepage (HT3-04). */
  body.home .voices > :nth-child(3) {
    grid-column: auto;
  }

  body.home .voices > :first-child {
    border-top: 0;
    margin-top: 0;
    padding-top: 0;
  }

  body.home .news .row {
    flex-direction: column;
  }

  body.home footer .grid {
    grid-template-columns: 1fr;
  }

  body.home .book {
    flex-basis: 68%;
  }

  body.home .hindi-head {
    align-items: center;
    flex-wrap: nowrap;
  }

  body.home .hindi-head .more {
    width: auto;
    margin-left: auto;
    white-space: nowrap;
  }

  body.home .hindi-head h2 {
    font-size: 23px;
  }

  body.home .hindi-head h2 span {
    display: none;
  }

  body.home .hindi-lead-copy {
    padding: 21px;
  }

  body.home .hindi-lead h3 {
    font-size: 24px;
  }

  body.home .hindi-card {
    grid-template-columns: 102px minmax(0,1fr);
    padding: 9px;
    gap: 12px;
  }

  body.home .aaf-ad {
    min-height: 208px;
  }

  body.home .aaf-ad h2 {
    font-size: 22px;
  }

  body.home .aaf-ad h2 span {
    font-size: 24px;
  }

  body.home .aaf-ad-meta {
    font-size: 9px;
  }
}

@media (max-width:900px) {
  body.home .portrait-wall {
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 4px;
  }
}

@media (max-width:560px) {
  body.home .interview-wall-head {
    display: block;
  }

  body.home .interview-wall-head p {
    margin-top: 3px;
  }

  body.home .portrait-wall {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 4px;
  }
}

/* calibrated editorial separators */

body.home {
  --line: rgba(173,194,224,.095);
  --line-2: rgba(173,194,224,.17);
}

body.home .sect,
body.home .hero,
body.home .potd-sect {
  border-bottom-color: rgba(173,194,224,.085);
}

body.home .breakband {
  border-bottom-color: rgba(28,24,18,.12);
}

body.home .sect {
  padding: 38px 0;
}

body.home .sect-head {
  margin-bottom: 22px;
}

body.home .sect-head .ln {
  display: none;
}

body.home .sect-head .more {
  margin-left: auto;
}

body.home .mid-item,
body.home .mr-item,
body.home .vrow,
body.home .ep,
body.home .vx,
body.home .trend .tr,
body.home .pop .pi,
body.home .lt {
  border-bottom-color: rgba(173,194,224,.08);
}

body.home .col-mid,
body.home .voices > * {
  border-color: rgba(173,194,224,.10);
}

body.home .marquee,
body.home .native,
body.home .tk,
body.home .news,
body.home .ev {
  border-color: rgba(173,194,224,.13);
}

body.home .cartoon .frame,
body.home .bcard {
  border-color: rgba(173,194,224,.14);
}

body.home footer .bottom {
  border-top-color: rgba(173,194,224,.09);
}


/* ==========================================================================
   SPONSOR SLOT SPACE RESERVATION (added at integration)

   Contract §8: "Reserve the slot's dimensions in CSS so there is no layout
   shift." Every value below is a dimension the comp already draws, so none of
   this changes the rendered geometry — it only makes the reservation explicit
   and survive an override.

   Both homepage creatives already sit in boxes the comp sizes independently of
   their artwork: `.aaf-ad-art` is inset on all four sides of `.aaf-ad`, whose
   min-height is 210px, and `.ghan-ad-media` is the fixed 132px first row of
   `.ghan-ad-link`'s grid. The min-heights restate those two numbers; the
   aspect-ratios are the bundled creatives' own pixel dimensions and take
   effect only where the height is allowed to resolve to auto (they are inert
   while the comp's `height: 100%` applies, which is the point — they are the
   floor under it, not a change to it).
   ========================================================================== */

body.home .aaf-ad-art {
  min-height: 210px;
}

/* affordable-art-fair-melbourne-2026.webp — 960x634 */
body.home .aaf-ad-art img {
  aspect-ratio: 960 / 634;
}

body.home .ghan-ad-media {
  min-height: 132px;
}

/* the-ghan-central-australia.webp — 1771x1181 */
body.home .ghan-ad-media img {
  aspect-ratio: 1771 / 1181;
}

/* Pasted third-party tags (slot mode "html"). A tag sizes itself after it
   loads, so without a floor it is guaranteed layout shift. The heights are the
   comp boxes the tags replace; nria_ad_reserved_height (inc/ads.php) sets the
   same numbers inline and can be filtered per slot. */
body.home .nria-ad-html {
  display: block;
  overflow: hidden;
}

body.home .nria-ad-html--hero_rail {
  min-height: 210px;
  margin-top: 20px;
}

body.home .nria-ad-html--break_feature {
  min-height: 250px;
}


/* ==========================================================================
   BOX-SIZING, RESTATED (added at 1.0.2)
   The two homepage boxes whose width is a percentage or a token AND that carry
   horizontal padding. The global `* { box-sizing: border-box }` is 0,0,0 and
   loses on source order to a page builder's inline `* { box-sizing:
   content-box }`; at 0,1,1 these are out of its reach. Same treatment, and the
   same reasoning, as the blocks in base.css and article.css.
   ========================================================================== */

body.home .wrap,
body.home .aaf-ad-copy {
  box-sizing: border-box;
}


/* ==========================================================================
   1.5.0 — PAUSE WITH NANDINI: THE HOST PANEL
   --------------------------------------------------------------------------
   Publisher request: "a clean clear section about Nandini, the anchor and the
   key person of this show, on the left-hand side … a photo and a bio". With
   the panel on, template-parts/home/interviews.php wraps the panel and the
   wall in `.interview-wall-body` and prints the first ten guests; with it
   off, none of the rules below match and the 1.4.x wall is untouched.

   Existing tokens only. On the navy page: eyebrow --gold 7.99:1, name --ink
   15.2:1, role --gold-deep 4.63:1, bio --ink-2 8.40:1, all against the
   panel's own ground (navy-900 + 3.5% white = #131d2c).
   ========================================================================== */

/* ≥1001px: the panel runs the full height of the head and the tiles. */
body.home .interview-wall-body {
  display: grid;
  grid-template-columns: minmax(260px, 300px) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "host head"
    "host wall";
  column-gap: 20px;
  align-items: stretch;
}

body.home .interview-wall-body > .interview-wall-head {
  grid-area: head;
  min-width: 0;
}

body.home .interview-wall-body > .interview-host {
  grid-area: host;
}

/* The tiles themselves are unchanged: same plate, same 4px gutter. */
body.home .interview-wall-body > .portrait-wall {
  grid-area: wall;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-content: start;
}

body.home .interview-host {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: rgba(255, 255, 255, .035);
  border: 1px solid var(--line-2);
  border-top: 2px solid var(--gold);
}

/* 1.5.1: the photo is a fixed 4:3 frame on desktop and is never squeezed.
   1.5.0 let it shrink to whatever height the words left (~300 x 158 at
   1280px), which cut her forehead. The bundled portrait now has a hand-cut
   4:3 file for this column (see nria_interview_host_bundled_portrait()), so
   the frame shows exactly that picture; an editor's own upload is cropped
   from the upper part of the image, where faces sit. With the default
   one-paragraph bio the panel still ends level with the tiles at 1280px;
   a longer bio simply makes the panel a little taller than the wall. */
body.home .interview-host-photo {
  position: relative;
  display: block;
  flex: 0 0 auto;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--navy-750);
}

body.home .interview-host-photo picture,
body.home .interview-host-photo img {
  display: block;
  width: 100%;
  height: 100%;
}

body.home .interview-host-photo img {
  object-fit: cover;
  object-position: 50% 28%;
}

body.home .interview-host-copy {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  min-width: 0;
  padding: 16px 18px 18px;
}

body.home .interview-host-eyebrow {
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
}

body.home .interview-host-name {
  margin-top: 6px;
  font-family: var(--display);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: .005em;
  color: var(--ink);
  text-wrap: balance;                        /* "Nandini / Sen Mehra", not "… Sen / Mehra" */
}

body.home .interview-host-role {
  margin-top: 5px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

body.home .interview-host-bio {
  margin-top: 12px;
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
  text-wrap: pretty;
}

body.home .interview-host-bio p + p {
  margin-top: .6em;
}

body.home .interview-host-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-top: auto;
  padding-top: 16px;
}

body.home .interview-host-podcast {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 15px;
  border: 1px solid rgba(214, 172, 91, .6);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .03em;
  color: var(--gold);
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

body.home .interview-host-podcast:hover {
  background: rgba(214, 172, 91, .12);
  border-color: var(--gold);
  color: var(--gold-bright);
}

body.home .interview-host-profile {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(214, 172, 91, .7);
  text-underline-offset: 3px;
}

body.home .interview-host-profile:hover {
  color: var(--gold-bright);
  text-decoration-color: currentColor;
}

body.home .interview-host a:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* 701–1000px: the panel becomes a horizontal card above the wall. */
@media (max-width: 1000px) {
  body.home .interview-wall-body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas:
      "head"
      "host"
      "wall";
    row-gap: 16px;
  }

  body.home .interview-wall-body > .interview-wall-head {
    margin-bottom: 0;
  }

  body.home .interview-host {
    flex-direction: row;
  }

  body.home .interview-host-photo {
    flex: 0 0 180px;
    width: 180px;
    aspect-ratio: 1 / 1;
    align-self: flex-start;
  }

  body.home .interview-host-copy {
    flex: 1 1 auto;
    padding: 18px 22px 20px;
  }

  body.home .interview-host-bio {
    max-width: 62ch;
  }
}

@media (max-width: 700px) {
  body.home .interview-wall-body .portrait-wall {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.home .interview-host-photo {
    flex-basis: 120px;
    width: 120px;
  }

  body.home .interview-host-copy {
    padding: 14px 16px 16px;
  }
}

/* ≤560px: a 96px photo beside the name block; bio and links full width. */
@media (max-width: 560px) {
  body.home .interview-host {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    grid-template-areas:
      "photo head"
      "bio   bio"
      "links links";
    column-gap: 14px;
    padding: 14px 14px 16px;
  }

  body.home .interview-host-copy {
    display: contents;
  }

  body.home .interview-host-photo {
    grid-area: photo;
    width: 96px;
    min-height: 0;
    aspect-ratio: 1 / 1;
  }

  body.home .interview-host-head {
    grid-area: head;
    align-self: center;
  }

  body.home .interview-host-bio {
    grid-area: bio;
    margin-top: 14px;
  }

  body.home .interview-host-links {
    grid-area: links;
    padding-top: 14px;
  }
}


/* ==========================================================================
   1.5.0 — MEDIA LITERACY: THE "CHECK BEFORE YOU SHARE" BAND
   --------------------------------------------------------------------------
   template-parts/home/media-literacy.php, between the partner strip and The
   Big Read. A paper card inside the page grid so it reads as a different kind
   of thing from the news around it, without colour or motion. Navy ink on
   --paper #fbf8f1: heading 17.3:1, dek --ink-soft 7.63:1, eyebrow and step
   letters --gold-paper 5.84:1 (--gold-dark is 4.09:1 here, too low for 11px),
   credit and labels --ink-faint-paper 5.50:1.

   Three layouts, chosen in the template:
     .ml-band--art    text left, the umbrella picture right
     .ml-band--steps  no picture: the four checks become the second column
     .ml-band--solo   no picture, checks switched off: one measured column
   ========================================================================== */

body.home .ml-band-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(220px, 1fr);
  grid-template-areas:
    "intro art"
    "steps art"
    "foot  art";
  grid-template-rows: auto auto 1fr;
  column-gap: clamp(32px, 4vw, 64px);
  padding: clamp(32px, 4vw, 52px) clamp(26px, 4.4vw, 56px) clamp(30px, 3.6vw, 46px);
  overflow: hidden;
  border-radius: 10px;
  background: var(--paper);
  color: var(--navy-900);
}

body.home .ml-band-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--gold);
}

body.home .ml-band--steps {
  grid-template-areas:
    "intro steps"
    "foot  steps";
  grid-template-rows: auto 1fr;
}

body.home .ml-band--solo {
  grid-template-columns: minmax(0, 720px);
  grid-template-areas:
    "intro"
    "foot";
  grid-template-rows: auto auto;
}

body.home .ml-band-intro {
  grid-area: intro;
  min-width: 0;
}

body.home .ml-band-eyebrow {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-paper);
}

body.home .ml-band-title {
  margin-top: 12px;
  font-family: var(--display);
  font-size: clamp(34px, 1.6vw + 22px, 48px);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -.015em;
  color: var(--navy-900);
  text-wrap: balance;
}

body.home .ml-band-dek {
  max-width: 58ch;
  margin-top: 16px;
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* The four checks — with a picture, a quiet row under the dek. */
body.home .ml-band-steps {
  grid-area: steps;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 26px;
  border-top: 1px solid #e6dccb;
  border-bottom: 1px solid #e6dccb;
}

body.home .ml-band-steps li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 14px 12px 13px;
  border-left: 1px solid #e6dccb;
}

body.home .ml-band-steps li:first-child {
  padding-left: 0;
  border-left: 0;
}

body.home .ml-band-letter {
  font-family: var(--display);
  font-size: 34px;
  font-weight: 600;
  line-height: 1;
  color: var(--gold-paper);
}

body.home .ml-band-word {
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--navy-900);
  overflow-wrap: anywhere;
}

/* With no picture the checks are the visual: a S-I-F-T acrostic. */
body.home .ml-band--steps .ml-band-steps {
  grid-template-columns: minmax(0, 1fr);
  align-self: center;
  margin-top: 0;
  border-bottom: 0;
}

body.home .ml-band--steps .ml-band-steps li {
  flex-direction: row;
  align-items: center;
  gap: 22px;
  padding: 14px 0;
  border-left: 0;
  border-bottom: 1px solid #e6dccb;
}

body.home .ml-band--steps .ml-band-letter {
  flex: 0 0 1.15em;
  font-size: 58px;
  text-align: center;
}

body.home .ml-band--steps .ml-band-word {
  font-size: 13px;
  letter-spacing: .18em;
}

body.home .ml-band-foot {
  grid-area: foot;
  min-width: 0;
}

body.home .ml-band-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

body.home .ml-band-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 11px 24px;
  border: 1px solid var(--navy-900);
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .01em;
  text-align: center;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

body.home .ml-band-cta {
  background: var(--navy-900);
  color: var(--paper);
}

body.home .ml-band-cta:hover {
  background: var(--navy-700);
  border-color: var(--navy-700);
}

body.home .ml-band-toolkit {
  background: transparent;
  color: var(--navy-900);
  border-color: rgba(10, 21, 36, .38);
}

body.home .ml-band-toolkit:hover {
  border-color: var(--navy-900);
  background: rgba(10, 21, 36, .045);
}

body.home .ml-band-card a:focus-visible {
  outline: 2px solid var(--navy-900);
  outline-offset: 3px;
}

body.home .ml-band-langs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-top: 24px;
}

body.home .ml-band-langs-label {
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-faint-paper);
}

body.home .ml-band-langs ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body.home .ml-band-langs a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 4px 13px;
  border: 1px solid #dcd2c0;
  border-radius: 999px;
  background: #fff;
  font-size: 13.5px;
  line-height: 1.25;
  color: var(--navy-900);
  transition: border-color .15s ease, background-color .15s ease;
}

body.home .ml-band-langs a:hover {
  border-color: var(--gold-paper);
  background: #fffdf8;
}

body.home .ml-band-langs a:lang(hi) {
  font-family: "Noto Sans Devanagari", "Nirmala UI", var(--sans);
}

body.home .ml-band-credit {
  margin-top: 22px;
  font-family: var(--serif);
  font-size: 13.5px;
  font-style: italic;
  line-height: 1.45;
  color: var(--ink-faint-paper);
}

body.home .ml-band-art {
  grid-area: art;
  align-self: center;
  justify-self: end;
  width: 100%;
  max-width: 380px;
}

body.home .ml-band-art img {
  width: 100%;
  height: auto;
  border-radius: 16px;
}

/* ≤900px: one column, the picture above the words. */
@media (max-width: 900px) {
  body.home .ml-band-card,
  body.home .ml-band--steps {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "art"
      "intro"
      "steps"
      "foot";
    grid-template-rows: auto;
  }

  body.home .ml-band-art {
    justify-self: start;
    max-width: 280px;
    margin-bottom: 26px;
  }

  body.home .ml-band--steps .ml-band-steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 26px;
    border-bottom: 1px solid #e6dccb;
  }

  body.home .ml-band--steps .ml-band-steps li {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 14px 12px 13px;
    border-bottom: 0;
    border-left: 1px solid #e6dccb;
  }

  body.home .ml-band--steps .ml-band-steps li:first-child {
    padding-left: 0;
    border-left: 0;
  }

  body.home .ml-band--steps .ml-band-letter {
    flex: none;
    font-size: 34px;
    text-align: left;
  }

  body.home .ml-band--steps .ml-band-word {
    font-size: 10.5px;
    letter-spacing: .12em;
  }
}

/* ≤560px: 2 × 2 checks, full-width buttons, smaller picture. */
@media (max-width: 560px) {
  body.home .ml-band-card {
    padding: 30px 22px 28px;
  }

  body.home .ml-band-art {
    max-width: 200px;
    margin-bottom: 22px;
  }

  body.home .ml-band-title {
    font-size: 31px;
  }

  body.home .ml-band-dek {
    font-size: 16.5px;
  }

  body.home .ml-band-steps,
  body.home .ml-band--steps .ml-band-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.home .ml-band-steps li:nth-child(odd),
  body.home .ml-band--steps .ml-band-steps li:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  }

  body.home .ml-band-steps li:nth-child(n+3),
  body.home .ml-band--steps .ml-band-steps li:nth-child(n+3) {
    border-top: 1px solid #e6dccb;
  }

  body.home .ml-band-actions {
    flex-direction: column;
  }

  body.home .ml-band-actions a {
    width: 100%;
  }
}