/* ============================================================
   HEY FREMONT — design system
   Loaded AFTER each page's inline <style>, so it overrides cleanly.
   Replaces theme.css (which was inherited from the Levi build and
   still carried a country/western palette).

   Direction: Fremont Street after dark. Night navy surfaces, one neon
   marquee gold accent, one teal accent for affection, generous spacing,
   real type hierarchy, restrained motion. The photos bring the color;
   the interface should be the calmest thing on the screen.

   The incumbent's problems we are deliberately not repeating:
     - red-on-grey at every level, so nothing has hierarchy
     - 12px type everywhere, cramped line-height
     - borders on everything, no depth, no rhythm
     - inline ads breaking the column
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@300;400;500;600;700&display=swap');

/* ===== TOKENS ============================================== */
:root{
  /* surfaces — night navy */
  --bg:        #0A0E19;
  --surface:   #121829;
  --surface-2: #182034;
  --surface-3: #212A40;
  --hairline:  rgba(255,255,255,.07);
  --hairline-2:rgba(255,255,255,.12);

  /* ink */
  --text:      #EEF1F7;
  --text-dim:  #BAC2D3;
  --muted:     #8792A8;
  --faint:     #5C667C;

  /* neon marquee gold — the primary accent */
  --accent:    #FFB627;
  --accent-hi: #FFD166;
  --accent-dim:#8A5A00;
  --accent-wash:rgba(255,182,39,.12);

  /* teal — affection: loves and superloves. Used sparingly */
  --hot:       #2DD4BF;
  --hot-hi:    #5EEAD4;
  --hot-wash:  rgba(45,212,191,.14);

  --ok:#6B9E78; --warn:#C89A5B; --danger:#B5544E;

  /* type */
  --display:'Playfair Display',Georgia,serif;
  --ui:'Inter',system-ui,-apple-system,sans-serif;

  /* rhythm — everything is a multiple of 4 */
  --r-sm:8px; --r:12px; --r-lg:16px; --r-xl:22px; --r-pill:999px;
  --shadow-1:0 1px 2px rgba(0,0,0,.4);
  --shadow-2:0 4px 16px rgba(0,0,0,.35);
  --shadow-3:0 16px 48px rgba(0,0,0,.5);
  --ease:cubic-bezier(.2,.7,.3,1);

  /* legacy tokens from the Levi build, remapped so old var() calls
     inherit the new palette instead of the western one */
  --black:var(--bg); --charcoal:var(--surface); --metal:var(--surface-2);
  --ink:var(--surface-3); --tan:var(--accent); --tan-hi:var(--accent-hi);
  --tan-line:var(--accent-dim); --amber:var(--accent); --gold:var(--accent);
  --neon:var(--accent); --neon-orange:var(--accent); --brass:var(--accent);
  --maxw:1240px;
}

/* ===== BASE ================================================ */
html{-webkit-text-size-adjust:100%}
body{
  /* A long unbroken word or pasted link in a post, bio or message used to
     push the whole page wider than a phone. This only breaks a word when
     it would otherwise overflow its box. */
  overflow-wrap:anywhere;
  background:var(--bg); color:var(--text);
  font-family:var(--ui); font-weight:400; font-size:15.5px; line-height:1.65;
  letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
/* kill the film-grain overlay the Levi pages painted on */
body::after{display:none!important}

h1,h2,h3,h4,.display{
  font-family:var(--display); font-weight:600;
  letter-spacing:-.02em; line-height:1.12; text-transform:none;
  font-variation-settings:'opsz' 96;
}
h1{font-size:clamp(34px,5vw,58px)}
h2{font-size:clamp(25px,3.2vw,36px)}
h3{font-size:19px}
p{color:var(--text-dim)}
a{color:inherit;text-decoration:none}
::selection{background:var(--accent-wash);color:var(--accent-hi)}

:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}

/* Eyebrow / kicker — small caps, wide, muted. Not shouty. */
.kick,.k{
  font-family:var(--ui)!important; font-weight:600!important;
  font-size:10.5px!important; letter-spacing:.16em!important;
  text-transform:uppercase!important; color:var(--muted)!important;
}

