/*
Theme Name:   anikyusuf (GeneratePress child)
Theme URI:    https://anikyusuf.com/
Description:  Software review theme for anikyusuf.com (light editorial, 2026-10-25 redesign). Source of truth: site build/anikyusuf-gp/ in the anikyusuf-rankspin repo. Deploy with site build/tools/deploy_theme.sh.
Template:     generatepress
Version:      2.0.0
Text Domain:  anikyusuf-gp
*/

/* ---------- Fonts (self-hosted variable woff2, latin subset, OFL; fontsource 5.3.0) ---------- */
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("assets/fonts/bricolage-grotesque-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("assets/fonts/inter-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 100 900; font-display: swap; src: url("assets/fonts/inter-latin-wght-italic.woff2") format("woff2"); }

/* ---------- Tokens (light editorial, owner reset 2026-10-25) ----------
   One signature: the editor's highlighter (--ay-mark). It marks links, the
   blanks in the format names, the top pick and button hovers. It is never
   used for text. Actions are graphite; focus rings are blue for visibility.
   Radius rule: cards 14px, controls 10px, pills fully round. */
:root {
	--ay-ink: #14161B;          /* headings, buttons, dark band */
	--ay-text: #2A2E36;         /* body copy (13.9:1 on white) */
	--ay-muted: #5B616E;        /* secondary text (6.3:1 on white) */
	--ay-paper: #FFFFFF;
	--ay-panel: #F3F4F6;
	--ay-panel-2: #E9EBEF;
	--ay-line: #E2E5EA;
	--ay-line-strong: #C9CED6;
	--ay-mark: #FFD84D;         /* highlighter */
	--ay-mark-soft: #FFEFAE;
	--ay-focus: #2563EB;
	--ay-pro: #16A34A;
	--ay-pro-text: #15803D;     /* AA for text */
	--ay-con: #DC2626;
	--ay-white: #fff;
	--ay-head: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
	--ay-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	--ay-wrap: 1240px;
	--ay-gutter: clamp(20px, 4vw, 40px);
	--ay-bar-h: 68px;
	--ay-r-card: 14px;
	--ay-r-ctl: 10px;
	--ay-shadow: 0 1px 2px rgba(20, 22, 27, .05), 0 12px 32px -18px rgba(20, 22, 27, .22);
	--ay-sticky-top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--ay-bar-h) + 28px);
}

/* ---------- Base (overrides GP's dynamic CSS) ---------- */
html { scroll-behavior: smooth; }
body.ay {
	font-family: var(--ay-body);
	font-size: 17px;
	line-height: 1.65;
	color: var(--ay-text);
	background: var(--ay-paper);
	-webkit-font-smoothing: antialiased;
	font-feature-settings: "cv11", "ss01";
	text-rendering: optimizeLegibility;
}
.ay :is(h1, h2, h3, h4, h5, h6) { font-family: var(--ay-head); color: var(--ay-ink); letter-spacing: -.02em; font-weight: 700; }
.ay a { color: var(--ay-ink); }
.ay a:hover { color: var(--ay-ink); }
.ay :focus-visible { outline: 2px solid var(--ay-focus); outline-offset: 3px; border-radius: 4px; }
.ay img { max-width: 100%; height: auto; }
.ay ::selection { background: var(--ay-mark); color: var(--ay-ink); }

/* Border-box everywhere in theme markup (GP leaves links/buttons content-box) */
.ay *, .ay *::before, .ay *::after { box-sizing: border-box; }

/* GP containers: this theme brings its own widths */
.ay .site.grid-container { max-width: none; padding: 0; }
.ay .site-content { display: block; padding: 0; }
.ay .site { background: transparent; }

.ay-wrap { max-width: var(--ay-wrap); margin: 0 auto; padding-left: var(--ay-gutter); padding-right: var(--ay-gutter); box-sizing: content-box; }

/* Skip link (GP prints it; make it a visible pill on focus) */
.ay .skip-link.screen-reader-text:focus {
	position: fixed; top: 12px; left: 12px; z-index: 1000;
	clip: auto; clip-path: none; width: auto; height: auto;
	padding: 10px 16px; background: var(--ay-ink); color: #fff;
	font-weight: 600; font-size: 15px; border-radius: var(--ay-r-ctl); text-decoration: none;
}

/* ---------- Buttons, pills, text links ---------- */
.ay-btn, .ay .ay-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 44px; padding: 10px 18px;
	background: var(--ay-ink); color: #fff !important;
	font-family: var(--ay-body); font-weight: 600; font-size: 15px; line-height: 1.2;
	text-decoration: none; border-radius: var(--ay-r-ctl); border: 1px solid var(--ay-ink);
	white-space: nowrap; cursor: pointer; transition: background-color .15s ease, color .15s ease;
}
.ay-btn:hover, .ay .ay-btn:hover, .ay .ay-btn:focus-visible { background: var(--ay-mark); color: var(--ay-ink) !important; }
.ay-btn--lg, .ay .ay-btn--lg { min-height: 52px; padding: 12px 24px; font-size: 16px; }
.ay-btn--block { display: flex; width: 100%; }
.ay-btn .ay-icon { width: 16px; height: 16px; }

.ay-pill {
	display: inline-flex; align-items: center;
	padding: 4px 12px; border-radius: 999px;
	background: var(--ay-paper); color: var(--ay-ink); border: 1px solid var(--ay-line-strong);
	font-size: 13px; font-weight: 600; line-height: 1.4; text-decoration: none;
}
.ay a.ay-pill:hover { background: var(--ay-mark-soft); border-color: var(--ay-ink); }

/* Highlighter link: a marker stroke under the words that fills on hover */
.ay .ay-textlink, .ay .entry-content a:not(.wp-block-button__link):not(.ay-btn) {
	color: var(--ay-ink); text-decoration: none; font-weight: 600;
	background: linear-gradient(var(--ay-mark), var(--ay-mark)) 0 100% / 100% .32em no-repeat;
	transition: background-size .15s ease;
}
.ay .entry-content a:not(.wp-block-button__link):not(.ay-btn) { font-weight: inherit; }
.ay .ay-textlink:hover, .ay .entry-content a:not(.wp-block-button__link):not(.ay-btn):hover { background-size: 100% 100%; }

/* ======================================================================
   Header
   ====================================================================== */
