/* ============================================================
   bro — design system

   White page, black serif, one figure in the middle. Chrome is
   text and nothing else: no pills, no boxes, no borders. The
   footage is the only image on the page.

   Reference: doji.com — same restraint, our own type and words.
   ============================================================ */

:root {
  --paper:     #ffffff;
  --ink:       #000000;
  --ink-mute:  #757575;
  /* the one hairline: a rule dark enough to divide a long page, light
     enough that a column of them does not read as a table of boxes */
  --rule:      #e6e6e6;
  /* the one accent: only an error line is allowed to leave the ink */
  --alert:     #c62828;

  --pad:       clamp(1.15rem, 4vw, 2rem);

  /* the display face carries the whole brand; the gothic is only
     for fine print, the way doji pairs a headline with a default */
  --font-display: "Prata", Georgia, "Times New Roman", serif;
  --font-text:    "Onest", system-ui, -apple-system, sans-serif;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { overflow-x: hidden; }
html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ---------- type ---------- */
.t-wordmark {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 5.5vw, 2.1rem);
  line-height: 1;
  letter-spacing: 0;
}
.t-nav {
  font-family: var(--font-display);
  font-size: clamp(1rem, 3.4vw, 1.2rem);
  line-height: 1;
}
.t-cta {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 7vw, 2.6rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.t-small { font-size: 0.88rem; line-height: 1.65; }
.t-mute, .act--mute { color: var(--ink-mute); }

/* ---------- links: chrome is text ---------- */
.link {
  color: inherit;
  text-decoration: none;
  display: inline-block;
  transition: opacity 0.25s var(--ease);
}
.link:hover, .act:hover { opacity: 0.55; }
.link:focus-visible, .act:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }

/* the login sheet still needs real buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-family: var(--font-display);
  font-size: 1.05rem;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: var(--ink);
  color: var(--paper);
  padding: 0.75rem 1.5rem;
  cursor: pointer;
  transition: opacity 0.25s var(--ease);
}
.btn:hover { opacity: 0.82; }
.btn:disabled, .act:disabled { opacity: 0.45; cursor: default; }
.btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .link, .btn, .act { transition: none; }
}

/* ============================================================
   Stage — a white page with one figure standing in it

   A flex column: the masthead and the call to action take their
   own height, the film gets whatever is left. The video is
   `contain`, never `cover`, so the figure is shown whole at any
   viewport — nothing is ever cropped off the top or the bottom,
   and the letterboxing is invisible because the footage is shot
   on the same white as the page.
   ============================================================ */
.stage {
  display: flex;
  flex-direction: column;
  height: 100svh;
  min-height: 30rem;
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
}

/* the masthead itself is `.bar`, shared with the cabinet and the vault */
.stage__bar { flex: 0 0 auto; }

.stage__film {
  flex: 1 1 auto;
  min-height: 0;      /* lets the film shrink instead of pushing the CTA off */
  position: relative;
}
.stage__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: var(--paper);
}

.stage__foot {
  flex: 0 0 auto;
  padding: var(--pad);
  text-align: center;
}

/* ============================================================
   Document — the cabinet and the vault

   The landing is one screen with a figure standing in it; these
   two are paper. Same white, same serif, same rule that chrome
   is text. A page is a single column of sections divided by
   hairlines: no cards, no radius, no shadow, nothing floating
   over a photograph.
   ============================================================ */
.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: var(--pad);
}
/* the wordmark sits centred like a masthead, the actions ride the edges */
.bar > :first-child,
.bar > :last-child { flex: 1 1 0; display: flex; gap: 0.9rem; }
.bar > :last-child { justify-content: flex-end; }

.doc {
  max-width: 42rem;
  margin: 0 auto;
  padding: 0.6rem var(--pad) 5rem;
}

/* The title of the page — there is no other h1. Prata ships one weight, so
   a heading left at the browser's bold would be a synthetic smear of it;
   every serif on the site is set at 400. */
.doc-title,
.handle-xl {
  font-size: clamp(1.9rem, 8vw, 2.8rem);
  line-height: 1.05;
  margin-bottom: 0.55rem;
  word-break: break-word;
}
.doc-title { font-family: var(--font-display); font-weight: 400; }

/* The handle is the one string on the site a person has to read character by
   character and type back into the login box. Prata is a didone: at this size
   its `1` is a bare stem and `bro-a1b2c3d4` reads as `bro-alb2c3d4`. Machine
   strings get the gothic, words get the serif. */
