/* =====================================================================
   MARROW ATELIER. THE PUBLIC WEBSITE TEMPLATE.  assets/css/atelier-public.css
   (2026-09-16, lane L6)

   One template for every public page (BLUEPRINT-SURFACES E), linked after
   assets/css/atelier.css and assets/css/atelier-components.css on every
   stamped page of the website and before the page's own sheet. It binds the
   hooks the public pages already carry (css/styles.css names them) to the
   Atelier system: the shared nav (.nav-brand, .nav-wordmark, .nav-links), the
   page head (.page-hero-*), the section head (.section-eyebrow, .section-title,
   .section-lede), the rhythm (.page-section, .container), the cta strip, the
   shared footer and the small set of places the two shared sheets cannot
   reach on a page that never loads the theme layer.

   The header of atelier.css states every convention this file follows: the
   :root[data-mz-console="atelier"] prefix on every rule so a tie is won on
   order and never on weight, tokens never literals (the one rgba here is white
   at an alpha, which is not a brand value), no combinator inside an :is(), no
   gradient, no shadow, no blur, no keyframe, no light. Where css/styles.css
   sets the parchment idiom (uppercase serif titles, mono tracked eyebrows, a
   teal cta strip), this sheet returns them to the Oura scale: the serif at 300
   in sentence case, mono 12 at 700, the strip a cream section with one bone
   black pill. No em or en dashes.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. THE SHARED NAV. The shell (glass, hairline, 64 tall) is atelier.css;
   this binds the public hooks it does not name.
   --------------------------------------------------------------------- */
:root[data-mz-console="atelier"] .nav-inner {
  padding-top: 0;
  padding-bottom: 0;
  justify-content: space-between;
}
:root[data-mz-console="atelier"] .nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  min-width: 44px;
  color: var(--ink-primary);
  text-decoration: none;
}
:root[data-mz-console="atelier"] .nav-brand svg { width: 32px; height: 32px; flex: none; }
:root[data-mz-console="atelier"] .nav-wordmark {
  font-family: var(--serif);
  font-weight: var(--weight-serif);
  font-size: 24px;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1;
  color: var(--ink-primary);
}
:root[data-mz-console="atelier"] .nav-links a {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 16px;
  color: var(--ink-secondary);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color var(--mz-dur-fast) ease, border-color var(--mz-dur-fast) ease;
}
:root[data-mz-console="atelier"] .nav-links a:hover { color: var(--ink-primary); }
:root[data-mz-console="atelier"] .nav-links a[aria-current="page"] { color: var(--ink-primary); border-bottom-color: var(--marrow-accent); }
/* The shared sheet sets the CTA in uppercase mono tracking; the Atelier pill is Inter 500 in sentence case. */
:root[data-mz-console="atelier"] .nav-cta { text-transform: none; letter-spacing: 0; }
:root[data-mz-console="atelier"] .nav-toggle {
  border: 1px solid var(--rule-strong);
  border-radius: 12px;
  color: var(--ink-primary);
  background: transparent;
}
:root[data-mz-console="atelier"] .nav-toggle:hover { border-color: var(--ink-primary); }
@media (max-width: 720px) {
  /* The slide down panel is a card under the glass bar. */
  :root[data-mz-console="atelier"] .nav-links {
    background: var(--paper-card);
    border-bottom: 1px solid var(--rule-soft);
  }
  :root[data-mz-console="atelier"] .nav-links a { border-bottom: 1px solid var(--rule-soft); min-height: 44px; }
  :root[data-mz-console="atelier"] .nav-links a:last-child { border-bottom: none; }
}

/* ---------------------------------------------------------------------
   2. THE PAGE HEAD AND THE SECTION HEAD. Eyebrow mono 12 at 700 in the
   accent, h1 serif 300 at 48 (40 under 768) with one italic word, lede 16
   secondary in a 720 column, all left aligned on the canvas (BLUEPRINT F).
   --------------------------------------------------------------------- */
:root[data-mz-console="atelier"] .page-hero {
  background: transparent;
  background-image: none;
  padding: var(--space-5) 0 var(--space-3);
  text-align: left;
}
:root[data-mz-console="atelier"] :is(.page-hero-eyebrow, .section-eyebrow, .included-band-eyebrow, .hub-eyebrow, .tc-card-eyebrow, .vi-section-eyebrow, .cx-ask-eyebrow, .profile-eyebrow) {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--marrow-accent);
  margin-bottom: 12px;
}
:root[data-mz-console="atelier"] :is(.page-hero-title, .section-title, .cx-h2, .vi-section-h) {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 48px;
  line-height: 1.25;
  letter-spacing: -1.2px;
  text-transform: none;
  color: var(--ink-primary);
  max-width: 24ch;
  margin: 0 0 16px;
}
:root[data-mz-console="atelier"] :is(.page-hero-title, .section-title, .cx-h2, .vi-section-h) :is(em, .em, .italic, .red) {
  font-style: italic;
  font-weight: var(--weight-serif);
  color: var(--marrow-accent);
  text-decoration: none;
}
:root[data-mz-console="atelier"] :is(.page-hero-lede, .section-lede, .cx-lede) {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-secondary);
  max-width: 720px;
  margin: 0;
}
:root[data-mz-console="atelier"] :is(.page-hero-lede, .section-lede) strong { color: var(--ink-primary); font-weight: 500; }
:root[data-mz-console="atelier"] .page-section { padding: calc(var(--atelier-section-gap) / 2) 0; }
:root[data-mz-console="atelier"] .container { max-width: var(--atelier-max-width); padding: 0 var(--space-3); }
@media (max-width: 767px) {
  :root[data-mz-console="atelier"] :is(.page-hero-title, .section-title, .cx-h2, .vi-section-h) { font-size: 40px; letter-spacing: -1px; }
  :root[data-mz-console="atelier"] .page-hero { padding-top: var(--space-4); }
}

