/* Studio Viscom — production stylesheet. Self-contained: no external requests. */
/* Studio Viscom typefaces — bundled locally, latin subset. No external requests. */
@font-face {
  font-family: 'Big Shoulders Display';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('fonts/big-shoulders-display-200-900.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('fonts/jetbrains-mono-400-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('fonts/sora-300-600.woff2') format('woff2');
}

:root{
  /* Brand core — 2026 reboot. Red is retired from the system; it survives only inside the mark. */
  --vc-ink:#14120f;
  --vc-graphite:#3d3a34;
  --vc-ivory:#f6f2ea;
  --vc-sand:#e8dfd1;
  --vc-terracotta:#c05b3a;
  --vc-terracotta-deep:#a44a2c;
  --vc-inkblue:#22385a;
  --vc-inkblue-deep:#1a2c47;

  /* Mark palette — the eleven original 1982 colours. Use ONLY inside the mark. */
  --mark-black:#1a1a18;
  --mark-purple:#814997;
  --mark-green:#32813c;
  --mark-red:#e3000f;
  --mark-olive:#8b8132;
  --mark-sky:#a0daf7;
  --mark-pink:#db7daa;
  --mark-lime:#8bc73c;
  --mark-orange:#e69532;
  --mark-white:#ffffff;

  /* Neutral ramp, keyed to the ink */
  --n-0:#ffffff;
  --n-50:#faf8f4;
  --n-100:#f6f2ea;
  --n-200:#e8dfd1;
  --n-300:#d3c9b9;
  --n-400:#a9a094;
  --n-500:#7d766c;
  --n-600:#5c564e;
  --n-700:#3d3a34;
  --n-800:#26241f;
  --n-900:#14120f;
  --n-950:#0b0a08;

  /* Semantic — text */
  --text-primary:var(--vc-ink);
  --text-secondary:var(--n-600);
  --text-muted:var(--n-400);
  --text-accent:var(--vc-terracotta);
  --text-deep:var(--vc-inkblue);
  --text-on-dark:var(--vc-ivory);
  --text-on-dark-muted:rgba(246,242,234,.66);
  --text-on-accent:var(--vc-ivory);

  /* Semantic — surfaces */
  --surface-page:var(--vc-ivory);
  --surface-raised:var(--n-0);
  --surface-second:var(--vc-sand);
  --surface-inverse:var(--vc-ink);
  --surface-inverse-raised:var(--n-800);
  --surface-accent:var(--vc-terracotta);
  --surface-deep:var(--vc-inkblue);
  --surface-media:rgba(20,18,15,.07);

  /* Semantic — lines & focus */
  --border-subtle:rgba(20,18,15,.12);
  --border-strong:rgba(20,18,15,.28);
  --border-inverse:rgba(246,242,234,.2);
  --focus-ring:var(--vc-inkblue);

  /* Status — drawn from the brand pair, never invented */
  --status-success:#4f6b46;
  --status-warning:var(--vc-terracotta);
  --status-danger:#8f2f22;
  --status-info:var(--vc-inkblue);

  /* Protection gradients for type over photography */
  --scrim-bottom:linear-gradient(to top,rgba(20,18,15,.88) 0%,rgba(20,18,15,.45) 44%,rgba(20,18,15,0) 100%); /* @kind other */
  --scrim-flat:rgba(20,18,15,.56);
}

:root{
  --font-display:"Big Shoulders Display","Haettenschweiler",sans-serif;
  --font-body:"Sora","Helvetica Neue",sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;

  --weight-thin:300;
  --weight-regular:400;
  --weight-medium:500;
  --weight-bold:700;
  --weight-black:800;

  /* Display — condensed, set in Big Shoulders. Thin + black in one line is the brand's signature. */
  --size-display-1:104px;
  --size-display-2:72px;
  --size-display-3:46px;
  --lh-display:0.86; /* @kind other */
  --ls-display:-0.01em; /* @kind other */

  /* Headings */
  --size-h1:38px;
  --size-h2:28px;
  --size-h3:20px;
  --lh-heading:1.04; /* @kind other */

  /* Body — Sora */
  --size-body-lg:18px;
  --size-body:16px;
  --size-body-sm:14px;
  --lh-body:1.68; /* @kind other */

  /* Micro — mono, tracked. Frame numbers, timecodes, labels. */
  --size-micro:11px;
  --size-caption:12px;
  --ls-micro:0.18em; /* @kind other */
  --ls-eyebrow:0.28em; /* @kind other */
}

:root{
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --space-7:48px;
  --space-8:64px;
  --space-9:96px;
  --space-10:128px;

  --gutter:4px;
  --container-max:1280px;
  --container-pad:44px;
  --measure:66ch; /* @kind other */
}

:root{
  /* The mark is a square. Nothing in this system is rounded. */
  --radius-none:0px;
  --radius-sm:2px;
  --radius-pill:999px;
  --radius-default:var(--radius-none);
  --border-width:1px;
  --border-width-strong:2px;
}

:root{
  --shadow-none:none; /* @kind shadow */
  --shadow-sm:0 1px 2px rgba(20,18,15,.08);
  --shadow-md:0 8px 26px rgba(20,18,15,.10);
  --shadow-lg:0 22px 60px rgba(20,18,15,.18);
  --shadow-hairline:inset 0 0 0 1px var(--border-subtle);
  --shadow-focus:0 0 0 2px var(--surface-page),0 0 0 4px var(--focus-ring);
}

:root{
  --duration-fast:120ms; /* @kind other */
  --duration-base:220ms; /* @kind other */
  --duration-slow:420ms; /* @kind other */
  --duration-reveal:700ms; /* @kind other */
  --ease-standard:cubic-bezier(.2,0,.2,1); /* @kind other */
  --ease-out:cubic-bezier(0,0,.2,1); /* @kind other */
  --transition-default:all var(--duration-base) var(--ease-standard); /* @kind other */
  --hover-lift:none; /* @kind other */
  --press-scale:.98; /* @kind other */
  --media-zoom:1.04; /* @kind other */
}

/* Lockup geometry. Every value is em-relative to the lockup's own font-size, so one
   set of numbers holds at any size. Tracking is divided across n-1 gaps and the trailing
   gap is pulled off with a negative margin, which is what keeps STUDIO flush from V to M. */
:root{
  --logo-mark-size:0.62em; /* @kind other */
  --logo-mark-gap:0.14em; /* @kind other */
  --logo-studio-size:0.42em; /* @kind other */
  --logo-studio-track:0.4358em; /* @kind other */
  --logo-tagline-size:0.108em; /* @kind other */
  --logo-tagline-track:0.2186em; /* @kind other */
  --logo-compact-studio-size:0.62em; /* @kind other */
  --logo-compact-studio-track:0.8521em; /* @kind other */
  --logo-compact-word-size:1.55em; /* @kind other */
  --logo-compact-gap:0.5em; /* @kind other */
  --logo-clearspace:0.5em; /* @kind other */
  --logo-min-stacked:40px; /* @kind other */
}

body{margin:0;font-family:var(--font-body);font-size:var(--size-body);line-height:var(--lh-body);color:var(--text-primary);background:var(--surface-page);-webkit-font-smoothing:antialiased}
a{color:var(--vc-terracotta);text-decoration:none;transition:color var(--duration-fast) var(--ease-standard)}
a:hover{color:var(--vc-terracotta-deep)}
::selection{background:var(--vc-ink);color:var(--vc-ivory)}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.vc-display{font-family:var(--font-display);font-weight:var(--weight-black);font-size:var(--size-display-2);line-height:var(--lh-display);letter-spacing:var(--ls-display);text-transform:uppercase}
.vc-micro{font-family:var(--font-mono);font-size:var(--size-micro);letter-spacing:var(--ls-micro);text-transform:uppercase;color:var(--text-muted)}
.vc-tagline{font-family:var(--font-body);font-size:var(--size-caption);letter-spacing:var(--ls-eyebrow);text-transform:lowercase;color:var(--vc-terracotta)}


html{scroll-behavior:smooth}
img,svg,video{max-width:100%}
img[width][height]{height:auto}
::selection{background:var(--vc-terracotta);color:var(--vc-ivory)}

/* Buttons — Studio Viscom Button component, static form */
.btn{font-family:var(--font-display);font-weight:var(--weight-bold);text-transform:uppercase;letter-spacing:.06em;border-radius:var(--radius-none);border:var(--border-width) solid transparent;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);transition:var(--transition-default);text-decoration:none;line-height:1}
.btn:active{transform:scale(var(--press-scale))}
.btn--lg{font-size:22px;padding:16px 34px}
.btn--md{font-size:18px;padding:12px 24px}
.btn--primary{background:var(--surface-accent);border-color:var(--surface-accent);color:var(--text-on-accent)}
.btn--primary:hover{background:var(--vc-terracotta-deep);border-color:var(--vc-terracotta-deep);color:var(--text-on-accent)}
.btn--outline-light{background:transparent;border-color:var(--border-inverse);color:var(--text-on-dark)}
.btn--outline-light:hover{background:var(--vc-ivory);border-color:var(--vc-ivory);color:var(--vc-ink)}

