/* =========================================================================
   Talent Garden Vilnius — working stylesheet
   -------------------------------------------------------------------------
   Calibrated against talentgarden.com (typeface, ink, coral) and the Vilnius
   print/social work (headline device, starburst, illustration lime).

   House rule: the system is MONOCHROME. Black, white and grey do the work.
   Coral and lime are accents — small marks, single emphases, one CTA per
   view. If a screen reads as "coral branded", it is wrong.

   Everything below is a token. Change the value once, here.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Typeface — Plus Jakarta Sans, variable, self-hosted (SIL OFL 1.1)

   Talent Garden's own site ships Poppins. We deliberately do not: Poppins is
   a poster face — very wide, monolinear, and it loses definition at body
   sizes on a phone while eating line length. Plus Jakarta Sans keeps the
   geometric character the brand is built on, but is drawn for screens: a
   larger x-height, tighter set, and open apertures that hold up at 15px.

   It is a VARIABLE font — the two files below cover every weight from 400 to
   800, so any weight in that range is free. Self-hosted, so no visitor IP
   leaves the server. Latin-ext is included for Lithuanian (ą č ė į š ų ū ž).
   ------------------------------------------------------------------------- */

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fonts/jakarta-latin.woff2") format("woff2-variations"),
       url("/fonts/jakarta-latin.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: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fonts/jakarta-latin-ext.woff2") format("woff2-variations"),
       url("/fonts/jakarta-latin-ext.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;
}

/* -------------------------------------------------------------------------
   2. Tokens
   ------------------------------------------------------------------------- */

:root {
  /* --- ink: the system's real material -------------------------------- */
  --tg-paper:      #ffffff;
  --tg-ink-050:    #fafafa;
  --tg-ink-100:    #f4f4f5;
  --tg-ink-200:    #e5e7eb;  /* rules, borders — taken from talentgarden.com */
  --tg-ink-300:    #d4d4d8;
  --tg-ink-400:    #9f9f9f;  /* disabled, captions */
  --tg-ink-500:    #5f5f5f;  /* secondary text */
  --tg-ink-700:    #292929;
  --tg-ink-900:    #1e1e1e;  /* body + headings. NOT pure black — TAG's ink */
  --tg-black:      #000000;  /* reserved: logo lockups, full-bleed panels */

  /* --- coral: TAG brand accent ---------------------------------------- */
  --tg-coral-100:  #f5e2de;  /* pale tint, also from the live site */
  --tg-coral-300:  #f8b4a7;
  --tg-coral-500:  #f17b68;  /* THE brand coral */
  --tg-coral-600:  #ee7660;  /* hover on the live site */
  --tg-coral-900:  #a33f2d;  /* deep — use when coral must carry text */

  /* --- lime: from the illustration foliage ---------------------------- */
  --tg-lime-100:   #f2f9dd;
  --tg-lime-300:   #dff2a8;
  --tg-lime-500:   #c9e86f;  /* THE brand lime. A FILL, never a text colour */
  --tg-lime-700:   #8aae2e;
  --tg-lime-900:   #4f6a18;  /* deep — use when lime must carry text */

  /* --- semantic aliases: components reference these, not raw ramps ---- */
  --tg-bg:            var(--tg-paper);
  --tg-bg-subtle:     var(--tg-ink-050);
  --tg-surface:       var(--tg-ink-100);  /* badges, ghost hover, chips */
  --tg-bg-inverse:    var(--tg-ink-900);
  --tg-fg:            var(--tg-ink-900);
  --tg-fg-muted:      var(--tg-ink-500);
  --tg-fg-faint:      var(--tg-ink-400);
  --tg-fg-inverse:    var(--tg-paper);
  --tg-rule:          var(--tg-ink-200);
  --tg-rule-strong:   var(--tg-ink-900);
  --tg-accent:        var(--tg-coral-500);
  --tg-accent-hover:  var(--tg-coral-600);
  --tg-accent-2:      var(--tg-lime-500);
  --tg-focus:         var(--tg-ink-900);

  /* --- type ----------------------------------------------------------- */
  --tg-font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
             system-ui, Helvetica, Arial, sans-serif;
  --tg-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  --tg-w-regular: 400;
  --tg-w-medium:  500;
  --tg-w-semi:    600;
  --tg-w-bold:    700;

  /* fluid scale — min at 360px, max at 1280px */
  --tg-size-display: clamp(3rem, 1.6rem + 6.2vw, 6.5rem);
  --tg-size-h1:      clamp(2.25rem, 1.5rem + 3.3vw, 3.75rem);
  --tg-size-h2:      clamp(1.75rem, 1.35rem + 1.8vw, 2.5rem);
  --tg-size-h3:      clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
  --tg-size-h4:      clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);
  --tg-size-lead:    clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  --tg-size-body:    1.0625rem;  /* 17px — Jakarta sets larger than Poppins */
  --tg-size-small:   0.9375rem;
  --tg-size-caption: 0.8125rem;
  --tg-size-overline:0.6875rem;

  --tg-lh-tight: 1;      /* display + h1, as on the live site */
  --tg-lh-snug:  1.16;
  --tg-lh-body:  1.6;

  --tg-track-display: -0.02em;
  --tg-track-tight:   -0.01em;
  --tg-track-overline: 0.16em;

  /* --- space: 4px base ------------------------------------------------ */
  --tg-space-1:  0.25rem;
  --tg-space-2:  0.5rem;
  --tg-space-3:  0.75rem;
  --tg-space-4:  1rem;
  --tg-space-5:  1.5rem;
  --tg-space-6:  2rem;
  --tg-space-7:  3rem;
  --tg-space-8:  4rem;
  --tg-space-9:  6rem;
  --tg-space-10: 8rem;

  /* --- shape ---------------------------------------------------------- */
  --tg-radius-sm:   4px;
  --tg-radius:      8px;    /* buttons on the live site */
  --tg-radius-lg:   16px;
  --tg-radius-pill: 980px;
  --tg-border:      1px;
  --tg-border-bold: 2px;

  /* --- motion --------------------------------------------------------- */
  --tg-ease:      cubic-bezier(.2, .7, .2, 1);
  --tg-ease-out:  cubic-bezier(0, .6, .3, 1);
  --tg-dur-fast:  120ms;
  --tg-dur:       200ms;
  --tg-dur-slow:  360ms;

  /* --- layout --------------------------------------------------------- */
  --tg-container: 72rem;
  --tg-measure:   34rem;   /* comfortable reading width */

  --tg-shadow-1: 0 1px 2px rgba(30, 30, 30, .06), 0 1px 3px rgba(30, 30, 30, .08);
  --tg-shadow-2: 0 4px 12px rgba(30, 30, 30, .08), 0 2px 4px rgba(30, 30, 30, .04);
}

