/*
Theme Name: GrammarSolutionHub
Theme URI: https://grammarsolutionhub.com
Description: Child theme of Kadence for GrammarSolutionHub — a reference site for English and Spanish grammar. Premium editorial treatment: Fraunces display serif over an Instrument Sans reading face, deep teal on warm neutrals, terracotta marking the Spanish half.
Author: GrammarSolutionHub
Template: kadence
Version: 2.3.1
Text Domain: grammarsolutionhub
*/

/* =========================================================================
 * Design tokens
 *
 * The type roles are display-serif over text-sans, which is the arrangement
 * premium editorial and language brands use — Babbel sets Feature Text over
 * Graphik, and it is why those pages read as considered rather than merely
 * tidy. A serif *body* is the traditional book arrangement and gets heavy
 * across a 3,451-word guide, so the serif is reserved for display.
 *
 * The neutrals are warm rather than cool. A blue-grey ink against a teal brand
 * reads as two competing temperatures; a warm near-black lets the teal be the
 * only cool thing on the page and gives it the whole job of carrying structure.
 *
 * Spanish keeps its own hue so a reader always knows which half of the library
 * they are in without reading the breadcrumb.
 * ====================================================================== */

:root {
	--gsh-teal:        #0F4C4A;
	--gsh-teal-deep:   #08322F;
	--gsh-teal-soft:   #E7EFEE;
	--gsh-sand:        #C9A96A;
	--gsh-sand-soft:   #F6EFE1;

	--gsh-paper:       #FAF8F4;
	--gsh-card:        #FFFFFF;
	--gsh-ink:         #1A1815;
	--gsh-muted:       #6B6459;
	--gsh-line:        #E7E1D6;
	--gsh-line-strong: #D3CBBC;

	/* Spanish half of the library. */
	--gsh-es:          #A6552E;
	--gsh-es-soft:     #F7EDE6;

	--gsh-good:        #2F6B52;
	--gsh-mark:        #A62B1F;

	/* Fraunces carries display, Instrument Sans carries everything read at
	   length. The names say the role, not the classification. */
	--gsh-display: 'Fraunces', Georgia, 'Times New Roman', serif;
	--gsh-text:    'Instrument Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

	/* Kept as aliases so the rest of the sheet does not have to change in one
	   go; both now point at the text face. */
	--gsh-sans:  var(--gsh-text);
	--gsh-serif: var(--gsh-text);

	--gsh-measure: 52ch;
	--gsh-radius:  10px;
	--gsh-shadow:  0 1px 2px rgba(26, 24, 21, .035), 0 10px 28px -14px rgba(26, 24, 21, .13);
}

/* =========================================================================
 * Base
 * ====================================================================== */

body {
	background: var(--gsh-paper);
	color: var(--gsh-ink);
	font-family: var(--gsh-text);
	font-size: 17.5px;
	line-height: 1.72;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Fraunces ships optical-size and softness axes. Held at a low softness and a
   display optical size, it reads as a modern editorial serif rather than a
   period revival — which is the difference between premium and quaint. */
h1, h2, h3, h4, h5, h6,
.entry-title,
.site-title {
	font-family: var(--gsh-display);
	font-variation-settings: 'SOFT' 0, 'WONK' 0, 'opsz' 48;
	color: var(--gsh-teal-deep);
	font-weight: 600;
	letter-spacing: -0.012em;
	line-height: 1.16;
}

a { color: var(--gsh-teal); }
a:hover, a:focus { color: var(--gsh-es); }

strong, b { font-weight: 600; color: var(--gsh-teal-deep); }

/* =========================================================================
 * Reading column
 *
 * The guides run to a median 3,451 words. Anything wider than ~68ch stops
 * being readable, so the measure is capped and the leftover width is used
 * deliberately (contents rail) rather than left as a dead column.
 * ====================================================================== */

.entry-content > p,
.entry-content > ul,
.entry-content > ol,
.entry-content > h2,
.entry-content > h3,
.entry-content > h4,
.entry-content > blockquote {
	max-width: var(--gsh-measure);
}

.entry-content > h2 {
	margin-top: 2.4em;
	margin-bottom: .6em;
	font-size: clamp(24px, 2.6vw, 31px);
	padding-bottom: .34em;
	border-bottom: 2px solid var(--gsh-sand);
}

.entry-content > h3 {
	margin-top: 1.9em;
	margin-bottom: .5em;
	font-size: clamp(19px, 1.9vw, 22px);
	color: var(--gsh-teal);
}

.entry-content p { margin: 0 0 1.15em; }

.entry-content > ul,
.entry-content > ol { margin: 0 0 1.3em; padding-left: 1.35em; }
.entry-content li { margin-bottom: .45em; }

/* =========================================================================
 * Tables
 *
 * Every guide carries a median of seven tables and none of them use <thead> —
 * the header cells are <th> inside <tbody>, so style th directly. A filter
 * wraps each table in .gsh-table-scroll or narrow screens break.
 * ====================================================================== */

.gsh-table-scroll {
	overflow-x: auto;
	margin: 1.8em 0 2em;
	border: 1px solid var(--gsh-line);
	border-radius: var(--gsh-radius);
	background: var(--gsh-card);
	box-shadow: var(--gsh-shadow);
	-webkit-overflow-scrolling: touch;
}

.entry-content table {
	width: 100%;
	border-collapse: collapse;
	margin: 0;
	font-family: var(--gsh-sans);
	font-size: 15.5px;
	line-height: 1.55;
}

.entry-content th {
	background: var(--gsh-teal);
	color: #fff;
	font-weight: 600;
	text-align: left;
	padding: 12px 16px;
	white-space: nowrap;
	letter-spacing: .01em;
}

.entry-content td {
	padding: 11px 16px;
	border-top: 1px solid var(--gsh-line);
	vertical-align: top;
}

.entry-content tr:nth-child(even) td { background: var(--gsh-sand-soft); }

/* Example sentences inside tables read better set apart from the explanation. */
.entry-content td b,
.entry-content td strong { color: var(--gsh-es); font-weight: 600; }
.entry-content td i,
.entry-content td em { font-family: var(--gsh-serif); font-style: italic; }

/* =========================================================================
 * Utilities
 * ====================================================================== */

.gsh-wrap {
	width: min(1180px, 100% - 40px);
	margin-inline: auto;
}

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

/* =========================================================================
 * The guide page
 *
 * The prose is capped at 68ch, which on a 1180px shell leaves ~380px of dead
 * column. Rather than widen the text — 1180px of running prose is unreadable —
 * that width becomes the contents rail, and the grid centres the pair so the
 * leftover margin lands on both sides instead of piling up on one.
 * ====================================================================== */

.gsh-guide .entry-content {
	display: grid;
	grid-template-columns: minmax(0, var(--gsh-measure)) 260px;
	justify-content: center;
	column-gap: clamp(32px, 4vw, 64px);
	align-items: start;
}

/* Everything the guide writes flows down the first column. */
.gsh-guide .entry-content > * { grid-column: 1; }

.gsh-guidemeta {
	grid-column: 1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
	margin-bottom: 28px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--gsh-line);
	font-family: var(--gsh-sans);
	font-size: 14.5px;
	color: var(--gsh-muted);
}

