/* =========================================================================
   ATELIER SKIN — Growth Architecture palette (ivory · oxblood · champagne)
   × Microsoft modular discipline × quiet-authority restraint × editorial type.

   Additive overlay: loaded after style.css when solae_skin() === 'atelier'.
   Homepage components are at-* (see inc/front-atelier.php); site chrome
   (utility bar, nav, overlay menu, footer) is tuned under body.skin-atelier.
   The overlay menu and footer stay INK-dark by design — no light-surface
   re-inking, so the contrast bugs that hit other skins cannot occur here.

   Typography reuses the theme's self-hosted variable faces (Inter +
   Source Serif 4) — comparable to the brief's Instrument pairing, already
   subsetted and preloaded, so there is no extra request and no layout shift.
   ========================================================================= */

body.skin-atelier{
  /* ---- colour tokens ---- */
  --at-ivory:#F7F1E8;
  --at-paper:#FFFBF5;
  --at-ink:#171614;
  --at-ink-soft:#46413A;          /* body copy — 8.3:1 on ivory (AA) */
  --at-grey:#817B72;              /* meta only, never body copy */
  --at-oxblood:#811F3C;           /* emphasis — 8.8:1 on ivory (AA) */
  --at-oxblood-deep:#65152B;
  --at-champagne:#C7AC78;         /* lines + details, never body copy */
  --at-champagne-pale:#E2D3B5;
  --at-hair:rgba(23,22,20,.14);
  --at-hair-light:rgba(247,241,232,.18);

  /* ---- type + layout tokens ---- */
  --at-sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --at-edit:'Source Serif 4',Georgia,'Times New Roman',serif;
  --at-max:1320px;
  --at-gut:clamp(20px,4vw,72px);
  --at-rhythm:clamp(56px,8vw,124px);

  background:var(--at-ivory);
  color:var(--at-ink);
  font-family:var(--at-sans);
  font-size:16.5px;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
}

/* ---- shared primitives ------------------------------------------------- */
.at-in{max-width:var(--at-max);margin:0 auto;padding-left:var(--at-gut);padding-right:var(--at-gut)}
.at-band{padding:var(--at-rhythm) 0;background:var(--at-ivory);border-top:1px solid var(--at-hair)}
.at-band-alt{background:var(--at-paper)}

body.skin-atelier h1,body.skin-atelier h2,body.skin-atelier h3{
  font-family:var(--at-sans);font-weight:640;color:var(--at-ink);margin:0}
.at-h1{font-size:clamp(38px,5.4vw,76px);line-height:1.02;letter-spacing:-.035em;text-wrap:balance}
.at-h2{font-size:clamp(29px,3.5vw,50px);line-height:1.07;letter-spacing:-.028em;text-wrap:balance}
.at-h1 em,.at-h2 em{font-family:var(--at-edit);font-style:italic;font-weight:400;color:var(--at-oxblood);letter-spacing:-.01em}

.at-eyebrow{margin:0 0 14px;font-size:11px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--at-oxblood)}
.at-lede{margin:22px 0 0;font-size:clamp(16.5px,1.5vw,19px);line-height:1.6;color:var(--at-ink-soft);max-width:46ch}
.at-sub{margin:14px 0 0;font-size:16.5px;line-height:1.62;color:var(--at-ink-soft);max-width:56ch}
.at-head{max-width:62ch;margin:0 0 clamp(34px,4.5vw,58px)}

/* buttons + links */
.at-btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;
  padding:15px 30px;background:var(--at-oxblood);color:var(--at-paper);
  font-size:15px;font-weight:600;letter-spacing:.01em;text-decoration:none;border:1px solid var(--at-oxblood);
  transition:background .25s ease,border-color .25s ease,transform .25s ease}
.at-btn:hover{background:var(--at-oxblood-deep);border-color:var(--at-oxblood-deep);color:var(--at-paper)}
.at-btn:focus-visible{outline:2px solid var(--at-ink);outline-offset:3px}
.at-link{display:inline-flex;align-items:center;gap:.45em;min-height:44px;
  font-size:15px;font-weight:600;color:var(--at-oxblood);text-decoration:none;
  border-bottom:1px solid var(--at-champagne);transition:color .25s ease,border-color .25s ease}
.at-link::after{content:"\203A";font-weight:700;transition:transform .25s ease}
.at-link:hover{color:var(--at-ink);border-color:var(--at-ink)}
.at-link:hover::after{transform:translateX(3px)}
.at-link-light{color:var(--at-champagne-pale);border-color:var(--at-champagne)}
.at-link-light:hover{color:var(--at-paper);border-color:var(--at-paper)}

/* ---- 1 · HERO ---------------------------------------------------------- */
/* Hero copy paints at full opacity — motion is transform-only, so the
   headline is never blank while scripts load. */
.at-hero{background:var(--at-ivory);padding-top:clamp(132px,15vw,196px);padding-bottom:clamp(56px,7vw,104px);
  position:relative;overflow:hidden}
.at-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--at-hair)}
.at-hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(32px,5vw,80px);align-items:center}
.at-hero-copy{min-width:0}

.at-rise{animation:atRise .9s cubic-bezier(.22,.61,.36,1) both}
.at-d1{animation-delay:.05s}.at-d2{animation-delay:.1s}
.at-d3{animation-delay:.15s}.at-d4{animation-delay:.2s}
@keyframes atRise{from{transform:translateY(14px)}to{transform:none}}

.at-actions{display:flex;align-items:center;gap:clamp(18px,2.6vw,34px);flex-wrap:wrap;margin-top:36px}

.at-figs{display:flex;flex-wrap:wrap;gap:0;margin:clamp(34px,4.5vw,52px) 0 0;
  border-top:1px solid var(--at-hair)}
.at-fig{padding:20px clamp(20px,2.4vw,32px) 4px 0;margin-right:clamp(20px,2.4vw,32px);
  border-right:1px solid var(--at-hair)}
.at-fig:last-child{border-right:0;margin-right:0;padding-right:0}
.at-fig dt{font-size:clamp(21px,2.1vw,27px);font-weight:650;letter-spacing:-.02em;
  color:var(--at-ink);font-variant-numeric:tabular-nums}
.at-fig dd{margin:4px 0 0;font-size:12.5px;line-height:1.5;color:var(--at-grey);max-width:18ch}

/* hero figure — the globe, framed architecturally */
.at-hero-fig{margin:0;justify-self:center;text-align:center;max-width:460px;width:100%}
.at-frame{position:relative;aspect-ratio:1;display:grid;place-items:center}
.at-frame-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.at-ring{fill:none;stroke:var(--at-champagne);stroke-width:1;opacity:.55}
.at-ring-2{stroke-dasharray:2 7;opacity:.75}
.at-rule{stroke:var(--at-champagne);stroke-width:1;opacity:.7}
.at-node{fill:var(--at-oxblood)}
.at-frame #globe{width:84%;height:auto;aspect-ratio:1;display:block}
/* safety: never let the framed globe be clipped by the hero's overflow guard */
.at-hero-fig{position:relative;z-index:1}
.at-fig-cap{margin-top:16px;font-size:11px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--at-grey)}

