/* ==========================================================================
   13. FOOTER
   ========================================================================== */
.footer {
  flex: none;
  background: var(--background);
  border-top: 3px solid var(--surface-invert);   /* heavy folio rule */
}

/* The folio rule is a terminal device, not a band divider, so it needs more air
   above it than the 40px that separates two bands — with none at all it read as
   glued to whatever section happened to end last, which on the front page is the
   video queue. Below the rule the colophon already sets its own 56px; this is
   matched to that on a phone and opened up once there is width to spend. */
.footer { margin-top: var(--sp-10); }

@media (min-width: 768px) {
  .footer { margin-top: var(--sp-16); }
}

/* Small caps label on a hairline — the repeating structural device */
.rule-label {
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
  margin-bottom: var(--sp-4);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* ---------- Colophon ---------- */
.colophon {
  display: grid;
  gap: var(--sp-10);
  padding-block: var(--sp-10);
}
.logo--footer { font-size: var(--fs-3xl); }
.colophon__mission {
  margin-top: var(--sp-6);
  max-width: 40ch;
  font-size: var(--fs-md);
  color: var(--text-secondary);
}

/* ---------- Slim newsletter ---------- */
/* An explicit token colour: with none declared this heading inherited
   Elementor's own --e-global-color-text (#7A7A7A), which is not part of
   this palette and gave 4.29:1 on white -- under the 4.5 AA floor for
   16px text, and the only footer heading that missed it. */
.signup__title { font-size: var(--fs-lg); color: var(--text-primary); }
.signup__note { margin-top: var(--sp-1); font-size: var(--fs-md); color: var(--text-secondary); }

.signup__form {
  display: flex;
  align-items: stretch;
  margin-top: var(--sp-4);
  border-bottom: 2px solid var(--text-primary);
  transition: border-color var(--t-fast) var(--ease);
}
.signup__form:focus-within { border-bottom-color: var(--gold-line); }

.signup__input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 46px;
  padding: 0 var(--sp-2) 0 0;
  border: 0;
  background: none;
  font-size: var(--fs-md);
  outline: none;
}
.signup__input::placeholder { color: var(--text-secondary); }
.signup__input[aria-invalid="true"] { color: var(--accent-breaking); }

.signup__submit {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  flex: none;
  padding: 0 0 0 var(--sp-3);
  font-size: var(--fs-md);
  font-weight: 700;
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease);
}
.signup__submit:hover { color: var(--accent-premium); }
.signup__submit[data-busy="true"] { opacity: 0.55; pointer-events: none; }

.signup__status {
  display: none;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  font-size: var(--fs-md);
}
.signup__status[data-state="loading"],
.signup__status[data-state="success"],
.signup__status[data-state="error"] { display: flex; }
.signup__status[data-state="loading"] { color: var(--text-secondary); }
.signup__status[data-state="success"] { color: var(--accent-life); }
.signup__status[data-state="error"]   { color: var(--accent-breaking); }

.spinner {
  width: 14px; height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Index: dense editorial columns ---------- */
.index { border-top: 1px solid var(--border); }
.index__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-6);
  padding-block: var(--sp-8);
}

.index__col { min-width: 0; }
.index__title {
  padding-top: var(--sp-2);
  border-top: 2px solid var(--rail);
  margin-bottom: var(--sp-3);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--rail);
}
.index__list { display: grid; gap: 0; }
.index__link {
  display: block;
  padding: var(--sp-2) 0;
  font-size: var(--fs-md);
  color: var(--text-secondary);
  transition: color var(--t-fast) var(--ease);
}
.index__link:hover { color: var(--rail); text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Imprint ---------- */
.imprint { border-top: 1px solid var(--border); }
.imprint__grid {
  display: grid;
  gap: var(--sp-6);
  padding-block: var(--sp-6) var(--sp-8);
}

.imprint__links { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); }
/* padding, not height: lifts the hit area to the 24px minimum without
   moving the text -- these rows sat at 16-18px tall. */
.imprint__links a {
  font-size: var(--fs-md);
  font-weight: 500;
  padding-block: 4px;
  transition: color var(--t-fast) var(--ease);
}
.imprint__links a:hover { color: var(--accent-trust); text-decoration: underline; text-underline-offset: 4px; }

.social--footer { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.social--footer a { width: 40px; height: 40px; }

/* ---------- Black cap ---------- */
.cap {
  background: var(--surface-invert);
  color: var(--text-invert);
}
.cap__grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-5);
  min-height: 56px;
  padding-block: var(--sp-3);
}

