/* Visual-neutrality shims for SEO-driven markup changes.
   Kept out of main.css so a future HTML5 UP refresh of the vendor stylesheet can't silently
   drop them.

   Why this file exists: correct SEO wants exactly one <h1> per page describing that page.
   Fractal only ever uses <h1> inside #header, so it defines no size for <h1> anywhere else —
   an <h1> in a section header inherits only the shared h1-h6 reset and renders SMALLER than
   the <h2> it replaced. These rules give a section-level <h1> the identical appearance to
   Fractal's <h2>, so the heading hierarchy can be fixed without changing the design.

   Values copied from main.css: `h2 { font-size: 1.75em; line-height: 1.5em }` and its
   max-width:736px override `h2 { font-size: 1.25em }`. If Fractal is ever updated, re-check
   these against it. */

header.major h1 {
	font-size: 1.75em;
	line-height: 1.5em;
}

/* --- Hero <h1> tagline -------------------------------------------------------------------
   The hero heading used to be just the brand name, with the descriptive line in a sibling
   <p>. The keywords were visible but sat outside the <h1>, so the page's strongest heading
   said nothing about what the business does. The <p> was absorbed into the <h1> as a
   <span class="tagline"> — same words, same pixels, nothing hidden from users.

   Every value below reproduces what the old <p> rendered. A <span> inherits the <h1>'s
   font-size, so sizes are expressed as a RATIO against #header h1, and `em` margins resolve
   against the element's own font-size. Writing `1.5em` here would give 1.5 x the h1 (~78px),
   not the 1.5em-of-body the <p> had. Taking F as the body font-size, the targets are:

     desktop   #header h1 3.25em bold, line-height 1em, margin-bottom 0.5em
               #header p  1.5em, line-height 1.35em, margin-bottom 1.5em
     <=736px   #header h1 2em      #header p 1em, line-height inherit (= body 1.5em)
     body      letter-spacing -0.015em, line-height 1.5em

   The <p>'s margin-bottom is 1.5em, NOT the base `p` rule's 2em: #header is a <header>
   element, so `header p { margin: 0 0 1.5em 0 }` wins. Assuming 2em here put 0.75F (16px at
   this body size) of extra air above the buttons — caught by the render diff, not by reading.

   font-size    1.5F / 3.25F            = 0.4615385em   (mobile: 1F / 2F = 0.5em)
   margin-top   recreates the h1's old margin-bottom, 0.5 x 3.25F = 1.625F, in tagline em:
                1.625F / 1.5F           = 1.0833333em   (mobile: 1F / 1F = 1em)
   h1 margin-bottom  must now equal the <p>'s old 1.5 x 1.5F = 2.25F, in h1 em:
                2.25F / 3.25F           = 0.6923077em   (mobile: 1.5F / 2F = 0.75em)
   letter-spacing  `em` computes to an absolute length at declaration and inherits as that,
                so the <p> carried body's -0.015F while the <h1> declares -0.0125em of 3.25F
                (-0.0406F). Restated in tagline em: -0.015F / 1.5F = -0.01em.
   color        the <p> inherited `#header { color: #d1e5f9 }`, but `#header h1` forces
                #ffffff. Without an explicit reset the tagline renders pure white — the one
                difference here that is obvious to the naked eye rather than sub-pixel.
   Verification: desktop compared against a pre-change render of the real page — 484 differing
   pixels of 1.96M (0.02%, pure antialiasing), with the brand line and the buttons bit-identical.
   The <=736px block could NOT be checked that way: `qlmanage -s N` sets the THUMBNAIL size, not
   the viewport width, so it scales the desktop layout instead of reflowing it and never trips a
   media query. It was verified instead on a standalone page with the 736px declarations forced
   on: all three text bands land at identical offsets, trailing margin within 1px of box
   rounding. Untested in a real narrow viewport — recheck there if the hero ever looks off on a
   phone. */

#header h1 {
	margin-bottom: 0.6923077em;
}

#header h1 .tagline {
	display: block;
	color: #d1e5f9;
	font-size: 0.4615385em;
	font-weight: normal;
	line-height: 1.35em;
	letter-spacing: -0.01em;
	margin-top: 1.0833333em;
}

@media screen and (max-width: 736px) {

	header.major h1 {
		font-size: 1.25em;
	}

	#header h1 {
		margin-bottom: 0.75em;
	}

	#header h1 .tagline {
		font-size: 0.5em;
		line-height: 1.5em;
		letter-spacing: -0.015em;
		margin-top: 1em;
	}

}