/*
  Marketing design: campaigns

  Contract
  --------
  Subject   The front page for a set of marketing design concepts. Each
            concept is one invented brand doing one kind of marketing
            work, shipped as real files.
  Reader    A hiring manager screening a digital designer application,
            often on a phone. They plan campaign calendars for a living.
  Job       Hold one gallery slot for the whole set and put the live
            concept one tap away. The page explains nothing in prose that
            the plan and the previews can show.

  Conceit   A campaign schedule. Concepts are numbered campaigns, ruled
            like the calendars the reader runs at work. The plan carries
            only real data: no invented windows or brands. "Flight", the
            media-buying word for a campaign's run window, was tried and
            cut (owner: confusing, 2026-08-19); every word on the page is
            plain.

  Palette   ink   #1a1a17  text, plates, filled controls
            paper #ffffff  canvas
            ash   #5f5f5d  secondary text, hairlines
            The page holds no accent of its own. The only color in the
            plan is borrowed: each row's status chip is built from the
            campaign it opens, so the column previews the five studios
            behind it. The only imagery is renders of the shipped email
            files, on an ink plate.

  Type      Fraunces 300 display, up to 96px on the masthead; Inter at
            0.03em for everything else. Floor 16px. Scale is the whole
            hierarchy. Numerals are tabular so campaign numbers rail.
            The status chips are the exception: four more display faces
            ride in from the campaigns they open, Cormorant Garamond,
            Anton, Inter Tight and Lora, 113KB and every one swapped.

  Grid      One 1200px sheet. The plan is ruled rows, numbered at the
            left and chipped at the right, with the top rule on the
            first row. On the phone the chip drops under the job it
            labels and the rail is left-aligned.

  Scroll    The scrollbar is the index's own pill: a 14px paper channel
            edged with the 1px ash rule the plan rows are drawn with,
            carrying an 8px ink bar at 999px, the shape of every traffic
            pill on the page. Foredge shares this palette, so the two are
            told apart by shape and width: 8px pill in a 14px channel
            here, 4px bar at a 6px corner in a 12px channel there. WebKit
            and Blink take the drawn version, Firefox takes
            scrollbar-color, which carries the colours and drops the
            geometry. Cost, stated: on macOS a styled bar replaces the
            overlay scrollbar with a classic one that is always visible.

  Chrome    A set bar across the six campaign pages: the fullbuild.ai
            mark links home, six links reach the index and the five
            campaigns. Ink on paper, ruled with the same 1px ash rule
            the plan rows take. Sticky on the sheet, static under 760px.

  Motion    None. Zero JavaScript.

  Bans      Accent color the page invents for itself. Gradients.
            Shadows. JavaScript. Plan rows or cells for work that is not
            real. Prose that restates what a chip or a preview already
            shows. Build metadata in the reader's view (file sizes,
            script counts, type floors): the reader screens creative,
            and the verify test holds those guarantees off the page.

  Signature The ruled plan, the five borrowed chips, and email previews
            that are renders of the real files rather than photography
            standing in for them.

  Risk      Five chips in five voices can read as five stickers.
            Displaced alternative: one neutral chip repeated, which is
            what shipped first and read as one status in five paints.
            The trade: the height, the right rail and the label are
            fixed, and cap heights are tuned to match, so the five
            faces sit in one row without one shouting over the others.
*/

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/prototype/foredge/fonts/fraunces-300-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/prototype/foredge/fonts/inter-latin.woff2') format('woff2');
}

/* Each status chip is set in the display face of the campaign it opens, served
   from that campaign's own font directory. Four faces, 113KB, all swap. */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url('/prototype/foxglove/fonts/cormorant-garamond-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/prototype/foxtail/fonts/anton-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/prototype/foundry/fonts/inter-tight-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/prototype/forecourt/fonts/lora-latin.woff2') format('woff2');
}

:root {
  --ink: #1a1a17;
  --paper: #ffffff;
  --ash: #5f5f5d;
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', Helvetica, Arial, sans-serif;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  background: var(--paper);
}

body {
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: 0.03em;
  color: var(--ink);
  background: var(--paper);
}

p {
  text-wrap: pretty;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 16px;
  background: var(--ink);
  color: var(--paper);
  padding: 14px 28px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  z-index: 10;
}

.skip:focus {
  left: 16px;
}

a:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}

.sheet {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px 120px;
}

.kicker {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Masthead */

.masthead {
  padding: 96px 0 72px;
}

.masthead .kicker {
  margin-bottom: 40px;
}

.masthead h1 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(56px, 8.6vw, 96px);
  line-height: 1.02;
  letter-spacing: 0.01em;
  text-wrap: balance;
}

/* The plan */

.campaign-row {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  gap: 24px;
  align-items: start;
  padding: 36px 0;
  border-bottom: 1px solid var(--ash);
  text-decoration: none;
  color: var(--ink);
}

