@import url('https://fonts.googleapis.com/css2?family=Piazzolla:ital,wght@0,400;0,500;0,600;0,700;1,500&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --evergreen:#0B3B2E;
  --fern:#3F8F62;
  --sage:#A7C7B0;
  --mint:#D9EFE4;
  --sky:#B9E2EE;
  --ivory:#FAF9F4;
  --charcoal:#15313A;
  --muted:#5B7268;
  --line:rgba(167,199,176,0.55);
  --glass-tint: linear-gradient(135deg, rgba(217,239,228,0.62), rgba(185,226,238,0.42));
  --glass-shine: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0) 45%);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:auto; }
body{
  margin:0;
  background-color:var(--ivory);
  color:var(--charcoal);
  font-family:'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  line-height:1.65;
  font-size:16px;
  position:relative;
}
h1,h2,h3{
  font-family:'Piazzolla', Georgia, serif;
  font-weight:700;
  line-height:1.12;
  margin:0 0 0.4em;
  color:var(--evergreen);
  text-wrap:balance;
}
p{ margin:0 0 1em; max-width:62ch; }
a{ color:var(--fern); text-decoration:none; }
a:hover{ color:var(--evergreen); }
code, .mono{ font-family:'IBM Plex Mono', monospace; }
::selection{ background:var(--sage); color:var(--evergreen); }
img{ max-width:100%; }

.wrap{ max-width:1180px; margin:0 auto; padding:0 clamp(20px, 6vw, 100px); }

/* ---------- Atmospheric background blobs (superseded by the real bg-atmosphere.jpg image on body) ---------- */
.atmosphere{
  display:none;
}
.atmosphere-legacy{
  position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none;
}
.atmosphere span{
  position:absolute; display:block; filter:blur(70px); border-radius:50%;
}
.atmosphere .b1{ width:520px; height:480px; top:-160px; left:-140px; background:radial-gradient(circle at 30% 30%, var(--sage), var(--mint) 70%); opacity:0.55; }
.atmosphere .b2{ width:560px; height:520px; top:-120px; right:-200px; background:radial-gradient(circle at 55% 40%, var(--sky), var(--mint) 72%); opacity:0.6; }
.atmosphere .b3{ width:600px; height:560px; bottom:-220px; left:20%; background:radial-gradient(circle at 50% 50%, var(--mint), var(--sage) 75%); opacity:0.5; }
.atmosphere .b4{ width:460px; height:440px; bottom:-160px; right:-140px; background:radial-gradient(circle at 40% 40%, var(--sky), var(--sage) 70%); opacity:0.42; }
.atmosphere .b5{ width:440px; height:420px; top:34%; right:4%; background:radial-gradient(circle, var(--sky), transparent 72%); opacity:0.4; }
.atmosphere .b6{ width:380px; height:360px; top:58%; left:-120px; background:radial-gradient(circle, var(--sky), transparent 70%); opacity:0.32; }

