/* Petition on Student Recording — one stylesheet for all three pages.
   Register: a well-set document, not a landing page. The only saturated
   colour on the site is the three consent buttons. */

:root {
	--paper: #fbf9f5;
	--ink: #17150f;
	--muted: #5f5849;
	--faint: #6b6558;
	--rule: #d9d2c4;
	--rule-soft: #e7e1d5;
	--field: #ffffff;
	/* Light enough to read as an empty field rather than as content, dark
	   enough to still clear 4.5:1 on white. Placeholders cannot go paler than
	   about this without failing outright. */
	--placeholder: #787260;
	--focus: #1e4f8a;
	--green: #14663a;
	--red: #a81f16;
	--purple: #5b2e8f;
	/* The one button that goes live: green the moment a name is typed. */
	--next: #14663a;
	/* A warm tint one step below the paper, for boxed passages. */
	--callout: #f3eee3;
	--serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", "URW Palladio L", Georgia, "Times New Roman", serif;
	/* Plain Times, used for the petition's own body copy and the consent boxes
	   that sit with it. One declaration so the two can never drift apart. */
	--times: "Times New Roman", Times, "Liberation Serif", serif;
	--sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
	--pad-ratio: 2.35;
}

* { box-sizing: border-box; }

/* Author `display` rules outrank the user-agent [hidden] rule, and several
   elements here are hidden by attribute. Settle it once. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body.pos {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--serif);
	font-size: 17px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

.pos-wrap {
	max-width: 36rem;
	margin: 0 auto;
	padding: 0 16px 48px;
	min-height: 100dvh;
}

/* 100dvh is the whole point: on iOS Safari 100vh is taller than the visible
   viewport, which pushes the pad under the address bar. */
@supports not (min-height: 100dvh) {
	.pos-wrap { min-height: 100vh; }
}

.pos-wrap-narrow { max-width: 30rem; }

/* The signing page has no masthead; the form starts a little below the top. */
body.pos-sign .pos-wrap { padding-top: 22px; }

/* ---------- masthead ---------- */

.pos-top {
	padding: 18px 0 10px;
	border-bottom: 1px solid var(--rule);
	margin-bottom: 16px;
}

.pos-eyebrow {
	margin: 0 0 6px;
	font-family: var(--sans);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
}

.pos-promise {
	margin: 0;
	font-family: var(--sans);
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.055em;
	text-transform: uppercase;
	color: var(--ink);
}

.pos-h1 {
	margin: 6px 0 0;
	font-size: 30px;
	font-weight: 400;
	letter-spacing: -0.01em;
}

.pos-h2 {
	margin: 0 0 12px;
	font-family: var(--sans);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
}

.pos-padlabel {
	margin: 0 0 8px;
	font-family: var(--sans);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
}

/* ---------- the pad ---------- */

.pos-padwrap {
	position: relative;
	width: 100%;
	aspect-ratio: var(--pad-ratio);
	background: var(--field);
	border: 1px solid var(--rule);
	border-radius: 2px;
	box-shadow: inset 0 1px 0 rgba(23, 21, 15, 0.04);
	overflow: hidden;
	transition: max-width 220ms ease;
}

@supports not (aspect-ratio: 1) {
	.pos-padwrap { height: 0; padding-bottom: 42.55%; }
}

.pos-padwrap.is-reduced {
	max-width: 232px;
	box-shadow: none;
	background: transparent;
	border-color: var(--rule-soft);
}

/* Absolute, so the canvas's own 300x150 intrinsic ratio cannot stretch the
   wrapper and break the 2.35:1 the whole layout is built on. */
.pos-pad {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	touch-action: none;
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
	cursor: crosshair;
}

.pos-padwrap.is-reduced .pos-pad { cursor: default; }

.pos-padhint {
	position: absolute;
	left: 14px;
	bottom: 10px;
	margin: 0;
	font-family: var(--sans);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--faint);
	pointer-events: none;
	transition: opacity 160ms ease;
}