/* The first row carries the top rule the dropped header used to hold */
#plan > .campaign-row:first-child {
  border-top: 1px solid var(--ash);
}

.campaign-row .no {
  font-family: var(--serif);
  font-weight: 300;
  font-variant-numeric: tabular-nums;
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.1;
}

.campaign-row .what {
  display: block;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.1;
  letter-spacing: 0.01em;
}

/* Keeps the arrow on the last word instead of stranding it on its own line */
.campaign-row .tail {
  white-space: nowrap;
}

.campaign-row .what svg {
  margin-left: 14px;
  vertical-align: baseline;
  position: relative;
  top: 2px;
}

.campaign-row .brand {
  display: block;
  margin-top: 10px;
  font-family: var(--sans);
  font-size: 18px;
  color: var(--ash);
}

/* Sits the chip on the heading's cap band rather than on its line box top */
.campaign-row .status {
  justify-self: end;
  margin-top: -5px;
}

a.campaign-row:hover .what {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 7px;
}

/* Each chip is built from the vocabulary of the campaign it opens: that
   campaign's display face, its corner radius, its edge weight, its colors.
   Every value is greppable in that campaign's own stylesheet. The chips share
   a height, a right-hand rail and a label; everything else is the brand's.
   Recolouring one shape five times was the earlier version, and it read as one
   status in five paints rather than five studios.

   Sizes are the exception: they are not quoted, they are tuned. Four of the
   five faces land at 17.5px of cap. Anton runs 20.7px because it has to hold
   24px for the contrast note below, and a poster face is what Foxtail is.

   Foxtail's voltage on white is 4.49:1, under the 4.5 required of body text.
   Anton at 24px is WCAG large text, where the bar is 3:1, and Foxtail's
   palette holds voltage and cream and no darker blue to reach 4.5 with. */

.status-pill {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  height: 52px;
  /* the trailing letter-space sits entirely to the right of the last glyph, so
     the right inset gives all of it back; without this Foundry's tracked caps
     sit 2.9px left of centre */
  padding: 0 calc(24px - var(--track)) 0 24px;
  letter-spacing: var(--track);
  border-style: solid;
  border-color: transparent;
  white-space: nowrap;
}

/* Foredge: its swatch card whole, 6px with a 1px ash edge. This page is set in
   Foredge's own two faces, so the chip cannot distinguish itself by type; the
   card is what carries it. */
.demo-foredge {
  --track: 0.01em;
  background: transparent;
  color: #1a1a17;
  border-width: 1px;
  border-color: #5f5f5d;
  border-radius: 6px;
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  font-weight: 300;
  font-size: 25px;
}

/* Foxglove: its swatch card whole, square with a 1px peach edge on blush. The
   coral stroke belongs to its pills, and a pill is not what this is. */
.demo-foxglove {
  --track: 0.01em;
  background: #fef1ec;
  color: #11223f;
  border-width: 1px;
  border-color: #f6bba4;
  border-radius: 0;
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  font-weight: 300;
  font-size: 28px;
}

/* Foxtail: the outline is the button, and Anton is the poster */
.demo-foxtail {
  --track: -0.01em;
  background: transparent;
  color: #006eff;
  border-width: 1.5px;
  border-color: #006eff;
  border-radius: 999px;
  font-family: 'Anton', 'Arial Narrow', 'Franklin Gothic Medium', sans-serif;
  font-weight: 400;
  font-size: 24px;
  text-transform: uppercase;
}

/* Foundry: the square ink swatch its palette section fills, with the display
   face set the way Foundry sets it, tight rather than tracked out */
.demo-foundry {
  --track: -0.02em;
  background: #23231f;
  color: #f4f2ee;
  border-width: 0;
  border-radius: 0;
  font-family: 'Inter Tight', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 400;
  font-size: 24px;
}

/* Forecourt: its pill-go, marigold on hedge at 999px. Forecourt's 24px cards
   are rye, never marigold; marigold rides pills, beads and the band. */
.demo-forecourt {
  --track: -0.01em;
  background: #f6b83c;
  color: #1e2a1e;
  border-width: 0;
  border-radius: 999px;
  font-family: 'Lora', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  font-size: 25px;
}

/* Campaign features */

.feature {
  padding: 96px 0 0;
}

.feature .kicker {
  color: var(--ash);
}

.feature h2 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(40px, 5.4vw, 64px);
  line-height: 1.05;
  letter-spacing: 0.01em;
  margin-top: 20px;
}

.feature .about {
  margin-top: 22px;
  font-size: 21px;
  line-height: 1.5;
  color: var(--ash);
  max-width: 58ch;
}

.plate {
  background: var(--ink);
  border-radius: 6px;
  padding: 36px;
  margin-top: 48px;
}

