/* House of Card and Coin — the stylesheet.

   This file used to be 484 KB and about 3,500 lines, because the whole thing
   had been appended to itself sixteen times over. Every rule existed sixteen
   times; only the last copy of each ever won, and the other fifteen were dead
   weight that made every later fix harder — a change had to be appended to
   out-shout its own earlier copies rather than simply edited where it lived.

   Checked before cutting: every line in all fifteen earlier copies was also
   present in the last, so nothing was lost by keeping only that one. Then
   checked again after, by comparing the computed styles of 2,249 elements
   across ten pages before and after the cut. */
:root{--parchment:#f4ead2;--parchment2:#ecdcb4;--ivory:#fbf6e9;--ink:#241a12;--ink2:#43331f;--muted:#7a6749;--gold:#c2a14d;--gold-l:#e4c77f;--gold-d:#8a6d2a;--wine:#6e1a1a;--wine-l:#8b2a2a;--forest:#2c4a36;--line:#d8c39a;--line2:#c9b07a;--dark:#1a120b;--dark2:#241a10;--maxw:1180px;--display:"Cinzel",Georgia,serif;--serif:"EB Garamond",Georgia,serif;--ease:cubic-bezier(.2,.7,.2,1)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:92px}
body{font-family:var(--serif);color:var(--ink);background:var(--parchment);line-height:1.7;font-size:18px;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;z-index:-1;background:radial-gradient(120% 80% at 10% 0%,rgba(120,90,40,.10),transparent 60%),radial-gradient(120% 80% at 100% 100%,rgba(90,40,20,.10),transparent 60%),repeating-linear-gradient(45deg,rgba(120,90,40,.012) 0 2px,transparent 2px 4px),var(--parchment)}
img{max-width:100%;display:block}a{color:inherit;text-decoration:none}
.container{max-width:var(--maxw);margin:0 auto;padding:0 28px}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.14;letter-spacing:.02em;color:var(--ink)}
h1{font-size:clamp(2.3rem,4.8vw,3.8rem)}h2{font-size:clamp(1.7rem,3.4vw,2.6rem)}h3{font-size:1.25rem;font-weight:600}
.lead{font-size:1.18rem;color:var(--ink2);max-width:62ch;font-style:italic}.center{text-align:center}.center .lead{margin-inline:auto}.muted{color:var(--muted)}
.eyebrow{display:inline-flex;align-items:center;gap:14px;font-family:var(--display);font-size:.74rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-d);font-weight:700;margin-bottom:16px}
.eyebrow::before{content:"";width:30px;height:1px;background:linear-gradient(90deg,var(--gold),transparent)}.center .eyebrow::after{content:"";width:30px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.section{padding:104px 0}.section--parch2{background:var(--parchment2)}.section--dark{background:var(--dark);color:#e9dcc0}
.section--dark h1,.section--dark h2,.section--dark h3{color:#f5e9c8}.section--dark .muted,.section--dark .lead{color:#cdb98f}.section--dark .eyebrow{color:var(--gold-l)}.section--dark .eyebrow::before{background:linear-gradient(90deg,var(--gold-l),transparent)}.section--dark .center .eyebrow::after{background:linear-gradient(90deg,transparent,var(--gold-l))}
.rule{height:2px;margin:18px auto;max-width:240px;background:linear-gradient(90deg,transparent,var(--gold) 20%,var(--gold-l) 50%,var(--gold) 80%,transparent)}
header{position:fixed;left:0;right:0;top:0;z-index:60;transition:background .4s var(--ease),box-shadow .4s;background:rgba(26,18,11,.78);backdrop-filter:blur(8px);border-bottom:1px solid rgba(194,161,77,.35)}
header::before{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,transparent,var(--gold-d) 10%,var(--gold-l) 50%,var(--gold-d) 90%,transparent)}
.nav{display:flex;align-items:center;gap:26px;height:78px;max-width:var(--maxw);margin:0 auto;padding:0 28px}
.brand{display:flex;align-items:center;gap:13px;font-family:var(--display);font-weight:700;font-size:1.12rem;color:#f5e9c8;letter-spacing:.04em;flex-shrink:0}
.brand .crest{height:46px;width:46px;border-radius:50%;object-fit:cover;background:var(--dark);border:2px solid var(--gold)}
.brand small{display:block;font-family:var(--serif);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-l);font-weight:600;font-style:normal;white-space:nowrap;line-height:1.25}
.nav-links{display:flex;gap:24px;margin-left:auto;align-items:center}
.nav-links a{font-family:var(--display);font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(245,233,200,.86);padding:6px 0;position:relative;transition:color .3s}
.nav-links a:hover{color:var(--gold-l)}.nav-links a.active{color:var(--gold-l)}.nav-links a.active::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--gold-l)}
.nav-logout{display:inline-flex;margin-left:10px;padding:0;border:0}.nav-login{margin-left:10px;display:inline-flex;justify-content:center;align-items:center;text-align:center;padding:9px 18px;border-radius:5px;background:linear-gradient(180deg,var(--gold-l),var(--gold));color:var(--dark)!important;border:1px solid var(--gold-d);font-size:.72rem!important;letter-spacing:.14em;box-shadow:0 6px 18px -9px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.25);cursor:pointer;white-space:nowrap}.nav-login:hover{background:var(--gold-l);color:var(--dark)!important}.nav-login.active::after{display:none}.menu-toggle{display:none;background:none;border:0;cursor:pointer;flex-direction:column;gap:5px;padding:6px;margin-left:auto}.menu-toggle span{display:block;width:24px;height:2px;background:var(--gold-l)}
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--display);font-weight:700;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;padding:15px 30px;border-radius:3px;cursor:pointer;border:1px solid transparent;transition:.3s var(--ease)}
.btn--gold{background:linear-gradient(180deg,var(--gold-l),var(--gold));color:var(--dark);border-color:var(--gold-d);box-shadow:0 6px 18px -8px rgba(0,0,0,.5)}.btn--gold:hover{filter:brightness(1.08);transform:translateY(-2px)}
.btn--wine{background:var(--wine);color:#f7e6c8;border-color:var(--wine-l)}.btn--wine:hover{background:var(--wine-l);transform:translateY(-2px)}
.btn--ghost{background:transparent;color:#f5e9c8;border-color:rgba(245,233,200,.45)}.btn--ghost:hover{border-color:var(--gold-l);color:var(--gold-l)}
.btn--outline{background:transparent;color:var(--gold-d);border-color:var(--gold-d)}.btn--outline:hover{background:var(--gold);color:var(--dark)}
.hero{position:relative;min-height:90vh;display:flex;align-items:center;color:#f5e9c8;overflow:hidden}
.hero__bg{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.06);filter:saturate(.9)}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,rgba(18,12,7,.9) 0%,rgba(18,12,7,.6) 42%,rgba(18,12,7,.25) 100%),linear-gradient(180deg,transparent 60%,rgba(18,12,7,.7))}
.hero__inner{position:relative;z-index:3;max-width:720px;padding:120px 0}.hero .eyebrow{color:var(--gold-l)}.hero h1{color:#f8edd1;margin-bottom:18px}.hero .sub{font-size:1.26rem;color:#e6d4a8;margin-bottom:32px;max-width:54ch;font-style:italic}
.hero__cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:36px}.hero__meta{display:flex;gap:14px;flex-wrap:wrap;font-size:.86rem;letter-spacing:.06em;color:#e6d4a8}
.chip{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(228,199,127,.4);padding:8px 16px;border-radius:2px;background:rgba(0,0,0,.25)}.chip b{color:var(--gold-l);font-family:var(--display)}
/* inline-flex outranks the [hidden] default, so a hidden chip stayed on screen
   as an empty gold box. weekend.css patched its own copy; this covers the rest. */
.chip[hidden]{display:none}
.bannerhead{text-align:center;margin-bottom:54px}.bannerhead h2{position:relative;display:inline-block;padding:0 30px}.bannerhead h2::before{content:"\2756";position:absolute;left:-4px;top:50%;transform:translateY(-50%);color:var(--gold);font-size:1rem}.bannerhead h2::after{content:"\2756";position:absolute;right:-4px;top:50%;transform:translateY(-50%);color:var(--gold);font-size:1rem}.bannerhead .eyebrow{justify-content:center}
.grid{display:grid;gap:26px}.grid--3{grid-template-columns:repeat(3,1fr)}.grid--2{grid-template-columns:repeat(2,1fr)}.grid--4{grid-template-columns:repeat(4,1fr)}
.scroll{background:var(--ivory);border:1px solid var(--line2);border-radius:4px;padding:34px;box-shadow:0 22px 44px -28px rgba(60,40,15,.5),inset 0 0 0 1px rgba(255,255,255,.4);position:relative}.scroll::before{content:"";position:absolute;inset:6px;border:1px solid rgba(194,161,77,.35);border-radius:2px;pointer-events:none}.scroll h3{color:var(--wine);margin-bottom:10px}.scroll p{color:var(--ink2)}
.rolecard{background:var(--ivory);border:1px solid var(--line2);border-radius:4px;overflow:hidden;transition:.4s var(--ease);box-shadow:0 16px 34px -24px rgba(60,40,15,.5)}.rolecard:hover{transform:translateY(-6px);box-shadow:0 28px 50px -26px rgba(60,40,15,.6);border-color:var(--gold)}
.rolecard__img{aspect-ratio:4/3;width:100%;object-fit:cover;background:var(--parchment2)}.rolecard__body{padding:26px}.rolecard__body h3{font-family:var(--display);color:var(--wine);margin-bottom:8px}.rolecard__body p{color:var(--ink2);font-size:1.04rem}
.fig{border-radius:4px;overflow:hidden;background:var(--parchment2);position:relative;box-shadow:0 16px 34px -24px rgba(60,40,15,.5);border:1px solid var(--line2)}.fig img{width:100%;height:100%;object-fit:cover;transition:.6s var(--ease)}.fig video{width:100%;height:100%;object-fit:cover;display:block}.fig:hover img{transform:scale(1.05)}.fig figcaption{position:absolute;left:0;right:0;bottom:0;padding:16px;background:linear-gradient(transparent,rgba(20,14,8,.85));color:#f5e9c8;font-family:var(--display);font-size:.95rem;letter-spacing:.04em}
.fig--43{aspect-ratio:4/3}.fig--169{aspect-ratio:16/10}.fig--sq{aspect-ratio:1/1}.fig--34{aspect-ratio:3/4}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:18px}.triple{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.day{background:var(--ivory);border:1px solid var(--line2);border-radius:4px;overflow:hidden;box-shadow:0 18px 38px -26px rgba(60,40,15,.5)}
.day__hd{background:linear-gradient(180deg,var(--dark2),var(--dark));color:var(--gold-l);padding:20px 26px;font-family:var(--display);display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;border-bottom:2px solid var(--gold)}.day__hd .d{font-size:1.3rem;letter-spacing:.06em}.day__hd .h{font-size:.86rem;letter-spacing:.12em;color:#e6d4a8}
.day__bd{padding:26px}.event{display:flex;gap:14px;padding:14px 0;border-bottom:1px dashed var(--line2)}.event:last-child{border-bottom:0}.event .t{font-family:var(--display);color:var(--wine);font-weight:700;min-width:96px;max-width:132px;font-size:.86rem;letter-spacing:.03em;line-height:1.35}.event .b{color:var(--ink2);font-size:1.05rem}.event .b b{color:var(--ink);font-family:var(--display);font-size:1rem}
.callout{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.fact{background:var(--ivory);border:1px solid var(--line2);border-radius:4px;padding:24px;text-align:center;box-shadow:0 14px 30px -24px rgba(60,40,15,.5)}.fact .ic{font-size:1.6rem;color:var(--gold-d)}.fact h2,.fact h3{font-family:var(--display);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--wine);margin:8px 0 4px}.fact p{color:var(--ink2);font-size:1.02rem}
.camp-list{list-style:none;display:flex;flex-direction:column;gap:12px}
/* The diamond used to be a flex sibling of the text, which made a <b> at the
   start of a line its own flex item — so a long bold label got squeezed into
   a narrow column with the rest of the sentence beside it. Positioned instead,
   so each line is one run of text with a hanging bullet. */
.camp-list li{position:relative;padding-left:24px;color:var(--ink2);font-size:1.05rem}
.camp-list li::before{content:"\2666";position:absolute;left:0;top:0;color:var(--gold-d);font-size:.9rem}
.task{background:var(--ivory);border:1px solid var(--line2);border-radius:4px;padding:22px}.task h3,.task h4{font-family:var(--display);color:var(--wine);margin-bottom:6px}.task p{color:var(--ink2)}
.rank{background:var(--ivory);border:1px solid var(--line2);border-left:4px solid var(--gold);border-radius:4px;padding:24px;box-shadow:0 14px 30px -26px rgba(60,40,15,.5)}.rank h3{font-family:var(--display);color:var(--wine);margin-bottom:6px}.rank p{color:var(--ink2)}
.poster{background:#1f160e;border:2px solid var(--gold);border-radius:6px;padding:40px;color:#f5e9c8;position:relative;box-shadow:0 30px 60px -30px rgba(0,0,0,.7)}.poster h2,.poster h3{font-family:var(--display);color:var(--gold-l);font-size:2.2rem;letter-spacing:.06em;text-align:center}.poster .stamp{position:absolute;top:18px;right:18px;border:3px solid var(--wine-l);color:var(--wine-l);padding:6px 14px;border-radius:4px;font-family:var(--display);font-size:.78rem;letter-spacing:.16em;transform:rotate(8deg)}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}.info-list{list-style:none;display:flex;flex-direction:column;gap:22px}.info-list li{display:flex;gap:16px;align-items:flex-start}.info-list .ic{width:48px;height:48px;border-radius:4px;background:var(--parchment2);border:1px solid var(--line2);color:var(--gold-d);display:grid;place-items:center;font-size:1.3rem;flex-shrink:0}.info-list h3,.info-list h4{font-family:var(--display);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--wine);margin-bottom:4px}.info-list .val{font-size:1.08rem}
.form{background:var(--ivory);border:1px solid var(--line2);border-radius:4px;padding:32px;box-shadow:0 22px 44px -28px rgba(60,40,15,.5)}.field{margin-bottom:18px}.field label{display:block;font-family:var(--display);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--wine);margin-bottom:7px}.field input,.field textarea,.field select{width:100%;padding:12px 14px;border:1px solid var(--line2);border-radius:3px;font-family:var(--serif);font-size:1.04rem;background:var(--parchment);color:var(--ink)}.field input:focus,.field textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(194,161,77,.2)}.field textarea{min-height:130px;resize:vertical}
.cta{display:grid;grid-template-columns:1.5fr 1fr;gap:40px;align-items:center}.cta h2{color:#f5e9c8}.cta p{color:#cdb98f;margin-top:12px}.cta__actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:flex-end}
.pagehero{position:relative;color:#f5e9c8;padding:130px 0 80px;overflow:hidden}.pagehero__bg{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.06);filter:saturate(.9)}.pagehero::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(18,12,7,.84) 0%,rgba(18,12,7,.5) 55%,rgba(18,12,7,.35) 100%)}.pagehero__inner{position:relative;z-index:2;max-width:780px}.pagehero .eyebrow{color:var(--gold-l)}.pagehero h1{color:#f8edd1}.pagehero p{color:#e6d4a8;font-size:1.2rem;margin-top:16px;max-width:62ch;font-style:italic}
footer{background:var(--dark);color:#bfa980;padding:64px 0 30px;border-top:2px solid var(--gold-d)}.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:38px;margin-bottom:44px}footer h3{color:#f5e9c8;font-family:var(--display);font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;margin-bottom:16px}footer ul{list-style:none;display:flex;flex-direction:column;gap:11px}footer a{color:#bfa980}footer a:hover{color:var(--gold-l)}.footer-brand p{margin-top:14px;color:#9d8a62;font-size:.96rem;max-width:42ch}.footer-bottom{border-top:1px solid #2e2316;padding-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:.86rem;color:#8a774f}.footer-brand .crest{height:54px;width:54px;border-radius:50%;border:2px solid var(--gold);object-fit:cover}
@media(max-width:980px){.grid--4,.grid--3{grid-template-columns:repeat(2,1fr)}.pair,.triple,.contact-grid,.cta{grid-template-columns:1fr;gap:30px}.callout{grid-template-columns:1fr}.cta__actions{justify-content:flex-start}.footer-grid{grid-template-columns:1fr 1fr}.nav-links{display:none;position:fixed;top:78px;left:0;right:0;flex-direction:column;gap:0;background:var(--dark);padding:12px 28px 26px;border-bottom:1px solid var(--gold-d)}.nav-links.open{display:flex}.nav-links a{padding:14px 0;border-bottom:1px solid #2e2316;font-size:.8rem}.nav-links a.active::after{display:none}.nav-links .nav-login{align-self:center;margin:16px 0 8px;padding:11px 26px;border-bottom:none;width:auto}.nav-links a.active::after{display:none}.nav-logout{display:inline-flex;margin-left:10px;padding:0;border:0}.nav-login{margin-left:10px;display:inline-flex;justify-content:center;align-items:center;text-align:center;padding:9px 18px;border-radius:5px;background:linear-gradient(180deg,var(--gold-l),var(--gold));color:var(--dark)!important;border:1px solid var(--gold-d);font-size:.72rem!important;letter-spacing:.14em;box-shadow:0 6px 18px -9px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.25);cursor:pointer;white-space:nowrap}.nav-login:hover{background:var(--gold-l);color:var(--dark)!important}.nav-login.active::after{display:none}.menu-toggle{display:flex}}
@media(max-width:620px){body{font-size:17px}.section{padding:68px 0}.grid--2,.grid--3,.grid--4,.pair,.triple{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr}.hero{min-height:84vh}.day__hd{flex-direction:column;align-items:flex-start;gap:4px}}

/* Pigeon medallion */
.medallion{width:132px;height:132px;border-radius:50%;background:var(--parchment);border:3px solid var(--gold);box-shadow:0 0 0 5px rgba(194,161,77,.22),0 18px 36px -16px rgba(0,0,0,.6);display:grid;place-items:center;font-size:62px;margin:0 auto 24px;position:relative}
.medallion .scroll{position:absolute;right:22px;bottom:20px;font-size:30px;transform:rotate(12deg);filter:drop-shadow(0 2px 2px rgba(0,0,0,.3))}
.pagehero .medallion{box-shadow:0 0 0 5px rgba(194,161,77,.22),0 18px 40px -14px rgba(0,0,0,.7);margin-top:70px}

.hero video.hero__bg{width:100%;height:100%;object-fit:cover;background:transparent}
.roster{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.member{text-align:center;background:var(--ivory);border:1px solid var(--line2);border-radius:4px;padding:26px 18px;box-shadow:0 14px 30px -26px rgba(60,40,15,.5)}
.member--lead{border-color:var(--gold);box-shadow:0 16px 34px -24px rgba(60,40,15,.55)}
.member--tba{border-style:dashed}
.member .avatar{width:84px;height:84px;border-radius:50%;background:linear-gradient(180deg,var(--gold-l),var(--gold));color:var(--dark);display:grid;place-items:center;margin:0 auto 14px;font-family:var(--display);font-weight:700;font-size:1.5rem;border:2px solid var(--gold-d)}
.member--lead .avatar{background:var(--wine);color:var(--gold-l)}
.member--tba .avatar{background:var(--parchment2);color:var(--muted);border-style:dashed}
.member h3{font-size:1.08rem;color:var(--ink);margin-bottom:4px}
.member .role{font-family:var(--display);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-d)}
.member--tba h3,.member--tba .role{color:var(--muted)}
@media(max-width:760px){.roster{grid-template-columns:repeat(2,1fr)}}

.article{margin:16px 0;padding:18px 22px;border-left:3px solid var(--gold);background:rgba(255,255,255,.05);border-radius:0 4px 4px 0}
.article h2,.article h3,.article h4{font-family:var(--display);color:var(--gold-l);margin-bottom:6px;letter-spacing:.04em}
.article p{color:#e6d4a8}

.pagehero video.pagehero__bg{width:100%;height:100%;object-fit:cover;background:transparent}

/* guild page: damask backdrop + roster extras */
body.guild-page{background:linear-gradient(105deg,rgba(26,18,11,.82) 0%,rgba(26,18,11,.6) 55%,rgba(26,18,11,.8) 100%),url('/assets/img/damask-v4.jpg') center/cover;background-attachment:fixed;color:#e9dcc2}body.guild-page::before{display:none}body.guild-page .section--parch2{background:transparent}body.guild-page .section h2{color:#f5e9c8}body.guild-page .lead,body.guild-page .section > .container > p{color:#e9dcc2}body.guild-page .muted{color:#c2ad7e}body.guild-page .muted a{color:var(--gold-l)}body.guild-page .member,body.guild-page .rank,body.guild-page .scroll,body.guild-page .day{color:var(--ink)}body.guild-page .member h3,body.guild-page .rank h4,body.guild-page .scroll h3{color:var(--ink)}
.member__avatar{width:84px;height:84px;border-radius:50%;border:2px solid var(--gold);object-fit:cover;margin:0 auto 14px;display:block}
.member--lead .member__avatar{border-color:var(--wine)}

/* ── Leading the round, on the roster ──────────────────────────────────────
   A ribbon pinned across the bottom of the face. It sits in normal flow with
   a negative top margin rather than absolutely, so it works over both kinds of
   portrait — the photograph and the drawn initials are the same 84px circle —
   and cannot drift if either ever changes size.

   The glow rather than a border colour: the Guild Leader already owns the
   avatars border, and the two marks have to be able to land on the same
   person without fighting over it. */
.member--ace .member__avatar,.member--ace .avatar{
  box-shadow:0 0 0 3px rgba(226,199,127,.5),0 0 22px -4px rgba(201,160,45,.75);
}
.member__ace{
  /* Block rather than inline-block: an inline-level box takes its negative
     top margin against the line box it sits in, which left the ribbon resting
     under the portrait instead of across it. A block honours it against the
     avatar directly. width:max-content keeps it shrink-wrapped so the auto
     margins still centre it. */
  position:relative;z-index:2;display:block;width:max-content;max-width:100%;
  margin:-18px auto 12px;padding:3px 11px;border-radius:2px;
  background:linear-gradient(180deg,#8a6d2a,#6d541f);
  border:1px solid var(--gold-l);color:#fdf3d6;
  font-family:var(--display);font-size:.58rem;letter-spacing:.11em;text-transform:uppercase;
  white-space:nowrap;box-shadow:0 4px 10px -5px rgba(40,26,8,.9);
}
/* The avatar keeps its own 14px gap under it; the ribbon takes that over. */
.member--ace .member__avatar,.member--ace .avatar{margin-bottom:0}
.member__faires,.member__bunks{display:block;font-family:var(--serif);color:var(--muted);font-size:.82rem;margin-top:7px}
.member__bunks{font-style:italic;font-size:.78rem}
.member h3{margin-bottom:2px}
/* contact form status */
.alert{padding:14px 18px;border-radius:5px;margin-top:18px;font-family:var(--serif);font-size:.96rem}.alert--ok{background:rgba(44,74,54,.12);border:1px solid var(--forest);color:#22402b}.alert--bad{background:rgba(110,26,26,.12);border:1px solid var(--wine);color:var(--wine)}
.member__coming{display:inline-block;margin-top:8px;padding:3px 10px;border-radius:999px;background:rgba(44,74,54,.14);border:1px solid var(--forest);color:#22402b;font-family:var(--display);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase}

/* ===== The Tavern: public notice board + polls ===== */
body.tavern-page{background:linear-gradient(105deg,rgba(36,26,16,.9),rgba(26,18,11,.86)),url('/assets/img/damask-v4.jpg') center/cover fixed;color:#e9dcc2}
body.tavern-page::before{display:none}
body.tavern-page h2{color:#f8edd1}
body.tavern-page .lead{color:#e9dcc2;max-width:none}
body.tavern-page .muted{color:#cdb98f}
/* Pale gold, for links reading as links on the dark ground. NOT for buttons:
   this rule out-specifies .btn--gold (0,2,1 against 0,1,0), so "Write a
   letter" was pale gold text sitting on a pale gold button and all but
   invisible. Every gold or wine button rendered as an <a> on one of these
   pages had the same problem. */
body.tavern-page a:not(.btn){color:var(--gold-l)}
.note{background:var(--ivory);color:var(--ink);border:1px solid var(--line2);border-radius:4px;padding:24px;box-shadow:0 22px 44px -28px rgba(60,40,15,.5),inset 0 0 0 1px rgba(255,255,255,.4);position:relative}
.note::before{content:"";position:absolute;inset:6px;border:1px solid rgba(194,161,77,.3);border-radius:2px;pointer-events:none}
.postpic{width:54px;height:54px;border-radius:50%;object-fit:cover;border:2px solid var(--gold-d);flex-shrink:0}
.postpic--init{background:linear-gradient(180deg,var(--gold-l),var(--gold));color:var(--dark);display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:1.05rem}
.pollbar{height:14px;border-radius:3px;background:linear-gradient(90deg,var(--gold),var(--gold-l));transition:width .4s var(--ease)}
.tag{display:inline-block;font-family:var(--display);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-d);background:rgba(194,161,77,.14);border:1px solid rgba(194,161,77,.4);padding:3px 9px;border-radius:2px}
.compose{background:rgba(251,246,233,.97);color:var(--ink);border-radius:4px;padding:26px;border:1px solid var(--line2)}
.compose h3{color:var(--wine)}
.compose .field input,.compose .field textarea,.compose .field select{background:#fff;color:var(--ink)}
@media(max-width:620px){.postpic{width:46px;height:46px}}

/* ===== Camp map (X marks the RV campsite) ===== */
.campmap{max-width:900px;margin:0 auto}
.campmap__fig{position:relative;margin:0;border:1px solid var(--line2);border-radius:4px;overflow:hidden;box-shadow:0 22px 44px -28px rgba(60,40,15,.5),inset 0 0 0 1px rgba(255,255,255,.4)}
.campmap__fig img{display:block;width:100%;height:auto}
.campmap__x{position:absolute;transform:translate(-50%,-50%);width:48px;height:48px;pointer-events:none}
.campmap__x::before,.campmap__x::after{content:"";position:absolute;left:50%;top:50%;width:48px;height:7px;background:#e23b2e;box-shadow:0 2px 4px rgba(0,0,0,.5);transform:translate(-50%,-50%) rotate(45deg);border-radius:2px}
.campmap__x::after{transform:translate(-50%,-50%) rotate(-45deg)}
.campmap__label{position:absolute;transform:translate(-50%,34px);background:#e23b2e;color:#fff;font-family:var(--display);font-size:.72rem;letter-spacing:.04em;padding:5px 10px;border-radius:3px;white-space:nowrap;box-shadow:0 6px 16px -6px rgba(0,0,0,.6);pointer-events:none}
@media(max-width:620px){.campmap__x{width:34px;height:34px}.campmap__x::before,.campmap__x::after{width:34px;height:5px}.campmap__label{font-size:.58rem;padding:3px 7px}}

/* ===== Tavern scene & tack board ===== */
.tavern-band{margin-top:80px;background:#241a10}
.tavern-scene{display:block;width:100%;height:clamp(190px,30vw,330px);background:#2a1a10}
.tavern-scene .lantern{animation:flick 3.2s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.tavern-scene .lantern.b{animation-duration:3.7s;animation-delay:.5s}
@keyframes flick{0%,100%{opacity:.92}45%{opacity:.7}70%{opacity:.97}}
.ticker{overflow:hidden;white-space:nowrap;background:linear-gradient(180deg,#2a1a10,#241a10);border-top:1px solid #5a3a22;border-bottom:1px solid #5a3a22}
.ticker__track{display:inline-block;padding:9px 0;animation:tk 36s linear infinite;font-family:var(--display);color:#e4c77f;letter-spacing:.06em;font-size:.82rem}
.ticker__track .tk{margin-right:48px}
@keyframes tk{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.ticker__track{animation:none}.tavern-scene .lantern{animation:none}}
.tackboard{position:relative;background:repeating-linear-gradient(90deg,#3a2416 0 64px,#332014 64px 128px);padding:34px 22px 14px;margin-top:10px;border-radius:6px;border:1px solid #5a3a22;box-shadow:inset 0 0 50px rgba(0,0,0,.55)}
.tackboard .note{transform:rotate(-.6deg);margin-bottom:20px}
.tackboard .note:nth-child(even){transform:rotate(.7deg)}
.tackboard .note::after{content:"";position:absolute;top:-9px;left:50%;width:15px;height:15px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#e4503e,#7a1208);box-shadow:0 2px 3px rgba(0,0,0,.55);transform:translateX(-50%);z-index:2}
@media(max-width:620px){.tackboard{padding:24px 12px 10px}.ticker__track{font-size:.74rem}.ticker__track .tk{margin-right:30px}}

.tavern-scene .sway{animation:sway 6s ease-in-out infinite;transform-box:fill-box;transform-origin:top center}
@keyframes sway{0%,100%{transform:rotate(-2.2deg)}50%{transform:rotate(2.2deg)}}
@media(prefers-reduced-motion:reduce){.tavern-scene .sway{animation:none}}

/* ===== Tavern interactions: toasts, ration, wanted posters ===== */
.toasts{margin-top:12px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.toasts__form{display:flex;gap:8px;flex-wrap:wrap;margin:0}
.toast{display:inline-flex;align-items:center;gap:6px;background:var(--parchment);border:1px solid var(--line2);border-radius:999px;padding:5px 12px;font-size:.84rem;color:var(--ink2);cursor:pointer;line-height:1}
.toast b{font-family:var(--display);color:var(--wine);font-size:.78rem}
.toast span{font-size:1rem;line-height:1}
.toast--mine{border-color:var(--gold);background:rgba(194,161,77,.2)}
.toast--off{opacity:.85;cursor:default}
.toast:hover{border-color:var(--gold)}
.toast__hint{font-size:.76rem;color:var(--muted);margin-left:4px}
.rationshow__card{background:var(--parchment);border:1px dashed var(--gold-d);border-radius:5px;padding:14px 16px}
.rationshow__card b{font-family:var(--display);color:var(--wine);font-size:1.08rem}
.wanted{position:relative;background:var(--ivory);border:1px solid var(--line2);border-radius:4px;padding:30px 18px 18px;text-align:center;box-shadow:0 22px 44px -28px rgba(60,40,15,.5),inset 0 0 0 1px rgba(255,255,255,.4)}
.wanted::before{content:"";position:absolute;inset:6px;border:1px solid rgba(194,161,77,.35);border-radius:2px;pointer-events:none}
.wanted__stamp{font-family:var(--display);font-weight:700;letter-spacing:.18em;color:var(--wine);border:2px solid var(--wine);padding:4px 12px;display:inline-block;border-radius:2px;font-size:.82rem;transform:rotate(-3deg);margin-bottom:14px}
.wanted__portrait{display:flex;justify-content:center;margin-bottom:10px}
.wanted .postpic{width:88px;height:88px;border-width:3px}
.wanted .postpic--init{font-size:1.5rem}
.wanted__name{font-family:var(--display);color:var(--ink);margin:0;font-size:1.1rem}
.wanted__title{font-family:var(--display);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-d);margin-top:5px}
.wanted__bounty{margin-top:12px;font-family:var(--display);font-size:.86rem;color:var(--ink2);letter-spacing:.04em}
.wanted__bounty b{color:var(--wine);font-size:1.15rem}
.wanted__deeds{list-style:none;padding:0;margin:12px 0 0;font-size:.82rem;color:var(--muted);text-align:center}
.wanted__deeds li{margin:3px 0}
@media(max-width:620px){.wanted .postpic{width:74px;height:74px}}

.note__title{color:var(--wine);font-family:var(--display);font-size:1.12rem;text-decoration:underline;text-underline-offset:3px}
.note__title:hover{color:var(--gold-l)}
.note__open{font-family:var(--serif);font-size:.66rem;font-weight:600;letter-spacing:.04em;color:var(--gold-d);text-decoration:none;margin-left:4px}
.note__title:hover .note__open{color:var(--gold-l)}

/* ===== tavern readability: darken text on the ivory note/compose cards ===== */
body.tavern-page .compose{color:#2a1d12}
body.tavern-page .compose p{color:#3a2a18}
body.tavern-page .compose .muted{color:#6a5535}
body.tavern-page .note .muted{color:#6a5535}
body.tavern-page .note__open{color:#6b4a2a}
body.tavern-page .toast__hint{color:#6a5535}
body.tavern-page .wanted__deeds{color:#6a5535}
body.tavern-page .wanted__title{color:#6b4a2a}

/* note title link: beat the tavern-page link color so it is dark/readable */
body.tavern-page .note__title{color:var(--wine);font-family:var(--display);font-size:1.12rem;text-decoration:underline;text-underline-offset:3px}
body.tavern-page .note__title:hover{color:#8b2a2a}
body.tavern-page .note__open{color:#5a4226}

.countdown{max-width:680px;margin:0 auto 18px;text-align:center;font-family:var(--display);font-size:1rem;letter-spacing:.04em;color:#f8edd1;background:rgba(110,26,26,.32);border:1px solid rgba(228,199,127,.4);border-radius:4px;padding:12px 16px}
.countdown b{color:var(--gold-l);font-size:1.2rem}
.whisper-row{display:flex;gap:14px;align-items:center;background:var(--ivory);border:1px solid var(--line2);border-radius:4px;padding:14px 16px;margin-bottom:12px;text-decoration:none;box-shadow:0 14px 30px -26px rgba(60,40,15,.5)}
.whisper-row:hover{border-color:var(--gold)}
.whisper-row .postpic{width:44px;height:44px}
.whisper-unread{background:var(--wine);color:#f7e6c8;border-radius:999px;font-family:var(--display);font-size:.72rem;padding:3px 10px}
.whisper-thread{display:flex;flex-direction:column;gap:10px}
.whisper-msg{max-width:80%;background:var(--ivory);border:1px solid var(--line2);border-radius:10px;padding:10px 14px}
.whisper-msg p{margin:0;color:var(--ink2);white-space:pre-wrap}
.whisper-msg .muted{font-size:.72rem;display:block;margin-top:4px}
.whisper-msg--me{background:rgba(194,161,77,.18);border-color:var(--gold-d)}
.whisper-btn{padding:6px 14px;font-size:.66rem;margin-top:12px}

/* ── Mobile navigation fix ───────────────────────────────────────────────
   .brand carried flex-shrink:0 at 360px wide inside a 319px content box, so
   it overflowed and pushed .menu-toggle (margin-left:auto) out to x=414-450 —
   off-screen on every phone. With .nav-links hidden below 980px, that left
   phones with no way to navigate at all. Let the brand shrink and drop the
   tagline on small screens so the hamburger stays reachable. */
@media (max-width:479px){
  .brand{flex-shrink:1;min-width:0}
  .brand small{display:none}
  .brand span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

/* ═══ The Tavern — a room, not a notice board ══════════════════════════════
   Committed to night on purpose: this section is dark even though the rest of
   the site is parchment. The stage stays pinned while the talk scrolls past. */
/* The room is a direct child of <main>, which already spans the page, so the
   usual full-bleed pull was never needed — and it was doing harm. 50vw counts
   the scrollbar and 50% does not, so the difference (the scrollbar's width)
   pushed the room past the right edge and gave the Tavern a sideways scrollbar
   nothing could be reached with. Percentages throughout: the padding now
   resolves against the same box the width does, so the column lands on exactly
   1000px instead of 1000-minus-a-scrollbar. */
.tav{--tav-scrap:#f2e6c8;--tav-smoke:#bfa980;
  background:#120c07;color:#efe0be;margin:0;
  padding:0 max(18px,calc(50% - 500px));min-height:100vh}
.tav *{box-sizing:border-box}

.tav-stage{position:sticky;top:78px;z-index:20;padding-top:14px;
  background:linear-gradient(to bottom,#120c07 0 90%,rgba(18,12,7,0))}

.tav-room{position:relative;width:100%;height:clamp(210px,32vh,290px);
  border:1px solid #4a3820;border-radius:3px;overflow:hidden;background:#0e0905;
  box-shadow:0 30px 70px -46px #000,inset 0 0 80px 26px rgba(0,0,0,.72)}
.tav-wall{position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(0,0,0,.6) 0,transparent 26%,transparent 60%,rgba(0,0,0,.7) 100%),
    repeating-linear-gradient(90deg,#2a1d10 0 62px,#241909 62px 64px,#2e2013 64px 126px,#241909 126px 128px),#241909}
.tav-beam{position:absolute;left:0;right:0;top:0;height:9%;
  background:linear-gradient(to bottom,#1a1208,#100b05);border-bottom:2px solid #0a0704;
  box-shadow:0 6px 18px -6px #000}
.tav-floor{position:absolute;left:0;right:0;bottom:0;height:28%;
  background:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,.85)),
    repeating-linear-gradient(90deg,#33240f 0 90px,#2a1d0c 90px 93px);border-top:1px solid #0d0904}
.tav-fx{position:absolute;inset:0;width:100%;height:100%;display:block}
.tav-hearth{position:absolute;left:50%;transform:translateX(-50%);bottom:27%;
  width:96px;height:104px;background:linear-gradient(to bottom,#3b2c18,#1c1409);
  border:2px solid #14100a;border-radius:52% 52% 5% 5%;box-shadow:inset 0 -14px 30px -8px #000}
.tav-hearth::after{content:"";position:absolute;left:16%;right:16%;bottom:0;height:62%;
  background:radial-gradient(70% 100% at 50% 100%,#75340c,#200f04 72%,#120902);border-radius:50% 50% 3% 3%}
.tav-lantern{position:absolute;top:9%;width:16px;height:25px;
  background:linear-gradient(#5c4620,#2a1d0c);border:1px solid #6b5124;border-radius:3px}
.tav-lantern::after{content:"";position:absolute;inset:3px;border-radius:2px;
  background:radial-gradient(circle at 50% 40%,#e4c77f,#a8791f 60%,transparent 78%);
  animation:tavLamp 3.6s cubic-bezier(.2,.7,.2,1) infinite alternate}
.tav-lantern--l{left:13%}
.tav-lantern--r{right:13%}
.tav-lantern--r::after{animation-delay:-1.4s}
@keyframes tavLamp{from{opacity:.6}to{opacity:1}}

.tav-folk{position:absolute;inset:0}
.tav-body{position:absolute;transform:translateX(-50%);display:flex;flex-direction:column;
  align-items:center;text-decoration:none;
  animation:tavIdle 5.5s cubic-bezier(.2,.7,.2,1) infinite alternate}
@keyframes tavIdle{from{transform:translateX(-50%) translateY(0)}to{transform:translateX(-50%) translateY(-3px)}}
.tav-body:focus-visible{outline:2px solid var(--gold);outline-offset:5px;border-radius:6px}
.tav-head{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;object-fit:cover;
  font-family:var(--display);font-size:.62rem;font-weight:700;color:#241a0c;
  background:linear-gradient(150deg,#e4c77f,#8a6d2a);
  box-shadow:0 0 0 1px #0d0904,0 0 18px -4px rgba(226,190,110,.45)}
.tav-cloak{width:56px;height:40px;margin-top:-8px;
  background:linear-gradient(to bottom,#3a2a14,#1a1208);
  border-radius:50% 50% 12% 12%/70% 70% 14% 14%;box-shadow:inset 0 6px 14px -8px rgba(255,214,140,.25)}
.tav-body.is-me .tav-head{background:linear-gradient(150deg,#b45050,var(--wine));color:#f7e6c6}
.tav-body.is-me .tav-cloak{background:linear-gradient(to bottom,#5a1d1d,#2a0f0f)}
.tav-plate{margin-top:5px;font-family:var(--display);text-transform:uppercase;letter-spacing:.1em;
  font-size:.46rem;color:var(--tav-smoke);white-space:nowrap;text-shadow:0 1px 4px #000}
.tav-body[data-depth=far]{filter:brightness(.74)}
.tav-body[data-depth=far] .tav-head{width:28px;height:28px;font-size:.54rem}
.tav-body[data-depth=far] .tav-cloak{width:46px;height:33px}
.tav-empty{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);width:82%;
  text-align:center;color:var(--tav-smoke);font-size:.9rem;text-shadow:0 1px 6px #000}

.tav-strip{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px;padding:9px 14px;
  background:var(--dark2);border:1px solid #3e2f18;border-radius:3px;font-size:.8rem;color:var(--tav-smoke)}
.tav-dot{width:7px;height:7px;border-radius:50%;background:var(--forest);
  box-shadow:0 0 8px 1px rgba(70,140,95,.7);flex-shrink:0}
.tav-special{flex:1;min-width:190px}
.tav-gates b{color:#f0e2c0}
.tav-purse{margin-left:auto;display:flex;align-items:center;gap:6px;white-space:nowrap;
  color:var(--gold-l);text-decoration:none;font-variant-numeric:tabular-nums}
.tav-coin{width:17px;height:17px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 34% 30%,#e4c77f,#8a6d2a);color:#3a2a08;
  font-size:.55rem;font-weight:700;font-family:var(--display)}

.tav-doors{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:8px}
.tav-doors a,.tav-doors button{font-family:var(--display);text-transform:uppercase;letter-spacing:.12em;
  font-size:.56rem;color:var(--tav-smoke);text-decoration:none;border:1px solid #3e2f18;
  background:transparent;border-radius:2px;padding:6px 11px;cursor:pointer;
  transition:border-color .2s,color .2s}
.tav-doors a:hover,.tav-doors button:hover{border-color:var(--gold-d);color:#f0e2c0}
.tav-pip{background:var(--wine);color:#f6e7c4;border-radius:9px;padding:0 5px;font-size:.55rem}

.tav-err{margin:12px 0 0;padding:10px 14px;border:1px solid var(--wine-l);border-left:3px solid var(--wine);
  background:rgba(110,26,26,.18);color:#f0d8d8;border-radius:2px;font-size:.88rem}

/* ── the record ─────────────────────────────────────────────────────────── */
.tav-log{display:flex;flex-direction:column;gap:16px;padding:22px 0 14px}
.tav-bare{color:var(--tav-smoke)}
.tav-mark{display:flex;align-items:center;gap:13px;color:var(--tav-smoke)}
.tav-mark::before,.tav-mark::after{content:"";flex:1;height:1px;background:rgba(138,109,42,.42)}
.tav-mark span{font-family:var(--display);text-transform:uppercase;letter-spacing:.16em;
  font-size:.56rem;white-space:nowrap}

.tav-said{display:flex;gap:11px;align-items:flex-start}
.tav-said.is-me{flex-direction:row-reverse}
.tav-face{width:34px;height:34px;flex-shrink:0;border-radius:50%;display:grid;place-items:center;
  object-fit:cover;font-family:var(--display);font-size:.6rem;font-weight:700;color:#241a0c;
  background:linear-gradient(150deg,#e4c77f,#8a6d2a);box-shadow:0 0 0 1px #0d0904}
.tav-face--sm{width:26px;height:26px;font-size:.52rem}
.tav-said.is-me>.tav-face{background:linear-gradient(150deg,#b45050,var(--wine));color:#f7e6c6}
.tav-col{max-width:74%;min-width:0;flex:1}
.tav-col--wide{max-width:100%}
.tav-who{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;margin:0 0 4px 3px;
  font-size:.72rem;color:var(--tav-smoke)}
.tav-said.is-me>.tav-col>.tav-who{justify-content:flex-end}
.tav-who b{font-family:var(--display);text-transform:uppercase;letter-spacing:.07em;
  font-size:.62rem;color:#eaddba;font-weight:700}
.tav-tag{font-family:var(--display);text-transform:uppercase;letter-spacing:.09em;font-size:.48rem;
  padding:1px 6px;border-radius:2px;border:1px solid var(--gold-d);color:var(--gold-d)}
.tav-when{font-variant-numeric:tabular-nums;font-size:.68rem;opacity:.72}

/* torn parchment, not a chat pill */
.tav-scrap{background:var(--tav-scrap);color:#2a1d0c;border:1px solid #b99a55;
  border-radius:13px 3px 13px 3px;padding:10px 14px;box-shadow:0 12px 26px -20px #000}
.tav-scrap p{margin:0;white-space:pre-wrap}
.tav-title{display:block;font-family:var(--display);font-size:.95rem;letter-spacing:.02em;
  color:#3a2a10;margin-bottom:3px}
.tav-said.is-me>.tav-col>.tav-scrap{background:#5f1717;color:#f7e7c8;border-color:var(--wine-l);
  border-radius:3px 13px 3px 13px}
.tav-said.is-me>.tav-col>.tav-scrap .tav-title{color:#f3dcb4}
.tav-scrap--reply{border-radius:10px 3px 10px 3px;padding:8px 12px;font-size:.94rem}

.tav-reply{display:flex;gap:9px;margin:9px 0 0 16px;padding-left:12px;
  border-left:1px solid rgba(138,109,42,.35)}
.tav-reply>div{min-width:0;flex:1}
.tav-reply.is-me .tav-scrap--reply{background:#5f1717;color:#f7e7c8;border-color:var(--wine-l)}

.tav-acts{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:9px}
.tav-replyform{display:flex;gap:6px;flex:1;min-width:200px}
.tav-replyform input{flex:1;min-width:0;background:var(--dark2);border:1px solid #3e2f18;border-radius:2px;
  color:#f2e6c9;font-family:var(--serif);font-size:.88rem;padding:7px 11px}
.tav-replyform input::placeholder{color:#8a7856;font-style:italic}
.tav-replyform input:focus{outline:none;border-color:var(--gold-d)}
.tav-replyform button,.tav-open,.tav-del,.tav-cta{font-family:var(--display);text-transform:uppercase;
  letter-spacing:.12em;font-size:.55rem;border-radius:2px;padding:7px 11px;cursor:pointer;
  text-decoration:none;border:1px solid #3e2f18;background:transparent;color:var(--tav-smoke)}
.tav-replyform button{border-color:var(--wine-l);background:var(--wine);color:#f6e7c4}
.tav-replyform button:hover{background:var(--wine-l)}
.tav-open:hover,.tav-cta:hover{border-color:var(--gold-d);color:#f0e2c0}
.tav-del{border-color:#5a2020;color:#c98a8a}
.tav-del:hover{background:rgba(110,26,26,.25)}

/* ── cards: polls and the ration, inside the conversation ───────────────── */
.tav-card{background:var(--dark2);border:1px solid #4a3820;border-radius:3px;padding:15px 17px}
.tav-card h3{font-family:var(--display);font-size:.92rem;letter-spacing:.03em;margin:0 0 11px;color:#f2e2ba}
.tav-card h3,.tav-card h4{font-family:var(--display);text-transform:uppercase;letter-spacing:.12em;
  font-size:.66rem;margin:0 0 5px;color:var(--gold-l)}
.tav-card p{margin:0 0 7px;font-size:.92rem}
.tav-card .muted{color:var(--tav-smoke);font-size:.8rem}
.tav-optform{margin:0 0 7px}
.tav-opt{position:relative;display:block;width:100%;text-align:left;font-family:var(--serif);
  font-size:.9rem;color:#efe0be;background:transparent;border:1px solid #3e2f18;border-radius:2px;
  padding:9px 12px;margin-bottom:7px;overflow:hidden;cursor:pointer}
.tav-optform .tav-opt{margin:0}
.tav-opt.is-result{cursor:default}
.tav-opt:hover:not(.is-result){border-color:var(--gold-d)}
.tav-fill{position:absolute;inset:0 auto 0 0;background:rgba(194,161,77,.2)}
.tav-lbl{position:relative;display:flex;justify-content:space-between;gap:12px}
.tav-pct{color:var(--tav-smoke);font-variant-numeric:tabular-nums}
.tav-tally{margin:8px 0 0;font-size:.78rem;color:var(--tav-smoke)}
.tav-tally a{color:var(--gold-l)}

.tav-ration{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.tav-draw{width:84px;height:132px;flex-shrink:0;border-radius:4px;border:1px solid var(--gold-d);
  display:grid;place-items:center;cursor:pointer;color:var(--gold-l);font-family:var(--display);
  font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;text-align:center;line-height:1.5;
  background:repeating-linear-gradient(45deg,rgba(194,161,77,.09) 0 6px,transparent 6px 12px),
    linear-gradient(160deg,#3a2a14,#1d1409);transition:box-shadow .3s,transform .3s}
.tav-draw:hover{box-shadow:0 0 22px -6px rgba(194,161,77,.5);transform:translateY(-2px)}
.tav-draw.is-drawn{background:linear-gradient(165deg,#f6ecd2,#dcc79a);color:#3a2a14;
  border-color:var(--gold);cursor:default}
.tav-ration>div:last-child{flex:1;min-width:170px}

/* ── speak ──────────────────────────────────────────────────────────────── */
.tav-dock{position:sticky;bottom:0;z-index:19;padding:10px 0 18px;
  background:linear-gradient(to top,#120c07 68%,rgba(18,12,7,0))}
.tav-bar{display:flex;gap:8px;flex-wrap:wrap;background:var(--dark2);border:1px solid #5b4522;
  border-radius:3px;padding:8px;box-shadow:0 14px 34px -24px #000}
.tav-bar:focus-within{border-color:var(--gold)}
.tav-bar input,.tav-bar select{background:transparent;border:1px solid #3e2f18;border-radius:2px;
  color:#f2e6c9;font-family:var(--serif);font-size:.95rem;padding:8px 11px}
.tav-title-in{width:160px}
.tav-body-in{flex:1;min-width:180px}
.tav-bar input::placeholder{color:#8a7856;font-style:italic}
.tav-bar input:focus,.tav-bar select:focus{outline:none;border-color:var(--gold-d)}
.tav-bar select{color:#cbb894}
.tav-bar button{border:0;border-radius:2px;background:var(--wine);color:#f6e7c4;cursor:pointer;
  font-family:var(--display);text-transform:uppercase;letter-spacing:.14em;font-size:.58rem;padding:10px 18px}
.tav-bar button:hover{background:var(--wine-l)}
.tav-pollnew{margin-top:8px}
.tav-pollnew summary{font-family:var(--display);text-transform:uppercase;letter-spacing:.12em;
  font-size:.55rem;color:var(--tav-smoke);cursor:pointer;padding:6px 2px}
.tav-pollnew summary:hover{color:#f0e2c0}
.tav-pollnew form{display:flex;gap:7px;flex-wrap:wrap;margin-top:8px;background:var(--dark2);
  border:1px solid #3e2f18;border-radius:3px;padding:10px}
.tav-pollnew input{flex:1;min-width:130px;background:transparent;border:1px solid #3e2f18;
  border-radius:2px;color:#f2e6c9;font-family:var(--serif);font-size:.9rem;padding:7px 10px}
.tav-pollnew input::placeholder{color:#8a7856;font-style:italic}
.tav-pollnew button{border:0;border-radius:2px;background:var(--gold-d);color:#241a08;cursor:pointer;
  font-family:var(--display);text-transform:uppercase;letter-spacing:.12em;font-size:.56rem;padding:9px 16px}
.tav-signin{margin:0;padding:13px 16px;background:var(--dark2);border:1px solid #3e2f18;
  border-left:3px solid var(--gold-d);border-radius:2px;color:var(--tav-smoke);font-size:.9rem}
.tav-signin a{color:var(--gold-l);font-weight:600}

@media (max-width:640px){
  .tav-room{height:clamp(180px,26vh,220px)}
  .tav-col{max-width:82%}
  .tav-title-in{width:100%}
  .tav-plate{font-size:.42rem}
}
@media (prefers-reduced-motion:reduce){
  .tav-lantern::after,.tav-body{animation:none}
  .tav-draw{transition:none}
}

/* ── Tavern corrections ────────────────────────────────────────────────────
   1. The sticky stage faded to transparent at its base, so the log scrolled
      through it and text sat on top of text. It is opaque now.
   2. Threads read as forum posts — titles, category chips, "Open" links.
      A thread and its replies are now one run of chat bubbles instead.        */

/* opaque stage, with a hard edge instead of a fade */
.tav-stage{background:#120c07;padding-bottom:10px;
  box-shadow:0 10px 22px -14px #000,0 1px 0 rgba(138,109,42,.35)}
.tav-dock{background:#120c07;box-shadow:0 -12px 26px -18px #000}

/* the log sits clear of the stage */
.tav-log{padding-top:20px;gap:5px}

/* a thread + its replies read as one exchange */
.tav-run{display:flex;flex-direction:column;gap:5px;margin-bottom:19px}

/* continuation lines from the same speaker: no repeated face or name */
.tav-face--ghost{background:none;box-shadow:none;visibility:hidden}
.tav-said.is-cont{margin-top:-1px}
.tav-said.is-cont .tav-scrap{border-radius:5px 12px 12px 5px}
.tav-said.is-cont.is-me .tav-scrap{border-radius:12px 5px 5px 12px}

/* bubbles: softer, roomier, and readable */
.tav-scrap{border-radius:4px 15px 15px 15px;padding:11px 15px;line-height:1.55;
  font-size:1rem;box-shadow:0 8px 20px -18px #000}
.tav-said.is-me>.tav-col>.tav-scrap{border-radius:15px 4px 15px 15px}
.tav-scrap p{word-break:break-word;overflow-wrap:anywhere}
.tav-who{margin:0 0 3px 4px;gap:8px}
.tav-said.is-me>.tav-col>.tav-who{margin:0 4px 3px 0}

/* actions: quiet until wanted, so they stop looking like a forum toolbar */
.tav-acts{margin-top:7px;padding-left:45px;opacity:.62;transition:opacity .2s}
.tav-run:hover .tav-acts,.tav-acts:focus-within{opacity:1}
.tav-replyform input{font-size:.9rem;padding:8px 12px;border-radius:14px}
.tav-replyform button{border-radius:14px}
.tav-del{opacity:.55}
.tav-del:hover{opacity:1}

@media (max-width:640px){
  .tav-acts{padding-left:0}
  .tav-scrap{font-size:.97rem}
}

/* ── Figures: lay them along the floor instead of pinning percentages ──────
   Absolute % positions collided with each other and pushed past the bottom of
   a short room, so names were clipped and heads sat on top of nameplates.
   A flex row along the floor cannot overlap and always fits.                 */
.tav-folk{position:absolute;left:0;right:0;bottom:9%;top:auto;
  display:flex;justify-content:center;align-items:flex-end;
  gap:clamp(4px,3.4vw,30px);padding:0 14px;pointer-events:none}
.tav-body{position:static;transform:none;pointer-events:auto;
  flex:0 0 auto;max-width:96px;
  animation:tavIdle2 5.5s cubic-bezier(.2,.7,.2,1) infinite alternate}
@keyframes tavIdle2{from{transform:translateY(0)}to{transform:translateY(-3px)}}

/* depth without moving anyone out of line */
.tav-body[data-depth=far]{filter:brightness(.76);margin-bottom:14px}
.tav-body[data-depth=near]{margin-bottom:0}

/* names must never be clipped or collide */
.tav-plate{max-width:92px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  text-align:center;font-size:.44rem}

/* give the room enough headroom for heads, cloaks and names together */
.tav-room{height:clamp(240px,30vh,300px)}

@media (max-width:640px){
  .tav-room{height:clamp(206px,25vh,240px)}
  .tav-body{max-width:66px}
  .tav-plate{max-width:64px;font-size:.4rem}
  .tav-body[data-depth=far]{margin-bottom:9px}
  .tav-head{width:29px;height:29px}
  .tav-body[data-depth=far] .tav-head{width:25px;height:25px}
  .tav-cloak{width:46px;height:33px}
  .tav-body[data-depth=far] .tav-cloak{width:39px;height:28px}
}

/* ── Let the room scroll away ──────────────────────────────────────────────
   Pinning the stage sounded good and read badly: the site header is already
   78px fixed, and the stage added ~400px on top. On a laptop that left a
   sliver for the conversation, with every line sliding under the room the
   moment you scrolled. The room now sits at the top and scrolls off, so the
   talk gets the whole screen. The composer stays docked, which is the part
   you actually want within reach.                                           */
.tav-stage{position:static;box-shadow:none;padding-bottom:4px}
.tav-room{height:clamp(210px,26vh,260px)}
.tav-log{padding-top:24px}

/* the composer keeps its dock, with a solid ground so nothing shows through */
.tav-dock{position:sticky;bottom:0;background:#120c07;
  box-shadow:0 -14px 26px -18px #000,0 -1px 0 rgba(138,109,42,.28)}

@media (max-width:640px){
  .tav-room{height:clamp(190px,22vh,220px)}
}

/* the last message must clear the docked composer */
.tav-log{padding-bottom:96px}

/* ── Signed-in signal ──────────────────────────────────────────────────────
   Green when you are in, red when you are safely out. It sits in the header on
   every page, so you never have to guess whether you can post.               */
.signal{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  font-family:var(--display);text-transform:uppercase;letter-spacing:.11em;
  font-size:.56rem;padding:5px 11px;border-radius:11px;border:1px solid currentColor}
.signal--in{color:#7fd6a0;background:rgba(44,74,54,.42)}
.signal--out{color:#e08585;background:rgba(110,26,26,.34)}

/* on the parchment pages the header is dark, so these read fine as-is;
   inside the tavern keep them from glowing too hard against the black */
.tav .signal{box-shadow:none}

@media (max-width:980px){
  /* in the drop-down menu the signal gets its own line, full width */
  .nav-links .signal{align-self:flex-start;margin:10px 0 4px}
}

/* ── Avatar cropper in the Guild Hall ──────────────────────────────────────
   A round preview showing exactly what the guild will see, with zoom and
   drag-to-move, so nobody uploads a photo and discovers their forehead is the
   only thing in the circle.                                                  */
.cropper{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap;
  background:var(--parchment2);border:1px solid var(--line2);border-radius:3px;padding:14px}
.cropper__stage{position:relative;width:180px;height:180px;flex-shrink:0}
.cropper__stage canvas{
  width:180px;height:180px;display:block;border-radius:50%;
  background:
    linear-gradient(45deg,rgba(122,103,73,.12) 25%,transparent 25%,transparent 75%,rgba(122,103,73,.12) 75%) 0 0/18px 18px,
    linear-gradient(45deg,rgba(122,103,73,.12) 25%,transparent 25%,transparent 75%,rgba(122,103,73,.12) 75%) 9px 9px/18px 18px,
    var(--ivory);
  cursor:grab;touch-action:none}
.cropper__stage canvas:active{cursor:grabbing}
.cropper__ring{position:absolute;inset:0;border-radius:50%;pointer-events:none;
  box-shadow:0 0 0 3px var(--gold),0 10px 26px -18px rgba(60,40,15,.9)}

.cropper__side{flex:1;min-width:190px;display:flex;flex-direction:column;gap:9px}
.cropper__side input[type=file]{font-family:var(--serif);font-size:.86rem;max-width:100%}
.cropper__zoomlbl{font-family:var(--display);text-transform:uppercase;letter-spacing:.12em;
  font-size:.56rem;color:var(--muted);margin-bottom:-4px}
.cropper__side input[type=range]{width:100%;accent-color:var(--gold-d);cursor:pointer}
.cropper__side input[type=range]:disabled{opacity:.4;cursor:not-allowed}
.cropper__reset{align-self:flex-start;padding:6px 13px;font-size:.6rem}
.cropper__reset:disabled{opacity:.4;cursor:not-allowed}
.cropper__hint{margin:0;font-size:.8rem;line-height:1.45}

/* the circle only earns its ring once there is something in it */
.cropper:not(.has-img) .cropper__ring{box-shadow:0 0 0 2px var(--line2)}

@media (max-width:520px){
  .cropper{gap:13px}
  .cropper__stage,.cropper__stage canvas{width:150px;height:150px}
}
@media (prefers-reduced-motion:reduce){
  .cropper__stage canvas{transition:none}
}

/* ── Admin: who is bringing what ──────────────────────────────────────────
   The bring-list reads item by item, which is the wrong way round when you
   are chasing people. This is the same data grouped by person.           */
.bringers{max-width:860px;margin:0 auto 30px;padding:18px 20px;
  background:var(--dark2);border:1px solid var(--gold-d);border-radius:3px}
.bringers h3{font-family:var(--display);text-transform:uppercase;letter-spacing:.12em;
  font-size:.72rem;color:var(--gold-l);margin:0 0 14px}
.bringers__none{margin:0;color:#bfa980;font-size:.9rem}
.bringers__table{width:100%;border-collapse:collapse;font-size:.9rem;color:#efe0be}
.bringers__table th{
  text-align:left;font-family:var(--display);text-transform:uppercase;
  letter-spacing:.1em;font-size:.55rem;color:var(--gold-d);
  padding:0 10px 8px 0;border-bottom:1px solid rgba(138,109,42,.45);font-weight:600;
}
.bringers__table td{padding:9px 10px 9px 0;border-bottom:1px solid rgba(138,109,42,.2);vertical-align:top}
.bringers__table tr:last-child td{border-bottom:0}
.bringers__table .num{text-align:right;font-variant-numeric:tabular-nums;padding-right:0;width:60px}
.bringers__who{font-family:var(--display);text-transform:uppercase;letter-spacing:.05em;
  font-size:.68rem;color:#f5e9c8;white-space:nowrap}
.bringers__reach{font-size:.8rem;color:#cdb98f;word-break:break-word}
.bringers__reach a{color:var(--gold-l)}
.bringers__reach span{display:block}
.bringers__foot{margin:13px 0 0;padding-top:11px;border-top:1px solid rgba(138,109,42,.35);
  font-size:.84rem;color:#bfa980}
.bringers__foot b{color:#f0e2c0}
@media (max-width:620px){
  .bringers__table,.bringers__table tbody,.bringers__table tr,.bringers__table td{display:block;width:100%}
  .bringers__table thead{display:none}
  .bringers__table tr{padding:10px 0;border-bottom:1px solid rgba(138,109,42,.25)}
  .bringers__table td{border:0;padding:2px 0}
  .bringers__table .num{text-align:left;width:auto}
  .bringers__table .num::before{content:"Items: ";color:var(--gold-d);font-size:.7rem}
}

/* the countdown chip in the hero, so the date row reads as urgent */
.chip--count{background:rgba(110,26,26,.9);border-color:var(--wine-l);color:#f6e7c4}
.chip--count b{color:#fff;font-variant-numeric:tabular-nums}

/* keyboard users should not have to tab the whole nav on every page */
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--wine);color:#f6e7c4;padding:10px 18px;font-family:var(--display);text-transform:uppercase;letter-spacing:.12em;font-size:.6rem;border-radius:0 0 3px 0}
.skip-link:focus{left:0}
main:focus{outline:none}

/* Unread notices, in the header on every page. With no email, the site has
   to be the thing that tells you something happened. */
.newsbell{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;
  font-family:var(--display);text-transform:uppercase;letter-spacing:.11em;font-size:.56rem;
  padding:5px 11px;border-radius:11px;background:var(--wine);color:#f8e9cc;
  border:1px solid var(--wine-l);text-decoration:none}
.newsbell:hover{background:var(--wine-l);color:#fff}

/* ── The welcome a new Pledge lands on ────────────────────────────────────
   Registering used to drop you in the Guild Hall with no explanation of what
   a Pledge is or what happens next. This says both, and sets the expectation
   that acceptance arrives here rather than by email. */
.pledgewelcome{
  position:relative;background:var(--ivory);border:1px solid var(--line2);
  border-top:3px solid var(--wine);border-radius:3px;
  padding:30px 30px 26px;box-shadow:0 22px 44px -34px rgba(60,40,15,.85);
}
.pledgewelcome__mark{
  position:absolute;top:-15px;left:50%;transform:translateX(-50%);
  width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:var(--wine);color:var(--gold-l);font-size:.8rem;
  box-shadow:0 0 0 4px var(--ivory);
}
.pledgewelcome h2{margin:6px 0 4px;font-size:clamp(1.3rem,3.2vw,1.7rem);text-align:center}
.pledgewelcome__lead{margin:0 0 20px;text-align:center;color:var(--ink2);font-size:1.02rem}
.pledgewelcome__lead b{color:var(--wine)}
.pledgewelcome__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px}
.pledgewelcome h3,.pledgewelcome h4{
  font-family:var(--display);text-transform:uppercase;letter-spacing:.11em;
  font-size:.62rem;color:var(--gold-d);margin:0 0 8px;
}
.pledgewelcome ul{margin:0;padding-left:18px;font-size:.94rem;line-height:1.65;color:var(--ink2)}
.pledgewelcome li{margin-bottom:3px}
.pledgewelcome__foot{
  margin:22px 0 0;padding-top:16px;border-top:1px solid var(--line);
  font-size:.94rem;color:var(--ink2);line-height:1.6;
}
.pledgewelcome__foot b{color:var(--wine)}
.pledgewelcome__pip{
  display:inline-block;background:var(--wine);color:#f8e9cc;border-radius:10px;
  padding:1px 8px;font-family:var(--display);text-transform:uppercase;
  letter-spacing:.1em;font-size:.55rem;vertical-align:1px;
}
@media (max-width:560px){ .pledgewelcome{padding:26px 20px 22px} }

/* ── FAQ ──────────────────────────────────────────────────────────────────
   Questions people actually ask, grouped so the page can be scanned rather
   than read. Answers stay open — nothing is worth a click to reveal. */
.faq-group{margin-bottom:38px}
.faq-group > h2{
  font-family:var(--display);font-size:1.15rem;letter-spacing:.03em;
  color:var(--wine);margin:0 0 4px;padding-bottom:9px;
  border-bottom:2px solid var(--line2);
}
.faq{padding:17px 0;border-bottom:1px solid var(--line)}
.faq:last-child{border-bottom:0}
.faq h3{
  font-family:var(--display);font-size:1rem;letter-spacing:.02em;
  color:var(--ink);margin:0 0 7px;
}
.faq p{margin:0 0 8px;color:var(--ink2);line-height:1.7}
.faq p:last-child{margin-bottom:0}
.faq a{color:var(--wine);font-weight:600}

/* ── The nav needs more room than it used to ──────────────────────────────
   Collapsing at 980px was right when the bar held seven links. It now holds
   eight, plus a "Signed in — <name>" pill, the Guild Hall link and Sign out,
   which runs several hundred pixels past the edge on a ~1000px window —
   taking Guild Hall and Sign out off-screen with it, so a signed-in member
   could not reach their own profile.

   The hamburger now takes over below 1200px, where the row genuinely stops
   fitting. Only the nav moves; the grid and footer rules stay on 980px. */
@media(min-width:981px) and (max-width:1200px){
  .nav-links{
    display:none;position:fixed;top:78px;left:0;right:0;
    flex-direction:column;gap:0;background:var(--dark);
    padding:12px 28px 26px;border-bottom:1px solid var(--gold-d);
  }
  .nav-links.open{display:flex}
  .nav-links a{padding:14px 0;border-bottom:1px solid #2e2316;font-size:.8rem}
  .nav-links a.active::after{display:none}
  .nav-links .signal{align-self:flex-start;margin:12px 0 4px}
  .nav-links .newsbell{align-self:flex-start;margin:4px 0 8px}
  .nav-links .nav-login{align-self:center;margin:16px 0 8px;padding:11px 26px;border-bottom:none;width:auto}
  .nav-logout{border-bottom:none}
  .menu-toggle{display:flex}
}
/* Above 1200px the row fits, but only just — keep it from ever spilling. */
@media(min-width:1201px){
  .nav-links{flex-wrap:wrap;justify-content:flex-end}
  .nav-links .signal{white-space:nowrap}
}

/* ── Landing cards that actually go somewhere ─────────────────────────────
   The three specialist cards read as flavour and clicked to nothing — and the
   same words already sit on the Guild page. These are the three things a
   visitor can usefully do before the gates open, so they look pressable. */
.rolecard--link{
  display:block;text-decoration:none;color:inherit;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.rolecard--link:hover{
  transform:translateY(-3px);
  border-color:var(--gold);
  box-shadow:0 20px 38px -26px rgba(60,40,15,.85);
}
.rolecard--link:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.rolecard__go{
  display:inline-block;margin-top:12px;
  font-family:var(--display);text-transform:uppercase;letter-spacing:.13em;
  font-size:.6rem;color:var(--wine);
  border-bottom:1px solid currentColor;padding-bottom:2px;
}
.rolecard--link:hover .rolecard__go{color:var(--gold-d)}

/* ── The Cardsharp's Hand, pitched on the landing page ────────────────────
   The card game is the most alive thing on the site and the front page did
   not mention it. Five backs from her own damask, fanned, beside the telling. */
.handpitch{display:grid;grid-template-columns:minmax(200px,300px) 1fr;gap:34px;align-items:center;margin-top:26px}
.handpitch__fan{position:relative;height:210px;display:flex;justify-content:center;align-items:center}
.handpitch__card{
  position:absolute;width:96px;height:134px;border-radius:6px;
  border:1px solid var(--gold-d);
  background:linear-gradient(rgba(20,10,4,.26),rgba(20,10,4,.26)),
    url("/assets/img/card-back.jpg") center/cover no-repeat;
  box-shadow:0 12px 26px -14px rgba(40,26,8,.9), 0 1px 0 rgba(255,232,180,.3) inset;
  transform-origin:50% 120%;
}
.handpitch__card::after{content:"";position:absolute;inset:5px;border:1px solid rgba(226,190,110,.4);border-radius:4px}
.handpitch__card:nth-child(1){transform:rotate(-19deg) translateX(-52px)}
.handpitch__card:nth-child(2){transform:rotate(-9.5deg) translateX(-26px)}
.handpitch__card:nth-child(3){transform:rotate(0deg)}
.handpitch__card:nth-child(4){transform:rotate(9.5deg) translateX(26px)}
.handpitch__card:nth-child(5){transform:rotate(19deg) translateX(52px)}
.handpitch__words p{margin:0 0 13px;color:var(--ink2);line-height:1.7}
.handpitch__words .lead{margin-bottom:15px}
.handpitch__words b{color:var(--wine)}
@media (max-width:760px){
  .handpitch{grid-template-columns:1fr;gap:22px}
  .handpitch__fan{height:170px}
  .handpitch__card{width:76px;height:106px}
  .handpitch__card:nth-child(1){transform:rotate(-19deg) translateX(-40px)}
  .handpitch__card:nth-child(2){transform:rotate(-9.5deg) translateX(-20px)}
  .handpitch__card:nth-child(4){transform:rotate(9.5deg) translateX(20px)}
  .handpitch__card:nth-child(5){transform:rotate(19deg) translateX(40px)}
}

/* ── One nav, at every width ──────────────────────────────────────────────
   Two layouts were being kept honest at once: a row of links above 1200px and
   a hamburger below it. The row was the half that kept breaking — it ran off
   the edge of a laptop window once a signed-in member added a name pill, a
   hall link and a sign-out button, taking the profile with it.

   Now it is one button everywhere, opening a panel that nav.js fills to suit
   whoever is signed in. .js-nav is set by an inline script in the head rather
   than by this file, so it lands before first paint and nothing flashes; a
   browser with scripting off never gets the class and keeps the plain row it
   always had, instead of a button that would do nothing. */
.js-nav .nav{position:relative}
.js-nav .nav .nav-links{display:none}
.js-nav .nav .menu-toggle{display:flex;margin-left:auto;position:relative}

.js-nav .menu-toggle span{transition:transform .25s var(--ease),opacity .18s}
.js-nav .menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.js-nav .menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.js-nav .menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Unread notices show on the closed button, so news reaches you without a click. */
.menu-toggle--dot::after{content:"";position:absolute;top:0;right:1px;width:8px;height:8px;
  border-radius:50%;background:var(--gold-l);box-shadow:0 0 0 2px var(--dark)}

.js-nav .nav .nav-links.navdrawer.open{
  display:flex;flex-direction:column;gap:0;align-items:stretch;
  position:absolute;top:calc(100% - 6px);right:28px;left:auto;
  width:min(322px,calc(100vw - 32px));
  max-height:calc(100vh - 96px);overflow-y:auto;
  background:linear-gradient(180deg,#241a10,#160f09);
  border:1px solid var(--gold-d);border-radius:9px;
  box-shadow:0 28px 64px -26px rgba(0,0,0,.9),inset 0 1px 0 rgba(226,199,127,.14);
  padding:0 0 6px;z-index:70;
  animation:navdrop .22s var(--ease) both}
@keyframes navdrop{from{opacity:0;transform:translateY(-9px)}to{opacity:1;transform:none}}

/* Who you are, at the top, so the menu answers that before you ask it. */
.navdrawer__who{display:flex;align-items:center;gap:11px;padding:13px 18px;
  border-bottom:1px solid rgba(226,199,127,.18)}
.navdrawer__face{width:38px;height:38px;border-radius:50%;object-fit:cover;flex-shrink:0;
  border:1px solid var(--gold-d);background:var(--dark)}
.navdrawer__face--none{display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-size:1rem;color:var(--gold-l)}
.navdrawer__name{display:flex;flex-direction:column;min-width:0}
.navdrawer__name b{font-family:var(--display);font-size:.92rem;letter-spacing:.02em;color:#f5e9c8;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.navdrawer__name small{font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-l)}

.navdrawer__label{font-family:var(--display);font-size:.57rem;letter-spacing:.28em;
  text-transform:uppercase;color:var(--gold);margin:0;padding:15px 18px 6px}

.nav .navdrawer a{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 18px;border:0;border-radius:0;
  font-family:var(--display);font-size:.73rem;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:rgba(245,233,200,.84);
  transition:background .18s,color .18s}
.nav .navdrawer a:hover,.nav .navdrawer a:focus-visible{background:rgba(226,199,127,.09);color:var(--gold-l)}
.nav .navdrawer a.active{color:var(--gold-l);background:rgba(226,199,127,.06);
  box-shadow:inset 3px 0 0 var(--gold)}
.nav .navdrawer a.active::after{display:none}

.navdrawer__count{font-family:var(--serif);font-size:.66rem;letter-spacing:.04em;
  text-transform:none;background:var(--wine);color:#f5e9c8;border:1px solid var(--wine-l);
  border-radius:999px;padding:0 8px;flex-shrink:0}

.navdrawer__foot{display:flex;flex-direction:column;gap:9px;padding:14px 18px 8px;margin-top:8px;
  border-top:1px solid rgba(226,199,127,.18)}
.nav .navdrawer .nav-login{margin:0;width:100%}
.nav .navdrawer .nav-logout{margin:0;width:100%;display:flex}
.navdrawer__note{font-family:var(--serif);font-size:.76rem;line-height:1.5;letter-spacing:0;
  text-transform:none;text-align:center;color:rgba(245,233,200,.5)}

@media(prefers-reduced-motion:reduce){
  .js-nav .nav .nav-links.navdrawer.open{animation:none}
  .js-nav .menu-toggle span{transition:none}
}

/* The dressing controls that used to live here moved onto the profile page
   itself, so their styling went with them into profile.css. A shrunken copy
   of a page beside a form could disagree with the real thing, and did. */

/* Any face that leads somewhere. Quiet on purpose — a small lift, no
   underline — so a page of people does not read as a page of buttons. */
.facelink{display:inline-flex;border-radius:50%;transition:transform .16s var(--ease)}
.facelink:hover,.facelink:focus-visible{transform:translateY(-2px)}
a.navdrawer__who{text-decoration:none;transition:background .18s}
a.navdrawer__who:hover,a.navdrawer__who:focus-visible{background:rgba(226,199,127,.08)}

/* ── berths the House keeps ─────────────────────────────────────────────
   The rig sleeps more than the three that can be booked: the main bunk and
   one other belong to the Guild Elder and the Guild Leader for the whole
   weekend. Shown beside the board so the page accounts for everybody
   sleeping in it, without offering those two to anyone else. */
.berths{max-width:620px;margin:0 auto 30px;text-align:center}
.berths__lbl{
  font-family:var(--display);font-size:.58rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--muted);margin-bottom:10px;
}
.berths__row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.berth{
  display:flex;align-items:center;gap:10px;
  background:var(--ivory);border:1px solid var(--line);border-left:3px solid var(--gold);
  border-radius:3px;padding:9px 14px 9px 11px;
}
.berth .postpic,.berth .postpic--init{
  width:36px;height:36px;border-radius:50%;object-fit:cover;flex-shrink:0;
  border:1px solid var(--line2);
}
.berth__who{display:flex;flex-direction:column;text-align:left;line-height:1.25}
.berth__who b{font-family:var(--display);font-size:.9rem;color:var(--ink)}
.berth__who small{font-size:.72rem;color:var(--muted);letter-spacing:.04em}

/* The milestone line beside the countdown — a word that changes as the date
   comes on, rather than only ever a smaller number. */
.chip--note{
  background:rgba(226,199,127,.14);border-color:var(--gold-d);color:var(--gold-l);
  font-style:italic;letter-spacing:.02em;
}

/* Who spoke for a pledge, in Administration — the words are the Guild
   Leader's alone, and this panel is only ever rendered for her. */
.admvouch{
  margin-top:11px;padding:9px 11px;border-radius:3px;
  background:rgba(226,199,127,.08);border:1px solid rgba(226,199,127,.28);
}
.admvouch__h{font-family:var(--display);font-size:.6rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-l);margin-bottom:5px}
.admvouch__h b{font-size:.82rem}
.admvouch__v{font-size:.8rem;color:#e0cca4;line-height:1.5;margin-top:3px}
.admvouch__v b{color:#f5e9c8}
.admvouch__none{font-size:.78rem;color:#9d8a62;font-style:italic}

/* ── keyboard focus ─────────────────────────────────────────────────────
   Whoever is moving through the site by keyboard has to be able to see
   where they are. There was no rule for this at all, so the site fell back
   to whatever ring the browser drew — which on parchment is often barely
   there — and four inputs turned even that off with outline:none, leaving
   a keyboard user with nothing.

   :focus-visible rather than :focus, so a mouse click does not leave a ring
   behind on everything it touches. Two colours: gold reads on the dark
   surfaces, wine on the parchment ones. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--wine);
  outline-offset:2px;
  border-radius:2px;
}
/* On the dark furniture — the bar, the tavern, the dressing panel — wine
   disappears, so those take gold instead. */
header :where(a,button):focus-visible,
.navdrawer :where(a,button):focus-visible,
.tav :where(a,button,input,select,textarea,summary):focus-visible,
.dress :where(a,button,input,select,textarea):focus-visible,
.section--dark :where(a,button):focus-visible,
footer :where(a,button):focus-visible{
  outline-color:var(--gold-l);
}
/* These four replaced the ring with a border colour, which is invisible to
   anyone who cannot see the border. Give them the ring back. */
.tav-replyform input:focus-visible,
.tav-bar input:focus-visible,
.tav-bar select:focus-visible,
.tav-editbox input:focus-visible{
  outline:2px solid var(--gold-l);
  outline-offset:1px;
}

/* Who stands in each specialism, under its card on the Guild page. */
.classfolk{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin-top:14px;padding-top:12px;border-top:1px dotted var(--line);
  font-size:.88rem;color:var(--ink2);
}
.classfolk .postpic,.classfolk .postpic--init{
  width:26px;height:26px;border-radius:50%;object-fit:cover;flex-shrink:0;
  border:1px solid var(--line2);
}
.classfolk a{color:var(--wine);font-weight:600}
.classfolk a:hover{text-decoration:underline}
.classfolk--none{color:var(--muted);font-style:italic}

/* The Sunset Park parking map. It is a tall SVG, so it is capped by height
   rather than width — at full width on a laptop it would run past the fold
   and read as a wall rather than a map. */
.parkmap{margin:0;text-align:center}
.parkmap a{display:inline-block;max-width:100%}
.parkmap img{display:block;width:auto;max-width:100%;max-height:78vh;margin:0 auto;
  border:1px solid var(--line2);border-radius:4px;background:var(--ivory);
  box-shadow:0 22px 44px -28px rgba(60,40,15,.5)}
.parkmap figcaption{margin-top:12px;font-size:.84rem;color:var(--muted);line-height:1.6}

/* "likely a cot" beside Bunk 3 — quiet enough not to shout, plain enough
   that nobody claims it thinking it is a bed in the rig. */
.bunknote{display:inline-block;margin-left:6px;font-family:var(--serif);font-size:.68rem;
  letter-spacing:.02em;text-transform:none;color:var(--muted);font-style:italic}

/* Which page you are on, in the menu. The only mark used to be gold-ish text
   against near-gold text, which on a dark drawer is no mark at all — you had
   to hunt for it. Now the row carries a gold bar, a tint and brighter type, so
   it reads at a glance. The bar is an inset shadow rather than a border so
   nothing shifts sideways when a row becomes current. */
.navdrawer a.active{
  color:var(--gold-l);
  background:linear-gradient(90deg,rgba(226,199,127,.16),rgba(226,199,127,.03));
  box-shadow:inset 4px 0 0 var(--gold);
  font-weight:700;
}
.navdrawer a.active:hover{background:linear-gradient(90deg,rgba(226,199,127,.22),rgba(226,199,127,.05))}
/* A small mark on the right as well, so the current row is not carried by
   colour alone — colour-blind readers and anyone in bright sun get it too. */
.navdrawer a.active::before{content:"\25C6";margin-left:auto;padding-left:10px;
  font-size:.62rem;color:var(--gold);opacity:.9}

/* The Guild Elder's number in the FAQ: behind a press, not on the page. */
.faq-hide{margin-top:12px}
.faq-hide summary{
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;list-style:none;
  padding:7px 14px;border:1px solid var(--gold-d);border-radius:3px;background:#fdf6e4;
  font-family:var(--display);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--wine);
}
.faq-hide summary::-webkit-details-marker{display:none}
.faq-hide summary:hover,.faq-hide summary:focus-visible{background:var(--parchment2)}
.faq-hide[open] summary{margin-bottom:10px}
.faq-hide__n{display:block;font-family:var(--display);font-size:1.45rem;color:var(--wine);
  text-decoration:none;margin-bottom:6px;width:max-content}
.faq-hide__n:hover,.faq-hide__n:focus-visible{text-decoration:underline}

/* The payout tables on the FAQ. A two-column list rather than a real <table>:
   the left side is a single number and the right a short phrase, so a table
   would only add borders and a horizontal scrollbar on a phone. */
.faq-pay{list-style:none;margin:0;padding:0;display:grid;gap:5px;max-width:400px}
.faq-pay li{
  display:grid;grid-template-columns:5.4em 1fr;gap:14px;align-items:baseline;
  padding:6px 0;border-bottom:1px dotted var(--line);
}
.faq-pay li:last-child{border-bottom:0}
.faq-pay b{
  font-family:var(--display);font-variant-numeric:tabular-nums;
  color:var(--wine);text-align:right;
}
.faq-pay span{color:var(--ink2);font-variant-numeric:tabular-nums}
/* Every rung is a floor, not an exact figure — "40+ Bosun" — so each one
   carries the plus, including the nought everybody starts on. */
.faq-pay--titles{grid-template-columns:none}
.faq-pay--titles li{grid-template-columns:3.4em 1fr}
.faq-pay--titles b::after{content:"+";opacity:.55;margin-left:1px}
.faq-note{margin-top:10px;font-size:.9rem;color:var(--muted)}

/* Pledges waiting, in Administration. One row per person with everything
   needed to decide: who they are, who spoke for them, and what those people
   said in private — which is shown here and on no other page. */
.pledgelist{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.pledgelist__row{display:flex;gap:14px;align-items:flex-start;
  background:rgba(255,255,255,.04);border:1px solid rgba(226,199,127,.22);
  border-radius:4px;padding:13px 15px}
.pledgelist__face{flex-shrink:0;width:46px;height:46px;border-radius:50%;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--gold-d);background:var(--dark2)}
.pledgelist__face img{width:100%;height:100%;object-fit:cover}
.pledgelist__face span{font-family:var(--display);font-size:.9rem;color:var(--gold-l)}
.pledgelist__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.pledgelist__body b{font-family:var(--display);font-size:1rem;color:#f5e9c8}
.pledgelist__body b a{color:inherit;text-decoration:none}
.pledgelist__body b a:hover{text-decoration:underline}
.pledgelist__meta{font-size:.82rem;color:#c9ab7f}
.pledgelist__none{font-size:.86rem;color:#a8916b;font-style:italic}
.pledgelist__vouches{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:6px}
.pledgelist__vouches li{font-size:.88rem;color:#e4d3ab;
  border-left:2px solid var(--gold-d);padding-left:10px;line-height:1.5}
.pledgelist__vouches b{font-family:var(--serif);font-size:.88rem;color:#f5e9c8}
.pledgelist__vouches small{color:#a8916b;margin-left:6px}
.pledgelist__vouches em{display:block;color:#d6c39a}
.pledgelist__act{display:flex;flex-direction:column;gap:7px;flex-shrink:0;align-items:stretch}
@media(max-width:620px){
  .pledgelist__row{flex-wrap:wrap}
  .pledgelist__act{flex-direction:row;width:100%}
}

/* Pictures on a profile page. */
.pro-pics{list-style:none;margin:0;padding:0;display:grid;gap:10px;
  grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
.pro-pics li{display:flex;flex-direction:column;gap:5px;min-width:0}
.pro-pics a{display:block;border:1px solid var(--line2);border-radius:3px;overflow:hidden;
  background:var(--ivory);line-height:0}
.pro-pics a:hover,.pro-pics a:focus-visible{border-color:var(--u-accent,var(--gold-d))}
.pro-pics img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.pro-pics span{font-size:.76rem;color:var(--muted);line-height:1.4;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.pro-pics__add{margin-top:12px;font-size:.86rem;color:var(--muted)}
.pro-pics__add a{color:var(--u-accent,var(--wine));font-weight:600}
/* What vouching means, said where someone is about to do it. */
.pro-vouchwhat{margin:2px 0 10px;font-size:.9rem;color:var(--muted);line-height:1.6}

/* Guild Member or Tavern Guest — said side by side, where people choose. */
.whichyou{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));margin:20px 0 14px}
.whichyou__card{background:rgba(251,246,233,.95);border:1px solid var(--line);border-radius:4px;
  padding:15px 17px;line-height:1.6}
.whichyou__card--guild{border-color:var(--gold-d);background:#fdf6e4}
.whichyou__tag{display:inline-block;margin-bottom:8px;font-family:var(--display);
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--wine)}
.whichyou__card p{margin:0 0 8px;font-size:.94rem;color:var(--ink2)}
.whichyou__card p:last-child{margin-bottom:0}
.whichyou__do{font-size:.9rem !important;color:var(--muted) !important}
.whichyou__do a{color:var(--wine);font-weight:600}

/* ── Your Faire Weekend ───────────────────────────────────────────────────── */
/* The first thing a guildmate sees after signing in. Five tiles, each
   answering one question, and each offering the single press that fixes it
   when the answer is "nothing yet". */
.mine{padding-top:118px;padding-bottom:44px}
.mine__clock{text-align:center;color:var(--muted);margin:-8px 0 24px;font-size:.95rem}
.mine__clock b{font-family:var(--display);font-size:1.3rem;color:var(--wine)}
.mine__clock--now b{color:var(--forest)}
.mine__grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(238px,1fr))}
.mine__tile{
  display:flex;flex-direction:column;gap:6px;
  background:var(--ivory);border:1px solid var(--line);border-top:3px solid var(--line2);
  border-radius:4px;padding:16px 18px;
  box-shadow:0 14px 32px -28px rgba(60,40,15,.9);
}
/* Settled tiles lean green; the one still asking leans gold, so what needs
   doing is findable without reading every word. */
.mine__tile.is-yes{border-top-color:var(--forest)}
.mine__tile.is-ask{border-top-color:var(--gold-d);background:#fdf6e4}
.mine__q{font-family:var(--display);font-size:.66rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted)}
.mine__a{font-family:var(--display);font-size:1.06rem;color:var(--ink);line-height:1.35}
.mine__tile.is-yes .mine__a{color:var(--forest)}
.mine__note{font-size:.88rem;color:var(--muted);line-height:1.55}
.mine__when{font-family:var(--serif);font-style:italic;color:var(--wine);font-size:.95rem}
.mine__list{list-style:none;margin:2px 0 0;padding:0;display:grid;gap:4px}
.mine__list li{font-size:.9rem;color:var(--ink2)}
.mine__list small{color:var(--muted);font-style:italic}

/* ── The purse square, in Where You Stand ──────────────────────────────────
   A struck coin rather than an emoji: the House has its own gold everywhere
   else on the site and a yellow disc from the font would not match any of it.
   The count is the largest thing in the tile because it is the question. */
.mine__tile--purse{border-top-color:var(--gold-d)}
.mine__purse{display:flex;align-items:center;gap:10px;margin:2px 0}
.mine__coin{
  width:34px;height:34px;border-radius:50%;flex-shrink:0;
  background:radial-gradient(circle at 34% 30%,#f0d795,#c8a95a 60%,#8a6d2a 100%);
  box-shadow:inset 0 0 0 2px rgba(94,72,24,.55),0 3px 8px -4px rgba(60,40,15,.8);
}
.mine__purse__n{font-size:1.9rem;line-height:1;color:var(--wine);font-variant-numeric:tabular-nums}
.mine__purse__w{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);align-self:flex-end;padding-bottom:3px}
.mine__last{font-size:.84rem;color:var(--ink2);line-height:1.5}
.mine__last b{font-family:var(--display);font-variant-numeric:tabular-nums;margin-right:4px}
.mine__last .is-in{color:var(--forest)}
.mine__last .is-out{color:var(--wine)}
.mine__do{align-self:flex-start;margin-top:8px;padding:7px 15px;font-size:.6rem}
.mine__more{margin-top:auto;padding-top:8px;font-size:.82rem;color:var(--wine);font-weight:600}
/* the hand, small enough to sit in a tile */
.mine__cards{display:flex;gap:5px;flex-wrap:wrap;margin:2px 0}
.mine__card{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:32px;height:42px;padding:0 5px;border-radius:3px;
  background:#fbf6e9;border:1px solid var(--line2);
  font-family:var(--display);font-size:.9rem;color:var(--ink);
  box-shadow:0 3px 7px -4px rgba(60,40,15,.6);
}
.mine__card.is-red{color:#a32020}

/* ── the tavern song, controlled from the header ──────────────────────────── */
/* Sits beside the menu button on every page, so the music can be turned down
   or off from wherever you are rather than only from the Tavern. */
.player{display:flex;align-items:center;gap:8px;margin-left:auto;margin-right:14px}
.player__btn{
  width:34px;height:34px;flex-shrink:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(226,199,127,.42);border-radius:50%;
  background:rgba(36,26,16,.6);color:var(--gold-l);
  font-size:1rem;line-height:1;
  transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease);
}
.player__btn:hover,.player__btn:focus-visible{background:var(--gold-d);color:#1a120b}
.player.is-playing .player__btn{background:var(--wine);border-color:var(--wine-l);color:#f8edd1}
/* The slider is styled by hand because the default is a grey plastic thing
   that belongs to no century at all. */
.player__vol{
  -webkit-appearance:none;appearance:none;
  width:72px;height:4px;border-radius:2px;cursor:pointer;
  background:linear-gradient(90deg,var(--gold-d),rgba(226,199,127,.25));
}
.player__vol::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:13px;height:13px;border-radius:50%;
  background:var(--gold-l);border:1px solid #6b4f2a;cursor:pointer;
}
.player__vol::-moz-range-thumb{
  width:13px;height:13px;border-radius:50%;
  background:var(--gold-l);border:1px solid #6b4f2a;cursor:pointer;
}
.player__vol:focus-visible{outline:2px solid var(--gold-l);outline-offset:3px}
/* On a narrow screen the header is tight; keep the button, drop the slider —
   the device's own volume keys are right there. */
@media(max-width:560px){
  .player{margin-right:10px;gap:0}
  .player__vol{display:none}
}
/* Letting the song out of the Tavern — offered in the Tavern, and nowhere
   else, because that is the only room where the question makes sense. */
.player__scope{
  cursor:pointer;white-space:nowrap;
  border:1px solid rgba(226,199,127,.32);border-radius:3px;
  padding:4px 9px;background:transparent;color:#c9ab7f;
  font-family:var(--display);font-size:.54rem;letter-spacing:.1em;text-transform:uppercase;
  transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease);
}
.player__scope:hover,.player__scope:focus-visible{border-color:var(--gold-l);color:var(--gold-l)}
.player__scope.is-on{background:rgba(226,199,127,.16);border-color:var(--gold);color:var(--gold-l)}
@media(max-width:720px){.player__scope{display:none}}

/* ── The guild header, when it is a film ────────────────────────────────────
   The other page heroes are a photograph with a heavy gradient laid over it
   and the heading on top. This one cannot work that way: the motion graphic
   has its own crest, its own headline and four labelled cards, so anything
   printed over it lands on top of words already there.

   So the wash is switched off and the film keeps its own space — but beside
   the heading rather than above it. Stacked, the header ran 630px of film
   plus the heading beneath, which was most of a laptop screen before the
   roster began. Side by side the film is a little over half the width, the
   heading fills the space next to it that was empty anyway, and the whole
   header comes in under 400px. */
.pagehero--film{padding:96px 0 44px;background:var(--dark)}
.pagehero--film::after{display:none}          /* no gradient over the film */
.pagehero__filmrow{display:grid;gap:30px;align-items:center}
/* Side by side as soon as there is room for it — a tablet stacking the film
   at full container width is the same problem the desktop had. */
@media(min-width:780px){
  .pagehero__filmrow{grid-template-columns:minmax(0,1.22fr) minmax(0,1fr)}
}
.pagehero__film{
  display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#150c11;
  border:1px solid var(--gold-d);border-radius:4px;
  box-shadow:0 26px 52px -34px rgba(0,0,0,.9);
}
.pagehero__film img{width:100%;height:100%;object-fit:cover;display:block}
.pagehero--film .pagehero__inner{max-width:none;margin:0}
.pagehero--film h1{margin-top:4px;font-size:clamp(1.5rem,2.6vw,2.1rem)}
.pagehero--film p{font-size:1.06rem;margin-top:12px}
/* Edge to edge on a phone: a 1px frame around a small video only makes it
   smaller, and the band is the same colour as the surround anyway. */
@media(max-width:620px){
  .pagehero--film{padding:86px 0 36px}
  .pagehero__filmrow{gap:22px}
  .pagehero__film{
    border-left:0;border-right:0;border-radius:0;
    width:calc(100% + 56px);margin-left:-28px;   /* out past the container padding */
  }
}

/* The bunk board: one column per night, however many nights there are.
   It was a fixed three-column grid back when the weekend had three nights.
   Dropping Sunday left the third column standing empty on both boards, so it
   fits itself to the nights instead — and will still be right if a night is
   ever added back. */
.bunkgrid{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
@media(max-width:620px){.bunkgrid{gap:16px;grid-template-columns:1fr}}

/* ── The forecast for the weekend ───────────────────────────────────────────
   Sits above the twenty-six years of history on the camp page and hides itself
   entirely until there is a real forecast to show — the source only looks
   sixteen days out, so for most of the year there is nothing true to say. */
.fc[hidden]{display:none}
.fc{
  margin:14px 0 16px;padding:14px 16px;border-radius:4px;
  background:linear-gradient(180deg,rgba(226,199,127,.16),rgba(226,199,127,.06));
  border:1px solid var(--gold-d);
}
.fc__lede{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0 0 10px}
.fc__lede b{font-family:var(--display);font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--wine)}
.fc__note{font-size:.72rem;color:var(--muted);font-style:italic}
.fc__days{list-style:none;margin:0;padding:0;display:grid;gap:8px;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.fc__day{
  display:flex;flex-direction:column;gap:2px;
  background:var(--ivory);border:1px solid var(--line);border-radius:3px;padding:10px 12px;
}
.fc__when{font-family:var(--display);font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}
.fc__temp{display:flex;align-items:baseline;gap:8px}
.fc__temp b{font-family:var(--display);font-size:1.5rem;color:var(--wine);
  font-variant-numeric:tabular-nums;line-height:1.1}
.fc__temp small{font-size:.76rem;color:var(--muted);font-variant-numeric:tabular-nums}
.fc__sky{font-size:.86rem;color:var(--ink2);display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.fc__rain{color:var(--wine);font-size:.78rem;font-weight:600}
.fc__says{margin:11px 0 0;font-size:.92rem;line-height:1.62;color:var(--ink2)}
.fc__says b{color:var(--wine)}
/* On the weekend page the block sits on the dark parchment of its neighbours. */
.wk-block.fc{background:linear-gradient(180deg,rgba(226,199,127,.2),rgba(226,199,127,.07))}

/* ── While you were away ────────────────────────────────────────────────────
   The first thing in the Guild Hall, and only there when something has
   actually happened. Each item is a door, not a statistic — the number is the
   hook, the words say where it goes, and the whole thing is the link. */
.since{padding:104px 0 0}
.since__box{
  max-width:760px;margin:0 auto;padding:16px 20px;border-radius:4px;
  background:linear-gradient(180deg,rgba(226,199,127,.15),rgba(226,199,127,.05));
  border:1px solid var(--gold-d);
}
.since__h{
  margin:0 0 11px;font-family:var(--display);font-size:.68rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--wine);
}
.since__h span{color:var(--muted);letter-spacing:.06em;font-style:italic;text-transform:none}
.since__list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:9px}
.since__item{
  display:inline-flex;align-items:baseline;gap:8px;
  padding:7px 14px;border-radius:2px;
  background:var(--ivory);border:1px solid var(--line2);
  color:var(--ink2);font-size:.9rem;line-height:1.3;
  transition:background .16s,border-color .16s,color .16s;
}
.since__item b{
  font-family:var(--display);font-size:1.06rem;color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.since__item:hover,.since__item:focus-visible{
  background:var(--gold-d);border-color:var(--gold-d);color:#1a120b}
.since__item:hover b,.since__item:focus-visible b{color:#1a120b}
.since__item:focus-visible{outline:2px solid var(--gold-l);outline-offset:2px}
/* The ones addressed to you personally, and the card, wear the House's red. */
.since__item.is-gold{border-color:var(--wine)}
.since__item.is-gold b{color:var(--wine)}
.since__item.is-card{background:var(--wine);border-color:var(--wine);color:#f6e7c4}
.since__item.is-card b{color:var(--gold-l)}
.since__item.is-card:hover{background:var(--wine-l);color:#fff}
@media(max-width:620px){
  .since{padding-top:92px}
  .since__box{padding:14px 15px}
  .since__list{gap:7px}
  .since__item{font-size:.84rem;padding:6px 11px}
}
/* Where You Stand normally carries the top padding; it does not need it twice. */
.since + .mine{padding-top:26px}

/* ── Which side of the weekend a line belongs to ────────────────────────────
   countdown.js puts .faire-over on <html> once the gates have shut. Until
   then the site reads as an invitation; afterwards the invitations go and the
   record takes their place. Marking the words is all a page has to do. */
[data-after]{display:none}
.faire-over [data-before]{display:none}
.faire-over [data-after]{display:revert}
.afterbanner{
  margin:0 0 26px;padding:14px 18px;border-radius:4px;
  background:rgba(122,85,20,.1);border-left:3px solid var(--gold-d);
}
.afterbanner p{margin:0;color:var(--ink2);line-height:1.66}
.afterbanner b{color:var(--wine)}
.afterbanner a{color:var(--wine);font-weight:600}

/* ── After the gates have shut ──────────────────────────────────────────────
   Three things and no more: who took the weekend, where the pictures are, and
   thank you. Warmer than the rest of the parchment, because it is the one
   panel on the site that exists to say something rather than ask for it. */
.after{padding:104px 0 0}
.after__box{
  max-width:760px;margin:0 auto;padding:26px 28px;border-radius:4px;text-align:center;
  background:linear-gradient(180deg,var(--ivory),rgba(226,199,127,.14));
  border:1px solid var(--gold-d);box-shadow:0 20px 44px -34px rgba(60,40,15,.9);
}
.after__eyebrow{
  margin:0 0 6px;font-family:var(--display);font-size:.66rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold-d);
}
.after__box h2{margin:0 0 10px;color:var(--wine)}
.after__lede{margin:0 auto;max-width:52ch;color:var(--ink2);line-height:1.7}
.after__hand{
  margin:18px auto 0;max-width:420px;padding:12px 16px;border-radius:3px;
  background:var(--parchment);border:1px solid var(--line2);
}
.after__k{
  margin:0 0 4px;font-family:var(--display);font-size:.6rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);
}
.after__who{margin:0;display:flex;flex-direction:column;gap:2px}
.after__who b{font-family:var(--display);font-size:1.16rem;color:var(--ink)}
.after__who span{font-size:.9rem;color:var(--wine);font-style:italic}
.after__acts{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:20px 0 0}
.after__note{margin:14px 0 0;font-size:.86rem;color:var(--muted);line-height:1.6}
@media(max-width:620px){
  .after{padding-top:92px}
  .after__box{padding:20px 18px}
}
/* Whatever follows the panel does not need its own top clearance as well. */
.after + .since,.after + .mine,.after + .section{padding-top:26px}

/* ── What to pack ───────────────────────────────────────────────────────────
   Yours, and nobody else can see it. A tick box, the thing, and a way to take
   it off — the three controls a list needs and no more. Packed items dim and
   rule through rather than vanishing, so the list keeps its shape as it fills. */
.pack__lead{max-width:600px;margin:0 auto 6px}
.pack__count{
  text-align:center;margin:0 0 18px;font-family:var(--display);
  font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
}
.pack__count b{color:var(--wine);font-size:1.2rem;font-variant-numeric:tabular-nums}
.pack__list{list-style:none;margin:0 auto;padding:0;max-width:600px;display:grid;gap:6px}
.pack__item{
  display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;
  background:var(--ivory);border:1px solid var(--line);border-radius:3px;padding:9px 12px;
}
.pack__tick,.pack__x{margin:0;line-height:0}
.pack__tick button{
  width:26px;height:26px;border-radius:3px;cursor:pointer;padding:0;
  border:1px solid var(--line2);background:var(--parchment);
  color:var(--forest);font-size:.94rem;line-height:1;
}
.pack__tick button:hover{border-color:var(--forest)}
.pack__tick button:focus-visible{outline:2px solid var(--gold-l);outline-offset:2px}
.pack__what{font-size:.96rem;color:var(--ink);line-height:1.4}
.pack__what small{display:block;font-size:.78rem;color:var(--muted);font-style:italic;margin-top:1px}
.pack__x button{
  border:0;background:transparent;color:var(--line2);cursor:pointer;
  font-size:1.1rem;line-height:1;padding:2px 4px;
}
.pack__x button:hover{color:var(--wine)}
.pack__x button:focus-visible{outline:2px solid var(--gold-l);outline-offset:2px}
.pack__item.is-done{background:var(--parchment);border-color:var(--line2)}
.pack__item.is-done .pack__what{color:var(--muted);text-decoration:line-through}
.pack__item.is-done .pack__what small{text-decoration:none}
.pack__item.is-done .pack__tick button{background:var(--forest);border-color:var(--forest);color:#f2ecd8}
.pack__add{display:flex;gap:8px;max-width:600px;margin:16px auto 0}
.pack__add input{
  flex:1;padding:9px 12px;border:1px solid var(--line2);border-radius:3px;
  background:var(--ivory);color:var(--ink);font-family:var(--serif);
}
.pack__add input:focus{outline:2px solid var(--gold-d);outline-offset:1px}
.pack__reset{max-width:600px;margin:9px auto 0;text-align:right}
.pack__reset button{
  border:0;background:transparent;cursor:pointer;color:var(--muted);
  font-size:.78rem;text-decoration:underline;padding:2px;
}
.pack__reset button:hover{color:var(--wine)}
@media(max-width:560px){
  .pack__item{gap:9px;padding:8px 10px}
  .pack__what{font-size:.9rem}
}

/* The House's own rig on the camp page. A photograph of the actual thing
   people will be sleeping in does more than any amount of describing it. */
.rig{margin:18px 0 0}
.rig img{
  display:block;width:100%;height:auto;border-radius:4px;
  border:1px solid var(--line2);
  box-shadow:0 18px 40px -30px rgba(60,40,15,.9);
}
.rig figcaption{
  margin-top:8px;font-family:var(--serif);font-style:italic;
  font-size:.88rem;color:var(--muted);
}

/* The inside of the rig, under the outside of it. Two side by side on a wide
   screen, stacked on a phone — a picture of the couch you might be sleeping on
   is worth more than the sentence saying there is one. */
.rig-inside{
  display:grid;gap:14px;margin-top:14px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}
.rig-inside figure{margin:0}
.rig-inside img{
  display:block;width:100%;height:auto;border-radius:4px;
  border:1px solid var(--line2);
  box-shadow:0 14px 32px -28px rgba(60,40,15,.9);
}
.rig-inside figcaption{
  margin-top:7px;font-family:var(--serif);font-style:italic;
  font-size:.84rem;color:var(--muted);line-height:1.5;
}

/* ── On the day ─────────────────────────────────────────────────────────────
   At the top of the FAQ for the faire weekend and nowhere else. Somebody stood
   in a car park wants five things; the thirty-one questions are still below
   for everyone else, and this costs the page nothing but words. */
.today{
  margin:0 0 34px;padding:20px 22px;border-radius:4px;
  background:linear-gradient(180deg,rgba(110,26,26,.09),rgba(226,199,127,.09));
  border:1px solid var(--wine);
}
.today__k{
  margin:0 0 4px;font-family:var(--display);font-size:.64rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold-d);
}
.today__h{margin:0 0 14px;color:var(--wine);font-size:1.5rem}
.today__list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.today__list li{
  display:grid;grid-template-columns:8.5em 1fr;gap:14px;align-items:baseline;
  padding-bottom:11px;border-bottom:1px dotted var(--line);
}
.today__list li:last-child{border-bottom:0;padding-bottom:0}
.today__list b{
  font-family:var(--display);font-size:.68rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--wine);
}
.today__list span{color:var(--ink2);line-height:1.62;font-size:.95rem}
.today__list span b{font-size:inherit;letter-spacing:0;text-transform:none;color:var(--ink)}
.today__when{color:var(--wine)!important;font-style:italic}
.today__list a{color:var(--wine);font-weight:600}
.today__go{white-space:nowrap}
.today__note{margin:14px 0 0;font-size:.84rem;color:var(--muted);font-style:italic}
@media(max-width:560px){
  .today{padding:16px 15px}
  .today__list li{grid-template-columns:1fr;gap:2px}
  .today__list b{font-size:.62rem}
}

/* ── Still to sort ──────────────────────────────────────────────────────────
   The Elder's own list, and drawn for nobody else. Most of its lines are
   questions, so each carries a box for the answer as well as a tick — the tick
   is for afterwards, the answer is the point. */
.sort__lead{max-width:560px;margin:0 auto 6px}
.sort__count{
  text-align:center;margin:0 0 18px;font-family:var(--display);
  font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
}
.sort__count b{color:var(--wine);font-size:1.2rem;font-variant-numeric:tabular-nums}
.sort__list{list-style:none;margin:0 auto;padding:0;max-width:660px;display:grid;gap:8px}
.sort__item{
  display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:start;
  background:var(--ivory);border:1px solid var(--line);border-radius:3px;padding:12px 14px;
}
.sort__tick,.sort__x{margin:0;line-height:0}
.sort__tick button{
  width:26px;height:26px;border-radius:3px;cursor:pointer;padding:0;
  border:1px solid var(--line2);background:var(--parchment);
  color:var(--forest);font-size:.94rem;line-height:1;
}
.sort__tick button:hover{border-color:var(--forest)}
.sort__tick button:focus-visible,.sort__x button:focus-visible{outline:2px solid var(--gold-l);outline-offset:2px}
.sort__body{min-width:0}
.sort__what{margin:0 0 7px;font-size:.98rem;color:var(--ink);line-height:1.4}
.sort__what small{display:block;font-size:.79rem;color:var(--muted);font-style:italic;margin-top:2px}
.sort__answer{display:flex;gap:7px}
.sort__answer input{
  flex:1;min-width:0;padding:7px 10px;border:1px solid var(--line2);border-radius:3px;
  background:var(--parchment);color:var(--ink);font-family:var(--serif);font-size:.9rem;
}
.sort__answer input:focus{outline:2px solid var(--gold-d);outline-offset:1px}
.sort__answer button{
  border:1px solid var(--line2);background:var(--ivory);color:var(--ink2);cursor:pointer;
  border-radius:3px;padding:0 11px;font-family:var(--display);
  font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;
}
.sort__answer button:hover{background:var(--gold-d);border-color:var(--gold-d);color:#1a120b}
.sort__x button{
  border:0;background:transparent;color:var(--line2);cursor:pointer;
  font-size:1.1rem;line-height:1;padding:2px 4px;
}
.sort__x button:hover{color:var(--wine)}
.sort__item.is-done{background:var(--parchment);border-color:var(--line2)}
.sort__item.is-done .sort__what{color:var(--muted);text-decoration:line-through}
.sort__item.is-done .sort__what small{text-decoration:none}
.sort__item.is-done .sort__tick button{background:var(--forest);border-color:var(--forest);color:#f2ecd8}
.sort__add{display:flex;gap:8px;max-width:660px;margin:16px auto 0}
.sort__add input{
  flex:1;padding:9px 12px;border:1px solid var(--line2);border-radius:3px;
  background:var(--ivory);color:var(--ink);font-family:var(--serif);
}
.sort__add input:focus{outline:2px solid var(--gold-d);outline-offset:1px}
@media(max-width:560px){
  .sort__item{gap:9px;padding:10px 11px}
  .sort__answer{flex-direction:column}
  .sort__answer button{padding:6px 11px}
}

/* ── The offer to keep the House on a phone ─────────────────────────────────
   Asked once, at the foot of the page, and never again if the answer is no.
   A browser buries "add to home screen" three menus deep and most people never
   meet it, so the House says it in its own words instead. */
.installbar{
  position:fixed;left:12px;right:12px;bottom:12px;z-index:60;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:13px 16px;border-radius:4px;
  background:var(--dark);border:1px solid var(--gold-d);
  box-shadow:0 18px 40px -18px rgba(0,0,0,.8);
  animation:installin .3s var(--ease,ease) both;
}
@keyframes installin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.installbar{animation:none}}
.installbar__say{margin:0;flex:1;min-width:200px;color:#e4d3ab;font-size:.9rem;line-height:1.55}
.installbar__say b{color:var(--gold-l)}
.installbar__yes,.installbar__no{
  cursor:pointer;border-radius:3px;font-family:var(--display);
  font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;
}
.installbar__yes{
  padding:9px 18px;border:1px solid var(--gold-d);color:#1a120b;
  background:linear-gradient(180deg,var(--gold-l),var(--gold));
}
.installbar__yes:hover{background:var(--gold-l)}
.installbar__no{padding:9px 12px;border:1px solid #3a2c1a;background:transparent;color:#9d8a62}
.installbar__no:hover{color:#e4d3ab;border-color:var(--gold-d)}
.installbar__yes:focus-visible,.installbar__no:focus-visible{outline:2px solid var(--gold-l);outline-offset:2px}
@media(max-width:520px){
  .installbar{left:8px;right:8px;bottom:8px;padding:12px 13px}
  .installbar__say{min-width:100%;font-size:.86rem}
}
/* Once it is running as an app there is no bar to draw. */
@media(display-mode:standalone){.installbar{display:none}}

/* A badge that is a word rather than a count — "waiting", beside tonight's
   card. Gold instead of the notices' wine, because it is an invitation and not
   a pile of things unread. */
.navdrawer__count--gold{background:var(--gold-d);border-color:var(--gold-l);color:#1a120b;font-weight:600}

/* ── Into the card game, from the front door ────────────────────────────────
   The nightly card is the thing that brings people back between now and
   October, and until this button it sat three taps deep behind a hamburger.

   Third in the hero on purpose: the Guild is who we are and the login is the
   door, but this is the thing to actually do tonight. Dark with a gold edge so
   it is plainly its own offer rather than a third shade of the same one.

   It reads the visitor — signed out it invites, signed in with a card still on
   the deck it turns gold and grows a pip, signed in and already drawn it goes
   quiet and simply offers the hand back. nav.js does the reading; the markup
   ships with the signed-out wording so it is right with scripting off too. */
.hero__deal{background:rgba(20,14,8,.55);color:var(--gold-l);border-color:var(--gold);
  box-shadow:inset 0 1px 0 rgba(226,199,127,.18);position:relative}
.hero__deal:hover{background:rgba(20,14,8,.82);color:#fdf3d6;border-color:var(--gold-l);transform:translateY(-2px)}
.hero__deal span[aria-hidden]{font-size:1.2em;line-height:1;margin:-2px 0}
/* There is a card waiting. Gold, and a pip that catches the eye once in a while
   rather than blinking at it. */
/* Brighter than .btn--gold on purpose, with a halo: "Enter the Guild" is
   already gold, and two gold buttons side by side say nothing about which one
   matters tonight. This one reads as lit rather than merely coloured. */
.hero__deal.is-waiting{background:linear-gradient(180deg,#f9e3ad,var(--gold-l));color:#2a1c08;
  border-color:#fdf3d6;box-shadow:0 0 0 3px rgba(226,199,127,.26), 0 12px 28px -12px rgba(0,0,0,.75)}
.hero__deal.is-waiting:hover{background:linear-gradient(180deg,#fdf0cd,#f2d79c);color:#2a1c08;border-color:#fff}
.hero__deal.is-waiting::after{content:"";position:absolute;top:-6px;right:-6px;width:13px;height:13px;
  border-radius:50%;background:var(--wine);border:2px solid #f8edd1;
  animation:dealpip 3.2s var(--ease) infinite}
@keyframes dealpip{0%,74%,100%{transform:scale(1)}82%{transform:scale(1.3)}}
@media(prefers-reduced-motion:reduce){.hero__deal.is-waiting::after{animation:none}}

/* ── And the welcome on the far side of that door ──────────────────────────
   The same panel as the pledge welcome, in gold rather than wine. Deliberately
   the same shape: one says what a Pledge is and what waits beyond, the other
   is the door opening, and they should read as a pair rather than as two
   unrelated announcements. */
.pledgewelcome--sworn{border-top-color:var(--gold)}
.pledgewelcome--sworn .pledgewelcome__mark{background:var(--gold);color:var(--dark)}
.pledgewelcome--sworn .pledgewelcome__lead b{color:var(--gold-d)}
.pledgewelcome--sworn .pledgewelcome__foot b{color:var(--gold-d)}
.pledgewelcome--sworn a{color:var(--wine);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.pledgewelcome--sworn a:hover{color:var(--gold-d)}

/* ── The welcome note, ready to send ───────────────────────────────────────
   Accepting somebody used to end with a redirect and nothing else, so the
   welcome was a thing to remember to send later — which meant never. The
   letter now arrives with the confirmation. */
.welcomenote{
  max-width:760px;margin:0 auto 18px;padding:16px 20px;border-radius:5px;
  background:rgba(44,74,54,.1);border:1px solid var(--forest);
  display:flex;flex-wrap:wrap;align-items:center;gap:12px;
}
.welcomenote__said{flex:1 1 260px;margin:0;font-size:.94rem;color:#22402b;line-height:1.55}
.welcomenote__said b{font-family:var(--display);color:#1b3323}
.welcomenote__go{padding:10px 18px;font-size:.62rem;flex-shrink:0}
.welcomenote__to{font-size:.78rem;color:var(--muted);font-style:italic;flex:1 1 100%}

/* ── The Pigeon Post ───────────────────────────────────────────────────────
   One room for everything addressed to you. The whispers row already had a
   look; this gives it a date and a "you:" for a thread waiting on the other
   person, adds the writing desk above it, and sets the House's own notices
   apart underneath so nobody tries to answer a bell. */
.postdesk{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin:22px 0 8px;padding:16px 18px;border-radius:5px;
  background:rgba(226,199,127,.07);border:1px dashed var(--gold-d);
}
.postdesk__note{font-size:.88rem;color:#cdb98f;font-style:italic}
.postsent{max-width:none;margin-bottom:18px}

.posthead{
  font-family:var(--display);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);margin:34px 0 4px;padding-bottom:8px;
  border-bottom:1px solid rgba(226,199,127,.22);
}
.posthead__sub{font-size:.86rem;color:#a8946c;margin:0 0 14px}

.whisper-row__last{
  color:var(--ink2);margin:2px 0 0;font-size:.9rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.whisper-row__me{color:var(--muted);font-style:italic}
.whisper-row__when{
  display:block;margin-top:3px;font-size:.72rem;color:var(--muted);
  font-variant-numeric:tabular-nums;
}
/* A letter you have not opened sits forward of the others. */
.whisper-row--new{border-color:var(--gold);box-shadow:0 0 0 1px rgba(194,161,77,.35)}

/* The House's voice, set apart: no face, no reply, quieter than a letter. */
.housenote{margin-bottom:12px;opacity:.92}

.postdoors{
  text-align:center;margin:34px 0 0;font-family:var(--display);font-size:.66rem;
  letter-spacing:.14em;text-transform:uppercase;color:#9d8a62;
}
.postdoors a{color:var(--gold);border-bottom:1px solid rgba(194,161,77,.4)}
.postdoors a:hover{color:var(--gold-l)}

/* ── The writing desk ───────────────────────────────────────────────────── */
.writer__all{
  display:flex;align-items:center;gap:11px;margin-bottom:16px;padding:13px 16px;
  border-radius:5px;cursor:pointer;
  background:rgba(110,26,26,.16);border:1px solid var(--wine-l);color:#f3ddc0;
}
.writer__all b{font-family:var(--display);color:var(--gold-l)}
.writer__all input{width:17px;height:17px;accent-color:var(--wine);flex-shrink:0}

.writer__folk{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:9px}
.writer__one{
  display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:4px;cursor:pointer;
  background:rgba(244,234,210,.05);border:1px solid rgba(194,161,77,.28);
  transition:background .16s,border-color .16s;
}
.writer__one:hover{background:rgba(226,199,127,.11);border-color:var(--gold)}
.writer__one input{width:16px;height:16px;accent-color:var(--gold-d);flex-shrink:0}
/* :has so the whole tile lights up when its box is ticked, rather than only
   the box — the tile is what people are actually aiming at. */
.writer__one:has(input:checked){background:rgba(226,199,127,.16);border-color:var(--gold-l)}
.writer__one:has(input:focus-visible){outline:2px solid var(--gold-l);outline-offset:2px}
.writer__face{width:34px;height:34px;flex-shrink:0}
.writer__face img{width:34px;height:34px;border-radius:50%;object-fit:cover;border:1px solid var(--gold-d)}
.writer__face i{
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-style:normal;
  background:linear-gradient(180deg,var(--gold-l),var(--gold));color:var(--dark);
  font-family:var(--display);font-size:.68rem;font-weight:700;
}
.writer__who{display:flex;flex-direction:column;min-width:0}
.writer__who b{font-size:.92rem;color:#f5e9c8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.writer__who small{
  font-family:var(--display);font-size:.54rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--gold-l);
}
.writer__one.is-pledge .writer__who small{color:#9d8a62}
.writer__foot{font-size:.84rem;margin-top:12px;color:#a8946c}

/* ── A letter is waiting ───────────────────────────────────────────────────
   An unread letter used to look exactly like everything else the House had to
   say: an 8px gold dot on the corner of the menu button, the same mark whether
   somebody had written to you or a round had closed.

   A letter is a person waiting on an answer, so it gets its own mark and its
   own colour — an envelope with the flag up, the way a mailbox says it. Blue
   because nothing else on this site is blue: the House is gold and wine
   throughout, so a blue flag can only mean one thing, and the eye finds it
   without being taught.

   The same blue runs through all three places you might meet it: the button,
   the line in the menu, and the letter itself in the Pigeon Post. */
:root{--post:#67a6ee;--post-d:#1d4c8c;--post-ink:#cfe3fb}

.menu-toggle--post::after{
  content:"";position:absolute;top:-11px;right:-13px;width:30px;height:21px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 19' width='27' height='19'%3E%3Crect x='0.6' y='6.4' width='15.4' height='11.6' rx='1.8' fill='%23f7ecd0' stroke='%238a6d2a' stroke-width='1.2'/%3E%3Cpath d='M1.4 7.3 L8.3 12.3 L15.2 7.3' fill='none' stroke='%238a6d2a' stroke-width='1.2' stroke-linejoin='round' stroke-linecap='round'/%3E%3Crect x='16.6' y='0.6' width='2' height='17.4' rx='1' fill='%23241a10'/%3E%3Cpath d='M18.6 1.5 L26.4 4.6 L18.6 7.7 Z' fill='%2367a6ee' stroke='%231d4c8c' stroke-width='1.1' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.7));
  transform-origin:80% 90%;
  animation:postraise .5s var(--ease) both, postsway 5s var(--ease) 1.2s 3;
  pointer-events:none;
}
/* The flag going up, once, as the page settles. */
@keyframes postraise{
  from{opacity:0;transform:translateY(5px) rotate(-16deg) scale(.7)}
  to{opacity:1;transform:none}
}
/* Then a slow lean, three times, and it stops. A mark that moves for ever
   stops being a signal and becomes wallpaper you learn to ignore. */
@keyframes postsway{
  0%,88%,100%{transform:none}
  92%{transform:rotate(-7deg)}
  96%{transform:rotate(4deg)}
}
@media(prefers-reduced-motion:reduce){
  .menu-toggle--post::after{animation:none}
}

/* The line in the menu: blue count, and an envelope so the words are not the
   only thing carrying it. */
.navdrawer__count--post{
  background:var(--post-d);border-color:var(--post);color:#eaf3ff;font-weight:600;
}
.nav .navdrawer a.has-post{color:var(--post-ink)}
.nav .navdrawer a.has-post>span:first-child::before{
  content:"";display:inline-block;width:15px;height:11px;margin-right:8px;vertical-align:-1px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12' width='16' height='12'%3E%3Crect x='0.6' y='0.6' width='14.8' height='10.8' rx='1.6' fill='%23f7ecd0' stroke='%238a6d2a' stroke-width='1.2'/%3E%3Cpath d='M1.4 1.5 L8 6.3 L14.6 1.5' fill='none' stroke='%238a6d2a' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ── and the letter itself, in the room ─────────────────────────────────── */
.whisper-row--new{
  position:relative;
  border-color:var(--post);
  box-shadow:0 0 0 1px rgba(103,166,238,.4), 0 10px 26px -18px rgba(29,76,140,.9);
  background-image:linear-gradient(100deg,rgba(103,166,238,.13),transparent 62%);
}
/* The flag flies on the letter too, so the room and the button agree. */
.whisper-row--new::before{
  content:"";position:absolute;top:-7px;left:-7px;width:17px;height:23px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 19' width='14' height='19'%3E%3Crect x='1' y='0.6' width='2' height='17.4' rx='1' fill='%231d4c8c'/%3E%3Cpath d='M3 1.5 L12.8 4.8 L3 8.1 Z' fill='%2367a6ee' stroke='%231d4c8c' stroke-width='1.1' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.6));
}
.whisper-row--new .whisper-row__last{color:var(--ink);font-weight:600}
.whisper-unread{background:var(--post-d);border:1px solid var(--post);color:#eaf3ff}

/* A count of what is waiting, on the heading, so the room says it too. */
.posthead__count{
  display:inline-block;margin-left:9px;padding:1px 9px;border-radius:999px;
  background:var(--post-d);border:1px solid var(--post);color:#eaf3ff;
  font-family:var(--serif);font-size:.66rem;letter-spacing:.03em;text-transform:none;
}

/* An outline button carries no fill of its own, so on the dark pages it needs
   the light gold the page gives its links — the dark gold it wears by default
   is meant for parchment, and on this ground it all but disappears. The rule
   above deliberately stops giving buttons the link colour, so these have to
   ask for it. */
body.tavern-page a.btn--outline,
body.guild-page a.btn--outline{color:var(--gold-l);border-color:var(--gold)}

/* ── Reading a letter you wrote yourself ───────────────────────────────────
   The thread had two bubbles and both were unreadable, in opposite ways.

   Yours were a translucent gold wash — which over the dark ground of this page
   flattens to brown — carrying the same dark ink the cream bubble uses. Dark
   brown on brown: a contrast of 1.38, where 4.5 is the floor for text. You
   could see that a letter was there and not a word of what it said.

   And on the other bubble, which is cream, the timestamp was taking the page's
   pale sand .muted — 1.78 on that ground. .compose and .note both carry an
   override for exactly this; .whisper-msg never got one.

   Both are solid cards now, differing by tint and by which side they sit on,
   the way the letters in the Pigeon Post do. */
.whisper-msg--me{background:var(--parchment2);border-color:var(--gold-d)}
body.tavern-page .whisper-msg .muted{color:#6a5535}

/* A field label is wine, which is right on parchment and invisible on the dark
   ground — 1.48 for "Send a whisper" over the damask. Most forms on these
   pages sit inside .compose, a near-opaque cream card, which is why this went
   unnoticed: only the two bare ones were affected, the reply box on a letter
   and the writing desk itself. Light gold out in the open, wine back again
   inside a card. */
body.tavern-page .field label{color:var(--gold-l)}
body.tavern-page .compose .field label{color:var(--wine)}

/* Said on the Carrier Pigeon page, because the two names sound alike and the
   bird is almost never what a signed-in guildmate wants. */
.pigeonnote{
  margin:12px 0 0;padding:11px 15px;border-left:3px solid var(--gold);
  background:rgba(194,161,77,.09);border-radius:0 4px 4px 0;
  font-size:.94rem;color:var(--ink2);line-height:1.6;
}
.pigeonnote b{color:var(--wine)}
.pigeonnote a{color:var(--wine);font-weight:600;text-decoration:underline;text-underline-offset:2px}

/* ── The Cardwright's bench ────────────────────────────────────────────────
   The card is the whole point of the page, so it gets the room and the light,
   and the controls sit beside it in a column narrow enough that the eye keeps
   going back to the card. */
.bench{display:grid;grid-template-columns:340px 1fr;gap:30px;align-items:start;margin-top:26px}
/* One column on a phone, and the card goes above the tools — you look at the
   thing before you reach for what changes it. */
@media(max-width:820px){
  .bench{grid-template-columns:1fr}
  .bench__stage{order:-1}
}

.bench__side{display:flex;flex-direction:column;gap:16px}
.bench__box{
  padding:18px 20px;border-radius:5px;
  background:rgba(244,234,210,.05);border:1px solid rgba(194,161,77,.32);
}
.bench__k{
  margin:0 0 11px;font-family:var(--display);font-size:.6rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold);
}
.bench__lab{
  display:flex;justify-content:space-between;align-items:baseline;
  font-family:var(--display);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-l);margin:14px 0 5px;
}
.bench__lab span{font-family:var(--serif);letter-spacing:0;color:#cdb98f;font-size:.8rem;
  font-variant-numeric:tabular-nums}
.bench__in{
  width:100%;padding:9px 11px;border-radius:3px;
  border:1px solid var(--gold-d);background:var(--dark2);color:#f5e9c8;
  font-family:var(--serif);font-size:.94rem;
}
.bench__in:focus{outline:2px solid var(--gold-l);outline-offset:1px}
.bench__slide{width:100%;accent-color:var(--gold);margin:0}
.bench__note{margin:9px 0 0;font-size:.8rem;color:#a8946c;line-height:1.5}
.bench__note b{color:var(--gold-l)}
.bench__note--wide{text-align:center;margin-top:-4px}
.bench__box input[type=file]{
  width:100%;font-size:.82rem;color:#cdb98f;
}

/* The five suits, as chips rather than a dropdown — five is few enough to show
   all of them, and the one that is chosen should be visible without opening
   anything. */
.bench__suits{display:flex;flex-wrap:wrap;gap:6px}
.bench__suit{cursor:pointer}
.bench__suit input{position:absolute;opacity:0;width:0;height:0}
.bench__suit span{
  display:block;padding:6px 11px;border-radius:3px;
  border:1px solid rgba(194,161,77,.35);background:rgba(244,234,210,.05);
  font-family:var(--display);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;
  color:#cdb98f;transition:background .15s,border-color .15s,color .15s;
}
.bench__suit:hover span{border-color:var(--gold);color:var(--gold-l)}
/* Which chip is chosen has to be answered by the radio, not by a class the
   server wrote. Clicking one only redraws the card — the page does not reload —
   so an .is-on painted on at render time stayed exactly where it was, and
   pressing Major lit nothing. The class is kept for the first paint and for a
   browser with scripting off; :checked is what actually moves. */
.bench__suit.is-on span,
.bench__suit input:checked + span{background:rgba(226,199,127,.18);border-color:var(--gold-l);color:#f8edd1}
/* And it has to be able to move OFF the one the server marked, or the old
   choice would stay lit beside the new one. */
.bench__suit.is-on input:not(:checked) + span{
  background:rgba(244,234,210,.05);border-color:rgba(194,161,77,.35);color:#cdb98f;
}
.bench__suit input:focus-visible + span{outline:2px solid var(--gold-l);outline-offset:2px}

.bench__take{width:100%;justify-content:center}

/* The stage. A card is an object, so it gets an object's shadow. */
/* The card sticks to the top of the screen while she works down the column of
   tools beside it. The tools are a long column and the card is the thing she
   is judging; scrolling to a slider and losing sight of what it does is the
   one thing this page must not do. */
.bench__stage{display:flex;justify-content:center;align-items:flex-start;padding-top:4px;
  position:sticky;top:96px;align-self:start;max-height:calc(100vh - 120px)}
.bench__stage .bench__card{max-height:calc(100vh - 130px);width:auto}
@media(max-width:820px){.bench__stage{position:static;max-height:none}
  .bench__stage .bench__card{max-height:none;width:429px}}
.bench__card{
  width:429px;max-width:100%;height:auto;border-radius:9px;
  box-shadow:0 40px 70px -34px rgba(0,0,0,.95), 0 0 0 1px rgba(226,199,127,.22);
  transition:opacity .18s;
}
/* Mid-cut. Dimmed rather than hidden, so the card does not blink out and back
   every time a slider moves a pixel. */
.bench__card.is-cutting{opacity:.45}
@media(prefers-reduced-motion:reduce){.bench__card{transition:none}}

.bench__empty{
  width:429px;max-width:100%;aspect-ratio:825/1425;border-radius:9px;
  border:1px dashed rgba(194,161,77,.45);background:rgba(244,234,210,.03);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;padding:34px;text-align:center;
}
.bench__empty span{font-size:2.6rem;color:var(--gold-d)}
.bench__empty p{margin:0;color:#a8946c;font-size:.94rem}

/* Refused, but told why. */
.nokeys{
  padding:34px 32px 28px;border-radius:5px;text-align:center;
  background:rgba(244,234,210,.05);border:1px solid rgba(194,161,77,.35);
  border-top:3px solid var(--wine);position:relative;
}
.nokeys__mark{
  position:absolute;top:-17px;left:50%;transform:translateX(-50%);
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:var(--wine);color:var(--gold-l);font-size:.95rem;
  box-shadow:0 0 0 4px #241a10;
}
.nokeys h2{color:#f8edd1;margin:6px 0 12px;font-size:1.3rem}
.nokeys__lead{margin:0;color:#e9dcc2;font-size:1.02rem;line-height:1.6}
.nokeys__lead b{color:var(--gold-l);font-family:var(--display)}
.nokeys__lead code{
  font-family:ui-monospace,Consolas,monospace;font-size:.9rem;
  background:rgba(0,0,0,.35);border:1px solid rgba(194,161,77,.3);
  border-radius:3px;padding:1px 7px;color:#cdb98f;
}
.nokeys__note{margin:14px 0 0;color:#a8946c;font-size:.9rem;line-height:1.55}
.nokeys__acts{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:22px}

/* The back, small, beside the controls — it never changes from card to card,
   so it does not need the stage. */
.bench__back{
  width:100%;height:auto;border-radius:7px;display:block;
  box-shadow:0 18px 34px -20px rgba(0,0,0,.9), 0 0 0 1px rgba(226,199,127,.18);
}

/* The Gallery, on the bench. Thumbnails only and small — this is a picker, not
   a second gallery, and what she is choosing she will recognise at a glance. */
.bench__wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:7px}
.bench__pick{margin:0}
.bench__pick button{
  display:block;width:100%;padding:0;border:1px solid rgba(194,161,77,.35);border-radius:4px;
  background:none;cursor:pointer;overflow:hidden;line-height:0;
  transition:border-color .16s,transform .16s;
}
.bench__pick button:hover{border-color:var(--gold-l);transform:translateY(-2px)}
.bench__pick button:focus-visible{outline:2px solid var(--gold-l);outline-offset:2px}
.bench__pick img{width:100%;aspect-ratio:1;object-fit:cover;display:block}

/* ── The deck so far ───────────────────────────────────────────────────────
   A shelf under the bench. Cards are objects, so they get an object's shadow
   and lift a little when reached for — and they are shown at the size you
   would actually judge one at, not as a contact sheet of stamps. */
.bench__keep{margin:0}
.bench__deck{margin-top:44px;border-top:1px solid rgba(226,199,127,.2);padding-top:8px}
.bench__shelf{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:20px}
.bench__slot{display:flex;flex-direction:column;gap:8px;align-items:center;text-align:center}
.bench__slot img{
  width:100%;height:auto;border-radius:6px;display:block;
  box-shadow:0 16px 30px -18px rgba(0,0,0,.95), 0 0 0 1px rgba(226,199,127,.2);
  transition:transform .16s var(--ease),box-shadow .16s var(--ease);
}
.bench__slot:hover img{transform:translateY(-3px);box-shadow:0 22px 38px -18px rgba(0,0,0,.95), 0 0 0 1px var(--gold)}
.bench__slot b{
  font-family:var(--display);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold-l);line-height:1.4;
}
.bench__slotacts{display:flex;gap:6px}
.bench__slotacts .btn{padding:4px 10px;font-size:.56rem}
@media(prefers-reduced-motion:reduce){.bench__slot img{transition:none}.bench__slot:hover img{transform:none}}