.ay-header {
	position: sticky; top: var(--wp-admin--admin-bar--height, 0px); z-index: 100;
	background: rgba(255, 255, 255, .96);
	-webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px);
	border-bottom: 1px solid var(--ay-line);
}
.ay-header__bar { display: flex; align-items: center; gap: 12px 24px; min-height: var(--ay-bar-h); }
.ay-wordmark {
	flex: none;
	font-family: var(--ay-head); font-weight: 800; font-size: 26px; letter-spacing: -.04em; line-height: 1;
	color: var(--ay-ink) !important; text-decoration: none;
}
/* the dot is a highlighter dot */
.ay-wordmark span {
	display: inline-block; width: .3em; height: .3em; margin-left: .06em; overflow: hidden;
	border-radius: 50%; background: var(--ay-mark); box-shadow: 0 0 0 1.5px var(--ay-ink); color: transparent;
}

.ay-menu { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
.ay-menu a {
	display: flex; align-items: center; min-height: 40px; padding: 0 12px;
	color: var(--ay-text); font-size: 15px; font-weight: 500; text-decoration: none; border-radius: 8px;
}
.ay-menu a:hover { color: var(--ay-ink); background: var(--ay-panel); }
.ay-menu .is-current > a, .ay-menu .current-menu-item > a { color: var(--ay-ink); box-shadow: inset 0 -3px 0 var(--ay-mark); border-radius: 0; }

.ay-burger { display: none; }
.ay-header .ay-burger,
.ay-header .ay-burger:hover,
.ay-header .ay-burger:focus {
	align-items: center; gap: 10px; margin-left: auto;
	min-height: 44px; padding: 0 14px;
	background: var(--ay-white); color: var(--ay-ink);
	border: 1px solid var(--ay-line); border-radius: var(--ay-r-ctl);
	font: 600 15px/1 var(--ay-body); cursor: pointer;
}
.ay-burger__icon { display: grid; gap: 5px; width: 18px; }
.ay-burger__icon span { display: block; height: 2px; background: currentColor; border-radius: 2px; transition: transform .2s ease; }
.ay-drawer-open .ay-burger__icon span:first-child { transform: translateY(3.5px) rotate(45deg); }
.ay-drawer-open .ay-burger__icon span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

/* dropdown toggles */
.ay-header .ay-subtoggle, .ay-header .ay-subtoggle:hover, .ay-header .ay-subtoggle:focus {
	display: inline-flex; align-items: center; gap: 6px; padding: 0 6px; min-height: 40px;
	background: none; color: var(--ay-muted); border: 0; border-radius: 8px; cursor: pointer; font: 500 15px var(--ay-body);
}
.ay-header .ay-subtoggle--label, .ay-header .ay-subtoggle--label:hover, .ay-header .ay-subtoggle--label:focus { padding: 0 12px; color: var(--ay-text); }
.ay-header .ay-subtoggle--label:hover { color: var(--ay-ink); background: var(--ay-panel); }
.ay-subtoggle svg { transition: transform .15s ease; }
.ay-menu .is-open > .ay-subtoggle svg { transform: rotate(180deg); }
.ay-sub { margin: 0; padding: 0; list-style: none; }
.ay-menu .is-current > .ay-subtoggle--label { color: var(--ay-ink); box-shadow: inset 0 -3px 0 var(--ay-mark); border-radius: 0; }

/* header search (details disclosure, no JS) */
.ay-hsearch { position: relative; flex: none; }
.ay-hsearch summary {
	display: grid; place-items: center; width: 44px; height: 44px; list-style: none; cursor: pointer;
	color: var(--ay-ink); border: 1px solid var(--ay-line); border-radius: var(--ay-r-ctl);
}
.ay-hsearch summary::-webkit-details-marker { display: none; }
.ay-hsearch summary:hover, .ay-hsearch[open] summary { background: var(--ay-panel); border-color: var(--ay-line-strong); }
.ay-hsearch__form {
	position: absolute; right: 0; top: calc(100% + 10px); z-index: 20; display: flex; gap: 8px;
	width: min(420px, calc(100vw - 2 * var(--ay-gutter))); padding: 10px;
	background: var(--ay-paper); border: 1px solid var(--ay-line); border-radius: var(--ay-r-card); box-shadow: var(--ay-shadow);
}
.ay .ay-hsearch__form input[type=search] {
	flex: 1; min-width: 0; min-height: 44px; padding: 0 14px;
	background: var(--ay-paper); color: var(--ay-text); border: 1px solid var(--ay-line-strong); border-radius: var(--ay-r-ctl); font: 16px var(--ay-body);
}

@media (min-width: 960px) {
	.ay-nav { flex: 1; display: flex; justify-content: flex-end; }
	.ay-hsearch { order: 2; }
	.ay-btn--bar { order: 3; }
	.ay .ay-btn--drawer { display: none; }
	.ay-menu > li { position: relative; display: flex; align-items: center; }
	.ay-menu > li.has-sub > a { padding-right: 2px; }
	.ay-sub {
		position: absolute; top: calc(100% + 8px); left: 0; z-index: 10; min-width: 240px; padding: 8px;
		background: var(--ay-white); border: 1px solid var(--ay-line); border-radius: var(--ay-r-card); box-shadow: var(--ay-shadow);
		visibility: hidden; opacity: 0; transform: translateY(4px); transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
	}
	.ay-sub::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; } /* hover bridge */
	.ay-menu > li:hover > .ay-sub, .ay-menu > li:focus-within > .ay-sub, .ay-menu > li.is-open > .ay-sub { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
	.ay-sub a { min-height: 40px; padding: 0 12px; font-size: 15px; white-space: nowrap; }
}
@media (max-width: 959px) {
	:root { --ay-bar-h: 60px; }
	.ay-header .ay-burger { display: inline-flex; }
	.ay .ay-btn--bar { display: none; }
	.ay-header__bar { position: relative; }
	.ay-hsearch { margin-left: auto; position: static; }
	.ay-header .ay-burger, .ay-header .ay-burger:hover, .ay-header .ay-burger:focus { margin-left: 0; }
	.ay-hsearch__form { right: var(--ay-gutter); }
	.ay-nav {
		position: fixed; left: 0; right: 0; bottom: 0;
		top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--ay-bar-h) + 1px);
		display: none; flex-direction: column; gap: 24px;
		padding: 20px var(--ay-gutter) 32px;
		background: var(--ay-white); overflow-y: auto;
	}
	.ay-drawer-open .ay-nav { display: flex; }
	.ay-drawer-open body { overflow: hidden; }
	.ay-menu { flex-direction: column; gap: 0; }
	.ay-menu > li { display: flex; flex-wrap: wrap; align-items: center; border-bottom: 1px solid var(--ay-line); }
	.ay-menu > li > a { flex: 1; }
	.ay-header .ay-subtoggle { min-height: 56px; padding: 0 10px; }
	.ay-header .ay-subtoggle--label, .ay-header .ay-subtoggle--label:hover, .ay-header .ay-subtoggle--label:focus { flex: 1; justify-content: space-between; padding: 0 4px; font: 600 22px var(--ay-head); color: var(--ay-ink); box-shadow: none; }
	.ay-sub { display: none; width: 100%; padding: 0 0 12px 12px; }
	.ay-menu > li.is-open > .ay-sub { display: block; }
	.ay-menu .ay-sub a { min-height: 44px; font-family: var(--ay-body); font-size: 17px; font-weight: 500; color: var(--ay-text); }
	.ay-menu a { min-height: 56px; padding: 0 4px; font-family: var(--ay-head); font-size: 22px; font-weight: 600; color: var(--ay-ink); border-radius: 0; box-shadow: none !important; }
	.ay-menu a:hover { background: none; }
	.ay-btn--drawer { min-height: 52px; font-size: 16px; }
}

