@font-face {
  font-family: "Rasonate";
  src: url("./assets/fonts/Rasonate-VF.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Architect Pro Alt 02";
  src: url("./assets/fonts/ArchitectProAlt02.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  --hero-black: #0a0a0a;
  --hero-orange: #ee6422;
  --hero-cream: #f3efe6;
  --header-dark-grey: #9b9b97;
  --page-paper: #f7f6f4;
  --project-card-surface: #ffffff;
  --project-card-surface-hover: #ffffff;
  --project-card-border: rgba(10, 10, 10, 0.12);
  --project-card-shadow: 0 2px 3px rgba(10, 10, 10, 0.14), 0 7px 16px rgba(10, 10, 10, 0.075);
  --project-card-shadow-hover: 0 3px 4px rgba(10, 10, 10, 0.16), 0 10px 22px rgba(10, 10, 10, 0.1);
  --notebook-blue: #111827;
  --header-height: 76px;
  --font-display: "Rasonate", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-label: "Courier New", monospace;
  --font-handwriting: "Architect Pro Alt 02", cursive;
  /* Display sizes take the smaller of a width- and a height-derived value so
     short viewports (landscape tablets, 768px laptops) do not inherit headlines
     sized for their width alone. */
  --type-display: clamp(3.25rem, 2.1rem + 4.6vw, 7.5rem);
  --type-section: clamp(2.75rem, 2rem + 3.2vw, 6.25rem);
  --type-script: clamp(2.375rem, 1.8rem + 2.25vw, 4.75rem);
  --type-heading: clamp(1.25rem, 1.08rem + 0.65vw, 2rem);
  --type-project-title: clamp(1.75rem, 1.4rem + 1.15vw, 2.875rem);
  --type-card-title: clamp(1.125rem, 1.02rem + 0.42vw, 1.5rem);
  --type-body-lg: clamp(1rem, 0.93rem + 0.3vw, 1.375rem);
  --type-body: clamp(0.9375rem, 0.9rem + 0.2vw, 1.125rem);
  --type-label: clamp(0.6875rem, 0.66rem + 0.1vw, 0.8125rem);
  --leading-display: 0.98;
  --leading-heading: 1.14;
  --leading-body: 1.45;
  --space-xs: 0.5rem;
  --space-sm: clamp(0.75rem, 0.68rem + 0.2vw, 1rem);
  --space-md: clamp(1rem, 0.88rem + 0.35vw, 1.5rem);
  --space-lg: clamp(1.5rem, 1.22rem + 0.75vw, 2.25rem);
  --space-xl: clamp(2.25rem, 1.75rem + 1.35vw, 3.5rem);
  --space-2xl: clamp(3.5rem, 2.6rem + 2.25vw, 6rem);
  --space-section: clamp(4.5rem, 3.2rem + 3.2vw, 8rem);
  --notebook-reading-runway: clamp(260px, 30vh, 340px);
  --notebook-chapter-gap: clamp(96px, 12vh, 128px);
  --notebook-testimonial-runway: clamp(130px, 15vh, 170px);
  --page: clamp(22px, 5.5vw, 88px);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

@supports (height: 1svh) {
  :root {
    --type-display: clamp(3.25rem, min(2.1rem + 4.6vw, 2.1rem + 5.6svh), 7.5rem);
    --type-section: clamp(2.75rem, min(2rem + 3.2vw, 2rem + 4svh), 6.25rem);
    --type-script: clamp(2.375rem, min(1.8rem + 2.25vw, 1.8rem + 2.8svh), 4.75rem);
  }
}
/* Browsers without small-viewport units (Safari < 15.4, Chrome < 108) fall back
   to vh so full-height cards and the hero still size correctly. */
@supports not (height: 1svh) {
  .hero, .notebook-sections, .notebook-panel, .notebook-panel__work-section, .notebook-panel__work-section--additional { min-height: 100vh; }
  .notebook-panel--idea { height: 100vh; }
  .hero-art { --avatar-max-width: 29.2vh; }
  .site-nav { height: calc(100vh - var(--header-height)); }
}

* { box-sizing: border-box; }
html { overflow-x: hidden; overflow-x: clip; scroll-behavior: smooth; background: var(--hero-black); }
body {
  margin: 0;
  overflow-x: hidden;
  overflow-x: clip;
  color: var(--hero-cream);
  background: var(--hero-black);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--hero-orange); outline-offset: 5px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 1000; top: 12px; left: 12px; padding: 12px 16px; color: var(--hero-black); background: var(--hero-orange); transform: translateY(-180%); transition: transform 0.2s ease; }
.skip-link:focus { transform: translateY(0); }

.site-header { position: fixed; z-index: 100; isolation: isolate; inset: 0 0 auto; height: 76px; min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 0 var(--page); color: var(--hero-black); border: 0; background: transparent; backface-visibility: hidden; transform: translateZ(0); transition: color 180ms ease; }
.site-header::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  border-bottom: 1px solid rgba(10, 10, 10, 0.12);
  background: rgba(231, 229, 226, 0.96);
  box-shadow: 0 4px 16px rgba(10, 10, 10, 0.045);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: background-color 180ms ease, border-color 180ms ease;
}
body.menu-open .site-header { color: var(--header-dark-grey); }
body.menu-open .site-header::before { border-color: rgba(255, 255, 255, 0.12); background: rgba(13, 13, 11, 0.96); }
.site-header.site-header--on-dark { color: var(--header-dark-grey); }
.site-header.site-header--on-dark::before { border-color: rgba(255, 255, 255, 0.16); background: rgba(10, 10, 10, 0.96); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); }
.wordmark { display: flex; align-items: baseline; gap: 10px; font-size: 16px; font-weight: 850; letter-spacing: -0.035em; }
.site-nav { display: flex; align-items: center; gap: clamp(22px, 3vw, 46px); }
.site-nav a {
  position: relative;
  z-index: 0;
  padding: 16px 0; /* 12px type + 32px padding = 44px tap target */
  font: 700 12px/1 "Courier New", monospace;
  letter-spacing: 0.08em;
  transition: color 180ms ease;
}
.site-nav a::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  width: calc(100% + 20px);
  height: 2.15em;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) rotate(-3deg) scale(0.72, 0.82);
  transition: opacity 160ms ease, transform 260ms var(--ease);
}
.site-nav a:hover,
.site-nav a:focus-visible { color: var(--hero-orange); }
.site-nav a:nth-child(even)::before { transform: translate(-50%, -50%) rotate(2deg) scale(0.72, 0.82); }
.site-nav a:hover::before,
.site-nav a:focus-visible::before { opacity: 1; transform: translate(-50%, -50%) rotate(-3deg) scale(1); }
.site-nav a:nth-child(even):hover::before,
.site-nav a:nth-child(even):focus-visible::before { transform: translate(-50%, -50%) rotate(2deg) scale(1); }
.menu-toggle { display: none; }

