/* Bricklane — trybricklane.com

   Contents
     1. Fonts and tokens
     2. Base
     3. Layout and type
     4. Links and buttons
     5. Header and footer
     6. Page intro
     7. Sections: heads, pairs, blurbs, steps
     8. Screenshots
     9. The dark band
    10. Early access
    11. Closing line, 404
    12. Motion, narrow screens, print

   Type: Instrument Serif for display and section headings, Inter for
   everything read. Colour: ink and a grey on paper, with brick kept for the
   mark and the launch date. Sections are separated by space, not rules. */

/* 1. Fonts and tokens ------------------------------------------------------ */

@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/instrument-serif-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --paper: #FAFAF8;
  --surface: #FFFFFF;
  --ink: #141311;
  --ink-2: #55524D;        /* secondary text: 7.4:1 on paper */
  --brick: #B5532E;        /* the mark and the launch date: 4.7:1 on paper */
  --edge: #8C877F;         /* form field outline: 3.5:1 on white */
  --on-dark: #FAFAF8;
  --on-dark-2: #B7B2A9;
  --line: rgba(20, 19, 17, .1);

  --serif: "Instrument Serif", "Iowan Old Style", "Hoefler Text", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --fs-display: clamp(44px, 6.6vw, 88px);
  --fs-heading: clamp(32px, 3.3vw, 40px);
  --fs-body: 17px;
  --fs-small: 13.5px;

  --max: 1200px;
  --pad: clamp(20px, 4.6vw, 72px);          /* side gutter */
  --section: clamp(64px, 8vw, 112px);       /* space between sections */
  --gap: clamp(24px, 3vw, 44px);            /* heading to what it heads */
  --gutter: clamp(40px, 6vw, 104px);        /* between grid columns */

  --shadow: 0 0 0 1px var(--line), 0 24px 48px -32px rgba(20, 19, 17, .34);
}

/* 2. Base ------------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--ink); color: var(--paper); }

/* Must beat any display value below, or a hidden element stays visible. */
[hidden] { display: none !important; }

h1, h2, h3, p, figure, dl, dd, ol, ul { margin: 0; }
ol, ul { list-style: none; padding: 0; }
img, svg { max-width: 100%; }
img { height: auto; }
a { color: inherit; }
p { text-wrap: pretty; }

:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 50;
  padding: 12px 18px;
  background: var(--ink); color: var(--paper);
  text-decoration: none;
}
.skip:focus { left: 12px; top: 12px; }

.vh {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* 3. Layout and type ------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: calc(var(--max) + var(--pad) * 2);
  margin-inline: auto;
  padding-inline: var(--pad);
}
.section { padding-block: var(--section); }

.display,
.heading {
  font-family: var(--serif);
  font-weight: 400;
  text-wrap: balance;
}
.display {
  font-size: var(--fs-display);
  line-height: .98;
  letter-spacing: -.026em;
  max-width: 18ch;
}
.heading {
  font-size: var(--fs-heading);
  line-height: 1.08;
  letter-spacing: -.022em;
  max-width: 22ch;
}

/* Running text: grey, one measure, paragraphs spaced. */
.copy { color: var(--ink-2); max-width: 36em; }
.copy > * + * { margin-top: 1.15em; }
.lead { color: var(--ink); }

/* The bold one-line heading used by pairs, blurbs, steps and the form card. */
.pair > :is(h2, h3),
.blurb > h3,
.steps h3,
.ea h2 {
  font-family: var(--sans);
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -.008em;
  color: var(--ink);
  text-wrap: balance;
}

/* A heading followed directly by running text, with no section head. */
.section > .heading + .copy { margin-top: var(--gap); }

/* Keeps a date or a hyphenated word on one line. */
.nowrap { white-space: nowrap; }

/* 4. Links and buttons ----------------------------------------------------- */

.link {
  text-decoration: underline;
  text-decoration-color: rgba(20, 19, 17, .6);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color .14s ease;
}
.link:hover { text-decoration-color: currentColor; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 24px;
  border: 1px solid var(--ink);
  border-radius: 3px;
  background: var(--ink);
  color: var(--paper);
  font: inherit;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background .16s ease, color .16s ease, opacity .16s ease;
}
.btn:hover { background: #000; }
/* The global ring takes currentColor, which on a filled button is the page colour. */
.btn:focus-visible { outline-color: var(--ink); }
.btn:disabled { opacity: .55; cursor: progress; }
.btn--small { min-height: 44px; padding: 0 20px; }
/* On its own page the header button steps back to an outline. */
.btn[aria-current="page"] { background: transparent; color: var(--ink); }
.btn[aria-current="page"]:hover { background: var(--ink); color: var(--paper); }

/* A button and, beside it, a quieter link. */
.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 26px;
  margin-top: 34px;
}
.more { margin-top: var(--gap); }

/* 5. Header and footer ----------------------------------------------------- */

.site-head .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 88px;
}

.mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 30px;          /* fixed so the late serif cannot shift the header */
  font-family: var(--serif);
  font-size: 23px;
  letter-spacing: -.012em;
  line-height: 1;
  text-decoration: none;
}
.mark svg { display: block; flex: none; }

