/*
  Styles from the Figma design system (file RJKwNvcYOV58r1JGLeJmVi), applied to the site's screens
  (page 01). Every value comes from tokens.css. Dark mode swaps the color primitives there, so
  nothing in this file knows about themes.
  Fonts: Source Serif for reading and UI, Grenze for headings (fonts.css).
*/

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }

:root {
  /* 24px on phones, 48px from 768px up, scaling in between so the column never steps */
  --page-margin: clamp(24px, 8.333vw - 16px, 48px);
  /* Card padding: 24px on phones, 32px from 768px up */
  --card-padding: clamp(24px, 2.778vw + 10.67px, 32px);
  /* How far the hero and full-bleed shots reach past the column on phones: 0 at 767px, 12px by 480px */
  --bleed: clamp(0px, calc((767px - 100vw) * 0.0418), 12px);
  /* Stacked media starts at its side-by-side width and widens by this much as the window narrows past a breakpoint */
  --grow-767: calc((767px - 100vw) * 0.14);
  /* Carousel card width: the screen less the page margin and a 56px peek of the next card */
  --rail-card: calc(100vw - var(--page-margin) - 56px);
}

body {
  margin: 0;
  font-family: var(--font-body-family);
  font-weight: var(--font-style-regular);
  /* Grayscale smoothing on macOS, as Figma draws text; the default subpixel rendering looks heavier */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: var(--type-body-1-size);
  line-height: var(--type-body-1-line-height);
  letter-spacing: var(--type-body-1-tracking);
  color: var(--text-primary);
  background: var(--background-page);
}

::selection { background: var(--accent-purple); color: var(--text-on-accent); }

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

h1, h2 {
  font-family: var(--font-heading-family);
  font-weight: var(--font-style-medium);
  text-wrap: balance;
}
h1 { font-weight: var(--font-style-regular); }
h1 {
  margin: var(--spacing-32) 0 var(--spacing-24);
  font-size: var(--type-heading-h1-size);
  line-height: var(--type-heading-h1-line-height);
  letter-spacing: var(--type-heading-h1-tracking);
}
/* Phone h1 (site only, Figma has no phone frames) */
@media (max-width: 767px) { h1 { font-size: 44px; line-height: 44px; letter-spacing: -1px; } }
h2 {
  margin: var(--spacing-48) 0 var(--spacing-16);
  font-size: var(--type-heading-h2-size);
  line-height: var(--type-heading-h2-line-height);
  letter-spacing: var(--type-heading-h2-tracking);
}
h3 {
  margin: var(--spacing-32) 0 var(--spacing-4);
  font-weight: var(--font-style-semibold);
  font-size: var(--type-heading-h4-size);
  line-height: var(--type-heading-h4-line-height);
  letter-spacing: var(--type-heading-h4-tracking);
}
p, ul, ol, dl { margin-block: 0 var(--spacing-16); }
strong { font-weight: var(--font-style-semibold); }
em { font-style: italic; }

/* ---------- Link / Text ---------- */

a {
  color: var(--text-link);
  text-decoration: underline;
  text-decoration-thickness: var(--border-1);
  text-underline-offset: 0.18em;
}
/* Link / Text hover: Action/link-hover (Medium), same underline */
a:hover:not(.button, .back-to-top, .site-header a, .card a, .prototype a) { font-weight: var(--font-style-medium); }
a:active { color: var(--text-primary); }

/* Keyboard focus: 2px outside outline in focus/ring */
a:focus-visible, button:focus-visible, [tabindex="-1"]:focus-visible {
  outline: var(--border-2) solid var(--border-border-focus);
  outline-offset: 2px;
}

/* ---------- Layout ---------- */

.site-header, .site-footer {
  width: min(var(--container-large), 100% - 2 * var(--page-margin));
  margin-inline: auto;
}
/* Every page's content starts 32px under the header (Drue, 2026-10-26: all match Beyond work); pages add no top spacing of their own */
main {
  width: min(var(--container-medium), 100% - 2 * var(--page-margin));
  margin-inline: auto;
  padding-top: var(--spacing-32);
  padding-bottom: var(--spacing-48);
}
main.case-study, main.about, main.not-found { width: min(var(--container-large), 100% - 2 * var(--page-margin)); }
.prose { max-width: var(--container-medium); margin-inline: auto; }
.case-study .prose, .case-study .gate { max-width: 892px; }

img { max-width: 100%; height: auto; display: block; }
/* Carousels run to the screen edge; clip keeps that from adding a sideways page scroll */
body { overflow-x: clip; }

/* Lets keyboard users jump past the nav */
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus {
  left: 0;
  top: 0;
  z-index: 20;
  padding: var(--spacing-12) var(--spacing-16);
  color: var(--background-page);
  background: var(--accent-purple);
}

/* ---------- Navigation / Header and Item ---------- */

.site-header {
  display: flex;
  justify-content: center;
  min-height: 92px;
  padding-block: var(--spacing-24);
}
.site-header ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 var(--spacing-64); margin: 0; padding: 0; list-style: none; }
.site-header nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--size-navigation-item-height);
  color: var(--text-primary);
  font-family: var(--font-nav-family);
  font-weight: var(--font-style-regular);
  font-size: var(--type-nav-size);
  line-height: var(--type-nav-line-height);
  letter-spacing: var(--type-nav-tracking);
  font-variant-caps: all-small-caps;
  text-decoration: none;
}
.site-header nav a { gap: 0.3em; } /* keeps the space after the italic word in a flex link */
.site-header nav em { font-variant-caps: normal; }
.site-header nav a:hover { color: var(--text-link); }
.site-header nav a:active { padding-top: var(--spacing-4); }
/* Current: underline in accent/primary */
.site-header nav a[aria-current]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 36px;
  height: var(--border-1);
  background: var(--accent-purple);
}
/* Small screens: one row of 44px targets that shrinks with the viewport, and wraps only as a last resort */
@media (max-width: 767px) {
  .site-header { min-height: 0; padding-block: var(--spacing-8); }
  .site-header ul { flex-wrap: wrap; gap: 0 clamp(12px, 4.5vw, 28px); }
  .site-header nav a { font-size: clamp(14px, 4.2vw, var(--type-nav-size)); letter-spacing: 0.02em; }
}

/* Desktop: the header stays put and slides away on scroll down, back on scroll up (js/site.js sets the classes) */
@media (min-width: 768px) {
  html { scroll-padding-top: 92px; }
  .site-header {
    position: sticky;
    top: 0;
    z-index: 10;
    width: 100%;
    background: var(--background-page);
    border-bottom: var(--border-1) solid transparent;
  }
  .site-header.is-stuck { border-bottom-color: var(--border-border-subtle); }
  .site-header.is-hidden { transform: translateY(-100%); }
}
@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  .site-header { transition: transform 0.2s ease-out; }
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
/* Focused elements scroll clear of the floating back-to-top link */
html { scroll-padding-bottom: 76px; }

/* ---------- Navigation / Footer ---------- */

.site-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--spacing-24);
  padding: var(--spacing-32) 0 var(--spacing-24);
  color: var(--text-primary);
  font-size: var(--type-body-0-size);
  line-height: var(--type-body-0-line-height);
  letter-spacing: var(--type-body-0-tracking);
}
.site-footer p { margin: 0; }
.footer-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--spacing-24); margin-inline-start: auto; }
.site-footer .back-to-top, .theme-switch { min-height: 44px; display: inline-flex; align-items: center; }
/* Phones: one centered column, with back to top and the theme switch first */
@media (max-width: 767px) {
  .site-footer { flex-direction: column; text-align: center; }
  .footer-controls { order: -1; justify-content: center; margin-inline: 0; }
}

/* Theme switch: a button with role="switch", added by js/site.js */
.theme-switch {
  gap: var(--spacing-8);
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-primary);
  font: inherit;
  cursor: pointer;
}
.theme-switch-track {
  position: relative;
  width: 36px;
  height: 20px;
  border: var(--border-1) solid var(--text-secondary);
  border-radius: 10px;
}
.theme-switch-track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--text-secondary);
}
.theme-switch[aria-checked="true"] .theme-switch-track { background: var(--text-secondary); }
.theme-switch[aria-checked="true"] .theme-switch-track::after { left: 19px; background: var(--background-page); }
@media (prefers-reduced-motion: no-preference) { .theme-switch-track::after { transition: left 0.15s; } }
@media (forced-colors: active) { .theme-switch[aria-checked="true"] .theme-switch-track { background: Highlight; } }

/* Floating back to top, added by js/site.js once the page has scrolled */
.to-top {
  position: fixed;
  right: var(--spacing-16);
  bottom: var(--spacing-16);
  z-index: 10;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--spacing-16);
  border: var(--border-1) solid var(--border-border);
  border-radius: var(--radius-4);
  background: var(--background-page);
  color: var(--text-primary);
  font-size: var(--type-body-0-size);
  text-decoration: none;
}
.to-top[hidden] { display: none; }
@media (min-width: 768px) { .site-footer { padding-top: var(--spacing-48); } }

/* ---------- Icons: mask, so they follow currentColor ---------- */

.icon {
  display: inline-block;
  width: var(--size-icon);
  height: var(--size-icon);
  background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}
/* High-contrast (forced colors) mode repaints backgrounds with the page color, which hid every masked icon: keep the
   mask's fill as the text color the mode picked */
@media (forced-colors: active) {
  .icon, .shot-toggle::before, .shot-enlarge::before, .lightbox-icon::before { forced-color-adjust: none; background: currentColor; }
}
.icon-close { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); }

/* ---------- Home ---------- */

.home { width: min(1150px, 100% - 2 * var(--page-margin)); text-align: center; }
.home > section + section { margin-top: var(--spacing-48); }
.hero { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-48); }
.hero h1 {
  width: min(1122px, 100%);
  margin: 0;
  font-family: var(--font-display-1-family);
  font-weight: var(--font-style-regular);
  font-size: clamp(44px, 4.5vw, var(--type-display-1-size));
  line-height: calc(var(--type-display-1-line-height) / var(--type-display-1-size));
  letter-spacing: var(--type-display-1-tracking);
  text-wrap: pretty;
  color: var(--text-primary);
}
@media (max-width: 767px) { .hero h1 { line-height: 44px; letter-spacing: -1px; } }
.lead {
  margin: 0;
  font-family: var(--font-display-0-family);
  font-size: var(--type-display-0-size);
  line-height: var(--type-display-0-line-height);
  letter-spacing: var(--type-display-0-tracking);
}
.lead em { white-space: nowrap; }
@media (max-width: 767px) { .lead { font-size: 20px; line-height: 30px; letter-spacing: 0; } }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Card / Project */
/* Cards keep one size and wrap (3, 2, then 1 across), so they never resize or clip as the window narrows */
.cards { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--spacing-24) 35px; justify-content: center; margin: 0; padding: 0; list-style: none; }
.cards > .card { flex: 0 1 360px; min-width: 0; }
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 19px;
  padding: var(--spacing-32) var(--spacing-24);
  text-align: left;
  background: var(--background-surface);
  border: 0.5px solid var(--border-border-subtle);
  border-radius: var(--radius-24) var(--radius-24) var(--radius-72) var(--radius-24);
}
.card-thumb { width: 100%; aspect-ratio: 304 / 171; object-fit: cover; border-radius: var(--radius-4); }
.card h3 {
  margin: 0;
  font-family: var(--font-heading-family);
  font-weight: var(--font-style-regular);
  font-size: var(--type-heading-h3-size);
  line-height: var(--type-heading-h3-line-height);
  letter-spacing: var(--type-heading-h3-tracking);
}
.card h3 a { color: var(--text-primary); text-decoration: none; }
.card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.card h3 a:focus-visible { outline: none; }
.card h3 a:focus-visible::after { outline: var(--border-2) solid var(--border-border-focus); outline-offset: 2px; }
.card:hover h3 a { text-decoration: underline; text-decoration-thickness: var(--border-1); text-underline-offset: 0.18em; }
.card p { margin: calc(var(--spacing-12) - 19px) 0 0; color: var(--text-primary); font-size: var(--type-body-0-size); line-height: var(--type-body-0-line-height); }
@media (prefers-reduced-motion: no-preference) { .card { transition: transform 0.15s; } .card:hover { transform: translateY(-2px); } }

/* ---------- Case study ---------- */

.case-study article { display: flex; flex-direction: column; gap: var(--spacing-24); }
.case-study article > * { margin-block: 0; }

/* Centered flex, so a subtitle capped narrower than the header stays centered */
.case-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 778px;
  margin-inline: auto;
  text-align: center;
}
.case-header > * { width: 100%; }
.case-header h1 { margin: 0 auto; font-weight: var(--font-style-regular); text-wrap: balance; }
/* A long title and subtitle (GNI × NPA) run wider than the 778px header, as in Figma 642:255743: two lines and one, across the 1120px page */
@media (min-width: 1216px) { .case-header.case-header-wide { width: 1178px; max-width: none; margin-inline: calc(50% - 589px); } }
.nowrap { white-space: nowrap; }
/* The subtitle is never wider than the title's widest line (--title-width, measured by js/site.js) */
.case-header p {
  max-width: var(--title-width, none);
  margin: var(--spacing-24) 0 0;
  text-wrap: balance;
  color: var(--text-primary);
  font-size: var(--type-body-0-size);
  line-height: var(--type-body-0-line-height);
  letter-spacing: 0.08em;
}

/* Hero: the animation in a window over the painting */
.hero-shot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--spacing-12) var(--spacing-16); width: 100%; margin: 0; }
.hero-stage { position: relative; flex: 0 0 100%; overflow: hidden; aspect-ratio: 1119 / 606; background: var(--background-surface); border-radius: var(--radius-8); }
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Figma 614:149201: the 960px window sits 80px in and 46px down, and runs past the painting's bottom edge */
.hero-window {
  position: absolute;
  left: 7.15%;
  top: 7.59%;
  width: 85.79%;
  bottom: 0;
  overflow: hidden;
  border-radius: 6.3px 6.3px 0 0;
  background: #fff;
  cursor: zoom-in;
}
.hero-window video { display: block; width: 100%; height: auto; }
/* A still image in the window (POP's placeholder) fills it */
.hero-window-still img, .hero-window-still .lightbox-trigger { display: block; width: 100%; height: 100%; object-fit: cover; }
/* A slide-deck clip (GNI × NPA, Figma 655:268139): a 960 × 534 window 34px down, held inside the painting */
.hero-window-slide { top: 5.61%; bottom: auto; height: 88.12%; border-radius: var(--radius-8); background: none; }
.hero-window-slide video { height: 100%; object-fit: cover; }
/* POP (Figma 785:11423): the clip fills a window 48px in from the painting's top and sides, running past its bottom */
.hero-window-cover { left: 4.84%; top: 7.84%; width: 90.32%; border-radius: 0; background: none; }
.hero-window-cover video { height: 100%; object-fit: cover; object-position: top; }
/* Socialite: the whole app window, centered, with the same 46px of painting above and below */
.hero-window-centered { left: 50%; top: 7.59%; bottom: auto; width: auto; height: 84.82%; aspect-ratio: 1440 / 1024; transform: translateX(-50%); border-radius: 6.3px; }
.hero-window-centered video { height: 100%; object-fit: cover; }
.hero-shot figcaption {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line-height);
}
.shot-actions { display: flex; gap: var(--spacing-8); }

/* Icon buttons over the animation: a masked icon and a hover/focus label (the aria-label). Icons are drawn here, not in the Figma icon set. */
.shot-toggle, .shot-enlarge {
  position: relative;
  width: 32px;
  height: 32px;
  padding: 0;
  font-size: 0;
  color: var(--text-primary);
  background: var(--background-page);
  border: 0;
  border-radius: var(--radius-4);
  cursor: pointer;
  --icon-pause: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 3h4v14H4zM12 3h4v14h-4z'/%3E%3C/svg%3E");
  --icon-play: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 3l12 7-12 7z'/%3E%3C/svg%3E");
  --icon-enlarge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3 8V3h5M12 3h5v5M17 12v5h-5M8 17H3v-5' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E");
}
.shot-toggle::before, .shot-enlarge::before {
  content: "";
  position: absolute;
  inset: 7px;
  background: currentColor;
  -webkit-mask: var(--icon-pause) center / contain no-repeat;
  mask: var(--icon-pause) center / contain no-repeat;
}
.shot-toggle.is-paused::before { -webkit-mask-image: var(--icon-play); mask-image: var(--icon-play); }
.shot-enlarge::before { -webkit-mask-image: var(--icon-enlarge); mask-image: var(--icon-enlarge); }
.shot-toggle::after, .shot-enlarge::after {
  content: attr(aria-label);
  position: absolute;
  right: 0;
  bottom: calc(100% + 6px);
  padding: var(--spacing-4) var(--spacing-8);
  border-radius: var(--radius-4);
  background: var(--text-primary);
  color: var(--background-page);
  font-size: var(--type-body-0-size);
  line-height: var(--type-body-0-line-height);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}
