/* Creative Services — Creators' Eye Studios.
   Loaded after styles.css, on the Creative Services page only. The page keeps
   the Four Our Future header and footer, and its content wears the Creators'
   Eye brand (Brand Identity Guide v1.0): Abalone, Fire & Cedar Earth palette,
   Cinzel / Cormorant Garamond / Source Code Pro.

   Fonts are self-hosted (SIL OFL 1.1, from Fontsource) because the site's
   Content-Security-Policy allows no third-party origins. */

@font-face { font-family: "Cinzel"; font-weight: 400; font-display: swap; src: url("/assets/fonts/cinzel-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cinzel"; font-weight: 400; font-display: swap; src: url("/assets/fonts/cinzel-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, 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: "Cinzel"; font-weight: 600; font-display: swap; src: url("/assets/fonts/cinzel-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cinzel"; font-weight: 600; font-display: swap; src: url("/assets/fonts/cinzel-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, 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: "Cinzel"; font-weight: 700; font-display: swap; src: url("/assets/fonts/cinzel-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cinzel"; font-weight: 700; font-display: swap; src: url("/assets/fonts/cinzel-latin-ext-700-normal.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, 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: "Cormorant Garamond"; font-weight: 400; font-display: swap; src: url("/assets/fonts/cormorant-garamond-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cormorant Garamond"; font-weight: 400; font-display: swap; src: url("/assets/fonts/cormorant-garamond-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, 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: "Cormorant Garamond"; font-weight: 400; font-style: italic; font-display: swap; src: url("/assets/fonts/cormorant-garamond-latin-400-italic.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cormorant Garamond"; font-weight: 400; font-style: italic; font-display: swap; src: url("/assets/fonts/cormorant-garamond-latin-ext-400-italic.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, 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: "Cormorant Garamond"; font-weight: 500; font-display: swap; src: url("/assets/fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cormorant Garamond"; font-weight: 500; font-display: swap; src: url("/assets/fonts/cormorant-garamond-latin-ext-500-normal.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, 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: "Cormorant Garamond"; font-weight: 600; font-display: swap; src: url("/assets/fonts/cormorant-garamond-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cormorant Garamond"; font-weight: 600; font-display: swap; src: url("/assets/fonts/cormorant-garamond-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, 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: "Source Code Pro"; font-weight: 400; font-display: swap; src: url("/assets/fonts/source-code-pro-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Source Code Pro"; font-weight: 400; font-display: swap; src: url("/assets/fonts/source-code-pro-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* Brand palette — on body so the shared header and footer can be tinted too. */
.page-creative {
  /* Abalone Shell */
  --shell-depth: #1C2B2D;
  --tidal-teal: #3D7A72;
  --pearl-mist: #B8D8D0;
  --sea-sky: #9BAFC4;
  --shell-blush: #C4A8A0;
  --nacre-white: #D6E2DC;
  /* Sacred Fire */
  --ember-red: #C0392B;
  --living-flame: #E05A1A;
  --molten-amber: #E8941A;
  --ceremony-gold: #D4A438;
  --flying-spark: #F2C94C;
  /* Cedar Earth */
  --charred-cedar: #1A1410;
  --red-cedar-bark: #4A3728;
  --ochre-clay: #8B6340;

  background: var(--charred-cedar);
}

/* Semantic, type, spacing and radius tokens — scoped to the page content,
   because styles.css already defines --font-display and --radius-* for the
   rest of the site. */
.ce {
  --color-bg-primary: var(--charred-cedar);
  --color-bg-secondary: var(--shell-depth);
  --color-bg-card: #1E1814;
  --color-text-primary: var(--nacre-white);
  --color-text-secondary: var(--sea-sky);
  --color-text-muted: var(--tidal-teal);
  --color-accent-primary: var(--living-flame);
  --color-accent-hover: var(--molten-amber);
  --color-border: rgba(61, 122, 114, .2);
  /* Tidal Teal is 3.7:1 on Charred Cedar — the guide's own "large text only".
     Small labels take it lifted toward Pearl Mist, which clears 6:1. */
  --color-text-label: color-mix(in srgb, var(--tidal-teal) 60%, var(--pearl-mist));

  --font-display: "Cinzel", "Times New Roman", serif;
  --font-body: "Cormorant Garamond", Georgia, serif;
  --font-mono: "Source Code Pro", ui-monospace, monospace;

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --space-2xl: 64px;
  --space-3xl: 96px;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  /* Gradient recipes */
  --gradient-deep-ground: linear-gradient(90deg, var(--color-bg-card), var(--shell-depth));
  --gradient-image-overlay: linear-gradient(90deg, var(--shell-depth), var(--color-bg-card));
  --gradient-fire-glow: radial-gradient(ellipse at 0% 50%, color-mix(in srgb, var(--living-flame) 55%, transparent), transparent 70%);

  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: 21px;
  line-height: 1.6;
}

.page-creative .site-header { background: rgb(26 20 16 / calc(.88 * var(--header-fade))); box-shadow: 0 1px 0 rgb(61 122 114 / calc(.25 * var(--header-fade))); }
.page-creative .site-footer { background: #120E0B; }

.ce h1, .ce h2, .ce h3 { font-family: var(--font-display); color: var(--color-text-primary); }
.ce p { margin: 0; }
.ce a { color: var(--color-accent-hover); }
.ce :focus-visible { outline-color: var(--molten-amber); }

.ce-eyebrow { margin: 0 0 var(--space-md); font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: .3em; text-transform: uppercase; color: var(--color-text-label); }
.ce-eyebrow-fire { color: var(--color-accent-hover); }
.ce-lead { font-size: 23px; line-height: 1.55; color: var(--pearl-mist); }
.ce-italic { font-style: italic; color: var(--color-text-secondary); }

/* Divider with the guide's amber keystone. */
.ce-rule { position: relative; height: 1px; margin: 0; border: 0; background: var(--color-border); }
.ce-rule::after { content: ""; position: absolute; left: 50%; top: -5px; width: 10px; height: 10px; margin-left: -5px; background: var(--color-accent-hover); }

/* ---- buttons ----
   Charred Cedar on Living Flame is 4.9:1; white would be 3.7:1, which only
   passes for large text. */
.ce-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 var(--space-xl); border: 1.5px solid transparent; border-radius: var(--radius-md); font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; cursor: pointer; }
.ce .ce-btn-primary { background: var(--color-accent-primary); color: var(--charred-cedar); }
.ce .ce-btn-primary:hover { background: var(--color-accent-hover); }
.ce .ce-btn-secondary { border-color: var(--tidal-teal); color: var(--pearl-mist); background: transparent; }
.ce .ce-btn-secondary:hover { border-color: var(--pearl-mist); color: var(--nacre-white); }
.ce-actions { display: flex; flex-wrap: wrap; gap: var(--space-md); }

/* ---- badges ---- */
.ce-badges { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin: 0; padding: 0; list-style: none; }
.ce-badge { padding: 6px 14px; border: 1px solid; border-radius: var(--radius-full); font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; line-height: 1.4; }
.ce-badge-gold { color: var(--ceremony-gold); border-color: color-mix(in srgb, var(--ceremony-gold) 45%, transparent); background: color-mix(in srgb, var(--ceremony-gold) 10%, transparent); }
.ce-badge-teal { color: var(--color-text-label); border-color: color-mix(in srgb, var(--tidal-teal) 60%, transparent); background: color-mix(in srgb, var(--tidal-teal) 14%, transparent); }
.ce-badge-flame { color: var(--molten-amber); border-color: color-mix(in srgb, var(--living-flame) 50%, transparent); background: color-mix(in srgb, var(--ember-red) 14%, transparent); }
.ce-badge-earth { color: var(--shell-blush); border-color: color-mix(in srgb, var(--ochre-clay) 60%, transparent); background: color-mix(in srgb, var(--red-cedar-bark) 30%, transparent); }

/* ---- hero ---- */
.ce-hero { position: relative; overflow: hidden; padding: var(--space-3xl) 0; }
/* The cover's two soft discs: abalone above, ember below. */
.ce-hero::before, .ce-hero::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.ce-hero::before { width: 640px; height: 640px; top: -200px; right: -220px; background: radial-gradient(circle, color-mix(in srgb, var(--shell-depth) 90%, transparent) 0%, transparent 70%); }
.ce-hero::after { width: 720px; height: 560px; bottom: -260px; right: -120px; background: radial-gradient(ellipse, color-mix(in srgb, var(--ember-red) 18%, transparent) 0%, transparent 70%); }
.ce-hero-inner { position: relative; z-index: 1; max-width: 760px; }
.ce-hero .ce-eyebrow { margin-bottom: var(--space-lg); }
.ce-hero h1 { margin: 0 0 var(--space-md); font-weight: 700; font-size: clamp(42px, 7vw, 76px); line-height: 1.02; letter-spacing: .01em; color: var(--ceremony-gold); }
.ce-hero h1 span { display: block; font-weight: 400; color: var(--nacre-white); }
.ce-hero .ce-italic { font-size: 24px; margin-bottom: var(--space-lg); }
.ce-site-link { font-style: normal; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.ce-hero .ce-lead { max-width: 58ch; margin-bottom: var(--space-xl); }
.ce-hero .ce-badges { margin-bottom: var(--space-xl); }

/* ---- the studio ---- */
.ce-section { padding: var(--space-3xl) 0; }
.ce-studio { max-width: 760px; }
.ce-studio h2 { margin: 0 0 var(--space-lg); font-weight: 600; font-size: clamp(30px, 4.2vw, 44px); line-height: 1.15; }
.ce .ce-coming { margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: 1px solid var(--color-border); font-family: var(--font-mono); font-size: 15px; line-height: 1.9; color: var(--color-text-secondary); }
.ce-coming span:not(.ce-coming-label) { white-space: nowrap; }
.ce-coming-label { display: block; margin-bottom: var(--space-xs); font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: .3em; text-transform: uppercase; color: var(--color-accent-hover); }
.ce-prose { display: grid; gap: var(--space-lg); color: var(--pearl-mist); }

/* ---- featured documentary (Teal Dark, the secondary surface) ---- */
.ce-feature { padding: var(--space-3xl) 0; background: var(--color-bg-secondary); }
.ce-feature-head { display: grid; grid-template-columns: 1fr 1.05fr; gap: var(--space-2xl); align-items: center; }
.ce-feature-head h2 { margin: 0 0 var(--space-sm); font-weight: 700; font-size: clamp(30px, 4.4vw, 48px); line-height: 1.1; }
.ce-feature-head .ce-italic { font-size: 26px; margin-bottom: var(--space-lg); }
.ce-feature-head .ce-prose { gap: var(--space-md); }
/* The trailer. The video keeps the 16:9 frame the placeholder used, with the
   poster showing until someone presses play. */
.ce-trailer { margin: 0; }
.ce-frame { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; background: var(--charred-cedar); object-fit: cover; }
.ce .ce-trailer-caption { margin-top: var(--space-md); font-family: var(--font-mono); font-size: 13px; letter-spacing: .04em; line-height: 1.6; color: var(--color-text-secondary); }



.ce .ce-acknowledgement { margin-top: var(--space-lg); font-style: italic; font-size: 18px; color: var(--color-text-secondary); }


/* ---- partner call (Deep Ground with the fire glow) ---- */
.ce-partner { padding: var(--space-3xl) 0; }
.ce-partner-card { position: relative; overflow: hidden; padding: var(--space-2xl); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--gradient-deep-ground); }
.ce-partner-card::before { content: ""; position: absolute; inset: 0; background: var(--gradient-fire-glow); opacity: .45; pointer-events: none; }
.ce-partner-inner { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2xl); align-items: start; }

/* The Creators' Eye form: same fields and behaviour as the homepage form, in
   this page's palette. */
.ce .ce-form label > span { margin-bottom: var(--space-xs); font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--color-text-label); }
.ce .ce-form input, .ce .ce-form textarea { border: 1px solid color-mix(in srgb, var(--tidal-teal) 45%, transparent); border-radius: var(--radius-md); background: var(--charred-cedar); color: var(--nacre-white); font-family: var(--font-body); font-size: 19px; }
.ce .ce-form input::placeholder, .ce .ce-form textarea::placeholder { color: color-mix(in srgb, var(--sea-sky) 70%, transparent); }
.ce .ce-form input:focus, .ce .ce-form textarea:focus { outline: 2px solid var(--molten-amber); border-color: transparent; }
.ce .ce-form .ce-btn { width: 100%; }
.ce .ce-form .form-status { font-family: var(--font-body); font-size: 17px !important; color: var(--pearl-mist); }
.ce .ce-form .form-status.is-error { color: var(--shell-blush); }
.ce .ce-form .form-status a { color: var(--molten-amber); }
.ce-partner h2 { margin: 0 0 var(--space-lg); font-weight: 700; font-size: clamp(28px, 4vw, 42px); line-height: 1.15; }
.ce-partner .ce-lead { margin-bottom: var(--space-xl); }

@media (max-width: 900px) {
  .ce-feature-head { grid-template-columns: 1fr; gap: var(--space-xl); }
  .ce-partner-inner { grid-template-columns: 1fr; gap: var(--space-xl); }
}

@media (max-width: 780px) {
  .ce { font-size: 20px; }
  .ce-hero, .ce-section, .ce-feature { padding: var(--space-2xl) 0; }
  .ce-partner { padding: var(--space-2xl) 0; }
  .ce-partner-card { padding: var(--space-xl) var(--space-lg); }
  .ce-actions .ce-btn { flex: 1 1 100%; }
  .ce-btn { padding: 0 var(--space-lg); text-align: center; }
}