/* ===========================================================================
   AI Marketing Director — cornerstone white paper
   Route: /ai-marketing-director/
   Layout: layouts/_default/ai-marketing-director.html

   Every rule is scoped under .amd-paper. Nothing here is global, and nothing
   depends on the theme bundle, so the paper renders identically whether or not
   PurgeCSS has been through the rest of the site.

   TYPE SYSTEM — editorial/newspaper, not SaaS landing page.
     Sebino     → headings and body. Brand rule; also enforced site-wide by the
                  `font-family: Sebino !important` block in master.css, which is
                  why several rules below carry !important to reclaim the
                  accents. Do not remove them.
     PT Serif   → editorial accents only: the deck, the drop cap, section
                  numerals, pull quotes, key takeaways. This is the "approved
                  editorial accent use" from the brand rules, and it is what
                  gives the page its broadsheet feel.

   One accent (#FF8833), used sparingly. Hairline rules instead of cards.
   No shadows, no icon noise, no gradients.
   =========================================================================== */

.amd-paper {
  --amd-fg: #1a1a1a;
  --amd-fg-soft: #33383e;
  --amd-fg-mute: #6b7178;
  --amd-rule: #e0e2e6;
  --amd-rule-strong: #1a1a1a;
  --amd-accent: #ff8833;
  --amd-heading: #333333;
  --amd-takeaway-bg: #faf7f3;

  --amd-serif: 'PT Serif', Georgia, 'Times New Roman', serif;
  --amd-measure: 780px; /* centered article column */

  max-width: 1180px;
  margin: 0 auto;
  padding: 56px 24px 120px;
  color: var(--amd-fg);
  -webkit-font-smoothing: antialiased;
}

/* ── HERO ─────────────────────────────────────────────────────────────────── */

/* 16:9 banner, full width of the article container. aspect-ratio holds the box
   before the file loads, so nothing below it shifts. */
.amd-paper-hero-figure {
  margin: 0 0 44px;
  padding: 0;
  line-height: 0;
}

.amd-paper-hero-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--amd-takeaway-bg);
}

.amd-paper-hero-caption {
  margin: 8px 0 0;
  padding: 0;
  font-size: 0.6875rem;
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: #8a9099;
  text-align: center;
}

.amd-paper-hero {
  max-width: var(--amd-measure);
  margin: 0 auto;
  text-align: center;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--amd-rule);
}

.amd-paper .amd-paper-title {
  font-size: clamp(2.4rem, 5.4vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-weight: 700;
  color: var(--amd-heading);
  margin: 0 0 18px;
}

/* The deck. Serif italic — the one place the page announces it is a paper. */
.amd-paper .amd-paper-subtitle {
  font-family: var(--amd-serif) !important;
  font-size: clamp(1.1875rem, 2.4vw, 1.5rem);
  font-style: italic;
  line-height: 1.35;
  font-weight: 400;
  color: var(--amd-fg-soft);
  margin: 0 auto 28px;
  max-width: 620px;
}

.amd-paper .amd-paper-lede {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--amd-fg-mute);
  max-width: 640px;
  margin: 0 auto 30px;
}

/* Byline comes from partials/byline.html (.mf-byline), shared with Signals.
   Only positioning is adjusted here — the hero is centred, the partial is a
   left-aligned flex row everywhere else. Type, weight and colour are left to
   the shared component so the two stay in sync. */
.amd-paper-hero .mf-byline {
  justify-content: center;
  margin: 0;
}

/* ── BODY GRID ────────────────────────────────────────────────────────────── */

.amd-paper-body {
  display: grid;
  grid-template-columns: 1fr;
  margin-top: 56px;
}

.amd-paper-main {
  min-width: 0;
  max-width: var(--amd-measure);
  margin: 0 auto;
  width: 100%;
}

/* ── CONTENTS ─────────────────────────────────────────────────────────────── */

.amd-paper-toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

.amd-paper-toc li {
  margin: 0 0 12px;
  line-height: 1.35;
}

