/* ---------------------------------------------------------------
   stef000.dev - dusk-sea palette, dark by default.
   Warm sand accents on a deep teal-black; article pages stay quiet.
   --------------------------------------------------------------- */
:root{
  color-scheme: dark;
  --bg:#141518;
  --panel:#1b1c1f;
  --text:#c6c7c9;
  --text-soft:#a3a4a7;
  --head:#f1f1f2;
  --muted:#93949a;
  --link:#e9b978;
  --accent:#e9b978;
  --accent-ink:#17120a;
  --border:#2b2c30;
  --hover-border:#404148;
  --tag-bg:rgba(255,255,255,.05);
  --tag-fg:#a9aaae;
  --code-bg:rgba(255,255,255,.06);
  --code-fg:#e9b978;
  --pre-bg:#15161a;
  --pre-fg:#c9cacd;
  --btn-bg:#e9b978;
  --btn-fg:#17120a;
  --quote-border:#3a3b40;
  --quote-fg:#c9cacd;
  --light:#f4f4f1;
  --ink:#141416;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --max:1100px;
}

html[data-theme="light"]{
  color-scheme: light;
  --bg:#f7f6f2;
  --panel:#ffffff;
  --text:#3f4145;
  --text-soft:#5a5c61;
  --head:#15171a;
  --muted:#6d6f74;
  --link:#a35c14;
  --accent:#b0682a;
  --accent-ink:#fffaf3;
  --border:#e5e2da;
  --hover-border:#cfcabf;
  --tag-bg:rgba(0,0,0,.045);
  --tag-fg:#63656a;
  --code-bg:#eeebe3;
  --code-fg:#96490e;
  --pre-bg:#f2f0e9;
  --pre-fg:#2f3034;
  --btn-bg:#15171a;
  --btn-fg:#f7f6f2;
  --quote-border:#d8d4c9;
  --quote-fg:#4a4b50;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--sans);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  transition:background-color .35s ease,color .35s ease;
}
h1,h2,h3,h4{font-weight:600;letter-spacing:-.015em;margin:0}
p{margin:0}
a{color:inherit}
img{max-width:100%;height:auto}
::selection{background:rgba(233,185,120,.28)}

