/* ==========================================================================
   AMANDA.design — shared stylesheet
   Fonts: Plus Jakarta Sans (site + home + PowerCare), Montserrat (Museum headers)
   ========================================================================== */

:root {
  --black: #0a0a0a;
  --white: #ffffff;
  --pink: #f5cdea;
  --pink-deep: #e9a9d3;
  --muted: #a8a8a8;
  --muted-dark: #6b6b6b;

  --pc-lime: #c3dc41;
  --pc-purple: #b28efd;
  --pc-blue-purple: #6c5bfb;
  --pc-mauve: #8a3673;
  --pc-orange: #f3ac72;
  --pc-cream: #eae3da;
  --pc-margin: 80px;
  --pc-gutter: 24px;

  --mu-magenta: #b0008f;
  --mu-teal: #007d8a;
  --mu-teal-bright: #00a6b5;
  --mu-purple-dark: #6e2178;
  --mu-green: #6ba638;
  --mu-yellow: #ffb81c;
  --mu-orange: #e87821;
  --mu-grey: #75787a;
  --mu-nav: #a9228e;

  --lt-navy: #252b7e;
  --lt-accent: #7ecfc4;
  --lt-bg-alt: #f4f4f6;
  --lt-periwinkle: #a9b3d1; /* Lighter accent (numbers, bullets, kicker, etc.), from Amanda; teal is the H2 colour */

  --br-red: #7c0d0f;
  --br-red-ui: #d02528;   /* the print red's hue, lifted to read on the page black - the one red the page uses */
  --br-red-deep: #4a0708;
  --br-tan: #a2927d;

  --px-navy: #1d295f;
  --px-navy-deep: #131c44;
  --px-orange: #dd6200;
  --px-orange-2: #e0a05c;
  --px-orange-3: #e8bd8c;
  --px-orange-4: #f0d9bc;
  --px-cream: #f2ebdb;
  --px-red: #d94a2b;
  --px-ink: #33363f;

  --ap-bg: #110d0e;
  --ap-ink: #f4ece6;
  --ap-muted: #a89a94;
  --ap-red: #b03262;
  --ap-line: rgba(244, 236, 230, 0.14);

  --radius-s: 10px;
  --radius-m: 18px;
  --radius-l: 28px;
  --container: 1180px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 90px; }

body {
  background: var(--black);
  color: var(--white);
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 500;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; border-radius: 0; }

a { color: inherit; text-decoration: none; }

ul { list-style: none; }

button { font-family: inherit; cursor: pointer; border: none; background: none; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
}

.eyebrow {
  font-size: 13px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}

/* ---------- Nav (shared, fixed) ---------- */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 32px;
  background: rgba(10, 10, 10, 0.7);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: background 0.3s var(--ease), padding 0.3s var(--ease), box-shadow .3s var(--ease);
}

.nav.is-scrolled {
  padding: 14px 32px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.06);
}

.nav__logo {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.nav__logo span:first-child { color: var(--pink); }
.nav__logo span:last-child { color: var(--white); }

.nav__links {
  display: flex;
  gap: 40px;
  font-size: 15px;
  font-weight: 500;
}

.nav__links a {
  position: relative;
  padding: 4px 0;
  color: rgba(255,255,255,0.85);
  transition: color .25s var(--ease);
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 2px;
  background: var(--pink);
  transition: width .3s var(--ease);
}
.nav__links a:hover { color: var(--white); }
.nav__links a:hover::after,
.nav__links a.is-active::after { width: 100%; }
.nav__links a.is-active { color: var(--pink); }

.nav__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 6px;
}
.nav__toggle span {
  width: 24px; height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.nav.is-open .nav__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.is-open .nav__toggle span:nth-child(2) { opacity: 0; }
.nav.is-open .nav__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 30px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  transition: transform .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease), color .3s var(--ease);
  white-space: nowrap;
}
.btn:active { transform: scale(0.96); }

.btn--filled {
  background: var(--pink);
  color: #1a1a1a;
}
.btn--filled:hover {
  background: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(245, 205, 234, 0.25);
}

.btn--outline {
  background: transparent;
  border: 1.5px solid rgba(255,255,255,0.35);
  color: var(--white);
}
.btn--outline:hover {
  border-color: var(--white);
  transform: translateY(-2px);
}

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

.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 140px 0 40px;
  position: relative;
}

.hero__grid {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}

/* ---------- Hero: auto-playing work marquee ---------- */

.hero__marquee {
  width: 100%;
  overflow: hidden;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  margin: 24px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.hero__marquee-track {
  display: flex;
  align-items: center;
  gap: 28px;
  width: max-content;
  animation: hero-marquee 20s linear infinite;
}
.hero__marquee:hover .hero__marquee-track { animation-play-state: paused; }

.hero__marquee-item {
  flex-shrink: 0;
  width: clamp(160px, 16vw, 240px);
}
.hero__marquee-item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .5s var(--ease);
}
.hero__marquee-item span {
  display: block;
  margin-top: 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
}
.hero__marquee-item:hover img { transform: scale(1.04); }
/* Same hover swap as the Works card, for tiles that carry a second image */
.hero__marquee-media { position: relative; }
.hero__marquee-item img.hero__marquee-alt {
  position: absolute;
  inset: 0;
  height: 100%;
  opacity: 0;
  transition: opacity .45s var(--ease), transform .5s var(--ease);
}
.hero__marquee-item:hover img.hero__marquee-alt,
.hero__marquee-item:focus-visible img.hero__marquee-alt { opacity: 1; }

@keyframes hero-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__marquee-track { animation: none; }
}

.hero__scroll-icons { display: flex; flex-direction: column; }

.hero__scroll-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pink);
}

@media (max-width: 700px) {
  .hero__marquee-item { width: clamp(130px, 44vw, 180px); }
}

.hero__title {
  font-size: clamp(44px, 7vw, 84px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 18px 0 24px;
}
.hero__title .line2 { color: var(--pink); display: block; }

.hero__text {
  max-width: 420px;
  color: var(--muted);
  font-size: 16px;
}

.hero__actions {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 6px;
}

.hero__scroll {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  color: var(--pink);
  animation: bob 2.2s ease-in-out infinite;
  width: fit-content;
}
.hero__scroll-icons { gap: 2px; }
.hero__scroll svg { display: block; }

@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}

/* ---------- Section heading ---------- */

.section-head {
  margin-bottom: 48px;
}
.section-head h2 {
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 800;
  line-height: 1.1;
}
.section-head .rule {
  width: 64px;
  height: 3px;
  background: var(--pink);
  margin-top: 18px;
  border-radius: 2px;
}

section { padding: 100px 0; }

/* ---------- Works grid ---------- */

.work-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

.work-card {
  display: block;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.work-card.is-visible { opacity: 1; transform: translateY(0); }

.work-card__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 14px;
}
.work-card__head h3 {
  font-size: 22px;
  font-weight: 800;
}
.work-card__head span {
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
}

.work-card__media {
  border-radius: 0;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  position: relative;
  background: #141414;
}
.work-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 0;
  transition: transform .6s var(--ease), filter .6s var(--ease);
}
/* A second image revealed on hover - the artwork preview (Cho Gi-Seok: the
   brochure laid out page by page; 2D Collection: the collage; The Creation:
   the 24-frames sheet). It scales with the card. */
.work-card__media img.work-card__alt {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .45s var(--ease), transform .6s var(--ease), filter .6s var(--ease);
}
a.work-card:hover .work-card__media img.work-card__alt,
a.work-card:focus-visible .work-card__media img.work-card__alt { opacity: 1; }
.work-card__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 18px;
  opacity: 0;
  transition: opacity .4s var(--ease);
  background: linear-gradient(0deg, rgba(0,0,0,0.35), transparent 45%);
}
.work-card__overlay span {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--pink);
  color: #1a1a1a;
  display: flex; align-items: center; justify-content: center;
  transform: scale(0.7) rotate(-30deg);
  transition: transform .4s var(--ease);
}
a.work-card:hover .work-card__media img { transform: scale(1.06); }
a.work-card:hover .work-card__overlay { opacity: 1; }
a.work-card:hover .work-card__overlay span { transform: scale(1) rotate(0deg); }

.work-card--empty .work-card__media {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #111111;
  border: 1px dashed rgba(255,255,255,0.15);
  color: var(--muted-dark);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: default;
}
.work-card--empty { cursor: default; }

@media (max-width: 760px) {
  .work-grid { grid-template-columns: 1fr; }
}

/* ---------- Works: Design / Art category tabs ---------- */

.work-tabs {
  display: flex;
  gap: 12px;
  margin-bottom: 44px;
}

.work-tab {
  padding: 11px 24px;
  border-radius: 999px;
  border: 1.5px solid rgba(255,255,255,0.15);
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
  transition: background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.work-tab:hover:not(.is-active) {
  color: var(--white);
  border-color: rgba(255,255,255,0.4);
}
.work-tab.is-active {
  background: var(--pink);
  border-color: var(--pink);
  color: #1a1a1a;
}

.work-panel { display: none; }
.work-panel.is-active { display: block; }

/* ---------- Contact ---------- */

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
}

.contact-grid h3 {
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 28px;
}

.contact-list { display: flex; flex-direction: column; gap: 16px; }

.contact-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px;
  border-radius: var(--radius-s);
  transition: background .3s var(--ease), transform .3s var(--ease);
}
a.contact-item:hover { background: rgba(255,255,255,0.04); transform: translateX(4px); }

.contact-item__icon {
  width: 42px; height: 42px;
  border-radius: 10px;
  background: #171717;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: var(--pink);
}

.contact-item__label {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 2px;
}
.contact-item__value { font-size: 15px; font-weight: 700; }

.form-field {
  width: 100%;
  padding: 15px 18px;
  border-radius: var(--radius-s);
  border: 1px solid rgba(255,255,255,0.12);
  background: #f2f0f0;
  color: #1a1a1a;
  font-family: inherit;
  font-size: 14px;
  margin-bottom: 14px;
  transition: box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.form-field:focus {
  outline: none;
  border-color: var(--pink);
  box-shadow: 0 0 0 3px rgba(245,205,234,0.25);
}

.form-field--textarea {
  resize: vertical;
  min-height: 110px;
  line-height: 1.5;
}

.form-submit {
  padding: 14px 30px;
  border-radius: var(--radius-s);
  background: #2a2a2a;
  color: var(--white);
  font-weight: 700;
  font-size: 14px;
  transition: background .3s var(--ease), transform .3s var(--ease);
}
.form-submit:hover { background: var(--pink); color: #1a1a1a; transform: translateY(-2px); }

.form-note {
  font-size: 13px;
  color: var(--muted);
  margin-top: 10px;
  min-height: 18px;
}

@media (max-width: 760px) {
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }
}

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

.site-footer {
  padding: 40px 0;
  text-align: center;
  color: var(--muted-dark);
  font-size: 13px;
  border-top: 1px solid rgba(255,255,255,0.06);
}

/* ---------- Reveal on scroll ---------- */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ==========================================================================
   Case study shared layout
   ========================================================================== */

.cs-hero {
  padding-top: 88px;
}
.cs-banner {
  width: 100%;
  height: 46vh;
  min-height: 320px;
  max-height: 520px;
  object-fit: cover;
  border-radius: 0;
}
.cs-intro {
  max-width: var(--container);
  margin: 0 auto;
  padding: 56px 32px 40px;
}

.cs-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 28px;
  transition: color .3s var(--ease), transform .3s var(--ease);
}
.cs-back:hover { color: var(--pink); transform: translateX(-4px); }

.cs-title {
  font-size: clamp(34px, 5vw, 56px);
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 28px;
  max-width: 780px;
}

.cs-meta {
  display: flex;
  gap: 48px;
  flex-wrap: wrap;
  margin-bottom: 28px;
  font-size: 14px;
}
.cs-meta div span { display: block; }
.cs-meta .k { color: var(--muted); font-size: 12px; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.06em; }
.cs-meta .v { font-weight: 700; }

.cs-desc {
  max-width: 760px;
  font-size: 17px;
  color: var(--muted);
  line-height: 1.7;
}

.cs-desc-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}
.cs-deco-triple {
  width: 90px;
  flex-shrink: 0;
  margin-top: 6px;
  border-radius: 0;
}

.bullet-icon {
  width: 18px;
  height: auto;
  flex-shrink: 0;
  border-radius: 0;
  display: inline-block;
  vertical-align: middle;
  margin-right: 2px;
}
.cs-traits--paired .bullet-icon { width: 14px; }

.cs-section { padding: 64px 0; }
.cs-section .container { max-width: var(--container); }

.cs-section h2 {
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 800;
  margin-bottom: 22px;
}

.cs-section p {
  max-width: 760px;
  font-size: 17px;
  line-height: 1.75;
  margin-bottom: 18px;
}
.cs-section p:last-child { margin-bottom: 0; }

.cs-bullets { display: flex; flex-direction: column; gap: 22px; margin-top: 8px; }
.cs-bullets li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  font-size: clamp(19px, 2.4vw, 26px);
  font-weight: 700;
  line-height: 1.35;
  max-width: 760px;
}
.cs-bullets .bullet-mark { flex-shrink: 0; margin-top: 8px; }

.cs-traits { display: flex; flex-direction: column; gap: 6px; margin: 28px 0; }
.cs-traits li {
  display: flex; align-items: center; gap: 14px;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 800;
}
.cs-traits .bullet-mark { flex-shrink: 0; }

.cs-traits--paired li {
  display: flex;
  align-items: baseline;
  gap: 28px;
  flex-wrap: wrap;
  padding: 18px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.cs-traits--paired .trait-name {
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 800;
  min-width: 220px;
}
.cs-traits--paired .trait-desc {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 500;
  color: var(--muted);
}
.theme-museum .cs-traits--paired li { border-bottom-color: rgba(0,0,0,0.08); }

.cs-figure { margin: 40px 0; }
.cs-figure img {
  width: 100%;
  border-radius: 0;
}
.cs-figure figcaption {
  margin-top: 14px;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
}

.cs-quote {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  padding: 60px 0;
}
.cs-quote p {
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 20px;
}
.cs-quote cite {
  font-style: normal;
  color: var(--muted);
  font-size: 14px;
}

/* A page ends on its credit line and nothing else, unless it has a closing
   design of its own (PowerCare's wink banner, Museum's thank-you, The
   Creation's exit). */
.cs-credit {
  padding: 96px 0 8px;
  text-align: center;
  font-size: 13px;
  opacity: 0.55;
}

.cs-footer-banner {
  padding: 100px 0;
  text-align: center;
}
.cs-footer-banner p {
  font-size: 13px;
  opacity: 0.8;
}

.cs-footer-banner--image {
  padding: 0;
  background: var(--pc-mauve);
}
.cs-footer-banner__img {
  width: 100%;
  display: block;
  border-radius: 0;
}

.cs-nextprev {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 40px 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  flex-wrap: wrap;
}
.cs-nextprev a {
  font-weight: 700;
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.cs-nextprev a:hover { opacity: 0.7; }

/* ---------- PowerCare theme (dark) ---------- */

body.theme-powercare { background: var(--black); color: var(--white); }

/* Nav: unique color combo for this case study */
.theme-powercare .nav { background: rgba(138, 54, 115, 0.85); }
.theme-powercare .nav.is-scrolled { box-shadow: 0 1px 0 rgba(0,0,0,0.15); }
.theme-powercare .nav__logo span:first-child { color: var(--pc-orange); }
.theme-powercare .nav__logo span:last-child { color: var(--pc-cream); }
.theme-powercare .nav__links a { color: var(--pc-cream); }
.theme-powercare .nav__links a:hover,
.theme-powercare .nav__links a.is-active { color: var(--pc-orange); }
.theme-powercare .nav__links a::after { background: var(--pc-orange); }
.theme-powercare .nav__toggle span { background: var(--pc-cream); }
.theme-powercare .cs-back:hover { color: var(--pc-orange); }

/* Column matched to Pax so every case study shares one measure, and so the
   left gutter is wide enough to carry the section menu. */
.theme-powercare .cs-intro,
.theme-powercare .cs-deco-triple-row,
.theme-powercare .cs-section .container { max-width: 1180px; padding: 0 48px; }
.theme-powercare .cs-desc,
.theme-powercare .cs-section p { max-width: none; }
.theme-powercare .cs-figure img { width: 100%; }

/* Hero banner: full natural aspect ratio (matches the footer banner's
   height instead of an arbitrary vh crop), face stays centered since the
   whole image — including its lime background — scales together.
   min/max-height from the base rule are cleared so "auto" isn't clamped
   into a mismatched box (that clamp + object-fit was stretching the face). */
/* Lime sits behind the banner only - the hero itself is the page black, so
   the 1180px intro column no longer leaves lime showing either side. */
.theme-powercare .cs-hero { padding-top: 0; }
.theme-powercare .cs-banner {
  height: auto;
  min-height: 0;
  max-height: none;
  object-fit: cover;
  background: var(--pc-lime);
}
.theme-powercare .cs-intro { padding-top: 64px; }

/* Title block laid out like Pax and Museum: small kicker, the title, the
   intro, then the project details as a labelled row. */
.theme-powercare .pc-kicker {
  margin-bottom: 18px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pc-purple);
}
.theme-powercare .cs-desc { margin-top: 30px; color: var(--pc-cream); }
.theme-powercare .pc-meta-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); /* same five column tracks on every case study */
  gap: 24px;
  max-width: none;
  margin-top: 44px;
  padding-top: 24px;
  border-top: 1px solid rgba(234,227,218,0.25); /* --pc-cream */
}
.theme-powercare .pc-meta-row .k { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pc-purple); }
.theme-powercare .pc-meta-row .v { display: block; font-size: 16px; font-weight: 600; color: var(--white); }

/* Triple-chevron: sits in the breathing room between the intro and Our Goal */
.theme-powercare .cs-deco-triple-row {
  display: flex;
  justify-content: flex-end;
  padding-top: 24px;
  padding-bottom: 64px;
}

/* Title */
.theme-powercare .cs-title { color: var(--white); font-size: 64px; font-weight: 700; line-height: 1.1; margin: 0; max-width: none; }
.theme-powercare .cs-title .hl-orange { color: var(--pc-orange); }
.theme-powercare .cs-meta .v { color: var(--white); }

/* Section + sub headings */
.theme-powercare .cs-section h2.cs-h2 { color: var(--pc-cream); font-size: 48px; line-height: 1.08; font-weight: 700; }
.theme-powercare .cs-subhead { font-size: 32px; font-weight: 700; margin-bottom: 18px; }

/* Body copy */
.theme-powercare .cs-section p,
.theme-powercare .cs-bullets li,
.theme-powercare .cs-desc,
.theme-powercare .cs-quote p { font-size: 18px; font-weight: 500; line-height: 1.7; }

/* Keyword highlights inside the logo paragraph */
.theme-powercare .hl-lime { color: var(--pc-lime); }
.theme-powercare .hl-purple { color: var(--pc-purple); }
.theme-powercare .hl-orange-text { color: var(--pc-orange); }

/* Chevrons: sized to sit against 24px running text */
.theme-powercare .bullet-icon { width: 30px; margin-right: 6px; }
.theme-powercare .cs-traits--paired .bullet-icon { width: 26px; }
.theme-powercare .cs-bullets li { align-items: flex-start; }
.theme-powercare .cs-bullets .bullet-icon { margin-top: 6px; }

.theme-powercare .cs-desc-row { align-items: flex-end; }
.theme-powercare .cs-deco-triple { width: 120px; }

/* Our Goal: two-column layout, image left / bullets right */
.theme-powercare .goal-grid {
  display: flex;
  gap: 64px;
  align-items: center;
  flex-wrap: wrap;
}
.theme-powercare .goal-grid .cs-figure { flex: 1 1 380px; margin: 0; }
.theme-powercare .goal-grid .cs-bullets { flex: 1 1 420px; }

/* Poster + variations: full margin-to-margin, two columns */
.theme-powercare .poster-grid {
  display: grid;
  grid-template-columns: 4fr 3fr;
  gap: 64px;
  align-items: start;
  margin: 40px 0;
}
.theme-powercare .poster-grid img {
  border-radius: 0;
  width: 100%;
  height: auto;
  min-width: 0;
}

@media (max-width: 700px) {
  .theme-powercare .poster-grid { grid-template-columns: 1fr; }
}

.theme-powercare .cs-traits li:nth-child(1) .trait-name { color: var(--pc-lime); }
.theme-powercare .cs-traits li:nth-child(2) .trait-name { color: var(--pc-purple); }
.theme-powercare .cs-traits li:nth-child(3) .trait-name { color: var(--pc-orange); }

/* Trait words: brand typeface (Mitr), oversized, aligned to the same left
   margin as everything else. The list is a 2-column grid (name | desc) with
   each <li> flattened via display:contents so every row shares the exact
   same column widths — the desc column lines up no matter how wide each
   trait name renders. */