/* ======================================================================
   Page hero (posts, pages, archives, 404): light, hairline below
   ====================================================================== */
.ay-hero { background: var(--ay-paper); color: var(--ay-text); border-bottom: 1px solid var(--ay-line); }
.ay-hero__inner { padding-top: clamp(40px, 6vw, 80px); padding-bottom: clamp(36px, 5vw, 64px); }
.ay-hero__inner > .ay-pill { margin-bottom: 22px; }
.ay .ay-hero__title {
	max-width: 22ch; margin: 0;
	color: var(--ay-ink); font-weight: 700; font-size: clamp(36px, 5vw, 64px); line-height: 1.04; letter-spacing: -.035em;
	text-wrap: balance;
}
.ay-hero__dek { max-width: 680px; margin: 20px 0 0; color: var(--ay-muted); font-size: clamp(17px, 1.6vw, 20px); line-height: 1.6; text-wrap: pretty; }
.ay-hero__meta { margin-top: 20px; color: var(--ay-muted); font-size: 14.5px; }

/* byline + disclosure */
.ay-byline { display: flex; align-items: center; gap: 14px; margin-top: 32px; }
.ay-avatar { display: block; flex: none; border-radius: 50%; object-fit: cover; background: var(--ay-panel); }
.ay-avatar--sm { width: 44px; height: 44px; }
.ay-avatar--lg { width: 72px; height: 72px; }
.ay-byline .ay-avatar { box-shadow: 0 0 0 2px var(--ay-paper), 0 0 0 3.5px var(--ay-mark); }
.ay-byline__text { display: flex; flex-direction: column; gap: 2px; margin: 0; font-size: 15px; line-height: 1.45; }
.ay-byline__name { color: var(--ay-ink); font-weight: 600; }
.ay-byline__name a { color: var(--ay-ink) !important; text-decoration: none; background: linear-gradient(var(--ay-mark), var(--ay-mark)) 0 100% / 100% .3em no-repeat; }
.ay-byline__facts { display: flex; flex-wrap: wrap; gap: 4px 16px; color: var(--ay-muted); font-size: 14px; }
.ay-byline__facts span + span { padding-left: 16px; border-left: 1px solid var(--ay-line-strong); }

.ay-disclose {
	display: flex; align-items: flex-start; gap: 10px;
	max-width: 720px; margin: 24px 0 0; padding: 14px 16px;
	background: var(--ay-mark-soft); border-radius: var(--ay-r-ctl);
	color: var(--ay-text); font-size: 14.5px; line-height: 1.5;
}
.ay-disclose .ay-icon { flex: none; margin-top: 1px; color: var(--ay-ink); }
.ay-disclose strong { color: var(--ay-ink); font-weight: 650; }
.ay-disclose a { margin-left: 6px; font-weight: 600; }

/* ======================================================================
   Article layout: TOC | body | rail
   ====================================================================== */
.ay-layout { display: grid; gap: 28px; padding-top: 40px; padding-bottom: 72px; grid-template-columns: minmax(0, 1fr); }
.ay-body { min-width: 0; max-width: 720px; }
.ay-toc { min-width: 0; }
.ay-layout--single .ay-body { margin: 0 auto; width: 100%; }

@media (max-width: 959px) {
	/* phones/tablets: TOC (collapsed) and verdict above the article, "Start here" after it */
	.ay-layout:not(.ay-layout--verdict) .ay-rail { order: 3; }
	.ay-body { margin: 0 auto; width: 100%; }
}
@media (min-width: 960px) and (max-width: 1279px) {
	.ay-layout { grid-template-columns: minmax(0, 1fr) 300px; column-gap: 48px; }
	.ay-toc { grid-column: 1; grid-row: 1; }
	.ay-body { grid-column: 1; grid-row: 2; }
	.ay-rail { grid-column: 2; grid-row: 1 / span 2; }
	.ay-layout--no-toc .ay-body { grid-row: 1; }
	.ay-layout--no-rail { grid-template-columns: minmax(0, 720px); justify-content: center; }
}
@media (min-width: 1280px) {
	.ay-layout { grid-template-columns: 210px minmax(0, 700px) 290px; column-gap: 40px; justify-content: space-between; padding-top: 56px; }
	.ay-toc { grid-column: 1; grid-row: 1; }
	.ay-body { grid-column: 2; grid-row: 1; }
	.ay-rail { grid-column: 3; grid-row: 1; }
	.ay-layout--no-toc { grid-template-columns: minmax(0, 720px) 300px; column-gap: 56px; justify-content: space-between; }
	.ay-layout--no-toc .ay-body { grid-column: 1; }
	.ay-layout--no-toc .ay-rail { grid-column: 2; }
	.ay-layout--no-rail { grid-template-columns: 210px minmax(0, 720px); column-gap: 72px; justify-content: start; }
	.ay-layout--no-toc.ay-layout--no-rail { grid-template-columns: minmax(0, 720px); justify-content: center; }
	.ay-toc, .ay-rail { position: sticky; top: var(--ay-sticky-top); align-self: start; }
	.ay-toc { max-height: calc(100vh - var(--ay-sticky-top) - 24px); overflow: auto; }
}
@media (min-width: 960px) and (max-width: 1279px) {
	.ay-rail { position: sticky; top: var(--ay-sticky-top); align-self: start; }
}