/* Optional dark theme. The system is designed light-first (as TAG is), but
   because everything is a token, inverting is a matter of remapping the
   semantic aliases — the ramps themselves do not change. */
[data-theme="dark"] {
  --tg-bg:          #111111;
  --tg-bg-subtle:   #1a1a1a;
  --tg-surface:     #242424;
  --tg-bg-inverse:  var(--tg-paper);
  --tg-fg:          #f4f4f5;
  --tg-fg-muted:    #a1a1aa;
  --tg-fg-faint:    #71717a;
  --tg-fg-inverse:  var(--tg-ink-900);
  --tg-rule:        #2a2a2a;
  --tg-rule-strong: #f4f4f5;
  --tg-focus:       #ffffff;
  --tg-shadow-1: 0 1px 2px rgba(0, 0, 0, .5);
  --tg-shadow-2: 0 4px 14px rgba(0, 0, 0, .55);
}

/* -------------------------------------------------------------------------
   3. Base
   ------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--tg-bg);
  color: var(--tg-fg);
  font-family: var(--tg-font);
  font-size: var(--tg-size-body);
  font-weight: var(--tg-w-regular);
  line-height: var(--tg-lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

::selection { background: var(--tg-lime-500); color: var(--tg-ink-900); }

:where(a) { color: inherit; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: var(--tg-border-bold) solid var(--tg-focus);
  outline-offset: 2px;
  border-radius: var(--tg-radius-sm);
}

/* -------------------------------------------------------------------------
   4. Typography
   ------------------------------------------------------------------------- */

.tg-display, .tg-h1, .tg-h2, .tg-h3, .tg-h4 {
  margin: 0;
  color: var(--tg-fg);
  text-wrap: balance;
}

.tg-display {
  font-size: var(--tg-size-display);
  font-weight: var(--tg-w-bold);
  line-height: var(--tg-lh-tight);
  letter-spacing: var(--tg-track-display);
}

.tg-h1 {
  font-size: var(--tg-size-h1);
  font-weight: var(--tg-w-bold);
  line-height: var(--tg-lh-tight);
  letter-spacing: var(--tg-track-tight);
}

.tg-h2 {
  font-size: var(--tg-size-h2);
  font-weight: var(--tg-w-semi);
  line-height: var(--tg-lh-snug);
  letter-spacing: var(--tg-track-tight);
}

.tg-h3 { font-size: var(--tg-size-h3); font-weight: var(--tg-w-semi); line-height: 1.25; }
.tg-h4 { font-size: var(--tg-size-h4); font-weight: var(--tg-w-semi); line-height: 1.3; }

.tg-lead {
  font-size: var(--tg-size-lead);
  line-height: 1.5;
  color: var(--tg-fg-muted);
  max-width: var(--tg-measure);
}

.tg-body   { font-size: var(--tg-size-body); max-width: var(--tg-measure); }
.tg-small  { font-size: var(--tg-size-small); }
.tg-caption{ font-size: var(--tg-size-caption); color: var(--tg-fg-muted); line-height: 1.45; }

