/*
Theme Name: TFB Open Crime Scene Crest
Theme URI: https://theforgottenbloodseries.com
Author: Kevin Harris
Description: A cinematic crime-noir block theme for The Forgotten Blood Series.
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.4
Version: 3.0.35
Text Domain: tfb-crime-scene
*/

@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700;800&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap");

:root {
  --tfb-page: #050607;
  --tfb-page-soft: #0b0d0f;
  --tfb-panel: #111417;
  --tfb-panel-deep: #07090b;
  --tfb-ink: #f4f5f5;
  --tfb-muted: #a0a7ac;
  --tfb-line: #343b40;
  --tfb-track: #24292d;
  --tfb-blood: #760508;
  --tfb-blood-deep: #760508;
  --tfb-blood-wet: #760508;
  --tfb-blood-black: #760508;
  --tfb-steel: #c2c9ce;
  --tfb-tape: #d3a72b;
  --tfb-white: #fff;
  --tfb-display-font: "Cinzel", Georgia, "Times New Roman", serif;
  --tfb-reading-font: "Cormorant Garamond", Georgia, "Times New Roman", serif;
}

html {
  scroll-behavior: smooth;
}

html.tfb-contact-film-lock {
  scroll-behavior: auto !important;
}

body {
  margin: 0;
  color: var(--tfb-ink);
  background: var(--tfb-page);
  font-family: var(--tfb-reading-font);
}

.wp-site-blocks {
  padding: 0;
}

#tfb-site-mockup {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: 100vh;
  margin: 0;
  overflow: hidden;
  color: var(--tfb-ink);
  background:
    linear-gradient(180deg, rgb(5 6 7 / 28%), rgb(5 6 7 / 48%)),
    url("./assets/images/tfb-city-crime-hero.webp") center 16% / cover fixed no-repeat,
    var(--tfb-page);
  border: 0;
}

#tfb-site-mockup,
#tfb-site-mockup * {
  box-sizing: border-box;
}

#tfb-site-mockup > * {
  margin-block-start: 0;
}

#tfb-site-mockup a {
  color: inherit;
}

#tfb-site-mockup :focus-visible {
  outline: 3px solid var(--tfb-tape);
  outline-offset: 3px;
}

#tfb-site-mockup .tfb-announcement {
  padding: 9px 22px;
  color: var(--tfb-white);
  background: var(--tfb-blood);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border-bottom: 2px solid var(--tfb-blood);
  text-align: center;
  font-family: var(--tfb-display-font);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

#tfb-site-mockup .tfb-site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 18px clamp(20px, 5vw, 58px);
  background: linear-gradient(180deg, rgb(5 6 7 / 44%), rgb(5 6 7 / 10%));
  border-bottom: 1px solid var(--tfb-line);
}

#tfb-site-mockup .tfb-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-family: var(--tfb-display-font);
  font-size: 1.05rem;
  letter-spacing: 0.09em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}

#tfb-site-mockup .tfb-wordmark::before {
  content: "";
  flex: 0 0 88px;
  width: 88px;
  height: 118px;
  background: url("./assets/images/penelope-crest-isolated.png") center / contain no-repeat;
  border: 0;
  box-shadow: none;
  filter: grayscale(1) contrast(1.22) brightness(1.2) drop-shadow(0 0 10px rgb(118 5 8 / 48%));
}

#tfb-site-mockup .tfb-main-nav,
#tfb-site-mockup .tfb-social-nav {
  display: flex;
  align-items: center;
  gap: 17px;
}

#tfb-site-mockup .tfb-mobile-navigation {
  display: none;
}

#tfb-site-mockup .tfb-main-nav a,
#tfb-site-mockup .tfb-social-nav a {
  color: var(--tfb-muted);
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
}

#tfb-site-mockup .tfb-main-nav a:hover,
#tfb-site-mockup .tfb-social-nav a:hover {
  color: var(--tfb-white);
}

#tfb-site-mockup .tfb-social-nav a {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  overflow: hidden;
  color: #fff;
  border: 0;
  border-radius: 9px;
  box-shadow: 0 3px 12px rgb(0 0 0 / 38%);
  transition: transform 160ms ease, filter 160ms ease;
}

#tfb-site-mockup .tfb-social-nav a:hover {
  color: #fff;
  filter: brightness(1.1);
  transform: translateY(-2px);
}

#tfb-site-mockup .tfb-social-nav .tfb-social-instagram {
  background:
    radial-gradient(circle at 30% 108%, #fdf497 0 8%, #fd5949 34%, #d6249f 60%, #285aeb 92%);
}

#tfb-site-mockup .tfb-social-nav .tfb-social-facebook {
  background: #1877f2;
}

#tfb-site-mockup .tfb-social-nav .tfb-social-x {
  background: #000;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 24%), 0 3px 12px rgb(0 0 0 / 38%);
}

#tfb-site-mockup .tfb-social-nav svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.65;
}

#tfb-site-mockup .tfb-social-nav .tfb-social-fill {
  fill: currentColor;
  stroke: none;
}

#tfb-site-mockup .tfb-social-nav .tfb-social-dot {
  fill: currentColor;
  stroke: none;
}

#tfb-site-mockup .tfb-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(430px, 0.95fr);
  align-items: center;
  gap: clamp(30px, 7vw, 90px);
  min-height: 590px;
  padding: clamp(54px, 9vw, 104px) clamp(24px, 8vw, 94px);
  overflow: hidden;
  background:
    linear-gradient(90deg, rgb(5 6 7 / 86%) 0%, rgb(5 6 7 / 60%) 42%, rgb(5 6 7 / 24%) 76%, rgb(5 6 7 / 8%) 100%),
    linear-gradient(180deg, rgb(5 6 7 / 4%) 0%, rgb(5 6 7 / 18%) 74%, rgb(5 6 7 / 40%) 100%);
}

#tfb-site-mockup .tfb-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.15;
  background:
    repeating-linear-gradient(101deg, transparent 0 31px, rgb(244 245 245 / 35%) 31px 32px, transparent 32px 78px),
    repeating-linear-gradient(4deg, transparent 0 44px, rgb(244 245 245 / 22%) 44px 45px, transparent 45px 96px);
  mix-blend-mode: screen;
  pointer-events: none;
}

#tfb-site-mockup .tfb-hero-copy,
#tfb-site-mockup .tfb-cover-stage {
  position: relative;
  z-index: 1;
}

#tfb-site-mockup .tfb-eyebrow {
  margin: 0 0 16px;
  color: var(--tfb-steel);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

#tfb-site-mockup .tfb-hero h1 {
  max-width: 760px;
  margin: 0;
  font-family: var(--tfb-display-font);
  font-size: clamp(2.9rem, 7.2vw, 5.15rem);
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 0.96;
}

#tfb-site-mockup .tfb-hero-lead {
  max-width: 620px;
  margin: 24px 0 0;
  color: var(--tfb-muted);
  font-family: var(--tfb-reading-font);
  font-size: clamp(1.125rem, 2.3vw, 1.5rem);
  line-height: 1.5;
}

#tfb-site-mockup .tfb-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 11px;
  margin-top: 30px;
}

#tfb-site-mockup .tfb-action-primary,
#tfb-site-mockup .tfb-action-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 11px 17px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-decoration: none;
  text-transform: uppercase;
}

#tfb-site-mockup .tfb-action-primary {
  color: var(--tfb-white);
  background: var(--tfb-blood);
  border: 1px solid var(--tfb-blood);
}

#tfb-site-mockup .tfb-action-secondary {
  color: var(--tfb-ink);
  background: rgb(5 6 7 / 34%);
  border: 1px solid var(--tfb-line);
}

#tfb-site-mockup .tfb-action-primary:hover {
  background: var(--tfb-blood-wet);
}

#tfb-site-mockup .tfb-action-secondary:hover {
  border-color: var(--tfb-steel);
}

#tfb-site-mockup .tfb-action-disabled {
  cursor: default;
  opacity: 0.72;
}

#tfb-site-mockup .tfb-cover-stage {
  min-height: 510px;
  display: grid;
  grid-template-columns: minmax(190px, 255px);
  grid-template-areas:
    "marker"
    "cover";
  align-content: center;
  align-items: center;
  justify-items: center;
  justify-content: center;
  isolation: isolate;
}

#tfb-site-mockup .tfb-case-marker,
#tfb-site-mockup .tfb-book-cover {
  position: relative;
  left: -42px;
  z-index: 1;
}

