/*
Theme Name: Julian Kavla
Theme URI: https://juliankavla.com
Author: Redwood Group
Description: Julian Kavla — audio fiction. Black water. Hand-coded, deployed via git.
Version: 0.9.11
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: juliankavla
*/

:root {
	color-scheme: dark;

	--void:      #030203;   /* the base layer — black, everywhere */
	--void-2:    #080709;
	--line:      #16141a;

	--ink:       #d7d1db;
	--ink-dim:   #746c80;
	--ink-faint: #3d3746;

	--violet:      #2a1540;
	--violet-lift: #43265f;
	--bordeaux:    #4a0e1c;   /* one place only: the drop's core */

	--display: "Hoefler Text", "Palatino Linotype", Palatino, "Book Antiqua", "URW Palladio L", Georgia, serif;
	--text:    Georgia, "Times New Roman", serif;
	--label:   ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	--measure: 34rem;
	--gutter:  clamp(1.5rem, 7vw, 7rem);
	--section: clamp(9rem, 34vh, 22rem);

	--grain: 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='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");

	--depth: 0;   /* 0 at the surface, 1 in the deep — set by main.js on scroll */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
	margin: 0;
	background: var(--void);
	color: var(--ink);
	font-family: var(--text);
	font-size: clamp(1rem, 0.94rem + 0.3vw, 1.12rem);
	line-height: 1.8;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

body::after {
	content: "";
	position: fixed;
	inset: 0;
	background-image: var(--grain);
	opacity: 0.03;
	mix-blend-mode: overlay;
	pointer-events: none;
	z-index: 9999;
}

img { max-width: 100%; height: auto; display: block; }

a {
	color: var(--ink);
	text-decoration: none;
	border-bottom: 1px solid var(--ink-faint);
	transition: border-color .6s ease, color .6s ease;
}
a:hover { border-color: var(--ink-dim); color: #fff; }
a.jk-cell { border-bottom: 0; }

::selection { background: var(--violet-lift); color: #fff; }
:focus-visible { outline: 1px solid var(--violet-lift); outline-offset: 4px; }

.jk-skip {
	position: absolute; left: -9999px; top: 0;
	background: var(--void-2); color: var(--ink);
	padding: .75rem 1.25rem; border: 1px solid var(--line);
	font-family: var(--label); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase;
}
.jk-skip:focus { left: 1rem; top: 1rem; z-index: 10000; }

/* ---------- the water ---------- */
.jk-deepwater {
	position: fixed;
	inset: 0;
	z-index: -2;
	overflow: hidden;
	background: #010101;
}
/* the backdrop — the sky frame (stars + JULIAN KAVLA), then the mermaid
   frame below it. Shown at its own size. main.js parallax-slides the whole
   backdrop straight up as you scroll — it only ever translates, never scales. */
.jk-backdrop {
	position: absolute;
	top: 0;
	left: 50%;
	width: min(100%, 941px);
	transform: translate(-50%, 0);
	opacity: 0;
	animation: jk-emerge 5s ease 1s forwards;
}
.jk-sky,
.jk-water {
	display: block;
	width: 100%;
	height: auto;
}
.jk-water { margin-top: 3vh; }   /* a little black where the wordmark leans on the water — not much */
/* on desktop the sea shows to the sides — fade the frame's edges into it */
@media (min-width: 701px) {
	.jk-backdrop {
		-webkit-mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%);
		        mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%);
	}
}
.jk-deepwater::after {
	content: "";
	position: absolute;
	inset: 0;
	background: #000;
	opacity: calc(var(--depth) * 0.35);
	transition: opacity .3s linear;
}
.jk-deepwater__murk {
	position: absolute;
	inset: -25%;
	background:
		radial-gradient(38% 30% at 28% 18%, rgba(67,38,95,.10), transparent 62%),
		radial-gradient(48% 40% at 76% 62%, rgba(20,12,35,.16), transparent 62%);
	filter: blur(34px);
	opacity: calc(1 - var(--depth) * 0.9);   /* the violet ambience clears as you sink */
	transition: opacity .3s linear;
}
@media (prefers-reduced-motion: no-preference) {
	.jk-deepwater__murk { animation: jk-drift 44s ease-in-out infinite alternate; }
}
@keyframes jk-drift {
	from { transform: translate3d(-2%, -1%, 0); }
	to   { transform: translate3d(3%,  2%, 0); }
}

/* ---------- hero: the drop ---------- */
.jk-hero {
	position: relative;
	min-height: 68svh;
	display: block;
	padding: 0;
	background: transparent;
}
@media (max-width: 700px) {
	.jk-hero { min-height: 52svh; }
}
.jk-topmark {
	position: absolute;
	top: clamp(1.5rem, 4.5vh, 3.25rem);
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	font-family: var(--display);
	font-size: clamp(1rem, .7rem + 1.7vw, 1.5rem);
	letter-spacing: .38em;
	text-indent: .38em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--ink-faint);
	opacity: 0;
	animation: jk-emerge-dim 5s ease 1s forwards;
}
@keyframes jk-emerge-dim { from { opacity: 0; } to { opacity: .62; } }
.jk-hero__wordmark {
	font-family: var(--display);
	font-weight: 400;
	font-size: clamp(1.6rem, 1rem + 4vw, 3.4rem);
	letter-spacing: .32em;
	text-indent: .32em;
	line-height: 1.2;
	margin: 0;
	color: var(--ink);
	opacity: 0;
	animation: jk-emerge 5s ease 1s forwards;
}
@keyframes jk-emerge { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
	.jk-hero__drop, .jk-hero__wordmark, .jk-topmark {
		animation-duration: 1.2s;
		animation-delay: 0s;
	}
	[data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ---------- the descent (scroll room so the sink stays slow) ---------- */
.jk-descent { height: 64vh; }
@media (max-width: 700px) {
	.jk-descent { height: 32vh; }
}

/* ---------- underwater: the nine (you arrive here already under the surface) ---------- */
.jk-under {
	position: relative;
	z-index: 1;
	padding: 4vh var(--gutter) 14vh;
}

/* ---------- the abyss (a little black between the water and Room 23) ---------- */
.jk-abyss { height: 9vh; position: relative; z-index: 0; }
@media (max-width: 700px) {
	.jk-abyss { height: 6vh; }
}
.jk-under__intro {
	max-width: 32rem;
	margin: 0 auto clamp(3rem, 8vw, 5rem);
	text-align: center;
}
.jk-under__intro .jk-cta-sub { margin-bottom: 0; }
.jk-grid {
	max-width: 44rem;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(.35rem, 1.4vw, 1rem);
}
.jk-cell {
	aspect-ratio: 1;
	border: 1px solid var(--line);
	background: rgba(255,255,255,.012) var(--img, none) center / cover no-repeat;
	position: relative;
	overflow: hidden;
	transition: border-color .6s ease;
}
a.jk-cell:hover { border-color: var(--ink-faint); }
.jk-cell__t {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	padding: .75rem;
	font-family: var(--label);
	font-size: .52rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--ink-dim);
	background: linear-gradient(transparent, rgba(0,0,0,.88));
}

/* ---------- the deep: Room 23 (its own door photo; it rises over the water) ---------- */
.jk-deep {
	min-height: 100svh;
	display: grid;
	place-items: center;
	text-align: center;
	padding: var(--section) var(--gutter);
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: #000;
}
.jk-deep__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 24%;
	transform: scale(1.2);
	transform-origin: 0% 38%;   /* mirror of the old 100% — new photo shifts the same length right */
	z-index: -2;
	opacity: 1;
}
.jk-deep::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: radial-gradient(80% 68% at 50% 50%, rgba(0,0,0,.22) 0%, rgba(0,0,0,.68) 100%);
}
@media (max-width: 640px) {
	.jk-deep__bg { object-position: 30% 12%; transform: scale(1.05); transform-origin: 0% 22%; }
}
.jk-deep .jk-wrap {
	max-width: 30rem;
	margin: 0 auto;
	padding: clamp(2.5rem, 7vw, 4.5rem);
	background: radial-gradient(65% 62% at 50% 50%, rgba(3,2,3,.66) 0%, rgba(3,2,3,.4) 68%, transparent 100%);
}