.tg-overline {
  font-size: var(--tg-size-overline);
  font-weight: var(--tg-w-semi);
  letter-spacing: var(--tg-track-overline);
  text-transform: uppercase;
  color: var(--tg-fg-muted);
}

/* THE headline device.
   Talent Garden's headlines are sentence case and switch weight mid-sentence:
   "Yep. Team **would love to work here.**" / "Seven floors. Zero neighbors.
   **100% community.**" Set the headline at 400 and let <strong> carry 700.
   This is the single most recognisable thing in the system — use it instead
   of reaching for colour. */
.tg-mixed { font-weight: var(--tg-w-regular); }
.tg-mixed strong, .tg-mixed b { font-weight: var(--tg-w-bold); }

/* Accent emphasis, sparingly. */
.tg-mark {
  background: linear-gradient(var(--tg-lime-500), var(--tg-lime-500)) no-repeat;
  background-size: 100% 0.36em;
  background-position: 0 88%;
  padding: 0 .08em;
}

.tg-mark--coral {
  background-image: linear-gradient(var(--tg-coral-100), var(--tg-coral-100));
}

.tg-link {
  color: inherit;
  text-decoration: none;
  border-bottom: var(--tg-border) solid var(--tg-rule);
  transition: border-color var(--tg-dur) var(--tg-ease);
}
.tg-link:hover { border-bottom-color: currentColor; }

.tg-link--accent { border-bottom-color: var(--tg-accent); }

/* -------------------------------------------------------------------------
   5. Layout
   ------------------------------------------------------------------------- */

.tg-container {
  width: 100%;
  max-width: var(--tg-container);
  margin-inline: auto;
  padding-inline: var(--tg-space-5);
}

.tg-section { padding-block: var(--tg-space-9); }

.tg-stack > * + * { margin-top: var(--tg-space-4); }
.tg-stack-lg > * + * { margin-top: var(--tg-space-6); }

.tg-grid {
  display: grid;
  gap: var(--tg-space-5);
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
}

.tg-rule { border: 0; border-top: var(--tg-border) solid var(--tg-rule); margin: 0; }
.tg-rule--bold { border-top: var(--tg-border-bold) solid var(--tg-rule-strong); }

/* Full-bleed inverse panel — the one place black is used as a field. */
.tg-panel {
  background: var(--tg-bg-inverse);
  color: var(--tg-fg-inverse);
  border-radius: var(--tg-radius-lg);
  padding: var(--tg-space-7);
}

/* -------------------------------------------------------------------------
   6. Buttons
   ------------------------------------------------------------------------- */

.tg-btn {
  --_bg: var(--tg-fg);
  --_fg: var(--tg-bg);
  --_bd: var(--tg-fg);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--tg-space-2);
  font: inherit;
  font-size: var(--tg-size-small);
  font-weight: var(--tg-w-semi);
  line-height: 1;
  padding: 0.875rem 1.375rem;
  border: var(--tg-border) solid var(--_bd);
  border-radius: var(--tg-radius);
  background: var(--_bg);
  color: var(--_fg);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--tg-dur) var(--tg-ease),
              color var(--tg-dur) var(--tg-ease),
              border-color var(--tg-dur) var(--tg-ease),
              transform var(--tg-dur-fast) var(--tg-ease);
}

.tg-btn:hover { transform: translateY(-1px); }
.tg-btn:active { transform: translateY(0); }

.tg-btn[disabled], .tg-btn[aria-disabled="true"] {
  opacity: .4; cursor: default; transform: none;
}

/* Secondary — outline. The default choice for most actions. */
.tg-btn--secondary {
  --_bg: transparent;
  --_fg: var(--tg-fg);
  --_bd: var(--tg-rule-strong);
}
.tg-btn--secondary:hover { --_bg: var(--tg-fg); --_fg: var(--tg-bg); }

/* Ghost — tertiary, no chrome until hover. */
.tg-btn--ghost {
  --_bg: transparent;
  --_fg: var(--tg-fg-muted);
  --_bd: transparent;
}
.tg-btn--ghost:hover { --_fg: var(--tg-fg); --_bg: var(--tg-surface); }

/* Accent — the ONE coral action on a page. If two appear, one is wrong. */
.tg-btn--accent {
  --_bg: var(--tg-coral-500);
  --_fg: var(--tg-ink-900);
  --_bd: var(--tg-coral-500);
}
.tg-btn--accent:hover { --_bg: var(--tg-coral-600); --_bd: var(--tg-coral-600); }

.tg-btn--lime {
  --_bg: var(--tg-lime-500);
  --_fg: var(--tg-ink-900);
  --_bd: var(--tg-lime-500);
}
.tg-btn--lime:hover { --_bg: var(--tg-lime-300); --_bd: var(--tg-lime-300); }

