/* Mobile layout for the exported pages. Page markup is inline-styled, so the
   overrides here are !important by necessity, and scoped to narrow viewports. */

html { -webkit-text-size-adjust: 100%; }

@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 200 500;
  font-display: swap;
  src: url('/newsreader-normal-200-500-v26.woff2') format('woff2');
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 200 500;
  font-display: swap;
  src: url('/newsreader-italic-200-500-v26.woff2') format('woff2');
}

/* Semantic controls keep the exported design while remaining keyboard-usable. */
.theme-toggle,
.hlw-trigger,
.chip-row button {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  color: inherit;
  font: inherit;
}
.theme-toggle:focus-visible,
.hlw-trigger:focus-visible,
.chip-row button:focus-visible,
.swipe-btn:focus-visible,
.swipe-dot:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.hlw-trigger { cursor: pointer; }
.hlw[data-pop-open] > .hl-pop {
  visibility: visible !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
  transition-delay: 0s !important;
}

@media (max-width: 700px) {
  body { overflow-x: hidden; }

  /* svh, so the shells do not overshoot behind a mobile browser's toolbars. */
  .site-shell { min-height: 100svh !important; }

  /* Fixed chrome pulls in to match the shell's own gutter. */
  .site-mark { top: 22px !important; left: 20px !important; font-size: 18px !important; }
  .site-tools { top: 16px !important; right: 14px !important; gap: 2px !important; }
  /* Comfortable tap target without moving the icon off its optical spot. */
  .theme-toggle { width: 44px !important; height: 44px !important; -webkit-tap-highlight-color: transparent; }
  .site-date { font-size: 9px !important; letter-spacing: 0.1em !important; padding-right: 7px; }

  .site-col { width: 100% !important; max-width: 100% !important; }

  /* Inner pages: one shared gutter, and enough headroom to clear the fixed mark. */
  .page-inner { padding: 80px 20px 72px !important; }

  /* Home ------------------------------------------------------------------ */
  /* Home's own stylesheet already drops its viewport lock below 701px. */
  .page-home {
    height: auto !important;
    overflow: visible !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    padding: 92px 20px 128px !important;
  }

  /* The desktop social rail is a fixed left column. On a phone it collides with
     the copy, so it becomes a wrapping row underneath it instead. */
  .site-rail {
    position: static !important;
    transform: none !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 14px 22px !important;
    margin: 40px 0 0 !important;
    padding-top: 26px;
    border-top: 1px solid var(--border-soft, rgba(20, 22, 26, 0.08));
  }
  .site-rail a { padding: 4px 0; }

  /* Hover popups ---------------------------------------------------------- */
  /* Touch has no hover, so mobile.js opens these on tap via [data-pop-open].
     It also sets margin-left to keep a popup inside the viewport. */
  .hlw[data-tap-pop] { -webkit-tap-highlight-color: transparent; }
  .hlw[data-pop-open] > .hl-pop {
    visibility: visible !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
    transition-delay: 0s !important;
  }
  .hl-pop { max-width: calc(100vw - 40px) !important; }
  .hl-pop img { max-width: 100% !important; }
  /* How I Work ------------------------------------------------------------ */
  .swipe-panel { gap: 24px !important; }
  .swipe-btn { min-height: 44px; }
  /* 5px dots are too small to hit; grow the target without moving the dot. */
  .swipe-dot { position: relative; }
  .swipe-dot::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    transform: translate(-50%, -50%);
  }
  .swipe-dots { gap: 20px !important; margin-top: 30px !important; }

  /* Reading --------------------------------------------------------------- */
  .chip-row { gap: 8px !important; margin-bottom: 32px !important; }
  .chip-row > button { min-height: 36px; display: inline-flex !important; align-items: center; }

}

/* Medium-width, short windows need scrolling too. */
@media (min-width: 701px) and (max-height: 619px) {
  .page-home {
    height: auto !important;
    min-height: 100vh !important;
    overflow: visible !important;
    align-items: flex-start !important;
    padding-top: 80px !important;
    padding-bottom: 108px !important;
  }
}

/* Phones held sideways. These are wide enough to miss the block above, but far
   too short for a locked, vertically centred page, so let them scroll and give
   the copy back the vertical space the desktop chrome would have taken. */
@media (max-height: 520px) and (max-width: 1000px) {
  .site-shell { min-height: 0 !important; }
  .page-home {
    height: auto !important;
    overflow: visible !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding-top: 60px !important;
    padding-bottom: 108px !important;
  }
  .site-rail {
    position: static !important;
    width: min(92vw, 640px) !important;
    transform: none !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 14px 22px !important;
    margin: 40px 0 0 !important;
    padding-top: 26px;
    border-top: 1px solid var(--border-soft, rgba(20, 22, 26, 0.08));
    box-sizing: border-box;
  }
  .page-inner { padding-top: 60px !important; padding-bottom: 48px !important; }
  .site-tools { flex-direction: row !important; align-items: center !important; gap: 10px !important; }
  .site-date { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .hl-pop { transition: none !important; }
  .site-col, .site-rail { animation: none !important; }
}