/* ============================================================
   hugo-marinho.com
   Portfolio. Warm paper, editorial type, technical precision.
   ============================================================ */
:root{
  --paper:#FBF8F3;
  --paper-2:#F4EEE4;
  --paper-3:#EDE5D8;
  --ink:#17130F;
  --ink-2:#3B342C;
  --muted:#6B6156;
  --line:#E5DCCE;
  --line-2:#D6CABA;
  --accent:#C1552C;
  --accent-deep:#963C1A;
  --accent-soft:#F6E7DE;
  --serif:'Fraunces', Georgia, 'Times New Roman', serif;
  --sans:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* system mono: technical texture for labels and figures, no extra font to load */
  --mono:ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  --wrap:1080px;
}
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:var(--accent-deep); text-decoration:none; }
a:hover{ color:var(--accent); }
::selection{ background:var(--accent-soft); color:var(--ink); }
.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 clamp(20px,5vw,48px); }

/* ---------- accessibility ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--accent); outline-offset:3px; border-radius:2px;
}
:focus:not(:focus-visible){ outline:none; }
.skip-link{
  position:fixed; top:10px; left:10px; z-index:200; background:var(--ink); color:var(--paper);
  font-size:14px; font-weight:600; padding:11px 18px; border-radius:3px;
  transform:translateY(-160%); transition:transform .2s ease;
}
.skip-link:focus{ transform:translateY(0); color:var(--paper); }

/* ---------- typography ---------- */
.eyebrow{
  font-family:var(--mono); font-size:11.5px; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); margin:0 0 16px;
}
.lead{ font-size:clamp(16.5px,1.5vw,18.5px); line-height:1.72; color:var(--ink-2); }
p{ margin:0 0 1.05em; }
p:last-child{ margin-bottom:0; }
.sec-title{
  font-family:var(--serif); font-weight:600; font-size:clamp(28px,3.8vw,42px);
  line-height:1.1; letter-spacing:-0.02em; margin:0 0 18px;
}

/* ---------- header ---------- */
.site-head{ background:var(--paper); border-bottom:1px solid var(--line); }
.site-head .wrap{ display:flex; align-items:center; justify-content:space-between; height:64px; gap:18px; }
.brand{ display:flex; align-items:center; gap:10px; color:var(--ink); font-weight:600; font-size:15px; }
.brand img{ height:24px; width:auto; }
.head-nav{ display:flex; align-items:center; gap:clamp(14px,2.2vw,28px); }
.head-nav a{ font-size:14px; color:var(--ink-2); font-weight:500; }
.head-nav a:hover{ color:var(--accent-deep); }
.head-nav .nav-cta{
  background:var(--ink); color:var(--paper); padding:9px 16px; border-radius:3px; font-weight:600;
  transition:background .18s ease;
}
.head-nav .nav-cta:hover{ background:var(--accent-deep); color:var(--paper); }
@media (max-width:720px){ .head-nav .nav-hide-sm{ display:none; } }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-weight:600; font-size:16px; min-height:48px; padding:13px 24px;
  border-radius:3px; border:1.5px solid var(--ink); cursor:pointer;
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.btn-primary{ background:var(--ink); color:var(--paper); }
.btn-primary:hover{ background:var(--accent-deep); border-color:var(--accent-deep); color:var(--paper); }
.btn-secondary{ background:transparent; color:var(--ink); }
.btn-secondary:hover{ background:var(--ink); color:var(--paper); }

/* ---------- section shell ---------- */
.sec{ padding:clamp(60px,8vw,110px) 0; border-top:1px solid var(--line); }
.sec-head{ margin-bottom:clamp(28px,4vw,48px); }
.sec-lead{ max-width:58ch; }

/* ---------- hero ---------- */
.hero{ padding:clamp(46px,7vw,96px) 0 clamp(44px,6vw,80px); }
.hero-grid{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:clamp(30px,5vw,64px); align-items:center; }
.hero h1{
  font-family:var(--serif); font-weight:600; margin:0 0 22px;
  font-size:clamp(32px,4.7vw,54px); line-height:1.09; letter-spacing:-0.025em; max-width:19ch;
}
.hero h1 .em{ color:var(--accent-deep); font-style:italic; }
.hero-sub{ font-size:clamp(16px,1.6vw,18.5px); line-height:1.7; color:var(--muted); max-width:48ch; margin:0 0 30px; }
.hero-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.hero-portrait{ position:relative; }
.hero-portrait img{
  width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; object-position:50% 32%; border-radius:4px;
}
.hero-portrait::after{
  content:''; position:absolute; inset:0; border:1.5px solid var(--accent);
  border-radius:4px; transform:translate(13px,13px); z-index:-1;
}
@media (max-width:820px){
  .hero-grid{ grid-template-columns:1fr; gap:32px; }
  .hero-figure{ order:-1; max-width:260px; }
  .hero-portrait::after{ transform:translate(10px,10px); }
}

