/* Studio Viso — webfonts.
   Archivo (variable: weight 100–900 + width 62–125) carries display, headline AND utility/meta (semi-condensed, plain zero, tabular figures).
   Geist carries body. No monospace: slashed/dotted zeros are off-brand.
   Loaded from Google Fonts. Replace with licensed binaries + @font-face when supplied. */
@import url("https://fonts.googleapis.com/css2?family=Archivo:ital,wdth,wght@0,62..125,100..900;1,62..125,100..900&family=Geist:wght@300..700&display=swap");

:root{
/* Primary */
--sv-black:#000000;
--sv-white:#FFFFFF;
/* Supporting neutrals */
--sv-offwhite:#F3F1EC;
--sv-bone:#E6E2DA;
--sv-grey-warm:#B8B2A8;
--sv-grey-cool:#8E939A;
--sv-smoke:#5C5C5C;
--sv-graphite:#2A2A2A;
--sv-charcoal:#141414;
/* Washes. Colour enters only through blend modes over imagery, or as a fade on the footer. Never a flat UI fill, never on type at reading sizes. */
--sv-wash-orange:#FF6A1A;
--sv-wash-blue:#1D6BFF;
--sv-wash-violet:#7A2CFF;
--sv-wash:var(--sv-wash-orange);
--sv-wash-fade:linear-gradient(90deg,var(--sv-bg) 0%,var(--sv-wash) 100%); /* @kind color */
--sv-wash-diagonal:linear-gradient(106deg,var(--sv-bg) 40%,color-mix(in oklab,var(--sv-wash) 22%,var(--sv-bg)) 75%,color-mix(in oklab,var(--sv-wash) 55%,var(--sv-bg)) 100%); /* @kind color */
/* Semantic — light surface (default) */
--sv-bg:var(--sv-white);
--sv-bg-alt:var(--sv-offwhite);
--sv-fg:var(--sv-black);
--sv-fg-muted:var(--sv-smoke);
--sv-fg-meta:var(--sv-grey-cool);
--sv-rule:var(--sv-black);
--sv-rule-soft:rgba(0,0,0,.18);
--sv-media-placeholder:var(--sv-graphite);
--sv-selection:var(--sv-black);
--sv-selection-fg:var(--sv-white);
}
/* Inverted surface — wrap any region in [data-theme="dark"] */
[data-theme="dark"]{
--sv-bg:var(--sv-black);
--sv-bg-alt:var(--sv-charcoal);
--sv-fg:var(--sv-white);
--sv-fg-muted:var(--sv-grey-warm);
--sv-fg-meta:var(--sv-grey-cool);
--sv-rule:var(--sv-white);
--sv-rule-soft:rgba(255,255,255,.22);
--sv-media-placeholder:var(--sv-graphite);
--sv-selection:var(--sv-white);
--sv-selection-fg:var(--sv-black);
}

:root{
/* Families */
--sv-font-display:"Archivo",system-ui,sans-serif;
--sv-font-body:"Geist",system-ui,sans-serif;
--sv-font-utility:"Archivo",system-ui,sans-serif;
--sv-font-mono:var(--sv-font-utility); /* legacy alias — there is no monospace in the system */
--sv-stretch-utility:87.5%; /* @kind font */
--sv-numerals:tabular-nums lining-nums; /* @kind other */
/* Weights */
--sv-weight-display:800;
--sv-weight-headline:700;
--sv-weight-medium:600;
--sv-weight-body:400;
--sv-weight-utility:500;
--sv-weight-light:300;
/* Sizes — fluid: mobile floor → desktop ceiling (1440+) */
--sv-size-display-xl:clamp(64px,11.5vw,200px);
--sv-size-display-l:clamp(48px,7.5vw,128px);
--sv-size-h1:clamp(36px,4.6vw,72px);
--sv-size-h2:clamp(28px,3vw,48px);
--sv-size-h3:clamp(20px,1.7vw,26px);
--sv-size-lead:clamp(19px,1.6vw,26px);
--sv-size-body:17px;
--sv-size-body-sm:15px;
--sv-size-caption:13px;
--sv-size-meta:11px;
--sv-size-nav:12px;
--sv-size-button:12px;
/* Line heights */
--sv-lh-display:0.9; /* @kind font */
--sv-lh-headline:1.0; /* @kind font */
--sv-lh-h2:1.05; /* @kind font */
--sv-lh-h3:1.2; /* @kind font */
--sv-lh-lead:1.35; /* @kind font */
--sv-lh-body:1.5; /* @kind font */
--sv-lh-meta:1.3; /* @kind font */
/* Tracking */
--sv-ls-display:-0.03em; /* @kind font */
--sv-ls-headline:-0.02em; /* @kind font */
--sv-ls-tight:-0.01em; /* @kind font */
--sv-ls-body:0; /* @kind font */
--sv-ls-meta:0.06em; /* @kind font */
--sv-ls-nav:0.08em; /* @kind font */
--sv-ls-button:0.10em; /* @kind font */
/* Measure */
--sv-measure-body:62ch; /* @kind font */
--sv-measure-lead:40ch; /* @kind font */
}