.gsh-chip {
	display: inline-block;
	padding: 5px 12px;
	border-radius: 999px;
	background: var(--gsh-teal-soft);
	color: var(--gsh-teal-deep);
	font-weight: 600;
	font-size: 13.5px;
	letter-spacing: .01em;
	text-decoration: none;
}

.gsh-chip:hover { background: var(--gsh-teal); color: #fff; }

.gsh-guidemeta--es .gsh-chip { background: var(--gsh-es-soft); color: var(--gsh-es); }
.gsh-guidemeta--es .gsh-chip:hover { background: var(--gsh-es); color: #fff; }

/* -------------------------------------------------------------------------
 * Contents rail
 * ---------------------------------------------------------------------- */

/* Selector must outrank `.gsh-guide .entry-content > *`, which pins everything
   else to column 1 and would otherwise drag the rail back with it. */
.gsh-guide .entry-content > .gsh-toc {
	grid-column: 2;
	grid-row: 1 / span 999;
	position: sticky;
	top: 90px;
	align-self: start;
	max-height: calc(100vh - 120px);
	overflow-y: auto;
	padding: 20px 22px;
	background: var(--gsh-card);
	border: 1px solid var(--gsh-line);
	border-radius: var(--gsh-radius);
	box-shadow: var(--gsh-shadow);
	font-family: var(--gsh-sans);
}

.gsh-toc__label {
	margin: 0 0 12px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--gsh-muted);
}

.gsh-toc ol {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: gsh-toc;
}

.gsh-toc li {
	counter-increment: gsh-toc;
	margin: 0;
	border-left: 2px solid var(--gsh-line);
}

.gsh-toc li a {
	display: block;
	padding: 7px 0 7px 14px;
	font-size: 14.5px;
	line-height: 1.4;
	color: var(--gsh-muted);
	text-decoration: none;
}

.gsh-toc li a:hover { color: var(--gsh-teal); }

.gsh-toc li.is-current { border-left-color: var(--gsh-sand); }
.gsh-toc li.is-current a { color: var(--gsh-teal-deep); font-weight: 600; }

/* -------------------------------------------------------------------------
 * Narrow screens: the rail stops being a rail and becomes a card above the
 * prose. Sticky positioning is dropped or it covers the text as you scroll.
 * ---------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.gsh-guide .entry-content {
		display: block;
		max-width: var(--gsh-measure);
		margin-inline: auto;
	}
	.gsh-guide .entry-content > .gsh-toc {
		position: static;
		max-height: none;
		margin: 0 0 32px;
	}
}

/* -------------------------------------------------------------------------
 * Kadence files single posts under .content-width-narrow, which caps the
 * container at 842px. That is the right measure for prose alone, but the
 * guide page puts a 260px rail beside the prose, so the shell has to carry
 * both. Selector leads with `body` to outrank Kadence's inline rule, which
 * has the same specificity and would otherwise win on source order.
 * ---------------------------------------------------------------------- */

body.gsh-guide .content-container.site-container {
	max-width: 1120px;
}

@media (max-width: 1024px) {
	body.gsh-guide .content-container.site-container {
		max-width: 842px;
	}
}

/* =========================================================================
 * Front page
 * ====================================================================== */

.gsh-front { padding-bottom: clamp(48px, 7vw, 88px); }

.gsh-sec {
	margin: clamp(44px, 6vw, 72px) 0 4px;
	font-size: clamp(23px, 2.4vw, 29px);
}

.gsh-seclede {
	margin: 0 0 22px;
	max-width: 60ch;
	font-family: var(--gsh-sans);
	font-size: 15.5px;
	color: var(--gsh-muted);
}

/* -------------------------------------------------------------------------
 * Hero
 * ---------------------------------------------------------------------- */

.gsh-hero {
	background: var(--gsh-teal-deep);
	color: #fff;
	padding: clamp(48px, 8vw, 92px) 0 clamp(44px, 7vw, 80px);
	margin-bottom: clamp(36px, 5vw, 60px);
}

.gsh-hero__eyebrow {
	margin: 0 0 14px;
	font-family: var(--gsh-sans);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: var(--gsh-sand);
}

.gsh-hero__title {
	margin: 0 0 18px;
	max-width: 19ch;
	color: #fff;
	font-size: clamp(34px, 5.6vw, 60px);
	line-height: 1.06;
}

.gsh-hero__title em {
	display: block;
	font-style: normal;
	color: var(--gsh-sand);
}

.gsh-hero__lede {
	margin: 0;
	max-width: 62ch;
	font-size: clamp(16.5px, 1.6vw, 19px);
	line-height: 1.65;
	color: rgba(255, 255, 255, .84);
}

/* -------------------------------------------------------------------------
 * Search
 * ---------------------------------------------------------------------- */

.gsh-search {
	display: flex;
	gap: 10px;
	margin-top: 28px;
	max-width: 560px;
}

.gsh-search input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	padding: 13px 18px;
	border: 1px solid transparent;
	border-radius: var(--gsh-radius);
	background: #fff;
	color: var(--gsh-ink);
	font-family: var(--gsh-sans);
	font-size: 16px;
}

