/* Work Composition · Euler Center imprint stylesheet
   Paper and black bands, one orange accent, Archivo caps with a single Newsreader italic word. */

:root {
  --paper: #faf9f7; --black: #0b0b0a;
  --ink: #000000; --ink-d: #f4f1ea;
  --mute: #4a4a48; --mute-d: #a9a59d;
  --hair: #d8d5cf; --hair-d: #2a2825; --hair2: #ebe7df;
  --orange: #ff9901; --orange-soft: #ffe9c9;
  --A: Archivo, system-ui, "Helvetica Neue", Arial, sans-serif;
  --N: Newsreader, Georgia, "Times New Roman", serif;
  --pad: 64px;
}
@media (max-width: 720px) { :root { --pad: 24px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .rise { animation: none !important; } }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--N); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 50; background: var(--black); color: var(--ink-d); padding: 8px 14px; font-family: var(--A); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.skip:focus { left: 16px; }
main { display: block; }

/* ---- type ---- */
.eb, .navlink, .pill, .tl, .chip, .k, .h0, .h1, .h2, .h3, .h4, .hb, .num, .big, .wm, .imp, .cap, .cc, .tab, .fl, .tag, .menu-btn { font-family: var(--A); }
.body, .lede, .v, .blank { font-family: var(--N); }

.eb { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; font-size: 12px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--mute); }
.eb::after { content: ""; display: block; width: 32px; height: 2px; background: var(--orange); }
.dark .eb { color: var(--mute-d); }

.h0 { font-size: clamp(42px, 5.9vw, 84px); font-weight: 800; text-transform: uppercase; line-height: .92; letter-spacing: -.03em; }
.h1 { font-size: clamp(34px, 3.9vw, 56px); font-weight: 800; text-transform: uppercase; line-height: .95; letter-spacing: -.03em; }
.h2 { font-size: clamp(28px, 3.1vw, 44px); font-weight: 800; text-transform: uppercase; line-height: 1; letter-spacing: -.02em; }
.h2.wb { font-size: clamp(25px, 2.5vw, 36px); }
.h3 { font-size: 22px; font-weight: 800; text-transform: uppercase; line-height: 1.1; letter-spacing: -.01em; }
.h4 { font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; line-height: 1.25; }
.hb { font-size: clamp(38px, 6.6vw, 96px); font-weight: 800; text-transform: uppercase; line-height: .9; letter-spacing: -.03em; color: var(--ink-d); }
em.w { font-family: var(--N); font-style: italic; font-weight: 300; text-transform: none; letter-spacing: -.015em; font-size: 1.04em; }
.dark em.w, .hb em.w { color: var(--orange); }
.lede { font-size: clamp(19px, 1.7vw, 24px); line-height: 1.5; color: var(--mute); }
.lede.s { font-size: clamp(18px, 1.5vw, 21px); }
.dark .lede { color: var(--mute-d); }
.body { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.55; color: var(--ink); }
.body.s { font-size: 17px; }
.body.xs { font-size: 16px; line-height: 1.5; }
.body.m { color: var(--mute); }
.body.hi, .body .hi { color: var(--ink); }
.dark .body { color: var(--mute-d); }
.dark .body.hi, .dark .body .hi { color: var(--ink-d); }
.dark .body i { color: var(--ink-d); }
.body i, .lede i { font-style: italic; }
.ref { box-shadow: inset 0 -2px 0 var(--orange-soft); transition: box-shadow .15s; }
.ref:hover { box-shadow: inset 0 -2px 0 var(--orange); }
.dark .ref { box-shadow: inset 0 -1px 0 var(--mute-d); }
.dark .ref:hover { box-shadow: inset 0 -1px 0 var(--orange); }
.stack { display: flex; flex-direction: column; gap: 22px; }
.stack.tight { gap: 18px; }
.k { font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--mute); }
.k.ink { color: var(--ink); }
.dark .k { color: var(--mute-d); }
.k.note { text-transform: none; letter-spacing: .02em; font-size: 12px; line-height: 1.5; }
.v { font-size: 17px; line-height: 1.4; color: var(--ink); }
.dark .v { color: var(--ink-d); }
.num { font-size: 12px; font-weight: 600; letter-spacing: .16em; color: var(--mute); }
.dark .num { color: var(--mute-d); }
.big { font-size: clamp(76px, 9.5vw, 136px); font-weight: 800; line-height: .85; letter-spacing: -.05em; color: var(--orange); }
.big.ink { color: var(--ink); }
.mt-s { margin-top: 14px; } .mt-m { margin-top: 28px; } .mt-l { margin-top: 44px; } .mt-xl { margin-top: 64px; }
.mw { max-width: 720px; } .mw-s { max-width: 620px; }

/* ---- layout ---- */
.wrap { position: relative; max-width: 1440px; margin: 0 auto; padding: 104px var(--pad); }
.sec { position: relative; background: var(--paper); color: var(--ink); }
.sec.dark { background: var(--black); color: var(--ink-d); }
.sec.tight > .wrap { padding-top: 72px; padding-bottom: 72px; }
.sec.hero > .wrap { padding-top: 96px; padding-bottom: 104px; }
.sec.wbhero > .wrap { padding-top: 80px; padding-bottom: 56px; }
.sec.flush > .wrap { padding-top: 0; }
.sec.flush-b > .wrap { padding-bottom: 0; }
.sec.bt { border-top: 1px solid var(--hair); }
.sec.dark.bt { border-top-color: var(--hair-d); }
@media (max-width: 720px) { .wrap { padding-top: 64px; padding-bottom: 64px; } .sec.tight > .wrap { padding-top: 48px; padding-bottom: 48px; } .sec.hero > .wrap { padding-top: 56px; padding-bottom: 64px; } .sec.wbhero > .wrap { padding-top: 48px; padding-bottom: 40px; } }

.rl { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--hair); pointer-events: none; }
.dark .rl, .ftr .rl { background: var(--hair-d); }
.rl.r1 { left: 64px; }
.rl.r2 { left: calc((100% - 96px) * .25 + 48px); }
.rl.r3 { left: calc((100% - 96px) * .75 + 48px); }
.rl.r4 { left: calc(100% - 64px); }
@media (max-width: 960px) { .rl { display: none; } }

.g12 { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; }
.g12.rg { row-gap: 44px; }
.c1-4 { grid-column: 1 / 4; } .c1-8 { grid-column: 1 / 8; } .c1-9 { grid-column: 1 / 9; } .c1-13 { grid-column: 1 / -1; }
.c4-9 { grid-column: 4 / 9; } .c4-10 { grid-column: 4 / 10; } .c4-11 { grid-column: 4 / 11; } .c4-12 { grid-column: 4 / 12; } .c4-13 { grid-column: 4 / 13; }
.c8-13 { grid-column: 8 / 13; } .c10-13 { grid-column: 10 / 13; }
.s3 { grid-column: span 3; } .s4 { grid-column: span 4; } .s6 { grid-column: span 6; }
.rel { position: relative; }
@media (max-width: 960px) {
  .g12 { column-gap: 24px; }
  .c1-4, .c1-8, .c1-9, .c4-9, .c4-10, .c4-11, .c4-12, .c4-13, .c8-13, .c10-13 { grid-column: 1 / -1; }
  .g12 > .c1-4 + * { margin-top: 28px; }
  .s3, .s4 { grid-column: span 6; }
  .side { margin-top: 40px; }
}
@media (max-width: 640px) { .s3, .s4, .s6 { grid-column: 1 / -1; } }
.cols2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.cols3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.cols4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.cols5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px; }
@media (max-width: 960px) { .cols4, .cols5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cols3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .cols2, .cols3, .cols4, .cols5 { grid-template-columns: minmax(0, 1fr); } }
.row { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.row.end { justify-content: flex-end; }
.card { border-top: 1px solid var(--ink); padding-top: 20px; display: flex; flex-direction: column; }
.card.soft { border-top-color: var(--hair); }
.dark .card { border-top-color: var(--hair-d); }
.card .foot { margin-top: auto; padding-top: 18px; }
.card > .h3, .card > .h4 { min-height: 48px; }
.rule { position: relative; height: 1px; background: var(--hair); }
.rule::before { content: ""; position: absolute; left: 0; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); }
.rule.plain::before { display: none; }
.dark .rule, .ftr .rule { background: var(--hair-d); }
.divider { margin: 96px 0 72px; }
@media (max-width: 720px) { .divider { margin: 56px 0 44px; } }

