/* ==========================================================================
   Staré byty — Film Pitch Design System
   Global entry point. Consumers link THIS file only.
   This file is a manifest of @imports — no rules live here directly.
   ========================================================================== */

/* ==========================================================================
   Staré byty — Webfonts
   --------------------------------------------------------------------------
   Two families, chosen to feel like a film pitch packed into a moving box:

   • Courier Prime — the typewriter face every screenplay is written in.
     Used as the brand's "stamped / labelled" voice: titles, eyebrows,
     metadata, shipping-label captions. Carries the archival, typed feel.

   • Spectral — a warm, literary serif for body copy, synopsis and the
     emotional, intimate register of the film.

   Both are open-source (SIL OFL) and served from Google Fonts.
   ========================================================================== */

/* latin-ext */
@font-face {
  font-family: 'Courier Prime';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/003f35a5-2d75-4ce3-bcee-488314fd1dc0.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Courier Prime';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/c19cc8c1-bce6-4f66-8559-56a41b8b9f03.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Courier Prime';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/6952c27d-ee1d-45d5-86e0-e1f377407a3a.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Courier Prime';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/7b6e4179-b6f9-4d86-b1f8-e726a9a0d6bd.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Courier Prime';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/2fbfcb9d-98fc-480c-be35-67596be4c94b.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Courier Prime';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/8c5eff02-71fa-4989-88c9-97d161856366.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Courier Prime';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/868d3d16-bd89-4e21-95b3-95b60b19118d.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Courier Prime';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/32c2184d-f3f9-4cc7-bae7-0faa65e0310c.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Spectral';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/fonts/f471e383-ad30-4aac-8026-e559a5382886.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Spectral';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/fonts/662192fd-5cfc-4d4e-96b1-5e6da7bef5cb.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Spectral';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/fonts/2d269a64-d08e-4637-ad41-785f674a0016.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Spectral';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/fonts/712028d8-cb38-4211-b6b7-34e46911af86.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Spectral';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/fonts/a5c9109b-f176-467e-bddd-c10fe7cc9220.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Spectral';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/40c3a409-bbed-48bd-b129-318a4bf69786.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Spectral';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/e9347a72-81ae-4ff1-a27f-13b9742d8c3c.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Spectral';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/a26c82bf-8ee4-4efe-9229-f0ecb2d31ec3.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Spectral';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/ca1ed95b-80a3-49c0-80a1-02f3b1544bca.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Spectral';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/b81f5ab7-96f7-4e75-ab9b-6fdb2035e18a.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/fonts/53a40c82-8424-47ff-9d40-07fc14926d18.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/fonts/44db248f-c6cc-4f95-94c7-d7f96e930a71.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/fonts/8ad93c2e-6142-4049-8209-a88c262ff06a.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/fonts/0ecc0ce7-553f-4059-9a6e-d576daadd3af.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/fonts/2f14879a-c71e-4c90-ade5-9f7e8e9298ae.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/5886f5a1-f1c8-4cb9-9e71-7cba9afe39fc.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/9a2df268-dba3-41a1-8ba2-54420d7dc5cd.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/4388ea1a-2d65-4a1c-95cc-8e3dbd59f23b.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/0173f004-6fa1-402b-8ca3-0e9ee6f74576.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/f28eeb5a-6548-4e1e-91df-36fb6e6787b3.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/3d400dca-7264-4af1-995e-df3d6ce54dc4.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/af201a7a-818f-4832-85d9-f9369ea9e5d7.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/889b4564-2880-4df0-bb53-1913141f6978.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/24bc84da-1af7-42c1-8997-1e56ac29761e.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/9abfa75e-e4d8-4ae3-bca8-fca289f37da0.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/9b5c6dd3-6447-473b-b59b-18d023594126.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/555fc045-a230-49e2-a54b-00808876d116.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/4a9f2a6f-2165-4fbc-861a-397d5550ea38.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/bbe68389-42fc-49cf-a1c6-63211dfe6691.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/53fcd9e2-5f31-4bae-9964-cbad26cf1a6f.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ==========================================================================
   Staré byty — Color
   --------------------------------------------------------------------------
   The palette is a moving box caught in late-afternoon apartment light:
   kraft cardboard, brown gummed packing tape, manila labels, screenplay
   ink — warmed and de-saturated to match the film's nostalgic stills.
   Base scale first, then semantic aliases. Use the aliases in components.
   ========================================================================== */

:root {
  /* --- Paper / surface scale (manila → kraft → cardboard) ------------- */
  --paper-00: #FBF6EC;   /* lightest manila — page light */
  --paper-0:  #F4ECDB;   /* default page — warm manila */
  --paper-1:  #EBE0C9;   /* raised label paper */
  --paper-2:  #E0D0B2;   /* aged paper */
  --kraft-1:  #CDA877;   /* cardboard, light */
  --kraft-2:  #BE9560;   /* cardboard */
  --kraft-3:  #9C7544;   /* cardboard, shadowed edge */
  --kraft-4:  #6F5230;   /* deep kraft / box interior */

  /* --- Tape (brown gummed parcel tape) -------------------------------- */
  --tape:        #B07C44;          /* solid tape */
  --tape-edge:   #97632F;          /* tape torn edge / shadow */
  --tape-film:   rgba(176,124,68,0.62); /* translucent tape laid over paper */
  --tape-sheen:  rgba(255,247,230,0.20);/* light skidding across tape */

  /* --- Ink (warm near-black, like an old typewriter ribbon) ----------- */
  --ink-0: #211C15;   /* primary text — warm black */
  --ink-1: #3A332A;   /* strong text */
  --ink-2: #5A5043;   /* secondary text */
  --ink-3: #857A68;   /* muted / captions */
  --ink-4: #B3A78F;   /* placeholder */

  /* --- Stamp & film accents ------------------------------------------- */
  --stamp-red:  #9E3B2D;   /* rubber-stamp ink — "FRAGILE", key accent */
  --stamp-red-2:#7E2C20;   /* pressed / dark */
  --film-rose:  #A98A9A;   /* dusty mauve from the stills */
  --film-slate: #6B6770;   /* cold slate — window light */
  --film-sage:  #7E8472;   /* washed green */

  /* --- Hairlines & shadows -------------------------------------------- */
  --line-ink:   rgba(33,28,21,0.16);  /* drawn pencil line on paper */
  --line-soft:  rgba(33,28,21,0.08);
  --shadow-box: 0 1px 0 rgba(255,255,255,0.35) inset,
                0 18px 40px -22px rgba(45,33,18,0.55);
  --shadow-label: 0 2px 0 rgba(120,90,45,0.25),
                  0 10px 22px -14px rgba(45,33,18,0.45);

  /* =================================================================== */
  /* SEMANTIC ALIASES — reference these in components                    */
  /* =================================================================== */
  --bg-page:        var(--paper-0);
  --bg-page-bright: var(--paper-00);
  --bg-raised:      var(--paper-1);
  --bg-box:         var(--kraft-2);
  --bg-box-deep:    var(--kraft-4);
  --bg-ink:         var(--ink-0);

  --text-primary:   var(--ink-0);
  --text-strong:    var(--ink-1);
  --text-secondary: var(--ink-2);
  --text-muted:     var(--ink-3);
  --text-on-box:    #FBF4E6;   /* type on cardboard */
  --text-on-ink:    #EFE6D4;   /* type on warm-black */

  --accent:         var(--stamp-red);
  --accent-press:   var(--stamp-red-2);

  --surface-card:   var(--paper-00);
  --surface-label:  var(--paper-1);
  --border-card:    var(--line-ink);
  --border-strong:  var(--ink-1);

  --tape-band:      var(--tape);
  --tape-overlay:   var(--tape-film);
}

/* A page default so isolated specimen cards inherit the brand surface. */
html { background: var(--bg-page); color: var(--text-primary); }

/* ==========================================================================
   Staré byty — Typography
   --------------------------------------------------------------------------
   Two voices:
   • MONO (Courier Prime) — the "typed / stamped" voice. Screenplay ink.
     Eyebrows, titles, labels, metadata, box stencilling. Often UPPERCASE
     with generous letter-spacing so it reads like a shipping stamp.
   • SERIF (Spectral) — the human voice. Synopsis, statements, long reads.
   Scale is a major-third-ish ramp tuned for a long single-page pitch.
   ========================================================================== */

:root {
  /* --- Families ------------------------------------------------------- */
  --font-mono:  'Courier Prime', 'Courier New', ui-monospace, monospace;
  --font-serif: 'Spectral', Georgia, 'Times New Roman', serif;

  /* --- Type scale (px) ------------------------------------------------ */
  --fs-overline: 0.75rem;   /* 12 — stamped eyebrow */
  --fs-caption:  0.8125rem; /* 13 — labels, metadata */
  --fs-small:    0.9375rem; /* 15 */
  --fs-body:     1.0625rem; /* 17 — base reading */
  --fs-body-lg:  1.25rem;   /* 20 — lead paragraphs */
  --fs-h5:       1.5rem;    /* 24 */
  --fs-h4:       1.9375rem; /* 31 */
  --fs-h3:       2.5rem;    /* 40 */
  --fs-h2:       3.25rem;   /* 52 */
  --fs-h1:       4.5rem;    /* 72 — section heroes */
  --fs-display:  7.5rem;    /* 120 — film title */

  /* --- Weights -------------------------------------------------------- */
  --fw-light:   300; /* @kind font */
  --fw-regular: 400; /* @kind font */
  --fw-medium:  500; /* @kind font */
  --fw-semi:    600; /* @kind font */
  --fw-bold:    700; /* @kind font */

  /* --- Line heights --------------------------------------------------- */
  --lh-tight:   1.04; /* @kind other */
  --lh-snug:    1.18; /* @kind other */
  --lh-normal:  1.5;  /* @kind other */
  --lh-relaxed: 1.66; /* @kind other */

  /* --- Letter-spacing (the "stamp" tracking) -------------------------- */
  --ls-stamp:   0.28em;  /* @kind other */
  --ls-stamp-sm:0.16em;  /* @kind other */
  --ls-title:   0.04em;  /* @kind other */
  --ls-tight:  -0.01em;  /* @kind other */

  /* --- Semantic roles ------------------------------------------------- */
  --type-display: var(--fw-bold) var(--fs-display)/var(--lh-tight) var(--font-mono);
  --type-title:   var(--fw-bold) var(--fs-h1)/var(--lh-tight) var(--font-mono);
  --type-lead:    var(--fw-light) var(--fs-body-lg)/var(--lh-relaxed) var(--font-serif);
  --type-body:    var(--fw-regular) var(--fs-body)/var(--lh-relaxed) var(--font-serif);
  --type-label:   var(--fw-bold) var(--fs-caption)/var(--lh-normal) var(--font-mono);
}

/* ---- Specimen helpers (also handy defaults for cards) --------------- */
.t-overline {
  font: var(--fw-bold) var(--fs-overline)/1 var(--font-mono);
  letter-spacing: var(--ls-stamp);
  text-transform: uppercase;
  color: var(--text-muted);
}
.t-label {
  font: var(--fw-bold) var(--fs-caption)/var(--lh-normal) var(--font-mono);
  letter-spacing: var(--ls-stamp-sm);
  text-transform: uppercase;
}
.t-title {
  font: var(--type-title);
  letter-spacing: var(--ls-title);
  text-transform: uppercase;
}
.t-lead  { font: var(--type-lead); color: var(--text-secondary); }
.t-body  { font: var(--type-body); color: var(--text-primary); }

/* ==========================================================================
   Staré byty — Spacing, radii, layout
   --------------------------------------------------------------------------
   An 8px base grid. Radii are deliberately small — cardboard and paper
   have crisp, slightly imperfect corners, never pill-shaped softness.
   ========================================================================== */

:root {
  /* --- Space scale (8px base) ---------------------------------------- */
  --space-1:  0.25rem;  /*  4 */
  --space-2:  0.5rem;   /*  8 */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.5rem;   /* 24 */
  --space-6:  2rem;     /* 32 */
  --space-7:  3rem;     /* 48 */
  --space-8:  4rem;     /* 64 */
  --space-9:  6rem;     /* 96 */
  --space-10: 8rem;     /* 128 */
  --space-section: clamp(4rem, 9vw, 8rem); /* @kind spacing */

  /* --- Radii (crisp paper corners) ----------------------------------- */
  --radius-0:  0px;       /* torn / stamped elements — no rounding */
  --radius-1:  2px;       /* labels, buttons */
  --radius-2:  4px;       /* cards */
  --radius-3:  6px;       /* large surfaces */

  /* --- Borders -------------------------------------------------------- */
  --bw-hair:   1px;
  --bw-rule:   2px;       /* drawn rule / box seam */
  --bw-heavy:  3px;

  /* --- Layout ----------------------------------------------- @kind other */
  --measure:      66ch;        /* @kind other */
  --content-max:  1200px;      /* @kind spacing */
  --content-wide: 1440px;      /* @kind spacing */
  --gutter:       clamp(1.25rem, 5vw, 5rem); /* @kind spacing */
}

/* ==========================================================================
   Staré byty — Effects, textures & signature motifs
   --------------------------------------------------------------------------
   The brand is physical: cardboard, manila paper, brown gummed tape and
   rubber stamps. These utilities reproduce those surfaces with pure CSS
   (layered gradients, torn-edge clip-paths, stamp frames) so any component
   or screen can be "packed" consistently. Motion is minimal and dry —
   nothing bounces; things settle like paper.
   ========================================================================== */

:root {
  --ease-paper: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --dur-fast:   140ms;  /* @kind other */
  --dur-base:   240ms;  /* @kind other */
  --dur-slow:   520ms;  /* @kind other */
  --tape-tilt:  -1.6deg;/* @kind other */
}

/* --- KRAFT / CARDBOARD surface ---------------------------------------- */
.fx-kraft {
  background-color: var(--kraft-2);
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.10), rgba(80,55,25,0.12)),
    repeating-linear-gradient(90deg,
      rgba(120,86,44,0.05) 0 2px, rgba(120,86,44,0) 2px 5px);
  color: var(--text-on-box);
  box-shadow: var(--shadow-box);
}

