/* ============================================================
   Mario Ramirez — portfolio
   Cassette futurism: 1970s–80s sci-fi hardware (Star Wars'
   targeting computers, Alien's terminals). Amber phosphor on
   near-black, vector grid, instrument-panel frames with corner
   brackets, wide Eurostile-style capitals for headings, LED
   segment readouts. Long text stays in a plain readable sans.
   Fonts are self-hosted (no requests to third parties).
   ============================================================ */

@font-face{font-family:'Michroma'; src:url("../fonts/michroma-400.bdb83203073a.woff2") format('woff2'); font-weight:400; font-display:swap;}
@font-face{font-family:'IBM Plex Mono'; src:url("../fonts/ibm-plex-mono-400.79936b18df9f.woff2") format('woff2'); font-weight:400; font-display:swap;}
@font-face{font-family:'IBM Plex Mono'; src:url("../fonts/ibm-plex-mono-500.b1c8a895f5fd.woff2") format('woff2'); font-weight:500; font-display:swap;}
@font-face{font-family:'Source Sans 3'; src:url("../fonts/source-sans-3-400.27ab01c4cb50.woff2") format('woff2'); font-weight:400; font-display:swap;}
@font-face{font-family:'Source Sans 3'; src:url("../fonts/source-sans-3-600.9a35cba76eda.woff2") format('woff2'); font-weight:600; font-display:swap;}
@font-face{font-family:'Jost'; src:url("../fonts/jost-600.b6346d671c34.woff2") format('woff2'); font-weight:600; font-display:swap;}
@font-face{font-family:'DSEG14'; src:url("../fonts/dseg14-bold.e63e015a0ed7.woff2") format('woff2'); font-weight:700; font-display:swap;}

:root{
  color-scheme:dark;
  --bg:#07090b;
  --bg-raised:#0e1216;
  --bg-panel:#0b0f13;
  --bg-sunken:#040608;
  --ink:#dfe3e8;
  --ink-soft:#97a1ac;
  --ink-faint:#7a8592;   /* 5.0:1+ on every background (WCAG AA) */
  --line:rgba(150,170,190,0.12);
  --line-strong:rgba(150,170,190,0.24);
  --amber:#f0a03c;
  --amber-glow:rgba(240,160,60,0.38);
  --grid-line:rgba(240,160,60,0.30);
  --teal:#5fc4cf;
  --teal-glow:rgba(95,196,207,0.30);
  --glow-amber:0 0 0 1px rgba(240,160,60,0.35), 0 0 22px -6px var(--amber-glow);
  --glow-teal:0 0 0 1px rgba(95,196,207,0.35), 0 0 22px -6px var(--teal-glow);

  /* Michroma: small capital section headings only; Jost (Futura-style) for names and titles */
  --font-display:'Michroma', 'Eurostile', 'Microgramma', 'Arial Black', sans-serif;
  --font-heading:'Jost', 'Futura', 'Century Gothic', var(--font-body);
  --font-mono:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-body:'Source Sans 3', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-led:'DSEG14', var(--font-mono);
}

*{box-sizing:border-box;}
html,body{margin:0; padding:0; overflow-x:clip;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  counter-reset:sys;
  background-image:
    radial-gradient(110% 70% at 50% -10%, rgba(240,160,60,0.07), transparent 60%),
    radial-gradient(80% 60% at 100% 0%, rgba(95,196,207,0.05), transparent 55%),
    linear-gradient(rgba(240,160,60,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(240,160,60,0.04) 1px, transparent 1px);
  background-size:100% 100%, 100% 100%, 40px 40px, 40px 40px;
  background-attachment:fixed;
}
/* CRT: scanlines and a soft vignette */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:2;
  background:
    repeating-linear-gradient(to bottom, rgba(255,255,255,0.025) 0 1px, transparent 1px 3px),
    radial-gradient(120% 90% at 50% 50%, transparent 60%, rgba(0,0,0,0.45) 100%);
  mix-blend-mode:overlay;
}

