/* Buttons */
.btn{font:inherit;font-weight:600;font-size:.98rem;display:inline-flex;align-items:center;gap:.55rem;padding:.8rem 1.35rem;border-radius:999px;border:1px solid var(--border-strong);background:var(--surface);color:var(--text);cursor:pointer;transition:transform .2s var(--ease),box-shadow .25s,border-color .25s;background-image:none}
.btn:hover{transform:translateY(-2px);border-color:var(--accent);box-shadow:0 8px 28px -10px var(--glow)}
.btn:active{transform:translateY(0) scale(.98)}
.btn-primary{background:var(--accent-grad);color:var(--accent-ink);border-color:transparent}
.btn-primary:hover{box-shadow:0 10px 34px -8px var(--glow);border-color:transparent}
.btn svg{width:18px;height:18px}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s-3)}
.btn-stack{flex-direction:column;align-items:stretch}
.btn-stack .btn{justify-content:center;text-align:center}.card h3+.btn-row{margin-top:var(--s-4)}

/* Badges and tags */
.badge{font-family:var(--font-mono);font-size:.76rem;letter-spacing:.02em;padding:.28rem .7rem;border-radius:999px;border:1px solid var(--border-strong);color:var(--text-dim);display:inline-block}
.badge--ok{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 45%,transparent)}
.badge--warm{color:var(--warm);border-color:color-mix(in srgb,var(--warm) 45%,transparent)}
.tags{display:flex;flex-wrap:wrap;gap:.45rem;list-style:none;padding:0;margin:0 0 var(--s-4)}
.tags li{margin:0;font-family:var(--font-mono);font-size:.8rem;padding:.3rem .7rem;border-radius:8px;background:var(--surface-2);border:1px solid var(--border);color:var(--text-dim)}
.meta-row{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:var(--s-4)}

/* Cards */
.card{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--s-5);box-shadow:var(--shadow);transition:transform .35s var(--ease),border-color .3s,box-shadow .3s;display:flex;flex-direction:column;min-width:0}
.card::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:var(--accent-grad);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .3s;pointer-events:none}
a.card{color:inherit;background-image:none}
a.card:hover{transform:translateY(-4px);box-shadow:0 22px 44px -22px var(--glow)}
a.card:hover::before{opacity:1}
.card h3{margin-bottom:var(--s-2)}
.card p{color:var(--text-dim)}
.card .more{margin-top:auto;font-family:var(--font-mono);font-size:.85rem;color:var(--link)}
.card--feature{background:radial-gradient(500px 240px at 0% 0%,var(--glow),transparent 70%),var(--surface)}

/* Media / placeholders */
.media{position:relative;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--border);background:var(--surface-2);aspect-ratio:16/9;margin:0}
.media img,.media video{width:100%;height:100%;object-fit:cover}
.media.ratio-4-3{aspect-ratio:4/3}
.media.ratio-3-2{aspect-ratio:3/2}
.placeholder{display:grid;place-items:center;text-align:center;padding:1rem;color:var(--text-faint);font-family:var(--font-mono);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;height:100%;width:100%;background:radial-gradient(circle at 30% 20%,var(--glow),transparent 60%),radial-gradient(circle at 80% 90%,var(--glow-2),transparent 60%),linear-gradient(var(--border) 1px,transparent 1px) 0 0/28px 28px,linear-gradient(90deg,var(--border) 1px,transparent 1px) 0 0/28px 28px,var(--surface-2)}
figcaption{font-size:.85rem;color:var(--text-faint);margin-top:.5rem}
.gallery{display:grid;gap:var(--s-5);grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}

/* Bento */
.bento{display:grid;gap:var(--s-4);grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.stat{display:flex;flex-direction:column;gap:.35rem}
.stat .num{font-family:var(--font-display);font-size:clamp(2.2rem,5vw,3.2rem);font-weight:700;letter-spacing:-.03em;line-height:1;background:var(--accent-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat .lbl{color:var(--text-dim);font-size:.95rem}

/* Filter chips */
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:var(--s-6)}
.chip{font:inherit;font-size:.88rem;padding:.5rem 1rem;border-radius:999px;border:1px solid var(--border-strong);background:transparent;color:var(--text-dim);cursor:pointer;transition:all .2s}
.chip:hover{color:var(--text);border-color:var(--accent)}
.chip[aria-pressed="true"]{background:var(--accent-grad);color:var(--accent-ink);border-color:transparent;font-weight:600}
[data-project][hidden]{display:none}

/* Timeline */
.timeline{list-style:none;padding:0;margin:0;border-left:1px solid var(--border-strong)}
.timeline li{position:relative;padding:0 0 var(--s-6) var(--s-5);margin:0}
.timeline li::before{content:"";position:absolute;left:-5px;top:.55rem;width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent)}
.timeline .when{font-family:var(--font-mono);font-size:.8rem;color:var(--accent);display:block;margin-bottom:.2rem}
.timeline h3{margin-bottom:.25rem}
.timeline p{color:var(--text-dim);margin:0}

/* Facts / callouts */
.facts{display:grid;gap:0;margin:0 0 var(--s-5)}
.facts div{display:grid;grid-template-columns:minmax(120px,max-content) 1fr;gap:var(--s-4);padding:.7rem 0;border-bottom:1px solid var(--border)}
.facts dt{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint);padding-top:.15rem}
.facts dd{margin:0;color:var(--text-dim)}
@media(max-width:560px){.facts div{grid-template-columns:1fr;gap:.2rem}}
.callout{border:1px solid color-mix(in srgb,var(--warm) 40%,transparent);background:color-mix(in srgb,var(--warm) 8%,transparent);border-radius:var(--r-md);padding:var(--s-4) var(--s-5);margin:var(--s-5) 0}
.callout p{margin:0;color:var(--text-dim)}
.callout strong{color:var(--warm)}
.plain{border-left:3px solid var(--accent);padding:.2rem 0 .2rem var(--s-4);font-size:1.15rem;color:var(--text);margin:0 0 var(--s-5);max-width:var(--prose)}