/* ---------- Nav: glassy "window" ---------- */
.site-nav{
  position:sticky; top:0; z-index:20;
  background-color:rgba(255,255,255,0.28);
  background-image:linear-gradient(160deg, rgba(255,255,255,0.4), rgba(255,255,255,0.08));
  backdrop-filter:blur(32px) saturate(150%); -webkit-backdrop-filter:blur(32px) saturate(150%);
  border-bottom:1px solid rgba(255,255,255,0.65);
  box-shadow:0 1px 0 rgba(255,255,255,0.75) inset, 0 8px 26px rgba(11,59,46,0.05);
}
.site-nav .wrap{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:14px; padding-top:16px; padding-bottom:16px;
}
.site-nav .brand{
  font-family:'Piazzolla', serif; font-weight:700; font-size:20px; color:var(--evergreen);
}
.site-nav .links{ display:flex; align-items:center; gap:24px; flex-wrap:wrap; row-gap:8px; }
.site-nav .links a{
  color:var(--charcoal); font-size:14.5px; font-weight:500; opacity:0.82;
  padding-bottom:3px; border-bottom:2px solid transparent;
}
.site-nav .links a:hover{ opacity:1; color:var(--evergreen); }
.site-nav .links a.active{
  opacity:1; color:var(--evergreen); font-weight:600; border-bottom-color:var(--fern);
}
.lang-toggle{ display:flex; gap:6px; font-family:'IBM Plex Mono', monospace; font-size:12.5px; }
.lang-toggle a{ color:var(--evergreen); opacity:0.55; }
.lang-toggle a.current{ opacity:1; font-weight:600; }
.lang-toggle span{ color:var(--sage); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 26px; border-radius:10px;
  font-size:14.5px; font-weight:500; font-family:'IBM Plex Sans', sans-serif;
  border:1.5px solid transparent; transition:transform .15s ease, background .15s ease, color .15s ease;
  cursor:pointer;
}
.btn-solid{ background:var(--fern); color:#fff; }
.btn-solid:hover{ background:var(--evergreen); color:#fff; transform:translateY(-1px); }
.btn-outline{ background:transparent; border-color:var(--evergreen); color:var(--evergreen); }
.btn-outline:hover{ background:var(--evergreen); color:var(--ivory); transform:translateY(-1px); }

/* ---------- Sections: one flowing large page ---------- */
.section{
  position:relative;
  min-height:100vh; display:flex; flex-direction:column; justify-content:center; padding:96px 0;
  border-bottom:1px solid var(--line);
  scroll-margin-top:76px;
  overflow:hidden;
}
.section:last-of-type{ border-bottom:none; }
/* Each section gets its own single, uncropped copy of the atmosphere art
   (no tiling) so there is never a repeat seam, on any screen size. */
.section::before{
  content:"";
  position:absolute; inset:0; z-index:0;
  background-image:
    linear-gradient(rgba(250,249,244,0.32), rgba(250,249,244,0.32)),
    url('../images/bg-atmosphere.jpg');
  background-repeat:no-repeat, no-repeat;
  background-position:center, center;
  background-size:cover, cover;
  pointer-events:none;
}
.section > .wrap{ position:relative; z-index:1; width:100%; }
.section-head{ margin-bottom:44px; }
.section-head p{ font-size:1.05rem; }
.kicker{
  font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--fern); margin-bottom:10px; font-weight:500;
}
.section-head h2{ font-size:clamp(2rem, 4vw, 2.7rem); }

/* ---------- Hero (home): photo left, text right — kept compact to fit one screen ---------- */
.hero-section{ padding:52px 0 56px; }
.hero-section > .wrap:first-child{
  display:flex; gap:44px; align-items:center; flex-wrap:wrap;
}
.hero-text{ flex:1 1 380px; min-width:260px; }
.hero-photo-wrap{ position:relative; flex:0 0 auto; width:min(280px, 58vw); }
.hero-photo-wrap .blob-behind-a{
  position:absolute; inset:-30px 10px auto -30px; height:88%;
  background:var(--sage); opacity:0.55; filter:blur(2px);
  border-radius:42% 58% 65% 35% / 45% 45% 55% 55%;
  z-index:1;
}
.hero-photo-wrap .blob-behind-b{
  position:absolute; inset:auto -20px -20px 20%; height:60%; width:70%;
  background:var(--sky); opacity:0.55;
  border-radius:60% 40% 35% 65% / 55% 60% 40% 45%;
  z-index:1;
}
.hero-photo-wrap img{
  position:relative; z-index:2; display:block; width:100%; height:340px; object-fit:cover;
  object-position:50% 22%;
  border-radius:42% 58% 65% 35% / 45% 45% 55% 55%;
  border:2px solid rgba(255,255,255,0.6);
}
.tag-row{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.hero-tag{
  display:inline-block; font-family:'IBM Plex Mono', monospace; font-size:11px;
  text-transform:uppercase; letter-spacing:0.06em; color:var(--evergreen);
  border:1px solid var(--sage); border-radius:999px; padding:5px 13px; background:rgba(217,239,228,0.5);
}
.hero-text h1{ font-size:clamp(2.2rem, 5vw, 3.6rem); margin-bottom:0.12em; }
.role-line{ font-family:'Piazzolla', serif; font-size:1.3rem; font-weight:600; color:var(--fern); margin-bottom:12px; }
.hero-text .lede, .fact-line{ font-size:1rem; color:var(--charcoal); margin:4px 0; max-width:48ch; }
.cta-row{ display:flex; gap:16px; margin-top:22px; flex-wrap:wrap; }

/* ---------- Glass panel: "window" treatment ---------- */
.panel{
  position:relative; overflow:hidden;
  background-color:rgba(217,239,228,0.34);
  background-image:var(--glass-tint);
  border:1px solid rgba(255,255,255,0.55);
  border-radius:32px;
  padding:clamp(28px, 4vw, 52px);
  backdrop-filter:blur(22px) saturate(160%); -webkit-backdrop-filter:blur(22px) saturate(160%);
  box-shadow:0 18px 44px rgba(11,59,46,0.10), 0 1px 0 rgba(255,255,255,0.6) inset;
}
.panel::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:var(--glass-shine);
  mix-blend-mode:soft-light;
}
.panel-split{ display:flex; gap:48px; flex-wrap:wrap; position:relative; z-index:1; }
.panel-split .panel-main{ flex:2 1 380px; }
.panel-split .panel-meta{
  flex:1 1 220px; display:flex; flex-direction:column; gap:16px;
  border-left:1px solid var(--line); padding-left:36px;
}
.panel-meta .meta-row .meta-label{
  font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--muted); margin-bottom:3px;
}
.panel-meta .meta-row .meta-value{ font-size:15px; color:var(--charcoal); font-weight:500; }
.panel h3{ font-size:2rem; margin-bottom:16px; }
.panel p{ font-size:1.02rem; }
.panel .more-link{ font-weight:600; position:relative; z-index:1; }
.panel > *{ position:relative; z-index:1; }

