/* Every screen shape, the iPhone Duo first (see CLAUDE.md, "iPhone Duo and every screen shape").
   Loaded by every page after its own CSS.
   outer screen   about 466 x 678   short and wide: no hero that hides the main action
   open, upright  about 669 x 951   one capped column
   open, sideways about 951 x 669   two halves with the fold down the middle: nothing important across it
   The camera island can sit on the side, so the left and right safe areas are always applied (pages use
   viewport-fit=cover). Use the --sl / --sr / --fold variables in page CSS. */
:root {
  --sl: env(safe-area-inset-left, 0px);
  --sr: env(safe-area-inset-right, 0px);
  --fold: 28px;               /* half the band kept free around the crease */
}

/* the common page container and the floating nav stay inside the side safe areas */
body:has(> header.nav) .wrap { width: min(1180px, 100% - 40px - var(--sl) - var(--sr)); margin-left: max(calc(20px + var(--sl)), calc((100% - min(1180px, 100% - 40px - var(--sl) - var(--sr))) / 2)); margin-right: auto; }
header.nav { width: min(1180px, 100% - 24px - var(--sl) - var(--sr)); }

/* a full nav only where it fits on one line */
@media (max-width: 1120px) { header.nav .links { display: none; } header.nav .btn { margin-left: auto; } }

/* tall heroes never push the first action off a short screen */
@media (max-height: 720px) and (max-width: 860px) {
  .h1 { font-size: clamp(38px, 9vw, 54px); }
}

/* an open screen held sideways: text and actions stay in one half */
@media (min-width: 820px) and (max-width: 1100px) and (orientation: landscape) and (min-height: 560px) {
  .split-l .h1, .split-l h1 { font-size: clamp(40px, 9vh, 68px); }
  .card.gate { margin-left: calc(28px + var(--sl)) !important; margin-right: auto !important; max-width: calc(50vw - var(--fold) - 48px - var(--sl)); }
  .gate:not(.card) { place-items: center start; padding-left: calc(28px + var(--sl)); }
  .gate .card { max-width: calc(50vw - var(--fold) - 48px - var(--sl)); }
  /* the converter: the intro in the left half, the tool in the right half */
  main:has(> .tool) { display: grid; grid-template-columns: calc(50vw - var(--fold)) calc(50vw - var(--fold)); column-gap: calc(var(--fold) * 2); align-items: start; }
  main:has(> .tool) > * { grid-column: 1 / -1; }
  main:has(> .tool) > .hero { grid-column: 1; position: sticky; top: 70px; }
  main:has(> .tool) > .tool { grid-column: 2; width: auto; max-width: none; margin: 0; padding: 24px calc(20px + var(--sr)) 0 0; }
  main:has(> .tool) > .hero .wrap { width: auto; max-width: none; padding: 0 0 0 calc(28px + var(--sl)); }
  .split-l { max-width: calc(50vw - var(--fold) - 20px - var(--sl)) !important; }
  .split-r { margin-left: calc(50vw + var(--fold)) !important; max-width: calc(50vw - var(--fold) - 20px - var(--sr)) !important; }
}

/* the open pages (open, spec, convert) */
body:has(> header.top) :is(.top .wrap, main .wrap, footer .wrap) { padding-left: calc(20px + var(--sl)); padding-right: calc(20px + var(--sr)); }