/* ==========================================================================
   Skinvestment — core stylesheet
   Load order: fonts.css → main.css → glass.css → (scrolly.css)

   HARD RULE, learned from a real bug in the previous build:
   never put `overflow-x: hidden` on html, body, or a full-page wrapper.
   `hidden` makes the element a scroll container. If anything inside it is even
   one pixel taller than its content box (a negative margin, a shadow, a
   translated element), the mouse wheel latches onto that container, exhausts
   its few pixels of range, and never chains up to the viewport — the page stops
   scrolling entirely. Use `overflow-x: clip`, which clips without creating a
   scroll container, and fix overflow at its source instead.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   theme.json already emits --wp--preset--* custom properties. These are short
   aliases so the CSS stays readable, and they are the single place a colour or
   step is defined.
   -------------------------------------------------------------------------- */
:root {
	--ink:        #2b241f;
	--ink-soft:   #5b4f46;
	--cream:      #f8f2e9;
	--oat:        #efe3d1;
	--paper:      #fffdf9;
	--clay:       #bd6f52;
	--clay-deep:  #96513a;
	--sage:       #8f9a76;

	--line:       color-mix(in srgb, var(--ink) 15%, transparent);
	--line-soft:  color-mix(in srgb, var(--ink) 8%, transparent);

	--font-display: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
	--font-body:    'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
	--font-mono:    'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

	/* Fluid type scale. clamp() means no layout-shifting breakpoint jumps. */
	--fs-label:   0.6875rem;
	--fs-small:   0.875rem;
	--fs-body:    clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
	--fs-lede:    clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
	--fs-h3:      clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
	--fs-h2:      clamp(1.75rem, 1.3rem + 2vw, 3rem);
	--fs-h1:      clamp(2.4rem, 1.4rem + 4.6vw, 5.25rem);

	/* Spacing */
	--gap-xs:  clamp(0.5rem, 1vw, 0.75rem);
	--gap-s:   clamp(0.875rem, 1.6vw, 1.25rem);
	--gap-m:   clamp(1.5rem, 3vw, 2.25rem);
	--gap-l:   clamp(2.5rem, 5vw, 4rem);
	--gap-xl:  clamp(4rem, 8.5vw, 7rem);

	--gutter:  clamp(1.25rem, 6vw, 6rem);
	--measure: 62ch;

	--radius:     14px;
	--radius-lg:  26px;
	--radius-pill: 999px;

	--ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
	--ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
	--dur:       0.45s;

	--header-h: 68px;
}

/* --------------------------------------------------------------------------
   2. Reset / base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	/* clip, not hidden — see the hard rule at the top of this file. */
	overflow-x: clip;
	scroll-padding-top: calc(var(--header-h) + 1rem);
}

/* Smooth scrolling is a motion effect. It is opt-out for people who have asked
   the OS for less motion, and it is scoped so it never fights a programmatic
   scroll. */
@media (prefers-reduced-motion: no-preference) {
	html:focus-within { scroll-behavior: smooth; }
}

body {
	margin: 0;
	overflow-x: clip;
	background: var(--cream);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
img { font-style: italic; background-repeat: no-repeat; background-size: cover; }

input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 0.5em;
	font-family: var(--font-display);
	font-weight: 500;
	line-height: 1.05;
	letter-spacing: -0.02em;
	text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); letter-spacing: -0.01em; }

p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--clay-deep); text-underline-offset: 0.18em; }

em { font-style: italic; }

hr { border: 0; border-top: 1px solid var(--line); margin: var(--gap-l) 0; }

::selection { background: var(--clay); color: var(--paper); }

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

/* Screen-reader-only, with the standard skip-link reveal. */
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip-path: inset(50%);
	white-space: nowrap; border: 0;
}
.skip-link:focus {
	position: fixed; top: 0.5rem; left: 0.5rem;
	z-index: 999;
	width: auto; height: auto;
	clip-path: none; margin: 0;
	padding: 0.75rem 1.25rem;
	background: var(--ink); color: var(--cream);
	border-radius: var(--radius);
	text-decoration: none;
}

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
.skin-shell { width: 100%; }

.skin-wrap {
	width: 100%;
	padding-inline: var(--gutter);
	margin-inline: auto;
	max-width: 1440px;
}
.skin-wrap--narrow { max-width: 820px; }
.skin-wrap--text   { max-width: 68ch; }