[data-reveal] {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 1.6s ease, transform 1.6s ease;
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- age gate ---------- */
.jk-gate { display: none; }
.jk-locked { overflow: hidden; }
.jk-locked body { overflow: hidden; }
.jk-locked .jk-gate {
	display: flex;
	position: fixed;
	inset: 0;
	z-index: 10001;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: var(--gutter);
	background: var(--void);
}
.jk-gate__mark {
	font-family: var(--display);
	font-size: clamp(.82rem, .7rem + .5vw, 1rem);
	letter-spacing: .42em;
	text-indent: .42em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--ink-dim);
	margin-bottom: 3.75rem;
}
.jk-gate__title {
	font-family: var(--display);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(1.2rem, 1.05rem + 1vw, 1.75rem);
	line-height: 1.6;
	letter-spacing: .005em;
	margin: 0 0 3.25rem;
	max-width: 22ch;
	color: var(--ink);
}
.jk-gate__actions { display: flex; gap: 3rem; align-items: center; }
.jk-gate__fine {
	margin: 3.25rem 0 0;
	font-family: var(--label);
	font-size: .54rem;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--ink-faint);
	max-width: 30ch;
	line-height: 2;
}

/* ---------- buttons ---------- */
.jk-btn {
	font-family: var(--label);
	font-size: .64rem;
	letter-spacing: .34em;
	text-transform: uppercase;
	color: var(--ink);
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--ink-faint);
	padding: 0 0 .55rem;
	cursor: pointer;
	transition: border-color .6s ease, color .6s ease;
}
.jk-btn:hover { border-color: var(--ink-dim); color: #fff; }
.jk-btn--ghost { border-color: transparent; color: var(--ink-faint); }
.jk-btn--ghost:hover { color: var(--ink-dim); border-color: transparent; }

.jk-cta {
	font-family: var(--label);
	font-size: .68rem;
	letter-spacing: .4em;
	text-transform: uppercase;
	color: var(--ink);
	background: transparent;
	border: 1px solid var(--ink-faint);
	padding: 1.15rem 2.6rem;
	cursor: pointer;
	transition: border-color .6s ease, color .6s ease, background .6s ease;
}
.jk-cta:hover { border-color: var(--ink-dim); color: #fff; background: rgba(255,255,255,.02); }

/* ---------- room 23 copy ---------- */
.jk-cta-label {
	font-family: var(--label);
	font-size: .6rem;
	letter-spacing: .5em;
	text-transform: uppercase;
	color: var(--ink-faint);
	margin: 0 0 1.75rem;
}
.jk-cta-sub {
	font-family: var(--display);
	font-style: italic;
	font-size: 1.05rem;
	line-height: 1.75;
	color: var(--ink-dim);
	max-width: 30rem;
	margin: 0 auto 2.75rem;
}

/* ---------- room 23 form ---------- */
.jk-form { margin: 0 auto; max-width: 26rem; display: flex; flex-direction: column; gap: 2.25rem; }
.jk-field__hint {
	display: block;
	font-family: var(--label);
	font-size: .5rem;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--ink-faint);
	text-align: center;
	margin-bottom: .65rem;
}
.jk-field input {
	width: 100%;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--ink-faint);
	color: var(--ink);
	font-family: var(--display);
	font-style: italic;
	font-size: 1.2rem;
	padding: .7rem 0;
	text-align: center;
	border-radius: 0;
	-webkit-appearance: none;
	appearance: none;
}
.jk-field input::placeholder { color: var(--ink-dim); opacity: 1; }
.jk-field input:focus { outline: none; border-color: var(--violet-lift); }
.jk-field input:-webkit-autofill { -webkit-text-fill-color: var(--ink); transition: background-color 9999s; }
.jk-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.jk-consent {
	display: flex; gap: .9rem; align-items: flex-start;
	font-family: var(--label); font-size: .64rem; line-height: 1.7;
	letter-spacing: .06em; color: var(--ink-dim);
}
.jk-consent input { margin-top: .2rem; accent-color: var(--violet-lift); flex: 0 0 auto; }
.jk-form__submit { align-self: center; }
.jk-count {
	font-family: var(--label); font-size: .6rem; letter-spacing: .3em;
	text-transform: uppercase; color: var(--ink-faint); margin: 2.5rem 0 0;
}
.jk-note {
	font-family: var(--display); font-style: italic; color: var(--ink);
	font-size: 1.1rem; margin: 1.5rem 0 0;
}

