[data-story-grid-host] {
  --story-gutter: clamp(8px, 1.1vw, 14px);
  --story-panel-bg: #f3f0e9;
  --story-panel-ink: var(--ink, #111111);
  --story-panel-muted: var(--muted, #666761);
  --story-panel-line: rgba(17, 17, 17, 0.13);
  display: grid;
  gap: clamp(18px, 3vw, 28px);
  width: 100%;
  margin-bottom: clamp(22px, 4vw, 42px);
}

[data-story-grid-host] .story-grid-header {
  display: grid;
  max-width: 760px;
  gap: 12px;
}

[data-story-grid-host] .story-grid-header .section-kicker {
  margin-bottom: 0;
}

[data-story-grid-host] .story-grid-header p:not(.section-kicker),
[data-story-grid-host] .story-grid-status,
[data-story-grid-host] .story-grid-error__message {
  margin: 0;
  color: var(--story-panel-muted);
}

[data-story-grid-host] .story-grid-status,
[data-story-grid-host] .story-grid-error {
  padding: 16px 18px;
  border: 1px solid var(--story-panel-line);
  background: rgba(255, 255, 255, 0.44);
}

[data-story-grid-host] .story-grid-error {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

[data-story-grid-host] .story-grid-error__retry {
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--story-panel-ink);
  border-radius: 999px;
  background: transparent;
  color: var(--story-panel-ink);
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}

[data-story-grid-host] .story-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-areas:
    "q01 q01 q02 q02 q03 q03 q04 q04 q05 q05 q06 q06"
    "q07 q07 q07 q07 q07 q07 q07 q07 q07 q07 q07 q07"
    "q08 q08 q08 q08 q09 q09 q09 q09 q10 q10 q10 q10"
    "q11 q11 q11 q11 q11 q11 q12 q12 q12 q12 q12 q12"
    "q13 q13 q13 q13 q13 q13 q13 q13 q13 q13 q13 q13"
    "q14 q14 q14 q14 q14 q15 q15 q15 q15 q15 q15 q15"
    "q14 q14 q14 q14 q14 q16 q16 q16 q16 q16 q16 q16"
    "q17 q17 q17 q17 q17 q17 q18 q18 q18 q18 q18 q18"
    "q19 q19 q19 q19 q19 q19 q19 q19 q19 q19 q19 q19"
    "q20 q20 q20 q20 q20 q20 q20 q20 q20 q20 q20 q20"
    "q21 q21 q21 q21 q22 q22 q22 q22 q23 q23 q23 q23"
    "q24 q24 q25 q25 q26 q26 q27 q27 q28 q28 q29 q29";
  gap: var(--story-gutter);
  align-items: stretch;
}

[data-story-grid-host] .story-panel {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 168px;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--story-panel-line);
  background: var(--story-panel-bg);
  transition: opacity 180ms ease;
}

