/* Nested primitives share tokens and media controls with the production theme. */ .koshi-primitive { box-sizing: border-box; min-inline-size: 0; max-inline-size: 100%; margin: 0; } .koshi-primitive--separator { inline-size: 100%; block-size: 0; border: 0; border-block-start: 1px solid var(--koshi-line); } .koshi-primitive--separator.koshi-primitive--tone-line-dark { border-block-start-color: var(--koshi-line-dark); } .koshi-container__layout { display: flex; flex-direction: column; gap: var(--koshi-primitive-gap); min-inline-size: 0; position: relative; } .koshi-primitive--container { /* Geometry belongs to each container. Only design tokens and typography inherit. */ --koshi-primitive-columns: 2; --koshi-primitive-weight-1: 1fr; --koshi-primitive-weight-2: 1fr; --koshi-primitive-weight-3: 1fr; --koshi-primitive-weight-4: 1fr; --koshi-primitive-gap: 1.5rem; container: koshi-layout / inline-size; display: grid; position: relative; inline-size: 100%; margin-inline: auto; } .koshi-container__layout > * { min-inline-size: 0; max-inline-size: 100%; } .koshi-primitive--layout-row > .koshi-container__layout { flex-direction: row; flex-wrap: wrap; } .koshi-primitive--layout-row > .koshi-container__layout > * { flex: 1 1 0; } .koshi-primitive--layout-grid > .koshi-container__layout { display: grid; grid-template-columns: repeat(var(--koshi-primitive-columns, 2), minmax(0, 1fr)); } .koshi-primitive--columns-1 { --koshi-primitive-columns: 1; } .koshi-primitive--columns-3 { --koshi-primitive-columns: 3; } .koshi-primitive--columns-4 { --koshi-primitive-columns: 4; } .koshi-primitive--layout-grid.koshi-primitive--columns-2.koshi-primitive--proportions-one-two > .koshi-container__layout { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } .koshi-primitive--layout-grid.koshi-primitive--columns-2.koshi-primitive--proportions-two-one > .koshi-container__layout { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } .koshi-primitive--layout-row.koshi-primitive--proportions-one-two > .koshi-container__layout > :nth-child(2), .koshi-primitive--layout-row.koshi-primitive--proportions-two-one > .koshi-container__layout > :first-child { flex-grow: 2; } .koshi-primitive--layout-overlay > .koshi-container__layout { display: grid; isolation: isolate; } .koshi-primitive--layout-overlay > .koshi-container__layout > * { grid-area: 1 / 1; } .koshi-primitive--gap-none { --koshi-primitive-gap: 0; } .koshi-primitive--gap-small { --koshi-primitive-gap: .75rem; } .koshi-primitive--gap-large { --koshi-primitive-gap: clamp(1.5rem, 4vw, 3rem); } .koshi-primitive--padding-small { padding: .75rem; } .koshi-primitive--padding-medium { padding: clamp(1rem, 3vw, 2rem); } .koshi-primitive--padding-large { padding: clamp(1.5rem, 5vw, 4rem); } .koshi-primitive--width-wide { max-inline-size: 80rem; } .koshi-primitive--width-page { max-inline-size: calc(100% - 2 * var(--koshi-section-inset)); } .koshi-primitive--width-compact { max-inline-size: 24rem; }.koshi-primitive--width-reading { max-inline-size: 45rem; } .koshi-primitive--alignment-start { text-align: start; } .koshi-primitive--alignment-center { text-align: center; } .koshi-primitive--alignment-end { text-align: end; } .koshi-primitive--container.koshi-primitive--alignment-start > .koshi-container__layout { align-items: start; } .koshi-primitive--container.koshi-primitive--alignment-center > .koshi-container__layout { align-items: center; } .koshi-primitive--container.koshi-primitive--alignment-end > .koshi-container__layout { align-items: end; } .koshi-primitive--container.koshi-primitive--alignment-stretch > .koshi-container__layout { align-items: stretch; } .koshi-primitive--justify-center > .koshi-container__layout { justify-content: center; } .koshi-primitive--justify-end > .koshi-container__layout { justify-content: end; } .koshi-primitive--justify-between > .koshi-container__layout { justify-content: space-between; } .koshi-primitive--height-screen { min-block-size: calc(100 * var(--koshi-viewport-unit-block, 1svh)); } .koshi-primitive--surface-paper { background: var(--koshi-paper); } .koshi-primitive--surface-cream { background: var(--koshi-mist); } .koshi-primitive--title { font-family: var(--koshi-serif); line-height: 1.2; overflow-wrap: anywhere; } .koshi-primitive--title.koshi-primitive--size-small { font-size: 1.25rem; } .koshi-primitive--title.koshi-primitive--size-medium { font-size: clamp(1.5rem, 2.2vw, 2rem); } .koshi-primitive--title.koshi-primitive--size-large { font-size: clamp(2rem, 3vw, 3rem); } .koshi-primitive--title.koshi-primitive--size-display { font-size: clamp(2.5rem, 5vw, 5rem); } .koshi-primitive--text { overflow-wrap: anywhere; } :has(> :is(.delivery-figma-info,.delivery-figma-faq:not(.koshi-questions--separate),.koshi-primitive--profile-questions-section)) { container: koshi-editorial / inline-size; } .koshi-primitive--profile-questions-section > .koshi-container__layout { gap: 0; } .koshi-primitive--profile-questions-section.koshi-primitive--layout-stack[class] .koshi-questions--separate { padding: 0; margin: 0; width: 100%; } .koshi-primitive--profile-questions-section.koshi-primitive--layout-stack[class] .koshi-questions--separate > .delivery-figma-container { width: 100%; } .koshi-primitive--text > :first-child { margin-block-start: 0; } .koshi-primitive--text > :last-child { margin-block-end: 0; } .koshi-primitive--buttons .koshi-composition__actions { margin: 0; } .koshi-primitive--buttons.koshi-primitive--alignment-center .koshi-composition__actions { justify-content: center; } .koshi-primitive--buttons.koshi-primitive--alignment-end .koshi-composition__actions { justify-content: end; } .koshi-primitive--media-item > :is(img,:where(:is(.koshi-primitive__media-link,.koshi-primitive__media-frame))), .koshi-primitive--media-item > video { display: block; inline-size: 100%; max-inline-size: 100%; block-size: auto; object-fit: cover; object-position: var(--koshi-media-focal-x, 50%) var(--koshi-media-focal-y, 50%); } .koshi-primitive--ratio-landscape > :is(img,:where(:is(.koshi-primitive__media-link,.koshi-primitive__media-frame))), .koshi-primitive--ratio-landscape > video { aspect-ratio: 16 / 9; } .koshi-primitive--ratio-square > :is(img,:where(:is(.koshi-primitive__media-link,.koshi-primitive__media-frame))), .koshi-primitive--ratio-square > video { aspect-ratio: 1; } .koshi-primitive--ratio-portrait > :is(img,:where(:is(.koshi-primitive__media-link,.koshi-primitive__media-frame))), .koshi-primitive--ratio-portrait > video { aspect-ratio: 3 / 4; } .koshi-primitive--media-item { --koshi-media-fit:cover; } .koshi-primitive--media-item.koshi-primitive--fit-contain { --koshi-media-fit:contain; } .koshi-primitive--media-item.koshi-primitive--fit-presentation { --koshi-media-fit:var(--koshi-media-presentation-fit,cover); } .koshi-primitive--fit-contain > :is(img,:where(:is(.koshi-primitive__media-link,.koshi-primitive__media-frame))), .koshi-primitive--fit-contain > video { object-fit: contain; object-position: 50% 50%; } .koshi-primitive--shape-rounded > :is(img,:where(:is(.koshi-primitive__media-link,.koshi-primitive__media-frame))), .koshi-primitive--shape-rounded > video { border-radius: .5rem; } .koshi-primitive--shape-circle > :is(img,:where(:is(.koshi-primitive__media-link,.koshi-primitive__media-frame))), .koshi-primitive--shape-circle > video { aspect-ratio: 1; border-radius: 50%; } .koshi-primitive--media-item > figcaption { margin-block-start: .75rem; text-align: end; font-family: var(--koshi-sans); font-size: .75rem; line-height: 1.5; letter-spacing: .04em; } /* Very light authored backgrounds need visible controls; catalogue players keep their own skin. */ .koshi-primitive--media-kind-audio[data-koshi-audio-light] > .koshi-figma-audio-player { --koshi-white: var(--koshi-ink); --koshi-figma-audio-track: #b9a890; --koshi-figma-audio-control-hover: rgb(50 42 34 / 10%); color: var(--koshi-ink); } /* Preserve the 324/416 Figma text measure while the craft cards share a row. */ @container koshi-editorial (56.25rem < width <= 83rem) { .koshi-primitive--profile-craft.koshi-primitive--layout-stack[class] .koshi-primitive--layout-grid.koshi-primitive--columns-3 > .koshi-container__layout > :is(.koshi-primitive--container, .koshi-editor-block > .koshi-primitive--container) .koshi-primitive--text { width: calc(100% * 324 / 416); max-width: 20.25rem; } } /* Callout uses the same CTA rules as the existing published composition in style.css. These bridges only account for native leaf/editor wrappers; they introduce no second skin. */ .koshi-primitive--layout-stack.koshi-primitive--profile-callout > .koshi-container__layout { gap: 0; } .koshi-primitive--layout-stack.koshi-primitive--profile-callout > .koshi-container__layout > .koshi-editor-block { inline-size: 100%; display: flex; flex-direction: column; align-items: center; } .koshi-primitive--layout-stack.koshi-primitive--profile-callout > .koshi-container__layout > :is(.koshi-primitive--text,.koshi-editor-block:has(> .koshi-primitive--text)) { max-inline-size: 100%; } .koshi-primitive--layout-stack.koshi-primitive--profile-callout .koshi-primitive--text > p:first-child { margin-block-start: 1.5rem; } .koshi-primitive--layout-stack.koshi-primitive--profile-callout .koshi-primitive--buttons .koshi-composition__actions { margin: 0; justify-content: center; } /* Keep the native media child and its geometry; controls share only the video cell, never the caption. */ .koshi-primitive--media-kind-video { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; } .koshi-primitive--media-kind-video > video { grid-area: 1 / 1; } .koshi-primitive--media-kind-video > figcaption { grid-area: 2 / 1; } .koshi-primitive--media-kind-video > .koshi-primitive__video-controls { grid-area: 1 / 1; position: relative; inset: auto; z-index: 1; align-self: end; justify-self: stretch; display: flex; gap: .625rem; min-inline-size: 0; margin: .75rem 1rem; color: var(--koshi-white); } .koshi-primitive--media-kind-video > .koshi-primitive__video-controls[hidden] { display: none; } .koshi-primitive--shape-circle > .koshi-primitive__video-controls { align-self: center; justify-self: center; inline-size: 70%; margin: 0; } @container koshi-layout (max-width: 47.99rem) { .koshi-primitive--container.koshi-primitive--mobile-layout-stack > .koshi-container__layout { display: flex; flex-direction: column; } .koshi-primitive--container.koshi-primitive--mobile-layout-stack > .koshi-container__layout > * { flex: none; } } /* Child zones preserve native editor wrappers and selection bounds. Backgrounds remain grid items: only image/video intrinsic height is suppressed; captions and text still size the row. */ .koshi-container__layout > .koshi-primitive--container, .koshi-container__layout > :where(.koshi-editor-block) > .koshi-primitive--container { margin-inline: 0; } :is(.koshi-primitive--layout-grid,.koshi-primitive--layout-overlay) > .koshi-container__layout > :is(.koshi-primitive--placement-inline-auto,.koshi-editor-block:has(> .koshi-primitive--placement-inline-auto)) { justify-self: auto; } :is(.koshi-primitive--layout-grid,.koshi-primitive--layout-overlay) > .koshi-container__layout > :is(.koshi-primitive--placement-inline-start,.koshi-editor-block:has(> .koshi-primitive--placement-inline-start)) { justify-self: start; } :is(.koshi-primitive--layout-grid,.koshi-primitive--layout-overlay) > .koshi-container__layout > :is(.koshi-primitive--placement-inline-center,.koshi-editor-block:has(> .koshi-primitive--placement-inline-center)) { justify-self: center; } :is(.koshi-primitive--layout-grid,.koshi-primitive--layout-overlay) > .koshi-container__layout > :is(.koshi-primitive--placement-inline-end,.koshi-editor-block:has(> .koshi-primitive--placement-inline-end)) { justify-self: end; } :is(.koshi-primitive--layout-grid,.koshi-primitive--layout-overlay) > .koshi-container__layout > :is(.koshi-primitive--placement-inline-stretch,.koshi-editor-block:has(> .koshi-primitive--placement-inline-stretch)) { justify-self: stretch; } :is(.koshi-primitive--layout-grid,.koshi-primitive--layout-overlay) > .koshi-container__layout > :is(.koshi-primitive--placement-block-auto,.koshi-editor-block:has(> .koshi-primitive--placement-block-auto)) { align-self: auto; } :is(.koshi-primitive--layout-grid,.koshi-primitive--layout-overlay) > .koshi-container__layout > :is(.koshi-primitive--placement-block-start,.koshi-editor-block:has(> .koshi-primitive--placement-block-start)) { align-self: start; } :is(.koshi-primitive--layout-grid,.koshi-primitive--layout-overlay) > .koshi-container__layout > :is(.koshi-primitive--placement-block-center,.koshi-editor-block:has(> .koshi-primitive--placement-block-center)) { align-self: center; } :is(.koshi-primitive--layout-grid,.koshi-primitive--layout-overlay) > .koshi-container__layout > :is(.koshi-primitive--placement-block-end,.koshi-editor-block:has(> .koshi-primitive--placement-block-end)) { align-self: end; } :is(.koshi-primitive--layout-grid,.koshi-primitive--layout-overlay) > .koshi-container__layout > :is(.koshi-primitive--placement-block-stretch,.koshi-editor-block:has(> .koshi-primitive--placement-block-stretch)) { align-self: stretch; } .koshi-container__layout > .koshi-editor-block:has(> .koshi-primitive--width-compact) { inline-size: 100%; max-inline-size: 24rem; } .koshi-container__layout > .koshi-editor-block:has(> .koshi-primitive--width-reading) { inline-size: 100%; max-inline-size: 45rem; } .koshi-container__layout > .koshi-editor-block:has(> .koshi-primitive--width-wide) { inline-size: 100%; max-inline-size: 80rem; } .koshi-primitive--layout-grid.koshi-primitive--columns-1.koshi-primitive--proportions-custom > .koshi-container__layout { grid-template-columns: minmax(0, var(--koshi-primitive-weight-1)); } .koshi-primitive--layout-grid.koshi-primitive--columns-1 > .koshi-container__layout > :is(.koshi-primitive--grid-span-1,.koshi-editor-block:has(> .koshi-primitive--grid-span-1)) { grid-column: span 1; } .koshi-primitive--layout-grid.koshi-primitive--columns-1 > .koshi-container__layout > :is(.koshi-primitive--grid-span-2,.koshi-editor-block:has(> .koshi-primitive--grid-span-2)) { grid-column: span 1; } .koshi-primitive--layout-grid.koshi-primitive--columns-1 > .koshi-container__layout > :is(.koshi-primitive--grid-span-3,.koshi-editor-block:has(> .koshi-primitive--grid-span-3)) { grid-column: span 1; } .koshi-primitive--layout-grid.koshi-primitive--columns-1 > .koshi-container__layout > :is(.koshi-primitive--grid-span-4,.koshi-editor-block:has(> .koshi-primitive--grid-span-4)) { grid-column: span 1; } .koshi-primitive--layout-grid.koshi-primitive--columns-2.koshi-primitive--proportions-custom > .koshi-container__layout { grid-template-columns: minmax(0, var(--koshi-primitive-weight-1)) minmax(0, var(--koshi-primitive-weight-2)); } .koshi-primitive--layout-grid.koshi-primitive--columns-2 > .koshi-container__layout > :is(.koshi-primitive--grid-span-1,.koshi-editor-block:has(> .koshi-primitive--grid-span-1)) { grid-column: span 1; } .koshi-primitive--layout-grid.koshi-primitive--columns-2 > .koshi-container__layout > :is(.koshi-primitive--grid-span-2,.koshi-editor-block:has(> .koshi-primitive--grid-span-2)) { grid-column: span 2; } .koshi-primitive--layout-grid.koshi-primitive--columns-2 > .koshi-container__layout > :is(.koshi-primitive--grid-span-3,.koshi-editor-block:has(> .koshi-primitive--grid-span-3)) { grid-column: span 2; } .koshi-primitive--layout-grid.koshi-primitive--columns-2 > .koshi-container__layout > :is(.koshi-primitive--grid-span-4,.koshi-editor-block:has(> .koshi-primitive--grid-span-4)) { grid-column: span 2; } .koshi-primitive--layout-grid.koshi-primitive--columns-3.koshi-primitive--proportions-custom > .koshi-container__layout { grid-template-columns: minmax(0, var(--koshi-primitive-weight-1)) minmax(0, var(--koshi-primitive-weight-2)) minmax(0, var(--koshi-primitive-weight-3)); } .koshi-primitive--layout-grid.koshi-primitive--columns-3 > .koshi-container__layout > :is(.koshi-primitive--grid-span-1,.koshi-editor-block:has(> .koshi-primitive--grid-span-1)) { grid-column: span 1; } .koshi-primitive--layout-grid.koshi-primitive--columns-3 > .koshi-container__layout > :is(.koshi-primitive--grid-span-2,.koshi-editor-block:has(> .koshi-primitive--grid-span-2)) { grid-column: span 2; } .koshi-primitive--layout-grid.koshi-primitive--columns-3 > .koshi-container__layout > :is(.koshi-primitive--grid-span-3,.koshi-editor-block:has(> .koshi-primitive--grid-span-3)) { grid-column: span 3; } .koshi-primitive--layout-grid.koshi-primitive--columns-3 > .koshi-container__layout > :is(.koshi-primitive--grid-span-4,.koshi-editor-block:has(> .koshi-primitive--grid-span-4)) { grid-column: span 3; } .koshi-primitive--layout-grid.koshi-primitive--columns-4.koshi-primitive--proportions-custom > .koshi-container__layout { grid-template-columns: minmax(0, var(--koshi-primitive-weight-1)) minmax(0, var(--koshi-primitive-weight-2)) minmax(0, var(--koshi-primitive-weight-3)) minmax(0, var(--koshi-primitive-weight-4)); } .koshi-primitive--layout-grid.koshi-primitive--columns-4 > .koshi-container__layout > :is(.koshi-primitive--grid-span-1,.koshi-editor-block:has(> .koshi-primitive--grid-span-1)) { grid-column: span 1; } .koshi-primitive--layout-grid.koshi-primitive--columns-4 > .koshi-container__layout > :is(.koshi-primitive--grid-span-2,.koshi-editor-block:has(> .koshi-primitive--grid-span-2)) { grid-column: span 2; } .koshi-primitive--layout-grid.koshi-primitive--columns-4 > .koshi-container__layout > :is(.koshi-primitive--grid-span-3,.koshi-editor-block:has(> .koshi-primitive--grid-span-3)) { grid-column: span 3; } .koshi-primitive--layout-grid.koshi-primitive--columns-4 > .koshi-container__layout > :is(.koshi-primitive--grid-span-4,.koshi-editor-block:has(> .koshi-primitive--grid-span-4)) { grid-column: span 4; } .koshi-primitive--layout-overlay > .koshi-container__layout { isolation: isolate; } .koshi-primitive--layout-overlay > .koshi-container__layout > * { z-index: 1; } .koshi-primitive--layout-overlay > .koshi-container__layout > :is(.koshi-primitive--placement-role-background,.koshi-editor-block:has(> .koshi-primitive--placement-role-background)) { align-self: stretch; justify-self: stretch; inline-size: 100%; max-inline-size: none; --koshi-zone-fill: 100%; --koshi-zone-image-height: 0; z-index: 0; } .koshi-primitive--layout-overlay > .koshi-container__layout > .koshi-editor-block > .koshi-primitive--placement-role-background { block-size: var(--koshi-zone-fill, auto); max-inline-size: none; } @container koshi-layout (max-width: 47.99rem) { .koshi-primitive--container.koshi-primitive--mobile-layout-stack[class] > .koshi-container__layout > :is(.koshi-primitive,.koshi-editor-block) { --koshi-zone-fill: auto; --koshi-zone-image-height: auto; position: static; inset: auto; block-size: auto; grid-column: auto; grid-area: auto; align-self: auto; justify-self: auto; } } /* A native stack uses the flex cross axis for horizontal child placement, including editor wrappers. */ .koshi-primitive--container.koshi-primitive--layout-stack[class] > .koshi-container__layout > :is(.koshi-primitive--placement-inline-auto,.koshi-editor-block:has(> .koshi-primitive--placement-inline-auto)) { align-self: auto; } .koshi-primitive--container.koshi-primitive--layout-stack[class] > .koshi-container__layout > :is(.koshi-primitive--placement-inline-start,.koshi-editor-block:has(> .koshi-primitive--placement-inline-start)) { align-self: start; } .koshi-primitive--container.koshi-primitive--layout-stack[class] > .koshi-container__layout > :is(.koshi-primitive--placement-inline-center,.koshi-editor-block:has(> .koshi-primitive--placement-inline-center)) { align-self: center; } .koshi-primitive--container.koshi-primitive--layout-stack[class] > .koshi-container__layout > :is(.koshi-primitive--placement-inline-end,.koshi-editor-block:has(> .koshi-primitive--placement-inline-end)) { align-self: end; } .koshi-primitive--container.koshi-primitive--layout-stack[class] > .koshi-container__layout > :is(.koshi-primitive--placement-inline-stretch,.koshi-editor-block:has(> .koshi-primitive--placement-inline-stretch)) { align-self: stretch; } .koshi-container__layout > .koshi-editor-block > .koshi-primitive--container { block-size: 100%; } .koshi-primitive--layout-overlay > .koshi-container__layout > .koshi-primitive--placement-role-background > .koshi-container__layout > :is(.koshi-primitive--media-item,.koshi-editor-block:has(> .koshi-primitive--media-item)) { flex: 1 1 auto; } .koshi-primitive--layout-overlay > .koshi-container__layout > .koshi-primitive--placement-role-background > .koshi-container__layout > .koshi-editor-block > .koshi-primitive--media-item { block-size: var(--koshi-zone-fill, auto); } .koshi-primitive--layout-overlay > .koshi-container__layout > .koshi-primitive--placement-role-background > .koshi-container__layout > .koshi-primitive--media-item { display: grid; grid-template-rows: minmax(0,1fr) auto; } .koshi-primitive--layout-overlay > .koshi-container__layout > .koshi-primitive--placement-role-background > .koshi-container__layout > .koshi-primitive--media-item > :is(img,video,:where(:is(.koshi-primitive__media-link,.koshi-primitive__media-frame))) { min-block-size: var(--koshi-zone-fill, auto); block-size: var(--koshi-zone-image-height, auto); aspect-ratio: auto; } .koshi-primitive--layout-overlay > .koshi-container__layout > .koshi-primitive--placement-role-background > .koshi-container__layout > .koshi-editor-block > .koshi-primitive--media-item { display: grid; grid-template-rows: minmax(0,1fr) auto; } .koshi-primitive--layout-overlay > .koshi-container__layout > .koshi-primitive--placement-role-background > .koshi-container__layout > .koshi-editor-block > .koshi-primitive--media-item > :is(img,video,:where(:is(.koshi-primitive__media-link,.koshi-primitive__media-frame))) { min-block-size: var(--koshi-zone-fill, auto); block-size: var(--koshi-zone-image-height, auto); aspect-ratio: auto; } .koshi-primitive--layout-overlay > .koshi-container__layout > .koshi-editor-block > .koshi-primitive--placement-role-background > .koshi-container__layout > :is(.koshi-primitive--media-item,.koshi-editor-block:has(> .koshi-primitive--media-item)) { flex: 1 1 auto; } .koshi-primitive--layout-overlay > .koshi-container__layout > .koshi-editor-block > .koshi-primitive--placement-role-background > .koshi-container__layout > .koshi-editor-block > .koshi-primitive--media-item { block-size: var(--koshi-zone-fill, auto); } .koshi-primitive--layout-overlay > .koshi-container__layout > .koshi-editor-block > .koshi-primitive--placement-role-background > .koshi-container__layout > .koshi-primitive--media-item { display: grid; grid-template-rows: minmax(0,1fr) auto; } .koshi-primitive--layout-overlay > .koshi-container__layout > .koshi-editor-block > .koshi-primitive--placement-role-background > .koshi-container__layout > .koshi-primitive--media-item > :is(img,video,:where(:is(.koshi-primitive__media-link,.koshi-primitive__media-frame))) { min-block-size: var(--koshi-zone-fill, auto); block-size: var(--koshi-zone-image-height, auto); aspect-ratio: auto; } .koshi-primitive--layout-overlay > .koshi-container__layout > .koshi-editor-block > .koshi-primitive--placement-role-background > .koshi-container__layout > .koshi-editor-block > .koshi-primitive--media-item { display: grid; grid-template-rows: minmax(0,1fr) auto; } .koshi-primitive--layout-overlay > .koshi-container__layout > .koshi-editor-block > .koshi-primitive--placement-role-background > .koshi-container__layout > .koshi-editor-block > .koshi-primitive--media-item > :is(img,video,:where(:is(.koshi-primitive__media-link,.koshi-primitive__media-frame))) { min-block-size: var(--koshi-zone-fill, auto); block-size: var(--koshi-zone-image-height, auto); aspect-ratio: auto; } /* Editorial profiles reuse the published article rules; only native slot boundaries differ. */ .koshi-primitive--layout-grid.koshi-primitive--columns-2.koshi-primitive--profile-reading > .koshi-container__layout { grid-template-columns: minmax(0,var(--koshi-primitive-weight-1)) minmax(17.5rem,var(--koshi-primitive-weight-2)); gap: clamp(2.125rem,7vw,5.5rem); align-items:start; } .koshi-primitive--layout-stack:is(.koshi-primitive--profile-prose,.koshi-primitive--profile-aside) { margin-inline:0; } .koshi-primitive--layout-stack.koshi-primitive--profile-aside > .koshi-container__layout { gap:1.375rem; } .koshi-primitive--layout-stack.koshi-primitive--profile-prose > .koshi-container__layout { gap:0; } .koshi-primitive--layout-stack.koshi-primitive--profile-prose .koshi-primitive--text.koshi-primitive--role-eyebrow > p { margin:0 0 .625rem; } .koshi-primitive--layout-stack.koshi-primitive--profile-prose .koshi-primitive--text.koshi-primitive--role-lead > p { margin-block:0; } .koshi-primitive--layout-stack.koshi-primitive--profile-prose .koshi-primitive--text > ol:first-child { margin-block-start:2.25rem; } .koshi-primitive--layout-stack.koshi-primitive--profile-aside .koshi-primitive--text > p:first-child:has(+ h3) { margin:0 0 .625rem; } .koshi-primitive--layout-stack.koshi-primitive--profile-aside .koshi-primitive--buttons .koshi-composition__actions { display:grid; inline-size:max-content; max-inline-size:100%; gap:.625rem; } .koshi-primitive--layout-stack.koshi-primitive--profile-aside .koshi-primitive--buttons .koshi-composition__actions > .koshi-ui-button { inline-size:100%; min-inline-size:0; white-space:normal; } @media(max-width:61.25rem) { .koshi-primitive--layout-grid.koshi-primitive--columns-2.koshi-primitive--profile-reading > .koshi-container__layout { grid-template-columns:1fr; } } /* Cover bridges: visual values remain shared with story-figma-hero in style.css. */ :is(.koshi-primitive--profile-cover,.koshi-primitive--profile-cover-wide,.koshi-primitive--profile-cover-actions).koshi-primitive--layout-overlay > .koshi-container__layout { inline-size:100%; position:static; isolation:auto; align-self:stretch; align-items:start; } :is(.koshi-primitive--profile-cover,.koshi-primitive--profile-cover-wide,.koshi-primitive--profile-cover-actions).koshi-primitive--layout-overlay > .koshi-container__layout > :is(.koshi-primitive--placement-role-background,.koshi-editor-block:has(> .koshi-primitive--placement-role-background)) { position:absolute; inset:0; z-index:0; grid-area:auto; block-size:auto; } :is(.koshi-primitive--profile-cover,.koshi-primitive--profile-cover-wide,.koshi-primitive--profile-cover-actions).koshi-primitive--layout-overlay .koshi-primitive--placement-role-background .koshi-primitive--media-item > :is(:is(img,:where(.koshi-primitive__media-frame,.koshi-primitive__media-link)),:where(:is(.koshi-primitive__media-link,.koshi-primitive__media-frame))) { block-size:100%; min-block-size:0; } :is(.koshi-primitive--profile-cover,.koshi-primitive--profile-cover-wide,.koshi-primitive--profile-cover-actions).koshi-primitive--layout-overlay > .koshi-container__layout > :is(.koshi-primitive--container:not(.koshi-primitive--placement-role-background),.koshi-editor-block:not(:has(> .koshi-primitive--placement-role-background))) { justify-self:center; z-index:2; } :is(.koshi-primitive--profile-cover,.koshi-primitive--profile-cover-wide,.koshi-primitive--profile-cover-actions).koshi-primitive--layout-overlay > .koshi-container__layout > .koshi-editor-block:not(:has(> .koshi-primitive--placement-role-background)) { inline-size:100%; align-self:stretch; } :is(.koshi-primitive--profile-cover,.koshi-primitive--profile-cover-wide,.koshi-primitive--profile-cover-actions).koshi-primitive--layout-overlay > .koshi-container__layout > .koshi-editor-block > .koshi-primitive--container:not(.koshi-primitive--placement-role-background) { margin-inline:auto; block-size:auto; } :is(.koshi-primitive--profile-cover,.koshi-primitive--profile-cover-wide,.koshi-primitive--profile-cover-actions).koshi-primitive--layout-overlay .koshi-primitive--title { max-inline-size:100%; } :is(.koshi-primitive--profile-cover,.koshi-primitive--profile-cover-wide,.koshi-primitive--profile-cover-actions).koshi-primitive--layout-overlay > .koshi-container__layout { align-self:stretch; align-items:start; } :is(.koshi-primitive--profile-cover,.koshi-primitive--profile-cover-wide,.koshi-primitive--profile-cover-actions).koshi-primitive--layout-overlay .koshi-primitive--container:not(.koshi-primitive--placement-role-background) > .koshi-container__layout > .koshi-editor-block { inline-size:100%; } :is(.koshi-primitive--profile-cover,.koshi-primitive--profile-cover-wide,.koshi-primitive--profile-cover-actions).koshi-primitive--layout-overlay > .koshi-container__layout > .koshi-editor-block:not(:has(> .koshi-primitive--placement-role-background)) { align-self:stretch; } :is(.koshi-primitive--profile-cover,.koshi-primitive--profile-cover-wide,.koshi-primitive--profile-cover-actions).koshi-primitive--layout-overlay > .koshi-container__layout > :is(.koshi-primitive--placement-role-background,.koshi-editor-block:has(> .koshi-primitive--placement-role-background)) { grid-area:auto; block-size:auto; } :is(.koshi-primitive--profile-cover,.koshi-primitive--profile-cover-wide,.koshi-primitive--profile-cover-actions).koshi-primitive--layout-overlay .koshi-primitive--placement-role-background .koshi-primitive--media-item { --koshi-zone-image-height:100%; --koshi-zone-fill:100%; } /* Section profiles share legacy editorial declarations; native slots own only flow. */ .koshi-primitive--layout-stack:is(.koshi-primitive--profile-section,.koshi-primitive--profile-section-heading,.koshi-primitive--profile-content) > .koshi-container__layout { gap:0; } .koshi-container__layout > .koshi-primitive--profile-section-heading.koshi-primitive--layout-stack, .koshi-container__layout > .koshi-editor-block > .koshi-primitive--profile-section-heading.koshi-primitive--layout-stack, .koshi-container__layout > .koshi-primitive--profile-content.koshi-primitive--layout-stack, .koshi-container__layout > .koshi-editor-block > .koshi-primitive--profile-content.koshi-primitive--layout-stack { margin-inline:auto; } .koshi-primitive--profile-section-heading.koshi-primitive--layout-stack .koshi-primitive--text.koshi-primitive--role-eyebrow > p { margin:0 0 .625rem; } .koshi-primitive--profile-section-heading.koshi-primitive--layout-stack { text-align:center; } /* A leaf wrapper cannot collapse margins with its neighbours: carry paragraph rhythm on the leaves. */ .koshi-primitive--title.koshi-primitive--size-content { margin-block:0; } .koshi-primitive--text.koshi-primitive--role-content > p { margin-block:0 1em; } .koshi-primitive--title.koshi-primitive--size-content + .koshi-primitive--text.koshi-primitive--role-content, .koshi-editor-block:has(> .koshi-primitive--title.koshi-primitive--size-content) + .koshi-editor-block:has(> .koshi-primitive--text.koshi-primitive--role-content) { margin-block-start:1em; } .koshi-primitive--profile-content.koshi-primitive--layout-stack > .koshi-container__layout > .koshi-primitive--buttons, .koshi-primitive--profile-content.koshi-primitive--layout-stack > .koshi-container__layout > .koshi-editor-block > .koshi-primitive--buttons { margin-block-end:1em; } /* Media frame bridges: approved geometry/crops remain in the original shared selectors. */ :is(.koshi-primitive--profile-media-landscape,.koshi-primitive--profile-media-wide).koshi-primitive--layout-stack > .koshi-container__layout { block-size:100%; min-block-size:0; } :is(.koshi-primitive--profile-media-landscape,.koshi-primitive--profile-media-wide).koshi-primitive--layout-stack > .koshi-container__layout > :is(.koshi-primitive--media-item,.koshi-editor-block) { block-size:100%; min-block-size:0; } :is(.koshi-primitive--profile-media-landscape,.koshi-primitive--profile-media-wide).koshi-primitive--layout-stack > .koshi-container__layout > .koshi-editor-block > .koshi-primitive--media-item { block-size:100%; } :is(.koshi-primitive--profile-media-landscape,.koshi-primitive--profile-media-wide).koshi-primitive--layout-stack .koshi-primitive--media-item > :is(:is(img,:where(.koshi-primitive__media-frame,.koshi-primitive__media-link)),video,:where(:is(.koshi-primitive__media-link,.koshi-primitive__media-frame))) { block-size:100%; } @container koshi-editorial (max-width:42.5rem) { .koshi-primitive--profile-media-wide.koshi-primitive--layout-stack > .koshi-container__layout { align-self:start; block-size:auto; } .koshi-primitive--profile-media-wide.koshi-primitive--layout-stack > .koshi-container__layout > :is(.koshi-primitive--media-item,.koshi-editor-block), .koshi-primitive--profile-media-wide.koshi-primitive--layout-stack > .koshi-container__layout > .koshi-editor-block > .koshi-primitive--media-item, .koshi-primitive--profile-media-wide.koshi-primitive--layout-stack .koshi-primitive--media-item > :is(:is(img,:where(.koshi-primitive__media-frame,.koshi-primitive__media-link)),video,:where(:is(.koshi-primitive__media-link,.koshi-primitive__media-frame))) { block-size:auto; } } /* Text introduction bridge; spacing/type remain in figma-page-intro shared rules. */ .koshi-primitive--profile-intro.koshi-primitive--layout-stack > .koshi-container__layout { inline-size:fit-content; } .koshi-primitive--profile-intro.koshi-primitive--layout-stack .koshi-primitive--title, .koshi-primitive--profile-intro.koshi-primitive--layout-stack .koshi-primitive--text { text-align:inherit; } /* Collection headings share the alignment of their presentation container. */ :is(.koshi-primitive--profile-collection-hotspots-heading,.koshi-primitive--profile-collection-gallery-heading).koshi-primitive--layout-stack :is(.koshi-primitive--title,.koshi-primitive--text) { text-align:inherit; } /* Link-band structure uses the existing guide-next-band presentation. */ .koshi-primitive--profile-links-band.koshi-primitive--layout-stack > .koshi-container__layout { display:grid; gap:inherit; justify-items:inherit; inline-size:100%; } .koshi-primitive--profile-links-band.koshi-primitive--layout-stack .koshi-primitive--title, .koshi-primitive--profile-links-band.koshi-primitive--layout-stack .koshi-primitive--text { text-align:inherit; } /* A multiline title remains one heading with explicitly separated visual lines. */ .koshi-primitive--title.koshi-primitive--line-style-blocks > span { display:block; } /* Collection headings use direct, typed children; nested content keeps its own presentation. */ .koshi-primitive--profile-collection.koshi-primitive--layout-stack > .koshi-container__layout { gap: var(--koshi-collection-content-gap); } .koshi-primitive--profile-collection-heading.koshi-primitive--layout-stack > .koshi-container__layout { gap: 0; } .koshi-primitive--profile-collection.koshi-primitive--layout-stack > .koshi-container__layout > .koshi-primitive--profile-collection-heading.koshi-primitive--layout-stack, .koshi-primitive--profile-collection.koshi-primitive--layout-stack > .koshi-container__layout > .koshi-editor-block > .koshi-primitive--profile-collection-heading.koshi-primitive--layout-stack { margin-inline: auto; } .koshi-primitive--profile-collection-heading.koshi-primitive--layout-stack > .koshi-container__layout > .koshi-primitive--text.koshi-primitive--role-lead, .koshi-primitive--profile-collection-heading.koshi-primitive--layout-stack > .koshi-container__layout > .koshi-editor-block > .koshi-primitive--text.koshi-primitive--role-lead { text-align: inherit; } .koshi-primitive--profile-collection-heading.koshi-primitive--layout-stack > .koshi-container__layout > .koshi-primitive--text.koshi-primitive--role-lead > p, .koshi-primitive--profile-collection-heading.koshi-primitive--layout-stack > .koshi-container__layout > .koshi-editor-block > .koshi-primitive--text.koshi-primitive--role-lead > p { color: inherit; } /* Narrative bridges: explicit zones preserve native selectable bounds and reading order. */ .koshi-primitive--profile-narrative.koshi-primitive--layout-grid .koshi-primitive--container { margin-inline-end:0; } .koshi-primitive--profile-narrative.koshi-primitive--layout-grid .koshi-primitive--container > .koshi-container__layout { inline-size:100%; gap:inherit; } .koshi-primitive--profile-narrative.koshi-primitive--layout-grid .koshi-primitive--text { font:inherit; } .koshi-primitive--profile-narrative.koshi-primitive--layout-grid .koshi-primitive--role-emphasis { font-style:italic; font-weight:500; } .koshi-primitive--profile-narrative.koshi-primitive--layout-grid :is(.koshi-primitive--layout-role-media,.koshi-primitive--layout-role-detail) > .koshi-container__layout, .koshi-primitive--profile-narrative.koshi-primitive--layout-grid :is(.koshi-primitive--layout-role-media,.koshi-primitive--layout-role-detail) .koshi-editor-block, .koshi-primitive--profile-narrative.koshi-primitive--layout-grid :is(.koshi-primitive--layout-role-media,.koshi-primitive--layout-role-detail) .koshi-primitive--media-item { block-size:100%; border-radius:inherit; } .koshi-primitive--profile-narrative.koshi-primitive--layout-grid :is(.koshi-primitive--layout-role-media,.koshi-primitive--layout-role-detail) :is(img,:where(.koshi-primitive__media-frame,.koshi-primitive__media-link)) { block-size:100%; border-radius:inherit; } @container koshi-editorial (width > 83rem) { .koshi-primitive--profile-narrative.koshi-primitive--layout-grid[class] > .koshi-container__layout > :is(.koshi-primitive--layout-role-heading,.koshi-editor-block:has(> .koshi-primitive--layout-role-heading)) { grid-column:1 / -1; grid-row:1; } .koshi-primitive--profile-narrative.koshi-primitive--layout-grid[class] > .koshi-container__layout > :is(.koshi-primitive--layout-role-body,.koshi-editor-block:has(> .koshi-primitive--layout-role-body)) { grid-column:1; grid-row:2; } .koshi-primitive--profile-narrative.koshi-primitive--layout-grid[class] > .koshi-container__layout > :is(.koshi-primitive--layout-role-media,.koshi-editor-block:has(> .koshi-primitive--layout-role-media)) { grid-column:2; grid-row:2; } .koshi-primitive--profile-narrative.koshi-primitive--layout-grid[class] > .koshi-container__layout > :is(.koshi-primitive--layout-role-detail,.koshi-editor-block:has(> .koshi-primitive--layout-role-detail)) { grid-column:1; grid-row:3; } .koshi-primitive--profile-narrative.koshi-primitive--layout-grid[class] > .koshi-container__layout > :is(.koshi-primitive--layout-role-aside,.koshi-editor-block:has(> .koshi-primitive--layout-role-aside)) { grid-column:2; grid-row:3; } .koshi-primitive--profile-narrative.koshi-primitive--layout-grid[class] > .koshi-container__layout > .koshi-editor-block:has(> .koshi-primitive--layout-role-body) > .koshi-primitive--layout-role-body { margin:0; } } @container koshi-editorial (max-width:83rem) { .koshi-primitive--profile-narrative.koshi-primitive--layout-grid[class] > .koshi-container__layout { row-gap:0; } .koshi-primitive--profile-narrative.koshi-primitive--layout-grid[class] > .koshi-container__layout > :is(.koshi-primitive--layout-role-heading,.koshi-editor-block:has(> .koshi-primitive--layout-role-heading)) { grid-column:1; grid-row:1; align-self:end; } .koshi-primitive--profile-narrative.koshi-primitive--layout-grid[class] > .koshi-container__layout > :is(.koshi-primitive--layout-role-body,.koshi-editor-block:has(> .koshi-primitive--layout-role-body)) { grid-column:1; grid-row:2; align-self:start; } .koshi-primitive--profile-narrative.koshi-primitive--layout-grid[class] > .koshi-container__layout > :is(.koshi-primitive--layout-role-media,.koshi-editor-block:has(> .koshi-primitive--layout-role-media)) { grid-column:2; grid-row:1 / 3; } .koshi-primitive--profile-narrative.koshi-primitive--layout-grid[class] > .koshi-container__layout > :is(.koshi-primitive--layout-role-detail,.koshi-editor-block:has(> .koshi-primitive--layout-role-detail)) { grid-column:1; grid-row:3; margin-block-start:var(--koshi-narrative-row-gap); } .koshi-primitive--profile-narrative.koshi-primitive--layout-grid[class] > .koshi-container__layout > :is(.koshi-primitive--layout-role-aside,.koshi-editor-block:has(> .koshi-primitive--layout-role-aside)) { grid-column:2; grid-row:3; margin-block-start:var(--koshi-narrative-row-gap); } } @container koshi-editorial (max-width:56.25rem) { .koshi-primitive--profile-narrative.koshi-primitive--layout-grid[class] > .koshi-container__layout > :is(.koshi-primitive--layout-role-media,.koshi-editor-block:has(> .koshi-primitive--layout-role-media)) { grid-column:1; grid-row:3; margin-block-start:var(--koshi-narrative-row-gap); } .koshi-primitive--profile-narrative.koshi-primitive--layout-grid[class] > .koshi-container__layout > :is(.koshi-primitive--layout-role-detail,.koshi-editor-block:has(> .koshi-primitive--layout-role-detail)) { grid-column:1; grid-row:4; } .koshi-primitive--profile-narrative.koshi-primitive--layout-grid[class] > .koshi-container__layout > :is(.koshi-primitive--layout-role-aside,.koshi-editor-block:has(> .koshi-primitive--layout-role-aside)) { grid-column:1; grid-row:5; } } .koshi-primitive--profile-collection-heading.koshi-primitive--layout-stack > .koshi-container__layout > .koshi-primitive--title.koshi-primitive--line-style-blocks, .koshi-primitive--profile-collection-heading.koshi-primitive--layout-stack > .koshi-container__layout > .koshi-editor-block > .koshi-primitive--title.koshi-primitive--line-style-blocks { text-align: inherit; } /* Inset composition retains the existing illustrated-label and image charter. */ :is(.koshi-primitive--profile-inset.koshi-primitive--layout-grid[class] .koshi-primitive--layout-role-body > .koshi-container__layout > .koshi-primitive--text,.koshi-primitive--profile-inset.koshi-primitive--layout-grid[class] .koshi-primitive--layout-role-body > .koshi-container__layout > .koshi-editor-block > .koshi-primitive--text) { display:flex; flex-direction:column; } .koshi-primitive--profile-inset.koshi-primitive--layout-grid[class] .koshi-primitive--layout-role-body .koshi-primitive--layout-row > .koshi-container__layout { display:flex; flex-direction:row; align-items:inherit; gap:inherit; } .koshi-primitive--profile-inset.koshi-primitive--layout-grid[class] .koshi-primitive--layout-role-body .koshi-primitive--layout-row .koshi-primitive--text { flex:none; font:inherit; } .koshi-primitive--profile-inset.koshi-primitive--layout-grid[class] .koshi-primitive--layout-role-body .koshi-primitive--layout-row .koshi-primitive--media-item { flex:none; } .koshi-primitive--profile-inset.koshi-primitive--layout-grid[class] :is(.koshi-primitive--layout-role-media,.koshi-primitive--layout-role-detail) > .koshi-container__layout, .koshi-primitive--profile-inset.koshi-primitive--layout-grid[class] :is(.koshi-primitive--layout-role-media,.koshi-primitive--layout-role-detail) .koshi-editor-block, .koshi-primitive--profile-inset.koshi-primitive--layout-grid[class] :is(.koshi-primitive--layout-role-media,.koshi-primitive--layout-role-detail) .koshi-primitive--media-item { block-size:100%; border-radius:inherit; } .koshi-primitive--profile-inset.koshi-primitive--layout-grid[class] :is(.koshi-primitive--layout-role-media,.koshi-primitive--layout-role-detail) :is(img,:where(.koshi-primitive__media-frame,.koshi-primitive__media-link)) { block-size:100%; border-radius:inherit; } @container koshi-editorial (width > 83rem) { .koshi-primitive--profile-inset.koshi-primitive--layout-grid[class] > .koshi-container__layout { grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:var(--koshi-inset-gap); } .koshi-primitive--profile-inset.koshi-primitive--layout-grid[class] > .koshi-container__layout > :is(.koshi-primitive--layout-role-media,.koshi-editor-block:has(> .koshi-primitive--layout-role-media)) { grid-column:1; grid-row:1 / 3; } .koshi-primitive--profile-inset.koshi-primitive--layout-grid[class] > .koshi-container__layout > :is(.koshi-primitive--layout-role-body,.koshi-editor-block:has(> .koshi-primitive--layout-role-body)) { grid-column:2; grid-row:1; } .koshi-primitive--profile-inset.koshi-primitive--layout-grid[class] > .koshi-container__layout > :is(.koshi-primitive--layout-role-detail,.koshi-editor-block:has(> .koshi-primitive--layout-role-detail)) { grid-column:2; grid-row:2; justify-self:end; } } .koshi-primitive--profile-inset.koshi-primitive--layout-grid[class] > .koshi-container__layout > .koshi-editor-block:has(> .koshi-primitive--layout-role-detail) { display:grid; justify-items:end; inline-size:100%; } @container koshi-editorial (max-width:83rem) { .koshi-primitive--profile-inset.koshi-primitive--layout-grid[class] > .koshi-container__layout > :is(.koshi-primitive--layout-role-media,.koshi-editor-block:has(> .koshi-primitive--layout-role-media)) { grid-row:1 / span 2; } } @container koshi-editorial (max-width:56.25rem) { .koshi-primitive--profile-inset.koshi-primitive--layout-grid[class] > .koshi-container__layout > :is(.koshi-primitive--layout-role-media,.koshi-editor-block:has(> .koshi-primitive--layout-role-media)) { grid-row:auto; } } .koshi-primitive--profile-inset.koshi-primitive--layout-grid[class] .koshi-primitive--layout-role-body .koshi-primitive--layout-row { display:flex; } .koshi-primitive--profile-inset.koshi-primitive--layout-grid[class] .koshi-primitive--layout-role-body .koshi-primitive--layout-row > .koshi-container__layout > .koshi-editor-block { flex:none; } @container koshi-editorial (max-width:56.25rem) { .koshi-primitive--profile-inset.koshi-primitive--layout-grid[class] > .koshi-container__layout > :is(.koshi-primitive--layout-role-detail,.koshi-editor-block:has(> .koshi-primitive--layout-role-detail)) { justify-self:start; justify-items:start; } } /* Attributed video: the citation owns its text tracks, the container owns their placement. */ .koshi-primitive--profile-quote-media.koshi-primitive--layout-stack[class] .koshi-quote-item { display:grid; justify-items:center; } .koshi-primitive--profile-quote-media.koshi-primitive--layout-stack[class] .koshi-quote-item > figcaption > strong { font:inherit; } .koshi-primitive--profile-quote-media.koshi-primitive--layout-stack[class] .koshi-primitive--media-kind-video { display:block; position:relative; } .koshi-primitive--profile-quote-media.koshi-primitive--layout-stack[class] .koshi-primitive--media-kind-video > .koshi-primitive__video-controls { margin:0; inset-inline-start:var(--koshi-video-inline-start); } @container koshi-editorial (width > 83rem) { .koshi-primitive--profile-quote-media.koshi-primitive--layout-stack[class] > .koshi-container__layout { grid-template-rows:auto auto; } .koshi-primitive--profile-quote-media.koshi-primitive--layout-stack[class] .koshi-quote-item { grid-template-rows:var(--koshi-quote-main-track) var(--koshi-quote-author-track); align-items:start; } } /* Split actions retain their approved charter while exposing independent copy and media zones. */ .koshi-primitive--profile-action-split.koshi-primitive--layout-grid[class] .koshi-primitive--layout-role-media > .koshi-container__layout, .koshi-primitive--profile-action-split.koshi-primitive--layout-grid[class] .koshi-primitive--layout-role-media .koshi-editor-block, .koshi-primitive--profile-action-split.koshi-primitive--layout-grid[class] .koshi-primitive--layout-role-media .koshi-primitive--media-item { block-size:100%; border-radius:inherit; } .koshi-primitive--profile-action-split.koshi-primitive--layout-grid[class] .koshi-primitive--layout-role-media :is(img,:where(.koshi-primitive__media-frame,.koshi-primitive__media-link)) { block-size:100%; border-radius:inherit; } @media(max-width:900px) { .koshi-primitive--profile-action-split.koshi-primitive--layout-grid[class] > .koshi-container__layout > :is(.koshi-primitive--layout-role-media,.koshi-editor-block:has(> .koshi-primitive--layout-role-media)) { grid-row:1; } } .koshi-primitive--profile-action-split-grouped.koshi-primitive--layout-grid[class] .koshi-primitive--layout-role-media > .koshi-container__layout, .koshi-primitive--profile-action-split-grouped.koshi-primitive--layout-grid[class] .koshi-primitive--layout-role-media .koshi-editor-block, .koshi-primitive--profile-action-split-grouped.koshi-primitive--layout-grid[class] .koshi-primitive--layout-role-media .koshi-primitive--media-item { block-size:100%; border-radius:inherit; } .koshi-primitive--profile-action-split-grouped.koshi-primitive--layout-grid[class] .koshi-primitive--layout-role-media :is(img,:where(.koshi-primitive__media-frame,.koshi-primitive__media-link)) { block-size:100%; border-radius:inherit; } @media(max-width:900px) { .koshi-primitive--profile-action-split-grouped.koshi-primitive--layout-grid[class] > .koshi-container__layout > :is(.koshi-primitive--layout-role-media,.koshi-editor-block:has(> .koshi-primitive--layout-role-media)) { grid-row:1; } } .koshi-primitive--profile-action-split.koshi-primitive--layout-grid[class] .koshi-composition__actions { flex-direction:column; align-items:start; gap:0; } /* Professional callout uses independent text and action leaves with the existing charter. */ .koshi-primitive--profile-action-professional.koshi-primitive--layout-stack[class] .koshi-composition__actions { justify-content:center; gap:0; } .koshi-primitive--profile-action-professional.koshi-primitive--layout-stack[class] { grid-template-columns:minmax(0,1fr); } /* Contact intro and business service share the existing page charter. */ .koshi-primitive--profile-contact-page.koshi-primitive--layout-stack[class],.koshi-primitive--profile-contact-heading.koshi-primitive--layout-stack[class] { grid-template-columns:minmax(0,1fr); } .koshi-primitive--profile-contact-heading.koshi-primitive--layout-stack[class] > .koshi-container__layout { max-inline-size:100%; } /* FAQ preserves one search scope; subgrid shares the heading and search tracks. */ .koshi-primitive--profile-faq-page.koshi-primitive--layout-stack[class] { grid-template-columns:minmax(0,1fr); } .koshi-primitive--profile-faq-page.koshi-primitive--layout-stack[class] > .koshi-container__layout { display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(calc(var(--koshi-faq-title-min) + var(--koshi-faq-heading-gap)),max-content) minmax(var(--koshi-faq-search-min),max-content) auto; gap:0; } .koshi-primitive--profile-faq-page.koshi-primitive--layout-stack[class] > .koshi-container__layout::before { content:''; grid-column:1; grid-row:1 / 3; min-block-size:var(--koshi-faq-heading-min); pointer-events:none; } .koshi-primitive--profile-faq-page.koshi-primitive--layout-stack[class] > .koshi-container__layout > :is(.koshi-primitive--profile-faq-heading.koshi-primitive--layout-stack[class],.koshi-editor-block:has(> .koshi-primitive--profile-faq-heading.koshi-primitive--layout-stack[class])) { grid-column:1; grid-row:1; padding-block-end:var(--koshi-faq-heading-gap); } .koshi-primitive--profile-faq-heading.koshi-primitive--layout-stack[class] { grid-template-columns:minmax(0,1fr); } .koshi-primitive--profile-faq-heading.koshi-primitive--layout-stack[class] > .koshi-container__layout { align-self:stretch; } .koshi-primitive--profile-faq-page.koshi-primitive--layout-stack[class] > .koshi-container__layout > :is(.koshi-questions--separate,.koshi-editor-block:has(> .koshi-questions--separate)) { grid-column:1; grid-row:2 / 4; display:grid; grid-template-rows:subgrid; } .koshi-primitive--profile-faq-page.koshi-primitive--layout-stack[class] .koshi-questions--separate { display:grid; grid-template-rows:subgrid; grid-row:span 2; padding:0; min-block-size:0; } .koshi-primitive--profile-faq-page.koshi-primitive--layout-stack[class] .koshi-questions--separate > .faq-figma-container { display:grid; grid-template-rows:subgrid; grid-row:span 2; inline-size:100%; } .koshi-primitive--profile-faq-page.koshi-primitive--layout-stack[class] .koshi-questions--separate .faq-figma-heading { min-block-size:0; grid-template-rows:auto; block-size:100%; } .koshi-primitive--profile-faq-page.koshi-primitive--layout-stack[class] > .koshi-container__layout > .koshi-editor-block:has(> .koshi-primitive--profile-faq-heading) { display:grid; justify-items:center; } .koshi-primitive--profile-faq-page.koshi-primitive--layout-stack[class]:not(:has(.faq-figma-search-control)) > .koshi-container__layout { grid-template-rows:auto auto; } .koshi-primitive--profile-faq-page.koshi-primitive--layout-stack[class]:not(:has(.faq-figma-search-control)) > .koshi-container__layout::before { content:none; } .koshi-primitive--profile-faq-page.koshi-primitive--layout-stack[class]:not(:has(.faq-figma-search-control)) > .koshi-container__layout > :is(.koshi-primitive--profile-faq-heading.koshi-primitive--layout-stack[class],.koshi-editor-block:has(> .koshi-primitive--profile-faq-heading.koshi-primitive--layout-stack[class])) { padding-block-end:0; } /* Two-image editorial keeps approved frames on explicit media and detail zones. */ .koshi-primitive--profile-image-pair.koshi-primitive--layout-grid[class] :is(.koshi-primitive--layout-role-media,.koshi-primitive--layout-role-detail) :is(.koshi-container__layout,.koshi-editor-block,.koshi-primitive--media-item) { block-size:100%; border-radius:inherit; } .koshi-primitive--profile-image-pair.koshi-primitive--layout-grid[class] :is(.koshi-primitive--layout-role-media,.koshi-primitive--layout-role-detail) :is(img,:where(.koshi-primitive__media-frame,.koshi-primitive__media-link)) { inline-size:100%; block-size:100%; border-radius:inherit; object-fit:var(--koshi-media-fit,var(--koshi-media-presentation-fit,cover)); } .koshi-primitive--profile-image-pair.koshi-primitive--layout-grid[class] .koshi-primitive--layout-role-body > .koshi-container__layout { inline-size:100%; } .koshi-primitive--profile-image-pair.koshi-primitive--layout-grid[class] > .koshi-container__layout > .koshi-editor-block > :is(.koshi-primitive--layout-role-media,.koshi-primitive--layout-role-detail) { block-size:100%; border-radius:inherit; } .koshi-primitive--profile-image-pair.koshi-primitive--layout-grid[class] > .koshi-container__layout > :is(.koshi-primitive--layout-role-media,.koshi-primitive--layout-role-detail,.koshi-editor-block:has(> :is(.koshi-primitive--layout-role-media,.koshi-primitive--layout-role-detail))) { align-self:start; } /* Keep the image pair composition between the desktop and stacked layouts. */ @container koshi-editorial (56.25rem < width <= 83rem) { .koshi-primitive--profile-image-pair.koshi-primitive--layout-grid[class] > .koshi-container__layout { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:auto auto auto; } .koshi-primitive--profile-image-pair.koshi-primitive--layout-grid[class] > .koshi-container__layout > :is(.koshi-primitive--layout-role-heading,.koshi-editor-block:has(> .koshi-primitive--layout-role-heading)) { grid-column:1; grid-row:1; } .koshi-primitive--profile-image-pair.koshi-primitive--layout-grid[class] > .koshi-container__layout > :is(.koshi-primitive--layout-role-media,.koshi-editor-block:has(> .koshi-primitive--layout-role-media)) { grid-column:1; grid-row:2 / 4; } .koshi-primitive--profile-image-pair.koshi-primitive--layout-grid[class] > .koshi-container__layout > :is(.koshi-primitive--layout-role-detail,.koshi-editor-block:has(> .koshi-primitive--layout-role-detail)) { grid-column:2; grid-row:1 / 3; } .koshi-primitive--profile-image-pair.koshi-primitive--layout-grid[class] > .koshi-container__layout > :is(.koshi-primitive--layout-role-body,.koshi-editor-block:has(> .koshi-primitive--layout-role-body)) { grid-column:2; grid-row:3; } } /* Prose and side media share a decorative rule without an authored content node. */ .koshi-primitive--profile-prose-media.koshi-primitive--layout-grid[class] .koshi-primitive--layout-role-body > .koshi-container__layout::before { content:''; grid-row:2; pointer-events:none; } .koshi-primitive--profile-prose-media.koshi-primitive--layout-grid[class] .koshi-primitive--layout-role-body > .koshi-container__layout > :is(.koshi-primitive--title,.koshi-editor-block:has(> .koshi-primitive--title)) { grid-row:1; } .koshi-primitive--profile-prose-media.koshi-primitive--layout-grid[class] .koshi-primitive--layout-role-body > .koshi-container__layout > :is(.koshi-primitive--text,.koshi-editor-block:has(> .koshi-primitive--text)) { grid-row:3; } :is(.koshi-primitive--profile-prose-media.koshi-primitive--layout-grid[class] > .koshi-container__layout > .koshi-primitive--layout-role-media,.koshi-primitive--profile-prose-media.koshi-primitive--layout-grid[class] > .koshi-container__layout > .koshi-editor-block:has(> .koshi-primitive--layout-role-media)) { align-self:start; } .koshi-primitive--profile-prose-media.koshi-primitive--layout-grid[class] .koshi-primitive--layout-role-media,.koshi-primitive--profile-prose-media.koshi-primitive--layout-grid[class] .koshi-primitive--layout-role-media :is(.koshi-container__layout,.koshi-editor-block,.koshi-primitive--media-item) { block-size:100%; border-radius:inherit; } .koshi-primitive--profile-prose-media.koshi-primitive--layout-grid[class] .koshi-primitive--layout-role-media :is(img,:where(.koshi-primitive__media-frame,.koshi-primitive__media-link)) { inline-size:100%; block-size:100%; border-radius:inherit; object-fit:var(--koshi-media-fit,var(--koshi-media-presentation-fit,cover)); } .koshi-primitive--profile-prose-media.koshi-primitive--layout-grid[class] .koshi-primitive--layout-role-body > .koshi-container__layout { display:grid; grid-template-columns:minmax(0,1fr); } /* Centered callout leaves retain the same available width through editor frames. */ .koshi-primitive--profile-callout-wide.koshi-primitive--layout-stack[class] > .koshi-container__layout > .koshi-editor-block:has(> :is(.koshi-primitive--title,.koshi-primitive--text)) { inline-size:100%; display:grid; justify-items:center; } /* Player cover: editable native zones preserve the existing content group. */ .koshi-primitive--profile-cover-player.koshi-primitive--layout-overlay > .koshi-container__layout, .koshi-primitive--profile-cover-player.koshi-primitive--layout-overlay > .koshi-container__layout > .koshi-editor-block, .koshi-primitive--profile-cover-player.koshi-primitive--layout-overlay .koshi-primitive--container:not(.koshi-primitive--placement-role-background) > .koshi-container__layout, .koshi-primitive--profile-cover-player.koshi-primitive--layout-overlay .koshi-primitive--container:not(.koshi-primitive--placement-role-background) > .koshi-container__layout > .koshi-editor-block, .koshi-primitive--profile-cover-player.koshi-primitive--layout-overlay .koshi-primitive--role-eyebrow > p, .koshi-primitive--profile-cover-player.koshi-primitive--layout-overlay .koshi-primitive--buttons, .koshi-primitive--profile-cover-player.koshi-primitive--layout-overlay .koshi-primitive--buttons > .koshi-composition__actions { display: contents; } .koshi-primitive--profile-cover-player.koshi-primitive--layout-overlay .koshi-primitive--role-eyebrow > p { font:inherit; letter-spacing:inherit; } .koshi-primitive--profile-cover-player.koshi-primitive--layout-overlay { isolation:isolate; } .koshi-primitive--profile-cover-player.koshi-primitive--layout-overlay::before { content:''; position:absolute; inset:0; z-index:1; pointer-events:none; } .koshi-primitive--profile-cover-player.koshi-primitive--layout-overlay .koshi-primitive--placement-role-background { position:absolute; inset:0; grid-area:auto; inline-size:100%; block-size:100%; } .koshi-primitive--profile-cover-player.koshi-primitive--layout-overlay .koshi-primitive--placement-role-background .koshi-primitive--media-item { --koshi-zone-image-height:100%; --koshi-zone-fill:100%; } .koshi-primitive--profile-cover-player.koshi-primitive--layout-overlay .koshi-primitive--placement-role-background > .koshi-container__layout { block-size:100%; } .koshi-primitive--profile-cover-player.koshi-primitive--layout-overlay .koshi-products { z-index:2; } .koshi-primitive--profile-cover-player.koshi-primitive--layout-overlay .koshi-composition__scroll { z-index:2; } .koshi-primitive--profile-cover-player.koshi-primitive--layout-overlay .koshi-products__items { display:block; } .koshi-primitive--profile-cover-player.koshi-primitive--layout-overlay .koshi-products__copy { gap:0; } .koshi-primitive--profile-cover-player.koshi-primitive--layout-overlay .koshi-products__title { margin:0; } .koshi-primitive--profile-cover-player.koshi-primitive--layout-overlay .koshi-products__badge { position:absolute; } .koshi-primitive--profile-cover-player.koshi-primitive--layout-overlay .koshi-primitive--placement-role-background .koshi-primitive--media-item { position:absolute; inset:0; inline-size:100%; block-size:100%; } /* Media followed by authored values: a decorative rule occupies its own track. */ .koshi-primitive--profile-values-media.koshi-primitive--layout-stack[class] > .koshi-container__layout { display:grid; grid-template-columns:minmax(0,1fr); } .koshi-primitive--profile-values-media.koshi-primitive--layout-stack[class] > .koshi-container__layout::before { content:''; grid-row:3; pointer-events:none; } :is(.koshi-primitive--profile-values-media.koshi-primitive--layout-stack[class] > .koshi-container__layout > .koshi-primitive--media-item,.koshi-primitive--profile-values-media.koshi-primitive--layout-stack[class] > .koshi-container__layout > .koshi-editor-block:has(> .koshi-primitive--media-item)) { grid-row:1; } .koshi-primitive--profile-values-media.koshi-primitive--layout-stack[class] > .koshi-container__layout > :is(.koshi-primitive--title,.koshi-editor-block:has(> .koshi-primitive--title)) { grid-row:2; } .koshi-primitive--profile-values-media.koshi-primitive--layout-stack[class] > .koshi-container__layout > :is(.koshi-primitive--container,.koshi-editor-block:has(> .koshi-primitive--container)) { grid-row:4; } .koshi-primitive--profile-values-media.koshi-primitive--layout-stack[class] > .koshi-container__layout > .koshi-editor-block > .koshi-primitive--media-item { display:block; position:relative; block-size:100%; border-radius:inherit; } /* A linked image owns the same frame as an unlinked image, with a real focus box. */ .koshi-primitive--media-item > :is(.koshi-primitive__media-link,.koshi-primitive__media-frame) { display: grid; color: inherit; text-decoration: none; } :is(.koshi-primitive__media-link,.koshi-primitive__media-frame) > img { display: block; inline-size: 100%; block-size: 100%; min-inline-size: 0; min-block-size: 0; max-inline-size: 100%; aspect-ratio: inherit; object-fit: inherit; object-position: inherit; border-radius: inherit; } :is(.koshi-primitive__media-link,.koshi-primitive__media-frame):focus-visible { outline: .125rem solid currentColor; outline-offset: .25rem; } /* Image statements reuse the native cover zones and the original title/prose flow. */ .koshi-primitive--profile-image-statement.koshi-primitive--layout-overlay > .koshi-container__layout { display:contents; } .koshi-primitive--profile-image-statement.koshi-primitive--layout-overlay::before { content:''; z-index:1; } .koshi-primitive--profile-image-statement.koshi-primitive--layout-overlay .koshi-primitive--placement-role-background { position:absolute; inset:0; grid-area:auto; inline-size:100%; block-size:100%; } .koshi-primitive--profile-image-statement.koshi-primitive--layout-overlay .koshi-primitive--placement-role-background > .koshi-container__layout { block-size:100%; } .koshi-primitive--profile-image-statement.koshi-primitive--layout-overlay .koshi-primitive--placement-role-background .koshi-primitive--media-item { --koshi-zone-image-height:100%; --koshi-zone-fill:100%; position:absolute; inset:0; inline-size:100%; block-size:100%; } .koshi-primitive--profile-image-statement.koshi-primitive--layout-overlay .koshi-primitive--container:not(.koshi-primitive--placement-role-background) > .koshi-container__layout, .koshi-primitive--profile-image-statement.koshi-primitive--layout-overlay .koshi-primitive--container:not(.koshi-primitive--placement-role-background) .koshi-primitive--text, .koshi-primitive--profile-image-statement.koshi-primitive--layout-overlay .koshi-primitive--buttons, .koshi-primitive--profile-image-statement.koshi-primitive--layout-overlay .koshi-composition__actions { display:contents; } .koshi-primitive--profile-image-statement.koshi-primitive--layout-overlay .koshi-primitive--container:not(.koshi-primitive--placement-role-background) { display:block; } .koshi-primitive--profile-image-statement.koshi-primitive--layout-overlay .koshi-primitive--title > span:not(:first-child) { display:inline; } @container koshi-editorial (min-width:61.3125rem) { .koshi-primitive--profile-image-statement.koshi-primitive--layout-overlay .koshi-primitive--title > span:not(:first-child) { display:block; } } .koshi-primitive--profile-image-statement.koshi-primitive--layout-overlay .koshi-editor-block { display:contents; } /* Curated icons have no authored SVG, crop, or playback state. */ .koshi-primitive--media-kind-icon > .koshi-primitive__icon { display:block; inline-size:3rem; block-size:3rem; fill:currentColor; } /* Illustrated testimonials retain native content and a shared strip controller. */ .koshi-primitive--profile-testimonial-section.koshi-primitive--layout-stack > .koshi-container__layout > .koshi-primitive--container > .koshi-container__layout, .koshi-primitive--profile-testimonial-section.koshi-primitive--layout-stack .koshi-navigation__panels > .koshi-primitive--container > .koshi-container__layout, .koshi-primitive--profile-testimonial-section.koshi-primitive--layout-stack .koshi-quote-item, .koshi-primitive--profile-testimonial-section.koshi-primitive--layout-stack .koshi-quote-item figcaption, .koshi-primitive--profile-testimonial-section.koshi-primitive--layout-stack .koshi-quote-item blockquote > p { display:contents; } .koshi-primitive--profile-testimonial-section.koshi-primitive--layout-stack .koshi-primitive--media-item { --koshi-zone-image-height:100%; --koshi-zone-fill:100%; } .koshi-primitive--profile-testimonial-section.koshi-primitive--layout-stack .koshi-navigation__viewport { overflow-x:auto; } .koshi-primitive--profile-testimonial-section.koshi-primitive--layout-stack .koshi-composition-navigation { margin:0; } .koshi-primitive--profile-testimonial-section.koshi-primitive--layout-stack .koshi-container__layout > .koshi-editor-block { display:contents; } .koshi-primitive--profile-testimonial-section.koshi-primitive--layout-stack > .koshi-container__layout > .koshi-editor-block > .koshi-primitive--container > .koshi-container__layout, .koshi-primitive--profile-testimonial-section.koshi-primitive--layout-stack .koshi-navigation__panels > .koshi-editor-block > .koshi-primitive--container > .koshi-container__layout { display:contents; } .koshi-primitive--profile-testimonial-section.koshi-primitive--layout-stack .koshi-navigation__panels > .koshi-editor-block > .koshi-primitive--container { block-size:auto; } .koshi-primitive--profile-testimonial-section.koshi-primitive--layout-stack > .koshi-container__layout { display:grid; gap:inherit; margin-inline:auto; } .koshi-primitive--profile-testimonial-section.koshi-primitive--layout-stack.koshi-primitive--container .koshi-navigation--carousel > .koshi-navigation__viewport > .koshi-navigation__panels { overflow:visible; } .koshi-primitive--profile-testimonial-section.koshi-primitive--layout-stack .koshi-navigation__panels > .koshi-editor-block > .koshi-primitive--container { display:contents; } .koshi-primitive--profile-testimonial-section.koshi-primitive--layout-stack .koshi-composition-navigation { justify-content:flex-start; } .koshi-primitive--profile-testimonial-section.koshi-primitive--layout-stack [data-koshi-navigation-previous] { order:1; } .koshi-primitive--profile-testimonial-section.koshi-primitive--layout-stack [data-koshi-navigation-next] { order:2; } .koshi-primitive--profile-testimonial-section.koshi-primitive--layout-stack .koshi-composition-navigation__dot { min-inline-size:0; border-radius:0; } .koshi-primitive--profile-testimonial-section.koshi-primitive--layout-stack [data-koshi-navigation-previous], .koshi-primitive--profile-testimonial-section.koshi-primitive--layout-stack [data-koshi-navigation-next] { font-size:0; } /* The native page controller selects groups; this presentation owns their staggered layout. */ .koshi-primitive--profile-testimonial-section.koshi-primitive--layout-stack .koshi-navigation--carousel[data-koshi-carousel-mode="pages"] > .koshi-navigation__viewport { overflow:hidden; } .koshi-primitive--profile-testimonial-section.koshi-primitive--layout-stack .koshi-navigation--carousel[data-koshi-carousel-mode="pages"] > .koshi-navigation__viewport > .koshi-navigation__panels { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); } .koshi-primitive--profile-testimonial-section.koshi-primitive--layout-stack .koshi-navigation--carousel[data-koshi-carousel-mode="pages"][data-koshi-items-visible="1"] > .koshi-navigation__viewport > .koshi-navigation__panels { grid-template-columns:1fr; } @container koshi-navigation (max-width:47.99rem) { .koshi-primitive--profile-testimonial-section.koshi-primitive--layout-stack .koshi-navigation--carousel[data-koshi-carousel-mode="pages"] > .koshi-navigation__viewport > .koshi-navigation__panels { grid-template-columns:repeat(var(--koshi-navigation-effective-visible),minmax(0,1fr)); grid-template-rows:auto; min-height:0; } .koshi-primitive--profile-testimonial-section.koshi-primitive--layout-stack .koshi-navigation--carousel[data-koshi-carousel-mode="pages"] > .koshi-navigation__viewport > .koshi-navigation__panels > :is([data-koshi-panel-id],.koshi-editor-block) { grid-area:auto; } } /* Staggered illustrated sequences: selectable card and copy containers. */ .koshi-primitive--profile-staggered-section.koshi-primitive--layout-stack > .koshi-container__layout { display:block; } .koshi-primitive--profile-staggered-section.koshi-primitive--layout-stack .koshi-primitive--text { display:contents; } .koshi-primitive--profile-staggered-section.koshi-primitive--layout-stack > .koshi-container__layout > .koshi-primitive--layout-grid > .koshi-container__layout > .koshi-primitive--container, .koshi-primitive--profile-staggered-section.koshi-primitive--layout-stack > .koshi-container__layout > .koshi-primitive--layout-grid > .koshi-container__layout > .koshi-editor-block > .koshi-primitive--container, .koshi-primitive--profile-staggered-section.koshi-primitive--layout-stack > .koshi-container__layout > .koshi-editor-block > .koshi-primitive--layout-grid > .koshi-container__layout > .koshi-primitive--container, .koshi-primitive--profile-staggered-section.koshi-primitive--layout-stack > .koshi-container__layout > .koshi-editor-block > .koshi-primitive--layout-grid > .koshi-container__layout > .koshi-editor-block > .koshi-primitive--container { display:block; } .koshi-primitive--profile-staggered-section.koshi-primitive--layout-stack > .koshi-container__layout > .koshi-primitive--layout-grid > .koshi-container__layout > .koshi-primitive--container > .koshi-container__layout > .koshi-primitive--container > .koshi-container__layout, .koshi-primitive--profile-staggered-section.koshi-primitive--layout-stack > .koshi-container__layout > .koshi-primitive--layout-grid > .koshi-container__layout > .koshi-primitive--container > .koshi-container__layout > .koshi-editor-block > .koshi-primitive--container > .koshi-container__layout, .koshi-primitive--profile-staggered-section.koshi-primitive--layout-stack > .koshi-container__layout > .koshi-primitive--layout-grid > .koshi-container__layout > .koshi-editor-block > .koshi-primitive--container > .koshi-container__layout > .koshi-primitive--container > .koshi-container__layout, .koshi-primitive--profile-staggered-section.koshi-primitive--layout-stack > .koshi-container__layout > .koshi-primitive--layout-grid > .koshi-container__layout > .koshi-editor-block > .koshi-primitive--container > .koshi-container__layout > .koshi-editor-block > .koshi-primitive--container > .koshi-container__layout, .koshi-primitive--profile-staggered-section.koshi-primitive--layout-stack > .koshi-container__layout > .koshi-editor-block > .koshi-primitive--layout-grid > .koshi-container__layout > .koshi-primitive--container > .koshi-container__layout > .koshi-primitive--container > .koshi-container__layout, .koshi-primitive--profile-staggered-section.koshi-primitive--layout-stack > .koshi-container__layout > .koshi-editor-block > .koshi-primitive--layout-grid > .koshi-container__layout > .koshi-primitive--container > .koshi-container__layout > .koshi-editor-block > .koshi-primitive--container > .koshi-container__layout, .koshi-primitive--profile-staggered-section.koshi-primitive--layout-stack > .koshi-container__layout > .koshi-editor-block > .koshi-primitive--layout-grid > .koshi-container__layout > .koshi-editor-block > .koshi-primitive--container > .koshi-container__layout > .koshi-primitive--container > .koshi-container__layout, .koshi-primitive--profile-staggered-section.koshi-primitive--layout-stack > .koshi-container__layout > .koshi-editor-block > .koshi-primitive--layout-grid > .koshi-container__layout > .koshi-editor-block > .koshi-primitive--container > .koshi-container__layout > .koshi-editor-block > .koshi-primitive--container > .koshi-container__layout { display:contents; } .koshi-primitive--profile-staggered-section.koshi-primitive--layout-stack .koshi-primitive--media-item { --koshi-zone-image-height:auto; } .koshi-primitive--profile-staggered-section.koshi-primitive--layout-stack > .koshi-container__layout > .koshi-primitive--title, .koshi-primitive--profile-staggered-section.koshi-primitive--layout-stack > .koshi-container__layout > .koshi-editor-block > .koshi-primitive--title { margin-bottom:var(--koshi-staggered-heading-space); } .koshi-primitive--profile-staggered-section.koshi-primitive--layout-stack > .koshi-container__layout > .koshi-primitive--title, .koshi-primitive--profile-staggered-section.koshi-primitive--layout-stack > .koshi-container__layout > .koshi-editor-block > .koshi-primitive--title { width:var(--koshi-staggered-heading-width,fit-content); margin-left:var(--koshi-staggered-heading-margin-start); } @container koshi-editorial (min-width:75rem) { .koshi-primitive--profile-staggered-section.koshi-primitive--layout-stack > .koshi-container__layout > .koshi-primitive--title, .koshi-primitive--profile-staggered-section.koshi-primitive--layout-stack > .koshi-container__layout > .koshi-editor-block > .koshi-primitive--title { margin-left:auto; margin-right:var(--koshi-staggered-heading-shift); } } .koshi-primitive--profile-staggered-section.koshi-primitive--layout-stack .koshi-container__layout > .koshi-editor-block { display:contents; } /* Flattened editor wrappers do not own a height for flowing staggered zones. */ .koshi-primitive--profile-staggered-section .koshi-container__layout > .koshi-editor-block > .koshi-primitive--container { block-size: auto; } /* Rail stories: authored copy and media are real children of the shared accordion. */ /* Each rail owns one separator; the accordion owns the outside contour. */ .koshi-primitive--profile-rail-stories.koshi-primitive--layout-stack .koshi-navigation--accordion > .koshi-navigation__viewport > .koshi-navigation__panels > .koshi-composition-navigation__button:not(:first-child) { border-top: 1px solid var(--koshi-taupe); } .koshi-primitive--profile-rail-stories.koshi-primitive--layout-stack .koshi-navigation--accordion > .koshi-navigation__viewport > .koshi-navigation__panels > [data-koshi-panel-id], .koshi-primitive--profile-rail-stories.koshi-primitive--layout-stack .koshi-navigation--accordion > .koshi-navigation__viewport > .koshi-navigation__panels > .koshi-editor-block > [data-koshi-panel-id] { box-shadow: none; } @container koshi-rail-layout (min-width:90rem) { .koshi-primitive--profile-rail-stories.koshi-primitive--layout-stack .koshi-navigation--accordion > .koshi-navigation__viewport > .koshi-navigation__panels > .koshi-composition-navigation__button:not(:first-child) { border-top: 0; border-left: 1px solid var(--koshi-taupe); } } .koshi-primitive--profile-rail-stories.koshi-primitive--layout-stack > .koshi-container__layout, .koshi-primitive--profile-rail-stories.koshi-primitive--layout-stack > .koshi-container__layout > .koshi-primitive--container > .koshi-container__layout , .koshi-primitive--profile-rail-stories.koshi-primitive--layout-stack > .koshi-container__layout > .koshi-editor-block > .koshi-primitive--container > .koshi-container__layout { display:block; } .koshi-primitive--profile-rail-stories.koshi-primitive--layout-stack .koshi-container__layout > .koshi-editor-block { display:contents; } .koshi-primitive--profile-rail-stories.koshi-primitive--layout-stack .koshi-container__layout > .koshi-editor-block > .koshi-primitive--container { block-size:auto; } .koshi-primitive--profile-rail-stories.koshi-primitive--layout-stack .koshi-navigation--accordion > .koshi-navigation__viewport > .koshi-navigation__panels > [data-koshi-panel-id] > .koshi-container__layout > .koshi-primitive--container > .koshi-container__layout , .koshi-primitive--profile-rail-stories.koshi-primitive--layout-stack .koshi-navigation--accordion > .koshi-navigation__viewport > .koshi-navigation__panels > [data-koshi-panel-id] > .koshi-container__layout > .koshi-editor-block > .koshi-primitive--container > .koshi-container__layout , .koshi-primitive--profile-rail-stories.koshi-primitive--layout-stack .koshi-navigation--accordion > .koshi-navigation__viewport > .koshi-navigation__panels > .koshi-editor-block > [data-koshi-panel-id] > .koshi-container__layout > .koshi-primitive--container > .koshi-container__layout , .koshi-primitive--profile-rail-stories.koshi-primitive--layout-stack .koshi-navigation--accordion > .koshi-navigation__viewport > .koshi-navigation__panels > .koshi-editor-block > [data-koshi-panel-id] > .koshi-container__layout > .koshi-editor-block > .koshi-primitive--container > .koshi-container__layout { display:contents; } .koshi-primitive--profile-rail-stories.koshi-primitive--layout-stack .koshi-navigation--accordion { container-type:normal; } .koshi-primitive--profile-rail-stories.koshi-primitive--layout-stack .koshi-navigation--accordion > .koshi-navigation__viewport > .koshi-navigation__panels { display:block; --koshi-navigation-axis:vertical; } .koshi-primitive--profile-rail-stories.koshi-primitive--layout-stack .koshi-navigation--accordion > .koshi-navigation__viewport > .koshi-navigation__panels > .koshi-composition-navigation__button { writing-mode:horizontal-tb; transform:none; margin:0; } .koshi-primitive--profile-rail-stories.koshi-primitive--layout-stack .koshi-navigation--accordion > .koshi-navigation__viewport > .koshi-navigation__panels > [data-koshi-panel-id] , .koshi-primitive--profile-rail-stories.koshi-primitive--layout-stack .koshi-navigation--accordion > .koshi-navigation__viewport > .koshi-navigation__panels > .koshi-editor-block > [data-koshi-panel-id] { flex:1 1 0; overflow:visible; } .koshi-primitive--profile-rail-stories.koshi-primitive--layout-stack .koshi-navigation--accordion > .koshi-navigation__viewport > .koshi-navigation__panels > [data-koshi-panel-id] > .koshi-container__layout , .koshi-primitive--profile-rail-stories.koshi-primitive--layout-stack .koshi-navigation--accordion > .koshi-navigation__viewport > .koshi-navigation__panels > .koshi-editor-block > [data-koshi-panel-id] > .koshi-container__layout { display:block; } .koshi-primitive--profile-rail-stories.koshi-primitive--layout-stack .koshi-primitive--text { display:contents; } .koshi-primitive--profile-rail-stories.koshi-primitive--layout-stack .koshi-primitive--media-item { --koshi-zone-image-height:auto; } @container koshi-rail-layout (min-width:90rem) { .koshi-primitive--profile-rail-stories.koshi-primitive--layout-stack .koshi-navigation--accordion > .koshi-navigation__viewport > .koshi-navigation__panels { display:flex; --koshi-navigation-axis:horizontal; } .koshi-primitive--profile-rail-stories.koshi-primitive--layout-stack .koshi-navigation--accordion > .koshi-navigation__viewport > .koshi-navigation__panels > .koshi-composition-navigation__button { position:relative; flex:0 0 auto; } .koshi-primitive--profile-rail-stories.koshi-primitive--layout-stack .koshi-navigation--accordion > .koshi-navigation__viewport > .koshi-navigation__panels > [data-koshi-panel-id] > .koshi-container__layout , .koshi-primitive--profile-rail-stories.koshi-primitive--layout-stack .koshi-navigation--accordion > .koshi-navigation__viewport > .koshi-navigation__panels > .koshi-editor-block > [data-koshi-panel-id] > .koshi-container__layout { position:relative; inset:auto; } } .koshi-primitive--profile-rail-stories.koshi-primitive--layout-stack .koshi-navigation--accordion > .koshi-navigation__viewport > .koshi-navigation__panels > [data-koshi-panel-id] > .koshi-container__layout > .koshi-primitive--container , .koshi-primitive--profile-rail-stories.koshi-primitive--layout-stack .koshi-navigation--accordion > .koshi-navigation__viewport > .koshi-navigation__panels > [data-koshi-panel-id] > .koshi-container__layout > .koshi-editor-block > .koshi-primitive--container , .koshi-primitive--profile-rail-stories.koshi-primitive--layout-stack .koshi-navigation--accordion > .koshi-navigation__viewport > .koshi-navigation__panels > .koshi-editor-block > [data-koshi-panel-id] > .koshi-container__layout > .koshi-primitive--container , .koshi-primitive--profile-rail-stories.koshi-primitive--layout-stack .koshi-navigation--accordion > .koshi-navigation__viewport > .koshi-navigation__panels > .koshi-editor-block > [data-koshi-panel-id] > .koshi-container__layout > .koshi-editor-block > .koshi-primitive--container { display:block; } .koshi-primitive--profile-rail-stories.koshi-primitive--layout-stack .koshi-navigation--accordion > .koshi-navigation__viewport > .koshi-navigation__panels > [data-koshi-panel-id] > .koshi-container__layout > .koshi-primitive--container .koshi-primitive--role-eyebrow p , .koshi-primitive--profile-rail-stories.koshi-primitive--layout-stack .koshi-navigation--accordion > .koshi-navigation__viewport > .koshi-navigation__panels > [data-koshi-panel-id] > .koshi-container__layout > .koshi-editor-block > .koshi-primitive--container .koshi-primitive--role-eyebrow p , .koshi-primitive--profile-rail-stories.koshi-primitive--layout-stack .koshi-navigation--accordion > .koshi-navigation__viewport > .koshi-navigation__panels > .koshi-editor-block > [data-koshi-panel-id] > .koshi-container__layout > .koshi-primitive--container .koshi-primitive--role-eyebrow p , .koshi-primitive--profile-rail-stories.koshi-primitive--layout-stack .koshi-navigation--accordion > .koshi-navigation__viewport > .koshi-navigation__panels > .koshi-editor-block > [data-koshi-panel-id] > .koshi-container__layout > .koshi-editor-block > .koshi-primitive--container .koshi-primitive--role-eyebrow p { font-weight:inherit; } .koshi-primitive--profile-rail-stories .koshi-navigation--accordion > .koshi-navigation__viewport { inline-size:100%; } .koshi-primitive--profile-rail-stories .koshi-navigation__panels > .koshi-editor-block { flex:1 1 0; min-inline-size:0; } /* Long authored copy must not overlap the following icon or image. */ @container koshi-rail-layout (min-width:90rem) { .koshi-primitive--profile-rail-stories.koshi-primitive--layout-stack { height:auto; } .koshi-primitive--profile-rail-stories.koshi-primitive--layout-stack .koshi-navigation--accordion, .koshi-primitive--profile-rail-stories.koshi-primitive--layout-stack .koshi-navigation--accordion > .koshi-navigation__viewport > .koshi-navigation__panels > [data-koshi-panel-id], .koshi-primitive--profile-rail-stories.koshi-primitive--layout-stack .koshi-navigation--accordion > .koshi-navigation__viewport > .koshi-navigation__panels > .koshi-editor-block > [data-koshi-panel-id] { height:auto; min-height:var(--koshi-rail-panel-min); } .koshi-primitive--profile-rail-stories.koshi-primitive--layout-stack .koshi-navigation--accordion > .koshi-navigation__viewport > .koshi-navigation__panels > [data-koshi-panel-id] > .koshi-container__layout, .koshi-primitive--profile-rail-stories.koshi-primitive--layout-stack .koshi-navigation--accordion > .koshi-navigation__viewport > .koshi-navigation__panels > .koshi-editor-block > [data-koshi-panel-id] > .koshi-container__layout { height:auto; min-height:var(--koshi-rail-panel-min); } .koshi-primitive--profile-rail-stories.koshi-primitive--layout-stack .koshi-navigation--accordion > .koshi-navigation__viewport > .koshi-navigation__panels > [data-koshi-panel-id] > .koshi-container__layout > .koshi-primitive--container, .koshi-primitive--profile-rail-stories.koshi-primitive--layout-stack .koshi-navigation--accordion > .koshi-navigation__viewport > .koshi-navigation__panels > [data-koshi-panel-id] > .koshi-container__layout > .koshi-editor-block > .koshi-primitive--container, .koshi-primitive--profile-rail-stories.koshi-primitive--layout-stack .koshi-navigation--accordion > .koshi-navigation__viewport > .koshi-navigation__panels > .koshi-editor-block > [data-koshi-panel-id] > .koshi-container__layout > .koshi-primitive--container, .koshi-primitive--profile-rail-stories.koshi-primitive--layout-stack .koshi-navigation--accordion > .koshi-navigation__viewport > .koshi-navigation__panels > .koshi-editor-block > [data-koshi-panel-id] > .koshi-container__layout > .koshi-editor-block > .koshi-primitive--container { position:relative; top:auto; left:auto; height:auto; min-height:var(--koshi-rail-copy-min); margin:var(--koshi-rail-copy-top) var(--koshi-rail-copy-inset) 0; } .koshi-primitive--profile-rail-stories.koshi-primitive--layout-stack .koshi-navigation--accordion > .koshi-navigation__viewport > .koshi-navigation__panels > [data-koshi-panel-id] > .koshi-container__layout > .koshi-primitive--container :is(.koshi-primitive--title,.koshi-primitive--text[class] p), .koshi-primitive--profile-rail-stories.koshi-primitive--layout-stack .koshi-navigation--accordion > .koshi-navigation__viewport > .koshi-navigation__panels > [data-koshi-panel-id] > .koshi-container__layout > .koshi-editor-block > .koshi-primitive--container :is(.koshi-primitive--title,.koshi-primitive--text[class] p), .koshi-primitive--profile-rail-stories.koshi-primitive--layout-stack .koshi-navigation--accordion > .koshi-navigation__viewport > .koshi-navigation__panels > .koshi-editor-block > [data-koshi-panel-id] > .koshi-container__layout > .koshi-primitive--container :is(.koshi-primitive--title,.koshi-primitive--text[class] p), .koshi-primitive--profile-rail-stories.koshi-primitive--layout-stack .koshi-navigation--accordion > .koshi-navigation__viewport > .koshi-navigation__panels > .koshi-editor-block > [data-koshi-panel-id] > .koshi-container__layout > .koshi-editor-block > .koshi-primitive--container :is(.koshi-primitive--title,.koshi-primitive--text[class] p) { height:auto; } .koshi-primitive--profile-rail-stories.koshi-primitive--layout-stack .koshi-navigation--accordion > .koshi-navigation__viewport > .koshi-navigation__panels > [data-koshi-panel-id] > .koshi-container__layout > .koshi-primitive--media-item :is(img,:where(.koshi-primitive__media-frame,.koshi-primitive__media-link)), .koshi-primitive--profile-rail-stories.koshi-primitive--layout-stack .koshi-navigation--accordion > .koshi-navigation__viewport > .koshi-navigation__panels > [data-koshi-panel-id] > .koshi-container__layout > .koshi-editor-block > .koshi-primitive--media-item :is(img,:where(.koshi-primitive__media-frame,.koshi-primitive__media-link)), .koshi-primitive--profile-rail-stories.koshi-primitive--layout-stack .koshi-navigation--accordion > .koshi-navigation__viewport > .koshi-navigation__panels > .koshi-editor-block > [data-koshi-panel-id] > .koshi-container__layout > .koshi-primitive--media-item :is(img,:where(.koshi-primitive__media-frame,.koshi-primitive__media-link)), .koshi-primitive--profile-rail-stories.koshi-primitive--layout-stack .koshi-navigation--accordion > .koshi-navigation__viewport > .koshi-navigation__panels > .koshi-editor-block > [data-koshi-panel-id] > .koshi-container__layout > .koshi-editor-block > .koshi-primitive--media-item :is(img,:where(.koshi-primitive__media-frame,.koshi-primitive__media-link)) { position:static; margin:calc(var(--koshi-rail-image-top) - var(--koshi-rail-copy-top) - var(--koshi-rail-copy-min)) 0 calc(var(--koshi-rail-copy-inset) + 1rem) var(--koshi-rail-copy-inset); } .koshi-primitive--profile-rail-stories.koshi-primitive--layout-stack .koshi-navigation--accordion > .koshi-navigation__viewport > .koshi-navigation__panels > .koshi-composition-navigation__button { height:auto; min-height:var(--koshi-rail-panel-min); align-self:stretch; } .koshi-primitive--profile-rail-stories.koshi-primitive--layout-stack .koshi-navigation--accordion > .koshi-navigation__viewport > .koshi-navigation__panels > .koshi-composition-navigation__button > .koshi-composition-navigation__label { height:calc(100% - 3.125rem); } } /* Without enhancement every authored panel remains in the normal reading flow. */ .koshi-primitive--profile-rail-stories .koshi-navigation--accordion:not([data-koshi-navigation-enhanced]) { height:auto; overflow:visible; } .koshi-primitive--profile-rail-stories.koshi-primitive--layout-stack .koshi-navigation--accordion:not([data-koshi-navigation-enhanced]) > .koshi-navigation__viewport > .koshi-navigation__panels { display:block; } .koshi-primitive--profile-rail-stories.koshi-primitive--layout-stack { height:auto; } @container koshi-rail-layout (min-width:90rem) { .koshi-primitive--profile-rail-stories.koshi-primitive--layout-stack > .koshi-container__layout > .koshi-primitive--container, .koshi-primitive--profile-rail-stories.koshi-primitive--layout-stack > .koshi-container__layout > .koshi-editor-block > .koshi-primitive--container, .koshi-primitive--profile-rail-stories.koshi-primitive--layout-stack > .koshi-container__layout > .koshi-primitive--container .koshi-primitive--title, .koshi-primitive--profile-rail-stories.koshi-primitive--layout-stack > .koshi-container__layout > .koshi-editor-block > .koshi-primitive--container .koshi-primitive--title, .koshi-primitive--profile-rail-stories.koshi-primitive--layout-stack > .koshi-container__layout > .koshi-primitive--container .koshi-primitive--text p, .koshi-primitive--profile-rail-stories.koshi-primitive--layout-stack > .koshi-container__layout > .koshi-editor-block > .koshi-primitive--container .koshi-primitive--text p { height:auto; } } /* Clip only the magnified image; captions and the link focus outline stay outside. */ .koshi-primitive__media-zoom { overflow: clip; } .koshi-primitive__media-zoom > img { transform: scale(var(--koshi-media-zoom, 1)); transform-origin: var(--koshi-media-focal-x, 50%) var(--koshi-media-focal-y, 50%); }