/* VERSION 9 ART-DIRECTION STUDY — one interaction, five visual treatments. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  color-scheme: light;
  font-family: Arial, Helvetica, sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

html,
body {
  min-width: 320px;
  min-height: 100%;
  margin: 0;
  overflow-x: hidden;
  background: #e8e1d2;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  color: inherit;
  font: inherit;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 3px solid #f2b544;
  outline-offset: -5px;
}

.v9-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.v9-skip {
  position: fixed;
  z-index: 100;
  top: 10px;
  left: 50%;
  padding: 10px 16px;
  color: #fff;
  background: #111;
  border-radius: 999px;
  transform: translate(-50%, -180%);
}

.v9-skip:focus { transform: translate(-50%, 0); }

#v9-canvas {
  min-height: 100svh;
  outline: none;
}

.v9 {
  --header-height: 88px;
  --paper: #e8e1d2;
  --ink: #102632;
  --muted: #cfcac0;
  --history: #d65a3b;
  --atlas: #347f75;
  --vinyl: #343e7b;
  --names: #8a532f;
  --active-ink: #f7edd8;
  --hairline: rgb(16 38 50 / 72%);
  position: relative;
  isolation: isolate;
  height: 100svh;
  min-height: 680px;
  overflow: hidden;
  color: var(--ink);
  background: var(--paper);
}

.v9-header {
  position: relative;
  z-index: 30;
  display: grid;
  grid-template-columns: minmax(190px, .8fr) minmax(230px, .8fr) minmax(420px, 1.25fr);
  gap: clamp(18px, 3vw, 52px);
  align-items: center;
  height: var(--header-height);
  padding: 0 clamp(18px, 2.5vw, 42px);
  color: var(--ink);
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  border-bottom: 1px solid var(--hairline);
  backdrop-filter: blur(18px);
}

.v9-wordmark {
  font-size: clamp(34px, 3.8vw, 62px);
  font-weight: 950;
  letter-spacing: -.075em;
  line-height: .8;
}

.v9-heading {
  display: grid;
  gap: 5px;
  text-align: center;
}

.v9-heading span {
  font: 800 7px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.v9-heading h1 {
  margin: 0;
  font: 500 clamp(17px, 1.7vw, 27px)/1 Georgia, serif;
  letter-spacing: -.02em;
}

.v9-switcher {
  display: grid;
  grid-template-columns: 34px minmax(270px, 1fr) 34px;
  gap: 4px;
  align-items: center;
  justify-self: end;
  width: min(100%, 470px);
  min-height: 60px;
  padding: 4px;
  color: #f7edd8;
  background: rgb(12 21 27 / 94%);
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgb(7 12 15 / 18%);
}

.v9-switcher > button {
  display: grid;
  width: 34px;
  height: 48px;
  padding: 0;
  cursor: pointer;
  background: rgb(255 255 255 / 8%);
  border: 0;
  border-radius: 8px;
  place-items: center;
}

.v9-switcher > button:hover { color: #102632; background: #f3e9d4; }
.v9-switcher-state { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; align-items: center; min-width: 0; padding: 2px 8px; }
.v9-switcher-state > span { color: #e8a483; font: 800 7px/1 ui-monospace, monospace; letter-spacing: .13em; text-transform: uppercase; }
.v9-switcher-state > strong { overflow: hidden; font-size: 10px; text-align: right; text-overflow: ellipsis; white-space: nowrap; }

.v9-dots {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
}

.v9-dots button {
  min-width: 0;
  height: 20px;
  padding: 0;
  color: rgb(247 237 216 / 58%);
  cursor: pointer;
  background: transparent;
  border: 0;
  border-radius: 3px;
  font: 700 7px/1 ui-monospace, monospace;
}

.v9-dots button:hover { color: #fff; background: rgb(255 255 255 / 10%); }
.v9-dots button[aria-pressed="true"] { color: #112630; background: #f0b06f; }

.v9-panels {
  display: flex;
  height: calc(100svh - var(--header-height));
  min-height: calc(680px - var(--header-height));
}

.v9-panel {
  --accent: var(--history);
  position: relative;
  z-index: 1;
  display: block;
  flex: 1 1 0;
  min-width: 0;
  padding: clamp(20px, 2.5vw, 42px);
  overflow: hidden;
  color: var(--ink);
  background: var(--muted);
  border-right: 1px solid var(--hairline);
  text-decoration: none;
  transition:
    flex 540ms cubic-bezier(.18, .8, .18, 1),
    color 280ms ease,
    background 280ms ease,
    box-shadow 280ms ease;
}

.v9-panel.v9-atlas { --accent: var(--atlas); }
.v9-panel.v9-vinyl { --accent: var(--vinyl); }
.v9-panel.v9-names { --accent: var(--names); border-right: 0; }

.v9-panel:hover,
.v9-panel:focus-visible {
  z-index: 3;
  flex: 1.85 1 0;
  color: var(--active-ink);
  background: var(--accent);
}

.v9-number {
  position: relative;
  z-index: 4;
  display: block;
  font-size: clamp(58px, 8.5vw, 142px);
  font-weight: 950;
  letter-spacing: -.13em;
  line-height: .75;
}

.v9-art {
  position: absolute;
  z-index: 1;
  top: 17%;
  right: -8%;
  width: min(27vw, 430px);
  height: 42%;
  color: currentColor;
  opacity: .17;
  transform: rotate(-7deg) scale(1.12);
  transform-origin: 50% 50%;
  transition: opacity 280ms ease, transform 480ms cubic-bezier(.18, .8, .18, 1), filter 280ms ease;
}

.v9-art > div,
.v9-art > img {
  width: 100%;
  height: 100%;
}

.v9-art svg {
  display: block;
  width: 100%;
  height: 100%;
}

.v9-line-art svg {
  fill: none;
  stroke: currentColor;
  stroke-linecap: square;
  stroke-linejoin: miter;
  stroke-width: 4;
}

.v9-solid-art svg {
  fill: currentColor;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 5;
}

.v9-image-art {
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 24px 24px rgb(8 13 15 / 28%));
}

.v9[data-art="line"] .v9-solid-art,
.v9[data-art="line"] .v9-image-art,
.v9[data-art="solid"] .v9-line-art,
.v9[data-art="solid"] .v9-image-art,
.v9[data-art="image"] .v9-line-art,
.v9[data-art="image"] .v9-solid-art {
  display: none;
}

.v9-panel:hover .v9-art,
.v9-panel:focus-visible .v9-art {
  opacity: .86;
  transform: rotate(0) scale(1);
}

.v9-title {
  position: absolute;
  z-index: 5;
  right: clamp(20px, 2.5vw, 42px);
  bottom: 8%;
  left: clamp(20px, 2.5vw, 42px);
  transition: right 480ms cubic-bezier(.18, .8, .18, 1);
}

.v9-title small {
  font: 800 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.v9-title h2 {
  max-width: 580px;
  margin: 10px 0 0;
  font-size: clamp(35px, 4.8vw, 79px);
  font-weight: 850;
  letter-spacing: -.075em;
  line-height: .82;
  text-transform: uppercase;
}

.v9-panel:hover .v9-title,
.v9-panel:focus-visible .v9-title {
  right: 39%;
}

.v9-reveal {
  position: absolute;
  z-index: 6;
  right: 5%;
  bottom: 9%;
  width: min(270px, 31%);
  padding-left: 20px;
  border-left: 1px solid;
  opacity: 0;
  transform: translateX(16px);
  transition: opacity 220ms ease 130ms, transform 220ms ease 130ms;
}

.v9-reveal p {
  margin: 0 0 18px;
  font-size: 12px;
  line-height: 1.45;
}

.v9-reveal b {
  font: 800 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.v9-reveal span {
  display: grid;
  float: right;
  width: 42px;
  height: 42px;
  margin-top: -10px;
  border: 1px solid;
  border-radius: 50%;
  place-items: center;
}

.v9-panel:hover .v9-reveal,
.v9-panel:focus-visible .v9-reveal {
  opacity: 1;
  transform: translateX(0);
}

.v9-future {
  position: absolute;
  z-index: 15;
  top: calc(var(--header-height) + 16px);
  right: 18px;
  display: grid;
  grid-template-columns: auto auto;
  gap: 2px 10px;
  min-width: 245px;
  padding: 10px 13px;
  color: #f5ecd8;
  background: rgb(13 29 35 / 92%);
  border-radius: 3px;
  box-shadow: 0 8px 24px rgb(7 13 16 / 18%);
  backdrop-filter: blur(12px);
}

.v9-future b { grid-row: 1 / 3; align-self: center; font-size: 20px; letter-spacing: -.08em; }
.v9-future strong { font-size: 10px; text-transform: uppercase; }
.v9-future span { font: 700 6px/1 ui-monospace, monospace; opacity: .68; text-transform: uppercase; }

.v9-vignette,
.v9-texture {
  position: absolute;
  z-index: 10;
  inset: var(--header-height) 0 0;
  pointer-events: none;
}

.v9-vignette { opacity: 0; }
.v9-texture { opacity: 0; mix-blend-mode: multiply; }

/* 03 — Museum objects ----------------------------------------------------- */

