/* ==========================================================================
   LADS — Lebanese Association of Dental Students
   Shared stylesheet. Mobile-first.
   Palette: red #C00000, black, white, grey #E8E8E8. No other accents.
   ========================================================================== */

:root{
  --red:#C00000;
  --red-dark:#8E0000;
  --black:#111111;
  --ink:#000000;
  --grey:#E8E8E8;
  --grey-soft:#F4F4F4;
  --white:#FFFFFF;
  --gray-text:#565656;

  --wrap:1180px;
  --gut:clamp(1.25rem,5vw,3rem);
  --sec:clamp(3.5rem,9vw,7rem);

  --f:"Kufam",system-ui,-apple-system,"Segoe UI",sans-serif;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--f);
  font-weight:400;
  font-size:1rem;
  line-height:1.65;
  color:var(--black);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  text-wrap:pretty;
}
img{max-width:100%;display:block;}
h1,h2,h3,h4{margin:0;line-height:1.08;font-weight:700;letter-spacing:-0.02em;text-wrap:balance;}
p{margin:0;}
ul{margin:0;padding:0;list-style:none;}

a{color:var(--red);text-decoration:none;}
a:hover{color:var(--red-dark);text-decoration:underline;text-underline-offset:0.2em;}

:focus-visible{outline:3px solid var(--red);outline-offset:3px;}
header :focus-visible,.band-red :focus-visible,footer :focus-visible,.strip :focus-visible{outline-color:var(--white);}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--red);color:#fff;padding:0.75rem 1.25rem;font-weight:600;
}
.skip:focus{left:0;}

/* ---------- layout primitives ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut);}
.wrap-narrow{max-width:820px;}
section{padding-block:var(--sec);}
.tint{background:var(--grey-soft);}

/* ---------- type scale ---------- */
.eyebrow{
  display:flex;align-items:center;gap:0.7rem;
  font-size:0.72rem;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--red);margin-bottom:1.1rem;
}
.eyebrow::before{content:"";width:2rem;height:2px;background:var(--red);flex:none;}
.h-display{font-size:clamp(2.4rem,9vw,5.2rem);line-height:0.98;letter-spacing:-0.035em;}
.h-sec{font-size:clamp(1.85rem,5.2vw,3.1rem);}
.h-sub{font-size:clamp(1.25rem,3vw,1.6rem);}
.lead{
  font-size:clamp(1.05rem,2.2vw,1.3rem);line-height:1.55;color:var(--gray-text);
  max-width:56ch;margin-top:1.25rem;
}
.prose p{max-width:68ch;font-size:1.0625rem;line-height:1.75;}
.prose p + p{margin-top:1.25rem;}
.prose strong{font-weight:700;color:var(--black);}
.sec-head{margin-bottom:clamp(2rem,5vw,3.5rem);}
.sec-head .lead{margin-top:1rem;}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:0.6rem;
  min-height:52px;padding:0.9rem 1.7rem;
  font-family:var(--f);font-size:1rem;font-weight:700;letter-spacing:0.01em;
  background:var(--red);color:var(--white);border:2px solid var(--red);
  border-radius:2px;cursor:pointer;text-decoration:none;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.btn:hover{background:var(--red-dark);border-color:var(--red-dark);color:var(--white);text-decoration:none;}
.btn-outline{background:transparent;color:var(--black);border-color:var(--black);}
.btn-outline:hover{background:var(--black);border-color:var(--black);color:var(--white);}
.btn-ghost-light{background:transparent;color:var(--white);border-color:var(--white);}
.btn-ghost-light:hover{background:var(--white);color:var(--red);border-color:var(--white);}
.btn-row{display:flex;flex-wrap:wrap;gap:0.85rem;margin-top:2rem;}

/* ---------- header ---------- */
header{
  position:sticky;top:0;z-index:100;
  background:var(--white);border-bottom:1px solid var(--grey);
}
.nav-wrap{
  width:100%;max-width:var(--wrap);margin-inline:auto;
  padding:0.55rem var(--gut) 0.55rem 0.4rem;
  display:flex;align-items:center;gap:0.6rem;
}
.logo{margin-right:auto;}
.logo{display:block;flex:none;}
.logo img{height:74px;width:auto;}
.nav-toggle{
  order:2;width:46px;height:46px;display:grid;place-items:center;
  background:none;border:1px solid var(--grey);border-radius:2px;
  font-size:1.35rem;line-height:1;color:var(--black);cursor:pointer;
}
nav{
  order:4;display:none;position:absolute;top:100%;left:0;right:0;
  background:var(--white);border-bottom:1px solid var(--grey);
  box-shadow:0 18px 30px -22px rgba(0,0,0,.45);
}
nav.open{display:block;}
nav ul{display:flex;flex-direction:column;padding:0.5rem var(--gut) 1.25rem;}
nav a{
  display:block;padding:0.85rem 0;min-height:44px;
  font-size:1rem;font-weight:600;color:var(--black);
  border-bottom:1px solid var(--grey);
}
nav a:hover{color:var(--red);text-decoration:none;}
nav a.active:not(.btn-join){color:var(--red);}
nav .btn-join.active{color:var(--white);}
nav .btn-join{
  margin-top:1rem;border:none;background:var(--red);color:var(--white);
  text-align:center;border-radius:2px;padding:0.95rem 1.25rem;
}
nav .btn-join:hover{background:var(--red-dark);color:var(--white);}