.gsh-search input[type="search"]:focus {
	outline: none;
	border-color: var(--gsh-sand);
	box-shadow: 0 0 0 3px rgba(201, 169, 106, .35);
}

.gsh-search button {
	padding: 13px 22px;
	border: 0;
	border-radius: var(--gsh-radius);
	background: var(--gsh-sand);
	color: var(--gsh-teal-deep);
	font-family: var(--gsh-sans);
	font-weight: 600;
	font-size: 15.5px;
	cursor: pointer;
}

.gsh-search button:hover { background: #dcbd7e; }

/* -------------------------------------------------------------------------
 * The two halves
 * ---------------------------------------------------------------------- */

.gsh-halves {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: clamp(16px, 2vw, 24px);
}

.gsh-half {
	display: block;
	padding: clamp(26px, 3.4vw, 40px);
	border-radius: var(--gsh-radius);
	border: 1px solid var(--gsh-line);
	background: var(--gsh-card);
	box-shadow: var(--gsh-shadow);
	text-decoration: none;
	border-top: 4px solid var(--gsh-teal);
	transition: transform .18s ease, box-shadow .18s ease;
}

.gsh-half--es { border-top-color: var(--gsh-es); }

.gsh-half:hover {
	transform: translateY(-2px);
	box-shadow: 0 2px 4px rgba(27, 36, 34, .05), 0 16px 34px -14px rgba(27, 36, 34, .22);
}

.gsh-half__k {
	margin: 0 0 8px;
	font-family: var(--gsh-sans);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--gsh-teal);
}

.gsh-half--es .gsh-half__k { color: var(--gsh-es); }

.gsh-half h2 { margin: 0 0 12px; font-size: clamp(22px, 2.3vw, 28px); }

.gsh-half p {
	margin: 0 0 16px;
	font-size: 16.5px;
	color: var(--gsh-muted);
	line-height: 1.62;
}

.gsh-half__more {
	font-family: var(--gsh-sans);
	font-weight: 600;
	font-size: 15px;
	color: var(--gsh-teal);
}

.gsh-half--es .gsh-half__more { color: var(--gsh-es); }

/* -------------------------------------------------------------------------
 * Topic tiles
 * ---------------------------------------------------------------------- */

.gsh-topics {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 12px;
}

@media (min-width: 560px) {
	.gsh-topics { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
}

.gsh-topic {
	display: block;
	padding: 16px 18px;
	border-radius: var(--gsh-radius);
	border: 1px solid var(--gsh-line);
	background: var(--gsh-card);
	text-decoration: none;
	border-left: 3px solid var(--gsh-teal);
	transition: border-color .16s ease, background .16s ease;
}

.gsh-topic--es { border-left-color: var(--gsh-es); }
.gsh-topic:hover { background: var(--gsh-teal-soft); }
.gsh-topic--es:hover { background: var(--gsh-es-soft); }

.gsh-topic__name {
	display: block;
	font-family: var(--gsh-sans);
	font-weight: 600;
	font-size: 16px;
	color: var(--gsh-teal-deep);
	line-height: 1.3;
}

.gsh-topic__count {
	display: block;
	margin-top: 4px;
	font-family: var(--gsh-sans);
	font-size: 13px;
	color: var(--gsh-muted);
}

/* -------------------------------------------------------------------------
 * Guide cards
 * ---------------------------------------------------------------------- */

.gsh-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 16px;
}

.gsh-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 22px;
	border-radius: var(--gsh-radius);
	border: 1px solid var(--gsh-line);
	background: var(--gsh-card);
	text-decoration: none;
	box-shadow: var(--gsh-shadow);
	transition: transform .18s ease;
}

.gsh-card:hover { transform: translateY(-2px); }

.gsh-card__cat {
	font-family: var(--gsh-sans);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--gsh-teal);
}

.gsh-card--es .gsh-card__cat { color: var(--gsh-es); }

.gsh-card__title {
	font-family: var(--gsh-sans);
	font-weight: 600;
	font-size: 17.5px;
	line-height: 1.32;
	color: var(--gsh-teal-deep);
}

