/**
 * Global stylesheet — loaded on every request.
 *
 * The real theme CSS lives here rather than in style.css so that per-template
 * stylesheets in assets/css/pages/ can sit alongside it.
 *
 * Contents
 *    1. Tokens
 *    2. Base
 *   2b. Japanese
 *    3. Layout
 *    4. Header and navigation
 *    5. Buttons and forms
 *    6. Section furniture
 *    7. Cards, lists, tables
 *    8. Panels
 *   8b. Contact form
 *    9. Light bands
 *   10. Editor content (prose)
 *   11. Posts and archives
 *   12. Comments
 *   13. Footer
 *   14. Accessibility helpers
 */

/* -------------------------------------------------- 1. Tokens */

/*
 * Short names for the design system. The values come from theme.json — which
 * WordPress emits as --wp--preset--* properties even for a classic theme — so
 * the editor and the front end cannot drift apart. Aliasing them here means
 * rules read as intent (`var(--brand)`) rather than plumbing, and the fallback
 * for a missing global-styles stylesheet is stated once instead of everywhere.
 *
 * Only --brand, --on-brand and the light-band greys are literal colours.
 */
:root {
	--brand: var(--wp--preset--color--accent, #fd4b05);
	--brand-soft: var(--wp--preset--color--accent-soft, #2b1004);
	--on-brand: var(--wp--preset--color--base, #000);

	--bg: var(--wp--preset--color--base, #000);
	--surface: var(--wp--preset--color--surface, #101013);
	--fg: var(--wp--preset--color--contrast, #fff);
	--muted: var(--wp--preset--color--muted, #a3a3ad);
	--rule: var(--wp--preset--color--rule, #2a2a30);
	/* Borders that need to read against a busier background. */
	--rule-strong: var(--rule);
	/* Form validation only. The one colour outside the brand palette: orange is
	   already the "look here" accent, so it cannot also mean "this is wrong".
	   Chosen to clear 4.5:1 on both the black page and the light bands. */
	--danger: #e5484d;

	--font: var(--wp--preset--font-family--system);
	--font-mono: var(--wp--preset--font-family--mono);

	--text-xs: var(--wp--preset--font-size--x-small, 0.8125rem);
	--text-sm: var(--wp--preset--font-size--small, 0.9375rem);
	--text-md: var(--wp--preset--font-size--medium, 1.0625rem);
	--text-lg: var(--wp--preset--font-size--large, 1.25rem);
	--text-xl: var(--wp--preset--font-size--x-large, 1.75rem);
	--text-2xl: var(--wp--preset--font-size--xx-large, 2.25rem);
	--text-3xl: var(--wp--preset--font-size--display, 2.75rem);

	--lh-tight: var(--wp--custom--line-height--tight, 1.15);
	--lh-snug: var(--wp--custom--line-height--snug, 1.3);
	--lh-normal: var(--wp--custom--line-height--normal, 1.65);

	--space-1: var(--wp--preset--spacing--10, 0.5rem);
	--space-2: var(--wp--preset--spacing--20, 1rem);
	--space-3: var(--wp--preset--spacing--30, 1.5rem);
	--space-4: var(--wp--preset--spacing--40, clamp(2rem, 4vw, 3rem));
	--space-5: var(--wp--preset--spacing--50, clamp(3rem, 6vw, 5rem));
	--space-6: var(--wp--preset--spacing--60, clamp(4rem, 9vw, 8rem));

	--radius: 6px;
	--radius-md: 10px;
	--radius-lg: 12px;
	--radius-pill: 999px;

	/* Motion. Used by assets/css/motion.css; kept here so every token in the
	   design system is declared in one block. */
	--motion-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--motion-duration: 0.7s;
	--motion-duration-slow: 0.9s;
	--motion-rise: 1.25rem;

	--wrap: 72rem;
	--wrap-narrow: 43rem;
	/* Line lengths that stay readable however wide --wrap is. */
	--measure: 64ch;
	--measure-lede: 54ch;
	--measure-heading: 22ch;
}

/* -------------------------------------------------- 2. Base */

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

body {
	margin: 0;
	background-color: var(--bg);
	color: var(--fg);
	font-family: var(--font);
	font-size: var(--text-md);
	line-height: var(--lh-normal);
	letter-spacing: -0.005em;
	-webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

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

a {
	color: var(--brand);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

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

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

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 0.5em;
	font-weight: 650;
	line-height: var(--lh-snug);
	letter-spacing: -0.02em;
	text-wrap: balance;
}

h1 {
	max-width: var(--measure-heading);
	font-size: var(--text-2xl);
	line-height: var(--lh-tight);
}

h2 {
	font-size: var(--text-xl);
}

h3 {
	font-size: var(--text-lg);
}

p,
ul,
ol {
	margin: 0 0 1.2em;
}

hr {
	margin: 0;
	border: none;
	border-top: 1px solid var(--rule);
}

table {
	border-collapse: collapse;
}

/* -------------------------------------------------- 2b. Japanese */

/*
 * Japanese typography.
 *
 * Full-width CJK glyphs occupy the whole em box, so they read noticeably larger
 * and heavier than Latin text set at the same size. Left alone, the big display
 * headings overpower the page and wrap badly. The body class comes from
 * ssph_body_classes() in inc/setup.php.
 */
.lang-ja {
	/*
	 * line-break: strict applies kinsoku — the rules that stop a line beginning
	 * with 、 or 。 or a small kana, which is what makes Japanese wrapping look
	 * correct rather than merely fitting.
	 *
	 * break-word rather than anywhere: Japanese already breaks between
	 * characters by default, so `anywhere` buys nothing there and does real
	 * damage to the Latin that runs through this copy ("System Sense Inc.").
	 */
	line-break: strict;
	word-break: normal;
	overflow-wrap: break-word;
}

.lang-ja h1,
.lang-ja h2,
.lang-ja h3,
.lang-ja .hero__title,
.lang-ja .cta-panel__title {
	/* Slightly looser than Latin: CJK needs more room between lines to stay
	   legible, and -0.02em tracking closes up kana far too much. */
	letter-spacing: 0;
	line-height: 1.4;
}

.lang-ja .hero__title {
	font-size: clamp(2rem, 4.5vw, 3.25rem);
}

.lang-ja h1 {
	font-size: clamp(1.75rem, 3.4vw, 2.5rem);
	/* A ch unit is a Latin "0" — meaningless for full-width text, which fits
	   roughly half as many characters per line. */
	max-width: 20em;
}

.lang-ja .lede,
.lang-ja .section p:not(.lede) {
	max-width: 34em;
}

/*
 * The monospaced eyebrow and card meta lines are Latin-styled (uppercase, wide
 * tracking). Japanese has no case, and the tracking just looks broken.
 */
.lang-ja .eyebrow,
.lang-ja .section-label,
.lang-ja .field-label {
	text-transform: none;
	letter-spacing: 0.04em;
}

/* -------------------------------------------------- 3. Layout */

.container {
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	/* Full gutter from ~600px up, easing to 1rem on phones so narrow screens
	   give roughly 16px more usable width per line. */
	padding-inline: clamp(1rem, 4vw, var(--space-3));
}

.container--narrow {
	max-width: var(--wrap-narrow);
}

.site-main {
	padding-block: var(--space-5);
}

/* Templates assembled from section partials: each section brings its own
   vertical padding, so main must not add another layer. */
.site-main--flush {
	padding-block: 0;
}

.grid {
	display: grid;
	grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
	gap: var(--space-3);
	margin-block-start: var(--space-2);
}

.grid--2 {
	--cols: 2;
}

@media (max-width: 782px) {
	.grid {
		--cols: 1;
	}
}

/* -------------------------------------------------- 4. Header and navigation */

.site-header {
	border-bottom: 1px solid var(--rule);
	background-color: var(--bg);
}

.site-header__inner {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding-block: var(--space-3);
}

.brand-logo {
	display: block;
	line-height: 0;
	/* Everything after the logo — nav, CTA, menu button — sits hard right. */
	margin-inline-end: auto;
}

/* The SVG's viewBox handles the aspect ratio, so height is the only knob.
   Clamped so it shrinks rather than crowding out the menu button. */
.brand-logo img {
	display: block;
	width: auto;
	height: clamp(38px, 4.2vw, 52px);
}

.main-navigation {
	display: flex;
	align-items: center;
	gap: var(--space-3);
}

.main-navigation ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.main-navigation a {
	color: var(--muted);
	font-size: var(--text-sm);
	font-weight: 500;
	text-decoration: none;
}

.main-navigation a:hover,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a {
	color: var(--fg);
}

.main-navigation li {
	position: relative;
}

/* Sub-menus: revealed on hover and on keyboard focus. */
.main-navigation .sub-menu {
	position: absolute;
	left: 0;
	top: 100%;
	z-index: 20;
	display: none;
	flex-direction: column;
	gap: var(--space-1);
	min-width: 12rem;
	padding: var(--space-2);
	border: 1px solid var(--rule);
	border-radius: 8px;
	background-color: var(--surface);
}

.main-navigation li:hover > .sub-menu,
.main-navigation li:focus-within > .sub-menu {
	display: flex;
}

/* Language switcher — renders nothing until Polylang is active. */
.lang-switcher {
	gap: var(--space-2) !important;
	padding-inline-start: var(--space-3) !important;
	border-inline-start: 1px solid var(--rule);
	font-family: var(--font-mono);
	font-size: var(--text-xs);
}

.lang-switcher__item.is-current a {
	color: var(--brand);
}

.menu-toggle {
	display: none;
	/* Matches the CTA it sits beside on narrow screens. */
	padding: 0.8em 1.2em;
	border: 1px solid var(--rule);
	border-radius: var(--radius-pill);
	background: transparent;
	color: var(--fg);
	font: inherit;
	font-size: var(--text-sm);
	cursor: pointer;
}

@media (max-width: 782px) {
	.menu-toggle {
		display: block;
	}

	/*
	 * order: 1 moves the nav below the logo, CTA and menu button. Without it the
	 * open nav — which is full width — would wrap mid-row and shunt the CTA and
	 * the button onto a second line as the menu opened.
	 */
	.main-navigation {
		order: 1;
		display: none;
		width: 100%;
		flex-direction: column;
		align-items: flex-start;
	}

	.main-navigation.is-open {
		display: flex;
	}

	.main-navigation ul {
		flex-direction: column;
		gap: var(--space-2);
		padding-block: var(--space-2);
	}

	.main-navigation .sub-menu {
		position: static;
		display: flex;
		padding: 0 0 0 var(--space-2);
		border: none;
		background: transparent;
	}

	.lang-switcher {
		flex-direction: row !important;
		padding-inline-start: 0 !important;
		border-inline-start: 0;
	}

	.site-header__inner {
		flex-wrap: wrap;
	}
}

/* -------------------------------------------------- 5. Buttons and forms */

.button,
input[type="submit"],
button[type="submit"] {
	display: inline-block;
	padding: 0.8em 1.4em;
	border: 1px solid transparent;
	border-radius: var(--radius-pill);
	background-color: var(--brand);
	color: var(--on-brand);
	font-size: var(--text-sm);
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}

/* Inverts to the band's own foreground, so this also works on light bands. */
.button:hover,
input[type="submit"]:hover,
button[type="submit"]:hover {
	background-color: var(--fg);
	color: var(--bg);
}

.button--outline {
	border-color: var(--rule-strong);
	background-color: transparent;
	color: var(--fg);
}

.button--outline:hover {
	border-color: var(--brand);
	background-color: transparent;
	color: var(--brand);
}

.buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: var(--space-3);
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="search"],
input[type="password"],
textarea,
select {
	width: 100%;
	max-width: 100%;
	padding: 0.75em 0.9em;
	border: 1px solid var(--rule);
	border-radius: var(--radius-md);
	background-color: var(--surface);
	color: var(--fg);
	font: inherit;
	font-size: var(--text-sm);
}

input::placeholder,
textarea::placeholder {
	color: var(--muted);
}

.search-form {
	display: flex;
	gap: 0.5rem;
}

/* -------------------------------------------------- 6. Section furniture */

.section {
	padding-block: var(--space-5);
}

/* First section on a page: slightly tighter underneath. */
.section--hero {
	padding-block: var(--space-5) var(--space-4);
}

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

/* :not(.lede) rather than a plain `.section p`, which would outrank .lede on
   specificity and quietly widen every intro paragraph to the full measure. */
.section p:not(.lede) {
	max-width: var(--measure);
}

/*
 * Small uppercase label above a section heading ("Our offices"). A paragraph,
 * not an <h6>: it is a visual label, and putting it in the heading outline
 * would leave every section starting at level 6 and jumping back to 2.
 */
.section-label {
	margin: 0 0 0.5em;
	color: var(--brand);
	font-size: var(--text-xs);
	font-weight: 650;
	line-height: var(--lh-snug);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

/* Monospaced label above a page's h1. */
.eyebrow {
	margin: 0 0 1em;
	color: var(--brand);
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	text-transform: uppercase;
	letter-spacing: 0.12em;
}

/* Used on service pages to point back up to the index. */
.eyebrow a {
	text-decoration: none;
}

.lede {
	max-width: var(--measure-lede);
	color: var(--muted);
	font-size: var(--text-lg);
}

/*
 * Hero headings.
 *
 * Every page uses the plain h1 size (--text-2xl, set in section 2) so the
 * inner pages are consistent with each other. The home page is the single
 * exception: it opts into the larger display size with .hero__title. Do not
 * add .hero__title to another template — that is what made the sizes drift.
 */
.hero__title {
	font-size: var(--text-3xl);
	line-height: 1.06;
}

.section__subhead {
	margin-top: var(--space-3);
}

/* -------------------------------------------------- 7. Cards, lists, tables */

.card {
	padding: var(--space-3);
	border: 1px solid var(--rule);
	border-radius: var(--radius-md);
}

.card--accent {
	border-color: var(--brand);
}

.card__meta {
	margin-bottom: 0.4em;
	color: var(--brand);
	font-family: var(--font-mono);
	font-size: var(--text-xs);
}

.card__title {
	margin-bottom: 0.4em;
}

/*
 * A card whose title is a link. The anchor is stretched over the whole tile so
 * all of it is clickable, while the link text stays the accessible name — no
 * nested interactive elements and no duplicate "read more".
 */
.card--link {
	position: relative;
	transition: border-color 0.15s ease;
}

.card--link:hover {
	border-color: var(--brand);
}

.card--link .card__title a {
	color: inherit;
	text-decoration: none;
}

.card--link .card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.card--link:hover .card__title a {
	color: var(--brand);
}

/*
 * :not(.card__meta) rather than a plain `.card p`, which would outrank the
 * .card__meta rule above on specificity and grey out the brand-coloured label.
 * Same trap as `.section p:not(.lede)`.
 */
.card p:not(.card__meta) {
	margin-bottom: 0;
	color: var(--muted);
	font-size: var(--text-sm);
}

.checklist {
	padding-left: 0;
	list-style: none;
}

.checklist li {
	position: relative;
	margin-bottom: 0.5em;
	padding-left: 1.6em;
	font-size: var(--text-md);
}

/* Tick drawn with two borders rather than a glyph, so it inherits no font. */
.checklist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 0.6em;
	height: 0.3em;
	border-left: 2px solid var(--brand);
	border-bottom: 2px solid var(--brand);
	transform: rotate(-45deg);
}

/*
 * Two-column specification table. Row labels sit in a <th scope="row"> so the
 * pairing is exposed to screen readers rather than being purely visual.
 */
.spec-table {
	margin: 0;
}

.spec-table table {
	width: 100%;
}

.spec-table th,
.spec-table td {
	padding: 0.9em 0;
	border: 0;
	border-bottom: 1px solid var(--rule);
	text-align: start;
	vertical-align: top;
}

.spec-table tr:first-child th,
.spec-table tr:first-child td {
	border-top: 1px solid var(--rule);
}

.spec-table th {
	width: 32%;
	padding-inline-end: var(--space-3);
	color: var(--muted);
	font-size: var(--text-xs);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.spec-table td {
	color: var(--fg);
	font-size: var(--text-sm);
}

/* Stack the pairs rather than squeezing two columns onto a phone. */
@media (max-width: 600px) {
	.card {
		padding: var(--space-2);
	}

	.spec-table th,
	.spec-table td {
		display: block;
		width: 100%;
	}

	.spec-table th {
		padding-block-end: 0.2em;
		border-bottom: 0;
	}

	.spec-table tr:first-child td {
		border-top: 0;
	}
}

/* -------------------------------------------------- 8. Panels */

.section--cta {
	padding-block: var(--space-4) var(--space-5);
}

.cta-panel,
.contact-card {
	border: 1px solid var(--brand);
	border-radius: var(--radius-lg);
	background-color: var(--surface);
}

.cta-panel {
	padding: var(--space-5) var(--space-4);
}

.cta-panel__title {
	font-size: var(--text-2xl);
}

.contact-card {
	padding: var(--space-4);
}

.contact-card__title {
	font-size: var(--text-lg);
}

/*
 * Phone and email are links, so they would default to brand. Inside the card
 * they read as plain detail text matching the address, brand kept for hover.
 */
.contact-card a {
	color: var(--fg);
	text-decoration: none;
}

.contact-card a:hover {
	color: var(--brand);
}

.field-label {
	margin: 0 0 var(--space-1);
	color: var(--brand);
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.field-value {
	margin: 0 0 var(--space-3);
}

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

@media (max-width: 600px) {
	.cta-panel,
	.contact-card {
		padding-inline: 1.25rem;
	}
}

/* -------------------------------------------------- 8b. Contact form */

/*
 * The form and the contact card sit side by side under the hero. Both are grid
 * children, which is what stretches the card to the form's height without a
 * fixed height anywhere.
 */
.contact-layout {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: var(--space-4);
	margin-top: var(--space-4);
}

@media (max-width: 782px) {
	.contact-layout {
		grid-template-columns: 1fr;
	}
}

.contact-form {
	display: grid;
	gap: var(--space-3);
}

.form-field {
	margin: 0;
}

.form-field label {
	display: block;
	margin-bottom: 0.5em;
	color: var(--fg);
	font-size: var(--text-sm);
	font-weight: 500;
}

.form-field__optional {
	color: var(--muted);
	font-weight: 400;
}

.form-field__error {
	display: block;
	margin-top: 0.4em;
	color: var(--danger);
	font-size: var(--text-xs);
}

.form-field [aria-invalid="true"] {
	border-color: var(--danger);
}

.form-actions {
	margin: 0;
}

/*
 * Honeypot. Positioned off-screen rather than display:none — some bots skip
 * fields that are not rendered, and this one is meant to be irresistible.
 * aria-hidden and tabindex="-1" keep it away from real visitors.
 */
.form-honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.form-notice {
	margin: 0 0 var(--space-3);
	padding: var(--space-3);
	border: 1px solid var(--rule);
	border-left-width: 3px;
	border-radius: var(--radius);
	font-size: var(--text-sm);
}

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

.form-notice--ok {
	border-left-color: var(--brand);
	background-color: var(--surface);
}

.form-notice--error {
	border-left-color: var(--danger);
}

.form-notice ul {
	margin: 0.6em 0 0;
	padding-left: 1.2em;
}

/* -------------------------------------------------- 9. Light bands */

/*
 * White sections used to break up the black page.
 *
 * This reassigns the tokens rather than restating every rule: anything inside
 * that already reads --fg, --muted, --rule or --surface re-colours on its own.
 * --brand and --on-brand are deliberately left alone so the orange and the
 * button label stay constant on both backgrounds.
 */
.section--light {
	--bg: #ffffff;
	--fg: #14161a;
	--muted: #3f4650;
	--rule: #e2e5ea;
	--rule-strong: #c9ced6;
	--surface: #f6f7f9;

	background-color: var(--bg);
	color: var(--muted);
}

.section--light :is(h1, h2, h3, h4, h5) {
	color: var(--fg);
}

/* -------------------------------------------------- 10. Editor content */

/*
 * Prose written in the Classic editor — ordinary pages, and posts once the
 * blog is switched on. The designed marketing pages do not use this.
 */

.page-header {
	margin-bottom: var(--space-4);
}

.page-title {
	margin-bottom: 0.3em;
}

.entry-content > :first-child {
	margin-top: 0;
}

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

.entry-content :is(h2, h3, h4) {
	margin-top: 1.6em;
}

.entry-content img {
	border-radius: 8px;
}

.entry-content blockquote {
	margin: 1.5em 0;
	padding-left: var(--space-3);
	border-left: 2px solid var(--brand);
	font-size: var(--text-lg);
}

.entry-content :is(code, pre) {
	font-family: var(--font-mono);
	font-size: var(--text-sm);
}

.entry-content pre {
	overflow-x: auto;
	padding: var(--space-2);
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	background-color: var(--surface);
}

.entry-content figcaption {
	color: var(--muted);
	font-size: var(--text-xs);
	text-align: start;
}

/* -------------------------------------------------- 11. Posts and archives */

.entry {
	padding-bottom: var(--space-4);
}

.entry + .entry {
	padding-top: var(--space-4);
	border-top: 1px solid var(--rule);
}

.entry-title {
	margin-bottom: 0.3em;
}

.entry-title a {
	color: var(--fg);
	text-decoration: none;
}

.entry-title a:hover {
	color: var(--brand);
}

.entry-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-bottom: 0.8em;
	color: var(--muted);
	font-size: var(--text-xs);
}

.entry-meta time {
	font-family: var(--font-mono);
}

.entry-summary {
	color: var(--muted);
}

.post-thumbnail {
	margin: 0 0 var(--space-3);
}

.post-thumbnail img {
	border-radius: 8px;
}

.pagination {
	margin-top: var(--space-5);
	font-size: var(--text-sm);
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.pagination .page-numbers {
	padding: 0.4em 0.8em;
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	text-decoration: none;
}

.pagination .page-numbers.current {
	border-color: var(--brand);
	color: var(--brand);
}

.post-navigation {
	margin-top: var(--space-4);
	padding-top: var(--space-4);
	border-top: 1px solid var(--rule);
	font-size: var(--text-sm);
}

.post-navigation .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--space-2);
}

.post-navigation .nav-subtitle {
	display: block;
	color: var(--muted);
	font-size: var(--text-xs);
}

/* -------------------------------------------------- 12. Comments */

.comments-area {
	margin-top: var(--space-5);
	padding-top: var(--space-5);
	border-top: 1px solid var(--rule);
}

.comment-list,
.comment-list ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

.comment-list ol {
	padding-left: var(--space-3);
}

.comment-body {
	padding-block: var(--space-2);
	border-bottom: 1px solid var(--rule);
	font-size: var(--text-sm);
}

.comment-meta {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-bottom: 0.5em;
	color: var(--muted);
	font-size: var(--text-xs);
}

.comment-meta img {
	border-radius: 50%;
}

.comment-form p {
	margin-bottom: 1em;
}

.comment-form label {
	display: block;
	margin-bottom: 0.3em;
	color: var(--muted);
	font-size: var(--text-xs);
}

/* -------------------------------------------------- 13. Footer */

.site-footer {
	/* No top margin: the last section already contributes its bottom padding,
	   and stacking both left a very large gap above the footer. */
	padding-block: var(--space-5) var(--space-4);
	border-top: 1px solid var(--rule);
}

.site-footer__widgets {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: var(--space-4);
}

@media (max-width: 782px) {
	.site-footer__widgets {
		grid-template-columns: 1fr;
	}
}

.site-footer .widget ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer .widget li,
.site-footer .widget a {
	color: var(--muted);
	font-size: var(--text-sm);
}

.site-footer .widget li + li {
	margin-top: 0.4em;
}

.site-footer .widget a {
	text-decoration: none;
}

.site-footer .widget a:hover {
	color: var(--fg);
}

.site-footer .widget-title {
	color: var(--muted);
	font-size: var(--text-xs);
	font-weight: 650;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.site-footer__blurb {
	max-width: 34ch;
	margin: var(--space-2) 0 0;
	color: var(--muted);
	font-size: var(--text-sm);
}

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--space-2);
	margin-top: var(--space-4);
	color: var(--muted);
	font-size: var(--text-xs);
}

.site-footer__bottom p {
	margin: 0;
}

/* -------------------------------------------------- 14. Accessibility helpers */

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

.skip-link {
	position: absolute;
	left: -9999rem;
	top: 0;
	z-index: 999999;
}

.skip-link:focus {
	left: 0;
	width: auto;
	height: auto;
	padding: 0.7em 1.2em;
	clip-path: none;
	background-color: var(--surface);
	color: var(--fg);
}