/*
Theme Name: Aegean Poster
Theme URI: https://athenstourism.org/
Author: Athens Tourism
Author URI: https://athenstourism.org/
Description: Mid-century travel-poster modernism for a city guide. Flat geometric motifs, a four-colour poster palette on cream, 2px ink borders, Marcellus and Outfit. Built for athenstourism.org - category motif system, sticky article contents, verified-on-the-ground stamps and a district taxonomy.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.7
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: athens-tourism
Tags: blog, news, two-columns, custom-menu, custom-logo, featured-images, translation-ready, block-styles, wide-blocks, accessibility-ready
*/

/* Tokens load separately (assets/tokens.css) so the block editor shares them. */

/* ==========================================================================
   1. Reset & base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

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

body {
	margin: 0;
	background: var(--at-cream);
	color: var(--at-body);
	font-family: var(--at-font-text);
	font-weight: 300;
	font-size: var(--at-size-body);
	line-height: 1.75;
	-webkit-font-smoothing: antialiased;
	overflow-wrap: break-word;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
svg { flex: none; }

a { color: inherit; text-decoration: none; transition: color var(--at-transition), background-color var(--at-transition), opacity var(--at-transition); }
a:hover { opacity: .78; }

h1, h2, h3, h4 { font-family: var(--at-font-display); font-weight: 400; text-wrap: pretty; margin: 0; }

p { margin: 0; }

button { font: inherit; color: inherit; }

/* Focus: aegean on light surfaces, ochre wherever the ground is ink. */
:focus-visible { outline: 2px solid var(--at-focus); outline-offset: 2px; }
.at-on-ink :focus-visible,
.at-footer :focus-visible,
.at-footer-slim :focus-visible,
.at-nav-panel :focus-visible { outline-color: var(--at-focus-on-ink); }

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

.at-skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 100;
	background: var(--at-ink); color: var(--at-cream);
	padding: 12px 20px;
	font-family: var(--at-font-text); font-weight: 600; font-size: 14px;
	letter-spacing: .08em; text-transform: uppercase;
}
.at-skip-link:focus { left: 0; opacity: 1; }

/* ==========================================================================
   2. Layout primitives
   ========================================================================== */

.at-site { max-width: var(--at-maxw); margin: 0 auto; background: var(--at-cream); }

.at-section { padding-block: var(--at-section-y); padding-inline: var(--at-gutter); }
.at-section--flush-bottom { padding-block-end: .5rem; }

/* Tri-band divider: four equal bands, at section seams only. */
.at-band { display: flex; height: var(--at-band); }
.at-band span { flex: 1; }
.at-band span:nth-child(1) { background: var(--at-terracotta); }
.at-band span:nth-child(2) { background: var(--at-ochre); }
.at-band span:nth-child(3) { background: var(--at-olive); }
.at-band span:nth-child(4) { background: var(--at-aegean); }
.at-band--rule { width: 180px; height: 8px; }

.at-on-ink { background: var(--at-ink); color: var(--at-on-ink); }

/* ==========================================================================
   3. Type utilities
   ========================================================================== */

.at-kicker {
	font-family: var(--at-font-text);
	font-weight: 600;
	font-size: var(--at-size-kicker);
	letter-spacing: var(--at-ls-kicker);
	text-transform: uppercase;
	line-height: 1.4;
	color: var(--at-terracotta-text);
}
.at-kicker--wide { letter-spacing: .3em; font-size: .78rem; }
.at-kicker--ochre { color: var(--at-ochre); }

.at-meta {
	font-family: var(--at-font-text);
	font-weight: 500;
	font-size: var(--at-size-meta);
	letter-spacing: .1em;
	color: var(--at-muted);
	line-height: 1.5;
}

.at-lede { font-weight: 300; font-size: var(--at-size-lede); line-height: 1.6; max-width: 42ch; }

/* ==========================================================================
   4. Buttons, links, chips
   ========================================================================== */

.at-btn {
	display: inline-block;
	font-family: var(--at-font-text);
	font-weight: 600;
	font-size: .875rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	line-height: 1.2;
	padding: 14px 24px;
	border: 2px solid transparent;
	background: var(--at-btn-primary);
	color: var(--at-cream);
	text-align: center;
	cursor: pointer;
}
.at-btn:hover { background: var(--at-btn-primary-hover); opacity: 1; }

.at-btn--secondary {
	font-weight: 500;
	background: transparent;
	color: var(--at-ink);
	border: var(--at-border);
	padding: 12px 24px;
}
.at-btn--secondary:hover { background: var(--at-ink); color: var(--at-cream); opacity: 1; }

