/* mondrian.css - THE LOOK for forestchumprecords.com and forestchumpllc.com (Mac chair, 2026-10-16 16:5x; Forest 16:43: "Design it").
   The board's grammar standing still: a black page, containers between thick solid black gutters - straight, square, no shadow. Mondrian's
   balance (Forest 16:44: "too many red boxes"): the blocks are WHITE-edged, with ONE red, one yellow, one blue on the page. Copperplate heads,
   Helvetica body, the red word. Minimal on his word (15:40 "sleekness ... modern ... not a bunch of words", 16:3x "like Linktree"): one column. */
:root{--black:#0b0a09;--white:#f4efe6;--red:#ff2a2a;--gold:#f5d97a;--yellow:#ffcc28;--blue:#3878ff;--grey:#c9c3b8;--gut:clamp(12px,1.6vw,22px);
      --head:Copperplate,"Copperplate Gothic Bold","Copperplate Gothic",Cinzel,Georgia,serif;--body:"Helvetica Neue",Helvetica,Arial,sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--black);color:var(--white);-webkit-text-size-adjust:100%}
body{font-family:var(--body);font-size:17px;line-height:1.45;min-height:100vh;display:flex;flex-direction:column}
a{color:inherit;text-decoration:none}
.col{width:min(100% - 2*var(--gut),880px);margin:0 auto;display:flex;flex-direction:column;gap:var(--gut);padding:var(--gut) 0}
/* the band */
.band{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0 14px;border-bottom:4px solid var(--red)}
.mark{font-family:var(--head);font-weight:700;letter-spacing:.18em;font-size:clamp(14px,2.2vw,20px);white-space:nowrap}
.mark b{color:var(--red);font-weight:700}
.kick{font-family:var(--head);color:var(--gold);letter-spacing:.3em;font-size:clamp(9px,1.3vw,12px);text-align:right}
/* a container: the black gutter is the line between blocks; the block's own edge is a thin WHITE line (Mondrian's white) - three carry a colour */
.box{--c:var(--white);--g:244,239,230;position:relative;background:var(--black);padding:clamp(22px,4vw,44px);
     box-shadow:inset 0 0 0 2px var(--c),inset 0 0 10px rgba(var(--g),.12)}
.box.red{--c:var(--red);--g:255,42,42;box-shadow:inset 0 0 0 2px var(--c),0 0 16px rgba(var(--g),.35),inset 0 0 12px rgba(var(--g),.18)}
.box.yellow{--c:var(--yellow);--g:255,204,40;box-shadow:inset 0 0 0 2px var(--c),0 0 16px rgba(var(--g),.35),inset 0 0 12px rgba(var(--g),.18)}
.box.blue{--c:var(--blue);--g:56,120,255;box-shadow:inset 0 0 0 2px var(--c),0 0 16px rgba(var(--g),.4),inset 0 0 12px rgba(var(--g),.2)}
.box.tight{padding:0;overflow:hidden}
h1,h2,.h{font-family:var(--head);font-weight:700;letter-spacing:.12em;line-height:1.25;text-transform:uppercase}
h1{font-size:clamp(20px,3.6vw,34px)}
h2{font-size:clamp(11px,1.5vw,13px);letter-spacing:.3em;color:var(--gold);margin-bottom:18px}
h1 b,.h b{color:var(--red);font-weight:700}
p{color:var(--white);max-width:62ch}
p.quiet{color:var(--grey);font-size:15px}
/* the hero: the film in a 16:9 window, the mark as its poster */
.hero{aspect-ratio:21/9;display:grid;place-items:center}
.hero img{width:min(56%,420px);display:block}
.hero iframe,.hero video{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
/* the volumes: six blocks, each with its lane's colour as a pill */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gut)}
.vol{display:flex;flex-direction:column;gap:12px;padding:clamp(16px,2.4vw,24px);min-height:124px;justify-content:space-between;transition:transform .15s}
.vol:hover{transform:translateY(-2px)}
.vol .n{font-family:var(--head);font-size:11px;letter-spacing:.3em;color:var(--gold)}
.vol .g{font-family:var(--head);font-weight:700;font-size:clamp(13px,1.7vw,17px);letter-spacing:.14em;text-transform:uppercase}
.pill{display:inline-block;border:2px solid var(--p,var(--white));color:var(--p,var(--white));padding:3px 9px;font-family:var(--head);font-size:10px;letter-spacing:.14em;font-weight:700;width:max-content}
/* the socials and the contact */
.row{display:flex;flex-wrap:wrap;gap:var(--gut)}
.row .box{flex:1 1 150px;text-align:center;padding:18px 12px;font-family:var(--head);font-weight:700;letter-spacing:.2em;font-size:13px}
.contact a{font-family:var(--head);font-weight:700;letter-spacing:.08em;font-size:clamp(14px,2vw,18px);word-break:break-all}
/* the ticker line at the foot */
.foot{margin-top:auto;border-top:4px solid var(--red);padding:16px 0;text-align:center;font-family:var(--head);font-weight:700;letter-spacing:.22em;font-size:clamp(9px,1.3vw,12px);text-transform:uppercase}
.foot a{padding:0 .5em}.foot span{color:var(--red)}
@media (max-width:640px){.grid{grid-template-columns:1fr 1fr}.kick{display:none}.band{justify-content:center}}
@media (max-width:400px){.grid{grid-template-columns:1fr}}

/* the legal line (Forest 10:55: "if it needs to be there, make it look nice and put it as far down at the bottom as you can") */
.legal{margin-top:auto;padding:34px 0 14px;text-align:center;font-family:var(--head);font-weight:700;font-size:9px;letter-spacing:.28em;text-transform:uppercase;color:rgba(244,239,230,.34);white-space:nowrap}
.legal a{color:inherit;text-decoration:none;margin:0 0 0 18px;transition:color .2s}.legal a:hover{color:var(--white)}