/* =========================================================
   Sakar Gurubacharya, personal site
   Emerald accent, light + dark themes
   ========================================================= */

:root,
:root[data-theme="light"] {
  --bg: #f6f7f9;
  --surface: #ffffff;
  --ink: #16181d;
  --muted: #5d6570;
  --faint: #8b929c;
  --line: #e3e6ea;
  --line-strong: #cfd4db;
  --accent: #059669;
  --accent-deep: #047857;
  --accent-soft: #ecfdf5;
  --ok: #059669;
  --sheen: rgba(255,255,255,0.35);
  --shadow-card: 0 1px 3px rgba(22,24,29,0.04);
  --shadow-lift: 0 10px 30px -10px rgba(5,150,105,0.22);
  --header-bg: rgba(246,247,249,0.82);
  --dot-color: #ccd3dc;
  --term-bg: #1a1c24;
  --term-text: #c8d1dc;
  --term-green: #34d399;
  --term-muted: #6b7280;
  --gh-0: #e4e8ec;
  --gh-1: rgba(5,150,105,0.30);
  --gh-2: rgba(5,150,105,0.55);
  --gh-3: rgba(5,150,105,0.78);
  --gh-4: rgba(5,150,105,1);
}

:root[data-theme="dark"] {
  --bg: #0c0e14;
  --surface: #151821;
  --ink: #e8ebef;
  --muted: #9aa2ae;
  --faint: #6b7280;
  --line: #242833;
  --line-strong: #333949;
  --accent: #34d399;
  --accent-deep: #6ee7b7;
  --accent-soft: rgba(52,211,153,0.12);
  --ok: #34d399;
  --sheen: rgba(255,255,255,0.18);
  --shadow-card: 0 1px 3px rgba(0,0,0,0.25);
  --shadow-lift: 0 12px 32px -12px rgba(0,0,0,0.55);
  --header-bg: rgba(12,14,20,0.75);
  --dot-color: #1e2130;
  --term-bg: #0d0f15;
  --term-text: #c8d1dc;
  --term-green: #34d399;
  --term-muted: #5a6270;
  --gh-0: #1b1f2a;
  --gh-1: rgba(52,211,153,0.28);
  --gh-2: rgba(52,211,153,0.50);
  --gh-3: rgba(52,211,153,0.75);
  --gh-4: rgba(52,211,153,1);
}

:root {
  --font-display: "Archivo", sans-serif;
  --font-body: "IBM Plex Sans", sans-serif;
  --font-mono: "IBM Plex Mono", monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}

body {
  position:relative;
  background:var(--bg);color:var(--ink);
  font-family:var(--font-body);font-size:1.0625rem;line-height:1.65;
  -webkit-font-smoothing:antialiased;
  transition:background-color .25s ease,color .25s ease;
}

.wrap{max-width:760px;margin:0 auto;padding:0 1.5rem}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
::selection{background:var(--accent-soft)}

/* ---------- scroll progress bar (horizontal, top) ---------- */
#scroll-progress{position:fixed;top:0;left:0;width:0%;height:3px;background:var(--accent);z-index:100;pointer-events:none;border-radius:0 2px 2px 0;transition:width .06s linear}


/* ---------- load-in ---------- */
.fade-item{opacity:0;transform:translateY(14px);animation:fade-up .7s cubic-bezier(.22,1,.36,1) forwards}
.hero .fade-item:nth-child(1){animation-delay:.1s}
.hero .fade-item:nth-child(2){animation-delay:.2s}
.hero .fade-item:nth-child(3){animation-delay:.3s}
.hero .fade-item:nth-child(4){animation-delay:.45s}
.hero .fade-item:nth-child(5){animation-delay:.6s}
@keyframes fade-up{to{opacity:1;transform:translateY(0)}}

