/* evaticha.com styles. One file for the whole site.
   Colours and type from Eva's Brand Palette v2 (October 2026).
   Layout: one narrow reading column, with video breaking out wider.
   Light by default. Dark mode, at the end, swaps the five working colours. */

@font-face { font-family: "Outfit"; font-weight: 600; font-display: swap; src: url("assets/fonts/outfit-600.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-weight: 700; font-display: swap; src: url("assets/fonts/outfit-700.woff2") format("woff2"); }
@font-face { font-family: "Readex Pro"; font-weight: 400; font-display: swap; src: url("assets/fonts/readex-pro-400.woff2") format("woff2"); }
@font-face { font-family: "Readex Pro"; font-weight: 600; font-display: swap; src: url("assets/fonts/readex-pro-600.woff2") format("woff2"); }

:root {
  /* Palette v2 */
  --ink: #474a7a;          /* text and headings; always the text on Marigold */
  --indigo: #5b5f97;       /* links, pop-up, buttons */
  --lavender: #dddbff;     /* soft fills */
  --cream: #fdfded;        /* page background */
  --marigold: #ffc045;     /* hover (fills only) */
  --white: #ffffff;
  --screen: #2b2d4a;       /* deep navy: behind video, and the dark-mode page */

  /* The five working colours. Dark mode swaps these. */
  --bg: var(--cream);
  --fg: var(--ink);
  --link: var(--indigo);
  --fill: var(--lavender); /* tags and empty media boxes */
  --line: #d6d6dc;         /* rules */

  /* Type */
  --display: "Outfit", "Helvetica Neue", Arial, sans-serif;
  --text: "Readex Pro", "Helvetica Neue", Arial, sans-serif;

  /* Sizes */
  --col: 40rem;            /* reading column */
  --wide: 56rem;           /* video and card grid */
  --gap: clamp(3.5rem, 8vw, 6rem);

  color-scheme: light;
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  padding: 0 1.25rem;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--text);
  font-size: 1.0625rem;      /* 17 px */
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
img { max-width: 100%; display: block; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--display); text-wrap: balance; }

/* Links: always underlined (Indigo and Ink are too close to tell apart by colour) */
a { color: var(--link); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.2em; }
a:hover { background: var(--marigold); color: var(--ink); }
:focus-visible { outline: 3px solid var(--link); outline-offset: 3px; border-radius: 2px; }
.player :focus-visible { outline-color: var(--white); }

/* Skip link: hidden until a keyboard user tabs to it */
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 10; padding: 0.5rem 1rem; background: var(--indigo); color: var(--white); border-radius: 6px; }
.skip:focus { top: 1rem; }
.skip:hover { background: var(--indigo); color: var(--white); }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }

.col { max-width: var(--col); margin-inline: auto; }
.wide { max-width: var(--wide); margin-inline: auto; }
main > section, main > .reel { margin-top: var(--gap); }

/* Thumbnails */
.media { display: block; position: relative; aspect-ratio: 16 / 9; max-width: 100%; border-radius: 8px; overflow: hidden; background: var(--fill); }
.media img { width: 100%; height: 100%; object-fit: cover; }
.media--square { aspect-ratio: 1 / 1; }   /* Motion */

/* Hero */
.site-head { padding-top: clamp(2.5rem, 7vw, 4.5rem); }
.links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1.25rem; font-size: 0.9375rem; }
.links a { padding-block: 0.25rem; }
.site-head .links { justify-content: flex-end; }   /* contact links sit top right */

.name {                      /* Site title: Outfit Bold, 65 px */
  margin-top: clamp(2rem, 6vw, 3.5rem);
  font-size: clamp(2.75rem, 9vw, 4.0625rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.role {                      /* Heading style: Outfit SemiBold, 32 px */
  margin-top: 0.25rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.4rem, 4vw, 2rem);
  line-height: 1.3;
}
.intro { margin-top: 1.5rem; font-size: clamp(1.0625rem, 2.2vw, 1.125rem); max-width: 36rem; }

.jump { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 1.75rem; }
.jump a { text-decoration: none; color: inherit; font-size: 0.9375rem; padding: 0.35rem 0.95rem; background: var(--fill); border-radius: 999px; }
.jump a:hover { background: var(--marigold); color: var(--ink); }

/* Showreel */
.reel__frame {
  display: block; position: relative; width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0; border: 0; border-radius: 10px; overflow: hidden;
  background: var(--indigo); color: var(--white);
  font: inherit; cursor: pointer;
}
.reel__still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* A soft dark fade behind the bar keeps "Watch the showreel" readable on any picture */
.reel__bar {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem;
  padding: 2.5rem 1rem 0.85rem;
  font-size: 0.875rem;
  background: linear-gradient(to top, rgb(43 45 74 / 0.8), rgb(43 45 74 / 0.6) 55%, rgb(43 45 74 / 0));
}
.play {
  width: 2.75rem; height: 2.75rem; border-radius: 50%;
  background: var(--white); color: var(--indigo);
  display: grid; place-items: center; flex: none;
  transition: background 0.2s ease;
}
.reel__frame:hover .play { background: var(--marigold); color: var(--ink); }
.tc { margin-left: auto; font-variant-numeric: tabular-nums; }
/* Once clicked, the Vimeo player takes the still's place */
.reel iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 10px; background: var(--screen); }