.nav { display: flex; align-items: center; gap: 4px; }
.nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  color: var(--ink-2);
  text-decoration: none;
  transition: color .14s ease;
}
.nav-link:hover { color: var(--ink); }
.nav-link[aria-current="page"] {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}
.nav .btn { margin-left: 10px; }

.site-foot {
  background: var(--ink);
  color: var(--on-dark);
  padding-top: clamp(56px, 7vw, 100px);
  padding-bottom: clamp(40px, 4.5vw, 64px);
}
.foot-mark {
  display: inline-block;
  margin-bottom: clamp(36px, 4vw, 56px);
  font-family: var(--serif);
  font-size: var(--fs-display);
  line-height: .9;
  letter-spacing: -.028em;
  text-decoration: none;
}
.foot-cols {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 3fr);
  gap: 28px clamp(24px, 4vw, 64px);
  align-items: start;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--on-dark-2);
}
.foot-cols b { font-weight: 500; color: var(--on-dark); }
.foot-cols .link { color: var(--on-dark); text-decoration-color: rgba(250, 250, 248, .5); }
/* The links' 34px tap height centres their text; pull the first one up so it
   lines up with the text in the other two columns. */
.foot-nav { display: flex; flex-direction: column; gap: 2px; margin-top: -6px; }
.foot-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  color: var(--on-dark);
  text-decoration: none;
}
.foot-nav a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* 6. Page intro ------------------------------------------------------------ */

.intro { padding-top: clamp(56px, 7vw, 104px); padding-bottom: clamp(56px, 6vw, 96px); }
.intro-grid,
.signup {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: var(--gutter);
  align-items: start;
}
.intro-grid { margin-top: clamp(36px, 4.5vw, 64px); }
.intro > .copy { margin-top: clamp(28px, 3vw, 40px); }

/* A few facts, held together by alignment. */
.spec { display: grid; row-gap: 20px; padding-top: 6px; }
.spec div {
  display: grid;
  grid-template-columns: minmax(96px, .42fr) 1fr;
  gap: 18px;
  align-items: baseline;
}
.spec dt { font-size: var(--fs-small); color: var(--ink-2); }
.spec .date { color: var(--brick); }

/* 7. Sections -------------------------------------------------------------- */

/* Heading on the left, one short paragraph on the right. */
.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 26em);
  gap: var(--gap) clamp(24px, 5vw, 80px);
  align-items: end;
  margin-bottom: clamp(32px, 4vw, 56px);
}
.section-head .copy { padding-bottom: 4px; }
.section-head:has(> :only-child) { display: block; }

/* Pairs: a term on the left, its answer on the right (problems, FAQ, privacy). */
.pairs { display: grid; row-gap: clamp(36px, 4.5vw, 60px); }
.pair {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: 10px clamp(32px, 5vw, 72px);
  align-items: start;
  scroll-margin-top: 24px;
}
.pair > :is(h2, h3) { max-width: 26ch; }
.pair > :not(h2, h3) { grid-column: 2; color: var(--ink-2); max-width: 56ch; }
.pair > p + p { margin-top: -2px; }

/* Blurbs: short headed paragraphs, two to a row. */
.blurbs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(36px, 4.5vw, 60px) var(--gutter);
}
.blurb > h3 { max-width: 34ch; }
.blurb > p { margin-top: 10px; color: var(--ink-2); max-width: 46ch; }
.shot + .blurbs,
.asks + .blurbs { margin-top: clamp(40px, 5vw, 72px); }

/* Steps: a sequence hung from one vertical line, each with a tick. */
.steps { display: grid; }
.steps li {
  position: relative;
  padding: 0 0 clamp(24px, 3vw, 36px) 28px;
  border-left: 1px solid var(--ink);
}
.steps li:last-child { padding-bottom: 4px; }
.steps li::before {
  content: "";
  position: absolute;
  left: -5px; top: 12px;
  width: 9px; height: 1px;
  background: var(--ink);
}
.steps p { margin-top: 4px; color: var(--ink-2); max-width: 52ch; }