/* TOC */
.ay-toc__box summary {
	list-style: none; cursor: pointer;
	font-family: var(--ay-head); font-weight: 700; font-size: 15px; color: var(--ay-ink);
}
.ay-toc__box summary::-webkit-details-marker { display: none; }
.ay-toc ol { margin: 14px 0 0; padding: 0; list-style: none; border-left: 1px solid var(--ay-line); }
.ay-toc li { margin: 0; }
.ay-toc a {
	display: block; margin-left: -1px; padding: 6px 0 6px 14px;
	border-left: 3px solid transparent;
	color: var(--ay-muted); font-size: 14px; line-height: 1.4; text-decoration: none;
}
.ay-toc a:hover { color: var(--ay-ink); }
.ay-toc a.is-active { color: var(--ay-ink); border-left-color: var(--ay-mark); font-weight: 600; }
@media (max-width: 1279px) {
	.ay-toc__box { border: 1px solid var(--ay-line); border-radius: var(--ay-r-card); background: var(--ay-panel); }
	.ay-toc__box summary { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; font-size: 15px; }
	.ay-toc__box summary::after { content: ""; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-3px) rotate(45deg); transition: transform .15s ease; }
	.ay-toc__box[open] summary::after { transform: translateY(2px) rotate(-135deg); }
	.ay-toc ol { margin: 0 18px 14px; }
}

/* Verdict card */
.ay-verdict, .ay-startcard {
	padding: 24px; background: var(--ay-paper);
	border: 1px solid var(--ay-line); border-radius: var(--ay-r-card);
}
.ay-verdict { border: 2px solid var(--ay-ink); box-shadow: 6px 6px 0 var(--ay-mark); }
.ay-verdict__kicker { display: inline-block; margin: 0; padding: 2px 10px; background: var(--ay-mark); border-radius: 999px; color: var(--ay-ink); font-size: 13px; font-weight: 700; }
.ay-verdict__product { margin: 10px 0 0; font-family: var(--ay-head); font-weight: 700; font-size: 24px; line-height: 1.15; letter-spacing: -.02em; color: var(--ay-ink); }
.ay-score { margin-top: 16px; }
.ay-score__num { display: flex; align-items: baseline; gap: 4px; margin: 0; font-family: var(--ay-head); line-height: 1; }
.ay-score__num span:first-child { font-size: 56px; font-weight: 700; letter-spacing: -.05em; color: var(--ay-ink); font-variant-numeric: tabular-nums; }
.ay-score__of { font-size: 17px; font-weight: 600; color: var(--ay-muted); }
.ay-score__bar {
	display: block; height: 8px; margin-top: 12px; border-radius: 999px;
	background:
		repeating-linear-gradient(90deg, transparent 0 calc(10% - 2px), var(--ay-paper) calc(10% - 2px) 10%),
		linear-gradient(var(--ay-ink), var(--ay-ink)) 0 0 / var(--ay-score, 0%) 100% no-repeat,
		var(--ay-panel-2);
}
.ay-verdict__summary { margin: 16px 0 0; font-size: 15.5px; line-height: 1.55; color: var(--ay-text); }
.ay-verdict__facts { margin: 16px 0 20px; padding: 0; border-top: 1px solid var(--ay-line); }
.ay-verdict__facts div { display: grid; grid-template-columns: 76px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--ay-line); font-size: 14.5px; line-height: 1.45; }
.ay-verdict__facts dt { color: var(--ay-muted); font-weight: 500; }
.ay-verdict__facts dd { margin: 0; color: var(--ay-ink); font-weight: 600; }
.ay-verdict__alt { display: block; margin-top: 12px; text-align: center; font-size: 14.5px; font-weight: 600; }
.ay-verdict__note { margin: 14px 0 0; color: var(--ay-muted); font-size: 13px; text-align: center; }

.ay-startcard { background: var(--ay-panel); border-color: transparent; }
.ay .ay-startcard .ay-startcard__title { margin: 0; font-family: var(--ay-head); font-weight: 700; font-size: 20px; color: var(--ay-ink); }
.ay-startcard p { margin: 6px 0 0; font-size: 15px; color: var(--ay-muted); line-height: 1.5; }
.ay-startcard ul { margin: 14px 0 0; padding: 0; list-style: none; }
.ay-startcard li { border-top: 1px solid var(--ay-line-strong); }
.ay-startcard a { display: flex; justify-content: space-between; padding: 10px 0; font-weight: 600; font-size: 15px; text-decoration: none; }
.ay-startcard a::after { content: "›"; color: var(--ay-muted); }
.ay-startcard a:hover { box-shadow: inset 0 -3px 0 var(--ay-mark); }

/* Author box */
.ay-author {
	display: flex; gap: 20px; align-items: flex-start;
	margin-top: 56px; padding: 24px;
	background: var(--ay-panel); border-radius: var(--ay-r-card);
}
.ay-author p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--ay-muted); }
.ay .ay-author .ay-author__name { margin-bottom: 4px; font-family: var(--ay-head); font-weight: 700; font-size: 19px; color: var(--ay-ink); }
.ay .ay-author .ay-author__name a { background: none; font-weight: 700; }
.ay .ay-author .ay-author__more { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; }
.ay .ay-author__more a { font-weight: 600; }

/* ======================================================================
   Prose (post + page content)
   ====================================================================== */
.ay .entry-content { font-size: 18px; line-height: 1.75; }
.ay .entry-content > * { margin-top: 0; margin-bottom: 1.15em; }
.ay .entry-content :is(h2, h3, h4) { scroll-margin-top: calc(var(--ay-bar-h) + 24px); }
.ay .entry-content h2 { margin: 2.1em 0 .6em; font-size: clamp(26px, 2.8vw, 34px); font-weight: 700; line-height: 1.15; letter-spacing: -.025em; }
.ay .entry-content h3 { margin: 1.7em 0 .5em; font-size: clamp(20px, 2vw, 22px); font-weight: 700; line-height: 1.3; }
.ay .entry-content h4 { margin: 1.5em 0 .4em; font-size: 18px; font-weight: 700; }
.ay .entry-content > h2:first-child, .ay .entry-content > .ay-notice:first-child + h2 { margin-top: 0; }
.ay .entry-content :is(ul, ol) { margin-left: 0; padding-left: 1.3em; }
.ay .entry-content li { margin-bottom: .4em; }
.ay .entry-content li::marker { color: var(--ay-muted); }
.ay .entry-content strong { color: var(--ay-ink); font-weight: 650; }
.ay .entry-content blockquote {
	margin: 1.6em 0; padding: 4px 0 4px 22px; border-left: 4px solid var(--ay-mark);
	font-style: normal; font-size: 19px; color: var(--ay-ink); background: none;
}
.ay .entry-content :not(pre) > code { padding: .1em .35em; background: var(--ay-panel); border: 1px solid var(--ay-line); border-radius: 6px; font-size: .88em; }
.ay .entry-content figure { margin-left: 0; margin-right: 0; }
.ay .entry-content :is(.wp-block-image, .ay-body__image) img { border-radius: var(--ay-r-card); border: 1px solid var(--ay-line); }
.ay .entry-content mark { background: var(--ay-mark-soft); color: var(--ay-ink); padding: 0 .15em; }
.ay .entry-content figcaption { margin-top: 8px; color: var(--ay-muted); font-size: 14px; text-align: left; }
.ay .entry-content hr { margin: 2.5em 0; border: 0; border-top: 1px solid var(--ay-line); }
/* GP centers group inner containers with auto margins; inside flex cards that shrinks them */
.ay .entry-content .wp-block-group__inner-container { max-width: none; margin-left: 0; margin-right: 0; }
.ay .entry-content .wp-block-group__inner-container > :last-child { margin-bottom: 0; }
.ay .entry-content .wp-block-group__inner-container > :first-child { margin-top: 0; }