.shot-toggle:hover::after, .shot-enlarge:hover::after,
.shot-toggle:focus-visible::after, .shot-enlarge:focus-visible::after { opacity: 1; }
.shot-toggle[data-tip-dismissed]::after, .shot-enlarge[data-tip-dismissed]::after { opacity: 0; }
@media (forced-colors: active) { .shot-toggle, .shot-enlarge { border: 1px solid ButtonText; } }

/* Phones: the animation is nearly full width (12px from the screen edge) at its own proportions (title bar cropped), painting dropped */
@media (max-width: 767px) {
  .hero-shot { width: auto; margin-inline: calc(-1 * var(--bleed)); }
  .hero-stage { aspect-ratio: auto; overflow: visible; background: none; }
  .hero-bg { display: none; }
  /* The window starts at its wide-screen width and fills the column only as it narrows */
  .hero-window { position: static; width: min(100%, calc(578px + (767px - 100vw) * 0.4)); margin-inline: auto; aspect-ratio: 1440 / 1072; border-radius: 6px; }
  .hero-window-slide { height: auto; aspect-ratio: 16 / 9; }
  .hero-window-centered { height: auto; aspect-ratio: 1440 / 1024; transform: none; }
  .hero-shot figcaption { margin-left: var(--bleed); }
  .shot-actions { margin-right: var(--bleed); }
}

/* Content / Summary Block */
.summary { display: flex; flex-direction: column; gap: var(--spacing-12); }
.at-a-glance {
  padding: var(--spacing-32);
  background: var(--background-surface);
  border-radius: var(--radius-8);
}
.at-a-glance h2 { margin: 0 0 var(--spacing-12); }
/* Unlocked: a link under At a glance to the Solution section (js/unlock.js) */
.skip-to-solution { margin: 0; font-size: var(--type-body-0-size); line-height: var(--type-body-0-line-height); letter-spacing: var(--type-body-0-tracking); }
.at-a-glance dl { display: grid; gap: var(--spacing-24); margin: 0; }
@media (min-width: 600px) { .at-a-glance dl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .at-a-glance dl { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.at-a-glance dd {
  margin: var(--spacing-8) 0 0;
  color: var(--text-primary);
  font-size: var(--type-body-0-size);
  line-height: var(--type-body-0-line-height);
}

/* Reading column: section headings with a rule, body at the interface sizes */
.prose p {
  font-size: var(--type-body-0-size);
  line-height: var(--type-body-0-line-height);
}
@media (min-width: 768px) {
  .prose p {
    font-size: var(--type-body-1-size);
    line-height: var(--type-body-1-line-height);
  }
}
.case-study .prose h2 { padding-top: var(--spacing-12); }
@media (min-width: 768px) {
  .case-study .prose h2 {
    font-size: var(--type-heading-h2-size);
    line-height: var(--type-heading-h2-line-height);
    letter-spacing: var(--type-heading-h2-tracking);
  }
}
#protected-content:not([hidden]) { width: 100%; }
/* Focus moves to the unlocked text for screen readers; it isn't a control, so it shows no ring */
#protected-content:focus { outline: none; }

/* ---------- Figures: image with the system's image shadow ---------- */

.shot { margin: 0; }
.shot img { display: block; width: 100%; height: auto; }
/* Phones: images are nearly full width (12px from the screen edge) */
@media (max-width: 767px) {
  .shot { margin-inline: calc(-1 * var(--bleed)); }
  .shot figcaption { padding-inline: var(--bleed); }
}

/* ---------- Plain pages (resume, request, receipt, beyond work) ---------- */

.page h1 { margin-top: var(--spacing-16); }
@media (min-width: 768px) { .page h1 { margin-top: var(--spacing-32); } }

/* ---------- About ---------- */

/* Figma 642:253731: Heading/h2 (the page's h1), then Body/body-1 paragraphs 24 apart, beside a 230px portrait,
   the pair centered at 789px (230 + 32 + 527) */
.about h1 { margin: 0 0 var(--spacing-16); font-weight: var(--font-style-medium); font-size: var(--type-heading-h2-size); line-height: var(--type-heading-h2-line-height); letter-spacing: var(--type-heading-h2-tracking); }
.about-grid { display: grid; gap: var(--spacing-24); }
.portrait { display: block; }
/* Stacked, the portrait keeps its two-column width (230px) instead of growing as the window narrows */
.portrait img { display: block; width: 100%; max-width: 230px; height: auto; aspect-ratio: 230 / 247; object-fit: cover; object-position: 50% 25%; border-radius: var(--radius-4); }
.about { padding-bottom: 0; }
@media (min-width: 768px) { main.about { padding-top: var(--spacing-64); } }
.about .prose { margin: 0; max-width: none; }
.about .prose p { margin: 0 0 var(--spacing-24); color: var(--text-primary); font-size: var(--type-body-1-size); line-height: var(--type-body-1-line-height); }
.about .prose p:last-child { margin-bottom: 0; }
@media (min-width: 843px) {
  .about-grid { grid-template-columns: 230px minmax(0, 527px); justify-content: center; gap: var(--spacing-32); align-items: start; }
  .portrait img { max-width: none; }
}

/* ---------- Beyond work ---------- */

.shot-frame { position: relative; display: flex; justify-content: center; aspect-ratio: 720 / 368; padding: var(--spacing-16); overflow: hidden; border-radius: var(--radius-8); }
.shot-frame .shot-frame-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.shot .shot-frame > :is(img:not(.shot-frame-bg), video) { position: relative; width: auto; height: 100%; max-width: 100%; object-fit: contain; border-radius: var(--radius-8); }
.shot-frame .shot-actions { position: absolute; right: var(--spacing-8); bottom: var(--spacing-8); }
.beyond h2 { margin: var(--spacing-24) 0 var(--spacing-16); }
.beyond section > :last-child { margin-bottom: 0; }
.beyond h3 {
  margin: var(--spacing-16) 0 var(--spacing-4);
  font-size: var(--type-label-2-size);
  line-height: var(--type-label-2-line-height);
  letter-spacing: var(--type-label-2-tracking);
}
.beyond h3 a { font-weight: var(--font-style-regular); font-size: var(--type-body-1-size); line-height: var(--type-body-1-line-height); }
.beyond .date { margin: 0; color: var(--text-primary); font-size: var(--type-body-0-size); line-height: var(--type-body-0-line-height); }
.beyond .date + p { margin: 0; }
.beyond p, .beyond li { font-size: var(--type-body-1-size); line-height: var(--type-body-1-line-height); }
.beyond .date { font-size: var(--type-body-0-size); line-height: var(--type-body-0-line-height); }
.beyond ul { margin: var(--spacing-8) 0 0; padding-left: 27px; }
.beyond li { margin-bottom: var(--spacing-4); }

/* ---------- Forms: Input / Single line and Multiline, Button / Primary ---------- */

label {
  display: block;
  padding-bottom: var(--spacing-8);
  font-weight: var(--font-style-semibold);
  font-size: var(--type-label-1-size);
  line-height: var(--type-label-1-line-height);
  letter-spacing: var(--type-label-1-tracking);
}
.optional { font-weight: var(--font-style-regular); font-style: italic; color: var(--text-primary); }

input, textarea {
  display: block;
  width: 100%;
  min-height: var(--size-input-single-line-height);
  padding: var(--spacing-8) var(--spacing-12);
  font: inherit;
  color: var(--text-primary);
  background: var(--background-page);
  border: var(--border-1) solid var(--border-border);
  border-radius: var(--radius-4);
}
/* Single line keeps the page fill in every state; Multiline starts unfilled with the decorative border and takes the surface fill on interaction */
input:hover, input:disabled { border-color: var(--border-border-decorative); }
textarea { min-height: var(--size-input-multiline-min-height); resize: vertical; background: transparent; border-color: var(--border-border-decorative); }
textarea:is(:hover, :focus, :active, :disabled) { background: var(--background-surface); }
input:focus, textarea:focus {
  outline: var(--border-2) solid var(--border-border-focus);
  outline-offset: -1px;
}
/* Error (Figma 56:225): a 1px status/error border on a 10% error fill; focus keeps its own ring */
input[aria-invalid="true"], textarea[aria-invalid="true"] {
  background: var(--decorative-red);
  border-color: var(--status-error);
}
input:disabled, textarea:disabled { opacity: calc(var(--opacity-disabled) / 100); }
/* Show/hide password (js/unlock.js): a text button inside the right end of the field */
.password-field { position: relative; display: block; }
.password-field input { padding-right: 72px; }
.password-toggle {
  position: absolute;
  top: 50%;
  right: var(--spacing-8);
  transform: translateY(-50%);
  min-width: 44px;
  min-height: 32px;
  padding: 0 var(--spacing-8);
  font: inherit;
  font-size: var(--type-body-0-size);
  line-height: var(--type-body-0-line-height);
  color: var(--text-link);
  background: none;
  border: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.password-toggle:hover { font-weight: var(--font-style-medium); }

.unlock-error, .field-error, .form-error {
  margin: var(--spacing-8) 0 0;
  color: var(--status-error);
  font-size: var(--type-body-0-size);
  line-height: var(--type-body-0-line-height);
}

.field + .field { margin-top: var(--spacing-24); }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-16) var(--spacing-16); margin: var(--spacing-24) 0 0; }

.button, button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--size-button-height);
  padding: var(--spacing-8);
  font: inherit;
  font-family: var(--font-body-family);
  font-weight: var(--font-style-semibold);
  font-size: var(--type-button-size);
  line-height: var(--type-button-line-height);
  letter-spacing: var(--type-button-tracking);
  color: var(--text-on-accent);
  text-decoration: none;
  background: var(--accent-purple);
  border: var(--border-1) solid var(--accent-purple);
  border-radius: var(--radius-0);
  cursor: pointer;
}
.button:active, button[type="submit"]:active { color: var(--text-on-accent); }
/* Button / Primary, Type=Secondary (Figma 56:149): no fill, a border/border outline, primary text */
.button.button-secondary { color: var(--text-primary); background: none; border-color: var(--border-border); }
.button.button-secondary:active { color: var(--text-primary); }
button[type="submit"]:disabled { opacity: calc(var(--opacity-disabled) / 100); cursor: progress; }
.actions a:not(.button) { display: inline-flex; align-items: center; min-height: 24px; font-size: var(--type-body-0-size); line-height: var(--type-body-0-line-height); }

/* ---------- Modal / Access: the inline gate, the dialog and the receipt ---------- */

.gate, .modal, .receipt, .request-card {
  background: var(--background-page);
  border-radius: var(--radius-0);
  border: var(--border-1) solid var(--border-border-subtle);
  box-shadow: var(--effect-elevation-modal);
  padding: var(--spacing-32);
}
.gate { margin: 0 auto var(--spacing-32); background: var(--background-surface); }
.case-study .gate { width: 100%; margin-block: var(--spacing-16) 0; }
.gate h2, .modal h2, .receipt h1, .request-card h1 {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: var(--type-heading-h2-size);
  font-weight: var(--font-style-medium);
  line-height: var(--type-heading-h2-line-height);
  letter-spacing: var(--type-heading-h2-tracking);
}
.gate > p {
  margin: var(--spacing-12) 0 0;
  font-size: var(--type-body-1-size);
  line-height: var(--type-body-1-line-height);
}
/* Password gate (Figma 58:20, 218:1304): no close X; title, text, field and actions 12 apart on phones,
   16 on desktop (the actions add 16 more); the label sits 12 above the field */
.gate .unlock-form label { padding: var(--spacing-12) 0 var(--spacing-12); }
.gate .actions { margin-top: calc(var(--spacing-12) + var(--spacing-16)); }
.gate { padding: var(--spacing-48) var(--spacing-24); }
/* Phones: full-width buttons; in the gate the request link goes under the button */
@media (max-width: 767px) {
  .gate .actions { flex-direction: column; align-items: stretch; }
  .gate .actions .request-link { align-self: flex-start; }
  :is(.gate, .receipt, .modal-receipt, .request-form) .actions :is(button, .button) { width: 100%; }
  .request-form .actions button { min-height: 48px; }
}
@media (min-width: 768px) {
  .gate { padding: var(--spacing-48) var(--spacing-32); }
  .gate .unlock-form label { padding-top: var(--spacing-16); }
  .gate .actions { margin-top: var(--spacing-32); }
}

.modal {
  width: min(var(--container-medium), 100% - 48px);
  max-height: calc(100% - 48px);
  margin: auto;
  overflow: auto;
  color: inherit;
}
.modal::backdrop { background: var(--background-overlay); }
/* Phones: the dialog fills the screen (Drue, 2026-10-30) */
@media (max-width: 767px) {
  .modal { width: 100%; max-width: 100%; height: 100%; max-height: 100%; border: 0; box-shadow: none; }
}
/* The page under any open modal dialog doesn't scroll (Drue, 2026-10-30) */
html:has(dialog:modal) { overflow: hidden; }
html { scrollbar-gutter: stable; } /* so locking scroll doesn't shift the page where scrollbars take up room */
/* Resume dialog: the password gate's field and actions inside the modal card */
.modal .unlock-form label { padding: var(--spacing-12) 0; }
.modal .unlock-form .actions { margin-top: calc(var(--spacing-12) + var(--spacing-16)); }
@media (min-width: 768px) {
  .modal .unlock-form label { padding-top: var(--spacing-16); }
  .modal .unlock-form .actions { margin-top: var(--spacing-32); }
}
@media (max-width: 767px) {
  .modal .unlock-form .actions { flex-direction: column; align-items: stretch; }
  .modal .unlock-form .actions button { width: 100%; }
  .modal .unlock-form .actions .request-link { align-self: flex-start; }
}
/* The close X sits on the heading's first line, so a heading that wraps doesn't pull it down */
.modal-header { display: flex; align-items: flex-start; gap: var(--spacing-16); }
.modal-header :is(h1, h2) { flex: 1; min-width: 0; }
.modal-close {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  color: var(--text-primary);
  background: none;
  border: 0;
  cursor: pointer;
}
.modal-header .modal-close { margin-top: calc((var(--type-heading-h2-line-height) - 44px) / 2); }
:is(.modal, .request-card) .request-form { padding-top: var(--spacing-32); }
/* The page version (no JavaScript, or opened directly) is the same card */
.request-card { max-width: var(--container-medium); margin: 0 auto; }
/* Phones (Figma 218:1322): 24px padding and 24 between the header and the form */
@media (max-width: 767px) {
  .modal, .request-card { padding: var(--spacing-24); }
  :is(.modal, .request-card) .request-form { padding-top: var(--spacing-24); }
}
/* Request access (Figma 59:21): fields 24 apart, the button 16 further */
.field + .actions { margin-top: calc(var(--spacing-24) + var(--spacing-16)); }

/* Request received (Figma 216:920, 218:1394): the close X on its own row at the top right, then the heading, text and
   one action, 12 apart (the action 16 more); 12/32/48 padding, 24 at the sides on phones */
.receipt { margin: 0 auto; }
.receipt, .modal.modal-receipt { padding: var(--spacing-12) var(--spacing-24) var(--spacing-48); }
@media (min-width: 768px) { .receipt, .modal.modal-receipt { padding-inline: var(--spacing-32); } }
.modal-close-row { display: flex; justify-content: flex-end; margin-bottom: var(--spacing-12); }
.receipt > p, .modal > p {
  margin: var(--spacing-12) 0 0;
  color: var(--text-primary);
  font-size: var(--type-body-1-size);
  line-height: var(--type-body-1-line-height);
}
.receipt .actions, .modal > .actions { gap: var(--spacing-16); margin-top: calc(var(--spacing-12) + var(--spacing-16)); }