.pos-padwrap.has-ink .pos-padhint { opacity: 0; }

/* Restored on a later visit: the signer's own mark, served from the uncached
   image endpoint, never rendered into the cached HTML. */
.pos-restored {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.pos-typedmark {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--serif);
	font-style: italic;
	font-size: clamp(24px, 8vw, 42px);
	color: var(--ink);
	padding: 0 12px;
	text-align: center;
}

/* ---------- the header row and the unsave button ---------- */

/* The row keeps its height whether or not the chip is showing, so revealing it
   cannot push the pad or the name box down by a single pixel. The name box in
   particular must never move: it is as immediately reachable as the pad, at
   the same place, always. */
.pos-signhead {
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 26px;
	margin-bottom: 8px;
}

.pos-signhead .pos-padlabel { margin: 0; }

/* A small solid chip, deliberately no taller or more insistent than the SIGN
   HERE label next to it - same family, case, weight and letter-spacing, just
   coloured. It stays fully invisible (opacity 0, zero width) until a real
   signature exists, not merely the sliver that is enough to save one, and the
   pen has been off the pad for a while; then it wipes open. */
.pos-unsave {
	position: relative;
	margin-left: auto;
	appearance: none;
	background: var(--red);
	border: 0;
	border-radius: 3px;
	color: #fff;
	font-family: var(--sans);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1;
	padding: 7px 10px;
	max-width: 160px;
	opacity: 1;
	overflow: hidden;
	white-space: nowrap;
	cursor: pointer;
	transition: max-width 320ms ease, opacity 260ms ease, transform 260ms ease, padding 320ms ease;
}

/* An invisible larger hit area, so the visible chip can stay small without the
   tap target shrinking below the site's other 44px targets. */
.pos-unsave::after {
	content: "";
	position: absolute;
	inset: -11px -8px;
}

.pos-unsave.is-idle {
	max-width: 0;
	padding-left: 0;
	padding-right: 0;
	opacity: 0;
	transform: translateX(6px);
	pointer-events: none;
	visibility: hidden;
}

.pos-unsave:hover { background: #7e160f; }

/* Just the symbol: no box, no border, no fill behind it. Clears the drawing so
   it can be redone; it never touches the saved record and never changes who
   the site thinks you are. Not gated by anything - Unsave is the only control
   on this page that asks for confirmation. Disabled only when there is
   nothing yet to clear, and for the whole of any stroke; both states fade
   smoothly rather than flipping, so it never reads as "black, then suddenly
   grey". */
.pos-reset {
	position: absolute;
	top: 2px;
	right: 2px;
	z-index: 3;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	appearance: none;
	background: none;
	border: 0;
	padding: 0;
	color: var(--faint);
	opacity: 0.7;
	cursor: pointer;
	transition: opacity 400ms ease, color 400ms ease;
}

.pos-reset svg {
	width: 17px;
	height: 17px;
	display: block;
}

.pos-reset:hover:not([disabled]) { color: var(--ink); }
.pos-reset[disabled] { opacity: 0.28; cursor: default; }

/* ---------- fields ---------- */

.pos-nameblock { margin-top: 4px; }

.pos-fieldlabel {
	display: block;
	margin: 0 0 6px;
	font-family: var(--sans);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--muted);
}

.pos-fieldlabel-mt { margin-top: 22px; }

/* Ordinary web form fields, not editorial typesetting: the serif belongs to
   the petition and the headings. 16px is the floor - anything smaller makes
   iOS zoom the page on focus. */
.pos-input {
	display: block;
	width: 100%;
	min-height: 48px;
	padding: 10px 12px;
	font-family: var(--sans);
	font-size: 16px;
	color: var(--ink);
	background: var(--field);
	border: 1px solid var(--rule);
	border-radius: 2px;
}

.pos-textarea { min-height: 108px; line-height: 1.45; resize: vertical; }

/* Clear of the pad on purpose: butted up against it, it read as a caption on
   the signature rather than a field of its own. The border darkens on focus so
   it is unmistakably live once the caret lands in it. */
