/* EditGuys — components.
 *
 * Plain CSS classes. The source site has no framework and no build step, so a
 * component here is markup plus a class. Include this file and write the markup
 * shown in each component's README.
 *
 * The :root block below mirrors tokens.json so this file works on its own. If
 * your pipeline emits its own tokens.css under different variable names, keep
 * this block and map the names here — nothing below reads a literal colour. */

:root {
  /* grounds */
  --paper: #f6f0e2;
  --paper-2: #efe5cf;
  --paper-3: #e6d9be;
  --white: #fffbf2;
  /* ink */
  --ink: #14110d;
  --ink-soft: #4a4238;
  /* accents */
  --red: #d6402f;
  --gold: #f2b33d;
  --green: #1e4034;
  --green-mid: #2c5c4a;
  --green-light: #d3e5c8;

  /* semantic — these are what flips between a paper band and a green band */
  --surface: var(--paper);
  --surface-raised: var(--white);
  --text: var(--ink);
  --text-muted: var(--ink-soft);
  --border: var(--ink);
  --dot: var(--paper-3);
  --eyebrow: var(--red);

  /* format identifiers */
  --format-short-form: #4e86b8;
  --format-podcasts: #6f5da8;
  --format-youtube: #d99a1e;
  --format-webinars: #2c5c4a;
  --format-promos: #d6402f;
  --format-course: #8a8770;

  /* type */
  --font-poster: "Archivo Black", Archivo, Helvetica, Arial, sans-serif;
  --font-body: "Archivo", "Helvetica Neue", Arial, sans-serif;
  /* only inside drawings of software (file names, timecodes, calendars) —
     never a label on the page: tracked uppercase mono reads machine-made */
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --font-script: "Lobster Two", "Brush Script MT", cursive;

  /* space, radius, shadow */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 18px;
  --space-5: 26px; --space-6: 40px; --space-7: 56px; --space-8: 156px;
  --radius-sm: 6px; --radius-md: 12px; --radius-lg: 18px; --radius-pill: 999px;
  --shadow-sm: 4px 4px 0 var(--ink);
  --shadow: 6px 6px 0 var(--ink);
  --shadow-lg: 10px 10px 0 var(--ink);
}

/* The green band. Put it on a section, not on <html> — a page alternates. */
[data-theme="dark"],
.eg-band--green {
  --surface: var(--green);
  --surface-raised: var(--green-mid);
  --text: var(--paper);
  --text-muted: rgba(246, 240, 226, 0.78);
  --dot: rgba(255, 255, 255, 0.07);
  --eyebrow: var(--gold);
  /* --border stays ink on purpose: outlines never invert. */
}

/* ---------------------------------------------------------------- band */

.eg-band {
  position: relative;
  background: var(--surface);
  color: var(--text);
  padding: var(--space-7) var(--space-5);
  font-family: var(--font-body);
}

/* The halftone ground, 22px pitch. Sits under the content. */
.eg-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--dot) 1.6px, transparent 1.7px);
  background-size: 22px 22px;
  pointer-events: none;
}

.eg-band > * { position: relative; }

/* ------------------------------------------------------------- lettering */

/* Labels are Archivo set wide, in sentence case. Needs the variable Archivo
 * (the wdth axis) from Google Fonts; without it they fall back to normal width. */
.eg-eyebrow {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 800;
  font-stretch: 112%;
  letter-spacing: 0.02em;
  color: var(--eyebrow);
  margin: 0 0 var(--space-3);
}

/* The big count: Archivo at its heaviest and widest. */
.eg-stat {
  font-family: var(--font-body);
  font-size: 72px;
  font-weight: 900;
  font-stretch: 125%;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--red);
}

.eg-poster {
  font-family: var(--font-poster);
  font-weight: 400;
  font-size: 58px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0;
}

.eg-headline {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 38px;
  line-height: 1.18;
  letter-spacing: -0.025em;
  color: var(--text);
  margin: 0;
}

/* The one word that carries the line. One per view. */
.eg-hot { color: var(--red); }
[data-theme="dark"] .eg-hot,
.eg-band--green .eg-hot { color: var(--gold); }

/* The script accent. Half a headline, never a whole one. */
.eg-script {
  font-family: var(--font-script);
  font-style: italic;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.02;
  /* a size up: the script's x-height sits well below Archivo's at the same size */
  font-size: 1.2em;
}

/* ------------------------------------------------------------- Button */

.eg-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  padding: 15px 26px;
  border: 3px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--ink);
  box-shadow: var(--shadow);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s;
}

/* Press it into its own shadow. The whole interaction model. */
.eg-btn:hover { transform: translate(2px, 2px); box-shadow: var(--shadow-sm); }
.eg-btn:active { transform: translate(6px, 6px); box-shadow: 0 0 0 var(--ink); }
.eg-btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

.eg-btn--primary { background: var(--red); color: var(--white); }
.eg-btn--gold { background: var(--gold); color: var(--ink); }

/* On a green band an outline button needs a ground to sit on. */
.eg-btn--ghost { background: transparent; color: var(--text); }

/* --------------------------------------------------------------- Card */

.eg-card {
  display: flex;
  flex-direction: column;
  background: var(--surface-raised);
  color: var(--text);
  border: 4px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: var(--space-4);
  overflow: hidden;
}

/* For the one card a section is built around. */
.eg-card--hero { box-shadow: var(--shadow-lg); }
.eg-card--gold { background: var(--gold); color: var(--ink); }

.eg-card__title {
  font-family: var(--font-body);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0 0 var(--space-2);
}

.eg-card__text {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-muted);
  margin: 0;
}

/* --------------------------------------------------------------- Chip */

.eg-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 800;
  font-stretch: 112%;
  letter-spacing: 0.02em;
  padding: 6px 12px;
  border: 3px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--paper-2);
  color: var(--ink);
  white-space: nowrap;
}