.skin-section { padding-block: var(--gap-xl); }
.skin-section--tight { padding-block: var(--gap-l); }
.skin-section--oat   { background: var(--oat); }
.skin-section--paper { background: var(--paper); }
.skin-section--ink   { background: var(--ink); color: var(--cream); }
.skin-section--ink h1,
.skin-section--ink h2,
.skin-section--ink h3 { color: var(--cream); }

.skin-eyebrow {
	display: block;
	margin: 0 0 var(--gap-s);
	font-family: var(--font-mono);
	font-size: var(--fs-label);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--clay-deep);
}
.skin-section--ink .skin-eyebrow { color: var(--oat); }

.skin-lede {
	font-size: var(--fs-lede);
	line-height: 1.6;
	max-width: var(--measure);
	color: var(--ink-soft);
}

.skin-section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	justify-content: space-between;
	gap: var(--gap-s);
	margin-bottom: var(--gap-l);
}

/* --------------------------------------------------------------------------
   4. Header
   The header is a real <header> with a real menu. It is position:sticky, not
   fixed — sticky participates in layout, so it cannot overlap content or
   create the "content hides under the bar" class of bug.
   -------------------------------------------------------------------------- */
.skin-header {
	position: sticky;
	top: 0;
	z-index: 50;
	/* A fixed height, not min-height: the hero pulls itself up by exactly
	   --header-h to sit underneath, and that arithmetic only stays correct if
	   the header's height is knowable. */
	height: var(--header-h);
	display: flex;
	align-items: center;
	gap: var(--gap-m);
	padding-inline: var(--gutter);
	transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

/* The WordPress admin bar is fixed at the top of the viewport for logged-in
   users, so a header stuck to top:0 would sit underneath it. */
body.admin-bar .skin-header { top: 32px; }
@media screen and (max-width: 782px) {
	body.admin-bar .skin-header { top: 46px; }
}

/* Over a full-bleed hero the header floats transparently, then picks up its
   glass surface once you have scrolled past the hero. The class is toggled by
   an IntersectionObserver sentinel — no scroll listener, no per-frame work. */
.skin-header--over-hero { background: transparent; color: var(--cream); }
.skin-header--over-hero a { color: var(--cream); }

/* A short scrim behind the transparent header. Without it, legibility of the
   brand and the menu button depends entirely on what happens to be at the top
   of whichever photograph Alesya has set as the hero — swap in a bright, high-key
   image and the cream chrome disappears. This guarantees a dark enough backing
   regardless of the photo, while being invisible over the dark ones. */
.skin-header--over-hero::before {
	content: '';
	position: absolute;
	inset: 0 0 auto 0;
	height: calc(100% + 3rem);
	pointer-events: none;
	z-index: -1;
	background: linear-gradient(to bottom, rgb(24 19 15 / 0.55), rgb(24 19 15 / 0));
}

.skin-brand {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-family: var(--font-display);
	font-size: 1.15rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	text-decoration: none;
	color: inherit;
	margin-inline-end: auto;
}
.skin-brand img {
	width: 34px; height: 34px;
	border-radius: 50%;
	object-fit: cover;
}

.skin-nav__list {
	display: flex;
	align-items: center;
	gap: clamp(0.9rem, 1.8vw, 1.75rem);
	margin: 0; padding: 0;
	list-style: none;
}
/* Matches both our fallback markup (.skin-nav__item) and wp_nav_menu()'s own
   output (li.menu-item), so the styling holds whether or not a menu has been
   assigned at Appearance → Menus. */
.skin-nav__list li a {
	position: relative;
	display: inline-block;
	font-size: 0.9375rem;
	text-decoration: none;
	color: inherit;
	padding-block: 0.35rem;
	white-space: nowrap;
}
.skin-nav__list li a::after {
	content: '';
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform var(--dur) var(--ease);
}
.skin-nav__list li a:hover::after,
.skin-nav__list li.current-menu-item > a::after,
.skin-nav__list li a[aria-current]::after { transform: scaleX(1); transform-origin: left; }

/* The mobile <dialog> menu reuses wp_nav_menu output too. */
.skin-menu ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gap-xs); }

@media (max-width: 900px) {
	.skin-header__nav, .skin-header .skin-btn { display: none; }
}

