:root{
    --primary:#f26a1b;        /* logo orange */
    --primary-dark:#d9590f;   /* button bg / hover */
    --primary-press:#bd4d0b;
    --accent2:#ff9d52;        /* light-orange gradient partner */
    --accent-soft:#ffb27a;    /* accents on navy panels */
    --navy:#16243d;           /* logo navy */
    --ink:#16243d;
    --body:#4a5876;
    --paper:#ffffff;
    --card:#ffffff;
    --light:#f3f6fc;
    --line:#dde5f0;
    --nav-bg:rgba(255,255,255,.92);
    --display:"Jost",-apple-system,"Segoe UI",sans-serif;
    --hand:"Edu TAS Beginner",var(--display);
    --sans:"Inter",-apple-system,"Segoe UI",Roboto,sans-serif;
  }
  [data-theme="dark"]{
    --primary:#ff7d33;
    --primary-dark:#f26a1b;
    --primary-press:#d9590f;
    --accent2:#ff9d52;
    --accent-soft:#ffb27a;
    --navy:#0b1626;
    --ink:#f1f5fb;
    --body:#aab8cf;
    --paper:#0e1626;
    --card:#16233b;
    --light:#16233b;
    --line:#28374f;
    --nav-bg:rgba(14,22,38,.9);
  }
  /* status text stays legible on dark surfaces */
  [data-theme="dark"] .status.live,[data-theme="dark"] .chip.status.live{color:#4fd6bb;}
  [data-theme="dark"] .status.building,[data-theme="dark"] .chip.status.building{color:#f5a94e;}
  [data-theme="dark"] .status.experiment,[data-theme="dark"] .chip.status.experiment{color:#9fb2cc;}
  html{transition:background .2s ease;}
  body,nav,.wcard,.proj-visit,.spec,.chip,.jr-tag,.fact{transition:background .2s ease,color .2s ease,border-color .2s ease;}
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;background:var(--paper);color:var(--body);
    font-family:var(--sans);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,h4{font-family:var(--display);color:var(--ink);line-height:1.15;margin:0;font-weight:600;letter-spacing:-.01em;}
  a{color:var(--primary);text-decoration:none;}
  .container{max-width:1120px;margin:0 auto;padding:0 22px;}
  .display{font-size:clamp(30px,4.6vw,50px);font-weight:700;}
  .eyebrow{font-family:var(--hand);color:var(--primary);font-size:20px;margin:0 0 8px;display:inline-block;}
  .eyebrow.on-dark{color:var(--accent-soft);}
  img{max-width:100%;display:block;}
  :focus-visible{outline:2px solid var(--primary);outline-offset:3px;}
  section{padding:74px 0;}

  /* reveal animation */
  .reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease;}
  .reveal.in{opacity:1;transform:none;}
  @media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none;}html{scroll-behavior:auto;}}

  /* ---------- nav ---------- */
  nav{position:sticky;top:0;z-index:40;background:var(--nav-bg);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);}
  .nav-in{display:flex;align-items:center;justify-content:space-between;height:72px;}
  .brand{display:inline-flex;align-items:center;}
  .brand-logo{height:60px;width:auto;display:block;}
  [data-theme="dark"] .brand-logo{background:#fff;padding:4px 8px;border-radius:9px;}
  .theme-toggle{background:none;border:1px solid var(--line);border-radius:8px;width:38px;height:34px;font-size:15px;line-height:1;cursor:pointer;color:var(--ink);display:inline-flex;align-items:center;justify-content:center;}
  .theme-toggle:hover{border-color:var(--primary);}
  .brand b{color:var(--primary);}
  .nav-links{display:flex;gap:26px;align-items:center;}
  .nav-links a{color:var(--ink);font-weight:500;font-size:15px;}
  .nav-links a:hover{color:var(--primary);}
  .nav-cta{background:var(--primary-dark);color:#fff !important;padding:9px 18px;border-radius:9px;font-weight:600;}
  .nav-cta:hover{background:var(--primary-press);}
  .burger{display:none;background:none;border:none;font-size:26px;color:var(--ink);cursor:pointer;}
  @media (max-width:820px){
    .nav-links{position:absolute;top:72px;left:0;right:0;background:var(--card);flex-direction:column;gap:0;border-bottom:1px solid var(--line);max-height:0;overflow:hidden;transition:max-height .3s;}
    .nav-links.open{max-height:340px;}
    .nav-links a{width:100%;padding:14px 22px;border-top:1px solid var(--line);}
    .nav-cta{margin:12px 22px;text-align:center;}
    .burger{display:block;}
  }

  /* ---------- hero ---------- */
  #home{padding:0;}
  .hero-grid{display:grid;grid-template-columns:340px 1fr;min-height:calc(100vh - 72px);}
  .hero-left{background:var(--navy);color:#fff;padding:64px 44px;display:flex;flex-direction:column;justify-content:center;}
  .hero-left .greet{font-family:var(--hand);color:var(--accent-soft);font-size:22px;margin-bottom:10px;}
  .hero-left h1{color:#fff;font-size:clamp(30px,3.4vw,42px);font-weight:700;}
  .hero-left .loc{margin-top:26px;color:#aac2e6;font-size:14px;letter-spacing:.02em;}
  .hero-right{padding:64px 54px;display:flex;align-items:center;background:var(--light);}
  .hero-right-in{max-width:560px;}
  .blob{
    width:190px;height:190px;flex:none;
    border-radius:63% 37% 54% 46% / 55% 48% 52% 45%;
    background:linear-gradient(135deg,var(--primary),var(--accent2));
    display:flex;align-items:center;justify-content:center;
    font-family:var(--display);font-weight:700;color:#fff;font-size:64px;
    box-shadow:0 24px 48px -18px rgba(10,95,208,.5);
  }
  .hero-intro{display:flex;gap:34px;align-items:center;flex-wrap:wrap;}
  .hero-right h2{font-size:clamp(24px,3vw,32px);margin-bottom:14px;}
  .hero-right p{margin:0 0 20px;}
  .contact-line{display:flex;align-items:center;gap:11px;margin:6px 0;color:var(--ink);font-size:15px;}
  .contact-line .ic{color:var(--primary);width:18px;text-align:center;}
  .btns{margin-top:26px;display:flex;gap:12px;flex-wrap:wrap;}
  .btn{padding:12px 24px;border-radius:10px;font-weight:600;font-size:15px;display:inline-block;}
  .btn-primary{background:var(--primary-dark);color:#fff;}
  .btn-primary:hover{background:var(--primary-press);}
  .btn-ghost{border:1.5px solid var(--line);color:var(--ink);background:var(--card);}
  .btn-ghost:hover{border-color:var(--primary);color:var(--primary);}
  @media (max-width:900px){
    .hero-grid{grid-template-columns:1fr;min-height:0;}
    .hero-left{padding:48px 26px;}
    .hero-right{padding:44px 26px;}
  }

  /* ---------- section title ---------- */
  .sec-head{max-width:640px;margin-bottom:44px;}
  .sec-head .display{margin-top:2px;}

  /* ---------- about ---------- */
  #about{background:var(--paper);}
  .about-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:54px;align-items:center;}
  .about-grid p{margin:0 0 16px;}
  .facts{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
  .fact{background:var(--light);border:1px solid var(--line);border-radius:14px;padding:22px 20px;}
  .fact .n{font-family:var(--display);font-weight:700;font-size:34px;color:var(--primary);line-height:1;}
  .fact .l{font-size:13.5px;margin-top:6px;color:var(--body);}
  @media (max-width:820px){.about-grid{grid-template-columns:1fr;gap:32px;}}

  /* ---------- what I do ---------- */
  #work{background:var(--light);}
  .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
  .wcard{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:30px 26px;transition:transform .18s,box-shadow .18s;}
  .wcard:hover{transform:translateY(-4px);box-shadow:0 18px 40px -20px rgba(22,36,61,.35);}
  .wcard .ico{width:54px;height:54px;border-radius:13px;background:var(--light);display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:18px;}
  .wcard h4{font-size:20px;margin-bottom:10px;}
  .wcard p{margin:0;font-size:15px;}
  @media (max-width:820px){.cards{grid-template-columns:1fr;}}

  /* ---------- projects (Pigra list style) ---------- */
  #projects{background:var(--paper);}
  .proj{padding:34px 0;border-top:1px solid var(--line);}
  .proj:last-child{border-bottom:1px solid var(--line);}
  .proj-row{display:grid;grid-template-columns:1fr 168px auto;gap:30px;align-items:center;}
  .proj-cat{font-family:var(--hand);color:var(--primary);font-size:18px;margin-bottom:4px;}
  .proj h3{font-size:clamp(22px,2.6vw,30px);}
  .proj .sub{margin:8px 0 0;font-size:15.5px;}
  .proj .status{display:inline-block;margin-top:12px;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;font-family:var(--display);padding:4px 11px;border-radius:999px;}
  .status.live{color:#0e7a6b;background:rgba(14,122,107,.1);}
  .status.building{color:#b5661c;background:rgba(181,102,28,.12);}
  .status.experiment{color:#5a6b85;background:rgba(90,107,133,.12);}
  .proj-thumb{
    width:168px;height:118px;border-radius:24% 76% 40% 60% / 55% 40% 60% 45%;
    display:flex;align-items:center;justify-content:center;
    font-family:var(--display);font-weight:700;color:#fff;font-size:40px;
  }

  /* favicon tile inside project card thumb */
  .proj-thumb{position:relative;}
  .proj-thumb::after{content:attr(data-mono);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:700;color:#fff;font-size:40px;}
  .thumb-ico{position:relative;z-index:1;width:66px;height:66px;object-fit:contain;background:#fff;border-radius:14px;padding:9px;box-shadow:0 6px 16px -8px rgba(0,0,0,.4);}

  .proj-visit{
    width:52px;height:52px;flex:none;border-radius:50%;background:var(--light);border:1px solid var(--line);
    display:flex;align-items:center;justify-content:center;color:var(--primary);font-size:20px;
    transition:background .16s,color .16s,transform .16s;
  }
  .proj-visit:hover{background:var(--primary);color:#fff;transform:rotate(-8deg);}
  .proj-visit.disabled{color:#b6c2d6;cursor:default;}
  .proj-visit.disabled:hover{background:var(--light);color:#b6c2d6;transform:none;}
  @media (max-width:760px){
    .proj-row{grid-template-columns:1fr auto;}
    .proj-thumb{display:none;}
  }

  /* ---------- contact ---------- */
  #contact{background:var(--navy);color:#fff;}
  #contact .display,#contact h2,#contact h4{color:#fff;}
  .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;}
  .contact-grid p{color:#c2d3ec;}
  .cc-line{display:flex;align-items:center;gap:14px;margin:14px 0;font-size:16px;color:#eaf1fb;}
  .cc-line .ic{width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;color:var(--accent-soft);font-size:18px;flex:none;}
  .cc-line a{color:#eaf1fb;}
  .cc-line a:hover{color:var(--accent-soft);}
  .socials{display:flex;gap:12px;margin-top:24px;}
  .socials a{width:46px;height:46px;border-radius:12px;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;color:#fff;font-size:18px;transition:background .16s;}
  .socials a:hover{background:var(--primary);}
  @media (max-width:820px){.contact-grid{grid-template-columns:1fr;gap:30px;}}

  footer{background:#0f1a2e;color:#8ea3c4;text-align:center;padding:26px 0;font-size:14px;}
  footer a{color:#aac2e6;}

  /* ============================================================
     PROJECT DETAIL PAGES
     ============================================================ */
  .back-link{display:inline-flex;align-items:center;gap:7px;font-family:var(--display);font-weight:500;font-size:14px;color:var(--body);margin-bottom:18px;}
  .back-link:hover{color:var(--primary);}

  /* detail hero */
  .pd-hero{background:var(--light);padding:56px 0 52px;border-bottom:1px solid var(--line);}
  .pd-hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;}
  .pd-cat{font-family:var(--hand);color:var(--primary);font-size:20px;margin-bottom:6px;}
  .pd-hero h1{font-size:clamp(30px,4.4vw,48px);font-weight:700;margin-bottom:14px;}
  .pd-lead{font-size:18px;color:var(--body);margin:0 0 22px;}
  .pd-meta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:24px;}
  .chip{font-family:var(--display);font-size:12.5px;font-weight:600;letter-spacing:.03em;padding:5px 12px;border-radius:999px;background:var(--card);border:1px solid var(--line);color:var(--ink);}
  .chip.status.live{color:#0e7a6b;background:rgba(14,122,107,.1);border-color:transparent;}
  .chip.status.building{color:#b5661c;background:rgba(181,102,28,.12);border-color:transparent;}
  .chip.status.experiment{color:#5a6b85;background:rgba(90,107,133,.12);border-color:transparent;}
  .pd-hero-img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:26% 74% 62% 38% / 40% 45% 55% 60%;box-shadow:0 26px 54px -22px rgba(22,36,61,.4);background:linear-gradient(135deg,var(--primary),var(--accent2));}
  @media (max-width:820px){.pd-hero-grid{grid-template-columns:1fr;gap:28px;}}

  /* content blocks */
  .pd-body{padding:60px 0;}
  .pd-cols{display:grid;grid-template-columns:1.5fr 1fr;gap:52px;align-items:start;}
  .pd-cols h2{font-size:26px;margin:0 0 14px;}
  .pd-cols h2:not(:first-child){margin-top:34px;}
  .pd-cols p{margin:0 0 15px;}
  .pd-cols ul{margin:0 0 15px;padding:0;list-style:none;}
  .pd-cols ul li{position:relative;padding-left:26px;margin-bottom:11px;}
  .pd-cols ul li::before{content:"→";position:absolute;left:0;color:var(--primary);font-weight:700;}
  /* sidebar spec card */
  .spec{background:var(--light);border:1px solid var(--line);border-radius:16px;padding:26px 24px;position:sticky;top:84px;}
  .spec h3{font-family:var(--hand);color:var(--primary);font-size:19px;font-weight:600;margin:0 0 16px;}
  .spec dl{margin:0;}
  .spec dt{font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--body);margin-top:16px;}
  .spec dt:first-child{margin-top:0;}
  .spec dd{margin:3px 0 0;color:var(--ink);font-size:15px;}
  .spec .btn{margin-top:22px;width:100%;text-align:center;}
  @media (max-width:820px){.pd-cols{grid-template-columns:1fr;gap:30px;}.spec{position:static;}}

  /* gallery */
  .pd-gallery{padding:8px 0 64px;}
  .gal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
  .gal-grid img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:14px;border:1px solid var(--line);background:var(--light);}
  @media (max-width:760px){.gal-grid{grid-template-columns:1fr;}}

  /* next-project strip */
  .pd-next{background:var(--navy);color:#fff;padding:44px 0;text-align:center;}
  .pd-next .display{color:#fff;margin-bottom:18px;font-size:28px;}
  .pd-next .btns{justify-content:center;}

  /* home thumb link wrapper */
  .proj-thumb-link{display:block;text-decoration:none;}

  /* ============================================================
     JOURNAL
     ============================================================ */
  .jr-wrap{padding:54px 0 70px;}
  .jr-list{max-width:720px;margin:0 auto;}
  .jr-entry{position:relative;padding:0 0 34px 28px;margin-bottom:34px;border-left:2px solid var(--line);}
  .jr-entry:last-child{margin-bottom:0;padding-bottom:0;}
  .jr-entry::before{content:"";position:absolute;left:-8px;top:5px;width:14px;height:14px;border-radius:50%;background:var(--primary);border:3px solid var(--paper);box-shadow:0 0 0 1px var(--line);}
  .jr-date{font-family:var(--hand);color:var(--primary);font-size:18px;margin-bottom:4px;}
  .jr-entry h2{font-size:24px;margin:0 0 10px;}
  .jr-entry p{margin:0;color:var(--body);}
  .jr-tags{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 12px;}
  .jr-tag{font-family:var(--display);font-size:11.5px;font-weight:600;letter-spacing:.04em;color:var(--body);background:var(--light);border:1px solid var(--line);border-radius:999px;padding:3px 10px;}

  @media (max-width:820px){.theme-toggle{margin:12px 22px;}}
  .jr-status{color:var(--body);font-family:var(--display);}

  /* PWA install button in nav */
  .nav-install{background:var(--primary-dark);color:#fff;border:none;border-radius:9px;padding:8px 14px;font-family:var(--display);font-weight:600;font-size:14px;cursor:pointer;letter-spacing:.01em;}
  .nav-install:hover{background:var(--primary-press);}
  @media (max-width:820px){.nav-install{margin:0 22px 14px;}}

  /* PWA install modal (timed, centered) */
  .pwa-modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(10,18,30,.55);backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:opacity .25s ease;}
  .pwa-modal.show{opacity:1;visibility:visible;}
  .pwa-card{background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:18px;max-width:360px;width:100%;padding:32px 26px 22px;text-align:center;position:relative;box-shadow:0 30px 70px -20px rgba(0,0,0,.55);transform:translateY(12px) scale(.98);transition:transform .25s ease;}
  .pwa-modal.show .pwa-card{transform:none;}
  .pwa-ico{width:66px;height:66px;border-radius:15px;background:#fff;padding:8px;margin:0 auto 14px;display:block;box-shadow:0 8px 20px -8px rgba(0,0,0,.35);}
  .pwa-card h3{font-family:var(--display);font-size:21px;margin:0 0 8px;}
  .pwa-card p{font-size:14.5px;color:var(--body);margin:0 0 20px;line-height:1.5;}
  .pwa-go{background:var(--primary-dark);color:#fff;border:none;border-radius:10px;padding:12px 22px;font-family:var(--display);font-weight:600;font-size:15px;cursor:pointer;width:100%;}
  .pwa-go:hover{background:var(--primary-press);}
  .pwa-later{background:none;border:none;color:var(--body);font-size:13px;cursor:pointer;margin-top:12px;font-family:var(--sans);}
  .pwa-later:hover{color:var(--primary);}
  .pwa-x{position:absolute;top:9px;right:12px;background:none;border:none;color:var(--body);font-size:23px;line-height:1;cursor:pointer;}
  @media (prefers-reduced-motion:reduce){.pwa-modal,.pwa-card{transition:none;}}