/* ==========================================================================
   Samia Magazine — site components on top of samia.css v3 (and journal.css
   for the reading layout). Warm paper, ink lines, hard shadows, drawn art.
   Everything here is transform/opacity motion and stops under reduced motion.
   ========================================================================== */

/* Cover (home): the shared .cover-panels spread with the Magazine's own art panel */
.mag-cover .city-panel { background: var(--sky); }
.mag-cover .city-panel svg { width: 100%; height: 100%; object-fit: cover; }
.mag-cover .stamp { background: var(--sun); }
.mag-cover .cover-copy .caption { margin-bottom: var(--s3); }
.mag-cover .signature .arabic { font-size: 2.4rem; }

/* Cover edition line and strip on phones: short words, two balanced rows, no orphans */
@media (max-width: 480px) {
  .mag-cover .edition { font-size: .7rem; letter-spacing: .04em; gap: 12px; }
  .mag-cover .edition span { white-space: nowrap; }
  .mag-cover .edition .opt { display: none; }
  .mag-cover .cover-strip { display: grid; grid-template-columns: repeat(2, max-content); justify-content: center; gap: 10px 32px; }
  .mag-cover .cover-strip b { display: none; }
}

/* Section tiles on the cover and the section pages */
.section-tile { min-height: 100%; }
.section-tile .foot { font-size: .95rem; }

/* Night band scene (one per site) */
/* The scene is a framed poster pinned on the band: paper rule, sun shadow, opaque night sky so the rays stop at its edge.
   The drawn ground runs to the frame on every side, so the edges are the frame's, not the drawing's. */
.night-scene { width: 100%; max-width: 560px; margin-inline: auto; border: var(--bw) solid var(--paper); border-radius: var(--r); overflow: hidden; background: var(--night); box-shadow: 8px 8px 0 var(--sun); transform: rotate(1.5deg); }
.night-scene.pop.in { transform: rotate(1.5deg); }
.night-scene svg { width: 100%; height: auto; display: block; }
.band.night .promise { list-style: none; margin: var(--s3) 0 0; padding: 0; display: grid; gap: 14px; }
.band.night .promise li { display: flex; gap: 14px; align-items: flex-start; }
.band.night .promise li i { flex: none; width: 30px; height: 30px; border: var(--bw) solid var(--paper); border-radius: 2px; background: var(--sun); color: var(--ink); font-style: normal; font-family: var(--display); font-weight: 900; display: grid; place-items: center; box-shadow: 2px 2px 0 var(--paper); font-variation-settings: "wdth" 80; }
.band.night .promise b { color: var(--paper); display: block; }

/* Preview of the sample essay: lead story plus the "every page carries" tile */
.preview-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
@media (max-width: 980px) { .preview-grid { grid-template-columns: minmax(0, 1fr); } }
.preview-grid .story.lead-story { grid-column: auto; grid-row: auto; }

/* Number badges and pills inside tiles hug their content instead of stretching across the flex column */
.tile > .pill { align-self: flex-start; }

/* A check list inside a .stack keeps the stack rhythm (samia.css resets .checks margins) */
.stack > .checks, .stack > .crosses { margin-top: var(--s3); }

/* The treaty figure in the sample essay: side-by-side bars on wide screens, stacked bars with bigger type on phones */
.figure .fig-tall { display: none; }
@media (max-width: 600px) {
  .figure .fig-wide { display: none; }
  .figure .fig-tall { display: block; max-width: 320px; }
}

/* Honest empty state on section pages */
.empty { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s3) var(--s4); align-items: center; padding: clamp(22px, 3vw, 36px); background: var(--lemon); border: var(--bw) solid var(--ink); border-radius: var(--r); box-shadow: var(--shadow-lg); }
.empty .glyph { width: clamp(88px, 12vw, 128px); flex: none; }
.empty .glyph svg { width: 100%; height: auto; display: block; }
.empty h3 { margin: 0 0 6px; }
.empty p { margin: 0; color: var(--ink-2); }
.empty p + p { margin-top: 8px; }
@media (max-width: 640px) { .empty { grid-template-columns: minmax(0, 1fr); } }

/* The editors' brief: want / do not want, subjects, the standard */
.crosses { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; font-size: var(--fs-small); }
.crosses li { display: flex; gap: 10px; align-items: flex-start; }
.crosses li::before { content: "✕"; flex: none; width: 20px; height: 20px; border: 1.5px solid var(--ink); border-radius: 2px; background: var(--paper-2); color: var(--red); font-weight: 900; font-size: .72rem; display: grid; place-items: center; margin-top: 2px; }
.tile .checks, .tile .crosses { margin-top: 4px; }
.subjects { display: flex; flex-wrap: wrap; gap: 10px; }
.subjects span { font-size: .9rem; font-weight: 600; padding: 8px 14px; border: var(--bw) solid var(--ink); border-radius: var(--pill); background: var(--paper-2); color: var(--ink); box-shadow: 2px 2px 0 var(--ink); }
.subjects.sky span:nth-child(odd) { background: var(--sky); } .subjects.rose span:nth-child(odd) { background: var(--rose); } .subjects.lemon span:nth-child(odd) { background: var(--lemon); } .subjects.lilac span:nth-child(odd) { background: var(--lilac); }
.standard { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: var(--bw) solid var(--ink); border-radius: var(--r); overflow: hidden; background: var(--paper-2); box-shadow: var(--shadow); }
.standard > div { padding: clamp(20px, 2.6vw, 30px); border-right: var(--bw) solid var(--ink); display: grid; gap: 8px; align-content: start; min-width: 0; }
.standard > div:last-child { border-right: 0; }
.standard .n { font-family: var(--display); font-weight: 900; font-size: 2rem; line-height: 1; color: var(--red); font-variation-settings: "wdth" 80; letter-spacing: -.02em; }
.standard h3 { margin: 0; font-size: 1.1rem; }
.standard p { margin: 0; font-size: var(--fs-small); color: var(--ink-2); }
@media (max-width: 760px) { .standard { grid-template-columns: minmax(0, 1fr); } .standard > div { border-right: 0; border-bottom: var(--bw) solid var(--ink); } .standard > div:last-child { border-bottom: 0; } }

