/* Adapted from the Matmio DEV entry page; no academy-specific styles or assets. */
:root { color-scheme:light; font-family:Arial,Helvetica,sans-serif; color:#1e2c28; background:#fff; font-synthesis:none; }
* { box-sizing:border-box; }
body { margin:0; }
a { color:inherit; text-decoration:none; }
a:focus-visible,select:focus-visible { outline:3px solid #587cbd; outline-offset:5px; }
.landing { display:grid; grid-template-columns:48% 52%; min-height:100svh; }
.story { display:flex; flex-direction:column; position:relative; overflow:hidden; background:#173e34; color:#eff5ed; padding:40px clamp(32px,4vw,80px); }
.brand { display:inline-flex; align-items:center; gap:10px; width:fit-content; font-size:24px; font-weight:700; letter-spacing:-1.2px; }
.brand svg { width:29px; height:31px; color:#e4eee0; }
.brand-dot { color:#d7bb7a; }
.story-content { margin:auto 0; padding-top:65px; }
.eyebrow { display:flex; align-items:center; gap:10px; color:#b7cec1; font-size:9px; letter-spacing:1.8px; text-transform:uppercase; font-weight:700; }
.rule { width:22px; height:1px; background:#d9bd7d; flex:none; }
h1 { font-size:clamp(46px,5vw,85px); letter-spacing:-.046em; line-height:1.06; margin:24px 0; font-weight:600; }
h1 > span { display:block; }
h1 em { color:#d7bb7a; font-style:normal; }
.story-description { font-size:17px; color:#b9ccc0; line-height:1.7; max-width:320px; white-space:pre-line; }
.mat-art { height:270px; position:relative; margin:20px -48px 30px; overflow:hidden; }
.mat-lines { position:absolute; left:20%; top:20px; width:340px; height:290px; transform:rotate(-25deg) skew(12deg); background:repeating-linear-gradient(0deg,transparent,transparent 56px,#496c5b 57px,#496c5b 58px),repeating-linear-gradient(90deg,#20493d,#20493d 56px,#496c5b 57px,#496c5b 58px); border:1px solid #496c5b; opacity:.55; border-radius:4px; box-shadow:12px 14px 0 #12342a; }
.mat-belt { position:absolute; display:flex; justify-content:flex-end; top:135px; left:32%; height:34px; width:210px; padding:0 12px; background:#111315; transform:rotate(-25deg); box-shadow:0 5px 12px #0003; border:1px solid #35383a; }
.belt-rank { display:flex; justify-content:space-between; width:66px; height:100%; background:#be1823; }
.belt-rank i { width:6px; background:#f4f1e8; }
.mat-caption { position:absolute; bottom:10px; left:48px; right:20px; font-size:8px; letter-spacing:1.8px; line-height:1.7; color:#b7cec1; text-transform:uppercase; }
.story-note { font-size:11px; line-height:1.7; color:#d7e4d9; margin:0; }
.announcement { display:flex; flex-direction:column; min-width:0; padding:30px clamp(28px,4vw,80px); }
.topbar { display:flex; justify-content:flex-end; }
.language { display:flex; align-items:center; gap:6px; color:#64716b; }
.language svg { width:16px; height:16px; }
select { font:600 12px Arial,Helvetica,sans-serif; min-height:44px; border:0; padding:10px 4px; color:#364d43; background:#fff; max-width:100%; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.announcement-content { max-width:420px; width:100%; margin:auto; padding:90px 0; }
.status { display:flex; align-items:center; gap:9px; color:#246b60; font-size:10px; font-weight:700; letter-spacing:1.3px; text-transform:uppercase; line-height:1.8; margin:0 0 24px; }
.status > span:first-child { width:7px; height:7px; border-radius:50%; background:#246b60; flex:none; }
h2 { font-size:clamp(40px,4vw,60px); line-height:1.08; letter-spacing:-.045em; font-weight:600; margin:0 0 24px; overflow-wrap:anywhere; }
.heading-dot { color:#3e7866; }
.intro { font-size:20px; line-height:1.5; letter-spacing:-.45px; max-width:340px; margin:0 0 20px; }
.description { color:#64716b; font-size:15px; line-height:1.85; margin:0; }
.coming-note { display:flex; align-items:flex-start; gap:14px; margin-top:42px; padding-top:26px; border-top:1px solid #e2e7e1; }
.note-line { width:22px; height:2px; flex:none; background:#b38a46; margin-top:9px; }
.coming-note p { color:#64716b; font-size:12px; line-height:1.8; margin:0; max-width:270px; }
footer { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; color:#64716b; font-size:9px; letter-spacing:.9px; line-height:1.7; text-transform:uppercase; }
@media(min-width:1500px) { .mat-art { height:330px; } .mat-lines { width:450px; height:350px; } .mat-belt { top:170px; } }
@media(min-width:701px) { .story,.announcement { min-height:800px; } }
@media(max-width:1100px) and (min-width:701px) { .story,.announcement { padding:32px; } h1 { font-size:clamp(40px,5.1vw,56px); } .mat-art { margin-left:-32px; margin-right:-32px; } .mat-caption { left:32px; } }
@media(max-width:700px) { .landing { grid-template-columns:minmax(0,1fr); } .story { padding:28px; } .story-content { padding-top:44px; } h1 { font-size:clamp(42px,10.8vw,70px); } .story-description { font-size:15px; } .mat-art { height:145px; margin:0 -28px 12px; } .mat-lines { top:38px; left:30%; width:270px; height:210px; } .mat-belt { top:84px; left:42%; width:175px; height:28px; } .mat-caption { display:none; } .story-note { font-size:10px; } .announcement { padding:18px 28px 28px; } .announcement-content { padding:42px 0 55px; max-width:480px; } h2 { font-size:44px; } footer { font-size:8px; } }
/* Keep the single language control beside the brand at the start of mobile pages. */
@media(max-width:700px) {
  .landing { position:relative; }
  .topbar { position:absolute; top:22px; right:28px; max-width:calc(100% - 206px); }
  .language { width:100%; min-width:0; }
  .language svg { display:none; }
  .language select { width:100%; min-width:0; background:transparent; color:#eff5ed; }
  .language option { color:#1e2c28; background:#fff; }
}