/* ---- 2 · CAPABILITY STRIP --------------------------------------------- */
.at-strip{background:var(--at-paper);border-bottom:1px solid var(--at-hair)}
.at-strip-in{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--at-hair);
  padding-left:0;padding-right:0;max-width:var(--at-max);margin:0 auto}
.at-cap{display:flex;align-items:center;justify-content:center;gap:12px;min-height:74px;
  padding:16px 18px;background:var(--at-paper);color:var(--at-ink);text-decoration:none;
  font-size:14.5px;font-weight:600;letter-spacing:-.005em;transition:background .25s ease,color .25s ease}
.at-cap svg{width:21px;height:21px;flex:none;fill:none;stroke:var(--at-oxblood);stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round;transition:stroke .25s ease}
.at-cap:hover{background:var(--at-ivory);color:var(--at-oxblood)}
.at-cap:focus-visible{outline:2px solid var(--at-oxblood);outline-offset:-3px}

/* ---- 3 · GROWTH LEAKS (editorial bento, hairline-joined) --------------- */
.at-leaks{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:1px;
  background:var(--at-hair);border:1px solid var(--at-hair)}
.at-leak{grid-column:span 5;background:var(--at-ivory);padding:clamp(26px,3vw,40px);
  display:flex;flex-direction:column;gap:10px;min-width:0}
.at-leak-lead{grid-column:span 7}
.at-leak-wide{grid-column:span 7}
.at-num{font-size:12px;font-weight:650;letter-spacing:.14em;color:var(--at-champagne)}
.at-leak h3{font-size:clamp(18px,1.9vw,23px);line-height:1.24;letter-spacing:-.015em}
.at-leak-lead h3{font-size:clamp(22px,2.6vw,32px)}
.at-leak p{margin:0;font-size:15px;line-height:1.6;color:var(--at-ink-soft);max-width:46ch}
.at-cost{margin-top:auto;padding-top:14px;font-size:11px;font-weight:650;letter-spacing:.16em;
  text-transform:uppercase;color:var(--at-oxblood)}

/* ---- 4 · GROWTH ARCHITECTURE (connected modular grid) ------------------ */
.at-arch{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:1px;
  background:var(--at-hair);border:1px solid var(--at-hair)}
.at-mod{background:var(--at-paper);padding:clamp(26px,3vw,40px);text-decoration:none;color:var(--at-ink);
  display:flex;flex-direction:column;gap:9px;min-width:0;position:relative;
  transition:background .28s ease}
.at-mod:nth-child(1),.at-mod:nth-child(6){grid-column:span 5}
.at-mod:nth-child(2),.at-mod:nth-child(5){grid-column:span 4}
.at-mod:nth-child(3),.at-mod:nth-child(4){grid-column:span 3}
.at-mod-n{font-family:var(--at-sans);font-size:clamp(30px,3.4vw,46px);font-weight:600;
  line-height:1;letter-spacing:-.04em;color:var(--at-champagne-pale);
  font-variant-numeric:tabular-nums;transition:color .28s ease}
.at-mod h3{font-size:clamp(17px,1.75vw,21px);line-height:1.26;letter-spacing:-.015em;margin-top:6px}
.at-mod p{margin:0;font-size:14.5px;line-height:1.58;color:var(--at-ink-soft)}
.at-more{margin-top:auto;padding-top:16px;font-size:13.5px;font-weight:650;color:var(--at-oxblood)}
.at-more::after{content:" \203A";font-weight:700}
.at-mod:hover{background:var(--at-ivory)}
.at-mod:hover .at-mod-n{color:var(--at-champagne)}
.at-mod:focus-visible{outline:2px solid var(--at-oxblood);outline-offset:-3px}

.at-mod-wide{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;
  gap:clamp(18px,3vw,40px);margin-top:1px;border:1px solid var(--at-hair);border-top:0;
  padding:clamp(22px,2.6vw,32px) clamp(26px,3vw,40px)}
.at-mod-wide .at-mod-n{color:var(--at-oxblood)}
.at-mod-wide-copy h3{margin:0}
.at-mod-wide .at-more{margin-top:0;padding-top:0;white-space:nowrap}

/* ---- 5 · OUTCOMES (dark ink band) ------------------------------------- */
.at-dark{background:var(--at-ink);color:var(--at-ivory);border-top:0}
.at-dark .at-eyebrow{color:var(--at-champagne)}
.at-dark .at-h2{color:var(--at-ivory)}
.at-dark .at-h2 em{color:var(--at-champagne)}
.at-dark .at-sub{color:rgba(247,241,232,.72)}
.at-outcomes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:0;
  border-top:1px solid var(--at-hair-light)}
.at-outcome{padding:clamp(28px,3.4vw,44px) clamp(22px,2.6vw,36px) clamp(22px,2.6vw,32px) 0;
  border-right:1px solid var(--at-hair-light);min-width:0}
.at-outcome:last-child{border-right:0}
.at-outcome dt{font-size:clamp(34px,4.4vw,62px);font-weight:650;line-height:1;letter-spacing:-.035em;
  color:var(--at-ivory);font-variant-numeric:tabular-nums}
.at-outcome dd{margin:16px 0 0}
.at-outcome dd b{display:block;font-size:15px;font-weight:650;color:var(--at-champagne-pale);letter-spacing:-.005em}
.at-outcome dd span{display:block;margin-top:7px;font-size:14px;line-height:1.6;color:rgba(247,241,232,.62)}
.at-policy{margin-top:clamp(30px,4vw,48px);padding-top:22px;border-top:1px solid var(--at-hair-light);
  display:flex;gap:clamp(20px,4vw,56px);align-items:flex-start;flex-wrap:wrap;justify-content:space-between}
.at-policy p{margin:0;font-size:14px;line-height:1.72;color:rgba(247,241,232,.62);max-width:74ch}
.at-policy b{color:var(--at-ivory)}

/* ---- 6 · FOUNDER ------------------------------------------------------- */
.at-founder{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(32px,5vw,84px);align-items:center}
.at-portrait{border:1px solid var(--at-hair);background:var(--at-paper);padding:clamp(26px,3vw,40px)}
.at-portrait-mark{display:grid;place-items:center;padding:clamp(10px,2vw,22px) 0 clamp(20px,3vw,30px);
  border-bottom:1px solid var(--at-hair)}
.at-portrait-mark .at-seal{width:clamp(108px,13vw,150px);height:auto;display:block}
.at-portrait-mark .at-seal svg{width:100%;height:auto;display:block;overflow:visible}
/* the seal's illustration classes are palette-driven — bind them to atelier
   tokens so the compass rings render in champagne, not inherit-none */
