/*
 * Reader, cut fan, reveal, reading and verification.
 *
 * Sits on top of the theme's tokens rather than redefining them. Three rules
 * run through the whole file:
 *
 *   the card backs are identical to one another in every respect;
 *   every transition is switched off under prefers-reduced-motion rather than
 *   shortened, and anything a transition was communicating gets a static
 *   equivalent;
 *   nothing here draws a tarot card. The art-pending face is a frame, a
 *   monogram and a name — it never depicts or describes the artwork.
 */

.utt-reader,
.utt-spread-page,
.utt-verify {
	--shell: 78rem;
	--measure: 46rem;
	--card-radius: 6px;
	--ink: var(--utt-parchment, #ede6d6);
	--ink-quiet: var(--utt-parchment-muted, #b9b2a4);
	--gold: var(--utt-gold, #c9a227);
	--gold-bright: var(--utt-gold-bright, #e4c462);
	--ground: var(--utt-ground, #0a0e1a);
	--raised: var(--utt-raised, #111726);
	--hair: rgba(201, 162, 39, 0.24);
	--hair-soft: rgba(237, 230, 214, 0.11);
}

/* ── shell ──────────────────────────────────────────────────────────── */

.utt-reader {
	max-width: var(--shell);
	margin: 0 auto;
	padding: clamp(2rem, 5vw, 4rem) clamp(1.25rem, 4vw, 3rem) 4rem;
}

.utt-reader__stage { margin-top: clamp(2rem, 4vw, 3.25rem); }

.utt-step {
	max-width: var(--measure);
	margin: 0 auto;
	outline: none;
}

/* The cut and the reveal need the whole width; the reading steps do not. */
.utt-step--wide { max-width: var(--shell); }

.utt-step__head { margin-bottom: clamp(1.75rem, 3vw, 2.5rem); }

.utt-step__title {
	margin: 0.375rem 0 0;
	font-family: var(--utt-serif);
	font-weight: 500;
	font-size: clamp(1.875rem, 4vw, 2.75rem);
	line-height: 1.12;
	letter-spacing: -0.01em;
	color: var(--ink);
}

.utt-eyebrow {
	margin: 0;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--gold);
}

.utt-lede {
	margin: 0.875rem 0 0;
	max-width: 58ch;
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--ink-quiet);
}

.utt-note {
	margin: 1rem 0 0;
	max-width: 62ch;
	font-size: 0.875rem;
	line-height: 1.65;
	color: var(--ink-quiet);
}

.utt-note--center { text-align: center; margin-left: auto; margin-right: auto; }

/* ── draft banner ───────────────────────────────────────────────────── */

.utt-banner {
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
	margin: 0;
	padding: 0.75rem 1.125rem;
	border: 1px solid var(--hair);
	border-left-width: 3px;
	background: rgba(201, 162, 39, 0.05);
	font-size: 0.875rem;
	line-height: 1.55;
	color: var(--ink-quiet);
}

.utt-banner__label {
	flex: 0 0 auto;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--gold);
}

/* ── stepper ────────────────────────────────────────────────────────── */

.utt-stepper { margin-top: clamp(1.75rem, 3vw, 2.5rem); }

.utt-stepper__list {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.utt-stepper__step {
	position: relative;
	display: grid;
	justify-items: center;
	gap: 0.5rem;
	padding-top: 1.75rem;
	text-align: center;
}

/* The connecting rule sits behind the markers and stops at each end. */
.utt-stepper__step::before {
	content: "";
	position: absolute;
	top: 0.6875rem;
	left: 0;
	right: 0;
	height: 1px;
	background: var(--hair-soft);
}

.utt-stepper__step:first-child::before { left: 50%; }
.utt-stepper__step:last-child::before { right: 50%; }
.utt-stepper__step.is-done::before,
.utt-stepper__step.is-current::before { background: var(--hair); }

.utt-stepper__num {
	position: absolute;
	top: 0;
	display: grid;
	place-items: center;
	width: 1.5rem;
	height: 1.5rem;
	border: 1px solid var(--hair-soft);
	border-radius: 50%;
	background: var(--ground);
	font-size: 0.75rem;
	color: var(--ink-quiet);
	transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}

.utt-stepper__name {
	font-size: 0.6875rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink-quiet);
	opacity: 0.55;
}

.utt-stepper__step.is-done .utt-stepper__num {
	border-color: var(--hair);
	background: rgba(201, 162, 39, 0.14);
	color: var(--gold);
}

.utt-stepper__step.is-done .utt-stepper__name { opacity: 0.85; color: var(--ink-quiet); }

.utt-stepper__step.is-current .utt-stepper__num {
	border-color: var(--gold);
	background: var(--gold);
	color: #0a0e1a;
	font-weight: 700;
}

.utt-stepper__step.is-current .utt-stepper__name {
	color: var(--ink);
	opacity: 1;
	font-weight: 600;
}

@media (max-width: 34rem) {
	.utt-stepper__name { display: none; }
	.utt-stepper__step { padding-top: 1.5rem; }
}

/* ── buttons and fields ─────────────────────────────────────────────── */

.utt-button {
	display: inline-block;
	padding: 0.75rem 1.5rem;
	border: 1px solid var(--hair);
	border-radius: 2px;
	background: transparent;
	color: var(--ink);
	font: inherit;
	font-size: 0.9375rem;
	letter-spacing: 0.02em;
	cursor: pointer;
	text-decoration: none;
	transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.utt-button:hover:not(:disabled) { border-color: var(--gold); color: var(--gold-bright); }

.utt-button--primary {
	border-color: var(--gold);
	background: var(--gold);
	color: #0a0e1a;
	font-weight: 600;
}

.utt-button--primary:hover:not(:disabled) { background: var(--gold-bright); border-color: var(--gold-bright); color: #0a0e1a; }
.utt-button--lg { padding: 0.9375rem 2.25rem; font-size: 1rem; }
.utt-button:disabled { opacity: 0.4; cursor: not-allowed; }
.utt-button:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; }

.utt-actions { display: flex; flex-wrap: wrap; gap: 0.875rem; margin-top: 2.25rem; }
.utt-actions--center { justify-content: center; }

.utt-field { margin-top: 1.5rem; }

.utt-field__label {
	display: block;
	margin-bottom: 0.5rem;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink-quiet);
}

.utt-reader textarea,
.utt-reader input[type="number"] {
	width: 100%;
	padding: 0.875rem 1rem;
	border: 1px solid var(--hair-soft);
	border-radius: 2px;
	background: var(--raised);
	color: var(--ink);
	font: inherit;
	font-size: 1rem;
}

.utt-reader textarea:focus,
.utt-reader input[type="number"]:focus { outline: none; border-color: var(--gold); }
.utt-reader input[type="number"] { width: 7rem; }

/* ── spread tiles ───────────────────────────────────────────────────── */

.utt-tileset { border: 0; margin: 0; padding: 0; min-inline-size: 0; }

.utt-tiles {
	display: grid;
	gap: 0.875rem;
	grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
}

/*
 * The label is a grid so its single child fills it. It used to be display:block
 * with the body at height:100%, which is circular — the row is sized by the
 * label, the label by its content, and the content asked for 100% of the row.
 * Browsers resolve that to auto and the body ended up taller than the label,
 * so the last tile spilled 44px over the controls beneath it.
 */
.utt-tile { position: relative; display: grid; cursor: pointer; }
.utt-tile__input { position: absolute; opacity: 0; width: 1px; height: 1px; }

.utt-tile__body {
	display: grid;
	gap: 0.5rem;
	align-content: start;
	padding: 1.25rem 1.375rem 1.375rem;
	border: 1px solid var(--hair-soft);
	border-radius: 3px;
	background: linear-gradient(180deg, rgba(17, 23, 38, 0.9), rgba(10, 14, 26, 0.9));
	transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.utt-tile:hover .utt-tile__body { border-color: var(--hair); transform: translateY(-2px); }

.utt-tile__input:checked + .utt-tile__body {
	border-color: var(--gold);
	background: linear-gradient(180deg, rgba(201, 162, 39, 0.09), rgba(10, 14, 26, 0.9));
	box-shadow: inset 0 0 0 1px rgba(201, 162, 39, 0.25);
}

.utt-tile__input:focus-visible + .utt-tile__body { outline: 2px solid var(--gold-bright); outline-offset: 3px; }

.utt-tile__top { display: flex; align-items: center; gap: 0.625rem; }

.utt-tile__count {
	font-size: 0.6875rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink-quiet);
}

.utt-tile__name {
	font-family: var(--utt-serif);
	font-size: 1.3125rem;
	line-height: 1.2;
	color: var(--ink);
}

.utt-tile__purpose { font-size: 0.9375rem; line-height: 1.55; color: var(--ink-quiet); }

/* The selected state is a border, a wash, and a mark. Three signals, because
   colour alone is not a signal for everyone. */
.utt-tile__check {
	position: absolute;
	top: 1rem;
	right: 1.125rem;
	width: 1.125rem;
	height: 1.125rem;
	border: 1px solid var(--hair-soft);
	border-radius: 50%;
}

.utt-tile__input:checked + .utt-tile__body .utt-tile__check {
	border-color: var(--gold);
	background: var(--gold);
}

.utt-tile__input:checked + .utt-tile__body .utt-tile__check::after {
	content: "✓";
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font-size: 0.6875rem;
	font-weight: 700;
	color: #0a0e1a;
}

.utt-glyphs { display: inline-flex; gap: 2px; }

.utt-glyph {
	width: 0.375rem;
	height: 0.625rem;
	border: 1px solid var(--gold);
	border-radius: 1px;
	background: rgba(201, 162, 39, 0.22);
}

/* ── frames, as a segmented control ─────────────────────────────────── */

.utt-frames { margin-top: 1.25rem; }
.utt-segmented { border: 0; margin: 0; padding: 0; }

.utt-segmented__legend {
	padding: 0;
	margin-bottom: 0.625rem;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink-quiet);
}

.utt-segmented__options { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.utt-segment { position: relative; }
.utt-segment input { position: absolute; opacity: 0; width: 1px; height: 1px; }

.utt-segment span {
	display: block;
	padding: 0.5rem 0.9375rem;
	border: 1px solid var(--hair-soft);
	border-radius: 999px;
	font-size: 0.875rem;
	color: var(--ink-quiet);
	cursor: pointer;
	transition: border-color 160ms ease, color 160ms ease, background-color 160ms ease;
}

.utt-segment input:checked + span { border-color: var(--gold); background: rgba(201, 162, 39, 0.12); color: var(--ink); }
.utt-segment input:focus-visible + span { outline: 2px solid var(--gold-bright); outline-offset: 2px; }

/* ── settings ───────────────────────────────────────────────────────── */

.utt-option {
	padding: 1.5rem;
	border: 1px solid var(--hair-soft);
	border-radius: 3px;
	background: rgba(17, 23, 38, 0.55);
}

.utt-switch { display: flex; align-items: center; gap: 0.875rem; cursor: pointer; }
.utt-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }

.utt-switch__track {
	position: relative;
	flex: 0 0 auto;
	width: 2.75rem;
	height: 1.5rem;
	border: 1px solid var(--hair-soft);
	border-radius: 999px;
	background: var(--utt-sunken, #060912);
	transition: background-color 180ms ease, border-color 180ms ease;
}

.utt-switch__thumb {
	position: absolute;
	top: 2px;
	left: 2px;
	width: 1.125rem;
	height: 1.125rem;
	border-radius: 50%;
	background: var(--ink-quiet);
	transition: transform 180ms ease, background-color 180ms ease;
}

.utt-switch input:checked + .utt-switch__track { border-color: var(--gold); background: rgba(201, 162, 39, 0.2); }
.utt-switch input:checked + .utt-switch__track .utt-switch__thumb { transform: translateX(1.1875rem); background: var(--gold); }
.utt-switch input:focus-visible + .utt-switch__track { outline: 2px solid var(--gold-bright); outline-offset: 3px; }
.utt-switch__label { font-size: 1.0625rem; color: var(--ink); }
.utt-option__help { margin: 1rem 0 0; font-size: 0.9375rem; line-height: 1.6; color: var(--ink-quiet); max-width: 58ch; }

/* ── the seal ───────────────────────────────────────────────────────── */

.utt-seal {
	padding: 1.25rem 1.5rem;
	border: 1px solid var(--hair);
	border-radius: 3px;
	background: rgba(6, 9, 18, 0.6);
}

.utt-seal__row {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	padding: 0.4375rem 0;
	flex-wrap: wrap;
}

.utt-seal__label {
	flex: 0 0 7rem;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--gold);
}

.utt-seal__value {
	flex: 1 1 12rem;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.875rem;
	letter-spacing: 0.02em;
	color: var(--ink);
	word-break: break-all;
}

.utt-copy {
	flex: 0 0 auto;
	padding: 0.25rem 0.625rem;
	border: 1px solid var(--hair-soft);
	border-radius: 2px;
	background: transparent;
	color: var(--ink-quiet);
	font: inherit;
	font-size: 0.75rem;
	cursor: pointer;
}

.utt-copy:hover { border-color: var(--gold); color: var(--gold-bright); }
.utt-copy:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }

.utt-seal__full { margin-top: 0.75rem; border-top: 1px solid var(--hair-soft); padding-top: 0.75rem; }
.utt-seal__dl { display: grid; gap: 0.375rem; margin: 0.75rem 0 0; }
.utt-seal__dl dt { font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.utt-seal__dl dd { margin: 0 0 0.625rem; }

.utt-seal__dl code,
.utt-verify code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.8125rem;
	word-break: break-all;
	color: var(--ink);
}

details summary {
	cursor: pointer;
	font-size: 0.875rem;
	color: var(--gold);
	letter-spacing: 0.02em;
}

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

/* ── the cut fan ────────────────────────────────────────────────────── */

.utt-cut {
	--fan-card-w: clamp(2.5rem, 5vw, 3.5rem);
	--fan-card-h: calc(var(--fan-card-w) * 1.5);
	--fan-lift: clamp(8rem, 20vw, 14rem);
	/*
	 * How far below the container the pivot sits. Without it the whole arc
	 * floats one lift-height off the bottom and leaves a band of dead space
	 * under the fan. 0.6 is cos(48°) less the corner the outermost card sweeps,
	 * which puts the lowest card edge on the container's bottom line.
	 */
	--fan-sink: calc(var(--fan-lift) * 0.6);
}

/*
 * A real fan: every card pivots about a point below the arc, so the deck
 * splays the way a held deck does. The angle per card comes from a generated
 * stylesheet in the renderer, which keeps all 78 buttons identical to one
 * another — the property the no-leak check measures.
 */
/*
 * The pivot sits exactly on the container's bottom edge and every card is
 * placed above it, so the arc cannot spill onto whatever follows — which it
 * did when the origin was a distance below the cards, with the outer ones
 * swinging under the container and across the text beneath.
 */
.utt-cut__fan {
	position: relative;
	height: calc(var(--fan-lift) + var(--fan-card-h) - var(--fan-sink));
	margin: clamp(1rem, 2.5vw, 2rem) auto 0;
	max-width: 100%;
	touch-action: pan-y;
}

.utt-cut__card {
	position: absolute;
	left: calc(50% - (var(--fan-card-w) / 2));
	bottom: calc(-1 * var(--fan-sink));
	width: var(--fan-card-w);
	height: var(--fan-card-h);
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	transform-origin: 50% 100%;
	transform: rotate(var(--utt-fan-angle, 0deg)) translateY(calc(-1 * var(--fan-lift)));
	transition: transform 160ms ease, filter 160ms ease;
}

.utt-cut__back {
	display: block;
	width: 100%;
	height: 100%;
	border: 1px solid rgba(201, 162, 39, 0.55);
	border-radius: 3px;
	box-shadow: -2px 0 4px rgba(0, 0, 0, 0.5), inset 0 0 0 2px rgba(10, 14, 26, 0.9), inset 0 0 0 3px rgba(201, 162, 39, 0.2);
	pointer-events: none;
}

.utt-cut__card:hover { transform: rotate(var(--utt-fan-angle, 0deg)) translateY(calc(-1 * var(--fan-lift) - 0.75rem)); }

.utt-cut__card:focus-visible { outline: none; }
.utt-cut__card:focus-visible .utt-cut__back { outline: 2px solid var(--gold-bright); outline-offset: 2px; }

/* The chosen card lifts clear and gains a full gold edge; the cards it sits
   above recede. Both signals survive with motion disabled — see below. */
.utt-cut__card.is-cut-point {
	transform: rotate(var(--utt-fan-angle, 0deg)) translateY(calc(-1 * var(--fan-lift) - 1.75rem));
	z-index: 5;
}

.utt-cut__card.is-cut-point .utt-cut__back {
	border-color: var(--gold-bright);
	box-shadow: 0 0 0 2px var(--gold-bright), 0 8px 18px rgba(0, 0, 0, 0.55);
}

.utt-cut__fan.has-cut .utt-cut__card.is-before-cut { filter: brightness(0.62); }
.utt-cut__fan.is-dragging { cursor: grabbing; }

.utt-cut__chosen {
	margin: 2rem 0 0;
	text-align: center;
	font-size: 1rem;
	color: var(--ink);
}

/* The numbered field is a legitimate way to cut, kept visually secondary. */
.utt-cut__precise {
	max-width: 34rem;
	margin: 2.5rem auto 0;
	padding-top: 1.5rem;
	border-top: 1px solid var(--hair-soft);
	opacity: 0.85;
}

.utt-cut__preciserow { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.utt-cut__preciserow .utt-note { margin: 0; font-size: 0.8125rem; }

/* ── the spread on the table ────────────────────────────────────────── */

.utt-spread {
	display: grid;
	gap: clamp(1.25rem, 3vw, 2.25rem);
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	justify-items: center;
	margin-top: clamp(2rem, 4vw, 3rem);
}

.utt-spread--daily-focus { grid-template-columns: minmax(0, 16rem); justify-content: center; }
.utt-spread--three-card { grid-template-columns: repeat(3, minmax(9rem, 15rem)); justify-content: center; }
.utt-spread--celtic-cross { grid-template-columns: repeat(auto-fit, minmax(9rem, 12rem)); }

.utt-slot { display: grid; gap: 0.75rem; justify-items: center; width: 100%; max-width: 15rem; }

.utt-slot__label {
	margin: 0;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--gold);
	text-align: center;
}

.utt-slot__semantic {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.55;
	color: var(--ink-quiet);
	text-align: center;
}

/* ── the card object ────────────────────────────────────────────────── */

.utt-card {
	position: relative;
	aspect-ratio: 2 / 3;
	width: 100%;
	padding: 0;
	border-radius: var(--card-radius);
	cursor: pointer;
	transition: transform 220ms ease, box-shadow 220ms ease;
	overflow: hidden;
}

.utt-card:disabled { cursor: default; }
.utt-card:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 4px; }

