:root{
  /* Extracted palette (rectangles left → right) */
  --bg:    #26323E; /* darkest */
  --deep:  #384A49;
  --rust:  #9A5C36;
  --sage:  #5F7D77;
  --text:  #C08B56; /* lightest */
.p
  /* UI helpers (still using only palette, just repurposed) */
  --panel: rgba(0,0,0,0.10);
  --border: rgba(192,139,86,0.22);
  --soft: rgba(192,139,86,0.12);
  
    --accent: #C08B56;  /* marigold accents (same as your --text) */
  --ink:    #E6D5C2;  /* readable body text (warm cream derived from palette) */
  --muted:  rgba(230,213,194,0.70);

}

*{ box-sizing: border-box; }
html, body { height: 100%; }

.title, .panel h1, .panel h2, .card h3, a{
  color: var(--accent);
}
.sub, .hint, .muted{
  color: var(--muted);
}

.toc{
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  align-items: center;
}

.toc .jump{
  cursor: pointer;
}


body{
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:
    radial-gradient(1200px 700px at 35% -10%, rgba(154,92,54,0.25), transparent 60%),
    radial-gradient(900px 600px at 85% 0%, rgba(95,125,119,0.25), transparent 55%),
    var(--bg);
  color: var(--rust);
}

body{
  margin: 0;
  overflow: hidden;

  background:
    radial-gradient(1200px 700px at 35% -10%, rgba(154,92,54,0.25), transparent 60%),
    radial-gradient(900px 600px at 85% 0%, rgba(95,125,119,0.25), transparent 55%),
    var(--bg);


  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  /* Body text rules */
  font-variant: small-caps;
  font-size: 10pt;
  letter-spacing: 0.4px;
}

/* Make all normal text consistently 10pt */
.panel p, .panel li, .panel a, .pill, .tab, .sub{
  font-size: 10pt;
}

/* Headings / titles: ALL CAPS + bold */
.title, .panel h1, .panel h2, .card h3{
  font-variant: normal;          /* headings should not be small-caps */
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 0.9px;
}

.pill.status.open{
  border-color: rgba(95,125,119,0.75);
  background: rgba(95,125,119,0.18);
}

.pill.status.closed{
  border-color: rgba(154,92,54,0.75);
  background: rgba(154,92,54,0.18);
}

.pill.status.limited{
  border-color: rgba(192,139,86,0.75);
  background: rgba(192,139,86,0.14);
}

.wrap{
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: 24px;
}

.tabbox{
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  /* 500x500, but responsive if viewport is smaller */
  width: min(500px, calc(100vw - 24px));
  height: min(500px, calc(100vh - 24px));

  border: 1px solid var(--sage);
  border-radius: 16px;
  overflow: hidden;

  background: rgba(0,0,0,0.10);
  box-shadow: 0 20px 60px rgba(0,0,0,.35);

  display: flex;
  flex-direction: column;
}

.panels{
  flex: 1;
  min-height: 0;
  padding: 12px;
  overflow: auto;
  background: rgba(0,0,0,0.10);

  scrollbar-width: none;
  -ms-overflow-style: none;
}