body.skin-atelier .at-seal .si-ink{stroke:var(--at-ink);fill:none}
body.skin-atelier .at-seal .si-brass{stroke:var(--at-champagne);fill:none}
body.skin-atelier .at-seal .si-fillb{fill:var(--at-oxblood);stroke:none}
body.skin-atelier .at-seal .si-mono{fill:var(--at-ink);stroke:none}
.at-facts{margin:0;padding:0}
.at-facts div{display:flex;justify-content:space-between;align-items:baseline;gap:18px;
  padding:13px 0;border-bottom:1px solid var(--at-hair)}
.at-facts div:last-child{border-bottom:0;padding-bottom:0}
.at-facts dt{font-size:13px;color:var(--at-grey);letter-spacing:.01em}
.at-facts dd{margin:0;font-size:14px;font-weight:600;color:var(--at-ink);text-align:right}
.at-quote{margin:26px 0 0;font-family:var(--at-edit);font-size:clamp(19px,2.1vw,26px);
  line-height:1.5;letter-spacing:-.005em;color:var(--at-ink)}
.at-sign{margin:18px 0 0;font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--at-grey)}
.at-limited{display:flex;align-items:center;gap:9px;margin:26px 0 22px;padding-top:18px;
  border-top:1px solid var(--at-hair);font-size:13.5px;color:var(--at-ink-soft)}
.at-dot{width:7px;height:7px;border-radius:50%;background:var(--at-oxblood);flex:none}

/* ---- 7 · OPERATING METHOD (connected rail) ---------------------------- */
.at-rail{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;background:var(--at-hair);
  border:1px solid var(--at-hair);position:relative}
.at-stage{background:var(--at-paper);padding:clamp(24px,2.6vw,34px) clamp(18px,2vw,26px);
  min-width:0;position:relative;transition:background .28s ease}
.at-stage::before{content:"";position:absolute;left:clamp(18px,2vw,26px);top:0;
  width:26px;height:2px;background:var(--at-champagne);transition:width .4s ease}
.at-stage:hover,.at-stage:focus-within{background:var(--at-ivory)}
.at-stage:hover::before{width:52px}
.at-stage-n{display:block;font-size:11px;font-weight:650;letter-spacing:.16em;
  color:var(--at-champagne);margin-bottom:14px}
.at-stage h3{font-size:clamp(16px,1.6vw,19px);letter-spacing:-.012em}
.at-stage p{margin:8px 0 0;font-size:14px;line-height:1.58;color:var(--at-ink-soft)}
.at-rail-note{margin:22px 0 0;font-size:14px;color:var(--at-grey);max-width:70ch}

/* ---- 8 · GROWTH AUDIT -------------------------------------------------- */
.at-audit{background:var(--at-paper)}
.at-audit-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(32px,5vw,80px);align-items:start}
.at-checks{list-style:none;margin:26px 0 0;padding:0}
.at-checks li{position:relative;padding:12px 0 12px 30px;border-top:1px solid var(--at-hair);
  font-size:15px;line-height:1.55;color:var(--at-ink-soft)}
.at-checks li::before{content:"";position:absolute;left:2px;top:19px;width:9px;height:9px;
  border:1px solid var(--at-oxblood);border-width:0 0 1.5px 1.5px;transform:rotate(-45deg)}
.at-alt{margin:26px 0 0;font-size:14.5px;color:var(--at-ink-soft)}
.at-alt .at-link{min-height:0}

/* the Growth-Audit form card, in atelier dress (markup untouched) */
body.skin-atelier .form-card{background:var(--at-ivory);border:1px solid var(--at-hair);
  border-radius:0;box-shadow:none;padding:clamp(24px,3vw,40px)}
body.skin-atelier .form-title{font-family:var(--at-sans);font-weight:640;font-size:20px;
  letter-spacing:-.02em;color:var(--at-ink)}
body.skin-atelier .form-sub{font-size:14px;color:var(--at-grey)}
body.skin-atelier .field label{font-size:12px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--at-ink-soft)}
body.skin-atelier .field input,body.skin-atelier .field select,body.skin-atelier .field textarea{
  background-color:var(--at-paper);border:1px solid var(--at-hair);border-radius:0;
  color:var(--at-ink);font-family:var(--at-sans)}
body.skin-atelier .field input:focus,body.skin-atelier .field select:focus,
body.skin-atelier .field textarea:focus{border-color:var(--at-oxblood);outline:2px solid rgba(129,31,60,.18);outline-offset:1px}
body.skin-atelier .form-card .btn{background:var(--at-oxblood);border:1px solid var(--at-oxblood);
  color:var(--at-paper);border-radius:0;font-family:var(--at-sans);font-weight:600;letter-spacing:.01em;
  text-transform:none;min-height:50px}
body.skin-atelier .form-card .btn:hover{background:var(--at-oxblood-deep);border-color:var(--at-oxblood-deep)}
body.skin-atelier .form-card .btn.back{background:transparent;color:var(--at-ink-soft);border-color:var(--at-hair)}
body.skin-atelier .prog .fill{background:var(--at-oxblood)}
body.skin-atelier .form-note,body.skin-atelier .form-privacy{color:var(--at-grey)}

/* ---- CHROME: utility bar + navigation --------------------------------- */
body.skin-atelier #hd{background:var(--at-ivory);border-bottom:1px solid var(--at-hair)}
.at-utility{border-bottom:1px solid var(--at-hair);background:var(--at-paper)}
.at-utility-in{max-width:var(--at-max);margin:0 auto;padding:7px var(--at-gut);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--at-grey)}
.at-utility-mid{color:var(--at-oxblood)}
body.skin-atelier .wordmark{font-family:var(--at-sans);font-weight:650;letter-spacing:.22em;color:var(--at-ink)}
body.skin-atelier .wm-text span{color:var(--at-oxblood)}

.at-nav{display:none}
@media(min-width:1100px){
  body.skin-atelier .at-nav{display:flex;align-items:center;gap:clamp(18px,2vw,30px);
    flex:1;margin-left:clamp(24px,3vw,48px)}
  body.skin-atelier .at-nav ul{display:flex;align-items:center;gap:clamp(16px,1.9vw,28px);
    list-style:none;margin:0;padding:0}
  body.skin-atelier .at-nav a{font-size:14px;font-weight:550;color:var(--at-ink-soft);text-decoration:none;
    padding:8px 0;border-bottom:1px solid transparent;transition:color .22s ease,border-color .22s ease}
  body.skin-atelier .at-nav a:hover{color:var(--at-ink);border-color:var(--at-champagne)}
  body.skin-atelier .at-nav-intro{margin-left:auto;color:var(--at-oxblood) !important;font-weight:600}
  body.skin-atelier .at-nav-cta{display:inline-flex;align-items:center;min-height:44px;padding:11px 22px;
    background:var(--at-oxblood);color:var(--at-paper) !important;font-size:14px;font-weight:600;
    border:1px solid var(--at-oxblood) !important;white-space:nowrap;transition:background .25s ease}
  body.skin-atelier .at-nav-cta:hover{background:var(--at-oxblood-deep);color:var(--at-paper) !important}
  body.skin-atelier .menu-toggle{display:none}
}

