/* ZS_ATELIER_SYSTEM — Unified quiet-mill language
   Shared by PDP lookbook, Fabrics hub, and fabric sub-pages.
   Tokens: ink · mute · paper · gold · rule · ease · measure */

:root,
[data-atelier],
[data-fabrics="atelier"],
[data-pdp="lookbook"]{
  --zs-ink:#12131A;
  --zs-mute:rgba(18,19,26,.56);
  --zs-faint:rgba(18,19,26,.4);
  --zs-ghost:rgba(18,19,26,.26);
  --zs-rule:rgba(18,19,26,.1);
  --zs-rule-soft:rgba(18,19,26,.055);
  --zs-paper:#F1F0EC;
  --zs-stage:#DDDBD5;
  --zs-white:#FFFEFB;
  --zs-gold:#7A6340;
  --zs-gold-l:#A89068;
  --zs-ease:cubic-bezier(.22,.61,.36,1);
  --zs-measure:1180px;
  --zs-rail:clamp(20px,3.5vw,48px);
  --zs-section-y:clamp(64px,8vw,112px);
  --zs-type-display:clamp(40px,5.5vw,64px);
  --zs-type-h2:clamp(24px,2.6vw,32px);
  --zs-type-lead:15px;
  --zs-type-meta:9.5px;

  /* Aliases for existing page modules */
  --lb-ink:var(--zs-ink);
  --lb-mute:var(--zs-mute);
  --lb-faint:var(--zs-faint);
  --lb-ghost:var(--zs-ghost);
  --lb-rule:var(--zs-rule);
  --lb-rule-soft:var(--zs-rule-soft);
  --lb-paper:var(--zs-paper);
  --lb-stage:var(--zs-stage);
  --lb-white:var(--zs-white);
  --lb-gold:var(--zs-gold);
  --lb-ease:var(--zs-ease);
  --fb-ink:var(--zs-ink);
  --fb-mute:var(--zs-mute);
  --fb-faint:var(--zs-faint);
  --fb-ghost:var(--zs-ghost);
  --fb-rule:var(--zs-rule);
  --fb-rule-soft:var(--zs-rule-soft);
  --fb-paper:var(--zs-paper);
  --fb-white:var(--zs-white);
  --fb-gold:var(--zs-gold);
  --fb-ease:var(--zs-ease);
}

/* Canvas */
body[data-atelier="1"],
body[data-fabrics="atelier"],
body[data-pdp="lookbook"]{
  background:var(--zs-paper);
  color:var(--zs-ink);
}

/* Shared eyebrow */
.zs-eyebrow,
[data-atelier] .eyebrow,
[data-fabrics="atelier"] .eyebrow{
  margin:0 0 14px;
  font-family:var(--data);
  font-size:var(--zs-type-meta);
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--zs-ghost);
}

/* Shared section head */
.zs-sec-head{
  max-width:520px;
  margin:0 0 40px;
}
.zs-sec-head h2{
  margin:0 0 14px;
  max-width:16ch;
  font-family:var(--body);
  font-size:var(--zs-type-h2);
  font-weight:500;
  letter-spacing:-.03em;
  line-height:1.15;
  color:var(--zs-ink);
  text-wrap:balance;
}
.zs-sec-head .lead{
  margin:0;
  max-width:42ch;
  font-size:var(--zs-type-lead);
  line-height:1.65;
  color:var(--zs-mute);
}

/* Shared measure / wrap rhythm */
.zs-measure,
[data-fabrics="atelier"] .fab-atelier > .wrap,
[data-fabrics="atelier"] .fab-notes.wrap{
  max-width:var(--zs-measure);
  margin-left:auto;
  margin-right:auto;
  padding-left:var(--zs-rail);
  padding-right:var(--zs-rail);
}

