/* =================================================================
   Vancouver Magic Circle — 2026 refresh
   IBM Ring 92. Brand palette and typography are unchanged from the
   legacy site so longtime members still feel at home. Modernized
   responsive layout, larger readable type, accessible contrast,
   mobile drawer nav.
   ================================================================= */

:root{
  --red:#780300;
  --red-deep:#540200;
  --red-soft:#9c1f1c;
  --gold:#c9a800;
  --gold-soft:#e6c84a;
  --ink:#1a1414;
  --ink-2:#2c2222;
  --paper:#fffaf5;
  --paper-2:#f4ece2;
  --line:#e5dccf;
  --line-2:#cfc2af;
  --muted:#6b5e54;
  --muted-2:#8a7d72;
  --shadow:0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(120,3,0,.06);
  --radius:10px;
  --maxw:1200px;
  --base:17px;
  --serif:"Oswald", "Trebuchet MS", sans-serif;
  --sans:"Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--base);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto}
a{color:var(--red);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--red-deep)}

/* skip link for accessibility */
.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:8px;top:8px;background:var(--ink);color:#fff;padding:8px 12px;border-radius:6px;z-index:1000}

/* keyboard focus ring (gold) */
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* ================ Header ================ */
.site-header{
  background:#000;
  color:#fff;
  position:sticky;top:0;z-index:50;
  box-shadow:0 1px 0 rgba(255,255,255,.08), 0 2px 12px rgba(0,0,0,.4);
}
.site-header .bar{
  max-width:var(--maxw);margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 20px;gap:16px;
}
.brand-link{display:flex;align-items:center;gap:14px;color:#fff;text-decoration:none;min-width:0}
.brand-link:hover{color:#fff}
.brand-mark{
  width:48px;height:48px;
  display:grid;place-items:center;flex-shrink:0;
}
.brand-mark img{
  max-width:100%;max-height:100%;
  width:auto;height:auto;
  display:block;object-fit:contain;
}
.brand-mark svg{width:28px;height:28px;color:var(--gold)}
.brand-text{display:flex;flex-direction:column;line-height:1.05;min-width:0}
.brand-eyebrow{
  font:500 11px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold);
}
.brand-name{
  font:700 20px/1 var(--serif);letter-spacing:.02em;text-transform:uppercase;
  margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* desktop nav */
.primary-nav{display:none;align-items:center;gap:2px}
.primary-nav a{
  color:rgba(255,255,255,.85);text-decoration:none;
  font:400 14.5px/1 var(--sans);letter-spacing:.04em;
  padding:10px 12px;border-radius:6px;
  transition:background .15s, color .15s;
}
.primary-nav a:hover{background:rgba(255,255,255,.08);color:#fff}
.primary-nav a.active{background:var(--red);color:#fff}
.primary-nav .login{
  margin-left:8px;padding:10px 16px;border:1px solid var(--gold);
  color:var(--gold);border-radius:999px;
}
.primary-nav .login:hover{background:var(--gold);color:#000}

/* hamburger */
.menu-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:transparent;border:1px solid rgba(255,255,255,.25);
  color:#fff;font:600 13px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;
  padding:10px 14px;border-radius:8px;cursor:pointer;
  min-height:44px;
}
.menu-btn:hover{border-color:var(--gold);color:var(--gold)}
.menu-btn svg{width:18px;height:18px}

@media (min-width: 980px){
  .primary-nav{display:flex}
  .menu-btn{display:none}
}

/* mobile drawer */
.drawer{
  position:fixed;inset:0;z-index:60;
  background:rgba(0,0,0,.55);
  opacity:0;pointer-events:none;transition:opacity .2s ease;
}
.drawer[aria-hidden="false"]{opacity:1;pointer-events:auto}
.drawer-panel{
  position:absolute;right:0;top:0;bottom:0;
  width:min(86vw, 360px);background:#1a1414;color:#fff;
  padding:20px 18px 28px;
  transform:translateX(100%);transition:transform .25s ease;
  display:flex;flex-direction:column;gap:8px;overflow-y:auto;
  box-shadow:-12px 0 32px rgba(0,0,0,.4);
}
.drawer[aria-hidden="false"] .drawer-panel{transform:translateX(0)}
.drawer-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.drawer-head .lbl{font:700 13px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.drawer-close{background:transparent;border:0;color:#fff;font-size:28px;line-height:1;cursor:pointer;padding:6px 10px;border-radius:6px;min-width:44px;min-height:44px}
.drawer-close:hover{background:rgba(255,255,255,.08)}
.drawer-panel a{
  color:#fff;text-decoration:none;
  font:600 18px/1.2 var(--sans);
  padding:14px 12px;border-radius:8px;
  border-bottom:1px solid rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:space-between;
  min-height:44px;
}
.drawer-panel a:hover{background:rgba(255,255,255,.06);color:#fff}
.drawer-panel a.active{background:var(--red);color:#fff;border-bottom-color:transparent}
.drawer-panel a .arrow{opacity:.45;font-size:18px}

/* ================ Hero band (home only) ================ */
.hero-band{
  position:relative;overflow:hidden;
  background:#000;
  background-image:
    radial-gradient(1100px 360px at 80% 50%, rgba(120,3,0,.55), transparent 60%),
    radial-gradient(700px 280px at 12% 90%, rgba(201,168,0,.10), transparent 60%);
  color:#fff;
  border-bottom:3px solid var(--red);
}
/* VMC logo watermark — centered, low-opacity, behind the red/gold gradients */
.hero-band::before{
  content:"";
  position:absolute;inset:0;
  background:url('/images/VMC.png') no-repeat center center;
  background-size:clamp(240px, 36vw, 460px);
  opacity:.08;
  pointer-events:none;
  z-index:0;
}
.hero-band .wrap{
  position:relative;z-index:1;
  max-width:var(--maxw);margin:0 auto;padding:48px 20px 56px;
  display:grid;grid-template-columns:1fr;gap:28px;align-items:center;
}
.hero-band h1{
  font:700 clamp(34px,6vw,56px)/1.05 var(--serif);
  letter-spacing:.01em;text-transform:uppercase;margin:0;
  text-shadow:3px 3px 0 rgba(120,3,0,.35);
}
.hero-band h1 .accent{color:var(--gold)}
.hero-band .sub{color:#e7d9c8;max-width:48ch;font-size:1.05em;margin-top:14px}
.hero-meta{
  display:flex;flex-wrap:wrap;gap:12px 22px;margin-top:24px;
  color:#cdb9a3;font-size:.92em;
}
.hero-meta b{color:var(--gold-soft);font-weight:700}
.hero-card{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.18);
  border-radius:var(--radius);
  padding:22px;
}
.hero-card .lbl{font:700 11px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.hero-card h3{
  font:700 24px/1.15 var(--serif);letter-spacing:.02em;
  margin:8px 0 14px;color:#fff;text-transform:uppercase;
}
.hero-card p{margin:0;color:#e7d9c8;font-size:.95em}
.hero-card .row{display:flex;gap:16px;flex-wrap:wrap;margin-top:14px;font-size:.92em}
.hero-card .row > div{min-width:140px}
.hero-card .row span{color:#cdb9a3}
.hero-card .row b{color:#fff;font-weight:600;display:block;margin-top:2px}
.hero-card .cta{
  display:inline-flex;align-items:center;gap:8px;margin-top:18px;
  background:var(--red);color:#fff;text-decoration:none;
  padding:12px 18px;border-radius:8px;font-weight:700;letter-spacing:.04em;
  min-height:44px;
}
.hero-card .cta:hover{background:var(--red-deep);color:#fff}

@media (min-width:880px){
  .hero-band .wrap{grid-template-columns:1.4fr 1fr;gap:48px;padding:80px 20px 84px}
}

/* ================ Main layout ================ */
.layout{
  max-width:var(--maxw);margin:0 auto;
  padding:32px 20px 48px;
  display:grid;grid-template-columns:1fr;gap:32px;
}
@media (min-width:980px){
  .layout{grid-template-columns:1fr 260px;gap:48px;padding:48px 20px 64px}
}

/* posts */
.post{
  background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);
  padding:28px;margin-bottom:28px;
  box-shadow:var(--shadow);
}
.post:last-child{margin-bottom:0}
.post-kicker{
  font:700 11.5px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;
  color:var(--red);margin-bottom:10px;
  display:inline-flex;align-items:center;gap:10px;
}
.post-kicker::before{content:"";width:24px;height:1.5px;background:var(--red)}
.post-kicker.gold{color:#9a8000}
.post-kicker.gold::before{background:var(--gold)}
.post h2{
  font:700 clamp(28px,4.4vw,40px)/1.1 var(--serif);
  letter-spacing:.01em;text-transform:uppercase;
  margin:0 0 14px;color:var(--ink);
}
.post h2 .accent, .post h2 span{color:var(--red)}
.post h3{
  font:700 22px/1.2 var(--serif);letter-spacing:.01em;text-transform:uppercase;
  margin:24px 0 12px;color:var(--ink);
}
.post h4{
  font:700 18px/1.2 var(--serif);letter-spacing:.02em;text-transform:uppercase;
  margin:18px 0 10px;color:var(--ink);
}
.post h5{
  font:700 13px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;
  margin:16px 0 6px;color:var(--red);
}
.post-body{display:grid;grid-template-columns:1fr;gap:24px}
@media (min-width:720px){.post-body{grid-template-columns:1fr 240px}}
.post-photo{
  aspect-ratio:4/5;border-radius:var(--radius);
  background:
    repeating-linear-gradient(135deg, rgba(120,3,0,.06) 0 8px, transparent 8px 16px),
    linear-gradient(180deg, var(--paper-2), #e2d4be);
  border:1px solid var(--line-2);
  display:flex;align-items:flex-end;justify-content:center;padding:14px;
  font:600 11px/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);text-align:center;
  overflow:hidden;
}
.post-photo img{width:100%;height:100%;object-fit:cover;border-radius:calc(var(--radius) - 1px)}
.post p{margin:0 0 12px;font-size:1.02em}
.post ul, .post ol{margin:8px 0 16px;padding-left:22px}
.post ul li, .post ol li{margin-bottom:6px}
.post ul.bullet-list li::marker{color:var(--red)}
.post .image.right{float:right;margin:0 0 14px 18px;max-width:240px;border-radius:var(--radius);border:1px solid var(--line-2)}
.post .image.left{float:left;margin:0 18px 14px 0;max-width:240px;border-radius:var(--radius);border:1px solid var(--line-2)}
.post .image.border{border:1px solid var(--line-2)}
.post .hr{display:none}
.post .news-content{clear:both}
.post .facts{
  list-style:none;padding:0;margin:18px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.post .facts li{
  display:flex;align-items:baseline;gap:14px;
  padding:12px 0;border-bottom:1px dotted var(--line);
  font-size:.96em;
}
.post .facts li:last-child{border-bottom:0}
.post .facts .k{
  font:700 11px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);min-width:90px;
}
.post .facts .v{color:var(--ink);font-weight:600}
.post-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.btn{
  display:inline-flex;align-items:center;gap:8px;
  font:700 14px/1 var(--sans);letter-spacing:.04em;
  padding:13px 18px;border-radius:8px;
  text-decoration:none;border:1px solid transparent;
  cursor:pointer;min-height:44px;text-transform:uppercase;
}
.btn.primary{background:var(--red);color:#fff}
.btn.primary:hover{background:var(--red-deep);color:#fff}
.btn.ghost{background:#fff;color:var(--red);border-color:var(--line-2)}
.btn.ghost:hover{border-color:var(--red);background:#fff8f7}
/* legacy `.button` mapped to .btn.primary */
a.button{
  display:inline-flex;align-items:center;gap:8px;
  font:700 14px/1 var(--sans);letter-spacing:.04em;
  padding:13px 18px;border-radius:8px;
  text-decoration:none;background:var(--red);color:#fff;text-transform:uppercase;
  min-height:44px;
}
a.button:hover{background:var(--red-deep);color:#fff}
.post-meta{
  display:flex;justify-content:space-between;align-items:center;
  margin-top:18px;padding-top:14px;border-top:1px solid var(--line);
  font-size:.85em;color:var(--muted);flex-wrap:wrap;gap:8px;
}

/* contact columns (legacy .col-first .col6 patterns) */
.col6{display:block;margin-bottom:18px}
@media (min-width:720px){
  .post .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px}
  .col6{margin-bottom:0}
}
.contact h5{margin-top:0}
.contact hr{border:0;border-top:1px solid var(--line);margin:16px 0}
.contact .photo{margin:0 0 18px;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line-2)}

/* magicians-for-hire row */
.magician{
  display:flex;gap:18px;align-items:flex-start;
  padding:18px 0;border-bottom:1px solid var(--line);
}
.magician:last-child{border-bottom:0}
.magician-photo img{
  width:88px;height:88px;object-fit:cover;border-radius:50%;
  border:1px solid var(--line-2);
}
.magician-details{flex:1;min-width:0}
.magician-details h4{margin:0 0 6px;font-size:18px}
.magician-details p{margin:0 0 6px;font-size:.96em}
.magician-details .social-icons img{display:inline-block;width:18px;height:18px;vertical-align:middle;margin-right:4px}

/* event list rows (rebuilt events page) */
.event-row{
  display:grid;grid-template-columns:120px 1fr auto;gap:18px;align-items:center;
  padding:16px 0;border-bottom:1px solid var(--line);
}
.event-row:last-child{border-bottom:0}
.event-row .date-block{
  background:var(--paper-2);border:1px solid var(--line-2);border-radius:var(--radius);
  padding:10px 6px;text-align:center;
}
.event-row .date-block .m{font:700 11px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--red)}
.event-row .date-block .d{font:700 28px/1 var(--serif);color:var(--ink);margin:4px 0}
.event-row .date-block .y{font:400 11px/1 var(--sans);color:var(--muted);letter-spacing:.04em}
.event-row .info h3{margin:0 0 4px;font:700 18px/1.2 var(--serif);text-transform:uppercase;color:var(--ink)}
.event-row .info .meta{color:var(--muted);font-size:.92em}
@media (max-width:640px){
  .event-row{grid-template-columns:84px 1fr;gap:14px}
  .event-row .btn{grid-column:1 / -1}
  .event-row .date-block .d{font-size:22px}
}

/* newsletter year groups — matches the trophy-page .competition-winners look:
   a card grid where each year is a self-contained pill-titled block. */
.newsletter-list{
  display:grid;grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:18px;margin-top:8px;
}
.news-year-list{
  background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 16px;
}
.news-year-list h4{
  margin:0 0 8px;color:#fff;background:var(--red);
  font:700 13px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;
  padding:6px 10px;border-radius:6px;display:inline-block;
}
.news-year-list ul{list-style:none;padding:0;margin:0;font-size:.95em;display:block}
.news-year-list ul li{margin:0;padding:6px 0;border-bottom:1px dotted var(--line)}
.news-year-list ul li:last-child{border-bottom:0}
.news-year-list ul li a{
  display:block;text-decoration:none;color:var(--ink);
}
.news-year-list ul li a:hover{color:var(--red)}

/* ================ Sidebar ================ */
.sidebar{display:flex;flex-direction:column;gap:18px}
.side-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:18px;box-shadow:var(--shadow);
}
.side-card h3{
  font:700 13px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;
  color:var(--red);margin:0 0 14px;
}
.side-nav{display:flex;flex-direction:column;gap:2px;padding:0;margin:0;list-style:none}
.side-nav a{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 14px;border-radius:8px;
  font:600 14.5px/1.2 var(--sans);letter-spacing:.04em;
  color:var(--ink);background:var(--paper-2);
  text-decoration:none;border:1px solid transparent;
  transition:background .15s, color .15s, border-color .15s;
  min-height:44px;
}
.side-nav a:hover{background:#fff;border-color:var(--line-2);color:var(--red)}
.side-nav a.active{background:var(--red);color:#fff}
.side-nav a .arr{opacity:.4;font-size:14px}
.side-nav a:hover .arr,.side-nav a.active .arr{opacity:.85}

.next-event{
  background:linear-gradient(180deg, #fff 0%, #fff8f7 100%);
}
.next-event .when{
  font:700 28px/1 var(--serif);color:var(--red);text-transform:uppercase;letter-spacing:.02em;
}
.next-event .what{font-weight:600;margin:8px 0 4px}
.next-event .where{color:var(--muted);font-size:.92em}
.next-event .small{display:block;font-size:.55em;color:var(--muted);font-weight:400;margin-top:4px;letter-spacing:.04em}

/* ================ Discover (4-up dark cards) ================ */
.discover{
  background:#0f0a0a;
  color:#fff;
  background-image:
    radial-gradient(800px 360px at 50% 0%, rgba(120,3,0,.45), transparent 60%);
  border-top:3px solid var(--red);
  padding:56px 0 32px;
}
.discover .wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.discover h2{
  font:700 28px/1 var(--serif);letter-spacing:.05em;text-transform:uppercase;
  margin:0 0 28px;color:#fff;
}
.discover h2 small{display:block;font-weight:300;font-size:14px;color:var(--gold);letter-spacing:.18em;margin-bottom:8px}
.cards{
  display:grid;grid-template-columns:1fr;gap:18px;
}
@media (min-width:640px){.cards{grid-template-columns:repeat(2, 1fr)}}
@media (min-width:960px){.cards{grid-template-columns:repeat(4, 1fr)}}
.card{
  background:#1a1010;border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius);overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform .2s, border-color .2s;
  color:#fff;text-decoration:none;
}
.card:hover{transform:translateY(-3px);border-color:var(--gold);color:#fff}
.card .thumb{
  aspect-ratio:16/10;overflow:hidden;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 8px, transparent 8px 16px),
    linear-gradient(180deg, rgba(120,3,0,.4), rgba(0,0,0,.6));
  display:flex;align-items:center;justify-content:center;
  font:600 11px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.5);
}
.card .thumb img{width:100%;height:100%;object-fit:cover}
.card .body{padding:18px}
.card .lbl{
  font:700 12px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--gold);
}
.card h4{font:700 18px/1.2 var(--serif);text-transform:uppercase;letter-spacing:.02em;margin:8px 0 8px;color:#fff}
.card p{margin:0;color:#cdb9a3;font-size:.95em}
.card a.more{
  display:inline-flex;align-items:center;gap:6px;margin-top:14px;
  color:var(--gold-soft);text-decoration:none;font-weight:700;font-size:.92em;
}
.card a.more:hover{color:#fff}

/* ================ Footer ================ */
.site-footer{background:#000;color:#aaa;padding:28px 0;border-top:1px solid #222}
.site-footer .wrap{
  max-width:var(--maxw);margin:0 auto;padding:0 20px;
  display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;
  font-size:.92em;
}
.site-footer a{color:#cdb9a3}

/* ================ Forms (login, RSVP, etc.) ================ */
.form-row{display:block;margin-bottom:14px}
.form-row label{
  display:block;font:700 11px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);margin-bottom:6px;
}
.form-row input[type="text"],
.form-row input[type="email"],
.form-row input[type="password"],
.form-row input[type="tel"],
.form-row input[type="number"],
.form-row select,
.form-row textarea{
  width:100%;padding:12px 14px;border:1px solid var(--line-2);border-radius:8px;
  font:400 16px/1.4 var(--sans);color:var(--ink);background:#fff;
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus{outline:2px solid var(--gold);outline-offset:1px;border-color:var(--gold)}

/* clearfix for floats inside posts */
.post::after{content:"";display:block;clear:both}

/* competition winners — multi-decade grid */
.competition-winners{
  display:grid;grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:18px;margin-top:18px;
}
.competition-winners .decade{
  background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 16px;
}
.competition-winners .decade h4{
  margin:0 0 8px;color:#fff;background:var(--red);
  font:700 13px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;
  padding:6px 10px;border-radius:6px;display:inline-block;
}
.competition-winners .decade ul{list-style:none;padding:0;margin:0;font-size:.95em}
.competition-winners .decade li{padding:4px 0;border-bottom:1px dotted var(--line)}
.competition-winners .decade li:last-child{border-bottom:0}

/* single news article (news_view.php) */
.news-meta{color:var(--muted);font-size:.92em;margin:-6px 0 14px}
.news-image{margin:0 0 18px;text-align:center}
.news-image img{display:inline-block;max-height:320px;border-radius:var(--radius);border:1px solid var(--line-2)}

/* standalone form card (login, password reset, etc.) */
.standalone-form{
  max-width:420px;margin:0 auto;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:28px;box-shadow:var(--shadow);
}
.standalone-form h2{
  font:700 24px/1.1 var(--serif);text-transform:uppercase;letter-spacing:.02em;
  margin:0 0 18px;color:var(--ink);
}
.standalone-form .error-msg{
  background:#fff3f2;border-left:4px solid var(--red);color:var(--red-deep);
  padding:10px 14px;border-radius:6px;margin-bottom:14px;
}
.standalone-form input[type="text"],
.standalone-form input[type="email"],
.standalone-form input[type="password"]{
  width:100%;padding:12px 14px;border:1px solid var(--line-2);border-radius:8px;
  font:400 16px/1.4 var(--sans);background:#fff;margin-bottom:12px;
}
.standalone-form input:focus{outline:2px solid var(--gold);outline-offset:1px;border-color:var(--gold)}
.standalone-form button{
  width:100%;padding:13px 18px;
  background:var(--red);color:#fff;border:0;border-radius:8px;
  font:700 14px/1 var(--sans);letter-spacing:.04em;text-transform:uppercase;cursor:pointer;
  min-height:44px;
}
.standalone-form button:hover{background:var(--red-deep)}
.standalone-form .text-center{text-align:center}

/* paypal blocks (pay-for-stuff) — modernized container */
.paypal-box{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:22px;margin-bottom:18px;box-shadow:var(--shadow);
}
.paypal-box h3{margin:0 0 10px;font:700 20px/1.2 var(--serif);text-transform:uppercase;letter-spacing:.01em;color:var(--ink)}
.paypal-box select{
  padding:10px 12px;border:1px solid var(--line-2);border-radius:8px;
  font:400 15px/1.2 var(--sans);background:#fff;margin:8px 0;
}
.paypal-box form table{width:auto}
.paypal-box form table td{padding:6px 0}

/* ================ Member area ================ */
.member-head{
  display:flex;gap:18px;align-items:center;
  padding:6px 0 18px;border-bottom:1px solid var(--line);margin-bottom:18px;
}
.member-head .photo img, .member-head img.member-photo{
  width:88px;height:88px;object-fit:cover;border-radius:50%;
  border:2px solid var(--line-2);
}
.member-head .who{flex:1;min-width:0}
.member-head .who .name{
  font:700 22px/1.1 var(--serif);text-transform:uppercase;letter-spacing:.01em;
  color:var(--ink);margin:0;
}
.member-head .who .pill{
  display:inline-flex;align-items:center;gap:6px;
  margin-top:8px;padding:5px 12px;border-radius:999px;
  font:700 11.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;
}
.member-head .who .pill.ok{background:#e8f5ed;color:#1f6c3a}
.member-head .who .pill.bad{background:#fef0ee;color:#8a2a25}

.member-nav{
  display:grid;grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));
  gap:10px;margin:6px 0 4px;
}
.member-nav-link{
  display:flex;align-items:center;gap:10px;
  padding:14px 16px;border-radius:8px;
  background:var(--paper-2);color:var(--ink);text-decoration:none;
  font:700 13px/1.2 var(--sans);letter-spacing:.06em;text-transform:uppercase;
  border:1px solid transparent;transition:background .15s, border-color .15s, color .15s;
  min-height:52px;
}
.member-nav-link:hover{background:#fff;border-color:var(--line-2);color:var(--red)}
.member-nav-link.active{background:var(--red);color:#fff}
.member-nav-link i{font-size:16px;flex-shrink:0}
.member-nav-link.member-nav-admin{background:#fff8e7;color:#7a5c00;border-color:#e6c84a}
.member-nav-link.member-nav-admin:hover{background:var(--gold);color:#000;border-color:var(--gold)}
.member-nav-link.member-nav-admin.active{background:#7a5c00;color:#fff;border-color:#7a5c00}

.member-news-post{
  padding:18px 0;border-bottom:1px dashed var(--line);
}
.member-news-post:first-child{padding-top:0}
.member-news-post:last-child{border-bottom:0;padding-bottom:0}
.member-news-post h3{margin:0 0 6px;font:700 22px/1.2 var(--serif);text-transform:uppercase;letter-spacing:.01em;color:var(--ink)}
.member-news-post h4{margin:0 0 6px;font:700 18px/1.2 var(--serif);text-transform:uppercase;color:var(--ink)}
.member-news-meta{font-size:.85em;color:var(--muted);margin-bottom:10px}
.older-posts-toggle{
  display:inline-block;margin-top:6px;
  color:var(--red);text-decoration:none;font-weight:600;cursor:pointer;
}
.older-posts-toggle:hover{color:var(--red-deep);text-decoration:underline}

/* profile-form grid (members/profile.php) */
.profile-grid{display:grid;grid-template-columns:1fr;gap:14px}
@media (min-width:640px){.profile-grid{grid-template-columns:repeat(2, 1fr)}}
@media (min-width:900px){.profile-grid{grid-template-columns:repeat(3, 1fr)}}
.profile-grid .span-2{grid-column:span 2}
.profile-grid .span-all{grid-column:1 / -1}
.profile-grid input[readonly]{background:var(--paper-2);color:var(--muted);cursor:not-allowed}
.profile-photo-row{
  display:flex;gap:18px;align-items:center;flex-wrap:wrap;
  padding:6px 0 18px;border-bottom:1px solid var(--line);margin-bottom:18px;
}
.profile-photo-row img{
  width:96px;height:96px;object-fit:cover;border-radius:50%;border:2px solid var(--line-2);
}
.profile-photo-row .meta{flex:1;min-width:200px}
.profile-photo-row input[type="file"]{font:400 14px/1.2 var(--sans);margin-top:6px}
.profile-photo-row small{display:block;color:var(--muted);font-size:.85em;margin-top:6px}

.check-row{display:flex;flex-wrap:wrap;gap:18px;margin-top:8px}
.check-row label{
  display:inline-flex;align-items:center;gap:8px;color:var(--ink);font-weight:600;font-size:.95em;
  text-transform:none;letter-spacing:0;margin:0;cursor:pointer;
}
.check-row input[type="checkbox"],
.check-row input[type="radio"]{width:18px;height:18px;accent-color:var(--red)}

.alert-box{padding:12px 16px;border-radius:8px;margin-bottom:14px;font-size:.95em}
.alert-box.success{background:#eef9f0;border-left:4px solid #3a8a4d;color:#1f6c3a}
.alert-box.danger {background:#fff3f2;border-left:4px solid var(--red);color:var(--red-deep)}
.alert-box.warning{background:#fff8e7;border-left:4px solid var(--gold);color:#7a5c00}

/* member-area: contest cards (competitions.php) */
.contest-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 20px;margin-bottom:14px;box-shadow:0 1px 3px rgba(0,0,0,.04);
}
.contest-card:last-child{margin-bottom:0}
.contest-card h4{margin:0 0 4px;font:700 18px/1.2 var(--serif);text-transform:uppercase;letter-spacing:.02em;color:var(--ink)}
.contest-card .contest-meta{color:var(--muted);font-size:.92em;margin-bottom:10px}
.placement-pill{
  display:inline-block;padding:4px 12px;border-radius:999px;
  font:700 11px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;
}
.placement-pill.win{background:#fff8e7;color:#7a5c00}
.placement-pill.other{background:var(--paper-2);color:var(--muted)}
.consent-badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.consent-badges .badge{
  display:inline-block;padding:4px 10px;border-radius:6px;
  font:600 11px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;
  background:var(--paper-2);color:var(--muted);
}
.consent-badges .badge.ok{background:#e8f5ed;color:#1f6c3a}
details.reg-toggle{margin-top:8px}
details.reg-toggle > summary{
  display:inline-flex;align-items:center;gap:8px;
  list-style:none;cursor:pointer;
  background:var(--red);color:#fff;
  padding:10px 16px;border-radius:8px;
  font:700 12px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;
  min-height:44px;
}
details.reg-toggle > summary::-webkit-details-marker{display:none}
details.reg-toggle[open] > summary{background:var(--red-deep)}
details.reg-toggle > .reg-body{margin-top:14px;padding:14px;background:var(--paper-2);border-radius:8px}
.reg-body fieldset{border:1px solid var(--line);border-radius:8px;padding:10px 14px;margin:10px 0}
.reg-body fieldset legend{font:700 11px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);padding:0 6px}
.reg-body .opt{display:flex;align-items:flex-start;gap:8px;margin:6px 0;font-size:.95em}

/* member-area: video roster table (workshops.php) */
.member-roster{
  width:100%;border-collapse:collapse;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;
}
.member-roster th, .member-roster td{
  padding:12px 14px;text-align:left;border-bottom:1px solid var(--line);font-size:.95em;
}
.member-roster th{
  background:var(--paper-2);color:var(--ink);
  font:700 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;
}
.member-roster tr:last-child td{border-bottom:0}
.member-roster tr:nth-child(even) td{background:#fdfaf5}
.member-roster a{color:var(--red);text-decoration:none;font-weight:600}
.member-roster a:hover{color:var(--red-deep);text-decoration:underline}
@media (max-width:640px){
  .member-roster, .member-roster thead, .member-roster tbody, .member-roster th, .member-roster td, .member-roster tr{display:block}
  .member-roster thead{display:none}
  .member-roster tr{border-bottom:1px solid var(--line);padding:8px 0}
  .member-roster td{border:0;padding:4px 12px}
  .member-roster td::before{content:attr(data-label) ": ";font:700 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-right:6px}
}

.empty-state-card{
  color:var(--muted);text-align:center;padding:30px 16px;
  background:var(--paper-2);border-radius:var(--radius);
}

/* ================ Legacy compat ================
   The member-area dashboard pages (members/index.php, profile.php, etc.) keep
   their existing Bootstrap-based inner UI. They use `<div id="level1">` and
   `<div class="content">` as their outer wrappers. These rules let the legacy
   markup flow inside the new sticky header / discover-strip / footer chrome
   without rewriting the dashboards themselves. */
#level1{
  max-width:var(--maxw);margin:0 auto;
  padding:32px 20px 48px;
  display:grid;grid-template-columns:1fr;gap:32px;
}
@media (min-width:980px){
  #level1{grid-template-columns:1fr 260px;gap:48px;padding:48px 20px 64px}
}
#level1 > .content{min-width:0}
#level1 > .sidebar{align-self:start}

/* utility: hide visually but keep for SR */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}