.theme-powercare .cs-traits--paired {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 56px;
  row-gap: 0;
  align-items: center;
  margin-left: 0;
}
.theme-powercare .cs-traits--paired li {
  display: contents;
}
.theme-powercare .cs-traits--paired .trait-name {
  font-family: "Mitr", sans-serif;
  font-weight: 600;
  font-size: 60px;
  line-height: 1;
  min-width: 0;
  padding: 30px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.theme-powercare .cs-traits--paired .trait-desc {
  font-size: 18px;
  padding: 30px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

@media (max-width: 900px) {
  .theme-powercare .cs-traits--paired {
    grid-template-columns: 1fr;
  }
  .theme-powercare .cs-traits--paired li {
    display: block;
    padding: 12px 0;
  }
  .theme-powercare .cs-traits--paired .trait-name {
    font-size: 40px;
    padding: 0;
    border-bottom: none;
    display: block;
  }
  .theme-powercare .cs-traits--paired .trait-desc {
    padding: 0 0 12px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
}

.theme-powercare .cs-footer-banner { background: var(--pc-mauve); color: var(--pc-orange); }
.theme-powercare .cs-credit { padding-top: 48px; } /* below the closing banner, on the page black */

@media (max-width: 900px) {
  .theme-powercare .cs-title { font-size: 32px; }
  .theme-powercare .cs-section h2.cs-h2 { font-size: 30px; }
  .theme-powercare .cs-subhead { font-size: 22px; }
  .theme-powercare .cs-section p,
  .theme-powercare .cs-bullets li,
  .theme-powercare .cs-desc,
  .theme-powercare .cs-quote p { font-size: 16px; }
  .theme-powercare .goal-grid { gap: 32px; }
}

/* ---------- Museum theme (light) ---------- */

body.theme-museum {
  background: var(--white);
  color: #1a1a1a;
}
/* Nav: a solid magenta bar with a gold wordmark, per the brand mockup.
   Colours read off that mockup and converted back from its P3 screenshot. */
.theme-museum .nav {
  height: 75px;
  padding: 0 32px;
  background: var(--mu-nav);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.theme-museum .nav.is-scrolled {
  height: 75px;
  padding: 0 32px;
  box-shadow: none;
}
.theme-museum .nav__logo span:first-child { color: var(--mu-yellow); }
.theme-museum .nav__logo span:last-child { color: var(--white); }
.theme-museum .nav__links a { color: var(--white); }
.theme-museum .nav__links a:hover { color: var(--mu-yellow); }
.theme-museum .nav__links a.is-active { color: var(--mu-yellow); }
.theme-museum .nav__links a::after { background: var(--mu-yellow); }
.theme-museum .nav__toggle span { background: var(--white); }

/* Banner sits directly under the bar and keeps the artwork's own proportion
   rather than being cropped to a viewport height. */
.theme-museum .cs-hero { padding-top: 75px; } /* flush with the 75px bar */
.theme-museum .cs-banner {
  height: auto;
  min-height: 0;
  max-height: none;
  aspect-ratio: 1440 / 717;
  object-fit: cover;
}

/* Title block laid out like Pax's: small kicker, the title, the intro,
   then the project details as a labelled row. */
.theme-museum .mu-kicker {
  margin-top: 56px;
  margin-bottom: 18px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mu-magenta);
}
.theme-museum .cs-title {
  max-width: none;
  margin: 0;
  font-size: 64px;
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: normal;
  color: var(--mu-purple-dark);
}
.theme-museum .cs-title .mu-accent { color: var(--mu-orange); }

.theme-museum .mu-meta-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); /* same five column tracks on every case study */
  gap: 24px;
  max-width: none;
  margin-top: 44px;
  padding-top: 24px;
  border-top: 1px solid rgba(117,120,122,0.35); /* --mu-grey */
}
.theme-museum .mu-meta-row .k { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mu-grey); }
.theme-museum .mu-meta-row .v { display: block; font-size: 16px; font-weight: 600; color: #1a1a1a; }

.theme-museum .cs-desc {
  margin-top: 30px;
  font-size: 18px;
  line-height: 30.6px;
  color: #000;
}

/* Star mark that closes the intro */
.theme-museum .mu-stars {
  display: block;
  width: 8.52%;
  height: auto;
  margin: 25px 0 0 auto;
  margin-right: 8.13%;
}

/* Museum logo closing the reflection */
.theme-museum .mu-logo {
  display: block;
  width: 22.19%;
  height: auto;
  margin: 74px 3.44% 0 auto;
}

/* thank you + stars, centred as one group */
.theme-museum .mu-thanks {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5%;
  padding: 0;
}
.theme-museum .mu-thanks h2 {
  margin: 0;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 48px;
  line-height: 1;
  text-transform: lowercase;
  color: var(--mu-purple-dark);
}
.theme-museum .mu-thanks__stars { width: min(92px, 19vw); height: auto; } /* same art and size as the intro stars */

/* Closing banner; the credit line follows below it, as on every page */
.theme-museum .mu-endbanner { position: relative; margin-top: 98px; }
.theme-museum .mu-endbanner img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
}
.theme-museum .cs-credit { padding-top: 48px; color: var(--mu-grey); opacity: 1; }

/* The mockup is drawn at 1440. Below that the same composition steps down:
   the credits move under the title and the display type scales back. */
@media (max-width: 1100px) {
  .theme-museum .cs-title { font-size: 44px; }
  .theme-museum .cs-section h2,
  .theme-museum .mu-thanks h2 { font-size: 36px; }
  .theme-museum .cs-desc,
  .theme-museum .cs-section p { font-size: 17px; line-height: 28px; }
  .theme-museum .mu-stars { width: 13%; margin-right: 0; }
  .theme-museum .mu-logo { width: 34%; margin-right: 0; }
}

@media (max-width: 700px) {
  .theme-museum .nav,
  .theme-museum .nav.is-scrolled { padding: 0 24px; }
  .theme-museum .cs-intro,
  .theme-museum .cs-section .container { padding: 0 24px; }
  .theme-museum .cs-title { font-size: 30px; }
  .theme-museum .cs-section h2,
  .theme-museum .mu-thanks h2 { font-size: 28px; }
  .theme-museum .cs-desc,
  .theme-museum .cs-section p { font-size: 16px; line-height: 26px; }
  .theme-museum .cs-desc { margin-top: 24px; }
  .theme-museum .mu-kicker { margin-top: 36px; }
  .theme-museum .mu-stars { width: 19%; }
  .theme-museum .mu-logo { width: 50%; margin-top: 44px; }
  .theme-museum .mu-endbanner { margin-top: 56px; }
}

/* Same 12-column grid as PowerCare: 80px margin, full margin-to-margin
   content instead of a narrow centered column. */
.theme-museum .cs-intro,
.theme-museum .cs-section .container { max-width: 1180px; padding: 0 48px; }
.theme-museum .cs-desc,
.theme-museum .cs-section p,
.theme-museum .cs-bullets li { max-width: none; }

.theme-museum .cs-section h2 {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 48px;
  line-height: 1.08;
  color: var(--mu-magenta);
  text-transform: lowercase;
}
.theme-museum .cs-section p {
  font-size: 18px;
  line-height: 30.6px;
  color: #000;
}
/* Two heading levels, as on PowerCare and Pax: the magenta section titles
   above are H1 (48px), and each part under Design Process is an H2 (32px)
   in its own brand colour. Magenta stays with the H1s; the brand yellow is
   left out as too faint on white at this size. */
.theme-museum .mu-h2 {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 32px;
  line-height: 1.15;
  text-transform: lowercase;
  margin: 56px 0 18px;
}
#process .mu-h2:nth-of-type(1) { color: var(--mu-orange); }
#process .mu-h2:nth-of-type(2) { color: var(--mu-teal); }
#process .mu-h2:nth-of-type(3) { color: var(--mu-green); }
#process .mu-h2:nth-of-type(4) { color: var(--mu-purple-dark); }
#process .mu-h2:nth-of-type(5) { color: var(--mu-teal-bright); }
@media (max-width: 1100px) { .theme-museum .mu-h2 { font-size: 28px; } }
@media (max-width: 700px) { .theme-museum .mu-h2 { font-size: 22px; margin-top: 44px; } }

/* "our story" statements and the personality traits share one treatment:
   the same bold size, the same large magenta diamond sitting on the first
   line, and alternating bright / deep teal. */
.theme-museum .cs-bullets,
.theme-museum .cs-traits { gap: 18px; }
.theme-museum .cs-bullets li,
.theme-museum .cs-traits li {
  align-items: flex-start;
  gap: 16px;
  font-size: clamp(19px, 2.4vw, 26px);
  font-weight: 800;
  line-height: 1.35;
}
.theme-museum .cs-bullets .bullet-mark,
.theme-museum .cs-traits .bullet-mark {
  margin-top: 0;
  font-size: 1.6em;
  line-height: 0.84375; /* 1.35em of the text, so it centres on line one */
  color: var(--mu-magenta);
}
.theme-museum .cs-bullets li:nth-child(odd),
.theme-museum .cs-traits li:nth-child(odd) { color: var(--mu-teal-bright); }
.theme-museum .cs-bullets li:nth-child(even),
.theme-museum .cs-traits li:nth-child(even) { color: var(--mu-teal); }

.theme-museum .cs-quote p { color: #1a1a1a; }

.theme-museum .site-footer {
  border-top-color: rgba(0,0,0,0.08);
  color: var(--mu-grey);
}

/* ---------- Responsive nav ---------- */

@media (max-width: 820px) {
  .nav__links {
    position: fixed;
    top: 0; right: 0;
    height: 100vh;
    width: min(76vw, 320px);
    background: var(--black);
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 28px;
    padding: 40px;
    transform: translateX(100%);
    transition: transform .4s var(--ease);
  }
  .theme-museum .nav__links { background: var(--white); box-shadow: -10px 0 30px rgba(0,0,0,0.08); }
  .nav.is-open .nav__links { transform: translateX(0); }
  .nav__toggle { display: flex; }
  .nav__links a { font-size: 18px; }
}

@media (max-width: 600px) {
  .container { padding: 0 22px; }
  .cs-intro { padding: 48px 22px 32px; }
  .hero { padding-top: 120px; }
  section { padding: 72px 0; }
  .cs-section { padding: 48px 0; }
}

/* ==========================================================================
   Lighter theme — travel packing app case study
   Brand typeface: Manrope. Brand colors: navy #252B7E, teal accent #7ECFC4.
   ========================================================================== */

body.theme-lighter {
  background: var(--white);
  color: #17181c;
  font-family: "Manrope", sans-serif;
}
.theme-lighter .nav { background: rgba(255,255,255,0.85); font-family: "Plus Jakarta Sans", sans-serif; }
.theme-lighter .nav.is-scrolled { box-shadow: 0 1px 0 rgba(0,0,0,0.06); }
.theme-lighter .nav__links a { color: rgba(23,24,28,0.6); }
.theme-lighter .nav__links a:hover, .theme-lighter .nav__links a.is-active { color: var(--lt-accent); }
.theme-lighter .nav__links a::after { background: var(--lt-accent); }
.theme-lighter .nav__logo span:first-child { color: var(--lt-accent); }
.theme-lighter .nav__logo span:last-child { color: var(--lt-navy); }
.theme-lighter .nav__toggle span { background: var(--lt-navy); }

.theme-lighter .container { max-width: 1180px; padding: 0 var(--pc-gutter, 24px); }
@media (min-width: 700px) { .theme-lighter .container { padding: 0 48px; } }

.lt-kicker {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lt-periwinkle);
  margin-bottom: 20px;
}
/* Hero - laid out like the other case studies: the app-screen showcase as
   the opening banner, then kicker, title, lead line, intro and details. */
.lt-hero-wrap { padding-top: 76px; } /* clears the fixed nav */
.lt-hero { max-width: 1180px; margin: 0 auto; padding: 56px 48px 70px; }
.lt-hero .lt-kicker { margin-bottom: 18px; }
.lt-hero h1 {
  font-weight: 800;
  font-size: clamp(32px, 5.4vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin: 0;
  color: var(--lt-navy);
}
.lt-hero__lead {
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.3;
  font-weight: 700;
  color: var(--lt-navy);
  margin: 24px 0 12px;
}
.lt-hero__lead span { color: var(--lt-accent); }
.lt-hero__text {
  font-size: clamp(18px, 2.1vw, 22px);
  line-height: 1.5;
  font-weight: 500;
  color: rgba(23,24,28,0.65);
  margin: 0 0 44px;
}
@media (max-width: 700px) { .lt-hero { padding: 40px 24px 50px; } }
.lt-hero-meta {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); /* same five column tracks on every case study */
  gap: 24px;
  max-width: none;
  border-top: 1px solid rgba(23,24,28,0.12);
  padding-top: 24px;
}
.lt-hero-meta .k { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--lt-navy); margin-bottom: 8px; }
.lt-hero-meta .v { display: block; font-size: 16px; font-weight: 600; }

/* Showcase strip - the opening banner */
.lt-showcase { width: 100%; overflow-x: auto; }
.lt-showcase img { display: block; height: clamp(220px, 30vw, 460px); width: auto; min-width: 100%; object-fit: cover; }

.lt-pull {
  font-weight: 700;
  font-size: clamp(22px, 3vw, 32px);
  line-height: 1.32;
  letter-spacing: -0.01em;
  color: var(--lt-navy);
  margin: 0 0 24px;
}
.lt-body p {
  font-size: 18px;
  line-height: 1.7;
  color: rgba(23,24,28,0.68);
  margin: 0 0 16px;
}
.lt-body p:last-child { margin-bottom: 0; }

/* Section shell */
.lt-section { padding: 90px 0; }
.lt-section h2 {
  font-weight: 800;
  font-size: clamp(28px, 4.6vw, 48px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  max-width: 20ch;
  color: var(--lt-navy);
  margin: 0 0 40px;
}

.lt-figure {
  border-radius: 0;
  overflow: hidden;
  border: 1px solid rgba(23,24,28,0.08);
  box-shadow: 0 20px 50px -30px rgba(23,24,28,0.4);
  margin-bottom: 48px;
}
.lt-figure img { display: block; width: 100%; height: auto; }
.lt-figure--narrow { max-width: 820px; } /* PRD and early sketches, shown smaller */
.lt-figure--scroll { overflow-x: auto; }
.lt-figure--scroll img {
  width: auto;
  height: 320px;
  max-width: none;
}
.lt-figure-stack { display: flex; flex-direction: column; gap: 24px; margin-bottom: 48px; }
.lt-figure-stack .lt-figure { margin-bottom: 0; }

/* Two heading levels, as on the other case studies: a navy H1 opens each
   major section (the side-menu entries) with its sentence as a lead line,
   and an H2 titles each part within it. */
.lt-section h2.lt-h1 { max-width: none; margin: 0 0 32px; }
.lt-lead {
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: #17181c;
  margin: 0 0 40px;
}
.lt-h2 {
  font-weight: 800;
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--lt-accent);
  margin: 80px 0 24px;
}
.lt-h1 + .lt-h2 { margin-top: 40px; }
/* Design Process is split into several sections; its parts flow as one
   group, so each H2 gets the same 80px above it as Research's H2s rather
   than also inheriting the section padding. */
.lt-section--part { padding-bottom: 0; }
.lt-section .container > :last-child { margin-bottom: 0; }
.lt-pull span { color: var(--lt-accent); }

/* Core user needs: two open columns, no box or dividing lines */
.lt-needs-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 48px 64px;
}
@media (max-width: 700px) { .lt-needs-grid { grid-template-columns: 1fr; gap: 36px; } }
.lt-needs-grid .num { font-size: 18px; font-weight: 800; color: var(--lt-periwinkle); margin-bottom: 10px; }
.lt-needs-grid h3 { font-weight: 800; font-size: 21px; line-height: 1.2; color: var(--lt-navy); margin: 0 0 12px; }
.lt-needs-grid p { font-size: 16px; line-height: 1.6; color: rgba(23,24,28,0.68); margin: 0; }

.lt-feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 36px;
}
.lt-feature-grid > div { border-top: 2px solid var(--lt-accent); padding-top: 20px; }
.lt-feature-grid h3 { font-weight: 800; font-size: 21px; margin: 0 0 12px; color: var(--lt-navy); }
.lt-feature-grid p { font-size: 16px; line-height: 1.65; color: rgba(23,24,28,0.65); margin: 0; }

.lt-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
  margin-bottom: 44px;
}
.lt-card-grid > div { border: 1px solid rgba(23,24,28,0.1); border-radius: 16px; padding: 30px; }
.lt-card-grid .num { font-size: 18px; font-weight: 800; color: var(--lt-periwinkle); margin-bottom: 10px; }
.lt-card-grid h3 { font-weight: 800; font-size: 20px; line-height: 1.2; color: var(--lt-navy); margin: 0 0 12px; }
.lt-card-grid p { font-size: 15px; line-height: 1.6; color: rgba(23,24,28,0.65); margin: 0; }

.lt-list { font-size: 16px; line-height: 1.7; color: rgba(23,24,28,0.68); list-style: disc; padding-left: 20px; margin: 0 0 40px; }
.lt-list li { margin-bottom: 6px; }
.lt-list li::marker { color: var(--lt-periwinkle); }
/* The research questions, typed out from the old image, as a teal-bulleted
   list like Pax's research goals. */
.lt-list--questions { font-size: 18px; color: #17181c; margin-bottom: 0; }
.lt-list--questions li { margin-bottom: 10px; }

/* Personas shown as a pair, side by side, rather than stacked full width */
.lt-figure-stack--pair { flex-direction: row; align-items: flex-start; }
.lt-figure-stack--pair .lt-figure { flex: 1 1 0; min-width: 0; }
@media (max-width: 700px) { .lt-figure-stack--pair { flex-direction: column; align-items: stretch; } .lt-figure-stack--pair .lt-figure { flex: none; } } /* stacked, each figure keeps its own height (a 0 basis collapsed them) */
.lt-figure-stack .lt-figure-stack--pair { margin-bottom: 0; } /* a pair nested in a stack (competitive analysis) */

/* Prototype */
.lt-proto { background: var(--lt-navy); color: var(--white); }
.lt-proto-grid { display: grid; grid-template-columns: 1fr 300px; gap: 56px; align-items: center; }
@media (max-width: 820px) { .lt-proto-grid { grid-template-columns: 1fr; justify-items: start; } }
.lt-proto h2, .lt-proto h2.lt-h1 { color: var(--white); font-weight: 800; font-size: clamp(28px, 4.4vw, 48px); line-height: 1.06; letter-spacing: -0.02em; max-width: 15ch; margin: 0 0 22px; }
.lt-proto p { font-size: 17px; line-height: 1.65; color: rgba(255,255,255,0.72); max-width: 46ch; margin: 0 0 18px; }
.lt-proto .lt-lead { color: var(--white); font-size: clamp(20px, 2.4vw, 26px); max-width: none; margin-bottom: 20px; }
.lt-proto p.small { font-size: 15px; color: rgba(255,255,255,0.55); margin-bottom: 32px; }
.lt-cta {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--lt-accent); color: var(--lt-navy);
  text-decoration: none; padding: 15px 26px; border-radius: 100px;
  font-size: 15px; font-weight: 700;
  transition: transform 0.25s var(--ease);
}
.lt-cta:hover { transform: translateY(-2px); }
.lt-phone {
  justify-self: center;
  width: 280px;
  border-radius: 42px;
  border: 10px solid #0e1030;
  overflow: hidden;
  box-shadow: 0 40px 80px -30px rgba(0,0,0,0.6);
  background: #000;
}
/* The screen is Amanda's iPhone 16/17 Pro Max wireframe (440x956); the
   frame takes its height from the image, so it is never cropped. The
   whole phone links to the live prototype. */
.lt-phone { display: block; }
.lt-phone img { display: block; width: 100%; height: auto; }

/* Reflection + footer */
.lt-reflection p {
  font-weight: 700;
  font-size: clamp(22px, 3.4vw, 38px);
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--lt-navy);
  margin: 0;
}
.lt-reflection p span { color: var(--lt-accent); }

.theme-lighter .cs-nextprev a { color: rgba(23,24,28,0.55); }
.theme-lighter .cs-nextprev a:hover { color: var(--lt-navy); }

@media (max-width: 700px) {
  .lt-hero { padding: 110px 22px 40px; }
  .lt-section { padding: 60px 0; }
}

/* ==========================================================================
   Brochure theme — Cho Gi-Seok editorial brochure
   Full-bleed photo hero (nav overlays it), then the printed spreads.
   Display type: Anton. Body: Inter. Palette lifted from the brochure cover.
   ========================================================================== */

body.theme-brochure {
  background: var(--black);
  color: var(--white);
  font-family: "Inter", sans-serif;
}
.theme-brochure .nav { background: rgba(10,10,10,0.55); }
.theme-brochure .nav.is-scrolled { background: rgba(10,10,10,0.85); }
.theme-brochure .nav__logo span:first-child { color: var(--br-red-ui); }
.theme-brochure .nav__links a:hover, .theme-brochure .nav__links a.is-active { color: var(--br-red-ui); }
.theme-brochure .nav__links a::after { background: var(--br-red-ui); }

/* Banner: the cover and four spreads laid flat, as in a print mockup. The
   pages and their shadows are a transparent render; the lit tan surface is
   painted here (shared with the booklet stage below), and the image is
   contained rather than cropped, so no page is ever cut off at any screen
   shape. Narrow/portrait screens get a stacked arrangement instead. */
.br-hero-mockup {
  height: 82vh; min-height: 460px; max-height: 820px;
}
.br-hero-mockup picture,
.br-hero-mockup img {
  display: block;
  width: 100%; height: 100%;
  object-fit: contain;
  border-radius: 0;
}

.br-hero-text { max-width: 1180px; margin: 0 auto; padding: 56px 40px 70px; }
.br-kicker {
  font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--br-red-ui); margin-bottom: 22px;
}
.br-hero-text h1 {
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-style: italic;
  font-size: clamp(48px, 8vw, 96px);
  line-height: 0.96;
  letter-spacing: -0.01em;
  margin: 0 0 26px;
  color: var(--white);
}
.br-tagline {
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.55;
  font-weight: 400;
  max-width: 42ch;
  color: rgba(255,255,255,0.65);
  margin: 0 0 44px;
}
.br-meta-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 24px;
  max-width: 780px;
  border-top: 1px solid rgba(255,255,255,0.15);
  padding-top: 24px;
}
.br-meta-row .k { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.4); margin-bottom: 8px; }
.br-meta-row .v { display: block; font-size: 16px; font-weight: 600; }

.br-section { padding: 30px 0; }
.br-section .container { max-width: 1180px; padding: 0 40px; }
.br-intro h2 {
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-style: italic;
  font-size: 48px;
  line-height: 1.05;
  color: var(--br-red-ui);
  margin: 0 0 28px;
}
.br-intro p {
  font-size: 19px;
  line-height: 1.7;
  color: rgba(255,255,255,0.72);
  margin: 0 0 16px;
}
.br-intro p:last-child { margin-bottom: 0; }

/* The brochure, readable as the printed object: a saddle-stitched booklet
   resting on a studio surface (the brochure's own tan, lit from above, like
   a print mockup), with turnable pages. Each leaf is one sheet - front is a
   right-hand page, back a left-hand page - hinged on the spine and turned in
   3D by main.js, which also drives the turning shade, the shadow the leaf
   casts on the page beneath and the shift that centres
   the book while it is closed. */
.br-stage {
  margin: 56px 0 0;
  padding: clamp(56px, 6vw, 80px) 16px clamp(36px, 4vw, 56px);
}
.br-stage,
.br-hero-mockup {
  background:
    radial-gradient(ellipse 70% 60% at 50% 38%, rgba(255,248,236,0.22), transparent 70%),
    radial-gradient(ellipse 120% 90% at 50% 50%, transparent 55%, rgba(30,20,10,0.32) 100%),
    var(--br-tan);
  overflow: hidden;
}
.br-book {
  --pw: min(46vw, 640px, (100vh - 140px) / 1.2941); /* one page; the open book fills a laptop screen */
  --ph: calc(var(--pw) * 1.2941);      /* US Letter, 8.5 x 11 */
  position: relative;
  width: calc(var(--pw) * 2);
  height: var(--ph);
  margin: 0 auto;
  perspective: calc(var(--pw) * 5);
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  outline: none;
}
.br-book:focus-visible { outline: 2px solid var(--br-red-ui); outline-offset: 18px; }
.br-book__body {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: translateX(calc(var(--shift, -1) * 25%));
}
.br-book__shadow {
  position: absolute;
  top: 0; bottom: 0;
  left: calc(50% - var(--lw, 0) * 50%);
  right: calc(50% - var(--rw, 1) * 50%);
  box-shadow:
    0 2px 3px rgba(40,24,12,0.35),
    0 18px 30px -6px rgba(40,24,12,0.45),
    0 50px 80px -20px rgba(40,24,12,0.5);
  transform: translateZ(-2px);
  pointer-events: none;
}
.br-leaf {
  position: absolute;
  top: 0; left: 50%;
  width: 50%; height: 100%;
  transform-origin: left center;
  transform-style: preserve-3d;
  cursor: grab;
}
.br-book.is-dragging .br-leaf { cursor: grabbing; }
.br-leaf__face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--br-red);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.br-leaf__face--back { transform: rotateY(180deg); }
.br-leaf__face img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 0;
  pointer-events: none;
}
/* Paper: the curve into the spine, a faint lift at the fore-edge, and a
   matte grain over the print. */
