@font-face {
  font-family: "Instrument Sans";
  src: url("./instrument-sans-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Sans";
  src: url("./instrument-sans-italic-latin.woff2") format("woff2");
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("./instrument-serif-italic-latin.woff2") format("woff2");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

/* Shared identity. Adjust these values to update all three compositions. */
:root {
  --ink: #0a0a0a;
  --blue: #004bff;
  --paper: #fff;
  --muted: #52555b;
  --line: #e1e3e7;
  --wash: #f7f8fa;
  --gutter: clamp(1.5rem, 6.25vw, 7.5rem);
  --logo-width: 16rem;
  --bottom-inset: 1.875rem;
  --headline-tracking: -0.03em;
  font-family: "Instrument Sans", Arial, sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
body { margin: 0; }
::selection { color: #fff; background: var(--blue); }
.page {
  width: min(100%, 112rem);
  min-height: 100vh;
  min-height: 100svh;
  margin-inline: auto;
  padding: clamp(2rem, 5.4vh, 4rem) var(--gutter) var(--bottom-inset);
  display: grid;
  grid-template-rows: auto 1fr auto;
}
.header { position: relative; z-index: 1; }
.logo { display: block; width: var(--logo-width); max-width: 100%; height: auto; margin-left: -0.317rem; }
.hero { position: relative; min-width: 0; }
h1 { margin: 0; font-weight: 500; letter-spacing: var(--headline-tracking); overflow-wrap: anywhere; }
.statement { display: block; }
.description { margin: 0; color: var(--muted); font-size: 1.25rem; line-height: 1.55; letter-spacing: -0.016em; overflow-wrap: anywhere; }
.description .keep-together { white-space: nowrap; }
.footer { color: #65686e; }
.footer small { font-size: 0.75rem; line-height: 1.5; letter-spacing: 0.005em; }
.geometry { pointer-events: none; }
.geometry span { position: absolute; display: block; }

/* 01. Typographic: a large, left-aligned statement and open right margin. */
.typographic .hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding-block: 7rem 8.25rem;
}
.typographic h1 {
  font-size: clamp(3.15rem, 8.3vw, 9rem);
  line-height: 1.065;
}
.typographic .statement-two { margin-top: 0.045em; }
.typographic .description { max-width: 30rem; margin-top: 2.5rem; }
.typographic .geometry { position: absolute; right: 0; top: 31%; width: 2rem; height: 2rem; }
.typographic .outline { display: none; }
.typographic .corner { width: 100%; height: 100%; border-top: 2px solid var(--blue); border-right: 2px solid var(--blue); }
.typographic .footer { padding-top: 1.125rem; border-top: 1px solid var(--line); }

/* 02. Displacement: text balanced against two fine, offset square outlines. */
.displacement .hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(13rem, 0.55fr);
  column-gap: 3rem;
  align-content: center;
  padding-block: 7rem 8rem;
}
.displacement h1 { grid-column: 1; font-size: clamp(3.15rem, 6.45vw, 7.2rem); line-height: 1.1; }
.displacement .description { grid-column: 1; max-width: 28rem; margin-top: 2.25rem; }
.displacement .geometry { grid-column: 2; grid-row: 1 / 3; align-self: center; justify-self: end; position: relative; width: min(100%, 22.5rem); aspect-ratio: 1; }
.displacement .outline-one { inset: 16% 16% 0 0; border: 1px solid #ced2d9; }
.displacement .outline-two { inset: 0 0 16% 16%; border: 1px solid #e7e9ed; }
.displacement .corner { top: 0; right: 0; width: 28%; height: 28%; border-top: 2px solid var(--blue); border-right: 2px solid var(--blue); }

/* 03. Stepped: the second statement and supporting text move one column right. */
.stepped { background: linear-gradient(to bottom, #fff 0%, #fff 74%, var(--wash) 74%, var(--wash) 100%); }
.stepped .page { position: relative; }
.stepped .hero { display: grid; grid-template-columns: 17% 1fr; align-content: center; padding-block: 7rem 7rem; }
.stepped h1 { grid-column: 1 / -1; font-size: clamp(3.15rem, 7.55vw, 8.5rem); line-height: 1.1; }
.stepped .statement-two { margin-top: 0.08em; margin-left: 17%; }
.stepped .description { grid-column: 2; margin-top: 2.625rem; max-width: 28rem; }
.stepped .page-corner {
  position: absolute;
  right: var(--gutter);
  bottom: var(--bottom-inset);
  width: calc(var(--logo-width) * 145 / 1212);
  height: auto;
  pointer-events: none;
}
.stepped .footer { padding-right: calc(var(--logo-width) * 145 / 1212 + 1rem); }

/* No fixed heights or hidden overflow: content can grow with text enlargement. */
@media (min-width: 1800px) {
  .typographic .geometry { right: 1rem; }
}
@media (max-width: 1100px) {
  .displacement .hero { column-gap: 2rem; grid-template-columns: minmax(0, 1fr) minmax(10rem, 0.4fr); }
  .displacement h1 { font-size: clamp(3rem, 6.1vw, 4.2rem); }
  .displacement .description { max-width: 25rem; }
  .typographic .geometry { width: 1.5rem; height: 1.5rem; top: 23%; }
}
@media (max-width: 760px) {
  :root { --logo-width: 13.5rem; --bottom-inset: 1.5rem; }
  .page { padding-top: 2rem; }
  .logo { margin-left: -0.267rem; }
  .description { font-size: 1.125rem; line-height: 1.6; }
  .typographic .hero { padding-block: 7rem 7rem; }
  .typographic h1 { font-size: clamp(2rem, 11.2vw, 4.3rem); line-height: 1.12; }
  .typographic .description { max-width: 25rem; margin-top: 2rem; }
  .typographic .geometry { top: 2.75rem; width: 1.125rem; height: 1.125rem; }
  .displacement .hero { grid-template-columns: minmax(0, 1fr); padding-block: 5.5rem 4rem; }
  .displacement h1 { font-size: clamp(2rem, 11.2vw, 4.3rem); line-height: 1.12; }
  .displacement .description { margin-top: 1.875rem; max-width: 24rem; }
  .displacement .geometry { grid-column: 1; grid-row: 3; width: min(9rem, 100%); margin-top: 3.5rem; margin-right: 0.125rem; }
  .stepped .hero { grid-template-columns: 6% 1fr; padding-block: 6rem 7rem; }
  .stepped h1 { font-size: clamp(2.6rem, 8.1vw, 4rem); line-height: 1.15; }
  .stepped .statement-two { margin-left: 6%; margin-top: 0.25em; }
  .stepped .description { margin-top: 2.25rem; max-width: 24rem; }
}
@media (max-width: 360px) {
  :root { --gutter: 1.25rem; }
  .typographic h1, .displacement h1 { font-size: 2.15rem; }
  .stepped h1 { font-size: 2.125rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .hero { animation: arrive 650ms ease-out both; }
  @keyframes arrive { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
}
@media print {
  .page { min-height: 0; }
  .hero { animation: none; }
}

/* Stepped studies. The preserved original has its own frozen stylesheet. */
.stepped-test {
  --footer-height: 4.5rem;
  --stepped-headline: clamp(3.15rem, 7.55vw, 8.5rem);
  --corner-width: calc(var(--logo-width) * 145 / 1212);
  --corner-height: calc(var(--logo-width) * 105 / 1212);
  --corner-thickness: calc(var(--logo-width) * 32 / 1212);
  background: var(--paper);
}
.stepped-test .page { padding-bottom: 0; }
.stepped-test .hero { animation: none; }
.stepped-test h1 { font-size: var(--stepped-headline); }
.stepped-test .footer {
  min-height: var(--footer-height);
  display: flex;
  align-items: center;
  margin-inline: calc(-1 * var(--gutter));
  padding: 1rem var(--gutter);
}
.stepped-test.footer-slim .footer { background: var(--wash); }
.stepped-test .page-corner { bottom: calc(var(--footer-height) + 1.5rem); }
.stepped-test .statement-two strong { font-weight: 700; }
.stepped-test .keyword { font-style: italic; font-weight: inherit; }
.variant-serif .keyword {
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  font-size: 1.055em;
  letter-spacing: -0.02em;
}
.headline-rule {
  grid-column: 2;
  position: relative;
  width: min(100%, calc(var(--stepped-headline) * 7));
  height: var(--corner-height);
  margin-top: 1.5rem;
  pointer-events: none;
}
.headline-rule img { position: absolute; right: 0; bottom: 0; width: var(--corner-width); height: auto; }
.headline-rule::before {
  content: "";
  position: absolute;
  left: 0;
  right: calc(var(--corner-width) - 1px);
  bottom: 0;
  height: var(--corner-thickness);
  background: var(--blue);
}
.variant-underline .description { margin-top: 1.75rem; }
@media (min-width: 1024px) {
  .stepped-test { --stepped-headline: clamp(3.15rem, 6.6vw, 7.5rem); }
}
@media (max-width: 760px) {
  .stepped-test { --footer-height: 4rem; --stepped-headline: clamp(2.6rem, 8.1vw, 4rem); }
  .headline-rule { margin-top: 1.25rem; }
  .variant-underline .description { margin-top: 1.5rem; }
}
@media (max-width: 389px) {
  .stepped-test { --stepped-headline: clamp(2rem, 10.3vw, 2.6rem); }
}

/* Both selected comparisons share the same type and spacing. */
.variant-bold .statement-one,
.corner-comparison .statement-one { font-weight: 400; }
.corner-comparison .headline-text {
  display: inline-block;
  position: relative;
  max-width: 100%;
  vertical-align: top;
}
.corner-comparison .headline-corner {
  position: absolute;
  right: 0;
  top: calc(100% + 0.5rem);
  width: var(--corner-width);
  height: auto;
  pointer-events: none;
}