/*
 * The back uses the official rotationally symmetrical PNG, applied below.
 * Turning it 180° produces the same image. Nothing here varies per card, and the client has not been
 * told what any card is, so there is nothing an observer could read.
 */
.utt-card--back {
	border: 1px solid rgba(201, 162, 39, 0.5);
	box-shadow: inset 0 0 0 4px rgba(10, 14, 26, 0.95), inset 0 0 0 5px rgba(201, 162, 39, 0.28);
}

.utt-card--back:hover:not(:disabled) { transform: translateY(-4px); box-shadow: inset 0 0 0 4px rgba(10, 14, 26, 0.95), inset 0 0 0 5px rgba(201, 162, 39, 0.45), 0 10px 24px rgba(0, 0, 0, 0.5); }

.utt-card__weave {
	position: absolute;
	inset: 0.5rem;
	border: 1px solid rgba(201, 162, 39, 0.22);
}

.utt-card__weave::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 2.5rem;
	height: 2.5rem;
	transform: translate(-50%, -50%) rotate(45deg);
	border: 1px solid rgba(201, 162, 39, 0.5);
	background: rgba(10, 14, 26, 0.75);
}

/*
 * The face, while artwork is pending.
 *
 * A designed placeholder, not a broken image: parchment ground, a gold rule
 * frame, the card's name, and a small label saying the artwork is still in
 * production. It does not depict the card and it does not describe what the
 * artwork will contain. No <img> is emitted and no alt text is invented.
 */