/* ---------- footer ---------- */
.jk-footer {
	position: relative;
	border-top: 1px solid var(--line);
	padding: 4rem var(--gutter) 5rem;
	text-align: center;
	color: var(--ink-faint);
	background: var(--void);
}
.jk-footer__line {
	font-family: var(--label); font-size: .56rem; letter-spacing: .22em;
	text-transform: uppercase; margin: 0;
}
.jk-footer__line a { border: 0; color: inherit; }
.jk-footer__line a:hover { color: var(--ink-dim); }

/* ---------- Room 23: signed-in ---------- */
.jk-noscroll { overflow: hidden; }
.jk-room-live { margin-top: 1.5rem; }
.jk-room-controls { display: flex; gap: 2rem; justify-content: center; margin-top: 1.75rem; }
.jk-mini {
	font-family: var(--label); font-size: .58rem; letter-spacing: .28em; text-transform: uppercase;
	color: var(--ink-faint); background: transparent; border: 0; border-bottom: 1px solid var(--ink-faint);
	padding: 0 0 .45rem; cursor: pointer; transition: color .5s ease, border-color .5s ease;
}
.jk-mini:hover { color: var(--ink-dim); border-color: var(--ink-dim); }
.jk-mini:disabled { opacity: .4; cursor: default; }