/* Asks: example requests to the assistant, set like messages. */
.asks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 18px;
  margin-top: clamp(28px, 3vw, 40px);
}
.asks li {
  padding: 16px 20px;
  border-radius: 16px 16px 16px 4px;
  background: var(--surface);
  box-shadow: var(--shadow);
  color: var(--ink);
  line-height: 1.5;
}
.asks li::before { content: "\201C"; }
.asks li::after { content: "\201D"; }
.band .asks li { background: #26241F; box-shadow: none; color: var(--on-dark); }

/* 8. Screenshots ----------------------------------------------------------- */

/* Real screens from the office app, captured at twice their size and never
   shown larger than their own size. Up to 920px a phone capture replaces the
   desktop one (see _includes/screen.html). Every <img> and <source> carries
   width and height, so nothing moves as they load. */
.shot img {
  display: block;
  border-radius: 8px;
  box-shadow: var(--shadow);
}
.caption { margin-top: 20px; font-size: var(--fs-small); line-height: 1.55; color: var(--ink-2); max-width: 60ch; }

/* The home page's invoice: inside the page's measure up to 1440px (without
   the app's menu), then full width, menu included, at its own size. */
.shot--wide picture,
.shot--wide figcaption {
  display: block;
  max-width: calc(var(--max) + var(--pad) * 2);
  margin-inline: auto;
  padding-inline: var(--pad);
}
@media (min-width: 1441px) {
  .shot--wide picture { max-width: 1440px; padding-inline: 0; }
}

/* 9. The dark band --------------------------------------------------------- */

.band {
  background: var(--ink);
  color: var(--on-dark);
  padding-block: clamp(72px, 8vw, 120px);
}
.band .heading { color: var(--on-dark); }
.band .copy,
.band .blurb > p { color: var(--on-dark-2); }
.band .blurb > h3 { color: var(--on-dark); }
.band .link { text-decoration-color: rgba(250, 250, 248, .5); }
.band .heading + .copy { margin-top: var(--gap); }
.band ::selection { background: var(--paper); color: var(--ink); }

/* 10. Early access --------------------------------------------------------- */

.signup .heading + .copy { margin-top: var(--gap); }

.ea {
  background: var(--surface);
  border-radius: 4px;
  padding: clamp(26px, 3vw, 36px);
  box-shadow: 0 1px 2px rgba(20, 19, 17, .05), 0 24px 44px -28px rgba(20, 19, 17, .22);
}
.ea-intro { margin-top: 10px; color: var(--ink-2); }

.ea-field { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.ea-label { flex: 1 1 100%; font-size: var(--fs-small); font-weight: 500; }
.ea-field input {
  flex: 999 1 240px;
  min-width: 0;
  min-height: 48px;
  padding: 0 14px;
  font: inherit;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--edge);
  border-radius: 3px;
  transition: border-color .14s ease;
}
.ea-field input::placeholder { color: var(--ink-2); opacity: .9; }
.ea-field input:hover { border-color: var(--ink-2); }
.ea-field input:focus { outline: 2px solid var(--ink); outline-offset: 1px; border-color: var(--ink); }
.ea-field input[aria-invalid="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.ea-field .btn { flex: 1 0 auto; }

/* The status line is the answer to what the visitor just did, so it is body size. */
.ea-msg { margin-top: 18px; line-height: 1.5; max-width: 44ch; }
/* Kept in the accessibility tree while empty, so its first message is announced. */
.ea-msg:empty { margin-top: 0; }
.ea-note { margin-top: 16px; font-size: var(--fs-small); line-height: 1.55; color: var(--ink-2); max-width: 46ch; }

/* 11. Closing line, 404 ---------------------------------------------------- */

.next .copy { margin-top: var(--gap); }

.notfound { padding-block: clamp(84px, 14vw, 190px); }
.notfound > .copy { margin-top: 34px; }
.notfound .pairs { margin-top: 56px; }

/* 12. Motion, narrow screens, print ---------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
@media (prefers-reduced-motion: no-preference) {
  .js-anim .reveal { opacity: 0; transform: translateY(10px); }
  .js-anim .reveal.in {
    opacity: 1;
    transform: none;
    transition: opacity .6s cubic-bezier(.2, .6, .2, 1), transform .6s cubic-bezier(.2, .6, .2, 1);
    transition-delay: var(--d, 0ms);
  }
}

@media (max-width: 920px) {
  .intro-grid,
  .signup,
  .section-head { grid-template-columns: minmax(0, 1fr); }
  .section-head { align-items: start; }
  .section-head .copy { padding-bottom: 0; }
  .pair { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .pair > :not(h2, h3) { grid-column: 1; max-width: 60ch; }
  .foot-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

@media (max-width: 760px) {
  /* Wordmark and button share the first row; the links take the second. */
  .site-head .wrap { position: relative; flex-wrap: wrap; min-height: 0; padding-top: 16px; }
  .mark { min-height: 44px; }
  .nav { width: 100%; gap: 20px; margin-top: 4px; }
  .nav-link { padding: 0; }
  .nav .btn { position: absolute; top: 16px; right: var(--pad); margin-left: 0; }

  .blurbs,
  .asks { grid-template-columns: minmax(0, 1fr); }
  .foot-cols { grid-template-columns: minmax(0, 1fr); gap: 26px; }

  .caption { margin-top: 16px; }
}

@media (max-width: 520px) {
  .spec div { grid-template-columns: minmax(88px, .4fr) 1fr; gap: 14px; }
}

@media print {
  body { background: #fff; }
  .site-head, .skip, .ea, .actions, .next { display: none; }
  .band, .site-foot { background: #fff; color: #000; }
  .band .heading, .band .blurb > h3, .foot-mark, .foot-cols b, .foot-nav a, .foot-cols .link { color: #000; }
  .band .copy, .band .blurb > p, .foot-cols { color: #333; }
  .shot img { box-shadow: none; border: 1px solid #ccc; }
  .reveal { opacity: 1 !important; transform: none !important; }
}