.tg-btn--pill { border-radius: var(--tg-radius-pill); }
.tg-btn--lg { font-size: var(--tg-size-body); padding: 1.0625rem 1.75rem; }
.tg-btn--sm { font-size: var(--tg-size-caption); padding: 0.625rem 1rem; }

/* -------------------------------------------------------------------------
   7. Badges
   ------------------------------------------------------------------------- */

.tg-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--tg-space-1);
  font-size: var(--tg-size-caption);
  font-weight: var(--tg-w-medium);
  line-height: 1;
  padding: 0.4375rem 0.6875rem;
  border-radius: var(--tg-radius-pill);
  background: var(--tg-surface);
  color: var(--tg-fg);
  border: var(--tg-border) solid transparent;
}

.tg-badge--outline { background: transparent; border-color: var(--tg-rule); }
.tg-badge--ink     { background: var(--tg-fg); color: var(--tg-bg); }
.tg-badge--coral   { background: var(--tg-coral-100); color: var(--tg-coral-900); }
.tg-badge--lime    { background: var(--tg-lime-100);  color: var(--tg-lime-900); }

/* -------------------------------------------------------------------------
   8. Cards
   ------------------------------------------------------------------------- */

.tg-card {
  background: var(--tg-bg);
  border: var(--tg-border) solid var(--tg-rule);
  border-radius: var(--tg-radius-lg);
  padding: var(--tg-space-5);
  transition: border-color var(--tg-dur) var(--tg-ease),
              box-shadow var(--tg-dur) var(--tg-ease),
              transform var(--tg-dur) var(--tg-ease);
}

.tg-card--interactive { cursor: pointer; }
.tg-card--interactive:hover {
  border-color: var(--tg-rule-strong);
  box-shadow: var(--tg-shadow-2);
  transform: translateY(-2px);
}

/* A single coral or lime edge is the approved way to colour-code a card —
   a whole tinted panel is not. */
.tg-card--edge { border-left: var(--tg-border-bold) solid var(--tg-accent); }
.tg-card--edge-lime { border-left: var(--tg-border-bold) solid var(--tg-lime-500); }

/* -------------------------------------------------------------------------
   9. Forms
   ------------------------------------------------------------------------- */

.tg-label {
  display: block;
  font-size: var(--tg-size-small);
  font-weight: var(--tg-w-medium);
  margin-bottom: var(--tg-space-2);
}

.tg-input, .tg-select, .tg-textarea {
  width: 100%;
  font: inherit;
  font-size: var(--tg-size-small);
  color: var(--tg-fg);
  background: var(--tg-bg);
  border: var(--tg-border) solid var(--tg-rule);
  border-radius: var(--tg-radius);
  padding: 0.8125rem 0.9375rem;
  transition: border-color var(--tg-dur) var(--tg-ease);
}

.tg-input::placeholder, .tg-textarea::placeholder { color: var(--tg-fg-faint); }
.tg-input:hover, .tg-select:hover, .tg-textarea:hover { border-color: var(--tg-ink-400); }
.tg-textarea { min-height: 7rem; resize: vertical; }

.tg-field-note { font-size: var(--tg-size-caption); color: var(--tg-fg-muted); margin-top: var(--tg-space-2); }
.tg-field-note--error { color: var(--tg-coral-900); }

/* -------------------------------------------------------------------------
   10. Table
   ------------------------------------------------------------------------- */

.tg-table { width: 100%; border-collapse: collapse; font-size: var(--tg-size-small); }

.tg-table th {
  text-align: left;
  font-weight: var(--tg-w-semi);
  font-size: var(--tg-size-caption);
  letter-spacing: var(--tg-track-overline);
  text-transform: uppercase;
  color: var(--tg-fg-muted);
  padding: var(--tg-space-3) var(--tg-space-3);
  border-bottom: var(--tg-border-bold) solid var(--tg-rule-strong);
}

.tg-table td {
  padding: var(--tg-space-3);
  border-bottom: var(--tg-border) solid var(--tg-rule);
  vertical-align: top;
}

.tg-table tr:last-child td { border-bottom: 0; }

.tg-table tbody tr { transition: background-color var(--tg-dur) var(--tg-ease); }
.tg-table--hover tbody tr:hover { background: var(--tg-bg-subtle); }
.tg-table--zebra tbody tr:nth-child(even) { background: var(--tg-bg-subtle); }

/* Numbers align on the decimal, so a column can be scanned. */
.tg-table__num { text-align: right; font-variant-numeric: tabular-nums lining-nums; }