.utt-card--face {
	border: 1px solid rgba(201, 162, 39, 0.65);
	background:
		repeating-linear-gradient(0deg, rgba(122, 104, 62, 0.05) 0 2px, transparent 2px 4px),
		radial-gradient(70% 45% at 50% 50%, rgba(201, 162, 39, 0.16), transparent 70%),
		linear-gradient(170deg, #efe8d9, #ddd3bd);
	color: #1b1710;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
}

/*
 * The layout lives on an inner span, not on the button.
 *
 * A button is not a dependable grid container: the UA gives its children an
 * anonymous box and its own centring, and justify-self on a grid item inside
 * one lands in the wrong place — the orientation badge was pushed past the
 * card's right edge and clipped away entirely. An ordinary element inside the
 * button behaves the way the spec says.
 *
 * Three rows: the label at the top, the name plate genuinely centred in the
 * middle, the badge holding the bottom.
 */
.utt-card--face .utt-card__inner {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-rows: auto 1fr auto;
	align-items: center;
	justify-items: center;
	padding: 1.125rem 0.75rem;
	gap: 0.5rem;
}

.utt-card--face::before {
	content: "";
	position: absolute;
	inset: 0.5rem;
	border: 1px solid rgba(140, 115, 32, 0.55);
	pointer-events: none;
}

.utt-card--face::after {
	content: "";
	position: absolute;
	inset: 0.6875rem;
	border: 1px solid rgba(140, 115, 32, 0.25);
	pointer-events: none;
}

.utt-card__plate {
	display: grid;
	align-content: center;
	justify-items: center;
	gap: 0.5rem;
	padding: 0.5rem;
	text-align: center;
}

/* A quiet lozenge behind the name, echoing the diamond on the back. */
.utt-card__plate::before {
	content: "";
	width: 2.75rem;
	height: 2.75rem;
	transform: rotate(45deg);
	border: 1px solid rgba(140, 115, 32, 0.35);
	margin-bottom: -2.25rem;
}

/*
 * Reversal is NOT shown by rotating the plate while the artwork is pending.
 *
 * There is no image on these faces yet — the plate holds the card's name in
 * type — and rotating type by 180 degrees makes the one piece of information
 * on the card unreadable in order to signal something the badge already
 * states in words. When approved artwork lands, rotating the *image* is the
 * right treatment and this rule is where that goes; until then the ornament
 * inverts, the badge says "Reversed", and the name stays legible.
 */
.utt-card--face.is-reversed .utt-card__plate { transform: none; }
.utt-card--face.is-reversed .utt-card__orn { transform: rotate(180deg); display: inline-block; }
.utt-card--face.is-reversed .utt-card__plate::before { border-color: rgba(110, 36, 51, 0.45); }

.utt-card__name {
	font-family: var(--utt-serif);
	font-size: clamp(1rem, 2.2vw, 1.1875rem);
	line-height: 1.2;
	color: #1b1710;
}

.utt-card__orn { font-size: 0.625rem; color: rgba(140, 115, 32, 0.85); letter-spacing: 0.3em; }

.utt-card__badge {
	padding: 0.1875rem 0.5625rem;
	border: 1px solid rgba(140, 115, 32, 0.6);
	background: rgba(255, 255, 255, 0.35);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #4a3c12;
	white-space: nowrap;
}

.utt-card--face.is-reversed .utt-card__badge {
	border-color: #6e2433;
	color: #6e2433;
	background: rgba(110, 36, 51, 0.1);
}

.utt-card__pending {
	font-size: 0.5625rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(90, 76, 40, 0.75);
	white-space: nowrap;
}

/* ── the reading, position by position ──────────────────────────────── */

.utt-detail,
.utt-pattern,
.utt-synthesis,
.utt-reading,
.utt-evidence,
.utt-followup { max-width: var(--measure); margin: clamp(3rem, 6vw, 4.5rem) auto 0; }

.utt-detail__title,
.utt-panel__title,
.utt-handover__title {
	text-transform: none;
	letter-spacing: 0;
	margin: 0.375rem 0 0;
	font-family: var(--utt-serif);
	font-weight: 500;
	font-size: clamp(1.5rem, 3vw, 2rem);
	line-height: 1.2;
	color: var(--ink);
}

.utt-entry {
	margin-top: 2.5rem;
	padding-top: 2.5rem;
	border-top: 1px solid var(--hair-soft);
}

.utt-entry:first-of-type { border-top: 0; }

.utt-entry__name {
	/* The theme uppercases h3 site-wide, which is right for the card library's
	   section headings and wrong for a card's own name. */
	text-transform: none;
	letter-spacing: 0;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
	margin: 0.25rem 0 0;
	font-family: var(--utt-serif);
	font-weight: 500;
	font-size: 1.5rem;
	line-height: 1.2;
	color: var(--ink);
}

.utt-badge {
	padding: 0.125rem 0.5rem;
	border: 1px solid var(--hair);
	border-radius: 2px;
	font-family: var(--utt-sans);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--gold);
}