.gsh-card__meta {
	margin-top: auto;
	font-family: var(--gsh-sans);
	font-size: 13.5px;
	color: var(--gsh-muted);
}

/* -------------------------------------------------------------------------
 * Plain list
 * ---------------------------------------------------------------------- */

.gsh-list {
	border-top: 1px solid var(--gsh-line);
}

.gsh-list a {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 20px;
	padding: 14px 4px;
	border-bottom: 1px solid var(--gsh-line);
	text-decoration: none;
}

.gsh-list a:hover { background: var(--gsh-sand-soft); }

.gsh-list .t {
	font-family: var(--gsh-sans);
	font-size: 16.5px;
	font-weight: 500;
	color: var(--gsh-teal-deep);
	line-height: 1.35;
}

.gsh-list .m {
	flex: 0 0 auto;
	font-family: var(--gsh-sans);
	font-size: 13px;
	color: var(--gsh-muted);
	white-space: nowrap;
}

/* -------------------------------------------------------------------------
 * Trust band
 * ---------------------------------------------------------------------- */

.gsh-trust {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: clamp(20px, 3vw, 36px);
	margin-top: clamp(48px, 6vw, 76px);
	padding: clamp(28px, 4vw, 44px);
	border-radius: var(--gsh-radius);
	background: var(--gsh-sand-soft);
	border: 1px solid var(--gsh-line);
}

.gsh-trust h3 {
	margin: 0 0 10px;
	font-size: 18px;
	color: var(--gsh-teal-deep);
}

.gsh-trust p {
	margin: 0;
	font-size: 15.5px;
	line-height: 1.62;
	color: var(--gsh-muted);
}

/* =========================================================================
 * Category archive
 * ====================================================================== */

.gsh-archintro {
	background: var(--gsh-teal-deep);
	color: #fff;
	padding: clamp(34px, 5vw, 60px) 0 clamp(30px, 4.5vw, 52px);
	margin-bottom: clamp(28px, 4vw, 44px);
}

.gsh-archintro--es { background: #6B3620; }

.gsh-archintro__eyebrow {
	margin: 0 0 10px;
	font-family: var(--gsh-sans);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--gsh-sand);
}

.gsh-archintro__title {
	margin: 0 0 14px;
	color: #fff;
	font-size: clamp(29px, 4vw, 44px);
	line-height: 1.1;
}

.gsh-archintro__desc {
	max-width: 68ch;
}

.gsh-archintro__desc p {
	margin: 0;
	font-size: clamp(16px, 1.5vw, 17.5px);
	line-height: 1.68;
	color: rgba(255, 255, 255, .84);
}

.gsh-archintro__desc em { color: var(--gsh-sand); font-style: italic; }

/* =========================================================================
 * Editorial pages (About, Contact)
 *
 * Pages render in Kadence's wide layout while the site measure caps prose at
 * 68ch, which leaves a large dead column beside every paragraph. Rather than
 * widening the text, these pages are designed *for* the width — bands, stat
 * rows and card grids that use it deliberately.
 * ====================================================================== */

.gsh-page { font-family: var(--gsh-serif); }

.gsh-page > * { max-width: none; }

.gsh-phero {
	padding: clamp(30px, 4.4vw, 52px) clamp(24px, 3.4vw, 44px);
	margin-bottom: clamp(28px, 4vw, 44px);
	border-radius: var(--gsh-radius);
	background: var(--gsh-teal-deep);
	color: #fff;
}

.gsh-phero__eyebrow {
	margin: 0 0 12px;
	font-family: var(--gsh-sans);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--gsh-sand);
}

.gsh-phero__title {
	margin: 0 0 16px;
	max-width: 22ch;
	font-family: var(--gsh-sans);
	font-weight: 600;
	font-size: clamp(28px, 4vw, 44px);
	line-height: 1.1;
	letter-spacing: -0.015em;
	color: #fff;
}

.gsh-phero__title em { font-style: normal; color: var(--gsh-sand); }

.gsh-phero p:not([class]) {
	margin: 0;
	max-width: 66ch;
	font-size: clamp(16px, 1.5vw, 17.5px);
	line-height: 1.68;
	color: rgba(255, 255, 255, .84);
}

/* Stat row */

.gsh-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 1px;
	margin-bottom: clamp(28px, 4vw, 44px);
	background: var(--gsh-line);
	border: 1px solid var(--gsh-line);
	border-radius: var(--gsh-radius);
	overflow: hidden;
}

.gsh-stats > div {
	padding: 22px 18px;
	background: var(--gsh-card);
	text-align: center;
}

.gsh-stats .n {
	margin: 0 0 4px;
	font-family: var(--gsh-sans);
	font-weight: 600;
	font-size: clamp(24px, 2.6vw, 32px);
	color: var(--gsh-teal);
	line-height: 1;
}

.gsh-stats .l {
	margin: 0;
	font-family: var(--gsh-sans);
	font-size: 13px;
	color: var(--gsh-muted);
	line-height: 1.35;
}

/* Two-up feature cards */

.gsh-cards2 {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: clamp(16px, 2vw, 22px);
	margin-bottom: clamp(20px, 3vw, 32px);
}

.gsh-card2 {
	padding: clamp(24px, 3vw, 34px);
	border: 1px solid var(--gsh-line);
	border-top: 4px solid var(--gsh-teal);
	border-radius: var(--gsh-radius);
	background: var(--gsh-card);
	box-shadow: var(--gsh-shadow);
}