.home-project{ margin-top:28px; }
.home-project .panel{ padding:clamp(20px, 3vw, 30px); }
.home-project .panel .kicker{ margin-bottom:6px; }
.home-project .panel h3{ font-size:1.5rem; margin-bottom:8px; }
.home-project .panel p{ font-size:0.98rem; margin-bottom:0.6em; }

/* ---------- Tabs (Background section) ---------- */
.tabs{ display:flex; gap:8px; margin-bottom:32px; flex-wrap:wrap; }
.tab-btn{
  font-family:'IBM Plex Sans', sans-serif; font-size:14.5px; font-weight:500;
  padding:10px 22px; border-radius:999px; cursor:pointer;
  border:1px solid var(--line); color:var(--charcoal);
  background-color:rgba(217,239,228,0.28); background-image:var(--glass-tint);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  transition:color .15s ease, border-color .15s ease;
}
.tab-btn:hover{ color:var(--evergreen); }
.tab-btn.active{
  color:#fff; background-image:none; background-color:var(--fern); border-color:var(--fern);
}
.tab-panel[hidden]{ display:none; }

.exp-preview{ margin-top:8px; }
.see-more-btn{
  margin-top:28px; background:none; border:1.5px solid var(--evergreen); color:var(--evergreen);
  border-radius:10px; padding:12px 26px; font-size:14.5px; font-weight:500; cursor:pointer;
  font-family:'IBM Plex Sans', sans-serif; transition:background .15s ease, color .15s ease;
}
.see-more-btn:hover{ background:var(--evergreen); color:var(--ivory); }

