/* Candidate 01 — "Left". The home page, at /.
   A single left-anchored column, vertically centred: wordmark, headline, the
   supporting line, then one ruled field with the ask spelled out beside it, and
   the promise in small print underneath. The mark bleeds out of the bottom-right
   corner, as it does on 04B, where it started — its rules are in signup.css.

   Taken from the exported comp at its larger size. The smaller size of the same
   comp put the whole composition in a corner of a desktop window with two thirds
   of the page empty, which reads as a page that failed to load rather than as
   restraint. Everything here is the comp's own numbers except where a note says
   otherwise, and every one of those notes is either the site's responsive
   convention or a contrast floor.

   It was on /mail while the two designs were being compared and won, so this is
   now the site's front door rather than a trial page. 04B is still at /mail2,
   unindexed, which is why signup.css is still split three ways.

   Loaded alongside signup.css, which holds the behaviour-critical rules. */

* { box-sizing: border-box; }
/* The mark hangs past the right edge on purpose. Both elements need this, not
   just body: with it on body alone the page could still be dragged 110px
   sideways to look at the empty margin the mark was hanging in. */
html, body { margin: 0; padding: 0; overflow-x: hidden; }

body {
  min-height: 100vh;
  background: #ecebe9;
  color: #242220;
  font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  /* The comp's 140px, but reached the way the rest of the site reaches its
     gutters, so this does not become the one page that overflows a narrow
     laptop before its own breakpoint gets a chance to fire. */
  padding: 64px clamp(28px, 9vw, 140px);
  /* Room at the bottom for the mark, which is positioned against this element.
     Without it the centred column would sit on top of the corner on any window
     too short to hold both — and on a phone that is the privacy line.
     max() rather than a sum: the mark is already most of the space the page
     wanted at the bottom, and adding the two together invented a scrollbar on a
     window that had room all along. The 24 is the gap between the last line and
     the top of the shape. */
  padding-bottom: max(64px, calc(var(--mark-visible) + 24px));
  position: relative; /* The mark is positioned against this. */
}

a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
a:hover { opacity: 0.65; }

.wm {
  display: block;
  height: 34px;
  width: auto;
  color: #242220;
}

h1 {
  font-size: 52px;
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -0.01em;
  max-width: 820px;
  margin: 56px 0 26px;
}

.sub {
  font-size: 17px;
  font-weight: 300;
  line-height: 1.75;
  color: #57534e;
  max-width: 560px;
  margin: 0;
}
.sub strong { font-weight: 500; color: #242220; }

/* The gap above the field belongs to the form, not to the row inside it. The row
   is removed on a successful signup, and when it owned the gap the thank-you
   sprang up against the paragraph above as if the page had broken at the exact
   moment it worked. The form has no padding or border, so this margin collapses
   through whichever child is first and the reply lands where the field was. */
.signup__form { margin-top: 64px; }

/* The field is a rule with things sitting on it, so the row owns the line and
   the input inside it owns nothing. */
.signup__row {
  display: flex;
  align-items: center;
  width: 520px;
  max-width: 100%;
  border-bottom: 1px solid #242220;
  padding-bottom: 14px;
}
/* Where the focus ring went. The browser's outline would draw a box around a
   field that has no box, so the rule it sits on thickens instead — the whole
   control is the line, and the line is what responds. */
.signup__row:focus-within { border-bottom-width: 2px; padding-bottom: 13px; }

.signup__input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font-size: 17px;
  font-weight: 300;
  color: #242220;
}
/* The comp's #9d9891 sat at 2.4:1 on this background. The placeholder is the
   only prompt a sighted visitor gets, so it is darkened until it is legible
   while still reading as a placeholder rather than as an answer. */
.signup__input::placeholder { color: #847f78; }

.signup__btn {
  background: none;
  border: none;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  color: inherit;
  padding: 0;
}

.signup__note,
.signup__status {
  font-size: 13px;
  font-weight: 300;
  line-height: 1.7;
  /* The comp's #6f6b66 missed 4.5:1 by a hair on this background. This is the
     nearest shade that clears it, and it is the same grey to look at. */
  color: #6b6762;
  max-width: 520px;
}
.signup__note { margin: 22px 0 0; }
.signup__status { color: #242220; }

@media (max-width: 900px) {
  .wm { height: 30px; }
  h1 { font-size: 44px; max-width: 640px; margin: 48px 0 24px; }
  .sub { font-size: 16px; max-width: 520px; }
  .signup__form { margin-top: 60px; }
  .signup__row { width: 480px; }
}

@media (max-width: 560px) {
  body { padding: 48px 28px; padding-bottom: max(48px, calc(var(--mark-visible) + 24px)); }
  .wm { height: 26px; }
  h1 { font-size: 32px; margin: 40px 0 18px; }
  .sub { font-size: 15px; }
  .signup__form { margin-top: 52px; }
  .signup__row { width: 100%; }
  .signup__input { font-size: 16px; } /* Under 16px, iOS zooms the page on focus. */
  .signup__note, .signup__status { font-size: 12.5px; }
  .signup__note { margin-top: 20px; }
}