/* ---------- track record: figures, not decoration ---------- */
.facts{ background:var(--paper-2); border-top:1px solid var(--line); padding:clamp(30px,4vw,44px) 0; }
.fact-row{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(18px,3vw,36px);
}
.fact-row li{ display:flex; flex-direction:column; gap:5px; }
.fact-row b{
  font-family:var(--serif); font-weight:600; font-size:clamp(26px,3.2vw,36px);
  line-height:1; letter-spacing:-0.02em; color:var(--ink);
}
.fact-row span{ font-size:13.5px; line-height:1.45; color:var(--muted); }
.fact-note{ font-family:var(--mono); font-size:11.5px; letter-spacing:.04em; color:var(--muted); margin:22px 0 0; }
@media (max-width:720px){ .fact-row{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; } }

/* ---------- flagship ---------- */
.flagship{ border-top:1px solid var(--line); }
.flag-grid{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(34px,5vw,72px); align-items:center; }
.owned{ margin:28px 0 0; }
.owned h3{
  font-family:var(--mono); font-size:11.5px; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); margin:0 0 14px;
}
.owned ul{ list-style:none; margin:0; padding:0; display:grid; gap:11px; }
.owned li{
  position:relative; padding-left:20px; font-size:15.5px; line-height:1.6; color:var(--ink-2);
}
.owned li::before{
  content:''; position:absolute; left:0; top:10px; width:7px; height:1.5px; background:var(--accent);
}
.tech{
  margin:24px 0 0; font-family:var(--mono); font-size:12.5px; line-height:1.7;
  color:var(--muted); letter-spacing:.01em;
}
.tech span{
  display:block; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); margin-bottom:5px;
}
/* One item per line, always. Run together with separators, the list broke
   mid item at some column widths and stranded a middot at the end of a line
   at others. Three short phrases are more scannable stacked anyway. */
.tech em{ font-style:normal; display:block; line-height:1.85; }
.tech a{ color:var(--muted); text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--line-2); }
.tech a:hover{ color:var(--accent-deep); text-decoration-color:var(--accent); }
.flag-figure{ justify-self:center; width:100%; max-width:300px; }
.figure-note{
  margin:14px 0 0; text-align:center; font-family:var(--mono);
  font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
}
@media (max-width:880px){
  .flag-grid{ grid-template-columns:1fr; gap:36px; }
  .flag-figure{ order:-1; max-width:260px; }
}