.at-btn--ink { background: var(--at-ink); color: var(--at-cream); }
.at-btn--ink:hover { background: var(--at-ink-hover); opacity: 1; }

.at-textlink {
	font-family: var(--at-font-text);
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--at-terracotta-text);
}
.at-textlink:hover {
	opacity: 1;
	color: var(--at-terracotta-hover);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}
.at-textlink--ochre, .at-textlink--ochre:hover { color: var(--at-ochre); }

.at-chip {
	display: inline-block;
	font-family: var(--at-font-text);
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	line-height: 1.2;
	border: var(--at-border);
	padding: 6px 14px;
}
.at-chip:hover { background: var(--at-ink); color: var(--at-cream); opacity: 1; }
.at-chip--active {
	background: var(--at-ink);
	color: var(--at-cream);
	border-color: var(--at-ink);
	padding: 8px 16px;
}

.at-tag {
	display: inline-block;
	font-family: var(--at-font-text);
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	border: var(--at-border);
	padding: 7px 14px;
	line-height: 1.2;
}
.at-tag:hover { background: var(--at-ink); color: var(--at-cream); opacity: 1; }

/* ==========================================================================
   5. Header & navigation
   ========================================================================== */

.at-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 20px var(--at-gutter);
	border-bottom: var(--at-border);
	background: var(--at-cream);
}

.at-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.at-brand:hover { opacity: 1; }
.at-brand:hover .at-brand__name { color: var(--at-terracotta-text); }
.at-brand__name {
	font-family: var(--at-font-display);
	font-size: 1.125rem;
	letter-spacing: var(--at-ls-wordmark);
	line-height: 1.1;
	transition: color var(--at-transition);
}
.at-brand img { width: auto; max-height: 30px; }

.at-nav > ul {
	display: flex;
	align-items: center;
	gap: 30px;
	list-style: none;
	margin: 0;
	padding: 0;
	font-family: var(--at-font-text);
	font-size: .84rem;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
}
.at-nav a { display: block; padding-block: 3px; border-bottom: 2px solid transparent; }
.at-nav .current-menu-item > a,
.at-nav .current-menu-ancestor > a,
.at-nav .current-menu-parent > a,
.at-nav .current_page_item > a { border-bottom-color: var(--at-terracotta); opacity: 1; }
/* The last item reads as the call to action. */
.at-nav > ul > li:last-child > a { color: var(--at-terracotta-text); }

/* Submenus are bordered slabs - the poster language has no shadows. */
.at-nav li { position: relative; }
.at-nav .sub-menu {
	position: absolute;
	top: 100%;
	left: -14px;
	z-index: 40;
	min-width: 210px;
	list-style: none;
	margin: 0;
	padding: 8px 0;
	background: var(--at-paper);
	border: var(--at-border);
	display: none;
}
.at-nav li:hover > .sub-menu,
.at-nav li:focus-within > .sub-menu { display: block; }
.at-nav .sub-menu a { padding: 8px 16px; border-bottom: 0; letter-spacing: .08em; }
.at-nav .sub-menu a:hover { background: var(--at-sand); opacity: 1; }

.at-burger {
	display: none;
	flex-direction: column;
	gap: 4px;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
	min-width: 44px;
	min-height: 44px;
	align-items: flex-end;
	justify-content: center;
}
/* Only the decorative bars are styled as bars. The button also contains a
   .screen-reader-text label, and matching it with :last-child both stole the
   short-bar rule from the third bar and un-hid the label's box. */
.at-burger span[aria-hidden] { width: 22px; height: 2.5px; background: var(--at-ink); display: block; }
/* The short third bar is a deliberate brand quirk, not a rendering slip. */
.at-burger span[aria-hidden]:nth-of-type(3) { width: 14px; }

.at-nav-panel {
	position: fixed;
	inset: 0;
	z-index: 90;
	background: var(--at-ink);
	color: var(--at-cream);
	padding: 22px var(--at-gutter) 3rem;
	overflow-y: auto;
	display: none;
}
.at-nav-panel[data-open="true"] { display: block; }
.at-nav-panel__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 2.25rem; }
.at-nav-panel__close {
	background: none; border: 0; cursor: pointer;
	color: var(--at-cream);
	font-family: var(--at-font-text); font-size: 1.6rem; line-height: 1;
	min-width: 44px; min-height: 44px;
}
.at-nav-panel ul { list-style: none; margin: 0; padding: 0; }
.at-nav-panel > nav > ul > li > a {
	font-family: var(--at-font-display);
	font-size: 1.75rem;
	letter-spacing: .03em;
	padding: 12px 0;
	display: block;
	border-bottom: 1px solid var(--at-rule-ink);
}
.at-nav-panel .sub-menu { padding: 4px 0 10px 18px; }
.at-nav-panel .sub-menu a {
	font-family: var(--at-font-text);
	font-size: .95rem;
	letter-spacing: .06em;
	padding: 10px 0;
	display: block;
	color: var(--at-on-ink-soft);
}
body.at-nav-open { overflow: hidden; }