/* overlay menu + footer stay INK-dark (no light-surface re-inking needed) */
body.skin-atelier .ov-panel{background:var(--at-ink);color:var(--at-ivory)}

/* WHILE THE MENU IS OPEN the header must go transparent so the ink panel reads
   behind it — otherwise the theme's white-on-open text lands on atelier's
   light bar and the wordmark + CLOSE disappear. */
body.skin-atelier.ov-open #hd{background:transparent;border-bottom-color:transparent;box-shadow:none}
body.skin-atelier.ov-open .at-utility{background:transparent;border-bottom-color:transparent}
body.skin-atelier.ov-open .at-utility-in{color:rgba(247,241,232,.55)}
body.skin-atelier.ov-open .at-utility-mid{color:var(--at-champagne)}
body.skin-atelier.ov-open .wordmark,
body.skin-atelier.ov-open .wm-text{color:var(--at-ivory) !important}
body.skin-atelier.ov-open .wm-text span{color:var(--at-champagne) !important}
body.skin-atelier.ov-open .menu-toggle{color:var(--at-ivory) !important}
body.skin-atelier.ov-open .wordmark .mark{filter:invert(1) brightness(1.7)}

/* the menu's brand card is a legacy PNG baked in the old FT teal — off-palette
   here, and not replaceable by CSS, so it is retired under atelier */
body.skin-atelier .mm-figure{display:none}
body.skin-atelier .mm-name,body.skin-atelier .mm-check{
  font-family:var(--at-sans);font-weight:640;letter-spacing:-.018em}
body.skin-atelier .mm-desc{font-family:var(--at-sans)}
body.skin-atelier .mm-all{font-family:var(--at-sans);letter-spacing:.1em}
body.skin-atelier .mm-eyebrow{color:var(--at-champagne)}
body.skin-atelier .mm-name::after,body.skin-atelier .mm-check span::after{background:var(--at-champagne)}
body.skin-atelier .mm-cta{background:var(--at-oxblood);color:var(--at-paper);border-radius:0}
body.skin-atelier .mm-cta:hover{background:var(--at-oxblood-deep)}
body.skin-atelier footer{background:var(--at-ink);border-top:0}
body.skin-atelier .ft h5{color:var(--at-champagne)}
body.skin-atelier .ft li a:hover,body.skin-atelier .ft-company a:hover,
body.skin-atelier .ft-legal a:hover{color:var(--at-champagne)}
body.skin-atelier .solae-divider{display:none}
body.skin-atelier .illu:not(.footer-seal):not(.at-seal){display:none}
body.skin-atelier .solae-stars{display:none}
body.skin-atelier .sticky-cta{background:rgba(23,22,20,.97)}
body.skin-atelier .sticky-cta .btn{background:var(--at-oxblood);border-color:var(--at-oxblood);border-radius:0}

/* ---- RESPONSIVE -------------------------------------------------------- */
@media(max-width:1100px){
  .at-mod:nth-child(1),.at-mod:nth-child(6){grid-column:span 6}
  .at-mod:nth-child(2),.at-mod:nth-child(5){grid-column:span 6}
  .at-mod:nth-child(3),.at-mod:nth-child(4){grid-column:span 6}
  .at-rail{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
  .at-hero-grid{grid-template-columns:1fr;text-align:center}
  .at-hero-fig{order:-1;max-width:330px;margin:0 auto}   /* globe first — the Clay pattern */
  .at-hero-copy .at-lede,.at-hero-copy .at-figs{margin-left:auto;margin-right:auto}
  .at-lede{max-width:52ch}
  .at-actions{justify-content:center}
  .at-figs{justify-content:center}
  .at-founder,.at-audit-grid{grid-template-columns:1fr}
  .at-outcomes{grid-template-columns:1fr}
  .at-outcome{border-right:0;border-bottom:1px solid var(--at-hair-light);padding-right:0}
  .at-outcome:last-child{border-bottom:0}
  .at-leak,.at-leak-lead,.at-leak-wide{grid-column:span 6}
  .at-strip-in{grid-template-columns:repeat(2,1fr)}
  .at-mod-wide{grid-template-columns:auto minmax(0,1fr);row-gap:14px}
  .at-mod-wide .at-more{grid-column:2}
}
@media(max-width:620px){
  /* Atelier's header is TALLER than the other skins (utility bar + nav row
     ≈100px). The globe sits first on mobile, so the hero needs real clearance
     or the sphere's top arc is clipped by the fixed header. */
  .at-hero{padding-top:clamp(152px,34vw,190px)}
  .at-hero-fig{max-width:300px}
  .at-h1{font-size:clamp(30px,8.4vw,40px)}
  .at-actions{flex-direction:column;align-items:stretch;gap:14px}
  .at-actions .at-btn{width:100%}
  .at-actions .at-link{justify-content:center}
  .at-figs{flex-direction:column;gap:0}
  .at-fig{border-right:0;border-bottom:1px solid var(--at-hair);margin-right:0;
    padding:14px 0;width:100%}
  .at-fig:last-child{border-bottom:0}
  .at-fig dd{max-width:none}
  .at-leak,.at-leak-lead,.at-leak-wide,
  .at-mod:nth-child(1),.at-mod:nth-child(2),.at-mod:nth-child(3),
  .at-mod:nth-child(4),.at-mod:nth-child(5),.at-mod:nth-child(6){grid-column:span 12}
  .at-rail{grid-template-columns:1fr}
  .at-strip-in{grid-template-columns:1fr}
  .at-cap{justify-content:flex-start;min-height:60px}
  .at-policy{flex-direction:column;gap:16px}
  .at-utility-in{justify-content:center;letter-spacing:.14em}
  .at-utility-left,.at-utility-right{display:none}
  .at-facts dd{text-align:right}
}
@media(max-width:380px){
  .at-utility-in{font-size:9.5px}
  .at-leak,.at-mod{padding:22px 18px}
}

/* =========================================================================
   INNER PAGES — the same architecture applied to every shared component.
   CSS-only: no template markup changes, so forms, schema and links are
   untouched. Specificity (body.skin-atelier .x) beats the base theme.
   ========================================================================= */

/* ---- bands + rhythm ---- */
/* :not([class*="at-"]) is REQUIRED — without it this rule out-specifies the
   homepage's own .at-hero / .at-dark bands and flattens them to ivory. */
body.skin-atelier section:not([class*="at-"]){background:var(--at-ivory);padding:var(--at-rhythm) 0}
body.skin-atelier section.light:not([class*="at-"]){background:var(--at-paper)}
body.skin-atelier .section-stack{border-top:1px solid var(--at-hair)}
body.skin-atelier .wrap{max-width:var(--at-max);padding-left:var(--at-gut);padding-right:var(--at-gut)}

/* ---- page hero ---- */
body.skin-atelier .page-hero{background:var(--at-ivory);background-image:none;
  padding-top:clamp(142px,16vw,196px);padding-bottom:clamp(44px,6vw,80px);
  border-bottom:1px solid var(--at-hair)}
body.skin-atelier .page-hero h1{font-family:var(--at-sans);font-weight:640;
  font-size:clamp(34px,4.8vw,66px);line-height:1.04;letter-spacing:-.032em;max-width:20ch}
body.skin-atelier .page-hero h1 em,body.skin-atelier h2 em,body.skin-atelier h3 em{
  font-family:var(--at-edit);font-style:italic;font-weight:400;color:var(--at-oxblood)}
body.skin-atelier .page-hero .sub,body.skin-atelier .page-hero .lede{
  margin-top:20px;font-size:clamp(16px,1.5vw,18.5px);line-height:1.6;color:var(--at-ink-soft);max-width:52ch}
body.skin-atelier .crumb{font-family:var(--at-sans);font-size:12px;letter-spacing:.06em;color:var(--at-grey)}
body.skin-atelier .crumb a{color:var(--at-grey);border-bottom:0;text-decoration:underline;
  text-underline-offset:3px;text-decoration-color:var(--at-hair)}
body.skin-atelier .crumb a:hover{color:var(--at-oxblood)}
body.skin-atelier .hero-actions{display:flex;align-items:center;gap:clamp(16px,2.4vw,30px);
  flex-wrap:wrap;margin-top:32px}

/* ---- section heads + type ---- */
body.skin-atelier .eyebrow{font-family:var(--at-sans);font-size:11px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--at-oxblood)}
body.skin-atelier .sec-head{max-width:64ch;margin-bottom:clamp(30px,4vw,54px)}
body.skin-atelier .sec-head h2{font-family:var(--at-sans);font-weight:640;
  font-size:clamp(27px,3.3vw,46px);line-height:1.08;letter-spacing:-.028em;margin-top:10px}
