:root {
            --beige:    #F0EAD6;
            --tan:      #D2B48C;
            --tan-dk:   #b8956a;
            --rose:     #BC4749;
            --rose-dk:  #9b3a3c;
            --rose-lt: #f5e0e0;
            --teal:     #70A3A7;
            --teal-dk:  #4e7d80;
            --teal-lt:  #e8f2f3;
            --charcoal: #403B33;
            --charcoal-lt:#5a5449;
        }



        /* ══ HEADER ══ */
            .site-header {
            position:sticky; top:0; z-index:50;
            background:rgba(255,255,255,0.96); backdrop-filter:blur(14px);
            border-bottom:1px solid rgba(64,59,51,0.08);
            box-shadow:0 2px 16px rgba(64,59,51,0.07);
        }
        .header-nav { display:flex; align-items:center; gap:8px; }
        .btn-back { font-size:0.88rem; font-weight:600; color:var(--charcoal-lt); padding:8px 14px; border-radius:8px; transition:background 0.15s; }
        .btn-back:hover { background:var(--beige); }
        .btn-follow {
            background:var(--rose); color:white; font-weight:700; font-size:0.88rem;
            padding:9px 18px; border-radius:10px; box-shadow:0 3px 0 var(--rose-dk);
            transition:filter 0.15s,transform 0.1s;
        }
        .btn-follow:hover { filter:brightness(1.08); transform:translateY(-1px); }

        /* ══ HERO ══ */
        .projects-hero {
            background:var(--charcoal); padding:32px 24px 28px;
            position:relative; overflow:hidden;
        }
        .projects-hero::before {
            content:''; position:absolute; inset:0;
            background:radial-gradient(ellipse at 80% 50%,rgba(112,163,167,0.15) 0%,transparent 60%),
                        radial-gradient(ellipse at 20% 80%,rgba(188,71,73,0.1) 0%,transparent 50%);
            pointer-events:none;
        }
        /* Floating book emojis */
        .float-book { position:absolute; font-size:var(--sz,2rem); opacity:0.08; pointer-events:none;
            animation:float-b var(--dur,8s) var(--del,0s) ease-in-out infinite alternate; }
        @keyframes float-b { from{transform:translateY(0) rotate(var(--r0,-5deg))} to{transform:translateY(-18px) rotate(var(--r1,5deg))} }

        .hero-inner { max-width:760px; margin:0 auto; text-align:center; position:relative; z-index:1; }
        .hero-eyebrow { display:inline-flex; align-items:center; gap:8px; font-size:0.72rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--teal); border:1.5px solid rgba(112,163,167,0.35); border-radius:999px; padding:5px 16px; margin-bottom:20px; }
        .hero-title { font-family:'Lora',serif; font-size:clamp(2.2rem,6vw,3.6rem); font-weight:600; color:white; line-height:1.1; margin-bottom:14px; }
        .hero-sub { font-size:1rem; color:rgba(240,234,214,0.7); line-height:1.75; max-width:560px; margin:0 auto 32px; }
        .hero-stats { display:flex; gap:24px; justify-content:center; flex-wrap:wrap; }
        .hstat { text-align:center; }
        .hstat-val { font-family:'Lora',serif; font-size:2rem; font-weight:600; color:var(--teal); display:block; line-height:1; }
        .hstat-label { font-size:0.72rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:rgba(240,234,214,0.45); margin-top:4px; }

        /* ══ PROJECTS GRID ══ */
        .projects-section { padding:80px 24px; background:white; }
        .section-inner { max-width:1060px; margin:0 auto; }
            .section-tag {
            display: inline-block;
            font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em;
            text-transform: uppercase; color: white;
            background: var(--teal-dk, #4e7d80); border-radius: 999px;
            padding: 5px 16px; margin-bottom: 14px; border: none;
        }
        .section-sub { font-size:1rem; color:var(--charcoal-lt); line-height:1.7; max-width:580px; margin-bottom:48px; }

        .projects-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:22px; }

        /* Project card */
        .project-card {
            border-radius:20px; overflow:hidden;
            box-shadow:0 5px 24px rgba(64,59,51,0.09);
            transition:transform 0.25s,box-shadow 0.25s;
            display:flex; flex-direction:column;
        }
        .project-card:hover { transform:translateY(-6px); box-shadow:0 16px 40px rgba(64,59,51,0.16); }
        .project-top { padding:28px 24px 20px; position:relative; }
        .project-emoji { font-size:3rem; margin-bottom:12px; }
        .project-status-badge {
            position:absolute; top:18px; right:18px;
            font-size:0.65rem; font-weight:800; letter-spacing:0.07em; text-transform:uppercase;
            padding:4px 12px; border-radius:999px;
        }
        .badge-draft    { background:#fef3c7; color:#92400e; border:1px solid #fbbf24; }
        .badge-writing  { background:#dbeafe; color:#1e40af; border:1px solid #60a5fa; }
        .badge-finishing{ background:#dcfce7; color:#166534; border:1px solid #4ade80; }
        .badge-soon     { background:var(--rose-lt); color:var(--rose-dk); border:1px solid var(--rose); }

        .project-name { font-family:'Lora',serif; font-size:1.25rem; font-weight:600; color:var(--charcoal); margin-bottom:6px; line-height:1.25; }
        .project-type { font-size:0.72rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; margin-bottom:12px; }
        .project-divider { height:3px; margin:-1px 0 0; }
        body{ font-family:'Inter',sans-serif; background:var(--beige); color:var(--charcoal); overflow-x:hidden; }
        .project-desc { font-size:0.88rem; color:var(--charcoal-lt); line-height:1.65; margin-bottom:16px; flex:1; }

        /* Progress bar */
        .progress-wrap { margin-bottom:14px; }
        .progress-label { display:flex; justify-content:space-between; align-items:center; margin-bottom:5px; }
        .progress-name { font-size:0.7rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--charcoal-lt); }
        .progress-pct { font-size:0.72rem; font-weight:800; }
        .progress-track { height:7px; background:#f0f0f0; border-radius:999px; overflow:hidden; }
        .progress-fill { height:100%; border-radius:999px; transition:width 1s cubic-bezier(0.4,0,0.2,1); }

        .project-tags { display:flex; gap:6px; flex-wrap:wrap; }
        .project-tag { font-size:0.7rem; font-weight:600; background:var(--beige); border:1px solid var(--tan); color:var(--charcoal-lt); padding:3px 10px; border-radius:7px; }

        /* Card colour themes */
        .card-moss    .project-top    { background:linear-gradient(135deg,#e8f0e9,#d4e8d5); }
        .card-moss    .project-type   { color:#4a7a4e; }
        .card-moss    .project-divider{ background:#7a9e7e; }
        .card-moss    .progress-pct   { color:#4a7a4e; }
        .card-moss    .progress-fill  { background:linear-gradient(90deg,#7a9e7e,#4a7a4e); }

        .card-amber   .project-top    { background:linear-gradient(135deg,#fff8e1,#ffeeba); }
        .card-amber   .project-type   { color:#b45309; }
        .card-amber   .project-divider{ background:#f59e0b; }
        .card-amber   .progress-pct   { color:#b45309; }
        .card-amber   .progress-fill  { background:linear-gradient(90deg,#fbbf24,#d97706); }

        .card-sky     .project-top    { background:linear-gradient(135deg,#ddeaf4,#c5daea); }
        .card-sky     .project-type   { color:#2a5f80; }
        .card-sky     .project-divider{ background:#5b8aab; }
        .card-sky     .progress-pct   { color:#2a5f80; }
        .card-sky     .progress-fill  { background:linear-gradient(90deg,#5b8aab,#2a5f80); }

        .card-rose    .project-top    { background:linear-gradient(135deg,var(--rose-lt),#fde8e8); }
        .card-rose    .project-type   { color:var(--rose-dk); }
        .card-rose    .project-divider{ background:var(--rose); }
        .card-rose    .progress-pct   { color:var(--rose-dk); }
        .card-rose    .progress-fill  { background:linear-gradient(90deg,var(--rose),var(--rose-dk)); }

        .card-purple  .project-top    { background:linear-gradient(135deg,#ede8f5,#ddd4ed); }
        .card-purple  .project-type   { color:#6d5b8a; }
        .card-purple  .project-divider{ background:#9b8ab4; }
        .card-purple  .progress-pct   { color:#6d5b8a; }
        .card-purple  .progress-fill  { background:linear-gradient(90deg,#9b8ab4,#6d5b8a); }

        .card-teal    .project-top    { background:linear-gradient(135deg,var(--teal-lt),#d0e6e8); }
        .card-teal    .project-type   { color:var(--teal-dk); }
        .card-teal    .project-divider{ background:var(--teal); }
        .card-teal    .progress-pct   { color:var(--teal-dk); }
        .card-teal    .progress-fill  { background:linear-gradient(90deg,var(--teal),var(--teal-dk)); }

        /* ══ DEV LOG ══ */
        .devlog-section { padding:80px 24px; background:var(--beige); }
        .devlog-header { display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:16px; margin-bottom:48px; }
        .log-filter { display:flex; gap:8px; flex-wrap:wrap; }
        .log-btn { font-size:0.78rem; font-weight:700; padding:7px 16px; border-radius:10px; cursor:pointer; border:1.5px solid; transition:background 0.15s,color 0.15s; }
        .log-btn.active, .log-btn:hover { background:var(--charcoal); color:white; border-color:var(--charcoal); }
        .log-btn:not(.active) { background:white; color:var(--charcoal-lt); border-color:var(--tan); }

        .devlog-list { max-width:760px; margin:0 auto; display:flex; flex-direction:column; }
        .log-entry { display:flex; gap:0; position:relative; }
        .log-entry:last-child .log-line { display:none; }
        .log-marker { display:flex; flex-direction:column; align-items:center; flex-shrink:0; width:48px; }
        .log-dot { width:16px; height:16px; border-radius:50%; border:3px solid var(--beige); box-shadow:0 0 0 2px; z-index:1; margin-top:3px; flex-shrink:0; }
        .log-line { width:2px; flex:1; margin:4px 0; min-height:20px; }
        .log-body { padding:0 0 32px 18px; flex:1; }
        .log-tags-row { display:flex; gap:7px; flex-wrap:wrap; margin-bottom:8px; align-items:center; }
        .log-tag { font-size:0.65rem; font-weight:800; letter-spacing:0.06em; text-transform:uppercase; padding:3px 10px; border-radius:999px; }
        .log-date { font-size:0.72rem; font-weight:700; letter-spacing:0.06em; color:var(--charcoal-lt); }
        .log-card {
            background:white; border-radius:14px; padding:18px 20px;
            box-shadow:0 3px 14px rgba(64,59,51,0.07);
            border-left:3px solid;
        }
        .log-title { font-size:0.97rem; font-weight:800; color:var(--charcoal); margin-bottom:6px; }
        .log-text  { font-size:0.85rem; color:var(--charcoal-lt); line-height:1.65; }
        .log-book  { display:inline-flex; align-items:center; gap:5px; font-size:0.7rem; font-weight:700; padding:2px 10px; border-radius:6px; margin-top:8px; }

        /* Tag colour themes */
        .tag-writing { background:#dbeafe; color:#1e40af; }
        .tag-planning{ background:#fef3c7; color:#92400e; }
        .tag-research{ background:var(--teal-lt); color:var(--teal-dk); }
        .tag-design  { background:var(--rose-lt); color:var(--rose-dk); }
        .tag-milestone{ background:#dcfce7; color:#166534; }
        .tag-idea    { background:#ede8f5; color:#6d5b8a; }

        /* entry colours */
        .entry-teal   .log-dot  { background:var(--teal);     box-shadow-color:var(--teal); border-color:var(--beige); }
        .entry-teal   .log-dot  { box-shadow:0 0 0 2px var(--teal); }
        .entry-teal   .log-line { background:linear-gradient(to bottom,var(--teal),rgba(112,163,167,0.2)); }
        .entry-teal   .log-card { border-color:var(--teal); }

        .entry-rose   .log-dot  { background:var(--rose);   box-shadow:0 0 0 2px var(--rose); }
        .entry-rose   .log-line { background:linear-gradient(to bottom,var(--rose),rgba(188,71,73,0.2)); }
        .entry-rose   .log-card { border-color:var(--rose); }

        .entry-amber  .log-dot  { background:#f59e0b; box-shadow:0 0 0 2px #f59e0b; }
        .entry-amber  .log-line { background:linear-gradient(to bottom,#f59e0b,rgba(245,158,11,0.2)); }
        .entry-amber  .log-card { border-color:#f59e0b; }

        .entry-purple .log-dot  { background:#9b8ab4; box-shadow:0 0 0 2px #9b8ab4; }
        .entry-purple .log-line { background:linear-gradient(to bottom,#9b8ab4,rgba(155,138,180,0.2)); }
        .entry-purple .log-card { border-color:#9b8ab4; }

        .entry-moss   .log-dot  { background:#7a9e7e; box-shadow:0 0 0 2px #7a9e7e; }
        .entry-moss   .log-line { background:linear-gradient(to bottom,#7a9e7e,rgba(122,158,126,0.2)); }
        .entry-moss   .log-card { border-color:#7a9e7e; }

        /* ══ NEWSLETTER CTA ══ */
        .follow-section {
            padding:80px 24px; text-align:center; position:relative; overflow:hidden;
            background:linear-gradient(135deg, var(--charcoal) 0%, #2e2820 50%, var(--charcoal) 100%);
            background-size:200% 200%; animation:dark-shift 8s ease-in-out infinite;
        }
        @keyframes dark-shift { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
        .follow-section::before { content:'📚'; position:absolute; right:-10px; top:50%; transform:translateY(-50%); font-size:200px; opacity:0.05; pointer-events:none; }
        .follow-inner { max-width:620px; margin:0 auto; position:relative; z-index:1; }
        .follow-pill { display:inline-block; background:rgba(112,163,167,0.2); border:1.5px solid rgba(112,163,167,0.4); color:var(--teal); font-size:0.7rem; font-weight:800; letter-spacing:0.1em; text-transform:uppercase; padding:5px 16px; border-radius:999px; margin-bottom:18px; }
        .follow-inner h2 { font-family:'Lora',serif; font-size:clamp(1.8rem,5vw,2.8rem); font-weight:600; color:white; margin-bottom:14px; }
        .follow-inner p { font-size:1rem; color:rgba(240,234,214,0.7); line-height:1.7; margin-bottom:32px; }
        .follow-btns { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
        .btn-ig {
            display:inline-flex; align-items:center; gap:9px;
            background:var(--rose); color:white; font-weight:800; font-size:1rem;
            padding:14px 28px; border-radius:13px; box-shadow:0 4px 0 var(--rose-dk);
            transition:filter 0.15s,transform 0.12s,box-shadow 0.12s;
        }
        .btn-ig:hover { filter:brightness(1.1); transform:translateY(-2px); box-shadow:0 6px 0 var(--rose-dk); }
        .btn-hub {
            display:inline-flex; align-items:center; gap:8px;
            background:rgba(255,255,255,0.08); color:rgba(240,234,214,0.9); font-weight:700; font-size:1rem;
            padding:13px 26px; border-radius:13px; border:1.5px solid rgba(255,255,255,0.15);
            transition:background 0.2s,transform 0.12s;
        }
        .btn-hub:hover { background:rgba(255,255,255,0.15); transform:translateY(-2px); }

        /* ══ FOOTER ══ */
        footer { background:#2e2a24; padding:24px; text-align:center; color:rgba(240,234,214,0.28); font-size:0.82rem; }
        footer a { color:rgba(240,234,214,0.42); transition:color 0.15s; }
        footer a:hover { color:rgba(240,234,214,0.85); }
    
        .footer-brand{display:flex;flex-direction:column;gap:6px;}
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}.skip-link:focus{left:50%;transform:translateX(-50%);top:8px;width:auto;height:auto;padding:10px 20px;background:#BC4749;color:white;font-weight:700;font-size:.9rem;border-radius:8px;z-index:9999;text-decoration:none;white-space:nowrap}
body{background:var(--beige);color:var(--charcoal)}
.reveal{opacity:1!important;transform:none!important}