/*
Theme Name: Verriere
Theme URI: http://107.150.41.186:8134/
Author: Studio build
Description: For architectural stained glass studios, glass conservators and decorative glaziers. The page is built as a leaded light: content sits inside irregular glass quarries separated by real lead cames, the glass carries an SVG-filter antique texture, and a scroll-driven sun angle relights every pane. Navigation is a fixed vertical rail, not a top bar.
Version: 1.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: verriere
Tags: art, craft, portfolio, custom-colors, custom-menu, featured-images
*/

/* =====================================================================
   VERRIÈRE
   ---------------------------------------------------------------------
   Five structural rules, written down because they are the whole point
   of this theme and every one of them is a deliberate break from the
   house pattern the studio had fallen into:

     1. Navigation is a fixed VERTICAL rail on the left. No top bar.
     2. There is NO full-viewport photo hero with a headline in the
        bottom-left corner.
     3. There are NO full-width stacked bands of
        eyebrow → big heading → paragraph. Content lives in irregular
        glass quarries inside a leaded grid.
     4. Colour is SATURATED — ruby, cobalt, emerald, amber — on
        near-black lead, not a muted two-tone palette.
     5. The footer is a maker's mark plate, not four columns of links.

   If a future edit reintroduces any of the five, the theme has lost the
   only thing that distinguishes it.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Typed custom properties.
   Registering these means the browser knows --sun is an <angle> and
   --lux is a <percentage>, so both can be INTERPOLATED. A plain
   custom property cannot animate a gradient angle at all — the value is
   just a token substituted at parse time, and the gradient jumps. This
   registration is what makes the sun sweep smoothly across every pane.
   --------------------------------------------------------------------- */
@property --sun {
	syntax: "<angle>";
	inherits: true;
	initial-value: 18deg;
}
@property --lux {
	syntax: "<percentage>";
	inherits: true;
	initial-value: 62%;
}
@property --tint {
	syntax: "<color>";
	inherits: true;
	initial-value: #123f8f;
}

:root {
	/* The lead. Near-black with a blue cast, the way old came reads. */
	--lead:    #0b0c11;
	--lead-2:  #14161d;
	--lead-3:  #1e212a;

	/* Pot-metal glass. Saturated on purpose. */
	--ruby:    #a5122c;
	--ruby-d:  #64091b;
	--cobalt:  #16418f;
	--cobalt-d:#0b2559;
	--emerald: #0b6a51;
	--emerald-d:#053f30;
	--amber:   #c8860f;
	--amber-d: #7d5106;
	--violet:  #4a2270;

	/* Opal / flashed white — the light itself. */
	--opal:    #f4eeda;
	--opal-2:  #ddd3ba;

	--ink:       #f4eeda;
	--ink-2:     rgba(244,238,218,0.68);
	--ink-3:     rgba(244,238,218,0.42);
	--on-glass:  #fbf7ea;

	/* Came widths. A real leaded light uses several gauges, and they are
	   FAT — 9 to 12mm of lead between quarries is normal. Drawn thin,
	   the whole thing stops reading as glass and starts reading as a
	   dashboard of coloured cards, which is exactly what the first pass
	   of this theme looked like. */
	--came:      12px;
	--came-fine: 6px;
	--came-bold: 24px;

	--line:  rgba(244,238,218,0.16);
	--line-2:rgba(244,238,218,0.30);

	--ff-disp: "Cormorant Garamond", "Cormorant", Georgia, serif;
	--ff-body: "Karla", "Helvetica Neue", Arial, sans-serif;
	--ff-data: "IBM Plex Mono", ui-monospace, Menlo, monospace;

	--t-xs:  0.71rem;
	--t-sm:  0.83rem;
	--t-md:  1rem;
	--t-lg:  clamp(1.15rem, 1.5vw, 1.4rem);
	--t-xl:  clamp(1.7rem, 2.8vw, 2.5rem);
	--t-2xl: clamp(2.4rem, 5vw, 4.4rem);
	--t-3xl: clamp(3rem, 7.5vw, 6.5rem);

	--rail:  104px;
	--pad:   clamp(16px, 2.2vw, 34px);

	--ease: cubic-bezier(0.33, 0.06, 0.24, 1);
	--slow: cubic-bezier(0.19, 1, 0.22, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--lead);
	color: var(--ink);
	font-family: var(--ff-body);
	font-size: 1rem;
	line-height: 1.62;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

img, svg, canvas { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

h1, h2, h3, h4 {
	font-family: var(--ff-disp);
	font-weight: 500;
	line-height: 1.04;
	margin: 0;
	letter-spacing: -0.005em;
	text-wrap: balance;
}
h1 { font-size: var(--t-3xl); }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-xl); }
p { margin: 0 0 1em; }

