/* ============================================================
   Picture This Idea
   Discovery Lab page: ancient depth, inquiry, and soft neumorphism
   ============================================================ */

body.picture-this {
  --pt-ink: #2d1a0c;
  --pt-umber: #5b3719;
  --pt-brown: #7b5429;
  --pt-gold: #d59a3a;
  --pt-bright-gold: #ffd88b;
  --pt-sun: #f5bf62;
  --pt-page-dark: #211108;
  --pt-page-mid: #6a421f;
  --pt-parchment: #f8e7c4;
  --pt-parchment-strong: #fff2d7;
  --pt-smoke: rgba(56, 32, 15, 0.76);
  --pt-line: rgba(102, 69, 34, 0.18);
  --pt-line-strong: rgba(102, 69, 34, 0.34);
  --pt-panel: rgba(255, 238, 204, 0.84);
  --pt-panel-strong: rgba(255, 245, 224, 0.96);
  --pt-shadow: 0 18px 48px rgba(62, 36, 16, 0.22), 0 0 34px rgba(255, 231, 176, 0.2);
  --pt-inset: inset 2px 2px 8px rgba(80, 48, 20, 0.12), inset -3px -3px 12px rgba(255, 248, 230, 0.68);

  background: #2a190d;
  color: var(--pt-ink);
}

html[data-theme="dark"] body.picture-this {
  --pt-ink: #fff0d3;
  --pt-umber: #f0c579;
  --pt-brown: #dfb06d;
  --pt-gold: #ffc76a;
  --pt-bright-gold: #ffe5aa;
  --pt-sun: #ffcf78;
  --pt-page-dark: #120805;
  --pt-page-mid: #281408;
  --pt-parchment: #201309;
  --pt-parchment-strong: #fff0d3;
  --pt-smoke: rgba(255, 221, 166, 0.86);
  --pt-line: rgba(255, 222, 169, 0.18);
  --pt-line-strong: rgba(255, 222, 169, 0.32);
  --pt-panel: rgba(41, 22, 10, 0.82);
  --pt-panel-strong: rgba(61, 35, 17, 0.94);
  --pt-shadow: 0 20px 54px rgba(0, 0, 0, 0.52), 0 0 34px rgba(255, 197, 106, 0.08);
  --pt-inset: inset 2px 2px 8px rgba(0, 0, 0, 0.32), inset -2px -2px 10px rgba(255, 236, 201, 0.045);

  background: #120a05;
}

body.picture-this .nav {
  background: rgba(31, 17, 8, 0.94);
  border-bottom-color: rgba(255, 216, 139, 0.2);
}

body.picture-this .nav__links a,
body.picture-this .nav__wordmark {
  color: rgba(255, 240, 211, 0.82);
}

body.picture-this .nav__links a:hover,
body.picture-this .nav__links a.active,
body.picture-this .nav__dropdown:hover > a {
  color: var(--pt-bright-gold);
}

body.picture-this .nav__dropdown-menu {
  background: rgba(31, 17, 8, 0.98);
  border-color: rgba(255, 216, 139, 0.22);
}

.picture-page {
  background: var(--pt-page-dark);
  overflow: hidden;
}

.picture-hero {
  --truth-orb-size: clamp(7rem, 11vw, 11rem);
  --truth-orb-top: clamp(4.55rem, 6.9vw, 6.6rem);

  align-items: center;
  display: flex;
  flex-direction: column;
  gap: clamp(1.4rem, 3vw, 2.4rem);
  isolation: isolate;
  justify-content: center;
  min-height: 100vh;
  min-height: max(100svh, 860px);
  overflow: hidden;
  padding: clamp(7rem, 9vw, 9rem) 1rem clamp(4rem, 7vw, 6rem);
  position: relative;
}

.picture-hero__shade {
  inset: 0;
  position: absolute;
}

.picture-stage {
  aspect-ratio: 1672 / 941;
  left: 50%;
  min-height: 100%;
  min-width: 100%;
  overflow: hidden;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: max(100vw, calc(100vh * 1.777));
  z-index: -3;
}

.picture-scene {
  display: block;
  filter: saturate(0.92) contrast(1.04) brightness(0.84);
  height: 100%;
  inset: 0;
  object-fit: cover;
  opacity: 1;
  position: absolute;
  transform: scale(1.015);
  transition:
    opacity 4200ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 4200ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 5200ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, filter, transform;
  width: 100%;
}

.picture-scene--looking {
  opacity: 0;
  transition-delay: 0ms;
}

.picture-hero__shade {
  background:
    radial-gradient(circle at 50% 12%, rgba(255, 226, 151, 0.34), transparent 23%),
    radial-gradient(circle at 50% 50%, rgba(255, 238, 204, 0.7), rgba(255, 228, 180, 0.2) 35%, rgba(42, 25, 13, 0.68) 78%),
    linear-gradient(180deg, rgba(42, 25, 13, 0.18), rgba(42, 25, 13, 0.72));
  z-index: -2;
}