body.skin-atelier .lede,body.skin-atelier .sub{font-size:16.5px;line-height:1.62;color:var(--at-ink-soft)}
body.skin-atelier .card-lbl,body.skin-atelier .mono-line,body.skin-atelier .nc-meta{
  font-family:var(--at-sans);font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--at-grey)}

/* ---- buttons + links ---- */
body.skin-atelier .btn{font-family:var(--at-sans);font-weight:600;font-size:15px;letter-spacing:.01em;
  text-transform:none;background:var(--at-oxblood);color:var(--at-paper);
  border:1px solid var(--at-oxblood);border-radius:0;padding:14px 28px;min-height:52px;
  display:inline-flex;align-items:center;justify-content:center;box-shadow:none}
body.skin-atelier .btn:hover{background:var(--at-oxblood-deep);border-color:var(--at-oxblood-deep);
  color:var(--at-paper);transform:none}
body.skin-atelier .btn.ghost{background:transparent;color:var(--at-oxblood);border-color:var(--at-hair)}
body.skin-atelier .btn.ghost:hover{background:var(--at-oxblood);color:var(--at-paper);border-color:var(--at-oxblood)}
body.skin-atelier .textlink{font-family:var(--at-sans);font-size:14.5px;font-weight:600;
  letter-spacing:0;text-transform:none;color:var(--at-oxblood);
  border-bottom:1px solid var(--at-champagne);padding-bottom:2px}
body.skin-atelier .textlink:hover{color:var(--at-ink);border-color:var(--at-ink)}

/* ---- problem grids → hairline-joined bento ---- */
body.skin-atelier .prob-grid,body.skin-atelier .arch-grid,body.skin-atelier .ind-cards,
body.skin-atelier .method-grid,body.skin-atelier .diff-grid{
  gap:1px;background:var(--at-hair);border:1px solid var(--at-hair)}
body.skin-atelier .prob,body.skin-atelier .arch-mod,body.skin-atelier .ind-card,
body.skin-atelier .step,body.skin-atelier .diff{
  background:var(--at-paper);border:0;border-radius:0;box-shadow:none;
  padding:clamp(24px,2.8vw,36px);transition:background .28s ease}
body.skin-atelier section.light .prob,body.skin-atelier section.light .arch-mod,
body.skin-atelier section.light .ind-card,body.skin-atelier section.light .step,
body.skin-atelier section.light .diff{background:var(--at-ivory)}
body.skin-atelier .prob:hover,body.skin-atelier a.arch-mod:hover,
body.skin-atelier a.ind-card:hover{background:var(--at-ivory);transform:none}
body.skin-atelier section.light a.arch-mod:hover,
body.skin-atelier section.light a.ind-card:hover{background:var(--at-paper)}
body.skin-atelier .prob h3,body.skin-atelier .ind-card h3,body.skin-atelier .ind-card b,
body.skin-atelier .arch-mod b,body.skin-atelier .diff b{
  font-family:var(--at-sans);font-weight:640;letter-spacing:-.015em;color:var(--at-ink)}
body.skin-atelier .prob h3{font-size:clamp(17px,1.85vw,21px);line-height:1.26}
body.skin-atelier .prob p,body.skin-atelier .arch-mod .am-out,body.skin-atelier .ind-card .ic-p,
body.skin-atelier .diff span,body.skin-atelier .step p{
  font-size:14.5px;line-height:1.58;color:var(--at-ink-soft)}
body.skin-atelier .cost{font-family:var(--at-sans);font-size:11px;font-weight:650;
  letter-spacing:.16em;text-transform:uppercase;color:var(--at-oxblood);
  background:none;border:0;border-radius:0;padding:0;margin-top:auto;padding-top:14px}

/* ---- architecture modules: oversized champagne numerals ---- */
/* only .am-n is a bare numeral — .step .n and .pnum carry label text
   ("01 · Weeks 1–2"), so they stay refined labels, never oversized */
body.skin-atelier .am-n{
  font-family:var(--at-sans);font-size:clamp(26px,3vw,40px);font-weight:600;line-height:1;
  letter-spacing:-.04em;color:var(--at-champagne-pale);font-variant-numeric:tabular-nums;
  display:block;margin-bottom:12px;transition:color .28s ease}
body.skin-atelier .step .n,body.skin-atelier .pnum{
  font-family:var(--at-sans);font-size:11.5px;font-weight:650;letter-spacing:.16em;
  text-transform:uppercase;color:var(--at-oxblood);display:block;margin-bottom:14px;
  font-variant-numeric:tabular-nums}
