/*
Theme Name: Affresco
Theme URI: https://www.naplestourism.org/
Author: Naples Tourism
Description: Pompeian wall painting for naplestourism.org: red panels, black pilasters, ochre frame lines, plaster-cream grounds and Roman inscriptional capitals. Topic hubs, a sticky article sidebar with contents, reading progress and key facts, and article furniture derived from ordinary post HTML. Built for Rank Math.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: naplestourism
Tags: blog, news, two-columns, right-sidebar, custom-menu, custom-logo, editor-style, featured-images, threaded-comments, translation-ready
*/

/* ==========================================================================
   1. Tokens
   Design values from the handoff. Two text variants exist only for contrast:
   --nt-ocra-pale is ochre text on red (the comp's #e7bd62 measures 4.25:1 on
   #9b2d20; this is 4.76:1), and dt/meta on red uses cream at .82, not .75.
   The identity ochre stays on every line, frame, dado and progress bar.
   ========================================================================== */
:root {
	--nt-intonaco: #f2e9da;
	--nt-intonaco-deep: #e8dcc7;
	--nt-rosso: #9b2d20;
	--nt-rosso-text: #8a2619;
	--nt-ocra: #d4a03a;
	--nt-ocra-light: #e7bd62;
	--nt-ocra-pale: #eaca86;
	--nt-nero: #1c1815;
	--nt-muted: rgba(28, 24, 21, .65);
	--nt-rule: rgba(28, 24, 21, .2);
	--nt-on-dark: rgba(242, 233, 218, .85);
	--nt-on-dark-2: rgba(242, 233, 218, .7);
	--nt-frame-line: rgba(212, 160, 58, .7);

	--nt-display: "Marcellus", "Marcellus Fallback", Georgia, "Times New Roman", serif;
	--nt-display-caps: "Marcellus", "Marcellus Caps Fallback", Georgia, "Times New Roman", serif;
	--nt-text: "Spectral", "Spectral Fallback", Georgia, "Times New Roman", serif;

	--nt-gutter: clamp(20px, 4.4vw, 56px);
	--nt-section: clamp(56px, 7vw, 104px);
	--nt-max: 1200px;
	--nt-max-wide: 1440px;
	--nt-reading: 700px;
	--nt-admin: var(--wp-admin--admin-bar--height, 0px);
	--nt-sticky-top: calc(var(--nt-admin) + 24px);

	/* Surface-scoped: redefined on red, black and ochre grounds below. */
	--nt-focus: var(--nt-rosso);
	--nt-hover: var(--nt-rosso);
	--nt-accent-text: var(--nt-rosso-text);
}

.nt-on-nero {
	--nt-focus: var(--nt-ocra);
	--nt-hover: var(--nt-ocra-light);
	--nt-accent-text: var(--nt-ocra-light);
	background: var(--nt-nero);
	color: var(--nt-intonaco);
}

.nt-on-rosso {
	--nt-focus: var(--nt-ocra-light);
	--nt-hover: var(--nt-ocra-pale);
	--nt-accent-text: var(--nt-ocra-pale);
	background: var(--nt-rosso);
	color: var(--nt-intonaco);
}

.nt-on-ocra {
	--nt-focus: var(--nt-nero);
	--nt-hover: var(--nt-rosso-text);
	--nt-accent-text: var(--nt-nero);
	background: var(--nt-ocra);
	color: var(--nt-nero);
}

/* Metric-matched fallbacks. Until the web fonts arrive, Georgia is scaled to
   the average glyph widths of Marcellus and Spectral (measured from the font
   files), so the swap does not re-wrap the hero or the headlines. Marcellus
   capitals are 7.4% narrower than Georgia's but its mixed case is 2% wider,
   hence two display fallbacks. Local fonts only: nothing is downloaded. */
@font-face {
	font-family: "Marcellus Fallback";
	src: local("Georgia");
	size-adjust: 102.1%;
}

@font-face {
	font-family: "Marcellus Caps Fallback";
	src: local("Georgia");
	size-adjust: 92.6%;
}

@font-face {
	font-family: "Spectral Fallback";
	src: local("Georgia");
	font-style: normal;
	font-weight: 400;
	size-adjust: 100.3%;
}

@font-face {
	font-family: "Spectral Fallback";
	src: local("Georgia Italic"), local("Georgia-Italic");
	font-style: italic;
	font-weight: 400;
	size-adjust: 90.4%;
}

@font-face {
	font-family: "Spectral Fallback";
	src: local("Georgia Bold"), local("Georgia-Bold");
	font-style: normal;
	font-weight: 600 700;
	size-adjust: 89.3%;
}

/* ==========================================================================
   2. Base
   No overflow on html/body/main: any of them would break position: sticky.
   ========================================================================== */
*,
*::before,
*::after {
	box-sizing: border-box;
}

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

body {
	margin: 0;
	background: var(--nt-intonaco);
	color: var(--nt-nero);
	font-family: var(--nt-text);
	font-size: 1.0625rem;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

a {
	color: inherit;
	text-decoration: none;
	transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}

a:hover {
	color: var(--nt-hover);
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
}

iframe {
	max-width: 100%;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

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

::selection {
	background: var(--nt-rosso);
	color: var(--nt-intonaco);
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	clip: auto !important;
	clip-path: none;
	height: auto;
	width: auto;
	z-index: 100000;
}

.nt-skip {
	position: absolute;
	left: 12px;
	top: -200px;
	z-index: 1000;
	padding: 12px 18px;
	background: var(--nt-nero);
	color: var(--nt-ocra-light);
	font: 400 .8125rem/1.2 var(--nt-display-caps);
	letter-spacing: .2em;
	text-transform: uppercase;
	--nt-focus: var(--nt-ocra);
}

.nt-skip:focus {
	top: calc(var(--nt-admin) + 12px);
	color: var(--nt-ocra-light);
}

#content:focus {
	outline: none;
}

.nt-arrow {
	display: inline-block;
	width: 1.05em;
	height: .62em;
	margin-left: .35em;
	vertical-align: .08em;
	overflow: visible;
	transition: transform .15s ease;
}

a:hover > .nt-arrow {
	transform: translateX(3px);
}

/* ==========================================================================
   3. Shared type and ornament
   ========================================================================== */
.nt-eyebrow {
	margin: 0;
	font: 400 .8125rem/1.35 var(--nt-display-caps);
	letter-spacing: .32em;
	text-transform: uppercase;
	color: var(--nt-accent-text);
}

.nt-h2 {
	margin: 0;
	font: 400 clamp(1.875rem, 3.6vw, 3rem)/1.05 var(--nt-display-caps);
	letter-spacing: .04em;
	text-transform: uppercase;
	text-wrap: balance;
}

.nt-label {
	margin: 0;
	font: 400 .75rem/1.3 var(--nt-display-caps);
	letter-spacing: .28em;
	text-transform: uppercase;
	color: var(--nt-accent-text);
}

.nt-ornament {
	display: flex;
	align-items: center;
	gap: 10px;
}

.nt-ornament::before,
.nt-ornament::after {
	content: "";
	width: 48px;
	height: 1px;
	background: currentColor;
}

.nt-ornament span {
	width: 7px;
	height: 7px;
	background: var(--nt-rosso);
	transform: rotate(45deg);
}

.nt-caps-link {
	display: inline-block;
	padding: 6px 0;
	font: 400 .8125rem/1.2 var(--nt-display-caps);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--nt-rosso);
}