/* ---------------------------------------------------------------------
   3. CARDS, BANDS AND THE READING COLUMN.
   --------------------------------------------------------------------- */
:root[data-mz-console="atelier"] :is(.mz-card, .card, .plat-card, .hub-card, .tc-card, .cx-card, .xb-card, .build-card, .sec-card, .legal-card, .trust-card, .st-card) {
  background: var(--paper-card);
  background-image: none;
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-card);
  box-shadow: none;
  color: var(--ink-primary);
}
:root[data-mz-console="atelier"] :is(.mz-card--lift, .mz-card--lift:hover) { transform: none; box-shadow: none; }
:root[data-mz-console="atelier"] :is(.included-band, .plat-included, .band-nested) {
  background: var(--paper-nested);
  background-image: none;
  border: 0;
  border-radius: var(--radius-card);
}
:root[data-mz-console="atelier"] .reading,
:root[data-mz-console="atelier"] .legal-body,
:root[data-mz-console="atelier"] .prose { max-width: 720px; }
:root[data-mz-console="atelier"] :is(.reading, .legal-body, .prose) :is(p, li) { font-size: 16px; line-height: 1.6; color: var(--ink-secondary); }
:root[data-mz-console="atelier"] :is(.reading, .legal-body, .prose) h2 {
  font-family: var(--serif);
  font-weight: var(--weight-serif);
  font-size: 24px;
  line-height: 1.38;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-primary);
  padding-top: var(--space-3);
  border-top: 1px solid var(--rule-soft);
  margin: var(--space-4) 0 var(--space-2);
}
:root[data-mz-console="atelier"] :is(.reading, .legal-body, .prose) a { color: var(--marrow-accent); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }

/* ---------------------------------------------------------------------
   4. THE CTA STRIP. Teal never fills a surface, so the strip is a cream
   section with a hairline above it, a serif line and one bone black pill.
   --------------------------------------------------------------------- */
:root[data-mz-console="atelier"] .cta-strip {
  background: transparent;
  background-image: none;
  color: var(--ink-primary);
  border-top: 1px solid var(--rule-soft);
  padding: var(--atelier-section-gap) 0;
  text-align: left;
}
:root[data-mz-console="atelier"] .cta-strip-line {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 40px;
  line-height: 1.25;
  letter-spacing: -1px;
  text-transform: none;
  color: var(--ink-primary);
  max-width: 24ch;
  margin-bottom: var(--space-3);
}
:root[data-mz-console="atelier"] .cta-strip-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 14px 28px;
  border-radius: 999px;
  background: var(--bone-black);
  color: var(--mzv-onfill);
  border: 1px solid var(--bone-black);
  font-family: var(--sans);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0;
  text-transform: none;
  transition: background-color var(--mz-dur-fast) ease;
}
:root[data-mz-console="atelier"] .cta-strip-btn:hover { background: var(--atelier-onyx); border-color: var(--atelier-onyx); transform: none; }
/* Secondary actions written for the old dark strip are ghosts on the cream now. */
:root[data-mz-console="atelier"] :is(.btn-secondary--on-dark, .btn-primary--on-dark),
:root[data-mz-console="atelier"] .cta-strip .btn-secondary {
  background: transparent;
  color: var(--ink-secondary);
  border: 1px solid var(--ink-secondary);
}
:root[data-mz-console="atelier"] :is(.btn-secondary--on-dark, .btn-primary--on-dark):hover,
:root[data-mz-console="atelier"] .cta-strip .btn-secondary:hover { color: var(--ink-primary); border-color: var(--ink-primary); background: transparent; }

/* ---------------------------------------------------------------------
   5. THE SHARED FOOTER. atelier.css paints the ground, the canvas ink and
   the accent on dark links; this sets the type on the public hooks.
   --------------------------------------------------------------------- */
:root[data-mz-console="atelier"] footer { padding: var(--space-6) 0 var(--space-4); }
:root[data-mz-console="atelier"] .footer-wordmark {
  font-family: var(--serif);
  font-weight: var(--weight-serif);
  font-size: 24px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--paper-canvas);
}
:root[data-mz-console="atelier"] .footer-wordmark sup { color: var(--paper-canvas); }
:root[data-mz-console="atelier"] .footer-bio { color: var(--paper-canvas); font-size: 14px; line-height: 1.5; letter-spacing: 0.35px; }
:root[data-mz-console="atelier"] .footer-col-title {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--paper-canvas);
}
:root[data-mz-console="atelier"] .footer-col a { color: var(--marrow-accent-on-dark); font-size: 14px; }
:root[data-mz-console="atelier"] .footer-col a:hover { color: var(--color-pure-white); }
:root[data-mz-console="atelier"] .footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  color: var(--paper-canvas);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.5px;
  line-height: 1.5;
}
:root[data-mz-console="atelier"] .footer-bottom a { color: var(--marrow-accent-on-dark); }

/* ---------------------------------------------------------------------
   6. THE HOME. The one italic pivot on the hero panel is white, because the
   sky mood's last stop IS the accent and a teal word there measures 1.0.
   --------------------------------------------------------------------- */
:root[data-mz-console="atelier"] .hero-copy .display em { color: var(--color-pure-white); }

/* ---------------------------------------------------------------------
   7. TABLES ON THE PUBLIC PAGES (legal/subprocessors, security).
   --------------------------------------------------------------------- */
:root[data-mz-console="atelier"] .public-table { width: 100%; border-collapse: collapse; }
:root[data-mz-console="atelier"] .public-table th {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--ink-muted);
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--rule-strong);
}
:root[data-mz-console="atelier"] .public-table td {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-primary);
  padding: 14px 16px;
  border-bottom: 1px solid var(--rule-soft);
  vertical-align: top;
}
:root[data-mz-console="atelier"] .public-table tbody tr:nth-child(even) td { background: var(--paper-nested); }