[data-story-grid-host] .story-panel.is-updating { opacity: 0.72; }
[data-story-grid-host] [data-quadrant-id="q01"] { grid-area: q01; }
[data-story-grid-host] [data-quadrant-id="q02"] { grid-area: q02; }
[data-story-grid-host] [data-quadrant-id="q03"] { grid-area: q03; }
[data-story-grid-host] [data-quadrant-id="q04"] { grid-area: q04; }
[data-story-grid-host] [data-quadrant-id="q05"] { grid-area: q05; }
[data-story-grid-host] [data-quadrant-id="q06"] { grid-area: q06; }
[data-story-grid-host] [data-quadrant-id="q07"] { grid-area: q07; min-height: 118px; }
[data-story-grid-host] [data-quadrant-id="q08"] { grid-area: q08; }
[data-story-grid-host] [data-quadrant-id="q09"] { grid-area: q09; }
[data-story-grid-host] [data-quadrant-id="q10"] { grid-area: q10; }
[data-story-grid-host] [data-quadrant-id="q11"] { grid-area: q11; }
[data-story-grid-host] [data-quadrant-id="q12"] { grid-area: q12; }
[data-story-grid-host] [data-quadrant-id="q13"] { grid-area: q13; }
[data-story-grid-host] [data-quadrant-id="q14"] { grid-area: q14; min-height: 430px; }
[data-story-grid-host] [data-quadrant-id="q15"] { grid-area: q15; }
[data-story-grid-host] [data-quadrant-id="q16"] { grid-area: q16; }
[data-story-grid-host] [data-quadrant-id="q17"] { grid-area: q17; }
[data-story-grid-host] [data-quadrant-id="q18"] { grid-area: q18; }
[data-story-grid-host] [data-quadrant-id="q19"] { grid-area: q19; }
[data-story-grid-host] [data-quadrant-id="q20"] { grid-area: q20; }
[data-story-grid-host] [data-quadrant-id="q21"] { grid-area: q21; }
[data-story-grid-host] [data-quadrant-id="q22"] { grid-area: q22; }
[data-story-grid-host] [data-quadrant-id="q23"] { grid-area: q23; }
[data-story-grid-host] [data-quadrant-id="q24"] { grid-area: q24; }
[data-story-grid-host] [data-quadrant-id="q25"] { grid-area: q25; }
[data-story-grid-host] [data-quadrant-id="q26"] { grid-area: q26; }
[data-story-grid-host] [data-quadrant-id="q27"] { grid-area: q27; }
[data-story-grid-host] [data-quadrant-id="q28"] { grid-area: q28; }
[data-story-grid-host] [data-quadrant-id="q29"] { grid-area: q29; }

