/* ==========================================================================
   PSYCHEDELIC — one page. Loaded on a/psychedelic.html.

   The artifact's poster sheet: a petal mandala in three hues behind a
   hand-drawn ink border, the name in Shrikhand warped along a wave, and the
   equal-value lever. Then the record on still cream panels enclosed in ink,
   set off the vertical, on a flat orange ground.

   The pair: #F84F33 and #00AAB4 are oklch(0.66 0.21 32) and
   oklch(0.66 0.14 200) — equal lightness, the record's mechanism. The hues
   are ours.

   SAFETY. Nothing flashes, no hue cycles, nothing spins. The mandala drifts
   eight degrees over a minute and back; the word's warp is animated by
   script only when motion is allowed. Under prefers-reduced-motion the page
   is entirely still. No sentence sits on the vibrating pair: body copy is
   ink on cream (15.6:1).
   ========================================================================== */

@font-face {
  font-family: "Shrikhand PY";
  src: url("fonts/shrikhand.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Karla PY";
  src: url("fonts/karla.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-display: swap;
}

.py-page {
  --py-a: #F84F33;   /* orange, L 0.66 */
  --py-b: #00AAB4;   /* blue-green, L 0.66 */
  --py-c: #CD3EC6;   /* magenta, L 0.62 */
  --py-d: #3E9F24;   /* green, L 0.62 */
  --py-cream: #FFF4DE;
  --py-ink: #2A1330;
  --py-display: "Shrikhand PY", "Cooper Black", Georgia, serif;
  --py-text: "Karla PY", "Helvetica Neue", Arial, sans-serif;
}
.py-page main { background: var(--py-a); color: var(--py-ink); overflow-x: clip; }

/* ---- the sheet ----------------------------------------------------------- */
.py-sheet {
  position: relative; overflow: hidden;
  max-width: 1100px; margin: clamp(10px, 3vw, 30px) auto 0;
  padding: clamp(24px, 4vw, 50px) clamp(20px, 4vw, 50px) clamp(36px, 5vw, 60px);
  font: 500 1.125rem/1.6 var(--py-text);
  color: var(--py-ink);
}
.py-field { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.py-mandala { position: absolute; left: 50%; top: 0; width: 1400px; max-width: none; height: 1400px; transform: translateX(-50%); }
.py-f-a { fill: var(--py-a); }
.py-f-b { fill: var(--py-b); }
.py-f-c { fill: var(--py-c); }
.py-f-d { fill: var(--py-d); }
.py-border { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.py-border path { fill: none; stroke: var(--py-ink); stroke-width: 10; stroke-linejoin: round; vector-effect: non-scaling-stroke; }

/* A slow drift, not a turn: eight degrees across a minute and back. */
@media (prefers-reduced-motion: no-preference) {
  .py-mandala__g { transform-box: view-box; transform-origin: 700px 700px; animation: py-drift 60s ease-in-out infinite alternate; }
}
@keyframes py-drift { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }

.py-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

.py-kick, .py-tag { position: relative; z-index: 2; margin: 0; text-align: center; }
.py-kick span {
  display: inline-block; background: var(--py-cream); color: var(--py-ink);
  padding: 6px 18px; border-radius: 30px; box-shadow: 0 0 0 3px var(--py-ink);
  font: 700 0.875rem/1.4 var(--py-text); letter-spacing: 0.1em; text-transform: uppercase;
}
.py-h1 { position: relative; z-index: 2; margin: 10px 0 0; line-height: 0; }
.py-word { display: block; width: 100%; height: auto; overflow: visible; }
.py-word__t {
  font-family: var(--py-display); font-size: 150px; letter-spacing: -6px;
  fill: var(--py-b); stroke: var(--py-ink); stroke-width: 8px; paint-order: stroke;
}
.py-tag span {
  display: inline-block; max-width: 40rem; background: var(--py-cream); color: var(--py-ink);
  padding: 10px 22px; border-radius: 28px; box-shadow: 0 0 0 3px var(--py-ink);
  font: 400 1.25rem/1.35 var(--py-display);
}

/* ---- the lever ----------------------------------------------------------- */
.py-demo {
  position: relative; z-index: 2;
  width: min(700px, 100%); margin: 36px auto 0;
  background: var(--py-cream); color: var(--py-ink);
  border-radius: 44% 56% 48% 52% / 12% 14% 10% 12%;
  padding: clamp(20px, 3vw, 34px) clamp(22px, 4vw, 44px);
  box-shadow: 0 0 0 4px var(--py-ink);
}
.py-demo__h { margin: 0 0 10px; font: 400 clamp(1.625rem, 3.4vw, 2.375rem)/1.1 var(--py-display); }
.py-demo p { margin: 0 0 12px; }
.py-vib {
  display: grid; place-items: center; height: 260px; margin: 14px 0;
  background: var(--py-a); border-radius: 50% / 30%; box-shadow: 0 0 0 4px var(--py-ink);
}
.py-vib__in { width: 62%; height: 56%; border-radius: 50%; background: var(--py-in, var(--py-b)); }
.py-demo__l { display: block; margin-top: 10px; font-weight: 700; }
.py-demo__r { display: block; width: 100%; height: 44px; margin: 0; accent-color: var(--py-ink); }
.py-demo__o { display: block; font-weight: 700; }

/* ---- the record ---------------------------------------------------------- */
.py-rec { background: var(--py-a); color: var(--py-ink); font: 500 1.0625rem/1.6 var(--py-text); padding: clamp(20px, 4vw, 50px) 0 clamp(40px, 6vw, 80px); }
.py-rec em { font-synthesis: style; }
.py-rec__in { max-width: 1100px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 50px); display: flow-root; }
.py-pn {
  background: var(--py-cream); color: var(--py-ink);
  border-radius: 44% 56% 48% 52% / 12% 14% 10% 12%;
  padding: clamp(22px, 3vw, 36px) clamp(22px, 4vw, 48px);
  box-shadow: 0 0 0 4px var(--py-ink);
  margin: 34px 0;
}
.py-pn--1 { width: min(600px, 100%); margin-left: 0; transform: rotate(-1.5deg); }
.py-pn--2 { width: min(660px, 100%); margin-left: auto; transform: rotate(1.2deg); border-radius: 52% 48% 44% 56% / 13% 11% 14% 10%; }
.py-pn--3 { width: min(720px, 100%); margin-inline: auto; border-radius: 48% 52% 55% 45% / 10% 13% 11% 14%; }
.py-pn--4 { width: min(580px, 100%); margin-left: 8%; transform: rotate(1.5deg); border-radius: 56% 44% 50% 50% / 14% 10% 12% 12%; }
.py-pn--5 { width: min(640px, 100%); margin-left: auto; transform: rotate(-1deg); }
/* Tables and rule lists need the room: wider, and nearly upright. */
.py-pn--wide { width: min(940px, 100%); margin-inline: auto; transform: rotate(-0.4deg); border-radius: 30px; }
.py-pn--wide:nth-child(even) { transform: rotate(0.4deg); }
.py-pn p { margin: 0 0 12px; }
.py-pn > :last-child { margin-bottom: 0; }

.py-h2 { margin: 0 0 12px; font: 400 clamp(1.625rem, 3.4vw, 2.375rem)/1.1 var(--py-display); color: var(--py-ink); }
.py-n { display: inline-block; min-width: 1.6em; padding: 0 0.3em; margin-left: 0.2em; background: var(--py-ink); color: var(--py-cream); border-radius: 999px; font-size: 0.7em; text-align: center; vertical-align: 0.15em; }
.py-h3 { margin: 0 0 6px; font: 400 1.35rem/1.15 var(--py-display); }
.py-lead { font-size: 1.25rem; line-height: 1.45; font-weight: 700; }
.py-dx { font-weight: 700; padding: 10px 16px; border-left: 6px solid var(--py-c); background: rgba(42, 19, 48, 0.06); }
.py-small { font-size: 0.9375rem; }
.py-none { margin: 0; font-style: normal; opacity: 1; }
.py-firm { font-weight: 700; }
.py-k { display: block; font: 700 0.75rem/1.4 var(--py-text); letter-spacing: 0.08em; text-transform: uppercase; }

/* facts */
.py-meta { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 22px; font-size: 1rem; }
.py-meta--one { grid-template-columns: 1fr; }
.py-meta__wide { grid-column: 1 / -1; }
.py-meta dt { font: 700 0.75rem/1.4 var(--py-text); letter-spacing: 0.1em; text-transform: uppercase; }
.py-meta dd { margin: 0 0 6px; }

/* tables */
.py-tw { overflow-x: auto; }
.py-tw:focus-visible { outline: 3px solid var(--py-ink); outline-offset: 3px; }
.py-ct, .py-rt { width: 100%; border-collapse: collapse; font-size: 1rem; }
.py-ct th, .py-ct td, .py-rt th, .py-rt td { text-align: left; vertical-align: top; padding: 8px 10px; border-top: 2px solid var(--py-ink); }
.py-ct th { width: 34%; }
.py-ct td p { margin: 0 0 6px; }
.py-rt thead th { font: 700 0.75rem/1.4 var(--py-text); letter-spacing: 0.08em; text-transform: uppercase; border-top: 0; }
.py-no { font-weight: 700; }

/* swatches: the chip, and its label beside it on cream (never on the chip) */
.py-swatch { display: flex; flex-wrap: wrap; gap: 10px 14px; margin: 4px 0 6px; }
.py-sw__one { display: inline-flex; align-items: center; gap: 8px; }
.py-sw__one i { width: 30px; height: 30px; border-radius: 50%; box-shadow: 0 0 0 2px var(--py-ink); }
.py-sw__one code { font: 700 0.875rem/1 var(--py-text); color: var(--py-ink); }

/* rules */
.py-areas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 18px 28px; }
.py-area ul { list-style: none; margin: 0; padding: 0; }
.py-area li { padding: 10px 0; border-top: 2px solid var(--py-ink); }
.py-area li p { margin: 2px 0 0; }

/* links: every link carries its own colour; no inherit rule above them */
.py-rec a.py-dim, .py-rec a.py-tag-a, .py-rec a.py-foot__a {
  color: var(--py-ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px;
  display: inline-flex; align-items: center; min-height: 44px;
}
.py-rec a.py-dim { font-weight: 700; }
.py-tags { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.py-conf, .py-use { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 14px; }
.py-rec a.py-conf__a, .py-conf__d, .py-rec a.py-use__a {
  display: block; min-height: 44px; height: 100%;
  padding: 14px 16px; border-radius: 22px; box-shadow: 0 0 0 3px var(--py-ink);
  background: var(--py-cream); color: var(--py-ink); text-decoration: none;
}
.py-conf b, .py-use b { display: block; font: 400 1.25rem/1.2 var(--py-display); margin-bottom: 2px; }
.py-conf__t { display: block; margin-top: 4px; }
.py-rec a.py-use__a b { margin-bottom: 4px; }
.py-rec a.py-conf__a:hover, .py-rec a.py-use__a:hover { background: var(--py-b); color: var(--py-ink); }
.py-rec a:focus-visible, .py-demo__r:focus-visible { outline: 3px solid var(--py-ink); outline-offset: 3px; }
.py-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; margin-top: 18px; }

@media (max-width: 760px) {
  .py-pn, .py-pn--wide, .py-pn--wide:nth-child(even) { transform: none; margin-left: 0; margin-right: 0; width: 100%; }
  .py-meta { grid-template-columns: 1fr; }
  .py-ct th { width: 40%; }
  .py-vib { height: 200px; }
}

/* ---- how they were printed (Design Completion Campaign, 2026-09-29) --------
   The documented production base drawn as swatches in the page's own inks:
   one flat plate per colour and their overprint, and a split-fountain blend.
   Still, like the rest of the record half. Text stays ink on cream. */
.py-demo__f { margin: 14px 0 0; padding-top: 12px; border-top: 2px solid var(--py-ink); font-size: 1rem; }
.py-print { margin: 0 0 16px; }
.py-print figcaption { font-size: 1rem; }
.py-plates { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.py-plate { display: block; width: 64px; height: 64px; border-radius: 50% 44% 52% 48%; box-shadow: 0 0 0 3px var(--py-ink); }
.py-plate--a { background: var(--py-a); }
.py-plate--b { background: var(--py-b); }
.py-plate--d { background: var(--py-d); }
.py-plate--all { width: 110px; background:
  radial-gradient(circle at 30% 50%, var(--py-b) 0 30%, transparent 31%),
  radial-gradient(circle at 70% 50%, var(--py-d) 0 22%, transparent 23%),
  var(--py-a); }
.py-fountain { height: 56px; margin-bottom: 10px; border-radius: 28px; box-shadow: 0 0 0 3px var(--py-ink);
  background: linear-gradient(90deg, var(--py-c) 0%, var(--py-a) 38%, var(--py-d) 70%, var(--py-b) 100%); }