.amd-paper-toc a {
  font-size: 0.8125rem;
  color: var(--amd-fg-mute);
  text-decoration: none;
  border-left: 2px solid transparent;
  padding-left: 13px;
  display: block;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.amd-paper-toc a:hover,
.amd-paper-toc a:focus-visible {
  color: var(--amd-fg);
  border-left-color: var(--amd-accent);
}

.amd-paper-rail--desktop { display: none; }

.amd-paper-toc--mobile {
  border-top: 2px solid var(--amd-rule-strong);
  border-bottom: 1px solid var(--amd-rule);
  margin: 0 0 48px;
}

.amd-paper-toc--mobile > summary {
  cursor: pointer;
  padding: 14px 2px;
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amd-fg);
  list-style: none;
}

.amd-paper-toc--mobile > summary::-webkit-details-marker { display: none; }

.amd-paper-toc--mobile > summary::after {
  content: "+";
  float: right;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1;
  color: var(--amd-accent);
}

.amd-paper-toc--mobile[open] > summary::after { content: "–"; }

.amd-paper-toc--mobile > ol { padding: 2px 0 20px; }

/* Desktop: article + sticky right rail (contents, then Signals index).
   Body is max-content wide so unused free space cannot sit past the rail. */
@media (min-width: 1024px) {
  .amd-paper {
    max-width: calc(var(--amd-measure) + 40px + 260px + 48px);
  }

  .amd-paper-body {
    display: grid;
    grid-template-columns: var(--amd-measure) 260px;
    column-gap: 40px;
    justify-content: start;
    justify-items: stretch;
    width: max-content;
    max-width: 100%;
    margin: 0;
  }

  .amd-paper-main {
    margin: 0;
    max-width: none;
    width: var(--amd-measure);
  }

  .amd-paper-rail--desktop {
    display: block;
    position: sticky;
    top: 120px;
    align-self: start;
    width: 260px;
  }

  .amd-paper-toc-title,
  .amd-paper-signals-title {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--amd-fg);
    margin: 0 0 18px;
    padding: 0 0 0 13px;
  }

  .amd-paper-toc {
    padding-bottom: 22px;
    margin-bottom: 22px;
    border-bottom: 1px solid var(--amd-rule);
  }

  .amd-paper-toc--mobile { display: none; }

  .amd-paper-signals-list {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .amd-paper-signals-list > li {
    margin: 0 0 14px;
  }

  .amd-paper-signals-item {
    display: grid;
    grid-template-columns: 75px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    text-decoration: none;
    color: var(--amd-fg-mute);
  }

  .amd-paper-signals-item:hover,
  .amd-paper-signals-item:focus-visible {
    color: var(--amd-fg);
  }

  .amd-paper-signals-thumb {
    display: block;
    width: 75px;
    height: 75px;
    object-fit: cover;
    background: var(--amd-takeaway-bg);
    flex-shrink: 0;
  }

  .amd-paper-signals-thumb--empty {
    border: 1px solid var(--amd-rule);
  }

  .amd-paper-signals-label {
    font-size: 0.75rem;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .amd-paper-signals-more {
    display: inline-block;
    margin-top: 8px;
    padding-left: 0;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--amd-fg);
    text-decoration: none;
  }

  .amd-paper-signals-more:hover,
  .amd-paper-signals-more:focus-visible {
    color: var(--amd-accent);
  }
}

/* Anchor targets clear the fixed nav. */
.amd-paper-prose h2[id],
.amd-paper-prose h3[id] { scroll-margin-top: 120px; }

/* ── PROSE ────────────────────────────────────────────────────────────────── */

.amd-paper-prose { max-width: var(--amd-measure); }

/* Section rule: a heavy hairline above every H2, the way a broadsheet breaks
   between departments. */
.amd-paper-prose > h2 {
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--amd-heading);
  margin: 96px 0 28px;
  padding-top: 34px;
  border-top: 2px solid var(--amd-rule-strong);
}

.amd-paper-prose > h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* Section numeral — circle sized from the H2; digit sized separately so
   font-size changes do not resize the ring. */
