/* The Front Door Problem — publication pages. Scoped to .fd-page.
   Identity taken from the jacket: deep navy, gold, parchment cream. A single
   gold light-line runs the page, the way it falls from the doorway on the cover.
   Architectural restraint, editorial pacing, generous measure. */

.fd-page {
  --fd-navy: #0b1622;
  --fd-navy-2: #0e1a2b;
  --fd-navy-3: #142438;
  --fd-line: #24374f;
  --fd-line-soft: #1b2a3d;

  --fd-gold: #c8973f;
  --fd-gold-soft: #e0bb72;
  --fd-gold-dim: rgba(200, 151, 63, 0.24);

  --fd-cream: #ece3cf;
  --fd-cream-2: #f4eee0;
  --fd-paper-ink: #16202c;
  --fd-paper-muted: #55606d;

  --fd-text: #e7e3d7;
  --fd-body: #b9c2cc;
  --fd-muted: #8b96a3;

  --fd-wrap: 1180px;
  --fd-measure: 68ch;
  --fd-gutter: clamp(20px, 4.4vw, 68px);
  --fd-ease: cubic-bezier(0.16, 1, 0.3, 1);

  --fd-serif: "Cormorant Garamond Variable", "Cormorant Garamond", Georgia, serif;
  --fd-sans: "DM Sans Variable", "DM Sans", Arial, sans-serif;

  background: var(--fd-navy);
  color: var(--fd-body);
  font-family: var(--fd-sans);
  font-size: 17px;
  line-height: 1.75;
  color-scheme: dark;
  isolation: isolate;
  overflow-x: clip;
}

.fd-page *,
.fd-page *::before,
.fd-page *::after {
  box-sizing: border-box;
  min-width: 0;
}
.fd-page ::selection {
  background: var(--fd-gold);
  color: var(--fd-navy);
}
:where(.fd-page) :is(h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol, table) {
  margin: 0;
}
:where(.fd-page) :is(ul, ol) {
  padding: 0;
  list-style: none;
}
:where(.fd-page) a {
  color: inherit;
  text-underline-offset: 4px;
}
.fd-page :is(a, button, summary, input, [tabindex]):focus-visible {
  outline: 2px solid var(--fd-gold);
  outline-offset: 4px;
}
.fd-page [id] {
  scroll-margin-top: 96px;
}
.fd-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.fd-wrap {
  width: 100%;
  max-width: var(--fd-wrap);
  margin-inline: auto;
  padding-inline: var(--fd-gutter);
}

/* ---------------------------------------------------------------- */
/* Spreads                                                           */
/* ---------------------------------------------------------------- */

.fd-spread {
  padding-block: clamp(64px, 9vw, 140px);
  border-top: 1px solid var(--fd-line-soft);
  position: relative;
}
.fd-tone-night {
  background: var(--fd-navy);
}
.fd-tone-deep {
  background: var(--fd-navy-2);
}
.fd-tone-cream {
  background: var(--fd-cream);
  color: var(--fd-paper-ink);
  border-top-color: rgba(22, 32, 44, 0.16);
}

/* the light from the doorway: one gold hairline down the page */
.fd-spread::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--fd-gold-dim) 18%, var(--fd-gold-dim) 82%, transparent);
  pointer-events: none;
  opacity: 0.5;
}
.fd-tone-cream::before {
  background: linear-gradient(to bottom, transparent, rgba(200, 151, 63, 0.3) 18%, rgba(200, 151, 63, 0.3) 82%, transparent);
}
@media (max-width: 900px) {
  .fd-spread::before {
    display: none;
  }
}
.fd-spread > .fd-wrap {
  position: relative;
  z-index: 1;
}

/* ---------------------------------------------------------------- */
/* Type                                                              */
/* ---------------------------------------------------------------- */

.fd-folio {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--fd-gold);
  margin-bottom: 22px;
}
.fd-tone-cream .fd-folio {
  color: #8a6520;
}

.fd-head {
  font-family: var(--fd-serif);
  font-weight: 500;
  font-size: clamp(2.1rem, 4.6vw, 3.6rem);
  line-height: 1.06;
  letter-spacing: -0.012em;
  color: var(--fd-text);
  max-width: 22ch;
  text-wrap: balance;
}
.fd-head-small {
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  max-width: 20ch;
}
.fd-tone-cream .fd-head {
  color: var(--fd-paper-ink);
}