.gsh-card2--es { border-top-color: var(--gsh-es); }

.gsh-card2 .k {
	margin: 0 0 8px;
	font-family: var(--gsh-sans);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--gsh-teal);
}

.gsh-card2--es .k { color: var(--gsh-es); }

.gsh-card2 h3 { margin: 0 0 12px; font-size: clamp(20px, 2vw, 25px); }
.gsh-card2 p { margin: 0 0 14px; font-size: 16.5px; line-height: 1.62; color: var(--gsh-muted); }

.gsh-card2 .more {
	font-family: var(--gsh-sans);
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
	color: var(--gsh-teal);
}

.gsh-card2--es .more { color: var(--gsh-es); }

/* Prose beside a panel */

.gsh-split2 {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: clamp(20px, 3vw, 36px);
	margin-bottom: clamp(24px, 3.4vw, 40px);
	align-items: start;
}

.gsh-prose p {
	margin: 0 0 1.1em;
	font-size: 17px;
	line-height: 1.72;
}

.gsh-panel {
	padding: clamp(22px, 2.6vw, 30px);
	border: 1px solid var(--gsh-line);
	border-radius: var(--gsh-radius);
	background: var(--gsh-sand-soft);
}

.gsh-panel h3 { margin: 0 0 12px; font-size: 18.5px; }
.gsh-panel p  { margin: 0 0 12px; font-size: 15.5px; line-height: 1.65; color: var(--gsh-muted); }
.gsh-panel ul { margin: 0 0 12px; padding-left: 1.2em; }
.gsh-panel li { margin-bottom: 8px; font-size: 15.5px; line-height: 1.6; color: var(--gsh-muted); }
.gsh-panel li strong { color: var(--gsh-teal-deep); }

/* Four-up grids: process steps and authorities */

.gsh-cards4 {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: clamp(14px, 1.8vw, 20px);
	margin-bottom: clamp(24px, 3.4vw, 40px);
}

.gsh-step, .gsh-auth {
	padding: 22px;
	border: 1px solid var(--gsh-line);
	border-radius: var(--gsh-radius);
	background: var(--gsh-card);
}

.gsh-steps { counter-reset: gsh-step; }

.gsh-step { counter-increment: gsh-step; position: relative; padding-top: 46px; }

.gsh-step::before {
	content: counter(gsh-step);
	position: absolute;
	top: 20px;
	left: 22px;
	width: 26px;
	height: 26px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--gsh-teal-soft);
	color: var(--gsh-teal);
	font-family: var(--gsh-sans);
	font-weight: 700;
	font-size: 13px;
}

.gsh-step h3, .gsh-auth .t {
	margin: 0 0 8px;
	font-family: var(--gsh-sans);
	font-weight: 600;
	font-size: 16.5px;
	color: var(--gsh-teal-deep);
	line-height: 1.3;
}

.gsh-step p, .gsh-auth p {
	margin: 0;
	font-size: 15px;
	line-height: 1.58;
	color: var(--gsh-muted);
}

.gsh-auth { border-left: 3px solid var(--gsh-teal); }
.gsh-auth--es { border-left-color: var(--gsh-es); }

/* Author card */

.gsh-authorcard {
	display: flex;
	gap: 22px;
	padding: clamp(24px, 3vw, 32px);
	margin-bottom: clamp(24px, 3.4vw, 40px);
	border: 1px solid var(--gsh-line);
	border-left: 4px solid var(--gsh-sand);
	border-radius: var(--gsh-radius);
	background: var(--gsh-card);
}

.gsh-authorcard .nm {
	margin: 0;
	font-family: var(--gsh-sans);
	font-weight: 600;
	font-size: 20px;
	color: var(--gsh-teal-deep);
}

.gsh-authorcard .ro {
	margin: 2px 0 12px;
	font-family: var(--gsh-sans);
	font-size: 13px;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--gsh-muted);
}

.gsh-authorcard p:not([class]) {
	margin: 0 0 12px;
	max-width: 70ch;
	font-size: 16px;
	line-height: 1.65;
	color: var(--gsh-muted);
}

.gsh-authorcard a {
	font-family: var(--gsh-sans);
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
}

/* Contact page: three method cards, the form wrapper, and the no-list. */

.gsh-cards3 {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: clamp(14px, 1.8vw, 20px);
	margin-bottom: clamp(24px, 3.4vw, 40px);
}

.gsh-method {
	padding: 24px;
	border: 1px solid var(--gsh-line);
	border-top: 3px solid var(--gsh-sand);
	border-radius: var(--gsh-radius);
	background: var(--gsh-card);
}

.gsh-method .k {
	margin: 0 0 8px;
	font-family: var(--gsh-sans);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--gsh-sand);
}

.gsh-method h3 { margin: 0 0 10px; font-size: 18.5px; }
.gsh-method p  { margin: 0; font-size: 15.5px; line-height: 1.62; color: var(--gsh-muted); }

.gsh-formwrap {
	padding: clamp(24px, 3vw, 32px);
	border: 1px solid var(--gsh-line);
	border-radius: var(--gsh-radius);
	background: var(--gsh-card);
	box-shadow: var(--gsh-shadow);
}

.gsh-formwrap label {
	display: block;
	margin-bottom: 14px;
	font-family: var(--gsh-sans);
	font-size: 14.5px;
	font-weight: 600;
	color: var(--gsh-teal-deep);
}

