/* Monogram & Muse — Work index and case pages. Loads after site.css and kit.css.
   A case page sets --accent, --accent-ink, --accent-ink-dark, --accent-deco, --accent-deco-dark on <main class="case">.
   The generator picks each one for contrast, so the brand color only ever carries text where it can be read:
     --accent-ink       text on ivory   (4.5:1 or better, else emerald)
     --accent-ink-dark  text on jade    (4.5:1 or better, else champagne)
     --accent-deco*     rules and ornaments (3:1 or better, else brass) */

.split{display:grid;gap:clamp(24px,4vw,56px);align-items:start}
@media (min-width:900px){.split{grid-template-columns:.9fr 1.1fr}.split .head{margin-bottom:0}}

/* ---------- Concept notice ---------- */
.notice{background:var(--champagne);color:var(--onyx);border-bottom:1px solid var(--brass);--tag:var(--onyx)}
.notice__in{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;padding-block:14px}
.notice__tag{flex:none}
.notice__text{margin:0;font-size:.9375rem;line-height:1.5;max-width:70ch}
.notice__text a{color:var(--onyx);text-decoration-color:var(--onyx)}
.notice :focus-visible{outline-color:var(--onyx)}

/* ---------- Case hero ---------- */
.chero{overflow:clip;padding-block:clamp(40px,6vw,88px)}
.chero__grid{display:grid;gap:clamp(28px,4vw,56px);align-items:center}
@media (min-width:960px){.chero__grid{grid-template-columns:.95fr 1.05fr}}
.chero__copy{min-width:0}
.chero__copy>.tag{margin-bottom:22px}
.chero h1{max-width:14ch;overflow-wrap:anywhere;margin-bottom:.3em}
.chero .lead{max-width:44ch}
.chero__rule{display:block;width:64px;height:2px;margin:0 0 1.6em;background:var(--accent-deco-dark,var(--brass))}
.chero .tag--own{background:var(--champagne);color:var(--jade);border-color:var(--champagne)}
.chero__meta{display:grid;gap:14px 28px;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));margin:0 0 2em}
.chero__meta div{min-width:0}
.chero__meta dt{font:400 .75rem/1.3 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--champagne)}
.chero__meta dd{margin:.15em 0 0;font-size:1rem;line-height:1.4;color:var(--ivory)}
.chero__art{margin:0;min-width:0}
.chero__art .octo{display:block;--c:28px;--surface:var(--emerald);padding:10px;line-height:0}
.chero__art img{width:100%;height:auto}

/* ---------- On-this-page bar ---------- */
.jump{position:sticky;top:var(--hh);z-index:40;background:var(--ivory) var(--grain-dark);border-bottom:1px solid var(--brass)}
.jump .wrap{padding-inline:0}
.jump ul{display:flex;gap:2px;margin:0;padding:0 var(--gutter);list-style:none;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.jump ul::-webkit-scrollbar{display:none}
.jump li{flex:none}
.jump a{display:block;padding:14px 14px;font:500 .75rem/1.2 var(--text);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--onyx);border-bottom:2px solid transparent}
.jump a:hover{border-bottom-color:var(--accent-deco,var(--brass))}
.jump a:focus-visible{outline-offset:-3px}
@media (min-width:1000px){.jump ul{padding-inline:calc(var(--gutter) - 14px)}}
.case section[id]{scroll-margin-top:52px}
.case .section.theme-ivory+.section.theme-ivory{padding-top:0}

/* ---------- Accent: the brand color, only where it passes ---------- */
.case .theme-ivory{--eyebrow:var(--accent-ink,var(--emerald));--focus:var(--accent-ink,var(--emerald))}
.case .theme-ivory .eyebrow::before{background:var(--accent-deco,var(--brass))}
.case .theme-jade{--eyebrow:var(--accent-ink-dark,var(--champagne))}
.case .theme-jade .eyebrow::before{background:var(--accent-deco-dark,var(--brass))}
.case .chero{--eyebrow:var(--accent-ink-dark,var(--champagne))}

/* ---------- Brief ---------- */
.trio{display:grid;gap:clamp(24px,3vw,40px)}
@media (min-width:900px){.trio{grid-template-columns:repeat(3,1fr)}}
.trio article{min-width:0;padding-top:20px;border-top:2px solid var(--accent-deco,var(--brass))}
.trio p:not(.label){color:var(--fg-2)}
.trio .chips{margin:.6em 0 0}
.trio .chips li{border-color:var(--accent-deco,var(--brass))}

/* ---------- Name check ---------- */
.namecheck{max-width:820px;padding:clamp(22px,3.4vw,40px);border:1px solid var(--brass);background:var(--jade) var(--grain-light)}
.namecheck__text{margin:0 0 1.4em;font:400 clamp(1.2rem,1.05rem + .7vw,1.6rem)/1.5 var(--display);color:var(--ivory)}
.namecheck__k{margin:0 0 .7em;font:400 .75rem/1.3 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--champagne)}
.namecheck__list{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 1.4em;padding:0}
.namecheck__list li{padding:.4em .9em;border:1px solid var(--brass);font-size:.9375rem;line-height:1.3;color:var(--ivory)}
.namecheck__note{margin:0;font-size:.875rem;line-height:1.55;color:var(--champagne)}