.fd-lede {
  margin-top: 20px;
  font-size: clamp(1.02rem, 1.3vw, 1.18rem);
  line-height: 1.75;
  color: var(--fd-body);
  max-width: 58ch;
}
.fd-tone-cream .fd-lede {
  color: var(--fd-paper-muted);
}

.fd-muted {
  margin-top: 20px;
  font-size: 0.95rem;
  line-height: 1.78;
  color: var(--fd-muted);
  max-width: 62ch;
}
.fd-tone-cream .fd-muted {
  color: var(--fd-paper-muted);
}

.fd-caveat {
  margin-top: 18px;
  font-size: 0.85rem;
  line-height: 1.75;
  color: var(--fd-muted);
  max-width: 68ch;
  padding-left: 16px;
  border-left: 1px solid var(--fd-line);
}
.fd-tone-cream .fd-caveat {
  color: var(--fd-paper-muted);
  border-left-color: rgba(22, 32, 44, 0.2);
}

.fd-rule-close {
  margin-top: clamp(28px, 3.6vw, 48px);
  padding-top: 22px;
  border-top: 3px double var(--fd-gold);
  font-family: var(--fd-serif);
  font-size: clamp(1.3rem, 2.4vw, 1.85rem);
  line-height: 1.28;
  color: var(--fd-text);
  max-width: 46ch;
}
.fd-tone-cream .fd-rule-close {
  color: var(--fd-paper-ink);
}

.fd-statement {
  font-family: var(--fd-serif);
  font-weight: 500;
  font-size: clamp(2.3rem, 6vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--fd-text);
  max-width: 17ch;
  text-wrap: balance;
}

.fd-inline-link {
  color: var(--fd-gold-soft);
  text-decoration-color: var(--fd-gold-dim);
  font-weight: 500;
}
.fd-inline-link:hover {
  color: var(--fd-gold);
}
.fd-tone-cream .fd-inline-link {
  color: #8a6520;
}

.fd-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  background: var(--fd-gold);
  color: var(--fd-navy);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  border: 1px solid var(--fd-gold);
  transition: background 0.2s var(--fd-ease), transform 0.2s var(--fd-ease);
}
.fd-button:hover {
  background: var(--fd-gold-soft);
  border-color: var(--fd-gold-soft);
  transform: translateY(-1px);
}
.fd-button-quiet {
  background: transparent;
  color: var(--fd-gold-soft);
  border-color: var(--fd-gold-dim);
}
.fd-button-quiet:hover {
  background: transparent;
  color: var(--fd-gold);
  border-color: var(--fd-gold);
}
.fd-tone-cream .fd-button-quiet {
  color: #8a6520;
  border-color: rgba(200, 151, 63, 0.5);
}

.fd-text-link {
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--fd-body);
}
.fd-text-link > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--fd-gold-dim);
  transition: color 0.2s var(--fd-ease), border-color 0.2s var(--fd-ease);
}
.fd-text-link:hover > span {
  color: var(--fd-gold-soft);
  border-bottom-color: var(--fd-gold);
}

.fd-inline-cta {
  margin-top: clamp(32px, 4vw, 52px);
}

/* ---------------------------------------------------------------- */
/* Hero                                                              */
/* ---------------------------------------------------------------- */

.fd-hero {
  background:
    radial-gradient(58% 46% at 72% 6%, rgba(200, 151, 63, 0.14), transparent 68%),
    radial-gradient(42% 38% at 12% 96%, rgba(200, 151, 63, 0.07), transparent 70%),
    var(--fd-navy);
  padding-top: clamp(112px, 13vw, 184px);
  padding-bottom: clamp(60px, 8vw, 110px);
  position: relative;
  overflow: hidden;
}
.fd-hero-wrap {
  display: grid;
  gap: clamp(44px, 6vw, 80px);
  align-items: center;
}
@media (min-width: 1040px) {
  .fd-hero-wrap {
    grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
  }
}

.fd-series {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--fd-gold);
  padding-bottom: 18px;
  border-bottom: 1px solid var(--fd-line);
}
.fd-series-sep {
  width: 5px;
  height: 5px;
  transform: rotate(45deg);
  background: var(--fd-gold);
}
.fd-series > span:last-child {
  color: var(--fd-muted);
}

