/* The public page at /.

   The whole page is laid out as the thing it is selling: one hairline runs
   from under the top bar to the last line of the footer, every section hangs
   off it as a row, and the section's label is set in the column where the
   rail keeps arrival times. Sections butt together with a rule between them,
   so the page reads the way the list does: day groups down one spine.

   Dark at both ends and at the keyboard, warm stone through the middle, one
   accent, and mono for anything the machine wrote or the reader presses.

   Two faces, both vendored beside the JetBrains one in base.css so this page
   still reaches the network for nothing: JetBrains Mono is the voice, IBM
   Plex Sans carries the running text. */

@font-face {
  font-family: "IBM Plex Sans";
  src: url("/static/fonts/IBMPlexSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("/static/fonts/IBMPlexSans-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

:root {
  /* The gutter is the time column, widened for a word. The spine sits on its
     right edge and everything else is measured from there. */
  --gutter: clamp(74px, 12vw, 176px);
  --pad: clamp(18px, 4vw, 52px);
  --lane: 1420px;
  --band-pad: clamp(52px, 7vw, 96px);
  --font-text: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* The hairline between sections, per ground. */
  --seam: var(--line);
  --seam-dark: color-mix(in srgb, var(--mist) 13%, transparent);
}

/* The ground the footer is painted in, so a viewport taller than the page
   shows more of the dark end rather than a stone strip under it. */
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 15px/1.65 var(--font-text);
  -webkit-font-smoothing: antialiased;
}

/* Mono is a drawing of a key, a record or a name, never a place for a
   typographic flourish: the arrows and the double-dashes stay as typed. */
.lead, .say, .lane__label, .mark, .cta, kbd, code, .proof {
  font-variant-ligatures: none;
}

/* --------------------------------------------------------------- the lane

   Two columns: the label, then everything else. The spine is the label
   column's right border rather than a decoration on top of the section, so
   it can never drift out of the grid it belongs to. Vertical padding lives on
   the two children, which is what lets the border run the full height of the
   band and meet the band below it. */

.band { position: relative; }

/* Every seam but the first is drawn, because two stone sections in a row
   otherwise run together into one long page. */
.band + .band { border-top: 1px solid var(--seam); }
.band + .band--ground, .band--ground + .band { border-top-color: var(--seam-dark); }

.lane {
  display: grid;
  grid-template-columns: var(--gutter) minmax(0, 1fr);
  width: 100%;
  max-width: var(--lane);
  margin: 0 auto;
  padding: 0 var(--pad);
}

.lane__label {
  grid-column: 1;
  position: relative;
  margin: 0;
  padding: var(--band-pad) clamp(14px, 2vw, 26px) var(--band-pad) 0;
  border-right: 1px solid var(--line);
  text-align: right;
  font: 500 10.5px/1.5 var(--font-data);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--faint);
}

/* The mark that says "here", taken from the rail's unread dot and sat on the
   spine at the label's own line. */
.lane__label::after {
  content: "";
  position: absolute;
  right: -3.5px;
  top: calc(var(--band-pad) + 5px);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-deep);
}
.lane__label--bare::after { content: none; }

.lane__body {
  grid-column: 2;
  min-width: 0;
  padding: var(--band-pad) 0 var(--band-pad) clamp(20px, 3vw, 42px);
}

.band--ground .lane__label {
  border-right-color: color-mix(in srgb, var(--mist) 16%, transparent);
  color: var(--dim-deep);
}
.band--ground .lane__label::after { background: var(--accent); }

/* ---------------------------------------------------------------- grounds */

.band--pane { background: var(--pane); }
.band--pane-2 { background: var(--pane-2); }
.band--ground { background: var(--ground); color: var(--mist); }

/* The hero holds the shot, which is cropped by the band's own bottom edge:
   the mailbox runs off the page rather than stopping in a frame. */
.band--ground:first-of-type { overflow: hidden; padding-bottom: 0; }

.band--tail .lane__body { padding-bottom: clamp(40px, 5vw, 64px); }
.band--foot .lane__body { padding-top: 0; padding-bottom: clamp(38px, 5vw, 56px); }
.band--foot .lane__label { padding-top: 0; }

/* --------------------------------------------------------------- the mark

   One accent bar and three rows, the app's own left pane seen from far away.
   Never ship the rows without the bar. */

.mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font: 700 15px/1 var(--font-data);
  letter-spacing: -.02em;
  color: var(--mist);
  white-space: nowrap;
}
.mark svg { width: 20px; height: 20px; flex: none; }
.mark b { font-weight: 700; color: var(--accent); }
.mark i { font-style: normal; color: var(--dim); }
/* One flex item, so the row gap sits between the mark and the word and not
   between the three tones of the word. */