.gsh-formwrap input[type="text"],
.gsh-formwrap input[type="email"],
.gsh-formwrap input[type="tel"],
.gsh-formwrap textarea {
	width: 100%;
	margin-top: 6px;
	padding: 11px 14px;
	border: 1px solid var(--gsh-line-strong);
	border-radius: 8px;
	background: var(--gsh-paper);
	font-family: var(--gsh-sans);
	font-size: 15.5px;
	font-weight: 400;
	color: var(--gsh-ink);
}

.gsh-formwrap textarea { min-height: 150px; resize: vertical; }

.gsh-formwrap input:focus,
.gsh-formwrap textarea:focus {
	outline: none;
	border-color: var(--gsh-teal);
	box-shadow: 0 0 0 3px rgba(15, 76, 74, .12);
}

.gsh-formwrap input[type="submit"] {
	margin-top: 4px;
	padding: 12px 26px;
	border: 0;
	border-radius: 8px;
	background: var(--gsh-teal);
	color: #fff;
	font-family: var(--gsh-sans);
	font-weight: 600;
	font-size: 15.5px;
	cursor: pointer;
}

.gsh-formwrap input[type="submit"]:hover { background: var(--gsh-teal-deep); }

.gsh-nolist {
	padding: clamp(22px, 2.6vw, 30px);
	margin-bottom: clamp(24px, 3.4vw, 40px);
	border: 1px dashed var(--gsh-line-strong);
	border-radius: var(--gsh-radius);
	background: transparent;
}

.gsh-nolist h3 { margin: 0 0 12px; font-size: 18px; }

.gsh-nolist ul {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 6px 20px;
	margin: 0;
	padding-left: 1.2em;
}

.gsh-nolist li { font-size: 15.5px; color: var(--gsh-muted); }

/* =========================================================================
 * Contextual links and the closing block
 * ====================================================================== */

.gsh-guide .entry-content p a {
	color: var(--gsh-teal);
	text-decoration: underline;
	text-decoration-color: var(--gsh-sand);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.gsh-guide .entry-content p a:hover {
	color: var(--gsh-es);
	text-decoration-color: var(--gsh-es);
}

.gsh-next {
	max-width: var(--gsh-measure);
	margin: clamp(36px, 5vw, 56px) 0 0;
	padding: clamp(22px, 2.8vw, 30px);
	border: 1px solid var(--gsh-line);
	border-left: 4px solid var(--gsh-teal);
	border-radius: var(--gsh-radius);
	background: var(--gsh-card);
}

.gsh-next--es { border-left-color: var(--gsh-es); }

.gsh-next__label {
	margin: 0 0 14px;
	font-family: var(--gsh-sans);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--gsh-muted);
}

.gsh-next__list { border-top: 1px solid var(--gsh-line); }

.gsh-next__list a {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 18px;
	padding: 12px 2px;
	border-bottom: 1px solid var(--gsh-line);
	text-decoration: none;
}

.gsh-next__list a:hover { background: var(--gsh-sand-soft); }

.gsh-next__list .t {
	font-family: var(--gsh-sans);
	font-size: 16px;
	font-weight: 500;
	color: var(--gsh-teal-deep);
	line-height: 1.35;
}

.gsh-next__list .m {
	flex: 0 0 auto;
	font-family: var(--gsh-sans);
	font-size: 13px;
	color: var(--gsh-muted);
	white-space: nowrap;
}

.gsh-next__all {
	display: inline-block;
	margin-top: 14px;
	font-family: var(--gsh-sans);
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
	color: var(--gsh-teal);
}

.gsh-next--es .gsh-next__all { color: var(--gsh-es); }

/* =========================================================================
 * Header
 *
 * Kadence left the site name in the body serif at body size and the header
 * with no rule under it, so the masthead read as part of the page rather than
 * as the site. Measured against grammarist and spanishdict, this is where the
 * site looked least finished.
 * ====================================================================== */

.site-header,
#masthead {
	background: var(--gsh-card);
	border-bottom: 1px solid var(--gsh-line);
}

/* Kadence renders the site name as a bare <p class="site-title"> and colours it
   through `.site-branding .site-title`, so a lone `.site-title` loses and any
   selector assuming an inner <a> never matches at all. */
.site-header .site-branding .site-title,
.site-branding .site-title,
.site-title,
.site-branding .site-title a,
.site-header .site-title a {
	font-family: var(--gsh-sans) !important;
	font-weight: 700;
	font-size: clamp(19px, 2vw, 23px);
	letter-spacing: -0.02em;
	color: var(--gsh-teal-deep);
}

.site-header .site-title a:hover { color: var(--gsh-teal); }

/* Navigation reads as interface, so it takes the sans face at a smaller size
   than the prose it sits above. */
.main-navigation a,
.header-navigation a,
.primary-menu-container a,
.site-header nav a {
	font-family: var(--gsh-sans) !important;
	font-size: 15.5px;
	font-weight: 500;
	letter-spacing: .005em;
	color: var(--gsh-ink);
}

.main-navigation a:hover,
.header-navigation a:hover,
.site-header nav a:hover { color: var(--gsh-teal); }

.main-navigation .sub-menu a,
.header-navigation .sub-menu a { font-size: 14.5px; font-weight: 400; }

/* =========================================================================
 * Page title
 *
 * 32px is Kadence's default and is small for the top of a 3,451-word guide;
 * the competitors run their titles noticeably larger than their h2s.
 * ====================================================================== */

