/* Default theme base styles. Brand-neutral; values from the ht-tokens palette.
   theme_config overrides arrive as --hm-* custom properties on :root. */
/* Fonts are self-hosted (SIL OFL 1.1, see fonts/OFL.txt); no third-party requests. */
@font-face { font-family: "Geist"; src: url("/theme/assets/fonts/Geist-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("/theme/assets/fonts/GeistMono-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  /* shiro / sumi palette. Colour is scarce: shu (red) is only the mark and the primary CTA. */
  --hm-shu: #c23b22;
  --hm-shu-dark: #a02f1a;
  --hm-sumi: #141417;
  --hm-hai: #66666c;
  --hm-label: #6e6e73;
  --hm-hair: #e6e6e6;
  --hm-shiro: #fafaf8;
  --hm-kinu: #e4e3de;
  --hm-kasumi: #f4f3ef;
  --hm-sumi-soft: #2a2a2f;

  --ht-fg: var(--hm-text);
  --ht-fg-muted: var(--hm-hai);
  --ht-line: var(--hm-hair);
  --ht-surface: var(--hm-bg);
  --ht-surface-2: var(--hm-shiro);

  /* theme_config overrides land on these. --hm-primary colours the primary CTA only. */
  --hm-primary: var(--hm-shu);
  --hm-bg: #ffffff;
  --hm-text: var(--hm-sumi);
  --hm-font: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --hm-font-heading: var(--hm-font);
  --hm-font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --hm-font-kanji: "Hiragino Sans", "Yu Gothic", "Noto Sans JP", "Noto Sans CJK JP", "Meiryo", sans-serif;
  --hm-radius-sm: 6px;
  --hm-radius-md: 10px;
  --hm-radius-lg: 16px;
  --hm-container: 75rem;
  --color-brand: var(--hm-primary);
  --hm-focus: var(--hm-sumi);
  color-scheme: light;
}

/* Dark mode is opt-in: light is the default whatever the OS prefers, and the
   header toggle sets data-theme="dark" on <html> (remembered in localStorage).
   The inline token style only carries values the owner chose (never the stock
   defaults), so a site that sets its own background or text colour wins here by
   being emitted after this sheet. */
:root[data-theme="dark"] {
  --hm-sumi: #ececea;
  --hm-sumi-soft: #d4d4d0;
  --hm-hai: #a3a3a8;
  --hm-label: #8a8a90;
  --hm-hair: #2c2c31;
  --hm-shiro: #1b1b1f;
  --hm-kinu: #2f2f35;
  --hm-kasumi: #1e1e22;
  --hm-bg: #111114;
  --hm-focus: #fafaf8;
  --ht-surface-2: var(--hm-shiro);
  color-scheme: dark;
}
[data-theme="dark"] .hm-tok--k { color: #b9a6f0; }
[data-theme="dark"] .hm-tok--s { color: #8fcf9d; }
[data-theme="dark"] .hm-tok--c { color: #77777e; }
[data-theme="dark"] .hm-cta--dark { background: #26262b; }

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

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

body {
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; /* short pages keep the footer at the bottom */
  margin: 0;
  overflow-x: clip; /* alignfull/alignwide use 100vw, which includes a classic scrollbar */
  background: var(--hm-bg);
  color: var(--hm-text);
  font-family: var(--hm-font);
  font-size: 1rem;
  line-height: 1.6;
  font-kerning: normal;
  font-feature-settings: "rlig" 1, "calt" 0, "ss11" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--hm-font-heading); font-weight: 450; line-height: 1.15; letter-spacing: -0.04em; margin: 0 0 0.5em; text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 5vw, 4rem); line-height: 1.02; letter-spacing: -0.06em; }
h2 { font-size: clamp(1.875rem, 3vw, 2.5rem); line-height: 1.12; }
h3 { font-size: 1.25rem; font-weight: 500; letter-spacing: -0.02em; line-height: 1.25; }
p { margin: 0 0 1em; text-wrap: pretty; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
:focus-visible { outline: 2px solid var(--hm-focus); outline-offset: 3px; border-radius: 2px; }
code, kbd, pre, samp { font-family: var(--hm-font-mono); }
img, svg, video { max-width: 100%; height: auto; }

.hm-container { width: 100%; max-width: var(--hm-container); margin: 0 auto; padding: 0 1.5rem; }

.hm-skip {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--ht-fg); color: var(--hm-bg); padding: 0.5rem 1rem;
}
.hm-skip:focus { left: 0.5rem; top: 0.5rem; }
main { flex: 1 0 auto; }
main:focus { outline: none; } /* focus target of the skip link, not a control */
.hm-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Sections: hairline separated bands. */
.hm-section { padding: clamp(4rem, 8vw, 7rem) 0; border-top: 1px solid var(--hm-hair); }
.hm-section:first-child { border-top: 0; }

/* Buttons: pill, shu fill for the primary CTA, hairline outline for the rest. */
.hm-btn {
  white-space: nowrap; display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.5rem; padding: 0 1.1rem; border-radius: 999px;
  background: var(--hm-primary); color: #fff; text-decoration: none; font-size: 0.875rem; font-weight: 500; line-height: 1.2;
  border: 1px solid var(--hm-primary); transition: background 0.15s, border-color 0.15s, filter 0.15s;
}
.hm-btn:hover { filter: brightness(0.88); }

/* Header + nav */
.hm-header {
  position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--hm-hair);
  background: color-mix(in srgb, var(--hm-bg) 92%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px);
}
.hm-header__inner { display: flex; align-items: center; gap: 1.5rem; height: 4rem; }
.hm-logo { flex: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 0.65rem; color: var(--hm-text); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.32em; text-transform: uppercase; text-decoration: none; }
.hm-logo__mark { font-family: var(--hm-font-kanji); font-weight: 700; font-size: 1.25rem; letter-spacing: 0.04em; text-transform: none; color: var(--hm-shu); }
.hm-logo img { display: block; }
.hm-nav-wrap { margin-left: auto; }
.hm-nav { position: relative; font-size: 0.875rem; }
.hm-nav__toggle { cursor: pointer; list-style: none; padding: 0.4rem 0.2rem; font-weight: 500; color: var(--hm-hai); }
.hm-nav__toggle::-webkit-details-marker { display: none; }
.hm-nav__list, .hm-nav__sub { list-style: none; margin: 0; padding: 0; }
.hm-nav__list {
  position: absolute; right: 0; top: 100%; min-width: 14rem; z-index: 50;
  background: var(--hm-bg); border: 1px solid var(--ht-line); border-radius: var(--hm-radius-md); padding: 0.5rem;
}
.hm-nav__list a { display: block; padding: 0.35rem 0.5rem; color: var(--hm-hai); text-decoration: none; }
.hm-nav__list a:hover { color: var(--hm-text); background: var(--ht-surface-2); border-radius: var(--hm-radius-sm); }
.hm-nav__sub { padding-left: 0.75rem; }
.hm-nav__toggle:focus-visible { outline: 2px solid var(--hm-focus); outline-offset: 2px; }
/* Mobile: a scrim behind the open menu. The header's backdrop-filter makes it the
   containing block of fixed children, so this covers the viewport only while the
   sticky header is at the top, which it always is. z-index -1 keeps it under the header content. */
@media (max-width: 47.99rem) {
  .hm-nav[open]::before { content: ""; position: fixed; z-index: -1; left: 0; top: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.35); }
}
.hm-nav a[aria-current="page"], .hm-footer a[aria-current="page"] { color: var(--hm-text); font-weight: 500; }

@media (min-width: 48rem) {
  .hm-nav > summary { display: none; }
  .hm-nav::details-content { content-visibility: visible; display: contents; } /* no-JS: list shows without [open] */
  .hm-nav > .hm-nav__list { display: flex; }
  .hm-nav > .hm-nav__list {
    position: static; border: 0; padding: 0; min-width: 0; background: transparent; gap: 1.75rem; align-items: center;
  }
  .hm-header__cta { min-height: 2.125rem; padding: 0 0.9rem; font-size: 0.8125rem; }
  .hm-nav__list > li { position: relative; }
  .hm-nav__sub {
    display: none; position: absolute; left: 0; top: 100%; min-width: 12rem; padding: 0.5rem;
    background: var(--hm-bg); border: 1px solid var(--ht-line); border-radius: var(--hm-radius-md);
  }
  .hm-nav__list > li:hover > .hm-nav__sub, .hm-nav__list > li:focus-within > .hm-nav__sub { display: block; }
}

/* Menu item styling declared in theme.json ("menu"). Classes sit on the link, the
   plain-text span or the footer heading; :is() keeps them above the list rules. */
.hm-nav__list :where(li) > span { display: block; padding: 0.35rem 0.5rem; color: var(--hm-hai); }
:is(a, span, p).hm-nav__item--default { font-weight: 400; }
:is(a, span, p).hm-nav__item--button {
  display: inline-block; padding: 0.4rem 0.9rem; border-radius: var(--hm-radius-sm);
  background: var(--hm-primary); color: var(--hm-bg); font-weight: 500;
}
.hm-nav__sub .hm-nav__item--button { margin-top: 0.25rem; }
:is(a, span, p).hm-nav__item--button:hover { background: var(--hm-shu-dark); color: var(--hm-bg); }
:is(a, span, p).hm-nav__item--link { text-decoration: underline; text-underline-offset: 0.2em; }
:is(a, span, p).hm-nav__item--muted { color: var(--hm-label); font-weight: 400; }
:is(a, span, p).hm-nav-color--accent { color: var(--hm-primary); }
:is(a, span, p).hm-nav-color--ink { color: var(--hm-text); }
:is(a, span, p).hm-nav-color--muted { color: var(--hm-label); }
:is(a, span, p).hm-nav-color--danger { color: var(--hm-shu-dark); }
/* A button keeps its fill: a colour class on a button recolours the fill (never the text, which
   would match the primary fill) and the label is white on the red fills, the page background on ink and muted (both flip with the dark set). */
:is(a, span, p).hm-nav__item--button.hm-nav-color--accent { background: var(--hm-primary); color: #ffffff; }
:is(a, span, p).hm-nav__item--button.hm-nav-color--ink { background: var(--hm-text); color: var(--hm-bg); }
:is(a, span, p).hm-nav__item--button.hm-nav-color--muted { background: var(--hm-label); color: var(--hm-bg); }
:is(a, span, p).hm-nav__item--button.hm-nav-color--danger { background: var(--hm-shu-dark); color: #ffffff; }
/* The plain button darkens on hover (rule above); a coloured one has the same specificity and comes later, so it needs its own hover. */
:is(a, span, p).hm-nav__item--button[class*="hm-nav-color--"]:hover { filter: brightness(0.9); }
.hm-nav__badge {
  display: inline-block; margin-left: 0.35em; padding: 0 0.4em; border: 1px solid var(--hm-hair);
  border-radius: var(--hm-radius-sm); font-size: 0.6875rem; font-weight: 500; line-height: 1.5; vertical-align: middle;
}
.hm-nav__badge--new { background: var(--hm-primary); border-color: var(--hm-primary); color: var(--hm-bg); }
.hm-nav__badge--beta { color: var(--hm-hai); }
.hm-nav__list [data-icon]::after, .hm-footer [data-icon]::after, .hm-menu [data-icon]::after {
  content: ""; display: inline-block; width: 1em; height: 1em; margin-left: 0.3em; vertical-align: -0.1em;
  background: currentColor; mask: var(--hm-menu-icon) center / contain no-repeat;
}
[data-icon="arrow"] { --hm-menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); }
[data-icon="external"] { --hm-menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M14 4h6v6M20 4l-9 9M18 14v6H4V6h6'/%3E%3C/svg%3E"); }
[data-icon="doc"] { --hm-menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M6 3h8l4 4v14H6zM14 3v4h4'/%3E%3C/svg%3E"); }
@media (max-width: 47.99rem) { li:has(> .hm-show-desktop), .hm-show-desktop { display: none; } }
@media (min-width: 48rem) { li:has(> .hm-show-mobile), .hm-show-mobile { display: none; } }

/* Footer */
.hm-footer { border-top: 1px solid var(--hm-hair); background: var(--hm-bg); padding: 3rem 0 2.25rem; color: var(--hm-hai); font-size: 0.8125rem; }
.hm-footer a { color: var(--hm-hai); text-decoration: none; }
.hm-footer a:hover { color: var(--hm-text); }
.hm-footer__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 2rem; margin-bottom: 2rem; }
.hm-footer__title { color: var(--hm-text); font-weight: 500; margin-bottom: 0.5rem; }
.hm-footer ul { list-style: none; margin: 0; padding: 0; }
.hm-footer li { margin: 0.25rem 0; }
.hm-social { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1rem !important; }
.hm-footer__legal { margin: 0; }

/* Errors */
.hm-error { padding: 6rem 0; text-align: center; }
.hm-error__code { font-size: 0.9rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hm-label); margin-bottom: 0.5rem; }

/* Sanitised html / rich-text bodies */
.hm-html-body { line-height: 1.7; }
.hm-html-body > :first-child { margin-top: 0; }
.hm-html-body > :last-child { margin-bottom: 0; }
.hm-html-body h2 { margin-top: 2em; }
.hm-html-body h3 { margin-top: 1.5em; }
.hm-html-body ul, .hm-html-body ol { padding-left: 1.4em; margin: 0 0 1em; }
.hm-html-body li { margin: 0.25em 0; }
.hm-html-body blockquote { margin: 1.5em 0; padding: 0 1em; border-left: 3px solid var(--ht-line); color: var(--ht-fg-muted); }
.hm-html-body pre, .hm-html-body code { font-family: var(--hm-font-mono); font-size: 0.9em; }
.hm-html-body pre { background: var(--ht-surface-2); border: 1px solid var(--ht-line); border-radius: var(--hm-radius-md); padding: 1rem; overflow-x: auto; }
.hm-html-body :not(pre) > code { background: var(--ht-surface-2); padding: 0.1em 0.35em; border-radius: var(--hm-radius-sm); }
.hm-html-body table { border-collapse: collapse; width: 100%; margin: 1.5em 0; }
.hm-html-body th, .hm-html-body td { border: 1px solid var(--ht-line); padding: 0.5rem 0.75rem; text-align: left; }
.hm-html-body details { border: 1px solid var(--ht-line); border-radius: var(--hm-radius-md); padding: 0.75rem 1rem; margin: 0.75rem 0; }
.hm-html-body summary { cursor: pointer; font-weight: 600; }
.hm-html-body hr { border: 0; border-top: 1px solid var(--ht-line); margin: 2em 0; }
.hm-html-body img { border-radius: var(--hm-radius-md); }

.hm-prose, .hm-html-body { color: var(--hm-hai); }

/* Light/dark toggle in the header: invisible until the head script wires it up. It keeps its box meanwhile
   (visibility, not display), so showing it does not push the nav sideways (layout shift). */
.hm-theme-toggle {
  flex: none; display: inline-grid; place-items: center; width: 2.125rem; height: 2.125rem; padding: 0;
  border: 1px solid var(--hm-hair); border-radius: 999px; background: transparent; color: var(--hm-hai); cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.hm-theme-toggle[hidden] { display: inline-grid; visibility: hidden; }
.hm-theme-toggle:hover { color: var(--hm-text); border-color: var(--hm-text); }
.hm-theme-toggle:focus-visible { outline: 2px solid var(--hm-focus); outline-offset: 2px; }
.hm-theme-toggle svg { width: 1rem; height: 1rem; }
.hm-theme-toggle__sun, [data-theme="dark"] .hm-theme-toggle__moon { display: none; }
[data-theme="dark"] .hm-theme-toggle__sun { display: block; }

@media (max-width: 47.99rem) {
  .hm-header__inner { gap: 0.75rem; }
  .hm-logo { letter-spacing: 0.18em; gap: 0.5rem; }
}

/* Shared section partials: section-head, code-panel. */
.hm-section-head { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 4rem; align-items: end; margin-bottom: 3rem; }
.hm-section-head__eyebrow { margin: 0 0 1rem; font-family: var(--hm-font-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hm-label); }
.hm-section-head__heading { margin: 0; font-size: clamp(1.75rem, 3.4vw, 2.75rem); }
.hm-section-head__subheading { margin: 0; color: var(--hm-hai); font-size: 1.0625rem; line-height: 1.6; }
.hm-frame { min-width: 0; max-width: 100%; border: 1px solid var(--hm-hair); border-radius: var(--hm-radius-lg); background: var(--hm-kasumi); overflow: hidden; }
.hm-frame__bar { display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 1rem; border-bottom: 1px solid var(--hm-hair); background: var(--hm-shiro); font-family: var(--hm-font-mono); font-size: 0.75rem; color: var(--hm-hai); }
.hm-frame__dots { display: inline-flex; gap: 0.35rem; }
.hm-frame__dots i { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--hm-kinu); }
.hm-frame__title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--hm-text); }
.hm-frame__meta { flex-shrink: 0; margin-left: auto; white-space: nowrap; color: var(--hm-label); }
.hm-frame .hm-code { max-width: 100%; } /* long lines scroll inside the card instead of being clipped */
.hm-code { margin: 0; padding: 1.25rem; overflow-x: auto; font-size: 0.8125rem; line-height: 1.65; color: var(--hm-sumi-soft); tab-size: 2; }
.hm-code code { font-family: inherit; white-space: pre; }
.hm-tok--k { color: #5b4a8a; }
.hm-tok--s { color: #3f6e4a; }
.hm-tok--c { color: #9a9a9f; }
.hm-outs { display: flex; flex-wrap: wrap; gap: 1px; margin: 1rem 0 0; background: var(--hm-hair); border: 1px solid var(--hm-hair); border-radius: var(--hm-radius-md); overflow: hidden; }
.hm-outs > div { flex: 1 1 8rem; padding: 0.75rem 1rem; background: var(--hm-bg); }
.hm-outs dt { font-family: var(--hm-font-mono); font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--hm-label); }
.hm-outs dd { margin: 0.25rem 0 0; font-size: 0.9375rem; }
@media (max-width: 960px) { .hm-section-head { grid-template-columns: 1fr; gap: 1rem; margin-bottom: 2rem; } }

/* Blog layouts: single post, archive, taxonomy, author and search. */

/* Listing header (archive, taxonomy, author, search) */
.hm-listing { padding-top: clamp(2.5rem, 6vw, 5rem); padding-bottom: clamp(3rem, 6vw, 6rem); }
.hm-listing__header { margin-bottom: 2.5rem; }
.hm-listing__eyebrow { margin: 0 0 0.75rem; font-family: var(--hm-font-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hm-label); }
.hm-listing__title { margin: 0 0 0.5rem; font-size: clamp(2rem, 4.5vw, 3.25rem); }
.hm-listing__lede { margin: 0 0 1.25rem; color: var(--hm-hai); font-size: 1.0625rem; }
.hm-empty { color: var(--hm-hai); padding: 2rem 0; }
.hm-author-head { display: flex; align-items: flex-start; gap: 1.5rem; }
.hm-author-head .hm-listing__lede { margin-bottom: 0; }

/* Cards */
.hm-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 2rem 1.75rem; align-items: start; } /* start: a short, imageless card is not stretched to the tallest in its row */
.hm-card { display: flex; flex-direction: column; border: 1px solid var(--hm-hair); border-radius: var(--hm-radius-lg); background: var(--hm-bg); overflow: hidden; transition: border-color 0.15s, transform 0.15s; }
.hm-card:hover { border-color: var(--hm-kinu); transform: translateY(-2px); }
.hm-card:focus-within { border-color: var(--hm-hai); }
.hm-card__media { display: block; aspect-ratio: 16 / 9; background: var(--hm-kasumi); overflow: hidden; }
.hm-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hm-card__body { display: flex; flex-direction: column; padding: 1.25rem 1.375rem 1.375rem; }
.hm-card__cat { margin: 0 0 0.5rem; font-family: var(--hm-font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hm-label); }
.hm-card__title { margin: 0 0 0.5rem; font-size: 1.25rem; font-weight: 500; letter-spacing: -0.02em; line-height: 1.25; }
.hm-card__title a { text-decoration: none; }
.hm-card__title a:hover { text-decoration: underline; }
.hm-card__excerpt { margin: 0 0 1rem; color: var(--hm-hai); font-size: 0.9375rem; }
.hm-card .hm-meta { margin: 0; }

/* Meta line: author, date, reading time */
.hm-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1rem; margin: 0 0 1.5rem; font-size: 0.8125rem; color: var(--hm-label); }
.hm-meta a { color: var(--hm-hai); text-decoration: none; }
.hm-meta a:hover { color: var(--hm-text); text-decoration: underline; }
.hm-meta__author { display: inline-flex; align-items: center; gap: 0.5rem; }
.hm-avatar { border-radius: 50%; object-fit: cover; background: var(--hm-kasumi); }
.hm-avatar--sm { width: 1.5rem; height: 1.5rem; }
.hm-avatar--lg { width: 4.5rem; height: 4.5rem; flex: none; }

