/* Design 06 Folio. Presentation only; stories stay in place. */

.design-swatch-folio { background: #f4efe4; border-top: 4px solid #d43b27; grid-template-columns: 1.2fr 1fr; }
.design-swatch-folio::before { color: #1b1914; }
.design-swatch-folio i:first-child { grid-row: span 2; background: #c4b79a; }
.design-swatch-folio i:not(:first-child) { height: 5px; background: #1b1914; align-self: center; }
.design-swatch-folio i:nth-child(4) { background: #8a8374; }
.design-options button .design-swatch-folio { background-image: none; padding: 16px 7px 7px; }
.design-options button .design-swatch-folio i { visibility: visible; }
.design-options button .design-swatch-folio::before { content: 'WAMD'; }

:root[data-design-preview=folio] {
  --design-accent: #d43b27;
  --accent: #d43b27;
  --design-headline: 'IBM Plex Sans Arabic', system-ui, sans-serif;
}
html[data-theme="light"][data-design-preview=folio],
html[data-theme="system"][data-design-preview=folio] {
  color-scheme: light;
  --paper: #f7f4ec;
  --elevated: #fffdf8;
  --ink: #1b1914;
  --muted: #6b665c;
  --rule: #d8d1c3;
  --rule-strong: #b7ae9e;
  --fill: #eee7d9;
  --mast: color-mix(in srgb, var(--paper) 82%, transparent);
  --control: #f3eee4;
  --photo: #dcd4c4;
}
html[data-theme="dark"][data-design-preview=folio] {
  color-scheme: dark;
  --paper: #14120f;
  --elevated: #1c1914;
  --ink: #f3efe6;
  --muted: #b7b0a4;
  --rule: #2c2822;
  --rule-strong: #4a443b;
  --fill: #1f1c18;
  --mast: color-mix(in srgb, var(--paper) 78%, transparent);
  --control: #221f1a;
  --photo: #2a251e;
}
@media (prefers-color-scheme: dark) {
  html[data-theme="system"][data-design-preview=folio] {
    color-scheme: dark;
    --paper: #14120f;
    --elevated: #1c1914;
    --ink: #f3efe6;
    --muted: #b7b0a4;
    --rule: #2c2822;
    --rule-strong: #4a443b;
    --fill: #1f1c18;
    --mast: color-mix(in srgb, var(--paper) 78%, transparent);
    --control: #221f1a;
    --photo: #2a251e;
  }
}
:root[data-design-preview=folio] body { background: var(--paper); }
:root[data-design-preview=folio] body :is(.mast-inner,.design-section-nav,.edition) { width: min(1280px, calc(100% - 64px)); }
:root[data-design-preview=folio] body .mast { border-top: 3px solid var(--design-accent); box-shadow: none; }
:root[data-design-preview=folio] body .mast-utility { padding-block: 10px; }
:root[data-design-preview=folio] body .design-section-nav { gap: 22px; }
:root[data-design-preview=folio] body .design-section-nav button { min-height: 44px; padding-block: 8px; font-size: 14px; }
:root[data-design-preview=folio] body .design-edition-head { padding: 20px 0 16px; margin-bottom: 22px; gap: 12px; border-bottom: 1px solid var(--ink); }
:root[data-design-preview=folio] body .design-edition-head h2 { font-size: clamp(1.625rem, 2.6vw, 2rem); line-height: 1.25; }
:root[data-design-preview=folio] body .design-edition-label { font-size: 11px; letter-spacing: .1em; }
:root[data-design-preview=folio] body .design-edition-caption { font-size: 13px; color: var(--muted); }
:root[data-design-preview=folio] body .edition .hero { margin: 0; padding: 0; border: 0; min-width: 0; }
:root[data-design-preview=folio] body .edition [data-story] { color: var(--ink); text-decoration: none; min-width: 0; }
:root[data-design-preview=folio] body .edition [data-story] > div:not(.source-logo-plate) { display: flex; flex-direction: column; min-width: 0; gap: 10px; }
:root[data-design-preview=folio] body .edition [data-story] .kicker { order: 2; margin: 0; font-size: .75rem; color: var(--muted); gap: 2px 7px; }
:root[data-design-preview=folio] body .edition .source-tier { font-size: .75rem; border: 1px solid var(--rule-strong); background: transparent; color: inherit; padding: 0 4px; border-radius: 3px; }
:root[data-design-preview=folio] body .edition .summary { order: 1; margin: 0; font-size: 16px; line-height: 1.65; color: var(--muted); max-width: 62ch; }
:root[data-design-preview=folio] body .edition :is(.hero-title,.desk-feature-title,.desk-pack-title,.row-title) { display: block; margin: 0; overflow: visible; overflow-wrap: anywhere; max-height: none; -webkit-line-clamp: unset; letter-spacing: -.02em; }
:root[data-design-preview=folio][dir=rtl] body .edition :is(.hero-title,.desk-feature-title,.desk-pack-title,.row-title) { letter-spacing: 0; line-height: 1.45; }
:root[data-design-preview=folio] body .edition [data-story]:hover :is(.hero-title,.desk-feature-title,.desk-pack-title,.row-title) { color: inherit; text-decoration: underline; text-decoration-color: var(--design-accent); text-underline-offset: 5px; text-decoration-thickness: 1px; }
:root[data-design-preview=folio] body :is(a,button,input,select):focus-visible { outline: 3px solid var(--design-accent); outline-offset: 4px; }
:root[data-design-preview=folio] body .edition .desk { margin: 36px 0 48px; }
:root[data-design-preview=folio] body .edition .desk-name { border-top: 2px solid var(--ink); padding-top: 12px; margin-bottom: 20px; }
:root[data-design-preview=folio] body .edition .desk-name h2 { font-size: 1.375rem; }
:root[data-design-preview=folio] body .edition .desk-name h2 button { min-height: 44px; }
:root[data-design-preview=folio] body .edition .desk-more { min-height: 44px; font-size: 13px; color: var(--muted); }

/* 06 · FOLIO — photograph beside type. Ink on paper, never text trapped on the image. */
:root[data-design-preview=folio] { --design-headline: 'Newsreader', Georgia, serif; }
:root[data-design-preview=folio][dir=rtl] { --design-headline: 'Noto Naskh Arabic', serif; }
:root[data-design-preview=folio][data-desk-lang=hi] { --design-headline: 'Noto Sans Devanagari', system-ui, sans-serif; }
:root[data-design-preview=folio] body .mast { border-top-width: 4px; }
:root[data-design-preview=folio] body .design-edition-head { border-bottom: 2px solid var(--ink); padding-block: 22px 18px; }
:root[data-design-preview=folio] body .edition .hero-card { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,.95fr); gap: 36px; align-items: center; padding-bottom: 28px; border-bottom: 1px solid var(--rule-strong); }
:root[data-design-preview=folio] body .edition .hero-card > img { grid-column: 1; grid-row: 1; width: 100%; height: 420px; min-height: 0; object-fit: cover; border-radius: 2px; }
:root[data-design-preview=folio] body .edition .hero-card > div { grid-column: 2; grid-row: 1; }
:root[data-design-preview=folio] body .edition .hero-title { font-size: clamp(2rem, 2.8vw, 2.5rem); line-height: 1.15; font-weight: 600; max-width: 18ch; }
:root[data-design-preview=folio][dir=rtl] body .edition .hero-title { line-height: 1.45; max-width: 22ch; }
:root[data-design-preview=folio] body .edition .hero-card .summary { font-size: 1rem; line-height: 1.6; }
:root[data-design-preview=folio] body .edition .desk:not([data-desk=authors]) .desk-well { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(0,1fr); gap: 32px; align-items: start; }
:root[data-design-preview=folio] body .edition .desk:not([data-desk=authors]) :is(.desk-lead,.desk-pack,.desk-stack) { display: flex; flex-direction: column; }
:root[data-design-preview=folio] body .edition .desk-feature { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,.9fr); gap: 20px; align-items: center; }
:root[data-design-preview=folio] body .edition .desk-feature > img { grid-column: 1; grid-row: 1; width: 100%; height: 240px; object-fit: cover; border-radius: 2px; }
:root[data-design-preview=folio] body .edition .desk-feature > div { grid-column: 2; grid-row: 1; }
:root[data-design-preview=folio] body .edition .desk-feature-title { font-size: 1.5rem; line-height: 1.25; }
:root[data-design-preview=folio] body .edition .desk-pack { gap: 0; padding-top: 8px; }
:root[data-design-preview=folio] body .edition .desk-pack-card { display: grid; grid-template-columns: 108px minmax(0,1fr); gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--rule); }
:root[data-design-preview=folio] body .edition .desk-pack-card > img { grid-column: 1; grid-row: 1; width: 108px; height: 86px; object-fit: cover; border-radius: 2px; }
:root[data-design-preview=folio] body .edition .desk-pack-card > div { grid-column: 2; grid-row: 1; }
:root[data-design-preview=folio] body .edition .desk-pack-title { font-size: 1.125rem; line-height: 1.4; }
:root[data-design-preview=folio] body .edition .desk-stack { border-inline-start: 1px solid var(--rule); padding-inline-start: 24px; }
:root[data-design-preview=folio] body .edition .desk-stack .row-card { display: grid; grid-template-columns: 72px minmax(0,1fr); gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--rule); }
:root[data-design-preview=folio] body .edition .desk-stack .row-card > img { grid-column: 1; grid-row: 1; width: 72px; height: 64px; object-fit: cover; border-radius: 2px; }
:root[data-design-preview=folio] body .edition .desk-stack .row-card > div { grid-column: 2; grid-row: 1; }
:root[data-design-preview=folio] body .edition .row-title { font-size: 1.125rem; line-height: 1.45; }

/* Breaking and Opinion. */
:root[data-design-preview=folio] body .edition .desk[data-desk=breaking] .desk-well :is(.desk-feature-title,.desk-pack-title,.row-title) { font-size: 1.125rem; }
:root[data-design-preview=folio] body .edition .desk[data-desk=authors] .desk-well { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
:root[data-design-preview=folio] body .edition .desk[data-desk=authors] :is(.desk-lead,.desk-pack,.desk-stack) { display: contents; }
:root[data-design-preview=folio] body .edition .desk[data-desk=authors] .desk-well [data-story] { display: grid; grid-template-columns: minmax(0,1fr) 64px; gap: 14px; padding: 18px; border: 1px solid var(--rule); background: var(--elevated); border-radius: 4px; min-height: 0; }
:root[data-design-preview=folio] body .edition .desk[data-desk=authors] .desk-well [data-story] > img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; grid-column: 2; grid-row: 1; }
:root[data-design-preview=folio] body .edition .desk[data-desk=authors] .desk-well [data-story] > div { grid-column: 1; grid-row: 1; padding: 0; }
:root[data-design-preview=folio] body .edition .desk[data-desk=authors] .desk-well :is(.desk-feature-title,.desk-pack-title,.row-title) { font-size: 1.25rem; }
:root[data-design-preview=folio] body .edition :is(.hero-card,.desk-feature,.desk-pack-card,.row-card):not(:has(> img.desk-photo)) { display: flex; flex-direction: column; min-height: 0; gap: 12px; align-items: stretch; }
:root[data-design-preview=folio] body .edition :is(.hero-card,.desk-feature):not(:has(> img.desk-photo)) { padding: 24px; background: var(--fill); border-inline-start: 3px solid var(--design-accent); }
:root[data-design-preview=folio] body .edition .source-logo-plate { order: 3; width: fit-content; max-width: 96px; max-height: 34px; min-height: 0; padding: 4px; border-radius: 3px; background: #fff; }
:root[data-design-preview=folio] body .edition .source-logo-peek { max-width: 84px; max-height: 26px; width: auto; height: 26px; object-fit: contain; }
:root[data-design-preview=folio] body .edition [data-story] > img.publisher-logo-thumbnail { width: auto; max-width: 96px; height: 28px; min-height: 0; padding: 4px; object-fit: contain; background: #fff; border-radius: 3px; }
:root[data-design-preview=folio] body .edition #grid { gap: 0; margin-top: 20px; }
:root[data-design-preview=folio] body .edition #grid .row-card { display: grid; grid-template-columns: 96px minmax(0,1fr); gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--rule); }
:root[data-design-preview=folio] body .edition #grid .row-card > img { width: 96px; height: 80px; object-fit: cover; border-radius: 2px; }
:root[data-design-preview=folio] body .edition #grid .row-card:not(:has(> img.desk-photo)) { display: flex; flex-direction: column; }

@media (max-width: 1099px) {
  :root[data-design-preview=folio] body .edition .hero-card { gap: 24px; }
  :root[data-design-preview=folio] body .edition .hero-card > img { height: 320px; }
  :root[data-design-preview=folio] body .edition .desk:not([data-desk=authors]) .desk-well { grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); gap: 22px; }
  :root[data-design-preview=folio] body .edition .desk-feature > img { height: 200px; }
  :root[data-design-preview=folio] body .edition .desk[data-desk=authors] .desk-well { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 700px) {
  :root[data-design-preview=folio] body :is(.mast-inner,.design-section-nav,.edition) { width: calc(100% - 32px); }
  :root[data-design-preview=folio] body .design-edition-head { padding: 16px 0; margin-bottom: 16px; gap: 8px; flex-wrap: wrap; }
  :root[data-design-preview=folio] body .design-edition-head h2 { font-size: 1.5rem; }
  :root[data-design-preview=folio] body .edition .desk { margin: 28px 0 36px; }
  :root[data-design-preview=folio] body .edition .desk-name { padding-top: 10px; margin-bottom: 14px; }
  :root[data-design-preview=folio] body .edition .desk-name h2 { font-size: 1.25rem; }
  :root[data-design-preview=folio] body .edition .desk[data-desk] .desk-well { display: block; overflow: visible; }
  :root[data-design-preview=folio] body .edition .desk[data-desk] :is(.desk-lead,.desk-pack,.desk-stack) { display: contents; }
  :root[data-design-preview=folio] body .edition .desk[data-desk] .desk-well [data-story] { grid-column: auto; grid-row: auto; }
  :root[data-design-preview=folio] body .edition .hero-card { display: flex; flex-direction: column-reverse; gap: 16px; }
  :root[data-design-preview=folio] body .edition .hero-card > img { height: 230px; grid-column: auto; }
  :root[data-design-preview=folio] body .edition .hero-card > div { grid-column: auto; }
  :root[data-design-preview=folio] body .edition .hero-title { font-size: 1.75rem; max-width: none; }
  :root[data-design-preview=folio] body .edition .desk-feature { display: flex; flex-direction: column-reverse; gap: 14px; padding-bottom: 18px; }
  :root[data-design-preview=folio] body .edition .desk-feature > img { height: 210px; grid-column: auto; }
  :root[data-design-preview=folio] body .edition .desk-feature > div { grid-column: auto; }
  :root[data-design-preview=folio] body .edition .desk-feature-title { font-size: 1.3125rem; }
  :root[data-design-preview=folio] body .edition :is(.desk-pack-card,.desk-stack .row-card,#grid .row-card) { display: grid; grid-template-columns: 84px minmax(0,1fr); gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--rule); }
  :root[data-design-preview=folio] body .edition :is(.desk-pack-card,.desk-stack .row-card,#grid .row-card) > img { grid-column: 1; grid-row: 1; width: 84px; height: 76px; }
  :root[data-design-preview=folio] body .edition :is(.desk-pack-card,.desk-stack .row-card,#grid .row-card) > div { grid-column: 2; grid-row: 1; }
  :root[data-design-preview=folio] body .edition .desk-stack { border: 0; padding: 0; }
  :root[data-design-preview=folio] body .edition .desk[data-desk=authors] .desk-well { display: grid; grid-template-columns: minmax(0,1fr); gap: 12px; }
  :root[data-design-preview=folio] body .edition .desk[data-desk=authors] .desk-well [data-story] { display: grid; grid-template-columns: minmax(0,1fr) 52px; }
  :root[data-design-preview=folio] body .edition .desk[data-desk=authors] .desk-well [data-story] > img { width: 52px; height: 52px; }
  :root[data-design-preview=folio] body .edition .desk[data-desk] .desk-well [data-story]:not(:has(> img.desk-photo)),
  :root[data-design-preview=folio] body .edition :is(.desk-pack-card,.row-card):not(:has(> img.desk-photo)) { display: flex; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  :root[data-design-preview=folio] body * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media print {
  :root[data-design-preview=folio] { color-scheme: light; --paper: #fff; --ink: #151515; --muted: #444; --elevated: #fff; --rule: #bbb; }
}

/* Compact reading scale; mixed-language titles retain Arabic spacing. */
:root[data-design-preview=folio] body .edition :is(.desk-feature-title,.desk-pack-title,.row-title) { font-weight: 600; }
:root[data-design-preview=folio] body .edition :is(.hero-title,.desk-feature-title,.desk-pack-title,.row-title):is([dir=rtl],[lang=ar],.title-ar) { letter-spacing: 0; line-height: 1.45; }
@media (max-width: 760px) {
  :root[data-design-preview=folio] body .edition [data-story] :is(.kicker,.source-tier) { font-size: .8125rem; }
}
@media (max-width: 700px) {
  :root[data-design-preview=folio] body .edition :is(.desk-pack-title,.row-title) { font-size: 1.0625rem; }
  :root[data-design-preview=folio] body .edition .desk[data-desk=breaking] .desk-well :is(.desk-feature-title,.desk-pack-title,.row-title) { font-size: 1.0625rem; }
  :root[data-design-preview=folio] body .edition .desk[data-desk=authors] .desk-well :is(.desk-feature-title,.desk-pack-title,.row-title) { font-size: 1.1875rem; }
}