/* Avatar */
.avatar{width:112px;height:112px;border-radius:30px;background:var(--accent-grad);display:grid;place-items:center;font-family:var(--font-display);font-size:3.2rem;font-weight:700;color:var(--accent-ink);box-shadow:0 0 50px var(--glow)}

/* Diagrams */
.diagram{border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);padding:var(--s-4)}
.diagram svg{width:100%;height:auto;display:block}
.diagram .d-box{fill:var(--surface-2);stroke:var(--border-strong);stroke-width:1.2}
.diagram .d-box.hl{stroke:var(--accent)}
.diagram text{fill:var(--text);font-family:var(--font-mono);font-size:12px}
.diagram .d-sub{fill:var(--text-faint);font-size:10px}
.diagram .d-line{stroke:var(--text-faint);stroke-width:1.4;fill:none;stroke-dasharray:4 5;animation:dash 1.6s linear infinite}
html[data-motion="off"] .diagram .d-line{animation:none}
@keyframes dash{to{stroke-dashoffset:-18}}

/* Video slot: one line of text on the left, the standard YouTube player on the right */
.video-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:clamp(1.2rem,3vw,2.5rem);align-items:center}
.video-split h2{margin-bottom:.6rem}
.video-split p{margin:0;color:var(--text-2,inherit)}
.video-slot iframe{width:100%;height:100%;border:0;display:block}
@media(max-width:760px){.video-split{grid-template-columns:1fr}}


/* Skills / contact lists */
.skill-group{margin-bottom:var(--s-6)}
.skill-group h2{font-size:1.05rem;font-family:var(--font-mono);letter-spacing:.05em;color:var(--accent);margin-bottom:var(--s-3);font-weight:500}
/* Chips (skills, coursework): subtle accent outline on hover */
.tags li{cursor:default;transition:border-color .2s,color .2s}
@media (hover:hover){
  .tags li:hover{border-color:var(--accent);color:var(--text)}
}
.link-list{list-style:none;padding:0;display:grid;gap:var(--s-3)}
.link-list li{margin:0}
.link-list a.card{flex-direction:row;align-items:center;justify-content:space-between;gap:var(--s-4);padding:var(--s-4) var(--s-5)}
.link-list .k{font-family:var(--font-mono);font-size:.78rem;color:var(--text-faint);letter-spacing:.08em;text-transform:uppercase;display:block}
.link-list .v{color:var(--text);word-break:break-word}

/* Home cover cards: soft glow, no grid */
.media--diagram{display:grid;place-items:center;padding:.6rem .7rem;background:radial-gradient(circle at 30% 20%,var(--glow),transparent 60%),radial-gradient(circle at 80% 90%,var(--glow-2),transparent 60%),var(--surface-2)}
/* Cover cards: wordmark covers sit flush */
.media--wordmark{padding:0}

/* SmartAir wordmark with flowing air lines */
.cover-sa{width:100%;height:100%;display:block}
.cover-sa .sa-word{font-family:var(--font-display,system-ui,sans-serif);font-size:46px;font-weight:700;letter-spacing:-.02em}
.cover-sa .sa-smart{fill:var(--text)}
.cover-sa .sa-air{fill:var(--accent)}
.cover-sa .sa-wave{fill:none;stroke-width:2.4;stroke-linecap:round;animation:sa-flow 3.2s linear infinite}
.cover-sa .sa-w1{stroke:var(--accent)}
.cover-sa .sa-w2{stroke:var(--accent-2);opacity:.75;animation-duration:4.4s;animation-direction:reverse}
.cover-sa .sa-w3{stroke:var(--accent);opacity:.45;animation-duration:5.6s}
@keyframes sa-flow{to{transform:translateX(100px)}}

