/* Black Flag client stories — printed forms, clear reading, illustrated openings and endings. */
:root{
  --ink:#18181B;
  --body:#3F3F46;
  --paper:#F4F4F5;
  --paper2:#FAFAFA;
  --muted:#606068;
  --border:#D4D4D8;
  --accent:#E04848;
  --accent-ink:#B92D34;
  --blue:#2759D6;
  --yellow:#EAC74D;
  --font-sans:"Montserrat",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --font-mono:"JetBrains Mono","SF Mono",Monaco,Consolas,"Courier New",monospace;
  --gutter:clamp(20px,4.5vw,64px);
  --shell:1280px;
  --measure:670px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3{margin:0;text-wrap:balance;font-weight:800;letter-spacing:-.03em;line-height:1.08}
p{margin:0}
img{display:block;max-width:100%}
a{color:inherit}
a:focus-visible{outline:3px solid var(--accent-ink);outline-offset:5px}

.draftbar{background:var(--accent-ink);color:#fff;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.015em;line-height:1.5;padding:9px var(--gutter);display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.draftbar-tag{font-weight:700;letter-spacing:.12em;text-transform:uppercase;border:1px solid #ffffff70;padding:2px 6px}
.series-top{max-width:var(--shell);margin:auto;padding:24px var(--gutter) 20px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.series-brand{font-size:14px;font-weight:900;letter-spacing:-.035em;text-decoration:none}
.series-return{font-size:12px;line-height:1.4;text-decoration:none;border-bottom:1px solid var(--ink);padding-bottom:2px}
.series-return:hover{color:var(--accent-ink);border-color:var(--accent-ink)}

.hero{background:var(--paper);color:var(--ink);border-bottom:1px solid var(--border);overflow:hidden}
.hero-inner{max-width:var(--shell);margin:auto;padding:30px var(--gutter) 54px;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);align-items:center;gap:clamp(30px,4.5vw,66px)}
.hero-copy{min-width:0}
.kicker{font-family:var(--font-mono);font-size:10px;line-height:1.6;font-weight:500;letter-spacing:.065em;text-transform:uppercase;color:var(--muted);margin-bottom:23px}
.kicker .sep{opacity:.5;padding:0 .35em}
h1{font-size:clamp(40px,4.7vw,68px);font-weight:800;letter-spacing:-.04em;line-height:1.01;max-width:17ch}
.deck{margin-top:26px;font-size:clamp(16px,1.25vw,18px);line-height:1.63;color:var(--body);text-wrap:pretty;max-width:58ch}
.thesis{margin-top:24px;padding-top:18px;border-top:1px solid var(--border);font-family:Georgia,"Times New Roman",serif;font-style:italic;font-size:clamp(20px,1.65vw,23px);line-height:1.35;max-width:42ch}
.hero-art{margin:0;min-width:0;align-self:center}
.hero-art img,.hero-art>.motion-svg{width:100%;height:auto;aspect-ratio:640/620;object-fit:contain}
.hero-art.is-collage img{aspect-ratio:1;object-fit:cover}
.hero-art figcaption{font-size:11.5px;line-height:1.5;color:var(--muted);margin-top:14px;padding-top:11px;border-top:1px solid var(--border);max-width:48ch}

.chapter{max-width:var(--shell);margin:0 auto;padding:64px var(--gutter);display:grid;grid-template-columns:clamp(108px,13vw,160px) minmax(0,1fr);gap:0 clamp(30px,5vw,72px);align-items:start}
.chapter+.chapter{padding-top:20px}
.chapter-eyebrow{grid-column:1;font-size:12px;font-weight:600;line-height:1.5;color:var(--accent-ink);padding-top:7px;max-width:15ch}
.chapter h2{grid-column:2;font-size:clamp(27px,3vw,38px);font-weight:700;letter-spacing:-.032em;line-height:1.13;max-width:26ch}
.prose{grid-column:2;max-width:var(--measure);margin-top:24px}
.prose p{margin-bottom:1.1em;color:var(--body);font-size:clamp(16px,1.3vw,18px);line-height:1.7;text-wrap:pretty}
.prose p:last-child{margin-bottom:0}

.shot{grid-column:2;min-width:0;margin:34px 0 0}
.shot-frame{position:relative;aspect-ratio:16/10;background:#fff;border:1px solid #c8c8cd;overflow:hidden}
.shot-frame img{width:100%;height:100%;object-fit:cover;object-position:top center}
.shot figcaption{margin-top:14px;font-size:12px;line-height:1.6;color:var(--muted);max-width:var(--measure)}
.shot-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;padding:24px;background:#E7E7EB}
.shot-pair .shot-frame{border-color:#bfc1c9}
.product-plate{grid-column:1/-1;margin-top:36px;margin-left:clamp(0px,4vw,50px)}
.product-plate .shot-frame{aspect-ratio:16/9;border:0;outline:1px solid var(--border);outline-offset:-1px;background:#fff}
.product-plate figcaption{margin-left:0}
.product-spread{grid-column:1/-1;margin:36px 0 0}
.product-stage{display:grid;grid-template-columns:minmax(0,1.43fr) minmax(0,.88fr);gap:clamp(14px,2.5vw,32px);padding:clamp(18px,3vw,36px);background:#E4E9F7;align-items:start}
.product-panel{min-width:0}
.product-panel.article{margin-top:76px}
.product-panel .shot-frame{aspect-ratio:1.3;border-color:#c4c9d4}
.product-panel.article .shot-frame{aspect-ratio:.95}
.product-panel-label{font-size:11.5px;font-weight:600;line-height:1.4;margin-top:10px}

.quote{max-width:calc(var(--shell) - 2*var(--gutter));margin:26px auto 0;background:var(--ink);color:var(--paper2);padding:clamp(30px,4.5vw,60px);display:grid;grid-template-columns:54px minmax(0,1fr);column-gap:24px;align-items:start}
.quote::before{content:"“";grid-column:1;grid-row:1;font-family:Georgia,"Times New Roman",serif;font-size:112px;line-height:1;color:#EE6950;transform:translateY(-12px)}
.quote blockquote{grid-column:2;margin:0;min-width:0}
.quote blockquote p{font-family:Georgia,"Times New Roman",serif;font-size:clamp(25px,2.8vw,37px);font-weight:400;letter-spacing:-.022em;line-height:1.24;max-width:44ch;text-wrap:pretty}
.quote figcaption{grid-column:2;margin-top:20px;color:#D4D4D8;font-family:var(--font-sans);font-size:12px;line-height:1.5;letter-spacing:0}

.roles{max-width:var(--shell);margin:0 auto;padding:42px var(--gutter) 20px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(32px,5vw,72px);row-gap:0;align-items:start}
.roles-col{min-width:0}
.roles-h{font-size:12px;line-height:1.5;letter-spacing:0;font-weight:600;color:var(--muted);margin-bottom:18px}
.roles ul{margin:0;padding:0;list-style:none;display:grid;gap:17px}
.roles li{font-size:13px;line-height:1.6;color:var(--body);border-top:1px solid var(--border);padding-top:13px}
.roles li span{display:block;font-weight:700;font-size:13px;color:var(--ink);margin-bottom:3px}
.roles-note{grid-column:1/-1;margin:22px 0 0;font-size:11.5px;line-height:1.6;color:var(--muted);max-width:80ch}

.cta{max-width:var(--shell);margin:auto;padding:25px var(--gutter) 66px}
.cta-k{padding-top:30px;border-top:1px solid var(--ink);font-size:12px;font-weight:700;line-height:1.4;margin-bottom:18px}
.cta h2{font-size:clamp(26px,3.2vw,42px);max-width:30ch;line-height:1.13;letter-spacing:-.032em;font-weight:700}
.btn{display:inline-flex;align-items:center;gap:30px;margin-top:24px;padding:13px 0;text-decoration:none;border-bottom:1px solid var(--ink);font-size:12px;font-weight:600;line-height:1.5;transition:color .18s ease,border-color .18s ease}
.btn:hover{color:var(--accent-ink);border-color:var(--accent-ink)}
.foot{border-top:1px solid var(--border);padding:20px var(--gutter) 30px}
.foot p{max-width:calc(var(--shell) - 2*var(--gutter));margin:auto;font-size:10.5px;line-height:1.65;color:var(--muted)}

@media(max-width:1020px){
  .hero-inner{grid-template-columns:1fr;grid-template-areas:"kicker" "title" "art" "deck" "thesis";gap:0;padding-top:21px;padding-bottom:40px}
  .hero-copy{display:contents}
  .hero .kicker{grid-area:kicker;margin-bottom:20px}
  .hero h1{grid-area:title;max-width:18ch;font-size:clamp(40px,6.5vw,60px)}
  .hero-art{grid-area:art;margin:25px 0 0;max-width:480px;justify-self:center;width:100%}
  .hero .deck{grid-area:deck;margin-top:25px;max-width:64ch}
  .hero .thesis{grid-area:thesis;margin-top:22px;max-width:52ch}
  .chapter{grid-template-columns:112px minmax(0,1fr);gap:0 30px;padding-top:48px;padding-bottom:48px}
  .chapter+.chapter{padding-top:18px}
  .product-plate{margin-left:0}
}
@media(max-width:680px){
  .series-top{padding-top:18px;padding-bottom:12px}
  .series-brand{font-size:13px}
  .series-return{font-size:11px}
  .hero-inner{padding-top:24px}
  .hero h1{font-size:clamp(39px,9.5vw,52px);max-width:17ch}
  .hero-art{margin-top:24px}
  .hero-art figcaption{font-size:11px;margin-top:10px;padding-top:10px}
  .hero .deck{font-size:16px;line-height:1.65}
  .hero .thesis{font-size:21px}
  .chapter{display:block;padding-top:40px;padding-bottom:40px}
  .chapter+.chapter{padding-top:12px}
  .chapter-eyebrow{padding:0;margin-bottom:13px;max-width:none;font-size:11.5px}
  .chapter h2{font-size:29px;max-width:25ch}
  .prose{margin-top:19px}
  .prose p{font-size:16px;line-height:1.68}
  .shot,.product-plate,.product-spread{margin-top:26px}
  .shot-pair{padding:16px;gap:15px}
  .product-stage{padding:16px;gap:14px}
  .product-panel.article{margin-top:42px}
  .product-panel-label{font-size:10px}
  .quote{max-width:calc(100% - 2*var(--gutter));margin-top:16px;padding:27px 23px;grid-template-columns:1fr;gap:0}
  .quote::before{grid-column:1;grid-row:auto;font-size:80px;height:50px;transform:translateY(-9px)}
  .quote blockquote,.quote figcaption{grid-column:1}
  .quote blockquote p{font-size:27px;line-height:1.25;letter-spacing:-.022em}
  .quote figcaption{font-size:11px;margin-top:18px}
  .roles{grid-template-columns:1fr;gap:30px;padding-top:32px;padding-bottom:0}
  .roles-note{margin:0}
  .cta{padding-top:12px;padding-bottom:44px}
  .cta h2{font-size:29px}
}
@media(max-width:520px){
  .shot-pair{grid-template-columns:1fr}
  .product-stage{grid-template-columns:1fr}
  .product-panel.article{margin-top:7px;width:82%;justify-self:end}
  .product-panel .shot-frame{aspect-ratio:1.45}
  .product-panel.article .shot-frame{aspect-ratio:1.25}
}
@media(prefers-reduced-motion:reduce){.btn{transition:none}}
@media print{
  .draftbar{color:var(--ink);background:none;border-bottom:1px solid var(--border)}
  .series-top,.cta .btn{display:none}
  .hero-inner{display:block;padding-top:20px}
  .hero-copy{display:block}
  .hero-art{max-width:330px;margin:20px auto}
  .chapter,.quote,.roles{break-inside:avoid}
  .quote{background:var(--paper2);color:var(--ink);border:1px solid var(--border)}
  .quote figcaption{color:var(--muted)}
}


/* Supporting evidence stays distinct from the conceptual illustrations. */
.evidence-plate{grid-column:1/-1;margin:36px 0 0}
.evidence-matte{padding:clamp(16px,3vw,36px);background:#E7E7EB}
.evidence-plate .shot-frame{aspect-ratio:auto;border-color:#C4C4CB}
.evidence-plate .shot-frame img{height:auto;object-fit:contain}
.evidence-plate figcaption{max-width:76ch}
.evidence-plate figcaption a{display:inline-block;margin-left:.5em;text-underline-offset:3px;white-space:nowrap}
.evidence-channels .evidence-matte{background:#E4E9F7}
.evidence-document .evidence-matte{background:#ECE8DB}
.evidence-document .shot-frame{width:min(100%,430px);margin:auto}
.evidence-portfolio .evidence-matte{background:#DEE7E8}
.evidence-portfolio .shot-frame{aspect-ratio:1.65}
.evidence-portfolio .shot-frame img{height:100%;object-fit:cover;object-position:top}

/* The wider idea becomes the final illustrated spread. */
.story-ending{margin-top:64px;background:var(--ink);color:var(--paper2);overflow:hidden}
.closing-chapter{padding-top:76px;padding-bottom:0}
.closing-chapter .chapter-eyebrow{color:#EE6950}
.closing-chapter h2{font-size:clamp(34px,4vw,52px);max-width:24ch;line-height:1.07;letter-spacing:-.035em}
.closing-chapter .prose p{color:#D4D4D8}
.ending-art{grid-column:1/-1;position:relative;width:100vw;max-width:none;margin:26px 0 0;left:50%;transform:translateX(-50%)}
.ending-art img{width:100%;height:auto;max-width:none}
.story-ending .cta{padding-top:38px;padding-bottom:64px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 50px;align-items:end}
.story-ending .cta-k{grid-column:1/-1;margin-bottom:22px;padding-top:0;border:0;color:#EE6950}
.story-ending .cta h2{font-size:clamp(26px,2.7vw,36px);max-width:29ch}
.story-ending .btn{margin-top:0;border-color:#A1A1AA;white-space:nowrap}
.story-ending .btn:hover{color:#EE6950;border-color:#EE6950}
.story-ending a:focus-visible{outline-color:#EE6950}
.foot{background:var(--ink);border-color:#414145}
.foot p{color:#A1A1AA}
@media(max-width:680px){
  .evidence-plate{margin-top:26px}
  .evidence-plate figcaption a{margin-left:0;display:block;margin-top:7px}
  .story-ending{margin-top:44px}
  .closing-chapter{padding-top:44px;padding-bottom:0}
  .closing-chapter h2{font-size:34px}
  .ending-art{margin-top:24px}
  .story-ending .cta{display:block;padding-top:30px;padding-bottom:42px}
  .story-ending .cta-k{margin-bottom:16px}
  .story-ending .cta h2{font-size:27px}
  .story-ending .btn{margin-top:20px}
}
@media print{
  .story-ending{background:var(--paper2);color:var(--ink)}
  .closing-chapter .prose p{color:var(--body)}
  .ending-art{width:100%;left:auto;transform:none}
  .foot{background:var(--paper2)}
  .foot p{color:var(--muted)}
}

/* Stable reading surface, small local motion and one related closing moment. */
.series-actions{display:flex;align-items:center;gap:24px}
.hero-art>.motion-svg{display:block;max-width:100%}
.motion-toggle{color:var(--muted)}
.motion-toggle:hover{color:var(--accent-ink)}
.motion-toggle:focus-visible{outline-color:var(--accent-ink)}
.btn{transition:color var(--motion-feedback,160ms) var(--motion-ease,cubic-bezier(.22,1,.36,1)),border-color var(--motion-feedback,160ms) var(--motion-ease,cubic-bezier(.22,1,.36,1))}
html[data-motion="off"] .btn{transition:none}
@media(prefers-reduced-motion:reduce){.btn{transition:none!important;transform:none!important}}
@media(max-width:680px){.series-actions{gap:16px}.motion-toggle{font-size:10px}}

/* A visible chapter cue, with the reading copy and evidence left in place. */
.chapter-heading{grid-column:1/-1;display:grid;grid-template-columns:inherit;column-gap:inherit;align-items:start}
.chapter-marker{position:relative;display:block;width:70px;height:8px;margin-top:14px;color:var(--accent-ink)}
.chapter-marker-line{position:absolute;left:0;right:0;top:3px;height:2px;background:currentColor;transform-origin:left center}
.chapter-marker-dot{position:absolute;right:0;top:1px;width:6px;height:6px;border-radius:50%;background:currentColor}
.ending-art>.motion-svg{display:block;width:100%;height:auto}
.story-ending .chapter-marker{color:#EE6950}
@media(max-width:680px){.chapter-heading{display:block}.chapter-eyebrow{display:flex;align-items:center;gap:16px}.chapter-marker{flex:0 0 70px;margin-top:0}}
@media print{.chapter-marker{display:none}.chapter-heading{display:block}}