.br-leaf__face::before,
.br-leaf__face::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.br-leaf__face--front::before {
  background: linear-gradient(to right,
    rgba(0,0,0,0.42) 0%, rgba(0,0,0,0.18) 2.2%, rgba(255,255,255,0.07) 5.5%,
    rgba(255,255,255,0) 11%, rgba(0,0,0,0) 94%, rgba(0,0,0,0.07) 100%);
}
.br-leaf__face--back::before {
  background: linear-gradient(to left,
    rgba(0,0,0,0.42) 0%, rgba(0,0,0,0.18) 2.2%, rgba(255,255,255,0.07) 5.5%,
    rgba(255,255,255,0) 11%, rgba(0,0,0,0) 94%, rgba(0,0,0,0.07) 100%);
}
/* The covers fold at the spine rather than curving into it */
.br-leaf.is-cover .br-leaf__face--front::before {
  background: linear-gradient(to right, rgba(0,0,0,0.3) 0, rgba(255,255,255,0.1) 0.8%, rgba(0,0,0,0.08) 1.8%, transparent 4%);
}
.br-leaf.is-back-cover .br-leaf__face--back::before {
  background: linear-gradient(to left, rgba(0,0,0,0.3) 0, rgba(255,255,255,0.1) 0.8%, rgba(0,0,0,0.08) 1.8%, transparent 4%);
}
.br-leaf__face::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.45 0 0 0 0 0.4 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
  opacity: 0.55;
}
/* Turning shade: the face darkens as it tilts away from the light */
.br-leaf__shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to right, rgba(0,0,0,0.25), rgba(0,0,0,0.6));
  opacity: 0;
}
.br-leaf__face--back .br-leaf__shade { background: linear-gradient(to left, rgba(0,0,0,0.25), rgba(0,0,0,0.6)); }
/* Shadow the turning leaf throws on the page beneath it */
.br-book__cast {
  position: absolute;
  top: 0; bottom: 0;
  width: 50%;
  pointer-events: none;
  opacity: 0;
}
.br-book__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-top: clamp(28px, 4vw, 40px);
}
.br-book__hint {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(26,16,10,0.62);
}
.br-book__btn {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(26,16,10,0.4);
  color: #1a100a;
  cursor: pointer;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), opacity 0.2s var(--ease);
}
.br-book__btn:hover:not(:disabled) { background: rgba(26,16,10,0.1); border-color: rgba(26,16,10,0.7); }
.br-book__btn:disabled { opacity: 0.3; cursor: default; }

@media (max-width: 700px) {
  .br-book { --pw: 47vw; }
  .br-book__hint { font-size: 11px; }
}

.theme-brochure .cs-nextprev a { color: rgba(255,255,255,0.55); }
.theme-brochure .cs-nextprev a:hover { color: var(--br-red-ui); }

@media (max-width: 700px) {
  .br-hero-mockup { height: 56vh; min-height: 340px; }
  .br-hero-text { padding: 40px 22px 48px; }
}

/* ==========================================================================
   Pax theme — 0-1 product case study (Pax Travel Companion)
   Display type: Space Grotesk. Body: Inter, 18px base per the study's own
   accessibility recommendation. Palette lifted from the case study deck.
   ========================================================================== */

body.theme-pax {
  background: var(--px-cream);
  color: var(--px-ink);
  font-family: "Inter", sans-serif;
  font-size: 18px;
}
.theme-pax .nav { background: rgba(242,235,219,0.85); }
.theme-pax .nav.is-scrolled { box-shadow: 0 1px 0 rgba(29,41,95,0.08); }
.theme-pax .nav__links a { color: rgba(29,41,95,0.6); }
.theme-pax .nav__links a:hover, .theme-pax .nav__links a.is-active { color: var(--px-orange); }
.theme-pax .nav__links a::after { background: var(--px-orange); }
.theme-pax .nav__logo span:first-child { color: var(--px-orange); }
.theme-pax .nav__logo span:last-child { color: var(--px-navy); }
.theme-pax .nav__toggle span { background: var(--px-navy); }

.theme-pax .container { max-width: 1180px; padding: 0 24px; }
@media (min-width: 700px) { .theme-pax .container { padding: 0 48px; } }

.px-kicker {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--px-orange);
  margin-bottom: 18px;
}

/* Hero */
/* Cover: like the other case studies, the opening image sits full-bleed
   above the title - here the Pax illustration (pax-cover-band.svg, a
   variant recoloured to read on the peach) on a band of --px-orange-4,
   resting on the band's bottom edge. Title and details follow on the page
   background. */
.px-hero { color: var(--px-navy); padding: 0 0 70px; }
.px-cover { background: var(--px-orange-4); padding: 120px 24px 0; display: flex; justify-content: center; }
.px-cover__art { width: min(1020px, 100%); height: auto; display: block; }
.px-hero > .container { padding-top: 64px; }
.px-hero h1 {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(32px, 5.4vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
  color: var(--px-navy);
}
.px-hero .px-kicker { color: var(--px-orange); }
.px-hero-stat {
  font-size: clamp(19px, 2.4vw, 26px);
  line-height: 1.5;
  font-weight: 500;
  margin: 30px 0 44px;
  color: var(--px-ink);
}
.px-hero-stat b { color: var(--px-orange); font-weight: 700; }
.px-meta-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); /* same five column tracks on every case study */
  gap: 24px;
  max-width: none;
  border-top: 1px solid rgba(29,41,95,0.15);
  padding-top: 24px;
}
.px-meta-row .k { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(29,41,95,0.5); margin-bottom: 8px; }
.px-meta-row .v { display: block; font-size: 16px; font-weight: 600; }

/* Section shells */
.px-section { padding: 90px 0; }
.px-section--navy { background: var(--px-navy); color: var(--px-cream); }
.px-section--navy .px-kicker { color: var(--px-orange); }
.px-section--orange { background: var(--px-orange); color: var(--px-cream); }
.px-section--orange .px-kicker { color: var(--px-navy); }
.px-section h2 {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 4.4vw, 48px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  max-width: 18ch;
  margin: 0 0 34px;
  color: var(--px-navy);
}
.px-section--navy h2, .px-section--orange h2 { color: var(--px-cream); }
/* Two heading levels, following PowerCare's system: an orange H1 opens each
   major section (these are the only entries in the side menu) and a navy
   H2 titles each part within it. */
.px-section h2.px-h1 { color: var(--px-orange); max-width: none; margin-bottom: 56px; }
.px-h2 {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--px-navy);
  margin: 0 0 28px;
}
.px-section--navy .px-h2, .px-section--orange .px-h2 { color: var(--px-cream); }

.px-body p { font-size: 18px; line-height: 1.7; color: var(--px-ink); margin: 0 0 18px; }
.px-body p:last-child { margin-bottom: 0; }
.px-section--navy .px-body p, .px-section--orange .px-body p { color: rgba(242,235,219,0.85); }

.px-pull {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(24px, 3.6vw, 38px);
  line-height: 1.3;
  max-width: 22ch;
  color: var(--px-navy);
  margin: 0 0 22px;
}
.px-section--navy .px-pull { color: var(--px-cream); }
/* The HMW statement: spans the column and sits centred between the two
   overview paragraphs, with its quotation marks in the brand orange. */
.px-pull--center { max-width: none; text-align: center; margin: 64px auto; }
.px-pull__mark { color: var(--px-orange); }

.px-list { font-size: 18px; line-height: 1.7; list-style: disc; padding-left: 22px; margin: 0; }
.px-list li::marker { color: var(--px-orange); }
.px-list li { margin-bottom: 10px; }
.px-list li:last-child { margin-bottom: 0; }

/* Full-width figure for the deck's own artefacts (prototype mapping
   worksheet, affinity board, recruiting materials), shown whole. */
.px-figure { margin: 0; }
.px-figure img { width: 100%; height: auto; display: block; box-shadow: 0 20px 50px -34px rgba(29,41,95,0.5); }
.px-figure--narrow { max-width: 820px; }
.px-figure figcaption { font-size: 14px; color: rgba(51,54,63,0.7); margin-top: 12px; }

/* Hypothesis: "If" on the left, "Then" outcomes on the right, as in the deck */
.px-hypothesis { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
.px-hypothesis__label { font-family: "Space Grotesk", sans-serif; font-size: 20px; font-weight: 700; color: var(--px-orange); margin-bottom: 16px; }
.px-hypothesis__lead { font-family: "Space Grotesk", sans-serif; font-size: clamp(20px, 2vw, 26px); font-weight: 500; line-height: 1.45; color: var(--px-navy); margin: 0; }
.px-hypothesis__outcomes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.px-hypothesis__outcomes li { display: flex; gap: 14px; font-family: "Space Grotesk", sans-serif; font-size: clamp(20px, 2vw, 26px); font-weight: 500; line-height: 1.35; color: var(--px-navy); }
.px-hypothesis__arrow { color: var(--px-orange); font-weight: 700; flex-shrink: 0; }

/* Recruiting methodologies: headline figure + channels, then the screener
   and poster side by side */
.px-recruit-stats { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 40px; margin: 36px 0 32px; padding: 22px 0; border-top: 1px solid rgba(29,41,95,0.15); border-bottom: 1px solid rgba(29,41,95,0.15); }
.px-recruit-stats p { margin: 0; }
.px-recruit-stats__figure { font-family: "Space Grotesk", sans-serif; font-size: clamp(22px, 2.4vw, 30px); font-weight: 700; color: var(--px-navy); }
.px-recruit-stats__channels { font-size: 16px; font-weight: 600; letter-spacing: 0.02em; color: var(--px-ink); }
.px-recruit-media { display: grid; grid-template-columns: 1.45fr 1fr; gap: 40px; align-items: start; }

/* Testing methodologies: four facts, each led by its figure */
.px-method-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.px-method-grid > div { border-top: 2px solid var(--px-navy); padding-top: 18px; }
.px-method-grid h4 { font-family: "Space Grotesk", sans-serif; font-size: 14px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--px-navy); margin: 0 0 14px; }
.px-method-grid p { font-size: 16px; line-height: 1.55; color: var(--px-ink); margin: 0; }
.px-method-grid .px-method-grid__figure { font-family: "Space Grotesk", sans-serif; font-size: 22px; font-weight: 700; line-height: 1.25; color: var(--px-navy); margin-bottom: 8px; }
@media (max-width: 900px) {
  .px-hypothesis, .px-recruit-media { grid-template-columns: 1fr; gap: 36px; }
  .px-method-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) { .px-method-grid { grid-template-columns: 1fr; } }

/* Timeline (5-stage stepper) */
.px-timeline {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}
.px-timeline .stage { text-align: left; }
.px-timeline .stage h3 { font-size: 17px; font-weight: 700; color: var(--px-navy); margin: 0 0 16px; }
.px-timeline .stage .bar { height: 10px; border-radius: 6px; margin-bottom: 16px; }
.px-timeline .stage:nth-child(1) .bar { background: var(--px-orange-4); }
.px-timeline .stage:nth-child(2) .bar { background: var(--px-orange-3); }
.px-timeline .stage:nth-child(3) .bar { background: var(--px-orange-2); }
.px-timeline .stage:nth-child(4) .bar { background: var(--px-orange); }
.px-timeline .stage:nth-child(5) .bar { background: var(--px-navy); }
.px-timeline .stage ul { list-style: none; margin: 0; padding: 16px 0 0; border-top: 1px solid rgba(29,41,95,0.15); font-size: 14px; line-height: 1.7; color: var(--px-ink); }
@media (max-width: 900px) {
  .px-timeline { grid-template-columns: repeat(2, 1fr); }
}

/* Interactive persona stack — the three original persona-slide images sit
   scattered like photos on a table (echoes the brochure hero treatment).
   All three stay visible; clicking one straightens and enlarges it while
   the other two recede further into the scatter. */
.px-persona-stack {
  position: relative;
  width: 100%;
  aspect-ratio: 15/8;
  margin-bottom: 20px;
}
.px-persona-card-img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 74%;
  border: none;
  padding: 0;
  margin: 0;
  background: none;
  cursor: pointer;
  border-radius: 0;
  overflow: hidden;
  box-shadow: 0 20px 45px -22px rgba(29,41,95,0.4);
  transform: translate(-50%, -50%) translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(0.86);
  transition: transform 0.7s var(--ease), box-shadow 0.5s var(--ease), opacity 0.5s var(--ease);
}
.px-persona-card-img:nth-child(1) { z-index: 1; --rot: -5deg; --tx: -20%; --ty: 8%; }
.px-persona-card-img:nth-child(2) { z-index: 2; --rot: 2deg; --tx: 0%; --ty: -6%; }
.px-persona-card-img:nth-child(3) { z-index: 3; --rot: 6deg; --tx: 20%; --ty: 9%; }
.px-persona-card-img img {
  width: 100%;
  height: auto;
  display: block;
  transition: filter 0.5s var(--ease);
}
.px-persona-card-img:hover { box-shadow: 0 28px 56px -20px rgba(29,41,95,0.48); }
.px-persona-card-img:focus-visible { outline: 2px solid var(--px-orange); outline-offset: 3px; }

.px-persona-stack.has-active .px-persona-card-img {
  transform: translate(-50%, -50%) translate(calc(var(--tx) * 1.7), calc(var(--ty) * 1.7)) rotate(calc(var(--rot) * 2.2)) scale(0.6);
  opacity: 0.65;
  z-index: 1;
}
.px-persona-stack.has-active .px-persona-card-img:not(.is-active) img { filter: saturate(0.6) brightness(0.88); }
.px-persona-stack.has-active .px-persona-card-img.is-active {
  transform: translate(-50%, -50%) rotate(0deg) scale(1);
  opacity: 1;
  z-index: 10;
  box-shadow: 0 40px 80px -24px rgba(29,41,95,0.5);
}

@media (max-width: 700px) {
  .px-persona-stack { aspect-ratio: 5/6; }
  .px-persona-card-img { width: 88%; }
  .px-persona-card-img:nth-child(1) { --tx: 0%; --ty: -22%; }
  .px-persona-card-img:nth-child(2) { --tx: 0%; --ty: 0%; }
  .px-persona-card-img:nth-child(3) { --tx: 0%; --ty: 22%; }
  .px-persona-stack.has-active .px-persona-card-img { transform: translate(-50%, -50%) translate(0, calc(var(--ty) * 1.6)) rotate(calc(var(--rot) * 1.4)) scale(0.5); }
  .px-persona-stack.has-active .px-persona-card-img.is-active { transform: translate(-50%, -50%) rotate(0deg) scale(0.98); }
}

/* Expert / participant cards */
.px-expert-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 28px; }
.px-expert-card h3 { font-size: 19px; font-weight: 700; color: var(--px-navy); margin: 0 0 4px; }
.px-expert-card .role { font-size: 13px; color: var(--px-orange); font-weight: 700; margin-bottom: 12px; }
.px-expert-card p { font-size: 15px; line-height: 1.6; color: var(--px-ink); margin: 0; }

/* Interview participants — 3 left + 3 right, matching the source deck, no card boxes */
.px-avatar-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 56px;
  row-gap: 32px;
}
.px-avatar-card { display: flex; gap: 16px; align-items: flex-start; background: none; padding: 0; }
.px-avatar-card .avatar {
  flex-shrink: 0; width: 56px; height: 56px; border-radius: 50%;
  object-fit: cover; display: block;
}
.px-avatar-card h4 { font-size: 16px; font-weight: 700; color: var(--px-navy); margin: 0 0 2px; }
.px-avatar-card .fit { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--px-orange); margin-bottom: 6px; }
.px-avatar-card p { font-size: 14px; line-height: 1.5; color: var(--px-ink); margin: 0; }
@media (max-width: 640px) {
  .px-avatar-grid { grid-template-columns: 1fr; row-gap: 24px; }
}

/* MVP / card grids */
.px-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }
.px-card-grid > div { border: 1px solid rgba(29,41,95,0.12); border-radius: var(--radius-m); padding: 30px; }
.px-card-grid h3 { font-family: "Space Grotesk", sans-serif; font-size: 18px; font-weight: 700; color: var(--px-navy); margin: 0 0 12px; letter-spacing: 0.02em; text-transform: uppercase; }
.px-card-grid ul { list-style: none; margin: 0; padding: 0; font-size: 15px; line-height: 1.6; }
.px-card-grid li { margin-bottom: 8px; padding-left: 16px; position: relative; }
.px-card-grid li::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--px-orange); }

/* Concept testing */
.px-concept-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 32px; }
.px-concept-card img { width: 100%; height: auto; border-radius: 0; box-shadow: 0 20px 50px -34px rgba(29,41,95,0.5); margin-bottom: 20px; }
.px-concept-card h3 { font-size: 16px; font-weight: 700; color: var(--px-navy); margin: 0 0 18px; }

/* Donut ring stat. The number is laid over the ring's centre rather than
   pulled up with a negative margin, so ring, number and caption never
   overlap. In a Key Insights row the rings take the left and the quotes
   fill the rest of the line; a row with no quotes spreads its rings evenly
   across the full width. */
.px-donut-row { display: flex; flex-wrap: wrap; gap: 32px 56px; align-items: center; }
.px-donut-row:not(:has(.px-quote-block)) { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); justify-items: center; }
.px-donut { position: relative; display: flex; flex-direction: column; align-items: center; gap: 18px; width: 200px; flex: 0 0 auto; }
.px-donut svg { width: 160px; height: 160px; transform: rotate(-90deg); }
.px-donut circle { fill: none; stroke-width: 9; }
.px-donut .track { stroke: rgba(29,41,95,0.12); }
.px-donut .fill { stroke: var(--px-orange); stroke-linecap: round; stroke-dasharray: 263.9; stroke-dashoffset: calc(263.9 * (1 - var(--pct))); transition: stroke-dashoffset 1s var(--ease); }
.px-donut__num { position: absolute; top: 80px; left: 0; right: 0; transform: translateY(-50%); text-align: center; font-family: "Space Grotesk", sans-serif; font-size: 38px; font-weight: 700; line-height: 1; color: var(--px-navy); }
.px-donut__label { font-size: 13px; text-align: center; color: var(--px-ink); }
.px-donut__caption { font-size: 16px; line-height: 1.5; text-align: center; color: var(--px-ink); max-width: 200px; }

.px-quote-block { border-left: 3px solid var(--px-orange); padding-left: 24px; margin-top: 16px; }
.px-donut-row .px-quote-block { flex: 1 1 320px; margin-top: 0; padding-top: 4px; padding-bottom: 4px; }
@media (max-width: 700px) { .px-donut-row { justify-content: center; } }
.px-quote-block p { font-size: 17px; font-style: italic; line-height: 1.6; margin: 0 0 6px; color: var(--px-ink); }
.px-quote-block cite { font-size: 13px; font-style: normal; font-weight: 700; color: var(--px-navy); }

/* User Flow and Clarity (deck slides 36-37): the quote, then each app
   screen with its finding beside it. The note's rule starts at a dot on the
   screen element it refers to (--x/--y, fractions of the screen) and runs
   right, title above the rule and detail below, as on the slides. */
.px-flow { margin-top: 72px; }
.px-flow__title { font-family: "Space Grotesk", sans-serif; font-size: 20px; font-weight: 700; color: var(--px-navy); margin: 0 0 20px; }
.px-flow__quote { margin: 0 0 56px; }
.px-flow__quote p { font-size: 18px; font-style: italic; line-height: 1.6; color: var(--px-ink); margin: 0 0 8px; }
.px-flow__quote cite { font-size: 14px; font-style: normal; font-weight: 700; color: var(--px-navy); }
.px-flow-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px 56px; }
.px-flow-item { --phone: 240px; position: relative; margin: 0; }
.px-flow-item img { width: var(--phone); height: auto; display: block; }
.px-flow-note {
  position: absolute;
  top: calc(var(--y) * var(--phone) * var(--ratio, 2.05));
  left: calc(var(--x) * var(--phone));
  width: calc((1 - var(--x)) * var(--phone) + 210px);
  border-top: 1px solid var(--px-orange);
  text-align: right;
}
.px-flow-note::before { content: ""; position: absolute; left: -4px; top: -5px; width: 9px; height: 9px; border-radius: 50%; background: var(--px-orange); }
.px-flow-note__title { position: absolute; right: 0; bottom: 100%; padding-bottom: 6px; font-family: "Space Grotesk", sans-serif; font-size: 20px; font-weight: 500; line-height: 1.15; color: var(--px-orange); white-space: nowrap; }
.px-flow-note__body { display: block; margin: 8px 0 0 auto; max-width: 200px; font-size: 14px; line-height: 1.5; color: var(--px-navy); }
@media (max-width: 1000px) {
  .px-flow-grid { grid-template-columns: 1fr; max-width: 560px; }
}
@media (max-width: 480px) {
  .px-flow-item { --phone: 170px; }
  .px-flow-note__title { font-size: 17px; }
  .px-flow-note__body { max-width: 150px; font-size: 13px; }
  .px-flow-note { width: calc((1 - var(--x)) * var(--phone) + 150px); }
}

/* Recommendation list */
.px-recommend { display: flex; flex-direction: column; gap: 28px; }
.px-recommend > div { border-top: 2px solid var(--px-navy); padding-top: 18px; }
.px-recommend h3 { font-family: "Space Grotesk", sans-serif; font-size: 19px; font-weight: 700; color: var(--px-navy); margin: 0 0 8px; }
.px-recommend p { font-size: 15.5px; line-height: 1.65; color: var(--px-ink); margin: 0; }
.px-section--navy .px-recommend > div { border-top-color: rgba(242,235,219,0.35); }
.px-section--navy .px-recommend h3 { color: var(--px-cream); }
.px-section--navy .px-recommend p { color: rgba(242,235,219,0.85); }
.px-section--orange .px-recommend > div { border-top-color: rgba(242,235,219,0.35); }
.px-section--orange .px-recommend h3 { color: var(--px-cream); }
.px-section--orange .px-recommend p { color: rgba(242,235,219,0.9); }

/* Pie chart (product-market fit). As on the deck slide: the pie with a
   small legend beneath it, and the reading of the result right beside. */
.px-pie-row { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 80px; align-items: center; margin-bottom: 96px; }
.px-pie-col { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.px-pie {
  width: 340px; height: 340px; border-radius: 50%; flex-shrink: 0;
  background: conic-gradient(
    var(--px-orange) 0% 57.1%,
    var(--px-orange-2) 57.1% 85.7%,
    var(--px-navy) 85.7% 100%
  );
}
.px-pie-legend { display: flex; flex-direction: column; gap: 8px; }
.px-pie-legend .row { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--px-ink); }
.px-pie-legend .swatch { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.px-pie-legend b { font-family: "Space Grotesk", sans-serif; font-weight: 700; color: var(--px-navy); min-width: 52px; }

/* Survey charts (deck slides 44-48): the deck's own chart image on the
   left, its reading on the right. */
.px-chart-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 64px; align-items: center; margin-bottom: 96px; }
.px-chart-row:last-child { margin-bottom: 0; }
.px-chart-row--wide { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); }
.px-chart-row__fig { margin: 0; }
.px-chart-row__fig img { width: 100%; height: auto; display: block; }
.px-chart-row__text p { font-size: 18px; line-height: 1.6; color: var(--px-ink); margin: 0 0 18px; }
.px-chart-row__text p:last-child { margin-bottom: 0; }
.px-chart-row__text .px-list { font-size: 18px; line-height: 1.6; }
.px-chart-row__text .px-chart-row__lead { font-family: "Space Grotesk", sans-serif; font-size: 22px; font-weight: 500; line-height: 1.3; color: var(--px-orange); margin-bottom: 12px; }
@media (max-width: 900px) {
  .px-pie-row, .px-chart-row, .px-chart-row--wide { grid-template-columns: 1fr; gap: 32px; margin-bottom: 72px; }
  .px-pie { width: 280px; height: 280px; }
}