/* Sortable heading. aria-sort carries the state; the caret follows it. */
.tg-table th[aria-sort] { cursor: pointer; user-select: none; }
.tg-table th[aria-sort]:hover { color: var(--tg-fg); }
.tg-table th[aria-sort]::after {
  content: "";
  display: inline-block;
  width: 0; height: 0;
  margin-left: .4rem;
  border: 3.5px solid transparent;
  vertical-align: middle;
  opacity: .35;
}
.tg-table th[aria-sort="none"]::after      { border-top-color: currentColor; margin-bottom: -3px; }
.tg-table th[aria-sort="ascending"]::after { border-bottom-color: currentColor; opacity: 1; margin-bottom: 3px; }
.tg-table th[aria-sort="descending"]::after{ border-top-color: currentColor; opacity: 1; margin-bottom: -3px; }

/* Header stays put while a long table scrolls. */
.tg-table--sticky thead th {
  position: sticky;
  top: 0;
  background: var(--tg-bg);
  z-index: 1;
}

.tg-table__cell { display: flex; align-items: center; gap: var(--tg-space-3); }

/* Any wide table needs its own scroller — the page must never scroll sideways. */
.tg-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* -------------------------------------------------------------------------
   10b. Data patterns — avatar, status, meta, list, definition list, timeline

   Everything below is monochrome except status, which is the system's one
   systematic use of colour: there it encodes meaning rather than emphasis, so
   it does not count against the one-accent-per-view rule. Status is always
   dot + word, never colour alone — colour must not be the only signal.
   ------------------------------------------------------------------------- */

/* --- Avatar: monogram in a circle, echoing the mark ---------------------- */

.tg-avatar {
  display: inline-grid;
  place-items: center;
  width: 2.5rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--tg-fg);
  color: var(--tg-bg);
  font-size: var(--tg-size-caption);
  font-weight: var(--tg-w-semi);
  letter-spacing: .02em;
  text-transform: uppercase;
  flex: none;
  overflow: hidden;
  user-select: none;
}

.tg-avatar img { width: 100%; height: 100%; object-fit: cover; }

.tg-avatar--sm { width: 1.75rem; font-size: 10px; }
.tg-avatar--lg { width: 4rem;    font-size: var(--tg-size-body); }
.tg-avatar--xl { width: 5.5rem;  font-size: var(--tg-size-h3); }

.tg-avatar--outline {
  background: transparent;
  color: var(--tg-fg);
  box-shadow: inset 0 0 0 1px var(--tg-rule-strong);
}

.tg-avatar--lime  { background: var(--tg-lime-500);  color: var(--tg-ink-900); }
.tg-avatar--coral { background: var(--tg-coral-500); color: var(--tg-ink-900); }

/* --- Status: dot plus word ---------------------------------------------- */

.tg-status {
  display: inline-flex;
  align-items: center;
  gap: .4375rem;
  font-size: var(--tg-size-caption);
  color: var(--tg-fg-muted);
  white-space: nowrap;
}

.tg-status::before {
  content: "";
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.tg-status--live   { color: var(--tg-lime-900); }
.tg-status--due    { color: var(--tg-coral-900); }
.tg-status--paused { color: var(--tg-fg-faint); }
.tg-status--ended  { color: var(--tg-fg-faint); }
.tg-status--ended::before { background: transparent; box-shadow: inset 0 0 0 1px currentColor; }

[data-theme="dark"] .tg-status--live { color: var(--tg-lime-500); }
[data-theme="dark"] .tg-status--due  { color: var(--tg-coral-300); }

/* --- Meta: dot-separated inline facts ------------------------------------ */

.tg-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .375rem .625rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--tg-size-caption);
  color: var(--tg-fg-muted);
}

.tg-meta > li { display: flex; align-items: center; gap: .625rem; }
.tg-meta > li + li::before { content: "·"; opacity: .45; }

/* --- List: denser than cards, richer than a table ------------------------ */

.tg-list { list-style: none; margin: 0; padding: 0; }

.tg-list > li + li { border-top: var(--tg-border) solid var(--tg-rule); }

.tg-list__row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--tg-space-4);
  width: 100%;
  padding: var(--tg-space-4) var(--tg-space-3);
  background: none;
  border: 0;
  border-radius: var(--tg-radius);
  font: inherit;
  color: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--tg-dur) var(--tg-ease);
}

.tg-list__row:hover { background: var(--tg-bg-subtle); }
.tg-list__row:focus-visible { outline: var(--tg-border-bold) solid var(--tg-focus); outline-offset: -2px; }

.tg-list__title { font-weight: var(--tg-w-semi); letter-spacing: -.006em; }

.tg-list__trail {
  display: flex;
  align-items: center;
  gap: var(--tg-space-4);
  color: var(--tg-fg-muted);
  font-size: var(--tg-size-caption);
  font-variant-numeric: tabular-nums;
}

/* Below this the trailing column stacks under the title rather than
   squeezing it to two words. */
@media (max-width: 40rem) {
  .tg-list__row { grid-template-columns: auto 1fr; }
  .tg-list__trail { grid-column: 2; justify-content: flex-start; }
}

/* --- Definition list: the facts panel on a profile ----------------------- */

.tg-dl { margin: 0; display: grid; gap: 0; }