/* Term chips */
.hm-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0 0 1.25rem; padding: 0; }
.hm-chip { display: inline-block; padding: 0.2rem 0.75rem; border: 1px solid var(--hm-hair); border-radius: 999px; font-size: 0.8125rem; color: var(--hm-hai); text-decoration: none; transition: border-color 0.15s, color 0.15s; }
.hm-chip:hover { border-color: var(--hm-hai); color: var(--hm-text); }

/* Single post */
.hm-article { max-width: 46rem; padding-top: clamp(2.5rem, 6vw, 5rem); padding-bottom: clamp(3rem, 6vw, 5rem); }
.hm-article__title { margin: 0 0 1rem; font-size: clamp(2.25rem, 5vw, 3.5rem); }
.hm-article__lede { margin: 0 0 1.25rem; font-size: 1.25rem; line-height: 1.5; color: var(--hm-hai); }
.hm-article__image { margin: 0 -1.5rem 2.5rem; }
.hm-article__image img { display: block; width: 100%; border-radius: var(--hm-radius-lg); }
.hm-article__footer { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--hm-hair); }
.hm-entry { font-size: 1.0625rem; line-height: 1.75; color: var(--hm-text); overflow-wrap: break-word; }
.hm-entry > :first-child { margin-top: 0; }
.hm-entry h2 { margin: 2em 0 0.6em; font-size: clamp(1.5rem, 3vw, 2rem); }
.hm-entry h3 { margin: 1.75em 0 0.5em; }
.hm-entry a { color: var(--hm-primary); }
.hm-entry pre { overflow-x: auto; padding: 1rem; background: var(--hm-kasumi); border: 1px solid var(--hm-hair); border-radius: var(--hm-radius-md); font-size: 0.875rem; }
.hm-entry :not(pre) > code { padding: 0.1em 0.35em; background: var(--hm-kasumi); border-radius: var(--hm-radius-sm); font-size: 0.9em; }
.hm-entry img { border-radius: var(--hm-radius-md); }
.hm-entry hr { border: 0; border-top: 1px solid var(--hm-hair); margin: 2.5em 0; }
.hm-page-body { padding-top: 3rem; padding-bottom: 3rem; max-width: 48rem; }

/* Author box and related posts */
.hm-author-box { display: flex; align-items: flex-start; gap: 1rem; margin-top: 2rem; padding: 1.25rem; border: 1px solid var(--hm-hair); border-radius: var(--hm-radius-lg); background: var(--hm-kasumi); }
.hm-author-box p { margin: 0; }
.hm-author-box .hm-meta { margin: 0; }
.hm-author-box .hm-author-bio { margin-top: 0.25rem; font-size: 0.9375rem; color: var(--hm-hai); }
.hm-related { padding-top: 2rem; padding-bottom: 5rem; border-top: 1px solid var(--hm-hair); }
.hm-related__title { font-size: 1.5rem; margin-bottom: 1.5rem; }

/* Pagination */
.hm-pagination { margin-top: 3rem; }
.hm-pagination ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
.hm-pagination a, .hm-pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 2.5rem; min-height: 2.5rem; padding: 0 0.75rem; border: 1px solid var(--hm-hair); border-radius: 999px; font-size: 0.875rem; color: var(--hm-hai); text-decoration: none; }
.hm-pagination span { border: 0; min-width: 1.5rem; padding: 0; }
.hm-pagination a:hover { border-color: var(--hm-hai); color: var(--hm-text); }
.hm-pagination a[aria-current="page"] { background: var(--hm-text); border-color: var(--hm-text); color: var(--hm-bg); }

/* Search form */
.hm-search { display: flex; gap: 0.75rem; margin: 1.5rem 0 1rem; max-width: 36rem; }
.hm-search .hm-btn { flex: none; }
.hm-search__input { flex: 1 1 auto; min-width: 0; min-height: 2.75rem; padding: 0 1rem; border: 1px solid var(--hm-kinu); border-radius: 999px; background: var(--hm-bg); color: var(--hm-text); font: inherit; }
.hm-search__input:focus-visible { border-color: var(--hm-text); }

@media (max-width: 47.99rem) {
  .hm-article__image { margin-inline: -1.5rem; }
  .hm-article__image img { border-radius: 0; }
}

/* Changelog archive (archive-release layout) */
.hm-changelog__release { scroll-margin-top: 5rem; padding: 1.5rem 0 2rem; border-bottom: 1px solid var(--hm-hair); }
.hm-changelog__release:target { background: var(--hm-kasumi); box-shadow: -1rem 0 0 var(--hm-kasumi), 1rem 0 0 var(--hm-kasumi); border-radius: var(--hm-radius-sm); }
.hm-changelog__version { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin: 0 0 1rem; font-size: 1.5rem; }
.hm-changelog__date { margin-left: auto; font-size: 0.9375rem; font-weight: 400; }
.hm-changelog__channel { font-weight: 400; }
.hm-changelog__yanked { font-weight: 400; border-color: var(--hm-shu); color: var(--hm-shu); }
.hm-changelog__summary { margin: 0 0 1rem; color: var(--hm-hai); }
.hm-changelog__group { margin: 1.25rem 0 0.5rem; font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--hm-hai); }
.hm-changelog__list { margin: 0; padding-left: 1.25rem; line-height: 1.6; }
.hm-changelog__list li + li { margin-top: 0.25rem; }
@media (max-width: 40rem) {
  .hm-changelog__version { font-size: 1.25rem; }
  .hm-changelog__date { margin-left: 0; flex-basis: 100%; }
}

/* Docs layout (single-doc): sidebar menu, article, on-page TOC. */
.hm-doc { display: block; padding: 1.5rem 1.5rem 4rem; }
.hm-doc__nav, .hm-doc__toc { display: none; }
.hm-doc__navm { margin-bottom: 1.5rem; border: 1px solid var(--hm-hair); border-radius: var(--hm-radius-md); padding: 0.75rem 1rem; }
.hm-doc__navm summary { cursor: pointer; font-weight: 500; }
.hm-doc__navm summary:focus-visible, .hm-doc a:focus-visible { outline: 2px solid var(--hm-focus); outline-offset: 2px; }
.hm-doc__main { min-width: 0; }
/* The article is a readable column centred in its track. */
.hm-doc__main > * { max-width: 46rem; margin-inline: auto; }
.hm-doc__title { margin-block: 0 1.5rem; font-size: clamp(1.75rem, 4vw, 2.5rem); letter-spacing: -0.02em; }

/* Sidebar tree */
.hm-doc-nav { list-style: none; margin: 0; padding: 0; font-size: 0.9375rem; }
.hm-doc-nav .hm-doc-nav { margin: 0.25rem 0 0.5rem 0.75rem; padding-left: 0.75rem; border-left: 1px solid var(--hm-hair); }
.hm-doc-nav li { margin: 0.125rem 0; }
.hm-doc-nav a { display: block; padding: 0.25rem 0.5rem; border-radius: var(--hm-radius-sm); color: var(--hm-hai); text-decoration: none; }
.hm-doc-nav a:hover { color: var(--hm-text); background: var(--hm-kasumi); }
.hm-doc-nav a[aria-current="page"] { color: var(--hm-text); background: var(--hm-kasumi); font-weight: 600; box-shadow: inset 2px 0 0 var(--hm-primary); }
.hm-doc-nav__group { display: block; padding: 0.5rem 0.5rem 0.25rem; font-family: var(--hm-font-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hm-hai); }

/* Collapsible sections */
.hm-doc-nav summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; padding: 0.375rem 0.5rem; border-radius: var(--hm-radius-sm); font-weight: 600; color: var(--hm-text); }
.hm-doc-nav summary::-webkit-details-marker { display: none; }
.hm-doc-nav summary::after { content: ""; width: 0.4rem; height: 0.4rem; margin-right: 0.25rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform 0.15s; }
.hm-doc-nav details[open] > summary::after { transform: rotate(45deg); }
.hm-doc-nav summary:hover { color: var(--hm-text); background: var(--hm-kasumi); }
.hm-doc-nav summary:focus-visible { outline: 2px solid var(--hm-focus); outline-offset: 2px; }

/* Sidebar search */
.hm-doc__search { margin: 0 0 1rem; }
.hm-doc__search input[type="search"] { width: 100%; box-sizing: border-box; padding: 0.5rem 0.75rem; border: 1px solid var(--hm-hai); border-radius: var(--hm-radius-md); background: transparent; color: var(--hm-text); font: inherit; font-size: 0.875rem; }
.hm-doc__search input[type="search"]:focus-visible { outline: 2px solid var(--hm-focus); outline-offset: 2px; }

/* Breadcrumbs */
.hm-doc__crumbs ol { display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; list-style: none; margin: 0 0 1rem; padding: 0; font-size: 0.8125rem; color: var(--hm-label); }
.hm-doc__crumbs li + li::before { content: "/"; margin-right: 0.5rem; }
.hm-doc__crumbs a { color: var(--hm-hai); text-decoration: none; }
.hm-doc__crumbs a:hover { color: var(--hm-text); text-decoration: underline; }

/* Headings clear the sticky site header (4rem), like the essay aside in sections/content.css */
.hm-doc .hm-prose :is(h2, h3) { scroll-margin-top: 6rem; }

/* Prev / next */
.hm-doc__pager { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-block: 3rem 0; padding-top: 1.5rem; border-top: 1px solid var(--hm-hair); }
.hm-doc__pager a { display: block; padding: 0.75rem 1rem; border: 1px solid var(--hm-hair); border-radius: var(--hm-radius-md); text-decoration: none; }
.hm-doc__pager a:hover { border-color: var(--hm-hai); }
.hm-doc__pager span { display: block; font-size: 0.75rem; color: var(--hm-label); }
.hm-doc__next { margin-left: auto; text-align: right; }