/* Key figures picked out in running text, in the brand orange */
.px-hl { color: var(--px-orange); }

.theme-pax .cs-nextprev a { color: rgba(29,41,95,0.55); }
.theme-pax .cs-nextprev a:hover { color: var(--px-orange); }

@media (max-width: 700px) {
  .px-hero { padding: 0 0 50px; }
  .px-cover { padding-top: 96px; }
  .px-hero > .container { padding-top: 40px; }
  .px-section { padding: 60px 0; }
  .px-donut-row { gap: 26px; }
}

/* ==========================================================================
   theme-ap2d — Art section: 2D Art Collection (Loneliness)
   A two-column masonry exhibition, following the artist's own reference
   layout: full-bleed thumbnail banner, kicker + large title, then a
   two-column gallery with a shared 80px margin/gutter/row-gap so all
   spacing on the page reads as one consistent unit. Body font stays
   Plus Jakarta Sans (site system) throughout, matching the kicker.
   ========================================================================== */

.theme-ap2d {
  background: var(--ap-bg);
  color: var(--ap-ink);
}

.theme-ap2d .container { max-width: 1440px; padding: 0 80px; }

.theme-ap2d .nav { background: rgba(17, 13, 14, 0.72); }
.theme-ap2d .nav.is-scrolled { box-shadow: 0 1px 0 rgba(244,236,230,0.08); }
.theme-ap2d .nav__logo span:first-child { color: var(--ap-red); }
.theme-ap2d .nav__links a { color: rgba(244,236,230,0.8); }
.theme-ap2d .nav__links a:hover { color: var(--ap-ink); }
.theme-ap2d .nav__links a::after { background: var(--ap-red); }
.theme-ap2d .nav__links a.is-active { color: var(--ap-red); }
.theme-ap2d .nav__toggle span { background: var(--ap-ink); }

/* Top banner — full-bleed mosaic of the works, nav floats over it */

.ap-banner { width: 100%; }
.ap-banner-row {
  display: flex;
  width: 100%;
}
.ap-banner-row img {
  flex: 1 1 0;
  min-width: 0;
  width: 100%;
  height: clamp(140px, 20vw, 260px);
  object-fit: cover;
  display: block;
  border-radius: 0;
}
.ap-banner-row--tall img { height: clamp(170px, 24vw, 320px); }

/* Intro */

.ap-hero { padding: 56px 0 72px; }
/* Kicker, title and intro on the design case studies' scale: 16px caps
   kicker, 64px title, 18px intro. */
.ap-hero__kicker {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ap-ink);
  margin-bottom: 18px;
}
.ap-hero h1 {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 800;
  font-style: normal;
  font-size: clamp(40px, 5.4vw, 64px);
  letter-spacing: -0.01em;
  line-height: 1.02;
  margin: 0 0 28px;
  color: var(--ap-red);
}
.ap-hero__lede {
  max-width: none;
  font-size: 18px;
  line-height: 1.7;
  color: rgba(244, 236, 230, 0.7);
}

/* Collage gallery — every work is placed at the exact x/y/width taken
   from the reference layout (percentages of the 1440px design canvas),
   inside a wrapper whose aspect-ratio keeps that placement proportional
   at any width. This is a freeform composition, not a column grid — some
   images intentionally span past the halfway point (e.g. the cathedral). */

.ap-collage-wrap {
  padding: 0 0 80px;
}
.ap-collage {
  position: relative;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  aspect-ratio: 1440 / 5939;
}

/* Single artwork figure — hover darkens the image and reveals an overlay
   with medium/size/description. No persistent title label. */

.ap-work {
  position: absolute;
  display: block;
  overflow: hidden;
  border-radius: 0;
  cursor: pointer;
}
.ap-work img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0;
  transition: filter .3s var(--ease);
}
.ap-work:hover img,
.ap-work:focus-within img {
  filter: brightness(0.42);
}

.ap-caption {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 28px;
  opacity: 0;
  transition: opacity .3s var(--ease);
  pointer-events: none;
}
.ap-work:hover .ap-caption,
.ap-work:focus-within .ap-caption { opacity: 1; }

.ap-caption__meta {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ap-ink);
  margin-bottom: 14px;
}
.ap-caption__note {
  font-size: 15px;
  line-height: 1.6;
  font-style: italic;
  color: rgba(244, 236, 230, 0.85);
  max-width: 36ch;
}

.theme-ap2d .cs-nextprev { justify-content: center; }
.theme-ap2d .cs-nextprev a { color: rgba(244,236,230,0.55); }
.theme-ap2d .cs-nextprev a:hover { color: var(--ap-red); }

/* Lightbox — click an artwork to view it large, aspect ratio preserved */

.ap-lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
  background: rgba(6, 4, 4, 0.94);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s var(--ease), visibility 0s linear .3s;
}
.ap-lightbox.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity .3s var(--ease), visibility 0s linear 0s;
}

.ap-lightbox__frame {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: scale(0.97);
  transition: transform .3s var(--ease);
}
.ap-lightbox.is-open .ap-lightbox__frame { transform: scale(1); }

.ap-lightbox__img {
  display: block;
  max-width: 90vw;
  max-height: 82vh;
  width: auto;
  height: auto;
  border-radius: 0;
}

.ap-lightbox__caption {
  margin-top: 18px;
  max-width: 60ch;
  text-align: center;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(244, 236, 230, 0.75);
}

.ap-lightbox__close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ap-ink);
  background: rgba(244, 236, 230, 0.08);
  transition: background .25s var(--ease);
}
.ap-lightbox__close:hover { background: rgba(244, 236, 230, 0.18); }

@media (max-width: 900px) {
  .theme-ap2d .container { padding: 0 40px; }

  /* Desktop composition is a freeform collage that only reads correctly
     at wide widths — below 900px it collapses to a single stacked
     column in the same top-to-bottom order, each work at full width. */
  .ap-collage-wrap { padding: 0 40px 40px; }
  .ap-collage {
    position: static;
    width: auto;
    max-width: none;
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    gap: 40px;
  }
  .ap-work { position: static !important; width: 100% !important; }

  .ap-banner-row img,
  .ap-banner-row--tall img { height: clamp(90px, 30vw, 160px); }

  /* No reliable hover on touch — keep captions reachable via tap/focus,
     and dial back the darken so the art stays visible by default. */
  .ap-work:hover img { filter: brightness(0.6); }

  .ap-lightbox { padding: 24px; }
  .ap-lightbox__close { top: 12px; right: 12px; }
}

@media (max-width: 520px) {
  .theme-ap2d .container { padding: 0 22px; }
  .ap-collage-wrap { padding: 0 22px 32px; }
  .ap-hero { padding: 40px 0 48px; }
}

/* ==========================================================================
   theme-creation — Art section: The Creation (24 Frames Project)
   A direct translation of the project's own layout reference: every element
   sits at the x/y/width/height it occupies on that 1440 x 9828 design canvas
   (since shortened to 9643 - everything from the 24-frame sheet down moved
   up 185px when the type went onto the case studies' scale - and then to
   9193 when the two Final Installation photos were paired, and to 10522
   when the Reference Images collage went in, then to 10239 when
   the Initial Idea grid was sized to its paragraph, and 10321 when it was
   enlarged again), as
   percentages, so the whole composition scales as one piece and
   never reflows into a grid. The reference is the dark-mode design; light
   mode reverses the color system only — identical geometry and type.
   Titles use the two gradients specified in the project's color references.
   ========================================================================== */

/* Light is this page's default; dark is opt-in through the switch. The two
   gradients keep their hue and saturation across modes and only move in
   lightness, so each mode reads as the same two gradients rather than as a
   different palette. */
body.theme-creation {
  --cr-background: #ffffff;
  --cr-text-primary: #0a0a0a;
  --cr-text-secondary: rgba(10, 10, 10, 0.68);

  /* Title gradient (color reference 2) */
  --cr-title-1: #CE2C6B;
  --cr-title-2: #835690;
  --cr-title-3: #2273E2;

  /* Heading / kicker gradient (color reference 1) */
  --cr-heading-1: #4A6D9C;
  --cr-heading-2: #57497E;

  --cr-nav-bg: #ffffff;
  --cr-line: rgba(10, 10, 10, 0.22);

  background: var(--cr-background);
  color: var(--cr-text-primary);
  transition: background .35s var(--ease), color .35s var(--ease);
}

/* Dark mode — the palette exactly as the layout reference has it. */
body.theme-creation[data-mode="dark"] {
  --cr-background: #000000;
  --cr-text-primary: #ffffff;
  --cr-text-secondary: rgba(255, 255, 255, 0.72);

  --cr-title-1: #D84B81;
  --cr-title-2: #9E74A9;
  --cr-title-3: #8CB6F0;

  --cr-heading-1: #8FA6C4;
  --cr-heading-2: #70619B;

  --cr-nav-bg: #000000;
  --cr-line: rgba(255, 255, 255, 0.22);
}

/* Nav: the shared component, re-tinted only. The reference shows a solid
   75px bar above the banner, so this theme drops the translucency. */
.theme-creation .nav {
  height: 75px;
  /* 80px margins at the reference's 1440 canvas, scaling with it */
  padding: 0 clamp(24px, 5.5556vw, 110px);
  background: var(--cr-nav-bg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.theme-creation .nav.is-scrolled {
  height: 75px;
  padding: 0 clamp(24px, 5.5556vw, 110px);
  box-shadow: none;
}
.theme-creation .nav__logo span:last-child { color: var(--cr-text-primary); }
.theme-creation .nav__links a { color: var(--cr-text-primary); }
.theme-creation .nav__toggle span { background: var(--cr-text-primary); }

/* The nav picks up the page's own two gradients: "AMANDA" and the active
   link's underline take the title gradient, the active link itself takes
   the kicker gradient. Both follow the light/dark tokens automatically. */
.theme-creation .nav__logo span:first-child,
.theme-creation .nav__links a.is-active {
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.theme-creation .nav__logo span:first-child {
  background-image: linear-gradient(90deg, var(--cr-title-1) 0%, var(--cr-title-2) 50%, var(--cr-title-3) 100%);
}
.theme-creation .nav__links a.is-active {
  background-image: linear-gradient(90deg, var(--cr-heading-1) 0%, var(--cr-heading-2) 100%);
}
.theme-creation .nav__links a.is-active::after {
  background: linear-gradient(90deg, var(--cr-title-1) 0%, var(--cr-title-2) 50%, var(--cr-title-3) 100%);
}
.theme-creation .nav__links a:not(.is-active)::after { background: var(--cr-text-primary); }

/* The design canvas. Width is unconstrained so the composition scales as a
   single piece at any viewport, exactly as the reference frame does; the
   aspect-ratio holds every percentage placement in proportion. */
.cr-canvas {
  position: relative;
  width: 100%;
  aspect-ratio: 1440 / 10321;
  container-type: inline-size;
  overflow: hidden;
}

.cr-canvas img { border-radius: 0; }

/* Each banner slot holds both banner artworks and shows one at a time, so
   the two modes can trade them over: the pale frame opens the page in light
   mode, the black eye opens it in dark mode. Same slot, same geometry. */
.cr-banner {
  position: absolute;
  display: block;
  overflow: hidden;
  aspect-ratio: 1440 / 936;
}
.cr-banner img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  transition: opacity .35s var(--ease);
}
.cr-banner img[data-mode-img="dark"] { opacity: 0; }
body.theme-creation[data-mode="dark"] .cr-banner img[data-mode-img="light"] { opacity: 0; }
body.theme-creation[data-mode="dark"] .cr-banner img[data-mode-img="dark"] { opacity: 1; }

/* Type — sizes are the reference's px values expressed against the canvas
   width (1cqw = 1% of it), so type scales with the composition. */
.cr-kicker,
.cr-title,
.cr-h2,
.cr-body {
  position: absolute;
  margin: 0;
  line-height: 1;
  font-family: "Plus Jakarta Sans", sans-serif;
}

.cr-kicker,
.cr-title,
.cr-h2 { white-space: nowrap; }

.cr-kicker,
.cr-title,
.cr-h2 {
  /* Gradient fill spans the 960px text layer from its own left edge.
     background-clip: text only paints inside the padding box, so the box
     is extended below the baseline to keep descenders (the j of Project,
     the y of Key Frames) from being cut off. The gradient runs
     horizontally, so the extra height doesn't shift any color. */
  width: 66.6667%;
  padding-bottom: 0.3em;
  font-weight: 700;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* On the design case studies' scale at the 1440 canvas: 16px caps kicker,
   64px title, 48px section headings, 18px body. */
.cr-kicker,
.cr-h2 {
  background-image: linear-gradient(90deg, var(--cr-heading-1) 0%, var(--cr-heading-2) 100%);
}
.cr-kicker {
  font-size: 1.1111cqw;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.cr-h2 { font-size: 3.3333cqw; }

.cr-title {
  font-size: 4.4444cqw;
  letter-spacing: 0;
  background-image: linear-gradient(90deg, var(--cr-title-1) 0%, var(--cr-title-2) 50%, var(--cr-title-3) 100%);
}

/* Body copy runs as real paragraphs (the reference only ever showed a single
   placeholder line). Each block carries its own measure inline; the `top`
   values are set so the FIRST baseline still lands where the reference put
   the placeholder, and the paragraph grows down into the empty space below. */
.cr-body {
  font-size: 1.25cqw;
  font-weight: 500;
  line-height: 1.6;
  color: var(--cr-text-primary);
}

.cr-exit {
  position: absolute;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 2.2222cqw;
  font-weight: 600;
  line-height: 1;
  color: var(--cr-text-primary);
  transition: opacity .25s var(--ease);
  /* Flicker, layer 1 of 2: a slow, smooth drift. */
  animation: cr-flicker-drift 9.1s ease-in-out infinite;
}

/* Layer 2 of 2: short irregular catches, on a period that shares no factor
   with the drift above (9.1s against 5.3s). Because opacity multiplies
   through the DOM, the two combine into a fluctuation that doesn't line up
   again for about eight minutes — so it reads as organic rather than as a
   loop, without any JS running a timer. */
.cr-exit__flicker {
  display: inline-block;
  animation: cr-flicker-catch 5.3s linear infinite;
}

/* Dropping both animations on hover hands opacity cleanly to the hover state */
.cr-exit:hover { animation: none; opacity: 0.6; }
.cr-exit:hover .cr-exit__flicker { animation: none; opacity: 1; }

@keyframes cr-flicker-drift {
  0%   { opacity: 1; }
  17%  { opacity: 0.94; }
  31%  { opacity: 0.99; }
  48%  { opacity: 0.91; }
  62%  { opacity: 0.975; }
  79%  { opacity: 0.93; }
  100% { opacity: 1; }
}

@keyframes cr-flicker-catch {
  0%, 8.4%    { opacity: 1; }
  9.1%        { opacity: 0.84; }
  10.3%       { opacity: 1; }
  26.8%       { opacity: 1; }
  27.6%       { opacity: 0.91; }
  28.4%       { opacity: 1; }
  41.2%       { opacity: 1; }
  42.1%       { opacity: 0.8; }
  42.9%       { opacity: 0.97; }
  43.7%       { opacity: 0.86; }
  45.2%       { opacity: 1; }
  62.5%       { opacity: 1; }
  63.4%       { opacity: 0.93; }
  64.1%       { opacity: 1; }
  77.9%       { opacity: 1; }
  78.8%       { opacity: 0.82; }
  79.6%       { opacity: 0.98; }
  80.9%       { opacity: 0.89; }
  82.1%       { opacity: 1; }
  100%        { opacity: 1; }
}

/* Project details (Role / Team / Timeline / Tools) on the case studies' grid
   and type at the 1440 canvas: 12px caps labels, 16px values, a rule above,
   five 170px-min tracks - expressed in cqw so it scales with the canvas. */
.cr-meta-row {
  position: absolute;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11.8056cqw, 1fr));
  gap: 1.6667cqw;
  border-top: 1px solid var(--cr-line);
  padding-top: 1.6667cqw;
  font-family: "Plus Jakarta Sans", sans-serif;
}
.cr-meta-row .k {
  display: block;
  font-size: 0.8333cqw;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cr-text-secondary);
  margin-bottom: 0.5556cqw;
}
.cr-meta-row .v {
  display: block;
  font-size: 1.1111cqw;
  font-weight: 600;
  color: var(--cr-text-primary);
}

/* Credit line, as on every other page, in the gap above the closing banner */
.cr-credit {
  position: absolute;
  left: 0;
  width: 100%;
  margin: 0;
  text-align: center;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 0.9028cqw;
  line-height: 1;
  color: var(--cr-text-primary);
  opacity: 0.55;
}

/* Reference Images collage: one positioned box on the canvas, its photos
   placed inside it as justified rows (percentages of the box), each at its
   true proportions with even gaps. On phones it becomes a 2-column grid. */
.cr-refs { position: absolute; }
.cr-ref {
  position: absolute;
  margin: 0;
  overflow: hidden;
}
.cr-ref img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 0;
}

/* Artwork — shown as is: no hover state and no click-to-enlarge on this page. */
.cr-work {
  position: absolute;
  margin: 0;
  display: block;
  overflow: hidden;
  border-radius: 0;
}
.cr-work img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 0;
}

/* Light / dark switch */
.cr-mode {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border: 1px solid var(--cr-line);
  background: var(--cr-background);
  color: var(--cr-text-primary);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  transition: border-color .25s var(--ease), background .35s var(--ease), color .35s var(--ease);
}
.cr-mode:hover { border-color: var(--cr-text-primary); }
.cr-mode__dot {
  width: 10px;
  height: 10px;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: linear-gradient(90deg, currentColor 50%, transparent 50%);
}

/* Below 900px the freeform composition can't hold — it stacks into one
   full-width column in the same top-to-bottom order, keeping the same
   images, proportions and type hierarchy. */
@media (max-width: 900px) {
  .cr-canvas {
    position: static;
    aspect-ratio: auto;
    container-type: normal;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
    padding-bottom: 48px;
  }
  .cr-canvas > * {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: auto !important;
    height: auto !important;
  }
  /* The banner slot stays positioned: its two artworks are absolutely
     placed inside it, and without this they anchored to the page instead
     and covered the title block. */
  .cr-canvas > .cr-banner { position: relative !important; width: 100% !important; }
  .cr-work img { height: auto; }

  .cr-kicker,
  .cr-title,
  .cr-h2,
  .cr-body,
  .cr-exit {
    white-space: normal;
    padding: 0 24px;
  }
  .cr-kicker { font-size: 14px; margin-top: 16px; }
  .cr-title { font-size: 40px; margin-top: -14px; }
  .cr-h2 { font-size: 30px; }
  .cr-body { font-size: 16px; }
  .cr-exit { font-size: 20px; text-align: center; padding-bottom: 8px; }
  .cr-meta-row {
    margin: 0 24px;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 16px;
    padding-top: 16px;
  }
  .cr-meta-row .k { font-size: 11px; margin-bottom: 6px; }
  .cr-meta-row .v { font-size: 15px; }
  .cr-credit { font-size: 12px; }
  .cr-refs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 0 24px;
  }
  .cr-ref { position: static; width: auto !important; height: auto !important; }
  .cr-ref img { height: auto; aspect-ratio: 1; }

  .cr-mode { right: 16px; bottom: 16px; padding: 9px 13px; }
}

@media (prefers-reduced-motion: reduce) {
  body.theme-creation { transition: none; }
  .cr-exit,
  .cr-exit__flicker { animation: none; opacity: 1; }
}

/* ==========================================================================
   Eye transition — the painted eye animation played full screen between the
   homepage and The Creation. Unscoped on purpose: the outgoing link lives on
   the homepage, which has no theme class. Purely additive; nothing shows
   unless js/main.js builds the overlay for a data-transition link.
   ========================================================================== */

.eye-transition {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .18s linear;
}
.eye-transition.is-on { opacity: 1; }

.eye-transition__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}
.eye-transition.is-fading .eye-transition__video {
  opacity: 0;
  transition: opacity .28s linear;
}

/* Arriving through the transition: hold the colour the clip faded out onto,
   then lift it, so the new page doesn't snap in. The class and the colour
   are set by a tiny inline script in the head so the cover is already there
   on the very first paint. */