::selection { background: var(--amber); color: var(--lead); }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }

/* =====================================================================
   THE RAIL — fixed vertical navigation
   ===================================================================== */
.rail {
	position: fixed;
	top: 0; left: 0; bottom: 0;
	width: var(--rail);
	z-index: 60;
	background: var(--lead-2);
	border-right: 1px solid var(--line);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	padding-block: 22px;
}

.rail__mark {
	writing-mode: vertical-rl;
	text-orientation: mixed;
	font-family: var(--ff-disp);
	font-size: 1.42rem;
	letter-spacing: 0.30em;
	text-transform: uppercase;
	color: var(--opal);
	white-space: nowrap;
}
.rail__mark b { font-weight: 500; }
.rail__mark i {
	font-style: normal;
	display: block;
	font-family: var(--ff-data);
	font-size: 0.58rem;
	letter-spacing: 0.32em;
	color: var(--ink-3);
	margin-top: 14px;
}

.rail__nav {
	display: flex;
	flex-direction: column;
	gap: 26px;
	align-items: center;
}
/* The menu's own <ul>/<li> carry no visual weight of their own; they
   inherit the rail's direction and gap so one set of rules serves both
   the vertical jamb and the horizontal transom. */
.rail__list {
	display: flex;
	flex-direction: inherit;
	gap: inherit;
	align-items: inherit;
	list-style: none;
	margin: 0;
	padding: 0;
}
.rail__list li { list-style: none; display: block; }

.rail__nav a {
	writing-mode: vertical-rl;
	font-family: var(--ff-data);
	font-size: var(--t-xs);
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--ink-3);
	transition: color 260ms var(--ease);
	position: relative;
	padding-block: 4px;
}
.rail__nav a::before {
	content: "";
	position: absolute; left: -9px; top: 50%;
	width: 3px; height: 3px; border-radius: 50%;
	background: var(--amber);
	transform: translateY(-50%) scale(0);
	transition: transform 300ms var(--slow);
}
.rail__nav a:hover, .rail__nav a.on { color: var(--opal); }
.rail__nav a.on::before { transform: translateY(-50%) scale(1); }

/* The sun dial: shows where the light is coming from, and it is the
   same value the panes are lit by. */
.rail__sun {
	width: 34px; height: 34px;
	border: 1px solid var(--line-2);
	border-radius: 50%;
	position: relative;
	display: grid;
	place-items: center;
}
.rail__sun::after {
	content: "";
	position: absolute;
	width: 5px; height: 5px; border-radius: 50%;
	background: var(--amber);
	box-shadow: 0 0 10px 2px rgba(200,134,15,0.55);
	transform: rotate(var(--sun)) translateY(-12px);
}

/* Narrow: the rail lies down. It becomes a transom over the window
   rather than a jamb beside it — still a single strip of came carrying
   the same marks, just turned through ninety degrees. The nav scrolls
   sideways under the wordmark rather than being squeezed or clipped;
   six labels will never fit across 390px and shrinking them to fit is
   how you end up with type nobody can read. */
@media (max-width: 880px) {
	:root { --rail: 0px; }
	.rail {
		position: sticky;
		inset: 0 0 auto 0;
		width: 100%;
		max-width: 100%;
		height: auto;
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
		padding: 12px 14px 6px;
		border-right: 0;
		border-bottom: 1px solid var(--line);
		background: var(--lead);
	}
	.rail__mark {
		writing-mode: horizontal-tb;
		font-size: 1.05rem;
		letter-spacing: 0.24em;
		margin: 0;
		white-space: nowrap;
	}
	.rail__mark i { display: none; }
	.rail__nav {
		flex-direction: row;
		gap: 20px;
		margin: 0;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
		padding-bottom: 6px;
	}
	.rail__nav::-webkit-scrollbar { display: none; }
	.rail__nav a {
		writing-mode: horizontal-tb;
		white-space: nowrap;
		padding: 4px 0 4px 13px;
		margin: 0;
	}
	/* The bullet moves from above the label to before it. */
	.rail__nav a::before { left: 0; top: 50%; }
	.rail__sun { display: none; }
}

