.owt {
	--owt-size-min: 1.25rem;
	--owt-size-max: 3.125rem;
	--owt-gap: 0.35em;

	--owt-brand: #00539d;
	--owt-cream: #f8eedc;
	--owt-field-radius: 100px;
	--owt-field-radius-lg: 8px;
	--owt-field-font-size: 14px;
	--owt-field-tracking: 2px;
	--owt-card-radius: 20px;
	/*
	 * The design sets every heading in EB Garamond Bold. The Gretchen Rubin theme
	 * self-hosts it under the family name `EBGaramond`, with no space — written
	 * the way Figma reports the face, `EB Garamond`, it silently resolves to the
	 * browser's default serif and the heading looks almost but not quite right.
	 * A token so a site that registers the face under another name can say so in
	 * one place.
	 */
	--owt-serif-font: 'EBGaramond', 'EB Garamond', Garamond, 'Times New Roman', serif;
	/* Its own name, because a site may already be overriding this one. */
	--owt-heading-font: var(--owt-serif-font);

	/* The grey the design sets both of the form's secondary notes in. */
	--owt-muted: #656565;

	max-width: 60rem;
	margin: 0 auto;
}

.owt-hidden { display: none !important; }

.owt-hp {
	position: absolute !important;
	left: -9999px !important;
}

.owt-field { display: block; margin-bottom: 1.25rem; }
.owt-field label { display: block; font-weight: 600; margin-bottom: 0.35rem; }
/*
 * The design sets this note in the serif italic rather than the body face, and
 * gives it a flat grey. It used to lean on `opacity` for that grey, which tints
 * whatever sits behind it — over the form's white card the two happened to
 * agree, so state the colour instead of reproducing it by accident.
 */
.owt-field__hint {
	display: block;
	margin-top: 0.25rem;
	font-family: var(--owt-serif-font);
	font-style: italic;
	font-size: 14px;
	color: var(--owt-muted);
}

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

.owt-field input[type="text"],
.owt-field input[type="email"],
.owt-field textarea {
	width: 100%;
	/* Themes vary on the global border-box reset, so pad inside the width. */
	box-sizing: border-box;
	padding: 0.5rem 1rem;
	border: 1px solid var(--owt-brand);
	border-radius: var(--owt-field-radius);
	background: transparent;
	color: var(--owt-brand);
	font-family: inherit; /* Browsers default <textarea> to monospace. */
	font-size: var(--owt-field-font-size);
	letter-spacing: var(--owt-field-tracking);
}

.owt-field textarea {
	border-radius: var(--owt-field-radius-lg);
	padding: 0.75rem 1rem;
	min-height: 9.5rem;
	resize: vertical;
}

/*
 * Placeholder copy is authored in sentence case and uppercased here, so
 * translators and screen readers get natural text rather than shouted strings.
 */
.owt-field input[type="text"]::placeholder,
.owt-field input[type="email"]::placeholder,
.owt-field textarea::placeholder {
	color: var(--owt-brand);
	font-size: var(--owt-field-font-size);
	font-weight: 500;
	letter-spacing: var(--owt-field-tracking);
	text-transform: uppercase;
	opacity: 1; /* Firefox dims placeholders by default. */
}

.owt-field input[type="text"]:focus-visible,
.owt-field input[type="email"]:focus-visible,
.owt-field textarea:focus-visible {
	outline: 2px solid var(--owt-brand);
	outline-offset: 2px;
}

.owt-error { color: var(--owt-palette-2); font-weight: 600; }

/*
 * Scoped under .owt, not left as a bare class, because a plugin's button has to
 * hold its own against an unknown theme. This one sets its global link colour
 * on `a:link`, which out-specifies a single class: the filled button's white
 * label lost to it and rendered brand blue on a brand blue pill, leaving the
 * two links on the thank-you screen invisible. Every button the plugin renders
 * sits inside a .owt root, the gallery dialog included — it is appended to the
 * gallery element rather than to the body.
 */
.owt .owt-button {
	display: inline-block;
	padding: 0.6rem 1.4rem;
	border: 0;
	border-radius: 999px;
	background: var(--owt-brand);
	color: #fff;
	cursor: pointer;
	text-decoration: none;
}

.owt .owt-button--ghost {
	background: transparent;
	color: var(--owt-brand);
	box-shadow: inset 0 0 0 2px currentColor;
}

/*
 * A checkbox row, its label, and — on the newsletter row — the note beneath.
 * Two columns rather than an indent: the note sits in the label's own column,
 * so it stays aligned whatever the box measures, and `.owt-field label` being
 * block and 600 by default stops mattering. The label is associated by `for`
 * rather than wrapping the box, so a link inside the wording is clickable on
 * its own instead of toggling the checkbox.
 */