/* ---------- ambient wash: whole-page, barely there ---------- */
.ambient{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.ambient span{position:absolute;border-radius:50%;will-change:transform}
.ambient .a1{
  width:95vmax;height:95vmax;left:-34vmax;top:-44vmax;
  background:radial-gradient(circle at 50% 50%,rgba(233,185,120,.105),rgba(233,185,120,0) 62%);
  animation:amb 74s ease-in-out infinite alternate;
}
.ambient .a2{
  width:86vmax;height:86vmax;right:-34vmax;top:16vmax;
  background:radial-gradient(circle at 50% 50%,rgba(84,178,190,.105),rgba(84,178,190,0) 62%);
  animation:amb 92s ease-in-out infinite alternate-reverse;
}
.ambient .a3{
  width:72vmax;height:72vmax;left:18vmax;bottom:-42vmax;
  background:radial-gradient(circle at 50% 50%,rgba(233,185,120,.07),rgba(233,185,120,0) 66%);
  animation:amb 64s ease-in-out infinite alternate;
}
@keyframes amb{
  from{transform:translate3d(-2%,1%,0) scale(1)}
  to{transform:translate3d(2.5%,-2%,0) scale(1.06)}
}
html[data-theme="light"] .ambient .a1{background:radial-gradient(circle at 50% 50%,rgba(224,150,74,.08),rgba(224,150,74,0) 62%)}
html[data-theme="light"] .ambient .a2{background:radial-gradient(circle at 50% 50%,rgba(64,150,160,.07),rgba(64,150,160,0) 62%)}
html[data-theme="light"] .ambient .a3{background:radial-gradient(circle at 50% 50%,rgba(224,150,74,.05),rgba(224,150,74,0) 66%)}

main, .footer{position:relative;z-index:1}

/* ---------- contour pattern: abstract, drifts + follows the pointer ---------- */
.pattern{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;animation:driftX 96s ease-in-out infinite alternate}
@keyframes driftX{from{transform:translate3d(-1.6%,0,0)}to{transform:translate3d(1.6%,0,0)}}
.pattern-inner{position:absolute;inset:-6%;will-change:transform}
.pattern svg{display:block;width:100%;height:100%;animation:bob 44s ease-in-out infinite alternate}
.pattern path{fill:none;stroke:rgba(120,190,200,.065);stroke-width:1;vector-effect:non-scaling-stroke}
.pattern path.p-warm{stroke:rgba(233,185,120,.085)}
html[data-theme="light"] .pattern path{stroke:rgba(30,100,110,.07)}
html[data-theme="light"] .pattern path.p-warm{stroke:rgba(176,104,42,.09)}
@keyframes bob{from{transform:translateY(-10px)}to{transform:translateY(10px)}}

/* ---------- nav ---------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.05rem 2rem;mix-blend-mode:difference;color:#fff;
}
.brand{font:600 13.5px var(--mono);letter-spacing:.09em;text-decoration:none;color:#fff}
.brand span{opacity:.45}
.nav-links{display:flex;align-items:center;gap:1.5rem;font-size:13px}
.nav-links a{color:#fff;text-decoration:none;opacity:.72;transition:opacity .15s}
.nav-links a:hover,.nav-links a.is-active{opacity:1}
.login{
  display:inline-flex;align-items:center;gap:.45rem;
  border:1px solid rgba(255,255,255,.55);border-radius:999px;
  padding:.32rem .65rem;opacity:.85 !important;
  font:500 10.5px var(--mono);letter-spacing:.11em;text-transform:uppercase;
}

/* ---------- hero: dusk over water ---------- */
.hero{
  position:relative;min-height:100svh;display:grid;place-items:center;
  overflow:hidden;padding:8rem 2rem 6rem;
  background:
    radial-gradient(90% 55% at 50% 104%, rgba(233,185,120,.20), transparent 62%),
    radial-gradient(70% 45% at 82% 88%, rgba(84,178,190,.14), transparent 64%),
    linear-gradient(180deg,#0c1013 0%,#0e1a20 30%,#113039 55%,#123039 72%,#16232a 88%,#141518 100%);
}
html[data-theme="light"] .hero{
  background:
    radial-gradient(90% 55% at 50% 104%, rgba(224,150,74,.22), transparent 62%),
    radial-gradient(70% 45% at 82% 88%, rgba(64,150,160,.14), transparent 64%),
    linear-gradient(180deg,#fbf7ef 0%,#f4efe3 40%,#e6ebe6 72%,#eef0eb 88%,#f7f6f2 100%);
}
.sea{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.sea .glow{
  position:absolute;width:78vmax;height:78vmax;border-radius:50%;
  background:radial-gradient(circle at 50% 50%, rgba(233,185,120,.22), rgba(233,185,120,0) 62%);
  animation:drift 28s ease-in-out infinite alternate, breathe 17s ease-in-out infinite alternate;
  will-change:transform,opacity;
}
@keyframes breathe{from{opacity:.7}to{opacity:1}}
.sea .g1{left:-22vmax;bottom:-44vmax}
.sea .g2{
  right:-26vmax;bottom:-48vmax;animation-duration:38s;animation-direction:alternate-reverse;
  background:radial-gradient(circle at 50% 50%, rgba(86,184,196,.17), rgba(86,184,196,0) 62%);
}
@keyframes drift{
  from{transform:translate3d(-3.5%,1.5%,0) scale(1)}
  to{transform:translate3d(3.5%,-2.5%,0) scale(1.07)}
}
.sea .horizon{
  position:absolute;left:50%;bottom:2%;width:70vmax;height:30vmax;
  transform:translateX(-50%);
  background:radial-gradient(closest-side, rgba(240,196,132,.14), rgba(240,196,132,0) 72%);
}
/* melts the scene into the page background so the fold has no seam */
.hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:28vh;z-index:0;
  background:linear-gradient(180deg,rgba(20,21,24,0),var(--bg));
  pointer-events:none;
}
html[data-theme="light"] .hero::after{
  background:linear-gradient(180deg,rgba(247,246,242,0),var(--bg));
}
html[data-theme="light"] .sea .glow{opacity:.55}

.hero-inner{position:relative;z-index:1;max-width:780px;text-align:center}

/* portrait: photo in a circle, gentle float + a rim light that is a pre-rasterised
   ring image (not a masked conic gradient) so rotating it stays on the compositor */
.portrait{
  position:relative;width:clamp(170px,21vw,215px);margin:0 auto 1.9rem;
  border-radius:50%;
  animation:floaty 9s cubic-bezier(.37,0,.63,1) infinite;
  will-change:transform;
  transform:translateZ(0);
}
.portrait img{
  display:block;width:100%;height:100%;object-fit:cover;border-radius:50%;
  box-shadow:0 22px 55px -22px rgba(0,0,0,.7);
}
.portrait svg{
  display:block;width:100%;height:auto;border-radius:50%;
  box-shadow:0 26px 60px -20px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.07);
}
.portrait::before{
  content:"";position:absolute;inset:-7px;border-radius:50%;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23e9b978' stop-opacity='0'/%3E%3Cstop offset='.35' stop-color='%23e9b978'/%3E%3Cstop offset='.68' stop-color='%236ec8d2'/%3E%3Cstop offset='1' stop-color='%236ec8d2' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='50' cy='50' r='48.6' fill='none' stroke='url(%23g)' stroke-width='2.4'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  animation:spin 20s linear infinite;
  will-change:transform;
  transform:translateZ(0);
  backface-visibility:hidden;
}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes floaty{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-7px,0)}}