@media (prefers-reduced-motion: no-preference) {
  a, button, input, textarea { transition: color 0.15s, background-color 0.15s; }
}

/* ---------- Lightbox: case study images open larger (js/lightbox.js) ---------- */
.lightbox-trigger { position: relative; display: block; width: 100%; margin: 0; padding: 0; border: 0; background: none; cursor: zoom-in; }
/* The enlarge icon in the image's corner: the animations' .shot-enlarge look, drawn inside the image button */
.lightbox-icon {
  position: absolute;
  right: var(--spacing-8);
  bottom: var(--spacing-8);
  z-index: 1;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-4);
  background: var(--background-page);
  color: var(--text-primary);
  pointer-events: none;
}
.lightbox-icon::before {
  content: "";
  position: absolute;
  inset: 7px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3 8V3h5M12 3h5v5M17 12v5h-5M8 17H3v-5' fill='none' stroke='black' stroke-width='2'/%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 20 20'%3E%3Cpath d='M3 8V3h5M12 3h5v5M17 12v5h-5M8 17H3v-5' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (forced-colors: active) { .lightbox-icon { border: 1px solid ButtonText; } }
.lightbox {
  max-width: none;
  max-height: none;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: var(--spacing-16);
  border: 0;
  background: transparent;
  color: #fff;
  overflow: auto;
}
.lightbox[open] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--spacing-12); }
.lightbox::backdrop { background: rgba(0, 0, 0, 0.88); }
.lightbox form { position: absolute; top: var(--spacing-16); right: var(--spacing-16); margin: 0; }
.lightbox-close {
  min-height: 44px;
  padding: 0 var(--spacing-16);
  border: var(--border-1) solid #fff;
  border-radius: var(--radius-4);
  background: #191919;
  color: #fff;
  font: inherit;
  cursor: pointer;
}
.lightbox-close:focus-visible { outline-color: #fff; }
.lightbox-img[hidden], .lightbox-video[hidden] { display: none; }
.lightbox-img, .lightbox-video { max-width: min(100%, 1600px); max-height: calc(100% - 120px); width: auto; height: auto; object-fit: contain; }
.lightbox-caption { max-width: 892px; margin: 0; text-align: center; font-size: var(--type-body-0-size); line-height: var(--type-body-0-line-height); }
/* Opened from a carousel: previous and next stay put at the sides (so they don't move as items change size),
   the count sits under the caption */
.lightbox-nav { display: contents; }
.lightbox-nav[hidden] { display: none; }
.lightbox.has-nav { padding-inline: 76px; touch-action: pan-y; } /* horizontal swipes are for stepping */
@media (max-width: 767px) { .lightbox.has-nav { padding-inline: var(--spacing-16); } }
/* Chevron buttons, shared with the carousels' Previous and Next (.rail-prev, .rail-next): 44px square, the chevron
   turned to point back or forward; each sets its own colors */
:is(.lightbox-prev, .lightbox-next, .rail-prev, .rail-next) { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: var(--border-1) solid; border-radius: var(--radius-4); cursor: pointer; }
:is(.lightbox-prev, .lightbox-next, .rail-prev, .rail-next):disabled { opacity: calc(var(--opacity-disabled) / 100); cursor: default; }
:is(.lightbox-prev, .rail-prev) .icon { transform: rotate(90deg); }
:is(.lightbox-next, .rail-next) .icon { transform: rotate(-90deg); }
.lightbox-prev, .lightbox-next {
  position: fixed;
  top: 50%;
  border-color: #fff;
  background: #191919;
  color: #fff;
  transform: translateY(-50%);
}
.lightbox-prev { left: var(--spacing-16); }
.lightbox-next { right: var(--spacing-16); }
:is(.lightbox-prev, .lightbox-next):focus-visible { outline-color: #fff; }
.lightbox-count { margin: 0; min-width: 4em; text-align: center; font-size: var(--type-body-0-size); line-height: var(--type-body-0-line-height); font-variant-numeric: tabular-nums; }

/* ---------- Other recent projects (Figma 820:111160): Card / Project cards, as on Home ---------- */
.more-work { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-16); width: 100%; margin: var(--spacing-48) auto 0; }
.more-work h2, .work > h2 { margin: 0 0 var(--spacing-16); text-align: center; }
.more-work h2 { margin-bottom: 0; }

/* ---------- Case study body (Figma 791:10794): one column, 16px between blocks ---------- */

/* Flow spacing: 16px between blocks, 8px under an h4 (the column and the locked-page preview inside it) */
.case-study .prose > *, .teaser-preview > * { margin: 0; }
.case-study .prose > * + *, .teaser-preview > * + * { margin-top: var(--spacing-16); }
.case-study .prose > h4 + * { margin-top: var(--spacing-8); }
.case-study .prose > h3 + * { margin-top: var(--spacing-12); }
/* Heading 3 inset: Heading/h3-card (Grenze); Heading 4 inset: Heading/h4 (Source Serif Medium) */
.case-study .prose > h3 {
  font-family: var(--font-heading-family);
  font-weight: var(--font-style-regular);
  font-size: var(--type-heading-h3-size);
  line-height: var(--type-heading-h3-line-height);
  letter-spacing: var(--type-heading-h3-tracking);
  color: var(--text-secondary);
}
.case-study .prose .take h4 { margin: 0; }
:is(.case-study .prose > h4, .take h4, .at-a-glance h2, .more-work h2, .work > h2) em { font-variant-caps: normal; }
/* Heading/h4-accent: Heading/h4 (Medium) in small caps, an italic lead word kept in its own case */
.case-study .prose > h4, .case-study .prose .take h4, .at-a-glance h2, .more-work h2, .work > h2 {
  font-variant-caps: all-small-caps;
  font-family: var(--font-body-family);
  font-weight: var(--font-style-medium);
  font-size: var(--type-heading-h4-size);
  line-height: var(--type-heading-h4-line-height);
  letter-spacing: var(--type-heading-h4-tracking);
}
/* Lists (Figma's constraints): text 16px in from the bullet, items 8px apart, lead terms SemiBold */
.case-study .prose ul { padding-left: var(--spacing-16); }
.case-study .prose li {
  font-size: var(--type-body-0-size);
  line-height: var(--type-body-0-line-height);
}
.case-study .prose > :is(ul, ol) > li + li { margin-top: var(--spacing-8); }
@media (min-width: 768px) {
  .case-study .prose li { font-size: var(--type-body-1-size); line-height: var(--type-body-1-line-height); }
}
.data-table strong { font-weight: var(--font-style-semibold); }
/* Low specificity, so the column's flow spacing still applies to figures in it */
:where(.case-study .prose) figure { margin: 0; }
.numeral { font-feature-settings: "onum" 1, "pnum" 1; }
.small-caps { font-variant-caps: small-caps; }

/* ---------- Card (Figma 477:319404): surface, a 0.5px hairline, 8px corners, 32px padding ----------
   Variants: Project (.step-card, the carousel cards), Stacked (.feature-card, a centered title over an image),
   Large (.drawer, which opens and closes), Small (.take) and Large 1/2 (.prototype-card). */
.feature-card, .step-card, .drawer, .prototype-card {
  background: var(--background-surface);
  border: 0.5px solid var(--border-border-subtle);
  border-radius: var(--radius-8);
  padding: var(--card-padding);
}
/* Card title: Heading/h3-card */
.case-study .prose :is(.feature-card-title, .step-card :is(h3, h4), .drawer summary h3, .personas h4, .prototype-card-title) {
  margin: 0;
  padding: 0;
  font-family: var(--font-heading-family);
  font-weight: var(--font-style-regular);
  font-size: var(--card-title-size, var(--type-heading-h3-size));
  line-height: var(--card-title-line-height, var(--type-heading-h3-line-height));
  letter-spacing: var(--type-heading-h3-tracking);
  color: var(--text-primary);
}
@media (max-width: 767px) { .case-study { --card-title-size: 26px; --card-title-line-height: 30px; } }
/* Card text: Body/body-0, primary (Drue, 2026-10-30: only captions and h3s stay secondary) */
.case-study .prose :is(.step-card, .drawer-body, .take, .personas, .prototype-card-text) p {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--type-body-0-size);
  line-height: var(--type-body-0-line-height);
  letter-spacing: var(--type-body-0-tracking);
}
/* Caption under an image: Body/caption, 12px below it, product names in italics */
.case-study .prose figcaption, .shot figcaption {
  margin: var(--spacing-12) 0 0;
  color: var(--text-secondary);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line-height);
  letter-spacing: var(--type-caption-tracking);
}

.thumb { display: block; width: 100%; height: auto; aspect-ratio: 304 / 171; object-fit: cover; border-radius: var(--radius-4); background: var(--background-surface); }
.thumb-top { object-position: top; }
/* Composite thumbnail (Figma: a painting fill with a cropped screenshot fill on top). --l, --t and --w place the
   screenshot as fractions of the frame, taken from the fill's crop transform; .composite-fit centers it whole. */
.composite { position: relative; overflow: hidden; margin: 0; aspect-ratio: 304 / 171; border-radius: var(--radius-4); background: var(--background-surface); }
.composite-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.composite-shot { position: absolute; left: var(--l, 0); top: var(--t, 0); width: var(--w, 100%); height: auto; max-width: none; }
.composite-fit .composite-shot { inset: 0; width: 100%; height: 100%; object-fit: contain; }
/* The enlarge button covers the frame, so its focus ring is visible (inside, since the frame clips) */
.composite .lightbox-trigger { position: absolute; inset: 0; }
.composite .lightbox-trigger:focus-visible { outline-offset: -4px; }
/* A window over a painting, cropped at its bottom (the goal card's projects list) */
.composite-window { position: absolute; left: var(--l); top: var(--t); width: var(--w); height: var(--h); overflow: hidden; border-radius: var(--radius-4); background: #fff; }
.composite-window video { display: block; width: 100%; height: auto; }
/* Square window filled with the clip's own edge color (--fill), so no white shows where the clip lands on a fraction of a pixel */
.composite-window-flat { border-radius: 0; background: var(--fill, #fff); }
/* The clip takes the window's corners (its own 8px rounding let the window's white show at the corners) */
.composite .composite-window video { border-radius: 0; }
/* A clip that fills its window (Figma FILL) or fits inside it (FIT), centered */
.composite-window-cover video, .composite-window-contain video { width: 100%; height: 100%; }
.composite-window-cover video { object-fit: cover; }
.composite-window-contain video { object-fit: contain; }
/* Image / Case Study (Figma 655:280865): a screenshot centered whole on a painting, --w wide */
.stage-figure .composite { aspect-ratio: 892 / 610; }
.composite-center .composite-shot { left: 50%; top: 50%; width: var(--w); transform: translate(-50%, -50%); }
.composite-shadow .composite-shot { box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25); }
.media { position: relative; display: grid; margin: 0; }
/* The clip and its buttons share the first grid cell, so the buttons stay on the clip however long the caption is */
.media > :not(figcaption) { grid-area: 1 / 1; }
.media img, .media video, .feature-card-media video { display: block; width: 100%; height: auto; border-radius: var(--radius-4); }
/* A cropped screenshot keeps its crop width inside a captioned figure */
:is(.media, .split-media) .composite-shot { width: var(--w, 100%); border-radius: 0; }
/* A YouTube embed (POP's Bridgerton trailer): 16:9 at the column width, muted until the viewer unmutes */
.media-embed iframe { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius-4); background: var(--background-surface); }
/* With JavaScript the inline player has no YouTube chrome and ignores the pointer (hovering would cover the video);
   our pause and full screen buttons sit over it, and full screen has YouTube's controls */
.media-embed.is-chromeless iframe { pointer-events: none; }
.lightbox-embed { width: min(100%, 1600px, (100vh - 160px) * 16 / 9); height: auto; aspect-ratio: 16 / 9; border: 0; background: #000; }
.lightbox-embed[hidden] { display: none; }
.feature-card-media video { aspect-ratio: 304 / 171; object-fit: cover; object-position: top; background: var(--background-page); }
/* POP's goal card (Drue, 2026-10-30): the whole clip at its own shape, square corners, buttons over the clip (not the caption) */
.whole-shot { position: relative; }
.feature-card-media .whole-shot video { aspect-ratio: auto; border-radius: 0; }
/* Play/pause and enlarge sit over the clip's corner */
.media .shot-actions { position: relative; z-index: 1; align-self: end; justify-self: end; margin: var(--spacing-8); }
.lightbox-trigger img { border-radius: inherit; }

/* Project card: title, text, then the image and anything under it */
.step-card { flex: 0 0 min(509px, var(--rail-card)); }
/* Inside a card or drawer: 12px between children, 16px where anything that isn't text follows text */
.case-study .prose :is(.step-card, .drawer-body) > :is(*, p) + :is(*, p) { margin-top: var(--spacing-12); }
.case-study .prose :is(.step-card, .drawer-body) > :is(p, ul, ol) + :not(p, ul, ol) { margin-top: var(--spacing-16); }

/* Stacked card: a centered title over a full-width image (the goal, and each shipped feature), 12px apart */
.feature-card { display: flex; flex-direction: column; gap: var(--spacing-12); }
/* Goal card media (Figma 791:12885, 791:13084): the clip in a flat window on a painting, in a wide frame with the
   modal shadow; --ratio is the frame's size, --l/--t/--w/--h the clip's place from the video fill's crop */
.goal-media { aspect-ratio: var(--ratio); box-shadow: var(--effect-elevation-modal); }
/* Socialite's goal clip shows whole at its own shape, so the window ends where the clip does */
.feature-card-media .goal-media-whole video { aspect-ratio: auto; }
.case-study .prose .feature-card-title { text-align: center; text-wrap: balance; }
.feature-card-media { position: relative; min-width: 0; margin: 0; }
img.feature-card-media { display: block; width: 100%; height: auto; border-radius: var(--radius-4); }

/* Small card: outlined, Heading/h4-accent over Body/body-0, 16px and 24px padding */
.take { display: flex; flex-direction: column; gap: var(--spacing-4); padding: var(--spacing-16) var(--spacing-24); border: 0.5px solid var(--border-border-subtle); border-radius: var(--radius-8); }
.takes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-24); }
.take:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (max-width: 767px) { .takes { grid-template-columns: minmax(0, 1fr); } }

/* Socialite's design principles (Figma 791:10967): four Project cards without images, two across */
.case-study .prose .principles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-24); margin: 0; padding: 0; list-style: none; }
.case-study .prose .principles > li { margin: 0; }
/* Space between the carousel above and the principles heading, and between the heading and its cards (Drue, 2026-10-29) */
.case-study .prose > h3:has(+ .principles) { margin-top: var(--spacing-48); margin-bottom: var(--spacing-24); }
@media (max-width: 767px) { .case-study .prose .principles { grid-template-columns: minmax(0, 1fr); } }

/* Image beside text (Figma 791:10956): two equal columns, 16px apart, top-aligned; an Image / Case Study (8px corners,
   caption below) and Body/body-1 text */
.split { display: flex; align-items: flex-start; gap: var(--spacing-16); }
.split-media { position: relative; flex: 1 1 0; min-width: 0; margin: 0; }
.split-media img, .split-media video { display: block; width: 100%; height: auto; border-radius: var(--radius-4); }
:is(.feature-card-media, .split-media) .shot-actions { position: absolute; right: var(--spacing-8); bottom: var(--spacing-8); }
.split-text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--spacing-16); }
.case-study .prose .split-text p { margin: 0; }
@media (max-width: 767px) {
  .split { flex-direction: column; align-items: stretch; }
  .split-media { flex: none; }
}
/* .split-fit: on wider screens the image is cropped to the height of the text beside it (GNI sticky notes, Drue 2026-10-30) */
@media (min-width: 768px) {
  .split-fit { align-items: stretch; }
  .split-fit .split-media > :is(img, .lightbox-trigger) { position: absolute; inset: 0; height: 100%; }
  .split-fit .split-media img { height: 100%; object-fit: cover; object-position: top; }
}

