/* ==========================================================================
   mailchimp.com — Instagram post system (1080×1350)
   Shared tokens + components. Posts only carry content.

   Type substitutions (measured families are self-hosted / commercial):
   - "Graphik Web"  -> Archivo        (closest Google grotesque: same
                        near-neutral skeleton, tight apertures, wide weights)
   - "Means Web"    -> Source Serif 4 (closest Google old-style text serif:
                        low contrast, sturdy slabby serifs, editorial voice)
   ========================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600&family=Source+Serif+4:opsz,wght@8..60,400;8..60,600&display=swap");

:root {
  --ink: #231e15;        /* mailchimp Cavern — measured secondary */
  --paper: #ffffff;
  --yellow: #ffe01b;     /* measured primary */
  --yellow-press: oklch(0.88 0.17 96);  /* hover/press: L −0.09 from --yellow */
  --mist: #f0f4f6;       /* measured accent */
  --grey: #575757;       /* measured text neutral */
  --line: #bcbab6;

  --display: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --ui: "Archivo", "Helvetica Neue", Helvetica, sans-serif;

  --pad: 72px;
}

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

body {
  background: #e9e9e7;
  font-family: var(--ui);
  -webkit-font-smoothing: antialiased;
}

/* ---------- root canvas ---------------------------------------------- */
.post {
  width: 1080px;
  height: 1350px;
  position: relative;
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
  display: flex;
  flex-direction: column;
}

/* ---------- brand lock (identical on all three posts) ----------------- */
.brandbar {
  flex: none;
  height: 132px;
  padding: 60px var(--pad) 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.logo { width: 100px; height: auto; display: block; }
.brandbar__tag {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grey);
  padding-top: 8px;
}

/* ---------- content column -------------------------------------------- */
.content {
  flex: 1 1 auto;
  min-height: 0;
  padding: 0 var(--pad);
  display: flex;
  flex-direction: column;
}
.content--tight { padding-bottom: 0; }

.kicker {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
}
.kicker::after {
  content: "";
  display: block;
  width: 56px;
  height: 6px;
  background: var(--yellow);
  margin-top: 14px;
}

.h-display {
  font-family: var(--display);
  font-size: 104px;
  line-height: 1.06;
  letter-spacing: -0.025em;
  font-weight: 400;
  max-width: 15ch;
}
.h-lead {
  font-family: var(--display);
  font-size: 76px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 400;
  max-width: 17ch;
}
.lead {
  font-size: 30px;
  line-height: 1.5;
  color: var(--grey);
  max-width: 46ch;
}
.lead strong { color: var(--ink); font-weight: 600; }

.note {
  font-size: 17px;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--grey);
  max-width: 60ch;
}

/* ---------- images ----------------------------------------------------- */
.imgband {
  flex: none;
  position: relative;
  width: 1080px;
  overflow: hidden;
  background: var(--mist);
}
.imgband > img,
.card-img > img,
.grid-2 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* one-directional scrim, sits above the photo, below any overlay text */
.imgband__scrim {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 52%;
  z-index: 2;
  background: linear-gradient(180deg, rgba(35, 30, 21, 0) 0%, rgba(35, 30, 21, 0.72) 100%);
  pointer-events: none;
}
.chip {
  position: absolute;
  left: 40px;
  bottom: 40px;
  z-index: 3;
  background: var(--yellow);
  color: var(--ink);
  border-radius: 4px;
  padding: 16px 24px;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: 0.02em;
  box-shadow: 0 8px 24px rgba(35, 30, 21, 0.28);
}

.card-img {
  border-radius: 4px;
  overflow: hidden;
  background: var(--mist);
}
.grid-2 {
  flex: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 1080px;
  background: var(--paper);
}
.grid-2 > figure { position: relative; overflow: hidden; background: var(--mist); }

/* honest empty slot — only when no real file fits */
.ph-img {
  background: var(--mist);
  border: 1px dashed var(--line);
  border-radius: 4px;
  display: grid;
  place-items: center;
  color: var(--grey);
  font-size: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---------- proof / stats --------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: 520px 1fr;
  gap: 44px;
  align-items: stretch;
}
.stats { display: flex; flex-direction: column; justify-content: space-between; gap: 28px; }
.stat { border-top: 2px solid var(--ink); padding-top: 20px; }
.stat__num {
  font-family: var(--display);
  font-size: 88px;
  line-height: 1;
  letter-spacing: -0.02em;
}
.stat__num small {
  font-family: var(--ui);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grey);
  display: block;
  margin-bottom: 10px;
}
.stat__label {
  font-size: 21px;
  line-height: 1.45;
  color: var(--grey);
  margin-top: 12px;
}

/* ---------- CTA (one primary per post) --------------------------------- */
.cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  align-self: flex-start;
  min-height: 76px;
  padding: 0 44px;
  background: var(--yellow);
  color: var(--ink);
  border: 0;
  border-radius: 4px;
  font-family: var(--ui);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 200ms cubic-bezier(0, 0, 0, 1);
}
.cta:hover { background: var(--yellow-press); color: var(--ink); }
.cta:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
.cta__arrow { font-size: 24px; line-height: 1; }

.link-note {
  font-size: 21px;
  color: var(--grey);
  letter-spacing: 0.01em;
}

/* ---------- footer bar (identical on all three posts) ------------------ */
.footer {
  flex: none;
  height: 88px;
  background: var(--ink);
  color: var(--paper);
  padding: 0 var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.footer__right { color: #d8d5cf; }