/* phone frame, reused for any portrait product shot */
.phone{
  display:block; padding:8px; border-radius:32px;
  background:linear-gradient(160deg,#26221d,#141210); border:1px solid var(--line-2);
  box-shadow:0 40px 80px -40px rgba(23,19,15,.55);
}
.phone-screen{ position:relative; display:block; border-radius:25px; overflow:hidden; background:#000; }
.phone-screen video, .phone-screen img{ display:block; width:100%; height:auto; }
.phone-notch{
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:36%; height:14px; background:#0d0b0a; border-radius:0 0 11px 11px; z-index:2;
}

/* ---------- projects ---------- */
.projects{ display:grid; gap:clamp(28px,4vw,52px); }
.project{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(22px,3.5vw,44px); align-items:center;
  padding-top:clamp(28px,4vw,48px); border-top:1px solid var(--line);
}
.project:first-child{ border-top:0; padding-top:0; }
.project-shot{
  display:block; border:1px solid var(--line); border-radius:5px; overflow:hidden;
  background:var(--paper-2); transition:border-color .22s ease;
}
.project-shot img,
.project-shot video{ width:100%; height:auto; display:block; filter:saturate(.96); transition:filter .3s ease; }
.project:hover .project-shot{ border-color:var(--line-2); }
.project:hover .project-shot img,
.project:hover .project-shot video{ filter:saturate(1.02); }
.project-body h3{
  font-family:var(--serif); font-weight:600; font-size:clamp(21px,2.6vw,27px);
  line-height:1.2; letter-spacing:-0.015em; margin:0 0 10px;
}
.project-body h3 a{ color:var(--ink); }
.project-body h3 a:hover{ color:var(--accent-deep); }
.project-what{ font-size:16px; line-height:1.65; color:var(--ink-2); margin:0 0 18px; }
.project-meta{ margin:0; display:grid; gap:12px; }
.project-meta dt{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); margin-bottom:3px;
}
.project-meta dd{ margin:0; font-size:15px; line-height:1.62; color:var(--ink-2); }
/* Portrait screenshots render at phone scale instead of towering over the
   row. Constraining the width keeps the aspect ratio, so nothing is cropped. */
.project-shot-tall{ max-width:212px; justify-self:center; }

/* The one project with no interface to show, so the verdict is the visual.
   The claim leads and is struck out. Below it, what the wallet really made,
   and then what the strategy earns once you are not sitting in the exchange.
   Every figure is measured, so the slider moves real numbers. */
.verdict{
  justify-self:center; width:100%; max-width:312px;
  border:1px solid var(--line); border-radius:5px; background:var(--paper-2);
  padding:24px 22px; display:grid; gap:22px;
  --lat:#3D6B52;
}
.verdict.is-loss{ --lat:var(--accent); }
.vd-block + .vd-block{ border-top:1px solid var(--line-2); padding-top:20px; }
.vd-label{
  margin:0 0 10px; display:flex; align-items:center; flex-wrap:wrap; gap:8px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted);
}
.vd-tag{
  font-family:var(--mono); font-size:9.5px; font-weight:700; letter-spacing:.12em;
  color:var(--paper); background:var(--accent-deep); border-radius:2px; padding:3px 7px;
}
.vd-big{
  margin:0 0 8px; font-family:var(--serif); font-weight:600;
  font-size:clamp(34px,4.4vw,44px); line-height:1; letter-spacing:-0.025em; color:var(--muted);
}
.vd-big s{ text-decoration:line-through; text-decoration-thickness:2px; text-decoration-color:var(--accent); }
.vd-sub{ margin:0; font-size:12.5px; line-height:1.5; color:var(--muted); }
.vd-mid{
  margin:0; font-family:var(--serif); font-weight:600; font-size:clamp(21px,2.6vw,26px);
  line-height:1.15; letter-spacing:-0.02em; color:var(--ink);
}
.vd-mid span{ font-family:var(--sans); font-weight:400; font-size:12.5px; color:var(--muted); }

.lat-read{ margin:0 0 16px; display:grid; gap:5px; }
.lat-read b{
  font-family:var(--serif); font-weight:600; font-size:clamp(25px,3.1vw,31px);
  line-height:1; letter-spacing:-0.02em; color:var(--lat);
  font-variant-numeric:tabular-nums; transition:color .18s ease;
}
.lat-read span{ font-size:12.5px; line-height:1.45; color:var(--muted); min-height:2.6em; }
.lat-range{
  -webkit-appearance:none; appearance:none; width:100%; height:22px;
  background:transparent; cursor:pointer; display:block; margin:0;
}
.lat-range::-webkit-slider-runnable-track{ height:2px; background:var(--line-2); border-radius:2px; }
.lat-range::-moz-range-track{ height:2px; background:var(--line-2); border-radius:2px; }
.lat-range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:16px; height:16px; margin-top:-7px;
  border-radius:50%; background:var(--lat); border:2px solid var(--paper-2);
  box-shadow:0 0 0 1px var(--lat); transition:background .18s ease, box-shadow .18s ease;
}
.lat-range::-moz-range-thumb{
  width:14px; height:14px; border-radius:50%; background:var(--lat);
  border:2px solid var(--paper-2); box-shadow:0 0 0 1px var(--lat);
}
.lat-note{ margin:12px 0 0; font-size:11.5px; line-height:1.5; color:var(--muted); }
@media (pointer:coarse){
  .lat-range{ height:44px; }
  .lat-range::-webkit-slider-thumb{ width:22px; height:22px; margin-top:-10px; }
  .lat-range::-moz-range-thumb{ width:20px; height:20px; }
}