.amd-paper-prose .amd-secnum {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  /* 1em = heading size (inherited); 1.645em = prior 2.35 × 0.7 ring */
  width: 1.645em;
  height: 1.645em;
  border: calc(1.5px + 0.5pt) solid #000;
  border-radius: 50%;
  vertical-align: 0.12em;
  margin-right: 0.55em;
}

.amd-paper-prose .amd-secnum__n {
  font-family: var(--amd-serif) !important;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  color: #000;
  letter-spacing: 0;
}

.amd-paper-prose h3 {
  line-height: 1.3;
  font-weight: 700;
  color: var(--amd-heading);
  margin: 54px 0 16px;
}

.amd-paper-prose p {
  font-size: calc(1.125rem - 1pt);
  line-height: 1.78;
  color: var(--amd-fg-soft);
  margin: 0 0 26px;
}

.amd-paper-prose strong {
  color: var(--amd-fg);
  font-weight: 700;
}

.amd-paper-prose em { font-style: italic; }

.amd-paper-prose ul {
  margin: 0 0 28px;
  padding-left: 22px;
}

.amd-paper-prose li {
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--amd-fg-soft);
  margin-bottom: 10px;
}

.amd-paper-prose a {
  color: var(--amd-fg);
  text-decoration: underline;
  text-decoration-color: var(--amd-accent);
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}

.amd-paper-prose a:hover,
.amd-paper-prose a:focus-visible { color: var(--amd-accent); }

/* ── OPENING PARAGRAPH + DROP CAP ─────────────────────────────────────────── */

.amd-paper-prose .amd-opener {
  font-size: calc(1.1875rem - 1pt);
  line-height: 1.72;
  color: var(--amd-fg);
}

.amd-paper-prose .amd-opener::first-letter {
  font-family: var(--amd-serif) !important;
  font-size: 3.9em;
  line-height: 0.82;
  font-weight: 700;
  float: left;
  margin: 0.06em 0.1em 0 0;
  color: var(--amd-heading);
}

/* ── PULL QUOTES ──────────────────────────────────────────────────────────── */
/* Broadsheet treatment: serif, hairline rules top and bottom, an accent tick.
   No quotation marks, no tinted card, no italics-plus-border pileup. */

.amd-paper-prose .amd-pull {
  margin: 52px 0;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--amd-rule-strong);
  border-bottom: 1px solid var(--amd-rule);
  background: none;
  quotes: none;
  position: relative;
}

.amd-paper-prose .amd-pull::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 56px;
  height: 3px;
  background: var(--amd-accent);
}

.amd-paper-prose .amd-pull,
.amd-paper-prose .amd-pull p {
  font-family: var(--amd-serif) !important;
  font-size: clamp(1.375rem, 2.9vw, 1.75rem);
  line-height: 1.38;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--amd-heading);
}

.amd-paper-prose .amd-pull { padding: 30px 0 32px; }
.amd-paper-prose .amd-pull p { margin: 0; }

/* ── KEY TAKEAWAY ─────────────────────────────────────────────────────────── */
/* Distinct from a pull quote on purpose: a pull quote echoes the prose, a
   takeaway adds a conclusion. Warm tint, accent label, serif body. */

.amd-paper-prose .amd-takeaway {
  margin: 56px 0;
  padding: 30px 34px 32px;
  background: var(--amd-takeaway-bg);
  border-left: 3px solid var(--amd-accent);
}

.amd-paper-prose .amd-takeaway .amd-takeaway-label {
  font-family: 'Sebino', sans-serif !important;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--amd-accent);
  margin: 0 0 12px;
  line-height: 1;
}

.amd-paper-prose .amd-takeaway p:not(.amd-takeaway-label) {
  font-family: var(--amd-serif) !important;
  font-size: 1.1875rem;
  line-height: 1.6;
  color: var(--amd-heading);
  margin: 0;
}

/* ── GLOSSARY ─────────────────────────────────────────────────────────────── */