html.eye-arrive::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 399;
  background: var(--eye-arrive-bg, #000);
  pointer-events: none;
  animation: eye-arrive-lift .55s var(--ease) forwards;
}
@keyframes eye-arrive-lift {
  from { opacity: 1; }
  to { opacity: 0; visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  html.eye-arrive::after { animation-duration: .01s; }
}

/* ==========================================================================
   Section side menu — a fixed list in the left gutter that jumps to each
   labelled section, left-aligned with the nav wordmark. It only appears
   where the page's own grid leaves a gutter wide enough to hold it, so it
   is opt-in per theme rather than a site-wide default.
   ========================================================================== */

.cs-sidenav {
  position: fixed;
  left: 32px;
  top: 118px;
  z-index: 50;
  display: none;
  flex-direction: column;
  gap: 5px;
  line-height: 1.35;
}
.cs-sidenav:not(.is-visible) { opacity: 0; pointer-events: none; }
.cs-sidenav { transition: opacity .3s var(--ease); }
.cs-sidenav a { display: block; }
.cs-sidenav a.is-current { font-weight: 700; }

/* Entries fade with distance from the section being read: full strength on
   the current one, partly faded on its neighbours above and below, and
   further faded beyond, so the list reads as scrolling past. Before any
   section is reached, everything sits at the middle step. */
.cs-sidenav a { opacity: 0.32; }
.cs-sidenav a:has(+ a.is-current),
.cs-sidenav a.is-current + a,
.cs-sidenav:not(:has(.is-current)) a { opacity: 0.6; }
.cs-sidenav a.is-current,
.cs-sidenav a:hover,
.cs-sidenav a:focus-visible { opacity: 1; }

/* Lighter and Pax centre a 1180px column, which leaves a real gutter once
   the viewport is wide enough. The menu width tracks that gutter. */
/* All four design case studies now share the same 1180px column, so the
   gutter maths is the same on each. The menu aligns with its own page's
   wordmark, which sits at 80px on Museum and 32px elsewhere. */
@media (min-width: 1400px) {
  .theme-lighter .cs-sidenav,
  .theme-pax .cs-sidenav,
  .theme-powercare .cs-sidenav,
  .theme-museum .cs-sidenav {
    display: flex;
    max-width: min(190px, calc((100vw - 1276px) / 2 + 40px));
  }
}

/* Each menu takes its page's own brand colours: a dark brand tone for the
   entries, one highlight tone for the section being read (and on hover),
   and a light tone for entries sitting over a dark band. */
.cs-sidenav { font-size: 18px; }
.theme-powercare .cs-sidenav {
  /* the page itself is black, so its "dark" tone is the brand purple */
  --sn-base: var(--pc-purple); --sn-on-dark: var(--pc-purple); --sn-hl: var(--pc-orange);
}
.theme-museum .cs-sidenav {
  --sn-base: var(--mu-purple-dark); --sn-on-dark: #ffffff; --sn-hl: var(--mu-orange);
}
.theme-lighter .cs-sidenav {
  --sn-base: var(--lt-navy); --sn-on-dark: #ffffff; --sn-hl: var(--lt-accent);
}
.theme-pax .cs-sidenav {
  --sn-base: var(--px-navy); --sn-on-dark: var(--px-cream); --sn-hl: var(--px-orange);
  --sn-hl-on-hl: var(--px-navy);
}

/* Several pages run full-bleed dark bands (the Pax hero, its navy and orange
   dividers, Lighter's prototype section) straight under the gutter. main.js
   samples what is actually behind the menu and flips it to the light tone
   there, so it never disappears into a band. */
.cs-sidenav a { color: var(--sn-base); transition: color .25s var(--ease), opacity .35s var(--ease); }
.cs-sidenav a.is-on-dark { color: var(--sn-on-dark); }
.cs-sidenav a:hover,
.cs-sidenav a:focus-visible,
.cs-sidenav a.is-current { color: var(--sn-hl); }
/* ...except over a band in the highlight colour itself, where it would vanish */
.cs-sidenav a.is-current.is-on-hl,
.cs-sidenav a.is-on-hl:hover { color: var(--sn-hl-on-hl, var(--sn-on-dark)); }

/* ==========================================================================
   theme-3d — Art section: 3D Collection (Tainted, Indifference, To Catch a
   Dream). The works were photographed on black, so the page ground is that
   same near-black (#050608, sampled from the photos) and the images sit in
   it seamlessly. Accent: the red of Tainted's resin heart (hue 3deg), lifted
   to read on the dark at small sizes (#df413a, 4.78:1). Type and spacing
   follow the case studies' shared scale: 16px caps kicker, 64px title, 48px
   work titles, 18px body, labelled details row, 1180px column.
   ========================================================================== */

body.theme-3d {
  --td-bg: #050608;
  --td-ink: #ece6e1;
  --td-muted: #8f8a86;
  --td-red: #df413a;
  --td-line: rgba(236, 230, 225, 0.16);
  background: var(--td-bg);
  color: var(--td-ink);
  font-family: "Plus Jakarta Sans", sans-serif;
}
.theme-3d .container { max-width: 1180px; padding: 0 48px; }

.theme-3d .nav { background: rgba(5, 6, 8, 0.82); }
.theme-3d .nav.is-scrolled { box-shadow: 0 1px 0 rgba(236,230,225,0.08); }
.theme-3d .nav__logo span:first-child { color: var(--td-red); }
.theme-3d .nav__links a { color: rgba(236,230,225,0.8); }
.theme-3d .nav__links a:hover,
.theme-3d .nav__links a.is-active { color: var(--td-red); }
.theme-3d .nav__links a::after { background: var(--td-red); }
.theme-3d .nav__toggle span { background: var(--td-ink); }

/* Banner: the three works as three equal panels under the nav bar, each
   photo cropped to the same frame (1440 x 709 overall, as Amanda's mock-up)
   with a thin black seam between them; each image's object-position (inline)
   picks the part of the piece that reads best. */
.td-banner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 75px;
  aspect-ratio: 1440 / 709;
  overflow: hidden; /* lets the aspect ratio win over the images' own height */
  grid-template-rows: 100%;
  background: var(--td-bg);
}
.td-banner img {
  width: 100%;
  height: 100%;
  min-width: 0;
  object-fit: cover;
  display: block;
  border-radius: 0;
}

.td-hero { padding: 72px 0 24px; }
.td-kicker {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--td-red);
  margin: 0 0 18px;
}
.td-hero h1 {
  font-size: clamp(40px, 5.4vw, 64px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--td-ink);
}

/* One section per work */
.td-work { padding: 120px 0 0; }
.td-title {
  font-size: 48px;
  font-weight: 700;
  line-height: 1.08;
  margin: 0 0 28px;
  color: var(--td-red);
}
.td-meta-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 24px;
  border-top: 1px solid var(--td-line);
  padding-top: 24px;
  margin-bottom: 32px;
}
.td-meta-row .k {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--td-muted);
  margin-bottom: 8px;
}
.td-meta-row .v { display: block; font-size: 16px; font-weight: 600; }
.td-desc {
  font-size: 18px;
  line-height: 1.7;
  color: rgba(236, 230, 225, 0.82);
  margin: 0;
}

/* Every work: text on the left at one constant width, the art right beside
   it at one constant width, 40px apart. Every photo fills the art column's
   width - so all three works reach the page's right margin - and takes its
   height from its own shape, so a tall piece simply runs taller than its
   text (both top-aligned). Dots sit centred under each frame, i.e. under
   the photo. */
.td-split {
  display: grid;
  grid-template-columns: minmax(0, 500fr) minmax(0, 544fr);
  gap: 40px;
  align-items: start;
}
.td-split__art { min-width: 0; }

/* Carousels (Tainted's four photos, Indifference's two views): auto-advance,
   loop, dots for the current photo, swipe/drag, arrow keys, and clicking
   the frame's left/right half (main.js); no arrow icons. The frame has a
   fixed shape (--frame); Tainted's photos cover it (a slight crop on the
   most extreme shapes), Indifference's two share the frame's exact shape. */
.td-carousel { outline: none; }
.td-carousel:focus-visible .td-carousel__viewport { outline: 2px solid var(--td-red); outline-offset: 6px; }
.td-carousel__viewport {
  position: relative;
  aspect-ratio: var(--frame, 3 / 2);
  overflow: hidden;
  background: var(--td-bg);
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  cursor: pointer; /* left half = previous, right half = next */
}
.td-carousel__track {
  position: absolute;
  inset: 0;
  display: flex;
  transition: transform .6s var(--ease);
}
.td-carousel.is-dragging .td-carousel__track { transition: none; }
.td-carousel__slide { flex: 0 0 100%; height: 100%; margin: 0; }
.td-carousel__slide img {
  display: block;
  width: 100%; height: 100%;
  object-fit: var(--fit, contain);
  object-position: center;
  border-radius: 0;
  pointer-events: none;
  -webkit-user-drag: none;
}
.td-carousel__dots {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 18px;
}
.td-carousel__dots button {
  width: 8px; height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(236, 230, 225, 0.28);
  cursor: pointer;
  transition: background .2s var(--ease), transform .2s var(--ease);
}
.td-carousel__dots button:hover { background: rgba(236, 230, 225, 0.6); }
.td-carousel__dots button.is-active { background: var(--td-red); transform: scale(1.35); }
@media (prefers-reduced-motion: reduce) {
  .td-carousel__track { transition: none; }
}

/* To Catch a Dream's single photo: the column's full width, its own shape */
.td-still { margin: 0; aspect-ratio: var(--ar); }
.td-still img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 0;
}

.theme-3d .cs-credit { padding-top: 120px; }
.theme-3d .cs-nextprev a { color: rgba(236,230,225,0.55); }
.theme-3d .cs-nextprev a:hover { color: var(--td-red); }

@media (max-width: 900px) {
  .td-work { padding-top: 88px; }
  .td-title { font-size: 34px; }
  .td-split { grid-template-columns: 1fr; gap: 32px; }
  .td-still { width: 80%; margin: 0 auto; }
}
@media (max-width: 700px) {
  .theme-3d .container { padding: 0 24px; }
  .td-banner { margin-top: 64px; gap: 3px; }
}

/* ==========================================================================
   theme-adherence — The Adherence Project (Prototyping case study)
   On the shared case-study scale: 16px caps kicker, 64px title, 48px H1,
   32px H2, 18px body, labelled details row, 1180/48 column.
   Palette sampled from the Med-A app itself: white ground (the app's own),
   the logo pink #e85393 for section titles (3.45:1, large text), a deeper
   cut of it for small text (#e11e72, 4.54:1), a purple from Sunday's pill
   for sub-headings (#9e3cc3, 5.4:1), and the seven day pills (Monday
   coral -> Sunday lilac) cycling through the list bullets.
   ========================================================================== */

body.theme-adherence {
  --ad-bg: #ffffff;
  --ad-ink: #2b2340;
  --ad-body: #463d57;
  --ad-logo: #e85393;     /* the Med-A logo pink: section titles */
  --ad-berry: #e11e72;    /* the same pink, deep enough for small text */
  --ad-lavender: #9e3cc3; /* Sunday's pill, deepened: sub-headings */
  --ad-muted: #77707f;
  --ad-line: rgba(43, 35, 64, 0.14);
  /* the app's day pills */
  --ad-mon: #ff9489; --ad-tue: #fcb771; --ad-wed: #ffea94; --ad-thu: #c5e5a2;
  --ad-fri: #92f4e1; --ad-sat: #83cdff; --ad-sun: #cb97df;
  background: var(--ad-bg);
  color: var(--ad-ink);
  font-family: "Plus Jakarta Sans", sans-serif;
}
.theme-adherence .container { max-width: 1180px; padding: 0 48px; }

.theme-adherence .nav { background: rgba(255, 255, 255, 0.94); }
.theme-adherence .nav.is-scrolled { box-shadow: 0 1px 0 var(--ad-line); }
.theme-adherence .nav__logo span:first-child { color: var(--ad-berry); }
.theme-adherence .nav__logo span:last-child { color: var(--ad-ink); }
.theme-adherence .nav__links a { color: var(--ad-ink); }
.theme-adherence .nav__links a:hover,
.theme-adherence .nav__links a.is-active { color: var(--ad-berry); }
.theme-adherence .nav__links a::after { background: var(--ad-berry); }
.theme-adherence .nav__toggle span { background: var(--ad-ink); }
.theme-adherence .cs-sidenav {
  --sn-base: var(--ad-muted); --sn-on-dark: #ffffff; --sn-hl: var(--ad-logo);
}

/* Hero: the Med-A cover across the column, then kicker / title / lead /
   details (the cover is a 645px original, so it isn't stretched full-bleed) */
.ad-hero { padding-top: 75px; }
.ad-hero .container { padding-top: 40px; }
.ad-cover { margin: 0 0 64px; aspect-ratio: 1290 / 884; }
.ad-kicker {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ad-berry);
  margin-bottom: 18px;
}
.ad-hero h1 {
  font-size: clamp(40px, 5.4vw, 64px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.01em;
  margin: 0 0 24px;
  color: var(--ad-ink);
}
.ad-lead {
  font-size: 24px;
  line-height: 1.5;
  font-weight: 500;
  color: var(--ad-body);
  margin: 0 0 44px;
}
.ad-meta-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); /* same five column tracks on every case study */
  gap: 24px;
  border-top: 1px solid var(--ad-line);
  padding-top: 24px;
}
.ad-meta-row .k {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ad-muted);
  margin-bottom: 8px;
}
.ad-meta-row .v { display: block; font-size: 16px; font-weight: 600; }

/* Sections and headings */
.ad-section { padding: 140px 0 0; }
.ad-h1 {
  font-size: 48px;
  font-weight: 700;
  line-height: 1.08;
  color: var(--ad-logo);
  margin: 0 0 32px;
}
.ad-h2 {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--ad-lavender);
  margin: 72px 0 24px;
}
.ad-body p {
  font-size: 18px;
  line-height: 1.7;
  color: var(--ad-body);
  margin: 0 0 18px;
}
.ad-body p:last-child { margin-bottom: 0; }
.ad-hl { color: var(--ad-berry); font-weight: 600; }
.ad-list {
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}
.ad-list li {
  position: relative;
  padding-left: 26px;
  font-size: 18px;
  line-height: 1.7;
  color: var(--ad-body);
}
.ad-list li::before {
  content: "";
  position: absolute;
  left: 4px; top: 0.66em;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ad-berry);
}
/* bullets run through the day pills, Monday onwards */
.ad-list li:nth-child(7n+1)::before { background: var(--ad-mon); }
.ad-list li:nth-child(7n+2)::before { background: var(--ad-tue); }
.ad-list li:nth-child(7n+3)::before { background: #f2cf3e; } /* Wednesday's yellow, deep enough to see on white */
.ad-list li:nth-child(7n+4)::before { background: var(--ad-thu); }
.ad-list li:nth-child(7n+5)::before { background: var(--ad-fri); }
.ad-list li:nth-child(7n+6)::before { background: var(--ad-sat); }
.ad-list li:nth-child(7n+7)::before { background: var(--ad-sun); }

/* Media */
.ad-figure { margin: 48px 0; }
.ad-figure--narrow { max-width: 620px; }
.ad-figure img,
.ad-cover img,
.ad-screen img,
.ad-row img { display: block; width: 100%; height: auto; border-radius: 0; }
.ad-caption { font-size: 14px; color: var(--ad-muted); margin-top: 12px; }
/* "My Finished Design" sits on a soft band of the app's Friday teal
   (#92f4e1 at ~25% on white) - teal is the pink logo's complement, so the
   pink headings pop on it. Full-bleed, like Pax's coloured bands. */
.ad-band {
  background: #e4fcf7;
  margin-top: 140px;
  padding: 110px 0 120px;
}
/* The film and the screen grab side by side at one height: each figure
   flexes by its aspect ratio (the phone's includes its bezel). */
.ad-demo { display: flex; gap: 40px; align-items: flex-start; }
.ad-demo figure { margin: 0; flex: var(--ar) 1 0%; min-width: 0; }
.ad-demo__film video { display: block; width: 100%; height: auto; background: var(--ad-ink); }
.ad-demo figcaption {
  margin-top: 16px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ad-lavender);
}
/* CSS phone: a dark bezel; the recording already shows the rounded screen
   and the notch, so the inner radius just matches its corners */
.ad-phone {
  background: #1d1a24;
  padding: 4%;
  border-radius: 14% / 6.6%;
  box-shadow: 0 0 0 1px rgba(43, 35, 64, 0.25);
}
.ad-phone video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 11% / 5%;
  background: #000;
}
.ad-screen { width: min(300px, 64%); margin: 48px auto; box-shadow: 0 0 0 1px var(--ad-line); }
/* pill-box photos: justified rows - each photo flexes by its own ratio, so
   the photos in a row share one height and every row spans the column */
.ad-gallery { display: grid; gap: 16px; margin: 0 0 48px; }
.ad-row { display: flex; gap: 16px; }
.ad-row figure { flex: var(--ar) 1 0%; min-width: 0; margin: 0; }

.theme-adherence .cs-credit { padding-top: 140px; color: var(--ad-muted); opacity: 1; }
.theme-adherence .cs-nextprev a { color: var(--ad-muted); }
.theme-adherence .cs-nextprev a:hover { color: var(--ad-berry); }

@media (max-width: 900px) {
  .ad-section { padding-top: 96px; }
  .ad-h1 { font-size: 36px; }
  .ad-h2 { font-size: 26px; margin-top: 56px; }
  .ad-lead { font-size: 20px; }
  .ad-gallery, .ad-row { gap: 10px; }
  .ad-band { margin-top: 96px; padding: 80px 0 88px; }
  .ad-demo { flex-direction: column; gap: 40px; }
  .ad-demo figure { flex: none; width: 100%; }
  .ad-demo__phone { width: min(300px, 76%) !important; margin: 0 auto !important; }
}
@media (max-width: 700px) {
  .theme-adherence .container { padding: 0 24px; }
  .ad-hero .container { padding-top: 48px; }
}

/* ==========================================================================
   HOMEPAGE (body.home) - the experimental, playful front door.
   Everything below is scoped to body.home, so no other page changes.
   One palette, three "modes" that the whole page flips between:
     ink   - black ground, white type, pink graphics (default)
     pink  - pink ground, black type, white graphics
     paper - white ground, black type, pink graphics
   The smiley stamp flips the hero's mode (click / tap); every later
   section declares its own mode with data-zone and the page flips to it
   as that section reaches the middle of the screen (js/main.js).
   ========================================================================== */

body.home {
  --hm-bg: var(--black);
  --hm-fg: var(--white);
  --hm-acc: var(--pink);       /* graphic fills: smiley, ribbon, stickers */
  --hm-ink: var(--black);      /* features drawn on the accent */
  --hm-line: var(--white);     /* the stamp's off-register outline */
  --hm-hl: var(--pink);        /* small highlighted text */
  --hm-blob: var(--pink);      /* multiply blob: shows only inside the white letters */
  --hm-cursor: var(--pink);
  --hm-display: "Archivo", "Plus Jakarta Sans", sans-serif;
  --hm-elastic: cubic-bezier(.34, 1.56, .64, 1);
  --hm-gut: 32px;
  background: var(--hm-bg);
  color: var(--hm-fg);
  overflow-x: clip;
  transition: background-color .7s var(--ease), color .7s var(--ease);
}
body.home[data-mode="pink"] {
  --hm-bg: var(--pink);
  --hm-fg: var(--black);
  --hm-acc: var(--white);
  --hm-line: var(--black);
  --hm-hl: var(--black);
  --hm-blob: var(--pink-deep);
  --hm-cursor: var(--black);
}
body.home[data-mode="paper"] {
  --hm-bg: var(--white);
  --hm-fg: var(--black);
  --hm-acc: var(--pink-deep);
  --hm-line: var(--black);
  --hm-hl: var(--black);
  --hm-blob: var(--pink);
  --hm-cursor: var(--black);
}

/* everything coloured by a mode token eases with the flip */
body.home .nav, body.home .nav a, body.home .nav__logo span, body.home .nav__toggle span,
body.home .hm-smiley__face, body.home .hm-smiley__ghost, body.home .hm-smiley__ink,
body.home .hm-smiley__line, body.home .hm-blob path, body.home .hm-deco, body.home .hm-mark,
body.home .hm-ribbon, body.home .hm-card__sticker, body.home .hm-cursor,
body.home .form-field, body.home .form-submit, body.home .contact-item__icon,
body.home .site-footer, body.home .hm-ch {
  transition-property: color, background-color, fill, stroke, border-color, transform, font-stretch, opacity;
  transition-duration: .7s;
  transition-timing-function: var(--ease);
}
/* a View Transition snapshot must see the finished colours, not a tween */
body.home.hm-instant, body.home.hm-instant * { transition: none !important; }
html.hm-vt::view-transition-old(root),
html.hm-vt::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
html.hm-vt::view-transition-new(root) { z-index: 2; }

body.home .hm-intro { padding: 0; }

/* ---------- Nav on the homepage: no frosted bar, takes the mode ---------- */
body.home .nav { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
body.home .nav.is-scrolled { background: var(--hm-bg); box-shadow: 0 2px 0 var(--hm-fg); }
body.home .nav__logo { font-family: var(--hm-display); font-weight: 900; font-stretch: 112%; }
body.home .nav__logo span:first-child { color: var(--hm-hl); }
body.home .nav__logo span:last-child { color: var(--hm-fg); }
body.home .nav__links { font-family: var(--hm-display); font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: .06em; }
body.home .nav__links a { color: var(--hm-fg); }
body.home .nav__links a.is-active { color: var(--hm-hl); }
body.home .nav__links a::after { background: var(--hm-hl); height: 3px; }
body.home .nav__toggle span { background: var(--hm-fg); }
/* Works dropdown: Selected Works (homepage reel) / All Works (works.html) */
body.home .nav__drop { position: relative; }
body.home .nav__drop-top { display: block; } /* a block like Home / Contact, so all three share a baseline */
body.home .nav__drop::before { content: ""; position: absolute; left: -12px; right: -12px; top: 100%; height: 16px; } /* hover bridge */
body.home .nav__menu {
  position: absolute;
  top: calc(100% + 14px);
  left: -16px;
  display: flex;
  flex-direction: column;
  min-width: 200px;
  padding: 8px;
  background: var(--hm-bg);
  border: 2px solid var(--hm-fg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) rotate(-1.5deg);
  transition: opacity .2s var(--ease), visibility .2s, transform .4s var(--hm-elastic);
}
body.home .nav__drop:hover .nav__menu,
body.home .nav__drop:focus-within .nav__menu { opacity: 1; visibility: visible; transform: translateY(0) rotate(-1.5deg); }
body.home .nav__menu a { padding: 9px 12px; white-space: nowrap; }
body.home .nav__menu a::after { display: none; }
body.home .nav__menu a:hover,
body.home .nav__menu a:focus-visible,
body.home .nav__menu a[aria-current="page"] { background: var(--hm-acc); color: var(--hm-ink); }
@media (max-width: 820px) {
  body.home .nav__drop::before { display: none; }
  body.home .nav__menu {
    position: static; opacity: 1; visibility: visible; transform: none;
    min-width: 0; padding: 10px 0 0 16px; background: none; border: 0; gap: 4px;
  }
  body.home .nav__menu a { font-size: 15px; padding: 4px 0; }
  body.home .nav__menu a:hover, body.home .nav__menu a[aria-current="page"] { background: none; color: var(--hm-hl); }
}
@media (max-width: 820px) {
  body.home .nav__links { background: var(--hm-bg); box-shadow: -2px 0 0 var(--hm-fg); }
}

/* small inline marks from the shared vocabulary */
.hm-mark { width: .9em; height: .9em; fill: var(--hm-acc); color: var(--hm-acc); vertical-align: -.1em; overflow: visible; --hm-mark-ink: var(--hm-ink); }
.hm-mark--arrow { fill: none; color: currentColor; width: 1.1em; }

/* ---------- Hero ---------- */
.hm-hero {
  --p: 0;          /* 0 -> 1 as the hero scrolls away (js) */
  --mx: 0; --my: 0; /* pointer, -1..1 across the screen (js) */
  --hm-t: min(18vw, 36vh); /* WELCOME (5.97em) bleeds just past both edges */
  --hm-top: calc(78px + 6vh); /* where the first line of type starts */
  position: relative;
  background: var(--hm-bg); /* the blob's multiply needs a ground inside the isolated hero */
  height: 100vh;
  height: 100svh;
  min-height: 600px;
  overflow: clip;
  isolation: isolate;
}

.hm-title {
  position: absolute;
  inset: 0;
  margin: 0;
  z-index: 1;
  font-family: var(--hm-display);
  font-weight: 900;
  font-stretch: 112%;
  font-size: var(--hm-t);
  line-height: .8;
  letter-spacing: -.035em;
  text-transform: uppercase;
  pointer-events: none;
}
.hm-title__row {
  position: absolute;
  display: flex;
  white-space: nowrap;
  pointer-events: auto;
  will-change: transform;
}
.hm-title__row--1 { top: calc(var(--hm-top)); left: -.06em; transform: translate3d(calc(var(--p) * -22vw), 0, 0); }
.hm-title__row--2 { top: calc(var(--hm-top) + .83em); right: -.05em; transform: translate3d(calc(var(--p) * 16vw), 0, 0); }
.hm-brk { display: none; }

/* letters: each one is a little object */
.hm-word { display: inline-block; white-space: nowrap; }
.hm-ch { display: inline-block; transition-duration: .55s; transition-timing-function: var(--hm-elastic); }
.hm-title .hm-ch:hover,
.hm-title .hm-ch.is-poked { color: var(--hm-acc); font-stretch: 125%; transform: translateY(-.05em) rotate(-5deg); }
.hm-title .hm-ch:has(+ .hm-ch:hover) { transform: translateX(-.04em) rotate(2deg); }
.hm-title .hm-ch:hover + .hm-ch { transform: translateX(.04em) rotate(3deg); }
.hm-title__bang {
  display: inline-block;
  color: var(--hm-acc);
  font-style: italic;
  transform: rotate(9deg) translateX(.02em);
  transform-origin: 50% 90%;
}
.hm-title__row--2:hover .hm-title__bang { animation: hm-jiggle .5s var(--ease) 2; }
@keyframes hm-jiggle { 0%,100% { transform: rotate(9deg); } 30% { transform: rotate(-8deg) scale(1.08); } 65% { transform: rotate(16deg); } }

/* blob: multiplies over the page, so on black it only shows inside the
   white letters - a drifting pink reveal that leans toward the pointer */
.hm-blob {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  mix-blend-mode: multiply;
  width: 34vw;
  left: 6vw;
  top: 4vh;
  transform: translate3d(calc(var(--mx) * 5vw), calc(var(--my) * 4vh + var(--p) * 20vh), 0);
  transition: transform 1.2s var(--ease);
}
.hm-blob path { fill: var(--hm-blob); transform-origin: 50% 50%; animation: hm-spin 46s linear infinite; }
@keyframes hm-spin { to { transform: rotate(360deg); } }

/* little note under the name */
.hm-hero__note {
  position: absolute;
  z-index: 3;
  left: var(--hm-gut);
  top: calc(var(--hm-top) + var(--hm-t) * .98);
  max-width: 300px;
  font-family: var(--hm-display);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.45;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.hm-hero__role { display: flex; align-items: center; gap: 8px; }
.hm-hero__role .hm-mark { width: 22px; height: 22px; flex: none; }
.hm-hero__hello { font-style: italic; font-weight: 800; font-size: 22px; letter-spacing: -.01em; text-transform: none; margin: 6px 0 14px; }
.hm-hero__see {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--hm-hl);
  border-bottom: 2px solid currentColor;
  padding-bottom: 2px;
}
.hm-hero__see .hm-mark--arrow { transform: rotate(90deg); }
/* "See Works" opens two ways in, like the nav's Works menu */
.hm-see { position: relative; display: inline-block; }
.hm-see::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 12px; } /* hover bridge */
.hm-see__menu {
  position: absolute; z-index: 6;
  top: calc(100% + 12px); left: -10px;
  display: flex; flex-direction: column;
  min-width: 210px; padding: 8px;
  background: var(--hm-bg); border: 2px solid var(--hm-fg);
  opacity: 0; visibility: hidden;
  transform: translateY(-8px) rotate(-1.5deg);
  transition: opacity .2s var(--ease), visibility .2s, transform .4s var(--hm-elastic);
}
.hm-see:hover .hm-see__menu, .hm-see:focus-within .hm-see__menu { opacity: 1; visibility: visible; transform: translateY(0) rotate(-1.5deg); }
.hm-see__item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px; white-space: nowrap; }
.hm-see__item:hover, .hm-see__item:focus-visible { background: var(--hm-acc); color: var(--hm-ink); }
.hm-mark--down { transform: rotate(90deg); }
/* touch: no hover, so both ways in simply show */
@media (hover: none) {
  .hm-see__top { display: none; }
  .hm-see::after { display: none; }
  .hm-see__menu { position: static; opacity: 1; visibility: visible; transform: none; flex-direction: row; gap: 18px; min-width: 0; padding: 0; background: none; border: 0; }
  .hm-see__item { padding: 0 0 2px; border-bottom: 2px solid currentColor; color: var(--hm-hl); }
  .hm-see__item:hover { background: none; color: var(--hm-hl); }
}

