/* =====================================================
   MARECHKAWICK POLYTECHNIC INSTITUTE — design system
   Archivo · Instrument Sans · IBM Plex Mono · carbon/gold
   ===================================================== */
:root{
  --carbon:#0A1220;
  --carbon2:#0E1A2E;
  --cream:#F2EFE6;
  --gold:#E9B23B;
  --golddeep:#B57F14;
  --azure:#3DA9E8;
  --dim:rgba(242,239,230,.55);
  --line:rgba(242,239,230,.16);
  --display:'Archivo',sans-serif;
  --body:'Instrument Sans',sans-serif;
  --mono:'IBM Plex Mono',monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--carbon);color:var(--cream);font-family:var(--body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
::selection{background:var(--gold);color:var(--carbon)}

#field{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;display:block}
main{position:relative;z-index:1}

.rv{opacity:0;transform:translateY(34px);transition:opacity .9s cubic-bezier(.2,.65,.25,1),transform .9s cubic-bezier(.2,.65,.25,1)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.08s}.rv-d2{transition-delay:.16s}.rv-d3{transition-delay:.24s}.rv-d4{transition-delay:.32s}

/* ---------- NAV ---------- */
nav.top{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;justify-content:space-between;align-items:center;padding:20px 32px;mix-blend-mode:difference;color:#fff;transition:background .3s}
nav.top.scrolled{mix-blend-mode:normal;background:rgba(10,18,32,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid rgba(242,239,230,.08)}
nav.top .wordmark{font-family:var(--display);font-weight:800;font-stretch:112%;letter-spacing:.06em;font-size:15px;text-transform:uppercase}
nav.top .wordmark small{display:block;font-family:var(--mono);font-weight:400;font-size:8.5px;letter-spacing:.24em;opacity:.7;margin-top:3px}
nav.top ul{display:flex;gap:26px;list-style:none;align-items:center}
nav.top ul a{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;opacity:.85;transition:opacity .2s}
nav.top ul a:hover,nav.top ul a.on{opacity:1}
nav.top ul a.enroll{border:1px solid #fff;padding:9px 18px;opacity:1}

/* ---------- HERO (home) ---------- */
.hero{position:relative;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;justify-content:flex-end;padding:120px 32px 0;color:var(--cream)}
.hero-inner{position:relative;padding-bottom:96px;z-index:2}
.hero .sys{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:22px;opacity:0;animation:fade 1s .5s forwards}
.hero h1{font-family:var(--display);font-weight:850;font-stretch:120%;text-transform:uppercase;line-height:.88;letter-spacing:-.012em;font-size:clamp(40px,8.6vw,150px);overflow:hidden}
.hero h1 .word{display:block;transform:translateY(112%);animation:rise 1.1s cubic-bezier(.2,.65,.2,1) forwards}
.hero h1 .word.thin{font-weight:200;font-stretch:74%;animation-delay:.15s}
.hero h1 .word.gold{color:var(--gold);font-weight:800;font-stretch:104%;animation-delay:.28s;font-size:.48em;line-height:1.15}
@keyframes rise{to{transform:none}}
.hero-meta{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-top:30px;border-top:1px solid rgba(242,239,230,.3);padding-top:18px;opacity:0;animation:fade 1s .75s forwards}
@keyframes fade{to{opacity:1}}
.hero-meta p{max-width:480px;font-size:15px;color:rgba(242,239,230,.85)}
.hero-meta p b{color:var(--gold);font-weight:600}
.hero-meta .coords{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--dim);text-align:right;white-space:nowrap;line-height:1.8}
.scroll-cue{position:absolute;bottom:120px;right:32px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);writing-mode:vertical-rl;display:flex;align-items:center;gap:10px;z-index:2}
.scroll-cue::after{content:"";width:1px;height:46px;background:linear-gradient(rgba(242,239,230,.6),transparent);animation:cue 2.2s ease-in-out infinite}
@keyframes cue{0%,100%{transform:scaleY(.4);transform-origin:top}50%{transform:scaleY(1)}}

/* ---------- PAGE HEAD (interior) ---------- */
.page-head{position:relative;min-height:62vh;display:flex;flex-direction:column;justify-content:flex-end;padding:140px 32px 0;z-index:1}
.page-head .sys{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:20px}
.page-head h1{font-family:var(--display);font-weight:850;font-stretch:120%;text-transform:uppercase;line-height:.9;letter-spacing:-.012em;font-size:clamp(40px,8vw,124px)}
.page-head h1 em{font-style:normal;color:var(--gold)}
.page-head .ph-meta{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-top:28px;border-top:1px solid rgba(242,239,230,.3);padding-top:18px;padding-bottom:56px}
.page-head .ph-meta p{max-width:520px;font-size:15px;color:rgba(242,239,230,.85)}
.page-head .ph-meta p b{color:var(--gold);font-weight:600}
.page-head .ph-meta .coords{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--dim);text-align:right;white-space:nowrap;line-height:1.8}

/* ---------- TICKER ---------- */
.ticker{position:relative;background:linear-gradient(90deg,var(--golddeep),var(--gold));color:#141005;overflow:hidden;z-index:2}
.ticker-track{display:flex;width:max-content;animation:ticker 40s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker span{font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:12px 0;white-space:nowrap}
.ticker span::after{content:"·";margin:0 26px;opacity:.55}
@keyframes ticker{to{transform:translateX(-50%)}}
.hero .ticker{margin:0 -32px}

/* ---------- SECTIONS ---------- */
section{padding:120px 32px;position:relative}
section.tight{padding:80px 32px}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);display:flex;align-items:center;gap:12px;margin-bottom:48px}
.eyebrow::after{content:"";height:1px;flex:1;background:currentColor;opacity:.35;transform:scaleX(0);transform-origin:left;transition:transform 1.1s cubic-bezier(.2,.65,.25,1) .2s}
.eyebrow.rv.in::after,.rv.in .eyebrow::after{transform:scaleX(1)}

/* ---------- MANIFESTO ---------- */
.manifesto{min-height:70vh;display:flex;flex-direction:column;justify-content:center}
.manifesto p{font-family:var(--display);font-weight:300;font-stretch:92%;font-size:clamp(26px,3.7vw,48px);line-height:1.2;max-width:1120px;letter-spacing:-.01em}
.manifesto em{font-style:normal;color:var(--gold)}
.manifesto .sig{margin-top:36px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.manifesto .sig b{color:var(--cream);font-weight:500}

/* ---------- PROJECT ROWS ---------- */
.project{display:grid;grid-template-columns:92px 1fr 400px;gap:32px;align-items:stretch;padding:34px 30px;position:relative;margin-bottom:22px;background:rgba(14,26,46,.62);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);border:1px solid var(--line);transition:background .3s,border-color .3s}
.project:hover{background:rgba(17,32,56,.85);border-color:rgba(233,178,59,.5)}
.project.noimg{grid-template-columns:92px 1fr}
.project .idx{font-family:var(--mono);font-size:12px;color:var(--dim);padding-top:6px}
.project .idx b{display:block;color:var(--gold);font-weight:500;margin-bottom:4px}
.p-body h3{font-family:var(--display);font-weight:780;font-stretch:110%;text-transform:uppercase;font-size:clamp(22px,3vw,38px);line-height:1;margin-bottom:12px;transition:color .2s,transform .35s cubic-bezier(.2,.65,.25,1)}
.p-body h3 a{color:inherit}
.project:hover .p-body h3{color:var(--gold);transform:translateX(10px)}
.p-body p{color:rgba(242,239,230,.8);max-width:560px;font-size:15px}
.p-data{margin-top:20px;display:flex;gap:30px;flex-wrap:wrap}
.p-data div{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--cream)}
.p-data span{display:block;color:var(--dim);text-transform:uppercase;font-size:10px;margin-bottom:3px}
.p-cta{margin-top:22px;display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:12px 24px;border:1px solid rgba(233,178,59,.6);color:var(--cream);background:rgba(233,178,59,.12);transition:background .2s,color .2s;cursor:pointer}
.btn:hover{background:rgba(233,178,59,.3)}
.btn.solid{background:var(--gold);color:#141005;border-color:var(--gold);font-weight:500}
.btn.solid:hover{background:#f6c85e}
.thumb{border:1px solid var(--line);background:var(--carbon2);min-height:250px;overflow:hidden;position:relative}
.thumb img,.thumb svg{width:100%;height:100%;min-height:250px;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.project:hover .thumb img,.project:hover .thumb svg{transform:scale(1.05)}
.thumb .veil{position:absolute;inset:0;background:linear-gradient(120deg,rgba(233,178,59,0) 55%,rgba(233,178,59,.2));opacity:0;transition:opacity .4s}
.project:hover .veil{opacity:1}
.thumb .stamp{position:absolute;top:14px;left:14px;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;background:rgba(10,18,32,.8);border:1px solid rgba(233,178,59,.5);color:var(--gold);padding:6px 10px;z-index:2}

/* ---------- PANEL (method/bio) ---------- */
.panel{background:rgba(10,18,32,.7);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--line);padding:64px 48px}
.panel-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:64px}
.panel-grid h2{font-family:var(--display);font-weight:300;font-stretch:90%;font-size:clamp(24px,3vw,40px);line-height:1.22;letter-spacing:-.01em}
.panel-grid h2 b{font-weight:650;color:var(--gold)}
.panel-grid .pg-note{margin-top:22px;font-size:14.5px;color:rgba(242,239,230,.75);max-width:48ch;line-height:1.75}
.panel-grid .pg-note b{color:var(--cream)}
.stat-list{display:grid;grid-template-columns:1fr 1fr;gap:0}
.stat{border-top:1px solid rgba(242,239,230,.2);padding:22px 18px 26px 0}
.stat .n{font-family:var(--display);font-weight:800;font-stretch:116%;font-size:clamp(30px,3.6vw,52px);line-height:1;font-variant-numeric:tabular-nums}
.stat .n small{font-size:.45em;font-weight:600;color:var(--gold)}
.stat .l{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-top:8px}
.stat .l b{color:var(--cream);font-weight:500}

/* mono list (sidecard replacement) */
.mono-list{list-style:none}
.mono-list li{border-top:1px solid rgba(242,239,230,.2);padding:14px 4px;font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:rgba(242,239,230,.85);line-height:1.6}
.mono-list li span{color:var(--gold);display:block;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:4px}

/* ---------- FEATURE (image bleed) ---------- */
.featureimg{min-height:88vh;display:flex;flex-direction:column;justify-content:flex-end;padding:0;position:relative;overflow:hidden}
.featureimg .rbg{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.06)}
.featureimg .rscrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,18,32,.25),rgba(10,18,32,.9) 78%)}
.featureimg .rwrap{position:relative;padding:120px 32px 72px;z-index:2}
.featureimg h2{font-family:var(--display);font-weight:850;font-stretch:118%;text-transform:uppercase;font-size:clamp(36px,6.6vw,104px);line-height:.9;letter-spacing:-.012em}
.featureimg h2 em{font-style:normal;color:var(--gold)}
.featureimg .rsub{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin:18px 0 14px}
.featureimg p.rl{max-width:560px;font-size:15.5px;color:rgba(242,239,230,.85);margin-bottom:30px}

