/* Max Motin — portfolio. Global styles, type, tokens, interactions.
   One free variable typeface (Roboto Flex, SIL Open Font License), single red accent. */

@font-face{
  font-family:'Roboto Flex';
  /* Free self-hosted variable font (OFL). 'truetype-variations' so iOS Safari treats it
     as a proper variable font. Axes: wght 100–1000, wdth 25–151. */
  src:url('../fonts/RobotoFlex_Variable.ttf') format('truetype-variations');
  font-weight:100 1000; font-stretch:25% 151%; font-style:normal; font-display:swap;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; background:#FCFCFA; overflow-x:hidden; }
body{ font-family:'Roboto Flex',system-ui,sans-serif; font-style:normal; font-synthesis:none; -webkit-text-size-adjust:100%; }
/* keep the variable font upright everywhere — Safari otherwise applies the font's
   slant axis and renders an oblique. Pin slnt to 0 (quotes are safe here in the CSS
   file; only inline-style quotes get mangled by some hosts). */
*{ font-style:normal; font-synthesis:none; font-variation-settings:'slnt' 0; }
::selection{ background:#CC2229; color:#FCFCFA; }
a{ color:inherit; text-decoration:none; }

/* ===== card / row hovers (Work index + Home cards) ===== */
.mm-card .mm-ttl,.mm-row .mm-ttl{ transition:color .35s ease; }
.mm-card:hover .mm-ttl,.mm-row:hover .mm-ttl{ color:#CC2229 !important; }      /* black → red */
.mm-row .mm-num{ transition:color .35s ease; }
.mm-row:hover .mm-num{ color:#CC2229 !important; }
.mm-row .mm-go{ transition:transform .4s cubic-bezier(.2,.7,.2,1), color .35s ease; }
.mm-row:hover .mm-go{ transform:translateX(8px); color:#CC2229 !important; }    /* arrow nudges right */

/* ===== link hovers ===== */
.mm-link{ transition:color .25s ease; }
.mm-link:hover{ color:#000 !important; }                                        /* red → ink */
.mm-c{ transition:color .25s ease; }
.theme-light .mm-c:hover{ color:#000 !important; }
.theme-dark  .mm-c:hover{ color:#FCFCFA !important; }
.case-c{ transition:color .25s ease; }
.case-c:hover{ color:#000 !important; }
.sf-c{ transition:color .25s ease; }
[data-sf="light"] .sf-c:hover{ color:#000 !important; }
[data-sf="dark"]  .sf-c:hover{ color:#FCFCFA !important; }

/* ===== header / sticky reveal / menu ===== */
.mm-nlink,.mm-nav,.mm-xc > div,.mm-xc span{ transition:opacity .3s ease, transform .35s cubic-bezier(.2,.7,.2,1); }
.mm-nlink:hover,.mm-nav:hover{ opacity:0.55; }                                  /* on red bg → lighten */
.mm-head{ transform:translateY(-100%); transition:transform .42s cubic-bezier(.45,0,.15,1); will-change:transform; }
.mm-head.is-shown{ transform:translateY(0); }
.mm-burger > div,.mm-burger span{ transition:color .25s ease, background .25s ease; }
.mm-burger:hover > div{ color:#CC2229 !important; }
.mm-burger:hover span{ background:#CC2229 !important; }
.mm-xc:hover > div,.mm-xc:hover span{ opacity:0.55; }

/* ===== menu overlay open/close + scroll lock ===== */
.mm-menu{ display:none; }
.mm-menu.is-open{ display:flex; }
body.mm-locked{ overflow:hidden; }

/* ===== mobile: keep the top bar / sticky header on-screen =====
   On phones the wordmark + tagline + "Europe" + Menu don't fit on one line,
   so the bar overflows past the viewport. Drop the middle items progressively. */
@media (max-width:680px){ .mm-h-tag{ display:none; } }
@media (max-width:400px){ .mm-h-loc{ display:none; } }

/* mobile hero: drop the "Contact →" label so the social links + copyright fit one line.
   On very narrow phones let the bottom bar wrap (copyright onto its own line) instead of
   breaking words / overflowing. */
@media (max-width:480px){
  .hero-contact-label{ display:none; }
  .hero-foot{ flex-wrap:wrap; row-gap:10px; }
}

/* mobile: nbsp-bound hero headlines (About + case pages) can be a single
   unbreakable run wider than a phone. Cap the size so the run fits cleanly,
   and allow a last-resort break so nothing ever leaves the screen. */
@media (max-width:600px){
  .mm-hero{ font-size:clamp(26px,7.5vw,56px) !important; overflow-wrap:anywhere; }
}