@font-face {
  font-family: "Futura";
  src: url("fonts/FuturaCyrillicLight.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: "Futura";
  src: url("fonts/FuturaCyrillicBook.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Futura";
  src: url("fonts/FuturaCyrillicMedium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "Futura";
  src: url("fonts/FuturaCyrillicDemi.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: "Futura";
  src: url("fonts/FuturaCyrillicBold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "Futura";
  src: url("fonts/FuturaCyrillicExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family: "Futura";
  src: url("fonts/FuturaCyrillicHeavy.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
}

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

img {
  max-width: 100%;
  height: auto;
}

html {
  background: #000;
  overflow-x: hidden;
  overscroll-behavior-y: none;
}

@media (min-width: 481px) {
  html {
    scrollbar-gutter: stable;
  }
}

body {
  background-color: #000;
  color: #fff;
  font-family: "Futura", "Helvetica Neue", Helvetica, Arial, sans-serif;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

a {
  color: #fff;
  text-decoration: none;
}

/* ── Header / Logo ── */

.site-header {
  --header-pad: 2.1vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 var(--header-pad);
}

.site-header > a {
  display: block;
}

.site-logo {
  height: 13vw;
  width: 41.7vw;
  max-width: 90vw;
  transition: height 0.3s ease, width 0.3s ease;
}

@media (min-width: 481px) {
  /* Desktop logo size */
  :root {
    --logo-h: clamp(90px, 7vw, 130px);
  }

  .site-logo {
    height: var(--logo-h);
    width: calc(var(--logo-h) * 3.21);
  }

  .site-header hr {
    max-width: calc(var(--logo-h) * 2.4);
  }
}

.site-logo svg {
  width: 100%;
  height: 100%;
}

.site-header hr {
  width: 100%;
  border: none;
  height: 3px;
  background: #fff;
  border-radius: 1.5px;
  margin-top: 0;
}

/* On the homepage (the slideshow) the line runs corner to corner, out through the header's
   side padding; About and Contact keep the short line under the logo. Kept as a max-width
   (not none) so the homepage intro can still ease it open. Not while intro-pending: that
   rule holds the line at 0 until the intro reads this width and grows it */
body:not(.intro-pending):has(> main.home-page:not(.transition-clone)) .site-header hr {
  width: calc(100% + 2 * var(--header-pad));
  max-width: calc(100% + 2 * var(--header-pad));
  margin-left: calc(-1 * var(--header-pad));
  margin-right: calc(-1 * var(--header-pad));
}

/* ── Main content ── */

main {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: max(50vw, 960px);
  margin: 0 auto;
  padding: 0 max(2.1vw, 40px);
}

/* ── About page ── */

.about-content {
  display: flex;
  gap: 48px;
  padding: 44px 0 64px;
  align-items: flex-start;
}

.about-text {
  flex: 1;
  font-size: 15px;
  line-height: 1.7;
  font-weight: 300;
}

.about-text p {
  margin-bottom: 20px;
}

.about-text p:last-child {
  margin-bottom: 0;
}

.about-headshot {
  width: 420px;
  flex-shrink: 0;
  border-radius: 4px;
}

/* ── Contact form ── */

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 44px 0 64px;
  max-width: 540px;
  margin: 0 auto;
}

.contact-intro {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.7;
  opacity: 0.7;
  margin-bottom: 4px;
}

.form-row {
  display: flex;
  gap: 24px;
}

.form-row input,
.form-row .custom-select {
  flex: 1;
  min-width: 0;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid #fff;
  color: #fff;
  font-family: "Futura", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 300;
  font-size: 14px;
  padding: 8px 0;
  outline: none;
  border-radius: 0;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

/* ── Custom dropdowns ── */

.custom-select {
  position: relative;
  width: 100%;
}

.select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #fff;
  padding: 8px 0;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.select-trigger:hover {
  border-bottom-color: rgba(255, 255, 255, 0.6);
}

.select-label {
  font-family: "Futura", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 300;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
  transition: color 0.2s ease;
}

.custom-select.has-value .select-label {
  color: #fff;
}

.select-arrow {
  color: rgba(255, 255, 255, 0.5);
  transition: transform 0.3s ease, color 0.2s ease;
  flex-shrink: 0;
}

.custom-select.open .select-arrow {
  transform: rotate(180deg);
  color: #fff;
}

.select-options {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  background: #111;
  border: 1px solid rgba(255, 255, 255, 0.15);
  z-index: 100;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.3s ease, opacity 0.2s ease;
}

.custom-select.open .select-options {
  max-height: 300px;
  opacity: 1;
}

.select-options li {
  font-family: "Futura", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 300;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  padding: 10px 12px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.select-options li:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.select-options li.active {
  color: #fff;
}

.contact-form textarea {
  resize: vertical;
}

.contact-form button {
  align-self: flex-start;
  background: transparent;
  border: 1px solid #fff;
  color: #fff;
  font-family: "Futura", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 300;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 10px 32px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.contact-form button:hover {
  background: #fff;
  color: #000;
}

/* ── Still Not Tired page (slide and sections: see "Still Not Tired slide" and "Still Not Tired page, built-out sections" below) ── */

.snt-page {
  max-width: none;
  padding: 0;
}

/* ── Page transitions ── */

.transition-line {
  position: fixed;
  height: 3px;
  background: #fff;
  /* Faint shadow keeps the line readable over light project slides (invisible on black) */
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.35);
  /* Above the wipe clone (9999), whose box starts at y = 0 on headerless pages, and above the
     site header (10002), which on desktop sits over the sidebar (10001) and holds the hr the
     line grows out of and settles back into. It only ever spans the content area, apart from
     the moment it stands in for the homepage's corner-to-corner hr */
  z-index: 10003;
  pointer-events: none;
  opacity: 0;
}

/* Phones: the line runs the full width, UNDER the bar at the top and the footer at the foot
   (both 10001); the transitions keep it between them (contentTopY / contentBottomY) */
@media (max-width: 480px) {
  .transition-line {
    z-index: 10000;
  }
}

.transition-overlay {
  position: fixed;
  left: 0;
  width: 100%;
  background: #000;
  z-index: 999;
  pointer-events: none;
  opacity: 0;
}

/* ── Image lightbox ── */

.lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  z-index: 10010;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.lightbox.active {
  opacity: 1;
}

.lightbox img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 4px;
  cursor: default;
}

.lightbox-close {
  position: absolute;
  top: 20px;
  right: 24px;
  width: 32px;
  height: 32px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-close::before,
.lightbox-close::after {
  content: '';
  position: absolute;
  width: 24px;
  height: 3px;
  background: #fff;
  border-radius: 2px;
}

.lightbox-close::before {
  transform: rotate(45deg);
}

.lightbox-close::after {
  transform: rotate(-45deg);
}

main[class] img {
  cursor: zoom-in;
}

@font-face {
  font-family: "CurseCasual";
  src: url("fonts/Curse Casual.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Chaloops";
  src: url("fonts/Chaloops-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "CreativeBlock";
  src: url("fonts/CREABBRG.TTF") format("truetype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "GrilledCheese";
  src: url("fonts/GrilledCheeseBTNRegular.TTF") format("truetype");
  font-weight: 400;
  font-style: normal;
}

/* ── Poptropica Legacy page ── */

.legacy-page {
  max-width: none;
  padding: 0;
  flex: none;
}

@media (min-width: 481px) {
}

.legacy-hero-desc {
  max-width: 950px;
  margin: 0 auto;
  font-family: "CreativeBlock", sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.15;
  text-align: left;
  text-indent: 2em;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #fff;
  background: #1f82f2;
  border-radius: 12px;
  padding: 24px 32px;
}

/* Sections */
.legacy-section {
  padding: 32px 40px 60px;
  overflow: visible;
}

.legacy-section-inner {
  max-width: 1100px;
  margin: 0 auto;
  overflow: visible;
}

.legacy-section-title {
  text-align: center;
  text-transform: uppercase;
  font-family: "GrilledCheese", sans-serif;
  font-weight: 400;
  font-size: 56px;
  letter-spacing: -0.5px;
  margin-bottom: 40px;
}

.legacy-section-subtitle {
  text-align: center;
  text-transform: uppercase;
  font-family: "GrilledCheese", sans-serif;
  font-weight: 400;
  font-size: 42px;
  letter-spacing: -0.5px;
  margin-bottom: 32px;
}

/* Section backgrounds */
.legacy-section {
  color: #fff;
  background: #34a8ff;
}

.legacy-section-dark {
  background: #1f82f2;
}

.legacy-section-gray {
  background: #808080;
}

.legacy-desc {
  background: #34a8ff;
  padding: 32px 40px;
}

/* Grids */
.legacy-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.legacy-grid-3.legacy-grid-tight {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
}

.legacy-grid-3.legacy-grid-tight > * {
  width: 220px;
}

.legacy-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}

.legacy-grid-4 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

/* Grid items */
.legacy-grid-item {
  text-align: center;
}

.legacy-grid-item img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

/* Brand items */
.legacy-brand-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.legacy-brand-item img {
  max-width: 280px;
  height: 100px;
  width: auto;
  object-fit: contain;
}

.legacy-brand-top img {
  height: 180px;
  max-width: 360px;
}

/* Three 360px logos don't fit below ~1280px: let each logo shrink to its grid cell
   (object-fit keeps the artwork centred in the 180px-tall box) */
@media (min-width: 481px) and (max-width: 1280px) {
  .legacy-brand-top img {
    width: 100%;
    max-width: 360px;
  }
}

.legacy-brand-caption {
  font-family: "CreativeBlock", sans-serif;
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: 0.6;
}

.legacy-divider {
  text-align: center;
  margin: 32px auto;
  max-width: 420px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.legacy-divider::before,
.legacy-divider::after {
  content: '';
  flex: 1;
  border-top: 2px solid rgba(255, 255, 255, 0.4);
}

.legacy-divider span {
  font-family: "CreativeBlock", sans-serif;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.7);
  white-space: nowrap;
}

.legacy-brand-icons {
  text-align: center;
  margin-top: 32px;
}

.legacy-brand-icons img {
  max-width: 400px;
  width: 60%;
  height: auto;
}

/* Description box (reusable rounded blue box) */
.legacy-desc-box {
  background: #1f82f2;
  border-radius: 12px;
  padding: 20px 28px;
  margin-bottom: 32px;
}

.legacy-desc-with-cap {
  position: relative;
  margin-left: 80px;
  padding-left: 70px;
}

.legacy-desc-cap {
  position: absolute;
  left: -70px;
  top: 50%;
  transform: translateY(-50%);
  width: 130px;
  height: auto;
}

.legacy-body-text {
  font-family: "CreativeBlock", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.3;
  text-align: center;
  text-transform: uppercase;
  color: #fff;
}

/* Comparison table */
.legacy-comparison-table {
  width: 100%;
  border-collapse: collapse;
  position: relative;
  font-family: "CreativeBlock", sans-serif;
  font-size: 13px;
  text-transform: uppercase;
  text-align: center;
  color: #fff;
  table-layout: fixed;
}

.legacy-comparison-table col.legacy-col-as2,
.legacy-comparison-table col.legacy-col-as3 {
  width: 25%;
}

.legacy-comparison-table col.legacy-col-legacy {
  width: 50%;
}

.legacy-comparison-table thead th {
  font-family: "GrilledCheese", sans-serif;
  font-size: 22px;
  font-weight: 400;
  color: #fff;
  padding: 8px 4px;
  text-transform: uppercase;
  vertical-align: bottom;
}

.legacy-comparison-table thead tr:nth-child(2) th {
  font-family: "GrilledCheese", sans-serif;
  font-size: 16px;
  color: #fff;
  padding-bottom: 12px;
}

.legacy-table-sub {
  font-family: "GrilledCheese", sans-serif;
  font-size: 16px;
  font-weight: 400;
}

.legacy-comparison-table td {
  padding: 6px 16px;
  line-height: 1.3;
  position: relative;
}

.legacy-comparison-table td:not(:first-child)::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #fff;
  border-radius: 0;
}

.legacy-comparison-table td:nth-child(2)::before {
  background: rgba(255, 255, 255, 0.5);
}

.legacy-comparison-table tbody tr:last-child td:not(:first-child)::before {
  bottom: -20px;
  border-radius: 0 0 3px 3px;
}

.legacy-comparison-table thead th {
  position: relative;
}

.legacy-comparison-table thead tr:first-child th:not(:first-child)::before,
.legacy-comparison-table thead tr:nth-child(2) th:not(:first-child)::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #fff;
  border-radius: 0;
}

.legacy-comparison-table thead tr:nth-child(2) th:nth-child(2)::before {
  background: rgba(255, 255, 255, 0.5);
}

.legacy-comparison-table tbody tr:nth-child(odd) {
  background: #1f82f2;
}

.legacy-table-highlight {
  color: #fff;
  font-weight: 400;
  font-size: 19px;
}

.legacy-website-preview img {
  max-width: 600px;
  margin: 0 auto;
}

.legacy-comparison-videos {
  max-width: 1300px;
  margin-left: auto;
  margin-right: auto;
}

.legacy-video-wrap {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: 8px;
}

.legacy-video-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Platform club section */
.legacy-platform-club {
  text-align: center;
}

.legacy-club-logo {
  max-width: 420px;
  width: 70%;
  height: auto;
  display: block;
  margin: 0 auto 24px;
}

/* Marketing + Promotion grid */
.legacy-marketing-grid {
  display: flex;
  gap: 24px;
  justify-content: center;
}

.legacy-marketing-right {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 55%;
  flex-shrink: 0;
}

.legacy-marketing-right img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

.legacy-marketing-left img {
  height: 100%;
  width: auto;
  display: block;
  border-radius: 8px;
}

/* Stats banner */
.legacy-stats {
  background: #34a8ff;
  padding: 40px 40px;
  text-align: center;
}

.legacy-stats-text {
  font-family: "GrilledCheese", sans-serif;
  font-size: 28px;
  font-weight: 400;
  color: #fff;
  text-transform: uppercase;
}

/* Expansion content */
.legacy-expansion-compare {
  display: flex;
  gap: 40px;
  align-items: stretch;
}

.legacy-expansion-col {
  flex: 1;
  text-align: center;
}

.legacy-expansion-divider {
  width: 3px;
  background: #fff;
  border-radius: 3px;
  flex-shrink: 0;
}

.legacy-expansion-logo {
  max-width: 200px;
  height: 80px;
  object-fit: contain;
  margin: 0 auto 20px;
  display: block;
}

.legacy-expansion-info {
  width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
}

.legacy-comparison-images {
  align-items: end;
}

.legacy-comparison-images .legacy-grid-item img {
  max-height: 400px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  margin: 0 auto;
}

/* ── Responsive ── */

@media (max-width: 720px) {
  .about-content {
    flex-direction: column;
    align-items: center;
  }

  .about-headshot {
    width: 100%;
    max-width: 320px;
    order: -1;
  }

  .about-text {
    text-align: center;
  }

  .form-row {
    flex-direction: column;
    gap: 28px;
  }

  .legacy-grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .legacy-grid-3.legacy-grid-tight {
    gap: 24px;
  }

  .legacy-grid-3.legacy-grid-tight > * {
    width: 160px;
  }

  .legacy-grid-2 {
    grid-template-columns: 1fr;
  }

  .legacy-marketing-grid {
    gap: 12px;
  }

  .legacy-marketing-right {
    gap: 12px;
  }
}

@media (max-width: 480px) {
  .site-logo {
    height: 150px;
    width: 100%;
  }

  .site-header {
    --header-pad: 24px;
  }

  .site-header hr {
    max-width: 600px;
  }

  .site-logo {
    height: 150px;
    width: 100%;
  }

  main {
    max-width: 960px;
    padding: 0 24px;
  }

  .legacy-hero-desc {
    font-size: 12px;
    text-indent: 1em;
  }

  .legacy-desc-with-cap {
    margin-left: 50px;
    padding-left: 40px;
  }

  .legacy-desc-with-cap {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: 0;
    padding-left: 20px;
  }

  .legacy-desc-cap {
    position: static;
    transform: none;
    width: 55px;
    flex-shrink: 0;
  }

  .legacy-section {
    padding: 24px 24px;
  }

  .legacy-grid-3 {
    grid-template-columns: 1fr;
  }

  .legacy-island-cards {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }

  .legacy-grid-4 {
    grid-template-columns: 1fr;
  }

  .legacy-section-title {
    font-size: 22px;
    margin-bottom: 16px;
  }

  .legacy-section-subtitle {
    font-size: 17px;
    margin-bottom: 12px;
  }

  .legacy-comparison-table {
    font-size: 10px;
  }

  .legacy-comparison-table thead th {
    font-size: 14px;
  }

  .legacy-comparison-table thead tr:nth-child(2) th {
    font-size: 12px;
  }

  .legacy-comparison-table td {
    padding: 4px 8px;
  }

  .legacy-expansion-compare {
    gap: 12px;
  }

  .legacy-expansion-logo {
    max-width: 120px;
    height: 50px;
    margin-bottom: 12px;
  }

  .legacy-brand-item img {
    max-width: 100%;
    height: auto;
  }

  .legacy-brand-item.legacy-brand-top img {
    max-width: 80%;
    height: auto;
  }

  .legacy-grid-3.legacy-grid-tight {
    gap: 16px;
  }

  .legacy-grid-3.legacy-grid-tight > * {
    width: 120px;
  }

  .legacy-section-inner {
    overflow: visible;
  }
}

/* ── The Cannoli Hole page ── */

.ch-page {
  max-width: none;
  padding: 0;
  flex: none;
  font-family: "Times New Roman", Times, Georgia, serif;
}

@media (min-width: 481px) {
}

/* Description */
.ch-desc {
  background: #000;
  padding: 28px 40px;
  text-align: left;
  position: relative;
  overflow: visible;
}

.ch-clip {
  position: absolute;
  width: 150px;
  height: auto;
  pointer-events: none;
}

.ch-clip-left {
  left: calc(50% - 360px - 160px);
  top: -60px;
}

.ch-clip-right {
  left: calc(50% + 330px);
  bottom: -50px;
}

.ch-desc-text {
  max-width: 720px;
  margin: 0 auto;
  font-size: 18px;
  line-height: 1.7;
  color: #fff;
  font-style: italic;
  text-align: left;
}

/* Sections */
.ch-section {
  background: #fff;
  color: #000;
  padding: 48px 40px 28px;
}

.ch-section-dark {
  background: #000;
  color: #fff;
}

.ch-section-inner {
  max-width: 960px;
  margin: 0 auto;
}

.ch-section-title {
  text-align: center;
  font-weight: 400;
  font-style: italic;
  font-size: 32px;
  letter-spacing: 1px;
  margin-bottom: 28px;
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.ch-section-title::before,
.ch-section-title::after {
  content: '';
  flex: 1;
  height: 3px;
  border-radius: 1.5px;
  background: #000;
}

.ch-section-dark .ch-section-title::before,
.ch-section-dark .ch-section-title::after {
  background: #fff;
}

.ch-section-sketches {
  padding-bottom: 28px;
}

/* Two-column grid */
.ch-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  align-items: center;
}

/* Image blocks */
.ch-image-block {
  text-align: center;
}

.ch-image-block img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
}

/* Final logo */
.ch-final-logo {
  max-width: 480px;
  margin: 0 auto 48px;
}

.ch-final-logo img {
  border-radius: 0;
}

/* Mockups grid */
.ch-mockups {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.ch-mockup-item img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
}

/* ── Marble Soap & Holistics page ── */

.mb-mockup {
  padding: 32px 0;
  max-width: 650px;
  margin: 0 auto;
}

@media (min-width: 481px) {
}

/* Responsive */
@media (max-width: 480px) {

  .ch-desc {
    padding: 32px 24px;
  }

  .ch-desc-text {
    font-size: 15px;
  }

  .ch-section {
    padding: 32px 24px 8px;
  }

  .ch-section-sketches {
    padding-bottom: 12px;
  }

  .ch-section-title {
    font-size: 24px;
    margin-bottom: 24px;
  }

  .ch-mockups {
    grid-template-columns: 1fr;
  }

  .ch-final-logo {
    margin-bottom: 24px;
  }

  .ch-grid-2 {
    grid-template-columns: 1fr;
  }

  .ch-clip {
    width: 80px;
  }

  .ch-clip-left {
    top: -30px;
    left: 10px;
  }

  .ch-clip-right {
    bottom: -30px;
    left: auto;
    right: 10px;
  }
}

/* ── Witch Hotel page ── */

.wh-page {
  max-width: none;
  padding: 0;
  flex: none;
  background: #2a1960;
  color: #fff;
}

@media (min-width: 481px) {
}

/* Description */
.wh-desc {
  background: #1a0f42;
  padding: 36px 40px;
  text-align: center;
}

.wh-section-inner {
  max-width: 960px;
  margin: 0 auto;
}

.wh-desc-text {
  max-width: 780px;
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.7;
  color: #e8e3f5;
  font-weight: 300;
  text-align: left;
}

/* Artwork grid: sketch-to-final pairs */
.wh-artworks {
  background: #2a1960;
  padding: 56px 40px 32px;
}

.wh-art-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  align-items: stretch;
}

.wh-art-item {
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}

.wh-art-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.wh-art-sketch {
  background: #fff;
}

/* Albums */
.wh-albums {
  background: #2a1960;
  padding: 24px 40px 72px;
}

.wh-album-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.wh-album-item {
  aspect-ratio: 1 / 1;
  border-radius: 4px;
  overflow: hidden;
  background: #000;
}

.wh-album-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Responsive */
@media (max-width: 480px) {

  .wh-desc {
    padding: 28px 24px;
  }

  .wh-desc-text {
    font-size: 15px;
  }

  .wh-artworks {
    padding: 32px 20px 16px;
  }

  .wh-art-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .wh-albums {
    padding: 16px 20px 48px;
  }

  .wh-album-grid {
    gap: 12px;
  }
}

/* ── Legends of Palimpagos page ── */

.lop-page {
  max-width: none;
  padding: 0;
  flex: none;
  overflow-x: clip;
}

/* Description */
.lop-desc {
  background: #e8c592;
  padding: 70px 40px 44px;
}

@media (max-width: 1440px) {
  .lop-desc {
    padding-top: 90px;
  }
}

@media (max-width: 1280px) {
  .lop-desc {
    padding-top: 110px;
  }
}

.lop-desc-text {
  max-width: 800px;
  margin: 0 auto;
  font-family: "CurseCasual", sans-serif;
  font-size: 22px;
  line-height: 1.5;
  font-weight: 400;
  color: #825416;
  text-align: left;
}

/* Sections */
.lop-section {
  padding: 48px 40px 40px;
}

.lop-section-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.lop-section-inner-wide {
  max-width: 1430px;
}

.lop-section-title {
  text-align: center;
  font-family: "Chaloops", sans-serif;
  font-weight: 700;
  font-size: 36px;
  letter-spacing: -0.5px;
  color: #fff;
  margin-bottom: 28px;
}

.lop-title-dark {
  color: #3a2a1a;
}

/* Section backgrounds */
.lop-section-gray {
  background: #4a4a4a;
}

.lop-section-dark {
  background: #1a1a1a;
}

.lop-section-tan {
  background: #595959;
  padding-bottom: 48px;
}

/* Image blocks */
.lop-image-block {
  text-align: center;
}

.lop-image-block img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
}

/* Environment art comparison slider */
.lop-compare {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  cursor: ew-resize;
  user-select: none;
  -webkit-user-select: none;
  line-height: 0;
}

.lop-compare-finished {
  display: block;
  width: 100%;
  height: auto;
}

.lop-compare-sketch {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip-path: inset(0 50% 0 0);
}

.lop-compare-sketch img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: ew-resize;
}

.lop-compare-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  z-index: 2;
}

.lop-compare-knob {
  pointer-events: auto;
  cursor: grab;
}

.lop-compare-knob:active {
  cursor: grabbing;
}

.lop-compare-line {
  flex: 1;
  width: 3px;
  background: #fff;
  border-radius: 1.5px;
}

.lop-compare-knob {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid #333;
  flex-shrink: 0;
  position: relative;
}

.lop-compare-knob::before,
.lop-compare-knob::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 0;
  height: 0;
  border-style: solid;
  transform: translateY(-50%);
}

.lop-compare-knob::before {
  left: 5px;
  border-width: 5px 6px 5px 0;
  border-color: transparent #333 transparent transparent;
}

.lop-compare-knob::after {
  right: 5px;
  border-width: 5px 0 5px 6px;
  border-color: transparent transparent transparent #333;
}

.lop-section-warm {
  background: #e8c592;
}

.lop-title-brown {
  color: #6d4120;
}

.lop-section-brown {
  background: #e8c592;
  padding-top: 0;
}

.lop-section-subsection {
  padding-top: 0;
}

.lop-branding-logo {
  max-width: 400px;
  margin: 0 auto;
}

.lop-totem-symbols {
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.lop-subsection-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 32px auto;
  max-width: 400px;
}

.lop-subsection-divider::before,
.lop-subsection-divider::after {
  content: '';
  flex: 1;
  height: 3px;
  background: #fff;
  border-radius: 1.5px;
}

.lop-subsection-divider.lop-title-dark::before,
.lop-subsection-divider.lop-title-dark::after {
  background: rgba(58, 42, 26, 0.4);
}

.lop-subsection-brown {
  color: #825416;
}

.lop-subsection-brown::before,
.lop-subsection-brown::after {
  background: #825416;
}

.lop-subsection-divider span {
  font-family: "CurseCasual", sans-serif;
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  color: inherit;
}

/* Video */
.lop-video-wrap {
  position: relative;
  background: #000;
  line-height: 0;
}

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

.lop-video-fade {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.8s ease;
}

.lop-video-fade.active {
  opacity: 1;
}

/* Video thumbnail */
.lop-video-thumb {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  line-height: 0;
}

.lop-thumb-img {
  width: 100%;
  height: auto;
  display: block;
  transition: opacity 0.5s ease;
}

main[class] .lop-video-thumb img,
.lop-video-thumb video {
  cursor: default;
}

.lop-thumb-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}

.lop-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.lop-video-thumb.paused .lop-play-btn {
  opacity: 1;
}

.lop-video-thumb.playing .lop-thumb-img {
  opacity: 0;
  pointer-events: none;
}

.lop-video-thumb.playing .lop-thumb-video {
  display: block;
}

.lop-mute-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.lop-video-thumb.playing .lop-mute-btn {
  pointer-events: auto;
}

.lop-video-thumb.playing .lop-mute-btn.flash {
  opacity: 1;
}

.lop-video-thumb.playing .lop-mute-btn.faded {
  opacity: 0;
}

.lop-video-thumb.playing:hover .lop-mute-btn {
  opacity: 1;
}

/* Cloud zone */
.lop-cloud-zone {
  position: relative;
  height: 0;
  z-index: 5;
  overflow: visible;
  pointer-events: none;
  contain: size layout;
}

.lop-cloud-wrapper {
  position: absolute;
  left: -1px;
  top: -220px;
  width: 491px;
  height: 440px;
  pointer-events: none;
  overflow: visible;
}

.lop-cloud-wrapper-right {
  left: auto;
  right: -1px;
  transform: scaleX(-1);
}

.lop-cloud-mid {
  position: absolute;
  left: 491px;
  right: 491px;
  top: -30px;
  height: 55px;
  pointer-events: none;
  overflow: visible;
}

.lop-divider.lop-divider-cloud {
  display: none;
}

.lop-divider.lop-divider-mobile {
  display: none;
}

@media (max-width: 480px) {
  .lop-divider.lop-divider-mobile {
    display: block;
  }
}

.cloud-img {
  max-width: none;
  cursor: default;
}

/* Divider */
.lop-divider {
  display: block;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 102vw;
  height: 12px;
  line-height: 0;
  cursor: default;
}

.lop-grid-2 {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

.lop-grid-2 .lop-image-block:first-child {
  flex-shrink: 0;
}

.lop-grid-2 .lop-image-block:last-child {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lop-grid-2 .lop-image-block:last-child img {
  width: auto;
  max-width: 100%;
  display: block;
  margin: 0 auto;
}

.lop-stats {
  background: #e8c592;
  padding: 40px 40px;
  text-align: center;
}

.lop-stats-text {
  font-family: "CurseCasual", sans-serif;
  font-weight: 400;
  font-size: 24px;
  color: #825416;
}

/* Responsive */
@media (max-width: 480px) {

  .lop-desc {
    padding: 28px 24px;
  }

  .lop-desc-text {
    font-size: 13px;
  }

  .lop-section {
    padding: 28px 24px 24px;
  }

  .lop-section-title {
    font-size: 20px;
    margin-bottom: 12px;
  }

  .lop-section {
    padding-top: 16px;
  }

  .lop-section-tan {
    padding-bottom: 24px;
  }

  .lop-section-brown,
  .lop-section-subsection {
    padding-top: 0;
    padding-bottom: 24px;
  }

  .lop-subsection-divider {
    margin: 16px auto;
  }

  .lop-subsection-divider span {
    font-size: 14px;
  }

  .lop-branding-logo {
    max-width: 200px;
  }

  .lop-env-pair {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .lop-grid-2 {
    grid-template-columns: 1fr;
  }

  .lop-divider {
    height: 6px;
  }

  .lop-cloud-wrapper {
    width: 180px;
    height: 100px;
    top: -50px;
  }

  .lop-cloud-mid {
    left: 180px;
    right: 180px;
    top: -12px;
    height: 20px;
  }

  .lop-divider {
    width: 100%;
    left: 0;
    transform: none;
  }
}

/* ── Sidebar (injected by transitions.js) ── */

:root {
  --sidebar-w: 88px;
  --sidebar-icon: 60px;
  --sidebar-item-h: 74px; /* keep in sync with slot height read in transitions.js */
}

body.has-sidebar {
  padding-right: var(--sidebar-w);
}

.site-sidebar {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--sidebar-w);
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #000;
  border-left: 2px solid #fff;
  z-index: 10001;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  transform: translateX(0);
}

.site-sidebar.is-ready {
  transition: transform 0.3s ease;
}

/* Homepage entrance: parked off-screen, then slides in */
.site-sidebar.is-offscreen {
  transform: translateX(calc(100% + 2px));
}

.site-sidebar.is-ready.is-revealing {
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.site-sidebar ul {
  list-style: none;
  width: 100%;
}

/* Current-page arrow, just outside the sidebar; positioned by transitions.js */
.sidebar-indicator {
  position: absolute;
  top: 0;
  right: 100%;
  margin-right: 5px;
  width: 12px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.sidebar-indicator[data-motion="glide"] {
  transition: transform 650ms cubic-bezier(0.65, 0, 0.35, 1), opacity 0.2s ease;
}

.sidebar-indicator[data-motion="hover"] {
  transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s ease;
}

/* Inner arrow: horizontal nudge. Default state springs back with an overshoot */
.sidebar-indicator-arrow {
  display: flex;
  transition: transform 480ms cubic-bezier(0.34, 1.9, 0.5, 1);
}

/* Hovering a sidebar button: arrow backs away from the sidebar */
.sidebar-indicator-arrow.is-hover {
  transform: translateX(-9px);
  transition: transform 220ms ease-out;
}

/* Click: arrow jabs into the sidebar edge */
.sidebar-indicator-arrow.is-pressed {
  transform: translateX(6px);
  transition: transform 110ms cubic-bezier(0.5, 0, 1, 1);
}

.sidebar-indicator.is-hidden,
.site-sidebar.is-offscreen .sidebar-indicator {
  opacity: 0;
}

/* The arrow overlaps project slide art (homepage stage and project pages), some of it
   near-white (Splash Mementos, Marble, Brashier, Legacy), so it carries its own dark
   outline as well as a shadow — the same hardening the chevron already has */
.sidebar-indicator svg {
  width: 10px;
  height: 16px;
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.9)) drop-shadow(0 1px 3px rgba(0, 0, 0, 0.65));
}

.sidebar-indicator svg path {
  stroke: rgba(0, 0, 0, 0.55);
  stroke-width: 1.5;
  /* Stroke behind the fill so the triangle isn't eroded */
  paint-order: stroke fill;
}

.sidebar-mark {
  display: block;
  width: 54px;
  height: 54px;
  margin: 14px 0 8px;
  flex-shrink: 0;
  transition: opacity 0.2s ease;
}

.sidebar-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Desktop: the site header (Home, About, Contact) spans the whole window, over the sidebar, so
   the logo is centred on the page rather than on the content area. The sidebar's mark sits in
   a band as tall as the header, under it: covered while the header is there, revealed as it
   slides up and away into a project page. The nav starts below the band, clear of the header */
@media (min-width: 481px) {
  :root {
    /* The header's height: the logo and the 3px rule under it */
    --header-h: calc(var(--logo-h) + 3px);
  }

  body.has-sidebar .site-header {
    position: relative;
    /* Above the sidebar (10001), under the transition line and wave (10003) */
    z-index: 10002;
    margin-right: calc(-1 * var(--sidebar-w));
    background: #000;
  }


  .sidebar-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: var(--header-h);
    margin: 0 0 6px;
  }

  .sidebar-mark img {
    width: 54px;
    height: 54px;
  }
}

.sidebar-nav {
  flex-shrink: 0;
  /* No rule under the nav (Andrew's call): the gap alone separates it from the reel */
  padding-bottom: 22px;
}

.sidebar-nav a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 58px;
  font-size: 27px;
  font-weight: 700;
  line-height: 1;
  transition: opacity 0.2s ease;
}

.sidebar-nav svg {
  width: 27px;
  height: 27px;
}

/* Infinite "slot machine" reel — items are absolutely positioned by JS */
.sidebar-projects {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  touch-action: none;
  cursor: grab;
  user-select: none;
  --reel-fade: 64px;
  -webkit-mask-image: linear-gradient(transparent, #000 var(--reel-fade), #000 calc(100% - var(--reel-fade)), transparent);
  mask-image: linear-gradient(transparent, #000 var(--reel-fade), #000 calc(100% - var(--reel-fade)), transparent);
}

.sidebar-projects.is-dragging {
  cursor: grabbing;
}

.sidebar-projects li {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--sidebar-item-h);
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform;
}

.sidebar-project {
  position: relative;
  display: block;
  width: var(--sidebar-icon);
  height: var(--sidebar-icon);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.sidebar-project img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  -webkit-user-drag: none;
}

a.sidebar-project:hover {
  transform: scale(1.08);
}

.sidebar-projects.is-dragging a.sidebar-project:hover {
  transform: none;
}

.sidebar-project.is-soon {
  opacity: 0.35;
  cursor: inherit;
}

.sidebar-mark:hover,
.sidebar-nav a:hover {
  opacity: 0.7;
}

.sidebar-more {
  flex-shrink: 0;
  width: 100%;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  border: none;
  color: #fff;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.sidebar-more:hover {
  opacity: 0.7;
}

.sidebar-more svg {
  width: 28px;
  height: 28px;
}

.sidebar-tooltip {
  position: fixed;
  z-index: 10002;
  padding: 6px 10px;
  background: #fff;
  color: #000;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.3px;
  white-space: nowrap;
  border-radius: 3px;
  pointer-events: none;
  opacity: 0;
  transform: translate(6px, -50%);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.sidebar-tooltip.visible {
  opacity: 1;
  transform: translate(0, -50%);
}

/* The phone footer (injected by transitions.js): only shown on a phone, see below */
.site-footer {
  display: none;
}

/* ── Phones: the sidebar becomes a bar under the header, its links a footer ──
   The bar is in the page's flow between the header and <main> (transitions.js puts it there)
   and sticks to the top once the header has scrolled away; on a project page, which has no
   header, it is simply the top of the page. It holds only the reel, turned on its side, with
   the current-page arrow hanging under it and pointing up. The Home/About/Contact/Support links
   and the work menu's button are moved into the footer, which sticks to the foot of the window
   and masks the page at its top edge (see "Phone footer" in transitions.js). A slide fills the
   space between the two. --sidebar-w is 0 here: nothing is beside the content any more. */
@media (max-width: 480px) {
  :root {
    --sidebar-w: 0px;
    --sidebar-icon: 42px;
    --sidebar-item-h: 58px; /* the reel's pitch, across the bar here */
    --phone-bar-h: 60px;
    --phone-footer-h: 54px;
  }

  body.has-sidebar {
    padding-right: 0;
  }

  .site-sidebar {
    position: sticky;
    top: 0;
    right: auto;
    bottom: auto;
    flex-shrink: 0;
    width: 100%;
    height: var(--phone-bar-h);
    flex-direction: row;
    border-left: none;
    border-bottom: 2px solid #fff;
    padding: 0 env(safe-area-inset-right, 0px) 0 env(safe-area-inset-left, 0px);
  }

  /* Its transform is also the homepage's pull and ENTER, which set it frame by frame */
  .site-sidebar.is-ready {
    transition: none;
  }

  .sidebar-mark {
    display: none;
  }

  .sidebar-projects {
    flex: 1;
    height: 100%;
    /* The page still scrolls under a vertical swipe; a sideways one turns the reel */
    touch-action: pan-y;
    --reel-fade: 36px;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--reel-fade), #000 calc(100% - var(--reel-fade)), transparent);
    mask-image: linear-gradient(to right, transparent, #000 var(--reel-fade), #000 calc(100% - var(--reel-fade)), transparent);
  }

  .sidebar-projects li {
    width: var(--sidebar-item-h);
    height: 100%;
  }

  /* The arrow hangs under the bar, pointing up at the current project */
  .sidebar-indicator {
    top: 100%;
    right: auto;
    left: 0;
    margin: 5px 0 0;
    width: 20px;
    height: 12px;
  }

  .sidebar-indicator svg {
    transform: rotate(-90deg);
  }

  .sidebar-indicator-arrow.is-hover {
    transform: translateY(9px);
  }

  .sidebar-indicator-arrow.is-pressed {
    transform: translateY(-6px);
  }

  /* The bar steps aside while the work menu is open (its button is in the footer) */
  body.site-menu-open .site-sidebar {
    visibility: hidden;
  }

  /* A slide fills the space between the bar and the footer */
  body.has-sidebar .project-slide {
    height: calc(100dvh - var(--phone-bar-h) - var(--phone-footer-h) - env(safe-area-inset-bottom, 0px));
    min-height: 360px;
  }

  /* ── Phone footer ──
     The live site's footer: stuck to the foot of the window, with no background of its own,
     so each section's background runs on under it while its content is clipped at the
     footer's top edge. Icons instead of the old words. */
  .site-footer {
    display: block;
    position: sticky;
    bottom: 0;
    z-index: 10001;
    flex-shrink: 0;
    height: calc(var(--phone-footer-h) + env(safe-area-inset-bottom, 0px));
    padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
    color: #fff;
    transition: color 0.3s ease, opacity 0.3s ease;
  }

  /* Held back through the homepage's intro, as the live site's footer was: it fades in as the
     bar slides in */
  body.intro-pending .site-footer,
  body:has(> .site-sidebar.is-offscreen) .site-footer {
    opacity: 0;
    transition: opacity 0.8s ease;
  }

  .site-footer.is-on-light {
    color: #000;
  }

  .site-footer-nav {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    height: var(--phone-footer-h);
  }

  .site-footer .sidebar-nav {
    display: contents;
  }

  .site-footer .sidebar-nav li {
    list-style: none;
  }

  .site-footer .sidebar-nav a,
  .site-footer .sidebar-more {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 44px;
    padding: 0;
    background: none;
    border: none;
    color: inherit;
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    transition: opacity 0.2s ease;
  }

  .site-footer .sidebar-nav svg {
    width: 22px;
    height: 22px;
  }

  .site-footer .sidebar-more svg {
    width: 24px;
    height: 24px;
  }

  /* The page you are on: a short rule under its icon, as the header's hr sits under the logo */
  .site-footer .sidebar-nav a.is-current::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 2px;
    width: 18px;
    height: 3px;
    margin-left: -9px;
    border-radius: 1.5px;
    background: currentColor;
  }

  /* Over the work menu (black) it is always white; its button reads as pressed, as on desktop */
  body.site-menu-open .site-footer {
    color: #fff;
  }

  .site-footer .sidebar-more {
    border-radius: 4px;
  }

  /* The menu stops at the footer, which stays over it with the button that closes it */
  body.has-sidebar .site-menu {
    padding-bottom: calc(var(--phone-footer-h) + env(safe-area-inset-bottom, 0px));
  }
}

/* ══════════════════════════════════════════
   Work menu (.site-menu, injected by transitions.js)
   The button at the foot of the sidebar opens the work menu over the content area; the sidebar
   stays put beside it. Two levels: the categories (a revolving wheel of names that falls in
   from above, pushing the curtain off the content), and one category's projects as a grid of
   logo tiles on black. The menu has no head of its own: it opens under the SITE header, which
   stays over it (and slides in over a project page, which has none); --menu-top is that
   header's height, set by transitions.js. At level 2 the strip of category names sits under it
   and stays put — only the grid (.wm-scroll) scrolls. Timings live in transitions.js.
   ══════════════════════════════════════════ */

:root {
  --site-menu-pad: clamp(20px, 3vw, 48px);
}

.site-menu {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  /* Covers the content area only: the sidebar (and its own button) stays reachable */
  right: var(--sidebar-w);
  z-index: 9995;
  display: flex;
  flex-direction: column;
  background: #000;
  color: #fff;
  /* Everything starts under the site header, which sits over the menu */
  padding-top: max(var(--menu-top, 0px), env(safe-area-inset-top, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  /* The grid of logos scrolls; nothing here scrolls sideways */
  touch-action: pan-y;
  overscroll-behavior: contain;
}

.site-menu[hidden] {
  display: none;
}

/* ── Head: just the back and close controls, under the site header ── */
.site-menu-head {
  position: relative;
  flex-shrink: 0;
  height: 56px;
}

/* The dialog's name, for assistive tech: the site header's wordmark is artwork */
.site-menu-title {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.site-menu-close,
.site-menu-back {
  position: absolute;
  top: 8px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.site-menu-close {
  right: calc(var(--site-menu-pad) - 10px);
}

.site-menu-back {
  left: calc(var(--site-menu-pad) - 10px);
}

.site-menu-close:hover,
.site-menu-back:hover {
  opacity: 0.7;
}

.site-menu-close:focus-visible,
.site-menu-back:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.site-menu-close svg {
  width: 22px;
  height: 22px;
}

.site-menu-back svg {
  width: 24px;
  height: 24px;
}

.site-menu-back[hidden] {
  display: none;
}

.site-menu-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* ── Level 1: the categories, as a revolving wheel ── */
/* The names loop for ever, like the sidebar's reel: transitions.js places each row (as many
   copies of the six as fill the panel) with a transform, dims it by its distance from the
   centre, and marks the centred one, which is the one picked. The whole wheel also falls in as a
   block on the way in (the curtain follows its travel). */
.site-menu-cats {
  --menu-row-h: clamp(52px, 8.5vh, 92px);
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  touch-action: none;
  cursor: grab;
  outline: none;
  user-select: none;
  -webkit-user-select: none;
  will-change: transform;
  /* The wheel turns away into the black at its top and bottom rather than being cut */
  -webkit-mask-image: linear-gradient(transparent, #000 16%, #000 84%, transparent);
  mask-image: linear-gradient(transparent, #000 16%, #000 84%, transparent);
}

.site-menu-cats.is-dragging {
  cursor: grabbing;
}

.site-menu-cats[hidden] {
  display: none;
}

.site-menu-row {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--menu-row-h);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--site-menu-pad);
  will-change: transform, opacity;
}

.site-menu-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  padding: 6px 4px;
  color: #fff;
  text-align: center;
  cursor: pointer;
}

.site-menu-cats.is-dragging .site-menu-item {
  cursor: grabbing;
}

.site-menu-name {
  font-size: clamp(16px, 1.75vw, 30px);
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.15;
  text-transform: uppercase;
  white-space: nowrap;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.site-menu-item:hover .site-menu-name {
  transform: scale(1.06);
}

.site-menu-cats.is-dragging .site-menu-item:hover .site-menu-name {
  transform: none;
}

/* The keyboard is on the wheel as a whole (a listbox): the ring goes round the centred name */
.site-menu-cats:focus-visible .is-centre .site-menu-name {
  outline: 2px solid #fff;
  outline-offset: 8px;
  border-radius: 3px;
}

/* The arrow rides beside the centred name (the picked one), clear of the type so the name stays
   centred; hovering another shows it there too */
.site-menu-mark {
  position: absolute;
  left: -24px;
  top: 50%;
  display: flex;
  opacity: 0;
  transform: translateY(-50%);
  transition: opacity 0.2s ease;
}

.site-menu-row.is-centre .site-menu-mark,
.site-menu-item:hover .site-menu-mark {
  opacity: 1;
}

.site-menu-mark svg {
  width: 9px;
  height: 14px;
}

/* The names arrive in sequence as the wheel falls (--row is the row's place from the top) */
.site-menu-cats.is-dropping .site-menu-item {
  animation: site-menu-row-in 480ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: calc(var(--row, 0) * 55ms);
}

@keyframes site-menu-row-in {
  from { opacity: 0; transform: translateY(-16px); }
  to { opacity: 1; transform: none; }
}

/* ── The site header over the menu ──
   Where the header isn't already in place (a project page, or a site page scrolled down),
   transitions.js fixes it to the top of the window while the menu is open and slides it down
   (and back up). On desktop it spans the sidebar as always; on a phone it stays beside it. */
body.menu-header .site-header {
  display: flex !important;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin: 0;
  z-index: 10002;
  background: #000;
}

@media (max-width: 480px) {
  body.menu-header .site-header {
    right: var(--sidebar-w);
  }

  /* In place (Home, or a site page at the top): lifted over the menu, which is fixed over it */
  body.site-menu-open .site-header {
    position: relative;
    z-index: 9996;
  }
}

/* ── Level 2: one category's projects, as logos ── */
/* The strip of category names stays put under the wordmark and only the grid scrolls, so the
   category on show is always named — and swapping to another never needs a scroll back up */
.site-menu-work {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.site-menu-work[hidden] {
  display: none;
}

.wm-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* A grid taller than the panel dissolves at the edges rather than being cut off under the
     strip, the way the old list's rows did */
  --wm-fade-top: 26px;
  --wm-fade: 30px;
  /* The top padding is the top fade's own depth, so at rest that fade falls on empty space and
     the first row of logos is not washed out by it */
  padding: var(--wm-fade-top) var(--site-menu-pad) clamp(24px, 5vh, 64px);
  -webkit-mask-image: linear-gradient(transparent, #000 var(--wm-fade-top), #000 calc(100% - var(--wm-fade)), transparent);
  mask-image: linear-gradient(transparent, #000 var(--wm-fade-top), #000 calc(100% - var(--wm-fade)), transparent);
}

/* The category the grid belongs to, with the others under it: a click switches straight over */
.wm-cats {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(8px, 1.6vh, 20px) var(--site-menu-pad) clamp(14px, 2.6vh, 32px);
}

.wm-cat {
  position: relative;
  padding: 3px 8px;
  background: none;
  border: none;
  color: #fff;
  font: inherit;
  font-size: clamp(10px, 0.82vw, 13px);
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.45;
  cursor: pointer;
  opacity: 0.42;
  transition: opacity 0.2s ease;
}

.wm-cat:hover {
  opacity: 0.8;
}

.wm-cat.is-on {
  opacity: 1;
  font-weight: 600;
}

.wm-cat:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
  opacity: 1;
}

.wm-cat-mark {
  position: absolute;
  left: -10px;
  top: 50%;
  display: none;
  transform: translateY(-50%);
}

.wm-cat.is-on .wm-cat-mark {
  display: flex;
}

.wm-cat-mark svg {
  width: 7px;
  height: 11px;
}

/* The tiles are sized by the cell, so narrowing the grid shrinks every logo by the same amount
   and their optical balance survives: on a short window it narrows, and more than one row of
   work is on screen */
.wm-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.8vw, 32px);
  width: 100%;
  max-width: min(1060px, 122vh);
  margin: 0 auto;
}

/* The tile fills its cell, so the whole cell opens the page (and the focus ring is the cell) */
.wm-cell {
  display: flex;
}

/* Each tile is one logo, held in a band of the same height. --lw is the logo's optical width
   (a percentage of the cell): it comes from the logo's proportions and how much ink it carries,
   so a wide wordmark and a round badge read as the same weight. Values live in transitions.js. */
.wm-tile {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4px 4px 18px;
  border-radius: 4px;
  color: #fff;
}

.wm-art {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 16 / 9;
}

.wm-art img {
  width: calc(var(--lw, 56) * 1%);
  max-height: 100%;
  height: auto;
  object-fit: contain;
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.28s ease;
}

.wm-tile:hover .wm-art img,
.wm-tile:focus-visible .wm-art img {
  transform: scale(1.055);
  filter: drop-shadow(0 0 14px rgba(255, 255, 255, 0.22));
}

/* Logos that only work on a light ground keep their own artwork and get one */
.wm-tile.has-plate .wm-art img {
  background: #f4f1ea;
  border-radius: 3px;
  padding: 2.6% 3.4%;
}

/* A page with no logo of its own is set as type instead — its name over a short rule, the way
   the head sets the studio's own wordmark */
.wm-type {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(7px, 1vh, 12px);
  padding: 0 6%;
  font-size: clamp(12px, 1.05vw, 18px);
  font-weight: 400;
  letter-spacing: 0.14em;
  line-height: 1.35;
  text-align: center;
  text-transform: uppercase;
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.wm-type::after {
  content: '';
  width: 44px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  opacity: 0.8;
}

.wm-tile:hover .wm-type,
.wm-tile:focus-visible .wm-type {
  transform: scale(1.055);
}

/* A type tile already says its name: the caption below would only repeat it */
.wm-tile.is-type .wm-name {
  display: none;
}

/* ...so a type tile marks the page the reader is on with its rule instead */
.wm-tile.is-type.is-current .wm-type::after {
  width: 72px;
  opacity: 1;
}

/* The name under the tile: there for the logos that don't spell themselves out, and kept out
   of the accessible name (the logo's alt text, or the type itself, already says it) */
.wm-name {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  font-size: clamp(9px, 0.7vw, 11px);
  font-weight: 400;
  letter-spacing: 0.16em;
  line-height: 1.3;
  text-transform: uppercase;
  text-align: center;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.wm-tile:hover .wm-name,
.wm-tile:focus-visible .wm-name,
.wm-tile.is-current .wm-name {
  opacity: 0.85;
}

.wm-tile:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* The page the reader is on, marked the way the sidebar marks it */
.wm-tile.is-current .wm-name::before {
  content: '▸ ';
}

/* The white line that rides the edge of the opening curtain (see .transition-line) */
.site-menu-sweep {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: #fff;
  border-radius: 1.5px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.35);
  opacity: 0;
  pointer-events: none;
  z-index: 3;
}

/* The sidebar's current-page arrow hangs off the sidebar's left edge, so it is drawn INSIDE
   the menu (the sidebar sits above it): two identical arrows at different heights, the menu's
   own mark and a stray one pointing at an unrelated name. The menu marks the page itself. */
body.site-menu-open .sidebar-indicator {
  opacity: 0;
}

/* The sidebar button reads as pressed while its menu is open */
.sidebar-more[aria-expanded="true"] {
  background: #fff;
  color: #000;
}

.sidebar-more[aria-expanded="true"]:hover {
  opacity: 1;
}

/* A short window (a laptop, a landscape phone): a stacked column of six names would eat half the
   panel, so they lie in a wrapped row instead — the grid keeps more than one row of work on
   screen either way */
@media (max-height: 720px) {
  .wm-cats {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px 16px;
  }
}

@media (max-width: 720px) {
  .wm-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 560px;
  }

  .wm-cat {
    font-size: 11px;
    letter-spacing: 0.14em;
  }
}

@media (max-width: 480px) {
  :root {
    --site-menu-pad: 16px;
  }

  .site-menu-name {
    font-size: 15px;
    letter-spacing: 0.06em;
  }

  .site-menu-mark {
    left: -18px;
  }

  .wm-grid {
    gap: 10px;
  }

  .wm-tile {
    padding-bottom: 16px;
  }

  .wm-name {
    font-size: 9px;
    letter-spacing: 0.1em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-menu-name,
  .site-menu-mark,
  .site-menu-close,
  .site-menu-back,
  .wm-cat,
  .wm-name,
  .wm-type,
  .wm-art img {
    transition: none;
  }

  .site-menu-cats.is-dropping .site-menu-item {
    animation: none;
  }
}

/* ══════════════════════════════════════════
   Homepage stage (index.html)
   main.home-page > .home-stage shows the current project's slide (cloned from its page by
   transitions.js), plus the chevron that enters the project. Timings live in transitions.js.
   ══════════════════════════════════════════ */

/* Before transitions.js runs on a first visit: the logo intro starts with the line hidden */
body.intro-pending main {
  opacity: 0;
}

body.intro-pending .site-header hr {
  max-width: 0;
  overflow: hidden;
}

/* The homepage never scrolls (wipe copies of <main> are ignored) */
body:has(> main.home-page:not(.transition-clone)) {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

main.home-page {
  position: relative;
  max-width: none;
  margin: 0;
  padding: 0;
  min-height: 0;
}

.home-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #000;
  opacity: 0;
}

.home-stage.is-revealed {
  opacity: 1;
}

/* Slides fill the stage and crossfade: the incoming one fades in on top of the current one */
main.home-page > .home-stage > .project-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  opacity: 0;
  transition: opacity var(--home-crossfade, 700ms) cubic-bezier(0.45, 0, 0.55, 1);
}

main.home-page > .home-stage > .project-slide.is-in {
  opacity: 1;
}

/* Chevron: a dark frosted disc so it reads on light slides (Splash Mementos, Marble, Brashier) too */
.home-chevron {
  position: absolute;
  left: 50%;
  bottom: 28px;
  z-index: 2;
  width: 56px;
  height: 56px;
  margin-left: -28px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  color: #fff;
  background: rgba(10, 10, 12, 0.48);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.4), 0 4px 18px rgba(0, 0, 0, 0.28);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  /* Hides at once when the project switches */
  transition: opacity 0.15s ease, background-color 0.2s ease, visibility 0s linear 0.15s;
}

.home-chevron.is-visible {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.6s ease, background-color 0.2s ease, visibility 0s linear 0s;
  animation: home-chevron-bob 2.2s ease-in-out infinite;
}

.home-chevron:hover {
  background: rgba(10, 10, 12, 0.64);
}

.home-chevron:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.home-chevron svg {
  width: 26px;
  height: 26px;
  margin-top: 3px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}

@keyframes home-chevron-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

/* Entering a project whose page is still preloading: the chevron shows (after a beat) and pulses */
main.home-page.is-waiting .home-chevron {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease 0.25s, visibility 0s linear 0.25s;
  animation: home-chevron-wait 0.8s ease-in-out infinite;
}

@keyframes home-chevron-wait {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(6px); opacity: 0.55; }
}

@media (max-width: 480px) {
  .home-chevron {
    bottom: 20px;
    width: 48px;
    height: 48px;
    margin-left: -24px;
  }

  .home-chevron svg {
    width: 22px;
    height: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* .is-visible must be listed: the bob is declared on it, so the base class alone loses */
  .home-chevron,
  .home-chevron.is-visible,
  main.home-page.is-waiting .home-chevron {
    animation: none;
  }
}

/* ══════════════════════════════════════════
   PointStage page (projects/point-stage.html)
   ══════════════════════════════════════════ */

/* ── PointStage page ── */

.ps-page {
  --ps-cyan: #00b9bc;
  --ps-teal: #04899a;
  --ps-deep: #0d365f;
  --ps-gradient: linear-gradient(135deg, #00b9bc 0%, #04899a 39%, #0d365f 100%);
  --ps-bg: #0c1218;
  --ps-bg-2: #121a23;
  --ps-bg-3: #1c2733;
  --ps-border: #243140;
  --ps-fg: #ececef;
  --ps-muted: #9aa3ad;
  --ps-paper: #f4fbfc;
  --ps-ink: #103340;
  --ps-ink-soft: #4d6b78;
  --ps-teal-text: #03707e;
  --ps-dim: #87929e;
  --ps-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  max-width: none;
  padding: 0;
  flex: none;
  background: var(--ps-bg);
  color: var(--ps-fg);
  overflow-x: clip;
}

.ps-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.ps-inner-narrow {
  max-width: 780px;
}

@keyframes ps-mark-drift {
  from { transform: translate3d(0, 0, 0) rotate(0deg); }
  to   { transform: translate3d(-2.5%, 3%, 0) rotate(-3deg); }
}

/* App window frame */
.ps-window {
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  background: #07202e;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 50px 90px -40px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.ps-window-bar {
  display: flex;
  gap: 7px;
  padding: 11px 14px;
  background: #16212c;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.ps-window-bar span {
  width: 11px;
  height: 11px;
  border-radius: 50%;
}

.ps-window-bar span:nth-child(1) { background: #ff5f57; }
.ps-window-bar span:nth-child(2) { background: #febc2e; }
.ps-window-bar span:nth-child(3) { background: #28c840; }

.ps-window img {
  display: block;
  width: 100%;
  height: auto;
}

.ps-showcase {
  position: relative;
  z-index: 2;
  margin-top: -250px;
  padding: 0 40px;
}

.ps-showcase::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 8%;
  width: min(1000px, 80%);
  height: 70%;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(0, 185, 188, 0.28), rgba(0, 185, 188, 0.08) 60%, transparent);
  z-index: -1;
  pointer-events: none;
}

.ps-window-hero {
  max-width: 1100px;
  margin: 0 auto;
}

/* Description */
.ps-desc {
  padding: 64px 40px 80px;
}

.ps-desc-text {
  font-size: 19px;
  font-weight: 300;
  line-height: 1.75;
  color: #d3dae0;
}

.ps-desc-text strong {
  font-weight: 600;
  color: #fff;
}

/* Sections */
.ps-section {
  padding: 80px 40px 88px;
}

.ps-section-steps {
  background: var(--ps-bg-2);
  border-top: 1px solid var(--ps-border);
  border-bottom: 1px solid var(--ps-border);
}

.ps-section-dark {
  background: var(--ps-bg);
}

.ps-section-hood {
  background: var(--ps-bg-2);
  border-top: 1px solid var(--ps-border);
}

.ps-section-light {
  background: var(--ps-paper);
  color: var(--ps-ink);
}

.ps-eyebrow {
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--ps-cyan);
  margin-bottom: 10px;
}

.ps-section-light .ps-eyebrow {
  color: var(--ps-teal-text);
}

.ps-title {
  text-align: center;
  font-size: 50px;
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.5px;
  color: rgba(255, 255, 255, 0.62);
  margin-bottom: 48px;
}

.ps-title b {
  font-weight: 700;
  color: #fff;
}

.ps-section-light .ps-title {
  color: var(--ps-teal);
}

.ps-section-light .ps-title b {
  color: var(--ps-deep);
}

.ps-lede {
  max-width: 760px;
  margin: -20px auto 56px;
  text-align: center;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--ps-ink-soft);
}

.ps-subhead {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ps-ink-soft);
  margin: 0 0 24px;
}

.ps-subhead::before,
.ps-subhead::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(16, 51, 64, 0.16);
}

.ps-subhead-left::before {
  display: none;
}

.ps-subhead-dark {
  color: var(--ps-muted);
  margin-top: 72px;
}

.ps-subhead-dark::before,
.ps-subhead-dark::after {
  background: var(--ps-border);
}

.ps-caption {
  max-width: 640px;
  margin: 22px auto 0;
  text-align: center;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ps-muted);
}

/* Steps */
.ps-steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  counter-reset: none;
}

.ps-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: var(--ps-bg);
  border: 1px solid var(--ps-border);
  border-radius: 16px;
  padding: 30px 28px 28px;
}

.ps-step + .ps-step::before {
  content: '';
  position: absolute;
  left: -26px;
  top: 50%;
  width: 12px;
  height: 12px;
  border-top: 2px solid var(--ps-cyan);
  border-right: 2px solid var(--ps-cyan);
  transform: translateY(-50%) rotate(45deg);
  opacity: 0.8;
}

.ps-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--ps-gradient);
  color: #fff;
  font-weight: 700;
  font-size: 19px;
  margin-bottom: 20px;
  box-shadow: 0 8px 20px -8px rgba(0, 185, 188, 0.6);
}

.ps-step-title {
  font-size: 21px;
  font-weight: 600;
  line-height: 1.25;
  color: #fff;
  margin-bottom: 10px;
}

.ps-step-text {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--ps-muted);
  margin-bottom: 22px;
  flex: 1;
}

.ps-chip {
  display: inline-block;
  font-family: var(--ps-mono);
  font-size: 13px;
  color: var(--ps-cyan);
  background: rgba(0, 185, 188, 0.1);
  border: 1px solid rgba(0, 185, 188, 0.28);
  border-radius: 8px;
  padding: 6px 10px;
}

.ps-chip-dim {
  color: rgba(0, 185, 188, 0.75);
}

/* Brand: names */
.ps-names {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-bottom: 72px;
}

.ps-name {
  margin: 0;
}

.ps-name img {
  display: block;
  width: 100%;
  /* Ratio of the widest artboard (Spectacle), so no wordmark gets cropped */
  aspect-ratio: 1000 / 346;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 18px 40px -22px rgba(6, 37, 54, 0.55);
}

.ps-name figcaption {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-top: 14px;
  padding: 0 2px;
  font-size: 15px;
}

.ps-name figcaption b {
  font-weight: 500;
  color: var(--ps-ink);
}

.ps-name figcaption span {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ps-ink-soft);
}

.ps-name-final img {
  outline: 3px solid var(--ps-cyan);
  outline-offset: 5px;
}

.ps-name-final figcaption span {
  color: var(--ps-teal-text);
}

/* Brand: mark studies */
.ps-marks {
  display: grid;
  grid-template-columns: 1fr 1fr 1.2fr;
  gap: 28px;
  align-items: center;
  max-width: 940px;
  margin: 0 auto 80px;
}

.ps-mark-study,
.ps-mark-final {
  margin: 0;
}

.ps-mark-study img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  background: #fff;
  border: 1px solid rgba(16, 51, 64, 0.1);
  border-radius: 14px;
}

.ps-mark-final {
  position: relative;
  padding-left: 24px;
}

.ps-mark-final::before {
  content: '';
  position: absolute;
  left: -8px;
  top: calc(50% - 14px);
  width: 14px;
  height: 14px;
  border-top: 2px solid var(--ps-teal);
  border-right: 2px solid var(--ps-teal);
  transform: translateY(-50%) rotate(45deg);
}

.ps-mark-final img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 22%;
  box-shadow: 0 26px 50px -24px rgba(13, 54, 95, 0.7);
}

.ps-mark-final figcaption {
  margin-top: 14px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ps-teal-text);
}

/* Brand: system (promo + palette + type) */
.ps-system {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.ps-promo {
  margin: 0;
}

.ps-promo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 30px 60px -30px rgba(6, 37, 54, 0.65);
}

.ps-system-info .ps-subhead {
  margin-bottom: 20px;
}

.ps-gradient-bar {
  height: 56px;
  border-radius: 12px;
  background: linear-gradient(90deg, #00b9bc 0%, #04899a 39%, #0d365f 100%);
  margin-bottom: 18px;
}

.ps-swatches {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 48px;
}

.ps-swatch {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 15px;
}

.ps-swatch b {
  font-weight: 500;
  color: var(--ps-ink);
}

.ps-swatch code {
  font-family: var(--ps-mono);
  font-size: 13px;
  color: var(--ps-ink-soft);
}

.ps-swatch-chip {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 1;
  border-radius: 10px;
  margin-bottom: 8px;
}

.ps-swatch-cyan { background: #00b9bc; }
.ps-swatch-teal { background: #04899a; }
.ps-swatch-deep { background: #0d365f; }

.ps-type-note {
  font-size: 17px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--ps-ink-soft);
}

.ps-type-note b {
  font-weight: 700;
  color: var(--ps-deep);
}

.ps-type-note span {
  color: var(--ps-teal-text);
}

/* Interface */
.ps-window-welcome {
  max-width: 1000px;
  margin: 0 auto;
}

.ps-game-icons {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 150px));
  justify-content: center;
  gap: clamp(16px, 3vw, 36px);
}

.ps-game-icons img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  filter: drop-shadow(0 16px 24px rgba(0, 0, 0, 0.45));
  transition: transform 0.25s ease;
}

.ps-game-icons img:hover {
  transform: translateY(-4px);
}

/* Under the hood */
.ps-hood {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 64px;
  align-items: center;
  margin-bottom: 72px;
}

.ps-hood-copy p {
  font-size: 18px;
  font-weight: 300;
  line-height: 1.75;
  color: #cdd5dc;
}

.ps-hood-copy p + p {
  margin-top: 20px;
}

.ps-hood-copy code {
  font-family: var(--ps-mono);
  font-size: 0.86em;
  color: var(--ps-cyan);
  background: rgba(0, 185, 188, 0.12);
  padding: 2px 6px;
  border-radius: 5px;
}

.ps-swf {
  background: var(--ps-bg);
  border: 1px solid var(--ps-border);
  border-radius: 16px;
  padding: 18px 20px 14px;
  box-shadow: 0 30px 60px -36px rgba(0, 0, 0, 0.8);
}

.ps-swf-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-family: var(--ps-mono);
  font-size: 13px;
  color: var(--ps-fg);
  padding: 0 2px 14px;
  border-bottom: 1px solid var(--ps-border);
  margin-bottom: 12px;
}

.ps-swf-legend {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--ps-muted);
}

.ps-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
}

.ps-dot-kept {
  background: var(--ps-bg-3);
  border: 1px solid #3a4b5c;
}

.ps-dot-patched {
  background: var(--ps-cyan);
  margin-left: 8px;
}

.ps-swf-tags {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ps-swf-tags li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--ps-mono);
  font-size: 13px;
  color: #b7c0c9;
  background: var(--ps-bg-2);
  border: 1px solid var(--ps-border);
  border-left: 3px solid #3a4b5c;
  border-radius: 7px;
  padding: 7px 12px;
}

.ps-swf-tags em {
  font-style: normal;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ps-dim);
}

.ps-swf-tags li.ps-tag-patched {
  color: #fff;
  background: linear-gradient(90deg, rgba(0, 185, 188, 0.22), rgba(13, 54, 95, 0.25));
  border-color: rgba(0, 185, 188, 0.45);
  border-left-color: var(--ps-cyan);
}

.ps-swf-tags li.ps-tag-patched em {
  color: var(--ps-cyan);
}

.ps-swf-note {
  margin-top: 12px;
  text-align: right;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ps-dim);
}

.ps-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.ps-feature {
  background: var(--ps-bg);
  border: 1px solid var(--ps-border);
  border-radius: 16px;
  padding: 26px 24px 24px;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.ps-feature:hover {
  border-color: rgba(0, 185, 188, 0.5);
  transform: translateY(-2px);
}

.ps-feature-icon {
  display: block;
  width: 30px;
  height: 30px;
  fill: none;
  stroke: var(--ps-cyan);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  margin-bottom: 16px;
}

.ps-feature h3 {
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 8px;
}

.ps-feature p {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ps-muted);
}

/* Stats banner */
.ps-stats {
  /* light scrim keeps the white copy readable over the cyan end of the gradient */
  background: linear-gradient(rgba(6, 30, 50, 0.22), rgba(6, 30, 50, 0.22)), var(--ps-gradient);
  padding: 34px 40px;
  text-align: center;
}

.ps-stats-text {
  max-width: 1000px;
  margin: 0 auto;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.3px;
  line-height: 1.4;
  color: #fff;
  text-wrap: balance;
}

@media (prefers-reduced-motion: reduce) {
}

/* Responsive */
@media (max-width: 1280px) {
  .ps-title {
    font-size: 44px;
  }
}

/* Narrow 3-column steps: keep each chip on one line */
@media (min-width: 1025px) and (max-width: 1180px) {
  .ps-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
  }

  .ps-step {
    padding: 28px 20px 24px;
  }

  .ps-chip {
    font-size: 12px;
    padding: 5px 8px;
    white-space: nowrap;
  }
}

@media (max-width: 1024px) {
  .ps-steps {
    grid-template-columns: 1fr;
    max-width: 560px;
    margin: 0 auto;
    gap: 36px;
  }

  .ps-step + .ps-step::before {
    left: 50%;
    top: -24px;
    transform: translateX(-50%) rotate(135deg);
  }

  .ps-hood {
    gap: 44px;
  }

  .ps-system {
    gap: 44px;
  }
}

@media (max-width: 900px) {
  .ps-hood,
  .ps-system {
    grid-template-columns: 1fr;
  }

  .ps-promo {
    width: 100%; /* fill the column even before the lazy image has loaded */
    max-width: 520px;
    margin: 0 auto;
  }

  .ps-features {
    grid-template-columns: repeat(2, 1fr);
  }

  .ps-names {
    grid-template-columns: 1fr;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
  }

  .ps-marks {
    grid-template-columns: 1fr 1fr;
  }

  .ps-mark-final {
    grid-column: 1 / -1;
    width: 60%;
    max-width: 300px;
    margin: 20px auto 0;
    padding-left: 0;
  }

  .ps-mark-final::before {
    left: 50%;
    top: -22px;
    transform: translateX(-50%) rotate(135deg);
  }
}

@media (max-width: 720px) {

  .ps-showcase {
    margin-top: -170px;
    padding: 0 24px;
  }

  .ps-section {
    padding: 64px 32px 72px;
  }

  .ps-desc {
    padding: 52px 32px 64px;
  }

  .ps-title {
    font-size: 38px;
    margin-bottom: 38px;
  }
}

@media (max-width: 480px) {

  .ps-showcase {
    margin-top: -110px;
    padding: 0 16px;
  }

  .ps-window {
    border-radius: 9px;
  }

  .ps-window-bar {
    gap: 5px;
    padding: 7px 9px;
  }

  .ps-window-bar span {
    width: 7px;
    height: 7px;
  }

  .ps-desc {
    padding: 40px 22px 48px;
  }

  .ps-desc-text {
    font-size: 16px;
    line-height: 1.7;
  }

  .ps-section {
    padding: 52px 20px 60px;
  }

  .ps-eyebrow {
    font-size: 11px;
    letter-spacing: 2px;
  }

  .ps-title {
    font-size: 32px;
    margin-bottom: 30px;
  }

  .ps-lede {
    font-size: 16px;
    margin: -10px auto 40px;
  }

  .ps-subhead {
    font-size: 12px;
    gap: 12px;
  }

  .ps-step {
    padding: 24px 20px 22px;
  }

  .ps-step-title {
    font-size: 19px;
  }

  .ps-chip {
    font-size: 12px;
  }

  .ps-names {
    gap: 24px;
    margin-bottom: 52px;
  }

  .ps-name figcaption {
    font-size: 14px;
  }

  .ps-marks {
    gap: 10px;
    margin-bottom: 56px;
  }

  .ps-mark-study img {
    border-radius: 10px;
  }

  .ps-mark-final {
    width: 64%;
  }

  .ps-swatches {
    gap: 10px;
    margin-bottom: 36px;
  }

  .ps-swatch {
    font-size: 13px;
  }

  .ps-swatch code {
    font-size: 11px;
  }

  .ps-type-note {
    font-size: 15px;
  }

  .ps-caption {
    font-size: 14px;
  }

  .ps-subhead-dark {
    margin-top: 52px;
  }

  .ps-game-icons {
    grid-template-columns: repeat(2, 120px);
    gap: 20px 28px;
  }

  .ps-hood {
    gap: 32px;
    margin-bottom: 48px;
  }

  .ps-hood-copy p {
    font-size: 16px;
  }

  .ps-swf {
    padding: 14px 12px 10px;
  }

  .ps-swf-head {
    flex-wrap: wrap;
  }

  .ps-swf-tags li {
    font-size: 12px;
    padding: 6px 10px;
  }

  .ps-features {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .ps-feature {
    padding: 22px 20px 20px;
  }

  .ps-stats {
    padding: 26px 22px;
  }

  .ps-stats-text {
    font-size: 16px;
  }
}

/* ══════════════════════════════════════════
   Splash Mementos page (projects/splash-mementos.html)
   ══════════════════════════════════════════ */

/* ── Splash Mementos page ── */

.sm-page {
  --sm-ink: #2f2e34;
  --sm-muted: #5d5c64;
  --sm-paper: #fbfaf8;
  --sm-mist: #efeef3;
  --sm-dark: #2b2a30;
  --sm-dark-2: #232227;
  --sm-outline: #515151;
  --sm-rainbow: linear-gradient(90deg, #f2df5b 0%, #c8e872 12.5%, #8fd98a 25%, #6ccdb9 37.5%, #85b4e8 50%, #8286d4 62.5%, #9a6cb4 75%, #c35c96 87.5%, #d75f76 100%);
  max-width: none;
  padding: 0;
  flex: none;
  background: var(--sm-paper);
  color: var(--sm-ink);
}

/* Description */
.sm-desc {
  background: var(--sm-dark);
  padding: 44px 40px;
}

.sm-desc-text {
  max-width: 780px;
  margin: 0 auto;
  font-size: 17px;
  line-height: 1.75;
  font-weight: 300;
  color: #ecebf1;
}

.sm-desc-text strong {
  font-weight: 600;
  color: #fff;
}

/* Sections */
.sm-section {
  padding: 76px 40px 84px;
}

.sm-section-paper {
  background: var(--sm-paper);
}

.sm-section-mist {
  background: var(--sm-mist);
}

.sm-section-dark {
  background: var(--sm-dark);
  color: #fff;
}

.sm-section-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.sm-section-head {
  text-align: center;
  margin-bottom: 48px;
}

.sm-section-title {
  font-size: 34px;
  font-weight: 600;
  letter-spacing: 0.3px;
  line-height: 1.15;
}

.sm-section-title::after {
  content: '';
  display: block;
  width: 84px;
  height: 6px;
  margin: 16px auto 0;
  border-radius: 3px;
  background: var(--sm-rainbow);
}

.sm-section-intro {
  max-width: 620px;
  margin: 18px auto 0;
  font-size: 16px;
  line-height: 1.7;
  font-weight: 300;
  color: var(--sm-muted);
}

.sm-section-dark .sm-section-intro {
  color: #cfcdd6;
}

.sm-page figure {
  margin: 0;
}

.sm-page img {
  display: block;
}

/* Brand-colored chips (outlined like the monogram) */
.sm-step-num,
.sm-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid var(--sm-outline);
  color: var(--sm-ink);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
}

.sm-num-1 { background: #f2df5b; }
.sm-num-2 { background: #8286d4; color: #fff; }
.sm-num-3 { background: #6ccdb9; }
.sm-num-4 { background: #c8e872; }
.sm-num-5 { background: #c35c96; color: #fff; }

/* Process steps: flex-grow follows each image's aspect ratio so the row
   shares one height */
.sm-steps {
  display: flex;
  gap: 28px;
  align-items: flex-start;
}

.sm-step {
  min-width: 0;
  flex-basis: 0;
  flex-shrink: 1;
}

.sm-step-line { flex-grow: 1394; }
.sm-step-paint { flex-grow: 750; }
.sm-step-print { flex-grow: 644; }

.sm-step-art {
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 12px 32px rgba(47, 46, 52, 0.1);
}

.sm-step-art img {
  width: 100%;
  height: auto;
}

.sm-step figcaption {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 12px;
  row-gap: 4px;
  align-items: center;
  margin-top: 20px;
}

.sm-step-num {
  grid-row: 1;
}

.sm-step-title {
  font-size: 19px;
  font-weight: 600;
}

.sm-step-text {
  grid-column: 1 / -1;
  font-size: 14px;
  line-height: 1.6;
  font-weight: 300;
  color: var(--sm-muted);
}

/* Portraits */
.sm-portraits {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
}

.sm-sheet {
  background: #fff;
  border-radius: 6px;
  padding: 28px 28px 20px;
  box-shadow: 0 14px 36px rgba(47, 46, 52, 0.09);
}

.sm-sheet img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: contain;
}

.sm-caption {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--sm-muted);
}

.sm-section-dark .sm-caption {
  color: #cfcdd6;
}

/* Layout variations */
.sm-layouts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 400px));
  justify-content: center;
  gap: 56px;
}

.sm-print img {
  width: 100%;
  height: auto;
  border-radius: 3px;
  box-shadow: 0 2px 4px rgba(47, 46, 52, 0.06), 0 18px 40px rgba(47, 46, 52, 0.13);
}

.sm-print .sm-caption {
  margin-top: 22px;
  letter-spacing: 1.2px;
}

.sm-tag {
  width: 26px;
  height: 26px;
  font-size: 12px;
  letter-spacing: 0;
}

/* Identity */
.sm-identity {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  max-width: 900px;
  margin: 0 auto;
}

.sm-identity-logo,
.sm-identity-cover {
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  overflow: hidden;
}

.sm-identity-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sm-dark-2);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.sm-identity-logo img {
  width: 78%;
  height: auto;
}

.sm-identity-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Monogram color bands, as a closing strip */
.sm-spectrum {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 56px auto 0;
  list-style: none;
}

.sm-spectrum li {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid var(--sm-outline);
}

.sm-spectrum li:nth-child(1) { background: #f2df5b; }
.sm-spectrum li:nth-child(2) { background: #c8e872; }
.sm-spectrum li:nth-child(3) { background: #8fd98a; }
.sm-spectrum li:nth-child(4) { background: #6ccdb9; }
.sm-spectrum li:nth-child(5) { background: #85b4e8; }
.sm-spectrum li:nth-child(6) { background: #8286d4; }
.sm-spectrum li:nth-child(7) { background: #9a6cb4; }
.sm-spectrum li:nth-child(8) { background: #c35c96; }
.sm-spectrum li:nth-child(9) { background: #d75f76; }

/* Responsive */
@media (max-width: 1280px) {
  .sm-section-inner {
    max-width: 1000px;
  }
}

@media (max-width: 720px) {

  .sm-steps {
    flex-wrap: wrap;
    row-gap: 40px;
  }

  .sm-step-line {
    flex: 1 1 100%;
  }

  .sm-portraits {
    grid-template-columns: 1fr;
  }

  .sm-layouts {
    gap: 28px;
  }
}

@media (max-width: 480px) {

  .sm-desc {
    padding: 32px 24px;
  }

  .sm-desc-text {
    font-size: 15px;
  }

  .sm-section {
    padding: 48px 20px 56px;
  }

  .sm-section-head {
    margin-bottom: 32px;
  }

  .sm-section-title {
    font-size: 26px;
  }

  .sm-section-intro {
    font-size: 15px;
  }

  .sm-steps {
    flex-direction: column;
    align-items: stretch;
  }

  .sm-step {
    flex: none;
    width: 100%;
  }

  .sm-sheet {
    padding: 16px 16px 12px;
  }

  .sm-layouts {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 0 12px;
  }

  .sm-identity {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .sm-spectrum {
    gap: 6px;
    margin-top: 40px;
  }

  .sm-spectrum li {
    width: 26px;
    height: 26px;
  }
}

/* ══════════════════════════════════════════
   Poptropica Club page (projects/poptropica-club.html)
   ══════════════════════════════════════════ */

/* ── Poptropica Club page ── */

@font-face {
  font-family: "GhostkidAOE";
  src: url("/shared/fonts/GhostkidAOE-PoptropicaClub.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

.pc-page {
  max-width: none;
  padding: 0;
  flex: none;
  color: #1d4f86;
  font-family: "CreativeBlock", "Futura", "Helvetica Neue", Arial, sans-serif;
  background: #f2cfb5;
}

.pc-figure {
  margin: 0;
}

/* Decorative art is not zoomable */
main[class] .pc-hero-pattern,
main[class] .pc-mascot img,
main[class] .pc-teaser .legacy-desc-cap {
  cursor: default;
  pointer-events: none;
}

/* Bands */
.pc-band {
  position: relative;
  padding: 72px 40px 96px;
}

.pc-inner {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
}

/* White cloud band with puffy edges above and below */
.pc-band-cloud {
  z-index: 2;
  background: #fff;
}

.pc-band-cloud::before,
.pc-band-cloud::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 60px;
  pointer-events: none;
  background:
    radial-gradient(circle 46px at 50% 100%, #fff 96%, transparent 100%) 0 100% / 88px 60px repeat-x,
    radial-gradient(circle 33px at 50% 100%, #fff 96%, transparent 100%) 40px 100% / 62px 60px repeat-x;
}

.pc-band-cloud::before {
  bottom: calc(100% - 1px);
}

.pc-band-cloud::after {
  top: calc(100% - 1px);
  transform: scaleY(-1);
}

/* Sky bands, drifting from blue to sunset like the Club landing page */
.pc-band-sky {
  z-index: 1;
  color: #fff;
  padding: 112px 40px 124px;
}

.pc-band-sky-1 {
  background: linear-gradient(180deg, #1aa0f2 0%, #26a9f4 100%);
}

.pc-band-sky-2 {
  background: linear-gradient(180deg, #3aabee 0%, #62b4e2 100%);
}

.pc-band-sky-3 {
  background: linear-gradient(180deg, #74b8dc 0%, #a6c6d6 100%);
}

.pc-band-sunset {
  z-index: 1;
  background: linear-gradient(180deg, #e2ccb8 0%, #f2cfb5 100%);
}

/* Type */
.pc-title {
  font-family: "GhostkidAOE", "GrilledCheese", sans-serif;
  font-weight: 400;
  font-size: 64px;
  line-height: 1.05;
  letter-spacing: 0.5px;
  text-align: center;
  color: #fff;
  text-shadow: 0 4px 0 #1b62ad, 0 10px 22px rgba(10, 50, 110, 0.25);
  margin-bottom: 30px;
}

.pc-title-ink {
  color: #2589d0;
  text-shadow: 0 4px 0 #d3e9f8;
}

.pc-kicker {
  font-family: "GhostkidAOE", "GrilledCheese", sans-serif;
  font-weight: 400;
  font-size: 58px;
  line-height: 1;
  color: #2589d0;
  text-shadow: 0 4px 0 #d3e9f8;
  margin-bottom: 16px;
}

.pc-body,
.pc-intro-text,
.pc-bubble p {
  font-family: "CreativeBlock", sans-serif;
  font-size: 18px;
  line-height: 1.45;
  color: #1d4f86;
}

.pc-intro-text {
  font-size: 19px;
}

.pc-body-center {
  max-width: 820px;
  margin: 0 auto 48px;
  text-align: center;
}

.pc-bubble {
  max-width: 820px;
  margin: 0 auto 48px;
  padding: 20px 30px;
  background: #fff;
  border: 3px solid #2589d0;
  border-radius: 18px;
  box-shadow: 0 8px 0 rgba(20, 80, 150, 0.2);
  text-align: center;
}

.pc-caption {
  margin-top: 14px;
  font-family: "CreativeBlock", sans-serif;
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  color: #1b6fb8;
}

.pc-caption-light {
  color: #fff;
  text-shadow: 0 2px 0 #1b62ad;
}

.pc-card {
  background: #fff;
  border-radius: 24px;
  padding: 28px 28px 18px;
  box-shadow: 0 8px 0 rgba(20, 80, 150, 0.2);
}

.pc-browser {
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(20, 80, 150, 0.15);
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(10, 50, 110, 0.25);
}

.pc-browser-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 28px;
  padding: 0 12px;
  background: #e6f2fc;
  border-bottom: 1px solid #cfe3f4;
}

.pc-browser-bar span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #9cc8ec;
}

.pc-browser img {
  display: block;
  width: 100%;
  height: auto;
}

/* Intro */
.pc-intro {
  padding: 36px 40px 56px;
}

.pc-intro-inner {
  display: flex;
  align-items: center;
  gap: 56px;
  max-width: 980px;
}

.pc-mascot {
  position: relative;
  flex: 0 0 220px;
  width: 220px;
  margin-top: 40px;
}

.pc-mascot-body {
  display: block;
  width: 100%;
  height: auto;
}

.pc-mascot-balloon {
  position: absolute;
  left: -19.7%;
  top: 0;
  width: 76.7%;
  max-width: none;
  transform: translateY(-87%) rotate(0deg);
  transform-origin: 62% 87%;
  animation: pc-balloon-sway 5s ease-in-out infinite;
}

@keyframes pc-balloon-sway {
  0%, 100% { transform: translateY(-87%) rotate(-4deg); }
  50% { transform: translateY(-87%) rotate(4deg); }
}

@media (prefers-reduced-motion: reduce) {
  .pc-mascot-balloon {
    animation: none;
  }
}

.pc-intro-copy {
  flex: 1;
  min-width: 0;
}

/* Passport */
.pc-passport-row {
  display: grid;
  grid-template-columns: 6fr 5fr;
  gap: 56px;
  align-items: center;
}

.pc-flowchart img {
  display: block;
  width: 100%;
}

.pc-passport-stamp img {
  display: block;
  width: 100%;
}

/* Club website */
.pc-page .pc-site-intro {
  margin-bottom: 24px;
}

.pc-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 820px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.pc-chips li {
  padding: 7px 16px 6px;
  font-family: "CreativeBlock", sans-serif;
  font-size: 15px;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 0 #135a9e;
  background: linear-gradient(180deg, #3aa4ef 0%, #1670c9 100%);
  border: 2px solid #135fae;
  border-radius: 999px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.35);
}

.pc-site-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  max-width: 940px;
  margin: 52px auto 0;
  align-items: start;
}

/* Blog */
.pc-blog-shot {
  max-width: 1000px;
  margin: 0 auto;
}

/* Wiki */
.pc-wiki-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 36px;
  margin: 0 auto 60px;
}

.pc-wiki-logo-main img {
  display: block;
  width: 480px;
  max-width: 100%;
}

.pc-wiki-logo-small img {
  display: block;
  width: 180px;
}

.pc-wiki-logo-square img {
  width: 170px;
  border-radius: 22px;
  box-shadow: 0 10px 24px rgba(10, 50, 110, 0.2);
}

.pc-wiki-main {
  margin: 0 auto 60px;
}

.pc-wiki-pages {
  display: grid;
  grid-template-columns: 1fr minmax(200px, 26%);
  gap: 40px;
  align-items: center;
  margin-bottom: 60px;
}

.pc-wiki-pages-stack {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.pc-wiki-card img {
  display: block;
  width: 100%;
}

.pc-wiki-headers {
  max-width: 1000px;
  margin: 0 auto;
}

.pc-wiki-headers img {
  display: block;
  width: 100%;
}

/* Chat */
.pc-icon-row {
  display: grid;
  grid-template-columns: minmax(160px, 23%) 1fr;
  gap: 44px;
  align-items: center;
  margin-bottom: 60px;
}

.pc-icon-final img {
  display: block;
  width: 100%;
  filter: drop-shadow(0 10px 16px rgba(10, 50, 110, 0.3));
}

.pc-icon-sketch-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
  gap: 14px;
}

.pc-icon-sketch-grid img {
  display: block;
  width: auto;
  height: 124px;
}

.pc-welcome {
  display: grid;
  grid-template-columns: 1fr minmax(240px, 35%);
  gap: 36px;
  align-items: center;
  margin-bottom: 36px;
}

.pc-rounded-banner {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 3.75% / 8.95%;
  box-shadow: 0 12px 30px rgba(10, 50, 110, 0.25);
}

.pc-faq {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pc-faq img {
  display: block;
  width: 100%;
}

.pc-channel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

/* Livestream overlay */
.pc-overlay {
  max-width: 1000px;
  margin: 0 auto;
}

.pc-overlay img {
  display: block;
  width: 100%;
  border-radius: 12px;
  box-shadow: 0 18px 44px rgba(10, 50, 110, 0.25);
}

/* Closing */
.pc-outro {
  padding: 104px 40px 84px;
  text-align: center;
}

.pc-back-link {
  display: inline-block;
  padding: 12px 34px 10px;
  font-family: "GhostkidAOE", "GrilledCheese", sans-serif;
  font-size: 26px;
  color: #fff;
  text-decoration: none;
  text-shadow: 0 2px 0 #135a9e;
  background: linear-gradient(180deg, #3aa4ef 0%, #1670c9 100%);
  border: 3px solid #fff;
  border-radius: 999px;
  box-shadow: 0 6px 0 #1a6bb8, 0 12px 24px rgba(10, 50, 110, 0.25);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.pc-back-link::before {
  content: '\2039\00a0';
}

.pc-back-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 0 #1a6bb8, 0 14px 26px rgba(10, 50, 110, 0.25);
}

.pc-disclaimer {
  max-width: 560px;
  margin: 30px auto 0;
  font-family: "Futura", "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  line-height: 1.5;
  color: #74523c;
}

/* Poptropica Club teaser (on the Poptropica Legacy page) */
.pc-teaser-inner {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.pc-teaser-link {
  display: inline-block;
  padding: 12px 34px 9px;
  font-family: "GrilledCheese", sans-serif;
  font-size: 26px;
  text-transform: uppercase;
  text-decoration: none;
  color: #1f82f2;
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 6px 0 #1a6bb8;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.pc-teaser-link::after {
  content: '\00a0\203A';
}

.pc-teaser-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 0 #1a6bb8;
}

/* ── Poptropica Club responsive ── */

@media (max-width: 720px) {
  .pc-title {
    font-size: 48px;
  }

  .pc-passport-row,
  .pc-wiki-pages,
  .pc-icon-row,
  .pc-welcome {
    grid-template-columns: 1fr;
  }

  .pc-passport-row {
    gap: 36px;
  }

  .pc-site-pair {
    gap: 24px;
  }

  .pc-wiki-card {
    width: 100%; /* fill the column even before the lazy image has loaded */
    max-width: 290px;
    margin: 0 auto;
  }

  .pc-icon-final {
    width: 100%; /* fill the column even before the lazy image has loaded */
    max-width: 220px;
    margin: 0 auto;
  }
}

@media (max-width: 480px) {

  .pc-band {
    padding: 48px 24px 60px;
  }

  .pc-band-sky {
    padding: 72px 24px 76px;
  }

  .pc-band-cloud::before,
  .pc-band-cloud::after {
    height: 36px;
    background:
      radial-gradient(circle 28px at 50% 100%, #fff 96%, transparent 100%) 0 100% / 54px 36px repeat-x,
      radial-gradient(circle 20px at 50% 100%, #fff 96%, transparent 100%) 24px 100% / 38px 36px repeat-x;
  }

  .pc-title {
    font-size: 34px;
    margin-bottom: 18px;
  }

  .pc-kicker {
    font-size: 38px;
    text-align: center;
  }

  .pc-body,
  .pc-intro-text,
  .pc-bubble p {
    font-size: 15px;
  }

  .pc-bubble {
    padding: 14px 16px;
    margin-bottom: 32px;
    border-radius: 14px;
  }

  .pc-body-center {
    margin-bottom: 32px;
  }

  .pc-caption {
    font-size: 12px;
  }

  .pc-intro {
    padding: 28px 24px 56px;
  }

  .pc-intro-inner {
    flex-direction: column;
    gap: 24px;
    text-align: center;
  }

  .pc-mascot {
    flex: none;
    width: 150px;
    margin-top: 84px;
  }

  .pc-passport-row {
    gap: 28px;
  }

  .pc-card {
    padding: 18px 16px 12px;
    border-radius: 18px;
  }

  .pc-site-pair {
    grid-template-columns: 1fr;
    max-width: 320px;
    margin-top: 32px;
  }

  .pc-chips {
    gap: 7px;
  }

  .pc-chips li {
    padding: 5px 11px 4px;
    font-size: 12px;
  }

  .pc-wiki-logos {
    gap: 16px;
    margin-bottom: 36px;
  }

  .pc-wiki-logo-small img {
    width: 120px;
  }

  .pc-wiki-logo-square img {
    width: 112px;
    border-radius: 14px;
  }

  .pc-wiki-main,
  .pc-wiki-pages,
  .pc-icon-row {
    margin-bottom: 36px;
  }

  .pc-wiki-pages {
    gap: 28px;
  }

  .pc-wiki-card {
    max-width: 230px;
  }

  .pc-icon-final {
    max-width: 170px;
  }

  .pc-icon-sketch-grid img {
    height: 72px;
  }

  .pc-welcome {
    gap: 20px;
  }

  .pc-faq {
    gap: 8px;
  }

  .pc-channel-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .pc-outro {
    padding: 64px 24px 56px;
  }

  .pc-back-link {
    font-size: 16px;
    padding: 10px 18px 8px;
    white-space: nowrap;
  }

  .pc-teaser-link {
    font-size: 17px;
    padding: 10px 22px 8px;
  }
}

/* ══════════════════════════════════════════
   Sunscreen Saviour page (projects/sunscreen-saviour.html)
   ══════════════════════════════════════════ */

/* ── Sunscreen Saviour page ── */

.ss-page {
  --ss-ocean: #063e88;
  --ss-ink: #13295c;
  --ss-sand: #e8b363;
  --ss-sand-deep: #dc9a43;
  --ss-kraft: #8d6238;
  --ss-kraft-deep: #6e4a29;
  --ss-wood: #4d311d;
  --ss-red: #c5291c;
  --ss-cream: #fffce8;
  --ss-mint: #9ff5e3;
  --ss-teal: #1f8a73;
  --ss-sky: #3d89c3;
  --ss-orange: #ff9200;
  --ss-yellow: #ffe27a;
  --ss-candy: repeating-linear-gradient(-45deg,
    #c1333b 0 14px, #fffce8 14px 24px,
    #7fe6d3 24px 38px, #fffce8 38px 48px,
    #ffd54f 48px 62px, #fffce8 62px 72px,
    #ff9200 72px 86px, #fffce8 86px 96px);
  --ss-noise: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27260%27 height=%27260%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%27.85%27 numOctaves=%272%27 stitchTiles=%27stitch%27/%3E%3CfeColorMatrix values=%270 0 0 0 .3 0 0 0 0 .18 0 0 0 0 .06 0 0 0 .5 0%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url%28%23n%29%27/%3E%3C/svg%3E");
  max-width: none;
  padding: 0;
  flex: none;
  overflow-x: clip;
  background: var(--ss-sand-deep);
  color: var(--ss-ink);
  font-family: "Futura", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.ss-page img {
  display: block;
}

@keyframes ss-spin {
  to { transform: rotate(360deg); }
}

@keyframes ss-pop {
  from { transform: translate(-50%, -38%) scale(0.72) rotate(-4deg); opacity: 0; }
  to { transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: 1; }
}

/* Intro popup */
.ss-intro {
  position: relative;
  z-index: 2;
  background: var(--ss-sand-deep);
  padding: 0 40px 88px;
}

.ss-popup {
  position: relative;
  max-width: 940px;
  margin: -70px auto 0;
  padding: 14px;
  border-radius: 40px;
  background: var(--ss-candy);
  box-shadow: 0 0 0 3px #7a5230, 0 16px 0 rgba(110, 74, 41, 0.35);
}

.ss-popup-body {
  border-radius: 28px;
  background: var(--ss-noise), var(--ss-kraft);
  box-shadow: inset 0 0 0 3px rgba(60, 35, 15, 0.35), inset 0 10px 26px rgba(40, 20, 5, 0.45);
  padding: 40px 54px 36px;
  color: #fff;
}

.ss-intro-text {
  font-size: 17px;
  line-height: 1.7;
  font-weight: 400;
  text-indent: 2em;
}

.ss-intro-text strong {
  font-weight: 700;
  color: var(--ss-yellow);
}

.ss-intro-tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 26px;
}

.ss-intro-tags li {
  font-family: "CurseCasual", "Futura", sans-serif;
  font-size: 19px;
  line-height: 1;
  color: var(--ss-ink);
  background: var(--ss-cream);
  border-radius: 999px;
  padding: 9px 16px 7px;
  box-shadow: 0 3px 0 rgba(40, 20, 5, 0.45);
}

.ss-intro-tags li:nth-child(5n+1) { background: #ffd9d4; }
.ss-intro-tags li:nth-child(5n+2) { background: #d4fbf2; }
.ss-intro-tags li:nth-child(5n+3) { background: #fff1b3; }
.ss-intro-tags li:nth-child(5n+4) { background: #ffe0bd; }

/* Sections */
.ss-section {
  position: relative;
  z-index: 3;
  padding: 80px 40px 96px;
}

.ss-inner {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  z-index: 1;
}

.ss-section-paper {
  --ss-edge: #f7e9c7;
  background: var(--ss-noise), #f7e9c7;
}

.ss-section-sky {
  --ss-edge: #2f79b8;
  background: linear-gradient(#2f79b8, #6fb0d9);
}

.ss-deco {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.ss-section-sand {
  --ss-edge: var(--ss-sand);
  background: var(--ss-noise), var(--ss-sand);
}

.ss-section-kraft {
  --ss-edge: var(--ss-kraft);
  background: var(--ss-noise), var(--ss-kraft);
}

.ss-section-ocean {
  background: var(--ss-ocean);
}

.ss-section-shop {
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0) 0 118px, rgba(0, 0, 0, 0.22) 118px 121px),
    var(--ss-noise),
    var(--ss-wood);
  padding-top: 120px;
}

.ss-section-burst {
  --ss-edge: #3a8ecd;
  background:
    radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 60%),
    repeating-conic-gradient(from 0deg at 50% 30%, #2f7fc0 0deg 9deg, #3f95d3 9deg 18deg),
    #3587c8;
}

/* Scalloped edges */
.ss-scallop-top::before,
.ss-foam-top::before,
.ss-foam-top::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 26px;
  -webkit-mask-image: radial-gradient(circle at 26px 26px, #000 25px, transparent 26px);
  mask-image: radial-gradient(circle at 26px 26px, #000 25px, transparent 26px);
  -webkit-mask-size: 52px 26px;
  mask-size: 52px 26px;
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
  pointer-events: none;
}

.ss-scallop-top::before {
  background: var(--ss-edge, var(--ss-sand));
}

.ss-scallop-sm::before {
  height: 14px;
  -webkit-mask-image: radial-gradient(circle at 14px 14px, #000 13px, transparent 14px);
  mask-image: radial-gradient(circle at 14px 14px, #000 13px, transparent 14px);
  -webkit-mask-size: 28px 14px;
  mask-size: 28px 14px;
}

.ss-foam-top::before {
  background: var(--ss-cream);
  height: 31px;
  -webkit-mask-image: radial-gradient(circle at 26px 31px, #000 30px, transparent 31px);
  mask-image: radial-gradient(circle at 26px 31px, #000 30px, transparent 31px);
  -webkit-mask-size: 52px 31px;
  mask-size: 52px 31px;
}

.ss-foam-top::after {
  background: var(--ss-ocean);
  bottom: calc(100% - 1px);
  height: 25px;
  -webkit-mask-image: radial-gradient(circle at 26px 25px, #000 24px, transparent 25px);
  mask-image: radial-gradient(circle at 26px 25px, #000 24px, transparent 25px);
  -webkit-mask-size: 52px 25px;
  mask-size: 52px 25px;
}

/* Sno Worries awning */
.ss-awning {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 62px;
  background: repeating-linear-gradient(90deg,
    var(--ss-red) 0 120px, var(--ss-cream) 120px 240px,
    #8ff0de 240px 360px, var(--ss-cream) 360px 480px);
  -webkit-mask-image: linear-gradient(#000, #000), radial-gradient(circle at 60px 0, #000 59px, transparent 60px);
  mask-image: linear-gradient(#000, #000), radial-gradient(circle at 60px 0, #000 59px, transparent 60px);
  -webkit-mask-size: 100% 12px, 120px 62px;
  mask-size: 100% 12px, 120px 62px;
  -webkit-mask-repeat: no-repeat, repeat-x;
  mask-repeat: no-repeat, repeat-x;
  -webkit-mask-position: 0 0, 0 0;
  mask-position: 0 0, 0 0;
  filter: drop-shadow(0 6px 0 rgba(0, 0, 0, 0.3));
}

/* Headings */
.ss-title {
  position: relative;
  text-align: center;
  font-family: "Chaloops", "Futura", sans-serif;
  font-weight: 700;
  font-size: clamp(40px, 4.4vw, 62px);
  line-height: 1.05;
  letter-spacing: 0.5px;
  color: var(--ss-ink);
  margin-bottom: 18px;
  text-shadow:
    3px 0 0 var(--ss-cream), -3px 0 0 var(--ss-cream), 0 3px 0 var(--ss-cream), 0 -3px 0 var(--ss-cream),
    2px 2px 0 var(--ss-cream), -2px 2px 0 var(--ss-cream), 2px -2px 0 var(--ss-cream), -2px -2px 0 var(--ss-cream),
    0 8px 0 rgba(60, 35, 10, 0.25);
}

.ss-title-light {
  color: var(--ss-cream);
  text-shadow:
    3px 0 0 var(--ss-teal), -3px 0 0 var(--ss-teal), 0 3px 0 var(--ss-teal), 0 -3px 0 var(--ss-teal),
    2px 2px 0 var(--ss-teal), -2px 2px 0 var(--ss-teal), 2px -2px 0 var(--ss-teal), -2px -2px 0 var(--ss-teal),
    0 8px 0 rgba(5, 20, 50, 0.35);
}

.ss-subtitle {
  text-align: center;
  font-family: "Chaloops", "Futura", sans-serif;
  font-weight: 700;
  font-size: clamp(32px, 3.2vw, 44px);
  line-height: 1.1;
  color: var(--ss-cream);
  margin: 76px 0 12px;
  text-shadow:
    3px 0 0 var(--ss-ink), -3px 0 0 var(--ss-ink), 0 3px 0 var(--ss-ink), 0 -3px 0 var(--ss-ink),
    2px 2px 0 var(--ss-ink), -2px 2px 0 var(--ss-ink), 2px -2px 0 var(--ss-ink), -2px -2px 0 var(--ss-ink),
    0 7px 0 rgba(60, 35, 10, 0.25);
}

.ss-lede {
  max-width: 780px;
  margin: 0 auto 44px;
  font-size: 16px;
  line-height: 1.7;
  color: #3a2a17;
  text-align: center;
}

.ss-section-paper .ss-lede {
  color: #4a3620;
}

.ss-lede-light {
  color: #fff;
}

.ss-section-sky .ss-lede-light,
.ss-section-burst .ss-lede-light {
  text-shadow: 0 1px 2px rgba(6, 30, 80, 0.45);
}

.ss-lede-center {
  margin-bottom: 36px;
}

/* Frames */
.ss-frame {
  background: #fff;
  border-radius: 20px;
  padding: 12px;
  box-shadow: 0 10px 0 rgba(40, 25, 10, 0.2);
}

.ss-frame img {
  width: 100%;
  height: auto;
  border-radius: 12px;
}

.ss-frame-narrow {
  max-width: 860px;
  margin: 0 auto;
}

.ss-section-sky .ss-frame {
  box-shadow: 0 10px 0 rgba(6, 30, 80, 0.3);
}

.ss-sky-sun {
  position: absolute;
  width: 520px;
  height: auto;
  right: -140px;
  top: -120px;
  opacity: 0.16;
  pointer-events: none;
  z-index: 0;
}

/* Taped concept page */
.ss-taped {
  position: relative;
  background: #fff;
  padding: 14px;
  transform: rotate(-0.8deg);
  box-shadow: 0 12px 24px rgba(80, 55, 20, 0.22), 0 2px 0 rgba(80, 55, 20, 0.15);
}

.ss-taped img {
  width: 100%;
  height: auto;
}

.ss-taped::before,
.ss-taped::after {
  content: "";
  position: absolute;
  width: 150px;
  height: 36px;
  top: -16px;
  background: rgba(127, 230, 211, 0.75);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
  pointer-events: none;
}

.ss-taped::before {
  left: 8%;
  transform: rotate(-6deg);
}

.ss-taped::after {
  right: 8%;
  transform: rotate(5deg);
  background: rgba(255, 146, 0, 0.62);
}

/* Roster */
.ss-roster {
  --ss-cols: 5;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px 18px;
}

.ss-card {
  position: relative;
  flex: 0 0 calc((100% - (var(--ss-cols) - 1) * 18px) / var(--ss-cols));
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--ss-cream);
  border-radius: 18px;
  padding: 16px 14px 18px;
  box-shadow: 0 0 0 3px var(--ss-ink), 0 8px 0 rgba(40, 25, 10, 0.3);
}

.ss-card-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%) rotate(-3deg);
  font-family: "CurseCasual", "Futura", sans-serif;
  font-size: 17px;
  line-height: 1;
  white-space: nowrap;
  color: #fff;
  background: var(--ss-red);
  border-radius: 999px;
  padding: 6px 12px 4px;
  box-shadow: 0 0 0 2px var(--ss-ink);
}

.ss-card-snow .ss-card-badge {
  background: var(--ss-ocean);
}

.ss-card-art {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  margin: 8px 0 12px;
}

.ss-card-ginger .ss-card-art {
  background: #f7c79a;
}

.ss-card-snow .ss-card-art {
  background: #bfeee6;
}

.ss-card-art img {
  position: absolute;
  inset: 10px;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  object-fit: contain;
  object-position: center bottom;
  mix-blend-mode: multiply;
}

.ss-card-name {
  font-family: "Chaloops", "Futura", sans-serif;
  font-weight: 700;
  font-size: 21px;
  line-height: 1.1;
  color: var(--ss-ink);
  margin-bottom: 6px;
}

.ss-card-note {
  font-size: 13.5px;
  line-height: 1.45;
  color: #3a2a17;
}

.ss-card-quote {
  font-family: "CurseCasual", "Futura", sans-serif;
  font-size: 16px;
  line-height: 1.25;
  color: var(--ss-teal);
  margin-top: 8px;
}

/* Cutout steps */
.ss-steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 56px;
  counter-reset: ss-step;
}

.ss-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ss-step + .ss-step::before {
  content: "";
  position: absolute;
  top: calc(50% - 22px);
  left: -44px;
  width: 32px;
  height: 32px;
  background: var(--ss-yellow);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M4 10.5h11.2l-4.1-4.1 2.1-2.1L21 12l-7.8 7.7-2.1-2.1 4.1-4.1H4z%27/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M4 10.5h11.2l-4.1-4.1 2.1-2.1L21 12l-7.8 7.7-2.1-2.1 4.1-4.1H4z%27/%3E%3C/svg%3E") center / contain no-repeat;
}

.ss-step-art {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 22px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 0 0 4px var(--ss-cream), 0 12px 0 rgba(40, 20, 5, 0.35);
}

.ss-step-art-white {
  background: #fff;
  padding: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ss-step-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ss-step-art-white img {
  object-fit: contain;
}

.ss-step-label {
  font-family: "CurseCasual", "Futura", sans-serif;
  font-size: 24px;
  line-height: 1;
  color: var(--ss-yellow);
  margin-top: 26px;
}

/* Beach passes */
.ss-pass-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 22px;
}

.ss-pass-tab {
  font-family: "Chaloops", "Futura", sans-serif;
  font-weight: 700;
  font-size: 19px;
  line-height: 1;
  color: var(--ss-ink);
  background: var(--ss-cream);
  border: 0;
  border-radius: 999px;
  padding: 11px 20px 10px;
  cursor: pointer;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.35);
  transition: transform 0.15s ease, background-color 0.15s ease;
}

.ss-pass-tab:hover {
  transform: translateY(-2px);
}

.ss-pass-tab.is-active {
  background: var(--ss-yellow);
  box-shadow: 0 0 0 3px var(--ss-cream), 0 4px 0 3px rgba(0, 0, 0, 0.35);
}

.ss-pass-tab:focus-visible,
.ss-sign:focus-visible {
  outline: 3px solid var(--ss-yellow);
  outline-offset: 3px;
}

.ss-pass-stage {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 20px;
  overflow: hidden;
  background: var(--ss-sand);
  box-shadow: 0 0 0 6px var(--ss-cream), 0 16px 0 rgba(0, 0, 0, 0.3);
}

.ss-pass {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease;
}

.ss-pass.is-active {
  opacity: 1;
  pointer-events: auto;
}

.ss-shots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  margin-top: 56px;
}

.ss-shot img {
  width: 100%;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 0 0 5px var(--ss-cream), 0 12px 0 rgba(0, 0, 0, 0.3);
}

.ss-shot figcaption {
  font-family: "CurseCasual", "Futura", sans-serif;
  font-size: 21px;
  line-height: 1.2;
  text-align: center;
  color: var(--ss-cream);
  margin-top: 22px;
}

/* Compare sliders */
.ss-compare {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 0 0 6px var(--ss-cream), 0 16px 0 rgba(0, 0, 0, 0.3);
  user-select: none;
  -webkit-user-select: none;
}

.ss-compare-spaced {
  margin-top: 56px;
}

.ss-compare img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.ss-compare-sketch {
  position: absolute;
  inset: 0;
  clip-path: inset(0 calc(100% - var(--ss-pos, 50%)) 0 0);
  background: #fff;
}

.ss-compare-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--ss-pos, 50%);
  width: 4px;
  margin-left: -2px;
  background: var(--ss-cream);
  box-shadow: 0 0 0 1.5px rgba(19, 41, 92, 0.6);
  pointer-events: none;
}

.ss-compare-knob {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 52px;
  height: 52px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    conic-gradient(#c1333b 0 45deg, #fffce8 45deg 90deg, #7fe6d3 90deg 135deg, #fffce8 135deg 180deg,
      #ff9200 180deg 225deg, #fffce8 225deg 270deg, #ffd54f 270deg 315deg, #fffce8 315deg 360deg);
  box-shadow: 0 0 0 3px var(--ss-ink), 0 4px 0 3px rgba(0, 0, 0, 0.25);
}

.ss-compare-tag {
  position: absolute;
  bottom: 14px;
  font-family: "CurseCasual", "Futura", sans-serif;
  font-size: 19px;
  line-height: 1;
  color: var(--ss-ink);
  background: var(--ss-cream);
  border-radius: 999px;
  padding: 7px 13px 5px;
  box-shadow: 0 0 0 2px var(--ss-ink);
  pointer-events: none;
}

.ss-compare-tag-left {
  left: 14px;
}

.ss-compare-tag-right {
  right: 14px;
  background: var(--ss-yellow);
}

.ss-compare-range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  touch-action: pan-y;
  -webkit-appearance: none;
  appearance: none;
}

.ss-compare-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 60px;
  height: 100vh;
}

.ss-compare:focus-within .ss-compare-knob {
  box-shadow: 0 0 0 3px var(--ss-ink), 0 0 0 7px var(--ss-yellow);
}

/* Sno Worries extras */
.ss-shop-extra {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: 40px;
  align-items: center;
  margin-top: 56px;
}

.ss-menu-board {
  position: relative;
  padding: 14px;
  border-radius: 26px;
  background: var(--ss-candy);
  box-shadow: 0 12px 0 rgba(0, 0, 0, 0.35);
}

.ss-menu-board::before {
  content: "";
  position: absolute;
  inset: 14px;
  border-radius: 16px;
  background: var(--ss-noise), var(--ss-kraft);
  box-shadow: inset 0 6px 18px rgba(40, 20, 5, 0.45);
}

.ss-menu-board > * {
  position: relative;
}

.ss-menu-title {
  font-family: "CurseCasual", "Futura", sans-serif;
  font-weight: 400;
  font-size: 38px;
  line-height: 1;
  text-align: center;
  color: #fff;
  padding-top: 26px;
}

.ss-menu-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, auto);
  justify-content: center;
  gap: 4px 28px;
  margin: 18px 22px 0;
  font-family: "CurseCasual", "Futura", sans-serif;
  font-size: 19px;
  line-height: 1.3;
  color: #fff;
}

.ss-menu-list s {
  opacity: 0.75;
  text-decoration-thickness: 2px;
}

.ss-menu-sizes {
  font-family: "CurseCasual", "Futura", sans-serif;
  font-size: 19px;
  text-align: center;
  color: #fff;
  margin: 18px 22px 0;
}

.ss-menu-sizes span {
  color: var(--ss-yellow);
  margin-right: 6px;
}

.ss-menu-quote {
  font-family: "CurseCasual", "Futura", sans-serif;
  font-size: 22px;
  text-align: center;
  color: var(--ss-mint);
  margin: 14px 22px 0;
  padding-bottom: 28px;
}

.ss-shot-tight figcaption {
  margin-top: 18px;
}

/* Interface */
.ss-ui-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  align-items: stretch;
}

.ss-ui-panel {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(255, 252, 232, 0.14);
  border: 3px dashed rgba(255, 252, 232, 0.55);
  border-radius: 26px;
  padding: 34px 24px 24px;
}

.ss-signpost {
  position: relative;
  width: min(360px, 100%);
  aspect-ratio: 360 / 440;
}

.ss-signpost-pole {
  position: absolute;
  left: 50%;
  top: 0;
  height: 100%;
  width: auto;
  transform: translateX(-50%);
  pointer-events: none;
}

.ss-sign {
  position: absolute;
  left: 50%;
  display: block;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transform: translateX(-50%);
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}

.ss-sign img {
  width: 100%;
  height: auto;
  pointer-events: none;
}

.ss-sign .ss-sign-down {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}

.ss-sign:hover {
  transform: translateX(-50%) scale(1.06) rotate(-1.5deg);
  filter: brightness(1.06) drop-shadow(0 6px 0 rgba(6, 30, 80, 0.3));
}

.ss-sign:active {
  transform: translateX(-50%) scale(0.98);
}

.ss-sign:active .ss-sign-up {
  opacity: 0;
}

.ss-sign:active .ss-sign-down {
  opacity: 1;
}

.ss-sign-play { top: 8%; width: 56%; margin-left: 4%; }
.ss-sign-settings { top: 32%; width: 78%; margin-left: -3%; }
.ss-sign-credits { top: 53%; width: 64%; margin-left: 1%; }
.ss-sign-quit { top: 73%; width: 60%; margin-left: 3%; }

.ss-hint {
  font-family: "CurseCasual", "Futura", sans-serif;
  font-size: 21px;
  line-height: 1.2;
  text-align: center;
  color: var(--ss-cream);
  margin-top: 22px;
}

.ss-hint-touch {
  display: none;
}

@media (hover: none) {
  .ss-hint-desktop { display: none; }
  .ss-hint-touch { display: block; }
}

.ss-cursors {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
  max-width: 480px;
}

.ss-cursor {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background: var(--ss-cream);
  border-radius: 18px;
  padding: 16px 10px 12px;
  box-shadow: 0 0 0 3px var(--ss-ink), 0 6px 0 rgba(6, 30, 80, 0.35);
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ss-cursor:hover {
  transform: translateY(-4px) rotate(-2deg);
}

.ss-cursor img {
  width: 74%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  pointer-events: none;
}

.ss-cursor span {
  font-family: "CurseCasual", "Futura", sans-serif;
  font-size: 18px;
  line-height: 1;
  color: var(--ss-ink);
}

.ss-cursor:nth-child(4) {
  grid-column: 1 / 2;
  margin-left: 50%;
  margin-right: -50%;
}

.ss-cursor:nth-child(5) {
  grid-column: 2 / 3;
  margin-left: 50%;
  margin-right: -50%;
}

.ss-howto {
  max-width: 900px;
  margin: 64px auto 0;
}

.ss-howto img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 12px 0 rgba(6, 30, 80, 0.3));
}

/* Key art */
.ss-keyart {
  display: grid;
  grid-template-columns: 1.26fr 1fr;
  gap: 32px;
  align-items: center;
}

.ss-keyart-banner {
  grid-column: 1 / -1;
}

.ss-keyart-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.ss-keyart-icon img {
  width: 82%;
  height: auto;
  filter: drop-shadow(0 10px 0 rgba(40, 25, 10, 0.25));
}

/* Responsive */
@media (max-width: 1100px) {
  .ss-roster {
    --ss-cols: 4;
  }

  .ss-steps {
    gap: 44px;
  }

  .ss-step + .ss-step::before {
    left: -38px;
    width: 28px;
    height: 28px;
  }

  .ss-ui-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .ss-shop-extra {
    grid-template-columns: minmax(0, 1fr);
  }

  .ss-menu-board {
    max-width: 520px;
    width: 100%;
    margin: 0 auto;
  }
}

@media (max-width: 900px) {
  .ss-roster {
    --ss-cols: 3;
  }
}

@media (max-width: 720px) {
  .ss-section {
    padding: 64px 24px 76px;
  }

  .ss-intro {
    padding: 0 24px 64px;
  }

  .ss-popup-body {
    padding: 30px 28px 28px;
  }

  .ss-roster {
    --ss-cols: 2;
  }

  .ss-steps {
    grid-template-columns: 1fr;
    max-width: 360px;
    margin: 0 auto;
    gap: 64px;
  }

  .ss-step + .ss-step::before {
    top: -50px;
    left: calc(50% - 16px);
    width: 32px;
    height: 32px;
    transform: rotate(90deg);
  }

  .ss-shots {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .ss-keyart {
    grid-template-columns: 1fr;
  }

  .ss-keyart-icon img {
    width: 60%;
  }

  .ss-sky-sun {
    width: 360px;
    right: -120px;
    top: -90px;
  }
}

@media (max-width: 480px) {

  .ss-intro {
    padding: 0 16px 52px;
  }

  .ss-popup {
    margin-top: -36px;
    padding: 9px;
    border-radius: 28px;
  }

  .ss-popup-body {
    border-radius: 20px;
    padding: 24px 20px 22px;
  }

  .ss-intro-text {
    font-size: 15px;
    line-height: 1.65;
  }

  .ss-intro-tags li {
    font-size: 16px;
    padding: 8px 12px 6px;
  }

  .ss-section {
    padding: 52px 16px 64px;
  }

  .ss-title {
    font-size: 36px;
  }

  .ss-subtitle {
    font-size: 30px;
    margin-top: 56px;
  }

  .ss-lede {
    font-size: 15px;
    margin-bottom: 32px;
  }

  .ss-frame {
    padding: 6px;
    border-radius: 14px;
  }

  .ss-frame img {
    border-radius: 9px;
  }

  .ss-taped {
    padding: 8px;
  }

  .ss-taped::before,
  .ss-taped::after {
    width: 90px;
    height: 26px;
    top: -12px;
  }

  .ss-roster {
    --ss-cols: 1;
    gap: 26px;
  }

  .ss-card {
    display: grid;
    grid-template-columns: 96px 1fr;
    grid-template-rows: auto auto 1fr;
    column-gap: 14px;
    align-items: start;
    text-align: left;
    padding: 18px 14px 14px;
  }

  .ss-card-badge {
    left: 16px;
    transform: rotate(-3deg);
    font-size: 15px;
  }

  .ss-card-art {
    grid-row: 1 / 4;
    margin: 4px 0 0;
  }

  .ss-card-art img {
    inset: 6px;
    width: calc(100% - 12px);
    height: calc(100% - 12px);
  }

  .ss-card-name {
    font-size: 19px;
    margin: 4px 0 4px;
  }

  .ss-card-note {
    font-size: 13px;
  }

  .ss-card-quote {
    font-size: 15px;
    margin-top: 6px;
  }

  .ss-steps {
    max-width: 260px;
  }

  .ss-step-label {
    font-size: 21px;
    margin-top: 20px;
  }

  .ss-pass-tabs {
    gap: 8px;
  }

  .ss-pass-tab {
    font-size: 15px;
    padding: 9px 13px 8px;
  }

  .ss-pass-stage,
  .ss-compare {
    border-radius: 12px;
    box-shadow: 0 0 0 4px var(--ss-cream), 0 10px 0 rgba(0, 0, 0, 0.3);
  }

  .ss-compare-knob {
    width: 38px;
    height: 38px;
  }

  .ss-compare-tag {
    font-size: 14px;
    bottom: 8px;
    padding: 5px 9px 3px;
  }

  .ss-compare-tag-left { left: 8px; }
  .ss-compare-tag-right { right: 8px; }

  .ss-shot figcaption,
  .ss-hint {
    font-size: 18px;
  }

  .ss-menu-title {
    font-size: 32px;
    padding-top: 20px;
  }

  .ss-menu-list {
    gap: 2px 16px;
    margin: 14px 16px 0;
    font-size: 16px;
  }

  .ss-menu-sizes {
    font-size: 16px;
    margin: 14px 16px 0;
  }

  .ss-menu-quote {
    font-size: 19px;
    padding-bottom: 22px;
  }

  .ss-ui-panel {
    padding: 24px 12px 16px;
    border-radius: 18px;
  }

  .ss-cursors {
    gap: 10px;
  }

  .ss-cursor {
    padding: 10px 4px 8px;
    border-radius: 12px;
    gap: 6px;
  }

  .ss-cursor span {
    font-size: 13px;
  }

  .ss-howto {
    margin-top: 44px;
  }

  .ss-awning {
    height: 40px;
    background: repeating-linear-gradient(90deg,
      var(--ss-red) 0 80px, var(--ss-cream) 80px 160px,
      #8ff0de 160px 240px, var(--ss-cream) 240px 320px);
    -webkit-mask-image: linear-gradient(#000, #000), radial-gradient(circle at 40px 0, #000 39px, transparent 40px);
    mask-image: linear-gradient(#000, #000), radial-gradient(circle at 40px 0, #000 39px, transparent 40px);
    -webkit-mask-size: 100% 8px, 80px 40px;
    mask-size: 100% 8px, 80px 40px;
  }

  .ss-section-shop {
    padding-top: 84px;
  }

  .ss-scallop-top::before,
  .ss-foam-top::before,
  .ss-foam-top::after {
    -webkit-mask-image: radial-gradient(circle at 16px 16px, #000 15px, transparent 16px);
    mask-image: radial-gradient(circle at 16px 16px, #000 15px, transparent 16px);
    -webkit-mask-size: 32px 16px;
    mask-size: 32px 16px;
    height: 16px;
  }

  .ss-foam-top::before {
    height: 20px;
    -webkit-mask-image: radial-gradient(circle at 16px 20px, #000 19px, transparent 20px);
    mask-image: radial-gradient(circle at 16px 20px, #000 19px, transparent 20px);
    -webkit-mask-size: 32px 20px;
    mask-size: 32px 20px;
  }

  .ss-foam-top::after {
    height: 16px;
    -webkit-mask-image: radial-gradient(circle at 16px 16px, #000 15px, transparent 16px);
    mask-image: radial-gradient(circle at 16px 16px, #000 15px, transparent 16px);
    -webkit-mask-size: 32px 16px;
    mask-size: 32px 16px;
  }

  .ss-sky-sun {
    width: 240px;
    right: -80px;
    top: -60px;
  }
}

@media (prefers-reduced-motion: reduce) {

  .ss-pass,
  .ss-sign,
  .ss-cursor,
  .ss-pass-tab {
    transition: none;
  }
}

/* ══════════════════════════════════════════
   Holmes page (projects/holmes.html)
   ══════════════════════════════════════════ */

/* ── Holmes page ── */

/* Brand faces, copied from the Holmes sources (both SIL Open Font License):
   EB Garamond is the app's serif display face, IBM Plex Mono its utility face */
@font-face {
  font-family: "HolmesGaramond";
  src: url("/shared/fonts/HolmesEBGaramond-Variable.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "HolmesGaramond";
  src: url("/shared/fonts/HolmesEBGaramond-Italic-Variable.woff2") format("woff2");
  font-weight: 400 800;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "HolmesPlexMono";
  src: url("/shared/fonts/HolmesPlexMono-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

.hl-page {
  --hl-pine: #31786b;
  --hl-pine-lift: #4b9474;
  --hl-jade: #47a08f;
  --hl-jade-lift: #5bbaa8;
  --hl-ink: #1c1b19;
  --hl-win: #1e1a19;
  --hl-panel: #262422;
  --hl-line: #3a3733;
  --hl-edge: #56554f;
  --hl-paper: #e6e1d8;
  --hl-paper-text: #57524d;
  --hl-ash: #a19b95;
  --hl-display: "HolmesGaramond", "EB Garamond", Palatino, "Palatino Linotype", Georgia, serif;
  --hl-mono: "HolmesPlexMono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --hl-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --hl-gutter: 40px;
  max-width: none;
  padding: 0;
  flex: none;
  background: var(--hl-ink);
  color: var(--hl-paper);
  font-family: var(--hl-sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

.hl-page figure {
  margin: 0;
}

/* Description */
.hl-desc {
  display: flow-root;
  background: var(--hl-ink);
  padding: 0 var(--hl-gutter) 104px;
}

.hl-desc-window {
  position: relative;
  z-index: 1;
  max-width: 1080px;
  margin: calc(min(1080px, 100%) * -0.2) auto 0;
}

.hl-desc-window img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 36px 60px rgba(0, 0, 0, 0.5));
}

.hl-desc-inner {
  max-width: 1100px;
  margin: 88px auto 0;
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: 56px;
  align-items: start;
}

.hl-disciplines {
  list-style: none;
  border-top: 1px solid var(--hl-line);
}

.hl-disciplines li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--hl-line);
  font-family: var(--hl-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--hl-ash);
}

.hl-disciplines li::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--hl-jade);
}

.hl-desc-text {
  font-family: var(--hl-display);
  font-weight: 400;
  font-size: 25px;
  line-height: 1.45;
  color: var(--hl-paper);
  max-width: 36em;
}

.hl-desc-text + .hl-desc-text {
  margin-top: 20px;
}

.hl-desc-text em {
  font-style: italic;
  color: #fff;
}

/* Sections */
.hl-section {
  padding: 104px var(--hl-gutter);
}

.hl-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.hl-section-paper {
  background: var(--hl-paper);
  color: var(--hl-ink);
}

.hl-section-green {
  position: relative;
  background:
    radial-gradient(ellipse 70% 55% at 28% 0%, rgba(75, 148, 116, 0.95) 0%, rgba(75, 148, 116, 0) 100%),
    var(--hl-pine);
  color: #fff;
}

.hl-section-win {
  background: var(--hl-win);
}

.hl-head {
  max-width: 740px;
  margin-bottom: 52px;
}

.hl-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--hl-mono);
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--hl-jade-lift);
}

.hl-eyebrow::before {
  content: "";
  flex: none;
  width: 32px;
  height: 1px;
  background: currentColor;
}

.hl-title {
  margin-top: 18px;
  font-family: var(--hl-display);
  font-weight: 400;
  font-size: clamp(40px, 4.3vw, 58px);
  line-height: 1.04;
  letter-spacing: -0.012em;
}

.hl-lede {
  margin-top: 20px;
  max-width: 60ch;
  font-size: 17px;
  line-height: 1.62;
  color: var(--hl-ash);
}

.hl-section-paper .hl-eyebrow {
  color: var(--hl-pine);
}

.hl-section-paper .hl-lede {
  color: var(--hl-paper-text);
}

.hl-section-green .hl-eyebrow {
  color: rgba(255, 255, 255, 0.8);
}

.hl-section-green .hl-lede {
  color: rgba(255, 255, 255, 0.88);
}

.hl-subhead {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 72px 0 28px;
  font-family: var(--hl-display);
  font-weight: 400;
  font-size: 30px;
  letter-spacing: -0.005em;
}

.hl-subhead::after {
  content: "";
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: 0.2;
}

.hl-head + .hl-subhead {
  margin-top: 0;
}

.hl-sublede {
  margin: -12px 0 28px;
}

/* Figures and cards */
.hl-fig {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.hl-card {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  overflow: hidden;
}

.hl-card img {
  display: block;
  width: 100%;
  height: auto;
}

.hl-caption {
  margin-top: 14px;
  font-family: var(--hl-mono);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hl-ash);
}

.hl-section-paper .hl-caption {
  color: var(--hl-paper-text);
}

.hl-card-white {
  background: #fff;
  box-shadow: 0 1px 2px rgba(28, 27, 25, 0.06), 0 18px 40px -24px rgba(28, 27, 25, 0.35);
}

.hl-card-pine {
  background: var(--hl-pine);
  box-shadow: 0 18px 40px -24px rgba(28, 27, 25, 0.45);
}

.hl-card-panel {
  background: var(--hl-panel);
  border: 1px solid var(--hl-line);
}

.hl-card-paper {
  background: var(--hl-paper);
}

/* Identity: exploration grid */
.hl-explore {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.hl-explore-wide {
  grid-column: span 2;
}

.hl-explore-pipe img {
  width: 78%;
}

.hl-explore-final img {
  width: auto;
  height: 74%;
  max-height: 340px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Brand system */
.hl-system {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 28px;
}

.hl-system-lockup img {
  width: 72%;
  margin: 56px 0;
  /* the ink logo would vanish on the lightbox's black overlay, so it is not zoomable */
  pointer-events: none;
}

.hl-system-icon img {
  width: 62%;
  margin: 40px 0;
}

.hl-palette {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  margin-top: 56px;
}

.hl-swatch {
  display: block;
  height: 132px;
  border-radius: 12px;
  background: var(--sw);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.hl-sw-pine { --sw: #31786b; }
.hl-sw-jade { --sw: #47a08f; }
.hl-sw-ink { --sw: #1c1b19; }
.hl-sw-paper { --sw: #e6e1d8; }
.hl-sw-ash { --sw: #918b86; }

.hl-sw-ink .hl-swatch {
  box-shadow: inset 0 0 0 1px var(--hl-edge);
}

.hl-sw-name {
  display: block;
  margin-top: 14px;
  font-family: var(--hl-display);
  font-size: 23px;
  line-height: 1.1;
}

.hl-sw-hex {
  display: block;
  margin-top: 4px;
  font-family: var(--hl-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--hl-ash);
}

.hl-type {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 28px;
  margin-top: 56px;
}

.hl-specimen {
  position: relative;
  padding: 32px 36px 36px;
  border: 1px solid var(--hl-line);
  border-radius: 14px;
  background: var(--hl-panel);
  overflow: hidden;
}

.hl-specimen-role {
  font-family: var(--hl-mono);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hl-jade-lift);
}

.hl-specimen-glyphs {
  margin: 10px 0 22px;
  font-family: var(--hl-display);
  font-weight: 400;
  font-size: 128px;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--hl-paper);
}

.hl-specimen-mono .hl-specimen-glyphs {
  font-family: var(--hl-mono);
  font-weight: 500;
  font-size: 104px;
  letter-spacing: -0.04em;
  line-height: 1.08;
}

.hl-specimen-name {
  font-family: var(--hl-display);
  font-size: 26px;
  line-height: 1.2;
}

.hl-specimen-sample {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px dashed rgba(145, 139, 134, 0.3);
  font-family: var(--hl-display);
  font-style: italic;
  font-size: 21px;
  line-height: 1.35;
  color: var(--hl-ash);
}

.hl-specimen-mono .hl-specimen-sample {
  font-family: var(--hl-mono);
  font-style: normal;
  font-size: 13px;
  line-height: 1.7;
  letter-spacing: 0.02em;
}

.hl-specimen-sample b {
  font-weight: 500;
  color: var(--hl-jade-lift);
}

/* Animated mark */
.hl-motion {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}

.hl-window {
  display: flex;
  flex-direction: column;
  border: 1px solid #515149;
  border-radius: 14px;
  background: var(--hl-win);
  color: var(--hl-paper);
  overflow: hidden;
  box-shadow: 0 40px 80px -36px rgba(0, 0, 0, 0.6);
}

.hl-window-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 18px;
  border-bottom: 1px solid #515149;
  background: #262422;
}

.hl-window-dots {
  display: flex;
  gap: 8px;
}

.hl-window-dots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #474341;
}

.hl-window-label {
  font-family: var(--hl-mono);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #89817c;
}

.hl-window-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 48px 32px 36px;
  text-align: center;
}

.hl-sprite {
  position: relative;
  width: 240px;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.hl-sprite img {
  position: absolute;
  top: 0;
  left: 0;
  width: 1100%;
  max-width: none;
  height: auto;
  pointer-events: none;
  animation-timing-function: step-end;
  animation-iteration-count: infinite;
  will-change: transform;
}

/* Loop lengths match the app: 33 thinking frames and 54 talking frames at 8fps */
.hl-sprite-thinking img {
  animation-name: hlMarkThinking;
  animation-duration: 4.125s;
}

.hl-sprite-talking img {
  animation-name: hlMarkTalking;
  animation-duration: 6.75s;
}

.hl-window-note {
  margin-top: auto;
  padding-top: 28px;
  max-width: 42ch;
  font-size: 15px;
  line-height: 1.55;
  color: var(--hl-ash);
}

.hl-greet {
  margin-top: 26px;
  max-width: 440px;
}

.hl-greet-name {
  font-family: var(--hl-display);
  font-size: 17px;
  line-height: 1.2;
  color: var(--hl-jade);
}

.hl-greet-line {
  margin-top: 4px;
  font-family: var(--hl-display);
  font-size: 27px;
  line-height: 1.22;
  color: #d9d4ca;
  /* the sizer and the live line share one cell, so the line is always as tall as the longest greeting */
  display: grid;
}

.hl-greet-sizer,
.hl-greet-live {
  grid-area: 1 / 1;
}

.hl-greet-sizer {
  visibility: hidden;
}

.hl-caret {
  display: inline-block;
  width: 2px;
  height: 0.9em;
  margin-left: 3px;
  vertical-align: -0.08em;
  background: var(--hl-jade);
  animation: hlCaret 1s steps(1, end) infinite;
}

@keyframes hlCaret {
  50% { opacity: 0; }
}

.hl-greet + .hl-window-note {
  padding-top: 18px;
}

/* The cast */
.hl-cast {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.hl-cast-card {
  --c: #47a08f;
  display: flex;
  flex-direction: column;
  padding: 18px 22px 26px;
  border: 1px solid var(--hl-line);
  border-radius: 14px;
  background: var(--hl-win);
  transition: border-color 0.3s ease, transform 0.3s ease;
}

.hl-cast-card:hover {
  border-color: var(--c);
  transform: translateY(-3px);
}

.hl-cast-card img {
  display: block;
  width: 78%;
  max-width: 200px;
  height: auto;
  margin: 0 auto 10px;
}

.hl-cast-name {
  font-family: var(--hl-display);
  font-size: 27px;
  line-height: 1.1;
  color: color-mix(in srgb, var(--c) 78%, #fff);
}

.hl-cast-role {
  margin-top: 6px;
  font-family: var(--hl-mono);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hl-ash);
}

.hl-cast-quote {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--hl-line);
  font-family: var(--hl-display);
  font-style: italic;
  font-size: 19px;
  line-height: 1.35;
  color: #d9d4ca;
}

.hl-c-holmes { --c: #47a08f; }
.hl-c-seward { --c: #8861b5; }
.hl-c-geppetto { --c: #bc9357; }
.hl-c-basil { --c: #6856e8; }
.hl-c-gradgrind { --c: #5c6b5e; }
.hl-c-cavor { --c: #6ca7b7; }
.hl-c-oz { --c: #63a800; }
.hl-c-cyrano { --c: #a36774; }

/* Interface */
.hl-spec .hl-card img {
  width: 100%;
}

.hl-screens {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px 32px;
}

.hl-screen img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 0 0 1px rgba(28, 27, 25, 0.12), 0 30px 60px -30px rgba(28, 27, 25, 0.55);
}

/* Website + promotion */
.hl-launch {
  display: grid;
  grid-template-columns: 1.871fr 1.107fr;
  gap: 28px;
  align-items: start;
}

.hl-launch img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 0 0 1px var(--hl-line), 0 30px 60px -30px rgba(0, 0, 0, 0.7);
}

.hl-signoff {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  margin-top: 96px;
  text-align: center;
}

.hl-signoff img {
  width: 54px;
  height: auto;
  pointer-events: none;
}

.hl-signoff p {
  font-family: var(--hl-display);
  font-style: italic;
  font-size: 26px;
  color: var(--hl-ash);
}

/* Responsive */
@media (max-width: 1100px) {
  .hl-cast {
    grid-template-columns: repeat(2, 1fr);
  }

  .hl-desc-inner {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .hl-disciplines {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 26px;
    border-top: 0;
  }

  .hl-disciplines li {
    padding: 0;
    border-bottom: 0;
  }
}

@media (max-width: 720px) {
  .hl-explore,
  .hl-system,
  .hl-type,
  .hl-motion,
  .hl-screens,
  .hl-launch {
    grid-template-columns: 1fr;
  }

  .hl-explore-wide {
    grid-column: auto;
  }

  .hl-explore-final .hl-card {
    aspect-ratio: 4 / 3;
  }

  .hl-palette {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 480px) {
  .hl-page {
    --hl-gutter: 20px;
  }

  .hl-desc {
    padding-bottom: 64px;
  }

  .hl-desc-inner {
    margin-top: 48px;
    gap: 28px;
  }

  .hl-desc-text {
    font-size: 20px;
  }

  .hl-section {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .hl-head {
    margin-bottom: 36px;
  }

  .hl-title {
    font-size: 36px;
  }

  .hl-lede {
    font-size: 16px;
  }

  .hl-subhead {
    margin: 52px 0 22px;
    font-size: 25px;
  }

  .hl-explore,
  .hl-system,
  .hl-type,
  .hl-motion {
    gap: 20px;
  }

  .hl-palette {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .hl-swatch {
    height: 88px;
  }

  .hl-specimen {
    padding: 24px 22px 26px;
  }

  .hl-specimen-glyphs {
    font-size: 96px;
  }

  .hl-specimen-mono .hl-specimen-glyphs {
    font-size: 76px;
  }

  .hl-window-body {
    padding: 32px 20px 28px;
  }

  .hl-sprite {
    width: 180px;
  }

  .hl-greet-line {
    font-size: 22px;
  }

  .hl-cast {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .hl-cast-card {
    display: grid;
    grid-template-columns: 92px 1fr;
    gap: 0 16px;
    align-items: start;
    padding: 16px 18px 18px 10px;
  }

  .hl-cast-card img {
    grid-row: span 3;
    width: 92px;
    margin: 0;
  }

  .hl-cast-name {
    font-size: 24px;
    margin-top: 6px;
  }

  .hl-cast-quote {
    margin-top: 10px;
    padding-top: 10px;
    font-size: 17px;
  }

  .hl-screens {
    gap: 28px;
  }

  .hl-signoff {
    margin-top: 64px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hl-sprite img,
  .hl-caret {
    animation: none;
  }

  .hl-cast-card,
  .hl-cast-card:hover {
    transition: none;
    transform: none;
  }
}

/* Sprite playback: one keyframe per drawn frame, held with step-end.
   Generated from the frame grid (11 columns). */
@keyframes hlMarkThinking {
  0% { transform: translate(0%, 0%); }
  3.0303% { transform: translate(-9.0909%, 0%); }
  6.0606% { transform: translate(-18.1818%, 0%); }
  9.0909% { transform: translate(-27.2727%, 0%); }
  12.1212% { transform: translate(-36.3636%, 0%); }
  15.1515% { transform: translate(-45.4545%, 0%); }
  18.1818% { transform: translate(-54.5455%, 0%); }
  21.2121% { transform: translate(-63.6364%, 0%); }
  24.2424% { transform: translate(-72.7273%, 0%); }
  27.2727% { transform: translate(-81.8182%, 0%); }
  30.3030% { transform: translate(-90.9091%, 0%); }
  33.3333% { transform: translate(0%, -33.3333%); }
  36.3636% { transform: translate(-9.0909%, -33.3333%); }
  39.3939% { transform: translate(-18.1818%, -33.3333%); }
  42.4242% { transform: translate(-27.2727%, -33.3333%); }
  45.4545% { transform: translate(-36.3636%, -33.3333%); }
  48.4848% { transform: translate(-45.4545%, -33.3333%); }
  51.5152% { transform: translate(-54.5455%, -33.3333%); }
  54.5455% { transform: translate(-63.6364%, -33.3333%); }
  57.5758% { transform: translate(-72.7273%, -33.3333%); }
  60.6061% { transform: translate(-81.8182%, -33.3333%); }
  63.6364% { transform: translate(-90.9091%, -33.3333%); }
  66.6667% { transform: translate(0%, -66.6667%); }
  69.6970% { transform: translate(-9.0909%, -66.6667%); }
  72.7273% { transform: translate(-18.1818%, -66.6667%); }
  75.7576% { transform: translate(-27.2727%, -66.6667%); }
  78.7879% { transform: translate(-36.3636%, -66.6667%); }
  81.8182% { transform: translate(-45.4545%, -66.6667%); }
  84.8485% { transform: translate(-54.5455%, -66.6667%); }
  87.8788% { transform: translate(-63.6364%, -66.6667%); }
  90.9091% { transform: translate(-72.7273%, -66.6667%); }
  93.9394% { transform: translate(-81.8182%, -66.6667%); }
  96.9697% { transform: translate(-90.9091%, -66.6667%); }
}

@keyframes hlMarkTalking {
  0% { transform: translate(0%, 0%); }
  1.8519% { transform: translate(-9.0909%, 0%); }
  3.7037% { transform: translate(-18.1818%, 0%); }
  5.5556% { transform: translate(-27.2727%, 0%); }
  7.4074% { transform: translate(-36.3636%, 0%); }
  9.2593% { transform: translate(-45.4545%, 0%); }
  11.1111% { transform: translate(-54.5455%, 0%); }
  12.9630% { transform: translate(-63.6364%, 0%); }
  14.8148% { transform: translate(-72.7273%, 0%); }
  16.6667% { transform: translate(-81.8182%, 0%); }
  18.5185% { transform: translate(-90.9091%, 0%); }
  20.3704% { transform: translate(0%, -20%); }
  22.2222% { transform: translate(-9.0909%, -20%); }
  24.0741% { transform: translate(-18.1818%, -20%); }
  25.9259% { transform: translate(-27.2727%, -20%); }
  27.7778% { transform: translate(-36.3636%, -20%); }
  29.6296% { transform: translate(-45.4545%, -20%); }
  31.4815% { transform: translate(-54.5455%, -20%); }
  33.3333% { transform: translate(-63.6364%, -20%); }
  35.1852% { transform: translate(-72.7273%, -20%); }
  37.0370% { transform: translate(-81.8182%, -20%); }
  38.8889% { transform: translate(-90.9091%, -20%); }
  40.7407% { transform: translate(0%, -40%); }
  42.5926% { transform: translate(-9.0909%, -40%); }
  44.4444% { transform: translate(-18.1818%, -40%); }
  46.2963% { transform: translate(-27.2727%, -40%); }
  48.1481% { transform: translate(-36.3636%, -40%); }
  50% { transform: translate(-45.4545%, -40%); }
  51.8519% { transform: translate(-54.5455%, -40%); }
  53.7037% { transform: translate(-63.6364%, -40%); }
  55.5556% { transform: translate(-72.7273%, -40%); }
  57.4074% { transform: translate(-81.8182%, -40%); }
  59.2593% { transform: translate(-90.9091%, -40%); }
  61.1111% { transform: translate(0%, -60%); }
  62.9630% { transform: translate(-9.0909%, -60%); }
  64.8148% { transform: translate(-18.1818%, -60%); }
  66.6667% { transform: translate(-27.2727%, -60%); }
  68.5185% { transform: translate(-36.3636%, -60%); }
  70.3704% { transform: translate(-45.4545%, -60%); }
  72.2222% { transform: translate(-54.5455%, -60%); }
  74.0741% { transform: translate(-63.6364%, -60%); }
  75.9259% { transform: translate(-72.7273%, -60%); }
  77.7778% { transform: translate(-81.8182%, -60%); }
  79.6296% { transform: translate(-90.9091%, -60%); }
  81.4815% { transform: translate(0%, -80%); }
  83.3333% { transform: translate(-9.0909%, -80%); }
  85.1852% { transform: translate(-18.1818%, -80%); }
  87.0370% { transform: translate(-27.2727%, -80%); }
  88.8889% { transform: translate(-36.3636%, -80%); }
  90.7407% { transform: translate(-45.4545%, -80%); }
  92.5926% { transform: translate(-54.5455%, -80%); }
  94.4444% { transform: translate(-63.6364%, -80%); }
  96.2963% { transform: translate(-72.7273%, -80%); }
  98.1481% { transform: translate(-81.8182%, -80%); }
}

/* ══════════════════════════════════════════
   Who Am I? page (projects/who-am-i.html)
   ══════════════════════════════════════════ */

/* ── Who Am I? page ── */

.wai-page {
  --wai-pink: #e82392;
  --wai-pink-deep: #d41f84;
  --wai-pink-dark: #831e5d;
  --wai-lime: #d0dc26;
  --wai-lime-dark: #52574e;
  --wai-yellow: #fdca46;
  --wai-yellow-dark: #86611b;
  --wai-gray: #e0e2e2;
  --wai-gray-mid: #b3b4b4;
  --wai-ink: #3c3c3c;
  --wai-outline: #58595b;
  max-width: none;
  padding: 0;
  flex: none;
  overflow-x: clip;
  background: #fff;
  color: var(--wai-ink);
}

.wai-inner {
  max-width: 1120px;
  margin: 0 auto;
}

@keyframes waiHeroDrift {
  from { transform: translate3d(-2%, 1.5%, 0) scale(1.02); }
  to { transform: translate3d(2%, -1.5%, 0) scale(1.06); }
}

@keyframes waiLogoIn {
  from { opacity: 0; transform: scale(0.82) rotate(-4deg); }
  to { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes waiLogoBob {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-10px) rotate(-1deg); }
}

/* Description */
.wai-desc {
  background: var(--wai-pink-deep);
  color: #fff;
  padding: 26px 40px 56px;
}

.wai-desc-text {
  max-width: 840px;
  margin: 0 auto;
  font-size: 18px;
  line-height: 1.7;
  font-weight: 400;
}

.wai-desc-text strong {
  font-family: "CurseCasual", "Futura", sans-serif;
  font-weight: 400;
  font-size: 1.2em;
  letter-spacing: 0.3px;
}

.wai-roles {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 14px;
  margin: 30px auto 0;
  max-width: 840px;
}

.wai-roles li {
  font-family: "CurseCasual", "Futura", sans-serif;
  font-size: 19px;
  line-height: 1;
  color: var(--wai-ink);
  background: var(--wai-lime);
  border: 3px solid var(--wai-lime-dark);
  border-radius: 10px;
  padding: 9px 16px 8px;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.22);
}

.wai-roles li:nth-child(even) {
  background: var(--wai-yellow);
  border-color: var(--wai-yellow-dark);
}

/* Sections */
.wai-section {
  padding: 72px 40px 88px;
}

.wai-title {
  position: relative;
  z-index: 0;
  text-align: center;
  font-family: "CurseCasual", "Futura", sans-serif;
  font-weight: 400;
  font-size: clamp(40px, 4.2vw, 62px);
  line-height: 1.1;
  letter-spacing: 0.5px;
  color: #fff;
  margin: 0 auto 28px;
}

.wai-title::before {
  content: attr(data-text);
  content: attr(data-text) / "";
  position: absolute;
  inset: 0;
  z-index: -1;
  color: var(--wai-outline);
  -webkit-text-stroke: 0.2em var(--wai-outline);
  text-shadow: 0 0.12em 0 rgba(0, 0, 0, 0.16);
  pointer-events: none;
}

.wai-subtitle {
  font-family: "CurseCasual", "Futura", sans-serif;
  font-weight: 400;
  font-size: 30px;
  line-height: 1.1;
  margin-bottom: 14px;
}

.wai-lede {
  font-size: 17px;
  line-height: 1.7;
}

.wai-lede-center {
  max-width: 780px;
  margin: 0 auto 48px;
  text-align: center;
}

.wai-sticker {
  display: block;
  float: right;
  width: 118px;
  height: auto;
  margin: -8px 0 14px 24px;
  transform: rotate(8deg);
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.15));
}

.wai-copy p {
  font-size: 17px;
  line-height: 1.75;
}

.wai-copy p + p {
  margin-top: 18px;
}

.wai-note {
  font-size: 13px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #6b6c6c;
  text-align: right;
  margin-top: 4px;
}

/* Origin & Concept */
.wai-origin {
  background: #fff;
}

.wai-origin-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 56px;
  align-items: center;
  margin-top: 16px;
}

.wai-pitch {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.wai-pitch-card {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 22px;
  align-items: center;
  background: var(--wai-gray);
  border-radius: 16px;
  padding: 22px 26px;
}

.wai-pitch-card:nth-child(2) {
  grid-template-columns: 1fr 150px;
  text-align: right;
}

.wai-pitch-card:nth-child(2) .wai-pitch-art {
  order: 2;
}

.wai-pitch-art {
  width: 100%;
  height: auto;
  display: block;
}

.wai-pitch-art-tap {
  border-radius: 8px;
}

.wai-pitch-title {
  font-family: "CurseCasual", "Futura", sans-serif;
  font-weight: 400;
  font-size: 32px;
  line-height: 1.1;
  color: #1f1f1f;
  margin-bottom: 6px;
}

.wai-pitch-card p {
  font-family: "CurseCasual", "Futura", sans-serif;
  font-size: 19px;
  line-height: 1.25;
  color: #5a5b5b;
}

/* 16 Personalities */
.wai-personalities {
  background: var(--wai-lime);
  border-top: 5px solid var(--wai-lime-dark);
}

.wai-personality-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
  margin-top: 12px;
}

.wai-picker {
  background: #fff;
  border: 4px solid var(--wai-lime-dark);
  border-radius: 22px;
  padding: 18px 20px 22px;
  box-shadow: 0 8px 0 rgba(0, 0, 0, 0.14);
}

.wai-picker-status {
  font-family: "CurseCasual", "Futura", sans-serif;
  font-size: 22px;
  text-align: center;
  color: var(--wai-ink);
  margin-bottom: 14px;
  min-height: 1.3em;
}

.wai-picker-two {
  font-size: 1.35em;
  color: var(--wai-pink);
}

.wai-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.wai-tile {
  position: relative;
  display: block;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 14%;
  cursor: pointer;
  transition: transform 0.18s ease, filter 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}

.wai-page .wai-tile img {
  display: block;
  width: 100%;
  height: auto;
  cursor: pointer;
  pointer-events: none;
}

.wai-tile:hover {
  transform: translateY(-4px) rotate(-2deg);
}

.wai-tile:nth-child(even):hover {
  transform: translateY(-4px) rotate(2deg);
}

.wai-tile:focus-visible {
  outline: 4px solid var(--wai-pink);
  outline-offset: 2px;
}

.wai-tile.wai-picked {
  transform: scale(1.06);
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.3));
  z-index: 1;
}

.wai-tile::after {
  content: "";
  position: absolute;
  top: -8px;
  right: -8px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--wai-pink);
  border: 3px solid #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  transform: scale(0);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.wai-tile::before {
  content: "";
  position: absolute;
  top: 1px;
  right: 2px;
  width: 7px;
  height: 12px;
  border: solid #fff;
  border-width: 0 3px 3px 0;
  z-index: 2;
  transform: rotate(45deg) scale(0);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.wai-tile.wai-picked::after {
  transform: scale(1);
}

.wai-tile.wai-picked::before {
  transform: rotate(45deg) scale(1);
}

.wai-personality-side .wai-lede {
  margin-bottom: 24px;
}

.wai-quote {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 18px;
  align-items: start;
  background: #fff;
  border-radius: 16px;
  padding: 16px 20px 18px 16px;
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.12);
}

.wai-quote + .wai-quote {
  margin-top: 14px;
}

.wai-quote-tile {
  width: 76px;
  height: 76px;
  display: block;
}

/* Decorative tile next to each quote is not zoomable (matches .wai-tile img) */
main[class] .wai-quote-tile {
  cursor: default;
  pointer-events: none;
}

.wai-quote-name {
  display: block;
  font-family: "CurseCasual", "Futura", sans-serif;
  font-size: 24px;
  line-height: 1.1;
  color: var(--wai-pink-deep);
  margin-bottom: 4px;
}

.wai-quote blockquote {
  font-size: 15px;
  line-height: 1.55;
  font-style: italic;
}

/* Label variants */
.wai-variants {
  margin-top: 72px;
  text-align: center;
}

.wai-variants .wai-subtitle {
  font-size: 34px;
}

.wai-variants-text {
  font-size: 17px;
  line-height: 1.6;
  max-width: 640px;
  margin: 0 auto 28px;
}

.wai-variant-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.wai-variant-pair {
  display: grid;
  grid-template-columns: 1fr 22px 1fr;
  gap: 8px;
  align-items: center;
  background: rgba(255, 255, 255, 0.45);
  border-radius: 16px;
  padding: 14px 12px;
}

.wai-variant-pair img {
  width: 100%;
  height: auto;
  display: block;
}

.wai-variant-pair img:first-child {
  opacity: 0.55;
  filter: saturate(0.6);
}

.wai-variant-arrow {
  justify-self: center;
  width: 0;
  height: 0;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-left: 13px solid var(--wai-ink);
}

/* Target Audience & Reach */
.wai-reach {
  background: var(--wai-gray);
  border-top: 5px solid var(--wai-gray-mid);
}

.wai-flow {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 48px;
  counter-reset: none;
}

.wai-flow-step {
  position: relative;
  text-align: center;
}

.wai-flow-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 44%;
  right: -34px;
  width: 20px;
  height: 20px;
  border: solid var(--wai-ink);
  border-width: 5px 5px 0 0;
  border-radius: 3px;
  transform: rotate(45deg);
}

.wai-badge {
  position: absolute;
  top: -18px;
  left: -14px;
  z-index: 2;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "CurseCasual", "Futura", sans-serif;
  font-size: 32px;
  line-height: 1;
  padding-top: 3px;
  color: #1f1f1f;
  border: 4px solid var(--wai-ink);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.2);
}

.wai-badge-pink {
  background: var(--wai-pink-deep);
  color: #fff;
  border-color: var(--wai-pink-dark);
}

.wai-badge-lime {
  background: var(--wai-lime);
  border-color: var(--wai-lime-dark);
}

.wai-badge-yellow {
  background: var(--wai-yellow);
  border-color: var(--wai-yellow-dark);
}

.wai-phone {
  position: relative;
  background: #1c1c1e;
  border-radius: 30px;
  padding: 22px 9px 16px;
  box-shadow: 0 18px 30px rgba(0, 0, 0, 0.22), inset 0 0 0 2px #3a3a3c;
}

.wai-phone::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 50%;
  width: 22%;
  height: 5px;
  border-radius: 3px;
  background: #3a3a3c;
  transform: translateX(-50%);
}

.wai-phone img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  aspect-ratio: 1440 / 2610;
  object-fit: cover;
}

.wai-flow-title {
  font-family: "CurseCasual", "Futura", sans-serif;
  font-weight: 400;
  font-size: 27px;
  line-height: 1.1;
  margin: 22px 0 6px;
}

.wai-flow-step p {
  font-size: 15px;
  line-height: 1.55;
  max-width: 230px;
  margin: 0 auto;
}

.wai-loop {
  position: relative;
  margin: 26px 12.5% 0;
  height: 54px;
  border: 5px dashed #9a9b9b;
  border-top: 0;
  border-radius: 0 0 44px 44px;
  text-align: center;
}

.wai-loop::before {
  content: "";
  position: absolute;
  top: -14px;
  left: -14px;
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-bottom: 18px solid #9a9b9b;
}

.wai-loop span {
  position: absolute;
  left: 50%;
  bottom: -20px;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: "CurseCasual", "Futura", sans-serif;
  font-size: 22px;
  line-height: 1;
  color: var(--wai-ink);
  background: var(--wai-yellow);
  border: 3px solid var(--wai-yellow-dark);
  border-radius: 10px;
  padding: 8px 16px 6px;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.18);
}

/* Logo Design */
.wai-logo {
  background: radial-gradient(ellipse at 50% 30%, #4a4a4a 0%, #333 60%, #2a2a2a 100%);
  color: #f2f2f2;
  border-top: 5px solid #222;
}

.wai-logo .wai-title::before {
  color: #1c1c1c;
  -webkit-text-stroke-color: #1c1c1c;
}

.wai-logo-compare {
  display: grid;
  grid-template-columns: 0.8fr 60px 1.2fr;
  gap: 20px;
  align-items: end;
  margin-bottom: 64px;
}

.wai-logo-card {
  text-align: center;
}

.wai-logo-card img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.35));
}

.wai-logo-card-early img {
  max-width: 400px;
}

.wai-logo-card figcaption {
  margin-top: 16px;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #bdbdbd;
}

.wai-logo-arrow {
  justify-self: center;
  align-self: center;
  width: 28px;
  height: 28px;
  border: solid var(--wai-lime);
  border-width: 6px 6px 0 0;
  border-radius: 3px;
  transform: rotate(45deg);
}

.wai-brand-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 32px;
}

.wai-palette,
.wai-type {
  background: rgba(255, 255, 255, 0.06);
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 26px 30px 30px;
}

.wai-swatches {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 8px;
}

.wai-swatches li {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.wai-swatch {
  width: 100%;
  max-width: 120px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: 10px solid;
  margin-bottom: 12px;
}

.wai-swatch-yellow {
  background: #fdca46;
  border-color: #7c5a1c;
}

.wai-swatch-lime {
  background: #d0dc26;
  border-color: #53574e;
}

.wai-swatch-pink {
  background: #e82392;
  border-color: #7f1f5c;
}

.wai-swatch-name {
  font-family: "CurseCasual", "Futura", sans-serif;
  font-size: 22px;
  line-height: 1.1;
}

.wai-swatch-hex {
  font-size: 13px;
  letter-spacing: 1px;
  color: #bdbdbd;
  margin-top: 2px;
}

.wai-type-name {
  font-family: "CurseCasual", "Futura", sans-serif;
  font-size: 50px;
  line-height: 1.05;
  color: var(--wai-lime);
}

.wai-type-sample {
  font-family: "CurseCasual", "Futura", sans-serif;
  font-size: 34px;
  line-height: 1.2;
  color: #fff;
  margin: 8px 0 14px;
  word-spacing: 4px;
}

.wai-type-note {
  font-size: 15px;
  line-height: 1.6;
  color: #cfcfcf;
}

/* Website Design */
.wai-web {
  background: #fff;
}

.wai-process {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin-bottom: 72px;
}

.wai-process li {
  counter-increment: waiStep;
  text-align: center;
}

.wai-process {
  counter-reset: waiStep;
}

.wai-process-img {
  position: relative;
  background: #fff;
  border: 3px solid var(--wai-gray);
  border-radius: 16px;
  padding: 10px;
  aspect-ratio: 3 / 4;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.wai-process li:hover .wai-process-img {
  transform: translateY(-4px);
  box-shadow: 0 12px 22px rgba(0, 0, 0, 0.1);
}

.wai-process-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.wai-process-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-family: "CurseCasual", "Futura", sans-serif;
  font-size: 21px;
  line-height: 1.1;
}

.wai-process-label::before {
  content: counter(waiStep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding-top: 2px;
  border-radius: 50%;
  background: var(--wai-pink-deep);
  color: #fff;
  font-size: 18px;
}

.wai-process li:nth-child(even) .wai-process-label::before {
  background: var(--wai-lime);
  color: var(--wai-ink);
}

.wai-devices {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.3fr);
  gap: 44px;
  align-items: end;
}

.wai-browser {
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  border: 3px solid var(--wai-ink);
  box-shadow: 0 20px 36px rgba(0, 0, 0, 0.16);
  position: relative;
}

.wai-browser-bar {
  display: flex;
  gap: 8px;
  align-items: center;
  height: 34px;
  padding: 0 14px;
  background: var(--wai-ink);
}

.wai-browser-bar span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--wai-yellow);
}

.wai-browser-bar span:nth-child(2) {
  background: var(--wai-lime);
}

.wai-browser-bar span:nth-child(3) {
  background: var(--wai-pink);
}

.wai-browser img {
  display: block;
  width: 100%;
  height: auto;
}

.wai-devices-desktop figcaption,
.wai-devices-phone figcaption {
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #6b6c6c;
  text-align: center;
}

.wai-devices-desktop figcaption,
.wai-devices-phone figcaption {
  margin-top: 16px;
}

/* Campaign Design */
.wai-campaign {
  background-color: var(--wai-yellow);
  background-image: repeating-linear-gradient(-24deg,
    rgba(255, 255, 255, 0.16) 0 70px,
    rgba(255, 255, 255, 0) 70px 190px);
  border-top: 5px solid var(--wai-yellow-dark);
}

.wai-stories {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 290px));
  justify-content: center;
  gap: 40px;
}

.wai-story-item {
  text-align: center;
}

.wai-story-item:nth-child(1) { transform: rotate(-3deg); }
.wai-story-item:nth-child(3) { transform: rotate(3deg); }

.wai-story {
  position: relative;
  aspect-ratio: 720 / 1350;
  border-radius: 24px;
  overflow: hidden;
  border: 6px solid #1f1f1f;
  background: #1f1f1f;
  box-shadow: 0 18px 30px rgba(94, 64, 0, 0.3);
}

.wai-story img,
.wai-story video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* The welcome loop is 9:16; letterbox it on its own pink so the frames match the 720x1350 story art */
.wai-story video {
  object-fit: contain;
  background: #e93491;
}

.wai-story-item figcaption,
.wai-social figcaption {
  margin-top: 16px;
  font-family: "CurseCasual", "Futura", sans-serif;
  font-size: 23px;
  line-height: 1.1;
  color: #1f1f1f;
}

.wai-social {
  display: grid;
  grid-template-columns: minmax(0, 520px) minmax(0, 190px);
  justify-content: center;
  align-items: center;
  gap: 48px;
  margin-top: 64px;
  text-align: center;
}

.wai-social img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  border: 5px solid #fff;
  box-shadow: 0 12px 24px rgba(94, 64, 0, 0.25);
}

.wai-social-icon img {
  border-radius: 28px;
}

/* Showcase */
.wai-showcase {
  line-height: 0;
  background: #f0b9cf;
  border-top: 5px solid var(--wai-yellow-dark);
}

.wai-showcase img {
  display: block;
  width: 100%;
  height: auto;
}

/* Responsive */
@media (max-width: 1280px) {
  .wai-flow {
    gap: 36px;
  }

  .wai-flow-step:not(:last-child)::after {
    right: -27px;
    width: 16px;
    height: 16px;
    border-width: 4px 4px 0 0;
  }
}

@media (max-width: 1024px) {
  .wai-origin-grid,
  .wai-personality-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .wai-picker {
    max-width: 620px;
    width: 100%;
    margin: 0 auto;
  }

  .wai-variant-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .wai-flow {
    grid-template-columns: repeat(2, minmax(0, 260px));
    justify-content: center;
    row-gap: 56px;
  }

  .wai-flow-step:not(:last-child)::after,
  .wai-loop {
    display: none;
  }

  .wai-brand-grid {
    grid-template-columns: 1fr;
  }

  .wai-process {
    grid-template-columns: repeat(2, minmax(0, 280px));
    justify-content: center;
  }
}

@media (max-width: 720px) {
  .wai-section {
    padding: 56px 28px 64px;
  }

  .wai-logo-compare {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .wai-logo-arrow {
    transform: rotate(135deg);
    width: 22px;
    height: 22px;
  }

  .wai-devices {
    grid-template-columns: 1fr;
    gap: 64px;
    justify-items: center;
  }

  .wai-devices-desktop {
    width: 100%; /* fill the column even before the lazy screenshot has loaded */
  }

  .wai-devices-phone {
    width: 55%;
  }

  .wai-stories {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }

  .wai-social {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .wai-social-icon {
    width: 50%;
    margin: 0 auto;
  }
}

@media (max-width: 480px) {
  .wai-sticker {
    width: 84px;
    margin: -4px 0 10px 16px;
  }

  .wai-desc {
    padding: 14px 20px 40px;
  }

  .wai-desc-text {
    font-size: 15px;
  }

  .wai-roles {
    gap: 8px;
    margin-top: 22px;
  }

  .wai-roles li {
    font-size: 16px;
    padding: 7px 11px 6px;
    border-width: 2px;
  }

  .wai-section {
    padding: 44px 20px 52px;
  }

  .wai-title {
    font-size: 34px;
    margin-bottom: 20px;
  }

  .wai-lede,
  .wai-copy p,
  .wai-variants-text {
    font-size: 15px;
  }

  .wai-lede-center {
    margin-bottom: 36px;
  }

  .wai-pitch-card,
  .wai-pitch-card:nth-child(2) {
    grid-template-columns: 88px 1fr;
    text-align: left;
    gap: 14px;
    padding: 16px;
  }

  .wai-pitch-card:nth-child(2) .wai-pitch-art {
    order: 0;
  }

  .wai-pitch-title {
    font-size: 25px;
  }

  .wai-pitch-card p {
    font-size: 16px;
  }

  .wai-note {
    text-align: left;
  }

  .wai-picker {
    padding: 14px 12px 16px;
    border-width: 3px;
  }

  .wai-picker-status {
    font-size: 19px;
  }

  .wai-tiles {
    gap: 6px;
  }

  .wai-tile::after {
    width: 24px;
    height: 24px;
    top: -6px;
    right: -6px;
    border-width: 2px;
  }

  .wai-tile::before {
    top: 0;
    right: 3px;
    width: 6px;
    height: 10px;
    border-width: 0 2px 2px 0;
  }

  .wai-quote {
    grid-template-columns: 56px 1fr;
    gap: 12px;
    padding: 14px;
  }

  .wai-quote-tile {
    width: 56px;
    height: 56px;
  }

  .wai-quote-name {
    font-size: 21px;
  }

  .wai-quote blockquote {
    font-size: 14px;
  }

  .wai-variants {
    margin-top: 52px;
  }

  .wai-variants .wai-subtitle {
    font-size: 28px;
  }

  .wai-variant-row {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .wai-variant-pair {
    grid-template-columns: 1fr 14px 1fr;
    gap: 4px;
    padding: 8px 6px;
  }

  .wai-variant-arrow {
    border-top-width: 6px;
    border-bottom-width: 6px;
    border-left-width: 9px;
  }

  .wai-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 18px;
  }

  .wai-badge {
    width: 40px;
    height: 40px;
    font-size: 24px;
    top: -12px;
    left: -8px;
    border-width: 3px;
  }

  .wai-phone {
    border-radius: 20px;
    padding: 14px 6px 10px;
  }

  .wai-phone::before {
    top: 6px;
    height: 3px;
  }

  .wai-flow-title {
    font-size: 21px;
    margin-top: 14px;
  }

  .wai-flow-step p {
    font-size: 13px;
  }

  .wai-logo-compare {
    margin-bottom: 40px;
  }

  .wai-palette,
  .wai-type {
    padding: 20px 18px 22px;
  }

  .wai-swatch {
    border-width: 6px;
  }

  .wai-swatch-name {
    font-size: 18px;
  }

  .wai-swatch-hex {
    font-size: 11px;
  }

  .wai-type-name {
    font-size: 40px;
  }

  .wai-type-sample {
    font-size: 27px;
  }

  .wai-process {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 48px;
  }

  .wai-process-img {
    border-radius: 12px;
    padding: 6px;
  }

  .wai-process-label {
    font-size: 16px;
    gap: 6px;
  }

  .wai-process-label::before {
    width: 22px;
    height: 22px;
    font-size: 14px;
  }

  .wai-devices-phone {
    width: 62%;
  }

  .wai-stories {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 16px;
    margin: 0 -20px;
    padding: 10px 20px 18px;
    justify-content: flex-start;
    scrollbar-width: none;
  }

  .wai-stories::-webkit-scrollbar {
    display: none;
  }

  .wai-story-item {
    flex: 0 0 64%;
    scroll-snap-align: center;
  }

  .wai-story-item:nth-child(1),
  .wai-story-item:nth-child(3) {
    transform: none;
  }

  .wai-story {
    border-width: 4px;
    border-radius: 18px;
  }

  .wai-story-item figcaption,
  .wai-social figcaption {
    font-size: 19px;
    margin-top: 10px;
  }

  .wai-social {
    margin-top: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {

  .wai-tile,
  .wai-process-img {
    transition: none;
  }
}

/* ══════════════════════════════════════════
   Brashier Gets Drawn 2020 page (projects/brashier-gets-drawn.html)
   ══════════════════════════════════════════ */

/* ── Brashier Gets Drawn 2020 page ── */

.bgd-page {
  --bgd-gold: #ffbc45;
  --bgd-gold-deep: #e9a22c;
  --bgd-ink: #171512;
  --bgd-paper: #f7f0e1;
  --bgd-paper-dark: #ecdfc3;
  --bgd-tan: #ddc094;
  --bgd-red: #ef5a4b;
  --bgd-yellow: #f7e059;
  --bgd-green: #498e5b;
  --bgd-green-dark: #2f5b3a;
  --bgd-blue: #6bb8d6;

  max-width: none;
  padding: 0;
  flex: none;
  overflow-x: clip;
  background: var(--bgd-paper);
  color: var(--bgd-ink);
}

@keyframes bgd-faces-in {
  from { opacity: 0; transform: translateY(-47%); }
  to { opacity: 0.9; transform: translateY(-50%); }
}

@keyframes bgd-logo-in {
  from { opacity: 0; transform: scale(0.92) rotate(-2deg); }
  to { opacity: 1; transform: none; }
}

/* Four paint colors from the logo palette */
.bgd-paint-stripe {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  height: 12px;
  background: var(--bgd-ink);
}

.bgd-paint-stripe span:nth-child(1) { background: var(--bgd-red); }
.bgd-paint-stripe span:nth-child(2) { background: var(--bgd-yellow); }
.bgd-paint-stripe span:nth-child(3) { background: var(--bgd-green); }
.bgd-paint-stripe span:nth-child(4) { background: var(--bgd-blue); }

/* Description */
.bgd-desc {
  background: var(--bgd-ink);
  padding: 44px 40px;
}

.bgd-desc-text {
  text-wrap: pretty;
  max-width: 800px;
  margin: 0 auto;
  font-size: 17px;
  line-height: 1.7;
  font-weight: 400;
  color: var(--bgd-paper);
  text-align: left;
}

/* Sections */
.bgd-section {
  padding: 72px 40px 84px;
}

.bgd-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.bgd-inner-wide {
  max-width: 1280px;
}

.bgd-section-paper {
  background: var(--bgd-paper);
}

.bgd-section-paper-dark {
  background: var(--bgd-paper-dark);
}

.bgd-section-green {
  background:
    radial-gradient(ellipse at 50% 35%, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0) 60%),
    var(--bgd-green-dark);
  color: var(--bgd-paper);
}

.bgd-section-gold {
  background: var(--bgd-gold);
}

.bgd-section-ink {
  background: var(--bgd-ink);
  color: var(--bgd-paper);
}

/* Titles: gold letters with an ink outline, like the "2020" in the logo */
.bgd-title {
  text-align: center;
  font-family: "Futura", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 900;
  font-size: clamp(38px, 4.2vw, 60px);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--bgd-gold);
  -webkit-text-stroke: 7px var(--bgd-ink);
  paint-order: stroke fill;
  text-shadow: 0 6px 0 var(--bgd-ink);
  margin-bottom: 22px;
}

.bgd-section-green .bgd-title,
.bgd-section-ink .bgd-title {
  text-shadow: 0 6px 0 rgba(0, 0, 0, 0.55);
}

.bgd-title-light {
  color: #fff;
}

.bgd-lede {
  text-wrap: balance;
  max-width: 760px;
  margin: 0 auto 44px;
  font-size: 17px;
  line-height: 1.65;
  text-align: center;
  color: inherit;
  opacity: 0.92;
}

.bgd-lede-dark {
  color: #3a332a;
  opacity: 1;
}

.bgd-section-gold .bgd-lede-dark {
  color: var(--bgd-ink);
}

.bgd-body {
  text-wrap: pretty;
  max-width: 720px;
  margin: 0 auto 36px;
  font-size: 16px;
  line-height: 1.65;
  text-align: center;
  color: #3a332a;
}

.bgd-subsection {
  margin-top: 56px;
  text-align: center;
}

.bgd-subsection:first-of-type {
  margin-top: 36px;
}

/* Nameplate labels, borrowed from the gallery frames */
.bgd-plaque {
  display: inline-block;
  margin: 0 0 24px;
  padding: 7px 20px 6px;
  font-family: "Futura", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 800;
  font-size: 19px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--bgd-ink);
  background: #fff;
  border: 3px solid var(--bgd-ink);
  border-radius: 3px;
  box-shadow: 0 0 0 6px var(--bgd-gold), 0 0 0 9px var(--bgd-ink);
}

.bgd-plaque-sm {
  font-size: 14px;
  padding: 5px 14px 4px;
  margin: 18px 0 0;
  border-width: 2.5px;
  box-shadow: 0 0 0 4px var(--bgd-gold), 0 0 0 6.5px var(--bgd-ink);
}

.bgd-section-gold .bgd-plaque-sm {
  box-shadow: 0 0 0 4px #fff, 0 0 0 6.5px var(--bgd-ink);
}

/* Gold picture frame */
.bgd-frame {
  margin: 0;
  padding: clamp(10px, 1.6vw, 22px);
  background: var(--bgd-gold);
  border: 4px solid var(--bgd-ink);
  border-radius: 6px;
  box-shadow:
    inset 0 0 0 3px #ffd27a,
    0 24px 50px rgba(0, 0, 0, 0.35);
}

.bgd-frame img {
  display: block;
  width: 100%;
  height: auto;
  border: 4px solid var(--bgd-ink);
  background: #fff;
  cursor: zoom-in;
}

/* White card for artwork on paper sections */
.bgd-card {
  margin: 0;
  background: #fff;
  border: 3px solid var(--bgd-ink);
  border-radius: 10px;
  padding: clamp(12px, 2vw, 28px);
  box-shadow: 8px 8px 0 var(--bgd-ink);
}

.bgd-card img {
  display: block;
  width: 100%;
  height: auto;
  cursor: zoom-in;
}

/* Pencil sketch wall */
.bgd-sketchwall {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px 32px;
  padding: 10px 8px 0;
}

.bgd-sketch {
  position: relative;
  margin: 0;
  padding: 10px 10px 26px;
  background: #fff;
  box-shadow: 0 10px 22px rgba(58, 45, 25, 0.18), 0 1px 2px rgba(58, 45, 25, 0.2);
  transform: rotate(var(--bgd-tilt, 0deg));
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.bgd-sketch::before {
  content: '';
  position: absolute;
  top: -12px;
  left: 50%;
  width: 84px;
  height: 26px;
  transform: translateX(-50%) rotate(calc(var(--bgd-tilt, 0deg) * -1.5));
  background: rgba(221, 192, 148, 0.72);
  box-shadow: 0 1px 2px rgba(58, 45, 25, 0.15);
  z-index: 1;
}

.bgd-sketch:hover {
  transform: rotate(0deg) translateY(-4px);
  box-shadow: 0 16px 30px rgba(58, 45, 25, 0.24), 0 1px 2px rgba(58, 45, 25, 0.2);
}

.bgd-sketch img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  cursor: zoom-in;
}

.bgd-sketch:nth-child(1) { --bgd-tilt: -3deg; }
.bgd-sketch:nth-child(2) { --bgd-tilt: 2deg; }
.bgd-sketch:nth-child(3) { --bgd-tilt: -1.5deg; }
.bgd-sketch:nth-child(4) { --bgd-tilt: 3deg; }
.bgd-sketch:nth-child(5) { --bgd-tilt: 2.5deg; }
.bgd-sketch:nth-child(6) { --bgd-tilt: -2deg; }
.bgd-sketch:nth-child(7) { --bgd-tilt: 1.5deg; }
.bgd-sketch:nth-child(8) { --bgd-tilt: -3deg; }

/* Sketch to line art comparisons */
.bgd-compare-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 32px 28px;
}

.bgd-compare {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  margin: 0;
  background: #fff;
  border: 3px solid var(--bgd-ink);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 6px 6px 0 var(--bgd-ink);
}

.bgd-compare-feature {
  grid-column: span 3;
}

.bgd-compare img {
  display: block;
  flex: 1;
  width: 100%;
  height: auto;
  object-fit: contain;
  cursor: zoom-in;
}

.bgd-compare-cap {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 10px 16px;
  border-top: 3px solid var(--bgd-ink);
  background: var(--bgd-gold);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--bgd-ink);
}

.bgd-compare-cap span:first-child {
  text-align: center;
}

.bgd-compare-cap span:last-child {
  text-align: center;
}

.bgd-compare-arrow {
  width: 34px;
  height: 12px;
  position: relative;
}

.bgd-compare-arrow::before {
  content: '';
  position: absolute;
  left: 0;
  right: 6px;
  top: 50%;
  height: 3px;
  margin-top: -1.5px;
  background: var(--bgd-ink);
  border-radius: 2px;
}

.bgd-compare-arrow::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  width: 0;
  height: 0;
  margin-top: -6px;
  border-left: 9px solid var(--bgd-ink);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}

/* Color */
.bgd-color {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: 56px;
  align-items: center;
  text-align: left;
}

.bgd-color-palette {
  background: #fff;
  border: 3px solid var(--bgd-ink);
  border-radius: 10px;
  padding: 24px;
  box-shadow: 6px 6px 0 var(--bgd-ink);
}

.bgd-color-palette img {
  display: block;
  width: 100%;
  height: auto;
  cursor: zoom-in;
}

.bgd-color-text .bgd-body {
  text-align: left;
  margin: 0 0 28px;
}

.bgd-swatches {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 18px 22px;
}

.bgd-swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.bgd-swatch-dot {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--bgd-sw);
  border: 3px solid var(--bgd-ink);
  box-shadow: 0 0 0 5px var(--bgd-paper), 0 0 0 8px var(--bgd-ink);
}

.bgd-swatch-hex {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  color: #5a4f40;
}

/* The Tiger */
.bgd-thumbs {
  margin: 0 auto 52px;
  max-width: 860px;
  text-align: center;
}

.bgd-thumbs img {
  display: block;
  width: 100%;
  height: auto;
  cursor: zoom-in;
}

.bgd-steps {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1.2fr;
  align-items: end;
  gap: 18px;
}

.bgd-step {
  margin: 0;
  text-align: center;
}

.bgd-step-art {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bgd-step-art img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 12px 16px rgba(92, 56, 0, 0.22));
  cursor: zoom-in;
  transition: transform 0.25s ease;
}

.bgd-step-art img:hover {
  transform: scale(1.03) rotate(-1deg);
}

.bgd-step-arrow {
  position: relative;
  align-self: center;
  width: 40px;
  height: 20px;
  margin-bottom: 28px;
}

.bgd-step-arrow::before {
  content: '';
  position: absolute;
  left: 0;
  right: 10px;
  top: 50%;
  height: 5px;
  margin-top: -2.5px;
  background: var(--bgd-ink);
  border-radius: 3px;
}

.bgd-step-arrow::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  margin-top: -10px;
  border-left: 15px solid var(--bgd-ink);
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

/* Website */
.bgd-browser {
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  border: 3px solid var(--bgd-gold);
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.5);
}

.bgd-browser-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: #2a2723;
  border-bottom: 3px solid var(--bgd-gold);
}

.bgd-browser-dot {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--bgd-red);
}

.bgd-browser-dot:nth-child(2) { background: var(--bgd-yellow); }
.bgd-browser-dot:nth-child(3) { background: var(--bgd-green); }

.bgd-browser-address {
  flex: 1;
  max-width: 420px;
  height: 22px;
  margin-left: 14px;
  border-radius: 11px;
  background: #403c36;
}

.bgd-browser img {
  display: block;
  width: 100%;
  height: auto;
  cursor: zoom-in;
}

/* Where It Started */
.bgd-posts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 44px;
}

.bgd-post {
  margin: 0;
  background: #fff;
  border: 3px solid var(--bgd-ink);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 6px 6px 0 var(--bgd-ink);
  transition: transform 0.25s ease;
}

.bgd-post:hover {
  transform: translateY(-4px);
}

.bgd-post img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  cursor: zoom-in;
}

/* Responsive */
@media (max-width: 1280px) {
}

@media (max-width: 1024px) {

  .bgd-compare-cap {
    padding: 9px 10px;
    font-size: 11px;
    letter-spacing: 1px;
    white-space: nowrap;
  }

  .bgd-compare-arrow {
    width: 24px;
    margin: 0 6px;
  }

  .bgd-swatches {
    gap: 16px 20px;
  }

  .bgd-swatch-dot {
    width: 54px;
    height: 54px;
    border-width: 2.5px;
    box-shadow: 0 0 0 4px var(--bgd-paper), 0 0 0 6.5px var(--bgd-ink);
  }

  .bgd-sketchwall {
    gap: 32px 20px;
  }
}

@media (max-width: 720px) {

  .bgd-section {
    padding: 56px 28px 64px;
  }

  .bgd-sketchwall {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 24px;
  }

  .bgd-compare-grid {
    grid-template-columns: 1fr;
  }

  .bgd-compare,
  .bgd-compare-feature {
    grid-column: auto;
  }

  .bgd-color {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .bgd-steps {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .bgd-step-art {
    max-width: 380px;
    margin: 0 auto;
  }

  .bgd-step-arrow {
    width: 36px;
    height: 20px;
    margin: 18px auto 10px;
    transform: rotate(90deg);
  }
}

@media (max-width: 480px) {

  .bgd-paint-stripe {
    height: 8px;
  }

  .bgd-desc {
    padding: 32px 24px;
  }

  .bgd-desc-text {
    font-size: 15px;
  }

  .bgd-section {
    padding: 44px 20px 52px;
  }

  .bgd-title {
    font-size: 34px;
    -webkit-text-stroke-width: 6px;
    text-shadow: 0 4px 0 var(--bgd-ink);
    margin-bottom: 16px;
  }

  .bgd-lede,
  .bgd-body {
    font-size: 15px;
    margin-bottom: 28px;
  }

  .bgd-subsection {
    margin-top: 44px;
  }

  .bgd-plaque {
    font-size: 15px;
    padding: 6px 14px 5px;
    margin-bottom: 20px;
  }

  .bgd-sketchwall {
    gap: 24px 16px;
    padding: 8px 4px 0;
  }

  .bgd-sketch {
    padding: 6px 6px 14px;
  }

  .bgd-sketch::before {
    width: 54px;
    height: 18px;
    top: -9px;
  }

  .bgd-compare-cap {
    font-size: 11px;
    letter-spacing: 1.5px;
    padding: 8px 10px;
  }

  .bgd-color-palette {
    padding: 14px;
  }

  .bgd-swatches {
    gap: 14px;
    justify-content: space-between;
  }

  .bgd-swatch-dot {
    width: 46px;
    height: 46px;
    border-width: 2.5px;
    box-shadow: 0 0 0 4px var(--bgd-paper), 0 0 0 6.5px var(--bgd-ink);
  }

  .bgd-swatch-hex {
    font-size: 10px;
    letter-spacing: 0.5px;
  }

  .bgd-thumbs {
    margin-bottom: 32px;
  }

  .bgd-card,
  .bgd-compare,
  .bgd-color-palette,
  .bgd-post {
    box-shadow: 4px 4px 0 var(--bgd-ink);
  }

  .bgd-browser-bar {
    padding: 8px 10px;
    gap: 6px;
  }

  .bgd-browser-dot {
    width: 9px;
    height: 9px;
  }

  .bgd-browser-address {
    height: 14px;
    margin-left: 8px;
  }

  .bgd-posts {
    grid-template-columns: 1fr;
    gap: 24px;
    max-width: 280px;
    margin: 32px auto 0;
  }
}

@media (prefers-reduced-motion: reduce) {

  .bgd-sketch,
  .bgd-post,
  .bgd-step-art img {
    transition: none;
  }
}

/* ══════════════════════════════════════════
   The Ottaray page (projects/ottaray.html)
   ══════════════════════════════════════════ */

/* ── The Ottaray page ── */

@font-face {
  font-family: "OttarayPhosphateInline";
  src: url("/shared/fonts/OttarayPhosphateInline.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

.ott-page {
  --ott-navy: #201e53;
  --ott-navy-ink: #1f1d52;
  --ott-deep: #15152f;
  --ott-cream: #fff7e0;
  --ott-paper: #f6f1e4;
  --ott-oyster: #435185;
  --ott-gold: #b29771;
  --ott-taupe: #989181;
  max-width: none;
  padding: 0;
  flex: none;
  overflow-x: clip;
  background: var(--ott-cream);
  color: var(--ott-navy-ink);
  font-family: "Times New Roman", Times, Georgia, serif;
}

@keyframes ott-rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

/* Waves */
.ott-wave {
  position: absolute;
  left: 0;
  width: 100%;
  height: 44px;
  display: block;
  pointer-events: none;
}

.ott-wave-top {
  top: -43px;
}

.ott-wave-cream path { fill: var(--ott-cream); }
.ott-wave-navy path { fill: var(--ott-navy); }
.ott-wave-deep path { fill: var(--ott-deep); }

/* Description */
.ott-desc {
  background: var(--ott-cream);
  padding: 44px 40px 20px;
}

.ott-desc-text {
  max-width: 780px;
  margin: 0 auto;
  font-size: 21px;
  line-height: 1.6;
  font-style: italic;
  color: var(--ott-navy-ink);
  text-align: left;
}

/* Sections */
.ott-section {
  position: relative;
  padding: 64px 40px 72px;
}

.ott-section-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.ott-section-inner-wide {
  max-width: 1280px;
}

.ott-section-cream {
  background: var(--ott-cream);
  color: var(--ott-navy-ink);
}

.ott-section-paper {
  background: var(--ott-paper);
  color: var(--ott-navy-ink);
}

.ott-section-navy {
  background: var(--ott-navy);
  color: var(--ott-cream);
}

.ott-section-taupe {
  background: var(--ott-taupe);
  color: var(--ott-navy-ink);
}

.ott-section-deep {
  background: var(--ott-deep);
  color: var(--ott-cream);
}

.ott-identity {
  padding-top: 36px;
  padding-bottom: 104px;
}

.ott-title {
  text-align: center;
  font-family: "Times New Roman", Times, Georgia, serif;
  font-weight: 400;
  font-size: 40px;
  line-height: 1.1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin: 0 0 14px 0.2em;
}

.ott-subtitle {
  text-align: center;
  font-family: "OttarayPhosphateInline", "Arial Black", Impact, sans-serif;
  font-weight: 400;
  font-size: 30px;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 72px 0 32px;
}

.ott-subtitle-left {
  text-align: left;
  margin: 0 0 18px;
}

/* Ornamental rule, after the menus' scrolled dividers */
.ott-rule {
  display: flex;
  align-items: center;
  max-width: 560px;
  height: 29px;
  margin: 0 auto 34px;
}

.ott-rule-end {
  width: 23px;
  height: 29px;
  flex: none;
  overflow: visible;
}

.ott-rule-end circle {
  fill: var(--ott-navy-ink);
}

.ott-rule-end path {
  fill: none;
  stroke: var(--ott-gold);
  stroke-width: 2px;
  vector-effect: non-scaling-stroke;
}

.ott-rule-end-right {
  transform: scaleX(-1);
}

.ott-rule-line {
  flex: 1;
  height: 2px;
  background: var(--ott-gold);
}

.ott-section-navy .ott-rule-end circle,
.ott-section-deep .ott-rule-end circle {
  fill: var(--ott-cream);
}

.ott-section-taupe .ott-rule-end path {
  stroke: var(--ott-navy-ink);
}

.ott-section-taupe .ott-rule-line {
  background: var(--ott-navy-ink);
}

.ott-body {
  font-size: 18px;
  line-height: 1.6;
  font-style: italic;
}

.ott-intro {
  max-width: 760px;
  margin: 0 auto 44px;
  text-align: center;
}

.ott-caption,
.ott-page figcaption {
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
  margin-top: 14px;
}

.ott-page figure {
  margin: 0;
}

.ott-comp img {
  aspect-ratio: 16 / 11;
  object-fit: cover;
  object-position: 50% 28%;
}

.ott-menu-page img,
.ott-bar-panel img,
.ott-card img,
.ott-comp img,
.ott-compare-pair img {
  display: block;
  width: 100%;
  height: auto;
}

/* Identity */
.ott-id-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 64px;
  align-items: center;
  margin-top: 12px;
}

.ott-id-logo img {
  display: block;
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
}

.ott-id-notes .ott-body {
  margin-bottom: 28px;
}

.ott-id-parts {
  display: grid;
  grid-template-columns: 0.62fr 1.38fr;
  gap: 18px;
}

.ott-id-part figcaption {
  text-transform: none;
  letter-spacing: 0;
  font-style: italic;
  font-size: 14px;
  text-align: left;
  margin-top: 10px;
}

.ott-id-part-art {
  height: 124px;
  border: 1.5px solid rgba(31, 29, 82, 0.28);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}

.ott-id-part-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ott-palette {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 28px;
}

.ott-palette li {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ott-swatch {
  display: block;
  height: 46px;
  border-radius: 4px;
  margin-bottom: 6px;
}

.ott-swatch-light {
  box-shadow: inset 0 0 0 1.5px rgba(31, 29, 82, 0.28);
}

.ott-swatch-name {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.ott-swatch-hex {
  font-size: 13px;
  font-style: italic;
  opacity: 0.75;
}

.ott-apparel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 64px;
}

.ott-apparel-tile {
  border-radius: 4px;
  padding: 44px 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ott-apparel-tile img {
  display: block;
  width: 100%;
  max-width: 300px;
  height: auto;
}

.ott-apparel-light {
  background: #fff;
  box-shadow: inset 0 0 0 1.5px rgba(31, 29, 82, 0.12);
}

.ott-apparel-dark {
  background: #111;
}

/* Transparent navy/black logo art would all but vanish on the lightbox's
   black overlay, so these images don't open it */
.ott-id-logo img,
.ott-id-part-art img,
.ott-apparel-tile img {
  pointer-events: none;
  user-select: none;
}

.ott-apparel-caption {
  grid-column: 1 / -1;
  margin-top: -6px;
}

/* Food menus */
.ott-menus {
  padding-top: 72px;
}

.ott-comp {
  max-width: 1000px;
  margin: 0 auto;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

.ott-menu-pages {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 56px;
}

.ott-menu-page img {
  border-radius: 2px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
}

.ott-menu-page figcaption {
  color: rgba(255, 247, 224, 0.8);
}

/* Bar menus */
.ott-bar-panels {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
  align-items: start;
}

.ott-bar-panel img {
  border-radius: 2px;
  box-shadow: 0 10px 26px rgba(31, 29, 82, 0.18), 0 0 0 1px rgba(31, 29, 82, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ott-bar-panel:hover img {
  transform: translateY(-6px);
  box-shadow: 0 18px 34px rgba(31, 29, 82, 0.24), 0 0 0 1px rgba(31, 29, 82, 0.06);
}

.ott-bar-panel figcaption {
  font-size: 11px;
  letter-spacing: 0.14em;
}

.ott-compare {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 48px;
  max-width: 900px;
  margin: 0 auto;
  align-items: start;
}

.ott-compare-divider {
  width: 2px;
  align-self: stretch;
  background: var(--ott-gold);
}

.ott-compare-label {
  font-family: "OttarayPhosphateInline", "Arial Black", Impact, sans-serif;
  font-size: 22px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 18px;
}

.ott-compare-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: start;
}

.ott-compare-before img {
  border-radius: 4px;
  aspect-ratio: 306 / 792;
  object-fit: cover;
  object-position: center;
  background: #111;
}

.ott-compare-after img {
  border-radius: 2px;
  box-shadow: 0 10px 26px rgba(31, 29, 82, 0.18), 0 0 0 1px rgba(31, 29, 82, 0.06);
}

/* Cards */
.ott-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.ott-card img {
  border-radius: 5px;
  box-shadow: 0 16px 36px rgba(21, 21, 47, 0.35);
}

/* Website */
.ott-web {
  padding-bottom: 96px;
}

.ott-web-row {
  display: grid;
  grid-template-columns: 1.75fr 1fr;
  gap: 48px;
  align-items: center;
}

.ott-web-row-history {
  grid-template-columns: 0.9fr 1.45fr 0.42fr;
  gap: 36px;
  margin-top: 88px;
}

.ott-browser {
  border-radius: 8px;
  overflow: hidden;
  background: #2b2a5e;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
}

.ott-browser-bar {
  display: flex;
  gap: 7px;
  align-items: center;
  height: 30px;
  padding: 0 14px;
}

.ott-browser-bar span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 247, 224, 0.35);
}

.ott-browser-screen {
  aspect-ratio: 1440 / 900;
  overflow: hidden;
  background: #fff;
}

.ott-browser-screen img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0%;
}

.ott-browser-scroll img {
  transition: object-position 9s cubic-bezier(0.45, 0, 0.55, 1);
}

.ott-browser-scroll:hover img {
  object-position: 50% 100%;
  transition-duration: 9s;
}

.ott-phones {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.ott-phone-screen {
  border-radius: 22px;
  border: 7px solid #2b2a5e;
  overflow: hidden;
  aspect-ratio: 390 / 844;
  background: #fff;
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.45);
}

.ott-phone-screen img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.ott-phone figcaption,
.ott-web-figure figcaption {
  color: rgba(255, 247, 224, 0.75);
}

.ott-web-figure figcaption {
  margin-top: 18px;
}

.ott-web-note .ott-body {
  color: rgba(255, 247, 224, 0.9);
  margin-bottom: 30px;
}

/* Button, after the website's inline-framed buttons */
.ott-btn {
  position: relative;
  display: inline-block;
  font-family: "OttarayPhosphateInline", "Arial Black", Impact, sans-serif;
  font-size: 24px;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ott-cream);
  background: transparent;
  border: 2px solid var(--ott-cream);
  box-shadow: inset 0 0 0 3px var(--ott-deep), inset 0 0 0 5px var(--ott-cream);
  padding: 13px 22px 11px;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.ott-btn span {
  position: relative;
  display: inline-block;
  padding-bottom: 5px;
}

.ott-btn span::after {
  content: "";
  position: absolute;
  left: -3px;
  right: -3px;
  bottom: 0;
  height: 2px;
  background: currentColor;
}

.ott-btn:hover,
.ott-btn:focus-visible {
  background: var(--ott-cream);
  color: var(--ott-deep);
  box-shadow: inset 0 0 0 3px var(--ott-cream), inset 0 0 0 5px var(--ott-deep);
}

.ott-btn:focus-visible {
  outline: 2px solid var(--ott-cream);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .ott-browser-scroll img,
  .ott-bar-panel img { transition: none; }
}

/* Responsive */
@media (max-width: 1280px) {
  .ott-web-row-history {
    grid-template-columns: 1fr 1.5fr;
  }

  .ott-phone-history {
    display: none;
  }
}

@media (max-width: 1024px) {
  .ott-bar-panels {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 36px;
    max-width: 700px;
    margin: 0 auto;
  }

  .ott-id-grid {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  .ott-id-logo img {
    max-width: 420px;
  }

  .ott-web-row,
  .ott-web-row-history {
    grid-template-columns: 1fr;
  }

  .ott-phones {
    max-width: 440px;
    margin: 0 auto;
    width: 100%;
  }
}

@media (max-width: 720px) {
  .ott-section {
    padding: 48px 28px 56px;
  }

  .ott-title {
    font-size: 30px;
  }

  .ott-menu-pages,
  .ott-card-grid {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
  }

  .ott-compare {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .ott-compare-divider {
    width: 100%;
    height: 2px;
  }

  .ott-apparel {
    gap: 16px;
  }

  .ott-apparel-tile {
    padding: 28px 20px;
  }
}

@media (max-width: 480px) {

  .ott-wave {
    height: 22px;
  }

  .ott-wave-top {
    top: -21px;
  }

  .ott-desc {
    padding: 26px 22px 8px;
  }

  .ott-desc-text {
    font-size: 16px;
  }

  .ott-section {
    padding: 36px 20px 44px;
  }

  .ott-identity {
    padding-top: 28px;
    padding-bottom: 56px;
  }

  .ott-title {
    font-size: 22px;
    letter-spacing: 0.16em;
    margin-left: 0.16em;
  }

  .ott-subtitle {
    font-size: 22px;
    margin: 44px 0 20px;
  }

  .ott-subtitle-left {
    margin-top: 0;
  }

  .ott-rule {
    max-width: 240px;
    height: 18px;
    margin-bottom: 22px;
  }

  .ott-rule-end {
    width: 14px;
    height: 18px;
  }

  .ott-body {
    font-size: 15px;
  }

  .ott-intro {
    margin-bottom: 28px;
  }

  .ott-page figcaption,
  .ott-caption {
    font-size: 11px;
  }

  .ott-id-parts {
    grid-template-columns: 1fr;
  }

  .ott-id-part-art {
    height: 96px;
  }

  .ott-palette {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 16px;
  }

  .ott-apparel {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 40px;
  }

  .ott-apparel-tile {
    padding: 28px;
  }

  .ott-menu-pages {
    gap: 24px;
    margin-top: 32px;
  }

  .ott-bar-panels {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    row-gap: 24px;
  }

  .ott-bar-panel figcaption {
    font-size: 10px;
    letter-spacing: 0.1em;
  }

  .ott-card-grid {
    gap: 22px;
  }

  .ott-web {
    padding-bottom: 56px;
  }

  .ott-web-row {
    gap: 28px;
  }

  .ott-web-row-history {
    margin-top: 44px;
  }

  .ott-phones {
    gap: 14px;
  }

  .ott-phone-screen {
    border-width: 5px;
    border-radius: 16px;
  }

  .ott-btn {
    font-size: 19px;
    padding: 11px 16px 9px;
  }
}

/* ══════════════════════════════════════════
   Project slide: the top of every project page, also shown in the homepage stage.
   Markup contract: see CLAUDE.md. Must render correctly without page scripts.
   ══════════════════════════════════════════ */

.project-slide {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #000;
}

.project-slide-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.project-slide-media > img,
.project-slide-media > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.project-slide-tint {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.3);
}

/* A slide video marked data-slide-video-reveal sits under the slide's art and takes over from it:
   transitions.js holds the video for that long, then plays it and adds this once it is really
   playing, and the art lifts off */
.project-slide.slide-video-revealed .project-slide-media > img {
  opacity: 0;
  transition: opacity 0.6s ease;
}

.project-slide-logo {
  position: relative;
  width: auto;
  height: auto;
  max-width: min(30%, 440px);
  max-height: 30%;
  object-fit: contain;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.25));
}

@media (max-width: 480px) {
  .project-slide-logo {
    max-width: 72%;
    max-height: 40%;
  }
}

/* A slide whose logo animation has an intro (data-slide-intro) must not show its finished logo
   before the intro draws it. Its static logo is hidden from the first paint, when scripting is
   on and motion allowed. transitions.js puts it back (.slide-logo-shown) if the animation
   gives up, never starts, or isn't ready within SLIDE_LOGO_WAIT_MS. Without JS, under
   reduced motion, or in a browser without the `scripting` query, the static logo shows as it
   always did. The animation's own "swapped" rule keeps hiding it once it has taken over. */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .project-slide[data-slide-intro]:not(.slide-logo-shown) > .project-slide-logo {
    opacity: 0;
  }

  /* Safety net for a project page whose script never takes its slide on (transitions.js failed
     to load or threw): the logo comes back by itself. The framework cancels this as soon as it
     has the slide (.slide-logo-managed). Only a page's own slide: the homepage stage is driven
     by the script, and puts its slides in place long before it shows them. */
  main:not(.home-page) > .project-slide[data-slide-intro]:not(.slide-logo-shown):not(.slide-logo-managed) > .project-slide-logo {
    animation: slide-logo-fallback 0.4s ease 4s forwards;
  }
}

@keyframes slide-logo-fallback {
  to { opacity: 1; }
}

/* Slide art is never interactive (no lightbox, zoom cursor or image drag) */
.project-slide img {
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* Project pages start with their slide and have no site header. The :has rule hides it from
   the first paint (wipe copies of <main> are ignored); transitions.js keeps body.is-headerless in sync. */
body:has(> main:not(.transition-clone) > .project-slide:first-child) .site-header,
body.is-headerless .site-header {
  display: none;
}

/* Homepage ENTER: the header stays in the page while the slide grows into place and it scrolls away */
body.keep-header .site-header,
body.keep-header:has(> main:not(.transition-clone) > .project-slide:first-child) .site-header {
  display: flex;
}

/* ── Per-page slide adjustments (must stay after the global Project slide section) ── */

/* Legends of Palimpagos slide + top of page */
/* ── Legends of Palimpagos: project slide (staging, merge into the LOP section of shared/styles.css) ── */

/* The painting's sky while it loads (and under the homepage crossfade) */
.project-slide.lop-slide {
  background: linear-gradient(#1381c0, #3da1dd 50%, #6ac5fa);
}

/* Slide art is decoration: no lightbox, no zoom-in cursor, no image drag */
.lop-slide img {
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

@media (max-width: 480px) {
  /* Portrait crop: keep the lighthouse centred in the narrow frame */
  .lop-slide .project-slide-media > img,
  .lop-slide .project-slide-media > video {
    object-position: 46% 50%;
  }
}

/* ── The live logo (transitions.js slide animation "lop") ──
   The same SVG as the static logo, inline over it: "Legends of" is written on in ink, the
   letters of Palimpagos pop in, then ride a wave and shy away from the cursor. The enhancer
   moves the parts; this only places it and does the swap. The static logo stays under reduced
   motion, while the SVG loads, or if it never arrives. */
.lop-slide-logo-anim {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  /* The global slide logo's shadow, so the two are one picture */
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.25));
}

/* Two SVGs laid over each other, the size of the box: "Legends of" (under) and the rest.
   Pushed and popping letters and flung ink leave the logo's box: let them */
.lop-slide-logo-anim > svg {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* The script's ink wobbles through a filter: on a layer of its own, that filter is redrawn
   only when the wobble moves, not every frame the Palimpagos letters ride their wave */
.lop-slide-logo-anim > .lop-logo-script {
  will-change: transform;
}

.lop-slide.lop-logo-live > .lop-slide-logo-anim {
  opacity: 1;
}

/* The intro is the logo arriving: no fade, the static logo goes at once */
.lop-slide.lop-logo-intro > .lop-slide-logo-anim {
  transition: none;
}

/* Hidden by opacity rather than visibility: the static logo carries the slide's only
   accessible name, and the animation over it is decorative */
.lop-slide.lop-logo-swapped > .project-slide-logo {
  opacity: 0;
}

/* ── Top of the page, below the slide ── */

/* The cloud bank at the slide / description boundary rises in once the page is built,
   so it doesn't pop in over the slide while the homepage grows the slide into place */
.lop-cloud-zone {
  animation: lop-clouds-in 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.45s both;
}

@keyframes lop-clouds-in {
  from { opacity: 0; transform: translateY(60px); }
  to { opacity: 1; transform: none; }
}

@keyframes lop-clouds-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .lop-cloud-zone {
    animation-name: lop-clouds-fade;
  }
}

/* At narrower desktop widths the left cloud lens reached the first line of the description */
@media (max-width: 1280px) {
  .lop-desc {
    padding-top: 140px;
  }
}

@media (max-width: 480px) {
  .lop-desc {
    padding-top: 28px;
  }
}

/* Poptropica Legacy slide + top of page */
/* ══════════════════════════════════════════
   Poptropica Legacy: project slide + top of page (staging)
   Loaded after shared/styles.css. Fold into the "Poptropica Legacy page"
   section of shared/styles.css once the stage redesign lands.
   ══════════════════════════════════════════ */

/* Slide: sky blue ground while the background decodes */
.project-slide.legacy-slide {
  background: #c4e9f9;
}

/* Keep the ruins, the two islanders and the temple in frame */
.legacy-slide .project-slide-media > img {
  object-position: 50% 72%;
}

/* The logo is headerLogo.png (Andrew's pick: the wordmark with its palm-tree skyline, about
   2:1, no app icon; branding/legacyLogo.png is the bare wordmark it replaced): the global
   size, like the other logos of that shape (Legends of Palimpagos, Sunscreen Saviour,
   Poptropica Club) */

/* Slide art is decorative: no lightbox, no zoom cursor, no drag ghost */
.legacy-slide.project-slide img {
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}

/* First section under the slide: more breathing room than the old hero gave it */
.legacy-desc {
  padding: 64px 40px;
}

@media (max-width: 480px) {
  .legacy-slide .project-slide-media > img {
    object-position: 57% 60%;
  }

  .legacy-desc {
    padding: 32px 24px;
  }
}

/* Witch Hotel slide + top of page */
/* Witch Hotel: project slide (staging, merge into the "Witch Hotel page" section of shared/styles.css) */

/* Purple ground while the sketch wallpaper loads (instead of the global black) */
.project-slide.wh-slide {
  background: #2a1960;
}

/* Frame the logo between the little house character (left) and the big
   hotel witch (right) instead of centering it on the hotel's towers */
.wh-slide .project-slide-media > img {
  object-position: 36% 50%;
}

/* Soft glow in the wallpaper's own purple: fades the sketch lines right behind
   the logo so it reads cleanly, without a visible patch */
.wh-slide .project-slide-tint {
  background: radial-gradient(ellipse 19% 32% at 50% 50%,
    rgba(55, 23, 123, 0.92) 0%,
    rgba(55, 23, 123, 0.78) 45%,
    rgba(55, 23, 123, 0) 100%);
}

/* The lettering is thin hand-drawn line work, so at the global 30% it carried the least
   weight of all the slide logos in the homepage reel: a little taller on desktop */
@media (min-width: 481px) {
  .wh-slide .project-slide-logo {
    max-height: 34%;
  }
}

/* Slide art isn't gallery content: no zoom cursor, no lightbox */
.wh-slide img {
  pointer-events: none;
}

/* The description band now follows a full-viewport slide: give it more room */
.wh-desc {
  padding: 56px 40px;
}

@media (max-width: 480px) {
  /* Portrait crop: the hotel witch, hat above the logo and hands below */
  .wh-slide .project-slide-media > img {
    object-position: 63% 50%;
  }

  .wh-slide .project-slide-tint {
    background: radial-gradient(ellipse 56% 20% at 50% 50%,
      rgba(55, 23, 123, 0.92) 0%,
      rgba(55, 23, 123, 0.78) 50%,
      rgba(55, 23, 123, 0) 100%);
  }

  .wh-desc {
    padding: 36px 24px;
  }
}

/* The Cannoli Hole slide + top of page */
/* ── The Cannoli Hole: slide (staging) ── */

/* The photo's warm average while it loads (and under the homepage crossfade), instead of
   the global black, which the white tint turned into a flat grey */
.project-slide.ch-slide {
  background: #a7765a;
}

.ch-slide .project-slide-media > img {
  object-position: 50% 40%;
}

/* The global 30% white wash, brightened a little behind the centred black line logo */
.ch-slide .project-slide-tint {
  background-image: radial-gradient(circle closest-side at 50% 50%,
    rgba(255, 255, 255, 0.4) 0%,
    rgba(255, 255, 255, 0.22) 45%,
    rgba(255, 255, 255, 0) 100%);
}

/* A round badge whose wordmark only fills its middle: a little taller than the default */
@media (min-width: 481px) {
  .ch-slide .project-slide-logo {
    max-height: 38%;
  }
}

/* Slide images are decoration: no lightbox, no zoom-in cursor, no image drag */
.ch-slide img {
  pointer-events: none;
}

@media (max-width: 480px) {
  .ch-slide .project-slide-media > img {
    object-position: 30% 50%;
  }
}

/* ── Description band under the slide ──
   The mask sticker used to straddle the short hero's bottom edge. Under a full-viewport
   slide that would poke a cut-off sliver into the first screen (and pop in over the
   homepage stage on entry), so it now sits inside the black band as white line art.
   The cannoli sticker keeps breaking out of the band's bottom edge. */

.ch-slide + .ch-desc .ch-clip-left {
  top: 50%;
  left: calc(50% - 360px - 190px);
  transform: translateY(-50%);
}

/* Too narrow for the mask beside the text: stack it above the text's left edge */
@media (max-width: 1200px) {
  .ch-slide + .ch-desc {
    padding-top: 116px;
  }

  .ch-slide + .ch-desc .ch-clip-left {
    top: 28px;
    left: max(40px, calc(50% - 360px));
    width: 110px;
    transform: none;
  }
}

@media (max-width: 480px) {
  .ch-slide + .ch-desc {
    padding-top: 90px;
  }

  .ch-slide + .ch-desc .ch-clip-left {
    top: 22px;
    left: 24px;
    width: 80px;
  }
}

/* Marble slide + top of page */
/* ── Marble Soap & Holistics: project slide (staging) ── */

/* The marble surface's greys while the photo loads (and under the homepage crossfade),
   instead of the global black, which the white tint turned into a flat grey */
.project-slide.mb-slide {
  background: linear-gradient(#d5d7dc, #a4a3a5);
}

/* Keep the row of soaps centred behind the logo when wide screens crop the photo vertically */
.mb-slide .project-slide-media > img {
  object-position: 50% 58%;
}

/* The usual 30% white wash, plus a soft bloom behind the logo so its black linework
   stays crisp where it crosses the darker soap bars */
.mb-slide .project-slide-tint {
  background:
    radial-gradient(ellipse 34% 30% at 50% 50%, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 100%),
    rgba(255, 255, 255, 0.3);
}

/* Very wide wordmark (about 2.8:1): the global 30% width cap leaves it short and light,
   so give it a little more width. A white glow instead of the dark drop shadow keeps a
   black logo on a light photo from looking smudged. */
.mb-slide .project-slide-logo {
  max-width: min(36%, 540px);
  filter: drop-shadow(0 0 18px rgba(255, 255, 255, 0.7));
}

/* Slide images are decoration: no lightbox, no zoom-in cursor, no image drag */
.mb-slide img {
  pointer-events: none;
}

@media (max-width: 480px) {
  .mb-slide .project-slide-logo {
    max-width: 80%;
  }
}

/* Page flow: the description band now sits directly under a full-screen photo instead of a
   short hero, so give it a little more air (desktop only; mobile keeps its 32px) */
@media (min-width: 481px) {
  .mb-slide + .ch-desc {
    padding-top: 44px;
    padding-bottom: 44px;
  }
}

/* PointStage slide + top of page */
/* PointStage: project slide + top-of-page staging rules */

/* ── Slide ── */
.project-slide.ps-slide {
  background: #0d365f;
}

.ps-slide img {
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* Teal wash behind the wordmark calms the faded library grid; soft shade toward the bottom edge */
.ps-slide .project-slide-tint {
  background:
    radial-gradient(38% 34% at 50% 50%, rgba(8, 110, 128, 0.5), rgba(8, 110, 128, 0.22) 55%, rgba(8, 110, 128, 0) 100%),
    linear-gradient(to bottom, rgba(12, 18, 24, 0) 58%, rgba(12, 18, 24, 0.4) 100%);
}

/* The wide wordmark reads small at the default 30% width */
.ps-slide .project-slide-logo {
  max-width: min(36%, 520px);
  max-height: 34%;
}

@media (max-width: 480px) {
  .ps-slide .project-slide-logo {
    max-width: 80%;
    max-height: 40%;
  }
}

/* Portrait crops: keep the big P mark in view instead of the faded library grid */
@media (max-aspect-ratio: 1/1) {
  .ps-slide .project-slide-media > img {
    object-position: 72% 50%;
  }
}

/* ── Intro: the tagline that used to sit under the hero logo ── */
.ps-intro {
  padding: 104px 40px 60px;
  text-align: center;
}

.ps-intro-tagline {
  max-width: 760px;
  margin: 0 auto;
  font-weight: 300;
  font-size: 34px;
  line-height: 1.28;
  letter-spacing: 0.1px;
  color: rgba(255, 255, 255, 0.92);
  text-wrap: balance;
}

/* The app window now follows the tagline instead of overlapping the hero */
.ps-showcase {
  margin-top: 0;
}

@media (max-width: 720px) {
  .ps-intro {
    padding: 80px 32px 44px;
  }

  .ps-intro-tagline {
    font-size: 28px;
  }
}

@media (max-width: 480px) {
  .ps-intro {
    padding: 56px 22px 32px;
  }

  .ps-intro-tagline {
    font-size: 22px;
    max-width: 320px;
  }
}

/* Splash Mementos slide + top of page */
/* ══════════════════════════════════════════
   Splash Mementos: project slide (staging, merge into styles.css)
   Rendered on the page and in the homepage stage, so nothing here is
   scoped under main.sm-page.
   ══════════════════════════════════════════ */

/* The artwork sits on a white-to-mist backdrop; continue it above and below
   the art (the hard stop is always hidden behind the centered art) */
.project-slide.sm-slide {
  background: linear-gradient(#ffffff 50%, #e4e3e9 50%);
}

/* Fit the composite to the slide width so the portraits bleeding off both
   edges are never cropped; on slides wider than the art (2800x1100) it
   overflows and trims a little top and bottom */
.sm-slide .project-slide-media > .sm-slide-art {
  top: 50%;
  bottom: auto;
  height: auto;
  aspect-ratio: 2800 / 1100;
  translate: 0 -50%;
}

/* Slide art is decorative: keep clicks off it (no lightbox) */
.sm-slide img {
  pointer-events: none;
}

/* Second crop of the same file, only used on phones */
.sm-slide .project-slide-media > .sm-slide-art-alt {
  display: none;
}

/* Logo sits in the gap between the two portraits, like the old hero */
.sm-slide .project-slide-logo {
  max-width: min(28%, 440px);
  margin-top: -1.5%;
  filter: drop-shadow(0 2px 14px rgba(255, 255, 255, 0.9));
}

/* Brand rainbow along the bottom edge */
.sm-slide::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6px;
  background: linear-gradient(90deg, #f2df5b 0%, #c8e872 12.5%, #8fd98a 25%, #6ccdb9 37.5%, #85b4e8 50%, #8286d4 62.5%, #9a6cb4 75%, #c35c96 87.5%, #d75f76 100%);
}

/* Phones: stack the portraits, child above the logo, couple below */
@media (max-width: 480px) {
  .project-slide.sm-slide {
    background: linear-gradient(#ffffff, #e4e3e9);
  }

  .sm-slide .project-slide-media > .sm-slide-art,
  .sm-slide .project-slide-media > .sm-slide-art-alt {
    display: block;
    aspect-ratio: auto;
    translate: none;
  }

  .sm-slide .project-slide-media > .sm-slide-art {
    top: auto;
    bottom: 0;
    height: 44%;
    object-position: 100% 50%;
    -webkit-mask-image: linear-gradient(transparent, #000 30%);
    mask-image: linear-gradient(transparent, #000 30%);
  }

  .sm-slide .project-slide-media > .sm-slide-art-alt {
    top: 0;
    bottom: auto;
    height: 40%;
    object-position: 0 50%;
    -webkit-mask-image: linear-gradient(#000 70%, transparent);
    mask-image: linear-gradient(#000 70%, transparent);
  }

  .sm-slide .project-slide-logo {
    max-width: 72%;
    margin-top: 0;
  }
}

/* Poptropica Club slide + top of page */
/* Poptropica Club: project slide (staging, merge into the Poptropica Club section of shared/styles.css) */

/* Sky fallback while the background loads */
.project-slide.pc-slide {
  background: linear-gradient(180deg, #3786cc 0%, #399be0 50%, #29a3ef 100%);
}

/* Slide art is decorative: no lightbox, no zoom cursor */
.pc-slide .project-slide-media,
.pc-slide .project-slide-logo {
  pointer-events: none;
}

/* Keep the cloud scallops along the bottom edge in every crop */
.pc-slide .project-slide-media > img {
  object-position: 50% 100%;
}

/* Blue-tinted shadow, as on the old hero */
.pc-slide .project-slide-logo {
  filter: drop-shadow(0 10px 16px rgba(10, 50, 110, 0.3));
}

/* ── The live logo (transitions.js slide animation "pc") ──
   The Club's own landing-page logo SVG, laid over the slide's static PNG — which is the same
   artwork, and is what stays under reduced motion, before the SVG arrives, or if it never
   does. Every letter of "Poptropica Club" and of "Messy Sinker's" floats on its own clock
   (these keyframes) and is pushed away from the cursor (the enhancer, through a group round it).
   Ported from /Volumes/andrews-ssd/websites/poptropicaClub/website/landing (styles.css's
   logoFloat/messyFloat and [data-animate="logo-part"]). Nothing here is scoped to the page or
   to the stage: the same rules run in both. */
.pc-slide-logo-anim {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
  filter: drop-shadow(0 10px 16px rgba(10, 50, 110, 0.3));
}

/* The SVG's 2325.6 x 1517.1 viewBox, placed so the logo inside it (x 67 - 1681.6,
   y 18.5 - 860.1, measured off the artwork) lands on the static logo's box. The margin around
   it is empty on purpose: it is the room the pushed letters travel into. */
.pc-slide-logo-anim > svg {
  position: absolute;
  left: -22.731%;
  top: -37.849%;
  width: 144.038%;
  height: 180.277%;
  display: block;
}

/* The swap: the SVG fades up over the PNG, which then stops taking part */
.pc-slide.pc-logo-live > .pc-slide-logo-anim {
  opacity: 1;
}

/* Hidden by opacity rather than visibility: the static logo carries the slide's only
   accessible name ("Messy Sinker's Poptropica Club"), and the animation over it is decorative */
.pc-slide.pc-logo-swapped > .project-slide-logo {
  opacity: 0;
}

/* Every moving part floats on its clock here (`transform`), and the enhancer writes its shove
   away from the cursor as an SVG transform attribute on a group it wraps round the part — so
   the bob and the shove compose, and the shove works whether or not the float has started.
   (Inside the keyframes, as the landing page had it, the shove did nothing until then.) Each part's
   transform-origin is its own centre, written inline by the enhancer in the logo's units:
   `center center` on an SVG element is the centre of the whole SVG canvas, which swung every
   letter in an arc about the middle of the logo. The fallback values are the ones a part with
   no clock of its own would use. */
.pc-slide-logo-anim [data-pc-float] {
  will-change: transform;
  --pc-float-y: -4px;
  --pc-float-rot: 2deg;
  --pc-float-dur: 2s;
  animation: pc-logo-float var(--pc-float-dur) ease-in-out infinite;
}

@keyframes pc-logo-float {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(var(--pc-float-y)) rotate(var(--pc-float-rot));
  }
}

/* The eight clocks the 15 letters of "Poptropica Club" are dealt round-robin (logoFloat1-8) */
.pc-slide-logo-anim [data-pc-float="1"] { --pc-float-dur: 1.7s; --pc-float-y: -4px; --pc-float-rot: 2deg; }
.pc-slide-logo-anim [data-pc-float="2"] { --pc-float-dur: 1.8s; --pc-float-y: -5px; --pc-float-rot: -2deg; }
.pc-slide-logo-anim [data-pc-float="3"] { --pc-float-dur: 1.9s; --pc-float-y: -3px; --pc-float-rot: 1.5deg; }
.pc-slide-logo-anim [data-pc-float="4"] { --pc-float-dur: 2s; --pc-float-y: -5px; --pc-float-rot: -2.5deg; }
.pc-slide-logo-anim [data-pc-float="5"] { --pc-float-dur: 2.1s; --pc-float-y: -6px; --pc-float-rot: 2deg; }
.pc-slide-logo-anim [data-pc-float="6"] { --pc-float-dur: 2.2s; --pc-float-y: -4px; --pc-float-rot: -1.5deg; }
.pc-slide-logo-anim [data-pc-float="7"] { --pc-float-dur: 2.3s; --pc-float-y: -5px; --pc-float-rot: 3deg; }
.pc-slide-logo-anim [data-pc-float="8"] { --pc-float-dur: 2.4s; --pc-float-y: -3px; --pc-float-rot: -2deg; }

/* "Messy Sinker's" is small type above the wordmark, so it drifts slower and far less
   (messyFloat1-8) — its 13 letters are three stroke layers each, all carrying the same clock */
.pc-slide-logo-anim [data-pc-float="m1"] { --pc-float-dur: 2.5s; --pc-float-y: -1.5px; --pc-float-rot: 0.5deg; }
.pc-slide-logo-anim [data-pc-float="m2"] { --pc-float-dur: 2.65s; --pc-float-y: -2px; --pc-float-rot: -0.5deg; }
.pc-slide-logo-anim [data-pc-float="m3"] { --pc-float-dur: 2.8s; --pc-float-y: -1px; --pc-float-rot: 0.4deg; }
.pc-slide-logo-anim [data-pc-float="m4"] { --pc-float-dur: 2.95s; --pc-float-y: -1.5px; --pc-float-rot: -0.6deg; }
.pc-slide-logo-anim [data-pc-float="m5"] { --pc-float-dur: 3.1s; --pc-float-y: -2px; --pc-float-rot: 0.5deg; }
.pc-slide-logo-anim [data-pc-float="m6"] { --pc-float-dur: 3.25s; --pc-float-y: -1px; --pc-float-rot: -0.4deg; }
.pc-slide-logo-anim [data-pc-float="m7"] { --pc-float-dur: 3.4s; --pc-float-y: -1.5px; --pc-float-rot: 0.7deg; }
.pc-slide-logo-anim [data-pc-float="m8"] { --pc-float-dur: 3.55s; --pc-float-y: -1px; --pc-float-rot: -0.5deg; }

/* Rotated out of the stage, scrolled past or the tab put away: the enhancer's loop stops on
   its own, and this is how the CSS floats stand down with it */
.pc-slide-logo-anim.is-held [data-pc-float] {
  animation-play-state: paused;
}

/* The framework never starts an enhancer under reduced motion, so this is only a backstop:
   whatever puts the SVG on the page, it doesn't move */
@media (prefers-reduced-motion: reduce) {
  .pc-slide-logo-anim [data-pc-float] {
    animation: none;
  }
}

/* Tagline, moved from the old hero into the Welcome copy */
.pc-tagline {
  margin-bottom: 14px;
  font-family: "CreativeBlock", sans-serif;
  font-size: 15px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #2589d0;
}

/* The slide fills the viewport, so hang Messy Sinker a little lower:
   the Hi! balloon should sit below the cloud edge, not peek into the slide */
@media (min-width: 481px) {
  .pc-mascot {
    margin-top: 132px;
  }
}

@media (max-width: 480px) {
  /* Narrow crop: frame the logo with the right-hand cloud instead of bare pattern */
  .pc-slide .project-slide-media > img {
    object-position: 75% 100%;
  }

  .pc-tagline {
    font-size: 12px;
    margin-bottom: 10px;
  }
}

/* Sunscreen Saviour slide + top of page */
/* ══════════════════════════════════════════
   Sunscreen Saviour: project slide (staging; merge into the Sunscreen Saviour section of shared/styles.css)
   Slide rules are keyed on .ss-slide only, so they also apply inside the homepage stage.
   ══════════════════════════════════════════ */

.project-slide.ss-slide {
  background: #063e88;
}

/* The gameplay footage (slide/hero.mp4) settles into the page's deep-sand colour at the bottom
   edge, so the intro popup below sits on the same sand */
.ss-slide .project-slide-media::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 22%;
  background: linear-gradient(rgba(220, 154, 67, 0), #dc9a43);
  pointer-events: none;
}

/* slide/logo.png is /home/sunscreenSaviourLogo.png with its transparent margin trimmed (the art
   only filled 65% of that canvas, so it read much smaller than the other slides' logos). Centred
   by its weight rather than its box: the "No snowmen" sign hangs off the right of the wordmark,
   so the art's centre of mass is 46.4% across and 53.2% down its box, and the box is shifted by
   the difference. (It used to sit 9% low, clear of the old beach art's foam line.) Hard cut-out
   shadow like the page's frames and cards. */
.ss-slide .project-slide-logo {
  translate: 3.6% -3.2%;
  filter: drop-shadow(0 8px 0 rgba(110, 60, 15, 0.3));
  pointer-events: none;
}

/* ── Page flow after the slide: the intro popup sits on the sand instead of overlapping a hero ── */

.ss-intro {
  padding: 64px 40px 88px;
}

.ss-popup {
  margin-top: 0;
}

@media (max-width: 720px) {
  .ss-intro {
    padding: 52px 24px 64px;
  }
}

@media (max-width: 480px) {
  .ss-intro {
    padding: 40px 16px 52px;
  }
}

/* Holmes slide + top of page */
/* ══════════════════════════════════════════
   Holmes: project slide + tagline band (staging).
   Merge into the Holmes section of shared/styles.css.
   ══════════════════════════════════════════ */

/* Slide: must render without page scripts and outside main.hl-page,
   so no --hl-* variables here */
.project-slide.hl-slide {
  /* Brand green while the background loads (and behind the homepage crossfade) */
  background: #3d826f;
}

/* Decorative layers: no lightbox, no image drag */
.hl-slide img {
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}

/* The lockup is very wide (3.4:1): a little more width than the global default
   gives it about the same visual weight as the squarer logos on other slides */
.hl-slide .project-slide-logo {
  max-width: min(37%, 520px);
}

@media (max-width: 480px), (orientation: portrait) {
  /* Portrait crop: the middle of the art is plain gradient, so keep the
     smoke from the right side in frame */
  .hl-slide .project-slide-media > img {
    object-position: 74% 50%;
  }
}

@media (max-width: 480px) {
  .hl-slide .project-slide-logo {
    max-width: 76%;
  }
}

/* ── The live lockup (transitions.js slide animation "hl") ──
   The slide's static logo is /projects/holmes/logo-full.svg — the symbol and the "Holmes"
   wordmark as one drawing. The enhancer lays a live copy of that lockup over it, in the
   lockup's own coordinates, and the two halves come apart: the symbol becomes the 31-drawing
   smoke loop (projects/holmes/slide/smoke-boil.svg, 8fps) and the wordmark becomes real text
   set in the ten boiling faces below (also 8fps). The static SVG is what shows cold — before
   the faces and the frames are in, if either fails, under reduced motion and under Save-Data —
   so nothing here is scoped to the page or to the homepage stage: the same rules run in both.

   Ported from the Holmes sources (read-only): website/boil.css + boil.js for the type, and
   branding/icon-smoke/ for the mark. */

/* The ten boiling faces: each is one hand-redrawn pass over Minion, subset to the six letters
   of "Holmes" (the only text set in them here) — 35 KB for the set instead of 370 KB. Nothing
   requests them until the enhancer asks for them by hand, because no rule a page's own markup
   can match names them: the wordmark they dress is built by the enhancer, never in the HTML. */
@font-face { font-family: "HolmesBoil0"; font-display: swap; src: url("/shared/fonts/HolmesBoil-0.woff2") format("woff2"); }
@font-face { font-family: "HolmesBoil1"; font-display: swap; src: url("/shared/fonts/HolmesBoil-1.woff2") format("woff2"); }
@font-face { font-family: "HolmesBoil2"; font-display: swap; src: url("/shared/fonts/HolmesBoil-2.woff2") format("woff2"); }
@font-face { font-family: "HolmesBoil3"; font-display: swap; src: url("/shared/fonts/HolmesBoil-3.woff2") format("woff2"); }
@font-face { font-family: "HolmesBoil4"; font-display: swap; src: url("/shared/fonts/HolmesBoil-4.woff2") format("woff2"); }
@font-face { font-family: "HolmesBoil5"; font-display: swap; src: url("/shared/fonts/HolmesBoil-5.woff2") format("woff2"); }
@font-face { font-family: "HolmesBoil6"; font-display: swap; src: url("/shared/fonts/HolmesBoil-6.woff2") format("woff2"); }
@font-face { font-family: "HolmesBoil7"; font-display: swap; src: url("/shared/fonts/HolmesBoil-7.woff2") format("woff2"); }
@font-face { font-family: "HolmesBoil8"; font-display: swap; src: url("/shared/fonts/HolmesBoil-8.woff2") format("woff2"); }
@font-face { font-family: "HolmesBoil9"; font-display: swap; src: url("/shared/fonts/HolmesBoil-9.woff2") format("woff2"); }

/* The boil itself, copied frame for frame from the Holmes site's boil.css: 80 steps drawn
   evenly from the ten faces, never repeating one back to back, so at 8fps the order takes 10s
   to come round and reads as random rather than as a rotation. font-family is a discrete
   property — steps(1, end) is what makes each step hold its face for the whole interval
   instead of flipping at the midpoint. The fallback stack is repeated on every step because a
   keyframe replaces the family outright. */
@keyframes hl-boil {
  0% { font-family: "HolmesBoil6", "HolmesGaramond", "EB Garamond", Palatino, Georgia, serif; }
  1.25% { font-family: "HolmesBoil4", "HolmesGaramond", "EB Garamond", Palatino, Georgia, serif; }
  2.5% { font-family: "HolmesBoil9", "HolmesGaramond", "EB Garamond", Palatino, Georgia, serif; }
  3.75% { font-family: "HolmesBoil3", "HolmesGaramond", "EB Garamond", Palatino, Georgia, serif; }
  5% { font-family: "HolmesBoil1", "HolmesGaramond", "EB Garamond", Palatino, Georgia, serif; }
  6.25% { font-family: "HolmesBoil5", "HolmesGaramond", "EB Garamond", Palatino, Georgia, serif; }
  7.5% { font-family: "HolmesBoil0", "HolmesGaramond", "EB Garamond", Palatino, Georgia, serif; }
  8.75% { font-family: "HolmesBoil8", "HolmesGaramond", "EB Garamond", Palatino, Georgia, serif; }
  10% { font-family: "HolmesBoil7", "HolmesGaramond", "EB Garamond", Palatino, Georgia, serif; }
  11.25% { font-family: "HolmesBoil2", "HolmesGaramond", "EB Garamond", Palatino, Georgia, serif; }
  12.5% { font-family: "HolmesBoil9", "HolmesGaramond", "EB Garamond", Palatino, Georgia, serif; }
  13.75% { font-family: "HolmesBoil4", "HolmesGaramond", "EB Garamond", Palatino, Georgia, serif; }
  15% { font-family: "HolmesBoil6", "HolmesGaramond", "EB Garamond", Palatino, Georgia, serif; }
  16.25% { font-family: "HolmesBoil7", "HolmesGaramond", "EB Garamond", Palatino, Georgia, serif; }
  17.5% { font-family: "HolmesBoil0", "HolmesGaramond", "EB Garamond", Palatino, Georgia, serif; }
  18.75% { font-family: "HolmesBoil8", "HolmesGaramond", "EB Garamond", Palatino, Georgia, serif; }
  20% { font-family: "HolmesBoil3", "HolmesGaramond", "EB Garamond", Palatino, Georgia, serif; }
  21.25% { font-family: "HolmesBoil1", "HolmesGaramond", "EB Garamond", Palatino, Georgia, serif; }
  22.5% { font-family: "HolmesBoil5", "HolmesGaramond", "EB Garamond", Palatino, Georgia, serif; }
  23.75% { font-family: "HolmesBoil2", "HolmesGaramond", "EB Garamond", Palatino, Georgia, serif; }
  25% { font-family: "HolmesBoil7", "HolmesGaramond", "EB Garamond", Palatino, Georgia, serif; }
  26.25% { font-family: "HolmesBoil2", "HolmesGaramond", "EB Garamond", Palatino, Georgia, serif; }
  27.5% { font-family: "HolmesBoil6", "HolmesGaramond", "EB Garamond", Palatino, Georgia, serif; }
  28.75% { font-family: "HolmesBoil5", "HolmesGaramond", "EB Garamond", Palatino, Georgia, serif; }
  30% { font-family: "HolmesBoil9", "HolmesGaramond", "EB Garamond", Palatino, Georgia, serif; }
  31.25% { font-family: "HolmesBoil0", "HolmesGaramond", "EB Garamond", Palatino, Georgia, serif; }
  32.5% { font-family: "HolmesBoil8", "HolmesGaramond", "EB Garamond", Palatino, Georgia, serif; }
  33.75% { font-family: "HolmesBoil3", "HolmesGaramond", "EB Garamond", Palatino, Georgia, serif; }
  35% { font-family: "HolmesBoil1", "HolmesGaramond", "EB Garamond", Palatino, Georgia, serif; }
  36.25% { font-family: "HolmesBoil4", "HolmesGaramond", "EB Garamond", Palatino, Georgia, serif; }
  37.5% { font-family: "HolmesBoil9", "HolmesGaramond", "EB Garamond", Palatino, Georgia, serif; }
  38.75% { font-family: "HolmesBoil3", "HolmesGaramond", "EB Garamond", Palatino, Georgia, serif; }
  40% { font-family: "HolmesBoil4", "HolmesGaramond", "EB Garamond", Palatino, Georgia, serif; }
  41.25% { font-family: "HolmesBoil1", "HolmesGaramond", "EB Garamond", Palatino, Georgia, serif; }
  42.5% { font-family: "HolmesBoil8", "HolmesGaramond", "EB Garamond", Palatino, Georgia, serif; }
  43.75% { font-family: "HolmesBoil6", "HolmesGaramond", "EB Garamond", Palatino, Georgia, serif; }
  45% { font-family: "HolmesBoil7", "HolmesGaramond", "EB Garamond", Palatino, Georgia, serif; }
  46.25% { font-family: "HolmesBoil0", "HolmesGaramond", "EB Garamond", Palatino, Georgia, serif; }
  47.5% { font-family: "HolmesBoil2", "HolmesGaramond", "EB Garamond", Palatino, Georgia, serif; }
  48.75% { font-family: "HolmesBoil5", "HolmesGaramond", "EB Garamond", Palatino, Georgia, serif; }
  50% { font-family: "HolmesBoil0", "HolmesGaramond", "EB Garamond", Palatino, Georgia, serif; }
  51.25% { font-family: "HolmesBoil5", "HolmesGaramond", "EB Garamond", Palatino, Georgia, serif; }
  52.5% { font-family: "HolmesBoil7", "HolmesGaramond", "EB Garamond", Palatino, Georgia, serif; }
  53.75% { font-family: "HolmesBoil1", "HolmesGaramond", "EB Garamond", Palatino, Georgia, serif; }
  55% { font-family: "HolmesBoil6", "HolmesGaramond", "EB Garamond", Palatino, Georgia, serif; }
  56.25% { font-family: "HolmesBoil4", "HolmesGaramond", "EB Garamond", Palatino, Georgia, serif; }
  57.5% { font-family: "HolmesBoil8", "HolmesGaramond", "EB Garamond", Palatino, Georgia, serif; }
  58.75% { font-family: "HolmesBoil2", "HolmesGaramond", "EB Garamond", Palatino, Georgia, serif; }
  60% { font-family: "HolmesBoil9", "HolmesGaramond", "EB Garamond", Palatino, Georgia, serif; }
  61.25% { font-family: "HolmesBoil3", "HolmesGaramond", "EB Garamond", Palatino, Georgia, serif; }
  62.5% { font-family: "HolmesBoil5", "HolmesGaramond", "EB Garamond", Palatino, Georgia, serif; }
  63.75% { font-family: "HolmesBoil9", "HolmesGaramond", "EB Garamond", Palatino, Georgia, serif; }
  65% { font-family: "HolmesBoil4", "HolmesGaramond", "EB Garamond", Palatino, Georgia, serif; }
  66.25% { font-family: "HolmesBoil7", "HolmesGaramond", "EB Garamond", Palatino, Georgia, serif; }
  67.5% { font-family: "HolmesBoil8", "HolmesGaramond", "EB Garamond", Palatino, Georgia, serif; }
  68.75% { font-family: "HolmesBoil1", "HolmesGaramond", "EB Garamond", Palatino, Georgia, serif; }
  70% { font-family: "HolmesBoil2", "HolmesGaramond", "EB Garamond", Palatino, Georgia, serif; }
  71.25% { font-family: "HolmesBoil3", "HolmesGaramond", "EB Garamond", Palatino, Georgia, serif; }
  72.5% { font-family: "HolmesBoil6", "HolmesGaramond", "EB Garamond", Palatino, Georgia, serif; }
  73.75% { font-family: "HolmesBoil0", "HolmesGaramond", "EB Garamond", Palatino, Georgia, serif; }
  75% { font-family: "HolmesBoil9", "HolmesGaramond", "EB Garamond", Palatino, Georgia, serif; }
  76.25% { font-family: "HolmesBoil0", "HolmesGaramond", "EB Garamond", Palatino, Georgia, serif; }
  77.5% { font-family: "HolmesBoil3", "HolmesGaramond", "EB Garamond", Palatino, Georgia, serif; }
  78.75% { font-family: "HolmesBoil4", "HolmesGaramond", "EB Garamond", Palatino, Georgia, serif; }
  80% { font-family: "HolmesBoil5", "HolmesGaramond", "EB Garamond", Palatino, Georgia, serif; }
  81.25% { font-family: "HolmesBoil2", "HolmesGaramond", "EB Garamond", Palatino, Georgia, serif; }
  82.5% { font-family: "HolmesBoil8", "HolmesGaramond", "EB Garamond", Palatino, Georgia, serif; }
  83.75% { font-family: "HolmesBoil6", "HolmesGaramond", "EB Garamond", Palatino, Georgia, serif; }
  85% { font-family: "HolmesBoil7", "HolmesGaramond", "EB Garamond", Palatino, Georgia, serif; }
  86.25% { font-family: "HolmesBoil1", "HolmesGaramond", "EB Garamond", Palatino, Georgia, serif; }
  87.5% { font-family: "HolmesBoil8", "HolmesGaramond", "EB Garamond", Palatino, Georgia, serif; }
  88.75% { font-family: "HolmesBoil1", "HolmesGaramond", "EB Garamond", Palatino, Georgia, serif; }
  90% { font-family: "HolmesBoil6", "HolmesGaramond", "EB Garamond", Palatino, Georgia, serif; }
  91.25% { font-family: "HolmesBoil2", "HolmesGaramond", "EB Garamond", Palatino, Georgia, serif; }
  92.5% { font-family: "HolmesBoil5", "HolmesGaramond", "EB Garamond", Palatino, Georgia, serif; }
  93.75% { font-family: "HolmesBoil7", "HolmesGaramond", "EB Garamond", Palatino, Georgia, serif; }
  95% { font-family: "HolmesBoil4", "HolmesGaramond", "EB Garamond", Palatino, Georgia, serif; }
  96.25% { font-family: "HolmesBoil3", "HolmesGaramond", "EB Garamond", Palatino, Georgia, serif; }
  97.5% { font-family: "HolmesBoil0", "HolmesGaramond", "EB Garamond", Palatino, Georgia, serif; }
  98.75% { font-family: "HolmesBoil9", "HolmesGaramond", "EB Garamond", Palatino, Georgia, serif; }
}

/* The overlay sits exactly on the static logo's box (the enhancer measures it and keeps it
   there through the homepage's ENTER grow and any resize), and carries the same drop shadow,
   so the swap changes the drawing and nothing else. */
.hl-slide-logo-anim {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.45s ease;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.25));
}

/* logo-full.svg's own viewBox, so the symbol and the wordmark inside are placed in the
   lockup's units. overflow is visible because the roughened outline of a boil frame strays
   about 1.5 units past the lockup's box at the top. */
.hl-slide-logo-anim > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

/* The wordmark. The tracking is the one thing the faces can't supply: the lockup's letters are
   a heavier drawing than the live faces, so at the lockup's cap height the same six letters set
   about 31 units (6%) wide. -0.0351em takes that back out of the five gaps, which lands the
   word's ink on the static one's, H to s. */
.hl-slide-logo-anim .hl-boil-word {
  font-family: "HolmesGaramond", "EB Garamond", Palatino, Georgia, serif;
  font-weight: 400;
  /* The boil faces set wider than the drawn lockup at the same cap height. -0.0351em matched
     the drawn word's width exactly; Andrew asked for tighter, so this sets it ~3% narrower. */
  letter-spacing: -0.07em;
}

/* Boiling starts only once every face is in, so the word can never strobe between the faces
   and the fallback while they arrive (boil.js's rule, and the reason it sets data-boil last) */
.hl-slide-logo-anim.is-boiling .hl-boil-word {
  animation: hl-boil 10s steps(1, end) infinite;
}

/* The type's boil is CSS, so it doesn't stop when the enhancer's loop does: hold it by hand
   while the slide is off screen or the tab is away (the smoke's loop pauses itself) */
.hl-slide-logo-anim.is-held .hl-boil-word {
  animation-play-state: paused;
}

/* The swap: the live lockup comes up as the static one goes down. They are two drawings of the
   same mark rather than the same artwork twice, so this is a real crossfade — the logo settling
   into life — not a cover-up. The static logo is hidden by opacity, not visibility: it carries
   the slide's only accessible name ("Holmes") and the lockup over it is aria-hidden. */
.hl-slide.hl-logo-live > .hl-slide-logo-anim {
  opacity: 1;
}

.hl-slide.hl-logo-live > .project-slide-logo {
  opacity: 0;
  transition: opacity 0.45s ease;
}

/* Tagline band between the slide and the description.
   The app window rises out of it into the ink section below
   (.hl-desc-window keeps its negative top margin). */
.hl-intro {
  background: var(--hl-paper);
  color: var(--hl-ink);
  text-align: center;
  padding: 112px var(--hl-gutter) calc(min(1080px, 100% - 2 * var(--hl-gutter)) * 0.2 + 80px);
}

.hl-tagline {
  font-family: var(--hl-display);
  font-weight: 400;
  font-size: clamp(30px, 3.3vw, 48px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--hl-ink);
}

.hl-tagline em {
  font-style: italic;
  color: var(--hl-pine);
}

@media (max-width: 480px) {
  .hl-intro {
    padding-top: 64px;
    padding-bottom: calc(min(1080px, 100% - 2 * var(--hl-gutter)) * 0.2 + 48px);
  }

  .hl-tagline {
    font-size: 26px;
  }
}

/* Who Am I? slide + top of page */
/* ══════════════════════════════════════════
   Who Am I?: project slide (staging).
   Merge into the "Who Am I? page" section of shared/styles.css,
   replacing the old .wai-hero* rules.
   ══════════════════════════════════════════ */

/* Slide: must render without page scripts and outside main.wai-page,
   so no --wai-* variables here */
.project-slide.wai-slide {
  /* Soft pink while the pattern loads (and behind the homepage crossfade) */
  background: #efb7cf;
}

/* Decorative layers: no lightbox, no image drag */
.wai-slide img {
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}

/* Tile pattern, sliding right to left for ever. slide/tiles.webp is ONE 4 x 4 block of the
   page's sixteen tiles (built by _unused/tools/build-wai-tiles.sh), so it repeats seamlessly;
   the track slides exactly one block per loop, and the loop can't be seen. The layer is
   tilted and oversized so no edge shows, and the tiles travel along their tilted rows.
   Sized off the slide (container units), so the stage and the page show the same pattern:
   the old photo's scale, where a tile's pitch was 7.4% of the width, or 14.7% of the height
   on a tall screen */
.wai-slide .project-slide-media {
  container-type: size;
  /* What shows between the tiles (the tiles themselves have transparent gaps) */
  background: linear-gradient(100deg, #c9528f 0%, #d9829d 50%, #b8bf48 100%);
}

.wai-slide-tiles {
  --wai-slide-block: max(29.6cqw, 58.8cqh);
  --wai-slide-loop: 22s;
  position: absolute;
  inset: -20% -10%;
  transform: rotate(-3.2deg);
}

.wai-slide-tiles-track {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: calc(100% + var(--wai-slide-block));
  background: url("/projects/who-am-i/slide/tiles.webp") 0 0 / var(--wai-slide-block) var(--wai-slide-block) repeat;
  /* Pushed back so the logo reads first */
  filter: blur(1.5px) saturate(0.9);
  will-change: transform;
  animation: wai-slide-scroll var(--wai-slide-loop) linear infinite;
}

@keyframes wai-slide-scroll {
  to { transform: translateX(calc(-1 * var(--wai-slide-block))); }
}

/* The old photo's pink-to-lime wash, which stays put while the tiles pass under it (it is
   what turns the lime tiles tan on the left and the pink ones salmon on the right), and the
   white glow behind the logo. The glow is a little stronger than the old hero's: this is the
   busiest background in the homepage reel, and the emoji row under the wordmark needs to
   separate from the emoji tiles behind it */
.wai-slide .project-slide-tint {
  --wai-slide-wash: linear-gradient(100deg, rgba(232, 70, 150, 0.4) 0%, rgba(236, 120, 160, 0.22) 50%, rgba(196, 218, 60, 0.42) 100%);
  background:
    radial-gradient(ellipse 40% 44% at 50% 50%, rgba(255, 255, 255, 0.86) 0%, rgba(255, 255, 255, 0.5) 55%, rgba(255, 255, 255, 0) 100%),
    linear-gradient(rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.24)),
    var(--wai-slide-wash);
}

/* Wide lockup (2.25:1) with a row of emoji: a bit more width than the
   global default so it carries the same weight as the squarer logos */
.wai-slide .project-slide-logo {
  max-width: min(36%, 540px);
  max-height: 34%;
  filter: drop-shadow(0 14px 22px rgba(90, 20, 60, 0.28));
}

/* ── The live logo (transitions.js slide animation "wai") ──
   The same SVG as the static logo, inline over it: the letters pop in, the question mark
   swings up, the emoji pop in and then jitter. The enhancer moves the parts; this only places
   it and does the swap. The static logo stays under reduced motion, while the SVG loads, or
   if it never arrives. */
.wai-slide-logo-anim {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  filter: drop-shadow(0 14px 22px rgba(90, 20, 60, 0.28));
}

/* Popping parts overshoot the logo's box: let them */
.wai-slide-logo-anim > svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.wai-slide.wai-logo-live > .wai-slide-logo-anim {
  opacity: 1;
}

/* The intro is the logo arriving: no fade, the static logo goes at once */
.wai-slide.wai-logo-intro > .wai-slide-logo-anim {
  transition: none;
}

/* Hidden by opacity rather than visibility: the static logo carries the slide's only
   accessible name ("Who Am I?"), and the animation over it is decorative */
.wai-slide.wai-logo-swapped > .project-slide-logo {
  opacity: 0;
}

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

@media (max-width: 480px), (orientation: portrait) {
  .wai-slide .project-slide-tint {
    background:
      radial-gradient(ellipse 70% 34% at 50% 50%, rgba(255, 255, 255, 0.86) 0%, rgba(255, 255, 255, 0.5) 55%, rgba(255, 255, 255, 0) 100%),
      linear-gradient(rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.24)),
      var(--wai-slide-wash);
  }
}

@media (max-width: 480px) {
  .wai-slide-tiles-track {
    filter: blur(0.75px) saturate(0.9);
  }

  .wai-slide .project-slide-logo {
    max-width: 86%;
  }
}

/* ── Page flow after the slide: the description's wave rises over the
   slide's bottom edge, like it used to close the hero ── */

.wai-desc {
  position: relative;
  z-index: 1;
  padding-top: 34px;
}

.wai-desc-wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% - 1px);
  width: 100%;
  height: 64px;
  display: block;
  pointer-events: none;
}

.wai-desc-wave path {
  fill: var(--wai-pink-deep);
}

@media (max-width: 480px) {
  .wai-desc {
    padding-top: 18px;
  }

  .wai-desc-wave {
    height: 34px;
  }
}

/* Brashier Gets Drawn 2020 slide + top of page */
/* ══════════════════════════════════════════
   Brashier Gets Drawn 2020: project slide (staging).
   Merge into the "Brashier Gets Drawn 2020 page" section of shared/styles.css
   (and drop the old .bgd-hero rules there).
   Rendered on the page and in the homepage stage, so nothing here is scoped
   under main.bgd-page and no --bgd-* variables are used on the slide.
   ══════════════════════════════════════════ */

/* Paper under the gallery wall, which is multiplied onto it (instead of the global black) */
.project-slide.bgd-slide {
  background: #f7f0e1;
}

/* Slide art isn't gallery content: no zoom cursor, no lightbox, no drag */
.bgd-slide img {
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}

/* The final project's gallery wall, each of its six rows sliding round for ever, alternating
   left and right (row 1 left). slide/row-N.png is one seamless strip of a row's frames with the
   paper multiplied in (built by _unused/tools/build-bgd-gallery.sh; the two rows the tiger's gap
   ran through are closed up to twelve frames), repeated along a track that moves exactly one
   strip per loop, so the loop can't be seen. Every row moves at the same pace, so the shorter
   strips come round sooner. Placed as the whole wall used to be (1892 x 1140, covering the slide
   and centred): --bgd-u is one of its pixels, in container units, so the stage and the page show
   the same thing. Pure CSS, so it runs on the homepage stage too */
.bgd-slide .project-slide-media {
  container-type: size;
}

.bgd-slide-rows {
  --bgd-u: max(calc(100cqw / 1892), calc(100cqh / 1140));
  /* Seconds per frame of travel */
  --bgd-row-pace: 7s;
  position: absolute;
  inset: 0;
}

.bgd-slide-row {
  --bgd-strip: calc(var(--bgd-frames, 14) * 133 * var(--bgd-u));
  position: absolute;
  left: calc(-1 * var(--bgd-strip));
  width: calc(100% + 2 * var(--bgd-strip));
  top: calc(50% + (var(--bgd-y) - 570) * var(--bgd-u));
  height: calc(189 * var(--bgd-u));
  /* A copy starts where the row's first frame stood on the wall */
  background-image: var(--bgd-row);
  background-position: calc(50cqw - 931 * var(--bgd-u) + var(--bgd-strip)) 0;
  background-size: var(--bgd-strip) 100%;
  background-repeat: repeat-x;
  will-change: transform;
  animation: bgd-row-left calc(var(--bgd-frames, 14) * var(--bgd-row-pace)) linear infinite;
}

.bgd-slide-row:nth-child(even) {
  animation-name: bgd-row-right;
}

.bgd-slide-row:nth-child(1) { --bgd-y: 14;  --bgd-row: url("/projects/brashier-gets-drawn/slide/row-0.png"); }
.bgd-slide-row:nth-child(2) { --bgd-y: 203; --bgd-row: url("/projects/brashier-gets-drawn/slide/row-1.png"); }
.bgd-slide-row:nth-child(3) { --bgd-y: 392; --bgd-row: url("/projects/brashier-gets-drawn/slide/row-2.png"); --bgd-frames: 12; }
.bgd-slide-row:nth-child(4) { --bgd-y: 581; --bgd-row: url("/projects/brashier-gets-drawn/slide/row-3.png"); --bgd-frames: 12; }
.bgd-slide-row:nth-child(5) { --bgd-y: 770; --bgd-row: url("/projects/brashier-gets-drawn/slide/row-4.png"); }
.bgd-slide-row:nth-child(6) { --bgd-y: 959; --bgd-row: url("/projects/brashier-gets-drawn/slide/row-5.png"); }

@keyframes bgd-row-left {
  to { transform: translateX(calc(-1 * var(--bgd-strip))); }
}

@keyframes bgd-row-right {
  to { transform: translateX(var(--bgd-strip)); }
}

@media (prefers-reduced-motion: reduce) {
  .bgd-slide-row {
    animation: none;
  }
}

/* Paper glow: the logo is wider than the gap, so the frames it overlaps fade out behind it */
.bgd-slide .project-slide-tint {
  background: radial-gradient(ellipse 25% 26% at 50% 50%,
    rgba(247, 240, 225, 0.97) 55%,
    rgba(247, 240, 225, 0) 100%);
}

/* Softer, warmer shadow than the global default: it sits on light paper */
.bgd-slide .project-slide-logo {
  filter: drop-shadow(0 8px 18px rgba(23, 21, 18, 0.12));
}

/* ── The live logo (transitions.js slide animation "bgd") ──
   The same SVG as the static logo, inline over it: the school's paw-print B turns into the
   palette's paint, the palette swells in behind and the brush swings in, then GETS, DRAWN and
   2020 arrive. The enhancer moves the parts; this only places it and does the swap. The static
   logo stays under reduced motion, while the SVG loads, or if it never arrives. */
.bgd-slide-logo-anim {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  filter: drop-shadow(0 8px 18px rgba(23, 21, 18, 0.12));
}

/* Popping parts overshoot the logo's box: let them */
.bgd-slide-logo-anim > svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.bgd-slide.bgd-logo-live > .bgd-slide-logo-anim {
  opacity: 1;
}

/* The intro is the logo arriving: no fade, the static logo goes at once */
.bgd-slide.bgd-logo-intro > .bgd-slide-logo-anim {
  transition: none;
}

/* Hidden by opacity rather than visibility: the static logo carries the slide's only
   accessible name, and the animation over it is decorative */
.bgd-slide.bgd-logo-swapped > .project-slide-logo {
  opacity: 0;
}

/* Portrait and phones: the logo takes more of the width, so the glow widens with it */
@media (max-width: 480px), (orientation: portrait) {
  .bgd-slide .project-slide-tint {
    background: radial-gradient(ellipse 48% 16% at 50% 50%,
      rgba(247, 240, 225, 0.97) 55%,
      rgba(247, 240, 225, 0) 100%);
  }
}

/* The description band now follows a full-viewport slide: give it a little more room */
.bgd-desc {
  padding: 56px 40px;
}

@media (max-width: 480px) {
  .bgd-desc {
    padding: 36px 24px;
  }
}

/* The Ottaray slide + top of page */
/* ── The Ottaray: project slide (staging) ── */

/* Slide: must render without page scripts and outside main.ott-page,
   so no --ott-* variables here */
.project-slide.ott-slide {
  /* Brand navy while the art loads (and behind the homepage crossfade) */
  background: #201e53;
}

/* The business card art has a cream wave across its top. When a wide, short box crops the
   art vertically, keep that wave whole and let the plain navy at the bottom go instead. */
.ott-slide .project-slide-media > img {
  object-position: 50% 0%;
}

@media (max-width: 480px), (orientation: portrait) {
  /* Portrait crop: a centred slice is mostly empty navy, so shift right to where the
     two big oysters meet behind the logo */
  .ott-slide .project-slide-media > img {
    object-position: 58% 0%;
  }
}

/* A little above the slide's centre (Andrew's call, desktop and phone alike; it used to sit
   4% below, on the navy field's optical centre under the art's cream wave). The live logo
   (transitions.js) is placed on this box, so it moves with it */
.ott-slide .project-slide-logo {
  top: -2%;
}

/* Decorative layers: no lightbox, no image drag */
.ott-slide img {
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}

/* ── The live logo (transitions.js slide animation "ott") ──
   The Ottaray website's header intro, on the slide's stacked lockup: the letters drop in like
   ice cubes, bob and send up bubbles, then firm up; the oyster art gives way to the hero video
   under it; each letter strikes white with a neon flicker; the crest emerges and "The" and the
   tagline fade in. All of it is here, timed from the moment the enhancer adds .ott-logo-intro
   (the letter keyframes, their timings and the bubbles are the website's own). The static logo
   over the oyster art is the slide under reduced motion, while the SVG loads, or without it. */

/* Dims the video so the white logo reads over it (the art covers it until the intro lifts it) */
.ott-slide-wash {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 62% 58% at 50% 54%, rgba(20, 18, 64, 0.62) 0%, rgba(20, 18, 64, 0.4) 100%);
}

.ott-slide.ott-logo-intro .project-slide-media > img {
  animation: ott-art-out 0.8s ease-in-out 1.5s forwards;
}

.ott-slide.ott-logo-rest .project-slide-media > img {
  animation: ott-art-out 0.8s ease-in-out forwards;
}

@keyframes ott-art-out {
  to { opacity: 0; }
}

.ott-slide-logo-anim {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.35));
}

/* The letters fall from above the slide and the bubbles rise past the box: let them */
.ott-slide-logo-anim > svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.ott-slide.ott-logo-live > .ott-slide-logo-anim {
  opacity: 1;
}

/* The intro is the logo arriving: no fade, the static logo goes at once */
.ott-slide.ott-logo-intro > .ott-slide-logo-anim {
  transition: none;
}

/* Hidden by opacity: the static logo carries the slide's accessible name */
.ott-slide.ott-logo-swapped > .project-slide-logo {
  opacity: 0;
}

/* Off screen or in a hidden tab: everything holds where it is */
.ott-slide.ott-logo-held .project-slide-media > img,
.ott-slide.ott-logo-held .ott-slide-logo-anim * {
  animation-play-state: paused;
}

/* Over the video the logo is white: the letters by their neon copies, the rest by its fill */
.ott-slide-logo-anim [data-ott="crest"],
.ott-slide-logo-anim [data-ott="the"],
.ott-slide-logo-anim [data-ott="tagline"] {
  fill: #fff;
}

.ott-slide.ott-logo-rest .ott-neon,
.ott-slide.ott-logo-done .ott-neon {
  opacity: 1;
}

/* Finished: the intro's end state, held without animations, so moving the slide (the
   Back-to-Home handoff) can't start it again */
.ott-slide.ott-logo-done .project-slide-media > img {
  opacity: 0;
}

.ott-slide-logo-anim [data-ott="bubbles"] {
  opacity: 1;
}

.ott-slide-logo-anim .ott-bubble {
  opacity: 0;
}

/* The letters: drop from above the slide (--ott-drop, set by the enhancer), plunge past the
   surface, bob, and firm up at 2.5 s; then each one's white copy strikes on in turn */
.ott-slide.ott-logo-intro .ott-letter {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation:
    ott-logo-drop 0.55s cubic-bezier(0.55, 0, 1, 0.6) backwards,
    ott-logo-bob var(--bob, 1s) ease-in-out var(--n, 1) forwards,
    ott-logo-firm 0.18s cubic-bezier(0.2, 0.8, 0.25, 1.1) forwards;
  animation-delay: var(--d, 0s), calc(var(--d, 0s) + 0.55s), 2.5s;
}

.ott-slide.ott-logo-intro .ott-neon {
  animation: ott-logo-neon 0.75s linear var(--pd, 2.5s) forwards;
}

.ott-slide.ott-logo-intro .ott-bubble {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: ott-logo-bubble 1.2s ease-out var(--d, 1s) both;
}

.ott-slide.ott-logo-intro [data-ott="the"],
.ott-slide.ott-logo-intro [data-ott="tagline"] {
  opacity: 0;
  animation: ott-logo-fade 0.55s ease-out 3.5s forwards;
}

@keyframes ott-logo-drop {
  0%   { transform: translateY(var(--ott-drop, -300%)) rotate(var(--rot, 0deg)); }
  100% { transform: translateY(24%) rotate(calc(var(--rot, 0deg) * 0.4)); }
}

/* After the plunge: a slow, buoyant rise past the rest line, then a damped settle into a
   gentle float — ends in the same pose for every letter */
@keyframes ott-logo-bob {
  0%   { transform: translateY(24%) translateX(0) rotate(calc(var(--rot, 0deg) * 0.4)); }
  38%  { transform: translateY(-5%) translateX(1.5%) rotate(calc(var(--rot, 0deg) * -0.25)); }
  68%  { transform: translateY(11%) translateX(-1.5%) rotate(calc(var(--rot, 0deg) * 0.18)); }
  88%  { transform: translateY(4%) translateX(0.5%) rotate(calc(var(--rot, 0deg) * -0.08)); }
  100% { transform: translateY(8%) translateX(0) rotate(calc(var(--rot, 0deg) * 0.15)); }
}

@keyframes ott-logo-firm {
  from { transform: translateY(8%) rotate(calc(var(--rot, 0deg) * 0.15)); }
  to   { transform: translateY(0) rotate(0deg); }
}

@keyframes ott-logo-bubble {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.3); }
  20%  { opacity: 0.95; }
  100% { opacity: 0; transform: translate(var(--dx, 0px), -56px) scale(1); }
}

@keyframes ott-logo-fade {
  to { opacity: 1; }
}

/* Hard cuts (paired keyframes) read as a neon tube striking */
@keyframes ott-logo-neon {
  0%, 5%      { opacity: 0; }
  5.1%, 9%    { opacity: 1; }
  9.1%, 16%   { opacity: 0.1; }
  16.1%, 22%  { opacity: 1; }
  22.1%, 27%  { opacity: 0.3; }
  27.1%, 40%  { opacity: 1; }
  40.1%, 44%  { opacity: 0.55; }
  44.1%, 62%  { opacity: 1; }
  62.1%, 65%  { opacity: 0.75; }
  65.1%, 100% { opacity: 1; }
}

/* The crest emerges from 2.9 s: a line draws up its axis from the point, the shield opens out
   from that line, the mountain rises through the shield's floor (clipped to its own shape),
   the sun rises over the peak (clipped at the peak) and sends out a pulse */
.ott-slide.ott-logo-intro [data-ott="crest-line"] {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: ott-crest-line 0.7s cubic-bezier(0.65, 0, 0.35, 1) 2.9s forwards;
}

.ott-slide.ott-logo-intro [data-ott="shield"] {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: ott-crest-open 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 3.15s both;
}

.ott-slide.ott-logo-intro [data-ott="mountain"] {
  transform-box: fill-box;
  animation: ott-crest-rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) 3.55s both;
}

.ott-slide.ott-logo-intro [data-ott="sun"] {
  transform-box: fill-box;
  animation: ott-crest-sun 0.55s cubic-bezier(0.34, 1.4, 0.64, 1) 3.85s both;
}

.ott-slide.ott-logo-intro [data-ott="sun-pulse"] {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: ott-crest-pulse 0.8s ease-out 4.25s forwards;
}

@keyframes ott-crest-line {
  0%   { opacity: 1; transform: scaleY(0); }
  45%  { opacity: 1; transform: scaleY(1); }
  100% { opacity: 0; transform: scaleY(1); }
}

@keyframes ott-crest-open {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@keyframes ott-crest-rise {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

@keyframes ott-crest-sun {
  from { transform: translateY(150%); }
  to   { transform: translateY(0); }
}

@keyframes ott-crest-pulse {
  0%   { opacity: 0.9; transform: scale(1); }
  100% { opacity: 0; transform: scale(3.2); }
}

/* Page flow: the description's cream wave (moved from the old hero) now rises over the
   bottom edge of the full-screen slide, so the description needs to be a positioning
   context and a little more air above it */
.ott-slide + .ott-desc {
  position: relative;
  padding-top: 72px;
}

@media (max-width: 480px) {
  .ott-slide + .ott-desc {
    padding-top: 40px;
  }
}

/* Still Not Tired slide + top of page */
/* ── Still Not Tired: project slide ──
   Rendered on the page and in the homepage stage (without page scripts there), so nothing
   here is scoped under main.snt-page and no --snt-* variables are used on the slide. */

/* Olive grey from the photo while the layers load (and behind the homepage crossfade) */
.project-slide.snt-slide {
  background: #5d5f4d;
}

/* Decorative layers: no lightbox, no image drag */
.snt-slide img {
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}

/* All layers share one frame (2400x1594), so one object-position keeps them aligned.
   On wide, short slides crop mostly from the driveway at the bottom, keeping the eye
   creature at the top in frame */
.snt-slide .project-slide-media > img {
  object-position: 50% 20%;
}

/* The logo sits on the front model's face, the busiest part of the photo: a soft dark
   glow (instead of the global white wash) keeps its thin white lettering readable */
.snt-slide .project-slide-tint {
  background: radial-gradient(ellipse 20% 38% at 50% 50%, rgba(12, 10, 20, 0.6) 0%, rgba(12, 10, 20, 0.38) 52%, rgba(12, 10, 20, 0) 100%);
}

/* Once the storefront recording has taken over from the photo layers (see the markup), its white
   pages would leave the white logo on white: the glow is joined by an even dim, which comes up
   as the layers lift off */
.snt-slide .project-slide-tint::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(12, 10, 20, 0.32);
  opacity: 0;
}

.snt-slide.slide-video-revealed .project-slide-tint::before {
  opacity: 1;
  transition: opacity 0.6s ease;
}

/* Tall, thin-lettered lockup (about 3:4). The global cap is on WIDTH (30%), which a portrait
   logo never reaches, so on its own it was sized by the slide's height alone and on narrower
   or taller windows came out about twice the area of the wide logos. It gets a width cap of its
   own, so it scales with the slide as they do, and a height cap for short, wide windows */
.snt-slide .project-slide-logo {
  max-width: min(15.5%, 250px);
  max-height: 36%;
  filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.5)) drop-shadow(0 6px 18px rgba(0, 0, 0, 0.35));
}

@media (max-width: 480px) {
  .snt-slide .project-slide-logo {
    max-width: 44%;
  }
}

/* Portrait: the logo is sized by the slide's width, so the glow follows suit */
@media (orientation: portrait) {
  .snt-slide .project-slide-tint {
    background: radial-gradient(ellipse 34% 28% at 50% 50%, rgba(12, 10, 20, 0.6) 0%, rgba(12, 10, 20, 0.38) 52%, rgba(12, 10, 20, 0) 100%);
  }
}

@media (max-width: 480px) {
  .snt-slide .project-slide-tint {
    background: radial-gradient(ellipse 62% 32% at 50% 50%, rgba(12, 10, 20, 0.6) 0%, rgba(12, 10, 20, 0.38) 52%, rgba(12, 10, 20, 0) 100%);
  }
}

/* The live logo: transitions.js's slide-logo framework (data-slide-anim="snt") lays the
   storefront's Lottie animation (.snt-slide-eye, positioned on the static logo's box) over the
   logo and hides the static one underneath. It runs on the page AND in the homepage stage, so
   nothing here is scoped to either. The static logo is that animation's resting frame, and is
   what stays under reduced motion or if the animation can't load. */
.snt-slide-eye {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.5)) drop-shadow(0 6px 18px rgba(0, 0, 0, 0.35));
}

/* The 1920-unit comp square, placed so the logo artwork inside it (x 508-1410.7,
   y 361.3-1584.7) lands on the box */
.snt-slide-eye-anim {
  position: absolute;
  left: -56.278%;
  top: -29.537%;
  width: 212.703%;
  height: 156.948%;
}

.snt-slide-eye-anim svg {
  display: block;
}

.snt-slide.snt-eye-live > .snt-slide-eye {
  opacity: 1;
}

/* Hidden by opacity rather than visibility: the static logo carries the slide's only
   accessible name ("Still Not Tired"), and the animation over it is aria-hidden */
.snt-slide.snt-eye-swapped > .project-slide-logo {
  opacity: 0;
}

/* First appearance in the tab: the intro plays from an empty frame, so the overlay is there at
   once instead of fading up over the static logo — the intro IS the logo arriving */
.snt-slide.snt-eye-intro > .snt-slide-eye {
  opacity: 1;
  transition: none;
}

/* Top of the page below the slide (the band-rimmed arch over the slide's bottom edge and the
   description's spacing): .snt-intro and .snt-intro-edge in the built-out sections below */

/* ══════════════════════════════════════════
   Still Not Tired page, built-out sections (projects/still-not-tired.html; scoped under main.snt-full)
   ══════════════════════════════════════════ */

/* ══════════════════════════════════════════
   Still Not Tired page (projects/still-not-tired.html)
   Staging styles for the sections below the storefront hero.
   ══════════════════════════════════════════ */

@font-face {
  font-family: "StillNotTiredHand";
  src: url("/shared/fonts/StillNotTiredHand.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

.snt-full {
  --snt-ink: #141218;
  --snt-blue: #749cd1;
  --snt-pink: #f2757d;
  --snt-orange: #f89e55;
  --snt-yellow: #ffd76a;
  --snt-lime: #cada2a;
  --snt-gold: #fed969;
  --snt-night: #27216d;
  --snt-night-2: #4c4695;
  --snt-night-3: #7f7abb;
  --snt-ring: #5b53a8;
  --snt-ring-gold: #ffe600;
  --snt-tan: #e7d4c0;
  --snt-rust: #ce3901;
  --snt-asleep: #f26723;
  --snt-purple: #b400b4;
  --snt-cream: #f7f3ec;
  --snt-card: #dedede;
  --snt-hand: "StillNotTiredHand", "Futura", "Helvetica Neue", Helvetica, Arial, sans-serif;
  flex: none;
  overflow-x: clip;
  background: #000;
  color: #fff;
  font-family: "Futura", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.snt-full img {
  display: block;
}

.snt-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.snt-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ── Shared section scaffolding ── */

.snt-wrap {
  position: relative;
  z-index: 1;
  max-width: 1120px;
  margin: 0 auto;
}

.snt-sec {
  position: relative;
  padding: 130px 48px 130px;
}

.snt-edge {
  position: absolute;
  left: 0;
  width: 100%;
  display: block;
  pointer-events: none;
  z-index: 0;
}

.snt-edge-top {
  top: -1px;
  height: clamp(40px, 5.2vw, 84px);
}

.snt-edge-bottom {
  bottom: -1px;
  height: clamp(60px, 8vw, 130px);
}

.snt-head {
  text-align: center;
  margin-bottom: 22px;
}

.snt-kicker {
  font-family: var(--snt-hand);
  font-size: clamp(28px, 2.6vw, 40px);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: -2px;
}

.snt-title {
  font-family: var(--snt-hand);
  font-weight: 400;
  font-size: clamp(56px, 6.4vw, 100px);
  line-height: 0.92;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.snt-head-arc {
  display: block;
  width: 210px;
  height: 36px;
  margin: 10px auto 0;
}

.snt-lede {
  max-width: 760px;
  margin: 0 auto 64px;
  text-align: center;
  font-size: 17px;
  line-height: 1.75;
}

.snt-lede-sm {
  max-width: 620px;
  margin-bottom: 30px;
  font-size: 16px;
}

.snt-sub {
  font-family: var(--snt-hand);
  font-weight: 400;
  font-size: clamp(38px, 3.4vw, 50px);
  line-height: 0.95;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 14px;
}

.snt-sub-center {
  text-align: center;
}

.snt-paper {
  position: relative;
  background: #fff;
  padding: 16px 16px 10px;
  border-radius: 6px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06), 0 16px 36px rgba(20, 18, 24, 0.16);
  transform: rotate(-1.2deg);
}

.snt-paper img {
  width: 100%;
  height: auto;
}

.snt-paper figcaption {
  font-family: var(--snt-hand);
  font-size: 22px;
  line-height: 1;
  text-transform: uppercase;
  text-align: center;
  color: #555;
  margin-top: 10px;
}

.snt-paper-flat {
  transform: none;
}

.snt-paper-tilt {
  transform: rotate(1.4deg);
}

.snt-btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--snt-hand);
  font-size: 32px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 14px 30px 11px;
  border-radius: 18px;
  border: 3px solid #fff;
  background: #fff;
  color: #000;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.snt-btn:hover,
.snt-btn:focus-visible {
  background: #000;
  color: #fff;
  transform: translateY(-2px);
}

.snt-btn:focus-visible {
  outline: 3px solid var(--snt-yellow);
  outline-offset: 4px;
}

.snt-btn-dark {
  border-color: #000;
  background: #000;
  color: #fff;
}

.snt-btn-dark:hover,
.snt-btn-dark:focus-visible {
  background: #fff;
  color: #000;
}

/* ── Description ── */

.snt-intro {
  position: relative;
  padding: 64px 48px 120px;
  background: #000;
  text-align: center;
}

/* Black arch with a rim of the five bands, rising over the bottom of the slide (1px overlap
   so no hairline shows). It rises in once the page is built, so it doesn't pop in over the
   slide while the homepage grows the slide into place. */
.snt-full .snt-intro-edge {
  top: auto;
  bottom: calc(100% - 1px);
  height: clamp(48px, 6.6vw, 124px);
  animation: snt-edge-rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.35s both;
}

@keyframes snt-edge-rise {
  from { transform: translateY(100%); }
  to { transform: none; }
}

/* The storefront's own lettering of the tagline (brand/tagline.svg), not the font */
.snt-intro-tag {
  margin-bottom: 38px;
}

.snt-intro-tag img {
  width: min(820px, 100%);
  height: auto;
  margin: 0 auto;
}

.snt-intro-text {
  max-width: 830px;
  margin: 0 auto;
  font-size: 18px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.88);
}

.snt-intro-text strong {
  font-weight: 600;
  color: #fff;
}

.snt-chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 840px;
  margin: 34px auto 42px;
}

.snt-chips li {
  --c: var(--snt-blue);
  font-family: var(--snt-hand);
  font-size: 23px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Each chip jumps to its section */
.snt-chips a {
  display: block;
  padding: 10px 17px 7px;
  border-radius: 999px;
  border: 2px solid var(--c);
  color: #fff;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.snt-chips a:hover,
.snt-chips a:focus-visible {
  background: var(--c);
  color: #000;
  transform: translateY(-2px);
}

.snt-chips a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* Where a chip lands: below the phone's sticky bar, and no focus ring on the section itself */
.snt-full .snt-sec {
  scroll-margin-top: var(--phone-bar-h, 0px);
}

.snt-full .snt-sec:focus {
  outline: none;
}

.snt-chips li:nth-child(5n+2) { --c: var(--snt-pink); }
.snt-chips li:nth-child(5n+3) { --c: var(--snt-orange); }
.snt-chips li:nth-child(5n+4) { --c: var(--snt-yellow); }
.snt-chips li:nth-child(5n+5) { --c: var(--snt-lime); }

/* ── Identity ── */

.snt-sec-id {
  background: #fff;
  color: var(--snt-ink);
}

.snt-sec-id .snt-edge-top path {
  fill: #000;
}

.snt-id-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}

.snt-id-final {
  text-align: center;
}

.snt-id-final-card {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 5 / 6;
  padding: 40px;
  border-radius: 30px;
  background: #000;
  box-shadow: 0 16px 0 rgba(20, 18, 24, 0.12);
}

.snt-id-final-card img {
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
}

.snt-id-final figcaption,
.snt-lockup span,
.snt-sheet span,
.snt-gal figcaption,
.snt-motion figcaption,
.snt-phone-fig figcaption,
.snt-drop-photos figcaption {
  font-family: var(--snt-hand);
  font-size: 22px;
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-align: center;
  margin-top: 14px;
}

/* Clear of the card's 16px drop shadow */
.snt-id-final figcaption {
  margin-top: 32px;
}

.snt-lockups {
  list-style: none;
  display: grid;
  grid-template-columns: 1.25fr 0.8fr 1.25fr;
  gap: 22px;
  margin-top: 60px;
}

.snt-lockup {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 240px;
  padding: 34px 28px 18px;
  border-radius: 24px;
}

.snt-lockup img {
  flex: 1;
  width: 100%;
  max-height: 150px;
  object-fit: contain;
}

.snt-lockup span {
  margin-top: 0;
}

.snt-lockup-dark {
  background: #000;
  color: #fff;
}

.snt-lockup-light {
  background: #f3f1ec;
  color: var(--snt-ink);
}

.snt-palette {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
  margin-top: 110px;
}

/* No overflow clip: on hover the bands stretch up past the box (scaleY from the bottom), and a
   clip cut the top of the outer band off */
.snt-palette-eye {
  position: relative;
  aspect-ratio: 2 / 1;
}

.snt-palette-eye span {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  border-radius: 999px 999px 0 0;
  background: var(--c);
  border: 6px solid #fff;
  border-bottom: 0;
  transform-origin: 50% 100%;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.snt-palette-eye span:nth-child(2) { left: 9%; right: 9%; top: 18%; }
.snt-palette-eye span:nth-child(3) { left: 18%; right: 18%; top: 36%; }
.snt-palette-eye span:nth-child(4) { left: 27%; right: 27%; top: 54%; }
.snt-palette-eye span:nth-child(5) { left: 36%; right: 36%; top: 72%; }

.snt-palette-eye::after {
  content: "";
  position: absolute;
  left: 45%;
  right: 45%;
  top: 90%;
  bottom: 0;
  border-radius: 999px 999px 0 0;
  background: #000;
}

.snt-palette:hover .snt-palette-eye span {
  transform: scaleY(1.04);
}

.snt-palette-copy p {
  font-size: 17px;
  line-height: 1.75;
}

.snt-swatches {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 18px;
  margin-top: 26px;
}

.snt-swatches li {
  display: flex;
  align-items: center;
  gap: 12px;
}

.snt-swatch {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--c);
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.08);
}

.snt-swatch-hex {
  font-size: 14px;
  letter-spacing: 0.06em;
  color: #333;
}

.snt-type {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
  margin-top: 110px;
}

.snt-type-copy > p {
  font-size: 17px;
  line-height: 1.75;
  margin-bottom: 30px;
}

.snt-tester {
  position: relative;
  padding: 34px 34px 30px;
  border-radius: 30px;
  background: #000;
  color: #fff;
  overflow: hidden;
}

.snt-tester::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 10px;
  background: linear-gradient(90deg, var(--snt-blue) 0 20%, var(--snt-pink) 20% 40%, var(--snt-orange) 40% 60%, var(--snt-yellow) 60% 80%, var(--snt-lime) 80%);
}

.snt-tester-label {
  display: block;
  font-family: var(--snt-hand);
  font-size: 24px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--snt-yellow);
  margin-bottom: 10px;
}

.snt-tester-input {
  width: 100%;
  font: 16px "Futura", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #000;
  background: #fff;
  border: 0;
  border-radius: 12px;
  padding: 12px 14px;
}

.snt-tester-input:focus-visible {
  outline: 3px solid var(--snt-blue);
  outline-offset: 2px;
}

.snt-tester-out {
  font-family: var(--snt-hand);
  font-size: clamp(48px, 4.6vw, 70px);
  line-height: 1;
  min-height: 1.1em;
  margin: 26px 0 24px;
  overflow-wrap: anywhere;
}

.snt-tester-glyphs {
  font-family: var(--snt-hand);
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.55);
  border-top: 2px solid rgba(255, 255, 255, 0.14);
  padding-top: 18px;
  overflow-wrap: anywhere;
}

/* The font's two alphabets, each under its label: the capitals and the lowercase keys */
.snt-tester-set + .snt-tester-set {
  margin-top: 14px;
}

.snt-tester-key {
  display: block;
  font: 12px/1 "Futura", "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--snt-yellow);
  margin-bottom: 6px;
}

.snt-tester-eye {
  color: var(--snt-blue);
}

/* ── Characters ── */

.snt-sec-cast {
  background: var(--snt-night);
  color: #fff;
  padding-bottom: 210px;
}

.snt-sec-cast .snt-edge-top path {
  fill: #fff;
}

.snt-sec-cast .snt-band-2 { fill: var(--snt-night-2); }
.snt-sec-cast .snt-band-3 { fill: var(--snt-night-3); }
.snt-sec-cast .snt-band-4 { fill: #000; }

.snt-stars {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.snt-star {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  height: var(--s);
  fill: #fff;
  animation: snt-twinkle 3.4s ease-in-out var(--d) infinite;
}

@keyframes snt-twinkle {
  0%, 100% { opacity: 1; transform: scale(1) rotate(0deg); }
  50% { opacity: 0.35; transform: scale(0.72) rotate(12deg); }
}

/* The shop's Meet the Characters wheel, built from its own layers: the outer ring with the twelve
   heads, the zodiac ring and the sun. Picking a head spins it (--snt-spin, a turn per pick, set by
   the page script): ring and heads one way, zodiac the other, the sun swelling while it turns
   (.snt-spinning) and bouncing back after; each head turns against the ring to stay upright. */
.snt-cast {
  display: grid;
  grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}

.snt-wheel {
  --snt-spin: 0deg;
  --snt-turn: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  width: 100%;
  aspect-ratio: 1;
}

.snt-wheel::before {
  content: "";
  position: absolute;
  inset: 0.4%;
  border-radius: 50%;
  box-shadow: 0 16px 0 rgba(10, 6, 40, 0.35);
}

.snt-wheel-outer,
.snt-wheel-faces {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(var(--snt-spin));
  transition: var(--snt-turn);
}

.snt-wheel-inner,
.snt-wheel-sun {
  position: absolute;
  left: 50%;
  top: 50%;
  height: auto;
}

.snt-wheel-inner {
  width: 51%;
  transform: translate(-50%, -50%) rotate(calc(-1 * var(--snt-spin)));
  transition: var(--snt-turn);
}

.snt-wheel-sun {
  width: 30%;
  transform: translate(-50%, -50%) rotate(var(--snt-spin));
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.snt-spinning .snt-wheel-sun {
  transform: translate(-50%, -50%) rotate(var(--snt-spin)) scale(1.5);
  transition: var(--snt-turn);
}

.snt-wheel-faces {
  list-style: none;
}

.snt-wheel-faces li {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 15.5%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%) rotate(calc(-1 * var(--snt-spin)));
  transition: var(--snt-turn);
}

.snt-face {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.snt-face img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.snt-face:hover {
  transform: scale(1.1);
}

/* The shop's pick: an orange outline round the head */
.snt-face.snt-active {
  transform: scale(1.08);
  filter: drop-shadow(3px 0 0 #f16722) drop-shadow(-3px 0 0 #f16722) drop-shadow(0 3px 0 #f16722) drop-shadow(0 -3px 0 #f16722);
}

.snt-face:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

/* The profile, as the shop lays it out: portrait, title art and the bio in a grey card */
.snt-cast-info {
  min-height: 480px;
  display: flex;
  align-items: center;
}

.snt-char {
  display: grid;
  grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr);
  gap: 26px;
  align-items: center;
  width: 100%;
}

.snt-char[hidden] {
  display: none;
}

.snt-char.snt-in {
  animation: snt-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes snt-pop {
  from { opacity: 0; transform: translateY(14px) scale(0.92); }
  to { opacity: 1; transform: none; }
}

.snt-char-portrait {
  justify-self: center;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 460px;
  filter: drop-shadow(0 10px 0 rgba(10, 6, 40, 0.35));
}

.snt-char-name {
  margin-bottom: 18px;
}

.snt-char-name img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 150px;
  margin: 0 auto;
}

.snt-bio {
  position: relative;
  margin: 0;
  padding: 22px 24px 20px;
  border-radius: 24px;
  background: var(--snt-card);
  color: #111;
  font-family: var(--snt-hand);
  font-size: 19px;
  line-height: 1.28;
  letter-spacing: 0.03em;
  text-transform: lowercase;
}

.snt-bio::after {
  content: "";
  position: absolute;
  left: -14px;
  top: 34px;
  border: 12px solid transparent;
  border-right: 16px solid var(--snt-card);
  border-left: 0;
}

.snt-char-note {
  margin-top: 16px;
  font-size: 16px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.88);
}

/* From sketch to character: one character at a time, moodboard -> concept -> final */
.snt-dev {
  margin-top: 130px;
}

.snt-dev-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 30px;
}

.snt-dev-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 18px 4px 4px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  background: transparent;
  color: #fff;
  font-family: var(--snt-hand);
  font-size: 23px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.snt-dev-tab img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  pointer-events: none;
}

.snt-dev-tab span {
  padding-top: 3px;
}

.snt-dev-tab:hover {
  transform: translateY(-2px);
  border-color: #fff;
}

.snt-dev-tab.snt-active {
  background: var(--snt-yellow);
  border-color: var(--snt-yellow);
  color: #000;
}

.snt-dev-tab:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

.snt-dev-panel[hidden] {
  display: none;
}

.snt-dev-text {
  max-width: 680px;
  margin: 0 auto 36px;
  text-align: center;
  font-size: 17px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.9);
}

.snt-dev-steps {
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 48px;
}

.snt-dev-step {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  max-width: 420px;
}

.snt-dev-step.snt-dev-final {
  flex: 0 1 22%;
}

/* An arrow from each step to the next */
.snt-dev-step + .snt-dev-step::before {
  content: "";
  position: absolute;
  left: -32px;
  top: calc(50% - 22px);
  width: 14px;
  height: 14px;
  border-top: 4px solid var(--snt-yellow);
  border-right: 4px solid var(--snt-yellow);
  transform: rotate(45deg);
}

.snt-dev-frame {
  padding: 10px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 0 rgba(10, 6, 40, 0.35);
}

.snt-dev-frame img {
  width: 100%;
  height: auto;
  max-height: 400px;
  object-fit: contain;
}

.snt-dev-final .snt-dev-frame {
  padding: 0;
  background: none;
  box-shadow: none;
}

.snt-dev-final .snt-dev-frame img {
  width: auto;
  max-width: 100%;
  max-height: 420px;
  margin: 0 auto;
  filter: drop-shadow(0 10px 0 rgba(10, 6, 40, 0.35));
}

.snt-dev-step figcaption {
  font-family: var(--snt-hand);
  font-size: 22px;
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-align: center;
  margin-top: 22px;
}

/* ── The Wide Asleep Collection ── */

.snt-sec-drop {
  background: #000;
  color: #fff;
  padding-top: 70px;
}

/* The storefront's Wide Asleep showcase (its home page gallery), full-bleed at the top of the
   section: a black shelf with the collection's logo and its products on it, a rainbow glow rising
   behind them and its reflection in the shelf. Positions are the shop's, in % of the stage. The
   shop drives the glow, the reflection, the shelf and the products' shadow from scroll with a
   script; here they are a scroll-driven animation on the stage's own view timeline (below; not
   view(), which would take the nearest clipping box as its scroller), and simply in place where
   that isn't supported. */
.snt-drop-stage {
  position: relative;
  aspect-ratio: 1916 / 943;
  margin: -70px -48px 44px;
  overflow: clip;
  background: #000;
  view-timeline: --snt-stage;
}

.snt-stage-glow,
.snt-stage-reflect {
  position: absolute;
  inset: 0;
  clip-path: inset(0 0 28% 0);
}

.snt-stage-reflect {
  clip-path: inset(72% 0 0 0);
}

.snt-stage-glow img,
.snt-stage-reflect img {
  position: absolute;
  left: 50%;
  top: 82%;
  width: 175%;
  max-width: none;
  height: auto;
  transform: translate(-50%, -50%);
}

.snt-stage-reflect img {
  top: 44.7%;
}

.snt-stage-shelf {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 28.1%;
  background: linear-gradient(#2b2b2c, #000);
}

.snt-stage-shadow {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 28.1%;
  overflow: clip;
  z-index: 1;
}

.snt-stage-shadow img {
  position: absolute;
  right: 10.9%;
  top: 0.74%;
  width: 43.3%;
  height: auto;
  transform-origin: 50% 0;
}

.snt-stage-logo {
  position: absolute;
  left: 17.1%;
  top: 45.8%;
  width: 20.9%;
  z-index: 2;
  transform: translateY(-50%);
  animation: snt-stage-rock 4s ease-in-out infinite;
}

.snt-stage-logo img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.9));
}

@keyframes snt-stage-rock {
  0%, 100% { transform: translateY(-50%) rotate(0deg); }
  50% { transform: translateY(-50%) rotate(6deg); }
}

.snt-stage-products {
  position: absolute;
  right: 10.9%;
  top: 55.8%;
  width: 43.3%;
  height: auto;
  z-index: 2;
  transform: translateY(-50%);
}

@supports (animation-timeline: view()) {
  .snt-stage-glow img,
  .snt-stage-reflect img,
  .snt-stage-shelf,
  .snt-stage-shadow img {
    animation: linear both;
    animation-timeline: --snt-stage;
  }

  .snt-stage-glow img {
    animation-name: snt-stage-glow;
    animation-range: entry 0% cover 50%;
  }

  .snt-stage-reflect img {
    animation-name: snt-stage-reflect;
    animation-range: entry 0% cover 50%;
  }

  .snt-stage-shelf {
    animation-name: snt-stage-shelf;
    animation-range: cover 30% cover 50%;
  }

  .snt-stage-shadow img {
    animation-name: snt-stage-shadow;
    animation-range: cover 35% cover 55%;
  }

  @keyframes snt-stage-glow { from { translate: 0 30%; } }
  @keyframes snt-stage-reflect { from { translate: 0 -30%; } }
  @keyframes snt-stage-shelf { from { opacity: 0; } }
  @keyframes snt-stage-shadow { from { scale: 1 0; } }
}

.snt-drop-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 52px;
  align-items: center;
  margin-top: 40px;
  padding: 52px;
  border-radius: 34px;
}

.snt-drop-copy p {
  font-size: 17px;
  line-height: 1.75;
}

.snt-drop-art img {
  width: 100%;
  height: auto;
}

.snt-drop-kkr {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  background:
    radial-gradient(circle at 78% 26%, rgba(180, 0, 180, 0.38), transparent 52%),
    radial-gradient(circle at 12% 92%, rgba(94, 224, 110, 0.2), transparent 46%),
    #0e0b15;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.08);
}

.snt-drop-logo {
  width: min(360px, 100%);
  height: auto;
  margin: 0 0 22px -8px;
}

.snt-drop-kd {
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  background: var(--snt-tan);
  color: #3b1a0b;
}

.snt-drop-kd .snt-drop-copy {
  order: 2;
}

.snt-drop-kd .snt-drop-art img {
  border-radius: 18px;
}

.snt-drop-name {
  font-family: var(--snt-hand);
  font-weight: 400;
  font-size: clamp(42px, 3.8vw, 58px);
  line-height: 0.92;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 16px;
}

.snt-drop-kd .snt-drop-name {
  color: var(--snt-rust);
}

.snt-drop-hw {
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  background: var(--snt-asleep);
  color: #140800;
}

.snt-drop-photos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.snt-drop-photos figure {
  background: #fff;
  padding: 10px 10px 4px;
  border-radius: 8px;
  box-shadow: 0 14px 0 rgba(90, 30, 0, 0.3);
  transform: rotate(-2.2deg);
  transition: transform 0.3s ease;
}

.snt-drop-photos figure + figure {
  transform: rotate(2deg) translateY(18px);
}

.snt-drop-photos figure:hover {
  transform: rotate(0deg) translateY(-6px);
}

.snt-drop-photos img {
  width: 100%;
  height: auto;
  border-radius: 4px;
}

.snt-drop-photos figcaption {
  color: #111;
  font-size: 19px;
  margin: 8px 0 4px;
}

/* ── Stickers ── */

.snt-sec-stickers {
  background: var(--snt-purple);
  color: #fff;
}

.snt-sec-stickers .snt-edge-top {
  height: clamp(24px, 3vw, 44px);
}

.snt-sec-stickers .snt-edge-top path {
  fill: #000;
}

.snt-sheets {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  max-width: 980px;
  margin: 0 auto;
}

.snt-sheet {
  --r: -2.5deg;
  padding: 20px 20px 16px;
  border-radius: 20px;
  background: #fff;
  color: #111;
  box-shadow: 0 16px 0 rgba(60, 0, 70, 0.4);
  transform: rotate(var(--r));
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.snt-sheet:nth-child(2) { --r: 1.8deg; margin-top: 26px; }
.snt-sheet:nth-child(3) { --r: -1.4deg; }

.snt-sheet:hover {
  transform: rotate(0deg) translateY(-10px) scale(1.02);
}

.snt-sheet img {
  width: 100%;
  height: auto;
}

.snt-sheet span {
  display: block;
  margin-top: 12px;
}

.snt-diecut-title {
  margin-top: 100px;
}

.snt-diecut {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
  max-width: 980px;
  margin: 30px auto 0;
}

.snt-diecut-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  align-items: center;
}

.snt-diecut-list img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 10px 0 rgba(60, 0, 70, 0.35));
  transform: rotate(-6deg);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.snt-diecut-list li:nth-child(2) img { transform: rotate(5deg) translateY(-12px); }
.snt-diecut-list li:nth-child(3) img { transform: rotate(-2deg); }

.snt-diecut-list li:hover img {
  transform: rotate(0deg) scale(1.08) translateY(-8px);
}

.snt-diecut-photo img {
  width: 100%;
  height: auto;
  border-radius: 22px;
  box-shadow: 0 0 0 5px #fff, 0 16px 0 5px rgba(60, 0, 70, 0.35);
  transform: rotate(2deg);
}

/* ── Campaign ── */

.snt-sec-camp {
  padding-bottom: 110px;
  background: var(--snt-cream);
  color: var(--snt-ink);
}

.snt-sec-camp .snt-edge-top path {
  fill: var(--snt-purple);
}

.snt-camp {
  max-width: 760px;
  margin: 0 auto 120px;
}

.snt-camp-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 28px;
}

.snt-camp-tab {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 5px 18px 5px 5px;
  border-radius: 999px;
  border: 2px solid var(--snt-ink);
  background: #fff;
  color: var(--snt-ink);
  font-family: var(--snt-hand);
  font-size: 23px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.snt-camp-tab img {
  width: 40px;
  height: 40px;
  padding: 4px;
  border-radius: 50%;
  background: var(--snt-night);
  object-fit: contain;
  pointer-events: none;
}

.snt-camp-tab span {
  padding-top: 3px;
}

.snt-camp-tab:hover {
  transform: translateY(-2px);
}

.snt-camp-tab.snt-active {
  background: var(--snt-ink);
  color: #fff;
}

.snt-camp-tab:focus-visible {
  outline: 3px solid var(--snt-blue);
  outline-offset: 3px;
}

.snt-cmp {
  --snt-pos: 50%;
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 30px;
  background: #111;
  box-shadow: 0 0 0 5px var(--snt-ink), 0 20px 0 5px rgba(20, 18, 24, 0.14);
  user-select: none;
  -webkit-user-select: none;
  isolation: isolate;
}

.snt-cmp img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.snt-cmp.snt-loading img {
  opacity: 0.55;
}

.snt-cmp-before {
  position: absolute;
  inset: 0;
  clip-path: inset(0 calc(100% - var(--snt-pos)) 0 0);
}

.snt-cmp-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--snt-pos);
  width: 4px;
  margin-left: -2px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
  pointer-events: none;
  z-index: 2;
}

.snt-cmp-knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 58px;
  height: 58px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 4px var(--snt-blue), 0 0 0 8px var(--snt-pink), 0 0 0 12px var(--snt-yellow), 0 6px 18px 12px rgba(0, 0, 0, 0.25);
}

.snt-cmp-knob::before,
.snt-cmp-knob::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 11px;
  height: 11px;
  border: solid #111;
  border-width: 0 0 3px 3px;
}

.snt-cmp-knob::before {
  left: 13px;
  transform: translateY(-50%) rotate(45deg);
}

.snt-cmp-knob::after {
  right: 13px;
  transform: translateY(-50%) rotate(-135deg);
}

.snt-cmp:focus-within .snt-cmp-knob {
  box-shadow: 0 0 0 4px var(--snt-blue), 0 0 0 8px var(--snt-pink), 0 0 0 12px var(--snt-yellow), 0 0 0 16px #fff, 0 6px 18px 16px rgba(0, 0, 0, 0.3);
}

.snt-cmp-tag {
  position: absolute;
  bottom: 18px;
  z-index: 2;
  padding: 7px 13px 4px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  font-family: var(--snt-hand);
  font-size: 22px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  pointer-events: none;
}

.snt-cmp-tag-l { left: 18px; }
.snt-cmp-tag-r { right: 18px; }

.snt-cmp-range {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  touch-action: pan-y;
}

.snt-cmp-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 58px;
  height: 100vh;
}

.snt-camp-caption {
  margin-top: 30px;
  text-align: center;
  font-family: var(--snt-hand);
  font-size: 34px;
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.snt-gal {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) repeat(3, minmax(0, 1fr));
  gap: 26px 22px;
  align-items: start;
  margin-top: 28px;
}

.snt-gal-video {
  grid-row: span 2;
  align-self: center;
}

.snt-gal-item img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 18px;
  box-shadow: 0 0 0 3px var(--snt-ink);
  transition: transform 0.25s ease;
}

.snt-gal-item:hover img {
  transform: translateY(-4px) rotate(-1deg);
}

.snt-gal figcaption {
  font-size: 19px;
  margin-top: 12px;
}

.snt-phone {
  position: relative;
  padding: 11px;
  border-radius: 34px;
  background: #111;
  box-shadow: 0 16px 0 rgba(20, 18, 24, 0.14);
}

.snt-phone::before {
  content: "";
  position: absolute;
  top: 18px;
  left: 50%;
  z-index: 1;
  width: 26%;
  height: 7px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: #111;
}

.snt-phone video,
.snt-phone img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: 24px;
  background: #000;
}

.snt-phone-scroll img {
  object-position: 50% 0;
  transition: object-position 7s cubic-bezier(0.45, 0, 0.55, 1);
}

.snt-phone-scroll:hover img {
  object-position: 50% 100%;
}

/* ── Motion ── */

.snt-sec-motion {
  background: #000;
  color: #fff;
}

.snt-sec-motion .snt-edge-top path {
  fill: var(--snt-cream);
}

.snt-motion {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 70px;
  align-items: center;
  max-width: 980px;
  margin: 0 auto;
}

.snt-screen {
  overflow: hidden;
  border-radius: 30px;
  background: #000;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.16);
}

.snt-screen video {
  display: block;
  width: 100%;
  height: auto;
}

.snt-motion-main .snt-screen {
  padding: 4%;
}

.snt-motion-main .snt-screen video {
  aspect-ratio: 720 / 774;
}

.snt-motion-side {
  padding: 26px;
}

.snt-screen-round {
  border-radius: 34px;
  box-shadow: 0 0 0 5px var(--snt-lime), 0 0 0 10px var(--snt-yellow), 0 0 0 15px var(--snt-orange), 0 0 0 20px var(--snt-pink), 0 0 0 25px var(--snt-blue);
}

.snt-screen-round video {
  aspect-ratio: 640 / 538;
}

.snt-motion figcaption {
  color: rgba(255, 255, 255, 0.85);
  margin-top: 22px;
}

.snt-motion-side figcaption {
  margin-top: 46px;
}

/* ── The Shop ── */

.snt-sec-shop {
  padding-top: 0;
  background: #fff;
  color: var(--snt-ink);
}

.snt-shop-bar {
  position: relative;
  margin: 0 -48px 40px;
  background: #fff;
  line-height: 0;
}

.snt-shop-bar::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 3px;
  background: #000;
}

.snt-shop-swoosh {
  width: 100%;
  height: auto;
  pointer-events: none;
}

.snt-shop-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 52px minmax(0, 1.7fr);
  gap: 18px;
  align-items: center;
  margin-bottom: 90px;
}

.snt-shop-arrow {
  justify-self: center;
  width: 30px;
  height: 30px;
  border-top: 5px solid var(--snt-ink);
  border-right: 5px solid var(--snt-ink);
  border-radius: 3px;
  transform: rotate(45deg);
}

.snt-browser {
  overflow: hidden;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 0 0 3px var(--snt-ink), 0 16px 0 3px rgba(20, 18, 24, 0.1);
}

.snt-browser-bar {
  display: flex;
  gap: 7px;
  align-items: center;
  height: 30px;
  padding: 0 14px;
  background: var(--snt-ink);
}

.snt-browser-bar span {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--snt-pink);
}

.snt-browser-bar span:nth-child(2) { background: var(--snt-yellow); }
.snt-browser-bar span:nth-child(3) { background: var(--snt-lime); }

.snt-browser img {
  width: 100%;
  height: auto;
}

.snt-browser figcaption {
  padding: 12px 10px 9px;
  border-top: 3px solid var(--snt-ink);
  font-family: var(--snt-hand);
  font-size: 22px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-align: center;
}

.snt-shop-pages {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 0.62fr) minmax(0, 0.62fr);
  gap: 34px;
  align-items: end;
  margin-bottom: 110px;
}

.snt-social {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.snt-social img {
  width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 0 0 3px var(--snt-ink);
  transition: transform 0.25s ease;
}

.snt-social li:nth-child(odd) img { transform: rotate(-1.5deg); }
.snt-social li:nth-child(even) img { transform: rotate(1.5deg) translateY(10px); }

.snt-social li:hover img {
  transform: rotate(0deg) translateY(-4px);
}

.snt-outro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  margin-top: 120px;
}

.snt-outro-eye {
  width: 150px;
  height: auto;
  pointer-events: none;
  animation: snt-bob 3.6s ease-in-out infinite;
}

@keyframes snt-bob {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-10px) rotate(3deg); }
}

/* ── Responsive ── */

@media (max-width: 1280px) {
  .snt-cast {
    grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
    gap: 36px;
  }

  .snt-bio {
    font-size: 18px;
  }
}

@media (max-width: 1024px) {
  .snt-cast {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
  }

  .snt-wheel {
    max-width: 480px;
  }

  .snt-cast-info {
    min-height: 0;
    width: 100%;
    max-width: 640px;
  }

  .snt-drop-item,
  .snt-drop-kd,
  .snt-drop-hw {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    padding: 40px;
  }

  .snt-drop-kd .snt-drop-copy {
    order: 0;
  }

  .snt-drop-kkr .snt-drop-art {
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
  }

  .snt-shop-pages {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .snt-shop-meet {
    grid-column: 1 / -1;
  }

  /* Phone on its own row, then the six ads as two even rows of three */
  .snt-gal {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .snt-gal-video {
    grid-column: 1 / -1;
    grid-row: auto;
    justify-self: center;
    width: min(280px, 60%);
  }
}

@media (max-width: 720px) {
  .snt-sec {
    padding: 96px 28px 100px;
  }

  .snt-intro {
    padding: 48px 28px 90px;
  }

  .snt-drop-stage {
    margin: -96px -28px 36px;
  }

  /* The steps stack, the arrows pointing down */
  .snt-dev-steps {
    flex-direction: column;
    gap: 56px;
  }

  .snt-dev-step,
  .snt-dev-step.snt-dev-final {
    flex: none;
    width: 100%;
    max-width: 420px;
  }

  .snt-dev-step + .snt-dev-step::before {
    left: calc(50% - 9px);
    top: -40px;
    transform: rotate(135deg);
  }

  .snt-id-grid,
  .snt-palette,
  .snt-type,
  .snt-motion {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  .snt-palette,
  .snt-type {
    margin-top: 80px;
  }

  .snt-id-final-card {
    aspect-ratio: auto;
    height: 360px;
  }

  .snt-lockups {
    grid-template-columns: minmax(0, 1fr);
  }

  .snt-lockup {
    min-height: 190px;
  }

  .snt-sheets {
    grid-template-columns: minmax(0, 1fr);
    max-width: 340px;
  }

  .snt-sheet:nth-child(2) {
    margin-top: 0;
  }

  .snt-diecut {
    grid-template-columns: minmax(0, 1fr);
    max-width: 420px;
  }

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

  .snt-gal-video {
    grid-column: 1 / -1;
    grid-row: auto;
    justify-self: center;
    width: min(260px, 70%);
  }

  .snt-shop-flow {
    grid-template-columns: minmax(0, 1fr);
  }

  .snt-shop-arrow {
    transform: rotate(135deg);
  }

  .snt-shop-bar {
    margin: 0 -28px 30px;
  }

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

  .snt-motion-side {
    max-width: 320px;
    justify-self: center;
  }
}

@media (max-width: 480px) {
  .snt-sec {
    padding: 80px 18px 84px;
  }

  .snt-intro {
    padding: 36px 18px 80px;
  }

  .snt-intro-text,
  .snt-lede,
  .snt-palette-copy p,
  .snt-type-copy > p,
  .snt-dev-text,
  .snt-drop-copy p {
    font-size: 16px;
    line-height: 1.7;
  }

  .snt-lede {
    margin-bottom: 44px;
  }

  .snt-chips li {
    font-size: 20px;
  }

  .snt-btn {
    font-size: 28px;
  }

  .snt-head-arc {
    width: 170px;
    height: 30px;
  }

  .snt-paper {
    padding: 10px 10px 8px;
  }

  .snt-id-final-card {
    height: 300px;
    padding: 28px;
  }

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

  .snt-tester {
    padding: 28px 22px 24px;
  }

  .snt-tester-glyphs {
    font-size: 24px;
  }

  .snt-sec-cast {
    padding-bottom: 150px;
  }

  .snt-drop-stage {
    margin: -80px -18px 30px;
  }

  /* Portrait over its title and bio */
  .snt-char {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
  }

  .snt-char-portrait {
    max-height: 320px;
  }

  .snt-char-name img {
    max-height: 120px;
  }

  .snt-bio {
    padding: 20px 20px 18px;
    font-size: 19px;
    border-radius: 22px;
  }

  .snt-bio::after {
    display: none;
  }

  .snt-dev {
    margin-top: 90px;
  }

  .snt-dev-tab {
    font-size: 20px;
    padding-right: 14px;
  }

  .snt-dev-tab img {
    width: 34px;
    height: 34px;
  }

  .snt-drop-item,
  .snt-drop-kd,
  .snt-drop-hw {
    padding: 26px 20px;
    border-radius: 26px;
  }

  .snt-drop-photos {
    gap: 14px;
  }

  .snt-camp-tab {
    font-size: 20px;
    padding-right: 14px;
  }

  .snt-camp-tab img {
    width: 34px;
    height: 34px;
  }

  .snt-cmp {
    border-radius: 22px;
  }

  .snt-cmp-knob {
    width: 46px;
    height: 46px;
  }

  .snt-cmp-knob::before { left: 9px; }
  .snt-cmp-knob::after { right: 9px; }

  .snt-cmp-tag {
    font-size: 18px;
    bottom: 12px;
  }

  .snt-cmp-tag-l { left: 12px; }
  .snt-cmp-tag-r { right: 12px; }

  .snt-camp-caption {
    font-size: 28px;
  }

  .snt-gal {
    gap: 20px 14px;
  }

  .snt-gal figcaption {
    font-size: 17px;
  }

  .snt-shop-bar {
    margin: 0 -18px 24px;
  }

  .snt-shop-pages {
    gap: 22px;
  }

  .snt-social {
    gap: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .snt-star,
  .snt-outro-eye,
  .snt-char.snt-in,
  .snt-stage-logo,
  .snt-stage-glow img,
  .snt-stage-reflect img,
  .snt-stage-shelf,
  .snt-stage-shadow img,
  .snt-full .snt-intro-edge {
    animation: none;
  }
}

/* ══════════════════════════════════════════
   Additional work pages (not in the sidebar reel)
   ══════════════════════════════════════════ */

/* ── Logo Design (projects/logo-design.html) ── */

/* ── Logo Design (ld-) — staging, merge into shared/styles.css ── */

.ld-page {
  max-width: none;
  padding: 0;
  flex: none;
  overflow-x: clip;
  background: #101013;
  color: #e7e4dd;
  font-family: "Futura", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.ld-page img {
  display: block;
}

/* ── Slide: the wall of marks with an ink label ── */

.project-slide.ld-slide {
  background: #f2efe8;
}

.ld-slide .project-slide-media > img {
  object-position: center;
}

.ld-slide .project-slide-tint {
  background:
    radial-gradient(64% 52% at 50% 50%, rgba(242, 239, 232, 0.72) 0%, rgba(242, 239, 232, 0.3) 62%, rgba(242, 239, 232, 0) 100%),
    linear-gradient(rgba(242, 239, 232, 0.3), rgba(242, 239, 232, 0.3));
}

.ld-slide-label {
  position: relative;
  z-index: 2;
  background: #101013;
  color: #fff;
  text-align: center;
  padding: clamp(26px, 3.4vw, 46px) clamp(30px, 6vw, 92px) clamp(24px, 3vw, 40px);
  max-width: min(86%, 780px);
  box-shadow: 0 26px 60px rgba(28, 24, 16, 0.32);
}

.ld-slide-title {
  margin: 0;
  font-family: "Futura", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 800;
  font-size: clamp(2.1rem, 6.4vw, 5.1rem);
  line-height: 0.96;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-indent: 0.09em;
}

.ld-slide-rule {
  display: block;
  width: clamp(48px, 7vw, 86px);
  height: 2px;
  margin: clamp(16px, 2vw, 24px) auto clamp(13px, 1.6vw, 18px);
  background: #c8bfa8;
}

.ld-slide-sub {
  margin: 0;
  font-size: clamp(0.6rem, 1.05vw, 0.78rem);
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #b3ada0;
  text-indent: 0.3em;
}

/* ── Shared layout ── */

.ld-inner {
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
}

.ld-inner-narrow {
  max-width: 880px;
  margin-left: 0;
}

.ld-slide-break {
  display: block;
  height: 0;
  overflow: hidden;
}

.ld-section {
  padding: clamp(58px, 7vw, 116px) clamp(20px, 5vw, 76px);
}

.ld-section-alt {
  background: #17171b;
}

.ld-title {
  margin: 0;
  font-weight: 800;
  font-size: clamp(1.35rem, 2.5vw, 2.1rem);
  letter-spacing: 0.055em;
  line-height: 1.12;
  color: #fff;
}

.ld-title::after {
  content: "";
  display: block;
  width: 54px;
  height: 2px;
  margin-top: clamp(14px, 1.6vw, 20px);
  background: #c8bfa8;
}

.ld-lede {
  margin: clamp(16px, 1.8vw, 24px) 0 0;
  max-width: 62ch;
  font-size: clamp(0.94rem, 1.1vw, 1.05rem);
  font-weight: 400;
  line-height: 1.7;
  color: #a9a49a;
}

/* ── Description ── */

.ld-desc {
  padding: clamp(54px, 6.5vw, 104px) clamp(20px, 5vw, 76px) clamp(34px, 4vw, 56px);
}

.ld-desc-text {
  margin: 0;
  font-size: clamp(1rem, 1.35vw, 1.22rem);
  font-weight: 400;
  line-height: 1.78;
  color: #ddd9d1;
}

.ld-tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin: clamp(22px, 2.6vw, 34px) 0 0;
  padding: 0;
}

.ld-tags li {
  padding: 7px 15px 6px;
  border: 1px solid #38373c;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: #b8b2a6;
}

/* ── How a mark gets made ── */

.ld-steps {
  list-style: none;
  margin: clamp(30px, 4vw, 54px) 0 0;
  padding: 0;
  display: grid;
  gap: clamp(26px, 3vw, 44px);
  grid-template-columns: repeat(3, 1fr);
}

.ld-step {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.ld-step-art {
  background: #fff;
  border: 1px solid #2b2a2e;
  padding: 20px;
  height: clamp(228px, 21vw, 310px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.ld-step-art img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.ld-step-art-split img {
  max-width: 47%;
  max-height: 62%;
}

.ld-step-art-split img:last-child {
  background: #101013;
  padding: 10px;
}

.ld-step-num {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  color: #8d8778;
}

.ld-step-title {
  margin: 8px 0 10px;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
}

.ld-step-copy p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.68;
  color: #a9a49a;
}

/* ── The grids ── */

.ld-grid {
  list-style: none;
  margin: clamp(30px, 4vw, 52px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(206px, 1fr));
  gap: clamp(16px, 1.6vw, 24px);
}

.ld-tile:has(.ld-card[open]) {
  grid-column: 1 / -1;
}

.ld-card {
  background: #fbfaf7;
  color: #17161a;
  border: 1px solid #2c2b30;
  height: 100%;
}

.ld-card[open] {
  display: grid;
  grid-template-columns: minmax(200px, 268px) 1fr;
  align-items: start;
  border-color: #c8bfa8;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.36);
}

.ld-card-head {
  display: block;
  position: relative;
  cursor: pointer;
  list-style: none;
  padding: 0 0 16px;
  transition: background 180ms ease;
}

.ld-card-head::-webkit-details-marker {
  display: none;
}

.ld-card-head::marker {
  content: "";
}

.ld-card-head:hover {
  background: #f1eee7;
}

.ld-card-head:focus-visible {
  outline: 3px solid #c8bfa8;
  outline-offset: 3px;
}

.ld-card-art {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  padding: 12% 9%;
  background: #fff;
  border-bottom: 1px solid #e6e2d8;
}

.ld-card-art img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  /* the tile art is a toggle target, not gallery content */
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.ld-card-meta {
  display: block;
  padding: 15px 44px 0 17px;
}

.ld-card-name {
  display: block;
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.25;
  color: #17161a;
}

.ld-card-kind {
  display: block;
  margin-top: 5px;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #7d786e;
}

.ld-card-cue {
  position: absolute;
  right: 15px;
  bottom: 17px;
  width: 22px;
  height: 22px;
  border: 1px solid #b9b2a2;
  border-radius: 50%;
}

.ld-card-cue::before,
.ld-card-cue::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9px;
  height: 1.6px;
  background: #4a463f;
  transform: translate(-50%, -50%);
  transition: transform 200ms ease, opacity 200ms ease;
}

.ld-card-cue::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.ld-card[open] .ld-card-cue::after {
  transform: translate(-50%, -50%) rotate(180deg);
  opacity: 0;
}

.ld-card-body {
  padding: clamp(20px, 2.2vw, 30px) clamp(20px, 2.2vw, 30px) clamp(22px, 2.4vw, 32px);
  border-left: 1px solid #e6e2d8;
}

.ld-card-note {
  margin: 0;
  max-width: 62ch;
  font-size: 0.95rem;
  line-height: 1.7;
  color: #3b3831;
}

.ld-figs {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: clamp(14px, 1.4vw, 22px);
  margin-top: clamp(18px, 2vw, 26px);
}

.ld-fig {
  margin: 0;
  flex: 0 1 auto;
  max-width: 100%;
}

.ld-fig-art {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid #e6e2d8;
  min-height: 120px;
}

.ld-fig-art-ink {
  background: #16161a;
  border-color: #16161a;
}

.ld-fig-art-flush {
  padding: 0;
}

.ld-fig-art img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 230px;
  object-fit: contain;
  cursor: zoom-in;
}

.ld-fig-wide .ld-fig-art img {
  max-height: 200px;
}

.ld-fig-tall .ld-fig-art img {
  max-height: 380px;
}

.ld-fig-narrow .ld-fig-art img {
  max-height: 150px;
}

.ld-fig figcaption {
  margin-top: 9px;
  max-width: 34ch;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.45;
  color: #77726a;
}

.ld-card-link {
  display: inline-block;
  margin-top: clamp(20px, 2.2vw, 28px);
  padding: 10px 19px 9px;
  border: 1px solid #2c2b30;
  color: #17161a;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 180ms ease, color 180ms ease;
}

.ld-card-link:hover,
.ld-card-link:focus-visible {
  background: #17161a;
  color: #fbfaf7;
}

/* ── More marks ── */

.ld-more-grid {
  list-style: none;
  margin: clamp(30px, 4vw, 52px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
  gap: clamp(18px, 2vw, 30px);
}

.ld-more {
  display: flex;
  flex-direction: column;
}

.ld-more-art {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  /* without this the flex item's automatic minimum size lets a tall mark stretch the
     card past its 4:3 box once the image loads, and the row goes ragged */
  min-height: 0;
  padding: 11% 9%;
  background: #fff;
  border: 1px solid #2c2b30;
}

.ld-more-art img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  cursor: zoom-in;
}

.ld-more-name {
  display: block;
  margin-top: 13px;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #efece5;
}

.ld-more-note {
  display: block;
  margin-top: 5px;
  font-size: 0.78rem;
  line-height: 1.5;
  color: #918c83;
}

/* ── Breakpoints ── */

@media (max-width: 1100px) {
  .ld-steps {
    grid-template-columns: 1fr;
    max-width: 720px;
  }

  .ld-step {
    flex-direction: row;
    align-items: center;
    gap: 26px;
  }

  .ld-step-art {
    flex: 0 0 42%;
    height: clamp(190px, 26vw, 250px);
  }
}

@media (max-width: 860px) {
  .ld-card[open] {
    grid-template-columns: 1fr;
  }

  .ld-card-body {
    border-left: none;
    border-top: 1px solid #e6e2d8;
  }

  .ld-card[open] .ld-card-art {
    aspect-ratio: 16 / 7;
    padding: 5% 10%;
  }
}

@media (max-width: 620px) {
  .ld-step {
    flex-direction: column;
    align-items: stretch;
  }

  .ld-step-art {
    flex: 0 0 auto;
    height: 240px;
  }
}

@media (max-width: 480px) {
  .ld-slide-label {
    max-width: 88%;
    padding: 26px 24px 22px;
  }

  .ld-slide-title {
    font-size: 2.25rem;
    letter-spacing: 0.06em;
    text-indent: 0.06em;
  }

  .ld-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
  }

  .ld-card-meta {
    padding: 12px 34px 0 12px;
  }

  .ld-card-name {
    font-size: 0.86rem;
  }

  .ld-card-kind {
    font-size: 0.6rem;
    letter-spacing: 0.1em;
  }

  .ld-card-cue {
    right: 10px;
    bottom: 12px;
    width: 18px;
    height: 18px;
  }

  .ld-fig {
    flex: 1 1 100%;
  }

  .ld-fig-tall .ld-fig-art img,
  .ld-fig-wide .ld-fig-art img,
  .ld-fig-art img {
    max-height: 210px;
  }

  .ld-more-grid {
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
    gap: 14px;
  }

  .ld-more-name {
    font-size: 0.78rem;
  }

  .ld-more-note {
    font-size: 0.72rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ld-card-head,
  .ld-card-cue::before,
  .ld-card-cue::after,
  .ld-card-link {
    transition: none;
  }
}

/* ── Caricatures (projects/caricatures.html) ── */

/* ══════════════════════════════════════════
   Caricatures — staging CSS (merge into shared/styles.css)
   Prefix: car-   Page: /projects/caricatures.html
   ══════════════════════════════════════════ */

.car-page,
.car-slide {
  --car-ink: #15120f;
  --car-ink-2: #211c17;
  --car-black: #000;
  --car-paper: #f4eee3;
  --car-paper-2: #eae1d2;
  --car-card: #fffdf9;
  --car-rule: #cdc0aa;
  --car-rule-soft: #ded3c0;
  --car-muted: #766a59;
  --car-muted-light: #a99d8b;
  --car-accent: #c8452c;
  --car-accent-soft: #e0785f;
}

.car-page {
  max-width: none;
  padding: 0;
  flex: none;
  overflow-x: clip;
  background: var(--car-paper);
  color: var(--car-ink);
}

/* ── Slide ─────────────────────────────────────────────────────────── */

.project-slide.car-slide {
  background: #0b0908;
}

/* The wall of faces is inverted line art: white lines on black */
.car-slide .project-slide-media > img {
  object-position: 50% 42%;
}

/* Vignette so the title plate reads over the middle of the wall */
.car-slide .project-slide-tint {
  background:
    radial-gradient(ellipse 78% 62% at 50% 48%, rgba(8, 6, 5, 0.74) 0%, rgba(8, 6, 5, 0.5) 46%, rgba(8, 6, 5, 0.1) 82%, rgba(8, 6, 5, 0) 100%),
    linear-gradient(rgba(8, 6, 5, 0.34), rgba(8, 6, 5, 0.1) 32%, rgba(8, 6, 5, 0.14) 68%, rgba(8, 6, 5, 0.5));
}

.car-slide-plate {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 0 24px;
  max-width: 1100px;
  color: #fff;
}

.car-slide-kicker {
  margin: 0;
  font-size: clamp(10px, 1.1vw, 13px);
  font-weight: 600;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.74);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.8);
}

.car-slide-title {
  margin: clamp(14px, 2vw, 22px) 0 0;
  font-family: "Futura", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 800;
  font-size: clamp(38px, 8.6vw, 146px);
  line-height: 0.92;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-shadow: 0 10px 40px rgba(0, 0, 0, 0.85);
}

.car-slide-line {
  width: clamp(120px, 22vw, 300px);
  height: 2px;
  margin: clamp(18px, 2.4vw, 30px) auto clamp(16px, 2vw, 24px);
  background: var(--car-accent);
}

.car-slide-sub {
  margin: 0;
  font-size: clamp(13px, 1.5vw, 18px);
  line-height: 1.55;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.82);
}

/* ── Description ───────────────────────────────────────────────────── */

.car-desc {
  background: var(--car-paper);
  padding: clamp(56px, 7vw, 92px) 40px clamp(48px, 6vw, 76px);
}

.car-desc-inner {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.car-desc-text {
  margin: 0;
  font-size: clamp(15px, 1.35vw, 19px);
  line-height: 1.78;
  color: #2c2620;
  text-wrap: balance;
}

.car-desc-text strong {
  font-weight: 700;
}

.car-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}

.car-tags li {
  padding: 7px 15px 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--car-muted);
  border: 1px solid var(--car-rule);
  border-radius: 999px;
}

/* ── Sections ──────────────────────────────────────────────────────── */

.car-section {
  padding: clamp(60px, 7vw, 104px) 40px clamp(68px, 8vw, 116px);
}

.car-inner {
  max-width: 1300px;
  margin: 0 auto;
}

.car-inner-narrow {
  max-width: 1040px;
}

.car-section-paper { background: var(--car-paper); }
.car-section-paper-2 { background: var(--car-paper-2); }

.car-section-ink {
  background: var(--car-ink);
  color: #efe7da;
}

.car-section-ink-2 {
  background: var(--car-ink-2);
  color: #efe7da;
}

.car-section-black {
  background: var(--car-black);
  color: #efe7da;
}

.car-eyebrow {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--car-accent);
}

.car-section-ink .car-eyebrow,
.car-section-ink-2 .car-eyebrow,
.car-section-black .car-eyebrow {
  color: var(--car-accent-soft);
}

.car-title {
  margin: 12px 0 0;
  font-family: "Futura", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 800;
  font-size: clamp(28px, 4.2vw, 52px);
  line-height: 1.02;
  letter-spacing: 0.015em;
  text-transform: uppercase;
}

.car-rule {
  height: 2px;
  margin: clamp(20px, 2.4vw, 30px) 0 clamp(22px, 2.6vw, 32px);
  background: currentColor;
  opacity: 0.16;
}

.car-lede {
  max-width: 740px;
  margin: 0;
  font-size: clamp(14px, 1.15vw, 17px);
  line-height: 1.72;
  opacity: 0.86;
}

.car-lede + .car-lede {
  margin-top: 16px;
}

/* ── Framed plate (the gallery card) ───────────────────────────────── */

.car-plate {
  margin: 0;
  background: var(--car-card);
  border: 1px solid var(--car-rule);
  padding: 16px 16px 0;
  box-shadow: 0 12px 30px rgba(21, 18, 15, 0.09);
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.car-plate img {
  display: block;
  width: 100%;
  height: auto;
}

.car-plate figcaption {
  margin-top: 14px;
  padding: 12px 2px 14px;
  border-top: 1px solid var(--car-rule-soft);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--car-muted);
}

.car-plate:hover {
  transform: translateY(-5px);
  border-color: var(--car-accent);
  box-shadow: 0 20px 44px rgba(21, 18, 15, 0.17);
}

.car-section-ink .car-plate,
.car-section-ink-2 .car-plate,
.car-section-black .car-plate {
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}

/* ── Gallery (masonry columns) ─────────────────────────────────────── */

.car-gallery {
  column-count: 4;
  column-gap: 26px;
}

.car-gallery .car-plate {
  break-inside: avoid;
  margin-bottom: 26px;
}

/* ── Line studies ──────────────────────────────────────────────────── */

.car-lines {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
}

.car-line-cell {
  margin: 0;
  background: var(--car-card);
  border: 1px solid var(--car-rule);
  padding: 12px;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.car-line-cell img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.car-line-cell:hover {
  transform: translateY(-4px);
  border-color: var(--car-accent);
  box-shadow: 0 16px 34px rgba(21, 18, 15, 0.16);
}

/* ── Two-step process strip ────────────────────────────────────────── */

.car-steps {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(18px, 2.6vw, 38px);
}

.car-step-arrow {
  width: 26px;
  height: 26px;
  border-top: 3px solid var(--car-accent);
  border-right: 3px solid var(--car-accent);
  transform: rotate(45deg);
}

/* ── Working pages ─────────────────────────────────────────────────── */

.car-sheets {
  display: grid;
  grid-template-columns: minmax(0, 1.32fr) minmax(0, 0.68fr);
  gap: clamp(20px, 2.4vw, 34px);
  align-items: center;
}

/* ── Pairs & groups ────────────────────────────────────────────────── */

.car-feature {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(24px, 3.2vw, 52px);
  align-items: center;
  margin-bottom: clamp(28px, 3.4vw, 46px);
}

.car-feature-copy .car-subtitle {
  margin: 0 0 14px;
  font-size: clamp(19px, 1.8vw, 25px);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.car-trio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.2vw, 30px);
  align-items: start;
}

/* ── Beyond the likeness ───────────────────────────────────────────── */

.car-mixed {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(18px, 2.2vw, 30px);
  align-items: start;
}

.car-span-2 { grid-column: span 2; }
.car-span-3 { grid-column: span 3; }

/* ── Closing ───────────────────────────────────────────────────────── */

.car-closing {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}

.car-closing-art {
  margin: 0;
}

.car-closing-art img {
  display: block;
  width: 100%;
  height: auto;
}

.car-more {
  display: inline-block;
  margin-top: 28px;
  padding: 13px 28px 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #15120f;
  background: #efe7da;
  border: 2px solid #efe7da;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.car-more:hover {
  background: var(--car-accent);
  border-color: var(--car-accent);
  color: #fff;
}

/* ── Responsive ────────────────────────────────────────────────────── */

@media (max-width: 1440px) {
  .car-gallery { column-count: 3; }
}

@media (max-width: 1024px) {
  .car-sheets,
  .car-feature,
  .car-closing {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .car-trio { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .car-span-2 { grid-column: span 3; }
  .car-lines { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .car-gallery { column-count: 2; }
}

@media (max-width: 720px) {
  .car-gallery { column-count: 2; }

  .car-steps {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
  }

  .car-step-arrow { transform: rotate(135deg); }
}

@media (max-width: 480px) {
  .car-section { padding: 52px 20px 58px; }
  .car-desc { padding: 46px 20px 40px; }
  .car-gallery { column-count: 1; column-gap: 0; }
  .car-lines { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .car-trio { grid-template-columns: minmax(0, 1fr); }
  .car-mixed { grid-template-columns: minmax(0, 1fr); }
  .car-span-2,
  .car-span-3 { grid-column: span 1; }
  .car-slide-plate { padding: 0 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .car-plate,
  .car-line-cell,
  .car-more {
    transition: none;
  }

  .car-plate:hover,
  .car-line-cell:hover {
    transform: none;
  }
}

/* ── Character Design (projects/character-design.html) ── */

/* ══════════════════════════════════════════════════════════════════
   Character Design (cd-) — staging CSS, to be merged into shared/styles.css.
   Slide rules are deliberately NOT scoped under main.cd-page: the homepage
   stage clones .cd-slide on its own, without page scripts.
   ══════════════════════════════════════════════════════════════════ */

main.cd-page {
  --cd-paper: #f1ebdf;
  --cd-paper-2: #e8e0d0;
  --cd-paper-3: #ded3bf;
  --cd-ink: #221f1b;
  --cd-ink-2: #5d564c;
  --cd-ink-3: #8b8274;
  --cd-line: #cabfaa;
  --cd-red: #b8402f;
  --cd-dark: #1d1a17;
  --cd-dark-2: #2b2723;
  max-width: none;
  padding: 0;
  flex: none;
  overflow-x: clip;
  background: var(--cd-paper);
  color: var(--cd-ink);
  font-family: "Futura", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

main.cd-page img {
  display: block;
}

/* ── Slide ─────────────────────────────────────────────────────── */

.project-slide.cd-slide {
  /* the slide carries its own colours: on the homepage stage it is cloned out of
     main.cd-page, where the page variables do not exist */
  --cd-slide-ink: #221f1b;
  --cd-slide-ink-2: #5d564c;
  --cd-slide-red: #b8402f;
  align-items: flex-start;
  background:
    repeating-linear-gradient(0deg, rgba(34, 31, 27, 0.04) 0 1px, transparent 1px 38px),
    repeating-linear-gradient(90deg, rgba(34, 31, 27, 0.04) 0 1px, transparent 1px 38px),
    radial-gradient(125% 95% at 50% 34%, #f8f3e9 0%, #efe6d5 55%, #dccfb8 100%);
}

/* the ground the line-up stands on */
.cd-slide::before {
  content: "";
  position: absolute;
  left: 5%;
  right: 5%;
  bottom: clamp(18px, 4.4vh, 54px);
  height: 2px;
  background: linear-gradient(90deg,
    rgba(34, 31, 27, 0) 0%, rgba(34, 31, 27, 0.2) 14%,
    rgba(34, 31, 27, 0.2) 86%, rgba(34, 31, 27, 0) 100%);
}

.cd-slide .project-slide-media {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(6px, 1.9vw, 38px);
  padding: 0 clamp(10px, 4vw, 64px) clamp(20px, 4.4vh, 56px);
}

.cd-slide .project-slide-media > img {
  position: static;
  inset: auto;
  flex: 0 0 auto;
  width: auto;
  height: auto;
  max-width: none;
  object-fit: contain;
  filter: drop-shadow(0 12px 16px rgba(34, 31, 27, 0.16));
}

/* heights are capped in vw as well, so a tall narrow window never pushes the
   line-up wider than the slide */
.cd-slide .project-slide-media > img.cd-slide-frog { height: min(18%, 10vw); }
.cd-slide .project-slide-media > img.cd-slide-echidna { height: min(32%, 17.5vw); }
.cd-slide .project-slide-media > img.cd-slide-presto { height: min(27%, 14.5vw); }
.cd-slide .project-slide-media > img.cd-slide-king { height: min(18%, 10vw); }
.cd-slide .project-slide-media > img.cd-slide-giraffe { height: min(23%, 12.5vw); }
.cd-slide .project-slide-media > img.cd-slide-pirate { height: min(30%, 16vw); }

.cd-slide .cd-slide-plate {
  position: relative;
  z-index: 2;
  margin: clamp(56px, 19vh, 220px) auto 0;
  padding: 0 clamp(16px, 4vw, 40px);
  text-align: center;
  max-width: 1100px;
}

.cd-slide .cd-slide-kicker {
  margin: 0;
  font-size: clamp(10px, 1.05vw, 15px);
  font-weight: 600;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--cd-slide-red);
}

.cd-slide .cd-slide-title {
  margin: clamp(10px, 1.8vh, 22px) 0 0;
  font-size: clamp(42px, 8.4vw, 136px);
  font-weight: 800;
  line-height: 0.88;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--cd-slide-ink);
}

.cd-slide .cd-slide-title span {
  display: block;
}

.cd-slide .cd-slide-title span + span {
  color: var(--cd-slide-ink-2);
}

.cd-slide .cd-slide-rule {
  width: clamp(54px, 7vw, 108px);
  height: 3px;
  margin: clamp(14px, 2.4vh, 30px) auto;
  background: var(--cd-slide-red);
}

.cd-slide .cd-slide-sub {
  margin: 0 auto;
  max-width: 34ch;
  font-size: clamp(13px, 1.25vw, 19px);
  line-height: 1.5;
  color: var(--cd-slide-ink-2);
}

@media (max-width: 720px) {
  .cd-slide .project-slide-media > img.cd-slide-echidna,
  .cd-slide .project-slide-media > img.cd-slide-presto,
  .cd-slide .project-slide-media > img.cd-slide-giraffe { display: none; }

  .cd-slide .project-slide-media { gap: 3%; padding-left: 8px; padding-right: 8px; }
  .cd-slide .project-slide-media > img.cd-slide-frog { height: auto; width: 37%; }
  .cd-slide .project-slide-media > img.cd-slide-king { height: auto; width: 22%; }
  .cd-slide .project-slide-media > img.cd-slide-pirate { height: auto; width: 31%; }

  /* the type sits in the middle of the space the line-up leaves */
  .cd-slide .cd-slide-plate { margin-top: auto; margin-bottom: clamp(100px, 26vh, 250px); }
  .cd-slide .cd-slide-title { font-size: clamp(38px, 13vw, 66px); }
}

/* ── Shared section furniture ──────────────────────────────────── */

.cd-page .cd-section {
  position: relative;
  padding: clamp(62px, 8vw, 128px) clamp(18px, 4.4vw, 60px);
}

.cd-page .cd-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.cd-page .cd-eyebrow {
  margin: 0 0 14px;
  font-size: clamp(10px, 0.9vw, 13px);
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--cd-red);
}

.cd-page .cd-title {
  margin: 0;
  font-size: clamp(29px, 3.5vw, 54px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.005em;
  text-transform: uppercase;
}

.cd-page .cd-lede {
  margin: clamp(18px, 2vw, 26px) 0 0;
  max-width: 62ch;
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.68;
  color: var(--cd-ink-2);
}

.cd-page .cd-head {
  margin-bottom: clamp(34px, 4vw, 60px);
}

.cd-page .cd-head::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  margin-top: clamp(24px, 3vw, 44px);
  background: var(--cd-line);
}

/* ── Intro ─────────────────────────────────────────────────────── */

.cd-page .cd-intro {
  padding: clamp(52px, 6.5vw, 104px) clamp(18px, 4.4vw, 60px) clamp(40px, 5vw, 76px);
  background: var(--cd-paper);
  border-bottom: 1px solid var(--cd-line);
}

.cd-page .cd-intro-text {
  margin: 0;
  max-width: 74ch;
  font-size: clamp(17px, 1.7vw, 27px);
  line-height: 1.5;
  color: var(--cd-ink);
}

.cd-page .cd-intro-text strong {
  font-weight: 700;
}

.cd-page .cd-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin: clamp(26px, 3vw, 40px) 0 0;
  padding: 0;
  list-style: none;
}

.cd-page .cd-tags li {
  padding: 7px 14px 6px;
  border: 1px solid var(--cd-ink);
  border-radius: 999px;
  font-size: clamp(10px, 0.85vw, 12px);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cd-ink);
}

/* ── Cast grid ─────────────────────────────────────────────────── */

.cd-page .cd-cast {
  background: var(--cd-paper-2);
}

.cd-page .cd-cast-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.2vw, 34px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cd-page .cd-card {
  display: flex;
  flex-direction: column;
  background: #fffdf8;
  border: 1px solid var(--cd-line);
  box-shadow: 0 14px 26px rgba(34, 31, 27, 0.07);
}

.cd-page .cd-card-wide {
  grid-column: span 2;
}

.cd-page .cd-card-art {
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(190px, 21vw, 300px);
  padding: clamp(12px, 1.6vw, 26px);
  background: #fff;
  border-bottom: 1px solid var(--cd-line);
}

.cd-page .cd-card-wide .cd-card-art {
  height: clamp(190px, 21vw, 300px);
}

.cd-page .cd-card-art img {
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
}

.cd-page .cd-card-body {
  padding: clamp(16px, 1.6vw, 24px) clamp(16px, 1.7vw, 26px) clamp(20px, 2vw, 28px);
}

.cd-page .cd-card-name {
  margin: 0;
  font-size: clamp(15px, 1.25vw, 19px);
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.cd-page .cd-card-note {
  margin: 10px 0 0;
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.6;
  color: var(--cd-ink-2);
}

/* ── King Scribble timeline ────────────────────────────────────── */

.cd-page .cd-king {
  background: var(--cd-dark);
  color: #f2ece1;
}

.cd-page .cd-king .cd-title {
  color: #fbf6ec;
}

.cd-page .cd-king .cd-lede {
  color: #c2b8a8;
}

.cd-page .cd-king .cd-head::after {
  background: rgba(242, 236, 225, 0.18);
}

.cd-page .cd-years {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(10px, 1.4vw, 24px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cd-page .cd-years::before {
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  top: clamp(59px, 6.25vw, 98px);
  height: 1px;
  background: repeating-linear-gradient(90deg,
    rgba(242, 236, 225, 0.4) 0 7px, transparent 7px 14px);
}

.cd-page .cd-year {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.cd-page .cd-year-art {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: clamp(118px, 12.5vw, 196px);
  margin-bottom: clamp(14px, 1.6vw, 24px);
  padding: clamp(8px, 1vw, 14px);
  background: #fffdf8;
  border: 1px solid rgba(242, 236, 225, 0.22);
  box-shadow: 0 16px 28px rgba(0, 0, 0, 0.35);
}

.cd-page .cd-year-art img {
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
}

.cd-page .cd-year-num {
  display: block;
  padding-top: clamp(14px, 1.6vw, 22px);
  font-size: clamp(17px, 1.8vw, 28px);
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #fbf6ec;
}

.cd-page .cd-year-note {
  margin: 8px 0 0;
  font-size: clamp(11px, 0.95vw, 14px);
  line-height: 1.5;
  color: #b1a698;
}

.cd-page .cd-king-foot {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(24px, 3.4vw, 56px);
  margin-top: clamp(50px, 6vw, 92px);
  padding-top: clamp(34px, 4vw, 56px);
  border-top: 1px solid rgba(242, 236, 225, 0.18);
}

.cd-page .cd-king-foot img {
  width: 100%;
  height: auto;
  background: #fffdf8;
  border: 1px solid rgba(242, 236, 225, 0.2);
}

.cd-page .cd-king-foot p {
  margin: 0;
  font-size: clamp(14px, 1.15vw, 18px);
  line-height: 1.68;
  color: #c2b8a8;
}

/* ── Process ───────────────────────────────────────────────────── */

.cd-page .cd-process {
  background: var(--cd-paper);
}

.cd-page .cd-step + .cd-step {
  margin-top: clamp(44px, 5.5vw, 88px);
  padding-top: clamp(44px, 5.5vw, 88px);
  border-top: 1px solid var(--cd-line);
}

.cd-page .cd-step-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 16px;
  margin-bottom: clamp(18px, 2vw, 28px);
}

.cd-page .cd-step-name {
  margin: 0;
  font-size: clamp(18px, 1.7vw, 26px);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.cd-page .cd-step-num {
  font-size: clamp(11px, 0.9vw, 13px);
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--cd-red);
}

.cd-page .cd-step-note {
  margin: 0 0 clamp(24px, 3vw, 40px);
  max-width: 62ch;
  font-size: clamp(14px, 1.1vw, 17px);
  line-height: 1.68;
  color: var(--cd-ink-2);
}

.cd-page .cd-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 30px);
}

.cd-page .cd-plate {
  margin: 0;
  background: #fff;
  border: 1px solid var(--cd-line);
  box-shadow: 0 14px 26px rgba(34, 31, 27, 0.07);
}

.cd-page .cd-plate img {
  width: 100%;
  height: auto;
}

.cd-page .cd-pair .cd-plate img {
  height: clamp(220px, 25vw, 360px);
  object-fit: contain;
  padding: clamp(10px, 1.4vw, 20px) 0;
}

.cd-page .cd-pair-tall .cd-plate img {
  height: clamp(300px, 34vw, 520px);
}

.cd-page .cd-plate figcaption {
  padding: 12px clamp(13px, 1.4vw, 20px) 14px;
  border-top: 1px solid var(--cd-line);
  font-size: clamp(11px, 0.9vw, 13px);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cd-ink-3);
}

/* ── Sketchbook ────────────────────────────────────────────────── */

.cd-page .cd-sketchbook {
  background: var(--cd-paper-3);
}

.cd-page .cd-sheets {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 30px);
}

.cd-page .cd-sheet {
  grid-column: span 2;
  margin: 0;
  background: #fffdf8;
  border: 1px solid var(--cd-line);
  box-shadow: 0 14px 26px rgba(34, 31, 27, 0.08);
}

.cd-page .cd-sheet-3 { grid-column: span 3; }
.cd-page .cd-sheet-6 { grid-column: span 6; }

.cd-page .cd-sheet-6 .cd-sheet-art {
  height: clamp(300px, 36vw, 540px);
}

.cd-page .cd-sheet-6 figcaption {
  max-width: 88ch;
}

.cd-page .cd-sheet-art {
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(210px, 22vw, 330px);
  padding: clamp(10px, 1.4vw, 22px);
  background: #fff;
}

.cd-page .cd-sheet-art img {
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
}

.cd-page .cd-sheet figcaption {
  padding: clamp(13px, 1.4vw, 18px) clamp(14px, 1.5vw, 22px) clamp(16px, 1.6vw, 22px);
  border-top: 1px solid var(--cd-line);
  font-size: clamp(12px, 1vw, 15px);
  line-height: 1.6;
  color: var(--cd-ink-2);
}

.cd-page .cd-sheet figcaption b {
  display: block;
  margin-bottom: 5px;
  font-size: clamp(11px, 0.9vw, 13px);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cd-ink);
}

/* ── Elsewhere ─────────────────────────────────────────────────── */

.cd-page .cd-elsewhere {
  background: var(--cd-dark-2);
  color: #f2ece1;
}

.cd-page .cd-elsewhere .cd-title { color: #fbf6ec; }
.cd-page .cd-elsewhere .cd-lede { color: #c2b8a8; }
.cd-page .cd-elsewhere .cd-head::after { background: rgba(242, 236, 225, 0.18); }

.cd-page .cd-links {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 26px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cd-page .cd-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(20px, 2.2vw, 30px);
  border: 1px solid rgba(242, 236, 225, 0.24);
  text-decoration: none;
  color: inherit;
  transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.cd-page .cd-link:hover,
.cd-page .cd-link:focus-visible {
  background: rgba(242, 236, 225, 0.07);
  border-color: rgba(242, 236, 225, 0.5);
  transform: translateY(-3px);
}

.cd-page .cd-link-name {
  margin: 0;
  font-size: clamp(15px, 1.25vw, 20px);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.cd-page .cd-link-note {
  margin: 12px 0 auto;
  font-size: clamp(12px, 1vw, 15px);
  line-height: 1.6;
  color: #b1a698;
}

.cd-page .cd-link-go {
  margin-top: clamp(20px, 2.2vw, 30px);
  font-size: clamp(10px, 0.85vw, 12px);
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--cd-red);
}

/* ── Narrower screens ──────────────────────────────────────────── */

@media (max-width: 1080px) {
  .cd-page .cd-cast-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cd-page .cd-years { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: clamp(28px, 4vw, 44px); }
  .cd-page .cd-years::before { display: none; }
  .cd-page .cd-king-foot { grid-template-columns: minmax(0, 1fr); }
  .cd-page .cd-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cd-page .cd-sheet,
  .cd-page .cd-sheet-3 { grid-column: span 3; }
}

@media (max-width: 680px) {
  .cd-page .cd-cast-grid { grid-template-columns: minmax(0, 1fr); }
  .cd-page .cd-card-wide { grid-column: span 1; }
  .cd-page .cd-years { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cd-page .cd-pair { grid-template-columns: minmax(0, 1fr); }
  .cd-page .cd-links { grid-template-columns: minmax(0, 1fr); }
  /* one sheet per row: only the art gets a fixed height, so captions are never covered */
  .cd-page .cd-sheet,
  .cd-page .cd-sheet-3,
  .cd-page .cd-sheet-6 { grid-column: span 6; }
  .cd-page .cd-sheet-art,
  .cd-page .cd-sheet-6 .cd-sheet-art { height: clamp(210px, 62vw, 320px); }
  .cd-page .cd-pair .cd-plate img { height: clamp(200px, 50vw, 280px); }
  .cd-page .cd-pair-tall .cd-plate img { height: clamp(260px, 62vw, 340px); }
}

/* ── Pixel Art (projects/pixel-art.html) ── */

/* ══════════════════════════════════════════
   Pixel Art (px-) — STAGING
   All of this belongs in shared/styles.css. Every selector is prefixed with a px- class
   (the .project-slide* classes are global and are only ever reached through .px-slide).
   ══════════════════════════════════════════ */

/* ── Project slide ──
   Rules hang off .px-slide only, never main.px-page, so the homepage stage can clone the
   slide and render it without page scripts. Art is a nearest-neighbour upscale of the
   100 x 130 px original, so the blocks stay square at any size. */

.project-slide.px-slide {
  background: #c3fdfc;
}

.px-slide .project-slide-media > img {
  image-rendering: pixelated;
  object-position: 50% 44%;
}

.px-slide .project-slide-tint {
  background: linear-gradient(180deg, rgba(14, 14, 22, 0) 0%, rgba(14, 14, 22, 0) 62%, rgba(14, 14, 22, 0.26) 100%);
}

/* The wordmark sits on its own ink plate so it reads over both the canopy and the sky */
.px-slide .project-slide-logo {
  box-sizing: border-box;
  max-width: min(66%, 800px);
  max-height: 34%;
  padding: clamp(18px, 2.4vw, 34px) clamp(24px, 3.2vw, 46px);
  background: #0e0e16;
  image-rendering: pixelated;
  filter: none;
  box-shadow: 0 0 0 5px #fff, 16px 16px 0 rgba(14, 14, 22, 0.38);
}

@media (max-width: 720px) {
  .px-slide .project-slide-logo {
    max-width: 84%;
    box-shadow: 0 0 0 4px #fff, 10px 10px 0 rgba(14, 14, 22, 0.38);
  }
}

@media (max-width: 480px) {
  .px-slide .project-slide-media > img {
    object-position: 50% 50%;
  }

  .px-slide .project-slide-logo {
    max-width: 88%;
    max-height: 26%;
    padding: 16px 18px;
  }
}

/* ── Page shell ── */

.px-page {
  --px-ink: #0e0e16;
  --px-ink-2: #14141e;
  --px-line: rgba(255, 255, 255, 0.14);
  --px-text: rgba(255, 255, 255, 0.74);
  --px-dim: rgba(255, 255, 255, 0.5);
  --px-cyan: #59eeff;
  --px-pink: #ff2875;
  --px-paper: #f2f3f7;
  --px-paper-ink: #14141e;
  --px-gutter: clamp(20px, 5vw, 64px);
  max-width: none;
  padding: 0;
  flex: none;
  overflow-x: clip;
  background: var(--px-ink);
  color: #fff;
  -webkit-font-smoothing: antialiased;
}

.px-page figure {
  margin: 0;
}

.px-inner {
  max-width: 1120px;
  margin: 0 auto;
}

.px-section {
  padding: clamp(68px, 7.5vw, 116px) var(--px-gutter);
}

.px-section-grid {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.026) 1px, transparent 1px);
  background-size: 16px 16px;
  background-position: -1px -1px;
}

/* ── Description ── */

.px-desc {
  padding: clamp(52px, 6vw, 88px) var(--px-gutter) clamp(40px, 4.6vw, 64px);
  background: var(--px-ink-2);
}

.px-desc-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  gap: clamp(26px, 4vw, 76px);
  align-items: start;
}

.px-desc-text {
  max-width: 34ch;
  font-size: clamp(19px, 1.65vw, 24px);
  font-weight: 400;
  line-height: 1.5;
  color: #fff;
}

.px-desc-text strong {
  font-weight: 700;
}

.px-desc-sub {
  max-width: 46ch;
  font-size: 16px;
  line-height: 1.65;
  color: var(--px-text);
}

.px-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
  padding: 0;
  list-style: none;
}

.px-chips li {
  padding: 7px 12px 6px;
  border: 2px solid var(--px-line);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--px-cyan);
}

/* ── Section headers ── */

.px-head {
  margin-bottom: clamp(40px, 4.4vw, 68px);
}

.px-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--px-cyan);
}

.px-eyebrow::before {
  content: "";
  flex: none;
  width: 24px;
  height: 4px;
  background: currentColor;
}

.px-title {
  margin-top: 16px;
  font-size: clamp(36px, 4.2vw, 56px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.015em;
  text-transform: uppercase;
}

.px-lede {
  margin-top: 18px;
  max-width: 58ch;
  font-size: 16.5px;
  line-height: 1.66;
  color: var(--px-text);
}

/* ── The pieces ── */

.px-piece {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: center;
}

.px-piece + .px-piece {
  margin-top: clamp(64px, 7vw, 108px);
  padding-top: clamp(64px, 7vw, 108px);
  border-top: 2px solid rgba(255, 255, 255, 0.08);
}

.px-piece-flip .px-piece-art {
  order: 2;
}

.px-piece-tall {
  grid-template-columns: minmax(0, 0.74fr) minmax(0, 1fr);
}

.px-piece-wide {
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(26px, 3vw, 44px);
}

.px-piece-art {
  margin: 0;
  min-width: 0;
}

/* Mat: a colour lifted from the piece's own palette, a hard white frame and a hard shadow */
.px-mat {
  padding: clamp(12px, 1.6vw, 26px);
  background: #222;
  box-shadow: 0 0 0 4px #fff, 16px 16px 0 rgba(0, 0, 0, 0.4);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.px-mat:hover {
  transform: translate(-4px, -4px);
  box-shadow: 0 0 0 4px #fff, 22px 22px 0 rgba(0, 0, 0, 0.4);
}

.px-mat img {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: pixelated;
}

/* Each mat is a colour lifted from the piece it frames, chosen to sit against the art's edges */
.px-mat-bark { background: #7d4945; }
.px-mat-navy { background: #043657; }
.px-mat-peach { background: #fcc7ac; }
.px-mat-deep { background: #002bc4; }

.px-piece-body {
  min-width: 0;
}

.px-piece-name {
  font-size: clamp(25px, 2.3vw, 32px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.px-spec {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px 0 0;
}

.px-spec > div {
  padding: 10px 14px 9px;
  border: 2px solid var(--px-line);
  background: rgba(255, 255, 255, 0.03);
}

.px-spec dt {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--px-dim);
}

.px-spec dd {
  margin: 5px 0 0;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.px-body {
  margin-top: 22px;
  max-width: 46ch;
  font-size: 16.5px;
  line-height: 1.68;
  color: var(--px-text);
}

.px-piece-wide .px-body {
  max-width: 62ch;
}

.px-note {
  margin-top: 18px;
  max-width: 52ch;
  padding-left: 14px;
  border-left: 4px solid var(--px-pink);
  font-size: 14px;
  line-height: 1.6;
  color: var(--px-dim);
}

/* ── Close up ── */

.px-close {
  background: var(--px-ink-2);
}

.px-zooms {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.6vw, 38px);
}

.px-zoom {
  margin: 0;
  min-width: 0;
}

.px-zoom img {
  display: block;
  width: 100%;
  height: auto;
  border: 4px solid #fff;
  image-rendering: pixelated;
}

.px-zoom figcaption {
  margin-top: 14px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--px-text);
}

.px-zoom b {
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--px-cyan);
}

/* ── Actual size (paper) ── */

.px-actual {
  position: relative;
  background: var(--px-paper);
  color: var(--px-paper-ink);
}

/* Dithered edges: a 12px checkerboard dissolving into the dark page above and below */
.px-actual::before,
.px-actual::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 24px;
  background-image: conic-gradient(var(--px-paper) 25%, rgba(0, 0, 0, 0) 25% 50%, var(--px-paper) 50% 75%, rgba(0, 0, 0, 0) 75%);
  background-size: 24px 24px;
  pointer-events: none;
}

.px-actual::before { top: -24px; }
.px-actual::after { bottom: -24px; }

.px-actual .px-eyebrow { color: #0072a8; }
.px-actual .px-lede { color: rgba(20, 20, 30, 0.7); }

.px-real {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: clamp(22px, 3.4vw, 54px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.px-real li {
  min-width: 0;
}

.px-real img {
  display: block;
  max-width: 100%;
  height: auto;
  outline: 2px solid rgba(20, 20, 30, 0.18);
  outline-offset: 4px;
  image-rendering: pixelated;
}

.px-real-label {
  margin-top: 16px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(20, 20, 30, 0.58);
}

.px-real-label b {
  display: block;
  margin-bottom: 3px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--px-paper-ink);
}

/* ── Palettes ── */

.px-pals {
  display: grid;
  gap: clamp(26px, 3vw, 40px);
}

.px-pal-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 16px;
  margin-bottom: 12px;
}

.px-pal-name {
  font-size: 17px;
  font-weight: 700;
}

.px-pal-count {
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--px-dim);
}

.px-pal-bar {
  display: flex;
  height: 68px;
  margin: 0;
  padding: 0;
  list-style: none;
  box-shadow: 0 0 0 2px var(--px-line);
}

.px-pal-bar li {
  min-width: 3px;
}

.px-band {
  display: block;
  width: 100%;
  height: 100%;
}

@media (max-width: 1024px) {
  .px-zooms {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .px-zoom:first-child {
    grid-column: 1 / -1;
    max-width: 420px;
  }
}

@media (max-width: 860px) {
  .px-desc-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
  }

  .px-desc-text {
    max-width: 44ch;
  }
}

@media (max-width: 760px) {
  .px-piece,
  .px-piece-tall {
    grid-template-columns: minmax(0, 1fr);
  }

  .px-piece-flip .px-piece-art {
    order: 0;
  }

  .px-piece-art {
    max-width: 460px;
  }

  .px-mat {
    box-shadow: 0 0 0 3px #fff, 10px 10px 0 rgba(0, 0, 0, 0.4);
  }

  .px-mat:hover {
    transform: none;
    box-shadow: 0 0 0 3px #fff, 10px 10px 0 rgba(0, 0, 0, 0.4);
  }

  .px-zooms {
    grid-template-columns: minmax(0, 1fr);
  }

  .px-zoom:first-child {
    grid-column: auto;
  }

  .px-zoom {
    max-width: 420px;
  }

  .px-pal-bar {
    height: 52px;
  }
}

/* ── YouTube Design (projects/youtube-branding.html) ── */

/* ══════════════════════════════════════════════════════════════════════════
   YouTube Design (prefix: yt-) — STAGING
   Merge into shared/styles.css. Slide rules must stay after the global
   "Project slide" section. Every selector is yt- prefixed.
   ══════════════════════════════════════════════════════════════════════════ */

.yt-page {
  --yt-black: #0b0908;
  --yt-ink: #1a120c;
  --yt-brown: #6c442b;
  --yt-brown-deep: #3f2515;
  --yt-kraft: #8b5e3c;
  --yt-cream: #f4efe4;
  --yt-cream-ink: #3b2c20;
  --yt-red: #e8302b;
  --yt-teal: #3b8282;
  max-width: none;
  padding: 0;
  flex: none;
  overflow-x: clip;
  background: var(--yt-black);
  color: #fff;
}

/* ── Slide ──────────────────────────────────────────────────────────────── */

.project-slide.yt-slide {
  background: var(--yt-brown-deep);
}

.yt-slide .project-slide-media > img {
  object-position: 50% 46%;
}

.yt-slide .project-slide-tint {
  background:
    radial-gradient(ellipse 66% 58% at 50% 50%, rgba(63, 37, 21, 0) 0%, rgba(38, 22, 12, 0.34) 100%),
    linear-gradient(rgba(38, 22, 12, 0.12), rgba(38, 22, 12, 0.3));
}

.yt-slide .project-slide-logo {
  max-width: min(56%, 760px);
  max-height: 30%;
  border-radius: 3px;
  filter: drop-shadow(0 14px 34px rgba(24, 13, 6, 0.46));
}

@media (max-width: 480px) {
  .yt-slide .project-slide-logo {
    max-width: 88%;
    max-height: 24%;
  }
}

/* ── Shared furniture ───────────────────────────────────────────────────── */

.yt-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 52px);
}

.yt-sec {
  padding: clamp(56px, 6.2vw, 116px) 0;
}

.yt-sec-deep {
  background: var(--yt-brown-deep);
}

.yt-sec-cream {
  background: var(--yt-cream);
  color: var(--yt-cream-ink);
}

.yt-sec-black {
  background: var(--yt-black);
}

/* Section head: eyebrow / lowercase title / rule / lede — the wordmark's own
   stacked structure, reused as the page's heading device */
.yt-head {
  max-width: 900px;
}

.yt-eyebrow {
  font-size: clamp(0.68rem, 0.82vw, 0.78rem);
  font-weight: 500;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: clamp(10px, 1.2vw, 16px);
}

.yt-title {
  font-family: "Futura", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: clamp(2.1rem, 4.6vw, 3.7rem);
  line-height: 0.96;
  letter-spacing: -0.022em;
  text-transform: lowercase;
}

.yt-head-rule {
  height: 2px;
  width: min(280px, 46%);
  background: currentColor;
  opacity: 0.2;
  margin: clamp(16px, 1.8vw, 24px) 0 0;
  border: none;
  border-radius: 1px;
}

.yt-lede {
  max-width: 68ch;
  margin-top: clamp(16px, 1.8vw, 24px);
  font-size: clamp(0.96rem, 1.1vw, 1.1rem);
  line-height: 1.68;
  font-weight: 300;
  opacity: 0.86;
}

.yt-sec-cream .yt-lede {
  opacity: 1;
  color: #574434;
}

.yt-subtitle {
  font-weight: 500;
  font-size: clamp(1.1rem, 1.5vw, 1.4rem);
  letter-spacing: -0.01em;
  text-transform: lowercase;
  margin-top: clamp(44px, 5vw, 78px);
}

.yt-subtitle + .yt-lede {
  margin-top: 10px;
}

.yt-note {
  margin-top: clamp(30px, 3.4vw, 50px);
  font-size: 0.78rem;
  line-height: 1.6;
  font-weight: 300;
  opacity: 0.5;
  max-width: 78ch;
}

/* ── Description ────────────────────────────────────────────────────────── */

.yt-desc {
  background: var(--yt-brown);
  padding: clamp(46px, 5.2vw, 90px) 0 clamp(48px, 5.6vw, 96px);
}

.yt-desc-text {
  max-width: 74ch;
  font-size: clamp(1.02rem, 1.32vw, 1.28rem);
  line-height: 1.62;
  font-weight: 300;
  color: #fcf5ea;
}

.yt-desc-text strong {
  font-weight: 600;
  color: #fff;
}

.yt-tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: clamp(22px, 2.4vw, 32px) 0 0;
  padding: 0;
}

.yt-tags li {
  background: #fff;
  color: var(--yt-ink);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 7px 12px 6px;
  border-radius: 2px;
}

/* ── Frames, cards and grids ────────────────────────────────────────────── */

.yt-frame {
  display: block;
  margin: 0;
  border-radius: 3px;
  overflow: hidden;
  background: #100c09;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.42);
}

.yt-frame > img {
  display: block;
  width: 100%;
  height: auto;
}

.yt-sec-cream .yt-frame {
  background: #fff;
  box-shadow: 0 14px 34px rgba(62, 44, 28, 0.16);
}

.yt-figure {
  margin: 0;
}

.yt-cap {
  margin-top: 11px;
  font-size: 0.79rem;
  line-height: 1.5;
  font-weight: 300;
  opacity: 0.66;
}

.yt-cap b {
  display: block;
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  opacity: 1;
  margin-bottom: 3px;
}

.yt-sec-cream .yt-cap {
  opacity: 1;
  color: #6b5544;
}

.yt-sec-cream .yt-cap b {
  color: var(--yt-cream-ink);
}

.yt-grid {
  display: grid;
  gap: clamp(14px, 1.7vw, 28px);
  margin-top: clamp(26px, 3vw, 44px);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}

.yt-grid-2 {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr));
}

/* ── The wordmark ───────────────────────────────────────────────────────── */

.yt-taglines {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: clamp(22px, 2.4vw, 34px) 0 0;
  padding: 0;
}

.yt-taglines li {
  border: 1px solid rgba(59, 44, 32, 0.28);
  color: #57432f;
  font-size: 0.76rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  padding: 6px 12px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.55);
}

.yt-banner-strip {
  margin-top: clamp(26px, 3vw, 44px);
}

/* ── The drawn world ────────────────────────────────────────────────────── */

.yt-cast {
  margin-top: clamp(28px, 3.2vw, 48px);
}

.yt-cast .yt-frame {
  background: #fff;
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.4);
}

.yt-drawn-pair {
  display: grid;
  gap: clamp(16px, 2vw, 32px);
  margin-top: clamp(20px, 2.4vw, 36px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  align-items: start;
}

.yt-drawn-pair .yt-frame {
  background: #fff;
}

/* Frames holding a wide piece of lettering, padded so the card keeps its weight */
.yt-frame-pad {
  padding: clamp(26px, 7vw, 100px) clamp(16px, 2vw, 34px);
}

/* ── Thumbnails: the annotated anatomy ──────────────────────────────────── */

.yt-anatomy {
  display: grid;
  gap: clamp(22px, 2.6vw, 44px);
  margin-top: clamp(28px, 3.2vw, 48px);
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  align-items: start;
}

.yt-anatomy-fig {
  position: relative;
  margin: 0;
  border-radius: 3px;
  overflow: hidden;
  background: #100c09;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.yt-anatomy-fig > img {
  display: block;
  width: 100%;
  height: auto;
}

.yt-mark {
  position: absolute;
  width: clamp(24px, 2.4vw, 32px);
  height: clamp(24px, 2.4vw, 32px);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #fff;
  color: var(--yt-ink);
  font-size: clamp(0.72rem, 0.95vw, 0.88rem);
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px rgba(10, 8, 6, 0.78), 0 4px 12px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  user-select: none;
}

/* Positions keyed to thumbs/half-life-1.jpg: the lambda disc, the episode
   block, the wordmark's own baseline, the cut-out figure and the white tab */
.yt-mark-1 { left: 6%; top: 12%; }
.yt-mark-2 { left: 27%; top: 12%; }
.yt-mark-3 { left: 13.5%; top: 79%; }
.yt-mark-4 { left: 82%; top: 62%; }
.yt-mark-5 { left: 57%; top: 92%; }

.yt-key {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: ytkey;
}

.yt-key li {
  counter-increment: ytkey;
  position: relative;
  padding: 0 0 0 44px;
  margin-bottom: clamp(16px, 1.8vw, 24px);
  font-size: 0.88rem;
  line-height: 1.56;
  font-weight: 300;
  opacity: 0.82;
}

.yt-key li:last-child {
  margin-bottom: 0;
}

.yt-key li::before {
  content: counter(ytkey);
  position: absolute;
  left: 0;
  top: -1px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.yt-key b {
  display: block;
  font-weight: 600;
  font-size: 0.94rem;
  opacity: 1;
  margin-bottom: 3px;
}

@media (max-width: 860px) {
  .yt-anatomy {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── End screens ────────────────────────────────────────────────────────── */

.yt-end-lead {
  max-width: 880px;
  margin-top: clamp(28px, 3.2vw, 48px);
}

.yt-end-lead + .yt-grid {
  margin-top: clamp(34px, 3.8vw, 58px);
}

.yt-sec-cream .yt-end-lead .yt-frame,
.yt-sec-cream .yt-end-grid .yt-frame {
  background: #0b0908;
  box-shadow: 0 16px 38px rgba(62, 44, 28, 0.22);
}

/* ── Other names ────────────────────────────────────────────────────────── */

.yt-names-grid .yt-frame {
  background: #100c09;
}

/* ── Product + Packaging Design (projects/product-packaging.html) ── */

/* ══════════════════════════════════════════════════════════════════════════
   Product + Packaging Design (prefix: pp-)
   projects/product-packaging.html

   The page is a WAY IN, not a case study: the slide, then one grid of product
   mockups on black, each tile linking to that project's own page. There are no
   editorial sections (every piece is written up on the page its tile opens) and
   the page carries no script of its own.

   Every selector is scoped to a pp- class or to .pp-slide, so nothing here
   touches another page. The slide rules are NOT scoped under main.pp-page:
   the homepage stage clones the slide on its own, without page scripts.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Palette ──
   Declared on the page AND on the slide, because the homepage stage lifts the
   slide out of main.pp-page. */
.pp-page,
.pp-slide {
  --pp-cmyk: linear-gradient(90deg, #00a7e1 0 25%, #e6007e 0 50%, #ffd400 0 75%, #14161a 0 100%);
  --pp-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

/* The grid reads as one dark room with the pieces set out in it, so the page is
   the work menu's own black rather than the retired editorial page's paper */
.pp-page {
  --pp-field: #0e0f12;
  --pp-edge: rgba(255, 255, 255, 0.07);
  --pp-edge-on: rgba(255, 255, 255, 0.22);
  --pp-dim: rgba(255, 255, 255, 0.5);
  max-width: none;
  padding: 0;
  flex: none;
  overflow-x: clip;
  background: #000;
  color: #fff;
}

.pp-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ══════════════════════════════════════════
   Slide — the studio's objects on a dark surface.
   Printed pieces are flat sheets (.pp-p, box-shadow); products are cut-outs
   (.pp-o, drop-shadow on their own silhouette).
   ══════════════════════════════════════════ */

.project-slide.pp-slide {
  background:
    radial-gradient(130% 110% at 50% 42%, #23262c 0%, #14171b 42%, #0a0b0e 100%);
}

/* Each piece is placed by hand; these override the global "cover the whole
   media box" rule for slide art. */
.pp-slide .project-slide-media > .pp-p,
.pp-slide .project-slide-media > .pp-o {
  position: absolute;
  inset: auto;
  width: auto;
  height: auto;
  max-width: none;
  object-fit: contain;
}

.pp-slide .project-slide-media > .pp-p {
  border-radius: 2px;
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.45),
    0 26px 60px rgba(0, 0, 0, 0.6);
}

.pp-slide .project-slide-media > .pp-o {
  filter:
    drop-shadow(0 2px 5px rgba(0, 0, 0, 0.5))
    drop-shadow(0 22px 40px rgba(0, 0, 0, 0.55));
}

/* Printed sheets */
.pp-slide .project-slide-media > .pp-p-year {
  height: 38%;
  left: 21%;
  top: -8%;
  transform: rotate(-7deg);
}

.pp-slide .project-slide-media > .pp-p-menu {
  height: 62%;
  right: 2%;
  top: 2%;
  transform: rotate(7deg);
}

.pp-slide .project-slide-media > .pp-p-sleeve {
  height: 30%;
  right: 33%;
  bottom: -8%;
  transform: rotate(-5deg);
}

/* Products */
.pp-slide .project-slide-media > .pp-o-tee {
  height: 58%;
  left: 1%;
  top: 3%;
  transform: rotate(-4deg);
}

.pp-slide .project-slide-media > .pp-o-soap {
  width: 38%;
  left: -3%;
  bottom: 2%;
  transform: rotate(-2deg);
}

.pp-slide .project-slide-media > .pp-o-mug {
  width: 21%;
  right: 3%;
  bottom: 3%;
  transform: rotate(2deg);
}

.pp-slide .pp-slide-title {
  position: relative;
  z-index: 2;
  padding: 0 24px;
  text-align: center;
  color: #f4f0e7;
}

/* A soft pool of shadow so the type always reads over the pieces behind it */
.pp-slide .pp-slide-title::before {
  content: "";
  position: absolute;
  left: -46%;
  right: -46%;
  top: -150%;
  bottom: -150%;
  z-index: -1;
  background: radial-gradient(closest-side,
    rgba(8, 9, 11, 0.93) 0%,
    rgba(8, 9, 11, 0.8) 42%,
    rgba(8, 9, 11, 0.42) 68%,
    rgba(8, 9, 11, 0) 100%);
  pointer-events: none;
}

.pp-slide .pp-slide-title h1 {
  margin: 0;
  font-weight: 800;
  /* Capped at 96px: past that the second line reaches the menu and tee on a
     wide window, and white type over the menu's white paper stops reading. */
  font-size: clamp(38px, 6.4vw, 96px);
  line-height: 0.92;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}

.pp-slide .pp-slide-title h1 span {
  display: block;
}

.pp-slide .pp-slide-sub {
  margin: clamp(14px, 1.6vw, 24px) auto 0;
  font-family: var(--pp-mono);
  font-size: clamp(9px, 0.82vw, 13px);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(244, 240, 231, 0.74);
}

.pp-slide .pp-slide-sub::before {
  content: "";
  display: block;
  width: 56px;
  height: 5px;
  margin: 0 auto clamp(14px, 1.6vw, 22px);
  background: var(--pp-cmyk);
}

/* Wide screens: the pieces grow so the arrangement still fills the frame */
@media (min-width: 1500px) {
  .pp-slide .project-slide-media > .pp-o-tee {
    height: 62%;
  }

  .pp-slide .project-slide-media > .pp-p-menu {
    height: 64%;
    right: 0;
  }

  .pp-slide .project-slide-media > .pp-o-soap {
    width: 40%;
  }

  .pp-slide .project-slide-media > .pp-p-year {
    height: 44%;
  }

  .pp-slide .project-slide-media > .pp-p-sleeve {
    height: 34%;
  }
}

/* Mid widths: the two tall side pieces step outward and down a size, so the
   title isn't set straight over the menu's dense type */
@media (min-width: 1101px) and (max-width: 1499px) {
  .pp-slide .project-slide-media > .pp-p-menu {
    height: 56%;
    right: -1%;
  }

  .pp-slide .project-slide-media > .pp-o-tee {
    height: 54%;
    left: -2%;
  }
}

/* Short or narrow windows: pull the ring in so nothing crowds the title */
@media (max-width: 1100px) {
  .pp-slide .project-slide-media > .pp-o-tee {
    height: 46%;
    left: -2%;
  }

  .pp-slide .project-slide-media > .pp-p-menu {
    height: 48%;
    right: -2%;
  }

  .pp-slide .project-slide-media > .pp-o-soap {
    width: 42%;
    left: -6%;
    bottom: 1%;
  }

  .pp-slide .project-slide-media > .pp-o-mug {
    width: 24%;
    right: -1%;
  }

  .pp-slide .project-slide-media > .pp-p-year {
    height: 30%;
    left: 24%;
    top: -9%;
  }

  .pp-slide .project-slide-media > .pp-p-sleeve {
    height: 24%;
    right: 27%;
    bottom: -8%;
  }
}

@media (max-height: 640px) {
  .pp-slide .project-slide-media > .pp-p-year,
  .pp-slide .project-slide-media > .pp-p-sleeve {
    display: none;
  }
}

@media (max-width: 480px) {
  .pp-slide .project-slide-media > .pp-p-year,
  .pp-slide .project-slide-media > .pp-p-sleeve {
    display: none;
  }

  .pp-slide .project-slide-media > .pp-o-tee {
    height: auto;
    width: 46%;
    left: -10%;
    top: 5%;
    transform: rotate(-5deg);
  }

  .pp-slide .project-slide-media > .pp-p-menu {
    height: auto;
    width: 42%;
    right: -3%;
    top: 4%;
    transform: rotate(8deg);
  }

  .pp-slide .project-slide-media > .pp-o-soap {
    width: 82%;
    left: -12%;
    bottom: 3%;
    transform: rotate(-3deg);
  }

  .pp-slide .project-slide-media > .pp-o-mug {
    width: 33%;
    right: 2%;
    bottom: 27%;
  }

  .pp-slide .pp-slide-title {
    padding: 0 14px;
  }

  .pp-slide .pp-slide-title h1 {
    font-size: clamp(28px, 10.5vw, 50px);
  }

  .pp-slide .pp-slide-sub {
    font-size: 9px;
    letter-spacing: 0.22em;
  }
}

/* ══════════════════════════════════════════
   The grid — one product mockup per project, on black.

   The mockups are photographs, renders and cut-outs at every proportion, so
   what makes them one grid is the FIELD, not the crop: every tile is the same
   square of near-black, and the piece is held inside it by object-fit with the
   same drop shadow, the way objects in a case all sit on the same cloth.
   Two knobs per tile, both hand-tuned by eye the way the work menu's --lw is:
     --pad   how much air is left around the piece (its optical weight)
     --lift  a faint radial glow behind it, for pieces whose own ground is
             nearly black (the DVD case, the black card front) and would
             otherwise lose their silhouette
   ══════════════════════════════════════════ */

.pp-work {
  padding: clamp(52px, 6.4vw, 104px) 0 clamp(72px, 9vw, 150px);
}

/* Wider than the site's usual measure: these are photographs, and a 250 px tile
   loses the lettering on a spine or the type on a menu card */
.pp-inner {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 60px);
}

/* One line of orientation under the slide, over a short rule that echoes the
   rule under the slide's own subtitle */
.pp-intro {
  max-width: 47ch;
  margin: 0 auto clamp(38px, 5vw, 72px);
  font-size: clamp(14px, 1.15vw, 17px);
  font-weight: 300;
  line-height: 1.65;
  text-align: center;
  text-wrap: pretty;
  color: rgba(255, 255, 255, 0.78);
}

.pp-intro::before {
  content: "";
  display: block;
  width: 46px;
  height: 2px;
  margin: 0 auto clamp(18px, 2.2vw, 30px);
  background: rgba(255, 255, 255, 0.28);
}

/* Flex, not grid, so a row that does not fill up is CENTRED: with ten pieces the
   last row is always short, and left-aligned orphans read as a mistake */
.pp-grid {
  --pp-cols: 4;
  --pp-gap: clamp(16px, 2vw, 34px);
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(26px, 3.2vw, 46px) var(--pp-gap);
  margin: 0;
  padding: 0;
}

.pp-cell {
  flex: 0 0 calc((100% - (var(--pp-cols) - 1) * var(--pp-gap)) / var(--pp-cols));
  max-width: calc((100% - (var(--pp-cols) - 1) * var(--pp-gap)) / var(--pp-cols));
  display: flex;
}

/* The whole tile is the link: the field, the name and the descriptor */
.pp-tile {
  --pad: 7%;
  --lift: 0.03;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.2vw, 18px);
  border-radius: 4px;
  color: #fff;
  transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.pp-tile:hover {
  transform: translateY(-4px);
}

.pp-tile:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 6px;
}

.pp-tile-field {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid var(--pp-edge);
  border-radius: 3px;
  background:
    radial-gradient(76% 64% at 50% 46%, rgba(255, 255, 255, var(--lift)) 0%, rgba(255, 255, 255, 0) 74%),
    var(--pp-field);
  transition: border-color 0.28s ease, background-color 0.28s ease;
}

.pp-tile:hover .pp-tile-field,
.pp-tile:focus-visible .pp-tile-field {
  border-color: var(--pp-edge-on);
}

/* The padding is inside the image's own box (border-box), so object-fit letterboxes
   the piece within it and --pad is simply the air around the piece.
   pointer-events: none keeps the click on the tile — transitions.js opens its
   lightbox for a click on any `main img` on a project page. */
.pp-tile-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  padding: var(--pad);
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 3px 7px rgba(0, 0, 0, 0.5)) drop-shadow(0 16px 30px rgba(0, 0, 0, 0.45));
  transition: transform 0.42s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.pp-tile:hover .pp-tile-art,
.pp-tile:focus-visible .pp-tile-art {
  transform: scale(1.045);
}

.pp-tile-meta {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.pp-tile-name {
  font-size: clamp(13px, 1vw, 15px);
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: 1.3;
  text-transform: uppercase;
}

.pp-tile-desc {
  font-family: var(--pp-mono);
  font-size: clamp(10px, 0.78vw, 12px);
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1.5;
  color: var(--pp-dim);
  transition: color 0.28s ease;
}

.pp-tile:hover .pp-tile-desc,
.pp-tile:focus-visible .pp-tile-desc {
  color: rgba(255, 255, 255, 0.72);
}

/* ── Per-tile balance (hand-tuned at tile size, not computed) ── */

/* Tall cut-out of a garment: needs its air, and a little lift under the cream */
.pp-t-snt { --pad: 8%; --lift: 0.045; }

/* Two bars, 2.5 : 1 — the widest piece here, so it takes the frame almost whole */
.pp-t-marble { --pad: 3%; --lift: 0.05; }

/* Photographs: the plate is the piece, so only a hair of air around it */
.pp-t-cannoli { --pad: 5%; }
.pp-t-mix { --pad: 4%; }

/* Printed cards and sheets */
.pp-t-ottaray { --pad: 6%; }
.pp-t-splash { --pad: 7%; }
.pp-t-year { --pad: 7%; }
.pp-t-valentine { --pad: 8%; }

/* Dark objects on a dark field: the case's shell is a warm grey (#433529) and the
   card's front is black, so without a lift behind them only their bright artwork
   reads and the object's silhouette disappears */
.pp-t-gfc { --pad: 4%; --lift: 0.085; }
.pp-t-cake { --pad: 7%; --lift: 0.075; }

/* ── Breakpoints ──
   Column counts, so the grid's tiles never shrink past the point where a menu
   card or a spine of lettering stops reading */
@media (max-width: 1240px) {
  .pp-grid { --pp-cols: 3; }
}

@media (max-width: 860px) {
  .pp-grid { --pp-cols: 2; }
}

@media (max-width: 600px) {
  .pp-grid {
    --pp-cols: 1;
    gap: clamp(22px, 6vw, 34px);
    max-width: 420px;
    margin: 0 auto;
  }

  .pp-intro {
    font-size: 14px;
  }

  .pp-tile-name {
    font-size: 13px;
  }

  .pp-tile-desc {
    font-size: 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pp-tile,
  .pp-tile-art {
    transition: none;
  }

  .pp-tile:hover {
    transform: none;
  }

  .pp-tile:hover .pp-tile-art,
  .pp-tile:focus-visible .pp-tile-art {
    transform: none;
  }
}

/* ── Foggy and Friends (projects/foggy-and-friends.html) ── */

/* ── Foggy and Friends (staging; merge into shared/styles.css) ──
   Prefix: faf-  ·  Page: /projects/foggy-and-friends.html
   Palette is lifted from the magazine's own masthead: the globe blue and green,
   the dog's grey, black ink and a warm paper cream. */

.faf-page,
.faf-slide {
  --faf-cream: #fbf6ea;
  --faf-paper: #ffffff;
  --faf-ink: #1a1a19;
  --faf-ink-soft: #4a4744;
  --faf-blue: #2f49bd;
  --faf-blue-deep: #22359a;
  --faf-green: #0f7a12;
  --faf-green-bright: #1fae1d;
  --faf-grey: #9d9d9c;
  --faf-line: 3px solid #1a1a19;
  --faf-round: 26px;
}

.faf-page {
  max-width: none;
  padding: 0;
  flex: none;
  overflow-x: clip;
  background: var(--faf-cream);
  color: var(--faf-ink);
  font-family: "Futura", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.faf-page img {
  display: block;
}

/* ── Slide ───────────────────────────────────────────────── */

.project-slide.faf-slide {
  background: #fbf6ea;
}

.faf-slide .project-slide-media > img {
  object-fit: cover;
  object-position: center;
}

/* Two crops of the same wall of faces: the wide one everywhere, a taller,
   finer-grained one once the slide is narrower than it is tall. */
.faf-slide .faf-slide-art-tall {
  display: none;
}

@media (max-width: 620px) {
  .faf-slide .faf-slide-art {
    display: none;
  }

  .faf-slide .faf-slide-art-tall {
    display: block;
  }
}

.faf-slide .project-slide-tint {
  background: rgba(251, 246, 234, 0.22);
}

/* The masthead sits on the slide the way the column badges sit on a page:
   a white plate with a black keyline, tilted just off square. */
.faf-slide .project-slide-logo {
  max-width: min(48%, 640px);
  max-height: 66%;
  padding: 30px 42px 34px;
  background: #fff;
  border: 4px solid #1a1a19;
  border-radius: 34px;
  box-shadow: 0 14px 0 rgba(26, 26, 25, 0.22);
  transform: rotate(-1.6deg);
  filter: none;
}

@media (max-width: 900px) {
  .faf-slide .project-slide-logo {
    max-width: 68%;
    max-height: 54%;
    padding: 22px 26px 24px;
    border-radius: 26px;
  }
}

@media (max-width: 480px) {
  .faf-slide .project-slide-logo {
    max-width: 88%;
    max-height: 48%;
    padding: 16px 18px 18px;
    border-width: 3px;
    border-radius: 22px;
    box-shadow: 0 10px 0 rgba(26, 26, 25, 0.22);
  }
}

/* ── Shared furniture ────────────────────────────────────── */

.faf-inner {
  position: relative;
  max-width: 1160px;
  margin: 0 auto;
}

.faf-inner-narrow {
  max-width: 780px;
}

.faf-section {
  position: relative;
  padding: 92px 40px 104px;
  border-bottom: var(--faf-line);
}

.faf-section-cream {
  background: var(--faf-cream);
}

.faf-section-paper {
  background: var(--faf-paper);
}

.faf-section-blue {
  background: var(--faf-blue);
}

.faf-section-green {
  background: var(--faf-green);
}

.faf-title {
  font-family: "GrilledCheese", "Futura", sans-serif;
  font-size: clamp(38px, 4.6vw, 64px);
  line-height: 1;
  letter-spacing: 0.4px;
  text-align: center;
  color: var(--faf-ink);
  margin-bottom: 20px;
}

.faf-title-light {
  color: #fff;
  text-shadow: 0 4px 0 rgba(0, 0, 0, 0.18);
}

.faf-subtitle {
  font-family: "GrilledCheese", "Futura", sans-serif;
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1;
  text-align: center;
  color: var(--faf-ink);
  margin: 72px 0 14px;
}

.faf-lede {
  max-width: 760px;
  margin: 0 auto 44px;
  font-size: 16px;
  line-height: 1.75;
  color: var(--faf-ink-soft);
  text-align: center;
}

.faf-lede-light {
  color: rgba(255, 255, 255, 0.92);
}

.faf-lede-center {
  margin-bottom: 36px;
}

/* ── Intro ───────────────────────────────────────────────── */

.faf-intro {
  background: var(--faf-paper);
  padding: 86px 40px 92px;
  border-bottom: var(--faf-line);
}

.faf-kicker {
  font-family: "GrilledCheese", "Futura", sans-serif;
  font-size: 15px;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  text-align: center;
  color: var(--faf-blue);
  margin-bottom: 18px;
}

.faf-intro-text {
  font-size: 17px;
  line-height: 1.8;
  color: var(--faf-ink-soft);
  text-align: center;
}

.faf-intro-text strong {
  color: var(--faf-ink);
  font-weight: 700;
}

.faf-intro-text em {
  font-style: italic;
  color: var(--faf-ink);
}

.faf-tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 30px;
}

.faf-tags li {
  font-family: "GrilledCheese", "Futura", sans-serif;
  font-size: 17px;
  line-height: 1;
  color: var(--faf-ink);
  background: var(--faf-cream);
  border: 2px solid var(--faf-ink);
  border-radius: 999px;
  padding: 10px 17px 8px;
  box-shadow: 0 3px 0 var(--faf-ink);
}

.faf-tags li:nth-child(4n+1) { background: #cfe0ff; }
.faf-tags li:nth-child(4n+2) { background: #d8f5cf; }
.faf-tags li:nth-child(4n+3) { background: #fff0bd; }
.faf-tags li:nth-child(4n+4) { background: #ffd9d4; }

/* ── Masthead ────────────────────────────────────────────── */

.faf-anatomy {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 44px;
  align-items: center;
  max-width: 1020px;
  margin: 0 auto;
}

.faf-anatomy-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.faf-anatomy-list li {
  border-left: 4px solid var(--faf-blue);
  padding-left: 16px;
}

.faf-anatomy-term {
  display: block;
  font-family: "GrilledCheese", "Futura", sans-serif;
  font-size: 19px;
  line-height: 1.1;
  color: var(--faf-ink);
  margin-bottom: 5px;
}

.faf-anatomy-note {
  display: block;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--faf-ink-soft);
}

.faf-masthead-card {
  background: var(--faf-paper);
  border: var(--faf-line);
  border-radius: var(--faf-round);
  box-shadow: 0 8px 0 rgba(26, 26, 25, 0.16);
  padding: 34px 40px 40px;
}

.faf-masthead-card img {
  width: 100%;
  height: auto;
}

.faf-studies {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  align-items: end;
}

.faf-study {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faf-study-art {
  background: var(--faf-paper);
  border: var(--faf-line);
  border-radius: 20px;
  box-shadow: 0 6px 0 rgba(26, 26, 25, 0.14);
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
}

.faf-study-art img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.faf-study-label {
  font-family: "GrilledCheese", "Futura", sans-serif;
  font-size: 16px;
  text-align: center;
  color: var(--faf-ink-soft);
}

/* ── Columns ─────────────────────────────────────────────── */

.faf-columns {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.faf-column {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.faf-column-art {
  background: var(--faf-paper);
  border: var(--faf-line);
  border-radius: 22px;
  box-shadow: 0 7px 0 rgba(0, 0, 0, 0.2);
  padding: 18px;
  aspect-ratio: 5 / 4;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.faf-column-art img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.faf-column-name {
  font-family: "GrilledCheese", "Futura", sans-serif;
  font-size: 23px;
  line-height: 1.1;
  color: #fff;
}

.faf-column-note {
  font-size: 14.5px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.88);
}

/* ── Cast ────────────────────────────────────────────────── */

.faf-lineup {
  background: var(--faf-paper);
  border: var(--faf-line);
  border-radius: 22px;
  box-shadow: 0 8px 0 rgba(26, 26, 25, 0.14);
  padding: 26px 30px;
}

.faf-lineup img {
  width: 100%;
  height: auto;
}

.faf-cast {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px;
  margin-top: 34px;
}

.faf-card {
  background: var(--faf-paper);
  border: var(--faf-line);
  border-radius: var(--faf-round);
  box-shadow: 0 7px 0 rgba(26, 26, 25, 0.14);
  padding: 18px 20px 22px;
  display: flex;
  flex-direction: column;
}

.faf-card-art {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  overflow: hidden;
}

.faf-card-art img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.faf-card-name {
  font-family: "GrilledCheese", "Futura", sans-serif;
  font-size: 21px;
  line-height: 1.1;
  color: var(--faf-ink);
  margin-bottom: 7px;
}

.faf-card-note {
  font-size: 14px;
  line-height: 1.6;
  color: var(--faf-ink-soft);
}

/* ── Stories ─────────────────────────────────────────────── */

.faf-stories {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
}

.faf-story {
  background: var(--faf-cream);
  border: var(--faf-line);
  border-radius: var(--faf-round);
  box-shadow: 0 7px 0 rgba(26, 26, 25, 0.14);
  padding: 22px 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.faf-story-wide {
  flex-direction: row;
  align-items: center;
  gap: 26px;
}

.faf-story-art {
  background: var(--faf-paper);
  border: 2px solid var(--faf-ink);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  aspect-ratio: 16 / 10;
  flex: 0 0 auto;
}

.faf-story-wide .faf-story-art {
  width: 44%;
  aspect-ratio: 4 / 5;
}

.faf-story-art img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.faf-story-text {
  flex: 1 1 auto;
  min-width: 0;
}

.faf-story-title {
  font-family: "GrilledCheese", "Futura", sans-serif;
  font-size: 25px;
  line-height: 1.1;
  color: var(--faf-ink);
  margin-bottom: 6px;
}

.faf-story-meta {
  font-family: "GrilledCheese", "Futura", sans-serif;
  font-size: 13px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--faf-blue);
  margin-bottom: 9px;
}

.faf-story-note {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--faf-ink-soft);
}

.faf-story-note em {
  font-style: italic;
  color: var(--faf-ink);
}

.faf-also {
  list-style: none;
  max-width: 880px;
  margin: 0 auto;
  border-top: 2px dashed rgba(26, 26, 25, 0.28);
}

.faf-also li {
  display: flex;
  gap: 20px;
  align-items: baseline;
  padding: 15px 4px;
  border-bottom: 2px dashed rgba(26, 26, 25, 0.28);
}

.faf-also-name {
  font-family: "GrilledCheese", "Futura", sans-serif;
  font-size: 19px;
  color: var(--faf-ink);
  flex: 0 0 240px;
}

.faf-also-note {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--faf-ink-soft);
}

/* ── Illustration gallery ────────────────────────────────── */

.faf-gallery {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}

.faf-tile {
  background: var(--faf-paper);
  border: var(--faf-line);
  border-radius: 20px;
  box-shadow: 0 7px 0 rgba(0, 0, 0, 0.2);
  padding: 16px 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.faf-tile-wide {
  grid-column: span 2;
}

.faf-tile img {
  width: 100%;
  height: auto;
  max-height: 340px;
  object-fit: contain;
  margin: auto;
}

.faf-tile span {
  font-family: "GrilledCheese", "Futura", sans-serif;
  font-size: 15px;
  text-align: center;
  color: var(--faf-ink-soft);
}

/* ── Issues and extras ───────────────────────────────────── */

.faf-issues {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
  max-width: 820px;
  margin: 0 auto;
}

.faf-issue {
  background: var(--faf-paper);
  border: var(--faf-line);
  border-radius: var(--faf-round);
  box-shadow: 0 7px 0 rgba(26, 26, 25, 0.14);
  padding: 22px 22px 14px;
}

.faf-issue img {
  width: 100%;
  height: auto;
}

.faf-issue figcaption,
.faf-extra figcaption {
  font-family: "GrilledCheese", "Futura", sans-serif;
  font-size: 17px;
  text-align: center;
  color: var(--faf-ink-soft);
  padding-top: 12px;
}

.faf-extras {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 26px;
  max-width: 980px;
  margin: 30px auto 0;
  align-items: stretch;
}

.faf-extra {
  background: var(--faf-paper);
  border: var(--faf-line);
  border-radius: var(--faf-round);
  box-shadow: 0 7px 0 rgba(26, 26, 25, 0.14);
  padding: 20px 22px 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.faf-extra img {
  width: 100%;
  height: auto;
}

/* ── Breakpoints ─────────────────────────────────────────── */

@media (max-width: 1100px) {
  .faf-columns,
  .faf-cast,
  .faf-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

@media (max-width: 860px) {
  .faf-section,
  .faf-intro {
    padding-left: 24px;
    padding-right: 24px;
  }

  .faf-stories {
    grid-template-columns: minmax(0, 1fr);
  }

  .faf-story-wide {
    flex-direction: column;
    align-items: stretch;
  }

  .faf-story-wide .faf-story-art {
    width: 100%;
    aspect-ratio: 16 / 10;
  }

  .faf-extras {
    grid-template-columns: minmax(0, 1fr);
  }

  .faf-anatomy {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
}

@media (max-width: 560px) {
  .faf-section {
    padding-top: 62px;
    padding-bottom: 68px;
  }

  .faf-intro {
    padding-top: 58px;
    padding-bottom: 64px;
  }

  .faf-columns,
  .faf-cast,
  .faf-gallery,
  .faf-studies,
  .faf-issues {
    grid-template-columns: minmax(0, 1fr);
  }

  .faf-tile-wide {
    grid-column: span 1;
  }

  .faf-masthead-card {
    padding: 20px 20px 24px;
  }

  .faf-lineup {
    padding: 14px;
    overflow-x: auto;
  }

  /* The avatar sheet is one long row; let it scroll rather than shrink to nothing */
  .faf-lineup img {
    width: 620px;
    max-width: none;
  }

  .faf-subtitle {
    margin-top: 54px;
  }

  .faf-also li {
    flex-direction: column;
    gap: 6px;
  }

  .faf-also-name {
    flex: 0 0 auto;
  }
}

/* ── Poptropica Help Network (projects/poptropica-help-network.html) ── */

/* ══════════════════════════════════════════
   Poptropica Help Network (projects/poptropica-help-network.html)
   Staging sheet — merge into shared/styles.css. Every selector is phn- prefixed.
   Slide rules are keyed on .phn-slide only, so they also apply inside the homepage stage.
   ══════════════════════════════════════════ */

/* ── Project slide ── */

.project-slide.phn-slide {
  background: linear-gradient(180deg, #68ceff 0%, #84d7dd 56%, #a8e391 100%);
}

.phn-slide .project-slide-media > img {
  object-position: 50% 64%;
}

.phn-slide .project-slide-logo {
  max-width: min(52%, 660px);
  max-height: 64%;
  filter: drop-shadow(0 14px 26px rgba(18, 70, 120, 0.26));
}

@media (max-width: 900px) {
  .phn-slide .project-slide-logo {
    max-width: 70%;
    max-height: 56%;
  }
}

@media (max-width: 480px) {
  .phn-slide .project-slide-media > img {
    object-position: 58% 70%;
  }

  .phn-slide .project-slide-logo {
    max-width: 84%;
    max-height: 48%;
  }
}

/* ── Page shell ── */

.phn-page {
  --phn-ink: #123a63;
  --phn-paper: #fbf6e8;
  --phn-paper-edge: #ecdfc3;
  --phn-white: #fff;

  max-width: none;
  margin: 0;
  padding: 0;
  flex: none;
  overflow-x: clip;
  background: var(--phn-paper);
  color: var(--phn-ink);
  font-family: "Futura", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.phn-page img {
  display: block;
}

/* ── Bands ── */

.phn-band {
  position: relative;
  padding: clamp(64px, 7vw, 110px) 0 clamp(64px, 7vw, 110px);
}

.phn-band-sky {
  --phn-bump: #a6e4ff;
  background: linear-gradient(180deg, #a6e4ff 0%, #74c8f4 100%);
  color: var(--phn-ink);
}

.phn-band-blue {
  --phn-bump: #2f87cc;
  background: linear-gradient(180deg, #2f87cc 0%, #1b5b97 100%);
  color: #f2fbff;
}

.phn-band-paper {
  --phn-bump: #fbf6e8;
  background: var(--phn-paper);
  color: var(--phn-ink);
}

.phn-band-ink {
  --phn-bump: #10314f;
  background: linear-gradient(180deg, #10314f 0%, #0a2138 100%);
  color: #e6f3ff;
}

/* Cloud scallops: bumps in the band's own top colour, rising over the band above */
.phn-scallop {
  position: absolute;
  left: 0;
  right: 0;
  top: -21px;
  height: 22px;
  background:
    radial-gradient(circle at 26px 22px,
      var(--phn-bump) 0 25px,
      rgba(255, 255, 255, 0) 25.5px) repeat-x;
  background-size: 52px 22px;
  pointer-events: none;
}

.phn-inner {
  width: 100%;
  max-width: 1212px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 56px);
}

.phn-inner-narrow {
  max-width: 860px;
}

/* ── Type ── */

.phn-kicker {
  margin: 0 0 10px;
  font-family: "CreativeBlock", "Futura", sans-serif;
  font-size: clamp(11px, 1.1vw, 13px);
  letter-spacing: 2.4px;
  text-transform: uppercase;
  opacity: 0.72;
}

.phn-title {
  margin: 0 0 6px;
  font-family: "CreativeBlock", "Futura", sans-serif;
  font-weight: 400;
  font-size: clamp(30px, 4.4vw, 58px);
  line-height: 1.02;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.phn-rule {
  width: 84px;
  height: 6px;
  margin: 18px 0 26px;
  border-radius: 3px;
  background: currentColor;
  opacity: 0.22;
}

.phn-rule-center {
  margin-left: auto;
  margin-right: auto;
}

.phn-sub {
  margin: 0 0 10px;
  font-family: "CreativeBlock", "Futura", sans-serif;
  font-weight: 400;
  font-size: clamp(17px, 1.9vw, 23px);
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.phn-lede {
  margin: 0 0 8px;
  max-width: 68ch;
  font-size: clamp(15px, 1.35vw, 18px);
  line-height: 1.66;
}

.phn-body {
  margin: 0 0 8px;
  max-width: 64ch;
  font-size: clamp(14px, 1.15vw, 16px);
  line-height: 1.7;
  opacity: 0.92;
}

.phn-center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.phn-caption {
  margin: 10px 0 0;
  font-family: "CreativeBlock", "Futura", sans-serif;
  font-size: 12px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  opacity: 0.66;
}

.phn-note {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.6;
  opacity: 0.62;
}

/* ── Intro ── */

.phn-intro {
  position: relative;
  padding: clamp(56px, 6vw, 92px) 0 clamp(60px, 6.5vw, 100px);
  background: linear-gradient(180deg, #ffffff 0%, #f4fbff 62%, #e9f6ff 100%);
  color: var(--phn-ink);
}

.phn-intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}

/* The wordmark is white with a pale blue outline, so it needs a sky behind it */
.phn-intro-mark {
  padding: clamp(18px, 2.2vw, 30px);
  border-radius: 18px;
  background: linear-gradient(180deg, #7fd3ff 0%, #4fb2ea 100%);
  box-shadow: 0 14px 30px rgba(18, 70, 120, 0.18);
}

.phn-intro-mark img {
  width: 100%;
  height: auto;
}

.phn-intro-quote {
  margin: 22px 0 0;
  padding-left: 18px;
  border-left: 5px solid rgba(42, 127, 196, 0.35);
  font-size: clamp(14px, 1.2vw, 16px);
  line-height: 1.62;
  font-style: italic;
  opacity: 0.86;
  max-width: 62ch;
}

.phn-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.phn-tags li {
  padding: 7px 14px 6px;
  border-radius: 999px;
  background: rgba(42, 127, 196, 0.12);
  color: #1d5f9e;
  font-family: "CreativeBlock", "Futura", sans-serif;
  font-size: 12px;
  letter-spacing: 1.3px;
  text-transform: uppercase;
}

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

  .phn-intro-mark {
    max-width: 260px;
  }
}

/* ── Browser frame ── */

.phn-browser {
  border-radius: 12px;
  overflow: hidden;
  background: #0d2d4c;
  box-shadow: 0 22px 44px rgba(9, 38, 66, 0.3);
}

.phn-browser-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 28px;
  padding: 0 12px;
  background: #0d2d4c;
}

.phn-browser-bar span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.26);
}

.phn-browser-screen {
  max-height: 620px;
  overflow: hidden;
}

.phn-browser-screen img {
  width: 100%;
  height: auto;
}

/* ── The Network ── */

.phn-net-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(28px, 3.6vw, 56px);
  align-items: start;
}

.phn-marks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 26px 0 0;
}

.phn-mark {
  margin: 0;
  padding: 16px 12px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.14);
  text-align: center;
}

.phn-mark img {
  width: 100%;
  max-width: 116px;
  height: auto;
  margin: 0 auto;
}

.phn-mark-wide img {
  max-width: 100%;
}

.phn-mark figcaption {
  margin-top: 10px;
  font-family: "CreativeBlock", "Futura", sans-serif;
  font-size: 11px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  opacity: 0.8;
}

.phn-linklist {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
}

.phn-linklist li {
  padding: 7px 13px 6px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.16);
  font-size: 13px;
  letter-spacing: 0.3px;
}

@media (max-width: 900px) {
  .phn-net-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Blog logo grid ── */

.phn-logo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: clamp(16px, 1.8vw, 26px);
  margin-top: clamp(26px, 3vw, 40px);
}

.phn-logo-card {
  margin: 0;
  padding: 14px 14px 12px;
  border-radius: 14px;
  background: var(--phn-white);
  border: 1px solid var(--phn-paper-edge);
  box-shadow: 0 8px 20px rgba(18, 58, 99, 0.08);
  display: flex;
  flex-direction: column;
}

.phn-logo-card-art {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 132px;
  overflow: hidden;
  border-radius: 8px;
}

.phn-logo-card img {
  width: 100%;
  height: auto;
}

.phn-logo-card figcaption {
  margin-top: 12px;
  font-family: "CreativeBlock", "Futura", sans-serif;
  font-size: 11.5px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--phn-ink);
  opacity: 0.74;
}

.phn-hand-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(16px, 2vw, 28px);
  margin-top: clamp(22px, 2.4vw, 32px);
}

/* ── Build / development case studies ── */

.phn-build {
  margin-top: clamp(30px, 3.4vw, 48px);
  padding: clamp(20px, 2.6vw, 34px);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.7);
}

.phn-band-blue .phn-build,
.phn-band-ink .phn-build {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.16);
}

.phn-build + .phn-build {
  margin-top: clamp(22px, 2.6vw, 36px);
}

.phn-build-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(14px, 1.8vw, 24px);
  margin-top: 22px;
}

.phn-step {
  margin: 0;
}

.phn-step-art {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  padding: 12px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--phn-white);
  box-shadow: 0 10px 24px rgba(12, 46, 82, 0.16);
}

.phn-step-art-plum {
  background: #5b1d6e;
}

.phn-step-art img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
}

.phn-step figcaption {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.55;
  opacity: 0.86;
}

.phn-step-num {
  display: inline-block;
  margin-right: 7px;
  font-family: "CreativeBlock", "Futura", sans-serif;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  opacity: 0.6;
}

.phn-build-wide {
  margin-top: clamp(16px, 2vw, 24px);
  border-radius: 12px;
  overflow: hidden;
  background: var(--phn-white);
  box-shadow: 0 12px 28px rgba(12, 46, 82, 0.18);
}

.phn-build-wide img {
  width: 100%;
  height: auto;
}

/* ── Editorial ── */

.phn-edit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(18px, 2.2vw, 30px);
  margin-top: clamp(26px, 3vw, 40px);
  align-items: start;
}

.phn-tile {
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  background: var(--phn-white);
  border: 1px solid var(--phn-paper-edge);
  box-shadow: 0 10px 24px rgba(18, 58, 99, 0.1);
}

.phn-tile img {
  width: 100%;
  height: auto;
}

.phn-tile figcaption {
  padding: 12px 16px 14px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--phn-ink);
  opacity: 0.84;
}

.phn-span-2 {
  grid-column: span 2;
}

.phn-headers {
  margin: 0;
  padding: 18px;
  border-radius: 14px;
  background: var(--phn-white);
  border: 1px solid var(--phn-paper-edge);
  box-shadow: 0 10px 24px rgba(18, 58, 99, 0.1);
}

.phn-headers img {
  width: 100%;
  height: auto;
  border-radius: 4px;
}

.phn-headers img + img {
  margin-top: 10px;
}

.phn-headers figcaption {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--phn-ink);
  opacity: 0.84;
}

@media (max-width: 760px) {
  .phn-span-2 {
    grid-column: auto;
  }
}

/* ── Poptropican Portraits ── */

.phn-portrait-head {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: clamp(24px, 3.4vw, 52px);
  align-items: center;
}

.phn-portrait-logo {
  padding: 18px 20px;
  border-radius: 16px;
  background: var(--phn-white);
  box-shadow: 0 14px 30px rgba(12, 46, 82, 0.18);
}

.phn-portrait-logo img {
  width: 100%;
  height: auto;
}

.phn-portrait-row {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(10px, 1.6vw, 26px);
  margin-top: clamp(34px, 4vw, 56px);
  padding-bottom: 20px;
  border-bottom: 6px solid rgba(255, 255, 255, 0.5);
}

.phn-portrait-row img {
  width: auto;
  height: clamp(118px, 12.5vw, 196px);
  filter: drop-shadow(0 8px 12px rgba(12, 46, 82, 0.2));
}

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

  .phn-portrait-logo {
    max-width: 320px;
  }

  .phn-portrait-row img {
    height: 104px;
  }
}

/* ── Fan art ── */

.phn-art-feature {
  margin: clamp(26px, 3vw, 40px) 0 0;
  border-radius: 16px;
  overflow: hidden;
  background: var(--phn-white);
  border: 1px solid var(--phn-paper-edge);
  box-shadow: 0 14px 30px rgba(18, 58, 99, 0.12);
}

.phn-art-feature img {
  width: 100%;
  height: auto;
}

.phn-art-feature figcaption {
  padding: 14px 20px 18px;
  font-size: 13.5px;
  line-height: 1.6;
  opacity: 0.84;
}

.phn-art-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(16px, 2vw, 26px);
  margin-top: clamp(20px, 2.4vw, 30px);
  align-items: start;
}

/* ── Comics ── */

.phn-comic-mark {
  max-width: 460px;
  margin: 0 0 clamp(18px, 2vw, 26px);
}

.phn-comic-mark img {
  width: 100%;
  height: auto;
}

.phn-comic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(18px, 2.2vw, 30px);
  margin-top: clamp(26px, 3vw, 40px);
  align-items: start;
}

.phn-tile-dark {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.26);
}

.phn-tile-dark figcaption {
  color: #e6f3ff;
  opacity: 0.8;
}

/* A figure that is only the browser frame plus a caption, with no card behind it */
.phn-figure-bare {
  margin: 0;
}

.phn-figure-bare figcaption {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.55;
  opacity: 0.82;
}

/* Extra breathing room above a sub-heading that follows a block of work */
.phn-sub-spaced {
  margin-top: clamp(34px, 4vw, 60px);
}

/* ── Shows: podcast + video ── */

.phn-show-mark {
  padding: clamp(18px, 2.2vw, 28px);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.phn-show-mark img {
  width: 100%;
  height: auto;
}

.phn-show-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: clamp(24px, 3vw, 44px);
  align-items: center;
  margin-top: clamp(26px, 3vw, 40px);
}

.phn-show-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(16px, 2vw, 26px);
  margin-top: clamp(20px, 2.4vw, 32px);
  align-items: start;
}

@media (max-width: 860px) {
  .phn-show-split {
    grid-template-columns: 1fr;
  }
}

/* ── Identity ── */

.phn-id-sig {
  max-width: 560px;
  margin: 0 0 clamp(22px, 2.6vw, 34px);
}

.phn-id-sig img {
  width: 100%;
  height: auto;
}

.phn-id-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: clamp(14px, 2.4vw, 38px);
  margin-top: clamp(24px, 3vw, 40px);
}

.phn-id-row img {
  width: auto;
  height: clamp(110px, 12vw, 186px);
  filter: drop-shadow(0 8px 14px rgba(18, 58, 99, 0.2));
}

.phn-id-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 3vw, 46px);
  align-items: center;
  margin-top: clamp(28px, 3.2vw, 46px);
}

@media (max-width: 800px) {
  .phn-id-split {
    grid-template-columns: 1fr;
  }
}

/* ── Outro ── */

.phn-outro {
  position: relative;
  --phn-bump: #0a2138;
  padding: clamp(56px, 6vw, 92px) 0 clamp(60px, 6.5vw, 96px);
  background: linear-gradient(180deg, #0a2138 0%, #071829 100%);
  color: #dceeff;
  text-align: center;
}

.phn-outro-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 26px;
}

.phn-link {
  display: inline-block;
  padding: 13px 26px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  font-family: "CreativeBlock", "Futura", sans-serif;
  font-size: 13px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.phn-link:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.5);
}

.phn-disclaimer {
  max-width: 68ch;
  margin: 32px auto 0;
  font-size: 12px;
  line-height: 1.7;
  opacity: 0.56;
}

/* ── CASC Yearbook (projects/casc-yearbook.html) ── */

/* ══════════════════════════════════════════════════════════════════════════
   CASC Yearbook (prefix: csy-)
   projects/casc-yearbook.html

   Every selector is scoped to a csy- class or to .csy-slide, so nothing here
   touches another page. The slide rules are NOT scoped under main.csy-page:
   the homepage stage clones the slide on its own, without page scripts.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Palette ──
   Sampled from the cover artwork: the year's deep teal, the mascot's blue,
   the pattern's sky and the blocked gold of YEARBOOK. Declared on the page
   AND on the slide, because the homepage stage lifts the slide out of
   main.csy-page. */
.csy-page,
.csy-slide {
  --csy-teal: #155a72;
  --csy-blue: #4677a3;
  --csy-sky: #88bdd6;
  --csy-gold: #b6924d;
  --csy-ink: #1b2a33;
  --csy-soft: #45606e;
  --csy-paper: #eef2f5;
  --csy-paper-2: #f8fafb;
  --csy-deep: #232c33;
  --csy-deep-2: #192127;
  --csy-rule: rgba(27, 42, 51, 0.16);
  /* The paper mat around every printed piece. Also the flex-basis of the row
     below, which is what makes its three images share one height. */
  --csy-mat: clamp(7px, 0.8vw, 13px);
}

.csy-page {
  max-width: none;
  padding: 0;
  flex: none;
  overflow-x: clip;
  background: var(--csy-paper);
  color: var(--csy-ink);
}

.csy-page img {
  display: block;
}

/* ══════════════════════════════════════════
   Slide — the cover's own pattern, darkened into a wall, with the printed
   front board standing on it beside a torn white title patch.
   ══════════════════════════════════════════ */

.project-slide.csy-slide {
  /* The pattern's own dark corner, so the slide has a ground while it decodes */
  background: #1b232a;
}

/* Hold the pattern's dark top-right corner in frame and keep it from reading
   as wallpaper: the tint below does most of the work */
.csy-slide .project-slide-media > img {
  object-position: 60% 35%;
}

.csy-slide .project-slide-tint {
  background:
    radial-gradient(120% 100% at 50% 46%, rgba(18, 26, 33, 0.58) 0%, rgba(14, 20, 26, 0.84) 62%, rgba(10, 14, 19, 0.94) 100%);
}

.csy-slide-stage {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(26px, 4vw, 72px);
  width: 100%;
  max-width: 1080px;
  padding: 0 clamp(20px, 4vw, 56px);
}

/* The title patch: a rough white shape, as the cover's lettering sits on.
   clip-path clips box-shadow away, so the lift comes from a drop-shadow filter. */
.csy-slide-plate {
  flex: 0 1 auto;
  width: min(430px, 44vw);
  padding: clamp(24px, 2.6vw, 38px) clamp(26px, 3vw, 42px) clamp(26px, 2.8vw, 40px);
  background: #fdfdfc;
  transform: rotate(-1.3deg);
  filter: drop-shadow(0 14px 30px rgba(0, 0, 0, 0.42));
  clip-path: polygon(
    1.4% 3.4%, 14% 1.2%, 28% 3.2%, 43% 0.9%, 58% 2.9%, 73% 0.7%, 87% 2.8%, 98.4% 1.4%,
    99% 15%, 97.4% 32%, 99.2% 50%, 97.6% 68%, 99.1% 85%, 97.6% 98.4%,
    86% 97.2%, 70% 99.2%, 54% 97%, 38% 99.3%, 22% 97.2%, 7% 98.8%,
    1.1% 86%, 2.7% 66%, 0.9% 48%, 2.6% 28%, 1.2% 14%
  );
}

.csy-slide-kicker {
  font-size: clamp(10px, 0.9vw, 12px);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--csy-blue);
}

.csy-slide-title {
  display: flex;
  flex-direction: column;
  margin-top: clamp(8px, 1vw, 14px);
  font-size: clamp(36px, 4.4vw, 60px);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--csy-teal);
}

.csy-slide-title span:last-child {
  margin-top: 0.14em;
  font-size: 0.6em;
  letter-spacing: 0.11em;
  color: var(--csy-gold);
}

.csy-slide-rule {
  display: block;
  width: 88px;
  height: 6px;
  margin: clamp(14px, 1.6vw, 20px) 0 clamp(12px, 1.4vw, 18px);
  border-radius: 3px;
  background: var(--csy-sky);
}

.csy-slide-sub {
  font-size: clamp(12.5px, 1.1vw, 15px);
  line-height: 1.5;
  font-weight: 400;
  color: var(--csy-soft);
}

/* Keeps the year whole when the line wraps on a phone */
.csy-nowrap {
  white-space: nowrap;
}

/* The printed front board, standing on the pattern. Sized by min() of width
   and height so it never outgrows a short window. */
.csy-slide-book {
  position: relative;
  flex: 0 0 auto;
  width: max(160px, min(340px, 26vw, 38vh));
  aspect-ratio: 900 / 1273;
  border-radius: 2px;
  box-shadow:
    0 34px 60px -22px rgba(0, 0, 0, 0.72),
    0 6px 16px rgba(0, 0, 0, 0.45);
  transform: rotate(1.6deg);
}

.csy-slide-book img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  border-radius: 2px;
}

/* The board's left edge is the spine side of the wrap, where the artwork's own
   gradient lifts to white. Shading it back reads as the spine of a bound book. */
.csy-slide-book::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    rgba(16, 26, 34, 0.5) 0%,
    rgba(16, 26, 34, 0.24) 3.5%,
    rgba(16, 26, 34, 0.06) 9%,
    rgba(16, 26, 34, 0) 15%
  );
  pointer-events: none;
}

@media (max-width: 720px) {
  .csy-slide-plate {
    width: min(430px, 52vw);
  }
}

@media (max-width: 480px) {
  .csy-slide-stage {
    flex-direction: column;
    gap: clamp(20px, 5vh, 34px);
    padding: 0 22px;
  }

  /* Percentages, not vw: the sidebar's gutter is padding on <body>, so vw here
     would be wider than the content area the slide actually gets. */
  .csy-slide-plate {
    width: 100%;
    max-width: 360px;
    padding: 22px 24px 24px;
  }

  .csy-slide-book {
    width: min(200px, 62%);
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Nothing animates here; the tilts are static and stay */
  .csy-slide-plate,
  .csy-slide-book {
    transform: none;
  }
}

/* ══════════════════════════════════════════
   Description
   ══════════════════════════════════════════ */

.csy-desc {
  background: var(--csy-deep);
  padding: clamp(38px, 4.2vw, 56px) 0;
}

.csy-desc-text {
  max-width: 860px;
  font-size: clamp(16px, 1.15vw, 17.5px);
  line-height: 1.75;
  font-weight: 300;
  color: #dbe4ea;
}

.csy-desc-text strong {
  font-weight: 600;
  color: #fff;
}

/* ══════════════════════════════════════════
   Sections
   ══════════════════════════════════════════ */

.csy-section {
  padding: clamp(48px, 5.4vw, 84px) 0 clamp(52px, 5.8vw, 92px);
}

.csy-section-paper {
  background: var(--csy-paper);
}

.csy-section-deep {
  background: linear-gradient(var(--csy-deep) 0%, var(--csy-deep-2) 100%);
  color: #eaf0f4;
}

.csy-inner {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 max(2.1vw, 28px);
}

/* Head: the title on the left, what it is on the right */
.csy-head {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(18px, 3.4vw, 56px);
  align-items: start;
  margin-bottom: clamp(28px, 3.4vw, 46px);
}

.csy-title {
  font-size: clamp(27px, 3.1vw, 38px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--csy-teal);
}

.csy-section-deep .csy-title {
  color: #fff;
}

.csy-title::after {
  content: '';
  display: block;
  width: 64px;
  height: 5px;
  margin-top: clamp(12px, 1.4vw, 18px);
  border-radius: 2.5px;
  background: var(--csy-gold);
}

.csy-intro {
  font-size: clamp(15px, 1.1vw, 16.5px);
  line-height: 1.72;
  font-weight: 300;
  color: var(--csy-soft);
}

.csy-section-deep .csy-intro {
  color: #bdccd6;
}

.csy-body {
  font-size: clamp(15px, 1.05vw, 16px);
  line-height: 1.72;
  font-weight: 300;
  color: var(--csy-soft);
}

/* ══════════════════════════════════════════
   Figures — printed artwork gets a paper mat and a shadow
   ══════════════════════════════════════════ */

.csy-sheet {
  background: #fff;
  padding: var(--csy-mat);
  border-radius: 3px;
  box-shadow:
    0 20px 46px -22px rgba(16, 28, 36, 0.5),
    0 2px 7px rgba(16, 28, 36, 0.14);
}

.csy-section-deep .csy-sheet {
  background: rgba(255, 255, 255, 0.09);
  box-shadow:
    0 22px 46px -20px rgba(0, 0, 0, 0.62),
    0 1px 0 rgba(255, 255, 255, 0.07) inset;
}

.csy-sheet img,
.csy-card img {
  width: 100%;
  height: auto;
  border-radius: 1px;
}

.csy-card {
  background: #fff;
  border: 1px solid var(--csy-rule);
  border-radius: 4px;
  padding: clamp(14px, 2vw, 28px);
  box-shadow: 0 18px 44px -24px rgba(16, 28, 36, 0.45);
}

.csy-figure figcaption {
  margin-top: clamp(11px, 1.1vw, 15px);
  font-size: 13.5px;
  line-height: 1.6;
  font-weight: 300;
  color: var(--csy-soft);
}

.csy-section-deep .csy-figure figcaption {
  color: #a9bcc8;
}

/* ══════════════════════════════════════════
   The Parts — the pattern as a full-bleed band, then the three drawings
   ══════════════════════════════════════════ */

.csy-band {
  margin-bottom: clamp(30px, 3.8vw, 52px);
}

.csy-band img {
  width: 100%;
  height: clamp(150px, 22vw, 300px);
  object-fit: cover;
  object-position: 50% 58%;
}

.csy-band figcaption {
  max-width: 1140px;
  margin: clamp(11px, 1.1vw, 15px) auto 0;
  padding: 0 max(2.1vw, 28px);
  font-size: 13.5px;
  line-height: 1.6;
  font-weight: 300;
  color: #a9bcc8;
}

/* One row, one height: each figure grows in proportion to its image's aspect
   ratio, and starts from the width of its own paper mat, so all three images
   end up exactly the same height. */
.csy-row {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(16px, 2vw, 28px);
  align-items: flex-start;
}

.csy-row > .csy-figure {
  min-width: 0;
  flex-basis: calc(var(--csy-mat) * 2);
  flex-shrink: 1;
}

/* The child selector keeps these at the same specificity as the rule above, so
   the breakpoints below can hand a figure a full-width basis instead. */
.csy-row > .csy-f-lettering { flex-grow: 1.531; }
.csy-row > .csy-f-heron { flex-grow: 0.878; }
.csy-row > .csy-f-flight { flex-grow: 1.176; }

/* ── Palette strip ── */
.csy-palette {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(16px, 2vw, 30px);
  list-style: none;
  margin-top: clamp(30px, 3.6vw, 48px);
  padding-top: clamp(22px, 2.4vw, 32px);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.csy-palette li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  line-height: 1.3;
}

.csy-swatch {
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22);
}

.csy-swatch-name {
  font-weight: 500;
  color: #eaf0f4;
}

.csy-swatch-hex {
  font-weight: 400;
  letter-spacing: 0.04em;
  color: #92a6b3;
}

/* ══════════════════════════════════════════
   Inside — the statistics graphic beside its note
   ══════════════════════════════════════════ */

.csy-inside {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 60px);
  align-items: center;
}

.csy-quote {
  margin-top: clamp(18px, 2vw, 26px);
  font-size: clamp(19px, 1.9vw, 25px);
  line-height: 1.32;
  font-weight: 600;
  color: var(--csy-teal);
}

.csy-quote-note {
  margin-top: 9px;
  font-size: 13px;
  line-height: 1.55;
  font-weight: 300;
  color: var(--csy-soft);
}

/* ══════════════════════════════════════════
   Breakpoints
   ══════════════════════════════════════════ */

@media (max-width: 900px) {
  .csy-head {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(14px, 2.4vw, 22px);
  }

  .csy-inside {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 720px) {
  /* The lettering is the widest of the three, so it takes its own line and the
     two birds share the next one */
  .csy-row > .csy-f-lettering {
    flex: 1 0 100%;
  }
}

@media (max-width: 480px) {
  .csy-section {
    padding: 42px 0 46px;
  }

  .csy-desc {
    padding: 32px 0;
  }

  .csy-inner {
    padding: 0 22px;
  }

  .csy-band figcaption {
    padding: 0 22px;
  }

  .csy-row > .csy-f-heron,
  .csy-row > .csy-f-flight {
    flex: 1 0 100%;
  }

  .csy-palette {
    gap: 14px 22px;
  }
}

/* ── Gravity Falls, Season One (projects/gravity-falls-cover.html) ── */

/* ══════════════════════════════════════════════════════════════════════════
   Gravity Falls, Season One (prefix: gfc-)
   projects/gravity-falls-cover.html

   Every selector is scoped to a gfc- class, so nothing here touches another
   page. The slide rules are NOT scoped under main.gfc-page: the homepage
   stage clones the slide on its own, without running page scripts.

   Palette is sampled from the cover artwork itself (bark, rust, sage, tan)
   over a cool near-black, so the warm printed insert separates from the
   ground it sits on.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Palette ──
   Declared on the page AND on the slide, because the homepage stage lifts the
   slide out of main.gfc-page. */
.gfc-page,
.gfc-slide {
  --gfc-void: #0c0e10;
  --gfc-void-2: #111417;
  --gfc-cream: #e6dfd0;
  --gfc-soft: #968f80;
  --gfc-rust: #c25f22;
  --gfc-tan: #c2a577;
  --gfc-sage: #74867f;
  --gfc-rule: rgba(230, 223, 208, 0.14);
  --gfc-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --gfc-bar: linear-gradient(90deg,
    var(--gfc-rust) 0 34%,
    var(--gfc-tan) 0 67%,
    var(--gfc-sage) 0 100%);
}

.gfc-page {
  max-width: none;
  padding: 0;
  flex: none;
  overflow-x: clip;
  background: var(--gfc-void);
  color: var(--gfc-cream);
}

/* ══════════════════════════════════════════
   Slide — the case as a cut-out on a cool dark ground, title set in plain
   type beneath it. The show's own logo is never used as a page mark.
   ══════════════════════════════════════════ */

.project-slide.gfc-slide {
  align-items: flex-end;
  background: radial-gradient(112% 88% at 50% 30%,
    #2b2d2c 0%,
    #16181a 46%,
    #07080a 100%);
}

/* Overrides the global "cover the whole media box" rule for slide art. */
.gfc-slide .project-slide-media > .gfc-slide-case {
  position: absolute;
  inset: auto;
  left: 50%;
  top: 6%;
  width: 62%;
  height: auto;
  max-width: none;
  /* With width set and height auto, max-height still keeps the ratio, so a
     short window shrinks the case instead of squashing it. */
  max-height: 58%;
  object-fit: contain;
  transform: translateX(-50%);
}

/* Scrim across the foot of the slide so the title always has a dark ground,
   whatever the case is doing above it. */
.gfc-slide .project-slide-media::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 48%;
  background: linear-gradient(180deg,
    rgba(7, 8, 10, 0) 0%,
    rgba(7, 8, 10, 0.7) 60%,
    rgba(7, 8, 10, 0.94) 100%);
  pointer-events: none;
}

.gfc-slide .gfc-slide-title {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 0 clamp(20px, 5vw, 56px) clamp(30px, 6vh, 76px);
  text-align: center;
  color: #f1ebdf;
}

.gfc-slide .gfc-slide-kicker {
  margin: 0 auto clamp(12px, 1.7vh, 20px);
  font-family: var(--gfc-mono);
  font-size: clamp(10px, 0.82vw, 13px);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gfc-tan);
}

.gfc-slide .gfc-slide-kicker::before {
  content: "";
  display: block;
  width: 54px;
  height: 5px;
  margin: 0 auto clamp(12px, 1.7vh, 18px);
  background: var(--gfc-bar);
}

.gfc-slide .gfc-slide-title h1 {
  margin: 0;
  font-weight: 800;
  font-size: clamp(34px, 5.4vw, 80px);
  line-height: 0.9;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}

.gfc-slide .gfc-slide-title h1 span {
  display: block;
  color: var(--gfc-tan);
}

.gfc-slide .gfc-slide-sub {
  margin: clamp(12px, 1.7vh, 22px) auto 0;
  font-weight: 300;
  font-size: clamp(12px, 1vw, 16px);
  letter-spacing: 0.02em;
  color: rgba(241, 235, 223, 0.74);
}

/* Narrow windows: the case is sized by width instead, and sits lower so the
   slide isn't top-heavy. */
@media (max-width: 900px) {
  .gfc-slide .project-slide-media > .gfc-slide-case {
    width: 88%;
    top: 14%;
    max-height: 46%;
  }
}

@media (max-width: 480px) {
  .gfc-slide .project-slide-media > .gfc-slide-case {
    width: 96%;
    top: 19%;
    max-height: 40%;
  }

  /* The case can only get so wide on a phone, so the title is lifted to meet
     it instead of leaving a hole down the middle of the slide. */
  .gfc-slide .gfc-slide-title {
    padding: 0 16px clamp(56px, 17vh, 150px);
  }

  .gfc-slide .gfc-slide-title h1 {
    font-size: clamp(30px, 11vw, 54px);
  }

  .gfc-slide .gfc-slide-kicker {
    font-size: 9px;
    letter-spacing: 0.22em;
  }

  .gfc-slide .gfc-slide-sub {
    font-size: 13px;
  }
}

/* ══════════════════════════════════════════
   Page furniture
   ══════════════════════════════════════════ */

.gfc-inner {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 60px);
}

.gfc-section {
  position: relative;
  padding: clamp(60px, 7.6vw, 126px) 0;
}

.gfc-section-object {
  background: radial-gradient(76% 64% at 50% 46%,
    #15181b 0%,
    var(--gfc-void) 74%);
}

.gfc-section-back {
  background: var(--gfc-void-2);
}

/* ── Type ── */

.gfc-head {
  position: relative;
  padding-top: clamp(18px, 2.2vw, 30px);
  border-top: 1px solid var(--gfc-rule);
  margin-bottom: clamp(28px, 3.6vw, 56px);
}

/* A short bar in the cover's own colours, sitting on the section rule */
.gfc-head::before {
  content: "";
  position: absolute;
  top: -3px;
  left: 0;
  width: 64px;
  height: 5px;
  background: var(--gfc-bar);
}

.gfc-eyebrow {
  margin: 0 0 clamp(10px, 1.1vw, 16px);
  font-family: var(--gfc-mono);
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gfc-soft);
}

.gfc-title {
  margin: 0;
  font-weight: 800;
  font-size: clamp(29px, 3.5vw, 56px);
  line-height: 0.98;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}

.gfc-lede,
.gfc-body {
  margin: 0;
  font-weight: 300;
  font-size: clamp(15px, 1.05vw, 18px);
  line-height: 1.76;
  color: rgba(230, 223, 208, 0.84);
}

.gfc-lede {
  margin-top: clamp(16px, 1.8vw, 26px);
  max-width: 62ch;
}

.gfc-body {
  max-width: 60ch;
}

.gfc-lede em,
.gfc-body em,
.gfc-desc-text em {
  font-style: italic;
  color: var(--gfc-cream);
}

/* ── Description ── */

.gfc-desc {
  padding: clamp(54px, 6.6vw, 108px) 0 clamp(44px, 5.2vw, 84px);
}

/* The facts sit beside the paragraph rather than under it, so the measure
   stays readable and the page doesn't open with one narrow column. */
.gfc-desc .gfc-inner {
  max-width: 1180px;
  display: grid;
  grid-template-columns: minmax(0, 1.34fr) minmax(0, 0.8fr);
  gap: clamp(28px, 3.4vw, 60px);
  align-items: start;
}

.gfc-desc-text {
  margin: 0;
  font-weight: 300;
  font-size: clamp(17px, 1.5vw, 25px);
  line-height: 1.62;
  max-width: 64ch;
  color: rgba(230, 223, 208, 0.9);
}

.gfc-desc-text strong {
  font-weight: 600;
  color: #fbf6ec;
}

.gfc-meta {
  margin: 0;
  padding: clamp(4px, 0.6vw, 10px) 0 0 clamp(20px, 2.4vw, 42px);
  border-left: 1px solid var(--gfc-rule);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(16px, 1.9vw, 28px);
}

.gfc-meta dt {
  margin: 0 0 8px;
  font-family: var(--gfc-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gfc-rust);
}

.gfc-meta dd {
  margin: 0;
  font-weight: 300;
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.55;
  color: var(--gfc-cream);
}

/* ── Figures ── */

.gfc-figure {
  margin: 0;
  display: flex;
  flex-direction: column;
}

.gfc-plate {
  position: relative;
  border-radius: 3px;
  overflow: hidden;
  background: #090a0c;
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.5),
    0 26px 62px rgba(0, 0, 0, 0.55);
}

.gfc-plate img {
  display: block;
  width: 100%;
  height: auto;
}

.gfc-plate-flush {
  border-radius: 2px;
}

/* A cut-out needs a surface to sit on: a lit panel, so the case's own baked
   shadow lands on something and the dark plastic body keeps its silhouette. */
.gfc-plate-stage {
  background:
    radial-gradient(74% 62% at 50% 40%, rgba(255, 255, 255, 0.055) 0%, rgba(255, 255, 255, 0) 100%),
    linear-gradient(180deg, #23272b 0%, #171a1d 56%, #0f1113 100%);
  padding: clamp(14px, 2.6vw, 44px) clamp(10px, 2vw, 34px);
}

/* The two full panels are printed inserts behind a clear sleeve: a faint
   sheen across the corners, never over the clicks (the lightbox listens for
   clicks on the image itself). */
.gfc-figure-panel .gfc-plate::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(112deg,
    rgba(255, 255, 255, 0.13) 0%,
    rgba(255, 255, 255, 0.03) 17%,
    rgba(255, 255, 255, 0) 33%,
    rgba(255, 255, 255, 0) 67%,
    rgba(255, 255, 255, 0.04) 85%,
    rgba(255, 255, 255, 0.11) 100%);
}

.gfc-figure figcaption {
  margin-top: clamp(10px, 1.1vw, 15px);
  font-family: var(--gfc-mono);
  font-size: 11px;
  line-height: 1.55;
  letter-spacing: 0.05em;
  color: var(--gfc-soft);
}

/* The lead cut-out is centred, with its caption under the middle of it */
.gfc-figure-lead {
  align-items: center;
}

.gfc-figure-lead .gfc-plate {
  width: 100%;
  max-width: 1060px;
}

.gfc-figure-lead figcaption {
  text-align: center;
}

.gfc-figure-wide .gfc-plate {
  width: 100%;
}

/* ── Panel + copy split ── */

.gfc-split {
  display: grid;
  grid-template-columns: minmax(0, 0.76fr) minmax(0, 1fr);
  gap: clamp(26px, 3.6vw, 64px);
  align-items: start;
}

.gfc-split-flip {
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.76fr);
}

.gfc-split-flip > .gfc-figure-panel {
  order: 2;
}

.gfc-split-body {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2.4vw, 34px);
}

/* ── Responsive ── */

@media (max-width: 980px) {
  .gfc-split,
  .gfc-split-flip,
  .gfc-desc .gfc-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .gfc-meta {
    margin-top: clamp(28px, 4vw, 44px);
    padding: clamp(20px, 2.6vw, 30px) 0 0;
    border-left: none;
    border-top: 1px solid var(--gfc-rule);
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  }

  .gfc-split-flip > .gfc-figure-panel {
    order: 0;
  }

  /* Stacked, a 2:3 panel at full column width is taller than the window */
  .gfc-split > .gfc-figure-panel {
    width: 100%;
    max-width: 480px;
  }
}

@media (max-width: 480px) {
  .gfc-section {
    padding: clamp(46px, 13vw, 68px) 0;
  }

  .gfc-desc {
    padding: clamp(40px, 11vw, 60px) 0 clamp(32px, 9vw, 48px);
  }

  .gfc-head {
    margin-bottom: 26px;
  }

  .gfc-split > .gfc-figure-panel {
    max-width: none;
  }

  /* The cut-out already carries transparent margin of its own, so the stage
     needs almost no padding at phone width */
  .gfc-plate-stage {
    padding: 6px 4px;
  }

  .gfc-meta {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
}

/* ── Heart Strings (projects/heart-strings.html) ── */

/* ══════════════════════════════════════════════════════════════════════════
   Heart Strings (prefix: hs-)
   projects/heart-strings.html

   Every selector is scoped to an hs- class or to .hs-slide, so nothing here
   touches another page. The slide rules are NOT scoped under main.hs-page:
   the homepage stage clones the slide on its own, without page scripts, and
   sizes it with percentages rather than viewport units for the same reason.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Palette ──
   Sampled from the cover artwork: four flats, plus the bolt grey and the plum
   of the dripping HEART. Declared on the page AND on the slide, because the
   homepage stage lifts the slide out of main.hs-page. */
.hs-page,
.hs-slide {
  --hs-navy: #011725;
  --hs-navy-2: #030d16;
  --hs-mint: #79bc99;
  --hs-mint-soft: #a8d4bd;
  --hs-blood: #af2423;
  --hs-bone: #fefefe;
  --hs-green-deep: #2e473a;
  --hs-bolt: #abaeac;
  --hs-plum: #8b395f;
  --hs-paper: #ece4d7;
  --hs-paper-2: #f7f2ea;
  --hs-ink: #14202a;
  --hs-ink-soft: #4d5b64;
  --hs-studio: #24252a;
}

.hs-page {
  max-width: none;
  padding: 0;
  flex: none;
  overflow-x: clip;
  background: var(--hs-navy);
  color: var(--hs-bone);
}

.hs-page figure {
  margin: 0;
}

.hs-page img {
  display: block;
}

/* ══════════════════════════════════════════
   Slide
   The sleeve as an object: a studio floor, the disc drawn in CSS behind the
   square, and the lockup printed on the square's top right corner — the
   arrangement the mockup photograph shows.
   ══════════════════════════════════════════ */

.project-slide.hs-slide {
  /* The floor's mid grey, so the slide never flashes black while the art decodes */
  background: #2f3035;
}

.hs-slide-floor {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(118% 92% at 50% 34%, #55565b 0%, #3b3c41 42%, #24252a 74%, #16171a 100%);
}

/* The square is the sizing element: height-driven on landscape slides (the
   homepage stage included), width-driven once the frame goes narrow. The disc
   sticks out 42% of the square's width to the right, so the package is pulled
   half of that back to the left to keep the pair optically centred. */
.hs-slide-package {
  position: relative;
  height: 70%;
  aspect-ratio: 1 / 1;
  max-width: 52%;
  transform: translateX(-20%);
}

.hs-slide-sleeve {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  border-radius: 2px;
  box-shadow:
    0 2px 2px rgba(0, 0, 0, 0.4),
    0 26px 44px rgba(0, 0, 0, 0.5),
    0 60px 90px rgba(0, 0, 0, 0.35);
}

/* The disc: matte black behind the square, with a lit outer edge so it reads
   as a disc and not a hole in the floor (the hub sits behind the sleeve, just
   as it does in the mockup) */
.hs-slide-disc {
  position: absolute;
  top: 6%;
  left: 47%;
  height: 88%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%,
      #33343a 0 6.2%,
      #0c0d10 6.3% 8.2%,
      #1c1d22 8.3% 12.2%,
      #282a30 12.3% 13.1%,
      #15161a 13.2% 97.4%,
      #3c3d43 97.5% 99%,
      #1e1f23 99.1% 100%);
  box-shadow: 0 22px 44px rgba(0, 0, 0, 0.55);
}

.hs-slide-disc::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    conic-gradient(from 205deg,
      rgba(255, 255, 255, 0.11),
      rgba(255, 255, 255, 0) 20%,
      rgba(255, 255, 255, 0.06) 47%,
      rgba(255, 255, 255, 0) 68%,
      rgba(255, 255, 255, 0.05) 100%);
}

/* Printed ink on the sleeve, not a floating logo: no drop shadow, and placed
   where the mockup prints it. Overrides the global .project-slide-logo box. */
.hs-slide .project-slide-logo.hs-slide-logo {
  position: absolute;
  top: 6.5%;
  right: 5.5%;
  width: 34%;
  height: auto;
  max-width: none;
  max-height: none;
  filter: none;
}

/* Narrow or portrait frames (phones, and the homepage stage on a phone): the
   square sizes off the width instead, and the disc is dropped so the cover
   can be as big as the frame allows. */
@media (max-aspect-ratio: 11/10) {
  .hs-slide-package {
    height: auto;
    width: 82%;
    max-width: 82%;
    transform: none;
  }

  .hs-slide-disc {
    display: none;
  }

  .hs-slide .project-slide-logo.hs-slide-logo {
    width: 38%;
  }
}

/* ══════════════════════════════════════════
   Page furniture
   ══════════════════════════════════════════ */

.hs-inner {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
}

.hs-inner-narrow {
  max-width: 820px;
}

.hs-inner-wide {
  max-width: 1400px;
}

.hs-section {
  padding: clamp(52px, 6vw, 92px) clamp(20px, 4vw, 48px) clamp(58px, 6.6vw, 100px);
}

.hs-section-paper {
  background: var(--hs-paper);
  color: var(--hs-ink);
}

.hs-section-navy {
  background: var(--hs-navy);
}

.hs-section-dark {
  background: var(--hs-navy-2);
}

.hs-section-studio {
  background: var(--hs-studio);
}

.hs-head {
  text-align: center;
  margin-bottom: clamp(32px, 4vw, 54px);
}

.hs-title {
  font-size: clamp(24px, 3.2vw, 38px);
  font-weight: 700;
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--hs-mint);
}

.hs-section-paper .hs-title {
  color: var(--hs-ink);
}

/* Stitch rule with a bolt on each end, after the STRINGS lettering */
.hs-stitch {
  position: relative;
  width: clamp(120px, 18vw, 190px);
  height: 2px;
  margin: clamp(18px, 2vw, 26px) auto 0;
  color: var(--hs-mint);
  background: repeating-linear-gradient(90deg, currentColor 0 9px, transparent 9px 17px);
}

.hs-section-paper .hs-stitch {
  color: var(--hs-green-deep);
}

.hs-stitch::before,
.hs-stitch::after {
  content: '';
  position: absolute;
  top: -5px;
  width: 15px;
  height: 12px;
  border-radius: 3px;
  background: var(--hs-bolt);
}

.hs-stitch::before {
  left: -20px;
}

.hs-stitch::after {
  right: -20px;
}

.hs-intro {
  max-width: 620px;
  margin: clamp(20px, 2.4vw, 30px) auto 0;
  font-size: 16px;
  line-height: 1.75;
  font-weight: 300;
  color: rgba(254, 254, 254, 0.78);
}

.hs-section-paper .hs-intro {
  color: var(--hs-ink-soft);
}

.hs-caption {
  margin-top: 12px;
  font-size: 12px;
  line-height: 1.6;
  font-weight: 300;
  letter-spacing: 0.02em;
  color: rgba(254, 254, 254, 0.6);
}

.hs-section-paper .hs-caption {
  color: var(--hs-ink-soft);
}

/* ══════════════════════════════════════════
   Description
   ══════════════════════════════════════════ */

.hs-desc {
  background: var(--hs-navy);
  padding: clamp(44px, 5vw, 76px) clamp(20px, 4vw, 48px) clamp(48px, 5.4vw, 84px);
}

.hs-eyebrow {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--hs-mint);
}

.hs-desc-text {
  margin-top: clamp(18px, 2vw, 26px);
  font-size: 17px;
  line-height: 1.78;
  font-weight: 300;
  color: rgba(254, 254, 254, 0.9);
}

.hs-desc-text strong {
  font-weight: 600;
  color: var(--hs-bone);
}

.hs-tags {
  list-style: none;
  margin: clamp(26px, 3vw, 38px) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.hs-tags li {
  padding: 8px 15px 7px;
  border: 1px solid rgba(121, 188, 153, 0.4);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hs-mint-soft);
}

/* ══════════════════════════════════════════
   Sketchbook
   Three sheets sharing one row height: flex-grow follows each sketch's aspect
   ratio, so the sheets line up top and bottom.
   ══════════════════════════════════════════ */

.hs-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: clamp(16px, 2.4vw, 32px);
  align-items: flex-start;
}

.hs-step {
  min-width: 0;
  flex-basis: 0;
  flex-shrink: 1;
}

.hs-step:nth-child(1) { flex-grow: 1248; }
.hs-step:nth-child(2) { flex-grow: 1043; }
.hs-step:nth-child(3) { flex-grow: 966; }

/* No padding: the grow ratios above only line the three sheets up top and
   bottom if the sheet is exactly the image */
.hs-sheet {
  overflow: hidden;
  border-radius: 3px;
  background: #fff;
  border: 1px solid rgba(20, 32, 42, 0.16);
  box-shadow: 0 10px 22px rgba(20, 32, 42, 0.12);
}

.hs-sheet img {
  width: 100%;
  height: auto;
}

.hs-step figcaption {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 16px;
}

/* Number chips, bolted through like the lettering */
.hs-num {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--hs-mint);
  border: 2px solid var(--hs-green-deep);
  color: var(--hs-navy);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

.hs-num::before,
.hs-num::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 7px;
  height: 5px;
  margin-top: -2.5px;
  border-radius: 1.5px;
  background: var(--hs-bolt);
}

.hs-num::before {
  left: -7px;
}

.hs-num::after {
  right: -7px;
}

.hs-step-text {
  font-size: 13px;
  line-height: 1.65;
  font-weight: 300;
  color: var(--hs-ink-soft);
}

/* ══════════════════════════════════════════
   The cover
   The square carries two rows of the grid; the details stack beside it.
   ══════════════════════════════════════════ */

/* Column widths are ~2.07 : 1, so two stacked details come out the height of
   the square beside them; the two flexible rows then share whatever height
   the square actually takes, and the details crop into what is left. */
.hs-cover-grid {
  display: grid;
  grid-template-columns: minmax(0, 2.07fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(16px, 2.2vw, 28px);
  align-items: stretch;
}

.hs-cover {
  grid-row: span 2;
}

.hs-cover img,
.hs-detail img {
  width: 100%;
  border-radius: 2px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.42);
}

.hs-cover img {
  height: auto;
}

.hs-detail {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
}

/* Crops off the bottom of each detail rather than the middle, so the next
   shape down the cover doesn't creep into frame */
.hs-detail img {
  height: 100%;
  object-fit: cover;
  object-position: 50% 12%;
}

.hs-detail .hs-caption {
  margin-top: 10px;
}

/* Palette: the four flats the square is cut from */
.hs-palette {
  list-style: none;
  margin: clamp(30px, 3.6vw, 48px) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(14px, 2vw, 26px);
}

.hs-palette li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hs-swatch {
  width: 26px;
  height: 26px;
  border-radius: 4px;
  border: 1px solid rgba(254, 254, 254, 0.24);
}

.hs-swatch-light {
  border-color: rgba(1, 23, 37, 0.3);
}

.hs-swatch-name {
  font-weight: 500;
  color: var(--hs-mint-soft);
}

.hs-swatch-hex {
  font-weight: 300;
  color: rgba(254, 254, 254, 0.45);
}

/* ══════════════════════════════════════════
   Lettering
   Dashed mint tiles: the stitching again, this time around the artwork.
   ══════════════════════════════════════════ */

.hs-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(22px, 3.4vw, 46px) clamp(18px, 3vw, 40px);
  background:
    radial-gradient(110% 130% at 50% 0%, rgba(121, 188, 153, 0.09), rgba(121, 188, 153, 0) 70%),
    #060f16;
  border: 1px dashed rgba(121, 188, 153, 0.32);
  border-radius: 3px;
}

.hs-tile img {
  width: auto;
  max-width: 100%;
  max-height: 260px;
  height: auto;
}

.hs-tile-wide img {
  max-height: 320px;
}

.hs-mark {
  max-width: 760px;
  margin: 0 auto;
}

.hs-mark .hs-caption {
  text-align: center;
}

.hs-letters {
  margin-top: clamp(20px, 2.6vw, 34px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 30px);
}

.hs-letter .hs-tile {
  height: 100%;
}

.hs-letter .hs-tile img {
  max-height: 170px;
}

/* ══════════════════════════════════════════
   The object
   ══════════════════════════════════════════ */

.hs-object img {
  width: 100%;
  height: auto;
  border-radius: 2px;
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.5);
}

.hs-object .hs-caption {
  text-align: center;
}

/* ══════════════════════════════════════════
   Narrow widths
   ══════════════════════════════════════════ */

@media (max-width: 860px) {
  .hs-steps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(16px, 3vw, 28px);
  }

  .hs-step:nth-child(1) {
    grid-column: span 2;
    max-width: 66%;
  }

  /* The square goes full width with the two details in a row under it */
  .hs-cover-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto auto;
  }

  .hs-cover {
    grid-row: auto;
    grid-column: span 2;
    max-width: 560px;
    margin-inline: auto;
  }

  .hs-detail {
    grid-template-rows: auto auto;
  }

  .hs-detail img {
    height: auto;
    object-fit: fill;
  }
}

@media (max-width: 480px) {
  .hs-steps {
    grid-template-columns: minmax(0, 1fr);
  }

  .hs-step:nth-child(1) {
    grid-column: auto;
    max-width: none;
  }

  .hs-cover-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .hs-cover {
    grid-column: auto;
  }

  .hs-desc-text {
    font-size: 15px;
    line-height: 1.7;
  }

  .hs-intro {
    font-size: 14px;
  }

  .hs-title {
    letter-spacing: 0.1em;
  }

  .hs-letters {
    grid-template-columns: minmax(0, 1fr);
  }

  .hs-tile img,
  .hs-tile-wide img {
    max-height: 200px;
  }

  .hs-letter .hs-tile img {
    max-height: 130px;
  }

  .hs-palette {
    gap: 12px 18px;
  }
}

/* ── The Chandelier Cake (projects/hubbell-card.html) ── */

/* ══════════════════════════════════════════════════════════════════════════
   The Chandelier Cake (prefix: hc-)
   projects/hubbell-card.html

   Every selector is scoped to an hc- class or to .hc-slide, so nothing here
   touches another page. The slide rules are NOT scoped under main.hc-page:
   the homepage stage clones the slide on its own, without page scripts.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Palette ──
   Declared on the page AND on the slide, because the homepage stage lifts the
   slide out of main.hc-page. The five colours are the card's own: they are
   sampled from the swatch bar the working file keeps above the drawing. */
.hc-page,
.hc-slide {
  --hc-ink: #0b0a09;         /* the page ground — chandelier-ink.jpg is flattened onto it */
  --hc-black: #050505;       /* the slide ground — slide.jpg is flattened onto it */
  --hc-paper: #efe9dd;
  --hc-paper-2: #f8f5ee;
  --hc-ivory: #f2ece0;
  --hc-dim: #9b948a;         /* muted type on the dark ground */
  --hc-dim-ink: #6c6359;     /* muted type on paper */
  --hc-rule: rgba(242, 236, 224, 0.16);
  --hc-rule-ink: rgba(24, 20, 16, 0.16);
  --hc-yellow: #f7ee2f;
  --hc-red: #e74229;
  --hc-teal: #5dc1ab;
  --hc-violet: #5f54a1;
  --hc-purple: #574097;
  --hc-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

.hc-page {
  max-width: none;
  padding: 0;
  flex: none;
  overflow-x: clip;
  background: var(--hc-ink);
  color: var(--hc-ivory);
}

/* ══════════════════════════════════════════
   Slide — the printed card on black.
   slide.jpg is a wide arrangement already composed on #050505, so it is
   CONTAINED rather than cropped: the letterbox bands are the same black as
   the slide itself and the card is never cut off, at any window shape.
   Narrow windows swap in the front on its own (card-front-cutout.png).
   ══════════════════════════════════════════ */

.project-slide.hc-slide {
  background: var(--hc-black);
  justify-content: flex-start;
}

.hc-slide .project-slide-media > .hc-slide-art {
  object-fit: contain;
}

.hc-slide .project-slide-media > .hc-slide-art-alt {
  display: none;
}

.hc-slide .hc-slide-title {
  position: relative;
  z-index: 2;
  /* The title has to stay inside the image's own black gutter, which is the
     left 37.5% of slide.jpg; the cap on the h1 below is set from that. */
  margin-left: clamp(24px, 5.6vw, 104px);
  max-width: min(32%, 400px);
  text-align: left;
}

.hc-slide .hc-slide-kicker {
  margin: 0 0 clamp(14px, 1.6vw, 22px);
  font-family: var(--hc-mono);
  font-size: clamp(9px, 0.8vw, 12px);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--hc-yellow);
}

.hc-slide .hc-slide-title h1 {
  margin: 0;
  font-weight: 800;
  /* Capped at 66px: "CHANDELIER" is the widest line, and past this it crosses
     out of the slide's black gutter and onto the open card behind it. */
  font-size: clamp(32px, 4.3vw, 66px);
  line-height: 0.9;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--hc-ivory);
}

.hc-slide .hc-slide-title h1 span {
  display: block;
  color: var(--hc-yellow);
}

.hc-slide .hc-slide-sub {
  margin: clamp(16px, 1.8vw, 26px) 0 0;
  padding-top: clamp(14px, 1.6vw, 20px);
  border-top: 1px solid var(--hc-rule);
  font-family: var(--hc-mono);
  font-size: clamp(9px, 0.78vw, 12px);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(242, 236, 224, 0.66);
}

/* Narrow or portrait windows: the wide arrangement would shrink to a strip, so
   the closed front stands on its own and the title drops to the foot. */
@media (max-width: 720px) {
  .project-slide.hc-slide {
    justify-content: center;
    align-items: flex-end;
  }

  .hc-slide .project-slide-media > .hc-slide-art {
    display: none;
  }

  /* Inset the box the front is fitted into, so the card keeps a margin from
     the screen edges instead of bleeding off them. */
  .hc-slide .project-slide-media > .hc-slide-art-alt {
    display: block;
    left: 6%;
    width: 88%;
    object-fit: contain;
    object-position: 50% 36%;
  }

  .hc-slide .hc-slide-title {
    margin: 0 0 clamp(30px, 7vh, 76px);
    padding: 0 22px;
    max-width: 100%;
    text-align: center;
  }

  .hc-slide .hc-slide-sub {
    display: inline-block;
  }
}

/* ══════════════════════════════════════════
   Shared section furniture
   ══════════════════════════════════════════ */

.hc-section {
  position: relative;
  padding: clamp(64px, 7vw, 124px) clamp(20px, 4vw, 56px);
}

.hc-section-inner {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
}

/* Flat, never a gradient: chandelier-ink.jpg is flattened onto this exact
   colour so its glow can bleed into the page with no visible edge. */
.hc-section-dark {
  background: var(--hc-ink);
  color: var(--hc-ivory);
}

.hc-section-paper {
  background: var(--hc-paper);
  color: #18140f;
}

.hc-head {
  max-width: 660px;
  margin: 0 auto clamp(40px, 4.4vw, 72px);
  text-align: center;
}

.hc-eyebrow {
  margin: 0 0 clamp(12px, 1.4vw, 18px);
  font-family: var(--hc-mono);
  font-size: clamp(9px, 0.76vw, 11px);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--hc-dim);
}

.hc-section-paper .hc-eyebrow {
  color: var(--hc-dim-ink);
}

.hc-title {
  margin: 0;
  font-weight: 800;
  font-size: clamp(27px, 3.1vw, 46px);
  line-height: 1.02;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}

.hc-intro {
  margin: clamp(18px, 2vw, 28px) 0 0;
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.62;
  color: rgba(242, 236, 224, 0.82);
}

.hc-section-paper .hc-intro {
  color: #3a332b;
}

/* The card's finial: a hairline that drops from the heading with a four-point
   star on its end, the same fitting the cake hangs from. */
.hc-chain {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: clamp(20px, 2.4vw, 32px) auto 0;
}

.hc-chain-line {
  width: 1px;
  height: clamp(26px, 3vw, 44px);
  background: linear-gradient(rgba(242, 236, 224, 0), var(--hc-rule));
}

.hc-section-paper .hc-chain-line {
  background: linear-gradient(rgba(24, 20, 16, 0), var(--hc-rule-ink));
}

.hc-chain-star {
  display: block;
  width: 17px;
  height: 17px;
  margin-top: 3px;
  fill: var(--hc-violet);
}

.hc-section-paper .hc-chain-star {
  fill: var(--hc-purple);
}

/* A printed sheet: the artwork with a lifted edge under it. */
.hc-plate {
  position: relative;
  border-radius: 3px;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(24, 20, 16, 0.1),
    0 18px 40px -18px rgba(12, 10, 8, 0.42);
}

.hc-plate img {
  display: block;
  width: 100%;
  height: auto;
}

/* Hairline for artwork whose own ground is white, so the sheet still has an edge */
.hc-plate-light::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px rgba(24, 20, 16, 0.13);
  pointer-events: none;
}

/* ══════════════════════════════════════════
   Description
   ══════════════════════════════════════════ */

.hc-desc {
  position: relative;
  padding: clamp(58px, 6.4vw, 110px) clamp(20px, 4vw, 56px) clamp(64px, 7vw, 116px);
  background:
    radial-gradient(120% 130% at 50% 0%, #1a1712 0%, #100e0b 46%, var(--hc-ink) 100%);
}

.hc-desc-inner {
  width: 100%;
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}

.hc-desc-text {
  margin: 0;
  font-size: clamp(16px, 1.34vw, 21px);
  line-height: 1.66;
  color: var(--hc-ivory);
}

.hc-desc-text strong {
  font-weight: 700;
}

.hc-desc-meta {
  margin: clamp(26px, 3vw, 40px) auto 0;
  padding-top: clamp(18px, 2vw, 26px);
  max-width: 620px;
  border-top: 1px solid var(--hc-rule);
  font-family: var(--hc-mono);
  font-size: clamp(9px, 0.76vw, 11px);
  line-height: 1.8;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hc-dim);
}

/* ══════════════════════════════════════════
   Concept — the sketch sheet
   ══════════════════════════════════════════ */

.hc-sheet {
  margin: 0;
  max-width: 980px;
  margin-inline: auto;
}

.hc-sheet figcaption {
  margin: clamp(14px, 1.5vw, 20px) 0 0;
  text-align: center;
  font-family: var(--hc-mono);
  font-size: clamp(10px, 0.8vw, 12px);
  letter-spacing: 0.06em;
  color: var(--hc-dim-ink);
}

/* ══════════════════════════════════════════
   The object — drawn twice
   ══════════════════════════════════════════ */

.hc-object {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: clamp(28px, 3.4vw, 56px);
  align-items: start;
}

.hc-object figure {
  margin: 0;
}

/* The inked drawing: its own file is flattened onto --hc-ink, so it simply
   sits on the section with no plate around it. */
.hc-object-ink img {
  display: block;
  width: 100%;
  height: auto;
}

.hc-object-flat-art {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(22px, 2.6vw, 40px);
  background: var(--hc-paper-2);
  border-radius: 3px;
}

.hc-object-flat-art img {
  display: block;
  width: 100%;
  max-width: 340px;
  height: auto;
}

.hc-object figcaption {
  margin: clamp(12px, 1.3vw, 18px) 0 0;
  font-family: var(--hc-mono);
  font-size: clamp(10px, 0.8vw, 12px);
  line-height: 1.6;
  letter-spacing: 0.06em;
  color: var(--hc-dim);
}

.hc-object figcaption b {
  display: block;
  margin-bottom: 5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hc-ivory);
}

/* A fixed five columns, never wrapped: a stray fifth swatch on its own row
   would stretch the width of the block. */
.hc-palette {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin: clamp(24px, 2.6vw, 36px) 0 0;
  padding: 0;
  list-style: none;
}

.hc-palette li {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.hc-swatch {
  display: block;
  height: 42px;
  border-radius: 2px;
}

.hc-swatch-hex {
  font-family: var(--hc-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--hc-dim);
}

@media (max-width: 860px) {
  .hc-object {
    grid-template-columns: 1fr;
    gap: clamp(34px, 5vw, 52px);
  }

  .hc-object-flat-art img {
    max-width: 280px;
  }
}

/* ══════════════════════════════════════════
   The card — fronts, inside, printed
   ══════════════════════════════════════════ */

/* Both pairs put a US Letter piece beside an A4 one. The columns are weighted
   by the ratio of their widths at equal height (0.7725 : 0.7075), so the two
   sheets come out the same height and their captions line up. */
.hc-pair {
  display: grid;
  grid-template-columns: 1.09fr 1fr;
  gap: clamp(24px, 3.2vw, 52px);
  align-items: start;
  max-width: 900px;
  margin-inline: auto;
}

.hc-pair figure {
  margin: 0;
}

.hc-pair figcaption {
  margin: clamp(13px, 1.4vw, 19px) 0 0;
  font-family: var(--hc-mono);
  font-size: clamp(10px, 0.8vw, 12px);
  line-height: 1.6;
  letter-spacing: 0.06em;
  color: var(--hc-dim-ink);
}

.hc-tag {
  display: inline-block;
  margin-right: 8px;
  padding: 2px 6px 1px;
  border-radius: 2px;
  background: #18140f;
  color: var(--hc-paper-2);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.hc-tag-b {
  background: var(--hc-violet);
}

.hc-subtitle {
  max-width: 900px;
  margin: clamp(56px, 6vw, 96px) auto clamp(24px, 2.6vw, 36px);
  padding-top: clamp(22px, 2.4vw, 32px);
  border-top: 1px solid var(--hc-rule-ink);
  font-size: clamp(11px, 0.9vw, 13px);
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #18140f;
}

.hc-subtitle span {
  display: block;
  margin-top: 8px;
  font-family: var(--hc-mono);
  font-size: clamp(11px, 0.88vw, 13px);
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--hc-dim-ink);
}

.hc-final {
  margin: clamp(56px, 6vw, 96px) auto 0;
  max-width: 1040px;
}

.hc-final figcaption {
  margin: clamp(14px, 1.5vw, 20px) 0 0;
  text-align: center;
  font-family: var(--hc-mono);
  font-size: clamp(10px, 0.8vw, 12px);
  letter-spacing: 0.06em;
  color: var(--hc-dim-ink);
}

@media (max-width: 560px) {
  .hc-pair {
    grid-template-columns: 1fr;
    gap: clamp(30px, 6vw, 44px);
    max-width: 420px;
  }
}

/* ── Embroidered Valentine (projects/embroidered-valentine.html) ── */

/* ══════════════════════════════════════════════════════════════════════════
   Embroidered Valentine (prefix: ev-)
   projects/embroidered-valentine.html

   Every selector is scoped to an ev- class or to .ev-slide, so nothing here
   touches another page. The slide rules are NOT scoped under main.ev-page:
   the homepage stage clones the slide on its own, without page scripts.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Palette ──
   Declared on the page AND on the slide, because the homepage stage lifts the
   slide out of main.ev-page. Red and leaf are sampled from the card artwork. */
.ev-page,
.ev-slide {
  --ev-ink: #140d10;
  --ev-ink-2: #0a0608;
  --ev-paper: #f5ede8;
  --ev-paper-2: #ebded7;
  --ev-soft: #6d5b57;
  --ev-soft-dark: rgba(245, 237, 232, 0.66);
  --ev-red: #c23427;
  --ev-red-bright: #ed4f38;
  --ev-leaf: #4e6437;
  --ev-serif: "Times New Roman", Times, Georgia, serif;
}

.ev-page {
  max-width: none;
  padding: 0;
  flex: none;
  overflow-x: clip;
  background: var(--ev-paper);
  color: var(--ev-ink);
}

/* ══════════════════════════════════════════
   Slide — the two card faces on a dark ground, the rose line ghosted behind.
   Both faces are placed by hand, so the slide needs no page script.
   ══════════════════════════════════════════ */

.project-slide.ev-slide {
  justify-content: flex-start;
  background:
    radial-gradient(118% 108% at 66% 44%, #26171b 0%, #160e11 44%, #090608 100%);
}

/* Override the global "cover the whole media box" rule for slide art */
.ev-slide .project-slide-media > .ev-card,
.ev-slide .project-slide-media > .ev-mark {
  position: absolute;
  inset: auto;
  width: auto;
  height: auto;
  max-width: none;
  object-fit: contain;
}

/* The rose, in line, ghosted large behind the cards. Kept inside the frame at
   full height so it still reads as a rose rather than as loose strokes. */
.ev-slide .project-slide-media > .ev-mark {
  height: 97%;
  top: 2%;
  right: -3%;
  opacity: 0.07;
}

/* Paper faces: a hairline and two shadows, so they read as sheets, not screens */
.ev-slide .project-slide-media > .ev-card {
  border-radius: 2px;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.55),
    0 30px 66px rgba(0, 0, 0, 0.62);
}

/* The faces overlap by a sliver only: enough to read as a fan, little enough
   that the question inside stays legible. */
.ev-slide .project-slide-media > .ev-card-inside {
  height: 50%;
  top: 23%;
  right: 33%;
  transform: rotate(-8deg);
}

.ev-slide .project-slide-media > .ev-card-front {
  height: 62%;
  top: 18%;
  right: 6%;
  transform: rotate(3deg);
}

.ev-slide .ev-slide-title {
  position: relative;
  z-index: 2;
  max-width: min(46%, 520px);
  padding: 0 clamp(28px, 5vw, 96px);
  color: var(--ev-paper);
}

/* A soft pool of shadow, so the type keeps reading if a face drifts under it */
.ev-slide .ev-slide-title::before {
  content: "";
  position: absolute;
  left: -30%;
  right: -34%;
  top: -160%;
  bottom: -160%;
  z-index: -1;
  background: radial-gradient(closest-side,
    rgba(9, 6, 8, 0.86) 0%,
    rgba(9, 6, 8, 0.6) 46%,
    rgba(9, 6, 8, 0.24) 72%,
    rgba(9, 6, 8, 0) 100%);
  pointer-events: none;
}

.ev-slide .ev-slide-eyebrow {
  margin: 0 0 clamp(14px, 1.6vw, 22px);
  font-size: clamp(9px, 0.78vw, 12px);
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--ev-soft-dark);
}

.ev-slide .ev-slide-title h1 {
  margin: 0;
  font-family: var(--ev-serif);
  font-weight: 400;
  font-size: clamp(34px, 4.6vw, 70px);
  line-height: 1.02;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ev-slide .ev-slide-title h1 span {
  display: block;
  margin-left: 0.06em;
}

.ev-slide .ev-slide-sub {
  margin: clamp(16px, 1.8vw, 26px) 0 0;
  font-size: clamp(12px, 1.05vw, 16px);
  font-weight: 300;
  line-height: 1.5;
  color: var(--ev-soft-dark);
}

.ev-slide .ev-slide-sub::before {
  content: "";
  display: block;
  width: 46px;
  height: 1px;
  margin-bottom: clamp(12px, 1.4vw, 18px);
  background: var(--ev-red-bright);
}

/* Short and narrow windows: the faces shrink before they can reach the type */
@media (max-height: 640px) {
  .ev-slide .project-slide-media > .ev-card-front { height: 72%; top: 13%; }
  .ev-slide .project-slide-media > .ev-card-inside { height: 58%; top: 20%; }
}

@media (max-width: 900px) {
  .ev-slide .project-slide-media > .ev-card-inside { right: 36%; height: 42%; top: 26%; }
  .ev-slide .project-slide-media > .ev-card-front { height: 52%; top: 24%; right: 4%; }
  .ev-slide .ev-slide-title { max-width: 54%; }
}

@media (max-width: 480px) {
  .project-slide.ev-slide {
    align-items: flex-start;
    justify-content: center;
    background:
      radial-gradient(130% 80% at 50% 78%, #26171b 0%, #160e11 46%, #090608 100%);
  }

  .ev-slide .ev-slide-title {
    max-width: none;
    padding: clamp(28px, 9vh, 64px) 22px 0;
    text-align: center;
  }

  .ev-slide .ev-slide-sub::before {
    height: 2px;
    margin-left: auto;
    margin-right: auto;
  }

  /* One face only, centred under the type. Kept narrow enough that the
     rotation can't push a corner into the slide's clipped edge. */
  .ev-slide .project-slide-media > .ev-card-inside { display: none; }

  .ev-slide .project-slide-media > .ev-card-front {
    height: 42%;
    top: auto;
    bottom: 7%;
    right: 50%;
    transform: translateX(50%) rotate(1.5deg);
  }

  .ev-slide .project-slide-media > .ev-mark {
    height: 62%;
    top: auto;
    bottom: 0;
    right: -22%;
    opacity: 0.075;
  }
}

/* ══════════════════════════════════════════
   Page furniture
   ══════════════════════════════════════════ */

.ev-inner {
  max-width: 1000px;
  margin: 0 auto;
}

.ev-desc {
  background: var(--ev-paper);
  padding: clamp(44px, 6vw, 76px) clamp(22px, 5vw, 40px) clamp(10px, 2vw, 22px);
}

.ev-desc-text {
  max-width: 760px;
  margin: 0 auto;
  font-size: clamp(16px, 1.35vw, 20px);
  font-weight: 300;
  line-height: 1.68;
}

.ev-desc-note {
  max-width: 760px;
  margin: clamp(18px, 2vw, 26px) auto 0;
  font-size: clamp(11px, 0.92vw, 13px);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ev-soft);
}

.ev-section {
  position: relative;
  padding: clamp(46px, 6vw, 82px) clamp(22px, 5vw, 40px) clamp(52px, 7vw, 92px);
}

.ev-section-paper {
  background: var(--ev-paper);
  color: var(--ev-ink);
}

.ev-section-ink {
  background: var(--ev-ink);
  color: var(--ev-paper);
}

.ev-title {
  margin: 0;
  text-align: center;
  font-family: var(--ev-serif);
  font-weight: 400;
  font-size: clamp(24px, 2.5vw, 36px);
  line-height: 1.1;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-indent: 0.22em;
}

/* Rule with the card's own hand-drawn heart at its centre.
   A background image, not an <img>: it is decoration, and the site's
   lightbox opens every <img> inside main that is not slide art. */
.ev-rule {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 420px;
  margin: clamp(16px, 1.8vw, 22px) auto clamp(26px, 3.4vw, 40px);
}

.ev-rule-line {
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: 0.32;
}

.ev-rule-heart {
  flex: none;
  width: 22px;
  height: 27px;
  background: url("/projects/embroidered-valentine/heart.png") center / contain no-repeat;
}

.ev-section-ink .ev-rule-heart {
  filter: invert(1);
}

.ev-intro {
  max-width: 700px;
  margin: 0 auto clamp(30px, 4vw, 48px);
  text-align: center;
  font-size: clamp(14px, 1.1vw, 17px);
  font-weight: 300;
  line-height: 1.66;
}

.ev-section-paper .ev-intro { color: var(--ev-soft); }
.ev-section-ink .ev-intro { color: var(--ev-soft-dark); }

/* Sheets: the artwork sits on paper white with a quiet shadow */
.ev-sheet {
  background: #fff;
  border-radius: 2px;
  overflow: hidden;
  box-shadow:
    0 1px 2px rgba(20, 13, 16, 0.16),
    0 16px 34px rgba(20, 13, 16, 0.14);
}

.ev-section-ink .ev-sheet {
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.5),
    0 24px 52px rgba(0, 0, 0, 0.5);
}

.ev-sheet img {
  display: block;
  width: 100%;
  height: auto;
}

figcaption.ev-caption,
.ev-caption {
  margin-top: 14px;
  font-size: clamp(12px, 0.95vw, 14px);
  font-weight: 300;
  line-height: 1.5;
}

.ev-section-paper .ev-caption { color: var(--ev-soft); }
.ev-section-ink .ev-caption { color: var(--ev-soft-dark); }

/* ══════════════════════════════════════════
   Process — the drawing, then the line
   ══════════════════════════════════════════ */

.ev-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(26px, 4vw, 56px);
  max-width: 880px;
  margin: 0 auto;
  list-style: none;
}

.ev-step {
  margin: 0;
}

/* Both steps get the same 3:4 plate, so a squarish drawing and a portrait
   card sit on sheets of one height instead of two ragged ones. */
.ev-step-plate {
  aspect-ratio: 3 / 4;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4%;
}

.ev-step-plate img {
  width: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.ev-step-label {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 18px 0 8px;
  font-family: var(--ev-serif);
  font-size: clamp(15px, 1.25vw, 19px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.ev-step-num {
  font-family: var(--ev-serif);
  font-size: clamp(11px, 0.9vw, 13px);
  letter-spacing: 0.1em;
  color: var(--ev-red);
}

.ev-step-text {
  font-size: clamp(13px, 1.05vw, 16px);
  font-weight: 300;
  line-height: 1.62;
  color: var(--ev-soft);
}

/* ══════════════════════════════════════════
   The card — the two printed faces
   ══════════════════════════════════════════ */

.ev-faces {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(26px, 4vw, 60px);
  max-width: 820px;
  margin: 0 auto;
}

.ev-face {
  margin: 0;
}

.ev-quote {
  max-width: 560px;
  margin: clamp(34px, 4.6vw, 56px) auto 0;
  text-align: center;
  font-family: var(--ev-serif);
  font-size: clamp(18px, 1.8vw, 26px);
  font-style: italic;
  line-height: 1.5;
  color: var(--ev-paper);
}

.ev-quote-line {
  display: block;
}

.ev-quote-cite {
  display: block;
  margin-top: 16px;
  font-family: "Futura", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: clamp(10px, 0.82vw, 12px);
  font-style: normal;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ev-soft-dark);
}

/* ══════════════════════════════════════════
   Details — the crops
   ══════════════════════════════════════════ */

/* The two crops are very different shapes (a near-square and a 3:1 strip), so
   the wide one is centred against the tall one instead of hanging from the top
   of the row with all the empty space below it. */
.ev-details {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(26px, 4vw, 52px);
  align-items: center;
  max-width: 940px;
  margin: 0 auto;
}

.ev-detail {
  margin: 0;
}

@media (max-width: 720px) {
  .ev-steps,
  .ev-faces,
  .ev-details {
    grid-template-columns: minmax(0, 1fr);
    max-width: 440px;
  }
}

@media (max-width: 480px) {
  .ev-rule {
    max-width: 240px;
  }

  .ev-steps,
  .ev-faces,
  .ev-details {
    max-width: 340px;
  }
}


/* ══════════════════════════════════════════
   Enriched sections added to the original project pages
   ══════════════════════════════════════════ */

/* ── Witch Hotel additions ── */

/* ── Witch Hotel: enrichment (staging) ──
   New sections: Identity (wordmark), Cover Art intro, Process (behind the covers),
   Sketchbook (cover concepts). Reuses .wh-section-inner unchanged. */

/* Section bands */
.wh-band {
  background: #2a1960;
  padding: 88px 40px;
}

.wh-band-dark {
  background: #1a0f42;
}

/* The cover art intro leads straight into the existing sketch-to-final grid */
.wh-band.wh-covers-head {
  padding-top: 0;
  padding-bottom: 0;
}

.wh-covers-head .wh-section-inner {
  border-top: 1px solid rgba(232, 227, 245, 0.14);
  padding-top: 80px;
}

/* Section intro */
.wh-intro {
  max-width: 700px;
  margin-bottom: 44px;
}

.wh-covers-head .wh-intro {
  margin-bottom: 0;
}

.wh-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font-weight: 500;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #9fd86a;
}

.wh-eyebrow::before {
  content: "";
  flex: none;
  width: 32px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
}

.wh-title {
  margin-top: 18px;
  font-weight: 600;
  font-size: clamp(32px, 3.2vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: #fff;
}

.wh-lede {
  margin-top: 18px;
  font-size: 16px;
  line-height: 1.7;
  font-weight: 300;
  color: #e8e3f5;
}

/* Figures */
.wh-fig {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.wh-card {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
}

.wh-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wh-card-square {
  aspect-ratio: 1 / 1;
}

.wh-card-wide {
  aspect-ratio: 8 / 5;
}

.wh-card-plum {
  background: #603978;
}

.wh-card-night {
  background: #140a22;
}

.wh-card-contain img {
  object-fit: contain;
  padding: 6%;
}

.wh-cap {
  margin-top: 12px;
  font-weight: 500;
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #b9aee0;
}

/* Identity: large vector mark with the early lettering and reversed lockup beside it */
.wh-mark-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 28px 32px;
}

.wh-mark-early {
  grid-column: 1;
  grid-row: 1;
}

.wh-mark-reversed {
  grid-column: 1;
  grid-row: 2;
}

.wh-mark-main {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.wh-card-fill {
  flex: 1;
  min-height: 0;
}

/* Out of flow so the large image never sizes the grid rows */
.wh-card-fill img {
  position: absolute;
  inset: 0;
}

/* Process studies */
.wh-study + .wh-study {
  margin-top: 64px;
  padding-top: 56px;
  border-top: 1px solid rgba(232, 227, 245, 0.12);
}

.wh-study-text {
  max-width: 620px;
  margin-bottom: 28px;
}

.wh-study-title {
  font-weight: 500;
  font-size: 22px;
  line-height: 1.2;
  color: #fff;
}

.wh-study-body {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.7;
  font-weight: 300;
  color: #d9d2ee;
}

.wh-duo {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}

.wh-trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

@media (max-width: 480px) {
  .wh-band {
    padding: 56px 20px;
  }

  .wh-covers-head .wh-section-inner {
    padding-top: 48px;
  }

  .wh-intro {
    margin-bottom: 28px;
  }

  .wh-title {
    margin-top: 14px;
    font-size: 28px;
  }

  .wh-lede {
    margin-top: 14px;
    font-size: 15px;
  }

  .wh-mark-grid {
    grid-template-columns: 1fr 1fr;
    gap: 20px 16px;
  }

  .wh-mark-main {
    grid-column: 1 / span 2;
    grid-row: 1;
  }

  .wh-mark-early {
    grid-row: 2;
  }

  .wh-mark-reversed {
    grid-column: 2;
    grid-row: 2;
  }

  .wh-card-fill {
    flex: none;
    aspect-ratio: 1 / 1;
  }

  .wh-cap {
    margin-top: 10px;
    font-size: 10px;
    letter-spacing: 0.14em;
  }

  .wh-study + .wh-study {
    margin-top: 44px;
    padding-top: 40px;
  }

  .wh-study-text {
    margin-bottom: 20px;
  }

  .wh-study-title {
    font-size: 19px;
  }

  .wh-duo {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .wh-trio {
    grid-template-columns: 1fr 1fr;
    gap: 20px 16px;
  }

  /* The motif is a wide strip: give it the full row */
  .wh-trio .wh-fig:last-child {
    grid-column: 1 / span 2;
  }

  .wh-trio .wh-card-contain {
    aspect-ratio: 2 / 1;
  }

  .wh-card-contain img {
    padding: 4%;
  }
}

/* ── The Cannoli Hole additions ── */

/* ── The Cannoli Hole: enriched sections (staging) ──
   Research, Type Trials and Wordmark sections. Every new class is ch- prefixed and new to
   the stylesheet. Section tweaks compound with .ch-section, so the shared .ch-* rules the
   Marble page also uses are never changed. */

/* Intro paragraph under a section title (matches the italic description band) */
.ch-section .ch-lede {
  max-width: 720px;
  margin: -6px auto 40px;
  font-size: 18px;
  line-height: 1.7;
  font-style: italic;
  text-align: left;
}

/* Research keeps the page's white-to-white rhythm (the default 28px). The dark Type Trials band
   mirrors its 48px top, and Wordmark leaves room for the marker that hangs under the window. */
.ch-section.ch-section-trials {
  padding-bottom: 48px;
}

.ch-section.ch-section-wordmark {
  padding-bottom: 48px;
}

/* ── Research: moodboard references beside the marks drawn from them ── */

.ch-motifs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 36px 28px;
  margin: 0;
  padding: 0;
}

.ch-motif {
  margin: 0;
}

.ch-motif-media {
  position: relative;
}

.ch-motif-photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  border-radius: 4px;
}

/* A round sticker in the logo's own language: thin ring with a heavy offset edge */
.ch-motif-disc {
  position: absolute;
  right: -8px;
  bottom: -16px;
  width: min(46%, 132px);
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 2px solid #000;
  border-radius: 50%;
  box-shadow: 3px 4px 0 #000;
}

.ch-motif-disc img {
  display: block;
  width: 70%;
  height: auto;
  max-height: 62%;
  object-fit: contain;
}

.ch-motif-disc-tall img {
  width: auto;
  height: 58%;
}

.ch-motif-cap {
  margin-top: 26px;
}

.ch-motif-name {
  display: block;
  font-style: italic;
  font-size: 22px;
  line-height: 1.2;
}

.ch-motif-note {
  display: block;
  margin-top: 6px;
  font-size: 15px;
  line-height: 1.5;
  color: #333;
}

/* ── Type Trials (dark band) ── */

.ch-trials {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px 24px;
  margin: 0;
  padding: 0;
}

.ch-trial {
  margin: 0;
  text-align: center;
}

.ch-trial-art {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 11;
  padding: 12%;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 4px;
}

.ch-trial-art img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}

.ch-trial-name {
  display: block;
  margin-top: 10px;
  font-style: italic;
  font-size: 16px;
  line-height: 1.3;
}

.ch-trial-name small {
  display: block;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.62);
}

/* ── Wordmark: the final pairing, numbered ── */

.ch-wordmark {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
  max-width: 900px;
  margin: 0 auto;
}

.ch-wordmark-art {
  position: relative;
  margin: 0 0 30px;
}

.ch-wordmark-art img {
  display: block;
  width: 100%;
  height: auto;
}

.ch-wordmark-marker,
.ch-wordmark-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 2px solid #000;
  border-radius: 50%;
  background: #fff;
  box-shadow: 2px 3px 0 #000;
  font-style: italic;
  font-size: 16px;
  line-height: 1;
  color: #000;
}

.ch-wordmark-marker {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.ch-wordmark-marker-1 {
  left: 6%;
  top: 4%;
}

.ch-wordmark-marker-2 {
  left: 55%;
  top: 9%;
}

/* Under the window, tied to it by a short tick */
.ch-wordmark-marker-3 {
  left: 40.7%;
  top: calc(100% + 22px);
}

.ch-wordmark-marker-3::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 2px;
  height: 8px;
  margin-bottom: 2px;
  background: #000;
  transform: translateX(-50%);
}

.ch-wordmark-notes {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ch-wordmark-note {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.ch-wordmark-note + .ch-wordmark-note {
  margin-top: 26px;
}

.ch-wordmark-num {
  margin-top: 2px;
}

.ch-wordmark-label {
  margin: 0;
  font-weight: 400;
  font-style: italic;
  font-size: 22px;
  line-height: 1.2;
}

.ch-wordmark-text {
  margin: 4px 0 0;
  font-size: 15px;
  line-height: 1.55;
  color: #333;
}

/* ── Responsive ── */

@media (max-width: 1100px) {
  .ch-wordmark {
    gap: 40px;
  }
}

@media (max-width: 860px) {
  .ch-motifs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 32px;
  }

  .ch-trials {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ch-wordmark {
    grid-template-columns: minmax(0, 1fr);
    max-width: 560px;
  }
}

@media (max-width: 480px) {
  .ch-section .ch-lede {
    margin-bottom: 28px;
    font-size: 15px;
  }

  .ch-section.ch-section-trials {
    padding-bottom: 32px;
  }

  .ch-section.ch-section-wordmark {
    padding-bottom: 24px;
  }

  .ch-motifs {
    gap: 32px 16px;
  }

  .ch-motif-disc {
    right: -4px;
    bottom: -12px;
    border-width: 1.5px;
    box-shadow: 2px 3px 0 #000;
  }

  .ch-motif-cap {
    margin-top: 20px;
  }

  .ch-motif-name {
    font-size: 18px;
  }

  .ch-motif-note {
    font-size: 13px;
    line-height: 1.45;
  }

  .ch-trials {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 14px;
  }

  .ch-trial-name {
    font-size: 14px;
  }

  .ch-trial-name small {
    font-size: 12px;
  }

  .ch-wordmark {
    gap: 28px;
  }

  .ch-wordmark-marker,
  .ch-wordmark-num {
    width: 22px;
    height: 22px;
    border-width: 1.5px;
    box-shadow: 1.5px 2px 0 #000;
    font-size: 13px;
  }

  .ch-wordmark-marker-3 {
    top: calc(100% + 18px);
  }

  .ch-wordmark-note {
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 12px;
  }

  .ch-wordmark-note + .ch-wordmark-note {
    margin-top: 20px;
  }

  .ch-wordmark-label {
    font-size: 19px;
  }

  .ch-wordmark-text {
    font-size: 14px;
  }
}

/* ── Marble additions ── */

/* ── Marble Soap & Holistics: enriched sections (staging) ──
   New body sections under the reused .ch-* page styles. Everything here is mb- prefixed and
   compounds with .ch-section where it adjusts padding, so it wins regardless of file order
   and never changes the shared .ch-* rules the Cannoli Hole page also uses. */

/* Intro paragraph under a section title (matches the italic description band) */
.ch-section .mb-lede {
  max-width: 720px;
  margin: -6px auto 36px;
  font-size: 18px;
  line-height: 1.7;
  font-style: italic;
  text-align: left;
  text-wrap: pretty;
}

/* ── From Sketch to Symbol (dark band) ── */

.ch-section.mb-symbol {
  padding-bottom: 64px;
}

.mb-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 56px;
  max-width: 880px;
  margin: 0 auto;
}

.mb-step {
  margin: 0;
  text-align: center;
}

.mb-step-art {
  position: relative;
  background: #fff;
  border-radius: 4px;
}

.mb-step-art img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
}

/* A small chevron in the gap, leading each step to the next */
.mb-step + .mb-step .mb-step-art::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -28px;
  width: 11px;
  height: 11px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: translate(-70%, -50%) rotate(45deg);
  pointer-events: none;
}

.mb-step-cap {
  margin-top: 16px;
}

.mb-step-name {
  display: block;
  font-style: italic;
  font-size: 24px;
  line-height: 1.2;
}

.mb-step-note {
  display: block;
  margin-top: 4px;
  font-size: 15px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.7);
}

/* ── Logo Suite ── */

.ch-section.mb-suite-section {
  padding-bottom: 64px;
}

.mb-suite {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, clamp(180px, 17vw, 230px));
  gap: 26px 24px;
  max-width: 880px;
  margin: 0 auto;
}

.mb-tile {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.mb-tile-stacked {
  grid-row: span 2;
}

.mb-tile-art {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  background: #f0f0ee;
  border-radius: 4px;
  overflow: hidden;
}

.mb-tile-dark .mb-tile-art {
  background: #000;
}

.mb-tile-dark .mb-tile-art img {
  top: 5%;
  height: 90%;
}

/* The artwork PNGs carry their tile colour, so letterboxing is invisible */
.mb-tile-art img {
  position: absolute;
  top: 9%;
  left: 8%;
  width: 84%;
  height: 82%;
  max-width: none;
  object-fit: contain;
}

.mb-tile-cap {
  flex: none;
  padding-top: 10px;
  font-style: italic;
  font-size: 16px;
  line-height: 1.3;
  color: #444;
}

/* ── Color (dark band) ── */

.ch-section.mb-color {
  padding-bottom: 72px;
}

.mb-palette {
  max-width: 720px;
  margin: 0 auto;
  border-top: 1px solid rgba(255, 255, 255, 0.28);
}

.mb-swatch-row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  align-items: center;
  gap: 20px;
  padding: 26px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
}

.mb-swatch-label {
  font-style: italic;
  font-size: 20px;
  line-height: 1.3;
}

.mb-swatches {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px 14px;
  align-items: center;
}

.mb-swatch {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.mb-swatch-dot {
  position: relative;
  flex: none;
  display: block;
  width: 56px;
  height: 56px;
  border-radius: 50%;
}

.mb-swatch-row-branch .mb-swatch-dot {
  width: 46px;
  height: 46px;
}

/* Marbles: smaller, with a glassy highlight */
.mb-swatch-row-marbles .mb-swatch-dot {
  width: 38px;
  height: 38px;
}

.mb-swatch-row-marbles .mb-swatch-dot::after {
  content: '';
  position: absolute;
  top: 18%;
  left: 22%;
  width: 26%;
  height: 26%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
}

.mb-swatch-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.mb-swatch-name {
  font-style: italic;
  font-size: 17px;
  line-height: 1.25;
}

.mb-swatch-hex {
  font-size: 12.5px;
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.62);
}

/* ── Narrower desktops and tablets ── */

@media (max-width: 900px) {
  .mb-steps {
    gap: 40px;
  }

  .mb-step + .mb-step .mb-step-art::before {
    left: -20px;
  }

  .mb-swatch-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  /* Four fixed columns get too tight for a dot plus a name below this width */
  .mb-swatches {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }
}

/* ── Mobile ── */

@media (max-width: 480px) {
  .ch-section .mb-lede {
    font-size: 15px;
    margin: -4px auto 24px;
  }

  .ch-section.mb-symbol,
  .ch-section.mb-suite-section,
  .ch-section.mb-color {
    padding-bottom: 40px;
  }

  /* Steps stack, each a little narrower than the column, with the chevron pointing down */
  .mb-steps {
    grid-template-columns: minmax(0, 1fr);
    gap: 44px;
    max-width: 260px;
  }

  .mb-step + .mb-step .mb-step-art::before {
    top: -28px;
    left: 50%;
    transform: translate(-50%, -70%) rotate(135deg);
  }

  .mb-step-cap {
    margin-top: 12px;
  }

  .mb-step-name {
    font-size: 20px;
  }

  .mb-step-note {
    font-size: 14px;
  }

  .mb-suite {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    gap: 20px;
  }

  .mb-tile-stacked {
    grid-row: auto;
  }

  .mb-tile-art {
    flex: none;
    aspect-ratio: 16 / 10;
  }

  .mb-tile-stacked .mb-tile-art {
    aspect-ratio: 1 / 1;
  }

  .mb-tile-cap {
    font-size: 15px;
  }

  .mb-swatch-row {
    padding: 20px 0;
  }

  .mb-swatch-label {
    font-size: 18px;
  }

  .mb-swatches {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 12px;
  }

  .mb-swatch {
    gap: 10px;
  }

  .mb-swatch-dot {
    width: 48px;
    height: 48px;
  }

  .mb-swatch-row-branch .mb-swatch-dot {
    width: 42px;
    height: 42px;
  }

  .mb-swatch-row-marbles .mb-swatch-dot {
    width: 34px;
    height: 34px;
  }

  .mb-swatch-name {
    font-size: 15px;
  }

  .mb-swatch-hex {
    font-size: 12px;
  }
}

/* ── Poptropica Legacy additions ── */

/* ══════════════════════════════════════════
   Poptropica Legacy: enrichment (staging)
   Loaded after shared/styles.css. Fold into the "Poptropica Legacy page"
   section of shared/styles.css when the draft is swapped in.
   New blocks: app icon + settings process steps, Remastered Features,
   island maps, sketches, desktop launcher, promo art.
   ══════════════════════════════════════════ */

/* Short explanatory line under (or above) a block of artwork */
.legacy-note {
  max-width: 780px;
  margin: 28px auto 0;
  font-family: "CreativeBlock", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.35;
  text-align: center;
  text-transform: uppercase;
  color: #fff;
}

.legacy-note.legacy-note-lead {
  margin: 0 auto 32px;
}

/* Subtitle that opens a new block partway through a section */
.legacy-section-subtitle.legacy-subtitle-lead {
  margin-top: 72px;
  margin-bottom: 14px;
}

/* Captions (steps, screenshots, sketches) */
.legacy-step-label {
  margin-top: 14px;
  font-family: "GrilledCheese", sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0.3px;
  text-align: center;
  text-transform: uppercase;
  color: #fff;
}

/* ── Process steps: one row, flex-grow follows each image's aspect ratio
   so the artwork shares one height ── */
.legacy-steps {
  display: flex;
  align-items: center;
  gap: 18px;
}

.legacy-step {
  min-width: 0;
  flex-basis: 0;
  flex-shrink: 1;
}

.legacy-step-art {
  border-radius: 10px;
  overflow: hidden;
}

.legacy-step-art img {
  display: block;
  width: 100%;
  height: auto;
}

.legacy-step-art-clear {
  border-radius: 0;
  overflow: visible;
}

/* Chunky white arrow, nudged up so it centres on the artwork, not the caption */
.legacy-step-arrow {
  flex: 0 0 auto;
  width: 16px;
  height: 22px;
  margin-bottom: 34px;
  background: #fff;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  opacity: 0.85;
}

/* App icon: three equal square tiles */
.legacy-icon-steps {
  max-width: 800px;
  margin: 8px auto 0;
}

.legacy-icon-steps .legacy-step {
  flex-grow: 1;
}

.legacy-icon-tile {
  aspect-ratio: 1;
  background: #fff;
  border-radius: 22%;
  box-shadow: 0 6px 0 #1a6bb8;
}

.legacy-icon-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.legacy-icon-tile-source img {
  object-position: 50% 30%;
}

.legacy-icon-tile-cutout img {
  object-fit: contain;
  padding: 8%;
}

.legacy-icon-tile-final {
  background: none;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
}

.legacy-icon-tile-final img {
  object-fit: contain;
}

/* Settings: original → early panel → final */
.legacy-settings-steps {
  margin-top: 8px;
}

.legacy-step-original { flex-grow: 1246; }
.legacy-step-early { flex-grow: 818; }
.legacy-step-final { flex-grow: 808; }

/* ── Remastered Features ── */
.legacy-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 36px 48px;
  margin-top: 8px;
}

.legacy-feature-banner {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 5px 0 #1a6bb8);
}

.legacy-feature-text {
  margin-top: 16px;
  padding: 0 20px;
  font-family: "CreativeBlock", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.35;
  text-align: center;
  text-transform: uppercase;
  color: #fff;
}

/* Two screenshots or promos side by side */
.legacy-shots,
.legacy-promo-art {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  margin-top: 56px;
}

.legacy-promo-art {
  margin-top: 32px;
}

/* Keep captions on one baseline when the two images differ slightly in ratio */
.legacy-shot {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.legacy-shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

/* ── Island maps: white cards in two rows (three portrait-ish, two landscape);
   flex-grow follows each map's aspect ratio so a row shares one height ── */
.legacy-maps {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.legacy-map-row {
  display: flex;
  align-items: flex-start;
  gap: 28px;
}

.legacy-map {
  min-width: 0;
  flex-basis: 0;
  flex-shrink: 1;
  padding: 14px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 6px 0 #1a6bb8;
}

.legacy-map-cold-case { flex-grow: 886; }
.legacy-map-pewter-planet { flex-grow: 917; }
.legacy-map-time-tangled-2 { flex-grow: 998; }
.legacy-map-tinker-town { flex-grow: 1287; }
.legacy-map-lobster-claw { flex-grow: 1273; }

.legacy-map img {
  display: block;
  width: 100%;
  height: auto;
}

/* ── Sketches: rows that share a height ── */
.legacy-sketch-row {
  display: flex;
  align-items: flex-start;
  gap: 28px;
}

.legacy-sketch-row + .legacy-sketch-row {
  margin-top: 36px;
}

.legacy-sketch {
  min-width: 0;
  flex-basis: 0;
  flex-shrink: 1;
}

.legacy-sketch-thundertows { flex-grow: 1171; }
.legacy-sketch-blimp { flex-grow: 1800; }
.legacy-sketch-santa { flex-grow: 717; }
.legacy-sketch-museum { flex-grow: 803; }
.legacy-sketch-museum-final { flex-grow: 1789; }

.legacy-sketch-art {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 0 #1a6bb8;
}

.legacy-sketch-art img {
  display: block;
  width: 100%;
  height: auto;
}

/* The final logo sits on its own blue artboard: outline it so the card still reads */
.legacy-sketch-art-blue {
  background: #2083f0;
  outline: 2px solid rgba(255, 255, 255, 0.45);
  outline-offset: -2px;
}

/* ── Desktop launcher ── */
.legacy-launcher img {
  display: block;
  width: 100%;
  max-width: 600px;
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 6px 0 #1a6bb8);
}

/* ── Tablet / narrow desktop ── */
@media (max-width: 720px) {
  .legacy-steps.legacy-settings-steps {
    flex-direction: column;
    gap: 14px;
  }

  .legacy-settings-steps .legacy-step {
    flex: none;
    width: 100%;
    max-width: 300px;
  }

  .legacy-settings-steps .legacy-step-arrow {
    margin-bottom: 0;
    transform: rotate(90deg);
  }

  .legacy-icon-steps {
    gap: 12px;
  }

  .legacy-features {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .legacy-shots,
  .legacy-promo-art {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  /* Maps: a compact two-column grid of square cards */
  .legacy-maps {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .legacy-map-row {
    display: contents;
  }

  .legacy-map {
    aspect-ratio: 1;
    padding: 10px;
  }

  .legacy-map img {
    height: 100%;
    object-fit: contain;
  }

  /* Five maps: centre the odd one out on its own row */
  .legacy-map-lobster-claw {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 8px);
  }

  .legacy-sketch-row {
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }

  .legacy-sketch-row + .legacy-sketch-row {
    margin-top: 24px;
  }

  .legacy-sketch {
    flex: none;
    width: 100%;
  }

  .legacy-sketch-santa,
  .legacy-sketch-museum {
    max-width: 280px;
  }
}

/* ── Mobile ── */
@media (max-width: 480px) {
  .legacy-note {
    margin-top: 18px;
    font-size: 11px;
  }

  .legacy-note.legacy-note-lead {
    margin-bottom: 18px;
  }

  .legacy-section-subtitle.legacy-subtitle-lead {
    margin-top: 40px;
    margin-bottom: 10px;
  }

  .legacy-step-label {
    margin-top: 8px;
    font-size: 14px;
  }

  .legacy-icon-steps {
    gap: 12px;
  }

  .legacy-icon-steps .legacy-step-arrow {
    display: none;
  }

  .legacy-settings-steps .legacy-step {
    max-width: 240px;
  }

  .legacy-feature-text {
    margin-top: 10px;
    padding: 0 6px;
    font-size: 11px;
  }

  .legacy-shots {
    margin-top: 32px;
  }

  .legacy-map {
    padding: 6px;
    border-radius: 8px;
    box-shadow: 0 4px 0 #1a6bb8;
  }

  .legacy-sketch-art {
    border-radius: 8px;
    box-shadow: 0 4px 0 #1a6bb8;
  }

  .legacy-sketch-santa,
  .legacy-sketch-museum {
    max-width: 210px;
  }
}

/* ── Legends of Palimpagos additions ── */

/* ══════════════════════════════════════════
   Legends of Palimpagos: enrichment (staging)
   Loaded after shared/styles.css on the draft page. Fold into the
   "Legends of Palimpagos page" section of shared/styles.css when merging.
   ══════════════════════════════════════════ */

/* ── Shared bits ── */

.lop-subsection-light {
  color: #fff;
}

/* First divider straight under a section title */
.lop-subsection-top {
  margin-top: 0;
}

.lop-lead {
  max-width: 780px;
  margin: -8px auto 32px;
  font-family: "CurseCasual", sans-serif;
  font-size: 21px;
  line-height: 1.5;
  color: #825416;
  text-align: center;
}

/* ── Narrative Design: the seven books ──
   Book I's poster beside the islands its chapters visit, a rule, then the other six posters:
   the layout of the old flattened bookDisplayTrans.png, built from its pieces
   (_unused/tools/build-lop-narrative.sh). The posters are the key art, so a click opens one in
   the lightbox; the title art, the book icons and Book I's logo sit over them and let the click
   through. Every placement is a fraction of its poster (or of the row), measured off the old
   picture, so the whole thing scales as one. */
.lop-books {
  display: grid;
  grid-template-columns: 22.2fr 1.6fr 25.3fr 2.5fr 0.35fr 2.9fr 42.5fr;
  grid-template-areas: "first . islands . rule . rest";
  align-items: center;
  padding: 2% 0 3% 2.6%;
}

/* Book I and its islands are two cells of the row */
.lop-books-first {
  display: contents;
}

.lop-books-first > .lop-book {
  grid-area: first;
}

.lop-islands {
  grid-area: islands;
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.lop-books-rule {
  grid-area: rule;
  align-self: stretch;
  margin: 3% 0;
  background: #7a4a1a;
  border-radius: 3px;
}

/* The other six, three by two, with room above and to the left for the icons that hang off
   their corners */
.lop-books-rest {
  grid-area: rest;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 9.2%;
  padding: 6.2% 0 0 5.8%;
}

.lop-books-rest > .lop-book:nth-child(n + 4) {
  margin-top: 32%;
}

.lop-book {
  margin: 0;
  min-width: 0;
}

/* The cover is a button: it opens the book's popup (.lop-book-dialog) */
.lop-book-cover {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  border-radius: 7% / 4.8%;
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Its pictures too: `main[class] img` would give them the lightbox's zoom-in cursor */
main .lop-book-cover img {
  cursor: pointer;
}

.lop-book-cover:focus-visible {
  outline: 3px solid #6d4120;
  outline-offset: 5px;
}

.lop-book-art {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 760 / 1099;
  border-radius: 7% / 4.8%;
  background: #2a1a0a;
  box-shadow: 0 10px 24px rgba(109, 65, 32, 0.28);
  transition: box-shadow 0.35s ease;
}

@media (hover: hover) {
  .lop-book-cover:hover {
    transform: translateY(-6px);
  }

  .lop-book-cover:hover .lop-book-art {
    box-shadow: 0 16px 30px rgba(109, 65, 32, 0.36);
  }
}

/* ── A book, up close (the popup a cover opens) ──
   A native <dialog>, filled by the page's script from the book's hidden .lop-book-about: its
   pixel icon and title art over the poster at size, what the book is about, and what its two
   old words mean. Dark, as the posters are, so the white title art reads as it does on them. */
html:has(.lop-book-dialog[open]) {
  overflow: hidden;
}

.lop-book-dialog {
  width: min(1040px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: #1c130b;
  color: #f1e2c4;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  overflow: auto;
  overscroll-behavior: contain;
}

.lop-book-dialog::backdrop {
  background: rgba(20, 12, 5, 0.72);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.lop-book-dialog[open] {
  animation: lop-bd-in 0.34s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.lop-book-dialog[open]::backdrop {
  animation: lop-bd-fade 0.3s ease;
}

@keyframes lop-bd-in {
  from { opacity: 0; transform: translateY(18px) scale(0.97); }
  to { opacity: 1; transform: none; }
}

@keyframes lop-bd-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.lop-bd-panel {
  position: relative;
  padding: clamp(20px, 3.4vw, 40px);
}

.lop-bd-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(241, 226, 196, 0.08);
  color: #f1e2c4;
  cursor: pointer;
  transition: background 0.2s ease;
}

.lop-bd-close:hover {
  background: rgba(241, 226, 196, 0.18);
}

.lop-bd-close:focus-visible {
  outline: 2px solid #f1e2c4;
  outline-offset: 2px;
}

.lop-bd-close svg {
  width: 20px;
  height: 20px;
}

/* The book's icon and its title art, side by side */
.lop-bd-head {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.4vw, 28px);
  padding-right: 48px;
  margin-bottom: clamp(18px, 2.6vw, 30px);
}

.lop-bd-icon {
  flex: 0 0 auto;
  width: clamp(76px, 10vw, 120px);
  height: auto;
  image-rendering: pixelated;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.45));
}

.lop-bd-heading {
  min-width: 0;
  flex: 1;
}

.lop-bd-num {
  margin: 0 0 6px;
  font-family: "CurseCasual", sans-serif;
  font-size: 15px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #d9a55b;
}

.lop-bd-title {
  display: block;
  width: auto;
  max-width: 100%;
  height: clamp(64px, 9vw, 116px);
  object-fit: contain;
  object-position: 0 50%;
}

/* The title art says the name: the text is for the dialog's accessible name */
.lop-bd-name {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.lop-bd-body {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(20px, 3.4vw, 44px);
  align-items: start;
}

.lop-bd-poster {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 760 / 1099;
  border-radius: 12px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5);
}

.lop-bd-blurb {
  margin: 0 0 clamp(20px, 2.8vw, 32px);
  font-family: "CurseCasual", sans-serif;
  font-size: clamp(17px, 1.55vw, 21px);
  line-height: 1.55;
}

.lop-bd-words-title {
  margin: 0 0 12px;
  font-family: "Chaloops", sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: #d9a55b;
}

.lop-bd-words {
  margin: 0;
  border-top: 1px solid rgba(217, 165, 91, 0.35);
}

.lop-bd-words > div {
  padding: 12px 0;
  border-bottom: 1px solid rgba(217, 165, 91, 0.35);
}

.lop-bd-words dt {
  font-family: "Chaloops", sans-serif;
  font-weight: 700;
  font-size: 19px;
  color: #fff;
}

.lop-bd-words dt span {
  margin-left: 6px;
  font-family: "CurseCasual", sans-serif;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 1px;
  color: #b89a6c;
}

.lop-bd-words dd {
  margin: 4px 0 0;
  font-family: "CurseCasual", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #e3d0ac;
}

@media (max-width: 720px) {
  .lop-bd-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .lop-bd-poster {
    max-width: 360px;
    margin: 0 auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lop-book-dialog[open],
  .lop-book-dialog[open]::backdrop {
    animation: none;
  }
}

/* Over the poster, placed by --x and --w (fractions of the poster's width) and --y (of its
   height): the cover is exactly the poster's box */
.lop-book-title,
.lop-book-icon,
.lop-book-logo {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: auto;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.lop-book-title {
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45));
}

.lop-book-logo {
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.35));
}

.lop-book-1 .lop-book-logo  { --x: 22.6%; --y: 2.5%;  --w: 53.6%; }
.lop-book-1 .lop-book-title { --x: 10.7%; --y: 16.5%; --w: 78.6%; }
.lop-book-1 .lop-book-icon  { --x: -11.9%; --y: -7.4%; --w: 26%; }
.lop-book-2 .lop-book-title { --x: 6.4%;  --y: 48%;   --w: 86%; }
/* Book II's poster is pale where its title sits: the title is inked black there, with a thin
   pale halo, as on the poster itself */
.lop-book-2 .lop-book-title {
  filter: brightness(0) drop-shadow(0 0 1.5px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 5px rgba(255, 255, 255, 0.5));
}
.lop-book-2 .lop-book-icon  { --x: -23%;  --y: -15.5%; --w: 44%; }
.lop-book-3 .lop-book-title { --x: 11%;   --y: 66%;   --w: 77%; }
.lop-book-3 .lop-book-icon  { --x: -24%;  --y: -17%;  --w: 49%; }
.lop-book-4 .lop-book-title { --x: 7.4%;  --y: 35%;   --w: 79%; }
.lop-book-4 .lop-book-icon  { --x: -22%;  --y: -11%;  --w: 44%; }
.lop-book-5 .lop-book-title { --x: 17%;   --y: 50%;   --w: 68%; }
.lop-book-5 .lop-book-icon  { --x: -25%;  --y: -17%;  --w: 42%; }
.lop-book-6 .lop-book-title { --x: 20%;   --y: 8.6%;  --w: 62%; }
.lop-book-6 .lop-book-icon  { --x: -27%;  --y: -19%;  --w: 52%; }
.lop-book-7 .lop-book-title { --x: 15%;   --y: 72%;   --w: 72%; }
.lop-book-7 .lop-book-icon  { --x: -20%;  --y: -15%;  --w: 49%; }

/* ── Character Design: dialogue portraits ── */

.lop-portraits {
  display: flex;
  gap: 24px;
}

/* Groups grow by their row's total aspect ratio so both rows share one portrait height */
.lop-portrait-group {
  flex: var(--lop-row-ar, 2) 1 0;
  min-width: 0;
  background: #595959;
  border-radius: 6px;
  padding: 20px 20px 18px;
}

.lop-portrait-name {
  font-family: "Chaloops", sans-serif;
  font-weight: 700;
  font-size: 24px;
  color: #fff;
  text-align: center;
  margin-bottom: 14px;
}

/* Portraits share one canvas height, so top-aligning also lines up their feet and captions */
.lop-portrait-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  max-width: calc(var(--lop-row-ar, 2) * 300px);
  margin: 0 auto;
}

/* Every portrait sits on a canvas of the same height, so growing each by its
   aspect ratio keeps the characters at one scale across the row */
.lop-portrait {
  flex: var(--lop-ar, 0.55) 1 0;
  min-width: 0;
}

.lop-portrait img {
  display: block;
  width: 100%;
  height: auto;
}

.lop-portrait figcaption {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 2px solid rgba(255, 255, 255, 0.25);
  font-family: "CurseCasual", sans-serif;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #fff;
  text-align: center;
}

.lop-portrait figcaption i {
  display: block;
  font-style: normal;
  font-size: 11px;
  letter-spacing: 1px;
  color: #e8c592;
}

/* ── Environment Art: explorations ── */

.lop-explorations img {
  aspect-ratio: 2000 / 1002;
  background: #b3b0cf;
}

/* ── Level Design ── */

.lop-legend-tabs {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
}

.lop-legend-tab {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  color: #825416;
  -webkit-tap-highlight-color: transparent;
}

.lop-legend-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 360 / 220;
  border-radius: 8px;
  overflow: hidden;
  border: 3px solid transparent;
  box-shadow: 0 0 0 1px rgba(109, 65, 32, 0.25);
  opacity: 0.62;
  transition: opacity 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

/* Thumbnails are part of the button: no lightbox, no zoom cursor */
.lop-legend-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.lop-legend-label {
  font-family: "CurseCasual", sans-serif;
  font-size: 17px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  line-height: 1.2;
  text-align: center;
  opacity: 0.75;
  transition: opacity 0.25s ease;
}

@media (hover: hover) {
  .lop-legend-tab:hover .lop-legend-thumb {
    opacity: 0.9;
    transform: translateY(-2px);
  }
  .lop-legend-tab:hover .lop-legend-label {
    opacity: 1;
  }
}

.lop-legend-tab[aria-selected="true"] .lop-legend-thumb {
  opacity: 1;
  border-color: #6d4120;
  box-shadow: 0 8px 18px rgba(109, 65, 32, 0.25);
}

.lop-legend-tab[aria-selected="true"] .lop-legend-label {
  opacity: 1;
  color: #6d4120;
}

.lop-legend-tab:focus-visible {
  outline: none;
}

.lop-legend-tab:focus-visible .lop-legend-thumb {
  outline: 3px solid #6d4120;
  outline-offset: 3px;
}

.lop-legend-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  gap: 28px;
  align-items: center;
}

.lop-legend-panel[hidden] {
  display: none;
}

.lop-legend-art {
  position: relative;
  line-height: 0;
}

/* Markers over the legend art for the highlighted notes. Only the markers themselves take the
   pointer (hovering one lights its note); a click on one is passed on to the image (lightbox) */
.lop-legend-pins {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.lop-legend-pin {
  position: absolute;
  width: 26px;
  height: 26px;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  cursor: zoom-in;
}

/* Wide scenes are scaled down too far to read the original markers: redraw them larger */
.lop-legend-pins-badged .lop-legend-pin b {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #111;
  color: #e3261c;
  font-family: "Futura", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 26px;
  text-align: center;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85);
}

.lop-legend-pin::after {
  content: '';
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px #e3261c, 0 0 14px rgba(227, 38, 28, 0.6);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.lop-legend-pin.is-lit::after {
  opacity: 1;
  transform: scale(1);
  animation: lop-legend-pulse 1.2s ease-in-out 0.25s infinite;
}

@keyframes lop-legend-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.18); }
}

.lop-legend-art img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  background: #1a1a1a;
  box-shadow: 0 12px 28px rgba(109, 65, 32, 0.3);
}

.lop-legend-notes {
  list-style: none;
  display: grid;
  gap: 14px;
}

.lop-legend-notes li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  background: #f1d7ae;
  border-radius: 6px;
  outline: none;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

/* Hovered or keyboard-focused note: also pulses its markers on the art */
.lop-legend-notes li.is-lit {
  background: #f7e3c3;
  box-shadow: inset 0 0 0 2px #6d4120;
}

/* Same marker style as the legends: red number on a black dot */
.lop-legend-num {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #111;
  color: #e3261c;
  font-family: "Futura", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 15px;
  line-height: 34px;
  text-align: center;
}

.lop-legend-notes h3 {
  font-family: "Chaloops", sans-serif;
  font-weight: 700;
  font-size: 19px;
  line-height: 1.2;
  color: #6d4120;
  margin: 3px 0 4px;
}

.lop-legend-notes p {
  font-family: "CurseCasual", sans-serif;
  font-size: 16px;
  line-height: 1.45;
  color: #825416;
}

/* Wide scenes: art across the top, notes in two columns below */
.lop-legend-wide {
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}

.lop-legend-wide .lop-legend-notes {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
}

/* ── Level Design: score ── */

.lop-score {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  max-width: 900px;
  margin: 0 auto;
}

.lop-track {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px 14px 14px;
  background: #6d4120;
  border-radius: 40px;
  color: #e8c592;
}

.lop-track-btn {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 0;
  background: #e8c592;
  color: #6d4120;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.lop-track-btn:hover {
  background: #f4dbb4;
  transform: scale(1.05);
}

.lop-track-btn:focus-visible,
.lop-track-bar:focus-visible {
  outline: 3px solid #e8c592;
  outline-offset: 3px;
}

.lop-track-play {
  margin-left: 3px;
}

.lop-track-pause,
.lop-track.is-playing .lop-track-play {
  display: none;
}

.lop-track.is-playing .lop-track-pause {
  display: block;
}

.lop-track-body {
  flex: 1 1 auto;
  min-width: 0;
}

.lop-track-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.lop-track-title {
  font-family: "CurseCasual", sans-serif;
  font-size: 17px;
  line-height: 1.2;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lop-track-title i {
  font-style: normal;
  color: #e8c592;
  margin-left: 4px;
}

.lop-track-time {
  flex: 0 0 auto;
  font-family: "CurseCasual", sans-serif;
  font-size: 14px;
  color: #e8c592;
  font-variant-numeric: tabular-nums;
}

.lop-track-bar {
  position: relative;
  height: 6px;
  border-radius: 3px;
  background: rgba(232, 197, 146, 0.3);
  overflow: hidden;
  cursor: pointer;
}

/* Bigger hit area than the visible bar */
.lop-track-bar::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -10px;
  bottom: -10px;
}

.lop-track-fill {
  position: absolute;
  inset: 0;
  background: #e8c592;
  border-radius: 3px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.25s linear;
}

/* ── Responsive ── */

@media (max-width: 1100px) {
  .lop-portraits {
    flex-direction: column;
  }
}

@media (max-width: 900px) {
  .lop-legend-panel {
    grid-template-columns: minmax(0, 1fr);
  }
  .lop-legend-panel .lop-legend-art {
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
  }
  .lop-legend-wide .lop-legend-art {
    max-width: none;
  }
  .lop-score {
    grid-template-columns: minmax(0, 1fr);
    max-width: 520px;
  }
}

/* Narrower: Book I and its islands side by side, the rule across, the six below (the old
   picture's mobile layout, bookDisplayTransMobile.png) */
@media (max-width: 720px) {
  .lop-books {
    grid-template-columns: 46fr 4fr 50fr;
    grid-template-areas:
      "first . islands"
      "rule rule rule"
      "rest rest rest";
    padding: 4% 0 3% 5%;
  }

  .lop-books-rule {
    justify-self: center;
    align-self: auto;
    width: 60%;
    height: 4px;
    margin: 7% 0 2%;
  }

  .lop-books-rest {
    padding: 8% 4% 0 10%;
  }
}

@media (max-width: 480px) {
  .lop-lead {
    font-size: 14px;
    margin: 0 auto 18px;
  }

  .lop-portraits {
    gap: 14px;
  }

  .lop-portrait-group {
    padding: 14px 10px 12px;
  }

  .lop-portrait-name {
    font-size: 18px;
    margin-bottom: 10px;
  }

  .lop-portrait-row {
    gap: 4px;
  }

  .lop-portrait figcaption {
    font-size: 10px;
    letter-spacing: 0;
    margin-top: 6px;
    padding-top: 6px;
  }

  .lop-portrait figcaption i {
    font-size: 9px;
    letter-spacing: 0;
  }

  .lop-legend-tabs {
    gap: 8px;
    margin-bottom: 16px;
  }

  .lop-legend-tab {
    gap: 6px;
  }

  .lop-legend-thumb {
    border-width: 2px;
    border-radius: 6px;
  }

  .lop-legend-label {
    font-size: 11px;
    letter-spacing: 0;
  }

  .lop-legend-panel,
  .lop-legend-wide {
    gap: 14px;
  }

  .lop-legend-pin {
    width: 16px;
    height: 16px;
  }

  /* Too cramped to redraw the numbers at phone width: keep only the highlight rings */
  .lop-legend-pins-badged .lop-legend-pin b {
    display: none;
  }

  .lop-legend-pin::after {
    inset: -5px;
    border-width: 2px;
  }

  .lop-legend-wide .lop-legend-notes {
    grid-template-columns: minmax(0, 1fr);
  }

  .lop-legend-notes {
    gap: 10px;
  }

  .lop-legend-notes li {
    gap: 10px;
    padding: 12px;
  }

  .lop-legend-num {
    width: 26px;
    height: 26px;
    line-height: 26px;
    font-size: 12px;
  }

  .lop-legend-notes h3 {
    font-size: 15px;
    margin-top: 2px;
  }

  .lop-legend-notes p {
    font-size: 13px;
  }

  .lop-track {
    gap: 10px;
    padding: 10px 14px 10px 10px;
  }

  .lop-track-btn {
    width: 40px;
    height: 40px;
  }

  .lop-track-title {
    font-size: 14px;
  }

  .lop-track-time {
    font-size: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lop-legend-pin.is-lit::after {
    animation: none;
  }

  .lop-book-cover,
  .lop-book-art,
  .lop-legend-thumb,
  .lop-track-btn,
  .lop-track-fill {
    transition: none;
  }
}

/* ── Still Not Tired additions ── */

/* ══════════════════════════════════════════
   Still Not Tired: leaf versions (staging for projects/still-not-tired-draft.html)
   The Three Cautionary Tails art exists with a cannabis leaf and with a catnip leaf.
   [data-snt-leaf-scope] holds a stack of both images plus (except the collection mockup)
   a two-button switch (aria-pressed, like the campaign tabs). The page script keeps
   data-snt-leaf and aria-pressed in step across every scope.
   ══════════════════════════════════════════ */

/* ── Image stack: both versions share one grid cell and crossfade ── */

.snt-full .snt-leaf-stack {
  position: relative;
  display: grid;
  isolation: isolate;
}

.snt-full .snt-leaf-stack > .snt-leaf-img {
  grid-area: 1 / 1;
  position: relative;
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  /* Outgoing image stays put under the incoming one until the fade is done */
  transition: opacity 0s linear 0.4s, visibility 0s linear 0.4s;
}

.snt-full [data-snt-leaf="cannabis"] .snt-leaf-stack > .snt-leaf-img-cannabis,
.snt-full [data-snt-leaf="catnip"] .snt-leaf-stack > .snt-leaf-img-catnip {
  z-index: 2;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.4s ease;
}

/* ── The switch: a segmented pill in the campaign tabs' style (leaf chip + hand-lettered name) ── */

.snt-full .snt-leaf {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  margin: 26px auto 0;
  padding: 4px;
  border: 2px solid var(--snt-ink);
  border-radius: 999px;
  background: #fff;
}

.snt-full .snt-leaf .snt-leaf-opt {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 4px 17px 4px 4px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--snt-ink);
  font-family: var(--snt-hand);
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.2s ease, color 0.2s ease;
}

.snt-full .snt-leaf .snt-leaf-chip {
  display: block;
  flex: none;
  width: 38px;
  height: 38px;
  margin: 0;
  border-radius: 50%;
  background-color: var(--snt-night);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 74% auto;
}

.snt-full .snt-leaf .snt-leaf-chip-cannabis {
  background-image: url("/projects/still-not-tired/variants/leaf-cannabis.png");
}

.snt-full .snt-leaf .snt-leaf-chip-catnip {
  background-image: url("/projects/still-not-tired/variants/leaf-catnip.png");
}

.snt-full .snt-leaf .snt-leaf-name {
  display: block;
  margin: 0;
  padding-top: 3px;
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
}

.snt-full .snt-leaf .snt-leaf-opt:hover {
  background: rgba(20, 18, 24, 0.08);
}

.snt-full .snt-leaf .snt-leaf-opt[aria-pressed="true"] {
  background: var(--snt-ink);
  color: #fff;
  cursor: default;
}

.snt-full .snt-leaf .snt-leaf-opt:focus-visible {
  outline: 3px solid var(--snt-blue);
  outline-offset: 3px;
}

/* On the dark Three Cautionary Tails card */
.snt-full .snt-leaf-dark {
  border-color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.06);
}

.snt-full .snt-leaf-dark .snt-leaf-opt {
  color: #fff;
}

.snt-full .snt-leaf-dark .snt-leaf-opt:hover {
  background: rgba(255, 255, 255, 0.14);
}

.snt-full .snt-leaf-dark .snt-leaf-opt[aria-pressed="true"] {
  background: #fff;
  color: var(--snt-ink);
}

.snt-full .snt-leaf-dark .snt-leaf-opt:focus-visible {
  outline-color: var(--snt-yellow);
}

/* ── Sticker sheet card: a smaller switch ── */

/* The switch makes this card taller than its neighbors: keep the others at their own height */
.snt-full .snt-sec-stickers .snt-sheets {
  align-items: start;
}

.snt-full .snt-sheet[data-snt-leaf-scope] {
  container: snt-leaf-card / inline-size;
}

.snt-full .snt-leaf-sm {
  margin-top: 12px;
  padding: 3px;
  gap: 3px;
}

.snt-full .snt-leaf-sm .snt-leaf-opt {
  gap: 7px;
  padding: 3px 13px 3px 3px;
  font-size: 19px;
}

.snt-full .snt-leaf-sm .snt-leaf-chip {
  width: 30px;
  height: 30px;
}

/* Narrow cards (three columns between the 720px and 1024px layouts): stack the two options */
@container snt-leaf-card (max-width: 224px) {
  .snt-full .snt-leaf-sm {
    flex-direction: column;
    width: 100%;
    border-radius: 22px;
  }

  .snt-full .snt-leaf-sm .snt-leaf-opt {
    border-radius: 18px;
  }
}

@media (max-width: 480px) {
  .snt-full .snt-leaf {
    margin-top: 20px;
  }

  .snt-full .snt-leaf .snt-leaf-opt {
    gap: 8px;
    padding-right: 15px;
    font-size: 20px;
  }

  .snt-full .snt-leaf .snt-leaf-chip {
    width: 34px;
    height: 34px;
  }

  .snt-full .snt-leaf-sm .snt-leaf-opt {
    font-size: 19px;
  }

  .snt-full .snt-leaf-sm .snt-leaf-chip {
    width: 30px;
    height: 30px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .snt-full .snt-leaf-stack > .snt-leaf-img,
  .snt-full .snt-leaf .snt-leaf-opt {
    transition: none !important;
  }
}

/* ── Poptropica Legacy: 481–720px fixes ── */

/* ── Poptropica Legacy: 481–720px (staging, merge into the "Poptropica Legacy page"
   section of shared/styles.css, next to its other responsive blocks) ──────────────

   Between the mobile breakpoint and 720px the page keeps its desktop type and image
   sizes while the content area is only (viewport − 88px sidebar − 80px section
   padding) wide. Two blocks broke there:

   1. Expansion Content — the two comparison columns are flex items (`flex: 1`) whose
      own contents set a floor on how far they can shrink: the "Original"/"Expansion"
      subtitle is ~212px wide at 42px, and the logo is capped at 200px. The row stayed
      ~464px wide, so the Expansion column ran out of the section and under the
      sidebar (and gave the page a horizontal scrollbar at 481px). Scaling the
      subtitle and the logo with the viewport lets the columns fit, so the comparison
      stays side by side at every width, as it already is on mobile and on desktop.

   2. Branding — the feature and island logos are sized `height: 100px; width: auto`,
      which makes the wider marks ~210px across. That fits the 220px cells the tight
      grid uses elsewhere, but in this range the cells are 160px, so each logo spilled
      over its neighbour. Capping a logo at its own cell keeps them apart; `object-fit:
      contain` already centres the artwork in the 100px-tall box.
*/

@media (min-width: 481px) and (max-width: 720px) {
  /* ── 1. Expansion Content: keep the comparison inside the content area ── */
  .legacy-expansion-compare {
    gap: 20px;
  }

  .legacy-expansion-col {
    min-width: 0;
  }

  .legacy-expansion-compare .legacy-section-subtitle {
    font-size: clamp(22px, 4.4vw, 34px);
    margin-bottom: 16px;
  }

  .legacy-expansion-logo {
    max-width: 100%;
    height: clamp(50px, 8.5vw, 70px);
    margin-bottom: 14px;
  }

  /* ── 2. Branding: one logo per cell, no spill onto the next ── */
  .legacy-grid-3.legacy-grid-tight .legacy-brand-item img {
    max-width: 100%;
  }
}