/* Content / Summary Block (Figma 791:11060): an italic Body/body-2 label over Body/body-1 text */
.summary-block { display: flex; flex-direction: column; gap: var(--spacing-8); padding: var(--card-padding); border: var(--border-1) solid var(--border-border-subtle); border-radius: var(--radius-8); }
.case-study .prose .block-label {
  margin: 0;
  padding: 0;
  font-family: var(--font-body-family);
  font-style: italic;
  font-weight: var(--font-style-regular);
  font-size: var(--type-body-2-size);
  line-height: var(--type-body-2-line-height);
  letter-spacing: var(--type-body-2-tracking);
  color: var(--text-primary);
}
.block-label em { font-style: inherit; }
.case-study .prose .summary-block p { margin: 0; color: var(--text-primary); }
/* The quote variant (hypothesis, how might we; Figma 791:10962): one centered italic Body/body-2 statement, its label
   kept for screen readers only */
.summary-block.summary-quote { padding: var(--spacing-24); text-align: center; }
.case-study .prose .summary-quote p { font-style: italic; font-size: var(--type-body-2-size); line-height: var(--type-body-2-line-height); letter-spacing: var(--type-body-2-tracking); }
.data-table thead th {
  font-weight: var(--font-style-semibold);
  font-size: var(--type-label-0-size);
  line-height: var(--type-label-0-line-height);
  letter-spacing: var(--type-label-0-tracking);
  color: var(--text-primary);
}
/* At a glance labels: Label/label-1-accent */
.at-a-glance dt {
  font-style: italic;
  font-weight: var(--font-style-regular);
  font-size: var(--type-label-1-size);
  line-height: var(--type-label-1-line-height);
  letter-spacing: var(--type-label-1-tracking);
  color: var(--text-primary);
}

/* Proto-personas: three Card / Project cards over a painting */
.personas { position: relative; overflow: hidden; padding: var(--spacing-12) 0; border-radius: var(--radius-4); }
.personas-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 63%; }
.case-study .prose .personas ul { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0; padding: 0; list-style: none; }
.case-study .prose .personas li {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
  width: 216px;
  padding: var(--spacing-16);
  background: var(--background-page);
  border: var(--border-1) solid var(--border-border-subtle);
  border-radius: var(--radius-24) var(--radius-24) var(--radius-72) var(--radius-24);
  font-size: var(--type-body-0-size);
  line-height: var(--type-body-0-line-height);
}
/* Smaller, tighter cards (Drue, 2026-10-30): 12 under the star and the title, 4 between the two lines */
.personas p + p { margin-top: calc(var(--spacing-4) - var(--spacing-12)); }
.personas-figure { margin: 0; }
/* Phones: one card per row, centered and tighter (Drue, 2026-10-29) */
@media (max-width: 599px) {
  .case-study .prose .personas li { width: 100%; max-width: 360px; align-items: center; text-align: center; }
}

/* Icons drawn from the Figma set: Star (tapered) and Chevron down */
.icon-star { width: 24px; height: 24px; flex: none; color: var(--accent-gold); --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath transform='translate(3.2 2)' d='M8.802 20C8.802 11.755 7.242 9.972 0 9.805 7.242 9.972 8.802 8.189 8.802 0c0 8.245 1.56 9.972 8.802 9.805C10.418 9.972 8.802 11.811 8.802 20Z'/%3E%3C/svg%3E"); }
/* Proto-persona stars, one accent each (Figma 919:20489–20491) */
.icon-star-pink { color: var(--accent-pink); }
.icon-star-blue { color: var(--accent-blue); }
.icon-star-orange { color: var(--accent-orange); }
/* Role names in the handoffs table (Figma 917:20001): Manager pink, Curator blue, Trafficker orange */
.data-table .role-pink { color: var(--accent-pink); }
.data-table .role-blue { color: var(--accent-blue); }
/* Figma's orange (#c47716) is 3.1:1 on the table in light mode; this darker step of the same hue is 4.5:1.
   Dark mode keeps the token, which already passes. The Ad trafficker star keeps Figma's orange. */
.data-table .role-orange { color: light-dark(#9e6012, var(--accent-orange)); }
.icon-chevron { width: 24px; height: 24px; flex: none; --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E"); }



/* Table (Figma 791:10986): surface, hairline grid, 4px corners, a caption below */
.data-table { margin: 0; }
.table-frame { background: var(--background-surface); border: var(--border-1) solid var(--border-border-subtle); border-radius: var(--radius-4); overflow: hidden; }
.table-wrap { overflow-x: auto; }
.table-wrap:focus-visible { outline: var(--border-2) solid var(--border-border-focus); outline-offset: -2px; }
.data-table table { width: 100%; min-width: 720px; table-layout: fixed; border-collapse: collapse; font-size: 14px; line-height: 20px; }
.data-table th, .data-table td { padding: var(--spacing-16); text-align: left; vertical-align: top; font-weight: var(--font-style-regular); border-bottom: var(--border-1) solid var(--border-border-subtle); border-right: var(--border-1) solid var(--border-border-subtle); }
.data-table tr > :last-child { border-right: 0; }
.data-table tbody tr:last-child > * { border-bottom: 0; }
.data-table thead th { height: 46px; padding-block: 0; vertical-align: middle; }
.data-table tbody th { font-weight: var(--font-style-semibold); }
/* A row with two outcomes (Socialite's Ad QC): a second row (.row-cont) under the shared header and starter, so the
   rule between outcomes runs straight across, 8px either side (Figma 918:20097) */
.data-table td.cell-middle { vertical-align: middle; }
.data-table tr:has(+ .row-cont) > td:not([rowspan]) { padding-bottom: var(--spacing-8); }
.data-table tr.row-cont > td { padding-top: var(--spacing-8); }
.data-table thead em { font-variant-caps: normal; }
.data-table th:nth-child(1) { width: 13.33%; }
.data-table th:nth-child(2), .data-table th:nth-child(3) { width: 20%; }
.data-table th:nth-child(4), .data-table th:nth-child(5) { width: 23.33%; }
/* Phones: each row becomes a card stacked down the page, so the table never scrolls sideways inside the
   page's own scroll. The row header is the card's title and each cell shows its column name (data-label).
   The markup carries explicit table roles, so screen readers still read it as a table. */
@media (max-width: 767px) {
  .data-table table, .data-table tbody, .data-table tr, .data-table th, .data-table td { display: block; width: auto !important; }
  .data-table table { min-width: 0; }
  .data-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .data-table tbody tr { padding: var(--spacing-16) var(--spacing-24); border-bottom: var(--border-1) solid var(--border-border-subtle); }
  .data-table tbody tr:last-child { border-bottom: 0; }
  .data-table tbody th, .data-table tbody td { padding: 0; border: 0; }
  .data-table tbody th { font-family: var(--font-heading-family); font-size: 22px; line-height: 26px; color: var(--text-primary); }
  .data-table tbody td { margin-top: var(--spacing-12); font-size: var(--type-body-0-size); line-height: var(--type-body-0-line-height); }
  /* The second outcome row continues the card above it, after a rule */
  .data-table tbody tr:has(+ .row-cont) { padding-bottom: 0; border-bottom: 0; }
  .data-table tbody tr.row-cont { padding-top: 0; }
  .data-table tbody tr.row-cont > td:first-child { margin-top: var(--spacing-16); padding-top: var(--spacing-16); border-top: var(--border-1) solid var(--border-border-subtle); }
  .data-table td::before { content: attr(data-label); display: block; margin-bottom: 2px; color: var(--text-primary); font-size: 14px; line-height: 20px; font-weight: var(--font-style-semibold); font-variant-caps: small-caps; letter-spacing: var(--type-label-1-tracking); }
  .table-wrap { overflow: visible; }
}
/* Collapsible rows on phones (js/table-rows.js): the row header is a button, the rest of the card folds away */
.table-toggle { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-16); width: 100%; padding: 0; font: inherit; color: inherit; text-align: left; background: none; border: 0; cursor: pointer; }
.table-toggle:hover > span:first-child { text-decoration: underline; text-decoration-thickness: var(--border-1); text-underline-offset: 0.18em; }
.table-toggle:focus-visible { outline: var(--border-2) solid var(--border-border-focus); outline-offset: 4px; border-radius: var(--radius-4); }
.table-toggle .icon-chevron { color: var(--text-primary); }
.table-toggle[aria-expanded="true"] .icon-chevron { transform: rotate(180deg); }
@media (prefers-reduced-motion: no-preference) { .table-toggle .icon-chevron { transition: transform 0.15s; } }
.data-table tr.is-collapsed > td { display: none; }
.data-table tr.is-collapsed > th { border-right: 0; }
.data-table tr.is-collapsed + tr.row-cont { display: none; }

/* Locked-page preview (Figma 614:150156): shown above the gate, gone once the full case study is unlocked */
.case-study .teaser { width: 100%; min-width: 0; }
.teaser-preview { min-width: 0; }
.teaser.unlocked .teaser-preview { display: none; }

/* Carousel: a row of cards that scrolls sideways and runs to the screen's right edge, so the next card peeks in */
.case-study .prose > .rail, .case-study .teaser-preview > .rail { margin-right: calc(50% - 50vw); }
.rail-track {
  display: flex;
  gap: var(--spacing-24);
  margin: 0;
  padding: 0 0 var(--spacing-4);
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.rail-track::-webkit-scrollbar { display: none; }
.rail-track::after { content: ""; flex: 0 0 calc(var(--page-margin) - var(--spacing-24) + 1px); }
.rail-track:focus-visible { outline: var(--border-2) solid var(--border-border-focus); outline-offset: 2px; }
.rail-track > li { scroll-snap-align: start; margin: 0; }
.rail-track > li.is-partial { cursor: pointer; }
/* Previous and Next under a carousel that runs past the screen (js/carousel.js), from 768px up: a mouse wheel can't
   scroll sideways (Drue, 2026-10-30). The lightbox's chevron buttons (see Lightbox), in page colors */
.rail-controls { display: flex; gap: var(--spacing-8); margin-top: var(--spacing-12); }
.rail-controls[hidden] { display: none; }
.rail-controls button { color: var(--text-primary); background: var(--background-page); border-color: var(--border-border); }
@media (max-width: 767px) { .rail-controls, .rail-controls[hidden] { display: none; } }
.case-study .prose .rail-track li { font-size: inherit; line-height: inherit; }
.rail-wide .rail-track { gap: var(--spacing-12); }
.rail-wide .feature-card { flex: 0 0 min(500px, var(--rail-card)); }
/* POP's Solution clips (Drue, 2026-10-30): Cropping 3200×1700 to 16:9 trims 178px; 22% of it (40px) comes off the left, which stops 24px short of the logo (it starts 64px in) */
.rail-wide .feature-card-media video { object-position: 22% top; }
@media (max-width: 767px) {
  /* Phones: narrower cards so about 40px of the next one shows */
  .rail-track, .rail-wide .rail-track { gap: var(--spacing-16); }
}

/* Drawer: a card that opens and closes (details/summary, so it works without JavaScript) */
.drawers { display: flex; flex-direction: column; gap: var(--spacing-16); }
.drawer summary { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-16); list-style: none; cursor: pointer; }
.drawer summary::-webkit-details-marker { display: none; }
.drawer summary:focus-visible { outline: var(--border-2) solid var(--border-border-focus); outline-offset: 4px; border-radius: var(--radius-4); }
.drawer summary:hover h3 { text-decoration: underline; text-decoration-thickness: var(--border-1); text-underline-offset: 0.18em; }
.drawer .icon-chevron { color: var(--text-primary); }
.drawer[open] .icon-chevron { transform: rotate(180deg); }
.drawer-body { padding-top: var(--spacing-12); }
.case-study .prose :is(.drawer-body, .step-card) :is(ul, ol) { margin: 0; }
.case-study .prose :is(.drawer-body, .step-card) ol { padding-left: 27px; }
.case-study .prose .drawer-body li ol { margin-top: var(--spacing-4); }
.case-study .prose :is(.drawer-body, .step-card) li { color: var(--text-primary); font-size: var(--type-body-0-size); line-height: var(--type-body-0-line-height); letter-spacing: var(--type-body-0-tracking); }
.case-study .prose :is(.drawer-body, .step-card) li + li { margin-top: var(--spacing-4); }
/* Drawers of reflections (What I learned): Card Large without an image, Body/body-1 in primary ink */
.case-study .prose .drawers-prose .drawer-body p { color: var(--text-primary); font-size: var(--type-body-1-size); line-height: var(--type-body-1-line-height); letter-spacing: var(--type-body-1-tracking); }
.case-study .prose .drawers-prose .drawer-body > * + * { margin-top: var(--spacing-8); }
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-16); align-items: start; }
@media (max-width: 767px) {
  /* One across, but each image starts at its two-across width (about 301px at 767px) and widens only gradually */
  .pair { grid-template-columns: minmax(0, 1fr); }
  .pair > :is(img, video, figure, .lightbox-trigger) { width: min(100%, calc(301px + var(--grow-767))); }
}
@media (prefers-reduced-motion: no-preference) { .drawer .icon-chevron { transition: transform 0.15s; } }

.shot video { display: block; width: 100%; height: auto; }

/* ---------- Interactive prototype: Socialite's ad details panel (js/ad-panel.js) ----------
   Product UI from the Concept 2 mockups, styled with Netflix's Hawkins Professional toolkit:
   Input, Menu item, Button, Tag, Tabbed interface and Modal, light theme. It keeps that light palette in both site themes,
   like the screenshots around it. Hawkins sets type in SF Pro Text; this uses the system font stack (SF on Apple
   devices) so nothing extra loads. The icons are Hawkins' own, kept in the locked case study. */
.prototype { display: flex; flex-direction: column; gap: var(--spacing-12); }
.case-study .prose .prototype-intro p { margin: 0; }
.case-study .prose .prototype .block-label { margin-bottom: var(--spacing-8); }
/* No overflow clip: a field menu near the bottom can hang past the painting */
.prototype-stage { position: relative; background: var(--background-surface); }
.prototype-stage .composite-bg { border-radius: inherit; }
.prototype-actions { display: flex; justify-content: flex-end; }
.case-study .prose .prototype-actions { margin: 0; }
.prototype-reset {
  padding: 0;
  font: inherit;
  font-size: var(--type-body-0-size);
  line-height: var(--type-body-0-line-height);
  color: var(--text-link);
  background: none;
  border: 0;
  text-decoration: underline;
  text-decoration-thickness: var(--border-1);
  text-underline-offset: 0.18em;
  cursor: pointer;
}
.prototype-reset:hover { text-decoration-thickness: var(--border-2); }

.ad-panel, .pop-app {
  /* Hawkins Professional semantic tokens (light), shared with POP's prototype (js/pop-plan.js) */
  --hp-fg: rgba(0, 0, 0, 0.9);
  --hp-fg-subtle: rgba(0, 0, 0, 0.7);
  --hp-fg-disabled: rgba(0, 0, 0, 0.4);
  --hp-fg-warning: #845d16;
  --hp-fg-positive: #107140;
  --hp-border-dim: rgba(128, 128, 128, 0.2);
  --hp-border-subtle: rgba(128, 128, 128, 0.4);
  --hp-border-focus: #4061e7;
  --hp-border-warning: #c3830e;
  --hp-border-positive: #0aa356;
  --hp-surface: #fff;
  --hp-surface-subtle: rgba(0, 0, 0, 0.02);
  --hp-surface-hover: rgba(0, 0, 0, 0.04);
  --hp-surface-warning: rgba(195, 131, 14, 0.1);
  --hp-surface-positive: rgba(10, 163, 86, 0.1);
  --hp-surface-disabled: #f2f2f2;
  --hp-primary: #4061e7;
  --hp-primary-hover: #3451c5;
  --hp-surface-overlay: rgba(0, 0, 0, 0.7);
  --hp-fg-negative: #c11119;
  --hp-shadow-mid: 0 0 2px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.1);
}
.ad-panel {
  position: relative;
  max-width: 440px;
  margin: 0 auto;
  padding: 24px;
  color: var(--hp-fg);
  background: var(--hp-surface);
  border-radius: 4px;
  box-shadow: var(--hp-shadow-mid);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif;
  font-weight: 400;
  font-variation-settings: normal;
  font-size: 13px;
  line-height: 20px;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}