/* ---------------------------------------------------------------------
   8. THE OTHER SHARED BUTTON HOOKS. css/styles.css sets these in uppercase
   tracked type with square corners; on the Atelier every action is a pill in
   sentence case. The filled ones are bone black, the rest ghosts.
   --------------------------------------------------------------------- */
:root[data-mz-console="atelier"] :is(.btn-primary, .btn-secondary, .btn-primary-light, .submit-btn, .cta-strip-btn, .nav-cta) {
  text-transform: none;
  letter-spacing: 0;
  border-radius: 999px;
}
:root[data-mz-console="atelier"] :is(.btn-primary-light, .submit-btn) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 14px 28px;
  background: var(--bone-black);
  background-image: none;
  color: var(--mzv-onfill);
  border: 1px solid var(--bone-black);
  font-family: var(--sans);
  font-weight: 500;
  font-size: 16px;
  box-shadow: none;
  transform: none;
  transition: background-color var(--mz-dur-fast) ease;
}
:root[data-mz-console="atelier"] :is(.btn-primary-light, .submit-btn):hover { background: var(--atelier-onyx); border-color: var(--atelier-onyx); color: var(--mzv-onfill); transform: none; }
:root[data-mz-console="atelier"] :is(.btn-primary-light, .submit-btn):disabled { background: var(--rule-soft); border-color: var(--rule-soft); color: var(--ink-tertiary); cursor: not-allowed; }

/* ---------------------------------------------------------------------
   9. THE DASHBOARD PREVIEW on /coach/ and /gyms/ (css/styles.css .dash-*).
   The console it pictures is light canvas now, so the mock is a hairline
   card carrying the coach console's inks, not a black slab.
   --------------------------------------------------------------------- */
:root[data-mz-console="atelier"] .dash-preview {
  background: var(--paper-card);
  background-image: none;
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-elevated);
  box-shadow: none;
  color: var(--ink-primary);
}
:root[data-mz-console="atelier"] .dash-preview-bar { border-bottom-color: var(--rule-soft); }
:root[data-mz-console="atelier"] .dash-dot { background: var(--rule-strong); }
:root[data-mz-console="atelier"] .dash-preview-url { color: var(--ink-muted); }
:root[data-mz-console="atelier"] .dash-sidebar { background: var(--paper-nested); border-radius: var(--radius-card); }
:root[data-mz-console="atelier"] .dash-sidebar-section { font-family: var(--mono); font-weight: 700; font-size: 12px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--ink-muted); }
:root[data-mz-console="atelier"] .dash-sidebar-item { color: var(--ink-secondary); }
:root[data-mz-console="atelier"] .dash-sidebar-item:hover { background: transparent; color: var(--ink-primary); }
:root[data-mz-console="atelier"] .dash-sidebar-item.active { background: transparent; color: var(--ink-primary); border-left: 3px solid var(--marrow-accent); }
:root[data-mz-console="atelier"] .dash-greeting { font-family: var(--serif); font-weight: 300; font-size: 32px; letter-spacing: -1px; text-transform: none; color: var(--ink-primary); }
:root[data-mz-console="atelier"] :is(.dash-subtitle, .dash-alert-detail, .dash-table-row) { color: var(--ink-secondary); }
:root[data-mz-console="atelier"] .dash-alert { background: var(--paper-nested); border: 0; border-left: 3px solid var(--marrow-accent); border-radius: var(--radius-card); }
:root[data-mz-console="atelier"] :is(.dash-alert-eyebrow, .dash-metric-label, .dash-table-row.header) { font-family: var(--mono); font-weight: 700; font-size: 12px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--ink-muted); }
:root[data-mz-console="atelier"] .dash-alert-title { color: var(--ink-primary); }
:root[data-mz-console="atelier"] :is(.dash-metric, .dash-table) { background: var(--paper-nested); border: 0; border-radius: var(--radius-card); }
:root[data-mz-console="atelier"] .dash-metric.featured { background: var(--paper-nested); border: 1px solid var(--marrow-accent); }
:root[data-mz-console="atelier"] .dash-metric-value,
:root[data-mz-console="atelier"] .dash-metric.featured .dash-metric-value { font-family: var(--serif); font-weight: 300; color: var(--ink-primary); font-variant-numeric: tabular-nums; }
:root[data-mz-console="atelier"] .dash-table-row { border-bottom: 1px solid var(--rule-soft); }
:root[data-mz-console="atelier"] .dash-table-row.header { background: transparent; }

/* ---------------------------------------------------------------------
   10. CARD HEADS THE SHARED SHEET SETS IN UPPERCASE SERIF. Heading sm is
   the serif at 400, 24, in sentence case.
   --------------------------------------------------------------------- */
:root[data-mz-console="atelier"] :is(.apply-form-title, .card-title-serif, .form-title) {
  font-family: var(--serif);
  font-weight: var(--weight-serif);
  font-size: 24px;
  line-height: 1.38;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-primary);
}

/* ---------------------------------------------------------------------
   11. HEADINGS IN SENTENCE CASE, CARD TITLES AT INTER 500 18. The parchment
   idiom set every serif heading in uppercase; the Oura scale never does. A
   heading inside any card hook is a card title (DESIGN-SYSTEM 5).
   --------------------------------------------------------------------- */
:root[data-mz-console="atelier"] :is(h1, h2, h3, h4, h5) { text-transform: none; }
:root[data-mz-console="atelier"] :is(.card, .mz-card, [class*="-card"]) :is(h3, h4) {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--ink-primary);
}

/* ---------------------------------------------------------------------
   12. THE LEGAL READING TEMPLATE (BLUEPRINT E2): h2 serif 400 at 24 over a
   hairline, h3 Inter 500 at 18, body 16 at 1.6 leading in the secondary ink,
   lists indented once. privacy/ and terms/ carry these classes in place of
   the inline styles they shipped with.
   --------------------------------------------------------------------- */