.fd-hero-eyebrow {
  margin-top: 26px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fd-muted);
}
.fd-hero-title {
  margin-top: 14px;
  font-family: var(--fd-serif);
  font-weight: 500;
  font-size: clamp(2.9rem, 7.4vw, 5.6rem);
  line-height: 0.98;
  letter-spacing: -0.024em;
  color: var(--fd-text);
  text-wrap: balance;
}
.fd-hero-sub {
  margin-top: 18px;
  font-family: var(--fd-serif);
  font-size: clamp(1.2rem, 2.3vw, 1.65rem);
  line-height: 1.32;
  color: var(--fd-gold-soft);
  max-width: 40ch;
}
.fd-hero-byline {
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fd-text);
  padding-top: 18px;
  border-top: 1px solid var(--fd-line);
}
.fd-hero-byline > span:last-child {
  color: var(--fd-muted);
  font-weight: 600;
}
.fd-hero-standfirst {
  margin-top: 24px;
  font-size: 1.02rem;
  line-height: 1.78;
  color: var(--fd-body);
  max-width: 56ch;
}
.fd-hero-actions {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 26px;
}
.fd-hero-note {
  margin-top: 16px;
  font-size: 0.84rem;
  color: var(--fd-muted);
}

.fd-hero-jacket {
  max-width: 420px;
  margin-inline: auto;
}
.fd-hero-jacket img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 40px 60px rgba(0, 0, 0, 0.62));
}

/* ---------------------------------------------------------------- */
/* Thesis                                                            */
/* ---------------------------------------------------------------- */

.fd-thesis-lines {
  margin-top: clamp(32px, 4vw, 52px);
  border-top: 1px solid var(--fd-line);
  max-width: 58ch;
}
.fd-thesis-lines > li {
  padding: 15px 0;
  border-bottom: 1px solid var(--fd-line-soft);
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--fd-body);
}
.fd-thesis-close {
  margin-top: 28px;
  font-family: var(--fd-serif);
  font-size: clamp(1.25rem, 2.3vw, 1.7rem);
  line-height: 1.34;
  color: var(--fd-gold-soft);
  max-width: 48ch;
}

/* ---------------------------------------------------------------- */
/* Two-column editorial                                              */
/* ---------------------------------------------------------------- */

.fd-two {
  display: grid;
  gap: 32px;
}
@media (min-width: 900px) {
  .fd-two {
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
    gap: 64px;
    align-items: start;
  }
}
.fd-two-side h2 {
  font-family: var(--fd-serif);
  font-weight: 500;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  line-height: 1.1;
  color: var(--fd-text);
}
.fd-tone-cream .fd-two-side h2 {
  color: var(--fd-paper-ink);
}
.fd-two-main p {
  font-size: 1.02rem;
  line-height: 1.82;
  color: var(--fd-body);
  max-width: var(--fd-measure);
}
.fd-two-main p + p {
  margin-top: 18px;
}

.fd-quote {
  margin: 30px 0 0;
  padding-top: 24px;
  border-top: 3px double var(--fd-gold);
}
.fd-quote p {
  font-family: var(--fd-serif);
  font-size: clamp(1.45rem, 3vw, 2.2rem) !important;
  line-height: 1.24 !important;
  color: var(--fd-gold-soft) !important;
  max-width: 24ch;
  text-wrap: balance;
}
.fd-quote-wide {
  margin-top: clamp(36px, 4.4vw, 56px);
}
.fd-quote-wide p {
  max-width: 34ch;
}
.fd-quote cite {
  display: block;
  margin-top: 18px;
  font-style: normal;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fd-text);
}
.fd-quote cite > span {
  display: block;
  margin-top: 5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: none;
  font-size: 0.82rem;
  color: var(--fd-muted);
}

/* ---------------------------------------------------------------- */
/* Takeaways                                                         */
/* ---------------------------------------------------------------- */

.fd-takeaways {
  margin-top: clamp(32px, 4vw, 52px);
  border-top: 2px solid var(--fd-paper-ink);
}
.fd-takeaways > li {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 22px;
  padding: 22px 0 24px;
  border-bottom: 1px solid rgba(22, 32, 44, 0.16);
}
.fd-takeaway-no {
  font-family: var(--fd-serif);
  font-size: 2.4rem;
  line-height: 0.9;
  color: var(--fd-gold);
}
.fd-takeaways h3 {
  font-family: var(--fd-serif);
  font-weight: 500;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.1;
  color: var(--fd-paper-ink);
}
.fd-takeaways p {
  margin-top: 8px;
  font-size: 0.97rem;
  line-height: 1.75;
  color: var(--fd-paper-muted);
  max-width: 68ch;
}

