/* In Palestine Today — the states a live site brings that the prototype never drew.
 * Loaded after ipt.css; the theme's own rules stay as they are. */

/* A logo the client uploads in Settings stands where the live wordmark stood,
 * at the wordmark's height (the masthead, the footer and the reading bar size
 * it through .wm's font-size). */
.wm.wm--logo { align-items: center; }
.wm.wm--logo img { display: block; height: .82em; width: auto; max-width: min(70vw, 9em); }

/* The signup while its request is out. */
form[data-signup][aria-busy="true"] .btn { opacity: .6; cursor: progress; }

/* The 404 and the search are set in the signup band's shape; its heading is the page's h1. */
.band-page .signup h1 { margin: 0; font: 400 clamp(1.7rem, 1.3rem + 1.2vw, 2.4rem)/1.1 var(--devlo-font, var(--serif)); font-variation-settings: "opsz" 30; letter-spacing: -.015em; }
.band-page .signup .wrap { border-top: 2px solid var(--ink); }

/* ---------- one story (/post) — set in the prototype's pieces ----------
 * The edition strip names the day as the front page's h1 does, but the
 * story's headline is the page's h1, set as a slot's headline is. */
.edhead .ed-of { margin: 0; font: 600 1.05rem/1.3 var(--devlo-font, var(--sans)); letter-spacing: 0; color: var(--ink); }
.edhead .ed-of a { text-decoration: none; }
.edhead .ed-of a:hover { text-decoration: underline; }
.edhead .ed-of span { color: var(--ink-2); font-weight: 500; }
.edhead p a { color: var(--ink); }
.story h1 { margin: 0 0 12px; font: 620 clamp(1.55rem, 1.2rem + 1vw, 2.15rem)/1.1 var(--devlo-font, var(--serif)); font-variation-settings: "opsz" 28; letter-spacing: -.014em; text-wrap: balance; max-width: 26ch; }
.story-page .story h1 { font-size: clamp(2rem, 1.4rem + 1.9vw, 3rem); max-width: 22ch; line-height: 1.04; }
/* The body as the desk wrote it: its own headings, quotes, lists and embeds
 * in the slot's voice. */
.story .prose { max-width: 64ch; }
.story .prose > :first-child { margin-top: 0; }
.story .prose h2, .story .prose h3, .story .prose h4 { margin: 28px 0 10px; font: 620 1.35rem/1.2 var(--devlo-font, var(--serif)); font-variation-settings: "opsz" 24; letter-spacing: -.01em; text-wrap: balance; }
.story .prose h3, .story .prose h4 { font-size: 1.15rem; }
.story .prose blockquote { margin: 22px 0; padding: 0 0 0 18px; border-left: 2px solid var(--ink); font-style: italic; }
.story .prose ul, .story .prose ol { margin: 0 0 14px; padding-left: 1.3em; }
.story .prose li { margin: 0 0 6px; }
.story .prose img, .story .prose video, .story .prose iframe { max-width: 100%; height: auto; }
.story .prose iframe { border: 0; }
.story .prose figure img { aspect-ratio: auto; }
.story .prose table { width: 100%; border-collapse: collapse; font: 450 .9rem/1.45 var(--devlo-font, var(--sans)); margin: 18px 0; }
.story .prose th, .story .prose td { border-bottom: 1px solid var(--rule-2); padding: 8px 10px 8px 0; text-align: left; vertical-align: top; }
.story .prose a { color: var(--ink); }

/* ---------- lists (a section, the search) — the prototype's pieces ----------
 * Each day is a slot: its date where a slot's time stands, its stories as
 * briefs, whose headline is an h3 here (the day is the h2). */
.day-list .briefs { margin-top: 0; border-top: 0; }
.day-list .briefs li:first-child { padding-top: 4px; }
.day-list .briefs h3 { margin: 0; max-width: none; letter-spacing: 0; text-wrap: pretty; font: 600 1.05rem/1.35 var(--devlo-font, var(--serif)); font-variation-settings: "opsz" 18; }
.day-list .briefs h3 a { text-decoration: none; }
.day-list .briefs h3 a:hover { text-decoration: underline; }
.listing + .listing, .edition + .listing { border-top: 0; }
.list-empty { margin: 0; padding: 34px 0 48px; font: 450 1rem/1.5 var(--devlo-font, var(--sans)); color: var(--ink-2); }
.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 22px; padding-bottom: 48px; }
.pager-at { font: 500 .8125rem var(--devlo-font, var(--sans)); color: var(--ink-2); font-variant-numeric: tabular-nums; }
/* «Who we are»: the reading column of a slot, no hour. */
.slot.about .story .prose p:first-child { margin-top: 0; }
@media (max-width: 760px) {
  /* A day's date is wider than a slot's hour: it takes its own line. */
  .day-list .when { grid-column: 1 / -1; grid-row: auto; display: flex; align-items: baseline; gap: 10px; padding-top: 0; }
  .day-list .when time { white-space: nowrap; }
  .day-list .when .sunat { margin-top: 0; }
}

/* A story's page: «the rest of the day» is the page's h2, its stories h3s, set as briefs are. */
.story-page .briefs h3 { margin: 0; max-width: none; letter-spacing: 0; text-wrap: pretty; font: 600 1.05rem/1.35 var(--devlo-font, var(--serif)); font-variation-settings: "opsz" 18; }
.story-page .briefs h3 a { text-decoration: none; }
.story-page .briefs h3 a:hover { text-decoration: underline; }

/* «Palestine's light» panel: ipt.js sets the strip's inks for its sky, and the panel drew them on the page's ground (light on light, dark on dark). It takes a solid ground of its own instead — the strip's night when its sky is dark, the page's paper when light — with the theme's matching inks. */
.instr .lightsw .panel { background: oklch(0.975 0.006 268); color: oklch(0.215 0.035 275); --ink: oklch(0.215 0.035 275); --ink-2: oklch(0.360 0.040 275); --rule: oklch(0.215 0.035 275 / .2); --rule-2: oklch(0.215 0.035 275 / .14); --ground-2: oklch(0.93 0.016 268); }
.instr.on-dark .lightsw .panel { background: oklch(0.155 0.04 270); color: oklch(0.960 0.010 270); --ink: oklch(0.960 0.010 270); --ink-2: oklch(0.860 0.025 270); --rule: oklch(0.960 0.010 270 / .25); --rule-2: oklch(0.960 0.010 270 / .14); --ground-2: oklch(0.22 0.04 270); }
.instr .lightsw > button:hover { background: color-mix(in oklch, currentColor 12%, transparent); }