/* propaganda-dept.com: the kostic.design patterns he chose (10 Nov 2026), in PD's look: black, cream, Koulen and DM Mono.
   Built by tools/ux_patterns.py; never edit the copy in site/. */
:root { --pdx-ink: #fdffed; --pdx-mute: rgba(253, 255, 237, .62); --pdx-red: #cc0000; --pdx-gap: 2px; }
@view-transition { navigation: auto; }

/* keyboard: a visible focus everywhere, pictures included */
:focus-visible { outline: 2px solid var(--pdx-ink) !important; outline-offset: 3px; }
.pdx-zoom { cursor: zoom-in; }

/* galleries: up to three pictures in one row of one height; four or more as the wall; wide ones edge to edge */
.pdx-gal-sec { background: #000; padding: 8px 0 40px; }
.pdx-gal { max-width: 1280px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 56px); }
.pdx-gal figure { margin: 0; }
.pdx-gal img, .pdx-gal video { display: block; width: 100%; height: auto; background: #111; }
.pdx-rows { display: flex; gap: 8px; align-items: flex-start; }
.pdx-rows > figure { min-width: 0; }
.pdx-wall { --cols: 4; display: flex; gap: var(--pdx-gap); align-items: flex-start; }
.pdx-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--pdx-gap); }
.pdx-wall:not([data-cols]) { display: block; columns: var(--cols); column-gap: var(--pdx-gap); }
.pdx-wall:not([data-cols]) > figure { break-inside: avoid; margin-bottom: var(--pdx-gap); }
.pdx-wide { width: 100vw; margin: 8px 0 8px calc(50% - 50vw) !important; }
.pdx-gal .pdx-wide img, .pdx-gal .pdx-wide video { max-height: 92vh; object-fit: cover; }
.pdx-video video { background: #000; }
@media (max-width: 1024px) { .pdx-wall { --cols: 3; } }
@media (max-width: 600px) {
  .pdx-wall { --cols: 1; }
  .pdx-rows { flex-direction: column; }
  .pdx-rows > figure { flex: none !important; width: 100%; }
}

/* the viewer */
html.pdx-lb-open { overflow: hidden; }
.pdx-lb { position: fixed; inset: 0; z-index: 2000; background: rgba(0, 0, 0, .96); display: flex; align-items: center; justify-content: center; }
.pdx-lb-fig { margin: 0; max-width: 94vw; max-height: 92vh; display: flex; flex-direction: column; align-items: center; }
.pdx-lb-fig img, .pdx-lb-fig video { max-width: 94vw; max-height: calc(92vh - 64px); object-fit: contain; }
.pdx-lb-cap { color: var(--pdx-ink); font: 14px/1.5 "DM Mono", ui-monospace, Menlo, monospace; text-align: center; max-width: 760px; padding: 12px 16px 0; }
.pdx-lb-meta { display: block; font-family: Koulen, Impact, sans-serif; font-size: 18px; letter-spacing: .04em; text-transform: uppercase; }
.pdx-lb-btn { position: absolute; background: none; border: 0; color: var(--pdx-ink); padding: 12px; cursor: pointer; opacity: .85; }
.pdx-lb-btn:hover { opacity: 1; }
.pdx-lb-close { top: 10px; right: 10px; }
.pdx-lb-prev { left: 8px; top: 50%; transform: translateY(-50%); }
.pdx-lb-next { right: 8px; top: 50%; transform: translateY(-50%); }
.pdx-lb-count { position: absolute; top: 18px; left: 20px; margin: 0; color: var(--pdx-mute); font: 13px "DM Mono", monospace; }

/* the back arrow beside the big title */
.pdx-titled { display: inline-flex; align-items: center; gap: 18px; justify-content: center; }
.pdx-back { display: inline-flex; color: #fff; opacity: .8; text-decoration: none; }
.pdx-back:hover { opacity: 1; }
.pdx-back svg { width: 44px; height: 44px; }

/* cards: Related under LEARN MORE, the Newest row, the section pages' card view */
.pdx-cards { list-style: none; margin: 0 auto; padding: 0 clamp(16px, 4vw, 56px); max-width: 1280px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.pdx-related .pdx-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 1040px; }
.pdx-card { display: block; color: var(--pdx-ink); text-decoration: none; }
.pdx-card-pic { position: relative; display: block; overflow: hidden; aspect-ratio: 3 / 2; background: #111; }
.pdx-card-pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.pdx-card:hover .pdx-card-pic img { transform: scale(1.03); }
.pdx-card-year { position: absolute; top: 10px; right: 10px; background: rgba(0, 0, 0, .7); color: var(--pdx-ink); font: 12px "DM Mono", monospace; padding: 3px 8px; }
.pdx-card-title { display: block; font-family: Koulen, Impact, sans-serif; font-size: 26px; line-height: 1.05; text-transform: uppercase; margin: 12px 0 4px; }
.pdx-card-line { display: block; font: 14px/1.5 "DM Mono", ui-monospace, monospace; color: var(--pdx-mute); }
.pdx-related, .pdx-newest, .pdx-cardview { background: #000; padding: 26px 0 56px; }
.pdx-band { background: var(--pdx-red); color: #fff; text-align: center; font: 32px/1 Koulen, Impact, sans-serif; text-transform: uppercase; padding: 22px 0 16px; margin: 0 0 26px; }
@media (max-width: 900px) { .pdx-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .pdx-cards, .pdx-related .pdx-cards { grid-template-columns: 1fr; } }

/* section pages: full screen (his tiles) or cards; the switcher top right */
.pdx-cardview { display: none; }
html.view-cards .pdx-cardview { display: block; }
html.view-cards .pdx-tile { display: none !important; }
.pdx-switch { position: absolute; top: 76px; right: clamp(16px, 4vw, 56px); z-index: 5; display: inline-flex; gap: 2px; padding: 3px; border-radius: 9px; background: rgba(0, 0, 0, .45); }
.pdx-switch[hidden] { display: none; }
.pdx-switch button { display: flex; align-items: center; justify-content: center; width: 40px; height: 34px; padding: 0; border: 0; border-radius: 7px; background: none; color: rgba(255, 255, 255, .75); cursor: pointer; }
.pdx-switch button[aria-pressed="true"] { background: var(--pdx-ink); color: #000; }
.pdx-switch svg { width: 22px; height: 22px; }

/* search: the magnifier at the right of the top bar */
nav.plFg0c { padding-right: 48px; }
.pdx-search-btn { position: fixed; top: 12px; right: 14px; z-index: 1001; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: none; border: 0; color: #fff; cursor: pointer; }
.pdx-search-btn svg { width: 22px; height: 22px; }
.pdx-search { position: fixed; inset: 0; z-index: 1500; background: rgba(0, 0, 0, .94); overflow: auto; }
.pdx-search[hidden] { display: none; }
.pdx-search-inner { max-width: 880px; margin: 0 auto; padding: 90px 24px 60px; position: relative; }
.pdx-search input { width: 100%; box-sizing: border-box; font: 34px Koulen, Impact, sans-serif; text-transform: uppercase; color: var(--pdx-ink); background: none; border: 0; border-bottom: 2px solid var(--pdx-ink); padding: 8px 0; }
.pdx-search input:focus { outline: none; }
.pdx-search-close { position: absolute; top: 26px; right: 18px; font-size: 40px; line-height: 1; background: none; border: 0; color: var(--pdx-ink); cursor: pointer; }
.pdx-search-results { margin-top: 22px; display: grid; gap: 10px; }
.pdx-search-results p { color: var(--pdx-mute); font: 15px "DM Mono", monospace; }
.pdx-search-hit { display: flex; gap: 16px; align-items: center; color: var(--pdx-ink); text-decoration: none; padding: 6px; }
.pdx-search-hit:hover, .pdx-search-hit:focus { background: #161616; }
.pdx-search-hit img { width: 96px; height: 64px; object-fit: cover; flex: none; }
.pdx-search-hit b { display: block; font: 22px Koulen, Impact, sans-serif; text-transform: uppercase; font-weight: 400; }
.pdx-search-hit small { color: var(--pdx-mute); font: 13px "DM Mono", monospace; }

/* About: press and the contact form */
.pdx-about { background: #000; color: var(--pdx-ink); padding: 10px 0 60px; }
.pdx-about-inner { max-width: 880px; margin: 0 auto; padding: 0 24px; font: 16px/1.65 "DM Mono", ui-monospace, monospace; }
.pdx-about h2 { font: 40px/1 Koulen, Impact, sans-serif; text-transform: uppercase; margin: 40px 0 18px; }
.pdx-press { list-style: none; padding: 0; margin: 0; display: grid; gap: 22px; }
.pdx-press a { color: var(--pdx-ink); }
.pdx-press video { width: 100%; max-width: 360px; display: block; margin: 10px 0; }
.pdx-contact { display: grid; gap: 12px; }
.pdx-contact label { display: grid; gap: 4px; font-size: 14px; color: var(--pdx-mute); }
.pdx-contact input, .pdx-contact textarea { font: 16px "DM Mono", monospace; color: var(--pdx-ink); background: #111; border: 1px solid #444; padding: 10px; }
.pdx-contact textarea { min-height: 160px; }
.pdx-contact button { justify-self: start; font: 18.7px "DM Mono", monospace; color: #1c1c1c; background: var(--pdx-ink); border: 0; padding: 8px 18px; cursor: pointer; }
.pdx-form-note { min-height: 1.5em; margin: 0; color: var(--pdx-mute); }
.pdx-hp { position: absolute; left: -9999px; }

@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } .pdx-card-pic img { transition: none; } }

/* his rule (10 Nov 2026): a picture on a plain ground is extended in that colour, never a white block on black */
.pdx-plate { width: 100vw; margin-left: calc(50% - 50vw); padding: 6vh 0; }
.pdx-plate .pdx-gal { background: transparent; }
.pdx-single figure { max-width: 900px; margin: 0 auto; }
.pdx-single img, .pdx-single video { width: auto !important; max-width: 100%; max-height: 82vh; margin: 0 auto; background: transparent !important; }
.pdx-plate .pdx-gal img, .pdx-plate .pdx-gal video { background: transparent; }
section.pdx-plate-sec { background: transparent !important; }
section.pdx-plate-light, section.pdx-plate-light h1, section.pdx-plate-light h2, section.pdx-plate-light h3, section.pdx-plate-light p,
section.pdx-plate-light small, section.pdx-plate-light span:not(.pdx-card-year) { color: #1c1c1c !important; }
section.pdx-plate-light .FKF6mc { background: #1c1c1c !important; }
section.pdx-plate-light .FKF6mc p, section.pdx-plate-light .FKF6mc * { color: #fdffed !important; }

/* the header drift (his report, 10 Nov 2026: "paralax behaves chopy"): half the scroll, as on his original, run by the browser */
.pdx-drift { will-change: transform; }
@supports (animation-timeline: scroll()) {
  .pdx-drift { animation: pdx-drift linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
  @keyframes pdx-drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, 50vh, 0); } }
}
@media (prefers-reduced-motion: reduce) { .pdx-drift { animation: none !important; transform: none !important; } }

/* two lines of English under every card (his note, 10 Nov 2026) */
.pdx-card-line { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: 3em; }

/* his notes of 10 Nov 2026 ------------------------------------------------------------------------------------------ */
/* full-screen pictures: on a computer the picture sits to the right so the white title stays clear on the left,
   and a slight darkening keeps the title legible on every picture */
.pdx-hero .Nu95r::after, .pdx-tile .IFuOkc::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.4) 28%, rgba(0,0,0,.14) 58%, rgba(0,0,0,.05) 100%); }
@media (min-width: 900px) {
  .pdx-hero .IFuOkc, .pdx-tile .IFuOkc { background-size: auto 100% !important; background-position: right center !important; background-repeat: no-repeat !important; background-color: #000; }
  .pdx-hero video.pdx-bgclip, .pdx-tile video.pdx-bgclip { object-fit: contain !important; object-position: right center; }
}
@media (max-width: 899px) { .pdx-hero .Nu95r::after, .pdx-tile .IFuOkc::after { background: rgba(0,0,0,.3); } }

/* section pages: the whole tile opens the work; its place and two lines under the title */
.pdx-tile-link { position: absolute; inset: 0; z-index: 3; }
.pdx-tile h2 a { position: relative; z-index: 4; }
.pdx-tile-desc { position: relative; z-index: 2; max-width: 520px; margin: 10px 0 0; color: rgba(255, 255, 255, .88); font: 15px/1.55 "DM Mono", ui-monospace, monospace;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.pdx-tile-loc, .pdx-card-loc { display: flex; align-items: center; gap: 6px; font: 13px "DM Mono", ui-monospace, monospace; letter-spacing: .06em; text-transform: uppercase; margin: 2px 0 6px; }
.pdx-tile-loc { color: #fff; }
.pdx-tile h2, .pdx-tile h2 a, .pdx-tile h2 span { color: #fff !important; }
.pdx-card-loc { color: var(--pdx-ink); }
.pdx-tile-loc svg, .pdx-card-loc svg { flex: none; }

/* LEARN MORE: space above, the red band and the cards on the page's left edge */
.pdx-related { margin-top: 0; padding-top: 72px; background: #000; }
.pdx-related .pdx-band, .pdx-newest .pdx-band { text-align: left; padding: 0; }
.pdx-band-inner { max-width: 1280px; margin: 0 auto; padding: 22px clamp(16px, 4vw, 56px) 16px; }
.pdx-related .pdx-cards { max-width: 1280px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pdx-card-pic video { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 900px) { .pdx-related .pdx-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .pdx-related .pdx-cards { grid-template-columns: 1fr; } }

/* buttons that read as buttons: room inside, a clear edge, a hover */
a.FKF6mc { display: inline-flex !important; align-items: center; min-height: 46px; padding: 0 22px !important; border: 2px solid #fdffed !important; border-radius: 4px !important;
  background: #fdffed !important; color: #1c1c1c !important; text-decoration: none !important; transition: background .15s, color .15s; box-sizing: border-box; }
a.FKF6mc .NsaAfc p { margin: 0 !important; font: 15px/1 "DM Mono", ui-monospace, monospace !important; letter-spacing: .08em; color: inherit !important; }
a.FKF6mc:hover, a.FKF6mc:focus-visible { background: transparent !important; color: #fdffed !important; }
a.FKF6mc:hover .NsaAfc p { color: #fdffed !important; }
section.pdx-plate-light a.FKF6mc { background: #1c1c1c !important; border-color: #1c1c1c !important; }
section.pdx-plate-light a.FKF6mc .NsaAfc p, section.pdx-plate-light a.FKF6mc * { color: #fdffed !important; }
section.pdx-plate-light a.FKF6mc:hover { background: transparent !important; }
section.pdx-plate-light a.FKF6mc:hover .NsaAfc p { color: #1c1c1c !important; }
.U26fgb.L7IXhc { margin: 6px 0 !important; }
.pdx-lb-fig img, .pdx-lb-fig video.pdx-clip { cursor: zoom-out; }
.pdx-tile-desc-abs { position: absolute; left: clamp(20px, 5vw, 80px); bottom: 26px; z-index: 4; }

/* rows of one height follow each other with the gallery's gap */
.pdx-rows + .pdx-rows { margin-top: 8px; }

/* landscape headers and tiles on a computer: the picture fills the right two thirds and fades into black on its left,
   so the title on the left never sits on the subject (his note, 10 Nov 2026) */
@media (min-width: 900px) {
  .pdx-hero .Nu95r:has(> .pdx-bgwide), .pdx-tile:has(.IFuOkc.pdx-bgwide) { background-color: #000 !important; }
  /* the picture keeps the position he gave it (his tiles say "center right" where the subject stands on the right) */
  .pdx-hero .IFuOkc.pdx-bgwide, .pdx-tile .IFuOkc.pdx-bgwide { left: 34% !important; right: 0 !important; width: auto !important;
    background-size: cover !important; }
  .pdx-hero .IFuOkc.pdx-bgwide video.pdx-bgclip, .pdx-tile .IFuOkc.pdx-bgwide video.pdx-bgclip { object-fit: cover !important; object-position: center; }
  .pdx-hero .IFuOkc.pdx-bgwide::before, .pdx-tile .IFuOkc.pdx-bgwide::before { content: "" !important; display: block !important; opacity: 1 !important; position: absolute; top: 0; bottom: 0; left: -1px; right: auto !important; width: 38%; z-index: 1; pointer-events: none;
    background-color: transparent !important; background-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.7) 35%, rgba(0,0,0,0) 100%) !important; }
}

/* a picture that ran the full width of his original page keeps that width (10 Nov 2026) */
.pdx-gal.pdx-full { max-width: 1422px; margin-top: 8px; margin-bottom: 8px; }
.pdx-full img, .pdx-full video { width: 100%; height: auto; }

/* a header or tile picture on a plain ground: the whole picture on its own colour, never cropped on black, no darkening
   (his rule, 10 Nov 2026: "the ugliest thing is to have white image, on black background") */
.pdx-new .IFuOkc.pdx-bgplain { left: 0 !important; background-size: contain !important; background-repeat: no-repeat !important; background-position: center !important; }
@media (min-width: 900px) { .pdx-new .IFuOkc.pdx-bgplain { background-position: right 6vw center !important; background-size: auto 86% !important; } }
.pdx-new .Nu95r:has(> .pdx-bgplain)::after, .pdx-new .IFuOkc.pdx-bgplain::after, .pdx-new .IFuOkc.pdx-bgplain::before { display: none !important; }
.pdx-tile.pdx-new:has(.pdx-bgplain-light) h2, .pdx-tile.pdx-new:has(.pdx-bgplain-light) h2 a, .pdx-tile.pdx-new:has(.pdx-bgplain-light) h2 span,
.pdx-tile.pdx-new:has(.pdx-bgplain-light) .pdx-tile-loc, .pdx-tile.pdx-new:has(.pdx-bgplain-light) .pdx-tile-desc { color: #1c1c1c !important; text-shadow: none; }
.pdx-tile.pdx-new:has(.pdx-bgplain-light) .pdx-tile-loc svg { stroke: #1c1c1c; }

/* on a phone a long button label wraps instead of being cut ("THE PAINTING BY MARINA KOST…", 10 Nov 2026) */
@media (max-width: 600px) {
  a.FKF6mc { height: auto !important; min-height: 46px; padding: 10px 18px !important; max-width: 100%; }
  a.FKF6mc, a.FKF6mc * { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; }
  a.FKF6mc .NsaAfc p { line-height: 1.35 !important; text-align: center; }
}

/* a new page whose header artwork sits on a light ground: dark title and back arrow, as his light pages */
.pdx-hero-plate h1, .pdx-hero-plate h1 *, .pdx-hero-plate .pdx-back { color: #1c1c1c !important; }
.pdx-hero-plate .pdx-back svg { stroke: #1c1c1c; }
@media (max-width: 899px) { .pdx-new .IFuOkc.pdx-bgplain { background-size: auto 36% !important; background-position: center bottom 4% !important; } }
/* on his light pages (dark menu text) the search icon is dark too; white vanished on Spread the Word and First Communion */
body:has(.KuNac) .pdx-search-btn { color: #1c1c1c; }