.nt-caps-link:hover {
	color: var(--nt-nero);
}

/* The fresco frame: an inset line instead of a border, so it costs no layout. */
.nt-frame {
	padding: 8px;
	background: var(--nt-nero);
	outline: 1px solid var(--nt-ocra);
	outline-offset: -4px;
}

.nt-frame img,
.nt-frame picture {
	display: block;
	width: 100%;
}

/* ==========================================================================
   4. Header
   ========================================================================== */
.nt-topband {
	height: 10px;
	background: var(--nt-nero);
}

.nt-header {
	position: relative;
	z-index: 50;
	background: var(--nt-intonaco);
	border-bottom: 1px solid var(--nt-nero);
	box-shadow: 0 3px 0 var(--nt-intonaco), 0 4px 0 var(--nt-nero);
}

.nt-header__inner {
	max-width: var(--nt-max-wide);
	margin: 0 auto;
	padding: 20px var(--nt-gutter);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.nt-logo {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	white-space: nowrap;
	color: var(--nt-nero);
	flex: none;
}

.nt-logo:hover {
	color: inherit;
}

.nt-logo__mark {
	width: 40px;
	height: 40px;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--nt-rosso);
	outline: 1px solid var(--nt-ocra);
	outline-offset: -5px;
	color: var(--nt-intonaco);
	font: 400 1.3125rem/1 var(--nt-display-caps);
}

.nt-logo__words {
	display: flex;
	flex-direction: column;
	gap: 5px;
	line-height: 1;
}

.nt-logo__name {
	font: 400 1.1875rem/1 var(--nt-display-caps);
	letter-spacing: .14em;
	text-transform: uppercase;
}

.nt-logo__sub {
	font: 400 .6875rem/1 var(--nt-display-caps);
	letter-spacing: .5em;
	text-transform: uppercase;
	color: var(--nt-rosso);
}

.nt-on-nero .nt-logo {
	color: var(--nt-intonaco);
}

.nt-on-nero .nt-logo__sub {
	color: var(--nt-ocra-light);
}

.nt-logo--image img {
	display: block;
	max-height: 56px;
	width: auto;
}

/* The smallest phones: the lockup and the toggle must share 280px. */
@media (max-width: 374.98px) {
	.nt-header__inner {
		gap: 12px;
	}

	.nt-logo {
		gap: 11px;
	}

	.nt-logo__name {
		font-size: 1rem;
		letter-spacing: .1em;
	}

	.nt-logo__sub {
		letter-spacing: .42em;
	}
}

.nt-nav {
	min-width: 0;
}

/* With JS the menu stays on one line and theme.js swaps in the toggle when
   it overflows, so the header never changes height (no layout shift). */
.js .nt-nav {
	overflow: hidden;
	margin: -4px;
	padding: 4px;
}

.js .nt-nav__list {
	flex-wrap: nowrap;
}

.nt-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	column-gap: clamp(16px, 2.2vw, 30px);
}

.nt-nav__list a {
	display: block;
	padding: 10px 0;
	font: 400 .8125rem/1.2 var(--nt-display-caps);
	letter-spacing: .14em;
	text-transform: uppercase;
	white-space: nowrap;
}

.nt-nav__list .current-menu-item > a,
.nt-nav__list .current-menu-ancestor > a,
.nt-nav__list .current-post-ancestor > a,
.nt-nav__list .current-category-ancestor > a,
.nt-nav__list a[aria-current] {
	color: var(--nt-rosso);
}

.nt-nav__list .sub-menu {
	display: none;
}

.nt-menu-toggle {
	display: none;
	width: 44px;
	height: 44px;
	margin-right: -8px;
	padding: 0;
	flex: none;
	align-items: center;
	justify-content: center;
	border: 0;
	background: none;
	color: var(--nt-nero);
	cursor: pointer;
}

.nt-menu-toggle__bars {
	position: relative;
	display: block;
	width: 22px;
	height: 2px;
	background: currentColor;
	transition: background-color .15s ease;
}

.nt-menu-toggle__bars::before,
.nt-menu-toggle__bars::after {
	content: "";
	position: absolute;
	left: 0;
	width: 22px;
	height: 2px;
	background: currentColor;
	transition: transform .2s ease;
}

.nt-menu-toggle__bars::before {
	top: -7px;
}

.nt-menu-toggle__bars::after {
	top: 7px;
}

.nt-menu-toggle[aria-expanded="true"] .nt-menu-toggle__bars {
	background: transparent;
}

.nt-menu-toggle[aria-expanded="true"] .nt-menu-toggle__bars::before {
	transform: translateY(7px) rotate(45deg);
}

.nt-menu-toggle[aria-expanded="true"] .nt-menu-toggle__bars::after {
	transform: translateY(-7px) rotate(-45deg);
}

/* Compact header: under 1000px, or wider when the menu is too long to fit
   (theme.js measures and adds .nt-header--compact). Without JS the menu
   simply wraps under the logo. */
@media (max-width: 999.98px) {
	.js .nt-menu-toggle {
		display: inline-flex;
	}

	.js .nt-nav {
		display: none;
	}

	.no-js .nt-header__inner {
		flex-wrap: wrap;
	}

	.no-js .nt-nav__list {
		justify-content: flex-start;
	}
}

.js .nt-header--compact .nt-menu-toggle {
	display: inline-flex;
}

.js .nt-header--compact .nt-nav {
	display: none;
}

.js .nt-nav.is-open {
	display: block;
	position: absolute;
	top: calc(100% + 5px);
	left: 0;
	right: 0;
	z-index: 60;
	margin: 0;
	padding: 10px;
	overflow: visible;
	background: var(--nt-nero);
	color: var(--nt-intonaco);
	border-top: 3px solid var(--nt-rosso);
	--nt-focus: var(--nt-ocra);
	--nt-hover: var(--nt-ocra-light);
}

.js .nt-nav.is-open .nt-nav__list {
	display: block;
	max-width: var(--nt-max-wide);
	margin: 0 auto;
	padding: 14px clamp(14px, 3vw, 40px) 18px;
	outline: 1px solid var(--nt-ocra);
	outline-offset: -6px;
}

.js .nt-nav.is-open .nt-nav__list a {
	padding: 14px 4px;
	border-bottom: 1px solid rgba(242, 233, 218, .12);
	font-size: .9375rem;
	letter-spacing: .18em;
}

.js .nt-nav.is-open .nt-nav__list li:last-child > a {
	border-bottom: 0;
}