/* ==========================================================================
   6. Poster hero
   ========================================================================== */

.at-hero { display: grid; grid-template-columns: .95fr 1.05fr; }
.at-hero__mat {
	background: var(--at-sand);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 60px 40px;
	border-right: var(--at-border);
}
.at-hero__mat svg { width: min(360px, 100%); height: auto; }
.at-hero__body {
	padding: clamp(2.125rem, 1rem + 4.5vw, 4.5rem) clamp(1.5rem, .8rem + 2.8vw, 3.25rem);
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.at-hero__kicker { margin-bottom: 20px; }
.at-hero__title {
	font-size: var(--at-size-display);
	line-height: 1;
	letter-spacing: var(--at-ls-display);
	text-transform: uppercase;
	margin-bottom: 24px;
}
.at-hero__lede { margin-bottom: 38px; }
.at-hero__actions { display: flex; flex-wrap: wrap; gap: 16px; }

/* ==========================================================================
   7. Section headings
   ========================================================================== */

.at-sechead {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: .75rem 1.25rem;
	flex-wrap: wrap;
	margin-bottom: 30px;
}
.at-sechead__title {
	font-family: var(--at-font-display);
	font-weight: 400;
	font-size: var(--at-size-h2-section);
	letter-spacing: .06em;
	text-transform: uppercase;
	line-height: 1.2;
	margin: 0;
}

/* ==========================================================================
   8. Grids, cards, tiles, facts
   ========================================================================== */

.at-grid { display: grid; gap: var(--at-gap-card); }
.at-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.at-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.at-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.at-card {
	border: var(--at-border);
	background: var(--at-paper);
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.at-card:hover { opacity: 1; }
.at-card:hover .at-card__title { color: var(--at-terracotta-text); }

.at-card__media {
	border-bottom: var(--at-border);
	/* Longhand, not the `background` shorthand: the striped fallback sets
	   background-image, and a shorthand here would reset it depending on rule
	   order. Every mat surface in this file follows the same rule. */
	background-color: var(--at-sand);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	aspect-ratio: 16 / 9;
}
.at-card__media img { width: 100%; height: 100%; object-fit: cover; }
.at-card--motif .at-card__media { aspect-ratio: auto; height: 130px; }
.at-card--related .at-card__media { aspect-ratio: auto; height: 120px; }

/* No-featured-image fallback: the striped mat from the comp. */
.at-mat--striped { background-image: repeating-linear-gradient(45deg, rgba(38, 51, 46, .06) 0 12px, transparent 12px 24px); }
.at-mat--sand { background-color: var(--at-sand); }
.at-mat--mist { background-color: var(--at-mist); }
.at-mat--warm { background-color: var(--at-mat-warm); }

.at-card__body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 10px; }
.at-card__body--roomy { padding: 22px 24px 26px; }
.at-card__title {
	font-family: var(--at-font-display);
	font-size: var(--at-size-card-title);
	line-height: 1.3;
	transition: color var(--at-transition);
}
.at-card__title--tracked { letter-spacing: .04em; text-transform: uppercase; }
.at-card__excerpt { font-weight: 300; font-size: .875rem; line-height: 1.55; color: var(--at-body-2); }

/* Districts band */
.at-tilegrid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--at-gap-tile); }
.at-tile { border: var(--at-border-ink-surface); padding: 18px 16px; display: block; min-width: 0; }
.at-tile:hover { background: var(--at-cream); color: var(--at-ink); opacity: 1; }
.at-tile:hover .at-tile__num { color: var(--at-terracotta-text); }
.at-tile__num {
	font-family: var(--at-font-text);
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .2em;
	color: var(--at-ochre);
	margin-bottom: 10px;
	transition: color var(--at-transition);
}
.at-tile__name {
	font-family: var(--at-font-display);
	font-size: 1.125rem;
	letter-spacing: .05em;
	text-transform: uppercase;
	line-height: 1.25;
}

