/* ══════════════════════════════════════════════════════════════════════════════
   threeStoogesOriginalStyles.css
   TNT | Tool Time | Three Stooges Driver — Entry #6
   Created: 11/01/2026
   Palette: vintage B&W film · warm sepia accent · blue-striped code terminal
   ══════════════════════════════════════════════════════════════════════════════ */

:root {
    --st-dark:       #0e0e0e;
    --st-card:       #1a1a1a;
    --st-card-lt:    #242424;
    --st-sepia:      #c49a20;
    --st-sepia-lt:   rgba(196,154,32,0.15);
    --st-cream:      #f0e8d0;
    --st-cream-dim:  rgba(240,232,208,0.65);
    --st-blue:       #4287c8;
    --st-blue-dim:   rgba(66,135,200,0.20);
    --st-border:     rgba(196,154,32,0.22);
    --st-border-b:   rgba(66,135,200,0.22);
}

body {
    background-color: var(--st-dark);
    color: var(--st-cream);
    font-family: 'Inter', sans-serif;
}

/* ── Back bar ──────────────────────────────────────────────────────────────── */
.st-back-bar {
    background: rgba(14,14,14,0.96);
    border-bottom: 1px solid var(--st-border);
    padding: 0.45rem 1.2rem;
    display: flex;
    align-items: center;
    gap: 1.4rem;
    flex-wrap: wrap;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.5px;
}
.st-back-bar a            { color: var(--st-sepia); text-decoration: none; transition: color 0.18s; }
.st-back-bar a:hover      { color: var(--st-cream); }
.st-back-bar span         { color: rgba(240,232,208,0.30); margin-left: auto; }

/* ── Hero ──────────────────────────────────────────────────────────────────── */
#hero {
    min-height: 38vh;
    background:
        linear-gradient(160deg, rgba(14,14,14,0.88) 0%, rgba(30,20,5,0.65) 100%),
        url('../images/stoogesThanksgiving.jpg') center 35% / cover no-repeat;
    padding: 4rem 1rem 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hero-content       { text-align: center; max-width: 760px; margin: 0 auto; }
.hero-eyebrow       { display: block; font-size: 0.78rem; font-weight: 600;
                       letter-spacing: 2.5px; text-transform: uppercase;
                       color: var(--st-sepia); margin-bottom: 0.65rem; }
.hero-title         { font-family: 'Boogaloo', sans-serif;
                       font-size: clamp(2rem, 5vw, 3.2rem);
                       color: var(--st-cream); margin-bottom: 0.55rem; line-height: 1.15; }
.hero-subtitle      { font-size: 1rem; color: var(--st-cream-dim);
                       max-width: 580px; margin: 0 auto; line-height: 1.65; }

/* ── Main section ──────────────────────────────────────────────────────────── */
#mainSection { background: var(--st-dark); padding: 3rem 1rem 5rem; }

/* ── Intro card ────────────────────────────────────────────────────────────── */
.intro-card {
    background: var(--st-card);
    border: 1px solid var(--st-border);
    border-left: 4px solid var(--st-sepia);
    border-radius: 10px;
    padding: 1.6rem 2rem;
    margin-bottom: 1.75rem;
    color: var(--st-cream-dim);
    line-height: 1.72;
}
.intro-card h2    { font-family: 'Boogaloo', sans-serif; font-size: 1.5rem;
                    color: var(--st-sepia); margin-bottom: 0.75rem; }
.intro-card code  { color: var(--st-sepia); background: rgba(196,154,32,0.12);
                    padding: 1px 5px; border-radius: 4px; font-size: 0.87em; }
.intro-card a     { color: var(--st-sepia); font-weight: 600; }
.intro-card a:hover { color: var(--st-cream); }

.stage-badge {
    display: inline-block; font-size: 0.72rem; font-weight: 700;
    letter-spacing: 1.5px; text-transform: uppercase;
    background: var(--st-sepia-lt); color: var(--st-sepia);
    border: 1px solid rgba(196,154,32,0.35); border-radius: 4px;
    padding: 2px 10px; margin-bottom: 0.7rem;
}

