/*
 * traveller.ink — Traveller's drawings are the page. CSS only places and scales them.
 *
 * Two layouts, switched by the width of the page itself (container query):
 *
 *  >= 900px  COMPOSED: the full-page wireframe (draft.website.1), every drawing at the
 *            spot it has there. Positions are "design px" (the wireframe is 2666 wide)
 *            passed in as --x/--y/--w; --u turns one design px into CSS px, so the
 *            whole composition scales as one picture. Below 900px the lettering on the
 *            drawn tabs drops under ~12px and the body text under 16px, so:
 *  <  900px  STACKED: same pieces, one under another. Pillars narrow to the edges, the
 *            tabs leave the shelf and wrap underneath at a tappable size, and the tower
 *            windows go down the tower one at a time, alternating sides.
 */

@font-face {
	font-family: "Bodoni Moda";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url(../fonts/bodoni-moda-700-latin.woff2) format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Bodoni Moda";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url(../fonts/bodoni-moda-700-latin-ext.woff2) format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
	--sky: #17233a;      /* the tower drawing's sky */
	--tan: #ab9266;      /* the flat panel behind the logo and the lettering, both from draft.website.2 */
	--paper: #efe3c8;
	--serif: "Bodoni Moda", "Bodoni 72", Didot, "Times New Roman", serif;
}

