/* ==========================================================================
   P-VERSE — the house at night
   Concepto P's register (Loewe, Tamburins: quiet luxury, few gestures, done
   precisely), set on black. One void, one bone ink, lacquer for the display
   words. Same faces, same scale, same three curves.
   ========================================================================== */

@font-face{
	font-family:"CP Catalogue";
	src:url("../fonts/cp-catalogue.woff2") format("woff2");
	font-weight:400 600; font-style:normal; font-display:swap;
}
@font-face{
	font-family:"CP Catalogue SC";
	src:url("../fonts/cp-catalogue-sc.woff2") format("woff2");
	font-weight:400 700; font-style:normal; font-display:swap;
	size-adjust:112%;
}

:root{
	color-scheme:dark;
	font-synthesis:none;

	/* the night */
	--void:#000000; --char:#0B0B0B; --graphite:#161616;
	--bone:#E9E6DF; --silver:#A3A29E; --smoke:#6F6F6C;
	--fg:var(--bone); --fg2:var(--silver); --fg3:rgba(233,230,223,.42); --rule:rgba(233,230,223,.14);

	/* faces */
	--display:'Instrument Serif','Bodoni Moda',Didot,'Bodoni 72',Georgia,serif;
	--serif:'Bodoni Moda','Bodoni 72',Didot,Georgia,serif;
	--num:'CP Catalogue','EB Garamond',Garamond,'Times New Roman',serif;
	--mono:'CP Catalogue SC','Times New Roman',serif;

	/* one scale, 6:5 */
	--t-hero:   clamp(75.5px, 31.96px + 11.155vw, 246px);
	--t-display:clamp(60px, 32.61px + 7.023vw, 167.5px);
	--t-title:  clamp(33.8px, 26.42px + 1.898vw, 62.9px);
	--t-sub:    clamp(21.4px, 19.7px + .432vw, 25.9px);
	--t-label:  clamp(11px, .3vw + 8px, 12px);
	--t-label-s:clamp(12px, 11.63px + .095vw, 12.5px);
	--t-num-l:  clamp(24px, 21.33px + .679vw, 34.4px);
	--t-lead:   clamp(19.1px, 18.12px + .241vw, 21.6px);
	--t-body:   clamp(17px, 16.63px + .095vw, 18px);
	--t-note:   15px;

	/* motion: nothing bounces, springs or overshoots */
	--settle:cubic-bezier(.18,.8,.24,1);
	--breath:cubic-bezier(.55,0,.25,1);
	--touch:.2s; --slow:.46s; --slower:.8s; --slowest:1.2s;

	/* space */
	--margin:clamp(16px, 5.5vw, 96px);
	--nav-h:calc(clamp(52px, 8vw, 72px) + env(safe-area-inset-top, 0px));
}

*, *::before, *::after{ margin:0; padding:0; box-sizing:border-box; }
html{ background:var(--void); -webkit-tap-highlight-color:transparent; scroll-behavior:smooth; }
body{
	background:var(--void); color:var(--fg);
	font-family:var(--serif); font-size:var(--t-body); line-height:1.58;
	-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
	min-height:100vh; overflow-x:hidden;
}
::selection{ background:rgba(233,230,223,.86); color:var(--void); }
a{ color:inherit; text-decoration:none; }
a:focus-visible, button:focus-visible, input:focus-visible{ outline:none; color:var(--fg); }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
.pv-defs{ position:absolute; width:0; height:0; overflow:hidden; }

