/*
Theme Name: Hmmporium
Theme URI: https://hmmporium.com/
Author: Hmmporium
Description: A playful puzzle-shop theme for hmmporium.com. The homepage is the daily puzzle: riddles, murder mysteries with suspects, logic grids you can tick, matchstick sums, word ladders, number patterns and spot-the-difference pictures, all drawn by the theme from the puzzle's own data. Earlier puzzles sit below as an illustrated street, the blog is one strip at the end. CSV import schedules one puzzle per day; the homepage switches by itself, even behind page caches.
Version: 1.0.1
Requires at least: 6.2
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hmmporium
Tags: blog, custom-colors, custom-logo, custom-menu, featured-images, footer-widgets, right-sidebar, threaded-comments, translation-ready
*/

/* ---------- Tokens ---------- */
:root {
	--hmm-night: #14261F;
	--hmm-forest: #1E4A38;
	--hmm-moss: #2B6A4B;
	--hmm-lime: #A6D84A;
	--hmm-sun: #FFC83D;
	--hmm-tomato: #EF5B4C;
	--hmm-grape: #6C3BAA;
	--hmm-grape-deep: #4A2578;
	--hmm-teal: #1FA6A6;
	--hmm-ink: #1B2420;
	--hmm-muted: #4B5A53;
	--hmm-page: #FFFFFF;
	--hmm-mint: #EAF4DA;
	--hmm-line: #D5DDD8;
	--hmm-on-dark: #FFFFFF;
	--hmm-on-dark-2: #C9D6CF;

	--hmm-grape-soft: #EDE4F8;
	--hmm-tomato-soft: #FDE4E1;
	--hmm-teal-soft: #DDF3F3;
	--hmm-sun-soft: #FFF0C7;
	--hmm-lime-soft: #EAF4DA;
	--hmm-night-soft: #E3E9E6;
	--hmm-tomato-text: #8C2318;
	--hmm-teal-text: #0C5A5A;
	--hmm-sun-text: #6B4A00;
	--hmm-lime-text: #2B5A1E;

	--hmm-head: 'Poppins', 'Segoe UI', Arial, sans-serif;
	--hmm-body: 'Nunito', 'Segoe UI', Arial, sans-serif;
	--hmm-signfont: 'Pacifico', 'Brush Script MT', cursive;

	--hmm-r-xl: 32px;
	--hmm-r-lg: 24px;
	--hmm-r-md: 18px;
	--hmm-r-sm: 12px;
	--hmm-pill: 999px;
	--hmm-shadow: 0 6px 24px rgba(20, 38, 31, .14);
	--hmm-wrap: 1200px;
	--hmm-gutter: 24px;
	--hmm-text: 760px;

	--hmm-logo-h: 52px;
	--hmm-logo-h-phone: 40px;
	--hmm-textlogo: 28px;
	--hmm-flogo-h: 48px;
	--hmm-mlogo-h: 40px;
}
.hmm-sysfonts { --hmm-head: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; --hmm-body: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; --hmm-signfont: Georgia, serif; }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }
html.hmm-locked { overflow: hidden; }
body { margin: 0; background: var(--hmm-page); color: var(--hmm-ink); font-family: var(--hmm-body); font-size: 18px; line-height: 1.65; overflow-x: hidden; }
img, svg, video { max-width: 100%; height: auto; }
a { color: var(--hmm-grape); text-underline-offset: 3px; }
a:hover { color: var(--hmm-grape-deep); }
h1, h2, h3, h4, h5, h6 { font-family: var(--hmm-head); line-height: 1.2; color: inherit; margin: 0 0 .5em; }
p { margin: 0 0 1em; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--hmm-grape); outline-offset: 2px; }
.hmm-head :focus-visible, .hmm-band :focus-visible, .hmm-foot :focus-visible, .hmm-map :focus-visible, .hmm-yesterday :focus-visible { outline-color: var(--hmm-sun); }
.screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; }
.skip-link:focus { clip: auto; clip-path: none; height: auto; width: auto; left: 12px; top: 12px; z-index: 1000; background: var(--hmm-sun); color: var(--hmm-night); padding: 12px 18px; border-radius: var(--hmm-pill); font-family: var(--hmm-head); font-weight: 700; text-decoration: none; }
.hmm-wrap { max-width: var(--hmm-wrap); margin: 0 auto; padding: 0 var(--hmm-gutter); }
.hmm-narrow { max-width: calc(var(--hmm-text) + 2 * var(--hmm-gutter)); }
@media (max-width: 600px) { :root { --hmm-gutter: 16px; } body { font-size: 17px; } }