/* ---------- The smiley stamp ---------- */
.hm-smiley-wrap {
  --hm-sd: min(29vw, 48vh);
  position: absolute;
  z-index: 4;
  width: var(--hm-sd);
  aspect-ratio: 1;
  left: 22vw;
  top: calc(50% + 2vh - var(--hm-sd) * .42);
  transform:
    translate3d(calc(var(--mx) * -12px), calc(var(--p) * -14vh + var(--my) * -10px), 0)
    rotate(calc(-12deg + var(--p) * 70deg))
    scale(calc(1 + var(--p) * .3));
}
.hm-smiley {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border-radius: 50%;
  animation: hm-wobble 6.5s ease-in-out infinite;
  -webkit-tap-highlight-color: transparent;
}
.hm-smiley:focus-visible { outline: 3px dashed var(--hm-fg); outline-offset: 8px; }
@keyframes hm-wobble {
  0%, 100% { transform: rotate(0deg) scale(1, 1); }
  30%      { transform: rotate(4deg) scale(1.025, .975); }
  65%      { transform: rotate(-3deg) scale(.98, 1.02); }
}
.hm-smiley__svg { width: 100%; height: 100%; overflow: visible; display: block; transition: transform .6s var(--hm-elastic); }
.hm-smiley:hover .hm-smiley__svg { transform: scale(1.05) rotate(-4deg); }
.hm-smiley.is-squish .hm-smiley__svg { animation: hm-squish .7s var(--hm-elastic); }
@keyframes hm-squish {
  0% { transform: scale(1); }
  25% { transform: scale(1.18, .8) rotate(6deg); }
  55% { transform: scale(.9, 1.12) rotate(-5deg); }
  100% { transform: scale(1); }
}
.hm-smiley__face { fill: #0a0a0a; } /* a black stamp, so the white-and-pink avatar reads in every mode */
/* Amanda's doodled avatar sits on the stamp; on hover / focus (and now and
   then on its own) it swaps to her winking drawing */
.hm-avatar {
  position: absolute; z-index: 1;
  left: 0; top: 10%; width: 100%;
  pointer-events: none;
  transform: rotate(8deg); /* stand her up a little against the stamp's tilt */
  transition: translate .6s var(--ease), rotate .6s var(--ease);
}
/* the drawing as two recolourable layers (Amanda's line art + its pink
   fill), masked from PNGs and painted in the page's own colours: white
   lines + pink fill on black, black + white on pink, black + pink on white */
.hm-av { position: relative; display: block; aspect-ratio: 500 / 430; }
.hm-av > i {
  position: absolute; inset: 0;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; /* the image is set inline, so its path is relative to the page */
  transition: background-color .7s var(--ease);
}
.hm-av__fill { background: var(--hm-acc); }
.hm-av__lines { background: var(--hm-fg); }
.hm-avatar__wink { position: absolute; inset: 0; opacity: 0; }
.hm-smiley:hover .hm-avatar__wink, .hm-smiley:focus-visible .hm-avatar__wink, .hm-avatar.is-winking .hm-avatar__wink { opacity: 1; }
.hm-smiley:hover .hm-avatar__base, .hm-smiley:focus-visible .hm-avatar__base, .hm-avatar.is-winking .hm-avatar__base { opacity: 0; }
.hm-smiley__ghost { fill: none; stroke: var(--hm-line); stroke-width: 3.5; }
.hm-smiley__ink { fill: var(--hm-ink); }
.hm-smiley__shine { fill: var(--white); }
.hm-smiley__line { fill: none; stroke: var(--hm-ink); stroke-width: 21; stroke-linecap: round; stroke-linejoin: round; }
.hm-smiley__line--thin { stroke-width: 10; }
.hm-smiley__eyes { transition: transform .25s var(--ease); }
.hm-smiley__blink { transform-box: fill-box; transform-origin: 50% 55%; transition: transform .09s ease-in; }
.hm-smiley__blink.is-shut { transform: scaleY(.08); }
/* hover / focus: a wink - the right eye closes into a happy arc */
.hm-smiley__eye { transform-box: fill-box; transform-origin: 50% 50%; transition: transform .14s ease-out; }
.hm-smiley__wink { stroke-width: 12; opacity: 0; transition: opacity .14s ease-out; }
.hm-smiley:hover .hm-smiley__eye--wink, .hm-smiley:focus-visible .hm-smiley__eye--wink { transform: scaleY(0); }
.hm-smiley:hover .hm-smiley__wink, .hm-smiley:focus-visible .hm-smiley__wink { opacity: 1; }
.hm-smiley__mouth { transform-box: fill-box; transform-origin: 50% 0; transition: transform .5s var(--hm-elastic); }
.hm-smiley:hover .hm-smiley__mouth { transform: scale(1.1, 1.3); }

.hm-smiley__hint {
  position: absolute;
  left: -42%;
  bottom: 4%;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: 2px;
  font-family: var(--hm-display);
  font-style: italic;
  font-weight: 800;
  font-size: 15px;
  white-space: nowrap;
  color: var(--hm-fg);
  transform: rotate(14deg);
  pointer-events: none;
}
.hm-smiley__hint .hm-mark--hint { width: 46px; height: 46px; color: var(--hm-fg); transform: rotate(-24deg); margin-left: 30px; }

/* ---------- Hero decorations: each on its own rhythm ---------- */
.hm-deco { position: absolute; z-index: 3; pointer-events: none; fill: var(--hm-acc); color: var(--hm-fg); overflow: visible; }
.hm-deco--star1 { width: clamp(44px, 5vw, 84px); height: clamp(44px, 5vw, 84px); right: 7vw; top: calc(var(--hm-top) + var(--hm-t) * .95); animation: hm-twinkle 5s ease-in-out infinite; }
.hm-deco--star2 { width: 30px; height: 30px; left: 9vw; top: calc(var(--hm-top) + var(--hm-t) * 2); animation: hm-twinkle 5s ease-in-out -2.5s infinite; }
@keyframes hm-twinkle { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(.6) rotate(45deg); } }
/* static on purpose: the one mark that never moves */
/* the heart riding the smiley's edge is the colour switch: it beats now
   and then to invite a click, and pops when clicked */
.hm-heart {
  position: absolute; z-index: 5;
  width: 17%; height: 17%; right: -3%; top: 4%;
  padding: 0;
  transform: rotate(16deg);
  transition: transform .45s var(--hm-elastic);
  -webkit-tap-highlight-color: transparent;
}
.hm-heart__svg {
  display: block; width: 100%; height: 100%; overflow: visible;
  fill: var(--hm-fg); stroke: var(--hm-bg); stroke-width: 7px; paint-order: stroke;
  transition: fill .7s var(--ease), stroke .7s var(--ease);
  animation: hm-beat 2.8s ease-in-out infinite;
}
.hm-heart:hover, .hm-heart:focus-visible { transform: rotate(2deg) scale(1.2); }
.hm-heart:focus-visible { outline: 3px dashed var(--hm-fg); outline-offset: 4px; border-radius: 50%; }
.hm-heart.is-pop .hm-heart__svg { animation: hm-heart-pop .6s var(--hm-elastic); }
@keyframes hm-beat { 0%, 30%, 100% { transform: scale(1); } 8% { transform: scale(1.14); } 16% { transform: scale(.98); } 22% { transform: scale(1.08); } }
@keyframes hm-heart-pop { 0% { transform: scale(1); } 35% { transform: scale(1.45) rotate(-14deg); } 100% { transform: scale(1); } }.hm-deco--loop { width: clamp(130px, 15vw, 240px); right: 4vw; top: calc(var(--hm-top) + var(--hm-t) * 1.62); stroke-dasharray: 900; stroke-dashoffset: 900; animation: hm-draw 1.6s var(--ease) .6s forwards; }
@keyframes hm-draw { to { stroke-dashoffset: 0; } }

/* ---------- Ribbon ---------- */
.hm-ribbon {
  position: absolute;
  z-index: 2;
  left: -6vw;
  right: -6vw;
  bottom: 6vh;
  background: var(--hm-acc);
  color: var(--hm-ink);
  transform: rotate(-3.5deg);
  overflow: hidden;
}
.hm-ribbon__move { transform: translate3d(calc(var(--p) * -30vw), 0, 0); }
.hm-ribbon__track {
  display: flex;
  align-items: center;
  gap: .6em;
  width: max-content;
  padding: .42em 0;
  font-family: var(--hm-display);
  font-weight: 800;
  font-stretch: 112%;
  font-size: clamp(16px, 2vw, 30px);
  text-transform: uppercase;
  white-space: nowrap;
  animation: hero-marquee 48s linear infinite;
}
.hm-ribbon .hm-mark { fill: var(--hm-ink); --hm-mark-ink: var(--hm-acc); width: .85em; height: .85em; }

/* ---------- About (opens from the smiley's "see about me") ----------
   Five short scenes in the site's own vocabulary: big Rubik Mono One type,
   Archivo labels, tilted photo "stickers", the mode flips per scene.
   Motion: lines rise out of a mask and photos pop in as they enter
   ([data-anim] -> .is-in), the bio's words fill in with scroll
   ([data-scrub]), the "I play / I shoot / I make" lines float their photos
   beside the cursor, the photo strip slides with scroll, and the
   personality ring turns. */
.hm-about[hidden] { display: none; }
.hm-about.is-opening .hm-ab-hi { animation: hm-about-in .8s var(--hm-elastic); }
@keyframes hm-about-in { from { opacity: 0; transform: translateY(60px) rotate(-1.5deg); } to { opacity: 1; transform: none; } }
.hm-about section { position: relative; overflow: clip; }
/* a zero-height sticky bar, so Close stays on screen through all five scenes, just under the nav */
.hm-about__bar { position: sticky; top: 0; z-index: 6; height: 0; }
.hm-about__close {
  position: absolute; top: 88px; right: var(--hm-gut);
  background: var(--hm-bg); /* reads over whatever scene scrolls beneath it */
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border: 2px solid var(--hm-fg);
  font-family: var(--hm-display); font-weight: 800; font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--hm-fg); transform: rotate(2deg);
  transition: background-color .3s var(--ease), color .3s var(--ease), transform .4s var(--hm-elastic);
}
.hm-about__close span { font-size: 18px; line-height: 1; }
.hm-about__close:hover, .hm-about__close:focus-visible { background: var(--hm-fg); color: var(--hm-bg); transform: rotate(-2deg); }

.hm-ab-label {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--hm-display); font-weight: 800; font-size: 13px;
  letter-spacing: .12em; text-transform: uppercase;
}
.hm-tight { margin: 0 -.3em 0 -.22em; } /* monospaced punctuation sits in a full-width cell */
.hm-ab-label .hm-mark { width: 18px; height: 18px; }
.hm-ab-h { margin: 0; font-size: clamp(36px, 5.4vw, 92px); line-height: .9; text-transform: uppercase; }

/* 1. hello */
.hm-ab-hi { min-height: 100vh; min-height: 100svh; padding: 13vh var(--hm-gut) 10vh; }
.hm-ab-hi__title { position: relative; z-index: 2; width: fit-content; margin: 5vh 0 0; font-size: clamp(44px, 7.6vw, 150px); line-height: .9; text-transform: uppercase; }
.hm-ab-line { display: block; width: fit-content; overflow: hidden; padding-bottom: .04em; } /* fit the text, so the lines never sit over the avatar */
.hm-ab-line > span { display: inline-block; transform: translateY(105%); transition: transform 1s var(--ease); }
.hm-ab-line--2 { padding-left: 9vw; }
.hm-ab-line--3 { padding-left: 2.5vw; }
.is-in .hm-ab-line > span { transform: none; }
.is-in .hm-ab-line--2 > span { transition-delay: .12s; }
.is-in .hm-ab-line--3 > span { transition-delay: .24s; }
.hm-ab-pic { position: relative; margin: 0; overflow: hidden; border: 2px solid var(--hm-fg); background: #161616; }
.hm-ab-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hm-ab-pic[data-anim] { opacity: 0; transform: translateY(40px) rotate(var(--r, 0deg)) scale(.92); transition: opacity .6s var(--ease), transform 1s var(--hm-elastic); }
.hm-ab-pic[data-anim].is-in { opacity: 1; transform: rotate(var(--r, 0deg)); }
/* Amanda's "working" avatar, unframed; it looks up and smiles on hover */
.hm-ab-avatar {
  position: absolute; z-index: 1; right: 6vw; top: 17vh;
  width: clamp(260px, 36vw, 560px); margin: 0;
  --r: 3deg;
}
.hm-ab-avatar .hm-av { aspect-ratio: 530 / 410; }
.hm-ab-avatar__hover { position: absolute !important; inset: 0; opacity: 0; } /* exactly over the base drawing */
.hm-ab-avatar:hover .hm-ab-avatar__hover { opacity: 1; }
.hm-ab-avatar:hover .hm-ab-avatar__base { opacity: 0; }
.hm-ab-avatar[data-anim] { opacity: 0; transform: translateY(40px) rotate(var(--r)) scale(.92); transition: opacity .6s var(--ease) .3s, transform 1s var(--hm-elastic) .3s; }
.hm-ab-avatar[data-anim].is-in { opacity: 1; transform: rotate(var(--r)); }
.hm-ab-hi__me { position: relative; z-index: 2; margin: 6vh 0 0 4vw; max-width: 30ch; font-family: var(--hm-display); font-weight: 800; font-style: italic; font-size: clamp(20px, 1.9vw, 30px); line-height: 1.25; }
.hm-ab-hi__me[data-anim] { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease) .45s, transform .8s var(--ease) .45s; }
.hm-ab-hi__me.is-in { opacity: 1; transform: none; }
.hm-ab-hi__star { width: clamp(48px, 5vw, 84px); height: clamp(48px, 5vw, 84px); left: 46vw; top: 16vh; animation: hm-twinkle 5s ease-in-out infinite; }

/* 2. the short version */
.hm-ab-bio { padding: 18vh var(--hm-gut) 20vh; }
.hm-ab-bio__text {
  margin: 5vh 0 0; max-width: 23ch;
  font-family: var(--hm-display); font-weight: 800; font-stretch: 112%;
  font-size: clamp(30px, 4.6vw, 76px); line-height: 1.08; letter-spacing: -.02em;
}
.hm-ab-bio__text .hm-sw { opacity: .16; transition: opacity .25s linear; }
.hm-ab-bio__text .hm-sw.is-lit { opacity: 1; }

/* 3. off the screen */
.hm-ab-do { padding: 16vh var(--hm-gut) 14vh; }
.hm-ab-rows { margin: 5vh 0 0; padding: 0; list-style: none; border-top: 2px solid var(--hm-fg); }
.hm-ab-row {
  position: relative;
  display: grid; grid-template-columns: 70px minmax(0, auto) 1fr; align-items: baseline; column-gap: 3vw;
  padding: 3.2vh 0 2.8vh;
  border-bottom: 2px solid var(--hm-fg);
}
.hm-ab-row__num { font-family: var(--hm-display); font-weight: 800; font-size: 14px; letter-spacing: .1em; }
.hm-ab-row__verb { font-size: clamp(40px, 7.4vw, 130px); line-height: .9; text-transform: uppercase; white-space: nowrap; transition: color .35s var(--ease), transform .6s var(--hm-elastic); }
.hm-ab-row__what { font-family: var(--hm-display); font-weight: 700; font-size: clamp(16px, 1.5vw, 24px); }
.hm-ab-row[data-anim] { opacity: 0; transform: translateX(-40px); transition: opacity .6s var(--ease), transform .8s var(--ease); }
.hm-ab-row[data-anim]:nth-child(2) { transition-delay: .1s; }
.hm-ab-row[data-anim]:nth-child(3) { transition-delay: .2s; }
.hm-ab-row.is-in { opacity: 1; transform: none; }
.hm-ab-row__pics { display: none; }
/* touch: no hover, so the photos sit in the row */
@media (hover: none) {
  .hm-ab-row { grid-template-columns: 40px 1fr; row-gap: 8px; }
  .hm-ab-row__what { grid-column: 2; }
  .hm-ab-row__pics { grid-column: 1 / -1; display: flex; gap: 8px; margin-top: 12px; overflow-x: auto; scrollbar-width: none; }
  .hm-ab-row__pics img { flex: none; height: 150px; width: auto; border: 2px solid var(--hm-fg); }
}
/* mouse: the line nudges over and its photo floats by the cursor (js) */
@media (hover: hover) and (pointer: fine) {
  .hm-ab-row.is-in:hover .hm-ab-row__verb { color: var(--hm-acc); transform: translateX(14px); }
}
.hm-ab-float {
  position: fixed; z-index: 60; left: 0; top: 0;
  width: clamp(180px, 17vw, 270px); aspect-ratio: 3 / 4;
  translate: 28px -80%; /* up and to the right of the cursor */
  pointer-events: none; overflow: hidden;
  border: 2px solid var(--black); background: #161616;
  opacity: 0; transform-origin: 0 100%;
  transition: opacity .25s var(--ease);
}
.hm-ab-float.is-on { opacity: 1; }
.hm-ab-float img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* 4. photos + jewelry */
.hm-ab-shots { padding: 16vh 0 18vh; }
.hm-ab-shots__head, .hm-ab-made__head { display: flex; flex-direction: column; gap: 16px; padding: 0 var(--hm-gut); }
.hm-ab-strip { margin-top: 7vh; overflow: hidden; }
.hm-ab-strip__track { --x: 0px; display: flex; align-items: center; gap: 2.4vw; width: max-content; padding: 4vh var(--hm-gut); transform: translate3d(var(--x), 0, 0); will-change: transform; }
.hm-ab-shot { flex: none; margin: 0; width: clamp(200px, 22vw, 340px); aspect-ratio: 3 / 4; overflow: hidden; border: 2px solid var(--hm-fg); transform: rotate(var(--r, -2deg)); transition: transform .6s var(--hm-elastic); }
.hm-ab-shot:nth-child(even) { --r: 2.5deg; margin-top: 6vh; }
.hm-ab-shot:nth-child(3n) { --r: -3.5deg; }
.hm-ab-shot:hover { transform: rotate(0deg) scale(1.04); }
.hm-ab-shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hm-ab-made { position: relative; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 4vw; margin-top: 14vh; padding: 0 var(--hm-gut); }
.hm-ab-pic--necklace { width: clamp(200px, 23vw, 360px); aspect-ratio: 911 / 1200; --r: -4deg; }
.hm-ab-pic--ring2 { width: clamp(160px, 17vw, 270px); aspect-ratio: 906 / 1200; --r: 5deg; margin-top: 12vh; transition-delay: .15s; }

/* 5. to relax + personality */
.hm-ab-me { display: grid; grid-template-columns: 1fr minmax(0, 520px); align-items: center; gap: 6vw; padding: 16vh var(--hm-gut) 18vh; }
.hm-ab-chips { display: flex; flex-wrap: wrap; gap: 14px; margin: 5vh 0 0; padding: 0; list-style: none; }
.hm-ab-chips li {
  padding: 12px 22px; border: 2px solid var(--hm-fg); border-radius: 999px;
  font-family: var(--hm-display); font-weight: 800; font-size: clamp(16px, 1.6vw, 24px); text-transform: uppercase;
  background: var(--hm-bg);
  transform: rotate(var(--r, -3deg)) scale(.4); opacity: 0;
  transition: transform .7s var(--hm-elastic), opacity .3s var(--ease), background-color .3s, color .3s;
}
.hm-ab-chips li:nth-child(2) { --r: 2deg; transition-delay: .12s; }
.hm-ab-chips li:nth-child(3) { --r: -1.5deg; transition-delay: .24s; }
.hm-ab-chips.is-in li { transform: rotate(var(--r, -3deg)); opacity: 1; }
.hm-ab-chips li:hover { background: var(--hm-acc); color: var(--hm-ink); transform: rotate(0deg) scale(1.06); transition-delay: 0s; }
.hm-ab-ring { position: relative; width: 100%; aspect-ratio: 1; }
.hm-ab-ring__text { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; animation: hm-spin 26s linear infinite; }
.hm-ab-ring:hover .hm-ab-ring__text { animation-duration: 9s; }
.hm-ab-ring__text text { font-family: "Rubik Mono One", var(--hm-display); font-size: 25px; letter-spacing: .02em; text-transform: uppercase; fill: var(--hm-fg); }
.hm-ab-ring__smile { position: absolute; left: 27%; top: 27%; width: 46%; height: 46%; fill: var(--hm-acc); --hm-mark-ink: var(--hm-ink); animation: hm-wobble 6.5s ease-in-out infinite; }