/* ---------- INDEX / AREAS ---------- */
.areas ul{list-style:none;columns:2;column-gap:64px;max-width:1000px}
.areas li{border-top:1px solid rgba(242,239,230,.18);break-inside:avoid;transition:padding-left .3s cubic-bezier(.2,.65,.25,1)}
.areas li a{display:flex;justify-content:space-between;gap:14px;padding:17px 8px;font-family:var(--display);font-weight:500;font-stretch:102%;font-size:19px;color:var(--cream);transition:color .2s}
.areas li:hover{padding-left:16px}
.areas li:hover a{color:var(--gold)}
.areas li span{font-family:var(--mono);font-size:11px;color:var(--dim);align-self:center;text-align:right}

/* ---------- NOTICE ---------- */
.notice{font-family:var(--mono);font-size:12px;letter-spacing:.03em;line-height:1.8;background:rgba(233,178,59,.08);border:1px solid rgba(233,178,59,.4);border-left:3px solid var(--gold);padding:18px 22px;color:rgba(242,239,230,.85);margin-bottom:44px}
.notice b{color:var(--gold);font-weight:500;text-transform:uppercase;letter-spacing:.12em}

/* ---------- FOOTER ---------- */
footer.mpi{color:var(--cream);padding:150px 32px 40px;min-height:70vh;display:flex;flex-direction:column;justify-content:flex-end;position:relative;z-index:1}
footer.mpi .pre{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:18px}
footer.mpi .big{font-family:var(--display);font-weight:850;font-stretch:120%;text-transform:uppercase;font-size:clamp(44px,9vw,140px);line-height:.9}
footer.mpi .big a{transition:color .25s;display:inline-block}
footer.mpi .big a:hover{color:var(--gold)}
.foot-cols{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;margin-top:60px;border-top:1px solid rgba(242,239,230,.25);padding-top:24px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--dim)}
.foot-cols a:hover{color:var(--gold)}
.foot-cols .grp{display:flex;gap:22px;flex-wrap:wrap}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none;transition:none}
  .hero h1 .word{animation:none;transform:none}
  .hero-meta,.hero .sys{animation:none;opacity:1}
  .ticker-track{animation:none}
  .scroll-cue::after{animation:none}
  .eyebrow::after{transform:scaleX(1);transition:none}
}
@media (max-width:900px){
  section{padding:84px 20px}
  section.tight{padding:60px 20px}
  .hero{padding:104px 20px 0}
  .hero h1{font-size:clamp(30px,10.6vw,64px)}
  .page-head h1{font-size:clamp(30px,10vw,64px)}
  .hero-meta,.page-head .ph-meta{flex-direction:column;align-items:flex-start;gap:16px}
  .hero-meta p,.page-head .ph-meta p{max-width:100%}
  .hero-meta .coords,.page-head .ph-meta .coords{text-align:left}
  .manifesto p{font-size:clamp(19px,5.4vw,26px)}

  .hero-inner > img{width:64px !important;margin-bottom:14px !important}
  nav.top ul a.enroll{padding:7px 10px;white-space:nowrap}
  nav.top .wordmark small{display:none}
  .hero .ticker{margin:0 -20px}
  .page-head{padding:120px 20px 0}
  nav.top{padding:16px 20px}
  nav.top ul{gap:14px}
  nav.top ul li.hidem{display:none}
  .scroll-cue{display:none}
  .project,.project.noimg{grid-template-columns:1fr;gap:18px;padding:24px 18px}
  .thumb{order:-1}
  .thumb img,.thumb svg{min-height:200px}
  .panel{padding:40px 22px}
  .panel-grid{grid-template-columns:1fr;gap:40px}
  .areas ul{columns:1}
  .featureimg .rwrap{padding:90px 20px 56px}
  footer.mpi{padding:110px 20px 32px}
}