/* --- MANILA PAPER surface --------------------------------------------- */
.fx-paper {
  background-color: var(--paper-00);
  background-image:
    radial-gradient(120% 100% at 0% 0%, rgba(255,255,255,0.6), rgba(255,255,255,0) 40%),
    repeating-linear-gradient(96deg, rgba(140,110,60,0.035) 0 3px, rgba(140,110,60,0) 3px 7px);
  border: var(--bw-hair) solid var(--line-soft);
  box-shadow: 0 14px 30px -22px rgba(45,33,18,0.5);
}

/* --- BROWN PACKING TAPE strip ----------------------------------------- */
/* Use on a short element; place over a seam or corner. Slightly tilted,
   translucent so paper texture reads through, with a torn fibrous edge. */
.fx-tape {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  /* extra horizontal padding so text clears the serrated ends */
  padding: var(--space-2) calc(var(--space-5) + 4px);
  background:
    linear-gradient(100deg, var(--tape-sheen), rgba(255,255,255,0) 38%),
    var(--tape);
  opacity: 0.94;
  color: var(--text-on-box);
  font: var(--fw-bold) var(--fs-caption)/1 var(--font-mono);
  letter-spacing: var(--ls-stamp-sm);
  text-transform: uppercase;
  transform: rotate(var(--tape-tilt));
  box-shadow: 0 6px 16px -10px rgba(45,33,18,0.6);
  /* serrated / torn ends — like tape pulled from a dispenser cutter */
  clip-path: polygon(
    0 0, 100% 0,
    calc(100% - 5px) 12.5%, 100% 25%,
    calc(100% - 5px) 37.5%, 100% 50%,
    calc(100% - 5px) 62.5%, 100% 75%,
    calc(100% - 5px) 87.5%, 100% 100%,
    0 100%,
    5px 87.5%, 0 75%,
    5px 62.5%, 0 50%,
    5px 37.5%, 0 25%,
    5px 12.5%
  );
}
.fx-tape::after { /* crepe-tape ribbing */
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg,
    rgba(120,80,35,0.16) 0 6px, rgba(120,80,35,0) 6px 12px);
  pointer-events: none;
}

