/* mypetisking.com — one throne, serif dignity, a slightly crooked crown */

:root {
  /* Two faces, one voice.
     Pinyon Script — eighteenth-century French calligraphy: outsized swirling
     capitals, the rest curling after them. The hand a decree is signed in.
     Cormorant Garamond — the same chancery lineage cut for reading: high
     contrast, sharp, delicate. Everything that is not a title is set in it,
     small caps and letterspaced where a label is wanted. */
  --royal: 'Pinyon Script', Georgia, cursive;
  --body: 'Cormorant Garamond', Garamond, Georgia, 'Times New Roman', serif;
  --ink: #241c10;
  --paper: #fdfcf8;
  --gold: #a67c00;
  --gold-bright: #c9a227;
  --faded: #8a8272;
  --rule: #d9d2c0;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 23px;
  font-weight: 500;
  line-height: 1.6;
  font-variant-numeric: lining-nums;
  text-align: center;
}

main { max-width: 620px; margin: 0 auto; padding: 2.5rem 1.25rem 4rem; }

h1 {
  font-family: var(--royal);
  font-size: 3.2rem; font-weight: 400; letter-spacing: .01em;
  margin: 0 0 .3rem; line-height: 1.25;
}
h1 sup { font-size: .5em; color: var(--faded); }
h2 { font-family: var(--body); font-weight: 700; }
hr {
  border: 0;
  height: 1px;
  overflow: visible;
  margin: 1.6rem 0 2.4rem;
  background: linear-gradient(to right,
    transparent, var(--rule) 18%, var(--rule) 82%, transparent);
}
hr::after {
  content: '\2766';
  display: inline-block;
  position: relative;
  top: -.72em;
  padding: 0 .9rem;
  background: var(--paper);
  color: var(--gold);
  font-size: 1.05rem;
}

a { color: var(--gold); }
a:hover { color: var(--ink); }

.label {
  font-family: var(--body); font-weight: 700;
  color: var(--faded); margin-bottom: 0;
  font-size: .78rem; letter-spacing: .18em; text-transform: uppercase;
}
/* Not the decorative face: its "1" is a Roman I, and the price is the one
   number on this page nobody may misread. */
.price {
  font-family: var(--body); font-weight: 700;
  font-size: 4.4rem; margin: .05em 0 .3em; letter-spacing: -.01em;
  line-height: 1; color: var(--ink);
}

/* the signature: framed portrait with a tilted crown resting on the corner */
.throne { position: relative; display: inline-block; margin: 1rem auto 0; }
.throne .pet {
  display: block;
  width: 280px; height: 280px;
  object-fit: cover;
  background: #efe9da;
  font-size: 16px;   /* the unit every frame below is drawn in */
}
.throne .pet.empty {
  display: flex; align-items: center; justify-content: center;
  font-size: 5rem; color: var(--rule);
}
.throne .crown {
  position: absolute;
  top: -34px; right: -18px;
  font-size: 3rem;
  transform: rotate(18deg);
  filter: drop-shadow(0 2px 1px rgba(0,0,0,.15));
  z-index: 2;
}

/* The pet's name is the one word everyone came to read, so it leaves the
   script face to the titles and takes a weight that holds up — struck in
   gold, with a shadow under it so the letters sit proud of the paper. */
