/* Data Portrait, next: the Read Me styles scoped under .dpn for the local
   site preview. Generated from shared/mock.css and the read-me page styles;
   site-specific rules at the end. */
.dpn {
  color-scheme: dark;
  --bg: var(--data-portrait-bg);
  --ink: #ecebe6;
  --muted: #9b9a94;
  --line: rgba(255, 255, 255, 0.14);
  --line-strong: rgba(255, 255, 255, 0.42);
  --accent: #d64553;
  --font-display: "STIX Two Text", Georgia, serif;
  --font-sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.dpn, .dpn * {
  box-sizing: border-box;
}
.dpn {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.5 var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
.dpn a {
  color: inherit;
}
.dpn .mockbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.02em;
}
.dpn .mockbar strong {
  color: var(--ink);
  font-weight: 500;
}
.dpn .mockbar .tag {
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 11px;
}
.dpn .mockbar nav {
  display: flex;
  gap: 14px;
  margin-left: auto;
}
.dpn .mockbar nav a {
  text-decoration: none;
}
.dpn .mockbar nav a[aria-current="page"] {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.dpn .app {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
  gap: 40px;
  align-items: start;
  max-width: 1120px;
  margin: 0 auto;
  padding: 28px 24px 80px;
}
.dpn .stage-wrap {
  position: sticky;
  top: 20px;
  margin: 0;
}
.dpn .stage {
  display: block;
  width: 100%;
  max-width: min(560px, calc((100vh - 120px) * 0.8));
  aspect-ratio: 4 / 5;
  margin: 0 auto;
  background: #000;
}
.dpn .stage-note {
  margin: 10px auto 0;
  max-width: 600px;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}
.dpn .panel {
  min-width: 0;
}
.dpn .eyebrow {
  margin: 0 0 10px;
  color: var(--accent);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.dpn h1, .dpn .q-title, .dpn .result-title {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.01em;
}
.dpn h1 {
  margin: 0 0 14px;
  font-size: clamp(34px, 6vw, 52px);
  line-height: 1.04;
}
.dpn .lede {
  margin: 0 0 22px;
  color: #cfcec8;
  font-size: 17px;
}
.dpn .q-title {
  margin: 18px 0 18px;
  font-size: clamp(26px, 4.6vw, 34px);
  line-height: 1.12;
}
.dpn .quiz-intro {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 14px;
}
.dpn .progress {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.dpn .progress-bar {
  position: relative;
  flex: 1;
  height: 2px;
  background: var(--line);
}
.dpn .progress-bar::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--progress, 0%);
  background: var(--accent);
}
.dpn .options {
  display: grid;
  gap: 8px;
}
.dpn .opt {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}
.dpn .opt:hover, .dpn .opt:focus-visible {
  border-color: var(--line-strong);
  outline: none;
}
.dpn .opt.is-selected {
  border-color: var(--ink);
  background: rgba(255, 255, 255, 0.06);
}
.dpn .knob {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 13px;
}
.dpn .knob-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.dpn .back {
  margin-top: 18px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.dpn .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 10px 20px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: #050505;
  font: inherit;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}
.dpn .btn-ghost {
  border-color: var(--line-strong);
  background: transparent;
  color: var(--ink);
  font-weight: 400;
}
.dpn .row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0 0;
}
.dpn .result-title {
  margin: 4px 0 10px;
  font-size: clamp(34px, 6vw, 48px);
  line-height: 1.04;
}
.dpn .reading {
  margin: 0 0 20px;
  color: #d8d7d1;
  font-size: 17px;
}
.dpn .legend {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 14px;
  margin: 0 0 22px;
  padding: 14px 0 0;
  border-top: 1px solid var(--line);
  font-size: 14px;
}
.dpn .legend dt {
  color: var(--muted);
}
.dpn .legend dd {
  margin: 0;
}
.dpn .section-label {
  margin: 32px 0 12px;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.dpn .fine {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 13px;
}
.dpn .share {
  margin-top: 18px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
}
.dpn .share-label {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.dpn .share-caption {
  margin: 0 0 14px;
}
.dpn .share-link {
  display: block;
  overflow-wrap: anywhere;
  color: #bcd8ff;
  font-size: 14px;
}
.dpn .cards {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.dpn .card {
  container-type: inline-size;
  position: relative;
  width: min(100%, 400px);
  aspect-ratio: 4 / 5;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #000;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}
.dpn .cards .card {
  width: min(100%, 320px);
}
.dpn .card-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.dpn .card-top, .dpn .card-bottom {
  position: absolute;
  left: 0;
  right: 0;
  padding: 5cqw 6cqw;
}
.dpn .card-top {
  top: 0;
  display: flex;
  justify-content: space-between;
  gap: 4cqw;
  padding-bottom: 10cqw;
  background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
  color: rgba(255, 255, 255, 0.82);
  font-size: 3cqw;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.dpn .card-bottom {
  bottom: 0;
  padding-top: 16cqw;
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.72) 38%, rgba(0, 0, 0, 0.86));
}
.dpn .card-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 8.4cqw;
  line-height: 1;
}
.dpn .card-sub {
  margin: 1.4cqw 0 0;
  color: rgba(255, 255, 255, 0.86);
  font-size: 3.3cqw;
  line-height: 1.3;
}
.dpn .card-legend {
  display: grid;
  grid-template-columns: max-content 1fr max-content 1fr;
  gap: 0.5cqw 2.2cqw;
  margin: 2cqw 0 0;
  color: rgba(255, 255, 255, 0.86);
  font-size: 2.55cqw;
  line-height: 1.25;
}
.dpn .card-legend dt {
  color: rgba(255, 255, 255, 0.55);
}
.dpn .card-legend dd {
  margin: 0;
}
.dpn .card-foot {
  margin: 2.4cqw 0 0;
  color: rgba(255, 255, 255, 0.55);
  font-size: 2.6cqw;
  letter-spacing: 0.04em;
}
.dpn .keys {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.dpn .key {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 10px;
  align-items: center;
  min-height: 70px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
}
.dpn .key:hover, .dpn .key:focus-visible {
  border-color: var(--line-strong);
  outline: none;
}
.dpn .key canvas, .dpn .key .swatch {
  display: block;
  width: 64px;
  height: 80px;
  border-radius: 6px;
  background: #000;
}
.dpn .key small {
  display: block;
  color: var(--muted);
  font-size: 12px;
}
.dpn .score {
  font-family: var(--font-display);
  font-size: clamp(56px, 12vw, 88px);
  line-height: 1;
  margin: 6px 0 4px;
}
.dpn .checks {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.dpn .checks li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 8px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.dpn .checks .hit {
  color: #7dffc8;
}
.dpn .checks .miss {
  color: var(--accent);
}
.dpn .checks small {
  display: block;
  color: var(--muted);
}
.dpn .pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.dpn .pair figure {
  margin: 0;
}
.dpn .pair canvas {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  background: #000;
}
.dpn .pair figcaption {
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}
.dpn .diff {
  margin: 14px 0 0;
  padding-left: 18px;
}
.dpn .diff li {
  margin: 4px 0;
}
@media (max-width: 820px) {
.dpn .app {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 14px 16px 64px;
}
.dpn .stage-wrap {
    position: relative;
    top: 0;
}
.dpn .stage {
    width: min(100%, 58vw);
}
.dpn .is-result .stage {
    width: min(100%, 80vw);
}
.dpn .mockbar nav {
    margin-left: 0;
}
.dpn .is-guess .stage {
    width: min(100%, 56vw);
}
.dpn .key {
    grid-template-columns: 1fr;
    gap: 6px;
    min-height: 0;
}
.dpn .key canvas, .dpn .key .swatch {
    width: 48px;
    height: 60px;
}
}
@media (max-width: 520px) {
.dpn .mockbar > span:not(.tag) {
    display: none;
}
}
.dpn .buildlog {
  max-width: 600px;
  margin: 12px auto 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  line-height: 1.35;
}
.dpn .buildlog li {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 2px 10px;
  padding: 7px 0;
  border-top: 1px solid var(--line);
}
.dpn .buildlog-phase {
  grid-row: span 2;
  color: var(--accent);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.dpn .buildlog b {
  font-weight: 500;
}
.dpn .buildlog li > span:last-child {
  color: var(--muted);
}
.dpn .buildlog:empty {
  display: none;
}
@media (max-width: 820px) {
.dpn .app:not(.is-result) .buildlog li:not(:last-child) {
    display: none;
}
}
.dpn .rm-top { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; padding: 12px 20px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--muted);
}
.dpn .rm-top strong { color: var(--ink); font-weight: 500; letter-spacing: 0.02em;
}
.dpn .rm-top .tag { color: var(--accent); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
}
.dpn .rm-top nav { display: flex; gap: 16px; margin-left: auto;
}
.dpn .rm-top nav a { text-decoration: none;
}
.dpn .rm { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 40px; max-width: 1180px; margin: 0 auto; padding: 24px 24px 80px; align-items: start;
}
.dpn .rm-stage-col { position: sticky; top: 16px; margin: 0;
}
.dpn .rm-stage { position: relative; width: 100%; max-width: min(600px, calc((100vh - 110px) * 0.8)); aspect-ratio: 4 / 5; margin: 0 auto; background: #000; overflow: hidden;
}
.dpn .stage-layer { position: absolute; inset: 0; width: 100%; height: 100%; display: block; transform-origin: 50% 50%; will-change: opacity, transform;
}
.dpn .rm-stage-note { max-width: 600px; margin: 10px auto 0; color: var(--muted); font-size: 12px; text-align: center;
}
.dpn .steps { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin: 0 0 18px;
}
.dpn .steps button { display: grid; gap: 6px; min-height: 34px; padding: 6px 0 4px; border: 0; background: none; color: var(--muted); font: inherit; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; text-align: left; cursor: pointer;
}
.dpn .steps button:hover:not(:disabled) { color: var(--ink);
}
.dpn .steps button::before { content: ""; display: block; height: 3px; border-radius: 2px; background: var(--line);
}
.dpn .steps button.done::before { background: rgba(255, 255, 255, 0.55);
}
.dpn .steps button.current { color: var(--ink);
}
.dpn .steps button.current::before { background: var(--accent);
}
.dpn .steps button:disabled { cursor: default; opacity: 0.45;
}
.dpn .q-num { margin: 0; color: var(--muted); font-size: 13px;
}
.dpn .opts { display: grid; gap: 8px; margin-top: 16px;
}
.dpn .opts .opt.is-selected { border-color: var(--ink); background: rgba(255, 255, 255, 0.07);
}
.dpn .opts .opt.is-selected::after { content: "Your answer"; float: right; color: var(--muted); font-size: 12px;
}
.dpn .nav-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px;
}
.dpn .nav-row .btn { min-height: 40px; padding: 8px 16px; font-size: 14px;
}
.dpn .mine { margin: 26px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line);
}
.dpn .mine h3, .dpn .result-h3 { margin: 0 0 8px; color: var(--muted); font-size: 12px; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase;
}
.dpn .mine ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px;
}
.dpn .mine li button { width: 100%; display: grid; grid-template-columns: 22px 1fr; gap: 8px; padding: 6px 8px; border: 1px solid transparent; border-radius: 8px; background: none; color: var(--ink); font: inherit; font-size: 13px; text-align: left; cursor: pointer;
}
.dpn .mine li button:hover { border-color: var(--line);
}
.dpn .mine li button span:first-child { color: var(--muted);
}
.dpn .mine li button small { display: block; color: var(--muted); font-size: 12px;
}
.dpn .type-name { margin: 2px 0 6px; font-family: var(--font-display); font-weight: 400; font-size: clamp(38px, 6vw, 56px); line-height: 1;
}
.dpn .links { display: grid; gap: 10px; margin-top: 8px;
}
.dpn .link-box { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px;
}
.dpn .link-box p { margin: 0 0 6px; font-size: 14px;
}
.dpn .link-box a { display: block; overflow-wrap: anywhere; color: #bcd8ff; font-size: 13px;
}
.dpn .link-box .row { margin-top: 8px;
}
@media (max-width: 860px) {
.dpn .rm:not(.is-result):not(.is-guess) .rm-stage-note { display: none;
}
.dpn .rm-top > span:not(.tag) { display: none;
}
.dpn .rm-top { padding: 10px 16px; gap: 6px 14px;
}
.dpn .q-title { margin: 10px 0 10px; font-size: 26px;
}
.dpn .opts { margin-top: 10px; gap: 6px;
}
.dpn .opts .opt { min-height: 46px; padding: 10px 14px;
}
.dpn .rm:not(.is-result) .buildlog li:not(:last-child) { display: none;
}
.dpn .steps button .step-word { display: none;
}
.dpn .rm-top nav { margin-left: 0;
}
}

/* Site preview: below the site header, with the live canvas in the stage. */
.data-portrait-page { --data-portrait-bg: #050505; }
.data-portrait-page .site-footer { background: var(--data-portrait-bg); }
.dpn { padding-top: calc(var(--nav-h, 88px) + 8px); min-height: 100vh; }
.dpn .rm { max-width: 1240px; }
.dpn .rm-stage-col { top: calc(var(--nav-h, 88px) + 12px); }
.dpn .rm-stage { max-width: min(640px, calc((100vh - var(--nav-h, 88px) - 120px) * 0.8)); touch-action: none; }
.dpn .dpn-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* Captions under the portrait: what you are looking at, then how to handle it, both quiet. */
.dpn .rm-stage-note:empty { display: none; }
.dpn .buildlog:empty { display: none; }
.dpn .rm-stage-note { max-width: 34ch; margin: 14px auto 0; color: rgba(250, 250, 250, 0.5); font-size: 13px; line-height: 1.45; text-align: center; text-wrap: balance; }
.dpn .dpn-hint { margin: 6px auto 0; color: rgba(250, 250, 250, 0.3); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; text-align: center; }
/* On touch screens a finger turns the view; there is no hover to touch with. */
.dpn .dpn-hint-touch { display: none; }
@media (hover: none) and (pointer: coarse) {
  .dpn .dpn-hint-fine { display: none; }
  .dpn .dpn-hint-touch { display: inline; }
}

/* Phones and narrow windows held upright: one column. While you answer, the
   portrait stays pinned under the site bar and the questions scroll beneath
   it, so every answer changes the picture in view. The result scrolls as one
   page. Keep the query in step with STACKED in read-me/app.js. */
@media (max-width: 860px) and (orientation: portrait) {
  .dpn { padding-top: 0; }
  .dpn .rm { display: block; padding: 0 16px 64px; }
  .dpn .rm-stage-col { --h: min(42vh, (100vw - 32px) * 1.25); --h: min(42svh, (100vw - 32px) * 1.25); position: sticky; top: 0; z-index: 2; margin: 0 -16px; padding: calc(var(--nav-h, 72px) + 4px) 16px 10px; background: var(--bg); }
  .dpn .rm-stage-col::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 22px; background: linear-gradient(var(--bg), rgba(5, 5, 5, 0)); pointer-events: none; }
  .dpn .rm-stage { width: calc(var(--h) * 0.8); height: var(--h); max-width: none; }
  .dpn .rm.is-intro .rm-stage-col { --h: min(30vh, 100vw); --h: min(30svh, 100vw); }
  .dpn .panel { padding-top: 14px; }
  .dpn .rm.is-result .rm-stage-col { --h: min(66vh, (100vw - 32px) * 1.08); --h: min(66svh, (100vw - 32px) * 1.08); position: relative; z-index: auto; padding-bottom: 0; }
  .dpn .rm.is-result .rm-stage-col::after { display: none; }
  /* A long page: an upward or downward swipe on the portrait scrolls it, a
     sideways one turns the view. */
  .dpn .rm.is-result .rm-stage { touch-action: pan-y; }
}

/* Phones held sideways and short narrow windows: portrait and questions side
   by side, the portrait sized to the height. */
@media (max-width: 860px) and (orientation: landscape) {
  .dpn { padding-top: var(--nav-h, 72px); }
  .dpn .rm { grid-template-columns: auto minmax(0, 1fr); gap: 20px; padding: 8px 16px 48px; }
  .dpn .rm-stage-col { --h: min(100vh - var(--nav-h, 72px) - 56px, 55vw); --h: min(100svh - var(--nav-h, 72px) - 56px, 55vw); top: calc(var(--nav-h, 72px) + 8px); width: calc(var(--h) * 0.8); }
  .dpn .rm-stage { width: calc(var(--h) * 0.8); height: var(--h); max-width: none; }
}

/* Square corners, like the site's buttons (the Contact button). */
.dpn .btn, .dpn .opt, .dpn .key, .dpn .link-box, .dpn .share, .dpn .card, .dpn .mine li button { border-radius: var(--radius, 0.25rem); }