.case-study .prose .ad-panel p { margin: 0; font-size: inherit; line-height: inherit; }
/* Panel header (Socialite sidebar, Figma 602:98666): title Bold 20/25, subtitle Regular 12/18 */
.case-study .prose .ad-panel .ap-title { font-size: 20px; line-height: 25px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.case-study .prose .ad-panel .ap-subtitle { margin-top: 4px; color: var(--hp-fg); font-size: 12px; line-height: 18px; }

/* Badge, static: Informative, Default density, Outlined, with fill. The ad's status (always Planning here). */
.case-study .prose .ad-panel .ap-badge-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 2px 8px;
  font-size: 13px;
  line-height: 20px;
  font-weight: 600;
  color: var(--hp-fg);
  background: rgba(33, 114, 227, 0.1);
  border: 1px solid #2172e3;
  border-radius: 9999px;
}
.ap-badge-status img { width: 8px; height: 8px; }

/* Tabbed interface: label-bold 12/18, 8/16 padding, 4px selected indicator; Notification badge, Numeric */
.ad-panel .ap-tabs { display: flex; margin: 16px -24px 16px; padding: 0 8px; border-bottom: 1px solid var(--hp-border-dim); }
.ad-panel .ap-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  font: inherit;
  font-size: 12px;
  line-height: 18px;
  font-weight: 600;
  color: var(--hp-fg-subtle);
  background: transparent;
  border: 0;
  cursor: pointer;
}
.ad-panel .ap-tab:hover { color: var(--hp-fg); background: var(--hp-surface-hover); }
.ad-panel .ap-tab[aria-selected="true"] { color: var(--hp-fg); box-shadow: inset 0 -4px var(--hp-border-focus); }
.ad-panel .ap-tab:focus-visible { outline: 2px solid var(--hp-border-focus); outline-offset: -2px; }

/* Details and Comments share one height: Details stays in the layout (hidden from view) while Comments fills the
   same box over it, so switching tabs never changes the panel's size. Comments scroll inside it. */
.ap-panels { position: relative; }
.ad-panel .ap-panels > .ap-tabpanel:first-child[hidden] { display: block !important; visibility: hidden; }
.ap-comments-panel { position: absolute; inset: 0; display: flex; flex-direction: column; }
.ap-comments-scroll { display: flex; flex-direction: column; flex: 1; min-height: 0; margin: -4px; padding: 4px; overflow-y: auto; }