/* Play triangle, for the showreel and the card badges */
.play::before, .badge::before { content: ""; aspect-ratio: 5 / 6; margin-left: 2px; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.play::before { height: 0.9rem; }
.badge::before { height: 0.8rem; }

/* Section headings: Outfit SemiBold, 32 px */
.pillar__head { max-width: var(--col); margin-inline: auto; }
.pillar__head h2 { font-size: clamp(1.6rem, 4vw, 2rem); font-weight: 600; line-height: 1.3; }
.pillar__head p { margin-top: 0.4rem; }

/* Cards: each one is a button that opens the pop-up */
.cards {
  max-width: var(--wide);
  margin: 1.75rem auto 0;
  display: grid;
  gap: 1.5rem 1.25rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.card {
  display: grid; gap: 0.6rem; align-content: start; min-width: 0;
  margin: 0; padding: 0; border: 0; background: none;
  color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.card__title { justify-self: start; border-radius: 3px; font-family: var(--display); font-size: 1.1875rem; font-weight: 600; line-height: 1.3; text-wrap: balance; }
.card:hover .card__title { background: var(--marigold); box-shadow: 0 0 0 3px var(--marigold); color: var(--ink); }
.meta { font-size: 0.875rem; margin-top: -0.35rem; }
.card .media { transition: transform 0.25s ease; }
.card:hover .media { transform: translateY(-3px); }

/* Play badge on cards that open a video: white on Indigo */
.badge {
  position: absolute; left: 0.75rem; bottom: 0.75rem;
  width: 2.25rem; height: 2.25rem; border-radius: 50%;
  background: var(--indigo); color: var(--white);
  display: grid; place-items: center;
}

/* Toolkit: tool names as tags, in three groups */
.toolkit { max-width: var(--wide); margin: 1.75rem auto 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.75rem 2rem; }
.toolkit h3 { font-family: var(--text); font-size: 0.9375rem; font-weight: 600; }
.tags { list-style: none; margin: 0.6rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tags li { background: var(--fill); font-size: 0.9375rem; padding: 0.3rem 0.85rem; border-radius: 999px; }

/* Contact and footer */
.contact { padding-block: 3rem 2.5rem; margin-top: var(--gap); border-top: 1px solid var(--line); }
.contact h2 { font-size: clamp(1.6rem, 4vw, 2rem); font-weight: 600; line-height: 1.3; }
.contact .email { display: inline-block; max-width: 100%; margin-top: 0.6rem; font-size: 1.125rem; overflow-wrap: anywhere; }   /* wraps at very large text sizes */
.contact .links { margin-top: 1rem; }
.small { margin-top: 2.5rem; font-size: 0.875rem; line-height: 1.6; }

/* Pop-up player. The dialog itself is see-through: "Close ×" floats above the pop-up's top-right corner,
   and the pop-up (the panel) scrolls on its own, so Close always stays in view. */
.player {
  width: min(64rem, calc(100% - 2rem));
  max-width: none;
  max-height: calc(100dvh - 2rem);
  padding: 0;
  border: 0;
  overflow: visible;
  background: transparent;
  color: var(--white);
  flex-direction: column;
}
.player[open] { display: flex; }
.player::backdrop { background: rgb(43 45 74 / 0.85); }
.player__panel { min-height: 0; overflow-y: auto; border-radius: 10px; background: var(--indigo); }
.player__close {
  align-self: flex-end;
  display: flex; align-items: center; gap: 0.5rem;
  margin: 0 -0.6rem 0.25rem 0; padding: 0.35rem 0.6rem;
  font-family: var(--display); font-size: 0.9375rem; font-weight: 600; line-height: 1.4;
  color: var(--white); background: transparent;
  border: 0; border-radius: 999px; cursor: pointer;
}
.player__close svg { width: 0.8125rem; height: 0.8125rem; flex: none; }
.player__close:hover { background: var(--marigold); color: var(--ink); }
.player__heading { padding: 0.75rem 1rem; }
.player__heading p, .player__caption p { font-family: var(--display); font-weight: 600; }
.player__heading .player__role, .player__caption .player__role { font-family: var(--text); font-weight: 400; font-size: 0.875rem; line-height: 1.4; }
.player__caption { padding: 0.75rem 1rem; }   /* Systems: the video's title and Eva's role, under the video */
.player__role:empty { display: none; }
/* Editing and Motion: title, role and any description under the video */
.player.is-below .player__heading { padding: 0.75rem 1.25rem; }
.player.is-below .player__desc { padding-top: 0; }

.player__screen { aspect-ratio: 16 / 9; background: var(--screen); }
.player__screen iframe { display: block; width: 100%; height: 100%; border: 0; }
/* Tall (9:16) and square (1:1) videos, and wide Editing videos, fit the screen height */
.player.is-vertical { width: min(26rem, calc((100vh - 9rem) * 9 / 16), calc(100% - 2rem)); }
.player.is-vertical .player__screen { aspect-ratio: 9 / 16; }
.player.is-square { width: min(40rem, calc(100vh - 9rem), calc(100% - 2rem)); }
.player.is-square .player__screen { aspect-ratio: 1 / 1; }
.player.is-below:not(.is-vertical):not(.is-square) { width: min(64rem, calc((100vh - 9rem) * 16 / 9), calc(100% - 2rem)); }

/* Description: under the video in Editing and Motion; in Systems under it on small screens, beside it on wide ones */
.player__desc { padding: 1rem 1.25rem 1.25rem; font-size: 0.9375rem; line-height: 1.6; }
.player__desc:empty { display: none; }
.player__desc h3 { font-size: 1rem; font-weight: 600; line-height: 1.3; margin-bottom: 0.25rem; }
.player__desc p + h3 { margin-top: 1rem; }
.player__desc .lead { font-family: var(--display); font-size: 1.125rem; font-weight: 600; line-height: 1.4; margin-bottom: 1rem; }
.player__desc .lead-in { margin-bottom: 1rem; }
.player__desc .tools { margin-top: 0.75rem; font-size: 0.875rem; }
@media (min-width: 900px) {
  .player:not(.is-below) .player__body { display: grid; grid-template-columns: minmax(0, 1fr) 24rem; align-items: start; }
  .player:not(.is-below) .player__desc { padding: 1.25rem 1.5rem; }
}

/* AI in production: arrows and count under the video, tabs in the text.
   The tab, the text and the video always match. */
.carousel { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; }
.carousel[hidden] { display: none; }
.carousel__btn {
  flex: none; width: 2.25rem; height: 2.25rem; padding: 0;
  border: 0; border-radius: 50%; cursor: pointer;
  background: var(--white); color: var(--indigo);
  display: grid; place-items: center;
}
.carousel__btn svg { width: 0.75rem; height: 0.75rem; }
.carousel__btn:hover { background: var(--marigold); color: var(--ink); }
.carousel__count { flex: 1; min-width: 0; font-size: 0.875rem; font-weight: 600; line-height: 1.4; text-align: center; font-variant-numeric: tabular-nums; }
.tabs { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-bottom: 1rem; }
.tabs [role="tab"] {
  font: inherit; font-size: 0.8125rem; font-weight: 600; line-height: 1.3; cursor: pointer;
  color: var(--white); background: transparent;
  border: 1.5px solid var(--white); border-radius: 999px; padding: 0.3rem 0.7rem;
}
.tabs [role="tab"][aria-selected="true"] { background: var(--white); color: var(--indigo); }
.tabs [role="tab"]:hover { background: var(--marigold); border-color: var(--marigold); color: var(--ink); }
/* The videos come in different shapes (tall, 5:4, wide). One 4:3 frame holds them all,
   each video sized to its own shape and centred, so nothing jumps and there are no black bars. */
.player.has-tabs .player__screen { aspect-ratio: 4 / 3; container-type: size; display: grid; place-items: center; background: transparent; }
.player.has-tabs .player__screen iframe { aspect-ratio: var(--ratio); width: min(100cqw, calc(100cqh * var(--ratio))); height: auto; }
/* The three parts sit on top of each other, so switching tabs never changes the pop-up's size */
.tab-panels { display: grid; }
.tab-panel { grid-area: 1 / 1; }
.tab-panel.is-off { visibility: hidden; }

/* Narrow screens */
@media (max-width: 760px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .toolkit { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  body { font-size: 1rem; }
  .cards { grid-template-columns: minmax(0, 1fr); }
  /* Showreel bar: more compact on phones, so it stays clear of the title in the picture */
  .reel__bar { padding: 1.5rem 0.75rem 0.6rem; }
  .play { width: 2.25rem; height: 2.25rem; }
}

/* Dark mode, when the visitor's device is set to dark. Palette v2 has no dark background,
   so the page uses the deep navy from behind the video. Every colour pair passes WCAG AA. */
@media (prefers-color-scheme: dark) {
  :root { color-scheme: dark; --bg: var(--screen); --fg: var(--cream); --link: var(--lavender); --fill: var(--ink); --line: var(--ink); }
  .player::backdrop { background: rgb(12 13 24 / 0.85); }   /* the page is already dark, so dim it further */
}