/* Practical strip */
.at-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: var(--at-border); }
.at-facts__cell { padding: 24px 28px; border-right: var(--at-border-thin); min-width: 0; }
.at-facts__cell:last-child { border-right: 0; }
.at-facts__kicker { letter-spacing: .24em; margin-bottom: 8px; }
.at-facts__value { font-family: var(--at-font-display); font-size: 1.25rem; line-height: 1.3; }

/* ==========================================================================
   9. Newsletter - "The Postcard"
   ========================================================================== */

.at-postcard {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: 40px;
	align-items: center;
	background: var(--at-sand);
	padding: 40px var(--at-gutter);
}
.at-postcard__title {
	font-family: var(--at-font-display);
	font-size: 1.75rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	line-height: 1.2;
	margin-bottom: 6px;
}
.at-postcard__blurb { font-weight: 300; font-size: .95rem; line-height: 1.6; }
.at-postcard__form { display: flex; }
.at-postcard__form input[type="email"] {
	font-family: var(--at-font-text);
	font-size: .875rem;
	border: var(--at-border);
	border-right: 0;
	border-radius: 0;
	padding: 13px 18px;
	background: var(--at-paper);
	color: var(--at-ink);
	min-width: 220px;
	width: 100%;
}
.at-postcard__form input::placeholder { color: var(--at-muted); opacity: 1; }
.at-postcard__form button { border: 0; cursor: pointer; padding: 15px 22px; white-space: nowrap; }

/* ==========================================================================
   10. Footer
   ========================================================================== */

.at-footer { background: var(--at-ink); color: var(--at-sand); padding: 44px var(--at-gutter) 30px; }
.at-footer__cols { display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); gap: 40px; margin-bottom: 38px; }
.at-footer__brand { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.at-footer__brand span {
	font-family: var(--at-font-display);
	font-size: .9375rem;
	letter-spacing: .2em;
	color: var(--at-cream);
	line-height: 1.2;
}
.at-footer__blurb { font-weight: 300; font-size: .84rem; line-height: 1.6; max-width: 36ch; color: var(--at-on-ink-soft); }
.at-footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.at-footer__col a { font-family: var(--at-font-text); font-size: .84rem; font-weight: 400; }
.at-footer__heading {
	font-family: var(--at-font-text);
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--at-ochre);
	margin: 0 0 14px;
}
.at-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 24px;
	justify-content: space-between;
	border-top: 1px solid var(--at-rule-ink);
	padding-top: 20px;
	font-family: var(--at-font-text);
	font-size: .75rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--at-on-ink-dim);
}

.at-footer-slim {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	justify-content: space-between;
	align-items: center;
	padding: 18px var(--at-gutter);
	background: var(--at-ink);
	color: var(--at-sand);
	font-family: var(--at-font-text);
	font-size: .78rem;
	letter-spacing: .14em;
	text-transform: uppercase;
}

/* ==========================================================================
   11. Article furniture
   ========================================================================== */

.at-posthead { padding: clamp(2rem, 1.2rem + 3vw, 3.5rem) var(--at-gutter) 0; max-width: 900px; }
.at-posthead__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	align-items: center;
	font-family: var(--at-font-text);
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--at-muted);
	margin-bottom: 22px;
}
.at-posthead__meta a { color: var(--at-terracotta-text); }
.at-posthead__meta a:hover { color: var(--at-terracotta-hover); opacity: 1; }
.at-posthead__title { font-size: var(--at-size-h1); line-height: 1.1; letter-spacing: .01em; margin-bottom: 22px; }
.at-posthead__dek {
	font-weight: 300;
	font-size: var(--at-size-lede);
	line-height: 1.55;
	color: var(--at-body-2);
	max-width: 58ch;
	margin-bottom: 30px;
}

.at-byline { display: flex; align-items: center; gap: 14px; padding-bottom: 34px; }
.at-byline__avatar {
	width: 40px; height: 40px; flex: none;
	border-radius: 50%;
	background: var(--at-olive);
	display: flex; align-items: center; justify-content: center;
	font-family: var(--at-font-display);
	font-size: .9375rem;
	color: var(--at-cream);
	overflow: hidden;
	line-height: 1;
}
.at-byline__avatar img { border-radius: 50%; }
.at-byline__name { font-family: var(--at-font-text); font-size: .875rem; font-weight: 600; line-height: 1.3; }
.at-byline__role { font-family: var(--at-font-text); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--at-muted); }

