/* ==========================================================================
   unORDINARY. The design breaks. The UX doesn't.
   ========================================================================== */
body.un-world { background: #131416; color: #E9EAEC; --ink-soft: #A9ADB3; }
body.un-world .rulegrid { display: none; }
body.un-world ::selection { background: var(--accent); color: var(--accent-ink); }
body.un-world :focus-visible { outline-color: #E9EAEC; }
.un > section { position: relative; z-index: 1; overflow-x: clip; }
.un .lede { font-weight: 500; }
.u-behave { font-family: var(--sc-font-mono); font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-hi); }
.spec--un, .un .spec { border-top-color: currentColor; }
.btn--un { color: #E9EAEC; border-color: #E9EAEC; }
.btn--un .un { font-weight: 300; text-transform: none; }
@media (hover: hover) and (pointer: fine) { .btn--un:hover { background: #E9EAEC; color: #131416; border-color: #E9EAEC; } }

.reg { position: absolute; width: 2.4rem; height: 2.4rem; border: 1.5px solid rgb(233 234 236 / 0.5); border-radius: 50%; }
.reg::before, .reg::after { content: ""; position: absolute; background: rgb(233 234 236 / 0.5); }
.reg::before { left: 50%; top: -0.6rem; bottom: -0.6rem; width: 1.5px; translate: -50% 0; }
.reg::after { top: 50%; left: -0.6rem; right: -0.6rem; height: 1.5px; translate: 0 -50%; }
.reg--bl { bottom: 1.5rem; left: 1.5rem; } .reg--br { bottom: 1.5rem; right: 1.5rem; }

/* ---------------------------------------------------------------- intro -- */
.u-intro { min-height: 100svh; padding: calc(var(--bar-h) + 3rem) 0 4rem; display: grid; grid-template-columns: minmax(0, 1fr); align-content: space-between; overflow: clip; }
.u-intro__rows { overflow: hidden; }
.u-intro__word {
  font-family: var(--sc-font-display); font-weight: 800; font-size: 19vw; line-height: 0.8; letter-spacing: -0.06em;
  white-space: nowrap; margin-left: -1.5vw; transform-origin: 0 50%;
  text-shadow: 0.035em 0 0 var(--accent-hi);
  transform: translateX(var(--ix, 0)) skewX(var(--skew, 0deg)) scaleX(var(--sqz, 1));
}
.u-intro__word .un { font-weight: 200; }
.u-intro__rows { display: grid; gap: 0.2rem; margin-block: 2rem; transform: skewX(var(--skew, 0deg)); }
.u-intro__rows p { font-family: var(--sc-font-display); font-weight: 800; font-size: clamp(2rem, 6vw, 6rem); line-height: 0.9; white-space: nowrap; color: #24262A; letter-spacing: -0.03em; }
.u-intro__rows p:nth-child(1) { transform: translateX(var(--r1, 0)); }
.u-intro__rows p:nth-child(2) { transform: translateX(var(--r2, 0)); color: transparent; -webkit-text-stroke: 1.5px #34373C; }
.u-intro__copy { padding-inline: var(--sc-gutter); display: grid; grid-template-columns: minmax(0, 36rem) 1fr; gap: 2rem; align-items: end; }
.u-index { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem; }
.u-index a {
  font-family: var(--sc-font-mono); font-size: 0.76rem; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none;
  padding: 0.7rem 0.9rem; border: 1.5px solid rgb(233 234 236 / 0.4); min-height: 2.75rem; display: inline-flex; align-items: center;
  transition: background-color 150ms var(--ease), color 150ms var(--ease), border-color 150ms;
}
@media (hover: hover) and (pointer: fine) { .u-index a:hover { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } }

/* -------------------------------------------------------- TRIPLE VISION -- */
.u-triple__stage { background: #0B0B0C; display: flex; align-items: center; }
.u-triple__rail { align-items: center; gap: clamp(2rem, 6vw, 7rem); padding-inline: var(--sc-gutter); padding-top: var(--bar-h); }
.tv-title { flex: 0 0 auto; }
.tv-word {
  font-family: var(--sc-font-display); font-weight: 800; font-size: clamp(4rem, 17vw, 20rem); line-height: 0.8; letter-spacing: -0.05em;
  color: #E9EAEC; position: relative; white-space: nowrap; margin-bottom: 1.5rem;
}
.tv-word::before, .tv-word::after {
  content: attr(data-text); position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; white-space: pre;
}
.tv-word::before { color: #FF2E2E; transform: translateX(var(--tvx, 0)); }
.tv-word::after { color: #19B7FF; transform: translateX(calc(var(--tvx, 0) * -1)); }
.tv-can { flex: 0 0 auto; position: relative; height: min(76svh, 44rem); aspect-ratio: 1120 / 2400; isolation: isolate; background: #0B0B0C; }
.tv-can .ch { position: absolute; inset: 0; width: 100%; height: 100%; mix-blend-mode: screen; will-change: transform; }
.ch--r { filter: url(#keep-r); transform: translateX(var(--cr, 0)); }
.ch--g { filter: url(#keep-g); transform: translateX(var(--cg, 0)); }
.ch--b { filter: url(#keep-b); transform: translateX(var(--cb, 0)); }
.tv-spec { flex: 0 0 auto; width: clamp(16rem, 26vw, 24rem); display: grid; gap: 1.5rem; }
.tv-dots { flex: 0 0 auto; position: relative; width: clamp(18rem, 30vw, 30rem); height: min(70svh, 40rem); margin-right: var(--sc-gutter); }
.tv-dots i {
  position: absolute; left: 50%; top: 50%; width: 62%; aspect-ratio: 1; border-radius: 50%;
  background: #E8452C; mix-blend-mode: screen; translate: -50% -50%;
}
.tv-dots i:nth-child(1) { transform: translateY(calc(var(--dot, 0) * -62%)); background: #E8452C; }
.tv-dots i:nth-child(2) { background: #2BA84A; mix-blend-mode: screen; }
.tv-dots i:nth-child(3) { transform: translateY(calc(var(--dot, 0) * 62%)); background: #2C5BE8; }

/* --------------------------------------------------------- CLOUD STATE -- */
.u-cloud { background: #E6E7E3; color: var(--ink); min-height: 170vh; overflow: clip; padding: calc(var(--bar-h) + 4rem) var(--sc-gutter) 6rem; }
.u-cloud__haze { position: absolute; inset: 0; display: grid; align-content: space-around; pointer-events: none; }
.u-cloud__haze p {
  font-family: var(--sc-font-display); font-weight: 800; font-size: 22vw; line-height: 0.8; white-space: nowrap; letter-spacing: -0.05em;
  color: #DADBD6; transform: translateX(var(--hx, 0)) scaleX(0.7); transform-origin: 0 50%;
}
.u-cloud__inner {
  position: relative; display: grid; grid-template-columns: 1fr minmax(14rem, 24rem) minmax(16rem, 26rem); gap: clamp(1.5rem, 4vw, 4rem); align-items: center;
  min-height: 140vh; filter: blur(var(--haze, 0px)); will-change: filter;
}
.cs-word { font-family: var(--sc-font-display); font-weight: 800; font-size: clamp(4rem, 13vw, 15rem); line-height: 0.8; letter-spacing: -0.05em; align-self: start; position: sticky; top: calc(var(--bar-h) + 3rem); }
.cs-can { width: 100%; height: auto; position: sticky; top: calc(var(--bar-h) + 2rem); filter: drop-shadow(0 30px 40px rgb(80 80 60 / 0.3)); }
.cs-spec { display: grid; gap: 1.5rem; align-self: end; }
.u-cloud .u-behave { color: #6B6A16; }
.u-cloud .spec dt { opacity: 1; color: #55534C; }

/* -------------------------------------------------------- SOUR PRESSURE -- */
.u-sour__stage { background: #1B0B14; color: #F3E7EE; display: grid; place-items: center; }
.sp-flash { position: absolute; inset: 0; background: #B0246A; opacity: var(--flash, 0); z-index: 0; }
.sp-plate {
  position: absolute; left: 0; right: 0; height: 50%; z-index: 3;
  background: repeating-linear-gradient(90deg, rgb(255 255 255 / 0.03) 0 1px, transparent 1px 4px), #2E3034;
  display: flex; align-items: flex-end; justify-content: center; padding: 1rem;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.06);
}
.sp-plate .mono { color: #8D9097; }
.sp-plate--top { top: 0; transform: translateY(calc(-100% + var(--plate, 0) * 100%)); }
.sp-plate--bot { bottom: 0; align-items: flex-start; transform: translateY(calc(100% - var(--plate, 0) * 100%)); }
.sp-squeeze { position: relative; z-index: 2; margin-right: 14vw; transform: scaleY(var(--sy, 1)) scaleX(var(--sx, 1)); }
.sp-word { font-family: var(--sc-font-display); font-weight: 800; font-size: clamp(3.4rem, 13vw, 15rem); line-height: 0.8; letter-spacing: -0.05em; text-align: center; color: #F3E7EE; }
.sp-can {
  position: absolute; z-index: 2; right: 3vw; top: 50%; height: min(54svh, 32rem); width: auto; max-width: none;
  translate: 0 -50%; transform: scaleY(var(--csy, 1)) scaleX(var(--csx, 1)); transform-origin: 50% 50%;
  filter: drop-shadow(0 30px 40px rgb(0 0 0 / 0.5));
}
.sp-spec {
  position: absolute; z-index: 4; left: var(--sc-gutter); bottom: clamp(2rem, 7vh, 4rem); width: min(28rem, calc(100% - 2 * var(--sc-gutter)));
  display: grid; gap: 1.2rem; opacity: var(--spec, 0); transform: translateY(calc((1 - var(--spec, 0)) * 14px));
}
.u-sour .u-behave { color: #FF8CC6; }

/* --------------------------------------------------------- BARREL AGED -- */
.u-barrel { background: #121315; padding: calc(var(--bar-h) + 2rem) var(--sc-gutter) 10rem; }
.ba-stripes { height: 2.4rem; margin: 0 calc(var(--sc-gutter) * -1) 4rem; background: repeating-linear-gradient(-45deg, #E9C22B 0 1.4rem, #121315 1.4rem 2.8rem); }
.ba-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 4rem; align-items: start; }
.ba-head { color: #A8683A; margin-bottom: 2.5rem; }
.ba-big { font-family: var(--sc-font-display); font-weight: 800; font-size: clamp(3.4rem, 9.6vw, 11rem); line-height: 0.82; letter-spacing: -0.02em; transform: scaleX(0.62); transform-origin: 0 50%; white-space: nowrap; width: 161%; }
.ba-big--2 { color: #A8683A; margin-bottom: 3rem; }
.ba-table { display: grid; border-top: 2px solid #E9EAEC; margin-bottom: 2.5rem; }
.ba-table > div { display: grid; grid-template-columns: 12rem 1fr; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid rgb(233 234 236 / 0.25); }
.ba-table dt { font-family: var(--sc-font-mono); font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: #A9ADB3; }
.ba-table dd { font-weight: 700; font-size: 1.2rem; }
.u-barrel .u-behave { color: #D58A55; margin-bottom: 2rem; }
.ba-code { display: flex; align-items: center; gap: 1rem; }
.ba-code i { width: 12rem; height: 4rem; background: repeating-linear-gradient(90deg, #E9EAEC 0 2px, transparent 2px 5px, #E9EAEC 5px 9px, transparent 9px 11px, #E9EAEC 11px 12px, transparent 12px 16px); }
.ba-canwrap { position: sticky; top: calc(var(--bar-h) + 3rem); }
.ba-can { width: min(100%, 22rem); height: auto; margin-inline: auto; filter: drop-shadow(0 30px 40px rgb(0 0 0 / 0.6)); }
/* printing: rows exist in the DOM from the start; the scan line reveals them */
@media (prefers-reduced-motion: no-preference) {
  html:not(.no-js) [data-print] { clip-path: inset(0 0 100% 0); transition: clip-path 380ms var(--ease); }
  html:not(.no-js) [data-print].is-printed { clip-path: inset(0 0 -20% 0); }
  .ba-big[data-print] { clip-path: inset(0 0 100% 0); }
}
.ba-scan { position: fixed; left: 0; right: 0; top: 50%; z-index: 30; pointer-events: none; opacity: 0; transition: opacity 200ms; }
.ba-scan.is-on { opacity: 1; }
.ba-scan i { display: block; height: 2px; background: var(--accent-hi); box-shadow: 0 0 0 1px rgb(0 0 0 / 0.4), 0 -30px 40px -20px color-mix(in oklab, var(--accent) 35%, transparent); }
.ba-scan .mono { position: absolute; right: var(--sc-gutter); top: 0.4rem; font-size: 0.66rem; color: var(--accent-hi); }

/* ------------------------------------------------------------- COLLABS -- */
.u-collab { padding: clamp(5rem, 14vh, 10rem) 0; overflow: clip; background: #131416; }
.u-collab__wipe { background: var(--accent); color: var(--accent-ink); padding: 2rem var(--sc-gutter); margin-bottom: 3rem; }
.co-word { font-family: var(--sc-font-display); font-weight: 800; font-size: clamp(4rem, 20vw, 24rem); line-height: 0.8; letter-spacing: -0.06em; white-space: nowrap; }
.u-collab__body { display: grid; gap: 1.2rem; justify-items: start; }

/* --------------------------------------------------------------- mobile -- */
@media (max-width: 860px) {
  .u-intro__copy { grid-template-columns: 1fr; }
  .u-index { justify-content: flex-start; }
  .tv-word { font-size: 24vw; }
  .tv-can { height: 64svh; }
  .tv-spec { width: 78vw; }
  .tv-dots { width: 70vw; height: 60svh; }
  .u-cloud__inner { grid-template-columns: 1fr; min-height: 0; }
  .cs-word, .cs-can { position: relative; top: 0; }
  .cs-can { width: 62%; margin-inline: auto; }
  .sp-squeeze { margin-right: 0; }
  .sp-can { right: 50%; translate: 50% -50%; height: 46svh; opacity: 0.9; }
  .ba-grid { grid-template-columns: 1fr; }
  .ba-canwrap { position: relative; top: 0; order: -1; }
  .ba-can { width: 60%; }
  .ba-table > div { grid-template-columns: 8rem 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .u-cloud__inner { filter: none; }
  .ba-scan { display: none; }
}