/*
Theme Name: Rahatark Mina
Theme URI: https://rahatarkmina.ee
Author: Taavi Ilves
Author URI: https://rahatarkmina.ee
Description: Custom block theme for rahatarkmina.ee — a playful, practical investing book for young readers.
Requires at least: 6.4
Tested up to: 7.1
Requires PHP: 7.4
Version: 0.4.0.202609070747
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: rahatark-mina
Tags: block-theme, full-site-editing, one-column, custom-colors, custom-logo, wide-blocks
*/

/*
 * This stylesheet is the Figma Make app's own compiled CSS — Tailwind's preflight
 * reset plus every utility the design uses — so the rendering matches the design
 * rather than approximating it. Do not hand-edit the generated block below;
 * rebuild it from the design source with bin/sync-design.sh.
 *
 * Two deliberate changes from the build output:
 *   1. The Google Fonts @import is removed and the faces are self-hosted, split
 *      per subset with unicode-range (latin-ext is required for Estonian).
 *   2. Body defaults from the app's wrapper element are applied to body here,
 *      since WordPress renders no such wrapper.
 */

/* "Special Gothic Display" is Special Gothic (OFL, github.com/AlistairMcCready/
 * Special-Gothic) instanced at wght 650 / wdth 114 — the cut the Figma file
 * uses. The upstream family is variable in both weight and width; Google Fonts
 * publishes only three fixed points of it, and none of them is this one:
 * "Special Gothic" is wght 400 / wdth 100 (far too light) and "Special Gothic
 * Expanded One" is wdth 125 (11% too wide and 9% too heavy, measured against
 * the design). Renamed because it is not one of the published cuts. Licence in
 * assets/fonts/special-gothic-OFL.txt. */
@font-face{font-family:"Special Gothic Text";font-style:normal;font-weight:700;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;src:url('assets/fonts/special-gothic-text-latin.woff2') format('woff2');}
@font-face{font-family:"Special Gothic Text";font-style:normal;font-weight:700;font-display:swap;unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;src:url('assets/fonts/special-gothic-text-latin-ext.woff2') format('woff2');}
@font-face{font-family:"Special Gothic Display";font-style:normal;font-weight:400;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;src:url('assets/fonts/special-gothic-display-latin.woff2') format('woff2');}
@font-face{font-family:"Special Gothic Display";font-style:normal;font-weight:400;font-display:swap;unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;src:url('assets/fonts/special-gothic-display-latin-ext.woff2') format('woff2');}
@font-face{font-family:"Work Sans";font-style:normal;font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;src:url('assets/fonts/work-sans-variable-latin.woff2') format('woff2');}
@font-face{font-family:"Work Sans";font-style:normal;font-weight:100 900;font-display:swap;unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;src:url('assets/fonts/work-sans-variable-latin-ext.woff2') format('woff2');}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:400;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;src:url('assets/fonts/barlow-condensed-400-normal-latin.woff2') format('woff2');}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:400;font-display:swap;unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;src:url('assets/fonts/barlow-condensed-400-normal-latin-ext.woff2') format('woff2');}
@font-face{font-family:"Barlow Condensed";font-style:italic;font-weight:400;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;src:url('assets/fonts/barlow-condensed-400-italic-latin.woff2') format('woff2');}
@font-face{font-family:"Barlow Condensed";font-style:italic;font-weight:400;font-display:swap;unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;src:url('assets/fonts/barlow-condensed-400-italic-latin-ext.woff2') format('woff2');}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:700;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;src:url('assets/fonts/barlow-condensed-700-normal-latin.woff2') format('woff2');}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:700;font-display:swap;unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;src:url('assets/fonts/barlow-condensed-700-normal-latin-ext.woff2') format('woff2');}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:900;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;src:url('assets/fonts/barlow-condensed-900-normal-latin.woff2') format('woff2');}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:900;font-display:swap;unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;src:url('assets/fonts/barlow-condensed-900-normal-latin-ext.woff2') format('woff2');}