/* ---------- scroll reveal ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
.reveal.revealed{opacity:1;transform:translateY(0)}

/* ---------- header ---------- */
header{padding:1.2rem 0;position:sticky;top:0;z-index:20;background:var(--header-bg);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);border-bottom:1px solid transparent;transition:border-color .3s ease,background-color .25s ease}
header.scrolled{border-bottom-color:var(--line)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.wordmark{font-family:var(--font-display);font-weight:800;font-size:1.15rem;letter-spacing:-.02em;color:var(--ink);transition:color .2s ease}
.wordmark-dot{color:var(--accent)}
.wordmark:hover{text-decoration:none;color:var(--accent)}
nav{display:flex;gap:1.35rem;flex-wrap:wrap}
nav a{color:var(--muted);font-size:.9rem;font-weight:500;position:relative;padding-bottom:2px}
nav a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:right;transition:transform .28s cubic-bezier(.22,1,.36,1)}
nav a:hover{color:var(--ink);text-decoration:none}
nav a:hover::after{transform:scaleX(1);transform-origin:left}
.header-toggles{display:flex;gap:.5rem;align-items:center}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:999px;background:var(--surface);border:1px solid var(--line);color:var(--muted);cursor:pointer;transition:color .2s ease,border-color .2s ease,transform .22s cubic-bezier(.22,1,.36,1),box-shadow .22s ease}
.icon-btn:hover{color:var(--accent);border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow-lift);text-decoration:none}
.theme-sun{display:none}.theme-moon{display:block}
[data-theme="dark"] .theme-sun{display:block}[data-theme="dark"] .theme-moon{display:none}
.lang-toggle{font-family:var(--font-mono);font-size:.78rem;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:0 .8rem;height:36px;cursor:pointer;display:inline-flex;gap:.35rem;align-items:center;color:var(--faint);transition:border-color .2s ease,box-shadow .2s ease}
.lang-toggle:hover{border-color:var(--accent);box-shadow:var(--shadow-lift)}
.lang-opt{transition:color .2s ease}
.lang-opt.active{color:var(--accent);font-weight:500}
.lang-sep{color:var(--line-strong)}

/* ---------- hero ---------- */
.hero{padding:5rem 0 4rem;position:relative}
.hero::before{content:"";position:absolute;inset:-1.6rem -20vw 0;background-image:radial-gradient(var(--dot-color) 1px,transparent 1px);background-size:26px 26px;-webkit-mask-image:radial-gradient(ellipse 70% 90% at 30% 20%,black 0%,transparent 70%);mask-image:radial-gradient(ellipse 70% 90% at 30% 20%,black 0%,transparent 70%);z-index:-1;pointer-events:none}
.status{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--font-mono);font-size:.78rem;color:var(--muted);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:.35rem .9rem;margin-bottom:1.9rem;box-shadow:var(--shadow-card)}
.status-dot{width:8px;height:8px;border-radius:50%;background:var(--ok);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(5,150,105,.35)}50%{box-shadow:0 0 0 6px rgba(5,150,105,0)}}
.hero h1{font-family:var(--font-display);font-size:clamp(2.3rem,7vw,3.4rem);font-weight:800;letter-spacing:-.035em;line-height:1.06;margin-bottom:.8rem;color:var(--ink)}
.hero .role{font-size:1.18rem;color:var(--muted);font-weight:500;margin-bottom:1.5rem}
.hero .intro{color:var(--muted);max-width:58ch}
.hero-links{display:flex;gap:1rem;margin-top:2.1rem;flex-wrap:wrap;align-items:center}
.icon-row{display:flex;gap:.55rem;align-items:center}

