/* Foundry Works, campaign 04 case page.

   Contract
   Color     canvas #d6d4d0  painted-concrete page ground, the only ground
             ink    #23231f  text, hairlines, pill fills
             ash    #5b5a56  secondary text (4.66:1 on canvas)
             well   #c7c5c1  recessed wells the artifacts sit in
             halls  #b03a24 furnace, #d99b2b brass, #3f5f8a steel, #2f6b4f patina,
             full-bleed slabs, swatches, wayfinding dots, and the numerals
             inside them; never body text, never a whole icon set
   Type      Inter Tight 400, display and headings, crushed leading 0.78 to
             0.92, tracking -0.05em large / -0.03em mid. Inter 400 to 600 for
             everything else. Floor: nothing below 16px on this page.
   Shape     Ruthlessly flat. No shadows, no gradients, no elevation. Radius 0
             on every block; 999px on pills and dot badges only. 1px ink
             hairlines do the structure.
   Scroll    The scrollbar is a slab in the margin: a 14px canvas channel
             cut by the 1px ink hairline that does the structure here,
             carrying an 8px ink bar at radius 0, because radius 0 is what
             every block in this system takes. The widest channel of the
             six campaigns, which suits the only page whose ground is
             concrete rather than paper. WebKit and Blink take the drawn
             version, Firefox takes scrollbar-color. 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 other
             campaigns. Ink on canvas, ruled with the 1px ink hairline,
             current page underlined 2px. Static under 760px.

   Motion    None. Zero JavaScript. The email is the subject.
   Bans      Color used semantically. Shadows. Gradients. Rounded cards.
             A second display face. Type below 16px. */

:root {
  --canvas: #d6d4d0;
  --ink: #23231f;
  --ash: #5b5a56;
  --well: #c7c5c1;
  --furnace: #b03a24;
  --brass: #d99b2b;
  --steel: #3f5f8a;
  --patina: #2f6b4f;
  --paper: #f4f2ee;
  --display: 'Inter Tight', 'Helvetica Neue', Arial, sans-serif;
  --text: 'Inter', 'Helvetica Neue', Arial, sans-serif;
}

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

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

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--text);
  font-size: 18px;
  line-height: 1.5;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: 12px 20px;
  font-size: 16px;
}
.skip:focus { left: 16px; top: 16px; z-index: 10; }

.sheet {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 48px;
}

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

.kicker {
  font-family: var(--text);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ash);
  margin: 0 0 16px;
}

/* Masthead: the display type is the wall */

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

.masthead .wordmark {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 0 0 84px;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.masthead .wordmark span:last-child {
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ash);
}

h1 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(64px, 12.5vw, 172px);
  line-height: 0.78;
  letter-spacing: -0.05em;
  margin: 0 0 72px;
}

h1 .line { display: block; }
h1 .line-right { text-align: right; }

.standfirst {
  max-width: 620px;
  margin: 0 0 0 auto;
  font-size: 20px;
  line-height: 1.55;
}

/* Sections ruled by hairlines; the 1px line is the structure */

section {
  border-top: 1px solid var(--ink);
  padding: 56px 0 88px;
}

.section-head {
  display: flex;
  gap: 24px;
  align-items: baseline;
  margin-bottom: 48px;
}

.section-head .kicker { margin: 0; min-width: 64px; }

h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 0.92;
  letter-spacing: -0.03em;
  margin: 0;
}

h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 30px;
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
}

/* 01 The brief */

.brief-rows {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 20px 40px;
  max-width: 900px;
}

.brief-rows .label {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ash);
  padding-top: 4px;
}

.brief-rows .value { margin: 0; }

/* 02 The system */

.chips {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
  margin-bottom: 64px;
}

.chip { margin: 0; }

.chip .swatch {
  height: 96px;
  margin-bottom: 14px;
}

.chip figcaption { font-size: 16px; line-height: 1.4; }
.chip figcaption strong { display: block; font-weight: 600; }
.chip figcaption span { color: var(--ash); }

.specimen {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px 64px;
  align-items: start;
}

.specimen .label {
  display: block;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ash);
  margin-bottom: 16px;
}

.sample-display {
  font-family: var(--display);
  font-size: clamp(56px, 7vw, 96px);
  line-height: 0.78;
  letter-spacing: -0.05em;
  display: block;
}