.v9-style-03 {
  --paper: #d8c9ad;
  --ink: #3a291f;
  --muted: #caba9c;
  --history: #8b3d2c;
  --atlas: #4f6c62;
  --vinyl: #313b55;
  --active-ink: #f6ead0;
  --hairline: rgb(58 41 31 / 42%);
  font-family: Optima, Candara, "Segoe UI", sans-serif;
}

.v9-style-03 .v9-header { background: rgb(226 214 189 / 92%); }
.v9-style-03 .v9-panel { background: linear-gradient(145deg, #d7c6a5, #bdad90); box-shadow: inset -18px 0 35px rgb(61 40 24 / 10%); }
.v9-style-03 .v9-atlas { background: linear-gradient(145deg, #c8c2aa, #aaa991); }
.v9-style-03 .v9-vinyl { background: linear-gradient(145deg, #c4b8a4, #a89f91); }
.v9-style-03 .v9-names { background: linear-gradient(145deg, #c8b098, #a38f7d); }
.v9-style-03 .v9-art { top: 12%; right: -3%; width: min(28vw, 470px); height: 53%; opacity: .66; transform: rotate(-4deg) scale(1.03); }
.v9-style-03 .v9-image-art { filter: drop-shadow(15px 27px 20px rgb(44 27 16 / 34%)); }
.v9-style-03 .v9-panel:hover .v9-art,
.v9-style-03 .v9-panel:focus-visible .v9-art { opacity: 1; transform: rotate(1deg) translateY(-8px) scale(1.04); }
.v9-style-03 .v9-title h2 { font-family: "Iowan Old Style", Baskerville, Georgia, serif; font-weight: 500; text-transform: none; }
.v9-style-03 .v9-texture { opacity: .18; background-image: radial-gradient(rgb(75 52 31 / 35%) .6px, transparent .8px); background-size: 7px 7px; }

/* 04 — Carpet vignette ---------------------------------------------------- */

.v9-style-04 {
  --paper: #28130f;
  --ink: #ead4a7;
  --muted: rgb(45 18 15 / 84%);
  --history: rgb(129 39 30 / 93%);
  --atlas: rgb(32 83 72 / 94%);
  --vinyl: rgb(33 38 72 / 95%);
  --active-ink: #f6dfae;
  --hairline: rgb(232 197 128 / 35%);
  font-family: "Iowan Old Style", Baskerville, Georgia, serif;
  background: #35130f url("./assets/still-life-carpet.webp") center / cover;
}

.v9-style-04 .v9-header { color: #ead4a7; background: rgb(31 12 10 / 91%); }
.v9-style-04 .v9-heading h1 { font-family: inherit; }
.v9-style-04 .v9-panel { background: rgb(39 15 13 / 82%); backdrop-filter: blur(1px); }
.v9-style-04 .v9-atlas { background: rgb(30 24 20 / 82%); }
.v9-style-04 .v9-vinyl { background: rgb(24 18 22 / 84%); }
.v9-style-04 .v9-names { background: rgb(34 20 16 / 84%); }
.v9-style-04 .v9-art { top: 12%; right: -3%; height: 54%; opacity: .52; }
.v9-style-04 .v9-image-art { filter: sepia(.12) saturate(.88) drop-shadow(0 28px 24px rgb(0 0 0 / 55%)); }
.v9-style-04 .v9-panel:hover .v9-art,
.v9-style-04 .v9-panel:focus-visible .v9-art { opacity: .96; }
.v9-style-04 .v9-title h2 { font-weight: 500; text-transform: none; text-shadow: 0 5px 18px rgb(0 0 0 / 55%); }
.v9-style-04 .v9-vignette { opacity: 1; background: radial-gradient(ellipse at 50% 46%, transparent 20%, rgb(10 3 2 / 78%) 115%), linear-gradient(180deg, rgb(10 3 2 / 35%), transparent 18% 75%, rgb(10 3 2 / 48%)); }

/* 06 — Sepia register ----------------------------------------------------- */

.v9-style-06 {
  --paper: #bcae92;
  --ink: #352b20;
  --muted: #b8aa8d;
  --history: #6f4935;
  --atlas: #536155;
  --vinyl: #4d4a49;
  --active-ink: #f2e5c7;
  --hairline: rgb(53 43 32 / 55%);
  font-family: Georgia, "Times New Roman", serif;
}

.v9-style-06 .v9-header { background: rgb(202 188 158 / 92%); }
.v9-style-06 .v9-heading span,
.v9-style-06 .v9-title small,
.v9-style-06 .v9-reveal b { font-family: "Courier New", monospace; }
.v9-style-06 .v9-panel { background: #b8aa8d; }
.v9-style-06 .v9-atlas { background: #b0a68e; }
.v9-style-06 .v9-vinyl { background: #aaa18c; }
.v9-style-06 .v9-names { background: #a89b83; }
.v9-style-06 .v9-number { font-family: "Times New Roman", serif; font-weight: 700; }
.v9-style-06 .v9-title h2 { font-weight: 500; text-transform: none; }
.v9-style-06 .v9-art { top: 13%; right: -2%; height: 52%; opacity: .48; filter: grayscale(1) sepia(.45) contrast(.92); }
.v9-style-06 .v9-image-art { filter: drop-shadow(12px 22px 14px rgb(47 34 20 / 28%)); }
.v9-style-06 .v9-panel:hover .v9-art,
.v9-style-06 .v9-panel:focus-visible .v9-art { opacity: .88; }
.v9-style-06 .v9-vignette { opacity: 1; box-shadow: inset 0 0 140px rgb(55 36 20 / 42%); }
.v9-style-06 .v9-texture { opacity: .26; background: repeating-linear-gradient(0deg, transparent 0 3px, rgb(73 52 29 / 12%) 4px); }

/* 07 — Primary signal ----------------------------------------------------- */

.v9-style-07 {
  --paper: #efe2bd;
  --ink: #071b39;
  --muted: #e7d8ae;
  --history: #f04a2b;
  --atlas: #efbe28;
  --vinyl: #155aa7;
  --active-ink: #071b39;
  --hairline: #071b39;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", Arial, sans-serif;
}

.v9-style-07 .v9-header { background: #efe2bd; }
.v9-style-07 .v9-heading span,
.v9-style-07 .v9-title small,
.v9-style-07 .v9-reveal b { font-family: ui-monospace, monospace; }
.v9-style-07 .v9-panel { background: #e8d9b2; }
.v9-style-07 .v9-atlas { background: #e2d5b1; }
.v9-style-07 .v9-vinyl { background: #ddd2b2; }
.v9-style-07 .v9-names { background: #d8c9a7; }
.v9-style-07 .v9-panel:hover,
.v9-style-07 .v9-panel:focus-visible { box-shadow: inset 14px 0 0 #071b39, 18px 0 0 #071b39; }
.v9-style-07 .v9-number { font-size: clamp(72px, 10vw, 164px); }
.v9-style-07 .v9-art { top: 20%; right: 0; width: 100%; height: 36%; opacity: .14; transform: none; }
.v9-style-07 .v9-solid-art { width: 68%; margin: auto; }
.v9-style-07 .v9-panel:hover .v9-art,
.v9-style-07 .v9-panel:focus-visible .v9-art { opacity: .75; transform: scale(1.08); }
.v9-style-07 .v9-title h2 { font-size: clamp(41px, 5.6vw, 92px); font-weight: 900; letter-spacing: -.045em; }
.v9-style-07 .v9-future { color: #efe2bd; background: #071b39; border-radius: 0; box-shadow: 8px 8px 0 #f04a2b; }

/* 09 — Nocturne neon ------------------------------------------------------ */

.v9-style-09 {
  --paper: #070a12;
  --ink: #dce8e4;
  --muted: #0c1019;
  --history: #561d4c;
  --atlas: #083e47;
  --vinyl: #242053;
  --active-ink: #f4fff7;
  --hairline: rgb(96 239 222 / 25%);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.v9-style-09 .v9-header { color: #eefaf5; background: rgb(5 7 13 / 93%); box-shadow: 0 0 30px rgb(40 234 218 / 8%); }
.v9-style-09 .v9-heading h1 { font-family: inherit; text-transform: uppercase; }
.v9-style-09 .v9-panel { background: #0b0e16; }
.v9-style-09 .v9-atlas { background: #081317; }
.v9-style-09 .v9-vinyl { background: #0d0c18; }
.v9-style-09 .v9-names { color: #ffb071; background: #15100c; }
.v9-style-09 .v9-history { color: #f06abf; }
.v9-style-09 .v9-atlas { color: #55e7d3; }
.v9-style-09 .v9-vinyl { color: #9d8dff; }
.v9-style-09 .v9-panel:hover,
.v9-style-09 .v9-panel:focus-visible { color: #f5fff8; box-shadow: inset 0 0 90px rgb(0 0 0 / 45%); }
.v9-style-09 .v9-art { top: 19%; right: 2%; width: 96%; height: 38%; opacity: .38; filter: drop-shadow(0 0 18px currentColor); transform: none; }
.v9-style-09 .v9-solid-art { width: 68%; margin: auto; }
.v9-style-09 .v9-panel:hover .v9-art,
.v9-style-09 .v9-panel:focus-visible .v9-art { opacity: .94; filter: drop-shadow(0 0 34px currentColor); transform: scale(1.06); }
.v9-style-09 .v9-title h2 { font-family: Arial, Helvetica, sans-serif; font-weight: 900; }
.v9-style-09 .v9-number { text-shadow: 0 0 20px currentColor; }
.v9-style-09 .v9-future { color: #07100f; background: #55e7d3; box-shadow: 0 0 24px rgb(85 231 211 / 42%); }
.v9-style-09 .v9-vignette { opacity: 1; background: radial-gradient(ellipse at 50% 42%, transparent 30%, rgb(0 0 0 / 78%) 125%); }
.v9-style-09 .v9-texture { opacity: .22; background: repeating-linear-gradient(0deg, transparent 0 4px, rgb(91 255 229 / 12%) 5px); mix-blend-mode: screen; }

@media (max-width: 1060px) {
  .v9-header { grid-template-columns: minmax(150px, .55fr) minmax(190px, .65fr) minmax(390px, 1.2fr); gap: 15px; }
  .v9-switcher { grid-template-columns: 32px minmax(250px, 1fr) 32px; }
  .v9-title h2 { font-size: clamp(31px, 5vw, 55px); }
  .v9-panel:hover .v9-title,
  .v9-panel:focus-visible .v9-title { right: 42%; }
  .v9-reveal { width: 35%; }
}

@media (max-width: 780px) {
  .v9 {
    --header-height: 134px;
    height: auto;
    min-height: 100svh;
    overflow: visible;
  }

  .v9-header {
    position: relative;
    grid-template-columns: 1fr auto;
    grid-template-rows: 52px 72px;
    gap: 0 12px;
    height: var(--header-height);
    padding: 5px 12px;
  }

  .v9-wordmark { font-size: 32px; }
  .v9-heading { text-align: right; }
  .v9-heading span { display: none; }
  .v9-heading h1 { font-size: 15px; }
  .v9-switcher { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; width: 100%; min-height: 64px; }

  .v9-panels {
    display: grid;
    height: auto;
    min-height: 0;
  }

  .v9-panel {
    display: grid;
    grid-template-columns: 48px 82px minmax(0, 1fr) 34px;
    gap: 12px;
    align-items: center;
    min-height: 166px;
    padding: 18px;
    color: var(--active-ink);
    background: var(--accent) !important;
    border-right: 0;
    border-bottom: 1px solid var(--hairline);
    box-shadow: none !important;
  }

  .v9-number { font-size: 34px; }
  .v9-art,
  .v9-panel:hover .v9-art,
  .v9-panel:focus-visible .v9-art {
    position: static;
    width: 80px;
    height: 82px;
    opacity: .82;
    filter: none;
    transform: none;
  }

  .v9-image-art { filter: drop-shadow(0 10px 8px rgb(0 0 0 / 23%)) !important; }
  .v9-title,
  .v9-panel:hover .v9-title,
  .v9-panel:focus-visible .v9-title { position: static; }
  .v9-title small { font-size: 6px; }
  .v9-title h2 { margin-top: 6px; font-size: clamp(25px, 7.7vw, 36px); }
  .v9-reveal,
  .v9-panel:hover .v9-reveal,
  .v9-panel:focus-visible .v9-reveal { position: static; width: auto; padding: 0; border: 0; opacity: 1; transform: none; }
  .v9-reveal p,
  .v9-reveal b { display: none; }
  .v9-reveal span { width: 30px; height: 30px; margin: 0; }
  .v9-future { position: relative; inset: auto; margin: 14px 12px 20px; }
  .v9-vignette,
  .v9-texture { position: fixed; inset: var(--header-height) 0 0; }
}

@media (max-width: 440px) {
  .v9-switcher-state { grid-template-columns: 1fr; gap: 4px; }
  .v9-switcher-state > span { display: none; }
  .v9-switcher-state > strong { text-align: center; }
  .v9-dots button { font-size: 6px; }
  .v9-panel { grid-template-columns: 40px 66px minmax(0, 1fr) 30px; gap: 9px; padding: 15px 12px; }
  .v9-art,
  .v9-panel:hover .v9-art,
  .v9-panel:focus-visible .v9-art { width: 64px; height: 68px; }
  .v9-title h2 { font-size: clamp(23px, 7.2vw, 31px); }
}

@media (prefers-reduced-motion: reduce) {
  .v9-panel,
  .v9-art,
  .v9-title,
  .v9-reveal {
    transition: none;
  }
}