/* Comments (Figma 602:98666): newest first, above the comment box */
.ap-empty { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.ap-empty img { width: 24px; height: 24px; opacity: 0.9; }
.case-study .prose .ad-panel .ap-empty p { color: var(--hp-fg-subtle); font-size: 14px; line-height: 21px; }
.case-study .prose .ap-comments { display: flex; flex-direction: column; gap: 24px; margin: auto 0 0; padding: 0; list-style: none; }
.case-study .prose .ap-comments li { margin: 0; font-size: 13px; line-height: 20px; }
.ap-comment { display: flex; flex-direction: column; gap: 4px; padding: 4px; border-radius: 4px; }
.ap-comment:focus { outline: 2px solid var(--hp-border-focus); outline-offset: 0; }
.ad-panel .ap-comment-head { display: flex; align-items: center; gap: 2px; }
.ap-avatar { display: grid; place-items: center; flex: none; width: 32px; height: 32px; margin-right: 6px; font-size: 10px; line-height: 15px; font-weight: 600; color: #fff; background: #2172e3; border-radius: 50%; }
.ap-caret { width: 16px; height: 16px; opacity: 0.9; }
.ap-comment-field { font-size: 14px; line-height: 21px; text-decoration: underline; text-underline-offset: 0.15em; }
/* Tag, Compact, Fill, Warning (as in the Socialite sidebar, Figma 602:98666) */
.case-study .prose .ad-panel .ap-tag { align-self: flex-start; padding: 0 4px 1px; font-size: 10px; line-height: 15px; font-weight: 600; color: #fff; border-radius: 4px; }
.ap-tag.is-warning { background: #c3830e; }
.case-study .prose .ad-panel :is(.ap-tag, .ap-comment-body) { margin-left: 40px; }
.ap-comment-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 0 40px; font-size: 12px; line-height: 18px; }
.ap-comment-date { color: var(--hp-fg-subtle); }
.ad-panel .ap-comment-action { padding: 0; font: inherit; font-weight: 600; color: var(--hp-fg); background: none; border: 0; cursor: not-allowed; }

/* Comment box: Input, Standard, Empty, in a ruled band across the panel; disabled in the prototype */
.ap-comment-box { flex: none; margin: 16px -24px 0; padding: 15px 24px; border-top: 1px solid var(--hp-border-dim); border-bottom: 1px solid var(--hp-border-dim); }
.ad-panel .ap-comment-box input { min-height: 40px; padding: 9px 11px; font: inherit; color: var(--hp-fg); background: var(--hp-surface); border: 1px solid var(--hp-border-dim); border-radius: 4px; opacity: 1; cursor: not-allowed; }
.ad-panel .ap-comment-box input::placeholder { color: var(--hp-fg-subtle); opacity: 1; }

/* Input, Standard: label 13/20 semibold, 8px to the field, message 12/18 4px below */
.ap-field + .ap-field { margin-top: 16px; }
.ap-field-head { display: flex; align-items: center; justify-content: space-between; min-height: 24px; margin-bottom: 8px; }
.ad-panel label { padding: 0; font-size: 13px; line-height: 20px; font-weight: 600; letter-spacing: 0; }
.ap-menu-wrap { position: relative; }

/* Button, Tertiary, icon only: the field's More menu */
.ad-panel .ap-more {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 4px;
  background: transparent;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}
.ap-more img { display: block; width: 16px; height: 16px; opacity: 0.9; }
.ad-panel .ap-more:hover, .ad-panel .ap-more[aria-expanded="true"] { background: var(--hp-surface-hover); }
.ad-panel .ap-more:focus-visible { outline: 2px solid var(--hp-border-focus); outline-offset: 0; }

/* Menu: Menu item, Single select, Standard (224px, 10/12 padding, hover surface) */
/* Opens from the button's left edge and runs past the panel, like a real dropdown; where that would leave the
   prototype's stage, the script lines its right edge up with the button's (.ap-menu-end) */
.case-study .prose .ap-menu {
  position: absolute;
  left: 0;
  top: calc(100% + 4px);
  z-index: 5;
  width: 224px;
  margin: 0;
  padding: 4px 0;
  list-style: none;
  background: var(--hp-surface);
  border-radius: 4px;
  box-shadow: var(--hp-shadow-mid);
}
.case-study .prose .ap-menu.ap-menu-end { left: auto; right: 0; }
.case-study .prose .ap-menu.ap-menu-up { top: auto; bottom: calc(100% + 4px); }
.case-study .prose .ap-menu li { margin: 0; font-size: 13px; line-height: 20px; }
.ap-menu [role="menuitem"] { display: block; width: 100%; padding: 10px 12px; font: inherit; color: var(--hp-fg); text-align: left; background: transparent; border: 0; cursor: pointer; }
.ap-menu [role="menuitem"]:hover, .ap-menu [role="menuitem"]:focus { background: var(--hp-surface-hover); outline: none; }
.ap-menu [role="menuitem"]:focus-visible { box-shadow: inset 0 0 0 2px var(--hp-border-focus); }
.ap-menu [role="menuitem"][aria-disabled="true"] { color: var(--hp-fg-disabled); cursor: not-allowed; }
.ap-menu [role="menuitem"][aria-disabled="true"]:hover { background: transparent; }
.case-study .prose .ap-menu [role="separator"] { height: 1px; margin: 4px 0; background: var(--hp-border-dim); }

/* Input field: 40px, 10/12 padding, 4px corners; states from Default, Focus, Warning, Success, Disabled */
.ap-control { position: relative; }
.ad-panel .ap-control :is(input, textarea) {
  min-height: 40px;
  padding: 9px 39px 9px 11px;
  font: inherit;
  color: var(--hp-fg);
  background: var(--hp-surface);
  border: 1px solid var(--hp-border-dim);
  border-radius: 4px;
  outline: none;
}
.ad-panel .ap-control textarea { min-height: 80px; field-sizing: content; resize: vertical; }
.ad-panel .ap-control :is(input, textarea):hover { background: var(--hp-surface); }
.ad-panel .ap-control :is(input, textarea):focus { padding: 8px 38px 8px 10px; border: 2px solid var(--hp-border-focus); outline: none; }
.ap-icon { position: absolute; top: 12px; right: 12px; display: flex; pointer-events: none; }
.ap-icon img { display: none; width: 16px; height: 16px; }
.ap-meta { display: flex; align-items: flex-start; gap: 12px; margin-top: 4px; }
.ad-panel .ap-note { flex: 1; color: var(--hp-fg-subtle); font-size: 12px; line-height: 18px; }
.case-study .prose .ad-panel :is(.ap-note, .ap-count) { font-size: 12px; line-height: 18px; }
/* The count always sits at the right edge, with or without a note beside it */
.case-study .prose .ad-panel .ap-count { flex: none; margin: 0 0 0 auto; color: var(--hp-fg-subtle); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.case-study .prose .ad-panel .ap-count.is-over { color: var(--hp-fg-negative); }
.ad-panel .ap-link { padding: 0; font: inherit; color: inherit; background: none; border: 0; text-decoration: underline; text-underline-offset: 0.15em; cursor: pointer; }
.ad-panel .ap-link:focus-visible { outline: 2px solid var(--hp-border-focus); outline-offset: 1px; border-radius: 2px; }

/* Missing Requirement and review or revision requests use Warning; Approved uses Success; Not applicable uses Disabled */
.ad-panel .ap-field:is([data-state="missing"], [data-state="review"], [data-state="revision"]) .ap-control :is(input, textarea) { padding: 8px 38px 8px 10px; background: var(--hp-surface-warning); border: 2px solid var(--hp-border-warning); }
.ap-field:is([data-state="missing"], [data-state="review"], [data-state="revision"]) .ap-note { color: var(--hp-fg-warning); }
.ap-field:is([data-state="missing"], [data-state="review"], [data-state="revision"]) .ap-icon .is-warning { display: block; }
.ad-panel .ap-field[data-state="approved"] .ap-control :is(input, textarea) { padding: 8px 38px 8px 10px; background: var(--hp-surface-positive); border: 2px solid var(--hp-border-positive); }
/* Fields that keep a warning or approved border when focused still need to show focus: the focus color as a ring */
.ad-panel .ap-field:is([data-state="missing"], [data-state="review"], [data-state="revision"], [data-state="approved"]) .ap-control :is(input, textarea):focus { outline: 2px solid var(--hp-border-focus); outline-offset: 2px; }
.ap-field[data-state="approved"] .ap-note { color: var(--hp-fg-positive); }
.ap-field[data-state="approved"] .ap-icon .is-approved { display: block; }
.ad-panel .ap-field[data-state="na"] .ap-control :is(input, textarea) { color: var(--hp-fg-disabled); background: var(--hp-surface-disabled); border-color: var(--hp-border-dim); opacity: 1; }
.ap-field[data-state="na"] .ap-icon .is-na { display: block; opacity: 0.4; }

/* Modal, Base Only: subtle header and footer bands with dim rules, shadow-mid. It opens inside the panel,
   over a scrim that covers only the panel, so it reads as part of the prototype rather than the page. */
.ap-scrim { position: absolute; inset: 0; z-index: 3; background: var(--hp-surface-overlay); border-radius: inherit; }
.ad-panel .ap-dialog { position: absolute; inset: 0; z-index: 4; width: calc(100% - 32px); height: fit-content; max-height: calc(100% - 32px); margin: auto; padding: 0; overflow: auto; color: var(--hp-fg); background: var(--hp-surface); border: 0; border-radius: 4px; box-shadow: var(--hp-shadow-mid); }
.ap-dialog form { display: flex; flex-direction: column; padding: 0 24px; }
/* Modal - input: white header (24px top, 12px below), content, then the subtle footer band */
.case-study .prose .ad-panel .ap-dialog-title { margin: 0; padding: 24px 0 0; font-family: inherit; font-size: 16px; line-height: 24px; font-weight: 600; letter-spacing: 0; }
.case-study .prose .ad-panel .ap-dialog .ap-subtitle { margin: 0; padding: 0 0 12px; color: var(--hp-fg-subtle); }
.ad-panel .ap-dialog .ap-subtitle + .ap-label { margin-top: 12px; }
.ad-panel .ap-label { margin-top: 16px; padding: 0 0 4px; }
.case-study .prose .ad-panel .ap-hint { margin: -2px 0 8px; color: var(--hp-fg-subtle); font-size: 12px; line-height: 18px; }
.ap-optional { font-weight: 400; color: var(--hp-fg-subtle); }
.ad-panel .ap-input { width: 100%; min-height: 40px; padding: 9px 11px; font: inherit; color: var(--hp-fg); background: var(--hp-surface); border: 1px solid var(--hp-border-dim); border-radius: 4px; }
.ad-panel select.ap-input { appearance: auto; }
.ad-panel textarea.ap-input { min-height: 72px; }
.ad-panel .ap-input:hover { background: var(--hp-surface); }
.ad-panel .ap-input:focus { padding: 8px 10px; border: 2px solid var(--hp-border-focus); outline: none; }
.case-study .prose .ad-panel .ap-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin: 24px -24px 0; padding: 16px 24px; background: var(--hp-surface-subtle); border-top: 1px solid var(--hp-border-dim); }
/* Button, Standard: Secondary (1px subtle border) and Primary (#4061e7), 40px, 10/12 padding, 13/20 semibold */
.ad-panel .ap-button {
  min-width: 0;
  min-height: 40px;
  padding: 9px 11px;
  font: inherit;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--hp-fg);
  background: transparent;
  border: 1px solid var(--hp-border-subtle);
  border-radius: 4px;
}
.ad-panel .ap-button:hover { background: var(--hp-surface-hover); }
.ad-panel .ap-button.is-primary { color: #fff; background: var(--hp-primary); border-color: var(--hp-primary); }
.ad-panel .ap-button.is-primary:hover { background: var(--hp-primary-hover); border-color: var(--hp-primary-hover); }
.ad-panel .ap-button:active { padding-top: 9px; }
.ad-panel .ap-button:focus-visible { outline: 2px solid var(--hp-border-focus); outline-offset: 2px; }
/* Phones: the stage runs to the screen edges and keeps 24px around the panel; the panel keeps its 24px padding.
   Long words (email addresses, URLs) wrap instead of running off the screen down to 320px wide. */
@media (max-width: 767px) {
  .ad-panel .ap-tabs { padding-inline: 12px; } /* 12 + the tab's 12 keeps the labels 24px in */
  .ad-panel .ap-tab { padding-inline: 12px; }
  /* Phones: the request dialog fills the panel (Drue, 2026-10-30: modals are full screen on phones) */
  .ad-panel .ap-dialog { width: 100%; height: 100%; max-height: 100%; border-radius: 0; }
  .ad-panel .ap-dialog form { min-height: 100%; }
  .case-study .prose .ad-panel .ap-dialog-actions { margin-top: auto; }
  .ad-panel .ap-dialog form > :nth-last-child(2) { margin-bottom: 24px; }
}

/* ---------- Interactive prototype: POP (js/pop-plan.js) ----------
   Hawkins Professional components (Navigation lockup, Avatar, Tabbed interface, Button, Dropdown, Menu, Input, Checkbox,
   Textarea with styling, Date picker, Modal, Contextual banner), laid out from POP's own screens. The title band,
   chips, status tags and progress indicator are POP's, with colors sampled from those screens. Light in both site
   themes, like the Socialite panel. */
.pop-app {
  --pp-band: linear-gradient(105deg, #000 30%, #1f051e 55%, #670126 78%, #cb0117 100%);
  --pp-video: #c55200;
  --pp-artwork: #9730a3;
  --pp-digital: #1c5f68;
  --pp-confirmed: #006e29;
  --pp-dark: #555;
  --pp-neutral: #e0e0e0;
  --pp-step: #d0d0d0;
  --pp-row: #f0f0f0;
  --pp-informative: rgba(73, 105, 228, 0.2);
  --pp-announcement: rgba(109, 59, 227, 0.1);
  --pp-selected: rgba(68, 102, 235, 0.2);
  /* POP's blue */
  --hp-primary: #4466eb;
  --hp-primary-hover: #3654cc;
  --hp-border-focus: #4466eb;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 720px;
  color: var(--hp-fg);
  background: #fafafa;
  border-radius: 4px;
  box-shadow: var(--hp-shadow-mid);
  overflow: hidden;
  container-type: inline-size;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif;
  font-weight: 400;
  font-variation-settings: normal;
  font-size: 13px;
  line-height: 20px;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}
.case-study .prose .pop-app :is(p, h4, ol, ul, li, dl, dt, dd, fieldset, legend, table, th, td) { margin: 0; padding: 0; font-size: inherit; line-height: inherit; letter-spacing: 0; }
.case-study .prose .pop-app :is(ol, ul) { list-style: none; }
.pop-app img, .pop-app svg { flex: none; }
.pop-app [hidden] { display: none !important; }
/* High-contrast (forced colors) mode: the app keeps its own colors, like a picture of the product. Its icons are black
   SVG images that the mode can't recolor, so on a dark high-contrast page they disappeared (Drue, 2026-10-30) */
@media (forced-colors: active) { .pop-app { forced-color-adjust: none; } }

/* Wider stage for POP: it runs past the reading column, up to 1280px */

/* Full screen, for both prototypes (js/prototype-fullscreen.js) */
/* POP fills the window under a 62px bar (12px around the 38px buttons) that holds Reset (left) and Close (right); no painting (Drue, 2026-10-30) */
.prototype .prototype-stage.is-open { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; margin: 0; padding: 62px 0 0; border-radius: 0; overflow: auto; background: var(--background-page); }
/* Closed: the stage is gone from the page; the card above it is the way in (Figma 776:190037) */
.prototype-stage.is-closed { display: none; }
/* POP's Try it card (Figma 956:244528): title and how-to (8 apart, the how-to Body/body-0 in secondary), the Open button
   centered beside them, on a wash that is strongest behind the button */
.prototype-card { --wash-angle: 270deg; --wash: var(--decorative-lavender); display: flex; align-items: center; gap: var(--spacing-24); background: linear-gradient(var(--wash-angle), var(--wash) 1.5%, color-mix(in srgb, var(--wash) 10%, transparent) 100%); }
/* Dark mode (Drue, 2026-10-30): a cool blue-violet instead of the dark lavender, picked to sit with the lavender button; off the Figma palette. The how-to stays primary text on it */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .prototype-card { --wash: #3b3a80; } }
:root[data-theme="dark"] .prototype-card { --wash: #3b3a80; }
/* Dark mode (Drue, 2026-10-30): the Open button is black with white text on the blue-violet */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .prototype-card .prototype-open { color: var(--color-accent-white); background: #000; border-color: #000; } }
:root[data-theme="dark"] .prototype-card .prototype-open { color: var(--color-accent-white); background: #000; border-color: #000; }
.prototype-card-text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-8); }
.case-study .prose .prototype-card-text p { color: var(--text-primary); font-size: var(--type-body-0-size); line-height: var(--type-body-0-line-height); letter-spacing: var(--type-body-0-tracking); }
.prototype-card .prototype-open { flex: none; }

/* Phones: the button goes under the text and the wash rises from the bottom, so the text keeps the faint end */
@media (max-width: 767px) {
  .prototype-card { --wash-angle: 0deg; flex-direction: column; align-items: flex-start; gap: var(--spacing-16); }
  .prototype-card-text { flex: none; }
}
.prototype > .prototype-actions { display: none; }
/* Inline (Socialite): title and how-to, then the panel on its painting in the page, with Reset under it */
.prototype-inline .prototype-intro { display: flex; flex-direction: column; gap: var(--spacing-12); }
/* Figma: the title is Heading 3 inset (secondary), the how-to Body/body-0 in primary */
.case-study .prose .prototype-inline .prototype-card-title { color: var(--text-secondary); }
.case-study .prose .prototype-inline .prototype-intro p { color: var(--text-primary); font-size: var(--type-body-0-size); line-height: var(--type-body-0-line-height); }
.prototype-inline .prototype-stage { padding: var(--spacing-48) var(--spacing-24); border-radius: var(--radius-8); }
@media (max-width: 767px) { .prototype-inline .prototype-stage { margin-inline: calc(-1 * var(--page-margin)); border-radius: 0; } }
.prototype-inline > .prototype-actions { display: flex; }
.prototype-stage.is-open .prototype-actions { position: absolute; top: 12px; left: 12px; margin: 0; padding: 6px 12px; background: var(--background-page); border-radius: var(--radius-4); }
html.has-expanded-prototype { overflow: hidden; }
.prototype-stage.is-open .pop-app { flex: 1; height: auto; min-height: 420px; border-radius: 0; box-shadow: none; }
.prototype-exit { position: absolute; top: 12px; right: 12px; z-index: 10; padding: 6px 12px; font: inherit; font-size: var(--type-body-0-size); line-height: var(--type-body-0-line-height); color: var(--text-primary); background: var(--background-page); border: var(--border-1) solid var(--border-border-subtle); border-radius: var(--radius-4); cursor: pointer; }
.prototype-exit:focus-visible { outline: var(--border-2) solid var(--border-border-focus); outline-offset: 2px; }
.prototype-actions { gap: var(--spacing-16); }

/* Navigation: lockup, campaign search (shown, not live), user menu avatar */
.pp-topbar { flex: none; display: flex; align-items: center; gap: 24px; min-height: 72px; padding: 16px 24px; background: #fff; }
.case-study .prose .pop-app .pp-lockup { display: flex; align-items: center; gap: 10px; font-size: 16px; line-height: 18px; font-weight: 700; white-space: nowrap; }
.pp-lockup img { width: 26px; height: 40px; }
.case-study .prose .pop-app .pp-search { display: flex; align-items: center; gap: 12px; flex: 0 1 410px; min-height: 40px; margin: 0 auto; padding: 9px 11px; border: 1px solid var(--hp-border-dim); border-radius: 4px; white-space: nowrap; overflow: hidden; }
.case-study .prose .pop-app .pp-search.is-empty { color: var(--hp-fg-subtle); }
.case-study .prose .pop-app .pp-user { display: flex; align-items: center; gap: 8px; font-weight: 600; white-space: nowrap; }
/* Avatar: black initials on POP's teal (7.7:1); white was 2.7:1 (Drue, 2026-10-30) */
.pp-avatar { display: grid; place-items: center; width: 32px; height: 32px; font-size: 10px; line-height: 15px; font-weight: 600; color: #000; background: #32abbe; border-radius: 50%; }

/* Welcome page */
.pp-home { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 16px 24px; }
.pp-welcome { position: relative; display: flex; align-items: center; min-height: 288px; padding: 32px 64px; overflow: hidden; border-radius: 10px; }
.pop-app .pp-welcome-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; }
.pp-welcome-text { position: relative; max-width: 360px; }
.case-study .prose .pop-app .pp-welcome-title { margin-bottom: 12px; font-family: inherit; font-size: 32px; line-height: 40px; font-weight: 700; letter-spacing: -0.01em; }
.case-study .prose .pop-app .pp-recent-title { margin: 24px 0 12px; font-family: inherit; font-size: 16px; line-height: 24px; font-weight: 700; }
.pp-recent { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.pop-app .pp-recent-card { display: flex; flex-direction: column; gap: 8px; width: 100%; padding: 0; font: inherit; font-size: 12px; line-height: 18px; color: var(--hp-fg); text-align: center; background: none; border: 0; border-radius: 4px; cursor: pointer; }
.pp-recent-card img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; }
.pp-recent-card:hover .pp-recent-name { text-decoration: underline; }
/* The prototype's way in (Drue, 2026-10-30): a yellow ring around the thumbnail that pulses (steady with reduced motion) */
.pp-recent-card[data-open-title] { --pp-start: #ffc400; }
.pp-recent-card[data-open-title] img { box-shadow: 0 0 0 3px var(--pp-start); }
@media (prefers-reduced-motion: no-preference) {
  .pp-recent-card[data-open-title] img { animation: pp-start-pulse 1.4s ease-out infinite; }
  @keyframes pp-start-pulse {
    0% { box-shadow: 0 0 0 3px var(--pp-start), 0 0 0 3px color-mix(in srgb, var(--pp-start) 90%, transparent); }
    100% { box-shadow: 0 0 0 3px var(--pp-start), 0 0 0 18px transparent; }
  }
}
.pp-recent-card:focus-visible { outline: 2px solid var(--hp-border-focus); outline-offset: 2px; }

/* Title view: Back, POP's title band, then the card with tabs and tables, filling the rest of the app */
.pp-view { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.pop-app .pp-back { align-self: flex-start; margin: 0 16px 4px; }
.pp-title { flex: none; margin: 0 16px; padding: 39px 32px; color: #fff; background: var(--pp-band); }
.pp-title-name:focus { outline: none; }
.case-study .prose .pop-app .pp-title-name { font-size: 24px; line-height: 32px; font-weight: 700; }
.case-study .prose .pop-app .pp-title-meta { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
.pp-title-meta div { display: flex; flex-wrap: wrap; gap: 0 4px; }
.case-study .prose .pop-app .pp-title-meta dt { color: rgba(255, 255, 255, 0.8); }
.pp-card { flex: 1; min-height: 0; display: flex; flex-direction: column; margin: 0 16px 16px; padding: 16px 24px; background: #fff; border: 1px solid var(--hp-border-dim); border-top: 0; }
.pp-card-head { flex: none; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--hp-border-dim); }
.pp-tabs { display: flex; margin-bottom: -9px; }
.pop-app .pp-tab, .pop-app .pp-region { padding: 8px 16px; font: inherit; font-size: 12px; line-height: 18px; font-weight: 600; color: var(--hp-fg-subtle); background: transparent; border: 0; cursor: pointer; }
.pop-app :is(.pp-tab, .pp-region):hover { color: var(--hp-fg); background: var(--hp-surface-hover); }
.pop-app :is(.pp-tab, .pp-region)[aria-selected="true"] { color: var(--hp-fg); box-shadow: inset 0 -4px var(--hp-border-focus); }
.pop-app :is(.pp-tab, .pp-region):focus-visible { outline: 2px solid var(--hp-border-focus); outline-offset: -2px; }
.pp-tabpanel { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.pp-row-actions { flex: none; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; margin-top: 12px; }

/* Tables: sticky header row; the asset plan pins its first three columns and Loc Strategy */
.pp-table-wrap { flex: 1; min-height: 0; margin-top: 12px; overflow: auto; border: 1px solid var(--hp-border-dim); border-radius: 4px; }
.pp-table-wrap:focus-visible { outline: 2px solid var(--hp-border-focus); outline-offset: 2px; }
.case-study .prose .pop-app .pp-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.case-study .prose .pop-app .pp-table th { position: sticky; top: 0; z-index: 2; padding: 10px 12px; font-size: 12px; line-height: 18px; font-weight: 600; color: var(--hp-fg-subtle); text-align: left; white-space: nowrap; background: #fff; border-bottom: 1px solid var(--hp-border-dim); }
.case-study .prose .pop-app .pp-table td { padding: 10px 12px; white-space: nowrap; background: #fff; border-bottom: 1px solid var(--hp-border-dim); }
.case-study .prose .pop-app .pp-table td.pp-notes { max-width: 320px; }
/* Final Asset: the link to PAL, underlined in the text color like the ad panel's links (no destination in the prototype) */
.case-study .prose .pop-app .pp-link { color: inherit; text-decoration: underline; text-underline-offset: 0.15em; }
/* Truncation: one line with an ellipsis; js/pop-plan.js shows the full text in a tooltip */
.pp-trunc { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
td .pp-trunc { max-width: 100%; }
.pp-notes .pp-trunc { max-width: 296px; }
/* Tooltip (Hawkins): dark surface, 8/12 padding, 13/20 semibold white, up to 300px wide */
.pp-tooltip { position: fixed; z-index: 60; max-width: 300px; padding: 8px 12px; font-size: 13px; line-height: 20px; font-weight: 600; color: #fff; background: #414141; border-radius: 4px; box-shadow: var(--hp-shadow-mid); pointer-events: none; overflow-wrap: anywhere; }
.case-study .prose .pop-app .pp-empty td { padding: 32px 12px; color: var(--hp-fg-subtle); text-align: center; }
.case-study .prose .pop-app .pp-count { flex: none; margin-top: 8px; font-size: 12px; line-height: 18px; color: var(--hp-fg-subtle); }
.case-study .prose .pop-app .pp-plan-table :is(th, td).pin-sel { position: sticky; left: 0; z-index: 1; width: 48px; min-width: 48px; max-width: 48px; padding-right: 0; border-right: 2px solid var(--hp-border-dim); }
.case-study .prose .pop-app .pp-plan-table :is(th, td).pin-end { position: sticky; right: 0; z-index: 1; border-left: 2px solid var(--hp-border-dim); }
.case-study .prose .pop-app .pp-table th:is(.pin-sel, .pin-end) { z-index: 3; }
.case-study .prose .pop-app .pp-select-row td { cursor: pointer; }
.case-study .prose .pop-app :is(.pp-select-row, .pp-pick-row):hover td { background: #f7f7f7; }
.case-study .prose .pop-app :is(.pp-select-row, .pp-pick-row).is-selected td { background: var(--pp-row); }

.pp-flag svg { color: var(--hp-primary); }
.pp-dash { color: var(--hp-fg-subtle); }
.pp-chip, .pp-status { display: inline-block; padding: 1px 8px; font-size: 12px; line-height: 18px; font-weight: 600; color: #fff; white-space: nowrap; border-radius: 9999px; }
.pp-chip.is-video { background: var(--pp-video); }
.pp-chip.is-artwork { background: var(--pp-artwork); }
.pp-chip.is-digital { background: var(--pp-digital); }
.pp-chip:is(.is-loc, .is-duration), .pp-status.is-killed { color: var(--hp-fg); background: var(--pp-neutral); }
.pp-chip.is-strategy { color: #a3156f; background: #fbe3f1; }
/* Organic and Paid read apart at a glance: Organic in purple (Hawkins' announcement hue), Paid in pink */
.pp-chip.is-strategy.is-organic { color: #5532c4; background: rgba(109, 59, 227, 0.12); }
.pp-chip.is-order-type { color: #6b4f12; background: #f3e4bd; }
.pp-status.is-confirmed { background: var(--pp-confirmed); }
.pp-status:is(.is-planned, .is-requested) { background: var(--pp-dark); }
/* Delivered orders (Drue, 2026-10-30): POP's confirmed green; their Final Asset link is live, a requested order's is disabled */
.pp-status.is-delivered { background: var(--pp-confirmed); }
.case-study .prose .pop-app .pp-link.is-disabled { color: var(--hp-fg-disabled); cursor: not-allowed; }

/* Button, Standard: Primary, Secondary, Tertiary, Destructive; 40px, 10/12 padding, 13/20 semibold, 16px icon */
.pop-app .pp-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  min-height: 40px;
  padding: 9px 11px;
  font: inherit;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--hp-fg);
  background: transparent;
  border: 1px solid var(--hp-border-subtle);
  border-radius: 4px;
  white-space: nowrap;
  cursor: pointer;
}
.pop-app .pp-button :is(img, svg) { width: 16px; height: 16px; }
.pop-app .pp-button:hover { background: var(--hp-surface-hover); }
.pop-app .pp-button:active { padding-top: 9px; color: var(--hp-fg); }
.pop-app .pp-button.is-tertiary { border-color: transparent; }
.pop-app .pp-button.is-primary, .pop-app .pp-button.is-primary:active { color: #fff; background: var(--hp-primary); border-color: var(--hp-primary); }
.pop-app .pp-button.is-primary:hover { background: var(--hp-primary-hover); border-color: var(--hp-primary-hover); }
.pop-app .pp-button.is-danger, .pop-app .pp-button.is-danger:active { color: #fff; background: var(--hp-fg-negative); border-color: var(--hp-fg-negative); }
.pop-app .pp-button.is-danger:hover { background: #9e0e14; border-color: #9e0e14; }
.pop-app .pp-button.is-primary .is-after { filter: invert(1); }
.pop-app .pp-button:is([aria-disabled="true"], :disabled), .pop-app .pp-button:is([aria-disabled="true"], :disabled):hover { color: var(--hp-fg-disabled); background: var(--hp-surface-disabled); border-color: var(--hp-surface-disabled); cursor: not-allowed; }
/* Anything shown but not live in either prototype gets the not-allowed cursor (Drue, 2026-10-30), POP's search bar included */
:is(.pop-app, .ad-panel) :is(:disabled, [aria-disabled="true"]), :is(.pop-app, .ad-panel) :is(:disabled, [aria-disabled="true"]) *, .pop-app .pp-search, .pop-app .pp-search * { cursor: not-allowed; }
.pop-app .pp-button:is([aria-disabled="true"], :disabled) img { filter: none; opacity: 0.4; }
.pop-app .pp-button:focus-visible { outline: 2px solid var(--hp-border-focus); outline-offset: 2px; }

/* Modals open inside the app over a scrim that covers only the app; confetti plays over everything */
.pp-scrim { position: absolute; inset: 0; z-index: 3; background: var(--hp-surface-overlay); }
.pp-confetti { position: absolute; inset: 0; z-index: 6; width: 100%; height: 100%; pointer-events: none; }
.pop-app .pp-dialog { position: absolute; inset: 0; z-index: 4; width: calc(100% - 32px); max-width: 640px; height: fit-content; max-height: calc(100% - 32px); margin: auto; padding: 0; color: var(--hp-fg); background: var(--hp-surface); border: 0; border-radius: 4px; box-shadow: var(--hp-shadow-mid); overflow: hidden; }
.pop-app .pp-dialog.pp-order { max-width: 960px; }
/* Plan and order modals keep one height across steps, so nothing jumps as you move through them */
.pop-app .pp-dialog:is(.pp-plan, .pp-order) { height: min(640px, calc(100% - 32px)); }
.pop-app .pp-dialog[open] { display: flex; flex-direction: column; }
/* flex-basis auto: with a 0 basis Safari sizes the fit-content success modals to 0px tall, leaving only the scrim (the "stuck" bug) */
.pp-dialog form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
/* Modal header: no visible title (it names the modal for screen readers); Close sits in the top-right corner */
.pp-dialog-head { position: absolute; top: 16px; right: 24px; z-index: 1; }
.case-study .prose .pop-app .pp-dialog-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pop-app .pp-close { display: grid; place-items: center; width: 32px; height: 32px; min-width: 0; min-height: 0; margin: 0; padding: 4px; background: transparent; border: 0; border-radius: 4px; cursor: pointer; }
.pop-app .pp-close:hover { background: var(--hp-surface-hover); }
.pop-app .pp-close:active { padding: 4px; }
.pop-app .pp-close:focus-visible { outline: 2px solid var(--hp-border-focus); outline-offset: 0; }
.pp-close img { width: 24px; height: 24px; }
.pp-dialog-body { flex: 1; min-height: 0; padding: 16px 24px 24px; overflow-y: auto; }
.case-study .prose .pop-app .pp-dialog-foot { display: flex; flex: none; flex-wrap: wrap; align-items: center; gap: 12px; padding: 16px 24px; background: var(--hp-surface-subtle); border-top: 1px solid var(--hp-border-dim); }
.pp-foot-end { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; margin-left: auto; }

/* Progress indicator, as in POP's screens: numbered circles joined by lines, each step's title underneath.
   Done and current steps are blue (current has a soft ring); later steps are grey. */
.case-study .prose .pop-app .pp-stepper { flex: none; display: flex; justify-content: center; padding: 40px 56px 32px; border-bottom: 1px solid var(--hp-border-dim); }
.case-study .prose .pop-app .pp-stepper li { position: relative; flex: 0 1 168px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.pp-stepper li + li::before { content: ""; position: absolute; top: 11px; right: calc(50% + 18px); width: calc(100% - 36px); height: 2px; background: var(--pp-step); }
.pp-stepper li:is([data-state="current"], [data-state="done"])::before { background: var(--hp-primary); }
.pop-app .pp-step-btn { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0; font: inherit; color: var(--hp-fg); background: none; border: 0; cursor: pointer; }
.pop-app .pp-step-btn:disabled { cursor: not-allowed; }
.pop-app .pp-step-btn:not(:disabled):hover .pp-step-title { text-decoration-style: solid; }
.pop-app .pp-step-btn:focus-visible { outline: 2px solid var(--hp-border-focus); outline-offset: 4px; border-radius: 4px; }
.pp-node { display: grid; place-items: center; width: 24px; height: 24px; font-size: 12px; line-height: 18px; font-weight: 600; color: var(--hp-fg); background: var(--pp-step); border-radius: 50%; }
.pp-stepper :is([data-state="current"], [data-state="done"]) .pp-node { color: #fff; background: var(--hp-primary); }
.pp-stepper [data-state="current"] .pp-node { box-shadow: 0 0 0 3px rgba(68, 102, 235, 0.3); }
.pp-step-title { font-size: 13px; line-height: 18px; font-weight: 600; }
/* A dashed underline marks text with a definition; hovering it (or focusing its field) shows the tooltip */
.pp-tip { text-decoration: underline dashed rgba(0, 0, 0, 0.4); text-decoration-thickness: 1px; text-underline-offset: 4px; cursor: help; }

/* Form: Form label 13/20 semibold with a red asterisk, 8px to the field; help 12/18; groups ruled apart */
.case-study .prose .pop-app .pp-step { min-width: 0; border: 0; }
.pp-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; }
.pp-row + .pp-row { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--hp-border-dim); }
.pp-field { min-width: 0; }
.pp-field.is-wide, .pp-row-note, .pp-reveal { grid-column: 1 / -1; }
.pp-reveal:not(.pp-field) { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; }
.pop-app .pp-field > label:not(.pp-check) { display: block; padding: 0 0 8px; font-size: 13px; line-height: 20px; font-weight: 600; letter-spacing: 0; }
.pp-req { font-weight: 400; color: var(--hp-fg-negative); }
.case-study .prose .pop-app .pp-help { margin: -6px 0 8px; font-size: 12px; line-height: 18px; color: var(--hp-fg-subtle); }
.case-study .prose .pop-app .pp-check-help { margin: 0 0 0 24px; }
.case-study .prose .pop-app .pp-review-lead { margin-bottom: 8px; font-weight: 600; }
.case-study .prose .pop-app .pp-step .pp-review-lead + .pp-help { margin: 0; }
/* Order step 3 opens with plain text, like step 4 (Drue, 2026-10-30) */
.case-study .prose .pop-app .pp-step .pp-review-lead + .pp-details-help { margin-bottom: 16px; }

/* Input: 40px, 10/12 padding, dim border; Focus 2px; read-only fields open a picker */
.pop-app .pp-input {
  display: block;
  width: 100%;
  min-height: 40px;
  padding: 9px 11px;
  font: inherit;
  color: var(--hp-fg);
  background: var(--hp-surface);
  border: 1px solid var(--hp-border-dim);
  border-radius: 4px;
  outline: none;
  opacity: 1;
}
.pop-app .pp-input:hover { background: var(--hp-surface); }
.pop-app .pp-input:focus { padding: 8px 10px; border: 2px solid var(--hp-border-focus); outline: none; }
.pop-app .pp-input[aria-invalid="true"] { padding: 8px 10px; border: 2px solid var(--hp-fg-negative); }
.pop-app .pp-input:disabled { color: var(--hp-fg-disabled); background: var(--hp-surface-disabled); }
.pp-search-field { position: relative; margin-top: 12px; }
.pp-search-field img { position: absolute; top: 12px; left: 12px; pointer-events: none; }
.pop-app .pp-search-field .pp-input { padding-left: 36px; }
.pop-app .pp-search-field .pp-input:focus { padding-left: 35px; }

/* Dropdown (single) and multi-select: a combobox button over the hidden <select>; chips for multi choices */
.pp-select { position: relative; }
.pop-app .pp-combo { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 40px; padding: 9px 11px; font: inherit; color: var(--hp-fg); text-align: left; background: var(--hp-surface); border: 1px solid var(--hp-border-dim); border-radius: 4px; cursor: pointer; }
.pp-combo-value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-combo .pp-ico-lock { display: none; }
.pop-app .pp-combo:disabled { color: var(--hp-fg-disabled); background: var(--hp-surface-disabled); cursor: not-allowed; }
.pp-combo:disabled .pp-ico-caret { display: none; }
.pp-combo:disabled .pp-ico-lock { display: block; opacity: 0.6; }
.pop-app .pp-combo:focus-visible, .pop-app .pp-combo[aria-expanded="true"] { padding: 8px 10px; border: 2px solid var(--hp-border-focus); outline: none; }
.pop-app .pp-combo[aria-invalid="true"] { padding: 8px 10px; border: 2px solid var(--hp-fg-negative); }
/* Multi-select (Hawkins Dropdown, multi): one line of chips; any that don't fit fold into "+N"; clear-all, divider, caret */
.pp-select.is-multi { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 40px 0 12px; background: var(--hp-surface); border: 1px solid var(--hp-border-dim); border-radius: 4px; }
.pop-app .pp-select.is-multi .pp-combo { position: absolute; inset: 0; justify-content: flex-end; min-height: 0; padding: 0 12px; background: transparent; border: 0; }
.pp-select.is-multi:has(.pp-combo:focus-visible), .pp-select.is-multi:has(.pp-combo[aria-expanded="true"]) { padding: 0 39px 0 11px; border: 2px solid var(--hp-border-focus); }
.pp-select.is-multi:has(.pp-combo[aria-invalid="true"]) { padding: 0 39px 0 11px; border: 2px solid var(--hp-fg-negative); }
.pp-select.is-multi.is-disabled { background: var(--hp-surface-disabled); }
.pop-app .pp-select.is-multi .pp-combo:focus-visible, .pop-app .pp-select.is-multi .pp-combo[aria-expanded="true"], .pop-app .pp-select.is-multi .pp-combo[aria-invalid="true"] { padding: 0 12px; border: 0; }
.pop-app .pp-select.is-multi .pp-combo:disabled { background: transparent; }
.pp-chips { position: relative; z-index: 1; flex: 1; min-width: 0; display: flex; gap: 4px; overflow: hidden; white-space: nowrap; pointer-events: none; }
.pp-chip-tag { flex: none; display: inline-flex; align-items: center; min-height: 32px; padding: 4px 8px; font-size: 13px; line-height: 20px; font-weight: 600; background: #e5e5e5; border-radius: 4px; }
.pop-app .pp-clear { position: relative; z-index: 1; flex: none; display: grid; place-items: center; width: 24px; height: 24px; min-width: 0; min-height: 0; padding: 4px; color: var(--hp-fg); background: transparent; border: 0; border-radius: 4px; cursor: pointer; }
.pop-app .pp-clear:hover { background: var(--hp-surface-hover); }
.pop-app .pp-clear:active { padding: 4px; color: var(--hp-fg); }
.pp-clear svg { width: 16px; height: 16px; }
.pp-clear:focus-visible { outline: 2px solid var(--hp-border-focus); }
.pp-divider { position: relative; z-index: 1; flex: none; width: 1px; height: 38px; background: var(--hp-border-dim); }
/* Menu: fixed in place so the modal's scrolling body can't clip it; selected items get a blue checkmark */
.case-study .prose .pop-app .pp-listbox { position: fixed; z-index: 50; max-height: 280px; padding: 4px 0; overflow-y: auto; background: var(--hp-surface); border-radius: 4px; box-shadow: var(--hp-shadow-mid); }
.case-study .prose .pop-app .pp-option { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; cursor: pointer; }
.pp-option.is-active, .pp-option:hover { background: var(--hp-surface-hover); }
.pp-option-text { flex: 1; display: flex; flex-direction: column; }
.pp-option-desc { font-size: 12px; line-height: 18px; color: var(--hp-fg-subtle); }
.pp-option svg { margin-top: 2px; color: var(--hp-primary); visibility: hidden; }
.pp-option[aria-selected="true"] svg { visibility: visible; }

/* Date field and Date picker (Date + time): calendar beside hour, minute, second and AM/PM columns */
.pp-date { position: relative; }
.pop-app .pp-date .pp-input { padding-right: 39px; cursor: pointer; }
.pop-app .pp-date .pp-input:focus, .pop-app .pp-date .pp-input[aria-invalid="true"] { padding-right: 38px; }
.pp-date > img { position: absolute; top: 12px; right: 12px; pointer-events: none; }
.pp-picker { position: fixed; z-index: 50; display: flex; flex-wrap: wrap; max-width: calc(100vw - 16px); background: var(--hp-surface); border-radius: 4px; box-shadow: var(--hp-shadow-mid); }
.pp-cal { width: 340px; max-width: 100%; padding: 12px; }
.pp-cal-head { display: flex; align-items: center; gap: 8px; padding: 0 8px 12px; }
.pop-app .pp-icon-button { display: grid; place-items: center; width: 32px; height: 24px; padding: 0; background: transparent; border: 0; border-radius: 4px; cursor: pointer; }
.pop-app :is(.pp-icon-button, .pp-cal-pick, .pp-day, .pp-time-option, .pp-picker-menu-item):hover:not(:disabled) { background: var(--hp-surface-hover); }
.pop-app :is(.pp-icon-button, .pp-cal-pick, .pp-day, .pp-time-option, .pp-picker-menu-item):focus-visible { outline: 2px solid var(--hp-border-focus); outline-offset: -2px; }
.pp-cal-picks { position: relative; flex: 1; display: flex; justify-content: center; gap: 4px; }
.pop-app .pp-cal-pick { display: flex; align-items: center; padding: 0 2px; font: inherit; font-size: 16px; line-height: 24px; font-weight: 600; color: var(--hp-fg); background: transparent; border: 0; border-radius: 4px; cursor: pointer; }
.case-study .prose .pop-app .pp-picker-menu { position: absolute; top: 100%; left: 50%; z-index: 2; width: 160px; max-height: 200px; padding: 4px 0; overflow-y: auto; background: var(--hp-surface); border-radius: 4px; box-shadow: var(--hp-shadow-mid); transform: translateX(-50%); }
.pop-app .pp-picker-menu-item { display: block; width: 100%; padding: 8px 12px; font: inherit; color: var(--hp-fg); text-align: left; background: transparent; border: 0; cursor: pointer; }
.pp-picker-menu-item[aria-current="true"] { background: var(--pp-selected); }
.pp-weekdays, .pp-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.pp-weekdays { font-weight: 600; color: var(--hp-fg-subtle); text-align: center; }
.pop-app .pp-day { height: 40px; margin: 2px; padding: 0; font: inherit; color: var(--hp-fg); background: transparent; border: 0; border-radius: 4px; cursor: pointer; }
.pop-app .pp-day:disabled { color: var(--hp-fg-disabled); cursor: not-allowed; }
.pop-app .pp-day[aria-pressed="true"], .pop-app .pp-time-option[aria-pressed="true"] { background: var(--pp-selected); }
.pp-time { padding: 12px; border-left: 1px solid var(--hp-border-dim); }
.case-study .prose .pop-app .pp-time-head { padding: 0 8px 12px; font-size: 16px; line-height: 24px; font-weight: 600; text-align: center; }
.pp-time-cols { display: flex; }
.pp-time-col { width: 56px; height: 236px; overflow-y: auto; scrollbar-width: thin; }
.pop-app .pp-time-option { width: 52px; height: 40px; margin: 2px; padding: 0; font: inherit; color: var(--hp-fg); background: transparent; border: 0; border-radius: 4px; cursor: pointer; }

/* Checkbox + Label: 16px box, 1px subtle border, 4px corners; checked fills with the primary blue */
.pop-app .pp-check { position: relative; display: flex; align-items: flex-start; gap: 8px; padding: 0; font-size: 13px; line-height: 20px; font-weight: 400; letter-spacing: 0; cursor: pointer; }
.pop-app .pp-check input { position: absolute; width: 16px; height: 16px; min-height: 0; margin: 2px 0 0; padding: 0; opacity: 0; }
.pp-box { position: relative; display: grid; place-items: center; flex: none; width: 16px; height: 16px; margin-top: 2px; background: var(--hp-surface); border: 1px solid var(--hp-border-subtle); border-radius: 4px; }
.pp-box img { position: absolute; inset: -1px; display: none; width: 16px; height: 16px; max-width: none; }
.pp-check:hover input:not(:checked, :disabled) + .pp-box { border-color: #808080; }
.pp-check input:checked + .pp-box { border-color: transparent; background: transparent; }
.pp-check input:checked + .pp-box img { display: block; }
.pp-check input[type="checkbox"]:indeterminate + .pp-box { background: var(--hp-primary); border-color: var(--hp-primary); }
.pp-check input[type="checkbox"]:indeterminate + .pp-box::after { content: ""; width: 8px; height: 2px; background: #fff; }
.pp-check input:focus-visible + .pp-box { outline: 2px solid var(--hp-border-focus); outline-offset: 3px; border-radius: 4px; }
.pop-app .pp-check:has(input:disabled) { color: var(--hp-fg-disabled); cursor: not-allowed; }
.pp-check input:disabled + .pp-box { border-color: rgba(128, 128, 128, 0.2); }
.pp-check input:checked:disabled + .pp-box img { opacity: 0.4; }
.pop-app .pp-check-solo { display: inline-flex; }
.pop-app .pp-check-solo .pp-box { margin-top: 0; }
.pop-app .pp-check-solo input { margin: 0; }

/* Textarea with styling: the formatting bar is shown, not live */
.pp-textarea { padding: 10px 12px; background: var(--hp-surface); border: 1px solid var(--hp-border-dim); border-radius: 4px; }
.pp-textarea:focus-within { padding: 9px 11px; border: 2px solid var(--hp-border-focus); }
.pp-styling-bar { width: 192px; height: 22px; opacity: 0.6; }
.pop-app .pp-textarea textarea { display: block; width: 100%; min-height: 60px; margin-top: 12px; padding: 0; font: inherit; color: var(--hp-fg); background: transparent; border: 0; border-radius: 0; outline: none; resize: vertical; }

/* Order steps: asset picker, region tabs and markets, review table */
.pp-pick .pp-pick-row td { cursor: pointer; }
.pp-pick input[type="radio"] { width: 16px; height: 16px; margin: 0; accent-color: var(--hp-primary); }
.case-study .prose .pop-app .pp-pick-row.is-unavailable td { color: var(--hp-fg-disabled); cursor: not-allowed; }
.pp-pick-row.is-unavailable :is(.pp-chip, .pp-status, svg) { opacity: 0.5; }
.pp-region-tabs { display: flex; margin-top: 12px; overflow-x: auto; border-bottom: 1px solid var(--hp-border-dim); scrollbar-width: none; }
.pp-langs { padding-top: 12px; }
.pop-app .pp-region-pick { display: none; margin-top: 12px; }
.pop-app .pp-select-all { margin-bottom: 12px; font-weight: 600; }
.pp-lang-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 16px; }
.pop-app .pp-review-wrap { max-height: 360px; }
.case-study .prose .pop-app .pp-review td { padding: 8px 12px; }

/* Contextual banners: Informative (order steps) and Announcement (success note) */
.case-study .prose .pop-app .pp-banner { display: flex; gap: 8px; font-size: 13px; line-height: 20px; border-radius: 4px; }
.case-study .prose .pop-app .pp-banner.is-info { padding: 8px 12px; background: var(--pp-informative); }
/* Neutral banner as each step's header: "Title: text" on one line, truncated with a tooltip if it runs long */
.case-study .prose .pop-app .pp-banner.is-neutral { align-items: center; gap: 4px; min-height: 48px; margin-bottom: 16px; padding: 4px 16px; white-space: nowrap; background: rgba(0, 0, 0, 0.04); border-left: 4px solid rgba(0, 0, 0, 0.04); }
.pp-banner.is-neutral strong { flex: none; font-weight: 600; }
.pp-banner.is-neutral .pp-trunc { flex: 1; min-width: 0; }
.case-study .prose .pop-app .pp-banner.is-warning { margin: 12px 0 0; padding: 16px; background: rgba(195, 131, 14, 0.1); border-left: 4px solid rgba(195, 131, 14, 0.1); }
.case-study .prose .pop-app .pp-review-help { margin: 0; }
.case-study .prose .pop-app .pp-banner.is-announcement { margin-top: 16px; padding: 16px; background: var(--pp-announcement); border-left: 4px solid var(--pp-announcement); }
.pp-banner img { width: 16px; height: 16px; margin-top: 2px; }

/* Success modals: Modal - confirmation with a success-fill icon */
/* Success modals: Hawkins Modal - Confirmation (title, subtle body, buttons bottom right, no footer band) */
.pop-app .pp-success { max-width: 480px; }
.pp-success-body { padding: 24px 24px 0; overflow-y: auto; }
.case-study .prose .pop-app .pp-success .pp-dialog-foot { padding: 24px; background: transparent; border-top: 0; }
.case-study .prose .pop-app .pp-success-title { display: flex; align-items: center; gap: 8px; font-family: inherit; font-size: 16px; line-height: 24px; font-weight: 600; }
.pp-success-title img { width: 24px; height: 24px; }
.pp-success-title:focus { outline: none; }
.pp-success-title:focus-visible { outline: 2px solid var(--hp-border-focus); outline-offset: 2px; }
.case-study .prose .pop-app .pp-success-body p:not(.pp-banner) { margin-top: 8px; font-size: 13px; line-height: 20px; color: rgba(0, 0, 0, 0.6); }
.case-study .prose .pop-app .pp-success-body p:not(.pp-banner) strong { color: var(--hp-fg); }

/* Narrow apps: the search and user name drop out of the bar, form columns stack, only the current step is titled,
   and only the row selector stays pinned */
@container (max-width: 720px) {
  .case-study .prose .pop-app .pp-search { display: none; }
  .case-study .prose .pop-app .pp-user span:last-child { display: none; }
  .pp-topbar { justify-content: space-between; }
  .pp-title { padding: 28px 24px; }
  .pp-card { padding: 12px 16px; }
  .pp-row, .pp-reveal:not(.pp-field) { grid-template-columns: 1fr; }
  .pp-lang-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pp-recent { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pp-welcome { padding: 24px; }
  .case-study .prose .pop-app .pp-welcome-title { font-size: 24px; line-height: 30px; }
  .pp-step-title { font-size: 12px; line-height: 16px; }
  .case-study .prose .pop-app .pp-plan-table td.pin-end { position: static; }
  .case-study .prose .pop-app .pp-plan-table th.pin-end { right: auto; z-index: 2; border-left: 0; }
  .case-study .prose .pop-app .pp-plan-table td.pin-end { border-left: 0; }
  .pp-dialog-body, .case-study .prose .pop-app .pp-dialog-foot, .pp-success-body { padding-inline: 16px; }
  .pp-dialog-head { right: 16px; }
  .case-study .prose .pop-app .pp-stepper { padding-inline: 48px; }
  .pp-time { border-left: 0; border-top: 1px solid var(--hp-border-dim); }
}
/* Narrow apps: the stepper keeps its numbered circles; one caption underneath names the current step */
.case-study .prose .pop-app .pp-step-caption { display: none; }
@container (max-width: 560px) {
  .pp-stepper .pp-step-title { display: none; }
  /* The region tabs become a menu, so their names don't wrap (Drue, 2026-10-30) */
  .pop-app .pp-region-tabs { display: none; }
  .pop-app .pp-region-pick { display: block; }
  .case-study .prose .pop-app .pp-stepper { padding-bottom: 8px; border-bottom: 0; }
  .case-study .prose .pop-app .pp-step-caption { display: block; flex: none; padding: 0 16px 16px; font-weight: 600; text-align: center; border-bottom: 1px solid var(--hp-border-dim); }
}
@container (max-width: 480px) {
  .pp-lang-grid { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  /* Phones: the step modals fill the app, which fills the screen under the prototype's bar (Drue, 2026-10-30);
     the short success confirmations stay cards */
  .pop-app .pp-dialog { width: calc(100% - 16px); max-height: calc(100% - 16px); }
  .pop-app .pp-dialog:is(.pp-plan, .pp-order) { width: 100%; max-width: none; height: 100%; max-height: 100%; border-radius: 0; }
}

/* ---------- Sticker mode (Figma 1013:1946 Home, 1013:1828 About) ---------- */

/* Home and About look the same in both modes; the switch (js/sticker-mode.js, data-stickers on <html>) only shows or
   hides the sticker images */
html:not([data-stickers]) .sticker-on { display: none; }

/* Home: the hero takes Figma's box at each breakpoint (desktop 1122px over 4 lines; tablet 602px over 7 lines; phones
   the tablet layout scaled to the window, as Figma's 360 frame is the 750 one at 48%), and the stickers sit around
   it in % of that box, so they keep their place beside the same letters. "Hi, I'm Drue Thomas." is SemiBold Italic. */
.home { position: relative; z-index: 1; }
.hero-hi { font-weight: var(--font-style-semibold); font-style: italic; }
.home .hero { position: relative; width: 602px; max-width: none; margin-inline: auto; padding-top: 4px; gap: var(--spacing-24); }
.home .hero h1 { width: 100%; font-size: 64px; line-height: 60px; letter-spacing: -1px; }
.home .lead { font-size: 40px; line-height: 55px; letter-spacing: -2px; white-space: nowrap; }
.hero-stickers { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero-stickers img { position: absolute; max-width: none; height: auto; }
html:has(.hero-stickers) { overflow-x: clip; }

/* Tablet, Figma 1021:94975 (also from 768px until the desktop hero fits) */
.hero-stickers .s-butterfly-01 { left: 2.99%; top: 124.65%; width: 13.98%; }
.hero-stickers .s-butterfly-12 { left: 91.36%; top: 0.99%; width: 12.84%; }
.hero-stickers .s-butterfly-08 { left: 76.58%; top: 107.95%; width: 14.78%; }
.hero-stickers .s-butterfly-10 { left: -10.13%; top: 70.97%; width: 13.87%; }
.hero-stickers .s-butterfly-13 { left: 94.79%; top: 76.63%; width: 14.29%; }
.hero-stickers .s-butterfly-02 { left: 0.96%; top: -3.46%; width: 9.56%; }
.hero-stickers .s-watermelon { left: 91.2%; top: 45.73%; width: 6.59%; }
.hero-stickers .s-strawberry { left: 16.94%; top: 104.37%; width: 5.29%; }
.hero-stickers .s-cherries { left: -4.82%; top: 48.71%; width: 6.86%; }
.hero-stickers .s-rainbow { left: 43.85%; top: 100.6%; width: 10.96%; }
.hero-stickers .s-lemon { left: -2.99%; top: 27.04%; width: 4.98%; }
.hero-stickers .s-grapes-a { left: 99.34%; top: 22.66%; width: 5.2%; }

/* Phones, Figma 1021:95198: everything in the hero is the tablet size times (window / 750) */
@media (max-width: 767px) {
  .home .hero { width: 80.27vw; padding-top: 0.533vw; gap: 3.2vw; }
  .home .hero h1 { font-size: 8.533vw; line-height: 8vw; letter-spacing: -0.133vw; }
  .home .lead { font-size: 5.333vw; line-height: 7.333vw; letter-spacing: -0.267vw; }
  .home > .work { margin-top: 13.07vw; }
  .hero-stickers .s-butterfly-01 { left: 6.4%; top: 119.42%; width: 14.57%; }
  .hero-stickers .s-butterfly-12 { left: 92.91%; top: -1.32%; width: 13.38%; }
  .hero-stickers .s-butterfly-08 { left: 75.96%; top: 109.89%; width: 15.4%; }
  .hero-stickers .s-butterfly-10 { left: -10.22%; top: 71.37%; width: 14.45%; }
  .hero-stickers .s-butterfly-13 { left: 96.48%; top: 77.47%; width: 14.88%; }
  .hero-stickers .s-butterfly-02 { left: -1.25%; top: -5.96%; width: 9.96%; }
  .hero-stickers .s-watermelon { left: 92.74%; top: 45.28%; width: 6.87%; }
  .hero-stickers .s-strawberry { left: 16.43%; top: 102.85%; width: 5.51%; }
  .hero-stickers .s-cherries { left: -7.27%; top: 48.38%; width: 7.15%; }
  .hero-stickers .s-rainbow { left: 42.73%; top: 109.89%; width: 11.42%; }
  .hero-stickers .s-lemon { left: -5.37%; top: 25.81%; width: 5.18%; }
  .hero-stickers .s-grapes-a { left: 101.22%; top: 21.26%; width: 5.42%; }
}

/* Desktop, Figma 1013:1946, once the 1122px hero fits beside the page margins */
@media (min-width: 1220px) {
  .home .hero { width: 1122px; }
  .hero-stickers .s-butterfly-01 { left: -7.13%; top: 112.38%; width: 7.5%; }
  .hero-stickers .s-butterfly-12 { left: 91.97%; top: 0%; width: 6.89%; }
  .hero-stickers .s-butterfly-08 { left: 62.75%; top: 108.36%; width: 7.93%; }
  .hero-stickers .s-butterfly-10 { left: 17.46%; top: 60.99%; width: 7.44%; }
  .hero-stickers .s-butterfly-13 { left: 85.65%; top: 71.83%; width: 7.67%; }
  .hero-stickers .s-butterfly-02 { left: -2.41%; top: -1.55%; width: 5.13%; }
  .hero-stickers .s-watermelon { left: 100.62%; top: 56%; width: 3.54%; }
  .hero-stickers .s-strawberry { left: 19.79%; top: 112.35%; width: 2.84%; }
  .hero-stickers .s-cherries { left: 5.7%; top: 74.89%; width: 3.68%; }
  .hero-stickers .s-rainbow { left: 47.06%; top: 103.06%; width: 5.88%; }
  .hero-stickers .s-lemon { left: -5.79%; top: 52.6%; width: 2.67%; }
  .hero-stickers .s-grapes-a { left: 104.37%; top: 17.3%; width: 2.79%; }
}

/* About: the portrait in a 315px gingham square (Figma's 6 by 6 stripes, 31.5px wide every 56.7px, as 10% / 18%),
   stickers placed in % of the square, then text at 442px (315 + 32 + 442 = 789, as before) */
.portrait-frame {
  position: relative;
  width: min(315px, 100%);
  aspect-ratio: 1;
  border-radius: 2.1px;
  background:
    repeating-linear-gradient(90deg, rgb(175 171 255 / 0.3) 0 10%, transparent 10% 18%),
    repeating-linear-gradient(180deg, rgb(115 141 255 / 0.2) 0 10%, transparent 10% 18%),
    #fff5ef;
}
/* Phones: the square fills the column (Drue, 2026-10-30); the portrait and stickers scale with it */
@media (max-width: 767px) { .portrait-frame { width: 100%; } }
/* The portrait sits 43px in and 34px down at 230px wide on Figma's 315px square, kept as % of the square so it
   holds those proportions at every width */
.portrait-frame .portrait { position: absolute; left: 13.65%; top: 10.79%; width: 73.02%; }
.portrait-frame .portrait img { max-width: none; width: 100%; }
.portrait-stickers { position: absolute; inset: 0; pointer-events: none; }
.portrait-stickers img { position: absolute; height: auto; }
.about h1 {
  font-style: italic;
  font-weight: var(--font-style-regular);
  font-size: 64px;
  line-height: 60px;
  letter-spacing: -2px;
}
@media (max-width: 767px) { .about h1 { font-size: 44px; line-height: 44px; letter-spacing: -1px; } }
/* Side by side until the text narrows to 400px: 315 + 32 + 400 = 747, plus 48px margins each side = 843 */
@media (min-width: 843px) {
  .about-grid { grid-template-columns: 315px minmax(400px, 442px); }
}

/* ---------- 404 page (404.html, js/not-found.js): Figma 1074:228834. The sticker animation (315px) beside the
   message (442px), 32 apart and centered; stacked and centered on phones. The h1 is Heading/h1 in italic. ---------- */
.not-found { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-32); padding-top: var(--spacing-16); padding-bottom: var(--spacing-48); text-align: center; }
.not-found-art { position: relative; width: min(100%, 315px); margin: 0; flex: none; }
.not-found-art video { display: block; width: 100%; height: auto; border-radius: var(--radius-4); }
.not-found-art .shot-actions { position: absolute; right: var(--spacing-8); bottom: var(--spacing-8); }
.not-found h1 { margin: 0; font-style: italic; }
.not-found-text > p { margin: var(--spacing-24) 0 0; }
.not-found .actions { display: flex; justify-content: center; }
@media (min-width: 768px) {
  .not-found { flex-direction: row; align-items: flex-start; justify-content: center; padding-bottom: var(--spacing-144); text-align: left; }
  .not-found-text { width: 442px; }
  .not-found .actions { justify-content: flex-start; }
}