.utt-badge--reversed { border-color: #a8465a; color: #d98a9b; }

.utt-entry__semantic {
	margin: 0.625rem 0 0;
	font-style: italic;
	font-size: 0.9375rem;
	color: var(--ink-quiet);
}

.utt-entry__essence {
	margin: 1.25rem 0 0;
	font-size: 1.1875rem;
	line-height: 1.6;
	color: var(--ink);
}

.utt-disclosure { margin-top: 1.125rem; }

.utt-disclosure__body {
	margin: 0.875rem 0 0;
	padding-left: 1rem;
	border-left: 1px solid var(--hair-soft);
	font-size: 1rem;
	line-height: 1.75;
	color: var(--ink-quiet);
}

.utt-entry__conditional,
.utt-entry__caution {
	margin: 1rem 0 0;
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--ink-quiet);
}

.utt-entry__reversal {
	margin-top: 1.25rem;
	padding: 0.875rem 1.125rem;
	border: 1px solid var(--hair-soft);
	border-radius: 3px;
	background: rgba(17, 23, 38, 0.5);
}

.utt-entry__reversal-note { margin: 0; font-size: 0.875rem; line-height: 1.6; color: var(--ink-quiet); }
.utt-modes { display: flex; flex-wrap: wrap; gap: 0.375rem; margin: 0.75rem 0 0; padding: 0; list-style: none; }