.tg-dl > div {
  display: grid;
  grid-template-columns: minmax(7rem, 12rem) 1fr;
  gap: var(--tg-space-4);
  padding: var(--tg-space-3) 0;
  border-bottom: var(--tg-border) solid var(--tg-rule);
}

.tg-dl > div:last-child { border-bottom: 0; }

.tg-dl dt {
  font-size: var(--tg-size-caption);
  color: var(--tg-fg-muted);
}

.tg-dl dd { margin: 0; font-size: var(--tg-size-small); }

@media (max-width: 30rem) {
  .tg-dl > div { grid-template-columns: 1fr; gap: var(--tg-space-1); }
}

/* --- Timeline: activity on a profile ------------------------------------- */

.tg-timeline { list-style: none; margin: 0; padding: 0; }

.tg-timeline > li {
  position: relative;
  padding: 0 0 var(--tg-space-5) var(--tg-space-6);
  border-left: var(--tg-border) solid var(--tg-rule);
}

.tg-timeline > li:last-child { padding-bottom: 0; border-left-color: transparent; }

.tg-timeline > li::before {
  content: "";
  position: absolute;
  left: -4.5px;
  top: .4rem;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tg-bg);
  box-shadow: inset 0 0 0 1.5px var(--tg-fg-faint);
}

.tg-timeline > li[data-now]::before { background: var(--tg-fg); box-shadow: none; }

/* --- Tabs ---------------------------------------------------------------- */

.tg-tabs {
  display: flex;
  gap: var(--tg-space-5);
  border-bottom: var(--tg-border) solid var(--tg-rule);
}

.tg-tab {
  appearance: none;
  background: none;
  border: 0;
  font: inherit;
  font-size: var(--tg-size-small);
  color: var(--tg-fg-muted);
  padding: var(--tg-space-3) 0;
  margin-bottom: -1px;
  border-bottom: var(--tg-border-bold) solid transparent;
  cursor: pointer;
  transition: color var(--tg-dur) var(--tg-ease), border-color var(--tg-dur) var(--tg-ease);
}

.tg-tab:hover { color: var(--tg-fg); }
.tg-tab[aria-selected="true"] { color: var(--tg-fg); border-bottom-color: var(--tg-fg); font-weight: var(--tg-w-semi); }

/* -------------------------------------------------------------------------
   11. Motifs
   ------------------------------------------------------------------------- */

/* The starburst from the Vilnius work ("CALL"). Deliberately one per layout. */
.tg-burst {
  display: inline-grid;
  place-items: center;
  width: 6.5rem;
  aspect-ratio: 1;
  color: var(--tg-paper);
  background: var(--tg-coral-500);
  font-size: var(--tg-size-caption);
  font-weight: var(--tg-w-bold);
  letter-spacing: .06em;
  text-transform: uppercase;
  transform: rotate(-12deg);
  clip-path: polygon(
    50% 0%, 60% 26%, 79% 8%, 74% 32%, 97% 27%, 82% 46%, 100% 57%,
    78% 62%, 90% 82%, 67% 74%, 66% 98%, 51% 79%, 36% 100%, 34% 75%,
    12% 88%, 20% 65%, 0% 60%, 19% 46%, 3% 28%, 26% 32%, 21% 9%, 40% 25%
  );
}

.tg-burst--sm { width: 4.25rem; font-size: 10px; }
.tg-burst--lg { width: 9rem; font-size: var(--tg-size-small); }

.tg-burst--lime { background: var(--tg-lime-500); color: var(--tg-ink-900); }
.tg-burst--ink  { background: var(--tg-fg); color: var(--tg-bg); }

/* --- Fields -------------------------------------------------------------
   Blueprint textures, drawn with gradients: they tile seamlessly, scale to
   any size, cost nothing to load, and recolour with the theme. Use one at a
   time, behind content, never as decoration for its own sake. */

.tg-field { background-color: var(--tg-bg); }

.tg-field--grid {
  background-image:
    linear-gradient(to right,  var(--tg-rule) 1px, transparent 1px),
    linear-gradient(to bottom, var(--tg-rule) 1px, transparent 1px);
  background-size: 1.5rem 1.5rem;
}

.tg-field--dots {
  background-image: radial-gradient(var(--tg-ink-400) 1px, transparent 1.2px);
  background-size: 1rem 1rem;
  opacity: 1;
}

/* Three axes at 60°/-60°/vertical — the plane the campus drawings sit on. */
.tg-field--iso {
  background-image:
    repeating-linear-gradient( 60deg, var(--tg-rule) 0 1px, transparent 1px 2.6rem),
    repeating-linear-gradient(-60deg, var(--tg-rule) 0 1px, transparent 1px 2.6rem),
    repeating-linear-gradient(  0deg, var(--tg-rule) 0 1px, transparent 1px 2.25rem);
}

.tg-field--hatch {
  background-image: repeating-linear-gradient(45deg,
    var(--tg-rule) 0 1px, transparent 1px 8px);
}