/* ---------- Full-page "see more" overlay ---------- */
.full-overlay{
  position:fixed; inset:0; z-index:60; overflow-y:auto;
  opacity:0; pointer-events:none; transition:opacity .32s ease;
  background-color:rgba(250,249,244,0.88);
  background-image:linear-gradient(160deg, rgba(217,239,228,0.55), rgba(185,226,238,0.35));
  backdrop-filter:blur(30px) saturate(160%); -webkit-backdrop-filter:blur(30px) saturate(160%);
}
.full-overlay.is-open{ opacity:1; pointer-events:auto; }
.full-overlay-inner{ max-width:820px; margin:0 auto; padding:100px clamp(20px,6vw,80px) 100px; }
.overlay-close{
  display:inline-flex; align-items:center; gap:8px; margin-bottom:36px;
  background:none; border:none; cursor:pointer; color:var(--evergreen);
  font-family:'IBM Plex Mono', monospace; font-size:13px; text-transform:uppercase; letter-spacing:0.06em;
  padding:8px 4px;
}
.overlay-close svg{ width:18px; height:18px; }
.overlay-close:hover{ color:var(--fern); }
.full-overlay .resume-cta{ margin-top:36px; }

/* ---------- Education / timeline rows (editorial, no cards) ---------- */
.edu-list, .exp-list{ margin-top:8px; }
.edu-item, .exp-item{
  display:grid; grid-template-columns:170px 1fr; gap:24px;
  padding:22px 0; border-top:1px solid var(--line);
}
.edu-item:first-child, .exp-item:first-child{ border-top:none; }
.edu-item .when, .exp-item .when{ font-family:'IBM Plex Mono', monospace; font-size:13px; color:var(--muted); padding-top:2px; }
.edu-item .school{ font-weight:600; font-size:17px; color:var(--evergreen); }
.edu-item .degree{ color:var(--charcoal); font-size:14.5px; margin-top:2px; }
.exp-item .role{ font-weight:600; font-size:17px; color:var(--charcoal); }
.exp-item .company{ color:var(--evergreen); font-weight:700; }
.exp-item .achievement{ color:var(--muted); font-size:14.5px; margin-top:4px; }

.resume-block{
  margin-top:36px; display:flex; align-items:center; justify-content:space-between;
  gap:20px; flex-wrap:wrap; border-top:1px solid var(--line); padding-top:28px;
}
.resume-block p{ margin:0; font-size:14.5px; color:var(--muted); }

.subsection-gap{ margin-top:64px; }

/* ---------- Projects ---------- */
.proj-deep{ padding:32px 0; border-top:1px solid var(--line); }
.proj-deep:first-child{ border-top:none; }
.proj-deep h3{ font-size:1.5rem; margin-bottom:8px; }
.proj-deep .proj-tag{
  color:var(--fern); font-family:'IBM Plex Mono', monospace; font-size:12px;
  text-transform:uppercase; letter-spacing:0.06em; display:block; margin-bottom:8px;
}
.proj-deep p{ font-size:15px; color:var(--charcoal); }

/* ---------- Blog list ---------- */
.post-list-item{ padding:28px 0; border-top:1px solid var(--line); }
.post-list-item:first-child{ border-top:none; }
.post-list-item .date{ font-family:'IBM Plex Mono', monospace; font-size:12.5px; color:var(--muted); }
.post-list-item h3{ font-size:1.5rem; margin:8px 0 8px; }
.post-list-item h3 a{ color:var(--evergreen); }
.post-list-item h3 a:hover{ color:var(--fern); }
.post-list-item .excerpt{ color:var(--charcoal); font-size:15px; }
.tag{
  display:inline-block; font-family:'IBM Plex Mono', monospace; font-size:11px;
  text-transform:uppercase; letter-spacing:0.04em; color:var(--fern);
  border:1px solid var(--fern); border-radius:999px; padding:3px 10px; margin-right:6px;
}