#tfb-site-mockup .tfb-case-marker {
  grid-area: marker;
}

#tfb-site-mockup .tfb-book-cover {
  grid-area: cover;
}

#tfb-site-mockup .tfb-case-marker {
  justify-self: end;
  margin: 0 3px -13px 0;
  padding: 7px 11px;
  color: var(--tfb-white);
  background: var(--tfb-blood);
  border: 1px solid rgb(255 255 255 / 52%);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transform: rotate(2deg);
  z-index: 2;
}

#tfb-site-mockup .tfb-book-cover {
  position: relative;
  width: min(255px, 72vw);
  aspect-ratio: 2 / 3;
  background: var(--tfb-panel-deep) url("./assets/images/night-never-forgets-cover.jpg") center / cover no-repeat;
  overflow: hidden;
  border: 0 !important;
  outline: 0;
  box-shadow: 16px 18px 0 rgb(0 0 0 / 60%);
  transform: perspective(900px) rotateY(-5deg) rotateZ(0.6deg);
}

#tfb-site-mockup .tfb-book-cover::before {
  display: none;
}

#tfb-site-mockup .tfb-promise-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: clamp(24px, 4vw, 48px) clamp(18px, 4vw, 56px);
  overflow: hidden;
  background: transparent;
  border-block: 1px solid rgb(194 201 206 / 28%);
  box-shadow: none;
}

#tfb-site-mockup .tfb-promise {
  padding: 30px clamp(18px, 4vw, 42px);
  color: var(--tfb-white);
  border-right: 1px solid rgb(255 255 255 / 18%);
}

#tfb-site-mockup .tfb-promise:last-child {
  border-right: 0;
}

#tfb-site-mockup .tfb-promise strong {
  display: block;
  font-family: var(--tfb-display-font);
  font-size: 1.25rem;
  font-weight: 400;
}

#tfb-site-mockup .tfb-promise span {
  display: block;
  margin-top: 7px;
  font-size: 0.9rem;
  line-height: 1.55;
  opacity: 0.78;
}

#tfb-site-mockup .tfb-section {
  position: relative;
  margin: clamp(24px, 4vw, 48px) clamp(18px, 4vw, 56px);
  padding: clamp(58px, 8vw, 92px) clamp(24px, 8vw, 94px);
  border: 0;
  box-shadow: none;
  text-shadow: 0 2px 9px rgb(0 0 0 / 82%);
}

#tfb-site-mockup .tfb-book-feature::before,
#tfb-site-mockup .tfb-progress-wrap::before,
#tfb-site-mockup .tfb-reader-room::before {
  display: none;
}

#tfb-site-mockup .tfb-blade-divider {
  --tfb-blade-turn: 270deg;
  --tfb-blade-tilt: 0deg;
  --tfb-gleam-delay: 0s;
  --tfb-scroll-spin: 0deg;
  position: relative;
  z-index: 1;
  height: clamp(96px, 10vw, 132px);
  margin: clamp(-28px, -2vw, -12px) clamp(18px, 4vw, 56px);
  overflow: hidden;
  background: linear-gradient(90deg, transparent, rgb(194 201 206 / 18%) 20%, rgb(118 5 8 / 52%) 50%, rgb(194 201 206 / 18%) 80%, transparent) center / 100% 1px no-repeat;
  pointer-events: none;
}

#tfb-site-mockup .tfb-blade-divider::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(126px, 11vw, 152px);
  height: clamp(560px, 63vw, 840px);
  background: url("./assets/images/penelope-dagger-tight.png") center / contain no-repeat;
  filter: grayscale(0.4) contrast(1.3) brightness(1.24) drop-shadow(0 7px 9px rgb(0 0 0 / 76%));
  opacity: 0.52;
  backface-visibility: visible;
  transform: translate(-50%, -50%) perspective(1000px) rotate(calc(var(--tfb-blade-turn) + var(--tfb-blade-tilt))) rotateY(var(--tfb-scroll-spin));
  transform-origin: center;
  will-change: transform;
}

#tfb-site-mockup .tfb-blade-divider.tfb-blade-3d-ready::before {
  display: none;
}

#tfb-site-mockup .tfb-blade-divider.tfb-blade-webgl-ready::before,
#tfb-site-mockup .tfb-blade-divider.tfb-blade-webgl-ready::after {
  display: none;
}

#tfb-site-mockup .tfb-blade-webgl {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: min(960px, 80vw);
  height: clamp(112px, 10vw, 150px);
  pointer-events: none;
  transform: translate(-50%, -50%) rotate(var(--tfb-blade-tilt));
  transform-origin: center;
}

#tfb-site-mockup .tfb-blade-model {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(126px, 11vw, 152px);
  height: clamp(560px, 63vw, 840px);
  perspective: 1000px;
  perspective-origin: center;
  pointer-events: none;
  transform: translate(-50%, -50%) rotate(calc(var(--tfb-blade-turn) + var(--tfb-blade-tilt)));
  transform-origin: center;
  transform-style: preserve-3d;
}

#tfb-site-mockup .tfb-blade-volume {
  position: absolute;
  inset: 0;
  transform: rotateY(var(--tfb-scroll-spin));
  transform-origin: center;
  transform-style: preserve-3d;
  will-change: transform;
}

#tfb-site-mockup .tfb-blade-face,
#tfb-site-mockup .tfb-blade-edge {
  position: absolute;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  transform-origin: center;
}

#tfb-site-mockup .tfb-blade-face {
  inset: 0;
}

#tfb-site-mockup .tfb-blade-face {
  background-image: url("./assets/images/penelope-dagger-tight.png");
  backface-visibility: hidden;
}

#tfb-site-mockup .tfb-blade-front {
  filter: grayscale(0.32) contrast(1.34) brightness(1.28) drop-shadow(0 7px 9px rgb(0 0 0 / 76%));
  opacity: 0.62;
  transform: translateZ(15px);
}

#tfb-site-mockup .tfb-blade-back {
  filter: grayscale(0.48) contrast(1.38) brightness(0.76) drop-shadow(0 7px 9px rgb(0 0 0 / 82%));
  opacity: 0.56;
  transform: translateZ(-15px) rotateY(180deg);
}

#tfb-site-mockup .tfb-blade-edge {
  top: 0;
  bottom: 0;
  left: 50%;
  width: 34px;
  background:
    linear-gradient(90deg, #08090a 0 8%, #4d5154 22%, #e6e9ea 46%, #777c80 58%, #202326 76%, #070809 100%);
  backface-visibility: visible;
  box-shadow:
    0 0 8px rgb(224 232 235 / 46%),
    inset 0 0 0 1px rgb(235 241 243 / 28%);
  clip-path: polygon(39% 0, 61% 0, 72% 12%, 69% 44%, 100% 50%, 69% 56%, 72% 88%, 61% 100%, 39% 100%, 28% 88%, 31% 56%, 0 50%, 31% 44%, 28% 12%);
  opacity: 0.82;
  transform: translateX(-50%) rotateY(90deg);
}

#tfb-site-mockup .tfb-blade-divider::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(560px, 62vw);
  height: 4px;
  background: linear-gradient(100deg, transparent 0 42%, rgb(219 226 229 / 16%) 46%, rgb(255 255 255 / 94%) 50%, rgb(219 226 229 / 18%) 54%, transparent 59% 100%);
  background-position: -170% center;
  background-size: 230% 100%;
  filter: blur(0.2px) drop-shadow(0 0 7px rgb(255 255 255 / 70%));
  opacity: 0;
  transform: translate(-50%, -50%) rotate(var(--tfb-blade-tilt));
  transform-origin: center;
  animation: tfb-blade-gleam 6.8s ease-in-out infinite;
  animation-delay: var(--tfb-gleam-delay);
}

#tfb-site-mockup .tfb-blade-divider-1 {
  --tfb-gleam-delay: -0.8s;
}

#tfb-site-mockup .tfb-blade-divider-2 {
  --tfb-gleam-delay: -2.1s;
}

#tfb-site-mockup .tfb-blade-divider-3 {
  --tfb-gleam-delay: -3.4s;
}

#tfb-site-mockup .tfb-blade-divider-4 {
  --tfb-gleam-delay: -4.7s;
}

#tfb-site-mockup .tfb-blade-divider-5 {
  --tfb-gleam-delay: -5.9s;
}

@keyframes tfb-blade-gleam {
  0%,
  28%,
  62%,
  100% {
    background-position: -170% center;
    opacity: 0;
  }

  40% {
    opacity: 0.82;
  }

  52% {
    background-position: 170% center;
    opacity: 0;
  }
}