/* --- Dimension line ------------------------------------------------------
   Straight from the campaign work: a dashed measure with end ticks and a
   label in the middle. Good for spans, capacities, opening hours. */

.tg-dim {
  display: flex;
  align-items: center;
  gap: var(--tg-space-3);
  color: var(--tg-fg-muted);
  font-size: var(--tg-size-caption);
  letter-spacing: .04em;
}

.tg-dim::before, .tg-dim::after {
  content: "";
  flex: 1;
  height: 9px;
  background: repeating-linear-gradient(to right, currentColor 0 4px, transparent 4px 8px)
              center / 100% 1px no-repeat;
}

.tg-dim::before { border-left:  1px solid currentColor; }
.tg-dim::after  { border-right: 1px solid currentColor; }

/* --- Crop marks ----------------------------------------------------------
   Two opposite corners, not four. Frames an image or a pulled quote without
   drawing a box around it. */

.tg-crop { position: relative; }

.tg-crop::before, .tg-crop::after {
  content: "";
  position: absolute;
  width: 1.125rem;
  height: 1.125rem;
  pointer-events: none;
}

.tg-crop::before {
  top: 0; left: 0;
  border-top:  var(--tg-border-bold) solid currentColor;
  border-left: var(--tg-border-bold) solid currentColor;
}

.tg-crop::after {
  right: 0; bottom: 0;
  border-bottom: var(--tg-border-bold) solid currentColor;
  border-right:  var(--tg-border-bold) solid currentColor;
}

/* --- Speech bubble -------------------------------------------------------
   The shape inside the logo, reused as a callout. Tail sits bottom-left so
   it reads as speech rather than a tooltip. */

.tg-bubble {
  position: relative;
  display: inline-block;
  background: var(--tg-surface);
  color: var(--tg-fg);
  border-radius: var(--tg-radius-lg);
  padding: var(--tg-space-5);
}

.tg-bubble::after {
  content: "";
  position: absolute;
  left: var(--tg-space-6);
  bottom: -0.625rem;
  width: 1.25rem;
  height: 0.75rem;
  background: inherit;
  clip-path: polygon(0 0, 100% 0, 18% 100%);
}

.tg-bubble--ink   { background: var(--tg-fg); color: var(--tg-bg); }
.tg-bubble--lime  { background: var(--tg-lime-500); color: var(--tg-ink-900); }
.tg-bubble--coral { background: var(--tg-coral-500); color: var(--tg-ink-900); }

/* --- Stat ----------------------------------------------------------------
   The oversized-numeral treatment from the contact poster. One per view. */

.tg-stat { display: grid; gap: var(--tg-space-2); }

.tg-stat__value {
  font-size: var(--tg-size-h1);
  font-weight: var(--tg-w-bold);
  line-height: .9;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums lining-nums;
}

.tg-stat__label {
  font-size: var(--tg-size-overline);
  font-weight: var(--tg-w-semi);
  letter-spacing: var(--tg-track-overline);
  text-transform: uppercase;
  color: var(--tg-fg-muted);
}

.tg-stat--xl .tg-stat__value { font-size: var(--tg-size-display); }

/* --- Ticket --------------------------------------------------------------
   A pass. Notches are cut with a mask, so the shape survives any background.
   No border: a mask clips borders unevenly. */

