/* prosperityhorse.com -- the only stylesheet on this host.
   Written for this domain. Class names all carry the pho- prefix, which
   tools/verify_profile.py checks on every token in the build, and nothing here
   was lifted from a sibling: a shared stylesheet ties two domains together as
   surely as a shared tracker string does.
   Layout is one column at every width. The grid this game is played on is seven
   reels wide, and a page explaining it has no business being narrower than it
   needs to be, so the measure opens up on a wide screen instead of the column
   count changing. */

:root {
  --pho-ink: #2a1b16;
  --pho-ink-soft: #5c463d;
  --pho-paper: #fdf6ea;
  --pho-panel: #fffdf8;
  --pho-lacquer: #9c1f1a;
  --pho-lacquer-deep: #6d1210;
  --pho-gilt: #b8862f;
  --pho-gilt-pale: #f0dcae;
  --pho-rule: #e3cfae;
  --pho-measure: 39rem;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

.pho-sheet {
  margin: 0;
  background: var(--pho-paper);
  color: var(--pho-ink);
  font: 1.0625rem/1.68 Iowan Old Style, Palatino Linotype, Palatino, Georgia, serif;
  padding: 0 1rem 3rem;
}

.pho-sheet a {
  color: var(--pho-lacquer-deep);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.pho-sheet a:hover,
.pho-sheet a:focus-visible {
  color: var(--pho-lacquer);
}

:focus-visible {
  outline: 3px solid var(--pho-gilt);
  outline-offset: 2px;
}

/* ---- header: the operator button comes first, before <main> ------------- */

.pho-top {
  max-width: var(--pho-measure);
  margin: 0 auto;
  padding: 1.1rem 0 0;
}

.pho-hop {
  display: block;
  margin: 0 0 1.1rem;
  padding: 1rem 1.15rem 1.05rem;
  border: 2px solid var(--pho-gilt);
  border-radius: 4px;
  background: linear-gradient(176deg, var(--pho-lacquer) 0%, var(--pho-lacquer-deep) 100%);
  color: var(--pho-gilt-pale);
  text-decoration: none;
  box-shadow: 0 2px 0 var(--pho-gilt), 0 10px 22px -16px #3a0a08;
}

.pho-sheet .pho-hop:hover,
.pho-sheet .pho-hop:focus-visible {
  color: #fff8e6;
  background: linear-gradient(176deg, #ac2420 0%, #7d1512 100%);
}

.pho-hop-head {
  display: block;
  font-size: 1.3rem;
  line-height: 1.25;
  letter-spacing: 0.01em;
}

.pho-hop-note {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.86rem;
  line-height: 1.45;
  color: #f4ddb2;
}

.pho-mark {
  margin: 0 0 0.6rem;
}

.pho-mark-name {
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pho-mark-sub {
  display: block;
  font-size: 0.86rem;
  color: var(--pho-ink-soft);
}

.pho-tabs {
  margin: 0 0 0.5rem;
  border-top: 1px solid var(--pho-rule);
  border-bottom: 1px solid var(--pho-rule);
  padding: 0.45rem 0;
}

.pho-tabs-row {
  margin: 0;
  font-size: 0.93rem;
  line-height: 2;
}

.pho-tab,
.pho-tab-here {
  padding: 0.12rem 0.1rem;
  white-space: nowrap;
}

.pho-tab-here {
  color: var(--pho-lacquer);
  box-shadow: inset 0 -3px 0 var(--pho-gilt);
}

.pho-sep {
  color: var(--pho-gilt);
  padding: 0 0.3rem;
}

.pho-trail {
  margin: 0 0 0.3rem;
  font-size: 0.84rem;
  color: var(--pho-ink-soft);
}

/* ---- main ---------------------------------------------------------------- */

.pho-read {
  max-width: var(--pho-measure);
  margin: 0 auto;
}

.pho-h1 {
  margin: 1.2rem 0 0.6rem;
  font-size: 1.95rem;
  line-height: 1.17;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.pho-lede {
  margin: 0 0 1.5rem;
  font-size: 1.14rem;
  line-height: 1.6;
  color: var(--pho-ink-soft);
}

.pho-card {
  margin: 0 0 1.7rem;
  padding: 0.9rem 1.05rem 1rem;
  background: var(--pho-panel);
  border-left: 5px solid var(--pho-gilt);
  box-shadow: 0 1px 0 var(--pho-rule);
}

.pho-card-head {
  margin: 0 0 0.45rem;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pho-lacquer-deep);
}

.pho-card-rows {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.97rem;
}

.pho-card-row {
  padding: 0.22rem 0;
  border-top: 1px dotted var(--pho-rule);
}

.pho-card-row:first-child {
  border-top: 0;
}

.pho-card-k {
  color: var(--pho-lacquer-deep);
}

.pho-card-k::after {
  content: " \2014 ";
  color: var(--pho-gilt);
  font-weight: 400;
}

.pho-band {
  margin: 0 0 2.1rem;
}

.pho-h2 {
  margin: 0 0 0.5rem;
  font-size: 1.38rem;
  line-height: 1.26;
  font-weight: 600;
}

.pho-lead {
  margin: 0 0 0.75rem;
  font-size: 1.05rem;
  color: var(--pho-lacquer-deep);
}

.pho-body > p {
  margin: 0 0 0.9rem;
}

.pho-body > p:last-child {
  margin-bottom: 0;
}

.pho-shot {
  margin: 0 0 1rem;
}

.pho-shot img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--pho-rule);
  border-radius: 3px;
  background: var(--pho-gilt-pale);
}

.pho-shot-note {
  margin-top: 0.35rem;
  font-size: 0.83rem;
  color: var(--pho-ink-soft);
}

/* ---- questions: definition lists, broken into short sets ---------------- */

.pho-asks {
  margin: 0 0 2rem;
}

.pho-asks-set {
  margin: 0 0 0.7rem;
  padding: 0.55rem 0 0.1rem;
  border-top: 2px solid var(--pho-gilt);
}

.pho-ask {
  padding: 0 0 0.6rem;
}

.pho-ask-q {
  font-weight: 600;
  color: var(--pho-lacquer-deep);
}

.pho-ask-a {
  margin: 0.2rem 0 0;
}

.pho-onward {
  margin: 0;
  padding: 0.9rem 1rem;
  background: var(--pho-panel);
  border-top: 1px solid var(--pho-rule);
  border-bottom: 1px solid var(--pho-rule);
  font-size: 0.99rem;
}

/* ---- footer -------------------------------------------------------------- */

.pho-foot {
  max-width: var(--pho-measure);
  margin: 2.4rem auto 0;
  padding-top: 1.1rem;
  border-top: 3px double var(--pho-gilt);
  font-size: 0.95rem;
  color: var(--pho-ink-soft);
}

.pho-foot-head {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--pho-ink);
}

.pho-foot-p {
  margin: 0 0 0.85rem;
}

.pho-lines {
  margin: 0 0 0.95rem;
  padding: 0.6rem 0.9rem;
  list-style: none;
  background: var(--pho-panel);
  border-left: 4px solid var(--pho-lacquer);
}

.pho-line {
  padding: 0.15rem 0;
}

.pho-line-where {
  color: var(--pho-ink);
}

.pho-line-where::after {
  content: ":";
}

.pho-foot-nav {
  margin-top: 0.6rem;
}

.pho-foot-row {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.95;
}

/* ---- age dialog ---------------------------------------------------------- */

.pho-years {
  max-width: 27rem;
  margin: auto;
  padding: 1.2rem 1.3rem 1.3rem;
  border: 2px solid var(--pho-lacquer);
  border-radius: 5px;
  background: var(--pho-panel);
  color: var(--pho-ink);
  font: inherit;
}

.pho-years::backdrop {
  background: rgba(42, 27, 22, 0.66);
}

.pho-years-h {
  margin: 0 0 0.55rem;
  font-size: 1.25rem;
  line-height: 1.25;
  font-weight: 600;
}

.pho-years-p {
  margin: 0 0 0.8rem;
  font-size: 0.97rem;
}

.pho-years-q {
  margin: 0 0 0.9rem;
  font-size: 1.08rem;
}

.pho-years-ok {
  display: block;
  width: 100%;
  padding: 0.8rem 1rem;
  border: 2px solid var(--pho-gilt);
  border-radius: 4px;
  background: var(--pho-lacquer);
  color: var(--pho-gilt-pale);
  font: inherit;
  font-size: 1.08rem;
  cursor: pointer;
}

.pho-years-ok:hover,
.pho-years-ok:focus-visible {
  background: var(--pho-lacquer-deep);
  color: #fff8e6;
}

.pho-years-note {
  margin: 0.8rem 0 0;
  font-size: 0.86rem;
  color: var(--pho-ink-soft);
}

/* ---- wide screens: the measure opens, the column count does not ---------- */

@media (min-width: 46rem) {
  :root {
    --pho-measure: 44rem;
  }

  .pho-sheet {
    font-size: 1.09rem;
  }

  .pho-h1 {
    font-size: 2.35rem;
  }

  .pho-hop {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 1rem;
  }

  .pho-hop-note {
    margin-top: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}