.hero { position: relative; isolation: isolate; min-height: max(760px, 100svh); overflow: hidden; color: var(--hero-cream); background: transparent; }
#main-content { position: relative; isolation: isolate; background: var(--page-paper); }
.portal-grain { position: absolute; z-index: 2; inset: 0; opacity: 0; visibility: hidden; pointer-events: none; background-image: url("./assets/process-book/orange-paper-grain.jpg"); background-repeat: repeat; background-position: center top; background-size: 512px 512px; filter: grayscale(1) contrast(1.18); mix-blend-mode: screen; will-change: opacity; }
.portal-viewport { position: absolute; z-index: 1; isolation: isolate; inset: 0; overflow: hidden; background: var(--hero-black); }
.hero-stage { position: absolute; isolation: isolate; inset: 0; overflow: visible; background: var(--hero-black); transform-origin: center; }
.book-open-destination { position: absolute; z-index: 30; inset: -1px; opacity: 0; visibility: hidden; pointer-events: none; background: var(--page-paper); }
.hero-scene { position: absolute; z-index: -3; inset: var(--header-height) 0 0; display: grid; place-items: center; overflow: hidden; background: var(--hero-black); }
.hero-art {
  --avatar-anchor-x: 30%;
  --avatar-anchor-y: 70.4%; /* feet on the orange cover band of the top stacked book */
  --avatar-width: 11.76%;
  --avatar-max-width: 29.2svh;
  --avatar-foot-inset: 5.44%;
  container-type: size;
  position: absolute;
  left: 50%;
  bottom: 0;
  width: auto;
  height: 147%; /* was 158.5%: smaller shelf buys ~40px more air between the nav bar and the cover top, shelf line unchanged */
  aspect-ratio: 4500 / 3124;
  transform: translate(-50%, 12.65%);
}
.hero-shelf { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: contain; }
.book-open-layer {
  /* Measured from the orange cover in the supplied 4500 × 3124 shelf artwork. */
  --book-left: 49.51%;
  --book-top: 26.83%;
  --book-width: 28.2%;
  --book-height: 59.47%;
  position: absolute;
  z-index: 30;
  inset: 0;
  pointer-events: none;
  perspective: 130cqw;
  perspective-origin: 52% 56%;
  transform-style: preserve-3d;
  will-change: transform;
}
.book-open-page,
.book-open-front {
  position: absolute;
  left: var(--book-left);
  top: var(--book-top);
  width: var(--book-width);
  height: var(--book-height);
}
.book-open-page {
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 9% 10%;
  overflow: hidden;
  border-radius: 0 7.5% 7.5% 0 / 0 5.5% 5.5% 0;
  color: var(--hero-black);
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.12), transparent 7%),
    linear-gradient(165deg, #fff 0%, #f6f1e8 100%);
  box-shadow: inset -1.1cqw 0 2.1cqw rgba(0, 0, 0, 0.14), 0 1.2cqw 2.6cqw rgba(0, 0, 0, 0.26);
  transform-origin: 50% 50%;
  will-change: transform;
}
.book-open-page::before {
  content: "";
  position: absolute;
  inset: 4%;
  border: 0.08cqw solid rgba(10, 10, 10, 0.16);
  opacity: var(--seam-fade, 1);
}
.book-open-page::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 12%;
  background: linear-gradient(90deg, rgba(33, 20, 11, 0.22), rgba(33, 20, 11, 0.08) 28%, transparent 100%);
  opacity: var(--seam-fade, 1);
  pointer-events: none;
}
.book-open-page__cast-shadow {
  position: absolute;
  z-index: 2;
  inset: -2% auto -2% 0;
  width: 48%;
  background: linear-gradient(90deg, rgba(20, 9, 4, 0.48), rgba(20, 9, 4, 0.22) 32%, transparent 100%);
  filter: blur(0.38cqw);
  opacity: 0;
  transform: scaleX(0.08);
  transform-origin: 0% 50%;
  will-change: transform, opacity;
  pointer-events: none;
}
.book-open-page__label { position: relative; z-index: 3; }
.book-open-page__label { max-width: 78%; font: 700 2.3cqw/0.92 "Rasonate", sans-serif; text-align: center; }
.book-open-front {
  --cover-depth: clamp(3px, 0.52cqw, 9px);
  z-index: 2;
  overflow: visible;
  transform: translateZ(0);
  transform-style: preserve-3d;
  transform-origin: 0% 50%;
  will-change: transform;
}
.book-open-front__crop,
.book-open-front__back {
  position: absolute;
  inset: 0;
  border-radius: 0 7.5% 7.5% 0 / 0 5.5% 5.5% 0;
  backface-visibility: hidden;
}
.book-open-front__crop {
  z-index: 2;
  overflow: hidden;
  transform: translateZ(calc(var(--cover-depth) / 2));
}
.book-open-front__image {
  position: absolute;
  left: -175.57%;
  top: -45.12%;
  width: 354.61%;
  height: 168.15%;
  max-width: none;
  object-fit: fill;
  user-select: none;
}
.book-open-front__sheen {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(108deg, transparent 18%, rgba(255, 214, 172, 0.34) 44%, transparent 63%),
    linear-gradient(90deg, rgba(25, 8, 2, 0.12), transparent 11%, transparent 84%, rgba(25, 8, 2, 0.16));
  mix-blend-mode: soft-light;
  opacity: 0;
  transform: translateX(-24%);
  will-change: transform, opacity;
  pointer-events: none;
}
.book-open-front__back {
  z-index: 1;
  overflow: hidden;
  border-radius: 7.5% 0 0 7.5% / 5.5% 0 0 5.5%;
  transform-style: preserve-3d;
  background:
    linear-gradient(90deg, rgba(72, 52, 36, 0.12), transparent 10%),
    linear-gradient(160deg, #fff 0%, #f3ede4 100%);
  box-shadow:
    inset 0.72cqw 0 1.45cqw rgba(57, 39, 25, 0.14),
    inset -0.24cqw 0 0.64cqw rgba(0, 0, 0, 0.06);
  transform: rotateY(180deg) translateZ(calc(var(--cover-depth) / 2));
}
.book-open-front__back::before {
  content: "";
  position: absolute;
  inset: 1.1% 1.2% 1.1% 1%;
  border-radius: 5.8% 0.8% 0.8% 5.8% / 4.3% 0.8% 0.8% 4.3%;
  background:
    linear-gradient(90deg, rgba(70, 49, 33, 0.08), transparent 8%),
    linear-gradient(160deg, #fff 0%, #f8f3eb 100%);
  box-shadow:
    inset 0.22cqw 0 0.58cqw rgba(69, 47, 31, 0.1),
    inset -0.16cqw 0 0.4cqw rgba(0, 0, 0, 0.04),
    0 0 0 0.06cqw rgba(91, 70, 51, 0.12);
  opacity: var(--seam-fade, 1);
  transform: translateZ(0.5px);
}
.book-open-front__back::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 11%;
  background: linear-gradient(90deg, rgba(42, 31, 22, 0.34), rgba(91, 70, 52, 0.14) 48%, transparent 100%);
  box-shadow: 0.24cqw 0 0.68cqw rgba(36, 25, 17, 0.16);
  opacity: var(--seam-fade, 1);
  transform: translateZ(0.8px);
}
.book-open-hinge {
  position: absolute;
  z-index: 3;
  left: var(--book-left);
  top: calc(var(--book-top) + 1%);
  width: clamp(2px, 0.46cqw, 8px);
  height: calc(var(--book-height) - 2%);
  border-radius: 60% 35% 35% 60%;
  background: linear-gradient(90deg, rgba(31, 10, 4, 0.84), #7c260c 35%, #e75e22 64%, rgba(39, 12, 5, 0.88));
  box-shadow: -0.2cqw 0 0.55cqw rgba(0, 0, 0, 0.35), 0.3cqw 0 0.75cqw rgba(0, 0, 0, 0.22);
  opacity: 0;
  transform: translateX(-35%) scaleY(0.96);
  transform-origin: 50% 50%;
  will-change: transform, opacity;
  pointer-events: none;
}
.book-open-front__edge {
  position: absolute;
  z-index: 3;
  display: block;
  backface-visibility: hidden;
  pointer-events: none;
}
.book-open-front__edge--top,
.book-open-front__edge--bottom {
  left: 1.5%;
  width: 93%;
  height: var(--cover-depth);
  background: linear-gradient(180deg, #ef6a27 0%, #8f2c0c 55%, #321008 100%);
}
.book-open-front__edge--top {
  top: 0;
  transform: translateY(-50%) rotateX(90deg);
}
.book-open-front__edge--bottom {
  bottom: 0;
  transform: translateY(50%) rotateX(-90deg);
}
.book-open-front__edge--right {
  top: 4%;
  right: 0;
  width: var(--cover-depth);
  height: 92%;
  border-radius: 0 80% 80% 0;
  background: linear-gradient(90deg, #2a0d06 0%, #a9370f 42%, #ef6827 72%, #321008 100%);
  transform: translateX(50%) rotateY(90deg);
}
.cover-wordmark { position: absolute; left: 54.003%; top: 55.148%; margin: 0; color: transparent; font-family: "Rasonate", sans-serif; font-size: 5.4cqw; font-style: normal; font-weight: 700; font-variation-settings: "wght" 700; line-height: 0.82; letter-spacing: -0.02em; white-space: nowrap; transform: translate(-50%, -50%) rotate(-90deg); transform-origin: center; }
.cover-wordmark span { display: inline; }
.cover-wordmark [data-portal-letter] { display: inline-block; }
.about-note { position: absolute; z-index: 12; display: block; height: auto; pointer-events: none; filter: drop-shadow(0 16px 18px rgba(0, 0, 0, 0.34)); }
.book-open-front .about-note--cover { z-index: 4; left: 64%; top: 41.1%; width: 78%; transform: translate(-50%, -50%) translateZ(calc(var(--cover-depth) / 2 + 2px)); backface-visibility: hidden; }
.about-note--mobile { display: none; }
.hero-shade { position: absolute; z-index: -2; inset: 0; pointer-events: none; background: rgba(0, 0, 0, 0.08); }
.hero-figure { position: absolute; z-index: 20; left: var(--avatar-anchor-x); top: var(--avatar-anchor-y); width: min(var(--avatar-width), var(--avatar-max-width)); transform: translate(calc(-50% + var(--parallax-x, 0px)), calc(-100% + var(--avatar-foot-inset))); transform-origin: bottom center; will-change: transform; }
.hero-character { position: relative; z-index: 2; display: block; width: 100%; max-width: none; transform-origin: bottom center; filter: drop-shadow(0 0 1.5px rgba(13,13,11,0.96)); }
.hero-character img { width: 100%; max-width: none; }
.scroll-hint { position: absolute; z-index: 3; top: 37%; right: 100%; width: 190%; margin: 0; color: var(--hero-cream); font-family: var(--font-handwriting); font-size: clamp(12px, 1.2cqw, 22px); font-weight: 400; line-height: 0.92; letter-spacing: 0.01em; text-align: right; white-space: nowrap; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.76); transform: rotate(-4deg); transform-origin: right center; }
.hero-shadow { position: absolute; z-index: 1; left: 50%; bottom: calc(var(--avatar-foot-inset) - 0.45%); width: 48%; max-width: none; opacity: 0.64; transform: translateX(-50%); }
.notebook-sections { position: relative; z-index: 3; min-height: 100svh; overflow: visible; color: var(--hero-black); background: transparent; }
.notebook-sections__viewport {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: 0;
  overflow: visible;
  background: var(--page-paper);
}
.notebook-panel {
  position: sticky;
  top: 0;
  isolation: isolate;
  display: grid;
  align-content: center;
  min-height: 100svh;
  padding: calc(var(--header-height) + clamp(46px, 7vh, 96px)) var(--page) clamp(74px, 10vh, 120px);
  overflow: hidden;
  color: var(--hero-black);
  background: var(--page-paper);
  backface-visibility: hidden;
}
.notebook-panel--paper,
.notebook-panel--dark,
.notebook-panel--orange {
  border-radius: clamp(28px, 4vw, 72px) clamp(28px, 4vw, 72px) 0 0;
  box-shadow: 0 -24px 64px rgba(10, 10, 10, 0.22);
}
.notebook-panel:not(:first-child) {
  margin-top: clamp(-30px, -2vw, -18px);
}
.notebook-panel--paper { color: var(--hero-black); background: var(--page-paper); }
.notebook-panel--paper::before,
.brand-entry::before,
.book-open-page > .entry-paper-texture {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(10, 10, 10, 0.24) 0 0.72px, transparent 1.05px),
    radial-gradient(circle, rgba(10, 10, 10, 0.15) 0 0.62px, transparent 0.95px),
    radial-gradient(circle, rgba(10, 10, 10, 0.1) 0 0.55px, transparent 0.85px),
    radial-gradient(circle, rgba(10, 10, 10, 0.06) 0 0.48px, transparent 0.78px);
  background-position: 0 0, 11px 17px, 23px 7px, 5px 31px;
  background-size: 29px 29px, 43px 43px, 61px 61px, 79px 79px;
  opacity: 0.78;
  mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(ellipse 108% 102% at 48% 48%, #000 20%, rgba(0, 0, 0, 0.92) 52%, rgba(0, 0, 0, 0.58) 78%, rgba(0, 0, 0, 0.2) 94%, transparent 100%);
  mask-image: radial-gradient(ellipse 108% 102% at 48% 48%, #000 20%, rgba(0, 0, 0, 0.92) 52%, rgba(0, 0, 0, 0.58) 78%, rgba(0, 0, 0, 0.2) 94%, transparent 100%);
}
.notebook-panel--paper > * { position: relative; z-index: 1; }
.notebook-panel--dark {
  color: var(--hero-cream);
  background-color: var(--hero-black);
  background-image:
    linear-gradient(rgba(10, 10, 10, 0.5), rgba(10, 10, 10, 0.5)),
    url('./assets/paper-texture-dark.jpg');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.notebook-panel--dark::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(243, 239, 230, 0.14) 0 0.72px, transparent 1.05px),
    radial-gradient(circle, rgba(243, 239, 230, 0.085) 0 0.62px, transparent 0.95px),
    radial-gradient(circle, rgba(243, 239, 230, 0.05) 0 0.55px, transparent 0.85px),
    radial-gradient(circle, rgba(243, 239, 230, 0.028) 0 0.48px, transparent 0.78px);
  background-position: 0 0, 11px 17px, 23px 7px, 5px 31px;
  background-size: 29px 29px, 43px 43px, 61px 61px, 79px 79px;
  opacity: 0.42;
  -webkit-mask-image: radial-gradient(ellipse 108% 102% at 48% 48%, #000 20%, rgba(0, 0, 0, 0.92) 52%, rgba(0, 0, 0, 0.58) 78%, rgba(0, 0, 0, 0.2) 94%, transparent 100%);
  mask-image: radial-gradient(ellipse 108% 102% at 48% 48%, #000 20%, rgba(0, 0, 0, 0.92) 52%, rgba(0, 0, 0, 0.58) 78%, rgba(0, 0, 0, 0.2) 94%, transparent 100%);
}
.notebook-panel--orange { color: var(--hero-black); background: var(--hero-orange); }
.notebook-panel--dark > * { position: relative; z-index: 1; }
.notebook-panel__content { width: min(1120px, 82vw); }
.notebook-panel h3 {
  max-width: none;
  width: 100%;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--type-display);
  font-variation-settings: "wght" 700;
  font-weight: 700;
  line-height: var(--leading-display);
  letter-spacing: -0.05em;
  text-wrap: balance;
}
.notebook-panel__lede {
  max-width: 48ch;
  margin: var(--space-xl) 0 0;
  font-size: var(--type-body-lg);
  line-height: var(--leading-body);
  letter-spacing: -0.015em;
}
.notebook-panel__margin-note {
  position: absolute;
  right: var(--page);
  bottom: clamp(84px, 12vh, 140px);
  margin: 0;
  font: 700 clamp(12px, 1vw, 17px)/1.2 "Courier New", monospace;
  letter-spacing: 0.05em;
  text-align: right;
  text-transform: uppercase;
  transform: rotate(-3deg);
}
.notebook-panel__idea-layout {
  display: block;
  width: 100%;
  padding-bottom: clamp(80px, 10vh, 140px);
}
.notebook-panel--idea .notebook-panel__content {
  width: 100%;
  max-width: none;
  text-align: center;
}
.notebook-panel--idea .notebook-panel__margin-note { bottom: clamp(44px, 5.5vh, 62px); }
.notebook-panel--idea h3.notebook-panel__formula-title {
  max-width: none;
  margin-inline: auto;
  font-family: var(--font-display);
  font-size: var(--type-section);
  font-variation-settings: "wght" 700;
  font-weight: 700;
  line-height: var(--leading-display);
  letter-spacing: -0.05em;
}
.notebook-panel--idea h3 > span {
  display: block;
  width: max-content;
  max-width: 100%;
}
.notebook-panel--idea h3 > span:not(.notebook-panel__handwritten) { white-space: nowrap; }
.notebook-panel--idea h3.notebook-panel__formula-title > span {
  width: auto;
  white-space: normal;
}
.notebook-panel__handwritten {
  position: relative;
  width: max-content;
  max-width: 100%;
  margin-top: 0.12em;
  font-family: var(--font-handwriting);
  font-size: 0.84em;
  font-weight: 400;
  line-height: 0.88;
  letter-spacing: 0.005em;
  white-space: nowrap;
}
.notebook-panel__handwritten::after {
  content: "";
  position: absolute;
  left: -0.02em;
  right: -0.12em;
  bottom: -0.21em;
  height: 0.075em;
  border-radius: 62% 44% 58% 48%;
  background: var(--hero-cream);
  opacity: 0.8;
  transform: rotate(-1deg) skewX(-5deg);
}
.notebook-panel--idea .notebook-panel__lede {
  width: 100%;
  max-width: 56ch;
  margin: var(--space-xl) auto 0;
}
.abc-venn {
  position: relative;
  width: min(46vw, 640px, 68vh);
  margin: clamp(42px, 6vh, 72px) auto;
  aspect-ratio: 1;
  color: var(--hero-cream);
}
.abc-venn__drawing {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.abc-venn__rings {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.15;
  stroke-linecap: round;
  opacity: 0.46;
  vector-effect: non-scaling-stroke;
}
.abc-venn__rings--echo {
  stroke-width: 0.8;
  opacity: 0.16;
}
.abc-venn__ring {
  transition: stroke 180ms var(--ease), stroke-width 180ms var(--ease), opacity 180ms var(--ease);
}
.abc-venn__pointer {
  fill: none;
  stroke: var(--hero-orange);
  stroke-width: 2.35;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.96;
  vector-effect: non-scaling-stroke;
}
.abc-venn__label,
.abc-venn__center {
  position: absolute;
  z-index: 2;
  display: grid;
  justify-items: center;
  margin: 0;
  text-align: center;
  transform: translate(-50%, -50%);
}
.abc-venn__label strong {
  font-family: var(--font-display);
  font-size: var(--type-section);
  font-variation-settings: "wght" 700;
  font-weight: 700;
  line-height: 0.78;
}
.abc-venn__label span,
.abc-venn__center {
  font: 700 var(--type-label)/1.05 var(--font-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
/* The rings carry their full words; the single letters were too cryptic. */
.abc-venn__label strong { display: none; }
.abc-venn__label span {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(15px, 1.6vw, 26px);
  font-variation-settings: "wght" 700;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: none;
}
.abc-venn__center {
  font-family: var(--font-handwriting);
  width: 22%;
  color: #fff;
  font-size: clamp(24px, 2.4vw, 38px);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 0.94;
  text-transform: lowercase;
}
.abc-venn__label--audience { top: 25%; left: 50%; }
.abc-venn__label--business { top: 67%; left: 30.755%; }
.abc-venn__label--culture { top: 67%; left: 69.245%; }
.abc-venn__center { top: 5%; left: 77%; transform: none; }
.notebook-panel--idea {
  position: relative;
  top: auto;
  bottom: auto;
  height: 100svh;
  min-height: 100svh;
  align-content: start;
  padding-bottom: clamp(38px, 4.5vh, 58px);
}
.notebook-panel__overscroll-content {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: start;
  width: 100%;
  min-height: 100%;
}
.notebook-panel__abc-section {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0 0 var(--notebook-reading-runway);
}
.abc-breakdown {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 32px);
  margin: 0;
  padding: 0;
}
.abc-breakdown > div {
  position: relative;
  display: block;
  min-width: 0;
  min-height: 100%;
  padding: clamp(22px, 2.2vw, 34px);
  text-align: left;
  border: 1px dashed rgba(243, 239, 230, 0.34);
  background: #10100f;
}
.abc-breakdown > div .abc-breakdown__corner { z-index: 8; color: rgba(243, 239, 230, 0.78); }
.abc-breakdown dt {
  display: inline;
  padding-inline: 0.06em;
  margin-inline: -0.06em;
  font-family: var(--font-display);
  font-size: var(--type-heading);
  font-variation-settings: "wght" 700;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: var(--leading-heading);
  background-image: linear-gradient(90deg, var(--hero-orange), var(--hero-orange));
  background-repeat: no-repeat;
  background-position: left 62%;
  background-size: 0% 82%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: color 140ms var(--ease), background-size 220ms var(--ease);
}
.abc-breakdown dd { margin: 0; }
.abc-breakdown strong {
  display: block;
  margin-top: 0.3em;
  font-family: var(--font-body);
  font-size: var(--type-body-lg);
  font-style: italic;
  font-weight: 600;
  line-height: 1.25;
}
.abc-breakdown dd p {
  max-width: 54ch;
  margin: 0.45em 0 0;
  color: rgba(243, 239, 230, 0.72);
  font-size: var(--type-body);
  line-height: var(--leading-body);
}

.notebook-panel__steps {
  position: absolute;
  right: var(--page);
  bottom: clamp(84px, 10vh, 120px);
  width: min(34vw, 520px);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--type-body);
  font-weight: 700;
  line-height: 1.15;
}
.notebook-panel__steps li { display: flex; align-items: baseline; gap: 18px; padding: 13px 0; border-bottom: 1px solid rgba(10, 10, 10, 0.3); }
.notebook-panel__steps span { font: 700 11px/1 "Courier New", monospace; letter-spacing: 0.08em; }
.notebook-panel--work h3 { max-width: none; font-size: var(--type-section); }
.notebook-panel--work-combined {
  position: relative;
  top: auto;
  display: block;
  min-height: 0;
  padding: 0;
}
.notebook-panel--work-combined h3 { max-width: none; font-size: var(--type-section); }
.notebook-panel__work-section {
  display: grid;
  align-content: center;
  min-height: 100svh;
  padding: calc(var(--header-height) + clamp(46px, 7vh, 96px)) var(--page) clamp(74px, 10vh, 120px);
}
.notebook-panel__work-section--featured {
  align-content: center;
  padding-bottom: var(--notebook-chapter-gap);
}
.notebook-panel__work-section--featured > .notebook-panel__content,
.notebook-panel__work-section--additional > .notebook-panel__content {
  width: 100%;
  max-width: none;
  justify-self: stretch;
  text-align: center;
}
.notebook-panel__work-section--featured h3,
.notebook-panel__work-section--additional h3 {
  width: 100%;
  max-width: none;
}
.notebook-panel__work-section--featured .notebook-panel__lede,
.notebook-panel__work-section--additional .notebook-panel__lede {
  width: 100%;
  max-width: 62ch;
  margin-inline: auto;
}
.notebook-panel__featured-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 32px);
  margin-top: clamp(34px, 5vh, 58px);
  margin-inline: 0;
}
.notebook-panel__featured-card {
  --polaroid-tilt: -0.8deg;
  position: relative;
  display: block;
  min-width: 0;
  padding: clamp(10px, 0.9vw, 14px) clamp(10px, 0.9vw, 14px) clamp(16px, 1.4vw, 22px);
  color: inherit;
  text-decoration: none;
  border: 1px dashed rgba(10, 10, 10, 0.34);
  border-radius: 0;
  background: var(--project-card-surface);
  box-shadow: none;
  isolation: isolate;
  transition: transform 260ms var(--ease), background 220ms ease, border-color 220ms ease;
}
.notebook-panel__featured-corner {
  position: absolute;
  z-index: 6;
  width: 12px;
  height: 12px;
  color: rgba(10, 10, 10, 0.62);
  pointer-events: none;
  transition: color 220ms ease;
}
.notebook-panel__featured-corner::before {
  position: absolute;
  inset: 0;
  content: "";
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0.5C13.5 0.7 13.7 6.7 14.6 8.8C16.8 9.5 23.1 9.6 23.5 11.4C23.5 13 17.2 13.7 14.8 14.5C14.1 16.8 13.8 23.3 12.1 23.5C10.4 23.4 10 17.1 9.3 14.8C6.9 14.1 0.6 13.8 0.5 12.1C0.6 10.4 6.6 9.8 8.9 9.1C9.5 6.6 10.2 0.5 12 0.5Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0.5C13.5 0.7 13.7 6.7 14.6 8.8C16.8 9.5 23.1 9.6 23.5 11.4C23.5 13 17.2 13.7 14.8 14.5C14.1 16.8 13.8 23.3 12.1 23.5C10.4 23.4 10 17.1 9.3 14.8C6.9 14.1 0.6 13.8 0.5 12.1C0.6 10.4 6.6 9.8 8.9 9.1C9.5 6.6 10.2 0.5 12 0.5Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
  transform: rotate(-4deg);
}
.notebook-panel__featured-corner::after { display: none; }
.notebook-panel__featured-corner--top-left { left: 0; top: 0; transform: translate(-50%, -50%); }
.notebook-panel__featured-corner--top-right { right: 0; top: 0; transform: translate(50%, -50%); }
.notebook-panel__featured-corner--bottom-left { left: 0; bottom: 0; transform: translate(-50%, 50%); }
.notebook-panel__featured-corner--bottom-right { right: 0; bottom: 0; transform: translate(50%, 50%); }
.notebook-panel__featured-card:nth-child(2) { --polaroid-tilt: 0.65deg; }
.notebook-panel__featured-card:nth-child(3) { --polaroid-tilt: -0.45deg; }
.notebook-panel__featured-card:hover,
.notebook-panel__featured-card:focus-visible {
  transform: translateY(-2px);
  border-color: var(--hero-orange);
  background: var(--project-card-surface-hover);
}
.notebook-panel__featured-card:hover .notebook-panel__featured-corner,
.notebook-panel__featured-card:focus-visible .notebook-panel__featured-corner { color: var(--hero-orange); }
.notebook-panel__featured-card:focus-visible {
  outline: 3px solid var(--hero-black);
  outline-offset: 4px;
}
.notebook-panel__featured-polaroid-stack {
  position: relative;
  z-index: 2;
  display: grid;
  width: min(72%, 560px);
  margin: clamp(18px, 2vw, 30px) auto;
  isolation: isolate;
}
.notebook-panel__featured-polaroid {
  position: relative;
  grid-area: 1 / 1;
  display: block;
  min-width: 0;
  aspect-ratio: 1;
  padding: clamp(10px, 0.85vw, 15px) clamp(10px, 0.85vw, 15px) clamp(42px, 4.1vw, 72px);
  background: #fdfcf8;
  box-shadow:
    0 2px 2px rgba(10, 10, 10, 0.16),
    0 9px 18px rgba(10, 10, 10, 0.13);
  transform-origin: center;
  transition: transform 440ms var(--ease), box-shadow 320ms ease;
}
.notebook-panel__featured-polaroid--back {
  z-index: 1;
  transform: translate(-5%, 3%) rotate(-3deg) scale(0.96);
}
.notebook-panel__featured-polaroid--middle {
  z-index: 2;
  transform: translate(5%, 4%) rotate(3deg) scale(0.96);
}
.notebook-panel__featured-polaroid--front {
  z-index: 3;
  transform: rotate(var(--polaroid-tilt));
}
.notebook-panel__featured-tape {
  position: absolute;
  z-index: 4;
  top: clamp(-22px, -1.2vw, -13px);
  left: clamp(-32px, -2vw, -18px);
  width: clamp(104px, 9.5vw, 168px);
  height: auto;
  pointer-events: none;
  transform: rotate(-38deg);
  transform-origin: center;
  filter: drop-shadow(0 2px 1.5px rgba(10, 10, 10, 0.22));
}
.notebook-panel__featured-card:nth-child(2) .notebook-panel__featured-tape {
  top: clamp(-18px, -0.9vw, -10px);
  left: auto;
  right: clamp(-28px, -1.7vw, -15px);
  width: clamp(108px, 9.8vw, 174px);
  transform: rotate(34deg);
}
.notebook-panel__featured-card:nth-child(3) .notebook-panel__featured-tape {
  left: clamp(-26px, -1.6vw, -14px);
  transform: rotate(-31deg);
}
@media (min-width: 821px) {
  .notebook-panel__featured-grid {
    width: 100%;
    margin-inline: 0;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(36px, 4vw, 64px);
  }
  .notebook-panel__featured-card {
    width: 100%;
    justify-self: stretch;
    z-index: auto;
    transform: none;
  }
  .notebook-panel__featured-card:hover,
  .notebook-panel__featured-card:focus-visible {
    transform: translateY(-2px);
  }
}
@media (min-width: 1100px) {
  .notebook-panel__featured-card {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: 1fr;
    column-gap: clamp(26px, 3vw, 48px);
    align-items: center;
    padding: clamp(12px, 1vw, 16px) clamp(22px, 2vw, 34px) clamp(12px, 1vw, 16px) clamp(12px, 1vw, 16px);
  }
  .notebook-panel__featured-card .notebook-panel__featured-polaroid-stack {
    grid-column: 1;
    grid-row: 1;
  }
  .notebook-panel__featured-card .notebook-panel__featured-copy {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    padding-left: clamp(26px, 3vw, 48px);
    border-left: 1px dashed rgba(10, 10, 10, 0.24);
  }
  .notebook-panel__featured-card:nth-child(even) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: clamp(12px, 1vw, 16px) clamp(12px, 1vw, 16px) clamp(12px, 1vw, 16px) clamp(22px, 2vw, 34px);
  }
  .notebook-panel__featured-card:nth-child(even) .notebook-panel__featured-polaroid-stack {
    grid-column: 2;
  }
  .notebook-panel__featured-card:nth-child(even) .notebook-panel__featured-copy {
    grid-column: 1;
    padding-right: clamp(26px, 3vw, 48px);
    padding-left: 0;
    border-right: 1px dashed rgba(10, 10, 10, 0.24);
    border-left: 0;
  }
}
.notebook-panel__featured-image {
  display: block;
  height: 100%;
  overflow: hidden;
  border-radius: 0;
  background: rgba(10, 10, 10, 0.08);
}
.notebook-panel__featured-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.01);
  transition: transform 500ms var(--ease), filter 300ms ease;
}
.notebook-panel__featured-card:hover .notebook-panel__featured-image img,
.notebook-panel__featured-card:focus-visible .notebook-panel__featured-image img {
  transform: scale(1.045);
  filter: saturate(1.06) contrast(1.02);
}
.notebook-panel__featured-card:hover .notebook-panel__featured-polaroid--front,
.notebook-panel__featured-card:focus-visible .notebook-panel__featured-polaroid--front {
  transform: rotate(0deg) translateY(-2px);
  box-shadow:
    0 2px 2px rgba(10, 10, 10, 0.14),
    0 11px 22px rgba(10, 10, 10, 0.15);
}
html:not(.has-polaroid-motion) .notebook-panel__featured-card:hover .notebook-panel__featured-polaroid--back,
html:not(.has-polaroid-motion) .notebook-panel__featured-card:focus-visible .notebook-panel__featured-polaroid--back {
  transform: translate(-35%, 8%) rotate(-7deg) scale(0.92);
}
html:not(.has-polaroid-motion) .notebook-panel__featured-card:hover .notebook-panel__featured-polaroid--middle,
html:not(.has-polaroid-motion) .notebook-panel__featured-card:focus-visible .notebook-panel__featured-polaroid--middle {
  transform: translate(35%, 9%) rotate(7deg) scale(0.92);
}
.notebook-panel__featured-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: baseline;
  justify-items: center;
  gap: var(--space-sm);
  width: 100%;
  padding: var(--space-md) 4px 0;
  text-align: center;
}
.notebook-panel__featured-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  text-align: center;
}
.notebook-panel__featured-meta > span { font: 700 var(--type-label)/1 var(--font-label); letter-spacing: 0.08em; }
.notebook-panel__featured-meta strong {
  font: 650 var(--type-project-title)/1.02 var(--font-body);
  letter-spacing: -0.035em;
}
.notebook-panel__featured-proof {
  display: block;
  max-width: 42ch;
  padding: var(--space-sm) 4px 0;
  font-size: var(--type-body);
  line-height: var(--leading-body);
  opacity: 0.7;
}
.notebook-panel__featured-cta {
  position: relative;
  display: inline-grid;
  grid-template-columns: auto;
  align-items: center;
  justify-items: center;
  justify-content: center;
  width: min(100%, clamp(260px, 21vw, 340px));
  min-height: 44px;
  aspect-ratio: 1000 / 222;
  margin: clamp(18px, 2vw, 28px) auto 0;
  padding: 0 clamp(30px, 2.4vw, 40px);
  color: var(--hero-black);
  font: 700 clamp(11px, 0.82vw, 13px)/1 "Courier New", monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  isolation: isolate;
  transition: color 180ms ease, transform 180ms var(--ease);
}
.notebook-panel__featured-cta > img {
  position: absolute;
  z-index: -1;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  transform: rotate(-0.5deg) scale(1.03, 1.02);
  transform-origin: center;
  transition: transform 220ms var(--ease), filter 220ms ease;
}
.notebook-panel__featured-cta-label {
  position: relative;
  z-index: 1;
  top: clamp(1px, 0.2vw, 3px);
}
.notebook-panel__featured-cta-label { flex: 0 0 auto; white-space: nowrap; }
.notebook-panel__featured-card:hover .notebook-panel__featured-cta,
.notebook-panel__featured-card:focus-visible .notebook-panel__featured-cta { transform: translateY(-1px); }
.notebook-panel__featured-card:hover .notebook-panel__featured-cta > img,
.notebook-panel__featured-card:focus-visible .notebook-panel__featured-cta > img {
  transform: rotate(0.25deg) scale(1.065, 1.06);
  filter: invert(43%) sepia(99%) saturate(3525%) hue-rotate(5deg) brightness(101%) contrast(99%);
}
.notebook-panel__work-section--additional {
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  align-items: start;
  gap: clamp(34px, 5vw, 72px);
  min-height: 100svh;
  padding-top: var(--notebook-chapter-gap);
  padding-bottom: var(--notebook-reading-runway);
  border-top: 1px solid rgba(10, 10, 10, 0.16);
}
.notebook-panel__work-section--additional .notebook-panel__content {
  min-width: 0;
  text-align: center;
}
.notebook-panel__work-section--additional .notebook-panel__lede {
  overflow-wrap: anywhere;
}
.notebook-panel__work-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 32px);
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.notebook-panel__work-list > li { min-width: 0; }
.notebook-panel__work-index {
  position: relative;
  width: 100%;
}
.notebook-panel__work-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  padding: clamp(10px, 0.9vw, 14px);
  color: inherit;
  border: 1px dashed rgba(10, 10, 10, 0.34);
  background: var(--project-card-surface);
  isolation: isolate;
  text-decoration: none;
  cursor: pointer;
  transition: transform 260ms var(--ease), background 220ms ease, border-color 220ms ease;
}
.notebook-panel__work-card:hover,
.notebook-panel__work-card:focus-visible {
  transform: translateY(-4px);
  border-color: var(--hero-orange);
  background: var(--project-card-surface-hover);
}
.notebook-panel__work-card:focus-visible { outline: 3px solid var(--hero-orange); outline-offset: 4px; }
.notebook-panel__work-card:hover .notebook-panel__featured-corner,
.notebook-panel__work-card:focus-visible .notebook-panel__featured-corner { color: var(--hero-orange); }
.notebook-panel__work-card-image {
  margin: 0;
  overflow: hidden;
  background: rgba(10, 10, 10, 0.08);
}
.notebook-panel__work-card-image img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
  transition: transform 420ms var(--ease), filter 320ms ease;
}
.notebook-panel__work-card:hover .notebook-panel__work-card-image img,
.notebook-panel__work-card:focus-visible .notebook-panel__work-card-image img {
  transform: scale(1.045);
  filter: saturate(1.06) contrast(1.02);
}
.notebook-panel__work-card-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-md) 4px var(--space-sm);
  text-align: center;
}
.notebook-panel__work-card-copy h4 {
  max-width: none;
  margin: 0 auto;
  padding: 0.02em 0.14em 0.08em;
  font: 650 var(--type-card-title)/var(--leading-heading) var(--font-body);
  letter-spacing: -0.02em;
  white-space: nowrap;
  background-image: linear-gradient(90deg, var(--hero-orange), var(--hero-orange));
  background-repeat: no-repeat;
  background-position: left 58%;
  background-size: 0% 88%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: color 120ms ease, background-size 180ms var(--ease);
}
.notebook-panel__work-card:hover .notebook-panel__work-card-copy h4,
.notebook-panel__work-card:focus-visible .notebook-panel__work-card-copy h4 {
  color: #fff;
  background-size: 100% 88%;
}
.notebook-panel__credibility-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  gap: clamp(18px, 2.5vh, 28px);
  width: 100%;
}
.notebook-panel--credibility {
  padding-bottom: calc(var(--notebook-testimonial-runway) - clamp(48px, 6vh, 72px));
}
.notebook-panel__credibility-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  align-items: start;
  min-width: 0;
  text-align: center;
}
.notebook-panel--credibility .notebook-panel__content { width: 100%; }
.notebook-panel--credibility h3 {
  width: 100%;
  max-width: none;
  font-size: var(--type-section);
  text-align: center;
}
.credibility-carousel { min-width: 0; }
.credibility-carousel--quotes {
  width: min(100%, 1120px);
  justify-self: center;
  margin-bottom: clamp(48px, 6vh, 72px);
  padding: clamp(10px, 1.2vw, 16px);
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.credibility-carousel__header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.credibility-carousel__header[hidden] {
  display: none;
}
/* One "Read in full" for the current card, placed under the strip and above the
   dots; the per-card buttons stay in the DOM for the dialog's index mapping. */
.testimonial-card .testimonial-card__read { display: none; }
.credibility-carousel__header .testimonial-read-current {
  position: static;
  top: auto;
  right: auto;
  min-height: 44px;
  margin: 0;
  font-size: clamp(10px, 0.72vw, 12px);
}
.credibility-carousel--quotes .credibility-carousel__header { gap: 6px; }
.credibility-carousel--quotes .credibility-carousel__header {
  flex-direction: column;
  margin-top: clamp(18px, 2.5vh, 28px);
  padding: 0;
  border: 0;
}
.carousel-position {
  min-width: 4.8ch;
  color: inherit;
  border: 0;
  background: transparent;
  font: 700 var(--type-label)/1 var(--font-label);
  letter-spacing: 0.08em;
  text-align: right;
}
.carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.4vw, 18px);
}
.carousel-controls button,
.testimonial-stage__arrow {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  color: var(--hero-black);
  border: 1px solid rgba(10, 10, 10, 0.42);
  border-radius: 999px;
  background: transparent;
  font: 500 clamp(17px, 1.3vw, 22px)/1 Arial, sans-serif;
  cursor: pointer;
  transition: color 160ms var(--ease), background 160ms var(--ease), opacity 160ms var(--ease);
}
.carousel-controls button:hover,
.carousel-controls button:focus-visible,
.testimonial-stage__arrow:hover,
.testimonial-stage__arrow:focus-visible { color: var(--page-paper); background: var(--hero-black); }
.testimonial-stage__arrow[data-carousel-next] { color: var(--page-paper); background: var(--hero-black); }
.testimonial-stage__arrow[data-carousel-next]:hover,
.testimonial-stage__arrow[data-carousel-next]:focus-visible { color: var(--hero-black); background: var(--hero-orange); }
.carousel-controls button:disabled,
.testimonial-stage__arrow:disabled { opacity: 0.28; cursor: default; }
.carousel-controls button:disabled:hover,
.testimonial-stage__arrow:disabled:hover { color: var(--hero-black); background: transparent; }
.carousel-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.carousel-controls .carousel-dot {
  position: relative;
  width: 28px;
  height: 44px;
  border: 0;
  background: transparent;
}
.carousel-controls .carousel-dot::before {
  width: 4px;
  height: 4px;
  content: "";
  border: 1px solid rgba(10, 10, 10, 0.30);
  border-radius: 50%;
  background: transparent;
  transition: transform 180ms var(--ease), background 180ms ease, border-color 180ms ease;
}
.carousel-controls .carousel-dot:hover,
.carousel-controls .carousel-dot:focus-visible { color: inherit; background: transparent; }
.carousel-controls .carousel-dot:hover::before { border-color: var(--hero-orange); transform: scale(1.1); }
.carousel-controls .carousel-dot[aria-current="true"]::before {
  border-color: rgba(10, 10, 10, 0.7);
  background: rgba(10, 10, 10, 0.7);
  transform: scale(1);
}
.carousel-track {
  overscroll-behavior-inline: contain;
  scroll-behavior: smooth;
  scroll-snap-type: inline mandatory;
  scrollbar-width: none;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track:focus-visible { outline: 2px solid var(--hero-orange); outline-offset: 4px; }
.credibility-carousel--brands {
  --brand-marquee-gap: clamp(30px, 3.5vw, 64px);
  width: calc(100% + (var(--page) * 2));
  margin-inline: calc(var(--page) * -1);
  overflow: hidden;
}
.brand-marquee {
  position: relative;
  min-width: 0;
  overflow: hidden;
  height: clamp(126px, 12vw, 176px);
  padding: 0;
  background: transparent;
  isolation: isolate;
}
.brand-marquee:focus-visible { outline: 2px solid var(--hero-orange); outline-offset: -2px; }
.brand-marquee__scene {
  display: block;
  width: 100%;
  height: 100%;
}
.brand-marquee__track {
  display: flex;
  align-items: center;
  width: max-content;
  height: 100%;
  will-change: transform;
}
.brand-logo-grid {
  display: flex;
  flex: 0 0 auto;
  gap: var(--brand-marquee-gap);
  width: max-content;
  margin: 0;
  padding: 0 var(--brand-marquee-gap) 0 0;
  list-style: none;
}
.brand-logo-grid li {
  display: grid;
  place-items: center;
  flex: 0 0 clamp(150px, 13vw, 210px);
  min-height: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.brand-logo-grid img {
  width: auto;
  max-width: min(100%, var(--logo-optical-width, 132px));
  height: auto;
  max-height: var(--logo-optical-height, 42px);
  object-fit: contain;
  filter: grayscale(1) brightness(0);
  opacity: 0.84;
}
.brand-logo-grid [data-logo="netflix"] { --logo-optical-width: 140px; --logo-optical-height: 46px; }
.brand-logo-grid [data-logo="wongfu"] { --logo-optical-width: 160px; --logo-optical-height: 42px; }
.brand-logo-grid [data-logo="pubg"] { --logo-optical-width: 82px; --logo-optical-height: 58px; }
.brand-logo-grid [data-logo="supercell"] { --logo-optical-width: 72px; --logo-optical-height: 58px; }
.brand-logo-grid [data-logo="tower-of-fantasy"] { --logo-optical-width: 136px; --logo-optical-height: 44px; }
.brand-logo-grid [data-logo="nikke"] { --logo-optical-width: 102px; --logo-optical-height: 52px; }
.brand-logo-grid [data-logo="nba-infinite"] { --logo-optical-width: 142px; --logo-optical-height: 42px; }
.brand-logo-grid [data-logo="honor-of-kings"] { --logo-optical-width: 132px; --logo-optical-height: 44px; }
.brand-logo-grid [data-logo="tencent"] { --logo-optical-width: 164px; --logo-optical-height: 34px; }
.brand-logo-grid [data-logo="ibuypower"] { --logo-optical-width: 90px; --logo-optical-height: 56px; }
.brand-logo-grid [data-logo="rog"] { --logo-optical-width: 172px; --logo-optical-height: 34px; }
.brand-logo-grid [data-logo="beacons"] { --logo-optical-width: 136px; --logo-optical-height: 44px; }
.brand-logo-grid li.brand-logo-grid__item--wongfu {
  flex-basis: clamp(170px, 15vw, 220px);
}
.brand-logo-grid__item--wongfu img {
  max-width: min(100%, var(--logo-optical-width));
  max-height: var(--logo-optical-height);
  filter: grayscale(1) contrast(3);
  mix-blend-mode: multiply;
  opacity: 0.96;
}
.testimonial-viewport {
  position: relative;
  z-index: 1;
  isolation: isolate;
  overflow: visible;
  border: 1px dashed rgba(10, 10, 10, 0.34);
  background: var(--project-card-surface);
}
.testimonial-stage {
  display: grid;
  grid-template-columns: auto minmax(0, 980px) auto;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.6vw, 24px);
  width: 100%;
}
.testimonial-stage__arrow,
.testimonial-stage__arrow[data-carousel-next] {
  position: relative;
  z-index: 3;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  color: var(--hero-black);
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: clamp(22px, 1.8vw, 30px);
  transition: color 160ms var(--ease), transform 180ms var(--ease), opacity 160ms var(--ease);
}
.testimonial-stage__arrow:hover,
.testimonial-stage__arrow:focus-visible,
.testimonial-stage__arrow[data-carousel-next]:hover,
.testimonial-stage__arrow[data-carousel-next]:focus-visible {
  color: var(--hero-black);
  background: transparent;
}
.testimonial-stage__chevron {
  width: 16px;
  height: 16px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
}
.testimonial-stage__arrow[data-carousel-previous] .testimonial-stage__chevron { transform: rotate(-135deg); }
.testimonial-stage__arrow[data-carousel-previous]:not(:disabled):hover,
.testimonial-stage__arrow[data-carousel-previous]:not(:disabled):focus-visible { transform: translateX(-3px); }
.testimonial-stage__arrow[data-carousel-next]:not(:disabled):hover,
.testimonial-stage__arrow[data-carousel-next]:not(:disabled):focus-visible { transform: translateX(3px); }
.testimonial-stage__arrow:disabled,
.testimonial-stage__arrow:disabled:hover { color: var(--hero-black); background: transparent; transform: none; }
.testimonial-clip {
  overflow: hidden;
}
.testimonial-list {
  display: flex;
  gap: 0;
  cursor: grab;
  user-select: none;
  width: 100%;
  overflow: visible;
  padding: 0;
  transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.testimonial-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
  place-items: center;
  align-content: center;
  gap: clamp(48px, 5vw, 72px);
  flex: 0 0 100%;
  min-width: 100%;
  min-height: 0;
  margin: 0;
  padding: clamp(30px, 4vw, 52px);
  border: 0;
  border-radius: 0;
  background: transparent;
  text-align: center;
  scroll-snap-align: start;
}
.testimonial-card__corner {
  position: absolute;
  width: 12px;
  height: 12px;
  color: rgba(10, 10, 10, 0.62);
}
.testimonial-card__corner::before {
  position: absolute;
  inset: 0;
  content: "";
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0.5C13.5 0.7 13.7 6.7 14.6 8.8C16.8 9.5 23.1 9.6 23.5 11.4C23.5 13 17.2 13.7 14.8 14.5C14.1 16.8 13.8 23.3 12.1 23.5C10.4 23.4 10 17.1 9.3 14.8C6.9 14.1 0.6 13.8 0.5 12.1C0.6 10.4 6.6 9.8 8.9 9.1C9.5 6.6 10.2 0.5 12 0.5Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0.5C13.5 0.7 13.7 6.7 14.6 8.8C16.8 9.5 23.1 9.6 23.5 11.4C23.5 13 17.2 13.7 14.8 14.5C14.1 16.8 13.8 23.3 12.1 23.5C10.4 23.4 10 17.1 9.3 14.8C6.9 14.1 0.6 13.8 0.5 12.1C0.6 10.4 6.6 9.8 8.9 9.1C9.5 6.6 10.2 0.5 12 0.5Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
  transform: rotate(-4deg);
}
.testimonial-card__corner::after { display: none; }
.testimonial-card__corner--top-left { left: 0; top: 0; transform: translate(-50%, -50%); }
.testimonial-card__corner--top-right { right: 0; top: 0; transform: translate(50%, -50%); }
.testimonial-card__corner--bottom-left { left: 0; bottom: 0; transform: translate(-50%, 50%); }
.testimonial-card__corner--bottom-right { right: 0; bottom: 0; transform: translate(50%, 50%); }
.testimonial-card__label {
  font: 700 var(--type-label)/1.2 var(--font-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.58;
}
.testimonial-card > p {
  max-width: 43ch;
  margin: 0 auto;
  font-family: var(--font-display);
  font-size: var(--type-heading);
  font-variation-settings: "wght" 600;
  font-weight: 600;
  line-height: var(--leading-heading);
  letter-spacing: -0.025em;
}
.testimonial-card footer {
  display: grid;
  grid-template-columns: auto minmax(0, auto);
  align-items: center;
  justify-content: center;
  column-gap: 10px;
  row-gap: 0;
  font: 700 var(--type-label)/1.25 var(--font-label);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.testimonial-card__avatar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: var(--hero-cream);
  border-radius: 999px;
  background: var(--hero-black);
  font-size: 9px;
  letter-spacing: 0.04em;
}
.testimonial-card__author { display: grid; gap: 2px; text-align: left; }
.testimonial-card cite { font-style: normal; }
.testimonial-card footer span { opacity: 0.58; }
.testimonial-card footer .testimonial-card__avatar,
.testimonial-card footer .testimonial-card__author { opacity: 1; }
.testimonial-card__author > span { opacity: 0.58; }
.testimonial-card__read {
  position: absolute;
  top: clamp(16px, 2.3vw, 30px);
  right: clamp(16px, 2.3vw, 30px);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 2px;
  color: rgba(10, 10, 10, 0.5);
  border: 0;
  border-bottom: 1px solid rgba(10, 10, 10, 0.24);
  background: transparent;
  font: 700 clamp(9px, 0.68vw, 11px)/1 var(--font-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 160ms var(--ease), border-color 160ms var(--ease);
}
.testimonial-card__read:hover,
.testimonial-card__read:focus-visible {
  color: var(--hero-black);
  border-color: var(--hero-black);
}
.testimonial-card__read:focus-visible {
  outline: 2px solid var(--hero-orange);
  outline-offset: 5px;
}
.testimonial-dialog {
  width: min(1120px, calc(100vw - 40px));
  max-width: none;
  max-height: min(88dvh, 920px);
  margin: auto;
  padding: 0;
  color: var(--hero-black);
  border: 1px solid rgba(10, 10, 10, 0.28);
  background-color: var(--project-card-surface);
  background-image:
    radial-gradient(circle, rgba(10, 10, 10, 0.09) 0 0.6px, transparent 0.9px),
    radial-gradient(circle, rgba(10, 10, 10, 0.045) 0 0.48px, transparent 0.78px);
  background-position: 0 0, 11px 9px;
  background-size: 20px 20px, 29px 29px;
  box-shadow: 0 24px 70px rgba(10, 10, 10, 0.28);
  overflow: auto;
  overscroll-behavior: contain;
}
.testimonial-dialog::backdrop {
  background: rgba(10, 10, 10, 0.58);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.testimonial-dialog__chrome {
  position: sticky;
  z-index: 2;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(10, 10, 10, 0.16);
  background: rgba(243, 241, 237, 0.94);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.testimonial-dialog__navigation {
  display: flex;
  align-items: center;
  gap: 4px;
}
.testimonial-dialog__arrow {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  color: var(--hero-black);
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: color 160ms var(--ease), transform 180ms var(--ease), opacity 160ms var(--ease);
}
.testimonial-dialog__chevron {
  width: 15px;
  height: 15px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(-135deg);
}
.testimonial-dialog__arrow[data-testimonial-next] .testimonial-dialog__chevron { transform: rotate(45deg); }
.testimonial-dialog__arrow[data-testimonial-previous]:not(:disabled):hover,
.testimonial-dialog__arrow[data-testimonial-previous]:not(:disabled):focus-visible { transform: translateX(-3px); }
.testimonial-dialog__arrow[data-testimonial-next]:not(:disabled):hover,
.testimonial-dialog__arrow[data-testimonial-next]:not(:disabled):focus-visible { transform: translateX(3px); }
.testimonial-dialog__arrow:disabled { opacity: 0.25; cursor: default; }
.testimonial-dialog__arrow:focus-visible {
  outline: 2px solid var(--hero-orange);
  outline-offset: 0;
}
.testimonial-dialog__position {
  min-width: 54px;
  color: rgba(10, 10, 10, 0.58);
  font: 700 var(--type-label)/1 var(--font-label);
  letter-spacing: 0.05em;
  text-align: center;
}
.testimonial-dialog__close {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  color: var(--hero-black);
  border: 1px solid rgba(10, 10, 10, 0.28);
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  transition: color 160ms var(--ease), border-color 160ms var(--ease), background 160ms var(--ease);
}
.testimonial-dialog__close-icon {
  font: 400 28px/1 var(--font-body);
  transform: translateY(-1px);
}
.testimonial-dialog__close:hover,
.testimonial-dialog__close:focus-visible {
  color: var(--hero-orange);
  border-color: var(--hero-orange);
  background: rgba(231, 89, 23, 0.06);
}
.testimonial-dialog__close:focus-visible {
  outline: 2px solid var(--hero-orange);
  outline-offset: 3px;
}
.testimonial-dialog__content {
  padding: clamp(24px, 3vw, 42px) clamp(28px, 6vw, 88px) clamp(48px, 7vw, 96px);
}
.testimonial-dialog__article { max-width: 900px; margin: 0 auto; }
.testimonial-dialog__eyebrow,
.testimonial-dialog__role {
  margin: 0;
  font: 700 var(--type-label)/1.35 var(--font-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.testimonial-dialog__eyebrow { color: var(--hero-orange); }
.testimonial-dialog h2 {
  margin: 18px 0 8px;
  color: var(--hero-black);
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 72px);
  font-variation-settings: "wght" 650;
  font-weight: 650;
  line-height: 0.98;
  letter-spacing: -0.045em;
}
.testimonial-dialog__role { color: rgba(10, 10, 10, 0.58); }
.testimonial-dialog__body {
  display: grid;
  gap: clamp(22px, 3vw, 34px);
  margin-top: clamp(40px, 6vw, 72px);
}
.testimonial-dialog__body p {
  margin: 0;
  color: rgba(10, 10, 10, 0.86);
  font-family: var(--font-body);
  font-size: clamp(18px, 2vw, 25px);
  line-height: 1.58;
}
body.testimonial-dialog-open { overflow: hidden; }
/* Compact desktop windows keep the same simple order while reducing each
   rail card enough to preserve a useful glimpse of the next item. */
@media (min-width: 820.001px) and (max-width: 1280px) {
  .brand-logo-grid li { flex-basis: clamp(136px, 17vw, 190px); }
  .testimonial-card { flex-basis: 100%; padding-block: clamp(64px, 8vh, 84px); gap: clamp(56px, 7vh, 76px); }
  .testimonial-card__author { gap: 8px; }
  .testimonial-card footer { line-height: 1.4; }
  .testimonial-card > p { max-width: 30ch; line-height: 1.3; }
}
.notebook-panel__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xl); }
.notebook-panel__actions a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 46px;
  padding: 0 18px;
  color: var(--hero-cream);
  border: 1px solid rgba(243, 239, 230, 0.42);
  border-radius: 999px;
  font: 700 var(--type-label)/1 var(--font-label);
  letter-spacing: 0.06em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 180ms var(--ease), background 180ms var(--ease), border-color 180ms var(--ease);
}
.notebook-panel__actions a:hover,
.notebook-panel__actions a:focus-visible { color: var(--hero-black); border-color: var(--hero-cream); background: var(--hero-cream); }
.notebook-panel__actions .notebook-panel__action--primary {
  color: var(--hero-black);
  border-color: var(--hero-cream);
  background: var(--hero-cream);
}
.notebook-panel__actions .notebook-panel__action--primary:hover,
.notebook-panel__actions .notebook-panel__action--primary:focus-visible {
  color: var(--hero-black);
  border-color: var(--hero-orange);
  background: var(--hero-orange);
}
.notebook-panel--orange .notebook-panel__actions a {
  color: var(--hero-black);
  border-color: rgba(10, 10, 10, 0.48);
}
.notebook-panel--orange .notebook-panel__actions a:hover,
.notebook-panel--orange .notebook-panel__actions a:focus-visible {
  color: var(--hero-cream);
  border-color: var(--hero-black);
  background: var(--hero-black);
}
.notebook-panel--orange .notebook-panel__actions .notebook-panel__action--primary {
  color: var(--hero-cream);
  border-color: var(--hero-black);
  background: var(--hero-black);
}
.notebook-panel--orange .notebook-panel__actions .notebook-panel__action--primary:hover,
.notebook-panel--orange .notebook-panel__actions .notebook-panel__action--primary:focus-visible {
  color: var(--hero-black);
  border-color: var(--hero-cream);
  background: var(--hero-cream);
}
.notebook-panel__closing-line { max-width: 38ch; }
.notebook-panel--last {
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  align-content: center;
  gap: clamp(42px, 6vh, 72px);
  min-height: 100svh;
  min-height: 100dvh;
  margin-bottom: 0;
  text-align: center;
}
.notebook-panel--last .notebook-panel__content {
  display: grid;
  justify-items: center;
  width: min(1120px, 100%);
}
.notebook-panel--last h3 {
  margin-inline: auto;
}
.notebook-panel--last .notebook-panel__closing-line {
  margin-inline: auto;
}
.notebook-panel--last .notebook-panel__actions {
  justify-content: center;
}
.notebook-final-runway {
  position: relative;
  z-index: 0;
  height: 0;
  background: var(--hero-black);
}
.contact-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
  justify-self: center;
  width: min(100%, 760px);
  max-width: none;
  padding: var(--space-lg) 0 4px;
  border-top: 1px solid rgba(243, 239, 230, 0.28);
  font-size: var(--type-body);
  line-height: var(--leading-body);
  text-align: center;
}
.contact-details p { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.contact-details span {
  display: block;
  margin-bottom: 6px;
  font: 600 var(--type-label)/1.2 var(--font-body);
  letter-spacing: 0;
  opacity: 0.62;
}
.contact-details a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.notebook-panel__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-xl);
  padding-bottom: 8px;
  border-bottom: 2px solid currentColor;
  font: 700 var(--type-label)/1 var(--font-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.notebook-panel__link span { color: var(--hero-orange); font-size: 1.5em; }
/* A tall tablet/desktop window cannot use the landscape height crop without
   pushing the avatar off canvas. Keep the same lockup, but size it from the
   viewport width so the source image's own black field supplies the blend. */
@media (min-width: 821px) and (max-width: 1100px) and (max-aspect-ratio: 4 / 3) {
  .hero-art {
    --avatar-width: 11.76%;
    bottom: 0;
    width: 160vw;
    height: auto;
  }
  /* Portrait tablets: lift the note off the cover and centre it between the
     nav bar and the cover top (cover top = scene height − 66.46vw). */
  .about-note--cover { display: none; }
  .about-note--mobile {
    display: block;
    left: 50%;
    top: calc(50% - 33.23vw);
    width: min(44vw, 30svh, 380px);
    transform: translate(-50%, -50%) rotate(-4deg);
  }
  /* Portrait tablets stack photo over text; cap the polaroid so the card is not
     taller than the viewport, and keep the dashed cards' copy comfortable. */
  .notebook-panel__featured-polaroid-stack { width: min(56%, 420px); }
  .abc-breakdown > div { padding: 18px; }
  .notebook-panel__work-card-copy h4 { font-size: clamp(16px, 2.1vw, 19px); }
  /* Tighter card padding: 76px header + 40px instead of + 77px, and the
     sections that were stretched to the viewport height now size to content. */
  .notebook-panel,
  .notebook-panel__work-section { padding-top: calc(var(--header-height) + 40px); }
  .notebook-panel__work-section--featured { padding-bottom: 72px; }
  .notebook-panel__work-section--additional { min-height: auto; padding-top: 96px; padding-bottom: 88px; }
  .notebook-panel--credibility { min-height: auto; padding-bottom: 80px; }
  .notebook-panel--last { min-height: auto; padding-top: calc(var(--header-height) + 40px); padding-bottom: 88px; }
  .notebook-panel--idea { padding-bottom: 40px; }
  .testimonial-card { padding-block: 76px; gap: 68px; }
  .testimonial-card__author { gap: 8px; }
  .testimonial-card footer { line-height: 1.4; }
  .testimonial-card > p { line-height: 1.3; }
}

/* Below 1600px the right-aligned hint runs into (or off) the left edge of the
   viewport. Park it above the avatar's head instead. */
@media (max-width: 1599px) {
  .scroll-hint {
    top: auto;
    right: auto;
    bottom: calc(100% + 6px);
    left: 50%;
    width: max-content;
    text-align: center;
    transform: translateX(-50%) rotate(-4deg);
    transform-origin: center bottom;
  }
}

/* Landscape tablets and laptops under 1600px: hint to the girl's left (as on the
   landscape phone), with the girl nudged toward the book to make room. */
@media (orientation: landscape) and (min-width: 821px) and (min-height: 521px) and (max-width: 1599px) {
  .hero-art { --avatar-anchor-x: 38%; }
  .scroll-hint {
    top: 56%;
    right: calc(100% + 26px);
    bottom: auto;
    left: auto;
    width: max-content;
    text-align: right;
    transform: rotate(-4deg);
    transform-origin: right center;
  }
}

/* Short landscape viewports (phones on their side, small laptops in split view):
   size the shelf from the viewport width so the avatar and cover stay inside
   the scene instead of falling below the fold. */
@media (min-width: 821px) and (max-height: 520px) {
  /* Type scale is width-driven, so a 844×390 phone inherits tablet-size type in a
     viewport less than half as tall. Re-derive the scale from the short axis:
     display ≈ 10% of height, body stays at the 16px mobile floor, header shrinks
     to 56px, and page gutters hold body copy near a 60–70ch measure. */
  :root {
    --header-height: 56px;
    --page: clamp(32px, 4.5vw, 48px);
    --type-display: clamp(2rem, 10svh, 2.75rem);
    --type-section: clamp(1.75rem, 8.5svh, 2.5rem);
    --type-script: clamp(1.5rem, 6.5svh, 2rem);
    --type-heading: 1.125rem;
    --type-project-title: 1.5rem;
    --type-card-title: 1.0625rem;
    --type-body-lg: 1rem;
    --type-body: 0.9375rem;
    --type-label: 0.6875rem;
    --notebook-reading-runway: 120px;
    --notebook-testimonial-runway: 72px;
  }
  .site-header { height: 56px; min-height: 56px; padding-block: 6px; }
  .site-nav a { padding: 12px 6px; }
  .hero { min-height: 100svh; }
  .hero-art {
    --art-w: min(70vw, 155svh);
    --avatar-max-width: 30svh;
    width: var(--art-w);
    height: auto;
    bottom: calc(8% - 0.139 * var(--art-w));
    transform: translate(-50%, 0);
  }
  .book-open-front .about-note--cover { width: 50%; top: 36%; }
  .scroll-hint {
    top: 56%;
    right: calc(100% + 22px);
    bottom: auto;
    left: auto;
    width: max-content;
    text-align: right;
    transform: rotate(-4deg);
    transform-origin: right center;
  }
  .notebook-panel { padding-top: calc(var(--header-height) + 24px); padding-bottom: 40px; }
  .notebook-panel h3 { max-width: none; }
  .notebook-panel__work-section h3 { max-width: none; width: 100%; text-align: center; white-space: nowrap; }
  .notebook-panel__lede { max-width: 60ch; margin-top: 14px; }
  .notebook-panel--idea { padding-top: calc(var(--header-height) + 20px); }
  .notebook-panel--idea .notebook-panel__lede { margin-top: 16px; }
  .abc-venn { width: min(50svh, 260px); }
  .abc-venn__label span { font-size: 14px; }
  .abc-venn__center { font-size: 1.125rem; }
  .abc-breakdown { gap: 16px; }
  .abc-breakdown > div { padding: 18px; min-height: 0; }
  .notebook-panel__steps { margin-top: 24px; }
  .notebook-panel__work-section { padding-top: calc(var(--header-height) + 24px); padding-bottom: 48px; }
  .notebook-panel__featured-grid { gap: 24px; }
  .notebook-panel__featured-polaroid-stack { width: min(60%, 46svh); }
  .notebook-panel__featured-card { min-height: 0; }
  .notebook-panel__work-card { min-height: 0; }
  .brand-marquee { height: 84px; }
  .testimonial-card { min-height: 0; }
  /* The testimonials card is taller than a short viewport; if it stuck to the
     top the quotes would sit below the fold until the contact card covered them.
     Let it scroll normally and have the contact card rise over it. */
  .notebook-panel--credibility { position: relative; top: auto; min-height: auto; padding-bottom: 56px; }
  .testimonial-card > p { font-size: var(--type-heading); max-width: 40ch; }
  .notebook-panel--last { gap: 24px; }
  .contact-details { padding-top: 16px; }
}

@media (max-width: 820px) {
  :root {
    --notebook-reading-runway: 240px;
    --notebook-testimonial-runway: 120px;
    /* Shared tail under every stacked card so each one holds for the same read
       time before the next slides up. */
    --notebook-card-tail: clamp(112px, 16vh, 150px);
  }
  :root { --header-height: 68px; --page: 22px; }
  .site-header { height: 68px; min-height: 68px; padding-block: 11px; }
  .menu-toggle { display: block; position: relative; z-index: 2; width: 46px; height: 46px; padding: 10px; color: inherit; background: transparent; border: 0; }
  .menu-toggle span:not(.sr-only) { display: block; height: 2px; margin: 6px 0; background: currentColor; transition: transform 0.25s ease, opacity 0.25s ease; }
  .menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
  /* The header's transform makes it the containing block, so a fixed nav would
     collapse to the header's height. Anchor the panel to the header's bottom
     edge and give it the rest of the viewport. */
  .site-nav { position: absolute; top: 100%; left: 0; right: 0; height: calc(100svh - var(--header-height)); display: grid; place-content: center; gap: 12px; padding: 24px var(--page) 48px; overflow-y: auto; color: var(--header-dark-grey); background: rgba(13, 13, 11, 0.98); opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s ease; }
  .site-nav.is-open { opacity: 1; visibility: visible; }
  .site-nav a { min-height: 56px; padding: 14px 24px; font-size: 22px; text-align: center; }
  .hero { height: 100svh; min-height: 100svh; }
  .hero-scene { inset: var(--header-height) 0 0; display: block; overflow: hidden; }
  .hero-art { --avatar-width: 11.76%; position: absolute; left: 50%; bottom: 0; width: max(148vw, 72svh); height: auto; transform: translate(-50%, 13.333%); }
  .about-note--cover { display: none; }
  .about-note--mobile { display: block; left: 50%; top: calc(var(--header-height) + 1svh); width: min(18vw, 16svh, 145px); transform: translateX(-50%) rotate(-4deg); }
  .scroll-hint { font-size: clamp(13px, 2vw, 18px); }
  .hero-shade { background: rgba(0, 0, 0, 0.05); }
  .notebook-sections__viewport { min-height: 0; }
  .notebook-panel { align-content: start; padding-top: calc(var(--header-height) + clamp(58px, 10vh, 100px)); padding-bottom: 88px; }
  .notebook-panel__content { width: 100%; }
  .notebook-panel h3 { max-width: none; font-size: var(--type-display); }
  .notebook-panel__lede { max-width: 36ch; font-size: var(--type-body-lg); }
  .notebook-panel__margin-note { display: none; }
  .notebook-panel--idea {
    height: auto;
    min-height: 100svh;
    padding-top: calc(var(--header-height) + clamp(38px, 6vh, 58px));
    padding-bottom: var(--notebook-card-tail);
  }
  .notebook-panel__idea-layout { display: block; padding-bottom: 0; }
  .notebook-panel--idea h3.notebook-panel__formula-title { max-width: none; font-size: var(--type-section); }
  .notebook-panel--idea .notebook-panel__lede { margin-top: clamp(34px, 5vh, 50px); font-size: var(--type-body-lg); line-height: var(--leading-body); }
  .abc-venn { justify-self: center; width: min(84vw, 52svh, 500px); }
  .abc-venn__label span { font-size: clamp(14px, 3.8vw, 18px); }
  .abc-venn__center { font-size: clamp(21px, 4.4vw, 30px); }
  .notebook-panel__abc-section { margin: 0; padding: 0; }
  .abc-breakdown { grid-template-columns: 1fr; gap: 24px; }
  .abc-breakdown > div {
    display: block;
    min-height: 0;
    padding: clamp(20px, 5vw, 28px);
  }
  .abc-breakdown dt { font-size: var(--type-heading); }
  .abc-breakdown dd { margin: 0; }
  .abc-breakdown strong { font-size: var(--type-body-lg); line-height: 1.25; }
  .notebook-panel__steps { position: relative; right: auto; bottom: auto; width: 100%; margin-top: clamp(34px, 7vh, 68px); font-size: var(--type-body); }
  .notebook-panel__steps li { padding: 10px 0; }
  .notebook-panel--work h3 { max-width: none; font-size: var(--type-section); }
  .notebook-panel__work-section { min-height: auto; padding-top: calc(var(--header-height) + clamp(58px, 10vh, 100px)); padding-bottom: 88px; }
  .notebook-panel__featured-grid { grid-template-columns: 1fr; grid-auto-rows: 1fr; gap: 30px; }
  .notebook-panel__featured-card { display: grid; align-content: center; }
  .notebook-panel__featured-polaroid-stack { width: min(78%, 440px); }
  .notebook-panel__featured-polaroid { padding: 9px 9px clamp(34px, 8vw, 52px); }
  .notebook-panel__featured-card { border-radius: 0; }
  .notebook-panel__featured-copy {
    margin-top: 8px;
    padding-top: 24px;
    border-top: 1px dashed rgba(10, 10, 10, 0.24);
  }
  .notebook-panel__featured-tape { top: -12px; left: -18px; width: clamp(88px, 25vw, 138px); }
  .notebook-panel__featured-card:nth-child(2) .notebook-panel__featured-tape { top: -10px; right: -16px; width: clamp(92px, 26vw, 142px); }
  .notebook-panel__featured-card:nth-child(3) .notebook-panel__featured-tape { left: -14px; }
  .notebook-panel__featured-proof { padding-left: 4px; font-size: var(--type-body); line-height: var(--leading-body); }
  .notebook-panel__featured-meta strong { font-size: var(--type-project-title); }
  .notebook-panel__work-section--featured { padding-bottom: var(--notebook-chapter-gap); }
  .notebook-panel__work-section--additional { grid-template-columns: 1fr; align-items: start; gap: clamp(30px, 5vh, 48px); padding-top: var(--notebook-chapter-gap); padding-bottom: var(--notebook-card-tail); }
  .notebook-panel__work-list { grid-template-columns: 1fr; gap: 24px; width: 100%; margin-top: 0; }
  .notebook-panel__credibility-layout { grid-template-columns: 1fr; align-items: start; gap: clamp(24px, 4vh, 38px); }
  .notebook-panel__credibility-intro { grid-template-columns: 1fr; justify-items: center; align-items: center; }
  .notebook-panel--credibility h3 { max-width: none; font-size: var(--type-section); }
  .notebook-panel--credibility { position: relative; top: auto; padding-bottom: var(--notebook-card-tail); }
  .credibility-carousel--brands {
    --brand-marquee-gap: clamp(30px, 9vw, 52px);
  }
  .brand-marquee { height: 124px; }
  .brand-logo-grid li { flex-basis: clamp(132px, 40vw, 180px); min-height: 78px; padding: 0; }
  .brand-logo-grid img {
    max-width: min(100%, calc(var(--logo-optical-width, 132px) * 0.82));
    max-height: min(42px, calc(var(--logo-optical-height, 42px) * 0.82));
  }
  .credibility-carousel--quotes { width: 100%; padding: 10px; border-radius: 0; }
  .testimonial-list { gap: 0; }
  .testimonial-card { flex-basis: 100%; min-width: 100%; min-height: 0; gap: 28px; padding: 28px 24px 24px; place-items: center; align-content: start; text-align: center; }
  .testimonial-card > p { max-width: 34ch; margin: 0 auto; font-size: clamp(19px, 2.6vw, 24px); line-height: 1.3; }
  .testimonial-card footer { grid-template-columns: auto minmax(0, auto); justify-content: center; column-gap: 12px; row-gap: 14px; }
  /* Read link joins the footer instead of floating over the first line of the quote. */
  .testimonial-card__read { position: static; grid-column: 1 / -1; justify-self: center; min-height: 40px; font-size: 10px; }
  .notebook-panel--last { grid-template-columns: 1fr; place-items: center; align-content: center; gap: 42px; }
  .contact-details { grid-template-columns: 1fr; justify-self: center; width: min(100%, 620px); padding-top: 24px; font-size: var(--type-body); }
}

@media (max-width: 560px) {
  :root {
    --notebook-reading-runway: 200px;
    --notebook-testimonial-runway: 100px;
  }
  .testimonial-dialog { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); }
  .testimonial-dialog__chrome { gap: 8px; padding: 8px 10px; }
  .testimonial-dialog__navigation { gap: 0; }
  .testimonial-dialog__position { min-width: 46px; }
  .testimonial-dialog__content { padding: 18px 22px 44px; }
  .wordmark { font-size: 14px; }
  /* Phone hero: crop the shelf to the span from the stacked books through the
     cover's black band (30%–73.5% of the artwork), so the wordmark reads at full
     size and the avatar has shelf to stand on. Shelf line lands at 88% of the
     scene; the sticky note sits in the dark space above the cover. */
  .hero-art {
    --avatar-anchor-x: 38.5%; /* centred between the screen edge (~25% of artwork) and the cover's left edge (49.5%) */
    --avatar-anchor-y: 70.2%;
    --avatar-width: 14%;
    --avatar-max-width: 32svh;
    left: calc(50% - 6vw);
    width: 176vw;
    bottom: calc(12% - 24.2vw);
    transform: translate(-50%, 0);
  }
  .about-note--mobile {
    /* Vertically centred between the nav bar and the cover top (cover top = 88% − 65vw). */
    top: calc(44% - 32.5vw);
    bottom: auto;
    width: min(50vw, 28svh, 210px);
    transform: translate(-50%, -50%) rotate(-5deg);
  }
  .hero-shade { background: rgba(0, 0, 0, 0.02); }
  .scroll-hint { font-size: clamp(13px, 3.8vw, 17px); }
  .notebook-panel--idea h3.notebook-panel__formula-title { font-size: var(--type-section); }
  .notebook-panel--idea .notebook-panel__lede { font-size: var(--type-body-lg); }
  .abc-venn { width: min(88vw, 42svh, 360px); }
  .notebook-panel--work-combined {
    padding: 0;
  }
  .notebook-panel__work-section { padding: calc(var(--header-height) + 34px) var(--page) 58px; }
  .notebook-panel__work-section--featured { padding-bottom: var(--notebook-chapter-gap); }
  .notebook-panel__work-section--additional { padding-top: var(--notebook-chapter-gap); padding-bottom: var(--notebook-card-tail); }
  .notebook-panel--work-combined h3 { font-size: var(--type-section); }
  .notebook-panel--work-combined .notebook-panel__lede {
    margin-top: 14px;
    font-size: var(--type-body);
  }
  .notebook-panel__featured-grid { gap: 24px; margin-top: 24px; }
  .notebook-panel__featured-card {
    display: grid;
    align-content: center;
    min-height: 0;
    padding: clamp(28px, 8vw, 44px) 12px;
    border-radius: 0;
  }
  .notebook-panel__featured-polaroid-stack { width: min(80%, 350px); margin-block: 16px 20px; }
  .notebook-panel__featured-tape { top: -11px; width: clamp(100px, 32vw, 142px); }
  .notebook-panel__featured-meta { gap: 9px; padding-top: 11px; }
  .notebook-panel__work-list > li { display: flex; }
  .notebook-panel__work-list > li > .notebook-panel__work-card { flex: 1 1 auto; width: 100%; }
  .notebook-panel__work-card {
    justify-content: center;
    min-height: 0;
    padding: clamp(28px, 8vw, 44px) 12px;
    border-radius: 0;
  }
  .notebook-panel--credibility { padding-bottom: var(--notebook-card-tail); }
  .notebook-panel__credibility-layout { gap: 28px; }
  /* Phones: the side arrows were squeezing the card to ~200px. Swipe + dots take
     over; the quote gets the full width, left-aligned. */
  .testimonial-stage { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .testimonial-stage__arrow { display: none; }
  .testimonial-card { padding: 26px 20px 22px; gap: 24px; }
  .testimonial-card > p { max-width: none; font-size: clamp(18px, 5.2vw, 21px); text-align: center; }
  .testimonial-card__avatar { width: 36px; height: 36px; }
  .carousel-position { font-size: var(--type-label); }
}

/* Laptops 768–800px tall: the sticky testimonials card must show its quotes
   within one viewport, so trim its top padding and internal gaps. */
@media (min-width: 821px) and (min-height: 521px) and (max-height: 820px) {
  .notebook-panel--credibility { padding-top: calc(var(--header-height) + 24px); }
  .notebook-panel__credibility-layout { gap: clamp(20px, 3vh, 32px); }
  .notebook-panel__credibility-intro { gap: 16px; }
  .brand-marquee { height: 96px; }
  .testimonial-card { min-height: 0; padding-block: 64px; gap: 56px; }
  .testimonial-card > p { line-height: 1.3; }
  .testimonial-card__author { gap: 8px; }
  .testimonial-card footer { line-height: 1.4; }
}

/* Case-study cards: any landscape viewport below the 1100px desktop switch
   (landscape phones, landscape tablets) lays photos left / text right.
   Portrait viewports keep the stacked photo-over-text card. Placed after the
   mobile rules so it wins the cascade. */
@media (orientation: landscape) and (max-width: 1099px) {
  .notebook-panel__featured-grid { grid-auto-rows: 1fr; }
  .notebook-panel__featured-card {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    grid-template-rows: auto;
    column-gap: clamp(18px, 3vw, 40px);
    align-items: center;
    align-content: center;
    min-height: 0;
    padding: clamp(12px, 1.6vw, 18px) clamp(18px, 2.6vw, 30px) clamp(12px, 1.6vw, 18px) clamp(12px, 1.6vw, 18px);
    border-radius: 0;
  }
  .notebook-panel__featured-card .notebook-panel__featured-polaroid-stack {
    grid-column: 1;
    grid-row: 1;
    width: min(88%, 42svh);
    margin-block: clamp(10px, 2svh, 22px);
  }
  .notebook-panel__featured-card .notebook-panel__featured-copy {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    margin-top: 0;
    padding-top: 0;
    padding-left: clamp(18px, 3vw, 40px);
    border-top: 0;
    border-left: 1px dashed rgba(10, 10, 10, 0.24);
    text-align: left;
    align-items: flex-start;
  }
  .notebook-panel__featured-card .notebook-panel__featured-meta { align-items: flex-start; text-align: left; }
  .notebook-panel__featured-card .notebook-panel__featured-proof { text-align: left; max-width: 38ch; }
  .notebook-panel__featured-tape { left: -10px; }
  .notebook-panel__featured-card:nth-child(2) .notebook-panel__featured-tape { right: -10px; }
  .notebook-panel__featured-card:nth-child(3) .notebook-panel__featured-tape { left: -10px; }
}

/* Touch: the testimonial strip becomes a native scroll-snap swipe instead of a
   transform slide; arrows and dots still work (rebuild.js scrolls the track). */
@media (pointer: coarse) {
  .testimonial-clip { overflow: visible; }
  .testimonial-list {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    touch-action: pan-x pan-y;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    transform: none !important;
    transition: none;
    will-change: auto;
  }
  .testimonial-list::-webkit-scrollbar { display: none; }
  .testimonial-card { scroll-snap-align: start; scroll-snap-stop: always; }
}

/* ---- Sitewide content alignment ---------------------------------------
   Keep all portfolio content on the approved center axis. */
.abc-breakdown > div,
.testimonial-card__author,
.notebook-panel__featured-copy,
.notebook-panel__featured-meta,
.notebook-panel__featured-proof {
  text-align: center !important;
}

.abc-breakdown dd p {
  margin-inline: auto;
}

.notebook-panel__featured-copy,
.notebook-panel__featured-meta {
  align-items: center !important;
}

.site-footer {
  justify-content: center;
  text-align: center;
}

/* Body copy holds a 45–65 character measure at every width. */
.notebook-panel__lede,
.notebook-panel--idea .notebook-panel__lede,
.notebook-panel__work-section--featured .notebook-panel__lede,
.notebook-panel__work-section--additional .notebook-panel__lede { max-width: min(100%, 62ch); }
.contact-details p, .contact-details a { max-width: 45ch; }

.site-footer {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px 24px;
  padding: 32px var(--page);
  color: #888;
  border-top: 1px solid #262627;
  background: #000;
  font: 400 12px/1.7 "DM Mono", monospace;
  letter-spacing: 0.04em;
}

.blur-highlight {
  --blur-highlight-progress: 0%;
  --blur-highlight-color: rgba(238, 100, 34, 0.92);
  display: inline;
  padding-inline: 0.035em;
  margin-inline: -0.035em;
  background-image: linear-gradient(
    90deg,
    var(--blur-highlight-color),
    var(--blur-highlight-color)
  );
  background-repeat: no-repeat;
  background-position: left 60%;
  background-size: var(--blur-highlight-progress) 82%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  will-change: filter, opacity, background-size;
}

@media (prefers-reduced-motion: reduce) {
  .blur-highlight {
    --blur-highlight-progress: 100%;
    filter: none !important;
    opacity: 1 !important;
    will-change: auto;
  }
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .hero-art { --avatar-foot-inset: 0%; }
  .hero-figure { --parallax-x: 0px; }
  .portal-viewport { opacity: 1 !important; visibility: visible !important; }
  .hero-stage { transform: none !important; }
  .book-open-layer, .book-open-front, .book-open-page { transform: none !important; }
  .book-open-destination { display: none; }
  .scroll-hint { display: none; }
  .notebook-panel { position: relative; top: auto; bottom: auto; min-height: 100svh; transform: none !important; opacity: 1 !important; visibility: visible !important; }
  .notebook-panel--idea { height: auto; margin-bottom: 0 !important; }
  .notebook-panel--credibility { margin-bottom: 0 !important; }
  .notebook-panel__overscroll-content { transform: none !important; }
  .notebook-panel__featured-card { transform: none !important; }
  .notebook-panel__featured-polaroid--back { transform: translate(-5%, 3%) rotate(-3deg) scale(0.96) !important; }
  .notebook-panel__featured-polaroid--middle { transform: translate(5%, 4%) rotate(3deg) scale(0.96) !important; }
  .notebook-panel__featured-polaroid--front { transform: rotate(var(--polaroid-tilt)) !important; }
  .brand-marquee {
    height: auto;
    min-height: 108px;
    padding: 0;
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .brand-marquee__scene { display: block; width: 100%; transform: none !important; }
  .brand-marquee__track { transform: none !important; will-change: auto; }
  .brand-logo-grid[data-brand-marquee-clone] { display: none; }
}


/* ---- Homepage audit pass: touch floors ----------------------------------
   Small text ≥12px, tap targets ≥40px, phone h3 eased on the smallest screens. */
.notebook-panel__featured-cta-label { font-size: 12px; }
.testimonial-card__author, .testimonial-card__author > span { font-size: 12px; }
.testimonial-card__read, .credibility-carousel__header .testimonial-read-current, .carousel-position { font-size: 12px; }
@media (max-width: 1024px) {
  .contact-details a {
    display: inline-block;
    min-height: 40px;
    padding: 9px 0;
    margin: -9px 0;
    line-height: 22px;
  }
  .contact-details p > span { align-self: center; }
}
@media (max-width: 400px) {
  .notebook-sections .notebook-panel h3 { font-size: 40px !important; }
}

@media (min-width: 1025px) {
  .contact-details a { display: inline-block; min-height: 40px; padding: 10px 0; margin: -10px 0; line-height: 20px; }
}

/* Blank paper opens first, then hands off to the live thinking chapter. */
.book-entry-enhanced { z-index: 4; }
.book-entry-enhanced.book-arrival-ready { background: transparent; pointer-events: none; }
.book-entry-enhanced ~ .notebook-sections .notebook-sections__viewport { background: var(--page-paper); }
.book-entry-enhanced .book-open-page { background: var(--page-paper); padding: 0; }
.book-entry-enhanced .book-open-page__label { display: none; }
.book-entry-pending .notebook-sections { opacity: 0; pointer-events: none; }
.book-arrival-ready .portal-viewport { visibility: hidden !important; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .book-entry-pending .notebook-sections { opacity: 1; pointer-events: auto; }
}

/* The first white notebook page contains proof, arranged as physical stickers. */
.brand-entry { position:relative; z-index:3; background:var(--page-paper); color:#171717; height:100svh; min-height:680px; padding:calc(var(--header-height) + 32px) max(28px,8vw) 70px; display:flex; flex-direction:column; justify-content:center; gap:44px; overflow:hidden; }
.brand-entry h2 { margin:0; text-align:center; font-family:var(--font-display); font-size:clamp(24px,2.5vw,36px); font-weight:700; font-variation-settings:"wght" 700; line-height:var(--leading-display); letter-spacing:-0.05em; text-wrap:balance; }
.brand-sticker-grid { list-style:none; margin:0 auto; padding:10px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:30px 44px; width:min(100%,1020px); }
.brand-sticker-grid li { display:flex; align-items:center; justify-content:center; min-width:0; height:92px; padding:17px; background:transparent; filter:url(#brand-die-cut); transform:rotate(-4deg); }
.brand-sticker-grid li:nth-child(3n+2){transform:rotate(4deg);}
.brand-sticker-grid li:nth-child(3n){transform:rotate(-2deg);}
.brand-sticker-grid img{max-width:100%;max-height:58px;width:auto;height:auto;object-fit:contain;filter:grayscale(1) brightness(0);}
.brand-sticker-grid [data-logo="wongfu"] img {filter:url(#brand-remove-white);}
@media(max-width:820px){
 .brand-entry{min-height:740px;padding:100px 24px 64px;gap:26px;}
 .brand-sticker-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:23px 20px;}
 .brand-sticker-grid li{height:88px;padding:13px;}
}
@media(max-width:480px){
 .brand-entry{min-height:640px;padding:90px 18px 48px;}
 .brand-sticker-grid{gap:20px 14px;}
 .brand-sticker-grid li{height:76px;padding:10px;}
 .brand-sticker-grid img{max-height:43px;}
}

.brand-entry > h2, .brand-entry > .brand-sticker-grid { position:relative; z-index:1; }

/* Center the complete heading-and-sticker composition once the logos land. */
.brand-entry { padding-block:calc(var(--header-height) + 24px); }
@media(max-width:820px){.brand-entry { padding-block:90px; }}
@media(max-width:480px){.brand-entry { padding-block:80px; }}

.brand-heading-highlight { --blur-highlight-color:var(--hero-orange); padding:0 .06em; box-decoration-break:clone; -webkit-box-decoration-break:clone; }

/* The opening and brand surface share the same projected paper pattern. */
.book-open-page > .entry-paper-texture,
.brand-entry::before { mask-image:none; -webkit-mask-image:none; }


/* Sticker contact is part of the same placement motion as its die-cut edge. */
.brand-sticker-grid li { filter:url(#brand-die-cut) drop-shadow(var(--sticker-contact-shadow, 0px 0px 0px transparent)); }
@media(prefers-reduced-motion:reduce){
  #ideas [data-blur-highlight] { color:#fff; --blur-highlight-progress:100%; }
}

/* Visible positioning alongside the notebook introduction. */
.hero-role { position: absolute; z-index: 30; top: calc(var(--header-height) + 24px); left: var(--page); margin: 0; color: var(--hero-cream); font-family: var(--font-body, 'Helvetica Neue', Arial, sans-serif); font-size: 16px; font-weight: 500; line-height: 1.4; letter-spacing: .01em; pointer-events: none; }
@media (max-width: 820px) { .hero-role { top: calc(var(--header-height) + 22px); left: 24px; right: 24px; text-align: center; font-size: 15px; } }

/* Supplied logos keep their original pixels; crop only transparent canvas in CSS. */
.brand-sticker-grid .brand-logo-crop { position:relative;display:block;overflow:hidden;aspect-ratio:var(--logo-ratio);width:min(100%,calc(58px * var(--logo-ratio))); }
.brand-sticker-grid .brand-logo-crop img { position:absolute;max-width:none;max-height:none;object-fit:fill; }
@media(max-width:820px){.brand-sticker-grid{gap:14px 18px}.brand-sticker-grid li{height:66px;padding:10px}}
@media(max-width:480px){.brand-sticker-grid{gap:10px 12px;padding:8px}.brand-sticker-grid li{height:clamp(42px,7svh,60px);padding:6px}.brand-sticker-grid .brand-logo-crop{width:min(100%,calc(43px * var(--logo-ratio)))}}
@media(max-height:600px){.brand-entry{padding-block:70px;gap:18px}.brand-sticker-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px 18px}.brand-sticker-grid li{height:36px;padding:5px}.brand-sticker-grid img{max-height:30px}.brand-sticker-grid .brand-logo-crop{width:min(100%,calc(30px * var(--logo-ratio)))}}

/* Reading clearance after the three additional-work cards. The Work pin
   measures this height, so the following page arrives later naturally. */
.notebook-panel__work-section--additional { padding-bottom:clamp(380px,48svh,600px); }
@media(max-width:820px) { .notebook-panel__work-section--additional { padding-bottom:clamp(240px,36svh,380px); } }
@media(max-height:520px) { .notebook-panel__work-section--additional { padding-bottom:220px; } }

/* Preserve the NBA badge's white player silhouette and tonal detail. */
.brand-sticker-grid [data-logo="nba-infinite"] img { filter:grayscale(1) contrast(1.65); }
.brand-sticker-grid [data-logo="nba-infinite"] img.nba-lettering { filter:brightness(0);clip-path:inset(0 0 0 13%); }
@media(min-width:821px) and (min-height:601px){.brand-sticker-grid{row-gap:18px}.brand-sticker-grid li{height:clamp(48px,8svh,80px);padding:10px}.brand-sticker-grid img{max-height:50px}.brand-sticker-grid .brand-logo-crop{width:min(100%,calc(50px * var(--logo-ratio)))}.brand-sticker-grid .brand-logo-crop img{max-height:none}}

/* Give the square City of Las Vegas mark enough presence beside the wider wordmarks. */
.brand-sticker-grid [data-logo="city-of-las-vegas"] .brand-logo-crop { width:min(100%,64px); }
@media(max-width:820px){.brand-sticker-grid [data-logo="city-of-las-vegas"] .brand-logo-crop { width:min(100%,56px); }}
@media(max-width:480px){.brand-sticker-grid [data-logo="city-of-las-vegas"] .brand-logo-crop { width:min(100%,52px); }}
@media(max-height:600px){.brand-sticker-grid [data-logo="city-of-las-vegas"] .brand-logo-crop { width:min(100%,36px); }}

/* Positioning belongs in the navigation; the hero has one notebook prompt. */
.site-header .wordmark { gap:18px; }
.site-header .nav-role { font-family:var(--font-body);font-size:13px;font-weight:400;letter-spacing:0;line-height:1.3; }
@media(max-width:820px){.site-header .wordmark{flex-direction:column;align-items:flex-start;gap:3px}.site-header .nav-role{font-size:11px}}

/* A single inline lockup, with two weights and a shared typeface. */
.site-header .wordmark { flex-direction:row;align-items:baseline;gap:8px;font-family:var(--font-body); }
.site-header .nav-role, .site-header .nav-role > span { font-family:inherit;font-size:13px;font-weight:400;letter-spacing:0;line-height:1.3; }
@media(max-width:820px){.site-header .wordmark{flex-direction:row;align-items:baseline;gap:6px}.site-header .nav-role,.site-header .nav-role > span{font-size:12px}}