/* Card grids on the landing page and section indexes */
/* Wider than the text but on its left edge: margin-left is the text column's offset. */
.hm-doc__main > .hm-doc-cards, .hm-doc__main > .hm-doc-cards__label { max-width: 60rem; margin-left: max(0px, calc((100% - 46rem) / 2)); margin-right: 0; }
.hm-doc-cards { list-style: none; margin-block: 0 2rem; margin-inline: auto; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.hm-doc-cards__label { margin-block: 2rem 0.75rem; font-family: var(--hm-font-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hm-hai); }
.hm-doc-card { position: relative; padding: 1rem; border: 1px solid var(--hm-hair); border-radius: var(--hm-radius-md); }
.hm-doc-card:hover, .hm-doc-card:focus-within { border-color: var(--hm-hai); }
.hm-doc-card__link { color: var(--hm-text); font-weight: 600; text-decoration: none; }
.hm-doc-card__link::after { content: ""; position: absolute; inset: 0; }
.hm-doc-card__link:focus-visible { outline: 2px solid var(--hm-focus); outline-offset: 2px; }
.hm-doc-card p { margin: 0.5rem 0 0; font-size: 0.875rem; color: var(--hm-hai); }

/* Next steps block at the end of a guide (list rendered by the docs tool) */
.hm-doc .hm-prose ul.hm-next-steps, .hm-doc .hm-prose h2#next-steps + ul { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); }
.hm-doc .hm-prose ul.hm-next-steps li, .hm-doc .hm-prose h2#next-steps + ul li { margin: 0; padding: 0.75rem 1rem; border: 1px solid var(--hm-hair); border-radius: var(--hm-radius-md); }
.hm-doc .hm-prose ul.hm-next-steps a, .hm-doc .hm-prose h2#next-steps + ul a { font-weight: 600; text-decoration: none; }

/* On-page TOC */
.hm-doc__toc-title { margin: 0 0 0.5rem; font-family: var(--hm-font-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hm-hai); }
.hm-doc__toc ol { list-style: none; margin: 0; padding: 0; font-size: 0.875rem; }
.hm-doc__toc a { display: block; padding: 0.2rem 0; color: var(--hm-hai); text-decoration: none; }
.hm-doc__toc a:hover { color: var(--hm-text); text-decoration: underline; }
.hm-doc__toc-l3 { padding-left: 0.875rem; }

@media (min-width: 60rem) {
  /* Edge to edge: no container, a third track is kept (empty without a TOC) so the article stays centred. */
  .hm-doc { display: grid; grid-template-columns: 16rem minmax(0, 1fr) 14rem; gap: 2.5rem; align-items: start; }
  .hm-doc__navm { display: none; }
  /* The article comes first in the source so the skip link lands on it; the columns are placed here. */
  .hm-doc__nav { grid-column: 1; grid-row: 1; }
  .hm-doc__main { grid-column: 2; grid-row: 1; }
  .hm-doc__toc { grid-column: 3; grid-row: 1; }
  /* Without a TOC the article takes the third track (until wide screens, where the empty track keeps it centred). */
  .hm-doc:not(:has(.hm-doc__toc)) { grid-template-columns: 16rem minmax(0, 1fr); }
  .hm-doc__nav, .hm-doc__toc { display: block; position: sticky; top: 6rem; max-height: calc(100vh - 7rem); overflow-y: auto; padding: 4px; }
}

@media (min-width: 90rem) {
  .hm-doc:not(:has(.hm-doc__toc)) { grid-template-columns: 16rem minmax(0, 1fr) 14rem; }
}

/* Hanshi, a blog theme for Hatamoto. Every value is a --hm-* design token, so
   Theme > Colours and fonts and Theme > Design system restyle it without edits.
   Component classes use the hs- prefix so they never collide with the built-in theme. */
:root{
  /* palette (shiro / sumi) */
  --hm-shu:#c23b22; --hm-sumi:#141417; --hm-sumi-soft:#2a2a2f; --hm-hai:#66666c;
  --hm-label:#8a8a90; --hm-hair:#e8e7e3; --hm-shiro:#fafaf8; --hm-kinu:#e4e3de; --hm-kasumi:#f4f3ef;
  /* Colours and fonts (owner-editable) */
  --hm-primary:var(--hm-shu); --hm-bg:#ffffff; --hm-text:var(--hm-sumi);
  --hm-font:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --hm-font-heading:var(--hm-font);
  --hm-font-mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --hm-radius-sm:6px; --hm-radius-md:10px; --hm-radius-lg:16px;
  /* Design system (builder.tokens) */
  --hm-surface:var(--hm-shiro); --hm-muted:var(--hm-hai); --hm-accent:var(--hm-primary);
  --hm-d:1; /* density multiplier, set by the density preset */
  --hm-space-0:0; --hm-space-1:calc(.25rem*var(--hm-d)); --hm-space-2:calc(.5rem*var(--hm-d));
  --hm-space-3:calc(.75rem*var(--hm-d)); --hm-space-4:calc(1rem*var(--hm-d)); --hm-space-5:calc(1.25rem*var(--hm-d));
  --hm-space-6:calc(1.5rem*var(--hm-d)); --hm-space-7:calc(2rem*var(--hm-d)); --hm-space-8:calc(2.5rem*var(--hm-d));
  --hm-space-9:calc(3rem*var(--hm-d)); --hm-space-10:calc(4rem*var(--hm-d)); --hm-space-11:calc(5rem*var(--hm-d));
  --hm-space-12:calc(6.5rem*var(--hm-d));
  --hm-fs-xs:.75rem; --hm-fs-sm:.875rem; --hm-fs-base:1rem; --hm-fs-lg:1.125rem; --hm-fs-xl:1.3125rem;
  --hm-fs-2xl:1.625rem; --hm-fs-3xl:clamp(1.875rem,3vw,2.5rem); --hm-fs-4xl:clamp(2.5rem,5.4vw,4.5rem);
  --hm-shadow-sm:0 1px 2px rgba(20,20,23,.05);
  --hm-shadow-md:0 4px 14px -4px rgba(20,20,23,.10),0 1px 2px rgba(20,20,23,.04);
  --hm-shadow-lg:0 24px 60px -18px rgba(20,20,23,.22),0 2px 6px rgba(20,20,23,.05);
  /* layout */
  --hm-container:75rem; --hm-reading:42rem; --hm-header:64px;
  --hm-ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:light;
}
/* colour mode */
:root[data-theme="dark"]{
  --hm-sumi:#ecece9; --hm-sumi-soft:#d4d4d0; --hm-hai:#a0a0a6; --hm-label:#7d7d84;
  --hm-hair:#26262b; --hm-shiro:#151518; --hm-kinu:#2e2e34; --hm-kasumi:#1b1b1f; --hm-bg:#0e0e10;
  --hm-shadow-md:0 4px 14px -4px rgba(0,0,0,.6); --hm-shadow-lg:0 24px 60px -18px rgba(0,0,0,.8);
  color-scheme:dark;
}
/* accent presets (settings.accent): brand = the owner's Colours and fonts colour */
:root[data-hs-accent="indigo"]{--hm-primary:#2c4f86}
:root[data-hs-accent="moss"]{--hm-primary:#5f7d36}
:root[data-hs-accent="ink"]{--hm-primary:var(--hm-sumi)}
:root[data-theme="dark"][data-hs-accent="indigo"]{--hm-primary:#6f93cf}
:root[data-theme="dark"][data-hs-accent="moss"]{--hm-primary:#93b25f}
:root[data-theme="dark"][data-hs-accent="brand"],:root[data-theme="dark"]:not([data-hs-accent]){--hm-primary:#e0553b}
/* type preset */
:root[data-hs-type="serif"]{--hm-font-heading:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif}
/* density preset */
:root[data-hs-density="compact"]{--hm-d:.78}
/* corner preset */
:root[data-hs-radius="sharp"]{--hm-radius-sm:2px;--hm-radius-md:3px;--hm-radius-lg:4px}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--hm-header) + 24px)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--hm-bg);color:var(--hm-text);font-family:var(--hm-font);font-size:var(--hm-fs-base);line-height:1.6;
  font-feature-settings:"ss01","cv11";-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;transition:background .25s,color .25s}
img,svg{display:block;max-width:100%}
a{color:inherit}
::selection{background:color-mix(in srgb,var(--hm-accent) 22%,transparent)}
:focus-visible{outline:2px solid var(--hm-accent);outline-offset:3px;border-radius:4px}
.hs-skip{position:absolute;left:-999px;top:8px;z-index:100;background:var(--hm-sumi);color:var(--hm-bg);padding:8px 14px;border-radius:var(--hm-radius-sm)}
.hs-skip:focus{left:8px}
.hs-wrap{width:min(calc(100% - 48px),var(--hm-container));margin-inline:auto}
.hs-mono{font-family:var(--hm-font-mono)}
.hs-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- presets (named style maps, mirrored in Theme > Style presets) ---------- */
.hs-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--hm-label)}
.hs-eyebrow .hs-kanji{letter-spacing:.2em;font-weight:500;color:var(--hm-hai)}
.hs-display{font-family:var(--hm-font-heading);font-size:var(--hm-fs-4xl);font-weight:450;letter-spacing:-.055em;line-height:1.02;margin:0;text-wrap:balance}
.hs-h2{font-family:var(--hm-font-heading);font-size:var(--hm-fs-3xl);font-weight:450;letter-spacing:-.04em;line-height:1.1;margin:0;text-wrap:balance}
.hs-lede{font-size:var(--hm-fs-xl);line-height:1.55;color:var(--hm-hai);letter-spacing:-.012em;margin:0;text-wrap:pretty}
.hs-meta{font-family:var(--hm-font-mono);font-size:12px;letter-spacing:.02em;color:var(--hm-label);display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px}
.hs-meta>*+*::before{content:"";display:inline-block;width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.5;margin-right:14px;vertical-align:middle}
.hs-frame{position:relative;border:1px solid var(--hm-hair);border-radius:var(--hm-radius-lg);background:var(--hm-bg)}
.hs-num{font-family:var(--hm-font-mono);font-size:12px;color:var(--hm-label);letter-spacing:.04em}

/* crosshair ticks: the Vercel "+" at frame corners */
.hs-ticks::before,.hs-ticks::after{content:"";position:absolute;width:13px;height:13px;pointer-events:none;
  background:linear-gradient(var(--hm-label),var(--hm-label)) center/1px 100% no-repeat,linear-gradient(var(--hm-label),var(--hm-label)) center/100% 1px no-repeat;opacity:.7}
.hs-ticks::before{top:-7px;left:-7px}.hs-ticks::after{bottom:-7px;right:-7px}

/* ---------- buttons ---------- */
.hs-btn{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--hm-hair);
  background:var(--hm-bg);color:var(--hm-sumi);font:500 14px/1 var(--hm-font);text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background .15s,border-color .15s,transform .15s var(--hm-ease)}
.hs-btn:hover{background:var(--hm-kasumi);border-color:var(--hm-kinu)}
.hs-btn:active{transform:translateY(1px)}
.hs-btn--ink{background:var(--hm-sumi);color:var(--hm-bg);border-color:var(--hm-sumi)}
.hs-btn--ink:hover{background:var(--hm-sumi-soft);border-color:var(--hm-sumi-soft)}
.hs-btn--cta{background:var(--hm-accent);border-color:var(--hm-accent);color:#fff}
.hs-btn--cta:hover{background:color-mix(in srgb,var(--hm-accent) 86%,#000);border-color:transparent}
:root[data-hs-accent="ink"] .hs-btn--cta{color:var(--hm-bg)}
.hs-btn--sm{height:32px;padding:0 12px;font-size:13px}
.hs-btn--icon{width:36px;height:36px;padding:0;justify-content:center}
.hs-btn svg{width:16px;height:16px;flex:none}
.hs-btn[aria-disabled="true"]{opacity:.4;pointer-events:none}
.hs-kbd{font:500 11px/1 var(--hm-font-mono);padding:3px 6px;border:1px solid var(--hm-hair);border-bottom-width:2px;border-radius:5px;color:var(--hm-hai);background:var(--hm-surface)}
.hs-arrow{display:inline-block;transition:transform .2s var(--hm-ease)}
a:hover .hs-arrow,button:hover .hs-arrow{transform:translateX(3px)}

/* ---------- header ---------- */
.hs-header{position:sticky;top:0;z-index:40;height:var(--hm-header);background:color-mix(in srgb,var(--hm-bg) 82%,transparent);
  backdrop-filter:saturate(1.6) blur(12px);-webkit-backdrop-filter:saturate(1.6) blur(12px);border-bottom:1px solid var(--hm-hair)}
.hs-header .hs-wrap{display:flex;align-items:center;gap:28px;height:100%}
.hs-brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--hm-sumi);flex:none}
.hs-seal{width:30px;height:30px;display:grid;place-items:center;background:var(--hm-accent);color:#fff;border-radius:6px;
  font:700 15px/1 var(--hm-font);letter-spacing:-.02em;box-shadow:inset 0 0 0 2px color-mix(in srgb,#fff 18%,transparent);transition:background .25s}
:root[data-hs-accent="ink"] .hs-seal{color:var(--hm-bg)}
.hs-brand__word{font-weight:600;font-size:12px;letter-spacing:.34em}
.hs-brand__sub{font-size:13px;color:var(--hm-label);padding-left:12px;border-left:1px solid var(--hm-hair)}
.hs-nav{display:flex;gap:4px;font-size:14px}
.hs-nav a{color:var(--hm-hai);text-decoration:none;padding:6px 10px;border-radius:999px;transition:color .15s,background .15s}
.hs-nav a:hover{color:var(--hm-sumi);background:var(--hm-kasumi)}
.hs-nav a[aria-current="page"]{color:var(--hm-sumi)}
.hs-header__end{margin-left:auto;display:flex;align-items:center;gap:8px}
.hs-search-btn{display:flex;align-items:center;gap:10px;height:36px;padding:0 8px 0 12px;width:220px;border:1px solid var(--hm-hair);border-radius:999px;
  background:var(--hm-surface);color:var(--hm-label);font:14px var(--hm-font);cursor:pointer;transition:border-color .15s}
.hs-search-btn:hover{border-color:var(--hm-kinu);color:var(--hm-hai)}
.hs-search-btn svg{width:15px;height:15px}
.hs-search-btn .hs-kbd{margin-left:auto}
.hs-progress{position:absolute;left:0;bottom:-1px;height:2px;width:100%;transform-origin:0 50%;transform:scaleX(var(--p,0));background:var(--hm-accent)}
@media (max-width:900px){.hs-nav,.hs-brand__sub{display:none}.hs-search-btn{width:36px;padding:0;justify-content:center}.hs-search-btn span,.hs-search-btn .hs-kbd{display:none}}
@media (max-width:520px){.hs-header .hs-btn--cta{display:none}}

/* ---------- sections ---------- */
.hs-section{padding-block:var(--hm-space-12)}
.hs-section--rule{border-top:1px solid var(--hm-hair)}
.hs-sechead{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:var(--hm-space-8)}
.hs-sechead p{margin:8px 0 0;color:var(--hm-hai);max-width:52ch}

/* ---------- masthead ---------- */
.hs-mast{padding-top:var(--hm-space-11);padding-bottom:var(--hm-space-9);display:grid;grid-template-columns:1fr auto;gap:48px;align-items:end}
.hs-mast__title{display:flex;align-items:baseline;gap:22px}
.hs-mast__lede{margin-top:var(--hm-space-6);max-width:40ch}
.hs-mast__aside{display:flex;gap:28px;align-items:stretch}
.hs-tate{writing-mode:vertical-rl;font-family:var(--hm-font);font-weight:300;font-size:48px;line-height:1;letter-spacing:.22em;color:var(--hm-sumi);text-transform:uppercase}
.hs-tate small{display:block;font-size:12px;letter-spacing:.5em;color:var(--hm-label);margin-right:12px;font-family:var(--hm-font-mono)}
.hs-mast__facts{display:grid;gap:14px;align-content:end;border-left:1px solid var(--hm-hair);padding-left:28px;min-width:210px}
.hs-mast__facts dt{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--hm-label)}
.hs-mast__facts dd{margin:2px 0 0;font-size:14px}
.hs-mast__facts a{text-decoration:none;border-bottom:1px solid var(--hm-hair)}
.hs-mast__facts a:hover{border-color:var(--hm-sumi)}
@media (max-width:860px){.hs-mast{grid-template-columns:1fr}.hs-tate{display:none}.hs-mast__facts{border-left:0;padding-left:0;grid-template-columns:repeat(3,1fr)}}

/* topic filter */
.hs-filter{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding-block:16px;border-top:1px solid var(--hm-hair);border-bottom:1px solid var(--hm-hair)}
.hs-chip{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px;border:1px solid var(--hm-hair);border-radius:999px;
  font-size:13px;color:var(--hm-hai);text-decoration:none;background:transparent;cursor:pointer;font-family:var(--hm-font);transition:all .15s}
.hs-chip:hover{color:var(--hm-sumi);border-color:var(--hm-kinu)}
.hs-chip[aria-pressed="true"],.hs-chip[aria-current="page"]{background:var(--hm-sumi);color:var(--hm-bg);border-color:var(--hm-sumi)}
.hs-chip .hs-kanji{font-size:11px;opacity:.7}
.hs-chip em{font-style:normal;font-family:var(--hm-font-mono);font-size:11px;opacity:.6}
.hs-filter__end{margin-left:auto;display:flex;gap:6px;align-items:center;color:var(--hm-label);font-size:12px}
.hs-seg{display:inline-flex;border:1px solid var(--hm-hair);border-radius:999px;padding:2px;gap:2px}
.hs-seg button{border:0;background:transparent;height:26px;min-width:30px;padding:0 10px;border-radius:999px;color:var(--hm-hai);cursor:pointer;font:500 12px var(--hm-font);display:inline-flex;align-items:center;justify-content:center;gap:6px}
.hs-seg button[aria-pressed="true"]{background:var(--hm-kasumi);color:var(--hm-sumi);box-shadow:inset 0 0 0 1px var(--hm-hair)}
.hs-seg svg{width:14px;height:14px}

/* ---------- generated covers ---------- */
.hs-cover{position:relative;overflow:hidden;background:var(--hm-surface);color:var(--hm-sumi);isolation:isolate}
.hs-cover svg.pat{position:absolute;inset:0;width:100%;height:100%;opacity:.3;transition:opacity .4s var(--hm-ease),transform .8s var(--hm-ease)}
.hs-cover .sun{position:absolute;border-radius:50%;background:var(--hm-sumi);opacity:.9;transition:background .4s var(--hm-ease),transform .8s var(--hm-ease)}
.hs-cover .tag{position:absolute;left:14px;bottom:14px;font:500 11px/1 var(--hm-font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--hm-hai);display:flex;gap:10px;background:var(--hm-bg);border:1px solid var(--hm-hair);border-radius:999px;padding:6px 10px}
.hs-cover .tag .hs-kanji{letter-spacing:.3em}
a:hover .hs-cover svg.pat,.hs-cover:hover svg.pat{opacity:.6;transform:scale(1.03)}
a:hover .hs-cover .sun,.hs-cover:hover .sun{background:var(--hm-accent);transform:scale(1.06)}

/* ---------- lead post ---------- */
.hs-lead{display:grid;grid-template-columns:7fr 5fr;text-decoration:none;color:inherit;overflow:visible}
.hs-lead .hs-cover{min-height:420px;border-right:1px solid var(--hm-hair);border-radius:var(--hm-radius-lg) 0 0 var(--hm-radius-lg)}
.hs-lead__body{padding:var(--hm-space-8);display:flex;flex-direction:column;gap:var(--hm-space-5)}
.hs-lead__title{font-family:var(--hm-font-heading);font-size:clamp(1.9rem,3.2vw,2.75rem);font-weight:450;letter-spacing:-.045em;line-height:1.06;margin:0;text-wrap:balance}
.hs-lead__ex{color:var(--hm-hai);margin:0;font-size:var(--hm-fs-lg);line-height:1.6}
.hs-lead__foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:var(--hm-space-5);border-top:1px solid var(--hm-hair)}
.hs-lead__read{font-size:14px;font-weight:500;display:inline-flex;gap:6px}
.hs-lead:hover .hs-lead__title{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px;text-decoration-color:var(--hm-kinu)}
.hs-badge{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border-radius:999px;border:1px solid var(--hm-hair);font:500 11px/1 var(--hm-font-mono);letter-spacing:.06em;color:var(--hm-hai);text-transform:uppercase}
.hs-badge i{width:6px;height:6px;border-radius:50%;background:var(--hm-accent)}
.hs-avatar{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--hm-kasumi);border:1px solid var(--hm-hair);font:600 11px/1 var(--hm-font);color:var(--hm-hai);flex:none}
.hs-byline{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--hm-hai)}
.hs-byline strong{color:var(--hm-sumi);font-weight:500}
@media (max-width:900px){.hs-lead{grid-template-columns:1fr}.hs-lead .hs-cover{min-height:260px;border-right:0;border-bottom:1px solid var(--hm-hair);border-radius:var(--hm-radius-lg) var(--hm-radius-lg) 0 0}}