:root[data-mz-console="atelier"] .legal-h2 {
  font-family: var(--serif);
  font-weight: var(--weight-serif);
  font-size: 24px;
  line-height: 1.38;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-primary);
  padding-top: var(--space-3);
  border-top: 1px solid var(--rule-soft);
  margin: var(--space-4) 0 var(--space-2);
}
:root[data-mz-console="atelier"] .legal-h3 { font-family: var(--sans); font-weight: 500; font-size: 18px; line-height: 1.5; text-transform: none; letter-spacing: 0; color: var(--ink-primary); margin: var(--space-3) 0 var(--space-1); }
:root[data-mz-console="atelier"] .legal-p, :root[data-mz-console="atelier"] .legal-ul { font-family: var(--sans); font-size: 16px; line-height: 1.6; color: var(--ink-secondary); margin-bottom: var(--space-2); max-width: 720px; }
:root[data-mz-console="atelier"] .legal-p-end { margin-bottom: var(--space-3); }
:root[data-mz-console="atelier"] .legal-ul { padding-left: var(--space-3); }
:root[data-mz-console="atelier"] .legal-ul li { margin-bottom: 6px; }
:root[data-mz-console="atelier"] :is(.legal-p, .legal-ul) a { color: var(--marrow-accent); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
:root[data-mz-console="atelier"] :is(.legal-p, .legal-ul) strong { color: var(--ink-primary); font-weight: 500; }

/* ---------------------------------------------------------------------
   13. SECTION RHYTHM. css/styles.css pads every bare section by 128; on the
   Oura scale sections sit 80 apart, so every section carries half the gap
   on each side (a page's own prefixed rule, later in order, may set its own).
   --------------------------------------------------------------------- */
:root[data-mz-console="atelier"] section { padding-block: calc(var(--atelier-section-gap) / 2); }

/* =====================================================================
   14 and on. LANE L6b: THE E3 AND E4 PAGE FAMILIES (help, articles, learn,
   community, method, mission, roadmap, press, and everything else), appended
   to L6a's template on 2026-09-16. Same conventions. Where L6a binds a hook
   above, that rule stands; these bind the reading template's generic
   elements, the card grid index by the -card suffix the page families share,
   the page family pills by name, the closing bands as hairline cards, the
   footer's legacy six cell mark, and the phone wraps. No em or en dashes.
   ===================================================================== */
/* Under 480 a long localized nav label beside the injected language switch overflowed the row at 360 (pt 378px); the pill and every panel pill may wrap. */
@media (max-width: 480px) {
  :root[data-mz-console="atelier"] .nav-inner { gap: 8px; }
  :root[data-mz-console="atelier"] .nav .nav-cta { white-space: normal; text-align: center; line-height: 1.15; font-size: 13px; padding: 6px 12px; max-width: 34vw; }
  :root[data-mz-console="atelier"] main .pill { white-space: normal; text-align: center; line-height: 1.15; height: auto; min-height: 44px; padding-top: 8px; padding-bottom: 8px; }
}
/* ---------------------------------------------------------------------
   2. THE PAGE HEAD ON THE CANVAS. The reading template: eyebrow mono 12 700
   in the accent, h1 serif 300 at 40 with one italic word, lede 16 in the
   secondary ink, the column at 720, left aligned. Chrome that sits on the
   canvas reads --ink-primary, --ink-secondary, --ink-muted or the accent
   only (BACKGROUND.md 4).
   --------------------------------------------------------------------- */
:root[data-mz-console="atelier"] .page-hero { text-align: left; padding: 64px 0 40px; background: transparent; background-image: none; }
:root[data-mz-console="atelier"] main h1 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(40px, 3vw + 20px, 48px);
  line-height: 1.25;
  letter-spacing: -1px;
  text-transform: none;
  color: var(--ink-primary);
  margin-left: 0;
  margin-right: 0;
  max-width: 720px;
  background: none;
  -webkit-text-fill-color: currentColor;
}
:root[data-mz-console="atelier"] main h1 em,
:root[data-mz-console="atelier"] main h1 i { font-style: italic; font-weight: var(--weight-serif); color: var(--marrow-accent); }
:root[data-mz-console="atelier"] .atmo h1 em,
:root[data-mz-console="atelier"] .atmo h1 i,
:root[data-mz-console="atelier"] .atmo h2 em { color: var(--color-pure-white); }
:root[data-mz-console="atelier"] main h2,
:root[data-mz-console="atelier"] .article-body h2 {
  font-family: var(--serif);
  font-weight: var(--weight-serif);
  font-size: clamp(22px, 1vw + 17px, 24px);
  line-height: 1.38;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-primary);
}
:root[data-mz-console="atelier"] main h3,
:root[data-mz-console="atelier"] main h4,
:root[data-mz-console="atelier"] .article-body h3,
:root[data-mz-console="atelier"] .article-body h4 {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-primary);
}
:root[data-mz-console="atelier"] main [class*="eyebrow"],
:root[data-mz-console="atelier"] main [class*="kicker"],
:root[data-mz-console="atelier"] main [class$="-tag"],
:root[data-mz-console="atelier"] main [class*="breadcrumb"],
:root[data-mz-console="atelier"] .article-back,
:root[data-mz-console="atelier"] .article-meta {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--marrow-accent);
  background: transparent;
  border: 0;
}
/* On an atmosphere panel a label is white at 0.85 (DESIGN-SYSTEM 11.7; mint as type measures 1.75 on the sky mood's worst pixel); the shade and the frost carry the panel padding the boards drew inline. */
:root[data-mz-console="atelier"] .atmo [class*="eyebrow"],
:root[data-mz-console="atelier"] .atmo [class*="kicker"] { color: rgba(255, 255, 255, 0.85); }
:root[data-mz-console="atelier"] .atl-shade { padding: 24px 28px; }
:root[data-mz-console="atelier"] .frost:not(.disc) { padding: 28px; }
:root[data-mz-console="atelier"] main .card [class*="eyebrow"],
:root[data-mz-console="atelier"] main [class$="-card"] [class*="eyebrow"],
:root[data-mz-console="atelier"] main [class$="-card-eyebrow"],
:root[data-mz-console="atelier"] main [class$="-card-tag"],
:root[data-mz-console="atelier"] .article-meta,
:root[data-mz-console="atelier"] .article-back { color: var(--ink-muted); }
:root[data-mz-console="atelier"] .article-back:hover { color: var(--ink-primary); }
:root[data-mz-console="atelier"] .page-hero-lede,
:root[data-mz-console="atelier"] .section-lede,
:root[data-mz-console="atelier"] main [class$="-lede"],
:root[data-mz-console="atelier"] main [class*="-lede "],
:root[data-mz-console="atelier"] main [class$="-sub"],
:root[data-mz-console="atelier"] main [class*="-sub "],
:root[data-mz-console="atelier"] main [class$="-subtitle"] {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0;
  color: var(--ink-secondary);
  max-width: 720px;
  margin-left: 0;
  margin-right: 0;
}
:root[data-mz-console="atelier"] main p { font-family: var(--sans); font-size: 16px; line-height: 1.6; }
:root[data-mz-console="atelier"] main p strong,
:root[data-mz-console="atelier"] main li strong { font-weight: 550; color: var(--ink-primary); }
:root[data-mz-console="atelier"] .page-section { padding: var(--atelier-section-gap) 0; }

