/* playbook/playbook.css — shared long-form prose layer for the AI PM Playbook issues.
   Reuses lab2/styles.css tokens and classes (.page-head, .article, .article-main, blockquote,
   .eyebrow, .btn, .card-link) as the base; this file only adds what that sheet doesn't have yet:
   figure/figcaption treatment, inline code, tight "beat" paragraph rhythm, and the landing-page
   issue-card grid. Referenced by all four playbook pages (index + 3 issues), never duplicated. */

.playbook-body { max-width: var(--measure); margin: 0 auto; }

.playbook-body p.beat { margin-bottom: 6px; }
.playbook-body p.beat + p:not(.beat) { margin-top: 24px; }

.playbook-body code {
  font-family: var(--mono); font-size: 0.85em;
  background: var(--paper-card); border: 1px solid var(--hairline);
  border-radius: 4px; padding: 1px 6px; color: var(--ink);
}

.playbook-body figure { margin: 40px 0; }
.playbook-body figure .frame {
  border: 2px solid var(--ink); border-radius: 8px; overflow: hidden;
  background: var(--paper-card); box-shadow: 4px 4px 0 var(--ink);
}
.playbook-body figure svg { display: block; width: 100%; height: auto; }
.playbook-body figcaption {
  margin-top: 10px; text-align: center;
  font-family: var(--mono); font-size: calc(12px * var(--s));
  letter-spacing: 0.04em; color: var(--muted); line-height: 1.5;
}

/* essay figures rendered into .article-main (outside the .playbook-body scope) */
.article-main figure { margin: 2rem 0; max-width: 100%; }
.article-main figure .frame {
  border: 1px solid var(--hairline); padding: 1rem;
  background: var(--paper); overflow-x: auto;
}
.article-main figure .frame svg { display: block; width: 100%; height: auto; max-width: 100%; }
.article-main figcaption {
  font-family: var(--mono); font-size: 0.85rem;
  color: var(--muted); margin-top: 0.5rem; line-height: 1.4;
}

.playbook-meta {
  font-family: var(--mono); font-size: calc(12px * var(--s));
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
  margin: 0 0 8px;
}

/* layers table (case pages, "How it was built"): one hairline-ruled row per pipeline layer.
   Scrolls inside its own wrapper on narrow screens; the page never scrolls sideways. */
.playbook-body .table-scroll { overflow-x: auto; margin: 32px 0; -webkit-overflow-scrolling: touch; }
.playbook-body .table-scroll:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
.playbook-body table.layers {
  width: 100%; min-width: 600px; border-collapse: collapse;
  font-size: calc(15px * var(--s)); line-height: 1.45; color: var(--ink);
}
.playbook-body .table-hint { display: none; margin: -24px 0 32px; }
@media (max-width: 660px) { .playbook-body .table-hint { display: block; } }
.playbook-body .layers th {
  text-align: left; vertical-align: bottom; font-weight: 600;
  font-family: var(--mono); font-size: calc(11px * var(--s));
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
  padding: 0 14px 10px 0; border-bottom: 2px solid var(--ink);
}
.playbook-body .layers td {
  vertical-align: top; padding: 12px 14px 12px 0; border-bottom: 1px solid var(--hairline);
}
.playbook-body .layers th:last-child, .playbook-body .layers td:last-child { padding-right: 0; }
.playbook-body .layers .num {
  font-family: var(--mono); font-size: calc(12px * var(--s)); color: var(--muted);
  width: 2.4em; white-space: nowrap; padding-top: 14px;
}
.playbook-body .layers td.layer { min-width: 240px; }
.playbook-body .layers td.layer strong { display: block; font-weight: 700; margin-bottom: 2px; }
.playbook-body .layers td.layer span { display: block; color: var(--muted); font-size: calc(14px * var(--s)); }
.playbook-body .layers td strong { font-weight: 700; }
.playbook-body .visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.playbook-body details.tech-detail { margin: 32px 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); padding: 14px 0; }
.playbook-body details.tech-detail summary { cursor: pointer; list-style: none; font-family: var(--mono); font-size: calc(12px * var(--s)); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); display: flex; align-items: center; gap: 10px; }
.playbook-body details.tech-detail summary::-webkit-details-marker { display: none; }
.playbook-body details.tech-detail summary::before { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(-45deg); transition: transform .15s; flex: none; }
.playbook-body details.tech-detail[open] summary::before { transform: rotate(45deg); }
.playbook-body details.tech-detail summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
.playbook-body details.tech-detail > p { margin-top: 18px; }
@media (prefers-reduced-motion: reduce) { .playbook-body details.tech-detail summary::before { transition: none; } }