.tg-ticket {
  --_notch: 0.75rem;
  position: relative;
  background: var(--tg-surface);
  border-radius: var(--tg-radius-lg);
  padding: var(--tg-space-5);
  -webkit-mask-image:
    radial-gradient(circle at left center,  transparent var(--_notch), #000 calc(var(--_notch) + .5px)),
    radial-gradient(circle at right center, transparent var(--_notch), #000 calc(var(--_notch) + .5px));
          mask-image:
    radial-gradient(circle at left center,  transparent var(--_notch), #000 calc(var(--_notch) + .5px)),
    radial-gradient(circle at right center, transparent var(--_notch), #000 calc(var(--_notch) + .5px));
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}

.tg-ticket__perf {
  border-top: 1px dashed var(--tg-ink-400);
  margin-block: var(--tg-space-4);
}

/* --- Ring ----------------------------------------------------------------
   Circular caption badge. Set the text on an SVG path; the class handles the
   size and the optional rotation. */

.tg-ring { width: 8rem; aspect-ratio: 1; display: block; color: inherit; }

.tg-ring text {
  font-family: var(--tg-font);
  font-size: 8.5px;
  font-weight: var(--tg-w-semi);
  letter-spacing: .3em;
  text-transform: uppercase;
  fill: currentColor;
}

.tg-ring--spin { animation: tg-ring-spin 22s linear infinite; }

@keyframes tg-ring-spin { to { transform: rotate(360deg); } }

/* Swatch, used by the styleguide but also handy in decks. */
.tg-swatch {
  display: flex;
  flex-direction: column;
  gap: var(--tg-space-2);
}

.tg-swatch__chip {
  height: 4.5rem;
  border-radius: var(--tg-radius);
  border: var(--tg-border) solid var(--tg-rule);
}

.tg-swatch__meta {
  display: flex;
  justify-content: space-between;
  gap: var(--tg-space-2);
  font-size: var(--tg-size-caption);
}

.tg-swatch__hex { font-family: var(--tg-font-mono); color: var(--tg-fg-muted); }

/* -------------------------------------------------------------------------
   12. Logo

   The four marks are extracted from the official PDF as outlined vector, and
   every fill is currentColor. The "tag" counters and the speech bubble are
   real knockouts (holes), not white shapes, so the mark sits correctly on any
   background — including the inverse panel and dark theme.

   They are applied as CSS masks rather than <img>, because currentColor does
   not cross into an <img> document: an <img> logo would stay black in dark
   mode. With a mask the shape is painted in the element's own colour, so it
   inherits the theme for free and the SVG file stays cacheable.

       <span class="tg-logo tg-logo--horizontal" role="img"
             aria-label="Talent Garden Vilnius"></span>

   Inlining the SVG directly also works, and is preferable if you need to
   animate or recolour individual parts.
   ------------------------------------------------------------------------- */

.tg-logo {
  display: inline-block;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;         mask-repeat: no-repeat;
  -webkit-mask-position: center;          mask-position: center;
  -webkit-mask-size: contain;             mask-size: contain;
}

/* aspect-ratio values come straight from each file's viewBox */
.tg-logo--mark {
  width: 3rem; aspect-ratio: 135.63 / 139.47;
  -webkit-mask-image: url("/logos/tag-mark.svg");
          mask-image: url("/logos/tag-mark.svg");
}

.tg-logo--stacked {
  width: 11rem; aspect-ratio: 307.4 / 139.47;
  -webkit-mask-image: url("/logos/tag-lockup-stacked.svg");
          mask-image: url("/logos/tag-lockup-stacked.svg");
}

.tg-logo--wordmark {
  width: 16rem; aspect-ratio: 504.32 / 35.64;
  -webkit-mask-image: url("/logos/tag-wordmark.svg");
          mask-image: url("/logos/tag-wordmark.svg");
}

.tg-logo--horizontal {
  width: 14rem; aspect-ratio: 442.53 / 39.93;
  -webkit-mask-image: url("/logos/tag-lockup-horizontal.svg");
          mask-image: url("/logos/tag-lockup-horizontal.svg");
}

/* Minimum legible sizes. Below these the speech bubble dots close up. */
.tg-logo--mark       { min-width: 1.5rem; }
.tg-logo--stacked    { min-width: 6rem; }
.tg-logo--wordmark   { min-width: 9rem; }
.tg-logo--horizontal { min-width: 8rem; }

/* Clear space: one bubble-height on every side. */
.tg-logo-frame { display: inline-block; padding: .35em; }

/* -------------------------------------------------------------------------
   13. Icons

   One 24-unit grid, drawn on a 3–21 live area so nothing touches the edge.
   The stroke is applied here rather than in the file, which is why a single
   sprite serves every size, weight and colour:

       <svg class="tg-icon" aria-hidden="true"><use href="#tg-i-calendar"/></svg>

   Inline the sprite once per page (it is display:none) and reference symbols
   by id. An external <use href="/icons.svg#tg-i-x"> also works same-origin,
   but inlining guarantees currentColor everywhere.

   Icons are decorative by default — keep aria-hidden and let the adjacent
   text label the control. When an icon is alone in a button, the button needs
   its own aria-label.
   ------------------------------------------------------------------------- */

.tg-icon {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -.15em;
}

/* Optical compensation. A hairline looks heavier as it shrinks and thinner as
   it grows, so the weight is nudged rather than left constant. */
.tg-icon--sm { width: 1.25rem; height: 1.25rem; stroke-width: 1.65; }
.tg-icon--lg { width: 2rem;    height: 2rem;    stroke-width: 1.35; }
.tg-icon--xl { width: 3rem;    height: 3rem;    stroke-width: 1.15; }

.tg-icon--accent { color: var(--tg-accent); }

/* Square target for an icon-only control. */
.tg-btn--icon { padding: 0.75rem; aspect-ratio: 1; }

/* -------------------------------------------------------------------------
   14. Utilities
   ------------------------------------------------------------------------- */

.tg-u-muted    { color: var(--tg-fg-muted); }
.tg-u-faint    { color: var(--tg-fg-faint); }
.tg-u-accent   { color: var(--tg-coral-900); }   /* readable coral for text */
.tg-u-center   { text-align: center; }
.tg-u-measure  { max-width: var(--tg-measure); }
.tg-u-mono     { font-family: var(--tg-font-mono); }
.tg-u-nowrap   { white-space: nowrap; }

.tg-u-visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}