/* ==========================================================================
   Brwana — teaser
   --------------------------------------------------------------------------
   The artwork is the supplied Illustrator SVG, inlined verbatim in index.html.
   Nothing in this file redraws or restyles it. The only rules that reach
   inside the SVG are on the countdown <text> node, and they do two things:
     1. add the tracking that the Illustrator export dropped
     2. add the requested Futura fallback chain after the artwork's own stack
   ========================================================================== */

/* --- Futura Light Condensed ------------------------------------------------
   The supplied TTF is the exact face the SVG asks for (PostScript name
   FuturaBT-LightCondensed, family "Futura LtCn BT"). It is subset to the ten
   digits, converted to woff2, and embedded below as base64 — 1.2 KB, less
   than the HTTP round trip it replaces. Embedding it means the number can
   never drop to a substitute face because of a missing file, a stale cache
   or a host that rewrites asset paths. Both family names the artwork asks
   for resolve to it, so the SVG markup needs no change, and the page
   fetches no font file at all.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "FuturaBT-LightCondensed";
  src: url(data:font/woff2;base64,d09GMgABAAAAAAOkAAoAAAAABaQAAANZAAEAAQAAAAAAAAAAAAAAAAAAAAAAAAAABk4ALAqHJIV9ATYCJAMaCxgABCAFBgcgGzAEAJ6FsTPtwoFN2IyoqPgRltdo8Dzfju/cXh/yCtwZA0PVCBqSaxel8UEGAZM0tzfV/yHRiHtHqSrXwDl10TqgjWY6syzeqPJFLXC+aANOH0UXONIB/c+LVGbLyFkNfzeAlimTUbjawPTz8E/p1YqpqrW0V7Jq8sqysvJymQ9A+p11NsghiVRbb3kjc+22y2NAUAgwzuiEgzooQep/CUgaOkJHOUH4kniCsDtPC+oBaAUWV8NehabLq6srGic5OFk6e9ouDeP6HXVy9bJzdHK1c2teZYfeVBt3W27YrahhH2rjbsoOvaE69lauYy2XPo79HKX4uto4Ewy+QXfB9fVtGWKpjjVAPQabauOut+Fy1VozxmNnAGpe9woNskmCfGDJCMtFim/TDKN6A3XJdbJVA46aKu2C6bmCbqSBc+1VmyxKiW1X83jOlLCRWutDL3oBT97OdRatLMd+dn7WJcrBJs+0Lq7TLOsZ60YssYL6qu3264+ckLQBdq5g5AZf7hoEbKPf9DfLN2P64ELYLgIx2x0KYbtNdS3uj5ucHEgoLBiY/3n6o4HPivSDIb1tgM32IcCle2yh/v7sm4YhkzutxRPj/9b0fjyv8D2HsgSMdCSZUlYM7i1sSMUCAo052LWaVFuv9NCBvoPxBoVxxd1R+DgMDJMg1hqKWjd5tbK8fXeygjpKNGTbMveHHiaeto1pP1+L4KTwD8NcIp0X+ub61QWXoevbs41TF6rXYlNj63PBnD0Qkb1Xq9TR1pGM5biQKFvZev/vhfW/fzLdY9r+v5PWvp+LcrJtTlh0nFyvo6aXPUEjMgab25l9sq8sNSbpUBe8pVevlq/t04PPq2eMv18MzFIiqkfEVi+u+dP2YcB/R1UYqTChgFCJQZLK0nOIhfLGhxoNNk6xF+k09mD3IHfh5ax+FO141bmxB63Thn/uVtU6rhcFM8OPZ0+37ZaXd+5NZePHwZz3pPod1b2cCSqJMdzZyOqWfW2pscmHq1S28ujf8r5zZvhl9Yyx98sB2coAIIAgw0t/qzTSyvhqj65YlRK1CaL/Yf9CgLDbXmCLeAp7giYCeyyI/21A6H5K0+9pqUIoYT7p1KUqXejEIGrTEgGcqIsdBegIwVVE26K24j9UBQAAAAA=) format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: block; /* never show the number in a substitute face */
}