.utt-mode {
	padding: 0.1875rem 0.5625rem;
	border: 1px solid var(--hair);
	border-radius: 999px;
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	color: var(--gold);
}

.utt-entry__advice {
	margin: 1.25rem 0 0;
	padding: 0.75rem 0 0.75rem 1.125rem;
	border-left: 2px solid var(--gold);
}

.utt-entry__advice p { margin: 0; font-size: 1.0625rem; line-height: 1.6; color: var(--ink); }

.utt-entry__link {
	display: inline-block;
	margin-top: 1.25rem;
	font-size: 0.875rem;
	color: var(--gold);
}

/*
 * ── the generated reading ──────────────────────────────────────────
 *
 * Deliberately NOT boxed like the pattern and evidence panels. Those are
 * apparatus and read as apparatus; this is the reading, and it is set as
 * running prose at reading measure so the page has one thing at its centre
 * rather than four equal cards. The distinction is doing real work: a
 * reader must be able to tell counted material from interpretation at a
 * glance, and identical panels would flatten the difference the whole
 * evidence model exists to keep.
 */

.utt-reading__headline {
	margin: 0.375rem 0 0;
	font-family: var(--utt-serif);
	font-weight: 500;
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	line-height: 1.15;
	text-transform: none;
	letter-spacing: 0;
	color: var(--ink);
}

.utt-reading__opening {
	margin: 1rem 0 0;
	font-size: 1.125rem;
	line-height: 1.65;
	color: var(--ink);
}

