/* The Funky Cat homepage, a one-pager: a run of full-bleed coloured
   rooms, each with a hand-torn top edge that rips open as you arrive
   (the signature move, see page.js). Closest to the owner's reference. */

.room { position: relative; padding: var(--space-xl) 0; }
/* The colour field sits behind the content and reaches up past the room's
   top, so its torn edge bites into the room above */
.room-bg { position: absolute; z-index: 0; inset: -40px 0 0; clip-path: var(--tear, none); pointer-events: none; }
.room-night .room-bg { background: var(--night); }
.room-purple .room-bg { background: var(--purple); }
.room-deep .room-bg { background: var(--deep); }
/* The photo fills the top of the room only, so the copy below sits on the
   night ground instead of in a black box (review: no boxes) */
.room-photo .room-bg { position: absolute; bottom: 38%; }
.room-photo .room-bg.duo { clip-path: var(--tear, none); }
.room > .wrap, .room > .marquee { position: relative; z-index: 1; }
.heading { margin: 0 0 var(--space-l); rotate: -2deg; width: max-content; max-width: 100%; }

/* Room 1: the next party */
.hero { padding-top: clamp(56px, 9vw, 120px); padding-bottom: var(--space-l); }
.hero-grid { display: grid; gap: var(--space-l); align-items: center; }
.hero-copy .meta { margin: 0 0 var(--space-s); font-size: 14px; }
/* Tilted lines need more air than straight ones (guide 02) */
.stack { margin: 0; }
.stack span { display: block; width: max-content; max-width: 100%; transform-origin: left center; line-height: .98; }
.stack span:nth-child(1) { rotate: -2deg; }
.stack span:nth-child(2) { rotate: 1.5deg; margin-left: 12%; color: var(--lilac); }
.stack span:nth-child(3) { rotate: -1deg; }
.lede { max-width: 26em; margin: var(--space-m) 0 var(--space-s); color: var(--haze); }
.more { font-weight: 600; color: var(--white); }
.hero-poster { width: min(78%, 360px); justify-self: end; margin-right: 4%; }
@media (min-width: 900px) {
	.hero-grid { grid-template-columns: 1.25fr 1fr; }
	.hero-poster { width: min(100%, 440px); justify-self: center; margin: 0; }
}

/* Room 2: purple. Lilac fails as text on purple (3.45:1), so meta here is
   white at 85% (guide 01) */
.room-purple { color: var(--white); padding-top: 0; }
.room-purple .marquee { background: transparent; margin: 0 0 var(--space-l); padding-top: var(--space-l); }
.room-purple .marquee span::after { color: color-mix(in srgb, var(--white) 60%, transparent); }
.sets { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.sets li { display: grid; grid-template-columns: 4.2em 1fr; column-gap: var(--space-s); align-items: start; }
.sets time { padding-top: .6em; font-variation-settings: 'MONO' 1; font-size: 14px; color: color-mix(in srgb, var(--white) 85%, transparent); }
.sets b { font-family: var(--display); font-weight: var(--display-weight); font-size: clamp(24px, 4.4vw, 52px); line-height: 1.05; text-transform: none; }
.sets small { grid-column: 2; font-size: 13px; color: color-mix(in srgb, var(--white) 85%, transparent); margin-top: -2px; }
.sets li:nth-child(odd) b { rotate: -1deg; display: inline-block; }
.vj { margin: var(--space-m) 0 0; color: color-mix(in srgb, var(--white) 85%, transparent); }
@media (min-width: 900px) {
	.sets { grid-template-columns: 1fr 1fr; column-gap: var(--space-l); row-gap: var(--space-s); }
}

/* Room 3: new music */
.newest { display: grid; gap: var(--space-l); align-items: center; margin-bottom: var(--space-xl); }
.newest .poster { width: min(86%, 480px); }
.newest-copy h3 { margin: 0 0 var(--space-m); }
.newest-copy .meta { margin: 0 0 var(--space-2xs); }
.lilac { color: var(--lilac); }
@media (min-width: 900px) {
	.newest { grid-template-columns: 5fr 6fr; }
}
.covers { margin: 0; padding: 0 0 var(--space-l); list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-l) var(--space-m); }
.covers li:nth-child(even) { translate: 0 var(--space-l); }
.cap { display: block; margin-top: var(--space-s); font-size: 14px; line-height: 1.3; color: var(--haze); }
@media (min-width: 900px) {
	.covers { grid-template-columns: repeat(4, 1fr); }
}
.all { margin: var(--space-m) 0 0; font-weight: 600; }
.all a { color: var(--white); }