.cap__copy {
  display: inline-flex;
  align-items: baseline;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  color: color-mix(in srgb, currentColor 68%, transparent);
}
.cap__wordmark {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: var(--fs-sm);
  letter-spacing: -0.02em;
  color: var(--text-invert);
}

.cap__legal { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); }
.cap__legal a {
  font-size: var(--fs-xs);
  padding-block: 5px;
  color: color-mix(in srgb, currentColor 72%, transparent);
  transition: color var(--t-fast) var(--ease);
}
.cap__legal a:hover { color: var(--text-invert); text-decoration: underline; text-underline-offset: 3px; }

.cap__prefs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); margin-left: auto; }

.capbtn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 36px;
  padding: 0 var(--sp-3);
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: color-mix(in srgb, currentColor 76%, transparent);
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.capbtn:hover { color: var(--text-invert); background: color-mix(in srgb, currentColor 12%, transparent); }
.capbtn--top { border: 1px solid color-mix(in srgb, currentColor 26%, transparent); }
.capbtn--top:hover { border-color: var(--gold-line); color: var(--gold-line); }

/* ==========================================================================
   14. BREAKPOINTS
   ========================================================================== */

/* ---------- Tablet 768–1023 ---------- */
@media (min-width: 768px) {
  :root { --gutter: 24px; --h-masthead: 64px; }

  .breaking__more { display: inline-flex; }
  .logo { font-size: 1.75rem; }

  .search__panel {
    height: auto;
    max-height: min(78vh, 680px);
    width: min(720px, calc(100% - 48px));
    margin: 8vh auto 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-panel);
    overflow: hidden;
  }
  .search__close kbd { display: inline-block; }
  .drawer__panel { padding-inline: var(--sp-6); }

  .colophon {
    grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
    align-items: start;
    gap: var(--sp-12);
    padding-block: var(--sp-12);
  }
  .index__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-8); }
  .imprint__grid { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
}

/* ---------- Desktop 1024+ ---------- */
@media (min-width: 1024px) {
  :root {
    --gutter: 32px;
    --h-masthead: 80px;
    --h-nav: 48px;
    --h-chiprail: 0px;
    --h-header: calc(var(--h-breaking) + var(--h-masthead) + var(--h-nav));
  }
  .masthead__mobile { display: none; }
  .utility { display: flex; }
  .navbar { display: block; }
  .chiprail { display: none; }
  .logo { font-size: var(--fs-3xl); }
  .breaking__item { font-size: var(--fs-lg); }

  /* Five columns divided by hairline gutters, like a printed index */
  .index__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; }
  .index__col { padding-inline: var(--sp-5); border-left: 1px solid var(--border); }
  .index__col:first-child { padding-left: 0; border-left: 0; }
  .index__col:last-child { padding-right: 0; }

  .colophon { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); }
}

/* 1024–1279: Myanmar labels are wide, so tighten before anything overflows */
@media (min-width: 1024px) and (max-width: 1279px) {
  .navbar__link { padding-inline: var(--sp-2); font-size: var(--fs-sm); }
  .navbar__link::after { left: var(--sp-2); right: var(--sp-2); }
  .navbar__explore { margin-left: var(--sp-2); }
  .social__extra { display: none; }
  .utility__kbd { display: none; }
  .logo { font-size: var(--fs-2xl); }
  .logo--footer { font-size: var(--fs-3xl); }   /* footer keeps full size */
}

/* ---------- Large desktop 1440+ ---------- */
@media (min-width: 1440px) {
  :root { --gutter: 40px; }
  .navbar__list { gap: var(--sp-1); }
  .navbar__link { padding-inline: var(--sp-4); }
  .colophon { padding-block: var(--sp-16); }
}

/* ---------- Small mobile ≤359 ---------- */
@media (max-width: 359px) {
  :root { --gutter: 12px; }
  .logo { font-size: 1.375rem; }
  .logo__word { display: none; }
  .logo--footer { font-size: var(--fs-2xl); }
  .logo--footer .logo__word { display: inline; }
  .iconbtn { width: 36px; }
  .breaking__inner { gap: var(--sp-2); }
  .index__grid { grid-template-columns: 1fr; }
  .cap__prefs { margin-left: 0; }
}


/* ---------- Homepage breakpoints ----------
   Kept beside the block they belong to so the homepage can be lifted into
   a WordPress template on its own. Everything is one column by default and
   gains columns as width allows; nothing scrolls sideways, and every grid
   divides into columns of equal width at each step. */

