/*
 * Base: reset, body, type, buttons, and the plain page layout.
 * Every value comes from tokens.css.
 */

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
	font-family: var(--sans);
	font-size: var(--fs-body);
	line-height: var(--lh-text);
	font-weight: 400;
	background: var(--surface);
	color: var(--ink);
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body.no-scroll { overflow: hidden; }

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

/* A picture positioned in its frame from the page editor: the whole picture is loaded and the frame
   crops it. :where() keeps these at the lowest priority, so a template's own proportions always win. */
:where(img.javan-focus) { object-fit: cover; }
:where(img.javan-focus-portrait) { aspect-ratio: 4 / 5; }
:where(img.javan-focus-landscape) { aspect-ratio: 3 / 2; }
:where(img.javan-focus-square) { aspect-ratio: 1; }
:where(img.javan-focus-wide) { aspect-ratio: 16 / 9; }
/* Set to "Show whole picture" in the editor: nothing is cut off, and whatever frame the template gave
   the picture lets go of its fixed shape and takes the picture's own. */
img.javan-whole { width: 100%; height: auto !important; max-height: none !important; object-fit: contain !important; } /* its proportions are set on the picture itself */
:has(> img.javan-whole) { height: auto !important; max-height: none !important; aspect-ratio: auto !important; }

/* Labels meant for screen readers only (WordPress and its plugins print these). */
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); border: 0; white-space: nowrap; }

a { color: inherit; text-decoration: none; }

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

p, h1, h2, h3, h4, h5, h6, blockquote { text-wrap: pretty; }

::placeholder { color: var(--ink-soft); opacity: 1; }

/* Keyboard focus is always visible. */
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.skip-link {
	position: absolute;
	left: 12px;
	top: -60px;
	z-index: 300;
	padding: 12px 18px;
	background: var(--dark);
	color: var(--paper);
}
.skip-link:focus { top: 12px; }


/* ---------- Type ---------- */

/* A label: small, bold, uppercase, tracked. The smallest text on the site. */
.label {
	font-family: var(--ui);
	font-size: var(--fs-label);
	font-weight: var(--label-weight);
	letter-spacing: var(--label-tracking);
	text-transform: uppercase;
	line-height: var(--lh-label);
	color: var(--ink);
}
.label.on-dark { color: var(--gold-light); }

/* An eyebrow: the small line above a heading. Same size as a label, regular weight, wider tracking, deep gold. */
.eyebrow {
	font-family: var(--ui);
	font-size: var(--fs-label);
	font-weight: var(--menu-weight);
	letter-spacing: var(--eyebrow-tracking);
	text-transform: uppercase;
	line-height: var(--lh-label);
	color: var(--link);
}
.eyebrow.on-dark { color: var(--gold-light); }

h1, h2, h3, h4, .h1, .h2, .h3, .h4, .h-section {
	font-family: var(--serif);
	font-weight: 400;
	line-height: var(--lh-tight);
	letter-spacing: -.005em;
	color: inherit;
}
h1, .h1 { font-size: var(--fs-h1); }
h2, .h2, .h-section { font-size: var(--fs-h2); }
h3, .h3 { font-size: var(--fs-h3); }
h4, .h4 { font-size: var(--fs-h4); }

.lead,
.body-lede { font-size: var(--fs-lead); line-height: var(--lh-text); max-width: 52ch; }
.small { font-size: var(--fs-small); }
.soft { color: var(--ink-soft); }   /* secondary sentences on cream, 15px or more */

.skip-link { font-family: var(--ui); font-size: var(--fs-label); font-weight: var(--label-weight); letter-spacing: var(--label-tracking); text-transform: uppercase; }


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

.btn,
.book-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	font-family: var(--ui);
	font-size: var(--fs-button);
	font-weight: var(--menu-weight);
	letter-spacing: var(--label-tracking);
	text-transform: uppercase;
	line-height: var(--lh-label);
	padding: 15px 26px;
	border: 1px solid currentColor;
	color: var(--ink);
	background: transparent;
	white-space: nowrap;
	transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.btn:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.btn.gold,
.book-btn { background: var(--gold-surface); border-color: var(--gold-surface); color: var(--on-gold); }
.btn.gold:hover,
.book-btn:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.btn.ghost-light { color: var(--paper); border-color: var(--paper); }
.btn.ghost-light:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }

.btn .arrow { width: 18px; height: 1px; background: currentColor; position: relative; transition: width .25s ease; }
.btn .arrow::after { content: ''; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }
.btn:hover .arrow { width: 26px; }

.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

/* A text link styled as a label with a rule under it. */
.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-family: var(--ui);
	font-size: var(--fs-button);
	font-weight: var(--menu-weight);
	letter-spacing: var(--label-tracking);
	text-transform: uppercase;
	color: var(--ink);
	padding-bottom: 6px;
	border-bottom: 1px solid var(--gold);
	transition: gap .25s ease;
}
.link-arrow.on-dark { color: var(--paper); }
.link-arrow:hover { gap: 20px; }

/* Inline links inside sentences. */
.prose a:not(.btn),
.text-link { color: var(--link); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose a:not(.btn):hover,
.text-link:hover { color: var(--ink); }


/* ---------- Plain pages and posts ---------- */

.page-head {
	max-width: 900px;
	margin: 0 auto;
	padding: var(--section-pad) var(--gutter) clamp(24px, 3vw, 40px);
	text-align: center;
}
.page-head .eyebrow { display: block; margin-bottom: 18px; }

.prose {
	max-width: 760px;
	margin: 0 auto;
	padding: 0 var(--gutter) var(--section-pad);
}
.prose > * + * { margin-top: 1.2em; }
.prose h2, .prose h3, .prose h4 { margin-top: 1.8em; }
.prose h2 { font-size: var(--fs-h3); }
.prose h3 { font-size: var(--fs-h4); }
.prose h4 { font-size: var(--fs-lead); }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: .4em; }
.prose blockquote { border-left: 2px solid var(--gold); padding-left: 22px; font-family: var(--serif); font-size: var(--fs-h4); line-height: 1.4; }
.prose img { margin: 2em auto; }

.post-image { max-width: 1000px; margin: 0 auto clamp(32px, 4vw, 56px); padding: 0 var(--gutter); }

.post-nav {
	max-width: 760px;
	margin: 0 auto var(--section-pad);
	padding: 26px var(--gutter) 0;
	border-top: 1px solid var(--rule);
	display: flex;
	justify-content: space-between;
	gap: 24px;
	font-family: var(--serif);
	font-size: var(--fs-h4);
	line-height: 1.3;
}
.post-nav a:hover { color: var(--link); }
.post-nav div:last-child { text-align: right; }