/* =====================================================================
   THE LIGHT — a leaded window
   Each .light is one window opening. The grid GAP is the lead: the
   panel's own background shows through it, so the came network is a
   consequence of the layout rather than a set of drawn lines.
   ===================================================================== */
main { margin-left: var(--rail); position: relative; z-index: 1; }

.light {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: var(--came);
	/* The lead is not flat black: milled came has a rounded heart and
	   catches a little light along one edge, which is why a real window
	   reads as a network of soft grey ribs rather than drawn lines. */
	background: linear-gradient(var(--sun), #14161d 0%, #030407 46%, #0a0b10 100%);
	padding: var(--came);
	position: relative;
}
/* Saddle bars: the horizontal iron the glazier ties a tall light to. */
.light + .light { border-top: var(--came-bold) solid var(--lead-3); }

.pane {
	position: relative;
	overflow: hidden;
	min-height: 0;
	grid-column: span 4;
	/* The glass. A pot-metal quarry is never flat: it is darker at the
	   edges where it seats into the came and brightest where the sun
	   crosses it, which is what --sun drives. */
	background:
		linear-gradient(var(--sun),
			color-mix(in oklab, var(--tint) 82%, black) 0%,
			color-mix(in oklab, var(--tint) 34%, var(--opal)) calc(var(--lux) * 0.62),
			color-mix(in oklab, var(--tint) 88%, black) 100%);
	/* Two things make this read as backlit glass rather than a coloured
	   card. First, a tight black seating line where the quarry beds
	   into the heart of the came. Second — and this is the one that
	   matters — an OUTER glow in the quarry's own colour, so light
	   spills from the glass onto the surrounding lead. Real lead never
	   sits cleanly against lit glass; it is always slightly eaten into
	   by the light coming past it. */
	box-shadow:
		inset 0 0 0 2px rgba(0,0,0,0.72),
		inset 0 0 0 3px rgba(255,255,255,0.05),
		inset 0 0 34px rgba(0,0,0,0.18),
		0 0 22px -2px color-mix(in oklab, var(--tint) 55%, transparent),
		0 0 46px -6px color-mix(in oklab, var(--tint) 30%, transparent);
	transition: background 420ms linear;
}

/* Hand-cut pot metal is never two quarries of identical colour. The
   drift is applied to --tint rather than with a filter: a filter on the
   pane would tint the text as well, and would create a stacking context
   that traps the glass overlay. */
.pane:nth-child(3n)   { --tint: color-mix(in oklab, var(--glass) 88%, #2a1a08); }
.pane:nth-child(3n+1) { --tint: color-mix(in oklab, var(--glass) 92%, var(--opal) 8%); }
.pane:nth-child(4n)   { --tint: color-mix(in oklab, var(--glass) 90%, #06121f); }
.pane:nth-child(5n)   { --tint: color-mix(in oklab, var(--glass) 86%, #1a0510); }

/* Spans. Irregular by design — a leaded light is not a card grid. */
.pane--2  { grid-column: span 2; }
.pane--3  { grid-column: span 3; }
.pane--4  { grid-column: span 4; }
.pane--5  { grid-column: span 5; }
.pane--6  { grid-column: span 6; }
.pane--7  { grid-column: span 7; }
.pane--8  { grid-column: span 8; }
.pane--9  { grid-column: span 9; }
.pane--12 { grid-column: span 12; }
.pane--r2 { grid-row: span 2; }
.pane--r3 { grid-row: span 3; }

@media (max-width: 880px) {
	.light { grid-template-columns: repeat(6, 1fr); }
	.pane, .pane--2, .pane--3, .pane--4, .pane--5,
	.pane--7, .pane--8, .pane--9 { grid-column: span 6; }
	.pane--6 { grid-column: span 6; }
	.pane--r2, .pane--r3 { grid-row: span 1; }
}

/* Glass colours. --glass is the pot the quarry was cut from; --tint is
   the individual piece, which the nth-child drift above nudges away
   from it. */
.pane--ruby    { --glass: var(--ruby);    --tint: var(--ruby); }
.pane--cobalt  { --glass: var(--cobalt);  --tint: var(--cobalt); }
.pane--emerald { --glass: var(--emerald); --tint: var(--emerald); }
.pane--amber   { --glass: var(--amber);   --tint: var(--amber); }
.pane--violet  { --glass: var(--violet);  --tint: var(--violet); }
/* Opal glass — where reading text lives. Light, low chroma, legible. */
.pane--opal {
	--tint: #2a2d36;
	background:
		linear-gradient(var(--sun),
			#171921 0%,
			color-mix(in oklab, #2f333f 70%, var(--opal)) calc(var(--lux) * 0.55),
			#141620 100%);
}
/* A quarry cut with chamfered corners, as a glazier would cut it. */
.pane--cut { clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); }

.pane__in { position: relative; z-index: 2; padding: clamp(18px, 2.2vw, 40px); height: 100%; }
.pane--tight .pane__in { padding: clamp(12px, 1.4vw, 20px); }

/* Reamy glass sheet: the SVG displacement filter is applied to this
   overlay rather than to the text underneath it, so the glass distorts
   without making the copy unreadable. */
.pane__glass {
	position: absolute; inset: -14%; z-index: 1;
	pointer-events: none;
	opacity: 0.9;
	/* Three striations at slightly different pitches and angles. Blown
	   cylinder glass has exactly this: drawn streaks from the blowing,
	   crossed by the ream where the sheet was flattened. One repeating
	   gradient reads as corduroy; three, displaced, read as glass. */
	background:
		repeating-linear-gradient(calc(var(--sun) + 4deg),
			rgba(255,255,255,0.11) 0 1px,
			rgba(0,0,0,0.10) 1px 4px),
		repeating-linear-gradient(calc(var(--sun) - 6deg),
			rgba(255,255,255,0.07) 0 2px,
			rgba(0,0,0,0.05) 2px 9px),
		repeating-linear-gradient(calc(var(--sun) + 88deg),
			rgba(255,255,255,0.05) 0 3px,
			rgba(0,0,0,0.04) 3px 16px);
	filter: url(#vr-reamy);
	mix-blend-mode: overlay;
}
/* Seeds and bubbles trapped in the blow, plus the thickness variation
   that makes one corner of a quarry read heavier than the other. */
.pane::after {
	content: "";
	position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background:
		radial-gradient(1.5px 1.5px at 22% 34%, rgba(255,255,255,0.4), transparent 60%),
		radial-gradient(2px 1px at 61% 18%, rgba(255,255,255,0.3), transparent 60%),
		radial-gradient(1px 2.5px at 77% 66%, rgba(255,255,255,0.34), transparent 60%),
		radial-gradient(1.5px 1.5px at 38% 81%, rgba(255,255,255,0.26), transparent 60%),
		radial-gradient(120% 80% at 18% 12%, rgba(255,255,255,0.10), transparent 58%);
	mix-blend-mode: screen;
	opacity: 0.8;
}
.no-svgfilter .pane__glass { filter: none; opacity: 0.55; }

/* Image quarries.
   These photographs ARE coloured glass, so they must keep their own
   colour and their own drawing — a full-strength displacement on top of
   the one the .pane__glass overlay already applies smears them into
   ripples you cannot read a window in. The soft filter (scale 7 rather
   than 16) is enough to say "this is behind glass" and no more, and the
   overlay is pulled right back over a plate for the same reason. */
.pane__plate { position: absolute; inset: 0; z-index: 0; }
.pane__plate img {
	width: 100%; height: 100%; object-fit: cover;
	filter: url(#vr-reamy-soft) saturate(1.02) contrast(1.04) brightness(0.88);
	opacity: 0.94;
}
.no-svgfilter .pane__plate img { filter: saturate(1.02) contrast(1.04) brightness(0.88); }
.pane--plate .pane__glass { opacity: 0.34; }
.pane--plate::after { opacity: 0.4; }

/* A quarry with a photograph in it needs its caption legible without
   putting a grey box over the glass: a scrim that is only dark where
   the words are. */
.pane--plate .pane__in {
	display: flex; flex-direction: column; justify-content: flex-end;
	background: linear-gradient(to top,
		rgba(4,5,9,0.88) 0%,
		rgba(4,5,9,0.62) 26%,
		rgba(4,5,9,0.16) 52%,
		transparent 74%);
}
.pane--plate .q-title a { text-shadow: 0 1px 14px rgba(0,0,0,0.85); }

/* A lit quarry — the sun is directly on it. */
.pane--lit { box-shadow: inset 0 0 0 1px rgba(0,0,0,0.5), inset 0 0 40px rgba(255,240,190,0.16); }

/* =====================================================================
   Content inside a quarry
   ===================================================================== */
.q-label {
	font-family: var(--ff-data);
	font-size: var(--t-xs);
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: rgba(255,246,222,0.66);
	display: block;
	margin-bottom: 12px;
}
.q-title { color: var(--on-glass); }
.q-body { color: rgba(255,248,230,0.86); font-size: var(--t-md); }
.q-body p:last-child { margin-bottom: 0; }

.q-data { display: grid; gap: 7px; margin-top: 16px; }
.q-data div {
	display: flex; justify-content: space-between; gap: 12px;
	font-family: var(--ff-data); font-size: var(--t-xs);
	letter-spacing: 0.06em;
	padding-bottom: 6px;
	border-bottom: 1px solid rgba(0,0,0,0.32);
	color: rgba(255,248,230,0.72);
}
.q-data b { font-weight: 500; color: var(--on-glass); }

/* The one display moment: an enormous engraved numeral or word set
   across a whole light, the way a rose window has a centre. */
.q-huge {
	font-family: var(--ff-disp);
	font-size: var(--t-3xl);
	line-height: 0.9;
	color: var(--on-glass);
	font-weight: 400;
}
.q-huge em { font-style: italic; color: rgba(255,238,196,0.9); }

.vbtn {
	display: inline-flex; align-items: center; gap: 10px;
	font-family: var(--ff-data);
	font-size: var(--t-xs);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	padding: 0.85em 1.5em;
	border: 1px solid rgba(255,246,222,0.42);
	color: var(--on-glass);
	transition: background 260ms var(--ease), color 260ms var(--ease), border-color 260ms var(--ease);
	margin-top: 18px;
}
.vbtn:hover { background: var(--on-glass); color: var(--lead); border-color: var(--on-glass); }

/* =====================================================================
   Long-form reading — real multi-column, and text that flows around
   the shape of a quarry rather than sitting in a rectangle.
   ===================================================================== */
.reading {
	columns: 2;
	column-gap: clamp(22px, 3vw, 52px);
	column-rule: 1px solid rgba(0,0,0,0.3);
	font-size: 0.97rem;
	color: rgba(255,248,230,0.88);
}
/* Subheads flow INSIDE the column. Spanning them across both columns
   sounds right and is wrong here: with a subhead every one or two
   paragraphs, each span resets the balancing and leaves a pair of
   two-line stubs over half a metre of empty measure. A book sets its
   subheads in the column and keeps the text running. */
.reading h2, .reading h3 {
	font-size: 1.24rem;
	line-height: 1.25;
	margin: 1.5em 0 0.5em;
	color: rgba(255,240,206,0.95);
	break-after: avoid-column;
	break-inside: avoid-column;
}
.reading h2:first-child, .reading h3:first-child { margin-top: 0; }
.reading p { margin: 0 0 0.9em; orphans: 2; widows: 2; }
.reading ul, .reading ol { margin: 0 0 1em 1.1em; }
.reading li { margin-bottom: 0.4em; }
.reading > p:first-of-type::first-letter {
	font-family: var(--ff-disp);
	font-size: 3.4em;
	float: left;
	line-height: 0.82;
	padding: 0.05em 0.1em 0 0;
	color: rgba(255,238,196,0.95);
}
@media (max-width: 900px) { .reading { columns: 1; } }

/* The float that the text wraps around. shape-outside makes the wrap
   follow the cut corner of the quarry instead of its bounding box —
   the difference is only a few characters per line, and it is exactly
   the sort of thing that separates typeset from placed. */
.wrapper-cut {
	float: right;
	width: clamp(140px, 22%, 260px);
	aspect-ratio: 3 / 4;
	margin: 0 0 14px 22px;
	/* A steeper cut than the default bevel — at this size a 22% corner is
	   invisible and the float just reads as a rectangle somebody forgot
	   to style. This is the profile of an offcut coming off the wheel. */
	shape-outside: polygon(46% 0, 100% 12%, 100% 100%, 8% 100%, 0 38%);
	clip-path: polygon(46% 0, 100% 12%, 100% 100%, 8% 100%, 0 38%);
	shape-margin: 16px;
	background:
		repeating-linear-gradient(calc(var(--sun) + 4deg),
			rgba(255,255,255,0.12) 0 1px,
			rgba(0,0,0,0.12) 1px 5px),
		linear-gradient(var(--sun),
			color-mix(in oklab, var(--ruby) 88%, black) 0%,
			color-mix(in oklab, var(--amber) 62%, var(--opal)) 58%,
			color-mix(in oklab, var(--ruby) 92%, black) 100%);
	filter: url(#vr-reamy-soft);
}
.no-svgfilter .wrapper-cut { filter: none; }
.wrapper-cut img { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; }

/* =====================================================================
   Cartoon strip — the glazier's full-size drawing, used as an index
   ===================================================================== */
.cartoon { display: grid; gap: 2px; background: var(--lead-3); }
.cartoon__row {
	display: grid;
	grid-template-columns: 88px minmax(0,1fr) minmax(0,0.7fr) auto;
	gap: clamp(10px, 2vw, 28px);
	align-items: baseline;
	padding: 14px clamp(14px, 2vw, 26px);
	background: var(--lead);
	transition: background 240ms var(--ease);
}
.cartoon__row:hover { background: var(--lead-2); }
@media (max-width: 780px) {
	.cartoon__row { grid-template-columns: 62px 1fr; row-gap: 4px; }
	.cartoon__where, .cartoon__note { grid-column: 2; }
}
.cartoon__yr { font-family: var(--ff-data); font-size: var(--t-xs); color: var(--amber); font-variant-numeric: tabular-nums; }
.cartoon__work { font-family: var(--ff-disp); font-size: 1.3rem; color: var(--ink); }
.cartoon__where, .cartoon__note {
	font-family: var(--ff-data); font-size: var(--t-xs);
	letter-spacing: 0.08em; color: var(--ink-3); text-transform: uppercase;
}
.cartoon__note { text-align: right; white-space: nowrap; }
@media (max-width: 780px) { .cartoon__note { text-align: left; } }

/* =====================================================================
   Caustics — the coloured light the window throws onto the wall
   ===================================================================== */
.cast { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; contain: strict; }
.cast__gl { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1400ms var(--slow); }
.cast__gl.on { opacity: 0.55; }
.cast__gl.is-off { opacity: 0; }
.cast__wash {
	position: absolute; inset: -20%;
	background:
		radial-gradient(38% 30% at 26% 32%, rgba(22,65,143,0.30), transparent 70%),
		radial-gradient(34% 28% at 72% 58%, rgba(165,18,44,0.26), transparent 72%),
		radial-gradient(30% 26% at 48% 80%, rgba(200,134,15,0.20), transparent 74%);
	filter: blur(30px);
}

/* =====================================================================
   Interior pages
   ===================================================================== */
.sheet { padding: clamp(28px, 4vw, 66px) clamp(18px, 3.4vw, 60px); max-width: 1500px; }
.sheet--narrow { max-width: 980px; }

.plate-wide { position: relative; aspect-ratio: 21/9; overflow: hidden; background: var(--lead-2); }
.plate-wide img { width: 100%; height: 100%; object-fit: cover; opacity: 0.8; }
@media (max-width: 760px) { .plate-wide { aspect-ratio: 3/2; } }

/* Pagination + chips */
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
	font-family: var(--ff-data); font-size: var(--t-xs);
	letter-spacing: 0.16em; text-transform: uppercase;
	padding: 7px 13px; border: 1px solid var(--line);
	color: var(--ink-3);
	transition: color 240ms var(--ease), border-color 240ms var(--ease);
}
.chip:hover, .chip.on { color: var(--amber); border-color: rgba(200,134,15,0.5); }

.nav-links { display: flex; gap: 7px; flex-wrap: wrap; padding: 24px var(--came) 0; }
.nav-links .page-numbers {
	font-family: var(--ff-data); font-size: var(--t-xs); letter-spacing: 0.12em;
	padding: 8px 13px; border: 1px solid var(--line); color: var(--ink-3);
}
.nav-links .page-numbers.current { color: var(--lead); background: var(--amber); border-color: var(--amber); }

/* =====================================================================
   Footer — a maker's mark plate. Not four columns of links.
   ===================================================================== */
.mark-plate {
	margin-left: var(--rail);
	position: relative; z-index: 1;
	border-top: var(--came-bold) solid var(--lead-3);
	background: var(--lead-2);
	padding: clamp(34px, 5vw, 72px) clamp(18px, 3.4vw, 60px);
	display: grid;
	grid-template-columns: auto 1fr;
	gap: clamp(24px, 4vw, 64px);
	align-items: start;
}
@media (max-width: 780px) { .mark-plate { grid-template-columns: 1fr; } }

/* The stamped roundel a studio leads into the corner of every window. */
.roundel {
	width: 132px; height: 132px; border-radius: 50%;
	border: 2px solid rgba(200,134,15,0.55);
	display: grid; place-items: center; text-align: center;
	font-family: var(--ff-disp);
	color: var(--amber);
	line-height: 1.15;
	padding: 14px;
	background: radial-gradient(circle at 40% 34%, rgba(200,134,15,0.16), transparent 68%);
}
.roundel span { display: block; font-family: var(--ff-data); font-size: 0.56rem; letter-spacing: 0.24em; color: var(--ink-3); margin-top: 6px; }

.mark-plate__body { display: grid; gap: 16px; }
.mark-plate__body .rows { display: flex; flex-wrap: wrap; gap: 10px 30px; }
.mark-plate__body a { color: var(--ink-2); font-family: var(--ff-data); font-size: var(--t-xs); letter-spacing: 0.14em; text-transform: uppercase; }
.mark-plate__body a:hover { color: var(--amber); }
.mark-plate__fiction { max-width: 74ch; font-size: var(--t-sm); color: var(--ink-3); line-height: 1.75; }

.skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--amber); color: var(--lead); padding: 12px 18px; font-family: var(--ff-data); }
.skip:focus { left: 12px; top: 12px; }

/* A scored line, the way a cutter scores glass before running it. */
.vsearch { display: flex; align-items: baseline; gap: 12px; margin-top: 14px; }
.vsearch input[type="search"] {
	flex: 1; min-width: 0;
	background: none; border: 0;
	border-bottom: 1px solid rgba(244,238,218,0.34);
	padding: 8px 2px;
	color: var(--ink);
	font-family: var(--ff-data); font-size: var(--t-sm); letter-spacing: 0.1em;
	transition: border-color 260ms var(--ease);
}
.vsearch input[type="search"]:focus { outline: none; border-bottom-color: var(--amber); }
.vsearch input[type="search"]::placeholder { color: var(--ink-3); }
.vsearch button {
	background: none; border: 1px solid var(--line); cursor: pointer;
	color: var(--ink-2); padding: 8px 16px;
	font-family: var(--ff-data); font-size: var(--t-xs);
	letter-spacing: 0.18em; text-transform: uppercase;
	transition: color 240ms var(--ease), border-color 240ms var(--ease);
}
.vsearch button:hover { color: var(--amber); border-color: rgba(200,134,15,0.5); }

/* =====================================================================
   Reveal — quarries light up from the came inwards
   ===================================================================== */
.js .rv { opacity: 0; transform: translateY(14px); transition: opacity 700ms var(--slow), transform 700ms var(--slow); }
.js .rv.in { opacity: 1; transform: none; }
.js .rvi { clip-path: inset(0 0 100% 0); transition: clip-path 900ms var(--slow); }
.js .rvi.in { clip-path: inset(0 0 0 0); }
.js .rv[data-d="1"] { transition-delay: 70ms; }
.js .rv[data-d="2"] { transition-delay: 140ms; }
.js .rv[data-d="3"] { transition-delay: 210ms; }
.js .rv[data-d="4"] { transition-delay: 280ms; }

/* transition:none, never a 1ms duration — a duration on * switches
   transitions ON everywhere and can pin stale values. */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation: none !important;
		transition: none !important;
		scroll-behavior: auto !important;
	}
	.js .rv { opacity: 1; transform: none; }
	.js .rvi { clip-path: none; }
}