/* ===== SURFACES ============================================ */
.card{
  background:var(--surface)!important;
  border:1px solid var(--hairline)!important;
  border-radius:var(--r-lg)!important;
  box-shadow:var(--shadow-1)!important;
  transition:border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.card:hover{border-color:var(--hairline-2)!important}
.card.feature,.card.hot{
  border-color:var(--accent-dim)!important;
  box-shadow:var(--shadow-2),0 0 0 1px var(--accent-wash) inset!important;
}
.pad{padding:22px!important}

/* ===== BUTTONS ============================================= */
.btn{
  font-family:var(--ui)!important; font-weight:600!important;
  font-size:13.5px!important; letter-spacing:.01em!important; text-transform:none!important;
  padding:10px 18px!important; border-radius:var(--r-pill)!important;
  border:1px solid var(--hairline-2)!important; background:transparent!important;
  color:var(--text)!important; cursor:pointer;
  transition:all .2s var(--ease); display:inline-flex; align-items:center;
  justify-content:center; gap:7px; white-space:nowrap;
}
.btn:hover{background:rgba(255,255,255,.05)!important;border-color:var(--hairline-2)!important;transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.solid,.follow{
  background:linear-gradient(180deg,var(--accent-hi),var(--accent))!important;
  border-color:transparent!important; color:#1A1509!important;
  box-shadow:0 1px 0 rgba(255,255,255,.28) inset, var(--shadow-1)!important;
}
.btn.solid:hover,.follow:hover{
  background:linear-gradient(180deg,#EAD3A2,var(--accent-hi))!important;
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset, var(--shadow-2)!important;
}
.btn.sm{padding:7px 14px!important;font-size:12.5px!important}
.btn.wfull,.wfull{width:100%}
.btn.danger{border-color:rgba(181,84,78,.45)!important;color:#E09A95!important}
.btn.danger:hover{background:rgba(181,84,78,.14)!important}
.btn[disabled],.btn.off{opacity:.4;pointer-events:none}

/* ===== NAV ================================================= */
:where(nav.bar,header.nav){position:relative}
nav.bar,header.nav{
  /* Above banners; existing sticky/fixed positioning keeps its specificity. */
  z-index:100;
  background:rgba(10,10,11,.72)!important;
  backdrop-filter:saturate(160%) blur(18px); -webkit-backdrop-filter:saturate(160%) blur(18px);
  border-bottom:1px solid var(--hairline)!important;
  padding:0 26px!important; height:62px; display:flex; align-items:center;
}
.navsig,.brand{
  font-family:var(--display)!important; font-weight:700!important;
  font-size:21px!important; letter-spacing:-.025em!important; text-transform:none!important;
}
/* The wordmark is an image now. Its zipper pull hangs below the baseline by
   design, so the box is taller than the lettering — size by the box and let
   the pull sit in the nav's slack rather than pushing the bar taller. */
.navsig img.navlogo{height:56px;width:auto;display:block;margin:-8px 0 -8px}
@media(max-width:860px){.navsig img.navlogo{height:44px;margin:-6px 0 -6px}}
/* The nav links had no rule of their own here — only the anchors inside
   them were styled — so on every page using this stylesheet (Members,
   Groups, Meet Up, Kinks, Contest, What's Hot) the links rendered as
   plain inline anchors and ran together: "HomeMembersGroupsMeet Up".
   Centring lives here too so it matches the pages that style it inline. */
/* Absolute centring was the bug: a centred block has no idea the auth
   controls on the right exist, so once the nav grew to eight items
   "Feedback" printed straight through "Admin". This is a real three-part
   flex instead -- logo, links, auth -- so they physically cannot overlap.
   If the links still do not fit they compress and then scroll, which is
   ugly but legible, rather than stacking on top of something else. */
nav.bar,header.nav{ gap:16px }
nav.bar .navsig,nav.bar .navauth,header.nav .navsig,header.nav .navauth{ flex:0 0 auto }
/* No overflow here: it would clip the .navmore dropdown, which is
   absolutely positioned inside this box. The nav is six items now
   and collapses to the burger below 1024px, so nothing needs to
   scroll. */
nav.bar .links,header.nav .links{
  display:flex; align-items:center; gap:24px; white-space:nowrap;
  flex:1 1 auto; justify-content:center; min-width:0;
}
@media(max-width:1240px){ nav.bar .links,header.nav .links{gap:17px} }
@media(max-width:1080px){ nav.bar .links,header.nav .links{gap:13px} }
/* ---- the More menu ----
   Eight top-level links was two too many; Kinks, Contest and Feedback are
   things you go to deliberately rather than move between, so they live
   behind one item. Built with a real <button> so it is keyboard and
   screen-reader reachable, not a hover-only menu. */
.navmore{position:relative;display:flex;align-items:center}
.navmore > button{
  font-family:var(--ui);font-weight:500;font-size:14px;color:var(--muted);
  background:transparent;border:0;cursor:pointer;padding:8px 2px;
  display:inline-flex;align-items:center;gap:5px;transition:color .2s var(--ease);
}
.navmore > button:hover,.navmore.open > button,.navmore.here > button{color:var(--text)}
.navmore > button i{font-style:normal;font-size:10px;opacity:.8;transition:transform .2s var(--ease)}
.navmore.open > button i{transform:rotate(180deg)}
.navmore.here > button{color:var(--accent)}
.navmore .moremenu{
  position:absolute;top:calc(100% + 10px);right:0;min-width:186px;
  background:var(--surface-2);border:1px solid var(--hairline-2);
  border-radius:var(--r);box-shadow:var(--shadow-3);padding:6px;
  display:none;z-index:200;
}
.navmore.open .moremenu{display:block}
.navmore .moremenu a{
  display:block;padding:9px 12px;border-radius:var(--r-sm);
  font-size:14px!important;color:var(--text-dim)!important;white-space:nowrap;
}
.navmore .moremenu a:hover{background:var(--accent-wash);color:var(--accent)!important}
.navmore .moremenu a.on{color:var(--accent)!important}
/* ---- Beta Hub: the one bordered item in the top bar ----
   Everything about testing lives behind it, so it has to be noticed. A
   slow glow rather than a blink: visible, not irritating. */
nav.bar .links a.betalink{
  font-family:'Bebas Neue',sans-serif!important;letter-spacing:2px!important;font-size:13.5px!important;
  color:var(--accent)!important;border:1px solid var(--accent)!important;border-radius:999px;
  padding:5px 13px 4px!important;line-height:1.2;background:rgba(255,182,39,.08);
  animation:bzBetaGlow 3.2s ease-in-out infinite;transition:background .2s,color .2s}
nav.bar .links a.betalink::after{display:none!important}
nav.bar .links a.betalink:hover,nav.bar .links a.betalink.on{background:var(--accent);color:#14060c!important;animation:none}
@keyframes bzBetaGlow{0%,100%{box-shadow:0 0 0 0 rgba(255,182,39,0)}50%{box-shadow:0 0 14px 1px rgba(255,182,39,.35)}}
@media (prefers-reduced-motion:reduce){nav.bar .links a.betalink{animation:none}}
.navmore .moremenu a::after{display:none}
nav.bar .links a,header.nav nav.links a{
  font-family:var(--ui)!important; font-weight:500!important;
  font-size:14px!important; letter-spacing:0!important; text-transform:none!important;
  color:var(--muted)!important; padding:8px 2px; position:relative;
  transition:color .2s var(--ease);
}
nav.bar .links a:hover,nav.bar .links a.on,nav.bar .links a.active{color:var(--text)!important}
/* underline that grows from the centre */
nav.bar .links a::after{
  content:"";position:absolute;left:50%;right:50%;bottom:0;height:1.5px;
  background:var(--accent);transition:left .25s var(--ease),right .25s var(--ease);
}
nav.bar .links a:hover::after,nav.bar .links a.on::after{left:0;right:0}
.navlogin{
  font-family:var(--ui)!important;font-weight:500!important;font-size:14px!important;
  letter-spacing:0!important;color:var(--muted)!important;cursor:pointer;
}
.navlogin:hover{color:var(--text)!important}
.follow{font-family:var(--ui)!important;font-weight:600!important;font-size:13.5px!important;
        letter-spacing:0!important;padding:9px 17px!important;border-radius:var(--r-pill)!important}

/* ===== AVATARS ============================================= */
/* The gradient is the FALLBACK, and it has to be set as
   background-image rather than through the `background` shorthand.
   The shorthand resets background-image to none, and with !important on
   it, an inline style="background-image:url(...)" could never win -- so
   every member with a profile picture rendered as an empty grey circle
   while members with no picture at least showed their initials.
   Splitting it lets the inline image through and keeps the gradient for
   everyone else. */
.avatar{
  border-radius:var(--r-pill)!important;
  background-color:var(--surface-2)!important;
  border:1px solid var(--hairline)!important;
  font-family:var(--ui)!important; font-weight:600!important; font-size:13px!important;
  color:var(--accent)!important; background-size:cover!important; background-position:center!important;
  flex:none;
}
.avatar:not([style*="background-image"]):not([style*="--av"]){
  background-image:linear-gradient(145deg,var(--surface-3),var(--surface-2))!important;
}
/* verified ring */
.avatar.verified{box-shadow:0 0 0 2px var(--bg),0 0 0 3.5px var(--accent)}

/* ===== BADGES ============================================== */
.badge{
  font-family:var(--ui)!important; font-weight:600!important;
  font-size:10px!important; letter-spacing:.08em!important; text-transform:uppercase!important;
  padding:3px 8px!important; border-radius:var(--r-pill)!important;
  background:rgba(255,255,255,.07)!important; color:var(--text-dim)!important;
  border:1px solid var(--hairline)!important; box-shadow:none!important;
}
.badge.staff{background:linear-gradient(140deg,var(--accent-hi),var(--accent))!important;color:#1A1509!important;border-color:transparent!important}
.badge.founder{background:var(--accent-wash)!important;color:var(--accent-hi)!important;border-color:var(--accent-dim)!important}
.badge.verified{background:rgba(107,158,120,.14)!important;color:#8CC49B!important;border-color:rgba(107,158,120,.3)!important}
.badge.supporter{background:var(--hot-wash)!important;color:var(--hot-hi)!important;border-color:rgba(45,212,191,.3)!important}

/* ===== POSTS =============================================== */
.post{
  background:var(--surface)!important; border:1px solid var(--hairline)!important;
  border-radius:var(--r-lg)!important; padding:20px 22px!important; margin-bottom:14px!important;
  box-shadow:var(--shadow-1)!important; transition:border-color .25s var(--ease);
}
.post:hover{border-color:var(--hairline-2)!important}
.post.staff-post{
  border-color:var(--accent-dim)!important;
  background:linear-gradient(180deg,rgba(200,169,107,.05),var(--surface))!important;
}
.post .who b{font-family:var(--ui)!important;font-weight:600!important;font-size:14.5px!important;letter-spacing:0!important}
.post .who small{font-family:var(--ui)!important;font-size:12px!important;color:var(--muted)!important;letter-spacing:0!important}
.post p.body{color:var(--text)!important;font-size:15.5px!important;line-height:1.62!important}
.post .ptag{
  font-family:var(--ui)!important;font-weight:500!important;font-size:11px!important;
  letter-spacing:.04em!important;color:var(--muted)!important;
  border:1px solid var(--hairline)!important;border-radius:var(--r-pill)!important;padding:2px 9px!important;
}
.post .actions{border-top:1px solid var(--hairline)!important;padding-top:12px!important;gap:6px!important}
.post .actions span{
  font-family:var(--ui)!important;font-size:13px!important;color:var(--muted)!important;
  padding:6px 12px;border-radius:var(--r-pill);transition:all .18s var(--ease);
}
.post .actions span:hover{background:rgba(255,255,255,.06);color:var(--text)!important}
/* affection uses the wine accent, never the brass */
.post .actions span.on,.post .actions span.fired{color:var(--hot-hi)!important;background:var(--hot-wash)}

/* ===== COMPOSER ============================================ */
.composer{
  background:var(--surface)!important;border:1px solid var(--hairline)!important;
  border-radius:var(--r-lg)!important;padding:18px!important;margin-bottom:18px!important;
  transition:border-color .25s var(--ease);
}
/* focus now lands on the textarea itself, which has its own ring */
/* Superseded: this used to be background:transparent, border:0 -- a
   seamless look where the card itself was the input. On a dark card it
   just reads as empty space with floating placeholder text, with nothing
   telling you where to type. The single definition now lives below,
   under "recessed inputs". */
.composer textarea,.composer input[type=text],.composer input:not([type]){
  color:var(--text)!important;
  font-family:var(--ui)!important;font-size:16px!important;line-height:1.55!important;
  resize:none;
}
.cbtn{
  background:transparent!important;border:0!important;color:var(--muted)!important;
  width:34px;height:34px;border-radius:var(--r-pill);cursor:pointer;font-size:16px;
  transition:all .18s var(--ease);
}
.cbtn:hover{background:rgba(255,255,255,.07)!important;color:var(--accent)!important}

/* ===== FORMS =============================================== */
input[type=text],input[type=email],input[type=password],input[type=date],
input[type=search],textarea,select{
  background:var(--surface-2)!important;border:1px solid var(--hairline)!important;
  border-radius:var(--r)!important;color:var(--text)!important;
  font-family:var(--ui)!important;font-size:14.5px!important;padding:11px 14px!important;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
input:focus,textarea:focus,select:focus{
  border-color:var(--accent-dim)!important;box-shadow:0 0 0 3px var(--accent-wash)!important;outline:none!important;
}
/* ---- recessed inputs, and quiet dividers ------------------------------
   The post composer's textarea had a transparent background and no
   border, so it was invisible against the card behind it — there was
   nothing on screen telling you where to type. Anything you type into
   should read as a WELL: darker than the surface it sits on, with a
   hairline round it and an unmistakable focus state.

   The dividers are deliberately faint. On a page this dark a strong rule
   reads as a box edge and chops the layout up; these are just enough to
   tell you where one thing stops and the next begins. */
.composer textarea,
.composer input[type=text],
.composer input[type=search]{
  background:#0A0E19!important;
  border:1px solid var(--hairline-2)!important;
  border-radius:var(--r-sm)!important;
  padding:12px 14px!important;
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.composer textarea:focus,
.composer input:focus{
  border-color:var(--accent-dim)!important;
  box-shadow:0 0 0 3px var(--accent-wash)!important;
}
.composer textarea::placeholder{color:var(--faint)!important}

/* the composer's button row, separated from what you are writing */
.composer .crow2{
  border-top:1px solid var(--hairline);
  margin-top:12px; padding-top:11px;
  display:flex; align-items:center; gap:10px;
}

/* a card's kicker is a heading; give it something to sit on */
.card .pad > .k:first-child,
.card .pad > .kick:first-child{
  padding-bottom:9px; margin-bottom:11px;
  border-bottom:1px solid var(--hairline);
}

/* rows in a list read as a list when they are separated */
.mrow + .mrow, .lbrow + .lbrow{border-top:1px solid rgba(255,255,255,.045)}

/* a post is a unit; its action row is not part of the writing */
.post .actions{border-top:1px solid var(--hairline); margin-top:14px; padding-top:11px}

/* ---- .privsel: the "who can see this" control -------------------------
   It has to live HERE, not in a page's inline <style>. The blanket rule
   above sets every select's font, padding and radius with !important, and
   this stylesheet loads after the page, so an inline .privsel rule loses
   on !important no matter how specific it is. That is exactly what
   happened: the control rendered as a full-size form field sitting far
   from its label, reading like another question rather than a setting.

   Small, dark, and carrying an eye so it reads as visibility at a glance. */
.privsel{
  -webkit-appearance:none!important;appearance:none!important;
  width:auto!important;flex:none;
  font-family:var(--ui)!important;font-size:11px!important;
  letter-spacing:.04em;line-height:1.4!important;
  padding:3px 10px 3px 25px!important;
  border-radius:var(--r-pill)!important;
  background-color:#08080a!important;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2384848C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/><circle cx='12' cy='12' r='3'/></svg>")!important;
  background-repeat:no-repeat!important;
  background-position:8px center!important;
  background-size:11px 11px!important;
  border:1px solid rgba(255,255,255,.10)!important;
  color:var(--muted)!important;cursor:pointer;
}
.privsel:hover{color:var(--text)!important;border-color:var(--accent-dim)!important}
.privsel:focus{border-color:var(--accent-dim)!important;box-shadow:none!important}
/* Everyone is the one worth noticing at a glance. */
.privsel[data-v="public"]{color:var(--accent)!important;border-color:var(--accent-dim)!important}
.privsel[data-v="private"]{opacity:.75}

input[type=checkbox],input[type=radio]{accent-color:var(--accent);width:16px;height:16px;cursor:pointer}
label{font-family:var(--ui)!important;font-size:13.5px!important;color:var(--text-dim)!important}

/* ===== RAILS / LISTS ======================================= */
.rail .card{margin-bottom:16px!important}
.mrow,.lrow,.lead-row{
  padding:9px 8px!important;border-radius:var(--r-sm)!important;border-bottom:0!important;
  transition:background .18s var(--ease);
}
.mrow:hover,.lrow:hover,.clicky:hover{background:rgba(255,255,255,.045)!important;cursor:pointer}
.mrow .nm b,.nm b{font-family:var(--ui)!important;font-weight:600!important;font-size:13.5px!important}
.mrow .nm small,.nm small{font-size:11.5px!important;color:var(--muted)!important}

/* tabs */
.mtab,.ptab,.tab{
  font-family:var(--ui)!important;font-weight:500!important;font-size:13px!important;
  letter-spacing:0!important;text-transform:none!important;
  background:transparent!important;border:0!important;color:var(--muted)!important;
  padding:8px 13px!important;border-radius:var(--r-pill)!important;cursor:pointer;
  transition:all .2s var(--ease);
}
.mtab:hover,.ptab:hover,.tab:hover{color:var(--text)!important;background:rgba(255,255,255,.05)!important}
.mtab.on,.ptab.on,.tab.on{background:var(--accent-wash)!important;color:var(--accent-hi)!important}

/* ===== MODALS ============================================== */
.smodal{background:rgba(6,6,7,.78)!important;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.sbox{
  background:var(--surface)!important;border:1px solid var(--hairline-2)!important;
  border-radius:var(--r-xl)!important;box-shadow:var(--shadow-3)!important;
}
.sx{color:var(--muted)!important;font-size:22px!important;transition:color .2s}
.sx:hover{color:var(--text)!important}

/* ===== MESSAGES ============================================ */
.msg-inbox{border-right:1px solid var(--hairline)!important}
.msg-compose{border-top:1px solid var(--hairline)!important;padding:12px!important}
.msg-compose textarea{background:var(--surface-2)!important;border-radius:var(--r-lg)!important}
.bub,.bubble{border-radius:var(--r-lg)!important;font-size:14.5px!important;line-height:1.5!important}
.bub.me,.bubble.me{background:linear-gradient(180deg,var(--accent),var(--accent-dim))!important;color:#1A1509!important}
.bub.them,.bubble.them{background:var(--surface-2)!important;color:var(--text)!important}

/* ===== SFW / BLUR ==========================================
   One toggle makes the whole site safe to have open. The most
   requested quality-of-life feature on any site like this. */
body.sfw img:not(.no-blur),
body.sfw .thumb:not(.no-blur),
body.sfw [data-explicit="1"]{
  filter:blur(22px) saturate(.6); transition:filter .3s var(--ease);
}
body.sfw [data-explicit="1"]:hover{filter:blur(0)}
.blurred{filter:blur(22px) saturate(.6);cursor:pointer;transition:filter .35s var(--ease)}
.blurred.revealed{filter:none}
.blur-note{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--ui);font-size:12px;font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text);pointer-events:none;text-shadow:0 1px 8px rgba(0,0,0,.9);
}

/* ===== FOOTER ============================================== */
footer{
  background:transparent!important;border-top:1px solid var(--hairline)!important;
  padding:34px 0!important;color:var(--faint)!important;
  font-family:var(--ui)!important;font-weight:400!important;font-size:12.5px!important;
  letter-spacing:.01em!important;text-transform:none!important;
}
footer a{color:var(--muted)!important;transition:color .2s}
footer a:hover{color:var(--text)!important}

/* ===== MISC ================================================ */
.empty,.sload,.hint{
  color:var(--muted)!important;font-family:var(--ui)!important;font-size:14px!important;
}
.thumb{border-radius:var(--r)!important}
.bz-thumb{
  background:linear-gradient(140deg,#231F27 0%,#15131A 55%,#2A2130 100%)!important;
  position:relative;
}
.bz-thumb::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 32% 28%,var(--accent-wash),transparent 62%);
}
.unreadn{
  background:var(--hot)!important;color:#fff!important;border-radius:var(--r-pill)!important;
  font-family:var(--ui)!important;font-weight:600!important;font-size:10.5px!important;
  padding:2px 7px!important;letter-spacing:0!important;
}

/* respect reduced motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* phone */
@media(max-width:860px){
  body{font-size:15px}
  nav.bar,header.nav{padding:0 16px!important}
  .pad{padding:18px!important}
  .post{padding:16px 17px!important}
}

/* ============================================================
   TRUST SIGNALS
   Visual, at-a-glance protection. Two rules:
     1. Most people get NO decoration. If every avatar has a ring,
        rings mean nothing. Only the two ends of the scale are marked.
     2. Chips state FACTS, never verdicts. "1 photo · joined today"
        lets the reader draw the conclusion.
   ============================================================ */

.bz-av{position:relative;display:inline-block;flex:none;line-height:0}

/* the ring sits outside the avatar so it never crops the image */
.bz-av::before{
  content:"";position:absolute;inset:-3px;border-radius:var(--r-pill);
  pointer-events:none;transition:box-shadow .25s var(--ease);
}

/* plain — the default, and most of the community. No ring at all. */
.bz-av[data-frame="plain"]::before{display:none}

/* fresh — joined recently. Quiet, not accusatory: a dotted outline
   that reads as "incomplete" rather than "dangerous". */
.bz-av[data-frame="fresh"]::before{
  border:1.5px dashed rgba(200,169,107,.55);
}

/* caution — new AND almost no photos AND lots of friends. The exact
   shape of a thrown-together account. */
.bz-av[data-frame="caution"]::before{
  border:2px dashed var(--warn);
  box-shadow:0 0 0 1px rgba(200,154,91,.18), 0 0 12px rgba(200,154,91,.22);
}
.bz-av[data-frame="caution"]::after{
  content:"!";position:absolute;right:-3px;bottom:-3px;
  width:15px;height:15px;border-radius:var(--r-pill);
  background:var(--warn);color:#1A1509;border:2px solid var(--bg);
  font:700 10px/11px var(--ui);display:flex;align-items:center;justify-content:center;
}

/* verified — a calm solid ring. Reassurance, not a trophy. */
.bz-av[data-frame="verified"]::before{
  border:2px solid rgba(107,158,120,.7);
}
.bz-av[data-frame="verified"]::after{
  content:"";position:absolute;right:-2px;bottom:-2px;width:14px;height:14px;
  border-radius:var(--r-pill);background:var(--ok);border:2px solid var(--bg);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A0A0B' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size:9px;background-repeat:no-repeat;background-position:center;
}

/* trusted — brass. Vouched for, or earned the tier. */
.bz-av[data-frame="trusted"]::before{
  border:2px solid var(--accent);
  box-shadow:0 0 10px rgba(200,169,107,.28);
}

/* pillar — brass with a soft halo. Rare by design. */
.bz-av[data-frame="pillar"]::before{
  border:2px solid var(--accent-hi);
  box-shadow:0 0 0 1px rgba(223,196,140,.3),0 0 18px rgba(223,196,140,.4);
}
.bz-av[data-frame="pillar"]::after{
  content:"";position:absolute;right:-3px;bottom:-3px;width:15px;height:15px;
  border-radius:var(--r-pill);border:2px solid var(--bg);
  background:linear-gradient(145deg,var(--accent-hi),var(--accent));
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231A1509'%3E%3Cpath d='M12 2l2.9 6.3 6.9.8-5.1 4.7 1.4 6.8L12 17.3 5.9 20.6l1.4-6.8L2.2 9.1l6.9-.8z'/%3E%3C/svg%3E");
  background-size:10px;background-repeat:no-repeat;background-position:center;
}

/* ---- factual chips ---- */
.bz-signals{display:inline-flex;flex-wrap:wrap;gap:5px;align-items:center;vertical-align:middle}
.bz-chip{
  font-family:var(--ui);font-weight:500;font-size:10.5px;letter-spacing:.01em;
  padding:2px 7px;border-radius:var(--r-pill);white-space:nowrap;
  background:rgba(255,255,255,.05);color:var(--muted);
  border:1px solid var(--hairline);
}
/* the two that mean "look twice" */
.bz-chip.warn{background:rgba(200,154,91,.13);color:#D9B27A;border-color:rgba(200,154,91,.3)}
/* the ones that mean "this is a real person" */
.bz-chip.good{background:var(--accent-wash);color:var(--accent-hi);border-color:var(--accent-dim)}
.bz-chip.seen{background:rgba(107,158,120,.13);color:#8CC49B;border-color:rgba(107,158,120,.3)}

/* a caution author's whole post gets a quiet left edge — visible when
   scanning a group, invisible if you are not looking for it */
.post[data-frame="caution"]{border-left:2px solid rgba(200,154,91,.5)!important}

@media (prefers-reduced-motion:reduce){ .bz-av::before{transition:none} }

/* ============================================================
   COMPACT APP CHROME
   Add class="app" to <body> on any in-community page.

   The landing page can breathe — it is selling something. Inside
   the community you are scanning, and the thing worth keeping from
   the incumbent is exactly this: dense, quiet, information first.
   Big serif headers in a feed are decoration you have to read past
   forty times a session.
   ============================================================ */
body.app{font-size:14.5px;line-height:1.55}

/* Escape hatch: the signed-out pitch is marketing and should still
   breathe. Only the community itself goes compact. */
body.app .marketing h1{font-family:var(--display);font-weight:600;font-size:clamp(34px,5vw,58px);line-height:1.12}
body.app .marketing h2{font-family:var(--display);font-weight:600;font-size:clamp(25px,3.2vw,36px);line-height:1.15}
body.app .marketing h3{font-family:var(--display);font-weight:600;font-size:19px}
body.app .marketing .card{border-radius:var(--r-lg)!important}
body.app .marketing .pad{padding:22px!important}

body.app h1{font-family:var(--ui);font-weight:600;font-size:21px;letter-spacing:-.015em;line-height:1.25}
body.app h2{font-family:var(--ui);font-weight:600;font-size:17px;letter-spacing:-.012em;line-height:1.3}
body.app h3{font-family:var(--ui);font-weight:600;font-size:15px;letter-spacing:-.008em}
body.app h4{font-family:var(--ui);font-weight:600;font-size:13.5px}

/* page title bar: a line, not a hero */
body.app .pagehead{
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  padding:18px 0 14px;border-bottom:1px solid var(--hairline);margin-bottom:18px;
}
body.app .pagehead h1{margin:0}
body.app .pagehead .sub{color:var(--muted);font-size:13px}
body.app .pagehead .spacer{flex:1}

/* tighter surfaces throughout the app */
body.app .card{border-radius:var(--r)!important}
body.app .pad{padding:16px!important}
body.app .post{padding:14px 16px!important;margin-bottom:10px!important;border-radius:var(--r)!important}
body.app .post p.body{font-size:14.5px!important;line-height:1.55!important}
body.app .composer{padding:14px!important;margin-bottom:14px!important}
body.app .rail .card{margin-bottom:12px!important}
body.app section.sec{padding:28px 0!important}
body.app nav.bar,body.app header.nav{height:54px}
body.app .kick,body.app .k{font-size:10px!important;letter-spacing:.14em!important}

/* the display serif survives only where it is genuinely a title */
body.app .display,body.app .brand,body.app .navsig{font-family:var(--display)!important}

/* dense list rows — the members list, search results, plans board */
.dense{display:flex;flex-direction:column}
.dense .drow{
  display:flex;align-items:center;gap:12px;padding:10px 12px;
  border-bottom:1px solid var(--hairline);transition:background .15s var(--ease);
}
.dense .drow:last-child{border-bottom:0}
.dense .drow:hover{background:rgba(255,255,255,.035)}
.dense .drow .main{flex:1;min-width:0}
.dense .drow .nm{font-weight:600;font-size:14px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.dense .drow .meta{color:var(--muted);font-size:12.5px;margin-top:2px}
.dense .drow .right{color:var(--faint);font-size:12px;white-space:nowrap}

/* identity string: "34F Switch · Summerlin" */
.ident{color:var(--muted);font-size:12.5px;font-weight:400}
.ident b{color:var(--text-dim);font-weight:500}

/* ===== NAME PLATES (Points Store) ==========================
   Drawn in CSS so the plate grows with the name: the ends never
   squash and the letters always sit inside with room to breathe.
   Use: <span class="bzplate neon|gold|chrome">Name</span> */
.bzplate{
  display:inline-flex; align-items:center; justify-content:center; position:relative;
  padding:.28em 1.5em .3em; line-height:1.15; white-space:nowrap; max-width:100%;
  border:3px solid transparent; isolation:isolate;
}
.bzplate::before,.bzplate::after{position:absolute;top:50%;transform:translateY(-50%);pointer-events:none}
/* neon: a glowing pink tube with a heart at each end */
.bzplate.neon{
  border:2px solid #ff9cc8; border-radius:999px; color:#fff;
  background:linear-gradient(180deg,rgba(46,12,30,.9),rgba(20,6,14,.94));
  box-shadow:0 0 0 1px rgba(255,182,39,.45) inset,0 0 12px rgba(255,182,39,.6),0 0 32px rgba(255,182,39,.28),inset 0 0 16px rgba(255,182,39,.22);
  text-shadow:0 0 10px rgba(255,120,180,.75);
}
.bzplate.neon::before,.bzplate.neon::after{content:'\2665';font-size:.48em;color:#ff86bd;text-shadow:0 0 8px #ff4f9a}
.bzplate.neon::before{left:.75em}
.bzplate.neon::after{right:.75em}
/* gold: a polished bar with a rivet at each end */
.bzplate.gold{
  border-radius:10px; color:#fbe7b0; text-shadow:0 1px 0 rgba(0,0,0,.7);
  background:linear-gradient(180deg,#221a0e,#130e07) padding-box,
             linear-gradient(135deg,#fff3c4 0%,#e3ae45 28%,#8a5a16 52%,#f8da82 76%,#b47d27 100%) border-box;
  box-shadow:0 6px 18px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,236,180,.22),0 0 18px rgba(242,193,78,.18);
}
.bzplate.gold::before,.bzplate.gold::after{content:'';width:.26em;height:.26em;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff6d0,#c8902f 60%,#6b4410);box-shadow:0 1px 1px rgba(0,0,0,.6)}
.bzplate.gold::before{left:.55em}
.bzplate.gold::after{right:.55em}
/* chrome: brushed silver with a violet inner line */
.bzplate.chrome{
  border-radius:999px; color:#f1f1f5; text-shadow:0 1px 2px rgba(0,0,0,.7);
  background:linear-gradient(180deg,#26262c,#16161a) padding-box,
             linear-gradient(180deg,#ffffff 0%,#a3a3ad 42%,#eeeef3 58%,#6c6c75 100%) border-box;
  box-shadow:inset 0 0 0 1px rgba(34,195,230,.6),0 6px 18px rgba(0,0,0,.5),0 0 14px rgba(34,195,230,.18);
}

/* the Home photo banner is part of the after-dark theme; without it, hide it
   rather than show its text unstyled */
html:not(.bz-night) .nbanner{display:none}

/* Leave room for the separate Calendar link and signed-in controls on smaller desktops. */
@media(min-width:1201px) and (max-width:1450px){
  nav.bar .navsig img.navlogo{height:40px}
  nav.bar .links{gap:16px}
}

/* Readable native date icons and option lists on dark forms, including phones. */
input[type="date"], input[type="time"], input[type="datetime-local"], select { color-scheme: dark; }
input::-webkit-calendar-picker-indicator { opacity: 1; cursor: pointer; }