.utt-thread { margin-top: clamp(1.75rem, 3vw, 2.5rem); }

.utt-thread__title {
	margin: 0 0 0.5rem;
	font-family: var(--utt-serif);
	font-size: 1.1875rem;
	font-weight: 500;
	text-transform: none;
	letter-spacing: 0;
	color: var(--gold-bright);
}

.utt-thread__body { margin: 0; line-height: 1.7; }

/* The one persistent mark that a passage is judgement rather than record. */
.utt-thread__class {
	display: inline-block;
	margin: 0.5rem 0 0;
	padding: 0.0625rem 0.5rem;
	border: 1px solid var(--hair);
	border-radius: 999px;
	font-family: var(--utt-sans);
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink-quiet);
}

.utt-through-line {
	margin-top: clamp(2rem, 4vw, 3rem);
	padding-top: clamp(1.5rem, 3vw, 2rem);
	border-top: 1px solid var(--hair);
}

.utt-through-line__title {
	margin: 0 0 0.625rem;
	font-family: var(--utt-serif);
	font-size: 1.375rem;
	font-weight: 500;
	text-transform: none;
	letter-spacing: 0;
}

.utt-through-line__body { margin: 0; font-size: 1.0625rem; line-height: 1.75; }

.utt-reading__closing {
	margin-top: clamp(1.5rem, 3vw, 2rem);
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--ink);
}

.utt-reading__professional {
	margin-top: 1.25rem;
	padding: 0.875rem 1rem;
	border-left: 2px solid var(--gold);
	background: rgba(201, 162, 39, 0.06);
	line-height: 1.6;
}

.utt-reversal-choice {
	margin-top: 1rem;
	line-height: 1.6;
	color: var(--ink-quiet);
}

.utt-reversal-choice .utt-mode { margin-right: 0.5rem; }
.utt-reversal-choice .utt-thread__class { margin-left: 0.5rem; }

.utt-note--provenance { font-size: 0.8125rem; opacity: 0.8; }

/* A collapsed entry: the summary carries the position and the card, so a
   reader can find the one they want without opening four. */
.utt-disclosure--entry { margin-top: 1.25rem; }
.utt-disclosure--entry > summary { font-family: var(--utt-serif); font-size: 1.0625rem; }
.utt-disclosure--entry > summary .utt-eyebrow { margin-right: 0.5rem; }
.utt-disclosure--entry .utt-entry { margin-top: 1rem; }

/* ── why this? ──────────────────────────────────────────────────────── */

.utt-disclosure--evidence > summary {
	font-family: var(--utt-sans);
	font-size: 0.875rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.utt-evidence__class {
	margin-top: 1.75rem;
	padding-left: 0.875rem;
	border-left: 2px solid var(--hair-soft);
}

/* Three classes, three left rules. Colour is a redundant cue here: the
   heading names the class in words, so a reader who cannot see the
   difference loses nothing. */
.utt-evidence__class--source { border-left-color: var(--gold); }
.utt-evidence__class--computed { border-left-color: rgba(237, 230, 214, 0.4); }
.utt-evidence__class--inference { border-left-color: rgba(201, 162, 39, 0.35); border-left-style: dashed; }

.utt-evidence__title {
	margin: 0 0 0.25rem;
	font-family: var(--utt-serif);
	font-size: 1.0625rem;
	font-weight: 500;
	text-transform: none;
	letter-spacing: 0;
}

.utt-evidence__items { margin: 0.75rem 0 0; padding: 0; list-style: none; }
.utt-evidence__item + .utt-evidence__item { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--hair-soft); }
.utt-evidence__row { margin: 0.375rem 0 0; font-size: 0.9375rem; line-height: 1.6; }
.utt-evidence__row--support { color: var(--ink-quiet); }

.utt-evidence__ref {
	font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
	font-size: 0.75rem;
	padding: 0.0625rem 0.375rem;
	border-radius: 2px;
	background: rgba(237, 230, 214, 0.07);
	color: var(--gold-bright);
}

.utt-evidence__limits { margin: 0.5rem 0 0; padding-left: 1.125rem; color: var(--ink-quiet); line-height: 1.6; }

/* ── follow-up ──────────────────────────────────────────────────────── */

.utt-followup__answers { margin-top: 1.5rem; }

.utt-followup__answer + .utt-followup__answer {
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--hair-soft);
}

.utt-followup__question {
	margin: 0 0 0.625rem;
	font-family: var(--utt-serif);
	font-style: italic;
	color: var(--gold-bright);
}

.utt-followup__body { margin: 0.5rem 0 0; line-height: 1.7; }
.utt-followup__clarifier { margin: 0.5rem 0 0; font-size: 0.9375rem; color: var(--ink-quiet); }
.utt-followup__declined,
.utt-followup__halt { margin: 0.5rem 0 0; padding: 0.75rem 1rem; border-left: 2px solid var(--gold); line-height: 1.6; }

.utt-check {
	display: flex;
	gap: 0.5rem;
	align-items: flex-start;
	margin-top: 0.875rem;
	line-height: 1.5;
	color: var(--ink-quiet);
}

/* Verification stays reachable and stops competing with the reading. */
.utt-verify-link { margin-top: clamp(2.5rem, 5vw, 3.5rem); opacity: 0.85; }

/* ── pattern ────────────────────────────────────────────────────────── */

.utt-pattern,
.utt-synthesis,
.utt-evidence,
.utt-followup,
.utt-panel {
	padding: clamp(1.5rem, 3vw, 2.25rem);
	border: 1px solid var(--hair-soft);
	border-radius: 3px;
	background: rgba(17, 23, 38, 0.4);
}

.utt-panel { margin-top: 2rem; }
.utt-panel--notice { border-color: var(--hair); }

