/* ==========================================================================
   THE SUBSCRIBE SHEET
   Owner: rar-press-kit (inc/subscribe.php prints the markup).

   One <dialog>, two ways of standing up:

     [open]    subscribe.js called showModal(); the UA supplies the
               ::backdrop and centring.
     :target   the no-JS floor. The nav link's fragment matches the
               dialog id, so CSS alone can display it; the 100vmax
               box-shadow is the backdrop a script-free dialog cannot
               otherwise have, and CLOSE is a link to "#" whose
               navigation clears the fragment again.

   Fonts are the theme's global faces (Chomsky for the nameplate word,
   Oswald for furniture, Courier Prime for copy), referenced by family
   name with printable fallbacks, same convention as ads.css.
   ========================================================================== */

dialog.rar-subscribe {
	border: 0;
	padding: 0;
	background: transparent;
	width: min(430px, calc(100vw - 32px));
	/* The theme's global margin reset reaches <dialog> too, which
	   silently defeats the UA's margin:auto centring in the top
	   layer. Restated so the modal centres deterministically. */
	margin: auto;
}

dialog.rar-subscribe[open] {
	display: block;
}

/* The no-JS floor. */
dialog.rar-subscribe:target {
	display: block;
	position: fixed;
	inset: 0;
	margin: auto;
	height: fit-content;
	z-index: 90;
	box-shadow: 0 0 0 100vmax rgba(26, 23, 18, 0.55);
}

dialog.rar-subscribe::backdrop {
	background: rgba(26, 23, 18, 0.55);
}

/* While the modal is up, the page behind it holds still (class set by
   subscribe.js; the :target floor scrolls, which is the acceptable
   cost of having no script). */
html.rar-subscribe-locked {
	overflow: hidden;
}

.rar-subscribe__sheet {
	position: relative;
	background: var(--rar-paper, #f4efe4);
	border: 1px solid var(--rar-ink, #1a1712);
	box-shadow: 6px 8px 0 rgba(26, 23, 18, 0.28);
	padding: 42px 32px 36px;
	text-align: center;
}

.rar-subscribe__close {
	position: absolute;
	top: 12px;
	right: 14px;
	font-family: "Oswald", "Arial Narrow", sans-serif;
	font-weight: 600;
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--rar-ink, #1a1712);
	border-bottom: 1px solid currentColor;
}

/* The R plate. The theme frames content images in a 1px ink border and
   a grayscale grade; the plate is already ink on paper and needs
   neither. */
.rar-subscribe__plate {
	display: block;
	width: 72px;
	height: 72px;
	margin: 0 auto 12px;
	border: 0;
	filter: none;
}

.rar-subscribe__nameplate {
	font-family: "Chomsky", "Old English Text MT", serif;
	/* Sized so the three words hold ONE line: Chomsky sets this string
	   at 8.5x the font size (measured live 2026-07-29), against a sheet
	   content box of min(430,100vw-32) minus 64px of padding. 36px sets
	   306px in the 366px desktop box; 7.4vw keeps a 390px phone at
	   ~245px in its ~262px box. */
	font-size: clamp(24px, 7.4vw, 36px);
	line-height: 1.05;
	color: var(--rar-ink, #1a1712);
	margin: 0;
}

/* The oxford rule under the word, same double line as the masthead. */
.rar-subscribe__nameplate::after {
	content: "";
	display: block;
	width: 130px;
	margin: 12px auto 0;
	border-top: 3px double var(--rar-ink, #1a1712);
}

.rar-subscribe__kicker {
	font-family: "Oswald", "Arial Narrow", sans-serif;
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--rar-ink, #1a1712);
	margin: 12px 0 14px;
}

.rar-subscribe__copy,
.rar-subscribe__fallback {
	font-family: "Courier Prime", "Courier New", monospace;
	font-size: 12px;
	line-height: 1.6;
	letter-spacing: 0.04em;
	color: var(--rar-ink, #1a1712);
	max-width: 36ch;
	margin: 0 auto 18px;
}

.rar-subscribe__fallback a {
	color: inherit;
}

/* --------------------------------------------------------------------
   Jetpack's form, restyled. The selectors stay generic (element-level,
   scoped to the sheet) because Jetpack has shipped this form as a
   widget, a shortcode and a block, and the class names move; the
   elements do not.
   -------------------------------------------------------------------- */

.rar-subscribe__form form {
	margin: 0;
}

.rar-subscribe__form p {
	margin: 0 0 10px;
}

.rar-subscribe__form input[type="email"] {
	display: block;
	width: 100%;
	box-sizing: border-box;
	background: transparent;
	color: var(--rar-ink, #1a1712);
	border: 0;
	border-bottom: 1px solid var(--rar-ink, #1a1712);
	border-radius: 0;
	font-family: "Courier Prime", "Courier New", monospace;
	font-size: 14px;
	letter-spacing: 0.04em;
	text-align: center;
	padding: 8px 2px;
}

.rar-subscribe__form input[type="email"]:focus {
	outline: 2px solid var(--rar-ink, #1a1712);
	outline-offset: 2px;
}

.rar-subscribe__form button,
.rar-subscribe__form input[type="submit"],
.rar-subscribe__form .wp-block-button__link {
	display: inline-block;
	cursor: pointer;
	margin-top: 14px;
	background: var(--rar-ink, #1a1712);
	color: var(--rar-paper, #f4efe4);
	border: 0;
	border-radius: 0;
	font-family: "Oswald", "Arial Narrow", sans-serif;
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	padding: 10px 24px;
}

/* Jetpack sometimes appends a subscriber count under the button; the
   sheet asked it not to, and belt-and-braces here. */
.rar-subscribe__form .wp-block-jetpack-subscriptions__subscount {
	display: none;
}