/* ---------------------------------------------------------------------
   3. THE READING COLUMN. Articles, help articles, learn lessons, the method,
   the mission, the roadmap and press: 720 wide, Inter 400 16 at 1.6 in soft
   charcoal (DESIGN-SYSTEM 11.1), h2 serif 400 at 24, hairline rules between
   sections, underline links in the accent, screenshots at radius 8 with a
   1px hairline.
   --------------------------------------------------------------------- */
:root[data-mz-console="atelier"] :is(.article, .article-body, .article-header, .help-summary, .help-note, .help-related, .pk-prose, .mission-block, .prose, .legal-body, .reading) { max-width: 720px; margin-left: 0; margin-right: 0; }
:root[data-mz-console="atelier"] .article-body { font-family: var(--sans); font-size: 16px; line-height: 1.6; color: var(--color-soft-charcoal); padding-top: 40px; }
:root[data-mz-console="atelier"] .article-body p:first-of-type { font-size: 18px; line-height: 1.5; color: var(--ink-primary); }
:root[data-mz-console="atelier"] .article-body h2 { margin: 48px 0 16px; padding-top: 32px; border-top: 1px solid var(--rule-soft); }
:root[data-mz-console="atelier"] .article-body h3 { margin: 32px 0 12px; }
:root[data-mz-console="atelier"] .article-body h4 { font-size: 16px; }
:root[data-mz-console="atelier"] .article-body a,
:root[data-mz-console="atelier"] main .container p a,
:root[data-mz-console="atelier"] main li a { color: var(--marrow-accent); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
:root[data-mz-console="atelier"] .article-body a:hover,
:root[data-mz-console="atelier"] main .container p a:hover,
:root[data-mz-console="atelier"] main li a:hover { color: var(--marrow-accent); text-decoration-thickness: 2px; }
:root[data-mz-console="atelier"] .article-body .article-list li::before { background: var(--rule-strong); }
:root[data-mz-console="atelier"] .article-body hr.article-rule { background: var(--rule-soft); width: 100%; margin: 40px 0; }
:root[data-mz-console="atelier"] .article-body code { background: var(--paper-nested); border-radius: 4px; color: var(--ink-primary); }
:root[data-mz-console="atelier"] :is(.article-header, .journal-hero, .help-hero, .learn-hero, .com-hero, .mission-hero, .pk-hero) { background: transparent; background-image: none; border-bottom: 0; padding: 64px 0 40px; text-align: left; }
:root[data-mz-console="atelier"] .help-screenshot-img,
:root[data-mz-console="atelier"] main figure,
:root[data-mz-console="atelier"] main img[class*="shot"] { border: 1px solid var(--rule-soft); border-radius: 8px; overflow: hidden; background: var(--paper-card); box-shadow: none; }
:root[data-mz-console="atelier"] .help-screenshot-img figcaption {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.5px;
  color: var(--ink-muted);
  background: var(--paper-card);
  border-top: 1px solid var(--rule-soft);
}
:root[data-mz-console="atelier"] :is(.help-step, .mission-block, .stage-block, .pk-section, .help-related) { border-color: var(--rule-soft); }

/* ---------------------------------------------------------------------
   4. THE CARD GRID INDEX. Hairline cards on the card ground, radius 8,
   padding 24, no shadow, no lift; kicker mono 12, title Inter 500 18, meta
   14 in the muted ink. Bound to the site's card hooks by name and by the
   -card suffix the page families share.

   THE CARVE OUT, 2026-09-16 (website integration). This block is the CREAM
   card. An atmosphere surface is not one: .frost, .ink and .atmo carry their
   own ground from atelier-atmo.css (DESIGN-SYSTEM 11.2 to 11.4), and every
   word inside them is white. Without the carve out the -card suffix caught
   .frost.hero-card on the seven pages that ship the hero panel and repainted
   it bone white, which put white text on cream at 1.04 and made the whole
   card unreadable. Measured on this tree: every card hook inside an .atmo
   also carries .frost, so the three names below cover the class completely,
   and tests/atelier-contrast-floor.test.mjs holds them to it.
   --------------------------------------------------------------------- */
:root[data-mz-console="atelier"] main [class$="-card"]:not(.frost):not(.ink):not(.atmo),
:root[data-mz-console="atelier"] main [class*="-card "]:not(.frost):not(.ink):not(.atmo),
:root[data-mz-console="atelier"] main .card:not(.frost):not(.ink):not(.atmo),
:root[data-mz-console="atelier"] main .pillar:not(.frost):not(.ink):not(.atmo),
:root[data-mz-console="atelier"] main .fc-pillar:not(.frost):not(.ink):not(.atmo),
:root[data-mz-console="atelier"] main .obj:not(.frost):not(.ink):not(.atmo),
:root[data-mz-console="atelier"] main .door:not(.frost):not(.ink):not(.atmo) {
  background: var(--paper-card);
  background-image: none;
  border: 1px solid var(--rule-soft);
  border-radius: 8px;
  padding: 24px;
  box-shadow: none;
  color: var(--ink-primary);
  transform: none;
  transition: border-color var(--mz-dur-fast) ease;
}
:root[data-mz-console="atelier"] main :is([class$="-card"], .card, .pillar, .fc-pillar, .door):not(.frost):not(.ink):not(.atmo):is(:hover, :focus-within) { background: var(--paper-card); border-color: var(--rule-strong); box-shadow: none; transform: none; }
:root[data-mz-console="atelier"] main :is([class$="-card"], .card, .pillar, .fc-pillar, .door):not(.frost):not(.ink):not(.atmo)::before,
:root[data-mz-console="atelier"] main :is([class$="-card"], .card, .pillar, .fc-pillar, .door):not(.frost):not(.ink):not(.atmo)::after { background: none; background-image: none; box-shadow: none; }
:root[data-mz-console="atelier"] main .article-grid { gap: 16px; background: transparent; border: 0; }
:root[data-mz-console="atelier"] main :is(.article-grid, .help-article-grid, .learn-courses-grid, .values-grid, .feature-list, .never-grid, .trust-grid, .pk-trust-grid, .pk-quote-grid, .com-inst-grid, .com-events-grid, .com-comm-grid) { display: grid; gap: 16px; }
@media (min-width: 720px) {
  :root[data-mz-console="atelier"] main :is(.article-grid, .help-article-grid, .learn-courses-grid, .values-grid, .never-grid, .trust-grid, .pk-trust-grid, .pk-quote-grid, .com-inst-grid, .com-events-grid, .com-comm-grid) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  :root[data-mz-console="atelier"] main :is(.help-article-grid, .learn-courses-grid, .values-grid, .never-grid, .trust-grid, .pk-trust-grid, .com-inst-grid, .com-events-grid, .com-comm-grid) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
:root[data-mz-console="atelier"] main [class$="-card-title"],
:root[data-mz-console="atelier"] main [class$="-card-h"],
:root[data-mz-console="atelier"] main .card h3,
:root[data-mz-console="atelier"] main [class$="-card"] h3,
:root[data-mz-console="atelier"] main .pillar-name,
:root[data-mz-console="atelier"] main .fc-pillar-h {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-primary);
  margin-bottom: 8px;
}
:root[data-mz-console="atelier"] main :is([class$="-card-desc"], [class$="-card-body"], [class$="-card-summary"], [class$="-card-meta"], [class$="-card-why"], .pillar-desc, .pillar-detail, .fc-pillar-body) { font-family: var(--sans); font-size: 14px; line-height: 1.5; letter-spacing: 0.35px; color: var(--ink-secondary); }
:root[data-mz-console="atelier"] main :is([class$="-card-cta"], [class$="-card-link"]) {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--marrow-accent);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}
:root[data-mz-console="atelier"] main :is([class$="-card-num"], .pillar-num, .fc-pillar-num) {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 40px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink-primary);
  background: none;
  -webkit-text-fill-color: currentColor;
}