/* ---------- post index rows ---------- */
.hs-index{list-style:none;margin:var(--hm-space-9) 0 0;padding:0;counter-reset:n}
.hs-row{border-top:1px solid var(--hm-hair)}
.hs-row:last-child{border-bottom:1px solid var(--hm-hair)}
.hs-row>a{display:grid;grid-template-columns:64px 44px minmax(0,1fr) 180px 168px;gap:24px;align-items:center;padding:var(--hm-space-6) 12px;
  margin-inline:-12px;text-decoration:none;color:inherit;border-radius:var(--hm-radius-md);transition:background .2s}
.hs-row>a:hover,.hs-row>a:focus-visible{background:var(--hm-surface)}
.hs-row .hs-num{font-size:13px}
.hs-row__cat{writing-mode:vertical-rl;transform:rotate(180deg);font:500 10px/1 var(--hm-font-mono);letter-spacing:.18em;text-transform:uppercase;white-space:nowrap;color:var(--hm-label);justify-self:center}
.hs-row h3{font-family:var(--hm-font-heading);font-size:var(--hm-fs-2xl);font-weight:450;letter-spacing:-.035em;line-height:1.15;margin:0 0 6px;text-wrap:balance}
.hs-row p{margin:0;color:var(--hm-hai);font-size:15px;line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hs-row__meta{display:grid;gap:4px;font-size:13px;color:var(--hm-hai)}
.hs-row__meta span:first-child{color:var(--hm-sumi)}
.hs-row__meta .hs-mono{font-size:12px;color:var(--hm-label)}
.hs-row .hs-cover{aspect-ratio:16/10;border-radius:var(--hm-radius-md);border:1px solid var(--hm-hair)}
.hs-row .hs-cover .tag{display:none}
.hs-row[hidden]{display:none}
:root[data-hs-layout="grid"] .hs-index[data-layoutable]{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
:root[data-hs-layout="grid"] .hs-index[data-layoutable] .hs-row{border:1px solid var(--hm-hair);border-radius:var(--hm-radius-lg);overflow:hidden}
:root[data-hs-layout="grid"] .hs-index[data-layoutable] .hs-row:last-child{border-bottom:1px solid var(--hm-hair)}
:root[data-hs-layout="grid"] .hs-index[data-layoutable] .hs-row>a{grid-template-columns:1fr;margin:0;padding:0;gap:0;border-radius:0;height:100%;align-content:start}
:root[data-hs-layout="grid"] .hs-index[data-layoutable] .hs-row .hs-cover{order:-1;aspect-ratio:16/8;border:0;border-bottom:1px solid var(--hm-hair);border-radius:0}
:root[data-hs-layout="grid"] .hs-index[data-layoutable] .hs-row .hs-cover .tag{display:flex}
:root[data-hs-layout="grid"] .hs-index[data-layoutable] .hs-row .hs-num,:root[data-hs-layout="grid"] .hs-index[data-layoutable] .hs-row__cat{display:none}
:root[data-hs-layout="grid"] .hs-index[data-layoutable] .hs-row__text{padding:var(--hm-space-6) var(--hm-space-6) 0}
:root[data-hs-layout="grid"] .hs-index[data-layoutable] .hs-row__meta{padding:var(--hm-space-4) var(--hm-space-6) var(--hm-space-6);display:flex;gap:14px}
@media (max-width:1000px){.hs-row>a{grid-template-columns:48px minmax(0,1fr) 140px}.hs-row__cat,.hs-row>a>.hs-cover{display:none}}
@media (max-width:640px){.hs-row>a{grid-template-columns:minmax(0,1fr);gap:10px}.hs-row>a>.hs-num{display:none}.hs-row__meta{display:flex;gap:12px}.hs-mast__facts{grid-template-columns:1fr 1fr}:root[data-hs-layout="grid"] .hs-index[data-layoutable]{grid-template-columns:1fr}}

/* ---------- pagination (the ruler) ---------- */
.hs-pager{margin-top:var(--hm-space-9);padding:var(--hm-space-6);display:grid;gap:var(--hm-space-5)}
.hs-pager__top{display:flex;justify-content:space-between;align-items:baseline;gap:16px;font-size:13px;color:var(--hm-hai)}
.hs-pager__top strong{color:var(--hm-sumi);font-weight:500}
.hs-ruler{display:grid;grid-template-columns:repeat(var(--n),1fr);gap:4px;height:34px;align-items:end}
.hs-ruler a{position:relative;display:block;height:14px;border-radius:3px;background:var(--hm-kasumi);border:1px solid var(--hm-hair);transition:height .2s var(--hm-ease),background .2s}
.hs-ruler a:hover{height:26px;background:var(--hm-kinu)}
.hs-ruler a[aria-current="page"]{height:34px;background:var(--hm-sumi);border-color:var(--hm-sumi)}
.hs-ruler a::after{content:attr(data-label);position:absolute;bottom:calc(100% + 10px);left:50%;transform:translate(-50%,4px);white-space:nowrap;
  font:500 11px/1 var(--hm-font-mono);padding:6px 8px;border-radius:6px;background:var(--hm-sumi);color:var(--hm-bg);opacity:0;pointer-events:none;transition:all .15s;z-index:3}
.hs-ruler a:hover::after,.hs-ruler a:focus-visible::after{opacity:1;transform:translate(-50%,0)}
.hs-ruler__scale{display:flex;justify-content:space-between;font:11px var(--hm-font-mono);color:var(--hm-label);letter-spacing:.04em;margin-top:-8px}
.hs-pager__nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;border-top:1px solid var(--hm-hair);padding-top:var(--hm-space-5)}
.hs-pager__dir{display:flex;flex-direction:column;gap:2px;text-decoration:none;color:inherit;padding:8px 12px;border-radius:var(--hm-radius-md);max-width:320px;transition:background .15s}
.hs-pager__dir:hover{background:var(--hm-surface)}
.hs-pager__dir small{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--hm-label)}
.hs-pager__dir span{font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hs-pager__dir--next{justify-self:end;text-align:right}
.hs-pager__dir[aria-disabled="true"]{opacity:.35;pointer-events:none}
.hs-pages{display:flex;gap:4px;list-style:none;margin:0;padding:0}
.hs-pages a,.hs-pages span{display:grid;place-items:center;min-width:36px;height:36px;padding:0 6px;border-radius:8px;font:500 13px/1 var(--hm-font-mono);color:var(--hm-hai);text-decoration:none}
.hs-pages a:hover{background:var(--hm-kasumi);color:var(--hm-sumi)}
.hs-pages a[aria-current="page"]{background:var(--hm-sumi);color:var(--hm-bg)}
.hs-pager__foot{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:12px;color:var(--hm-label)}
.hs-jump{display:flex;align-items:center;gap:8px}
.hs-jump input{width:56px;height:30px;border:1px solid var(--hm-hair);border-radius:8px;background:var(--hm-bg);color:var(--hm-sumi);font:13px var(--hm-font-mono);text-align:center}
.hs-jump input:focus{outline:2px solid var(--hm-accent);outline-offset:1px}
@media (max-width:720px){.hs-pager__nav{grid-template-columns:1fr 1fr}.hs-pages{grid-column:1/-1;order:-1;justify-content:center}.hs-pager__foot .hs-keys{display:none}}

/* ---------- topics band ---------- */
.hs-topics{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--hm-hair);border:1px solid var(--hm-hair);border-radius:var(--hm-radius-lg);overflow:hidden}
.hs-topic{background:var(--hm-bg);padding:var(--hm-space-6);text-decoration:none;color:inherit;display:grid;gap:10px;min-height:170px;align-content:start;position:relative;transition:background .2s}
.hs-topic:hover{background:var(--hm-surface)}
.hs-topic .k{font:300 34px/1 var(--hm-font-heading);letter-spacing:-.04em}
.hs-topic h3{margin:auto 0 0;font-size:16px;font-weight:500;letter-spacing:-.01em}
.hs-topic p{margin:0;font-size:13px;color:var(--hm-hai)}
.hs-topic .hs-num{position:absolute;top:var(--hm-space-6);right:var(--hm-space-6)}
@media (max-width:900px){.hs-topics{grid-template-columns:repeat(2,1fr)}}

/* ---------- subscribe CTA ---------- */
.hs-cta{display:grid;grid-template-columns:2fr 1fr;overflow:hidden}
.hs-cta__body{padding:var(--hm-space-9);border-right:1px solid var(--hm-hair);display:grid;gap:var(--hm-space-5);align-content:start}
.hs-cta__side{padding:var(--hm-space-9);display:grid;gap:14px;align-content:center;background:var(--hm-surface)}
.hs-cta__side a{display:flex;justify-content:space-between;align-items:center;text-decoration:none;font-size:14px;padding:10px 0;border-bottom:1px solid var(--hm-hair)}
.hs-cta__side a .hs-mono{font-size:12px;color:var(--hm-label)}
.hs-field{display:flex;gap:8px;max-width:460px}
.hs-input{flex:1;min-width:0;height:40px;padding:0 14px;border:1px solid var(--hm-hair);border-radius:999px;background:var(--hm-bg);color:var(--hm-sumi);font:14px var(--hm-font)}
.hs-input:focus{outline:2px solid var(--hm-accent);outline-offset:1px;border-color:transparent}
.hs-hint{font-size:12px;color:var(--hm-label);margin:0}
@media (max-width:860px){.hs-cta{grid-template-columns:1fr}.hs-cta__body{border-right:0;border-bottom:1px solid var(--hm-hair)}}

/* ---------- footer ---------- */
.hs-footer{border-top:1px solid var(--hm-hair);margin-top:var(--hm-space-12);padding-block:var(--hm-space-10) var(--hm-space-8);font-size:14px}
.hs-footer__grid{display:grid;grid-template-columns:2fr repeat(3,1fr);gap:32px}
.hs-footer h4{margin:0 0 14px;font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--hm-label)}
.hs-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.hs-footer a{color:var(--hm-hai);text-decoration:none}
.hs-footer a:hover{color:var(--hm-sumi)}
.hs-footer__base{margin-top:var(--hm-space-10);padding-top:var(--hm-space-6);border-top:1px solid var(--hm-hair);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--hm-label);font-size:12px}
.hs-footer__base .hs-mono{font-size:12px}
.hs-status{display:inline-flex;align-items:center;gap:8px}
.hs-status i{width:7px;height:7px;border-radius:50%;background:#3aa35b;box-shadow:0 0 0 3px color-mix(in srgb,#3aa35b 20%,transparent)}
@media (max-width:760px){.hs-footer__grid{grid-template-columns:1fr 1fr}}

/* ---------- command palette ---------- */
.hs-dialog{border:0;padding:0;background:transparent;max-width:none;max-height:none;width:100%;height:100%;margin:0}
.hs-dialog::backdrop{background:color-mix(in srgb,var(--hm-sumi) 28%,transparent);backdrop-filter:blur(3px)}
.hs-pal{width:min(640px,calc(100% - 32px));margin:12vh auto 0;background:var(--hm-bg);border:1px solid var(--hm-hair);border-radius:var(--hm-radius-lg);box-shadow:var(--hm-shadow-lg);overflow:hidden;
  animation:hm-pop .18s var(--hm-ease)}
@keyframes hm-pop{from{opacity:0;transform:translateY(8px) scale(.985)}}
.hs-pal__in{display:flex;align-items:center;gap:12px;padding:0 16px;border-bottom:1px solid var(--hm-hair)}
.hs-pal__in svg{width:18px;height:18px;color:var(--hm-label)}
.hs-pal__in input{flex:1;height:56px;border:0;background:transparent;color:var(--hm-sumi);font:16px var(--hm-font);outline:none}
.hs-pal ul{list-style:none;margin:0;padding:8px;max-height:360px;overflow:auto}
.hs-pal li a{display:grid;grid-template-columns:28px 1fr auto;gap:12px;align-items:center;padding:10px 12px;border-radius:var(--hm-radius-md);text-decoration:none}
.hs-pal__ic{font:12px var(--hm-font-mono);color:var(--hm-label)}
.hs-pal li a small{font:12px var(--hm-font-mono);color:var(--hm-label)}
.hs-pal li a[aria-selected="true"]{background:var(--hm-kasumi)}
.hs-pal mark{background:color-mix(in srgb,var(--hm-accent) 18%,transparent);color:inherit;border-radius:3px}
.hs-pal__group{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--hm-label);padding:10px 12px 4px}
.hs-pal__foot{display:flex;gap:16px;padding:10px 16px;border-top:1px solid var(--hm-hair);font-size:12px;color:var(--hm-label);background:var(--hm-surface)}
.hs-pal__empty{padding:28px;text-align:center;color:var(--hm-label);font-size:14px}

/* ---------- theme panel (preview of Theme > Colours and fonts / Design system / Style presets) ---------- */
.hs-tp-btn{position:fixed;right:20px;bottom:20px;z-index:50;display:flex;align-items:center;gap:10px;height:44px;padding:0 16px 0 12px;border-radius:999px;
  background:var(--hm-sumi);color:var(--hm-bg);border:0;font:500 13px var(--hm-font);cursor:pointer;box-shadow:var(--hm-shadow-lg)}
.hs-tp-btn i{display:flex;gap:3px}.hs-tp-btn i b{width:9px;height:9px;border-radius:50%;background:var(--hm-accent);box-shadow:0 0 0 1.5px var(--hm-sumi)}
.hs-tp-btn i b+b{background:var(--hm-bg);margin-left:-6px}
.hs-tp{position:fixed;right:20px;bottom:76px;z-index:50;width:320px;max-height:calc(100vh - 120px);overflow:auto;background:var(--hm-bg);border:1px solid var(--hm-hair);
  border-radius:var(--hm-radius-lg);box-shadow:var(--hm-shadow-lg);padding:6px;transform-origin:100% 100%;animation:hm-pop .18s var(--hm-ease)}
.hs-tp[hidden]{display:none}
.hs-tp__head{display:flex;justify-content:space-between;align-items:center;padding:12px 12px 8px}
.hs-tp__head strong{font-size:14px;font-weight:500}
.hs-tp__grp{padding:12px;border-top:1px solid var(--hm-hair);display:grid;gap:10px}
.hs-tp__grp:first-of-type{border-top:0}
.hs-tp__lab{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--hm-label)}
.hs-tp__lab code{font:11px var(--hm-font-mono);letter-spacing:0;text-transform:none}
.hs-tp .hs-seg{width:100%}.hs-tp .hs-seg button{flex:1}
.hs-swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.hs-swatches button{border:1px solid var(--hm-hair);background:var(--hm-bg);border-radius:var(--hm-radius-md);padding:8px 4px 6px;cursor:pointer;display:grid;justify-items:center;gap:6px;color:var(--hm-hai);font:11px var(--hm-font)}
.hs-swatches button i{width:22px;height:22px;border-radius:50%;background:var(--c)}
.hs-swatches button .hs-kanji{font-size:12px;color:var(--hm-sumi)}
.hs-swatches button[aria-pressed="true"]{border-color:var(--hm-sumi);box-shadow:inset 0 0 0 1px var(--hm-sumi)}
.hs-tp__note{font-size:12px;color:var(--hm-label);padding:10px 12px 12px;border-top:1px solid var(--hm-hair);margin:0}
.hs-tp__note a{color:var(--hm-hai)}

/* ---------- toast ---------- */
.hs-toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);opacity:0;z-index:60;background:var(--hm-sumi);color:var(--hm-bg);padding:10px 16px;border-radius:999px;font-size:13px;transition:all .2s var(--hm-ease);pointer-events:none;display:flex;gap:8px;align-items:center}
.hs-toast.on{opacity:1;transform:translate(-50%,0)}

/* ---------- reveal ---------- */
/* reveal: only when hanshi.js runs (it adds --on), so no-JS pages never hide content */
.hs-reveal--on{opacity:0;transform:translateY(10px);transition:opacity .6s var(--hm-ease),transform .6s var(--hm-ease)}
.hs-reveal--on.in{opacity:1;transform:none}

/* ---------- archive ---------- */

