/* Phil & Sebastian brand standards page.

   Geometry and type sizes are taken from PS_Brand-Page_Jul2026.pdf. The PDF was
   measured by rendering it and reading pixel positions, then every value was
   stored as a fraction of the content column width. --c is that width, so the
   whole layout scales as one piece and still matches the PDF proportionally.

   The PDF sits on three equal columns with no gutter: label, mark, clearspace
   guide. Marks are centred at 1/2 and 5/6 of the content width, buttons at 2/3. */

@font-face {
  font-family: "Fixture";
  src: url("/fonts/Fixture-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fixture";
  src: url("/fonts/Fixture-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fixture";
  src: url("/fonts/Fixture-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fixture";
  src: url("/fonts/Fixture-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fixture Condensed";
  src: url("/fonts/Fixture-Condensed-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #1c1c1c;
  --gold: #ac8638;
  --rule: #c9c6c0;
  --page: #ffffff;

  --pad: clamp(1.5rem, 4vw, 3rem);
  --c: min(66rem, calc(100vw - 2 * var(--pad)));
  --label-pad: calc(var(--c) * 0.04);
}

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

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

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: "Fixture", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

.page {
  max-width: 72rem;
  margin: 0 auto;
  padding: calc(var(--c) * 0.0596) var(--pad) calc(var(--c) * 0.15);
}

/* ---------- Intro ---------- */

.intro h1 {
  margin: 0;
  font-weight: 700;
  text-transform: uppercase;
  font-size: calc(var(--c) * 0.0399);
  line-height: 0.92;
  /* Break after "SEBASTIAN", as the PDF does. */
  max-width: calc(var(--c) * 0.7);
}

.intro p {
  margin: calc(var(--c) * 0.0269) 0 0;
  max-width: calc(var(--c) * 0.712);
  font-size: calc(var(--c) * 0.0205);
  line-height: 1.229;
}

/* ---------- Sections ---------- */

.section {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
  margin-top: calc(var(--c) * 0.0894);
  padding-top: calc(var(--c) * 0.0252);
  border-top: 1px solid var(--rule);
}

.intro + .section {
  margin-top: calc(var(--c) * 0.0539);
}

/* Palette sections end in caption text rather than a button, and the PDF gives
   them a little more air before the next rule. */
#primary-palette + .section {
  margin-top: calc(var(--c) * 0.1089);
}

.section__label {
  padding-right: var(--label-pad);
}

/* SemiBold with no added tracking: measured against the PDF, that lands within
   2.5% of every label's width. Bold plus tracking ran 14% wide and pushed the
   longest label onto a second line. */
.section__label h2 {
  margin: 0;
  font-weight: 600;
  text-transform: uppercase;
  font-size: calc(var(--c) * 0.0194);
  line-height: 1.3;
}

.section__label p {
  margin: calc(var(--c) * 0.0189) 0 0;
  font-size: calc(var(--c) * 0.016);
  line-height: 1.214;
}

/* The button sits centred across the two artwork columns, as in the PDF. */
.section__action {
  grid-column: 2 / 4;
  display: flex;
  justify-content: center;
  margin-top: calc(var(--c) * 0.0823);
}

.section--wide > .specimen,
.section--wide > .swatches {
  grid-column: 2 / 4;
}

/* ---------- Artwork ---------- */

/* The plain mark and the clearspace guide are exports of the same artboard: the
   mark sits at the same size and the same centre in both, and fills 85.25% of
   the file's width. So both images render at one width per section and the mark
   comes out identical on each side, which is how the PDF has it.

   --mark is that shared width as a share of the column, derived from the PDF:
   mark width / 0.8525 / column width. */
#symbol,
#logotype {
  --mark: 55.5%;
}

#wordmark {
  --mark: 85.7%;
}

.art {
  margin: calc(var(--c) * 0.0537) 0 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.art img {
  width: var(--mark);
}

/* ---------- Download button ---------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--c) * 0.184);
  height: calc(var(--c) * 0.0384);
  border: 1px solid var(--ink);
  font-family: inherit;
  font-size: calc(var(--c) * 0.0159);
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  background: transparent;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.button:hover,
.button:focus-visible {
  background: var(--ink);
  color: #fff;
}

/* ---------- Typography specimen ---------- */

.specimen {
  margin-top: calc(var(--c) * 0.0837);
}

.specimen__line {
  margin: 0;
  line-height: 1.2;
}

.specimen__line--bold {
  font-weight: 700;
  text-transform: uppercase;
  font-size: calc(var(--c) * 0.0267);
}

.specimen__line--semibold {
  font-weight: 600;
  text-transform: uppercase;
  font-size: calc(var(--c) * 0.0252);
}

.specimen__line--medium {
  font-weight: 500;
  font-size: calc(var(--c) * 0.0225);
}

.specimen__line--condensed {
  font-family: "Fixture Condensed", "Fixture", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  font-size: calc(var(--c) * 0.0224);
  letter-spacing: 0.01em;
}

.specimen__line--body {
  font-weight: 400;
  font-size: calc(var(--c) * 0.0172);
  margin-top: calc(var(--c) * 0.0029);
}

.notice {
  margin: calc(var(--c) * 0.03) 0 0;
  max-width: calc(var(--c) * 0.52);
  font-size: calc(var(--c) * 0.013);
  line-height: 1.35;
  color: #575551;
}

.specimen__line--body b {
  font-weight: 500;
}

.specimen__line--body strong {
  font-weight: 600;
}

/* ---------- Colour swatches ---------- */

.swatches {
  list-style: none;
  margin: calc(var(--c) * 0.0906) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
}

/* Chips are square and 13.1% of the content width in the PDF. The row spans two
   of the three columns, so that is 19.65% of the row. */
.swatch {
  width: 19.65%;
}

.swatch__chip {
  display: block;
  aspect-ratio: 1;
}

/* Pale swatches need an outline to read against the white page. */
.swatch__chip--pale {
  box-shadow: inset 0 0 0 1px var(--rule);
}

.swatch__meta {
  display: block;
  width: 100%;
  text-align: left;
  appearance: none;
  background: none;
  border: 0;
  margin: 0;
  padding: calc(var(--c) * 0.0103) calc(var(--c) * 0.012) 0 0;
  cursor: pointer;
  font-family: inherit;
  font-size: calc(var(--c) * 0.013);
  line-height: 1.234;
  color: var(--ink);
}

.swatch__meta span {
  display: block;
}

.swatch__meta:hover .swatch__hex,
.swatch__meta:focus-visible .swatch__hex {
  color: var(--gold);
}

/* ---------- Copy confirmation ---------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: 2rem;
  transform: translate(-50%, 0.75rem);
  background: var(--ink);
  color: #fff;
  padding: 0.55rem 1.1rem;
  font-size: 0.8125rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

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

/* The PDF proportions are built for a wide page. Below this the layout stacks
   and type goes back to a fixed scale, otherwise everything shrinks with the
   viewport and becomes unreadable. */
@media (max-width: 60rem) {
  .page {
    padding-top: 2.5rem;
    padding-bottom: 4rem;
  }

  .section,
  .section--wide {
    grid-template-columns: 1fr;
    row-gap: 1.5rem;
    margin-top: 3rem;
    padding-top: 2rem;
  }

  .intro + .section,
  #primary-palette + .section {
    margin-top: 3rem;
  }

  .intro h1 {
    font-size: 1.75rem;
    line-height: 1.05;
    max-width: none;
  }

  .intro p {
    font-size: 1rem;
    line-height: 1.45;
    margin-top: 1.25rem;
    max-width: none;
  }

  .section__label {
    padding-right: 0;
  }

  .section__label h2 {
    font-size: 1rem;
  }

  .section__label p {
    font-size: 0.9375rem;
    line-height: 1.4;
    margin-top: 0.75rem;
  }

  .section__action,
  .section--wide > .specimen,
  .section--wide > .swatches {
    grid-column: 1;
  }

  .section__action {
    justify-content: flex-start;
    margin-top: 0.5rem;
  }

  .button {
    width: auto;
    height: auto;
    padding: 0.7rem 1.5rem;
    font-size: 0.875rem;
  }

  .art {
    justify-content: flex-start;
    margin-top: 0;
  }

  .art img {
    width: 100%;
    max-width: 22rem;
  }

  .specimen {
    margin-top: 0;
  }

  .specimen__line--bold {
    font-size: 1.375rem;
  }

  .specimen__line--semibold {
    font-size: 1.25rem;
  }

  .specimen__line--medium {
    font-size: 1.125rem;
  }

  .specimen__line--condensed {
    font-size: 1.0625rem;
  }

  .specimen__line--body {
    font-size: 1rem;
    margin-top: 0.5rem;
  }

  .notice {
    margin-top: 1.25rem;
    max-width: none;
    font-size: 0.875rem;
  }

  .swatches {
    margin-top: 0;
  }

  .swatch {
    width: 33.33%;
  }

  .swatch__meta {
    padding: 0.6rem 0.6rem 0 0;
    font-size: 0.8125rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}