.js .nt-nav.is-open .current-menu-item > a,
.js .nt-nav.is-open a[aria-current] {
	color: var(--nt-ocra-light);
}

/* ==========================================================================
   5. Footer
   ========================================================================== */
.nt-footer {
	border-top: 6px solid var(--nt-rosso);
	padding: 56px var(--nt-gutter) 28px;
}

.nt-footer__inner {
	max-width: var(--nt-max-wide);
	margin: 0 auto;
}

.nt-footer__top {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 40px 64px;
}

.nt-footer__brand {
	flex: 1 1 240px;
	max-width: 340px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 18px;
}

.nt-footer__desc {
	margin: 0;
	font-size: .9375rem;
	font-style: italic;
	color: var(--nt-on-dark-2);
}

.nt-footer__cols {
	display: flex;
	flex-wrap: wrap;
	gap: 32px 64px;
}

.nt-footer__col {
	min-width: 0;
}

.nt-footer__label {
	margin: 0 0 8px;
	font: 400 .75rem/1.3 var(--nt-display-caps);
	letter-spacing: .28em;
	text-transform: uppercase;
	color: var(--nt-ocra-light);
}

.nt-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: .9375rem;
}

.nt-footer__list a {
	display: inline-block;
	padding: 3px 0;
	color: var(--nt-on-dark);
}

.nt-footer__list a:hover {
	color: var(--nt-ocra-light);
}

.nt-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px 24px;
	margin-top: 48px;
	padding-top: 20px;
	border-top: 1px solid rgba(242, 233, 218, .15);
	font: 400 .75rem/1.5 var(--nt-display-caps);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: rgba(242, 233, 218, .6);
}

.nt-footer__bottom a {
	color: inherit;
}

/* ==========================================================================
   6. Front page
   ========================================================================== */

/* 6a. The wall: pilaster, red panel, pilaster. */
.nt-wall {
	display: flex;
	max-width: var(--nt-max-wide);
	margin: 0 auto;
	padding: clamp(16px, 2.4vw, 32px) clamp(12px, 2.4vw, 32px);
}

.nt-pilaster {
	flex: 0 0 clamp(10px, 2.6vw, 40px);
	position: relative;
	background: var(--nt-nero);
}

.nt-pilaster::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 10%;
	bottom: 10%;
	width: 1px;
	background: var(--nt-ocra);
}

.nt-wall__panel {
	flex: 1;
	min-width: 0;
	padding: clamp(14px, 1.6vw, 22px);
}

.nt-wall__frame {
	border: 1px solid var(--nt-ocra);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 40px clamp(32px, 5vw, 72px);
	padding: clamp(28px, 5.5vw, 80px) clamp(18px, 4.5vw, 64px);
}

.nt-wall__copy {
	flex: 1 1 400px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.nt-wall__title {
	margin: 0;
	font: 400 clamp(2.625rem, 6.6vw, 6.125rem)/1 var(--nt-display-caps);
	letter-spacing: .02em;
	text-transform: uppercase;
	text-wrap: balance;
}

.nt-wall__intro {
	margin: 0;
	max-width: 44ch;
	font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
	font-style: italic;
	color: rgba(242, 233, 218, .88);
	text-wrap: pretty;
}

.nt-wall__search {
	display: flex;
	flex-direction: column;
	gap: 14px;
	max-width: 540px;
}

.nt-popular {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	font-size: .9375rem;
	font-style: italic;
}

.nt-popular a {
	display: inline-block;
	padding: 2px 0 1px;
	border-bottom: 1px solid var(--nt-ocra);
}

.nt-wall__figure {
	flex: 0 1 340px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

.nt-wall__figure .nt-frame {
	width: 100%;
}

.nt-wall__img {
	aspect-ratio: 4 / 5;
	object-fit: cover;
	background: #2a221d;
}

.nt-wall__figure figcaption {
	font: 400 .6875rem/1.5 var(--nt-display-caps);
	letter-spacing: .3em;
	text-transform: uppercase;
	text-align: center;
	color: var(--nt-accent-text);
}

/* 6b. Search form (hero, search page, 404). */
.nt-search {
	display: flex;
	width: 100%;
	max-width: 540px;
	background: var(--nt-intonaco);
	color: var(--nt-nero);
	box-shadow: inset 0 0 0 1px var(--nt-nero);
}

.nt-on-rosso .nt-search,
.nt-on-nero .nt-search {
	box-shadow: none;
}

.nt-search:focus-within {
	outline: 2px solid var(--nt-focus);
	outline-offset: 2px;
}

.nt-search__input {
	flex: 1;
	min-width: 0;
	margin: 0;
	padding: 14px 16px;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--nt-nero);
	font-size: 1.0625rem;
	-webkit-appearance: none;
	appearance: none;
}

.nt-search__input:focus {
	outline: none;
}

.nt-search__input::placeholder {
	color: var(--nt-nero);
	opacity: .65;
}

.nt-search__input::-webkit-search-cancel-button {
	-webkit-appearance: none;
}

.nt-search__button {
	flex: none;
	margin: 0;
	padding: 0 22px;
	border: 0;
	border-radius: 0;
	background: var(--nt-nero);
	color: var(--nt-ocra-light);
	font: 400 .875rem/1 var(--nt-display-caps);
	letter-spacing: .16em;
	text-transform: uppercase;
	cursor: pointer;
	transition: color .15s ease;
	--nt-focus: var(--nt-ocra);
}

.nt-search__button:hover {
	color: var(--nt-intonaco);
}

.nt-search__button:focus-visible {
	outline-offset: -5px;
}

/* 6c. Section heads. */
.nt-head-center {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	padding: 0 12px 40px;
	text-align: center;
}

.nt-head-center .nt-eyebrow {
	color: var(--nt-rosso);
}

.nt-head-row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px 16px;
	margin-bottom: 36px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--nt-nero);
}

/* 6d. Topic hubs: a checkerboard with no gaps. The colour is decided in CSS
   because it depends on the column count, so every range is disjoint. */
.nt-hubs {
	max-width: var(--nt-max-wide);
	margin: 0 auto;
	padding: clamp(48px, 6vw, 96px) clamp(12px, 2.4vw, 32px) 0;
}

.nt-hubgrid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

.nt-hub {
	padding: 14px;
	background: var(--nt-nero);
	color: var(--nt-intonaco);
	--nt-focus: var(--nt-ocra);
	--nt-hover: var(--nt-ocra-light);
	--nt-accent-text: var(--nt-ocra-light);
}

@media (max-width: 639.98px) {
	.nt-hub:nth-child(even) {
		background: var(--nt-rosso);
		--nt-focus: var(--nt-ocra-light);
		--nt-hover: var(--nt-ocra-pale);
		--nt-accent-text: var(--nt-ocra-pale);
	}
}

