/* Satoshi, self-hosted. The variable cut covers 300-900 continuously, so weight 600
   (the kit's semibold for labels and card titles) renders for real; the static set jumps
   500 -> 700 and would have silently substituted Bold. Path is relative to this file so
   the gallery still works opened straight off disk. */
@font-face {
  font-family: 'Satoshi';
  src: url('fonts/satoshi-variable.woff2') format('woff2');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

/* Botsi brand system — see botsi-brand-kit.md.
   Two zones: warm (Parchment page + Midnight text) and dark (Obsidian blocks +
   opacity-stepped white). The Signal Gradient is a text clip / border only, never a fill. */
:root {
  --botsi-bg: #F5F0E8;            /* Parchment — default page background */
  --botsi-bg-warm: #EBE5D9;       /* Linen — darker warm surface */
  --botsi-surface: #FFFFFF;       /* White card on Parchment */
  --botsi-surface-warm: #FAF7F2;  /* Alternating section on Parchment */
  --botsi-dark: #1A1A1A;          /* Midnight */
  --botsi-darker: #0F0F0F;        /* Obsidian */
  --botsi-text: #1A1A1A;
  --botsi-text-secondary: #6B6560;
  --botsi-text-tertiary: #9A9490;
  --botsi-border: #E0D9CE;
  --botsi-border-light: #ECE7DD;
  --botsi-blue: #3B82F6;          /* Azure — supporting mark, warm-zone eyebrows */
  --botsi-purple: #8B5CF6;
  --botsi-pink: #D946EF;
  --botsi-cyan: #22D3EE;          /* dark-zone eyebrows */
  --signal: linear-gradient(90deg, #D946EF 0%, #7C3AED 30%, #22D3EE 60%, #22D3EE 100%);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: Satoshi, -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, sans-serif;
       color: var(--botsi-text); background: var(--botsi-bg); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
b { font-weight: 700; }
/* Uppercase tracked eyebrow: Azure on warm, Cyan on dark. */
.eyebrow { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .22em; color: var(--botsi-blue); }
/* Sponsor strip: dark zone sitting above the warm page, closed by a 2px Signal
   Gradient hairline. Gradient as a border, never a fill. */
.sponsor { position: relative; background: var(--botsi-darker); }
.sponsor::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background-image: var(--signal); }
.sponsorin { max-width: 1152px; margin: 0 auto; padding: 13px 24px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.sponsor .eyebrow { color: var(--botsi-cyan); }
.sdiv { width: 1px; height: 14px; background: rgba(255,255,255,.18); }
.sbrand { color: #fff; font-size: 16px; font-weight: 700; letter-spacing: -0.02em; }
.sline { color: rgba(255,255,255,.6); font-size: 13px; }
/* Gradient-bordered pill: Obsidian fill via padding-box, Signal Gradient via border-box. */
.scta { margin-left: auto; color: #fff; font-size: 13px; font-weight: 600; padding: 8px 18px; border-radius: 999px;
        border: 1px solid transparent; background: linear-gradient(var(--botsi-darker), var(--botsi-darker)) padding-box, var(--signal) border-box;
        transition: background .18s; white-space: nowrap; }
.scta:hover { background: linear-gradient(var(--botsi-dark), var(--botsi-dark)) padding-box, var(--signal) border-box; }
.sarrow { display: inline-block; transition: transform .18s; }
.scta:hover .sarrow { transform: translateX(3px); }
/* Closing strip: same bar, hairline mirrored to the top edge. The 1px white border keeps
   it legible against the Obsidian footer directly beneath it. */
.sponsor.bottom::after { top: 0; bottom: auto; }
.sponsor.bottom { border-bottom: 1px solid rgba(255,255,255,.10); }
/* Mid-scroll promo: full-width grid child, dark gravity block with corner glows. */
.midpromo { grid-column: 1 / -1; position: relative; overflow: hidden; background: var(--botsi-darker); border-radius: 16px; }
.midpromo::before, .midpromo::after { content: ""; position: absolute; width: 380px; height: 380px; border-radius: 50%; opacity: .3; filter: blur(64px); pointer-events: none; }
.midpromo::before { background: radial-gradient(circle, #7C3AED 0%, transparent 70%); top: -210px; left: -120px; }
.midpromo::after { background: radial-gradient(circle, #22D3EE 0%, transparent 70%); bottom: -210px; right: -120px; }
.mpin { position: relative; z-index: 1; padding: 44px 40px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.midpromo .eyebrow { color: var(--botsi-cyan); }
.midpromo h2 { color: #fff; font-size: 30px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.midpromo p { color: rgba(255,255,255,.6); font-size: 15px; line-height: 1.625; max-width: 42rem; }
.midpromo .scta { margin-left: 0; margin-top: 4px; }
.hero { padding: 64px 24px 28px; max-width: 1152px; margin: 0 auto; }
.hero h1 { font-size: 44px; letter-spacing: -0.02em; line-height: 1.05; font-weight: 700; margin-top: 14px; }
/* Signal Gradient as a text clip on the single headline word. Never a background fill. */
.grad { background-image: var(--signal); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p { color: var(--botsi-text-secondary); margin-top: 16px; font-size: 18px; line-height: 1.625; max-width: 42rem; }
.previewbar { background: var(--botsi-bg-warm); border-top: 1px solid var(--botsi-border-light); border-bottom: 1px solid var(--botsi-border-light); color: var(--botsi-text-secondary); font-size: 13px; padding: 11px 24px; text-align: center; }
.previewbar b { color: var(--botsi-text); }
.filters { max-width: 1152px; margin: 0 auto; padding: 24px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.filters select, .filters input[type=search] { font-family: inherit; padding: 9px 12px; border: 1px solid var(--botsi-border); border-radius: 999px; font-size: 14px; background: var(--botsi-surface); color: var(--botsi-text); }
.filters select:focus, .filters input[type=search]:focus { outline: none; border-color: var(--botsi-blue); }
.stylefilter { position: relative; border: 1px solid var(--botsi-border); border-radius: 999px; background: var(--botsi-surface); }
.stylefilter summary { padding: 9px 14px; cursor: pointer; font-size: 14px; list-style: none; }
.styles { position: absolute; z-index: 10; top: 116%; left: 0; background: var(--botsi-surface); border: 1px solid var(--botsi-border-light); border-radius: 14px; padding: 10px 14px; min-width: 220px; box-shadow: 0 12px 32px rgba(26,26,26,.08); }
.styles label { display: block; font-size: 13px; padding: 4px 0; white-space: nowrap; color: var(--botsi-text-secondary); }
#count { color: var(--botsi-text-tertiary); font-size: 12px; font-weight: 600; letter-spacing: .06em; margin-left: auto; }
.grid { max-width: 1152px; margin: 0 auto; padding: 8px 24px 72px; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }
.card { background: var(--botsi-surface); border: 1px solid var(--botsi-border-light); border-radius: 16px; overflow: hidden; transition: box-shadow .18s, transform .18s, border-color .18s; }
.card:hover { box-shadow: 0 12px 32px rgba(26,26,26,.10); transform: translateY(-2px); border-color: var(--botsi-border); }
.thumb { aspect-ratio: 9/16; background: var(--botsi-darker); overflow: hidden; }
.thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.cbody { padding: 14px 16px 16px; }
.cname { font-weight: 600; font-size: 15px; letter-spacing: -0.01em; }
.cmeta { color: var(--botsi-text-tertiary); font-size: 12px; margin: 4px 0 10px; }
.cbadges { display: flex; flex-wrap: wrap; gap: 5px; }
.t { font-size: 11px; background: var(--botsi-bg-warm); border-radius: 999px; padding: 3px 9px; color: var(--botsi-text-secondary); }
.t.price { background: rgba(59,130,246,.10); color: var(--botsi-blue); }
.none { color: var(--botsi-text-tertiary); padding: 40px; }
.nojs { max-width: 1152px; margin: 0 auto; padding: 0 24px 48px; }
.nojs h2 { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 12px; }
.nojs a { display: inline-block; color: var(--botsi-blue); font-size: 14px; margin: 0 14px 8px 0; }
.apphead { max-width: 1152px; margin: 0 auto; padding: 40px 24px 20px; }
.back { color: var(--botsi-blue); font-size: 13px; font-weight: 500; }
.apphead h1 { font-size: 36px; margin: 12px 0 6px; letter-spacing: -0.02em; font-weight: 700; }
.apphead .meta { color: var(--botsi-text-tertiary); font-size: 13px; }
.tax { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
/* Taxonomy chips stay inside the brand's two-zone palette: Linen chips, Azure for the
   two that carry the most signal (category, pricing). No mid-tone grays, no rainbow. */
.badge { font-size: 12px; background: var(--botsi-bg-warm); border-radius: 999px; padding: 4px 11px; color: var(--botsi-text-secondary); }
.badge.cat { background: rgba(59,130,246,.10); color: var(--botsi-blue); font-weight: 600; }
.badge.price { background: rgba(59,130,246,.10); color: var(--botsi-blue); }
.badge.pw { background: var(--botsi-surface); border: 1px solid var(--botsi-border); color: var(--botsi-text); }
.badge.pwstyle { background: var(--botsi-bg-warm); color: var(--botsi-text-secondary); }
/* Dense grid that flows in screen order (left-to-right, row by row). Fixed-width
   columns mean captions never shift horizontal alignment; align-items:start keeps each
   row's screenshots top-aligned, with the annotation adding height only below its cell. */
.flow { max-width: 1760px; margin: 0 auto; padding: 10px 24px 72px; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; align-items: start; }
.screen { background: var(--botsi-surface); border: 1px solid var(--botsi-border-light); border-radius: 14px; overflow: hidden; cursor: zoom-in; transition: border-color .18s; }
.screen:hover { border-color: var(--botsi-blue); }
.screen.trim { opacity: .5; }
.screen.hasann { border-color: var(--botsi-border); }
.shot { position: relative; display: block; }
.shot img { width: 100%; display: block; }
.snum { position: absolute; top: 6px; left: 6px; background: rgba(15,15,15,.7); color: #fff; font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 999px; }
/* captions clamped to 4 lines for a uniform grid; click the screen to read it all */
.ann { font-size: 12.5px; line-height: 1.55; color: var(--botsi-text-secondary); padding: 10px 12px 12px; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.ann.draft { color: var(--botsi-text-tertiary); }
/* Draft chip follows the eyebrow pattern: Azure on warm, Cyan in the dark lightbox. */
.dbadge { display: inline-block; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .18em; background: rgba(59,130,246,.10); color: var(--botsi-blue); border-radius: 5px; padding: 2px 6px; margin-right: 6px; vertical-align: 1px; }
/* Dark "gravity" footer: Obsidian with the two opposite-corner radial glows. */
.foot { position: relative; overflow: hidden; background: var(--botsi-darker); color: rgba(255,255,255,.6); font-size: 14px; padding: 56px 24px; text-align: center; }
.foot::before, .foot::after { content: ""; position: absolute; width: 420px; height: 420px; border-radius: 50%; opacity: .3; filter: blur(64px); pointer-events: none; }
.foot::before { background: radial-gradient(circle, #7C3AED 0%, transparent 70%); top: -220px; left: -140px; }
.foot::after { background: radial-gradient(circle, #22D3EE 0%, transparent 70%); bottom: -220px; right: -140px; }
.footin { position: relative; z-index: 1; max-width: 1152px; margin: 0 auto; }
.foot .eyebrow { color: var(--botsi-cyan); }
.foot .fline { color: #fff; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; margin-top: 12px; }
.foot .fmeta { color: rgba(255,255,255,.5); font-size: 13px; margin-top: 10px; }
.foot .fmeta b { color: rgba(255,255,255,.85); font-weight: 600; }
/* lightbox: enlarged screenshot + full annotation, prev/next through the flow. Dark zone. */
#lb { display: none; position: fixed; inset: 0; background: rgba(15,15,15,.94); z-index: 100; align-items: center; justify-content: center; }
#lb.open { display: flex; }
.lb-inner { display: flex; gap: 28px; align-items: center; max-width: 1080px; padding: 24px; }
#lb-img { max-height: 86vh; max-width: 56vw; border-radius: 12px; box-shadow: 0 12px 48px rgba(0,0,0,.5); }
#lb-ann { color: rgba(255,255,255,.85); width: 360px; max-height: 86vh; overflow: auto; font-size: 15px; line-height: 1.625; }
#lb-ann p { margin-top: 10px; }
#lb-ann .muted { color: rgba(255,255,255,.4); }
.lb-num { color: var(--botsi-cyan); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .22em; }
#lb-ann .dbadge { background: rgba(34,211,238,.12); color: var(--botsi-cyan); }
#lb-x { position: fixed; top: 14px; right: 22px; background: none; border: none; color: #fff; font-size: 32px; line-height: 1; cursor: pointer; }
#lb-prev, #lb-next { position: fixed; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.10); color: #fff; font-size: 30px; padding: 14px 18px; border-radius: 12px; cursor: pointer; }
#lb-prev:hover, #lb-next:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.2); }
#lb-prev { left: 16px; } #lb-next { right: 16px; }
@media (max-width: 640px) { .flow { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; padding: 10px 14px 50px; } .ann { font-size: 12px; } .lb-inner { flex-direction: column; gap: 12px; } #lb-img { max-width: 92vw; max-height: 60vh; } #lb-ann { width: 92vw; }
  .hero { padding: 40px 20px 20px; } .hero h1 { font-size: 32px; } .hero p { font-size: 16px; } .apphead h1 { font-size: 28px; } .foot { padding: 44px 20px; }
  .sponsorin { gap: 10px; padding: 11px 20px; } .sline { display: none; } .scta { padding: 7px 14px; }
  .mpin { padding: 32px 24px; } .midpromo h2 { font-size: 24px; } .midpromo p { font-size: 14px; } }