.pos-nameinput {
	margin-top: 14px;
	transition: border-color 160ms ease;
}

.pos-nameinput:focus {
	border-color: var(--ink);
}

/* Every piece of pre-filled prompt text on the site is grey, and only grey. */
::placeholder { color: var(--placeholder); opacity: 1; }
::-webkit-input-placeholder { color: var(--placeholder); opacity: 1; }

.pos-visuallyhidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Two small, identically-styled boxes - a plain custom checkbox rather than
   the browser's own, so the pair reads as one deliberate control instead of a
   dropped-in OS widget. The label wraps the whole row, so the tap target is
   the full row height even though the visible box stays small. */
/* The pair sits in a soft warm-tinted panel with a thin edge all round, the
   way a highlighted passage sits in a document. Boxes anchor to the cap
   height of the first letter rather than centring on the line, so a label
   that wraps on a narrow phone keeps its box on the first line. */
.pos-checks {
	display: flex;
	flex-direction: column;
	margin-top: 14px;
	padding: 8px 14px;
	background: var(--callout);
	border: 1px solid var(--rule);
	border-radius: 2px;
}

.pos-check {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 7px 0;
	min-height: 32px;
	font-family: var(--times);
	font-size: 15.5px;
	color: var(--ink);
	cursor: pointer;
}

.pos-check input {
	appearance: none;
	-webkit-appearance: none;
	width: 17px;
	height: 17px;
	margin: 3px 0 0;
	flex: none;
	border: 1.5px solid var(--rule);
	border-radius: 2px;
	background: var(--field);
	position: relative;
	cursor: pointer;
}

/* Pen tick: the box stays white and the tick is drawn in ink, the way a pen
   marks a printed box. */
.pos-check input:checked {
	background: var(--field);
	border-color: var(--ink);
}

.pos-check input:checked::after {
	content: "";
	position: absolute;
	left: 4px;
	top: 1px;
	width: 5px;
	height: 9px;
	border: solid var(--ink);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.pos-nextrow {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 20px;
	flex-wrap: wrap;
}

.pos-nexthint {
	font-family: var(--sans);
	font-size: 12.5px;
	color: var(--faint);
}

.pos-nexthint[hidden] { display: none; }

/* The promise, at the right-hand end of the Next row, filling the space the
   button leaves. Drops beneath the button on a phone. */
.pos-note {
	margin: 0 0 0 auto;
	max-width: 17rem;
	font-family: var(--sans);
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--muted);
	text-align: right;
}

/* ---------- buttons ---------- */

.pos-btn {
	appearance: none;
	font-family: var(--sans);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.02em;
	min-height: 48px;
	padding: 12px 20px;
	border-radius: 2px;
	border: 1px solid var(--ink);
	background: var(--field);
	color: var(--ink);
	cursor: pointer;
}