#tfb-site-mockup .tfb-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 36px;
}

#tfb-site-mockup .tfb-section-heading h2 {
  max-width: 660px;
  margin: 0;
  font-family: var(--tfb-display-font);
  font-size: clamp(2.1rem, 5vw, 3.25rem);
  font-weight: 400;
  letter-spacing: -0.025em;
}

#tfb-site-mockup .tfb-section-heading p {
  max-width: 420px;
  margin: 0;
  color: var(--tfb-muted);
  font-size: 1rem;
  line-height: 1.7;
}

#tfb-site-mockup .tfb-book-feature {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
  gap: clamp(34px, 8vw, 86px);
  align-items: center;
  background: transparent;
}

#tfb-site-mockup .tfb-big-quote {
  margin: 0;
  padding-left: 25px;
  font-family: var(--tfb-reading-font);
  font-size: clamp(2rem, 4.5vw, 3.1rem);
  line-height: 1.16;
  border-left: 3px solid var(--tfb-blood);
}

#tfb-site-mockup .tfb-book-copy h2,
#tfb-site-mockup .tfb-progress-wrap h2,
#tfb-site-mockup .tfb-room-intro h2,
#tfb-site-mockup .tfb-newsletter h2 {
  margin: 0;
  font-family: var(--tfb-display-font);
  font-size: clamp(2.1rem, 4.5vw, 3rem);
  font-weight: 400;
}

#tfb-site-mockup .tfb-book-copy p,
#tfb-site-mockup .tfb-room-intro p,
#tfb-site-mockup .tfb-newsletter-copy p {
  margin: 17px 0 0;
  color: var(--tfb-muted);
  font-size: 1rem;
  line-height: 1.75;
}

#tfb-site-mockup .tfb-chapter-section {
  background: transparent;
}

#tfb-site-mockup .tfb-chapter-coming-soon-copy {
  display: grid;
  gap: 8px;
  padding: 24px 0;
  border-block: 1px solid rgb(194 201 206 / 34%);
}

#tfb-site-mockup .tfb-chapter-coming-soon-copy .tfb-eyebrow {
  margin: 0;
}

#tfb-site-mockup .tfb-chapter-coming-soon-copy strong {
  font-family: var(--tfb-display-font);
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 400;
}

#tfb-site-mockup .tfb-chapter-reader > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 28px;
  padding: 24px 0;
  cursor: pointer;
  list-style: none;
  border-block: 1px solid rgb(194 201 206 / 34%);
}

#tfb-site-mockup .tfb-chapter-reader > summary::-webkit-details-marker {
  display: none;
}

#tfb-site-mockup .tfb-chapter-reader > summary .tfb-eyebrow {
  grid-column: 1;
  margin: 0;
}

#tfb-site-mockup .tfb-chapter-reader > summary strong {
  grid-column: 1;
  font-family: var(--tfb-display-font);
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 400;
}

#tfb-site-mockup .tfb-chapter-toggle {
  grid-column: 2;
  grid-row: 1 / span 2;
  padding: 12px 16px;
  color: var(--tfb-white);
  background: var(--tfb-blood);
  border: 1px solid rgb(255 255 255 / 28%);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#tfb-site-mockup .tfb-chapter-reader[open] .tfb-chapter-toggle {
  background: var(--tfb-blood-deep);
}

#tfb-site-mockup .tfb-chapter-text {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(48px, 8vw, 82px) 0 24px;
}

#tfb-site-mockup .tfb-chapter-text h2 {
  margin: 8px 0 34px;
  font-family: var(--tfb-display-font);
  font-size: clamp(2.4rem, 6vw, 4rem);
  font-weight: 400;
  text-align: center;
}

#tfb-site-mockup .tfb-chapter-text p {
  margin: 0 0 1.3em;
  color: #d4d7d9;
  font-family: var(--tfb-reading-font);
  font-size: 1.05rem;
  line-height: 1.9;
}

#tfb-site-mockup .tfb-chapter-text .tfb-chapter-deck {
  margin-bottom: 2.4em;
  color: var(--tfb-steel);
  font-family: var(--tfb-display-font);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-align: center;
  text-transform: uppercase;
}

#tfb-site-mockup .tfb-chapter-reader[open] > summary {
  border-bottom-color: rgb(143 0 17 / 58%);
}

#tfb-site-mockup .tfb-chapter-reader[open] .tfb-chapter-text {
  animation: tfb-chapter-reveal 320ms ease-out both;
}

@keyframes tfb-chapter-reveal {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#tfb-site-mockup .tfb-chapter-text .tfb-chapter-opening {
  margin-bottom: 2em;
  color: var(--tfb-white);
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

#tfb-site-mockup .tfb-progress-wrap {
  background: transparent;
}

#tfb-site-mockup .tfb-progress-table {
  display: grid;
  gap: 14px;
  margin-top: 31px;
}

#tfb-site-mockup .tfb-progress-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(190px, 0.8fr) minmax(280px, 1.5fr);
  gap: 25px;
  padding: 54px 24px 24px;
  overflow: hidden;
  background: linear-gradient(110deg, rgb(118 5 8 / 21%), transparent 54%);
  border: 0;
  border-bottom: 1px solid rgb(194 201 206 / 30%);
  box-shadow: inset 4px 0 0 var(--tfb-blood-wet);
}

#tfb-site-mockup .tfb-progress-row::before {
  content: attr(data-case) "  /  " attr(data-state);
  position: absolute;
  top: 0;
  left: 0;
  padding: 10px 14px 9px;
  color: var(--tfb-steel);
  background: var(--tfb-blood);
  border-right: 1px solid var(--tfb-blood-wet);
  border-bottom: 1px solid var(--tfb-blood-wet);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

#tfb-site-mockup .tfb-progress-row::after {
  display: none;
}

#tfb-site-mockup .tfb-progress-row > *:not(.tfb-case-seal) {
  position: relative;
  z-index: 1;
}

#tfb-site-mockup .tfb-case-seal {
  position: absolute;
  right: 24px;
  bottom: -35px;
  z-index: 0;
  width: 150px;
  height: 150px;
  background: url("./assets/images/penelope-dagger.png") 100% 43% / 200% 200% no-repeat;
  filter: grayscale(1) contrast(1.3);
  mix-blend-mode: screen;
  opacity: 0.075;
  pointer-events: none;
  transform: rotate(-4deg);
}

#tfb-site-mockup .tfb-progress-row h3 {
  margin: 0;
  font-family: var(--tfb-display-font);
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  font-weight: 400;
}

#tfb-site-mockup .tfb-classified-title {
  min-height: 2.4rem;
  overflow: visible;
}

#tfb-site-mockup .tfb-title-tape {
  display: inline-block;
  width: min(100%, 310px);
  padding: 7px 16px;
  color: #08090a;
  background: repeating-linear-gradient(135deg, #e0b63b 0 18px, var(--tfb-tape) 18px 36px);
  border-block: 1px solid #08090a;
  box-shadow: 0 3px 14px rgb(0 0 0 / 45%);
  font-family: var(--tfb-display-font);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1.25;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  transform: rotate(4deg);
  transform-origin: center;
}

#tfb-site-mockup .tfb-progress-row p {
  margin: 5px 0 0;
  color: var(--tfb-muted);
  font-size: 0.875rem;
}

#tfb-site-mockup .tfb-phase-labels,
#tfb-site-mockup .tfb-phase-bars {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

#tfb-site-mockup .tfb-phase-labels {
  margin-bottom: 10px;
  color: var(--tfb-muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#tfb-site-mockup .tfb-phase-labels span {
  padding-bottom: 7px;
  border-bottom: 1px solid var(--tfb-line);
}

#tfb-site-mockup .tfb-phase-labels span::before {
  margin-right: 0.45em;
  color: var(--tfb-blood-wet);
  font-size: 0.65rem;
}

#tfb-site-mockup .tfb-phase-labels span:nth-child(1)::before { content: "01"; }
#tfb-site-mockup .tfb-phase-labels span:nth-child(2)::before { content: "02"; }
#tfb-site-mockup .tfb-phase-labels span:nth-child(3)::before { content: "03"; }
#tfb-site-mockup .tfb-phase-labels span:nth-child(4)::before { content: "04"; }

#tfb-site-mockup .tfb-phase-track {
  position: relative;
  height: 12px;
  overflow: hidden;
  background: repeating-linear-gradient(90deg, var(--tfb-track) 0 10px, #1a1e21 10px 12px);
  border-bottom: 1px solid #394147;
}