/* Room 4: crowd photo, the heading slapped on like a black label */
.room-photo { padding: var(--space-xl) 0; }
/* The heading on a cut purple field: a field, not a slab with a shadow */
.slab { display: inline-block; margin: 0 0 var(--space-l); padding: .12em .26em .16em; background: var(--purple); clip-path: var(--cut, none); rotate: -2.5deg; }
.after { display: grid; gap: var(--space-m); align-items: start; }
.after-copy { padding: var(--space-s) 0 0; }
.after-copy h3 { margin: 0 0 4px; }
.after-copy p { margin: 0 0 var(--space-s); }
.after-copy .meta { margin-bottom: var(--space-m); }
.after-copy a { color: var(--white); font-weight: 600; }
@media (min-width: 900px) {
	.after { grid-template-columns: 1.6fr 1fr; gap: var(--space-l); align-items: end; }
}

/* Room 5: radio, the series name behind (guide 06) */
.room-deep { overflow: hidden; }
.radio { position: relative; }
.series {
	position: absolute; z-index: 0; left: -2%; top: -.25em; margin: 0; width: max-content;
	font-size: clamp(80px, 17vw, 240px); line-height: .9; color: color-mix(in srgb, var(--lilac) 10%, transparent);
	rotate: -3deg; pointer-events: none;
}
.radio > :not(.series) { position: relative; z-index: 1; }
.shows { display: grid; gap: var(--space-l); align-items: center; }
.show-main { width: min(80%, 420px); }
.show-copy h3 { margin: 0 0 4px; }
.show-copy .meta { margin: 0 0 var(--space-s); }
.older { margin: var(--space-m) 0 0; padding: 0; list-style: none; display: grid; gap: var(--space-s); }
.older a { color: var(--white); }
@media (min-width: 900px) {
	.shows { grid-template-columns: 1fr 1.1fr; }
}

/* Room 6: the loose grid, every other poster stepped down */
/* No bottom padding: the stepped-down column hangs on the right, and the
   link sits under the left one instead of floating in a gap */
.past { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-l) var(--space-m); }
.past li:nth-child(even) { translate: 0 clamp(48px, 8vw, 120px); }
.past .poster { margin-bottom: var(--space-s); }
.ev { margin: 0; display: grid; gap: 2px; }
.ev b { font-size: clamp(17px, 2.2vw, 28px); line-height: 1.05; }
.ev .meta { font-size: 13px; }
@media (min-width: 900px) {
	.past { gap: var(--space-xl) var(--space-l); }
	.past li { max-width: 440px; }
	.past li:nth-child(odd) { justify-self: end; }
}

/* Room 7: newsletter */
.nl { padding-top: var(--space-l); }
.nl .eared-wrap { max-width: 760px; }
.statement { margin: 0 0 var(--space-s); font-size: clamp(48px, 11vw, 96px); line-height: .9; }
.statement span { display: block; width: max-content; max-width: 100%; }
.statement span:nth-child(2) { rotate: -3deg; margin-left: 6%; }
.eared p { margin: 0; color: color-mix(in srgb, var(--white) 85%, transparent); }

/* At desktop height the full mega size pushed the intro under the bar */
@media (min-width: 900px) {
	.hero .stack { font-size: clamp(64px, 9vw, 132px); }
	.hero { padding-top: clamp(40px, 6vw, 88px); }
	.past li { max-width: 380px; }
}

/* Whiskers on DAY: three strokes either side (guide 06, "whiskers on a
   heading"). Sized in em so they scale with the word; white on the lilac
   word so the face reads. They draw themselves in after the title lands. */
.whiskered { position: relative; }
.whiskered .wk { position: absolute; top: 50%; width: .62em; height: .4em; translate: 0 -50%; overflow: visible; }
.whiskered .wk.l { right: 100%; margin-right: .08em; }
.whiskered .wk.r { left: 100%; margin-left: .08em; transform: scaleX(-1); }
.whiskered .draw { stroke: var(--white); stroke-width: 3.6; transition-delay: .9s; }

/* The business card: paper, a cut edge, the mark in the corner. It just
   sits there, tucked behind the poster (no flip: Lorenzo, 08-10). */
