/* ==========================================================================
   BH Lawyers — Lex Vanguard
   The page is a single sheet of the firm's stationery laid on navy.
   ========================================================================== */

:root {
  /* Palette — from the Lex Vanguard design system (DESIGN.md prose values) */
  --navy-deep: #051125;   /* the field the sheet rests on */
  --navy:      #1b263b;   /* headings and primary type */
  --slate:     #415a77;   /* body copy and the eyebrow */
  --gold:      #c5a059;   /* rules and ornament only — too light for text */
  --gold-ink:  #775a19;   /* gold that passes contrast when set as type */
  --parchment: #e0e1dd;   /* type on the navy field */
  --paper:     #ffffff;   /* the sheet */

  /* Spacing — 8px base unit */
  --stack-sm: 16px;
  --stack-md: 24px;
  --stack-lg: 48px;
}

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

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

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;   /* excludes iOS Safari's collapsing URL bar */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--stack-lg);
  padding: var(--stack-lg) 20px;

  font-family: Inter, system-ui, -apple-system, sans-serif;
  color: var(--parchment);

  /* A single soft lift at the top, so the sheet reads as lit from above. */
  background:
    radial-gradient(120% 75% at 50% 0%, #16233c 0%, rgba(22, 35, 60, 0) 62%),
    var(--navy-deep);
}

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

.sheet {
  width: 100%;
  max-width: 720px;
  /* Head and foot padding match so the gold bookends mirror each other. */
  padding: 72px clamp(24px, 6vw, 72px);

  background: var(--paper);
  border-radius: 4px;   /* DESIGN.md §Shapes — "Soft (0.25rem)" */

  /* DESIGN.md §Elevation — tonal layering and fine outlines over heavy
     shadows; the wash is tinted with the navy primary, never neutral black. */
  box-shadow:
    0 4px 24px rgba(27, 38, 59, 0.28),
    0 0 0 1px rgba(65, 90, 119, 0.18);

  text-align: center;
}

/* Letterhead rules — gold bookends at the head and foot of the type area. */
.rule {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--gold);
  transform-origin: center;
}

.sheet > .rule:last-of-type { margin-top: 64px; }

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

.mark {
  display: block;
  width: 252px;
  height: auto;
  max-width: 100%;
  margin: 48px auto 0;
}

.eyebrow {
  /* Bound to the notice below it, not floating between two blocks. */
  margin: 48px 0 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--slate);
}

/* The wide tracking would otherwise set the separator adrift. */
.eyebrow__dot { letter-spacing: 0; }

.eyebrow abbr {
  text-decoration: none;
  letter-spacing: inherit;
}

/* --------------------------------------------------------------------------
   The notice
   -------------------------------------------------------------------------- */

.display {
  margin: var(--stack-sm) 0 0;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(2.5rem, 6.4vw, 4rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--navy);
}

/* The break is set explicitly: left to wrap, the headline flips between one
   and two lines across a wide band of viewports, and again when the webfont
   swaps in over the wider Georgia fallback. */
.display__line { display: block; }

.display__sub {
  display: block;
  margin-top: 0.28em;
  font-size: 0.56em;
  font-weight: 600;
  font-style: italic;
  letter-spacing: -0.01em;
  color: var(--gold-ink);
}

.lede {
  max-width: 46ch;
  margin: 36px auto 0;
  font-size: 18px;
  line-height: 1.6;
  color: var(--slate);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   Colophon
   -------------------------------------------------------------------------- */

.colophon {
  max-width: 640px;
  text-align: center;
  color: var(--parchment);
}

.colophon p {
  margin: 0;
  font-size: 14px;
  letter-spacing: 0.02em;
}

.colophon__note {
  margin-top: var(--stack-sm);
  /* A legal notice should not be the faintest thing on the page. */
  opacity: 0.7;
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Entrance — one orchestrated moment: the sheet is laid down, the rules are
   ruled, the type settles. Nothing moves after that.

   Driven entirely by CSS. Nothing here depends on JavaScript, so a blocked or
   failed script can never leave the page blank.
   -------------------------------------------------------------------------- */

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

@keyframes draw {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.sheet,
.colophon,
.sheet > * {
  /* "both" holds the from-state during the delay, so nothing flashes in early. */
  animation: rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.sheet > .rule {
  animation: draw 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.sheet                        { animation-delay: 0s; }
.sheet > .rule:first-of-type  { animation-delay: 0.3s; }
.mark                         { animation-delay: 0.4s; }
.eyebrow                      { animation-delay: 0.55s; }
.display                      { animation-delay: 0.65s; }
.lede                         { animation-delay: 0.78s; }
.sheet > .rule:last-of-type   { animation-delay: 0.9s; }
.colophon                     { animation-delay: 1.02s; }

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

@media (max-width: 620px) {
  body { gap: var(--stack-md); padding: var(--stack-md) 16px; }

  .sheet { padding: 48px 24px; }

  .mark { width: 190px; margin-top: 32px; }

  .eyebrow { margin-top: 36px; }

  .display { line-height: 1.2; letter-spacing: -0.01em; }

  .lede { margin-top: 28px; }

  .sheet > .rule:last-of-type { margin-top: 48px; }
}

/* --------------------------------------------------------------------------
   Reduced motion — no animation at all, so everything is visible immediately.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .sheet,
  .colophon,
  .sheet > *,
  .sheet > .rule { animation: none; }
}

/* --------------------------------------------------------------------------
   Print — the sheet is already a document; give it paper behaviour.
   -------------------------------------------------------------------------- */

@media print {
  body {
    display: block;
    min-height: 0;
    background: #fff;
    color: var(--navy);
    padding: 0;
  }

  .sheet {
    max-width: none;
    box-shadow: none;
    border-radius: 0;
  }

  .sheet,
  .colophon,
  .sheet > *,
  .sheet > .rule { animation: none; }

  .colophon { color: var(--navy); margin-top: 32px; }

  .colophon__note { opacity: 1; }
}