/* ==========================================================================
   ფილოსოფიის კლუბი — landing page
   "ათენიდან იენამდე" / From Athens to Jena.
   One continuous descent from Attic noon into Prussian dusk, hinged on the
   owl of Minerva, which spreads its wings only at nightfall.
   ========================================================================== */

@font-face {
	font-family: 'KantFont';
	src: url(font/bombei_mtavr.ttf) format('truetype');
	font-display: swap;
}

:root {
	/* palette — quarried from the subject, not from a theme kit */
	--marble:    #EFE6D4;   /* Pentelic marble, warm white          */
	--stone:     #AD9E82;   /* weathered limestone                  */
	--verdigris: #3E7F6F;   /* oxidised bronze                      */
	--prussian:  #10243C;   /* Prussian blue                        */
	--ink:       #070C12;   /* attic black glaze / night            */
	--lamp:      #D9AC44;   /* lamplight — appears only after dusk  */

	--display: 'KantFont', 'Noto Serif Georgian', Georgia, serif;
	--text:    'Noto Serif Georgian', Georgia, 'Times New Roman', serif;

	--measure: 33rem;              /* ~62 characters of Georgian serif */
	--rail-w: 4.25rem;
	--ease: cubic-bezier(.22, .61, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html {
	overflow-x: clip;
	scroll-behavior: auto;          /* scrolling is tweened in JS */
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--ink);
	color: var(--marble);
	font-family: var(--text);
	font-size: 17px;
	line-height: 1.7;
	overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }

:where(a, button, [tabindex]):focus-visible {
	outline: 2px solid var(--lamp);
	outline-offset: 3px;
	border-radius: 1px;
}

.u-hide { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

.skip {
	position: fixed; top: -100px; left: 1rem; z-index: 999;
	padding: .7rem 1.1rem; background: var(--lamp); color: var(--ink);
	font-family: var(--display); transition: top .2s;
}
.skip:focus { top: 1rem; }

/* ---------------------------------------------------------------- backdrop */
/* The sky is one fixed element. JS lerps its two stops as you scroll, so the
   light drains out of the page continuously rather than stage by stage. */
#sky {
	position: fixed; inset: 0; z-index: 0;
	background: linear-gradient(176deg, var(--sky-a, #F4ECDC) 0%, var(--sky-b, #E3D6BB) 100%);
	transition: none;
}
#grain {
	position: fixed; inset: 0; z-index: 2; pointer-events: none;
	background-image: url(../img/parallax/grain.svg);
	background-size: 200px 200px;
	opacity: .16; mix-blend-mode: overlay;
}

/* ------------------------------------------------------------------ header */
.masthead {
	position: fixed; inset: 0 0 auto 0; z-index: 40;
	display: flex; align-items: center; gap: 1.5rem;
	padding: .85rem clamp(1rem, 4vw, 2.75rem);
	backdrop-filter: blur(7px);
	-webkit-backdrop-filter: blur(7px);
	transition: background-color .5s linear, border-color .5s linear;
	border-bottom: 1px solid transparent;
}
.masthead.is-sunk {
	background: rgba(244, 236, 220, .78);
	background: color-mix(in srgb, var(--sky-a, #E3D6BB) 80%, transparent);
	border-bottom-color: color-mix(in srgb, var(--ink) 16%, transparent);
}
.brand { display: flex; align-items: center; gap: .7rem; }
.brand img { width: 40px; height: 40px; object-fit: contain; }
.brand span {
	font-family: var(--display);
	font-size: 1.02rem; letter-spacing: .01em; line-height: 1;
	color: var(--hdr-fg, var(--ink));
}
.nav { margin-left: auto; }
.nav ul { display: flex; gap: clamp(1rem, 3vw, 2.4rem); margin: 0; padding: 0; list-style: none; }
.nav a {
	position: relative; font-size: .95rem; padding-bottom: 3px;
	color: var(--hdr-fg, var(--ink));
	opacity: .78; transition: opacity .25s;
}
.nav a:hover { opacity: 1; }
.nav a::after {
	content: ''; position: absolute; left: 0; bottom: 0; height: 1px; width: 0;
	background: var(--verdigris); transition: width .3s var(--ease);
}
.nav a:hover::after, .nav [aria-current="page"]::after { width: 100%; }
.nav [aria-current="page"] { opacity: 1; }

.burger {
	display: none; margin-left: auto; width: 44px; height: 44px;
	background: none; border: 0; cursor: pointer; padding: 11px 9px;
	color: var(--hdr-fg, var(--ink));
}
.burger i { display: block; height: 2px; background: currentColor; margin: 4px 0; transition: transform .3s var(--ease), opacity .2s; }
.burger[aria-expanded="true"] i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* -------------------------------------------------------------- right rail */
/* "Short side bar" — five stops, with a tick per article that opens up while
   you are inside the article run. */
.rail {
	position: fixed; z-index: 45; right: clamp(.5rem, 1.6vw, 1.5rem);
	top: 50%; transform: translateY(-50%);
	display: flex; flex-direction: column; gap: .1rem;
	padding: .8rem .55rem;
}
.rail::before {  /* the stylus: a hairline the marker travels down */
	content: ''; position: absolute; top: 1.1rem; bottom: 1.1rem;
	right: calc(.55rem + 6px); width: 1px;
	background: currentColor; opacity: .22;
}
.rail { color: var(--rail-fg, var(--ink)); transition: color .5s linear; }

.rail-item { position: relative; }
.rail-btn {
	display: flex; align-items: center; justify-content: flex-end; gap: .6rem;
	width: 100%; padding: .34rem 0; background: none; border: 0; cursor: pointer;
	color: inherit; font-family: var(--text); font-size: .78rem; line-height: 1;
}
.rail-label {
	white-space: nowrap; opacity: 0; transform: translateX(6px);
	transition: opacity .28s var(--ease), transform .28s var(--ease);
	pointer-events: none;
}
.rail-btn:hover .rail-label,
.rail-btn:focus-visible .rail-label { opacity: .95; transform: none; }

.rail-dot {
	position: relative; flex: 0 0 13px; width: 13px; height: 13px;
	display: grid; place-items: center;
}
.rail-dot::after {
	content: ''; width: 7px; height: 7px; border: 1px solid currentColor;
	background: transparent; opacity: .55;
	transform: rotate(45deg);          /* lozenges, not bullet points */
	transition: background-color .3s, opacity .3s, width .3s var(--ease), height .3s var(--ease);
}
.rail-btn:hover .rail-dot::after { opacity: 1; }
.rail-item.is-active > .rail-btn .rail-dot::after {
	background: var(--lamp); border-color: var(--lamp);
	width: 11px; height: 11px; opacity: 1;
}

/* Article sub-ticks. They brighten and lengthen while you are inside the
   article run, but stay present and clickable from anywhere — collapsing
   them to zero height made them unreachable from the rest of the page. */
.rail-sub { margin: 0; padding: 0; list-style: none; opacity: .6; transition: opacity .3s; }
.rail-item.is-open .rail-sub { opacity: 1; }
.rail-sub button {
	display: block; position: relative;
	width: 20px; height: 15px;           /* generous hit area around a 1px mark */
	margin-left: auto; margin-right: 1px;
	padding: 0; border: 0; background: none; cursor: pointer;
}
.rail-sub button::after {
	content: ''; position: absolute; right: 2px; top: 50%;
	height: 1px; width: 7px; background: currentColor; opacity: .5;
	transform: translateY(-50%);
	transition: width .3s var(--ease), opacity .3s, background-color .3s;
}
.rail-sub button:hover::after, .rail-sub button:focus-visible::after { width: 13px; opacity: .95; }
.rail-item.is-open .rail-sub button::after { width: 11px; }
.rail-sub button.is-active::after,
.rail-item.is-open .rail-sub button.is-active::after {
	width: 17px; opacity: 1; background: var(--lamp);
}

/* ------------------------------------------------------------ scroll button */
.advance {
	position: fixed; z-index: 45; left: 50%; bottom: clamp(1rem, 3vh, 2rem);
	transform: translateX(-50%);
	display: flex; flex-direction: column; align-items: center; gap: .4rem;
	background: none; border: 0; cursor: pointer; padding: .5rem .9rem;
	color: var(--rail-fg, var(--ink));
	font-family: var(--text); font-size: .74rem; letter-spacing: .04em;
	transition: color .5s linear, opacity .35s;
}
.advance-ring {
	width: 42px; height: 42px; display: grid; place-items: center;
	border: 1px solid currentColor; border-radius: 50%; opacity: .55;
	transition: opacity .3s, transform .3s var(--ease);
}
.advance:hover .advance-ring { opacity: 1; transform: translateY(3px); }
.advance-ring svg { width: 15px; height: 15px; }
.advance-txt {
	opacity: 0; transform: translateY(4px);
	transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.advance:hover .advance-txt, .advance:focus-visible .advance-txt { opacity: .75; transform: none; }
.advance.is-top .advance-ring { transform: rotate(180deg); }
.advance.is-top:hover .advance-ring { transform: rotate(180deg) translateY(3px); }

/* =============================================================== the stages */
main { position: relative; z-index: 1; }

.stage {
	position: relative;
	min-height: 100vh;
	min-height: 100svh;
	display: flex; align-items: center;
	padding: 6.5rem clamp(1.25rem, 5vw, 4.5rem) 6.5rem;
	padding-right: calc(var(--rail-w) + clamp(1.25rem, 5vw, 4.5rem));
	isolation: isolate;
}
.stage-inner { position: relative; z-index: 3; width: 100%; max-width: 78rem; margin: 0 auto; }

/* Scenery: every parallax layer lives here. JS writes --sp (-1 → 1) onto the
   stage; each layer multiplies it by its own depth. One style write per
   stage per frame, no per-layer thrash. */
.scenery {
	position: absolute; inset: -12% 0; z-index: 1; overflow: hidden;
	pointer-events: none;
	transform: scale(var(--zoom, 1));
	transform-origin: 50% 50%;
	will-change: transform;
}
.lyr {
	position: absolute; background-repeat: no-repeat; background-position: center bottom;
	background-size: contain;
	transform: translate3d(calc(var(--sp, 0) * var(--dx, 0px)), calc(var(--sp, 0) * var(--dy, 0px)), 0)
	           rotate(calc(var(--sp, 0) * var(--rot, 0deg)));
	will-change: transform;
}

/* The well: a pool of light (or lamplight) under the text. Guarantees contrast
   through the dusk crossover without resorting to a card. */
.well { position: relative; }
.well::before {
	content: ''; position: absolute; z-index: -1;
	inset: -4rem -6rem -3.5rem -6rem;
	background: radial-gradient(66% 66% at 32% 50%,
	            var(--well, #EFE6D4) 0%,
	            color-mix(in srgb, var(--well, #EFE6D4) 82%, transparent) 38%,
	            color-mix(in srgb, var(--well, #EFE6D4) 30%, transparent) 66%,
	            transparent 82%);
	pointer-events: none;
}

/* tone: which way the text reads on this stage */
.stage[data-tone="light"] { color: var(--ink); --well: #F6F0E2; }
.stage[data-tone="dark"]  { color: var(--marble); --well: #060A10; }

/* --------------------------------------------------------------- typography */
.lede {
	font-family: var(--display);
	font-size: clamp(2.35rem, 6.4vw, 4.6rem);
	line-height: .98; letter-spacing: -.012em; margin: 0 0 1.4rem;
	max-width: 15ch;
}
.lede em {
	display: block; font-style: normal;
	font-size: .46em; line-height: 1.2; letter-spacing: .005em;
	font-family: var(--text); font-weight: 400;
	opacity: .74; margin-bottom: .5rem; max-width: 26ch;
}
.title {
	font-family: var(--display);
	font-size: clamp(1.9rem, 4.6vw, 3.1rem);
	line-height: 1.02; margin: 0 0 2.2rem; letter-spacing: -.01em;
}
.title em {
	display: block; font-style: normal; font-family: var(--text);
	font-size: .38em; opacity: .7; margin-bottom: .35rem; letter-spacing: 0;
}
.prose { max-width: var(--measure); opacity: .86; margin: 0 0 2rem; }

/* ------------------------------------------------------------------ buttons */
.btn {
	display: inline-flex; align-items: center; gap: .75rem;
	padding: .95rem 1.7rem;
	font-family: var(--display); font-size: 1.02rem; line-height: 1;
	border: 1px solid currentColor; background: transparent; color: inherit;
	cursor: pointer; position: relative; overflow: hidden;
	transition: color .35s var(--ease);
}
.btn::before {
	content: ''; position: absolute; inset: 0; z-index: -1;
	background: currentColor; transform: scaleY(0); transform-origin: 50% 100%;
	transition: transform .35s var(--ease);
}
.btn:hover::before, .btn:focus-visible::before { transform: scaleY(1); }
.stage[data-tone="light"] .btn:hover, .stage[data-tone="light"] .btn:focus-visible { color: var(--marble); }
.stage[data-tone="dark"]  .btn:hover, .stage[data-tone="dark"]  .btn:focus-visible { color: var(--ink); }
.btn svg { width: 16px; height: 16px; flex: none; }

.btn-lamp { border-color: var(--lamp); color: var(--lamp); }
.btn-lamp:hover, .btn-lamp:focus-visible { color: var(--ink) !important; }

/* ================================================== 1 — Patreon, Attic noon */
#s-patreon .sun {
	right: 4%; top: 4%; width: min(36vw, 380px); aspect-ratio: 1;
	background-image: url(../img/parallax/sun.svg); background-size: contain;
	--dy: -60px; opacity: .85;
}
#s-patreon .temple {
	left: 0; right: 0; margin-inline: auto; bottom: 26%;
	width: min(64vw, 720px); height: 46%;
	background-image: url(../img/parallax/temple.svg);
	background-position: center bottom;
	--dy: 104px; opacity: .46;
}
#s-patreon .hills {
	left: -4%; right: -4%; bottom: 0; height: 40%;
	background-image: url(../img/parallax/hills.svg);
	background-size: cover; background-position: center bottom;
	--dy: 40px; opacity: .62;
}
/* The portico we are standing inside: two columns, hard against the edges.
   Stretched to fit, which is safe — a column is a vertical form. */
#s-patreon .coln {
	left: 0; right: 0; bottom: 0; height: 100%;
	background-image: url(../img/parallax/portico.svg);
	background-size: 100% 100%;
	--dy: 150px; opacity: .22;
}
.key-band {
	left: -10%; right: -10%; height: 42px;
	background-image: url(../img/parallax/meander.svg);
	background-repeat: repeat-x; background-size: auto 100%;
	opacity: .38;
}
#s-patreon .key-band { bottom: 4%; --dx: -90px; --dy: 180px; }

.patreon-mark {
	display: inline-flex; align-items: center; gap: .6rem;
	margin-bottom: 1.6rem; font-size: .84rem; opacity: .72;
}
.patreon-mark img { width: 22px; height: 22px; object-fit: contain; }
.patreon-mark::after {
	content: ''; width: clamp(2rem, 8vw, 5rem); height: 1px;
	background: currentColor; opacity: .5;
}

/* ================================== 2–4 — the article run, afternoon to night */
.plates {
	display: grid; gap: clamp(1.75rem, 3.6vw, 3.25rem);
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: stretch;
}
.plate { position: relative; display: flex; }
.plate-link {
	display: flex; flex-direction: column; width: 100%; position: relative;
	padding-top: 1.15rem;
	border-top: 1px solid rgba(128, 122, 108, .55);
	border-top: 1px solid color-mix(in srgb, currentColor 40%, transparent);
	transition: border-color .4s var(--ease);
}
.plate-link::before {   /* the bronze rule that fills on hover */
	content: ''; position: absolute; top: -1px; left: 0; height: 1px; width: 0;
	background: var(--lamp); transition: width .55s var(--ease);
}
.plate-link:hover::before, .plate-link:focus-visible::before { width: 100%; }

.plate-img {
	position: relative; overflow: hidden;
	aspect-ratio: 16 / 10; margin-bottom: 1.1rem;
	background: color-mix(in srgb, currentColor 10%, transparent);
}
.plate-img img {
	width: 100%; height: 100%; object-fit: cover;
	filter: saturate(.72) contrast(1.04);
	transform: scale(1.02);
	transition: transform .8s var(--ease), filter .5s var(--ease);
}
.plate-link:hover .plate-img img, .plate-link:focus-visible .plate-img img {
	transform: scale(1.07); filter: saturate(1) contrast(1);
}
.plate-img::after {   /* keeps the plates tonally inside the dusk arc */
	content: ''; position: absolute; inset: 0;
	background: linear-gradient(180deg, transparent 46%, rgba(7, 12, 18, .38) 100%);
	opacity: .55;
}

.plate time { display: block; font-size: .78rem; opacity: .62; margin-bottom: .5rem; }
.plate h3 {
	font-family: var(--display); font-weight: 400;
	font-size: clamp(1.15rem, 2.05vw, 1.55rem); line-height: 1.18;
	margin: 0 0 .55rem;
}
.plate-body { display: flex; flex-direction: column; flex: 1 1 auto; }
.plate > .plate-link > .plate-body > p { margin: 0 0 1.1rem; font-size: .93rem; opacity: .74; max-width: 38ch; }
.byline { margin-top: auto; }

.byline { display: flex; align-items: center; gap: .7rem; padding-top: .35rem; }
.byline img {
	width: 38px; height: 38px; flex: none; object-fit: cover;
	border-radius: 50%; filter: grayscale(.4);
}
.byline b { display: block; font-weight: 600; font-size: .86rem; }
.byline span { display: block; font-size: .74rem; opacity: .6; line-height: 1.4; }

.plate.is-cued .plate-link { border-top-color: var(--lamp); }
.plate.is-cued .plate-link::before { width: 100%; }

.more { margin-top: clamp(2rem, 4vw, 3.25rem); }

/* scenery — 2: Plato's cave */
#s-art-1 .cave {
	right: -4%; top: 10%; width: min(48vw, 520px); height: 80%;
	background-image: url(../img/parallax/cave.svg);
	background-size: contain; background-position: right bottom;
	--dy: 66px; opacity: .5;
}
#s-art-1 .key-band { top: 4%; --dx: 70px; --dy: -46px; opacity: .3; }

/* scenery — 3: the owl of Minerva crosses. The hinge of the whole page. */
#s-art-2 .owl {
	right: 3%; bottom: 12%; width: min(42vw, 410px);
	aspect-ratio: 920 / 480;
	background-image: url(../img/parallax/owl.svg);
	background-position: right bottom;
	--dx: -22vw; --dy: -52px; --rot: 3deg;
	opacity: .62;
}
#s-art-2 .colf {
	left: -10%; right: -10%; bottom: -4%; height: 46%;
	background-image: url(../img/parallax/colonnade-far.svg);
	background-size: cover; --dy: 86px; opacity: .22;
}
#s-art-2 .stars-far {
	inset: 0; background-image: url(../img/parallax/stars-far.svg);
	background-size: cover; --dy: 26px; opacity: .5;
}

/* scenery — 4: Kant's starry heavens above */
#s-art-3 .stars-far  { inset: -10% 0 0; background-image: url(../img/parallax/stars-far.svg);  background-size: cover; --dy: 22px; }
#s-art-3 .stars-mid  { inset: -10% 0 0; background-image: url(../img/parallax/stars-mid.svg);  background-size: cover; --dy: 58px; }
#s-art-3 .stars-near { inset: -10% 0 0; background-image: url(../img/parallax/stars-near.svg); background-size: cover; --dy: 118px; }

/* ================================================ 5 — Discord, the dialectic */
#s-discord { text-align: center; }
#s-discord .stage-inner { max-width: 52rem; }
#s-discord .prose { margin-left: auto; margin-right: auto; }
#s-discord .well::before { inset: -4rem -5rem; background: radial-gradient(64% 64% at 50% 50%, var(--well) 0%, color-mix(in srgb, var(--well) 74%, transparent) 40%, color-mix(in srgb, var(--well) 24%, transparent) 68%, transparent 84%); }
#s-discord .dialectic {
	inset: 0; margin: auto;
	width: min(120vw, 1020px); height: min(120vw, 1020px);
	background-image: url(../img/parallax/dialectic.svg);
	--rot: 26deg; --dy: 50px; opacity: .55;
}
#s-discord .stars-mid { inset: 0; background-image: url(../img/parallax/stars-mid.svg); background-size: cover; --dy: 40px; opacity: .6; }

/* ====================================== 6 — founders, the eternal return */
#s-members .ouroboros {
	inset: -8% 0 0; margin: auto;
	width: min(130vw, 1150px); height: min(130vw, 1150px);
	background-image: url(../img/parallax/ouroboros.svg);
	--rot: -20deg; --dy: 64px; opacity: .4;
}
#s-members .stars-far { inset: 0; background-image: url(../img/parallax/stars-far.svg); background-size: cover; --dy: 20px; opacity: .55; }
#s-members .key-band { bottom: 3%; --dx: -60px; --dy: 40px; opacity: .22; }

.founders { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
.founder { position: relative; display: flex; flex-direction: column; }
.founder-portrait {
	position: relative; aspect-ratio: 4 / 5; overflow: hidden;
	margin-bottom: 1rem;
	border: 1px solid rgba(217, 172, 68, .34);
	border: 1px solid color-mix(in srgb, var(--lamp) 34%, transparent);
}
.founder-portrait img {
	width: 100%; height: 100%; object-fit: cover; object-position: center 22%;
	filter: grayscale(.66) contrast(1.08) sepia(.16);
	transition: filter .6s var(--ease), transform .8s var(--ease);
}
.founder:hover .founder-portrait img, .founder:focus-within .founder-portrait img {
	filter: grayscale(0) contrast(1) sepia(0); transform: scale(1.04);
}
.founder-portrait::after {
	content: ''; position: absolute; inset: 0;
	background: linear-gradient(180deg, transparent 40%, color-mix(in srgb, var(--ink) 80%, transparent) 100%);
}
.founder h3 { font-family: var(--display); font-weight: 400; font-size: 1.3rem; margin: 0 0 .15rem; }
.founder .role { display: block; font-size: .78rem; color: var(--lamp); opacity: .85; margin-bottom: .7rem; }
.founder p { font-size: .88rem; opacity: .72; margin: 0 0 1rem; }
.founder .socials { margin-top: auto; }

.socials { display: flex; gap: .55rem; flex-wrap: wrap; }
.socials a {
	width: 36px; height: 36px; display: grid; place-items: center;
	border: 1px solid rgba(150, 145, 130, .45);
	border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
	font-size: .92rem; opacity: .7;
	transition: opacity .25s, border-color .25s, background-color .25s, color .25s;
}
.socials a:hover, .socials a:focus-visible {
	opacity: 1; border-color: var(--lamp); background: var(--lamp); color: var(--ink);
}
.socials img { width: 15px; height: 15px; object-fit: contain; filter: brightness(0) invert(1); opacity: .85; }
.socials a:hover img, .socials a:focus-visible img { filter: none; opacity: 1; }

/* ====================================================== 7 — colophon/footer */
.colophon {
	position: relative; z-index: 1;
	min-height: auto;
	padding: clamp(3.5rem, 8vw, 6rem) clamp(1.25rem, 5vw, 4.5rem) 2rem;
	padding-right: calc(var(--rail-w) + clamp(1.25rem, 5vw, 4.5rem));
	color: var(--marble);
	border-top: 1px solid color-mix(in srgb, var(--stone) 22%, transparent);
	display: block;
}
.colophon-grid {
	max-width: 78rem; margin: 0 auto;
	display: grid; gap: clamp(2rem, 5vw, 4rem);
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	align-items: start;
}
.colophon .brand img { width: 52px; height: 52px; }
.colophon .brand { margin-bottom: 1.1rem; }
.colophon .brand span { color: var(--marble); font-size: 1.15rem; }
.colophon a.mail { opacity: .75; font-size: .92rem; }
.colophon a.mail:hover { opacity: 1; color: var(--lamp); }
.colophon h4 { font-family: var(--display); font-weight: 400; font-size: 1.05rem; margin: 0 0 .9rem; }
.colophon ul { list-style: none; margin: 0; padding: 0; }
.colophon li { margin-bottom: .5rem; }
.colophon li a { opacity: .75; font-size: .92rem; }
.colophon li a:hover { opacity: 1; color: var(--lamp); }
.colophon .socials { margin-top: 1.4rem; }
.copyright {
	max-width: 78rem; margin: clamp(2.5rem, 5vw, 3.5rem) auto 0;
	padding-top: 1.4rem;
	border-top: 1px solid color-mix(in srgb, var(--stone) 18%, transparent);
	font-size: .78rem; opacity: .55; line-height: 1.8;
}
.copyright a { text-decoration: underline; text-underline-offset: 2px; }

/* ================================================================== preloader */
#preloader {
	position: fixed; inset: 0; z-index: 900;
	display: grid; place-items: center;
	background: #F4ECDC;
	transition: opacity .6s var(--ease), visibility .6s;
}
#preloader.is-done { opacity: 0; visibility: hidden; }
#preloader { animation: preloader-bail .5s ease 3.2s forwards; }
@keyframes preloader-bail { to { opacity: 0; visibility: hidden; } }
#preloader .ring {
	width: 46px; height: 46px; border: 1px solid rgba(7, 12, 18, .18);
	border-top-color: var(--verdigris); border-radius: 50%;
	animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ================================================================ responsive */
@media (min-width: 1280px) {
	:root { --rail-w: 9.5rem; }
	/* Only once there is a reserved gutter may the active label stay put. */
	.rail-item.is-active > .rail-btn .rail-label { opacity: .95; transform: none; }
}

@media (max-width: 1100px) {
	.founders { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.founder:last-child { grid-column: 1 / -1; max-width: 22rem; }
}

@media (max-width: 860px) {
	:root { --rail-w: 2.6rem; }
	body { font-size: 16px; }

	.nav {
		position: fixed; inset: 0 0 auto 0; z-index: -1;
		padding: 4.6rem 1.25rem 1.25rem;
		background: color-mix(in srgb, var(--ink) 94%, transparent);
		transform: translateY(-102%); transition: transform .42s var(--ease);
		margin-left: 0;
	}
	.nav.is-open { transform: none; }
	.nav ul { flex-direction: column; gap: .2rem; }
	.nav a { display: block; padding: .8rem 0; font-size: 1.1rem; color: var(--marble); }
	.burger { display: block; }

	.stage {
		padding: 5.5rem 1.25rem 5.5rem;
		padding-right: calc(var(--rail-w) + 1.25rem);
		min-height: auto;
	}
	#s-patreon, #s-discord { min-height: 100vh;
	min-height: 100vh; min-height: 100svh; }

	/* One article fills the screen at a time on a phone; each is its own stop. */
	.plates { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.plate { min-height: 78vh;
		min-height: 78svh; align-items: center; padding: 2rem 0; }
	.plate-link { width: 100%; }
	.plate-img { aspect-ratio: 3 / 2; }

	.founders { grid-template-columns: minmax(0, 1fr); }
	.founder:last-child { max-width: none; }
	.founder-portrait { aspect-ratio: 4 / 3; }

	.colophon { padding-right: calc(var(--rail-w) + 1.25rem); }
	.colophon-grid { grid-template-columns: minmax(0, 1fr); }

	.rail { padding: .6rem .35rem; right: .45rem; }
	.rail::before { right: calc(.3rem + 6px); }
	.rail-label { display: none; }
	.advance { bottom: .6rem; }
	.advance-txt { display: none; }
	.advance-ring { width: 38px; height: 38px; }

	.well::before {
		inset: -1.75rem -1.5rem;
		background: radial-gradient(78% 60% at 50% 50%, var(--well) 0%,
		            color-mix(in srgb, var(--well) 86%, transparent) 46%,
		            transparent 88%);
	}

	/* Parallax runs shallower on small screens: less travel, fewer layers. */
	.lyr { --dy: 0px; }
	#s-patreon .sun   { --dy: -34px; width: 52vw; }
	#s-patreon .coln  { --dy: 74px; }
	#s-patreon .colf  { --dy: 32px; }
	#s-patreon .hills { --dy: 16px; }

	#s-art-1 .cave    { --dy: 26px; width: 118%; right: -30%; top: 0; height: 100%; opacity: .4; }
	#s-art-2 .owl     { --dx: -18vw; --dy: -30px; width: 72vw; right: 0; bottom: 9%; opacity: .5; }
	#s-art-3 .stars-mid  { --dy: 26px; }
	#s-art-3 .stars-near { --dy: 52px; }
	#s-discord .dialectic { --dy: 24px; width: 150vw; height: 150vw; }
	#s-members .ouroboros { --dy: 28px; width: 160vw; height: 160vw; }
	.key-band { height: 30px; }
}

@media (max-width: 560px) {
	.lede { font-size: clamp(2rem, 9.5vw, 2.9rem); max-width: 100%; }
	.title { font-size: clamp(1.7rem, 7.5vw, 2.3rem); }
	.btn { width: 100%; justify-content: center; text-align: center; }
	.plate h3 { font-size: 1.2rem; }
}

/* Coarse pointers get no hover-only affordances hidden behind hover. */
@media (hover: none) {
	.plate-link::before { width: 0; }
}

/* ---------------------------------------------------- motion preferences */
@media (prefers-reduced-motion: reduce) {
	.lyr, .scenery { transform: none !important; }
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
}

/* ---------------------------------------------------- no-JS: plain page */
.no-js .rail, .no-js .advance, .no-js #preloader { display: none; }
.no-js #sky { background: linear-gradient(176deg, #F4ECDC, #070C12 72%); }
.no-js .stage { padding-right: clamp(1.25rem, 5vw, 4.5rem); }