/* =========================================================================
   Theme: Atelier — editorial / Swiss-French
   Warm paper, vermilion accent, serif display, asymmetric grids.
   The default theme (tokens defined in base.css :root also live here as
   explicit overrides so users can compare side-by-side).
   ========================================================================= */

[data-theme="atelier"] {
  --bg:          oklch(97.0% 0.009 78);
  --bg-2:        oklch(94.0% 0.011 78);
  --bg-3:        oklch(89.5% 0.014 75);
  --fg:          oklch(18.0% 0.012 55);
  --fg-muted:    oklch(40.0% 0.014 55);
  --fg-subtle:   oklch(55.0% 0.014 55);
  --rule:        oklch(85.5% 0.013 70);
  --accent:      oklch(58.5% 0.195 27);   /* vermilion */
  --accent-ink:  oklch(22.0% 0.030 28);
  --accent-tint: oklch(94.5% 0.060 30);
  --on-accent:   oklch(99.0% 0.005 80);

  --font-display: "Newsreader", "Source Serif 4", Georgia, serif;
  --font-body:    "Archivo", "Inter Tight", system-ui, sans-serif;
  --font-mono:    "DM Mono", "JetBrains Mono", ui-monospace, monospace;
}

/* Hero — asymmetric editorial */
[data-theme="atelier"] .hero {
  padding-block: clamp(72px, 9vw, 144px);
  position: relative;
}
[data-theme="atelier"] .hero .kicker {
  color: var(--accent);
  font-weight: 600;
}
[data-theme="atelier"] .hero h1 {
  font-size: var(--step-6);
  line-height: 0.94;
  letter-spacing: -0.026em;
  max-width: 18ch;
}
[data-theme="atelier"] .hero h1 em {
  font-style: italic;
  font-variation-settings: "opsz" 144, "wght" 420;
  color: var(--accent);
}
[data-theme="atelier"] .hero .meta {
  margin-top: var(--s-7);
  display: grid; grid-template-columns: 1fr; gap: var(--s-5);
  border-top: 1px solid var(--rule);
  padding-top: var(--s-5);
  max-width: 980px;
}
@media (min-width: 780px) {
  [data-theme="atelier"] .hero .meta { grid-template-columns: 2fr 1fr; }
}
[data-theme="atelier"] .hero .meta h4 {
  font-family: var(--font-display); font-weight: 500; font-size: var(--step-1);
  margin-bottom: 6px;
}

/* Section: thin top rule, generous gap */
[data-theme="atelier"] .section-title {
  display: grid; grid-template-columns: 1fr; gap: var(--s-4);
  padding-bottom: var(--s-6);
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--s-7);
}
@media (min-width: 720px) {
  [data-theme="atelier"] .section-title { grid-template-columns: 1fr 2fr; align-items: end; }
}

/* Cards: no boxes, kicker label sits above image with rule */
[data-theme="atelier"] .card {
  background: transparent;
  border-top: 1px solid var(--rule);
  padding-top: var(--s-4);
}
[data-theme="atelier"] .card .meta {
  order: -1;
  padding-top: 0;
  margin-bottom: var(--s-3);
}
[data-theme="atelier"] .card .title {
  font-size: clamp(1.4rem, 1.2rem + 0.6vw, 1.7rem);
  line-height: 1.1;
  font-variation-settings: "opsz" 60, "wght" 460;
  max-width: 28ch;
}
[data-theme="atelier"] .card .media {
  border: 1px solid var(--rule);
}
[data-theme="atelier"] .card:hover .media img { transform: scale(1.02); }

/* Solution list */
[data-theme="atelier"] .solutions { display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--rule); }
[data-theme="atelier"] .solutions .row {
  display: grid; grid-template-columns: 1fr; gap: var(--s-3);
  padding-block: var(--s-5);
  border-bottom: 1px solid var(--rule);
  transition: padding 220ms var(--ease-out-quart);
}
[data-theme="atelier"] .solutions .row:hover { padding-left: var(--s-3); }
@media (min-width: 720px) {
  [data-theme="atelier"] .solutions .row { grid-template-columns: 120px 1fr 2fr auto; align-items: baseline; gap: var(--s-5); }
}
[data-theme="atelier"] .solutions .row .num { font-family: var(--font-mono); font-size: var(--step--1); color: var(--fg-subtle); }
[data-theme="atelier"] .solutions .row h3 { font-family: var(--font-display); font-size: var(--step-2); }
[data-theme="atelier"] .solutions .row p { color: var(--fg-muted); }
[data-theme="atelier"] .solutions .row .arrow { color: var(--accent); font-family: var(--font-mono); }

/* Logo wall — minimal, single rule */
[data-theme="atelier"] .logos {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 0;
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
@media (min-width: 720px) {
  [data-theme="atelier"] .logos { grid-template-columns: repeat(6, 1fr); }
}
[data-theme="atelier"] .logos li {
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  aspect-ratio: 5 / 3;
  display: grid; place-items: center;
  padding: var(--s-4);
  background: var(--bg);
}
[data-theme="atelier"] .logos li img {
  max-height: 38px; width: auto; object-fit: contain;
  filter: grayscale(1) contrast(0.95);
  opacity: 0.72;
  transition: opacity 220ms var(--ease-out-quart), filter 220ms var(--ease-out-quart);
}
[data-theme="atelier"] .logos li:hover img { opacity: 1; filter: none; }

/* Detail page — long-form article */
[data-theme="atelier"] .article-hero {
  padding-block: var(--s-9);
  border-bottom: 1px solid var(--rule);
}
[data-theme="atelier"] .article-hero h1 {
  font-size: clamp(2.6rem, 2rem + 3.4vw, 4.4rem);
  line-height: 0.98;
  letter-spacing: -0.022em;
  max-width: 22ch;
  margin-top: var(--s-4);
}
[data-theme="atelier"] .article-hero .lede {
  margin-top: var(--s-5);
  font-family: var(--font-display); font-style: italic; font-weight: 380;
  font-size: var(--step-2); color: var(--fg-muted);
  max-width: 56ch;
}
[data-theme="atelier"] .article-hero figure {
  margin-top: var(--s-7);
  border: 1px solid var(--rule);
  aspect-ratio: 16 / 7;
  overflow: hidden;
}
[data-theme="atelier"] .article-hero figure img { width: 100%; height: 100%; object-fit: cover; }
[data-theme="atelier"] .article-body {
  padding-block: var(--s-8);
  display: grid; grid-template-columns: 1fr; gap: var(--s-6);
}
@media (min-width: 880px) {
  [data-theme="atelier"] .article-body { grid-template-columns: 200px 1fr; gap: var(--s-9); }
}
[data-theme="atelier"] .article-body h3 {
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.18em;
  font-size: var(--step--1); color: var(--accent);
  margin-bottom: var(--s-3);
}
[data-theme="atelier"] .article-body p { font-size: var(--step-1); line-height: 1.62; max-width: 64ch; }