[hidden]{display:none !important;}
.skip-link{
  position:absolute; left:16px; top:-60px; z-index:10; padding:10px 14px;
  background:var(--amber); color:var(--bg); font-family:var(--font-mono); font-size:13px;
  text-decoration:none; border-radius:2px;
}
.skip-link:focus{top:16px; outline:2px solid var(--ink); outline-offset:2px;}
button, a{-webkit-tap-highlight-color:transparent;}
.chip, .tab, .icon-link, .panel-link{touch-action:manipulation;}
#root{max-width:920px; margin:0 auto; padding:0 24px 96px; position:relative; z-index:1;}

h1,h2,h3{font-weight:400; text-wrap:balance; margin:0;}
a{color:inherit;}
.mono{font-family:var(--font-mono); font-variant-numeric:tabular-nums;}

/* Corner brackets: the instrument-panel frame used on the photo, cards and panel.
   Drawn in currentColor, so each frame sets its colour with `color`. */
.hero-target::after,
.project::after,
.panel::after,
.tile::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(currentColor, currentColor) top left / 14px 2px no-repeat,
    linear-gradient(currentColor, currentColor) top left / 2px 14px no-repeat,
    linear-gradient(currentColor, currentColor) top right / 14px 2px no-repeat,
    linear-gradient(currentColor, currentColor) top right / 2px 14px no-repeat,
    linear-gradient(currentColor, currentColor) bottom left / 14px 2px no-repeat,
    linear-gradient(currentColor, currentColor) bottom left / 2px 14px no-repeat,
    linear-gradient(currentColor, currentColor) bottom right / 14px 2px no-repeat,
    linear-gradient(currentColor, currentColor) bottom right / 2px 14px no-repeat;
  transition:color .2s ease, filter .2s ease;
}

/* ---- Hero ---- */
.hero{padding:72px 0 48px; border-bottom:1px solid var(--line); position:relative; isolation:isolate;}
.hero-row{display:flex; gap:34px; align-items:flex-start;}

.hero-target{position:relative; flex-shrink:0; padding:10px; color:var(--amber);}
.hero-target::after{filter:drop-shadow(0 0 6px var(--amber-glow));}
/* crosshair ticks at the middle of each side */
.hero-target::before{
  content:""; position:absolute; inset:0; pointer-events:none; color:var(--amber); opacity:0.7;
  background:
    linear-gradient(currentColor, currentColor) top center / 1px 7px no-repeat,
    linear-gradient(currentColor, currentColor) bottom center / 1px 7px no-repeat,
    linear-gradient(currentColor, currentColor) left center / 7px 1px no-repeat,
    linear-gradient(currentColor, currentColor) right center / 7px 1px no-repeat;
}
.hero-photo{
  width:168px; height:168px; overflow:hidden; background:var(--bg-panel);
  border:1px solid var(--line-strong);
  box-shadow:0 0 0 1px var(--line), 0 18px 44px -20px var(--amber-glow);
}
.hero-photo img{width:100%; height:100%; object-fit:cover; display:block;}
.target-label{
  position:absolute; left:10px; right:10px; bottom:-18px;
  font-size:10px; letter-spacing:0.18em; color:var(--amber); opacity:0.85; text-align:center;
}
.hero-text{min-width:0;}
@media (max-width:640px){
  .hero-row{flex-direction:column; gap:30px;}
  .hero-photo{width:120px; height:120px;}
}

.eyebrow{
  font-family:var(--font-mono);
  font-size:12px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--amber); margin-bottom:18px;
}
/* status LED */
.eyebrow::before{
  content:""; display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--amber);
  box-shadow:0 0 10px var(--amber-glow); margin-right:10px; vertical-align:middle;
}
/* terminal cursor */
.eyebrow::after{
  content:""; display:inline-block; width:0.6em; height:1.05em; background:var(--amber); opacity:0.85;
  margin-left:8px; vertical-align:-0.2em;
  animation:cursor 1.1s steps(1) infinite;
}
@keyframes cursor{50%{opacity:0;}}

.hero h1{
  font-family:var(--font-heading); font-weight:600; text-transform:uppercase;
  font-size:clamp(30px,5vw,46px); line-height:1.1; letter-spacing:0.12em;
  text-shadow:0 0 22px rgba(240,160,60,0.18);
}
.hero .role{
  color:var(--teal); font-family:var(--font-mono); font-size:13.5px;
  text-transform:uppercase; letter-spacing:0.08em; margin-top:12px;
}
.hero p.thesis{max-width:62ch; color:var(--ink-soft); font-size:17px; margin-top:22px;}
.hero .meta{
  display:flex; flex-wrap:wrap; gap:6px 22px; margin-top:24px;
  font-family:var(--font-mono); font-size:12px; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--ink-faint);
}
.hero .meta span{display:flex; align-items:center; gap:7px;}