#tfb-site-mockup .tfb-phase-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: linear-gradient(90deg, var(--tfb-blood-deep), var(--tfb-blood-wet));
  box-shadow: 5px 0 12px rgb(118 5 8 / 45%);
}

#tfb-site-mockup .tfb-phase-track[aria-valuenow="100"] .tfb-phase-fill {
  background: var(--tfb-blood);
}

#tfb-site-mockup .tfb-phase-track:not([aria-valuenow="0"]):not([aria-valuenow="100"])::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 4px;
  height: 4px;
  background: var(--tfb-tape);
  transform: translateY(-50%);
}

#tfb-site-mockup .tfb-reader-room {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(34px, 8vw, 86px);
  align-items: start;
  background: transparent;
}

#tfb-site-mockup .tfb-room-preview {
  display: grid;
  gap: 10px;
}

#tfb-site-mockup .tfb-room-topic {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 16px 17px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgb(194 201 206 / 30%);
}

#tfb-site-mockup .tfb-topic-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  color: var(--tfb-steel);
  background: rgb(194 201 206 / 9%);
  border-left: 2px solid var(--tfb-blood);
  font-size: 0.8rem;
  font-weight: 800;
}

#tfb-site-mockup .tfb-room-topic strong {
  display: block;
  font-size: 1rem;
}

#tfb-site-mockup .tfb-room-topic span {
  display: block;
  margin-top: 3px;
  color: var(--tfb-muted);
  font-size: 0.875rem;
}

#tfb-site-mockup .tfb-topic-count {
  color: var(--tfb-muted);
  font-size: 0.8rem;
  text-transform: uppercase;
}

#tfb-site-mockup .tfb-newsletter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.75fr);
  gap: 40px;
  align-items: center;
  color: var(--tfb-white);
  background: transparent;
}

#tfb-site-mockup .tfb-newsletter-copy p {
  color: rgb(255 255 255 / 78%);
}

#tfb-site-mockup .tfb-contact {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(170px, 0.35fr) minmax(310px, 1fr);
  gap: clamp(24px, 4vw, 54px);
  align-items: center;
  overflow: hidden;
  color: var(--tfb-white);
  background:
    linear-gradient(90deg, rgb(118 5 8 / 18%), transparent 42%),
    transparent;
}

#tfb-site-mockup .tfb-contact::before {
  display: none;
}

#tfb-site-mockup .tfb-contact::after {
  content: "";
  position: absolute;
  z-index: 4;
  top: 51%;
  left: 34%;
  width: 62%;
  height: 10px;
  background:
    radial-gradient(ellipse at 15% 35%, rgb(156 10 16 / 88%) 0 7%, transparent 8%),
    radial-gradient(ellipse at 48% 70%, rgb(91 2 7 / 92%) 0 10%, transparent 11%),
    linear-gradient(90deg, transparent 0 1%, #3f0104 3%, #a20a10 16%, #760508 48%, #b40d15 77%, #490104 97%, transparent 100%);
  box-shadow:
    0 0 9px rgb(139 6 12 / 88%),
    0 2px 14px rgb(41 0 3 / 92%);
  clip-path: polygon(0 48%, 8% 24%, 22% 39%, 36% 12%, 53% 34%, 69% 18%, 84% 40%, 100% 29%, 96% 65%, 78% 58%, 62% 84%, 43% 62%, 27% 91%, 11% 67%);
  opacity: 0;
  pointer-events: none;
  transform: rotate(-6deg) scaleX(0);
  transform-origin: left center;
}

#tfb-site-mockup .tfb-contact-copy,
#tfb-site-mockup .tfb-contact-form {
  position: relative;
  z-index: 1;
  transition:
    opacity 280ms ease,
    transform 360ms ease;
}

#tfb-site-mockup .tfb-contact.tfb-contact-clearing .tfb-contact-copy,
#tfb-site-mockup .tfb-contact.tfb-contact-clearing .tfb-contact-form,
#tfb-site-mockup .tfb-contact.tfb-contact-note-delivered .tfb-contact-copy,
#tfb-site-mockup .tfb-contact.tfb-contact-note-delivered .tfb-contact-form {
  opacity: 0;
  transform: translateY(12px);
  visibility: hidden;
}

#tfb-site-mockup .tfb-contact-copy h2 {
  margin: 0;
  font-family: var(--tfb-display-font);
  font-size: clamp(2.1rem, 4.5vw, 3rem);
  font-weight: 400;
}

#tfb-site-mockup .tfb-contact-copy > p:not(.tfb-eyebrow):not(.tfb-contact-privacy) {
  margin: 17px 0 0;
  color: var(--tfb-muted);
  font-size: 1rem;
  line-height: 1.75;
}

#tfb-site-mockup .tfb-contact-privacy {
  margin: 22px 0 0;
  color: rgb(244 245 245 / 68%);
  font-size: 0.76rem;
  letter-spacing: 0.04em;
}

#tfb-site-mockup .tfb-contact-dagger {
  --tfb-contact-rest-angle: 1deg;
  --tfb-contact-wind-angle: -15deg;
  --tfb-contact-strike-angle: 88deg;
  --tfb-contact-exit-angle: 93deg;
  --tfb-contact-strike-x: clamp(280px, 31vw, 520px);
  --tfb-contact-exit-x: clamp(330px, 37vw, 610px);
  position: relative;
  z-index: 0;
  width: 100%;
  min-width: 170px;
  height: 100%;
  min-height: 640px;
  align-self: stretch;
  background: url("./assets/images/penelope-dagger-tight.png") center / contain no-repeat;
  filter: grayscale(0.38) contrast(1.3) brightness(1.25) drop-shadow(0 18px 20px rgb(118 5 8 / 78%));
  opacity: 0.62;
  pointer-events: none;
  transform: rotate(var(--tfb-contact-rest-angle));
}

#tfb-site-mockup .tfb-contact-dagger.tfb-contact-dagger-webgl-ready {
  background: none;
  filter: none;
  opacity: 1;
}

#tfb-site-mockup .tfb-contact-dagger-webgl {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

#tfb-site-mockup .tfb-contact.tfb-contact-slice-active .tfb-contact-dagger {
  z-index: 5;
  animation: tfb-contact-dagger-strike 1.55s cubic-bezier(0.2, 0.74, 0.2, 1) both;
}

#tfb-site-mockup .tfb-contact.tfb-contact-slice-active::after {
  animation: tfb-contact-blood-slice 1.82s ease-out both;
}

#tfb-site-mockup .tfb-case-note {
  position: absolute;
  z-index: 6;
  top: 51%;
  left: 50%;
  box-sizing: border-box;
  width: min(560px, calc(100% - 48px));
  min-height: 270px;
  padding: 66px clamp(34px, 6vw, 72px) 54px;
  color: #241712;
  background:
    radial-gradient(circle at 78% 22%, rgb(91 29 18 / 14%) 0 3%, transparent 4%),
    radial-gradient(circle at 19% 76%, rgb(91 29 18 / 10%) 0 5%, transparent 6%),
    repeating-linear-gradient(0deg, transparent 0 19px, rgb(88 50 30 / 7%) 20px),
    linear-gradient(100deg, #b98d57 0%, #e3c28a 8%, #d3aa70 50%, #edd19d 91%, #a97945 100%);
  border: 1px solid rgb(67 31 18 / 78%);
  box-shadow:
    0 24px 54px rgb(0 0 0 / 76%),
    0 0 26px rgb(118 5 8 / 32%),
    inset 0 0 42px rgb(71 33 17 / 34%);
  clip-path: polygon(2% 1%, 14% 2%, 28% 0, 43% 2%, 58% 1%, 73% 3%, 88% 1%, 99% 3%, 98% 19%, 100% 35%, 98% 52%, 100% 70%, 98% 87%, 99% 98%, 84% 97%, 69% 100%, 52% 98%, 36% 100%, 19% 98%, 1% 99%, 2% 82%, 0 65%, 2% 47%, 0 28%);
  opacity: 0;
  pointer-events: none;
  text-align: center;
  text-shadow: none;
  transform: translate(-50%, -50%) rotate(-3deg) scaleX(0.72) scaleY(0.025);
  transform-origin: center;
}