/* ---------- terminal ---------- */
.terminal{background:var(--term-bg);border-radius:10px;overflow:hidden;box-shadow:0 4px 24px -6px rgba(0,0,0,.4);margin-bottom:.5rem;max-width:600px}
.terminal-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;background:rgba(255,255,255,.06)}
.terminal-dot{width:12px;height:12px;border-radius:50%}
.td-red{background:#ff5f57}.td-yellow{background:#febc2e}.td-green{background:#28c840}
.terminal-title{font-family:var(--font-mono);font-size:.7rem;color:var(--term-muted);margin-left:auto;margin-right:auto;letter-spacing:.03em}
.terminal-body{padding:1rem 1.2rem 1.2rem;min-height:180px;font-family:var(--font-mono);font-size:.82rem;line-height:1.7;color:var(--term-text)}
.term-line{white-space:pre-wrap;word-break:break-word}
.term-prompt{color:var(--term-green)}
.term-cmd{color:var(--term-text)}
.term-output{color:var(--term-muted)}
.terminal-cursor{display:inline-block;width:8px;height:15px;background:var(--term-green);vertical-align:text-bottom;animation:blink 1s step-end infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
.term-hint{color:var(--term-muted);opacity:.7;margin-top:.4rem}
.term-err{color:#e0776b}
.term-output a{color:var(--term-green)}
.term-input-line{display:flex;align-items:baseline}
.term-input{flex:1;background:transparent;border:none;outline:none;color:var(--term-text);font-family:var(--font-mono);font-size:.82rem;line-height:1.7;padding:0;caret-color:var(--term-green)}
.term-input:focus{outline:none}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;font-size:.92rem;font-weight:600;border-radius:8px;padding:.62rem 1.25rem;position:relative;overflow:hidden;transition:transform .22s cubic-bezier(.22,1,.36,1),box-shadow .22s ease,border-color .22s ease,color .22s ease,background .22s ease;cursor:pointer;border:1px solid transparent;font-family:var(--font-body);line-height:1.2}
.btn:hover{text-decoration:none;transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary::after{content:"";position:absolute;top:0;left:-80%;width:55%;height:100%;background:linear-gradient(105deg,transparent,var(--sheen),transparent);transform:skewX(-20deg);transition:left .55s cubic-bezier(.22,1,.36,1)}
.btn-primary:hover{background:var(--accent-deep);box-shadow:var(--shadow-lift)}
.btn-primary:hover::after{left:130%}
.btn-ghost{background:var(--surface);color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);box-shadow:var(--shadow-lift)}

/* ---------- sections ---------- */
section{padding:3.2rem 0;border-top:1px solid var(--line)}
.hero{border-top:none}
.section-label{font-family:var(--font-mono);font-size:.75rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:1.8rem;display:flex;align-items:center;gap:.7rem}
.section-label::before{content:"";width:20px;height:1px;background:var(--accent)}

/* ---------- about ---------- */
.about p+p{margin-top:1rem}
.about .aside{color:var(--muted)}

/* ---------- career / education ---------- */
.log-entry{display:grid;grid-template-columns:110px 1fr;gap:1.5rem;padding:1.5rem 0}
.log-entry+.log-entry{border-top:1px dashed var(--line)}
.log-when{font-family:var(--font-mono);font-size:.8rem;color:var(--faint);padding-top:.35rem;white-space:nowrap}
.log-what h3{font-family:var(--font-display);font-size:1.1rem;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.log-what .org{color:var(--muted);font-size:.94rem;margin-bottom:.55rem}
.log-what .org a{color:var(--muted)}.log-what .org a:hover{color:var(--accent)}
.log-what .summary{color:var(--muted);font-size:.97rem}
.tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.9rem}
.tag{font-family:var(--font-mono);font-size:.72rem;color:var(--muted);background:var(--surface);border:1px solid var(--line);border-radius:5px;padding:.16rem .55rem;transition:border-color .2s ease,color .2s ease,transform .2s ease}
.tag:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-1px)}

/* ---------- projects ---------- */
.project{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:1.5rem 1.6rem;box-shadow:var(--shadow-card);transition:border-color .25s ease,transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s ease}
.project+.project{margin-top:1rem}
.project:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.project h3{font-family:var(--font-display);font-size:1.06rem;font-weight:700;letter-spacing:-.01em;display:flex;align-items:baseline;justify-content:space-between;gap:.7rem;flex-wrap:wrap;color:var(--ink)}
.project h3 .project-links{font-family:var(--font-mono);font-size:.75rem;font-weight:400;white-space:nowrap}
.project p{color:var(--muted);font-size:.97rem;margin-top:.45rem}