/* Form controls — Field / Input / Select / Textarea */
.vc-field{display:block}
.vc-field > span{display:block;margin-bottom:var(--space-2);font-family:var(--font-mono);font-size:var(--size-micro);letter-spacing:var(--ls-micro);text-transform:uppercase;color:var(--text-secondary)}
.vc-input,.vc-select,.vc-textarea{width:100%;box-sizing:border-box;font-family:var(--font-body);font-size:var(--size-body);color:var(--text-primary);background:var(--surface-raised);padding:13px 14px;border:var(--border-width) solid var(--border-subtle);border-radius:var(--radius-none);outline:none;transition:border-color var(--duration-fast) var(--ease-standard)}
.vc-input:focus,.vc-select:focus,.vc-textarea:focus{border-color:var(--vc-ink)}
.vc-textarea{resize:vertical;line-height:var(--lh-body)}
.vc-select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--text-primary) 50%),linear-gradient(135deg,var(--text-primary) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 12px) 50%;background-size:6px 6px,6px 6px;background-repeat:no-repeat}

/* PlayOverlay */
.vc-play{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;cursor:pointer;background:var(--scrim-bottom)}
.vc-play > span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:72px;height:72px;display:flex;align-items:center;justify-content:center;background:var(--vc-ivory);transition:var(--transition-default)}
.vc-play:hover > span{background:var(--vc-terracotta)}
.vc-play:hover > span svg{fill:var(--vc-ivory)}
@media (max-width:620px){.vc-play > span{width:56px;height:56px}}