#tfb-site-mockup .tfb-case-note::before,
#tfb-site-mockup .tfb-case-note::after {
  content: "";
  position: absolute;
  left: -10px;
  width: calc(100% + 20px);
  height: 24px;
  background: linear-gradient(180deg, #8a5d34 0%, #d6aa70 38%, #6f4326 100%);
  border: 1px solid rgb(56 26 15 / 82%);
  border-radius: 50%;
  box-shadow:
    0 4px 8px rgb(38 17 10 / 42%),
    inset 0 3px 7px rgb(255 224 166 / 34%);
}

#tfb-site-mockup .tfb-case-note::before {
  top: -10px;
}

#tfb-site-mockup .tfb-case-note::after {
  bottom: -10px;
  transform: rotate(180deg);
}

#tfb-site-mockup .tfb-case-note.tfb-case-note-visible {
  animation: tfb-case-note-unfurl 1.08s cubic-bezier(0.18, 0.74, 0.2, 1) forwards;
  pointer-events: auto;
}

#tfb-site-mockup .tfb-case-note-ornament {
  display: block;
  color: #760508;
  font-family: var(--tfb-display-font);
  font-size: 1.55rem;
  line-height: 1;
}

#tfb-site-mockup .tfb-case-note-message {
  margin: 18px 0 28px;
  font-family: var(--tfb-display-font);
  font-size: clamp(1.65rem, 4vw, 2.45rem);
  line-height: 1.22;
  letter-spacing: 0.025em;
}

#tfb-site-mockup .tfb-case-note-message strong {
  color: #760508;
  font-weight: 700;
}

#tfb-site-mockup .tfb-case-note-reset {
  padding: 10px 16px;
  color: #301914;
  background: rgb(255 244 214 / 25%);
  border: 1px solid rgb(60 27 17 / 64%);
  cursor: pointer;
  font-family: var(--tfb-display-font);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#tfb-site-mockup .tfb-case-note-reset:hover,
#tfb-site-mockup .tfb-case-note-reset:focus-visible {
  color: #fff7e4;
  background: #760508;
  outline: 1px solid #e1bd83;
  outline-offset: 3px;
}

@keyframes tfb-contact-dagger-strike {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(var(--tfb-contact-rest-angle)) scale(1);
  }

  16% {
    opacity: 1;
    transform: translate3d(-24px, 0, 0) rotate(var(--tfb-contact-wind-angle)) scale(1.03);
  }

  68% {
    opacity: 1;
    transform: translate3d(var(--tfb-contact-strike-x), 0, 0) rotate(var(--tfb-contact-strike-angle)) scale(1.04);
  }

  82% {
    opacity: 0;
    transform: translate3d(var(--tfb-contact-exit-x), 0, 0) rotate(var(--tfb-contact-exit-angle)) scale(1.04);
  }

  83% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(var(--tfb-contact-rest-angle)) scale(1);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(var(--tfb-contact-rest-angle)) scale(1);
  }
}

@keyframes tfb-contact-blood-slice {
  0%,
  22% {
    opacity: 0;
    transform: rotate(-6deg) scaleX(0);
  }

  54% {
    opacity: 0.92;
    transform: rotate(-6deg) scaleX(1);
  }

  72% {
    opacity: 0.7;
    transform: rotate(-6deg) scaleX(0.97) scaleY(0.72);
  }

  100% {
    opacity: 0.08;
    transform: rotate(-6deg) scaleX(0.72) scaleY(0.14);
  }
}

@keyframes tfb-case-note-unfurl {
  0% {
    opacity: 0.12;
    transform: translate(-50%, -50%) rotate(-3deg) scaleX(0.72) scaleY(0.025);
  }

  38% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(2deg) scaleX(0.92) scaleY(0.16);
  }

  76% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(-0.7deg) scaleX(1.01) scaleY(1.04);
  }

  100% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(0deg) scaleX(1) scaleY(1);
  }
}

#tfb-site-mockup .tfb-contact-form .wp-block-shortcode,
#tfb-site-mockup .tfb-contact-form .contact-form {
  margin: 0;
}

#tfb-site-mockup .tfb-contact-form .grunion-field-wrap,
#tfb-site-mockup .tfb-contact-form .contact-submit {
  margin: 0 0 14px;
}

#tfb-site-mockup .tfb-contact-form label {
  display: block;
  margin: 0 0 7px;
  color: var(--tfb-steel);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

#tfb-site-mockup .tfb-contact-form input:not([type="submit"]),
#tfb-site-mockup .tfb-contact-form select,
#tfb-site-mockup .tfb-contact-form textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  color: var(--tfb-ink);
  background: rgb(5 6 7 / 68%);
  border: 1px solid rgb(255 255 255 / 32%);
  border-radius: 0;
  font-family: var(--tfb-reading-font);
  font-size: 1rem;
}

#tfb-site-mockup .tfb-contact-form textarea {
  min-height: 138px;
  resize: vertical;
}

#tfb-site-mockup .tfb-contact-form input:focus,
#tfb-site-mockup .tfb-contact-form select:focus,
#tfb-site-mockup .tfb-contact-form textarea:focus {
  border-color: var(--tfb-blood-bright);
  outline: 1px solid var(--tfb-blood-bright);
  outline-offset: 2px;
}

#tfb-site-mockup .tfb-contact-form button,
#tfb-site-mockup .tfb-contact-form input[type="submit"] {
  min-height: 48px;
  padding: 11px 20px;
  color: var(--tfb-white);
  background: var(--tfb-blood);
  border: 1px solid rgb(255 255 255 / 24%);
  border-radius: 0;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

#tfb-site-mockup .tfb-contact-form button:hover,
#tfb-site-mockup .tfb-contact-form input[type="submit"]:hover {
  background: var(--tfb-blood-wet);
}

#tfb-site-mockup .wp-block-jetpack-subscriptions,
#tfb-site-mockup .wp-block-jetpack-subscriptions__container {
  width: 100%;
  max-width: none;
}

#tfb-site-mockup .wp-block-jetpack-subscriptions__form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

#tfb-site-mockup .wp-block-jetpack-subscriptions input[type="email"] {
  min-height: 48px;
  padding: 12px 14px;
  color: var(--tfb-ink);
  background: var(--tfb-panel);
  border: 1px solid rgb(255 255 255 / 34%);
  border-radius: 0;
  font-size: 1rem;
}

#tfb-site-mockup .wp-block-jetpack-subscriptions button {
  min-height: 48px;
  padding: 11px 18px;
  color: var(--tfb-white);
  background: var(--tfb-blood);
  border: 1px solid rgb(255 255 255 / 24%);
  border-radius: 0;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

#tfb-site-mockup .tfb-footer {
  display: flex;
  justify-content: flex-end;
  gap: 25px;
  padding: 28px clamp(24px, 8vw, 94px);
  color: var(--tfb-muted);
  background: transparent;
  border-top: 1px solid var(--tfb-line);
  font-size: 0.875rem;
}

#tfb-site-mockup .tfb-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

#tfb-site-mockup .tfb-footer a {
  text-decoration: none;
}