.scroll-cue{
  position:absolute;left:50%;bottom:1.5rem;transform:translateX(-50%);z-index:2;
  font:500 9.5px var(--mono);letter-spacing:.34em;text-transform:uppercase;
  color:rgba(255,255,255,.4);animation:pulse 3.4s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:.35}50%{opacity:.9}}
html[data-theme="light"] .scroll-cue{color:rgba(18,35,42,.45)}
.avail{
  display:inline-flex;align-items:center;gap:.55rem;margin-bottom:1.6rem;
  font:500 11px var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:#f0c48f;border:1px solid rgba(233,185,120,.28);border-radius:999px;
  padding:.35rem .75rem;background:rgba(233,185,120,.07);
}
html[data-theme="light"] .avail{color:#8a4f14;background:rgba(176,104,42,.08);border-color:rgba(176,104,42,.25)}
.dot{width:6px;height:6px;border-radius:50%;background:#7fd1a8;box-shadow:0 0 0 3px rgba(127,209,168,.18)}
.hero h1{
  font-size:clamp(2.8rem,7vw,5rem);line-height:1.02;letter-spacing:-.035em;
  font-weight:680;
  background:linear-gradient(180deg,#fff8ec 0%,#f3d3a2 58%,#dfa76b 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
html[data-theme="light"] .hero h1{
  background:linear-gradient(180deg,#122a32 0%,#2b4a53 68%,#3f646d 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.role{
  margin-top:1.1rem;font-size:clamp(1rem,1.6vw,1.18rem);color:#d9d2c6;letter-spacing:-.01em;
}
html[data-theme="light"] .role{color:#3c4c52}
.tagline{margin:1rem auto 0;max-width:44ch;font-size:.98rem;line-height:1.7;color:#a9b3b5}
html[data-theme="light"] .tagline{color:#5d6b70}
.hero-actions{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap;margin-top:2.2rem}
.btn{
  display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;
  font:500 12.5px var(--mono);letter-spacing:.04em;border-radius:10px;
  padding:.85rem 1.25rem;transition:transform .16s ease,background-color .2s,border-color .2s;
}
.btn:hover{transform:translateY(-2px)}
.btn-solid{background:var(--btn-bg);color:var(--btn-fg)}
.btn-ghost{border:1px solid rgba(255,255,255,.24);color:#eae5da}
.btn-ghost:hover{border-color:rgba(255,255,255,.45)}
html[data-theme="light"] .btn-ghost{border-color:rgba(18,35,42,.25);color:#12232a}
html[data-theme="light"] .btn-ghost:hover{border-color:rgba(18,35,42,.5)}
.socials{display:flex;gap:.5rem;justify-content:center;margin:2.2rem 0 0;padding:0;list-style:none}
.socials a{
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  color:#e7e2d8;border:1px solid rgba(255,255,255,.16);text-decoration:none;
  transition:background .18s,color .18s,border-color .18s,transform .18s;
}
.socials a:hover{background:#e9b978;color:#17120a;border-color:#e9b978;transform:translateY(-2px)}
html[data-theme="light"] .socials a{color:#33474d;border-color:rgba(18,35,42,.18)}
html[data-theme="light"] .socials a:hover{background:#b0682a;color:#fffaf3;border-color:#b0682a}

/* ---------- sections ---------- */
.section{max-width:var(--max);margin:0 auto;padding:4rem 2rem}
.section.tight{padding-top:2.5rem}
#work{padding-bottom:0}
#work .section-head{margin-bottom:0}
.section-head{
  display:flex;align-items:baseline;justify-content:space-between;
  border-bottom:1px solid var(--border);padding-bottom:.85rem;margin-bottom:2.1rem;
}
.label{font:500 11px var(--mono);letter-spacing:.19em;text-transform:uppercase;color:var(--muted)}
.more{font:500 11.5px var(--mono);color:var(--link);text-decoration:none}
.more:hover{text-decoration:underline}

.caps{display:grid;grid-template-columns:repeat(3,1fr);gap:2.6rem}
.cap h3{font-size:1.02rem;color:var(--head);margin-bottom:.55rem}
.cap p{font-size:.92rem;line-height:1.7;color:var(--text-soft)}
.skills{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:2.4rem;padding:0;list-style:none}
.skills li{
  font:500 10.5px var(--mono);letter-spacing:.05em;color:var(--text-soft);
  border:1px solid var(--border);border-radius:999px;padding:.3rem .62rem;
}

/* ---------- project tiles ---------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1.8rem 1.2rem}
.tile{display:flex;flex-direction:column;gap:.8rem;min-width:0}
.tile-media{
  position:relative;display:block;aspect-ratio:16/10;border-radius:12px;overflow:hidden;
  background:linear-gradient(145deg,var(--t1),var(--t2));
  border:1px solid var(--border);
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.tile-media img{width:100%;height:100%;object-fit:cover;display:block;position:relative;z-index:1}
.tile-media:has(img)::before,.tile-media:has(img)::after{display:none}
.tile-media:has(img) .tile-year{display:none}
.tile-media::before{
  content:"";position:absolute;inset:0;opacity:.55;
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.07) 0 1px,transparent 1px 24px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 1px,transparent 1px 24px);
}
.tile-media::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(120% 90% at 82% 0%,rgba(255,255,255,.20),transparent 62%);
}
.tile:hover .tile-media{transform:translateY(-3px);border-color:var(--hover-border);box-shadow:0 18px 40px -22px rgba(0,0,0,.8)}
.tile-glyph{
  position:absolute;left:.85rem;bottom:.5rem;z-index:1;
  font:700 2.2rem/1 var(--mono);letter-spacing:-.06em;color:rgba(255,255,255,.16);
}
.tile-year{
  position:absolute;right:.85rem;top:.7rem;z-index:1;
  font:500 10px var(--mono);letter-spacing:.12em;color:rgba(255,255,255,.5);
}
.tile-body h3{font-size:.98rem;color:var(--head)}
.tile-body h3 a{text-decoration:none}
.tile-body h3 a:hover{color:var(--link)}
.tile-body p{font-size:.85rem;line-height:1.58;color:var(--text-soft);margin:.3rem 0 .55rem}
.tags{display:flex;flex-wrap:wrap;gap:.35rem;list-style:none;padding:0;margin:0}
.tags li{
  font:500 10px var(--mono);letter-spacing:.03em;color:var(--tag-fg);
  background:var(--tag-bg);border-radius:4px;padding:.18rem .42rem;
}

/* ---------- marquee rail ---------- */
.marquee{
  max-width:var(--max);margin:0 auto;
  overflow:hidden;padding:2rem 2rem 2.6rem;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.marquee-track{
  display:flex;gap:1.1rem;width:max-content;
  animation:marquee 46s linear infinite;
  will-change:transform;
}
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track{animation-play-state:paused}
.marquee .set{display:contents}
.marquee .tile{flex:0 0 clamp(240px,24vw,300px)}
@keyframes marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-25%,0,0)}}

/* ---------- posts index ---------- */
.page-head{max-width:var(--max);margin:0 auto;padding:9.5rem 2rem 1rem}
.page-head h1{font-size:clamp(2rem,4vw,2.9rem);color:var(--head);margin:.7rem 0 .7rem}
.page-sub{color:var(--muted);font-size:.94rem}
.post-list{display:grid;gap:.9rem}
.post-card a{display:block;text-decoration:none;color:inherit;padding:1.4rem 1.5rem;
  border:1px solid var(--border);border-radius:14px;background:var(--panel);
  transition:border-color .18s,transform .18s}
.post-card a:hover{border-color:var(--hover-border);transform:translateY(-2px)}
.post-card h2{font-size:1.12rem;color:var(--head);margin:.5rem 0 .5rem}
.post-card p{font-size:.9rem;color:var(--text-soft);line-height:1.6;margin-bottom:.8rem}

/* ---------- closing CTA ---------- */
.cta{
  max-width:var(--max);margin:1.5rem auto 0;padding:0 2rem 6rem;
}
.cta-inner{
  border:1px solid var(--border);border-radius:20px;padding:3rem 2.5rem;
  background:
    radial-gradient(70% 130% at 88% 0%, rgba(233,185,120,.13), transparent 58%),
    radial-gradient(60% 120% at 0% 100%, rgba(84,178,190,.105), transparent 60%),
    var(--panel);
  display:flex;flex-direction:column;align-items:flex-start;gap:.9rem;
}
html[data-theme="light"] .cta-inner{
  background:
    radial-gradient(70% 130% at 88% 0%, rgba(224,150,74,.16), transparent 58%),
    radial-gradient(60% 120% at 0% 100%, rgba(64,150,160,.12), transparent 60%),
    var(--panel);
}
.cta h2{font-size:clamp(1.8rem,3.6vw,2.6rem);color:var(--head);letter-spacing:-.025em}
.cta-mail{
  display:inline-block;margin-top:.4rem;font:500 14px var(--mono);
  color:var(--accent);text-decoration:none;border-bottom:1px solid rgba(233,185,120,.4);
  padding-bottom:2px;
}
.cta-mail:hover{border-bottom-color:var(--accent)}
.cta-meta{font:500 10.5px var(--mono);letter-spacing:.08em;color:var(--muted);margin-top:.6rem}

/* ---------- image viewer ---------- */
.prose a.zoom{display:block;border:0;cursor:zoom-in}
.prose a.zoom img{transition:opacity .18s ease}
.prose a.zoom:hover img{opacity:.92}
.lb{
  position:fixed;inset:0;z-index:100;padding:2rem;
  display:flex;align-items:center;justify-content:center;
  background:rgba(8,9,11,.94);
  opacity:0;pointer-events:none;transition:opacity .2s ease;
}
html[data-theme="light"] .lb{background:rgba(247,246,242,.96)}
.lb.open{opacity:1;pointer-events:auto}
.lb-stage{
  width:min(92vw,1180px);height:min(84vh,760px);
  display:grid;place-items:center;overflow:hidden;border-radius:8px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
}
.lb-img{
  max-width:100%;max-height:100%;width:auto;height:auto;
  border-radius:4px;transform-origin:center center;
  transition:transform .18s ease;cursor:zoom-in;
  user-select:none;-webkit-user-drag:none;touch-action:none;
}
.lb-img.dragging,.lb-img.zoomed{cursor:grab}
.lb-img.dragging{cursor:grabbing;transition:none}
.lb-tools{
  position:absolute;bottom:1rem;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:.15rem;z-index:2;
  background:rgba(18,20,24,.86);border:1px solid var(--border);
  border-radius:999px;padding:.28rem .35rem;
}
html[data-theme="light"] .lb-tools{background:rgba(255,255,255,.9)}
.lb-btn{
  width:30px;height:30px;border-radius:50%;border:0;background:transparent;
  color:var(--text);font:400 16px/1 var(--mono);cursor:pointer;
}
.lb-btn:hover{color:var(--head);background:rgba(255,255,255,.08)}
html[data-theme="light"] .lb-btn:hover{background:rgba(0,0,0,.06)}
.lb-reset{width:auto;padding:0 .6rem;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;border-radius:999px}
.lb-zoom{
  min-width:46px;text-align:center;font:500 11px var(--mono);
  color:var(--muted);letter-spacing:.06em;
}
.lb-close{
  position:absolute;top:1rem;right:1rem;width:40px;height:40px;z-index:3;
  border-radius:50%;border:1px solid var(--border);background:var(--panel);
  color:var(--text);font-size:21px;line-height:1;cursor:pointer;
}
.lb-close:hover{color:var(--head);border-color:var(--hover-border)}
.lb-count{
  position:absolute;bottom:1.55rem;left:1.6rem;
  font:500 11px var(--mono);color:var(--muted);letter-spacing:.12em;
}
@media (prefers-reduced-motion:reduce){.lb-img,.lb{transition:none}}

/* ---------- article ---------- */
.article{max-width:740px;margin:0 auto;padding:9rem 1.75rem 6rem}
.article-head h1{font-size:clamp(1.85rem,3.4vw,2.45rem);line-height:1.22;color:var(--head);margin:.9rem 0 .9rem}
.article-meta{font:500 11.5px var(--mono);color:var(--muted)}
.article-meta a{color:var(--link);text-decoration:none}
.cv-print{margin-top:1.4rem}
.cv-print button{
  font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;
  background:transparent;color:var(--text);border:1px solid var(--border);
  border-radius:999px;padding:.45rem .9rem;cursor:pointer;
}
.cv-print button:hover{border-color:var(--hover-border);color:var(--head)}

.prose{margin-top:2.6rem;font-size:1.02rem;line-height:1.8;color:var(--text)}
.prose p{margin:0 0 1.15rem}
.prose h2{
  font-size:1.3rem;color:var(--head);margin:2.9rem 0 1rem;
  padding-bottom:.5rem;border-bottom:1px solid var(--border);
}
.prose h3{font-size:1.08rem;color:var(--head);margin:2.1rem 0 .7rem}
.prose ul,.prose ol{margin:0 0 1.2rem;padding-left:1.25rem}
.prose li{margin-bottom:.35rem}
.prose a{color:var(--link);text-decoration:none;border-bottom:1px solid rgba(233,185,120,.3);overflow-wrap:anywhere}
.prose a:hover{border-bottom-color:var(--link)}
.prose strong{color:var(--head);font-weight:600}
.prose blockquote{
  margin:1.5rem 0;padding:.15rem 0 .15rem 1.1rem;
  border-left:3px solid var(--quote-border);color:var(--quote-fg);
}
.prose img{border-radius:8px;border:1px solid var(--border);margin:1.1rem 0;display:block}
.prose code{
  font-family:var(--mono);font-size:.86em;color:var(--code-fg);
  background:var(--code-bg);border-radius:4px;padding:.14em .38em;
}
.prose pre{
  background:var(--pre-bg);border:1px solid var(--border);border-radius:10px;
  padding:1rem 1.1rem;overflow:auto;margin:1.2rem 0;
}
.prose pre code{background:none;padding:0;color:var(--pre-fg);font-size:12.5px;line-height:1.65}
.prose table{width:100%;border-collapse:collapse;margin:1.2rem 0;font-size:.9rem}
.prose th,.prose td{border:1px solid var(--border);padding:.5rem .7rem;text-align:left}
.prose th{background:var(--tag-bg);color:var(--head);font-weight:600}
.prose hr{border:0;border-top:1px solid var(--border);margin:2.2rem 0}

/* callouts */
.callout{
  margin:1.5rem 0;padding:.9rem 1.05rem;border-left:3px solid var(--quote-border);
  background:var(--tag-bg);border-radius:0 8px 8px 0;font-size:.96rem;
}
.callout p:last-child{margin-bottom:0}
.callout-tip{border-left-color:#2ea043;background:rgba(46,160,67,.07)}
.callout-warning{border-left-color:#d29922;background:rgba(210,153,34,.07)}
.callout-info{border-left-color:#316dca;background:rgba(49,109,202,.09)}
.callout-danger{border-left-color:#da3633;background:rgba(218,54,51,.07)}

/* footnotes */
.footnotes{margin-top:3rem;padding-top:1.1rem;border-top:1px solid var(--border);font-size:.86rem;color:var(--muted)}
.footnotes ol{padding-left:1.1rem}
.footnotes li{margin-bottom:.5rem}
.footnote-backref{text-decoration:none}

/* highlight.js */
.hljs-keyword,.hljs-built_in,.hljs-literal{color:#ff8f7a}
.hljs-string,.hljs-attr{color:#a5d6ff}
.hljs-comment,.hljs-quote{color:#8b949e;font-style:italic}
.hljs-number,.hljs-symbol{color:#79c0ff}
.hljs-title,.hljs-function{color:#d2a8ff}
.hljs-variable,.hljs-template-variable{color:#ffa657}
.hljs-type,.hljs-class{color:#7ee787}
html[data-theme="light"] .hljs-keyword,html[data-theme="light"] .hljs-built_in{color:#b31d28}
html[data-theme="light"] .hljs-string,html[data-theme="light"] .hljs-attr{color:#0a5ea8}
html[data-theme="light"] .hljs-comment,html[data-theme="light"] .hljs-quote{color:#6a737d}
html[data-theme="light"] .hljs-number,html[data-theme="light"] .hljs-symbol{color:#0550ae}
html[data-theme="light"] .hljs-title,html[data-theme="light"] .hljs-function{color:#6f42c1}

/* ---------- footer ---------- */
.footer{border-top:1px solid var(--border);padding:1.9rem 2rem}
.footer-inner{
  max-width:var(--max);margin:0 auto;display:flex;justify-content:space-between;
  gap:1rem;font:500 10.5px var(--mono);color:var(--muted);letter-spacing:.06em;
}
.footer a{color:var(--muted);text-decoration:none;margin-left:1.1rem}
.footer a:hover{color:var(--text)}

/* ---------- theme toggle ---------- */
.tt{
  position:fixed;right:1.25rem;bottom:1.25rem;z-index:60;
  width:46px;height:46px;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;
  background:var(--panel);border:1px solid var(--border);
  box-shadow:0 6px 24px rgba(0,0,0,.3);
  transition:transform .25s ease,border-color .25s ease,background-color .35s ease;
}
.tt:hover{transform:translateY(-2px);border-color:var(--hover-border)}
.tt:active{transform:scale(.94)}
.tt-icon{width:26px;height:26px;overflow:visible;transition:transform .55s cubic-bezier(.68,-0.35,.27,1.35);transform-origin:12px 12px}
.tt-core{fill:var(--head);transition:fill .3s}
.tt-cut{fill:var(--panel);transition:transform .55s cubic-bezier(.68,-0.35,.27,1.35),fill .3s}
.tt-rays{
  stroke:var(--head);stroke-width:1.5;stroke-linecap:round;
  opacity:0;transform-origin:12px 12px;transform:scale(.45) rotate(-30deg);
  transition:opacity .3s ease,transform .5s cubic-bezier(.68,-0.35,.27,1.35);
}
html[data-theme="light"] .tt-icon{transform:rotate(180deg)}
html[data-theme="light"] .tt-cut{transform:translate(11px,-9px)}
html[data-theme="light"] .tt-rays{opacity:1;transform:scale(1) rotate(0deg)}

/* ---------- responsive ---------- */
@media (max-width:560px){
  .hero{padding:6.5rem 1.25rem 3.5rem;min-height:auto}
  .portrait{width:clamp(140px,38vw,170px);margin-bottom:1.2rem}
  .hero h1{font-size:clamp(2rem,8.6vw,2.6rem)}
  .role{font-size:.95rem}
  .tagline{font-size:.9rem}
  .hero-actions{gap:.5rem}
  .hero-actions .btn{padding:.75rem 1rem;font-size:12px}
  .scroll-cue{display:none}
  .lb{padding:1rem}
  .lb-stage{width:96vw;height:min(74vh,540px)}
  .lb-tools{bottom:.5rem;padding:.24rem .3rem}
  .lb-btn{width:28px;height:28px}
  .lb-count{display:none}

  .nav-links{gap:.8rem;font-size:11.5px}
  .login span{display:none}
  .login{padding:.34rem .5rem}
  .brand{font-size:12.5px}
  .nav{padding:.85rem .9rem}
}

@media (max-width:960px){
  .caps{grid-template-columns:1fr;gap:1.6rem}
  .hero{padding:7.5rem 1.35rem 5rem;min-height:92svh}
  .nav{padding:.95rem 1.1rem}
  .nav-links{gap:1rem;font-size:12px}
  .nav-links a[href^="mailto"]{display:none}
  .section{padding:3.6rem 1.35rem}
  .page-head{padding:7.5rem 1.35rem 1rem}
  .article{padding:7.5rem 1.35rem 4rem}
  .cta{padding:0 1.35rem 4rem}
  .cta-inner{padding:2.2rem 1.5rem}
  .footer-inner{flex-direction:column;gap:.6rem}
  .tt{right:1rem;bottom:1rem;width:42px;height:42px}
  .sea .glow{animation:none}
}

@media (prefers-reduced-motion:reduce){
  .sea .glow,.ambient span{animation:none}
  html{scroll-behavior:auto}
  *{transition-duration:.01ms !important}
}

/* ---------- print (CV to PDF) ---------- */
@media print{
  @page{margin:16mm}
  .nav,.footer,.cv-print,.socials,.hero,.tt,.cta{display:none !important}
  body{background:#fff;color:#111}
  .article{padding:0;max-width:none}
  .article-head h1{color:#000}
  .article-meta,.label{color:#444}
  .prose{color:#111;font-size:11pt}
  .prose h2{color:#000;border-bottom-color:#ccc}
  .prose h3{color:#000}
  .prose a{color:#000;border-bottom:0}
  .prose code{background:#f2f2f2;color:#000}
}

/* ---------- phone: swipe the project rail, pinch only inside the lightbox ---------- */
@media (max-width:960px){
  .marquee{
    overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;mask-image:none;-webkit-mask-image:none;touch-action:pan-x pan-y;
  }
  .marquee::-webkit-scrollbar{display:none}
  .marquee-track{animation:none;will-change:auto}
  .marquee .tile{flex:0 0 78vw}
}
.lb,.lb-stage{touch-action:none}