/* ---- controls ---- */
.pill { display: inline-flex; align-items: center; gap: 12px; height: 48px; padding: 0 22px 0 24px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; background: var(--ink); color: var(--paper); border: 1px solid var(--ink); transition: background .15s, color .15s; }
.pill:hover { background: #2a2825; border-color: #2a2825; }
.pill.sm { height: 42px; }
.pill.ghost { background: transparent; color: var(--ink); }
.pill.ghost:hover { background: var(--ink); color: var(--paper); }
.dark .pill { background: var(--orange); color: var(--black); border-color: var(--orange); }
.dark .pill:hover { background: #ffb340; border-color: #ffb340; }
.dark .pill.ghost { background: transparent; color: var(--ink-d); border-color: var(--mute-d); }
.tl { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); border-bottom: 2px solid var(--orange); padding-bottom: 3px; white-space: nowrap; }
.tl.wrap { white-space: normal; }
.dark .tl { color: var(--ink-d); }
.chip { display: inline-flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); }
.chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); flex: none; }
.chip.hollow::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--orange); }
.chip.grey::before { background: #c9c5bd; } .dark .chip.grey::before { background: var(--mute); }
.chip.greyhollow::before { background: transparent; box-shadow: inset 0 0 0 1.5px #c9c5bd; }
.chip.m { color: var(--mute); } .dark .chip { color: var(--ink-d); } .dark .chip.m { color: var(--mute-d); }
.chip.long { white-space: normal; line-height: 1.6; }
.tabs { display: flex; gap: 28px; flex-wrap: wrap; border-bottom: 1px solid var(--ink); }
.tab { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); padding-bottom: 8px; margin-bottom: -1px; border-bottom: 2px solid transparent; white-space: nowrap; }
.tab i { font-style: normal; font-weight: 400; color: var(--mute); margin-left: 4px; }
.tab.on, .tab[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--orange); }
.fact { padding: 14px 0; border-top: 1px solid var(--hair); display: flex; flex-direction: column; gap: 6px; }
.fact.bb { border-bottom: 1px solid var(--hair); }
.dark .fact { border-color: var(--hair-d); }
.sq { display: inline-block; width: 12px; height: 12px; border: 1px solid var(--ink); flex: none; }
.sq.thin { background-image: repeating-linear-gradient(135deg, var(--ink) 0 1px, transparent 1px 4px); }
.sq.solid { background: var(--ink); }
.sheet { position: relative; border: 1px solid var(--ink); background: var(--paper); }
.blank { display: block; height: 22px; border-bottom: 1px solid var(--mute-d); }
.tscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.ht { width: 100%; border-collapse: collapse; }
table.ht th, table.ht td { text-align: left; vertical-align: top; padding: 22px 24px 26px 0; border-bottom: 1px solid var(--hair); font-family: var(--N); font-size: 17px; line-height: 1.5; }
table.ht thead th { font-family: var(--A); font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--mute); padding: 0 24px 12px 0; border-bottom: 1px solid var(--ink); }
table.ht tbody th { font-family: var(--A); font-weight: 800; text-transform: uppercase; font-size: 18px; letter-spacing: -.01em; line-height: 1.15; }
table.ht th .sub { display: block; font-family: var(--A); font-size: 11px; font-weight: 500; letter-spacing: .12em; color: var(--mute); margin-top: 8px; text-transform: none; }

/* ---- header ---- */
.hdr { position: relative; z-index: 20; background: var(--paper); border-bottom: 1px solid var(--hair); }
.hdr .wrap { height: 88px; padding-top: 0; padding-bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.brand { display: flex; align-items: center; gap: 18px; flex: none; }
.brand img { height: 34px; width: auto; display: block; flex: none; }
.vr { width: 1px; height: 28px; background: var(--hair); flex: none; }
.ftr .vr { background: var(--hair-d); }
.imp { font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); white-space: nowrap; }
.ftr .imp { color: var(--ink-d); }
.nav { display: flex; gap: 28px; align-items: center; }
.navlink { font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--mute); padding-bottom: 4px; border-bottom: 2px solid transparent; white-space: nowrap; transition: color .15s; }
.navlink:hover { color: var(--ink); }
.navlink.on { color: var(--ink); border-bottom-color: var(--orange); }
.nav-cta { display: none; }
.menu-btn { display: none; align-items: center; gap: 6px; height: 40px; padding: 0 2px; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); }
.menu-btn span:not(.menu-lbl) { display: block; width: 18px; height: 2px; background: var(--ink); }
.menu-btn .menu-lbl { margin-left: 6px; }
@media (max-width: 1120px) {
  .hdr .wrap { height: 72px; }
  .brand img { height: 28px; }
  .imp { font-size: 12px; }
  .nav, .hdr-cta { display: none; }
  .menu-btn { display: inline-flex; flex-direction: row; flex-wrap: wrap; width: auto; }
  .hdr.open .nav { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; position: absolute; left: 0; right: 0; top: 72px; background: var(--paper); border-bottom: 1px solid var(--hair); padding: 24px var(--pad) 32px; z-index: 30; }
  .hdr.open .nav-cta { display: inline-flex; margin-top: 8px; }
}
@media (max-width: 480px) { .imp { display: none; } .vr { display: none; } }

/* ---- photo slots ---- */
.photo { position: relative; overflow: hidden; background-color: var(--hair2); background-image: repeating-linear-gradient(135deg, rgba(0,0,0,.05) 0 1px, transparent 1px 18px); outline: 1px dashed rgba(255,153,1,.75); outline-offset: -1px; }
.photo.dk { background-color: #1a1917; background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.055) 0 1px, transparent 1px 18px); }
.photo.has { outline: none; background-image: none; }
.photo.has img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.band .photo.has img { object-position: 50% 25%; }
@media (max-width: 960px) { .band .photo.has img { object-position: var(--pos-m, 50% 25%); } }
.photo.hero { width: 100%; max-width: 480px; aspect-ratio: 480 / 520; margin-left: auto; }
@media (max-width: 960px) { .photo.hero { max-width: none; aspect-ratio: 16 / 10; margin-top: 40px; } }
.cap { position: absolute; left: 16px; bottom: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; background: rgba(250,249,247,.92); color: var(--ink); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; border-radius: 2px; line-height: 1.4; max-width: calc(100% - 32px); }
.band { position: relative; background: var(--black); color: var(--ink-d); overflow: hidden; }
.band .photo { position: absolute; inset: 0; outline: none; }
.band .shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,11,10,.05) 0%, rgba(11,11,10,.35) 45%, rgba(11,11,10,.92) 100%); }
.band .wrap { padding-top: 320px; padding-bottom: 56px; }
.band .band-k { position: absolute; left: var(--pad); top: 28px; font-weight: 600; letter-spacing: .18em; color: var(--mute-d); }
.band .cap { left: auto; right: var(--pad); bottom: auto; top: 24px; background: rgba(11,11,10,.7); color: var(--ink-d); }
.band .band-in { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; }
.band .band-in .hb { max-width: 900px; }
.band .band-aside { display: flex; flex-direction: column; gap: 20px; align-items: flex-end; max-width: 340px; flex: none; }
.band .band-aside .body { text-align: right; font-size: 20px; color: var(--mute-d); }
@media (max-width: 960px) { .band .wrap { padding-top: 220px; } .band .band-in { flex-direction: column; align-items: flex-start; } .band .band-aside { align-items: flex-start; max-width: none; } .band .band-aside .body { text-align: left; } .band .cap { top: 60px; right: auto; left: var(--pad); } }