@media (max-width:820px){
  /* Stacked, the shot runs the full content width. A capped box floating in
     a wide column left an obvious hole beside it. */
  .project{ grid-template-columns:1fr; gap:20px; }
  .project-shot-tall{ max-width:212px; justify-self:start; }
  .verdict{ justify-self:start; max-width:100%; }
}
.more-note{
  margin:clamp(32px,4vw,48px) 0 0; padding-top:clamp(22px,3vw,30px);
  border-top:1px solid var(--line); font-size:15.5px; color:var(--muted);
}

/* ---------- experience ---------- */
.experience{ background:var(--paper-2); }
.role-lead{
  background:var(--paper); border:1px solid var(--line); border-radius:6px;
  padding:clamp(24px,3.4vw,38px); margin-bottom:clamp(26px,3.4vw,38px);
}
.role-head{ display:flex; flex-wrap:wrap; gap:10px 24px; justify-content:space-between; align-items:baseline; margin-bottom:20px; }
.role-head h3{ font-family:var(--serif); font-weight:600; font-size:clamp(21px,2.6vw,27px); line-height:1.2; margin:0 0 4px; }
.role-org{ margin:0; font-size:16px; font-weight:600; color:var(--accent-deep); }
.role-when{ margin:0; font-family:var(--mono); font-size:12px; letter-spacing:.04em; color:var(--muted); }
.role-points{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.role-points li{ position:relative; padding-left:20px; font-size:15.5px; line-height:1.6; color:var(--ink-2); }
.role-points li::before{ content:''; position:absolute; left:0; top:10px; width:7px; height:1.5px; background:var(--accent); }

.timeline{ list-style:none; margin:0; padding:0; }
.timeline li{
  display:grid; grid-template-columns:120px minmax(0,1fr) minmax(0,1.1fr);
  gap:6px 20px; align-items:baseline;
  padding:15px 0; border-top:1px solid var(--line-2);
}
.timeline li:last-child{ border-bottom:1px solid var(--line-2); }
.tl-when{ font-family:var(--mono); font-size:12px; color:var(--muted); letter-spacing:.03em; }
.tl-role{ font-size:15.5px; font-weight:600; color:var(--ink); }
.tl-org{ font-size:15px; color:var(--muted); }
@media (max-width:700px){
  .timeline li{ grid-template-columns:1fr; gap:2px; padding:14px 0; }
  .tl-when{ order:-1; }
}

/* ---------- about ---------- */
.about-grid{ display:grid; grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr); gap:clamp(26px,5vw,58px); align-items:start; }
.about-portrait img{ border-radius:4px; width:100%; height:auto; }
@media (max-width:760px){ .about-grid{ grid-template-columns:1fr; } .about-portrait{ max-width:380px; } }

/* ---------- contact ---------- */
.contact{ background:var(--ink); color:var(--paper); }
.contact .sec-title{ color:var(--paper); }
.contact p{ color:#D8CFC3; }
.contact .eyebrow{ color:#A99C8B; }
.contact-grid{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(28px,4.5vw,60px); align-items:start; }
.contact-list{ list-style:none; margin:0; padding:0; }
.contact-list li{
  display:flex; flex-wrap:wrap; gap:4px 20px; justify-content:space-between; align-items:baseline;
  padding:14px 0; border-top:1px solid #322C25;
}
.contact-list li:last-child{ border-bottom:1px solid #322C25; }
.contact-list span{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#A99C8B;
}
.contact-list a{ font-size:16px; font-weight:500; color:var(--paper); }
.contact-list a:hover{ color:var(--accent); }
@media (max-width:760px){ .contact-grid{ grid-template-columns:1fr; } }

/* ---------- footer ---------- */
.site-foot{ border-top:1px solid var(--line); padding:32px 0; background:var(--paper); }
.foot-bottom{
  display:flex; flex-wrap:wrap; gap:10px 20px; justify-content:space-between;
  font-family:var(--mono); font-size:12px; letter-spacing:.03em; color:var(--muted);
}

/* ---------- 404 ---------- */
.err{ min-height:60vh; display:grid; place-items:center; text-align:center; padding:70px 0; }
.err h1{ font-family:var(--serif); font-weight:600; font-size:clamp(42px,8vw,84px); line-height:1; margin:0 0 16px; letter-spacing:-0.03em; }
.err p{ color:var(--muted); max-width:44ch; margin:0 auto 28px; }

/* ---------- reveal ---------- */
/* Only hide when scripting can actually bring it back. If app.js fails to
   load, or the browser has JS off, the page renders in full instead of
   presenting an empty sheet of paper. */
@media (scripting: enabled){
  [data-reveal]{ opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1); }
}
[data-reveal].in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.001s !important; transition-duration:.001s !important; }
  [data-reveal]{ opacity:1 !important; transform:none !important; }
}

