/* The Leonida Letter: a cream newspaper sheet inside the dark Vice After Dark site (owner 2026-10-21).
   Bodoni Moda for heads, Newsreader for text; ink, flamingo and teal on paper. No inline styles anywhere (CSP). */
@font-face{font-family:"Bodoni Moda";font-style:normal;font-weight:400 900;font-display:swap;src:url(../fonts/bodoni-moda.woff2) format("woff2")}
@font-face{font-family:"Bodoni Moda";font-style:italic;font-weight:400 900;font-display:swap;src:url(../fonts/bodoni-moda-italic.woff2) format("woff2")}
@font-face{font-family:"Newsreader";font-style:normal;font-weight:380 620;font-display:swap;src:url(../fonts/newsreader.woff2) format("woff2")}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:380 620;font-display:swap;src:url(../fonts/newsreader-italic.woff2) format("woff2")}

.lt-page {
  --paper: #f7f0e4; --paper-2: #efe5d3; --ink: #1a0a2b; --ink-soft: #4a3c58; --ink-mute: #6f6279;
  --flamingo: #e2407a; --flamingo-dk: #c22f66; --teal: #168c96; --teal-dk: #0f6d75; --gold: #b8925a;
  --hair: rgba(26, 10, 43, .2); --didone: "Bodoni Moda", Didot, "Bodoni 72", "Bodoni MT", Georgia, serif;
  --text: "Newsreader", Georgia, "Times New Roman", serif;
  background: #12071e;
}
.lt-page::before {             /* the owner's waterfront photo, fixed behind the sheet (a pseudo element, so iOS keeps it still) */
  content: ""; position: fixed; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(18, 7, 30, .55), rgba(18, 7, 30, .82) 60%, rgba(18, 7, 30, .94)),
              url(/assets/letter/bg-waterfront-sm.jpg) center 30% / cover no-repeat;
}
@media (min-width: 1100px) { .lt-page::before { background-image: linear-gradient(180deg, rgba(18, 7, 30, .5), rgba(18, 7, 30, .8) 60%, rgba(18, 7, 30, .94)), url(/assets/letter/bg-waterfront.jpg); } }

.lt { padding: clamp(14px, 4vw, 56px) clamp(10px, 3vw, 40px) 72px; }
.paper {
  position: relative; max-width: 1140px; margin: 0 auto; color: var(--ink); font-family: var(--text);
  background: radial-gradient(120% 80% at 50% 0%, #fbf6ec 0%, var(--paper) 55%, var(--paper-2) 100%);
  padding: clamp(18px, 4.5vw, 64px) clamp(16px, 5vw, 72px) clamp(26px, 4vw, 52px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55), 0 0 0 1px rgba(184, 146, 90, .35);
  border-radius: 2px;
}
.paper::after { content: ""; position: absolute; inset: 9px; border: 1px solid var(--hair); pointer-events: none; }
.paper--narrow { max-width: 860px; }
.paper a { color: var(--flamingo-dk); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.paper a:hover { color: var(--teal-dk); }
.paper :focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 2px; }
.muted { color: var(--ink-mute); font-style: italic; }

/* ---------- members bar under the site nav (owner 2026-10-22: one tidy row that lines up with the Letter's look).
   Left: The Letter + its tabs. Right: a "Staff" menu for staff, then Sign up / Log in or your account chip. */
.membar { position: relative; z-index: 40; background: #f7f0e4; color: #1a0a2b; border-bottom: 4px double #1a0a2b; box-shadow: 0 8px 24px rgba(0, 0, 0, .35); }
.membar__in { max-width: 1240px; margin: 0 auto; min-height: 56px; display: flex; align-items: center; gap: 8px 22px;
  padding: 0 max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px)); }
