/* A guildmate's own page.

   Kept in its own file rather than added to style.css, which is 476 KB and
   93% duplicate — anything appended there has to out-shout thirty-odd copies
   of itself. This loads only on /guild/<name>.

   Everything here is drawn from what the site already knows: rank, faires,
   bunk, coins, the hand, the bring-list, the last things said by the fire.
   Nobody has to fill anything in for their page to be worth opening. */

.pro{padding-bottom:60px}

/* ── the banner ─────────────────────────────────────────────────────────
   A gradient for now. This is where an uploaded banner will go. */
.pro-banner{
  position:relative;display:block;height:var(--banner-h,190px);overflow:hidden;
  border-bottom:2px solid var(--gold-d);
  background:
    radial-gradient(120% 150% at 20% 0%, rgba(224,145,58,.28), transparent 60%),
    linear-gradient(180deg,#2b1d10,#160f08);
}
.pro-banner__art{position:absolute;inset:0;opacity:.5;
  background:
    repeating-linear-gradient(90deg,rgba(255,225,170,.05) 0 3px,transparent 3px 9px),
    radial-gradient(60% 80% at 70% 30%, rgba(226,199,127,.32), transparent 70%);
}
.pro-banner__fade{position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.5))}

/* ── who they are ───────────────────────────────────────────────────────
   The portrait lifts out of the banner, the way it does on the roster. */