@media (max-width: 1000px) {
  #tfb-site-mockup .tfb-site-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px 18px;
  }

  #tfb-site-mockup .tfb-main-nav {
    display: none;
  }

  #tfb-site-mockup .tfb-wordmark {
    grid-column: 1;
  }

  #tfb-site-mockup .tfb-social-nav {
    grid-column: 2;
  }

  #tfb-site-mockup .tfb-mobile-navigation {
    grid-column: 1 / -1;
    display: block;
    width: 100%;
  }

  #tfb-site-mockup .tfb-mobile-navigation > summary {
    display: flex;
    min-height: 48px;
    box-sizing: border-box;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    color: var(--tfb-white);
    background: rgb(5 6 7 / 82%);
    border: 1px solid rgb(255 255 255 / 30%);
    cursor: pointer;
    font-family: var(--tfb-display-font);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    list-style: none;
    text-transform: uppercase;
  }

  #tfb-site-mockup .tfb-mobile-navigation > summary::-webkit-details-marker {
    display: none;
  }

  #tfb-site-mockup .tfb-mobile-navigation > summary::after {
    content: "+";
    color: var(--tfb-steel);
    font-family: Georgia, serif;
    font-size: 1.45rem;
    font-weight: 400;
    line-height: 1;
  }

  #tfb-site-mockup .tfb-mobile-navigation[open] > summary {
    color: var(--tfb-white);
    border-color: rgb(118 5 8 / 82%);
    box-shadow: inset 3px 0 0 var(--tfb-blood);
  }

  #tfb-site-mockup .tfb-mobile-navigation[open] > summary::after {
    content: "−";
  }

  #tfb-site-mockup .tfb-mobile-navigation > summary:focus-visible,
  #tfb-site-mockup .tfb-mobile-nav a:focus-visible {
    outline: 2px solid var(--tfb-blood-bright, #b40d15);
    outline-offset: 3px;
  }

  #tfb-site-mockup .tfb-mobile-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    padding: 1px;
    background: rgb(255 255 255 / 16%);
    border: 1px solid rgb(255 255 255 / 18%);
    border-top: 0;
  }

  #tfb-site-mockup .tfb-mobile-nav a {
    display: flex;
    min-height: 48px;
    align-items: center;
    padding: 10px 14px;
    color: var(--tfb-muted);
    background: rgb(7 9 11 / 96%);
    font-family: var(--tfb-display-font);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-decoration: none;
  }

  #tfb-site-mockup .tfb-mobile-nav a:hover,
  #tfb-site-mockup .tfb-mobile-nav a:focus-visible {
    color: var(--tfb-white);
    background: rgb(118 5 8 / 32%);
  }

  #tfb-site-mockup .tfb-hero {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  #tfb-site-mockup .tfb-cover-stage {
    margin-top: 10px;
    justify-content: center;
  }

  #tfb-site-mockup .tfb-section-heading {
    display: grid;
    align-items: start;
  }

  #tfb-site-mockup .tfb-book-feature,
  #tfb-site-mockup .tfb-reader-room,
  #tfb-site-mockup .tfb-newsletter,
  #tfb-site-mockup .tfb-contact {
    grid-template-columns: 1fr;
  }

  #tfb-site-mockup .tfb-contact-dagger {
    --tfb-contact-rest-angle: 90deg;
    --tfb-contact-wind-angle: 76deg;
    --tfb-contact-strike-angle: 91deg;
    --tfb-contact-exit-angle: 94deg;
    --tfb-contact-strike-x: min(30vw, 170px);
    --tfb-contact-exit-x: min(42vw, 230px);
    justify-self: center;
    width: 220px;
    height: 190px;
    min-height: 190px;
    margin: -8px 0;
    transform: rotate(var(--tfb-contact-rest-angle));
  }

  #tfb-site-mockup .tfb-promise-strip {
    grid-template-columns: 1fr;
  }

  #tfb-site-mockup .tfb-promise {
    border-right: 0;
    border-bottom: 1px solid rgb(255 255 255 / 18%);
  }

  #tfb-site-mockup .tfb-promise:last-child {
    border-bottom: 0;
  }
}

@media (max-width: 720px) {
  #tfb-site-mockup .tfb-case-marker,
  #tfb-site-mockup .tfb-book-cover {
    left: 0;
  }

  #tfb-site-mockup .tfb-site-header {
    align-items: start;
  }

  #tfb-site-mockup .tfb-wordmark {
    max-width: 13rem;
    white-space: normal;
  }

  #tfb-site-mockup .tfb-wordmark::before {
    flex-basis: 78px;
    width: 78px;
    height: 104px;
  }

  #tfb-site-mockup .tfb-cover-stage {
    grid-template-columns: minmax(145px, 255px);
    min-height: 420px;
  }

  #tfb-site-mockup .tfb-book-cover {
    width: min(255px, 72vw);
  }

  #tfb-site-mockup .tfb-social-nav {
    gap: 7px;
  }

  #tfb-site-mockup .tfb-social-nav a {
    width: 34px;
    height: 34px;
  }

  #tfb-site-mockup .tfb-mobile-nav {
    grid-template-columns: 1fr;
  }

  #tfb-site-mockup .tfb-progress-row {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  #tfb-site-mockup .tfb-title-tape {
    width: min(100%, 265px);
    font-size: 0.56rem;
  }

  #tfb-site-mockup .tfb-chapter-reader > summary {
    grid-template-columns: 1fr;
  }

  #tfb-site-mockup .tfb-chapter-reader > summary strong {
    font-size: 1.75rem;
    line-height: 1.15;
  }

  #tfb-site-mockup .tfb-chapter-toggle {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
    margin-top: 10px;
  }

  #tfb-site-mockup .tfb-phase-labels {
    font-size: 0.66rem;
  }

  #tfb-site-mockup .tfb-newsletter {
    padding-inline: 24px;
  }

  #tfb-site-mockup .tfb-contact {
    padding-inline: 24px;
  }

  #tfb-site-mockup .tfb-contact::after {
    left: 10%;
    width: 80%;
    height: 11px;
  }

  #tfb-site-mockup .tfb-case-note {
    width: calc(100% - 36px);
    min-height: 240px;
    padding: 54px 26px 44px;
  }

  #tfb-site-mockup .tfb-blade-divider {
    height: 72px;
    margin-block: -18px;
  }

  #tfb-site-mockup .tfb-blade-divider::before {
    width: 82px;
    height: min(430px, 112vw);
  }

  #tfb-site-mockup .tfb-blade-model {
    width: 82px;
    height: min(430px, 112vw);
  }

  #tfb-site-mockup .tfb-blade-webgl {
    width: min(430px, 112vw);
    height: 92px;
  }

  #tfb-site-mockup .tfb-blade-divider::after {
    width: min(360px, 84vw);
  }

  #tfb-site-mockup .wp-block-jetpack-subscriptions__form {
    grid-template-columns: 1fr;
  }

  #tfb-site-mockup .tfb-footer {
    display: grid;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  #tfb-site-mockup .tfb-blade-divider::before {
    transform: translate(-50%, -50%) rotate(270deg);
  }

  #tfb-site-mockup .tfb-blade-volume {
    transform: rotateY(0deg);
  }

  #tfb-site-mockup .tfb-blade-divider::after {
    animation: none;
    background-position: center;
    opacity: 0.28;
  }

  #tfb-site-mockup .tfb-contact.tfb-contact-slice-active .tfb-contact-dagger,
  #tfb-site-mockup .tfb-contact.tfb-contact-slice-active::after {
    animation: none;
  }

  #tfb-site-mockup .tfb-case-note.tfb-case-note-visible {
    animation: none;
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

/* Confirmed-send cinematic: approved dagger strike, healing wound, and scroll. */
#tfb-site-mockup .tfb-contact {
  isolation: isolate;
}

#tfb-site-mockup .tfb-contact-copy,
#tfb-site-mockup .tfb-contact-form,
#tfb-site-mockup .tfb-contact-dagger {
  transition:
    opacity 400ms ease,
    transform 500ms ease,
    filter 400ms ease,
    visibility 0s linear 500ms;
}

#tfb-site-mockup .tfb-contact.tfb-contact-sequence-leaving {
  height: var(--tfb-contact-sequence-height, auto);
  min-height: var(--tfb-contact-sequence-height, 0);
}

#tfb-site-mockup
  .tfb-contact.tfb-contact-sequence-leaving
  .tfb-contact-copy,
#tfb-site-mockup
  .tfb-contact.tfb-contact-sequence-leaving
  .tfb-contact-form,
#tfb-site-mockup
  .tfb-contact.tfb-contact-sequence-leaving
  .tfb-contact-dagger {
  opacity: 0;
  filter: blur(2px);
  pointer-events: none;
  transform: translateY(-12px);
  visibility: hidden;
}

#tfb-site-mockup .tfb-contact-cinematic {
  position: absolute;
  z-index: 10;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

#tfb-site-mockup
  .tfb-contact.tfb-contact-sequence-cutting
  .tfb-contact-cinematic {
  opacity: 1;
}

#tfb-site-mockup .tfb-contact-dagger-flight {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 90ms linear;
  will-change: opacity;
}

#tfb-site-mockup .tfb-contact-strike-video {
  display: block;
  width: 100%;
  height: 100%;
  background: transparent;
  object-fit: contain;
  object-position: center;
}

#tfb-site-mockup
  .tfb-contact.tfb-contact-sequence-cutting
  .tfb-contact-dagger-flight {
  opacity: 1;
}

#tfb-site-mockup
  .tfb-contact.tfb-contact-sequence-video-done
  .tfb-contact-dagger-flight {
  opacity: 0;
  transition-duration: 260ms;
}

#tfb-site-mockup .tfb-contact-wound-wrap {
  position: absolute;
  z-index: 11;
  inset: 0;
  opacity: 0;
  overflow: hidden;
  filter: drop-shadow(0 3px 8px rgb(0 0 0 / 92%));
  will-change: opacity;
}

#tfb-site-mockup .tfb-contact-clean-canvas,
#tfb-site-mockup .tfb-contact-wound-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