/* ---------------------------------------------------------------- */
/* Contents                                                          */
/* ---------------------------------------------------------------- */

.fd-contents {
  margin-top: clamp(32px, 4vw, 52px);
  border-top: 1px solid var(--fd-line);
}
.fd-contents > li {
  display: grid;
  gap: 16px 48px;
  padding: 26px 0 30px;
  border-bottom: 1px solid var(--fd-line-soft);
}
@media (min-width: 900px) {
  .fd-contents > li {
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
    align-items: start;
  }
}
.fd-contents-part {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fd-gold);
  margin-bottom: 10px;
}
.fd-contents-head h3 {
  font-family: var(--fd-serif);
  font-weight: 500;
  font-size: clamp(1.6rem, 2.8vw, 2.15rem);
  line-height: 1.1;
  color: var(--fd-text);
}
.fd-contents-head p {
  margin-top: 8px;
  font-size: 0.95rem;
  font-style: italic;
  color: var(--fd-muted);
}
.fd-contents-inside > li {
  position: relative;
  padding: 7px 0 7px 22px;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--fd-body);
}
.fd-contents-inside > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 17px;
  width: 10px;
  height: 1px;
  background: var(--fd-gold-dim);
}

/* ---------------------------------------------------------------- */
/* Two sides                                                         */
/* ---------------------------------------------------------------- */

.fd-sides {
  margin-top: clamp(32px, 4vw, 52px);
  display: grid;
  gap: 28px;
}
@media (min-width: 880px) {
  .fd-sides {
    grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
    gap: 44px;
    align-items: start;
  }
}
.fd-side h3 {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--fd-line);
  margin-bottom: 18px;
}
.fd-side-client h3 {
  color: var(--fd-gold);
}
.fd-side-firm h3 {
  color: var(--fd-muted);
}
.fd-side-client ul > li {
  font-family: var(--fd-serif);
  font-style: italic;
  font-size: clamp(1.25rem, 2.3vw, 1.6rem);
  line-height: 1.34;
  padding: 8px 0;
  color: var(--fd-text);
}
.fd-side-firm ul > li {
  font-size: 0.97rem;
  line-height: 1.6;
  padding: 11px 0;
  color: var(--fd-body);
  border-bottom: 1px solid var(--fd-line-soft);
}
.fd-side-gap {
  display: none;
}
@media (min-width: 880px) {
  .fd-side-gap {
    display: block;
    align-self: stretch;
    background: linear-gradient(to bottom, transparent, var(--fd-gold-dim), transparent);
  }
}

/* ---------------------------------------------------------------- */
/* Doors                                                             */
/* ---------------------------------------------------------------- */