.sends {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.sends a {
  display: block;
  text-decoration: none;
}

.sends img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}

.send-name {
  display: block;
  margin-top: 16px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--paper);
}

.cadence {
  display: block;
  margin-top: 4px;
  font-size: 16px;
  color: var(--paper);
  font-weight: 400;
}

.sends a:hover .send-name {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.sends a:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 4px;
}

/* Campaign 02 sends traffic to two places, so the row wraps rather than
   letting a second pill butt against the first. */
.traffic {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 20px;
  padding: 40px 0 0;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 18px 38px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
}

/* Colophon */

.colophon {
  margin-top: 112px;
  border-top: 1px solid var(--ash);
  padding-top: 40px;
}

.colophon p {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ash);
  max-width: 66ch;
}

.colophon p + p {
  margin-top: 16px;
}

.colophon a {
  color: var(--ink);
}

/* Small screens */

@media (max-width: 760px) {
  .sheet {
    padding: 0 24px 96px;
  }

  .masthead {
    padding-top: 64px;
  }

  .campaign-row {
    grid-template-columns: 76px 1fr;
    gap: 14px;
    padding: 28px 0;
  }

  .campaign-row .no {
    grid-area: 1 / 1;
  }

  .campaign-row .main {
    grid-area: 1 / 2;
  }

  /* Too narrow for a third column: the chip drops under the job it labels */
  .campaign-row .status {
    grid-area: 2 / 2;
    justify-self: start;
    margin-top: 0;
    padding-top: 14px;
  }

  /* Foundry's tracked caps are the widest chip; the padding gives way here so
     the type keeps its size and the plate stays inside the sheet */
  .status-pill {
    padding: 0 calc(12px - var(--track)) 0 12px;
  }
}

/* Below this the job column is too narrow for the widest chip, so the chip
   takes the whole row and hangs on the sheet's left edge instead */
@media (max-width: 430px) {
  .campaign-row .status {
    grid-column: 1 / -1;
  }

  .campaign-row .what svg {
    width: 20px;
    height: 20px;
    margin-left: 10px;
  }

  .plate {
    padding: 20px;
  }

  .sends {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
}

/* Below this the two preview columns fall under 126px, which is what
   "THE ANNOUNCEMENT" measures at the 16px floor, and the captions pushed the
   page sideways. One column instead: the floor holds, the caption fits, and
   a preview this small was unreadable at two up anyway. */
@media (max-width: 374px) {
  .sends {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* The pill in the margin. See the Scroll note in the contract above. */
::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}

::-webkit-scrollbar-track {
  background: var(--paper);
}

::-webkit-scrollbar-track:vertical {
  border-left: 1px solid var(--ash);
}

::-webkit-scrollbar-track:horizontal {
  border-top: 1px solid var(--ash);
}

::-webkit-scrollbar-thumb {
  background: var(--ink);
  background-clip: padding-box;
  border: 3px solid transparent;
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  border-width: 2px;
}

::-webkit-scrollbar-corner {
  background: var(--paper);
}

@supports not selector(::-webkit-scrollbar) {
  html {
    scrollbar-color: var(--ink) var(--paper);
    scrollbar-width: thin;
  }
}

/* Set navigation: one bar across the six campaign pages, painted in this
   page's own tokens. The rule under it is the 1px ash rule the plan rows are drawn with.
   The house mark is the fullbuild.ai logo, drawn in its finished state, since
   these pages ship no JavaScript. Sticky, because the pages run long. */
.setnav {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 32px;
  padding: 14px 40px;
  background: var(--paper);
  border-bottom: 1px solid var(--ash);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.4;
}

.skip {
  z-index: 30;
}

.setnav-home {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-decoration: none;
}

.setnav-mark {
  display: block;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
}

.setnav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  /* Foundry and Forecourt reset box-sizing but not margins, so the list
     keeps its UA padding and the bar grows 18px unless it is zeroed here */
  margin: 0 0 0 auto;
  padding: 0;
  list-style: none;
}

.setnav-links a {
  display: block;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
  color: var(--ash);
  font-weight: 500;
  letter-spacing: 0.03em;
  text-decoration: none;
}

.setnav-links a:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

.setnav-links a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

.setnav-home:focus-visible,
.setnav-links a:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}

/* The bar covers the top of the page, so anything jumped to clears it */
:target {
  scroll-margin-top: 96px;
}

@media (max-width: 759px) {
  .setnav {
    gap: 10px 20px;
    padding: 12px 24px;
  }

  .setnav-mark {
    width: 30px;
    height: 30px;
  }

  .setnav-links {
    gap: 6px 18px;
  }

  /* A wrapped bar eats a tenth of a phone screen, so it scrolls away here
     and the campaign gets the viewport back */
  .setnav {
    position: static;
  }
}