.roundtable-detail { --rt-ink: #241d25; --rt-copy: #514851; --rt-muted: #7d737d; --rt-rule: #c9c1ca; --rt-paper: #f1edf1; --rt-panel: #e8e3e7; --rt-berry: #8b1a5b; color: var(--rt-ink); background: var(--rt-paper); }
.roundtable-detail .work-detail__site { width: min(calc(100% - 72px), 822px); max-width: 822px; padding-bottom: 76px; }
.roundtable-detail .roundtable-hero { display: block; min-height: 0; padding: 28px 0 25px; border-bottom: 1px solid rgba(125, 115, 125, .28); background: transparent; }
.roundtable-detail .work-hero h2 { margin: 6px 0 0; color: var(--rt-ink); font-family: var(--work-display); font-size: clamp(26px, 2.8vw, 34px); font-weight: 620; line-height: 1.12; letter-spacing: -.025em; }
.roundtable-detail .work-hero__intro { max-width: 620px; margin: 10px 0 0; color: var(--rt-copy); font-family: var(--work-reading); font-size: 14px; line-height: 1.6; }
.roundtable-title-link { position: relative; display: inline-block; color: inherit; text-decoration: none; }
.roundtable-title-link::after { position: absolute; right: 0; bottom: -7px; left: 0; height: 2px; background: var(--rt-berry); content: ""; transform: scaleX(0); transform-origin: left; transition: transform 160ms ease; }
.roundtable-title-link:hover::after, .roundtable-title-link:focus-visible::after { transform: scaleX(1); }
.roundtable-title-link:focus-visible { outline: 2px solid var(--rt-berry); outline-offset: 8px; }
.roundtable-article { padding-top: 36px; font-family: var(--work-reading); }
.roundtable-intro { display: grid; gap: 22px; }
.roundtable-intro p { margin: 0; color: #3f373f; font-size: clamp(15px, 1.45vw, 16px); line-height: 1.88; }
.roundtable-intro a { color: var(--rt-berry); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.roundtable-intro a:hover, .roundtable-intro a:focus-visible { color: #b42d77; }
.roundtable-intro a:focus-visible { outline: 2px solid var(--rt-berry); outline-offset: 4px; }
.roundtable-section + .roundtable-section { margin-top: clamp(42px, 6vw, 58px); }
.roundtable-intro + .roundtable-section { margin-top: clamp(56px, 7vw, 72px); }
.roundtable-section p, .roundtable-note p { margin: 0; color: var(--rt-copy); font-size: 14px; line-height: 1.78; }
.roundtable-flow { display: grid; gap: 0; margin: 21px 0 0; padding: 0; border-top: 1px solid var(--rt-rule); list-style: none; counter-reset: rt-step; }
.roundtable-flow li { display: grid; grid-template-columns: 28px 112px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--rt-rule); counter-increment: rt-step; }
.roundtable-flow li::before { color: var(--rt-berry); font: 700 10px/1 var(--mono); content: "0" counter(rt-step); }
.roundtable-flow strong { color: var(--rt-ink); font-size: 13px; font-weight: 650; }
.roundtable-flow span { color: var(--rt-copy); font-size: 13px; line-height: 1.65; }
.roundtable-case + .roundtable-case { margin-top: 48px; padding-top: 34px; border-top: 1px dotted var(--rt-rule); }
.roundtable-case header { margin-bottom: 13px; }
.roundtable-case__index { display: block; margin-bottom: 8px; color: var(--rt-muted); font-family: var(--work-reading); font-size: 11px; font-weight: 600; line-height: 1.4; letter-spacing: .04em; }
.roundtable-case h4 { margin: 0; color: var(--rt-ink); font-family: var(--work-reading); font-size: 15px; font-weight: 600; line-height: 1.5; }
.roundtable-case__focus { margin: 0 0 14px !important; color: var(--rt-copy) !important; font-size: 13px !important; line-height: 1.7 !important; }
.roundtable-cast { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 14px !important; color: var(--rt-muted) !important; font-size: 11px !important; line-height: 1.6 !important; }
.roundtable-cast strong { color: var(--rt-ink); font-weight: 650; }
.roundtable-cast span + span::before { margin-right: 14px; color: var(--rt-rule); content: "/"; }
.roundtable-dialogue-window { width: 100%; height: min(620px, 70vh); overflow-x: hidden; overflow-y: auto; border-radius: 5px; background: rgba(232, 227, 231, .56); scrollbar-color: var(--rt-muted) transparent; scrollbar-width: thin; }
.roundtable-dialogue-window:focus-visible { outline: 2px solid var(--rt-berry); outline-offset: 4px; }
.roundtable-dialogue { display: grid; gap: 0; padding: 8px clamp(18px, 3vw, 28px) 20px; }
.roundtable-dialogue__round { padding: 18px 0 8px; }
.roundtable-dialogue__round + .roundtable-dialogue__round { margin-top: 20px; border-top: 1px solid rgba(45, 37, 45, .1); }
.roundtable-dialogue__round > small { display: block; margin-bottom: 16px; color: var(--rt-muted); font: 650 9px/1 var(--mono); letter-spacing: .08em; }
.roundtable-dialogue__round p + p { margin-top: 17px; }
.roundtable-dialogue p { font-size: 13px; line-height: 1.75; }
.roundtable-dialogue strong { display: block; margin-bottom: 4px; color: var(--rt-ink); font-size: 12px; font-weight: 650; }
.roundtable-moderator { margin-top: 28px; padding-top: 18px; border-top: 1px dotted rgba(139, 26, 91, .42); background: transparent; }
.roundtable-moderator > small { display: block; margin-bottom: 10px; color: var(--rt-berry); font-family: var(--work-reading); font-size: 11px; font-weight: 600; line-height: 1.4; letter-spacing: .04em; }
.roundtable-moderator > p { margin: 0; color: var(--rt-copy); font-size: 13px; line-height: 1.75; }
.roundtable-moderator .roundtable-next { margin-top: 12px; color: var(--rt-ink); }
.roundtable-moderator .roundtable-next strong { display: inline; margin-right: 8px; color: var(--rt-berry); font-size: 11px; letter-spacing: .03em; }
.roundtable-footer { margin-top: 30px; }
.roundtable-github-link { display: inline-flex; gap: 8px; align-items: center; padding: 6px 0 4px; border-bottom: 1px solid currentColor; color: var(--rt-berry); font-family: var(--work-reading); font-size: 12px; font-weight: 650; text-decoration: none; }
.roundtable-github-link span { font-size: 15px; transition: transform 160ms ease; }
.roundtable-github-link:hover { border-bottom-width: 2px; padding-bottom: 3px; }
.roundtable-github-link:hover span, .roundtable-github-link:focus-visible span { transform: translate(2px, -2px); }
.roundtable-github-link:focus-visible { outline: 2px solid var(--rt-berry); outline-offset: 4px; }
@media (max-width: 760px) { .roundtable-detail .work-detail__site { width: min(calc(100% - 36px), 822px); } .roundtable-flow li { grid-template-columns: 28px minmax(0, 1fr); } .roundtable-flow li span { grid-column: 2; } }