/* The opening: a heading, and the picture sitting low under it.

   The page used to begin already inside the flight, at the street corner. It begins here now,
   with the picture's top edge two thirds of the way down the window so a band of it shows
   under the heading, and the first stretch of scroll lifts it into place. What it lifts into
   is exactly where the page used to start, so the flight itself is untouched.

   The lift is a TRANSFORM on the stage, driven from the frame loop rather than a transition:
   it follows the scroll, so it has to be able to go backwards as smoothly as forwards. */
/* The wider fixed storefront uses a wider portrait view. Reveal enough of that
   picture above the fold for SCROLL to sit among buildings instead of empty sky. */
@media (max-aspect-ratio:1/1){
  :root[data-hero-unit="physical"]{ --intro-drop:0.58; }
}
/* TWICE the drop, in the top padding. The block is centred between the two paddings, so the
   centre sits at (height + top - bottom)/2 and adding N to the top moves it by N/2. The
   bottom padding is 0 and the height is the room the picture leaves, so twice is the only way
   to say it here -- and --intro-lower is the distance it actually moves, which is the number
   worth naming. */
.intro{ position:absolute; left:0; right:0; top:0; z-index:var(--z-ask);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:calc(var(--nav-h) + 2*var(--intro-lower)) var(--gutter) 0; pointer-events:none; }
.intro h1{ margin:0; text-align:center;
  font:var(--w-title) var(--fs-hero)/var(--lh-hero) var(--font-title);
  letter-spacing:var(--ls-tight); text-transform:uppercase; color:var(--ink);
  /* A MEASURE, not a line break. 14ch puts "start your" on the first line and "own business"
     on the second at every step of the clamp and at every width the page supports, down to
     390px. Measured in GABARITO, whose ch is the width of its own zero, so the number moves
     with the face AND with the words: it has been 25 and 28 for longer headings in the same
     type. The window here is 13 to 14 -- 12 breaks it into three lines and 15 takes "own" up
     onto the first -- and 14 is the end of it with the margin. */
  max-width:14ch; }

/* THE LINE UNDER IT. The heading is the claim and this is what makes it true, so it is set in
   the interface's own face rather than the title one -- it is a sentence, not a sign -- at the
   quietest weight the body text uses anywhere.

   THE MEASURE PLACES THE BREAK, and it can do that exactly because this face is a monospace:
   a `ch` is one character, so 46ch is 46 characters and nothing else. The sentence is 44
   characters up to "permits" and the next word would need 47, so it breaks after "permits" --
   which puts the whole promise on one line and what it buys you on the next. It also lands the
   line within a few pixels of OWN BUSINESS above it at every laptop width: 502px against 505
   at 1440, 392 against 386 at 1100.

   `pretty`, NOT `balance`. Balance evens the lines out, which is right for a paragraph and
   wrong here: it would ignore the measure's break and split after "and" to make two halves of
   40. Pretty leaves the earlier lines where the measure put them and only stops the last line
   being a single orphaned word, which is what a phone needs -- three lines there, and "your
   craft" together on the last rather than "craft" alone. */
.intro .lede{ margin:var(--lede-gap) 0 0; text-align:center; max-width:46ch;
  text-wrap:pretty;
  font:300 var(--fs-lede)/var(--lh-copy) var(--font-mono); color:var(--text-soft); }