/* ---------- architecture diagram ---------- */
.arch-diagram{margin-top:.8rem;overflow-x:auto;padding:.4rem 0}
.arch-svg{width:100%;max-width:520px;height:auto;color:var(--muted)}
.arch-node{stroke:var(--accent);opacity:.6;transition:opacity .2s ease}
.arch-text{fill:var(--accent);opacity:.8}
.project:hover .arch-node{opacity:1}
.arch-group{cursor:pointer}
.arch-group rect{pointer-events:all}
.arch-group:hover .arch-node{opacity:1}
.arch-group:hover rect{stroke:var(--accent)}
.arch-tip{position:fixed;z-index:200;transform:translate(-50%,-100%);max-width:280px;background:var(--surface);color:var(--ink);border:1px solid var(--line-strong);border-radius:8px;padding:.5rem .7rem;font-family:var(--font-mono);font-size:.74rem;line-height:1.45;box-shadow:var(--shadow-lift);pointer-events:none;opacity:0;transition:opacity .15s ease}
.arch-tip.show{opacity:1}

/* ---------- github contribution graph ---------- */
.gh-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}
.gh-title{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-display);font-size:1.05rem;font-weight:700;color:var(--ink)}
.gh-title:hover{color:var(--accent);text-decoration:none}
.gh-total{font-family:var(--font-mono);font-size:.78rem;color:var(--faint)}
.gh-graph{display:grid;grid-auto-flow:column;grid-template-rows:repeat(7,12px);grid-auto-columns:12px;gap:3px;overflow-x:auto;padding:.3rem 0 .5rem}
.gh-cell{width:12px;height:12px;border-radius:2px;background:var(--gh-0)}
.gh-pad{background:transparent}
.gh-l1{background:var(--gh-1)}
.gh-l2{background:var(--gh-2)}
.gh-l3{background:var(--gh-3)}
.gh-l4{background:var(--gh-4)}
.gh-note{color:var(--muted);font-size:.9rem;margin-top:.6rem}

/* ---------- skills ---------- */
.skill-row{display:grid;grid-template-columns:150px 1fr;gap:1.5rem;padding:.75rem 0;font-size:.97rem}
.skill-row+.skill-row{border-top:1px dashed var(--line)}
.skill-cat{font-family:var(--font-mono);font-size:.76rem;color:var(--faint);padding-top:.25rem}
.skill-items{color:var(--ink)}

/* ---------- cert flip cards ---------- */
.certs{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1.8rem}
.cert-flip{display:inline-block;perspective:600px;text-decoration:none;color:var(--ink)}
.cert-flip:hover{text-decoration:none}
.cert-flip-inner{position:relative;transition:transform .5s cubic-bezier(.22,1,.36,1);transform-style:preserve-3d}
.cert-flip:hover .cert-flip-inner{transform:rotateY(180deg)}
.cert-front,.cert-back{display:inline-flex;align-items:center;gap:.6rem;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:.6rem .95rem;font-size:.87rem;font-weight:500;box-shadow:var(--shadow-card);backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:border-color .25s ease,box-shadow .25s ease}
.cert-flip:hover .cert-front,.cert-flip:hover .cert-back{border-color:var(--accent);box-shadow:var(--shadow-lift)}
.cert-back{position:absolute;inset:0;transform:rotateY(180deg);justify-content:center;flex-direction:column;gap:.2rem;text-align:center;padding:.5rem .8rem}
.cert-badge{font-family:var(--font-mono);font-size:.68rem;font-weight:500;color:var(--accent);background:var(--accent-soft);border-radius:5px;padding:.14rem .45rem;letter-spacing:.04em}
.cert-issuer{font-size:.75rem;color:var(--muted);font-weight:500}
.cert-verify{font-family:var(--font-mono);font-size:.7rem;color:var(--accent);font-weight:500}