body.skin-atelier a.arch-mod:hover .am-n{color:var(--at-champagne)}
body.skin-atelier .arch-mod b{display:block;font-size:clamp(17px,1.8vw,21px);line-height:1.26;margin-bottom:8px}
body.skin-atelier .step h3{font-family:var(--at-sans);font-weight:640;
  font-size:clamp(16px,1.7vw,20px);letter-spacing:-.015em;margin:0 0 8px}
body.skin-atelier .step .out{display:block;margin-top:12px;font-family:var(--at-sans);
  font-size:13px;letter-spacing:0;text-transform:none;color:var(--at-grey);line-height:1.55}
body.skin-atelier .step .out b{color:var(--at-ink-soft);font-weight:600}
body.skin-atelier .principle{border-top:1px solid var(--at-hair)}
body.skin-atelier .principle h3{font-family:var(--at-sans);font-weight:640;letter-spacing:-.018em}

/* ---- diff / stat cells ---- */
body.skin-atelier .diff b{display:block;font-size:clamp(21px,2.4vw,30px);letter-spacing:-.025em;
  font-variant-numeric:tabular-nums;margin-bottom:6px}
body.skin-atelier .diff span{display:block}

/* ---- geo chips ---- */
body.skin-atelier .geo-card{background:var(--at-paper);border:1px solid var(--at-hair);
  border-radius:0;box-shadow:none;padding:14px 18px;font-size:14px;color:var(--at-ink-soft)}

/* ---- FAQ → hairline accordion (no cards, no shadows) ---- */
body.skin-atelier .faq-item{background:none;border:0;border-bottom:1px solid var(--at-hair);
  border-radius:0;box-shadow:none;margin:0;padding:0}
body.skin-atelier .faq-q{font-family:var(--at-sans);font-weight:640;
  font-size:clamp(16px,1.75vw,20px);letter-spacing:-.015em;color:var(--at-ink);padding:22px 0}
body.skin-atelier .faq-q .ind{font-family:var(--at-sans);color:var(--at-oxblood);font-size:18px}
body.skin-atelier .faq-a p{font-size:15px;line-height:1.66;color:var(--at-ink-soft);max-width:74ch}

/* ---- close strip ---- */
body.skin-atelier .close-strip{background:var(--at-paper);border-top:1px solid var(--at-hair)}
body.skin-atelier .close-strip h2{font-family:var(--at-sans);font-weight:640;
  font-size:clamp(28px,3.8vw,52px);line-height:1.06;letter-spacing:-.03em;margin-top:12px}
body.skin-atelier .close-meta{font-family:var(--at-sans);font-size:12px;letter-spacing:.08em;
  text-transform:none;color:var(--at-grey);margin-top:26px}
body.skin-atelier .close-meta span{border-color:var(--at-hair)}

/* ---- comparison, notes, lists ---- */
body.skin-atelier .cmp-col{background:var(--at-paper);border:1px solid var(--at-hair);
  border-radius:0;box-shadow:none;padding:clamp(24px,2.8vw,34px)}
body.skin-atelier .cmp-col.cmp-solae{background:var(--at-ink);border-color:var(--at-ink)}
body.skin-atelier .cmp-solae .cmp-head{color:var(--at-champagne)}
body.skin-atelier .cmp-solae li{color:rgba(247,241,232,.82)}
body.skin-atelier .cmp-head{font-family:var(--at-sans);font-weight:640;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase}
body.skin-atelier .tcard{background:var(--at-paper);border:0;border-left:2px solid var(--at-champagne);
  border-radius:0;box-shadow:none;padding:20px 24px}
body.skin-atelier .tcard p{font-family:var(--at-edit);font-style:italic;font-size:16px;color:var(--at-ink-soft)}
body.skin-atelier .tq{color:var(--at-champagne)}
body.skin-atelier .tcap,body.skin-atelier .case-foot,body.skin-atelier .nda-line{
  font-family:var(--at-sans);font-size:13px;letter-spacing:.02em;text-transform:none;color:var(--at-grey)}
body.skin-atelier .geo-honest{background:var(--at-paper);border:0;border-left:2px solid var(--at-oxblood);
  border-radius:0;padding:14px 20px;font-size:14px;color:var(--at-ink-soft)}
body.skin-atelier .spine-note{font-family:var(--at-sans);font-size:14px;letter-spacing:0;
  text-transform:none;color:var(--at-grey)}
body.skin-atelier .rule-list li,body.skin-atelier .gets li{
  border-top:1px solid var(--at-hair);font-size:15px;line-height:1.6;color:var(--at-ink-soft);
  padding:13px 0 13px 28px}
body.skin-atelier .rule-list li::before,body.skin-atelier .gets li::before{
  content:"";position:absolute;left:2px;top:20px;width:8px;height:8px;
  border:1px solid var(--at-oxblood);border-width:0 0 1.5px 1.5px;transform:rotate(-45deg);color:transparent}
body.skin-atelier .rule-list li b,body.skin-atelier .gets li b{color:var(--at-ink);font-weight:640}
body.skin-atelier .dash2-card{background:var(--at-paper);border:1px solid var(--at-hair);
  border-radius:0;box-shadow:none}
body.skin-atelier .dash2-card b{font-family:var(--at-sans);font-weight:640}
body.skin-atelier .dash2-note{font-family:var(--at-sans);font-style:normal;font-size:13.5px;
  text-align:left;color:var(--at-grey)}
body.skin-atelier .d2-dot{background:var(--at-champagne)}

/* ---- journal / article typography ---- */
body.skin-atelier .post h2,body.skin-atelier .post h3{font-family:var(--at-sans);font-weight:640;letter-spacing:-.02em}
body.skin-atelier .post p,body.skin-atelier .post li{font-size:16.5px;line-height:1.72;color:var(--at-ink-soft)}
body.skin-atelier .post a{color:var(--at-oxblood)}
body.skin-atelier .pillar-toc{background:var(--at-paper);border:1px solid var(--at-hair);border-radius:0}

/* ---- inner-page responsive ---- */
@media(max-width:820px){
  body.skin-atelier .page-hero{padding-top:clamp(118px,26vw,158px);padding-bottom:34px}
  body.skin-atelier .hero-actions{flex-direction:column;align-items:stretch;gap:14px}
  body.skin-atelier .hero-actions .btn{width:100%}
  body.skin-atelier .sec-head{margin-bottom:26px}
}
@media(max-width:560px){
  body.skin-atelier .prob,body.skin-atelier .arch-mod,body.skin-atelier .ind-card,
  body.skin-atelier .step,body.skin-atelier .diff{padding:22px 18px}
}

/* =========================================================================
   REVIEW PASS — fixes from the eyes-on audit of the atelier skin.
   Declared last so these win over the rules above.
   ========================================================================= */