.at-figure { margin: 0 var(--at-gutter); }
.at-figure__frame {
	border: var(--at-border);
	background-color: var(--at-sand);
	display: flex; align-items: center; justify-content: center;
	overflow: hidden;
}
.at-figure__frame img { width: 100%; height: 100%; object-fit: cover; }
.at-figure--hero .at-figure__frame { aspect-ratio: 1600 / 760; }
.at-figcaption {
	margin-top: 10px;
	font-family: var(--at-font-text);
	font-size: .78rem;
	letter-spacing: .06em;
	color: var(--at-muted);
	line-height: 1.5;
}
/* The comp tints the credit lighter; no tint that light clears AA at this size,
   so the credit is separated by case and tracking rather than by contrast. */
.at-figcaption__credit { text-transform: uppercase; letter-spacing: .14em; }

.at-article-grid {
	display: grid;
	grid-template-columns: var(--at-toc-w) minmax(0, 1fr);
	gap: 56px;
	padding: 48px var(--at-gutter) 56px;
}
.at-article-body { max-width: var(--at-measure); min-width: 0; }

.at-toc { border: var(--at-border); background: var(--at-paper); padding: 22px 24px; position: sticky; top: 20px; }
.at-toc__title { margin-bottom: 16px; letter-spacing: .26em; }
.at-toc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.at-toc a {
	display: block;
	font-family: var(--at-font-text);
	font-size: .875rem;
	font-weight: 400;
	line-height: 1.4;
	color: var(--at-body-2);
	padding-left: 13px;
	border-left: 3px solid transparent;
}
.at-toc a:hover { color: var(--at-ink); opacity: 1; }
.at-toc a[aria-current="true"] {
	color: var(--at-ink);
	font-weight: 600;
	border-left-color: var(--at-terracotta);
	padding-left: 10px;
}

/* ==========================================================================
   12. Prose - shared by the front end and the block editor
   ========================================================================== */

.at-prose { font-weight: 300; font-size: var(--at-size-body); line-height: 1.75; }
.at-prose > * { margin-block: 0 26px; }
.at-prose > *:last-child { margin-bottom: 0; }

.at-prose h2 {
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: var(--at-size-h2);
	letter-spacing: .03em;
	line-height: 1.25;
	margin-block: 40px 18px;
	scroll-margin-top: 24px;
}
.at-prose h3 { font-size: var(--at-size-h3); line-height: 1.35; margin-block: 32px 14px; scroll-margin-top: 24px; }
.at-prose h4 {
	font-family: var(--at-font-text);
	font-weight: 600;
	font-size: 1rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	margin-block: 28px 12px;
}

/* The flat motif glyph that precedes each H2, coloured per category. */
.at-h2glyph { width: 14px; height: 14px; flex: none; display: inline-block; background: var(--at-terracotta); }
.at-h2glyph--circle { border-radius: 50%; background: var(--at-terracotta); }
.at-h2glyph--square { background: var(--at-ochre); outline: 2px solid var(--at-ink); outline-offset: -1px; }
.at-h2glyph--semicircle { background: var(--at-aegean); border-radius: 14px 14px 0 0; height: 9px; }
.at-h2glyph--triangle {
	width: 0; height: 0; background: none;
	border-left: 9px solid transparent;
	border-right: 9px solid transparent;
	border-bottom: 15px solid var(--at-olive);
}
.at-h2glyph--terraces {
	background: none; width: 16px; height: 14px;
	background-image:
		linear-gradient(var(--at-olive), var(--at-olive)),
		linear-gradient(var(--at-olive-light), var(--at-olive-light)),
		linear-gradient(var(--at-aegean), var(--at-aegean));
	background-size: 16px 3.5px, 12px 3.5px, 8px 3.5px;
	background-position: 0 0, 2px 5px, 4px 10px;
	background-repeat: no-repeat;
}

/* Drop cap on the opening paragraph. */
.at-prose > p.at-dropcap::first-letter {
	font-family: var(--at-font-display);
	font-size: 3.25rem;
	line-height: .8;
	float: left;
	padding: 8px 12px 0 0;
	color: var(--at-terracotta);
}

.at-prose a:not(.at-btn):not(.at-tag) {
	color: var(--at-aegean);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
.at-prose a:not(.at-btn):not(.at-tag):hover { text-decoration-thickness: 2px; opacity: 1; }

.at-prose ul, .at-prose ol { padding-left: 22px; display: flex; flex-direction: column; gap: 10px; }
.at-prose li { line-height: 1.7; }
.at-prose strong { font-weight: 600; }

.at-prose blockquote, .at-prose .wp-block-quote {
	margin-block: 30px;
	padding: 34px 0 26px;
	border-top: var(--at-border);
	border-bottom: var(--at-border);
	border-left: 0;
}
.at-prose blockquote p, .at-prose .wp-block-quote p {
	font-family: var(--at-font-display);
	font-weight: 400;
	font-size: var(--at-size-quote);
	line-height: 1.3;
	letter-spacing: .02em;
	margin-bottom: 16px;
}
.at-prose blockquote cite, .at-prose .wp-block-quote cite {
	display: block;
	font-family: var(--at-font-text);
	font-size: .8125rem;
	font-style: normal;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--at-muted);
	margin-top: 14px;
}