@media (min-width:900px){
  .nav-toggle{display:none;}
  nav{display:block;position:static;border:0;box-shadow:none;background:none;}
  nav ul{flex-direction:row;align-items:center;gap:1.6rem;padding:0;}
  nav a{border:0;padding:0.4rem 0;font-size:0.94rem;position:relative;}
  nav a::after{
    content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;
    background:var(--red);transition:right .2s ease;
  }
  nav a:hover::after,nav a.active::after{right:0;}
  nav .btn-join{margin:0;padding:0.7rem 1.3rem;}
  nav .btn-join::after{display:none;}
}

/* ---------- page masthead (inner pages) ---------- */
.masthead{
  padding-block:clamp(3rem,8vw,5.5rem) clamp(2.5rem,6vw,4rem);
  border-bottom:1px solid var(--grey);
}
.masthead h1{font-size:clamp(2.3rem,7.5vw,4.4rem);line-height:1;}
.masthead .lead{margin-top:1.5rem;}

/* ---------- home hero ---------- */
.hero{
  padding-block:clamp(3.5rem,10vw,7rem);
  border-bottom:1px solid var(--grey);
  position:relative;overflow:hidden;
}
.hero h1 em{font-style:normal;color:var(--red);}
.hero .lead{max-width:52ch;}
.hero-meta{
  margin-top:clamp(2.5rem,6vw,4rem);padding-top:1.5rem;border-top:1px solid var(--grey);
  display:flex;flex-wrap:wrap;gap:0.6rem 1.6rem;
  font-size:0.78rem;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:var(--gray-text);
}

/* ---------- stats strip ---------- */
.strip{background:var(--black);color:var(--white);}
.strip .wrap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;}
.strip .item{padding:1.75rem 0.5rem 1.75rem 0;border-top:1px solid rgba(255,255,255,.16);}
.strip .item:nth-child(-n+2){border-top:0;}
.strip .item b{display:block;overflow-wrap:break-word;font-size:clamp(1.6rem,5vw,2.6rem);font-weight:700;color:var(--red);line-height:1;letter-spacing:-0.03em;}
.strip--labels .item b{font-size:clamp(1rem,2.4vw,1.35rem);overflow-wrap:normal;letter-spacing:0.02em;color:var(--white);}
.strip--labels .item b::after{content:"";display:block;width:1.75rem;height:2px;background:var(--red);margin-top:0.7rem;}
.strip .item span{display:block;margin-top:0.5rem;font-size:0.82rem;line-height:1.4;color:rgba(255,255,255,.72);}
@media (min-width:820px){
  .strip .wrap{grid-template-columns:repeat(4,minmax(0,1fr));}
  .strip .item{padding:2.5rem 1.5rem;border-top:0;border-left:1px solid rgba(255,255,255,.16);}
  .strip .item:first-child{border-left:0;padding-left:0;}
}

/* ---------- numbered rows ---------- */
.rows{border-top:1px solid var(--grey);}
.row{
  display:grid;grid-template-columns:2.75rem 1fr;gap:0.4rem 1rem;
  padding-block:1.75rem;border-bottom:1px solid var(--grey);
  transition:background .18s ease;
}
.row .num{
  font-size:0.78rem;font-weight:700;letter-spacing:0.1em;color:var(--red);
  padding-top:0.42rem;
}
.row h3{font-size:1.2rem;}
.row .row-body{grid-column:2;}
.row .row-body p{margin-top:0.6rem;color:var(--gray-text);max-width:62ch;}
.tag{
  display:inline-block;margin-top:0.9rem;padding:0.3rem 0.7rem;
  background:var(--grey);color:var(--black);
  font-size:0.72rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;
}
@media (min-width:820px){
  .row{grid-template-columns:4rem minmax(12rem,22%) 1fr;gap:2rem;padding-block:2.25rem;padding-inline:0.75rem;}
  .row .row-body{grid-column:auto;}
  .row:hover{background:var(--grey-soft);}
  .row:hover h3{color:var(--red);}
  .row h3{font-size:1.35rem;transition:color .18s ease;}
}