/* ---------- Logos ---------- */
.logo-grid.logo-grid--case{display:flex;flex-wrap:wrap}
.logo-grid--case .logo-tile{flex:1 1 calc(50% - 14px);min-width:0}
@media (min-width:720px){.logo-grid--case .logo-tile{flex-basis:calc(33.333% - 14px)}}
.logo-grid--case .logo-tile__stage{min-height:170px;padding:22px}
.logo-grid--case .logo-tile__stage img{height:110px}
.logo-grid--case figcaption span{overflow-wrap:anywhere}

/* ---------- Palette ---------- */
.swatches--case{grid-template-columns:repeat(2,1fr)}
.swatches--case>li{min-width:0}
.swatches--case>li:last-child:nth-child(odd){grid-column:1/-1}
@media (min-width:640px){.swatches--case{grid-template-columns:repeat(3,1fr)}.swatches--case>li:last-child:nth-child(odd){grid-column:auto}}
@media (min-width:900px){.swatches--case{grid-template-columns:repeat(var(--cols,4),1fr)}}
.swatches--case .swatch__chip{height:104px}
.swatches--case .copy{white-space:normal;overflow-wrap:anywhere}
.swatches--case .swatch__role{min-height:2.8em}
.contrast__pair{display:block;margin-top:.15em;font-size:.8125rem;color:var(--ink-2);letter-spacing:.02em}

/* ---------- Type specimen, in the brand's own fonts ---------- */
.case-spec .specimen__face--display{background:var(--sp-dark);color:var(--sp-on-dark)}
.case-spec .specimen__face--text{background:var(--sp-light);color:var(--sp-on-light)}
.case-spec .specimen__label,.case-spec .specimen__glyphs,.case-spec .specimen__cap{color:inherit}
.case-spec .specimen__label{font-family:var(--text);font-weight:500}
.case-spec .specimen__big{line-height:1.08;overflow-wrap:anywhere}
.case-spec .specimen__glyphs{font-size:1.05rem;line-height:1.6;overflow-wrap:anywhere}
.specimen__para{margin:.45em 0 .8em;overflow-wrap:anywhere}
.specimen__para--small{font-size:1rem;line-height:1.6}
.specimen__glyphs--text{margin-top:1.2em}

/* ---------- Voice ---------- */
.voice-cols{display:grid;gap:clamp(20px,4vw,56px);margin-bottom:clamp(28px,4vw,48px)}
@media (min-width:720px){.voice-cols{grid-template-columns:1fr 1fr}}
.voice-cols .label{margin:0 0 1em}
.voice-cols .dlist{margin:0}
.voice-cols .dlist li{margin-bottom:.9em}
.dlist--avoid li::before{background:var(--clay)}
.dlist--avoid s{text-decoration-color:var(--clay);text-decoration-thickness:1px;color:var(--champagne)}
.sample{margin:0;padding:clamp(20px,3vw,32px) clamp(20px,3vw,36px);border-left:2px solid var(--brass);background:var(--jade) var(--grain-light)}
.sample .label{margin:0 0 .6em;color:var(--champagne)}
.sample p:last-child{margin:0;font:400 clamp(1.3rem,1.1rem + 1vw,1.9rem)/1.4 var(--display);color:var(--ivory)}

/* ---------- Mockups ---------- */
.mock-grid{display:grid;gap:clamp(14px,2vw,26px);align-items:start}
@media (min-width:720px){.mock-grid{grid-template-columns:repeat(2,1fr)}.mock-grid--odd .shot:first-child{grid-column:1/-1}}
.mock-grid .shot{min-width:0}
.mock-grid .shot figcaption{margin-top:10px;font-size:.875rem}
.shot--fit .zoom{aspect-ratio:8/5}
.shot--fit .zoom img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}

/* ---------- Deliverables ---------- */
.deliver{display:grid;gap:clamp(28px,4vw,56px);align-items:start}
@media (min-width:900px){.deliver{grid-template-columns:1.15fr .85fr}}
.deliver__list{margin:0;columns:1;column-gap:40px}
@media (min-width:640px){.deliver__list{columns:2}}
@media (min-width:900px){.deliver__list{columns:1}}
@media (min-width:1080px){.deliver__list{columns:2}}
.deliver__list li{break-inside:avoid}
.deliver--solo{grid-template-columns:1fr}
.deliver--solo .deliver__list{columns:1;max-width:none}
@media (min-width:640px){.deliver--solo .deliver__list{columns:2}}
@media (min-width:1000px){.deliver--solo .deliver__list{columns:3}}
.gdl{--c:26px;display:grid;gap:20px;padding:clamp(24px,3vw,38px)}
.gdl h3{margin:.2em 0 .4em}
.gdl .btn{justify-self:start;max-width:100%;text-align:center}

/* ---------- Concept footnote ---------- */
.footnote-sec{padding-block:clamp(36px,5vw,64px)}
.footnote{padding:clamp(20px,3vw,32px);border:1px dashed var(--cognac);--tag:var(--cognac)}
.footnote h2{margin:.7em 0 .4em;font-size:clamp(1.35rem,1.2rem + .6vw,1.75rem)}
.footnote p:last-child{margin-bottom:0;color:var(--ink-2)}