/* Running order (Issue 01) */
.order { list-style: none; margin: 0; padding: 0; border: var(--bw) solid var(--ink); border-radius: var(--r); background: var(--paper-2); box-shadow: var(--shadow-lg); overflow: hidden; counter-reset: slot; }
.order li { counter-increment: slot; display: grid; grid-template-columns: 72px minmax(0, 1fr) minmax(150px, auto); gap: var(--s2) var(--s3); align-items: start; padding: clamp(18px, 2.4vw, 28px) clamp(18px, 2.6vw, 32px); border-top: var(--bw) solid var(--ink); }
.order li:first-child { border-top: 0; }
.order li.sky { background: var(--sky); } .order li.rose { background: var(--rose); } .order li.lemon { background: var(--lemon); } .order li.lilac { background: var(--lilac); } .order li.mint { background: var(--mint); } .order li.peach { background: var(--peach); }
.order .n { font-family: var(--display); font-weight: 900; font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.8rem); line-height: 1; color: var(--red); font-variation-settings: "wdth" 80; letter-spacing: -.02em; padding-top: 2px; }
.order .n::before { content: counter(slot, decimal-leading-zero); }
.order h3 { margin: 4px 0 6px; font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem); }
.order p { margin: 0; color: var(--ink-2); font-size: var(--fs-small); max-width: 46em; }
.order .tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.order .slot { display: grid; gap: 6px; justify-items: end; text-align: right; font-size: var(--fs-small); color: var(--ink-2); }
.order .slot .status { white-space: nowrap; }
@media (max-width: 700px) { .order li { grid-template-columns: 52px minmax(0, 1fr); } .order .slot { grid-column: 2; justify-items: start; text-align: left; } .order .n { font-size: 1.7rem; } }

/* Key under the running order */
.issue-key { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: var(--s3); font-size: var(--fs-small); color: var(--muted); align-items: center; }
.issue-key .status { color: var(--ink); }

/* About: the family tiles carry long status chips; keep them on one line where the tile allows */
.house-grid .status { font-size: .7rem; letter-spacing: .04em; }

/* About: the four posters contact sheet */
.posters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.posters > div { aspect-ratio: 3 / 4; border: var(--bw) solid var(--ink); border-radius: var(--r); overflow: hidden; box-shadow: 4px 4px 0 var(--ink); background: var(--paper-2); }
.posters svg { width: 100%; height: 100%; display: block; }
/* Below 480px each poster is about 150px wide and the 14-unit labels would render at 7px; the grid's aria-label carries the names */
@media (max-width: 480px) { .posters .poster-label { display: none; } }

/* Hero art frames keep their drawn tilt after the pop */
.art.framed.pop.in { transform: rotate(1.5deg); }
.art.framed.left { transform: rotate(-1.5deg); }
.art.framed.left.pop.in { transform: rotate(-1.5deg); }

/* "Every page carries" list */
.carries { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.carries li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: start; font-size: var(--fs-small); color: var(--ink-2); }
.carries li svg { width: 44px; height: 44px; display: block; }
.carries b { color: var(--ink); display: block; }

/* Mailbox rows on the about page */
.mailboxes { display: grid; gap: 12px; }
.mailboxes a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s2); align-items: center; padding: 14px 18px; border: var(--bw) solid var(--ink); border-radius: var(--r); background: var(--paper-2); color: var(--ink); box-shadow: 3px 3px 0 var(--ink); font-weight: 700; transition: transform .2s var(--ease), box-shadow .2s var(--ease); overflow-wrap: anywhere; }
.mailboxes a small { display: block; font-weight: 500; color: var(--muted); font-size: .86rem; }
.mailboxes a:hover { text-decoration: none; transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); }
.mailboxes a .arrow { color: var(--red); }
@media (max-width: 480px) { .mailboxes a { grid-template-columns: minmax(0, 1fr); } .mailboxes a .arrow { display: none; } }

/* Drawn-art animation helpers (stop under reduced motion like the shared ones) */
.sway { animation: sway 7s ease-in-out infinite; transform-box: fill-box; transform-origin: bottom center; }
.sway.late { animation-delay: -3.5s; }
.drift { animation: drift 14s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.drift.late { animation-delay: -7s; }
@keyframes sway { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
@keyframes drift { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(14px); } }
@media (prefers-reduced-motion: reduce) {
  .sway, .drift { animation: none !important; }
  .mailboxes a { transition: none !important; }
}