/* ============================================================
   100 WORDS AND RUNNING skin — the 2010 mixtape era. Homemade
   Cleveland hunger-era energy: sky-blue page with faint ruled
   notebook lines, lettering-red comic accents, white notebook-
   paper cards with a red margin line, chunky red buttons with
   thick black outlines, handwritten Permanent Marker accents.
   Loaded after styles.css; everything scoped under body.words100.
   ADMIN-ONLY until Jordan releases it.
   ============================================================ */

/* ---- base: sky blue page, faint notebook ruling, dark ink ---- */
body.words100 {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background:
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(255, 255, 255, .20) 31px 32px),
    linear-gradient(#4AA3DF 0%, #7fc2ec 45%, #BFE3F5 100%);
  background-attachment: fixed;
  background-color: #8fc8ef;
  color: #24211c;
  --accent: #E63946;        /* lettering red — comic block letters */
  --accent-deep: #B91F2C;   /* darker red */
  --accent2: #4AA3DF;       /* sky blue */
  --sky: #4AA3DF;
  --horizon: #BFE3F5;
  --grass: #7EC850;         /* rolling-hill green */
  --sun: #F2C14E;           /* kid's yellow-blonde hair */
  --dirt: #D9A05B;          /* dirt-path tan */
  --paper: #FDFDF5;         /* notebook white */
  --ink: #24211c;           /* ink on paper */
  --ink-muted: #6b6459;
  --ruled: rgba(74, 163, 223, .35);
  --radius: 10px;
  --shadow: 0 6px 18px rgba(20, 40, 70, .25);
  --font-display: 'Oswald', sans-serif;
  --font-hand: 'Permanent Marker', cursive;
}
body.words100 input, body.words100 select,
body.words100 textarea, body.words100 button {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
body.words100 .muted { color: #6b6459; }

/* flying paper sheets — fixed decorations drifting at the edges */
body.words100::before, body.words100::after {
  content: "";
  position: fixed;
  width: 120px; height: 152px;
  background:
    linear-gradient(90deg, transparent 0 20px, rgba(230, 57, 70, .7) 20px 22px, transparent 22px),
    repeating-linear-gradient(0deg, transparent 0 17px, rgba(74, 163, 223, .4) 17px 18px),
    #FDFDF5;
  border: 2px solid #1a1a1a;
  box-shadow: 5px 5px 0 rgba(20, 40, 70, .25);
  opacity: .45;
  pointer-events: none;
  z-index: 0;
}
body.words100::before { top: 12%; right: 3%; transform: rotate(11deg); }
body.words100::after { bottom: 10%; left: 2.5%; transform: rotate(-9deg); }

/* ---- sky scrollbars ---- */
body.words100::-webkit-scrollbar { width: 14px; height: 14px; }
body.words100::-webkit-scrollbar-track { background: #BFE3F5; }
body.words100::-webkit-scrollbar-thumb { background: #E63946; border: 2px solid #1a1a1a; border-radius: 7px; }

/* ============================================================
   BUTTONS — chunky comic red, thick black outline, white text
   ============================================================ */
body.words100 .btn {
  background: #E63946;
  color: #ffffff;
  border: 3px solid #1a1a1a;
  border-radius: 10px;
  box-shadow: 3px 3px 0 #1a1a1a;
  text-shadow: 1px 1px 0 #1a1a1a;
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 12px 18px;
  min-height: 44px;
}
body.words100 .btn:hover { background: #f04b57; transform: translate(-1px, -1px); box-shadow: 5px 5px 0 #1a1a1a; }
body.words100 .btn:active { background: #B91F2C; transform: translate(2px, 2px); box-shadow: 1px 1px 0 #1a1a1a; }
body.words100 .btn.primary { background: #E63946; color: #ffffff; }
body.words100 .btn.ghost { background: transparent; color: #B91F2C; border: 3px solid #B91F2C; box-shadow: 3px 3px 0 rgba(185, 31, 44, .35); text-shadow: none; }
body.words100 .btn.ghost:hover { background: rgba(230, 57, 70, .12); transform: translate(-1px, -1px); }
body.words100 .btn.danger { background: #1a1a1a; border-color: #1a1a1a; color: #ffffff; text-shadow: none; }
body.words100 .btn:disabled { background: #b9c6d2; color: #f4f7fa; border-color: #7d8fa0; box-shadow: none; text-shadow: none; transform: none; }
body.words100 .btn.tiny { font-size: 11px; padding: 5px 10px; min-height: 0; border-width: 2px; }

/* icon-ish buttons — mini paper notes */
body.words100 .icon-btn, body.words100 .sheet-x, body.words100 .wl-popup-x, body.words100 .modal-x {
  background: #FDFDF5;
  color: #1a1a1a;
  border: 2px solid #1a1a1a;
  border-radius: 8px;
  box-shadow: 2px 2px 0 #1a1a1a;
  min-width: 30px;
  min-height: 28px;
}
body.words100 .icon-btn:hover, body.words100 .sheet-x:hover { background: #E63946; color: #ffffff; border-color: #1a1a1a; }

/* header 40px control boxes (bell/search/guide/theme): color only,
   sizing and spacing left exactly as the base stylesheet sets them */
body.words100 .topbar-actions .icon-btn {
  background: #FDFDF5;
  color: #1a1a1a;
  border: 2px solid #1a1a1a;
  box-shadow: 2px 2px 0 rgba(26, 26, 26, .85);
}
body.words100 .topbar-actions .icon-btn:hover { background: #E63946; color: #ffffff; }

/* ============================================================
   POPUPS — notebook paper sheets with punched-hole strip
   ============================================================ */
body.words100 .modal { backdrop-filter: none; background: rgba(30, 70, 110, .55); }
body.words100 .modal-card,
body.words100 .wl-popup-card {
  position: relative;
  background:
    radial-gradient(circle 7px at 18px 30px, #7fc2ec 98%, transparent 100%),
    radial-gradient(circle 7px at 18px 90px, #7fc2ec 98%, transparent 100%),
    radial-gradient(circle 7px at 18px 150px, #7fc2ec 98%, transparent 100%),
    linear-gradient(90deg, transparent 0 34px, rgba(230, 57, 70, .75) 34px 36px, transparent 36px),
    repeating-linear-gradient(0deg, transparent 0 27px, rgba(74, 163, 223, .30) 27px 28px),
    #FDFDF5;
  color: #24211c;
  border: 3px solid #1a1a1a;
  border-radius: 10px;
  box-shadow: 6px 6px 0 rgba(26, 26, 26, .8);
  text-align: left;
  animation: none;
}
body.words100 .modal-card h2, body.words100 .modal-card h3,
body.words100 .wl-popup-card h2, body.words100 .wl-popup-card h3 {
  font-family: 'Permanent Marker', cursive;
  color: #B91F2C;
  letter-spacing: .02em;
}
body.words100 .modal-card .muted, body.words100 .wl-popup-card .muted { color: #6b6459; }

/* ============================================================
   FORM FIELDS — lined paper inputs
   ============================================================ */
body.words100 input[type="text"], body.words100 input[type="search"],
body.words100 input[type="email"], body.words100 input[type="password"],
body.words100 input[type="number"], body.words100 input[type="date"],
body.words100 select, body.words100 textarea {
  background:
    repeating-linear-gradient(0deg, transparent 0 23px, rgba(74, 163, 223, .30) 23px 24px),
    #ffffff;
  color: #24211c;
  border: 2px solid #1a1a1a;
  border-radius: 8px;
  box-shadow: inset 2px 2px 0 rgba(20, 40, 70, .12);
}
body.words100 input::placeholder, body.words100 textarea::placeholder { color: #9a938a; }

/* ============================================================
   NAV TABS — paper tabs; active tab is a flying red sheet
   ============================================================ */
body.words100 .tab {
  color: #3d4b5c;
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  letter-spacing: .06em;
}
body.words100 .tab:hover { color: #B91F2C; }
body.words100 .tab.active {
  position: relative;
  overflow: hidden;
  background: #E63946;
  color: #ffffff;
  border: 3px solid #1a1a1a;
  border-radius: 10px;
  box-shadow: 3px 3px 0 #1a1a1a;
  text-shadow: 1px 1px 0 #1a1a1a;
}
body.words100 .tab.active::after {
  content: "";
  position: absolute;
  top: -25%; bottom: -25%;
  left: -50px; width: 34px;
  background:
    repeating-linear-gradient(0deg, transparent 0 9px, rgba(74, 163, 223, .5) 9px 10px),
    #FDFDF5;
  border: 1px solid #1a1a1a;
  transform: rotate(10deg);
  opacity: .85;
  animation: words100-paperfly .55s ease-out;
  pointer-events: none;
}
@keyframes words100-paperfly {
  from { left: -50px; }
  to { left: 110%; }
}

/* ============================================================
   CARDS & PANELS — notebook paper, red margin line, slight tilt
   ============================================================ */
body.words100 .card, body.words100 .panel, body.words100 .sheet,
body.words100 .show-card, body.words100 .thread-card {
  background:
    linear-gradient(90deg, transparent 0 40px, rgba(230, 57, 70, .75) 40px 42px, transparent 42px),
    repeating-linear-gradient(0deg, transparent 0 27px, rgba(74, 163, 223, .32) 27px 28px),
    #FDFDF5;
  color: #24211c;
  border: 2px solid #1a1a1a;
  border-radius: 10px;
  box-shadow: 4px 4px 0 rgba(20, 40, 70, .28);
}
body.words100 .card:nth-of-type(2n), body.words100 .panel:nth-of-type(2n),
body.words100 .show-card:nth-of-type(2n), body.words100 .thread-card:nth-of-type(2n) {
  transform: rotate(-.5deg);
}
body.words100 .card:nth-of-type(2n+1), body.words100 .panel:nth-of-type(2n+1),
body.words100 .show-card:nth-of-type(2n+1), body.words100 .thread-card:nth-of-type(2n+1) {
  transform: rotate(.35deg);
}
body.words100 .card .muted, body.words100 .panel .muted,
body.words100 .show-card .muted { color: #6b6459; }

/* ============================================================
   HEADER — notebook-paper topbar, comic red wordmark,
   flying-paper mark beside the brand
   ============================================================ */
body.words100 .brand-name, body.words100 .site-title {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  color: #E63946;
  text-shadow:
    -2px -2px 0 #1a1a1a, 2px -2px 0 #1a1a1a,
    -2px 2px 0 #1a1a1a, 2px 2px 0 #1a1a1a,
    4px 4px 0 rgba(26, 26, 26, .55);
  letter-spacing: .06em;
}
body.words100 .brand-name { display: inline-block; transform: rotate(-1deg); }
body.words100 .brand-name::before {
  content: "";
  display: inline-block;
  width: 22px; height: 28px;
  margin-right: 9px;
  vertical-align: -4px;
  background:
    linear-gradient(90deg, transparent 0 8px, rgba(230, 57, 70, .8) 8px 10px, transparent 10px),
    repeating-linear-gradient(0deg, transparent 0 7px, rgba(74, 163, 223, .55) 7px 8px),
    #FDFDF5;
  border: 2px solid #1a1a1a;
  transform: rotate(-8deg);
  box-shadow: 2px 2px 0 #1a1a1a;
}
body.words100 header, body.words100 .topbar {
  background:
    repeating-linear-gradient(0deg, transparent 0 23px, rgba(74, 163, 223, .22) 23px 24px),
    #FDFDF5;
  border-bottom: 3px solid #1a1a1a;
}
body.words100 .user-chip, body.words100 .header-user {
  background: #FDFDF5;
  color: #24211c;
  border: 2px solid #1a1a1a;
  border-radius: 10px;
  box-shadow: 2px 2px 0 #1a1a1a;
}

/* ============ 100 WORDS HOMEPAGE ============ */
body.words100 .home-wrap { max-width: 860px; margin: 0 auto; padding: 18px 14px 40px; display: flex; flex-direction: column; gap: 18px; position: relative; z-index: 1; }

/* hand-drawn window chrome: paper sheet, red pencil titlebar */
body.words100 .mac-window {
  background: #FDFDF5;
  border: 3px solid #1a1a1a;
  border-radius: 12px;
  box-shadow: 6px 6px 0 rgba(20, 40, 70, .30);
  overflow: hidden;
}
body.words100 .mac-titlebar {
  display: flex; align-items: center; gap: 8px;
  background: linear-gradient(#f04b57, #E63946);
  border-bottom: 3px solid #1a1a1a;
  padding: 7px 12px;
  font-family: 'Oswald', sans-serif;
  font-weight: 700; font-size: 12px; line-height: 1.2;
  color: #ffffff;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-shadow: 1px 1px 0 #1a1a1a;
}
body.words100 .mac-titlebar::before { content: "\270E"; color: #F2C14E; text-shadow: 1px 1px 0 #1a1a1a; }
body.words100 .mac-lights { display: none; }
body.words100 .mac-filename { flex: 1; text-align: left; }

/* Masthead — sky burst, grass hill, flying paper sheets */
body.words100 .home-masthead-body {
  position: relative;
  overflow: hidden;
  padding: 30px 18px 44px; text-align: center;
  background:
    radial-gradient(130% 90% at 50% 125%, #7EC850 0 46%, transparent 47%),
    repeating-conic-gradient(from -90deg at 50% 118%, rgba(242, 193, 78, .30) 0 7deg, transparent 7deg 15deg),
    linear-gradient(#4AA3DF 0%, #8fc8ef 60%, #BFE3F5 100%);
}
body.words100 .home-masthead-body::before, body.words100 .home-masthead-body::after {
  content: "";
  position: absolute;
  width: 84px; height: 106px;
  background:
    linear-gradient(90deg, transparent 0 15px, rgba(230, 57, 70, .75) 15px 17px, transparent 17px),
    repeating-linear-gradient(0deg, transparent 0 12px, rgba(74, 163, 223, .45) 12px 13px),
    #FDFDF5;
  border: 2px solid #1a1a1a;
  box-shadow: 4px 4px 0 rgba(26, 26, 26, .5);
}
body.words100 .home-masthead-body::before { top: 14px; left: 5%; transform: rotate(-12deg); }
body.words100 .home-masthead-body::after { top: 26px; right: 6%; transform: rotate(9deg); }
body.words100 .home-kicker {
  position: relative; z-index: 1;
  display: inline-block; margin: 0 0 14px; padding: 6px 18px;
  background: #FDFDF5; color: #B91F2C;
  font-family: 'Permanent Marker', cursive; font-size: 15px; letter-spacing: .04em;
  transform: rotate(-2deg);
  border: 2px solid #1a1a1a; border-radius: 4px;
  box-shadow: 3px 3px 0 #1a1a1a;
}
body.words100 .home-logo {
  position: relative; z-index: 1;
  margin: 0; font-family: 'Oswald', sans-serif;
  font-size: clamp(34px, 8vw, 68px); font-weight: 700;
  letter-spacing: .04em; color: #E63946;
  text-shadow:
    -2px -2px 0 #1a1a1a, 2px -2px 0 #1a1a1a,
    -2px 2px 0 #1a1a1a, 2px 2px 0 #1a1a1a,
    5px 5px 0 rgba(26, 26, 26, .5);
  line-height: 1.05;
  transform: rotate(-1deg);
}
body.words100 .home-logo span {
  display: block;
  font-family: 'Permanent Marker', cursive;
  font-size: .48em; letter-spacing: .02em;
  color: #24211c;
  text-shadow: none;
  transform: rotate(1deg);
  margin-top: 6px;
}
body.words100 .home-tagline { position: relative; z-index: 1; margin: 16px 0 0; color: #2c3e50; font-size: 15px; font-style: italic; }

/* home tiles — paper cards on sky */
body.words100 .tile {
  background:
    linear-gradient(90deg, transparent 0 40px, rgba(230, 57, 70, .75) 40px 42px, transparent 42px),
    repeating-linear-gradient(0deg, transparent 0 27px, rgba(74, 163, 223, .32) 27px 28px),
    #FDFDF5;
  color: #24211c;
  border: 2px solid #1a1a1a; border-radius: 10px;
  box-shadow: 4px 4px 0 rgba(20, 40, 70, .28);
}
body.words100 .tile:hover { border-color: #E63946; transform: translate(-1px, -1px) rotate(-.5deg); box-shadow: 5px 5px 0 rgba(230, 57, 70, .5); }
body.words100 .tile .tile-label { color: #B91F2C; font-family: 'Oswald', sans-serif; font-weight: 700; letter-spacing: .08em; }
body.words100 .tile .tile-sub { color: #6b6459; }

/* readme window body */
body.words100 .home-readme-body { padding: 16px 18px 18px; font-size: 14px; color: #24211c; }
body.words100 .home-readme-body p { margin: 0 0 10px; }
body.words100 .home-readme-body p:last-child { margin-bottom: 0; }

/* ticker — red comic marquee */
body.words100 .home-ticker {
  background: #E63946;
  border: 3px solid #1a1a1a; border-radius: 10px;
  box-shadow: 4px 4px 0 #1a1a1a;
  color: #ffffff; overflow: hidden; white-space: nowrap; padding: 8px 0;
  font-family: 'Oswald', sans-serif; font-weight: 700; letter-spacing: .1em; font-size: 13px;
  text-shadow: 1px 1px 0 #1a1a1a;
  text-transform: uppercase;
}

/* ============================================================
   CHAT — paper bubbles; own messages are red comic bursts
   ============================================================ */
body.words100 .chat-bubble, body.words100 .msg {
  background: #FDFDF5; color: #24211c;
  border: 2px solid #1a1a1a; border-radius: 12px;
  box-shadow: 2px 2px 0 rgba(20, 40, 70, .25);
}
body.words100 .chat-bubble.own, body.words100 .msg.own {
  background: #E63946; color: #ffffff; border-color: #1a1a1a;
  text-shadow: 1px 1px 0 rgba(26, 26, 26, .6);
}
body.words100 .chat-launcher {
  background: #E63946; color: #ffffff;
  border: 3px solid #1a1a1a;
  box-shadow: 4px 4px 0 #1a1a1a;
  text-shadow: 1px 1px 0 #1a1a1a;
}

/* ============================================================
   NOTIFICATIONS — paper ledger, red unread mark
   ============================================================ */
body.words100 .notif-list, body.words100 .notif-item {
  background: #FDFDF5; color: #24211c;
  border-color: #1a1a1a;
}
body.words100 .notif-item.unread { border-left: 5px solid #E63946; }
body.words100 .notif-item:hover { background: #f6f3e6; }

/* ============================================================
   FOOTER — horizon blue, handwritten EST stamp
   ============================================================ */
body.words100 .site-footer, body.words100 footer {
  border-top: 3px solid #1a1a1a;
  background: linear-gradient(#7fc2ec, #4AA3DF);
  color: #1f3a52;
}
body.words100 .est-stamp, body.words100 .footer-est {
  font-family: 'Permanent Marker', cursive;
  color: #B91F2C;
  border: 2px dashed #B91F2C;
  border-radius: 6px;
  letter-spacing: .1em;
  transform: rotate(-3deg);
  background: rgba(253, 253, 245, .7);
  padding: 2px 10px;
}
body.words100 .foot-donate a, body.words100 .donate-link { color: #B91F2C; font-weight: 700; }

/* ============================================================
   DE-PINK — hard-coded pink glows in the base stylesheet
   become lettering red / sky blue.
   ============================================================ */
body.words100 .attend-btn.on { box-shadow: 0 4px 14px rgba(230, 57, 70, .45); }
body.words100 .alert-btn.on { background: rgba(230, 57, 70, .14); }
body.words100 .chip.active { box-shadow: 0 4px 16px rgba(230, 57, 70, .45); border-color: #E63946; }
body.words100 .stat-card.hero { background: linear-gradient(135deg, rgba(230, 57, 70, .18), #FDFDF5 65%); }
body.words100 .badge-pick.sel { box-shadow: 0 0 0 2px #1a1a1a, 0 0 14px rgba(230, 57, 70, .45); }
body.words100 .dm-row.unread { box-shadow: 0 0 12px rgba(230, 57, 70, .25); }
body.words100 .filters input[type="search"]:focus,
body.words100 .search-wrap input:focus,
body.words100 .auth-card input:focus,
body.words100 .form-grid input:focus,
body.words100 .form-grid textarea:focus { box-shadow: 0 0 0 3px rgba(74, 163, 223, .35); border-color: #E63946; }

/* ============================================================
   My Shows tiles + hero + install banner — notebook cards,
   red icon chips, red progress, matching the 100 Words theme.
   ============================================================ */
body.words100 .my-subnav-card {
  background:
    linear-gradient(90deg, transparent 0 40px, rgba(230, 57, 70, .75) 40px 42px, transparent 42px),
    repeating-linear-gradient(0deg, transparent 0 27px, rgba(74, 163, 223, .32) 27px 28px),
    #FDFDF5;
  color: #24211c;
  border: 2px solid #1a1a1a;
  border-radius: 10px;
  box-shadow: 4px 4px 0 rgba(20, 40, 70, .28);
}
body.words100 .my-subnav-card::before {
  background: radial-gradient(120% 90% at 50% 0%, rgba(230, 57, 70, .12), transparent 70%);
}
body.words100 .my-subnav-card[data-goto="songs"] { --tile-glow: rgba(230, 57, 70, .16); }
body.words100 .my-subnav-card[data-goto="states"] { --tile-glow: rgba(74, 163, 223, .20); }
body.words100 .my-subnav-card:hover { border-color: #E63946; }
body.words100 .my-subnav-emoji {
  background: linear-gradient(140deg, #f04b57, #E63946);
  border: 2px solid #1a1a1a;
  box-shadow: 3px 3px 0 #1a1a1a, inset 0 1px 0 rgba(255, 255, 255, .3);
  border-radius: 14px;
  color: #ffffff;
}
body.words100 .my-subnav-txt b { color: #B91F2C; font-family: 'Oswald', sans-serif; letter-spacing: .04em; }
body.words100 .my-subnav-txt small { color: #6b6459; }
body.words100 .songpct {
  background: linear-gradient(160deg, rgba(230, 57, 70, .10), rgba(253, 253, 245, .02)), #FDFDF5;
  color: #24211c;
  border: 2px solid #1a1a1a;
  border-radius: 10px;
  box-shadow: 4px 4px 0 rgba(20, 40, 70, .28);
}
body.words100 .songpct-num { color: #E63946; font-family: 'Oswald', sans-serif; font-weight: 700; }
body.words100 .songpct-txt .muted { color: #6b6459; }
body.words100 .songpct-bar { background: rgba(230, 57, 70, .18); border: 1px solid #1a1a1a; }
body.words100 .install-banner {
  background: linear-gradient(135deg, rgba(230, 57, 70, .16), rgba(242, 193, 78, .14));
  border: 3px solid #1a1a1a;
  border-radius: 10px;
  box-shadow: 4px 4px 0 #1a1a1a;
  color: #24211c;
}

/* ============================================================
   ERA-AUTHENTICITY SWEEP v133 (Sep 17 2026) — 100 WORDS AND
   RUNNING. Rapid-fire basement era: stopwatch buttons, ruled
   notebook cards with 100-word-count badges, spiral-bound
   popups, speed-line masthead, XX tally marks.
   ============================================================ */
/* speed lines + stopwatch behind masthead */
body.words100 .home-masthead-body { position: relative; overflow: hidden; }
body.words100 .home-masthead-body::before {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(100deg, transparent 0 26px, rgba(20,60,120,.12) 26px 30px);
  pointer-events: none;
}
body.words100 .home-masthead-body::after {
  content: "100";
  position: absolute; right: 14px; top: 6px;
  width: 74px; height: 74px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 26px;
  color: #14315c;
  background: radial-gradient(circle at 35% 30%, #fff, #dfe9f5 70%);
  border: 4px solid #14315c;
  box-shadow: 0 0 0 3px #c8102e, 4px 4px 0 rgba(20,49,92,.35);
  transform: rotate(8deg);
  pointer-events: none;
}
/* stopwatch buttons with speed lines */
body.words100 .btn {
  position: relative;
  background: linear-gradient(#ffffff, #dfe9f5);
  color: #14315c;
  border: 3px solid #14315c;
  border-radius: 999px;
  font-family: 'Oswald', sans-serif;
  letter-spacing: .16em;
  box-shadow: 4px 4px 0 #c8102e;
  overflow: visible;
}
body.words100 .btn::after {
  content: "";
  position: absolute; top: 50%; left: -22px;
  width: 18px; height: 3px;
  background: repeating-linear-gradient(90deg, #c8102e 0 5px, transparent 5px 9px);
  transform: translateY(-50%);
}
body.words100 .btn.primary {
  background: linear-gradient(#c8102e, #8e0b21);
  border-color: #14315c;
  color: #fff;
}
/* stopwatch-lap nav tabs */
body.words100 .tab {
  border-radius: 999px;
  background: #fff;
  border: 2px solid #14315c;
  color: #14315c;
  font-family: 'Oswald', sans-serif;
  letter-spacing: .1em;
}
body.words100 .tab.active {
  background: #14315c;
  color: #fff;
  box-shadow: 0 0 0 3px #c8102e;
}
/* ruled notebook cards with word-count badges */
body.words100 .show-card, body.words100 .thread-card {
  position: relative;
  background:
    linear-gradient(90deg, transparent 44px, rgba(200,16,46,.5) 44px 46px, transparent 46px),
    repeating-linear-gradient(0deg, transparent 0 24px, rgba(20,60,120,.28) 24px 25px),
    #fdfef8;
  border: 1px solid #b9c6d8;
  border-radius: 2px;
  color: #1c2f4a;
  padding-left: 58px;
  box-shadow: 5px 5px 0 rgba(20,49,92,.25);
}
body.words100 .show-card::before, body.words100 .thread-card::before {
  content: "100 WORDS";
  position: absolute; left: 8px; top: 10px;
  writing-mode: vertical-rl;
  font-family: 'Oswald', sans-serif; font-size: 10px; letter-spacing: .3em;
  color: #c8102e;
  border: 2px solid #c8102e;
  border-radius: 4px;
  padding: 6px 3px;
  transform: rotate(180deg);
}
/* spiral-notebook popups */
body.words100 .wl-popup-card, body.words100 .modal-card {
  background:
    radial-gradient(circle 7px at 18px 50%, #8fa3bd 60%, transparent 65%),
    repeating-linear-gradient(0deg, transparent 0 30px, rgba(20,60,120,.14) 30px 31px),
    #fdfef8;
  background-size: 36px 100%, 100% 100%, 100% 100%;
  background-repeat: repeat-y;
  border: 2px solid #14315c;
  border-radius: 4px 14px 14px 4px;
  color: #1c2f4a;
  box-shadow: 10px 10px 0 rgba(200,16,46,.35);
  padding-left: 52px;
}
/* handwritten-bar form fields */
body.words100 input, body.words100 select, body.words100 textarea {
  background:
    repeating-linear-gradient(0deg, transparent 0 22px, rgba(20,60,120,.25) 22px 23px),
    #fff;
  border: 2px solid #14315c;
  color: #1c2f4a;
  font-family: 'Permanent Marker', cursive;
}
body.words100 .foot::after {
  content: "XX • 100 WORDS AND RUNNING • EST 19XX • CLEVELAND BASEMENT";
  display: block; text-align: center;
  font-family: 'Permanent Marker', cursive; font-size: 14px;
  color: #14315c; margin-top: 10px;
}

/* ============================================================
   ERA RESEARCH PASS v134 (Sep 17 2026) — 100 WORDS AND RUNNING
   Sourced: mgkestfam archive. Archive calls it MGK's first
   mixtape — 21 tracks; its fifth anniversary noted Feb 11,
   2015 (⇒ Feb 2010 release). Archive categories used as era
   labels: "100 WAR", "2's Up", "On Deck", "Moves To Make",
   "We Ride", "Chill On 100", "Running Kid". Apollo Amateur
   Night / Tower City airbrush shop are broader roots and are
   NOT labeled as project-specific here.
   ============================================================ */
body.words100 .foot::before {
  content: "★ FEB 2010 ★ FIRST MIXTAPE ★ 21 TRACKS ★ 100 WAR ★ CHILL ON 100 ★";
  display: block; text-align: center;
  font-family: 'Oswald', 'Arial Narrow', sans-serif;
  font-size: 11px; letter-spacing: .22em;
  color: #2b2b2b; opacity: .9; margin-bottom: 8px;
}
body.words100 .home-ticker::after {
  content: "ON DECK • KELLYVISION • RUNNING KID • WE RIDE • MOVES TO MAKE";
  display: block; text-align: center;
  font-family: 'Courier New', monospace; font-weight: 700;
  font-size: 12px; letter-spacing: .14em;
  color: #1a1a1a; margin-top: 6px;
}
body.words100 .home-section-title::before {
  content: "★ 100 WORDS AND RUNNING ★ ";
  font-family: 'Oswald', 'Arial Narrow', sans-serif;
  font-size: 12px; letter-spacing: .3em;
  color: #1a1a1a;
}
/* speed lines: the grind behind the stopwatch */
body.words100 .home-ticker {
  background-image: repeating-linear-gradient(115deg, transparent 0 14px, rgba(0,0,0,.08) 14px 16px);
}