/* ---------- Back to top ---------- */
.back-to-top{
  margin:56px auto 0; display:flex; flex-direction:column; align-items:center; gap:8px;
  width:fit-content; background:none; border:none; cursor:pointer;
  font-family:'IBM Plex Mono', monospace; font-size:11.5px; text-transform:uppercase;
  letter-spacing:0.08em; color:var(--evergreen); opacity:0.75;
}
.back-to-top:hover{ opacity:1; }
.back-to-top .arrow-circle{
  width:52px; height:52px; border-radius:50%; border:1.5px solid rgba(255,255,255,0.6);
  display:flex; align-items:center; justify-content:center;
  background-color:rgba(217,239,228,0.34); background-image:var(--glass-tint);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  box-shadow:0 10px 24px rgba(11,59,46,0.12);
  transition:transform .2s ease, background .2s ease;
}
.back-to-top:hover .arrow-circle{ transform:translateY(-3px); }
.back-to-top svg{ width:20px; height:20px; stroke:var(--evergreen); }

/* ---------- Post page (narrow reading column) ---------- */
.post-header{ padding:120px 0 32px; }
.post-header .wrap{ max-width:720px; }
.post-header .date{ font-family:'IBM Plex Mono', monospace; font-size:13px; color:var(--muted); }
.post-header h1{ font-size:clamp(2rem, 4vw, 2.8rem); margin-top:12px; }
.post-body{ padding:8px 0 100px; font-size:17px; }
.post-body .wrap{ max-width:720px; }
.post-body h2{ font-size:1.4rem; margin-top:1.6em; color:var(--evergreen); }
.post-body img{ border-radius:16px; }
.post-body blockquote{
  margin:0 0 1em; padding-left:20px; border-left:3px solid var(--fern);
  color:var(--muted); font-style:italic;
}

/* ---------- Footer ---------- */
.site-footer{
  background:transparent; color:var(--muted); padding:40px 0 56px;
  border-top:1px solid var(--line);
}
.site-footer .wrap{
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:14px; font-size:13px;
}
.site-footer a{ color:var(--evergreen); font-family:'IBM Plex Mono', monospace; }
.site-footer a:hover{ color:var(--fern); }
.site-footer .contact-links{ display:flex; gap:20px; flex-wrap:wrap; }

/* ---------- Responsive ---------- */
@media (max-width:760px){
  .edu-item, .exp-item{ grid-template-columns:1fr; gap:6px; }
  .site-nav .links{ gap:16px; }
  .panel-split{ flex-direction:column; }
  .panel-split .panel-meta{ border-left:none; border-top:1px solid var(--line); padding-left:0; padding-top:24px; flex-direction:row; flex-wrap:wrap; }
  .section{ padding:72px 0; }
  .hero-section{ padding:48px 0; }
  .hero-photo-wrap{ width:min(240px, 62vw); }
  .hero-photo-wrap img{ height:290px; }
  .full-overlay-inner{ padding-top:88px; }
}

@media (max-width:480px){
  body{ font-size:15px; }
  .wrap{ padding:0 18px; }
  .site-nav .wrap{ padding-top:12px; padding-bottom:12px; gap:10px; }
  .site-nav .brand{ font-size:17px; }
  .site-nav .links{ gap:12px; }
  .site-nav .links a{ font-size:13px; }
  .hero-text h1{ font-size:2.4rem; }
  .role-line{ font-size:1.2rem; }
  .cta-row{ flex-direction:column; align-items:stretch; }
  .cta-row .btn{ justify-content:center; }
  .hero-photo-wrap{ width:min(190px, 56vw); }
  .hero-photo-wrap img{ height:230px; }
  .section{ padding:56px 0; min-height:auto; }
  .hero-section{ padding:40px 0; }
  .section-head h2{ font-size:1.7rem; }
  .panel{ border-radius:22px; padding:24px; }
  .panel h3{ font-size:1.5rem; }
  .tabs{ width:100%; }
  .tab-btn{ flex:1 1 auto; text-align:center; padding:10px 14px; }
  .full-overlay-inner{ padding:76px 18px 76px; }
  .resume-block{ flex-direction:column; align-items:flex-start; }
}