/* Home Network cover: generic path and the real services, no addresses */
.cover-hn{width:100%;height:100%;display:block}
.cover-hn .hn-word{font-family:var(--font-display,system-ui,sans-serif);font-size:30px;font-weight:700;letter-spacing:-.02em}
.cover-hn .hn-a{fill:var(--text)}
.cover-hn .hn-b{fill:var(--accent-2)}
.cover-hn .hn-node{fill:var(--surface);stroke:var(--border-strong);stroke-width:1.2}
.cover-hn .hn-node.hl{stroke:var(--accent);stroke-width:1.6}
.cover-hn .hn-node-t{fill:var(--text);font-family:var(--font-body,system-ui,sans-serif);font-size:11px;font-weight:500}
.cover-hn .hn-line{stroke:var(--text-faint);stroke-width:1.4;fill:none;stroke-dasharray:3 4;animation:dash 1.6s linear infinite}
.cover-hn .hn-head{fill:var(--text-faint)}
.cover-hn .hn-chip{fill:none;stroke:var(--border-strong);stroke-width:1}
.cover-hn .hn-chip-t{fill:var(--text-dim);font-family:var(--font-mono,monospace);font-size:9.5px}

/* Shared styles for the generated project covers (partials/covers/) */
.cover-gen{--cv-a:var(--accent);width:100%;height:100%;display:block}
.cover-desco{--cv-a:var(--warm)}
.cover-fa{--cv-a:var(--ok)}
.cover-ip{--cv-a:#b49cff}
html[data-theme="light"] .cover-ip{--cv-a:#6a45d1}
.cover-wl{--cv-a:#ff8fd0;--wl1:var(--accent);--wl2:var(--accent-2);--wl3:#ff8fd0;--wl4:var(--warm)}
html[data-theme="light"] .cover-wl{--cv-a:#c2358f;--wl3:#c2358f}
.cover-gen .cv-word{font-family:var(--font-display,system-ui,sans-serif);font-weight:700;letter-spacing:-.02em}
.cover-gen .cv-a{fill:var(--text)}
.cover-gen .cv-b{fill:var(--cv-a)}
.cover-gen .cv-sub{fill:var(--text-dim);font-family:var(--font-body,system-ui,sans-serif);font-size:11px}
.cover-gen .cv-node{fill:var(--surface);stroke:var(--border-strong);stroke-width:1.2}
.cover-gen .cv-node.hl{stroke:var(--cv-a);stroke-width:1.6}
.cover-gen .cv-node-t{fill:var(--text);font-family:var(--font-body,system-ui,sans-serif);font-size:10.5px;font-weight:500}
.cover-gen .cv-line{stroke:var(--text-faint);stroke-width:1.4;fill:none;stroke-dasharray:3 4;animation:dash 1.6s linear infinite}
.cover-gen .cv-head{fill:var(--text-faint)}
.cover-gen .cv-chip{fill:none;stroke:var(--border-strong);stroke-width:1}
.cover-gen .cv-chip-t{fill:var(--text-dim);font-family:var(--font-mono,monospace);font-size:9.5px}
.cover-wl .wl-s1{stop-color:var(--wl1)}.cover-wl .wl-s2{stop-color:var(--wl2)}.cover-wl .wl-s3{stop-color:var(--wl3)}.cover-wl .wl-s4{stop-color:var(--wl4)}

/* Tag-like pills (tags, badges, filter chips, cover chips): outline effect on hover */
.tags li,.badge,.chip{transition:border-color .2s,color .2s,box-shadow .2s,background-color .2s}
.badge{cursor:default}
@media (hover:hover){
  .tags li:hover,.badge:hover,.chip:hover:not([aria-pressed="true"]){background:transparent;border-color:var(--accent);color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
  .badge--ok:hover{border-color:var(--ok);color:var(--ok);box-shadow:inset 0 0 0 1px var(--ok)}
  .badge--warm:hover{border-color:var(--warm);color:var(--warm);box-shadow:inset 0 0 0 1px var(--warm)}
  .cover-gen .cv-chip:hover,.cover-hn .hn-chip:hover{stroke:var(--accent);stroke-width:2}
  .cover-gen .cv-chip:hover+.cv-chip-t,.cover-hn .hn-chip:hover+.hn-chip-t{fill:var(--accent)}
}
.cover-gen .cv-chip,.cover-hn .hn-chip{fill:transparent;pointer-events:all;transition:stroke .2s,stroke-width .2s}
.cover-gen .cv-chip-t,.cover-hn .hn-chip-t{pointer-events:none;transition:fill .2s}

/* FoodRush cover: orange from the project's own UI */
.cover-food{--cv-a:#f0924f}
html[data-theme="light"] .cover-food{--cv-a:#e07b39}

/* Static (non-link) cards: accent outline on hover, matching the link cards */
@media (hover:hover){
  .card:not(a):hover{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent),0 22px 44px -22px var(--glow)}
}