/* ============================================================================
 * witzcraft.css — the LOCKED WitzCraft brand (Swiss Signal direction).
 * Adapted from tools/pitch-template/themes/swiss.css. Steel-teal #4C7D7E.
 * CANONICAL copy lives here (consulting-site); the pitch template carries a
 * duplicate as its 4th theme. Single theme — no runtime switcher.
 * ========================================================================== */

:root{
  --bg:#fafafa; --paper:#fff; --ink:#16201f; --muted:#5f6b6a; --hair:#e6e8e8;

  /* Steel Teal ramp — the core brand, light→dark. AA body text from 500 down. */
  --teal-50:#f2f8f8;  --teal-100:#dfecec; --teal-200:#c0d8d8; --teal-300:#93bcbd;
  --teal-400:#66a1a3; --teal-500:#4c7d7e; --teal-600:#3a6364; --teal-700:#2d4b4d;
  --teal-800:#233739; --teal-900:#172120;

  /* Coral pop ramp — the spark. 500 = brand coral #f26b5b; 700 is text-safe on white. */
  --coral-50:#fdefec; --coral-100:#fcded9; --coral-300:#f7aba1;
  --coral-500:#f26b5b; --coral-600:#dd3e2c; --coral-700:#ae3429;

  /* Semantic tokens */
  --accent:var(--teal-500);       /* steel teal — AA-safe on white (~4.6:1) */
  --accent-deep:var(--teal-600);  /* hover / emphasis */
  --accent-ink:#fff;              /* on-teal text */
  --pop:var(--coral-500);         /* coral spark — logo shadow, fills */
  --pop-deep:var(--coral-700);    /* coral as text (AA on white) */
  --pop-hi:var(--coral-300);      /* hero marker highlight */
  --card:#fff; --card-bd:#e6e8e8;
  --display:"Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --body:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --eyebrow-ls:.2em; --radius:3px; --maxw:680px;
}

*{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:5.5rem; }
body{
  margin:0; background:var(--bg); color:var(--ink); font-family:var(--body);
  line-height:1.6; -webkit-font-smoothing:antialiased; padding:0 1.4rem;
}
a{ color:var(--accent-deep); }
.wrap{ max-width:var(--maxw); margin:0 auto; }

/* ── Top bar / nav ───────────────────────────────────────────────────────── */
.topbar{
  max-width:var(--maxw); margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.3rem 0 0;
}
.logo{ display:flex; align-items:center; gap:.5rem; text-decoration:none; color:inherit; }
.logo__mark{
  width:30px; height:30px; display:grid; place-items:center;
  background:var(--accent); border-radius:7px; color:var(--accent-ink); flex:none;
}
.logo__mark svg{ width:94%; height:94%; display:block; }
.logo__word{ font-family:var(--display); font-weight:800; font-size:1.5rem; letter-spacing:-.03em; text-transform:lowercase; line-height:1; }
.logo__word b{ color:var(--accent); font-weight:inherit; }
.nav{ display:flex; gap:1.4rem; font-size:.85rem; }
.nav a{ color:var(--muted); text-decoration:none; transition:color .15s; }
.nav a:hover{ color:var(--accent); }

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero{ padding:clamp(3.5rem,11vw,6rem) 0 clamp(2.5rem,7vw,4rem); }
.eyebrow{
  font-size:.72rem; letter-spacing:var(--eyebrow-ls); text-transform:uppercase;
  color:var(--accent); font-weight:600; margin:0 0 1.2rem;
}
.hero__headline{
  font-family:var(--display); font-weight:900; line-height:1.05;
  font-size:clamp(2.4rem,7vw,3.7rem); letter-spacing:-.035em; margin:0 0 1.4rem;
}
/* coral marker-highlight on the closing phrase — a swipe behind the words */
.hero__headline .mark{ background:linear-gradient(transparent 62%, var(--pop-hi) 62%); }
.hero__sub{ font-size:clamp(1.05rem,2.5vw,1.28rem); color:var(--muted); max-width:36ch; margin:0; }

/* ── Section scaffolding ─────────────────────────────────────────────────── */
.rule{ height:1px; background:var(--hair); border:0; margin:clamp(2.6rem,7vw,4rem) 0; }
.section{ scroll-margin-top:5.5rem; }
.section__label{
  font-size:.72rem; letter-spacing:var(--eyebrow-ls); text-transform:uppercase;
  color:var(--muted); font-weight:600; margin:0 0 1.5rem;
  display:flex; gap:.7rem; align-items:baseline;
}
.section__label .n{ color:var(--accent); font-variant-numeric:tabular-nums; }
.prose p{ margin:0 0 1rem; font-size:1.06rem; }
.prose p:last-child{ margin-bottom:0; }
.prose strong{ color:var(--ink); font-weight:600; }
.prose em{ font-style:italic; }

/* ── Selected work — project cards ───────────────────────────────────────── */
.cards{ display:grid; gap:.9rem; }
.card{
  display:block; text-decoration:none; color:inherit; background:var(--card);
  border:1px solid var(--card-bd); border-radius:var(--radius); padding:1.25rem 1.35rem;
  transition:border-color .15s, transform .15s;
}
a.card:hover{ border-color:var(--accent); transform:translateY(-2px); }
.card.is-soon{ opacity:.6; }
.card__top{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.4rem; }
.card__name{ font-family:var(--display); font-weight:700; font-size:1.2rem; letter-spacing:-.01em; }
.card__tag{
  font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; font-weight:600;
  color:var(--pop-deep); background:var(--coral-50); border:1px solid var(--coral-100);
  border-radius:999px; padding:.16rem .5rem; flex:none;
}
.card.is-soon .card__tag{ color:var(--muted); background:transparent; border-color:var(--hair); }
.card__blurb{ color:var(--muted); font-size:.97rem; margin:0; }
.card__arrow{ color:var(--accent); font-weight:600; }

/* ── About / Now ─────────────────────────────────────────────────────────── */
.now{ list-style:none; padding:0; margin:0; display:grid; gap:.7rem; }
.now li{ font-size:1.02rem; padding-left:1.1rem; position:relative; color:var(--ink); }
.now li::before{ content:""; position:absolute; left:0; top:.62em; width:.4rem; height:.4rem; background:var(--accent); border-radius:50%; }
.now em{ color:var(--muted); font-style:italic; }

/* ── Contact ─────────────────────────────────────────────────────────────── */
.contact__email{ font-family:var(--display); font-weight:700; font-size:clamp(1.3rem,3vw,1.7rem); letter-spacing:-.01em; }
.contact__email a{ color:var(--accent); text-decoration:none; }
.contact__email a:hover{ text-decoration:underline; }
.contact__copy{ color:var(--muted); font-size:.85rem; margin:.5rem 0 0; }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.colophon{ margin:clamp(3rem,8vw,4.5rem) 0 3.5rem; font-size:.8rem; color:var(--muted); }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width:480px){
  .logo__word{ font-size:1.3rem; }
  .nav{ gap:1rem; }
}