:root {
--black: #000;
--white: #fff;
--night: #1a1a1a;
--stone: #8a8a8a;
--paper: #fff;
--paper-ink: #000;
--paper-stone: #6b6b6b;
--paper-line: rgba(0, 0, 0, 0.14);
--bg: var(--black);
--ink: var(--white);
--muted: var(--stone);
--line: rgba(255, 255, 255, 0.14);
--focus: var(--white);
--font-display: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--font-text: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--fs-display-xl: clamp(3.5rem, 9.5vw, 10rem);
--lh-display-xl: 0.88;
--tr-display-xl: -0.045em;
--fs-display-l: clamp(2.5rem, 6vw, 6rem);
--lh-display-l: 0.92;
--tr-display-l: -0.04em;
--fs-scripture: clamp(1.6rem, 3vw, 2.75rem);
--lh-scripture: 1.28;
--tr-scripture: -0.015em;
--fs-phrase: clamp(1.25rem, 1.05rem + 0.75vw, 1.75rem);
--lh-phrase: 1.3;
--fs-statement: clamp(1.75rem, 3.4vw, 3rem);
--lh-statement: 1.22;
--fs-launch: clamp(2.25rem, 0.5rem + 4.4vw, 4.5rem);
--fs-close: clamp(2.25rem, 0.5rem + 4.4vw, 4.5rem);
--lh-launch: 1.06;
--tr-launch: -0.03em;
--lh-close: 0.98;
--fs-lyric: clamp(1.2rem, 1.6vw, 1.5rem);
--lh-lyric: 1.5;
--fs-card: clamp(1.25rem, 1.05rem + 0.6vw, 1.5rem);
--fs-body: 1.0625rem;
--lh-body: 1.65;
--measure: 36rem;
--fs-small: 0.875rem;
--fs-nav: 1rem;
--w-label: 500;
--u: 8px;
--gutter: clamp(16px, calc((100vw - 390px) * 0.0457 + 16px), 64px);
--max: 1440px;
--section: clamp(96px, 14vw, 200px);
--block: clamp(32px, 1.5rem + 2vw, 56px);
--grid-x: clamp(16px, 0.5rem + 2vw, 40px);
--grid-y: clamp(40px, 1.5rem + 2.6vw, 72px);
--hero-cover: min(560px, 39vw);
--rail: 7rem;
--r-btn: 2px;
--r-pic: 4px;
--border: 1px;
--focus-ring: 2px;
--focus-offset: 3px;
--logo-w: clamp(150px, 120px + 5vw, 190px);
--header-h: 112px;
--logo-w-footer: clamp(180px, 150px + 6vw, 240px);
--glow-opacity: 0.35;
--glow-blur: 90px;
--glow-scale: 1.15;
--glow-saturate: 1.3;
--ease-rise: cubic-bezier(0.2, 0.7, 0.15, 1);
--ease-light: cubic-bezier(0.18, 0.7, 0.16, 1);
--dur-fade: 0.6s;
--dur-rise: 1.1s;
--dur-bloom: 1.4s;
--dur-light: 1.2s;
--stagger: 0.12s;
--rise: 0.32em;
}
@media (max-width: 860px) {
:root { --fs-display-xl: clamp(3.5rem, 16vw, 6rem); }
}
.paper {
--bg: var(--paper);
--ink: var(--paper-ink);
--muted: var(--paper-stone);
--line: var(--paper-line);
--focus: var(--paper-ink);
}
@font-face {
font-family: "Manrope";
src: url("/fonts/manrope-latin-var.woff2") format("woff2");
font-weight: 200 800;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Inter";
src: url("/fonts/inter-latin-var.woff2") format("woff2");
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%; text-size-adjust: 100%;
background: var(--black);
scroll-padding-top: 24px;
}
body {
margin: 0;
background: var(--bg);
color: var(--ink);
font-family: var(--font-text);
font-size: var(--fs-body);
line-height: var(--lh-body);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
overflow-x: clip;
}
main { display: block; overflow-x: clip; }
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote, table { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.nowrap { white-space: nowrap; }
.no-js .js-only { display: none !important; }
:focus-visible { outline: var(--focus-ring) solid var(--focus); outline-offset: var(--focus-offset); }
main:focus { outline: none; }
.visually-hidden {
position: absolute !important; width: 1px; height: 1px; overflow: hidden;
clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip {
position: absolute; left: var(--gutter); top: 12px; z-index: 50;
background: var(--white); color: var(--black); padding: 12px 18px;
border-radius: var(--r-btn); font-weight: 600; text-decoration: none;
transform: translateY(-160%);
}
.skip:focus { transform: none; }
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.display-xl, .display-l {
font-family: var(--font-display);
font-weight: 800;
text-transform: lowercase;
text-wrap: balance;
}
.display-xl { font-size: var(--fs-display-xl); line-height: var(--lh-display-xl); letter-spacing: var(--tr-display-xl); }
.display-l { font-size: var(--fs-display-l); line-height: var(--lh-display-l); letter-spacing: var(--tr-display-l); }
.label {
font-family: var(--font-text);
font-size: var(--fs-small);
font-weight: var(--w-label);
line-height: 1.4;
letter-spacing: normal;
color: var(--muted);
}
.statement {
font-family: var(--font-display);
font-weight: 300;
font-size: var(--fs-statement);
line-height: var(--lh-statement);
letter-spacing: -0.02em;
max-width: 23em;
text-wrap: pretty;
}
.page-lead, .about-text { max-width: var(--measure); text-wrap: pretty; }
.sc > span { font-size: 0.78em; letter-spacing: 0.03em; }
.text-link { text-decoration: underline; text-decoration-color: var(--muted); }
@media (hover: hover) { .text-link:hover { text-decoration-color: currentColor; } }
.btns { display: flex; flex-wrap: wrap; gap: 12px; }
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
min-height: 48px; padding: 0 22px;
border: var(--border) solid currentColor; border-radius: var(--r-btn);
background: transparent; color: var(--ink);
font-family: var(--font-text); font-size: 1rem; font-weight: 500; line-height: 1;
text-decoration: none; white-space: nowrap; cursor: pointer;
}
.btn-fill { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn-sm { min-height: 40px; padding: 0 16px; font-size: var(--fs-small); }
.btn svg { width: 16px; height: 16px; flex: none; }
.btn[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.site-header {
view-transition-name: site-header;
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
gap: 12px 32px;
padding-block: clamp(20px, 2.5vw, 36px);
}
.brand { display: block; width: var(--logo-w); flex: none; color: var(--white); }
.brand svg { width: 100%; height: auto; }
.nav ul { display: flex; flex-wrap: wrap; gap: 4px clamp(20px, 2.6vw, 40px); }
.nav a {
display: inline-block; padding: 6px 0;
font-size: var(--fs-nav); font-weight: 500; color: var(--white); text-decoration: none;
border-bottom: 2px solid transparent;
}
.nav a[aria-current="page"] { border-bottom-color: currentColor; }
@media (hover: hover) { .nav a:hover { border-bottom-color: currentColor; } }
.cover-frame {
position: relative; overflow: hidden; aspect-ratio: 1 / 1;
border-radius: var(--r-pic); background: var(--night);
}
.cover-frame picture, .cover-frame img { width: 100%; height: 100%; object-fit: cover; }
.lit-cover { position: relative; isolation: isolate; }
.glow {
position: absolute; inset: 0; z-index: -1;
width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-pic);
opacity: var(--glow-opacity);
filter: blur(var(--glow-blur)) saturate(var(--glow-saturate));
transform: scale(var(--glow-scale));
pointer-events: none;
}
.hero {
display: grid;
grid-template-columns: minmax(0, 1fr) var(--hero-cover);
align-items: center;
gap: var(--block) clamp(40px, 6vw, 112px);
min-height: min(calc(100svh - 112px), 780px);
padding-block: clamp(8px, 2vh, 32px) clamp(16px, 3vh, 40px);
}
.hero-text { min-width: 0; }
.hero-label { margin-bottom: clamp(16px, 2.4vh, 28px); }
.hero-title a { text-decoration: none; }
.hero-phrase {
margin-top: clamp(28px, 4.4vh, 48px);
max-width: 24em;
font-family: var(--font-display); font-weight: 300;
font-size: var(--fs-phrase); line-height: var(--lh-phrase); letter-spacing: -0.01em;
color: var(--white); text-wrap: balance;
}
.hero-ref { margin-top: 12px; }
.hero .btns { margin-top: clamp(28px, 4.4vh, 48px); }
.hero-cover { display: block; }
.section { padding-top: var(--section); }
.section-title { margin-bottom: var(--block); }
.page-end { height: var(--section); }
.grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--grid-y) var(--grid-x);
}
.card { display: block; text-decoration: none; }
.card-text { padding-top: 16px; }
.card-title {
font-family: var(--font-display); font-weight: 700;
font-size: var(--fs-card); line-height: 1.15; letter-spacing: -0.02em;
text-transform: lowercase;
text-decoration: underline 2px transparent; text-underline-offset: 0.2em;
}
.card-ref { margin-top: 4px; }
.card:focus-visible { outline-offset: 6px; }
@media (hover: hover) { .card:hover .card-title { text-decoration-color: currentColor; } }
.previews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-x); }
.preview { display: block; text-decoration: none; }
.preview-frame {
position: relative; overflow: hidden; aspect-ratio: 4 / 3;
border-radius: var(--r-pic);
container-type: inline-size;
}
.preview-label {
display: inline-block; margin-top: 16px;
font-weight: 500; text-decoration: underline 1px transparent; text-underline-offset: 0.22em;
}
@media (hover: hover) { .preview:hover .preview-label { text-decoration-color: currentColor; } }
.more-link { margin-top: var(--block); font-weight: 500; }
.mini-chart, .mini-sheet { background: var(--paper); color: var(--paper-ink); padding: 9% 0 0 9%; white-space: nowrap; }
.mini-chart::after, .mini-sheet::after {
content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 30%;
background: linear-gradient(to right, rgb(255 255 255 / 0), var(--paper) 85%);
pointer-events: none;
}
.m-title {
font-family: var(--font-display); font-weight: 800; text-transform: lowercase;
font-size: 10cqw; line-height: 0.95; letter-spacing: -0.04em;
}
.m-meta { margin-top: 2.6cqw; font-size: 3.8cqw; font-weight: 500; color: var(--paper-stone); line-height: 1.3; }
.mini-chart .chart { margin-top: 7cqw; font-size: 4.6cqw; columns: 1; }
.mini-chart .chart-line { flex-wrap: nowrap; padding-left: 0; }
.mini-chart .chart-line > .w:first-child { margin-left: 0; }
.mini-chart .chart-section .label { font-size: 0.8em; }
.mini-room { background: var(--night); display: grid; place-items: center; padding: 8%; }
.mini-screen {
position: relative; width: 100%; aspect-ratio: 16 / 9;
background: var(--black); display: grid; place-items: center; padding: 3cqw 6cqw 5cqw;
}
.ms-lines { text-align: center; }
.ms-title {
font-family: var(--font-display); font-weight: 800; color: var(--white); text-transform: lowercase;
font-size: 10cqw; line-height: 0.95; letter-spacing: -0.04em; text-wrap: balance;
}
.ms-ref { margin-top: 0.9em; font-size: 3cqw; color: var(--stone); line-height: 1.2; }
.ms-count { position: absolute; bottom: 2.4cqw; right: 3cqw; font-size: 2.6cqw; color: var(--stone); line-height: 1; }
.mini-sheet .m-sec { margin-top: 7cqw; font-family: var(--font-display); font-weight: 500; font-size: 4.8cqw; line-height: 1.45; }
.m-label { font-family: var(--font-text); color: var(--paper-stone); font-weight: 500; font-size: 0.75em; margin-bottom: 0.3em; }
.layer-wrap { position: fixed; inset: 0; z-index: 0; background: var(--black); pointer-events: none; }
.layer-wrap canvas { width: 100%; height: 100%; display: block; }
.layer-wrap.still, .no-js .layer-wrap { background: var(--black) url("/img/layer/earth-wide.webp") bottom right / cover no-repeat; }
.layer-wrap.still canvas, .no-js .layer-wrap canvas { display: none; }
.layer-wrap.layer-dim { opacity: 0.5; background-position: right 0 bottom -28vh; }
.notext .header-wrap, .notext main, .notext .site-footer { visibility: hidden; }
.header-wrap, main { position: relative; z-index: 1; }
.site-footer { position: relative; z-index: 1; background: var(--black); }
.launch { min-height: calc(100svh - var(--header-h)); display: grid; align-content: center; padding-bottom: 6vh; }
.launch-label { margin-bottom: 12px; }
.launch-verse {
font-family: var(--font-display); font-weight: 300; color: var(--white);
font-size: var(--fs-launch); line-height: var(--lh-launch); letter-spacing: var(--tr-launch);
max-width: 15.5em; text-wrap: pretty;
}
.launch-verse .name, .close-verse .name { font-weight: 700; white-space: nowrap; }
.launch-ref { margin-top: 14px; }
.launch-line {
margin-top: 40px; max-width: 26em;
font-family: var(--font-display); font-weight: 300; font-size: var(--fs-phrase); line-height: var(--lh-phrase);
letter-spacing: -0.01em; text-wrap: pretty;
}
.launch-btns { margin-top: 40px; align-items: center; gap: 12px 24px; }
.closing-label { margin-bottom: clamp(16px, 2.4vh, 28px); }
.privacy { margin-top: 8px; }
.closing { padding-block: var(--section); }
.close-verse {
font-family: var(--font-display); font-weight: 300;
font-size: var(--fs-close); line-height: var(--lh-launch); letter-spacing: var(--tr-launch);
max-width: 15.5em; text-wrap: pretty;
}
.closing .label { margin-top: 14px; }
.closing-launch { min-height: 70svh; display: grid; align-content: center; }
.site-footer {
border-top: 1px solid var(--line);
padding-block: clamp(48px, 6vw, 88px) 40px;
font-size: var(--fs-small); color: var(--muted);
}
.footer-grid {
display: grid; align-items: start;
grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
gap: 32px;
}
.footer-brand { display: block; width: var(--logo-w-footer); color: var(--white); }
.footer-brand svg { width: 100%; height: auto; }
.footer-grid ul { display: grid; gap: 8px; }
.footer-grid a { color: var(--white); text-decoration: none; }
.handle { margin-top: 8px; }
.footer-base { margin-top: clamp(48px, 6vw, 80px); }
@media (hover: hover) { .footer-grid a:hover { text-decoration: underline; } }
.page-head { padding-block: clamp(24px, 5vw, 80px) var(--block); }
.page-lead { margin-top: clamp(24px, 3vw, 40px); }
.page-head .btns { margin-top: 40px; }
.page-404 { padding-bottom: var(--section); }
.page-404 .label { margin-bottom: 20px; }
.verse blockquote { margin-top: clamp(20px, 2vw, 32px); max-width: 62rem; }
.passage {
font-family: var(--font-display); font-weight: 300;
font-size: var(--fs-scripture); line-height: var(--lh-scripture); letter-spacing: var(--tr-scripture);
color: var(--stone); text-wrap: pretty;
}
.passage .lit { color: var(--white); }
.verse-ref { margin-top: clamp(20px, 2.4vw, 32px); }
#listen .label { margin-bottom: clamp(20px, 2vw, 32px); }
.video {
position: relative; aspect-ratio: 16 / 9; overflow: hidden; max-width: 64rem;
border-radius: var(--r-pic); background: var(--night);
}
.video picture, .video img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.poster img { opacity: 0.5; }
.poster-note { position: absolute; inset: 0; display: grid; place-items: center; color: var(--white); font-weight: 500; }
.yt-poster {
position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0;
background: var(--black); cursor: pointer; display: grid; place-items: center;
}
.yt-poster img { opacity: 0.7; }
.yt-play { position: relative; pointer-events: none; }
.yt-poster:focus-visible { outline-offset: -6px; }
.watch { margin-top: 16px; }
.streams { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 16px; }
.lyrics-layout {
display: grid;
grid-template-columns: var(--rail) minmax(0, 52rem);
gap: clamp(32px, 4vw, 64px);
align-items: start;
}
.song-map { position: sticky; top: 32px; }
.song-map ol { display: grid; gap: 2px; }
.song-map a {
display: flex; align-items: baseline; gap: 6px;
padding: 6px 0 6px 14px; border-left: 2px solid var(--line);
color: var(--stone); text-decoration: none;
font-size: var(--fs-small); font-weight: 500; line-height: 1.3; font-variant-numeric: tabular-nums;
}
.song-map a.is-active { color: var(--white); border-left-color: var(--white); }
@media (hover: hover) { .song-map a:hover { color: var(--white); } }
.lyric-section, .lyric-again { padding-bottom: clamp(32px, 3vw, 48px); scroll-margin-top: 32px; }
.lyric-again { padding-bottom: clamp(20px, 1.6vw, 28px); }
.lyric-section .label { margin-bottom: 8px; }
.lyric-lines {
font-family: var(--font-display); font-weight: 500;
font-size: var(--fs-lyric); line-height: var(--lh-lyric);
}
.lyric-lines p { padding-left: 1em; text-indent: -1em; }
.stanza-gap { height: 0.75em; }
.sheet { border-radius: var(--r-pic); padding: clamp(24px, 4.4vw, 64px); background: var(--bg); color: var(--ink); }
.sheet-tools {
display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
padding-bottom: clamp(20px, 2.4vw, 32px); margin-bottom: clamp(24px, 3vw, 40px);
border-bottom: 1px solid var(--line);
}
.key-control { display: inline-flex; align-items: center; border: 1px solid currentColor; border-radius: var(--r-btn); }
.key-control button {
width: 44px; height: 42px; border: 0; background: transparent; cursor: pointer;
display: grid; place-items: center;
}
.key-control button svg { width: 14px; height: 14px; }
.key-control output { min-width: 3.5rem; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.sheet-title {
font-family: var(--font-display); font-weight: 800; text-transform: lowercase;
font-size: clamp(1.75rem, 1.1rem + 2.2vw, 3rem); line-height: 0.95; letter-spacing: -0.04em;
}
.sheet-meta { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 4px 24px; color: var(--muted); font-size: var(--fs-small); font-weight: 500; }
.sheet-note { margin-top: 8px; color: var(--muted); font-size: var(--fs-small); max-width: 40rem; }
.sheet-empty .btns { margin-top: 24px; }
.chart { margin-top: clamp(24px, 3vw, 40px); columns: 2 22rem; column-gap: clamp(32px, 5vw, 80px); font-size: 1.0625rem; }
.chart-section { break-inside: avoid; padding-bottom: 1.6em; }
.chart-section .label { margin-bottom: 0.3em; font-size: 0.82em; }
.chart-line {
display: flex; flex-wrap: wrap; align-items: flex-end;
font-family: var(--font-display); font-weight: 500; line-height: 1.3;
margin-bottom: 0.35em; padding-left: 1em;
}
.chart-line > .w:first-child { margin-left: -1em; }
.chart-line.chords-only .lyr { display: none; }
.w { display: inline-flex; white-space: pre; }
.k { display: inline-flex; flex-direction: column; }
.ch {
font-family: var(--font-text); font-size: 0.82em; font-weight: 700;
line-height: 1.45; min-height: 1.45em; padding-right: 0.4em; font-feature-settings: "tnum";
}
.chart-comment { color: var(--muted); font-size: 0.85em; margin-bottom: 0.5em; }
.about-row {
display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
gap: var(--block) clamp(40px, 6vw, 112px);
}
.about-row .label { margin-bottom: 16px; }
.facts { display: grid; gap: 10px; }
.facts div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 16px; }
.facts dt { color: var(--muted); }
.free-line { margin-top: var(--block); max-width: var(--measure); }
.free-sheet { margin-top: 0; }
.uses { width: 100%; border-collapse: collapse; }
.uses th, .uses td { text-align: left; vertical-align: baseline; padding: clamp(16px, 2vw, 24px) 0; border-bottom: 1px solid var(--line); }
.uses tr:last-child th, .uses tr:last-child td { border-bottom: 0; }
.uses thead th { padding-top: 0; color: var(--muted); font-size: var(--fs-small); font-weight: 500; }
.uses tbody th {
padding-right: 32px; width: 58%;
font-family: var(--font-display); font-weight: 500;
font-size: clamp(1.125rem, 0.95rem + 0.7vw, 1.5rem); line-height: 1.3;
}
.uses td { font-size: var(--fs-body); }
.page-close { margin-block: var(--block) var(--section); }
.mission { display: grid; gap: clamp(24px, 3vw, 40px); padding-top: var(--block); }
.contact { padding-bottom: var(--section); }
.contact-line { margin-top: 12px; font-family: var(--font-display); font-weight: 300; font-size: var(--fs-statement); letter-spacing: -0.02em; line-height: 1.2; }
.contact-line a { text-decoration: none; }
@media (hover: hover) { .contact-line a:hover { text-decoration: underline; text-decoration-thickness: 2px; } }
.projector {
position: fixed; inset: 0; z-index: 100;
background: var(--black); color: var(--white);
display: grid; grid-template-rows: minmax(0, 1fr) auto;
cursor: none;
}
.projector.awake { cursor: default; }
.projector-stage { display: grid; place-items: center; padding: 6vh 6vw 2vh; overflow: hidden; min-height: 0; }
.slide {
width: 100%; max-height: 100%;
font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em;
line-height: 1.22; text-align: center; text-wrap: balance;
}
.slide p { margin: 0; }
.slide.whole p { white-space: nowrap; }
.slide .gap { height: 0.6em; }
.slide-title { font-weight: 800; letter-spacing: -0.04em; line-height: 0.95; text-transform: lowercase; }
.slide .slide-ref { font-family: var(--font-text); font-weight: 400; color: var(--stone); margin-top: 1em; font-size: 0.3em; letter-spacing: 0; }
.projector.blank .slide { visibility: hidden; }
.projector-foot {
display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px 16px;
padding: 12px var(--gutter) 16px; color: var(--stone); font-size: var(--fs-small);
}
.pf-count { justify-self: end; font-variant-numeric: tabular-nums; }
.pf-controls { display: flex; gap: 8px; opacity: 0; transition: opacity var(--dur-fade) var(--ease-light); }
.projector.awake .pf-controls, .pf-controls:focus-within { opacity: 1; }
.pf-controls .btn { min-height: 40px; padding: 0 14px; font-size: var(--fs-small); color: var(--white); border-color: var(--stone); }
html.projecting, html.projecting body { overflow: hidden; }
@media (max-width: 640px) {
.projector-foot { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.pf-controls { grid-row: 2; grid-column: 1 / -1; justify-content: center; flex-wrap: wrap; }
}
@media (hover: hover) {
.btn:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn-fill:hover, .btn[aria-pressed="true"]:hover { background: transparent; color: var(--ink); }
.key-control button:hover { background: var(--ink); color: var(--bg); }
.pf-controls .btn:hover { background: var(--white); color: var(--black); border-color: var(--white); }
}
@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(var(--rise)); } }
@keyframes bloom { from { opacity: 0; transform: scale(1); } }
@keyframes light { from { color: var(--stone); } }
@keyframes appear { to { opacity: 1; } }
@keyframes weigh { from { font-weight: 300; } }
@media (prefers-reduced-motion: no-preference) {
@view-transition { navigation: auto; }
::view-transition-group(*) { animation-duration: var(--dur-fade); animation-timing-function: var(--ease-rise); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--dur-fade); }
.js .page-home .site-header { animation: fade var(--dur-fade) var(--ease-light) both; }
.js .page-home .launch-verse { animation: rise var(--dur-rise) var(--ease-rise) 0.15s both; }
.js .page-home .launch-block > :not(.launch-verse) { animation: fade var(--dur-fade) var(--ease-light) 0.5s both; }
.js .page-home .launch-verse .name { animation: weigh var(--dur-light) var(--ease-light) 1.4s both; }
.js .page-home .launch-verse .name ~ .name { animation-delay: 1.9s; }
.js .page-home .hero-label, .js .page-home .hero-ref, .js .page-home .hero .btns { animation: fade var(--dur-fade) var(--ease-light) 0.5s both; }
.js .page-home .tw { display: inline-block; animation: rise var(--dur-rise) var(--ease-rise) calc(0.15s + var(--i) * var(--stagger)) both; }
.js .page-home .hero .cover-frame { animation: fade var(--dur-bloom) var(--ease-light) 0.3s both; }
.js .page-home .hero .glow { animation: bloom var(--dur-bloom) var(--ease-light) 0.45s both; }
.js .page-home .hero-phrase .lit { animation: light var(--dur-light) var(--ease-light) 1.4s both; }
.js .passage .lit { transition: color var(--dur-light) var(--ease-light); }
.js .passage:not(.is-lit) .lit { color: var(--stone); }
.js .card img { transition: opacity var(--dur-fade) var(--ease-light); }
.js .card img:not(.is-loaded) { opacity: 0; animation: appear 0s 4s forwards; }
}
@media (prefers-reduced-motion: reduce) {
.layer-wrap { background: var(--black) url("/img/layer/earth-wide.webp") bottom right / cover no-repeat; }
.layer-wrap canvas { display: none; }
*, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
@media (max-width: 1100px) {
.footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
:root { --header-h: 72px; }
.layer-wrap.still, .no-js .layer-wrap { background-image: url("/img/layer/earth-tall.webp"); }
@media (prefers-reduced-motion: reduce) { .layer-wrap { background-image: url("/img/layer/earth-tall.webp"); } }
.launch { align-content: start; padding-top: 16px; padding-bottom: 0; }
.launch-label { margin-bottom: 8px; }
.launch-verse { line-height: 1.08; }
.launch-ref { margin-top: 10px; }
.launch-line { margin-top: 22px; }
.launch-btns { margin-top: 22px; gap: 10px; }
.launch-btns .btn { width: 100%; }
.closing-launch { min-height: 60svh; }
.layer-wrap.layer-dim { background-position: center bottom -14vh; }
@media (max-height: 700px) {
.launch { padding-top: 8px; } .launch-label { margin-bottom: 6px; } .launch-line, .launch-btns { margin-top: 16px; }
}
.hero { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-top: 4px; gap: 28px; }
.hero-cover { order: -1; width: min(100%, 42svh); }
.hero-label { margin-bottom: 12px; }
.hero-phrase { margin-top: 18px; }
.hero-ref { margin-top: 8px; }
.hero .btns { margin-top: 24px; }
.grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.previews {
grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 76%;
overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
scrollbar-width: none;
}
.previews > li { scroll-snap-align: start; }
.about-row { grid-template-columns: minmax(0, 1fr); }
.lyrics-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; }
.song-map {
top: 0; z-index: 5; background: var(--black);
margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter);
overflow-x: auto; scrollbar-width: none;
}
.song-map ol { display: flex; gap: 2px; }
.song-map a { border-left: 0; border-bottom: 2px solid var(--line); padding: 10px 10px 8px; white-space: nowrap; }
.song-map a.is-active { border-bottom-color: var(--white); }
.lyric-section, .lyric-again { scroll-margin-top: 72px; }
.grid-more { grid-template-columns: minmax(0, 1fr); gap: 16px; }
.grid-more .card { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 16px; align-items: center; }
.grid-more .card-text { padding-top: 0; }
}
@media (max-width: 640px) {
.site-header { flex-wrap: nowrap; gap: 12px; padding-block: 20px; }
.nav ul { gap: 4px 24px; }
.footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.uses, .uses tbody, .uses tr, .uses th, .uses td { display: block; width: auto; }
.uses thead { display: none; }
.uses tbody th { padding: 16px 0 4px; border-bottom: 0; }
.uses td { padding: 0 0 16px; }
}
.print-only { display: none; }
@media print {
@page { margin: 14mm 14mm 14mm; }
:root { --bg: #fff; --ink: #000; --muted: #444; --line: #bbb; }
html, body { background: #fff !important; color: #000 !important; font-size: 10pt; }
.site-header, .site-footer, .skip, .projector, .js-only, .song-map { display: none !important; }
.page-song main .wrap > * { display: none !important; }
html:not([data-print="chords"]) .page-song #lyrics, html[data-print="chords"] .page-song #chords { display: block !important; padding: 0; }
.section-title { display: none; }
.print-only { display: block; }
.print-head { border-bottom: 1px solid #000; padding-bottom: 6pt; margin-bottom: 12pt; }
.print-title, .sheet-title { font-family: var(--font-display); font-weight: 800; font-size: 22pt; letter-spacing: -0.03em; line-height: 1; text-transform: lowercase; }
.print-head p { margin-top: 4pt; font-size: 9pt; }
.print-foot { margin-top: 10pt; padding-top: 5pt; border-top: 1px solid #000; font-size: 8pt; display: flex; flex-wrap: wrap; gap: 2pt 14pt; }
.sheet { padding: 0; border-radius: 0; }
.sheet-head { border-bottom: 1px solid #000; padding-bottom: 6pt; }
.sheet-meta, .sheet-note { font-size: 9pt; margin-top: 4pt; }
.chart { columns: 2; column-gap: 10mm; font-size: 10pt; margin-top: 10pt; }
.chart-section { padding-bottom: 7pt; }
.lyrics-layout { display: block; }
.lyrics { columns: 2; column-gap: 12mm; }
.lyric-section, .lyric-again { break-inside: avoid; padding-bottom: 7pt; }
.lyric-lines { font-size: 10.5pt; line-height: 1.38; }
.label { color: #444; font-size: 8pt; }
a { text-decoration: none; }
}