@font-face {
  font-family: "Futura LtCn BT";
  src: url(data:font/woff2;base64,d09GMgABAAAAAAOkAAoAAAAABaQAAANZAAEAAQAAAAAAAAAAAAAAAAAAAAAAAAAABk4ALAqHJIV9ATYCJAMaCxgABCAFBgcgGzAEAJ6FsTPtwoFN2IyoqPgRltdo8Dzfju/cXh/yCtwZA0PVCBqSaxel8UEGAZM0tzfV/yHRiHtHqSrXwDl10TqgjWY6syzeqPJFLXC+aANOH0UXONIB/c+LVGbLyFkNfzeAlimTUbjawPTz8E/p1YqpqrW0V7Jq8sqysvJymQ9A+p11NsghiVRbb3kjc+22y2NAUAgwzuiEgzooQep/CUgaOkJHOUH4kniCsDtPC+oBaAUWV8NehabLq6srGic5OFk6e9ouDeP6HXVy9bJzdHK1c2teZYfeVBt3W27YrahhH2rjbsoOvaE69lauYy2XPo79HKX4uto4Ewy+QXfB9fVtGWKpjjVAPQabauOut+Fy1VozxmNnAGpe9woNskmCfGDJCMtFim/TDKN6A3XJdbJVA46aKu2C6bmCbqSBc+1VmyxKiW1X83jOlLCRWutDL3oBT97OdRatLMd+dn7WJcrBJs+0Lq7TLOsZ60YssYL6qu3264+ckLQBdq5g5AZf7hoEbKPf9DfLN2P64ELYLgIx2x0KYbtNdS3uj5ucHEgoLBiY/3n6o4HPivSDIb1tgM32IcCle2yh/v7sm4YhkzutxRPj/9b0fjyv8D2HsgSMdCSZUlYM7i1sSMUCAo052LWaVFuv9NCBvoPxBoVxxd1R+DgMDJMg1hqKWjd5tbK8fXeygjpKNGTbMveHHiaeto1pP1+L4KTwD8NcIp0X+ub61QWXoevbs41TF6rXYlNj63PBnD0Qkb1Xq9TR1pGM5biQKFvZev/vhfW/fzLdY9r+v5PWvp+LcrJtTlh0nFyvo6aXPUEjMgab25l9sq8sNSbpUBe8pVevlq/t04PPq2eMv18MzFIiqkfEVi+u+dP2YcB/R1UYqTChgFCJQZLK0nOIhfLGhxoNNk6xF+k09mD3IHfh5ax+FO141bmxB63Thn/uVtU6rhcFM8OPZ0+37ZaXd+5NZePHwZz3pPod1b2cCSqJMdzZyOqWfW2pscmHq1S28ujf8r5zZvhl9Yyx98sB2coAIIAgw0t/qzTSyvhqj65YlRK1CaL/Yf9CgLDbXmCLeAp7giYCeyyI/21A6H5K0+9pqUIoYT7p1KUqXejEIGrTEgGcqIsdBegIwVVE26K24j9UBQAAAAA=) format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: block;
}

:root {
  /* the artwork's own background colour */
  --bg: #0f0f0f;

  /* Stage width == the SVG canvas width.
     The reference is this SVG rendered at viewport width, so tracking 100vw
     reproduces it exactly (1445px viewport -> 176px folder). The clamp only
     bites at the extremes: it keeps the composition present on phones and
     stops it ballooning on 4K. Change these two numbers to taste. */
  --stage: clamp(1000px, 100vw, 1900px);

  /* Countdown tracking, in em so it scales with the artwork.
     Derived from the reference: Illustrator centres the tracked line on
     x=960 and exports its left edge at x=877.14, which solves to 0.2093085em
     (Illustrator tracking ~209/1000). See script.js for the centring rule. */
  --countdown-track: 0.2093085em;
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  background: var(--bg);
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;          /* no scrolling in either direction */
  overscroll-behavior: none; /* no rubber-banding on iOS / trackpads */
}

body {
  width: 100vw;
  height: 100dvh;
  background: var(--bg);
  color: #aaa;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* --- stage ---------------------------------------------------------------
   The artwork keeps its original 1920x1080 viewBox but no longer paints a
   background of its own — the black comes from the page. The composition
   sits dead centre of that canvas, so centring the canvas centres the
   composition, and wherever the canvas runs past the viewport there is
   simply nothing painted there. That is why the composition never has to be
   re-laid out for mobile, and why the canvas edge cannot show a seam.
   -------------------------------------------------------------------------- */
.stage {
  position: fixed;
  inset: 0;
}

.stage > svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--stage);
  height: auto;               /* aspect ratio preserved by the viewBox */
  display: block;
  pointer-events: none;       /* the folder is not clickable */
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}

/* --- countdown ------------------------------------------------------------
   Position, size (26 units), fill (#aaa) and font family all come from the
   artwork itself. These rules only add the tracking and the fallback chain.
   The line is re-centred analytically in script.js when the digit count
   changes, so the number never shifts — the fixed-width behaviour the brief
   asks for, achieved by construction rather than by a container.
   -------------------------------------------------------------------------- */
.stage text {
  font-family: "FuturaBT-LightCondensed", "Futura LtCn BT", Futura, "Futura PT",
    "Century Gothic", Arial, sans-serif;
  letter-spacing: var(--countdown-track);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  /* keep glyph advances fractional so the tracking stays metric-exact at
     every stage size instead of being rounded by hinting */
  text-rendering: geometricPrecision;
}

/* brand name for screen readers and crawlers only — never rendered */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}