/* ══════════════════════════════════════════════════════════ VITOR — Portfolio Type: Archivo (variable width display) / Instrument Sans / JetBrains Mono ══════════════════════════════════════════════════════════ */ :root{ /* ink */ --bg: #050506; --bg-2: #0a0a0c; --bg-3: #101013; --fg: #F2F1EE; --fg-2: #9A9AA2; --fg-3: #9A9AA2; /* was #5C5C66 — only 3.08:1 on the page black, under AA */ --fg-4: #33333B; --line: rgba(255,255,255,.08); --line-2: rgba(255,255,255,.14); --accent: #4A86FF; --accent-2: #A8C7FF; /* type */ --display: "Archivo", "Helvetica Neue", Arial, sans-serif; --sans: "Instrument Sans", "Helvetica Neue", Arial, sans-serif; --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* rhythm */ --shell: 1320px; --pad: clamp(20px, 5vw, 72px); --sec-y: clamp(96px, 14vh, 200px); /* motion */ --ease: cubic-bezier(.22,1,.36,1); --ease-io: cubic-bezier(.65,.05,.36,1); } *,*::before,*::after{ box-sizing:border-box; } html{ background:var(--bg); -webkit-text-size-adjust:100%; scroll-behavior:smooth; } html.is-booting{ overflow:hidden; } body{ margin:0; background:var(--bg); color:var(--fg); font-family:var(--sans); font-size:clamp(15px,.55vw + 13px,17px); line-height:1.6; font-weight:400; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; /* `clip`, never `hidden`. overflow-x:hidden forces overflow-y to compute as `auto`, which turns into a scroll container and breaks position:sticky for everything inside it — including the hero stage. Desktop browsers mask this by propagating body overflow to the viewport; mobile Safari does not, so the hero video scrolled away instead of pinning. `clip` guards against horizontal overflow without creating a scroll container. */ overflow-x:clip; } img,video{ display:block; max-width:100%; } /* The rule above is an author rule, so it outranks the browser's own [hidden]{display:none} and would keep a hidden