/* ============================================================
   C4 Creative Management
   Design system entry point. All tokens, resets, and component
   classes in one file. Link this file and you have everything.
   ============================================================ */

/* ---- Fonts ---- */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&family=Archivo:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&display=swap');

/* ---- Color tokens ---- */
:root {
  --ink:        #0B0B0B;
  --ink-2:      #161616;
  --ink-3:      #232323;

  --gray-900:   #2B2B2B;
  --gray-700:   #4A4A4A;
  --gray-600:   #6E6E6E;
  --gray-500:   #8C8C8C;
  --gray-400:   #B5B5B5;
  --gray-300:   #D7D7D7;
  --gray-200:   #E7E7E7;
  --gray-100:   #F1F0EC;

  --paper:      #FFFFFF;
  --paper-warm: #F6F5F0;

  --bg:            var(--paper);
  --bg-alt:        var(--paper-warm);
  --surface:       var(--paper);
  --surface-sunk:  var(--gray-100);
  --fg:            var(--ink);
  --fg-muted:      var(--gray-600);
  --fg-faint:      var(--gray-500);
  --border:        var(--gray-300);
  --border-strong: var(--ink);
  --accent:        var(--ink);
  --on-accent:     var(--paper);
  --focus-ring:    var(--ink);
  --selection-bg:  var(--ink);
  --selection-fg:  var(--paper);
}

.c4-inverse,
[data-theme="inverse"] {
  --bg:            var(--ink);
  --bg-alt:        var(--ink-2);
  --surface:       var(--ink-2);
  --surface-sunk:  var(--ink);
  --fg:            var(--paper);
  --fg-muted:      var(--gray-400);
  --fg-faint:      var(--gray-500);
  --border:        var(--ink-3);
  --border-strong: var(--paper);
  --accent:        var(--paper);
  --on-accent:     var(--ink);
  --focus-ring:    var(--paper);
  --selection-bg:  var(--paper);
  --selection-fg:  var(--ink);
}

/* ---- Typography tokens ---- */
:root {
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-mono:    "Space Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-sans:    "Archivo", "Helvetica Neue", Arial, sans-serif;

  --w-light:   300;
  --w-regular: 400;
  --w-medium:  500;
  --w-semi:    600;
  --w-bold:    700;
  --w-black:   900;

  --t-display-xl: clamp(3.25rem, 9vw, 8.5rem);
  --t-display-l:  clamp(2.5rem, 6vw, 5rem);
  --t-display-m:  clamp(2rem, 4vw, 3.25rem);
  --t-display-s:  clamp(1.5rem, 2.4vw, 2.125rem);

  --t-lead:    1.375rem;
  --t-body:    1.0625rem;
  --t-sm:      0.9375rem;
  --t-meta:    0.8125rem;
  --t-micro:   0.6875rem;

  --lh-tight:  1.02;
  --lh-snug:   1.12;
  --lh-text:   1.55;
  --lh-meta:   1.4;

  --tr-display: -0.02em;
  --tr-tight:   -0.01em;
  --tr-normal:  0em;
  --tr-wide:    0.18em;
  --tr-wider:   0.28em;
}

/* ---- Spacing, layout, motion tokens ---- */
:root {
  --space-0:   0;
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.5rem;
  --space-6:   2rem;
  --space-7:   3rem;
  --space-8:   4rem;
  --space-9:   6rem;
  --space-10:  8rem;
  --space-11:  12rem;

  --section-y:        clamp(4rem, 10vw, 9rem);
  --gutter:           clamp(1.25rem, 4vw, 3.5rem);
  --container:        78rem;
  --container-narrow: 46rem;

  --radius-0:    0px;
  --radius-1:    2px;
  --radius-pill: 999px;

  --border-hair:     1px;
  --border-strong-w: 2px;

  --shadow-none: none;
  --shadow-flat: 0 1px 0 0 var(--border);
  --shadow-lift: 0 24px 60px -28px rgba(11,11,11,0.45);

  --ease-expo:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-power:  cubic-bezier(0.7, 0, 0.2, 1);
  --ease-snap:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-1:  0.18s;
  --dur-2:  0.32s;
  --dur-3:  0.6s;
  --dur-4:  0.9s;

  --z-nav:     100;
  --z-overlay: 900;
  --z-modal:   1000;
}

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

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

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

::selection { background: var(--selection-bg); color: var(--selection-fg); }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-display);
  margin: 0;
  text-wrap: balance;
}
h4, h5, h6 { font-family: var(--font-sans); margin: 0; }

