/* ══════════════════════════════════════════════════════════════
   CURTIX STUDIO — SHARED COMPONENTS
   Cross-page component classes that both home.css and case-study.css
   need. Loaded after tokens.css, before the page-specific stylesheet.
   Contains no tokens of its own — see /css/tokens.css.
   ══════════════════════════════════════════════════════════════ */

/* ─── EYEBROW ───
   Small tracked mono caption preceded by an accent dot. Built once
   here; .featured-case-eyebrow (home.css) and .cs-eyebrow
   (case-study.css) extend it via this shared selector rather than
   redefining it. */
.eyebrow,
.featured-case-eyebrow,
.cs-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 400;
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--text-dim);
}
.eyebrow::before,
.featured-case-eyebrow::before,
.cs-eyebrow::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

/* ─── SCRIPT ACCENT ───
   One keyword per major heading, set in the display-only script
   family (var(--font-script)) instead of the heading's own Outfit
   800. Sized up (1.2em) because a script face at the same font-size
   as a bold sans reads visibly smaller; letter-spacing reset to
   normal since the heading's -0.03em cramps a script; line-height
   loosened so descenders (y, g, p) clear the heading's own 0.92
   without colliding with the next line.
   .script-accent may appear once per major heading. The 1px accent
   underline is NOT part of the base class any more — it's the
   .script-accent--underlined modifier, which appears exactly once
   per page, on the hero. See CLAUDE.md's ACCENT DISCIPLINE section. */
.script-accent {
  position: relative;
  display: inline-block;
  font-family: var(--font-script);
  font-weight: 400;
  color: var(--cream);
  font-size: 1.2em;
  letter-spacing: normal;
  line-height: 1.3;
}
.script-accent--underlined::after {
  content: '';
  position: absolute;
  left: -3%;
  right: -3%;
  bottom: -0.1em;
  height: 1px;
  background: var(--accent);
}

/* ─── WORDMARK X ───
   The one place var(--accent) appears as a letterform: the "x" in
   "curtix" across the nav, case-study topbar, and page-intro
   wordmarks. A permitted brand-mark exception — see CLAUDE.md. */
.wordmark-x {
  color: var(--accent);
}

/* ─── BUTTONS ───
   Base layout shared by every button-shaped link, plus the site's one
   filled treatment: .btn-pill (was .btn-primary — renamed and moved
   here unchanged, since the "generalised primary button" this system
   calls for turned out to already be exactly what .btn-primary was).
   .btn-ghost (bordered, no circle) stays page-specific in home.css. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  font-family: 'Outfit', sans-serif;
  font-size: var(--fs-small);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
  text-decoration: none;
  border: none;
  white-space: nowrap;
}
.btn-large { padding: 18px 40px; font-size: var(--fs-body); }

/* .btn-pill is the signature pill: transparent fill, 1px border, a
   cream circle at the trailing end holding the inline-SVG arrow. The
   circle is real markup (.btn-circle), not a background image, so
   its arrow can track var(--bg) via currentColor.
   Hover carries the only non-hairline, non-wordmark use of var(--accent)
   on this site: the border and the circle's fill, never the label and
   never a large surface. The circle nudges toward the direction its
   arrow points instead of scaling, so the motion reads as the arrow
   moving, not the button growing. */
.btn-pill {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 14px 14px 14px 28px;
  transition: border-color 0.2s ease-out, transform 0.2s ease-out, box-shadow 0.2s ease-out;
}
.btn-pill .btn-circle {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--cream);
  color: var(--bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease-out, background-color 0.2s ease-out;
}
.btn-pill:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(255,255,255,0.08);
}
.btn-pill:hover .btn-circle {
  background: var(--accent);
  transform: translate(2px, -2px);
}
.btn-large.btn-pill { padding: 18px 18px 18px 40px; }
/* Nav-sized instance, smaller than the default pill. Not applied to
   the live nav yet — see RESTYLE-PROGRESS.md. */
.btn-pill--sm { padding: 10px 10px 10px 20px; }
.btn-pill--sm .btn-circle { width: 28px; height: 28px; }

/* ─── LINK GHOST ───
   Text plus a small inline up-right arrow, no container — for
   in-flow links that don't warrant a full button. Reuses the same
   arrow glyph as .btn-circle's SVG. Hover moves the text to var(--text)
   same as always; the arrow is the only part that takes var(--accent),
   nudging in the direction it points rather than the whole link
   turning blue. */
.link-ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: var(--fs-small);
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s ease, gap 0.2s ease;
}
.link-ghost:hover { color: var(--text); gap: 9px; }
.link-ghost svg { flex-shrink: 0; transition: transform 0.2s ease-out, color 0.2s ease-out; }
.link-ghost:hover svg { transform: translate(2px, -2px); color: var(--accent); }

/* ─── SHELL ───
   Vertical-rhythm wrapper: generous top/bottom padding, capped width
   plus its own horizontal gutter (folding in what a separate
   .container used to add), left-aligned. Replaces the separate
   .section + .container pair in home.css and .cs-section +
   .cs-container pair in case-study.css, section by section as each
   one gets its restyle pass — not everything is migrated yet. Named
   .shell (not .section) so it can't collide with the bare .section
   class still used by the homepage sections not yet migrated. */
.shell {
  padding: 140px var(--cs-gutter);
  max-width: var(--cs-max);
  margin: 0 auto;
  text-align: left;
}
@media (max-width: 768px) {
  .shell { padding: 80px var(--cs-gutter); }
}
@media (max-width: 640px) {
  .shell { padding: 80px 18px; }
}

/* ─── CARD ───
   1px border, standard radius, transparent fill, hover brightens the
   border toward var(--accent) (see CLAUDE.md hover rule). Applied to
   the homepage's featured case study cards, which also carry the 3D
   tilt in /js/home.js — the tilt only ever runs while this same
   :hover is active, so the two read as one effect. */
.card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: transparent;
  transition: border-color 0.3s ease;
}
.card:hover { border-color: var(--accent); }