.petname {
  font-family: var(--body);
  font-weight: 700;
  font-size: 2.9rem;
  letter-spacing: .035em;
  line-height: 1.15;
  margin: 0 0 .2rem;
  color: var(--gold);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .petname {
    background: linear-gradient(168deg,
      #f6e3a6 0%, #d9b246 32%, #a97c15 62%, #edd07f 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .55))
            drop-shadow(0 2px 3px rgba(120, 90, 20, .3));
  }
}
.bio { max-width: 420px; margin: .3rem auto .6rem; }
.meta { color: var(--faded); font-size: .95rem; }

.cta { margin: 2rem 0 1.5rem; }
.button {
  display: inline-block;
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  border: none;
  font-family: var(--body);
  font-weight: 900;
  font-size: .92rem;
  letter-spacing: .09em;
  padding: .85rem 1.9rem;
  cursor: pointer;
}
.button:hover { background: var(--gold); color: var(--paper); }

.tiny { color: var(--faded); font-size: .8rem; line-height: 1.6; }
.warn { color: #8a3324; }

/* history */
.history { text-align: left; }
.reign {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 1rem 0; border-bottom: 1px solid var(--rule);
}
.reign img, .reign .noimg {
  width: 72px; height: 72px; object-fit: cover; flex: none;
  border: 3px solid var(--gold-bright);
}
.reign .noimg {
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; background: #efe9da; border-color: var(--rule);
}
.reign.removed { opacity: .45; }
.bio-small { margin: .3rem 0 0; font-size: .9rem; color: var(--faded); }

/* forms */
form { text-align: left; max-width: 440px; margin: 2rem auto; }
label { display: block; margin-bottom: 1.1rem; font-size: .95rem; }
input[type=text], textarea {
  display: block; width: 100%;
  font: inherit; font-size: 1rem;
  padding: .5rem .6rem; margin-top: .3rem;
  border: 1px solid var(--rule); background: #fff;
}
input[type=file] { margin-top: .4rem; font-size: .9rem; }
input:focus, textarea:focus, .button:focus-visible {
  outline: 2px solid var(--gold-bright); outline-offset: 1px;
}

.reign-line {
  font-size: 1.05rem;
  color: var(--ink);
  margin: .3rem 0 .8rem;
  font-variant-numeric: tabular-nums;
}
.record-flag {
  display: inline-block;
  font-family: var(--body);
  font-size: .6rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--paper);
  background: var(--gold);
  padding: .1rem .5rem;
  margin-left: .4rem;
  vertical-align: middle;
}
.record {
  font-size: .9rem;
  color: var(--faded);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: .7rem 0;
  margin: 1.8rem auto;
  max-width: 460px;
}

.button.locked {
  background: none;
  color: var(--faded);
  border: 1px dashed var(--rule);
  cursor: default;
}
.button.locked #countdown { color: var(--ink); font-variant-numeric: tabular-nums; }

.reign-stats { margin: .35rem 0 0; font-size: .8rem; color: var(--faded); }
.subhead {
  font-family: var(--body); font-weight: 700;
  font-size: .92rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold); margin: 2.2rem 0 .8rem;
}

/* --------------------------------------------------------------- reactions
   Five ways to salute a pet, one allowed per visitor. The chosen one fills
   in gold; the rest sit as outlines waiting to be picked. */
.reactions {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .4rem;
  margin: 1.2rem auto .3rem;
}
.react {
  display: inline-flex; align-items: center; gap: .35rem;
  font: inherit; font-size: .85rem;
  background: none; border: 1px solid var(--rule);
  padding: .4rem .7rem;
  cursor: pointer; color: var(--faded);
}
.react svg { width: 19px; height: 19px; fill: none; stroke: var(--faded);
             stroke-width: 1.6; stroke-linejoin: round; }
.react .count { font-weight: bold; color: var(--ink);
                font-variant-numeric: lining-nums tabular-nums; }
.react:hover { border-color: var(--gold-bright); color: var(--ink); }
.react:hover svg { stroke: var(--gold); }
.react.on { border-color: var(--gold-bright); background: #fdf6e3; color: var(--ink); }
.react.on svg { fill: var(--gold); stroke: var(--gold); }
.react[disabled] { opacity: .6; }
.react:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 1px; }

/* visible to a screen reader, not to the eye */
.sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* stats grid */
.stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1rem .5rem; margin: 1.5rem auto; max-width: 460px;
}
.stats div { text-align: center; }
.stats dt { font-family: var(--body); font-size: .62rem; color: var(--faded);
            text-transform: uppercase; letter-spacing: .12em; }