.owt .owt-field--check {
	--owt-check-size: 1rem;

	display: grid;
	grid-template-columns: var(--owt-check-size) 1fr;
	align-items: center;
	gap: 0.25rem 0.5rem;
}

.owt .owt-field--check label {
	margin: 0;
	font-size: 13px;
	font-weight: 500;
	color: var(--owt-muted);
}

.owt .owt-field--check input[type="checkbox"] {
	width: var(--owt-check-size);
	height: var(--owt-check-size);
	margin: 0;
}

.owt .owt-field__consent {
	grid-column: 2;
	font-family: var(--owt-serif-font);
	font-size: 13px;
	color: var(--owt-muted);
}

/* The two rows read as one block, so they sit closer than the fields above. */
.owt .owt-field--check + .owt-field--check { margin-top: 0.5rem; }

/*
 * Scoped past the theme's `a:link`, which out-specifies a single class and would
 * otherwise pull both references out of the sentence in the theme's link colour.
 * The design keeps them in the sentence's own grey, marked only by the underline.
 */
.owt .owt-field__consent a,
.owt .owt-field__consent a:link,
.owt .owt-field__consent a:visited,
.owt .owt-field__consent a:hover {
	color: inherit;
	text-decoration: underline;
}

.owt-form__submit { text-align: center; }

/* Matches the placeholder type so the submit reads as part of the field stack. */
.owt .owt-button--caps {
	padding: 0.55rem 2rem;
	font-family: inherit;
	font-size: var(--owt-field-font-size);
	font-weight: 500;
	letter-spacing: var(--owt-field-tracking);
	text-transform: uppercase;
}

/*
 * The card the whole submit page sits on — heading, sentence, fields, submit
 * button, and the thank-you that replaces them. The design draws one 20px
 * rectangle behind all of it, the same card the gallery and sorter each draw
 * for themselves; the submit page had been borrowing a white background set on
 * the Elementor column behind it, which left it square where the design rounds
 * it and tied the look of the page to a setting the plugin cannot see.
 *
 * 54px above the heading and 56px below the button, from the design.
 */
.owt-form {
	background: #fff;
	border-radius: var(--owt-card-radius);
	padding: 3.375rem 1.5rem 3.5rem;
}

/* The opening heading and sentence the submit page leads with. */
.owt-form__intro {
	text-align: center;
	margin: 0 auto 2.5rem;
	max-width: 44rem;
}

.owt-form__intro a {
	color: var(--owt-brand);
	text-decoration: none;
}

.owt-form__intro a:hover,
.owt-form__intro a:focus-visible { text-decoration: underline; }

.owt-form .owt-heading { text-align: center; }

/*
 * Shown in place of the fields, inside the same card rather than as one of its
 * own — the design keeps a single rectangle across both states, only shorter
 * once the thank-you is all that is left in it.
 */
.owt-form__confirmation { text-align: center; }

/* The confirmation, gallery and dialog headings are one style in the design. */
.owt-heading {
	margin: 0 0 0.75rem;
	color: var(--owt-brand);
	font-family: var(--owt-heading-font);
	/* The theme sets headings at 500; the design draws them bold. */
	font-weight: 700;
	font-size: clamp( 2rem, 5vw, 3.125rem );
	line-height: 1.2;
	letter-spacing: -0.75px;
}

.owt-form__review { margin: 0 0 2rem; }

.owt-form__next {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem 2.5rem;
	margin: 0;
}

.owt-cloud {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--owt-gap);
	line-height: 1.15;
	padding: 1.5rem 0;
}

/*
 * PHP supplies --owt-word-position (0–1, logarithmic in the word's count) and
 * the two custom properties above turn it into a size. Retuning the bounds is
 * therefore a stylesheet change, with no PHP involved.
 */
.owt-word {
	font-size: calc(
		var(--owt-size-min) + ( var(--owt-size-max) - var(--owt-size-min) ) * var(--owt-word-position, 0)
	);
	text-decoration: none;
	background: none;
	border: 0;
	padding: 0.05em 0.15em;
	cursor: pointer;
	transition: transform 0.15s ease;
	transform-origin: center;
}

.owt-word { color: var(--owt-brand); }

.owt-word:hover,
.owt-word:focus-visible { transform: scale( 1.25 ); z-index: 2; position: relative; }

@media ( prefers-reduced-motion: reduce ) {
	.owt-word { transition: none; }
	.owt-word:hover,
	.owt-word:focus-visible { transform: none; text-decoration: underline; }
	.owt-card__flipper { transition: none; }
}