/* ---- footer ---- */
.ftr { position: relative; background: var(--black); color: var(--ink-d); overflow: hidden; }
.ftr .wrap { padding: 64px var(--pad) 0; }
.ftr-top { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.ftr-top .brand img { height: 36px; }
.ftr-nav { display: flex; gap: 64px; }
.ftr-nav > div { display: flex; flex-direction: column; gap: 10px; }
.ftr-nav .k { margin-bottom: 6px; }
.fl { font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-d); }
.fl:hover { color: var(--orange); }
.ftr-rule { margin: 40px 0 48px; }
.ftr-cols { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; }
.ftr-cols .k { display: block; margin-bottom: 12px; font-weight: 600; color: var(--ink-d); }
.ftr-cols .body { color: var(--mute-d); }
.ftr-cols .body a:hover { color: var(--orange); }
.ftr-base { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 56px; flex-wrap: wrap; }
.cc { font-size: 12px; letter-spacing: .04em; color: var(--mute-d); display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cc.caps { letter-spacing: .16em; text-transform: uppercase; }
.wmbox { height: clamp(40px, 8.6vw, 124px); overflow: hidden; margin-top: 40px; }
.wm { font-size: clamp(38px, 8.28vw, 119px); font-weight: 900; letter-spacing: -.04em; line-height: 1; white-space: nowrap; text-transform: uppercase; color: var(--ink-d); transform: translateY(-4px); }
@media (max-width: 960px) { .ftr-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ftr-nav { gap: 40px; } }
@media (max-width: 640px) { .ftr-cols { grid-template-columns: minmax(0, 1fr); } .ftr-top { flex-direction: column; } }

@keyframes rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
.rise { animation: rise .8s cubic-bezier(.2,.8,.2,1) both; }
.rise.d2 { animation-delay: .15s; }

/* ---- home ---- */
.mini { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 72px; }
.mini > div { padding: 20px 22px 22px; border-left: 1px solid var(--ink); }
.mini > div:first-child { border-left: 0; }
.mini .bh { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--ink); }
.mini .bh i { font-family: var(--N); font-style: italic; font-size: 15px; color: var(--mute); text-align: right; }
.mini a { display: flex; align-items: baseline; gap: 14px; padding: 12px 0 0; }
.mini a .h4 { font-weight: 600; letter-spacing: .02em; }
.mini a:hover .h4 { color: var(--orange); }
@media (max-width: 960px) { .mini { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 48px; } .mini > div:nth-child(3) { border-left: 0; } .mini > div:nth-child(n+3) { border-top: 1px solid var(--ink); } }
@media (max-width: 480px) { .mini { grid-template-columns: minmax(0, 1fr); } .mini > div { border-left: 0; } .mini > div:nth-child(n+2) { border-top: 1px solid var(--ink); } }