.bcard {
	position: absolute; aspect-ratio: 1.75; display: grid; grid-template-rows: auto 1fr auto; align-content: start;
	padding: 10px 12px 10px; background: #f3f0ea; color: #1b1630; clip-path: var(--cut, none);
	filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .45)); line-height: 1.2;
}
.bcard .lm { position: absolute; top: 9px; right: 10px; width: 30px; --fill: var(--purple); }
.bc-co { font-family: var(--display); font-weight: var(--display-weight); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--purple); }
.bc-title { align-self: end; font-weight: 760; font-size: clamp(12px, 1.3vw, 14px); padding-bottom: 5px; margin-bottom: 5px; border-bottom: 1.5px solid var(--lilac); width: max-content; }
.bc-lines { display: grid; gap: 1px; font-size: 9.5px; font-variation-settings: 'MONO' 1; color: #3a3352; }
.bc-lines i { font-style: normal; color: var(--purple); font-weight: 700; margin-right: 6px; }

/* The meeting note: lilac paper, a push pin, written in Recursive's casual
   cut (guide 02: the casual axis is for the playful bits) */
.stray.note {
	width: var(--w); padding: 16px 12px 12px; background: var(--lilac); color: #14102a;
	font-size: 13px; line-height: 1.3; font-variation-settings: 'CASL' 1; font-weight: 500;
	box-shadow: 0 10px 22px rgba(0, 0, 0, .35); clip-path: none;
}
.stray.note b { display: block; font-size: 17px; font-weight: 800; }
.stray.note .pin { position: absolute; top: -9px; left: 50%; width: 22px; height: 22px; translate: -50% 0; }

/* A paperclip holding the newest release to the page */
.newest .poster { position: relative; }
.clip { position: absolute; z-index: 3; top: -18px; left: 22%; width: 18px; height: 42px; rotate: -8deg; overflow: visible; pointer-events: none; }
.clip path { fill: none; stroke: #d9d5e8; stroke-width: 2.4; stroke-linecap: round; }

/* ---- Line-up as an agenda (replaces the two-column list, which zigzagged:
   15:00 left, 15:45 right, 17:00 back left). One column, top to bottom,
   each act with its slot and its length. ---- */
.agenda-grid { display: grid; gap: var(--space-l); }
.agenda-head .heading { margin-bottom: var(--space-s); white-space: nowrap; }
/* The heading shares a row with the agenda on desktop: sized so LINE-UP
   stays one word (at full size it broke into LINE- / UP) */
@media (min-width: 900px) { .agenda-head .heading { font-size: clamp(44px, 6vw, 92px); } }
.agenda-head .meta { margin: 0; color: color-mix(in srgb, var(--white) 85%, transparent); }
.agenda { margin: 0; padding: 0; list-style: none; display: grid; gap: clamp(18px, 2.4vw, 28px); }
.agenda li { display: grid; grid-template-columns: 5.4em minmax(0, 1fr); column-gap: var(--space-m); align-items: start; }
.agenda .slot { display: grid; padding-top: .35em; font-variation-settings: 'MONO' 1; line-height: 1.2; }
.agenda time { font-size: clamp(16px, 1.6vw, 19px); font-weight: 700; color: var(--white); }
.agenda .till { font-size: 13px; color: color-mix(in srgb, var(--white) 70%, transparent); }
.agenda .till::before { content: 'to '; }
.agenda .act { display: grid; gap: 2px; }
.agenda b { font-family: var(--display); font-weight: var(--display-weight); font-size: clamp(26px, 4.6vw, 52px); line-height: 1; }
.agenda small { font-size: 13px; color: color-mix(in srgb, var(--white) 85%, transparent); }
/* The break reads as a break: smaller, leaning */
.agenda li:nth-child(5) b { font-size: clamp(20px, 2.6vw, 30px); rotate: -2deg; display: inline-block; width: max-content; }
@media (min-width: 900px) {
	.agenda-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); align-items: start; }
}

/* ---- One business card, tucked behind the pinned poster ---- */
.poster-wrap { position: relative; justify-self: end; width: min(78%, 360px); margin-right: 4%; }
.poster-wrap .hero-poster { width: 100%; margin: 0; position: relative; z-index: 2; }
@media (min-width: 900px) {
	.poster-wrap { width: min(100%, 440px); justify-self: center; margin: 0; }
}
/* Desktop: beside the poster's lower left, just its right edge tucked under */
.poster-wrap .bcard { position: absolute; z-index: 1; left: -38%; top: auto; bottom: 12%; width: clamp(150px, 15vw, 180px); rotate: calc(var(--seed, 0) * 4deg - 10deg); }
/* Phone: there's no room beside the poster, so it sticks up from behind its
   top edge, as if wedged in the frame (it hung off the screen before) */
@media (max-width: 899px) {
	.poster-wrap .bcard { left: 2%; bottom: auto; top: -13%; width: 150px; rotate: -9deg; }
}
.pin { position: absolute; z-index: 4; top: -10px; left: 50%; width: 24px; height: 24px; translate: -50% 0; overflow: visible; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .5)); }