@media (min-width: 640px) and (max-width: 999.98px) {
	.nt-hubgrid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.nt-hub:nth-child(4n+2),
	.nt-hub:nth-child(4n+3) {
		background: var(--nt-rosso);
		--nt-focus: var(--nt-ocra-light);
		--nt-hover: var(--nt-ocra-pale);
		--nt-accent-text: var(--nt-ocra-pale);
	}
}

@media (min-width: 1000px) {
	.nt-hubgrid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.nt-hub:nth-child(8n+2),
	.nt-hub:nth-child(8n+4),
	.nt-hub:nth-child(8n+5),
	.nt-hub:nth-child(8n+7) {
		background: var(--nt-rosso);
		--nt-focus: var(--nt-ocra-light);
		--nt-hover: var(--nt-ocra-pale);
		--nt-accent-text: var(--nt-ocra-pale);
	}

	.nt-hubgrid--few {
		grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
	}
}

.nt-hub__frame {
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 28px 22px 26px;
	border: 1px solid var(--nt-frame-line);
	text-align: center;
}

.nt-medal {
	position: relative;
	width: 96px;
	height: 96px;
	flex: none;
	border-radius: 50%;
	outline: 1px solid var(--nt-ocra);
	outline-offset: 4px;
	background: repeating-linear-gradient(135deg, rgba(242, 233, 218, .08) 0 8px, transparent 8px 16px), rgba(0, 0, 0, .18);
	overflow: hidden;
}

.nt-medal img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}

.nt-medal--empty::after {
	content: "";
	position: absolute;
	inset: 34px;
	border: 1px solid var(--nt-frame-line);
	transform: rotate(45deg);
}

.nt-hub__num {
	margin-top: 8px;
	font: 400 .8125rem/1 var(--nt-display-caps);
	letter-spacing: .3em;
	color: var(--nt-accent-text);
}

.nt-hub__title {
	margin: 0;
	font: 400 1.375rem/1.15 var(--nt-display-caps);
	letter-spacing: .08em;
	text-transform: uppercase;
	text-wrap: balance;
}

.nt-hub__title a {
	display: inline-block;
	padding: 2px 0;
}

.nt-hub__desc {
	margin: 0;
	font-size: .9375rem;
	line-height: 1.5;
	color: var(--nt-on-dark);
}

.nt-hub__links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px 12px;
	font-size: .875rem;
	font-style: italic;
}

.nt-hub__links a {
	display: inline-block;
	padding: 3px 0 1px;
	border-bottom: 1px solid var(--nt-frame-line);
}

.nt-dado {
	height: clamp(28px, 3vw, 44px);
	background: var(--nt-nero);
	border-top: 3px solid var(--nt-ocra);
}

/* 6e. Latest guides. */
.nt-latest {
	max-width: var(--nt-max-wide);
	margin: 0 auto;
	padding: var(--nt-section) var(--nt-gutter);
}

/* 6f. Itineraries. */
.nt-itins {
	padding: var(--nt-section) var(--nt-gutter);
}

.nt-itins__inner {
	max-width: var(--nt-max-wide);
	margin: 0 auto;
}

.nt-itins .nt-eyebrow {
	margin-bottom: 14px;
}

.nt-itins .nt-h2 {
	margin-bottom: 44px;
}

.nt-itin-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
	gap: 24px;
}

.nt-itin-grid--few {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
}

.nt-itin {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 30px 28px;
	background: var(--nt-intonaco);
	color: var(--nt-nero);
	outline: 1px solid var(--nt-nero);
	outline-offset: -8px;
	--nt-focus: var(--nt-rosso);
	--nt-hover: var(--nt-rosso);
}

.nt-itin:focus-within {
	box-shadow: 0 0 0 2px var(--nt-ocra), 0 0 0 4px var(--nt-nero);
}

.nt-itin__days {
	display: flex;
	align-items: baseline;
	gap: 14px;
}

.nt-itin__num {
	font: 400 clamp(3.75rem, 6vw, 5.25rem)/.85 var(--nt-display-caps);
	color: var(--nt-rosso);
}

.nt-itin__unit {
	font: 400 .8125rem/1 var(--nt-display-caps);
	letter-spacing: .24em;
	text-transform: uppercase;
}

.nt-itin__title {
	margin: 0;
	font: 600 1.5rem/1.2 var(--nt-text);
	text-wrap: pretty;
}

.nt-itin__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.nt-itin__title a:focus-visible {
	outline: none;
}

.nt-itin:hover .nt-itin__title a {
	color: var(--nt-rosso);
}

.nt-itin__desc {
	margin: 0;
	font-size: 1rem;
	font-style: italic;
	color: rgba(28, 24, 21, .75);
}

.nt-itin__stops {
	margin: 0;
	font: 400 .8125rem/1.9 var(--nt-display-caps);
	letter-spacing: .12em;
	text-transform: uppercase;
}

.nt-itin__cta {
	margin-top: auto;
	font: 400 .8125rem/1.2 var(--nt-display-caps);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--nt-rosso);
}

/* ==========================================================================
   7. Cards
   ========================================================================== */
.nt-cards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
	gap: 40px 28px;
}

.nt-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}

.nt-card__media {
	display: block;
	aspect-ratio: 3 / 2;
	border: 1px solid var(--nt-nero);
	background: repeating-linear-gradient(135deg, rgba(155, 45, 32, .07) 0 10px, transparent 10px 20px), var(--nt-intonaco-deep);
	overflow: hidden;
}

.nt-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease;
}

.nt-card:hover .nt-card__media img {
	transform: scale(1.03);
}

.nt-card__cat {
	font: 400 .75rem/1.35 var(--nt-display-caps);
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--nt-rosso-text);
}

.nt-card__title {
	margin: 0;
	font: 600 1.3125rem/1.25 var(--nt-text);
	text-wrap: pretty;
	overflow-wrap: break-word;
}

.nt-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.nt-card__title a:focus-visible {
	outline: none;
}

.nt-card:focus-within {
	outline: 2px solid var(--nt-focus);
	outline-offset: 6px;
}

.nt-card:hover .nt-card__title a {
	color: var(--nt-rosso);
}

.nt-card__meta {
	font-size: .875rem;
	font-style: italic;
	color: var(--nt-muted);
}

/* Panel variant: related guides, on ochre. */
.nt-card--panel {
	gap: 12px;
	padding: 14px 14px 22px;
	background: var(--nt-intonaco);
	outline: 1px solid var(--nt-nero);
	outline-offset: -6px;
}

.nt-card--panel .nt-card__media {
	border: 0;
}

.nt-card--panel .nt-card__cat,
.nt-card--panel .nt-card__title {
	padding: 0 8px;
}

.nt-card--panel .nt-card__title {
	font-size: 1.25rem;
}

.nt-card--panel:focus-within {
	outline: 2px solid var(--nt-nero);
	outline-offset: 4px;
}