@layer components;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial}}}@layer theme{:root,:host{--font-sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--spacing:.25rem;--breakpoint-xl:80rem;--container-2xl:42rem;--container-3xl:48rem;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring:where(:not(iframe)){outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer utilities{.pointer-events-none{pointer-events:none}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0}.inset-y-0{inset-block:0}.-top-24{top:calc(var(--spacing) * -24)}.-top-32{top:calc(var(--spacing) * -32)}.top-0{top:0}.top-8{top:calc(var(--spacing) * 8)}.-right-24{right:calc(var(--spacing) * -24)}.-right-32{right:calc(var(--spacing) * -32)}.right-0{right:0}.right-8{right:calc(var(--spacing) * 8)}.-bottom-20{bottom:calc(var(--spacing) * -20)}.bottom-0{bottom:0}.bottom-12{bottom:calc(var(--spacing) * 12)}.-left-20{left:calc(var(--spacing) * -20)}.-left-24{left:calc(var(--spacing) * -24)}.left-0{left:0}.left-8{left:calc(var(--spacing) * 8)}.left-32{left:calc(var(--spacing) * 32)}.z-10{z-index:10}.z-50{z-index:50}.mx-auto{margin-inline:auto}.mt-2{margin-top:calc(var(--spacing) * 2)}.mt-10{margin-top:calc(var(--spacing) * 10)}.mt-12{margin-top:calc(var(--spacing) * 12)}.mb-4{margin-bottom:calc(var(--spacing) * 4)}.mb-6{margin-bottom:calc(var(--spacing) * 6)}.mb-8{margin-bottom:calc(var(--spacing) * 8)}.mb-12{margin-bottom:calc(var(--spacing) * 12)}.mb-14{margin-bottom:calc(var(--spacing) * 14)}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-block{display:inline-block}.h-2{height:calc(var(--spacing) * 2)}.h-16{height:calc(var(--spacing) * 16)}.max-w-2xl{max-width:var(--container-2xl)}.max-w-3xl{max-width:var(--container-3xl)}.max-w-screen-xl{max-width:var(--breakpoint-xl)}.flex-1{flex:1}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-row{flex-direction:row}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-1\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-4{gap:calc(var(--spacing) * 4)}.gap-6{gap:calc(var(--spacing) * 6)}.gap-8{gap:calc(var(--spacing) * 8)}.gap-10{gap:calc(var(--spacing) * 10)}.gap-12{gap:calc(var(--spacing) * 12)}.overflow-hidden{overflow:hidden}.border{border-style:var(--tw-border-style);border-width:1px}.px-5{padding-inline:calc(var(--spacing) * 5)}.py-6{padding-block:calc(var(--spacing) * 6)}.py-8{padding-block:calc(var(--spacing) * 8)}.py-10{padding-block:calc(var(--spacing) * 10)}.py-20{padding-block:calc(var(--spacing) * 20)}.text-center{text-align:center}.uppercase{text-transform:uppercase}.italic{font-style:italic}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}@media (width>=48rem){.md\:block{display:block}.md\:flex{display:flex}.md\:hidden{display:none}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-\[2fr_1fr\]{grid-template-columns:2fr 1fr}.md\:flex-col{flex-direction:column}.md\:flex-row{flex-direction:row}.md\:items-center{align-items:center}.md\:items-stretch{align-items:stretch}.md\:justify-between{justify-content:space-between}.md\:justify-center{justify-content:center}.md\:gap-8{gap:calc(var(--spacing) * 8)}.md\:px-8{padding-inline:calc(var(--spacing) * 8)}.md\:py-28{padding-block:calc(var(--spacing) * 28)}.md\:py-32{padding-block:calc(var(--spacing) * 32)}}}body{color:#26369c;background-color:#fff6db;font-family:Work Sans,sans-serif}*{box-sizing:border-box}h1,h2,h3,h4,h5,h6{font-weight:900}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#541d64}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}


/* From the app's root wrapper, which WordPress does not render. */
body {
	font-family: "Work Sans", sans-serif;
	background-color: #fff6db;
	color: #26369c;
}

/* Keep the admin bar usable: Tailwind's preflight otherwise strips its styling. */
#wpadminbar,
#wpadminbar * {
	box-sizing: content-box;
}

/* ── WordPress layout corrections ───────────────────────────────────
 * The design's sections butt straight up against each other. Two pieces of
 * WordPress chrome get in the way of that and are undone here.
 */

/*
 * WordPress gives every top-level block `margin-block-start: 24px` via
 * `:where(.is-layout-flow) > *`. Against a cream page that reads as white bands
 * between the coloured sections.
 *
 * Resetting only `.wp-site-blocks > *` is not enough: WooCommerce wraps
 * single-product content in a group of its own, so the design's bands sit a level
 * deeper there and kept the gap. Target the bands themselves — full-width
 * sections, the colour bars and the main wrapper — wherever they appear. Inner
 * post content is untouched and keeps the normal block gap.
 */
.wp-site-blocks > *,
.wp-site-blocks main,
.wp-site-blocks section.relative,
.wp-site-blocks .flex.h-2 {
	margin-block-start: 0;
	margin-block-end: 0;
}

/*
 * The nav is `position: sticky`, but WordPress wraps each template part in a
 * div, and a sticky element can only travel within its own parent's box — so
 * the wrapper pins it in place. `display: contents` removes the wrapper's box
 * without removing the element, letting the nav stick against the page again.
 */
.wp-site-blocks > .wp-block-template-part {
	display: contents;
}

/* ── Interior pages ─────────────────────────────────────────────────
 * The blog, single posts, search, 404 and the WooCommerce screens are not in
 * the Figma design, so they are built from the landing page's own vocabulary:
 * an ink banner with the display face, cream body, and flat bordered cards.
 * Written as plain CSS rather than Tailwind utilities, because the compiled
 * stylesheet only carries the utilities the design itself uses.
 */

.rm-page { background: #fff6db; color: #26369c; }

/* Keep the footer at the bottom on pages shorter than the viewport. */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.wp-site-blocks > .rm-page,
.rm-page { flex: 1 0 auto; }

/* Banner at the top of every interior page.
 *
 * Cream, not navy: the nav is already navy, so a navy banner stacked beneath it
 * read as one oversized blue block. This matches the product hero instead.
 */
.rm-banner {
	background: #fff6db;
	color: #26369c;
	padding: 72px 20px 64px;
	position: relative;
	overflow: hidden;
}

/* A quarter circle top-right, echoing the hero. */
.rm-banner::before {
	content: "";
	position: absolute;
	top: -110px; right: -110px;
	width: 300px; height: 300px;
	background: #541d64;
	border-radius: 0 0 0 100%;
	z-index: 0;
}

.rm-banner__inner { max-width: 1280px; margin-inline: auto; position: relative; z-index: 1; }

.rm-banner__eyebrow {
	font-size: 11px;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: #f85052;
	margin: 0 0 14px;
	display: flex;
	align-items: center;
	gap: 10px;
	position: relative;
	z-index: 1;
}

.rm-banner__eyebrow::before {
	content: "";
	width: 26px;
	height: 2px;
	background: currentColor;
}

.rm-banner h1,
.rm-banner .wp-block-post-title,
.rm-banner .wp-block-query-title {
	font-family: "Special Gothic Display", sans-serif;
	font-weight: 900;
	letter-spacing: 0.06em;
	line-height: 1.05;
	font-size: clamp(32px, 5vw, 56px);
	margin: 0;
	color: #26369c;
	position: relative;
	z-index: 1;
}

/* A red rule under the banner, echoing the nav. */
.rm-banner::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 4px;
	background: #f85052;
}

.rm-body {
	max-width: 1280px;
	margin-inline: auto;
	padding: 64px 20px 88px;
}

.rm-body--narrow { max-width: 760px; }

.rm-body p,
.rm-body li { font-size: 16px; line-height: 1.8; }

.rm-body h2, .rm-body h3, .rm-body h4 {
	font-family: "Special Gothic Display", sans-serif;
	font-weight: 900;
	letter-spacing: 0.06em;
	margin-top: 1.6em;
}

.rm-body a { color: #f85052; }

/* Post and product cards. */
.rm-cards .wp-block-post-template,
.rm-cards ul.wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 2px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.rm-cards .wp-block-post-template > li {
	background: #26369c;
	color: #fff6db;
	padding: 28px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.rm-cards .wp-block-post-title { margin: 0; font-size: 22px; line-height: 1.25; }
.rm-cards .wp-block-post-title a { color: #ffb513; text-decoration: none; }
.rm-cards .wp-block-post-title a:hover { text-decoration: underline; }
.rm-cards .wp-block-post-excerpt { margin: 0; font-size: 14px; line-height: 1.8; opacity: 0.68; }
.rm-cards .wp-block-post-date { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: #46cfd8; opacity: 0.8; }
.rm-cards .wp-block-post-featured-image img { display: block; width: 100%; aspect-ratio: 3/2; object-fit: cover; }

/* Pagination and search, in the design's button idiom. */
.rm-body .wp-block-query-pagination {
	margin-top: 40px;
	gap: 8px;
	font-family: "Work Sans", sans-serif;
	letter-spacing: 2px;
	text-transform: uppercase;
	font-size: 12px;
}

.rm-body .wp-block-query-pagination a,
.rm-body .wp-block-query-pagination .page-numbers {
	color: #26369c;
	text-decoration: none;
	padding: 8px 12px;
	border: 2px solid #46cfd8;
}

.rm-body .wp-block-query-pagination .current { background: #f85052; color: #fff6db; border-color: #f85052; }

.rm-body .wp-block-search__button,
.rm-body .wp-element-button {
	background: #f85052;
	color: #fff6db;
	border: 0;
	border-radius: 0;
	font-family: "Work Sans", sans-serif;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 3px;
	text-transform: uppercase;
	padding: 14px 28px;
	cursor: pointer;
}

.rm-body .wp-block-search__input {
	border: 2px solid #26369c;
	border-radius: 0;
	padding: 12px 14px;
	background: #fff;
	color: #26369c;
}

/* ── WooCommerce ────────────────────────────────────────────────── */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.wc-block-components-button,
.wp-block-woocommerce-cart .wc-block-cart__submit-button {
	background-color: #f85052;
	color: #fff6db;
	border-radius: 0;
	font-family: "Work Sans", sans-serif;
	font-weight: 700;
	letter-spacing: 3px;
	text-transform: uppercase;
	padding: 15px 32px;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.wc-block-components-button:hover { background-color: #26369c; color: #fff6db; }

.woocommerce ul.products li.product,
.wc-block-grid__product,
.wc-block-product-template__responsive .wc-block-product {
	background: #fff;
	border: 3px solid #26369c;
	padding: 20px;
}

.woocommerce span.onsale {
	background-color: #ffb513;
	color: #26369c;
	border-radius: 0;
	font-family: "Work Sans", sans-serif;
	letter-spacing: 2px;
	text-transform: uppercase;
}

.woocommerce .price,
.wc-block-components-product-price {
	font-family: "Special Gothic Display", sans-serif;
	font-weight: 900;
	color: #26369c;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-top-color: #f85052;
	background: #fff;
}

/* ── Product page ───────────────────────────────────────────────────
 * Built to sit beside the landing page rather than look like a stock
 * WooCommerce screen: a cream hero with the cover, then the description on
 * the navy ground the design uses for its content bands.
 */

.rm-product { background: #fff6db; color: #26369c; position: relative; overflow: hidden; }

.rm-product__inner {
	max-width: 1200px;
	margin-inline: auto;
	padding: 72px 20px 80px;
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: 56px;
	align-items: center;
	position: relative;
	z-index: 1;
}

@media (max-width: 860px) {
	.rm-product__inner { grid-template-columns: 1fr; gap: 36px; padding-top: 48px; }
}

/* Decoration, echoing the hero. */
.rm-product::before {
	content: "";
	position: absolute;
	top: -120px; right: -120px;
	width: 340px; height: 340px;
	background: #541d64;
	border-radius: 0 0 0 100%;
	z-index: 0;
}

.rm-product::after {
	content: "";
	position: absolute;
	left: -40px; bottom: 60px;
	width: 0; height: 0;
	border-left: 90px solid transparent;
	border-bottom: 130px solid #ffb513;
	z-index: 0;
}

.rm-product__media img { display: block; width: 100%; height: auto; }

/* Fallback cover when the product has no image, drawn like the hero's. */
.rm-product__placeholder {
	position: relative;
	aspect-ratio: 3 / 4;
	max-width: 360px;
	background: #f85052;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 22px;
}

.rm-product__placeholder::before {
	content: "";
	position: absolute;
	top: 16%; left: 12%;
	width: 38%; aspect-ratio: 1;
	background: #ffb513;
}

.rm-product__placeholder::after {
	content: "";
	position: absolute;
	top: 30%; right: 14%;
	width: 30%; aspect-ratio: 1;
	background: #46cfd8;
	border-radius: 50%;
}

.rm-product__placeholder span {
	position: relative;
	font-family: "Work Sans", sans-serif;
	font-weight: 900;
	font-size: 1.7rem;
	line-height: 1.05;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #fff6db;
}

.rm-product__eyebrow {
	font-size: 11px;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: #f85052;
	margin: 0 0 14px;
	display: flex;
	align-items: center;
	gap: 10px;
}

.rm-product__eyebrow::before { content: ""; width: 26px; height: 2px; background: currentColor; }

.rm-product .wp-block-post-title {
	font-family: "Special Gothic Display", sans-serif;
	font-weight: 900;
	letter-spacing: 0.04em;
	line-height: 1.05;
	font-size: clamp(30px, 4vw, 48px);
	margin: 0 0 18px;
	color: #26369c;
}

.rm-product .wc-block-components-product-price,
.rm-product .price {
	font-family: "Special Gothic Display", sans-serif;
	font-weight: 900;
	font-size: 34px;
	color: #26369c;
	display: block;
	margin-bottom: 8px;
}

.rm-product del, .rm-product del .amount { opacity: 0.45; font-size: 0.6em; margin-right: 10px; }
.rm-product ins { text-decoration: none; }

.rm-product .wp-block-post-excerpt {
	font-family: "Work Sans", sans-serif;
	font-size: 16px;
	line-height: 1.75;
	margin: 18px 0 26px;
	max-width: 46ch;
}

/* Add-to-cart, in the design's button idiom. */
.rm-product form.cart { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

.rm-product .quantity { display: inline-flex; }

/* WooCommerce forces content-box on the quantity field, which made it 4px taller
   than the button beside it; a more specific selector wins it back. */
.rm-product form.cart .quantity input.qty,
.rm-product .quantity input,
.rm-product input.qty {
	border: 2px solid #26369c;
	box-sizing: border-box;
	background: transparent;
	color: #26369c;
	height: 52px;
	width: 72px;
	padding: 0 0 0 12px;
	font-family: "Work Sans", sans-serif;
	font-weight: 700;
	font-size: 17px;
	line-height: 52px;
	text-align: center;
	border-radius: 0;
	appearance: textfield;
	-moz-appearance: textfield;
}

/* The spinner arrows sit awkwardly against a square 2px border; the field is
   small enough to type into, and the cart page has its own quantity control. */
.rm-product input.qty::-webkit-outer-spin-button,
.rm-product input.qty::-webkit-inner-spin-button {
	appearance: none;
	margin: 0;
}

.rm-product .quantity input:focus-visible { outline: 3px solid #f85052; outline-offset: 2px; }

/* Match the button height to the field so the row aligns. */
.rm-product button.button,
.rm-product .single_add_to_cart_button { height: 52px; padding: 0 34px; }

.rm-product button.button,
.rm-product .single_add_to_cart_button {
	background: #f85052;
	color: #fff6db;
	border: 0;
	border-radius: 0;
	font-family: "Work Sans", sans-serif;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 3px;
	text-transform: uppercase;
	padding: 15px 34px;
	cursor: pointer;
}

.rm-product button.button:hover { background: #26369c; }

.rm-product .product_meta {
	margin-top: 26px;
	font-size: 12px;
	letter-spacing: 1px;
	text-transform: uppercase;
	opacity: 0.55;
}

/* Description band, on the navy ground. */
.rm-product-details {
	background: #fff6db;
	position: relative;
	overflow: hidden;
}

/* Long-form copy sits in a navy card on cream — the same treatment the landing
   page gives the author biographies, and easier to read than a full-bleed
   colour band. */
.rm-product-details__inner {
	background: #26369c;
	color: #fff6db;
}

.rm-product-details__inner {
	max-width: 900px;
	margin: 72px auto;
	padding: 56px clamp(24px, 5vw, 64px) 64px;
	position: relative;
	z-index: 1;
}

@media (max-width: 940px) {
	.rm-product-details__inner { margin: 40px 20px; }
}

.rm-product-details h2, .rm-product-details h3 {
	font-family: "Special Gothic Display", sans-serif;
	font-weight: 900;
	letter-spacing: 0.06em;
	color: #ffb513;
	margin-top: 1.8em;
}

.rm-product-details h2:first-child, .rm-product-details h3:first-child { margin-top: 0; }
.rm-product-details p, .rm-product-details li { font-family: "Work Sans", sans-serif; font-size: 16px; line-height: 1.85; }
.rm-product-details ul { padding-left: 1.2em; list-style: disc; }
.rm-product-details ol { padding-left: 1.2em; list-style: decimal; }
.rm-product-details li::marker { color: #46cfd8; }
.rm-product-details li { margin-bottom: .5em; }
.rm-product-details .lead { font-size: 19px; }
.rm-product-details strong { color: #fff6db; }

/* WooCommerce's grey placeholder is jarring next to the design. Until the book
   has a cover image, draw a flat cover in the design's language instead.
   The !important is needed: Woo's own `.woocommerce div.product div.images img`
   is more specific than anything scoped to this section. */
.rm-product .woocommerce-product-gallery__image--placeholder {
	position: relative;
	aspect-ratio: 3 / 4;
	background: #f85052;
	overflow: hidden;
}

.rm-product .woocommerce-product-gallery__image--placeholder img {
	display: none !important;
}

.rm-product .woocommerce-product-gallery__image--placeholder::before {
	content: "";
	position: absolute;
	top: 18%; left: 14%;
	width: 36%; aspect-ratio: 1;
	background: #ffb513;
}

.rm-product .woocommerce-product-gallery__image--placeholder::after {
	content: "";
	position: absolute;
	top: 34%; right: 16%;
	width: 28%; aspect-ratio: 1;
	background: #46cfd8;
	border-radius: 50%;
}

/* The sale flash, in the design's idiom. */
.rm-product span.onsale {
	background: #ffb513;
	color: #26369c;
	border-radius: 0;
	font-family: "Work Sans", sans-serif;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	padding: 6px 14px;
	min-height: 0;
	line-height: 1.4;
}

/* ── Cart indicator in the nav ──────────────────────────────────────
 * Nothing linked to the cart, so a filled cart was invisible. The mini cart
 * block gives a count and a drawer; it just needs to look like the nav.
 */
/* Order button, cart and the mobile menu toggle sit together at the end of the
   nav, as one flex item, so the nav's own justify-between still balances
   wordmark | links | actions. */
/* The bar is two flex items, not three: the wordmark, and everything else as
   one group. With three, `justify-between` spread the links to the middle and
   opened a gap before the order button; the design has no such gap — the button
   sits one 32px step after "Kontakt", exactly like the links do between
   themselves. The cart sits between them, at the same rhythm.

   The breakpoint is 1024px rather than the design's 768px, and is ours rather
   than Tailwind's: the design had no cart in this row, and at 768 the wordmark,
   four links, the cart and the button overflow the bar. */
.rm-nav-actions { display: flex; align-items: center; gap: 14px; }

.rm-nav-links { display: none; }

@media (min-width: 1024px) {
	.rm-nav-actions { gap: 32px; }
	.rm-nav-links { display: flex; align-items: center; gap: 32px; }
}

.wp-site-blocks nav .wc-block-mini-cart { display: flex; align-items: center; }

.wp-site-blocks nav .wc-block-mini-cart__button {
	color: #fff6db;
	background: transparent;
	border: 0;
	padding: 6px 8px;
	display: flex;
	align-items: center;
	gap: 7px;
	cursor: pointer;
	font-family: "Work Sans", sans-serif;
	font-size: 12px;
	letter-spacing: 2px;
}

.wp-site-blocks nav .wc-block-mini-cart__button:hover { opacity: .8; }
.wp-site-blocks nav .wc-block-mini-cart__icon { width: 22px; height: 22px; fill: currentColor; }

/* ── Withdrawal form ────────────────────────────────────────────────
 * A statutory notice, so it is plain and unfussy: navy labels on cream, the
 * same red action button the rest of the site uses.
 */

.rm-withdrawal { max-width: 560px; }

.rm-withdrawal__form { display: flex; flex-direction: column; gap: 18px; }

.rm-withdrawal__lead { margin: 0; opacity: .75; }

.rm-field { display: flex; flex-direction: column; gap: 6px; }

.rm-field > span {
	font-family: "Work Sans", sans-serif;
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--rm-ink);
}

.rm-field input,
.rm-field textarea {
	font-family: inherit;
	font-size: 16px;
	color: var(--rm-ink);
	background: #fff;
	border: 2px solid rgba(38, 54, 156, .3);
	border-radius: 0;
	padding: 11px 14px;
	width: 100%;
}

.rm-field input:focus,
.rm-field textarea:focus {
	outline: none;
	border-color: var(--rm-ink);
}

.rm-withdrawal__accept {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--rm-ink);
}

.rm-withdrawal__accept input { margin-top: 4px; flex-shrink: 0; }

.rm-withdrawal__submit {
	align-self: flex-start;
	background: var(--rm-red);
	color: var(--rm-cream);
	border: 0;
	border-radius: 0;
	cursor: pointer;
	font-family: "Work Sans", sans-serif;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 3px;
	text-transform: uppercase;
	padding: 15px 32px;
}

.rm-withdrawal__submit:hover { background: var(--rm-ink); }

.rm-withdrawal__note { margin: 0; font-size: 14px; opacity: .6; }

.rm-withdrawal__error {
	background: var(--rm-red);
	color: var(--rm-cream);
	padding: 12px 16px;
	margin: 0 0 18px;
}

.rm-withdrawal__done {
	border: 3px solid var(--rm-ink);
	padding: 26px 28px;
}

.rm-withdrawal__done h3 {
	font-family: "Work Sans", sans-serif;
	font-weight: 900;
	font-size: 26px;
	text-transform: uppercase;
	color: var(--rm-ink);
	margin: 0 0 8px;
}

.rm-withdrawal__done p { margin: 0; }

/* Off-screen rather than display:none, which some bots skip. */
.rm-withdrawal__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ── Footer ─────────────────────────────────────────────────────────
 * The row is three flex items under `justify-between`, so the colour swatches
 * landed in the middle of whatever space the wordmark and the links left over
 * — which is not the middle of the page, because those two are different
 * widths. A three-column grid with equal outer tracks centres them against the
 * page itself, which is what the layout shows. Same fault as the nav bar had.
 */
/* However many links the footer ends up carrying, they wrap rather than push
   the page sideways. */
.rm-footer-legal { flex-wrap: wrap; }

@media (min-width: 768px) {
	/* Repeated for specificity: Tailwind's own `.flex` sets display on this
	   same element, at the same weight and later in the file. */
	.rm-footer-row.rm-footer-row {
		display: grid;
		/* minmax(0, 1fr) rather than 1fr so the outer tracks may shrink below
		   their content and wrap. With plain 1fr the copyright line held its
		   track open and pushed the swatches off centre — the very thing this
		   is here to fix. */
		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
		align-items: center;
	}

	.rm-footer-swatches { justify-self: center; }
	.rm-footer-legal { justify-content: flex-end; justify-self: end; }
}

/* ── Hero ───────────────────────────────────────────────────────────
 * The design sets the wordmark on one line, all navy, with a red square
 * between the two words — not the split RAHA/TARK/MINA the prototype used.
 * One line means the size has to follow the column rather than the viewport,
 * so it is clamped to what the narrower half of the two-column grid can hold.
 */
.rm-hero-title {
	font-size: clamp(30px, 6.4vw, 62px);
	display: flex;
	align-items: center;
	gap: .28em;
}

.rm-hero-dot {
	display: inline-block;
	width: .17em;
	height: .17em;
	background-color: rgb(248, 80, 82);
	flex-shrink: 0;
}

/* The two-column grid starts at md, so between there and lg each half is at
   its narrowest while the viewport is still wide — the one place a vw-based
   size overshoots. */
@media (min-width: 768px) and (max-width: 1100px) {
	.rm-hero-title { font-size: clamp(30px, 4.4vw, 52px); }
}

/* Plain two-tone block with an offset shadow, as the layout has it: no
   lettering, no shapes. */
.rm-hero-cover {
	position: relative;
	width: 260px;
	height: 380px;
}

@media (min-width: 768px) {
	.rm-hero-cover { width: 300px; height: 430px; }
}

/* ── The bar on narrow screens ──────────────────────────────────────
 * The design shows only the wordmark, the cart and the hamburger below the
 * md breakpoint, and moves the order button into the panel where it runs
 * full width. The captured markup kept that button in the bar at every size,
 * which crowded the wordmark onto two lines on a phone.
 */

/* Size and tracking live here rather than inline, so the narrow-screen rule
   below can reach them. */
.rm-wordmark {
	white-space: nowrap;
	font-size: 18px;
	letter-spacing: 3px;
}

.rm-wordmark:hover { color: rgb(255, 246, 219); }

.rm-nav-order { display: inline-block; }

.rm-nav-toggle {
	display: none;
	background: none;
	border: 0;
	color: rgb(255, 246, 219);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	padding: 4px;
}

.rm-mobile-menu { display: none; }

@media (max-width: 1023px) {
	.rm-nav-order { display: none; }
	.rm-nav-toggle { display: block; }

	.rm-mobile-menu.is-open {
		display: flex;
		flex-direction: column;
		gap: 16px;
		padding: 24px 20px;
		background-color: var(--rm-purple);
	}

	.rm-mobile-menu a {
		color: var(--rm-cream);
		text-decoration: none;
		font-weight: 600;
		letter-spacing: 3px;
		text-transform: uppercase;
		font-size: 14px;
	}

	.rm-mobile-menu__order {
		background-color: var(--rm-red);
		font-family: "Work Sans", sans-serif;
		font-weight: 700;
		font-size: 12px;
		text-align: center;
		padding: 13px 20px;
	}
}

/* The wordmark is the one thing that cannot be dropped, so it gives up a
   little tracking rather than wrap on the narrowest phones. */
@media (max-width: 380px) {
	.rm-wordmark { font-size: 16px; letter-spacing: 2px; }
}

/* The count badge, in the design's accent. */
.wp-site-blocks nav .wc-block-mini-cart__badge {
	background: #f85052;
	color: #fff6db;
	border: 0;
	border-radius: 999px;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	font-family: "Work Sans", sans-serif;
	font-size: 11px;
	line-height: 20px;
	text-align: center;
}

.wp-site-blocks nav .wc-block-mini-cart__quantity-badge { position: relative; display: flex; align-items: center; }

/* ── WooCommerce blocks ─────────────────────────────────────────────
 * The cart drawer, cart page and checkout are WooCommerce block components.
 * They share the same `wc-block-components-*` classes, so one set of rules
 * dresses all three in the design's language: cream ground, navy ink, the
 * display face for anything that reads as a heading, square corners throughout.
 */

:root {
	--rm-cream: #fff6db;
	--rm-ink: #26369c;
	--rm-red: #f85052;
	--rm-yellow: #ffb513;
	--rm-teal: #46cfd8;
	--rm-purple: #541d64;
}

/* Notices ---------------------------------------------------------- */

.wc-block-components-notice-banner {
	max-width: 460px;
	margin: 0 0 8px;
	background: var(--rm-ink) !important;
	color: var(--rm-cream) !important;
	border: 0 !important;
	border-left: 6px solid var(--rm-yellow) !important;
	border-radius: 0;
	padding: 16px 22px;
	font-family: "Work Sans", sans-serif;
	font-size: 15px;
	line-height: 1.5;
	align-items: center;
	gap: 14px;
}

.wc-block-components-notice-banner.is-error { border-left-color: var(--rm-red) !important; }
.wc-block-components-notice-banner.is-info  { border-left-color: var(--rm-teal) !important; }

.wc-block-components-notice-banner__content,
.wc-block-components-notice-banner > .wc-block-components-notice-banner__content {
	color: var(--rm-cream);
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
	width: 100%;
}

/* Woo's tick sits in a pale circle that vanishes on navy. */
.wc-block-components-notice-banner > svg {
	background: var(--rm-yellow);
	fill: var(--rm-ink);
	border-radius: 50%;
	padding: 3px;
	flex: none;
}

.wc-block-components-notice-banner.is-error > svg { background: var(--rm-red); fill: var(--rm-cream); }

/* WooCommerce sets this link to #2f2f2f with !important, via a selector carrying
   the banner and its __content child — so matching it takes both the same
   specificity and !important of our own, not merely !important. */
.wc-block-components-notice-banner > .wc-block-components-notice-banner__content a,
.wc-block-components-notice-banner > .wc-block-components-notice-banner__content a.button,
.wc-block-components-notice-banner > .wc-block-components-notice-banner__content a.wp-element-button,
.wc-block-components-notice-banner > .wc-block-components-notice-banner__content .wc-forward {
	color: var(--rm-cream) !important;
	margin-left: auto;
	background: var(--rm-red);
	color: var(--rm-cream);
	border: 0;
	border-radius: 0;
	padding: 11px 22px;
	font-family: "Work Sans", sans-serif;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 2px;
	text-transform: uppercase;
	text-decoration: none;
}

/* Drawer ----------------------------------------------------------- */

.wc-block-components-drawer__content {
	background: var(--rm-cream);
	color: var(--rm-ink);
	border-radius: 0;
}

h2.wc-block-mini-cart__title,
.wc-block-mini-cart__title,
.wc-block-mini-cart__title h2 {
	font-family: "Special Gothic Display", sans-serif;
	font-weight: 900;
	letter-spacing: 0.03em;
	font-size: 30px;
	line-height: 1.15;
	color: var(--rm-ink);
	opacity: 1;
	margin: 0;
	/* The item rows and the footer below are inset 16px by WooCommerce; the
	   title was flush to the drawer edge and read as detached from them. The
	   right inset also keeps a long title clear of the close button. */
	padding-inline: 16px 56px;
}

/* The "(items: 2)" count duplicates the badge in the nav and forced an awkward
   two-line wrap; the item rows below already say how many there are. */
.wc-block-mini-cart__title .wp-block-woocommerce-mini-cart-title-items-counter-block {
	display: none !important;
}

/* The close button is a .wc-block-components-button, so our red/navy button
   styling claimed it: on hover it took the navy fill and, because WooCommerce
   sets its colour to `inherit`, the X went navy on navy and vanished. */
.wc-block-components-drawer__close,
.wc-block-components-button.wc-block-components-drawer__close:hover,
.wc-block-components-button.wc-block-components-drawer__close:focus {
	color: var(--rm-ink) !important;
	background: transparent !important;
	border: 0;
}

.wc-block-components-button.wc-block-components-drawer__close:hover {
	opacity: .65;
}

.wc-block-components-drawer__close svg { fill: currentColor; }

/* Cart items, shared by the drawer and the cart page ---------------- */

.wc-block-cart-items__header {
	font-family: "Work Sans", sans-serif;
	font-size: 11px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--rm-ink);
	opacity: .6;
	border-bottom: 2px solid var(--rm-ink);
}

.wc-block-cart-items__row { border-bottom: 1px solid rgba(38, 54, 156, .18); }

.wc-block-components-product-name {
	font-family: "Work Sans", sans-serif;
	font-weight: 700;
	font-size: 17px;
	line-height: 1.3;
	color: var(--rm-ink);
	text-decoration: none;
}

.wc-block-components-product-name:hover { color: var(--rm-red); }

/* WooCommerce re-states the name inside the cart table and the checkout summary
   at `font-weight: 500` and its `small` preset — which this theme sets to 12px —
   so the title read thinner and smaller than everything around it. Matching
   their selector shape wins it back for the drawer, the cart and the checkout
   alike. */
table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name,
.wc-block-components-order-summary-item .wc-block-components-product-name,
.wc-block-components-order-summary-item__description .wc-block-components-product-name {
	font-family: "Work Sans", sans-serif;
	font-weight: 700;
	font-size: 16px;
	line-height: 1.3;
	color: var(--rm-ink);
}

.wc-block-components-product-price__value,
.wc-block-components-product-price {
	font-family: "Special Gothic Display", sans-serif;
	font-weight: 700;
	color: var(--rm-ink);
}

.wc-block-components-product-price__regular { opacity: .45; }

.wc-block-components-product-metadata,
.wc-block-components-product-metadata__description { font-family: "Work Sans", sans-serif; font-size: 14px; line-height: 1.6; }

/* Woo's "save" badge is a grey chip; make it the design's accent. */
.wc-block-components-sale-badge,
.wc-block-components-product-badge {
	background: var(--rm-yellow);
	color: var(--rm-ink);
	border: 0;
	border-radius: 0;
	font-family: "Work Sans", sans-serif;
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	padding: 4px 10px;
}

/* Quantity stepper -------------------------------------------------- */

.wc-block-components-quantity-selector {
	border: 2px solid var(--rm-ink);
	border-radius: 0;
	background: transparent;
}

.wc-block-components-quantity-selector::after { display: none; }

.wc-block-components-quantity-selector__input,
.wc-block-components-quantity-selector__button {
	color: var(--rm-ink);
	background: transparent;
	border: 0;
	font-family: "Work Sans", sans-serif;
	font-weight: 700;
}

.wc-block-components-quantity-selector__button:hover { color: var(--rm-red); }

/* Totals and buttons ------------------------------------------------ */

.wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
	font-family: "Special Gothic Display", sans-serif;
	font-weight: 900;
	letter-spacing: .04em;
	color: var(--rm-ink);
}

.wc-block-components-totals-item__value { font-family: "Special Gothic Display", sans-serif; font-weight: 900; color: var(--rm-ink); }
.wc-block-components-totals-item__description { font-family: "Work Sans", sans-serif; font-size: 13px; opacity: .7; }

.wc-block-components-button,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
	background: var(--rm-red) !important;
	color: var(--rm-cream) !important;
	border: 0 !important;
	border-radius: 0 !important;
	font-family: "Work Sans", sans-serif;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 3px;
	text-transform: uppercase;
	padding: 16px 30px;
	min-height: 0;
}

.wc-block-components-button:hover { background: var(--rm-ink) !important; }

/* The secondary "view cart" button reads as an outline, not a second primary. */
.wc-block-mini-cart__footer-actions .wc-block-components-button:first-child,
.wc-block-components-button.outlined {
	background: transparent !important;
	color: var(--rm-ink) !important;
	border: 2px solid var(--rm-ink) !important;
}

.wc-block-mini-cart__footer-actions .wc-block-components-button:first-child:hover {
	background: var(--rm-ink) !important;
	color: var(--rm-cream) !important;
}

/* Cart and checkout pages ------------------------------------------- */

.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout { color: var(--rm-ink); }

.wc-block-cart__totals-title,
.wc-block-components-title,
.wp-block-woocommerce-checkout .wc-block-components-checkout-step__title {
	font-family: "Special Gothic Display", sans-serif;
	font-weight: 900;
	letter-spacing: .04em;
	color: var(--rm-ink);
	text-transform: none;
}

.wc-block-components-checkout-step__description { font-family: "Work Sans", sans-serif; }

.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-block-components-select__select {
	border: 2px solid var(--rm-ink);
	border-radius: 0;
	background: #fff;
	color: var(--rm-ink);
	font-family: "Work Sans", sans-serif;
}

.wc-block-components-text-input label,
.wc-block-components-checkout-step__heading-content { font-family: "Work Sans", sans-serif; }

.wc-block-components-panel,
.wc-block-components-radio-control__option,
.wc-block-components-order-summary { border-radius: 0; }

.wc-block-components-sidebar .wc-block-components-totals-wrapper,
.wc-block-cart__sidebar .wc-block-components-totals-wrapper {
	background: transparent;
	border-color: rgba(38, 54, 156, .2);
}

/* Woo's empty-cart headline uses its own type; bring it into the design. */
.wp-block-woocommerce-empty-cart-block h2 {
	font-family: "Special Gothic Display", sans-serif;
	font-weight: 900;
	letter-spacing: .04em;
	color: var(--rm-ink);
}

/* Notices float clear of the sticky nav rather than butting against it, and
 * retire on their own so a confirmation does not sit over the page for good.
 *
 * The fade is driven from `.rm-notices`, which is ours alone — animating the
 * banner instead would lose to WooCommerce's own `!important` declarations, and
 * a timer in JavaScript is a moving part this does not need.
 */
.rm-notices {
	position: fixed;
	top: 84px;
	right: 20px;
	z-index: 60;
	width: min(460px, calc(100vw - 40px));
	animation: rm-notice-retire 6.5s ease forwards;
}

.rm-notices .wc-block-components-notice-banner {
	box-shadow: 0 10px 28px rgba(38, 54, 156, .22);
}

/* Reading it holds it open. Deliberately hover only: WooCommerce moves focus
 * into the banner as it mounts, so `:focus-within` matched from the first frame
 * and froze the fade permanently. */
.rm-notices:hover { animation-play-state: paused; }

@keyframes rm-notice-retire {
	0%, 88% { opacity: 1; transform: none; }
	100%    { opacity: 0; transform: translateY(-10px); visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
	/* Still retires, without the movement. */
	@keyframes rm-notice-retire {
		0%, 99% { opacity: 1; }
		100%    { opacity: 0; visibility: hidden; }
	}
}

/* Cart, drawer and checkout thumbnails fall back to WooCommerce's grey square
 * until a cover is uploaded. They wear the book's flat cover instead: the
 * placeholder raster is pushed outside its own content box (so the element
 * keeps its size and the surrounding stacking order is untouched) and the
 * cover is painted as the element's background. A real cover image has a
 * different src and is left alone.
 */
.rm-body img[src*="woocommerce-placeholder"],
.wc-block-components-drawer img[src*="woocommerce-placeholder"] {
	object-fit: cover;
	object-position: -9999px 0;
	background: linear-gradient(
		to bottom,
		var(--rm-purple) 0 40%,
		var(--rm-ink) 40% 100%
	);
}

/* ── Shop and product archives ──────────────────────────────────────
 * Products sat loose on the cream ground with a red title and Woo's grey image
 * placeholder. They become cards in the design's idiom.
 */

.rm-body .wc-block-product-template {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
	gap: 2px;
	list-style: none;
	margin: 32px 0 0;
	padding: 0;
}

.rm-body .wc-block-product-template .wc-block-product {
	background: var(--rm-cream);
	border: 3px solid var(--rm-ink);
	padding: 0 0 24px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* WooCommerce widths its cards for a flex container (`width: 33.333%`). We lay
 * them out on a grid, so that percentage resolves against the track the card
 * already fills and shrinks it to a third of itself. The repeated class beats
 * their own doubled selector. */
.rm-body ul.wc-block-product-template.is-flex-container.is-flex-container > li.wc-block-product {
	width: auto;
	max-width: none;
}

/* The sale badge is a flow sibling of the cover, not a child of it, so it needs
 * the card's own positioning context or it opens a white band above the image. */
.rm-body .wc-block-product .wc-block-components-product-image {
	position: relative;
}

.rm-body .wc-block-product .wc-block-components-product-sale-badge {
	position: absolute;
	z-index: 2;
}

.rm-body .wc-block-product > * { padding-inline: 22px; }
.rm-body .wc-block-product .wc-block-components-product-image { padding: 0; margin: 0; }

.rm-body .wc-block-components-product-image img { display: block; width: 100%; }

/* Same flat cover as the product page while there is no cover image. Woo's grey
 * placeholder is a flow sibling of the inner container, so it has to be removed
 * from layout, not merely hidden, or it opens a tall empty band above the card.
 * The whole treatment is scoped to the placeholder case, so a real cover image
 * takes over untouched the moment one is uploaded. */
.rm-body .wc-block-components-product-image .woocommerce-placeholder {
	display: none;
}

.rm-body .wc-block-components-product-image:has(.woocommerce-placeholder) .wc-block-components-product-image__inner-container {
	position: relative;
	background: linear-gradient(
		to bottom,
		var(--rm-purple) 0 40%,
		var(--rm-ink) 40% 100%
	);
	aspect-ratio: 3 / 4;
	overflow: hidden;
	display: block;
}

.rm-body .wc-block-components-product-sale-badge {
	background: var(--rm-yellow);
	color: var(--rm-ink);
	border: 0;
	border-radius: 0;
	font-family: "Work Sans", sans-serif;
	font-weight: 700;
	font-size: 11px;
	letter-spacing: .16em;
	text-transform: uppercase;
	padding: 5px 12px;
	top: 14px;
	right: 14px;
}

/* Titles read as headings, not links. */
.rm-body .wc-block-product .wp-block-post-title,
.rm-body .wc-block-product .wp-block-post-title a {
	font-family: "Work Sans", sans-serif;
	font-weight: 900;
	font-size: 20px;
	line-height: 1.25;
	letter-spacing: .02em;
	color: var(--rm-ink);
	text-decoration: none;
	margin: 0;
}

.rm-body .wc-block-product .wp-block-post-title a:hover { color: var(--rm-red); }

.rm-body .wc-block-product .wc-block-components-product-price {
	font-family: "Work Sans", sans-serif;
	font-weight: 900;
	font-size: 22px;
	color: var(--rm-ink);
}

.rm-body .wc-block-product .wc-block-components-product-button { padding-top: 4px; }

.rm-body .wc-block-product .wp-block-button__link,
.rm-body .wc-block-product .wc-block-components-product-button__button {
	background: var(--rm-red);
	color: var(--rm-cream);
	border: 0;
	border-radius: 0;
	font-family: "Work Sans", sans-serif;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 2px;
	text-transform: uppercase;
	padding: 13px 24px;
	width: 100%;
}

/* Result count and sorting, above the grid. */
.rm-body .wc-block-product-results-count,
.rm-body .woocommerce-result-count {
	font-family: "Work Sans", sans-serif;
	font-size: 14px;
	color: var(--rm-ink);
	opacity: .7;
	margin: 0;
}

.rm-body .wc-block-catalog-sorting select,
.rm-body .woocommerce-ordering select {
	border: 2px solid var(--rm-ink);
	border-radius: 0;
	background: transparent;
	color: var(--rm-ink);
	font-family: "Work Sans", sans-serif;
	padding: 9px 12px;
}

/* ── Section decoration ─────────────────────────────────────────────
 * The Figma file dresses four sections with the brand's Bauhaus pattern. The
 * capture only carried the Make app's stand-in shapes — a handful of circles
 * and stripes — so these were rebuilt from the design PDF itself.
 *
 * About and reader quotes take the pattern as a translucent wash, so the
 * section keeps its own background colour underneath and the same artwork can
 * be re-toned by changing that colour alone. Exercises and the endorsement
 * band are opaque, because they are drawn shapes rather than a wash and they
 * sit flush against the section's edge.
 *
 * Sized with `100% auto` rather than `cover`: the artwork's left and right
 * halves carry different motifs, and cover would crop one of them away on a
 * wide screen. Overflow at the bottom is fine — that edge is empty ground. */
.rm-decor {
	position: absolute;
	right: 0;
	left: 0;
	/* Overhangs the section so the scroll drift below never uncovers a strip of
	 * flat colour at either seam. The section's own overflow hides the rest. */
	top: -60px;
	bottom: -60px;
	pointer-events: none;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% auto;
}

.rm-decor--about {
	background-image: url("assets/images/about-decor.webp");
}

/* Two bands rather than one image: the design's own card block covered the
 * middle of this section, so there is no artwork there to recover — and none is
 * needed, since the cards cover it here too. Anchoring the bands to the edges
 * keeps them where the design drew them however tall the section grows. */
.rm-decor--readers {
	background-image:
		url("assets/images/readers-top.webp"),
		url("assets/images/readers-bottom.webp");
	/* Offset by the overhang above, so the bands still meet the section's edges. */
	background-position: center 60px, center calc(100% - 60px);
	background-size: 100% auto, 100% auto;
}

/* Anchored to the corner it was drawn in, and full-bleed to the right. */
.rm-decor--exercises {
	background-image: url("assets/images/exercises-top.webp");
	background-position: right 60px;
	background-size: auto 96px;
}

@media (min-width: 768px) {
	.rm-decor--exercises {
		background-size: auto 180px;
	}
}

/* ── The endorsement band ───────────────────────────────────────────
 * Two fixed clusters pinned to the ends, and the rule between them tiled from
 * a slice of the same artwork rather than drawn as a gradient. That matters:
 * a gradient positioned by percentage rounds independently of the images, so
 * it landed a pixel or two off them and left a visible notch at each join.
 * Tiling the slice at the same `auto 100%` scale makes the rule's position a
 * property of the artwork, so it cannot drift at any viewport width — and the
 * clusters, painted over it, hide its ends. */
.rm-band {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 110px;
	pointer-events: none;
	background-image:
		url("assets/images/band-left.webp"),
		url("assets/images/band-right.webp"),
		url("assets/images/band-rule.webp");
	background-position: left bottom, right bottom, left bottom;
	background-size: auto 100%, auto 100%, 4px 100%;
	background-repeat: no-repeat, no-repeat, repeat-x;
}

/* Keep the carousel controls clear of it. */
.rm-testimonials-body {
	padding-bottom: 130px;
}

@media (min-width: 768px) {
	.rm-band {
		height: 180px;
	}

	.rm-testimonials-body {
		padding-bottom: 200px;
	}
}

/* The wordmark's separator is a square in the design, not the middot the
 * capture typed. Sized in em so it tracks the mark at every size it is set at,
 * and matching the hero lockup, which already carries the square. */
.rm-wordmark-dot {
	display: inline-block;
	width: .25em;
	height: .25em;
	margin: 0 .36em;
	background-color: rgb(248, 80, 82);
	vertical-align: .28em;
}

/* The hero's quarter circle butts against the nav's red rule. At fractional
 * device pixel ratios the two round to different rows and a hairline of the
 * cream page shows between them, so it starts a pixel high — the section's own
 * overflow clips the difference, and the seam cannot open. */
.rm-hero-corner {
	top: -1px;
}

/* The four dots the design floats above the book section. Positioned here
 * rather than inline so the mobile rules below can move and shrink them. */
.rm-book-dots {
	top: 56px;
	right: 64px;
}

.rm-book-dots > span {
	width: 44px;
	height: 44px;
}

/* The quote wall stays two columns down to the design's 414px artboard, where
 * it fits. Narrower than that, Estonian compounds — "pusletükkidest",
 * "netopalga" — are longer than the column, so they are allowed to break rather
 * than run out of the card. */
.rm-quote {
	overflow-wrap: break-word;
}

/* Shown only on the mobile artboard; see the media query below. */
.rm-hero-cover__band {
	display: none;
}

/* ── The design's own mobile layout ─────────────────────────────────
 * The Figma file carries a separate 414px artboard, and it is not simply the
 * desktop layout narrowed: the hero centres, the free-standing corner shapes
 * are dropped where they would collide with type, the reader quotes stay two
 * across, and the section buttons centre. Everything here is scoped below the
 * design's own breakpoint so the desktop layout is untouched. */
@media (max-width: 767px) {

	/* The big quarter circles sit behind the copy at this width, so the design
	 * leaves them out. The hero's yellow triangle and the exercises panel are
	 * kept — the design keeps those. */
	.rm-hero-corner,
	.rm-corner {
		display: none;
	}

	.rm-hero-text {
		align-items: center;
		text-align: center;
	}

	/* The rule sits above the label rather than beside it. */
	.rm-hero-eyebrow {
		flex-direction: column;
		gap: 12px;
	}

	.rm-hero-text p {
		max-width: 340px;
	}

	/* The cover carries the title on a red band here, where the desktop
	 * artboard splits it purple over navy. */
	.rm-hero-cover__top {
		display: none;
	}

	.rm-hero-cover__band {
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
		height: 26%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 0 20px;
		background-color: rgb(248, 80, 82);
		color: rgb(255, 246, 219);
		font-family: "Special Gothic Display", sans-serif;
		font-size: 22px;
		line-height: 1.1;
		text-transform: uppercase;
	}

	/* The artboard runs the pattern the full height of these two sections, and
	 * the desktop artwork cannot be stretched to that shape — so the mobile
	 * frame's own version of each is used, sized to cover. */
	.rm-decor--about {
		background-image: url("assets/images/about-decor-mobile.webp");
		background-position: center;
		background-size: cover;
	}

	.rm-decor--readers {
		background-image: url("assets/images/readers-decor-mobile.webp");
		background-position: center;
		background-size: cover;
	}

	/* Four across would leave the longer labels a single word per line; the
	 * artboard sets them two up, in equal columns, and lets them wrap. */
	.rm-stats {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 28px 16px;
	}

	/* Anchored to the corner and sized so it clears the eyebrow beneath it. */
	.rm-decor--exercises {
		background-size: auto 58px;
	}

	.rm-band {
		height: 80px;
	}

	.rm-testimonials-body {
		padding-bottom: 100px;
	}

	.rm-cta-row {
		text-align: center;
	}

	.rm-book-dots {
		top: 32px;
		right: 20px;
		gap: 16px;
	}

	.rm-book-dots > span {
		width: 32px;
		height: 32px;
	}

	/* The design puts the button after the cover here. Letting the text column
	 * dissolve into the grid is what allows the two to be reordered without
	 * moving the button out of the column it belongs to on desktop. */
	.rm-book-grid {
		display: flex;
		flex-direction: column;
		gap: 24px;
		/* The grid's own `items-center` would centre the eyebrow, which the
		 * design keeps left; only the button centres here. */
		align-items: stretch;
	}

	.rm-book-text {
		display: contents;
	}

	.rm-book-media {
		order: 2;
	}

	.rm-book-cta {
		order: 3;
		justify-content: center;
	}
}

/* ---------------------------------------------------------------------------
 * Ülesanded ja joonised
 *
 * The subpage behind the front page's "Rohkem", the chapter pages under it and
 * the fillable figures. Written against the same palette and the same square-
 * with-an-arc motif the front page uses, so the subpage reads as the same site
 * rather than as an appendix.
 * ------------------------------------------------------------------------ */

.rm-sheet {
	max-width: 1280px;
	margin-inline: auto;
	padding: 0 0 72px;
}

.rm-sheet--figures {
	border-top: 2px solid rgba(38, 54, 156, 0.12);
	padding-top: 64px;
}

.rm-sheet__head { max-width: 660px; margin-bottom: 36px; }

/* The page shell styles every heading and link inside .rm-body, and those rules
 * outrank a bare class. Scoping these to .rm-body is what lets the subpage keep
 * the front page's typography instead of the article page's. */
.rm-body .rm-sheet__title,
.rm-body .rm-ws__title,
.rm-body .rm-task__title { margin-top: 0; letter-spacing: normal; }

.rm-body .rm-figure__heading { margin-top: 44px; letter-spacing: normal; }

/* The page shell already pads the top of the body; the first block on a chapter
 * or figure page must not add its own gap on top of that. */
.rm-body > .rm-tasks:first-child,
.rm-body > section:first-child .rm-figure__heading { margin-top: 0; }

.rm-body .rm-tile__link { color: #fff6db; }
.rm-body .rm-tile__cta { color: #46cfd8; }

.rm-eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: "Work Sans", sans-serif;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 4px;
	text-transform: uppercase;
	color: #26369c;
	margin-bottom: 14px;
}

.rm-eyebrow__dot {
	width: 18px;
	height: 18px;
	background-color: #f85052;
	flex-shrink: 0;
}

.rm-sheet__title {
	font-family: "Special Gothic Display", sans-serif;
	font-weight: 900;
	font-size: clamp(30px, 5vw, 52px);
	line-height: 1.1;
	text-transform: uppercase;
	margin: 0 0 14px;
}

.rm-sheet__lead {
	font-size: 16px;
	line-height: 1.75;
	opacity: 0.7;
	margin: 0;
}

/* The tiles. One column on a phone, two from tablet up: a chapter's name plus
 * its call to action is a wide thing, and three across would wrap every one. */
.rm-tiles {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 2px;
}

@media (min-width: 700px) {
	.rm-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.rm-tile { margin: 0; }

.rm-tile__link {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 20px;
	background: #26369c;
	color: #fff6db;
	text-decoration: none;
	height: 100%;
	transition: background-color 0.2s;
}

.rm-tile__link:hover,
.rm-tile__link:focus-visible { background: #1c2a80; }

/* The square from the front page's exercise cards: a flat colour with a half
 * disc rising out of the bottom edge. */
.rm-tile__badge {
	position: relative;
	overflow: hidden;
	flex-shrink: 0;
	width: 72px;
	height: 72px;
	display: block;
}

.rm-tile__badge svg {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 50%;
	display: block;
}

.rm-tile__number {
	position: absolute;
	top: 8px;
	left: 0;
	right: 0;
	text-align: center;
	z-index: 1;
	font-family: "Special Gothic Display", sans-serif;
	font-weight: 900;
	font-size: 28px;
	line-height: 1;
}

.rm-tile__text { display: block; }

.rm-tile__title {
	display: block;
	font-family: "Special Gothic Text", sans-serif;
	font-weight: 700;
	font-size: 18px;
	line-height: 1.25;
	margin-bottom: 6px;
}

.rm-tile__cta {
	display: block;
	font-family: "Work Sans", sans-serif;
	font-size: 11px;
	letter-spacing: 2px;
	text-transform: uppercase;
}

/* Chapter pages ---------------------------------------------------------- */

.rm-tasks {
	list-style: none;
	margin: 32px 0 0;
	padding: 0;
}

.rm-task {
	display: flex;
	gap: 18px;
	padding: 22px 0;
	border-top: 2px solid rgba(38, 54, 156, 0.12);
}

.rm-task__number {
	flex-shrink: 0;
	width: 38px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: "Special Gothic Display", sans-serif;
	font-weight: 900;
	font-size: 18px;
}

.rm-task__body { flex: 1 1 0; }

.rm-task__title {
	font-family: "Special Gothic Text", sans-serif;
	font-weight: 700;
	font-size: 19px;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin: 0 0 8px;
}

.rm-task__text { margin: 0; }
.rm-task__link { margin: 10px 0 0; font-size: 14px; }

.rm-empty { opacity: 0.6; font-style: italic; }

/* Figures ---------------------------------------------------------------- */

.rm-figure__heading {
	font-family: "Special Gothic Display", sans-serif;
	font-weight: 900;
	font-size: clamp(22px, 3.5vw, 30px);
	text-transform: uppercase;
	margin: 44px 0 14px;
}

.rm-figure__example img {
	display: block;
	width: 100%;
	height: auto;
	border: 2px solid rgba(38, 54, 156, 0.12);
}

/* The fillable sheet ------------------------------------------------------ */

.rm-ws__intro { margin: 0 0 24px; opacity: 0.75; }
.rm-ws__block { margin: 0 0 30px; }

.rm-ws__title {
	font-family: "Special Gothic Text", sans-serif;
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 2px;
	text-transform: uppercase;
	margin: 0 0 10px;
}

.rm-ws__table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}

.rm-ws__table th {
	text-align: left;
	font-family: "Work Sans", sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	opacity: 0.6;
	padding: 0 0 6px;
}

/* The amount column is narrower than the description it belongs to, and stays
 * wide enough for a five-figure sum with a decimal. */
.rm-ws__table th:not(:first-child),
.rm-ws__table td:not(:first-child) { width: 34%; }

.rm-ws__table td { padding: 0; }

.rm-ws input[type="text"],
.rm-ws textarea {
	width: 100%;
	box-sizing: border-box;
	font: inherit;
	font-size: 15px;
	color: #26369c;
	background: transparent;
	border: 0;
	border-bottom: 2px solid rgba(38, 54, 156, 0.2);
	padding: 9px 8px;
	border-radius: 0;
	-webkit-appearance: none;
	appearance: none;
}

.rm-ws textarea { resize: vertical; line-height: 1.6; }

.rm-ws input[type="text"]:focus,
.rm-ws textarea:focus {
	outline: none;
	border-bottom-color: #f85052;
	background: rgba(248, 80, 82, 0.06);
}

.rm-ws__num { text-align: right; font-variant-numeric: tabular-nums; }

.rm-ws__field { display: block; margin-bottom: 16px; }

.rm-ws__field > span {
	display: block;
	font-family: "Work Sans", sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	opacity: 0.6;
	margin-bottom: 4px;
}

.rm-ws__result {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	margin: 0;
	padding: 11px 0;
	border-top: 2px solid rgba(38, 54, 156, 0.12);
	font-size: 15px;
}

.rm-ws__result output { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* The line the whole sheet is for. */
.rm-ws__result--lead {
	background: #ffb513;
	border-top: 0;
	margin-top: 8px;
	padding: 16px 18px;
	font-family: "Special Gothic Text", sans-serif;
	font-weight: 700;
	font-size: 17px;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.rm-ws__result--lead output { font-size: 21px; }

.rm-ws__note,
.rm-ws__privacy {
	font-size: 13px;
	line-height: 1.7;
	opacity: 0.6;
	margin: 16px 0 0;
}

.rm-ws__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 32px;
}

.rm-btn {
	display: inline-block;
	background: #26369c;
	color: #fff6db;
	border: 2px solid #26369c;
	padding: 13px 26px;
	font-family: "Work Sans", sans-serif;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 3px;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	border-radius: 0;
}

.rm-btn:hover, .rm-btn:focus-visible { background: #1c2a80; border-color: #1c2a80; color: #fff6db; }

.rm-btn--ghost { background: transparent; color: #26369c; }
.rm-btn--ghost:hover, .rm-btn--ghost:focus-visible { background: #26369c; color: #fff6db; }

/* Printing ----------------------------------------------------------------
 *
 * The reader's way of keeping a filled figure is the browser's own "save as
 * PDF", so the printed page has to be the worksheet and nothing else. Inputs
 * print their typed value in every current browser; what they need is a visible
 * rule to sit on, since the screen's tinted borders drop out of a print. */

@media print {
	.rm-header,
	.rm-footer,
	.rm-nav,
	.rm-ws__actions,
	.rm-ws__privacy,
	.wp-block-template-part,
	.rm-banner::before,
	.rm-banner::after { display: none !important; }

	.rm-page, .rm-banner, body { background: #fff !important; color: #000 !important; }

	.rm-banner { padding: 0 0 18px !important; }
	.rm-body { padding: 0 !important; max-width: none !important; }

	.rm-ws input[type="text"],
	.rm-ws textarea {
		border-bottom: 1px solid #999 !important;
		color: #000 !important;
		background: transparent !important;
	}

	.rm-ws__result--lead { background: transparent !important; border: 1px solid #000 !important; }

	/* Never split a task or a table row across two sheets of paper. */
	.rm-task, .rm-ws__block, .rm-ws__result { break-inside: avoid; }

	a[href]::after { content: ""; }
}