* { box-sizing: border-box; }
html {
	background: #142039 url(../img/web/stars-800.webp) 50% 0 / 800px auto repeat;
	color: var(--paper);
}
body { margin: 0; font: 400 18px/1.55 Georgia, "Times New Roman", serif; }
img { display: block; width: 100%; height: auto; }
a { color: var(--tan); }
a:focus-visible { outline: 3px solid #f3d27a; outline-offset: 4px; border-radius: 4px; }

.t-stage { max-width: 1200px; margin: 0 auto; container-type: inline-size; }
.t-canvas {
	--u: calc(100cqw / 2666);
	position: relative;
	min-height: 100vh;
}

/* the sky between the pillars */
.t-canvas::before {
	content: "";
	position: absolute;
	inset: 0 calc(300 * var(--u));
	background: var(--sky);
}

/* ---------- COMPOSED (the wireframe) ---------- */

.t-mast-logo, .t-tab, .t-hero, .t-house, .t-window, .t-salutations {
	position: absolute;
	left: calc(var(--x) * var(--u));
	top: calc(var(--y) * var(--u));
	width: calc(var(--w) * var(--u));
}
.t-canvas--home { height: calc(var(--stage-h) * var(--u)); min-height: 0; overflow: hidden; }   /* ends where the wireframe ends; the tower's door stays below */

/* pillars: cap, a shaft that repeats for as long as the page is, base */
.t-pillar {
	position: absolute; z-index: 4;
	top: 0; bottom: 0;
	width: calc(496 * var(--u));
	pointer-events: none;
}
.t-pillar--left { left: calc(116 * var(--u)); }
.t-pillar--right { right: calc(116 * var(--u)); }
.t-pillar-cap { position: absolute; z-index: 2; left: calc(36.1 * var(--u)); top: 0; width: calc(422.9 * var(--u)); }
.t-pillar-shaft {
	position: absolute; z-index: 1;
	left: calc(120.5 * var(--u)); width: calc(254.5 * var(--u));
	top: calc(257.5 * var(--u)); bottom: calc(400 * var(--u));
	background: var(--shaft) 0 0 / 100% auto repeat-y;
}
.t-pillar-base { position: absolute; z-index: 2; left: calc(48.3 * var(--u)); bottom: 0; width: calc(399 * var(--u)); }

/* masthead: the flat tan panel, the shelf + logo, the five drawn tabs on the shelf */
.t-mast { position: relative; z-index: 3; }
.t-mast-panel {
	position: absolute;
	left: calc(491 * var(--u)); top: 0;
	width: calc(1684 * var(--u)); height: calc(392 * var(--u));
	background: var(--tan);
}
.t-mast-logo { z-index: 1; }
.t-tabs { position: static; }
.t-tab { z-index: 2; transition: filter .15s; }
.t-tab:hover, .t-tab[aria-current] { filter: brightness(1.15) saturate(1.1); }

/* the home scene */
.t-house, .t-hero, .t-salutations, .t-window { z-index: 1; }
.t-hero { z-index: 2; }
.t-window { z-index: 2; transition: filter .15s, transform .15s; }
.t-window:hover { filter: brightness(1.15) saturate(1.1); }

.t-salutations {
	z-index: 2;
	color: var(--tan);
	font-family: var(--serif);
	font-weight: 700;
	font-size: calc(62 * var(--u));
	line-height: 0.98;
	letter-spacing: -0.025em;
	word-spacing: -0.04em;
}
.t-salutations h1 {
	display: flex; align-items: center; justify-content: center;
	gap: calc(40 * var(--u));
	margin: 0;
	font-size: calc(98 * var(--u));
	line-height: 1;
	letter-spacing: 0;
}
.t-flourish { width: calc(200 * var(--u)); flex: none; }
.t-salutations p { margin: 0; }
.t-salutations h1 + p { margin-top: calc((var(--p1) - 100) * var(--u)); }
.t-salutations p + p { margin-top: calc((var(--p2) - 186) * var(--u)); }

/* every other page */
.t-page {
	position: relative; z-index: 2;
	padding: calc(920 * var(--u)) calc(560 * var(--u)) calc(760 * var(--u));
	font-size: max(17px, calc(40 * var(--u)));
}
.t-page-title {
	margin: 0 0 .6em;
	font: 700 max(30px, calc(98 * var(--u)))/1.05 var(--serif);
	color: var(--tan);
	text-align: center;
}
.t-prose img { width: auto; max-width: 100%; }
.t-section ul { display: flex; flex-wrap: wrap; justify-content: center; gap: .3em 1.4em; margin: 0 0 1.6em; padding: 0; list-style: none; }
.t-section a { font: 700 1.1em/1.3 var(--serif); color: var(--tan); text-decoration: none; border-bottom: 1px solid transparent; }
.t-section a:hover, .t-section a[aria-current] { color: #e9c983; border-bottom-color: currentColor; }
.t-prose a { color: #e9c983; }

/* ---------- STACKED (narrow screens) ---------- */

@container (width < 900px) {
	.t-canvas {
		--pw: clamp(44px, 13cqw, 96px);          /* one pillar's width */
		--pad: calc(var(--pw) * .80);           /* clear of the shaft */
		--win: calc(100cqw - 2 * var(--pad));   /* width between the pillars */
		height: auto !important;
		padding: 0 var(--pad);
	}
	.t-canvas::before { inset: 0 calc(var(--pw) * .5); }
	.t-mast, .t-main { position: relative; z-index: 1; }   /* stacked boxes are in flow: lift them above the sky */

	.t-pillar { width: var(--pw); }
	.t-pillar--left { left: 0; }
	.t-pillar--right { right: 0; }
	.t-pillar-cap { left: 7.3%; top: 0; width: 85.3%; }
	.t-pillar-shaft { left: 24.3%; width: 51.3%; top: calc(var(--pw) * .55); bottom: calc(var(--pw) * 1.2); }
	.t-pillar-base { left: 9.7%; width: 80.4%; }

	.t-mast-logo, .t-tab, .t-hero, .t-house, .t-window, .t-salutations { position: relative; left: auto; top: auto; width: auto; }

	.t-mast { padding-top: 0; }
	.t-mast-panel { left: calc(var(--pw) * -.2); right: calc(var(--pw) * -.2); top: 0; width: auto; height: calc(var(--win) * .2); }
	.t-mast-logo { display: block; margin: 0 calc(var(--pw) * -.3); }
	.t-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 8px; margin: 6px 0 20px; }
	.t-tab img { height: clamp(38px, 8.5cqw, 54px); width: auto; }

	.t-house { display: none; }
	.t-hero { max-width: 560px; margin: 0 auto; }

	.t-salutations {
		max-width: 34em; margin: 26px auto 34px; padding: 0 4%;
		font-size: clamp(17px, 4.4cqw, 26px); line-height: 1.15; letter-spacing: 0;
	}
	.t-salutations h1 { gap: 10px; font-size: clamp(26px, 8cqw, 46px); margin-bottom: .55em; }
	.t-flourish { width: clamp(46px, 14cqw, 110px); }
	.t-salutations h1 + p, .t-salutations p + p { margin-top: .8em; }

	/* the tower: its roof, then plain brick for as long as the windows need */
	.t-windows {
		display: flex; flex-direction: column; gap: clamp(18px, 6cqw, 40px);
		margin: calc(var(--win) * -.22) calc(var(--pad) * -.25) 0;   /* the drawing's sky already starts above the spires */
		padding: calc(var(--win) * 1.15) 4% 60px;
		background:
			var(--top) 0 0 / 100% auto no-repeat,
			var(--bricks) 0 calc(var(--win) * var(--top-ratio) - 2px) / 100% auto repeat-y;
	}
	.t-window { width: min(64%, 380px); }
	.t-window--l { align-self: flex-start; margin-left: 4%; }
	.t-window--r { align-self: flex-end; margin-right: 4%; }

	.t-page { padding: 8px 4% calc(var(--pw) * 2.4); font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
	.t-tab, .t-window { transition: none; }
}