html[data-theme="dark"] body.picture-this .picture-hero__shade {
  background:
    radial-gradient(circle at 50% 12%, rgba(255, 205, 112, 0.28), transparent 25%),
    radial-gradient(circle at 50% 46%, rgba(112, 68, 28, 0.32), rgba(38, 20, 9, 0.38) 38%, rgba(12, 6, 3, 0.82) 82%),
    linear-gradient(180deg, rgba(18, 9, 4, 0.32), rgba(12, 6, 3, 0.86));
}

.picture-hero:has(.truth-orb:hover) .picture-scene--pointing,
.picture-hero.truth-focused .picture-scene--pointing {
  filter: saturate(1.02) contrast(1.06) brightness(0.76);
  opacity: 0;
  transform: scale(1.026);
}

.picture-hero:has(.truth-orb:hover) .picture-scene--looking,
.picture-hero.truth-focused .picture-scene--looking {
  filter: saturate(1.03) contrast(1.06) brightness(0.86);
  opacity: 1;
  transform: scale(1.018);
  transition-delay: 0ms;
}

.truth-orb {
  align-items: center;
  background: transparent;
  border: 0;
  cursor: pointer;
  display: grid;
  height: var(--truth-orb-size);
  justify-items: center;
  left: 50%;
  padding: 0;
  perspective: 900px;
  perspective-origin: 50% 50%;
  position: absolute;
  top: var(--truth-orb-top);
  transform: translateX(-50%);
  transform-style: preserve-3d;
  width: var(--truth-orb-size);
  z-index: 4;
}

.truth-orb > span {
  grid-area: 1 / 1;
}