#tfb-site-mockup .tfb-contact-clean-canvas { z-index: 1; }

#tfb-site-mockup .tfb-contact-wound-canvas {
  z-index: 2;
  transform-origin: center;
  will-change: opacity, filter, transform;
}

#tfb-site-mockup .tfb-contact-wound-gleam {
  position: absolute;
  z-index: 3;
  top: 45%;
  left: -8%;
  width: 118%;
  height: 3px;
  opacity: 0;
  background: linear-gradient(
    90deg,
    transparent 2%,
    rgb(255 246 230 / 8%) 40%,
    rgb(255 246 230 / 70%) 54%,
    transparent 72%
  );
  filter: blur(1.5px);
  transform: rotate(-14deg);
}

#tfb-site-mockup .tfb-contact-healing-seam {
  position: absolute;
  z-index: 4;
  top: 45%;
  left: -8%;
  width: 118%;
  height: 7px;
  opacity: 0;
  background: linear-gradient(
    90deg,
    transparent 1%,
    rgb(76 0 3 / 10%) 7%,
    rgb(136 5 10 / 92%) 26%,
    rgb(217 42 37 / 96%) 50%,
    rgb(121 3 8 / 90%) 74%,
    transparent 99%
  );
  box-shadow:
    0 -1px 0 rgb(255 151 129 / 25%),
    0 2px 5px rgb(70 0 2 / 86%);
  filter: blur(0.35px);
  transform: rotate(-14deg) scaleX(1);
  transform-origin: center;
  will-change: opacity, transform, filter, background;
}

#tfb-site-mockup
  .tfb-contact.tfb-contact-sequence-wounded
  .tfb-contact-wound-wrap {
  opacity: 1;
  transition: opacity 80ms linear;
}

#tfb-site-mockup
  .tfb-contact.tfb-contact-sequence-wounded
  .tfb-contact-wound-gleam {
  animation: tfb-contact-edge-gleam 720ms 180ms ease-out both;
}

#tfb-site-mockup
  .tfb-contact.tfb-contact-sequence-healing
  .tfb-contact-wound-canvas {
  animation: tfb-contact-wound-recedes 1760ms
    cubic-bezier(0.3, 0.03, 0.18, 1) both;
}

#tfb-site-mockup
  .tfb-contact.tfb-contact-sequence-healing
  .tfb-contact-healing-seam {
  animation: tfb-contact-seam-heals 1500ms
    cubic-bezier(0.38, 0.02, 0.15, 1) both;
}

@keyframes tfb-contact-wound-recedes {
  0% {
    opacity: 1;
    filter: saturate(1.08) contrast(1.04) blur(0);
  }

  34% {
    opacity: 0.86;
    filter: saturate(0.9) contrast(1.02) brightness(0.92) blur(0.15px);
  }

  72% {
    opacity: 0.3;
    filter: saturate(0.44) contrast(0.9) brightness(0.58) blur(0.85px);
  }

  100% {
    opacity: 0;
    filter: saturate(0.14) contrast(0.76) brightness(0.26) blur(2.4px);
  }
}

@keyframes tfb-contact-seam-heals {
  0% {
    opacity: 0;
    filter: blur(1.2px);
    transform: rotate(-14deg) scaleX(1);
  }

  16% {
    opacity: 0.96;
    filter: blur(0.2px);
  }

  58% {
    height: 5px;
    opacity: 0.86;
    background: linear-gradient(
      90deg,
      transparent 8%,
      rgb(126 3 8 / 54%) 25%,
      rgb(215 39 34 / 94%) 50%,
      rgb(114 2 7 / 50%) 75%,
      transparent 92%
    );
    transform: rotate(-14deg) scaleX(0.58);
  }

  82% {
    height: 3px;
    opacity: 0.72;
    background: linear-gradient(
      90deg,
      transparent 20%,
      rgb(141 69 30 / 24%) 33%,
      rgb(221 183 115 / 92%) 50%,
      rgb(123 56 22 / 28%) 67%,
      transparent 80%
    );
    filter: blur(0);
    transform: rotate(-8deg) scaleX(0.32);
  }

  100% {
    height: 2px;
    opacity: 0;
    background: linear-gradient(
      90deg,
      transparent 28%,
      rgb(223 190 126 / 78%) 50%,
      transparent 72%
    );
    filter: blur(0.5px);
    transform: rotate(0) scaleX(0.16);
  }
}

@keyframes tfb-contact-edge-gleam {
  0% {
    opacity: 0;
    transform: translateX(-34%) rotate(-14deg);
  }

  40% {
    opacity: 0.72;
  }

  100% {
    opacity: 0;
    transform: translateX(34%) rotate(-14deg);
  }
}

#tfb-site-mockup .tfb-contact-case-note {
  position: absolute;
  z-index: 12;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  pointer-events: none;
  visibility: hidden;
}

#tfb-site-mockup
  .tfb-contact.tfb-contact-sequence-forming-scroll
  .tfb-contact-case-note,
#tfb-site-mockup
  .tfb-contact.tfb-contact-sequence-revealing
  .tfb-contact-case-note,
#tfb-site-mockup
  .tfb-contact.tfb-contact-sequence-complete
  .tfb-contact-case-note {
  visibility: visible;
}

#tfb-site-mockup .tfb-contact-parchment {
  position: relative;
  width: min(940px, calc(100% - 48px));
  opacity: 0;
  clip-path: inset(0 48%);
  filter: drop-shadow(0 28px 34px rgb(0 0 0 / 86%));
  transform: perspective(1100px) translateY(-7vh) rotateX(13deg)
    scaleX(0.08) scaleY(0.82);
  transform-origin: center;
}

#tfb-site-mockup .tfb-contact-parchment::after {
  position: absolute;
  z-index: 2;
  inset: 0;
  content: "";
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent 46.5%,
    rgb(58 29 9 / 88%) 47.8%,
    rgb(248 221 158 / 45%) 49.1%,
    rgb(255 238 190 / 18%) 50%,
    rgb(84 43 14 / 82%) 52.2%,
    transparent 53.5%
  );
}

#tfb-site-mockup .tfb-contact-parchment > img {
  display: block;
  width: 100%;
  height: auto;
}

#tfb-site-mockup
  .tfb-contact.tfb-contact-sequence-forming-scroll
  .tfb-contact-parchment {
  animation: tfb-contact-parchment-born-from-scar 720ms
    cubic-bezier(0.36, 0.03, 0.16, 1) both;
}

#tfb-site-mockup
  .tfb-contact.tfb-contact-sequence-forming-scroll
  .tfb-contact-parchment::after {
  animation: tfb-contact-scroll-cylinder-forms 720ms ease both;
}

#tfb-site-mockup
  .tfb-contact.tfb-contact-sequence-revealing
  .tfb-contact-parchment::after {
  animation: tfb-contact-scroll-cylinder-opens 500ms ease-out both;
}

@keyframes tfb-contact-scroll-cylinder-forms {
  0%,
  18% {
    opacity: 0;
  }

  52%,
  100% {
    opacity: 1;
  }
}

@keyframes tfb-contact-scroll-cylinder-opens {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes tfb-contact-parchment-born-from-scar {
  0% {
    opacity: 0;
    clip-path: inset(49.35% 32%);
    filter:
      sepia(0.9)
      saturate(1.7)
      brightness(0.48)
      drop-shadow(0 2px 5px rgb(69 0 3 / 90%));
    transform: perspective(1100px) translateY(-1vh) rotateZ(-14deg)
      rotateX(20deg) scaleX(0.8) scaleY(0.14);
  }

  22% {
    opacity: 0.8;
  }

  62% {
    opacity: 1;
    clip-path: inset(42% 43%);
    filter:
      sepia(0.5)
      saturate(1.15)
      brightness(0.8)
      drop-shadow(0 9px 14px rgb(0 0 0 / 82%));
    transform: perspective(1100px) translateY(-4vh) rotateZ(-7deg)
      rotateX(16deg) scaleX(0.5) scaleY(0.36);
  }

  100% {
    opacity: 1;
    clip-path: inset(0 48%);
    filter: drop-shadow(0 18px 24px rgb(0 0 0 / 86%));
    transform: perspective(1100px) translateY(-7vh) rotateZ(0)
      rotateX(13deg) scaleX(0.08) scaleY(0.82);
  }
}

#tfb-site-mockup
  .tfb-contact.tfb-contact-sequence-revealing
  .tfb-contact-parchment {
  animation: tfb-contact-parchment-unfurl 1550ms
    cubic-bezier(0.2, 0.72, 0.18, 1) both;
}

@keyframes tfb-contact-parchment-unfurl {
  0% {
    opacity: 0;
    clip-path: inset(0 48%);
    transform: perspective(1100px) translateY(-7vh) rotateX(13deg)
      scaleX(0.08) scaleY(0.82);
  }

  12% {
    opacity: 1;
  }

  74% {
    opacity: 1;
    clip-path: inset(0 1.5%);
    transform: perspective(1100px) translateY(0) rotateX(-2deg)
      scaleX(1.012) scaleY(1);
  }

  100% {
    opacity: 1;
    clip-path: inset(0);
    transform: perspective(1100px) translateY(0) rotateX(0) scale(1);
  }
}

#tfb-site-mockup .tfb-contact-parchment-copy {
  position: absolute;
  inset: 22% 20% 19%;
  display: grid;
  place-content: center;
  color: #241810;
  opacity: 0;
  text-align: center;
  text-shadow: 0 1px rgb(255 245 211 / 30%);
}