/* ---------- split (sticky heading + content) ---------- */
.split{display:grid;gap:2.5rem;}
@media (min-width:900px){
  .split{grid-template-columns:minmax(0,0.85fr) minmax(0,1.4fr);gap:clamp(3rem,7vw,6rem);align-items:start;}
  .split .split-head{position:sticky;top:6.5rem;}
}

/* ---------- blocks (asymmetric project grid) ---------- */
.blocks{display:grid;gap:1px;background:var(--grey);border:1px solid var(--grey);}
.block{background:var(--white);padding:clamp(1.5rem,4vw,2.25rem);}
.block h3{font-size:1.2rem;}
.block p{margin-top:0.7rem;color:var(--gray-text);}
.block .tag{margin-top:1.1rem;}
.block.feature{background:var(--black);color:var(--white);}
.block.feature h3{font-size:clamp(1.5rem,4vw,2.1rem);color:var(--white);}
.block.feature p{color:rgba(255,255,255,.78);font-size:1.05rem;}
.block.feature .tag{background:var(--red);color:var(--white);}
@media (min-width:760px){
  .blocks{grid-template-columns:repeat(2,1fr);}
  .block.feature{grid-column:span 2;}
}
@media (min-width:1040px){
  .blocks{grid-template-columns:repeat(3,1fr);}
  .block.feature{grid-column:span 2;}
  .block.wide{grid-column:span 2;}
}

/* ---------- link list (resources) ---------- */
.links{border-top:1px solid var(--grey);}
.link-item{
  display:block;padding-block:1.6rem;border-bottom:1px solid var(--grey);
  color:var(--black);text-decoration:none;
}
.link-item:hover{color:var(--black);text-decoration:none;background:var(--grey-soft);}
.link-item .link-top{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;}
.link-item h3{font-size:1.15rem;transition:color .18s ease;}
.link-item:hover h3{color:var(--red);}
.link-item p{margin-top:0.6rem;color:var(--gray-text);max-width:62ch;}
.link-item .go{
  flex:none;font-size:0.75rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--red);
}
@media (min-width:820px){
  .link-item{padding-inline:0.75rem;}
  .link-item h3{font-size:1.4rem;}
}

/* ---------- gallery mosaic ---------- */
.mosaic{display:grid;grid-template-columns:repeat(2,1fr);gap:0.5rem;}
.mosaic img{width:100%;height:100%;object-fit:cover;aspect-ratio:1/1;background:var(--grey);filter:grayscale(1);transition:filter .25s ease;}
.mosaic img:hover{filter:grayscale(0);}
@media (min-width:760px){
  .mosaic{grid-template-columns:repeat(4,1fr);gap:0.75rem;}
  .mosaic img:first-child{grid-column:span 2;grid-row:span 2;aspect-ratio:1/1;}
}

/* ---------- data table (board) ---------- */
.board{width:100%;border-collapse:collapse;font-size:0.98rem;}
.board caption{text-align:left;font-weight:700;padding-bottom:0.9rem;}
.board th{
  text-align:left;font-size:0.72rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--gray-text);padding:0 0 0.75rem;border-bottom:2px solid var(--black);
}
.board td{padding:0.95rem 1rem 0.95rem 0;border-bottom:1px solid var(--grey);vertical-align:top;}
.board tbody tr:hover{background:var(--grey-soft);}
.board td:first-child{font-weight:700;}
.board td:last-child{
  padding-right:0;white-space:nowrap;color:var(--gray-text);
  font-size:0.82rem;font-weight:700;letter-spacing:0.08em;
}
@media (max-width:640px){
  .board,.board tbody,.board tr,.board td{display:block;width:100%;}
  .board thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
  .board tr{padding:1.1rem 0;border-bottom:1px solid var(--grey);}
  .board td{border:0;padding:0;}
  .board td:first-child{font-size:0.72rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--red);}
  .board td:nth-child(2){font-size:1.1rem;font-weight:700;margin-top:0.2rem;}
  .board td:last-child{white-space:normal;margin-top:0.15rem;}
}

/* ---------- timeline (news) ---------- */
.timeline{border-left:2px solid var(--grey);padding-left:1.5rem;}
.entry{padding-bottom:2.75rem;position:relative;}
.entry::before{
  content:"";position:absolute;left:calc(-1.5rem - 6px);top:0.55rem;
  width:10px;height:10px;background:var(--red);border-radius:50%;
}
.entry:last-child{padding-bottom:0;}
.entry .date{
  display:block;font-size:0.74rem;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;color:var(--red);
}
.entry h3{margin-top:0.6rem;font-size:clamp(1.25rem,3.5vw,1.7rem);}
.entry p{margin-top:0.8rem;color:var(--gray-text);max-width:64ch;}
@media (min-width:820px){.timeline{padding-left:2.5rem;}.entry::before{left:calc(-2.5rem - 6px);}}

