.viz { margin: 2.2rem 0; } .viz svg { display: block; width: 100%; height: auto; } .viz svg text { font-family: var(--bwd-font-body); font-size: 13.5px; } .viz svg text.b { font-weight: 600; }
.viz svg text.m { font-family: var(--bwd-font-instrument); font-weight: 500; } .viz svg text.sm { font-size: 13px; } .viz svg text.lg { font-size: 17px; }
.viz figcaption { margin-top: .8rem; font-size: .92rem; color: var(--bwd-ink-soft); } .viz .viz-src { display: block; margin-top: .25rem; font-family: var(--bwd-font-instrument); font-size: .78rem; letter-spacing: .03em; } .viz .viz-src-flat { margin-top: 0; }
@media (max-width: 820px) { figure.viz svg.viz-wide { display: none !important; } }
@media (min-width: 821px) { figure.viz svg.viz-phone { display: none !important; } }
.viz-evidence svg.viz-phone, .viz-time svg.viz-phone, .viz-rule svg.viz-phone { max-width: 420px; }
.viz .viz-head { margin: 0 0 .8rem; font-family: var(--bwd-font-instrument); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--bwd-madder); }
.viz-list { border: 1px solid rgba(41, 36, 31, .16); border-radius: 5px; padding: 1.3rem 1.4rem; }
.tick-list { list-style: none; margin: 0; padding: 0; } .tick-list li { padding: .55rem 0; border-bottom: 1px solid rgba(41, 36, 31, .1); } .tick-list li:last-child { border-bottom: 0; }
.tick-list label { display: flex; align-items: flex-start; gap: .7rem; cursor: pointer; } .tick-list input { flex: 0 0 auto; width: 1.15rem; height: 1.15rem; margin: .22rem 0 0; accent-color: var(--bwd-madder); }
.viz-list > figcaption:last-child { margin-top: .9rem; padding-top: .8rem; border-top: 1px solid rgba(41, 36, 31, .16); font-family: var(--bwd-font-instrument); font-size: .78rem; letter-spacing: .03em; }
.paper-grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: 1.6rem; } .paper-grid .viz-head { margin-bottom: .3rem; }
.viz-table { width: 100%; border-collapse: collapse; } .viz-table th, .viz-table td { text-align: left; vertical-align: top; padding: .8rem .9rem .8rem 0; border-bottom: 1px solid rgba(41, 36, 31, .16); }
.viz-table thead th { font-family: var(--bwd-font-instrument); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--bwd-ink-soft); font-weight: 500; } .viz-table tbody th { font-weight: 600; width: 8rem; }
.viz-guar tbody th, .viz-size tbody th { font-family: var(--bwd-font-display); font-size: 1.35rem; color: var(--bwd-evergreen); }
.viz-apply tbody th { font-weight: 500; width: 40%; } .viz-apply td.cov { font-weight: 600; width: 8.5rem; } .viz-apply td.cov-yes { color: var(--bwd-evergreen); } .viz-apply td.cov-no { color: var(--bwd-madder); }
.gap-grid { display: grid; grid-template-columns: 1fr 5.4rem 1fr; align-items: stretch; }
.gap-col { border-radius: 5px; padding: 1.2rem 1.3rem; } .gap-col ul { margin: 0; padding-left: 1.1rem; } .gap-col li { margin-bottom: .45rem; } .gap-col li:last-child { margin-bottom: 0; }
.gap-law { background: var(--bwd-evergreen); color: var(--bwd-paper); } .gap-ins { border: 1.5px dashed var(--bwd-madder); }
.gap-head { margin: 0 0 .7rem; font-family: var(--bwd-font-display); font-weight: 600; font-size: 1.35rem; line-height: 1.2; } .gap-ins .gap-head { color: var(--bwd-madder); }
.gap-mid { position: relative; display: flex; align-items: center; justify-content: center; } .gap-mid::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1.5px dashed var(--bwd-madder); }
.gap-mid span { position: relative; white-space: nowrap; background: var(--bwd-paper); padding: .2rem .35rem; font-family: var(--bwd-font-instrument); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--bwd-madder); }
.viz-worked { background: var(--bwd-wash); border-radius: 5px; padding: 1.4rem 1.5rem; }
.worked-steps { list-style: none; margin: 0 0 1rem; padding: 0; counter-reset: ws; display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; }
.worked-steps li { counter-increment: ws; position: relative; background: var(--bwd-paper); border-radius: 5px; padding: .9rem 1rem .9rem 2.9rem; font-weight: 500; }
.worked-steps li::before { content: counter(ws); position: absolute; left: .9rem; top: .75rem; font-family: var(--bwd-font-instrument); font-size: 1.15rem; color: var(--bwd-madder); }
.worked-out { margin: .5rem 0 0; } .worked-out span { display: block; font-family: var(--bwd-font-instrument); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--bwd-ink-soft); }
.worked-do { padding-top: .6rem; border-top: 1px solid rgba(41, 36, 31, .16); font-weight: 600; }
.ledger { display: grid; grid-template-columns: 1.2fr .7fr 1.6fr; gap: 1.6rem; border-top: 2px solid var(--bwd-ink); padding-top: 1.1rem; }
.ledger-tiles { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.ledger-tiles li { padding: .45rem .7rem; border-radius: 4px; font-weight: 600; } .tile-g { background: var(--bwd-evergreen); color: var(--bwd-paper); } .tile-gap { border: 1.5px dashed var(--bwd-madder); color: var(--bwd-madder); }
.ledger-note { margin: .6rem 0 0; font-size: .9rem; color: var(--bwd-ink-soft); }
.ledger-figs dl { margin: 0; } .ledger-figs dl > div { display: grid; grid-template-columns: 6.2rem 1fr; gap: .8rem; padding: .45rem 0; border-bottom: 1px solid rgba(41, 36, 31, .12); } .ledger-figs dl > div:last-child { border-bottom: 0; }
.ledger-figs dt { font-family: var(--bwd-font-instrument); font-weight: 500; color: var(--bwd-madder); } .ledger-figs dd { margin: 0; font-size: .92rem; }
.refs a { overflow-wrap: anywhere; }
@media (max-width: 820px) { .ledger { grid-template-columns: 1fr 1fr; } .ledger-figs { grid-column: 1 / -1; } }
@media (max-width: 640px) { .viz-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .viz-table, .viz-table tbody, .viz-table tr, .viz-table th, .viz-table td { display: block; width: auto !important; } .viz-table tr { border: 1px solid rgba(41, 36, 31, .16); border-radius: 5px; padding: 1rem 1.1rem; margin-bottom: .9rem; } .viz-table th, .viz-table td { border: 0; padding: 0; } .viz-table td + td { margin-top: .7rem; } .viz-table tbody th { margin-bottom: .6rem; } .viz-table td::before { content: attr(data-label); display: block; margin-bottom: .3rem; font-family: var(--bwd-font-instrument); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--bwd-ink-soft); font-weight: 500; }
.viz-table td:empty { display: none; } .viz-apply td.cov { white-space: normal; } .gap-grid { grid-template-columns: 1fr; } .gap-mid { height: 3rem; } .gap-mid::before { left: 50%; right: auto; top: 0; bottom: 0; border-top: 0; border-left: 1.5px dashed var(--bwd-madder); }
.worked-steps, .paper-grid, .ledger { grid-template-columns: 1fr; } .paper-grid { gap: 1rem; } }
.ins-road svg.viz-phone { max-width: 440px; } .ins-road svg text.xs { font-size: 11px; letter-spacing: .04em; }
.ins-road .col-hl { opacity: 0; transition: opacity .3s var(--ease); } .ins-road .box { transition: transform .45s var(--ease); } .ins-road .hit { cursor: default; }
.ins-road svg:has(.hit-0:hover) .hl-0, .ins-road svg:has(.hit-1:hover) .hl-1, .ins-road svg:has(.hit-2:hover) .hl-2, .ins-road svg:has(.hit-3:hover) .hl-3, .ins-road svg:has(.hit-4:hover) .hl-4, .ins-road svg:has(.hit-5:hover) .hl-5 { opacity: .9; }
.ins-road svg:has(.hit-1:hover) .box { transform: translateX(108px); } .ins-road svg:has(.hit-2:hover) .box { transform: translateX(216px); } .ins-road svg:has(.hit-3:hover) .box { transform: translateX(324px); }
.ins-road svg:has(.hit-4:hover) .box { transform: translateX(432px); } .ins-road svg:has(.hit-5:hover) .box { transform: translateX(540px); }
.ins-count .pips { display: flex; gap: 4px; margin-bottom: .5rem; } .ins-count .pip { width: 13px; height: 13px; border-radius: 2px; background: var(--bwd-ink); } .ins-count .pip-none { background: transparent; border: 1.5px dashed var(--bwd-madder); }
.ins-count > figcaption { font-family: var(--bwd-font-display); font-weight: 600; font-size: 1.2rem; line-height: 1.35; color: var(--bwd-ink); }
.ins-contents td.nil { color: var(--bwd-ink-soft); font-style: italic; } .ins-contents td.nil::before { font-style: normal; }
.ins-flow .flow { display: flex; flex-direction: column; align-items: center; }
.flow-start { margin: 0; padding: .75rem 1.1rem; border: 1.5px solid var(--bwd-ink); border-radius: 5px; font-weight: 600; text-align: center; max-width: 28rem; }
.flow-down { display: block; position: relative; width: 1.5px; height: 1.5rem; background: var(--bwd-ink); }
.flow-down::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 7px; height: 7px; border-right: 1.5px solid var(--bwd-ink); border-bottom: 1.5px solid var(--bwd-ink); transform: translateX(-50%) rotate(45deg); }
.flow-q { margin: 0; padding: 1rem 1.3rem; background: var(--bwd-wash); border-radius: 5px; text-align: center; font-family: var(--bwd-font-display); font-weight: 600; font-size: 1.3rem; line-height: 1.3; max-width: 32rem; }
.flow-q + .flow-down::after { display: none; }
.flow-branches { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; width: 100%; padding-top: 1.4rem; }
.flow-branches::before { content: ""; position: absolute; top: 0; left: 25%; right: 25%; height: 1.4rem; border: 1.5px solid var(--bwd-ink); border-bottom: 0; border-radius: 6px 6px 0 0; }
.flow-yes, .flow-no { border-radius: 5px; padding: 1rem 1.2rem; } .flow-yes { background: var(--bwd-evergreen); color: var(--bwd-paper); } .flow-no { border: 1.5px dashed var(--bwd-madder); background: var(--bwd-paper); }
.flow-tag { display: block; margin-bottom: .45rem; font-family: var(--bwd-font-instrument); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; } .flow-yes .flow-tag { color: rgba(246, 241, 232, .82); } .flow-no .flow-tag { color: var(--bwd-madder); }
.flow-yes p, .flow-no p { margin: 0; font-weight: 500; line-height: 1.45; }
.ins-checks .tick-q { display: block; font-weight: 600; } .ins-checks .tick-why { display: block; margin-top: .15rem; font-size: .92rem; color: var(--bwd-ink-soft); }
.ins-glance { border-top: 2px solid var(--bwd-ink); padding-top: 1rem; }
.glance { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(41, 36, 31, .16); border: 1px solid rgba(41, 36, 31, .16); }
.glance li { display: flex; flex-direction: column; gap: .35rem; padding: .9rem 1rem 1rem; background: var(--bwd-paper); }
.glance .g-k { font-family: var(--bwd-font-instrument); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--bwd-madder); }
.glance .g-v { font-family: var(--bwd-font-display); font-weight: 600; font-size: 1.2rem; line-height: 1.25; }
.glance .g-src { margin-top: auto; padding-top: .45rem; border-top: 1px solid rgba(138, 107, 47, .45); font-family: var(--bwd-font-instrument); font-size: .74rem; letter-spacing: .03em; color: var(--bwd-ink-soft); }
@media (max-width: 820px) { .glance { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .flow-branches { grid-template-columns: 1fr; gap: .9rem; padding-top: 0; } .flow-branches::before { display: none; } .flow-q + .flow-down::after { display: block; } .glance { grid-template-columns: 1fr; } }