.amd-paper-prose .amd-glossary {
  margin: 0;
  padding: 0;
}

.amd-paper-prose .amd-glossary dt {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--amd-heading);
  margin: 34px 0 9px;
  padding-top: 26px;
  border-top: 1px solid var(--amd-rule);
}

.amd-paper-prose .amd-glossary dt:first-of-type {
  margin-top: 10px;
  padding-top: 0;
  border-top: 0;
}

.amd-paper-prose .amd-glossary dd {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--amd-fg-soft);
}

/* ── COMPARISON TABLE ─────────────────────────────────────────────────────── */
/* Added for the AI Clones paper; no earlier paper contains a table, so these
   rules are additive only. Wrap the table in .amd-table-wrap so a wide table
   scrolls inside its own box instead of forcing the page to scroll sideways —
   the prose column is fixed at --amd-measure and cannot absorb the overflow. */

.amd-paper-prose .amd-table-wrap {
  margin: 44px 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-top: 2px solid var(--amd-rule-strong);
}

.amd-paper-prose .amd-table-wrap table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
}

.amd-paper-prose .amd-table-wrap th,
.amd-paper-prose .amd-table-wrap td {
  text-align: left;
  vertical-align: top;
  padding: 14px 18px 14px 0;
  border-bottom: 1px solid var(--amd-rule);
}

.amd-paper-prose .amd-table-wrap th {
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--amd-heading);
  letter-spacing: 0.01em;
}

.amd-paper-prose .amd-table-wrap td {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--amd-fg-soft);
}

/* The last column is the payoff column on every table in these papers — the
   AI Clone behaviour the two columns before it are being measured against. */
.amd-paper-prose .amd-table-wrap td:last-child {
  color: var(--amd-fg);
  font-weight: 700;
  padding-right: 0;
}

.amd-paper-prose .amd-table-wrap th:last-child { padding-right: 0; }

/* ── FAQ ──────────────────────────────────────────────────────────────────── */

.amd-faq {
  border-top: 2px solid var(--amd-rule-strong);
  margin-top: 10px;
}

.amd-faq-item { border-bottom: 1px solid var(--amd-rule); }

.amd-faq-item > summary {
  cursor: pointer;
  list-style: none;
  padding: 22px 44px 22px 0;
  position: relative;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.45;
  color: var(--amd-heading);
}

.amd-faq-item > summary::-webkit-details-marker { display: none; }

.amd-faq-item > summary::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-top: -7px;
  border-right: 2px solid var(--amd-accent);
  border-bottom: 2px solid var(--amd-accent);
  transform: rotate(45deg);
  transition: transform 0.18s ease;
}

.amd-faq-item[open] > summary::after {
  transform: rotate(-135deg);
  margin-top: -2px;
}

.amd-faq-answer { padding: 0 44px 24px 0; }

.amd-paper .amd-faq-answer p {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--amd-fg-soft);
}

/* ── FOCUS / MOTION ───────────────────────────────────────────────────────── */

.amd-paper a:focus-visible,
.amd-paper summary:focus-visible {
  outline: 2px solid var(--amd-accent);
  outline-offset: 3px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .amd-paper * {
    transition: none !important;
    animation: none !important;
  }
}