/* core buttons */
.ay .entry-content .wp-block-buttons { gap: 10px; }
.ay .entry-content .wp-block-button__link {
	display: inline-flex; align-items: center; min-height: 44px; padding: 10px 20px;
	background: var(--ay-ink); color: #fff; border-radius: var(--ay-r-ctl);
	font-size: 15.5px; font-weight: 600; line-height: 1.2; text-decoration: none;
}
.ay .entry-content .wp-block-button__link:hover { background: var(--ay-mark); color: var(--ay-ink); }
.ay .entry-content .is-style-outline .wp-block-button__link { background: transparent; color: var(--ay-ink); border: 1px solid currentColor; }

/* tables (default) */
.ay .entry-content .wp-block-table { overflow-x: auto; margin: 1.6em 0; border: 1px solid var(--ay-line); border-radius: var(--ay-r-card); }
.ay .entry-content .wp-block-table table { width: 100%; margin: 0; border: 0; border-collapse: separate; border-spacing: 0; font-size: 15.5px; line-height: 1.5; }
.ay .entry-content .wp-block-table :is(th, td) { padding: 12px 16px; border: 0; border-bottom: 1px solid var(--ay-line); text-align: left; vertical-align: top; }
.ay .entry-content .wp-block-table tr:last-child > :is(td, th) { border-bottom: 0; }
.ay .entry-content .wp-block-table thead :is(th, td) { background: var(--ay-panel); color: var(--ay-ink); font-family: var(--ay-head); font-weight: 700; font-size: 14.5px; border-bottom: 1px solid var(--ay-line); }
.ay .entry-content .wp-block-table figcaption { padding: 10px 16px; margin: 0; border-top: 1px solid var(--ay-line); }

/* ======================================================================
   Review components (block patterns in patterns/*.php; core blocks only)
   ====================================================================== */