/* --- RUBBER STAMP frame ----------------------------------------------- */
/* Inky, slightly rotated, double-ruled box — like FRAGILE on a carton. */
.fx-stamp {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: var(--bw-rule) solid var(--stamp-red);
  outline: var(--bw-hair) solid var(--stamp-red);
  outline-offset: 2px;
  color: var(--stamp-red);
  font: var(--fw-bold) var(--fs-overline)/1 var(--font-mono);
  letter-spacing: var(--ls-stamp);
  text-transform: uppercase;
  transform: rotate(-3deg);
  opacity: 0.92;
}

/* --- TORN PAPER edge (apply to bottom of a band) ---------------------- */
.fx-torn-bottom {
  -webkit-mask:
    linear-gradient(#000 0 0) top/100% calc(100% - 9px) no-repeat,
    repeating-linear-gradient(90deg,
      #000 0 6px, rgba(0,0,0,0.4) 6px 11px, #000 11px 18px) bottom/100% 10px repeat-x;
          mask:
    linear-gradient(#000 0 0) top/100% calc(100% - 9px) no-repeat,
    repeating-linear-gradient(90deg,
      #000 0 6px, rgba(0,0,0,0.4) 6px 11px, #000 11px 18px) bottom/100% 10px repeat-x;
}

/* --- Photo treatment: warm, slightly faded archival grade ------------- */
.fx-archival {
  filter: saturate(0.86) contrast(0.96) sepia(0.10) brightness(1.02);
}

/* --- Drawn hairline rule ---------------------------------------------- */
.fx-rule {
  height: var(--bw-rule);
  background: repeating-linear-gradient(90deg,
    var(--ink-1) 0 7px, transparent 7px 11px); /* dashed, hand-drawn feel */
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}