/* main.css — homepage-only styles (index.html). Base reset/nav shell lives in base.css. */

body{background:#11303f}

/* ── Skip link ── */
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{position:fixed;top:0;left:0;z-index:999;width:auto;height:auto;padding:12px 20px;background:#c0572b;color:#f6efdd;font-family:'IBM Plex Mono',monospace;font-size:13px;text-decoration:none;outline:none}

/* ── Animations ── */
@keyframes jd-bob{0%,100%{transform:translateY(0) rotate(-1.4deg)}50%{transform:translateY(-8px) rotate(1.4deg)}}
@keyframes jd-shimmer{0%,100%{opacity:.18}50%{opacity:.5}}
@keyframes jd-blink{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes jd-pulse{0%,100%{opacity:.35;transform:scale(1)}50%{opacity:.9;transform:scale(1.7)}}
@keyframes jd-twinkle{0%,100%{opacity:.2}50%{opacity:.95}}
@keyframes jd-nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

/* ── Nav ── */
nav{background:rgba(244,237,221,.62)}
.nav-logo{display:flex;align-items:center;gap:13px;text-decoration:none;flex-shrink:0}
.nav-wordmark{line-height:1;font-weight:700;font-size:20px;letter-spacing:.02em;color:#16323a}
.nav-sub{display:block;font-family:'IBM Plex Mono',monospace;font-weight:500;font-size:9.5px;letter-spacing:.34em;color:#2c6b73;margin-top:3px}
.nav-right{display:flex;align-items:center;gap:26px}
.nav-links{display:flex;gap:22px;font-family:'IBM Plex Mono',monospace;font-size:12.5px;letter-spacing:.04em}
.nav-links a{color:#1d4750;text-decoration:none;transition:color .15s}
.nav-links a:hover{color:#c0572b}
.nav-instruments{display:flex;gap:14px;font-family:'IBM Plex Mono',monospace;font-size:11px;color:#2c6b73;padding-left:22px;border-left:1px solid rgba(21,86,95,.2)}
/* hamburger */
.nav-burger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:4px;background:none;border:none}
.nav-burger span{display:block;width:22px;height:2px;background:#15565f;border-radius:1px;transition:transform .2s,opacity .2s}
.nav-burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-burger.open span:nth-child(2){opacity:0}
.nav-burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav-mobile{display:none;position:fixed;top:57px;left:0;right:0;z-index:29;background:rgba(244,237,221,.97);backdrop-filter:blur(10px);border-bottom:1px solid rgba(21,86,95,.16);padding:20px 36px 24px;flex-direction:column;gap:16px}
.nav-mobile.open{display:flex}
.nav-mobile a{color:#1d4750;text-decoration:none;font-family:'IBM Plex Mono',monospace;font-size:14px;letter-spacing:.04em;padding:6px 0;border-bottom:1px solid rgba(21,86,95,.1)}
.nav-mobile a:last-child{border-bottom:none}

/* ── Backdrop ── */
#jd-bg{position:fixed;inset:0;z-index:0;overflow:hidden}
#jd-sky{position:absolute;inset:0;background:linear-gradient(180deg,#bcd6e0 0%,#d6e4e1 42%,#ece3ce 100%)}
#jd-sun{position:absolute;left:64%;top:20%;width:170px;height:170px;margin:-85px 0 0 -85px;border-radius:50%;background:radial-gradient(circle,#fff0d4 0%,#ffd9a0 46%,rgba(255,200,140,0) 72%)}
#jd-stars{position:absolute;inset:0;opacity:0}
#jd-water{position:absolute;left:0;right:0;top:58%;bottom:0;background:linear-gradient(180deg,#46627f 0%,#314861 50%,#21344a 100%)}

/* ── Layout ── */
#hero{min-height:100vh;display:flex;align-items:center;padding:120px 56px 60px;position:relative}
.section{padding:96px 56px;max-width:1280px;margin:0 auto}
.section-sm{padding:90px 56px;max-width:1080px;margin:0 auto}
.section-label{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.26em;color:#cfe0d2;margin-bottom:14px}
.section-heading{font-size:54px;line-height:1.02;font-weight:700;letter-spacing:-.02em;color:#f4ede0;margin:0;text-shadow:0 2px 24px rgba(8,20,30,.45)}
.divider{height:1px;background:rgba(244,237,221,.25);margin:24px 0 40px}

/* ── Project cards ── */
.projects-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.project-card{display:flex;flex-direction:column;text-decoration:none;background:rgba(244,237,221,.92);border:1px solid rgba(21,86,95,.18);border-radius:5px;overflow:hidden;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.project-card:hover{transform:translateY(-6px);box-shadow:0 22px 44px rgba(8,20,30,.32);border-color:rgba(192,87,43,.55)}
.project-badge{position:absolute;left:12px;top:12px;display:flex;align-items:center;gap:7px;background:rgba(20,32,38,.78);padding:5px 10px;border-radius:30px;font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.08em;color:#f4ede0}
.project-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.project-body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.project-area{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.14em;color:#2c6b73;margin-bottom:9px}
.project-name{font-size:23px;font-weight:700;letter-spacing:-.01em;color:#16323a;margin-bottom:9px}
.project-subtitle{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.04em;color:#2c6b73;margin:-4px 0 12px}
.project-blurb{font-size:14.5px;line-height:1.55;color:#46504e;margin:0 0 18px;flex:1}
.project-footer{display:flex;align-items:center;justify-content:space-between;font-family:'IBM Plex Mono',monospace;font-size:11px;color:#7a7466;border-top:1px solid rgba(21,86,95,.14);padding-top:13px}
.project-go{color:#c0572b}

/* ── Areas ── */
.areas-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:rgba(21,86,95,.22);border:1px solid rgba(21,86,95,.22);border-radius:5px;overflow:hidden}
.area-cell{background:rgba(244,237,221,.92);padding:26px 22px 30px;min-height:230px;display:flex;flex-direction:column;transition:background .25s ease}
.area-cell:hover{background:rgba(21,86,95,.95)}
.area-cell:hover .area-name,.area-cell:hover .area-desc,.area-cell:hover .area-no,.area-cell:hover .area-count{color:#eaf3ee}
.area-no{font-family:'IBM Plex Mono',monospace;font-size:12px;color:#c0572b;margin-bottom:18px;transition:color .25s}
.area-name{font-size:21px;font-weight:700;line-height:1.12;color:#16323a;margin-bottom:12px;transition:color .25s}
.area-desc{font-size:13.5px;line-height:1.55;color:#46504e;margin:0;flex:1;transition:color .25s}
.area-count{font-family:'IBM Plex Mono',monospace;font-size:11px;color:#2c6b73;margin-top:16px;transition:color .25s}

/* ── Lab ── */
.lab-panel{background:rgba(17,33,41,.9);border:1px solid rgba(79,208,216,.25);border-radius:6px;padding:40px 42px;color:#cfe6e8;box-shadow:0 24px 60px rgba(6,18,26,.4)}
.lab-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-bottom:8px}
.lab-divider{height:1px;background:rgba(79,208,216,.2);margin:28px 0 8px}
.experiment-row{display:grid;grid-template-columns:36px 1.4fr 2fr 130px;gap:22px;align-items:center;padding:22px 0;border-bottom:1px solid rgba(79,208,216,.12)}
.exp-no{font-family:'IBM Plex Mono',monospace;font-size:12px;color:#4a7e85}
.exp-name{font-size:20px;font-weight:700;color:#eef6f6;letter-spacing:-.01em}
.exp-tag{font-family:'IBM Plex Mono',monospace;font-size:11px;color:#7fc6cd;margin-top:5px}
.exp-note{font-size:14px;line-height:1.5;color:#aecbcf}
.exp-phase{font-family:'IBM Plex Mono',monospace;font-size:11px;color:#e8a44e}
.progress-bar{height:5px;background:rgba(79,208,216,.16);border-radius:4px;overflow:hidden;margin-top:7px}
.progress-fill{height:100%;background:linear-gradient(90deg,#4fd0d8,#e8a44e);border-radius:4px}

/* ── Timeline ── */
.timeline{position:relative;padding-left:42px}
.timeline::before{content:'';position:absolute;left:11px;top:6px;bottom:6px;width:2px;background:linear-gradient(180deg,rgba(244,237,221,.5),rgba(192,87,43,.6))}
.milestone{position:relative;padding:0 0 34px}
.milestone-dot{position:absolute;left:-37px;top:3px;width:14px;height:14px;border-radius:50%;background:#c0572b;border:3px solid #f4ede0}
.milestone-year{font-family:'IBM Plex Mono',monospace;font-size:13px;color:#f0e6d4;letter-spacing:.08em;margin-bottom:6px}
.milestone-title{font-size:24px;font-weight:700;color:#f4ede0;letter-spacing:-.01em;margin-bottom:6px}
.milestone-note{font-size:15px;line-height:1.55;color:#dbe6df;margin:0;max-width:560px}
.timeline-end{position:relative;padding-top:4px;margin-top:34px}
.timeline-end-boat{position:absolute;left:-40px;top:-2px}
.timeline-end-caption{font-family:'IBM Plex Mono',monospace;font-size:13px;color:#9fb0a6;letter-spacing:.08em}

/* ── Connect ── */
.connect-card{background:rgba(244,237,221,.93);border:1px solid rgba(21,86,95,.18);border-radius:6px;padding:56px 48px;text-align:center}
.connect-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.btn-primary{background:#15565f;color:#f4ede0;text-decoration:none;font-family:'IBM Plex Mono',monospace;font-size:13.5px;letter-spacing:.06em;padding:15px 26px;border-radius:3px}
.btn-outline{background:transparent;border:1px solid rgba(21,86,95,.4);color:#15565f;text-decoration:none;font-family:'IBM Plex Mono',monospace;font-size:13.5px;letter-spacing:.06em;padding:15px 26px;border-radius:3px}
.footer-strip{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-top:40px;font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:#cfe0d2}

/* ════════════════════════════════
   RESPONSIVE BREAKPOINTS
   ════════════════════════════════ */

/* Tablet: ≤900px */
@media(max-width:900px){
  .nav-links,.nav-instruments{display:none}
  .nav-burger{display:flex}

  #hero{padding:100px 32px 56px}
  #hero h1{font-size:clamp(56px,12vw,96px)!important}
  #hero>div>div:first-child+div{margin-top:14px!important}
  #hero p{font-size:18px!important}
  #hero svg[id="jd-compass"]{width:120px;height:120px;right:24px;top:100px}

  .section{padding:64px 32px}
  .section-sm{padding:60px 32px}
  .section-heading{font-size:38px}

  .projects-grid{grid-template-columns:repeat(2,1fr);gap:18px}
  .areas-grid{grid-template-columns:repeat(2,1fr)}
  .area-cell{min-height:180px}

  .lab-panel{padding:28px 24px}
  .experiment-row{grid-template-columns:28px 1fr;gap:14px}
  .exp-note{display:none}
  .experiment-row>div:nth-child(3){display:none}

  .connect-card{padding:40px 28px}
  .connect-card h2{font-size:38px!important}
}

/* Phone: ≤600px */
@media(max-width:600px){
  #hero{padding:90px 20px 48px;align-items:flex-start;padding-top:90px}
  #hero h1{font-size:clamp(48px,16vw,72px)!important}
  #hero p{font-size:16px!important;max-width:100%!important}
  #hero>div>div:last-child{padding-left:20px!important;padding-right:20px!important;font-size:10px}
  #hero svg[id="jd-compass"]{display:none}
  #hero>div>div:nth-child(2)>span{font-size:14px!important;letter-spacing:.16em!important}

  .section{padding:52px 20px}
  .section-sm{padding:48px 20px}
  .section-heading{font-size:30px}
  .section-label{font-size:10px}

  .projects-grid{grid-template-columns:1fr;gap:16px}
  .project-name{font-size:20px}

  .areas-grid{grid-template-columns:1fr 1fr}
  .area-name{font-size:17px}

  .experiment-row{grid-template-columns:1fr;gap:8px;padding:16px 0}
  .exp-no{display:none}
  .experiment-row>div:nth-child(3){display:none}
  .exp-name{font-size:17px}
  .lab-panel{padding:22px 18px}
  .lab-panel h2{font-size:28px!important}

  .connect-card{padding:32px 20px}
  .connect-card h2{font-size:28px!important}
  .btn-primary,.btn-outline{padding:13px 18px;font-size:12px}

  .footer-strip{flex-direction:column;align-items:flex-start;gap:10px}

  .hero-instrument-strip{display:none!important}
}