@font-face {
  font-family: "NC Forms";
  src: url("fonts/NCForms-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "NC Forms";
  src: url("fonts/NCForms-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: block;
}

@font-face {
  font-family: "NC Forms";
  src: url("fonts/NCForms-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: block;
}

@font-face {
  font-family: "NC Forms";
  src: url("fonts/NCForms-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "NC Forms";
  src: url("fonts/NCForms-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "NC Forms";
  src: url("fonts/NCForms-LightItalic.ttf") format("truetype");
  font-weight: 300;
  font-style: italic;
  font-display: block;
}

@font-face {
  font-family: "NC Holland";
  src: url("fonts/NCHolland-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "NC Holland";
  src: url("fonts/NCHolland-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "NC Prague";
  src: url("fonts/NCPrague-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "NC Prague";
  src: url("fonts/NCPrague-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: block;
}

@font-face {
  font-family: "NC Forms Text";
  src: url("fonts/NCForms-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

:root {
  --bg: #f9eadc;
  --ink: #000;
  --red: #ff0000;

  /* single source of truth for the layout rhythm */
  --pad: 0.5rem;
  --gutter: 0.5rem;
  --caption: clamp(9px, 0.95vw, 12px);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "NC Forms Text", Helvetica, Arial, sans-serif;
  font-size: var(--caption);
  line-height: 1.25;
  -webkit-font-smoothing: antialiased;
}

.page {
  padding: var(--pad);
}

.block {
  margin: 0 0 0.9rem;
}

.block:last-child {
  margin-bottom: 0;
}

/* ——— Top grid ——— */

.specimen {
  position: relative;
}

.grid {
  display: grid;
  /* minmax(0, …) so a long nowrap line can never widen the column */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: 0;
}

.grid span {
  display: block;
  font-family: "NC Forms", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-style: normal;
  /* start size; script sets exact px to fill the column */
  font-size: 10vw;
  /* tight pitch: rows sit close without colliding */
  line-height: 0.82;
  letter-spacing: -0.05em;
  color: var(--red);
  white-space: nowrap;
  margin: 0;
  padding: 0;
}

.grid span.is-italic {
  font-style: italic;
}

.badge {
  position: absolute;
  top: 1vw;
  right: 1vw;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 8vw;
  height: 8vw;
  min-width: 3rem;
  min-height: 3rem;
  border-radius: 50%;
  background: #000;
  color: #fff;
  font-family: "NC Prague", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  /*
    Tied to the same vw basis as the disc so the ratio holds at any width; a
    clamp ceiling would cap the text while the circle kept growing. "New"
    measures 1.548em in Prague Italic with a 0.800 cap, so 4.2vw against the
    8vw disc gives 81% of the diameter in width and 42% in cap height.
    Prague's cap-centre offset is 0, so flex centring needs no nudge.
  */
  font-size: max(1.25rem, 4.2vw);
  line-height: 1;
  transform: rotate(4deg);
}

/* ——— Meta captions ——— */
/*
  Captions cluster into thirds of their own half instead of spreading
  across the full width. .meta--wide sits under a full-bleed block, so
  it uses a 6-column track and only fills the first three.
*/

.meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: 1.1rem 0 0;
  font-size: var(--caption);
  line-height: 1.25;
  position: relative;
  z-index: 1;
}

.meta--wide {
  grid-template-columns: repeat(6, 1fr);
}

.meta p {
  margin: 0;
  padding-right: 0.75em;
}

.meta a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

.meta a:hover {
  color: var(--red);
}

/* ——— Bottom row ——— */

.row {
  display: grid;
  /* minmax(0, …) so wide nowrap content can never push a column past half */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--gutter);
  align-items: end;
}

.col {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.social-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 6px solid #000;
  padding: 0.5em 0.75em;
  height: 14vw;
  min-height: 5.5rem;
}

.social-label {
  display: flex;
  flex-direction: column;
  font-family: "NC Forms", Helvetica, Arial, sans-serif;
  font-weight: 700;
  line-height: 0.88;
  letter-spacing: -0.04em;
  color: #000;
}

/* first line sets the scale; any following line steps down */
.social-label span {
  font-size: 6vw;
}

.social-label span + span {
  font-size: 5vw;
}

.social-icon {
  width: 9vw;
  height: 9vw;
  min-width: 2.75rem;
  min-height: 2.75rem;
  flex-shrink: 0;
}

.holland {
  display: flex;
  align-items: flex-end;
  height: 14vw;
  min-height: 5.5rem;
  overflow: visible;
}

.holland span {
  display: block;
  flex: 0 0 auto;
  font-family: "NC Holland", Helvetica, Arial, sans-serif;
  font-weight: 700;
  /* start size; script sets exact px to fill the column */
  font-size: 12vw;
  line-height: 0.78;
  letter-spacing: -0.045em;
  color: #000;
  white-space: nowrap;
}

/* ——— Display bands ——— */

.band {
  display: flex;
  align-items: flex-end;
  height: 18vw;
  min-height: 6.5rem;
}

.display {
  display: block;
  /* flex item must not shrink, or the measuring pass reads a squeezed box */
  flex: 0 0 auto;
  /* start size; script sets exact px to fill the column */
  font-size: 12vw;
  line-height: 0.85;
  color: var(--ink);
  white-space: nowrap;
}

.display--holland {
  font-family: "NC Holland", Helvetica, Arial, sans-serif;
  font-weight: 400;
  letter-spacing: -0.04em;
}

.display--prague {
  font-family: "NC Prague", Georgia, serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: -0.02em;
}

/* ——— Style stack ——— */
/*
  Each line is fitted to the column independently, so the three weights
  all end flush on the right even though their natural widths differ.
*/

.stack {
  display: block;
  height: auto;
  min-height: 0;
}

.stack span {
  display: block;
  font-family: "NC Forms", Helvetica, Arial, sans-serif;
  /* start size; script sets exact px to fill the column */
  font-size: 6.5vw;
  line-height: 0.92;
  letter-spacing: -0.035em;
  color: var(--ink);
  white-space: nowrap;
}

.stack span:nth-child(1) {
  font-weight: 300;
  font-style: normal;
}

.stack span:nth-child(2) {
  font-weight: 300;
  font-style: italic;
}

.stack span:nth-child(3) {
  font-weight: 400;
  font-style: italic;
}

/* ——— Promo ——— */

.promo {
  display: flex;
  align-items: flex-start;
  gap: 1.5vw;
  height: 18vw;
  min-height: 6.5rem;
  min-width: 0;
}

.promo-circle,
.promo-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.promo-circle {
  flex: 0 0 auto;
  height: 100%;
  aspect-ratio: 1;
  border: 6px solid var(--ink);
  border-radius: 50%;
}

.promo-pill {
  flex: 1 1 auto;
  height: 100%;
  padding: 0 0.5em;
  background: var(--ink);
  border-radius: 999px;
}

/*
  Optical centring. NC Holland Regular sits on a 1000 unit em with ascent
  880, descent 300 and cap height 800, so with line-height 1 the caps
  occupy -0.010em to 0.790em — centre 0.110em above the line box centre.
  Flex centring aligns the box, not the caps, so all-caps text reads high
  and leaves dead space underneath. Nudge it back down.
*/
.promo span {
  font-family: "NC Holland", Helvetica, Arial, sans-serif;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.03em;
  white-space: nowrap;
  transform: translateY(0.11em);
}

.promo-circle span {
  font-size: 4.5vw;
  color: var(--ink);
}

.promo-pill span {
  font-size: 5.5vw;
  color: var(--bg);
}

/* ——— Shop row ——— */

.shoprow {
  display: flex;
  align-items: stretch;
  gap: var(--gutter);
  height: 20vw;
  min-height: 7rem;
}

.mark {
  flex: 0 0 auto;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ink);
}

/*
  NC Forms carries an unusually tall ascent (1.226 against a 0.706 cap on a
  1000 unit em), so its caps land 0.135em BELOW a centred line box — the
  opposite direction to NC Holland. Lift it back up.
*/
.mark span {
  font-family: "NC Forms", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 8vw;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--bg);
  transform: translateY(-0.135em);
}

.shopbox {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  border: 6px solid var(--ink);
  padding: 0.6em 1em;
}

.ribbon {
  width: 62%;
  height: auto;
  color: var(--ink);
}

.shopbox span {
  font-family: "NC Forms", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 6vw;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--ink);
  /* reserve room for the p descender, which falls outside a 1em line box */
  padding-bottom: 0.25em;
}

/* ——— Fitted line blocks ——— */

.lines {
  display: block;
}

.lines span {
  display: block;
  font-family: "NC Forms", Helvetica, Arial, sans-serif;
  font-weight: 700;
  /* start size; script sets exact px to fill the column */
  font-size: 9vw;
  line-height: 0.88;
  letter-spacing: -0.045em;
  color: var(--ink);
  white-space: nowrap;
}

/* ——— Staggered stack ——— */
/*
  Fixed size with alternating indents, so the right edge stays ragged the
  way the reference does. Indents are percentages of the column.
*/

.stagger {
  display: block;
}

.stagger span {
  display: block;
  font-family: "NC Holland", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 5.6vw;
  /* loose enough that the j and y descenders clear the next line's caps */
  line-height: 1.12;
  letter-spacing: -0.035em;
  color: var(--ink);
  white-space: nowrap;
}

/* indents pulled in to make room for the longer accented words */
.stagger span:nth-child(2) {
  margin-left: 16%;
}

.stagger span:nth-child(3) {
  margin-left: 22%;
}

.stagger span:nth-child(5) {
  margin-left: 28%;
}

/* ——— Two line blocks with a trailing word pushed to the edge ——— */

/*
  Top aligned with a fixed gap rather than stretched. Stretching forced the
  shorter column to distribute its slack, which opened a gap between the two
  blocks instead of keeping them tight.
*/
.row--top {
  align-items: start;
}

.row--top > .col {
  justify-content: flex-start;
  row-gap: 0.9rem;
}

.subblock {
  min-width: 0;
}

.duo {
  display: block;
  min-width: 0;
}

.duo-line {
  font-family: "NC Forms", Helvetica, Arial, sans-serif;
  /* large enough that the split line nearly spans the column, so
     space-between leaves a tight gap instead of a void */
  font-size: 9vw;
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--ink);
  white-space: nowrap;
}

.duo-line--split {
  display: flex;
  justify-content: space-between;
  gap: 0.4em;
}

.duo--light .duo-line {
  font-weight: 300;
  font-style: normal;
}

.duo--light-italic .duo-line {
  font-weight: 300;
  font-style: italic;
}

/* ——— Closing row ——— */
/*
  Weighted 2:1 rather than in half. A single word can only be so tall at true
  proportions, so giving it two thirds of the width brings its height close to
  the four lines of type stacked beside it.
*/

.row--final {
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}

.row--final > .col {
  row-gap: 0.9rem;
}

.giant {
  display: block;
}

/*
  NC Forms leaves 0.28em of ascent above its caps at line-height 1. At this
  size that is a huge band of dead air, so pull the block up by exactly that
  much and the cap line sits flush with the top.
*/
.giant span {
  display: block;
  font-family: "NC Forms", Helvetica, Arial, sans-serif;
  font-weight: 700;
  /* start size; script sets exact px to fill the column */
  font-size: 26vw;
  line-height: 1;
  margin-top: -0.2825em;
  letter-spacing: -0.05em;
  color: var(--ink);
  white-space: nowrap;
}

.lines--holland-bold span {
  font-family: "NC Holland", Helvetica, Arial, sans-serif;
  font-weight: 700;
  /*
    Holland's caps overshoot the top of a 0.88 line box, which would leave
    only 0.08em between two stacked lines. 1.0 opens it to 0.20em.
  */
  line-height: 1;
  letter-spacing: -0.04em;
}

.lines--forms-bold-italic span {
  font-style: italic;
}

@media (max-width: 700px) {
  .row {
    grid-template-columns: 1fr;
    row-gap: 0.9rem;
  }

  .shoprow {
    height: 38vw;
  }

  .mark span {
    font-size: 15vw;
  }

  .shopbox span {
    font-size: 11vw;
  }

  .stagger span {
    font-size: 9vw;
  }

  .duo-line {
    font-size: 13vw;
  }

  .stagger span:nth-child(2),
  .stagger span:nth-child(3),
  .stagger span:nth-child(5) {
    margin-left: 12%;
  }

  .band {
    height: 30vw;
  }

  .stack span {
    font-size: 12vw;
  }

  .promo {
    height: 32vw;
  }

  .promo-circle span {
    font-size: 8vw;
  }

  .promo-pill span {
    font-size: 9vw;
  }

  .meta--wide {
    grid-template-columns: repeat(3, 1fr);
  }

  .social-box,
  .holland {
    height: 28vw;
  }

  .social-label span {
    font-size: 12vw;
  }

  .social-label span + span {
    font-size: 10vw;
  }

  .social-icon {
    width: 15vw;
    height: 15vw;
  }
}