/* Mobile menu — a <dialog>, so the browser gives us the focus trap, Escape to
   close, inert background and correct semantics for free. The previous build
   hand-rolled this with a hidden checkbox and a sibling <label>, which is what
   collided with the theme's own CSS and blacked out the whole site. */
.skin-menu-toggle { display: none; }
@media (max-width: 900px) {
	.skin-menu-toggle {
		display: inline-flex; align-items: center; justify-content: center;
		width: 42px; height: 42px;
		border-radius: 50%;
		flex: none;
	}
	/* The bars are positioned against the <span>, so the span must establish the
	   containing block. Without this the ::before/::after resolve against the
	   nearest positioned ancestor — the header — and fly off to its corner. */
	.skin-menu-toggle span { position: relative; }
	.skin-menu-toggle span,
	.skin-menu-toggle span::before,
	.skin-menu-toggle span::after {
		display: block; width: 18px; height: 1.5px;
		background: currentColor; border-radius: 2px;
		transition: transform var(--dur) var(--ease);
	}
	.skin-menu-toggle span::before,
	.skin-menu-toggle span::after { content: ''; position: absolute; }
	.skin-menu-toggle span::before { transform: translateY(-5.5px); }
	.skin-menu-toggle span::after  { transform: translateY(5.5px); }
}

.skin-menu[open] {
	display: flex;
	flex-direction: column;
	gap: var(--gap-s);
	margin: 0 0 0 auto;
	inset: 0 0 0 auto;
	width: min(86vw, 360px);
	max-height: 100dvh;
	height: 100dvh;
	padding: calc(var(--header-h) + var(--gap-m)) var(--gap-m) var(--gap-m);
	border: 0;
	background: var(--paper);
	color: var(--ink);
	overflow-y: auto;
	overscroll-behavior: contain;
}
.skin-menu::backdrop { background: rgb(43 36 31 / 0.45); backdrop-filter: blur(3px); }
.skin-menu a {
	font-family: var(--font-display);
	font-size: 1.35rem;
	text-decoration: none;
	color: var(--ink);
	padding-block: 0.35rem;
	border-bottom: 1px solid var(--line-soft);
}
.skin-menu__close {
	position: absolute; top: 1rem; right: 1rem;
	width: 42px; height: 42px; border-radius: 50%;
	font-size: 1.4rem; line-height: 1;
	color: var(--ink);
}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.skin-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.85em 1.5em;
	border-radius: var(--radius-pill);
	background: var(--ink);
	color: var(--cream);
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.skin-btn:hover { background: var(--clay-deep); transform: translateY(-2px); }
.skin-btn:active { transform: translateY(0); }
.skin-btn__icon { font-style: normal; transition: transform var(--dur) var(--ease); }
.skin-btn:hover .skin-btn__icon { transform: translate(2px, -2px); }

.skin-btn--accent { background: var(--clay-deep); }
.skin-btn--accent:hover { background: var(--ink); }

.skin-btn--ghost {
	background: transparent;
	color: currentColor;
	box-shadow: inset 0 0 0 1px currentColor;
}
.skin-btn--ghost:hover { background: currentColor; color: var(--cream); }
.skin-header--over-hero .skin-btn--ghost:hover { color: var(--ink); }

.skin-btn--text {
	padding: 0;
	background: none;
	color: var(--clay-deep);
	border-radius: 0;
	border-bottom: 1px solid currentColor;
	padding-bottom: 0.2em;
}
.skin-btn--text:hover { background: none; color: var(--ink); transform: none; }

.skin-btn--small { padding: 0.65em 1.2em; font-size: 0.875rem; }

/* Floating book affordance — persistent, thumb-reachable on mobile. */
.skin-float-book {
	position: fixed;
	right: clamp(0.75rem, 2vw, 1.5rem);
	bottom: clamp(0.75rem, 2vw, 1.5rem);
	z-index: 45;
	display: inline-flex; align-items: center; gap: 0.5rem;
	padding: 0.9em 1.35em;
	border-radius: var(--radius-pill);
	font-family: var(--font-mono);
	font-size: var(--fs-label);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--cream);
	background: var(--clay-deep);
	box-shadow: 0 12px 30px -10px rgb(73 47 38 / 0.45);
	transition: transform var(--dur) var(--ease);
}
.skin-float-book:hover { transform: translateY(-3px); }
/* Hidden on the booking page itself — nothing more annoying than a button that
   points at the page you are already on. */