/* meta text was below AA on ivory (#817B72 = 3.7:1); this reads AA everywhere */
body.skin-atelier{--at-grey:#6E675E}

/* CRITICAL — header CTA lost its horizontal padding to the generic nav-anchor
   rule (same specificity, declared later). Re-assert on the class itself. */
@media(min-width:1100px){
  body.skin-atelier .at-nav{flex:1 1 auto;min-width:0}
  body.skin-atelier .at-nav a.at-nav-cta{padding:11px 24px;font-weight:600;flex:0 0 auto;border-bottom:0}
  body.skin-atelier .at-nav a.at-nav-intro{padding:8px 0;font-weight:600;flex:0 0 auto}
}

/* CRITICAL — footer brand lockup: ink-on-ink wordmark + an FT-teal inline span */
body.skin-atelier .ft-brand .wordmark{color:var(--at-ivory)}
body.skin-atelier .ft-brand .wordmark span{color:var(--at-champagne) !important}
body.skin-atelier .footer-seal .si-ink{stroke:var(--at-ivory)}
body.skin-atelier .footer-seal .si-brass{stroke:var(--at-champagne)}
body.skin-atelier .footer-seal .si-mono{fill:var(--at-ivory)}
body.skin-atelier .footer-seal .si-fillb{fill:var(--at-champagne)}
body.skin-atelier .ft-social a{width:40px;height:40px;border-radius:0;border-color:var(--at-hair-light)}
body.skin-atelier .ft-social a:hover{border-color:var(--at-champagne);background:none}
body.skin-atelier .ft-social svg{fill:rgba(247,241,232,.72)}
body.skin-atelier .ft-social a:hover svg{fill:var(--at-champagne)}
body.skin-atelier .ft h5{font-family:var(--at-sans);font-size:11px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--at-champagne)}
body.skin-atelier .ft li a{font-family:var(--at-sans);font-size:14px;color:rgba(247,241,232,.72)}
body.skin-atelier .ft-company,body.skin-atelier .ft-bottom{font-family:var(--at-sans);
  font-size:12.5px;letter-spacing:.02em;text-transform:none;color:rgba(247,241,232,.6)}

/* CRITICAL — founder credential card + results proof-policy were unskinned */
body.skin-atelier .f-card{background:var(--at-paper);border:1px solid var(--at-hair);
  border-left:2px solid var(--at-champagne);border-radius:0;box-shadow:none}
body.skin-atelier .f-card h3{font-family:var(--at-sans);font-weight:640;letter-spacing:-.02em}
body.skin-atelier .f-card .role{color:var(--at-grey)}
body.skin-atelier .f-card li{border-color:var(--at-hair);font-size:14px;color:var(--at-ink-soft)}
body.skin-atelier .f-card li b{color:var(--at-ink);font-weight:600}
body.skin-atelier .proof-policy{max-width:74ch;margin-left:0;margin-right:0;text-align:left;
  background:var(--at-paper);border:0;border-left:2px solid var(--at-oxblood);border-radius:0;
  box-shadow:none;padding:16px 22px;font-size:14.5px;color:var(--at-ink-soft)}
body.skin-atelier .proof-policy b{color:var(--at-ink)}

/* MAJOR — comparison module: left-aligned, hairline-joined, palette ticks */
body.skin-atelier .compare{max-width:none;margin-left:0;margin-right:0;gap:1px;
  background:var(--at-hair);border:1px solid var(--at-hair)}
body.skin-atelier .cmp-col,body.skin-atelier .cmp-col.cmp-solae{border:0}
body.skin-atelier .cmp-solae li::before{border-color:var(--at-champagne)}
body.skin-atelier .cmp-basic li::before{border-color:var(--at-grey)}
body.skin-atelier .cmp-basic .cmp-head{color:var(--at-oxblood)}

/* MAJOR — the GEO worked-example panel was still entirely in the old skin */
body.skin-atelier .geo-demo{background:var(--at-paper);border:1px solid var(--at-hair);
  border-radius:0;box-shadow:none}
body.skin-atelier .geo-demo .bar i{border-radius:0;width:6px;height:6px;background:var(--at-champagne)}
body.skin-atelier .geo-demo .q{font-family:var(--at-sans);font-size:14px;border-radius:0;
  border-color:var(--at-hair);color:var(--at-ink-soft)}
body.skin-atelier .geo-demo .q b{color:var(--at-ink);font-weight:600}
body.skin-atelier .geo-demo .a{color:var(--at-ink-soft)}
body.skin-atelier .geo-demo .a .hl{background:var(--at-oxblood);color:var(--at-paper);border-radius:0}
body.skin-atelier .geo-demo .src{font-family:var(--at-sans);font-size:12.5px;letter-spacing:.02em;
  text-transform:none;color:var(--at-grey)}

/* MAJOR — GEO deliverable chips joined into one hairline row */
body.skin-atelier .geo-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;background:var(--at-hair);border:1px solid var(--at-hair)}
body.skin-atelier .geo-card{border:0;background:var(--at-paper);padding:18px 20px}
body.skin-atelier section.light .geo-card{background:var(--at-ivory)}
@media(max-width:900px){body.skin-atelier .geo-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){body.skin-atelier .geo-cards{grid-template-columns:1fr}}

/* MAJOR — closing band abandoned the left rail on every page */
body.skin-atelier .close-strip{text-align:left}
body.skin-atelier .close-strip h2{margin-left:0;margin-right:0;max-width:22ch}
body.skin-atelier .close-strip .sub,body.skin-atelier .close-strip .lede{margin-left:0;margin-right:0}
body.skin-atelier .close-meta{justify-content:flex-start;font-family:var(--at-sans);
  font-size:12.5px;letter-spacing:.02em;text-transform:none;color:var(--at-ink-soft)}
body.skin-atelier .spine-note.ctr,body.skin-atelier .case-foot.ctr,
body.skin-atelier .sec-head.ctr{text-align:left}

/* MAJOR — FAQ and lists were capped narrower than every other band */
body.skin-atelier .faq,body.skin-atelier .faq.mini{max-width:none}
body.skin-atelier .faq-q{display:flex;justify-content:space-between;gap:24px}
body.skin-atelier .faq-a p{max-width:74ch}
body.skin-atelier .gets,body.skin-atelier .rule-list{max-width:none !important}

/* MAJOR — .diff b oversizing leaked into nested list lead-ins */
body.skin-atelier .diff > b{display:block;font-size:clamp(21px,2.4vw,30px);
  letter-spacing:-.025em;margin-bottom:6px}
body.skin-atelier .diff .gets li b,body.skin-atelier .diff li b{
  display:inline;font-size:15px;letter-spacing:0;margin:0;color:var(--at-ink)}

/* MAJOR — form notes, file picker and placeholders still in the old register */
body.skin-atelier .form-note,body.skin-atelier .form-privacy{font-family:var(--at-sans);
  font-size:12.5px;font-weight:500;letter-spacing:.01em;text-transform:none;
  text-align:left;line-height:1.6;color:var(--at-ink-soft)}