/* ---------------------------------------------------------------------
   5. PILLS ON THE WEBSITE HOOKS. The page family primaries are the filled
   pill (bone black, onfill ink) and every second action is the ghost; caps
   and tracking from css/styles.css come off. The nav's Join now is the one
   filled pill of the chrome; a page body carries at most one more, its own
   next action, and never above the fold on the reading template.
   --------------------------------------------------------------------- */
:root[data-mz-console="atelier"] :is(.btn-primary, .btn-solid, .btn-secondary, .btn-ghost, .btn-quiet, .btn, .help-footer-help-btn, .help-footer-cta-btn, .article-cta-btn, .com-btn, .fc-btn, .fc-btn-primary, .fc-btn-ghost, .fc-cta-primary, .fc-cta-secondary, .ent-btn-primary, .ent-btn-ghost, .mia-cta-primary, .mia-cta-secondary, .mig-cta-primary, .mig-cta-secondary, .mig-cta-button, .mig-cta-bottom-btn, .mig-hero-cta, .vs-cta-primary, .vs-cta-secondary, .v-cta-primary, .v-cta-secondary, .cv-cta-primary, .cv-cta-secondary, .wn-cta-primary, .wn-cta-secondary, .pk-cta-primary, .pk-cta-secondary, .pk-pdf-cta, .tier-stack-cta, .tier-stack-cta-light, .g-cta-primary, .g-cta-secondary, .submit-btn, .signup-cta, .lm-cta, .course-landing-cta, .course-landing-cta-secondary, .mkt-cta-coach-btn, .prop-btn-dark, .gt-btn, .gt-btn-quiet, .a-cta, .learn-journal-pointer-cta, .learn-courses-empty-cta, .learn-login-wall-cta, .mkt-empty-cta, .refer-copy-btn, .offer-cta, .founder-signature-cta, .look-tile-cta, .d-trust-cta, .cd-trust-cta, .cd-offer-cta, .d-empty-cta, .cd-empty-cta, .mr-card-cta, .mr-card-cta-secondary, .mr-ath-btn, .gen-btn, .gate-btn, .close-btn, .lesson-player-complete-btn) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 14px 28px;
  border-radius: 999px;
  background: transparent;
  background-image: none;
  color: var(--ink-secondary);
  border: 1px solid var(--ink-secondary);
  font-family: var(--sans);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.25;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  box-shadow: none;
  transform: none;
  transition: background-color var(--mz-dur-fast) ease, border-color var(--mz-dur-fast) ease, color var(--mz-dur-fast) ease;
}
:root[data-mz-console="atelier"] :is(.btn-secondary, .btn-ghost, .btn-quiet, .btn, .help-footer-help-btn, .help-footer-cta-btn, .article-cta-btn, .com-btn, .fc-btn, .fc-btn-ghost, .fc-cta-secondary, .ent-btn-ghost, .mia-cta-secondary, .mig-cta-secondary, .mig-cta-bottom-btn, .vs-cta-secondary, .v-cta-secondary, .cv-cta-secondary, .wn-cta-secondary, .pk-cta-secondary, .tier-stack-cta-light, .g-cta-secondary, .course-landing-cta-secondary, .gt-btn-quiet, .learn-journal-pointer-cta, .learn-courses-empty-cta, .mkt-empty-cta, .mr-card-cta-secondary, .d-empty-cta, .cd-empty-cta, .close-btn):is(:hover, :active) {
  color: var(--ink-primary);
  border-color: var(--ink-primary);
  background: transparent;
  background-image: none;
  box-shadow: none;
  transform: none;
}
/* The page family primaries: the filled pill, written AFTER the ghost base at equal weight so it wins on order. */
:root[data-mz-console="atelier"] :is(.btn-primary, .btn-solid, .fc-btn-primary, .fc-cta-primary, .ent-btn-primary, .mia-cta-primary, .mig-cta-primary, .mig-cta-button, .mig-hero-cta, .vs-cta-primary, .v-cta-primary, .cv-cta-primary, .wn-cta-primary, .pk-cta-primary, .pk-pdf-cta, .tier-stack-cta, .g-cta-primary, .submit-btn, .signup-cta, .lm-cta, .course-landing-cta, .mkt-cta-coach-btn, .prop-btn-dark, .gt-btn, .a-cta, .offer-cta, .founder-signature-cta, .d-trust-cta, .cd-trust-cta, .cd-offer-cta, .mr-card-cta, .mr-ath-btn, .gen-btn, .gate-btn, .lesson-player-complete-btn, .learn-login-wall-cta, .refer-copy-btn),
:root[data-mz-console="atelier"] .com-btn.primary { background: var(--bone-black); background-image: none; color: var(--mzv-onfill); border: 1px solid var(--bone-black); }
:root[data-mz-console="atelier"] :is(.btn-primary, .btn-solid, .fc-btn-primary, .fc-cta-primary, .ent-btn-primary, .mia-cta-primary, .mig-cta-primary, .mig-cta-button, .mig-hero-cta, .vs-cta-primary, .v-cta-primary, .cv-cta-primary, .wn-cta-primary, .pk-cta-primary, .pk-pdf-cta, .tier-stack-cta, .g-cta-primary, .submit-btn, .signup-cta, .lm-cta, .course-landing-cta, .mkt-cta-coach-btn, .prop-btn-dark, .gt-btn, .a-cta, .offer-cta, .founder-signature-cta, .d-trust-cta, .cd-trust-cta, .cd-offer-cta, .mr-card-cta, .mr-ath-btn, .gen-btn, .gate-btn, .lesson-player-complete-btn, .learn-login-wall-cta, .refer-copy-btn):is(:hover, :active),
:root[data-mz-console="atelier"] .com-btn.primary:is(:hover, :active) {
  background: var(--atelier-onyx);
  background-image: none;
  border-color: var(--atelier-onyx);
  color: var(--mzv-onfill);
  box-shadow: none;
  transform: none;
}
/* Segmented pills on the website: the help role filter and the fit check chips. */
:root[data-mz-console="atelier"] :is(.help-role-btn, .fc-chip, .surface-pill, .ul-pill) {
  min-height: 40px;
  padding: 8px 20px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--ink-secondary);
  color: var(--ink-secondary);
  font-family: var(--sans);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  box-shadow: none;
}
:root[data-mz-console="atelier"] :is(.help-role-btn, .fc-chip, .surface-pill, .ul-pill):is([aria-pressed="true"], [aria-selected="true"], .is-active, .active) { background: var(--bone-black); border-color: var(--bone-black); color: var(--mzv-onfill); }
:root[data-mz-console="atelier"] .pill { border-radius: 999px; box-shadow: none; background-image: none; }