p { margin: 0; text-wrap: pretty; }

a { color: inherit; text-decoration: none; }

.c4-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--tr-wide);
  color: var(--fg-muted);
  font-weight: var(--w-regular);
}

.c4-rule { border: 0; border-top: var(--border-hair) solid var(--border); margin: 0; }

:focus-visible { outline: var(--border-strong-w) solid var(--focus-ring); outline-offset: 2px; }

img { max-width: 100%; display: block; }

/* ---- Button ---- */
.c4-btn {
  display: inline-flex; align-items: center; gap: 0.7em;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: var(--tr-wide);
  font-size: var(--t-meta);
  font-weight: var(--w-regular);
  line-height: 1;
  padding: 0.85em 1.5em;
  border: var(--border-hair) solid transparent;
  border-radius: var(--radius-0);
  cursor: pointer; text-decoration: none; position: relative;
  transition: background var(--dur-1) var(--ease-power),
              color var(--dur-1) var(--ease-power),
              border-color var(--dur-1) var(--ease-power),
              transform var(--dur-1) var(--ease-power);
  -webkit-user-select: none; user-select: none;
}
.c4-btn:disabled, .c4-btn[aria-disabled="true"] { opacity: 0.4; pointer-events: none; }
.c4-btn .c4-btn__arrow { transition: transform var(--dur-2) var(--ease-expo); display: inline-block; }
.c4-btn:hover .c4-btn__arrow { transform: translate(3px, -3px); }
.c4-btn--sm  { padding: 0.6em 1.1em; font-size: var(--t-micro); }
.c4-btn--lg  { padding: 1.05em 2em; font-size: var(--t-meta); }
.c4-btn--solid   { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.c4-btn--solid:hover { background: transparent; color: var(--accent); }
.c4-btn--outline { background: transparent; color: var(--fg); border-color: var(--border-strong); }
.c4-btn--outline:hover { background: var(--fg); color: var(--bg); }
.c4-btn--ghost   { background: transparent; color: var(--fg); border-color: transparent; }
.c4-btn--ghost:hover { background: var(--surface-sunk); }
.c4-btn--link    { background: transparent; color: var(--fg); border: 0; padding: 0; gap: 0.5em; }
.c4-btn--link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor; transform: scaleX(1); transform-origin: left; transition: transform var(--dur-2) var(--ease-expo); }
.c4-btn--link:hover::after { transform: scaleX(0); transform-origin: right; }

/* ---- Tag ---- */
.c4-tag {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-family: var(--font-mono); text-transform: uppercase;
  letter-spacing: var(--tr-wide); font-size: var(--t-micro);
  line-height: 1; padding: 0.5em 0.8em; border-radius: var(--radius-0); white-space: nowrap;
}
.c4-tag--outline { border: var(--border-hair) solid var(--border); color: var(--fg-muted); }
.c4-tag--solid   { background: var(--accent); color: var(--on-accent); }
.c4-tag--bare    { padding-left: 0; padding-right: 0; color: var(--fg-muted); }
.c4-tag__dot { width: 6px; height: 6px; background: currentColor; border-radius: var(--radius-pill); display: inline-block; }

/* ---- Eyebrow ---- */
.c4-eyebrow {
  display: inline-flex; align-items: center; gap: 0.7em;
  font-family: var(--font-mono); text-transform: uppercase;
  letter-spacing: var(--tr-wide); font-size: var(--t-micro);
  color: var(--fg-muted); line-height: 1;
}
.c4-eyebrow__index { color: var(--fg); }
.c4-eyebrow__tick  { width: 1.6em; height: 1px; background: var(--border-strong); display: inline-block; }

/* ---- Section heading ---- */
.c4-sh { display: flex; flex-direction: column; gap: var(--space-4); }
.c4-sh--center { align-items: center; text-align: center; }
.c4-sh__title { font-family: var(--font-display); font-weight: var(--w-bold); line-height: var(--lh-tight); letter-spacing: var(--tr-display); color: var(--fg); font-size: var(--t-display-l); margin: 0; }
.c4-sh__title em { font-style: italic; font-weight: var(--w-medium); }
.c4-sh--m  .c4-sh__title { font-size: var(--t-display-m); }
.c4-sh--xl .c4-sh__title { font-size: var(--t-display-xl); }
.c4-sh__lead { font-family: var(--font-sans); font-size: var(--t-lead); line-height: var(--lh-text); color: var(--fg-muted); max-width: 46ch; margin: 0; }