.truth-orb__core {
  animation: truthCore 3.8s ease-in-out infinite;
  background:
    radial-gradient(circle at 34% 24%, #fffaf0 0 7%, #ffe892 18%, #d89120 51%, #78440a 100%);
  border: 1px solid rgba(255, 247, 205, 0.8);
  border-radius: 50%;
  box-shadow:
    0 0 34px rgba(255, 224, 133, 0.88),
    0 0 118px rgba(255, 201, 79, 0.54),
    0 14px 28px rgba(89, 49, 10, 0.28),
    var(--pt-inset);
  height: 47%;
  position: relative;
  transform: translateZ(34px);
  width: 47%;
  z-index: 2;
}

.truth-orb__ring {
  border: 1px solid rgba(255, 233, 172, 0.68);
  border-radius: 50%;
  box-shadow:
    0 0 24px rgba(255, 218, 137, 0.3),
    inset 0 0 18px rgba(255, 244, 206, 0.16);
  display: block;
  height: 74%;
  position: relative;
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  width: 74%;
}

.truth-orb__ring::before {
  animation: truthRingTrace 5.8s linear infinite;
  background: conic-gradient(from 0deg, transparent 0 18%, rgba(255, 244, 197, 0.92) 22%, rgba(255, 196, 76, 0.44) 27%, transparent 34% 100%);
  border-radius: inherit;
  content: "";
  inset: -1px;
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  position: absolute;
  transform-origin: 50% 50%;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
}

.truth-orb__orbit {
  animation: truthOrbit 6.8s linear infinite;
  border-radius: inherit;
  display: block;
  inset: 0;
  position: absolute;
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  will-change: transform;
}

.truth-orb__planet {
  backface-visibility: hidden;
  background: #fff3bd;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  box-shadow:
    0 0 14px rgba(255, 232, 147, 0.76),
    0 0 28px rgba(255, 191, 66, 0.42);
  display: block;
  height: 0.42rem;
  left: 50%;
  position: absolute;
  top: -0.21rem;
  transform: translateX(-50%) translateZ(18px);
  width: 0.42rem;
}

.truth-orb__ring--one {
  transform: rotateX(72deg);
}

.truth-orb__ring--two {
  height: 92%;
  opacity: 0.72;
  transform: rotateY(74deg);
  width: 92%;
}

.truth-orb__ring--three {
  height: 110%;
  opacity: 0.42;
  transform: rotateZ(0deg);
  width: 110%;
}

.truth-orb__ring--two::before {
  animation-duration: 7.4s;
  animation-direction: reverse;
}

.truth-orb__ring--three::before {
  animation-duration: 9.2s;
}

.truth-orb__ring--two .truth-orb__orbit {
  animation-duration: 9.2s;
  animation-direction: reverse;
}

.truth-orb__ring--three .truth-orb__orbit {
  animation-duration: 11.6s;
}

.truth-orb__ring--one .truth-orb__planet {
  height: 0.44rem;
  width: 0.44rem;
}

.truth-orb__ring--two .truth-orb__planet {
  background: #ffe39a;
  height: 0.36rem;
  top: -0.18rem;
  transform: translateX(-50%) translateZ(24px);
  width: 0.36rem;
}

.truth-orb__ring--three .truth-orb__planet {
  background: rgba(255, 244, 204, 0.9);
  height: 0.3rem;
  top: -0.15rem;
  transform: translateX(-50%) translateZ(12px);
  width: 0.3rem;
}

.truth-orb__reveal {
  backdrop-filter: blur(14px);
  background:
    linear-gradient(145deg, rgba(55, 31, 14, 0.78), rgba(38, 21, 10, 0.7));
  border: 1px solid rgba(255, 221, 151, 0.26);
  border-radius: 8px;
  box-shadow:
    0 12px 30px rgba(43, 24, 10, 0.22),
    inset 0 1px 0 rgba(255, 238, 195, 0.12);
  color: var(--pt-parchment-strong);
  left: 50%;
  opacity: 0;
  padding: 0.55rem clamp(0.75rem, 1.8vw, 1.05rem);
  pointer-events: none;
  position: absolute;
  text-align: center;
  top: calc(var(--truth-orb-top) + var(--truth-orb-size) + 0.75rem);
  transform: translate(-50%, 6px);
  transition:
    opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: 0ms;
  width: max-content;
  max-width: min(32rem, calc(100% - 2rem));
  z-index: 5;
}

.truth-orb__reveal span {
  color: rgba(255, 240, 211, 0.86);
  display: block;
  font-family: var(--font-display);
  font-size: clamp(0.78rem, 0.9vw, 0.9rem);
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
}

.truth-orb__reveal strong {
  color: rgba(255, 231, 180, 0.94);
  display: block;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(0.98rem, 1.25vw, 1.18rem);
  font-weight: 500;
  line-height: 1.25;
  margin-top: 0.48rem;
  white-space: nowrap;
}

.truth-orb__reveal em {
  color: var(--pt-bright-gold);
  font-style: normal;
  font-weight: 700;
  text-shadow:
    0 0 18px rgba(255, 216, 139, 0.52),
    0 1px 0 rgba(255, 248, 230, 0.16);
}

.picture-hero:has(.truth-orb:hover) .truth-orb__reveal,
.picture-hero.truth-focused .truth-orb__reveal {
  opacity: 1;
  transform: translate(-50%, 0);
  transition-delay: 200ms;
}

.picture-hero__content {
  backdrop-filter: blur(18px);
  background:
    linear-gradient(145deg, rgba(255, 243, 217, 0.64), rgba(255, 229, 184, 0.36));
  border: 1px solid rgba(255, 250, 231, 0.52);
  border-radius: 8px;
  box-shadow:
    0 24px 76px rgba(56, 31, 12, 0.24),
    inset 0 0 0 1px rgba(116, 73, 24, 0.12),
    var(--pt-inset);
  box-sizing: border-box;
  margin-top: clamp(10rem, 15vw, 13rem);
  max-width: calc(100vw - 2rem);
  padding-block: clamp(1.55rem, 3vw, 2.75rem);
  padding-inline: clamp(2rem, 5vw, 4.25rem);
  position: relative;
  text-align: center;
  width: min(760px, calc(100vw - clamp(2rem, 12vw, 16rem)));
  z-index: 2;
}

html[data-theme="dark"] body.picture-this .picture-hero__content {
  background:
    linear-gradient(145deg, rgba(48, 27, 12, 0.9), rgba(24, 12, 5, 0.82));
  border-color: rgba(255, 216, 139, 0.36);
  box-shadow:
    0 26px 84px rgba(0, 0, 0, 0.44),
    inset 0 1px 0 rgba(255, 234, 184, 0.1),
    inset 0 0 0 1px rgba(255, 208, 120, 0.08);
}

.picture-kicker {
  color: var(--pt-gold);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  margin-bottom: 1rem;
  text-transform: uppercase;
}

.picture-hero h1,
.picture-codes h2,
.picture-panel h3,
.picture-closing-panel h2 {
  color: var(--pt-ink);
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 500;
  letter-spacing: 0;
}

.picture-hero h1 {
  font-size: clamp(1.55rem, 2.9vw, 2.7rem);
  line-height: 1.08;
  margin: 0 auto 1.25rem;
  max-width: 100%;
}

html[data-theme="dark"] body.picture-this .picture-hero h1 {
  color: #fff2d7;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.46);
}

.picture-hero h1 span {
  display: block;
  white-space: nowrap;
}

.picture-hero__content p {
  color: var(--pt-smoke);
  font-size: clamp(0.82rem, 0.95vw, 0.96rem);
  line-height: 1.58;
  margin: 0 auto;
  max-width: 34rem;
}

html[data-theme="dark"] body.picture-this .picture-hero__content p {
  color: rgba(255, 219, 162, 0.9);
}

.picture-hero__actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  justify-content: center;
  margin-top: 1.7rem;
}