.page-book .skin-float-book { display: none; }

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.skin-hero {
	position: relative;
	min-height: 100svh;
	display: grid;
	align-content: end;
	gap: var(--gap-m);
	padding: calc(var(--header-h) + var(--gap-l)) var(--gutter) var(--gap-l);
	/* Slide up by exactly the header's height so the photograph runs full-bleed
	   behind the transparent header. Matches `height: var(--header-h)` above. */
	margin-top: calc(-1 * var(--header-h));
	color: var(--cream);
	isolation: isolate;
	overflow: clip;
}
/* The capture root for the WebGL glass. Everything the glass should be able to
   "see" must be a real child of this — see the note in front-page.php. */
.skin-hero__scene {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.skin-hero__media {
	position: absolute;
	inset: 0;
}
.skin-hero__media img {
	width: 100%; height: 100%;
	object-fit: cover;
	object-position: center 18%;
}

/* Scrim as a real element rather than .skin-hero::after. A pseudo-element of
   the root is never captured by the glass shader, which left it refracting the
   raw, un-dimmed photograph. */
.skin-hero__scrim {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(to top, rgb(24 19 15 / 0.94) 0%, rgb(24 19 15 / 0.82) 40%, rgb(24 19 15 / 0.58) 72%, rgb(24 19 15 / 0.40) 100%),
		linear-gradient(to right, rgb(24 19 15 / 0.72), rgb(24 19 15 / 0.10) 78%);
}
/* Contrast for the scrim above is measured, not guessed: cream (#f8f2e9) over
   that composite sits above 4.5:1 against the brightest part of the photograph.

   Width in rem, NOT ch. The `ch` unit resolves against *this* element's
   font-size (16px), not the 84px headline inside it — `max-width: 20ch` here
   computes to ~160px and puts every word of the h1 on its own line. */
.skin-hero__copy { position: relative; z-index: 1; max-width: min(50rem, 92%); }
.skin-hero h1 { color: var(--cream); margin-bottom: var(--gap-s); max-width: 15ch; }
.skin-hero h1 em { font-style: italic; }
.skin-hero .skin-lede { color: rgb(248 242 233 / 0.88); max-width: 46ch; }
.skin-hero .skin-eyebrow { color: rgb(239 227 209 / 0.85); }
.skin-hero__actions {
	display: flex; flex-wrap: wrap; gap: var(--gap-xs);
	margin-top: var(--gap-m);
}
.skin-hero__actions .skin-btn { background: var(--cream); color: var(--ink); }
.skin-hero__actions .skin-btn:hover { background: var(--clay); color: var(--cream); }
.skin-hero__actions .skin-btn--ghost { background: transparent; color: var(--cream); }

/* Facts strip sits on the glass surface — see glass.css */
/* Positioned inside .skin-hero__scene so it is a DIRECT child of the glass
   capture root (the library rejects nested glass), and sits where it used to in
   the flow layout. */
/* `.skin-hero__facts.glass` — not `.skin-hero__facts` alone. glass.css loads
   after main.css, and `.glass { position: relative }` is the same specificity,
   so the later rule won and dropped this strip back into flow at the top of the
   hero. Two classes beats one. */
.skin-hero__facts.glass {
	position: absolute;
	left: var(--gutter);
	bottom: var(--gap-l);
	z-index: 2;
	display: flex; flex-wrap: wrap;
	gap: clamp(1.25rem, 4vw, 3rem);
	padding: var(--gap-s) var(--gap-m);
	border-radius: var(--radius-lg);
	width: fit-content;
	max-width: calc(100% - (2 * var(--gutter)));
}

/* Reserve room so the absolutely-positioned strip can never collide with the
   copy on a short viewport. */
.skin-hero { padding-bottom: calc(var(--gap-l) + 7rem); }

@media (max-width: 640px) {
	.skin-hero__facts {
		gap: 1rem 1.5rem;
		padding: var(--gap-xs) var(--gap-s);
	}
}
.skin-hero__fact strong {
	display: block;
	font-family: var(--font-display);
	font-size: 1.5rem;
	font-weight: 500;
	line-height: 1.1;
}
.skin-hero__fact span {
	font-family: var(--font-mono);
	font-size: var(--fs-label);
	letter-spacing: 0.09em;
	text-transform: uppercase;
	opacity: 0.8;
}

/* --------------------------------------------------------------------------
   7. Content blocks
   -------------------------------------------------------------------------- */
.skin-statement {
	font-family: var(--font-display);
	font-size: clamp(1.35rem, 0.9rem + 1.9vw, 2.4rem);
	font-weight: 400;
	line-height: 1.28;
	letter-spacing: -0.015em;
	max-width: 26ch;
	text-wrap: balance;
}
.skin-statement em { font-style: italic; color: var(--clay-deep); }

.skin-quote {
	text-align: center;
	padding-block: var(--gap-xl);
	background: var(--oat);
}
.skin-quote blockquote {
	margin: 0 auto;
	max-width: 24ch;
	font-family: var(--font-display);
	font-style: italic;
	font-size: clamp(1.5rem, 1rem + 2.4vw, 2.9rem);
	line-height: 1.22;
	text-wrap: balance;
}
.skin-quote cite {
	display: block;
	margin-top: var(--gap-m);
	font-family: var(--font-mono);
	font-size: var(--fs-label);
	font-style: normal;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink-soft);
}