/* ---------- Interlude: "Selected Work" slides across while pinned ---------- */
.hm-intro { position: relative; height: 230vh; --q: 0; }
.hm-intro__stick {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hm-intro__title {
  margin: 0;
  font-family: var(--hm-display);
  font-weight: 900;
  font-stretch: 112%;
  font-size: 21vw;
  line-height: .8;
  letter-spacing: -.035em;
  text-transform: uppercase;
}
.hm-intro__line { display: block; white-space: nowrap; will-change: transform; }
.hm-intro__line--1 { transform: translate3d(calc(40vw - var(--q) * 95vw), 0, 0); }
.hm-intro__line--2 { transform: translate3d(calc(-75vw + var(--q) * 80vw), 0, 0); }
.hm-intro__line .hm-mark { width: .62em; height: .62em; vertical-align: .02em; }
.hm-intro__line--1 .hm-mark { transform: rotate(calc(var(--q) * 360deg)); }
.hm-intro__text {
  position: absolute;
  left: var(--hm-gut);
  bottom: 7vh;
  max-width: 340px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
}
.hm-intro__hearts {
  width: clamp(110px, 13vw, 200px);
  right: 9vw;
  bottom: 8vh;
  --hm-mark-ink: var(--hm-ink);
  transform: rotate(calc(-10deg + var(--q) * 24deg)) scale(calc(.6 + var(--q) * .7));
  animation: hm-hearts-beat 1.6s ease-in-out infinite;
  transform-origin: 50% 60%;
}
/* a little double heartbeat, on the separate scale property so the scroll transform above still applies */
@keyframes hm-hearts-beat { 0%, 40%, 100% { scale: 1; } 12% { scale: 1.1; } 26% { scale: 1.05; } }
/* All Works sits beside the hearts at the end of the interlude */
.hm-intro__all { position: absolute; z-index: 2; bottom: calc(8vh + 2vw); right: calc(9vw + clamp(110px, 13vw, 200px) + 64px); }

/* ---------- Selected work: two looping reels (after Redondo) ----------
   Design and art each get one slim row of plain 4:3 cards, name and
   category underneath, so both fit on about one screen. The rows drift in
   opposite directions and loop (js); hover pauses a row, and drag, swipe
   or trackpad scroll it by hand. The only play left on a card is a small
   mark that pops onto the image on hover. */
.hm-sel { padding: 7vh var(--hm-gut) 13vh; overflow: clip; }
.hm-sel__head { display: flex; flex-direction: column; gap: 12px; margin-bottom: 4px; }
.hm-sel__head--art { margin-top: 4.5vh; }
.hm-sel__title .hm-mark { width: .55em; height: .55em; vertical-align: .08em; }
.hm-sel__all {
  display: inline-flex; align-items: center; gap: 10px; flex: none;
  padding: 11px 18px;
  border: 2px solid var(--hm-fg);
  font-family: var(--hm-display); font-weight: 800; font-stretch: 112%;
  font-size: 14px; letter-spacing: .06em; text-transform: uppercase;
  transform: rotate(-2deg);
  transition: background-color .3s var(--ease), color .3s var(--ease), transform .45s var(--hm-elastic);
}
.hm-sel__all:hover, .hm-sel__all:focus-visible { background: var(--hm-fg); color: var(--hm-bg); transform: rotate(2deg) scale(1.04); }
.hm-sel__all .hm-mark--arrow { width: 1.3em; height: 1.3em; }

/* All Works page (works.html): the earlier layout - design in an even
   grid, art underneath */
.hm-all { padding: 140px var(--hm-gut) 2vh; overflow: clip; }
.hm-all__title {
  margin: 0;
  font-family: var(--hm-display); font-weight: 900; font-stretch: 112%;
  font-size: clamp(44px, 11.5vw, 210px); line-height: .82; letter-spacing: -.035em;
  text-transform: uppercase; white-space: nowrap;
}
.hm-all__title .hm-mark { width: .6em; height: .6em; vertical-align: .04em; }
.hm-all__title .hm-ch:hover { color: var(--hm-acc); font-stretch: 125%; transform: translateY(-.05em) rotate(-5deg); }
.hm-sel--all { padding-top: 8vh; }
.hm-sel--all .hm-sel__head { margin-bottom: 28px; }
.hm-sel--all .hm-sel__head--art { margin-top: 14vh; }
.hm-sel__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 64px 28px; align-items: start; }
@media (min-width: 761px) and (max-width: 1024px) {
  .hm-sel__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.hm-sel__label {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--hm-display); font-weight: 800; font-size: 13px;
  letter-spacing: .12em; text-transform: uppercase;
}
.hm-sel__label .hm-mark { width: 18px; height: 18px; }
.hm-sel__title {
  margin: 0;
  font-family: var(--hm-display); font-weight: 900; font-stretch: 112%;
  font-size: clamp(30px, 3.2vw, 50px); line-height: .9; letter-spacing: -.03em;
  text-transform: uppercase;
}
.hm-sel__count { font-weight: 600; font-stretch: 100%; font-size: .42em; letter-spacing: 0; vertical-align: .9em; }
/* the row bleeds to both screen edges; padding leaves room for the
   hover mark above each card */
.hm-reel {
  margin: 0 calc(var(--hm-gut) * -1);
  padding: 28px var(--hm-gut) 6px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  cursor: grab;
}
.hm-reel::-webkit-scrollbar { display: none; }
.hm-reel.is-dragging { cursor: grabbing; }
.hm-reel.is-dragging .hm-card { pointer-events: none; }
.hm-reel__track { display: flex; gap: 24px; width: max-content; }
.hm-reel .hm-card { flex: none; width: clamp(280px, min(40vw, 64vh), 640px); }
.hm-reel .hm-card__name { font-size: clamp(18px, 1.7vw, 26px); }
.hm-reel .hm-card__sticker { top: -16px; right: -8px; width: 48px; height: 48px; }
.hm-reel .hm-card__sticker--hearts { width: 62px; height: auto; }
.hm-reel img { -webkit-user-drag: none; user-select: none; }

.hm-card { position: relative; display: block; }
.hm-card__media { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 3; background: #ececec; }
.hm-card__media img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .9s var(--ease), opacity .5s var(--ease);
}
.hm-card:hover .hm-card__media img, .hm-card:focus-visible .hm-card__media img { transform: scale(1.05); }
.hm-card__media img.hm-card__alt { opacity: 0; }
.hm-card:hover .hm-card__media img.hm-card__alt, .hm-card:focus-visible .hm-card__media img.hm-card__alt { opacity: 1; }
.hm-card__name {
  display: block; margin-top: 12px;
  font-family: var(--hm-display); font-weight: 800; font-stretch: 112%;
  font-size: clamp(16px, 1.4vw, 21px); line-height: 1.1; text-transform: uppercase;
  text-decoration: underline; text-decoration-color: transparent;
  text-decoration-thickness: 3px; text-underline-offset: 5px;
  transition: text-decoration-color .3s var(--ease);
}
.hm-card:hover .hm-card__name, .hm-card:focus-visible .hm-card__name { text-decoration-color: var(--hm-acc); }
.hm-card__meta { display: block; margin-top: 6px; font-family: var(--hm-display); font-weight: 600; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; opacity: .6; }
.hm-card__sticker {
  position: absolute; z-index: 2;
  width: 58px; height: 58px; top: -20px; right: -14px;
  fill: var(--hm-acc); color: var(--hm-acc); overflow: visible;
  --hm-mark-ink: var(--hm-ink);
  transform: scale(0) rotate(-90deg);
  transition-duration: .6s; transition-timing-function: var(--hm-elastic);
  pointer-events: none;
}
.hm-card:hover .hm-card__sticker, .hm-card:focus-visible .hm-card__sticker { transform: scale(1) rotate(12deg); }
.hm-card__sticker--hearts { height: auto; width: 74px; aspect-ratio: 13 / 10; }
.hm-card:focus-visible { outline: 3px solid var(--hm-fg); outline-offset: 6px; }
/* one-line description (after generousbranding.com): with a mouse it
   fades and rises in under the name and category when the card is hovered,
   in a muted tone; its space is always reserved so nothing jumps. On touch
   screens, where there is no hover, it simply shows. */
.hm-card__desc { display: block; margin-top: 10px; font-size: 15px; font-weight: 500; line-height: 1.45; max-width: 44ch; opacity: .62; }
@media (hover: hover) and (pointer: fine) {
  .hm-card__desc {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .35s var(--ease), transform .5s var(--ease);
  }
  .hm-card:hover .hm-card__desc, .hm-card:focus-visible .hm-card__desc {
    opacity: .62;
    transform: none;
    transition-delay: .05s;
  }
}

/* ---------- Contact ---------- */
.hm-contact { position: relative; overflow: clip; padding: 18vh var(--hm-gut) 16vh; }
.hm-contact__title {
  position: relative;
  z-index: 1;
  margin: 0 0 10vh;
  font-family: var(--hm-display);
  font-weight: 900;
  font-stretch: 112%;
  font-size: clamp(54px, 10.5vw, 190px);
  line-height: .82;
  letter-spacing: -.035em;
  text-transform: uppercase;
  max-width: 9ch;
}
.hm-contact__title .hm-ch:hover { color: var(--hm-acc); font-stretch: 125%; transform: rotate(-6deg); }
.hm-contact__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; max-width: 1100px; }
.hm-contact__grid h3 { font-family: var(--hm-display); font-weight: 900; font-stretch: 112%; text-transform: uppercase; font-size: 22px; margin-bottom: 24px; }
.hm-contact__smile {
  position: absolute;
  z-index: 0;
  width: 34vw;
  height: 34vw;
  right: -7vw;
  top: 8vh;
  fill: var(--hm-acc);
  --hm-mark-ink: var(--hm-ink);
  transform: rotate(14deg);
  pointer-events: none;
}
body.home .contact-item { border-radius: 0; padding: 12px 0; }
body.home a.contact-item:hover { background: transparent; transform: translateX(8px); }
body.home .contact-item__icon { background: transparent; border: 2px solid var(--hm-fg); border-radius: 50%; color: var(--hm-fg); }
body.home a.contact-item:hover .contact-item__icon { background: var(--hm-acc); color: var(--hm-ink); border-color: var(--hm-acc); }
body.home .contact-item__label { color: var(--hm-fg); opacity: .6; }
body.home .form-field { background: transparent; color: var(--hm-fg); border: 2px solid var(--hm-fg); border-radius: 0; font-size: 15px; }
body.home .form-field::placeholder { color: var(--hm-fg); opacity: .5; }
body.home .form-field:focus { border-color: var(--hm-acc); box-shadow: none; }
body.home .form-submit {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 30px;
  border-radius: 0;
  background: var(--hm-acc);
  color: var(--hm-ink);
  font-family: var(--hm-display);
  font-weight: 900;
  font-stretch: 112%;
  font-size: 16px;
  text-transform: uppercase;
  transform: rotate(-2deg);
}
body.home .form-submit:hover { background: var(--hm-fg); color: var(--hm-bg); transform: rotate(2deg) scale(1.04); }
body.home .form-note { color: var(--hm-fg); opacity: .7; }
body.home .site-footer { color: var(--hm-fg); border-top: 2px solid var(--hm-fg); font-family: var(--hm-display); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: 12px; }

/* ---------- Big titles in Rubik Mono One ----------
   Chosen by Amanda from a type lab (Passion One, Anton, Bricolage
   Grotesque, Rubik Mono One). The hero and every big section title use it;
   the small UI type (nav, ribbon, labels, cards) stays Archivo. Rubik Mono
   One has no width axis, so the letter hover grows the letter instead of
   stretching it. */
body.home .hm-title, body.home .hm-intro__title, body.home .hm-ab-hi__title, body.home .hm-ab-row__verb, body.home .hm-ab-h,
body.home .hm-contact__title, body.home .hm-all__title, body.home .hm-sel__title {
  font-family: "Rubik Mono One", "Archivo", sans-serif;
  font-weight: 400;
  font-stretch: normal;
  letter-spacing: -.02em;
  word-spacing: -.45em; /* monospaced: a space is a whole letter wide */
}
body.home .hm-ch--narrow { margin: 0 -.32em; } /* apostrophes get a full cell too */
body.home .hm-sel__count { font-family: var(--hm-display); font-weight: 700; word-spacing: normal; }
body.home .hm-all__title { font-size: clamp(40px, 9vw, 170px); }
body.home .hm-hero { --hm-t: min(18.2vw, 40vh); --hm-top: calc(78px + 2.5vh); } /* WELCOME is 5.81em in Rubik Mono One - bleeds just past both edges */
body.home .hm-title__row--2 { font-size: .5em; column-gap: .42em; word-spacing: -.25em; } /* "TO MY PAGE!!" under WELCOME, smaller */
body.home .hm-title__row--2 .hm-title__bang { margin-left: -.6em; letter-spacing: -.42em; transform: rotate(9deg) translateX(.06em); }
@media (min-width: 761px) {
  /* WELCOME across the top; "TO MY / PAGE!!" stacked on the right under it;
     the avatar, big, to its left; the note above-left of the avatar */
  body.home .hm-title__row--2 { top: calc(var(--hm-top) + var(--hm-t) * .9); right: 7vw; font-size: .6em; flex-wrap: wrap; justify-content: flex-end; width: 62vw; line-height: .92; white-space: normal; }
  body.home .hm-title__row--2 .hm-brk { display: block; flex-basis: 100%; height: 0; }
  body.home .hm-hero__note { top: calc(var(--hm-top) + var(--hm-t) * 1.12); }
  body.home .hm-smiley-wrap { --hm-sd: min(33vw, 50vh); left: 21vw; top: calc(var(--hm-top) + var(--hm-t) * .82); }
  body.home .hm-deco--loop { top: calc(var(--hm-top) + var(--hm-t) * 2.08); right: 24vw; left: auto; }
  body.home .hm-deco--star2 { top: calc(var(--hm-top) + var(--hm-t) * 1.75); left: 9vw; }
  body.home .hm-deco--star1 { top: calc(var(--hm-top) + var(--hm-t) * 2.05); right: 6vw; }
  body.home .hm-smiley__hint { bottom: 20%; left: -40%; }
}
body.home .hm-deco--loop { width: clamp(120px, 12vw, 200px); }
body.home .hm-title .hm-ch:hover, body.home .hm-title .hm-ch.is-poked { transform: translateY(-.05em) rotate(-5deg) scale(1.12); }
@media (max-width: 760px) {
  /* never shorter than the avatar's bottom edge plus the hello note and
     ribbon pinned below it, so on a short phone screen (Safari's toolbars
     showing) the two can't overlap - the hero just runs a little long */
  body.home .hm-hero { --hm-t: 27vw; min-height: calc(300px + 112vw + 6vh); } /* clears "see about me" (under PAGE!!) + the note + ribbon below it */
  body.home .hm-contact__title { font-size: 10.5vw; }
  body.home .hm-all__title { font-size: 9vw; }
  /* TO / MY / PAGE!! in three right-aligned rows; the avatar sits beside
     TO and MY, PAGE!! runs full width under both */
  body.home .hm-title__row--2 { top: calc(84px + var(--hm-t) * 1.66); right: 3vw; font-size: .86em; flex-wrap: wrap; justify-content: flex-end; width: 96vw; white-space: normal; line-height: .84; }
  body.home .hm-title__row--2 .hm-brk { display: block; flex-basis: 100%; height: 0; }
  body.home .hm-title__row--2 > [data-split]:first-child { width: min-content; white-space: normal; } /* "TO MY" wraps to two rows */
  body.home .hm-smiley-wrap { --hm-sd: 40vw; left: 5vw; top: calc(84px + var(--hm-t) * 1.56); }
  /* "see about me" moves into the space under PAGE!!, pointing up at the avatar */
  body.home .hm-smiley__hint { left: 22%; right: auto; top: 176%; bottom: auto; flex-direction: row; align-items: center; gap: 6px; transform: rotate(10deg); }
  body.home .hm-smiley__hint .hm-mark--hint { transform: rotate(-110deg); margin: 0; width: 30px; height: 30px; }
}

/* ---------- Custom cursor (fine pointers only; created by js) ---------- */
@media (hover: hover) and (pointer: fine) {
  body.home.hm-has-cursor, body.home.hm-has-cursor a, body.home.hm-has-cursor button { cursor: none; }
}
.hm-cursor {
  position: fixed;
  left: 0; top: 0;
  z-index: 1000;
  width: 0; height: 0;
  pointer-events: none;
}
.hm-cursor__dot {
  position: absolute;
  left: 0; top: 0;
  width: 14px; height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: var(--hm-cursor);
  display: flex; align-items: center; justify-content: center;
  transition: width .45s var(--hm-elastic), height .45s var(--hm-elastic), margin .45s var(--hm-elastic), background-color .5s var(--ease), opacity .3s;
}
.hm-cursor__label {
  font-family: var(--hm-display);
  font-weight: 900;
  font-stretch: 112%;
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--hm-bg);
  white-space: nowrap;
  opacity: 0;
  transition: opacity .2s;
}
.hm-cursor.is-label .hm-cursor__dot { width: 82px; height: 82px; margin: -41px 0 0 -41px; }
.hm-cursor.is-label .hm-cursor__label { opacity: 1; transition-delay: .1s; }
.hm-cursor__heart { position: absolute; left: -20px; top: -20px; width: 40px; height: 40px; fill: var(--hm-fg); opacity: 0; transform: scale(.3) rotate(-20deg); transition: opacity .25s, transform .45s var(--hm-elastic); }
.hm-cursor.is-heart .hm-cursor__dot { opacity: 0; }
.hm-cursor.is-heart .hm-cursor__heart { opacity: 1; transform: scale(1) rotate(-10deg); }
.hm-cursor.is-hidden { opacity: 0; }
/* over a project card the cursor grows into the pink circle with a "go"
   arrow inside - always pink here, whatever the section's mode */
.hm-cursor__go { position: absolute; left: -17px; top: -17px; width: 34px; height: 34px; opacity: 0; transform: scale(.4) rotate(-45deg); transition: opacity .2s, transform .45s var(--hm-elastic); }
.hm-cursor.is-go .hm-cursor__dot { width: 82px; height: 82px; margin: -41px 0 0 -41px; background: var(--pink-deep); }
.hm-cursor.is-go .hm-cursor__go { opacity: 1; transform: none; transition-delay: .08s; }

/* ---------- Phones / small tablets ---------- */
@media (max-width: 760px) {
  body.home { --hm-gut: 20px; }
  .hm-hero { --hm-t: 28vw; min-height: 640px; }
  .hm-title { letter-spacing: -.04em; }
  .hm-title__row--1 { flex-wrap: wrap; white-space: normal; width: 110vw; top: 84px; left: -.04em; }
  .hm-brk { display: block; flex-basis: 100%; height: 0; }
  .hm-title__row--2 { top: calc(84px + 1.6em); }
  .hm-blob { width: 64vw; left: -6vw; top: 9vh; }
  .hm-smiley-wrap { --hm-sd: 56vw; left: 8vw; top: calc(84px + var(--hm-t) * 1.95); }
  .hm-smiley__hint { left: auto; right: -27%; bottom: -4%; flex-direction: column; transform: rotate(-8deg); }
  .hm-smiley__hint .hm-mark--hint { transform: rotate(-140deg); margin-left: 0; width: 38px; height: 38px; }
  .hm-hero__note { top: auto; bottom: calc(6vh + 64px); max-width: 60vw; font-size: 11px; }
  .hm-hero__hello { font-size: 18px; margin: 4px 0 10px; }
  .hm-deco--star1 { top: calc(84px + var(--hm-t) * 1.7); right: 4vw; }
  .hm-deco--star2 { left: 5vw; top: calc(84px + var(--hm-t) * 2.3); }
  .hm-deco--loop { display: none; }
  .hm-ribbon { bottom: 4vh; }

  .hm-ab-hi { padding: 11vh var(--hm-gut) 8vh; min-height: 0; }
  .hm-ab-hi__title { font-size: 11.5vw; margin-top: 4vh; }
  .hm-ab-line--2 { padding-left: 8vw; }
  .hm-ab-avatar { position: relative; right: auto; top: auto; width: 84vw; margin: 6vh 0 0 auto; }
  .hm-ab-hi__me { margin: 5vh 0 0; }
  .hm-ab-hi__star { left: auto; right: 8vw; top: 9vh; }
  .hm-about__close { top: 72px; }
  .hm-ab-bio { padding: 12vh var(--hm-gut); }
  .hm-ab-bio__text { font-size: 8.6vw; }
  .hm-ab-do { padding: 12vh var(--hm-gut); }
  .hm-ab-row__verb { font-size: 10.5vw; }
  .hm-ab-shots { padding: 12vh 0; }
  .hm-ab-shot { width: 56vw; }
  .hm-ab-made { grid-template-columns: 1fr 1fr; align-items: start; gap: 5vw; }
  .hm-ab-made__head { grid-column: 1 / -1; padding: 0; }
  .hm-ab-pic--necklace, .hm-ab-pic--ring2 { width: 100%; margin-top: 3vh; }
  .hm-ab-me { grid-template-columns: 1fr; padding: 12vh var(--hm-gut) 16vh; }
  .hm-ab-ring { width: 86vw; justify-self: center; }
  .hm-ab-ring__text text { font-size: 24px; }
  /* still pinned full-screen like the laptop, with the title sized off the
     screen height so it fills a phone the same way. The slide is in em (the
     lines are 7.67em and 4.32em wide) so each word travels the same share of
     its length as on desktop: SELECTED from 40% across until its star leaves
     the right edge, WORK in from the left until its K sits just inside the
     right edge (the word is wider than a phone at this size) */
  .hm-intro { height: 280vh; }
  .hm-intro__title { font-size: min(21vh, 40vw); font-size: min(21svh, 40vw); }
  .hm-intro__line--1 { transform: translate3d(calc(40vw + var(--q) * (66vw - 7.67em)), 0, 0); }
  .hm-intro__line--2 { transform: translate3d(calc(16vw - 4.32em + var(--q) * 80vw), 0, 0); }
  .hm-intro__text { right: var(--hm-gut); max-width: none; font-size: 13px; }
  .hm-intro__hearts { bottom: 9vh; }
  .hm-intro__all { bottom: calc(9vh + 24px); right: calc(6vw + 150px); } /* under the title, like the laptop */



  .hm-sel { padding: 40px var(--hm-gut) 12vh; }
  .hm-reel .hm-card { width: 84vw; }
  .hm-sel__grid { grid-template-columns: 1fr; gap: 44px; }
  .hm-all { padding: 110px var(--hm-gut) 2vh; }
  .hm-all__title { font-size: 10.5vw; }
  .hm-sel--all .hm-sel__head--art { margin-top: 9vh; }
  .hm-card__sticker { right: -6px; }
  .hm-contact { padding: 12vh var(--hm-gut); }
  .hm-contact__title { font-size: 13.5vw; }
  .hm-contact__grid { grid-template-columns: 1fr; gap: 48px; }
  .hm-contact__smile { width: 58vw; height: 58vw; right: -18vw; top: 4vh; }
}

