/* Kiki: one page, a few rooms, all in my colours: brown, orange, white, grey, yellow, green,
   and purple now and then, like an orange cat. Headings use the site's lo-fi type (drawn small,
   stretched back up with nearest-neighbour, unevenly). My own photos sit in the page with
   difference or exclusion blending. */

body.kiki {
  --b1: #3d2619; --b2: #5a3a22; --b3: #7a4a2c; --b4: #9a5a2a;
  --or: #e07b28; --or2: #f29a3a; --yl: #f2c230; --gr: #6fae3e; --gr2: #3f7a2a;
  --wh: #ffffff; --g1: #ececec; --g2: #c4c4c4; --g3: #8a8a8a; --g4: #555555; --pu: #6a4a9a;
  background: var(--b1); color: var(--wh);
  font: 400 18px/1.75 "Hind", "Segoe UI", system-ui, sans-serif; -webkit-font-smoothing: auto;
}
.kiki main { position: relative; }
.kiki main :is(p, dd, li, dt, figcaption) { font-family: "Hind", "Segoe UI", system-ui, sans-serif; }
.kiki ::selection { background: var(--or); color: #fff; }
.skip { position: absolute; left: -9999px; top: 0; }
.skip:focus { left: 8px; top: 8px; z-index: 100; background: #000; color: #fff; padding: 6px 10px; }
.kiki main a:focus-visible, .kiki main summary:focus-visible { outline: 3px solid var(--yl); outline-offset: 3px; }
.wrap-k { max-width: 1080px; margin: 0 auto; padding: 0 20px; position: relative; z-index: 1; }
.sec { position: relative; padding: 76px 0; overflow: hidden; isolation: isolate; }
.sec p { margin: 0 0 1.1em; max-width: 40em; }
.sec .lead { font-size: 21px; line-height: 1.65; }
.sec h3 { margin: 0 0 6px; }
.mono { font-family: "VT323", ui-monospace, Menlo, monospace !important; letter-spacing: .06em; }
.two { display: grid; grid-template-columns: 1.1fr .9fr; gap: 46px; align-items: start; }
.two.flip { grid-template-columns: .9fr 1.1fr; }
.two.flip > .pic { order: -1; }

/* every heading: the site's lo-fi type. Real text stays for readers and search. */
.sec h2 { margin: 0 0 22px; font: 700 clamp(30px, 5vw, 50px)/1.05 "Silkscreen", "Press Start 2P", monospace; text-transform: lowercase; }
.chn { display: block; margin: 0 0 8px; font: 400 22px/1 "VT323", monospace; letter-spacing: .12em; opacity: .85; }

/* my photos, blended into the page */
.bl { position: absolute; z-index: 0; pointer-events: none; user-select: none; object-fit: cover; display: block; max-width: none;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 62%, transparent 100%); mask-image: radial-gradient(ellipse at center, #000 62%, transparent 100%); }
.bl.fit { inset: 0; width: 100%; height: 100%; -webkit-mask-image: none; mask-image: none; }
.bl.dif { mix-blend-mode: difference; }
.bl.exc { mix-blend-mode: exclusion; }

/* ================================================================ tape (hero, music, close) */
.t-tape { background: var(--b1) url("../img/stars.png") 0 0 / 320px; background-blend-mode: screen; color: var(--wh); }
.t-tape a { color: var(--or2); text-underline-offset: 3px; }
.t-tape a:hover { color: #fff; }
.t-tape h2 { color: var(--or2); }
.t-tape .chn { color: var(--yl); }
.k-hero { padding: 90px 0 90px; min-height: 640px; }
.hero-ph { position: absolute; top: 0; right: 0; bottom: 0; width: 56%; z-index: 0; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%); mask-image: linear-gradient(90deg, transparent 0, #000 22%); }
.hero-ph img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; filter: brightness(1.7) contrast(1.05) saturate(1.2); display: block; }
.hero-ph::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(to bottom, rgba(0,0,0,.28) 0 1px, transparent 1px 3px); }
.k-hero .grid { display: block; }
.k-hero .grid > div { max-width: 560px; text-shadow: 0 2px 10px rgba(28,17,11,.7); }
.k-hero h1 { margin: 0 0 14px; font: 400 clamp(52px, 11vw, 124px)/.92 "Silkscreen", "Press Start 2P", monospace; text-transform: lowercase; color: var(--wh); }
.k-hero h1 .ln:nth-child(2) { color: var(--or2); }
.k-hero .tag { font-size: 25px; line-height: 1.25; color: var(--yl); margin: 0 0 22px; }
.k-hero .open { font-size: 21px; line-height: 1.7; max-width: 34em; }
.k-hero .open em { font-style: normal; color: var(--or2); }

.frame { --f: contrast(1.06) saturate(1.12); position: relative; margin: 0; background: #000; }
.frame.bright { --f: brightness(1.75) contrast(1.04) saturate(1.2); }
.frame img { display: block; width: 100%; height: auto; filter: var(--f); }
.frame::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: repeating-linear-gradient(to bottom, rgba(0,0,0,.2) 0 1px, transparent 1px 3px); }
.frame figcaption { position: relative; z-index: 4; padding: 8px 0 0; background: none; color: var(--g1); font: 20px/1.25 "VT323", monospace !important; letter-spacing: .04em; }
.frame:hover img { animation: split .5s steps(2) 1; }
@keyframes split { 0% { filter: var(--f) drop-shadow(6px 0 0 rgba(255,40,70,.7)) drop-shadow(-6px 0 0 rgba(0,220,255,.6)); transform: translateX(2px); } 50% { transform: translateX(-3px); clip-path: inset(30% 0 40% 0); } 100% { filter: var(--f); transform: none; clip-path: none; } }
.frame.in img { animation: flash .9s cubic-bezier(.12,.7,.2,1) 1; }
@keyframes flash { 0% { filter: brightness(7) contrast(.5) saturate(0); } 22% { filter: brightness(2.2) contrast(.8) saturate(.5); } 100% { filter: var(--f); } }

/* channel strip */
.channels { background: var(--b2); border-top: 3px solid var(--or); border-bottom: 3px solid var(--or); padding: 14px 0; }
.channels ul { list-style: none; margin: 0 auto; padding: 0 20px; max-width: 1080px; display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.channels li { margin: 0; }
.channels a { display: block; text-decoration: none; padding: 6px 10px 8px; font: 600 15px/1.25 "Hind", sans-serif; color: #1c110b; border: 2px solid #1c110b; }
.channels a b { display: block; font: 400 17px/1 "VT323", monospace; letter-spacing: .08em; }
.channels a:hover { background: #fff !important; color: #1c110b !important; }
.channels .c1 a { background: var(--g1); } .channels .c2 a { background: var(--yl); } .channels .c3 a { background: var(--g2); }
.channels .c4 a { background: var(--or); color: #fff; } .channels .c5 a { background: var(--or2); } .channels .c6 a { background: var(--gr); }
.channels .c7 a { background: #fff; } .channels .c8 a { background: var(--g3); color: #fff; } .channels .c9 a { background: var(--pu); color: #fff; }

/* ================================================================ Wii menu (who) */
.t-wii { background-color: var(--g1); background-image: repeating-linear-gradient(0deg, rgba(0,0,0,.045) 0 2px, transparent 2px 6px); color: #2b2b2b; }
.t-wii h2 { color: var(--or); }
.t-wii .chn { color: var(--g4); }
.t-wii a { color: #b2531a; }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 26px; }
.tile { position: relative; background: #fff; border-radius: 22px; padding: 22px 24px 18px; box-shadow: 0 5px 14px rgba(0,0,0,.12), inset 0 0 0 2px #dcdcdc; }
.tile:hover { box-shadow: 0 8px 20px rgba(0,0,0,.16), inset 0 0 0 3px var(--or); }
.tile .ico { width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; margin-bottom: 12px; font: 700 26px/1 "Hind", sans-serif; color: #fff; }
.tile:nth-child(1) .ico { background: var(--or); } .tile:nth-child(2) .ico { background: var(--gr); } .tile:nth-child(3) .ico { background: var(--yl); color: #2b2b2b; }
.tile h3 { font: 700 21px/1.2 "Hind", sans-serif; color: #2b2b2b; }
.tile p { font-size: 16.5px; line-height: 1.65; margin: 0 0 .9em; }
.wii-bar { margin-top: 30px; display: flex; gap: 12px; align-items: center; justify-content: space-between; background: #fff; border-radius: 99px; padding: 10px 22px; box-shadow: inset 0 0 0 2px #dcdcdc; font: 600 15px/1.2 "Hind", sans-serif; color: var(--g4); }
.wii-bar b { color: var(--or); }

/* ================================================================ Atari 2600 Adventure (roots) */
.t-atari { background-color: var(--pu); background-image: conic-gradient(#5a3c88 25%, #6a4a9a 0 50%, #5a3c88 0 75%, #6a4a9a 0); background-size: 32px 32px; color: #1c110b; }
.t-atari::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 16px; z-index: 0; background: repeating-linear-gradient(90deg, var(--yl) 0 48px, var(--or) 48px 96px); }
.t-atari h2 { color: var(--yl); font-family: "Press Start 2P", monospace; font-weight: 400; }
.t-atari .chn { color: var(--yl); }
.room { background: #fff; border: 8px solid #1c110b; box-shadow: 10px 10px 0 #1c110b; padding: 24px 28px 10px; }
.room a { color: var(--pu); }
.room-scene { background: var(--pu); border: 8px solid #1c110b; box-shadow: 10px 10px 0 #1c110b; position: relative; }
.room-scene svg { display: block; width: 100%; height: auto; }
.room-scene .cat { border-top: 8px solid #1c110b; position: relative; margin: 0; }
.room-scene .cat img { display: block; width: 100%; height: auto; }
.room-scene .cat figcaption { position: absolute; left: 0; bottom: 0; background: #1c110b; color: var(--yl); font: 400 11px/1.6 "Press Start 2P", monospace !important; padding: 8px 10px; max-width: 80%; }

/* ================================================================ PictoChat (brownie digital) */
.t-pict { background: var(--g2); color: #111; background-image: linear-gradient(rgba(255,255,255,.5) 1px, transparent 1px); background-size: 100% 28px; }
.t-pict h2 { color: #222; }
.t-pict .chn { color: #222; }
.t-pict a { color: #b2531a; }
.chatwin { background: #fff; border: 4px solid #111; box-shadow: 8px 8px 0 rgba(0,0,0,.75); }
.chatwin .bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 14px; background: #111; color: #fff; font: 400 18px/1.2 "DotGothic16", monospace; }
.chatwin .bar .roomtag { background: var(--gr); color: #111; padding: 2px 12px; }
.chatwin .msgs { padding: 22px 20px 26px; display: grid; gap: 20px; }
.msg { position: relative; max-width: 46em; }
.msg .who { display: block; width: fit-content; margin: 0; line-height: 1.5; padding: 1px 12px; font: 400 16px/1.5 "DotGothic16", monospace; border: 3px solid #111; border-bottom: 0; background: var(--or); color: #111; }
.msg .bub { border: 3px solid #111; padding: 14px 18px 4px; background: #fff; font-size: 17.5px; line-height: 1.7; }
.msg .bub p { margin: 0 0 .9em; max-width: none; }
.msg.b .who { background: var(--gr); } .msg.c .who { background: var(--yl); } .msg.d .who { background: var(--pu); color: #fff; }
.msg.r { justify-self: end; }
.msg.big .bub { font-size: 20px; }
.pict-pic { margin: 0; border: 4px solid #111; background: #fff; padding: 8px; max-width: 560px; }
.pict-pic img { display: block; width: 100%; height: auto; }
.pict-pic figcaption { margin-top: 6px; font: 400 15px/1.4 "DotGothic16", monospace !important; color: #111; }
.sticker { display: inline-block; background: var(--yl); border: 3px solid #111; padding: 2px 10px; font: 400 16px/1.4 "DotGothic16", monospace; transform: rotate(-2deg); margin: 8px 0 0; }

/* ================================================================ the instruments + rendered worlds */
.t-worlds { background-color: var(--b3); background-image: linear-gradient(rgba(90,52,26,.58), rgba(90,52,26,.58)), url("../tinroof/img/tin.png"); background-size: auto, 160px 160px; background-blend-mode: normal, overlay; color: #fff; }
.t-worlds h2, .t-worlds h3.lo { color: var(--yl); }
.t-worlds h3.lo { margin: 0 0 16px; font: 700 clamp(22px, 3.4vw, 32px)/1.1 "Silkscreen", monospace; text-transform: lowercase; }
.t-worlds .chn { color: var(--yl); }
.t-worlds a { color: var(--yl); }
.contraptions { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 30px 0 0; }
.card { position: relative; background: #000; border: 6px solid var(--b1); box-shadow: 8px 8px 0 rgba(28,17,11,.6); }
.card.wide { grid-column: span 2; }
.card .shot { display: block; background: #000; }
.card .shot img { display: block; width: 100%; height: auto; }
.card .shot.px img { image-rendering: pixelated; }
.card .plate { padding: 14px 18px 16px; background: #fff; color: #1c110b; border-top: 6px solid var(--b1); }
.card h3 { margin: 0 0 4px; font: 700 21px/1.2 "Hind", sans-serif; color: #1c110b; }
.card .kind { margin: 0 0 6px; font: 400 18px/1.2 "VT323", monospace !important; letter-spacing: .08em; text-transform: uppercase; color: var(--gr2); }
.card p { margin: 0 0 .6em; max-width: none; font-size: 16.5px; line-height: 1.55; }
.t-worlds .card a.go { display: inline-block; margin-top: 2px; padding: 5px 14px 4px; font: 400 18px/1.2 "VT323", monospace; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; color: #fff; background: var(--or); border: 2px solid #1c110b; }
.t-worlds .card a.go:hover { background: var(--b2); }
.render { margin-top: 66px; }
.render .two { gap: 40px; }
.bigshot { margin: 0; border: 6px solid var(--b1); box-shadow: 8px 8px 0 rgba(28,17,11,.6); background: #000; }
.bigshot img { display: block; width: 100%; height: auto; }
.bigshot figcaption { padding: 8px 12px; background: #fff; color: #1c110b; font: 20px/1.25 "VT323", monospace !important; border-top: 6px solid var(--b1); }

/* ================================================================ 90s sleeve (STONE) */
.t-alt { background-color: var(--or); color: #1c110b; background-image: radial-gradient(circle, rgba(61,38,25,.45) 2px, transparent 2.6px); background-size: 16px 16px; }
.t-alt h2 { color: #fff; font-size: clamp(60px, 12vw, 140px); }
.t-alt .chn { color: #fff; }
.zine { display: grid; grid-template-columns: 1.05fr .95fr; gap: 34px; align-items: start; }
.paper-wrap { filter: drop-shadow(8px 8px 0 var(--b1)); }
.paper { background: #fff; padding: 30px 32px 14px; position: relative; clip-path: polygon(0 2%, 4% 0, 9% 1.5%, 15% 0, 22% 1.2%, 30% 0, 38% 1.6%, 47% 0, 55% 1.4%, 64% 0, 72% 1.5%, 80% 0, 88% 1.3%, 95% 0, 100% 1.8%, 100% 98%, 94% 100%, 86% 98.6%, 78% 100%, 69% 98.5%, 60% 100%, 50% 98.6%, 41% 100%, 31% 98.7%, 21% 100%, 11% 98.6%, 4% 100%, 0 98%); }
.paper p { max-width: none; }
.paper a { color: #b2531a; }
.paper .pull { font: 600 22px/1.4 "Hind", sans-serif; color: var(--b3); border-left: 6px solid var(--gr); padding-left: 16px; margin: 22px 0; }
.collage { position: relative; min-height: 520px; }
.collage img { position: absolute; background: #fff; padding: 8px 8px 10px; box-shadow: 6px 6px 0 var(--b1); }
.collage .a { width: 58%; left: 0; top: 0; transform: rotate(-4deg); }
.collage .b { width: 52%; right: 0; top: 70px; transform: rotate(5deg); }
.collage .c { width: 50%; left: 6%; top: 250px; transform: rotate(3deg); }
.collage .d { width: 54%; right: 2%; top: 330px; transform: rotate(-3deg); }
.collage .logo { width: 60%; left: 20%; top: -34px; background: none; box-shadow: none; padding: 0; transform: rotate(-3deg); z-index: 3; filter: drop-shadow(4px 4px 0 var(--b1)); }
.releases { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.releases a { flex: 1 1 140px; text-align: center; text-decoration: none; background: #fff; color: #1c110b !important; font: 600 14px/1.3 "Hind", sans-serif; padding: 8px 8px 10px; box-shadow: 5px 5px 0 var(--b1); transform: rotate(var(--r, 0deg)); }
.releases a:nth-child(odd) { --r: -2deg; } .releases a:nth-child(even) { --r: 2deg; }
.releases img { display: block; width: 100%; height: auto; margin-bottom: 6px; }
.releases a:hover { background: var(--yl); }

/* ================================================================ burned CDs (listening) */
.t-cd { background-color: var(--g3); background-image: linear-gradient(rgba(0,0,0,.28) 2px, transparent 2px), linear-gradient(90deg, rgba(0,0,0,.28) 2px, transparent 2px), linear-gradient(rgba(138,138,138,.62), rgba(138,138,138,.62)), url("../tinroof/img/tin2.png"); background-size: 56px 56px, 56px 56px, auto, 160px 160px; background-blend-mode: normal, normal, normal, luminosity; color: #fff; }
.t-cd h2 { color: #fff; }
.t-cd .chn { color: var(--yl); }
.t-cd a { color: var(--yl); }
.cdpile { display: flex; flex-wrap: wrap; gap: 6px 4px; justify-content: center; margin: 30px 0 46px; }
.disc { position: relative; width: 168px; height: 168px; border-radius: 50%; flex: none; transform: rotate(var(--r, 0deg)); filter: drop-shadow(0 8px 10px rgba(0,0,0,.45)); margin: 0 -6px; }
.disc .face { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 30deg, #e9edf0, #98a3ad, #f3f6f8, #8993a0, #dde3e8, #a9b3bc, #eef1f4, #e9edf0); -webkit-mask: radial-gradient(circle at center, transparent 0 11.5%, #000 12%); mask: radial-gradient(circle at center, transparent 0 11.5%, #000 12%); }
.disc .lab { position: absolute; left: 14%; right: 14%; top: 12%; height: 30%; display: grid; place-items: center; text-align: center; font: 400 15px/1.05 "Permanent Marker", cursive; color: #101010; transform: rotate(var(--t, -6deg)); }
.disc .lab2 { position: absolute; left: 16%; right: 16%; bottom: 13%; text-align: center; font: 400 12px/1.1 "Permanent Marker", cursive; color: #101010; opacity: .85; transform: rotate(calc(var(--t, -6deg) * -.5)); }
.disc:nth-child(odd) { --r: -9deg; } .disc:nth-child(even) { --r: 7deg; } .disc:nth-child(3n) { --r: 14deg; --t: 8deg; }
.notes { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: start; }
.note { position: relative; background: #fff; color: #1c110b; padding: 24px 26px 12px; box-shadow: 6px 6px 0 var(--b1); }
.note::after { content: ""; position: absolute; left: 40%; top: -11px; width: 100px; height: 22px; background: var(--yl); opacity: .9; transform: rotate(-3deg); }
.note h3 { font: 400 24px/1 "VT323", monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--b3); margin: 0 0 8px; }
.note p { max-width: none; font-size: 17px; line-height: 1.65; }
.note.wide { grid-column: span 2; }
.tapelabels { list-style: none; margin: 8px 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.tapelabels li { margin: 0; padding: 2px 11px; background: #fff; border: 2px solid #1c110b; font: 600 15px/1.4 "Hind", sans-serif; color: #1c110b; }
.tapelabels li.big { background: var(--yl); }

/* ================================================================ flash photographs (pictures) */
.t-lim { background-color: #34302c; background-image: var(--grain); color: var(--g1); }
.t-lim h2 { color: var(--yl); font-size: clamp(40px, 8vw, 90px); }
.t-lim .chn { color: var(--g2); }
.t-lim a { color: var(--yl); }
.t-lim .lead { color: #fff; }
.lim-text { column-count: 2; column-gap: 40px; max-width: 980px; }
.lim-text p { max-width: none; break-inside: avoid-column; }
.lim-grid { column-count: 3; column-gap: 14px; margin-top: 40px; }
.lim-grid figure { margin: 0 0 14px; break-inside: avoid; background: #000; border: 4px solid #fff; }
.lim-grid img { display: block; width: 100%; height: auto; }

/* ================================================================ workshop wall (gear, books, shows) */
.t-shelf { background-color: var(--b2); background-image: repeating-linear-gradient(90deg, rgba(0,0,0,.32) 0 2px, transparent 2px 64px), repeating-linear-gradient(90deg, rgba(255,190,120,.07) 0 9px, rgba(0,0,0,.07) 9px 17px, transparent 17px 31px); color: #fff; }
.t-shelf h2 { color: var(--or2); }
.t-shelf .chn { color: var(--yl); }
.t-shelf a { color: var(--yl); }
.workwall { display: grid; grid-template-columns: .95fr 1.05fr; gap: 34px; align-items: start; margin-top: 26px; }
.plank { background: var(--b1); border-top: 6px solid var(--or); padding: 16px 20px 10px; margin-bottom: 22px; }
.plank h3 { margin: 0 0 10px; font: 400 22px/1 "VT323", monospace; letter-spacing: .14em; color: var(--yl); text-transform: uppercase; }
.plank p { max-width: none; font-size: 17px; line-height: 1.6; }
.spines { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.spines li { margin: 0; padding: 3px 11px 3px 9px; background: #fff; color: #1c110b; font: 600 14.5px/1.4 "Hind", sans-serif; border-left: 7px solid var(--c, var(--or)); }
.spines li:nth-child(5n) { --c: var(--gr); } .spines li:nth-child(5n+1) { --c: var(--yl); } .spines li:nth-child(5n+2) { --c: var(--b3); } .spines li:nth-child(5n+3) { --c: var(--pu); }
.polaroid { margin: 0 0 22px; background: #fff; padding: 10px 10px 12px; box-shadow: 6px 6px 0 rgba(28,17,11,.6); transform: rotate(2deg); max-width: 330px; }
.polaroid img { display: block; width: 100%; height: auto; }
.polaroid figcaption { padding-top: 8px; font: 20px/1.1 "VT323", monospace !important; color: #1c110b; text-align: center; }
.films { margin: 14px 0 6px; border: 2px solid var(--or); background: rgba(28,17,11,.4); }
.films summary { cursor: pointer; padding: 10px 14px; font: 400 22px/1.2 "VT323", monospace; letter-spacing: .06em; color: var(--yl); list-style: none; }
.films summary::-webkit-details-marker { display: none; }
.films summary::before { content: "▶ "; color: var(--or2); }
.films[open] summary::before { content: "▼ "; }
.in-films { padding: 0 14px 14px; }
.in-films h4 { margin: 14px 0 6px; font: 400 19px/1 "VT323", monospace; letter-spacing: .1em; color: var(--gr); text-transform: uppercase; }
.in-films .spines li { font-size: 13.5px; padding: 2px 9px 2px 8px; }

/* ================================================================ closing */
.closing { text-align: center; padding: 84px 0 100px; }
.closing p { margin-left: auto; margin-right: auto; }
.closing h2 { display: inline-block; }
.links { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 26px; }
.kiki main .links a { text-decoration: none; border: 2px solid var(--or); padding: 8px 18px; font: 24px/1 "VT323", monospace; letter-spacing: .06em; color: #fff; background: var(--b2); }
.kiki main .links a:hover { background: var(--or); }

/* ================================================================ small screens */
@media (max-width: 900px) {
  .tiles, .zine, .notes, .workwall, .contraptions { grid-template-columns: 1fr; }
  .note.wide, .card.wide { grid-column: auto; }
  .collage { min-height: 460px; }
  .lim-text { column-count: 1; }
  .lim-grid { column-count: 2; }
}
@media (max-width: 820px) {
  .sec { padding: 52px 0; }
  .k-hero .grid, .two, .two.flip { grid-template-columns: 1fr; gap: 28px; }
  .two.flip > .pic { order: 0; }
  .k-hero .frame { max-width: 420px; }
  body.kiki { font-size: 17px; }
  .room { padding: 20px 18px 6px; box-shadow: 6px 6px 0 #1c110b; }
  .room-scene { box-shadow: 6px 6px 0 #1c110b; }
  .collage { min-height: 400px; }
  .disc { width: 128px; height: 128px; margin: 0 -8px; } .disc .lab { font-size: 12px; } .disc .lab2 { font-size: 9.5px; }
}
@media (max-width: 520px) {
  .lim-grid { column-count: 1; }
  .collage .c { top: 215px; } .collage .d { top: 280px; }
  .msg.r { justify-self: stretch; }
}
@media (prefers-reduced-motion: reduce) {
  .frame.in img, .frame:hover img { animation: none; }
  html { scroll-behavior: auto; }
}

.gallery3d { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 20px; }
.gallery3d .g1 { grid-column: span 2; }
.render h3.lo { margin-bottom: 12px; }
@media (max-width: 820px) {
  .gallery3d { grid-template-columns: 1fr; } .gallery3d .g1 { grid-column: auto; }
  .k-hero { padding: 0 0 50px; min-height: 0; }
  .hero-ph { position: relative; width: 100%; height: 108vw; -webkit-mask-image: linear-gradient(transparent 0, #000 0, #000 78%, transparent 100%); mask-image: linear-gradient(#000 78%, transparent 100%); margin-bottom: -40px; }
  .bl { opacity: .38 !important; }
}

/* a photo stretched across the top of a section, nearest-neighbour so it stays crisp */
.bl.band { left: 0; top: 0; width: 100%; height: 46%; object-fit: fill; image-rendering: pixelated; image-rendering: crisp-edges;
  -webkit-mask-image: linear-gradient(#000 70%, transparent 100%); mask-image: linear-gradient(#000 70%, transparent 100%); }
@media (max-width: 820px) { .bl.band { height: 34%; } }
.bl.px { object-fit: fill; image-rendering: pixelated; image-rendering: crisp-edges; }
.bl.bandb { left: 0; bottom: 0; width: 100%; height: 50%; object-fit: fill; image-rendering: pixelated; image-rendering: crisp-edges;
  -webkit-mask-image: linear-gradient(transparent 0, #000 30%); mask-image: linear-gradient(transparent 0, #000 30%); }

/* one system for every background photo: stretched edge to edge, smooth scaling, soft seams */
.bl.fill, .bl.top, .bl.bot { left: 0; width: 100%; object-fit: fill; image-rendering: auto; }
.bl.fill { top: 0; height: 100%; -webkit-mask-image: none; mask-image: none; }
.bl.top { top: 0; height: 55%; -webkit-mask-image: linear-gradient(#000 45%, transparent 100%); mask-image: linear-gradient(#000 45%, transparent 100%); }
.bl.bot { bottom: 0; height: 55%; -webkit-mask-image: linear-gradient(transparent 0, #000 55%); mask-image: linear-gradient(transparent 0, #000 55%); }
@media (max-width: 820px) { .bl.fill, .bl.top, .bl.bot { opacity: .25 !important; } }

/* gear as a page of newspaper classifieds: buying, selling, trading */
.classifieds { background: #fff; color: #111; padding: 14px 18px 12px; box-shadow: 8px 8px 0 rgba(28,17,11,.6); transform: rotate(-.6deg); }
.classifieds .cl-top { margin: 0 0 6px; padding-bottom: 6px; border-bottom: 3px double #111; font: 900 13px/1 "Arial Black", Impact, sans-serif; letter-spacing: .2em; text-align: center; }
.classifieds .cl-h { margin: 12px 0 8px; padding: 3px 8px; background: #111; color: #fff; font: 900 14px/1.2 "Arial Black", Impact, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.classifieds .cl-cols { column-count: 2; column-gap: 18px; column-rule: 1px solid #111; }
.kiki main .classifieds .ad { margin: 0 0 9px; break-inside: avoid; font: 15px/1.35 "Times New Roman", Times, Georgia, serif; max-width: none; }
.classifieds .ad b { text-transform: uppercase; font-size: 13.5px; letter-spacing: .02em; }
.classifieds .ad.gone { color: #555; }
.classifieds .sold { display: inline-block; margin-left: 4px; padding: 0 5px; border: 2px solid #c4281a; color: #c4281a; font: 900 11px/1.4 "Arial Black", Impact, sans-serif; letter-spacing: .08em; text-transform: uppercase; transform: rotate(-8deg); }
.kiki main .classifieds .cl-foot { margin: 8px 0 0; padding-top: 6px; border-top: 1px solid #111; font: italic 14px/1.3 "Times New Roman", Times, Georgia, serif; text-align: right; }
@media (max-width: 520px) { .classifieds .cl-cols { column-count: 1; } }

/* the name tag sits flush on its bubble (an inline-block left a gap that looked like a cut) */
.msg .bub { margin-top: 0; }