/* Bright illustrated collectible, composed from three independent raster layers. */
.result-page.has-type-card > .result-art,
.result-page.has-type-card .result-speech,
.result-page.has-type-card .result-heading,
.result-page.has-type-card #result-paragraphs { display: none; }
.result-page.has-type-card .result-letter { max-width: 880px; padding-top: 0; }
.portrait-reading { padding: 34px clamp(18px, 4vw, 48px) 10px; }
.portrait-intro { text-align: center; padding: 0 8px 30px; }
.portrait-intro .eyebrow { color: var(--accent); font-size: 11px; margin-bottom: 12px; }
.portrait-intro > p:last-child { font-family: var(--serif); font-size: clamp(19px, 2vw, 25px); line-height: 1.8; word-break: keep-all; }
.portrait-layout { display: grid; grid-template-columns: minmax(0, .94fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 46px); align-items: start; }
.portrait-stage { min-width: 0; perspective: 1600px; }
.portrait-card { position: relative; width: 100%; aspect-ratio: 2/3; border-radius: 12px; transform-style: preserve-3d; transform: rotateY(0); transition: transform .95s cubic-bezier(.22,.72,.2,1); box-shadow: 0 15px 35px rgb(78 48 30 / .17); }
.portrait-card.is-closed { transform: rotateY(180deg); }
.portrait-face { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; background: #fff8e9; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.portrait-front { transform: translateZ(1px); }
.portrait-back { transform: rotateY(180deg); background: #172034; }
.portrait-symbol, .portrait-frame, .portrait-back-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; }
.portrait-animal { position: absolute; left: 58%; top: 44%; width: 35%; height: auto; filter: drop-shadow(0 3px 2px rgb(114 76 37 / .12)); }
.portrait-frame { z-index: 2; pointer-events: none; }
.portrait-card-label { position: absolute; left: 10%; right: 10%; top: 76%; color: #523b2e; font-family: var(--serif); text-align: center; }
.portrait-code { display: block; color: #936d51; font-size: clamp(15px, 1.8vw, 20px); margin-bottom: 6px; letter-spacing: .15em; }
.portrait-card-label strong { display: block; font-weight: 400; font-size: clamp(19px, 2.3vw, 28px); line-height: 1.55; word-break: keep-all; overflow-wrap: anywhere; }
.portrait-controls { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 10px 2px 0; }
.portrait-progress { color: var(--muted); font-size: 10px; line-height: 1.65; }
.portrait-copy { min-width: 0; }
.portrait-copy > *, .portrait-trait { transition: opacity .4s, transform .4s; }
.portrait-copy .is-pending { visibility: hidden; opacity: 0; transform: translateY(9px); }
.portrait-type-heading .eyebrow { color: var(--accent); font-size: 11px; margin: 0 0 12px; }
.portrait-type-heading h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(27px, 3vw, 36px); line-height: 1.5; word-break: keep-all; overflow-wrap: anywhere; }
.portrait-moon { margin: 24px 0 23px; padding: 17px 0; border-block: 1px solid var(--line); }
.portrait-moon h2 { display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 500; margin: 0 0 9px; color: #83523c; }
.moon-mark { position: relative; display: inline-block; width: 19px; height: 19px; border-radius: 50%; background: #c29a50; }
.moon-crescent { background: transparent; box-shadow: inset 6px -2px #b88d4d; transform: rotate(-20deg); }
.moon-half { background: linear-gradient(90deg, #c29a50 50%, #eadfcd 50%); }
.portrait-moon p, .portrait-grade-basis p, .portrait-grounds p { font-size: 12px; line-height: 1.9; word-break: keep-all; overflow-wrap: anywhere; }
.portrait-moon .portrait-rate { font-size: 11px; color: var(--muted); margin-bottom: 5px; }
.portrait-grade-basis summary, .portrait-grounds summary { font-size: 11px; color: var(--muted); cursor: pointer; padding-block: 12px; }
.portrait-grade-basis p + p { margin-top: 9px; }
.portrait-traits { display: grid; gap: 16px; }
.portrait-trait { font-family: var(--serif); font-size: 18px; line-height: 1.85; word-break: keep-all; overflow-wrap: anywhere; }
.portrait-sting { padding: 19px 19px 21px; margin: 25px 0; background: #f1e6dc; border-left: 2px solid #aa6b56; }
.portrait-sting .eyebrow { color: var(--accent); font-size: 10px; margin: 0 0 8px; }
.portrait-sting > p:last-child { font-size: 14px; line-height: 1.95; word-break: keep-all; overflow-wrap: anywhere; }
.portrait-matches { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 19px; border-block: 1px solid var(--line); padding: 20px 0; }
.portrait-match .eyebrow { color: var(--muted); font-size: 10px; line-height: 1.7; margin: 0 0 11px; }
.portrait-match-code { font-size: 13px; color: var(--accent); }
.portrait-match h3 { font-family: var(--serif); font-size: 17px; line-height: 1.6; font-weight: 400; margin: 6px 0 0; word-break: keep-all; }
.portrait-match-note { grid-column: 1/-1; font-size: 11px; line-height: 1.9; color: var(--muted); word-break: keep-all; overflow-wrap: anywhere; }
.portrait-grounds { padding-top: 3px; }
.share-format { display: flex; align-items: center; justify-content: center; gap: 12px; padding-top: 20px; font-size: 12px; color: var(--muted); }
.share-format > span { flex-shrink: 0; }
.share-format select { width: auto; max-width: 100%; padding: 9px 27px 9px 11px; border: 1px solid var(--line); background: var(--paper-light); color: var(--ink); border-radius: 2px; min-height: 44px; }
@media (max-width: 700px) {
  .portrait-reading { padding: 26px 18px 8px; }
  .portrait-layout { grid-template-columns: 1fr; gap: 28px; }
  .portrait-stage { width: min(100%, 360px); margin-inline: auto; }
  .portrait-copy { padding-inline: 6px; }
  .portrait-card-label strong { font-size: clamp(20px, 5.7vw, 28px); }
  .portrait-code { font-size: 18px; }
  .portrait-type-heading h1 { font-size: 30px; }
  .portrait-matches { gap: 16px 13px; }
  .result-page.has-type-card .result-letter { padding-inline: 22px; }
}