.sample-body { display: block; max-width: 480px; }

.sample-controls { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 999px;
  padding: 14px 30px;
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
}

.pill-filled { background: var(--ink); color: var(--paper); }
.pill-paper { background: var(--paper); color: var(--ink); }

.badges { display: flex; gap: 14px; }

.badge {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 600;
  background: var(--paper);
}

.badge-furnace { color: var(--furnace); }
.badge-brass { background: var(--ink); color: var(--brass); }
.badge-steel { color: var(--steel); }
.badge-patina { color: var(--patina); }

/* 03 The send */

.envelope {
  display: grid;
  gap: 12px;
  max-width: 640px;
  margin-bottom: 48px;
}

.envelope > div {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 24px;
}

.envelope .label {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ash);
  padding-top: 2px;
}

.viewports {
  display: grid;
  grid-template-columns: minmax(0, 664px) minmax(0, 439px);
  gap: 24px;
  align-items: start;
}

.viewport {
  background: var(--well);
  padding: 32px;
}

.viewport .vp-label {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 20px;
}

.viewport iframe {
  display: block;
  width: 100%;
  height: 960px;
  border: 1px solid var(--ash);
  background: var(--canvas);
}

/* The desktop well never lies: below 600px of well the iframe keeps its
   true width and the well scrolls sideways instead */
.viewport-desktop { overflow-x: auto; }
.viewport-desktop iframe { min-width: 600px; }

.viewport-mobile iframe {
  width: 375px;
  max-width: 100%;
  margin: 0 auto;
}

.send-notes { max-width: 720px; }
.send-notes p { margin: 28px 0 0; }

/* 04 Dark mode */

.renders {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 40px;
}

.render {
  margin: 0;
  background: var(--well);
  padding: 32px;
}

.render img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--ash);
}

.render figcaption {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.dark-notes { max-width: 720px; }
.dark-notes p { margin: 0 0 20px; }

/* 05 The client plan */

.clients {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--ink);
  border-left: 1px solid var(--ink);
}

.client {
  border-right: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  padding: 36px 36px 40px;
}

.client ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.client li {
  margin: 0 0 12px;
  padding-left: 22px;
  position: relative;
}

.client li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--ink);
}

.client-furnace li::before { background: var(--furnace); }
.client-brass li::before { background: var(--brass); }
.client-steel li::before { background: var(--steel); }
.client-patina li::before { background: var(--patina); }

/* 06 The engineering */

.engineering ul {
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: 900px;
}

.engineering li {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 24px;
  padding: 20px 0;
  border-bottom: 1px solid var(--ash);
}

.engineering li strong {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ash);
}

.traffic { margin-top: 48px; }

.colophon {
  border-top: 1px solid var(--ink);
  padding: 44px 0 56px;
  color: var(--ash);
  font-size: 16px;
}

.colophon p { margin: 0 0 8px; }

@media (max-width: 1100px) {
  .viewports { grid-template-columns: 1fr; }
  .chips { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 820px) {
  .sheet { padding: 0 24px; }
  .masthead .wordmark { margin-bottom: 56px; flex-direction: column; align-items: flex-start; gap: 8px; }
  h1 { margin-bottom: 48px; }
  .standfirst { margin-left: 0; }
  .section-head { flex-direction: column; gap: 12px; }
  .brief-rows { grid-template-columns: 1fr; gap: 8px; }
  .brief-rows .value { margin-bottom: 20px; }
  .specimen { grid-template-columns: 1fr; }
  .renders { grid-template-columns: 1fr; }
  .clients { grid-template-columns: 1fr; }
  .chips { grid-template-columns: repeat(2, 1fr); }
  .envelope > div { grid-template-columns: 1fr; gap: 4px; }
  .engineering li { grid-template-columns: 1fr; gap: 6px; }
  .viewport { padding: 16px; }
  .render { padding: 16px; }
}

/* The ink rule on the canvas. See the Scroll note in the contract above. */
::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}

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

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

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

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

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

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

@supports not selector(::-webkit-scrollbar) {
  html {
    scrollbar-color: var(--ink) var(--canvas);
    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 ink hairline that does the structure on the concrete ground.
   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 48px;
  background: var(--canvas);
  border-bottom: 1px solid var(--ink);
  font-family: var(--text);
  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;
  }
}