/* Feature card: the hub's pillar, at the top of a category archive. */
.nt-feature {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
	margin-bottom: clamp(48px, 6vw, 80px);
	background: var(--nt-nero);
	color: var(--nt-intonaco);
	outline: 1px solid var(--nt-ocra);
	outline-offset: -8px;
	--nt-focus: var(--nt-ocra);
	--nt-hover: var(--nt-ocra-light);
}

@media (min-width: 760px) {
	.nt-feature {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	}
}

.nt-feature__media {
	aspect-ratio: 3 / 2;
	margin: 14px;
	overflow: hidden;
	background: #2a221d;
}

.nt-feature__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.nt-feature__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 14px;
	padding: 18px clamp(24px, 3.5vw, 48px) 36px;
}

@media (min-width: 760px) {
	.nt-feature__body {
		padding: 36px clamp(24px, 3.5vw, 48px) 36px 18px;
	}
}

.nt-feature__label {
	color: var(--nt-ocra-light);
}

.nt-feature__title {
	margin: 0;
	font: 400 clamp(1.5rem, 2.6vw, 2.125rem)/1.15 var(--nt-display);
	text-wrap: balance;
}

.nt-feature__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.nt-feature__title a:focus-visible {
	outline: none;
}

.nt-feature:focus-within {
	box-shadow: 0 0 0 2px var(--nt-intonaco), 0 0 0 4px var(--nt-rosso);
}

.nt-feature__excerpt {
	margin: 0;
	font-style: italic;
	color: var(--nt-on-dark);
}

.nt-feature__meta {
	font-size: .875rem;
	font-style: italic;
	color: var(--nt-on-dark-2);
}

/* ==========================================================================
   8. Article
   ========================================================================== */
.nt-container {
	max-width: var(--nt-max);
	margin: 0 auto;
	padding-left: var(--nt-gutter);
	padding-right: var(--nt-gutter);
}

.nt-article__top {
	padding-top: clamp(28px, 4vw, 56px);
}

/* Breadcrumbs: the theme's own, or Rank Math's when it is switched on. */
.nt-crumbs {
	font: 400 .75rem/1.6 var(--nt-display-caps);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: rgba(28, 24, 21, .7);
}

.nt-crumbs ol,
.nt-crumbs p {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px 10px;
}

.nt-crumbs li {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	max-width: 100%;
}

.nt-crumbs li + li::before {
	content: "\00b7";
	color: var(--nt-rosso);
}

.nt-crumbs .separator {
	color: var(--nt-rosso);
}

.nt-crumbs a {
	display: inline-block;
	padding: 4px 0;
}

.nt-crumbs [aria-current],
.nt-crumbs .last {
	display: inline-block;
	max-width: min(44ch, 100%);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	vertical-align: bottom;
}

.nt-article__header {
	max-width: 880px;
	margin-top: clamp(24px, 3vw, 40px);
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.nt-kicker {
	margin: 0;
	font: 400 .8125rem/1.35 var(--nt-display-caps);
	letter-spacing: .32em;
	text-transform: uppercase;
	color: var(--nt-rosso-text);
}

.nt-kicker a {
	display: inline-block;
	padding: 4px 0;
}

.nt-article__title {
	margin: 0;
	font: 400 clamp(2.125rem, 4.6vw, 3.875rem)/1.05 var(--nt-display);
	letter-spacing: .01em;
	text-wrap: balance;
	overflow-wrap: break-word;
}

.nt-dek {
	margin: 0;
	max-width: 60ch;
	font-size: clamp(1.125rem, 1.6vw, 1.3125rem);
	font-style: italic;
	color: rgba(28, 24, 21, .8);
	text-wrap: pretty;
}

.nt-byline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 20px;
	padding-top: 6px;
	font-size: .9375rem;
}

.nt-byline__who {
	display: flex;
	align-items: center;
	gap: 12px;
}

.nt-byline__who a {
	font-weight: 600;
	border-bottom: 1px solid var(--nt-ocra);
	padding: 3px 0 1px;
}

.nt-byline__when {
	font-style: italic;
	color: var(--nt-muted);
}

.nt-avatar {
	width: 40px;
	height: 40px;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	overflow: hidden;
	background: var(--nt-intonaco-deep);
	outline: 1px solid var(--nt-ocra);
	outline-offset: 2px;
	color: var(--nt-rosso);
	font: 400 1.125rem/1 var(--nt-display-caps);
}

.nt-avatar img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.nt-article__hero {
	margin: clamp(28px, 4vw, 48px) 0 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.nt-article__hero img {
	aspect-ratio: 21 / 9;
	object-fit: cover;
	background: #2a221d;
}

@media (max-width: 599.98px) {
	.nt-article__hero img {
		aspect-ratio: 3 / 2;
	}
}

.nt-article__hero figcaption {
	font-size: .875rem;
	font-style: italic;
	line-height: 1.5;
	color: var(--nt-muted);
}

/* 8a. Body grid: content, then a sidebar column that stretches the full row so
   its sticky child can travel the whole article. */
.nt-article__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(40px, 5vw, 72px);
	padding-top: clamp(32px, 4vw, 56px);
	padding-bottom: clamp(56px, 6vw, 96px);
}

.nt-article__main {
	min-width: 0;
	max-width: var(--nt-reading);
	align-self: start;
}

.nt-aside {
	display: none;
}

@media (min-width: 1000px) {
	.nt-article__body.has-aside {
		grid-template-columns: minmax(0, 1fr) 320px;
	}

	.nt-aside {
		display: block;
		align-self: stretch;
		min-width: 0;
	}

	.nt-toc-mobile {
		display: none;
	}
}

.nt-aside__sticky {
	position: sticky;
	top: var(--nt-sticky-top);
	display: flex;
	flex-direction: column;
	gap: 20px;
	max-height: calc(100vh - var(--nt-admin) - 48px);
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: rgba(28, 24, 21, .3) transparent;
}

/* On this page: the one box allowed to shrink. Its list scrolls inside the
   box when a long guide outgrows the viewport; theme.js keeps the active
   entry in view. */
.nt-toc {
	flex: 0 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	padding: 24px 24px 22px;
	background: var(--nt-nero);
	color: var(--nt-intonaco);
	outline: 1px solid var(--nt-ocra);
	outline-offset: -6px;
	--nt-focus: var(--nt-ocra);
	--nt-hover: var(--nt-ocra-light);
}

.nt-toc__label {
	flex: none;
	margin: 0 0 6px;
	color: var(--nt-ocra-light);
}

.nt-progress {
	flex: none;
	height: 2px;
	margin: 10px 0 14px;
	background: rgba(242, 233, 218, .15);
	overflow: hidden;
}

.nt-progress__bar {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--nt-ocra);
	transform: scaleX(var(--nt-progress, 0));
	transform-origin: 0 50%;
	transition: transform .15s linear;
}

.no-js .nt-progress {
	display: none;
}

.nt-toc__list {
	position: relative;
	flex: 1 1 auto;
	min-height: min(9rem, 24vh);
	list-style: none;
	margin: 0;
	padding: 0 2px 0 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: rgba(242, 233, 218, .28) transparent;
	font-size: 1rem;
	line-height: 1.35;
}