/* Buttons */
.hmm-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--hmm-night); color: #fff; border: 0; border-radius: var(--hmm-pill); padding: 13px 26px; font-family: var(--hmm-head); font-weight: 700; font-size: 16px; text-decoration: none; cursor: pointer; transition: transform .15s ease, background .15s ease; }
.hmm-btn:hover { color: #fff; background: var(--hmm-moss); transform: translateY(-1px); }
.hmm-btn--lime { background: var(--hmm-lime); color: var(--hmm-night); }
.hmm-btn--lime:hover { background: #B8E35F; color: var(--hmm-night); }
.hmm-btn--small { padding: 9px 18px; font-size: 14px; }
.hmm-more { font-family: var(--hmm-head); font-weight: 700; font-size: 16px; color: var(--hmm-grape); text-decoration: none; }
.hmm-more:hover { text-decoration: underline; }
.hmm-sec-title { font-family: var(--hmm-head); font-weight: 800; font-size: 30px; letter-spacing: -.01em; margin: 0; }

/* ---------- Header: shop sign ---------- */
.hmm-head { background: var(--hmm-night); color: var(--hmm-on-dark); position: relative; z-index: 50; }
.hmm-sticky .hmm-head { position: sticky; top: 0; }
.admin-bar.hmm-sticky .hmm-head { top: 32px; }
@media (max-width: 782px) { .admin-bar.hmm-sticky .hmm-head { top: 46px; } }
.hmm-head__in { display: flex; align-items: center; gap: 16px 28px; min-height: 84px; padding-top: 14px; padding-bottom: 14px; }
.hmm-brand { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.hmm-logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.hmm-logo__img { height: var(--hmm-logo-h); width: auto; display: block; }
.hmm-sign { display: inline-block; background: var(--hmm-sun); color: var(--hmm-night); border: 3px solid #fff; border-radius: 14px 14px 14px 4px; padding: 0 16px 4px; font-family: var(--hmm-signfont); font-size: var(--hmm-textlogo); line-height: 1.35; transform: rotate(-2deg); white-space: nowrap; box-shadow: 0 4px 0 rgba(0, 0, 0, .25); transition: transform .2s ease; }
.hmm-logo:hover .hmm-sign { transform: rotate(0deg); }
.hmm-badge { background: var(--hmm-tomato); color: var(--hmm-night); border-radius: 6px; padding: 3px 9px; font-family: var(--hmm-head); font-weight: 800; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.hmm-nav { margin-left: auto; }
.hmm-nav .menu { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 22px; }
.hmm-nav a { color: var(--hmm-on-dark); text-decoration: none; font-family: var(--hmm-head); font-weight: 600; font-size: 15px; padding: 10px 0; display: inline-block; border-bottom: 3px solid transparent; }
.hmm-nav a:hover, .hmm-nav .current-menu-item > a, .hmm-nav .current_page_item > a { border-bottom-color: var(--hmm-lime); color: #fff; }
.hmm-head__actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.hmm-surprise { display: inline-flex; align-items: center; gap: 8px; background: var(--hmm-lime); color: var(--hmm-night); border-radius: var(--hmm-pill); padding: 11px 18px; font-family: var(--hmm-head); font-weight: 700; font-size: 15px; text-decoration: none; white-space: nowrap; }
.hmm-surprise:hover { background: #B8E35F; color: var(--hmm-night); }
.hmm-mapbtn { display: inline-flex; align-items: center; gap: 8px; background: transparent; color: #fff; border: 2px solid rgba(255, 255, 255, .7); border-radius: var(--hmm-pill); padding: 9px 16px; min-height: 44px; font-family: var(--hmm-head); font-weight: 700; font-size: 15px; cursor: pointer; }
.hmm-mapbtn:hover { border-color: #fff; background: rgba(255, 255, 255, .08); }
.hmm-head--classic .hmm-head__in { min-height: 72px; }
@media (max-width: 899px) {
	.hmm-nav { display: none; }
	.hmm-head__actions { margin-left: auto; }
	.hmm-head__in { min-height: 72px; gap: 12px; }
	.hmm-logo__img { height: var(--hmm-logo-h-phone); }
	.hmm-sign { font-size: calc(var(--hmm-textlogo) * .82); padding: 0 12px 3px; }
}
@media (max-width: 520px) {
	.hmm-badge { display: none; }
	.hmm-surprise { padding: 11px 13px; }
	.hmm-surprise span, .hmm-mapbtn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); }
	.hmm-mapbtn { padding: 9px 11px; }
}
.hmm-below-header { background: var(--hmm-night-soft); padding: 12px 0; }

/* ---------- Town map (menu sheet) ---------- */
.hmm-map { position: fixed; inset: 0; z-index: 200; background: rgba(20, 38, 31, .55); }
.hmm-map[hidden] { display: none; }
.hmm-map__sheet { position: absolute; top: 0; right: 0; bottom: 0; width: min(460px, 100%); background: var(--hmm-night); color: var(--hmm-on-dark); overflow-y: auto; padding: 18px 22px 40px; transform: translateX(100%); transition: transform .22s ease; display: flex; flex-direction: column; gap: 18px; }
.hmm-map.is-open .hmm-map__sheet { transform: none; }
@media (prefers-reduced-motion: reduce) { .hmm-map__sheet { transition: none; } }
.hmm-map__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hmm-map__top .hmm-logo__img { height: var(--hmm-mlogo-h); }
.hmm-map__top .hmm-sign { font-size: 22px; }
.hmm-map__close { display: inline-flex; align-items: center; gap: 6px; background: var(--hmm-tomato); color: var(--hmm-night); border: 0; border-radius: var(--hmm-pill); padding: 10px 16px; min-height: 44px; font-family: var(--hmm-head); font-weight: 800; font-size: 14px; cursor: pointer; }
.hmm-map__label { margin: 4px 0 0; font-family: var(--hmm-head); font-weight: 700; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--hmm-lime); }
.hmm-map__kinds { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.hmm-map__kinds a { display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: #fff; background: rgba(255, 255, 255, .06); border-radius: var(--hmm-r-md); padding: 8px 8px 12px; transition: background .15s ease; }
.hmm-map__kinds a:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.hmm-map__art svg { display: block; width: 100%; border-radius: 12px; }
.hmm-map__name { font-family: var(--hmm-head); font-weight: 700; font-size: 15px; margin-top: 6px; line-height: 1.25; }
.hmm-map__n { font-size: 13px; color: var(--hmm-on-dark-2); }
.hmm-map__menu .menu, .hmm-map__small .menu { list-style: none; margin: 0; padding: 0; }
.hmm-map__menu a { display: block; color: #fff; text-decoration: none; font-family: var(--hmm-head); font-weight: 700; font-size: 20px; padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.hmm-map__small .menu { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.hmm-map__small a { color: var(--hmm-on-dark-2); font-size: 15px; padding: 6px 0; display: inline-block; }
.hmm-map__surprise { align-self: flex-start; }
.hmm-map .hmm-search { background: #fff; }

/* Search */
.hmm-search { display: flex; align-items: center; border: 2px solid var(--hmm-ink); border-radius: var(--hmm-pill); background: #fff; overflow: hidden; max-width: 560px; }
.hmm-search__input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; padding: 12px 18px; font-size: 16px; color: var(--hmm-ink); }
.hmm-search__input:focus { outline: none; }
.hmm-search:focus-within { box-shadow: 0 0 0 3px var(--hmm-sun); }
.hmm-search__btn { flex: 0 0 auto; width: 48px; height: 48px; border: 0; background: var(--hmm-night); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: var(--hmm-pill); margin: 2px; }

/* ---------- Night band (homepage, puzzle pages, archives) ---------- */
.hmm-band { background: var(--hmm-night); color: var(--hmm-on-dark); position: relative; padding-top: 22px; }
.hmm-band__wave { display: block; width: 100%; height: 70px; margin-top: 36px; }
.hmm-band__wave path { fill: var(--hmm-page); }
.hmm-band--short { padding-top: 34px; }
.hmm-band--short .hmm-band__wave { margin-top: 20px; height: 60px; }
.hmm-intro { text-align: center; max-width: 860px; margin: 0 auto 28px; }
.hmm-intro__kicker { margin: 0 0 8px; font-family: var(--hmm-head); font-weight: 700; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--hmm-lime); }
.hmm-intro__h1 { margin: 0; font-family: var(--hmm-head); font-weight: 800; font-size: clamp(30px, 4.2vw, 44px); line-height: 1.12; letter-spacing: -.015em; color: #fff; }
.hmm-intro__text { margin: 12px 0 0; color: var(--hmm-on-dark-2); font-size: 18px; max-width: 720px; }
.hmm-band--short .hmm-intro__kicker, .hmm-band--short .hmm-intro__h1 { text-align: left; }
.hmm-band--puzzle .hmm-intro__kicker { margin-bottom: 14px; }
.hmm-archive-note { text-align: center; margin: -12px 0 16px; color: var(--hmm-sun); font-weight: 700; }
.hmm-empty { background: #fff; color: var(--hmm-ink); border-radius: var(--hmm-r-xl); padding: 40px; text-align: center; }

/* Breadcrumbs */
.hmm-crumbs ol { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; font-size: 14px; font-weight: 600; }
.hmm-crumbs li { display: inline-flex; align-items: center; }
.hmm-crumbs li + li::before { content: ''; width: 18px; height: 2px; margin: 0 8px; background: repeating-linear-gradient(90deg, currentColor 0 4px, transparent 4px 7px); opacity: .7; }
.hmm-crumbs a { color: inherit; text-decoration: none; }
.hmm-crumbs a:hover { text-decoration: underline; }
.hmm-band .hmm-crumbs { color: var(--hmm-on-dark-2); }
.hmm-entry .hmm-crumbs { color: var(--hmm-muted); }

/* ---------- Puzzle hero card ---------- */
.hmm-hero { background: #fff; color: var(--hmm-ink); border-radius: var(--hmm-r-xl); overflow: hidden; display: flex; flex-wrap: wrap; box-shadow: 0 24px 0 -8px var(--hmm-moss); }
.hmm-hero__art { flex: 1 1 420px; min-width: 0; background: var(--hmm-forest); min-height: 320px; position: relative; }
.hmm-hero__art > svg, .hmm-hero__art > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.hmm-hero__body { flex: 1 1 480px; min-width: 0; padding: 36px; }
.hmm-hero--wide .hmm-hero__art { flex-basis: 100%; min-height: 0; height: 280px; }
.hmm-hero--wide .hmm-hero__body { flex-basis: 100%; }
@media (max-width: 600px) {
	.hmm-hero { border-radius: var(--hmm-r-lg); box-shadow: 0 14px 0 -6px var(--hmm-moss); }
	.hmm-hero__art { min-height: 220px; flex-basis: 100%; }
	.hmm-hero--wide .hmm-hero__art { height: 170px; }
	.hmm-hero__body { padding: 24px 18px; }
}

/* ---------- Puzzle body ---------- */
.hmm-puzzle { display: flex; flex-direction: column; gap: 16px; }
.hmm-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.hmm-chip { display: inline-flex; align-items: center; gap: 6px; border-radius: var(--hmm-pill); padding: 4px 14px; font-family: var(--hmm-head); font-weight: 700; font-size: 13px; line-height: 1.6; text-decoration: none; }
.hmm-chip--kind { color: var(--hmm-ink); }
.hmm-chip--kind:hover { color: var(--hmm-ink); filter: brightness(1.06); }
.hmm-tone-grape { background: var(--hmm-grape); color: #fff !important; }
.hmm-tone-tomato { background: var(--hmm-tomato); }
.hmm-tone-teal { background: var(--hmm-teal); }
.hmm-tone-sun { background: var(--hmm-sun); }
.hmm-tone-night { background: var(--hmm-night); color: #fff !important; }
.hmm-tone-lime { background: var(--hmm-lime); }
.hmm-chip--level { background: var(--hmm-grape-soft); color: var(--hmm-grape-deep); }
.hmm-chip--time { background: var(--hmm-lime-soft); color: var(--hmm-lime-text); }
.hmm-dots { display: inline-flex; gap: 3px; }
.hmm-dots i { width: 8px; height: 8px; border-radius: 50%; border: 2px solid currentColor; display: block; }
.hmm-dots i.on { background: currentColor; }
.hmm-puzzle__title { margin: 0; font-family: var(--hmm-head); font-weight: 800; font-size: clamp(26px, 3vw, 34px); line-height: 1.15; letter-spacing: -.01em; }
.hmm-puzzle__title a { color: inherit; text-decoration: none; }
.hmm-puzzle__title a:hover { text-decoration: underline; }
.hmm-puzzle__q { font-size: 18px; }
.hmm-puzzle__q p:last-child { margin-bottom: 0; }
.hmm-puzzle__actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; margin-top: 4px; }
.hmm-reveal { flex: 1 1 200px; min-width: 0; }
.hmm-reveal > summary { list-style: none; cursor: pointer; text-align: center; border-radius: var(--hmm-pill); padding: 12px 18px; font-family: var(--hmm-head); font-weight: 700; font-size: 15px; border: 2px solid var(--hmm-ink); user-select: none; transition: transform .12s ease; }
.hmm-reveal > summary::-webkit-details-marker { display: none; }
.hmm-reveal > summary:hover { transform: translateY(-1px); }
.hmm-reveal--answer > summary { background: var(--hmm-grape); border-color: var(--hmm-grape); color: #fff; }
.hmm-reveal[open] > summary { box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .15); }
.hmm-reveal__body { margin-top: 10px; border-radius: var(--hmm-r-md); padding: 14px 16px; font-size: 16px; }
.hmm-reveal--hint .hmm-reveal__body { background: var(--hmm-sun-soft); }
.hmm-reveal--answer .hmm-reveal__body { background: var(--hmm-grape-soft); }
.hmm-reveal__body p:last-child { margin-bottom: 0; }
.hmm-answer { font-family: var(--hmm-head); font-size: 18px; margin-bottom: 6px !important; }
.hmm-puzzle__more { margin: 0; font-size: 15px; }
.hmm-puzzle__more a { font-weight: 700; }

/* Mystery suspects */
.hmm-suspects__label { margin: 0 0 8px; font-family: var(--hmm-head); font-weight: 700; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--hmm-tomato-text); }
.hmm-suspects__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.hmm-suspect { text-align: left; background: #fff; border: 2px solid var(--hmm-line); border-radius: var(--hmm-r-md); padding: 12px; display: flex; gap: 12px; align-items: center; cursor: pointer; transition: border-color .15s ease, transform .15s ease, background .15s ease; }
.hmm-suspect:hover { border-color: var(--hmm-ink); transform: translateY(-2px); }
.hmm-suspect .hmm-avatar { flex: 0 0 52px; }
.hmm-suspect strong { display: block; font-family: var(--hmm-head); font-size: 15px; }
.hmm-suspect span span { display: block; font-size: 15px; color: var(--hmm-muted); line-height: 1.4; }
.hmm-suspect.is-wrong { border-color: var(--hmm-tomato); background: var(--hmm-tomato-soft); }
.hmm-suspect.is-right { border-color: var(--hmm-moss); background: var(--hmm-lime-soft); }
.hmm-suspects__verdict { margin: 10px 0 0; font-weight: 800; min-height: 1.6em; }
.hmm-suspects__verdict.is-right { color: var(--hmm-lime-text); }
.hmm-suspects__verdict.is-wrong { color: var(--hmm-tomato-text); }

/* Logic grid */
.hmm-clues { margin: 0; padding: 0; list-style: none; counter-reset: clue; display: grid; gap: 6px; }
.hmm-clues li { counter-increment: clue; }
.hmm-clues label { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; padding: 8px 12px; border-radius: var(--hmm-r-sm); background: var(--hmm-teal-soft); }
.hmm-clues label::before { content: counter(clue); flex: 0 0 26px; height: 26px; border-radius: 50%; background: var(--hmm-teal-text); color: #fff; font-family: var(--hmm-head); font-weight: 800; font-size: 13px; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.hmm-clues input { margin-top: 6px; accent-color: var(--hmm-teal-text); }
.hmm-clues input:checked + span { text-decoration: line-through; color: var(--hmm-muted); }
.hmm-grid__help { margin: 0; font-size: 14px; color: var(--hmm-muted); }
.hmm-grids { display: flex; flex-wrap: wrap; gap: 18px; }
.hmm-grid-wrap { overflow-x: auto; max-width: 100%; }
.hmm-grid { border-collapse: collapse; font-size: 14px; }
.hmm-grid caption { text-align: left; font-family: var(--hmm-head); font-weight: 700; font-size: 14px; padding-bottom: 6px; }
.hmm-grid th { font-family: var(--hmm-head); font-weight: 600; padding: 4px 8px; white-space: nowrap; }
.hmm-grid thead th { font-size: 13px; text-align: center; }
.hmm-grid tbody th { text-align: right; }
.hmm-grid td { padding: 0; border: 2px solid var(--hmm-night); }
.hmm-cell { width: 42px; height: 42px; border: 0; background: #fff; cursor: pointer; font-size: 18px; font-weight: 800; color: var(--hmm-tomato-text); display: block; }
.hmm-cell[data-s="2"] { color: var(--hmm-lime-text); background: var(--hmm-lime-soft); }
.hmm-cell:hover { background: var(--hmm-teal-soft); }

/* Picture puzzle */
.hmm-pic { display: grid; gap: 14px; }
.hmm-pic--two { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.hmm-pic__frame { margin: 0; position: relative; }
.hmm-pic__frame img { display: block; width: 100%; height: auto; border-radius: var(--hmm-r-md); border: 3px solid var(--hmm-night); }
.hmm-pic__frame figcaption { font-family: var(--hmm-head); font-weight: 700; font-size: 13px; margin-top: 6px; color: var(--hmm-muted); }
.hmm-pic__frame--find { cursor: crosshair; }
.hmm-pic__mark { position: absolute; width: 46px; height: 46px; margin: -23px 0 0 -23px; border: 4px solid var(--hmm-tomato); border-radius: 50%; pointer-events: none; box-shadow: 0 0 0 3px #fff; animation: hmm-pop .25s ease; }
.hmm-pic__mark.is-auto { border-color: var(--hmm-grape); border-style: dashed; }
@keyframes hmm-pop { from { transform: scale(.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.hmm-pic__count { margin: 0; font-family: var(--hmm-head); font-weight: 700; color: var(--hmm-sun-text); }

/* Matchsticks, ladder, sequence */
.hmm-matches { background: var(--hmm-night); border-radius: var(--hmm-r-md); padding: 18px; }
.hmm-matches svg { display: block; width: 100%; max-height: 170px; }
.hmm-ladder { display: flex; flex-direction: column; align-items: center; gap: 8px; background: var(--hmm-tomato-soft); border-radius: var(--hmm-r-md); padding: 18px; }
.hmm-rung { display: flex; gap: 6px; }
.hmm-rung span { width: 46px; height: 46px; border-radius: 10px; border: 2px solid var(--hmm-night); background: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--hmm-head); font-weight: 800; font-size: 22px; }
.hmm-rung.is-end span { background: var(--hmm-sun); }
.hmm-rung input { width: calc(var(--len, 4) * 52px - 6px); height: 46px; border: 2px dashed var(--hmm-night); border-radius: 10px; background: rgba(255, 255, 255, .7); text-align: center; text-transform: uppercase; letter-spacing: .55em; padding-left: .55em; font-family: var(--hmm-head); font-weight: 800; font-size: 22px; }
.hmm-seq { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; background: var(--hmm-lime-soft); border-radius: var(--hmm-r-md); padding: 20px; }
.hmm-seq span { min-width: 60px; height: 60px; padding: 0 10px; border-radius: 14px; border: 2px solid var(--hmm-night); background: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--hmm-head); font-weight: 800; font-size: 24px; }
.hmm-seq span.is-q { background: var(--hmm-sun); }
@media (max-width: 420px) {
	.hmm-rung span { width: 38px; height: 38px; font-size: 18px; }
	.hmm-rung input { width: calc(var(--len, 4) * 44px - 6px); height: 38px; font-size: 18px; }
	.hmm-seq span { min-width: 48px; height: 48px; font-size: 20px; }
}

/* Yesterday line */
.hmm-yesterday { margin-top: 34px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; background: rgba(255, 255, 255, .07); border-radius: var(--hmm-r-md); padding: 14px 20px; }
.hmm-yesterday__label { margin: 0; font-family: var(--hmm-head); font-weight: 700; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--hmm-lime); }
.hmm-yesterday__q { margin: 0; flex: 1 1 260px; font-family: var(--hmm-head); font-weight: 600; }
.hmm-yesterday__q a { color: #fff; text-decoration: none; }
.hmm-yesterday__q a:hover { text-decoration: underline; }
.hmm-yesterday__a summary { cursor: pointer; color: var(--hmm-sun); font-weight: 800; list-style: none; padding: 6px 0; }
.hmm-yesterday__a summary::-webkit-details-marker { display: none; }
.hmm-yesterday__a[open] summary { display: none; }
.hmm-yesterday__a span { background: var(--hmm-sun); color: var(--hmm-night); border-radius: var(--hmm-pill); padding: 6px 14px; font-family: var(--hmm-head); font-weight: 800; }

/* Doors (previous / next puzzle) */
.hmm-doors { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-top: 30px; }
.hmm-door { display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: #fff; background: rgba(255, 255, 255, .07); border-radius: var(--hmm-r-md); padding: 14px 20px; }
.hmm-door:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.hmm-door--next { text-align: right; }
.hmm-door__dir { font-family: var(--hmm-head); font-weight: 700; font-size: 13px; color: var(--hmm-lime); letter-spacing: .06em; }
.hmm-door__t { font-family: var(--hmm-head); font-weight: 700; }

/* ---------- The street (cards) ---------- */
.hmm-street { padding: 24px 0 72px; }
.hmm-street--tight { padding-top: 10px; }
.hmm-street__head { text-align: center; margin: 0 auto 22px; max-width: 760px; }
.hmm-street__t { margin: 0; font-family: var(--hmm-head); font-weight: 800; font-size: clamp(26px, 3.4vw, 36px); line-height: 1.15; }
.hmm-street__sub { margin: 8px 0 0; color: var(--hmm-muted); }
.hmm-street__more { text-align: center; margin: 36px 0 0; }
.hmm-street__empty { text-align: center; color: var(--hmm-muted); }
.hmm-filter { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 28px; }
.hmm-filter__chip { border: 0; border-radius: var(--hmm-pill); padding: 11px 18px; font-family: var(--hmm-head); font-weight: 600; font-size: 14px; cursor: pointer; text-decoration: none; background: var(--hmm-night-soft); color: var(--hmm-night); transition: transform .12s ease; }
.hmm-filter__chip:hover { transform: translateY(-1px); }
.hmm-filter__chip.is-on { background: var(--hmm-night) !important; color: #fff !important; }
.hmm-filter__n { opacity: .7; font-weight: 500; }
.hmm-soft-grape { background: var(--hmm-grape-soft); color: var(--hmm-grape-deep); }
.hmm-soft-tomato { background: var(--hmm-tomato-soft); color: var(--hmm-tomato-text); }
.hmm-soft-teal { background: var(--hmm-teal-soft); color: var(--hmm-teal-text); }
.hmm-soft-sun { background: var(--hmm-sun-soft); color: var(--hmm-sun-text); }
.hmm-soft-night { background: var(--hmm-night-soft); color: var(--hmm-night); }
.hmm-soft-lime { background: var(--hmm-lime-soft); color: var(--hmm-lime-text); }
.hmm-levels { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 10px; margin: -12px 0 28px; font-size: 15px; }
.hmm-levels__label { font-weight: 700; color: var(--hmm-muted); }
.hmm-levels a { text-decoration: none; color: var(--hmm-ink); padding: 6px 12px; border-radius: var(--hmm-pill); border: 2px solid var(--hmm-line); font-weight: 700; }
.hmm-levels a.is-on, .hmm-levels a:hover { border-color: var(--hmm-ink); }
.hmm-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 24px; }
.hmm-card[hidden] { display: none; }
.hmm-card__link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: var(--hmm-ink); background: #fff; border-radius: var(--hmm-r-lg); overflow: hidden; box-shadow: var(--hmm-shadow); transition: transform .18s ease, box-shadow .18s ease; }
.hmm-card__link:hover { color: var(--hmm-ink); transform: translateY(-4px); box-shadow: 0 14px 30px rgba(20, 38, 31, .18); }
.hmm-card__art svg, .hmm-card__art img { display: block; width: 100%; aspect-ratio: 2 / 1; object-fit: cover; height: auto; }
.hmm-card__body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 6px; }
.hmm-card__meta { margin: 0; font-family: var(--hmm-head); font-weight: 700; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.hmm-ink-grape { color: var(--hmm-grape-deep); }
.hmm-ink-tomato { color: var(--hmm-tomato-text); }
.hmm-ink-teal { color: var(--hmm-teal-text); }
.hmm-ink-sun { color: var(--hmm-sun-text); }
.hmm-ink-night { color: var(--hmm-night); }
.hmm-ink-lime { color: var(--hmm-lime-text); }
.hmm-card__title { margin: 0; font-family: var(--hmm-head); font-weight: 700; font-size: 21px; line-height: 1.25; }
.hmm-card__text { margin: 0; font-size: 15px; color: var(--hmm-muted); line-height: 1.5; }

/* ---------- Blog strip and post cards ---------- */
.hmm-blogstrip { background: var(--hmm-mint); padding: 64px 0 72px; }
.hmm-blogstrip__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 24px; }
.hmm-posts { display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); }
.hmm-posts--list { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
.hmm-post__link { display: flex; flex-direction: column; height: 100%; background: #fff; border-radius: var(--hmm-r-lg); overflow: hidden; text-decoration: none; color: var(--hmm-ink); box-shadow: var(--hmm-shadow); transition: transform .18s ease; }
.hmm-post__link:hover { color: var(--hmm-ink); transform: translateY(-3px); }
.hmm-post__img img, .hmm-post__ph svg { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; height: auto; }
.hmm-post__body { padding: 18px 20px 22px; }
.hmm-post__cat { margin: 0 0 4px; font-family: var(--hmm-head); font-weight: 700; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--hmm-lime-text); }
.hmm-post__title { margin: 0 0 6px; font-family: var(--hmm-head); font-weight: 700; font-size: 19px; line-height: 1.3; }
.hmm-post__meta { margin: 0; font-size: 14px; color: var(--hmm-muted); }

/* ---------- Page heads and columns ---------- */
.hmm-pagehead { background: var(--hmm-mint); padding: 40px 0 34px; margin-bottom: 40px; }
.hmm-pagehead__kicker { margin: 0 0 6px; font-family: var(--hmm-head); font-weight: 700; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--hmm-lime-text); }
.hmm-pagehead__t { margin: 0; font-family: var(--hmm-head); font-weight: 800; font-size: clamp(30px, 4vw, 42px); }
.hmm-pagehead__text { margin-top: 10px; color: var(--hmm-muted); max-width: 720px; }
.hmm-cols { display: grid; gap: 48px; grid-template-columns: minmax(0, 1fr); padding-bottom: 72px; }
.hmm-cols--right { grid-template-columns: minmax(0, 1fr) 320px; }
.hmm-cols--left { grid-template-columns: 320px minmax(0, 1fr); }
.hmm-cols--left .hmm-cols__side { order: -1; }
.hmm-cols--none .hmm-cols__main.hmm-entry { max-width: var(--hmm-text); margin: 0 auto; width: 100%; }
@media (max-width: 960px) { .hmm-cols--right, .hmm-cols--left { grid-template-columns: minmax(0, 1fr); } .hmm-cols--left .hmm-cols__side { order: 0; } }
.hmm-pages, .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 36px; }
.page-numbers { display: inline-flex; min-width: 44px; height: 44px; align-items: center; justify-content: center; padding: 0 12px; border-radius: var(--hmm-pill); background: var(--hmm-night-soft); color: var(--hmm-night); text-decoration: none; font-family: var(--hmm-head); font-weight: 700; }
.page-numbers.current { background: var(--hmm-night); color: #fff; }
.hmm-none { font-family: var(--hmm-head); font-weight: 800; font-size: 26px; }
.hmm-none-box { text-align: center; padding: 30px 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }

/* ---------- Article ---------- */
.hmm-article { padding-top: 34px; }
.hmm-entry__head { margin-bottom: 24px; }
.hmm-entry__cat { display: inline-block; background: var(--hmm-lime); color: var(--hmm-night); border-radius: var(--hmm-pill); padding: 4px 14px; font-family: var(--hmm-head); font-weight: 700; font-size: 13px; text-decoration: none; margin-bottom: 14px; }
.hmm-entry__cat:hover { color: var(--hmm-night); background: #B8E35F; }
.hmm-entry__title { font-family: var(--hmm-head); font-weight: 800; font-size: clamp(32px, 4.4vw, 46px); line-height: 1.1; letter-spacing: -.015em; margin: 0 0 14px; }
.hmm-entry__dek { font-size: 21px; line-height: 1.5; color: var(--hmm-muted); margin: 0 0 18px; }
.hmm-byline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; margin: 0; font-size: 15px; color: var(--hmm-muted); padding: 12px 0; border-top: 2px dashed var(--hmm-line); border-bottom: 2px dashed var(--hmm-line); }
.hmm-byline a { color: var(--hmm-ink); font-weight: 700; text-decoration: none; }
.hmm-byline__sep { width: 6px; height: 6px; border-radius: 50%; background: var(--hmm-lime); margin: 0 12px; display: inline-block; }
.hmm-byline__upd { color: var(--hmm-lime-text); font-weight: 700; }
.hmm-entry__img { margin: 0 0 30px; }
.hmm-entry__img img { display: block; width: 100%; border-radius: var(--hmm-r-lg); }
.hmm-entry__img figcaption { font-size: 14px; color: var(--hmm-muted); margin-top: 8px; }
.entry-content { font-size: 19px; line-height: 1.75; }
.entry-content::after { content: ''; display: table; clear: both; }
:where(.entry-content) :where(h2) { font-weight: 800; font-size: 30px; margin: 1.6em 0 .55em; letter-spacing: -.01em; }
:where(.entry-content) :where(h3) { font-weight: 700; font-size: 23px; margin: 1.4em 0 .5em; }
:where(.entry-content) :where(h4) { font-weight: 700; font-size: 19px; margin: 1.3em 0 .4em; }
:where(.entry-content) :where(p, ul, ol, blockquote, figure, table, pre) { margin: 0 0 1.15em; }
:where(.entry-content) :where(ul, ol) { padding-left: 1.3em; }
:where(.entry-content) :where(li) { margin-bottom: .35em; }
:where(.entry-content) :where(li)::marker { color: var(--hmm-grape); font-weight: 800; }
:where(.entry-content) :where(blockquote) { margin-left: 0; margin-right: 0; padding: 22px 26px; background: var(--hmm-grape-soft); border-radius: var(--hmm-r-lg); font-size: 21px; font-family: var(--hmm-head); font-weight: 600; line-height: 1.5; }
:where(.entry-content) :where(blockquote) p:last-child { margin-bottom: 0; }
:where(.entry-content) :where(img, video, iframe, embed, object, figure, table, .wp-caption, .wp-block-embed, .wp-block-image, .alignwide, .alignfull, .wp-video, .wp-audio-shortcode) { max-width: 100% !important; }
:where(.entry-content) :where(img) { height: auto; border-radius: var(--hmm-r-md); }
:where(.entry-content) :where(.alignwide, .alignfull) { margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; }
:where(.entry-content) :where(.wp-caption) { width: auto !important; }
:where(.entry-content) :where(.wp-caption-text, figcaption) { font-size: 14px; color: var(--hmm-muted); margin-top: 6px; }
:where(.entry-content) :where(.alignleft) { float: left; margin: 6px 22px 12px 0; max-width: 50% !important; }
:where(.entry-content) :where(.alignright) { float: right; margin: 6px 0 12px 22px; max-width: 50% !important; }
:where(.entry-content) :where(.aligncenter) { display: block; margin-left: auto; margin-right: auto; }
@media (max-width: 600px) { .entry-content :where(.alignleft, .alignright) { float: none; margin: 0 0 1em; max-width: 100% !important; } .entry-content { font-size: 18px; } }
:where(.entry-content) :where(iframe) { width: 100%; border: 0; }
:where(.entry-content) :where(iframe[src*="youtube"], iframe[src*="youtu.be"], iframe[src*="vimeo"], iframe[src*="dailymotion"]) { aspect-ratio: 16 / 9; height: auto; }
:where(.entry-content) :where(table) { width: 100%; border-collapse: collapse; font-size: 16px; display: block; overflow-x: auto; }
:where(.entry-content) :where(th, td) { border: 1px solid var(--hmm-line); padding: 8px 12px; text-align: left; }
:where(.entry-content) :where(th) { background: var(--hmm-mint); font-family: var(--hmm-head); }
:where(.entry-content) :where(pre) { background: var(--hmm-night); color: #fff; padding: 16px; border-radius: var(--hmm-r-sm); overflow-x: auto; font-size: 15px; }
:where(.entry-content) :where(hr) { border: 0; height: 0; border-top: 3px dashed var(--hmm-line); margin: 2em 0; }
:where(.entry-content) :where(a) { font-weight: 700; }
.hmm-entry__content--full { max-width: none; }
.hmm-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 26px 0; font-size: 14px; }
.hmm-tags span { font-weight: 700; color: var(--hmm-muted); margin-right: 4px; }
.hmm-tags a { background: var(--hmm-night-soft); color: var(--hmm-night); border-radius: var(--hmm-pill); padding: 5px 12px; text-decoration: none; font-weight: 700; }
.hmm-afterpost { margin: 30px 0; }

/* Route (contents) */
.hmm-route { background: var(--hmm-mint); border-radius: var(--hmm-r-lg); padding: 20px 24px 22px; margin: 0 0 1.6em; }
.hmm-route__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hmm-route__title { margin: 0; font-family: var(--hmm-head); font-weight: 800; font-size: 19px; display: flex; align-items: center; gap: 10px; }
.hmm-route__title::before { content: ''; width: 22px; height: 22px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--hmm-tomato); box-shadow: inset 0 0 0 6px var(--hmm-tomato), inset 0 0 0 12px #fff; flex: 0 0 22px; }
.hmm-route__toggle { display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 2px solid var(--hmm-night); border-radius: var(--hmm-pill); padding: 5px 12px; font-family: var(--hmm-head); font-weight: 700; font-size: 13px; cursor: pointer; }
.hmm-route__toggle svg { transition: transform .15s ease; }
.hmm-route.is-closed .hmm-route__toggle svg { transform: rotate(-90deg); }
.hmm-route.is-closed .hmm-route__stops { display: none; }
.hmm-route__stops { list-style: none; margin: 16px 0 0 !important; padding: 0 !important; }
.hmm-route__stop { position: relative; margin: 0 !important; padding: 0 0 14px 46px; }
.hmm-route__stop::marker { content: none; }
.hmm-route__stop::before { content: ''; position: absolute; left: 14px; top: 30px; bottom: -2px; border-left: 3px dashed var(--hmm-moss); opacity: .55; }
.hmm-route__stop:last-child { padding-bottom: 0; }
.hmm-route__stop:last-child::before { display: none; }
.hmm-route__stop a { color: var(--hmm-ink); text-decoration: none; font-family: var(--hmm-head); font-weight: 600; font-size: 16px; line-height: 1.4; display: inline-block; padding-top: 3px; }
.hmm-route__stop a:hover { color: var(--hmm-grape); text-decoration: underline; }
.hmm-route__pin { position: absolute; left: 0; top: 0; width: 31px; height: 31px; border-radius: 50%; background: var(--hmm-grape); color: #fff; border: 3px solid #fff; font-family: var(--hmm-head); font-weight: 800; font-size: 13px; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 0 rgba(0, 0, 0, .15); }
.hmm-route__stop.is-here .hmm-route__pin { background: var(--hmm-sun); color: var(--hmm-night); }
.hmm-route__stop.is-here > a { color: var(--hmm-grape-deep); }
.hmm-route__stop.is-sub { padding-left: 64px; padding-bottom: 10px; }
.hmm-route__stop.is-sub a { font-weight: 500; font-size: 15px; }
.hmm-route__dot { position: absolute; left: 9px; top: 9px; width: 13px; height: 13px; border-radius: 50%; background: var(--hmm-lime); border: 2px solid var(--hmm-moss); }

/* Clue box, sources, embedded puzzle, collections */
.hmm-clue { background: var(--hmm-sun-soft); border-radius: var(--hmm-r-lg); padding: 20px 24px; margin: 0 0 1.3em; }
.hmm-clue__t { margin: 0 0 8px !important; font-family: var(--hmm-head); font-weight: 800; font-size: 18px; display: flex; align-items: center; gap: 10px; }
.hmm-clue__t span { width: 30px; height: 30px; border-radius: 50%; background: var(--hmm-grape); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 16px; }
.hmm-clue__b { font-size: 17px; }
.hmm-clue__b p:last-child { margin-bottom: 0; }
.hmm-sources { border-top: 3px dashed var(--hmm-line); padding-top: 16px; margin-top: 2em; font-size: 15px; }
.hmm-sources__t { font-family: var(--hmm-head); font-weight: 800; font-size: 16px; margin-bottom: 8px !important; }
.hmm-sources ol { padding-left: 1.3em; margin: 0; }
.hmm-sources a { font-weight: 600; word-break: break-word; }
.hmm-embed { border: 3px solid var(--hmm-night); border-radius: var(--hmm-r-lg); padding: 24px; margin: 0 0 1.5em; font-size: 17px; }
.hmm-embed .hmm-puzzle__title { font-size: 24px; margin: 0; }
.hmm-coll { list-style: none !important; padding: 0 !important; margin: 0 0 1.5em; display: grid; gap: 18px; }
.hmm-coll__item { display: flex; gap: 18px; padding: 0 0 18px; border-bottom: 2px dashed var(--hmm-line); margin: 0 !important; }
.hmm-coll__item::marker { content: none; }
.hmm-coll__n { flex: 0 0 48px; width: 48px; height: 48px; border-radius: 50%; background: var(--hmm-grape); color: #fff; font-family: var(--hmm-head); font-weight: 800; font-size: 18px; display: flex; align-items: center; justify-content: center; }
.hmm-coll__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.hmm-coll__title { margin: 4px 0 0 !important; font-size: 21px !important; }
.hmm-coll__q p:last-child { margin-bottom: 0; }
.hmm-coll__link { margin: 0 !important; font-size: 15px; }
@media (max-width: 520px) { .hmm-coll__item { gap: 12px; } .hmm-coll__n { flex-basis: 38px; width: 38px; height: 38px; font-size: 15px; } }

/* Author box */
.hmm-ab { display: flex; gap: 20px; align-items: flex-start; background: var(--hmm-grape-soft); border-radius: var(--hmm-r-lg); padding: 24px; margin: 34px 0; }
.hmm-ab__photo { flex: 0 0 96px; width: 96px; height: 96px; border-radius: 50%; overflow: hidden; border: 4px solid #fff; }
.hmm-ab__photo img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0; }
.hmm-ab__text { min-width: 0; }
.hmm-ab__label { margin: 0 0 2px; font-family: var(--hmm-head); font-weight: 700; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--hmm-grape-deep); }
.hmm-ab__name { margin: 0 0 6px; font-family: var(--hmm-head); font-weight: 800; font-size: 22px; }
.hmm-ab__bio { margin: 0 0 10px; font-size: 16px; }
.hmm-ab__links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 10px; font-size: 15px; }
.hmm-ab__links a { font-weight: 700; }
@media (max-width: 520px) { .hmm-ab { flex-direction: column; } }

/* Post nav, related, comments */
.hmm-pn { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin: 30px 0; }
.hmm-pn a { display: flex; flex-direction: column; gap: 4px; padding: 16px 20px; border: 2px solid var(--hmm-line); border-radius: var(--hmm-r-md); text-decoration: none; color: var(--hmm-ink); }
.hmm-pn a:hover { border-color: var(--hmm-ink); color: var(--hmm-ink); }
.hmm-pn span { font-family: var(--hmm-head); font-weight: 700; font-size: 13px; color: var(--hmm-grape); }
.hmm-pn strong { font-family: var(--hmm-head); font-size: 16px; line-height: 1.35; }
.hmm-pn__next { text-align: right; }
.hmm-related { border-top: 3px dashed var(--hmm-line); padding: 40px 0 72px; }
.hmm-related .hmm-sec-title { margin-bottom: 22px; }
.hmm-comments { margin-top: 40px; }
.hmm-comments .hmm-sec-title { font-size: 24px; margin-bottom: 16px; }
.hmm-comments__list { list-style: none; padding: 0; margin: 0 0 30px; }
.hmm-comments__list .children { list-style: none; padding-left: 28px; }
.hmm-comments__list .comment-body { background: var(--hmm-mint); border-radius: var(--hmm-r-md); padding: 16px 18px; margin-bottom: 12px; font-size: 16px; }
.hmm-comments__list .avatar { border-radius: 50%; vertical-align: middle; margin-right: 8px; }
.comment-metadata { font-size: 13px; }
.comment-form label { display: block; font-weight: 700; font-size: 15px; margin-bottom: 4px; }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea { width: 100%; border: 2px solid var(--hmm-line); border-radius: var(--hmm-r-sm); padding: 10px 12px; font-size: 16px; }
.comment-form input:focus, .comment-form textarea:focus { border-color: var(--hmm-ink); outline: none; }
.comment-form .form-submit { margin-top: 12px; }

/* Sidebar widgets */
.hmm-sidebar { display: flex; flex-direction: column; gap: 30px; }
.widget { font-size: 16px; }
.widget-title { font-family: var(--hmm-head); font-weight: 800; font-size: 18px; margin: 0 0 14px; display: flex; align-items: center; gap: 10px; }
.widget-title::after { content: ''; flex: 1 1 auto; height: 3px; background: repeating-linear-gradient(90deg, var(--hmm-lime) 0 10px, transparent 10px 16px); }
.widget ul { list-style: none; margin: 0; padding: 0; }
.widget ul li { padding: 6px 0; border-bottom: 1px solid var(--hmm-line); }
.widget ul a { color: var(--hmm-ink); text-decoration: none; font-weight: 600; }
.widget ul a:hover { color: var(--hmm-grape); }
.hmm-wtoday { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--hmm-ink); background: #fff; border-radius: var(--hmm-r-lg); overflow: hidden; box-shadow: var(--hmm-shadow); padding-bottom: 16px; }
.hmm-wtoday:hover { color: var(--hmm-ink); }
.hmm-wtoday__art svg { display: block; width: 100%; height: auto; }
.hmm-wtoday__kind { padding: 8px 16px 0; font-family: var(--hmm-head); font-weight: 700; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--hmm-grape-deep); }
.hmm-wtoday__title { padding: 0 16px; font-family: var(--hmm-head); font-weight: 700; font-size: 18px; line-height: 1.3; }
.hmm-wtoday__btn { margin: 6px 16px 0; align-self: flex-start; background: var(--hmm-lime); color: var(--hmm-night); border-radius: var(--hmm-pill); padding: 7px 14px; font-family: var(--hmm-head); font-weight: 700; font-size: 14px; }
.hmm-wlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.hmm-wlist li { display: flex; gap: 12px; align-items: flex-start; }
.hmm-wlist__pin { flex: 0 0 30px; height: 30px; border-radius: 50%; background: var(--hmm-grape); color: #fff; font-family: var(--hmm-head); font-weight: 800; font-size: 13px; display: flex; align-items: center; justify-content: center; }
.hmm-wlist a { text-decoration: none; color: var(--hmm-ink); display: flex; flex-direction: column; }
.hmm-wlist a:hover .hmm-wlist__t { text-decoration: underline; }
.hmm-wlist__t { font-family: var(--hmm-head); font-weight: 600; font-size: 15px; line-height: 1.35; }
.hmm-wlist__m { font-size: 13px; color: var(--hmm-muted); }
.hmm-wauthor { display: flex; gap: 14px; align-items: center; container-type: inline-size; }
.hmm-wauthor__photo { flex: 0 0 72px; width: 72px; height: 72px; border-radius: 50%; overflow: hidden; }
.hmm-wauthor__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hmm-wauthor__text { min-width: 0; }
.hmm-wauthor__name { margin: 0; font-family: var(--hmm-head); font-weight: 800; font-size: 18px; }
.hmm-wauthor__role { margin: 0; font-size: 14px; color: var(--hmm-muted); }
.hmm-wauthor__bio { margin-top: 10px; font-size: 15px; }
.hmm-wauthor__links { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 15px; font-weight: 700; }
.hmm-wabout { background: var(--hmm-sun-soft); border-radius: var(--hmm-r-lg); padding: 18px 20px; font-size: 15px; }
.hmm-wabout__link { font-weight: 700; }
.hmm-social { display: flex; flex-wrap: wrap; gap: 8px; }
.hmm-social a { width: 42px; height: 42px; border-radius: 50%; background: var(--hmm-night); color: #fff; display: flex; align-items: center; justify-content: center; }
.hmm-social a:hover { background: var(--hmm-grape); color: #fff; }

/* Narrow sign page and 404 */
.hmm-hang { margin: 0; text-align: center; }
.hmm-hang span { display: inline-block; background: var(--hmm-sun); color: var(--hmm-night); border: 4px solid #fff; border-radius: 18px 18px 18px 6px; padding: 8px 26px 12px; font-family: var(--hmm-head); font-weight: 800; font-size: clamp(28px, 4vw, 42px); line-height: 1.15; transform: rotate(-1.5deg); box-shadow: 0 6px 0 rgba(0, 0, 0, .25); }
.hmm-band--sign .hmm-intro__text { text-align: center; margin-left: auto; margin-right: auto; }
.hmm-page { padding-bottom: 72px; }
.hmm-page:not(.hmm-page--sign) { padding-top: 40px; }
.hmm-page--sign .hmm-entry { padding-top: 10px; }
.hmm-404__in { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.hmm-404__art { width: 220px; }
.hmm-404 .hmm-intro__h1, .hmm-404 .hmm-intro__text { text-align: center; }
.hmm-404 .hmm-search { width: 100%; margin-top: 10px; }

/* ---------- Footer ---------- */
.hmm-foot { color: var(--hmm-on-dark); margin-top: 0; }
.hmm-foot > .hmm-wrap, .hmm-foot > .hmm-fbar { background: var(--hmm-night); }
.hmm-foot--columns, .hmm-foot--centered { background: var(--hmm-night); }
.hmm-skyline { display: block; width: 100%; height: 110px; margin-bottom: -1px; }
.hmm-skyline__h { fill: var(--hmm-night); }
.hmm-skyline__w { fill: var(--hmm-sun); }
.hmm-foot--town .hmm-foot__in { max-width: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px; padding: 22px max(var(--hmm-gutter), calc((100% - var(--hmm-wrap)) / 2 + var(--hmm-gutter))) 34px; }
.hmm-foot .hmm-logo__img { height: var(--hmm-flogo-h); }
.hmm-foot .hmm-sign { font-size: 26px; }
.hmm-foot__mission { margin: 10px 0 0; color: var(--hmm-on-dark-2); font-size: 16px; max-width: 460px; }
.hmm-foot__links .menu, .hmm-fbar__links .menu, .hmm-foot__stack .menu { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; }
.hmm-foot__links a { color: #fff; font-family: var(--hmm-head); font-weight: 600; font-size: 15px; padding: 8px 0; display: inline-block; text-decoration: none; border-bottom: 2px solid transparent; }
.hmm-foot__links a:hover { color: #fff; border-bottom-color: var(--hmm-lime); }
.hmm-foot--centered .hmm-foot__in { text-align: center; padding-top: 48px; padding-bottom: 30px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.hmm-foot--centered .hmm-foot__links .menu { justify-content: center; }
.hmm-foot--columns > .hmm-wrap { padding-top: 48px; padding-bottom: 30px; }
.hmm-foot__brand--top { margin-bottom: 30px; }
.hmm-foot__cols { display: grid; gap: 30px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.hmm-foot__col .widget-title { color: #fff; }
.hmm-foot__col .widget-title::after { background: repeating-linear-gradient(90deg, var(--hmm-lime) 0 10px, transparent 10px 16px); }
.hmm-foot__col ul li { border-bottom-color: rgba(255, 255, 255, .12); }
.hmm-foot__col a, .hmm-foot__col ul a { color: var(--hmm-on-dark); }
.hmm-foot__col a:hover { color: var(--hmm-lime); }
.hmm-foot__stack .menu { flex-direction: column; }
.hmm-fbar { border-top: 1px solid rgba(255, 255, 255, .12); }
.hmm-fbar__in { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; padding-top: 14px; padding-bottom: 14px; font-size: 14px; color: var(--hmm-on-dark-2); }
.hmm-fbar__copy { margin: 0; }
.hmm-fbar__links a { color: var(--hmm-on-dark-2); font-size: 14px; }
.hmm-fbar__links a:hover { color: #fff; }
.hmm-fbar__widgets { display: flex; flex-wrap: wrap; gap: 12px; }
.hmm-fbar__widgets .widget { font-size: 14px; }
.hmm-backtop { margin-left: auto; color: var(--hmm-lime); font-family: var(--hmm-head); font-weight: 700; text-decoration: none; padding: 6px 0; }
.hmm-backtop:hover { color: #fff; }

/* Editor note for missing collection */
.hmm-note-empty { background: var(--hmm-tomato-soft); padding: 10px 14px; border-radius: var(--hmm-r-sm); font-size: 15px; }

@media print {
	.hmm-head, .hmm-foot, .hmm-map, .hmm-street, .hmm-blogstrip, .hmm-band__wave { display: none !important; }
	.hmm-band { background: #fff; color: #000; }
	.hmm-reveal__body { display: block !important; }
}
.hmm-foot__col ul { list-style: none; margin: 0; padding: 0; }
.hmm-foot__col li { padding: 6px 0; border-bottom: 1px solid rgba(255, 255, 255, .12); font-size: 15px; }
.hmm-foot__col a { text-decoration: none; }
.hmm-foot__col a:hover { text-decoration: underline; }