/* ---- canvas: the poster ---- */
.poster { --bc: var(--ink); }
.poster-mast { display: flex; align-items: center; justify-content: space-between; gap: 12px 28px; padding: 14px 22px; background: var(--ink); color: var(--paper); font-family: var(--A); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; flex-wrap: wrap; }
.poster-mast .osq { display: inline-block; width: 10px; height: 10px; background: var(--orange); margin-right: 12px; vertical-align: 1px; }
.poster-head { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--ink); }
.poster-head > div { padding: 18px 22px 20px; border-left: 1px solid var(--hair); }
.poster-head > div:first-child { border-left: 0; }
.pband { display: grid; grid-template-columns: 264px repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.poster-head + .pband { border-top: 0; }
.pband .plabel { position: relative; padding: 22px 22px 22px 32px; display: flex; flex-direction: column; gap: 16px; }
.pband .plabel::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 8px; background: var(--bc); }
.pband .plabel .bn { font-family: var(--A); font-size: 64px; font-weight: 800; line-height: .85; letter-spacing: -.05em; color: var(--bc); }
.pband .plabel .h4 { font-size: 18px; }
.pband .plabel .body { font-style: italic; margin-top: 6px; max-width: 200px; }
.pband .plabel .tl { margin-top: auto; align-self: flex-start; }
.pc { position: relative; padding: 20px 22px 20px; border-left: 1px solid var(--hair); min-height: 232px; display: flex; flex-direction: column; background: var(--tile); transition: background .15s; }
.pc.first { border-left-color: var(--ink); }
.pc .ph { display: flex; align-items: baseline; gap: 14px; }
.pc .ph .num { color: var(--bc); font-weight: 700; }
.pc .ph a { color: inherit; }
.pc .ph a:hover, .pc .ph a:focus-visible { color: var(--orange); }
.pc .ph .h3 { font-size: 20px; }
.pc .ticks { margin-top: auto; padding-top: 18px; display: flex; gap: 6px; }
.tick { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 34px; padding: 0; border: 1px solid var(--hair); background: transparent; font-family: var(--A); font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
.tick:hover { border-color: var(--ink); color: var(--ink); }
.tick:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.tick .sq { width: 10px; height: 10px; }
.tick[aria-pressed="true"] { border-color: var(--bc); color: var(--bc); background: color-mix(in srgb, var(--bc) 10%, transparent); }
.tick[aria-pressed="true"] .sq { border-color: var(--bc); }
.tick[aria-pressed="true"] .sq.solid { background: var(--bc); }
.tick[aria-pressed="true"] .sq.thin { background-image: repeating-linear-gradient(135deg, var(--bc) 0 1px, transparent 1px 4px); }
.pc.s0 { outline: 2px dashed var(--orange); outline-offset: -7px; }
.pc.s1 { background: color-mix(in srgb, var(--bc) 6%, var(--tile)); }
.pc.s2 { background: color-mix(in srgb, var(--bc) 16%, var(--tile)); }
.poster-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px 28px; padding: 16px 22px; border-top: 1px solid var(--ink); flex-wrap: wrap; }
.poster-foot .tally { display: flex; align-items: baseline; gap: 26px; flex-wrap: wrap; }
.poster-foot .tv { display: inline-flex; align-items: baseline; gap: 8px; }
.poster-foot .tv b { font-family: var(--A); font-size: 24px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.poster-foot .tv.tb b { color: var(--orange); }
.poster-foot button.tl { background: none; border: 0; border-bottom: 2px solid var(--orange); cursor: pointer; }
.poster-foot button.tl.quiet { border-bottom-color: var(--hair); color: var(--mute); }
.poster-note { display: flex; align-items: center; justify-content: space-between; gap: 12px 28px; padding: 12px 22px; border-top: 1px solid var(--hair); flex-wrap: wrap; }
@media (max-width: 960px) { .poster-head { grid-template-columns: repeat(2, minmax(0, 1fr)); } .poster-head > div:nth-child(3) { border-left: 0; } .poster-head > div:nth-child(n+3) { border-top: 1px solid var(--hair); } .pband { grid-template-columns: minmax(0, 1fr); } .pband .plabel { border-bottom: 1px solid var(--ink); flex-direction: row; align-items: center; flex-wrap: wrap; } .pband .plabel .tl { margin-top: 0; margin-left: auto; } .pc, .pc.first { border-left: 0; border-top: 1px solid var(--hair); min-height: 0; } .pc.first { border-top: 0; } }
@media (max-width: 640px) { .poster-head { grid-template-columns: minmax(0, 1fr); } .poster-head > div { border-left: 0; } .poster-head > div:nth-child(n+2) { border-top: 1px solid var(--hair); } .pband .plabel .bn { font-size: 48px; } }
.box { border: 1px solid var(--ink); padding: 40px 44px; margin-top: 56px; display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 40px; }
@media (max-width: 720px) { .box { padding: 24px; grid-template-columns: minmax(0, 1fr); gap: 20px; } }

/* ---- canvas: the reference (one table, rows open the cell rail) ---- */
.certtab { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 16px; line-height: 1.45; }
.certtab th, .certtab td { text-align: left; vertical-align: top; padding: 14px 16px 14px 0; border-top: 1px solid var(--hair); }
.certtab thead th { font-family: var(--A); font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--mute); padding-top: 0; padding-bottom: 10px; border-top: 0; border-bottom: 1px solid var(--ink); }
.certtab .bandrow { scroll-margin-top: 24px; }
.certtab .bandrow th { padding: 30px 0 10px; border-top: 0; border-bottom: 3px solid var(--bc); }
.certtab .bandrow .k { color: var(--bc); margin-right: 14px; }
.certtab tbody:first-of-type .bandrow th { padding-top: 22px; }
.certtab tbody tr[data-cell-open] { cursor: pointer; scroll-margin-top: 24px; transition: background-color .15s; }
.certtab tbody tr[data-cell-open]:hover { background: var(--tile); }
.certtab tbody tr[data-cell-open]:hover .tl { color: var(--orange); }
.certtab tbody tr:first-of-type + tr td { border-top: 0; }
.certtab .num { width: 56px; font-family: var(--A); font-weight: 700; letter-spacing: .04em; color: var(--bc); white-space: nowrap; }
.certtab .name { width: 200px; white-space: nowrap; }
.certtab .name a { color: inherit; text-decoration: none; }
.certtab .name a:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.certtab .cert { font-family: var(--N); font-size: 18px; line-height: 1.4; padding-right: 0; }
.certtab .cert .tl { float: right; margin-left: 20px; margin-top: 3px; }
.dark .certtab th, .dark .certtab td { border-color: var(--hair-d); }
@media (max-width: 720px) {
  .certtab thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .certtab tbody tr[data-cell-open] { display: grid; grid-template-columns: 44px minmax(0, 1fr); padding: 14px 0; border-top: 1px solid var(--hair); }
  .certtab tbody tr[data-cell-open] td { padding: 0; border-top: 0; }
  .certtab .num, .certtab .name { width: auto; }
  .certtab .cert { grid-column: 2; margin-top: 6px; font-size: 16px; }
  .certtab .cert .tl { float: none; display: inline-block; margin: 8px 0 0; }
  .certtab .bandrow th { display: block; }
  .certtab .bandrow .k { display: block; margin-bottom: 4px; }
}
/* The cell rail: reuses the library's .epanel shell. What gets certified comes first. */
.epanel .cellhead { display: flex; flex-direction: column; gap: 8px; }
.epanel .cellhead .num { color: var(--bc); font-weight: 700; }
.epanel .certbox { margin-top: 24px; padding: 20px 22px 22px; border-left: 6px solid var(--bc); background: color-mix(in srgb, var(--bc) 7%, var(--tile)); }
.epanel .certbox .k { display: block; color: var(--bc); margin-bottom: 8px; }
.epanel .certbox p { font-size: 20px; line-height: 1.35; font-family: var(--N); }
.epanel .cnote { margin-top: 26px; padding: 18px 20px 20px; border-left: 4px solid var(--orange); background: var(--tile); }
.epanel .cnote .k { display: block; color: var(--orange); margin-bottom: 8px; }
.epanel .cnote p { font-size: 15px; line-height: 1.5; }
.epanel .csee { margin-top: 20px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.epanel .cq { margin-top: 26px; }
.epanel .cq .k { display: block; margin-bottom: 8px; }
.cfields { margin-top: 26px; display: flex; flex-direction: column; }
.cfields > div { padding: 16px 0 18px; border-top: 1px solid var(--hair); }
.cfields dt { font-family: var(--A); font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--mute); margin-bottom: 8px; }
.cfields dd { font-size: 16px; line-height: 1.5; }
.epanel .cnav { display: flex; justify-content: space-between; gap: 16px; margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--ink); }
.epanel .cnav a { color: inherit; }
.dark .cfields > div { border-color: var(--hair-d); }