#tfb-site-mockup
  .tfb-contact.tfb-contact-sequence-complete
  .tfb-contact-parchment-copy {
  animation: tfb-contact-ink-arrives 800ms ease both;
}

@keyframes tfb-contact-ink-arrives {
  from {
    opacity: 0;
    filter: blur(3px);
    transform: translateY(5px);
  }

  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}

#tfb-site-mockup .tfb-contact-note-kicker {
  margin: 0 0 8px;
  color: #533827;
  font-family: var(--tfb-display-font);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

#tfb-site-mockup .tfb-contact-note-message {
  margin: 0;
  font-family: var(--tfb-display-font);
  font-size: clamp(1.65rem, 5vw, 3.65rem);
  line-height: 1;
}

#tfb-site-mockup .tfb-contact-note-message em {
  color: #7d0912;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.06em;
}

#tfb-site-mockup .tfb-contact-note-reset {
  margin-top: 28px;
  padding: 12px 18px;
  color: #fffaf0;
  background: rgb(3 5 6 / 54%);
  border: 1px solid rgb(220 225 228 / 28%);
  border-radius: 0;
  opacity: 0;
  cursor: pointer;
  font-family: var(--tfb-display-font);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  pointer-events: none;
  text-transform: uppercase;
  transform: translateY(8px);
  backdrop-filter: blur(4px);
}

#tfb-site-mockup
  .tfb-contact.tfb-contact-sequence-complete
  .tfb-contact-note-reset {
  animation: tfb-contact-reset-arrives 500ms 350ms ease both;
  pointer-events: auto;
}

#tfb-site-mockup .tfb-contact-note-reset:hover,
#tfb-site-mockup .tfb-contact-note-reset:focus-visible {
  color: #fff7e4;
  background: #760508;
  outline: 1px solid #e1bd83;
  outline-offset: 3px;
}

@keyframes tfb-contact-reset-arrives {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 720px) {
  #tfb-site-mockup .tfb-contact-parchment {
    width: 108vw;
    max-width: none;
  }

  #tfb-site-mockup .tfb-contact-parchment-copy {
    inset-inline: 22%;
  }

  #tfb-site-mockup .tfb-contact-note-kicker {
    font-size: 0.56rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  #tfb-site-mockup .tfb-contact-parchment,
  #tfb-site-mockup .tfb-contact-parchment-copy,
  #tfb-site-mockup .tfb-contact-note-reset {
    animation: none !important;
    opacity: 1;
    transform: none;
  }

  #tfb-site-mockup .tfb-contact-parchment {
    clip-path: inset(0);
  }
}

/* v56: keep the approved film at its native scene scale without reflowing the page. */
#tfb-site-mockup .tfb-contact-cinematic {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 2vw, 28px);
  padding: clamp(18px, 3vw, 32px);
  background: transparent;
  box-sizing: border-box;
}

#tfb-site-mockup .tfb-contact-cinematic:focus {
  outline: none;
}

#tfb-site-mockup .tfb-contact-cinematic-frame {
  position: relative;
  inset: auto;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: min(100%, 1280px);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  opacity: 1;
  background: #050607;
}

#tfb-site-mockup .tfb-contact-strike-video {
  width: 100%;
  height: 100% !important;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
}

#tfb-site-mockup .tfb-contact-film-status {
  position: absolute;
  inset: 0;
  display: none;
  place-content: center;
  padding: 32px;
  color: var(--tfb-blood-wet);
  font-family: var(--tfb-display-font);
  font-size: clamp(1.7rem, 5vw, 3.8rem);
  font-weight: 600;
  text-align: center;
}

#tfb-site-mockup .tfb-contact-film-status strong {
  font-weight: 800;
  letter-spacing: 0.08em;
}

#tfb-site-mockup .tfb-contact-cinematic > .tfb-contact-note-reset {
  position: relative;
  z-index: 13;
  left: auto;
  bottom: auto;
  flex: 0 0 auto;
  width: min(100%, 320px);
  min-height: 48px;
  margin: 0;
  transform: translateY(8px);
}

/* Preserve the pre-send contact geometry on tablets and phones as well. */
@media (max-width: 1000px) {
  #tfb-site-mockup .tfb-contact-cinematic {
    justify-content: flex-start;
    padding-top: var(--tfb-contact-sequence-content-top, 18px);
  }

  #tfb-site-mockup
    .tfb-contact.tfb-contact-sequence-cutting
    .tfb-contact-cinematic
    > .tfb-contact-note-reset {
    width: min(100%, 320px);
    min-height: 48px;
  }
}

#tfb-site-mockup
  .tfb-contact.tfb-contact-sequence-complete
  .tfb-contact-cinematic
  > .tfb-contact-note-reset {
  animation: tfb-contact-film-reset-arrives 500ms 350ms ease both;
  pointer-events: auto;
}

@keyframes tfb-contact-film-reset-arrives {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  #tfb-site-mockup .tfb-contact-strike-video {
    display: none;
  }

  #tfb-site-mockup .tfb-contact-film-status {
    display: grid;
  }
}

/* v47: keep the contact reason selector inside the site's dark visual system. */
#tfb-site-mockup .tfb-contact-form select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 46px;
  color: #f2f1ed !important;
  color-scheme: dark;
  background-color: rgb(5 6 7 / 88%) !important;
  background-image:
    linear-gradient(45deg, transparent 50%, #b5b9bb 50%),
    linear-gradient(135deg, #b5b9bb 50%, transparent 50%);
  background-position:
    calc(100% - 19px) 50%,
    calc(100% - 13px) 50%;
  background-repeat: no-repeat;
  background-size: 6px 6px;
  cursor: pointer;
}

#tfb-site-mockup .tfb-contact-form select:required:invalid {
  color: rgb(242 241 237 / 62%) !important;
}

#tfb-site-mockup .tfb-contact-form select option {
  color: #f2f1ed;
  background: #090b0d;
}

/* v48: approved About the Author section. */
#tfb-site-mockup .tfb-author {
  display: grid;
  grid-template-columns: minmax(210px, 0.42fr) minmax(0, 1fr);
  gap: clamp(36px, 8vw, 108px);
  align-items: start;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgb(118 5 8 / 17%), transparent 36%),
    linear-gradient(180deg, rgb(255 255 255 / 2%), transparent 70%);
  border-block: 1px solid rgb(255 255 255 / 9%);
}

#tfb-site-mockup .tfb-author-heading {
  position: relative;
  padding-left: 24px;
}

#tfb-site-mockup .tfb-author-heading::before {
  position: absolute;
  inset: 4px auto 4px 0;
  width: 2px;
  content: "";
  background: linear-gradient(180deg, #b90d16, #4b0306 72%, transparent);
  box-shadow: 0 0 18px rgb(118 5 8 / 48%);
}

#tfb-site-mockup .tfb-author-heading h2 {
  margin: 0;
  font-family: var(--tfb-display-font);
  font-size: clamp(2.45rem, 5vw, 4.8rem);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.025em;
}

#tfb-site-mockup .tfb-author-bio {
  max-width: 64rem;
  margin: 0;
  color: rgb(244 245 245 / 82%);
  font-size: clamp(1.05rem, 1.35vw, 1.2rem);
  line-height: 1.9;
}

@media (max-width: 1000px) {
  #tfb-site-mockup .tfb-author {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  #tfb-site-mockup .tfb-author-bio {
    max-width: 48rem;
  }
}