/* ---------- a filled library tile ---------- */
button.jk-cell { cursor: pointer; padding: 0; }
.jk-cell--filled { background-color: var(--void-2); }

/* ---------- piece overlay ---------- */
.jk-piece {
	position: fixed; inset: 0; z-index: 10002;
	display: none; align-items: flex-start; justify-content: center;
	padding: clamp(1rem, 6vh, 5rem) var(--gutter);
	background: rgba(2, 1, 3, .86);
	overflow-y: auto;
}
.jk-piece.is-open { display: flex; }
.jk-piece__box {
	position: relative;
	width: 100%; max-width: 34rem;
	background: var(--void);
	border: 1px solid var(--void-line, var(--line));
	padding: clamp(2rem, 6vw, 3.5rem);
}
.jk-piece__x {
	position: absolute; top: .75rem; right: 1rem;
	background: transparent; border: 0; color: var(--ink-faint);
	font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.jk-piece__x:hover { color: var(--ink); }
.jk-piece__t { font-family: var(--display); font-weight: 400; font-size: 1.5rem; margin: 0 0 .5rem; color: var(--ink); }
.jk-piece__b { font-family: var(--display); font-style: italic; color: var(--ink-dim); margin: 0 0 1.5rem; }
.jk-piece__audio { width: 100%; margin: .5rem 0 1.75rem; }
.jk-piece__hint {
	font-family: var(--label); font-size: .58rem; letter-spacing: .18em; text-transform: uppercase;
	color: var(--ink-faint); margin: .75rem 0 0;
}

/* stars */
.jk-stars { padding: 1.5rem 0; border-top: 1px solid var(--line); }
.jk-stars__row { display: flex; gap: .4rem; }
.jk-star {
	background: transparent; border: 0; cursor: pointer; padding: 0;
	font-size: 1.35rem; line-height: 1; color: var(--ink-faint);
	transition: color .3s ease;
}
.jk-star.on { color: var(--bordeaux-lift, #7d1b31); }
.jk-star:disabled { cursor: default; }
.jk-stars__avg {
	display: block; margin-top: .6rem;
	font-family: var(--label); font-size: .58rem; letter-spacing: .22em; text-transform: uppercase;
	color: var(--ink-faint);
}

/* comments */
.jk-comments { padding-top: 1.5rem; border-top: 1px solid var(--line); }
.jk-comment { padding: 1rem 0; border-bottom: 1px solid var(--line); }
.jk-comment__who {
	font-family: var(--label); font-size: .55rem; letter-spacing: .24em; text-transform: uppercase;
	color: var(--ink-faint);
}
.jk-comment__body { font-family: var(--text); color: var(--ink-dim); margin: .35rem 0 0; font-size: .98rem; }
.jk-comments__form { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.jk-comments__form textarea {
	width: 100%; min-height: 4.5rem; resize: vertical;
	background: transparent; border: 1px solid var(--ink-faint); color: var(--ink);
	font-family: var(--text); font-size: .98rem; padding: .75rem; line-height: 1.6;
}
.jk-comments__form textarea:focus { outline: none; border-color: var(--violet-lift); }
.jk-comments__form .jk-mini { align-self: flex-start; }

/* inline "leave a name + email" */
.jk-join { display: flex; flex-direction: column; gap: .9rem; margin-top: .9rem; }
.jk-join input {
	background: transparent; border: 0; border-bottom: 1px solid var(--ink-faint);
	color: var(--ink); font-family: var(--display); font-style: italic; font-size: 1rem;
	padding: .5rem 0;
}
.jk-join input::placeholder { color: var(--ink-faint); }
.jk-join input:focus { outline: none; border-color: var(--violet-lift); }
.jk-join .jk-mini { align-self: flex-start; margin-top: .25rem; }

/* ---------- plain (index/single) ---------- */
.jk-plain { padding: var(--section) 0; position: relative; }
.jk-plain .jk-wrap { max-width: var(--measure); margin: 0 auto; padding: 0 var(--gutter); }
.jk-plain h1 { font-family: var(--display); font-weight: 400; }

/* ========================================================================
   Room 23 — the scripts
   A dark aubergine-leather room, the "23" tooled into it; one purple-black
   slab holds the script; the Sirens' lines sit in a soft lilac hand.
   Several scripts -> black-and-white marble tiles, titles in lipstick.
   ======================================================================== */
.jk-room {
	--jk-ink:        #ece5d6;   /* warm ivory */
	--jk-ink-dim:    #a99ebc;   /* violet-grey */
	--jk-ink-faint:  #6a5f7e;   /* faint violet */
	--jk-edit:       #cdbcde;   /* soft lilac — another hand */
	--jk-edit-faint: #857595;
	--jk-accent:     #c495e0;   /* orchid — the one lift */
	--jk-hair:       rgba(236, 229, 214, .13);
	--jk-lipstick:   #c31530;

	--jk-display: "Bodoni Moda", "Didot", "Playfair Display", Georgia, serif;
	--jk-book:    "Newsreader", Georgia, "Times New Roman", serif;
	--jk-hand:    "Kolker Brush", "Brush Script MT", "Segoe Script", cursive;

	--jk-leather: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='440' height='440'%3E%3Cfilter id='L'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.037' numOctaves='4' seed='12' result='n'/%3E%3CfeDiffuseLighting in='n' lighting-color='%23b7a6ad' surfaceScale='3.4' diffuseConstant='1.05' result='d'%3E%3CfeDistantLight azimuth='235' elevation='48'/%3E%3C/feDiffuseLighting%3E%3CfeColorMatrix in='d' type='matrix' values='0.26 0 0 0 0 0 0.22 0 0 0 0 0 0.28 0 0 0 0 0 0 0.7'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23L)'/%3E%3C/svg%3E");
	--jk-leather-mottle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='760' height='760'%3E%3Cfilter id='M'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0065' numOctaves='3' seed='5'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.16 0 0 0 0 0.12 0 0 0 0 0.16 0 0 0 0.2 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23M)'/%3E%3C/svg%3E");
	--jk-marble: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640'%3E%3Cfilter id='v'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.004 0.021' numOctaves='4' seed='6' result='t'/%3E%3CfeColorMatrix in='t' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.3 0 0 0 -0.12' result='a'/%3E%3CfeComponentTransfer in='a'%3E%3CfeFuncA type='table' tableValues='0 0 0 0 0 0.85 0.12 0 0 0 0'/%3E%3C/feComponentTransfer%3E%3CfeGaussianBlur stdDeviation='0.7'/%3E%3C/filter%3E%3Cfilter id='h'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.003 0.014' numOctaves='3' seed='23' result='t'/%3E%3CfeColorMatrix in='t' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.3 0 0 0 -0.18'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 0 0 0 0 0 0.6 0 0 0 0'/%3E%3C/feComponentTransfer%3E%3CfeGaussianBlur stdDeviation='1.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' fill='%23f7f5f1'/%3E%3Crect width='100%25' height='100%25' fill='%237c7784' filter='url(%23h)' opacity='0.4'/%3E%3Crect width='100%25' height='100%25' fill='%2334303c' filter='url(%23v)' opacity='0.5'/%3E%3C/svg%3E");

	position: relative;
	min-height: 100vh;
	color: var(--jk-ink);
	font-family: var(--jk-book);
}

.jk-room__bg {   /* a deep, dark leather seat */
	position: fixed; inset: 0; z-index: -2;
	background-color: #100a0d;
	background-image:
		radial-gradient(140% 100% at 34% 6%, rgba(150, 128, 140, .07), rgba(150, 128, 140, 0) 50%),
		radial-gradient(115% 95% at 82% 112%, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0) 55%),
		var(--jk-leather-mottle),
		var(--jk-leather),
		linear-gradient(158deg, #1a1015 0%, #120b10 55%, #070509 100%);
	background-size: auto, auto, 960px 960px, 400px 400px, auto;
	background-repeat: no-repeat, no-repeat, repeat, repeat, no-repeat;
	background-blend-mode: normal, normal, soft-light, overlay, normal;
}
.jk-room__bg::after {   /* the edges of the seat fall into shadow */
	content: ""; position: absolute; inset: 0;
	background: radial-gradient(120% 84% at 50% 34%, transparent 40%, rgba(0, 0, 0, .68) 100%);
}

.jk-room__num {   /* pressed into the leather */
	position: fixed; left: 50%; top: 45%; transform: translate(-50%, -50%);
	z-index: -1;
	font-family: var(--jk-display); font-weight: 600;
	font-size: 46vmin; line-height: 1; letter-spacing: .015em;
	color: #150d0c;
	text-shadow:
		0 4px 3px rgba(0, 0, 0, .55),
		0 1px 0 rgba(0, 0, 0, .6),
		0 -1px 1px rgba(170, 140, 150, .12);
	opacity: .95; user-select: none; pointer-events: none;
}
.jk-room__plaque {
	position: fixed; top: 1rem; left: 1.1rem; z-index: 1;
	font-family: var(--label);
	font-size: .56rem; letter-spacing: .38em; text-transform: uppercase;
	color: rgba(236, 229, 214, .2);
}
.jk-room__main {
	min-height: 100vh; display: flex; flex-direction: column; align-items: center;
	padding: clamp(3rem, 11vh, 7.5rem) 1.1rem 6rem;
}

.jk-slab {
	width: min(34rem, 100%);
	background: linear-gradient(155deg, #171020 0%, #0c0814 100%);
	border: 1px solid rgba(198, 170, 232, .08);
	padding: clamp(2.75rem, 7vw, 4.25rem) clamp(1.8rem, 6vw, 3.5rem) clamp(2.4rem, 6vw, 3.25rem);
	box-shadow:
		0 3rem 7rem rgba(0, 0, 0, .75),
		0 .75rem 2rem rgba(0, 0, 0, .5),
		inset 0 1px 0 rgba(206, 178, 238, .12),
		inset 0 0 3rem rgba(120, 70, 160, .06);
}

.jk-kicker {
	text-align: center; font-family: var(--jk-display); font-weight: 600;
	font-size: .54rem; letter-spacing: .36em; text-transform: uppercase;
	color: var(--jk-accent); opacity: .8; margin: 0 0 .9rem;
}
.jk-back { color: var(--jk-ink-faint); text-decoration: none; }
.jk-back:hover { color: var(--jk-edit); }

.jk-runhead {
	text-align: center; font-family: var(--jk-display); font-weight: 600;
	font-size: .66rem; letter-spacing: .44em; text-transform: uppercase;
	color: var(--jk-ink-faint);
	margin: 0 0 2.9rem; padding-bottom: 1.15rem; border-bottom: 1px solid var(--jk-hair);
}

.jk-script { font-size: 1.09rem; line-height: 1.85; }
.jk-ln { margin: 0 0 1.05rem; }

.jk-mark {
	appearance: none; -webkit-appearance: none; background: none; border: 0; cursor: pointer;
	font-family: var(--jk-display); font-weight: 600;
	font-size: .6rem; letter-spacing: .08em; line-height: 1;
	color: var(--jk-ink-faint); margin-left: .5rem; padding: .1rem .2rem;
	vertical-align: .09em; opacity: 0;
	transition: opacity .14s ease, color .14s ease;
}
.jk-ln:hover .jk-mark,
.jk-mark:focus-visible { opacity: 1; }
.jk-mark.has { opacity: 1; color: var(--jk-edit); }
.jk-mark.mine { color: var(--jk-accent); }
.jk-mark[aria-expanded="true"] { opacity: 1; color: var(--jk-edit); }
.jk-mark .c { margin-left: .3rem; }
@media (hover: none) {
	.jk-mark { opacity: .28; }
	.jk-mark.has { opacity: 1; }
}

.jk-sugg {
	margin: .7rem 0 1.5rem 1.35rem;
	padding-left: 1.3rem;
	border-left: 1px solid var(--jk-hair);
}
.jk-notes { margin: 0; padding: 0; display: flex; flex-direction: column; gap: .95rem; }
.jk-note {
	font-family: var(--jk-book); font-style: italic; font-weight: 300;
	color: var(--jk-edit-faint); font-size: 1rem; line-height: 1.55; margin: 0;
}
.jk-note.lead { color: var(--jk-edit); }
.jk-note .who {
	font-style: normal; font-family: var(--jk-display);
	font-size: .56rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase;
	color: var(--jk-edit-faint); margin-left: .6rem;
}
.jk-hold {
	font-family: var(--jk-display); font-weight: 600; font-style: normal;
	font-size: .56rem; letter-spacing: .22em; text-transform: uppercase;
	color: var(--jk-edit-faint); background: none; border: 0;
	padding: 0 .15rem; margin-left: .55rem; cursor: pointer; white-space: nowrap;
	transition: color .15s ease;
}
.jk-hold:hover { color: var(--jk-edit); }
.jk-hold.on { color: var(--jk-accent); }
.jk-hold:focus-visible { outline: 1px solid var(--jk-edit-faint); outline-offset: 3px; }

.jk-add { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.jk-add input {
	flex: 1 1 8rem; min-width: 0;
	background: none; border: 0; border-bottom: 1px solid var(--jk-hair);
	font-family: var(--jk-book); font-style: italic; font-weight: 300;
	font-size: 1rem; color: var(--jk-edit); padding: .2rem 0;
}
.jk-add input::placeholder { color: var(--jk-edit-faint); }
.jk-add input:focus { outline: 0; border-bottom-color: var(--jk-edit-faint); }
.jk-add button {
	background: none; border: 0; cursor: pointer;
	color: var(--jk-edit-faint); font-size: .9rem; padding: 0 .2rem;
}
.jk-add button:hover { color: var(--jk-edit); }

.jk-brk { display: flex; align-items: center; gap: 1.1rem; margin: 2.5rem 0; }
.jk-brk::before, .jk-brk::after { content: ""; flex: 1; height: 1px; background: var(--jk-hair); }
.jk-brk span {
	font-family: var(--jk-display); font-weight: 400;
	color: var(--jk-ink-faint); font-size: .95rem; line-height: 1;
}

.jk-pageno {
	text-align: center; margin: 3.25rem 0 0;
	font-family: var(--jk-display); font-weight: 600;
	font-size: .7rem; letter-spacing: .3em; color: var(--jk-ink-faint);
}

.jk-empty { text-align: center; color: var(--jk-ink-dim); font-style: italic; }

.jk-shelf { width: min(46rem, 100%); }
.jk-shelf__k { margin-bottom: 2.25rem; text-align: center; }
.jk-shelf__list {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
	gap: 2rem;
}
.jk-shelf__list li { margin: 0; }
.jk-shelf__list a {
	display: grid; place-items: center;
	aspect-ratio: 1; padding: 1.4rem; text-align: center;
	text-decoration: none; text-transform: none; letter-spacing: 0;
	font-family: var(--jk-hand);
	font-size: clamp(2.1rem, 1.3rem + 3.4vw, 3rem);
	line-height: 1;
	color: var(--jk-lipstick);
	text-shadow: 0 1px 1px rgba(110, 6, 22, .35), 0 0 6px rgba(180, 20, 45, .12);
	background: var(--jk-marble) center / cover, #f6f4ef;
	box-shadow:
		inset 0 0 0 1px rgba(0, 0, 0, .22),
		inset 0 1px 0 rgba(255, 255, 255, .55),
		0 1.75rem 3rem rgba(0, 0, 0, .58);
	transition: transform .18s ease, box-shadow .18s ease;
}
.jk-shelf__list a:hover {
	transform: translateY(-3px);
	box-shadow:
		inset 0 0 0 1px rgba(0, 0, 0, .22),
		inset 0 1px 0 rgba(255, 255, 255, .55),
		0 2.25rem 3.5rem rgba(0, 0, 0, .64);
}