/* ---------- bands ---------- */
.band-red{background:var(--red);color:var(--white);}
.band-red h2{font-size:clamp(1.7rem,5vw,2.8rem);color:var(--white);}
.band-red p{margin-top:1rem;font-size:1.05rem;color:rgba(255,255,255,.9);max-width:52ch;}
.band-red .eyebrow{color:var(--white);}
.band-red .eyebrow::before{background:var(--white);}
.band-red a:not(.btn){color:var(--white);text-decoration:underline;}
.band-black{background:var(--black);color:var(--white);}
.band-black h2{color:var(--white);}
.band-black p{color:rgba(255,255,255,.75);}

/* ---------- join page ---------- */
.steps{counter-reset:s;display:grid;gap:0;border-top:1px solid var(--grey);}
.step{
  counter-increment:s;display:grid;grid-template-columns:2.5rem 1fr;gap:1rem;
  padding-block:1.6rem;border-bottom:1px solid var(--grey);
}
.step::before{
  content:counter(s);
  font-size:1.5rem;font-weight:700;color:var(--red);line-height:1;letter-spacing:-0.02em;
}
.step h4{font-size:1.1rem;}
.step p{margin-top:0.5rem;color:var(--gray-text);}
@media (min-width:820px){.step{grid-template-columns:4rem 1fr;padding-block:2rem;}.step::before{font-size:2rem;}}

.panel{border:1px solid var(--grey);background:var(--white);padding:clamp(1.4rem,4vw,2.25rem);}
.panel-red{border-top:4px solid var(--red);}
.panel h3{font-size:1.15rem;}
.pay-list{margin-top:1.25rem;display:grid;gap:0.85rem;}
.pay-list div{
  display:grid;gap:0.15rem;padding-bottom:0.85rem;border-bottom:1px solid var(--grey);
}
.pay-list div:last-child{border-bottom:0;padding-bottom:0;}
.pay-list dt,.pay-list .k{
  font-size:0.72rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--gray-text);
}
.pay-list .v{font-size:1.05rem;font-weight:700;word-break:break-word;}
.note{margin-top:1.25rem;font-size:0.88rem;color:var(--gray-text);line-height:1.6;}

.trust{display:grid;gap:0.9rem;margin-top:2rem;}
.trust li{
  display:grid;grid-template-columns:1.4rem 1fr;gap:0.75rem;
  font-size:0.95rem;color:var(--gray-text);
}
.trust li::before{content:"";width:10px;height:10px;margin-top:0.5rem;background:var(--red);}

form{margin-top:0;}
fieldset{border:0;padding:0;margin:0 0 2rem;}
legend{
  padding:0;margin-bottom:1.25rem;font-size:0.74rem;font-weight:700;
  letter-spacing:0.16em;text-transform:uppercase;color:var(--red);
}
.form-field{margin-bottom:1.35rem;}
.form-field > label{
  display:block;margin-bottom:0.45rem;font-size:0.85rem;font-weight:700;letter-spacing:0.02em;
}
.hint{display:block;font-weight:400;color:var(--gray-text);font-size:0.8rem;margin-top:0.2rem;}
input[type="text"],input[type="email"],input[type="tel"],select,input[type="file"]{
  width:100%;min-height:52px;padding:0.8rem 0.9rem;
  font-family:var(--f);font-size:1rem;color:var(--black);
  background:var(--white);border:1px solid #B9B9B9;border-radius:2px;
}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--black) 50%),linear-gradient(135deg,var(--black) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:2.75rem;}
input:hover,select:hover{border-color:var(--black);}
input:focus,select:focus{border-color:var(--red);outline:3px solid rgba(192,0,0,.22);outline-offset:0;}
input[type="file"]{padding:0.7rem;background:var(--grey-soft);}
.checks{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0.5rem;}
.checks label{
  display:flex;align-items:center;gap:0.6rem;min-height:48px;padding:0.5rem 0.8rem;
  border:1px solid var(--grey);border-radius:2px;font-size:0.92rem;cursor:pointer;
}
.checks label:hover{border-color:var(--black);}
input[type="checkbox"]{width:20px;height:20px;accent-color:var(--red);flex:none;margin:0;}
.consent{display:flex;align-items:flex-start;gap:0.7rem;font-size:0.95rem;line-height:1.5;font-weight:400;}
.consent input{margin-top:0.2rem;}
#form-msg:empty{display:none;}

@media (min-width:900px){
  .form-2{display:grid;grid-template-columns:1fr 1fr;gap:0 1.25rem;}
  .join-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(2.5rem,6vw,4.5rem);align-items:start;}
  .join-aside{position:sticky;top:6.5rem;}
}