.mark__word { display: inline-block; }

/* ---------------------------------------------------------------- top bar */

.bar {
  background: var(--ground-deep);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
}
.bar__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: var(--chrome-h);
  max-width: var(--lane);
  margin: 0 auto;
  padding: 0 var(--pad);
}

/* ------------------------------------------------------------------- open

   The words and the dog, then the product itself underneath them. */

.open {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
  gap: clamp(24px, 5vw, 56px);
  align-items: center;
}

/* The lead is the sentence, not the name: the name is already in the bar
   above and in the mark beside it. Mono at this size is the whole voice of
   the page, so it is set tight and left to carry it alone. */
.lead {
  margin: 0;
  max-width: 15ch;
  font: 700 clamp(2.1rem, 5.6vw, 3.5rem)/1.06 var(--font-data);
  letter-spacing: -.055em;
  color: var(--mist);
  text-wrap: balance;
}

.lede {
  max-width: 48ch;
  margin: 22px 0 0;
  font-size: clamp(.95rem, 1.5vw, 1.06rem);
  line-height: 1.72;
  color: color-mix(in srgb, var(--mist) 82%, var(--dim));
}

.acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
}

.cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 20px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: var(--accent-solid);
  color: #ffffff;
  font: 700 13.5px/1 var(--font-data);
  letter-spacing: -.01em;
  text-decoration: none;
  transition: background-color .15s, border-color .15s, color .15s;
}
.cta:hover { background: #4470af; }

.cta--quiet {
  background: transparent;
  border-color: color-mix(in srgb, var(--mist) 26%, transparent);
  color: var(--mist);
  font-weight: 400;
}
.cta--quiet:hover { border-color: var(--accent); color: var(--accent); }

.cta--small { padding: 8px 14px; font-size: 12.5px; }

.foot-note {
  margin: 22px 0 0;
  font-size: 13px;
  color: var(--dim);
}

/* The mascot ships on its own cream ground, so the plate is painted the same
   cream and the image edge disappears into it. */
.plate {
  margin: 0;
  border-radius: 12px;
  background: var(--plate, #fde8c2);
  padding: 14px 18px 0;
  box-shadow: 0 24px 60px -28px rgba(0, 0, 0, .75);
}
.plate img { display: block; width: 100%; height: auto; }

/* ---------------------------------------------------------------- the shot

   A photograph of the app, not a drawing of it. Its left edge lands on the
   spine so the app's own rail carries the line on, and it is clipped by the
   band's bottom and right edges, because a mailbox does not end. Retake with
   brand/shot/generate.sh. */

/* No top margin: the band's own bottom padding is the gap, which is what
   makes the spine above meet this border rather than break short of it. */
.shot {
  margin: 0 0 0 calc(50% - min(var(--lane), 100%) / 2 + var(--pad) + var(--gutter));
  max-height: clamp(300px, 42vw, 560px);
  overflow: hidden;
  border-top: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
  border-left: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
  border-top-left-radius: 10px;
  box-shadow: -18px -14px 60px -30px rgba(0, 0, 0, .9);
}

.shot__img {
  display: block;
  width: 100%;
  height: auto;
  border-top-left-radius: 9px;
}

/* ----------------------------------------------------------------- shared */

/* The section sentence. Mono, because the lead above it is mono and a second
   voice at this size would read as a second page. */
.say {
  margin: 0 0 14px;
  max-width: 27ch;
  font: 700 clamp(1.45rem, 3.1vw, 2rem)/1.16 var(--font-data);
  letter-spacing: -.042em;
  color: var(--ink);
  text-wrap: balance;
}
.say--dark { color: var(--mist); }

/* The running copy, every band. Kept near 64 characters, which is where a
   line of this size stops needing a second pass to read. */
.prose { margin: 0 0 clamp(26px, 3.5vw, 36px); max-width: 64ch; }
.prose p { margin: 0; font-size: 15px; color: var(--muted); }
.prose p + p { margin-top: 14px; }
.band--ground .prose p { color: var(--dim); }

code {
  padding: 1px 5px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--pane-2);
  font: 400 12.5px/1 var(--font-data);
  color: var(--ink);
}
.band--pane-2 code { background: var(--pane); }

kbd {
  display: inline-block;
  min-width: 22px;
  padding: 1px 6px;
  margin: 0 1px;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--pane);
  font: 400 11.5px/1.6 var(--font-data);
  color: var(--ink);
  text-align: center;
}
.band--pane-2 kbd { background: var(--pane); }