.nt-toc__list a {
	display: block;
	padding: 7px 0 7px 14px;
	border-left: 2px solid rgba(242, 233, 218, .15);
	color: rgba(242, 233, 218, .62);
}

.nt-toc__list a:hover {
	color: var(--nt-ocra-light);
}

.nt-toc__list a.is-active {
	border-left-color: var(--nt-ocra);
	color: var(--nt-intonaco);
}

.nt-toc__list a:focus-visible {
	outline-offset: -2px;
}

.nt-glance {
	flex: none;
	padding: 22px 24px;
	outline: 1px solid var(--nt-ocra);
	outline-offset: -6px;
}

.nt-glance .nt-label {
	margin-bottom: 12px;
}

.nt-glance dl {
	margin: 0;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 8px 14px;
	font-size: .9375rem;
	line-height: 1.4;
}

.nt-glance dt {
	font-style: italic;
	color: rgba(242, 233, 218, .82);
}

.nt-glance dd {
	margin: 0;
	overflow-wrap: anywhere;
}

.nt-more {
	flex: none;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 4px 2px;
}

.nt-more ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.nt-more a {
	display: block;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--nt-rule);
	font-size: 1rem;
	line-height: 1.35;
}

/* 8b. Mobile contents: native <details>, works without JS. */
.nt-toc-mobile {
	margin-bottom: 32px;
	background: var(--nt-nero);
	color: var(--nt-intonaco);
	outline: 1px solid var(--nt-ocra);
	outline-offset: -6px;
	--nt-focus: var(--nt-ocra);
	--nt-hover: var(--nt-ocra-light);
}

.nt-toc-mobile summary {
	padding: 16px 20px;
	cursor: pointer;
	font: 400 .8125rem/1.3 var(--nt-display-caps);
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--nt-ocra-light);
}

.nt-toc-mobile summary::marker {
	color: var(--nt-ocra-light);
}

.nt-toc-mobile summary:focus-visible {
	outline-offset: -4px;
}

.nt-toc-mobile ol {
	margin: 0;
	padding: 0 20px 18px 40px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 1rem;
	line-height: 1.4;
}

.nt-toc-mobile li::marker {
	color: rgba(242, 233, 218, .5);
	font-size: .875em;
}

.nt-toc-mobile a {
	display: inline-block;
	padding: 4px 0;
	color: var(--nt-on-dark);
}

/* 8c. Prose. The article body is plain pipeline HTML (or blocks); everything
   here targets elements, not block classes, so both look the same. */
.nt-prose {
	font-size: clamp(1.0625rem, 1.4vw, 1.1875rem);
	line-height: 1.7;
	overflow-wrap: break-word;
}

.nt-prose > * {
	margin-top: 0;
	margin-bottom: 0;
}

.nt-prose > * + * {
	margin-top: 22px;
}

.nt-prose h2 {
	margin-top: 52px;
	font: 400 clamp(1.625rem, 2.6vw, 2.125rem)/1.15 var(--nt-display);
	letter-spacing: .02em;
	text-wrap: balance;
	scroll-margin-top: var(--nt-sticky-top);
}

.nt-prose h3 {
	margin-top: 36px;
	font: 600 1.25rem/1.3 var(--nt-text);
	scroll-margin-top: var(--nt-sticky-top);
}

.nt-prose h4 {
	margin-top: 28px;
	font: italic 600 1.0625rem/1.4 var(--nt-text);
}

.nt-prose h2 + *,
.nt-prose h3 + *,
.nt-prose h4 + * {
	margin-top: 14px;
}

.nt-prose a {
	color: var(--nt-rosso-text);
	text-decoration: underline;
	text-decoration-color: rgba(138, 38, 25, .4);
	text-decoration-thickness: 1px;
	text-underline-offset: .2em;
}

.nt-prose a:hover {
	color: var(--nt-nero);
	text-decoration-color: var(--nt-ocra);
}

.nt-prose strong,
.nt-prose b {
	font-weight: 600;
}

.nt-prose ul,
.nt-prose ol {
	padding-left: 0;
}

.nt-prose ul {
	padding-left: 1.3em;
}

.nt-prose li + li {
	margin-top: 8px;
}

.nt-prose li > ul,
.nt-prose li > ol {
	margin-top: 8px;
}

.nt-prose ul > li::marker {
	color: var(--nt-rosso);
}

/* Ordered lists: Marcellus red Roman numerals in a fixed gutter. Uses the
   built-in list-item counter, so start= and reversed still work. */
.nt-prose ol {
	list-style: none;
	padding-left: 0;
}

.nt-prose ol > li {
	position: relative;
	padding-left: 60px;
}

.nt-prose ol > li::before {
	content: counter(list-item, upper-roman);
	position: absolute;
	left: 0;
	top: 0;
	width: 52px;
	font: 400 1.25em/1.36 var(--nt-display-caps);
	color: var(--nt-rosso);
}

.nt-prose ol.is-style-numbers > li::before {
	content: counter(list-item) ".";
}

.nt-prose figure {
	margin-top: 32px;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
}

.nt-prose figure + * {
	margin-top: 32px;
}

.nt-prose figure img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--nt-nero);
	background: var(--nt-intonaco-deep);
}

.nt-prose figcaption {
	margin-top: 10px;
	font-size: .875rem;
	font-style: italic;
	line-height: 1.5;
	color: var(--nt-muted);
}

.nt-prose blockquote {
	margin-left: 0;
	margin-right: 0;
	padding: 4px 0 4px 24px;
	border-left: 3px solid var(--nt-rosso);
	font-size: 1.15em;
	font-style: italic;
	line-height: 1.55;
}

.nt-prose blockquote p {
	margin: 0;
}

.nt-prose blockquote cite {
	display: block;
	margin-top: 10px;
	font: normal 400 .75rem/1.4 var(--nt-display-caps);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--nt-muted);
}

.nt-prose hr {
	height: 7px;
	margin-top: 44px;
	margin-bottom: 44px;
	border: 0;
	background: linear-gradient(var(--nt-nero), var(--nt-nero)) center / 100% 1px no-repeat;
	position: relative;
	overflow: visible;
}

.nt-prose hr::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 0;
	width: 7px;
	height: 7px;
	margin-left: -3.5px;
	background: var(--nt-rosso);
	box-shadow: 0 0 0 6px var(--nt-intonaco);
	transform: rotate(45deg);
}

.nt-prose code,
.nt-prose kbd {
	padding: .1em .35em;
	background: var(--nt-intonaco-deep);
	font-size: .88em;
}

.nt-prose iframe,
.nt-prose video {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	border: 0;
}

/* Tables: every table sits in a focusable scroller. */
.nt-table {
	position: relative;
	overflow-x: auto;
	border: 1px solid var(--nt-nero);
	background: var(--nt-intonaco);
	scrollbar-width: thin;
	scrollbar-color: rgba(28, 24, 21, .35) transparent;
}