/* ── Warning box ───────────────────────────────────────────────────────────── */
.bug-warning {
    background: rgba(220,50,50,0.10);
    border: 1px solid rgba(220,50,50,0.35);
    border-left: 4px solid #dc3232;
    border-radius: 0 8px 8px 0;
    padding: 0.85rem 1.1rem;
    margin: 1rem 0;
    font-size: 0.88rem;
    color: #ffa0a0;
}
.bug-warning strong { color: #ff7070; }
.bug-warning code   { color: #ffb0b0; background: rgba(220,50,50,0.18); padding: 1px 5px; border-radius: 3px; }

/* ── Showcase card ─────────────────────────────────────────────────────────── */
.showcase-card {
    background: var(--st-card);
    border: 1px solid var(--st-border-b);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 1.75rem;
}

/* ── Code terminal header ──────────────────────────────────────────────────── */
.code-terminal-header {
    background: #111;
    border-bottom: 1px solid rgba(66,135,200,0.20);
    padding: 0.55rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.terminal-dots          { display: flex; gap: 6px; align-items: center; }
.td                     { width: 12px; height: 12px; border-radius: 50%; }
.td-red                 { background: #ff5f56; }
.td-yellow              { background: #ffbd2e; }
.td-green               { background: #27c93f; }
.terminal-filename      { font-family: 'Source Code Pro', monospace;
                           font-size: 0.80rem; color: rgba(66,135,200,0.70); }
.terminal-tag           { font-size: 0.72rem; color: rgba(240,232,208,0.28);
                           margin-left: 0.25rem; }
.copy-btn               { margin-left: auto; display: flex; align-items: center;
                           gap: 0.4rem; padding: 0.28rem 0.9rem;
                           background: rgba(66,135,200,0.12);
                           border: 1px solid rgba(66,135,200,0.40);
                           border-radius: 6px; font-size: 0.75rem; font-weight: 700;
                           color: var(--st-blue); cursor: pointer;
                           transition: background 0.18s, color 0.18s; }
.copy-btn:hover         { background: rgba(66,135,200,0.25); color: var(--st-cream); }

/* ── Blue-striped code display ─────────────────────────────────────────────── */
.code-paper {
    background: #05101e;
    overflow-x: auto;
    counter-reset: code-line;
    font-family: 'Source Code Pro', 'Courier New', monospace;
    font-size: 0.83rem;
    line-height: 1.65;
    padding: 0.6rem 0;
}
.code-paper ol { margin: 0; padding: 0; list-style: none; }
.code-paper li {
    padding: 1px 0 1px 0;
    white-space: pre;
    display: block;
    counter-increment: code-line;
    color: #b8d4f0;
}
.code-paper li:nth-child(odd)  { background: rgba(66,135,200,0.05); }
.code-paper li:nth-child(even) { background: rgba(66,135,200,0.11); }
.code-paper li::before {
    content: counter(code-line);
    display: inline-block;
    min-width: 36px;
    padding: 0 12px 0 10px;
    color: rgba(66,135,200,0.38);
    user-select: none;
    text-align: right;
    border-right: 1px solid rgba(66,135,200,0.15);
    margin-right: 12px;
}

/* ── Attribution strip ─────────────────────────────────────────────────────── */
.attr-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 1rem;
    background: #111;
    border-top: 1px solid rgba(66,135,200,0.15);
    font-size: 0.75rem;
    color: rgba(240,232,208,0.35);
}
.attr-name { color: var(--st-sepia); font-weight: 700; }

/* ── Your Turn card ────────────────────────────────────────────────────────── */
.your-turn-card {
    background: var(--st-card-lt);
    border: 1px solid var(--st-border);
    border-radius: 10px;
    padding: 1.6rem 2rem;
    color: var(--st-cream-dim);
}
.your-turn-card h3   { font-family: 'Boogaloo', sans-serif; font-size: 1.3rem;
                        color: var(--st-sepia); margin-bottom: 0.75rem; }
.your-turn-card h4   { font-size: 0.97rem; font-weight: 700; color: var(--st-cream);
                        margin: 1.3rem 0 0.4rem; }
.your-turn-card code { color: var(--st-sepia); background: rgba(196,154,32,0.10);
                        padding: 1px 5px; border-radius: 4px; font-size: 0.87em; }
.your-turn-card pre  { background: rgba(0,0,0,0.45); border: 1px solid rgba(66,135,200,0.22);
                        border-radius: 6px; padding: 0.75rem 1rem;
                        font-family: 'Source Code Pro', monospace;
                        font-size: 0.82rem; color: #b8d4f0;
                        overflow-x: auto; margin: 0.65rem 0; }
.your-turn-card a    { color: var(--st-sepia); font-weight: 600; }
.your-turn-card a:hover { color: var(--st-cream); }

.lang-idea-strip { display: flex; flex-wrap: wrap; gap: 0.55rem; margin: 1rem 0; }
.lang-idea {
    padding: 0.3rem 0.75rem; border-radius: 20px;
    background: var(--st-sepia-lt);
    border: 1px solid rgba(196,154,32,0.30);
    font-size: 0.78rem; font-weight: 600; color: var(--st-sepia);
}

.craft-callout {
    background: rgba(66,135,200,0.07);
    border-left: 3px solid var(--st-blue);
    border-radius: 0 8px 8px 0;
    padding: 0.85rem 1rem;
    font-size: 0.85rem;
    color: rgba(240,232,208,0.68);
    margin-top: 1.2rem;
}
.craft-callout a { color: var(--st-blue); }
.craft-callout a:hover { color: var(--st-cream); }

/* ── Responsive ─────────────────────────────────────────────────────────────── */
@media (max-width: 576px) {
    .hero-title        { font-size: 1.8rem; }
    .intro-card,
    .your-turn-card    { padding: 1.1rem 1rem; }
    .code-paper        { font-size: 0.75rem; }
    .st-back-bar span  { display: none; }
}