/* PROJECT ATMOS · ATMOS OASIS — screenshot-inspired HTML/CSS recreation
   All major illustrations have been cropped from the three user-provided mockups.
   This stylesheet is self-contained; no frameworks or build tools required.
*/
/* Project Atmos typography: Cinzel / Libre Baskerville / Montserrat / Lato */
@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Libre+Baskerville:wght@400;700&family=Lato:wght@400;700&family=Montserrat:wght@500;600;700&display=swap");

:root{
  --bg:#050709;--ink:#ede8dc;--soft:#d4d0cb;--gold:#e7bb72;
  --pale-gold:#f8d995;--gold-dark:#966c35;--edge:rgba(209,155,82,.48);
  --panel:rgba(8,12,15,.93);
  --sans:'Lato',Arial,Helvetica,sans-serif;
  --serif:'Libre Baskerville',Georgia,'Times New Roman',serif;
  --display:'Cinzel',Georgia,serif;
  --subheading:'Montserrat',Arial,Helvetica,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-height:100vh;color:var(--ink);font-family:var(--sans);background:#050709 url('assets/matrix-bg.jpg') center top / 1086px auto repeat;font-size:14px}
body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.01),rgba(0,0,0,.09) 30%,rgba(0,0,0,.12) 70%,rgba(0,0,0,.02))}
a{color:inherit;text-decoration:none}button{font:inherit}img{display:block;max-width:100%}
/* Typography defaults for existing and future HTML headings/paragraphs */
h1{font-family:var(--display)}
h2{font-family:var(--serif)}
h3{font-family:var(--subheading);font-weight:600}
p{font-family:var(--sans)}
:focus-visible{outline:2px solid var(--pale-gold);outline-offset:4px;border-radius:4px}
.wrap{width:min(1000px,calc(100% - 72px));margin:0 auto}
.visually-hidden{position:absolute!important;clip:rect(0,0,0,0);clip-path:inset(50%);width:1px;height:1px;overflow:hidden;white-space:nowrap}
.gold-rule{width:56px;height:1px;background:linear-gradient(90deg,transparent,var(--pale-gold),transparent);box-shadow:0 0 8px #e6b06599;margin:10px auto 14px}
/* Shared navigation, metallic line-work, buttons */
.mini-nav{position:absolute;top:105px;left:0;right:0;display:flex;justify-content:space-between;align-items:center;pointer-events:none;z-index:4}
.mini-nav a,.mini-nav button{pointer-events:auto}
.outline-button{border:1px solid var(--gold);color:#f8dba6;background:linear-gradient(180deg,rgba(31,25,19,.8),rgba(5,6,8,.82));border-radius:8px;padding:11px 18px;font-size:12px;font-weight:600;display:inline-flex;gap:12px;align-items:center;justify-content:center;min-width:148px;box-shadow:0 0 9px #e7b66d22;transition:background .2s,transform .2s}
.outline-button:hover,.feature-button:hover{background:rgba(179,126,54,.23);transform:translateY(-2px)}
/* Homepage */
.home-header{position:relative;text-align:center;padding-top:16px}
.home-nav{position:absolute;top:57px;left:0;right:0;display:flex;justify-content:space-between;align-items:center;gap:12px}
.home-nav .nav-group{display:flex;gap:29px;align-items:center;white-space:nowrap;z-index:2}
.home-nav a{font-size:11px;letter-spacing:1.1px;font-weight:500;position:relative;transition:color .2s}
.home-nav .nav-group>a:not(.join-button):hover,.home-nav .nav-group>a[aria-current='page']{color:var(--pale-gold)}
.home-nav .nav-group>a[aria-current='page']::after{content:'';position:absolute;left:0;right:0;bottom:-15px;height:1px;background:var(--gold);box-shadow:0 0 8px var(--gold)}
.home-nav .join-button{border:1px solid var(--gold);padding:10px 20px;border-radius:99px;color:#f6d699;font-weight:600;letter-spacing:.8px}
.home-nav .join-button:hover{background:rgba(230,184,112,.12)}
.home-emblem{width:181px;height:173px;object-fit:contain;margin:auto;filter:drop-shadow(0 0 8px rgba(218,151,62,.24))}
.home-project-name{display:flex;justify-content:center;align-items:center;gap:19px;margin:16px auto 12px;font-size:25px;letter-spacing:8px;color:#f8d28e;font-weight:500;white-space:nowrap}
.home-project-name::before,.home-project-name::after{content:'';width:96px;height:1px;background:linear-gradient(90deg,transparent,var(--gold));box-shadow:0 0 7px #edb65c70}
.home-project-name::after{transform:rotate(180deg)}
.home-intro{text-align:center}
.home-intro .eyebrow{font-size:16px;letter-spacing:7px;color:#e6e5e0;margin:13px 0 2px}
.home-intro h1{font-family:var(--display);font-size:clamp(66px,8.6vw,91px);font-weight:500;line-height:.99;letter-spacing:1.5px;margin:0 0 6px;color:var(--pale-gold);text-transform:uppercase;text-shadow:0 2px 0 #65431e,0 3px 18px rgba(241,164,62,.3)}
.home-intro .subtitle {
  font-size:15px;
  line-height:1.65;
  letter-spacing:1.5px;
  color:#f6f2ec;
  margin:0;
  text-transform:uppercase;
}
.home-intro .subtitle .gold {color:#eac68a}
.home-intro .subtitle:nth-of-type(2) .gold {margin-right:8px}
.hero-figure{margin:31px 0 0;overflow:hidden;border:1px solid #d2a251;border-radius:15px;box-shadow:0 0 0 1px #c3984833,0 16px 35px rgba(0,0,0,.35)}
.hero-figure a{display:block}
.hero-figure img{width:100%;aspect-ratio:996 / 569;object-fit:cover}
.home-about{background:rgba(6,7,8,.91);border:1px solid var(--edge);border-radius:15px;margin-top:24px;padding:21px 30px 45px;text-align:center;box-shadow:0 0 26px rgba(0,0,0,.55)}
.home-about h2{font-family:var(--serif);font-size:38px;line-height:1.06;font-weight:600;letter-spacing:.8px;text-transform:uppercase;color:#f0d3a0;margin:0}
.home-about p{max-width:810px;margin:15px auto 25px;line-height:1.68;font-size:15px;color:#e5e2db;letter-spacing:.07px}
.feature-links{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.feature-button{display:flex;align-items:center;justify-content:space-between;gap:13px;border:1px solid #ebbd6d;border-radius:11px;padding:14px 23px;color:#f4d091;background:linear-gradient(180deg,rgba(31,20,9,.34),rgba(3,5,7,.6));min-height:56px;font-size:13px;letter-spacing:1.3px;font-weight:500;box-shadow:0 0 11px #f7bc5f20;transition:background .2s,transform .2s}
.feature-button .feature-icon{font-size:26px;line-height:1;color:#f2c875}
.feature-button .arrow{font-size:20px;font-weight:400}
/* Secondary page mastheads */
.page-top{position:relative;text-align:center;padding-top:15px}
.page-logo{height:206px;width:260px;object-fit:contain;margin:0 auto;filter:drop-shadow(0 0 8px #e4a65120)}
.page-top h1{font-family:var(--display);font-size:64px;line-height:.95;margin:-3px auto 0;color:#f5cb89;font-weight:600;text-shadow:0 2px 9px #a86c2740}
.page-top .tagline{font-family:var(--serif);font-size:22px;line-height:1.45;font-weight:400;color:#ebe5da;margin:6px auto 39px}
.page-top .tagline.with-rule{border-top:1px solid #e9b25d70;padding-top:13px;max-width:max-content}
.page-top--prototype .page-logo{height:177px;width:248px}
.page-top--prototype h1{font-size:62px;margin:3px 0 9px}
.page-top--prototype .tagline{font-family:var(--sans);font-size:20px;color:#f5d68f;margin:11px auto 10px}
.page-top--prototype .deck{max-width:690px;margin:7px auto 25px;color:#e7e1dc;font-size:14px;line-height:1.65}
/* Main research page */
.overview{background:linear-gradient(125deg,#0e1418eF,#07090cf4);border:1px solid var(--edge);border-radius:12px;padding:19px 20px 20px 29px;display:grid;grid-template-columns:.94fr 1fr;align-items:center;gap:28px;min-height:247px}
.kicker{font-size:10px;color:#efc48c;text-transform:uppercase;letter-spacing:3px;display:flex;gap:12px;align-items:center}
.kicker::after{content:'';width:32px;height:1px;background:#e8c187}
.overview h2{font-family:var(--serif);font-size:41px;line-height:1.1;color:#f0c994;font-weight:600;margin:4px 0 12px}
.overview p{font-size:13.8px;line-height:1.63;color:#dedcda;margin:0}
.overview img{height:209px;width:100%;object-fit:cover;border:1px solid #866e4c60;border-radius:10px}
.research-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:16px}
.research-card{min-width:0;min-height:310px;background:linear-gradient(155deg,#0d1217f5,#06090cf7);border:1px solid var(--edge);border-radius:13px;padding:18px 20px 17px;display:flex;flex-direction:column;box-shadow:0 5px 14px #0007;transition:border-color .25s,transform .25s;overflow:hidden}
.research-card:hover{border-color:#edc78d;transform:translateY(-2px)}
.research-heading{display:grid;grid-template-columns:56px 1fr 36px;gap:14px;align-items:center}
.boxed-icon{display:grid;place-items:center;border:1px solid #c29760;border-radius:12px;color:#e8bd77;width:52px;height:52px;font-size:29px;background:linear-gradient(140deg,#36281c,#0d1013 75%);box-shadow:inset 0 0 12px #f1b96719}
.research-heading .id{display:flex;align-items:center;gap:12px;color:#efc186;font-size:10px;letter-spacing:1.7px;margin-bottom:4px}
.research-heading .id::after{content:'';width:25px;background:#e8c187;height:1px}
.research-heading h3{font-family:var(--subheading);color:#f1d2a5;font-size:23px;line-height:1.02;font-weight:600;margin:0}
.round-arrow{display:grid;place-items:center;color:#f7dba9;font-size:21px;border:1px solid #dfad67;background:#101113;border-radius:50%;width:37px;height:37px;transition:background .2s}
.round-arrow:hover{background:#4b341c}
.research-card p{font-size:12.2px;line-height:1.5;margin:6px 0 7px;color:#dedbd8}
.card-details{display:block;flex:1}.card-details h4{margin:10px 0 4px;color:#f1d2a5;font-size:12px;line-height:1.2;font-weight:700}.card-details p:first-of-type{margin-top:2px}
.research-card .card-photo{width:100%;height:98px;object-fit:cover;border:1px solid #7e603d55;border-radius:9px}
.research-progress{margin-top:16px;border:1px solid var(--edge);border-radius:14px;background:linear-gradient(125deg,#101317f0,#05080bf5);display:grid;grid-template-columns:57% 43%;align-items:center;gap:0;min-height:110px;padding:18px 24px}
.research-progress .progress-copy{display:flex;gap:23px;align-items:center;padding-right:22px}
.research-progress .progress-copy .boxed-icon{flex:0 0 55px}
.research-progress h2{font-family:var(--serif);font-size:22px;line-height:1;margin:1px 0 4px;color:#f6cf95}
.research-progress p{font-size:11px;line-height:1.5;margin:0;color:#ddd}
.progress-side{border-left:1px solid var(--edge);padding-left:30px}
.progress-head{display:flex;justify-content:space-between;align-items:center;font-size:11px;margin-bottom:9px}
.progress-head strong{font-size:13px;font-weight:500}
.progress-bar{height:10px;border:1px solid #484949;background:#13181b;border-radius:40px;overflow:hidden}
.progress-bar span{display:block;height:100%;width:75%;background:linear-gradient(90deg,#b77d3c,#f2c883);border-radius:40px;box-shadow:0 0 9px #f0b86860}
.progress-side .subnote{font-size:11px;margin-top:6px;color:#c6c2bf}
/* Prototype page */
.section-intro{text-align:center;margin:11px auto 20px}
.section-intro h2{font-family:var(--serif);font-size:37px;font-weight:600;color:#f4c88d;margin:0 0 4px;display:flex;align-items:center;justify-content:center;gap:20px}
.section-intro h2::before,.section-intro h2::after{content:'';width:155px;height:1px;background:linear-gradient(90deg,transparent,#edbd77)}
.section-intro h2::after{transform:rotate(180deg)}
.section-intro h3{font-family:var(--subheading);font-size:23px;line-height:1.4;font-weight:600;color:var(--gold);text-align:center;margin:5px auto 14px}
.section-intro p{max-width:760px;margin:0 auto;font-size:13px;line-height:1.52;color:#e6e1df}
.prototype-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}
.model-card{border:1px solid var(--edge);background:linear-gradient(145deg,#0e1215f5,#06080bf9);border-radius:15px;padding:8px 10px 15px;min-width:0;box-shadow:0 4px 17px #0008}
.model-card h3{color:#f3d3a0;font-family:var(--subheading);font-size:24px;line-height:1.13;margin:0 0 7px 5px;font-weight:600}
.model-card .model-open{display:block;border-radius:9px;overflow:hidden;cursor:zoom-in}
.model-card img{width:100%;height:333px;object-fit:cover;border-radius:9px;transition:filter .2s}
.model-card .model-open:hover img{filter:brightness(1.10)}
.model-card p{font-size:11.6px;line-height:1.5;color:#d9d7d3;margin:10px 13px 0}
/* Footer */
.site-footer{width:min(1000px,calc(100% - 72px));margin:24px auto 20px;padding-top:0;text-align:center;color:#ecc584;font-size:12px;font-weight:600;letter-spacing:1.25px;position:relative;display:flex;align-items:center;justify-content:center;gap:23px}
.site-footer::before,.site-footer::after{content:'';height:1px;flex:1 1 auto;background:linear-gradient(90deg,#c89342,#f2d59a,#c89342);box-shadow:0 0 4px #eec48450}
.site-footer span{flex:0 0 auto}
.site-footer a{text-decoration:underline;text-underline-offset:3px}
.page-footer{margin-top:20px}
/* Reusable dialog: no dead nav links and functional model enlargement */
dialog{max-width:min(92vw,590px);border:1px solid #d5ac6d;border-radius:14px;background:#090d10;color:#e9e1d7;padding:26px;box-shadow:0 18px 70px #000}
dialog::backdrop{background:rgba(0,0,0,.82);backdrop-filter:blur(3px)}
dialog h2{font-family:var(--serif);color:#f5d49f;font-size:34px;font-weight:600;margin:0 0 10px}
dialog p{line-height:1.7;font-size:14px}
dialog .dialog-close{border:1px solid var(--gold);color:var(--gold);border-radius:8px;padding:9px 16px;background:transparent;cursor:pointer;margin-top:10px}
dialog img{max-height:75vh;object-fit:contain;border-radius:7px}
/* Research notes destination (preserves existing logs while overview stays close to mockup) */
.notes-page{padding-top:35px;padding-bottom:20px}
.notes-page h1{font-family:var(--display);font-size:50px;font-weight:600;color:#f0cf94;margin:0}
.notes-page .notes-lead{line-height:1.8;max-width:780px}
.note-panel{padding:24px 30px;margin:20px 0;background:var(--panel);border:1px solid var(--edge);border-radius:12px;scroll-margin-top:20px}
.note-panel h2{color:#f0ca91;font-family:var(--serif);font-size:31px;margin:0 0 15px}
.note-panel h3{color:#f0ca91;margin:18px 0 6px;font-size:14px}
.note-panel p{line-height:1.8;font-size:14px;color:#e6e1db}
/* Mobile layouts */
@media(max-width:900px){
 .wrap,.site-footer{width:min(100% - 38px,1000px)}
 .home-nav{position:relative;top:auto;margin-top:7px;flex-wrap:wrap;gap:12px;justify-content:center}
 .home-nav .nav-group{flex-wrap:wrap;justify-content:center;gap:14px}
 .home-header{display:flex;flex-direction:column}.home-emblem{order:-1;width:148px;height:140px}
 .home-project-name{margin-top:12px}.home-intro h1{font-size:clamp(50px,9vw,80px)}
 .mini-nav{top:88px}.page-logo{height:187px}
 .research-heading h3{font-size:20px}
 .model-card img{height:27vw;min-height:220px}
}
@media(max-width:620px){
 .wrap,.site-footer{width:calc(100% - 24px)}
 .home-nav .nav-group{gap:11px}.home-nav a{font-size:9px;letter-spacing:.6px}.home-nav .join-button{padding:8px 12px}
 .home-project-name{font-size:15px;letter-spacing:3px;gap:8px}.home-project-name::before,.home-project-name::after{width:24px}
 .home-intro .eyebrow{font-size:12px;letter-spacing:4px}
 .home-intro h1{font-size:clamp(47px,11vw,70px)}
 .home-intro .subtitle{font-size:10px;letter-spacing:1.3px}
 .hero-figure{margin-top:20px}
 .home-about{margin-top:15px;padding:20px 15px}.home-about h2{font-size:30px}.home-about p{font-size:13px;line-height:1.65}
 .feature-links{grid-template-columns:1fr;gap:12px}.feature-button{padding:12px 16px;font-size:11px;letter-spacing:.3px}
 .mini-nav{position:static;order:2;margin:2px auto 12px;justify-content:space-between;gap:14px;width:100%}.outline-button{min-width:0;padding:9px 10px;font-size:11px}
 .page-top{display:flex;flex-direction:column}.page-logo,.page-top--prototype .page-logo{width:190px;height:160px}
 .page-top h1,.page-top--prototype h1{font-size:48px}.page-top .tagline{font-size:17px;margin-bottom:16px}
 .page-top--prototype .tagline{font-size:15px}
 .page-top--prototype .deck{font-size:12px;margin-bottom:10px}
 .overview{grid-template-columns:1fr;gap:18px;padding:20px}.overview h2{font-size:35px}.overview p{font-size:13px}.overview img{height:190px}
 .research-grid,.prototype-grid{grid-template-columns:1fr}.research-card{min-height:0;padding:18px}.research-card p{min-height:0}.research-card .card-photo{height:145px}
 .research-progress{grid-template-columns:1fr;padding:18px;gap:20px}.progress-side{padding:15px 0 0;border-left:0;border-top:1px solid var(--edge)}
 .section-intro h2{font-size:31px;gap:12px}.section-intro h2::before,.section-intro h2::after{width:25px}
 .model-card img{height:auto;max-height:360px;aspect-ratio:1.55;object-fit:cover}.model-card p{font-size:12px}
 .site-footer{margin-bottom:16px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}}

@media(max-width:620px){body{background-size:1086px auto}.site-footer{gap:9px;letter-spacing:.25px;font-size:9px}}

/* =============================================================
   PHASE 1 · Research roadmap / professional diamond arrangement
   All selectors below are confined to the new Q5–Q10 cards.
   Q1–Q4, all other pages, and existing site design are unchanged.
   ============================================================= */
.research-roadmap-header {
  grid-column:1 / -1;
  text-align:center;
  margin:18px 0 7px;
  padding:23px 16px 8px;
  border-top:1px solid rgba(235,190,120,.36);
}
.research-roadmap-header .roadmap-kicker {
  font-family:var(--subheading);
  color:#e2b982;
  font-size:10px;
  font-weight:600;
  letter-spacing:2.5px;
}
.research-roadmap-header h2 {
  color:#f2d4a4;
  font-family:var(--serif);
  font-size:29px;
  line-height:1.25;
  font-weight:700;
  margin:10px 0 8px;
}
.research-roadmap-header p {
  color:#c9c3bc;
  font-size:13px;
  line-height:1.65;
  max-width:620px;
  margin:0 auto;
}
.research-card--planned {
  background:linear-gradient(140deg,rgba(17,23,27,.98),rgba(7,11,15,.985) 72%);
  border:1px solid rgba(199,150,87,.47);
  border-top:2px solid rgba(234,189,117,.8);
  border-radius:12px;
  padding:19px 20px 0;
  min-height:0;
  position:relative;
  box-shadow:0 12px 25px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,221,161,.04);
  overflow:hidden;
}
.research-card--planned:hover {
  border-color:#e5be87;
  transform:translateY(-2px);
}
.research-card--planned .research-heading {
  grid-template-columns:46px minmax(0,1fr) 37px;
  gap:13px;
  align-items:center;
  padding-bottom:15px;
  border-bottom:1px solid rgba(208,164,102,.24);
}
.research-card--planned .boxed-icon {
  width:44px;height:44px;
  font-size:23px;border-radius:10px;
  background:linear-gradient(140deg,#32251a,#111418 82%);
  color:#efc888;
  border-color:rgba(223,172,101,.64);
}
.research-card--planned .research-heading .id {
  color:#d4b18a;
  font-family:var(--subheading);
  font-size:9px;
  letter-spacing:1.65px;
  margin-bottom:5px;
}
.research-card--planned .research-heading .id::after {width:19px;opacity:.6}
.research-card--planned .research-heading h3 {
  color:#f1d2a2;
  font-family:var(--subheading);
  font-size:19px;
  line-height:1.2;
  font-weight:600;
  letter-spacing:-.3px;
}
.roadmap-index {
  font-family:var(--display);
  font-size:20px;
  font-weight:500;
  line-height:1;
  color:rgba(235,195,133,.72);
  text-align:center;
}
.research-card--planned .card-details {padding:10px 0 15px;}
.research-card--planned .card-details h4 {
  color:#ecc997;
  font-family:var(--subheading);
  text-transform:uppercase;
  font-size:9.8px;
  letter-spacing:1.2px;
  font-weight:600;
  margin:11px 0 5px;
}
.research-card--planned .card-details p {
  color:#dad6cf;
  font-family:var(--sans);
  font-size:12.6px;
  line-height:1.59;
  margin:0 0 6px;
}
.research-status-strip {
  margin:auto -20px 0;
  padding:12px 20px;
  border-top:1px solid rgba(211,164,98,.28);
  background:linear-gradient(90deg,rgba(205,145,70,.095),rgba(5,10,13,.38));
  display:flex;
  gap:9px;
  align-items:center;
  min-height:42px;
  font-family:var(--subheading);
  font-size:9px;
  letter-spacing:1.25px;
  font-weight:600;
  color:#ebc48a;
}
.research-status-gem {
  flex:0 0 auto;
  display:inline-block;
  width:6px;height:6px;
  border:1px solid #edbf75;
  transform:rotate(45deg);
  background:rgba(234,185,106,.2);
}
.research-status-strip .status-tail {
  margin-left:auto;
  white-space:nowrap;
  font-size:9px;
  color:#b2aaa0;
  letter-spacing:1px;
  font-weight:500;
}
/* The signature 2–1–2–1 diamond is deliberate, not a grid accident. */
.research-card--centered {
  grid-column:1 / -1;
  width:calc((100% - 16px)/2);
  justify-self:center;
}
@media (max-width:620px) {
  .research-roadmap-header {padding:18px 3px 6px;margin-top:10px;}
  .research-roadmap-header h2 {font-size:25px;}
  .research-roadmap-header p {font-size:12.5px;}
  .research-card--centered {grid-column:1 / -1;width:100%;}
  .research-card--planned {padding:17px 16px 0;}
  .research-card--planned .research-heading {grid-template-columns:40px minmax(0,1fr) 30px;gap:10px;}
  .research-card--planned .boxed-icon {width:40px;height:40px;font-size:20px;}
  .research-card--planned .research-heading h3 {font-size:18px;}
  .research-status-strip {margin-left:-16px;margin-right:-16px;padding:11px 16px;}
  .research-status-strip .status-tail {font-size:8px;letter-spacing:.5px;}
}