/* Phone landscape / small tablet */
@media (min-width: 600px) {
  .hero__links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wire { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-8); }
  .wire > .wire__row:nth-child(2) { border-top: 0; }
  .world { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reel-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6); }
  .local__rail { grid-auto-columns: 45%; }
  .desks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-8); }
}

/* Tablet */
@media (min-width: 768px) {
  .band__inner { padding-block: var(--sp-12); }
  .hero__copy { padding-block: var(--sp-8) var(--sp-10); }
  .hero__links { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-6); }
  .hero__link-title { font-size: var(--t-md); }
  .wire__link { flex-direction: row; align-items: baseline; gap: var(--sp-5); }
  .wire__meta { width: 8.5rem; }
  .wire__headline { font-size: var(--t-md); }
  .gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .local__card-title { font-size: var(--t-md); }
}

/* Desktop */
@media (min-width: 1024px) {
  .hero__pic { aspect-ratio: 21 / 9; }
  .hero__headline { max-width: 30ch; }
  .hero__link-pic { width: 4.5rem; }
  .hero__links { gap: var(--sp-8); }
  .wire { column-gap: var(--sp-10); }
  .wire__meta { width: 9.5rem; }
  .desks { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-10); }
  /* Wide enough now to show all four at once — the rail stops scrolling
     and settles into a plain row. */
  .local__pic { aspect-ratio: 21 / 9; }
  .local__rail { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow-x: visible; }
  .gallery__pic { aspect-ratio: 3 / 4; }
  .world { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-8); }
  .world__title { font-size: var(--t-md); }
  .world__dek { -webkit-line-clamp: 3; }
  .reels { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--sp-10); align-items: start; }
  .reel-list { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
}

/* Wide desktop */
@media (min-width: 1280px) {
  .hero__links { gap: var(--sp-10); }
  .slot { min-height: 120px; }
}

/* Very wide: more air rather than more columns */
@media (min-width: 1600px) {
  .band__inner { padding-block: var(--sp-16); }
}

/* Small phone */
@media (max-width: 359px) {
  .hero__links { gap: var(--sp-5); }
  .mark { gap: var(--sp-3); }
}

/* ==========================================================================
   15. REDUCED MOTION
   The ticker becomes a list the reader scrolls themselves.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .breaking__track { animation: none !important; width: 100%; overflow-x: auto; scrollbar-width: none; }
  .breaking__viewport { -webkit-mask-image: none; mask-image: none; }
  .breaking__ctrl { display: none !important; }
  .skel__line { background: var(--surface-2); }
  .spinner { border-top-color: currentColor; opacity: 0.5; }
}

/* ==========================================================================
   15b. TOUCH TARGETS AND THE FIELD ZOOM
   ========================================================================== */

/* Vertical padding on an `inline` box does not enlarge what a finger can hit.
   The box is laid out on the text baseline, so the padding paints over its
   neighbours instead of pushing them apart -- both rows below had already
   asked for it and silently got nothing, measuring 26px tall on a phone
   against the 44px Apple and Material both specify. inline-flex makes the
   request real and centres the label inside the taller box. */
.imprint__links a,
.cap__legal a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* 40px and 42px clear the 24px WCAG floor but not the 44px touch minimum,
   and the missing two-to-four pixels cost no layout: the icons sit on a
   wrapping flex line and the index links are blocks in a column. */
.social--footer a { width: 44px; height: 44px; }
.index__link      { padding-block: 9px; }
.capbtn           { min-height: 44px; }

/* iOS Safari zooms the whole page whenever it focuses a text field set below
   16px, and the viewport meta deliberately leaves pinch-zoom enabled, so the
   size itself is the only fix available.

   A width breakpoint alone is not enough: an iPad Air is 820px in portrait,
   clears any phone breakpoint, and zooms just the same. `pointer: coarse`
   catches every touch device whatever its width, and the width clause stays
   for the narrow desktop windows that report a fine pointer. A mouse on a
   real desktop keeps the 15px chrome scale. */
@media (max-width: 767px), (pointer: coarse) {
  .signup__input { font-size: 16px; }
}

/* ==========================================================================
   16. PRINT
   ========================================================================== */
@media print {
  .header, .search, .drawer, .skip-link, .explorer-backdrop,
  .signup, .cap__prefs { display: none !important; }
  body { padding-top: 0; }
  .cap { background: none; color: #000; }
}