@media (prefers-reduced-motion: reduce) {
  .hm-smiley, .hm-heart__svg, .hm-ab-hi__star, .hm-ab-ring__text, .hm-ab-ring__smile, .hm-about.is-opening .hm-ab-hi, .hm-blob path, .hm-deco--star1, .hm-deco--star2, .hm-intro__hearts, .hm-ribbon__track,
  .hm-smiley.is-squish .hm-smiley__svg { animation: none; }
  .hm-deco--loop { animation: none; stroke-dashoffset: 0; }
}
.hm-cursor.is-grow .hm-cursor__dot { width: 40px; height: 40px; margin: -20px 0 0 -20px; }
@media (hover: hover) and (pointer: fine) {
  body.home.hm-has-cursor .hm-reel { cursor: none; }
}

/* ==========================================================================
   Case-study micro-animations. Small motion on things each page already
   has - no new decorations. Anything marked [data-anim] gets .is-in once
   it scrolls into view (js/main.js); under prefers-reduced-motion it is
   simply shown in its final state.
   ========================================================================== */

/* ---- PowerCare: the triple chevron, cut into its three chevrons (three
   clipped copies of the one image) so they can move one after another -
   "arrows moving forward", the brand's own decorative idea ---- */
.pc-chevrons { position: relative; display: block; }
.pc-chev { display: block; width: 100%; height: auto; }
.pc-chev--2, .pc-chev--3 { position: absolute; inset: 0; }
.pc-chev--1 { clip-path: inset(0 66% 0 0); }
.pc-chev--2 { clip-path: inset(0 33% 0 34%); }
.pc-chev--3 { clip-path: inset(0 0 0 67%); }
.pc-chevrons[data-anim] .pc-chev { opacity: 0; transform: translateX(-24%); transition: opacity .5s var(--ease), transform .7s var(--ease); }
.pc-chevrons[data-anim] .pc-chev--2 { transition-delay: .12s; }
.pc-chevrons[data-anim] .pc-chev--3 { transition-delay: .24s; }
.pc-chevrons.is-in .pc-chev { opacity: 1; transform: none; animation: pc-chase 2.6s ease-in-out 1.1s infinite; }
.pc-chevrons.is-in .pc-chev--2 { animation-delay: 1.25s; }
.pc-chevrons.is-in .pc-chev--3 { animation-delay: 1.4s; }
@keyframes pc-chase { 0%, 40%, 100% { transform: none; } 18% { transform: translateX(9%); } }

/* PowerCare bullet chevrons slide in beside their lines, and step forward
   when a line is hovered */
.theme-powercare [data-anim] .bullet-icon { opacity: 0; transform: translateX(-14px); transition: opacity .5s var(--ease), transform .6s var(--ease); }
.theme-powercare [data-anim].is-in .bullet-icon { opacity: 1; transform: none; }
.theme-powercare [data-anim].is-in li:nth-child(1) .bullet-icon { transition-delay: .25s; }
.theme-powercare [data-anim].is-in li:nth-child(2) .bullet-icon { transition-delay: .4s; }
.theme-powercare [data-anim].is-in li:nth-child(3) .bullet-icon { transition-delay: .55s; }
.theme-powercare [data-anim].is-in li:hover .bullet-icon { transform: translateX(5px); transition-delay: 0s; }

/* ---- Children's Museum: the two stars, each a clipped copy of the one
   image, pop in and then twinkle on their own rhythms ---- */
.theme-museum .mu-stars, .theme-museum .mu-thanks__stars { position: relative; }
.theme-museum .mu-thanks__stars { display: block; flex-shrink: 0; }
.mu-star { display: block; width: 100%; height: auto; }
.mu-star--small { position: absolute; inset: 0; }
.mu-star--big { clip-path: polygon(26% 0, 100% 0, 100% 100%, 30% 100%, 30% 55%, 26% 55%); transform-origin: 63% 44%; }
.mu-star--small { clip-path: polygon(0 55%, 30% 55%, 30% 100%, 0 100%); transform-origin: 13% 78%; }
[data-anim] > .mu-star { opacity: 0; transform: scale(.4) rotate(-40deg); transition: opacity .4s var(--ease), transform .8s cubic-bezier(.34, 1.56, .64, 1); }
[data-anim] > .mu-star--small { transition-delay: .15s; }
.is-in > .mu-star { opacity: 1; transform: none; }
.is-in > .mu-star--big { animation: mu-twinkle-big 3.4s ease-in-out 1s infinite; }
.is-in > .mu-star--small { animation: mu-twinkle-small 2.6s ease-in-out 1.7s infinite; }
@keyframes mu-twinkle-big { 0%, 100% { transform: none; } 45% { transform: scale(.88) rotate(10deg); } }
@keyframes mu-twinkle-small { 0%, 100% { transform: none; opacity: 1; } 40% { transform: scale(.72) rotate(-20deg); opacity: .75; } }

/* ---- Pax: the charts draw themselves ---- */
/* donut rings fill from empty (the old inert transition, finally used);
   the number counts up in js */
.px-donut-row[data-anim]:not(.is-in) .fill { stroke-dashoffset: 263.9; }
.px-donut-row[data-anim] .fill { transition: stroke-dashoffset 1.4s var(--ease) .15s; }
/* pie sweeps round clockwise */
@property --px-sweep { syntax: "<angle>"; inherits: false; initial-value: 360deg; }
.px-pie[data-anim] {
  -webkit-mask: conic-gradient(#000 var(--px-sweep), transparent 0);
  mask: conic-gradient(#000 var(--px-sweep), transparent 0);
  transition: --px-sweep 1.5s var(--ease) .2s;
}
.px-pie[data-anim]:not(.is-in) { --px-sweep: 0deg; }
/* timeline stage bars grow left to right, one stage after another */
.px-timeline[data-anim] .stage .bar { transform-origin: left center; transform: scaleX(0); transition: transform .8s var(--ease); }
.px-timeline[data-anim].is-in .stage .bar { transform: none; }
.px-timeline[data-anim] .stage:nth-child(2) .bar { transition-delay: .15s; }
.px-timeline[data-anim] .stage:nth-child(3) .bar { transition-delay: .3s; }
.px-timeline[data-anim] .stage:nth-child(4) .bar { transition-delay: .45s; }
.px-timeline[data-anim] .stage:nth-child(5) .bar { transition-delay: .6s; }
/* bar-chart images wipe in from the left, the way their bars read */
.px-chart-row__fig[data-anim] img { clip-path: inset(0 100% 0 0); transition: clip-path 1.2s var(--ease) .2s; }
.px-chart-row__fig[data-anim].is-in img { clip-path: inset(0 0 0 0); }

/* ---- Lighter: the 01-04 numbers rise into place one after another ---- */
.theme-lighter [data-anim] .num { opacity: 0; transform: translateY(12px); transition: opacity .5s var(--ease), transform .6s var(--ease); }
.theme-lighter [data-anim].is-in .num { opacity: 1; transform: none; }
.theme-lighter [data-anim].is-in > div:nth-child(2) .num { transition-delay: .12s; }
.theme-lighter [data-anim].is-in > div:nth-child(3) .num { transition-delay: .24s; }
.theme-lighter [data-anim].is-in > div:nth-child(4) .num { transition-delay: .36s; }

/* ---- Adherence: the day-pill bullets drop in one by one ---- */
.ad-list[data-anim] li::before { transform: scale(0); transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); }
.ad-list[data-anim].is-in li::before { transform: none; }
.ad-list[data-anim].is-in li:nth-child(2)::before { transition-delay: .09s; }
.ad-list[data-anim].is-in li:nth-child(3)::before { transition-delay: .18s; }
.ad-list[data-anim].is-in li:nth-child(4)::before { transition-delay: .27s; }
.ad-list[data-anim].is-in li:nth-child(5)::before { transition-delay: .36s; }
.ad-list[data-anim].is-in li:nth-child(6)::before { transition-delay: .45s; }
.ad-list[data-anim].is-in li:nth-child(7)::before { transition-delay: .54s; }

@media (prefers-reduced-motion: reduce) {
  [data-anim] *, [data-anim], .ad-list[data-anim] li::before { transition: none !important; animation: none !important; }
}

/* ==========================================================================
   Page transition: opening a project pulls its page up from the bottom like
   a sheet while the page behind sinks back and dims (after cossette.com);
   leaving a project drops it back down. Cross-document View Transitions -
   Chrome / Edge / Safari 18.2+; other browsers just navigate. The type
   (pull-open / pull-close) is chosen per navigation by the small script in
   each page's <head>; any other navigation skips the transition.
   ========================================================================== */
@view-transition { navigation: auto; }
html:active-view-transition-type(pull-open)::view-transition-old(root) { animation: vt-recede .7s var(--ease) both; }
html:active-view-transition-type(pull-open)::view-transition-new(root) { animation: vt-pull-up .7s var(--ease) both; }
html:active-view-transition-type(pull-close)::view-transition-new(root) { animation: vt-return .7s var(--ease) both; }
html:active-view-transition-type(pull-close)::view-transition-old(root) { animation: vt-drop .6s cubic-bezier(.55, 0, .75, .2) both; z-index: 2; }
@keyframes vt-pull-up { from { transform: translateY(100%); } }
@keyframes vt-recede { to { transform: translateY(-3%) scale(.94); filter: brightness(.55); } }
@keyframes vt-return { from { transform: translateY(-3%) scale(.94); filter: brightness(.55); } }
@keyframes vt-drop { to { transform: translateY(100%); } }

/* ==========================================================================
   Case-study corner navigation (after cossette.com): Back to Home sits in
   the bottom-left corner and the next project in the bottom-right, fixed
   like the top menu. At rest each is a small square - an arrow, and a
   thumbnail of the next project; on hover / focus a label slides out of
   the square. Solid chips: light grey on light pages, charcoal on dark.
   ========================================================================== */
.cs-nextprev {
  --np-bg: #efefef; --np-fg: #0a0a0a; --np-muted: #8a8a8a; --np-line: rgba(0,0,0,.12);
  position: fixed;
  z-index: 90;
  left: 0; right: 0; bottom: 20px;
  padding: 0 20px;
  border: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  pointer-events: none;
}
.theme-powercare .cs-nextprev, .theme-brochure .cs-nextprev,
.theme-ap2d .cs-nextprev, .theme-3d .cs-nextprev { --np-bg: #262626; --np-fg: #ffffff; --np-muted: #9a9a9a; --np-line: rgba(255,255,255,.14); }
.theme-ap2d .cs-nextprev { justify-content: space-between; }
.cs-nextprev a.cs-np {
  pointer-events: auto;
  display: flex;
  align-items: stretch;
  gap: 8px;
  height: 56px;
  font-weight: 500;
  font-size: 17px;
  color: var(--np-fg);
  opacity: 1;
}
.cs-nextprev a.cs-np:hover { opacity: 1; }
.cs-nextprev a.cs-np--home, .cs-nextprev a.cs-np--prev { flex-direction: row-reverse; margin-right: auto; }
.cs-np__icon, .cs-np__thumb {
  flex: none;
  width: 56px; height: 56px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--np-bg);
  transition: transform .4s var(--ease);
}
.cs-np__icon { display: flex; align-items: center; justify-content: center; }
.cs-np__icon svg { width: 22px; height: 22px; }
.cs-np__thumb { border: 1px solid var(--np-line); } /* a hairline edge, so a white thumbnail still reads on a white page */
.cs-np__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cs-np__label {
  display: flex;
  align-items: center;
  gap: .35em;
  max-width: 0;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  border-radius: 10px;
  background: var(--np-bg);
  opacity: 0;
  transition: max-width .5s var(--ease), padding .5s var(--ease), opacity .25s var(--ease);
}
.cs-np__name { color: var(--np-muted); }
.cs-nextprev a.cs-np:hover .cs-np__label,
.cs-nextprev a.cs-np:focus-visible .cs-np__label { max-width: 420px; padding: 0 20px; opacity: 1; }
.cs-nextprev a.cs-np:hover .cs-np__thumb, .cs-nextprev a.cs-np:hover .cs-np__icon { transform: scale(1.06); }
.cs-nextprev a.cs-np:focus-visible { outline: none; }
.cs-nextprev a.cs-np:focus-visible .cs-np__icon,
.cs-nextprev a.cs-np:focus-visible .cs-np__thumb { outline: 2px solid var(--np-fg); outline-offset: 3px; }
/* keep the page's last lines clear of the corners */
body:has(.cs-nextprev) { padding-bottom: 88px; }
@media (max-width: 700px) {
  .cs-nextprev { bottom: 14px; padding: 0 14px; }
  .cs-nextprev a.cs-np { height: 48px; }
  .cs-np__icon, .cs-np__thumb { width: 48px; height: 48px; }
  body:has(.cs-nextprev) { padding-bottom: 72px; }
}
@media (prefers-reduced-motion: reduce) {
  .cs-np__label, .cs-np__icon, .cs-np__thumb { transition: none; }
}
.cs-np__thumb--zoom img { transform: scale(1.7); transform-origin: 50% 35%; } /* Lighter's flags read at thumbnail size */
/* The Creation: its light/dark switch owns the bottom-right corner, so the
   project corners sit just above it */
.theme-creation .cs-nextprev { bottom: 74px; }

/* Case-study details row (Role / Team / Client / Start / Duration / Tools):
   equal gaps between the slots instead of equal-width columns, so a short
   "Solo" and a long tools list are spaced evenly; first slot on the left
   margin, last on the right; two columns on phones. */
.theme-powercare .pc-meta-row, .theme-museum .mu-meta-row, .br-meta-row,
.px-meta-row, .cr-meta-row, .ad-meta-row, .lt-hero-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 24px 40px;
}
:is(.theme-powercare .pc-meta-row, .theme-museum .mu-meta-row, .br-meta-row, .px-meta-row, .cr-meta-row, .ad-meta-row, .lt-hero-meta) > div { flex: 0 0 auto; white-space: nowrap; } /* each slot is exactly as wide as its text (long values break at a chosen <br>), so equal box gaps read as equal gaps */
@media (max-width: 700px) {
  .theme-powercare .pc-meta-row, .theme-museum .mu-meta-row, .br-meta-row,
  .px-meta-row, .cr-meta-row, .ad-meta-row, .lt-hero-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; }
  :is(.theme-powercare .pc-meta-row, .theme-museum .mu-meta-row, .br-meta-row, .px-meta-row, .cr-meta-row, .ad-meta-row, .lt-hero-meta) > div { white-space: normal; }
}

/* Med-A: an image with its paragraph beside it (image left, text right),
   tops aligned; stacks on narrower screens */
.ad-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; margin: 48px 0; }
.ad-pair > figure { margin: 0; max-width: none; width: 100%; }
.ad-pair .ad-body p:last-child { margin-bottom: 0; }
.ad-pair--screen { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); align-items: center; }
.ad-pair--screen > figure { width: 100%; }
.ad-pair--wide { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
@media (max-width: 900px) {
  .ad-pair, .ad-pair--screen, .ad-pair--wide { grid-template-columns: 1fr; gap: 32px; }
  .ad-pair--screen > figure { width: min(300px, 64%); margin: 0 auto; }
}

/* Med-A headings cycle the darker tones of the LED palette Amanda set in
   Blokdots (pink, red, orange, green, teal, blue, purple; yellow left out).
   Orange / green / teal are deepened just enough to read at 3:1 on white,
   same hue. Highlighted words get a soft-tone highlighter swipe behind dark
   text, cycling the day-pill tones like the bullets. */
.ad-tone--pink   { color: #F647BB !important; }
.ad-tone--red    { color: #DA443D !important; }
.ad-tone--orange { color: #CF830A !important; }
.ad-tone--green  { color: #45A75E !important; }
.ad-tone--teal   { color: #35A49F !important; }
.ad-tone--blue   { color: #4C9CD2 !important; }
.ad-tone--purple { color: #9058A7 !important; }
/* section titles (h1): the six "Welcome" LED colours from Amanda's
   Blokdots sheet, mixed so neighbours differ */
.ad-tone--w-pink   { color: #FF64D5 !important; }
.ad-tone--w-violet { color: #C887F3 !important; }
.ad-tone--w-sky    { color: #61CCFA !important; }
.ad-tone--w-aqua   { color: #6CF5EC !important; }
.ad-tone--w-lime   { color: #B6F896 !important; }
.ad-tone--w-yellow { color: #FBD841 !important; }
/* subheads (h2) take the lighter LED tones, a different one each */
.ad-tone--coral    { color: #FF9489 !important; }
.ad-tone--lavender { color: #CB97DF !important; }
.ad-hl { color: #1a1a1a; font-weight: 600; padding: 0 .12em; border-radius: .2em; background: linear-gradient(transparent 38%, var(--ad-hl-c, var(--ad-mon)) 38%, var(--ad-hl-c, var(--ad-mon)) 92%, transparent 92%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.ad-hl--mon { --ad-hl-c: var(--ad-mon); } .ad-hl--tue { --ad-hl-c: var(--ad-tue); } .ad-hl--wed { --ad-hl-c: var(--ad-wed); }
.ad-hl--thu { --ad-hl-c: var(--ad-thu); } .ad-hl--fri { --ad-hl-c: var(--ad-fri); } .ad-hl--sat { --ad-hl-c: var(--ad-sat); } .ad-hl--sun { --ad-hl-c: var(--ad-sun); }

/* Med-A initial wireframes: six phone screens, 3 + 3, beside the text */
.ad-pair--wf { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; }
.ad-wf-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ad-wf { margin: 0; aspect-ratio: 430 / 932; overflow: hidden; border: 1px solid var(--ad-line); border-radius: 10px; background: #fff; }
.ad-wf img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
@media (max-width: 900px) { .ad-pair--wf { grid-template-columns: 1fr; } .ad-wf-grid { gap: 10px; } }
/* Med-A: words spelled out letter by letter in the day-pill colours,
   Monday to Sunday (like the wireframe's day buttons) */
.ad-rb { font-weight: 700; }
.ad-rb--mon { color: var(--ad-mon); } .ad-rb--tue { color: var(--ad-tue); } .ad-rb--wed { color: var(--ad-wed); }
.ad-rb--thu { color: var(--ad-thu); } .ad-rb--fri { color: var(--ad-fri); } .ad-rb--sat { color: var(--ad-sat); } .ad-rb--sun { color: var(--ad-sun); }
.ad-flow { margin: 40px 0; border: 1px solid var(--ad-line); border-radius: 10px; overflow: hidden; }
.ad-flow img { display: block; width: 100%; height: auto; }
/* Med-A coloured wireframes: the whole flow, 6 per row (3 on phones) */
.ad-wf-grid--hifi { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; margin-top: 8px; }
@media (max-width: 900px) { .ad-wf-grid--hifi { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } }

/* Med-A "My Finished Design" band: the darker LED pink, every word white */
.ad-band { background: #F647BB; }
.ad-band, .ad-band .ad-h1, .ad-band p, .ad-band figcaption, .ad-band .ad-demo figcaption { color: #fff !important; }

/* Med-A tweaks (Amanda): light-pink highlighter, turquoise subhead, and the
   Finished Design band in the Med-A logo pink */
.ad-hl--pink { --ad-hl-c: #FF9CD3; }
.ad-tone--turquoise { color: #46C3BE !important; }
.ad-band { background: var(--ad-logo); }

/* Med-A: in the sections with images, the text sits on a square card in
   that part's day-picker colour (Monday -> Sunday) that pops up as it
   scrolls in ([data-anim] -> .is-in) */
.ad-card { background: var(--c); color: #2b2340; border-radius: 16px; padding: 30px 32px; }
.ad-card p { color: #2b2340; }
.ad-card p:last-child { margin-bottom: 0; }
.ad-section > .container > .ad-card { margin: 32px 0; }
.ad-card .ad-rb { -webkit-text-stroke: .6px rgba(43,35,64,.75); paint-order: stroke fill; }
.ad-card[data-anim] { opacity: 0; transform: translateY(48px) scale(.92) rotate(-1.5deg); transform-origin: 50% 100%; transition: opacity .5s var(--ease), transform .8s cubic-bezier(.34, 1.56, .64, 1); }
.ad-card[data-anim].is-in { opacity: 1; transform: none; }
@media (max-width: 700px) { .ad-card { padding: 22px 22px; } }

/* Med-A side menu: each label carries its section's colour - a dot, and a
   filled tag for the section being read */
.theme-adherence .cs-sidenav a { display: flex; align-items: center; gap: 8px; width: fit-content; padding: 2px 10px 2px 6px; border-radius: 999px; transition: background-color .3s var(--ease), opacity .3s var(--ease); }
.theme-adherence .cs-sidenav a::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex: none; }
.theme-adherence .cs-sidenav a.is-current { background: var(--c); color: #2b2340; }
.theme-adherence .cs-sidenav a.is-current::before { background: #2b2340; }
@media (min-width: 1400px) {
  .theme-adherence .cs-sidenav { display: flex; max-width: min(190px, calc((100vw - 1276px) / 2 + 40px)); color: #2b2340; font-size: 15px; font-weight: 600; }
}

/* Med-A final colours: the Blokdots light/dark LED pairs. Section titles
   take the dark tone, that section's text card / subheads the light one. */
.ad-d--pink   { color: #F647BB !important; }
.ad-d--blue   { color: #4E9DD3 !important; }
.ad-d--teal   { color: #46C3BE !important; }
.ad-d--green  { color: #4AB465 !important; }
.ad-d--yellow { color: #FBD841 !important; }
.ad-d--orange { color: #F39C12 !important; }
.ad-d--red    { color: #DA443D !important; }
.ad-d--purple { color: #9058A7 !important; }
.ad-l--pink   { color: #FF9CD3 !important; }

/* Image + text pairs: even halves, the image capped so it isn't far taller
   than the text, and the card stretched to the image's height with its
   text centred - one balanced block */
.ad-pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
.ad-pair > figure { display: flex; align-items: center; justify-content: center; }
.ad-pair > figure img { width: auto; max-width: 100%; max-height: 72vh; object-fit: contain; }
.ad-pair > .ad-card { display: flex; flex-direction: column; justify-content: center; margin: 0; }
.ad-pair--wf { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ad-pair--wf .ad-wf-grid { max-width: 560px; margin: 0 auto; width: 100%; }
@media (max-width: 900px) {
  .ad-pair, .ad-pair--wf { grid-template-columns: 1fr; }
  .ad-pair > figure img { max-height: none; width: 100%; }
}
/* Med-A: title in the logo pink, its caption a lighter tone of it; the
   coloured wireframes 5 per row */
.ad-hero h1.ad-title-logo { color: var(--ad-logo); }
.ad-kicker.ad-kicker--light { color: #FF9CD3; }
.ad-wf-grid--hifi { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 900px) { .ad-wf-grid--hifi { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Med-A banner: full-bleed like the other case studies (same height
   rules as .cs-banner), the original photo with the logo on top */
.ad-banner { position: relative; margin: 0 0 64px; width: 100%; height: clamp(340px, 52vw, calc(100vh - 140px)); overflow: hidden; background: #e9e9e9; } /* grows with the width, so wide screens keep the whole dispenser */
.ad-banner__photo { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 60% 35%; }
.ad-banner__logo { position: absolute; left: clamp(20px, 3vw, 56px); top: clamp(18px, 3vw, 48px); width: clamp(130px, 13vw, 230px); height: auto; } /* tucked into the top-left corner */
@media (max-width: 700px) { .ad-banner { height: 42vh; min-height: 260px; } .ad-banner__logo { left: 24px; width: 46vw; } }