/* Concept: a Lagos poster wall. Flat colour blocks, heavy condensed type, grain, ticket strips and a cropped Bulga mark on every poster. Reading column stays calm serif on paper. */
:root{--paper:#F2E9D8;--bg:#F2E9D8;--surface:#E8DDC8;--fg:#1B1410;--mute:#6A5A4B;--rule:#D3C6AE;--accent:#D8672A;--accent-text:#B8470B;--ink:#0E0B09;--cream:#F2E9D8;--sun:#FFDD55;--blue:#2F6FD0;--orange:#D8672A;--hot:#FF7A2B;color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0E0B09;--surface:#1A1410;--fg:#F2E9D8;--mute:#A99A88;--rule:#2E2520;--accent-text:#FF7A2B;color-scheme:dark}}
:root[data-theme="dark"]{--bg:#0E0B09;--surface:#1A1410;--fg:#F2E9D8;--mute:#A99A88;--rule:#2E2520;--accent-text:#FF7A2B;color-scheme:dark}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:400 18px/1.7 "Source Serif 4",Georgia,serif;-webkit-font-smoothing:antialiased}
a{color:inherit}
.wrap{max-width:68rem;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
a:focus-visible,button:focus-visible{outline:3px solid var(--sun);outline-offset:3px}
/* grain */
.poster::after,.phead::after,.hero::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.22;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
/* masthead is always black */
.mast{background:var(--ink);color:var(--cream)}
.mastin{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:14px}
.brand{white-space:nowrap;font-family:Archivo,Arial,sans-serif;text-decoration:none;font-size:1.05rem;letter-spacing:.02em}
.b1{font-weight:800}.b2{font-weight:500}
.mk,.lk{background:currentColor;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.mk{--m:url(images/mark.png);display:inline-block;width:30px;height:30px;vertical-align:middle;margin-right:10px;color:var(--hot)}
.lk{--m:url(images/lockup.png);width:150px;height:118px;color:var(--cream);flex:none}
nav{display:flex;align-items:center;gap:20px;font:500 .9rem Archivo,Arial,sans-serif}
nav a{text-decoration:none;color:#BFB2A1}nav a:hover{color:var(--cream)}
#tg{font:500 .8rem Archivo,Arial,sans-serif;color:#BFB2A1;background:none;border:1px solid #3A302A;border-radius:999px;padding:5px 12px;cursor:pointer}
#tg:hover{color:var(--cream)}
/* hero */
.hero{position:relative;background:var(--orange);color:var(--ink);padding-block:clamp(36px,7vw,80px) clamp(28px,5vw,52px);overflow:hidden}
.hero .wrap{position:relative;z-index:1}
.eyebrow{font:800 .75rem Archivo,Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase;margin:0 0 14px}
.hero h1{font:400 clamp(3rem,11vw,8rem)/.92 Anton,Impact,"Archivo",sans-serif;text-transform:uppercase;margin:0;letter-spacing:.005em}
.hero h1 .o{color:var(--cream)}
.hero .lead{font-size:1.2rem;line-height:1.5;max-width:34rem;margin:22px 0 0;color:var(--ink)}
.ticket{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;margin:26px 0 0;padding:10px 0;border-top:2px dashed var(--ink);font:600 .85rem Archivo,Arial,sans-serif;text-transform:uppercase;letter-spacing:.06em}
.ticket b{font-weight:400}
/* poster wall */
.wall{padding-block:2px 0}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;background:var(--bg);padding-top:3px}
.tile{display:block;text-decoration:none;background:var(--surface)}
.tile .cap{padding:16px 16px 22px}
.tile .cap p{margin:6px 0 0;font-size:.98rem;line-height:1.5;color:var(--mute)}
.ser{font:600 .8rem Archivo,Arial,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.poster{position:relative;container-type:inline-size;aspect-ratio:4/5;overflow:hidden;isolation:isolate}
.pin{position:relative;height:100%;display:flex;flex-direction:column;justify-content:space-between;padding:6.5cqw}
.tile:hover .poster{filter:brightness(1.06)}
.pm{position:absolute;right:-18cqw;top:-6cqw;width:72cqw;height:72cqw;background:currentColor;opacity:.16;-webkit-mask:url(images/mark.png) center/contain no-repeat;mask:url(images/mark.png) center/contain no-repeat;z-index:-1}
.tag{align-self:flex-start;position:relative;font:800 3.4cqw Archivo,Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;padding:1.4cqw 3cqw;background:var(--tagbg);color:var(--tagfg);transform:rotate(-2deg)}
.pt h3{font:400 17cqw/.95 Anton,Impact,sans-serif;text-transform:uppercase;margin:0;text-wrap:balance}
.pt p{margin:3.5cqw 0 0;font:600 4.6cqw/1.25 Archivo,Arial,sans-serif;text-transform:uppercase;letter-spacing:.03em;color:var(--acc)}
.tix{display:flex;justify-content:space-between;gap:8px;border-top:.6cqw dashed currentColor;padding-top:3cqw;font:600 3.4cqw Archivo,Arial,sans-serif;text-transform:uppercase;letter-spacing:.07em}
.pimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.poster:has(.pimg)::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(14,11,9,.25),rgba(14,11,9,.2) 35%,rgba(14,11,9,.92) 78%)}
/* colourways */
.pc-blue{background:var(--blue);color:var(--cream);--acc:var(--sun);--tagbg:var(--sun);--tagfg:var(--ink)}
.pc-ink{background:var(--ink);color:var(--cream);--acc:var(--sun);--tagbg:var(--orange);--tagfg:var(--ink)}
.pc-orange{background:var(--orange);color:var(--cream);--acc:var(--sun);--tagbg:var(--cream);--tagfg:var(--ink)}
/* article */
.phead{position:relative;overflow:hidden;padding-block:clamp(32px,6vw,72px) clamp(26px,4vw,44px);isolation:isolate}
.phead .wrap{position:relative}
.phead .pm{right:-6vw;top:-30%;width:min(60vw,34rem);height:min(60vw,34rem);opacity:.15}
.phead .tag{display:inline-block;font-size:.78rem;padding:5px 12px}
.phead .ser{color:currentColor;opacity:.85;margin-left:12px}
.phead h1{font:400 clamp(3rem,10vw,7.2rem)/.94 Anton,Impact,sans-serif;text-transform:uppercase;margin:20px 0 0;max-width:14ch;text-wrap:balance}
.phead .acc{font:600 clamp(1rem,2.4vw,1.4rem)/1.3 Archivo,Arial,sans-serif;text-transform:uppercase;letter-spacing:.03em;color:var(--acc);margin:14px 0 0;max-width:30rem}
.by{display:flex;flex-wrap:wrap;gap:4px 18px;margin:28px 0 0;padding-top:12px;border-top:2px dashed currentColor;font:600 .8rem Archivo,Arial,sans-serif;text-transform:uppercase;letter-spacing:.07em}
.art{padding-block:36px 8px}
.lead{font-size:1.25rem;line-height:1.5;color:var(--mute);max-width:36rem;margin:0 0 28px}
.art .lead{font-style:italic}
.cover{margin:0 0 36px;max-width:30rem;background:var(--ink)}.cover img{display:block;width:100%;height:auto}
.prose{max-width:38rem}.prose p{margin:0 0 1.25em}
.pad{padding-block:36px}
.disc{font-style:italic;color:var(--mute);border-top:1px solid var(--rule);padding-top:20px;margin-top:2em}
.src{max-width:38rem;margin-top:36px;padding:20px 24px;border:2px dashed var(--fg)}
.src h2{font:800 .75rem Archivo,Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;margin:0 0 12px}
.src ul{margin:0;padding-left:1.1em;font-size:.95rem;line-height:1.6}.src li{margin-bottom:6px}
.src a{text-decoration-color:var(--accent)}
.back{margin:36px 0 0;font:600 .9rem Archivo,Arial,sans-serif}
.foot{margin-top:72px;background:var(--ink);color:var(--cream);padding-block:36px 44px}
.footin{display:flex;align-items:center;gap:32px;flex-wrap:wrap}
.foot p{margin:0 0 8px;color:#BFB2A1;font-size:.95rem}.foot .small{font-size:.85rem}
@media (max-width:820px){.grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.grid{grid-template-columns:1fr}body{font-size:17px}.lk{width:120px;height:94px}}
@media (prefers-reduced-motion:no-preference){.tile .poster{transition:filter .2s}}