/*
  Foxglove Paper: the garden suites

  Contract
  --------
  Subject   A ten-tile Instagram launch for Foxglove Paper, an invented
            wedding stationery studio in Hudson, New York, selling six
            semi-custom invitation suites named for garden flowers.
            Ten tiles: one teaser story, the launch post, four carousel
            frames, the liner poll, the six-suite lineup, and the two
            convert posts.
  Reader    A hiring manager screening a digital designer application.
            Ninety seconds, and already tired of flat social mockups.
  Job       Show the week the way it would post, then hand over the files.

  Conceit   The launch week. Tiles are ordered and stamped the way a
            content calendar runs them: Monday hook, Wednesday launch,
            Thursday carousel, Friday poll, Saturday lineup, then two
            convert posts the week after. The day stamps carry the
            funnel, so no paragraph has to explain it.

  Palette   blush #fef1ec  the canvas, on every tile and on this page
            ink   #11223f  all type and every rule that must read,
                           never #000. Ink on blush measures 14.35:1
                           by the WCAG 2.1 relative luminance formula
            coral #ff5734  the only accent: pill borders, the pill fill
                           behind the last call, section rules, link
                           underlines, and the ampersand between the two
                           names. Never used as text here, where it
                           would measure 2.85:1 on blush and fail
            white #ffffff  card surfaces only, never a page background
            peach #f6bba4  soft tints, hairlines, frame edges
            The illustration keeps a separate locked set, #193c35
            #7e813c #e5ba2b #ec4f22 #c6d7d0 #f6bba4 over #092a49 line
            work, and appears only as flat shapes bleeding off an edge.

  Type      Cormorant Garamond, self-hosted variable 300 to 500, used at
            300 only, display and headings, italic 300 for names. Inter,
            self-hosted 400 to 600, labels tracked 0.2em and body 0.03em.
            The masthead runs clamp(64px, 10vw, 140px). Floor: nothing
            renders below 16px, this page included.

  Pills     One CTA shape across every tile: 999px radius, a 2px coral
            border, an ink label in sentence case, no fill. The last
            call story inverts it, because the whole frame is coral
            there: the pill fills blush and keeps the ink label. The
            CONTROLS specimen renders both. The poll story carries a
            third, non-CTA shape on purpose: two identical white
            option pills with peach borders and liner swatches, drawn
            to read as an Instagram poll sticker, not as a button.

  Grid      One 1200px sheet, centered, 40px gutters. On the wide sheet
            each post runs the tile at 560px in the left column with a
            narrow text rail beside it; the two convert posts run 640px.
            Under 1024px the post stacks, day stamp over tile, and the
            tile takes the width of the column. Carousel frames stay
            side by side in a strip that scrolls sideways at every
            width, snapping frame by frame, because that is how the post
            itself behaves.

  Tiles     Every frame is an iframe of the shipped file at true export
            size, 1080px wide, scaled by transform. --tile-w is a plain
            number set per breakpoint: the wrapper takes that many pixels
            and the frame scales by --tile-w / 1080, so the arithmetic
            lives in one place. Wrapper height comes from aspect-ratio.
            Pointer events are off; the link under each tile opens the
            real file.

  Scroll    The scrollbar is the 88 by 4 rule stood on end: a 4px coral bar
            in a 12px blush channel with the same 1px peach hairline the
            sheet uses to divide rows. Grabbing it thickens the bar to 8px
            rather than changing its colour, because coral is the only
            accent and it does not have a second state. WebKit and Blink
            take the drawn version; Firefox gets scrollbar-color, which
            carries the two colours and drops the geometry. Cost, stated:
            styling the bar on macOS 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. The current page takes a coral underline, which is
            a job coral already holds here. The bar sits on blush over
            the peach hairline, and goes static under 760px.

  Motion    None. Zero JavaScript on this page and inside every tile.

  Bans      Color outside the values above. Gradients. Shadows. Black.
            Em dashes, en dashes, curly quotes. A period at the end of
            any heading or display line. Type below 16px. Build
            metadata: no pixel dimensions, no file names, no export
            chatter, because the tile is the evidence. Screenshots
            standing in for artifacts. Any claim that this campaign ran:
            nothing was posted, so there are no results to report.
*/

@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: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300 500;
  font-display: swap;
  src: url('/prototype/foxglove/fonts/cormorant-garamond-italic-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');
}

:root {
  --blush: #fef1ec;
  --ink: #11223f;
  --coral: #ff5734;
  --white: #ffffff;
  --peach: #f6bba4;
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', Helvetica, Arial, sans-serif;
  --tile-w: 560;
  --rail-gap: 56px;
}

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

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

body {
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.55;
  letter-spacing: 0.03em;
  color: var(--ink);
  background: var(--blush);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--ink);
  text-decoration-line: underline;
  text-decoration-color: var(--coral);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