/* ---------- contact ---------- */
.contact>p{color:var(--muted);max-width:58ch}
#contact-form{margin-top:2rem}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
#contact-form label{display:block;margin-bottom:1rem;font-size:.88rem;font-weight:500;color:var(--muted)}
#contact-form label span{display:block;margin-bottom:.35rem}
#contact-form input[type="text"],#contact-form input[type="email"],#contact-form textarea{width:100%;font-family:var(--font-body);font-size:.97rem;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:.65rem .85rem;transition:border-color .2s ease,box-shadow .2s ease;resize:vertical}
#contact-form input:focus,#contact-form textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.hidden-field{display:none}
.form-actions{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center}
#form-status{margin-top:.9rem;font-size:.9rem;font-weight:500;min-height:1.4em}
#form-status.ok{color:var(--ok)}
#form-status.err{color:#d64545}

/* ---------- lets-chat ---------- */
.chat-main{padding-bottom:3rem}
.chat-hero{padding:4rem 0 2.5rem}
.chat-hero h1{font-family:var(--font-display);font-size:clamp(2rem,5vw,2.6rem);font-weight:800;letter-spacing:-.03em;line-height:1.1;margin-bottom:1rem;color:var(--ink)}
.chat-hero .intro{color:var(--muted);max-width:58ch}
.calendly-wrap{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:.5rem;box-shadow:var(--shadow-card);overflow:hidden}
.chat-back{margin-top:2rem;font-family:var(--font-mono);font-size:.85rem}
.chat-back a{color:var(--faint)}.chat-back a:hover{color:var(--accent)}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding:2rem 1.5rem 3rem;font-family:var(--font-mono);font-size:.75rem;color:var(--faint);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
footer a{color:var(--faint)}footer a:hover{color:var(--accent)}

/* ---------- responsive ---------- */
@media(max-width:720px){.header-inner{justify-content:space-between}nav{order:3;width:100%;justify-content:center;gap:1rem;margin-top:.3rem}}
@media(max-width:600px){.log-entry,.skill-row{grid-template-columns:1fr;gap:.35rem}.form-grid{grid-template-columns:1fr;gap:0}.hero{padding-top:3.2rem}.hero-links{gap:.8rem}nav a{font-size:.85rem}.arch-svg{min-width:560px}}

/* =========================================================
   MULTI-PAGE SYSTEM (home, about, blog, contact, article)
   ========================================================= */
:root{ --font-serif:"Fraunces", Georgia, "Times New Roman", serif; }