/* ---------------------------------------------------------------------
   6. THE CTA STRIP AND THE DARK BANDS. The accent never fills a surface and
   the footer is the one dark surface on a page, so the shared .cta-strip and
   the article's dark closing band become a hairline card at radius 24 on the
   canvas with a ghost pill.
   --------------------------------------------------------------------- */
:root[data-mz-console="atelier"] :is(.article-cta, .help-footer-cta, .help-footer-help, .audience-cta, .com-retention-strip, .learn-journal-pointer, .mig-cta-bottom, .look-footer-cta, .gt-cta-strip, .pk-pdf-band) {
  background: var(--paper-card);
  background-image: none;
  color: var(--ink-primary);
  border: 1px solid var(--rule-soft);
  border-radius: 24px;
  width: calc(100% - 64px);
  max-width: calc(var(--atelier-max-width) - 64px);
  margin: 0 auto var(--atelier-section-gap);
  padding: 64px 32px;
  text-align: left;
  box-shadow: none;
}
:root[data-mz-console="atelier"] :is(.article-cta, .help-footer-cta, .help-footer-help, .audience-cta, .com-retention-strip, .learn-journal-pointer, .mig-cta-bottom, .look-footer-cta, .gt-cta-strip, .pk-pdf-band) :is(h2, h3, .article-cta-title, .audience-cta-title, .mig-cta-h, .look-footer-cta-line, .learn-journal-pointer-h, .pk-pdf-line) {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(36px, 2.25vw + 24px, 40px);
  line-height: 1.25;
  letter-spacing: -1px;
  text-transform: none;
  color: var(--ink-primary);
  max-width: 720px;
  margin-left: 0;
  margin-right: 0;
}
:root[data-mz-console="atelier"] :is(.article-cta, .help-footer-cta, .help-footer-help, .audience-cta, .learn-journal-pointer, .mig-cta-bottom, .pk-pdf-band) :is(p, .article-cta-body, .mig-cta-lede, .learn-journal-pointer-sub, .pk-pdf-copy) { color: var(--ink-secondary); max-width: 720px; margin-left: 0; margin-right: 0; }
:root[data-mz-console="atelier"] :is(.article-cta, .help-footer-cta, .help-footer-help, .audience-cta, .learn-journal-pointer, .mig-cta-bottom, .pk-pdf-band) [class*="eyebrow"] { color: var(--ink-muted); }
@media (max-width: 720px) {
  :root[data-mz-console="atelier"] :is(.article-cta, .help-footer-cta, .help-footer-help, .audience-cta, .com-retention-strip, .learn-journal-pointer, .mig-cta-bottom, .look-footer-cta, .gt-cta-strip, .pk-pdf-band) { border-radius: 16px; padding: 40px 20px; width: calc(100% - 40px); }
  /* On a phone a long localized word must be able to shrink the line: the floor here is under the base floor above (tests/public-overflow-floor). */
  :root[data-mz-console="atelier"] main h1 { font-size: clamp(28px, 8vw, 40px); letter-spacing: -0.6px; }
  :root[data-mz-console="atelier"] main h2,
  :root[data-mz-console="atelier"] .article-body h2 { font-size: clamp(19px, 5.5vw, 24px); }
}