.fd-doors {
  margin-top: clamp(32px, 4vw, 52px);
  display: grid;
  gap: 0;
  border-top: 1px solid var(--fd-line);
}
@media (min-width: 880px) {
  .fd-doors {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.fd-doors > li {
  padding: 30px 26px 34px;
  border-bottom: 1px solid var(--fd-line-soft);
  border-right: 1px solid var(--fd-line-soft);
}
.fd-doors > li:last-child {
  border-right: 0;
}
@media (min-width: 880px) {
  .fd-doors > li:first-child {
    padding-left: 0;
  }
}
.fd-door-glyph {
  display: block;
  width: 54px;
  margin-bottom: 20px;
}
.fd-door-glyph svg {
  display: block;
  width: 100%;
  height: auto;
}
.fd-door-floor {
  stroke: var(--fd-line);
  stroke-width: 1.4;
}
.fd-door-frame {
  fill: none;
  stroke: var(--fd-gold-soft);
  stroke-width: 1.6;
}
.fd-door-light {
  fill: var(--fd-gold);
  opacity: 0.68;
}
.fd-door-handle {
  fill: var(--fd-text);
}
.fd-doors h3 {
  font-family: var(--fd-serif);
  font-weight: 500;
  font-size: clamp(1.55rem, 2.7vw, 2rem);
  line-height: 1.1;
  color: var(--fd-text);
}
.fd-doors p {
  margin-top: 12px;
  font-size: 0.95rem;
  line-height: 1.76;
  color: var(--fd-body);
}

/* ---------------------------------------------------------------- */
/* Question test                                                     */
/* ---------------------------------------------------------------- */

.fd-test {
  margin-top: clamp(30px, 3.6vw, 46px);
  display: grid;
  gap: 0;
  border: 1px solid rgba(22, 32, 44, 0.2);
  background: var(--fd-cream-2);
}
@media (min-width: 760px) {
  .fd-test {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.fd-test > div {
  padding: 24px 26px 28px;
}
.fd-test-keep {
  border-bottom: 1px solid rgba(22, 32, 44, 0.2);
}
@media (min-width: 760px) {
  .fd-test-keep {
    border-bottom: 0;
    border-right: 1px solid rgba(22, 32, 44, 0.2);
  }
}
.fd-test > div > span {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(22, 32, 44, 0.16);
  color: #8a6520;
}
.fd-test-drop > span {
  color: #7a3a32;
}
.fd-test > div > p {
  font-family: var(--fd-serif);
  font-size: 1.3rem;
  line-height: 1.32;
  color: var(--fd-paper-ink);
}
.fd-goodq {
  margin-top: clamp(28px, 3.4vw, 42px);
}
.fd-goodq h3 {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #8a6520;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(22, 32, 44, 0.2);
}
.fd-goodq ul {
  margin-top: 6px;
}
.fd-goodq li {
  padding: 11px 0;
  border-bottom: 1px solid rgba(22, 32, 44, 0.12);
  font-family: var(--fd-serif);
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  line-height: 1.3;
  color: var(--fd-paper-ink);
}

/* ---------------------------------------------------------------- */
/* Scored table                                                      */
/* ---------------------------------------------------------------- */

.fd-scoretable {
  margin-top: clamp(30px, 3.6vw, 46px);
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
.fd-scoretable th,
.fd-scoretable td {
  padding: 14px 16px 14px 0;
  border-bottom: 1px solid var(--fd-line-soft);
  vertical-align: baseline;
}
.fd-scoretable thead th {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fd-gold);
  border-bottom: 1px solid var(--fd-gold-dim);
}
.fd-scoretable tbody th {
  font-family: var(--fd-serif);
  font-weight: 500;
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  line-height: 1.3;
  color: var(--fd-text);
}
.fd-scoretable td {
  width: 132px;
  white-space: nowrap;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  color: var(--fd-muted);
  font-variant-numeric: tabular-nums;
}
.fd-bands {
  margin-top: clamp(28px, 3.4vw, 42px);
  display: grid;
  gap: 0;
  border-top: 1px solid var(--fd-line);
}
@media (min-width: 760px) {
  .fd-bands {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.fd-bands > li {
  padding: 18px 20px 20px;
  border-bottom: 1px solid var(--fd-line-soft);
  border-right: 1px solid var(--fd-line-soft);
}
.fd-bands > li:last-child {
  border-right: 0;
}
@media (min-width: 760px) {
  .fd-bands > li:first-child {
    padding-left: 0;
  }
}
.fd-band-range {
  display: block;
  font-family: var(--fd-serif);
  font-size: 1.8rem;
  line-height: 1;
  color: var(--fd-gold);
  margin-bottom: 10px;
}
.fd-band-body {
  display: block;
  font-size: 0.93rem;
  line-height: 1.66;
  color: var(--fd-body);
}

/* ---------------------------------------------------------------- */
/* Worksheet                                                         */
/* ---------------------------------------------------------------- */

.fd-worksheet {
  margin-top: clamp(30px, 3.6vw, 46px);
  border-top: 1px solid var(--fd-gold-dim);
}
.fd-worksheet > li {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 96px;
  gap: 18px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--fd-line-soft);
}
.fd-worksheet-no {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--fd-gold);
  font-variant-numeric: tabular-nums;
}
.fd-worksheet-row {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--fd-body);
}
.fd-worksheet-blank {
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--fd-line) 0 6px, transparent 6px 12px);
}
.fd-worksheet-total {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 3px double var(--fd-gold);
  font-family: var(--fd-serif);
  font-size: clamp(1.25rem, 2.3vw, 1.7rem);
  color: var(--fd-text);
}

/* ---------------------------------------------------------------- */
/* Pair: stack and AI                                                */
/* ---------------------------------------------------------------- */

.fd-pair {
  display: grid;
  gap: 44px;
}
@media (min-width: 940px) {
  .fd-pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 64px;
    align-items: start;
  }
}
.fd-pair p {
  margin-top: 16px;
  font-size: 0.98rem;
  line-height: 1.78;
  color: var(--fd-paper-muted);
  max-width: 54ch;
}
.fd-keep {
  margin-top: 20px;
  border-top: 2px solid var(--fd-paper-ink);
}
.fd-keep > li {
  padding: 11px 0;
  border-bottom: 1px solid rgba(22, 32, 44, 0.14);
  font-family: var(--fd-serif);
  font-size: 1.28rem;
  color: var(--fd-paper-ink);
}
.fd-sequence {
  margin-top: 20px;
  counter-reset: fdseq;
}
.fd-sequence > li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 14px;
  align-items: baseline;
  padding: 11px 0;
  border-bottom: 1px solid rgba(22, 32, 44, 0.14);
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--fd-paper-ink);
}
.fd-sequence > li > span {
  font-family: var(--fd-serif);
  font-size: 1.35rem;
  color: #8a6520;
}