.entry-title,
.entry-header .entry-title,
h1.entry-title {
	font-family: var(--gsh-sans);
	font-size: clamp(29px, 3.8vw, 43px);
	font-weight: 600;
	line-height: 1.14;
	letter-spacing: -0.02em;
	color: var(--gsh-teal-deep);
	max-width: 22ch;
}

/* =========================================================================
 * Breadcrumbs
 * ====================================================================== */

.gsh-crumbs {
	margin-bottom: 16px;
	font-family: var(--gsh-sans);
	font-size: 13.5px;
	color: var(--gsh-muted);
}

.gsh-crumbs a { color: var(--gsh-muted); text-decoration: none; }
.gsh-crumbs a:hover { color: var(--gsh-teal); text-decoration: underline; }
.gsh-crumbs .separator { margin: 0 7px; opacity: .55; }
.gsh-crumbs .last { color: var(--gsh-teal-deep); font-weight: 500; }

.gsh-guide .entry-content > .gsh-crumbs { grid-column: 1; }

/* =========================================================================
 * Footer
 * ====================================================================== */

.gsh-footer {
	margin-top: clamp(48px, 7vw, 88px);
	padding: clamp(40px, 5vw, 64px) 0 0;
	background: var(--gsh-teal-deep);
	color: rgba(255, 255, 255, .78);
	font-family: var(--gsh-sans);
	font-size: 15px;
	line-height: 1.6;
}

.gsh-footer__grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1fr;
	gap: clamp(24px, 3.5vw, 48px);
	padding-bottom: clamp(32px, 4vw, 44px);
}

@media (max-width: 860px) {
	/* 130px lets the three link columns sit two-up on a 375px screen; at 160px
	   they collapse to one and the footer runs to nearly a full screen height. */
	.gsh-footer__grid { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
	.gsh-footer__brand { grid-column: 1 / -1; }
}

.gsh-footer__name {
	margin: 0 0 10px;
	font-size: 19px;
	font-weight: 700;
	letter-spacing: -0.015em;
	color: #fff;
}

.gsh-footer__blurb {
	margin: 0;
	max-width: 44ch;
	font-size: 14.5px;
	color: rgba(255, 255, 255, .62);
}

.gsh-footer__h {
	margin: 0 0 12px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--gsh-sand);
}

.gsh-footer__col ul { margin: 0; padding: 0; list-style: none; }
.gsh-footer__col li { margin-bottom: 8px; }

.gsh-footer__col a {
	color: rgba(255, 255, 255, .78);
	text-decoration: none;
	font-size: 14.5px;
}

.gsh-footer__col a:hover { color: var(--gsh-sand); }

.gsh-footer__base {
	padding: 18px 0 22px;
	border-top: 1px solid rgba(255, 255, 255, .13);
}

.gsh-footer__base p {
	margin: 0;
	font-size: 13.5px;
	color: rgba(255, 255, 255, .5);
}

/* =========================================================================
 * Refinements over the base sheet
 *
 * Everything below tunes the first pass rather than replacing it: a lighter
 * section rule, flatter cards, and a wider gap between display and text sizes.
 * Premium reads as restraint plus scale contrast, not as more decoration.
 * ====================================================================== */

/* The section rule was a 2px sand bar under every h2 — at eleven headings per
   guide that is eleven heavy stripes down the page. A hairline in the same
   colour does the same job without the noise. */
.entry-content > h2 {
	font-size: clamp(25px, 2.7vw, 32px);
	font-weight: 600;
	letter-spacing: -0.015em;
	padding-bottom: .3em;
	border-bottom: 1px solid var(--gsh-line-strong);
	margin-top: 2.6em;
}

.entry-content > h3 {
	font-family: var(--gsh-display);
	font-variation-settings: 'SOFT' 0, 'WONK' 0, 'opsz' 24;
	font-size: clamp(19px, 1.9vw, 22.5px);
	font-weight: 600;
	color: var(--gsh-teal);
}

/* Body copy: the text face wants slightly looser tracking than a serif would. */
.entry-content p,
.entry-content li {
	letter-spacing: .002em;
}

/* Emphasis inside tables stays in the text face; the display serif is not a
   reading face and italic Fraunces at 15px is illegible. */
.entry-content td i,
.entry-content td em { font-family: var(--gsh-text); font-style: italic; }

/* -------------------------------------------------------------------------
 * Cards
 * ---------------------------------------------------------------------- */

.gsh-half,
.gsh-card,
.gsh-card2,
.gsh-method,
.gsh-formwrap,
.gsh-step,
.gsh-auth,
.gsh-authorcard,
.gsh-next,
.gsh-toc {
	box-shadow: none;
	border-color: var(--gsh-line);
}

.gsh-half:hover {
	transform: none;
	border-color: var(--gsh-teal);
	box-shadow: none;
}

.gsh-card:hover { transform: none; border-color: var(--gsh-line-strong); }

/* Titles inside cards take the display face so the hierarchy carries through
   from the page heading into the components. */
.gsh-half h2,
.gsh-card2 h3,
.gsh-method h3,
.gsh-panel h3,
.gsh-step h3,
.gsh-trust h3,
.gsh-authorcard .nm {
	font-family: var(--gsh-display);
	font-variation-settings: 'SOFT' 0, 'WONK' 0, 'opsz' 30;
	letter-spacing: -0.012em;
}

/* The card title in a link list stays in the text face — those are scanned,
   not read, and a serif slows scanning down. */