/* ---- patterns ---- */
.pat { border-top: 1px solid var(--ink); padding: 40px 0 44px; }
.pat .pleft { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.glyph { display: grid; grid-template-columns: repeat(4, 22px); gap: 4px; }
.glyph .sq { width: 22px; height: 22px; }
.gl { display: flex; gap: 20px; align-items: flex-start; padding-bottom: 18px; }
.pat .ex { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 26px; }
@media (max-width: 640px) { .pat .ex { grid-template-columns: minmax(0, 1fr); } }
.legend { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }


/* ---- shapes and anti-patterns (pattern pages) ---- */
.tcard .glyph { margin-bottom: 16px; }
.tcard .kv { display: flex; flex-direction: column; gap: 4px; margin-top: 14px; }
.tcard .kv span { font-size: 14px; color: var(--mute); }
.tcard .kv span b { font-family: var(--A); font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); margin-right: 8px; }
.dark .tcard .kv span { color: var(--mute-d); } .dark .tcard .kv span b { color: var(--ink-d); }
.pat .req { margin-top: 22px; padding: 14px 18px; border-left: 3px solid var(--orange); background: var(--tile); }
.pat .req .k { display: block; margin-bottom: 6px; }
.dark .pat .req { background: var(--tile-d); }
.pat .h3 a { color: inherit; text-decoration: none; }
.pat .h3 a:hover { color: var(--orange); }
.cand-chip { display: inline-flex; align-items: center; gap: 8px; }
.uses { display: flex; flex-direction: column; gap: 18px; margin-top: 20px; }
.uses > div { padding-top: 14px; border-top: 1px solid var(--hair); }
.uses > div:first-child { border-top: 0; padding-top: 0; }
.dark .uses > div { border-color: var(--hair-d); }
.anti { border-top: 1px solid var(--ink); padding: 56px 0 60px; }
.anti:first-child { border-top: 0; }
.dark .anti { border-top-color: var(--ink-d); }
.wounds { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

/* ---- design ---- */
.tech { border-top: 1px solid var(--ink); padding: 36px 0 40px; }
.tech .from { margin-top: 12px; }
.tech .do { margin-top: 22px; border-left: 2px solid var(--orange); padding-left: 18px; }
.mx { min-width: 860px; }
.mx td strong { display: block; font-family: var(--A); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; }
.mx td { font-size: 15px; }
.mx td.yes { background: rgba(255,153,1,.09); }
.mx td.no { background-image: repeating-linear-gradient(135deg, rgba(0,0,0,.07) 0 1px, transparent 1px 7px); }
.mx td, .mx th { padding: 18px 16px 20px; border-left: 1px solid var(--hair); }
.mx thead th:first-child, .mx tbody th { border-left: 0; }
.mx tbody th { font-size: 15px; padding-left: 0; padding-right: 16px; }
.mx thead th { padding-top: 0; }
.key { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 18px; }
.key span { display: inline-flex; align-items: center; gap: 10px; }
.key .swatch { width: 22px; height: 14px; border: 1px solid var(--hair); }
.key .swatch.yes { background: rgba(255,153,1,.14); }
.key .swatch.no { background-image: repeating-linear-gradient(135deg, rgba(0,0,0,.14) 0 1px, transparent 1px 6px); }

/* ---- environment ---- */
.tlx { overflow-x: auto; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); margin-top: 44px; -webkit-overflow-scrolling: touch; }
.tlt { position: relative; height: 330px; }
.tlt .axis { position: absolute; left: 0; right: 0; top: 165px; height: 1px; background: var(--ink); }
.tle { position: absolute; top: 0; bottom: 0; width: 0; }
.tle .dot { position: absolute; top: 160px; left: -5px; width: 11px; height: 11px; border-radius: 50%; background: var(--ink); }
.tle .dot.c { background: var(--orange); }
.tle .dot.a { background: var(--paper); border: 2px solid var(--ink); }
.tle .dot.f { background: var(--paper); border: 2px solid var(--orange); }
.tle .tick { position: absolute; top: 152px; left: 0; width: 1px; height: 27px; background: var(--hair); }
.tle .lbl { position: absolute; left: -66px; width: 132px; text-align: center; }
.tle .lbl.up { bottom: 182px; } .tle .lbl.dn { top: 184px; }
.tle .yr { font-family: var(--A); font-size: 11px; font-weight: 600; letter-spacing: .14em; color: var(--ink); }
.tle .tt { font-size: 14px; line-height: 1.35; margin-top: 4px; color: var(--mute); }
.tl-legend { display: flex; gap: 24px; flex-wrap: wrap; margin-top: 18px; }
.tl-legend span { display: inline-flex; align-items: center; gap: 8px; }
.tl-legend .dot { width: 11px; height: 11px; border-radius: 50%; background: var(--ink); flex: none; }
.tl-legend .dot.c { background: var(--orange); } .tl-legend .dot.a { background: var(--paper); border: 2px solid var(--ink); } .tl-legend .dot.f { background: var(--paper); border: 2px solid var(--orange); }
.charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 32px; margin-top: 56px; }
.chart { border-top: 1px solid var(--ink); padding-top: 18px; }
.chart .h4 { font-size: 16px; }
.chart .cs { margin-top: 8px; }
.chart svg { display: block; width: 100%; height: auto; margin-top: 18px; font-family: var(--A); }
.chart .src { margin-top: 12px; }
@media (max-width: 720px) { .charts { grid-template-columns: minmax(0, 1fr); } }
.scatter { margin-top: 44px; }
.scatter svg { display: block; width: 100%; height: auto; max-width: 720px; font-family: var(--A); }
.scatter a circle { transition: fill .15s; }
.scatter a:hover circle { fill: var(--orange); }
.trad { border-top: 1px solid var(--hair); padding: 28px 0 32px; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 24px; scroll-margin-top: 24px; }
.trad:first-child { border-top: 1px solid var(--ink); }
.trad .tn { font-family: var(--A); font-size: 26px; font-weight: 800; line-height: 1; letter-spacing: -.03em; color: var(--ink); }
.trad .feeds { margin-top: 14px; }

/* ---- run ---- */
.timebar { display: flex; margin-top: 44px; border: 1px solid var(--ink); }
.timebar .seg { padding: 12px 10px; font-family: var(--A); font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; border-left: 1px solid var(--ink); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: 0; }
.timebar .seg:first-child { border-left: 0; }
.timebar .seg.dk { background: var(--ink); color: var(--paper); }
@media (max-width: 720px) { .step { grid-template-columns: 44px minmax(0, 1fr); } .step .clock { grid-column: 2; text-align: left; } }
.appgroup { padding-top: 64px; scroll-margin-top: 24px; }
.appgroup:first-of-type { padding-top: 0; }
.appgroup .gh { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.appgroup .gh .gd { flex-basis: 100%; margin-top: 6px; }
.apps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; margin-top: 28px; }
.app { border-top: 1px solid var(--ink); padding-top: 18px; display: flex; flex-direction: column; }
.app .ah { display: flex; align-items: baseline; gap: 14px; }
.app dl { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px 16px; margin-top: 18px; }
.app dt { font-family: var(--A); font-size: 10px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--mute); padding-top: 3px; }
.app dd { font-size: 15px; line-height: 1.5; }
.app dd.risk { color: var(--ink); font-style: italic; }
.app .cref { margin-top: auto; padding-top: 16px; }
@media (max-width: 720px) { .apps { grid-template-columns: minmax(0, 1fr); } }

/* ---- learn ---- */
.ladder { position: relative; margin-top: 64px; border-bottom: 1px solid var(--hair); }
.rung { padding: 36px 0 40px; border-top: 1px solid var(--hair); }
.rung .rl-l { display: flex; gap: 22px; align-items: flex-start; padding-right: 24px; }
.rung .rn { font-family: var(--A); font-size: 44px; font-weight: 800; line-height: 1; min-width: 34px; letter-spacing: -.04em; }
.rung .rl-m { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 32px; }
.rung.key { background: var(--black); color: var(--ink-d); margin: 0 calc(-1 * var(--pad)); padding: 44px var(--pad) 48px; border-top: 0; position: relative; }
.rung.key .rl { display: block; }
@media (max-width: 960px) { .rung.key .rl { display: none; } }
.rung.key .rl-m .body { color: var(--ink-d); }
.rung .bought { margin-top: 26px; }
@media (max-width: 640px) { .rung .rl-m { grid-template-columns: minmax(0, 1fr); gap: 18px; } }
.stat { border-top: 1px solid var(--ink); padding-top: 24px; }
.stat .chip { display: inline-flex; margin-top: 24px; }
.honest { border: 1px solid var(--ink); padding: 40px 44px; margin-top: 64px; display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 40px; }
@media (max-width: 720px) { .honest { padding: 24px; grid-template-columns: minmax(0, 1fr); gap: 20px; } }