.handle-xl {
  font-family: var(--font-text);
  font-weight: 500;
  letter-spacing: -0.02em;
}

.sec {
  border-top: 1px solid var(--rule);
  margin-top: 2rem;
  padding-top: 1.6rem;
}
.sec__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.55rem;
}
.sec h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.15rem, 4vw, 1.4rem);
  line-height: 1.2;
}
.sec__state {
  flex-shrink: 0;
  font-size: 0.86rem;
  color: var(--ink-mute);
  text-align: right;
}

/* ---------- actions: text, like the call to action on the landing ---------- */
.acts {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1.5rem;
  margin-top: 1rem;
}
.act {
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1.3;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  transition: opacity 0.25s var(--ease);
}
.act:hover { opacity: 0.55; }
.act:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
.act--lead { font-size: clamp(1.2rem, 4.6vw, 1.7rem); }
.act--sm { font-size: 0.95rem; }

.status-line { font-size: 0.86rem; line-height: 1.5; color: var(--ink-mute); }
.status-line:empty { display: none; }

/* ---------- rows: memories, vault items, payments ---------- */
.rows { list-style: none; margin-top: 0.6rem; }
.rows li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0;
  border-top: 1px solid var(--rule);
}
.rows li:first-child { border-top: 0; padding-top: 0.2rem; }
.row-main {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  word-break: break-word;
}
.row-side { flex: 0 0 auto; font-size: 0.86rem; color: var(--ink-mute); }
.row-main > p + p { margin-top: 0.1rem; }
.item-label { font-size: 0.95rem; line-height: 1.45; }
.item-kind { font-size: 0.86rem; color: var(--ink-mute); }

/* a quota reads as a rule that is partly inked in — square ends, like
   everything else on the page */
.meter {
  height: 2px;
  background: var(--rule);
  margin: 0.45rem 0 1.1rem;
}
.meter > i { display: block; height: 100%; background: var(--ink); }
.meter:last-child { margin-bottom: 0.2rem; }

/* ---------- fields ---------- */
.field {
  width: 100%;
  /* a line of text does not need 42rem to be typed into */
  max-width: 22rem;
  font: inherit;
  font-size: 0.95rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
}
.field:focus-visible, .sheet input:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.field[readonly] { color: var(--ink-mute); border-color: var(--rule); }
select.field {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0h10L5 6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 0.55rem;
}
.form label {
  display: block;
  font-size: 0.82rem;
  color: var(--ink-mute);
  margin: 0.95rem 0 0.3rem;
}
.form .choice {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.1rem;
  margin: 0.35rem 0 0.2rem;
}
.form .choice label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  color: var(--ink);
  font-size: 0.92rem;
}
.form .choice input { width: auto; accent-color: var(--ink); }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; max-width: 22rem; }
.pair .field { max-width: 100%; }
.err { min-height: 1.3rem; margin-top: 0.8rem; font-size: 0.88rem; line-height: 1.45; color: var(--alert); }

/* a credential is the one inverted rectangle in the system */
.cmd {
  display: block;
  margin-top: 0.8rem;
  padding: 0.75rem 0.85rem;
  background: var(--ink);
  color: var(--paper);
  font: 0.78rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: pre-wrap;
  word-break: break-all;
  overflow-x: auto;
}

/* ============================================================
   Login sheet — shared by the landing, the cabinet and the vault
   ============================================================ */
.modal {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.2rem;
}
.sheet {
  width: min(23rem, 100%);
  background: var(--paper);
  padding: 1.7rem 1.5rem 1.3rem;
  text-align: left;
}
.sheet h2 { font-family: var(--font-display); font-weight: 400; font-size: 1.35rem; margin-bottom: 0.6rem; }
.sheet label { display: block; font-size: 0.8rem; color: var(--ink-mute); margin: 0.9rem 0 0.35rem; }
.sheet input {
  width: 100%;
  font: inherit;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
}
.sheet .sheet-cta { display: flex; width: 100%; margin-top: 1rem; white-space: nowrap; }
.sheet .text-close {
  font-family: var(--font-display);
  display: block;
  width: 100%;
  margin-top: 0.85rem;
  background: none;
  border: 0;
  color: var(--ink-mute);
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  text-align: center;
}
.sheet .status { min-height: 1.3rem; margin-top: 0.7rem; color: var(--ink-mute); font-size: 0.86rem; line-height: 1.4; }