/* ---------------------------------------------------------------- */
/* Scorecard                                                         */
/* ---------------------------------------------------------------- */

.fd-scorecard {
  margin-top: clamp(30px, 3.6vw, 46px);
  border-top: 1px solid var(--fd-gold-dim);
  max-width: 78ch;
}
.fd-scorecard > li {
  border-bottom: 1px solid var(--fd-line-soft);
}
.fd-scorecard label {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  padding: 15px 0;
  cursor: pointer;
}
.fd-scorecard input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.fd-scorecard-box {
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--fd-line);
  position: relative;
  transition: border-color 0.18s var(--fd-ease), background 0.18s var(--fd-ease);
}
.fd-scorecard label:hover .fd-scorecard-box {
  border-color: var(--fd-gold);
}
.fd-scorecard input:checked + .fd-scorecard-box {
  background: var(--fd-gold);
  border-color: var(--fd-gold);
}
.fd-scorecard input:checked + .fd-scorecard-box::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 5px;
  width: 9px;
  height: 4px;
  border-left: 2px solid var(--fd-navy);
  border-bottom: 2px solid var(--fd-navy);
  transform: rotate(-45deg);
}
.fd-scorecard input:focus-visible + .fd-scorecard-box {
  outline: 2px solid var(--fd-gold);
  outline-offset: 3px;
}
.fd-scorecard-text {
  font-family: var(--fd-serif);
  font-size: clamp(1.15rem, 2.1vw, 1.45rem);
  line-height: 1.32;
  color: var(--fd-text);
}
.fd-scorecard input:checked ~ .fd-scorecard-text {
  color: var(--fd-muted);
}
.fd-scorecard-tally {
  margin-top: 22px;
  padding: 15px 20px;
  border: 1px solid var(--fd-gold-dim);
  background: rgba(200, 151, 63, 0.07);
  font-size: 0.97rem;
  line-height: 1.68;
  color: var(--fd-text);
  max-width: 66ch;
}

/* ---------------------------------------------------------------- */
/* Author                                                            */
/* ---------------------------------------------------------------- */

.fd-author-role {
  margin-top: 10px;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--fd-muted);
}
.fd-author-facts {
  border-top: 1px solid var(--fd-line);
}
.fd-author-facts > li {
  padding: 13px 0;
  border-bottom: 1px solid var(--fd-line-soft);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--fd-body);
}

/* ---------------------------------------------------------------- */
/* Get it                                                            */
/* ---------------------------------------------------------------- */

.fd-getit {
  background:
    radial-gradient(60% 50% at 20% 10%, rgba(200, 151, 63, 0.14), transparent 70%),
    var(--fd-navy-3);
  padding-block: clamp(60px, 8vw, 116px);
  border-top: 1px solid var(--fd-line);
}
.fd-getit-grid {
  display: grid;
  gap: 40px;
  align-items: center;
}
@media (min-width: 940px) {
  .fd-getit-grid {
    grid-template-columns: minmax(0, 0.5fr) minmax(0, 1fr);
    gap: 64px;
  }
}
/* The jacket is dark navy on a dark band, so it needs an edge and a plinth of
   light behind it or it dissolves into the section. */