/* Tables scroll inside their frame rather than pushing the page sideways. */
.at-prose .wp-block-table, .at-tablewrap {
	border: var(--at-border);
	background: var(--at-paper);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.at-prose .wp-block-table table, .at-tablewrap table { border: 0; }
.at-prose table { width: 100%; border-collapse: collapse; font-family: var(--at-font-text); font-size: .9rem; font-weight: 400; }
.at-prose thead tr { background: var(--at-ink); color: var(--at-cream); text-align: left; }
.at-prose th { padding: 12px 18px; font-weight: 600; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.at-prose td { padding: 13px 18px; border-bottom: 1px solid var(--at-rule); }
.at-prose tbody tr:last-child td { border-bottom: 0; }
.at-prose td:first-child { font-weight: 500; }

.at-prose figure { margin: 0 0 26px; }
.at-prose figure img, .at-prose > img { border: var(--at-border); width: 100%; }
.at-prose figcaption {
	margin-top: 10px;
	font-family: var(--at-font-text);
	font-size: .78rem;
	letter-spacing: .06em;
	color: var(--at-muted);
	line-height: 1.5;
}

.at-prose hr, .at-prose .wp-block-separator {
	border: 0;
	height: 8px;
	width: 180px;
	margin-inline: 0;
	background: linear-gradient(
		90deg,
		var(--at-terracotta) 0 25%,
		var(--at-ochre) 25% 50%,
		var(--at-olive) 50% 75%,
		var(--at-aegean) 75% 100%
	);
}

/* Info box - "Good to know" */
.at-infobox { border: var(--at-border); background: var(--at-paper); }
.at-infobox__head {
	background: var(--at-ochre);
	border-bottom: var(--at-border);
	padding: 9px 18px;
	font-family: var(--at-font-text);
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--at-ink);
}
.at-infobox__body { padding: 16px 18px; font-weight: 300; font-size: .97rem; line-height: 1.65; }
.at-infobox__body > *:last-child { margin-bottom: 0; }

/* Verified-on-the-ground stamp - a theme signature. */
.at-verified {
	display: flex;
	align-items: center;
	gap: 16px;
	border: 2px solid var(--at-olive);
	background: var(--at-verified-bg);
	padding: 16px 20px;
	font-family: var(--at-font-text);
	font-size: .84rem;
	font-weight: 400;
	line-height: 1.5;
	color: var(--at-verified-text);
}
.at-verified strong { font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }

.at-tagrow { display: flex; gap: 10px; flex-wrap: wrap; }

/* Read next / adjacent posts */
.at-readnext { border-top: var(--at-border); background: var(--at-band-readnext); padding: 44px var(--at-gutter) 54px; }
.at-readnext .at-sechead__title { font-size: var(--at-size-h2); }

.at-adjacent { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: var(--at-border); }
.at-adjacent a { padding: 22px var(--at-gutter); display: block; min-width: 0; }
.at-adjacent a:hover { background: var(--at-paper); opacity: 1; }
.at-adjacent__cell--prev { border-right: var(--at-border-thin); }
.at-adjacent__cell--next { text-align: right; }
.at-adjacent__kicker {
	font-family: var(--at-font-text);
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--at-muted);
	margin-bottom: 8px;
}
.at-adjacent__title { font-family: var(--at-font-display); font-size: 1.125rem; line-height: 1.35; }
.at-adjacent--single { grid-template-columns: minmax(0, 1fr); }
.at-adjacent--single .at-adjacent__cell--prev { border-right: 0; }

/* ==========================================================================
   13. Archive, search, pages, comments
   ========================================================================== */

.at-archive-hero {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 48px;
	align-items: center;
	background: var(--at-sand);
	border-bottom: var(--at-border);
	padding: 48px var(--at-gutter);
}
.at-archive-hero__glyph { width: clamp(72px, 11vw, 130px); height: auto; }
.at-archive-hero__kicker { letter-spacing: .28em; font-size: .75rem; margin-bottom: 12px; }
.at-archive-hero__title {
	font-size: var(--at-size-h1-archive);
	line-height: 1;
	letter-spacing: .04em;
	text-transform: uppercase;
	margin-bottom: 14px;
}
.at-archive-hero__desc { font-weight: 300; font-size: 1.0625rem; line-height: 1.55; max-width: 60ch; }
.at-archive-hero__desc p { margin: 0 0 .6em; }
.at-archive-hero__desc p:last-child { margin-bottom: 0; }

