/* NoDawn landing page — the mobile layer.
 *
 * SEPARATE FILE ON PURPOSE. index.html is GENERATED by build-from-handoff.mjs from the Claude
 * Design artboard, and the README's whole reason for keeping that script is so a redesign can be
 * re-imported rather than hand-patched. Anything written INTO the generated file is therefore
 * one re-run away from being erased — which is already true of the fourteen copy corrections
 * audited on 2026-08-22, and would have been true of every rule below. The generator links this
 * file instead, so a re-import carries the mobile layer forward untouched.
 *
 * It loads last, and every rule is !important, because the artboard's styling is inline style
 * attributes and those outrank any stylesheet.
 */

/* ── MOBILE ─────────────────────────────────────────────────────────────────────────────────
   The page came from a desktop artboard: every section carries inline `padding:… 64px`, rows are
   non-wrapping flex, and the display type is sized for a wide viewport. On a phone that did not
   merely scroll — it CLIPPED: the wordmark, the hero paragraph and most of the nav were cut off
   at the right edge, with no horizontal scrollbar to reveal them, because the containers hide
   their overflow. Measured at 390px: 31 elements past the edge.
   Inline styles win over stylesheets, so these overrides need !important. They are deliberately
   structural (padding, wrap, columns, max-width) rather than cosmetic. */
@media (max-width: 760px) {
  /* `header` and `footer` are named explicitly: they are siblings of the sections, not sections,
     so a rule that says `section` leaves them on the artboard's desktop gutter — the body text
     lands at 20px and the footer at 64px, which reads as a misaligned page rather than as a
     missing rule. */
  [data-nd-root] section,
  [data-nd-root] header,
  [data-nd-root] footer,
  [data-nd-root] > div > div { padding-left: 20px !important; padding-right: 20px !important; }

  /* A section's DIRECT children are layout columns, not cards — on the artboard they carry a
     second helping of 56–64px horizontal padding, which is what kept the hero 483px wide inside a
     350px content box. Cards nested deeper keep their own padding. */
  [data-nd-root] section > div { padding-left: 0 !important; padding-right: 0 !important; }

  /* min-width:auto is the default on grid and flex ITEMS, and it refuses to shrink below the
     content's min-content width — so one long word or a wide lockup forces the whole column past
     the viewport no matter what max-width says. This is the canonical fix and it is what was still
     pushing the hero 23px over at 360px. */
  [data-nd-root] * { min-width: 0 !important; }
  [data-nd-root] h1, [data-nd-root] h2, [data-nd-root] p { overflow-wrap: break-word !important; }

  /* Let every row stack instead of running off the edge. The marquee is exempt — it is meant to
     be wider than the screen and is clipped on purpose by its own overflow:hidden parent. The
     exemption must reach DESCENDANTS: `data-marquee` is on that clipping wrapper, but the flex
     row is the `data-marquee-track` inside it, so `:not([data-marquee])` alone still wraps the
     strip. Today `width:max-content` hides the damage; the exemption should not depend on it. */
  /* BOTH spellings: the artboard's own markup writes `display:flex`, while anything the page's
     script restyles at runtime comes back normalised as `display: flex` with a space. Matching
     only one form silently misses half the rows — which is what left the hero stat strip running
     off the edge after everything else was fixed. */
  [data-nd-root] [style*="display:flex"]:not([data-marquee]):not([data-marquee] *),
  [data-nd-root] [style*="display: flex"]:not([data-marquee]):not([data-marquee] *) { flex-wrap: wrap !important; }
  [data-nd-root] [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

  /* Nothing may exceed the viewport. */
  [data-nd-root] *:not([data-marquee]):not([data-marquee] *) { max-width: 100% !important; }
  [data-nd-root] img { height: auto !important; }

  /* Display type sized for a phone rather than a 1440 artboard. */
  [data-nd-root] h1 { font-size: clamp(30px, 9vw, 46px) !important; line-height: 1.1 !important; }
  [data-nd-root] h2 { font-size: clamp(22px, 6.5vw, 32px) !important; line-height: 1.15 !important; }
  [data-nd-root] p  { font-size: 16px !important; }

  /* The wordmark is a fixed-width lockup; let it shrink with the screen. */
  [data-nd-root] [style*="Cambridge"] { font-size: clamp(34px, 13vw, 64px) !important; }

  /* Buttons go full width and stop sitting side by side. */
  [data-nd-root] a[style*="display:inline-block"],
  [data-nd-root] button { max-width: 100% !important; }
}

/* ── ERGONOMICS: a touch question, not a width one ──────────────────────────────────────────
   These are deliberately NOT in the block above. Width decides LAYOUT — and the desktop grid
   genuinely holds at 768, so stacking it there would be a downgrade. What a fingertip needs is
   independent of that, and keying it to width gets two common cases wrong in opposite ways: an
   iPad in portrait (768) and a phone in LANDSCAPE (844 wide, still a phone) both sit above the
   breakpoint and would keep the 19px mouse-sized nav links. `pointer: coarse` asks the question
   that actually matters, and the width arm keeps the rules working in a narrow desktop window
   where the emulator — and a designer checking the page — has a fine pointer. */
@media (max-width: 760px), (pointer: coarse) {
  /* Touch targets. The artboard is a mouse design: nav links resolve to a 19px-tall box and
     footer links to 24px, both under WCAG 2.5.8's 24px floor once you account for the pointer
     being a fingertip rather than a cursor. Padding them to 44px costs nothing on a phone, where
     the rows stack anyway. */
  [data-nd-root] nav a,
  [data-nd-root] footer a { min-height: 44px !important; display: inline-flex !important; align-items: center !important; }

  /* The scroll chevron is drawn FROM its own borders, so padding it would enlarge the visible
     mark. Grow the hit area instead with a transparent pseudo-element: -13px around an 18px box
     is 44px, and nothing on screen moves. */
  [data-nd-root] a[aria-label="Scroll"]::after { content: ""; position: absolute; inset: -13px; }

  /* Label type. Nine-to-ten-and-a-half-pixel uppercase letterspaced eyebrows read fine on a 1440
     artboard and are a squint on a phone; 11.5px is the floor. Listed by size because the sizes
     are inline on the elements — there is no class to hook — and in both spellings, for the same
     reason the flex rule above needs both: the file writes `font-size:10px`, but the elements the
     page restyles at runtime report `font-size: 10px`, and matching one form misses those. */
  [data-nd-root] [style*="font-size:9px"],   [data-nd-root] [style*="font-size: 9px"],
  [data-nd-root] [style*="font-size:9.5px"], [data-nd-root] [style*="font-size: 9.5px"],
  [data-nd-root] [style*="font-size:10px"],  [data-nd-root] [style*="font-size: 10px"],
  [data-nd-root] [style*="font-size:10.5px"],[data-nd-root] [style*="font-size: 10.5px"] { font-size: 11.5px !important; }
}