a:hover {
  text-decoration-thickness: 3px;
}

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

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

.skip:focus {
  left: 16px;
}

.page {
  position: relative;
  overflow: clip;
}

.bleed {
  position: absolute;
  z-index: 0;
  display: block;
  height: auto;
  pointer-events: none;
  user-select: none;
}

.bleed-a {
  top: -110px;
  left: -70px;
  width: 520px;
}

.bleed-b {
  right: -160px;
  bottom: -20px;
  width: 520px;
  transform: scaleX(-1);
}

.sheet {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px 220px;
}

.masthead {
  position: relative;
  padding: 380px 0 88px;
  border-bottom: 1px solid var(--peach);
}

.masthead > * {
  position: relative;
  z-index: 1;
}

.kicker {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.2em;
  line-height: 1.4;
}

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

.wordmark {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(64px, 10vw, 140px);
  line-height: 1;
  letter-spacing: 0.005em;
}

section {
  padding-top: 104px;
}

.section-head {
  display: flex;
  align-items: baseline;
  gap: 28px;
  padding-top: 28px;
  margin-bottom: 56px;
  border-top: 2px solid var(--coral);
}

.section-head h2 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 56px;
  line-height: 1.05;
  letter-spacing: 0.01em;
}

.brief-rows {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  border-top: 1px solid var(--peach);
}

.brief-rows > div {
  padding: 28px 0;
  border-bottom: 1px solid var(--peach);
}

.brief-rows .label {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.2em;
  padding-right: 24px;
}

.brief-rows .value {
  max-width: 62ch;
  font-size: 20px;
  line-height: 1.6;
}

.label {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.2em;
  line-height: 1.4;
}

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

.chip {
  background: var(--blush);
  border: 1px solid var(--peach);
  border-radius: 0;
}

.chip .swatch {
  height: 132px;
  border-bottom: 1px solid var(--peach);
}

.chip figcaption {
  padding: 18px 20px 22px;
  font-size: 16px;
  line-height: 1.5;
}

.chip figcaption strong {
  display: block;
  font-weight: 600;
  font-size: 17px;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}

.inkset {
  padding: 32px 0 0;
  border-top: 1px solid var(--peach);
  margin-bottom: 64px;
}

.inks {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 32px;
  list-style: none;
  margin: 28px 0 8px;
}

.inks li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  letter-spacing: 0.06em;
}

.ink-dot {
  display: block;
  width: 34px;
  height: 34px;
  border-radius: 0;
}

.specimen {
  border-top: 1px solid var(--peach);
}

.specimen > div {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  align-items: baseline;
  gap: 24px;
  padding: 36px 0;
  border-bottom: 1px solid var(--peach);
}

.sample-display {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 64px;
  line-height: 1.05;
  letter-spacing: 0.01em;
}

.sample-names {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 56px;
  line-height: 1.1;
}

.sample-names .amp {
  color: var(--coral);
}

.sample-label {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.2em;
}

.sample-body {
  font-size: 18px;
  letter-spacing: 0.03em;
  max-width: 56ch;
}

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

.pill {
  display: inline-block;
  border-radius: 999px;
  padding: 15px 34px;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.03em;
}

.pill-outline {
  border: 2px solid var(--coral);
  color: var(--ink);
}

.pill-ground {
  display: inline-block;
  background: var(--coral);
  padding: 20px 24px;
}

.pill-blush {
  border: 2px solid var(--blush);
  background: var(--blush);
  color: var(--ink);
}

/* The system section hands off to the brand page that specifies it. */
.systemlink {
  margin-top: 44px;
  font-size: 18px;
  line-height: 1.5;
}

.post {
  display: grid;
  grid-template-columns: calc(var(--tile-w) * 1px) minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  column-gap: var(--rail-gap);
  row-gap: 32px;
  align-items: start;
  padding: 72px 0 80px;
  border-bottom: 1px solid var(--peach);
}

.post:first-of-type {
  padding-top: 0;
}

.post-head {
  grid-column: 2;
  grid-row: 1;
}

.post-art {
  grid-column: 1;
  grid-row: 1 / span 3;
  min-width: 0;
}

.post-note {
  grid-column: 2;
  grid-row: 2;
}

.post > .filelink {
  grid-column: 2;
  grid-row: 3;
  align-self: end;
}

.post-head h3 {
  margin-top: 18px;
  font-family: var(--serif);
  font-weight: 300;
  font-size: 44px;
  line-height: 1.1;
  letter-spacing: 0.01em;
}

.purpose {
  margin-top: 16px;
  font-size: 19px;
  line-height: 1.6;
}

.post-wide {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto;
}

.post-wide .post-head,
.post-wide .post-art,
.post-wide .post-note {
  grid-column: 1;
  grid-row: auto;
}