/* dot-grid background, visible in both themes */
.grid-bg{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(var(--dot-color) 1px, transparent 1px);
  background-size:24px 24px;
  -webkit-mask-image:radial-gradient(130% 80% at 50% -8%, #000 32%, transparent 76%);
  mask-image:radial-gradient(130% 80% at 50% -8%, #000 32%, transparent 76%)}

/* shared site header + nav */
.site-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:1.2rem 0}
.site-nav{display:flex;gap:1.35rem;flex-wrap:wrap}
.site-nav a{color:var(--muted);font-size:.9rem;font-weight:500;position:relative;padding-bottom:2px}
.site-nav a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:right;transition:transform .28s cubic-bezier(.22,1,.36,1)}
.site-nav a:hover{color:var(--ink);text-decoration:none}
.site-nav a:hover::after,.site-nav a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
.site-nav a[aria-current="page"]{color:var(--ink)}

/* ---------- HOME / landing ---------- */
.home-main{min-height:calc(100vh - 84px);display:flex;align-items:center;padding:2rem 0 3rem}
/* home: lock to a single screen (no scroll); content adapts to language length */
body.home-page{height:100vh;height:100dvh;overflow:hidden;display:flex;flex-direction:column}
body.home-page .home-main{flex:1;min-height:0;padding:1rem 0 1.5rem}
body.home-page #scroll-progress{display:none}
.home-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:3.2rem;align-items:center;width:100%}
.home-left .status{margin-bottom:1.4rem}
.home-left h1{font-family:var(--font-serif);font-weight:600;font-size:clamp(2.6rem,6vw,4.1rem);line-height:1.0;letter-spacing:-.025em;color:var(--ink);margin:.2rem 0 .5rem}
.home-role{font-size:1.12rem;color:var(--muted);font-weight:500;margin-bottom:1.1rem}
.home-role b{color:var(--accent);font-weight:600}
.home-intro{color:var(--muted);max-width:44ch;margin-bottom:1.9rem}
.launch{display:flex;flex-direction:column;gap:.6rem;max-width:430px}
.launch-card{display:flex;align-items:center;gap:.9rem;padding:.8rem 1.05rem;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);box-shadow:var(--shadow-card);transition:border-color .22s ease,transform .22s cubic-bezier(.22,1,.36,1),box-shadow .22s ease}
.launch-card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow-lift);text-decoration:none}
.launch-ic{display:flex;width:36px;height:36px;flex:none;align-items:center;justify-content:center;border-radius:9px;background:var(--accent-soft);color:var(--accent)}
.launch-tx{display:flex;flex-direction:column;line-height:1.25}
.launch-tx b{font-family:var(--font-display);font-weight:700;font-size:.98rem;color:var(--ink)}
.launch-tx span{font-size:.8rem;color:var(--faint)}
.launch-arrow{margin-left:auto;color:var(--faint);transition:transform .22s ease,color .22s ease}
.launch-card:hover .launch-arrow{color:var(--accent);transform:translateX(3px)}
.home-right{align-self:stretch;display:flex;align-items:center;min-width:0}
.home-right .terminal{width:100%;max-width:none;margin:0}
.home-right .terminal-body{min-height:230px;max-height:min(56vh,380px);overflow-y:auto}
@media(max-width:860px){
  .home-hero{grid-template-columns:1fr;gap:2rem}
  .home-main{min-height:0;padding:1.5rem 0 2.5rem}
  .home-right{order:-1}
}

/* ---------- generic subpage hero ---------- */
.page-hero{padding:3rem 0 1.4rem}
.eyebrow{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);display:flex;align-items:center;gap:.6rem;margin-bottom:1rem}
.eyebrow::before{content:"";width:20px;height:1px;background:var(--accent)}
.page-hero h1{font-family:var(--font-serif);font-weight:600;font-size:clamp(2.1rem,5vw,3.1rem);letter-spacing:-.02em;line-height:1.04;color:var(--ink)}
.page-hero .lede{color:var(--muted);max-width:58ch;margin-top:1rem;font-size:1.06rem}
.jump-nav{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.6rem}
.jump-nav a{font-family:var(--font-mono);font-size:.76rem;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:.28rem .8rem;transition:border-color .2s ease,color .2s ease}
.jump-nav a:hover{border-color:var(--accent);color:var(--accent);text-decoration:none}
.jump-nav a::after{content:none;display:none}

/* top back-home link on subpages */
.back-home-top{margin:1.4rem 0 -.4rem}

/* back-home */
.back-home{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--font-mono);font-size:.82rem;color:var(--faint)}
.back-home:hover{color:var(--accent);text-decoration:none}
.page-foot{border-top:1px solid var(--line);margin-top:3rem;padding:2rem 0 1rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}