/*
 * The design floats the card on the background image rather than letting it
 * fill the section: 110px of the image shows above the card, 72px sits between
 * the card and the button row, and 71px below it — 72px here so the space above
 * and below the buttons reads as one measure.
 *
 * margin-block rather than margin, so the `margin: 0 auto` on .owt keeps
 * centring the card horizontally.
 */
.owt-gallery { margin-block: 6.875rem 4.5rem; }

.owt-gallery__stage {
	background: #fff;
	border-radius: var(--owt-card-radius);
	padding: 2.5rem 1.5rem 3rem;
	text-align: center;
}

.owt-gallery__prompt { margin: 0 0 1.5rem; }
.owt-gallery__more { text-align: center; }

.owt-gallery__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem 2.2rem;
	margin: 4.5rem 0 0;
}
.owt-panel { max-width: 40rem; margin: 1.5rem auto; }
.owt-panel__stories { list-style: none; padding: 0; }
.owt-panel__stories li { padding: 0.75rem 0; border-top: 1px solid rgba( 0, 0, 0, 0.1 ); }

.owt-dialog {
	max-width: 38rem;
	width: calc( 100% - 2rem );
	padding: 2rem 2.25rem 2.5rem;
	border: 0;
	border-radius: var(--owt-card-radius);
	background: var(--owt-cream);
	box-shadow: 0 4px 24px -6px rgba( 0, 0, 0, 0.3 );
	text-align: center;
}

/*
 * The comp keeps the cloud fully legible behind the panel, so there is no dim.
 * The dialog element still traps focus and closes on Escape, so it stays modal
 * in behaviour even without the usual scrim.
 */
.owt-dialog::backdrop { background: transparent; }

.owt-dialog__word { margin: 0 0 0.5rem; font-size: clamp( 1.75rem, 4vw, 2.5rem ); }
.owt-dialog__intro { margin: 0 0 1.5rem; font-size: 0.95rem; }

.owt-dialog__stories {
	max-height: 15rem;
	margin: 0;
	padding: 0 1rem 0 0;
	overflow-y: auto;
	list-style: none;
	text-align: left;
}

/*
 * Whether the thumb sits there permanently or fades in while scrolling is the
 * viewer's OS setting, not something to fight — macOS defaults to fading. These
 * two properties colour it either way.
 */
.owt-dialog__stories {
	scrollbar-width: thin;
	scrollbar-color: var(--owt-brand) rgba( 0, 0, 0, 0.08 );
}

.owt-dialog__stories li + li { margin-top: 1.25rem; }

/* The design separates explanations with a row of dots rather than a rule. */
.owt-dialog__stories li + li::before {
	content: '•••••';
	display: block;
	margin-bottom: 1.25rem;
	color: var(--owt-brand);
	font-size: 0.7rem;
	letter-spacing: 0.35em;
}

/* Scoped under .owt for the same reason as .owt-button: a bare class is not
   enough to hold a theme's button rules off. */
.owt .owt-dialog__close {
	position: absolute;
	top: 0.75rem;
	right: 1rem;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--owt-brand);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}

/* showModal() focuses this button, so a theme's :focus ring lands on it every
   time the dialog opens. Keep the ring for keyboard use only. */
.owt .owt-dialog__close:focus { outline: none; }

.owt .owt-dialog__close:focus-visible {
	outline: 2px solid var(--owt-brand);
	outline-offset: 2px;
	border-radius: 4px;
}

/*
 * The Gretchen Rubin theme's reset paints every button magenta on `:hover, :focus`.
 * showModal() focuses this button as the dialog opens, so without this reset the
 * close control renders as a filled magenta pill from the moment it appears —
 * no pointer involved. Restate the resting colours for both states.
 */
.owt .owt-dialog__close:hover,
.owt .owt-dialog__close:focus {
	background: none;
	color: var(--owt-brand);
}

/*
 * Same 110px of background above the card as the gallery. The design draws the
 * sorter's own gap slightly wider, but the two pages sit next to each other in
 * the same flow and a shared measure reads as deliberate where two near-misses
 * read as drift.
 *
 * margin-block-start only: the space below the buttons already lands close to
 * the design, and adding the gallery's bottom margin on top of it would double
 * the gap before the footer.
 */
.owt-sorter {
	text-align: center;
	margin-block-start: 6.875rem;
}

.owt-sorter__stage {
	background: #fff;
	border-radius: var(--owt-card-radius);
	padding: 2.5rem 1.5rem 3rem;
}

.owt-sorter__prompt { margin: 0 0 1.75rem; }

/*
 * The playing card. Proportions come straight from the design: a 306x457 face
 * with a 261x413 panel inset inside it, so every inner measurement below is a
 * percentage of those two boxes and the whole card scales from one width.
 */
