/*
 * Broadfork, the coming-soon page.
 *
 * Hand written, no framework, no build step. A framework's defaults ARE the
 * tells this page is supposed to avoid (#657), so there is nothing here that
 * ships with anything.
 *
 * THE PALETTE IS THE APP'S OWN Meadow scheme, copied from
 * garden-planner/homestead-helper/src/constants/theme.ts. That file is the
 * source; these are values, not a second opinion. It is also the single
 * strongest anti-generic move available, because no template ships with it.
 *
 * NO GRID ANYWHERE, on purpose. The app is a lattice of beds, squares and
 * half-inch points. The site deliberately is not.
 */

/* ---- Meadow, light ------------------------------------------------------ */

:root {
  --ground:        #FAF8F1;  /* background */
  --ink:           #2E2A20;  /* text */
  --ink-soft:      #6F6858;  /* textSecondary */
  --element:       #F0EBDE;  /* backgroundElement */
  --rule:          #E3DCC9;  /* backgroundSelected, used here as a hairline */
  --accent:        #4C7A3C;  /* accent */
  --on-accent:     #FFFFFF;  /* onAccent */
  --accent-soft:   #DEE9D3;  /* accentSoft */
  --link:          #35684A;  /* link */
  --danger:        #A94A34;  /* danger */

  /* Fredoka is the app's label face and the wordmark's own face. It is used
     here for the mark and the button and nowhere else: a rounded sans doing
     display work over a serif text face is a typesetting pairing, not a theme. */
  --face-mark: 'Fredoka', 'Trebuchet MS', 'Segoe UI', sans-serif;

  /* A text face with a real serif on every platform he cares about. The tell
     being avoided is Inter at stock weights, which is what every generated page
     ships with. This reads printed instead. */
  --face-text: 'Iowan Old Style', 'Palatino Linotype', Palatino, Charter,
               'Bookman Old Style', Georgia, 'Times New Roman', serif;

  /* ONE LEFT EDGE FOR THE WHOLE PAGE, and it is the only alignment this layout
     has. The masthead, the text, the picture and the footer all start here, so
     the page reads as one column of things rather than a stack of unrelated
     bands. His catch: the text did not line up with the picture, because the
     picture bled to 0 and the text started at a margin. */
  --gutter: clamp(1.25rem, 9vw, 10rem);

  /* The measure. 40rem at this size is about 72 characters, which is the long
     end of comfortable for a serif and as wide as this should go before lines
     get hard to track back. */
  --measure: 40rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground:      #191813;
    --ink:         #ECE7DA;
    --ink-soft:    #A8A08D;
    --element:     #242219;
    --rule:        #333023;
    --accent:      #8FB877;
    --on-accent:   #1B2312;
    --accent-soft: #2E3A24;
    --link:        #9CC3A8;
    --danger:      #D9755B;
  }
}

@font-face {
  font-family: 'Fredoka';
  src: url('assets/fonts/Fredoka-Variable.ttf') format('truetype-variations');
  font-weight: 300 600;
  font-display: swap;
}

/* ---- The sheet ---------------------------------------------------------- */

* { box-sizing: border-box; }

/* The ground is painted here as well as on body, because body is now capped and
   a capped body would otherwise leave the edges of a wide screen to the
   browser's own white. */
html {
  -webkit-text-size-adjust: 100%;
  background: var(--ground);
}

/* NOT ASKED FOR, FLAGGED IN CHAT. On a 1900px monitor a 620px column pinned to
   the left leaves two thirds of the screen empty, which reads as broken rather
   than as asymmetric. Capping the whole layout and centring THAT keeps the
   left-aligned column and the one left edge, and only decides where the
   leftover space goes: still more of it on the right, but bounded. */
body {
  max-width: 80rem;
  margin: 0 auto;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--face-text);
  font-size: 1.0625rem;
  line-height: 1.62;
  /* The BLOCK is centred; the content inside it is not. Everything sits on one
     left edge with the space falling to the right, because centred-everything
     is one of the tells. */
  text-rendering: optimizeLegibility;
}

.sheet {
  max-width: var(--measure);
  margin: 0 0 0 var(--gutter);
  padding: 0 1.25rem 0 0;      /* nothing on the left: the gutter IS the left edge */
}

/* ---- Masthead ----------------------------------------------------------- */

.masthead {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding-top: clamp(2.5rem, 7vh, 4.5rem);
}

.mark {
  width: 38px;
  height: 38px;
  display: block;
}

.wordmark {
  font-family: var(--face-mark);
  font-weight: 500;
  font-size: 1.45rem;
  letter-spacing: 0.0104em;    /* design/backdrops/wordmark.mjs: 1.0 at size 96 */
  color: var(--ink);
}

/* The symbol rides high and small. It is never the thing you read. */
.tm {
  font-size: 0.5em;
  vertical-align: 0.62em;
  letter-spacing: 0;
  margin-left: 0.04em;
}

/* ---- Text --------------------------------------------------------------- */

main { padding-bottom: clamp(2.5rem, 6vh, 4rem); }

.lede {
  font-size: clamp(1.55rem, 4.4vw, 2.2rem);
  line-height: 1.22;
  font-weight: normal;
  margin: clamp(2rem, 5vh, 3.2rem) 0 1.8rem;
  max-width: 17em;
  text-wrap: balance;
}

p { margin: 0 0 1.15rem; }