:root{
/* 4px base scale */
--sv-space-1:4px;
--sv-space-2:8px;
--sv-space-3:12px;
--sv-space-4:16px;
--sv-space-5:20px;
--sv-space-6:24px;
--sv-space-8:32px;
--sv-space-10:40px;
--sv-space-12:48px;
--sv-space-16:64px;
--sv-space-20:80px;
--sv-space-24:96px;
--sv-space-32:128px;
--sv-space-40:160px;
--sv-space-48:192px;
/* Semantic — fluid between mobile and desktop */
--sv-section-gap:clamp(96px,12vw,192px); /* @kind spacing */
--sv-block-gap:clamp(48px,6vw,96px); /* @kind spacing */
--sv-image-gap:var(--sv-gutter); /* @kind spacing */
--sv-text-image-gap:clamp(24px,3vw,48px); /* @kind spacing */
--sv-stack-gap:var(--sv-space-4); /* @kind spacing */
--sv-meta-gap:var(--sv-space-2); /* @kind spacing */
}

:root{
/* Breakpoints (reference only — CSS custom properties can't be used in @media) */
--sv-bp-mobile:640px; /* @kind other */
--sv-bp-tablet:1024px; /* @kind other */
--sv-bp-desktop:1440px; /* @kind other */
--sv-bp-wide:1920px; /* @kind other */
/* Mobile defaults (4 col) */
--sv-grid-cols:4; /* @kind other */
--sv-margin:20px;
--sv-gutter:16px;
--sv-max-width:1920px;
--sv-nav-height:56px;
}
@media (min-width:640px){:root{--sv-grid-cols:8; /* @kind other */--sv-margin:32px;--sv-gutter:20px;--sv-nav-height:64px}}
@media (min-width:1024px){:root{--sv-grid-cols:12; /* @kind other */--sv-margin:40px;--sv-gutter:24px;--sv-nav-height:72px}}
@media (min-width:1440px){:root{--sv-margin:48px;--sv-gutter:24px}}

:root{
/* Hard edges only — the system has no corner radius */
--sv-radius:0px;
/* Rule weights */
--sv-rule-hairline:1px; /* @kind other */
--sv-rule-medium:2px; /* @kind other */
--sv-rule-heavy:6px; /* @kind other */
/* Focus ring — visible, hard, inverted */
--sv-focus-ring:2px solid var(--sv-fg); /* @kind other */
--sv-focus-offset:3px; /* @kind other */
}

:root{
--sv-ratio-cinema:2.39/1; /* @kind other */ /* anamorphic hero strips, title frames */
--sv-ratio-wide:16/9; /* @kind other */ /* default film, video, hero */
--sv-ratio-photo:3/2; /* @kind other */ /* stills, contact sheet */
--sv-ratio-campaign:4/5; /* @kind other */ /* campaign, Instagram feed */
--sv-ratio-portrait:2/3; /* @kind other */ /* portraits, posters */
--sv-ratio-square:1/1; /* @kind other */ /* grid, Instagram square */
--sv-ratio-story:9/16; /* @kind other */ /* stories, reels, vertical titles */
/* The Viso angle — slope of the diagonal in the mark (20.64 : 72) */
--sv-angle:16deg; /* @kind other */
--sv-angle-run:0.2867; /* @kind other */ /* horizontal run per unit height */
}

:root{
/* Durations — cuts and wipes, not floats */
--sv-dur-cut:0ms; /* @kind other */
--sv-dur-fast:160ms; /* @kind other */
--sv-dur-base:320ms; /* @kind other */
--sv-dur-slow:560ms; /* @kind other */
--sv-dur-reveal:900ms; /* @kind other */
--sv-dur-hold:1400ms; /* @kind other */
/* Easing */
--sv-ease-out:cubic-bezier(.16,1,.3,1); /* @kind other */ /* reveals, wipes in */
--sv-ease-in:cubic-bezier(.7,0,.84,0); /* @kind other */ /* wipes out */
--sv-ease-inout:cubic-bezier(.83,0,.17,1); /* @kind other */ /* page transitions */
--sv-ease-hard:steps(1,end); /* @kind other */ /* hard cuts, inversion flicker */
/* Stagger */
--sv-stagger:60ms; /* @kind other */
}
@media (prefers-reduced-motion:reduce){:root{--sv-dur-fast:0ms; /* @kind other */--sv-dur-base:0ms; /* @kind other */--sv-dur-slow:0ms; /* @kind other */--sv-dur-reveal:0ms; /* @kind other */}}

:root{
--sv-z-base:0; /* @kind other */
--sv-z-media:1; /* @kind other */
--sv-z-caption:2; /* @kind other */
--sv-z-sticky:10; /* @kind other */
--sv-z-nav:100; /* @kind other */
--sv-z-menu:150; /* @kind other */
--sv-z-overlay:200; /* @kind other */
--sv-z-transition:300; /* @kind other */
--sv-z-cursor:400; /* @kind other */
}