.stats dd { margin: .15rem 0 0; font-size: 1.3rem; }

/* comments */
.comments { list-style: none; padding: 0; text-align: left; max-width: 480px;
            margin: 0 auto; }
.comments li { border-left: 3px solid var(--rule); padding: .1rem 0 .1rem .9rem;
               margin-bottom: 1.1rem; }
.comments li p { margin: .2rem 0 0; }
.comment-form { max-width: 480px; }
.notice { color: var(--gold); font-size: .9rem; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* admin */
.queue { text-align: left; }
.pending { border: 1px solid var(--rule); padding: .8rem 1rem; margin-bottom: 1rem; }
.pending p { margin: .2rem 0; }
.row { display: flex; gap: .5rem; margin-top: .6rem; }
.button.small { font-size: .72rem; padding: .4rem .85rem; letter-spacing: .06em;
                white-space: nowrap; }
.button.danger { background: #8a3324; }
.button.danger:hover { background: #6d2719; }
.admin-table { width: 100%; min-width: 660px; border-collapse: collapse;
               font-size: .78rem; text-align: left; margin-top: .5rem; }
.admin-table th, .admin-table td { padding: .4rem .3rem;
                                   border-bottom: 1px solid var(--rule); }
.admin-table th { font-family: var(--body); font-size: .62rem;
                  text-transform: uppercase; letter-spacing: .06em;
                  color: var(--faded); font-weight: 700; white-space: nowrap; }
.admin-table td { white-space: nowrap; }
.admin-table td.detail { white-space: normal; min-width: 14rem; }
.admin-table tr.removed { opacity: .45; }

footer { margin-top: 3.5rem; }
footer nav { font-size: .9rem; margin-bottom: 1rem; }

@media (max-width: 480px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .admin-table { font-size: .7rem; }
}

@media (max-width: 480px) {
  body { font-size: 21px; }
  h1 { font-size: 2.5rem; }
  .petname { font-size: 2.35rem; }
  .wordmark { font-size: 1.7rem; }
  .price { font-size: 3.6rem; }
  .throne .pet { width: 220px; height: 220px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ---------------------------------------------------------------- topbar */
.topbar {
  border-bottom: 1px solid var(--rule);
  padding: .9rem 1.25rem .8rem;
}
.wordmark {
  display: block;
  font-family: var(--royal); font-weight: 400;
  font-size: 2rem; line-height: 1.3;
  letter-spacing: .01em;
  color: var(--ink);
  text-decoration: none;
}
.wordmark:hover { color: var(--gold); }
.menu {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .3rem 1.2rem;
  margin-top: .5rem;
  font-family: var(--body); font-weight: 700;
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
}
.menu a { text-decoration: none; }
.menu a:hover { text-decoration: underline; }

/* long links must never push the page sideways */
a, .bio, .comments li p, .admin-table td.detail { overflow-wrap: anywhere; }

/* ------------------------------------------------- the portrait, two-sided
   A real card: half a turn per click, landing on the other face. The back is
   pre-rotated so it is not seen mirrored, and both faces hide their backs so
   only one is ever visible. */
.spinner {
  display: block; padding: 0; border: 0; background: none;
  font: inherit; cursor: pointer;
  /* perspective belongs on the card's direct parent — on .throne it is
     flattened by the button in between and the turn goes flat. */
  perspective: 1000px;
}
.spinner:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 6px; }
.card {
  display: block; position: relative;
  transform-style: preserve-3d;
  transition: transform .7s ease-in-out;
}
.card .face { backface-visibility: hidden; }
.card .face.back {
  position: absolute; top: 0; left: 0;
  transform: rotateY(180deg);
}
.petlink { margin: .4rem 0 .2rem; }
.understage { margin-top: 2rem; }

/* ------------------------------------------- collapsible sections (fold) */
.fold {
  max-width: 480px;
  margin: 1.2rem auto 0;
  border-top: 1px solid var(--rule);
  text-align: left;
}
.fold > summary {
  cursor: pointer;
  list-style: none;
  padding: .7rem .2rem;
  font-family: var(--body);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--faded);
  text-align: center;
}
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::after { content: ' \25be'; }
.fold[open] > summary::after { content: ' \25b4'; }
.fold > summary:hover { color: var(--ink); }
.fold .comments { margin-bottom: 1.2rem; }
.fold form { margin: .5rem auto 1rem; }

/* ------------------------------------------------------- claim / editing */
.photos {
  border: 1px solid var(--rule);
  padding: .4rem 1rem 1rem;
  margin: 0 0 1.1rem;
}
.photos legend { font-size: .95rem; padding: 0 .4rem; color: var(--faded); }
.photo-slot { margin-top: .8rem; }
.photo-slot label { margin-bottom: .4rem; }
label.inline {
  display: flex; align-items: center; gap: .4rem;
  font-size: .85rem; color: var(--faded); margin: .4rem 0 0;
}
label.inline input { width: auto; }
.thumb {
  display: block; width: 96px; height: 96px; object-fit: cover;
  border: 2px solid var(--gold-bright); margin-top: .3rem;
}

/* ------------------------------------------------------ rules / policies */
.rules-list {
  text-align: left; max-width: 480px; margin: .6rem auto 1.2rem;
  padding-left: 1.2rem;
}
.rules-list li { margin-bottom: .4rem; }

/* --------------------------------------------------- admin: wide tables */
.table-scroll { overflow-x: auto; margin: 0 -1.25rem; padding: 0 1.25rem; }
.admin-table td.nowrap, .admin-table td.mono { white-space: nowrap; }
.admin-table td.mono { font-family: ui-monospace, Menlo, monospace; font-size: .75rem; }
.actions { display: flex; gap: .4rem; align-items: center; white-space: nowrap; }
.actions .button.small { white-space: nowrap; }
.actions form { margin: 0; }
a.button.small { text-decoration: none; }
.pill {
  display: inline-block; font-family: var(--body);
  font-size: .6rem; letter-spacing: .05em; padding: .1rem .45rem;
  border: 1px solid var(--rule); white-space: nowrap;
}
.pill-good { border-color: var(--gold-bright); background: #fdf6e3; color: var(--ink); }
.pill-bad  { border-color: #8a3324; background: #f7e9e6; color: #8a3324; }
.pill-meh  { color: var(--faded); }

/* forms that sit inline in a row of buttons must not claim the form width */
.row form, .actions form { margin: 0; max-width: none; width: auto; }

/* long policy prose: the centred look does not survive nine paragraphs */
.prose { text-align: left; max-width: 520px; margin: 0 auto; }
.prose .subhead { text-align: center; }
.prose .rules-list { margin-left: 0; }

/* The illuminated initial: the first letter of a page's opening paragraph is
   set four lines tall in gold script, the way a manuscript opens a chapter. */
.prose > p:first-child::first-letter {
  font-family: var(--royal);
  font-size: 4em;
  line-height: .78;
  float: left;
  /* the swash runs left of its own box, so the paragraph is inset to match */
  margin: .04em .14em 0 0;
  color: var(--gold);
}
.prose > p:first-child { padding-left: .55em; }

/* ------------------------------------------------- the king's own wallpaper
   One tiled, drawn ornament behind the whole page, in gold, faint enough to
   read through and dark enough to notice. Fixed, so it does not scroll with
   the content, and inert to the pointer. */
.ornaments {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  color: var(--gold);
  opacity: .085;
}
.topbar, main { position: relative; z-index: 1; }

/* the picker in the claim form and the moderation panel */
.ornament-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: .5rem;
  margin-top: .6rem;
}
.ornament-grid input { position: absolute; opacity: 0; pointer-events: none; }
.ornament-grid label {
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  margin: 0; padding: .6rem .3rem;
  border: 1px solid var(--rule);
  cursor: pointer;
  font-size: .7rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--faded);
  text-align: center;
}
.ornament-grid label:hover { border-color: var(--gold-bright); color: var(--ink); }
.ornament-grid svg { width: 26px; height: 26px; fill: var(--gold); color: var(--gold); }
.ornament-grid .none svg { fill: none; stroke: var(--rule); stroke-width: 1.6; }
.ornament-grid input:checked + label {
  border-color: var(--gold-bright);
  background: #fdf6e3;
  color: var(--ink);
}
.ornament-grid input:focus-visible + label {
  outline: 2px solid var(--gold-bright); outline-offset: 1px;
}

/* ------------------------------------------------------------ the offer
   The buy button used to be a lone line below the fold that never said what
   the dollar bought. This is the panel that does. */
/* the nav's own buy button: the same struck gold, sized for a nav row */
.menu-buy {
  color: #2c2208 !important;
  background: linear-gradient(163deg,
    #f7e6a8 0%, #dcb44a 34%, #b8860b 58%, #d9ae3c 78%, #f4dd9a 100%);
  border: 1px solid #8a6a12;
  padding: .35rem .9rem;
  text-decoration: none;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .45);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .7),
    0 2px 7px rgba(120, 90, 20, .25);
  transition: filter .15s ease, box-shadow .15s ease;
}
.menu-buy:hover {
  color: #2c2208 !important;
  filter: brightness(1.07);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .8),
    0 4px 12px rgba(120, 90, 20, .35);
}

.offer-lede { font-size: .95rem; margin: 1.2rem 0 .4rem; color: var(--faded); }
.offer-list {
  text-align: left; list-style: none; padding: 0;
  margin: 0 auto 1.1rem; max-width: 420px;
  font-size: .92rem;
}
.offer-list li {
  padding-left: 1.3rem; margin-bottom: .55rem; position: relative;
}
.offer-list li::before {
  content: '\2766';
  position: absolute; left: 0; top: 0;
  color: var(--gold); font-size: .8rem;
}

@media (max-width: 480px) {
  .menu-buy { padding: .25rem .6rem; }
}

/* ------------------------------------------------------------- the frames
   Seven ways to hang the portrait. Every measurement is in `em`, so the same
   rule draws the 280px portrait and the little swatch in the picker — the
   swatch only sets a smaller font-size. */
.f-classic {
  border: .375em solid var(--gold-bright);
  outline: .0625em solid var(--gold);
  outline-offset: .1875em;
}
.f-ornate {
  border: .75em solid var(--gold-bright);
  outline: .1875em double var(--gold);
  outline-offset: .125em;
  box-shadow: inset 0 0 0 .125em rgba(36, 28, 16, .38);
}
.f-thin {
  border: .0625em solid var(--gold);
  outline: .0625em solid var(--rule);
  outline-offset: .25em;
}
.f-rounded {
  border: .375em solid var(--gold-bright);
  border-radius: .9em;
}
.f-cameo {
  border: .375em solid var(--gold-bright);
  border-radius: 50%;
  outline: .0625em solid var(--gold);
  outline-offset: .1875em;
}
.f-polaroid {
  border: .625em solid #fff;
  border-bottom-width: 2em;
  outline: .0625em solid var(--rule);
  box-shadow: 0 .15em .55em rgba(0, 0, 0, .18);
}
.f-onyx {
  border: .5em solid #1a1510;
  outline: .0625em solid var(--gold);
  outline-offset: .125em;
}

/* the picker: the same frames, drawn small, over the owner's own photo */
.frame-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  gap: .8rem .5rem;
  margin-top: .8rem;
}
.frame-grid input { position: absolute; opacity: 0; pointer-events: none; }
.frame-grid label {
  display: flex; flex-direction: column; align-items: center; gap: .45rem;
  margin: 0; padding: .5rem .3rem;
  border: 1px solid transparent;
  cursor: pointer;
  font-size: .7rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--faded); text-align: center;
}
.swatch-wrap {
  position: relative;
  display: block;
  width: 62px; height: 62px;
  flex: none;
}
.frame-swatch {
  display: block;                 /* a span is inline, and width does not
                                     apply to inline elements */
  font-size: 4.5px;               /* scales every em in the frame rules */
  width: 100%; height: 100%;
  background: linear-gradient(150deg, #c9a97a, #8a6a44);
  background-size: cover; background-position: center;
}
.frame-grid label:hover { color: var(--ink); }
.frame-grid input:checked + label {
  border-color: var(--gold-bright);
  background: #fdf6e3;
  color: var(--ink);
}
.frame-grid input:focus-visible + label {
  outline: 2px solid var(--gold-bright); outline-offset: 1px;
}

.throne-cta { margin: 1.3rem 0 .4rem; }

/* --------------------------------------------- tightening the throne page
   The portrait is what people came for, so nothing above it is allowed to
   take more room than it earns. */
main { padding-top: 1.6rem; }
.worth-line { margin: 0 0 .9rem; }
.throne-cta { margin: 0 0 1.2rem; }
.throne { margin-top: 0; }
.reigning-label { margin: .9rem 0 .15rem; }
.petname { margin: 0 0 .2rem; }
.reign-line { margin: .2rem 0 .7rem; }

.petlink { margin: .35rem 0 0; }
.reactions { margin-top: .9rem; }

/* The crown hangs above the frame, so whatever sits above the portrait has to
   leave it room — otherwise it lands on the buy button. */
.throne .crown { top: -26px; right: -14px; font-size: 2.7rem; }
.throne-cta { margin: 0 0 2.3rem; }

/* ------------------------------------------------------- the crown button
   The one thing on the page that is asking for money, so it is the one thing
   allowed to look expensive: struck gold, a raised edge, and a slow sheen
   that crosses it every few seconds. */
.button.crown-cta {
  display: inline-flex; align-items: center; gap: .65rem;
  position: relative;
  overflow: hidden;
  background: linear-gradient(163deg,
    #f7e6a8 0%, #dcb44a 34%, #b8860b 58%, #d9ae3c 78%, #f4dd9a 100%);
  color: #2c2208;
  border: 1px solid #8a6a12;
  border-radius: 2px;
  padding: .95rem 2.1rem;
  font-size: 1rem;
  letter-spacing: .11em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .45);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .7),
    inset 0 -2px 5px rgba(90, 64, 8, .3),
    0 3px 12px rgba(120, 90, 20, .3);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.button.crown-cta:hover {
  background: linear-gradient(163deg,
    #f7e6a8 0%, #dcb44a 34%, #b8860b 58%, #d9ae3c 78%, #f4dd9a 100%);
  color: #2c2208;
  filter: brightness(1.06);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .8),
    inset 0 -2px 5px rgba(90, 64, 8, .3),
    0 6px 18px rgba(120, 90, 20, .38);
}
.button.crown-cta:active { transform: translateY(0); filter: brightness(.98); }

.crown-mark {
  width: 1.15em; height: 1.15em; flex: none;
  fill: #6b4f0a;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .5));
}
.crown-cta-text { position: relative; z-index: 1; }

/* the sheen */
.button.crown-cta::after {
  content: '';
  position: absolute;
  top: -60%; bottom: -60%; left: -45%;
  width: 38%;
  background: linear-gradient(100deg,
    transparent, rgba(255, 255, 255, .6), transparent);
  transform: skewX(-18deg);
  animation: crown-sheen 5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes crown-sheen {
  0%, 62% { left: -45%; }
  100%    { left: 125%; }
}

@media (max-width: 480px) {
  .button.crown-cta { padding: .85rem 1.4rem; font-size: .92rem; letter-spacing: .07em; }
}
@media (prefers-reduced-motion: reduce) {
  .button.crown-cta::after { animation: none; opacity: 0; }
  .button.crown-cta:hover { transform: none; }
}

/* ---------------------------------------------------- gloss on the portrait
   The same sheen the buy button wears, swept across the framed picture like
   glass over a painting. Its own layer rather than part of the card, so it
   stays flat while the portrait turns. */
.gloss {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;            /* over the photo, under the crown */
}
.gloss::before {
  content: '';
  position: absolute;
  top: -60%; bottom: -60%; left: -45%;
  width: 38%;
  background: linear-gradient(100deg,
    transparent, rgba(255, 255, 255, .42), transparent);
  transform: skewX(-18deg);
  animation: crown-sheen 5s ease-in-out infinite;
}
/* the two frames that are not rectangles clip the sheen to their own shape */
.gloss.g-rounded { border-radius: .9em; font-size: 16px; }
.gloss.g-cameo { border-radius: 50%; }

@media (prefers-reduced-motion: reduce) {
  .gloss { display: none; }
}

/* ------------------------------------------------------------- the plaque
   The bio, set on the same struck-metal card as the buy button but without
   its gradient or its sheen — it should read like the engraved label under a
   painting, not compete with the one thing asking for money. */
.bio {
  max-width: 440px;
  margin: 1rem auto .7rem;
  padding: .9rem 1.3rem;
  background: linear-gradient(163deg, #fdf7e6 0%, #f6ecd2 100%);
  border: 1px solid var(--gold-bright);
  border-radius: 2px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .85),
    inset 0 -1px 3px rgba(140, 105, 25, .12),
    0 2px 9px rgba(120, 90, 20, .13);
  font-size: .98rem;
  line-height: 1.5;
}

@media (max-width: 480px) {
  .bio { padding: .8rem 1rem; }
}

/* ------------------------------------------------ the help dot and its box
   The full "what it buys" list used to sit open on the throne page and push
   everything down. It now lives one click away, next to the button. */
.cta {
  display: flex; align-items: center; justify-content: center;
  gap: .7rem;
  flex-wrap: wrap;
}
.help-dot {
  width: 1.75rem; height: 1.75rem; flex: none;
  border: 1px solid var(--gold-bright);
  border-radius: 50%;
  background: none;
  color: var(--gold);
  font-family: var(--body); font-weight: 700; font-size: .95rem; line-height: 1;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.help-dot:hover { background: var(--gold-bright); color: var(--paper); }
.help-dot:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }

.offer-dialog {
  max-width: 520px;
  width: calc(100% - 2rem);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--gold-bright);
  background: #fdfaf0;
  color: var(--ink);
  padding: 1.6rem 1.5rem 1.2rem;
  position: relative;
}
.offer-dialog::backdrop { background: rgba(36, 28, 16, .45); }
.offer-dialog .offer-lede { margin: .7rem 0 1rem; }
.offer-dialog-close { margin: 0; max-width: none; }
.dialog-x {
  position: absolute; top: .3rem; right: .5rem;
  background: none; border: 0;
  font: inherit; font-size: 1.6rem; line-height: 1;
  color: var(--faded); cursor: pointer; padding: .2rem .4rem;
}
.dialog-x:hover { color: var(--ink); }

@media (max-width: 480px) {
  .offer-dialog { padding: 1.3rem 1.1rem 1rem; }
}

/* --------------------------------------------------------- pets and reigns
   A pet is not a purchase. It can be crowned, dethroned and crowned again,
   and the timeline below is the whole of it. */
.dynasty {
  list-style: none; padding: 0;
  max-width: 460px; margin: 0 auto 1rem;
  text-align: left;
  counter-reset: reign;
}
.dynasty li {
  border-left: 3px solid var(--rule);
  padding: .1rem 0 .1rem .9rem;
  margin-bottom: .9rem;
}
.dynasty li.now { border-left-color: var(--gold-bright); }
.dyn-when { display: block; font-variant-numeric: lining-nums; }
.dyn-meta { display: block; margin-top: .1rem; }

/* the chooser after payment */
.choose-form { max-width: none; text-align: center; margin: 1.6rem auto; }
.dynasty-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1rem .8rem;
  max-width: 520px; margin: 1rem auto 1.6rem;
}
.dynasty-pick { margin: 0; max-width: none; }
.dynasty-pick button {
  display: flex; flex-direction: column; align-items: center; gap: .4rem;
  width: 100%; padding: .7rem .4rem;
  background: none; border: 1px solid transparent;
  font: inherit; cursor: pointer; color: var(--ink);
}
.dynasty-pick button:hover { border-color: var(--gold-bright); background: #fdf6e3; }
.dynasty-face {
  display: block; width: 84px; height: 84px; object-fit: cover;
  font-size: 8px;               /* scales the em-based frame rules */
  background: #efe9da;
}
.dynasty-face.empty {
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem; color: var(--rule);
}
.dynasty-name { font-weight: 600; }

/* The button never leaves the page. While a pet is inside its protected
   window it simply cannot be pressed: the gold goes flat, the sheen stops,
   and the label counts down to the moment it comes back. */
.button.crown-cta.is-locked {
  background: linear-gradient(163deg, #e8e2d2 0%, #d3cab4 40%, #bdb298 70%, #e4ddcb 100%);
  color: #6b6355;
  border-color: #b3a88f;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .6),
    inset 0 -2px 5px rgba(90, 80, 55, .18);
  cursor: default;
}
.button.crown-cta.is-locked:hover { transform: none; filter: none; }
.button.crown-cta.is-locked::after { display: none; }   /* no sheen while shut */
.button.crown-cta.is-locked .crown-mark { fill: #8a8070; }
.button.crown-cta.is-locked #countdown {
  font-variant-numeric: lining-nums tabular-nums;
  color: #4a4335;
}

/* ------------------------------------------------------------ cut frames
   These are not bordered, they are cut out. A clipped element cannot carry a
   border — the border gets clipped with it — so the gold rim is built from
   stacked drop-shadows instead, in `em` so it scales down with the swatch
   exactly like every other frame here. */
.clip-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.f-heart, .f-ellipse, .f-shield, .f-dog, .f-cat {
  /* no border and no outline: both would be clipped along with the picture */
  border: 0;
  outline: 0;
  background-color: transparent;   /* never `background: none` — that resets
                                      background-size too, and the photo then
                                      draws unscaled from its top-left corner */
}
.f-heart   { clip-path: url(#clip-heart); }
.f-ellipse { clip-path: url(#clip-ellipse); }
.f-shield  { clip-path: url(#clip-shield); }
.f-dog     { clip-path: url(#clip-dog); }
.f-cat     { clip-path: url(#clip-cat); }

/* the sheen has to be cut to the same shape or it lights up the corners */
.gloss.g-heart   { clip-path: url(#clip-heart); }
.gloss.g-ellipse { clip-path: url(#clip-ellipse); }
.gloss.g-shield  { clip-path: url(#clip-shield); }
.gloss.g-dog     { clip-path: url(#clip-dog); }
.gloss.g-cat     { clip-path: url(#clip-cat); }

/* the gold edge for a cut frame: the same path, stroked over the picture */
.frame-edge {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  fill: none;
  stroke: var(--gold-bright);
  stroke-width: 5;              /* constant px: the path carries
                                   vector-effect="non-scaling-stroke" */
  pointer-events: none;
  z-index: 2;
}
.swatch-wrap .frame-edge { stroke-width: 1.6; }