.membar__nav { display: flex; align-items: center; gap: 0 22px; min-width: 0; flex: 1 1 auto; }
.membar__tabs { display: flex; align-items: center; flex-wrap: nowrap; gap: 0 20px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.membar__tabs::-webkit-scrollbar { display: none; }
.membar__tabs a { flex: none; }
.membar a { text-decoration: none; }
.membar__nav a { display: inline-flex; align-items: center; min-height: 52px; color: #1a0a2b; white-space: nowrap;
  font: 700 12.5px/1.2 "Newsreader", Georgia, serif; letter-spacing: .14em; text-transform: uppercase; box-shadow: inset 0 -2px 0 transparent; transition: color .15s, box-shadow .15s; }
.membar__nav a:hover { color: #c22f66; box-shadow: inset 0 -2px 0 rgba(226, 64, 122, .45); }
.membar__nav a[aria-current="page"] { color: #c22f66; box-shadow: inset 0 -2px 0 #e2407a; }
.membar__nav a.membar__home { gap: 8px; font: 700 15px/1.2 "Bodoni Moda", Didot, Georgia, serif; letter-spacing: .12em; }
.membar__home .sunmini { width: 26px; height: 13px; fill: #e2407a; flex: none; display: block; }
.membar__right { display: flex; align-items: center; gap: 10px; margin-left: auto; flex: none; }
.membar__acct { display: flex; align-items: center; gap: 8px; }
.membar__btn { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 16px; border: 1.5px solid #1a0a2b; border-radius: 999px;
  background: transparent; color: #1a0a2b; font: 700 12px/1 "Newsreader", Georgia, serif; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; cursor: pointer; }
.membar .membar__btn:hover { background: #1a0a2b; color: #f7f0e4; }
.membar .membar__btn--join { background: #e2407a; border-color: #e2407a; color: #fff; }
.membar .membar__btn--join:hover { background: #c22f66; border-color: #c22f66; color: #fff; }

/* your account chip: picture, name, top badge. Same 40 px height as the buttons; the text never changes colour on hover */
.mechip { display: inline-flex; align-items: center; gap: 9px; height: 40px; max-width: 100%; padding: 0 14px 0 4px; border: 1.5px solid rgba(26, 10, 43, .22); border-radius: 999px;
  background: #fffdf8; color: #1a0a2b; transition: border-color .15s, box-shadow .15s; }
.membar .mechip:hover, .membar .mechip:focus-visible { color: #1a0a2b; border-color: #1a0a2b; box-shadow: 0 2px 10px rgba(26, 10, 43, .14); }
.mechip .avatar { --av: 32px; box-shadow: none; }
.mechip__name { font: 700 15.5px/1 "Bodoni Moda", Didot, Georgia, serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 11em; }
.mechip .badge-ico { width: 20px; height: 20px; display: block; flex: none; }

/* staff menu: one "Staff" button that opens the portal links (a native <details>, no script needed to open it) */
.staffmenu { position: relative; }
.staffmenu > summary { list-style: none; gap: 7px; }
.staffmenu > summary::-webkit-details-marker { display: none; }
.staffmenu > summary::after { content: ""; width: 7px; height: 7px; margin: -3px 0 0 2px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); transition: transform .15s; }
.staffmenu[open] > summary { background: #1a0a2b; color: #f7f0e4; }
.staffmenu[open] > summary::after { transform: rotate(-135deg); margin-top: 3px; }
.staffmenu__list { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; min-width: 230px; padding: 6px; display: grid;
  background: #fffdf8; border: 1px solid rgba(26, 10, 43, .2); border-radius: 12px; box-shadow: 0 16px 40px rgba(18, 7, 30, .28); }
.staffmenu__list a { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 8px; color: #1a0a2b; }
.staffmenu__list a:hover, .staffmenu__list a:focus-visible { background: #f3eadb; color: #1a0a2b; }
.staffmenu__list b { font: 700 15px/1.2 "Bodoni Moda", Didot, Georgia, serif; }
.staffmenu__list small { font: 400 13px/1.3 "Newsreader", Georgia, serif; color: #6f6279; }
.staffmenu__list a.is-here { background: #1a0a2b; color: #f7f0e4; }
.staffmenu__list a.is-here small { color: #e2407a; font-weight: 600; }
.staffmenu__list a.is-here b::before { content: "● "; color: #e2407a; font-size: 11px; vertical-align: 2px; }
.staffmenu.is-on > summary { border-color: #e2407a; }
.staffmenu__on { padding-left: 8px; margin-left: 2px; border-left: 1px solid rgba(26, 10, 43, .25); color: #c22f66; letter-spacing: .06em; text-transform: none; font: 700 13.5px/1 "Bodoni Moda", Didot, Georgia, serif; }
.staffmenu[open] .staffmenu__on { color: #ff8fb5; border-color: rgba(247, 240, 228, .3); }
@media (max-width: 480px) { .staffmenu__on { display: none; } }

@media (max-width: 1000px) { .membar__nav { gap: 0 16px; } .membar__tabs { gap: 0 16px; } .membar__nav a { letter-spacing: .1em; } }
@media (max-width: 760px) {          /* phones: The Letter + you on row 1, the tabs on their own full-width row below */
  .membar__in { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "home right" "tabs tabs"; gap: 0 10px; min-height: 0; }
  .membar__nav { display: contents; }
  .membar__home { grid-area: home; }
  .membar__right { grid-area: right; gap: 8px; }
  /* owner 2026-10-22: the 3×2 tab grid took too much of the screen. One swipeable row of small pills instead, running edge to
     edge with a fade at the right so it reads as "more this way"; letter.js scrolls the current tab into view. */
  .membar__tabs { grid-area: tabs; display: flex; gap: 6px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
    margin: 0 calc(-1 * max(16px, env(safe-area-inset-right, 0px))) 0 calc(-1 * max(16px, env(safe-area-inset-left, 0px)));
    padding: 2px max(16px, env(safe-area-inset-right, 0px)) 10px max(16px, env(safe-area-inset-left, 0px));
    scroll-padding-inline: 16px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 32px), transparent);
            mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 32px), transparent); }
  .membar__nav .membar__tabs a { min-height: 34px; padding: 0 13px; border: 1px solid rgba(26, 10, 43, .2); border-radius: 999px;
    font-size: 11px; letter-spacing: .08em; scroll-snap-align: start; box-shadow: none; background: rgba(255, 255, 255, .45); }
  .membar__nav .membar__tabs a:hover { box-shadow: none; border-color: #c22f66; }
  .membar__nav .membar__tabs a[aria-current="page"] { background: #1a0a2b; border-color: #1a0a2b; color: #f7f0e4; box-shadow: none; }
  .membar__nav a { min-height: 46px; }
  .membar__nav a.membar__home { min-height: 54px; }
  .mechip__name { max-width: 6.5em; }
  .membar__btn { min-height: 44px; padding: 0 14px; font-size: 12px; }
  .mechip { height: 44px; }
}
@media (max-width: 480px) {          /* small phones: your picture + badge only (owner: badges, not long titles, on mobile) */
  .mechip__name { display: none; }
  .mechip { gap: 6px; padding-right: 10px; }
  .staffmenu > summary { padding: 0 12px; }
  .membar__nav a.membar__home { min-width: 0; overflow: hidden; }
}

/* ---------- masthead (logo B "Deco Didone": sunburst, THE, LEONIDA, — LETTER —) */
.mast { text-align: center; margin: 0 0 10px; }
.mast__link { display: inline-block; color: var(--ink) !important; text-decoration: none; }
.mast__sun { display: block; width: clamp(150px, 30vw, 300px); height: auto; margin: 0 auto; fill: var(--flamingo); }
.mast__sun .mast__rule { fill: var(--ink); }
.mast__name { margin: 0; font-family: var(--didone); display: flex; flex-direction: column; align-items: center; line-height: 1; }
.mast__the { font-weight: 600; font-size: clamp(11px, 1.7vw, 17px); letter-spacing: .55em; margin: 10px 0 4px .55em; text-transform: uppercase; }
.mast__leonida { font-weight: 700; font-size: clamp(46px, 11.5vw, 128px); letter-spacing: .01em; text-transform: uppercase; font-variation-settings: "opsz" 96; }
.mast__letter { display: flex; align-items: center; gap: clamp(10px, 2vw, 22px); font-weight: 500; text-transform: uppercase;
  font-size: clamp(12px, 2.1vw, 21px); letter-spacing: .62em; margin: 8px 0 0 .62em; }
.mast__letter::before, .mast__letter::after { content: ""; width: clamp(34px, 9vw, 120px); height: 2px; background: var(--flamingo); }
.mast__letter::before { margin-left: -.62em; }

/* ---------- dateline between Art Deco double rules */
.dateline { border-top: 4px double var(--ink); border-bottom: 4px double var(--ink); margin: 14px 0 clamp(22px, 4vw, 40px); padding: 7px 4px; text-align: center; }
.dateline p { margin: 0; font: 600 clamp(10.5px, 1.5vw, 13px)/1.5 var(--text); letter-spacing: .16em; text-transform: uppercase; font-variant-numeric: lining-nums; }
.dateline span { color: var(--flamingo); margin: 0 .7em; }

/* ---------- headlines */
.ed__kicker, .box__kicker { margin: 0 0 8px; font: 700 12px/1.4 var(--text); letter-spacing: .2em; text-transform: uppercase; color: var(--teal-dk); }
.ed__title { margin: 0 0 12px; font: 700 clamp(32px, 5.6vw, 66px)/1.04 var(--didone); letter-spacing: -.01em; text-wrap: balance; font-variation-settings: "opsz" 72; }
.ed__dek { margin: 0 0 16px; font: italic 400 clamp(19px, 2.3vw, 25px)/1.38 var(--text); color: var(--ink-soft); text-wrap: pretty; }
.ed__byline { margin: 0; font: 600 12.5px/1.6 var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); }
.ed__byline b { color: var(--ink); font-weight: 700; }
.ed__byline .sep { color: var(--flamingo); margin: 0 .6em; }
.ed__head { text-align: center; max-width: 900px; margin: 0 auto clamp(22px, 4vw, 38px); padding-bottom: 20px; border-bottom: 1px solid var(--hair); }
.ed__draft { margin: 0 0 18px; padding: 8px 12px; text-align: center; background: var(--ink); color: var(--paper); font: 700 12px/1.4 var(--text); letter-spacing: .16em; text-transform: uppercase; }

/* ---------- body copy */
.ed__body { font-size: clamp(18px, 1.35vw, 19.5px); line-height: 1.62; hyphens: auto; -webkit-hyphens: auto; font-variant-numeric: oldstyle-nums proportional-nums; }
.ed__body p { margin: 0 0 1em; text-wrap: pretty; }
.ed__sec { margin: 0 0 1.4em; }
.ed__sec h2 { column-span: all; margin: 1.3em 0 .7em; padding-top: .7em; border-top: 4px double var(--ink); font: 700 clamp(24px, 2.8vw, 32px)/1.15 var(--didone); text-wrap: balance; }
.ed__sec h3 { margin: 1.1em 0 .4em; font: 700 13px/1.4 var(--text); letter-spacing: .18em; text-transform: uppercase; color: var(--teal-dk); }
.ed__sec--lead > p:first-child::first-letter {
  float: left; font: 700 5.1em/.8 var(--didone); margin: .06em .09em 0 0; color: var(--flamingo); font-variation-settings: "opsz" 96;
}
.ed__sec--lead > p:first-child::first-line { font-variant: small-caps; letter-spacing: .03em; }
.ed__body blockquote { break-inside: avoid; margin: 1.2em 0; padding: .9em 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink);
  font: italic 500 1.32em/1.35 var(--didone); text-align: center; color: var(--ink); }
.ed__body blockquote::before { content: "\201C"; display: block; height: .45em; font-size: 2.1em; line-height: .9; color: var(--flamingo); }
.ed__body ul { margin: 0 0 1em; padding-left: 1.1em; }
.ed__body li { margin: 0 0 .45em; padding-left: .2em; }
.ed__body li::marker { content: "◆  "; color: var(--flamingo); font-size: .7em; }
.ed__body strong { font-weight: 620; }
.ed__body .sources { margin-top: 1.6em; padding-top: .9em; border-top: 1px solid var(--hair); font-size: .78em; line-height: 1.55; font-style: italic; color: var(--ink-soft); hyphens: manual; }
hr.deco { border: 0; height: 14px; margin: 1.6em auto; max-width: 320px; position: relative; break-inside: avoid; column-span: all;
  background: linear-gradient(var(--ink), var(--ink)) left 50% / 42% 1px no-repeat, linear-gradient(var(--ink), var(--ink)) right 50% / 42% 1px no-repeat; }
hr.deco::before { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; transform: translate(-50%, -50%) rotate(45deg); background: var(--flamingo); }
.ed__sec { max-width: 44em; margin-left: auto; margin-right: auto; }

/* ---------- recap cards (owner 2026-10-22: images, less wall of text, the best Leonida news first) */
.ed__body .countdown-strip { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 4px 12px; margin: 0 auto 1.6em; max-width: 44em;
  padding: 12px 16px; background: var(--ink); color: var(--paper); text-align: center; }
.countdown-strip b { font: 700 2.2em/1 var(--didone); color: #ff7aa6; }
.countdown-strip span { font: 700 13px/1.3 var(--text); letter-spacing: .2em; text-transform: uppercase; }
.countdown-strip small { flex-basis: 100%; font: italic 14px/1.4 var(--text); color: #cfc3dc; }
.stories { display: grid; gap: clamp(26px, 3.5vw, 40px); margin: 0 0 1.6em; }
@media (min-width: 900px) { .stories { grid-template-columns: 1fr 1fr; column-gap: 40px; } .story--lead { grid-column: 1 / -1; } }
.story { scroll-margin-top: 130px; min-width: 0; }
.story__fig { margin: 0 0 14px; }
.story__fig img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid var(--hair); background: var(--paper-2); }
.story__fig figcaption { margin-top: 5px; text-align: right; font: italic 12.5px/1.4 var(--text); color: var(--ink-mute); }
.story__kicker { margin: 0 0 6px; font: 700 11.5px/1.4 var(--text); letter-spacing: .2em; text-transform: uppercase; color: var(--teal-dk); }
.story__title { margin: 0 0 8px; font: 700 clamp(22px, 2.4vw, 28px)/1.15 var(--didone); text-wrap: balance; }
.story__take { margin: 0 0 .8em; font-size: 1.06em; line-height: 1.55; font-weight: 500; }
.story .ed__sec { max-width: none; margin: 0; font-size: .96em; color: var(--ink-soft); }
.story__more { margin: .4em 0 0; font: 700 13px/1.4 var(--text); letter-spacing: .1em; text-transform: uppercase; }
.story__more a { text-decoration: none; }
@media (min-width: 900px) {
  .story--lead { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 34px; align-items: center; padding-bottom: clamp(26px, 3.5vw, 40px); border-bottom: 4px double var(--ink); }
  .story--lead .story__fig { margin: 0; }
  .story--lead .story__title { font-size: clamp(28px, 3vw, 38px); }
}
.watch { margin: 0 0 1.6em; }
.watch__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 220px)); justify-content: center; gap: 18px; }
.wcard { display: grid; gap: 6px; color: var(--ink) !important; text-decoration: none; }
.wcard__img { display: block; aspect-ratio: 9 / 16; border-radius: 10px; overflow: hidden; border: 1px solid var(--hair); background: var(--ink); }
.wcard__img img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: transform .3s; }
.wcard:hover img { transform: scale(1.04); }
.wcard__ep { font: 700 11px/1.3 var(--text); letter-spacing: .16em; text-transform: uppercase; color: var(--teal-dk); }
.wcard b { font: 700 17px/1.25 var(--didone); }
.wcard:hover b { color: var(--flamingo-dk); }
.ed__fine { margin: clamp(26px, 4vw, 40px) 0 0; padding-top: 14px; border-top: 4px double var(--ink); font: italic 13.5px/1.55 var(--text); color: var(--ink-mute); text-align: center; }

/* ---------- section labels */
.sect { display: flex; align-items: center; gap: 14px; margin: clamp(28px, 4vw, 44px) 0 16px; font: 700 13px/1.3 var(--text); letter-spacing: .24em; text-transform: uppercase; }
.sect::after { content: ""; flex: 1; border-top: 4px double var(--ink); }
.sect span { color: var(--flamingo-dk); letter-spacing: .1em; }

/* ---------- buttons + forms */
.lt-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 22px; border: 1.5px solid var(--ink);
  background: var(--ink); color: var(--paper) !important; font: 700 13px/1.2 var(--text); letter-spacing: .16em; text-transform: uppercase; text-decoration: none;
  border-radius: 0; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.lt-btn:hover { background: var(--flamingo); border-color: var(--flamingo); color: #fff !important; }
.lt-btn--ghost { background: transparent; color: var(--ink) !important; }
.lt-btn--ghost:hover { background: var(--ink); border-color: var(--ink); color: var(--paper) !important; }
.lt-btn--danger { background: transparent; color: #a3123f !important; border-color: #a3123f; }
.lt-btn--danger:hover { background: #a3123f; border-color: #a3123f; color: #fff !important; }
.lt-btn--big { min-height: 52px; padding: 14px 28px; font-size: 14px; }
.lt-btn--block { display: flex; width: 100%; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 6px; }
.cta-row__alt { margin: 0; font: italic 17px/1.4 var(--text); color: var(--ink-mute); }
.cta-row__alt a { font-style: normal; font-weight: 700; color: var(--flamingo-dk); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.cta-row__alt a:hover { color: var(--teal-dk); }
.cta-row .lt-btn { text-align: center; }
@media (max-width: 560px) { .cta-row .lt-btn { width: 100%; } .cta-row__alt { width: 100%; text-align: center; } }
.lead--soon .ed__dek { max-width: 34em; margin-bottom: 22px; }
.lt-btn--sm { min-height: 36px; padding: 6px 14px; font-size: 11.5px; }
.lt-btn[disabled] { opacity: .5; cursor: not-allowed; }
.lt-link { font: 700 13px/1.4 var(--text); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; }
.form { margin: 0 auto; max-width: 560px; }
.field { margin: 0 0 18px; }
.field label { display: block; margin: 0 0 6px; font: 700 12.5px/1.4 var(--text); letter-spacing: .14em; text-transform: uppercase; }
.field label small { font-weight: 500; letter-spacing: .04em; text-transform: none; color: var(--ink-mute); font-style: italic; font-size: 13px; }
.paper input[type=email], .paper input[type=text], .paper input[type=url], .paper textarea, .paper select {
  width: 100%; min-height: 48px; padding: 11px 14px; border: 1.5px solid var(--ink); border-radius: 0; background: #fffdf8; color: var(--ink);
  font: 400 18px/1.4 var(--text); box-shadow: inset 0 1px 0 rgba(26, 10, 43, .06); appearance: none; -webkit-appearance: none;
}
.paper textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
.paper input:focus, .paper textarea:focus, .paper select:focus { outline: 2px solid var(--teal); outline-offset: 1px; border-color: var(--teal); }
.paper input[aria-invalid=true] { border-color: #a3123f; }
.field__hint { margin: 6px 0 0; font: italic 14px/1.4 var(--text); color: var(--ink-mute); }
.field__err, .form__msg.err { margin: 6px 0 0; font: 600 15px/1.4 var(--text); color: #a3123f; }
.field__err:empty { display: none; }
.form__msg { margin: 14px 0 0; font: 500 17px/1.45 var(--text); min-height: 1px; }
.form__msg.ok { color: var(--teal-dk); }
.hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.box__fine { margin: 14px 0 0; font: italic 14px/1.5 var(--text); color: var(--ink-mute); }
.note { padding: 12px 16px; border: 1px solid var(--hair); background: rgba(255, 255, 255, .45); font-size: 16px; }
.note--ok { border-color: var(--teal); }
.note--err { border-color: #a3123f; color: #7d0f31; }

/* ---------- front page */
.front { display: grid; gap: clamp(26px, 4vw, 52px); }
@media (min-width: 960px) { .front { grid-template-columns: minmax(0, 1fr) 300px; } .front__side { border-left: 1px solid var(--hair); padding-left: 34px; } }
.lead { text-align: left; }
.lead__title { margin: 0 0 12px; font: 700 clamp(30px, 4.6vw, 54px)/1.05 var(--didone); text-wrap: balance; }
.lead__title a { color: var(--ink); text-decoration: none; }
.lead__title a:hover { color: var(--flamingo-dk); }
.lead__excerpt { margin: 0 0 16px; font-size: clamp(18px, 1.5vw, 20px); line-height: 1.6; }
.lead__excerpt::first-letter { float: left; font: 700 4.3em/.8 var(--didone); margin: .05em .08em 0 0; color: var(--flamingo); }
.lead .ed__byline { margin-bottom: 18px; }
.box { margin: 0 0 28px; padding: 20px 20px 22px; border-top: 4px double var(--ink); border-bottom: 1px solid var(--ink); }
.box__title { margin: 0 0 8px; font: 700 26px/1.1 var(--didone); }
.box p { margin: 0 0 12px; font-size: 17px; line-height: 1.5; }
.box--join { background: var(--ink); color: var(--paper); border: 0; box-shadow: inset 0 0 0 1px rgba(184, 146, 90, .6), inset 0 0 0 5px var(--ink), inset 0 0 0 6px rgba(184, 146, 90, .6); padding: 24px; }
.box--join .box__kicker { color: #7fd6dd; }
.box--join .box__fine, .box--join .box__fine a { color: #cfc3dc; }
.box--join .box__alt { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid rgba(247, 240, 228, .22); font: italic 15.5px/1.4 var(--text); color: #cfc3dc; text-align: center; }
.box--join .box__alt a { font-style: normal; font-weight: 700; color: #fff; text-decoration: none; border-bottom: 1px solid #e2407a; padding-bottom: 1px; }
.box--join .box__alt a:hover { color: #7fd6dd; border-color: #7fd6dd; }
.box--join .lt-btn { background: var(--flamingo); border-color: var(--flamingo); }
.box--join .lt-btn:hover { background: var(--paper); border-color: var(--paper); color: var(--ink) !important; }
.backissues ol { list-style: none; margin: 0; padding: 0; }
.backissues li a { display: grid; grid-template-columns: auto 1fr; gap: 2px 16px; padding: 14px 0; border-bottom: 1px solid var(--hair); color: var(--ink); text-decoration: none; }
.backissues li a:hover b { color: var(--flamingo-dk); }
.back__no { grid-row: span 2; font: 700 15px/1.2 var(--didone); color: var(--teal-dk); min-width: 3.4em; padding-top: 4px; }
.backissues b { font: 700 21px/1.2 var(--didone); }
.backissues small { font-size: 14px; color: var(--ink-mute); }
.back { margin: 26px 0 0; text-align: center; display: flex; gap: 18px; justify-content: center; align-items: center; flex-wrap: wrap; }

/* prev / next */
.pn__wrap { display: grid; gap: 14px; margin: 34px 0 0; }
@media (min-width: 700px) { .pn__wrap { grid-template-columns: 1fr 1fr; } }
.pn { display: block; padding: 14px 16px; border: 1px solid var(--hair); color: var(--ink) !important; text-decoration: none; font: 700 19px/1.25 var(--didone); }
.pn small { display: block; margin-bottom: 4px; font: 700 11.5px/1.3 var(--text); letter-spacing: .16em; text-transform: uppercase; color: var(--teal-dk); }
.pn--next { text-align: right; }
.pn:hover { border-color: var(--ink); }

/* ---------- reactions */
.react__bar { display: flex; flex-wrap: wrap; gap: 8px; }
.rx-btn { display: inline-flex; align-items: center; gap: 7px; min-height: 42px; padding: 6px 12px 6px 8px; border: 1px solid var(--hair); background: #fffdf8;
  color: var(--ink); font: 600 15px/1 var(--text); border-radius: 999px; cursor: pointer; font-variant-numeric: lining-nums tabular-nums; transition: border-color .15s, transform .15s, background .15s; }
.rx-btn img { width: 26px; height: 26px; display: block; }
.rx-btn:hover:not([disabled]) { border-color: var(--ink); transform: translateY(-1px); }
.rx-btn.is-mine { border: 2px solid var(--flamingo); background: #fde9f0; padding: 5px 11px 5px 7px; }
.rx-btn.is-locked { opacity: .42; cursor: not-allowed; filter: grayscale(.6); }
.rx-btn .rx-n:empty { display: none; }
.react__note { margin: 10px 0 0; font: italic 14.5px/1.5 var(--text); color: var(--ink-mute); }

/* ---------- replies */
.talk__list { list-style: none; margin: 18px 0 0; padding: 0; }
.reply { padding: 18px 0; border-top: 1px solid var(--hair); }
.reply.is-pick { background: linear-gradient(90deg, rgba(184, 146, 90, .14), transparent 70%); padding-left: 14px; border-left: 3px solid var(--gold); }
.reply.is-hidden { opacity: .55; }
.reply__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 8px; font-size: 15px; }
.reply__name { font: 700 18px/1.2 var(--didone); color: var(--ink) !important; text-decoration: none; }
.reply__name:hover { color: var(--flamingo-dk) !important; }
.reply__num, .reply__time { color: var(--ink-mute); font-size: 14px; font-variant-numeric: lining-nums; }
.reply__body { margin: 0 0 10px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 18px; line-height: 1.55; }
.reply__pick { font: 700 11px/1 var(--text); letter-spacing: .16em; text-transform: uppercase; color: #8a6a37; }
.reply__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.vote { display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--hair); border-radius: 999px; padding: 2px; }
.vote button { width: 34px; height: 34px; border: 0; background: transparent; color: var(--ink-mute); font-size: 16px; line-height: 1; border-radius: 50%; cursor: pointer; }
.vote button:hover:not([disabled]) { background: var(--paper-2); color: var(--ink); }
.vote button.is-on { color: #fff; background: var(--teal); }
.vote button.is-on.down { background: var(--flamingo); }
.vote button[disabled] { cursor: default; opacity: .4; }
.vote b { min-width: 2ch; text-align: center; font: 700 15px/1 var(--text); font-variant-numeric: tabular-nums lining-nums; }
.linkbtn { border: 0; background: none; padding: 6px 0; color: var(--ink-mute); font: 600 13px/1 var(--text); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--hair); }
.linkbtn:hover { color: var(--flamingo-dk); }
.replyform { margin: 0 0 6px; }
.replyform__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-top: 10px; }
.replyform__left { font: italic 14px/1.4 var(--text); color: var(--ink-mute); }
.signin-cta { padding: 18px; border: 1px dashed var(--ink-mute); text-align: center; font-size: 17px; }
.signin-cta p { margin: 0 0 12px; }

/* tags / badges */
.tag-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 4px; border: 1px solid var(--hair); border-radius: 999px; background: #fffdf8;
  font: 700 11px/1.2 var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; }
.tag-chip img { width: 18px; height: 18px; }
.tag-chip--founder, .tag-chip--admin, .tag-chip--mod { border-color: var(--ink); color: var(--ink); }
.tag-chip--founder { background: var(--ink); color: var(--paper); border-color: var(--gold); }
.tag-chip--donor1, .tag-chip--donor2 { border-color: var(--gold); color: #7c5d2c; }
.tag-chip--first100 { border-color: #168c96; color: #0f6d75; background: #e6f3f3; }   /* teal: never confused with the ink-and-gold Site Founder tag */
.idcard .tag-chip--first100 { color: #8fe0e6; border-color: rgba(143, 224, 230, .6); }
.tag-chip--guest, .tag-chip--vip { border-color: var(--flamingo); color: var(--flamingo-dk); }

/* ---------- join page */
.join { display: grid; gap: clamp(20px, 4vw, 44px); align-items: center; margin: 0 0 28px; }
@media (min-width: 760px) { .join { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); } }
.join .ed__title { font-size: clamp(34px, 5.2vw, 58px); }
.join__perks { list-style: none; margin: 18px 0 0; padding: 0; }
.join__perks li { position: relative; margin: 0 0 12px; padding-left: 26px; font-size: 18px; line-height: 1.5; }
.join__perks li::before { content: ""; position: absolute; left: 4px; top: .55em; width: 9px; height: 9px; transform: rotate(45deg); background: var(--flamingo); }
.join__plate { margin: 0 auto; max-width: 270px; }
.join__plate img, .join__desk img { display: block; width: 100%; height: auto; border-radius: 22px; box-shadow: 0 18px 40px rgba(26, 10, 43, .35); border: 6px solid var(--ink); }
.join__desk { margin: 36px auto 0; max-width: 720px; }
.join__desk img { border-radius: 8px; border-width: 8px; }
.paper figcaption { margin-top: 10px; text-align: center; font: italic 14px/1.4 var(--text); color: var(--ink-mute); }

/* ---------- account + profile */
.acct, .profile { max-width: 720px; margin: 0 auto; }
.card { margin: 0 0 22px; padding: 22px clamp(16px, 3vw, 26px); border: 1px solid var(--hair); background: rgba(255, 255, 255, .42); }
.card h2 { margin: 0 0 12px; font: 700 24px/1.15 var(--didone); }
.card p { margin: 0 0 12px; font-size: 17px; line-height: 1.5; }
.idcard { display: grid; grid-template-columns: auto 1fr; gap: 6px 20px; align-items: center; background: var(--ink); color: var(--paper); border: 0;
  box-shadow: inset 0 0 0 1px rgba(184, 146, 90, .6), inset 0 0 0 6px var(--ink), inset 0 0 0 7px rgba(184, 146, 90, .6); padding: 26px; }
.idcard__badge { grid-row: span 3; width: 84px; height: 84px; }
.idcard__badge img { width: 84px; height: 84px; display: block; }
.idcard__name { margin: 0; font: 700 clamp(28px, 5vw, 40px)/1.05 var(--didone); overflow-wrap: anywhere; }
.idcard__meta { margin: 0; font: 600 13px/1.5 var(--text); letter-spacing: .14em; text-transform: uppercase; color: #cfc3dc; }
.idcard .tag-chip { background: transparent; color: var(--paper); border-color: rgba(247, 240, 228, .4); }
.progress { margin: 6px 0 4px; }
.progress__bar { height: 10px; background: rgba(26, 10, 43, .1); border: 1px solid var(--hair); overflow: hidden; }
.progress__fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--teal), var(--flamingo)); transition: width .6s ease; }
.progress__lbl { display: flex; justify-content: space-between; gap: 10px; margin-top: 6px; font: 600 14px/1.4 var(--text); color: var(--ink-soft); font-variant-numeric: lining-nums; }
.rxgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.rxgrid li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--hair); background: #fffdf8; font-size: 14.5px; line-height: 1.2; }
.rxgrid img { width: 34px; height: 34px; flex: none; }
.rxgrid li.is-locked { opacity: .45; }
.rxgrid small { display: block; color: var(--ink-mute); font-size: 12px; font-style: italic; }
.dl { display: flex; flex-wrap: wrap; gap: 10px; }
.switch { display: flex; align-items: center; gap: 12px; font-size: 17px; cursor: pointer; }
.switch input { width: 22px; height: 22px; accent-color: var(--teal); }
.danger summary { cursor: pointer; font: 700 13px/1.4 var(--text); letter-spacing: .14em; text-transform: uppercase; color: #a3123f; }
.danger[open] summary { margin-bottom: 12px; }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.row input { flex: 1 1 220px; }
.profile__bio { font: italic 400 20px/1.5 var(--text); margin: 0 0 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.profile__fav img { display: inline-block; vertical-align: -6px; margin: 0 4px; }
.profile--teal .idcard { background: var(--teal-dk); }
.profile--pink .idcard { background: #8e1f4a; }
.profile--gold .idcard { background: #5b4423; }
.recent { list-style: none; margin: 0; padding: 0; }
.recent li { padding: 12px 0; border-top: 1px solid var(--hair); }
.recent q { display: block; margin: 0 0 4px; font-size: 17px; white-space: pre-wrap; overflow-wrap: anywhere; quotes: "\201C" "\201D"; }
.recent small { color: var(--ink-mute); }

/* ---------- ranks page */
.ranks { max-width: 820px; margin: 0 auto; }
.tiers { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 640px) { .tiers { grid-template-columns: 1fr 1fr; } }
.tiers li { display: grid; grid-template-columns: 56px 1fr; gap: 2px 14px; align-items: center; padding: 14px; border: 1px solid var(--hair); background: #fffdf8; }
.tiers img { grid-row: span 2; width: 56px; height: 56px; }
.tiers b { font: 700 21px/1.1 var(--didone); }
.tiers small { color: var(--ink-mute); font-size: 14.5px; }
.pts { width: 100%; border-collapse: collapse; font-size: 17px; }
.pts td { padding: 9px 4px; border-bottom: 1px solid var(--hair); }
.pts td:last-child { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.rx { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.rx li { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--hair); background: #fffdf8; font-size: 15px; line-height: 1.2; }
.rx img { width: 36px; height: 36px; flex: none; }
.rx small { display: block; color: var(--ink-mute); font-size: 12.5px; font-style: italic; }
.leaders { margin: 0; padding: 0; list-style: none; counter-reset: lb; }
.leaders li { counter-increment: lb; display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--hair); font-size: 17px; }
.leaders li::before { content: counter(lb); width: 2ch; font: 700 22px/1 var(--didone); color: var(--flamingo-dk); text-align: right; }
.leaders a { font: 700 19px/1.2 var(--didone); color: var(--ink) !important; text-decoration: none; }
.leaders .pts-n { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums lining-nums; }

/* ---------- editor's desk + analytics (staff) */
.desk__grid { display: grid; gap: 22px; }
@media (min-width: 1000px) { .desk__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.desk__list { width: 100%; border-collapse: collapse; font-size: 16px; margin-bottom: 18px; }
.desk__list th, .desk__list td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--hair); vertical-align: top; }
.desk__list th { font: 700 11.5px/1.3 var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); }
.pill { display: inline-block; padding: 2px 8px; font: 700 11px/1.4 var(--text); letter-spacing: .12em; text-transform: uppercase; border: 1px solid currentColor; border-radius: 999px; }
.pill--approved { color: var(--teal-dk); } .pill--draft { color: #8a6a37; } .pill--live { color: var(--flamingo-dk); }
.paper .desk__src, .lt-desk textarea.desk__src { min-height: 62vh; font: 15px/1.55 ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.desk__preview { max-height: 72vh; overflow: auto; padding: 18px; border: 1px solid var(--hair); background: #fffdf8; }
.desk__preview .ed__sec { column-count: 1; }
.paper .desk__bar select { width: auto; min-height: 40px; padding: 6px 30px 6px 12px; font-size: 16px; }
.desk__bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 12px 0; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: 0 0 22px; }
.tile { padding: 14px; border: 1px solid var(--hair); background: #fffdf8; }
.tile b { display: block; font: 700 30px/1.1 var(--didone); font-variant-numeric: lining-nums; }
.tile span { font: 700 11px/1.3 var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); }
.chart { display: flex; align-items: flex-end; gap: 3px; height: 160px; padding: 10px 0 0; border-bottom: 1px solid var(--ink); margin: 0 0 6px; }
.chart__col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; min-width: 3px; position: relative; }
.chart__v { background: var(--teal); min-height: 1px; }
.chart__u { background: var(--flamingo); min-height: 1px; margin-top: 1px; }
.chart__axis { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--ink-mute); margin-bottom: 18px; }
.legend { display: flex; gap: 16px; font-size: 14px; color: var(--ink-soft); margin: 0 0 6px; }
.legend i { display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -1px; }
.legend .lv { background: var(--teal); } .legend .lu { background: var(--flamingo); }
.tbls { display: grid; gap: 22px; }
@media (min-width: 900px) { .tbls { grid-template-columns: 1fr 1fr; } }
.tbl { width: 100%; border-collapse: collapse; font-size: 15px; }
.tbl caption { text-align: left; font: 700 12px/1.4 var(--text); letter-spacing: .16em; text-transform: uppercase; padding: 0 0 6px; color: var(--teal-dk); }
.tbl td { padding: 6px 4px; border-bottom: 1px solid var(--hair); overflow-wrap: anywhere; }
.tbl td.n { text-align: right; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; width: 1%; padding-left: 10px; }
.seg { display: inline-flex; border: 1px solid var(--ink); }
.seg button { border: 0; background: transparent; padding: 8px 14px; font: 700 12px/1 var(--text); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); cursor: pointer; }
.seg button.is-on { background: var(--ink); color: var(--paper); }

@media (max-width: 560px) {
  .paper::after { inset: 6px; }
  .dateline span { margin: 0 .4em; }
  .ed__body { font-size: 18px; }
  .ed__sec--lead > p:first-child::first-letter { font-size: 4.3em; }
  .idcard { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .idcard__badge { grid-row: auto; }
  .pn--next { text-align: left; }
}
@media (prefers-reduced-motion: reduce) { .lt-page * { transition: none !important; } }
@media print {
  .lt-page::before, .nav, .foot, .react, .talk, .pn__wrap, .back { display: none !important; }
  .lt { padding: 0; } .paper { box-shadow: none; } .paper::after { display: none; }
}
#back-issues, #leaderboard, #reactions { scroll-margin-top: 120px; }
.leaders li { flex-wrap: wrap; row-gap: 6px; min-width: 0; }
.leaders .founder-tag { width: 120px; height: auto; }
.vchk { display: inline-flex; align-items: center; vertical-align: middle; }
.vchk img { width: 1em; height: 1em; min-width: 16px; min-height: 16px; display: block; }
.vchk img + .vchk__mark { display: none; }
.vchk__mark { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #1f9d55; color: #fff; font: 700 11px/1 system-ui, sans-serif; }
.idcard__name .vchk__mark { width: 24px; height: 24px; font-size: 14px; }
.tag-chip--verified { border-color: #1f9d55; color: #17773f; background: #e9f7ef; }
.badges { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 5px; vertical-align: middle; }
.badges--all { gap: 7px; }
.badges .badge-ico { width: 18px; height: 18px; display: block; }
.tag-chip--mini { padding: 2px 8px; font-size: 10px; }
.tag-chip--verified.tag-chip--mini { background: #1f9d55; border-color: #1f9d55; color: #fff; min-width: 20px; justify-content: center; }
.idcard .badges--all .tag-chip { background: transparent; }
.idcard__badge .tag-chip--mini { font-size: 12px; }

/* ---------- "Meet the cast" carousel (owner 2026-10-22: "modern, clean, card-like") */
.cast { margin: 0 0 1.8em; }
.cast__head { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.cast__title { margin: 0; font: 700 clamp(22px, 2.4vw, 28px)/1.15 var(--didone); }
.cast__nav { display: flex; gap: 8px; }
.cast__btn { width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid var(--ink); background: #fffdf8; color: var(--ink); font: 400 24px/1 var(--didone); cursor: pointer; }
.cast__btn:hover:not([disabled]) { background: var(--ink); color: var(--paper); }
.cast__btn[disabled] { opacity: .3; cursor: default; }
.cast__track { list-style: none; margin: 0; padding: 4px 2px 14px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 260px); gap: 18px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 2px; scrollbar-width: thin; scrollbar-color: var(--hair) transparent; overscroll-behavior-x: contain; }
.cast__track:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; }
.cast__card { scroll-snap-align: start; display: flex; flex-direction: column; background: #fffdf8; border: 1px solid var(--hair); box-shadow: 0 10px 26px rgba(26, 10, 43, .12); }
.cast__fig { margin: 0; }
.cast__fig img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; background: var(--paper-2); }
.cast__body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.cast__tag { align-self: flex-start; margin: 0; padding: 3px 10px; border-radius: 999px; background: #fde9f0; color: var(--flamingo-dk); font: 700 10.5px/1.3 var(--text); letter-spacing: .12em; text-transform: uppercase; }
.cast__name { margin: 2px 0 0; font: 700 19px/1.15 var(--didone); letter-spacing: .04em; text-transform: uppercase; }
.cast__text { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--ink-soft); }
.cast__more { margin-top: auto; padding-top: 6px; font: 700 12px/1.4 var(--text); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; }
.cast__credit { margin: 4px 0 0; text-align: right; font: italic 12.5px/1.4 var(--text); color: var(--ink-mute); }
@media (max-width: 640px) { .cast__track { grid-auto-columns: 74%; } .cast__nav { display: none; } }
/* watch row: owner rule "2 or 4, never 3" — 4 across on desktop, 2×2 on phones */
.watch__grid--4 { grid-template-columns: repeat(4, minmax(0, 220px)); }
.watch__grid--2 { grid-template-columns: repeat(2, minmax(0, 240px)); }
@media (max-width: 640px) { .watch__grid--4, .watch__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* badges are labels, not links: no pointer, no link hover; a styled label says what each one is (hover, focus or tap) */
.bdg, .tag-chip[data-tip] { position: relative; cursor: default; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.bdg { display: inline-flex; align-items: center; vertical-align: middle; border-radius: 6px; }
.bdg:focus, .tag-chip[data-tip]:focus { outline: none; }
.bdg:focus-visible, .tag-chip[data-tip]:focus-visible { outline: 2px solid var(--teal, #168c96); outline-offset: 2px; }
.bdg::after, .tag-chip[data-tip]::after {
  content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 9px); z-index: 60; transform: translate(-50%, 4px);
  width: max-content; max-width: 230px; padding: 7px 10px; border-radius: 6px; background: #1a0a2b; color: #f7f0e4;
  font: 600 12.5px/1.4 "Newsreader", Georgia, serif; letter-spacing: 0; text-transform: none; text-align: left; white-space: normal;
  box-shadow: 0 8px 22px rgba(26, 10, 43, .3); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .12s, transform .12s;
}
.bdg::before, .tag-chip[data-tip]::before {
  content: ""; position: absolute; left: 50%; bottom: calc(100% + 3px); z-index: 60; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: #1a0a2b; border-bottom: 0; opacity: 0; visibility: hidden; transition: opacity .12s;
}
.bdg:hover::after, .bdg:focus::after, .tag-chip[data-tip]:hover::after, .tag-chip[data-tip]:focus::after { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.bdg:hover::before, .bdg:focus::before, .tag-chip[data-tip]:hover::before, .tag-chip[data-tip]:focus::before { opacity: 1; visibility: visible; }
.idcard__badge .bdg::after { bottom: auto; top: calc(100% + 9px); }
.idcard__badge .bdg::before { bottom: auto; top: calc(100% + 3px); border-top-color: transparent; border-bottom: 6px solid #1a0a2b; }
.tiers .bdg { grid-row: span 2; }
.tiers .bdg img { width: 56px; height: 56px; }
.idcard__badge .bdg img { width: 84px; height: 84px; display: block; }
@media (prefers-reduced-motion: reduce) { .bdg::after, .tag-chip[data-tip]::after { transition: none; } }
/* the Site Founder's release step on /club/desk/ */
.lt-btn--approve { background: #168c96; border-color: #168c96; }
.lt-btn--approve:hover:not([disabled]) { background: #0f6d75; border-color: #0f6d75; }
.release { margin: 14px 0; padding: 18px; border: 2px solid #168c96; background: #eef7f6; }
.release p { margin: 0 0 12px; font-size: 16px; }
.release__final { max-height: 60vh; margin: 0 0 14px; }

/* ---------- /letter/ front page: the four newest editions as whole-card links (owner 2026-10-22) */
.edcards { display: grid; gap: 22px; margin: 0 0 18px; }
@media (min-width: 700px) {
  .edcards--2, .edcards--3, .edcards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
  .edcards--3 .edcard--newest, .edcards--1 .edcard { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
}
.edcard { display: flex; flex-direction: column; min-width: 0; background: #fffdf8; border: 1px solid var(--hair); color: var(--ink) !important;
  text-decoration: none; box-shadow: 0 8px 22px rgba(26, 10, 43, .1); transition: transform .15s, box-shadow .15s, border-color .15s; }
.edcard:hover { transform: translateY(-2px); border-color: var(--ink); box-shadow: 0 14px 30px rgba(26, 10, 43, .18); }
.edcard:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
.edcard__img { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--paper-2); }
.edcard__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.edcard__body { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; flex: 1; }
.edcard__meta { font: 700 11px/1.4 var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--teal-dk); }
.edcard__title { font: 700 clamp(21px, 2.2vw, 26px)/1.15 var(--didone); text-wrap: balance; }
.edcard--newest .edcard__title { font-size: clamp(24px, 2.8vw, 32px); }
.edcard__dek { font: italic 16px/1.45 var(--text); color: var(--ink-soft); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.edcard__go { margin-top: auto; padding-top: 6px; font: 700 12px/1.4 var(--text); letter-spacing: .12em; text-transform: uppercase; color: var(--flamingo-dk); }
.edcard:hover .edcard__go { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- reply sort + "who reacted" sheet (owner 2026-10-22) */
.reply-sort { margin: 6px 0 4px; flex-wrap: wrap; }
.reply-sort[hidden] { display: none; }
.sheet { width: min(520px, 100vw); max-height: min(78vh, 720px); padding: 0; border: 0; border-radius: 4px; background: #f7f0e4; color: #1a0a2b;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5); font-family: "Newsreader", Georgia, serif; overflow: hidden; display: none; }
.sheet[open] { display: flex; flex-direction: column; }
.sheet::backdrop { background: rgba(18, 7, 30, .6); }
.sheet__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px 10px; border-bottom: 4px double #1a0a2b; }
.sheet__head h2 { margin: 0; font: 700 22px/1.2 "Bodoni Moda", Didot, Georgia, serif; }
.sheet__close { width: 40px; height: 40px; border: 1px solid rgba(26, 10, 43, .25); border-radius: 50%; background: #fffdf8; font-size: 16px; cursor: pointer; color: #1a0a2b; }
.sheet__tabs { display: flex; gap: 6px; padding: 10px 16px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid rgba(26, 10, 43, .15); flex: none; }
.sheet__tabs button { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 5px 11px 5px 7px; border: 1px solid rgba(26, 10, 43, .2); border-radius: 999px;
  background: #fffdf8; color: #1a0a2b; font: 700 13px/1 "Newsreader", Georgia, serif; cursor: pointer; font-variant-numeric: tabular-nums; }
.sheet__tabs button.is-on { border: 2px solid #e2407a; background: #fde9f0; }
.sheet__list { list-style: none; margin: 0; padding: 4px 16px 16px; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; }
.sheet__list li { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; padding: 10px 0; border-bottom: 1px solid rgba(26, 10, 43, .12); }
.sheet__n { width: 2ch; text-align: right; font: 700 17px/1 "Bodoni Moda", Georgia, serif; color: #c22f66; font-variant-numeric: tabular-nums; }
.sheet__rx { margin-left: auto; }
.sheet__rx img { width: 24px; height: 24px; display: block; }
@media (max-width: 560px) { .sheet { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; margin: 0; } }
/* nested replies: one level, indented under the letter they answer */
.thread { list-style: none; margin: 12px 0 0; padding: 0 0 0 18px; border-left: 2px solid rgba(226, 64, 122, .35); }
.reply--child { padding: 12px 0; border-top: 1px dashed var(--hair); }
.reply--child:first-child { border-top: 0; padding-top: 4px; }
.reply--child .reply__body { font-size: 17px; }
.replyform--child { margin: 12px 0 0 18px; }
.replyform--child textarea { min-height: 80px; }
@media (max-width: 560px) { .thread { padding-left: 12px; } .replyform--child { margin-left: 0; } }

/* ---------- phones (owner 2026-10-22: "work on the mobile friendliness… instead of longform titles just show the badge") */
/* the phone header (VAD / Leonida Letter switcher) lives in /assets/css/switcher.css (Website session) */
.bdg--founder .badge-ico { display: none; }
@media (max-width: 560px) {
  /* names in lists (replies, leaderboard, who reacted): badges as icons only; tap one for its label */
  .badges:not(.badges--all) { gap: 4px; flex-wrap: nowrap; }
  .badges:not(.badges--all) .tag-chip { padding: 0; border: 0; background: none; box-shadow: none; }
  .badges:not(.badges--all) .tag-chip > span { display: none; }
  .badges:not(.badges--all) .badge-ico { width: 20px; height: 20px; }
  .badges:not(.badges--all) .bdg--founder .founder-tag { display: none; }
  .badges:not(.badges--all) .bdg--founder .badge-ico { display: block; }
  .bdg::after, .tag-chip[data-tip]::after { max-width: 200px; }
  .leaders li { flex-wrap: nowrap; gap: 8px; }
  .leaders a { font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .leaders .pts-n { font-size: 15px; white-space: nowrap; }
  .sheet__list li { flex-wrap: nowrap; }
  .sheet__list .reply__name { font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .reply__head { gap: 4px 8px; }
}
@media (max-width: 560px) {
  .reply-sort { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .reply-sort button { padding: 9px 4px; font-size: 10.5px; letter-spacing: .06em; }
  .reply__acts { gap: 4px 12px; }
}
.reply--placeholder .reply__body { margin: 0; font-style: italic; color: var(--ink-mute); font-size: 15.5px; }

/* ---------- phone audit pass (owner 2026-10-22: "work on UI mobile friendliness of newsletter site & account pages") */
@media (max-width: 560px) {
  /* tap targets: at least 44 px tall without changing the look */
  .cta-row__alt a, .lt-link, .cast__more, .story__more a, .back a, .box__alt a, .box__fine a, .leaders a, .linkbtn {
    display: inline-block; padding-top: 12px; padding-bottom: 12px; }
  .back { margin-top: 14px; }
  /* nothing under 12 px */
  .dateline p { font-size: 12px; letter-spacing: .1em; }
  .cast__tag, .tag-chip, .story__kicker, .ed__kicker, .box__kicker, .edcard__meta, .pill { font-size: 12px; }
  .ed__byline { font-size: 12px; letter-spacing: .06em; }
  .mast__the { font-size: 12px; }
  /* slimmer masthead so the first headline reaches the first screen */
  .paper { padding-top: 14px; }
  .mast { margin-bottom: 4px; }
  .mast__sun { width: 112px; }
  .mast__the { margin: 6px 0 2px .55em; }
  .mast__leonida { font-size: 42px; }
  .mast__letter { font-size: 12px; margin-top: 4px; }
  .mast__letter::before, .mast__letter::after { width: 28px; }
  .dateline { margin: 8px 0 16px; padding: 5px 2px; }
  .ed__head { margin-bottom: 18px; padding-bottom: 14px; }
  .ed__title { font-size: 30px; }
}
/* cast carousel: no gap above the episode link on short bios, and a position counter so it's clear it scrolls */
.cast__more { margin-top: 2px; }
.cast__count { margin: 0; font: 700 12px/1 var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .cast__head { align-items: center; } }
@media (max-width: 560px) {
  .wcard__ep, .reply__pick, .reply-sort button, .sheet__tabs button, .seg button { font-size: 12px; }
  .reply-sort button { letter-spacing: .02em; padding: 8px 2px; line-height: 1.2; }
}
@media (max-width: 560px) {
  .lt-btn--sm { min-height: 44px; font-size: 12px; }
  .lt-btn { min-height: 46px; }
  .switch { min-height: 44px; }
}
.paper [hidden], .membar [hidden] { display: none !important; }
.lt-btn--now { background: #c22f66; border-color: #c22f66; }
.lt-btn--now:hover:not([disabled]) { background: #a3123f; border-color: #a3123f; }
.release__warn { font-weight: 600; color: #7d0f31; }
/* profile pictures: round, cropped to fill (resized on screen only; never stored on our server) */
.avatar { --av: 28px; width: var(--av); height: var(--av); border-radius: 50%; object-fit: cover; flex: none; display: inline-block; vertical-align: middle;
  background: #efe5d3; box-shadow: 0 0 0 1.5px #fffdf8, 0 0 0 2.5px rgba(26, 10, 43, .2); }
.avatar--initial { display: inline-grid; place-items: center; background: #1a0a2b; color: #f7f0e4; font: 700 calc(var(--av) * .48)/1 "Bodoni Moda", Didot, Georgia, serif; }
.idcard__badge img.avatar, .idcard__badge .avatar { width: var(--av); height: var(--av); }
.idcard__badge .avatar { box-shadow: 0 0 0 3px #f7f0e4, 0 0 0 5px rgba(184, 146, 90, .7); }
.reply__head .avatar { margin-right: 2px; }
#picture .row { align-items: center; margin-bottom: 8px; }
/* report an account */
.sheet--report { max-height: min(90vh, 640px); }
.rep { display: grid; gap: 10px; padding: 14px 16px 18px; overflow-y: auto; }
.rep__reasons { display: grid; gap: 4px; }
.rep__reason { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 10px; border: 1px solid rgba(26, 10, 43, .15); background: #fffdf8; font-size: 16px; cursor: pointer; }
.rep__reason input { width: 20px; height: 20px; accent-color: #c22f66; }
.rep textarea { width: 100%; min-height: 70px; padding: 9px 11px; border: 1.5px solid #1a0a2b; background: #fffdf8; font: 16px/1.4 "Newsreader", Georgia, serif; }
.sheet__report { margin-left: 6px; font-size: 12px; }
.av-row { align-items: center; gap: 14px; margin-bottom: 8px; }
.av-pending { margin: 0; display: grid; justify-items: center; gap: 4px; opacity: .85; }
.av-pending figcaption { font: italic 12px/1.2 var(--text); color: var(--ink-mute); }
#picture label.lt-btn { cursor: pointer; }
/* reaction weights: heat, Most loved, reactions on replies */
.react__heat { margin: 6px 0 0; font: 600 13px/1.4 var(--text); color: var(--flamingo-dk); }
.react__heat:empty { display: none; }
.edsort { margin: 0 0 12px; }
.edcard__stats { font: 600 12.5px/1.4 var(--text); color: var(--ink-mute); }
.edcard__stats:empty { display: none; }
.rreacts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -4px 0 8px; }
.rreact { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 3px; border: 1px solid var(--hair); border-radius: 999px; background: #fffdf8; font: 700 12.5px/1 var(--text); font-variant-numeric: tabular-nums; }
.rreact img { width: 22px; height: 22px; display: block; }
.rreact.is-mine { border-color: var(--flamingo); background: #fde9f0; }
.rreact__pick { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px; padding: 8px; border: 1px solid var(--hair); background: #fffdf8; }
.rreact__pick[hidden] { display: none; }
.rx-btn--sm { min-height: 36px; padding: 4px; border-radius: 50%; }
.rx-btn--sm img { width: 22px; height: 22px; }

/* ---------- moderator warning: shown on the next visit, must be acknowledged (owner 2026-10-22) */
dialog.warn { width: min(540px, calc(100vw - 24px)); max-height: calc(100vh - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); padding: 0; border: 0; border-radius: 22px;
  overflow: hidden auto; background: #f7f0e4; color: #1a0a2b; box-shadow: 0 30px 80px rgba(0, 0, 0, .55); font-family: "Newsreader", Georgia, serif; }
dialog.warn::backdrop { background: rgba(18, 7, 30, .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.warn__band { display: flex; align-items: center; gap: 16px; padding: 22px 24px 20px; color: #f7f0e4;
  background: radial-gradient(120% 160% at 100% 0%, rgba(226, 64, 122, .55) 0%, rgba(226, 64, 122, 0) 60%), #1a0a2b; }
.warn__ico { width: 52px; height: 52px; flex: none; display: grid; place-items: center; border-radius: 16px; color: #fff;
  background: linear-gradient(140deg, #f6d27a, #e2407a); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 8px 20px -6px #e2407a; }
.warn__ico svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.warn__kicker { margin: 0 0 4px; font: 700 12px/1.3 "Newsreader", Georgia, serif; letter-spacing: .18em; text-transform: uppercase; color: #ffb3cb; }
.warn__band h2 { margin: 0; font: 700 clamp(24px, 5vw, 30px)/1.1 "Bodoni Moda", Didot, Georgia, serif; text-wrap: balance; }
.warn__body { display: grid; gap: 14px; padding: 20px 24px 24px; }
.warn__text { margin: 0; font-size: 18px; line-height: 1.55; }
.warn__quote { margin: 0; }
.warn__quote figcaption { margin: 0 0 6px; font: 650 13px/1.3 "Newsreader", Georgia, serif; color: #6f6279; }
.warn__quote blockquote { margin: 0; padding: 10px 14px; border-left: 3px solid #e2407a; border-radius: 0 12px 12px 0; background: rgba(26, 10, 43, .05);
  font: italic 16.5px/1.5 "Newsreader", Georgia, serif; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 9em; overflow-y: auto; }
.warn__note { padding: 12px 14px; border-radius: 12px; background: #dcefee; color: #0b4f55; }
.warn__note b { display: block; margin-bottom: 2px; font: 700 12px/1.3 "Newsreader", Georgia, serif; letter-spacing: .12em; text-transform: uppercase; }
.warn__note p { margin: 0; font-size: 16.5px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.warn__next { margin: 0; font-size: 15.5px; line-height: 1.5; color: #4a3c58; }
.warn__check { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1.5px solid rgba(26, 10, 43, .2); border-radius: 12px; background: #fffdf8; cursor: pointer; font-size: 16.5px; line-height: 1.4; }
.warn__check input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: #168c96; }
.warn .abar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.warn__go { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border: 0; border-radius: 12px; background: #1a0a2b; color: #f7f0e4;
  font: 650 16px/1 "Newsreader", Georgia, serif; cursor: pointer; }
.warn__go:hover:not([disabled]) { background: #c22f66; }
.warn__go[disabled] { opacity: .45; cursor: not-allowed; }
.warn__when { font: italic 14px/1.3 "Newsreader", Georgia, serif; color: #6f6279; }
@media (max-width: 480px) { .warn__band { padding: 18px; } .warn__body { padding: 16px 18px 20px; } .warn__go { width: 100%; } }
dialog.warn { color-scheme: light; }
.warn__check input { -webkit-appearance: auto; appearance: auto; background: #fff; border: 0; padding: 0; min-height: 0; }
.warn .form__msg { margin: 0; }
.warn .form__msg:empty { display: none; }

.ranks__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 14px 0 0; }
.ranks__cta .box__fine { margin: 0; }

/* footer on Letter pages (owner 2026-10-22: "why does the footer bleed to the purple"): a solid night band of its own, faded in
   from the photo above, instead of the fixed waterfront photo showing through and stopping partway */
html:has(body.lt-page) { background: #12071e; }
.lt-page .foot { position: relative; background: #12071e; border-top: 1px solid rgba(247, 240, 228, .1); }
.lt-page .foot::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 96px; pointer-events: none;
  background: linear-gradient(180deg, rgba(18, 7, 30, 0), #12071e); }
/* links inside a sentence of small print stay inline (the phone tap-size padding is for stand-alone links) */
@media (max-width: 560px) {   /* links inside a sentence stay inline: their tap padding grows the hit area without spreading the lines apart */
  .box__fine a, .story__more a, .box__alt a, .sup__fine a { display: inline; }
}

/* the join form's 18+ confirmation (owner 2026-10-22): a plain tick-box line, not an uppercase field label */
.field label.checkline { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 10px 14px; border: 1.5px solid var(--hair); border-radius: 4px; background: #fffdf8;
  font: 500 17px/1.35 var(--text); letter-spacing: 0; text-transform: none; cursor: pointer; }
.paper .checkline input { width: 22px; height: 22px; min-height: 0; margin: 0; padding: 0; flex: none; border: 0; box-shadow: none; background: #fff; color-scheme: light; accent-color: var(--teal); -webkit-appearance: auto; appearance: auto; }
.checkline:has(input[aria-invalid="true"]) { border-color: #a3123f; }
.warn__alt { font: 500 15px/1.3 "Newsreader", Georgia, serif; color: #6f6279; text-decoration: underline; text-underline-offset: 3px; padding: 10px 0; }
.warn__alt:hover { color: #c22f66; }

/* ---------- Leonida club plates (owner 2026-10-22): inline SVG from letter.js plateSvg(); our own plate design */
.lp-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.lp { display: block; width: 100%; height: auto; border-radius: 3.9% / 7.8%; box-shadow: 0 8px 18px rgba(0, 0, 0, .3); }
.lp--mini { box-shadow: 0 1px 3px rgba(26, 10, 43, .35); }
.lp .lp-ch { font-family: "Barlow Condensed", "Arial Narrow", sans-serif; font-weight: 700; }   /* fonts.css, as on the wallpaper */
.lp .lp-hd, .lp .lp-ft { font-family: "Bodoni Moda", Didot, Georgia, serif; font-weight: 700; font-variation-settings: "opsz" 28; }
.lp .lp-ft { font-weight: 600; font-variation-settings: "opsz" 11; }
.lpchip { display: block; flex: none; width: 64px; line-height: 0; text-decoration: none; border-radius: 4px; }
a.lpchip:hover .lp, a.lpchip:focus-visible .lp { box-shadow: 0 0 0 2px var(--flamingo, #e2407a), 0 2px 6px rgba(26, 10, 43, .3); }
.avlink { display: inline-flex; flex: none; border-radius: 50%; text-decoration: none; }
.avlink:hover .avatar { box-shadow: 0 0 0 2px var(--flamingo, #e2407a); }
.leaders .lpchip { width: 60px; margin-left: auto; }                           /* plates line up in a column beside the points */
.lb__who { display: contents; }
.leaders li::before { flex: none; }                  /* keep the rank numbers one width so the pictures line up */
.leaders li:has(.lpchip) .pts-n { margin-left: 0; min-width: 4.4em; text-align: right; }
@media (max-width: 480px) {          /* small phones: the plate drops under the name instead of squeezing it */
  .lb__who { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; flex: 1 1 auto; min-width: 0; }
  .leaders .lb__who .lpchip { flex-basis: 100%; width: auto; margin-left: 0; }
  .leaders .lb__who .lpchip .lp { width: 56px; }
}
.mechip__plate { display: block; flex: none; width: 50px; line-height: 0; }
.mechip__plate .lp { box-shadow: none; }
/* profile: the plate in the ID card (placement option 2): right column on desktop, its own row under the name on phones */
.idcard--plate { grid-template-columns: auto minmax(0, 1fr) minmax(0, 270px); }
.idcard__plate { grid-column: 3; grid-row: 1 / span 3; width: 100%; justify-self: end; }
@media (max-width: 760px) {
  .idcard--plate { grid-template-columns: auto minmax(0, 1fr); }
  .idcard__plate { grid-column: 1 / -1; grid-row: auto; justify-self: center; max-width: 340px; margin-top: 12px; }
  .mechip__plate { display: none; }
}
@media (max-width: 560px) {
  .idcard--plate { grid-template-columns: 1fr; }
  .idcard__plate { grid-column: auto; width: 94%; }
  .reply__head .lpchip { width: 56px; }
}

/* default pictures (owner 2026-10-22): the art carries its own gold ring, so no extra outline */
.avatar--default { background: transparent; box-shadow: none; object-fit: contain; }
/* owner 2026-10-22 (ID card option B): on desktop the badges get their own row across the card under the name and plate,
   wrapping to a second row when there are many; every badge the same height */
@media (min-width: 761px) {
  .idcard--plate .idcard__badge, .idcard--plate .idcard__plate { grid-row: 1 / span 2; }
  .idcard--plate .idcard__plate { align-self: center; }
  .idcard--plate .idstats + .idcard__meta { grid-column: 2 / -1; }
}
.badges--all > .tag-chip { height: 28px; box-sizing: border-box; }
.badges--all .bdg--founder { display: inline-flex; align-items: center; height: 28px; }
.badges--all .bdg--founder .founder-tag { height: 28px; width: auto; display: block; }

/* profile ID card (owner 2026-10-22): the picture gets its real size (it was a 96px picture in an 84px box, so it ran into
   the name), the name gets room for its descenders, and the stats sit in a frosted 2×2 segmented card */
.idcard__badge { width: auto; height: auto; line-height: 0; }
.idcard__name { line-height: 1.15; padding-bottom: 2px; }
.idstats { margin: 4px 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; max-width: 420px;
  border: 1px solid rgba(247, 240, 228, .24); border-radius: 14px; overflow: hidden;
  background: rgba(255, 255, 255, .08); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.idstats__seg { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 10px 14px; }
.idstats__seg:nth-child(even) { border-left: 1px solid rgba(247, 240, 228, .18); }
.idstats__seg:nth-child(n+3) { border-top: 1px solid rgba(247, 240, 228, .18); }
.idstats__seg:last-child:nth-child(odd) { grid-column: 1 / -1; }
.idstats dt { font: 600 10.5px/1.2 var(--text); letter-spacing: .16em; text-transform: uppercase; color: #cfc3dc; }
.idstats dd { margin: 0; font: 700 18px/1.2 var(--didone); color: var(--paper); white-space: nowrap; }
@media (min-width: 561px) { .idstats { grid-template-columns: repeat(2, auto); width: max-content; max-width: 100%; } }   /* desktop: segments sized to their values */
@media (max-width: 560px) {
  .idcard { row-gap: 10px; }
  .idcard__badge { margin-bottom: 6px; }
  .idstats { max-width: none; }
  .idstats__seg { align-items: center; padding: 11px 10px; }
  .idcard .badges--all { justify-content: center; }
}
@media (max-width: 380px) { .idstats__seg { padding: 10px 6px; } .idstats dd { font-size: 15.5px; white-space: normal; } }   /* 320px phones: the date still fits */