Write

/Users/russgoerend/Desktop/Portfolio HTMLs/Graphic Design Playbook.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DCS Playbook | Graphic Design</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap" rel="stylesheet">
    <style>
        :root {
            --primary: #500778;
            --secondary: #c4d600;
            --accent: #4b4f54;
            --bg: #F3F4F6;
            --card-bg: #FFFFFF;
            --text-main: #1F2937;
            --text-sub: #6B7280;
            --nav-height: 70px;
            --sidebar-width: 270px;
            --disc: #0891b2;
            --res:  #7c3aed;
            --des:  #d97706;
            --del:  #059669;
        }
        *, *::before, *::after { box-sizing: border-box; }
        body { font-family: 'Inter', 'Segoe UI', sans-serif; background: var(--bg); color: var(--text-main); margin: 0; padding-top: var(--nav-height); }

        /* ── NAV ── */
        .main-nav { background: var(--primary); height: var(--nav-height); width: 100%; position: fixed; top: 0; left: 0; z-index: 1000; display: flex; align-items: center; border-bottom: 4px solid var(--secondary); box-shadow: 0 2px 12px rgba(0,0,0,0.15); }
        .nav-container { max-width: 1400px; margin: 0 auto; width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 0 20px; }
        .nav-logo-link { display: flex; align-items: center; text-decoration: none; height: calc(var(--nav-height) - 15px); }
        .nav-logo-img { height: 100%; width: auto; }
        .nav-links { display: flex; gap: 8px; align-items: center; }
        .nav-links a { color: rgba(255,255,255,0.9); text-decoration: none; font-size: 0.78rem; font-weight: 700; padding: 7px 12px; border-radius: 6px; text-transform: uppercase; letter-spacing: 0.03em; transition: all 0.2s; }
        .nav-links a:hover { color: var(--secondary); background: rgba(255,255,255,0.1); }
        .nav-links a.active { background: var(--secondary); color: var(--primary); }
        .nav-playbook-label { color: var(--secondary); font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; padding: 4px 10px; border: 1px solid rgba(196,214,0,0.4); border-radius: 4px; margin-right: 8px; }

        /* ── LAYOUT ── */
        .app-shell { display: flex; min-height: calc(100vh - var(--nav-height)); }

        /* ── SIDEBAR ── */
        .sidebar { width: var(--sidebar-width); min-width: var(--sidebar-width); background: white; border-right: 1px solid #E5E7EB; position: sticky; top: var(--nav-height); height: calc(100vh - var(--nav-height)); overflow-y: auto; display: flex; flex-direction: column; }
        .sidebar-header { padding: 20px 18px 14px; border-bottom: 1px solid #E5E7EB; }
        .sidebar-title { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-sub); margin-bottom: 2px; }
        .project-manager { margin: 16px 0 12px; display: grid; gap: 12px; }
        .project-manager select { width: 100%; border: 1px solid #E5E7EB; border-radius: 12px; padding: 10px 12px; font-size: 0.95rem; color: var(--text-main); background: white; appearance: none; }
        .project-actions { display: flex; gap: 10px; flex-wrap: wrap; }
        .btn-small { border: none; border-radius: 999px; background: var(--primary); color: white; font-weight: 700; padding: 10px 14px; cursor: pointer; transition: background 0.2s; font-size: 0.78rem; }
        .btn-small:hover { background: #3b0465; }
        .btn-small.btn-danger { background: #DC2626; }
        .btn-small.btn-danger:hover { background: #b91c1c; }
        .sidebar-project-name { font-size: 1rem; font-weight: 800; color: var(--primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .progress-bar-wrap { margin-top: 10px; background: #E5E7EB; border-radius: 4px; height: 6px; overflow: hidden; }
        .progress-bar-fill { height: 100%; background: var(--secondary); border-radius: 4px; transition: width 0.4s; }
        .progress-label { font-size: 0.72rem; color: var(--text-sub); margin-top: 4px; }
        .phase-group { padding: 10px 0; border-bottom: 1px solid #F3F4F6; }
        .phase-label { font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; padding: 6px 18px 4px; display: flex; align-items: center; gap: 6px; }
        .phase-label.disc { color: var(--disc); }
        .phase-label.res  { color: var(--res); }
        .phase-label.des  { color: var(--des); }
        .phase-label.del  { color: var(--del); }
        .step-btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 18px; background: none; border: none; cursor: pointer; text-align: left; font-family: inherit; font-size: 0.82rem; color: var(--text-main); border-left: 3px solid transparent; transition: all 0.15s; }
        .step-btn:hover { background: #F9FAFB; }
        .step-btn.active { background: #FBF5FF; border-left-color: var(--primary); color: var(--primary); font-weight: 700; }
        .step-btn.done .step-check { background: var(--del); border-color: var(--del); }
        .step-btn.done .step-check::after { content: '✓'; }
        .step-check { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #D1D5DB; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 0.6rem; color: white; transition: all 0.2s; }
        .step-name { flex: 1; line-height: 1.3; }
        .step-btn.checkpoint { font-style: italic; }
        .sidebar-footer { margin-top: auto; padding: 14px 16px; border-top: 1px solid #E5E7EB; }
        .task-board-btn { width: 100%; padding: 10px; background: var(--primary); color: white; border: none; border-radius: 8px; font-family: inherit; font-weight: 700; font-size: 0.82rem; cursor: pointer; transition: background 0.2s; display: flex; align-items: center; justify-content: center; gap: 8px; }
        .task-board-btn:hover { background: #3d0560; }
        .task-board-note { margin-top: 10px; font-size: 0.82rem; color: var(--text-sub); line-height: 1.4; }

        /* ── MAIN ── */
        .main-content { flex: 1; padding: 36px 40px 60px; max-width: 860px; }
        .phase-badge { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 20px; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 12px; }
        .phase-badge.disc { background: #E0F2FE; color: var(--disc); }
        .phase-badge.res  { background: #EDE9FE; color: var(--res); }
        .phase-badge.des  { background: #FEF3C7; color: #92400E; }
        .phase-badge.del  { background: #DCFCE7; color: var(--del); }
        .phase-badge.chk  { background: #FEF3C7; color: #92400E; }
        .step-section { display: none; }
        .step-section.active { display: block; }
        .step-title { font-size: 2rem; font-weight: 800; color: var(--primary); margin: 0 0 6px 0; line-height: 1.15; }
        .step-subtitle { font-size: 1rem; color: var(--text-sub); margin: 0 0 28px 0; line-height: 1.4; }

        /* ── CARDS ── */
        .card { background: white; border: 1px solid #E5E7EB; border-radius: 12px; padding: 22px 24px; margin-bottom: 20px; }
        .card-title { font-size: 1rem; font-weight: 800; color: var(--primary); margin: 0 0 10px 0; }
        .card p { font-size: 0.9rem; line-height: 1.65; color: #374151; margin: 0 0 12px 0; }
        .card p:last-child { margin-bottom: 0; }
        .card ul { font-size: 0.9rem; line-height: 1.7; color: #374151; padding-left: 20px; margin: 8px 0 0 0; }
        .card ul li { margin-bottom: 6px; }

        /* ── CALLOUTS ── */
        .callout { border-radius: 10px; padding: 16px 18px; margin-bottom: 20px; display: flex; gap: 14px; align-items: flex-start; font-size: 0.88rem; line-height: 1.5; }
        .callout-icon { font-size: 1.3rem; flex-shrink: 0; margin-top: 1px; }
        .callout-yellow { background: #FFFBEB; border: 1px solid #FDE68A; color: #78350F; }
        .callout-blue   { background: #EFF6FF; border: 1px solid #BFDBFE; color: #1E3A5F; }
        .callout-green  { background: #DCFCE7; border: 1px solid #86EFAC; color: #14532D; }
        .callout-purple { background: #F5F3FF; border: 1px solid #DDD6FE; color: #3B0764; }
        .callout-teal   { background: #E0F2FE; border: 1px solid #7DD3FC; color: #0C4A6E; }
        .callout-red    { background: #FEF2F2; border: 1px solid #FECACA; color: #991B1B; }

        /* ── GLOSSARY / HOW-TO ── */
        .glossary-term { font-weight: 800; color: var(--primary); }
        .how-to-list { list-style: none; padding: 0; margin: 10px 0 0 0; counter-reset: how-to; }
        .how-to-list li { counter-increment: how-to; display: flex; gap: 14px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid #F3F4F6; font-size: 0.9rem; line-height: 1.5; color: #374151; }
        .how-to-list li:last-child { border-bottom: none; }
        .how-to-list li::before { content: counter(how-to); background: var(--res); color: white; border-radius: 50%; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; font-size: 0.72rem; font-weight: 800; flex-shrink: 0; margin-top: 1px; }

        /* ── PRINCIPLE GRID ── */
        .principle-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 12px; }
        .principle-card { background: #F9FAFB; border: 1px solid #E5E7EB; border-radius: 10px; padding: 16px; border-top: 3px solid var(--res); }
        .principle-name { font-size: 0.85rem; font-weight: 800; color: var(--primary); margin-bottom: 6px; }
        .principle-card p { font-size: 0.84rem; margin: 0; color: #374151; line-height: 1.5; }
        @media (max-width: 680px) { .principle-grid { grid-template-columns: 1fr; } }

        /* ── FORMAT TABLE ── */
        .format-table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 0.85rem; }
        .format-table th { text-align: left; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-sub); padding: 6px 10px; border-bottom: 2px solid #E5E7EB; }
        .format-table td { padding: 8px 10px; border-bottom: 1px solid #F3F4F6; color: #374151; vertical-align: top; }
        .format-table tr:last-child td { border-bottom: none; }
        .format-badge { display: inline-block; font-size: 0.72rem; font-weight: 800; padding: 2px 8px; border-radius: 4px; }
        .format-badge.print { background: #EDE9FE; color: var(--res); }
        .format-badge.screen { background: #E0F2FE; color: var(--disc); }
        .format-badge.both { background: #DCFCE7; color: var(--del); }

        /* ── QUESTION LIST ── */
        .question-list { list-style: none; padding: 0; margin: 10px 0 0 0; }
        .question-list li { padding: 9px 12px 9px 36px; position: relative; font-size: 0.88rem; line-height: 1.5; color: #374151; border-bottom: 1px solid #F3F4F6; }
        .question-list li:last-child { border-bottom: none; }
        .question-list li::before { content: '?'; position: absolute; left: 10px; top: 9px; width: 18px; height: 18px; background: var(--secondary); color: var(--primary); border-radius: 50%; font-size: 0.65rem; font-weight: 900; display: flex; align-items: center; justify-content: center; }

        /* ── CHECKLIST ── */
        .checklist { list-style: none; padding: 0; margin: 0; }
        .checklist li { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-bottom: 1px solid #F3F4F6; font-size: 0.88rem; line-height: 1.4; color: #374151; }
        .checklist li:last-child { border-bottom: none; }
        .checklist input[type="checkbox"] { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--primary); flex-shrink: 0; cursor: pointer; }
        .checklist label { cursor: pointer; flex: 1; }
        .checklist li:has(input:checked) label { color: #9CA3AF; text-decoration: line-through; }

        /* ── FORM ── */
        .field-label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-sub); margin-bottom: 5px; }
        .field-input { width: 100%; padding: 10px 12px; border: 1px solid #D1D5DB; border-radius: 8px; font-family: inherit; font-size: 0.88rem; color: var(--text-main); background: white; transition: border-color 0.2s; outline: none; margin-bottom: 14px; }
        .field-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(80,7,120,0.08); }
        textarea.field-input { resize: vertical; min-height: 72px; }
        select.field-input { cursor: pointer; }

        /* ── ARTIFACT ZONE ── */
        .artifact-zone { background: #F9FAFB; border: 2px dashed #D1D5DB; border-radius: 10px; padding: 18px 20px; margin-top: 24px; }
        .artifact-zone-title { font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-sub); margin-bottom: 12px; display: flex; align-items: center; gap: 6px; }
        .artifact-row { display: flex; gap: 8px; margin-bottom: 10px; }
        .artifact-link-input { flex: 1; padding: 9px 12px; border: 1px solid #D1D5DB; border-radius: 8px; font-family: inherit; font-size: 0.82rem; outline: none; transition: border-color 0.2s; }
        .artifact-link-input:focus { border-color: var(--primary); }
        .artifact-note-input { width: 100%; padding: 9px 12px; border: 1px solid #D1D5DB; border-radius: 8px; font-family: inherit; font-size: 0.82rem; resize: vertical; min-height: 56px; outline: none; transition: border-color 0.2s; margin-bottom: 10px; }
        .artifact-note-input:focus { border-color: var(--primary); }
        .btn-save-artifact { padding: 9px 16px; background: var(--accent); color: white; border: none; border-radius: 8px; font-family: inherit; font-size: 0.8rem; font-weight: 700; cursor: pointer; transition: background 0.2s; }
        .btn-save-artifact:hover { background: #333; }
        .btn-send-portfolio { padding: 9px 16px; background: var(--primary); color: white; border: none; border-radius: 8px; font-family: inherit; font-size: 0.8rem; font-weight: 700; cursor: pointer; transition: background 0.2s; }
        .btn-send-portfolio:hover { background: #3d0560; }
        .artifact-saved-msg { font-size: 0.78rem; color: var(--del); font-weight: 700; display: none; margin-top: 6px; }

        /* ── CHECKPOINT ── */
        .checkpoint-card { background: white; border: 2px solid #FDE68A; border-radius: 14px; padding: 26px 28px; margin-bottom: 20px; }
        .checkpoint-mentor { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
        .mentor-avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--secondary); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; flex-shrink: 0; }
        .mentor-name { font-size: 1.1rem; font-weight: 800; color: var(--primary); }
        .mentor-role { font-size: 0.82rem; color: var(--text-sub); margin-top: 1px; }
        .checkpoint-questions { background: #FFFBEB; border-radius: 8px; padding: 14px 16px; margin-bottom: 16px; }
        .checkpoint-questions h4 { font-size: 0.82rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: #92400E; margin: 0 0 10px 0; }
        .checkpoint-q-list { list-style: none; padding: 0; margin: 0; }
        .checkpoint-q-list li { padding: 6px 0 6px 22px; position: relative; font-size: 0.88rem; color: #78350F; line-height: 1.4; border-bottom: 1px solid rgba(253,230,138,0.5); }
        .checkpoint-q-list li:last-child { border-bottom: none; }
        .checkpoint-q-list li::before { content: '→'; position: absolute; left: 0; color: #D97706; font-weight: 700; }

        /* ── CLIENT REVIEW CARD ── */
        .client-review-card { background: white; border: 2px solid #BFDBFE; border-radius: 14px; padding: 26px 28px; margin-bottom: 20px; }
        .client-review-header { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
        .client-avatar { width: 52px; height: 52px; border-radius: 50%; background: #BFDBFE; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; flex-shrink: 0; }
        .client-title { font-size: 1.1rem; font-weight: 800; color: #1E3A5F; }
        .client-subtitle { font-size: 0.82rem; color: var(--text-sub); margin-top: 1px; }
        .client-guidance { background: #EFF6FF; border-radius: 8px; padding: 14px 16px; margin-bottom: 16px; }
        .client-guidance h4 { font-size: 0.82rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: #1E3A5F; margin: 0 0 10px 0; }
        .client-q-list { list-style: none; padding: 0; margin: 0; }
        .client-q-list li { padding: 6px 0 6px 22px; position: relative; font-size: 0.88rem; color: #1E3A5F; line-height: 1.4; border-bottom: 1px solid rgba(191,219,254,0.5); }
        .client-q-list li:last-child { border-bottom: none; }
        .client-q-list li::before { content: '→'; position: absolute; left: 0; color: #3B82F6; font-weight: 700; }

        /* ── NAV BUTTONS ── */
        .step-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 36px; padding-top: 24px; border-top: 1px solid #E5E7EB; }
        .btn-prev { padding: 11px 22px; background: white; border: 2px solid #E5E7EB; border-radius: 8px; font-family: inherit; font-size: 0.85rem; font-weight: 700; cursor: pointer; color: var(--accent); transition: all 0.2s; }
        .btn-prev:hover { border-color: var(--primary); color: var(--primary); }
        .btn-next { padding: 12px 28px; background: var(--primary); color: white; border: none; border-radius: 8px; font-family: inherit; font-size: 0.88rem; font-weight: 800; cursor: pointer; transition: background 0.2s; }
        .btn-next:hover { background: #3d0560; }

        /* ── TASK BOARD MODAL ── */
        .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 2000; display: none; align-items: flex-start; justify-content: flex-end; padding: 80px 20px 20px; }
        .modal-overlay.open { display: flex; }
        .task-modal { background: white; border-radius: 16px; width: 680px; max-height: calc(100vh - 100px); overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,0.3); display: flex; flex-direction: column; }
        .task-modal-header { padding: 20px 24px 16px; border-bottom: 1px solid #E5E7EB; display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; background: white; z-index: 1; }
        .task-modal-header h2 { font-size: 1.1rem; font-weight: 800; color: var(--primary); margin: 0; }
        .modal-close { background: none; border: none; cursor: pointer; font-size: 1.2rem; color: var(--text-sub); padding: 4px; border-radius: 4px; transition: background 0.2s; }
        .modal-close:hover { background: #F3F4F6; }
        .task-add-row { padding: 14px 24px; display: flex; gap: 8px; border-bottom: 1px solid #E5E7EB; }
        .task-add-input { flex: 1; padding: 9px 12px; border: 1px solid #D1D5DB; border-radius: 8px; font-family: inherit; font-size: 0.85rem; outline: none; }
        .task-add-input:focus { border-color: var(--primary); }
        .btn-add-task { padding: 9px 16px; background: var(--secondary); color: var(--primary); border: none; border-radius: 8px; font-family: inherit; font-weight: 800; font-size: 0.82rem; cursor: pointer; }
        .btn-add-task:hover { background: #b5c500; }
        .task-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; padding: 16px 24px; }
        .task-col { padding: 0 8px; }
        .task-col:first-child { padding-left: 0; }
        .task-col:last-child { padding-right: 0; }
        .task-col-title { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-sub); margin-bottom: 10px; padding-bottom: 8px; border-bottom: 2px solid #E5E7EB; }
        .task-col-title.col-todo { border-color: #D1D5DB; }
        .task-col-title.col-prog { border-color: var(--disc); color: var(--disc); }
        .task-col-title.col-done { border-color: var(--del); color: var(--del); }
        .task-item { background: #F9FAFB; border: 1px solid #E5E7EB; border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; font-size: 0.83rem; line-height: 1.4; color: #374151; }
        .task-item.status-done { opacity: 0.6; text-decoration: line-through; }
        .task-item-actions { display: flex; gap: 4px; margin-top: 8px; flex-wrap: wrap; }
        .task-move-btn { font-size: 0.68rem; font-weight: 700; padding: 2px 7px; border-radius: 4px; border: none; cursor: pointer; font-family: inherit; }
        .task-move-btn.to-todo { background: #E5E7EB; color: #374151; }
        .task-move-btn.to-prog { background: #E0F2FE; color: #0369A1; }
        .task-move-btn.to-done { background: #DCFCE7; color: #166534; }
        .task-move-btn.del { background: #FEE2E2; color: #DC2626; margin-left: auto; }

        /* ── PORTFOLIO MODAL ── */
        .portfolio-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 3000; display: none; align-items: center; justify-content: center; }
        .portfolio-modal-overlay.open { display: flex; }
        .portfolio-modal { background: white; border-radius: 16px; width: 420px; padding: 28px; box-shadow: 0 20px 60px rgba(0,0,0,0.3); }
        .portfolio-modal h3 { font-size: 1.1rem; font-weight: 800; color: var(--primary); margin: 0 0 8px 0; }
        .portfolio-modal p { font-size: 0.85rem; color: var(--text-sub); margin: 0 0 20px 0; }
        .std-option { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 2px solid #E5E7EB; border-radius: 10px; margin-bottom: 10px; cursor: pointer; transition: all 0.15s; font-size: 0.88rem; }
        .std-option:hover { border-color: var(--primary); background: #FBF5FF; }
        .std-option.selected { border-color: var(--primary); background: #F5F3FF; }
        .std-option input[type="radio"] { accent-color: var(--primary); }
        .pm-btns { display: flex; gap: 10px; margin-top: 20px; }
        .pm-cancel { flex: 1; padding: 10px; background: white; border: 2px solid #E5E7EB; border-radius: 8px; font-family: inherit; font-weight: 700; cursor: pointer; color: var(--accent); }
        .pm-confirm { flex: 2; padding: 10px; background: var(--primary); color: white; border: none; border-radius: 8px; font-family: inherit; font-weight: 700; cursor: pointer; }
        .pm-confirm:hover { background: #3d0560; }

        /* ── TOAST ── */
        .toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(80px); background: var(--primary); color: white; padding: 12px 24px; border-radius: 30px; font-size: 0.85rem; font-weight: 700; box-shadow: 0 4px 16px rgba(0,0,0,0.2); z-index: 5000; transition: transform 0.3s ease; white-space: nowrap; }
        .toast.show { transform: translateX(-50%) translateY(0); }

        strong { color: var(--text-main); }
        .tag-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
        .tag { background: #F3F4F6; border-radius: 6px; padding: 4px 10px; font-size: 0.78rem; font-weight: 600; color: var(--accent); }
        .tag.print { background: #EDE9FE; color: var(--res); }
        .tag.screen { background: #E0F2FE; color: var(--disc); }
        .tag.warning { background: #FEF3C7; color: #92400E; }
        .tag.tip { background: #DCFCE7; color: #166534; }
    </style>
</head>
<body>

<nav class="main-nav">
    <div class="nav-container">
        <a href="APEX_Professional_Dashboard.html" class="nav-logo-link">
            <img src="APEX Vertical.png" alt="Waukee APEX Logo" class="nav-logo-img">
        </a>
        <div class="nav-links">
            <span class="nav-playbook-label">🎨 DCS Playbook</span>
            <a href="APEX_Professional_Dashboard.html">Dashboard</a>
            <a href="APEX_Professional_Portfolio.html">Portfolio</a>
            <a href="Graphic Design Playbook.html" class="active">Design</a>
        </div>
    </div>
</nav>

<div class="app-shell">

    <aside class="sidebar">
        <div class="sidebar-header">
            <div class="sidebar-title">Graphic Design</div>
            <div class="sidebar-project-name" id="sidebar-project-label">New Project</div>
            <div class="project-manager">
                <select id="project-select" onchange="switchProject(this.value)"></select>
                <div class="project-actions">
                    <button type="button" class="btn-small" onclick="newProject()">+ New</button>
                    <button type="button" class="btn-small" onclick="duplicateProject()">Duplicate</button>
                    <button type="button" class="btn-small" onclick="renameProject()">Rename</button>
                    <button type="button" class="btn-small btn-danger" onclick="deleteProject()">Delete</button>
                </div>
            </div>
            <div class="progress-bar-wrap">
                <div class="progress-bar-fill" id="progress-fill" style="width:0%"></div>
            </div>
            <div class="progress-label" id="progress-label">0 of 15 steps complete</div>
        </div>

        <div class="phase-group">
            <div class="phase-label disc">◆ Phase 0: Orientation</div>
            <button class="step-btn active" id="nav-orientation" onclick="goTo('orientation')">
                <div class="step-check" id="chk-orientation"></div>
                <span class="step-name">🎨 Before You Start</span>
            </button>
        </div>

        <div class="phase-group">
            <div class="phase-label disc">◆ Phase 1: Discovery & Brief</div>
            <button class="step-btn" id="nav-setup" onclick="goTo('setup')">
                <div class="step-check" id="chk-setup"></div>
                <span class="step-name">📌 Project Setup</span>
            </button>
            <button class="step-btn" id="nav-discovery" onclick="goTo('discovery')">
                <div class="step-check" id="chk-discovery"></div>
                <span class="step-name">🔎 Client Discovery</span>
            </button>
            <button class="step-btn" id="nav-brief" onclick="goTo('brief')">
                <div class="step-check" id="chk-brief"></div>
                <span class="step-name">📋 Creative Brief</span>
            </button>
            <button class="step-btn checkpoint" id="nav-cp1a" onclick="goTo('cp1a')">
                <div class="step-check" id="chk-cp1a"></div>
                <span class="step-name">✅ Checkpoint: Brief Approved</span>
            </button>
        </div>

        <div class="phase-group">
            <div class="phase-label res">◆ Phase 2: Research & Moodboard</div>
            <button class="step-btn" id="nav-brand-assets" onclick="goTo('brand-assets')">
                <div class="step-check" id="chk-brand-assets"></div>
                <span class="step-name">🗂 Brand Asset Audit</span>
            </button>
            <button class="step-btn" id="nav-moodboard" onclick="goTo('moodboard')">
                <div class="step-check" id="chk-moodboard"></div>
                <span class="step-name">🖼 Inspiration & Moodboard</span>
            </button>
            <button class="step-btn checkpoint" id="nav-cp1" onclick="goTo('cp1')">
                <div class="step-check" id="chk-cp1"></div>
                <span class="step-name">✅ Checkpoint: Direction Approved</span>
            </button>
        </div>

        <div class="phase-group">
            <div class="phase-label des">◆ Phase 3: Design Development</div>
            <button class="step-btn checkpoint" id="nav-cp2a" onclick="goTo('cp2a')">
                <div class="step-check" id="chk-cp2a"></div>
                <span class="step-name">✅ Checkpoint: Design Kickoff</span>
            </button>
            <button class="step-btn" id="nav-concepts" onclick="goTo('concepts')">
                <div class="step-check" id="chk-concepts"></div>
                <span class="step-name">💡 Initial Concepts</span>
            </button>
            <button class="step-btn checkpoint" id="nav-cp2" onclick="goTo('cp2')">
                <div class="step-check" id="chk-cp2"></div>
                <span class="step-name">✅ Client Review: Round 1</span>
            </button>
            <button class="step-btn" id="nav-revisions" onclick="goTo('revisions')">
                <div class="step-check" id="chk-revisions"></div>
                <span class="step-name">🔁 Revisions</span>
            </button>
            <button class="step-btn checkpoint" id="nav-cp3a" onclick="goTo('cp3a')">
                <div class="step-check" id="chk-cp3a"></div>
                <span class="step-name">✅ Client Review: Round 2</span>
            </button>
        </div>

        <div class="phase-group">
            <div class="phase-label del">◆ Phase 4: Delivery</div>
            <button class="step-btn" id="nav-export" onclick="goTo('export')">
                <div class="step-check" id="chk-export"></div>
                <span class="step-name">📦 File Prep & Export</span>
            </button>
            <button class="step-btn checkpoint" id="nav-cp3" onclick="goTo('cp3')">
                <div class="step-check" id="chk-cp3"></div>
                <span class="step-name">✅ Checkpoint: Delivery & Reflection</span>
            </button>
        </div>

        <div class="sidebar-footer">
            <button class="task-board-btn" onclick="openTaskBoard()">📋 Project Task Board</button>
            <div class="task-board-note">Track design tasks, revision rounds, and client meetings locally in this playbook.</div>
        </div>
    </aside>

    <main class="main-content">

        <!-- ══ ORIENTATION ══ -->
        <div class="step-section active" id="step-orientation">
            <div class="phase-badge disc">◆ Phase 0 · Orientation</div>
            <h1 class="step-title">Before You Start</h1>
            <p class="step-subtitle">Professional graphic design is a problem-solving discipline — not an art project. Read this before you open a single design tool.</p>

            <div class="callout callout-blue">
                <span class="callout-icon">🎨</span>
                <div><strong>What professional graphic design actually means.</strong> Your job is to solve a communication problem visually. The client doesn't care how creative you think the design is — they care whether their audience received the right message, felt the right feeling, and took the right action. Every design decision should be justifiable. If you can't explain why you made a choice, it's probably the wrong choice.</div>
            </div>

            <div class="card">
                <div class="card-title">📐 The Core Design Principles</div>
                <p>These four principles underlie every effective piece of visual communication. Apply them deliberately, not instinctively.</p>
                <div class="principle-grid">
                    <div class="principle-card">
                        <div class="principle-name">Contrast</div>
                        <p>Make different things look different enough that the eye notices. Large vs. small. Dark vs. light. Bold vs. regular. Without contrast, everything fights for attention equally — and nothing wins.</p>
                    </div>
                    <div class="principle-card">
                        <div class="principle-name">Alignment</div>
                        <p>Nothing should be placed arbitrarily. Every element should be visually connected to something else on the page. Random placement looks unprofessional even when each element looks fine on its own.</p>
                    </div>
                    <div class="principle-card">
                        <div class="principle-name">Repetition</div>
                        <p>Repeat visual elements consistently — colors, fonts, spacing, shapes — to create cohesion. Repetition is what makes a series of flyers feel like they belong together.</p>
                    </div>
                    <div class="principle-card">
                        <div class="principle-name">Proximity</div>
                        <p>Related items belong together. Unrelated items belong apart. Grouping signals relationship. Distance signals separation. Using proximity correctly reduces the amount of explanatory text you need.</p>
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="card-title">📖 Key Terms You Need to Know</div>
                <p><span class="glossary-term">Hierarchy</span> — The visual arrangement that signals importance. What does the eye see first, second, third? Every design has a hierarchy whether you planned it or not. Plan it.</p>
                <p><span class="glossary-term">Grid</span> — An invisible framework of columns, rows, and margins that organizes layout consistently. Working on a grid makes alignment easier and outputs look more professional.</p>
                <p><span class="glossary-term">Whitespace (Negative Space)</span> — Empty space that is just as important as the content. Whitespace creates breathing room, focus, and a sense of quality. Cramming elements together makes designs look cheap and hard to read.</p>
                <p><span class="glossary-term">Typography</span> — Everything about how text looks. Goes far beyond choosing a font — includes size, weight, spacing, alignment, and color. Bad typography kills good design.</p>
                <p><span class="glossary-term">Kerning</span> — The spacing between specific pairs of letters. "AV" needs different spacing than "HH." Most design tools handle this automatically, but headlines at large sizes often need manual adjustment.</p>
                <p><span class="glossary-term">Leading</span> — The vertical spacing between lines of text. Too tight = hard to read. Too loose = disconnected. Body text typically works at 1.4–1.6× the font size.</p>
                <p><span class="glossary-term">Vector vs. Raster</span> — Vector images (AI, EPS, SVG) are made of mathematical paths and scale to any size without quality loss. Raster images (JPG, PNG, photos) are made of pixels and lose quality when scaled up. Always use vectors for logos.</p>
                <p><span class="glossary-term">Resolution (DPI/PPI)</span> — Print requires a minimum of 300 DPI. Web and screen can use 72–96 PPI. Designing for print at 72 DPI and then printing it is one of the most common beginner mistakes — the output looks pixelated.</p>
                <p><span class="glossary-term">CMYK vs. RGB</span> — CMYK (Cyan, Magenta, Yellow, Black) is the color mode for print. RGB (Red, Green, Blue) is for screens. Designing for print in RGB mode means the colors will shift when printed. Set your document's color mode correctly before you start designing.</p>
                <p><span class="glossary-term">Bleed</span> — Extra artwork (usually 0.125" / 3mm) that extends beyond the edge of the page. Required for print so there are no white edges after trimming. If your design goes to the edge of the page, you need bleed.</p>
            </div>

            <div class="card">
                <div class="card-title">📁 File Formats — What to Deliver and When</div>
                <table class="format-table">
                    <thead><tr><th>Format</th><th>Use</th><th>Notes</th></tr></thead>
                    <tbody>
                        <tr><td><strong>AI / EPS</strong></td><td><span class="format-badge print">Print</span></td><td>Editable vector source files. Keep these — they're your master files.</td></tr>
                        <tr><td><strong>PDF</strong></td><td><span class="format-badge both">Print + Screen</span></td><td>Primary print deliverable. Export as "Print Quality" PDF with bleed and crop marks for professional printers.</td></tr>
                        <tr><td><strong>PNG</strong></td><td><span class="format-badge screen">Screen</span></td><td>Lossless, supports transparency. Best for logos and graphics on web and social.</td></tr>
                        <tr><td><strong>JPG</strong></td><td><span class="format-badge screen">Screen</span></td><td>Compressed, no transparency. Good for photos. Avoid for logos or text-heavy graphics.</td></tr>
                        <tr><td><strong>SVG</strong></td><td><span class="format-badge screen">Screen</span></td><td>Scalable vector for web. Use when the client needs a logo or icon for a website.</td></tr>
                    </tbody>
                </table>
                <p style="margin-top:14px;">Most clients need deliverables in multiple formats. Define this in the creative brief before you start designing — retrofitting formats after the fact wastes time.</p>
            </div>

            <div class="card">
                <div class="card-title">🛠 Tools You'll Use</div>
                <p><span class="glossary-term">Adobe Illustrator</span> — The industry standard for vector graphics, logos, icons, and print-ready layouts. Every graphic designer uses it. If you haven't started learning it, start now — even 30 minutes of YouTube tutorials will help.</p>
                <p><span class="glossary-term">Adobe InDesign</span> — The industry standard for multi-page documents and layouts (brochures, booklets, programs). If your project involves more than one page, InDesign handles it better than Illustrator.</p>
                <p><span class="glossary-term">Canva</span> — Fast, accessible, and fine for many school projects. Significant limitations for print work (limited bleed control, no true CMYK). Know its ceiling before committing to it for a print deliverable.</p>
                <p><span class="glossary-term">Adobe Photoshop</span> — For photo manipulation and raster-based graphics. Not ideal for layouts or logos — use Illustrator for those.</p>
                <p><span class="glossary-term">Figma</span> — Vector design tool popular for UI/UX and screen-based work. Free, browser-based, and great for presenting concepts to clients via shareable links.</p>
            </div>

            <div class="callout callout-green">
                <span class="callout-icon">✅</span>
                <div><strong>What a finished project looks like.</strong> A complete graphic design deliverable includes: the final approved files in all agreed-upon formats, a brief document explaining the design decisions, and a client sign-off (written confirmation that the work is approved). The strongest portfolio entries also include the discovery brief, the initial concepts, and a reflection on what you'd do differently — showing your process is as valuable as showing the final product.</div>
            </div>

            <div class="step-nav">
                <div></div>
                <button class="btn-next" onclick="markCompleteAndNext('orientation','setup')">I'm Ready — Start the Project →</button>
            </div>
        </div>

        <!-- ══ SETUP ══ -->
        <div class="step-section" id="step-setup">
            <div class="phase-badge disc">◆ Phase 1 · Discovery & Brief</div>
            <h1 class="step-title">Project Setup</h1>
            <p class="step-subtitle">Name this project and define the basics before your first client meeting. Knowing the project type and deadline shapes every question you'll ask.</p>

            <div class="card">
                <div class="card-title">📋 Your Project Info</div>
                <div class="field-label">Project Name</div>
                <input class="field-input" id="proj-name" type="text" placeholder="e.g., Waukee Theatre Spring Show Flyer Series" oninput="saveState(); updateSidebarLabel();">
                <div class="field-label">Client / Organization</div>
                <input class="field-input" id="proj-client" type="text" placeholder="e.g., Waukee Community Theatre, Waukee APEX" oninput="saveState();">
                <div class="field-label">Project Type</div>
                <select class="field-input" id="proj-type" onchange="saveState();">
                    <option value="">— Select one —</option>
                    <option value="flyer-series">Flyer / Poster Series</option>
                    <option value="infographic">Infographic</option>
                    <option value="social-graphics">Social Media Graphics Package</option>
                    <option value="event-graphics">Event Graphics (program, signage, etc.)</option>
                    <option value="brand-identity">Brand Identity (logo, color, type)</option>
                    <option value="presentation">Presentation Design</option>
                    <option value="other">Other</option>
                </select>
                <div class="field-label">Final Delivery Deadline</div>
                <input class="field-input" id="proj-deadline" type="date" oninput="saveState();">
                <div class="field-label">Your Role on This Project</div>
                <input class="field-input" id="proj-role" type="text" placeholder="e.g., Lead Designer, Art Director, Production Designer" oninput="saveState();">
            </div>

            <div class="callout callout-teal">
                <span class="callout-icon">💡</span>
                <div><strong>Add this to your Task Board.</strong> Open the Task Board (sidebar button) and add your first tasks: "Schedule discovery meeting with client" and "Collect existing brand assets." Start tracking before the first meeting so nothing falls through the cracks.</div>
            </div>

            <div class="step-nav">
                <button class="btn-prev" onclick="goTo('orientation')">← Back</button>
                <button class="btn-next" onclick="markCompleteAndNext('setup','discovery')">Mark Complete & Continue →</button>
            </div>
        </div>

        <!-- ══ DISCOVERY ══ -->
        <div class="step-section" id="step-discovery">
            <div class="phase-badge disc">◆ Phase 1 · Discovery & Brief</div>
            <h1 class="step-title">Client Discovery</h1>
            <p class="step-subtitle">Your discovery meeting determines whether this project succeeds or fails. Ask the right questions and you'll design the right thing. Skip them and you'll iterate forever.</p>

            <div class="callout callout-yellow">
                <span class="callout-icon">⚠</span>
                <div><strong>Don't skip the prep.</strong> Review these questions before your discovery meeting. Arriving prepared signals professionalism. Arriving unprepared signals the opposite — and wastes the client's time.</div>
            </div>

            <div class="card">
                <div class="card-title">🔍 Questions to Ask Every Client</div>
                <ul class="question-list">
                    <li>What is the <strong>primary message</strong> this piece needs to communicate? If someone looks at it for 3 seconds, what must they take away?</li>
                    <li>Who is the <strong>audience</strong>? Age, context, where will they encounter this piece?</li>
                    <li>Where will this <strong>live</strong>? Print only, digital only, or both? What sizes? This determines color mode, resolution, and file formats from the start.</li>
                    <li>What existing <strong>brand assets</strong> must we use — logos, color codes (hex/CMYK), fonts, photography?</li>
                    <li>Are there examples of design styles you <strong>love or hate</strong>? Show me something that feels right and something that feels wrong.</li>
                    <li>What is the <strong>deadline</strong> for final delivery? Are there earlier dates for first drafts or client approvals?</li>
                    <li>What are the exact <strong>deliverables</strong> — how many pieces, what formats, what sizes?</li>
                    <li>How many <strong>revision rounds</strong> are included? Who is the decision-maker who signs off?</li>
                    <li>What does <strong>success</strong> look like? How will you know this project worked?</li>
                </ul>
            </div>

            <div class="card">
                <div class="card-title">🖨 Additional Questions for Print Projects</div>
                <ul class="question-list">
                    <li>Who is printing this? Do they have specific file requirements (bleed size, color profile, file format)?</li>
                    <li>What paper stock and finish — matte, gloss, uncoated?</li>
                    <li>How many copies are being printed? (Affects whether full-bleed design is worth the cost.)</li>
                    <li>Will it be professionally printed or printed in-house?</li>
                </ul>
            </div>

            <div class="card">
                <div class="card-title">📊 Additional Questions for Infographics</div>
                <ul class="question-list">
                    <li>What is the data source and how current is it? Has it been verified?</li>
                    <li>What is the single most important insight the infographic should communicate?</li>
                    <li>Is this for an internal presentation, external publication, or social media?</li>
                    <li>Does the client have the data in a usable format (spreadsheet, report), or will you need to gather it?</li>
                </ul>
            </div>

            <div class="callout callout-green">
                <span class="callout-icon">📧</span>
                <div><strong>After every client meeting:</strong> Send a follow-up email within 24 hours. Summarize what was discussed, confirm any decisions made, and list the next steps with owners and dates. This protects you when a client claims they asked for something different later — you have it in writing. This is Standard 1 evidence.</div>
            </div>

            <div class="artifact-zone">
                <div class="artifact-zone-title">📎 Capture an Artifact <span style="font-weight:400;color:#9CA3AF">· Maps to S1: Client Relationships</span></div>
                <div class="artifact-row">
                    <input type="text" class="artifact-link-input" id="art-discovery-link" placeholder="Link to discovery meeting notes or follow-up email..." oninput="saveState();">
                </div>
                <textarea class="artifact-note-input" id="art-discovery-note" placeholder="What are the must-haves? What surprised you about what the client wants?" oninput="saveState();"></textarea>
                <div style="display:flex;gap:8px;">
                    <button class="btn-save-artifact" onclick="saveArtifact('discovery')">Save Artifact</button>
                    <button class="btn-send-portfolio" onclick="openPortfolioModal('discovery','Client Discovery Notes','S1')">Send to Portfolio →</button>
                </div>
                <div class="artifact-saved-msg" id="art-discovery-saved">✓ Artifact saved</div>
            </div>

            <div class="step-nav">
                <button class="btn-prev" onclick="goTo('setup')">← Back</button>
                <button class="btn-next" onclick="markCompleteAndNext('discovery','brief')">Mark Complete & Continue →</button>
            </div>
        </div>

        <!-- ══ BRIEF ══ -->
        <div class="step-section" id="step-brief">
            <div class="phase-badge disc">◆ Phase 1 · Discovery & Brief</div>
            <h1 class="step-title">Creative Brief</h1>
            <p class="step-subtitle">The creative brief is a shared contract between you and the client. Build it together, get it approved in writing, and use it to resolve any disagreements later. Every field matters.</p>

            <div class="callout callout-blue">
                <span class="callout-icon">📄</span>
                <div><strong>Build the brief in a Google Doc and share it with the client before moving forward.</strong> Ask for explicit written approval — a reply email saying "looks good" counts. This document protects you when scope creep starts and the client asks for a third revision on something you never agreed to design.</div>
            </div>

            <div class="card">
                <div class="card-title">📋 Creative Brief Template</div>
                <p>Every field must be filled. If you don't have an answer, that's a question for your next client touchpoint — not a blank field in the brief.</p>
                <ul>
                    <li><strong>Project Name</strong></li>
                    <li><strong>Client / Organization</strong></li>
                    <li><strong>Designer(s)</strong></li>
                    <li><strong>First Draft Deadline</strong> / <strong>Final Delivery Deadline</strong></li>
                    <li><strong>Approval Contact</strong> — Who signs off?</li>
                    <li><strong>Primary Message</strong> — One sentence. What must the audience take away?</li>
                    <li><strong>Target Audience</strong> — Who is this for? Where will they see it?</li>
                    <li><strong>Tone / Feeling</strong> — 3 adjectives (e.g., Bold, Energetic, Professional)</li>
                    <li><strong>Where it will live</strong> — Print, digital, social, event screen, all of the above?</li>
                    <li><strong>Exact Deliverables</strong> — Every piece, every size, every format</li>
                    <li><strong>Brand Constraints</strong> — Logo files, hex color codes, required fonts</li>
                    <li><strong>Design References</strong> — Links or images the client loves</li>
                    <li><strong>What to Avoid</strong> — Colors, styles, imagery, or competitors to stay away from</li>
                    <li><strong>Revision Rounds Included</strong> — How many? What happens after that?</li>
                    <li><strong>Additional Notes</strong></li>
                </ul>
            </div>

            <div class="callout callout-yellow">
                <span class="callout-icon">🤝</span>
                <div><strong>Helping clients describe tone.</strong> When you ask "what feeling should this have?" most clients freeze. Try this instead: show them a row of 8–10 adjective cards — Energetic, Elegant, Playful, Bold, Professional, Warm, Minimal, Dramatic — and ask them to pick their top 3. Giving people a menu to choose from is always easier than asking them to generate answers from scratch.</div>
            </div>

            <div class="artifact-zone">
                <div class="artifact-zone-title">📎 Capture an Artifact <span style="font-weight:400;color:#9CA3AF">· Maps to S1: Client Relationships</span></div>
                <div class="artifact-row">
                    <input type="text" class="artifact-link-input" id="art-brief-link" placeholder="Link to completed creative brief (Google Doc)..." oninput="saveState();">
                </div>
                <textarea class="artifact-note-input" id="art-brief-note" placeholder="What changed from your initial discovery notes? Any constraints or surprises?" oninput="saveState();"></textarea>
                <div style="display:flex;gap:8px;">
                    <button class="btn-save-artifact" onclick="saveArtifact('brief')">Save Artifact</button>
                    <button class="btn-send-portfolio" onclick="openPortfolioModal('brief','Creative Brief','S1')">Send to Portfolio →</button>
                </div>
                <div class="artifact-saved-msg" id="art-brief-saved">✓ Artifact saved</div>
            </div>

            <div class="step-nav">
                <button class="btn-prev" onclick="goTo('discovery')">← Back</button>
                <button class="btn-next" onclick="markCompleteAndNext('brief','cp1a')">Mark Complete & Continue →</button>
            </div>
        </div>

        <!-- ══ CHECKPOINT 1A ══ -->
        <div class="step-section" id="step-cp1a">
            <div class="phase-badge chk">✅ Phase 1 Checkpoint</div>
            <h1 class="step-title">Checkpoint: Brief Approved</h1>
            <p class="step-subtitle">Before any research or design begins, get the brief approved by both the client and Russ. Unapproved briefs lead to rework.</p>

            <div class="checkpoint-card">
                <div class="checkpoint-mentor">
                    <div class="mentor-avatar">👨🏫</div>
                    <div class="mentor-info">
                        <div class="mentor-name">Russ Goerend</div>
                        <div class="mentor-role">Instructor · Designing Communication Solutions & Business Startup</div>
                    </div>
                </div>
                <div class="checkpoint-questions">
                    <h4>Review before moving to research</h4>
                    <ul class="checkpoint-q-list">
                        <li>Is the primary message specific and single — not a list of three things?</li>
                        <li>Are the deliverables defined with enough specificity (exact sizes, formats, number of pieces)?</li>
                        <li>Is the client's tone vocabulary specific enough to guide design decisions?</li>
                        <li>Is revision scope defined and agreed to?</li>
                        <li>Has the client confirmed the brief in writing?</li>
                    </ul>
                </div>
                <div class="field-label">Your Checkpoint Notes</div>
                <textarea class="field-input" id="cp1a-notes" placeholder="What did Russ say? What did you change in the brief?" oninput="saveState();"></textarea>
            </div>

            <div class="step-nav">
                <button class="btn-prev" onclick="goTo('brief')">← Back</button>
                <button class="btn-next" onclick="markCompleteAndNext('cp1a','brand-assets')">Checkpoint Complete — Brand Research →</button>
            </div>
        </div>

        <!-- ══ BRAND ASSETS ══ -->
        <div class="step-section" id="step-brand-assets">
            <div class="phase-badge res">◆ Phase 2 · Research & Moodboard</div>
            <h1 class="step-title">Brand Asset Audit</h1>
            <p class="step-subtitle">Gather every existing brand asset before you design a single element. Working outside the brand unknowingly is a common and avoidable mistake.</p>

            <div class="callout callout-purple">
                <span class="callout-icon">🗂</span>
                <div><strong>Ask for the brand guidelines document first.</strong> Many organizations have a brand standards guide — a PDF that defines logo usage, color codes, approved fonts, and what not to do. If one exists, it overrides any visual decisions you might otherwise make independently.</div>
            </div>

            <div class="card">
                <div class="card-title">🔍 Brand Asset Checklist</div>
                <ul class="checklist">
                    <li><input type="checkbox" id="cl-ba1" onchange="saveState();"><label for="cl-ba1">Logo files collected — ideally vector (.ai, .eps, or .svg). Never use a PNG logo from a website if vector is available.</label></li>
                    <li><input type="checkbox" id="cl-ba2" onchange="saveState();"><label for="cl-ba2">Official color codes documented — hex (for screen), CMYK (for print), Pantone (for professional printing)</label></li>
                    <li><input type="checkbox" id="cl-ba3" onchange="saveState();"><label for="cl-ba3">Font names confirmed — both display/headline font and body font</label></li>
                    <li><input type="checkbox" id="cl-ba4" onchange="saveState();"><label for="cl-ba4">Existing materials collected — past flyers, programs, social posts — to understand what's been done before</label></li>
                    <li><input type="checkbox" id="cl-ba5" onchange="saveState();"><label for="cl-ba5">Brand guidelines document reviewed (if it exists)</label></li>
                    <li><input type="checkbox" id="cl-ba6" onchange="saveState();"><label for="cl-ba6">Gaps documented — any missing assets noted and requested from client</label></li>
                </ul>
            </div>

            <div class="card">
                <div class="card-title">⚠ When There Are No Brand Guidelines</div>
                <p>Many small organizations and school clients don't have formal brand guidelines. In this case, you're building a mini style guide as part of the project — and that's actually a more valuable deliverable.</p>
                <p>Before designing, establish:</p>
                <ul>
                    <li>2–3 primary brand colors (with hex codes)</li>
                    <li>1 headline font and 1 body font</li>
                    <li>The logo in a version you can actually use (redraw it as a vector if necessary)</li>
                </ul>
                <p>Document these in a simple one-page style guide and include it in your final delivery. The client will use it for years.</p>
            </div>

            <div class="artifact-zone">
                <div class="artifact-zone-title">📎 Capture an Artifact <span style="font-weight:400;color:#9CA3AF">· Maps to S4: Technical Skills</span></div>
                <div class="artifact-row">
                    <input type="text" class="artifact-link-input" id="art-brand-assets-link" placeholder="Link to brand asset folder (logos, colors, fonts)..." oninput="saveState();">
                </div>
                <textarea class="artifact-note-input" id="art-brand-assets-note" placeholder="What brand assets do you have? What's missing? What constraints did you discover?" oninput="saveState();"></textarea>
                <div style="display:flex;gap:8px;">
                    <button class="btn-save-artifact" onclick="saveArtifact('brand-assets')">Save Artifact</button>
                    <button class="btn-send-portfolio" onclick="openPortfolioModal('brand-assets','Brand Asset Audit','S4')">Send to Portfolio →</button>
                </div>
                <div class="artifact-saved-msg" id="art-brand-assets-saved">✓ Artifact saved</div>
            </div>

            <div class="step-nav">
                <button class="btn-prev" onclick="goTo('cp1a')">← Back</button>
                <button class="btn-next" onclick="markCompleteAndNext('brand-assets','moodboard')">Mark Complete & Continue →</button>
            </div>
        </div>

        <!-- ══ MOODBOARD ══ -->
        <div class="step-section" id="step-moodboard">
            <div class="phase-badge res">◆ Phase 2 · Research & Moodboard</div>
            <h1 class="step-title">Inspiration & Moodboard</h1>
            <p class="step-subtitle">Build a visual reference before you open a design tool. A moodboard surfaces misalignments between what you imagine and what the client expects — while it's still free to change.</p>

            <div class="callout callout-yellow">
                <span class="callout-icon">⚠</span>
                <div><strong>Never design without a moodboard.</strong> Presenting a first draft without a shared visual reference is a gamble. If your instincts and the client's preferences don't match, you'll find out too late — after hours of design work. A moodboard takes 30 minutes and saves days.</div>
            </div>

            <div class="card">
                <div class="card-title">🖼 How to Build a Moodboard That Actually Works</div>
                <ol class="how-to-list">
                    <li><strong>Collect widely, filter ruthlessly.</strong> Start by gathering 20–30 visual references from Pinterest, Behance, Dribbble, or real-world photography. Then cut to the 10–15 most relevant.</li>
                    <li><strong>Pull from diverse sources.</strong> Don't only collect other flyers or infographics. Pull from photography, packaging, web design, editorial layouts, and even physical spaces. Cross-industry references produce more original work.</li>
                    <li><strong>Organize by feeling, not category.</strong> Arrange the moodboard so the combined visual effect communicates the tone — bold and energetic, or calm and minimal — rather than grouping by type of media.</li>
                    <li><strong>Annotate what matters.</strong> For each reference, note what specifically you're borrowing — the typography treatment, the color temperature, the use of whitespace, the compositional approach. Be precise.</li>
                    <li><strong>Present before designing.</strong> Share the moodboard with Russ and the client before opening a design file. A 15-minute moodboard review is the most time-efficient meeting in any design project.</li>
                </ol>
            </div>

            <div class="artifact-zone">
                <div class="artifact-zone-title">📎 Capture an Artifact <span style="font-weight:400;color:#9CA3AF">· Maps to S4: Technical Skills</span></div>
                <div class="artifact-row">
                    <input type="text" class="artifact-link-input" id="art-moodboard-link" placeholder="Link to moodboard (Canva, Pinterest board, Google Slides...)..." oninput="saveState();">
                </div>
                <textarea class="artifact-note-input" id="art-moodboard-note" placeholder="What visual direction are you pursuing? What 3 words describe the look and feel?" oninput="saveState();"></textarea>
                <div style="display:flex;gap:8px;">
                    <button class="btn-save-artifact" onclick="saveArtifact('moodboard')">Save Artifact</button>
                    <button class="btn-send-portfolio" onclick="openPortfolioModal('moodboard','Inspiration Moodboard','S4')">Send to Portfolio →</button>
                </div>
                <div class="artifact-saved-msg" id="art-moodboard-saved">✓ Artifact saved</div>
            </div>

            <div class="step-nav">
                <button class="btn-prev" onclick="goTo('brand-assets')">← Back</button>
                <button class="btn-next" onclick="markCompleteAndNext('moodboard','cp1')">Mark Complete & Continue →</button>
            </div>
        </div>

        <!-- ══ CHECKPOINT 1 ══ -->
        <div class="step-section" id="step-cp1">
            <div class="phase-badge chk">✅ Phase 2 Checkpoint</div>
            <h1 class="step-title">Checkpoint: Direction Approved</h1>
            <p class="step-subtitle">The moodboard and brand assets are ready. Before you open a design tool, get explicit approval on the visual direction. Once you start designing, changing direction is expensive.</p>

            <div class="checkpoint-card">
                <div class="checkpoint-mentor">
                    <div class="mentor-avatar">👨🏫</div>
                    <div class="mentor-info">
                        <div class="mentor-name">Russ Goerend</div>
                        <div class="mentor-role">Instructor · Designing Communication Solutions & Business Startup</div>
                    </div>
                </div>
                <div class="checkpoint-questions">
                    <h4>Review before starting design work</h4>
                    <ul class="checkpoint-q-list">
                        <li>Does the moodboard clearly reflect the tone and adjectives from the creative brief?</li>
                        <li>Have you confirmed the visual direction with the client — not just Russ?</li>
                        <li>Are all brand assets in hand and ready to use?</li>
                        <li>Is your color palette and typography plan consistent with the brand?</li>
                    </ul>
                </div>
                <div class="field-label">Your Checkpoint Notes</div>
                <textarea class="field-input" id="cp1-notes" placeholder="What did Russ confirm? What was adjusted after showing the client the moodboard?" oninput="saveState();"></textarea>
            </div>

            <div class="step-nav">
                <button class="btn-prev" onclick="goTo('moodboard')">← Back</button>
                <button class="btn-next" onclick="markCompleteAndNext('cp1','cp2a')">Checkpoint Complete — Into Design →</button>
            </div>
        </div>

        <!-- ══ CHECKPOINT 2A ══ -->
        <div class="step-section" id="step-cp2a">
            <div class="phase-badge chk">✅ Phase 3 Checkpoint</div>
            <h1 class="step-title">Checkpoint: Design Kickoff</h1>
            <p class="step-subtitle">A quick check before design begins. Confirm document setup, tools, and working approach are correct before any time is invested.</p>

            <div class="checkpoint-card">
                <div class="checkpoint-mentor">
                    <div class="mentor-avatar">👨🏫</div>
                    <div class="mentor-info">
                        <div class="mentor-name">Russ Goerend</div>
                        <div class="mentor-role">Instructor · Designing Communication Solutions & Business Startup</div>
                    </div>
                </div>
                <div class="checkpoint-questions">
                    <h4>Confirm before opening your design file</h4>
                    <ul class="checkpoint-q-list">
                        <li>Is the document set up correctly — correct dimensions, color mode (CMYK for print, RGB for screen), and bleed if required?</li>
                        <li>Are brand colors added to the swatches panel? Brand fonts installed?</li>
                        <li>Is the plan to show 2–3 distinct concept directions rather than one?</li>
                        <li>What is the timeline for the first draft presentation with the client?</li>
                    </ul>
                </div>
                <div class="field-label">Your Checkpoint Notes</div>
                <textarea class="field-input" id="cp2a-notes" placeholder="What did Russ confirm? Any last setup or planning adjustments?" oninput="saveState();"></textarea>
            </div>

            <div class="step-nav">
                <button class="btn-prev" onclick="goTo('cp1')">← Back</button>
                <button class="btn-next" onclick="markCompleteAndNext('cp2a','concepts')">Checkpoint Complete — Initial Concepts →</button>
            </div>
        </div>

        <!-- ══ CONCEPTS ══ -->
        <div class="step-section" id="step-concepts">
            <div class="phase-badge des">◆ Phase 3 · Design Development</div>
            <h1 class="step-title">Initial Concepts</h1>
            <p class="step-subtitle">Design 2–3 genuinely different directions before presenting anything. Options give clients the ability to choose — and protect you from being stuck with a direction that doesn't work.</p>

            <div class="callout callout-red">
                <span class="callout-icon">🚫</span>
                <div><strong>Never present only one concept.</strong> When a client sees a single design, they have two choices: approve it or request changes. When they see three, they engage with the differences, explain what resonates and what doesn't, and your next iteration is far more targeted. One concept is also harder to say yes to — it feels like settling.</div>
            </div>

            <div class="card">
                <div class="card-title">💡 How to Generate Genuinely Different Concepts</div>
                <p>Three concepts that are the same design in different colors are not three concepts. Each direction should represent a meaningfully different approach. Try varying:</p>
                <ul>
                    <li><strong>Visual hierarchy:</strong> One concept leads with a bold image, another leads with large typography, another with a graphic element.</li>
                    <li><strong>Layout approach:</strong> One uses a clean grid with lots of whitespace; another is densely composed; another uses a strong diagonal or asymmetric structure.</li>
                    <li><strong>Color application:</strong> One uses a light background with dark type; another inverts this; another uses a full bleed color or photo.</li>
                    <li><strong>Typography character:</strong> One concept feels modern and minimal; another feels editorial and bold; another feels warm and approachable.</li>
                </ul>
            </div>

            <div class="card">
                <div class="card-title">🎨 Design Principles Applied</div>
                <p>For each concept, confirm you've applied the four principles from Phase 0:</p>
                <ul class="checklist">
                    <li><input type="checkbox" id="cl-c1" onchange="saveState();"><label for="cl-c1"><strong>Contrast:</strong> Does the most important element stand out clearly from everything else?</label></li>
                    <li><input type="checkbox" id="cl-c2" onchange="saveState();"><label for="cl-c2"><strong>Alignment:</strong> Is every element aligned to something? No random placement anywhere?</label></li>
                    <li><input type="checkbox" id="cl-c3" onchange="saveState();"><label for="cl-c3"><strong>Repetition:</strong> Are brand colors, fonts, and spacing used consistently throughout?</label></li>
                    <li><input type="checkbox" id="cl-c4" onchange="saveState();"><label for="cl-c4"><strong>Proximity:</strong> Are related elements grouped together? Unrelated elements separated?</label></li>
                    <li><input type="checkbox" id="cl-c5" onchange="saveState();"><label for="cl-c5">Hierarchy is clear — the eye knows where to look first, second, and third</label></li>
                    <li><input type="checkbox" id="cl-c6" onchange="saveState();"><label for="cl-c6">Color mode is correct for the deliverable (CMYK for print, RGB for screen)</label></li>
                    <li><input type="checkbox" id="cl-c7" onchange="saveState();"><label for="cl-c7">Typography is legible at intended viewing distance and size</label></li>
                </ul>
            </div>

            <div class="artifact-zone">
                <div class="artifact-zone-title">📎 Capture an Artifact <span style="font-weight:400;color:#9CA3AF">· Maps to S4: Technical Skills</span></div>
                <div class="artifact-row">
                    <input type="text" class="artifact-link-input" id="art-concepts-link" placeholder="Link to initial concepts (PDF, Figma share, Google Drive...)..." oninput="saveState();">
                </div>
                <textarea class="artifact-note-input" id="art-concepts-note" placeholder="Briefly describe each concept direction and the design rationale behind each one." oninput="saveState();"></textarea>
                <div style="display:flex;gap:8px;">
                    <button class="btn-save-artifact" onclick="saveArtifact('concepts')">Save Artifact</button>
                    <button class="btn-send-portfolio" onclick="openPortfolioModal('concepts','Initial Design Concepts','S4')">Send to Portfolio →</button>
                </div>
                <div class="artifact-saved-msg" id="art-concepts-saved">✓ Artifact saved</div>
            </div>

            <div class="step-nav">
                <button class="btn-prev" onclick="goTo('cp2a')">← Back</button>
                <button class="btn-next" onclick="markCompleteAndNext('concepts','cp2')">Mark Complete & Continue →</button>
            </div>
        </div>

        <!-- ══ CLIENT REVIEW 1 ══ -->
        <div class="step-section" id="step-cp2">
            <div class="phase-badge chk">✅ Phase 3 · Client Review</div>
            <h1 class="step-title">Client Review: Round 1</h1>
            <p class="step-subtitle">Present your concepts to the client. Your job is to guide the conversation toward a clear direction — not to let them nitpick details before they've chosen a direction.</p>

            <div class="client-review-card">
                <div class="client-review-header">
                    <div class="client-avatar">🤝</div>
                    <div>
                        <div class="client-title">Client Presentation Meeting</div>
                        <div class="client-subtitle">Present all concepts in person or via shared screen. Never just send a file.</div>
                    </div>
                </div>
                <div class="client-guidance">
                    <h4>How to run this meeting</h4>
                    <ul class="client-q-list">
                        <li>Walk through each concept and explain the design thinking behind it before asking for feedback. Don't let them react before they understand the intent.</li>
                        <li>Ask: "Which direction feels most aligned with the tone we discussed?" — not "What do you think?" Specific questions get specific answers.</li>
                        <li>If they want to combine elements from multiple concepts, that's normal. Document it clearly: "We're moving forward with Concept B's layout and Concept A's color approach."</li>
                        <li>Do not make changes during the meeting. Take notes and clarify, then iterate separately.</li>
                        <li>Before ending, confirm the chosen direction in a follow-up email. Get written acknowledgement.</li>
                    </ul>
                </div>
                <div class="field-label">Client Feedback Notes</div>
                <textarea class="field-input" id="cp2-notes" placeholder="Which concept did they choose? What specific changes did they request? What's confirmed for the next iteration?" oninput="saveState();"></textarea>
            </div>

            <div class="step-nav">
                <button class="btn-prev" onclick="goTo('concepts')">← Back</button>
                <button class="btn-next" onclick="markCompleteAndNext('cp2','revisions')">Review Complete — Revisions →</button>
            </div>
        </div>

        <!-- ══ REVISIONS ══ -->
        <div class="step-section" id="step-revisions">
            <div class="phase-badge des">◆ Phase 3 · Design Development</div>
            <h1 class="step-title">Revisions</h1>
            <p class="step-subtitle">Revisions are a normal part of professional design — not a sign that something went wrong. The key is making them efficiently and keeping the client in the loop.</p>

            <div class="callout callout-blue">
                <span class="callout-icon">📋</span>
                <div><strong>Document every requested change in writing before executing it.</strong> Send a bullet-point list of the changes you understood to the client and confirm before you start revising. "I heard: change headline to red, move the logo to bottom left, use Gotham Bold for body copy — does this capture everything?" Undocumented revision requests lead to misunderstandings and unbounded scope.</div>
            </div>

            <div class="card">
                <div class="card-title">🔁 Revision Checklist</div>
                <ul class="checklist">
                    <li><input type="checkbox" id="cl-r1" onchange="saveState();"><label for="cl-r1">Requested changes documented in writing and confirmed with client before revising</label></li>
                    <li><input type="checkbox" id="cl-r2" onchange="saveState();"><label for="cl-r2">Changes made without introducing new inconsistencies (check alignment, spacing, color after every edit)</label></li>
                    <li><input type="checkbox" id="cl-r3" onchange="saveState();"><label for="cl-r3">Hierarchy and readability still intact after revisions</label></li>
                    <li><input type="checkbox" id="cl-r4" onchange="saveState();"><label for="cl-r4">If multiple pieces in a series: changes applied consistently across all pieces</label></li>
                    <li><input type="checkbox" id="cl-r5" onchange="saveState();"><label for="cl-r5">Version saved with a clear filename (ProjectName_v2.ai — never overwrite the previous version)</label></li>
                </ul>
            </div>

            <div class="callout callout-yellow">
                <span class="callout-icon">🔢</span>
                <div><strong>Track your revision rounds.</strong> If the brief included 2 revision rounds and the client is requesting a third, this is the moment to have a professional conversation about scope. Reference the brief: "Per our agreement, this project included 2 revision rounds. We've completed both. I'm happy to discuss what additional revisions would look like." This is Standard 1 client relationship management.</div>
            </div>

            <div class="artifact-zone">
                <div class="artifact-zone-title">📎 Capture an Artifact <span style="font-weight:400;color:#9CA3AF">· Maps to S1: Client Relationships · S4: Technical Skills</span></div>
                <div class="artifact-row">
                    <input type="text" class="artifact-link-input" id="art-revisions-link" placeholder="Link to revised design (v2, v3, etc.)..." oninput="saveState();">
                </div>
                <textarea class="artifact-note-input" id="art-revisions-note" placeholder="What was changed and why? How did the design improve from the first draft?" oninput="saveState();"></textarea>
                <div style="display:flex;gap:8px;">
                    <button class="btn-save-artifact" onclick="saveArtifact('revisions')">Save Artifact</button>
                    <button class="btn-send-portfolio" onclick="openPortfolioModal('revisions','Design Revisions Process','S1')">Send to Portfolio →</button>
                </div>
                <div class="artifact-saved-msg" id="art-revisions-saved">✓ Artifact saved</div>
            </div>

            <div class="step-nav">
                <button class="btn-prev" onclick="goTo('cp2')">← Back</button>
                <button class="btn-next" onclick="markCompleteAndNext('revisions','cp3a')">Mark Complete & Continue →</button>
            </div>
        </div>

        <!-- ══ CLIENT REVIEW 2 ══ -->
        <div class="step-section" id="step-cp3a">
            <div class="phase-badge chk">✅ Phase 3 · Client Review</div>
            <h1 class="step-title">Client Review: Round 2</h1>
            <p class="step-subtitle">Present the revised design. The goal of this meeting is approval — not more feedback. Come prepared to close the loop.</p>

            <div class="client-review-card">
                <div class="client-review-header">
                    <div class="client-avatar">🤝</div>
                    <div>
                        <div class="client-title">Final Design Review Meeting</div>
                        <div class="client-subtitle">Walk through every requested change and confirm it was addressed.</div>
                    </div>
                </div>
                <div class="client-guidance">
                    <h4>How to run this meeting</h4>
                    <ul class="client-q-list">
                        <li>Open by walking through the changes list: "You asked for X, Y, and Z — here's how we addressed each one." This shows responsiveness and professionalism.</li>
                        <li>If they have new feedback on something that wasn't changed, reference the brief: "That wasn't in the revision scope from our last meeting — let me note it and we can discuss whether it falls within the included rounds."</li>
                        <li>End by asking for explicit approval: "Is this ready to move to final files and delivery?" Get a yes or specific remaining changes — not a "we'll think about it."</li>
                        <li>Confirm approval in a follow-up email. This is your authorization to produce final files.</li>
                    </ul>
                </div>
                <div class="field-label">Client Feedback Notes</div>
                <textarea class="field-input" id="cp3a-notes" placeholder="Was this approved? What final adjustments remain? Have you confirmed authorization to finalize in writing?" oninput="saveState();"></textarea>
            </div>

            <div class="step-nav">
                <button class="btn-prev" onclick="goTo('revisions')">← Back</button>
                <button class="btn-next" onclick="markCompleteAndNext('cp3a','export')">Review Complete — Final Files →</button>
            </div>
        </div>

        <!-- ══ EXPORT ══ -->
        <div class="step-section" id="step-export">
            <div class="phase-badge del">◆ Phase 4 · Delivery</div>
            <h1 class="step-title">File Prep & Export</h1>
            <p class="step-subtitle">Final files are not just the design exported as a JPEG. They're every deliverable agreed to in the brief, named correctly, organized clearly, and ready for use without your involvement.</p>

            <div class="callout callout-yellow">
                <span class="callout-icon">⚠</span>
                <div><strong>Never call a file "FINAL" until the client has approved it in writing.</strong> The file is final only when they say it's final. Before that, it's a draft. Naming convention: ClientName_ProjectType_v3.pdf. After approval: ClientName_ProjectType_APPROVED.pdf.</div>
            </div>

            <div class="card">
                <div class="card-title">📦 Export Checklist</div>
                <ul class="checklist">
                    <li><input type="checkbox" id="cl-ex1" onchange="saveState();"><label for="cl-ex1">All editable source files saved (.ai, .indd, .fig) — the client may need to make changes in the future</label></li>
                    <li><input type="checkbox" id="cl-ex2" onchange="saveState();"><label for="cl-ex2">Print-ready PDF exported with bleed, crop marks, and correct color profile (CMYK)</label></li>
                    <li><input type="checkbox" id="cl-ex3" onchange="saveState();"><label for="cl-ex3">Screen/social versions exported as PNG at 2× resolution for high-density screens</label></li>
                    <li><input type="checkbox" id="cl-ex4" onchange="saveState();"><label for="cl-ex4">All files named consistently: ClientName_PieceDescription_v1.format</label></li>
                    <li><input type="checkbox" id="cl-ex5" onchange="saveState();"><label for="cl-ex5">Delivery folder organized with subfolders: /Print, /Web-Social, /Source</label></li>
                    <li><input type="checkbox" id="cl-ex6" onchange="saveState();"><label for="cl-ex6">All fonts embedded or outlined in the exported files (so the client doesn't need your fonts)</label></li>
                    <li><input type="checkbox" id="cl-ex7" onchange="saveState();"><label for="cl-ex7">Final files shared with client via Google Drive or Dropbox — not email attachment</label></li>
                </ul>
            </div>

            <div class="artifact-zone">
                <div class="artifact-zone-title">📎 Capture an Artifact <span style="font-weight:400;color:#9CA3AF">· Maps to S4: Technical Skills</span></div>
                <div class="artifact-row">
                    <input type="text" class="artifact-link-input" id="art-export-link" placeholder="Link to final delivery folder (Google Drive)..." oninput="saveState();">
                </div>
                <textarea class="artifact-note-input" id="art-export-note" placeholder="What formats are included? Did anything require troubleshooting during export?" oninput="saveState();"></textarea>
                <div style="display:flex;gap:8px;">
                    <button class="btn-save-artifact" onclick="saveArtifact('export')">Save Artifact</button>
                    <button class="btn-send-portfolio" onclick="openPortfolioModal('export','Final Design Files','S4')">Send to Portfolio →</button>
                </div>
                <div class="artifact-saved-msg" id="art-export-saved">✓ Artifact saved</div>
            </div>

            <div class="step-nav">
                <button class="btn-prev" onclick="goTo('cp3a')">← Back</button>
                <button class="btn-next" onclick="markCompleteAndNext('export','cp3')">Mark Complete & Continue →</button>
            </div>
        </div>

        <!-- ══ CHECKPOINT 3 ══ -->
        <div class="step-section" id="step-cp3">
            <div class="phase-badge chk">✅ Phase 4 Checkpoint</div>
            <h1 class="step-title">Checkpoint: Delivery & Reflection</h1>
            <p class="step-subtitle">Confirm delivery is complete and reflect on what you learned. The best designers improve their process on every project.</p>

            <div class="checkpoint-card">
                <div class="checkpoint-mentor">
                    <div class="mentor-avatar">👨🏫</div>
                    <div class="mentor-info">
                        <div class="mentor-name">Russ Goerend</div>
                        <div class="mentor-role">Instructor · Designing Communication Solutions & Business Startup</div>
                    </div>
                </div>
                <div class="checkpoint-questions">
                    <h4>Final review — walk Russ through the complete project</h4>
                    <ul class="checkpoint-q-list">
                        <li>Did the client confirm receipt and approval of the final files in writing?</li>
                        <li>Does the final design clearly solve the communication problem stated in the brief?</li>
                        <li>What design decision are you most proud of, and why?</li>
                        <li>Where did scope creep happen, and how would you prevent it next time?</li>
                        <li>What would you do differently in discovery, brief, or the design process?</li>
                    </ul>
                </div>
                <div class="field-label">Notes from your final review</div>
                <textarea class="field-input" id="cp3-notes" placeholder="What did Russ confirm? What are your main takeaways from this project?" oninput="saveState();"></textarea>
            </div>

            <div class="artifact-zone">
                <div class="artifact-zone-title">📎 Final Portfolio Artifact <span style="font-weight:400;color:#9CA3AF">· Maps to S1 · S4</span></div>
                <div class="artifact-row">
                    <input type="text" class="artifact-link-input" id="art-reflection-link" placeholder="Link to final design (best portfolio-ready version)..." oninput="saveState();">
                </div>
                <textarea class="artifact-note-input" id="art-reflection-note" placeholder="Describe the project: what was the brief, what design decisions did you make, and what was the outcome?" oninput="saveState();"></textarea>
                <div style="display:flex;gap:8px;">
                    <button class="btn-save-artifact" onclick="saveArtifact('reflection')">Save Artifact</button>
                    <button class="btn-send-portfolio" onclick="openPortfolioModal('reflection','Completed Design Project','S4')">Send to Portfolio →</button>
                </div>
                <div class="artifact-saved-msg" id="art-reflection-saved">✓ Artifact saved</div>
            </div>

            <div class="step-nav">
                <button class="btn-prev" onclick="goTo('export')">← Back</button>
            </div>
        </div>

    </main>
</div>

<!-- ── TASK BOARD MODAL ── -->
<div class="modal-overlay" id="task-modal-overlay" onclick="closeTaskBoard(event)">
    <div class="task-modal" onclick="event.stopPropagation()">
        <div class="task-modal-header">
            <h2>📋 Project Task Board</h2>
            <button class="modal-close" onclick="closeTaskBoard()">✕</button>
        </div>
        <div class="task-add-row">
            <input type="text" class="task-add-input" id="new-task-input" placeholder="Add a task..." onkeydown="if(event.key==='Enter')addTask();">
            <button class="btn-add-task" onclick="addTask()">+ Add</button>
        </div>
        <div class="task-columns">
            <div class="task-col"><div class="task-col-title col-todo">📋 To Do</div><div id="tasks-todo"></div></div>
            <div class="task-col"><div class="task-col-title col-prog">⚡ In Progress</div><div id="tasks-prog"></div></div>
            <div class="task-col"><div class="task-col-title col-done">✅ Done</div><div id="tasks-done"></div></div>
        </div>
    </div>
</div>

<!-- ── PORTFOLIO MODAL ── -->
<div class="portfolio-modal-overlay" id="portfolio-modal" onclick="closePortfolioModal(event)">
    <div class="portfolio-modal" onclick="event.stopPropagation()">
        <h3>Send to Portfolio</h3>
        <p>Which Standard does this artifact best support?</p>
        <label class="std-option" onclick="selectStd(this,'S1')"><input type="radio" name="std-pick" value="S1"> S1 — Servant Leadership & Client Relationships</label>
        <label class="std-option" onclick="selectStd(this,'S4')"><input type="radio" name="std-pick" value="S4"> S4 — Technical & Digital Skills</label>
        <label class="std-option" onclick="selectStd(this,'S5')"><input type="radio" name="std-pick" value="S5"> S5 — Professional Skills</label>
        <div class="pm-btns">
            <button class="pm-cancel" onclick="closePortfolioModal()">Cancel</button>
            <button class="pm-confirm" onclick="confirmSendToPortfolio()">Send to Portfolio →</button>
        </div>
    </div>
</div>

<div class="toast" id="toast"></div>

<script>
    const STORAGE_KEY = 'apex_dcs_design_v1';
    const PROJECT_STORE_KEY = 'apex_dcs_design_projects_v1';
    const STEPS = ['orientation','setup','discovery','brief','cp1a','brand-assets','moodboard','cp1','cp2a','concepts','cp2','revisions','cp3a','export','cp3'];
    const TOTAL = STEPS.length;
    const DEFAULT_PROJECT_ID = 'project-default';

    let projects = {};
    let currentProjectId = DEFAULT_PROJECT_ID;
    let state = createEmptyState();
    let currentStep = 'orientation';
    let pendingArtifactStep = null;
    let pendingArtifactTitle = null;
    let pendingArtifactDefaultStd = null;

    function createEmptyState() {
        return { project: { name:'', client:'', type:'', deadline:'', role:'' }, completed:[], checklistStates:{}, artifacts:{}, tasks:[], cpNotes:{} };
    }

    function loadProjectStore() {
        const raw = localStorage.getItem(PROJECT_STORE_KEY);
        if (raw) { try { projects = JSON.parse(raw) || {}; } catch(e) { projects = {}; } }
        if (!projects[currentProjectId]) {
            const keys = Object.keys(projects);
            if (keys.length) currentProjectId = keys[0];
            else projects[currentProjectId] = createEmptyState();
        }
    }

    function saveProjectStore() {
        projects[currentProjectId] = state;
        localStorage.setItem(PROJECT_STORE_KEY, JSON.stringify(projects));
        localStorage.setItem(STORAGE_KEY, JSON.stringify(state));
    }

    function renderProjectOptions() {
        const sel = document.getElementById('project-select');
        if (!sel) return;
        sel.innerHTML = '';
        Object.keys(projects).forEach(key => {
            const o = document.createElement('option');
            o.value = key; o.textContent = projects[key].project.name || 'Untitled Project'; o.selected = key === currentProjectId;
            sel.appendChild(o);
        });
    }

    function switchProject(id) {
        if (!id || id === currentProjectId) return;
        saveState(); currentProjectId = id;
        state = JSON.parse(JSON.stringify(projects[currentProjectId] || createEmptyState()));
        loadStateIntoUI(); renderProjectOptions(); updateSidebarLabel(); updateProgress(); renderTasks();
    }

    function newProject() {
        const name = prompt('Project name:', 'New Design Project');
        if (name === null) return;
        saveState();
        const id = 'project-' + Date.now();
        const ns = createEmptyState(); ns.project.name = name.trim() || 'New Design Project';
        projects[id] = ns; currentProjectId = id; state = JSON.parse(JSON.stringify(ns));
        saveProjectStore(); renderProjectOptions(); loadStateIntoUI(); updateSidebarLabel(); updateProgress(); renderTasks(); goTo('orientation');
    }

    function duplicateProject() {
        const cur = state.project.name || 'Project';
        const name = prompt('Name for the duplicate:', 'Copy of ' + cur);
        if (name === null) return;
        saveState();
        const id = 'project-' + Date.now();
        const copy = JSON.parse(JSON.stringify(state)); copy.project.name = name.trim() || 'Copy of ' + cur;
        projects[id] = copy; currentProjectId = id; state = JSON.parse(JSON.stringify(copy));
        saveProjectStore(); renderProjectOptions(); loadStateIntoUI(); updateSidebarLabel(); updateProgress(); renderTasks();
    }

    function renameProject() {
        const cur = state.project.name || 'Untitled Project';
        const name = prompt('Rename project:', cur);
        if (name === null || name.trim() === '') return;
        state.project.name = name.trim();
        const el = document.getElementById('proj-name'); if (el) el.value = name.trim();
        saveState(); renderProjectOptions(); updateSidebarLabel(); showToast('Project renamed ✓');
    }

    function deleteProject() {
        if (Object.keys(projects).length <= 1) { showToast('Cannot delete the only project'); return; }
        const name = state.project.name || 'Untitled Project';
        if (!confirm('Delete "' + name + '"? This cannot be undone.')) return;
        delete projects[currentProjectId];
        currentProjectId = Object.keys(projects)[0];
        state = JSON.parse(JSON.stringify(projects[currentProjectId]));
        saveProjectStore(); renderProjectOptions(); loadStateIntoUI(); updateSidebarLabel(); updateProgress(); renderTasks(); showToast('Project deleted');
    }

    function loadState() { loadProjectStore(); state = JSON.parse(JSON.stringify(projects[currentProjectId] || createEmptyState())); renderProjectOptions(); loadStateIntoUI(); }

    function loadStateIntoUI() {
        document.querySelectorAll('.step-btn.done').forEach(b => b.classList.remove('done'));
        document.querySelectorAll('.checklist input[type="checkbox"]').forEach(el => el.checked = false);
        const p = state.project || {};
        setValue('proj-name', p.name); setValue('proj-client', p.client); setValue('proj-type', p.type); setValue('proj-deadline', p.deadline); setValue('proj-role', p.role);
        const n = state.cpNotes || {};
        ['cp1a','cp1','cp2a','cp2','cp3a','cp3'].forEach(k => setValue(k+'-notes', n[k] || ''));
        const arts = state.artifacts || {};
        ['discovery','brief','brand-assets','moodboard','concepts','revisions','export','reflection'].forEach(k => {
            setValue('art-'+k+'-link', (arts[k]||{}).link || '');
            setValue('art-'+k+'-note', (arts[k]||{}).note || '');
        });
        const cls = state.checklistStates || {};
        Object.keys(cls).forEach(id => { const el = document.getElementById(id); if (el) el.checked = cls[id]; });
        (state.completed||[]).forEach(id => markStepDone(id));
        updateProgress(); updateSidebarLabel(); renderTasks();
    }

    function saveState() {
        state.project = { name: getVal('proj-name'), client: getVal('proj-client'), type: getVal('proj-type'), deadline: getVal('proj-deadline'), role: getVal('proj-role') };
        state.cpNotes = { cp1a: getVal('cp1a-notes'), cp1: getVal('cp1-notes'), cp2a: getVal('cp2a-notes'), cp2: getVal('cp2-notes'), cp3a: getVal('cp3a-notes'), cp3: getVal('cp3-notes') };
        ['discovery','brief','brand-assets','moodboard','concepts','revisions','export','reflection'].forEach(k => {
            if (!state.artifacts[k]) state.artifacts[k] = {};
            state.artifacts[k].link = getVal('art-'+k+'-link') || state.artifacts[k].link || '';
            state.artifacts[k].note = getVal('art-'+k+'-note') || state.artifacts[k].note || '';
        });
        document.querySelectorAll('.checklist input[type="checkbox"]').forEach(el => { state.checklistStates[el.id] = el.checked; });
        projects[currentProjectId] = state; saveProjectStore(); renderProjectOptions();
    }

    function getVal(id) { const el = document.getElementById(id); return el ? el.value : ''; }
    function setValue(id, val) { const el = document.getElementById(id); if (el && val !== undefined) el.value = val; }

    function goTo(id) {
        document.querySelector('.step-section.active')?.classList.remove('active');
        document.getElementById('step-' + id)?.classList.add('active');
        document.querySelector('.step-btn.active')?.classList.remove('active');
        document.getElementById('nav-' + id)?.classList.add('active');
        currentStep = id; window.scrollTo({ top: 0, behavior: 'smooth' });
    }

    function markCompleteAndNext(doneId, nextId) {
        if (!state.completed.includes(doneId)) state.completed.push(doneId);
        markStepDone(doneId); updateProgress(); saveState(); goTo(nextId);
    }

    function markStepDone(id) { const btn = document.getElementById('nav-' + id); if (btn) btn.classList.add('done'); }

    function updateProgress() {
        const done = (state.completed||[]).length;
        const pct = Math.round((done / TOTAL) * 100);
        const fill = document.getElementById('progress-fill'); const label = document.getElementById('progress-label');
        if (fill) fill.style.width = pct + '%';
        if (label) label.textContent = done + ' of ' + TOTAL + ' steps complete';
    }

    function updateSidebarLabel() { const label = document.getElementById('sidebar-project-label'); const name = getVal('proj-name'); if (label) label.textContent = name || 'New Project'; }

    function saveArtifact(stepId) {
        if (!state.artifacts[stepId]) state.artifacts[stepId] = {};
        state.artifacts[stepId].link = getVal('art-'+stepId+'-link');
        state.artifacts[stepId].note = getVal('art-'+stepId+'-note');
        state.artifacts[stepId].savedAt = new Date().toISOString();
        saveState();
        const msg = document.getElementById('art-'+stepId+'-saved');
        if (msg) { msg.style.display = 'block'; setTimeout(() => msg.style.display = 'none', 2500); }
        showToast('Artifact saved ✓');
    }

    function openPortfolioModal(stepId, title, defaultStd) {
        saveArtifact(stepId); pendingArtifactStep = stepId; pendingArtifactTitle = title; pendingArtifactDefaultStd = defaultStd;
        document.querySelectorAll('.std-option').forEach(o => o.classList.remove('selected'));
        document.querySelectorAll('.std-option input').forEach(r => r.checked = false);
        const target = document.querySelector(`.std-option input[value="${defaultStd}"]`);
        if (target) { target.checked = true; target.closest('.std-option').classList.add('selected'); }
        document.getElementById('portfolio-modal').classList.add('open');
    }

    function closePortfolioModal(e) { if (!e || e.target === document.getElementById('portfolio-modal')) document.getElementById('portfolio-modal').classList.remove('open'); }

    function selectStd(label) { document.querySelectorAll('.std-option').forEach(o => o.classList.remove('selected')); label.classList.add('selected'); }

    function confirmSendToPortfolio() {
        const selected = document.querySelector('.std-option input:checked');
        if (!selected) { showToast('Please select a Standard'); return; }
        const std = selected.value;
        const art = (state.artifacts[pendingArtifactStep] || {});
        const newCard = { id: 'dcs-design-'+pendingArtifactStep+'-'+Date.now(), title: '🎨 DCS Design: '+(pendingArtifactTitle||'Design Artifact'), brief: 'From Graphic Design Playbook — '+(state.project.name||'Untitled Project')+'. '+(art.note||''), link: art.link||'', reflection:'', isCustom:true };
        if (std === 'S1') {
            let s = {}; try { s = JSON.parse(localStorage.getItem('apex_std1_state_v6')||'{}'); } catch(e) {}
            if (!s.client) s.client = []; s.client.unshift(newCard); localStorage.setItem('apex_std1_state_v6', JSON.stringify(s));
        }
        if (std === 'S4' || std === 'S5') {
            let inbox = []; try { inbox = JSON.parse(localStorage.getItem('apex_dcs_artifact_inbox')||'[]'); } catch(e) {}
            inbox.unshift({...newCard, standard:std, project:state.project.name, addedAt:new Date().toISOString()});
            localStorage.setItem('apex_dcs_artifact_inbox', JSON.stringify(inbox));
        }
        if (state.artifacts[pendingArtifactStep]) state.artifacts[pendingArtifactStep].sentTo = std;
        saveState(); closePortfolioModal(); showToast('✓ Sent to '+std+' Portfolio');
    }

    function openTaskBoard() { document.getElementById('task-modal-overlay').classList.add('open'); }
    function closeTaskBoard(e) { if (!e || e.target === document.getElementById('task-modal-overlay')) document.getElementById('task-modal-overlay').classList.remove('open'); }

    function addTask() {
        const input = document.getElementById('new-task-input'); const text = input.value.trim();
        if (!text) return;
        state.tasks.push({ id:'task-'+Date.now(), text, status:'todo' }); input.value = ''; saveState(); renderTasks();
    }

    function moveTask(id, newStatus) { const task = state.tasks.find(t => t.id === id); if (task) task.status = newStatus; saveState(); renderTasks(); }
    function deleteTask(id) { state.tasks = state.tasks.filter(t => t.id !== id); saveState(); renderTasks(); }

    function renderTasks() {
        ['todo','prog','done'].forEach(status => {
            const col = document.getElementById('tasks-'+status); if (!col) return; col.innerHTML = '';
            (state.tasks||[]).filter(t => t.status === status).forEach(t => {
                const div = document.createElement('div');
                div.className = 'task-item'+(status==='done'?' status-done':'');
                div.innerHTML = `<div>${t.text}</div><div class="task-item-actions">
                    ${status!=='todo'?`<button class="task-move-btn to-todo" onclick="moveTask('${t.id}','todo')">To Do</button>`:''}
                    ${status!=='prog'?`<button class="task-move-btn to-prog" onclick="moveTask('${t.id}','prog')">In Progress</button>`:''}
                    ${status!=='done'?`<button class="task-move-btn to-done" onclick="moveTask('${t.id}','done')">Done</button>`:''}
                    <button class="task-move-btn del" onclick="deleteTask('${t.id}')">✕</button>
                </div>`;
                col.appendChild(div);
            });
        });
    }

    function showToast(msg) { const t = document.getElementById('toast'); t.textContent = msg; t.classList.add('show'); setTimeout(() => t.classList.remove('show'), 2500); }

    window.onload = loadState;
</script>
</body>
</html>