/* =========================================================
   B — Expressionist / Bauhaus
   black, warm off-white, vivid red; cuts, planes, numbered modules
   ========================================================= */
[data-theme='expressionist'] {
  --bg: #efe7d6; --bg-2: #e4dac5; --paper: #faf5ea; --paper-2: #f2ead9;
  --ink: #141210; --ink-2: #3b3530; --ink-3: #5c544c;
  --accent: #e0261b; --accent-ink: #ffffff; --accent-text: #b51c12;
  --line: rgba(20, 18, 16, .22); --line-strong: #141210;
  --focus: #1d4ed8;
  --font-display: 'Bricolage Grotesque', 'Archivo', Impact, sans-serif;
  --font-body: 'Archivo', system-ui, sans-serif;
  --font-label: 'Archivo', system-ui, sans-serif;
  --font-hand: 'Archivo', system-ui, sans-serif;
  --radius: 0;
  --shadow: 6px 6px 0 #141210;
  --shadow-lift: 10px 10px 0 #141210;
}
[data-theme='expressionist'] body { font-stretch: 100%; }
[data-theme='expressionist'] .eyebrow { font-weight: 800; font-stretch: 75%; letter-spacing: .1em; font-size: .85rem; }
[data-theme='expressionist'] .btn { font-weight: 800; font-stretch: 80%; letter-spacing: .1em; border-width: 2.5px; }
[data-theme='expressionist'] .btn--primary:hover { box-shadow: 5px 5px 0 var(--ink); transform: translate(-2px, -2px); }
[data-theme='expressionist'] .brand__name { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 400; font-size: 1.12rem; letter-spacing: .02em; }
[data-theme='expressionist'] .masthead { background: var(--bg); border-bottom: 3px solid var(--ink); }
[data-theme='expressionist'] .primary__exps a, [data-theme='expressionist'] .primary__util > a { font-family: 'Archivo', sans-serif; font-weight: 800; font-stretch: 80%; }
[data-theme='expressionist'] .display, [data-theme='expressionist'] .reflect__q { text-transform: uppercase; letter-spacing: .005em; }
[data-theme='expressionist'] .colophon { border-top: 3px solid var(--ink); }
[data-theme='expressionist'] .colophon__thesis { text-transform: uppercase; font-size: 1.6rem; line-height: 1.05; }