.utt-chips { display: grid; gap: 0.75rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }

.utt-chip {
	display: grid;
	gap: 0.3125rem;
	padding: 0.875rem 1.125rem;
	border: 1px solid var(--hair-soft);
	border-left: 2px solid var(--gold);
	border-radius: 2px;
	background: rgba(6, 9, 18, 0.45);
}

.utt-chip__head { font-size: 1rem; font-weight: 600; color: var(--ink); }
.utt-chip__note { font-size: 0.875rem; line-height: 1.55; color: var(--ink-quiet); }
.utt-pattern__none { margin: 1.25rem 0 0; color: var(--ink-quiet); }

/* ── synthesis handover ─────────────────────────────────────────────── */

.utt-relationships { display: grid; gap: 0.75rem; margin: 1.25rem 0 0; padding-left: 1.125rem; }
.utt-relationships li { font-size: 1rem; line-height: 1.6; color: var(--ink-quiet); }

.utt-handover {
	margin-top: 2.25rem;
	padding-top: 2rem;
	border-top: 1px solid var(--hair);
}

.utt-handover__body {
	margin: 1rem 0 0;
	font-size: 1.0625rem;
	line-height: 1.75;
	color: var(--ink);
}

.utt-reader__status { margin-top: 2rem; text-align: center; font-size: 0.875rem; min-height: 1.25rem; color: var(--ink-quiet); }
.utt-reader__status.is-error { color: #e08a8a; font-weight: 600; }

/* ── spread pages ───────────────────────────────────────────────────── */

.utt-spread-page {
	max-width: var(--measure);
	margin: 0 auto;
	padding: clamp(2rem, 5vw, 4rem) clamp(1.25rem, 4vw, 3rem) 4rem;
}

.utt-spread-page h1 {
	margin: 0.375rem 0 0;
	font-family: var(--utt-serif);
	font-weight: 500;
	font-size: clamp(2rem, 5vw, 3rem);
	line-height: 1.1;
}

.utt-spread-page__meta { display: flex; align-items: center; gap: 0.625rem; margin-top: 1rem; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-quiet); }
.utt-position-list { display: grid; gap: 1.5rem; margin: 1.5rem 0 0; padding-left: 1.25rem; }
.utt-position h3 { margin: 0 0 0.375rem; font-family: var(--utt-serif); font-size: 1.1875rem; font-weight: 500; text-transform: none; letter-spacing: 0; }
.utt-position p { margin: 0; color: var(--ink-quiet); }
.utt-position--conditional { border-left: 2px solid var(--gold); padding-left: 1rem; margin-left: -1rem; }
.utt-plainlist { margin: 1rem 0 0; padding-left: 1.25rem; display: grid; gap: 0.5rem; color: var(--ink-quiet); }
.utt-spread-page__cta { margin-top: 2.5rem; }

/* ── verification ───────────────────────────────────────────────────── */

.utt-verify {
	max-width: 54rem;
	margin: 0 auto;
	padding: clamp(2rem, 5vw, 4rem) clamp(1.25rem, 4vw, 3rem) 4rem;
}

.utt-verify__head h1 {
	margin: 0.375rem 0 0;
	font-family: var(--utt-serif);
	font-weight: 500;
	font-size: clamp(2rem, 5vw, 3rem);
	line-height: 1.1;
}

.utt-verify__uuid { margin: 0.875rem 0 0; font-size: 0.875rem; color: var(--ink-quiet); }

.utt-verdict {
	margin: 2.25rem 0 0;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	border: 1px solid;
	border-radius: 3px;
	text-align: center;
}

.utt-verdict--pass { border-color: rgba(90, 160, 118, 0.55); background: rgba(44, 74, 59, 0.28); }
.utt-verdict--fail { border-color: rgba(176, 70, 70, 0.6); background: rgba(110, 36, 51, 0.25); }

