/* ZeL Editorial Design System · shared layer · 2026-10-04
   One skin for two architectures:
     · Product Page (collections/*, body.zds.zds-product) keeps its commercial architecture —
       glance → idea → route → worlds → stays → curator → aurora → why → investment → questions → begin;
     · Case Study (work/*, body.zds.zds-case) keeps its editorial architecture —
       brief → idea → chapters → design logic → close → enquiry.
   What they share is defined here: typography, spacing, colour, navigation, buttons, image treatment,
   chapter language, CTA styling, footer, trust treatment and responsive behaviour.
   Each page keeps its own component vocabulary (.fx-* on product pages, .c8/.cs/.sh on case studies);
   this file maps both onto the same tokens. Loaded last. Spec: project doc zel-editorial-design-system. */

:root{
  /* colour (locked Editorial direction, 2026-10-02) */
  --zds-paper:#FAF9F6; --zds-panel:#F4F2EE; --zds-ink:#3A3A3A; --zds-ink-2:#55524C; --zds-muted:#64615A;
  --zds-line:#D9D4CA; --zds-zel:#4BA8D1; --zds-zel-text:#26769C; --zds-gold:#C9A96B; --zds-night:#0F2A44;
  /* type */
  --zds-serif:"Lora","Noto Serif SC",Georgia,serif; --zds-sans:"Jost","Noto Sans SC",system-ui,sans-serif;
  --zds-num:clamp(44px,4.6vw,64px);      /* chapter number */
  --zds-h2:clamp(30px,3.2vw,46px);       /* chapter title */
  --zds-lede:clamp(18px,1.5vw,21px);     /* chapter lede, serif */
  --zds-h3:clamp(24px,2.1vw,30px);
  --zds-body:18px; --zds-body-lh:1.8;    /* running text: one size, one rhythm, everywhere */
  --zds-label:15px;                      /* the smallest type on any page */
  --zds-quote:clamp(19px,1.6vw,22px);
  /* space */
  --zds-sec:clamp(72px,8vw,120px);       /* section top / bottom */
  --zds-head-gap:clamp(28px,3.4vw,48px); /* chapter head → content */
  --zds-nav:84px; --zds-nav-m:72px;
}

/* ---------- base ---------- */
body.zds{background:var(--zds-paper);color:var(--zds-ink)}

/* ---------- navigation: one header, two link sets ----------
   Case study: the site header (.hdr, editorial-shell.css). Product page: the page header (.fx-nav) keeps its
   in-page chapters (commercial), but wears the same bar: same height, mark, type, button and white solid state. */