.pro-ident{position:relative;margin-top:-58px;z-index:2}
.pro-ident__row{display:flex;gap:20px;align-items:flex-end;flex-wrap:wrap}
.pro-face{
  width:124px;height:124px;border-radius:50%;flex-shrink:0;object-fit:cover;
  border:3px solid var(--gold);background:var(--dark);
  box-shadow:0 14px 34px -18px rgba(0,0,0,.85);
}
.pro-face--init{
  display:grid;place-items:center;font-family:var(--display);font-size:calc(2rem * var(--u-scale,1));
  color:var(--gold-l);background:linear-gradient(150deg,#6b4f2a,#2a1c0e);
}
.pro-ident__words{padding-bottom:6px;min-width:0}
.pro-ident__words h1{font-size:calc(clamp(1.7rem,4.4vw,2.4rem) * var(--u-scale,1));text-wrap:balance;margin:0}

.pro-pills{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.pro-pill{
  font-family:var(--display);font-size:calc(.6rem * var(--u-scale,1));letter-spacing:.18em;text-transform:uppercase;
  padding:5px 11px;border-radius:2px;border:1px solid var(--gold-d);
  background:linear-gradient(180deg,var(--gold-l),var(--gold));color:#2a1d0c;
}
.pro-pill--seal{background:var(--u-seal,var(--wine));border-color:rgba(0,0,0,.3);color:#f7e6c6}
.pro-pill--quiet{background:transparent;color:var(--muted);border-color:var(--line)}

.pro-note{margin-top:11px;font-style:italic;color:var(--ink2)}
.pro-back{margin-top:18px;font-size:calc(.86rem * var(--u-scale,1));color:var(--muted)}
.pro-back a{color:var(--u-accent,var(--wine));font-weight:600}
.pro-back a:hover{text-decoration:underline}

/* ── the two columns ────────────────────────────────────────────────────
   The sheet on the left because it is the same few facts on every page and
   the eye learns where to find them; what changes sits on the right. */
.pro-cols{display:grid;grid-template-columns:300px 1fr;gap:24px;margin-top:30px;align-items:start}

.pro-card{
  background:var(--ivory);border:1px solid var(--line);border-radius:3px;
  box-shadow:0 12px 30px -26px rgba(60,40,15,.9);
  padding:19px 21px;margin-bottom:20px;position:relative;
}
.pro-card::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--u-accent,var(--wine));opacity:.75}
.pro-card h2{font-size:calc(.63rem * var(--u-scale,1));letter-spacing:.24em;text-transform:uppercase;color:var(--u-accent,var(--wine));margin-bottom:12px}
.pro-rank{color:var(--ink);letter-spacing:.1em}

.pro-sheet{list-style:none;font-size:calc(.95rem * var(--u-scale,1));margin:0;padding:0}
.pro-sheet li{display:flex;justify-content:space-between;gap:14px;align-items:baseline;
  padding:7px 0;border-bottom:1px dotted var(--line)}
.pro-sheet li:last-child{border-bottom:0}
.pro-sheet .k{color:var(--muted);font-size:calc(.7rem * var(--u-scale,1));letter-spacing:.12em;text-transform:uppercase;
  font-family:var(--display)}
.pro-sheet .v{font-weight:600;text-align:right;font-variant-numeric:tabular-nums}

.pro-empty{color:var(--muted);font-size:calc(.93rem * var(--u-scale,1))}
.pro-empty a{color:var(--u-accent,var(--wine));font-weight:600}
.pro-empty a:hover{text-decoration:underline}

/* the hand, laid out the way the tavern lays it out */
.pro-hand{display:flex;gap:8px;flex-wrap:wrap}
.pro-card-face{
  width:50px;height:70px;border-radius:4px;flex-shrink:0;
  background:linear-gradient(180deg,#fdfaf0,#f0e5cb);
  border:1px solid #c3ab7d;box-shadow:0 5px 12px -8px rgba(0,0,0,.6);
  display:flex;flex-direction:column;justify-content:space-between;padding:5px 6px;
  font-family:var(--display);font-size:calc(.86rem * var(--u-scale,1));font-weight:700;line-height:1;
}
.pro-card-face.is-red{color:var(--wine-l)}
.pro-card-face.is-blk{color:var(--ink)}
.pro-card-face b:last-child{align-self:flex-end;transform:rotate(180deg)}

/* what they last said, each line a way back into the conversation */
.pro-said{
  display:block;padding:11px 0;border-bottom:1px dotted var(--line);
  color:inherit;transition:background .18s;
}
.pro-said:last-child{border-bottom:0}
.pro-said:hover{background:rgba(194,161,77,.09)}
.pro-said__w{display:block;font-family:var(--display);font-size:calc(.66rem * var(--u-scale,1));letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}
.pro-said__b{display:block;margin-top:3px;font-size:calc(.98rem * var(--u-scale,1))}

@media(max-width:820px){
  .pro-cols{grid-template-columns:1fr}
  /* height comes from --banner-h, set on .pro */
  .pro-ident{margin-top:-46px}
  .pro-face{width:94px;height:94px}
  .pro-face--init{font-size:calc(1.5rem * var(--u-scale,1))}
}

.pro-acts{margin-top:16px}

/* Faces are doors now, wherever they appear. A hint of lift on hover so it
   reads as pressable without turning the tavern into a page of buttons. */

/* ── their own dressing ─────────────────────────────────────────────────
   The three colours arrive as custom properties on .pro, each already
   matched against a six-digit hex before it left the server. The backdrop
   and arrangement arrive as data attributes chosen from a fixed list, so
   the selectors below are the only shapes that can ever match. */
/* The texture used to live on .pro::before at z-index:-1. Negative-z-index
   descendants are painted before the backgrounds of block-level descendants,
   so .pro's own opaque background went straight over the top and no backdrop
   ever showed. Both belong on .pro itself: the tint as the colour, the
   texture as the image over it. */
.pro{
  position:relative;--banner-h:190px;
  background-color:var(--u-tint,var(--parchment));
  background-repeat:repeat;
  min-height:100vh;
}
.pro[data-backdrop="weave"]{
  background-image:
    repeating-linear-gradient(45deg,rgba(120,90,40,.06) 0 2px,transparent 2px 5px),
    repeating-linear-gradient(-45deg,rgba(120,90,40,.06) 0 2px,transparent 2px 5px);
}
.pro[data-backdrop="timber"]{
  background-image:repeating-linear-gradient(90deg,rgba(90,60,25,.10) 0 46px,rgba(60,40,15,.16) 46px 49px);
}
.pro[data-backdrop="damask"]{
  background-image:
    radial-gradient(circle at 20px 20px,rgba(140,105,45,.14) 0 7px,transparent 8px),
    radial-gradient(circle at 60px 60px,rgba(140,105,45,.14) 0 7px,transparent 8px);
  background-size:80px 80px;
}
.pro[data-backdrop="stars"]{
  background-image:
    radial-gradient(circle at 12% 22%,rgba(120,95,45,.32) 0 1.6px,transparent 2px),
    radial-gradient(circle at 68% 14%,rgba(120,95,45,.28) 0 1.3px,transparent 2px),
    radial-gradient(circle at 38% 72%,rgba(120,95,45,.30) 0 1.5px,transparent 2px),
    radial-gradient(circle at 84% 58%,rgba(120,95,45,.24) 0 1.2px,transparent 2px);
  background-size:220px 220px;
}

/* An uploaded banner covers the gradient. The url arrives as --u-banner, set
   only when there is one, so this class and that property always travel
   together and var() can never fall back to nothing. */
.pro-banner{background-size:cover;background-position:center}
.pro-banner--own{background-image:var(--u-banner);background-color:#160f08}

.pro[data-layout="scroll"] .pro-cols{grid-template-columns:1fr;max-width:700px;margin-inline:auto}
.pro[data-layout="poster"] .pro-cols{grid-template-columns:1fr 300px}
.pro[data-layout="poster"] .pro-rail{order:2}

.pro-motto{margin-top:12px;font-style:italic;color:var(--ink2);font-size:calc(1.06rem * var(--u-scale,1))}
.pro-about{white-space:pre-line}

.pro-sparkle{
  position:fixed;pointer-events:none;z-index:60;width:9px;height:9px;border-radius:50%;
  background:radial-gradient(circle,#fff3c9 0 30%,rgba(255,220,140,.5) 55%,transparent 70%);
  animation:pro-twinkle .9s ease-out forwards;
}
@keyframes pro-twinkle{from{transform:scale(.4);opacity:1}to{transform:scale(1.5) translateY(-16px);opacity:0}}
@media(prefers-reduced-motion:reduce){.pro-sparkle{display:none}}

@media(max-width:820px){
  .pro[data-layout="poster"] .pro-cols{grid-template-columns:1fr}
}

/* ── charms ─────────────────────────────────────────────────────────────
   Hung on the banner, positioned as a percentage of it, so a charm sits in
   the same place on a phone as on a laptop and can never land on top of
   something that has to be read. */
.pro-charms{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.pro-charm{
  position:absolute;transform:translate(-50%,-50%) scale(var(--c-size,1));
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.5));line-height:0;
}
.pro-charm svg{display:block;width:38px;height:38px}
/* The art is drawn in currentColor, so one declaration moves fills and
   strokes together — the key is drawn entirely in strokes and used to ignore
   the colour you picked. */
.pro-charm{color:#e4c77f}
.pro-charm.is-gold{color:#e4c77f}
.pro-charm.is-seal{color:var(--u-seal,var(--wine))}
.pro-charm.is-pale{color:#f7e6ba}
.pro-charm.is-dark{color:#2a1c0e}
@media(max-width:820px){ .pro-charm svg{width:28px;height:28px} }

/* ── their face, their size, their ink ──────────────────────────────────
   The family is looked up on the server from a fixed list and arrives as a
   ready-made stack, so nobody hands us a font-family of their own. The scale
   multiplies the sizes above rather than replacing them, which keeps the
   proportions the page was drawn with. */
.pro,
.pro h1,.pro h2,.pro h3,
.pro .pro-card h2,
.pro .pro-sheet .k,
.pro .pro-pill,
.pro .pro-said__w,
.pro .pro-motto{
  font-family:var(--u-font,var(--serif));
}
.pro,
.pro .pro-ident__words h1,
.pro .pro-about,
.pro .pro-said__b,
.pro .pro-sheet .v{
  color:var(--u-ink,var(--ink));
}

/* ── the wax seal ───────────────────────────────────────────────────────
   Pressed into the corner of the banner, in the colour of your choosing,
   with your initials in it. The irregular border-radius and the pair of
   inset shadows are what stop it reading as a circle: a bright edge where
   the light catches the raised wax, a dark one where it pooled. */
.pro-seal{
  position:absolute;right:30px;top:calc(var(--banner-h,190px) - 26px);z-index:4;
  width:78px;height:78px;display:grid;place-items:center;
  background:
    radial-gradient(circle at 34% 28%,rgba(255,255,255,.30),transparent 46%),
    var(--u-seal,var(--wine));
  border-radius:47% 53% 44% 56% / 52% 45% 55% 48%;
  box-shadow:
    0 10px 20px -9px rgba(0,0,0,.75),
    inset 0 -4px 9px rgba(0,0,0,.38),
    inset 0 3px 7px rgba(255,255,255,.20);
  transform:rotate(-7deg);
}
.pro-seal__mark{
  font-family:var(--u-font,var(--display));
  font-size:calc(1.18rem * var(--u-scale,1));
  font-weight:700;letter-spacing:.05em;
  color:rgba(255,242,224,.86);
  text-shadow:0 1px 0 rgba(0,0,0,.4),0 -1px 0 rgba(255,255,255,.12);
}
@media(max-width:820px){
  .pro{--banner-h:140px}
  .pro-seal{width:60px;height:60px;right:18px;top:calc(var(--banner-h,140px) - 20px)}
  .pro-seal__mark{font-size:calc(.94rem * var(--u-scale,1))}
}

/* ── the scroll people sign ─────────────────────────────────────────────
   Torn scraps pinned to the page, each one edged in the owner's wax colour
   so a scroll reads as belonging to whoever it is on. */
.pro-sign{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.pro-sign input{
  flex:1;min-width:190px;font-family:var(--u-font,var(--serif));
  font-size:calc(.95rem * var(--u-scale,1));padding:10px 12px;
  border:1px solid var(--line2);border-radius:2px;background:#fff;color:var(--ink);
}
.pro-sign input:focus{outline:2px solid var(--u-accent,var(--wine));outline-offset:1px}

.pro-scrap{
  position:relative;
  background:linear-gradient(180deg,#fffdf5,#f6ecd4);
  border:1px solid var(--line);border-left:3px solid var(--u-seal,var(--wine));
  padding:11px 13px;margin-top:11px;border-radius:2px;
  box-shadow:0 6px 16px -14px rgba(0,0,0,.7);
}
.pro-scrap__w{
  font-family:var(--u-font,var(--display));
  font-size:calc(.68rem * var(--u-scale,1));letter-spacing:.13em;text-transform:uppercase;
  color:var(--u-accent,var(--wine));
}
.pro-scrap__w a{color:inherit}
.pro-scrap__w a:hover{text-decoration:underline}
.pro-scrap__when{float:right;color:var(--muted);letter-spacing:.08em}
.pro-scrap__b{margin-top:5px;font-size:calc(.99rem * var(--u-scale,1));color:var(--u-ink,var(--ink))}

/* The strike control keeps out of the way until you go looking for it. */
.pro-scrap__x{position:absolute;right:8px;bottom:6px;opacity:0;transition:opacity .18s}
.pro-scrap:hover .pro-scrap__x,.pro-scrap__x:focus-within{opacity:1}
.pro-scrap__x button{
  font-family:var(--display);font-size:.5rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);background:transparent;border:1px solid var(--line2);
  border-radius:2px;padding:3px 7px;cursor:pointer;
}
.pro-scrap__x button:hover{color:var(--wine);border-color:var(--wine)}

.pro-warn{
  background:#f7e7e7;border:1px solid var(--wine-l);color:var(--wine);
  padding:9px 12px;border-radius:2px;margin-bottom:10px;font-size:.92rem;
}

/* ── dressing the page, on the page ─────────────────────────────────────
   A panel that folds out of the right edge. Only the owner is ever sent it. */
.dress{
  position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:80;
  display:flex;align-items:flex-start;font-family:var(--serif);
}
.dress__tab{
  writing-mode:vertical-rl;text-orientation:mixed;
  background:linear-gradient(180deg,var(--gold-l),var(--gold));
  color:#2a1d0c;border:1px solid var(--gold-d);border-right:0;
  border-radius:4px 0 0 4px;cursor:pointer;
  font-family:var(--display);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;
  padding:16px 7px;box-shadow:-6px 0 18px -12px rgba(0,0,0,.7);
}
.dress__tab:hover{background:var(--gold-l)}

.dress__body{
  display:none;width:min(320px,calc(100vw - 46px));
  max-height:min(84vh,720px);overflow-y:auto;
  background:linear-gradient(180deg,#241a10,#150e07);
  border:1px solid var(--gold-d);border-radius:0 0 0 6px;
  box-shadow:-18px 0 50px -28px rgba(0,0,0,.9);
  padding:16px;color:#eadcb6;
}
.dress[data-open="1"] .dress__body{display:block}

.dress__grp{margin-bottom:14px}
.dress__grp > label,.dress__two label{
  display:block;font-family:var(--display);font-size:.55rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);margin-bottom:6px;
}
.dress input[type=text],.dress input:not([type]),.dress textarea,.dress select,.dress input[type=file]{
  width:100%;font-family:var(--serif);font-size:.9rem;padding:8px 10px;
  border:1px solid rgba(226,199,127,.32);border-radius:3px;
  background:rgba(255,246,225,.06);color:#f2e6c6;
}
.dress textarea{resize:vertical;line-height:1.5}
.dress select option{background:#241a10;color:#f2e6c6}
.dress__two{display:flex;gap:10px}
.dress__two > span{flex:1;min-width:0}

.dress__swatches{display:flex;gap:8px}
.dress__swatches span{flex:1;text-align:center}
.dress__swatches input[type=color]{
  width:100%;height:32px;padding:1px;cursor:pointer;
  border:1px solid rgba(226,199,127,.32);border-radius:3px;background:transparent;
}
.dress__swatches small{display:block;margin-top:4px;font-size:.62rem;color:#a08e6b}

.dress__tray{display:flex;gap:5px;flex-wrap:wrap}
.dress__charm{
  width:38px;height:38px;display:grid;place-items:center;cursor:pointer;
  border:1px solid rgba(226,199,127,.28);border-radius:3px;
  background:rgba(255,240,200,.05);color:var(--gold-l);
}
.dress__charm:hover{border-color:var(--gold-l);background:rgba(255,240,200,.13)}
.dress__charm svg{width:22px;height:22px}

.dress__hint{display:block;margin-top:7px;font-size:.74rem;line-height:1.45;color:#93835f}
.dress__check{display:flex;align-items:center;gap:8px;font-size:.86rem;color:#cbb98f;cursor:pointer;margin-top:8px}
.dress__check input{width:auto;margin:0}
.dress__foot{display:flex;flex-direction:column;gap:7px;margin-top:14px;
  border-top:1px solid rgba(226,199,127,.2);padding-top:13px}
.dress__foot .btn{width:100%}
.dress__state{font-size:.74rem;color:#93835f;text-align:center}

/* Charms only answer the pointer while the panel is open, so a visitor — and
   the owner reading their own page — cannot drag the furniture by accident. */
.pro.is-dressing .pro-charms{pointer-events:none}
.pro.is-dressing .pro-charm{pointer-events:auto;cursor:grab}
.pro.is-dressing .pro-charm.is-held{cursor:grabbing}
.pro.is-dressing .pro-banner{outline:2px dashed rgba(226,199,127,.5);outline-offset:-4px}

@media(max-width:820px){
  .dress{top:auto;bottom:0;transform:none;right:0;left:0;flex-direction:column-reverse;align-items:stretch}
  .dress__tab{writing-mode:horizontal-tb;border-radius:4px 4px 0 0;border-right:1px solid var(--gold-d);padding:11px}
  .dress__body{width:auto;max-height:62vh;border-radius:0}
}

/* A signature wears the signer's face, and the face is a door like every
   other. The wall was computing an avatar and then never drawing it. */
.pro-scrap__head{display:flex;align-items:center;gap:10px;margin-bottom:2px}
.pro-scrap__head .postpic,.pro-scrap__head .postpic--init{
  width:32px;height:32px;flex-shrink:0;border-radius:50%;object-fit:cover;
  border:1px solid var(--line2);
}
.pro-scrap__head .pro-scrap__w{flex:1;min-width:0;margin:0}

/* ── marks ──────────────────────────────────────────────────────────────
   What somebody has actually done, counted from what the site already
   holds. Only earned marks appear, so this block is absent on a page that
   has nothing to show rather than being a column of noughts. */
.pro-marks{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.pro-marks li{
  display:flex;align-items:baseline;gap:9px;
  padding:6px 0;border-bottom:1px dotted var(--line);
}
.pro-marks li:last-child{border-bottom:0}
.pro-marks b{
  min-width:34px;text-align:right;font-family:var(--display);
  font-size:calc(1.05rem * var(--u-scale,1));color:var(--u-accent,var(--wine));
  font-variant-numeric:tabular-nums;
}
.pro-marks li.is-gold b{color:var(--gold-d)}
.pro-marks span{font-size:calc(.86rem * var(--u-scale,1));color:var(--muted)}

/* ── nudges ─────────────────────────────────────────────────────────────
   Little bubbles on your own page, saying what is still missing from it.
   Only the owner is ever sent them, and each goes for good once the thing
   is done. The tail on the left points back at your own portrait — it is
   the page talking to you, not a notice pinned to it. */
.pro-nudges{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.nudge{
  position:relative;flex:1 1 240px;max-width:340px;
  background:var(--ivory);border:1px solid var(--line);
  border-radius:12px 12px 12px 3px;
  padding:13px 15px;
  box-shadow:0 10px 26px -22px rgba(60,40,15,.9);
}
/* the little tail */
.nudge::before{
  content:"";position:absolute;left:-1px;bottom:-9px;width:12px;height:10px;
  background:var(--ivory);
  border-left:1px solid var(--line);border-bottom:1px solid var(--line);
  border-radius:0 0 0 3px;
  transform:skewX(-18deg);
}
.nudge__say{
  font-size:calc(.95rem * var(--u-scale,1));color:var(--ink2);line-height:1.5;
}
.nudge__acts{display:flex;align-items:center;gap:12px;margin-top:10px;flex-wrap:wrap}
.nudge__go{
  font-family:var(--display);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  padding:7px 14px;border-radius:3px;cursor:pointer;white-space:nowrap;
  border:1px solid var(--gold-d);
  background:linear-gradient(180deg,var(--gold-l),var(--gold));color:#2a1d0c;
}
.nudge__go:hover{background:var(--gold-l)}
.nudge__not{
  font-family:var(--serif);font-size:.82rem;color:var(--muted);
  background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;
}
.nudge__not:hover{color:var(--ink2)}
.nudge.is-going{opacity:0;transform:translateY(-6px);transition:opacity .25s,transform .25s}
@media(prefers-reduced-motion:reduce){.nudge.is-going{transition:none}}

/* ── spoken for ─────────────────────────────────────────────────────────
   Who backed a pledge, and — to the Guild Leader alone — what they said. */
.pro-vouchlead{color:var(--ink2);margin-bottom:12px}
.pro-vouchlead b{color:var(--u-accent,var(--wine))}
.pro-vouches{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.pro-vouches li{
  position:relative;display:flex;align-items:flex-start;gap:11px;
  background:linear-gradient(180deg,#fffdf5,#f6ecd4);
  border:1px solid var(--line);border-left:3px solid var(--u-seal,var(--wine));
  border-radius:2px;padding:10px 12px;
}
.pro-vouches .postpic,.pro-vouches .postpic--init{
  width:30px;height:30px;border-radius:50%;object-fit:cover;flex-shrink:0;
  border:1px solid var(--line2);
}
.pro-vouch__who{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.4}
.pro-vouch__who b{font-family:var(--u-font,var(--display));font-size:calc(.82rem * var(--u-scale,1));color:var(--ink)}
.pro-vouch__who b a{color:inherit}
.pro-vouch__who b a:hover{text-decoration:underline}
.pro-vouch__who small{font-size:.7rem;color:var(--muted)}
.pro-vouch__word{
  margin-top:5px;font-size:calc(.9rem * var(--u-scale,1));color:var(--ink2);
  font-style:italic;line-height:1.5;
}
.pro-vouch__x{position:absolute;right:8px;bottom:6px;opacity:0;transition:opacity .18s}
.pro-vouches li:hover .pro-vouch__x,.pro-vouch__x:focus-within{opacity:1}
.pro-vouch__x button{
  font-family:var(--display);font-size:.5rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);background:transparent;border:1px solid var(--line2);
  border-radius:2px;padding:3px 7px;cursor:pointer;
}
.pro-vouch__x button:hover{color:var(--wine);border-color:var(--wine)}
.pro-vouchnote{margin-top:10px;font-size:.82rem;color:var(--muted);font-style:italic}

.pro-vouchform{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.pro-vouchform label{
  display:block;font-family:var(--display);font-size:.58rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--u-accent,var(--wine));margin-bottom:7px;
}
.pro-vouchform input{
  width:100%;font-family:var(--u-font,var(--serif));font-size:calc(.95rem * var(--u-scale,1));
  padding:10px 12px;border:1px solid var(--line2);border-radius:2px;background:#fff;color:var(--ink);
}
.pro-vouchform input:focus{outline:2px solid var(--u-accent,var(--wine));outline-offset:1px}
.pro-vouchform .btn{margin-top:10px}
.pro-vouchform small{display:block;margin-top:8px;font-size:.8rem;color:var(--muted);line-height:1.5}
.pro-vouchmine{margin-top:14px;color:var(--forest);font-weight:600;font-size:.92rem}

/* Adding a picture from the dressing panel, and taking one down again. */
.pro-pics li{position:relative}
.pro-pics__x{position:absolute;top:5px;right:5px;opacity:0;transition:opacity .16s var(--ease)}
.pro-pics li:hover .pro-pics__x,.pro-pics__x:focus-within{opacity:1}
.pro-pics__x button{
  border:0;border-radius:3px;cursor:pointer;padding:4px 8px;
  background:rgba(36,26,16,.88);color:#f5e9c8;
  font-family:var(--display);font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;
}
.pro-pics__x button:hover{background:var(--wine)}
/* A touch screen has no hover, so the control is simply always there. */
@media(hover:none){.pro-pics__x{opacity:1}}

/* Putting a picture up, from your own page. */
.pro-pics__add-form{
  grid-column:1/-1;display:flex;flex-direction:column;gap:8px;
  margin-top:14px;padding-top:14px;border-top:1px solid var(--line);
}
.pro-pics__add-form label{font-family:var(--display);font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--u-accent,var(--wine))}
.pro-pics__add-form input[type=text]{width:100%}
.pro-pics__add-form .btn{align-self:flex-start;padding:7px 16px;font-size:.6rem}
.pro-pics__add-form small{font-size:.78rem;color:var(--muted);line-height:1.5}
.pro-pics__add-form small a{color:var(--u-accent,var(--wine));font-weight:600}

/* ── The purse ──────────────────────────────────────────────────────────────
   Only the owner ever sees this block, so it can afford to be a working
   ledger rather than an ornament: the balance large, the accounts beside it
   small, then the lines themselves in a column that reads like a tally.
   Everything numeric is tabular so the coins line up down the page. */
.purse-sum{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  flex-wrap:wrap;padding-bottom:14px;border-bottom:1px solid var(--line);
}
.purse-sum__now{display:flex;align-items:baseline;gap:9px}
.purse-sum__now b{
  font-family:var(--display);font-size:calc(2.1rem * var(--u-scale,1));line-height:1;
  color:var(--u-accent,var(--wine));font-variant-numeric:tabular-nums;
}
.purse-sum__now span{font-family:var(--display);font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted)}
.purse-sum__side{display:flex;flex-direction:column;gap:3px;text-align:right}
.purse-sum__side span{font-size:.82rem;color:var(--muted)}
.purse-sum__side b{font-variant-numeric:tabular-nums;color:var(--ink)}

.purse-h{
  font-family:var(--display);font-size:calc(.6rem * var(--u-scale,1));
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
  margin:16px 0 8px;
}

.purse-log{list-style:none;margin:0;padding:0}
.purse-log li{
  display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:baseline;
  padding:6px 0;border-bottom:1px dotted var(--line);font-size:.92rem;
}
.purse-log li:last-child{border-bottom:0}
.purse-log__n{
  font-family:var(--display);font-variant-numeric:tabular-nums;
  font-size:.98rem;min-width:2.6em;text-align:right;
}
.purse-log .is-in .purse-log__n{color:var(--forest)}
.purse-log .is-out .purse-log__n{color:var(--wine)}
.purse-log__t{font-size:.76rem;color:var(--muted);white-space:nowrap}
.purse-more{margin-top:9px;font-size:.8rem}

/* The advice. A pill saying what it pays, then the reason in plain words —
   the number first because that is what the eye is hunting for. */
.purse-ways{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.purse-ways li{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start}
.purse-ways__pay{
  font-family:var(--display);font-size:.68rem;letter-spacing:.06em;
  white-space:nowrap;padding:4px 9px;border-radius:2px;
  border:1px solid var(--line2);color:var(--ink2);background:rgba(201,176,122,.14);
  font-variant-numeric:tabular-nums;
}
.purse-ways__say{font-size:.9rem;line-height:1.62;color:var(--ink2)}
.purse-ways .is-warn .purse-ways__pay{border-color:var(--wine);color:var(--wine);background:rgba(139,42,42,.09)}
.purse-ways__go{display:inline-block;margin-left:4px;white-space:nowrap;
  font-weight:600;color:var(--u-accent,var(--wine))}

@media(max-width:620px){
  .purse-sum__side{text-align:left}
  .purse-log li{grid-template-columns:auto 1fr;row-gap:2px}
  .purse-log__t{grid-column:2;font-size:.72rem}
}