/* ---------- footer ---------- */
footer{background:var(--black);color:rgba(255,255,255,.75);padding-block:clamp(3rem,7vw,4.5rem) 0;font-size:0.95rem;}
.foot-grid{display:grid;gap:2.25rem;}
footer h4{font-size:0.74rem;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:var(--white);margin-bottom:1rem;}
footer img{height:44px;width:auto;margin-bottom:1.1rem;filter:brightness(0) invert(1);}
footer a{color:rgba(255,255,255,.75);}
footer a:hover{color:var(--white);}
footer li{margin-bottom:0.55rem;}
.foot-bottom{
  margin-top:clamp(2.5rem,6vw,4rem);padding-block:1.5rem;border-top:1px solid rgba(255,255,255,.16);
  font-size:0.68rem;letter-spacing:0.12em;line-height:1.8;color:rgba(255,255,255,.5);
}
@media (min-width:760px){
  .foot-grid{grid-template-columns:1.4fr 1fr 1fr;gap:3rem;}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important;scroll-behavior:auto !important;}
}

/* Fix: blocks on dark bands must keep dark text on their white cards */
.band-black .block h3{color:var(--black);}
.band-black .block p{color:var(--gray-text);}
.band-black .block.feature h3{color:var(--white);}
.band-black .block.feature p{color:rgba(255,255,255,.78);}

:root{ color-scheme: light dark; }