/* ---- Profile links (logos) as panel buttons ---- */
.icon svg{width:18px; height:18px; display:block; fill:currentColor;}
.icon svg[stroke]{fill:none;}   /* outline icons (email) */
.links{display:flex; flex-wrap:wrap; gap:10px; margin-top:22px;}
.icon-link{
  width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--line-strong); border-radius:2px;
  background:linear-gradient(to bottom, var(--bg-raised), var(--bg-sunken));
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.04), 0 2px 0 rgba(0,0,0,0.5);
  color:var(--ink-soft); transition:color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.icon-link:hover{color:var(--amber); border-color:var(--amber); box-shadow:var(--glow-amber);}
.icon-link:focus-visible{outline:2px solid var(--amber); outline-offset:2px;}

/* ---- Section scaffolding ---- */
section{padding:48px 0; border-bottom:1px solid var(--line);}
section:last-of-type{border-bottom:none;}
.section-head{display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:26px;}
.section-head h2{
  font-family:var(--font-display); font-size:15px; text-transform:uppercase; letter-spacing:0.14em;
  counter-increment:sys;
}
.section-head h2::before{
  content:"SYS-0" counter(sys) "  ▸  ";
  font-family:var(--font-mono); font-size:12px; letter-spacing:0.1em; color:var(--amber);
  white-space:pre;
}
.section-head .count{font-family:var(--font-mono); font-size:12px; letter-spacing:0.06em; color:var(--ink-faint); text-transform:uppercase;}
.section-head.with-tabs{align-items:flex-end;}
@media (max-width:640px){ .section-head{flex-wrap:wrap; row-gap:8px;} }

/* ---- Tabs ---- */
.tabs{display:flex; gap:8px;}
.tab{
  font-family:var(--font-mono); font-size:12px; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--ink-faint); background:var(--bg-sunken); border:1px solid var(--line); border-radius:2px;
  padding:8px 14px; cursor:pointer;
  transition:color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.tab:hover{color:var(--ink-soft); border-color:var(--line-strong);}
.tab.active{color:var(--amber); border-color:var(--amber); box-shadow:var(--glow-amber); text-shadow:0 0 10px var(--amber-glow);}
.tab:focus-visible{outline:2px solid var(--amber); outline-offset:3px;}

/* ---- Focus chips: toggle switches with an indicator light ---- */
.chips{display:flex; flex-wrap:wrap; gap:9px;}
.chip{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-mono); font-size:12px; letter-spacing:0.06em; text-transform:uppercase;
  padding:8px 13px; border-radius:2px; border:1px solid var(--line-strong);
  background:linear-gradient(to bottom, var(--bg-raised), var(--bg-sunken));
  color:var(--ink-soft); cursor:pointer;
  transition:border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.chip::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--ink-faint); transition:background .15s ease, box-shadow .15s ease;}
.chip:hover{border-color:var(--teal); color:var(--teal);}
.chip.active{border-color:var(--teal); color:var(--teal); box-shadow:var(--glow-teal);}
.chip.active::before{background:var(--teal); box-shadow:0 0 8px var(--teal);}
.chip:focus-visible{outline:2px solid var(--teal); outline-offset:2px;}

/* ---- Timeline ---- */
.timeline{display:flex; flex-direction:column;}
.tl-row{display:grid; grid-template-columns:130px 1fr; gap:20px; padding:20px 0; border-top:1px dashed var(--line-strong);}
.tl-row:first-child{border-top:none;}
.tl-when{font-family:var(--font-mono); font-size:11.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--amber); padding-top:3px;}
.tl-what h3{font-family:var(--font-body); font-size:17.5px; font-weight:600;}
.tl-what .org{color:var(--teal); font-size:14.5px; margin-top:3px; font-weight:600;}
.tl-what .tl-loc{color:var(--ink-faint); font-weight:400;}
.tl-what p{color:var(--ink-soft); font-size:15px; margin:8px 0 0; max-width:62ch;}
@media (max-width:640px){
  .tl-row{grid-template-columns:1fr; gap:6px;}
}