/* Card grids — auto-fit means one rule covers every breakpoint, so there is no
   cascade of `grid-template-columns: … !important` media queries to keep in
   sync (the previous build had three). */
.skin-grid {
	display: grid;
	gap: var(--gap-m);
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}
.skin-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); }
.skin-grid--tight { gap: 1px; background: var(--line); }
.skin-grid--tight > * { background: var(--paper); }

.skin-card {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	padding: var(--gap-m);
	border-radius: var(--radius);
	background: var(--paper);
	color: inherit;
	text-decoration: none;
	transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
a.skin-card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px -18px rgb(43 36 31 / 0.4); }
.skin-card__tag {
	font-family: var(--font-mono);
	font-size: var(--fs-label);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--clay-deep);
}
.skin-card h3 { margin: 0; }
.skin-card p { font-size: var(--fs-small); color: var(--ink-soft); }

/* Media grid (studio / Instagram) */
.skin-media-grid {
	display: grid;
	gap: var(--gap-xs);
	grid-template-columns: repeat(auto-fit, minmax(min(200px, 45%), 1fr));
}
.skin-media-grid a {
	display: block;
	overflow: clip;
	border-radius: var(--radius);
	aspect-ratio: 1;
}
.skin-media-grid img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform 0.7s var(--ease-out);
}
.skin-media-grid a:hover img { transform: scale(1.05); }
.skin-media-grid__more {
	display: grid; place-items: center;
	text-align: center;
	background: var(--ink);
	color: var(--cream);
	font-family: var(--font-mono);
	font-size: var(--fs-label);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
}

/* Split (image + copy) */
.skin-split {
	display: grid;
	gap: var(--gap-l);
	grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
	align-items: center;
}
.skin-split--wide-copy { grid-template-columns: minmax(min(300px,100%), 0.85fr) minmax(min(320px,100%), 1.15fr); }
@media (max-width: 800px) { .skin-split--wide-copy { grid-template-columns: 1fr; } }
.skin-split img { width: 100%; border-radius: var(--radius); }

.skin-checklist { list-style: none; padding: 0; margin: var(--gap-m) 0; display: grid; gap: 0.7rem; }
.skin-checklist li { position: relative; padding-left: 1.7rem; }
.skin-checklist li::before {
	content: '';
	position: absolute; left: 0; top: 0.55em;
	width: 0.7rem; height: 0.4rem;
	border-left: 1.5px solid var(--clay-deep);
	border-bottom: 1.5px solid var(--clay-deep);
	transform: rotate(-45deg);
}

/* Price tag */
.skin-price {
	display: inline-block;
	padding: 0.45em 0.9em;
	border: 1px solid var(--clay-deep);
	border-radius: var(--radius-pill);
	font-family: var(--font-mono);
	font-size: var(--fs-label);
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--clay-deep);
	margin-bottom: var(--gap-s);
}