[data-story-grid-host] .story-panel__media { position: relative; display: grid; min-height: 0; overflow: hidden; }
[data-story-grid-host] .story-panel__media > img { display: block; width: 100%; height: 100%; object-fit: cover; }
[data-story-grid-host] .story-panel__placeholder {
  display: grid;
  place-items: center;
  min-height: 100%;
  padding: clamp(14px, 2vw, 24px);
  color: rgba(17, 17, 17, 0.72);
  background:
    linear-gradient(135deg, rgba(139, 93, 51, 0.13), transparent 38%),
    linear-gradient(rgba(17,17,17,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17,17,17,.035) 1px, transparent 1px),
    var(--story-panel-bg);
  background-size: auto, 22px 22px, 22px 22px, auto;
}
[data-story-grid-host] .story-panel__placeholder::before { content: ""; position: absolute; inset: 14px; border: 1px solid rgba(17,17,17,.075); pointer-events: none; }
[data-story-grid-host] .story-panel__placeholder-mark { display: grid; gap: 6px; text-align: center; text-transform: uppercase; letter-spacing: .14em; }
[data-story-grid-host] .story-panel__placeholder-number { color: var(--accent, #8b5d33); font-size: clamp(1.4rem, 3vw, 3rem); font-weight: 800; letter-spacing: -.04em; }
[data-story-grid-host] .story-panel__placeholder-version { font-size: .72rem; font-weight: 800; }
[data-story-grid-host] .story-panel__placeholder-slot { font-size: .68rem; color: rgba(17,17,17,.48); }

[data-story-grid-host] .story-panel__caption { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 10px; padding: 12px; background: rgba(255,255,255,.58); }
[data-story-grid-host] .story-panel__number { color: var(--accent, #8b5d33); font-size: .74rem; font-weight: 800; letter-spacing: .13em; }
[data-story-grid-host] .story-panel__function { min-width: 0; color: #24241f; font-size: clamp(.76rem, .95vw, .88rem); font-weight: 650; line-height: 1.28; }
[data-story-grid-host] .story-panel__slot-code { grid-column: 2; color: rgba(17,17,17,.5); font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
[data-story-grid-host] [data-aspect-class="narrow-vertical"] .story-panel__media,
[data-story-grid-host] [data-aspect-class="consequence-narrow"] .story-panel__media { aspect-ratio: 2 / 3; }
[data-story-grid-host] [data-aspect-class="title-strip"] .story-panel__media { min-height: 72px; }
[data-story-grid-host] [data-aspect-class="medium"] .story-panel__media { aspect-ratio: 4 / 3; }
[data-story-grid-host] [data-aspect-class="wide"] .story-panel__media { aspect-ratio: 16 / 9; }
[data-story-grid-host] [data-aspect-class="panorama"] .story-panel__media { aspect-ratio: 21 / 9; }
[data-story-grid-host] [data-aspect-class="tall"] .story-panel__media { aspect-ratio: 3 / 4; }
[data-story-grid-host] [data-aspect-class="full-width"] .story-panel__media { aspect-ratio: 16 / 7; }
[data-story-grid-host] [data-quadrant-id="q11"]::after,
[data-story-grid-host] [data-quadrant-id="q12"]::after { content:""; position:absolute; inset:0; pointer-events:none; background: linear-gradient(135deg, transparent 49%, rgba(139,93,51,.2) 50%, transparent 51%); }
@supports (clip-path: polygon(0 0, 100% 0, 96% 100%, 0 100%)) {
  [data-story-grid-host] [data-quadrant-id="q11"] .story-panel__media { clip-path: polygon(0 0, 100% 0, 96% 100%, 0 100%); }
  [data-story-grid-host] [data-quadrant-id="q12"] .story-panel__media { clip-path: polygon(4% 0, 100% 0, 100% 100%, 0 100%); }
}
[data-story-grid-ready="true"] + [data-story-static-fallback] { display: none; }
[data-story-grid-host] .visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 1099px) {
  [data-story-grid-host] .story-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-areas: none; }
  [data-story-grid-host] .story-panel { grid-area: auto !important; grid-column: span 2; }
  [data-story-grid-host] [data-quadrant-id="q07"], [data-story-grid-host] [data-quadrant-id="q13"], [data-story-grid-host] [data-quadrant-id="q19"], [data-story-grid-host] [data-quadrant-id="q20"] { grid-column: 1 / -1; }
  [data-story-grid-host] [data-quadrant-id="q11"], [data-story-grid-host] [data-quadrant-id="q12"], [data-story-grid-host] [data-quadrant-id="q17"], [data-story-grid-host] [data-quadrant-id="q18"] { grid-column: span 3; }
  [data-story-grid-host] [data-quadrant-id="q14"] { grid-column: span 3; grid-row: span 2; min-height: 360px; }
  [data-story-grid-host] [data-quadrant-id="q15"], [data-story-grid-host] [data-quadrant-id="q16"] { grid-column: span 3; }
}
@media (max-width: 767px) {
  [data-story-grid-host] { --story-gutter: 8px; }
  [data-story-grid-host] .story-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  [data-story-grid-host] .story-panel { grid-column: 1 / -1; min-height: 164px; }
  [data-story-grid-host] [data-quadrant-id="q01"], [data-story-grid-host] [data-quadrant-id="q02"], [data-story-grid-host] [data-quadrant-id="q03"], [data-story-grid-host] [data-quadrant-id="q04"], [data-story-grid-host] [data-quadrant-id="q05"], [data-story-grid-host] [data-quadrant-id="q06"], [data-story-grid-host] [data-quadrant-id="q24"], [data-story-grid-host] [data-quadrant-id="q25"], [data-story-grid-host] [data-quadrant-id="q26"], [data-story-grid-host] [data-quadrant-id="q27"], [data-story-grid-host] [data-quadrant-id="q28"], [data-story-grid-host] [data-quadrant-id="q29"] { grid-column: span 2; }
  [data-story-grid-host] .story-panel__caption { padding: 9px; gap: 2px 7px; }
  [data-story-grid-host] .story-panel__function { font-size: .72rem; }
  [data-story-grid-host] .story-panel__slot-code { font-size: .62rem; }
  [data-story-grid-host] [data-quadrant-id="q14"] { min-height: 250px; }
}
@media (prefers-reduced-motion: reduce) { [data-story-grid-host] .story-panel { transition: none; } }