/* Shared fab-nav (hub + sub) */
body[data-atelier="1"] .fab-nav,
body[data-fabrics="atelier"] .fab-nav{
  position:sticky;
  top:0;
  z-index:55;
  background:rgba(241,240,236,.94);
  backdrop-filter:blur(12px) saturate(140%);
  -webkit-backdrop-filter:blur(12px) saturate(140%);
  border-bottom:1px solid var(--zs-rule);
}
body[data-atelier="1"] .fab-nav-inner,
body[data-fabrics="atelier"] .fab-nav-inner{
  display:flex;
  flex-wrap:wrap;
  gap:2px;
  padding:10px 0;
  max-width:var(--zs-measure);
  margin:0 auto;
  padding-left:var(--zs-rail);
  padding-right:var(--zs-rail);
}
body[data-atelier="1"] .fab-nav a,
body[data-fabrics="atelier"] .fab-nav a{
  font-family:var(--data) !important;
  font-size:10px !important;
  letter-spacing:.14em !important;
  text-transform:uppercase !important;
  color:var(--zs-faint) !important;
  text-decoration:none !important;
  padding:9px 12px !important;
  border:0 !important;
  border-bottom:1px solid transparent !important;
  background:transparent !important;
  border-radius:0 !important;
  min-height:0 !important;
  transition:color .2s var(--zs-ease), border-color .2s var(--zs-ease);
}
body[data-atelier="1"] .fab-nav a:hover,
body[data-fabrics="atelier"] .fab-nav a:hover{
  color:var(--zs-ink) !important;
  background:transparent !important;
}
body[data-atelier="1"] .fab-nav a.is-on,
body[data-fabrics="atelier"] .fab-nav a.is-on{
  color:var(--zs-ink) !important;
  border-bottom-color:var(--zs-gold) !important;
}
body[data-atelier="1"] .fab-nav a.cm-nav,
body[data-fabrics="atelier"] .fab-nav a.cm-nav{
  color:var(--zs-gold) !important;
}

/* Sub-page phero → atelier quiet hero */
body[data-atelier="1"].hub-sub .phero{
  background:var(--zs-ink) !important;
  color:#fff !important;
  padding:clamp(72px,10vw,120px) 0 clamp(48px,6vw,72px) !important;
  position:relative;
  border:0 !important;
}
body[data-atelier="1"].hub-sub .phero::before{
  content:"";
  position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,var(--zs-gold-l),transparent 55%);
  opacity:.55;
}
body[data-atelier="1"].hub-sub .phero .wrap{
  max-width:var(--zs-measure);
  padding-left:var(--zs-rail);
  padding-right:var(--zs-rail);
}
body[data-atelier="1"].hub-sub .phero .hub-brand{
  display:inline-flex;
  margin:0 0 18px;
  font-family:var(--data);
  font-size:10px;
  font-weight:500;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:rgba(232,214,176,.92);
}
body[data-atelier="1"].hub-sub .phero h1{
  font-family:var(--body) !important;
  font-weight:500 !important;
  font-size:clamp(34px,5vw,52px) !important;
  letter-spacing:-.034em !important;
  line-height:1.08 !important;
  max-width:14ch !important;
  color:#fff !important;
}
body[data-atelier="1"].hub-sub .phero h1 em{
  font-style:italic;
  font-weight:500;
  color:var(--zs-gold-l) !important;
}
body[data-atelier="1"].hub-sub .phero .psub{
  margin-top:16px !important;
  max-width:42ch !important;
  font-size:15.5px !important;
  line-height:1.65 !important;
  color:rgba(255,255,255,.68) !important;
}
body[data-atelier="1"].hub-sub .phero .pmeta{
  margin-top:32px !important;
  border-top:1px solid rgba(255,255,255,.14) !important;
  display:flex !important;
  flex-wrap:wrap !important;
  gap:8px 0 !important;
  grid-template-columns:none !important;
}
body[data-atelier="1"].hub-sub .phero .pmeta > div{
  border:0 !important;
  padding:14px 28px 0 0 !important;
  flex:none;
}
body[data-atelier="1"].hub-sub .phero .pmeta b{
  font-family:var(--mono) !important;
  font-size:14px !important;
  font-weight:500 !important;
  background:none !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}