.utt-verdict__mark { display: block; font-size: 2rem; line-height: 1; }
.utt-verdict--pass .utt-verdict__mark { color: #7fc4a0; }
.utt-verdict--fail .utt-verdict__mark { color: #e08a8a; }

.utt-verdict__title {
	margin: 0.75rem 0 0;
	font-family: var(--utt-serif);
	font-weight: 500;
	font-size: clamp(1.5rem, 3.5vw, 2.125rem);
	color: var(--ink);
}

.utt-verdict__plain { margin: 1rem auto 0; max-width: 52ch; font-size: 1.0625rem; line-height: 1.7; color: var(--ink); }

.utt-checks { display: grid; gap: 0.625rem; margin: 1.75rem auto 0; padding: 0; list-style: none; max-width: 40rem; text-align: left; }

.utt-check {
	display: grid;
	grid-template-columns: 1.25rem 1fr;
	gap: 0.625rem;
	align-items: baseline;
	font-size: 0.9375rem;
	color: var(--ink-quiet);
}

.utt-check--ok .utt-check__mark { color: #7fc4a0; }
.utt-check--bad .utt-check__mark { color: #e08a8a; }

.utt-verify__section { margin-top: 2.75rem; }

.utt-verify__section > h2 {
	margin: 0.375rem 0 0.875rem;
	font-family: var(--utt-serif);
	font-weight: 500;
	font-size: 1.5rem;
	color: var(--ink);
}

.utt-tech { margin-top: 1rem; border: 1px solid var(--hair-soft); border-radius: 3px; }
.utt-tech > summary { padding: 0.875rem 1.125rem; font-size: 0.9375rem; }
.utt-tech[open] > summary { border-bottom: 1px solid var(--hair-soft); }
.utt-tech__body { padding: 1.25rem; }

.utt-kv { display: grid; grid-template-columns: minmax(9rem, auto) 1fr; gap: 0.625rem 1.5rem; margin: 0; }
.utt-kv dt { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); }
.utt-kv dd { margin: 0; }

.utt-table { width: 100%; border-collapse: collapse; margin-top: 0.5rem; font-size: 0.9375rem; }
.utt-table th, .utt-table td { text-align: left; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--hair-soft); }
.utt-table th { font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); font-weight: 600; }
.utt-tablewrap { overflow-x: auto; max-width: 100%; }

.utt-orderlist { columns: 3 11rem; gap: 1.5rem; margin: 0.75rem 0 0; font-size: 0.8125rem; color: var(--ink-quiet); }
.utt-steps { margin: 0; padding-left: 1.25rem; display: grid; gap: 0.625rem; font-size: 0.9375rem; line-height: 1.6; color: var(--ink-quiet); }
.utt-code { overflow-x: auto; max-width: 100%; padding: 1rem; font-size: 0.8125rem; line-height: 1.5; background: rgba(6, 9, 18, 0.7); border: 1px solid var(--hair-soft); }
.utt-honesty { margin-top: 2.75rem; padding-top: 1.75rem; border-top: 1px solid var(--hair); }
.utt-honesty p { max-width: 62ch; color: var(--ink-quiet); }

/* ── motion, contrast, print ────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.utt-reader *,
	.utt-verify * {
		transition: none !important;
		animation: none !important;
	}

	/* Hover lift and the cut-point lift are motion; remove both. */
	.utt-cut__card:hover,
	.utt-cut__card.is-cut-point { transform: rotate(var(--utt-fan-angle, 0deg)) translateY(calc(-1 * var(--fan-lift))); }

	.utt-tile:hover .utt-tile__body,
	.utt-card--back:hover:not(:disabled) { transform: none; }

	/* Everything the movement was saying still has to be said. The cut point
	   loses its lift and gains a heavier edge instead. */
	.utt-cut__card.is-cut-point .utt-cut__back { box-shadow: 0 0 0 3px var(--gold-bright); }
}

@media (prefers-contrast: more) {
	.utt-tile__body,
	.utt-option,
	.utt-seal,
	.utt-chip,
	.utt-pattern,
	.utt-synthesis,
	.utt-evidence,
	.utt-followup,
	.utt-thread__class,
	.utt-panel { border-width: 2px; }

	.utt-lede,
	.utt-note,
	.utt-slot__semantic,
	.utt-entry__semantic,
	.utt-chip__note { color: var(--ink); }

	.utt-stepper__name { opacity: 1; }
	.utt-cut__precise { opacity: 1; }
}

@media print {
	.utt-stepper,
	.utt-actions,
	.utt-cut,
	.utt-reader__status,
	.utt-site-header,
	.utt-copy { display: none !important; }

	.utt-slot, .utt-entry { break-inside: avoid; }
	.utt-disclosure__body { display: block; }
}

/* ── narrow screens ─────────────────────────────────────────────────── */

@media (max-width: 46rem) {
	.utt-spread--three-card,
	.utt-spread--celtic-cross { grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); }
	.utt-seal__label { flex-basis: 100%; }
	.utt-kv { grid-template-columns: 1fr; gap: 0.25rem; }
	.utt-kv dd { margin-bottom: 0.75rem; }
	.utt-orderlist { columns: 2 8rem; }
}

/* Approved PNG sources remain byte-identical. Only front pixels rotate. */
.utt-reader .utt-card { display: block; aspect-ratio: 2 / 3; grid-template-columns: none; grid-template-areas: none; gap: 0; }
.utt-card--back .utt-card__weave,
.utt-cut__back {
 inset: 0;
 border: 0;
 background: #101626 url('../decks/celestial-gold-classic/back/Celestial_Gold_Card_Back.png') center / 100% 100% no-repeat;
 box-shadow: none;
}
.utt-cut__card { aspect-ratio: 2 / 3; }
.utt-card__weave::after { content: none; }
.utt-card.has-artwork { border: 0; border-radius: 0; background: transparent; }
.utt-card.has-artwork::before,
.utt-card.has-artwork::after { content: none; }
.utt-card.has-artwork .utt-card__inner[hidden] { display: none; }
.utt-card__artwork { display: block; width: 100%; height: 100%; object-fit: contain; }
.utt-card.is-reversed .utt-card__artwork { transform: rotate(180deg); }
.utt-slot__art-caption { margin: .5rem 0; text-align: center; font-size: .8rem; color: var(--gold-bright); }

.utt-reading-progress {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .7rem;
	color: var(--ink);
	font-weight: 700;
}
.utt-reading-progress.is-error { color: var(--danger, #ffb4b4); }
.utt-reading-progress__spinner {
	display: none;
	width: 1.15rem;
	height: 1.15rem;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: utt-reading-spin .8s linear infinite;
}
.utt-reading-progress.is-loading .utt-reading-progress__spinner { display: inline-block; }
@keyframes utt-reading-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
	.utt-reading-progress__spinner { animation: none !important; border-right-color: currentColor; }
}

/* Printed readings use ink on white, independently of browser background settings.
   Images retain their original colours and orientation. */
@media print {
    html, body { background: #fff !important; color: #111 !important; }
    .utt-reader, .utt-reader *, .utt-site-footer, .utt-site-footer * {
        color: #111 !important;
        -webkit-text-fill-color: #111 !important;
        background-color: transparent !important;
        text-shadow: none !important;
        box-shadow: none !important;
        border-color: #777 !important;
        opacity: 1 !important;
    }
    .utt-reader a { color: #111 !important; text-decoration: underline; }
    .utt-reader h2, .utt-reader h3, .utt-reader summary { break-after: avoid; }
    .utt-reading p, .utt-thread p { orphans: 3; widows: 3; }
}