/* ============================================================
   LMG — Zelniker Dorfman case study, "Atelier" treatment
   These rules were inlined in the static page's <head> rather than shipped
   as a stylesheet (the .at-* masthead styles live nowhere else). Carried over
   verbatim, in their original order: the case-specific additions from the
   first-paint block first, then the page's own <style> block. Loaded after
   cases/zd/case.css and cases/zd/moments.css, exactly as the static page
   cascaded them.
   ============================================================ */

/* Match the mountain contact section on the agency page. */
.case-page .zd-contact{padding-bottom:0}
.case-more-work{display:flex;justify-content:center;padding:clamp(56px,8vw,110px) 24px;background:#f6f3ec}
.case-more-work a{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:16px 30px;border:1px solid #151f35;background:#151f35;color:#fff;font:600 12px/1.2 var(--lmg-body,Arial,sans-serif);letter-spacing:.15em;text-transform:uppercase;text-decoration:none;transition:background-color .25s,border-color .25s,color .25s}
.case-more-work a:hover,.case-more-work a:focus-visible{border-color:#c19c4b;background:#c19c4b;color:#151f35}
.case-page .zd-contact .contact-type{z-index:4}
.case-page .zd-contact .contact-landscape h2{white-space:normal;max-width:1200px;margin:20px auto 30px;padding-inline:24px;font-size:clamp(46px,6.4vw,100px);line-height:1.05;text-wrap:balance}
.case-page .zd-contact .contact-type p{font-size:16px;line-height:1.85}
.case-page .zd-contact .contact-type .contact-eyebrow{font-size:14px;line-height:1.5;color:var(--lmg-gold);letter-spacing:.19em}
.case-page .zd-contact .contact-lede{color:#003135}
@media(max-width:767px){
  .case-page .zd-contact .contact-landscape{height:530px;width:100%}
  .case-page .zd-contact .contact-type{padding-inline:24px;width:100%}
  .case-page .zd-contact .contact-type br{display:none}
}

/* ===== 06 · ATELIER — the print-room treatment ===== */
body.case-page{background:#f6f3ec;color:#151f35}
.m{--m-bg:#f6f3ec;--m-ink:#151f35;--m-body:#4a5a72;--m-accent:#b07c33;--m-accent-2:#c19c4b;
   --m-hair:rgba(21,31,53,.15);--m-panel:rgba(21,31,53,.035)}

/* All narrative sections use the website section's type scale and copy width. */
.case-page .m-h{font-size:clamp(28px,4.2vw,68px);line-height:1.04}
.case-page .m-p{font:300 clamp(15px,1.1vw,17.5px)/1.78 var(--sans);max-width:54ch;margin-top:18px}
@media(min-width:1040px){
  .case-page .m-mark__stage{grid-template-columns:minmax(0,.66fr) minmax(0,1.34fr);gap:clamp(20px,3vw,60px)}
  .case-page .m-mark__copy{position:static;grid-column:1;grid-row:1;width:100%;max-width:none}
  .case-page .m-mark__art{grid-column:2;grid-row:1}
}
@media(min-width:901px) and (max-width:1039px){
  .case-page .m-mark__copy{max-width:42ch;bottom:6vh}
  .case-page .m-mark__art{align-self:start;width:min(44vw,380px)}
}

/* paper texture + plate rules */
.paper-tex{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(21,31,53,.055) 1px,transparent 1.2px);background-size:4px 4px}
main{position:relative;z-index:1}

/* masthead */
.at-head{padding-top:clamp(116px,11vw,158px);padding-bottom:clamp(40px,5vw,80px)}
.at-rule{height:1px;background:rgba(21,31,53,.18);margin:clamp(26px,3vw,46px) 0}
.at-title{font-family:var(--serif);font-weight:300;line-height:.95;letter-spacing:-.018em;
  font-size:clamp(52px,6.7vw,112px);max-width:9ch;margin:0;color:#151f35}
.at-title em{font-style:italic;color:#b07c33}
.at-row{display:grid;gap:clamp(32px,5vw,80px);align-items:center}
.at-copy{min-width:0}
.at-copy .lede{color:#4a5a72;margin:clamp(26px,3vw,44px) 0 0;max-width:48ch}
@media(min-width:900px){.at-row{grid-template-columns:repeat(2,minmax(0,1fr));align-items:center}}
.at-plate{width:100%;aspect-ratio:4/3;background:#fff;border:1px solid rgba(21,31,53,.12);padding:clamp(22px,2.4vw,38px);
  display:grid;place-items:center;box-shadow:0 34px 70px -52px rgba(13,20,36,.65)}
.at-plate img{display:block;width:min(80%,420px);height:auto;object-fit:contain}
.at-meta{display:grid;gap:0;margin-top:clamp(30px,3.6vw,54px);border-top:1px solid rgba(21,31,53,.18)}
.at-meta div{display:grid;gap:4px 28px;padding:16px 0;border-bottom:1px solid rgba(21,31,53,.14)}
@media(min-width:720px){.at-meta div{grid-template-columns:190px 1fr;align-items:baseline}}
.at-meta dt{font:700 9.5px/1.6 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:#b07c33;margin:0}
.at-meta dd{margin:0;font:400 14.5px/1.65 var(--sans);color:#33405c}

/* a paper-lined section header used between moments */
.at-sec{padding-block:clamp(56px,7vw,110px)}
.at-kicker{display:flex;align-items:baseline;gap:18px;border-bottom:1px solid rgba(21,31,53,.18);
  padding-bottom:14px;margin-bottom:clamp(26px,3vw,48px)}
.at-kicker b{font:700 9.5px/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:#b07c33}
.at-kicker span{font:400 11px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:#8a94a6;margin-left:auto}

/* reveal skin — the browser sits on paper like a pasted proof */
.at-reveal .mk-browser{border-radius:4px;
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 40px 80px -46px rgba(13,20,36,.6)}
.at-reveal .placard-l{background:#fff;border:1px solid rgba(21,31,53,.12);padding:clamp(20px,2.2vw,32px)}
.at-reveal .placard-l dl{margin:0;display:grid;gap:14px}
.at-reveal .placard-l dt{font:700 9px/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:#b07c33}
.at-reveal .placard-l dd{margin:4px 0 0;font:400 13.5px/1.6 var(--sans);color:#33405c}

/* palette as physical swatch cards */
.at-pal{display:grid;gap:clamp(24px,3.4vw,64px)}
@media(min-width:1000px){.at-pal{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center}}

/* wall on paper */
.at-wall{--m-body:#8a94a6}
.at-wall figure{background:#fff;padding:10px;border:1px solid rgba(21,31,53,.1)}
.at-wall figcaption{padding:0 4px 4px}

/* metrics on paper */
.at-metrics .metric .num{color:#151f35}
.at-metrics .metric .num small{color:#b07c33}
.at-metrics .metric .lbl{color:#8a94a6}