.at-chiprow { display: flex; gap: 10px; flex-wrap: wrap; padding: 22px var(--at-gutter); border-bottom: var(--at-border); }

.at-pagination {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
	padding: 8px var(--at-gutter) 48px;
	font-family: var(--at-font-text);
	font-size: .875rem;
	font-weight: 600;
}
.at-pagination .page-numbers {
	width: 42px; height: 42px;
	display: flex; align-items: center; justify-content: center;
	border: var(--at-border);
}
.at-pagination a.page-numbers:hover { background: var(--at-ink); color: var(--at-cream); opacity: 1; }
.at-pagination .page-numbers.current { background: var(--at-ink); color: var(--at-cream); }
.at-pagination .page-numbers.dots { border-color: transparent; color: var(--at-muted); }

.at-empty { padding: clamp(3rem, 8vw, 6rem) var(--at-gutter); max-width: 640px; }
.at-empty__title { font-size: var(--at-size-h1); line-height: 1.15; margin-bottom: 18px; }
.at-empty p { margin-bottom: 26px; color: var(--at-body-2); }

.at-searchform { display: flex; max-width: 460px; }
.at-searchform input[type="search"] {
	font-family: var(--at-font-text);
	font-size: .9rem;
	border: var(--at-border);
	border-right: 0;
	border-radius: 0;
	padding: 12px 16px;
	background: var(--at-paper);
	color: var(--at-ink);
	width: 100%;
	min-width: 0;
}
.at-searchform button { border: 0; cursor: pointer; padding: 14px 20px; white-space: nowrap; }

.at-page { padding: clamp(2rem, 1.2rem + 3vw, 3.5rem) var(--at-gutter) clamp(2.5rem, 5vw, 4rem); }
.at-page__head { max-width: 900px; margin-bottom: 2.25rem; }
.at-page__title { font-size: var(--at-size-h1); line-height: 1.1; }
.at-page .at-prose { max-width: var(--at-measure); }

.at-crumbs {
	padding: 14px var(--at-gutter);
	border-bottom: var(--at-border-thin);
	font-family: var(--at-font-text);
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--at-muted);
}
.at-crumbs a { color: var(--at-terracotta-text); }

.at-comments { padding: 0 var(--at-gutter) clamp(2.5rem, 5vw, 4rem); }
.at-comments__inner { max-width: var(--at-measure); }
.at-comments__title { font-size: var(--at-size-h2); margin-bottom: 24px; }
.at-comments ol { list-style: none; margin: 0 0 32px; padding: 0; }
.at-comments .comment-body { border: var(--at-border); background: var(--at-paper); padding: 20px 22px; margin-bottom: 16px; }
.at-comments .children { list-style: none; padding-left: clamp(1rem, 4vw, 2rem); }
.at-comments .comment-meta { font-family: var(--at-font-text); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--at-muted); margin-bottom: 10px; }
.at-comments .comment-author .fn { font-weight: 600; font-style: normal; color: var(--at-ink); }
.at-comments input:not([type="submit"]), .at-comments textarea {
	font-family: var(--at-font-text);
	font-size: .95rem;
	border: var(--at-border);
	border-radius: 0;
	padding: 12px 16px;
	background: var(--at-paper);
	color: var(--at-ink);
	width: 100%;
	max-width: 100%;
}
.at-comments label { display: block; font-family: var(--at-font-text); font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 6px; }
.at-comments .comment-form-comment,
.at-comments .comment-form-author,
.at-comments .comment-form-email,
.at-comments .comment-form-url { margin-bottom: 18px; }
.at-comments .form-submit input[type="submit"] {
	font-family: var(--at-font-text); font-weight: 600; font-size: .875rem;
	letter-spacing: .08em; text-transform: uppercase;
	background: var(--at-btn-primary); color: var(--at-cream);
	border: 0; border-radius: 0; padding: 14px 24px; cursor: pointer;
}
.at-comments .form-submit input[type="submit"]:hover { background: var(--at-btn-primary-hover); }

/* WordPress core classes */
.alignleft { float: left; margin: 0 1.5rem 1rem 0; }
.alignright { float: right; margin: 0 0 1rem 1.5rem; }
.aligncenter { margin-inline: auto; }
.at-prose .alignwide { width: min(100%, 820px); margin-inline: auto; }
.at-prose .alignfull { width: 100%; }
.wp-caption { max-width: 100%; }
.sticky > .at-card { border-width: 3px; }