.gsh-card__title,
.gsh-list .t,
.gsh-next__list .t,
.gsh-topic__name {
	font-family: var(--gsh-text);
}

/* -------------------------------------------------------------------------
 * Hero and page bands
 * ---------------------------------------------------------------------- */

.gsh-hero__title,
.gsh-phero__title,
.gsh-archintro__title {
	font-family: var(--gsh-display);
	font-variation-settings: 'SOFT' 0, 'WONK' 0, 'opsz' 96;
	font-weight: 600;
	letter-spacing: -0.02em;
}

.gsh-hero__title { font-size: clamp(36px, 5.8vw, 64px); line-height: 1.04; }

.gsh-hero__eyebrow,
.gsh-phero__eyebrow,
.gsh-archintro__eyebrow,
.gsh-footer__h,
.gsh-toc__label,
.gsh-next__label {
	font-family: var(--gsh-text);
	font-weight: 600;
	letter-spacing: .12em;
}

/* Page title, set larger against the smaller text size for a wider jump
   between the two — the scale contrast is what reads as editorial. */
.entry-title,
.entry-header .entry-title,
h1.entry-title {
	font-family: var(--gsh-display);
	font-variation-settings: 'SOFT' 0, 'WONK' 0, 'opsz' 96;
	font-size: clamp(31px, 4.2vw, 47px);
	line-height: 1.08;
	letter-spacing: -0.022em;
}

/* -------------------------------------------------------------------------
 * Site chrome
 * ---------------------------------------------------------------------- */

.site-header .site-branding .site-title,
.site-branding .site-title,
.site-title {
	font-family: var(--gsh-display) !important;
	font-variation-settings: 'SOFT' 0, 'WONK' 0, 'opsz' 40;
	font-weight: 600;
	letter-spacing: -0.02em;
}

.gsh-footer__name {
	font-family: var(--gsh-display);
	font-variation-settings: 'SOFT' 0, 'WONK' 0, 'opsz' 40;
	font-weight: 600;
}

/* -------------------------------------------------------------------------
 * Restore the accent edges
 *
 * The blanket `border-color: var(--gsh-line)` above flattened the shadows as
 * intended but also wiped the coloured edge that tells English cards from
 * Spanish ones — which is the one piece of colour doing real work on this site.
 * These put it back, after the flattening rule so they win on source order.
 * ---------------------------------------------------------------------- */

.gsh-half            { border-top-color: var(--gsh-teal); }
.gsh-half--es        { border-top-color: var(--gsh-es); }

.gsh-card2           { border-top-color: var(--gsh-teal); }
.gsh-card2--es       { border-top-color: var(--gsh-es); }

.gsh-method          { border-top-color: var(--gsh-sand); }

.gsh-topic           { border-left-color: var(--gsh-teal); }
.gsh-topic--es       { border-left-color: var(--gsh-es); }

.gsh-auth            { border-left-color: var(--gsh-teal); }
.gsh-auth--es        { border-left-color: var(--gsh-es); }

.gsh-next            { border-left-color: var(--gsh-teal); }
.gsh-next--es        { border-left-color: var(--gsh-es); }

.gsh-authorcard      { border-left-color: var(--gsh-sand); }

/* =========================================================================
 * Typographic scale matched to alldayidreamaboutfood.com
 *
 * Measured from their recipe page: body 19px on a 36.1px line (1.9), h1 46px
 * and h2 30px both on a 1.1 line, h2 at weight 700, h3 28px. The airier line
 * height is the change that carries most of the difference — 1.9 against our
 * 1.72 is a noticeably calmer page at this length.
 *
 * Their display face is Kalesi, which is licensed and not ours to use, so the
 * faces stay Fraunces and Instrument Sans; only size, weight and leading move.
 * ====================================================================== */

body {
	font-size: 19px;
	line-height: 1.9;
}

.entry-content p,
.entry-content li,
.gsh-prose p {
	font-size: 19px;
	line-height: 1.9;
}

/* Headings sit on a tight 1.1 line, which is what lets a 46px title and a 19px
   body coexist without the page feeling top-heavy. */
.entry-title,
.entry-header .entry-title,
h1.entry-title {
	font-size: clamp(32px, 4.2vw, 46px);
	line-height: 1.1;
}

.entry-content > h2 {
	font-size: clamp(25px, 2.6vw, 30px);
	font-weight: 700;
	line-height: 1.1;
}

.entry-content > h3 {
	font-size: clamp(22px, 2.4vw, 28px);
	line-height: 1.1;
}

.entry-content > h4 {
	font-size: clamp(19px, 2vw, 23px);
	line-height: 1.15;
}

/* The hero and page bands follow the same 1.1 leading so the whole site reads
   as one scale rather than the article using one and the furniture another. */
.gsh-hero__title,
.gsh-phero__title,
.gsh-archintro__title {
	line-height: 1.1;
}

.gsh-sec {
	font-size: clamp(25px, 2.6vw, 30px);
	line-height: 1.1;
}

/* Mobile scale, also matched. They hold h2 and h3 at full size on a phone and
   only step the page title down (46px to 38px), which keeps the section
   hierarchy legible on a narrow column instead of flattening it. Their body
   stays 19px too, so ~34 characters per line is the intended measure rather
   than something to correct. */
@media (max-width: 782px) {
	.entry-title,
	.entry-header .entry-title,
	h1.entry-title { font-size: 38px; }

	.entry-content > h2,
	.gsh-sec { font-size: 30px; }

	.entry-content > h3 { font-size: 28px; }
}