/* ---------- BLOG list ---------- */
.post-list{margin-top:.5rem;border-top:1px solid var(--line)}
.post-item{display:grid;grid-template-columns:1fr auto;column-gap:1.2rem;align-items:center;padding:1.5rem .2rem;border-bottom:1px solid var(--line);color:var(--ink);transition:padding-left .28s cubic-bezier(.22,1,.36,1),border-color .28s ease}
.post-item:hover{padding-left:.9rem;border-color:var(--accent);text-decoration:none}
.post-main{min-width:0}
.post-title{font-family:var(--font-serif);font-weight:600;font-size:1.35rem;letter-spacing:-.01em;color:var(--ink);line-height:1.2}
.post-item:hover .post-title{color:var(--accent)}
.post-meta{display:flex;align-items:center;gap:.7rem;font-family:var(--font-mono);font-size:.77rem;color:var(--faint);margin-top:.45rem}
.post-cat{color:var(--accent);background:var(--accent-soft);border-radius:5px;padding:.1rem .55rem;letter-spacing:.03em}
.post-arrow{color:var(--faint);transition:transform .22s ease,color .22s ease}
.post-item:hover .post-arrow{color:var(--accent);transform:translateX(3px)}
.blog-empty{color:var(--muted);padding:2.5rem 0}

/* ---------- BLOG article ---------- */
.article-head{padding:2.6rem 0 1rem}
.post-headline{font-family:var(--font-serif);font-weight:600;font-size:clamp(2rem,5vw,2.9rem);line-height:1.06;letter-spacing:-.02em;color:var(--ink);margin:.7rem 0}
.post-byline{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;font-family:var(--font-mono);font-size:.8rem;color:var(--faint)}
.prose{max-width:70ch;font-size:1.06rem}
.prose p{margin:1.15rem 0;color:var(--ink)}
.prose h2{font-family:var(--font-display);font-weight:700;font-size:1.45rem;letter-spacing:-.01em;margin:2.3rem 0 .8rem;color:var(--ink)}
.prose h3{font-family:var(--font-display);font-weight:600;font-size:1.15rem;margin:1.7rem 0 .6rem;color:var(--ink)}
.prose ul,.prose ol{margin:1rem 0 1.1rem 1.3rem;color:var(--ink)}
.prose li{margin:.45rem 0}
.prose code{font-family:var(--font-mono);font-size:.88em;background:var(--surface);border:1px solid var(--line);border-radius:5px;padding:.08rem .4rem}
.prose pre{background:var(--term-bg);color:var(--term-text);border-radius:10px;padding:1rem 1.2rem;overflow-x:auto;margin:1.5rem 0;font-size:.85rem;line-height:1.65}
.prose pre code{background:none;border:none;padding:0;color:inherit;font-size:.85rem}
.prose blockquote{border-left:3px solid var(--accent);padding-left:1.1rem;margin:1.5rem 0;color:var(--muted);font-style:italic}
.prose a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.prose>*:first-child{margin-top:0}

/* ---------- load-in ---------- */
.rise{opacity:0;transform:translateY(16px);animation:rise-in .7s cubic-bezier(.22,1,.36,1) forwards}
@keyframes rise-in{to{opacity:1;transform:none}}
.rise-1{animation-delay:.05s}.rise-2{animation-delay:.13s}.rise-3{animation-delay:.21s}.rise-4{animation-delay:.29s}.rise-5{animation-delay:.37s}.rise-6{animation-delay:.45s}

/* ---------- responsive ---------- */
@media(max-width:720px){.header-inner{justify-content:space-between}nav.site-nav{order:3;width:100%;justify-content:flex-start;gap:1.1rem;margin-top:.2rem}}
@media(max-width:600px){.log-entry,.skill-row{grid-template-columns:1fr;gap:.35rem}.form-grid{grid-template-columns:1fr;gap:0}.hero{padding-top:3.2rem}.hero-links{gap:.8rem}nav a{font-size:.85rem}.arch-svg{min-width:560px}.post-title{font-size:1.18rem}}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.fade-item,.rise{animation:none;opacity:1;transform:none}.reveal{transition:none;opacity:1;transform:none}.status-dot{animation:none}.btn,.project,.cert-front,.cert-back,.tag,.icon-btn,.launch-card,.post-item{transition:none}.btn-primary::after{display:none}#scroll-progress{transition:none}.terminal-cursor{animation:none}.cert-flip-inner{transition:none}}