/* ---- Data / infra panel: an instrument display ---- */
.panel{
  background:var(--bg-panel); border:1px solid var(--line); border-radius:2px;
  padding:28px 30px; position:relative; overflow:hidden; color:var(--amber);
  box-shadow:inset 0 0 60px -30px var(--amber-glow);
}
.panel > *{color:var(--ink);}
.panel-title{
  font-family:var(--font-mono); font-size:12px; text-transform:uppercase; letter-spacing:0.14em;
  color:var(--ink-faint); margin-bottom:18px; padding-right:44px;
}
.panel-link{
  position:absolute; top:18px; right:18px; width:32px; height:32px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--line-strong); border-radius:2px; background:var(--bg-raised);
  color:var(--ink-soft); text-decoration:none; font-size:15px;
  transition:color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.panel-link:hover{color:var(--amber); border-color:var(--amber); box-shadow:var(--glow-amber);}
.panel-link:focus-visible{outline:2px solid var(--amber); outline-offset:2px;}
.stat-row{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:22px;}
/* LED segment readout in a recessed window */
.stat b.led{
  display:block; font-family:var(--font-led); font-weight:700; font-size:24px; line-height:1;
  color:var(--amber); text-shadow:0 0 12px var(--amber-glow);
  background:var(--bg-sunken); border:1px solid var(--line); border-radius:2px;
  box-shadow:inset 0 2px 10px rgba(0,0,0,0.6);
  height:54px; padding:0 14px; margin-bottom:8px; letter-spacing:0.04em;
  display:flex; align-items:center;
}
.stat .led-sym{font-family:var(--font-mono); font-weight:500; margin-right:4px;}
.stat > span{font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-faint); font-family:var(--font-mono);}
.stack-row{display:flex; flex-wrap:wrap; gap:8px;}
.stack-tag{
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:0.04em; padding:5px 10px;
  background:var(--bg-sunken); border:1px solid var(--line); border-radius:2px; color:var(--ink-soft);
}

/* ---- Projects: instrument panels with a stencilled serial ---- */
.projects{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; counter-reset:prj;}
@media (max-width:640px){ .projects{grid-template-columns:1fr;} .stat-row{grid-template-columns:1fr;} }
.project{
  position:relative; counter-increment:prj;
  border:1px solid var(--line); border-radius:2px; padding:20px 22px 20px;
  background:var(--bg-raised); display:flex; flex-direction:column; gap:10px;
  color:var(--line-strong);
  transition:border-color .2s ease, box-shadow .2s ease;
}
.project > *{color:var(--ink);}
.project::before{
  content:"PRJ-0" counter(prj);
  font-family:var(--font-mono); font-size:10px; letter-spacing:0.18em; color:var(--ink-faint);
}
.project:hover{border-color:rgba(240,160,60,0.35); box-shadow:0 0 26px -12px var(--amber-glow); color:var(--amber);}
.project .p-head{display:flex; align-items:start; justify-content:space-between; gap:10px;}
.project .p-head h3{min-width:0; overflow-wrap:anywhere;}
.project h3{font-family:var(--font-heading); font-weight:600; font-size:18px; letter-spacing:0.01em; line-height:1.3;}
.project h3 a{color:inherit; text-decoration:none;}
.project h3 a:hover{color:var(--amber);}
.project h3 a:focus-visible{outline:2px solid var(--amber); outline-offset:2px;}
.project .p-tag{
  font-family:var(--font-mono); font-size:10px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--teal); border:1px solid rgba(95,196,207,0.35); padding:3px 7px; border-radius:2px; white-space:nowrap;
}
.project p{color:var(--ink-soft); font-size:14.5px; margin:0; flex:1;}
.project .p-stack{display:flex; flex-wrap:wrap; gap:6px; margin-top:4px;}
.project .p-stack span{font-family:var(--font-mono); font-size:11px; color:var(--ink-faint);}
.project .p-stack span:not(:last-child)::after{content:"/"; margin-left:6px; color:var(--line-strong);}

.empty-note{color:var(--ink-faint); font-family:var(--font-mono); font-size:12px; letter-spacing:0.08em; text-transform:uppercase; padding:8px 0;}