.owt-card {
	container-type: inline-size;
	display: block;
	position: relative;
	width: min( 306px, 100% );
	aspect-ratio: 306 / 457;
	margin: 0 auto;
	padding: 0;
	border: 0;
	border-radius: 20px;
	background: none;
	perspective: 1000px;
	cursor: pointer;
}

.owt-card[disabled] { cursor: default; }

/*
 * Themes commonly outline any :focus button, which on a card-sized control
 * draws a hard rectangle around the artwork on every mouse click. Keep the
 * ring for keyboard use only, and let it follow the card's corners.
 */
.owt-card:focus { outline: none; }

.owt-card:focus-visible {
	outline: 2px solid var(--owt-brand);
	outline-offset: 4px;
}

.owt-card__flipper {
	position: absolute;
	inset: 0;
	transform-style: preserve-3d;
	transition: transform 0.5s ease;
}

[data-owt-revealed] .owt-card__flipper { transform: rotateY( 180deg ); }

.owt-card__back,
.owt-card__face {
	position: absolute;
	inset: 0;
	border-radius: 20px;
	background: #17673f url( ../img/card-texture.jpg ) center / cover;
	box-shadow: 0 4px 16px -4px rgba( 0, 0, 0, 0.25 );
	backface-visibility: hidden;
}

.owt-card__face { transform: rotateY( 180deg ); }

.owt-card__panel {
	position: absolute;
	inset: 4.81% 7.35%;
	border: 2px solid #17673f;
	border-radius: 14px;
}

/* Three concentric layers: stroked ring, filled disc, then the monogram. */
.owt-card__monogram,
.owt-card__monogram::before,
.owt-card__monogram::after {
	position: absolute;
	top: 50%;
	left: 50%;
	border-radius: 50%;
	transform: translate( -50%, -50% );
	content: '';
}

.owt-card__monogram {
	width: 31.4cqw;
	height: 31.4cqw;
	border: 2px solid #17673f;
}

.owt-card__monogram::before {
	width: 25.5cqw;
	height: 25.5cqw;
	background: #17673f;
}

.owt-card__monogram::after {
	width: 17.3cqw;
	height: 17.3cqw;
	background: url( ../img/card-monogram.png ) center / contain no-repeat;
}

.owt-card__face .owt-card__panel {
	background-color: #f8eedc;
	background-image: url( ../img/card-fleuron.svg ), url( ../img/card-fleuron.svg ),
		url( ../img/card-fleuron.svg ), url( ../img/card-fleuron.svg );
	background-repeat: no-repeat;
	background-size: 11.1%;
	background-position: 2.7% 1.7%, 97.3% 1.7%, 2.7% 98.3%, 97.3% 98.3%;
}

.owt-card__word {
	position: absolute;
	top: 50%;
	right: 8%;
	left: 8%;
	transform: translateY( -50% );
	color: #17673f;
	font-size: 1.875rem;
	font-size: clamp( 1.125rem, 9.8cqw, 1.875rem );
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.45px;
	overflow-wrap: break-word;
}

/*
 * Every theme sits on one line, with long words scaled down to the card rather
 * than wrapped. The scaling is measured in JavaScript, so the single line is
 * only promised once that runs — without it the word wraps instead of spilling
 * off the card.
 */
[data-owt-fit] .owt-card__word {
	overflow-wrap: normal;
	white-space: nowrap;
}

.owt-sorter__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem 2.2rem;
	margin: 1.75rem 0 0;
}

/*
 * Both buttons share a row at equal width, shrinking together rather than
 * wrapping. Below the width where the longer label would be crushed they stack
 * full-width instead.
 *
 * The design draws these 331x52 with the label on one line, and two things have
 * to be stated for that to survive on a live page.
 *
 * The line box: a theme sets a body line-height — this one's is 32px — and
 * inheriting it makes the button eleven pixels taller than drawn. 22px is the
 * normal leading for Cabin at this size, which is what the design uses.
 *
 * The room for the label: "SUBMIT A ONE-WORD THEME" measures 287px at this size
 * and tracking, so horizontal padding above 22px a side wraps it onto a second
 * line and doubles the height of the button. The design insets the text by
 * nothing at all; 1rem leaves the longer label 12px of room, enough to absorb a
 * fallback face while still reading as a padded pill.
 */
.owt .owt-button--hero {
	flex: 0 1 331px;
	max-width: 100%;
	padding: 15px 1rem;
	line-height: 22px;
	background: #fff;
	color: var(--owt-brand);
	font-size: 17px;
	letter-spacing: 2.465px;
	/* The pill is wider than its label; without this the text sits at the left edge. */
	text-align: center;
}