@font-face { font-family: 'Winksy'; src: url('/fonts/Winksy.otf') format('opentype'); font-display: swap; }

/* The text face belongs here too.
 *
 * brand.css declared Winksy and nothing else, so every page that wanted body
 * copy redeclared Apfel for itself — index.html in its own <style>, the legal
 * pages via style-legal.css. A page that linked only brand.css therefore had a
 * display face and no text face, and fell through to system-ui without
 * warning: correct-looking markup, generic-looking words. website/go.html was
 * written that way and read as somebody else's page sitting under our lockup.
 *
 * Declared here, any page that links the brand stylesheet gets both. The two
 * existing declarations are left alone — a repeated @font-face with the same
 * src is resolved to the same file, so they cost nothing until someone
 * consolidates them. */
@font-face { font-family: 'Apfel'; src: url('/fonts/ApfelGrotezk-Regular.otf') format('opentype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Apfel'; src: url('/fonts/ApfelGrotezk-Mittel.otf') format('opentype'); font-weight: 600; font-display: swap; }

/* The display face, once, for every page.
 *
 * The landing page had a switcher so candidates could be compared on the real
 * page rather than a specimen sheet, and Winksy won. But only the landing page
 * ever read it — pricing and the legal pages hard-coded 'Clash', which is the
 * *fallback*. So the site shipped with its headline face on one page and its
 * backup face on the other three, and nothing looked broken enough to notice.
 *
 * Clash stays in the stack behind it, where a fallback belongs. */
:root { --display: 'Winksy', 'Clash', sans-serif; }

/* Winksy ships as a single instance and the user's standing rule is that it
 * NEVER carries a weight. A synthesised bold closes the counters until the
 * word is a blob, and the browser will fake one silently the moment any rule
 * asks for 700. Belt and braces: refuse synthesis outright. */
h1, h2, h3, h4, .wordmark, [class*="head"], [class*="display"] {
  font-synthesis: none;
  -webkit-font-synthesis: none;
}

/* The header, once.
 *
 * There used to be four of these. The landing page masked the traced
 * wordmark, the pricing page set the word "Lala" in Clash — a font, not our
 * logotype — and the two legal pages used body type with a "← " in front of
 * it, which is a back button wearing the brand's clothes. Three mark sizes
 * (54, 60, 56), two mark colours, and two different ways of drawing the same
 * sine wave.
 *
 * So: one lockup, and the colours come from the ground it is standing on.
 * A page on grape sets nothing; a page on milk overrides the two variables.
 *
 * Consolidating those four headers left them all sharing *one* arrangement,
 * which was the point — but it was the wrong one. They set the mark beside the
 * word as two separate objects, which is a mark and a wordmark, not a lockup:
 * the two inks never touch, so the knockout that is the whole signature never
 * appears. The real lockup was sitting in this file all along, used only by
 * backstage. Every header now draws it.
 */

:root {
  --brand-word: #fff8ee;
  --brand-mark: #ffc63d;
  --brand-dim: rgba(255, 248, 238, 0.72);
}

.site-nav {
  max-width: 1140px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 16px clamp(18px, 4vw, 48px);
}

.brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--brand-word);
}

/* One size for every header on the site, matching backstage's bar so the
   public pages and the internal one wear the signature at the same scale.
   The letters here are the same width the bare wordmark used to be, plus the
   wave hanging below them — the header grew by the mark, not by the type. */
.brand .lockup {
  width: 76px;
  flex: none;
  --mark: var(--brand-mark);
}

/* The real logotype, masked from the outlined art, filled with currentColor.
   Never set the name in a typeface: a font is not a logotype, and the OG card
   uses these same outlines, so the two would drift apart the moment one of
   them changed. */
.wordmark {
  display: block;
  width: 64px;
  aspect-ratio: 2400 / 1127;
  background: currentColor;
  -webkit-mask: url('/art/wordmark.svg') no-repeat center / contain;
  mask: url('/art/wordmark.svg') no-repeat center / contain;
}

/* The lockup — the wordmark with the mark riding across its feet, which is the
 * signature and the thing to reach for by default. The bare .wordmark above is
 * for the few places already using it where the mark would not fit.
 *
 * Geometry comes from scripts/gen-lockup-svg.mjs, which copies its constants
 * out of components/lockup.tsx so the web and the app cannot drift. Do not
 * nudge the numbers here; regenerate.
 *
 * Two layers rather than one picture, so both inks stay in CSS: the letters
 * take `color` and the wave takes `--mark`. That is what lets one pair of
 * files sit on the grape, the milk and the ink without a variant per ground.
 * The knockout where the crests meet the letters is real transparency, so
 * whatever is behind shows through it. */
.lockup {
  --mark: #ffc63d;
  position: relative;
  display: block;
  width: 120px;
  aspect-ratio: 2400 / 1532.98;
}

/* The masks go on the pseudo-elements rather than on .lockup itself: a mask on
 * the parent clips its children too, and the wave lives exactly where the
 * letters' mask has a hole — so it would be clipped away by its own clear
 * space. */
.lockup::before,
.lockup::after {
  content: '';
  position: absolute;
  inset: 0;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.lockup::before {
  background: currentColor;
  -webkit-mask-image: url('/art/lockup-letters.svg');
  mask-image: url('/art/lockup-letters.svg');
}

.lockup::after {
  background: var(--mark);
  -webkit-mask-image: url('/art/lockup-mark.svg');
  mask-image: url('/art/lockup-mark.svg');
}

.site-nav .links {
  display: flex;
  align-items: center;
}

.site-nav .links a {
  color: var(--brand-dim);
  text-decoration: none;
  font-size: 15px;
  font-weight: 400;
  margin-left: 22px;
  transition: color 0.2s ease;
}

.site-nav .links a:hover,
.site-nav .links a:focus-visible {
  color: var(--brand-word);
}

.brand:focus-visible,
.site-nav .links a:focus-visible {
  outline: 2px solid var(--brand-mark);
  outline-offset: 4px;
  border-radius: 4px;
}

@media (max-width: 460px) {
  .site-nav .links a {
    margin-left: 16px;
    font-size: 14px;
  }
}