.nt-table.is-scrollable:not(.is-end) {
	-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 56px), rgba(0, 0, 0, .25));
	mask-image: linear-gradient(90deg, #000 calc(100% - 56px), rgba(0, 0, 0, .25));
}

.nt-table:focus-visible {
	outline-offset: 3px;
}

.nt-prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: .9375rem;
	line-height: 1.5;
}

.nt-prose table:has(tr > :nth-child(4)) {
	min-width: 620px;
}

.nt-prose table:has(tr > :nth-child(6)) {
	min-width: 800px;
}

.nt-prose th {
	padding: 12px 14px;
	background: var(--nt-nero);
	color: var(--nt-intonaco);
	font: 400 .75rem/1.35 var(--nt-display-caps);
	letter-spacing: .14em;
	text-transform: uppercase;
	text-align: left;
	vertical-align: bottom;
}

.nt-prose td {
	padding: 12px 14px;
	border-top: 1px solid var(--nt-rule);
	vertical-align: top;
}

.nt-prose tbody tr:first-child td {
	border-top: 0;
}

.nt-prose tbody tr:nth-child(even) td {
	background: rgba(232, 220, 199, .6);
}

.nt-prose td:first-child {
	font-weight: 600;
}

.nt-prose td a,
.nt-prose th a {
	color: inherit;
}

/* FAQs: the article's own "Frequently asked questions" section, rebuilt as
   native <details> by the theme. */
.nt-faqs {
	border-top: 1px solid var(--nt-nero);
}

.nt-faq {
	border-bottom: 1px solid var(--nt-nero);
}

.nt-faq > summary {
	display: flex;
	align-items: baseline;
	gap: 12px;
	padding: 16px 0;
	cursor: pointer;
	list-style: none;
}

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

.nt-faq > summary::before {
	content: "";
	flex: none;
	width: 0;
	height: 0;
	border-left: 8px solid var(--nt-nero);
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	transform: translateY(-2px);
	transition: transform .15s ease, border-color .15s ease;
}

.nt-faq[open] > summary::before {
	transform: translateY(-2px) rotate(90deg);
	border-left-color: var(--nt-rosso);
}

.nt-faq > summary:hover .nt-faq__q {
	color: var(--nt-rosso);
}

.nt-faq > summary:focus-visible {
	outline-offset: -2px;
}

.nt-prose .nt-faq__q {
	margin: 0;
	font: 600 1.0625rem/1.45 var(--nt-text);
	transition: color .15s ease;
}

.nt-faq__a {
	padding: 0 0 18px 20px;
}

.nt-faq__a > * {
	margin: 0;
}

.nt-faq__a > * + * {
	margin-top: 12px;
}

/* Tip panel: the "Tip" block style, and pipeline paragraphs that open with
   <strong>Tip:</strong>. */
.nt-tip,
.wp-block-group.is-style-tip {
	padding: 22px 24px;
	background: var(--nt-nero);
	color: var(--nt-intonaco);
	outline: 1px solid var(--nt-ocra);
	outline-offset: -6px;
	font-size: 1.0625rem;
	line-height: 1.6;
	--nt-focus: var(--nt-ocra);
	--nt-hover: var(--nt-ocra-light);
}

.wp-block-group.is-style-tip::before {
	content: "Tip";
	display: block;
	margin-bottom: 8px;
	font: 400 .75rem/1.3 var(--nt-display-caps);
	letter-spacing: .28em;
	text-transform: uppercase;
	color: var(--nt-ocra-light);
}

.nt-tip > *,
.wp-block-group.is-style-tip > * {
	margin: 0;
}

.nt-tip > * + *,
.wp-block-group.is-style-tip > * + * {
	margin-top: 10px;
}

.nt-tip .nt-tip__label {
	margin-bottom: 8px;
	font: 400 .75rem/1.3 var(--nt-display-caps);
	letter-spacing: .28em;
	text-transform: uppercase;
	color: var(--nt-ocra-light);
}

.nt-tip .nt-tip__label + * {
	margin-top: 0;
}

.nt-tip a,
.wp-block-group.is-style-tip a {
	color: var(--nt-ocra-light);
	text-decoration-color: rgba(231, 189, 98, .5);
}

.nt-tip a:hover,
.wp-block-group.is-style-tip a:hover {
	color: var(--nt-intonaco);
}

/* Verdict: "Verdict:" paragraphs, a lighter ruling. */
.nt-verdict {
	padding: 14px 18px;
	border-left: 3px solid var(--nt-rosso);
	background: rgba(232, 220, 199, .7);
	font-size: .97em;
	line-height: 1.6;
}

.nt-verdict__label {
	display: inline-block;
	margin-right: 10px;
	font: 400 .75rem/1 var(--nt-display-caps);
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--nt-rosso-text);
	vertical-align: .1em;
}

/* "Last updated..." line that opens every guide. */
.nt-note {
	padding-left: 16px;
	border-left: 2px solid var(--nt-ocra);
	font-size: .9375rem;
	line-height: 1.6;
	color: var(--nt-muted);
}

/* End matter: the article's own related list and photo credits. */
.nt-endmatter {
	margin-top: 56px;
}

.nt-endmatter > * {
	margin: 0;
}

.nt-endmatter > * + * {
	margin-top: 16px;
}

.nt-prose .nt-endmatter h2 {
	margin-top: 0;
	padding-top: 22px;
	border-top: 1px solid var(--nt-nero);
	font-size: 1rem;
	letter-spacing: .24em;
	text-transform: uppercase;
}

.nt-endmatter--related ul {
	list-style: none;
	padding: 0;
}

.nt-endmatter--related li {
	padding-left: 22px;
	position: relative;
}

.nt-endmatter--related li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: .72em;
	width: 7px;
	height: 7px;
	background: var(--nt-rosso);
	transform: rotate(45deg);
}

.nt-endmatter--credits {
	font-size: .875rem;
	line-height: 1.55;
	color: var(--nt-muted);
}

.nt-endmatter--credits li + li {
	margin-top: 6px;
}

.nt-endmatter--credits a {
	color: var(--nt-rosso-text);
}

/* Core alignment and caption classes. */
.alignleft {
	float: left;
	margin: 6px 24px 12px 0;
	max-width: 50%;
}

.alignright {
	float: right;
	margin: 6px 0 12px 24px;
	max-width: 50%;
}

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

.nt-prose::after {
	content: "";
	display: table;
	clear: both;
}

.wp-caption {
	max-width: 100%;
}

.wp-caption-text,
.gallery-caption {
	font-size: .875rem;
	font-style: italic;
	color: var(--nt-muted);
}

.sticky,
.bypostauthor {
	position: relative;
}

/* 8d. Author box. */
.nt-author {
	margin-top: 56px;
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	padding: 26px;
	background: var(--nt-intonaco-deep);
	outline: 1px solid rgba(28, 24, 21, .3);
	outline-offset: -6px;
}