/* ---- Writing mesh ---- */
.mesh{display:grid; grid-template-columns:repeat(4, 1fr); grid-auto-rows:118px; gap:14px; grid-auto-flow:dense;}
.tile{
  position:relative;
  display:flex; flex-direction:column; justify-content:space-between; gap:8px;
  border:1px solid var(--line); border-radius:2px; padding:16px 18px;
  background:var(--bg-raised); text-decoration:none; overflow:hidden;
  color:var(--line-strong);
  transition:border-color .2s ease, box-shadow .2s ease;
}
.tile > *{color:var(--ink);}
.tile:hover{border-color:rgba(95,196,207,0.35); box-shadow:0 0 26px -12px var(--teal-glow); color:var(--teal);}
.tile:focus-visible{outline:2px solid var(--teal); outline-offset:2px;}
.tile-head{display:flex; align-items:flex-start; justify-content:space-between; gap:10px;}
.tile h3{font-family:var(--font-body); font-size:14.5px; font-weight:600; line-height:1.3;}
.tile-date{font-size:10.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-faint) !important; white-space:nowrap; flex-shrink:0;}
.tile p{
  color:var(--ink-soft); font-size:13px; margin:0; flex:1; display:none;
  -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.tile-source{font-size:10.5px; letter-spacing:0.06em; color:var(--amber) !important;}

.tile.wide{grid-column:span 2;}
.tile.wide p{display:-webkit-box;}
.tile.tall{grid-row:span 2;}
.tile.tall p{display:-webkit-box;}
.tile.feature{
  grid-column:span 2; grid-row:span 2;
  background:var(--bg-sunken); border-color:var(--line-strong); padding:24px 26px;
  box-shadow:inset 0 0 50px -16px var(--amber-glow);
}
.tile.feature h3{font-family:var(--font-heading); font-size:20px; font-weight:600; letter-spacing:0.01em; color:var(--amber);}
.tile.feature .tile-date{font-size:11.5px;}
.tile.feature p{display:-webkit-box; -webkit-line-clamp:4; font-size:14.5px;}

.mesh-foot{grid-column:1 / -1; margin-top:2px; font-family:var(--font-mono); font-size:12px; letter-spacing:0.04em; color:var(--ink-faint);}
.mesh-foot a{color:var(--teal); text-decoration:none; border-bottom:1px solid rgba(95,196,207,0.3); padding-bottom:1px;}
.mesh-foot a:hover{border-bottom-color:var(--teal);}
.mesh-foot a:focus-visible{outline:2px solid var(--teal); outline-offset:3px;}

@media (max-width:900px) and (min-width:641px){
  .mesh{grid-template-columns:repeat(3, 1fr);}
}
@media (max-width:640px){
  .mesh{grid-template-columns:repeat(2, 1fr); grid-auto-rows:auto;}
  .tile{grid-column:span 1 !important; grid-row:auto !important;}
  .tile.feature{grid-column:span 2 !important;}
  .tile p{display:-webkit-box !important;}
}

/* ---- Footer: end-of-transmission status bar ---- */
footer{padding:44px 0 0; border-top:1px solid var(--line); display:grid; gap:22px;}
footer .f-name{font-family:var(--font-heading); font-weight:600; font-size:20px; text-transform:uppercase; letter-spacing:0.12em;}
footer .f-role{color:var(--ink-faint); font-family:var(--font-mono); font-size:12px; letter-spacing:0.08em; text-transform:uppercase; margin-top:6px;}
footer .f-links{display:flex; flex-wrap:wrap; gap:10px 22px;}
footer .f-links a{
  display:inline-flex; align-items:center; gap:8px; color:var(--ink-soft); text-decoration:none;
  font-family:var(--font-mono); font-size:12.5px; transition:color .15s ease;
}
footer .f-links a:hover{color:var(--amber);}
footer .f-links a:focus-visible{outline:2px solid var(--amber); outline-offset:3px;}
footer .f-links .icon svg{width:16px; height:16px;}
footer .f-meta{font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-faint);}
footer .f-meta::before{content:"■ END OF TRANSMISSION · "; color:var(--amber); opacity:0.8;}

/* ---- Motion: respect the visitor's reduced-motion setting ---- */
@media (prefers-reduced-motion:reduce){
  .eyebrow::after{animation:none;}
  *{transition:none !important;}
}