/* ---------- arcade: Neon Run, playable in the page ----------
   The canvas is its own dark world, so the panel around it goes dark too
   rather than dropping a black rectangle onto the paper. The chrome uses the
   site accent; the neon inside the canvas stays the game's own. */
.arcade{ background:var(--ink); border-top:1px solid rgba(255,255,255,.07); }
.arcade .eyebrow{ color:rgba(255,255,255,.42); }
.arcade .sec-title{ color:#FBF8F3; }
.arcade .lead{ color:rgba(251,248,243,.72); }
.arcade-head{ max-width:62ch; margin:0 0 clamp(26px,3.5vw,40px); }
.arcade-panel{
  border:1px solid rgba(255,255,255,.12); border-radius:6px; background:#0b0f0c;
  padding:clamp(14px,2vw,20px); max-width:860px;
}
.arcade-mount{ position:relative; }
.arcade-mount[hidden]{ display:none; }
#arcadeCanvas{
  display:block; width:100%; height:auto; border-radius:3px; background:#070a08;
  touch-action:manipulation; -webkit-user-select:none; user-select:none; cursor:pointer;
}
.arcade-btn{
  display:block; width:100%; padding:clamp(34px,7vw,68px) 20px;
  background:transparent; border:1px dashed rgba(255,255,255,.18); border-radius:3px;
  color:#E8814C; font-family:var(--mono); font-size:13px; letter-spacing:.16em;
  text-transform:uppercase; cursor:pointer; transition:border-color .2s ease, color .2s ease, background .2s ease;
}
.arcade-btn:hover{ border-color:#E8814C; color:#F6B48D; background:rgba(232,129,76,.10); }
.arcade-btn[hidden]{ display:none; }
.arcade-note{
  margin:14px 0 0; font-family:var(--mono); font-size:11.5px; letter-spacing:.06em;
  color:rgba(255,255,255,.4);
}

/* game over card, sits over the canvas */
.nr-over{
  position:absolute; inset:0; z-index:6; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:9px; background:rgba(6,8,10,.94);
  border-radius:3px; padding:16px; text-align:center; font-family:var(--mono); overflow:auto;
}
.nr-title{ color:#ff5c5c; font-weight:700; font-size:clamp(17px,3.2vw,22px); letter-spacing:.06em; }
.nr-score{ color:#cdd6cf; font-size:13px; }
.nr-entry{ display:flex; gap:8px; margin-top:2px; }
.nr-input{
  background:#12160f; border:1px solid rgba(255,255,255,.18); color:#FBF8F3;
  font-family:var(--mono); font-size:14px; padding:9px 12px; border-radius:3px;
  width:min(150px,42vw); outline:none;
}
.nr-input:focus{ border-color:var(--accent); }
.nr-submit,.nr-again,.nr-leave{
  font-family:var(--mono); font-weight:700; font-size:12px; letter-spacing:.08em;
  text-transform:uppercase; padding:9px 16px; border-radius:3px; cursor:pointer; border:0;
}
.nr-submit,.nr-again{ background:var(--accent); color:#FBF8F3; }
.nr-submit:hover,.nr-again:hover{ background:var(--accent-deep); }
.nr-leave{ background:transparent; color:rgba(255,255,255,.55); border:1px solid rgba(255,255,255,.2); }
.nr-leave:hover{ color:#FBF8F3; border-color:rgba(255,255,255,.4); }
.nr-actions{ display:flex; gap:8px; align-items:center; margin-top:4px; }
.nr-board{ width:min(250px,92%); }
.nr-bh{ color:rgba(255,255,255,.45); font-size:9px; letter-spacing:.14em; margin-bottom:5px; }
.nr-row{
  display:flex; align-items:center; gap:8px; padding:2px 8px; font-size:12px;
  color:rgba(255,255,255,.68); line-height:1.7;
}
.nr-row.me{ background:rgba(193,85,44,.22); border-radius:3px; color:#F0A278; font-weight:700; }
.nr-rk{ width:20px; text-align:right; color:rgba(255,255,255,.32); }
.nr-nm{ flex:1; text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nr-sc{ font-weight:700; }
.nr-empty{ color:rgba(255,255,255,.32); font-size:11px; }