@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700;12..96,800&family=IBM+Plex+Mono:wght@500&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

/*********************************************
* CYBER RESPONSE SYSTEMS - THEME
**********************************************
* Built from the marker mockup: orange and blue
* on paper, with hand-drawn shapes over a
* precise grid.
*
* Assumes the current css/base.css, which
* handles the reset, links, lists, quotes,
* tables, code, focus rings and reduced motion.
* None of that is repeated here — the theme
* reassigns base.css's variables and lets it do
* the work.
**********************************************
* INDEX
**********************************************
1. Tokens
2. Typography
3. Marker shapes (signature)
4. Buttons
5. Links
6. Images
7. Hero
8. Bands & sections
9. Feature cards
10. Content containers
11. Navigation
12. Footer
13. Utilities
14. Mastheads (inner pages and posts)
15. Prose (the reading column)
16. Content components
17. Page layouts: sidebar, split, landing blocks
18. Posts
19. Archives
**********************************************/


/*********************************************
* 1. Tokens
**********************************************
* The palette comes first under its own names,
* then gets mapped onto the variables base.css
* reads. Rebranding means editing the top block
* only.
**********************************************/
:root {
	/* --- Palette (from the mockup) --------- */
	--ink:         #14110F;
	--ink-soft:    #4A423C;
	--paper:       #FBF9F5;
	--paper-sunk:  #F1ECE2;
	--rule:        #DCD4C6;

	--orange:      #E8620C;
	--orange-deep: #A8430A;
	--blue:        #1592DD;
	--blue-deep:   #0A5C90;
	--on-blue:     #F2FAFF;

	--display: "Bricolage Grotesque", "Trebuchet MS", sans-serif;
	--label:   "IBM Plex Mono", ui-monospace, monospace;

	/* --- Mapped onto base.css --------------
	   base.css styles every element from these,
	   so the whole document picks up the
	   palette without a single extra rule. */
	--font-body:    "IBM Plex Sans", system-ui, sans-serif;
	--font-heading: var(--display);
	--font-mono:    var(--label);

	--font-size-base: 1.0625rem;
	--line-height:         1.65;
	--line-height-heading: 1.08;
	--line-height-tight:   1.2;

	/* Display-weight heading scale. Larger than
	   the base.css default relative to body text,
	   which is what gives the page its editorial
	   feel. */
	--h1: clamp(3.3rem, 2.5rem + 3.6vw, 4.95rem);
	--h2: clamp(2.6rem, 2.1rem + 2.4vw, 3.6rem);
	--h3: 1.72rem;
	--h4: 1.35rem;

	--color-text:       var(--ink);
	--color-heading:    var(--ink);
	--color-muted:      var(--ink-soft);
	--color-bg:         var(--paper);
	--color-surface:    var(--paper-sunk);
	--color-border:     var(--rule);
	--color-link:       var(--orange-deep);
	--color-link-hover: var(--ink);
	--color-focus:      var(--orange);

	--measure: 62ch;
	--radius:  2px;

	/* --- Layout ---------------------------- */
	--width-page:  1180px;
	--width-prose: 760px;
	--gutter:      24px;

	/* Tints used by callouts and chips. */
	--orange-tint: #FFF0E4;
	--blue-tint:   #E6F4FD;

	/* --- StellarNav overrides --------------
	   The nav bar is the orange stripe in the
	   mockup. */
	--bottomlevel-bg-color:       var(--orange);
	--bottomlevel-bg-color-hover: var(--orange-deep);
	--firstlevel-bg-color:        var(--orange-deep);
	--firstlevel-bg-color-hover:  var(--ink);
	--secondlevel-bg-color:       var(--ink);
	--secondlevel-bg-color-hover: var(--ink);
}

body {
	animation: fadeIn .6s ease-out;
}

@keyframes fadeIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}


/*********************************************
* 2. Typography
**********************************************
* base.css sets the sizes from the --h* tokens
* above. This adds only the things a token can't
* express: weight, tracking, and the two label
* styles.
**********************************************/
h1, h2, h3, h4, h5, h6 {
	font-weight: 800;
	letter-spacing: -0.02em;
}

h3 { letter-spacing: -0.01em; }

.eyebrow {
	display: block;
	margin: 0 0 .9em;
	font-family: var(--label);
	font-size: 1.07rem;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--orange-deep);
}

/* base.css ships .lead; this is the theme's
   size and colour for it. */
.lead {
	max-width: 58ch;
	font-size: 1.58rem;
	line-height: 1.5;
	color: var(--ink-soft);
}

.pagedate,
.pageauthor {
	font-family: var(--label);
	font-size: 1.1rem;
	color: var(--ink-soft);
}


/*********************************************
* 3. Marker shapes (signature)
**********************************************
* Everything drawn by hand in the mockup keeps
* its wobble. Type and grid stay precise
* underneath.
**********************************************/
.markeredge {
	clip-path: polygon(
		0% 9px, 7% 2px, 15% 8px, 24% 1px, 34% 7px, 45% 2px,
		56% 9px, 67% 1px, 78% 7px, 88% 2px, 100% 8px,
		100% calc(100% - 8px), 91% calc(100% - 2px), 81% calc(100% - 9px),
		70% calc(100% - 1px), 59% calc(100% - 7px), 47% calc(100% - 2px),
		36% calc(100% - 8px), 25% calc(100% - 1px), 14% calc(100% - 7px),
		5% calc(100% - 2px), 0% calc(100% - 9px)
	);
}