/* ---- the voices ---- */
.t-hero, .t-display, .t-title, .t-sub, .t-label{
	font-family:var(--display); font-weight:400; font-style:normal; text-wrap:balance;
}
.t-hero{    font-size:var(--t-hero);    line-height:.92; letter-spacing:-.025em; filter:url(#pv-lacquer); }
.t-display{ font-size:var(--t-display); line-height:.96; letter-spacing:-.02em;  filter:url(#pv-lacquer); }
.t-title{   font-size:var(--t-title);   line-height:1.04; letter-spacing:-.015em; filter:url(#pv-lacquer-s); }
.t-sub{     font-size:var(--t-sub);     line-height:1.15; letter-spacing:-.005em; }
.t-label{   font-size:var(--t-label);   line-height:1.3; letter-spacing:.16em; text-transform:uppercase; }
.t-label-s{
	font-family:var(--mono); font-size:var(--t-label-s); line-height:1.4; letter-spacing:.09em;
	font-variant-numeric:lining-nums proportional-nums; color:var(--fg2);
}
.t-num-l{ font-family:var(--num); font-size:var(--t-num-l); line-height:1; font-variant-numeric:lining-nums proportional-nums; }
.t-num{ font-family:var(--num); font-variant-numeric:oldstyle-nums proportional-nums; }
.t-lead, .t-body, .t-note{ font-family:var(--serif); text-wrap:pretty; font-variant-numeric:oldstyle-nums proportional-nums; }
.t-lead{ font-size:var(--t-lead); line-height:1.45; }
.t-body{ font-size:var(--t-body); line-height:1.58; }
.t-note{ font-size:var(--t-note); line-height:1.5; color:var(--fg2); }
.t-kicker{ font-family:var(--serif); font-style:italic; font-size:clamp(17px, 1.5vw, 22px); color:var(--fg2); }
@media (max-width:759px){ .t-label{ letter-spacing:.06em; } }

/* ---- the letterhead ---- */
#nav{
	position:fixed; inset:0 0 auto 0; z-index:10; height:var(--nav-h);
	padding:env(safe-area-inset-top, 0px) var(--margin) 0;
	display:flex; align-items:center; justify-content:space-between;
	background:linear-gradient(var(--void) 40%, transparent);
}
.nav-rooms{ display:flex; gap:clamp(18px, 2.4vw, 36px); }
#nav a{ color:var(--fg2); transition:color var(--touch) var(--settle); }
#nav a:hover, #nav a.is-here, #nav .nav-mark{ color:var(--fg); }
#nav .is-later{ color:var(--fg3); cursor:default; }

/* ---- a room ---- */
#app{ outline:none; }
.room{ padding:calc(var(--nav-h) + clamp(48px, 10vh, 140px)) var(--margin) clamp(80px, 16vh, 200px); max-width:1680px; margin:0 auto; }
.room-head{ margin-bottom:clamp(56px, 10vh, 128px); }
.room-head .t-kicker{ display:block; margin-bottom:.6em; }
.room-head .t-display{ margin-bottom:.2em; }
.measure{ max-width:34em; }
.rule{ height:1px; background:var(--rule); border:0; }
.section{ margin-top:clamp(72px, 14vh, 180px); }
.section-head{ display:flex; align-items:baseline; gap:1.2em; margin-bottom:clamp(24px, 4vh, 48px); }
.section-head .t-label-s{ flex:none; }

/* ---- home ---- */
.home-hero{ min-height:calc(100svh - var(--nav-h) - clamp(48px, 10vh, 140px)); display:flex; flex-direction:column; justify-content:flex-end; padding-bottom:clamp(32px, 8vh, 96px); }
.home-hero .t-hero{ margin:.08em 0 .22em -.04em; }
.home-hero .t-lead{ max-width:28em; color:var(--fg2); }
.home-count{ margin-top:2.2em; }
.doors{ list-style:none; border-top:1px solid var(--rule); }
.door{ border-bottom:1px solid var(--rule); }
.door > a, .door > div{
	display:grid; grid-template-columns:4.5em 1fr auto; align-items:baseline; gap:1em;
	padding:clamp(20px, 3.4vh, 36px) 0;
}
.door .t-title{ transition:opacity var(--slow) var(--settle); }
.door.is-later .t-title{ opacity:.32; filter:none; color:var(--fg2); }
.door .door-what{ grid-column:2; color:var(--fg2); max-width:30em; }
.door .t-label{ color:var(--fg3); }
.door a .t-label{ color:var(--fg2); }
.door > a:hover .t-label{ color:var(--fg); }
@media (max-width:759px){
	.door > a, .door > div{ grid-template-columns:2.6em 1fr; }
	.door .t-label{ grid-column:2; }
}

.pillars{ display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(24px, 4vw, 72px); }
.pillar .t-label-s{ display:block; margin-bottom:.9em; }
.pillar .t-sub{ margin-bottom:.5em; }
@media (max-width:899px){ .pillars{ grid-template-columns:1fr; } }

.colophon{ margin-top:clamp(96px, 18vh, 220px); padding-top:24px; border-top:1px solid var(--rule); display:flex; justify-content:space-between; gap:1em; flex-wrap:wrap; }

/* ---- keeper ---- */
.ledger-intro{ color:var(--fg2); }
.filters{ display:flex; flex-wrap:wrap; gap:.4em clamp(16px, 2vw, 32px); margin-bottom:clamp(20px, 3vh, 36px); }
.filters button{ color:var(--fg3); transition:color var(--touch) var(--settle); }
.filters button:hover{ color:var(--fg2); }
.filters button.is-on{ color:var(--fg); }
.filters sup{ font-family:var(--num); letter-spacing:0; font-size:.9em; margin-left:.25em; vertical-align:.5em; text-transform:none; }
.find{
	width:100%; max-width:22em; margin-bottom:clamp(24px, 4vh, 48px);
	background:none; border:0; border-bottom:1px solid var(--rule); color:var(--fg);
	font-family:var(--serif); font-size:var(--t-body); padding:.4em 0; border-radius:0;
	transition:border-color var(--slow) var(--settle);
}
.find::placeholder{ color:var(--fg3); font-style:italic; }
.find:focus{ outline:none; border-bottom-color:var(--fg2); }

.rows{ list-style:none; border-top:1px solid var(--rule); }
.row{
	display:grid; grid-template-columns:6.5em minmax(0, 1fr) 4em 7.5em 3em; gap:1.2em; align-items:baseline;
	padding:1.05em 0; border-bottom:1px solid var(--rule);
}
.row .row-title{ font-family:var(--display); font-size:var(--t-sub); line-height:1.15; }
.row .row-by{ display:block; margin-top:.2em; }
.row .t-num{ color:var(--fg2); }
.row .row-rate{ text-align:right; font-family:var(--num); color:var(--fg); }
.row .row-concepts{ display:block; margin-top:.35em; color:var(--fg3); font-style:italic; font-size:var(--t-note); }
@media (max-width:759px){
	.row{ grid-template-columns:1fr auto; gap:.2em 1em; }
	.row .t-label-s{ grid-column:1 / -1; }
	.row .row-main{ grid-column:1; }
	.row .row-rate{ grid-column:2; grid-row:2; }
	.row .row-year, .row .row-date{ display:none; }
}
.row.is-film{ cursor:pointer; }
.row.is-film:hover .row-title{ color:var(--fg); }
.row-poster{ display:block; width:44px; aspect-ratio:2/3; object-fit:cover; margin-bottom:.6em; }
.more{ margin-top:clamp(24px, 4vh, 40px); color:var(--fg2); }
.more:hover{ color:var(--fg); }
.empty{ padding:clamp(32px, 6vh, 64px) 0; color:var(--fg2); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); }
.empty code{ font-family:var(--mono); letter-spacing:.04em; color:var(--fg); }

.concepts{ display:flex; flex-wrap:wrap; gap:.3em 1.1em; font-family:var(--display); line-height:1.25; }
.concepts span{ color:var(--fg2); }
.concepts sup{ font-family:var(--num); font-size:.42em; margin-left:.2em; color:var(--fg3); }

/* ---- cosmovision ---- */
.tl, .tl-years{ display:grid; grid-template-columns:repeat(var(--cols), minmax(0, 1fr)); column-gap:2px; }
.tl{ height:clamp(160px, 28vh, 280px); align-items:end; border-bottom:1px solid var(--rule); }
.tl-col{ height:100%; display:flex; align-items:flex-end; cursor:default; }
.tl{ overflow:visible; }
.tl-col i{ display:block; width:100%; background:var(--fg2); border-radius:4px 4px 0 0; transition:background var(--touch) var(--settle); }
.tl-col:hover i{ background:var(--fg); }
.tl-years{ margin-top:.8em; }
.tl-years span{ border-left:1px solid var(--rule); padding-left:.5em; }
.tl-note{ margin-top:1.6em; max-width:36em; }
.tip{ position:fixed; z-index:15; pointer-events:none; padding:.35em .7em; background:var(--graphite); color:var(--fg); border:1px solid var(--rule); white-space:nowrap; }
.tip-strip{ display:flex; gap:3px; margin-top:.5em; }
.tip-strip img{ width:34px; aspect-ratio:2/3; object-fit:cover; display:block; }

/* a film as a small picture */
.tile{
	position:relative; display:block; aspect-ratio:2/3; overflow:hidden; background:var(--graphite);
	transition:transform var(--slow) var(--settle), opacity var(--slow) var(--settle), box-shadow var(--slow) var(--settle);
}
.tile img{ width:100%; height:100%; object-fit:cover; display:block; }
.tile-type{
	position:absolute; inset:0; padding:12%; display:flex; flex-direction:column; justify-content:flex-end;
	font-family:var(--display); font-size:clamp(9px, .9vw, 14px); line-height:1.05; color:var(--fg2); text-align:left; overflow:hidden;
}
.tile-type em{ font-family:var(--num); font-style:normal; color:var(--fg3); margin-top:.3em; font-size:.85em; }
.tile.is-loved::after{ content:""; position:absolute; top:6%; right:8%; width:5px; height:5px; border-radius:50%; background:var(--bone); box-shadow:0 0 0 2px rgba(0,0,0,.5); }

/* the wall: every film at once */
.wall-progress{ margin-left:auto; font-style:italic; }
.wall{ display:grid; grid-template-columns:repeat(auto-fill, minmax(clamp(38px, 4.2vw, 64px), 1fr)); gap:3px; }
.wall .tile{ animation:tile-in var(--slower) var(--settle) both; animation-delay:calc(var(--i) * 6ms); }
.wall:hover .tile{ opacity:.45; }
.wall .tile:hover{ opacity:1; transform:scale(2.3); z-index:2; box-shadow:0 18px 40px rgba(0,0,0,.8); }
@keyframes tile-in{ from{ opacity:0; transform:translateY(6px) scale(.96); } }

/* spin the reel */
.spin-stage{ display:grid; grid-template-columns:minmax(180px, 320px) 1fr; gap:clamp(24px, 5vw, 80px); align-items:end; }
.spin-frame{ aspect-ratio:2/3; background:var(--graphite); overflow:hidden; position:relative; box-shadow:0 30px 80px rgba(0,0,0,.9); }
.spin-frame img{ width:100%; height:100%; object-fit:cover; display:block; }
.spin-frame .tile-type{ font-size:var(--t-sub); }
.spin-frame.is-spinning img{ filter:blur(1.5px) brightness(1.15); }
.spin-frame:not(.is-spinning):hover{ transform:translateY(-4px); transition:transform var(--slow) var(--settle); }
.spin-says .t-title{ margin:.15em 0 .3em; }
.spin-go{ margin-top:2em; padding:.9em 2.4em; border:1px solid var(--rule); color:var(--fg); transition:border-color var(--touch) var(--settle); }
.spin-go:hover{ border-color:var(--fg2); }
@media (max-width:759px){ .spin-stage{ grid-template-columns:1fr; } .spin-frame{ max-width:240px; } }

/* the decades as filmstrips */
.strip-row{ margin-bottom:clamp(28px, 5vh, 56px); }
.strip-head{ display:flex; align-items:baseline; gap:1em; margin-bottom:.7em; }
.strip-head .t-num-l{ color:var(--fg); }
.strip{
	overflow-x:auto; overflow-y:hidden; scrollbar-width:none; padding:16px 0; background:var(--char);
	background-image:
		repeating-linear-gradient(90deg, transparent 0 10px, var(--graphite) 10px 18px),
		repeating-linear-gradient(90deg, transparent 0 10px, var(--graphite) 10px 18px);
	background-size:100% 6px, 100% 6px; background-position:0 5px, 0 calc(100% - 5px); background-repeat:repeat-x;
	-webkit-mask-image:linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
	        mask-image:linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.strip::-webkit-scrollbar{ display:none; }
.strip-reel{ display:flex; gap:6px; padding:0 4%; width:max-content; }
.tile.is-frame{ width:clamp(76px, 7.5vw, 112px); flex:none; }
.tile.is-frame:hover{ transform:translateY(-6px); }

/* the hands: directors with their films fanned */
.hands{ list-style:none; display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:clamp(36px, 6vh, 64px) clamp(24px, 3vw, 48px); }
.fan{ position:relative; height:150px; margin-bottom:1em; }
.tile.is-fanned{
	position:absolute; bottom:0; left:calc(50% - 45px); width:90px;
	transform-origin:50% 120%; transform:rotate(calc((var(--k) - (var(--n) - 1) / 2) * 7deg));
	box-shadow:0 8px 24px rgba(0,0,0,.7);
}
.hand:hover .tile.is-fanned{ transform:rotate(calc((var(--k) - (var(--n) - 1) / 2) * 14deg)) translateY(-6px); }
.hand .t-sub{ text-align:center; }
.hand .t-label-s{ text-align:center; margin-top:.2em; }

/* music */
.music-who{ margin-top:-2em; font-style:italic; }
.music-wait{ font-style:italic; }
.music-door .spin-go{ margin-top:2em; }
.music-problem{ margin-top:1em; color:var(--fg); font-style:italic; }
.music-door code, .room-music code{ font-family:var(--mono); letter-spacing:.04em; color:var(--fg); }
.music-actions{ display:flex; align-items:center; gap:2em; flex-wrap:wrap; }
.music-actions .spin-go{ margin-top:1.4em; }
.music-quiet{ margin-top:1.4em; color:var(--fg3); }
.music-quiet:hover{ color:var(--fg2); }
.tile.is-square{ aspect-ratio:1; }
.tip-strip.is-square img{ aspect-ratio:1; }
.wall-covers{ grid-template-columns:repeat(auto-fill, minmax(clamp(44px, 4.6vw, 72px), 1fr)); }
.strip .tile.is-square.is-frame{ width:clamp(90px, 8vw, 120px); }

/* the sky: artists as moons, the most played the largest */
.sky{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:clamp(10px, 1.6vw, 22px); padding:2em 0; }
.moon{
	width:calc(var(--s) * .9); height:calc(var(--s) * .9); border-radius:50%; overflow:hidden; flex:none; position:relative;
	background:var(--graphite); box-shadow:0 0 0 1px var(--rule), 0 20px 50px rgba(0,0,0,.8);
	animation:tile-in var(--slower) var(--settle) both; animation-delay:calc(var(--i) * 18ms);
	transition:transform var(--slow) var(--settle), filter var(--slow) var(--settle);
	filter:grayscale(.85) brightness(.85);
}
.moon img{ width:100%; height:100%; object-fit:cover; display:block; }
.moon span{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; padding:10%; font-family:var(--display); font-size:13px; color:var(--fg2); }
.moon:hover{ transform:scale(1.18); filter:none; z-index:2; }
@media (max-width:759px){ .moon{ width:calc(var(--s) * .55); height:calc(var(--s) * .55); } }

.genre-cloud{ font-family:var(--display); font-size:clamp(14px, 1.3vw, 19px); line-height:1.25; text-align:center; text-wrap:balance; }
.genre-cloud span{ display:inline-block; margin:0 .35em; color:var(--fg); transition:opacity var(--touch) var(--settle); }
.genre-cloud span:hover{ opacity:1 !important; }

/* the map of genres */
.gm{ width:100%; height:auto; display:block; overflow:visible; }
.gm-roads line{ stroke:var(--rule); stroke-width:1; }
.gm-dot{ fill:var(--fg2); opacity:.75; cursor:pointer; transition:opacity var(--touch) var(--settle), fill var(--touch) var(--settle); }
.gm-dot:hover{ fill:var(--fg); opacity:1; }
.gm-family{ font-family:var(--display); fill:var(--fg3); cursor:pointer; letter-spacing:-.01em; transition:fill var(--touch) var(--settle); }
.gm-family.is-lit{ fill:var(--fg2); }
.gm-family:hover, .gm-family.is-on{ fill:var(--fg); }
.gm-credit{ margin-top:1em; font-style:italic; }
.gm-credit a{ color:var(--fg2); border-bottom:1px solid var(--rule); }
.sky-small{ padding-top:1em; }
.sky-small .moon{ filter:none; }

.lists{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:clamp(18px, 2.4vw, 32px); }
.list{ display:block; }
.list .tile{ margin-bottom:.7em; }
.list:hover .tile{ transform:translateY(-4px); }
.list-name{ display:block; font-family:var(--display); font-size:var(--t-sub); line-height:1.15; margin-bottom:.2em; }

/* a film, opened */
.sheet[hidden]{ display:none; }
.sheet{ position:fixed; inset:0; z-index:30; display:flex; align-items:center; justify-content:center; padding:var(--margin); }
.sheet-veil{ position:absolute; inset:0; background:rgba(0,0,0,.86); backdrop-filter:blur(6px); opacity:0; transition:opacity var(--slow) var(--settle); }
.sheet.is-open .sheet-veil{ opacity:1; }
.sheet-card{
	position:relative; width:min(1080px, 100%); max-height:100%; overflow:auto;
	display:grid; grid-template-columns:minmax(200px, 400px) 1fr; gap:clamp(24px, 4vw, 64px); align-items:start;
	opacity:0; transform:translateY(12px); transition:opacity var(--slow) var(--settle), transform var(--slower) var(--settle);
}
.sheet.is-open .sheet-card{ opacity:1; transform:none; }
.sheet-poster{ aspect-ratio:2/3; background:var(--graphite); position:relative; overflow:hidden; box-shadow:0 40px 100px rgba(0,0,0,.9); }
.sheet-poster img{ width:100%; height:100%; object-fit:cover; display:block; }
.sheet-poster .tile-type{ font-size:var(--t-title); }
.sheet-card.is-new .sheet-poster, .sheet-card.is-new .sheet-text{ animation:tile-in var(--slower) var(--settle) both; }
.sheet-card.is-new .sheet-text{ animation-delay:60ms; }
.sheet-title{ margin:.3em 0 .8em; }
.sheet-facts > div{ display:grid; grid-template-columns:6.5em 1fr; gap:1em; padding:.55em 0; border-top:1px solid var(--rule); }
.sheet-facts dd{ color:var(--fg); }
.sheet-notes{ margin-top:1.4em; color:var(--fg2); }
.sheet-more .sheet-facts > div:first-child{ border-top:0; }
.sheet-story{ margin-top:1.4em; color:var(--fg2); max-width:36em; }
.sheet-wait{ margin-top:1em; font-style:italic; color:var(--fg3); }
.sheet-links{ display:flex; gap:2em; margin-top:1.8em; }
.sheet-links a{ color:var(--fg2); }
.sheet-links a:hover{ color:var(--fg); }
.sheet-nav{ grid-column:1 / -1; display:flex; justify-content:space-between; padding-top:1em; border-top:1px solid var(--rule); }
.sheet-nav button, .sheet-close{ color:var(--fg2); }
.sheet-nav button:hover, .sheet-close:hover{ color:var(--fg); }
.sheet-close{ position:absolute; top:0; right:0; }
.is-sheet body{ overflow:hidden; }
@media (max-width:759px){
	.sheet{ align-items:flex-start; }
	.sheet-card{ grid-template-columns:1fr; }
	.sheet-poster{ max-width:220px; }
}

/* ---- ask: the front door is a question ---- */
.ask-hero{ min-height:calc(100svh - var(--nav-h) - clamp(48px, 10vh, 140px)); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding-bottom:clamp(32px, 8vh, 96px); }
.ask-hero .t-hero{ margin:.06em 0 .3em; }
.ask-hero .t-display{ margin:.06em 0 .35em; }
.is-asked .ask-hero{ min-height:0; padding-bottom:clamp(24px, 5vh, 56px); }
.ask{ position:relative; width:min(44em, 100%); display:flex; align-items:baseline; gap:1em; border-bottom:1px solid var(--fg3); transition:border-color var(--slow) var(--settle); }
.ask:focus-within{ border-bottom-color:var(--fg); }
.ask-input{ flex:1; min-width:0; background:none; border:0; color:var(--fg); font-family:var(--display); font-size:clamp(24px, 2.6vw, 38px); line-height:1.3; padding:.25em 0; border-radius:0; text-align:left; }
.ask-input::placeholder{ color:var(--fg3); font-style:italic; }
.ask-input:focus{ outline:none; }
.ask-input::-webkit-search-cancel-button{ display:none; }
.ask-go{ color:var(--fg2); }
.ask-go:hover{ color:var(--fg); }
.ask-complete{ position:absolute; top:calc(100% + 1px); left:0; right:0; z-index:5; list-style:none; background:var(--char); border:1px solid var(--rule); border-top:0; text-align:left; }
.ask-complete li{ display:flex; justify-content:space-between; gap:1em; padding:.55em .9em; cursor:pointer; font-family:var(--display); font-size:var(--t-sub); color:var(--fg2); }
.ask-complete li.is-on, .ask-complete li:hover{ color:var(--fg); background:var(--graphite); }
.ask-complete em{ font-style:normal; color:var(--fg3); align-self:center; }
.ask-offers{ display:flex; flex-wrap:wrap; justify-content:center; gap:.5em 1.6em; margin-top:clamp(20px, 3.4vh, 36px); max-width:52em; }
.ask-offer{ color:var(--fg2); font-style:italic; border-bottom:1px solid transparent; transition:color var(--touch) var(--settle), border-color var(--touch) var(--settle); }
.ask-offer:hover{ color:var(--fg); border-bottom-color:var(--rule); }
.ask-turn{ color:var(--fg); }
.answer{ min-height:1px; }
.answer.is-new{ animation:tile-in var(--slower) var(--settle) both; }
.answer-say{ max-width:24em; margin:0 auto clamp(32px, 6vh, 64px); text-align:center; }
.answer .t-kicker{ display:block; text-align:center; margin-bottom:.5em; }
.answer-wall{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px; }
.answer-wall .tile:not(.is-large){ width:clamp(64px, 7vw, 110px); flex:none; }
.is-asked .ask-hero > .t-kicker, .is-asked .ask-hero > .ask-offers{ display:none; }
.answer-wall.is-few{ display:flex; justify-content:center; gap:clamp(16px, 3vw, 40px); }
.answer-more{ margin-top:1.4em; text-align:center; font-style:italic; }
.answer-next{ margin:clamp(40px, 7vh, 72px) auto 0; }
.answer-one{ display:flex; flex-direction:column; align-items:center; gap:1em; }
.tile.is-large{ width:clamp(200px, 26vw, 360px); box-shadow:0 40px 100px rgba(0,0,0,.9); }
.tile.is-large.is-square{ width:clamp(220px, 30vw, 420px); }
.wall .tile.is-large:hover{ transform:translateY(-4px); }
.quotes{ columns:3 18em; column-gap:clamp(24px, 4vw, 64px); }
.quote{ break-inside:avoid; margin-bottom:2.4em; }
.quote blockquote{ font-family:var(--serif); font-size:var(--t-body); line-height:1.5; }
.quote figcaption{ margin-top:.7em; cursor:pointer; }
.reflect{ max-width:36em; margin:clamp(32px, 6vh, 64px) auto 0; text-align:center; }
.reflect-text{ width:100%; background:none; color:var(--fg); border:0; border-bottom:1px solid var(--rule); resize:vertical; padding:.5em 0; font-style:italic; }
.reflect-text:focus{ outline:none; border-bottom-color:var(--fg2); }
.reflect .music-actions{ justify-content:center; }
.reflect-says{ margin-top:1em; }
.home-count{ margin-left:auto; font-style:italic; }

/* ---- modes: the index of a room ---- */
.mode-index{ position:relative; }
.mode-index-backdrop{
	position:fixed; inset:0; z-index:0; display:grid; grid-template-columns:repeat(6, 1fr); gap:2px; opacity:0;
	filter:blur(2px) grayscale(1) brightness(.28); transition:opacity var(--slower) var(--settle); pointer-events:none;
}
.mode-index-backdrop img{ width:100%; height:100%; object-fit:cover; display:block; min-height:34vh; }
.mode-index-backdrop.is-on{ opacity:1; }
.mode-index > :not(.mode-index-backdrop){ position:relative; z-index:1; }
.mode-list{ list-style:none; border-top:1px solid var(--rule); }
.mode-list li{ border-bottom:1px solid var(--rule); }
.mode-list a{ display:grid; grid-template-columns:4.5em minmax(0, auto) 1fr; align-items:baseline; gap:1em 2em; padding:clamp(18px, 3vh, 32px) 0; }
.mode-list .t-note{ color:var(--fg3); transition:color var(--slow) var(--settle); }
.mode-list a:hover .t-note{ color:var(--fg); }
.mode-list:hover a .t-title{ opacity:.4; transition:opacity var(--slow) var(--settle); }
.mode-list:hover a:hover .t-title{ opacity:1; }
@media (max-width:759px){ .mode-list a{ grid-template-columns:2.6em 1fr; } .mode-list .t-note{ grid-column:2; } }

/* ---- modes: one on screen at a time ---- */
.is-immersive #nav{ opacity:.0; transform:translateY(-100%); transition:opacity var(--slow) var(--settle), transform var(--slow) var(--settle); }
.is-immersive #nav:hover, .is-immersive #nav:focus-within{ opacity:1; transform:none; }
.is-immersive #nav::after{ content:""; position:absolute; left:0; right:0; top:100%; height:28px; }
.mode-room{ position:relative; min-height:100svh; }
.stage{ position:relative; z-index:1; min-height:100svh; padding:clamp(28px, 6vh, 72px) var(--margin) calc(clamp(80px, 12vh, 120px) + env(safe-area-inset-bottom, 0px)); }
.stage-head{ display:flex; align-items:baseline; gap:1.4em; flex-wrap:wrap; margin-bottom:clamp(20px, 4vh, 44px); }
.stage-head .t-note{ font-style:italic; }
.mode-bar{
	position:fixed; z-index:12; left:50%; bottom:calc(14px + env(safe-area-inset-bottom, 0px)); transform:translateX(-50%);
	display:flex; align-items:center; gap:clamp(12px, 1.8vw, 26px); max-width:calc(100vw - 24px); overflow-x:auto; scrollbar-width:none;
	padding:.75em 1.4em; background:rgba(11,11,11,.72); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
	border:1px solid var(--rule); border-radius:999px; white-space:nowrap;
}
.mode-bar::-webkit-scrollbar{ display:none; }
.mode-bar a{ flex:none; color:var(--fg3); transition:color var(--touch) var(--settle); }
.mode-bar a:hover{ color:var(--fg2); }
.mode-bar a.is-on, .mode-bar .mode-home{ color:var(--fg); }
.mode-sep{ width:1px; height:1em; background:var(--rule); flex:none; }
.ambient{ position:fixed; inset:-8%; z-index:0; pointer-events:none; }
.ambient img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; filter:blur(60px) grayscale(1) brightness(.34); transform:scale(1.1); transition:opacity var(--slowest) var(--breath); }
.ambient img.is-on{ opacity:1; }
.ambient::after{ content:""; position:absolute; inset:0; background:radial-gradient(ellipse at center, transparent 20%, rgba(0,0,0,.75) 100%); }

/* the wall and the reel, full screen */
.wall.is-full{ grid-template-columns:repeat(auto-fill, minmax(clamp(52px, 5.6vw, 92px), 1fr)); gap:4px; }
.wall-covers.is-full{ grid-template-columns:repeat(auto-fill, minmax(clamp(60px, 6.4vw, 104px), 1fr)); }
.spin-stage.is-full{ min-height:calc(100svh - 200px); grid-template-columns:minmax(220px, 40vh) 1fr; align-items:center; }
.spin-stage.is-full .spin-frame{ max-height:70vh; }
.spin-stage .t-display{ margin:.1em 0 .25em; font-size:clamp(44px, 5.4vw, 110px); }
.spin-key{ margin-top:1em; font-style:italic; color:var(--fg3); }
.month-wall{ margin-top:clamp(28px, 5vh, 56px); grid-template-columns:repeat(auto-fill, minmax(clamp(70px, 7vw, 120px), 1fr)); gap:6px; }
.strip.is-tall .tile.is-frame{ width:clamp(140px, 16vw, 240px); }

/* music: the libraries */
.lib-head{ margin:clamp(12px, 3vh, 32px) 0 clamp(24px, 4vh, 44px); }
.lib-head .t-display{ font-size:clamp(48px, 6vw, 120px); margin-bottom:.15em; }
.plays{ list-style:none; border-top:1px solid var(--rule); }
.plays li{ display:grid; grid-template-columns:2.4em minmax(0, 1.4fr) 1fr 4em; gap:1.2em; align-items:center; padding:.7em 0; border-bottom:1px solid var(--rule); cursor:pointer; }
.plays-name{ display:flex; flex-direction:column; min-width:0; }
.plays-name .t-sub{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.plays-bar{ height:4px; background:var(--graphite); border-radius:2px; overflow:hidden; }
.plays-bar i{ display:block; height:100%; background:var(--fg2); border-radius:2px; }
.plays li:hover .plays-bar i{ background:var(--fg); }
.plays .t-num{ text-align:right; color:var(--fg2); }
@media (max-width:759px){ .plays li{ grid-template-columns:2em 1fr 3em; } .plays-bar{ display:none; } }
.genre-cloud.is-left{ text-align:left; margin-top:1em; }

/* library: the shelf */
.shelf{
	display:flex; flex-wrap:wrap; align-items:flex-end; gap:0 3px; row-gap:clamp(28px, 5vh, 48px);
	padding:0 0 4px;
}
.spine{
	position:relative; width:var(--w); height:calc(clamp(220px, 36vh, 340px) * var(--h) / 100); flex:none;
	display:flex; flex-direction:column; justify-content:space-between; align-items:center; padding:.9em 0 .7em; overflow:hidden;
	background:var(--graphite); border-radius:2px 2px 0 0; box-shadow:inset -3px 0 6px rgba(0,0,0,.45), inset 2px 0 0 rgba(255,255,255,.04), 0 5px 0 0 #2a2826, 3px 5px 0 0 #2a2826;
	transition:transform var(--slow) var(--settle), box-shadow var(--slow) var(--settle);
	animation:tile-in var(--slower) var(--settle) both; animation-delay:calc(var(--i) * 5ms);
}
.spine.has-cover::before{ content:""; position:absolute; inset:-30%; background:var(--cover) center/cover; filter:blur(10px) grayscale(1) brightness(.45); }
.spine.is-kindle{ background:var(--char); box-shadow:inset 0 0 0 1px var(--rule); }
.spine > span{ position:relative; writing-mode:vertical-rl; transform:rotate(180deg); }
.spine-title{ font-family:var(--display); font-size:clamp(13px, 1vw, 16px); line-height:1; color:var(--fg); max-height:78%; overflow:hidden; text-shadow:0 1px 6px rgba(0,0,0,.6); }
.spine-by{ font-family:var(--mono); font-size:10px; letter-spacing:.08em; color:var(--fg2); text-transform:uppercase; }
.spine:hover{ transform:translateY(-14px); box-shadow:inset -3px 0 6px rgba(0,0,0,.45), 0 18px 30px rgba(0,0,0,.8); z-index:2; }
.wall-books.is-full{ grid-template-columns:repeat(auto-fill, minmax(clamp(70px, 7vw, 120px), 1fr)); gap:6px; }

/* library: the lines */
.passage{ min-height:calc(100svh - 300px); display:flex; flex-direction:column; justify-content:center; max-width:34em; margin:0 auto; text-align:left; }
.passage-text{ font-family:var(--serif); line-height:1.4; text-wrap:pretty; color:var(--fg); font-size:clamp(20px, calc(2.6vw - var(--len) * .002vw), 34px); }
.passage figcaption{ margin-top:1.6em; }
.passage figcaption button{ color:var(--fg2); }
.passage figcaption button:hover{ color:var(--fg); }
.passage.is-new .passage-text, .passage.is-new figcaption{ animation:tile-in var(--slowest) var(--settle) both; }
.passage.is-new figcaption{ animation-delay:120ms; }
.passage-nav{ justify-content:center; }
.passage-nav .spin-go, .passage-nav .music-quiet{ margin-top:0; }

/* library: the years */
.years{ display:flex; gap:clamp(16px, 2.4vw, 36px); overflow-x:auto; padding-bottom:1em; align-items:flex-end; }
.year{ flex:none; width:clamp(90px, 9vw, 140px); display:flex; flex-direction:column; }
.year .t-num-l{ margin-top:.6em; padding-top:.4em; border-top:1px solid var(--rule); }
.year-stack{ display:flex; flex-direction:column; gap:4px; }

.sheet-poster.is-square{ aspect-ratio:1; }
.sheet-quote{ margin-top:1.2em; padding-left:1em; border-left:1px solid var(--rule); font-family:var(--serif); font-size:var(--t-body); line-height:1.5; color:var(--fg2); }

/* ---- the entrance ---- */
.is-locked #nav, .is-locked #app{ visibility:hidden; }
.is-locked body{ overflow:hidden; }
.gate{
	position:fixed; inset:0; z-index:20; background:var(--void);
	display:flex; align-items:center; justify-content:center; padding:0 var(--margin);
	transition:background-color var(--slower) var(--breath);
}
.gate-form{ position:relative; width:100%; min-height:0; padding-bottom:0; transition:transform var(--slower) var(--settle); }
.gate-ask{ max-width:12em; transition:max-width var(--slower) var(--settle), border-color var(--slow) var(--settle); }
.gate-word{ text-align:center; letter-spacing:.3em; transition:letter-spacing var(--slow) var(--settle); }
.gate-word::placeholder{ letter-spacing:0; }
.gate-says{ position:absolute; top:100%; left:0; right:0; margin-top:.8em; min-height:1.5em; font-style:italic; }
/* the word is right: the field widens into the question box */
.gate.is-opening .gate-ask{ max-width:44em; }
.gate.is-opening .gate-word{ text-align:left; letter-spacing:0; }
/* then the house appears around it */
.gate.is-leaving{ background-color:transparent; pointer-events:none; }
.is-crossing #app .ask-hero > .t-kicker, .is-crossing #app .ask-hero > h1, .is-crossing #app .ask{ visibility:hidden; }

/* ---- motion: what arrives, and the hand ---- */
pv-l{ position:relative; display:inline-block; }
.is-arming pv-l{ opacity:0; transform:translateY(.12em); filter:blur(5px); }
.is-arrived pv-l{ opacity:1; transform:none; filter:none; transition:opacity var(--slower) var(--settle), transform var(--slower) var(--settle), filter var(--slower) var(--settle); transition-delay:calc(var(--i) * 24ms); }
[data-rise]{ opacity:0; transform:translateY(8px); transition:opacity var(--slower) var(--settle), transform var(--slower) var(--settle); }
[data-rise].is-risen{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
	html{ scroll-behavior:auto; }
	.is-arming pv-l, [data-rise]{ opacity:1; transform:none; filter:none; }
	*{ transition-duration:0s !important; }
}

/* ---- black and white: a picture shows its colour only when it is opened ---- */
.wall .tile img, .strip .tile img, .fan .tile img, .answer-wall .tile img, .year-stack .tile img, .lists .tile img, .spin-frame img, .tip-strip img{ filter:grayscale(1) brightness(.92); transition:filter var(--slow) var(--settle); }
.wall .tile:hover img, .strip .tile:hover img, .answer-wall .tile:hover img, .year-stack .tile:hover img{ filter:grayscale(1) brightness(1.08); }
.tile.is-large img{ filter:none; }
.tile-type{ background:var(--graphite); }
.passage figcaption .t-label-s{ letter-spacing:.09em; }
.portrait-list{ list-style:none; border-top:1px solid var(--rule); }
.portrait-list li{ border-bottom:1px solid var(--rule); }
.portrait-list button{ display:block; width:100%; text-align:left; padding:clamp(16px, 2.6vh, 26px) 0; color:var(--fg2); transition:color var(--touch) var(--settle); }
.portrait-list button:hover{ color:var(--fg); }
.shelf-which{ display:inline-flex; margin:0; font-style:normal; }