.nt-author .nt-avatar {
	width: 76px;
	height: 76px;
	outline-offset: 3px;
	background: var(--nt-intonaco);
	font-size: 2rem;
}

.nt-author__body {
	flex: 1 1 260px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.nt-author__name {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.3;
}

.nt-author__name a:hover {
	color: var(--nt-rosso);
}

.nt-author__bio {
	margin: 0;
	font-size: 1rem;
	color: rgba(28, 24, 21, .8);
}

/* 8e. Related guides. */
.nt-related {
	padding: clamp(48px, 6vw, 88px) var(--nt-gutter);
}

.nt-related__inner {
	max-width: var(--nt-max);
	margin: 0 auto;
}

.nt-related .nt-h2 {
	margin-bottom: 32px;
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	line-height: 1;
}

.nt-related .nt-cards {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
	gap: 24px;
}

/* ==========================================================================
   9. Archives, search, pages, 404
   ========================================================================== */
.nt-plaque {
	max-width: var(--nt-max-wide);
	margin: 0 auto;
	padding: clamp(16px, 2.4vw, 32px) clamp(12px, 2.4vw, 32px) 0;
}

.nt-plaque__panel {
	padding: clamp(14px, 1.6vw, 22px);
}

.nt-plaque__frame {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: clamp(28px, 5vw, 64px) clamp(18px, 4.5vw, 64px);
	border: 1px solid var(--nt-ocra);
}

.nt-plaque__title {
	margin: 0;
	font: 400 clamp(2.25rem, 5vw, 4.5rem)/1.02 var(--nt-display-caps);
	letter-spacing: .02em;
	text-transform: uppercase;
	text-wrap: balance;
	overflow-wrap: break-word;
}

.nt-plaque__desc {
	margin: 0;
	max-width: 62ch;
	font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
	font-style: italic;
	color: rgba(242, 233, 218, .88);
	text-wrap: pretty;
}

.nt-plaque__desc p {
	margin: 0;
}

.nt-plaque__desc p + p {
	margin-top: .8em;
}

.nt-plaque__desc a {
	text-decoration: underline;
	text-decoration-color: var(--nt-ocra);
	text-underline-offset: .2em;
}

.nt-plaque .nt-search {
	margin-top: 6px;
}

.nt-listing {
	max-width: var(--nt-max-wide);
	margin: 0 auto;
	padding: clamp(48px, 6vw, 88px) var(--nt-gutter) var(--nt-section);
}

.nt-listing .nt-h2 {
	font-size: clamp(1.5rem, 2.6vw, 2.25rem);
}

.nt-empty {
	max-width: 60ch;
	margin: 0 0 36px;
	font-size: 1.125rem;
	font-style: italic;
}

.nt-pagination {
	margin-top: 64px;
}

.nt-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	font: 400 .875rem/1 var(--nt-display-caps);
	letter-spacing: .12em;
	text-transform: uppercase;
}

.nt-pagination .page-numbers {
	min-width: 44px;
	height: 44px;
	padding: 0 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--nt-nero);
}

.nt-pagination a.page-numbers:hover {
	background: var(--nt-rosso);
	border-color: var(--nt-rosso);
	color: var(--nt-intonaco);
}

.nt-pagination .current {
	background: var(--nt-nero);
	color: var(--nt-ocra-light);
}

.nt-pagination .dots {
	border-color: transparent;
}

/* Hub links: the compact list on search, 404 and empty states. */
.nt-hublinks {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
	gap: 10px;
}

.nt-hublinks a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 64px;
	padding: 14px 22px;
	background: var(--nt-nero);
	color: var(--nt-intonaco);
	outline: 1px solid var(--nt-frame-line);
	outline-offset: -6px;
	font: 400 .875rem/1.3 var(--nt-display-caps);
	letter-spacing: .14em;
	text-transform: uppercase;
	--nt-focus: var(--nt-rosso);
}

.nt-hublinks a:hover {
	background: var(--nt-rosso);
	color: var(--nt-intonaco);
}

.nt-hublinks span {
	font-size: .75rem;
	letter-spacing: .24em;
	color: var(--nt-ocra-light);
}

.nt-hublinks a:hover span {
	color: var(--nt-ocra-pale);
}

/* Pages: About, Contact, Privacy, Terms. */
.nt-page {
	max-width: calc(var(--nt-reading) + 2 * var(--nt-gutter));
	margin: 0 auto;
	padding: clamp(28px, 4vw, 56px) var(--nt-gutter) var(--nt-section);
}

.nt-page .nt-article__header {
	margin-bottom: clamp(32px, 4vw, 48px);
}

.nt-page__hero {
	margin: 0 0 clamp(32px, 4vw, 48px);
}

.nt-page__hero img {
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

/* ==========================================================================
   10. Comments
   ========================================================================== */
.nt-comments {
	margin-top: 64px;
	padding-top: 32px;
	border-top: 1px solid var(--nt-nero);
}

.nt-comments__title {
	margin: 0 0 24px;
	font: 400 1.5rem/1.2 var(--nt-display);
}

.nt-comments ol {
	list-style: none;
	margin: 0;
	padding: 0;
}

.nt-comments .children {
	margin-left: 24px;
	padding-left: 18px;
	border-left: 1px solid var(--nt-rule);
}

.nt-comments .comment-body {
	padding: 18px 0;
	border-bottom: 1px solid var(--nt-rule);
}

.nt-comments .comment-meta {
	font-size: .875rem;
	font-style: italic;
	color: var(--nt-muted);
}

.nt-comments .comment-author {
	font-style: normal;
	font-weight: 600;
	color: var(--nt-nero);
}

.nt-comments .avatar {
	display: none;
}

.comment-respond {
	margin-top: 32px;
}

.comment-respond label {
	display: block;
	margin-bottom: 6px;
	font: 400 .75rem/1.3 var(--nt-display-caps);
	letter-spacing: .2em;
	text-transform: uppercase;
}

.comment-respond input[type="text"],
.comment-respond input[type="email"],
.comment-respond input[type="url"],
.comment-respond textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--nt-nero);
	border-radius: 0;
	background: #fbf6ee;
}

.comment-respond .submit {
	padding: 14px 22px;
	border: 0;
	border-radius: 0;
	background: var(--nt-nero);
	color: var(--nt-ocra-light);
	font: 400 .875rem/1 var(--nt-display-caps);
	letter-spacing: .16em;
	text-transform: uppercase;
	cursor: pointer;
}

/* ==========================================================================
   11. Motion and print
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
	}
}

@media print {
	.nt-topband,
	.nt-nav,
	.nt-menu-toggle,
	.nt-aside,
	.nt-toc-mobile,
	.nt-related,
	.nt-footer__cols,
	.nt-skip {
		display: none !important;
	}

	body {
		background: #fff;
	}

	.nt-article__body {
		display: block;
	}

	.nt-prose a::after {
		content: " (" attr(href) ")";
		font-size: .8em;
		color: #555;
	}
}