:root {
  /* color */
  --color-surface:        #f8f6f2;
  --color-text-primary:   #000000;
  --color-text-secondary: #6b6b6b;

  /* type */
  --font-display:      "Lora", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --weight-statement:  400;   /* Lora's lightest weight */
  --weight-default:    400;

  --size-display: clamp(1.75rem, 1rem + 2.2vw, 2.5rem);
  --size-primary: clamp(1.25rem, 0.9rem + 1.3vw, 1.75rem);
  --size-secondary:  clamp(1.125rem, 1rem + 0.4vw, 1.5rem);
  --size-tertiary: 1.125rem;   /* 18px — header status + footer */
  --leading-body:   1.5;
  --leading-display: 1.15;
  --leading-snug:    1.35;

  /* space */
  --space-gutter:         clamp(2rem, 7vw, 7.5rem);
  --space-masthead-block: 1.5rem;
  --space-stage-block:    clamp(3rem, 9vw, 7.5rem);
  --space-footer-block:   clamp(2.25rem, 5vw, 3.75rem);
  --space-row:            1.5rem;
  --space-statement:      1rem;
  --space-nav:            2.25rem;

  --focus-ring:   2px solid var(--color-text-primary);
  --focus-offset: 3px;
}

/* ============================================================
   RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
img { max-width: 100%; display: block; }

/* ============================================================
   PAGE
   ============================================================ */
body {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;

  background: var(--color-surface);
  color: var(--color-text-primary);
  font-family: var(--font-display);
  font-weight: var(--weight-default);
  line-height: var(--leading-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* ---------- masthead ---------- */
.masthead {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-row);

  padding-inline: var(--space-gutter);
  padding-block: var(--space-masthead-block);
}

.wordmark {
  font-size: var(--size-secondary);
  font-weight: var(--weight-default);
}

.masthead__aside {
  display: flex;
  align-items: center;
  gap: var(--space-nav);
}

.status {
  font-size: var(--size-tertiary);
  color: var(--color-text-secondary);
}

/* ---------- stage ---------- */
.stage {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;

  padding-inline: var(--space-gutter);
  padding-block: var(--space-stage-block);
}

.statement {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-row);
  text-align: center;
}

.statement__title {
  max-width: 24em;
  text-wrap: balance;

  font-size: var(--size-display);
  font-weight: var(--weight-statement);
  line-height: var(--leading-display);
}

.statement__subtitle {
  max-width: 44em; /* room for the agency → startup → Figma line on desktop */
  text-wrap: pretty;

  font-size: var(--size-secondary);
  font-weight: var(--weight-statement);
  line-height: var(--leading-body);
  color: var(--color-text-secondary);
}

/* The arrow is the visible separator; the screen-reader text keeps the
   sentence parseable when the glyph isn't announced. The space before it
   in the markup is the left gap and the line-break point, so a wrapped
   line starts with the arrow rather than ending on one. */
.arrow {
  display: inline-block;
  padding-right: 0.28em;
}

/* An arrow attached to the end of the phrase before it instead: the gap
   is on its left, and the space after it is where the line can break. */
.arrow--trailing {
  padding-right: 0;
  padding-left: 0.28em;
}

.nowrap { white-space: nowrap; }

/* Inline icons (Phosphor, light weight, MIT licence), sized to the
   surrounding text. */
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  fill: currentColor;
}

/* scramble reveal (see script.js) */
.reveal {
  display: inline-block;
  text-align: center;
  white-space: nowrap; /* mid-scramble glyphs can briefly overrun the width */
  color: inherit;
  text-decoration: none;
  /* easy ease; width only changes when the revealed text is wider */
  transition:
    color 0.7s cubic-bezier(0.33, 0, 0.67, 1),
    width 0.7s cubic-bezier(0.33, 0, 0.67, 1);
}

/* Hovering (waiting out the delay) and revealed: a dotted line under the
   content, not the rain. It's drawn rather than a text underline so it
   runs under icons too.
   The social links draw theirs on the whole link, see .social__link. */
.reveal__content { position: relative; }

.statement .reveal.is-pending .reveal__content::after,
.statement .reveal.is-open .reveal__content::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -0.05em;
  border-top: 2px dotted currentColor;
}

.reveal.is-open { color: var(--color-text-primary); }

/* Scrambling letters sit in fixed-width slots so the text doesn't
   jitter as different letters cycle through, and line-height: 1 keeps
   them from nudging the line height. */
.reveal__glyph {
  display: inline-block;
  width: 0.5em;
  line-height: 1;
  text-align: center;
  opacity: 0.5;
}

/* visually hidden, still announced */
.vh {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- footer ---------- */
.footer {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-row);

  padding-inline: var(--space-gutter);
  padding-bottom: var(--space-footer-block);
  text-align: center;
  font-size: var(--size-tertiary);
}

.footer__credit { color: var(--color-text-secondary); }

.social {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* 44px minimum touch target; the box is invisible, so the visible
   spacing between labels stays close to the old 1.5rem gap. */
.social__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;

  color: var(--color-text-primary);
  text-decoration: none;
}
.social__link .reveal__text { position: relative; }

/* A text underline can't run under the icons the links scramble into,
   so the dotted line is drawn as its own element under the content. */
.social__link:hover .reveal__text::after,
.social__link:focus-visible .reveal__text::after,
.social__link.is-open .reveal__text::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  border-top: 2px dotted currentColor;
}

:where(a):focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: 2px;
}

/* ============================================================
   NARROW SCREENS
   The statement's hand-placed line breaks are composed for the
   desktop measure. Below that, let the text find its own breaks.
   ============================================================ */
@media (max-width: 47.9375rem) {
  .line-break { display: none; }
  .statement__title    { text-wrap: pretty; }
  .statement           { gap: var(--space-statement); }
  .statement__subtitle { max-width: 22em; line-height: var(--leading-snug); }
  .masthead__aside     { display: none; }
  .footer              { font-size: 1rem; }
}