/* ---- Marquee ---- */
.c4-marquee { overflow: hidden; width: 100%; border-block: var(--border-hair) solid var(--border); padding-block: var(--space-4); }
.c4-marquee--bare { border: 0; padding-block: 0; }
.c4-marquee__track { display: flex; width: max-content; will-change: transform; animation: c4-marquee-scroll linear infinite; }
.c4-marquee:hover .c4-marquee__track { animation-play-state: paused; }
.c4-marquee--reverse .c4-marquee__track { animation-direction: reverse; }
.c4-marquee__group { display: flex; align-items: center; flex: none; }
.c4-marquee__item { font-family: var(--font-display); font-weight: var(--w-bold); letter-spacing: var(--tr-display); color: var(--fg); font-size: clamp(2rem, 6vw, 4.5rem); line-height: 1.1; padding: 0 var(--space-6); white-space: nowrap; }
.c4-marquee__item em { font-style: italic; font-weight: var(--w-medium); }
.c4-marquee__sep { font-family: var(--font-mono); color: var(--fg-faint); font-size: 0.9rem; align-self: center; }
@keyframes c4-marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .c4-marquee__track { animation: none; } }

/* ---- Card ---- */
.c4-card { display: flex; flex-direction: column; background: var(--surface); border: var(--border-hair) solid var(--border); border-radius: var(--radius-0); text-decoration: none; color: inherit; transition: border-color var(--dur-2) var(--ease-power), transform var(--dur-2) var(--ease-expo); overflow: hidden; }
a.c4-card:hover { border-color: var(--border-strong); transform: translateY(-4px); }
.c4-card__media { position: relative; overflow: hidden; background: var(--surface-sunk); border-bottom: var(--border-hair) solid var(--border); aspect-ratio: var(--_ar, 4 / 3); }
.c4-card__media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.02); transition: transform var(--dur-4) var(--ease-expo); }
a.c4-card:hover .c4-card__media img { transform: scale(1.04); }
.c4-card__index { position: absolute; top: var(--space-3); left: var(--space-3); font-family: var(--font-mono); font-size: var(--t-micro); letter-spacing: var(--tr-wide); color: #fff; mix-blend-mode: difference; }
.c4-card__ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: var(--t-micro); letter-spacing: var(--tr-wide); color: var(--fg-faint); text-transform: uppercase; }
.c4-card__body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); }
.c4-card__meta { display: flex; align-items: center; gap: var(--space-3); font-family: var(--font-mono); font-size: var(--t-micro); letter-spacing: var(--tr-wide); text-transform: uppercase; color: var(--fg-muted); }
.c4-card__title { font-family: var(--font-display); font-weight: var(--w-bold); font-size: var(--t-display-s); line-height: var(--lh-snug); letter-spacing: var(--tr-tight); color: var(--fg); margin: 0; display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); }
.c4-card__arrow { font-family: var(--font-sans); transition: transform var(--dur-2) var(--ease-expo); }
a.c4-card:hover .c4-card__arrow { transform: translate(4px, -4px); }
.c4-card__desc { font-family: var(--font-sans); font-size: var(--t-sm); color: var(--fg-muted); line-height: var(--lh-text); margin: 0; }

/* ---- Input / Field ---- */
.c4-field { display: flex; flex-direction: column; gap: var(--space-2); }
.c4-field__label { font-family: var(--font-mono); text-transform: uppercase; font-size: var(--t-micro); letter-spacing: var(--tr-wide); color: var(--fg-muted); display: flex; gap: 0.5em; align-items: baseline; }
.c4-field__req { color: var(--fg); }
.c4-field__control { font-family: var(--font-sans); font-size: var(--t-body); color: var(--fg); background: transparent; border: 0; border-bottom: var(--border-strong-w) solid var(--border); border-radius: 0; padding: var(--space-3) 0; width: 100%; transition: border-color var(--dur-1) var(--ease-power); outline: none; }
.c4-field__control::placeholder { color: var(--fg-faint); }
.c4-field__control:hover { border-color: var(--fg-muted); }
.c4-field__control:focus { border-color: var(--border-strong); }
textarea.c4-field__control { resize: vertical; min-height: 5.5em; line-height: var(--lh-text); }
.c4-field__hint { font-family: var(--font-mono); font-size: var(--t-micro); letter-spacing: 0.04em; color: var(--fg-faint); }
.c4-field--invalid .c4-field__control { border-color: var(--fg); border-bottom-style: dashed; }