/* Global type styles + resets. Class names mirror the type scale so consumers can apply them directly. */
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body.sv,.sv{margin:0;background:var(--sv-bg);color:var(--sv-fg);font-family:var(--sv-font-body);font-size:var(--sv-size-body);line-height:var(--sv-lh-body);font-weight:var(--sv-weight-body)}
.sv ::selection,.sv::selection{background:var(--sv-selection);color:var(--sv-selection-fg)}
.sv a{color:inherit;text-decoration:none}
.sv a:hover{text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:1px}
.sv :focus-visible{outline:var(--sv-focus-ring);outline-offset:var(--sv-focus-offset)}
.sv img,.sv video{display:block;max-width:100%}
/* Type scale */
.sv-display-xl{font-family:var(--sv-font-display);font-weight:var(--sv-weight-display);font-size:var(--sv-size-display-xl);line-height:var(--sv-lh-display);letter-spacing:var(--sv-ls-display);text-transform:uppercase;margin:0}
.sv-display-l{font-family:var(--sv-font-display);font-weight:var(--sv-weight-display);font-size:var(--sv-size-display-l);line-height:var(--sv-lh-display);letter-spacing:var(--sv-ls-display);text-transform:uppercase;margin:0}
.sv-h1{font-family:var(--sv-font-display);font-weight:var(--sv-weight-headline);font-size:var(--sv-size-h1);line-height:var(--sv-lh-headline);letter-spacing:var(--sv-ls-headline);margin:0}
.sv-h2{font-family:var(--sv-font-display);font-weight:var(--sv-weight-medium);font-size:var(--sv-size-h2);line-height:var(--sv-lh-h2);letter-spacing:var(--sv-ls-headline);margin:0}
.sv-h3{font-family:var(--sv-font-display);font-weight:var(--sv-weight-medium);font-size:var(--sv-size-h3);line-height:var(--sv-lh-h3);letter-spacing:var(--sv-ls-tight);margin:0}
.sv-lead{font-family:var(--sv-font-body);font-weight:var(--sv-weight-light);font-size:var(--sv-size-lead);line-height:var(--sv-lh-lead);letter-spacing:var(--sv-ls-tight);max-width:var(--sv-measure-lead);margin:0;text-wrap:pretty}
.sv-body{font-family:var(--sv-font-body);font-size:var(--sv-size-body);line-height:var(--sv-lh-body);max-width:var(--sv-measure-body);margin:0;text-wrap:pretty}
.sv-body-sm{font-family:var(--sv-font-body);font-size:var(--sv-size-body-sm);line-height:var(--sv-lh-body);margin:0}
.sv-caption{font-family:var(--sv-font-body);font-size:var(--sv-size-caption);line-height:1.4;color:var(--sv-fg-muted);margin:0}
.sv-meta{font-family:var(--sv-font-utility);font-stretch:var(--sv-stretch-utility);font-weight:var(--sv-weight-utility);font-size:var(--sv-size-meta);line-height:var(--sv-lh-meta);letter-spacing:var(--sv-ls-meta);text-transform:uppercase;color:var(--sv-fg-meta);margin:0;font-variant-numeric:var(--sv-numerals);white-space:nowrap}
.sv-nav{font-family:var(--sv-font-utility);font-stretch:var(--sv-stretch-utility);font-variant-numeric:var(--sv-numerals);font-weight:var(--sv-weight-utility);font-size:var(--sv-size-nav);line-height:1;letter-spacing:var(--sv-ls-nav);text-transform:uppercase;margin:0;white-space:nowrap}
.sv-button{font-family:var(--sv-font-utility);font-stretch:var(--sv-stretch-utility);font-variant-numeric:var(--sv-numerals);font-weight:var(--sv-weight-utility);font-size:var(--sv-size-button);line-height:1;letter-spacing:var(--sv-ls-button);text-transform:uppercase;white-space:nowrap}
/* Outline type: hairline stroke, transparent fill. Display sizes only. */
.sv-outline{-webkit-text-stroke:1px currentColor;color:transparent;paint-order:stroke fill}
@media (min-width:1024px){.sv-outline{-webkit-text-stroke:1.5px currentColor}}
/* Colour wash over imagery */
.sv-wash{position:absolute;inset:0;background:var(--sv-wash);mix-blend-mode:multiply;pointer-events:none}
.sv-wash-screen{mix-blend-mode:screen}.sv-wash-hardlight{mix-blend-mode:hard-light}.sv-wash-difference{mix-blend-mode:difference}
/* Layout */
.sv-container{padding-left:var(--sv-margin);padding-right:var(--sv-margin);max-width:var(--sv-max-width);margin-inline:auto}
.sv-grid{display:grid;grid-template-columns:repeat(var(--sv-grid-cols),minmax(0,1fr));column-gap:var(--sv-gutter)}
.sv-rule{border:0;border-top:var(--sv-rule-hairline) solid var(--sv-rule);margin:0}
.sv-rule-soft{border:0;border-top:var(--sv-rule-hairline) solid var(--sv-rule-soft);margin:0}
/* V geometry clips */
.sv-clip-v{clip-path:polygon(0 0,100% 0,100% 100%,calc(100% - 100% * var(--sv-angle-run) * .5) 100%)}
.sv-clip-slash{clip-path:polygon(28.67% 0,100% 0,71.33% 100%,0 100%)}