.picture-hero__footnote {
  color: rgba(247, 214, 153, 0.9);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(0.9rem, 1.22vw, 1.08rem);
  line-height: 1.5;
  margin: 0 auto;
  max-width: min(780px, calc(100% - 2rem));
  padding: clamp(0.45rem, 1.1vw, 0.75rem) clamp(1rem, 3vw, 1.55rem) 0;
  position: relative;
  text-align: center;
  text-shadow:
    0 1px 2px rgba(18, 9, 3, 0.9),
    0 3px 12px rgba(18, 9, 3, 0.58),
    0 0 16px rgba(255, 214, 132, 0.14);
  z-index: 3;
}

.picture-hero__footnote::before {
  background: linear-gradient(90deg, transparent, rgba(213, 154, 58, 0.48), transparent);
  content: "";
  display: block;
  height: 1px;
  margin: 0 auto 0.8rem;
  width: min(14rem, 56%);
}

.picture-hero__footnote span {
  display: none;
}

.picture-hero__footnote p {
  color: rgba(252, 224, 166, 0.96);
  margin: 0;
  text-shadow:
    0 1px 2px rgba(18, 9, 3, 0.94),
    0 3px 14px rgba(18, 9, 3, 0.68),
    0 0 18px rgba(255, 218, 139, 0.18);
}

html[data-theme="dark"] body.picture-this .picture-hero__footnote {
  color: rgba(250, 224, 174, 0.9);
}

html[data-theme="dark"] body.picture-this .picture-hero__footnote p {
  color: rgba(255, 231, 184, 0.96);
}

.picture-btn,
.picture-chip {
  align-items: center;
  background: var(--pt-panel-strong);
  border: 1px solid rgba(255, 250, 231, 0.7);
  border-radius: 8px;
  box-shadow: var(--pt-shadow);
  color: var(--pt-umber);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--font-display);
  font-size: 0.86rem;
  font-weight: 700;
  justify-content: center;
  min-height: 3.3rem;
  padding: 0.9rem 1.35rem;
  text-decoration: none;
  transition: transform 220ms var(--ease), box-shadow 220ms var(--ease), background-color 220ms var(--ease), color 220ms var(--ease);
}

.picture-btn:hover,
.picture-btn:focus-visible,
.picture-chip:hover,
.picture-chip:focus-visible {
  background: #fff7e5;
  color: #3a210f;
  transform: translateY(-2px);
}

.picture-quote-band {
  align-items: center;
  backdrop-filter: blur(18px);
  background: rgba(255, 242, 215, 0.58);
  border: 1px solid rgba(255, 250, 231, 0.52);
  border-radius: 8px;
  box-shadow: 0 20px 58px rgba(56, 31, 12, 0.2), var(--pt-inset);
  display: grid;
  gap: clamp(1rem, 3vw, 2rem);
  grid-template-columns: auto 1fr;
  max-width: min(1120px, calc(100% - 2rem));
  padding: clamp(1.15rem, 2.5vw, 1.8rem) clamp(1.25rem, 3vw, 2.4rem);
  position: relative;
  width: 100%;
  z-index: 3;
}

.picture-quote-band span {
  align-items: center;
  background: rgba(255, 255, 255, 0.36);
  border: 1px solid rgba(126, 84, 37, 0.16);
  border-radius: 50%;
  box-shadow: var(--pt-inset);
  color: var(--pt-brown);
  display: inline-flex;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 3rem;
  height: 4.8rem;
  justify-content: center;
  line-height: 1;
  width: 4.8rem;
}

.picture-quote-band p {
  color: var(--pt-umber);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(1.15rem, 2.2vw, 1.85rem);
  line-height: 1.35;
  margin: 0;
  text-align: center;
}