/* ---------------- landing ---------------- */
.ex-hero { position: relative; background: #141210; color: #f0e8d8; overflow: hidden; min-height: min(900px, calc(100vh - 70px)); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); isolation: isolate; }
.ex-hero__left { position: relative; z-index: 3; padding: clamp(2rem, 5vw, 4.5rem) var(--gutter); display: flex; flex-direction: column; gap: 1.6rem; }
.ex-hero__title { font-family: 'Bricolage Grotesque', sans-serif; font-size: clamp(2rem, 3.4vw, 3.2rem); line-height: .9; text-transform: uppercase; letter-spacing: .01em; color: #141210; background: #f0e8d8; padding: .2em .25em .15em; align-self: start; box-shadow: 10px 10px 0 #e0261b; }
.ex-hero__slab { position: relative; background: #e0261b; color: #141210; padding: clamp(1.4rem, 3vw, 2.4rem); transform: rotate(-2.5deg); transform-origin: 0 0; max-width: 560px; box-shadow: 0 0 0 3px #141210; }
.ex-hero__slab h1 { font-family: 'Bricolage Grotesque', sans-serif; font-size: clamp(2.8rem, 5.6vw, 5.4rem); line-height: .86; text-transform: uppercase; letter-spacing: .005em; font-weight: 400; }
.ex-hero__slab p { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 1.25rem; line-height: 1.4; margin-top: 1rem; max-width: 34ch; color: #141210; }
.ex-hero__slab .btn { margin-top: 1.4rem; --b-bg: #141210; --b-fg: #f0e8d8; --b-bd: #141210; }
.ex-hero__slab .btn:hover { box-shadow: 6px 6px 0 #f0e8d8; }
.ex-hero__deck { font-family: 'Archivo', sans-serif; font-weight: 800; font-stretch: 75%; text-transform: uppercase; letter-spacing: .14em; color: #ff6b5c; font-size: .9rem; }
.ex-hero__right { position: relative; z-index: 1; }
.ex-plane { position: absolute; background: #e0261b; z-index: 0; transition: transform 1.2s var(--ease-out); }
.ex-plane--1 { inset: -10% -20% 30% 10%; clip-path: polygon(30% 0, 100% 0, 100% 40%, 0 100%); }
.ex-plane--2 { width: 22%; height: 30%; left: 2%; bottom: 4%; background: #f0e8d8; clip-path: polygon(0 20%, 100% 0, 70% 100%); }
.ex-shard { position: absolute; inset: 0; z-index: 2; transition: transform .9s var(--ease-out); will-change: transform; }
.ex-shard img { position: absolute; width: min(66%, 500px); left: 17%; top: 50%; translate: 0 -50%; box-shadow: 0 0 0 3px #141210; }
.ex-shard--b img { translate: 6% calc(-50% + 14px); }
.ex-shard--c img { translate: -3% calc(-50% + 30px); }
.ex-shard--a { clip-path: polygon(0 0, 100% 0, 100% 28%, 0 46%); }
.ex-shard--b { clip-path: polygon(0 46%, 100% 28%, 100% 70%, 0 64%); }
.ex-shard--c { clip-path: polygon(0 64%, 100% 70%, 100% 100%, 0 100%); }
.ex-enter .ex-shard--a { transform: translate(-30%, -14%) rotate(-6deg); }
.ex-enter .ex-shard--b { transform: translate(40%, 4%) rotate(4deg); }
.ex-enter .ex-shard--c { transform: translate(-20%, 30%) rotate(-3deg); }
.ex-enter .ex-plane--1 { transform: translateX(60%); }
@media (max-width: 900px) {
  .ex-hero { grid-template-columns: 1fr; min-height: 0; }
  .ex-hero__right { height: 520px; order: -1; }
  .ex-hero__slab { transform: rotate(-1.5deg); }
}

.ex-modules { display: grid; grid-template-columns: repeat(6, 1fr); border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink); background: var(--paper); }
.ex-mod { position: relative; display: flex; flex-direction: column; padding: 1rem 1rem 1.2rem; border-right: 3px solid var(--ink); text-decoration: none; min-height: 330px; overflow: hidden; isolation: isolate; }
.ex-mod:last-child { border-right: 0; }
.ex-mod::before { content: ''; position: absolute; inset: 0; background: var(--accent); z-index: -1; clip-path: polygon(0 100%, 0 100%, 0 100%); transition: clip-path .5s cubic-bezier(.7, 0, .2, 1); }
.ex-mod:hover, .ex-mod:focus-visible { color: #fff; }
.ex-mod:hover::before, .ex-mod:focus-visible::before { clip-path: polygon(0 -60%, 160% 100%, 0 100%); }
.ex-mod__n { font-family: 'Bricolage Grotesque', sans-serif; font-size: 4.2rem; line-height: .85; }
.ex-mod__v { font-family: 'Bricolage Grotesque', sans-serif; font-size: 1.6rem; text-transform: uppercase; letter-spacing: .02em; margin-top: .2rem; }
.ex-mod__img { margin: .8rem 0; aspect-ratio: 1; overflow: hidden; border: 3px solid var(--ink); background: #141210; }
.ex-mod__img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.4); mix-blend-mode: normal; transition: transform .6s var(--ease-out), filter .4s; }
.ex-mod:hover .ex-mod__img img { transform: scale(1.08) rotate(-2deg); filter: grayscale(1) contrast(1.8); }
.ex-mod__b { font-weight: 600; font-size: .95rem; line-height: 1.35; flex: 1; }
.ex-mod__go { align-self: end; font-family: 'Bricolage Grotesque', sans-serif; font-size: 1.6rem; line-height: 1; transition: transform .3s var(--ease-out); }
.ex-mod:hover .ex-mod__go { transform: translateX(6px); }
@media (max-width: 1100px) { .ex-modules { grid-template-columns: repeat(3, 1fr); } .ex-mod:nth-child(3) { border-right: 0; } .ex-mod:nth-child(-n + 3) { border-bottom: 3px solid var(--ink); } }
@media (max-width: 600px) { .ex-modules { grid-template-columns: 1fr 1fr; } .ex-mod { border-bottom: 3px solid var(--ink); min-height: 280px; } .ex-mod:nth-child(odd) { border-right: 3px solid var(--ink); } .ex-mod:nth-child(even) { border-right: 0; } }

.ex-marquee { background: var(--ink); color: var(--bg); overflow: hidden; border-bottom: 3px solid var(--ink); }
.ex-marquee__track { display: flex; gap: 2.4rem; width: max-content; padding: .9rem 0; animation: marquee 38s linear infinite; font-family: 'Bricolage Grotesque', sans-serif; font-size: clamp(1.6rem, 3vw, 2.6rem); text-transform: uppercase; letter-spacing: .02em; }
.ex-marquee__track span:nth-child(3n + 2) { color: #ff4f3f; }
.ex-marquee:hover .ex-marquee__track, .ex-marquee.is-paused .ex-marquee__track { animation-play-state: paused; }
.ex-marquee { position: relative; }
.ex-marquee__pause { position: absolute; right: 10px; top: 50%; translate: 0 -50%; z-index: 2; background: #e0261b; color: #fff; border: 2px solid #f0e8d8; font: 800 .72rem 'Archivo', sans-serif; letter-spacing: .1em; text-transform: uppercase; padding: .45rem .7rem; min-height: 36px; }
@keyframes marquee { to { transform: translateX(-50%); } }

.ex-constrain { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); background: #141210; color: #f0e8d8; border-bottom: 3px solid var(--ink); }
.ex-constrain__text { padding: clamp(2rem, 5vw, 4rem) var(--gutter); }
.ex-constrain__text .eyebrow { color: #ff6b5c; }
.ex-constrain__text h2 { font-family: 'Bricolage Grotesque', sans-serif; font-size: clamp(2.4rem, 5vw, 4.6rem); line-height: .9; text-transform: uppercase; margin: .5rem 0 1rem; }
.ex-constrain__text p { max-width: 46ch; color: #d9cfbb; }
.ex-rules { display: grid; gap: 0; margin: 1.6rem 0; border-top: 2px solid #f0e8d8; max-width: 460px; }
.ex-rules label { display: flex; align-items: center; gap: .8rem; padding: .7rem .2rem; border-bottom: 2px solid rgba(240, 232, 216, .35); font-weight: 700; cursor: pointer; }
.ex-rules input { width: 22px; height: 22px; accent-color: #e0261b; }
.ex-constrain__stage { position: relative; background: #e0261b; overflow: hidden; min-height: 460px; display: grid; place-items: center; padding: 2rem; }
.ex-preview { width: min(420px, 90%); aspect-ratio: 4 / 5; background: #f0e8d8; position: relative; box-shadow: 14px 14px 0 #141210; overflow: hidden; transition: transform .6s var(--ease-out); }
.ex-preview svg { width: 100%; height: 100%; }
.ex-preview.is-distort { transform: perspective(700px) rotateY(-14deg) rotateZ(-3deg) skewY(4deg); }

.ex-manifesto { padding: clamp(3rem, 7vw, 6rem) 0; }
.ex-manifesto ol { counter-reset: m; border-top: 3px solid var(--ink); }
.ex-manifesto li { counter-increment: m; display: grid; grid-template-columns: 6rem 1fr; align-items: baseline; border-bottom: 3px solid var(--ink); padding: .6rem 0; font-family: 'Bricolage Grotesque', sans-serif; font-size: clamp(2rem, 5vw, 4.4rem); line-height: 1; text-transform: uppercase; transition: color .25s, padding .35s var(--ease-out); }
.ex-manifesto li::before { content: counter(m); color: var(--accent); }
.ex-manifesto li:hover { padding-left: 1rem; color: var(--accent-text); }

.ex-quote { position: relative; background: var(--ink); color: #f0e8d8; padding: clamp(3rem, 7vw, 6rem) 0; overflow: hidden; }
.ex-quote__mark { position: absolute; font-family: 'Bricolage Grotesque', sans-serif; font-size: 22rem; line-height: .7; color: #e0261b; left: 2%; top: 4%; pointer-events: none; }
.ex-quote blockquote { position: relative; margin: 0 0 0 auto; max-width: 900px; font-family: 'Archivo', sans-serif; font-weight: 500; font-size: clamp(1.5rem, 3vw, 2.4rem); line-height: 1.2; }
.ex-quote blockquote strong { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 400; text-transform: uppercase; color: #ff4f3f; display: block; font-size: 1.3em; line-height: 1; margin-bottom: .3em; }
.ex-quote__bar { width: 120px; height: 10px; background: #e0261b; margin-top: 2rem; margin-left: auto; margin-right: calc(900px - 120px); }
@media (max-width: 1000px) { .ex-quote__bar { margin-right: auto; margin-left: 0; } .ex-constrain { grid-template-columns: 1fr; } }

/* Bricolage Grotesque (condensed, 800) posters + Archivo body */
[data-theme='expressionist'] :is(.ex-hero__title, .ex-hero__slab h1, .ex-mod__n, .ex-mod__v, .ex-marquee__track, .ex-constrain__text h2, .ex-manifesto li, .ex-quote blockquote strong, .xp-head__n, .xp-head__title, .display, .reflect__q, .brand__name, .colophon__thesis, .cp-q) { letter-spacing: -.01em; }
[data-theme='expressionist'] .ex-hero__slab h1 { line-height: .9; }