/* Bloodline Chronicles website. The look follows the Claude Design canvas "Bloodline Chronicles — Website":
   an old family chronicle — parchment, brown ink, gold tooling, red wax and dark leather. */

:root {
	--parch: #ECDDB6;
	--parch2: #E2CFA3;
	--parch-lt: #F4EACF;
	--ink: #5C3E20;
	--ink-dk: #3D2814;
	--ink-soft: #7A5A36;
	--gold: #B08434;
	--gold-lt: #D9B46A;
	--wax: #A62620;
	--wax-dk: #801A16;
	--leather: #62261E;
	--deep: #2A1A12;
	--deeper: #1F140D;
	--black: #1C110B;
	--moss: #3F5E2A;
	--moss-dk: #2D4520;
	--cream: #F1E4C2;
	--cream-2: #E5D3A6;
	--muted: #CDBB90;
	--display: 'IM Fell English', Georgia, serif;
	--caps: 'Cinzel', Georgia, serif;
	--black-letter: 'UnifrakturMaguntia', 'IM Fell English', serif;
	--body: 'EB Garamond', Georgia, serif;
	--mono: 'Courier Prime', 'Courier New', monospace;
}

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

html { scroll-padding-top: 24px; }

body {
	margin: 0;
	font-family: var(--body);
	font-size: 19px;
	line-height: 1.62;
	color: var(--ink);
	background-color: var(--deep);
	background-image: radial-gradient(ellipse 80% 40% at 50% 0%, #3B2519 0%, rgba(42, 26, 18, 0) 70%);
	background-repeat: no-repeat;
}

a { color: var(--wax); }
a:hover { color: var(--wax-dk); }
img { max-width: 100%; display: block; }

.skip {
	position: absolute; left: -9999px; top: 8px; z-index: 10;
	background: var(--cream); color: var(--ink-dk); padding: 10px 16px; font-family: var(--caps); font-weight: 700;
}
.skip:focus { left: 12px; }

:focus-visible { outline: 3px solid var(--gold-lt); outline-offset: 2px; }

.wrap { max-width: 1240px; margin: 0 auto; padding: 0 40px; }

/* --- Header --------------------------------------------------------------------------------------- */

.hdr { background: var(--leather); border-bottom: 4px double var(--gold); position: relative; z-index: 5; }
.hdr-in { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; min-height: 80px; padding-top: 8px; padding-bottom: 8px; }
.hdr-r { display: flex; align-items: center; gap: 16px; }

a.logo { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; color: var(--cream); min-height: 48px; }
a.logo:hover { color: #fff; }
.logo-seal {
	width: 46px; height: 46px; flex: 0 0 auto;
	border-radius: 50% 46% 52% 48% / 48% 52% 46% 50%;
	background: radial-gradient(circle at 35% 30%, #C63A30 0%, #A62620 45%, #801A16 100%);
	box-shadow: 0 2px 0 #4a0f0c;
	display: grid; place-items: center;
	font-family: var(--black-letter); font-size: 26px; line-height: 1; color: #F4E3BE;
}
.logo-img { width: 46px; height: 46px; flex: 0 0 auto; image-rendering: pixelated; border-radius: 3px; box-shadow: 0 2px 0 var(--black); }
.logo-name { font-family: var(--black-letter); font-size: 30px; line-height: 1; }

.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
	font-family: var(--caps); font-size: 14px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
	color: #EAD9AE; text-decoration: none; min-height: 44px; padding: 0 14px;
	display: inline-flex; align-items: center; border-radius: 2px;
}
.nav a:hover { background: rgba(0, 0, 0, .22); color: #fff; }
.nav a[aria-current] { color: #fff; box-shadow: inset 0 -3px 0 var(--gold-lt); }

.menu {
	display: none; width: 48px; height: 48px; place-items: center;
	background: var(--deep); border: 2px solid var(--gold); border-radius: 3px; color: #EAD9AE; cursor: pointer; padding: 0;
}

/* --- Buttons -------------------------------------------------------------------------------------- */

.btn {
	font-family: var(--caps); font-weight: 700; font-size: 15px; letter-spacing: .08em; text-transform: uppercase;
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	min-height: 52px; padding: 0 26px;
	border: 2px solid var(--black); border-radius: 3px; color: #F6ECD0; text-decoration: none; cursor: pointer;
	box-shadow: inset 0 0 0 1px rgba(217, 180, 106, .75), 0 3px 0 var(--black);
	line-height: 1.2; text-align: center;
}
.btn:hover { color: #fff; filter: brightness(1.14); }
.btn:active { transform: translateY(2px); box-shadow: inset 0 0 0 1px rgba(217, 180, 106, .75), 0 1px 0 var(--black); }
.btn-leather { background: var(--leather); }
.btn-green { background: var(--moss); }
.btn-red { background: var(--wax); }
.btn-sm { min-height: 44px; font-size: 13px; padding: 0 18px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

/* --- Shared ornaments ----------------------------------------------------------------------------- */

.kicker { font-family: var(--caps); font-size: 14px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-lt); margin: 0 0 18px; }
.eyebrow { font-family: var(--caps); font-size: 14px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--wax); margin: 0; }
.flourish { color: var(--ink); display: block; max-width: 100%; height: auto; }

.seal {
	width: 68px; height: 68px; flex: 0 0 auto;
	border-radius: 50% 46% 52% 48% / 48% 52% 46% 50%;
	background: radial-gradient(circle at 35% 30%, #C63A30 0%, #A62620 45%, #801A16 100%);
	box-shadow: 0 3px 0 #5a120f;
	display: grid; place-items: center; color: #F4E3BE;
	font-family: 'IM Fell English SC', serif; font-size: 26px; line-height: 1; position: relative;
}
.seal::after { content: ""; position: absolute; inset: 8px; border-radius: 50%; border: 1.5px solid rgba(244, 227, 190, .5); }
.seal-green { background: radial-gradient(circle at 35% 30%, #5E8642 0%, #3F5E2A 50%, #2D4520 100%); box-shadow: 0 3px 0 #1f3016; }

.ribbon {
	position: absolute; top: -14px; right: 84px; width: 30px; height: 168px; z-index: 2;
	background: linear-gradient(90deg, #861D18 0%, #B52E27 45%, #8E1F1A 100%);
	clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 88%, 0 100%);
}

.tile {
	width: 60px; height: 60px; flex: 0 0 auto; background: var(--deep); border: 2px solid var(--gold); border-radius: 3px;
	display: grid; place-items: center; box-shadow: 0 2px 0 var(--black);
}
.tile svg { width: 36px; height: 36px; display: block; }

/* The parchment sheet that the page content sits on. */
.sheet-outer { padding: 0 40px; }
.sheet {
	position: relative; max-width: 1240px; margin: 0 auto;
	background-color: var(--parch);
	background-image:
		radial-gradient(ellipse at 50% 35%, rgba(246, 237, 212, .75) 0%, rgba(236, 221, 182, 0) 55%),
		radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0) 62%, rgba(140, 100, 45, .2) 100%);
	border-radius: 3px;
	box-shadow: 0 0 0 1px #C9AF78, 0 0 0 11px var(--leather), 0 0 0 12px var(--gold), 0 0 0 14px var(--black), 0 30px 60px rgba(0, 0, 0, .55);
	padding: 104px 88px 88px;
}

/* --- Home ----------------------------------------------------------------------------------------- */

.hero { padding: 80px 0 120px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.hero h1 { font-family: var(--display); font-weight: 400; font-size: 92px; line-height: .95; color: #F4E8C8; margin: 0; }
.tag { font-family: var(--display); font-style: italic; font-size: 30px; line-height: 1.25; color: var(--gold-lt); margin: 22px 0 0; }
.lede { font-size: 21px; color: var(--cream-2); margin: 22px 0 0; max-width: 32em; }
.meta { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 26px 0 0; padding: 0; list-style: none; font-family: var(--caps); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.meta li { display: flex; align-items: center; gap: 8px; }
.meta li::before { content: ""; width: 6px; height: 6px; background: var(--gold); transform: rotate(45deg); }
.hero-art svg { width: 100%; height: auto; display: block; }

.sec { margin: 0 0 112px; }
.sec:last-child { margin-bottom: 0; }
.sec-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; margin: 0 0 52px; }
.h2 { font-family: var(--display); font-weight: 400; font-size: 52px; line-height: 1.08; color: var(--ink-dk); margin: 0; }
.sub { font-size: 20px; max-width: 34em; margin: 0; }

.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; position: relative; list-style: none; margin: 0; padding: 0; }
.steps::before { content: ""; position: absolute; top: 34px; left: 12.5%; right: 12.5%; border-top: 2px dashed #B39364; }
.step { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; position: relative; }
.step h3 { font-family: var(--display); font-weight: 400; font-size: 28px; line-height: 1.15; color: var(--ink-dk); margin: 4px 0 0; }
.step p { margin: 0; font-size: 18px; max-width: 15em; }

.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.card {
	position: relative; background: var(--parch-lt); border: 1px solid #C9AF78; border-radius: 4px;
	padding: 30px 28px 22px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 3px 0 #CDB582;
}
.card::before, .card::after { content: ""; position: absolute; width: 18px; height: 18px; border-color: var(--gold); border-style: solid; }
.card::before { top: 8px; left: 8px; border-width: 2px 0 0 2px; }
.card::after { bottom: 8px; right: 8px; border-width: 0 2px 2px 0; }
.card h3 { font-family: var(--display); font-weight: 400; font-size: 28px; line-height: 1.15; color: var(--ink-dk); margin: 4px 0 0; }
.card p { margin: 0; font-size: 18px; line-height: 1.55; }
a.more {
	margin-top: auto; font-family: var(--caps); font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
	color: var(--wax); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
}
a.more:hover { color: var(--wax-dk); text-decoration: underline; }

.gallery { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 28px; }
.gallery .big { grid-row: span 2; }

.band {
	display: flex; align-items: center; gap: 28px; background: var(--deep); color: var(--cream); border-radius: 4px;
	padding: 32px 36px; box-shadow: inset 0 0 0 1px var(--gold), 0 0 0 5px var(--leather);
}
.band .tile { width: 76px; height: 76px; }
.band .tile svg { width: 44px; height: 44px; }
.band-body { flex: 1 1 auto; }
.band-t { font-family: var(--display); font-size: 30px; line-height: 1.2; margin: 0; color: #F4E8C8; }
.band p { margin: 6px 0 0; color: var(--cream-2); font-size: 18px; }

.cta { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.cta .btn-row { justify-content: center; margin-top: 18px; }

/* --- Screenshots ---------------------------------------------------------------------------------- */

.shot { margin: 32px 0; display: flex; flex-direction: column; gap: 12px; }
.gallery .shot { margin: 0; }
.shot-frame { background: var(--leather); padding: 7px; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--gold), 0 3px 0 var(--black); display: flex; flex-direction: column; }
.shot-frame img { width: 100%; height: auto; border: 1px solid var(--gold); image-rendering: auto; }
.gallery .shot img { aspect-ratio: 16 / 9; object-fit: cover; }
.gallery .big .shot-frame img { height: 100%; }
.gallery .big .shot-frame { flex: 1 1 auto; }
.gallery .big img { aspect-ratio: auto; flex: 1 1 auto; min-height: 320px; }
.shot figcaption { font-style: italic; font-size: 17px; line-height: 1.45; color: var(--ink); text-align: center; padding: 0 8px; }
a.shot-link { display: block; }

/* --- Footer --------------------------------------------------------------------------------------- */

.ftr { margin-top: 104px; background: var(--deeper); border-top: 4px double var(--gold); color: var(--cream-2); padding: 64px 0 36px; font-size: 17px; }
.ftr-grid { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: 40px; }
.ftr h2 { font-family: var(--caps); font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-lt); margin: 0 0 8px; }
.ftr ul { list-style: none; margin: 0; padding: 0; }
.ftr a { color: var(--cream); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.ftr a:hover { text-decoration: underline; color: #fff; }
.ftr-tag { font-family: var(--display); font-style: italic; font-size: 20px; color: var(--gold-lt); margin: 14px 0 0; }
.legal { margin-top: 48px; padding-top: 22px; border-top: 1px solid rgba(176, 132, 52, .35); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 15px; color: var(--muted); }
.legal p { margin: 0; }

/* --- Guide ---------------------------------------------------------------------------------------- */

.top { padding-top: 36px; }
.top-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.top .kicker { margin: 0; font-size: 13px; }
.top-t { font-family: var(--display); font-size: 40px; line-height: 1.1; color: #F4E8C8; margin: 4px 0 0; font-weight: 400; }

.search { position: relative; width: 340px; max-width: 100%; }
.search-box { display: flex; align-items: center; gap: 10px; background: var(--deeper); border: 1px solid var(--gold); border-radius: 3px; padding: 0 14px; min-height: 48px; }
.search label { font-family: var(--caps); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-lt); }
.search input { flex: 1 1 auto; min-width: 0; background: transparent; border: 0; color: var(--cream); font-family: var(--body); font-size: 18px; min-height: 44px; outline: none; }
.search input::placeholder { color: #B9A579; }
.search-box:focus-within { box-shadow: 0 0 0 2px var(--gold-lt); }
.results {
	position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 20; margin: 0; padding: 6px; list-style: none;
	background: var(--parch-lt); border: 1px solid #C9AF78; border-radius: 4px; box-shadow: 0 0 0 4px var(--leather), 0 16px 40px rgba(0, 0, 0, .5);
	max-height: 420px; overflow-y: auto;
}
.results[hidden] { display: none; }
.results a { display: block; padding: 10px 12px; border-radius: 3px; text-decoration: none; color: var(--ink-dk); }
.results a:hover, .results a:focus, .results a.active { background: var(--parch2); outline: none; }
.results .r-t { font-family: var(--display); font-size: 20px; line-height: 1.2; display: block; }
.results .r-c { font-family: var(--caps); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--wax); }
.results .r-s { font-size: 16px; line-height: 1.4; color: var(--ink); display: block; margin-top: 2px; }
.results .none { padding: 10px 12px; font-style: italic; }
.results mark { background: rgba(217, 180, 106, .55); color: inherit; padding: 0 1px; }

.book { display: flex; align-items: flex-start; max-width: 1240px; margin: 36px auto 0; padding: 0 40px; }
.tabs { flex: 0 0 260px; display: flex; flex-direction: column; gap: 6px; padding-top: 56px; margin-right: -14px; position: relative; z-index: 0; }
.tabs-t { font-family: var(--caps); font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-lt); margin: 0 0 8px 24px; }
a.tab {
	display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 30px 6px 16px; margin-left: 24px;
	background: var(--parch2); color: var(--ink-dk); border: 1px solid #9C7F4C; border-right: 0; border-radius: 8px 0 0 8px;
	text-decoration: none; font-family: var(--caps); font-size: 14px; font-weight: 600; letter-spacing: .04em; line-height: 1.25;
	box-shadow: inset 0 -2px 0 rgba(92, 62, 32, .15); transition: margin-left .12s;
}
a.tab:nth-of-type(even) { background: #D7BF8C; }
a.tab:hover { margin-left: 14px; color: var(--ink-dk); }
.tab .num { font-family: 'IM Fell English SC', serif; font-size: 16px; color: var(--wax); width: 30px; flex: 0 0 auto; letter-spacing: 0; }
a.tab[aria-current] { margin-left: 0; background: var(--wax); color: #F6ECD0; border-color: var(--wax-dk); box-shadow: inset 0 -2px 0 var(--wax-dk), -3px 3px 0 rgba(0, 0, 0, .25); }
a.tab[aria-current] .num { color: #F4E3BE; }

.gpage {
	flex: 1 1 auto; min-width: 0; position: relative; z-index: 1;
	background-color: var(--parch);
	background-image:
		radial-gradient(ellipse at 40% 30%, rgba(246, 237, 212, .75) 0%, rgba(236, 221, 182, 0) 55%),
		radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0) 62%, rgba(140, 100, 45, .2) 100%);
	border-radius: 3px;
	box-shadow: 0 0 0 1px #C9AF78, 0 0 0 11px var(--leather), 0 0 0 12px var(--gold), 0 0 0 14px var(--black), 0 30px 60px rgba(0, 0, 0, .55);
	padding: 64px 84px;
}
.gpage .ribbon { right: 64px; width: 28px; height: 150px; }
.running { display: flex; align-items: center; gap: 14px; font-family: var(--caps); font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 30px; max-width: 760px; }
.running::before, .running::after { content: ""; flex: 1 1 auto; border-top: 1px solid #C2A673; }

.prose { max-width: 760px; }
.crumbs { font-family: var(--caps); font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); margin: 0; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.crumbs a { color: var(--wax); text-decoration: none; }
.prose h1 { font-family: var(--display); font-weight: 400; font-size: 62px; line-height: 1.02; color: var(--ink-dk); margin: 10px 0 20px; }
.prose h2 { font-family: var(--display); font-weight: 400; font-size: 36px; line-height: 1.15; color: var(--ink-dk); margin: 60px 0 14px; display: flex; align-items: center; gap: 16px; }
.prose h2::before { content: ""; width: 10px; height: 10px; flex: 0 0 auto; background: var(--wax); transform: rotate(45deg); box-shadow: 0 0 0 2px var(--parch), 0 0 0 3px var(--gold); }
.prose h3 { font-family: var(--display); font-weight: 400; font-size: 26px; line-height: 1.2; color: var(--ink-dk); margin: 32px 0 8px; }
.prose p { margin: 0 0 18px; }
.prose strong { color: var(--ink-dk); font-weight: 600; }
.lead { font-size: 22px; line-height: 1.55; color: #4A3119; }
.lead::first-letter { font-family: var(--black-letter); float: left; font-size: 78px; line-height: .82; color: var(--wax); padding: 8px 12px 0 0; }
.prose ol, .prose ul { margin: 0 0 22px; padding-left: 28px; }
.prose li { margin: 0 0 8px; padding-left: 4px; }
.prose li > ul, .prose li > ol { margin: 8px 0 0; }
.prose li > p { margin: 0 0 8px; }
.prose li::marker { color: var(--wax); font-family: var(--display); }
.toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 0; padding: 0 !important; list-style: none; }
.toc li { margin: 0 !important; padding: 0 !important; }
.toc a {
	display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; font-family: var(--caps); font-size: 12px; font-weight: 700;
	letter-spacing: .1em; text-transform: uppercase; color: var(--ink); background: var(--parch-lt); border: 1px solid #C9AF78; border-radius: 3px; text-decoration: none;
}
.toc a:hover { border-color: var(--wax); color: var(--wax); }
.prose > .flourish { margin: 40px 0 0; }

.note { position: relative; background: #F3E8C9; border: 1px solid #C9AF78; border-radius: 4px; padding: 22px 26px 22px 90px; margin: 28px 0; box-shadow: 0 3px 0 #D6BF8C; }
.note .seal { position: absolute; left: 20px; top: 20px; width: 50px; height: 50px; font-size: 22px; }
.note .seal::after { inset: 6px; }
.note-t { font-family: var(--caps); font-weight: 700; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--moss-dk); margin: 0 0 4px !important; }
.note p { margin: 0 0 8px; font-size: 18px; }
.note p:last-child { margin-bottom: 0; }
.warn { background: #F2DFC8; border-color: #C99A7E; box-shadow: 0 3px 0 #D9B39A; }
.warn .note-t { color: var(--wax-dk); }

.tbl { overflow-x: auto; border: 1px solid #B39364; border-radius: 4px; box-shadow: 0 0 0 4px var(--parch2), 0 0 0 5px #C9AF78; margin: 24px 5px 22px; background: var(--parch-lt); }
.tbl table { border-collapse: collapse; width: 100%; font-size: 18px; line-height: 1.45; }
.tbl th { background: var(--leather); color: var(--cream); font-family: var(--caps); font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; text-align: left; padding: 14px 18px; white-space: nowrap; }
.tbl td { padding: 13px 18px; border-top: 1px solid #D2BC8A; vertical-align: top; }
.tbl tbody tr:nth-child(even) td { background: #E9DAB1; }
.tbl td:first-child { font-family: var(--display); font-size: 20px; color: var(--ink-dk); }
.tbl.plain td:first-child { font-family: var(--body); font-size: 18px; color: var(--ink); }
.tbl td.k, .tbl td:first-child code { font-family: var(--mono); font-size: 15px; }
.tbl .num { font-variant-numeric: tabular-nums; white-space: nowrap; }

.kind { display: inline-flex; align-items: center; min-height: 26px; padding: 0 9px; border-radius: 2px; background: var(--leather); color: var(--cream); font-family: var(--caps); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.kind-boon { background: var(--moss); }
.kind-flaw { background: var(--wax); }
.kind-quirk { background: #6E5A3A; }
.kind-legendary { background: var(--gold); color: var(--black); }

code { font-family: var(--mono); font-size: .86em; background: var(--parch2); padding: 1px 6px; color: var(--ink-dk); border-radius: 2px; white-space: nowrap; }

.turns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 64px; max-width: 760px; }
a.turn { display: flex; flex-direction: column; gap: 4px; padding: 20px 26px; min-height: 104px; background: var(--parch2); border: 1px solid #B39364; text-decoration: none; color: var(--ink-dk); position: relative; justify-content: center; }
a.turn:hover { background: #D9C392; color: var(--ink-dk); }
.turn-k { font-family: var(--caps); font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--wax); }
.turn-t { font-family: var(--display); font-size: 25px; line-height: 1.2; }
.prev { clip-path: polygon(36px 0, 100% 0, 100% 100%, 0 100%, 0 36px); }
.prev::after { content: ""; position: absolute; top: 0; left: 0; width: 36px; height: 36px; background: linear-gradient(135deg, transparent 50%, #B39364 50%, #CDB582 100%); }
.next { grid-column: 2; text-align: right; align-items: flex-end; clip-path: polygon(0 0, calc(100% - 36px) 0, 100% 36px, 100% 100%, 0 100%); }
.next::after { content: ""; position: absolute; top: 0; right: 0; width: 36px; height: 36px; background: linear-gradient(225deg, transparent 50%, #B39364 50%, #CDB582 100%); }

/* --- Server owners -------------------------------------------------------------------------------- */

.intro { padding-top: 64px; padding-bottom: 88px; }
.intro h1 { font-family: var(--display); font-weight: 400; font-size: 68px; line-height: 1; color: #F4E8C8; margin: 0; max-width: 14em; }
.intro .lede { max-width: 36em; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 0; padding: 0; list-style: none; }
.chips li { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 16px; background: var(--deeper); border: 1px solid var(--gold); border-radius: 3px; font-family: var(--caps); font-size: 13px; letter-spacing: .1em; color: var(--cream); }
.chips li::before { content: ""; width: 7px; height: 7px; background: var(--gold-lt); transform: rotate(45deg); }

.split { display: flex; flex-wrap: wrap; gap: 56px; align-items: flex-start; padding: 72px 80px; }
.split .ribbon { right: 22px; }
.split > .main { flex: 999 1 560px; min-width: 0; }
.split > .aside { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 24px; position: sticky; top: 24px; }
.main h2 { font-family: var(--display); font-weight: 400; font-size: 40px; line-height: 1.12; color: var(--ink-dk); margin: 0 0 14px; display: flex; align-items: center; gap: 18px; }
.main h2 .seal { width: 48px; height: 48px; font-size: 20px; }
.main h2 .seal::after { inset: 6px; }
.main h3 { font-family: var(--display); font-weight: 400; font-size: 26px; line-height: 1.2; color: var(--ink-dk); margin: 32px 0 8px; }
.main p { margin: 0 0 18px; }
.main section { margin: 0 0 72px; }
.main section:last-child { margin-bottom: 0; }
.main strong { color: var(--ink-dk); font-weight: 600; }
.main ul { padding-left: 26px; }
.main li { margin: 0 0 6px; }
.main li::marker { color: var(--wax); }

.isteps { list-style: none; margin: 0 0 18px; padding: 0 !important; display: flex; flex-direction: column; gap: 28px; }
.isteps > li { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 18px; margin: 0; }
.sn { width: 40px; height: 40px; display: grid; place-items: center; background: var(--leather); color: var(--cream); font-family: 'IM Fell English SC', serif; font-size: 19px; border-radius: 3px; box-shadow: inset 0 0 0 1px var(--gold); }
.st { font-family: var(--display); font-size: 25px; line-height: 1.25; color: var(--ink-dk); margin: 4px 0 6px !important; }
.isteps p { margin: 0 0 12px; }

.code { background: var(--deeper); border: 1px solid var(--gold); border-radius: 4px; box-shadow: 0 0 0 4px var(--leather), 0 0 0 5px var(--black); overflow: hidden; margin: 14px 5px 18px; }
.code-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 6px 0 16px; min-height: 48px; background: var(--leather); border-bottom: 1px solid var(--gold); }
.code-k { font-family: var(--caps); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #EAD9AE; }
.copy { min-height: 40px; padding: 0 14px; background: var(--deep); border: 1px solid var(--gold); border-radius: 3px; color: var(--cream); font-family: var(--caps); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.copy:hover { background: #3B2519; }
.code pre { margin: 0; padding: 18px 20px; font-family: var(--mono); font-size: 16px; line-height: 1.65; color: var(--cream); overflow-x: auto; white-space: pre; }
.c-c { color: #B9A579; font-style: italic; }
.c-k { color: #F0B09C; }
.c-s { color: #C5D79A; }
.c-n { color: #F2C97A; }
.code code { background: none; padding: 0; color: inherit; font-size: inherit; white-space: pre; }

.panel { background: var(--deep); color: var(--cream-2); padding: 26px 24px; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--gold), 0 0 0 5px var(--leather); font-size: 17px; }
.panel h2 { font-family: var(--caps); font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-lt); margin: 0 0 14px; }
.panel dl { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 14px; }
.panel dt { font-family: var(--caps); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding-top: 3px; }
.panel dd { margin: 0; color: var(--cream); }
.panel .btn { width: 100%; margin-top: 18px; }
.parch-panel { background: var(--parch-lt); border: 1px solid #C9AF78; border-radius: 4px; padding: 24px; box-shadow: 0 3px 0 #CDB582; font-size: 17px; }
.parch-panel h2 { font-family: var(--caps); font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 8px; }
.parch-panel ul { list-style: none; margin: 0; padding: 0; }
.parch-panel a { display: flex; align-items: center; min-height: 44px; border-top: 1px solid #D9C495; text-decoration: none; color: var(--ink-dk); font-family: var(--display); font-size: 20px; }
.parch-panel li:first-child a { border-top: 0; }
.parch-panel a:hover { color: var(--wax); }

/* --- Smaller screens ------------------------------------------------------------------------------ */

@media (max-width: 960px) {
	.hero-grid { grid-template-columns: minmax(0, 1fr); }
	.hero-art { max-width: 560px; }
	.grid3, .steps, .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.steps::before { display: none; }
	.gallery .big { grid-row: auto; grid-column: span 2; }
	.ftr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.book { flex-direction: column; align-items: stretch; }
	.tabs { flex: none; flex-direction: row; overflow-x: auto; padding: 10px 0 0; margin: 0 0 -1px; gap: 5px; scrollbar-width: thin; }
	.tabs-t { display: none; }
	a.tab { margin: 10px 0 0; flex: 0 0 auto; border: 1px solid #9C7F4C; border-bottom: 0; border-radius: 8px 8px 0 0; padding: 0 14px 6px; white-space: nowrap; font-size: 13px; }
	a.tab:hover { margin-left: 0; }
	a.tab[aria-current] { margin-top: 0; min-height: 58px; }
	.split > .aside { position: static; }
}

@media (max-width: 760px) {
	.menu { display: grid; }
	.hdr-r { position: static; }
	.hdr-r .nav, .hdr-r .btn { display: none; }
	.hdr.open .hdr-r { position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 8px; padding: 12px 16px 18px; background: var(--leather); border-bottom: 4px double var(--gold); }
	.hdr.open .hdr-r .nav { display: flex; flex-direction: column; align-items: stretch; }
	.hdr.open .hdr-r .btn { display: inline-flex; }
	.hdr-in { flex-wrap: nowrap; }
}

@media (max-width: 620px) {
	body { font-size: 18px; }
	.wrap, .sheet-outer, .book { padding-left: 14px; padding-right: 14px; }
	.logo-name { font-size: 22px; }
	.logo-img { width: 38px; height: 38px; }
	.sheet { padding: 64px 22px 48px; }
	.sheet .ribbon, .split .ribbon { right: 22px; width: 22px; height: 96px; top: -9px; }
	.hero { padding: 48px 0 72px; }
	.hero h1 { font-size: 54px; }
	.tag { font-size: 24px; }
	.h2 { font-size: 38px; }
	.grid3, .steps, .gallery, .ftr-grid { grid-template-columns: minmax(0, 1fr); }
	.gallery .big { grid-column: auto; }
	.gallery .big img { min-height: 0; aspect-ratio: 16 / 9; }
	.band { flex-direction: column; align-items: flex-start; }
	.btn-row .btn { width: 100%; }
	.top-t { font-size: 32px; }
	.search { width: 100%; }
	.gpage { padding: 44px 20px 36px; }
	.gpage .ribbon { right: 22px; width: 22px; height: 96px; top: -9px; }
	.prose h1 { font-size: 44px; }
	.prose h2 { font-size: 30px; margin-top: 44px; }
	.lead { font-size: 20px; }
	.lead::first-letter { font-size: 64px; }
	.turns { grid-template-columns: minmax(0, 1fr); }
	.next { grid-column: auto; }
	.note { padding: 20px 18px; }
	.note .seal { position: static; margin-bottom: 10px; }
	.tbl table { font-size: 16px; }
	.tbl td:first-child { font-size: 18px; }
	/* Settings and command tables: each row becomes a small block, with the name on its own line. */
	.tbl:has(td.k) thead { display: none; }
	.tbl:has(td.k) table, .tbl:has(td.k) tbody { display: block; }
	.tbl:has(td.k) tr { display: flex; flex-wrap: wrap; border-top: 1px solid #D2BC8A; }
	.tbl:has(td.k) tr:first-child { border-top: 0; }
	.tbl:has(td.k) tbody tr:nth-child(even) { background: #E9DAB1; }
	.tbl:has(td.k) td { border-top: 0; background: none !important; flex: 1 1 0; }
	.tbl:has(td.k) td.k { flex: 1 1 100%; padding-bottom: 0; font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }
	.tbl:has(td.k) td.num { flex: 0 0 auto; max-width: 40%; font-family: var(--mono); font-size: 14px; padding-top: 12px; }
	.kind { padding: 0 6px; font-size: 10px; }
	.tbl th, .tbl td { padding: 10px 9px; }
	.tbl th { font-size: 11px; letter-spacing: .06em; }
	.tbl .num { white-space: normal; }
	.tbl { margin-left: 3px; margin-right: 3px; }
	.intro { padding-top: 44px; padding-bottom: 64px; }
	.intro h1 { font-size: 46px; }
	.split { padding: 56px 20px; gap: 40px; }
	.main h2 { font-size: 32px; }
	.code pre { font-size: 14px; padding: 14px; }
}

/* --- Guide contents ------------------------------------------------------------------------------- */

.chapters { list-style: none; margin: 32px 0 0; padding: 0 !important; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.chapters li { margin: 0 !important; padding: 0 !important; }
.chapters a { display: flex; flex-direction: column; gap: 2px; height: 100%; padding: 18px 20px; background: var(--parch-lt); border: 1px solid #C9AF78; border-radius: 4px; box-shadow: 0 3px 0 #CDB582; text-decoration: none; color: var(--ink-dk); }
.chapters a:hover { border-color: var(--wax); color: var(--ink-dk); }
.chapters .r-c { font-family: var(--caps); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--wax); }
.chapters .r-t { font-family: var(--display); font-size: 25px; line-height: 1.2; }
.chapters .r-s { font-size: 16px; line-height: 1.45; color: var(--ink); }
@media (max-width: 620px) { .chapters { grid-template-columns: minmax(0, 1fr); } }