/* --------------------------------------------------------------------------
   Block styles registered in inc/blocks.php. These are the same rules the
   editor loads from assets/editor-style.css, so what an editor sees while
   writing is what the article renders.
   -------------------------------------------------------------------------- */

.at-prose .is-style-at-infobox {
	border: var(--at-border);
	border-top: 10px solid var(--at-ochre);
	background: var(--at-paper);
	padding: 16px 18px;
}
.at-prose .is-style-at-infobox > *:last-child { margin-bottom: 0; }

.at-prose .is-style-at-pullquote {
	border-top: var(--at-border);
	border-bottom: var(--at-border);
	border-left: 0;
	padding: 34px 0 26px;
	margin-block: 30px;
}

.at-prose .is-style-at-triband {
	border: 0;
	height: 8px;
	width: 180px;
	margin-inline: 0;
	background: linear-gradient(
		90deg,
		var(--at-terracotta) 0 25%,
		var(--at-ochre) 25% 50%,
		var(--at-olive) 50% 75%,
		var(--at-aegean) 75% 100%
	);
}

.at-prose .is-style-at-steps { gap: 10px; }
.at-prose .is-style-at-steps li strong { font-weight: 600; }

/* ==========================================================================
   14. Responsive
   ========================================================================== */

@media (max-width: 1180px) {
	.at-tilegrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1023px) {
	.at-article-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.at-toc { display: none; }
	.at-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.at-postcard { grid-template-columns: auto minmax(0, 1fr); gap: 24px 28px; }
	.at-postcard__form { grid-column: 1 / -1; }
	.at-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
}

@media (max-width: 900px) {
	.at-nav { display: none; }
	.at-burger { display: flex; }
	.at-hero { grid-template-columns: minmax(0, 1fr); }
	.at-hero__mat { border-right: 0; border-bottom: var(--at-border); padding: 34px 20px; }
	.at-hero__mat svg { width: min(190px, 60%); }
	.at-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.at-facts__cell { border-bottom: var(--at-border-thin); }
	.at-facts__cell:nth-child(2n) { border-right: 0; }
	.at-facts__cell:nth-last-child(-n+2) { border-bottom: 0; }
	.at-archive-hero { grid-template-columns: minmax(0, 1fr); gap: 24px; }
	.at-article-grid { gap: 0; }
}

@media (max-width: 768px) {
	.at-grid--2, .at-grid--3, .at-grid--4 { grid-template-columns: minmax(0, 1fr); }
	.at-tilegrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.at-hero__actions { flex-direction: column; align-items: stretch; }
	.at-hero__actions .at-btn { display: block; }
	.at-adjacent { grid-template-columns: minmax(0, 1fr); }
	.at-adjacent__cell--prev { border-right: 0; border-bottom: var(--at-border-thin); }
	.at-adjacent__cell--next { text-align: left; }
	.at-postcard { grid-template-columns: minmax(0, 1fr); }
	.at-postcard__mark { display: none; }
	.at-footer__cols { grid-template-columns: minmax(0, 1fr); gap: 28px; }
	.at-footer__bottom { flex-direction: column; gap: 8px; }

	/* Essentials become horizontal rows on mobile. */
	.at-card--motif { flex-direction: row; align-items: center; gap: 18px; padding: 16px 18px; }
	.at-card--motif .at-card__media {
		height: auto; width: 52px; flex: none;
		border-bottom: 0; background-color: transparent; background-image: none;
	}
	.at-card--motif .at-card__body { padding: 0; gap: 4px; }
	.at-card--motif .at-card__title { font-size: 1.125rem; }
	.at-card--motif .at-card__excerpt { font-size: .8125rem; }
}

@media (max-width: 420px) {
	.at-tilegrid { grid-template-columns: minmax(0, 1fr); }
	.at-postcard__form, .at-searchform { flex-direction: column; }
	.at-postcard__form input[type="email"] { border-right: var(--at-border); min-width: 0; }
	.at-searchform input[type="search"] { border-right: var(--at-border); }
}

/* ==========================================================================
   15. Print
   ========================================================================== */

@media print {
	.at-header, .at-nav-panel, .at-burger, .at-postcard, .at-readnext,
	.at-adjacent, .at-band, .at-toc, .at-footer, .at-footer-slim,
	.at-chiprow, .at-pagination { display: none !important; }
	body { background: #fff; color: #000; font-size: 11pt; }
	.at-article-grid { display: block; padding: 0; }
	.at-prose a:not(.at-btn) { text-decoration: underline; }
}