.eg-chip--shadow { box-shadow: var(--shadow-sm); }

/* The coloured dot that names a format. */
.eg-chip__dot {
  width: 9px;
  height: 9px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--ink);
  background: var(--hue, var(--ink));
  flex: none;
}

/* ---------------------------------------------------------- FormatTile */

.eg-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--space-4);
  align-items: stretch;      /* without this the tiles come out uneven */
}

/* The frame is drawn by ::before, not by the tile itself, so the print texture
 * can sit on the frame and the copy without reaching the still (see the end of
 * this file). Head and shot sit above it, inset by the 4px border. */
.eg-tile {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
}

.eg-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--white);
  border: 4px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.eg-tile__head {
  position: relative;
  z-index: 1;
  flex: 1;
  margin: 4px 4px 0;
  padding: var(--space-4);
}

.eg-tile__meta {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 800;
  font-stretch: 112%;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  margin: 0 0 var(--space-2);
}

.eg-tile__title {
  font-family: var(--font-body);
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 var(--space-2);
}

.eg-tile__text {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
}

/* The still at the bottom. The format colour shows while it loads, and is the
 * whole shot when there is no still yet. */
.eg-tile__shot {
  position: relative;
  z-index: 1;
  height: 150px;
  margin: auto 4px 4px;
  background: var(--hue, var(--paper-3));
  border-top: 3px solid var(--ink);
  border-radius: 0 0 14px 14px;  /* --radius-lg less the 4px border */
  overflow: hidden;
}

.eg-tile__shot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 9:16 work inside a 16:9 frame: crop to the middle, outline the edges. */
.eg-tile__shot--vertical img {
  inset: auto;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: auto;
  height: 112%;
  border-inline: 3px solid var(--ink);
}

/* -------------------------------------------------------- SpeechBubble */

.eg-say {
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
}

.eg-say__face {
  position: relative;
  width: 88px;
  height: 88px;
  flex: none;
  border-radius: var(--radius-pill);
  border: 4px solid var(--border);
  background: var(--gold);
  overflow: hidden;
}

.eg-say__face--red { background: var(--red); }
.eg-say__face img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }

/* Cropped to the face. Each Guy sits off-centre in his own drawing, so each
 * gets his own width and offset, in % of the circle, so the same crop holds at
 * any size (88px bubble, 48px badge, 40px nav). Tim's leaves room under the
 * beard on purpose. Retuned 2026-10-19: the old px values only fitted 88px. */
.eg-say__face--tim   { --fw: 132%; --fx: -40%; --fy: -12%; }
.eg-say__face--pedro { --fw: 130%; --fx: -7%;  --fy: -20%; }
.eg-say__face--tim img,
.eg-say__face--pedro img {
  position: absolute;
  max-width: none;
  height: auto;
  object-fit: initial;
  width: var(--fw);
  left: var(--fx);
  top: var(--fy);
}

.eg-say__bubble {
  position: relative;
  background: var(--gold);
  color: var(--ink);
  border: 4px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
}

/* The faces overlapped, as in the nav lockup. */
.eg-crew { display: flex; }
.eg-crew .eg-say__face + .eg-say__face { margin-left: -14px; }

/* ----------------------------------------------------------- Wordmark */

/* The nav lockup: the two faces, then the wordmark. The wordmark is artwork —
 * ink PNG on paper, paper PNG on green; never type, never red. */
.eg-lockup { display: inline-flex; align-items: center; gap: var(--space-3); text-decoration: none; }
.eg-lockup .eg-crew .eg-say__face { width: 40px; height: 40px; border-width: 3px; }
.eg-lockup__mark { display: block; height: 38px; width: auto; }

@media (max-width: 560px) {
  .eg-lockup .eg-crew .eg-say__face { width: 34px; height: 34px; }
  .eg-lockup__mark { height: 30px; }
}

/* ----------------------------------------------------------- the X mark */

/* "Great editing isn't…" — the item, then a red line drawn through it. */
.eg-nope { display: flex; align-items: center; gap: var(--space-3); }

.eg-nope__x {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 19px;
  color: var(--red);
  flex: none;
}

.eg-nope__text {
  position: relative;
  font-size: 19px;
  font-weight: 700;
  color: var(--text);
}

.eg-nope__text::after {
  content: "";
  position: absolute;
  left: -3px;
  right: -3px;
  top: 52%;
  height: 3px;
  border-radius: 2px;
  background: var(--red);
  transform: scaleX(var(--cross, 1));
  transform-origin: left center;
}

/* To animate it, set --cross from 0 to 1 on .eg-nope__text. Never override the
 * transform itself in a more specific rule — the custom property stops
 * reaching the pseudo-element and the line silently never draws. */

/* ------------------------------------------------------- print texture */

/* Ink on paper rather than pixels: a fine grain on every fill and a rougher
 * one on outlines, shadows and type, mixed in at 40%. The filter (#eg-print)
 * is added by bundle.js, which also sets the switch. To go back to the clean
 * look, set TEXTURE = 'flat' in bundle.js, or <html data-texture="flat">. */
/* The Guys are never textured: their faces stay as drawn, like the wordmark.
 * Nor are stills and thumbnails: a filter on .eg-tile would reach its <img>,
 * so the tile's frame (::before) and its copy (__head) carry the texture and
 * the shot stays clean. */
[data-texture="print"] :is(.eg-btn, .eg-card, .eg-chip, .eg-say__bubble, .eg-nope),
[data-texture="print"] .eg-tile::before,
[data-texture="print"] .eg-tile__head {
  filter: url(#eg-print);
}

@media (prefers-reduced-motion: reduce) {
  .eg-btn { transition: none; }
}