@media (prefers-color-scheme: dark){

  /* ==========================================================================
     Dark mode
     Light mode is untouched. Dark mode only re-paints page surfaces; the
     already-dark panels (.strip, .band-black, .block.feature, footer) keep
     their white text, so nothing inverts into white-on-white.
     ========================================================================== */
  html:not([data-theme="light"]){
    color-scheme: dark;
    --page:#121212;        /* page background      */
    --panel:#1C1C1C;       /* cards, inputs        */
    --panel-2:#191919;     /* subtle tint / hover  */
    --deep:#080808;        /* the "black" bands    */
    --line:#333333;        /* borders              */
    --text:#EDEDED;        /* body text            */
    --muted:#A9A9A9;       /* secondary text       */
    --red:#FF5C5C;         /* accessible red on dark */
    --red-dark:#E24444;

    /* remap the light-mode vars so component rules using them behave */
    --grey:#333333;        /* borders, dividers    */
    --grey-soft:#191919;   /* subtle fills, hovers */
    --gray-text:#A9A9A9;   /* muted body text      */
  }

  /* --- base --- */
  html:not([data-theme="light"]) body{background:var(--page);color:var(--text);}
  html:not([data-theme="light"]) h1,
  html:not([data-theme="light"]) h2,
  html:not([data-theme="light"]) h3,
  html:not([data-theme="light"]) h4,
  html:not([data-theme="light"]) .h-sec,
  html:not([data-theme="light"]) strong,
  html:not([data-theme="light"]) b{color:var(--text);}
  html:not([data-theme="light"]) p,
  html:not([data-theme="light"]) li,
  html:not([data-theme="light"]) td,
  html:not([data-theme="light"]) dd{color:var(--text);}
  html:not([data-theme="light"]) a{color:var(--red);}
  html:not([data-theme="light"]) .tint{background:var(--panel-2);}

  /* --- header + nav --- */
  html:not([data-theme="light"]) header{background:var(--page);border-bottom-color:var(--line);}
  html:not([data-theme="light"]) nav a{color:var(--text);}
  html:not([data-theme="light"]) nav a:hover,
  html:not([data-theme="light"]) nav a.active{color:var(--red);}
  html:not([data-theme="light"]) nav .btn-join,
  html:not([data-theme="light"]) nav .btn-join.active{background:var(--red);color:#12100F;}
  html:not([data-theme="light"]) nav .btn-join:hover{background:var(--red-dark);color:#12100F;}
  html:not([data-theme="light"]) .logo img{filter:brightness(0) invert(1);}

  /* --- cards / blocks / rows --- */
  html:not([data-theme="light"]) .card,
  html:not([data-theme="light"]) .block,
  html:not([data-theme="light"]) .panel{background:var(--panel);border-color:var(--line);}
  html:not([data-theme="light"]) .blocks{background:var(--line);border-color:var(--line);}
  html:not([data-theme="light"]) .card p,
  html:not([data-theme="light"]) .block p,
  html:not([data-theme="light"]) .row .row-body p,
  html:not([data-theme="light"]) .link-item p,
  html:not([data-theme="light"]) .section-sub,
  html:not([data-theme="light"]) .lead{color:var(--muted);}
  html:not([data-theme="light"]) .row{border-color:var(--line);}
  html:not([data-theme="light"]) .row:hover,
  html:not([data-theme="light"]) .link-item:hover,
  html:not([data-theme="light"]) .board tbody tr:hover{background:var(--panel-2);}
  html:not([data-theme="light"]) .link-item{border-color:var(--line);}
  html:not([data-theme="light"]) .link-item:hover{color:var(--text);}
  html:not([data-theme="light"]) .links{border-color:var(--line);}
  html:not([data-theme="light"]) .tag,
  html:not([data-theme="light"]) .head-tag{background:var(--panel-2);color:var(--text);}

  /* --- tables --- */
  html:not([data-theme="light"]) .board th{background:var(--deep);color:var(--text);border-color:var(--line);}
  html:not([data-theme="light"]) .board td{border-bottom-color:var(--line);}

  /* --- dark bands stay dark: only deepen them so they separate from the page --- */
  html:not([data-theme="light"]) .strip,
  html:not([data-theme="light"]) .band-black,
  html:not([data-theme="light"]) .block.feature,
  html:not([data-theme="light"]) footer{background:var(--deep);}
  html:not([data-theme="light"]) .band-black .block{background:var(--panel);}
  html:not([data-theme="light"]) .band-black .block h3{color:var(--text);}
  html:not([data-theme="light"]) .band-black .block p{color:var(--muted);}
  html:not([data-theme="light"]) .band-black .block.feature{background:var(--deep);}
  html:not([data-theme="light"]) .band-black .block.feature h3{color:#fff;}
  html:not([data-theme="light"]) .band-black .block.feature p{color:rgba(255,255,255,.8);}

  /* --- red band: darken so white text keeps contrast --- */
  html:not([data-theme="light"]) .band-red{background:#9E1414;}
  html:not([data-theme="light"]) .band-red h2,
  html:not([data-theme="light"]) .band-red p,
  html:not([data-theme="light"]) .band-red a:not(.btn),
  html:not([data-theme="light"]) .band-red .eyebrow{color:#fff;}
  html:not([data-theme="light"]) .panel-red{background:#9E1414;color:#fff;}
  html:not([data-theme="light"]) .panel-red h3,
  html:not([data-theme="light"]) .panel-red p,
  html:not([data-theme="light"]) .panel-red .k,
  html:not([data-theme="light"]) .panel-red .v,
  html:not([data-theme="light"]) .panel-red .hint{color:#fff;}

  /* --- buttons --- */
  html:not([data-theme="light"]) .btn{background:var(--red);border-color:var(--red);color:#12100F;}
  html:not([data-theme="light"]) .btn:hover{background:var(--red-dark);border-color:var(--red-dark);color:#12100F;}
  html:not([data-theme="light"]) .btn-outline{color:var(--text);border-color:var(--text);background:transparent;}
  html:not([data-theme="light"]) .btn-outline:hover{background:var(--text);border-color:var(--text);color:var(--page);}

  /* --- forms --- */
  html:not([data-theme="light"]) label{color:var(--text);}
  html:not([data-theme="light"]) input,
  html:not([data-theme="light"]) select,
  html:not([data-theme="light"]) textarea{
    background:var(--panel);border-color:var(--line);color:var(--text);
  }
  html:not([data-theme="light"]) input[type="file"]{background:var(--panel-2);}
  html:not([data-theme="light"]) input::placeholder{color:#8E8E8E;}
  html:not([data-theme="light"]) input:focus,
  html:not([data-theme="light"]) select:focus{border-color:var(--red);outline-color:rgba(255,92,92,.3);}
  html:not([data-theme="light"]) fieldset{border-color:var(--line);}
  html:not([data-theme="light"]) legend{color:var(--text);}

  /* --- images --- */
  html:not([data-theme="light"]) .mosaic img{background:var(--panel);filter:grayscale(1) brightness(.75);}
  html:not([data-theme="light"]) .mosaic img:hover{filter:grayscale(0) brightness(.9);}



  /* --- dark mode: mobile nav panel + hamburger (were inheriting light values) --- */
  html:not([data-theme="light"]) nav{
    background:var(--panel);
    border-bottom-color:var(--line);
    box-shadow:0 18px 30px -22px rgba(0,0,0,.8);
  }
  html:not([data-theme="light"]) nav a{border-bottom-color:var(--line);}
  html:not([data-theme="light"]) .nav-toggle{
    color:var(--text);
    border-color:var(--line);
  }
  html:not([data-theme="light"]) .nav-toggle:hover{border-color:var(--red);color:var(--red);}
  @media (min-width:900px){
    html:not([data-theme="light"]) nav{background:none;box-shadow:none;border:0;}
  }

  /* ---------- join page notice ---------- */
  .notice-wrap{padding-top:clamp(1.5rem,4vw,2.5rem);}
  .notice{
    border:1px solid var(--red);border-left:6px solid var(--red);
    background:var(--grey-soft);padding:clamp(1.15rem,3vw,1.6rem);border-radius:2px;
  }
  .notice h3{font-size:1.15rem;color:var(--red);}
  .notice p{margin-top:0.6rem;font-size:0.97rem;line-height:1.65;}
  .notice a{color:var(--red);font-weight:600;}
  html:not([data-theme="light"]) .notice{background:var(--panel);border-color:var(--red);}
  html:not([data-theme="light"]) .notice h3,
  html:not([data-theme="light"]) .notice a{color:var(--red);}
  html:not([data-theme="light"]) .notice p{color:var(--text);}

  /* --- rules that use --black as text/border on a light surface --- */
  html:not([data-theme="light"]) .prose strong{color:var(--text);}
  html:not([data-theme="light"]) .link-item{color:var(--text);}
  html:not([data-theme="light"]) .board th{border-bottom-color:var(--line);}
  html:not([data-theme="light"]) input:hover,
  html:not([data-theme="light"]) select:hover,
  html:not([data-theme="light"]) .checks label:hover{border-color:var(--red);}
  html:not([data-theme="light"]) .checks label{border-color:var(--line);}
}

/* manual override: user chose dark */

/* ==========================================================================
   Dark mode
   Light mode is untouched. Dark mode only re-paints page surfaces; the
   already-dark panels (.strip, .band-black, .block.feature, footer) keep
   their white text, so nothing inverts into white-on-white.
   ========================================================================== */
html[data-theme="dark"]{
  color-scheme: dark;
  --page:#121212;        /* page background      */
  --panel:#1C1C1C;       /* cards, inputs        */
  --panel-2:#191919;     /* subtle tint / hover  */
  --deep:#080808;        /* the "black" bands    */
  --line:#333333;        /* borders              */
  --text:#EDEDED;        /* body text            */
  --muted:#A9A9A9;       /* secondary text       */
  --red:#FF5C5C;         /* accessible red on dark */
  --red-dark:#E24444;

  /* remap the light-mode vars so component rules using them behave */
  --grey:#333333;        /* borders, dividers    */
  --grey-soft:#191919;   /* subtle fills, hovers */
  --gray-text:#A9A9A9;   /* muted body text      */
}

/* --- base --- */
html[data-theme="dark"] body{background:var(--page);color:var(--text);}
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] .h-sec,
html[data-theme="dark"] strong,
html[data-theme="dark"] b{color:var(--text);}
html[data-theme="dark"] p,
html[data-theme="dark"] li,
html[data-theme="dark"] td,
html[data-theme="dark"] dd{color:var(--text);}
html[data-theme="dark"] a{color:var(--red);}
html[data-theme="dark"] .tint{background:var(--panel-2);}

/* --- header + nav --- */
html[data-theme="dark"] header{background:var(--page);border-bottom-color:var(--line);}
html[data-theme="dark"] nav a{color:var(--text);}
html[data-theme="dark"] nav a:hover,
html[data-theme="dark"] nav a.active{color:var(--red);}
html[data-theme="dark"] nav .btn-join,
html[data-theme="dark"] nav .btn-join.active{background:var(--red);color:#12100F;}
html[data-theme="dark"] nav .btn-join:hover{background:var(--red-dark);color:#12100F;}
html[data-theme="dark"] .logo img{filter:brightness(0) invert(1);}

/* --- cards / blocks / rows --- */
html[data-theme="dark"] .card,
html[data-theme="dark"] .block,
html[data-theme="dark"] .panel{background:var(--panel);border-color:var(--line);}
html[data-theme="dark"] .blocks{background:var(--line);border-color:var(--line);}
html[data-theme="dark"] .card p,
html[data-theme="dark"] .block p,
html[data-theme="dark"] .row .row-body p,
html[data-theme="dark"] .link-item p,
html[data-theme="dark"] .section-sub,
html[data-theme="dark"] .lead{color:var(--muted);}
html[data-theme="dark"] .row{border-color:var(--line);}
html[data-theme="dark"] .row:hover,
html[data-theme="dark"] .link-item:hover,
html[data-theme="dark"] .board tbody tr:hover{background:var(--panel-2);}
html[data-theme="dark"] .link-item{border-color:var(--line);}
html[data-theme="dark"] .link-item:hover{color:var(--text);}
html[data-theme="dark"] .links{border-color:var(--line);}
html[data-theme="dark"] .tag,
html[data-theme="dark"] .head-tag{background:var(--panel-2);color:var(--text);}

/* --- tables --- */
html[data-theme="dark"] .board th{background:var(--deep);color:var(--text);border-color:var(--line);}
html[data-theme="dark"] .board td{border-bottom-color:var(--line);}

/* --- dark bands stay dark: only deepen them so they separate from the page --- */
html[data-theme="dark"] .strip,
html[data-theme="dark"] .band-black,
html[data-theme="dark"] .block.feature,
html[data-theme="dark"] footer{background:var(--deep);}
html[data-theme="dark"] .band-black .block{background:var(--panel);}
html[data-theme="dark"] .band-black .block h3{color:var(--text);}
html[data-theme="dark"] .band-black .block p{color:var(--muted);}
html[data-theme="dark"] .band-black .block.feature{background:var(--deep);}
html[data-theme="dark"] .band-black .block.feature h3{color:#fff;}
html[data-theme="dark"] .band-black .block.feature p{color:rgba(255,255,255,.8);}

/* --- red band: darken so white text keeps contrast --- */
html[data-theme="dark"] .band-red{background:#9E1414;}
html[data-theme="dark"] .band-red h2,
html[data-theme="dark"] .band-red p,
html[data-theme="dark"] .band-red a:not(.btn),
html[data-theme="dark"] .band-red .eyebrow{color:#fff;}
html[data-theme="dark"] .panel-red{background:#9E1414;color:#fff;}
html[data-theme="dark"] .panel-red h3,
html[data-theme="dark"] .panel-red p,
html[data-theme="dark"] .panel-red .k,
html[data-theme="dark"] .panel-red .v,
html[data-theme="dark"] .panel-red .hint{color:#fff;}

/* --- buttons --- */
html[data-theme="dark"] .btn{background:var(--red);border-color:var(--red);color:#12100F;}
html[data-theme="dark"] .btn:hover{background:var(--red-dark);border-color:var(--red-dark);color:#12100F;}
html[data-theme="dark"] .btn-outline{color:var(--text);border-color:var(--text);background:transparent;}
html[data-theme="dark"] .btn-outline:hover{background:var(--text);border-color:var(--text);color:var(--page);}

/* --- forms --- */
html[data-theme="dark"] label{color:var(--text);}
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea{
  background:var(--panel);border-color:var(--line);color:var(--text);
}
html[data-theme="dark"] input[type="file"]{background:var(--panel-2);}
html[data-theme="dark"] input::placeholder{color:#8E8E8E;}
html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus{border-color:var(--red);outline-color:rgba(255,92,92,.3);}
html[data-theme="dark"] fieldset{border-color:var(--line);}
html[data-theme="dark"] legend{color:var(--text);}

/* --- images --- */
html[data-theme="dark"] .mosaic img{background:var(--panel);filter:grayscale(1) brightness(.75);}
html[data-theme="dark"] .mosaic img:hover{filter:grayscale(0) brightness(.9);}



/* --- dark mode: mobile nav panel + hamburger (were inheriting light values) --- */
html[data-theme="dark"] nav{
  background:var(--panel);
  border-bottom-color:var(--line);
  box-shadow:0 18px 30px -22px rgba(0,0,0,.8);
}
html[data-theme="dark"] nav a{border-bottom-color:var(--line);}
html[data-theme="dark"] .nav-toggle{
  color:var(--text);
  border-color:var(--line);
}
html[data-theme="dark"] .nav-toggle:hover{border-color:var(--red);color:var(--red);}
@media (min-width:900px){
  html[data-theme="dark"] nav{background:none;box-shadow:none;border:0;}
}

/* ---------- join page notice ---------- */
.notice-wrap{padding-top:clamp(1.5rem,4vw,2.5rem);}
.notice{
  border:1px solid var(--red);border-left:6px solid var(--red);
  background:var(--grey-soft);padding:clamp(1.15rem,3vw,1.6rem);border-radius:2px;
}
.notice h3{font-size:1.15rem;color:var(--red);}
.notice p{margin-top:0.6rem;font-size:0.97rem;line-height:1.65;}
.notice a{color:var(--red);font-weight:600;}
html[data-theme="dark"] .notice{background:var(--panel);border-color:var(--red);}
html[data-theme="dark"] .notice h3,
html[data-theme="dark"] .notice a{color:var(--red);}
html[data-theme="dark"] .notice p{color:var(--text);}

/* --- rules that use --black as text/border on a light surface --- */
html[data-theme="dark"] .prose strong{color:var(--text);}
html[data-theme="dark"] .link-item{color:var(--text);}
html[data-theme="dark"] .board th{border-bottom-color:var(--line);}
html[data-theme="dark"] input:hover,
html[data-theme="dark"] select:hover,
html[data-theme="dark"] .checks label:hover{border-color:var(--red);}
html[data-theme="dark"] .checks label{border-color:var(--line);}


/* ---------- theme toggle (borderless, right of Join) ---------- */
.theme-toggle{
  order:5;
  background:none;border:0;padding:0.4rem;margin-left:0.35rem;
  cursor:pointer;color:inherit;line-height:0;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:999px;flex:0 0 auto;
  -webkit-tap-highlight-color:transparent;
}
.theme-toggle svg{width:22px;height:22px;display:block;fill:none;
  stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.theme-toggle:hover{color:var(--red);}
.theme-toggle:focus-visible{outline:2px solid var(--red);outline-offset:3px;}
.theme-toggle .sun{display:none;}
@media (min-width:900px){ .theme-toggle{margin-left:0.9rem;} }