.hs-arch-head{padding-top:var(--hm-space-10);padding-bottom:var(--hm-space-8);display:grid;grid-template-columns:1fr auto;gap:32px;align-items:end}
.hs-crumbs{display:flex;gap:8px;font-size:13px;color:var(--hm-label);margin-bottom:18px}
.hs-crumbs a{text-decoration:none;color:var(--hm-hai)}.hs-crumbs a:hover{color:var(--hm-sumi)}
.hs-pagebig{font:300 120px/0.8 var(--hm-font-heading);letter-spacing:-.06em;color:var(--hm-sumi);display:flex;align-items:flex-end;gap:10px}
.hs-pagebig small{font:500 13px/1 var(--hm-font-mono);letter-spacing:.04em;color:var(--hm-label);padding-bottom:8px}
.hs-month{display:grid;grid-template-columns:180px 1fr;gap:24px;border-top:1px solid var(--hm-hair);padding-top:var(--hm-space-5);margin-top:var(--hm-space-8)}
.hs-month__label{position:sticky;top:calc(var(--hm-header) + 24px);align-self:start;display:grid;gap:4px}
.hs-month__label b{font:450 var(--hm-fs-2xl)/1.1 var(--hm-font-heading);letter-spacing:-.03em}
.hs-month__label span{font:12px var(--hm-font-mono);color:var(--hm-label)}
.hs-month__label .hs-kanji{font-size:13px;letter-spacing:.3em;color:var(--hm-hai)}
.hs-month .hs-index{margin:0}
.hs-month .hs-row:first-child{border-top:0}
.hs-month .hs-row>a{grid-template-columns:64px minmax(0,1fr) 150px 150px}
.hs-month .hs-row__cat{display:none}
@media (max-width:860px){.hs-month{grid-template-columns:1fr}.hs-month__label{position:static}.hs-arch-head{grid-template-columns:1fr}.hs-pagebig{display:none}}
@media (max-width:1000px){.hs-month .hs-row>a{grid-template-columns:48px minmax(0,1fr) 140px}}
@media (max-width:640px){.hs-month .hs-row>a{grid-template-columns:minmax(0,1fr)}}

/* ---------- single post ---------- */

.hs-post-head{padding-top:var(--hm-space-10);max-width:58rem}
.hs-crumbs{display:flex;gap:8px;font-size:13px;color:var(--hm-label);margin-bottom:22px}
.hs-crumbs a{text-decoration:none;color:var(--hm-hai)}.hs-crumbs a:hover{color:var(--hm-sumi)}
.hs-post-head .hs-display{font-size:clamp(2.4rem,5vw,4rem);margin-top:16px}
.hs-post-head .hs-lede{margin-top:20px;max-width:44ch}
.hs-metabar{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:var(--hm-space-8);padding-block:16px;border-top:1px solid var(--hm-hair);border-bottom:1px solid var(--hm-hair)}
.hs-metabar dl{display:flex;gap:28px;margin:0;flex-wrap:wrap}
.hs-metabar dt{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--hm-label)}
.hs-metabar dd{margin:2px 0 0;font-size:14px}
.hs-metabar__act{margin-left:auto;display:flex;gap:6px}
.hs-post-cover{margin:var(--hm-space-8) 0 0}
.hs-post-cover .hs-cover{height:clamp(220px,32vw,400px);border-radius:var(--hm-radius-lg)}
.hs-post-cover figcaption{display:flex;justify-content:space-between;font-size:12px;color:var(--hm-label);padding:10px 2px 0}

/* body grid: index | prose (+ sidenote rail) */
.hs-post{display:grid;grid-template-columns:240px minmax(0,1fr);gap:64px;margin-top:var(--hm-space-10)}
.hs-toc{position:sticky;top:calc(var(--hm-header) + 32px);align-self:start;max-height:calc(100vh - var(--hm-header) - 64px);overflow:auto;padding-right:4px;scrollbar-width:thin}
.hs-toc__head{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:14px;margin-bottom:6px;border-bottom:1px solid var(--hm-hair)}
.hs-toc__head .hs-eyebrow{gap:8px}
.hs-toc__head .hs-mono{font-size:12px;color:var(--hm-label)}
.hs-toc ol{list-style:none;margin:0;padding:0}
.hs-toc li a{position:relative;display:grid;grid-template-columns:26px 1fr;gap:6px;padding:7px 0 7px 14px;text-decoration:none;color:var(--hm-label);font-size:14px;line-height:1.4;transition:color .15s}
.hs-toc li a::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--hm-hair)}
.hs-toc li a::after{content:"";position:absolute;left:0;top:0;width:1px;height:calc(var(--f,0)*100%);background:var(--hm-sumi);transition:height .1s linear}
.hs-toc li a .hs-num{font-size:11px;padding-top:2px}
.hs-toc li a:hover{color:var(--hm-sumi)}
.hs-toc li a.is-read{color:var(--hm-hai)}
.hs-toc li a.is-active{color:var(--hm-sumi)}
.hs-toc li a.is-active::after{background:var(--hm-accent);width:2px}
.hs-toc li a.is-active .hs-num{color:var(--hm-accent)}
.hs-toc .hs-toc__sub a{padding-left:46px;font-size:13px;grid-template-columns:1fr}
.hs-toc .hs-toc__sub a .hs-num{display:none}
.hs-toc__foot{margin-top:18px;padding-top:14px;border-top:1px solid var(--hm-hair);display:grid;gap:10px;font-size:13px}
.hs-toc__left{display:flex;justify-content:space-between;color:var(--hm-label)}
.hs-toc__bar{height:3px;border-radius:3px;background:var(--hm-kasumi);overflow:hidden}
.hs-toc__bar i{display:block;height:100%;width:calc(var(--p,0)*100%);background:var(--hm-sumi)}
.hs-toc__links{display:flex;gap:14px}
.hs-toc__links a,.hs-toc__links button{background:none;border:0;padding:0;color:var(--hm-hai);font:13px var(--hm-font);cursor:pointer;text-decoration:none}
.hs-toc__links a:hover,.hs-toc__links button:hover{color:var(--hm-sumi)}

/* prose */
.hs-prose-wrap{position:relative;padding-right:260px;min-width:0}
.hs-prose{max-width:var(--hm-reading);font-size:17px;line-height:1.75;color:var(--hm-sumi)}
.hs-prose>*{margin:0}
.hs-prose>*+*{margin-top:1.15em}
.hs-prose p{text-wrap:pretty}
.hs-prose>p:first-of-type::first-letter{font:400 3.6em/.8 var(--hm-font-heading);float:left;margin:.08em .1em 0 0;letter-spacing:-.04em}
.hs-prose h2{font-family:var(--hm-font-heading);font-size:var(--hm-fs-2xl);font-weight:450;letter-spacing:-.035em;line-height:1.2;margin-top:2.6em;padding-top:1.1em;border-top:1px solid var(--hm-hair);position:relative;display:flex;gap:14px;align-items:baseline}
.hs-prose h2 .hs-num{font-size:13px;min-width:24px}
.hs-prose h3{font-size:var(--hm-fs-lg);font-weight:550;letter-spacing:-.015em;margin-top:2em;position:relative}
.hs-anchor{opacity:0;margin-left:6px;text-decoration:none;color:var(--hm-label);font-weight:400;transition:opacity .15s}
.hs-prose h2:hover .hs-anchor,.hs-prose h3:hover .hs-anchor,.hs-anchor:focus{opacity:1}
.hs-prose a{text-decoration:underline;text-decoration-color:var(--hm-kinu);text-underline-offset:4px;text-decoration-thickness:1px}
.hs-prose a:hover{text-decoration-color:var(--hm-sumi)}
.hs-prose strong{font-weight:600}
.hs-prose code{font:14.5px var(--hm-font-mono);padding:2px 6px;border-radius:6px;background:var(--hm-kasumi);border:1px solid var(--hm-hair)}
.hs-prose ul{padding-left:1.2em}
.hs-prose ul li::marker{color:var(--hm-label)}
.hs-prose li+li{margin-top:.4em}
.hs-steps{list-style:none;padding:0;counter-reset:s}
.hs-steps>li{counter-increment:s;position:relative;padding-left:52px;min-height:32px}
.hs-steps>li+li{margin-top:1.1em}
.hs-steps>li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:2px;width:34px;height:26px;border:1px solid var(--hm-hair);border-radius:999px;display:grid;place-items:center;font:500 11px/1 var(--hm-font-mono);color:var(--hm-hai);background:var(--hm-bg)}
.hs-steps>li:not(:last-child)::after{content:"";position:absolute;left:17px;top:32px;bottom:-1.1em;width:1px;background:var(--hm-hair)}

.hs-tldr{border:1px solid var(--hm-hair);border-radius:var(--hm-radius-lg);padding:22px 24px;background:var(--hm-surface);font-size:15px;line-height:1.6}
.hs-tldr .hs-eyebrow{margin-bottom:10px}
.hs-tldr ul{margin:0;padding-left:1.1em}
.hs-callout{display:grid;grid-template-columns:auto 1fr;gap:14px;border:1px solid var(--hm-hair);border-radius:var(--hm-radius-md);padding:16px 18px;font-size:15px;line-height:1.6}
.hs-callout b.i{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font:600 12px/1 var(--hm-font-mono);border:1px solid var(--hm-kinu);color:var(--hm-hai)}
.hs-callout strong:first-child{display:block;margin-bottom:2px}
.hs-callout--warn{border-left:3px solid var(--hm-accent)}
.hs-callout--warn b.i{color:var(--hm-accent);border-color:color-mix(in srgb,var(--hm-accent) 40%,transparent)}

.hs-code{border:1px solid var(--hm-hair);border-radius:var(--hm-radius-md);overflow:hidden;background:var(--hm-surface)}
.hs-code__bar{display:flex;align-items:center;gap:10px;height:38px;padding:0 8px 0 14px;border-bottom:1px solid var(--hm-hair);font:12px var(--hm-font-mono);color:var(--hm-label)}
.hs-code__bar i{display:flex;gap:5px}.hs-code__bar i b{width:9px;height:9px;border-radius:50%;border:1px solid var(--hm-kinu)}
.hs-code__bar button{margin-left:auto}
.hs-code pre{margin:0;padding:16px 18px;overflow:auto;font:13.5px/1.7 var(--hm-font-mono);color:var(--hm-sumi)}
.hs-code pre code{background:none;border:0;padding:0;font:inherit}
.hs-code .c{color:var(--hm-label)}.hs-code .k{color:var(--hm-accent)}.hs-code .s{color:var(--hm-hai)}

.hs-table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.5}
.hs-table th{text-align:left;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--hm-label);padding:0 12px 10px 0;border-bottom:1px solid var(--hm-sumi)}
.hs-table td{padding:12px 12px 12px 0;border-bottom:1px solid var(--hm-hair);vertical-align:top}
.hs-table td:first-child{font-weight:500;white-space:nowrap}

.hs-fig{border:1px solid var(--hm-hair);border-radius:var(--hm-radius-lg);overflow:hidden}
.hs-fig figcaption{padding:12px 16px;border-top:1px solid var(--hm-hair);font-size:13px;color:var(--hm-label);display:flex;justify-content:space-between;gap:12px}
.hs-flow{display:grid;grid-template-columns:repeat(5,1fr);padding:28px 20px;gap:0;background:var(--hm-surface);position:relative}
.hs-flow div{position:relative;display:grid;justify-items:center;gap:8px;text-align:center;font-size:13px}
.hs-flow div+div::before{content:"";position:absolute;top:21px;right:calc(50% + 26px);width:calc(100% - 52px);height:1px;background:var(--hm-kinu)}
.hs-flow b{width:44px;height:44px;border-radius:50%;border:1px solid var(--hm-kinu);display:grid;place-items:center;font:500 14px/1 var(--hm-font-mono);background:var(--hm-bg)}
.hs-flow div:nth-child(4) b{border-color:var(--hm-sumi);background:var(--hm-sumi);color:var(--hm-bg)}
.hs-flow span{color:var(--hm-hai);font-size:12px}
@media (max-width:560px){.hs-flow{grid-template-columns:1fr;gap:14px}.hs-flow div+div::before{display:none}.hs-flow div{grid-template-columns:44px 1fr;justify-items:start;text-align:left;align-items:center}}

/* sidenotes: float into the right rail on wide screens, toggle inline on narrow */
.hs-snref{font:600 11px/1 var(--hm-font-mono);color:var(--hm-accent);vertical-align:super;margin-left:2px;cursor:pointer;background:none;border:0;padding:0}
.hs-sn{position:absolute;right:0;width:220px;font-size:13px;line-height:1.55;color:var(--hm-hai);margin:0!important;padding-top:10px;border-top:1px solid var(--hm-hair);transition:color .15s}
.hs-sn b{font:600 11px var(--hm-font-mono);color:var(--hm-accent);margin-right:6px}

.hs-check{list-style:none;padding:0;border:1px solid var(--hm-hair);border-radius:var(--hm-radius-lg);overflow:hidden}
.hs-check li{margin:0!important;border-top:1px solid var(--hm-hair)}
.hs-check li:first-child{border-top:0}
.hs-check label{display:grid;grid-template-columns:22px 1fr;gap:14px;padding:14px 18px;cursor:pointer;font-size:15px;line-height:1.55}
.hs-check input{appearance:none;width:20px;height:20px;margin:2px 0 0;border:1px solid var(--hm-kinu);border-radius:6px;display:grid;place-items:center;cursor:pointer;background:var(--hm-bg)}
.hs-check input:checked{background:var(--hm-sumi);border-color:var(--hm-sumi)}
.hs-check input:checked::after{content:"";width:9px;height:5px;border:solid var(--hm-bg);border-width:0 0 1.6px 1.6px;transform:rotate(-45deg) translate(1px,-1px)}
.hs-check input:checked+span{color:var(--hm-label);text-decoration:line-through;text-decoration-color:var(--hm-kinu)}
.hs-check__foot{display:flex;justify-content:space-between;font-size:13px;color:var(--hm-label);padding:10px 18px;background:var(--hm-surface);border-top:1px solid var(--hm-hair)}

/* end matter */
.hs-end{margin-top:var(--hm-space-10);padding-top:var(--hm-space-6);border-top:1px solid var(--hm-hair);display:grid;gap:var(--hm-space-6);max-width:var(--hm-reading)}
.hs-tags{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.hs-tags .hs-eyebrow{margin-right:6px}
.hs-authorbox{display:grid;grid-template-columns:48px 1fr;gap:16px;padding:20px;border:1px solid var(--hm-hair);border-radius:var(--hm-radius-lg)}
.hs-authorbox .hs-avatar{width:48px;height:48px;font-size:14px}
.hs-authorbox p{margin:0;font-size:14px;color:var(--hm-hai)}
.hs-authorbox p:first-child{color:var(--hm-sumi);font-weight:500;font-size:15px;margin-bottom:4px}
.hs-history{font-size:13px;color:var(--hm-label)}
.hs-history summary{cursor:pointer;color:var(--hm-hai)}
.hs-history ul{list-style:none;padding:0;margin:10px 0 0;display:grid;gap:6px}
.hs-history li{display:grid;grid-template-columns:110px 1fr;font-family:var(--hm-font-mono);font-size:12px}

.hs-adj{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--hm-hair);border:1px solid var(--hm-hair);border-radius:var(--hm-radius-lg);overflow:hidden;margin-top:var(--hm-space-10)}
.hs-adj a{background:var(--hm-bg);padding:24px;text-decoration:none;display:grid;gap:8px;transition:background .2s}
.hs-adj a:hover{background:var(--hm-surface)}
.hs-adj small{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--hm-label)}
.hs-adj b{font:450 var(--hm-fs-xl)/1.25 var(--hm-font-heading);letter-spacing:-.025em}
.hs-adj a:last-child{text-align:right}
.hs-adj .is-empty{color:var(--hm-label);font-size:14px;display:grid;place-items:center}
.hs-related{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.hs-related a{text-decoration:none;display:grid;gap:12px}
.hs-related .hs-cover{aspect-ratio:16/9;border-radius:var(--hm-radius-md);border:1px solid var(--hm-hair)}
.hs-related b{font:450 var(--hm-fs-lg)/1.3 var(--hm-font-heading);letter-spacing:-.02em}
.hs-related a:hover b{text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--hm-kinu)}

/* mobile index bar */
.hs-tocm{display:none;position:sticky;top:var(--hm-header);z-index:30;background:color-mix(in srgb,var(--hm-bg) 90%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--hm-hair)}
.hs-tocm button{width:100%;display:flex;align-items:center;gap:10px;height:46px;background:none;border:0;color:var(--hm-sumi);font:14px var(--hm-font);padding:0 24px;cursor:pointer}
.hs-tocm .hs-num{color:var(--hm-accent)}
.hs-tocm svg{margin-left:auto;width:14px;transition:transform .2s}
.hs-tocm[data-open] svg{transform:rotate(180deg)}
.hs-tocm__panel{display:none;padding:4px 24px 16px;max-height:60vh;overflow:auto}
.hs-tocm[data-open] .hs-tocm__panel{display:block}