.template{
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.template::-webkit-scrollbar{ width: 0; height: 0; }

/* Header / brand */
.topbar{
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(to bottom, rgba(0,0,0,0.12), rgba(0,0,0,0.02));
}

.brand{
  display: flex;
  gap: 12px;
  align-items: center;
}

.mark{
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background:
    linear-gradient(135deg, rgba(192,139,86,0.22), rgba(95,125,119,0.18)),
    rgba(0,0,0,0.08);
}

.title{
  font-weight: 800;
  letter-spacing: 1.2px;
  font-size: 0.95rem;
}

.sub{
  font-size: 0.85rem;
  opacity: 0.85;
}

.statusline{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.pill{
  border: 1px solid var(--border);
  background: rgba(0,0,0,0.12);
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 0.85rem;
  white-space: nowrap;
}

.pill.open{
  border-color: rgba(95,125,119,0.55);
  background: rgba(95,125,119,0.14);
}

/* Tabs */
.tablist{
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-bottom: 1px solid var(--border);
  background: rgba(0,0,0,0.08);
}

.tab{
  appearance: none;
  border: 0;
  background: transparent;
  color: rgba(192,139,86,0.75);
  padding: 12px 14px;
  cursor: pointer;
  font-weight: 700;
  letter-spacing: .2px;
  border-bottom: 2px solid transparent;
}

.tab:hover{
  color: var(--text);
  background: rgba(192,139,86,0.06);
}

.tab:focus{
  outline: 2px solid rgba(192,139,86,0.45);
  outline-offset: -2px;
}

.tab[aria-selected="true"]{
  color: var(--text);
  border-bottom-color: var(--text);
  background: rgba(154,92,54,0.14);
}


/* Footer */
.footer{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  background: rgba(0,0,0,0.08);
  font-size: 0.85rem;
}

.muted{ opacity: 0.75; }
.dot{ opacity: 0.5; }

.tab[aria-selected="true"]{
  border-bottom-color: var(--text);
  background: rgba(154,92,54,0.18);
}




.footer{
  display: flex;
  flex-direction: column;
  gap: 8px;

  padding: 10px 12px;
  border-top: 1px solid rgba(95,125,119,0.45);
  background: rgba(0,0,0,0.08);

  font-size: 10pt;
}

.footer-row{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.deep{
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.tag{
  white-space: nowrap;
}

/* Social buttons row */
.socials{
  justify-content: flex-start;
  gap: 8px;
}

/* Buttons are icon-only */
.social{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 34px;
  height: 34px;
  border-radius: 999px;

  border: 1px solid rgba(95,125,119,0.45);
  background: rgba(0,0,0,0.10);

  text-decoration: none;
  color: var(--ink);
}

.social:hover{
  border-color: rgba(192,139,86,0.55);
  background: rgba(192,139,86,0.08);
}

.icon{
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;

  border-radius: 999px;
  border: 1px solid rgba(192,139,86,0.35);
  color: var(--accent);
  font-weight: 900;
  line-height: 1;
  font-size: 9pt;
}

/* Tighten deep-link chips in the footer */
.footer a.mono{
  text-decoration: none;
}
.footer a.mono:hover{
  opacity: 0.9;
}



.social[aria-label]{
  position: relative;
}
.social[aria-label]:hover::after{
  content: attr(aria-label);
  position: absolute;
  bottom: 42px;
  left: 50%;
  transform: translateX(-50%);

  padding: 4px 8px;
  border-radius: 10px;
  border: 1px solid rgba(95,125,119,0.45);
  background: rgba(0,0,0,0.22);
  color: var(--ink);
  white-space: nowrap;
  font-size: 9pt;
}

.toc{
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  align-items: center;
}

.toc .jump{
  cursor: pointer;
}



/* Make sure .tabbox can anchor absolute children */
.tabbox{
  position: fixed; /* you already have this */
}

/* Hide the checkbox */
.reveal-toggle{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* ===== COVER OVERLAY (FADE, DRAMATIC, TEXT TO BLACK) ===== */

.tabbox{
  /* ensures absolute children anchor correctly */
  position: fixed; /* you already use fixed; just making sure */
}

/* hidden checkbox for mobile tap-to-reveal */
.reveal-toggle{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* timing controls */
:root{
  --coverFade: 2200ms; /* make it slower/more dramatic */
  --coverEase: cubic-bezier(.18,.9,.2,1);
}

/* cover overlay sits on top of the whole UI */
.cover{
  position: absolute;
  inset: 0;
  z-index: 50;
  border-radius: inherit;

  display: grid;
  place-items: center;
  cursor: pointer;

  /* these drive the "text fades to black" effect */
  --cover-accent: var(--accent);
  --cover-rust: var(--rust);

  /* background: keep clean, but allow a wallpaper image under a dark veil */
  background:
    linear-gradient(rgba(38,50,62,0.86), rgba(38,50,62,0.92)),
    url("cover.webp") center / cover no-repeat;

  border: 1px solid rgba(95,125,119,0.55);
  box-shadow:
    0 24px 80px rgba(0,0,0,.48),
    inset 0 1px 0 rgba(192,139,86,0.16);

  transition:
    opacity var(--coverFade) var(--coverEase),
    filter  var(--coverFade) var(--coverEase);
}

/* laminated sheen + subtle hatch so it feels like a card */
.cover::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;

  background:
    radial-gradient(900px 360px at 30% 10%, rgba(192,139,86,0.14), transparent 60%),
    linear-gradient(120deg, rgba(255,255,255,0.07), transparent 40%, rgba(255,255,255,0.04)),
    repeating-linear-gradient(135deg, rgba(255,255,255,0.02) 0 2px, transparent 2px 7px);

  mix-blend-mode: screen;
  opacity: 0.85;
}

.cover-inner{
  position: relative;
  padding: 18px 18px 16px;
  border-radius: 18px;
  max-width: 86%;
  text-align: center;

  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(192,139,86,0.22);
  backdrop-filter: blur(6px);

  transition:
    opacity var(--coverFade) var(--coverEase),
    transform var(--coverFade) var(--coverEase);
}

/* Text styles */
.cover-kicker{
  color: var(--cover-accent);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 900;
  font-size: 10pt;
  opacity: 0.95;
  transition: color var(--coverFade) var(--coverEase);
}

.cover-title{
  color: var(--cover-rust);
  text-transform: uppercase;
  letter-spacing: 1.8px;
  font-weight: 900;
  font-size: 18pt;
  margin-top: 10px;
  transition: color var(--coverFade) var(--coverEase);
}

.cover-sub{
  color: var(--cover-accent);
  margin-top: 6px;
  font-variant: normal; /* keep it crisp */
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 800;
  font-size: 11pt;
  transition: color var(--coverFade) var(--coverEase);
}

.cover-btn{
  margin: 14px auto 0;
  width: fit-content;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(95,125,119,0.55);
  background: rgba(0,0,0,0.26);

  color: var(--cover-accent);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1px;

  transition:
    color var(--coverFade) var(--coverEase),
    background var(--coverFade) var(--coverEase),
    transform var(--coverFade) var(--coverEase);
}

.cover-hint{
  margin-top: 10px;
  font-size: 9pt;
  opacity: 0.75;
  color: var(--cover-rust);
  transition: color var(--coverFade) var(--coverEase);
}

/* ===== THE EFFECT =====
   On hover/tap:
   - cover fades out slowly
   - text transitions to black as it fades
   - tiny drift/soft blur for drama
*/
.tabbox:hover .cover,
.reveal-toggle:checked + .cover{
  opacity: 0;
  filter: blur(1px) saturate(0.75);
  pointer-events: none;

  /* "text fades to black" by driving variables to black */
  --cover-accent: #000;
  --cover-rust: #000;
}

.tabbox:hover .cover .cover-inner,
.reveal-toggle:checked + .cover .cover-inner{
  opacity: 0;
  transform: translateY(10px) scale(0.99);
}

.tabbox:hover .cover .cover-btn,
.reveal-toggle:checked + .cover .cover-btn{
  transform: translateY(6px);
  background: rgba(0,0,0,0.08);
}