body[data-atelier="1"].hub-sub .phero .pmeta span{
  font-size:10px !important;
  letter-spacing:.1em !important;
  color:rgba(255,255,255,.45) !important;
}
body[data-atelier="1"].hub-sub .phero .crumb{
  font-family:var(--data);
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin-bottom:20px;
  color:rgba(255,255,255,.45);
}
body[data-atelier="1"].hub-sub .phero .crumb a{color:rgba(255,255,255,.62);text-decoration:none}
body[data-atelier="1"].hub-sub .phero .crumb a:hover{color:#fff}

/* Sub-page section polish */
body[data-atelier="1"].hub-sub > section,
body[data-atelier="1"].hub-sub .fab-hub,
body[data-atelier="1"].hub-sub .fab-bases,
body[data-atelier="1"].hub-sub .fab-paths,
body[data-atelier="1"].hub-sub .fab-scene{
  padding-top:var(--zs-section-y);
  padding-bottom:clamp(48px,6vw,80px);
  border-bottom:1px solid var(--zs-rule-soft);
  background:transparent;
}
body[data-atelier="1"].hub-sub > section > .wrap,
body[data-atelier="1"].hub-sub .fab-hub > .wrap,
body[data-atelier="1"].hub-sub .fab-bases > .wrap,
body[data-atelier="1"].hub-sub .fab-paths > .wrap{
  max-width:var(--zs-measure);
}
body[data-atelier="1"].hub-sub h2{
  font-family:var(--body) !important;
  font-weight:500 !important;
  letter-spacing:-.028em !important;
  max-width:18ch;
}
body[data-atelier="1"].hub-sub .lead{
  max-width:44ch;
  color:var(--zs-mute);
  font-size:15px;
  line-height:1.65;
}
body[data-atelier="1"].hub-sub .band{
  background:var(--zs-ink) !important;
}

/* Shared text CTA */
.zs-text-link{
  font-family:var(--data);
  font-size:10.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--zs-faint);
  text-decoration:none;
  border-bottom:1px solid rgba(18,19,26,.18);
  padding-bottom:2px;
  transition:color .2s var(--zs-ease), border-color .2s var(--zs-ease);
}
.zs-text-link:hover{
  color:var(--zs-ink);
  border-bottom-color:var(--zs-ink);
}

/* Soft entrance */
@media (prefers-reduced-motion:no-preference){
  [data-fabrics="atelier"] .fab-base,
  [data-fabrics="atelier"] .fab-door,
  [data-fabrics="atelier"] .fab-apps a{
    transition:background .28s var(--zs-ease), transform .28s var(--zs-ease);
  }
  [data-fabrics="atelier"] .fab-base:hover,
  [data-fabrics="atelier"] .fab-door:hover{
    transform:translateY(-1px);
  }
}

/* —— Sitewide canvas when atelier is wired —— */
body[data-atelier="1"]{
  background:var(--zs-paper);
  color:var(--zs-ink);
}
body[data-atelier="1"] .eyebrow{
  font-family:var(--data) !important;
  font-size:var(--zs-type-meta) !important;
  font-weight:500 !important;
  letter-spacing:.22em !important;
  text-transform:uppercase !important;
  color:var(--zs-ghost) !important;
}
body[data-atelier="1"] .eyebrow::before{display:none !important}
body[data-atelier="1"] h2.sintro,
body[data-atelier="1"] .sintro{
  font-family:var(--body) !important;
  font-weight:500 !important;
  letter-spacing:-.03em !important;
}
body[data-atelier="1"] .band{
  background:var(--zs-ink) !important;
}
body[data-atelier="1"] .wrap{
  max-width:var(--zs-measure);
  padding-left:var(--zs-rail);
  padding-right:var(--zs-rail);
}
/* /ZS_ATELIER_SYSTEM */