.fd-getit-cover {
  max-width: 300px;
  position: relative;
}
.fd-getit-cover::before {
  content: "";
  position: absolute;
  inset: -12% -16% -8%;
  background: radial-gradient(58% 52% at 50% 46%, rgba(200, 151, 63, 0.26), transparent 72%);
  pointer-events: none;
}
.fd-getit-cover img {
  display: block;
  position: relative;
  width: 100%;
  height: auto;
  border: 1px solid rgba(200, 151, 63, 0.42);
  box-shadow: 0 30px 56px -24px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(11, 22, 34, 0.9);
}
.fd-getit h2 {
  font-family: var(--fd-serif);
  font-weight: 500;
  font-size: clamp(2.2rem, 4.6vw, 3.4rem);
  line-height: 1.04;
  color: var(--fd-text);
}
.fd-getit-sub {
  margin-top: 14px;
  font-family: var(--fd-serif);
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  line-height: 1.32;
  color: var(--fd-gold-soft);
  max-width: 40ch;
}
.fd-getit-meta {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--fd-line);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fd-muted);
}
.fd-getit-actions {
  margin-top: 26px;
}

/* ---------------------------------------------------------------- */
/* Continue                                                          */
/* ---------------------------------------------------------------- */

.fd-continue {
  margin-top: clamp(30px, 3.6vw, 46px);
  display: grid;
  gap: 0;
  border-top: 1px solid var(--fd-line);
}
@media (min-width: 820px) {
  .fd-continue {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 44px;
  }
}
.fd-continue > li {
  border-bottom: 1px solid var(--fd-line-soft);
}
.fd-continue a {
  display: block;
  padding: 18px 0 20px;
  text-decoration: none;
}
.fd-continue-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--fd-serif);
  font-size: clamp(1.3rem, 2.3vw, 1.65rem);
  line-height: 1.2;
  color: var(--fd-text);
  transition: color 0.2s var(--fd-ease);
}
.fd-continue-note {
  display: block;
  margin-top: 7px;
  font-size: 0.92rem;
  line-height: 1.66;
  color: var(--fd-muted);
}
.fd-continue a:hover .fd-continue-label {
  color: var(--fd-gold-soft);
}

.fd-work {
  margin-top: clamp(44px, 5.5vw, 76px);
  padding-top: clamp(32px, 4vw, 52px);
  border-top: 3px double var(--fd-gold);
}
.fd-work h3 {
  font-family: var(--fd-serif);
  font-weight: 500;
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  line-height: 1.1;
  color: var(--fd-text);
}
.fd-work-intro {
  margin-top: 10px;
  font-size: 1rem;
  color: var(--fd-gold-soft);
}
.fd-work-stages {
  margin-top: 26px;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--fd-line);
}
@media (min-width: 900px) {
  .fd-work-stages {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.fd-work-stages > li {
  padding: 22px 22px 26px;
  border-bottom: 1px solid var(--fd-line-soft);
  border-right: 1px solid var(--fd-line-soft);
}
.fd-work-stages > li:last-child {
  border-right: 0;
}
@media (min-width: 900px) {
  .fd-work-stages > li:first-child {
    padding-left: 0;
  }
}
.fd-work-no {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--fd-gold);
}
.fd-work-stages h4 {
  margin-top: 10px;
  font-family: var(--fd-serif);
  font-weight: 500;
  font-size: 1.42rem;
  line-height: 1.14;
  color: var(--fd-text);
}
.fd-work-stages p {
  margin-top: 10px;
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--fd-body);
}
.fd-work-leave {
  margin-top: 12px !important;
  padding-top: 10px;
  border-top: 1px solid var(--fd-gold-dim);
  color: var(--fd-gold-soft) !important;
}
.fd-work-close {
  margin-top: 26px;
  font-family: var(--fd-serif);
  font-size: clamp(1.2rem, 2.2vw, 1.6rem);
  line-height: 1.3;
  color: var(--fd-text);
  max-width: 44ch;
}
.fd-work .fd-button-quiet {
  margin-top: 24px;
}

/* ---------------------------------------------------------------- */
/* Motion                                                            */
/* ---------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .fd-page *,
  .fd-page *::before,
  .fd-page *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

@media print {
  .fd-page {
    background: #fff;
    color: #000;
  }
  .fd-spread::before {
    display: none;
  }
}