.close {
  margin: 2.2rem 0 0;
  padding-top: 1.6rem;
  border-top: 1px solid var(--rule);
  font-size: 1.2rem;
  line-height: 1.45;
  color: var(--ink);
}

/* ---- Signup ------------------------------------------------------------- */

.signup { margin-top: 2.4rem; }

.signup h2 {
  margin: 0 0 1.3rem;
  font-family: var(--face-text);
  font-size: 1.0625rem;
  font-weight: normal;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 30em;
}

label {
  display: block;
  font-family: var(--face-mark);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.35rem;
}

.field {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.9rem;
}

/* A ruled line, not a rounded box. The box with a soft shadow is a tell; a rule
   under a line of type is how a form looks on paper. */
input[type='email'] {
  flex: 1 1 14rem;
  min-width: 0;
  font-family: var(--face-text);
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1.5px solid var(--rule);
  border-radius: 0;
  padding: 0.35rem 0.1rem;
  transition: border-color 120ms ease;
}

input[type='email']:hover { border-bottom-color: var(--ink-soft); }

input[type='email']:focus {
  outline: none;
  border-bottom-color: var(--accent);
  border-bottom-width: 2px;
  padding-bottom: calc(0.35rem - 0.5px);
}

/* Focus has to survive a keyboard as well as a mouse. The rule alone is too
   quiet for that, so a ring comes with it when the browser says keyboard. */
input[type='email']:focus-visible {
  box-shadow: 0 2px 0 0 var(--accent-soft);
}

button {
  flex: 0 0 auto;
  font-family: var(--face-mark);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--on-accent);
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 3px;
  padding: 0.55rem 1.05rem;
  cursor: pointer;
  transition: filter 120ms ease;
}

button:hover { filter: brightness(1.08); }
button:active { filter: brightness(0.94); }

button:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

button[disabled] { opacity: 0.55; cursor: default; filter: none; }

.fine {
  margin: 0.85rem 0 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* A failed write says so, in the same voice and the same place as a good one.
   Silent failure is the bug class this project has a whole document about. */
.result {
  margin: 0.9rem 0 0;
  font-size: 0.95rem;
  line-height: 1.5;
}

.result[data-state='ok']   { color: var(--accent); }
.result[data-state='bad']  { color: var(--danger); }

/* ---- The picture, used large and once ----------------------------------- */

/* IT IS A PLATE, NOT A BANNER. Same left edge as the text and a right edge just
   past the text's, so it sits with the prose instead of running away from it.
   His catch: bleeding it off the right made it a banner on a wide screen, which
   is the thing the page is not. */
.band {
  margin: 0 0 0 var(--gutter);
  max-width: calc(var(--measure) + 2rem);
  overflow: hidden;
}

.band img {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(38vh, 320px);
  object-fit: cover;
  object-position: 50% 100%;   /* the tines are at the bottom */
}

/* ---- Foot --------------------------------------------------------------- */

/* NO TINT. A tinted block needs its own edges, and any edge it picks either
   starts at 0 (the misalignment just fixed) or insets its text off the page's
   one left edge. The picture above it already does the separating. */
footer { padding: 1.6rem 0 2.4rem; }

.where {
  margin: 0 0 0.55rem;
  font-size: 0.95rem;
}

.where a { margin-right: 1.4rem; }

a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover { text-decoration-thickness: 2px; }

a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---- Narrow ------------------------------------------------------------- */

/* Narrow: the gutter collapses to a plain page margin and the picture goes full
   bleed, because at this width an inset picture is just a smaller picture. The
   single left edge survives either way. */
@media (max-width: 46rem) {
  :root { --gutter: 1.25rem; }
  .band { margin-left: 0; max-width: none; }
  .band img { max-height: 46vh; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ---- The prose pages ----------------------------------------------------- */

/* Only privacy.html today. Same single left edge, same measure, same ground as
   the front page: a policy that looks like a different site reads as somebody
   else's boilerplate, which is the one thing it must not read as. */

.home {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
}

.home:hover .wordmark { color: var(--link); }

/* A KICKER, NOT A HEADLINE. The lede runs to 2.2rem and the front page has no
   h1 at all, so a title sized to compete with the lede loses and reads as a
   mistake. Small and quiet above it is the hierarchy that is actually true:
   the sentence is the heading, and this only says which page you are on. */
.title {
  font-family: var(--face-mark);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0;
  color: var(--ink-soft);
}

/* Tight to its kicker rather than floating free of it. */
.prose .lede { margin-top: 0.7rem; }

/* Subheads carry the structure, so they are the only thing allowed to be loud
   here. .signup h2 is more specific and keeps its own quieter treatment. */
.prose h2 {
  font-family: var(--face-mark);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  margin: 2rem 0 0.6rem;
  color: var(--ink);
}

.prose ul {
  margin: 0 0 1.15rem;
  padding-left: 1.1rem;
}

.prose li {
  margin-bottom: 0.35rem;
  padding-left: 0.2rem;
}

.prose .fine { margin-top: 2.2rem; }

/* ---- The honeypot ------------------------------------------------------- */

/* NOT display:none and NOT type="hidden". Both are what a bot checks for, and
   autofill treats a hidden input as fair game while leaving an off screen one
   alone. This moves it out of sight and out of the layout, and the field is
   already aria-hidden with tabindex -1 so nothing using the page can land on
   it. */
.trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}