body.zds .fx-nav{min-height:var(--zds-nav);padding-top:0!important;padding-bottom:0!important;align-items:center}
body.zds .fx-nav.solid{background:#fff!important;backdrop-filter:none;box-shadow:0 1px 0 var(--zds-line);border-color:transparent}
body.zds .fx-mark b{font:500 22px/1 var(--zds-serif)!important;letter-spacing:.01em;color:var(--zds-zel)!important}
body.zds .fx-mark b i{color:#fff;font-weight:500}
body.zds .fx-nav.solid .fx-mark b i{color:var(--zds-night)}
body.zds .fx-mark span{display:none!important}
body.zds .fx-nav-l a{font:500 16px/1 var(--zds-sans)!important;letter-spacing:.14em!important;text-transform:uppercase;padding:8px 0;color:#fff!important}
body.zds .fx-nav.solid .fx-nav-l a{color:var(--zds-night)!important}
body.zds .fx-nav-l a:hover{border-bottom-color:currentColor!important}
body.zds .fx-lang{font:500 16px/1 var(--zds-sans);letter-spacing:.12em}
body.zds .fx-nav .fx-btn{min-height:48px;padding:0 24px}
body.zds .fx-nav:not(.solid) .fx-btn.gold{background:transparent!important;border-color:rgba(255,255,255,.85)!important;color:#fff!important}
body.zds .fx-nav:not(.solid) .fx-btn.gold:hover{background:var(--zds-zel)!important;border-color:var(--zds-zel)!important}
body.zds.zh .fx-nav-l a{letter-spacing:.1em!important}
@media(min-width:1081px){
  body.zds .fx-nav-l,body.zds .fx-lang{display:flex!important}
  body.zds .fx-nav .fx-btn{display:inline-flex!important}
  body.zds .fx-burger{display:none!important}
}
@media(max-width:1080px){
  body.zds .fx-nav{min-height:var(--zds-nav-m)}
  body.zds .fx-nav-l,body.zds .fx-lang{display:none!important}
  body.zds .fx-burger{display:flex!important}
  body.zds .fx-burger span{background:currentColor}
  body.zds .fx-nav{color:#fff} body.zds .fx-nav.solid{color:var(--zds-night)}
}
@media(max-width:480px){body.zds .fx-nav .fx-btn{display:none!important}}

/* ---------- chapter language: number · title · lede ---------- */
body.zds .fx-h-n,body.zds .sh-n{font:400 var(--zds-num)/1 var(--zds-serif)!important;letter-spacing:0!important;color:var(--zds-zel)!important;text-transform:none}
body.zds .fx-h-n:after{display:none!important}
body.zds .fx-h h2,body.zds .sh h2{font:400 var(--zds-h2)/1.15 var(--zds-serif)!important;letter-spacing:0!important;text-transform:none!important}
body.zds .fx-h-l,body.zds .sh-l{font:400 var(--zds-lede)/1.6 var(--zds-serif)!important;letter-spacing:0!important;text-transform:none!important;color:var(--zds-ink-2)}
body.zds .fx-band .fx-h-l,body.zds .fx-aurora .fx-h-l,body.zds .fx-begin .fx-h-l,body.zds .fx-jband .fx-h-l,body.zds .c8-dk .sh-l{color:rgba(255,255,255,.82)!important}
body.zds .fx-h-r{font:400 var(--zds-body)/var(--zds-body-lh) var(--zds-sans)!important;letter-spacing:0!important;text-transform:none!important;color:var(--zds-ink)}
body.zds .fx-h{margin-bottom:var(--zds-head-gap)}

/* ---------- running text: one size and one rhythm ---------- */
body.zds .dd-p,body.zds .fx-liv-p,body.zds .dbd4 .xt p,body.zds .dbd8 .dm p.dm-p,body.zds .fx-cur-b p,
body.zds .fx-q-a p,body.zds .fx-begin p.b,body.zds .fx-pay-p,body.zds .fx-inv-note p,
body.zds .cs-p,body.zds .c8-brief p,body.zds .c8-lg p,body.zds .c8 .lead{
  font-size:var(--zds-body)!important;line-height:var(--zds-body-lh)!important;font-weight:400!important}
body.zds .dd-p,body.zds .fx-liv-p,body.zds .dbd4 .xt p,body.zds .dbd8 .dm p.dm-p,body.zds .fx-cur-b p,body.zds .fx-q-a p,
body.zds .cs-p,body.zds .c8-brief p,body.zds .c8-lg p{color:var(--zds-ink)!important}

/* ---------- labels: 15px, never smaller; one key label per block in ZeL Blue text tone ---------- */
body.zds .rs-k,body.zds .fx-liv-eb,body.zds .fx-liv-me,body.zds .dbd .rs-dec span,body.zds .cs-dd small,
body.zds .rt8-k,body.zds .fx-when h3,body.zds .fx-meals h3,body.zds .fx-inv-l~* .fx-calc-lbl{font-size:var(--zds-label)!important}
body.zds .dd-k,body.zds .dbd8 .dm-k,body.zds .cs-side small{font:500 var(--zds-label)/1.4 var(--zds-sans)!important;letter-spacing:.08em!important;color:var(--zds-zel-text)!important}
body.zds:not(.zh) .dd-k,body.zds:not(.zh) .dbd8 .dm-k,body.zds:not(.zh) .cs-side small{letter-spacing:.12em!important;text-transform:uppercase}

/* ---------- design decision: the same quote on both templates ---------- */
body.zds .dbd .rs-dec,body.zds .cs-dd{border-left:2px solid var(--zds-gold)!important;padding:2px 0 2px 18px!important;background:none!important}
body.zds .dbd .rs-dec,body.zds .cs-dd p{font:400 var(--zds-quote)/1.6 var(--zds-serif)!important;color:var(--zds-ink)!important}
body.zds .dbd .rs-dec span,body.zds .cs-dd small{display:block;margin-bottom:6px;font:500 var(--zds-label)/1.3 var(--zds-sans)!important;letter-spacing:.08em!important;color:var(--zds-muted)!important;text-transform:none!important}

/* ---------- buttons: one system ---------- */
body.zds .fx-btn,body.zds .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 30px!important;
  font:500 16px/1 var(--zds-sans)!important;letter-spacing:.14em!important;text-transform:uppercase;border-radius:0!important;border-width:1px;transition:background .25s,border-color .25s,color .25s}
body.zds.zh .fx-btn,body.zds.zh .btn{letter-spacing:.06em!important}
body.zds .fx-btn.gold,body.zds .btn.pri{background:var(--zds-zel)!important;border-color:var(--zds-zel)!important;color:#fff!important}
body.zds .fx-btn.gold:hover,body.zds .btn.pri:hover{background:var(--zds-night)!important;border-color:var(--zds-night)!important}
body.zds .fx-nav .fx-btn{min-height:48px;padding:0 24px!important}
@media(max-width:480px){body.zds .fx-btn,body.zds .btn{padding:0 18px!important;letter-spacing:.08em!important}}

/* ---------- image treatment: square corners, cover, captions in muted 15px ---------- */
body.zds section img{border-radius:0}
body.zds figcaption,body.zds .dbd4 .xc span,body.zds .cs-pair figcaption,body.zds .cap{font:400 15px/1.5 var(--zds-sans);color:var(--zds-muted)}

/* ---------- spacing ---------- */
body.zds .fx-s,body.zds section.c8{padding-top:var(--zds-sec)!important;padding-bottom:var(--zds-sec)!important}

/* ---------- trust: one strip above the footer, one line in the footer ---------- */
body.zds .trust{background:var(--zds-paper);border-top:1px solid var(--zds-line);padding:26px 0!important;text-align:center}
body.zds .trust p{font:400 16px/1.6 var(--zds-sans)!important;color:var(--zds-ink-2)!important;margin:0}
body.zds .trust p b{color:var(--zds-ink)!important;font-weight:500}

/* ---------- footer: Deep Navy, the site footer on every template (footer.ef, editorial-shell.css) ---------- */
body.zds footer.ef{background:var(--zds-night)!important}
body.zds footer.ef .f-brand b{font:500 26px/1.2 var(--zds-serif)!important;color:#fff!important}
body.zds footer.ef .f-brand b span{display:inline!important;font:inherit!important;letter-spacing:inherit!important;text-transform:none!important;color:var(--zds-zel)!important;margin:0!important}

/* ---------- WhatsApp: one float ---------- */
body.zds .wa,body.zds .zwa{right:22px;bottom:22px;width:58px;height:58px}
@media(max-width:600px){body.zds .wa,body.zds .zwa{right:16px;bottom:16px;width:54px;height:54px}}

/* ---------- responsive: one set of breakpoints (1080 navigation · 900 two-column → one · 480 small phones) ---------- */
@media(max-width:900px){body.zds{--zds-body:17.5px}}

@media print{
  body.zds .fx-nav,body.zds .wa,body.zds .zwa{display:none!important}
  body.zds footer.ef{background:none!important;color:#000}
}

/* secondary buttons: outline — white on photographs, ink on paper (one primary per group) */
body.zds .fx-btn.ghost,body.zds .fx-btn:not(.gold):not(.wa){background:transparent!important;color:#fff!important;border:1px solid rgba(255,255,255,.85)!important}
body.zds .fx-s:not(.dk) .fx-btn.ghost,body.zds .fx-inv .fx-btn.ghost{color:var(--zds-ink)!important;border-color:var(--zds-ink)!important}
body.zds .fx-btn.ghost:hover,body.zds .fx-btn:not(.gold):not(.wa):hover{background:#fff!important;color:var(--zds-night)!important}
body.zds .btn.line{background:transparent!important;color:var(--zds-ink)!important;border:1px solid var(--zds-ink)!important}
/* product hero: "see the journey" scrolls the page, so it is the secondary; the enquiry stays primary */
body.zds .fx-cover-cta a[href^="#"]{background:transparent!important;border-color:rgba(255,255,255,.85)!important;color:#fff!important}
body.zds .fx-cover-cta a[href^="#"]:hover{background:#fff!important;color:var(--zds-night)!important}