/* landing page: three issue cards, built on .card-link */
.issue-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 36px; }
.issue-card .issue-num {
  font-family: var(--mono); font-size: calc(12px * var(--s)); font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue); margin: 0 0 10px;
}

/* decorative sweep/pulse animations carried over from the three issue mockups, each guarded */
.sweepline { animation: sweep 9s linear infinite; }
@keyframes sweep { from { transform: translateX(0); } to { transform: translateX(624px); } }

.ratchet-riser { animation: riser-pulse 6s ease-in-out infinite; }
@keyframes riser-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

.stall-pulse { animation: stall 2.4s ease-in-out infinite; }
@keyframes stall { 0%, 100% { opacity: .35; } 50% { opacity: .9; } }

@media (prefers-reduced-motion: reduce) {
  .sweepline { display: none; animation: none; }
  .ratchet-riser { animation: none; }
  .stall-pulse { animation: none; opacity: .7; }
}

@media (max-width: 900px) {
  .issue-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ===== /writing house style (editorial-workbench, decision #784). Composition reference:
   design/styles/editorial-workbench/writing-post.html. Everything below is scoped to
   main.wb / body.wb-post because this sheet also serves /work. ===== */

/* faces the site does not already self-host in lab2/styles.css */
@font-face { font-family: "IBM Plex Mono"; src: url("/lab/assets/fonts/ibm-plex-mono-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/lab/assets/fonts/inter-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/lab/assets/fonts/inter-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/lab/assets/fonts/inter-latin-700-normal.woff2") format("woff2"); font-weight: 700 800; font-style: normal; font-display: swap; }

body.wb-post {
  --shell: 1180px;            /* header, page, and footer share one width on /writing */
  --red-text: #CF2D17;        /* red when it must be text on paper: 4.6:1 */
}

.wb { width: calc(100% - 64px); max-width: var(--shell); margin: 0 auto; padding: 8px 0 72px; }
.wb h1, .wb h2, .wb h3 { margin: 0; font-family: var(--display); font-weight: 900; text-transform: uppercase; color: var(--ink); }
.wb .kicker, .wb .section-no, .wb .figure-label, .wb .note-label, .wb .status, .wb .chip, .wb .board-note, .wb .colophon {
  font-family: var(--mono); text-transform: uppercase; letter-spacing: .075em;
}

/* hero: typography left, aria-hidden mockup plate right */
.wb .hero {
  min-height: 700px; display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(390px, .72fr);
  gap: 74px; align-items: center; padding: 64px 0 86px; border-bottom: 2px solid var(--ink);
}
.wb .hero.solo { grid-template-columns: minmax(0, 1fr); }
.wb .hero > * { min-width: 0; }
.wb .kicker { margin: 0 0 22px; color: var(--blue); font-size: 11px; font-weight: 700; }
.wb h1 { max-width: 760px; font-size: clamp(4.6rem, 9vw, 8.2rem); line-height: .9; letter-spacing: -.01em; }
.wb h1 .accent, .wb h1 .fails { position: relative; color: var(--blue); white-space: nowrap; }
.wb h1 .accent::after, .wb h1 .fails::after {
  content: ""; position: absolute; left: 2%; right: -2%; bottom: .02em; height: .09em;
  background: var(--red); transform: rotate(-1.5deg); transform-origin: left;
}
.wb .hero-deck { max-width: 690px; margin: 34px 0 0; font-size: clamp(1.12rem, 1.8vw, 1.38rem); line-height: 1.5; color: var(--ink); }
.wb .hero-deck strong { font-weight: 800; color: var(--ink); }
.wb .hero-side { align-self: stretch; display: grid; align-content: center; }
.wb .figure-label { display: flex; justify-content: space-between; padding: 11px 13px; border-bottom: 2px solid var(--ink); background: var(--paper); font-size: 9px; font-weight: 700; color: var(--ink); }

/* story: index | copy | margin note */
.wb .story { display: grid; grid-template-columns: 170px minmax(0, 680px) 1fr; gap: 48px; padding: 110px 0; border-bottom: 2px solid var(--ink); }
.wb .section-no { color: var(--blue); font-size: 10px; font-weight: 700; padding-top: 8px; }
.wb .copy { min-width: 0; }
.wb .copy h2 { font-size: clamp(3.2rem, 5.4vw, 5.6rem); line-height: .92; letter-spacing: -.01em; }
.wb .copy h3 { margin: 48px 0 16px; font-size: 2.3rem; line-height: .95; font-weight: 800; }
.wb .copy p { margin: 23px 0; font-size: 17px; line-height: 1.77; color: var(--ink); }
.wb .copy h2 + p { font-size: 20px; line-height: 1.62; }
.wb .copy strong { font-weight: 800; color: var(--ink); }
.wb .copy em { font-family: var(--mono); font-style: normal; font-size: .86em; }
.wb .pullquote {
  margin: 52px -110px 48px -36px; padding: 26px 30px 28px 36px; border: 2px solid var(--ink); background: var(--yellow);
  box-shadow: 9px 9px 0 var(--ink); transform: rotate(-.35deg);
  font: 800 clamp(2.1rem, 4vw, 4rem)/.94 var(--display); text-transform: uppercase; color: var(--ink);
}
.wb .margin-note { align-self: start; position: sticky; top: calc(var(--nav-h) + env(safe-area-inset-top, 0px) + 24px); padding: 16px; border: 1.5px solid var(--ink); background: rgba(255,253,247,.72); transform: rotate(1deg); }
.wb .note-label { color: var(--red-text); font-size: 8px; font-weight: 700; }
.wb .margin-note p { margin: 12px 0 0; font-size: 11px; line-height: 1.55; color: var(--ink); }

/* inline figures inside the copy column (bleed right like the pullquote) */
.wb .copy figure { margin: 44px -110px 44px 0; }
.wb .copy figure .frame { border: 2px solid var(--ink); background: var(--white); box-shadow: 9px 9px 0 var(--ink); overflow: hidden; }
.wb .copy figure svg { display: block; width: 100%; height: auto; }
.wb .copy figcaption { margin: 12px 0 0; font: 700 9px/1.5 var(--mono); letter-spacing: .075em; text-transform: uppercase; color: var(--muted); }

/* copy rules the ten posts need beyond the reference post's own markup */
.wb .copy ul, .wb .copy ol { margin: 23px 0; padding-left: 26px; font-size: 17px; line-height: 1.77; color: var(--ink); }
.wb .copy li { margin: 0 0 10px; }
.wb .copy li::marker { color: var(--blue); font-family: var(--mono); }
.wb .copy a { color: var(--blue); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.wb .copy a:hover { color: var(--red-text); }
.wb .copy code { font-family: var(--mono); font-size: .86em; padding: 1px 6px; border: 1px solid var(--ink); background: var(--white); }
.wb .copy p.beat { margin: 6px 0; }
.wb .copy p.beat + p:not(.beat) { margin-top: 23px; }
.wb .copy figure img { display: block; width: 100%; height: auto; }
.wb .ending-copy figure { margin: 44px 0; }
.wb .ending-copy figure .frame { border: 2px solid var(--ink); background: var(--white); box-shadow: 9px 9px 0 var(--ink); overflow: hidden; }
.wb .ending-copy figure svg, .wb .ending-copy figure img { display: block; width: 100%; height: auto; }
.wb .ending-copy figcaption { margin: 12px 0 0; font: 700 9px/1.5 var(--mono); letter-spacing: .075em; text-transform: uppercase; color: var(--muted); }
.wb .copy .callout { margin: 32px 0; padding: 18px 20px; border: 2px solid var(--ink); background: var(--white); box-shadow: 9px 9px 0 var(--ink); font: 400 13px/1.7 var(--mono); letter-spacing: .02em; }

/* visual break: set piece with an index / headline / deck head */
.wb .visual-break { padding: 92px 0 104px; border-bottom: 2px solid var(--ink); }
.wb .visual-head { display: grid; grid-template-columns: 170px 1fr 340px; gap: 48px; align-items: end; margin-bottom: 42px; }
.wb .visual-head h2 { font-size: clamp(3.2rem, 5.4vw, 5.6rem); line-height: .92; letter-spacing: -.01em; }
.wb .visual-head p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink); }
.wb .board-note { margin: 18px 0 0; font-size: 9px; font-weight: 700; color: var(--muted); }
.wb .board-after { display: grid; grid-template-columns: 170px minmax(0, 680px) 1fr; gap: 48px; margin-top: 56px; }
.wb .board-after .copy { grid-column: 2; }
.wb .board-after .copy p:first-child { margin-top: 0; }

/* set-piece frame, generalized from .loop-board / .race-board / .taxonomy-board / .ledger */
.wb .board { position: relative; border: 2px solid var(--ink); background: var(--white); box-shadow: 12px 12px 0 var(--blue); overflow: hidden; }
.wb .board.dark { background: var(--ink); color: var(--text-on-ink); }
.wb .board.dark::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(255,255,255,.15) .8px, transparent .8px); background-size: 10px 10px; }
.wb .board.shadow-red { box-shadow: 12px 12px 0 var(--red); }
.wb .board.shadow-yellow { box-shadow: 12px 12px 0 var(--yellow); }
.wb .board-bar { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-bottom: 2px solid var(--text-on-ink); }
.wb .status { font-size: 9px; font-weight: 700; }
.wb .board .replay { padding: 7px 10px; border: 1px solid var(--text-on-ink); background: transparent; color: var(--text-on-ink); font: 700 8px/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; cursor: pointer; }
.wb .board .replay:hover { background: var(--yellow); color: var(--ink); border-color: var(--yellow); }
.wb .board :focus-visible { outline-color: var(--yellow); }
.wb .chip { display: inline-block; padding: 7px 9px; background: var(--blue); color: #fff; font-size: 8px; font-weight: 700; }

/* ending */
.wb .ending { padding: 120px 0 84px; }
.wb .ending-grid { display: grid; grid-template-columns: 170px 1fr; gap: 48px; }
.wb .ending h2 { max-width: 920px; font-size: clamp(3.6rem, 7vw, 7rem); line-height: .92; letter-spacing: -.01em; }
.wb .ending h2 span { color: var(--blue); }
.wb .ending-copy { grid-column: 2; max-width: 690px; }
.wb .ending-copy p { margin: 24px 0; font-size: 18px; line-height: 1.72; color: var(--ink); }
.wb .last-line { margin-top: 60px; padding: 24px 28px; border: 2px solid var(--ink); background: var(--yellow); box-shadow: 9px 9px 0 var(--ink); font: 800 clamp(2rem, 3.6vw, 3.6rem)/.96 var(--display); text-transform: uppercase; transform: rotate(-.3deg); color: var(--ink); }
.wb .colophon { margin: 48px 0 0; font-size: 9px; line-height: 1.6; color: var(--muted); }

/* reveals never hide content without JS; workbench.css sets [data-reveal] to opacity 0 */
html:not(.js) .wb [data-reveal] { opacity: 1; transform: none; }

@media (max-width: 930px) {
  .wb .hero { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .wb .hero-side { min-height: 470px; }
  .wb .story, .wb .board-after { grid-template-columns: 100px 1fr; gap: 32px; }
  .wb .margin-note { grid-column: 2; position: static; transform: none; max-width: 520px; }
  .wb .visual-head { grid-template-columns: 100px 1fr; gap: 32px; }
  .wb .visual-head p { grid-column: 2; }
  .wb .pullquote { margin-right: 0; }
  .wb .copy figure { margin-right: 0; }
}
@media (max-width: 650px) {
  .wb { width: calc(100% - 28px); }
  .wb .hero { min-height: 0; padding: 40px 0 64px; }
  .wb h1 { max-width: 100%; font-size: clamp(3.4rem, 15vw, 4.8rem); }
  .wb .hero-side { min-height: 420px; }
  .wb .story, .wb .ending-grid, .wb .board-after { grid-template-columns: 1fr; gap: 18px; }
  .wb .story { padding: 80px 0; }
  .wb .board-after { margin-top: 40px; }
  .wb .board-after .copy, .wb .margin-note { grid-column: auto; }
  .wb .section-no { padding: 0; }
  .wb .copy p, .wb .ending-copy p { font-size: 16px; }
  .wb .copy h2 + p { font-size: 18px; }
  .wb .pullquote { margin: 42px 0; padding: 22px; box-shadow: 7px 7px 0 var(--ink); }
  .wb .copy figure .frame, .wb .ending-copy figure .frame { box-shadow: 7px 7px 0 var(--ink); }
  .wb .visual-break { padding: 76px 0 84px; }
  .wb .visual-head { grid-template-columns: 1fr; gap: 12px; }
  .wb .visual-head p { grid-column: auto; }
  .wb .board { box-shadow: 7px 7px 0 var(--ink); }
  .wb .ending-copy { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) {
  html:has(body.wb-post) { scroll-behavior: auto; }
}