/* FAQ */
.skin-faq { display: grid; gap: 0; max-width: 820px; }
.skin-faq details { border-bottom: 1px solid var(--line); }
.skin-faq summary {
	display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	padding: 1.15rem 0;
	cursor: pointer;
	list-style: none;
	font-family: var(--font-display);
	font-size: 1.0625rem;
	font-weight: 500;
}
.skin-faq summary::-webkit-details-marker { display: none; }
.skin-faq summary::after {
	content: '+';
	flex: none;
	font-size: 1.3rem;
	color: var(--clay-deep);
	transition: transform var(--dur) var(--ease);
}
.skin-faq details[open] summary::after { transform: rotate(45deg); }
.skin-faq__body { padding-bottom: 1.25rem; color: var(--ink-soft); max-width: var(--measure); }

/* Search */
.skin-search { display: flex; gap: 0.5rem; flex-wrap: wrap; max-width: 32rem; }
.skin-search__field {
	flex: 1 1 14rem;
	min-width: 0;
	padding: 0.8em 1.1em;
	border: 1px solid var(--line);
	border-radius: var(--radius-pill);
	background: var(--paper);
	color: var(--ink);
	font-size: 0.9375rem;
}
.skin-search__field::placeholder { color: var(--ink-soft); opacity: 0.7; }
.skin-search__field:focus-visible { outline: 2px solid var(--clay-deep); outline-offset: 2px; }

/* Pagination */
.wp-block-query-pagination, .navigation.pagination {
	display: flex; gap: 0.5rem; flex-wrap: wrap;
	margin-top: var(--gap-l);
	font-family: var(--font-mono);
	font-size: var(--fs-small);
}
.navigation.pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 2.5rem; padding: 0.5rem 0.75rem;
	border: 1px solid var(--line);
	border-radius: var(--radius-pill);
	text-decoration: none;
	color: var(--ink);
}
.navigation.pagination .page-numbers.current,
.navigation.pagination .page-numbers:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.navigation.pagination .screen-reader-text { position: absolute !important; }

/* Journal */
.skin-article { padding-block: var(--gap-l); border-bottom: 1px solid var(--line); }
.skin-article h2 { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); }
.skin-article__body { max-width: var(--measure); color: var(--ink-soft); }
.skin-article__body ul { padding-left: 1.15rem; }

/* --------------------------------------------------------------------------
   8. Footer
   -------------------------------------------------------------------------- */
.skin-footer { background: var(--ink); color: var(--cream); padding-block: var(--gap-xl) var(--gap-m); }
.skin-footer a { color: var(--oat); text-decoration: none; }
.skin-footer a:hover { text-decoration: underline; }
.skin-footer__top {
	display: grid;
	gap: var(--gap-l);
	grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
	padding-bottom: var(--gap-l);
	border-bottom: 1px solid rgb(248 242 233 / 0.16);
}
.skin-footer__brand strong { font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; }
.skin-footer__brand p { color: rgb(248 242 233 / 0.72); font-size: var(--fs-small); margin-top: 0.6rem; }
.skin-footer__quote { font-family: var(--font-display); font-style: italic; }
.skin-footer h2 {
	font-family: var(--font-mono);
	font-size: var(--fs-label);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgb(248 242 233 / 0.6);
	margin-bottom: 0.9rem;
}
.skin-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.skin-footer__bottom {
	display: flex; flex-wrap: wrap; gap: var(--gap-s);
	justify-content: space-between;
	padding-top: var(--gap-m);
	font-size: var(--fs-small);
	color: rgb(248 242 233 / 0.6);
}

/* --------------------------------------------------------------------------
   9. Reveal-on-scroll
   Opacity + a small translate only. No scroll listener, no layout-affecting
   property, so it cannot cause the "image jumps when I scroll back up" class of
   bug. Fully disabled under reduced-motion, and — critically — the default
   state is visible, so if JS never runs the content is still readable.
   -------------------------------------------------------------------------- */
[data-reveal] { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
	.js [data-reveal] {
		opacity: 0;
		transform: translateY(18px);
		transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
		transition-delay: var(--reveal-delay, 0ms);
	}
	.js [data-reveal].is-visible { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   10. Utilities
   -------------------------------------------------------------------------- */
.skin-stack   { display: grid; gap: var(--gap-m); }
.skin-stack--s { gap: var(--gap-s); }
.skin-center  { text-align: center; margin-inline: auto; }
.skin-flow > * + * { margin-top: var(--gap-s); }