.pos-btn-primary { background: var(--next); border-color: var(--next); color: #fff; transition: background 160ms ease, border-color 160ms ease; }
.pos-btn-primary:not([disabled]):hover { filter: brightness(0.92); }
/* A quiet outline, not a solid block in an odd colour - it should read as "not
   ready yet", not as a button that broke. 6.7:1 against the page background. */
.pos-btn-primary[disabled] { background: transparent; border-color: var(--rule); color: var(--muted); cursor: default; }
.pos-btn-outline { background: transparent; }
.pos-btn-danger { background: var(--red); border-color: var(--red); color: #fff; }
.pos-btn-danger[disabled] { background: #d8b5b2; border-color: #d8b5b2; color: #5a2a26; cursor: default; }
.pos-btn-wide { display: block; width: 100%; text-align: center; }
.pos-btn-small { min-height: 44px; font-size: 14px; padding: 10px 14px; }

/* ---------- screen 2 ---------- */

.pos-stage2 {
	margin-top: 26px;
	padding-top: 22px;
	border-top: 1px solid var(--rule);
}

.pos-attrrow { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.pos-attrrow .pos-btn { flex: 1 1 44%; }
.pos-attrrow .pos-btn.is-on { background: var(--ink); color: var(--paper); }

.pos-msgnote {
	margin: 10px 0 0;
	font-family: var(--sans);
	font-size: 13px;
	color: var(--faint);
	min-height: 18px;
}

/* ---------- consent gate ---------- */

.pos-gate {
	margin-top: 26px;
	padding: 16px;
	border: 1px solid var(--rule);
	background: #fff;
	border-radius: 2px;
}

.pos-gatewarn {
	margin: 0 0 10px;
	font-family: var(--sans);
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.045em;
	text-transform: uppercase;
	color: var(--ink);
}

.pos-gatelock {
	margin: 0 0 12px;
	font-family: var(--sans);
	font-size: 13px;
	color: var(--faint);
	min-height: 18px;
}

.pos-gatebtns { display: grid; gap: 10px; }

.pos-redactnote {
	margin: 2px 0 0;
	font-family: var(--sans);
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--muted);
}

.pos-redactnote b { font-weight: 600; color: var(--ink); }

.pos-consent {
	appearance: none;
	display: block;
	width: 100%;
	min-height: 52px;
	padding: 14px 16px;
	border: 0;
	border-radius: 2px;
	font-family: var(--sans);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.03em;
	color: #fff;
	cursor: pointer;
	text-align: left;
}

.pos-consent[disabled] { opacity: 0.45; cursor: default; }
.pos-consent.is-on { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--ink); }
.pos-green { background: var(--green); }
.pos-red { background: var(--red); }
.pos-purple { background: var(--purple); min-height: 64px; line-height: 1.3; }

/* ---------- petition text ---------- */

.pos-petition {
	margin-top: 34px;
	padding-top: 22px;
	border-top: 1px solid var(--rule);
}

.pos-toggle {
	display: inline-flex;
	border: 1px solid var(--rule);
	border-radius: 2px;
	overflow: hidden;
	margin-bottom: 16px;
}

.pos-toggle-btn {
	appearance: none;
	background: transparent;
	border: 0;
	border-right: 1px solid var(--rule);
	min-height: 44px;
	padding: 0 18px;
	font-family: var(--sans);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
	cursor: pointer;
}

.pos-toggle-btn:last-child { border-right: 0; }
.pos-toggle-btn.is-on { background: var(--ink); color: var(--paper); }

.pos-textbody { font-size: 17px; line-height: 1.62; }
.pos-textbody p { margin: 0 0 1em; }
.pos-textbody a { color: var(--ink); }

/* The petition's own body copy, specifically: classic Times New Roman, not the
   --serif editorial pairing used for headings and the rest of the page. */
.pos-petition .pos-textbody {
	font-family: var(--times);
}

/* ---------- marks inside the petition text ---------- */

/* Three highlighter tints, pale enough to sit under ink text without touching
   its contrast; the same tints key the legend. */
mark.pos-hl-y, .pos-legend .pos-hl-y { background: #f6ecc0; }
mark.pos-hl-b, .pos-legend .pos-hl-b { background: #dfe8ee; }
mark.pos-hl-g, .pos-legend .pos-hl-g { background: #e1ecd9; }

.pos-textbody mark {
	color: inherit;
	padding: 0.06em 0.18em;
	margin: 0 -0.04em;
	border-radius: 2px;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

.pos-textbody u { text-decoration: underline; text-underline-offset: 2px; }

.pos-callout {
	margin: 0 0 1em;
	padding: 12px 16px;
	border: 1px solid var(--rule);
	border-radius: 2px;
	background: var(--callout);
}

.pos-callout p:last-child { margin-bottom: 0; }
.pos-callout-blue { background: #e6edf2; border-color: #c9d6df; }
.pos-callout-green { background: #e6eee0; border-color: #c8d6bd; }

/* Document head: title, subtitle, legend - centred, above the columns. */
.pos-dochead { text-align: center; margin: 4px 0 20px; }

.pos-doctitle {
	margin: 0;
	font-family: var(--times);
	font-size: 22px;
	font-weight: 400;
	line-height: 1.25;
}

.pos-docsub {
	margin: 3px 0 0;
	font-family: var(--times);
	font-size: 15px;
	color: var(--muted);
}

/* One line wherever it fits; on a phone it wraps between items, never inside
   one. */
.pos-legend {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
	display: flex;
	justify-content: center;
	gap: 5px 16px;
	flex-wrap: wrap;
	font-family: var(--sans);
	font-size: 11px;
	color: var(--muted);
}

.pos-legend li { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.pos-legend span { display: inline-block; width: 12px; height: 12px; border-radius: 2px; flex: none; }

@media (min-width: 600px) { .pos-legend { flex-wrap: nowrap; } }

/* Hierarchy inside the text. Headings are paragraphs that are entirely bold.
   [small] paragraphs are the supporting detail - exceptions, factor lists,
   citations - set a step down so the prohibitions carry the weight. */
.pos-textbody .pos-heading { margin: 1.5em 0 0.55em; }
.pos-textbody .pos-heading:first-child { margin-top: 0; }
.pos-textbody .pos-small { font-size: 14.5px; line-height: 1.55; }
.pos-textbody .pos-small.pos-heading { margin: 1.3em 0 0.5em; letter-spacing: 0.06em; }

/* Two columns once there is room. The section breaks out of the form's
   column so each text column stays a readable measure; the break marker in
   the text decides where the second column starts. */
.pos-colbreak { height: 0; margin: 0; }

@media (min-width: 900px) {
	.pos-petition { width: 48rem; margin-left: -6rem; }
	.pos-textbody { columns: 2; column-gap: 36px; }
	.pos-textbody p, .pos-callout { break-inside: avoid; }
	.pos-colbreak { break-before: column; }
}

/* ---------- wall ---------- */

.pos-walllede {
	margin: 10px 0 0;
	font-family: var(--sans);
	font-size: 13px;
	color: var(--muted);
	line-height: 1.5;
}

.pos-grid {
	list-style: none;
	margin: 18px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px 12px;
}

.pos-tile { margin: 0; }

.pos-tile-img {
	width: 100%;
	aspect-ratio: var(--pad-ratio);
	background: #fff;
	border: 1px solid var(--rule-soft);
	border-radius: 2px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

@supports not (aspect-ratio: 1) {
	.pos-tile-img { height: 0; padding-bottom: 42.55%; }
}

.pos-tile-img img { width: 100%; height: 100%; object-fit: contain; display: block; }

.pos-tile-typed span {
	font-family: var(--serif);
	font-style: italic;
	font-size: 17px;
	padding: 0 8px;
	text-align: center;
	line-height: 1.15;
	max-height: 100%;
	overflow: hidden;
}

.pos-tile-name {
	margin: 5px 0 0;
	font-family: var(--sans);
	font-size: 12.5px;
	line-height: 1.3;
	color: var(--muted);
	overflow-wrap: anywhere;
}

.pos-empty { font-family: var(--sans); font-size: 14px; color: var(--faint); margin-top: 22px; }

.pos-messages { margin-top: 38px; padding-top: 22px; border-top: 1px solid var(--rule); }
.pos-msglist { list-style: none; margin: 0; padding: 0; }
.pos-msgitem { margin: 0 0 22px; padding-bottom: 18px; border-bottom: 1px solid var(--rule-soft); }
.pos-msgitem blockquote { margin: 0; font-size: 17px; line-height: 1.55; }
.pos-msgattr { margin: 8px 0 0; font-family: var(--sans); font-size: 12.5px; color: var(--muted); }
.pos-msgmail { color: var(--faint); }

@media (min-width: 620px) {
	.pos-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- modals ---------- */

.pos-modalroot { position: fixed; inset: 0; z-index: 60; }
.pos-modalroot[hidden] { display: none; }

.pos-scrim { position: absolute; inset: 0; background: rgba(23, 21, 15, 0.55); }

.pos-modal {
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: 100%;
	max-width: 30rem;
	background: var(--paper);
	border-top: 3px solid var(--ink);
	border-radius: 2px 2px 0 0;
	padding: 22px 20px calc(22px + env(safe-area-inset-bottom));
	box-shadow: 0 -8px 40px rgba(23, 21, 15, 0.25);
}

.pos-modal[hidden] { display: none; }

@media (min-width: 560px) {
	.pos-modal { bottom: auto; top: 50%; transform: translate(-50%, -50%); border-radius: 2px; }
}

.pos-modal-h { margin: 0 0 4px; font-size: 21px; font-weight: 400; line-height: 1.25; padding-right: 34px; }
.pos-modal-p { margin: 6px 0 0; font-size: 15px; color: var(--muted); font-family: var(--sans); }
.pos-modal-small { margin: 6px 0 0; font-size: 12.5px; color: var(--faint); font-family: var(--sans); }
.pos-modal-btns { display: grid; gap: 10px; margin-top: 18px; }

.pos-x {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 44px;
	height: 44px;
	appearance: none;
	background: none;
	border: 0;
	font-size: 26px;
	line-height: 1;
	color: var(--muted);
	cursor: pointer;
}

/* ---------- misc ---------- */

.pos-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.pos-nojs { display: none; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--rule); }
.pos-nojs label { display: block; margin-bottom: 8px; font-family: var(--sans); font-size: 14px; color: var(--muted); }
.pos-nojs input[type="text"] { display: block; width: 100%; min-height: 48px; margin-bottom: 10px; padding: 10px 12px; font-family: var(--serif); font-size: 18px; border: 1px solid var(--rule); border-radius: 2px; }
.pos-nojs input.pos-hp { display: none; }

.pos-nojs-ok {
	margin: 0 0 14px;
	padding: 10px 12px;
	border-left: 3px solid var(--green);
	background: #fff;
	font-family: var(--sans);
	font-size: 14px;
}

.pos-walllink { margin-top: 30px; font-family: var(--sans); font-size: 14px; }

.pos-foot {
	margin-top: 44px;
	padding-top: 16px;
	border-top: 1px solid var(--rule);
	font-family: var(--sans);
	font-size: 13px;
	color: var(--faint);
	display: flex;
	gap: 8px;
	align-items: center;
}

.pos-foot a, .pos-walllink a {
	color: var(--faint);
	/* 20px of text plus 24px of padding: a 44px touch target that still reads
	   as a line of small type. */
	display: inline-block;
	padding: 12px 0;
	line-height: 20px;
}
a { color: var(--ink); }

/* ---------- sign-here cue in the pad ---------- */

/* A signature line with a small x where you start, and a flourish at 5% -
   a suggestion of a mark, not a mark. All vector, all currentColor. The x and
   the flourish go at the first stroke; the line stays, like paper. */
.pos-baseline {
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 36px;
	border-top: 1px solid var(--rule);
	pointer-events: none;
}

.pos-baseline svg {
	position: absolute;
	left: 1px;
	bottom: 5px;
	width: 9px;
	height: 9px;
	color: #b9b1a1;
	stroke: currentColor;
	stroke-width: 1.3;
	stroke-linecap: round;
	fill: none;
	transition: opacity 160ms ease;
}

.pos-ghost {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	opacity: 0.05;
	stroke: var(--ink);
	fill: none;
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
	transform: rotate(-2deg);
	transition: opacity 160ms ease;
}

.pos-padwrap.has-ink .pos-baseline svg,
.pos-padwrap.has-ink .pos-ghost { opacity: 0; }

/* ---------- campaign note: the last thing on the signing page ---------- */

.pos-campaign {
	margin: 28px 0 0;
	font-family: var(--sans);
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--faint);
}

.pos-campaign a { color: var(--muted); }

/* ---------- hub: the main site, mirrored while the domain is campaigning ---------- */

body.pos-hub {
	background:
		radial-gradient(circle at 65% 12%, #fefbf4 0%, rgba(255, 249, 236, 0.55) 34%, transparent 56%),
		var(--paper);
}

.pos-hubwrap {
	max-width: 60rem;
	padding-top: 24px;
	padding-bottom: 48px;
}

.pos-hubshell {
	position: relative;
	padding: clamp(14px, 5vw, 26px);
	border: 1px solid var(--rule);
	border-radius: 20px;
	background:
		linear-gradient(160deg, rgba(255, 255, 255, 0.82), rgba(254, 247, 233, 0.95));
	box-shadow: 0 16px 40px rgba(23, 21, 15, 0.08);
	overflow: hidden;
}

.pos-hubshell::before {
	content: "";
	position: absolute;
	inset: 0;
	border: 1px solid rgba(23, 21, 15, 0.08);
	border-radius: inherit;
	pointer-events: none;
}

.pos-hubshell::after {
	content: "";
	position: absolute;
	top: 30%;
	right: -6%;
	width: 42%;
	height: 46%;
	transform: rotate(-7deg);
	background: radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.52), transparent 72%);
	pointer-events: none;
}

.pos-hubhead {
	text-align: center;
	position: relative;
	z-index: 1;
}

.pos-hubkicker {
	margin: 0;
	font-family: var(--sans);
	font-size: 11px;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: #746a57;
}

.pos-wordmark {
	margin: 8px 0 0;
	font-family: "Bodoni MT", "Didot", "Baskerville Old Face", "Garamond", var(--times);
	font-size: clamp(42px, 12vw, 68px);
	font-weight: 700;
	letter-spacing: 0.14em;
	line-height: 0.95;
	display: inline-flex;
	align-items: center;
	gap: 0.18em;
	text-transform: uppercase;
}

.pos-wordmark .pos-eye-lg {
	width: .76em;
	height: .76em;
	transform: translateY(.01em);
}

.pos-tagline {
	margin: 14px 0 0;
	font-family: var(--serif);
	font-style: italic;
	font-size: clamp(18px, 4.6vw, 24px);
	line-height: 1.24;
	color: #3e3a2e;
}

.pos-hubnav {
	margin: 24px 0 0;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px 12px;
}

.pos-hubnav .pos-hubtab {
	display: inline-flex;
	align-items: center;
	height: 42px;
	padding: 0 16px;
	border: 1px solid var(--rule);
	border-radius: 999px;
	color: var(--ink);
	font-family: var(--sans);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none;
	transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background-color 160ms ease;
}

.pos-hubnav .pos-hubtab:hover,
.pos-hubnav .pos-hubtab:focus-visible {
	transform: translateY(-2px);
	border-color: #bfa56a;
	box-shadow: 0 8px 18px rgba(23, 21, 15, 0.08);
	background: #fff;
}

.pos-eye {
	fill: currentColor;
	stroke: none;
	aspect-ratio: 1;
}

.pos-eye .pos-eye-pupil {
	fill: currentColor;
	stroke: none;
}

.pos-eye-lg {
	width: .76em;
	height: .76em;
}

.pos-hubnote {
	margin-top: 26px;
	font-family: var(--sans);
	font-size: 14px;
	line-height: 1.58;
	background: linear-gradient(115deg, rgba(255, 255, 255, 0.94), rgba(252, 245, 235, 0.9));
	border: 1px solid var(--rule);
	border-radius: 14px;
	padding: 16px;
	box-shadow: 0 12px 28px rgba(23, 21, 15, 0.07);
}

.pos-hubnote a {
	color: #2f2b1f;
	font-weight: 700;
	text-underline-offset: 2px;
}

.pos-hubnote p { margin: 0; }
.pos-hubnote p + p { margin-top: 10px; }
.pos-hubnote-small {
	font-size: 13px;
	color: var(--faint);
}

@media (min-width: 780px) {
	.pos-hubwrap {
		padding-top: 34px;
	}
}

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

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; animation: none !important; }
}