/*
Theme Name: Viva Cee
Theme URI: https://vivacee.example
Description: Editorial portfolio theme for Viva Cee (mix / master / produce), built for editing with Elementor. Child theme of Hello Elementor. The bespoke interactive audio player & before/after A-B toggle are intentionally deferred to a companion plugin; this theme ships the full visual design as Elementor-friendly component classes.
Author: Lee Dobson
Template: hello-elementor
Version: 0.1.0
Text Domain: viva-cee
*/

/* === Fonts (self-hosted) ================================================= */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("assets/fonts/instrument-sans-b3569e69.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;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("assets/fonts/instrument-sans-a3869a09.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;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("assets/fonts/instrument-sans-b3569e69.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;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("assets/fonts/instrument-sans-a3869a09.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;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("assets/fonts/instrument-sans-b3569e69.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;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("assets/fonts/instrument-sans-a3869a09.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;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/space-grotesk-b1b517ae.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;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/space-grotesk-d06ba85c.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;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/space-grotesk-9fffef51.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;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/space-grotesk-b1b517ae.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;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/space-grotesk-d06ba85c.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;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/space-grotesk-9fffef51.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;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/space-grotesk-b1b517ae.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;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/space-grotesk-d06ba85c.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;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/space-grotesk-9fffef51.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;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/space-grotesk-b1b517ae.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;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/space-grotesk-d06ba85c.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;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/space-grotesk-9fffef51.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;
}
/* ==========================================================================
   Viva Cee — design system
   Reproduces the original bundled design as reusable, Elementor-friendly
   component classes. Add a class to any Elementor widget's "CSS Classes"
   field (Advanced tab) to apply the matching look.
   ========================================================================== */

:root{
  --accent:#e5623d;   /* editable brand accent (Elementor global: Accent)   */
  --paper:#f4f0ea;    /* editable page background (Elementor global: Paper)  */
  --paper2:#ece6dd;   /* card / alt surface                                  */
  --ink:#181410;      /* primary text / headings                            */
  --dark:#151210;     /* dark section background                            */
  --muted:#8f857a;    /* secondary text                                     */
  --line:rgba(24,20,16,.12); /* hairline borders                            */
}

/* ---- base -------------------------------------------------------------- */
body.viva-cee,
body.viva-cee{
  font-family:'Instrument Sans',system-ui,sans-serif;
  font-size:18px;line-height:1.6;color:var(--ink);background:var(--paper);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
body.viva-cee h1,body.viva-cee h2,body.viva-cee h3,body.viva-cee h4{
  font-family:'Space Grotesk',sans-serif;margin:0;
}
body.viva-cee a{color:var(--accent);text-decoration:none}
body.viva-cee a:hover{opacity:.72}
body.viva-cee ::selection{background:var(--accent);color:#fff}

@keyframes vcFadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes vcMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---- typography components --------------------------------------------- */
/* Small letter-spaced uppercase kicker above a heading. Default accent;
   add .vc-eyebrow--ink or .vc-eyebrow--muted to recolour.                 */
.vc-eyebrow{
  font:500 13px/1.4 'Space Grotesk',sans-serif;
  letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin:0;
}
.vc-eyebrow--ink{color:var(--ink)}
.vc-eyebrow--muted{color:var(--muted)}

/* Oversized hero display heading */
.vc-display{
  font:700 clamp(46px,6.6vw,90px)/0.96 'Space Grotesk',sans-serif;
  letter-spacing:-.03em;color:var(--ink);margin:0;
}
.vc-display--md{font-size:clamp(44px,6vw,84px);line-height:.98}

/* Section heading */
.vc-h2{
  font:700 clamp(34px,4.4vw,58px)/1 'Space Grotesk',sans-serif;
  letter-spacing:-.025em;color:var(--ink);margin:0;
}
.vc-h2--sm{font-size:clamp(28px,3.6vw,46px);line-height:1.02}

/* Card / feature sub-heading */
.vc-h3{font:600 24px/1.1 'Space Grotesk',sans-serif;color:var(--ink);margin:0}

/* Intro / lead paragraph */
.vc-lead{max-width:520px;font-size:19px;color:#5a5348;line-height:1.6;margin:0}

/* Muted body copy */
.vc-body{color:#5a5348}
.vc-muted{color:var(--muted)}

/* Monospace meta label (e.g. "01 / QUICK TURNAROUND", "PORTRAIT / STUDIO") */
.vc-meta{font:12px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.1em;color:var(--muted)}

/* Big stat number */
.vc-stat-num{font:700 34px/1 'Space Grotesk',sans-serif;color:var(--ink)}
.vc-stat-label{font-size:14px;color:var(--muted);margin-top:2px}

/* Entrance animation helper */
.vc-fade-up{animation:vcFadeUp .7s ease both}

/* ---- buttons ----------------------------------------------------------- */
.vc-btn,
body.viva-cee .vc-btn{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--accent);border:none;color:#fff;
  padding:12px 22px;border-radius:100px;
  font:600 14px/1 'Space Grotesk',sans-serif;cursor:pointer;transition:transform .15s ease,opacity .15s ease;
}
.vc-btn:hover{opacity:1;transform:translateY(-1px)}
.vc-btn--ghost{
  background:transparent;color:var(--ink);border:1px solid var(--line);
}
.vc-btn--ghost:hover{border-color:var(--ink)}
.vc-btn--light{background:var(--paper);color:var(--ink)}

/* ---- surfaces / cards -------------------------------------------------- */
.vc-card{
  background:var(--paper);border:1px solid var(--line);border-radius:18px;
  padding:32px;display:flex;flex-direction:column;
}
.vc-card--alt{background:var(--paper2)}
.vc-card--dark{background:var(--dark);color:var(--paper);border-color:rgba(245,240,234,.14)}
.vc-card--dark .vc-h3{color:var(--paper)}

/* Striped "drop image / drop video" placeholder box */
.vc-placeholder{
  aspect-ratio:4/5;border-radius:16px;border:1px solid var(--line);
  background:repeating-linear-gradient(135deg,#e9e2d8 0 13px,#efe9df 13px 26px);
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  text-align:center;
}
.vc-placeholder--wide{aspect-ratio:16/10}
.vc-placeholder--square{aspect-ratio:1}

/* ---- section wrappers -------------------------------------------------- */
/* Apply to an Elementor Section/Container via CSS Classes.                 */
.vc-section{max-width:1200px;margin:0 auto;padding:112px 32px}
.vc-section--tight{padding:78px 32px 60px}
.vc-section--paper2{background:var(--paper2)}
.vc-section--dark{background:var(--dark);color:var(--paper)}
.vc-section--dark .vc-h2,.vc-section--dark .vc-h3{color:var(--paper)}
.vc-section--dark .vc-lead,.vc-section--dark .vc-body{color:rgba(245,240,234,.7)}

/* ---- gallery / credits ------------------------------------------------- */
.vc-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.vc-gallery figure{margin:0;display:flex;flex-direction:column;gap:11px}
.vc-gallery img{
  width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px;
  background:var(--paper2);border:1px solid var(--line);
}
.vc-gallery figcaption{font:500 14px/1.3 'Space Grotesk',sans-serif;color:var(--ink)}
.vc-gallery .vc-gallery__sub{font-size:13px;color:var(--muted);margin-top:-6px}

/* Numbered credits list */
.vc-credit-row{
  display:grid;grid-template-columns:44px 1fr 1fr auto;gap:16px;align-items:center;
  padding:20px 0;border-bottom:1px solid var(--line);
}
.vc-credit-row .vc-meta{align-self:center}

/* Stats row */
.vc-stats{display:flex;flex-wrap:wrap;gap:38px}

@media (max-width:820px){
  .vc-gallery{grid-template-columns:repeat(2,1fr)}
  .vc-section{padding:72px 22px}
  .vc-credit-row{grid-template-columns:32px 1fr;row-gap:4px}
}
@media (max-width:520px){
  .vc-gallery{grid-template-columns:1fr}
}