/* Pros / cons */
.ay .entry-content .ay-proscons { gap: 16px; margin: 1.8em 0; }
.ay .entry-content :is(.ay-pros, .ay-cons) {
	padding: 22px 24px; border: 1px solid var(--ay-line); border-radius: var(--ay-r-card); background: var(--ay-white);
	box-shadow: inset 0 3px 0 var(--ay-pro);
}
.ay .entry-content .ay-cons { box-shadow: inset 0 3px 0 var(--ay-con); }
.ay .entry-content :is(.ay-pros, .ay-cons) :is(h3, h4) { margin: 0 0 12px; font-size: 17px; }
/* columns layout without relying on core block CSS (raw-HTML picks/pros-cons in generated articles) */
.ay .entry-content :is(.ay-picks, .ay-proscons) { display: flex; gap: 16px; align-items: stretch; }
.ay .entry-content :is(.ay-picks, .ay-proscons) > .wp-block-column { flex: 1 1 0; min-width: 0; }
.ay .entry-content .ay-picks > .wp-block-column > .ay-pick { height: 100%; }
.ay .entry-content .ay-pros :is(h3, h4) { color: var(--ay-pro-text); }
.ay .entry-content .ay-cons :is(h3, h4) { color: #B91C1C; }
.ay .entry-content :is(.ay-pros, .ay-cons) ul { margin: 0; padding: 0; list-style: none; }
.ay .entry-content :is(.ay-pros, .ay-cons) li { position: relative; margin: 0; padding: 7px 0 7px 30px; font-size: 16px; line-height: 1.5; border-top: 1px solid var(--ay-line); }
.ay .entry-content :is(.ay-pros, .ay-cons) li:first-child { border-top: 0; }
.ay .entry-content :is(.ay-pros, .ay-cons) li::before {
	content: ""; position: absolute; left: 0; top: 9px; width: 20px; height: 20px; border-radius: 50%;
	background: var(--ay-pro) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.5l2.6 2.6L14 7.6' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat;
}
.ay .entry-content .ay-cons li::before {
	background: var(--ay-con) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6.5 10h7' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 20px no-repeat;
}
@media (max-width: 781px) { .ay .entry-content .ay-proscons { flex-wrap: wrap !important; } .ay .entry-content .ay-proscons > .wp-block-column { flex-basis: 100% !important; } }

/* At a glance (2-column key/value table) */
.ay .entry-content .ay-glance { background: var(--ay-panel); }
.ay .entry-content .ay-glance table { font-size: 15.5px; }
.ay .entry-content .ay-glance td:first-child { width: 36%; color: var(--ay-muted); font-weight: 600; }
.ay .entry-content .ay-glance td { background: transparent; }
.ay .entry-content .ay-glance td:last-child { color: var(--ay-ink); }

/* Comparison table: scrolls sideways on small screens, first column sticks */
.ay .entry-content .ay-compare { -webkit-overflow-scrolling: touch; }
.ay .entry-content .ay-compare table { min-width: 640px; }
.ay .entry-content .ay-compare :is(th, td):first-child {
	position: sticky; left: 0; z-index: 1;
	background: var(--ay-white); font-weight: 600; color: var(--ay-ink);
	box-shadow: inset -1px 0 0 var(--ay-line);
}
.ay .entry-content .ay-compare thead :is(th, td) { background: var(--ay-ink); color: #fff; border-bottom: 0; }
.ay .entry-content .ay-compare thead :is(th, td):first-child { background: var(--ay-ink); color: #fff; }
.ay .entry-content .ay-compare tbody tr:nth-child(even) :is(td, th) { background: #F8F9FA; }
.ay .entry-content .ay-compare tbody tr:nth-child(even) :is(td, th):first-child { background: #F8F9FA; }

/* Rating bars: paragraph "Label <strong>8.0</strong>" with class ay-rating ay-r-80 (0-100 step 5) */
.ay .entry-content .ay-ratings {
	margin: 1.8em 0; padding: 20px 24px; border: 1px solid var(--ay-line); border-radius: var(--ay-r-card);
}
.ay .entry-content .ay-ratings :is(h3, h4) { margin: 0 0 8px; font-size: 17px; }
.ay .entry-content .ay-rating {
	display: grid; grid-template-columns: 1fr auto; column-gap: 12px; row-gap: 6px;
	margin: 0; padding: 10px 0; font-size: 15.5px; line-height: 1.4;
}
.ay .entry-content .ay-rating strong { font-family: var(--ay-head); font-weight: 700; color: var(--ay-ink); font-variant-numeric: tabular-nums; }
.ay .entry-content .ay-rating::after {
	content: ""; grid-column: 1 / -1; height: 6px; border-radius: 999px;
	background: linear-gradient(var(--ay-ink), var(--ay-ink)) 0 0 / var(--ay-w, 0%) 100% no-repeat, var(--ay-panel-2);
}
.ay-r-0 { --ay-w: 0%; } .ay-r-5 { --ay-w: 5%; } .ay-r-10 { --ay-w: 10%; } .ay-r-15 { --ay-w: 15%; } .ay-r-20 { --ay-w: 20%; }
.ay-r-25 { --ay-w: 25%; } .ay-r-30 { --ay-w: 30%; } .ay-r-35 { --ay-w: 35%; } .ay-r-40 { --ay-w: 40%; } .ay-r-45 { --ay-w: 45%; }
.ay-r-50 { --ay-w: 50%; } .ay-r-55 { --ay-w: 55%; } .ay-r-60 { --ay-w: 60%; } .ay-r-65 { --ay-w: 65%; } .ay-r-70 { --ay-w: 70%; }
.ay-r-75 { --ay-w: 75%; } .ay-r-80 { --ay-w: 80%; } .ay-r-85 { --ay-w: 85%; } .ay-r-90 { --ay-w: 90%; } .ay-r-95 { --ay-w: 95%; } .ay-r-100 { --ay-w: 100%; }

/* Ownership note (owns-product posts): small, calm, above the article body */
.ay-ownnote { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 1.4em !important; color: var(--ay-muted); font-size: 14.5px !important; line-height: 1.5 !important; }
.ay-ownnote .ay-icon { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--ay-muted); }
.ay .entry-content .ay-ownnote a { margin-left: 4px; color: var(--ay-muted); }

/* Notices: general (highlighter rule) and ownership (plain, set apart on purpose) */
.ay .entry-content .ay-notice, .ay-notice {
	margin: 0 0 1.6em; padding: 16px 20px;
	background: var(--ay-panel); border: 1px solid var(--ay-line); border-left: 4px solid var(--ay-mark);
	border-radius: var(--ay-r-ctl); font-size: 15.5px; line-height: 1.6;
}
.ay .entry-content .ay-notice p { margin: 0; }
.ay .entry-content .ay-notice p + p { margin-top: 6px; }
.ay .entry-content .ay-notice--owner { background: var(--ay-white); border-left: 1px solid var(--ay-line); color: var(--ay-muted); font-size: 14.5px; }
.ay .entry-content .ay-notice__title { font-family: var(--ay-head); font-weight: 700; font-size: 15px; color: var(--ay-ink); }

/* "Our pick" cards for roundups */
.ay .entry-content .ay-picks { gap: 16px; margin: 1.8em 0; }
.ay .entry-content .ay-pick {
	display: flex; flex-direction: column;
	padding: 22px; border: 1px solid var(--ay-line); border-radius: var(--ay-r-card); background: var(--ay-white);
}
.ay .entry-content .ay-pick > .wp-block-group__inner-container { display: flex; flex-direction: column; flex: 1; width: 100%; }
.ay .entry-content .ay-pick--top { border: 2px solid var(--ay-ink); box-shadow: 6px 6px 0 var(--ay-mark); }
.ay .entry-content .ay-pick__label {
	align-self: flex-start; margin: 0 0 12px; padding: 3px 10px; border-radius: 999px;
	background: var(--ay-panel); color: var(--ay-ink); font-size: 13px; font-weight: 600; line-height: 1.4;
}
.ay .entry-content .ay-pick--top .ay-pick__label { background: var(--ay-mark); color: var(--ay-ink); }
.ay .entry-content .ay-pick h3 { margin: 0 0 6px; font-size: 20px; }
.ay .entry-content .ay-pick p { font-size: 15.5px; line-height: 1.55; margin-bottom: 14px; }
.ay .entry-content .ay-pick .wp-block-buttons { margin-top: auto; margin-bottom: 0; }
.ay .entry-content .ay-pick .wp-block-button, .ay .entry-content .ay-pick .wp-block-button__link { width: 100%; justify-content: center; }
@media (max-width: 781px) { .ay .entry-content .ay-picks { flex-wrap: wrap !important; } .ay .entry-content .ay-picks > .wp-block-column { flex-basis: 100% !important; } }

/* FAQ: core/details inside .ay-faq (also styles Rank Math's FAQ block) */
.ay .entry-content .ay-faq { margin: 1.8em 0; border-top: 1px solid var(--ay-line); }
.ay .entry-content .ay-faq .wp-block-details { margin: 0; padding: 0; border-bottom: 1px solid var(--ay-line); }
.ay .entry-content .ay-faq summary {
	position: relative; list-style: none; cursor: pointer;
	padding: 18px 40px 18px 0; font-family: var(--ay-head); font-weight: 700; font-size: 18px; line-height: 1.4; color: var(--ay-ink);
}
.ay .entry-content .ay-faq summary::-webkit-details-marker { display: none; }
.ay .entry-content .ay-faq summary::after {
	content: ""; position: absolute; right: 6px; top: 50%; width: 14px; height: 14px; margin-top: -7px;
	background: linear-gradient(currentColor, currentColor) center / 14px 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 14px no-repeat;
	color: var(--ay-ink); transition: transform .2s ease;
}
.ay .entry-content .ay-faq details[open] summary::after { transform: rotate(45deg); }
.ay .entry-content .ay-faq details > :not(summary) { margin: 0 0 18px; font-size: 17px; color: var(--ay-text); }
.ay .entry-content .rank-math-faq-item { padding: 18px 0; border-bottom: 1px solid var(--ay-line); }
.ay .entry-content .rank-math-question { margin: 0 0 6px; font-size: 18px; }
.ay .entry-content .rank-math-answer p { margin: 0; }

/* ======================================================================
   Sections, cards
   ====================================================================== */
.ay-section { padding: clamp(56px, 7vw, 104px) 0; }
.ay-section--panel { background: var(--ay-panel); }
.ay-section--line { border-top: 1px solid var(--ay-line); }
.ay .ay-section-title { margin: 0; font-size: clamp(30px, 3.6vw, 46px); font-weight: 700; line-height: 1.05; letter-spacing: -.035em; }
.ay-section-lede { max-width: 620px; margin: 10px 0 0; color: var(--ay-muted); font-size: 17px; }
.ay-section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 32px; }

.ay-grid { display: grid; gap: 20px; margin-top: 32px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.ay-archive .ay-grid { margin-top: 0; }
.ay-card {
	display: flex; flex-direction: column; position: relative;
	background: var(--ay-paper); border: 1px solid var(--ay-line); border-radius: var(--ay-r-card); overflow: hidden;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.ay-card:hover { border-color: var(--ay-ink); box-shadow: 5px 5px 0 var(--ay-mark); }
.ay-card__media img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-bottom: 1px solid var(--ay-line); }
.ay-card__body { display: flex; flex-direction: column; flex: 1; align-items: flex-start; padding: 22px 22px 18px; }
.ay .ay-card__title { margin: 14px 0 8px; font-size: 21px; font-weight: 700; line-height: 1.2; letter-spacing: -.02em; }
.ay-card__title a { color: var(--ay-ink) !important; text-decoration: none; }
.ay-card__title a::after { content: ""; position: absolute; inset: 0; } /* whole card clickable, one link */
.ay-card__excerpt { margin: 0 0 16px; color: var(--ay-muted); font-size: 15.5px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ay-card__meta { margin: auto 0 0; padding-top: 14px; width: 100%; border-top: 1px solid var(--ay-line); color: var(--ay-muted); font-size: 13.5px; }

.ay-archive { padding-top: 48px; padding-bottom: 88px; }
.ay-archive .nav-links { display: flex; gap: 8px; margin-top: 40px; }
.ay-archive .page-numbers { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid var(--ay-line); border-radius: var(--ay-r-ctl); text-decoration: none; color: var(--ay-text); }
.ay-archive .page-numbers.current { background: var(--ay-ink); color: #fff; border-color: var(--ay-ink); }

.ay-empty {
	max-width: 640px; padding: 32px; border: 1px dashed var(--ay-line-strong); border-radius: var(--ay-r-card); background: var(--ay-panel);
}
.ay-empty p { margin: 0; color: var(--ay-muted); }
.ay .ay-empty .ay-empty__title { margin-bottom: 6px; font-family: var(--ay-head); font-weight: 700; font-size: 22px; color: var(--ay-ink); }
.ay-empty__links { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; padding: 0; list-style: none; }
.ay-empty__links a { display: inline-flex; min-height: 40px; align-items: center; padding: 0 14px; background: var(--ay-paper); border: 1px solid var(--ay-line); border-radius: var(--ay-r-ctl); font-weight: 600; font-size: 15px; text-decoration: none; }
.ay-empty__links a:hover { border-color: var(--ay-ink); }
.ay-empty .search-form { margin-top: 16px; }
.ay-empty--inline { max-width: none; margin-top: 32px; }

/* ======================================================================
   Home
   ====================================================================== */
.ay-home-hero { border-bottom: 1px solid var(--ay-line); }
.ay-home-hero__grid {
	display: grid; gap: 40px; align-items: end; grid-template-columns: minmax(0, 1fr);
	padding-top: clamp(48px, 8vw, 120px); padding-bottom: clamp(48px, 7vw, 96px);
}
@media (min-width: 960px) { .ay-home-hero__grid { grid-template-columns: minmax(0, 1fr) 300px; gap: 72px; } }
.ay .ay-home-hero__title {
	max-width: 15ch; margin: 0;
	font-size: clamp(44px, 7.2vw, 96px); font-weight: 700; line-height: .98; letter-spacing: -.045em;
	text-wrap: balance;
}
.ay-home-hero__dek { max-width: 600px; margin: 28px 0 0; color: var(--ay-muted); font-size: clamp(17px, 1.7vw, 20px); line-height: 1.6; text-wrap: pretty; }

.ay-hero-search {
	display: flex; align-items: center; gap: 8px; max-width: 600px; margin-top: 36px; padding: 6px 6px 6px 18px;
	background: var(--ay-paper); border: 1.5px solid var(--ay-ink); border-radius: 999px;
}
.ay-hero-search:focus-within { box-shadow: 0 0 0 4px var(--ay-mark); }
.ay-hero-search .ay-icon { flex: none; color: var(--ay-muted); }
.ay .ay-hero-search input[type=search] {
	flex: 1; min-width: 0; min-height: 44px; padding: 0; background: none; border: 0; outline: 0;
	color: var(--ay-ink); font: 16.5px var(--ay-body);
}
.ay .ay-hero-search input[type=search]::placeholder { color: var(--ay-muted); opacity: 1; }
.ay .ay-hero-search .ay-btn { border-radius: 999px; min-height: 46px; padding: 10px 22px; }

.ay-home-hero__person { margin: 0; }
.ay-home-hero__photo { display: block; width: 100%; max-width: 300px; aspect-ratio: 1; object-fit: cover; border-radius: var(--ay-r-card); }
.ay-home-hero__person figcaption { display: flex; flex-direction: column; margin-top: 14px; color: var(--ay-muted); font-size: 14.5px; line-height: 1.45; }
.ay-home-hero__name { color: var(--ay-ink); font-family: var(--ay-head); font-weight: 700; font-size: 17px; }
@media (max-width: 959px) {
	.ay-home-hero__person { display: flex; align-items: center; gap: 14px; }
	.ay-home-hero__photo { width: 64px; height: 64px; border-radius: 50%; }
	.ay-home-hero__person figcaption { margin-top: 0; }
}

/* The four formats: the keyword patterns set as type, blanks drawn with the highlighter */
.ay-formats__list { margin: 36px 0 0; padding: 0; list-style: none; border-top: 2px solid var(--ay-ink); }
.ay-format {
	position: relative; display: grid; gap: 6px 48px; align-items: baseline;
	padding: 26px 0; border-bottom: 1px solid var(--ay-line);
}
@media (min-width: 900px) { .ay-format { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); padding: 30px 0; } }
.ay .ay-format__name { margin: 0; font-size: clamp(30px, 4.4vw, 56px); font-weight: 700; line-height: 1.05; letter-spacing: -.04em; }
.ay-format__name a { color: var(--ay-ink) !important; text-decoration: none; }
.ay-format__name a::after { content: ""; position: absolute; inset: 0; }
.ay-format__line { margin: 0; color: var(--ay-muted); font-size: 17px; max-width: 46ch; }
.ay-format--link:hover .ay-format__line { color: var(--ay-ink); }
.ay-blank {
	display: inline-block; width: 2.1em; height: .5em; margin: 0 .08em;
	background: var(--ay-mark); border-radius: 3px 8px 4px 9px; transform: skewX(-10deg);
	vertical-align: baseline; transition: width .25s ease;
}
.ay-format--link:hover .ay-blank { width: 2.6em; }

/* Categories */
.ay-silos { display: grid; gap: 16px; margin: 32px 0 0; padding: 0; list-style: none; }
@media (min-width: 720px) { .ay-silos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .ay-silos { grid-template-columns: 1.3fr 1fr 1fr 1.3fr; } }
.ay-silo {
	position: relative; display: flex; flex-direction: column; min-height: 230px; padding: 26px;
	background: var(--ay-paper); border: 1px solid var(--ay-line); border-radius: var(--ay-r-card);
	transition: border-color .15s ease, box-shadow .15s ease;
}
.ay-silo--link:hover { border-color: var(--ay-ink); box-shadow: 5px 5px 0 var(--ay-mark); }
.ay .ay-silo__name { margin: 0; font-size: 26px; font-weight: 700; line-height: 1.1; letter-spacing: -.03em; }
.ay-silo__name a { color: var(--ay-ink) !important; text-decoration: none; }
.ay-silo__name a::after { content: ""; position: absolute; inset: 0; }
.ay-silo__line { margin: 10px 0 20px; color: var(--ay-muted); font-size: 15.5px; line-height: 1.55; }
.ay-silo__count { margin: auto 0 0; padding-top: 14px; border-top: 1px solid var(--ay-line); color: var(--ay-muted); font-size: 13.5px; font-weight: 600; }

/* About strip */
.ay-aboutstrip__inner { display: grid; gap: 20px 72px; }
@media (min-width: 900px) { .ay-aboutstrip__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); } }
.ay .ay-aboutstrip .ay-section-title { max-width: 12ch; }
.ay-aboutstrip__copy p { margin: 0 0 16px; color: var(--ay-text); font-size: 18px; line-height: 1.7; max-width: 62ch; }
.ay-aboutstrip__copy p:last-child { margin-bottom: 0; }

/* Hire band: the one dark moment, closes the page */
.ay-hireband { background: var(--ay-ink); color: #C9CDD6; }
.ay-hireband__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 48px; padding-top: clamp(48px, 6vw, 80px); padding-bottom: clamp(48px, 6vw, 80px); }
.ay .ay-hireband__title { max-width: 20ch; margin: 0; color: #fff; font-size: clamp(28px, 3.4vw, 44px); line-height: 1.08; letter-spacing: -.035em; }
.ay-hireband p { max-width: 54ch; margin: 12px 0 0; font-size: 17px; }
.ay .ay-hireband .ay-btn { background: var(--ay-mark); color: var(--ay-ink) !important; border-color: var(--ay-mark); }
.ay .ay-hireband .ay-btn:hover { background: #fff; border-color: #fff; }
.ay .ay-hireband :focus-visible { outline-color: var(--ay-mark); }

/* Related */
.ay-related { padding: 64px 0 88px; background: var(--ay-panel); }

/* 404 + search form */
.ay-404 { display: grid; gap: 40px; padding-top: 48px; padding-bottom: 88px; }
@media (min-width: 800px) { .ay-404 { grid-template-columns: 1.2fr 1fr; gap: 64px; } }
.ay .ay-404__title { margin: 0 0 14px; font-size: 22px; font-weight: 700; }
.ay-404__links ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ay-line); }
.ay-404__links li { border-bottom: 1px solid var(--ay-line); }
.ay-404__links a { display: flex; justify-content: space-between; padding: 12px 0; font-weight: 600; text-decoration: none; }
.ay-404__links a::after { content: "›"; color: var(--ay-muted); }
.ay-404__links a:hover { box-shadow: inset 0 -3px 0 var(--ay-mark); }

.ay .search-form { display: flex; gap: 8px; max-width: 520px; }
.ay .search-form label { flex: 1; margin: 0; }
.ay .search-form .search-field {
	width: 100%; min-height: 48px; padding: 0 16px;
	background: var(--ay-paper); color: var(--ay-text);
	border: 1px solid var(--ay-line-strong); border-radius: var(--ay-r-ctl); font: 16px var(--ay-body);
}
.ay .search-form .search-field:focus { border-color: var(--ay-ink); outline: 2px solid var(--ay-focus); outline-offset: 0; }
.ay .search-form .search-submit {
	min-width: 48px; min-height: 48px; padding: 0 16px;
	background: var(--ay-ink); color: #fff; border: 0; border-radius: var(--ay-r-ctl); cursor: pointer;
}
.ay .search-form .search-submit:hover { background: var(--ay-mark); color: var(--ay-ink); }

/* ======================================================================
   Footer
   ====================================================================== */
.ay .site-footer { background: none; }
.ay-footer { background: var(--ay-panel); color: var(--ay-muted); font-size: 15px; border-top: 1px solid var(--ay-line); }
.ay-footer__main { display: grid; gap: 40px; padding-top: 64px; padding-bottom: 48px; }
@media (min-width: 900px) { .ay-footer__main { grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr); gap: 72px; } }
.ay-footer__brand p { max-width: 40ch; margin: 14px 0 0; line-height: 1.6; }
.ay-footer__brand .ay-footer__contact { margin-top: 10px; }
.ay-footer__nav { display: grid; gap: 32px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.ay .ay-footer__heading { margin: 0 0 14px; color: var(--ay-ink); font-family: var(--ay-head); font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.ay-footer ul { margin: 0; padding: 0; list-style: none; }
.ay-footer li { margin: 0 0 10px; }
.ay-footer a:not(.ay-wordmark) { color: var(--ay-text); text-decoration: none; }
.ay-footer a:not(.ay-wordmark):hover { color: var(--ay-ink); box-shadow: inset 0 -.32em 0 var(--ay-mark); }
.ay-footer__bottom { padding-top: 22px; padding-bottom: 28px; font-size: 14px; border-top: 1px solid var(--ay-line-strong); }
.ay-footer__bottom p { margin: 0; }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.ay *, .ay *::before, .ay *::after { transition: none !important; animation: none !important; }
}

/* ---------- Print ---------- */
@media print {
	.ay-header, .ay-footer, .ay-toc, .ay-rail, .ay-related, .ay-hireband { display: none; }
}