.blob     { border-radius: 48% 52% 55% 45% / 52% 46% 54% 48%; }
.blob-alt { border-radius: 55% 45% 47% 53% / 45% 55% 45% 55%; }


/*********************************************
* 4. Buttons
**********************************************/
.btn {
	display: inline-block;
	padding: 14px 40px;
	font-family: var(--display);
	font-size: 1.44rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.2;
	text-decoration: none;
	border: 2px solid transparent;
	border-radius: 52% 48% 50% 50% / 58% 56% 44% 42%;
	cursor: pointer;
	transition: transform .18s ease, background-color .18s ease, color .18s ease;
}

.btn:hover { transform: translateY(-2px) rotate(-.6deg); }

.btn-orange        { background: var(--orange); color: #fff; }
.btn-orange:hover  { background: var(--orange-deep); color: #fff; }

.btn-ink           { background: var(--paper); color: var(--ink); border-color: var(--ink); }
.btn-ink:hover     { background: var(--ink); color: var(--paper); }

.btn-onblue        { background: var(--ink); color: var(--blue-deep); }
.btn-onblue:hover  { background: var(--ink); color: var(--paper); }


/*********************************************
* 5. Links
**********************************************
* base.css underlines links, which is the right
* default. This theme replaces that with the
* sliding underline instead.
**********************************************/
a {
	position: relative;
	text-decoration: none;
}

a::before {
	content: '';
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 100%;
	height: 2px;
	border-radius: 4px;
	background-color: var(--orange);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform .3s ease-in-out;
}

a:hover {
	text-decoration: none;
}

a:hover::before {
	transform: scaleX(1);
	transform-origin: left;
}

.band a { color: var(--on-blue); }
.band a::before,
.footercontent a::before { background-color: #fff; }

.btn::before,
.disable-scrolling-underline::before {
	content: none;
}


/*********************************************
* 6. Images
**********************************************
* base.css already stops images overflowing.
* These add the theme's decoration and the size
* helpers.
**********************************************/
img {
	width: 100%;
	border: 1px solid var(--rule);
	transition: box-shadow .5s ease-in-out;
}

img:hover     { box-shadow: 0 0 2px 1px rgba(0, 0, 0, .35); }
a img:hover   { box-shadow: 0 0 2px 1px rgba(21, 146, 221, .6); }

img.nodecoration,
img.nodecoration:hover {
	border: none;
	box-shadow: none;
	transition: none;
}

img.tiny   { max-width: 150px; }
img.small  { max-width: 300px; }
img.medium { max-width: 600px; }
img.large  { max-width: 1000px; }


/*********************************************
* 7. Hero
**********************************************/
.hero, .herosmall {
	padding: clamp(48px, 8vh, 96px) 0;
	background-color: var(--paper);
	background-image: radial-gradient(circle at 1px 1px, var(--rule) 1px, transparent 0);
	background-size: 22px 22px;
	border-bottom: 3px solid var(--ink);
}

.herosmall { padding: clamp(32px, 5vh, 56px) 0; }

.herocontent {
	max-width: var(--width-page);
	margin: 0 auto;
	padding: 0 var(--gutter);
}

.hero .row {
	align-items: center;
	justify-content: center;
}

.herotitle, .heroimage { min-width: 0; }
.herotitle { text-align: left; }

span.herotext {
	display: block;
	margin: 0 0 .35em;
	font-family: var(--display);
	font-size: clamp(3.575rem, 2.4rem + 5.2vw, 6.325rem);
	font-weight: 800;
	line-height: .98;
	letter-spacing: -0.035em;
	color: var(--ink);
	text-wrap: balance;
}

.herosmall span.herotext {
	font-size: clamp(2.6rem, 1.9rem + 3.2vw, 3.85rem);
	text-align: center;
}

.herosubtext {
	max-width: 46ch;
	margin: 0 0 1.8em;
	font-size: clamp(1.44rem, 1.3rem + 0.6vw, 1.72rem);
	color: var(--ink-soft);
}

.heroimage {
	display: flex;
	align-items: center;
	justify-content: center;
}

.heroimage img.crest {
	width: 100%;
	max-width: 340px;
}

@media only screen and (max-width: 1000px) {
	.herotitle { text-align: center; }
	.herosubtext { margin-left: auto; margin-right: auto; }
	.heroimage img.crest { max-width: 240px; }
}

.herodownarrowcontainer { display: none; }


/*********************************************
* 8. Bands & sections
**********************************************
* Note: these are .section-wide / .section-inner,
* not .section. The page-*.php templates already
* emit <div class="section group">, so styling
* .section would pad the inside of every page.
**********************************************/
.section-wide {
	padding: clamp(56px, 8vw, 92px) var(--gutter);
}

.section-inner {
	max-width: var(--width-page);
	margin: 0 auto;
}

.section-narrow {
	max-width: 760px;
	margin: 0 auto;
	text-align: center;
}

.band {
	margin: 0;
	background: var(--blue);
	color: var(--on-blue);
}

.band h1, .band h2, .band h3 { color: #fff; }
.band .lead    { color: var(--on-blue); opacity: .92; }
.band .eyebrow { color: var(--on-blue); opacity: .85; }

.band-deep { background: var(--blue-deep); }

.sunk { background: var(--paper-sunk); }

hr {
	max-width: 220px;
	margin: 0 auto;
	border: 0;
	border-top: 2px solid var(--rule);
}


/*********************************************
* 9. Feature cards
**********************************************/
.feature { text-align: left; }

.feature .icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 68px;
	height: 68px;
	margin-bottom: 20px;
	font-size: 2.2rem;
	background: var(--orange);
	color: #fff;
}

.feature h3 { margin-top: 0; margin-bottom: .4em; }

.feature p {
	margin-bottom: 0;
	font-size: 1.35rem;
	color: var(--ink-soft);
}

@media only screen and (max-width: 1000px) {
	.feature { text-align: center; }
	.feature .icon { margin-left: auto; margin-right: auto; }
}

/* Bulleted list using the blob shape. */
ul.ticks {
	list-style: none;
	padding-left: 0;
}

ul.ticks li {
	position: relative;
	padding-left: 26px;
}

ul.ticks li::before {
	content: '';
	position: absolute;
	left: 0;
	top: .55em;
	width: 12px;
	height: 12px;
	background: var(--orange);
	border-radius: 48% 52% 55% 45% / 52% 46% 54% 48%;
}


/*********************************************
* 10. Content containers
**********************************************
* .contentcontainer is the page-width box.
* .content is whatever sits in it. How wide the
* content runs is the LAYOUT's decision, made with
* a class on the container (section 17), so this
* block stays neutral.
**********************************************/
.contentcontainer {
	max-width: var(--width-page);
	margin: 0 auto;
	padding: clamp(40px, 6vw, 72px) var(--gutter) clamp(56px, 8vw, 96px);
	background: var(--paper);
}

/* Only used by layouts copied in from another
   theme; this theme's titles live in the
   masthead. */
.pagetitle {
	max-width: var(--measure);
	margin-bottom: 40px;
}

.pagetitle h1 { margin: 0; }

.content { max-width: var(--measure); }

.content-wide { max-width: none; }

/* Single reading column, centred, sharing its
   left edge with the "prose" masthead above. */
.layout-prose > .content {
	max-width: var(--width-prose);
	margin-left: auto;
	margin-right: auto;
}

/* Used by page-home.php and page-sections.php —
   sections manage their own width. */
.homelayout {
	max-width: none;
	padding: 0;
}


/*********************************************
* 11. Navigation
**********************************************
* Colours come from the variables in section 1.
* navigation.css itself is unchanged.
**********************************************/
.stickynav { text-shadow: none; }


/*********************************************
* 12. Footer
**********************************************/
.footercontainer {
	padding-top: 56px;
	background-color: var(--ink);
	border-top: 6px solid var(--orange);
}

.footercontent {
	max-width: var(--width-page);
	margin: 0 auto;
	padding: 0 var(--gutter) 24px;
	color: #E8E2D9;
	text-align: left;
}

.footercontent .column { text-align: left; }

.footercontent a { color: #fff; }

.footercontent span.sectiontitle {
	display: block;
	margin-bottom: 14px;
	font-family: var(--display);
	font-size: 1.58rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	text-align: left;
	color: #fff;
}


/*********************************************
* 13. Utilities
**********************************************
* base.css already ships .lead, .hug, .flush,
* .measure, .table-scroll and .visually-hidden.
**********************************************/
.textalign-left   { text-align: left; }
.textalign-center { text-align: center; }
.textalign-right  { text-align: right; }

.center { display: block; margin-left: auto; margin-right: auto; }

.padding-5px  { padding: 5px; }
.padding-10px { padding: 10px; }
.padding-20px { padding: 20px; }
.padding-50px { padding: 50px; }

#debug-overlay-container {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 9999;
	padding: 10px;
	font-family: var(--label);
	font-size: 12px;
	line-height: 1.5;
	background-color: var(--paper-sunk);
	border-top: 1px solid var(--rule);
}

.debug-content { max-width: 800px; margin: 0 auto; }


/*********************************************
* 14. Mastheads (inner pages and posts)
**********************************************
* header.php prints one of these on every page
* except home. Which one is decided per layout in
* theme-functions.php, so a page changes its
* masthead by changing its pagelayout tag and
* nothing else.
**********************************************/
.masthead {
	padding: clamp(36px, 5.5vw, 72px) var(--gutter) clamp(32px, 5vw, 60px);
	background-color: var(--paper);
	background-image: radial-gradient(circle at 1px 1px, var(--rule) 1px, transparent 0);
	background-size: 22px 22px;
	border-bottom: 3px solid var(--ink);
}

.masthead-inner {
	max-width: var(--width-page);
	margin: 0 auto;
}

.masthead h1 {
	max-width: 20ch;
	margin: 0 0 .32em;
	font-size: clamp(2.5rem, 1.7rem + 3.4vw, 4.3rem);
	line-height: 1.02;
	letter-spacing: -0.03em;
}

.masthead .lead {
	max-width: 56ch;
	margin-bottom: 0;
	font-size: clamp(1.25rem, 1.15rem + .5vw, 1.5rem);
}

/* Breadcrumb. Shares the eyebrow's voice, a size
   down. */
.crumbs {
	margin-bottom: 1.4em;
	font-size: .875rem;
}

.crumbs a        { color: inherit; }
.crumbs .crumbsep { margin: 0 .35em; opacity: .5; }

/* Byline row on posts. */
.postmeta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 22px;
	margin: 1.6em 0 0;
}

.postmeta .pagedate,
.postmeta .pageauthor,
.postmeta .readingtime {
	font-family: var(--label);
	font-size: .95rem;
	color: inherit;
}

.postmeta > span + span:not(.postmeta-cats)::before {
	content: '';
	display: inline-block;
	width: 9px;
	height: 9px;
	margin-right: 22px;
	background: var(--orange);
	border-radius: 48% 52% 55% 45% / 52% 46% 54% 48%;
}

/* --- prose: aligned to the reading column --- */
.masthead-prose .masthead-inner { max-width: var(--width-prose); }
.masthead-prose h1 { max-width: none; }

/* --- band: the blue marker stripe ----------- */
.markeredge-bottom {
	clip-path: polygon(
		0 0, 100% 0,
		100% calc(100% - 8px), 91% calc(100% - 2px), 81% calc(100% - 9px),
		70% calc(100% - 1px), 59% calc(100% - 7px), 47% calc(100% - 2px),
		36% calc(100% - 8px), 25% calc(100% - 1px), 14% calc(100% - 7px),
		5% calc(100% - 2px), 0% calc(100% - 9px)
	);
}

.masthead-band {
	padding-bottom: clamp(150px, 20vw, 250px);
	text-align: center;
	color: var(--on-blue);
	background: var(--blue);
	border-bottom: 0;
}

.masthead-band .masthead-inner { max-width: 940px; }
.masthead-band h1       { max-width: none; color: #fff; }
.masthead-band .lead    { margin-left: auto; margin-right: auto; color: var(--on-blue); opacity: .94; }
.masthead-band .eyebrow { color: var(--on-blue); opacity: .85; }
.masthead-band .postmeta { justify-content: center; }
.masthead-band .postmeta > span + span::before { background: #fff; }
.masthead-band a::before { background-color: #fff; }

/* --- ink: advisories ------------------------ */
.masthead-ink {
	color: #E8E2D9;
	background-color: var(--ink);
	background-image: radial-gradient(circle at 1px 1px, #2E2925 1px, transparent 0);
	border-bottom: 6px solid var(--orange);
}

.masthead-ink h1       { color: #fff; max-width: 24ch; }
.masthead-ink .lead    { color: #CFC7BB; }
.masthead-ink .eyebrow { color: var(--orange); }

/* --- sunk: archives ------------------------- */
.masthead-sunk {
	text-align: center;
	background-color: var(--paper-sunk);
	background-image: none;
}

.masthead-sunk h1    { max-width: none; }
.masthead-sunk .lead { margin-left: auto; margin-right: auto; }

/* Chips: categories, severities, filters. */
.chip {
	display: inline-block;
	padding: 3px 14px 4px;
	font-family: var(--label);
	font-size: .78rem;
	font-weight: 500;
	letter-spacing: .1em;
	line-height: 1.5;
	text-transform: uppercase;
	color: var(--ink);
	background: var(--paper);
	border: 2px solid var(--ink);
	border-radius: 52% 48% 50% 50% / 58% 56% 44% 42%;
	transition: background-color .18s ease, color .18s ease;
}

a.chip:hover,
.chip-current { color: var(--paper); background: var(--ink); }

.chip-high   { color: #fff; background: var(--orange-deep); border-color: var(--orange-deep); }
.chip-medium { color: #fff; background: var(--blue-deep);   border-color: var(--blue-deep); }
.chip-low    { color: var(--ink); background: var(--paper-sunk); }

.masthead-band .chip { color: #fff; background: transparent; border-color: #fff; }
.masthead-band a.chip:hover { color: var(--blue-deep); background: #fff; }
.masthead-ink .chip  { color: #fff; background: transparent; border-color: #6A6159; }
.masthead-ink a.chip:hover { color: var(--ink); background: #fff; border-color: #fff; }


/*********************************************
* 15. Prose (the reading column)
**********************************************
* The global heading scale is display-sized, which
* is right for a landing section and far too loud
* for the third subheading of an article. .prose
* is the quieter register for long-form text.
**********************************************/
.prose {
	font-size: 1.1875rem;
	line-height: 1.7;
}

.prose h2 {
	margin-top: 2.1em;
	font-size: clamp(1.75rem, 1.5rem + 1.1vw, 2.3rem);
	letter-spacing: -0.02em;
}

.prose h3 {
	margin-top: 1.8em;
	font-size: 1.45rem;
}

.prose h4 { font-size: 1.2rem; }

.prose .column { text-align: left; }

.prose a { font-weight: 500; }

.prose hr { margin: 2.6em auto; }

.prose small,
.fineprint {
	font-family: var(--label);
	font-size: .85rem;
	color: var(--ink-soft);
}

.fineprint { margin-top: 32px; text-align: center; }

/* Blockquote: a marker stroke down the side. */
.prose blockquote,
blockquote.bigquote {
	position: relative;
	margin: 2em 0;
	padding: .2em 0 .2em 34px;
	font-family: var(--display);
	font-size: 1.5rem;
	font-weight: 500;
	line-height: 1.32;
	letter-spacing: -0.01em;
	color: var(--ink);
	border-left: 0;
}

.prose blockquote::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 9px;
	background: var(--orange);
	border-radius: 50% 50% 50% 50% / 3% 5% 4% 6%;
	transform: rotate(.6deg);
}

.prose blockquote cite,
blockquote.bigquote cite {
	margin-top: 1em;
	font-family: var(--label);
	font-size: .85rem;
	font-weight: 500;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ink-soft);
}

/* base.css keeps the old grey box as .pullquote.
   Here it becomes a centred display quote between
   two hand-drawn rules. */
.prose blockquote.pullquote {
	width: auto;
	margin: 2.6em 0;
	padding: 1.3em 0;
	font-size: clamp(1.7rem, 1.4rem + 1.3vw, 2.3rem);
	font-style: normal;
	font-weight: 700;
	line-height: 1.15;
	text-align: center;
	color: var(--blue-deep);
	background: none;
	border: 0;
}

.prose blockquote.pullquote::before,
.prose blockquote.pullquote::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: auto;
	left: 50%;
	width: 140px;
	height: 7px;
	margin-left: -70px;
	font-size: 0;
	background: var(--orange);
	border-radius: 40% 60% 55% 45% / 60% 50% 50% 40%;
	transform: rotate(-1deg);
}

.prose blockquote.pullquote::after {
	top: auto;
	bottom: 0;
	transform: rotate(1deg);
}

/* Quote sitting on a blue band. */
blockquote.bigquote {
	padding-left: 0;
	font-size: clamp(1.7rem, 1.4rem + 1.4vw, 2.5rem);
	font-weight: 700;
	color: #fff;
}

.band blockquote.bigquote cite { color: var(--on-blue); opacity: .85; }

/* Code. Inline stays light; blocks go dark, which
   is where the advisories keep their log lines. */
.prose pre {
	margin: 1.6em 0;
	padding: 20px 22px;
	color: #F1ECE2;
	background: var(--ink);
	border: 0;
	border-left: 8px solid var(--orange);
	border-radius: var(--radius);
}

.prose pre code { color: inherit; }

/* Tables. */
.prose table,
table.compare { font-size: 1.0625rem; }

.prose .table-scroll,
.section-inner .table-scroll { margin: 1.8em 0; }

th {
	font-family: var(--label);
	font-size: .8rem;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ink-soft);
	border-bottom: 3px solid var(--ink);
}

tbody tr:hover { background: rgba(232, 98, 12, .06); }

table.compare tbody th {
	font-family: var(--font-body);
	font-size: inherit;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: var(--ink);
	border-bottom: 1px solid var(--rule);
}

table.compare td,
table.compare thead th:not(:first-child) { text-align: center; }

/* Figures. */
figure { margin: 2.2em 0; }

figure img { border: 2px solid var(--ink); }

figcaption {
	margin-top: .8em;
	font-family: var(--label);
	font-size: .85rem;
	color: var(--ink-soft);
}


/*********************************************
* 16. Content components
**********************************************
* Small, class-based pieces that work anywhere:
* in a prose column, a sidebar, or a landing
* section.
**********************************************/

/* --- Small button ------------------------- */
.btn-small {
	padding: 10px 28px;
	font-size: 1.1rem;
}

/* --- Callout -------------------------------
   A box with a marker-coloured offset shadow. */
.callout {
	margin: 2.2em 0;
	padding: 24px 28px;
	background: var(--paper-sunk);
	border: 2px solid var(--ink);
	box-shadow: 7px 7px 0 var(--orange);
}

.callout > :last-child { margin-bottom: 0; }

.callout-title {
	margin-bottom: .35em;
	font-family: var(--display);
	font-size: 1.3rem;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--ink);
}

.callout-warn { background: var(--orange-tint); box-shadow: 7px 7px 0 var(--ink); }
.callout-blue { background: var(--blue-tint);   box-shadow: 7px 7px 0 var(--blue); }

/* --- Numbered steps ------------------------ */
ol.steps {
	margin: 1.8em 0;
	padding-left: 0;
	list-style: none;
	counter-reset: step;
}

ol.steps > li {
	position: relative;
	min-height: 46px;
	margin-bottom: 1.2em;
	padding-left: 66px;
	counter-increment: step;
}

ol.steps > li::before {
	content: counter(step);
	position: absolute;
	top: -.1em;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	font-family: var(--display);
	font-size: 1.3rem;
	font-weight: 800;
	color: #fff;
	background: var(--orange);
	border-radius: 48% 52% 55% 45% / 52% 46% 54% 48%;
}

ol.steps > li:nth-child(even)::before {
	background: var(--blue);
	border-radius: 55% 45% 47% 53% / 45% 55% 45% 55%;
}

/* Markdown has no classes, so numbered lists in a
   Markdown post pick the step style up for free. */
.prose .section > ol:not([class]) {
	margin: 1.8em 0;
	padding-left: 0;
	list-style: none;
	counter-reset: step;
}

.prose .section > ol:not([class]) > li {
	position: relative;
	margin-bottom: 1em;
	padding-left: 54px;
	counter-increment: step;
}

.prose .section > ol:not([class]) > li::before {
	content: counter(step);
	position: absolute;
	top: .05em;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	font-family: var(--display);
	font-size: 1.05rem;
	font-weight: 800;
	color: #fff;
	background: var(--orange);
	border-radius: 48% 52% 55% 45% / 52% 46% 54% 48%;
}

/* --- Timeline ------------------------------ */
ol.timeline {
	margin: 2em 0;
	padding-left: 0;
	list-style: none;
}

ol.timeline > li {
	position: relative;
	margin: 0;
	padding: 0 0 2em 44px;
	border-left: 3px solid var(--ink);
	margin-left: 9px;
}

ol.timeline > li:last-child {
	padding-bottom: 0;
	border-left-color: transparent;
}

ol.timeline > li::before {
	content: '';
	position: absolute;
	top: 0;
	left: -12px;
	width: 21px;
	height: 21px;
	background: var(--orange);
	border: 3px solid var(--ink);
	border-radius: 48% 52% 55% 45% / 52% 46% 54% 48%;
}

ol.timeline h3 { margin: .1em 0 .3em; }

.timeline-when {
	display: block;
	font-family: var(--label);
	font-size: .85rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--orange-deep);
}

/* --- FAQ (details / summary) --------------- */
.faq details { border-bottom: 2px solid var(--rule); }
.faq details:first-child { border-top: 2px solid var(--rule); }

.faq summary {
	position: relative;
	padding: 18px 48px 18px 0;
	font-family: var(--display);
	font-size: 1.3rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.25;
	list-style: none;
	cursor: pointer;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
	content: '+';
	position: absolute;
	top: 50%;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	margin-top: -17px;
	font-size: 1.5rem;
	line-height: 1;
	color: #fff;
	background: var(--orange);
	border-radius: 48% 52% 55% 45% / 52% 46% 54% 48%;
	transition: transform .2s ease, background-color .2s ease;
}

.faq details[open] summary::after {
	background: var(--ink);
	transform: rotate(45deg);
}

.faq details > :not(summary) { max-width: 60ch; }
.faq details > p:last-child  { margin-bottom: 22px; }

/* --- Stats --------------------------------- */
.stat { padding: 22px 0; border-top: 3px solid var(--ink); }

.stat-number {
	display: block;
	font-family: var(--display);
	font-size: clamp(2.6rem, 2rem + 2.4vw, 3.8rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--orange-deep);
}

.stat-label {
	display: block;
	margin-top: 8px;
	font-family: var(--label);
	font-size: .9rem;
	color: var(--ink-soft);
}

/* --- Avatar -------------------------------- */
.avatar {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 84px;
	height: 84px;
	font-family: var(--display);
	font-size: 1.7rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: #fff;
	background: var(--orange);
}

.avatar-blue { background: var(--blue); }

/* Icon tile variant (the orange one is in
   section 9). */
.icon-blue,
.feature .icon-blue { background: var(--blue); }

.feature .icon { font-family: var(--display); font-weight: 800; }


/*********************************************
* 17. Page layouts: sidebar, split, landing blocks
**********************************************/

/* --- Content + sidebar ---------------------
   page-sidebar.php and post-advisory.php. */
.layout-sidebar {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: clamp(32px, 5vw, 72px);
	align-items: start;
}

.layout-sidebar-empty { grid-template-columns: minmax(0, var(--width-prose)); }

.sidebar {
	position: sticky;
	top: 88px; /* clears the sticky nav */
}

.sidecard {
	margin-bottom: 28px;
	padding: 26px 26px 28px;
	background: var(--paper-sunk);
	border: 2px solid var(--ink);
}

.sidecard > :last-child { margin-bottom: 0; }
.sidecard .eyebrow { font-size: .85rem; }

.sidecard-ink {
	color: #E8E2D9;
	background: var(--ink);
	border-color: var(--ink);
	box-shadow: 7px 7px 0 var(--orange);
}

.sidecard-ink .eyebrow { color: var(--orange); }

.sidecard-plain {
	padding-left: 0;
	padding-right: 0;
	background: none;
	border: 0;
	border-top: 3px solid var(--ink);
}

.sidecard-big {
	font-family: var(--display);
	font-size: 2rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.1;
	color: #fff;
}

dl.factlist { margin-bottom: 1.4em; }

dl.factlist dt {
	margin-top: 14px;
	font-family: var(--label);
	font-size: .78rem;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	opacity: .7;
}

dl.factlist dt:first-child { margin-top: 0; }

dl.factlist dd {
	margin: 2px 0 0;
	padding: 0;
	font-weight: 600;
	line-height: 1.35;
}

@media only screen and (max-width: 1000px) {
	.layout-sidebar { grid-template-columns: minmax(0, 1fr); }
	.sidebar { position: static; }
}

/* --- Split: two columns inside a section --- */
.split {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: clamp(32px, 6vw, 88px);
	align-items: start;
}

.split > .prose h2,
.split h2 { font-size: clamp(2rem, 1.6rem + 1.8vw, 2.9rem); }

.split .lead { font-size: 1.3rem; }

@media only screen and (max-width: 900px) {
	.split { grid-template-columns: minmax(0, 1fr); }
}

/* Landing sections keep the display-sized h2, but
   a little under the home page's. */
.layout-sections .section-narrow h2 { font-size: clamp(2.2rem, 1.8rem + 2vw, 3.2rem); }

.layout-sections .section-narrow + .row,
.layout-sections .section-narrow + .table-scroll { margin-top: 36px; }

/* --- Team ---------------------------------- */
.team {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 40px 36px;
	margin-top: 40px;
}

.person h3 { margin: 18px 0 2px; font-size: 1.45rem; }
.person p  { margin-bottom: 0; color: var(--ink-soft); }

.person .person-role {
	margin-bottom: 10px;
	font-family: var(--label);
	font-size: .85rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--orange-deep);
}

/* --- Service rows --------------------------- */
.servicerow {
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	gap: clamp(28px, 5vw, 72px);
	align-items: center;
	padding: clamp(36px, 5vw, 60px) 0;
	border-bottom: 2px solid var(--rule);
}

.servicerow:first-child { padding-top: 0; }
.servicerow:last-child  { padding-bottom: 0; border-bottom: 0; }

.servicerow-flip { grid-template-columns: minmax(0, 1fr) 220px; }
.servicerow-flip .servicerow-mark { order: 2; }

.servicerow-mark {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 1 / .92;
	color: #fff;
	background: var(--orange);
}

.servicerow-mark svg { width: 38%; height: auto; }
.servicerow-mark-blue { background: var(--blue); }

.servicerow h2 { margin-top: 0; font-size: clamp(2rem, 1.6rem + 1.8vw, 2.9rem); }
.servicerow .lead { margin-bottom: 1.2em; font-size: 1.35rem; }

@media only screen and (max-width: 760px) {
	.servicerow,
	.servicerow-flip { grid-template-columns: minmax(0, 1fr); }
	.servicerow-mark { width: 140px; }
	.servicerow-flip .servicerow-mark { order: 0; }
}

/* --- Plans ---------------------------------- */
.plans {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 32px;
	align-items: stretch;
	padding-top: 16px;
}

.plan,
.contactcard {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 34px 30px 32px;
	background: var(--paper);
	border: 2px solid var(--ink);
	box-shadow: 8px 8px 0 var(--rule);
}

.plan > :last-child,
.contactcard > :last-child { margin-top: auto; margin-bottom: 0; }

.plan .eyebrow { font-size: .85rem; margin-bottom: .5em; }

.plan-name { margin: 0 0 .5em; font-size: 2rem; }

.plan-price { margin-bottom: 1.4em; padding-bottom: 1.2em; border-bottom: 2px solid var(--rule); }

.plan-amount {
	display: block;
	font-family: var(--display);
	font-size: 3.2rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
}

.plan-per {
	font-family: var(--label);
	font-size: .85rem;
	color: var(--ink-soft);
}

.plan ul { margin-bottom: 1.8em; }

.plan-featured {
	box-shadow: 8px 8px 0 var(--orange);
	transform: translateY(-16px);
}

.plan-flag {
	position: absolute;
	top: -18px;
	right: 22px;
	margin: 0;
	padding: 5px 18px;
	font-family: var(--label);
	font-size: .78rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #fff;
	background: var(--orange);
	border-radius: 52% 48% 50% 50% / 58% 56% 44% 42%;
	transform: rotate(2deg);
}

@media only screen and (max-width: 940px) {
	.plan-featured { transform: none; }
}

/* --- Contact cards -------------------------- */
.contactcards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 32px;
}

.contactcard .icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 68px;
	height: 68px;
	margin-bottom: 22px;
	color: #fff;
	background: var(--orange);
}

.contactcard h2 { margin: 0 0 .4em; font-size: 1.9rem; }
.contactcard p  { color: var(--ink-soft); }

.contactcard-link {
	font-family: var(--display);
	font-size: 1.35rem;
	font-weight: 700;
	color: var(--ink);
}

.contactcard-ink {
	background: var(--ink);
	box-shadow: 8px 8px 0 var(--orange);
}

.contactcard-ink h2 { color: #fff; }
.contactcard-ink p  { color: #CFC7BB; }
.contactcard-ink .contactcard-link { color: #fff; }

/* Checklist pairs on the audits page. */
.checkgrid { margin: 0 -20px; }
.checkgrid h3 { margin-top: .4em; }


/*********************************************
* 18. Posts
**********************************************/

/* Feature image. Wider than the reading column,
   framed in ink with a marker shadow. */
.postimage {
	max-width: 1000px;
	margin: 0 auto clamp(40px, 6vw, 68px);
}

.postimage img {
	border: 2px solid var(--ink);
	box-shadow: 10px 10px 0 var(--orange);
}

/* post-feature: the image rides up over the
   band's bottom edge. The band reserves the room
   (its padding-bottom), this claims it back. */
.postimage-overlap {
	position: relative;
	z-index: 1;
	margin-top: calc(-1 * clamp(150px, 20vw, 250px));
}

.postimage-overlap img { box-shadow: 10px 10px 0 var(--ink); }

/* Drop cap for the feature layout. */
.prose-dropcap .section > p:first-of-type::first-letter {
	float: left;
	margin: .06em .1em 0 0;
	font-family: var(--display);
	font-size: 4.6em;
	font-weight: 800;
	line-height: .8;
	color: var(--orange-deep);
}

.prose-dropcap .section > p:first-of-type { font-size: 1.12em; }

/* Under the article. */
.postfooter {
	margin-top: clamp(56px, 8vw, 96px);
	padding-top: 36px;
	border-top: 3px solid var(--ink);
}

.authorcard {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
	margin-bottom: 56px;
}

.authorcard .avatar { width: 64px; height: 64px; font-size: 1.5rem; }

.authorcard p { flex: 1 1 200px; margin: 0; }

.authorcard .eyebrow { margin: 0; font-size: .8rem; }

.authorcard strong {
	font-family: var(--display);
	font-size: 1.5rem;
	letter-spacing: -0.01em;
}


/*********************************************
* 19. Archives
**********************************************/
.categorystrip {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-bottom: clamp(36px, 5vw, 56px);
}

.categorystrip .chip { padding: 6px 20px 7px; font-size: .85rem; }

.postgrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 36px 32px;
}

.postcard {
	display: flex;
	flex-direction: column;
	background: var(--paper);
	border: 2px solid var(--ink);
	box-shadow: 7px 7px 0 var(--rule);
	transition: transform .18s ease, box-shadow .18s ease;
}

.postcard:hover {
	transform: translate(-2px, -2px);
	box-shadow: 9px 9px 0 var(--orange);
}

.postcard-image {
	display: block;
	border-bottom: 2px solid var(--ink);
}

.postcard-image img {
	width: 100%;
	aspect-ratio: 1200 / 630;
	object-fit: cover;
}

.postcard-body { padding: 22px 24px 26px; }

.postcard-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 10px;
	margin-bottom: 12px;
	font-family: var(--label);
	font-size: .85rem;
	color: var(--ink-soft);
}

.postcard-meta > span:first-child { margin-right: 4px; }
.postcard-meta .chip { padding: 1px 10px 2px; font-size: .7rem; border-width: 1.5px; }

.postcard-title {
	margin: 0 0 .45em;
	font-size: 1.5rem;
	line-height: 1.12;
}

.postcard-title a { color: var(--ink); }

.postcard-excerpt {
	display: -webkit-box;
	margin-bottom: .9em;
	overflow: hidden;
	font-size: 1.0625rem;
	color: var(--ink-soft);
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	line-clamp: 4;
}

.postcard-author {
	margin: 0;
	font-family: var(--label);
	font-size: .85rem;
	color: var(--orange-deep);
}

/* Lead story. */
.postcard-featured {
	flex-direction: row;
	margin-bottom: 44px;
	box-shadow: 10px 10px 0 var(--orange);
}

.postcard-featured:hover { box-shadow: 12px 12px 0 var(--ink); }

.postcard-featured .postcard-image {
	flex: 1 1 54%;
	border-right: 2px solid var(--ink);
	border-bottom: 0;
}

.postcard-featured .postcard-image img { height: 100%; aspect-ratio: auto; }

.postcard-featured .postcard-body {
	flex: 1 1 46%;
	align-self: center;
	padding: clamp(24px, 3.5vw, 44px);
}

.postcard-featured .postcard-title   { font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.6rem); line-height: 1.05; }
.postcard-featured .postcard-excerpt { font-size: 1.2rem; -webkit-line-clamp: 6; line-clamp: 6; }

@media only screen and (max-width: 820px) {
	.postcard-featured { flex-direction: column; }
	.postcard-featured .postcard-image { border-right: 0; border-bottom: 2px solid var(--ink); }
}

/* Compact index (postarchives.php). */
.archive-list { max-width: 980px; }

ul.postlist {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 3px solid var(--ink);
}

.postrow {
	display: grid;
	grid-template-columns: 130px minmax(0, 1fr) auto;
	gap: 8px 24px;
	align-items: baseline;
	margin: 0;
	padding: 18px 0;
	border-bottom: 2px solid var(--rule);
}

.postrow-date {
	font-family: var(--label);
	font-size: .85rem;
	color: var(--ink-soft);
}

.postrow-title {
	justify-self: start;
	font-family: var(--display);
	font-size: 1.35rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.2;
	color: var(--ink);
}

.postrow-cats .chip { padding: 1px 10px 2px; font-size: .7rem; border-width: 1.5px; }

@media only screen and (max-width: 700px) {
	.postrow { grid-template-columns: minmax(0, 1fr); }
}

/* Pagination. */
.pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-top: 56px;
}

.pagination a,
.pagination span {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	font-family: var(--display);
	font-size: 1.2rem;
	font-weight: 800;
	color: var(--ink);
	border: 2px solid var(--ink);
	transition: background-color .18s ease, color .18s ease;
}

.pagination a:hover { color: #fff; background: var(--ink); }

.pagination span {
	color: #fff;
	background: var(--orange);
	border-color: var(--orange);
}

/* Related posts under an article. */
.postgrid-related { margin-top: 20px; }
.postgrid-related .postcard-excerpt { -webkit-line-clamp: 3; line-clamp: 3; }

/* Markdown tables carry no class, so tables in
   the reading column fill it by default. */
.prose table { width: 100%; }