body.skin-atelier .field input[type=file]{color:var(--at-ink-soft);font-family:var(--at-sans);
  font-size:14px;border-radius:0;border-color:var(--at-hair)}
body.skin-atelier .field input[type=file]::file-selector-button{font-family:var(--at-sans);
  font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:none;border-radius:0;
  background:var(--at-ink);color:var(--at-paper)}
body.skin-atelier .field input::placeholder,body.skin-atelier .field textarea::placeholder{
  color:var(--at-grey);opacity:1}

/* MINOR — breadcrumb out of the old micro-label register */
body.skin-atelier .crumb{font-family:var(--at-sans);font-size:12.5px;font-weight:500;
  letter-spacing:.01em;text-transform:none;color:var(--at-ink-soft)}
body.skin-atelier .crumb a{color:var(--at-ink-soft);text-decoration-color:var(--at-champagne)}

/* MINOR — list markers read as chevrons; make them true ticks */
body.skin-atelier .rule-list li::before,body.skin-atelier .gets li::before,
body.skin-atelier .at-checks li::before{
  left:4px;top:17px;width:5px;height:10px;border:solid var(--at-oxblood);
  border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}

/* MINOR — cost labels wrapped to two lines in tight cells */
body.skin-atelier .cost{font-size:10.5px;letter-spacing:.1em}

/* MINOR — link affordance on card-style internal links */
body.skin-atelier a.arch-mod{justify-content:space-between}

/* MINOR — trademark sits as a small upright superscript, not display italic */
body.skin-atelier h1 .tm,body.skin-atelier h2 .tm,body.skin-atelier h3 .tm{
  font-family:var(--at-sans);font-style:normal;font-weight:600;font-size:.34em;
  vertical-align:super;letter-spacing:.02em;color:var(--at-grey);margin-left:.12em}

/* =========================================================================
   MOTION + INTERACTION — restrained, architectural, and tied to the theme's
   existing IntersectionObserver (theme.js adds .in to any .rv when it enters
   view), so this adds ZERO new JavaScript. Nothing here gates content: the
   hero paints immediately, and without JS every .rv element is already
   visible (theme.css only hides .rv under `html.js`).
   ========================================================================= */

/* 1 · a champagne rule draws itself under every section head */
body.skin-atelier .at-head,body.skin-atelier .sec-head{position:relative;padding-bottom:24px}
body.skin-atelier .at-head::after,body.skin-atelier .sec-head::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:112px;background:var(--at-champagne)}
html.js body.skin-atelier .at-head::after,html.js body.skin-atelier .sec-head::after{
  width:0;transition:width 1.1s cubic-bezier(.22,.61,.36,1) .15s}
html.js body.skin-atelier .at-head.in::after,html.js body.skin-atelier .sec-head.in::after{width:112px}

/* 2 · staggered entrances inside grids (the .rv reveal, re-timed per cell) */
body.skin-atelier .at-outcomes .at-outcome:nth-child(2),
body.skin-atelier .at-leaks .at-leak:nth-child(2),
body.skin-atelier .at-strip-in .at-cap:nth-child(2){transition-delay:.08s}
body.skin-atelier .at-outcomes .at-outcome:nth-child(3),
body.skin-atelier .at-leaks .at-leak:nth-child(3),
body.skin-atelier .at-strip-in .at-cap:nth-child(3){transition-delay:.16s}
body.skin-atelier .at-leaks .at-leak:nth-child(4),
body.skin-atelier .at-strip-in .at-cap:nth-child(4){transition-delay:.24s}

/* 3 · the big outcome figures settle in with a subtle rise */
/* The proof figures are the page's credibility — they are NEVER hidden behind
   a JS-added class. Motion is transform-only, so they always paint. */
body.skin-atelier .at-outcome dt{display:block}
html.js body.skin-atelier .at-outcome dt{transform:translateY(10px);
  transition:transform .9s cubic-bezier(.22,.61,.36,1) .1s}
html.js body.skin-atelier .at-outcome.in dt{transform:none}

/* 4 · architecture modules: a champagne edge grows on hover/focus */
body.skin-atelier .at-mod,body.skin-atelier .arch-mod{position:relative}
body.skin-atelier .at-mod::before,body.skin-atelier a.arch-mod::before{
  content:"";position:absolute;left:0;top:0;height:2px;width:0;background:var(--at-champagne);
  transition:width .45s cubic-bezier(.22,.61,.36,1)}
body.skin-atelier .at-mod:hover::before,body.skin-atelier .at-mod:focus-visible::before,
body.skin-atelier a.arch-mod:hover::before,body.skin-atelier a.arch-mod:focus-visible::before{width:100%}
body.skin-atelier .at-mod:hover .at-more,body.skin-atelier a.arch-mod:hover .am-out{color:var(--at-oxblood)}

/* 5 · the operating-method rail connects as it enters view */
html.js body.skin-atelier .at-stage::before{width:0}
html.js body.skin-atelier .at-stage.in::before{width:26px}
body.skin-atelier .at-stage:hover::before,body.skin-atelier .at-stage:focus-within::before{width:100%}

/* 6 · capability strip + links: precise, quick hover response */
body.skin-atelier .at-cap span{transition:transform .3s cubic-bezier(.22,.61,.36,1)}
body.skin-atelier .at-cap:hover span{transform:translateX(3px)}
body.skin-atelier .at-cap svg{transition:stroke .25s ease,transform .35s cubic-bezier(.22,.61,.36,1)}
body.skin-atelier .at-cap:hover svg{transform:scale(1.06)}
body.skin-atelier .at-btn{transition:background .25s ease,border-color .25s ease,transform .25s ease}
body.skin-atelier .at-btn:hover,body.skin-atelier .btn:hover{transform:translateY(-1px)}
body.skin-atelier .at-btn:active,body.skin-atelier .btn:active{transform:translateY(0)}

/* 7 · the hero's architectural frame breathes very slowly (decoration only) */
body.skin-atelier .at-ring-2{transform-origin:50% 50%;animation:atDrift 46s linear infinite}
@keyframes atDrift{to{transform:rotate(360deg)}}

/* ---- REDUCED MOTION: everything above resolves to its end state --------- */
@media (prefers-reduced-motion:reduce){
  .at-rise{animation:none}
  .at-mod,.at-stage,.at-cap,.at-btn,.at-link,.at-stage::before{transition:none}
  body.skin-atelier .at-head::after,body.skin-atelier .sec-head::after{transition:none;width:112px}
  body.skin-atelier .at-outcome dt{transform:none;opacity:1;transition:none}
  body.skin-atelier .at-stage::before{width:26px}
  body.skin-atelier .at-mod::before,body.skin-atelier a.arch-mod::before{transition:none}
  body.skin-atelier .at-ring-2{animation:none}
  body.skin-atelier .at-cap span,body.skin-atelier .at-cap svg{transition:none}
}