/* ---- The office kit, placed per section, phone first ---- */
/* Marker loop round one word (guide 06, "circled") */
.circled { position: relative; display: inline-block; color: var(--white); }
.circled svg { position: absolute; left: -16%; top: -38%; width: 132%; height: 176%; overflow: visible; pointer-events: none; }
.circled .draw { stroke-width: 2.2; transition-delay: 1.4s; }

/* Meeting note */
/* Phone: pinned bottom right, in room the line-up makes for it */
.k-note { --w: 116px; --xr: 5%; --y: auto; --yb: 22px; --r: 5deg; }
@media (max-width: 899px) { .room-purple { padding-bottom: 156px; } }
.stray.note .pin { top: -12px; }
@media (min-width: 900px) { .k-note { --w: 132px; --xr: auto; --x: max(24px, calc((100% - 1240px) / 2 + 24px)); --y: auto; --yb: 14%; --r: -4deg; } }

/* APPROVED: a rubber stamp in lilac ink, thunked down (tfc.js data-pop) */
.stamp-ink {
	width: auto; padding: 4px 10px; border: 3px solid var(--lilac); color: var(--lilac);
	font-family: var(--display); font-weight: var(--display-weight); font-size: 20px; letter-spacing: .06em; text-transform: uppercase;
}
/* Stamped on the heading's own line, right of LINE-UP, where nothing else sits */
.agenda-head { overflow-x: visible; }
.k-stamp { --xr: 0; --y: 4px; --r: -9deg; }
@media (min-width: 900px) { .k-stamp { --xr: auto; --x: 8px; --y: auto; --yb: -76px; --r: -12deg; font-size: 26px; } }

/* A chart going up, drawn in */
.k-chart { --w: 92px; --xr: 4%; --y: calc(var(--space-xl) - 4px); --r: -4deg; }
.k-chart .draw { stroke-width: 3; }
@media (min-width: 900px) { .k-chart { --w: 140px; --xr: max(32px, calc((100% - 1240px) / 2 + 40px)); } }

/* Masking tape holding the aftermovie to the wall */
.taped { position: relative; }
.tape { position: absolute; z-index: 3; width: 92px; height: 26px; background: color-mix(in srgb, #e8e2cf 82%, transparent); box-shadow: 0 2px 6px rgba(0, 0, 0, .25); }
.tape.t1 { top: -10px; left: -18px; rotate: -32deg; }
.tape.t2 { top: -10px; right: -18px; rotate: 28deg; }

/* A coffee ring by the radio show */
.k-ring { --w: 120px; --xr: -20px; --y: 38%; }
@media (min-width: 900px) { .k-ring { --w: 160px; --xr: auto; --x: 44%; --y: auto; --yb: 8%; } }

/* Past posters, pinned to the wall */
.past .poster .pin { top: -8px; }

/* HELLO my name is */
.k-hello {
	--w: 128px; --xr: 4%; --y: -18px; --r: 7deg;
	display: grid; text-align: center; background: var(--white); color: #14102a; overflow: hidden;
	box-shadow: 0 8px 18px rgba(0, 0, 0, .4); clip-path: var(--cut, none);
}
.k-hello b { display: block; background: var(--purple); color: var(--white); font-family: var(--display); font-weight: var(--display-weight); font-size: 22px; text-transform: uppercase; padding: 6px 0 0; }
.k-hello i { display: block; background: var(--purple); color: var(--white); font-style: normal; font-size: 10px; padding: 0 0 5px; letter-spacing: .04em; text-transform: uppercase; }
.k-hello em { display: block; padding: 10px 6px 12px; font-style: normal; font-size: 19px; font-weight: 600; font-variation-settings: 'CASL' 1; rotate: -4deg; }
/* Desktop: right of the newsletter field, which is up to 760px wide */
@media (min-width: 900px) { .k-hello { --w: 150px; --xr: auto; --x: max(64%, calc((100% - 1240px) / 2 + 820px)); --y: 30%; } }

/* Out of office, hanging on a string */
.k-ooo { --w: 150px; --xr: 5%; --y: 28px; --r: 4deg; display: grid; gap: 2px; padding: 10px 12px 12px; background: var(--deep); color: var(--white); text-align: center; transform-origin: 50% -26px; }
.k-ooo .string { position: absolute; left: 0; bottom: 100%; width: 100%; height: 26px; }
.k-ooo b { font-family: var(--display); font-weight: var(--display-weight); font-size: 17px; text-transform: uppercase; line-height: 1; }
.k-ooo i { font-style: normal; font-size: 11px; color: var(--haze); font-variation-settings: 'MONO' 1; }
.foot .k-ooo { position: absolute; }
@media (min-width: 900px) { .k-ooo { --w: 190px; --xr: 12%; --y: 22%; } .k-ooo b { font-size: 22px; } }