.frame {
  position: relative;
  width: calc(var(--tile-w) * 1px);
  overflow: hidden;
  background: var(--blush);
  outline: 1px solid var(--peach);
  outline-offset: -1px;
}

.frame-feed {
  aspect-ratio: 1080 / 1350;
}

.frame-story {
  aspect-ratio: 1080 / 1920;
}

.frame iframe {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  border: 0;
  width: 1080px;
  transform-origin: top left;
  transform: scale(calc(var(--tile-w) / 1080));
  pointer-events: none;
}

.frame-feed iframe {
  height: 1350px;
}

.frame-story iframe {
  height: 1920px;
}

.filelink {
  font-size: 16px;
  line-height: 1.5;
}

.strip {
  display: flex;
  gap: 24px;
  width: 100%;
  overflow-x: auto;
  padding: 0 0 20px;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
}

.strip-item {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

.strip-item figcaption {
  margin-top: 18px;
  font-size: 16px;
  line-height: 1.5;
}

.strip-item .framelabel {
  display: block;
  font-weight: 600;
  letter-spacing: 0.2em;
  margin-bottom: 8px;
}

.caption {
  max-width: 58ch;
  padding-left: 24px;
  border-left: 2px solid var(--coral);
}

.caption .label {
  display: block;
  margin-bottom: 14px;
}

.caption p {
  font-size: 19px;
  line-height: 1.6;
}

.caption .tags {
  margin-top: 12px;
  letter-spacing: 0.06em;
}

.colophon {
  position: relative;
  z-index: 1;
  margin-top: 104px;
  padding-top: 28px;
  border-top: 2px solid var(--coral);
  max-width: 68ch;
}

@media (max-width: 1199px) {
  :root {
    --tile-w: 520;
    --rail-gap: 48px;
  }
}

@media (max-width: 1023px) {
  :root {
    --tile-w: 620;
  }

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

  .wordmark {
    font-size: clamp(64px, 12vw, 120px);
  }

  .post {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    row-gap: 28px;
  }

  .post-head,
  .post-art,
  .post-note,
  .post > .filelink {
    grid-column: 1;
    grid-row: auto;
    align-self: start;
  }
}

@media (max-width: 759px) {
  :root {
    --tile-w: 660;
  }

  .sheet {
    padding: 0 20px 320px;
  }

  .masthead {
    padding: 270px 0 64px;
  }

  .bleed-a {
    top: -55px;
    left: -60px;
    width: 320px;
  }

  .bleed-b {
    right: -120px;
    bottom: -16px;
    width: 340px;
  }

  section {
    padding-top: 80px;
  }

  .section-head {
    flex-direction: column;
    gap: 12px;
    margin-bottom: 40px;
  }

  .section-head h2 {
    font-size: 40px;
  }

  .brief-rows {
    grid-template-columns: minmax(0, 1fr);
  }

  .brief-rows .label {
    padding-bottom: 0;
    border-bottom: 0;
  }

  .brief-rows .value {
    padding-top: 10px;
    font-size: 19px;
  }

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

  .specimen > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .sample-display {
    font-size: 44px;
  }

  .sample-names {
    font-size: 40px;
  }

  .post {
    padding: 56px 0 64px;
  }

  .post-head h3 {
    font-size: 34px;
  }

  .colophon {
    margin-top: 80px;
  }
}

@media (max-width: 699px) {
  :root {
    --tile-w: 600;
  }
}

@media (max-width: 639px) {
  :root {
    --tile-w: 540;
  }
}

@media (max-width: 579px) {
  :root {
    --tile-w: 480;
  }
}

@media (max-width: 519px) {
  :root {
    --tile-w: 420;
  }
}

@media (max-width: 459px) {
  :root {
    --tile-w: 390;
  }
}

@media (max-width: 429px) {
  :root {
    --tile-w: 350;
  }
}

@media (max-width: 389px) {
  :root {
    --tile-w: 335;
  }
}

@media (max-width: 374px) {
  :root {
    --tile-w: 300;
  }
}

@media (max-width: 339px) {
  :root {
    --tile-w: 280;
  }
}

@media (min-width: 1200px) {
  .post-loud {
    --tile-w: 640;
  }
}

/* The rule, stood on end. See the Scroll note in the contract above. */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

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

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

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

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

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

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

@supports not selector(::-webkit-scrollbar) {
  html {
    scrollbar-color: var(--coral) var(--blush);
    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 peach hairline that divides the sheet, and coral underlining the page you are on, which is the one job coral already has here.
   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(--blush);
  border-bottom: 1px solid var(--peach);
  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(--ink);
  font-weight: 500;
  letter-spacing: 0.03em;
  text-decoration: none;
}

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

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

.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 20px;
  }

  .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;
  }
}