.picture-codes {
  --pt-ink: #352a1b;
  --pt-umber: #6a5536;
  --pt-brown: #8d7448;
  --pt-gold: #c99a38;
  --pt-bright-gold: #f3cf7a;
  --pt-smoke: rgba(68, 56, 38, 0.74);
  --pt-line: rgba(176, 145, 87, 0.22);
  --pt-line-strong: rgba(176, 145, 87, 0.38);
  --pt-panel: rgba(255, 255, 248, 0.52);
  --pt-panel-strong: rgba(255, 255, 252, 0.76);
  --pt-shadow: 0 22px 70px rgba(139, 109, 61, 0.14), 0 0 42px rgba(255, 255, 255, 0.3);
  --pt-inset: inset 1px 1px 0 rgba(255, 255, 255, 0.66), inset -10px -10px 26px rgba(255, 255, 255, 0.2);

  background:
    radial-gradient(circle at 50% 7%, rgba(255, 255, 255, 0.9), transparent 25rem),
    linear-gradient(180deg, #f2ead8 0%, #fffaf0 34%, #f7f5e8 68%, #edf5ef 100%);
  min-height: 100vh;
  overflow: hidden;
  padding: clamp(6rem, 9vw, 9rem) 0;
  position: relative;
}

html[data-theme="dark"] body.picture-this .picture-codes {
  --pt-ink: #fff3dc;
  --pt-umber: #f1d099;
  --pt-brown: #d9b36f;
  --pt-gold: #ffd378;
  --pt-bright-gold: #ffe7ad;
  --pt-smoke: rgba(255, 231, 194, 0.78);
  --pt-line: rgba(255, 216, 139, 0.2);
  --pt-line-strong: rgba(255, 216, 139, 0.34);
  --pt-panel: rgba(20, 32, 32, 0.48);
  --pt-panel-strong: rgba(27, 42, 42, 0.68);
  --pt-shadow: 0 26px 76px rgba(0, 0, 0, 0.42), 0 0 34px rgba(255, 208, 112, 0.08);
  --pt-inset: inset 1px 1px 0 rgba(255, 246, 219, 0.12), inset -8px -8px 22px rgba(0, 0, 0, 0.12);

  background:
    radial-gradient(circle at 50% 8%, rgba(255, 213, 124, 0.16), transparent 28rem),
    radial-gradient(circle at 74% 30%, rgba(96, 139, 126, 0.16), transparent 28rem),
    linear-gradient(180deg, #0b1111 0%, #101b1b 42%, #07100f 100%);
}

.picture-bg-art {
  background:
    linear-gradient(180deg, rgba(255, 255, 248, 0.28) 0%, rgba(255, 255, 248, 0.56) 40%, rgba(255, 255, 248, 0.24) 100%),
    url("../images/picture-this/context-codes-air-bg.png") center top / cover no-repeat;
  filter: saturate(0.94) contrast(0.96) brightness(1.05);
  inset: 0;
  opacity: 0.92;
  position: absolute;
}

html[data-theme="dark"] body.picture-this .picture-bg-art {
  background:
    linear-gradient(180deg, rgba(7, 12, 12, 0.62) 0%, rgba(7, 16, 15, 0.74) 42%, rgba(5, 10, 10, 0.88) 100%),
    linear-gradient(90deg, rgba(6, 12, 12, 0.42), transparent 36%, rgba(5, 10, 10, 0.42)),
    url("../images/picture-this/context-codes-air-bg.png") center top / cover no-repeat;
  filter: saturate(0.68) contrast(1.02) brightness(0.62);
  opacity: 0.95;
}

.picture-bg-art::before {
  background:
    radial-gradient(circle at 77% 14%, rgba(255, 255, 255, 0.58), transparent 16rem),
    radial-gradient(circle at 50% 4%, rgba(255, 225, 148, 0.22), transparent 24rem),
    linear-gradient(180deg, rgba(255, 255, 250, 0.24), transparent 42%);
  content: "";
  inset: 0;
  opacity: 0.88;
  position: absolute;
}

.picture-bg-art::after {
  background:
    radial-gradient(ellipse at 50% 44%, rgba(255, 255, 250, 0.52), transparent 36rem),
    linear-gradient(90deg, rgba(255, 252, 241, 0.12), transparent 30%, transparent 70%, rgba(255, 252, 241, 0.12));
  content: "";
  inset: 0;
  position: absolute;
}

html[data-theme="dark"] body.picture-this .picture-bg-art::after {
  background:
    radial-gradient(ellipse at 50% 42%, rgba(255, 212, 127, 0.08), transparent 32rem),
    linear-gradient(90deg, rgba(3, 8, 8, 0.34), transparent 34%, transparent 66%, rgba(3, 8, 8, 0.34));
}

.picture-codes__inner {
  position: relative;
  z-index: 1;
}

.picture-channel-bar,
.picture-panel,
.context-code-grid article,
.picture-closing-panel {
  backdrop-filter: blur(22px) saturate(1.08);
  background: var(--pt-panel);
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 8px;
  box-shadow: var(--pt-shadow);
}

html[data-theme="dark"] body.picture-this .picture-channel-bar,
html[data-theme="dark"] body.picture-this .picture-panel,
html[data-theme="dark"] body.picture-this .context-code-grid article,
html[data-theme="dark"] body.picture-this .picture-closing-panel {
  background:
    linear-gradient(145deg, rgba(34, 48, 48, 0.58), rgba(10, 19, 19, 0.5));
  border-color: rgba(255, 232, 186, 0.2);
}

.picture-channel-bar {
  align-items: center;
  display: grid;
  gap: clamp(1rem, 2vw, 1.6rem);
  grid-template-columns: auto 1fr auto;
  margin: 0 auto clamp(4rem, 7vw, 6rem);
  max-width: 1120px;
  padding: clamp(0.9rem, 1.7vw, 1.15rem) clamp(1rem, 2.4vw, 1.6rem);
}

.picture-symbol {
  align-items: center;
  background: rgba(255, 255, 255, 0.34);
  border: 1px solid rgba(255, 255, 255, 0.66);
  border-radius: 50%;
  box-shadow: var(--pt-inset);
  color: var(--pt-gold);
  display: inline-flex;
  font-size: 2.15rem;
  height: 3.5rem;
  justify-content: center;
  width: 3.5rem;
}

.picture-channel-bar p {
  color: var(--pt-ink);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(1.02rem, 1.45vw, 1.32rem);
  line-height: 1.35;
  margin: 0;
}

html[data-theme="dark"] body.picture-this .picture-channel-bar p {
  color: rgba(255, 239, 210, 0.96);
}

.picture-channel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  justify-content: flex-end;
}

.picture-chip {
  background: rgba(255, 255, 252, 0.52);
  border-color: rgba(255, 255, 255, 0.78);
  color: var(--pt-umber);
  min-height: 3rem;
  min-width: 8rem;
  padding-inline: 1.15rem;
}

.picture-chip::before {
  background: #e62117;
  border-radius: 4px;
  content: "";
  height: 0.8rem;
  margin-right: 0.6rem;
  width: 1.1rem;
}

.picture-chip--substack::before {
  background: #ff6719;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 72%, 0 100%);
}

.picture-section-head {
  margin: 0 auto clamp(2.8rem, 5vw, 4.5rem);
  max-width: 920px;
  text-align: center;
}

.picture-flourish {
  background:
    linear-gradient(90deg, transparent, var(--pt-gold), transparent);
  display: block;
  height: 1px;
  margin: 0 auto 1.2rem;
  max-width: 20rem;
  position: relative;
}

.picture-flourish::after {
  background: var(--pt-bright-gold);
  border: 1px solid rgba(87, 50, 18, 0.22);
  border-radius: 50%;
  box-shadow: 0 0 18px rgba(255, 216, 139, 0.72);
  content: "";
  height: 0.7rem;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 0.7rem;
}

.picture-codes h2 {
  color: var(--pt-ink);
  font-size: clamp(2.6rem, 5vw, 5.1rem);
  line-height: 1;
}

.picture-section-head p {
  color: var(--pt-smoke);
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  margin-top: 1rem;
}

html[data-theme="dark"] body.picture-this .picture-section-head p {
  color: rgba(255, 220, 164, 0.88);
}

.picture-feature-grid {
  display: grid;
  gap: clamp(1.4rem, 3vw, 2rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

.picture-panel {
  padding: clamp(1.5rem, 3vw, 2.4rem);
}

.picture-panel h3 {
  color: var(--pt-ink);
  font-size: clamp(1.85rem, 3vw, 3rem);
  line-height: 1.05;
  margin-bottom: 1.35rem;
}

.picture-panel p {
  color: var(--pt-smoke);
  font-size: 1.03rem;
  line-height: 1.75;
}

html[data-theme="dark"] body.picture-this .picture-panel p {
  color: rgba(255, 222, 171, 0.88);
}

.picture-panel p + p {
  margin-top: 1.1rem;
}

.picture-video-frame {
  aspect-ratio: 16 / 9;
  background: rgba(255, 255, 250, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.56);
  border-radius: 8px;
  box-shadow:
    0 18px 38px rgba(107, 88, 48, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.52);
  margin-top: clamp(1.4rem, 3vw, 2rem);
  overflow: hidden;
  position: relative;
  width: 100%;
}

.picture-video-frame a,
.picture-video-frame img {
  display: block;
  height: 100%;
  width: 100%;
}

.picture-video-frame a {
  color: var(--pt-parchment-strong);
  overflow: hidden;
  position: relative;
  text-decoration: none;
}

.picture-video-frame img {
  filter: sepia(0.08) saturate(0.82) contrast(0.92) brightness(1.02);
  object-fit: cover;
  transform: scale(1.02);
  transition: filter 420ms var(--ease), transform 420ms var(--ease);
}

.picture-video-frame a::before {
  background:
    radial-gradient(circle at 50% 46%, rgba(255, 255, 248, 0.12), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 248, 0.04), rgba(45, 34, 20, 0.32));
  content: "";
  inset: 0;
  position: absolute;
  z-index: 1;
}

.picture-video-frame__play {
  align-items: center;
  background: rgba(255, 242, 215, 0.9);
  border: 1px solid rgba(255, 250, 231, 0.72);
  border-radius: 50%;
  box-shadow:
    0 14px 32px rgba(31, 17, 8, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  display: inline-flex;
  height: clamp(3.4rem, 7vw, 4.8rem);
  justify-content: center;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: transform 260ms var(--ease), background-color 260ms var(--ease);
  width: clamp(3.4rem, 7vw, 4.8rem);
  z-index: 2;
}

.picture-video-frame__play::before {
  border-bottom: 0.62rem solid transparent;
  border-left: 0.9rem solid var(--pt-umber);
  border-top: 0.62rem solid transparent;
  content: "";
  margin-left: 0.2rem;
}

.picture-video-frame__label {
  background: rgba(31, 17, 8, 0.72);
  border: 1px solid rgba(255, 216, 139, 0.18);
  border-radius: 8px;
  bottom: 1rem;
  color: rgba(255, 242, 215, 0.92);
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 700;
  left: 1rem;
  padding: 0.48rem 0.72rem;
  position: absolute;
  z-index: 2;
}

.picture-video-frame a:hover img,
.picture-video-frame a:focus-visible img {
  filter: sepia(0.08) saturate(1.04) contrast(1.06) brightness(0.92);
  transform: scale(1.055);
}

.picture-video-frame a:hover .picture-video-frame__play,
.picture-video-frame a:focus-visible .picture-video-frame__play {
  background: rgba(255, 248, 230, 0.98);
  transform: translate(-50%, -50%) scale(1.06);
}

.picture-panel--guide {
  align-items: center;
  display: grid;
  gap: clamp(1.2rem, 3vw, 2.2rem);
  grid-template-columns: minmax(7.5rem, 0.38fr) minmax(0, 1fr);
  text-align: left;
}

.da-light {
  align-items: center;
  aspect-ratio: 1;
  background:
    radial-gradient(circle at 42% 30%, #fffdf4 0 8%, #f7d891 19%, rgba(207, 157, 63, 0.82) 46%, rgba(167, 123, 55, 0.48) 100%);
  border: 1px solid rgba(255, 255, 255, 0.76);
  border-radius: 50%;
  box-shadow:
    0 0 0 0.8rem rgba(255, 255, 255, 0.3),
    0 0 56px rgba(255, 216, 139, 0.38),
    var(--pt-inset);
  display: inline-flex;
  justify-content: center;
  grid-row: span 3;
  justify-self: center;
  margin: 0;
  max-width: 180px;
  width: min(12rem, 100%);
}

.da-light span {
  aspect-ratio: 1;
  background:
    conic-gradient(from 90deg, transparent 0 12deg, rgba(255, 250, 231, 0.82) 12deg 18deg, transparent 18deg 30deg);
  border-radius: 50%;
  width: 70%;
}

.context-code-grid {
  display: grid;
  gap: clamp(0.75rem, 1.2vw, 1rem);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.context-code-grid article {
  align-items: center;
  display: grid;
  gap: 0.9rem;
  grid-template-columns: auto 1fr;
  min-height: 5.4rem;
  padding: 0.85rem 1rem;
  transition:
    background-color 240ms var(--ease),
    border-color 240ms var(--ease),
    box-shadow 240ms var(--ease),
    transform 240ms var(--ease);
}

.context-code-grid article:hover {
  background: var(--pt-panel-strong);
  border-color: rgba(201, 154, 56, 0.4);
  box-shadow: 0 20px 44px rgba(126, 103, 55, 0.14), 0 0 24px rgba(255, 255, 255, 0.28);
  transform: translateY(-2px);
}

html[data-theme="dark"] body.picture-this .context-code-grid article:hover {
  background:
    linear-gradient(145deg, rgba(44, 64, 62, 0.72), rgba(13, 24, 23, 0.72));
  border-color: rgba(255, 199, 106, 0.44);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.46), 0 0 22px rgba(255, 195, 94, 0.12);
}

.context-code-grid span {
  align-items: center;
  background: rgba(255, 255, 252, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 50%;
  box-shadow: var(--pt-inset);
  color: var(--pt-gold);
  display: inline-flex;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(1.25rem, 2vw, 1.8rem);
  height: 3.45rem;
  justify-content: center;
  width: 3.45rem;
}

html[data-theme="dark"] body.picture-this .context-code-grid span {
  background: rgba(255, 231, 184, 0.13);
  border-color: rgba(255, 216, 139, 0.28);
  color: var(--pt-bright-gold);
}

.context-code-grid p {
  color: var(--pt-ink);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(0.92rem, 1.08vw, 1.08rem);
  line-height: 1.36;
  margin: 0;
}

html[data-theme="dark"] body.picture-this .context-code-grid p {
  color: rgba(255, 232, 192, 0.94);
}

.picture-closing-panel {
  align-items: center;
  display: grid;
  gap: 1.5rem;
  grid-template-columns: auto 1fr auto;
  margin-top: clamp(2.2rem, 5vw, 4rem);
  padding: clamp(1rem, 2.5vw, 1.75rem);
}

.picture-sun-mark {
  aspect-ratio: 1;
  background:
    repeating-conic-gradient(from 0deg, rgba(213, 154, 58, 0.9) 0 5deg, transparent 5deg 12deg),
    radial-gradient(circle, var(--pt-bright-gold) 0 22%, transparent 23%);
  border-radius: 50%;
  width: clamp(4rem, 7vw, 6rem);
}

.picture-closing-panel h2 {
  font-size: clamp(1.9rem, 4vw, 3.4rem);
}

body.picture-this .footer {
  background: #1f1108;
  border-top-color: rgba(255, 216, 139, 0.18);
}

@keyframes truthCore {
  0%,
  100% {
    filter: brightness(1) saturate(1);
    box-shadow:
      0 0 34px rgba(255, 224, 133, 0.88),
      0 0 118px rgba(255, 201, 79, 0.54),
      0 14px 28px rgba(89, 49, 10, 0.28),
      var(--pt-inset);
    transform: translateZ(34px) scale(1);
  }
  50% {
    filter: brightness(1.18) saturate(1.12);
    box-shadow:
      0 0 48px rgba(255, 241, 183, 0.98),
      0 0 160px rgba(255, 210, 92, 0.76),
      0 0 230px rgba(255, 179, 47, 0.28),
      0 16px 34px rgba(89, 49, 10, 0.3),
      var(--pt-inset);
    transform: translateZ(38px) scale(1.025);
  }
}

@keyframes truthOrbit {
  from { transform: rotateZ(0deg); }
  to { transform: rotateZ(360deg); }
}

@keyframes truthRingTrace {
  from { transform: rotateZ(0deg); }
  to { transform: rotateZ(360deg); }
}

@media (max-width: 1080px) {
  .picture-hero {
    align-items: center;
  }

  .picture-hero__content {
    margin-top: 14rem;
    width: min(720px, calc(100vw - 3rem));
  }

  .picture-channel-bar,
  .picture-feature-grid,
  .picture-closing-panel {
    grid-template-columns: 1fr;
  }

  .picture-panel--guide {
    grid-template-columns: minmax(7rem, 0.28fr) minmax(0, 1fr);
  }

  .picture-channel-actions {
    justify-content: flex-start;
  }

  .context-code-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .picture-hero {
    --truth-orb-top: 4.35rem;

    min-height: 100vh;
    min-height: max(100svh, 920px);
    padding: 5rem 1rem 4rem;
  }

  .picture-stage {
    width: max(182vw, calc(100vh * 1.777));
  }

  .truth-orb__reveal {
    width: min(22rem, calc(100% - 1.5rem));
  }

  .truth-orb__reveal span,
  .truth-orb__reveal strong {
    white-space: normal;
  }

  .picture-hero__content {
    margin-top: 13rem;
    max-width: 100%;
    padding: 1.35rem;
    text-align: center;
    width: calc(100vw - 2rem);
  }

  .picture-hero h1 {
    font-size: clamp(1.02rem, 4.55vw, 1.16rem);
    line-height: 1.18;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
  }

  .picture-hero h1 span {
    white-space: nowrap;
  }

  .picture-hero__content p {
    font-size: 0.8rem;
    line-height: 1.52;
  }

  .picture-hero__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .picture-btn {
    width: 100%;
  }

  .picture-quote-band {
    grid-template-columns: 1fr;
    padding: 1rem;
  }

  .picture-quote-band span {
    height: 3.8rem;
    width: 3.8rem;
  }

  .picture-quote-band p {
    font-size: 1rem;
    text-align: left;
  }

  .picture-codes {
    padding: 5rem 0;
  }

  .picture-panel--guide {
    justify-items: center;
    grid-template-columns: 1fr;
    text-align: center;
  }

  .da-light {
    grid-row: auto;
    width: min(12rem, 60vw);
  }

  .picture-channel-bar {
    padding: 1rem;
  }

  .picture-channel-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .context-code-grid {
    grid-template-columns: 1fr;
  }

  .picture-chip {
    width: 100%;
  }

  .context-code-grid article {
    align-items: start;
    grid-template-columns: 1fr;
  }

  .context-code-grid span {
    height: 3.8rem;
    width: 3.8rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .truth-orb__core {
    animation-duration: 8s;
  }

  .truth-orb__orbit,
  .truth-orb__ring::before {
    animation-duration: 18s;
  }

  .picture-scene {
    transition-duration: 1400ms;
  }
}