@media (max-width:1240px){.hs-prose-wrap{padding-right:0}.hs-sn{position:static;width:auto;margin:.6em 0 0!important;display:none;padding:10px 14px;border:1px solid var(--hm-hair);border-radius:var(--hm-radius-md);background:var(--hm-surface)}.hs-sn.open{display:block}}
@media (max-width:980px){.hs-post{grid-template-columns:1fr}.hs-toc{display:none}.hs-tocm{display:block}.hs-related{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.hs-related,.hs-adj{grid-template-columns:1fr}.hs-adj a:last-child{text-align:left}.hs-metabar__act{margin-left:0}}

/* =====================================================================
   Theme-only additions (not in the mockup)
   ===================================================================== */
body.hs-body{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
body.hs-body>main{flex:1 0 auto}
.hs-brand__word{text-transform:uppercase}
.hs-brand img{height:30px;width:auto}
/* engine theme toggle (hm.js unhides it): moon in light mode, sun in dark */
.hs-mode .hs-sun{display:none}
:root[data-theme="dark"] .hs-mode .hs-sun{display:block}
:root[data-theme="dark"] .hs-mode .hs-moon{display:none}
/* mobile menu */
.hs-menu{display:none;position:relative}
.hs-menu summary{list-style:none;cursor:pointer}
.hs-menu summary::-webkit-details-marker{display:none}
.hs-menu ul{position:absolute;right:0;top:calc(100% + 8px);list-style:none;margin:0;padding:6px;min-width:200px;background:var(--hm-bg);border:1px solid var(--hm-hair);border-radius:var(--hm-radius-md);box-shadow:var(--hm-shadow-md);z-index:45}
.hs-menu a{display:block;padding:8px 12px;border-radius:8px;text-decoration:none;color:var(--hm-hai);font-size:14px}
.hs-menu a:hover{background:var(--hm-kasumi);color:var(--hm-sumi)}
@media (max-width:900px){.hs-menu{display:block}}
/* JS-only controls start hidden */
[data-hs-js][hidden]{display:none!important}
/* listing helpers */
.hs-empty{padding:var(--hm-space-10) 0;color:var(--hm-hai);font-size:var(--hm-fs-lg)}
.hs-listhead{padding-top:var(--hm-space-10);padding-bottom:var(--hm-space-8);display:grid;grid-template-columns:1fr auto;gap:32px;align-items:end}
.hs-listhead .hs-lede{margin-top:18px;max-width:52ch}
@media (max-width:860px){.hs-listhead{grid-template-columns:1fr}}
.hs-searchform{display:flex;gap:8px;max-width:560px;margin-top:var(--hm-space-6)}
.hs-authorhead{display:flex;gap:20px;align-items:center}
.hs-authorhead img{width:72px;height:72px;border-radius:50%;object-fit:cover;border:1px solid var(--hm-hair)}
.hs-cover--img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1);opacity:.85;transition:filter .4s,opacity .4s,transform .8s var(--hm-ease)}
a:hover .hs-cover--img img,.hs-cover--img:hover img{filter:none;opacity:1;transform:scale(1.03)}
.hs-error{padding-block:var(--hm-space-12);text-align:left}
.hs-error__code{font:300 clamp(5rem,14vw,10rem)/.9 var(--hm-font-heading);letter-spacing:-.06em;margin:0;color:var(--hm-kinu)}
/* editor content inside a post (anything the rich-text editor can produce) */
.hs-prose h4{font-size:var(--hm-fs-base);font-weight:600;margin-top:1.8em}
.hs-prose blockquote{margin-left:0;padding:4px 0 4px 20px;border-left:2px solid var(--hm-sumi);color:var(--hm-hai);font-size:1.05em}
.hs-prose blockquote p{margin:0}
.hs-prose pre{border:1px solid var(--hm-hair);border-radius:var(--hm-radius-md);background:var(--hm-surface);padding:16px 18px;overflow:auto;font:13.5px/1.7 var(--hm-font-mono)}
.hs-prose pre code{background:none;border:0;padding:0;font:inherit}
.hs-prose table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.5;display:block;overflow-x:auto}
.hs-prose th{text-align:left;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--hm-label);padding:0 12px 10px 0;border-bottom:1px solid var(--hm-sumi)}
.hs-prose td{padding:12px 12px 12px 0;border-bottom:1px solid var(--hm-hair);vertical-align:top}
.hs-prose img,.hs-prose video,.hs-prose iframe{max-width:100%;height:auto;border-radius:var(--hm-radius-md)}
.hs-prose figure{margin:0}
.hs-prose figcaption{font-size:13px;color:var(--hm-label);margin-top:8px}
.hs-prose hr{border:0;border-top:1px solid var(--hm-hair);margin:2.5em 0}
.hs-prose ol{padding-left:1.4em}
.hs-prose ol li::marker{font-family:var(--hm-font-mono);font-size:.85em;color:var(--hm-label)}
/* sections an editor adds below a post keep the built-in styles */
.hs-blocks{margin-top:var(--hm-space-10)}
/* layout glue for the real templates */
.hs-mast .hs-display{margin-top:18px}
.hs-lead__tags{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.hs-lead--text{grid-template-columns:1fr}
.hs-latest{padding-top:var(--hm-space-9)}
.hs-cta__text{margin:0;color:var(--hm-hai);max-width:52ch}
.hs-cta__body p{margin:0}
.hs-follow{padding-top:var(--hm-space-10)}
.hs-footer__tag{color:var(--hm-hai);max-width:34ch;margin:18px 0 0}
.hs-footer__base a{color:inherit}
.hs-pal__ic{font:12px var(--hm-font-mono);color:var(--hm-label);text-align:center}
.hs-pal{margin-top:12vh}
.hs-cover--post{height:clamp(220px,32vw,400px);border-radius:var(--hm-radius-lg)}
.hs-section--related{padding-bottom:0}
.hs-related .hs-meta{gap:6px 14px}
.hs-tocm__panel[hidden]{display:none!important}
.hs-prose-wrap{padding-right:0}
.hs-post{grid-template-columns:240px minmax(0,var(--hm-reading));justify-content:start}
.hs-post--solo{grid-template-columns:minmax(0,var(--hm-reading));justify-content:center}
.hs-post--solo+*{margin-inline:auto}
.hs-end{max-width:var(--hm-reading)}
/* numbered h2s, matching the index numbers */
.hs-prose{counter-reset:hsh2}
.hs-prose h2::before{counter-increment:hsh2;content:counter(hsh2,decimal-leading-zero);font:500 13px var(--hm-font-mono);color:var(--hm-label);min-width:24px;letter-spacing:0}
.hs-prose h2 .hs-anchor,.hs-prose h3 .hs-anchor{margin-left:auto}
.hs-prose h3 .hs-anchor{margin-left:8px}
@media (max-width:980px){.hs-post,.hs-post--solo{grid-template-columns:minmax(0,1fr)}}
.hs-search-btn{text-decoration:none}
.hs-ruler__scale{margin-top:8px}
.hs-topic:last-child:nth-child(4n+3){grid-column:span 2}
.hs-topic:last-child:nth-child(4n+2){grid-column:span 3}
.hs-topic:last-child:nth-child(4n+1){grid-column:1/-1}
@media (max-width:900px){.hs-topic:last-child:nth-child(odd){grid-column:1/-1}.hs-topic:last-child:nth-child(4n+3),.hs-topic:last-child:nth-child(4n+2){grid-column:auto}}
.hs-row__meta span:first-child{color:inherit}
.hs-row__meta span:not(.hs-mono){color:var(--hm-sumi)}
.hs-prose.hm-prose>*{margin-top:0;margin-bottom:0}
.hs-prose.hm-prose>*+*{margin-top:1.15em}
.hs-prose.hm-prose>h2{margin-top:2.6em}
.hs-prose.hm-prose>h3{margin-top:2em}
.hs-prose table{display:table}
@media (max-width:640px){.hs-prose table{display:block;overflow-x:auto}}
.hs-lead__read{white-space:nowrap}
@media (max-width:520px){.hs-brand__word{display:none}}
.hs-footer__grid{grid-template-columns:2fr repeat(auto-fit,minmax(140px,1fr))}
@media print{.hs-reveal--on{opacity:1!important;transform:none!important}.hs-header,.hs-tp-btn,.hs-toc,.hs-tocm,.hs-footer{display:none}}

.hm-registry { padding-block: clamp(2rem, 5vw, 4rem); }
.hm-registry__crumbs { font-size: 0.875rem; color: var(--ht-fg-muted); margin-bottom: 1.5rem; }
.hm-registry__header { margin-bottom: 2rem; }
.hm-registry__title { margin: 0 0 0.5rem; }
.hm-registry__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0; font-family: var(--hm-font-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hm-label); }
.hm-registry__tier { padding: 0.1rem 0.5rem; border: 1px solid var(--hm-hair); border-radius: 999px; background: var(--hm-shiro); }
.hm-registry__lede { margin: 0.75rem 0 0; font-size: 1.1rem; color: var(--ht-fg-muted); }
.hm-registry__cols { display: grid; gap: 2rem; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
.hm-registry__cols--single { grid-template-columns: minmax(0, 1fr); }
.hm-registry__shot { display: block; max-width: 100%; height: auto; margin-bottom: 1.5rem; border: 1px solid var(--hm-hair); border-radius: var(--hm-radius-md); }
.hm-registry__h { font-size: 1.125rem; margin: 1.5rem 0 0.5rem; }
.hm-registry__main > .hm-registry__h:first-child { margin-top: 0; }
.hm-registry__side { padding: 1.25rem; border: 1px solid var(--hm-hair); border-radius: var(--hm-radius-md); background: var(--hm-shiro); }
.hm-registry__side .hm-registry__h:first-of-type { margin-top: 1rem; }
.hm-registry__facts { display: grid; grid-template-columns: auto 1fr; gap: 0.375rem 1rem; margin: 0; }
.hm-registry__facts dt { color: var(--hm-label); }
.hm-registry__facts dd { margin: 0; overflow-wrap: anywhere; }
.hm-registry__perms { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.375rem; }
.hm-registry__warn { color: var(--hm-shu); }
.hm-registry__install { margin: 2rem 0 0; font-family: var(--hm-font-mono); font-size: 0.8125rem; color: var(--hm-label); }
@media (max-width: 48rem) { .hm-registry__cols { grid-template-columns: minmax(0, 1fr); } }

/* WordPress compatibility: the core Gutenberg block classes that imported or
   pasted content carries. Scoped to .hm-entry / .hm-prose so they only style
   rich-text bodies. Colours come from the theme tokens. */

/* Alignment. alignwide and alignfull break out of the 46rem article column. */
.hm-entry .alignleft { float: left; margin: 0.25em 1.5em 1em 0; max-width: 50%; }
.hm-entry .alignright { float: right; margin: 0.25em 0 1em 1.5em; max-width: 50%; }
.hm-entry .aligncenter { display: block; margin-left: auto; margin-right: auto; text-align: center; }
.hm-entry .alignwide { width: min(75rem, calc(100vw - 3rem)); max-width: none; margin-left: 50%; transform: translateX(-50%); }
.hm-entry .alignfull { width: 100vw; max-width: none; margin-left: 50%; transform: translateX(-50%); }
/* A wide image stays a banner, not a full screen: cap its height and crop. */
.hm-entry img.alignwide, .hm-entry img.alignfull, .hm-entry .alignwide img, .hm-entry .alignfull img { width: 100%; max-height: min(32rem, 70vh); object-fit: cover; }
.hm-entry::after { content: ""; display: table; clear: both; }

/* Images and captions */
.wp-block-image, .wp-block-gallery figure { margin: 1.75em 0; }
.wp-block-image img { display: block; max-width: 100%; height: auto; }
.wp-block-image.aligncenter img { margin-inline: auto; }
.wp-block-image figcaption, figure.wp-caption figcaption, .wp-element-caption, .wp-caption-text { margin-top: 0.6em; font-size: 0.8125rem; color: var(--hm-label); text-align: center; }
.wp-block-gallery { display: flex; flex-wrap: wrap; gap: 1rem; list-style: none; padding: 0; margin: 1.75em 0; }
.wp-block-gallery .wp-block-image { flex: 1 1 12rem; margin: 0; }

/* Quote */
.wp-block-quote { margin: 1.75em 0; padding: 0.25em 0 0.25em 1.25em; border-left: 3px solid var(--hm-primary); color: var(--hm-hai); font-size: 1.125em; }
.wp-block-quote p { margin: 0 0 0.5em; }
.wp-block-quote cite, .wp-block-quote__citation { display: block; font-size: 0.8125rem; font-style: normal; color: var(--hm-label); }
.wp-block-pullquote { margin: 2em 0; padding: 1.5em 0; border-block: 1px solid var(--hm-hair); text-align: center; font-size: 1.375em; }
.wp-block-pullquote blockquote { margin: 0; padding: 0; border: 0; }

/* Table. Cells keep a readable minimum width, so a wide table scrolls sideways
   inside its own box (never the page) and edge shadows hint that there is more. */
.wp-block-table, .hm-entry > table {
  margin: 1.75em 0; max-width: 100%; overflow-x: auto;
  background:
    linear-gradient(to right, var(--hm-bg) 30%, transparent) left / 2rem 100% no-repeat local,
    linear-gradient(to left, var(--hm-bg) 30%, transparent) right / 2rem 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.28), transparent) left / 0.75rem 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.28), transparent) right / 0.75rem 100% no-repeat scroll;
}
.hm-entry > table { display: block; width: max-content; border-collapse: collapse; font-size: 0.9375rem; }
.wp-block-table table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.hm-entry th, .hm-entry td { min-width: 7rem; }
.wp-block-table th, .wp-block-table td, .hm-entry > table th, .hm-entry > table td { padding: 0.5rem 0.75rem; border: 1px solid var(--hm-hair); text-align: left; }
.wp-block-table thead th, .hm-entry > table thead th { background: var(--hm-kasumi); }
.wp-block-table.is-style-stripes tbody tr:nth-child(odd) { background: var(--hm-kasumi); }
.wp-block-table figcaption { margin-top: 0.6em; font-size: 0.8125rem; color: var(--hm-label); text-align: center; }

/* Columns */
.wp-block-columns { display: flex; flex-wrap: wrap; gap: 1.5rem 2rem; margin: 1.75em 0; }
.wp-block-column { flex: 1 1 14rem; min-width: 0; }
.wp-block-column > :first-child { margin-top: 0; }
.wp-block-column > :last-child { margin-bottom: 0; }
@media (min-width: 48rem) { .wp-block-columns { flex-wrap: nowrap; } }