/* ---- practice ---- */
.modes { display: flex; gap: 28px; flex-wrap: wrap; border-bottom: 1px solid var(--ink); }
.fc { border: 1px solid var(--ink); padding: 32px 36px 36px; min-height: 320px; display: flex; flex-direction: column; margin-top: 32px; }
.fc .front { font-size: clamp(24px, 2.4vw, 32px); margin-top: 18px; }
.fc .prompt { margin-top: 14px; }
.fc .back { margin-top: auto; padding-top: 28px; border-top: 1px solid var(--hair); }
.fc .def { font-size: 19px; line-height: 1.5; }
.deckbar { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; margin-top: 20px; }
.deckbar .tl { margin-left: auto; }
.score { border-top: 1px solid var(--ink); padding-top: 18px; }
.score .srow { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--hair); }
.score .sv { font-family: var(--A); font-size: 24px; font-weight: 800; letter-spacing: -.03em; }
.score .sv i { font-style: normal; font-weight: 400; font-size: 14px; color: var(--mute); }
.brief { border: 1px solid var(--ink); padding: 32px 36px; margin-top: 44px; display: grid; grid-template-columns: 1fr 2fr; gap: 32px; }
@media (max-width: 720px) { .brief { grid-template-columns: minmax(0, 1fr); padding: 24px; } }
.inj { border-top: 1px solid var(--hair); padding: 36px 0 40px; display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 32px; }
.inj .clock { font-family: var(--A); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.inj .clock span { display: block; font-weight: 400; color: var(--mute); margin-top: 8px; letter-spacing: .08em; }
.opts { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
.opt { text-align: left; border: 1px solid var(--hair); padding: 14px 18px; font-family: var(--N); font-size: 16px; line-height: 1.45; display: flex; gap: 14px; align-items: flex-start; transition: border-color .15s; }
.opt::before { content: ""; width: 12px; height: 12px; border: 1px solid var(--ink); flex: none; margin-top: 5px; }
.opt:hover { border-color: var(--ink); }
.opt[aria-pressed="true"] { border-color: var(--ink); }
.opt[aria-pressed="true"]::before { background: var(--ink); }
.reveal { margin-top: 22px; border-left: 2px solid var(--orange); padding: 4px 0 4px 20px; }
.reveal .note { margin-top: 12px; }
.ttlinks { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 32px; }
@media (max-width: 720px) { .inj { grid-template-columns: minmax(0, 1fr); gap: 16px; } }

/* ---- library ---- */
/* Band colors are data colors: they mean Intent, Composition, Motion, Proof and nothing else. */
:root { --b0: #1B6E72; --b1: #B4632A; --b2: #6B5B8A; --b3: #3D5A3A; --tile: #ffffff; --tile-d: #15140f; }
.b0 { --bc: var(--b0); } .b1 { --bc: var(--b1); } .b2 { --bc: var(--b2); } .b3 { --bc: var(--b3); }

.libbar { display: flex; align-items: flex-start; gap: 40px; flex-wrap: wrap; padding-bottom: 18px; border-bottom: 1px solid var(--ink); }
.dark .libbar { border-color: var(--ink-d); }
.fgroup { display: flex; flex-direction: column; gap: 10px; }
.flab { color: var(--ink); font-weight: 600; }
.libbar .tabs { border-bottom: 0; gap: 22px; }
.libbar .tab { padding-bottom: 4px; }
.bchips { display: flex; gap: 8px; flex-wrap: wrap; }
.bchip { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px 0 10px; border: 1.5px solid var(--bc); border-radius: 999px; background: transparent; color: var(--bc); font-family: var(--A); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; cursor: pointer; transition: background .15s, color .15s; }
.bchip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bc); flex: none; }
.bchip:hover { background: color-mix(in srgb, var(--bc) 12%, transparent); }
.bchip[aria-pressed="true"] { background: var(--bc); color: #fff; }
.bchip[aria-pressed="true"] .dot { background: #fff; }
.bchip:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.libbar .count { margin-left: auto; align-self: flex-end; padding-bottom: 6px; }

.libgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 28px; }
.tile { display: flex; background: var(--tile); border: 1px solid var(--hair); min-height: 236px; transition: border-color .15s, box-shadow .15s, transform .15s; }
.tile[hidden] { display: none; }
.tile:hover, .tile:focus-visible { border-color: var(--ink); box-shadow: 0 10px 26px -14px rgba(0,0,0,.35); transform: translateY(-2px); outline: none; }
.tile:focus-visible { box-shadow: 0 0 0 2px var(--orange), 0 10px 26px -14px rgba(0,0,0,.35); }
.tile .spine { display: flex; flex-direction: column; width: 10px; flex: none; }
.tile .spine i { flex: 1; background: var(--bc); }
.tile .tbody { display: flex; flex-direction: column; flex: 1; min-width: 0; padding: 16px 18px 18px; }
.tile .tag { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; font-family: var(--A); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; border: 1.5px solid var(--ink); color: var(--ink); }
.tile .tag.case { background: var(--ink); color: var(--paper); }
.tile .nsrc { font-size: 10px; }
.tile .tname { font-size: 19px; line-height: 1.2; margin-top: 12px; letter-spacing: .01em; transition: color .15s; }
.tile:hover .tname { color: var(--orange); }
.tile .tsum { margin-top: 8px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tile .cells { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: auto; padding-top: 16px; font-family: var(--A); font-size: 10px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.tile .cl { display: inline-flex; align-items: center; gap: 6px; }
.tile .cl .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--bc); flex: none; }
.dark .tile { background: var(--tile-d); border-color: var(--hair-d); }
.dark .tile:hover { border-color: var(--ink-d); }
.dark .tile .tag { border-color: var(--ink-d); color: var(--ink-d); }
.dark .tile .tag.case { background: var(--ink-d); color: var(--black); }
.empty { margin-top: 32px; }
.libfoot { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-top: 40px; }

/* Entry panel: slides in from the right; the full page at /library/name is one click away. */
.scrim { position: fixed; inset: 0; background: rgba(11,11,10,.42); z-index: 60; opacity: 0; transition: opacity .2s; }
.scrim.on { opacity: 1; }
.epanel { position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100vw); background: var(--paper); color: var(--ink); border-left: 1px solid var(--ink); box-shadow: -24px 0 48px -24px rgba(0,0,0,.4); z-index: 61; overflow-y: auto; overscroll-behavior: contain; transform: translateX(100%); transition: transform .28s cubic-bezier(.2,.7,.2,1); outline: none; }
.epanel.on { transform: none; }
.dark .epanel { background: var(--black); color: var(--ink-d); border-color: var(--hair-d); }
.epanel .ehead { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 28px; background: inherit; border-bottom: 1px solid var(--hair); z-index: 1; }
.dark .epanel .ehead { border-color: var(--hair-d); }
.epanel .ehead .spine { display: inline-flex; gap: 3px; margin-right: 10px; vertical-align: middle; }
.epanel .ehead .spine i { display: inline-block; width: 10px; height: 10px; background: var(--bc); }
.epanel .close { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border: 1px solid var(--ink); background: transparent; color: var(--ink); font-family: var(--A); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.epanel .close:hover { background: var(--ink); color: var(--paper); }
.dark .epanel .close { border-color: var(--ink-d); color: var(--ink-d); }
.epanel .ebody { padding: 28px 28px 40px; }
.epanel .h2 { font-size: clamp(28px, 4vw, 36px); line-height: 1.05; }
.epanel .stack { display: flex; flex-direction: column; gap: 16px; }
.epanel .sect { margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--hair); }
.dark .epanel .sect { border-color: var(--hair-d); }
.epanel .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.epanel .cchip { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px 0 10px; border: 1px solid var(--hair); color: var(--ink); font-family: var(--A); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; background: transparent; cursor: pointer; }
.epanel .cchip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bc); }
.epanel .cchip:hover { border-color: var(--ink); }
.dark .epanel .cchip { color: var(--ink-d); border-color: var(--hair-d); }
.epanel .srcs { display: flex; flex-direction: column; gap: 16px; margin-top: 12px; }
.epanel .efoot { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 36px; }
body.locked { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .epanel, .scrim, .tile { transition: none; } .tile:hover { transform: none; } }
@media (max-width: 1100px) { .libgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) { .libgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .libbar { gap: 24px; } .libbar .count { margin-left: 0; width: 100%; } }
@media (max-width: 520px) { .libgrid { grid-template-columns: minmax(0, 1fr); } .tile { min-height: 0; } .epanel .ehead, .epanel .ebody { padding-left: 20px; padding-right: 20px; } }