/* On the dark ground a keycap is lit from its own face rather than outlined:
   white at 6% with a brighter bottom edge, which is the same trick the light
   caps use and the only way the row reads as keys here. */
.band--ground kbd {
  border-color: color-mix(in srgb, var(--mist) 22%, transparent);
  border-bottom-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--mist) 7%, transparent);
  color: var(--mist);
}

/* The proof line. One sentence under the copy, in the voice the app uses for
   a time or a count: quiet, mono, and hung off a rule so it is plainly a note
   on the claim above it rather than a claim of its own. */
.proof {
  margin: clamp(22px, 3vw, 30px) 0 0;
  padding-top: 14px;
  max-width: 62ch;
  border-top: 1px solid var(--line);
  font: 400 12.5px/1.7 var(--font-data);
  letter-spacing: -.01em;
  color: var(--muted);
}
.band--ground .proof { border-top-color: color-mix(in srgb, var(--mist) 16%, transparent); color: var(--dim); }

/* ---------------------------------------------------------------- sign off */

.band--foot { border-top: 1px solid color-mix(in srgb, var(--mist) 9%, transparent); }

.sign {
  display: flex;
  align-items: center;
  gap: clamp(20px, 4vw, 40px);
  flex-wrap: wrap;
  padding-top: clamp(30px, 4vw, 44px);
}

.sign__mascot {
  width: 128px;
  height: auto;
  flex: none;
  align-self: flex-end;
  padding: 8px 10px 0;
  border-radius: 10px;
  background: #fbeed1;
}

.sign__lines { min-width: 0; }
.sign__line { margin: 0; font-size: 13px; color: var(--dim); }
.sign__line + .sign__line { margin-top: 10px; }
.sign .mark { margin-bottom: 12px; }
.sign__link { color: var(--dim); text-decoration: underline; text-underline-offset: 3px; }
.sign__link:hover { color: var(--accent); }

/* ------------------------------------------------------------- the connector

   The MCP section, built out of the sheet above rather than beside it: the
   band is two paragraphs, a line pointing at Settings and the three things it
   will not do. The address itself is not on this page. */

/* The pointer at Settings sits on its own rule, so the list under it needs
   room or the two hairlines read as one broken box. */
.proof + .limits { margin-top: clamp(24px, 3vw, 32px); }

/* The limits, set as rules like the sheet above them. role="list" stays on the
   markup: a list with no markers stops being announced as one otherwise. */
.limits {
  margin: 0;
  padding: 0;
  max-width: 74ch;
  list-style: none;
  border-top: 1px solid var(--line);
}

.limits li {
  position: relative;
  padding: 13px 0 13px 22px;
  border-bottom: 1px solid var(--line);
  font-size: 14.5px;
  color: var(--muted);
}

.limits li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.5em;
  width: 11px;
  height: 1px;
  background: var(--faint);
}

/* ---------------------------------------------------------------- narrow */

@media (max-width: 880px) {
  .open { grid-template-columns: minmax(0, 1fr); gap: clamp(20px, 5vw, 34px); }
  /* Stacked, the dog is an aside rather than half the composition, so it is
     sized like one. */
  .plate { max-width: 216px; }
}

/* Below this the gutter is more line than page, so the spine goes and the
   label steps up in front of its section with the accent tick the app puts
   beside a name. */
@media (max-width: 760px) {
  .lane { grid-template-columns: minmax(0, 1fr); }

  .lane__label {
    grid-column: 1;
    padding: var(--band-pad) 0 0;
    border-right: 0;
    text-align: left;
  }
  .lane__label::after {
    right: auto;
    left: 0;
    top: calc(var(--band-pad) - 14px);
    width: 22px;
    height: 3px;
    border-radius: 2px;
  }
  .lane__label--bare { display: none; }

  .lane__body { grid-column: 1; padding: 18px 0 var(--band-pad); }
  .band--ground:first-of-type .lane__body { padding-top: var(--band-pad); }
  .band--foot .lane__body { padding-top: 0; }

  /* The reader would be a column of two-word lines at this width, so the shot
     is cropped to the half that still reads at its own size: the rail. */
  .shot {
    margin-left: 0;
    max-height: none;
    border-left: 0;
    border-right: 1px solid var(--line);
    border-top-left-radius: 0;
    border-top-right-radius: 10px;
    box-shadow: 0 -14px 50px -26px rgba(0, 0, 0, .9);
    width: min(340px, 86%);
    height: clamp(360px, 62vh, 520px);
  }
  .shot__img {
    width: 1360px;
    max-width: none;
    border-top-left-radius: 0;
  }
}

@media (max-width: 620px) {
  .sign__mascot { width: 96px; }
}