/* Buttons */
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.5em 0; }
.wp-block-button__link { display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0 1.25rem; border: 1px solid var(--hm-primary); border-radius: 999px; background: var(--hm-primary); color: #fff; font-size: 0.875rem; font-weight: 500; text-decoration: none; }
.wp-block-button__link:hover { filter: brightness(0.88); }
.wp-block-button.is-style-outline .wp-block-button__link { background: transparent; color: var(--hm-primary); }
.hm-entry .wp-block-button__link { color: #fff; }
.hm-entry .wp-block-button.is-style-outline .wp-block-button__link { color: var(--hm-primary); }

/* Embeds: responsive 16:9 by default */
.wp-block-embed { margin: 1.75em 0; }
.wp-block-embed__wrapper { position: relative; }
.wp-embed-aspect-16-9 .wp-block-embed__wrapper, .wp-has-aspect-ratio .wp-block-embed__wrapper { aspect-ratio: 16 / 9; }
.wp-embed-aspect-4-3 .wp-block-embed__wrapper { aspect-ratio: 4 / 3; }
.wp-embed-aspect-1-1 .wp-block-embed__wrapper { aspect-ratio: 1 / 1; }
.wp-block-embed iframe, .wp-block-embed video { width: 100%; height: 100%; border: 0; }
.wp-block-embed:not([class*="wp-embed-aspect"]) iframe { aspect-ratio: 16 / 9; height: auto; }
.wp-block-embed figcaption { margin-top: 0.6em; font-size: 0.8125rem; color: var(--hm-label); text-align: center; }

/* Misc core blocks */
.wp-block-separator { border: 0; border-top: 1px solid var(--hm-hair); margin: 2.5em auto; }
.wp-block-code, .wp-block-preformatted { overflow-x: auto; }
.wp-block-group { margin: 1.75em 0; }
.wp-block-group.has-background { padding: 1.5rem; border-radius: var(--hm-radius-md); }
.wp-block-cover { position: relative; display: flex; align-items: center; justify-content: center; min-height: 14rem; padding: 2rem; margin: 1.75em 0; overflow: hidden; border-radius: var(--hm-radius-md); background: var(--hm-sumi-soft); color: #fff; }
.wp-block-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wp-block-cover__inner-container { position: relative; }
.has-text-align-center { text-align: center; }
.has-text-align-right { text-align: right; }
.has-text-align-left { text-align: left; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Colour classes: the editor's default palette on the theme's own ink */
.has-black-color { color: #141417; }
.has-white-color { color: #ffffff; }
.has-gray-color, .has-cyan-bluish-gray-color { color: #66666c; }
.has-vivid-red-color, .has-red-color { color: #cf2e2e; }
.has-vivid-green-cyan-color, .has-green-color { color: #00a96e; }
.has-vivid-cyan-blue-color, .has-blue-color { color: #0693e3; }
.has-black-background-color { background-color: #141417; }
.has-white-background-color { background-color: #ffffff; }
.has-gray-background-color, .has-cyan-bluish-gray-background-color { background-color: #abb8c3; }
.has-vivid-red-background-color, .has-red-background-color { background-color: #cf2e2e; }
.has-vivid-green-cyan-background-color, .has-green-background-color { background-color: #00a96e; }
.has-vivid-cyan-blue-background-color, .has-blue-background-color { background-color: #0693e3; }
.has-background:not(.has-text-color) { color: var(--hm-sumi); }
.has-black-background-color, .has-vivid-red-background-color, .has-vivid-cyan-blue-background-color { color: #fff; }
.has-small-font-size { font-size: 0.8125em; }
.has-medium-font-size { font-size: 1.125em; }
.has-large-font-size { font-size: 1.5em; }
.has-x-large-font-size { font-size: 2em; }

[data-theme="dark"] .has-black-color { color: #ececea; }
@media (max-width: 47.99rem) {
  .hm-entry .alignleft, .hm-entry .alignright { float: none; max-width: 100%; margin: 1em 0; }
}

.hm-card-columns__grid { display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); background: var(--hm-hair); border: 1px solid var(--hm-hair); border-radius: var(--hm-radius-lg); overflow: hidden; }
@media (min-width: 64rem) {
  .hm-card-columns--cols-2 .hm-card-columns__grid { grid-template-columns: repeat(2, 1fr); }
  .hm-card-columns--cols-3 .hm-card-columns__grid { grid-template-columns: repeat(3, 1fr); }
  .hm-card-columns--cols-4 .hm-card-columns__grid { grid-template-columns: repeat(4, 1fr); }
}
.hm-card-columns__col { background: var(--hm-bg); padding: 2rem 1.75rem; }
.hm-card-columns__label { margin: 0 0 0.75rem; font-family: var(--hm-font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hm-label); }
.hm-card-columns__title { margin: 0 0 0.5rem; font-size: 1.25rem; }
.hm-card-columns__description { margin: 0 0 1.25rem; color: var(--ht-fg-muted); }
.hm-card-columns__items { list-style: none; margin: 0; padding: 0; font-family: var(--hm-font-mono); font-size: 0.8125rem; }
.hm-card-columns__items li { padding: 0.5rem 0; border-top: 1px dashed var(--hm-hair); color: var(--hm-text); }
.hm-card-columns__notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1.5rem; margin-top: 1.5rem; padding: 1.5rem; background: var(--hm-shiro); border: 1px solid var(--hm-hair); border-radius: var(--hm-radius-md); }
.hm-card-columns__note-title { margin: 0 0 0.25rem; font-size: 0.9375rem; font-weight: 600; letter-spacing: 0; }
.hm-card-columns__note-text { margin: 0; font-size: 0.875rem; color: var(--ht-fg-muted); }

/* client_logos renders with the shared .hm-logo-strip styles (see logo_strip.css). */

.hm-comparison__sides { display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); background: var(--hm-hair); border: 1px solid var(--hm-hair); border-radius: var(--hm-radius-lg); overflow: hidden; }
.hm-comparison__side { background: var(--hm-bg); padding: 2rem 1.75rem; }
.hm-comparison__side--positive { background: var(--hm-shiro); }
.hm-comparison__tag { margin: 0 0 0.75rem; font-family: var(--hm-font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hm-label); }
.hm-comparison__side--positive .hm-comparison__tag { color: var(--hm-shu); }
.hm-comparison__title { margin: 0 0 1.25rem; font-size: 1.375rem; }
.hm-comparison__items { list-style: none; margin: 0; padding: 0; }
.hm-comparison__items li { position: relative; padding: 0.625rem 0 0.625rem 1.75rem; border-top: 1px solid var(--hm-hair); }
/* Glyphs are pseudo-elements so the canvas editor never edits them. */
.hm-comparison__items li::before { position: absolute; left: 0; top: 0.625rem; font-family: var(--hm-font-mono); }
.hm-comparison__side--negative .hm-comparison__items li { color: var(--hm-hai); text-decoration: line-through; }
.hm-comparison__side--negative .hm-comparison__items li::before { content: "\00d7"; color: var(--hm-label); }
.hm-comparison__side--positive .hm-comparison__items li::before { content: "\2713"; color: var(--hm-shu); }

.hm-contact-form { max-width: 40rem; }
.hm-contact-form--split { max-width: var(--hm-container); display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: start; }
.hm-contact-form__subheading { color: var(--ht-fg-muted); }
.hm-form { display: grid; gap: 1rem; }
.hm-form__field { display: grid; gap: 0.35rem; }
.hm-form__label, .hm-form__group legend { font-weight: 600; }
.hm-form input[type="text"], .hm-form input[type="email"], .hm-form input[type="tel"], .hm-form textarea, .hm-form select {
  width: 100%; padding: 0.6rem 0.75rem; font: inherit; color: inherit; background: var(--hm-bg);
  border: 1px solid var(--ht-line); border-radius: var(--hm-radius-md);
}
.hm-form__group { border: 0; padding: 0; margin: 0; display: grid; gap: 0.35rem; }
.hm-form__check { display: flex; gap: 0.5rem; align-items: baseline; }
.hm-form__help { color: var(--ht-fg-muted); }
.hm-form__submit { justify-self: start; cursor: pointer; font: inherit; font-size: 0.875rem; font-weight: 500; }
.hm-form__captcha { min-height: 1px; }
.hm-form__error { padding: 0.75rem 1rem; border-radius: var(--hm-radius-md); border: 1px solid var(--ht-line); }
.hm-form__success { padding: 0.75rem 1rem; border-radius: var(--hm-radius-md); background: var(--ht-surface-2); border: 1px solid var(--ht-line); }
/* Honeypot: off-screen, not display:none, so naive bots still fill it. */
.hm-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 48rem) { .hm-contact-form--split { grid-template-columns: 1fr; } }

.hm-contact-info__heading { margin-bottom: 1.5rem; }
.hm-contact-info__body { display: grid; gap: 1.5rem; }
.hm-contact-info__address { font-style: normal; }
.hm-contact-info__line { display: block; }
.hm-contact-info__channels { list-style: none; margin: 0; padding: 0; }
.hm-contact-info__hours { margin: 0; }
.hm-contact-info__hours-row { display: flex; gap: 1rem; justify-content: space-between; max-width: 20rem; padding: 0.2rem 0; border-bottom: 1px solid var(--ht-line); }
.hm-contact-info__hours dt { font-weight: 600; }
.hm-contact-info__hours dd { margin: 0; color: var(--ht-fg-muted); }
.hm-contact-info__map { margin-top: 1.5rem; }
.hm-contact-info__map iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--hm-radius-md); }
@media (min-width: 48rem) {
  .hm-contact-info--inline .hm-contact-info__body { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
}
.hm-contact-info--card .hm-contact-info__body { border: 1px solid var(--ht-line); border-radius: var(--hm-radius-lg); padding: 1.75rem; background: var(--ht-surface); }

/* .hm-prose is the shared rich-text flow styling (content, overview). */
.hm-prose > :last-child { margin-bottom: 0; }
.hm-prose img { border-radius: var(--hm-radius-md); }
.hm-prose ul, .hm-prose ol { padding-left: 1.4rem; margin: 0 0 1em; }
.hm-prose blockquote { margin: 0 0 1em; padding-left: 1rem; border-left: 3px solid var(--ht-line); color: var(--ht-fg-muted); }
.hm-content { max-width: 48rem; }
.hm-content__headline { margin-bottom: 0.75em; }

/* essay: sticky aside + long-form prose column. */
.hm-content--essay { max-width: var(--hm-container); display: grid; grid-template-columns: 16rem minmax(0, 44rem); gap: 3rem 5rem; align-items: start; }
.hm-content--essay .hm-content__aside { position: sticky; top: 6rem; }
.hm-content__glyph { display: block; font-family: var(--hm-font-kanji); font-size: 3.5rem; line-height: 1; color: var(--hm-shu); margin-bottom: 1rem; }
.hm-content__aside-text { margin: 0; font-family: var(--hm-font-mono); font-size: 0.8125rem; line-height: 1.6; color: var(--hm-hai); }
.hm-content__eyebrow { margin: 0 0 1rem; font-family: var(--hm-font-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hm-label); }
.hm-content--essay .hm-prose { font-size: 1.0625rem; line-height: 1.7; }
.hm-content--essay .hm-prose h3 { margin: 2em 0 0.5em; font-size: 1.25rem; }
.hm-content--essay .hm-prose code { padding: 0.1em 0.35em; border-radius: var(--hm-radius-sm); background: var(--hm-kasumi); font-size: 0.9em; }
@media (max-width: 960px) {
  .hm-content--essay { grid-template-columns: minmax(0, 1fr); }
  .hm-content--essay .hm-content__aside { display: none; }
}

.hm-cta { text-align: center; padding-top: 1rem; padding-bottom: 1rem; }
.hm-cta__headline { max-width: 20ch; margin-inline: auto; }
.hm-cta__subheadline { max-width: 52ch; margin: 1rem auto 0; font-size: 1.0625rem; color: var(--hm-hai); }
.hm-cta__actions { margin: 1.25rem 0 0; }
.hm-cta--tinted { background: var(--ht-surface-2); border: 1px solid var(--hm-hair); border-radius: var(--hm-radius-lg); padding: 3.5rem 1.5rem; }
.hm-cta--dark { background: var(--hm-sumi); color: #fff; border-radius: var(--hm-radius-lg); padding: 3.5rem 1.5rem; }
.hm-cta--dark h2 { color: #fff; }
.hm-cta--dark .hm-cta__subheadline { color: rgba(255, 255, 255, 0.8); }

.hm-faq { max-width: 48rem; }
.hm-faq__subheading { color: var(--ht-fg-muted); }
.hm-faq__item { border-bottom: 1px solid var(--ht-line); padding: 0.9rem 0; }
.hm-faq__question { cursor: pointer; font-weight: 500; }
.hm-faq__answer { margin-top: 0.6rem; color: var(--ht-fg-muted); }
.hm-faq--cards .hm-faq__list { display: grid; gap: 0.75rem; }
.hm-faq--cards .hm-faq__item { border: 1px solid var(--ht-line); border-radius: var(--hm-radius-md); padding: 0.9rem 1.1rem; }

.hm-features__header { max-width: 42rem; margin-bottom: 2.5rem; }
.hm-features__subheading { color: var(--ht-fg-muted); font-size: 1.1rem; }
.hm-features__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--hm-hair); border: 1px solid var(--hm-hair); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.hm-features--cols-2 .hm-features__list { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }
@media (min-width: 48rem) {
  .hm-features--cols-2 .hm-features__list { grid-template-columns: repeat(2, 1fr); }
  .hm-features--cols-3 .hm-features__list { grid-template-columns: repeat(3, 1fr); }
  .hm-features--cols-4 .hm-features__list { grid-template-columns: repeat(4, 1fr); }
}
.hm-features__item { background: var(--hm-bg); padding: 1.75rem 1.75rem 2rem; }
.hm-features__item:hover { background: var(--hm-shiro); }
.hm-features__icon { display: inline-block; font-size: 1.75rem; line-height: 1; margin-bottom: 0.75rem; }
.hm-features__title { margin-bottom: 0.35em; }
.hm-features__description { color: var(--ht-fg-muted); margin-bottom: 0.75em; }
.hm-features__link { font-weight: 600; }

.hm-features--centered .hm-features__header, .hm-features--centered .hm-features__item { text-align: center; }
.hm-features--centered .hm-features__header { margin-left: auto; margin-right: auto; }

/* bento: framed cells with number, category, description and a tag footer. */
.hm-features--bento .hm-features__list { border-radius: var(--hm-radius-lg); overflow: hidden; }
.hm-features--bento .hm-features__item { min-height: 236px; display: flex; flex-direction: column; gap: 0.5rem; position: relative; }
.hm-features--bento .hm-features__number { font-family: var(--hm-font-mono); font-size: 0.75rem; color: var(--hm-label); }
.hm-features--bento .hm-features__category { font-family: var(--hm-font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hm-label); }
.hm-features--bento .hm-features__badge { position: absolute; top: 1.25rem; right: 1.25rem; padding: 0.15rem 0.6rem; border-radius: 999px; border: 1px solid var(--hm-hair); background: var(--hm-kasumi); font-family: var(--hm-font-mono); font-size: 0.6875rem; color: var(--hm-hai); }
.hm-features__tags { margin-top: auto; padding-top: 1rem; font-family: var(--hm-font-mono); font-size: 0.75rem; color: var(--hm-hai); }

/* hero — also defines .hm-btn--secondary, reused by other sections. */
.hm-btn--secondary { background: var(--hm-bg); color: var(--hm-text); border-color: var(--hm-hair); }
.hm-btn--secondary:hover { border-color: var(--hm-text); filter: none; }
.hm-hero { display: grid; gap: 3.5rem; align-items: center; }
.hm-section--hero { padding-block: clamp(3.5rem, 7vw, 6rem); border-top: 0; }
.hm-hero__headline { max-width: 16ch; margin: 0; }
.hm-hero--centered { text-align: center; justify-items: center; }
.hm-hero--centered .hm-hero__body { max-width: 48rem; }
.hm-hero--centered .hm-hero__headline { margin-inline: auto; }
.hm-hero--split { grid-template-columns: 1fr 1fr; }
.hm-hero__eyebrow { display: block; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hm-label); margin-bottom: 1rem; }
.hm-hero__subheadline { max-width: 68ch; margin-top: 1.5rem; font-size: 1.125rem; line-height: 1.6; color: var(--hm-hai); }
.hm-hero--centered .hm-hero__subheadline { margin-inline: auto; }
.hm-hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; align-items: center; }
.hm-hero--centered .hm-hero__actions { justify-content: center; }
.hm-hero__image { display: block; width: 100%; border: 1px solid var(--hm-hair); border-radius: var(--hm-radius-lg); }
@media (max-width: 48rem) { .hm-hero--split { grid-template-columns: 1fr; } }

.hm-hero__chip { display: inline-block; margin-top: 1.25rem; padding: 0.4rem 0.75rem; border: 1px solid var(--hm-hair); border-radius: var(--hm-radius-sm); background: var(--hm-kasumi); font-size: 0.8125rem; color: var(--hm-sumi-soft); }
.hm-hero__media--panel { min-width: 0; text-align: left; }

/* optional strip (stripLabel + stripItems): label on its own row, items wrapping under it. */
.hm-hero__strip { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.75rem; margin-top: 2rem; }
.hm-hero--centered .hm-hero__strip { justify-content: center; }
.hm-hero__strip-label { flex: 0 0 100%; font-family: var(--hm-font-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hm-label); }
.hm-hero__strip-items { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; }
.hm-hero--centered .hm-hero__strip-items { justify-content: center; }
.hm-hero__strip-items li { font-size: 0.9375rem; color: var(--hm-text); }

.hm-html-body { overflow-wrap: anywhere; }
.hm-html-body > :last-child { margin-bottom: 0; }
.hm-html-body details { border: 1px solid var(--ht-line); border-radius: var(--hm-radius-md); padding: 0.75rem 1rem; margin: 0 0 0.75rem; }
.hm-html-body summary { cursor: pointer; font-weight: 600; }
/* Bespoke html blocks that bring their own full-width section chrome: avoid doubling the band padding and rule. */
.hm-section--html:has(> .hm-container > .hm-html-body > section:only-child) { padding-block: 0; border-top: 0; }
.hm-section--html:has(> .hm-container > .hm-html-body > section:only-child) > .hm-container { max-width: none; padding: 0; }

.hm-link-directory__header { max-width: 42rem; margin-bottom: 2.5rem; }
.hm-link-directory__eyebrow { display: block; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hm-label); margin-bottom: 1rem; }
.hm-link-directory__subheading { color: var(--ht-fg-muted); font-size: 1.1rem; }
.hm-link-directory__columns { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.hm-link-directory__column-heading { font-size: 1rem; margin-bottom: 0.75rem; }
.hm-link-directory__links { list-style: none; margin: 0; padding: 0; }
.hm-link-directory__links li { margin: 0.35rem 0; }

.hm-logo-strip__heading { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hm-label); text-align: center; margin-bottom: 1.5rem; }
.hm-logo-strip__viewport { display: flex; overflow: hidden; }
.hm-logo-strip__track { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.5rem 3rem; flex: 1 0 auto; }
.hm-logo-strip__item img { display: block; width: auto; max-width: 100%; object-fit: contain; filter: grayscale(1); opacity: 0.75; transition: opacity 0.15s, filter 0.15s; }
.hm-logo-strip__item img:hover { filter: none; opacity: 1; }
.hm-logo-strip__item--sm img { height: 1.5rem; }
.hm-logo-strip__item--md img { height: 2.25rem; }
.hm-logo-strip__item--lg img { height: 3.25rem; }
/* Marquee: two identical tracks slide left by their own width, looping seamlessly. */
.hm-logo-strip--marquee .hm-logo-strip__track { flex-wrap: nowrap; justify-content: space-around; padding-right: 3rem; animation: hm-logo-marquee 40s linear infinite; }
.hm-logo-strip--marquee .hm-logo-strip__viewport:hover .hm-logo-strip__track { animation-play-state: paused; }
@keyframes hm-logo-marquee { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) {
  .hm-logo-strip--marquee .hm-logo-strip__track { animation: none; flex-wrap: wrap; padding-right: 0; }
  .hm-logo-strip__track--clone { display: none; }
}

.hm-overview { display: grid; gap: 2.5rem; align-items: center; }
.hm-overview--with-image { grid-template-columns: 1fr 1fr; }
.hm-overview__eyebrow { display: block; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hm-label); margin-bottom: 1rem; }
.hm-overview__subheading { font-size: 1.15rem; color: var(--ht-fg-muted); }
.hm-overview__items { margin: 1rem 0 0; padding-left: 1.2rem; }
.hm-overview__item + .hm-overview__item { margin-top: 0.35rem; }
.hm-overview__image { display: block; width: 100%; border-radius: var(--hm-radius-lg); }
@media (max-width: 48rem) { .hm-overview--with-image { grid-template-columns: 1fr; } }

.hm-container.hm-plugin-directory { padding-block: clamp(4rem, 8vw, 7rem); }
.hm-section--plugin_directory > .hm-container.hm-plugin-directory { padding-block: 0; }
.hm-plugin-directory__header { max-width: 42rem; margin-bottom: 2.5rem; }
.hm-plugin-directory__eyebrow { display: block; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hm-label); margin-bottom: 1rem; }
.hm-plugin-directory__subheading { color: var(--ht-fg-muted); font-size: 1.1rem; }
.hm-plugin-directory__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
.hm-plugin-directory__btn--ghost { background: transparent; color: var(--hm-text); border-color: var(--ht-line); }
.hm-plugin-directory__tools { margin-bottom: 1.5rem; }
.hm-plugin-directory__search { width: 100%; max-width: 32rem; padding: 0.6rem 0.75rem; font: inherit; color: inherit; background: var(--hm-bg); border: 1px solid var(--ht-line); border-radius: var(--hm-radius-md); }
.hm-plugin-directory__count { margin: 0.5rem 0 0; font-size: 0.875rem; color: var(--ht-fg-muted); }
.hm-plugin-directory__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--hm-hair); border: 1px solid var(--hm-hair); grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
.hm-plugin-directory__card { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.75rem 1.75rem 2rem; background: var(--hm-bg); }
.hm-plugin-directory__card:hover { background: var(--hm-shiro); }
.hm-plugin-directory__card[hidden], .hm-plugin-directory__search[hidden], .hm-plugin-directory__count[hidden] { display: none; }
.hm-plugin-directory__title { margin: 0; font-size: 1.125rem; }
.hm-plugin-directory__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0; font-family: var(--hm-font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hm-label); }
.hm-plugin-directory__tier { padding: 0.1rem 0.5rem; border: 1px solid var(--hm-hair); border-radius: 999px; background: var(--hm-shiro); }
.hm-plugin-directory__author { margin: 0; font-size: 0.875rem; color: var(--ht-fg-muted); }
.hm-plugin-directory__description { margin: 0; color: var(--ht-fg-muted); }
.hm-plugin-directory__perms { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; margin: 0; font-family: var(--hm-font-mono); font-size: 0.75rem; color: var(--hm-label); }
.hm-plugin-directory__warn { border: 0; padding: 0; color: var(--hm-shu); }
.hm-plugin-directory__lines { font-size: 0.8125rem; color: var(--ht-fg-muted); }
.hm-plugin-directory__lines summary { cursor: pointer; color: var(--hm-label); }
.hm-plugin-directory__lines ul { margin: 0.5rem 0 0; padding-left: 1.1rem; display: grid; gap: 0.375rem; }
.hm-plugin-directory__source { margin-top: auto; font-size: 0.875rem; font-weight: 500; }
.hm-plugin-directory__state { padding: 1.5rem; border: 1px solid var(--hm-hair); border-radius: var(--hm-radius-md); background: var(--hm-shiro); color: var(--ht-fg-muted); }
.hm-plugin-directory__hint { margin: 1.5rem 0 0; font-family: var(--hm-font-mono); font-size: 0.8125rem; color: var(--hm-label); }

.hm-pricing__header { max-width: 42rem; margin-bottom: 2.5rem; }
.hm-pricing__subheading { color: var(--ht-fg-muted); font-size: 1.1rem; }
.hm-pricing__tiers { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); align-items: stretch; }
.hm-pricing__tier { position: relative; display: flex; flex-direction: column; border: 1px solid var(--ht-line); border-radius: var(--hm-radius-lg); padding: 1.75rem; background: var(--ht-surface); }
.hm-pricing__tier--popular { border-color: var(--hm-text); box-shadow: 0 0 0 1px var(--hm-text); }
.hm-pricing__badge { align-self: flex-start; background: var(--hm-text); color: var(--hm-bg); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.15rem 0.6rem; border-radius: 999px; margin-bottom: 0.75rem; }
.hm-pricing__description { color: var(--ht-fg-muted); }
.hm-pricing__price { margin: 0.5rem 0 1.25rem; }
.hm-pricing__amount { font-family: var(--hm-font-heading); font-size: 2.5rem; font-weight: 450; letter-spacing: -0.04em; }
.hm-pricing__currency { font-size: 1.25rem; font-weight: 600; margin-right: 0.1rem; vertical-align: 0.6em; }
.hm-pricing__period { color: var(--ht-fg-muted); margin-left: 0.15rem; }
.hm-pricing__features { list-style: none; margin: 0 0 1.5rem; padding: 0; flex: 1; }
.hm-pricing__feature { padding: 0.3rem 0 0.3rem 1.5rem; position: relative; }
.hm-pricing__feature::before { content: "\2713"; position: absolute; left: 0; font-weight: 700; }
.hm-pricing__feature--excluded { color: var(--ht-fg-muted); text-decoration: line-through; }
.hm-pricing__feature--excluded::before { content: "\2715"; }
.hm-pricing__cta { text-align: center; }
.hm-pricing--table .hm-pricing__tiers { grid-template-columns: 1fr; }
@media (min-width: 48rem) {
  .hm-pricing--table .hm-pricing__tier { display: grid; grid-template-columns: 1.2fr 1fr 2fr auto; gap: 0 1.5rem; align-items: center; }
  .hm-pricing--table .hm-pricing__price, .hm-pricing--table .hm-pricing__features { margin: 0; }
  .hm-pricing--table .hm-pricing__badge { grid-column: 1 / -1; }
}

.hm-process { max-width: 52rem; }
.hm-process__eyebrow { display: block; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hm-label); margin-bottom: 1rem; }
.hm-process__subheading { color: var(--ht-fg-muted); }
.hm-process__steps { list-style: none; counter-reset: hm-step; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 1.25rem; }
.hm-process__step { counter-increment: hm-step; display: grid; grid-template-columns: 2.5rem 1fr; gap: 1rem; }
.hm-process__marker {
  display: inline-flex; align-items: center; justify-content: center; height: 2.5rem; min-width: 2.5rem; padding: 0 0.4rem;
  border-radius: 999px; border: 1px solid var(--hm-hair); background: var(--hm-bg); color: var(--hm-text); font-family: var(--hm-font-mono); font-size: 0.8125rem; font-weight: 500;
}
.hm-process__marker:empty::before { content: counter(hm-step); }
.hm-process__title { margin-bottom: 0.25rem; }
.hm-process__description { color: var(--ht-fg-muted); }

/* cards: adds a command box per step; keeps the .hm-container width cap like every other section. */
.hm-process--cards { max-width: var(--hm-container); }
.hm-process--cards .hm-process__steps { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1px; background: var(--hm-hair); border: 1px solid var(--hm-hair); border-radius: var(--hm-radius-lg); overflow: hidden; }
.hm-process--cards .hm-process__step { display: block; background: var(--hm-bg); padding: 1.75rem; }
.hm-process--cards .hm-process__marker { margin-bottom: 1rem; border-radius: var(--hm-radius-sm); }
.hm-process--cards .hm-code { margin-top: 1rem; padding: 0.75rem 1rem; border: 1px solid var(--hm-hair); border-radius: var(--hm-radius-md); background: var(--hm-kasumi); }

.hm-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem 5rem; align-items: start; }
.hm-split--wide-code { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.hm-split--text-right .hm-split__text { order: 2; }
.hm-split__heading { margin: 0 0 1rem; font-size: clamp(1.75rem, 3.2vw, 2.5rem); }
.hm-split__lede { color: var(--ht-fg-muted); font-size: 1.0625rem; line-height: 1.65; margin-bottom: 1.5rem; }
.hm-split__defs { margin: 0 0 1.5rem; border-top: 1px solid var(--hm-hair); }
.hm-split__defs > div { display: grid; grid-template-columns: 9rem 1fr; gap: 1rem; padding: 0.875rem 0; border-bottom: 1px solid var(--hm-hair); }
.hm-split__defs dt { font-family: var(--hm-font-mono); font-size: 0.8125rem; color: var(--hm-text); }
.hm-split__defs dd { margin: 0; color: var(--ht-fg-muted); }
.hm-split__chips { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1px; background: var(--hm-hair); border: 1px solid var(--hm-hair); border-radius: var(--hm-radius-md); overflow: hidden; }
.hm-split__chips li { background: var(--hm-bg); padding: 0.875rem 1rem; display: flex; flex-direction: column; gap: 0.25rem; }
.hm-split__chip { font-size: 0.8125rem; color: var(--hm-text); }
.hm-split__caption { font-size: 0.8125rem; color: var(--hm-hai); }
.hm-split__footnote { font-size: 0.9375rem; color: var(--hm-hai); }
.hm-split__footnote code, .hm-split__lede code { padding: 0.1em 0.35em; border-radius: var(--hm-radius-sm); background: var(--hm-kasumi); font-size: 0.9em; }
/* panelHeight: match — panel column stretches to the text column; the code panel grows, outputs sit at the bottom. */
@media (min-width: 961px) {
  .hm-split--match { align-items: stretch; }
  .hm-split--match .hm-split__text > :last-child { margin-bottom: 0; }
  .hm-split--match .hm-split__panel { display: flex; flex-direction: column; min-width: 0; }
  .hm-split--match .hm-split__panel > .hm-frame { flex: 1 1 auto; display: flex; flex-direction: column; }
  .hm-split--match .hm-split__panel > .hm-frame > .hm-code { flex: 1 1 auto; }
  .hm-split--match .hm-split__panel > .hm-outs:first-child { margin-top: auto; }
}
@media (max-width: 960px) {
  .hm-split, .hm-split--wide-code { grid-template-columns: minmax(0, 1fr); }
  .hm-split--text-right .hm-split__text { order: 0; }
}

.hm-stats__header { max-width: 42rem; margin-bottom: 2.5rem; }
.hm-stats__subheading { color: var(--ht-fg-muted); font-size: 1.1rem; }
.hm-stats__list { display: grid; gap: 1.5rem; margin: 0; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
@media (min-width: 48rem) {
  .hm-stats--cols-2 .hm-stats__list { grid-template-columns: repeat(2, 1fr); }
  .hm-stats--cols-3 .hm-stats__list { grid-template-columns: repeat(3, 1fr); }
  .hm-stats--cols-4 .hm-stats__list { grid-template-columns: repeat(4, 1fr); }
}
.hm-stats__item { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 0.25rem; }
.hm-stats__value { margin: 0; display: flex; flex-direction: column; }
.hm-stats__number { font-family: var(--hm-font-heading); font-size: clamp(2rem, 4vw, 3rem); font-weight: 450; line-height: 1.1; letter-spacing: -0.05em; }
.hm-stats__label { color: var(--hm-label); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.hm-stats__description { color: var(--ht-fg-muted); font-size: 0.9rem; }
.hm-stats--cards .hm-stats__item { border: 1px solid var(--ht-line); border-radius: var(--hm-radius-lg); padding: 1.5rem; background: var(--ht-surface-2); }
.hm-stats--bordered .hm-stats__item { border-left: 1px solid var(--hm-text); padding-left: 1rem; }

.hm-sticky-sidebar { display: grid; gap: 2rem; }
.hm-sticky-sidebar__subheading { color: var(--ht-fg-muted); font-size: 1.1rem; }
.hm-sticky-sidebar__aside { border: 1px solid var(--ht-line); border-radius: var(--hm-radius-lg); padding: 1.5rem; background: var(--ht-surface-2); align-self: start; }
.hm-sticky-sidebar__facts { margin: 0 0 1.25rem; }
.hm-sticky-sidebar__fact { padding: 0.5rem 0; border-bottom: 1px solid var(--ht-line); }
.hm-sticky-sidebar__fact dt { font-size: 0.85rem; color: var(--ht-fg-muted); }
.hm-sticky-sidebar__fact dd { margin: 0; font-weight: 600; }
.hm-sticky-sidebar__cta { display: block; text-align: center; }
@media (min-width: 60rem) {
  .hm-sticky-sidebar { grid-template-columns: minmax(0, 1fr) 20rem; gap: 3rem; }
  .hm-sticky-sidebar__aside { position: sticky; top: 1.5rem; }
}

.hm-section--tag_strip { padding: 1.75rem 0; }
.hm-tag-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; }
.hm-tag-strip__label { font-family: var(--hm-font-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hm-label); }
.hm-tag-strip__items { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 0; }
.hm-tag-strip__items li { padding: 0 1.25rem; border-left: 1px solid var(--hm-hair); font-size: 0.9375rem; color: var(--hm-text); }
.hm-tag-strip__items li:first-child { padding-left: 0; border-left: 0; }

.hm-team__header { max-width: 42rem; margin-bottom: 2.5rem; }
.hm-team__subheading { color: var(--ht-fg-muted); font-size: 1.1rem; }
.hm-team__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
@media (min-width: 48rem) {
  .hm-team--cols-2 .hm-team__list { grid-template-columns: repeat(2, 1fr); }
  .hm-team--cols-3 .hm-team__list { grid-template-columns: repeat(3, 1fr); }
  .hm-team--cols-4 .hm-team__list { grid-template-columns: repeat(4, 1fr); }
}
.hm-team__photo { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--hm-radius-md); margin-bottom: 1rem; }
.hm-team__name { margin-bottom: 0.15em; }
.hm-team__title { color: var(--ht-fg-muted); margin-bottom: 0.5em; }
.hm-team__bio { font-size: 0.95rem; }
.hm-team__social { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.75rem; font-size: 0.9rem; }
.hm-team--cards .hm-team__member { border: 1px solid var(--ht-line); border-radius: var(--hm-radius-lg); padding: 1.25rem; background: var(--ht-surface); }
.hm-team--centered .hm-team__member, .hm-team--centered .hm-team__header { text-align: center; }
.hm-team--centered .hm-team__header { margin-left: auto; margin-right: auto; }
.hm-team--centered .hm-team__photo { width: 8rem; height: 8rem; border-radius: 50%; margin-left: auto; margin-right: auto; }
.hm-team--centered .hm-team__social { justify-content: center; }
.hm-team--simple .hm-team__photo { display: none; }

.hm-testimonials__header { max-width: 42rem; margin-bottom: 2.5rem; }
.hm-testimonials__subheading { color: var(--ht-fg-muted); font-size: 1.1rem; }
.hm-testimonials__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
.hm-testimonials__item { border: 1px solid var(--ht-line); border-radius: var(--hm-radius-lg); padding: 1.5rem; background: var(--ht-surface); }
.hm-testimonials__figure { margin: 0; display: flex; flex-direction: column; height: 100%; }
.hm-testimonials__rating { margin: 0 0 0.75rem; letter-spacing: 0.05em; }
.hm-testimonials__quote { margin: 0 0 1.25rem; flex: 1; font-size: 1.05rem; color: var(--hm-text); }
.hm-testimonials__author { display: flex; align-items: center; gap: 0.75rem; }
.hm-testimonials__avatar { border-radius: 50%; object-fit: cover; flex: none; }
.hm-testimonials__person { display: flex; flex-direction: column; line-height: 1.3; }
.hm-testimonials__role { color: var(--ht-fg-muted); font-size: 0.9rem; }
.hm-testimonials--featured .hm-testimonials__list { grid-template-columns: 1fr; max-width: 48rem; margin: 0 auto; }
.hm-testimonials--featured .hm-testimonials__item { border: 0; background: transparent; padding: 1rem 0; text-align: center; }
.hm-testimonials--featured .hm-testimonials__quote { font-size: 1.5rem; font-family: var(--hm-font-heading); line-height: 1.35; }
.hm-testimonials--featured .hm-testimonials__author { justify-content: center; text-align: left; }

.hm-theme-directory__shot { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.hm-plugin-directory__other { display: inline-block; margin-top: 1rem; font-size: 0.875rem; font-weight: 500; }
.hm-section--theme_directory > .hm-container.hm-plugin-directory { padding-block: 0; }

.hm-value-proposition { max-width: 44rem; text-align: center; }
.hm-value-proposition__paragraph { font-size: 1.2rem; color: var(--ht-fg-muted); margin-bottom: 0; }