/* ---- entry ---- */
.entry-rail .fact:last-child { border-bottom: 1px solid var(--hair); }
.src { display: flex; flex-direction: column; gap: 4px; }
.src .chip { font-size: 10px; }
.onpage { position: sticky; top: 24px; }
.onpage a { display: block; font-size: 15px; color: var(--mute); padding: 5px 0; }
.onpage a:hover { color: var(--ink); }
.cellsheets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 20px; }
.cellsheet { padding: 18px 20px 22px; min-height: 150px; display: block; }
.cellsheet:hover .h4 { color: var(--orange); }
@media (max-width: 720px) { .cellsheets { grid-template-columns: minmax(0, 1fr); gap: 16px; } }
.related { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 16px; }
.related a { font-size: 17px; }
.anchor { scroll-margin-top: 24px; }

/* ---- print ---- */
@media print {
  .hdr, .ftr, .menu-btn, .skip, .rl, .photo, .band { display: none !important; }
  body { background: #fff; }
  .wrap { padding: 24px 0; }
  .sec.noprint { display: none; }
  .pc, .pband, .sheet { break-inside: avoid; }
  .poster-foot, .pc .tl { display: none; }
  .tick { border-color: #000; color: #000; }
  .pc.s1, .pc.s2 { background: #fff; }
  a { color: inherit; }
}

/* ---- small utilities ---- */
.self-end { align-self: end; }
.chap + * { margin-top: 64px; }
.ital { font-style: italic; }
.fw { min-width: 760px; }
.fw td, .fw th { font-size: 15px; vertical-align: top; }
.fw tbody th { font-size: 18px; }
.fw tbody th .sub { font-family: var(--N); font-size: 14px; letter-spacing: 0; text-transform: none; font-weight: 400; margin-top: 4px; }
.tlnote { margin-top: 16px; }
.tl-legend { display: flex; gap: 24px; flex-wrap: wrap; margin-top: 28px; }
.tl-legend span { display: inline-flex; align-items: center; gap: 8px; }
.tl-legend .dot { position: static; width: 10px; height: 10px; border-radius: 50%; background: var(--ink); }
.tl-legend .dot.c { background: var(--orange); } .tl-legend .dot.a { background: var(--paper); border: 2px solid var(--ink); } .tl-legend .dot.f { background: var(--paper); border: 2px solid var(--orange); }
.lib-count { margin-left: auto; }
.stack.start { align-items: flex-start; }
.mx thead th .sub { font-family: var(--N); font-size: 14px; font-style: italic; letter-spacing: 0; text-transform: none; font-weight: 400; margin-top: 4px; }
.dark .card, .dark .card.soft { border-top-color: var(--hair-d); }
.photo.hero { margin-left: auto; }
.build-close { display: flex; flex-direction: column; gap: 28px; justify-content: flex-end; align-items: flex-start; }

.mt-0{margin-top:0}

/* ---- shared components: tile cards and checklist rows ----
   A tile is a framed card for a thing you can act on or pick up: a role, a gap, a way in, a practice.
   A checklist row is for a condition or a promise: read it, tick it, hold someone to it. */
.tgrid { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 20px; }
.tgrid.n2 { --n: 2; } .tgrid.n3 { --n: 3; } .tgrid.n4 { --n: 4; } .tgrid.n5 { --n: 5; }
.tcard { position: relative; display: flex; flex-direction: column; background: var(--tile); border: 1px solid var(--hair); border-top: 4px solid var(--ink); padding: 24px 26px 26px; color: inherit; transition: border-color .15s, box-shadow .15s, transform .15s; }
.tcard:hover { border-color: var(--ink); border-top-color: var(--orange); box-shadow: 0 12px 28px -16px rgba(0,0,0,.35); transform: translateY(-2px); }
.tcard > .h3 { font-size: 22px; }
.tcard .tfoot { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--hair2); }
.tcard .tfoot.stack { gap: 12px; }
.tcard .tlist { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.tcard .tlist li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.45; color: var(--mute); }
.tcard .tlist li::before { content: ""; width: 9px; height: 9px; border: 1.5px solid var(--orange); flex: none; margin-top: 6px; }
.tcard .sq.lg { width: 28px; height: 28px; margin-bottom: 18px; }
.tcard.open { background: transparent; border: 1.5px dashed var(--orange); border-top-width: 1.5px; }
.tcard.open:hover { border-color: var(--orange); }
.dark .tcard { background: var(--tile-d); border-color: var(--hair-d); border-top-color: var(--ink-d); }
.dark .tcard:hover { border-color: var(--mute-d); border-top-color: var(--orange); box-shadow: 0 12px 28px -16px rgba(0,0,0,.8); }
.dark .tcard .tfoot { border-top-color: var(--hair-d); }
.dark .tcard .tlist li { color: var(--mute-d); }
.dark .tcard.open { background: transparent; border-color: var(--orange); }
.cklist { border-top: 1px solid var(--ink); }
.dark .cklist { border-top-color: var(--ink-d); }
.ck { display: grid; grid-template-columns: 24px 44px minmax(0, 300px) minmax(0, 1fr); column-gap: 28px; align-items: start; padding: 24px 0 26px; border-bottom: 1px solid var(--hair); }
.dark .ck { border-bottom-color: var(--hair-d); }
.ckbox { position: relative; width: 22px; height: 22px; border: 1.5px solid var(--ink); margin-top: 1px; flex: none; }
.dark .ckbox { border-color: var(--ink-d); }
.ck.done .ckbox { background: var(--orange); border-color: var(--orange); }
.ck.done .ckbox::after { content: ""; position: absolute; left: 7px; top: 2px; width: 5px; height: 11px; border-right: 2px solid #000; border-bottom: 2px solid #000; transform: rotate(45deg); }
.ckn { font-family: var(--A); font-size: 12px; font-weight: 600; letter-spacing: .16em; color: var(--mute); padding-top: 5px; }
.dark .ckn { color: var(--mute-d); }
.ckt { font-family: var(--A); font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; line-height: 1.3; padding-top: 2px; }
.ckd { font-family: var(--N); font-size: 17px; line-height: 1.5; color: var(--mute); }
.dark .ckd { color: var(--mute-d); }
.ckd i { color: var(--ink); }
.dark .ckd i { color: var(--ink-d); }
.ckfoot { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-top: 18px; }
@media (max-width: 1100px) { .tgrid.n5 { --n: 3; } .tgrid.n4 { --n: 2; } }
@media (max-width: 860px) { .tgrid.n3, .tgrid.n5 { --n: 2; } .tcard { padding: 20px 20px 22px; } }
@media (max-width: 560px) { .tgrid, .tgrid.n2, .tgrid.n3, .tgrid.n4, .tgrid.n5 { --n: 1; } }
@media (max-width: 960px) { .ck { grid-template-columns: 24px 44px minmax(0, 1fr); } .ckd { grid-column: 3; margin-top: 8px; } }
@media (max-width: 480px) { .ck { grid-template-columns: 22px 36px minmax(0, 1fr); column-gap: 16px; } .ckbox { width: 20px; height: 20px; } .ck.done .ckbox::after { left: 6px; top: 1px; } }
@media (prefers-reduced-motion: reduce) { .tcard { transition: none; } .tcard:hover { transform: none; } }

/* ---- run: the two parts, protocol step tiles, application group counters ---- */
.tcard.ink { background: var(--ink); color: var(--paper); border-color: var(--ink); border-top-color: var(--orange); }
.tcard.ink .body, .tcard.ink .k, .tcard.ink .num { color: var(--mute-d); }
.tcard.ink:hover { border-color: var(--ink); }
.part { display: flex; gap: 22px; align-items: flex-start; }
.part .pn { font-family: var(--A); font-size: 48px; font-weight: 800; line-height: .85; letter-spacing: -.05em; color: var(--orange); flex: none; min-width: 44px; }
.part .pt { min-width: 0; }
.step .sh { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.step .sn { font-family: var(--A); font-size: 56px; font-weight: 800; line-height: .85; letter-spacing: -.05em; }
.step .clock { font-family: var(--A); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; text-align: right; padding-top: 6px; }
.step .clock span { display: block; font-weight: 400; color: var(--mute); margin-top: 6px; letter-spacing: .08em; text-transform: none; }
.tcard.ink .clock span { color: var(--mute-d); }
.step .h4 { margin-top: 22px; }
a.cnt { text-decoration: none; }
.cnt .n { font-family: var(--A); font-size: 64px; font-weight: 800; line-height: .85; letter-spacing: -.05em; color: var(--orange); }
.cnt .h3 { margin-top: 18px; }
@media (max-width: 560px) { .part .pn { font-size: 40px; } .cnt .n { font-size: 52px; } }

/* ---- Composition Fit Canvas (/fit). Reuses the poster's mast, head, tiles, and ticks. ---- */
.fit { --bc: var(--b1); }
.fitgrid { display: grid; grid-template-columns: 232px repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.fitgrid .fh { padding: 16px 22px 18px; border-left: 1px solid var(--hair); border-bottom: 1px solid var(--ink); }
.fitgrid .fh.corner { border-left: 0; }
.fitgrid .fh .k { display: block; }
.fitgrid .fh .body { margin-top: 6px; }
.fitgrid .fh.work .k { color: var(--orange); }
.fitgrid .frl { position: relative; padding: 22px 22px 22px 32px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; border-top: 1px solid var(--hair); }
.fitgrid .frl::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 8px; background: var(--bc); }
.fitgrid .frl .bn { font-family: var(--A); font-size: 44px; font-weight: 800; line-height: .85; letter-spacing: -.05em; color: var(--bc); }
.fitgrid .frl .h4 { font-size: 18px; }
.fitgrid .frl .body { font-style: italic; margin-top: 6px; font-size: 13px; }
.fit .pc { min-height: 150px; border-top: 1px solid var(--hair); }
.fit .pc .ph .col { font-size: 15px; }
.fit .pc.work { --bc: var(--orange); border-left-color: var(--ink); }
.fit .pc.s0 { outline: 0; background: var(--tile); }
.fit .pc.s0 .tick[aria-pressed="true"] { border-style: dashed; }
#fit-out .fit-empty { grid-column: 1 / -1; padding: 22px 0 0; }
@media (max-width: 960px) {
  .fitgrid { grid-template-columns: minmax(0, 1fr); }
  .fitgrid .fh:not(.corner) { display: none; }
  .fitgrid .fh.corner { display: none; }
  .fitgrid .frl { border-top: 1px solid var(--ink); }
  .fit .pc, .fit .pc.work, .fit .pc.first { border-left: 0; min-height: 0; }
}

/* ---- Coverage: the count table and the framework table ---- */
.certtab.cov .share { padding-right: 0; }
.certtab.cov .name a { font-family: var(--A); font-size: 15px; font-weight: 600; }
.sharebar { display: flex; align-items: center; gap: 12px; }
.sharebar b { font-family: var(--A); font-size: 24px; font-weight: 800; letter-spacing: -.02em; line-height: 1; color: var(--bc); min-width: 34px; }
.sharebar .k { white-space: nowrap; }
.sharebar .bar { flex: 1; max-width: 260px; height: 6px; background: var(--hair); overflow: hidden; }
.sharebar .bar i { display: block; height: 100%; background: var(--bc); }
.dark .sharebar .bar { background: var(--hair-d); }
.covsel, .covq { height: 32px; border: 1.5px solid var(--ink); border-radius: 0; background: transparent; color: var(--ink); font-family: var(--A); font-size: 13px; padding: 0 10px; min-width: 240px; -webkit-appearance: none; appearance: none; }
.covsel { padding-right: 32px; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 16px) 13px, calc(100% - 11px) 13px; background-size: 5px 5px; background-repeat: no-repeat; }
.covq::placeholder { color: var(--mute); }
.covsel:focus-visible, .covq:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.bchip.none { --bc: var(--mute); }
.covtab { width: 100%; border-collapse: collapse; margin-top: 24px; font-size: 15px; line-height: 1.45; }
.covtab th, .covtab td { text-align: left; vertical-align: top; padding: 14px 16px 14px 0; border-top: 1px solid var(--hair); }
.covtab thead th { position: sticky; top: 0; z-index: 2; background: var(--paper); font-family: var(--A); font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--mute); padding-top: 12px; padding-bottom: 10px; border-top: 0; border-bottom: 1px solid var(--ink); }
.covtab thead th button { all: unset; cursor: pointer; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; }
.covtab thead th button:hover, .covtab thead th[aria-sort] button { color: var(--ink); }
.covtab thead th button:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.covtab thead th[aria-sort="ascending"] button::after { content: " \2191"; }
.covtab thead th[aria-sort="descending"] button::after { content: " \2193"; }
.covtab .fwk { width: 30%; }
.covtab .fwk a { color: inherit; text-decoration: none; font-weight: 600; }
.covtab .fwk a:hover { color: var(--orange); }
.covtab .fwk a:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.covtab .fwk span { display: block; margin-top: 2px; }
.covtab .cat { width: 18%; color: var(--mute); }
.covtab .cm { display: inline-flex; align-items: center; gap: 6px; margin: 0 14px 4px 0; font-family: var(--A); font-size: 12px; letter-spacing: .04em; white-space: nowrap; }
.covtab .cm .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bc); flex: none; }
.covtab .ev { width: 110px; white-space: nowrap; }
.covtab .shape { width: 160px; font-size: 14px; }
.covtab tr[hidden] { display: none; }
.dark .covtab th, .dark .covtab td { border-color: var(--hair-d); }
.dark .covtab thead th { background: var(--black); }
@media (max-width: 720px) {
  /* Tables become stacked blocks so the grid rows take the full width instead of the table's column widths. */
  .certtab.cov, .certtab.cov tbody, .covtab, .covtab tbody { display: block; width: 100%; }
  .certtab.cov thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .certtab.cov tbody tr { display: grid; grid-template-columns: 44px minmax(0, 1fr); padding: 14px 0; border-top: 1px solid var(--hair); }
  .certtab.cov tbody tr.bandrow { display: block; padding: 18px 0 10px; }
  .certtab.cov tbody tr.bandrow th { display: block; padding: 0; border-top: 0; }
  .certtab.cov tbody tr td { padding: 0; border-top: 0; }
  .certtab.cov .share { grid-column: 2; margin-top: 6px; }
  .sharebar .bar { max-width: none; }
  .libbar .fgroup { width: 100%; }
  .covsel, .covq { width: 100%; min-width: 0; }
  .covtab thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .covtab tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 14px 0; border-top: 1px solid var(--hair); }
  .covtab tbody tr td, .covtab .fwk, .covtab .cat, .covtab .ev, .covtab .shape { padding: 0; border-top: 0; width: auto; }
  .covtab .fwk { grid-column: 1; grid-row: 1; }
  .covtab .ev { grid-column: 2; grid-row: 1; }
  .covtab .cat, .covtab .cells, .covtab .shape { grid-column: 1 / -1; }
  .covtab .cm { white-space: normal; }
}