/* ── SMALL SCREENS ────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
  .amd-paper { padding: 28px 20px 80px; }
  .amd-paper-hero-figure { margin-bottom: 30px; }
  /* Portrait mobile crop (aim-mo.webp, 791×906): don't force the desktop 16:9.
     Scoped to --mo, which the layout adds only when the page actually declares
     a hero_image_mobile. Unscoped, this letterboxed every paper WITHOUT a -mo
     crop onto a black field on phones — their 16:9 source was being contained
     inside a portrait box. Those papers now keep 16:9 cover, which is correct
     for a 16:9 source. */
  .amd-paper-hero-img--mo {
    aspect-ratio: 791 / 906;
    object-fit: contain;
    background: #0a0a0a;
  }
  .amd-paper-body { margin-top: 36px; }

  .amd-paper-prose > h2 { margin-top: 64px; padding-top: 28px; }
  .amd-paper-prose h3 { margin-top: 42px; }
  .amd-paper-prose p { font-size: calc(1.0625rem - 1pt); line-height: 1.72; }
  .amd-paper-prose li { font-size: 1.0625rem; line-height: 1.72; }

  .amd-paper-prose .amd-opener { font-size: calc(1.1875rem - 1pt); }

  .amd-paper-prose .amd-pull { margin: 38px 0; padding: 24px 0 26px; }
  .amd-paper-prose .amd-takeaway { margin: 40px 0; padding: 24px 22px 26px; }
  .amd-paper-prose .amd-table-wrap { margin: 34px 0; }
  .amd-paper-prose .amd-table-wrap td { font-size: 0.9375rem; }
  .amd-paper-prose .amd-opener::first-letter { font-size: 3.4em; }
}

/* ── HEADING SIZE ─────────────────────────────────────────────────────────── */
/* Must live in @layer site: global h2/h3 rules use !important inside that layer,
   and for !important the layer order is reversed — an unlayered !important is the
   weakest author declaration. This file loads after site-custom (baseof.html),
   so these layered rules win on specificity + source order.
 *
 * Do not "simplify" the desktop selectors — every class is load-bearing. */
@layer site {
  .amd-paper .amd-paper-prose > h2 {
    font-size: clamp(1.4rem, 2.72vw, 1.92rem) !important;
  }

  /* H3 = page H2 minus 2pt */
  .amd-paper .amd-paper-prose h3 {
    font-size: calc(clamp(1.4rem, 2.72vw, 1.92rem) - 2pt) !important;
  }

  /* Digit +1.5pt over the prior 0.7em size; circle box stays on .amd-secnum */
  .amd-paper .amd-paper-prose .amd-secnum__n {
    font-size: calc(0.7em + 1.5pt) !important;
  }

  /* Body paragraphs −1pt; list items keep their original size */
  .amd-paper .amd-paper-prose p:not(.amd-opener) {
    font-size: calc(1.125rem - 1pt) !important;
  }

  .amd-paper .amd-paper-prose li {
    font-size: 1.125rem !important;
  }

  .amd-paper .amd-paper-prose .amd-opener {
    font-size: calc(1.1875rem - 1pt) !important;
  }

  @media (max-width: 767px) {
    .amd-paper .amd-paper-prose p:not(.amd-opener) {
      font-size: calc(1.0625rem - 1pt) !important;
    }

    .amd-paper .amd-paper-prose li {
      font-size: 1.0625rem !important;
    }
  }

  @media (min-width: 992px) {
    body.mf-typescale.mf-typescale .amd-paper .amd-paper-prose > h2 {
      font-size: calc(var(--type-h2) * 0.8) !important;
    }

    body.mf-typescale.mf-typescale .amd-paper .amd-paper-main .amd-paper-prose h3 {
      font-size: calc(var(--type-h2) * 0.8 - 2pt) !important;
    }

    body.mf-typescale.mf-typescale .amd-paper .amd-paper-prose .amd-secnum__n {
      font-size: calc(0.7em + 1.5pt) !important;
    }
  }

  @media (min-width: 1024px) {
    .amd-paper .amd-paper-body {
      display: grid !important;
      grid-template-columns: var(--amd-measure) 260px !important;
      width: max-content !important;
      justify-content: start !important;
    }

    .amd-paper .amd-paper-rail--desktop {
      display: block !important;
      width: 260px !important;
    }
  }
}

/* ── DARK MODE ────────────────────────────────────────────────────────────── */
/* The site ships a body.dark theme; keep the paper legible under it. */

body.dark .amd-paper {
  --amd-fg: #f2f3f5;
  --amd-fg-soft: #c9ced4;
  --amd-fg-mute: #9aa1a9;
  --amd-rule: #2c3138;
  --amd-rule-strong: #6d757e;
  --amd-heading: #f6f7f8;
  --amd-takeaway-bg: #17191d;
}