/* ---------------------------------------------------------------------
   7. THE FOOTER ON THE WEBSITE HOOKS. atelier.css paints the ground and the
   link ink; this binds the wordmark, the column titles, the bio and the
   legal line, and inks the footer's legacy six cell mark in onfill.
   --------------------------------------------------------------------- */
:root[data-mz-console="atelier"] footer { padding: var(--atelier-section-gap) 0 40px; }
:root[data-mz-console="atelier"] .footer-wordmark {
  font-family: var(--serif);
  font-weight: var(--weight-serif);
  font-size: 24px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--paper-canvas);
}
:root[data-mz-console="atelier"] .footer-col li { font-size: 14px; letter-spacing: 0.35px; }
:root[data-mz-console="atelier"] .footer-bottom {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.5px;
  text-transform: none;
  color: var(--paper-canvas);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
/* The footer mark is the final partial (white on its own token, bare on the
   dark footer, data-tile none), wrapped in span.logo-svg and sized here; it is
   never re inked, so the legacy stroke and use[fill] rules are gone. */
:root[data-mz-console="atelier"] footer .logo-svg { width: 28px; height: 28px; }
/* Footer links never fade (a page opacity of 0.7 drops the accent on dark under 4.5); underline links hover in the accent itself (the strong accent measures 4.42 on the densest lattice line). */
:root[data-mz-console="atelier"] footer a { opacity: 1; }
:root[data-mz-console="atelier"] :is(.cat-door, .tier-more, .dash-act-more, .com-section-link):hover { color: var(--marrow-accent); text-decoration-thickness: 2px; }

/* ---------------------------------------------------------------------
   8. WHAT THE SHARED SHEETS CANNOT REACH IN css/styles.css FOR THESE PAGES:
   the selection colour (the accent as a fill behind text), the smooth
   scroll, the reveal transforms, and the dark context arms that go dead.
   --------------------------------------------------------------------- */
:root[data-mz-console="atelier"] :is(.reveal-up, .rv, .mz-reveal) { opacity: 1; transform: none; transition: none; }
:root[data-mz-console="atelier"] :is(.trust-strip, .roadmap-meta, .stage-status, .stage-when, .article-meta-dot, .help-breadcrumb-sep) { color: var(--ink-muted); }
/* The look inside mock stays a bone black media well and its labels take the on dark inks (L6a paints the .dash-preview mock as a light card). The preview badge on the canvas is a hairline chip in the ink. */
:root[data-mz-console="atelier"] main .look-coach-dash [class*="eyebrow"] { color: var(--marrow-accent-on-dark); }
:root[data-mz-console="atelier"] main .look-coach-dash :is([class$="-subtitle"], [class$="-sub"], p) { color: var(--steel-light); }
:root[data-mz-console="atelier"] main .preview-badge { background: var(--paper-card); color: var(--ink-primary); border-color: var(--rule-strong); }
:root[data-mz-console="atelier"] main .look-coach-dash [class$="-card"],
:root[data-mz-console="atelier"] main .look-coach-dash [class$="-card"]:is(:hover, :focus-within) { background: var(--atelier-ink-card); border-color: rgba(255, 255, 255, 0.08); color: var(--paper-canvas); }
:root[data-mz-console="atelier"] main table { font-variant-numeric: tabular-nums; }
:root[data-mz-console="atelier"] main th { font-family: var(--mono); font-weight: 700; font-size: 12px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--ink-muted); border-bottom: 1px solid var(--rule-strong); background: transparent; }
:root[data-mz-console="atelier"] main td { font-size: 14px; letter-spacing: 0.35px; color: var(--ink-primary); border-bottom: 1px solid var(--rule-soft); }
:root[data-mz-console="atelier"] main :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
  background: var(--paper-card);
  border: 1px solid var(--rule-strong);
  border-radius: 12px;
  padding: 12px 16px;
  font-family: var(--sans);
  font-size: 16px;
  color: var(--ink-primary);
  box-shadow: none;
}
:root[data-mz-console="atelier"] main label { font-family: var(--mono); font-weight: 700; font-size: 12px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--ink-muted); }