/*
  Heller's Town chrome (ht-shared): the skip link, header, site switcher, menu, phone call
  bar and footer. One markup and this one stylesheet on every site, so the header, the logo
  and the call bar have the same geometry everywhere. Brand variables only: no colour,
  curve or duration is written here.

  Geometry (asserted by the audit, G23):
    header   64 px tall below 900 px wide, 76 px from 900 px; sticky, never hides on scroll
    logo     80 x 44 px below 900 px, 94 x 52 px from 900 px
    call bar 56 px (plus the safe-area inset) below 768 px; not shown from 768 px
  Two heights are published for every site to read, so nobody types 64, 76 or 56 again:
    --ht-bar-h      the sticky header
    --ht-callbar-h  the fixed call bar (0 px from 768 px)

  Breakpoints: 768 (call bar off, header button on), 900 (taller header), 1200 (page links
  in the header instead of the Menu, and the button's full label). The page links stay in
  the Menu up to 1200 px because the longest set (Automation's four links, the switcher and
  its full button label) measured 1,020 px of header in Chromium (test/chrome.test.mjs), more
  than the 860 px shell at 900 px.
*/

:root {
  --ht-bar-h: 64px;
  --ht-callbar-h: calc(56px + env(safe-area-inset-bottom, 0px));
  /* The focus ring's reach (a 2 px ring 3 px out) and 3 px of air. Tabbing brings a control up
     from under the call bar (or down from under the header) only as far as the scroll padding,
     so without this its ring ended 5 px inside the call bar at 375 (HT-116). */
  --ht-ring-room: .5rem;
  /* 13 px: the smallest a button label is set (HT-117). The brand ladder has 11 px for labels and
     14 px for small text; mono capitals at 11 px were legible but small for a control. */
  --ht-fs-control: .8125rem;
  /* The same 0.8 px of tracking the 11 px label had (.08em), held at 13 px: tracking stays a
     fixed width as the size grows, so the longest label still fits one line at 375. */
  --ht-ls-control: .06em;
}
@media (min-width: 768px) { :root { --ht-callbar-h: 0px; } }
@media (min-width: 900px) { :root { --ht-bar-h: 76px; } }

/* In-page jumps and keyboard focus land below the header and above the call bar, ring and all. */
html { scroll-padding-top: calc(var(--ht-bar-h) + var(--ht-ring-room)); scroll-padding-bottom: calc(var(--ht-callbar-h) + var(--ht-ring-room)); }
body { padding-bottom: var(--ht-callbar-h); }

.ht-bar, .ht-bar *, .ht-callbar, .ht-callbar *, .ht-foot, .ht-foot *, .ht-skip { box-sizing: border-box; }

/*
  Press: every link and button on the page (MOTION-SPEC K06, after motion.dev's whileTap y 1 and
  Taste Skill's 1 px drop; HT-024). The control drops 1 px the moment it is pressed, with no
  transition, and on release comes back over the small time on the entrance curve. It moves by
  translate, never transform, so a site's own transform is left alone. A state, not a flourish:
  it stays under reduced motion (the return collapses to 1 ms there). A site rule that sets its
  own transition on a link or button lists translate in it, or its release is simply instant.
  The browser's grey tap flash goes only because this press holds on every control.
*/
a, button, summary, [role="button"] { -webkit-tap-highlight-color: transparent; }
:where(a, button, summary, [role="button"]) { transition: translate var(--ht-dur-s) var(--ht-ease-in); }
a:active, button:active, summary:active, [role="button"]:active { translate: 0 1px; transition: none; }
/* A link that runs inside a sentence is an inline box, and a translate does not move an inline
   box (it would read as pressed and show nothing). A link set directly in running text or a list
   item drops the same 1 px by relative position instead, at once both ways: running text gets no
   motion (K05). A button set there keeps the translate and its eased return. */
:where(main, .ht-foot) :where(p, li, dd, dt, td, th, figcaption, blockquote, label, small, em, strong, span) > a:not(.ht-btn):active {
  position: relative; top: 1px; translate: none;
}

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

.ht-skip {
  position: absolute; top: .5rem; left: 1rem; z-index: 60;
  display: inline-flex; align-items: center; min-height: 44px;
  padding: .75rem 1.25rem; border-radius: var(--ht-radius-pill);
  background: var(--ht-ink); color: var(--ht-paper);
  font-family: var(--ht-font-sans); font-size: var(--ht-fs-small); font-weight: 500; line-height: 1.2;
  text-decoration: none;
  transform: translate3d(0, -200%, 0);
}
.ht-skip:focus, .ht-skip:focus-visible { transform: none; outline: 2px solid var(--ht-accent-deep); outline-offset: 3px; }

/* ---------- header ---------- */
.ht-bar {
  position: sticky; top: 0; z-index: 50;
  height: var(--ht-bar-h);
  border-bottom: var(--ht-border) solid var(--ht-rule);
  background: var(--ht-bg); color: var(--ht-fg);
  font-family: var(--ht-font-sans);
}
.ht-bar__in {
  position: relative;
  width: var(--ht-shell); height: 100%; margin-inline: auto;
  display: flex; align-items: center; gap: .5rem;
}

.ht-mark {
  display: inline-flex; align-items: center; gap: .625rem;
  margin-right: auto;
  color: inherit; text-decoration: none;
}
.ht-mark picture { display: block; flex: none; line-height: 0; }
.ht-mark__img { display: block; width: 80px; height: 44px; object-fit: contain; }
.ht-mark__division {
  padding-left: .625rem; border-left: var(--ht-border) solid var(--ht-accent-text);
  font-family: var(--ht-font-mono); font-size: var(--ht-fs-label); font-weight: 500;
  letter-spacing: var(--ht-ls-label); line-height: 1.25; text-transform: uppercase;
  color: var(--ht-fg-2);
}
@media (min-width: 900px) {
  .ht-mark__img { width: 94px; height: 52px; }
}

.ht-local, .ht-bar__tools { display: none; }
.ht-bar__tools:not(:empty) { display: inline-flex; align-items: center; flex: none; }
.ht-local ul, .ht-switch__list, .ht-menu__list, .ht-foot ul { list-style: none; margin: 0; padding: 0; }
.ht-local a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--ht-fg-2); font-size: var(--ht-fs-small); text-decoration: none;
}
@media (hover: hover) { .ht-local a:hover { color: var(--ht-fg); } }

/* the two <details> menus: work with JS off; chrome.js adds Escape and outside click */
.ht-switch, .ht-menu { position: static; flex: none; }
.ht-switch__btn, .ht-menu__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-width: 44px; min-height: 44px; padding: 0 .875rem;
  border: var(--ht-border) solid var(--ht-rule-strong); border-radius: var(--ht-radius-pill);
  font-family: var(--ht-font-mono); font-size: var(--ht-fs-label); font-weight: 500;
  letter-spacing: var(--ht-ls-mono); text-transform: uppercase; line-height: 1;
  cursor: pointer; list-style: none; user-select: none;
}
.ht-switch__btn::-webkit-details-marker, .ht-menu__btn::-webkit-details-marker { display: none; }
.ht-switch__btn::marker, .ht-menu__btn::marker { content: ""; }
.ht-switch__btn::before {
  content: ""; flex: none; width: 12px; height: 12px;
  background: radial-gradient(circle, currentColor 1.5px, transparent 2px) 0 0 / 6px 6px;
}
.ht-menu__btn::before {
  content: ""; flex: none; width: 14px; height: 10px;
  background:
    linear-gradient(currentColor 0 0) 0 0 / 100% 1.5px no-repeat,
    linear-gradient(currentColor 0 0) 0 50% / 100% 1.5px no-repeat,
    linear-gradient(currentColor 0 0) 0 100% / 100% 1.5px no-repeat;
}
.ht-switch[open] > .ht-switch__btn, .ht-menu[open] > .ht-menu__btn { background: var(--ht-bg-2); }

/* narrow phones: the two buttons become 44 px squares; their names stay for screen readers */
@media (max-width: 479.98px) {
  .ht-switch__btn, .ht-menu__btn { padding: 0; width: 44px; }
  .ht-switch__txt, .ht-menu__txt {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
  }
}

/* the narrowest phones: Automation's header (80 px mark, the one-word label, two buttons)
   measured 286 px against a 280 px shell at 320 px wide; tighter gaps make it fit */
@media (max-width: 359.98px) {
  .ht-bar__in { gap: .375rem; }
  .ht-mark { gap: .5rem; }
  .ht-mark__division { padding-left: .5rem; }
}

.ht-switch__list, .ht-menu__list {
  position: absolute; top: 100%; right: 0; z-index: 51;
  width: min(24rem, 100%);
  max-height: calc(100vh - var(--ht-bar-h) - var(--ht-callbar-h) - 1rem);
  overflow-y: auto;
  padding: .5rem;
  border: var(--ht-border) solid var(--ht-rule-strong); border-radius: var(--ht-radius-card);
  background: var(--ht-bg); color: var(--ht-fg);
  box-shadow: 0 16px 40px color-mix(in srgb, var(--ht-ink) 14%, transparent);
}
.ht-switch__list a, .ht-menu__list a {
  display: grid; gap: .125rem; min-height: 44px; align-content: center;
  padding: .75rem .875rem; border-radius: calc(var(--ht-radius-card) - .5rem);
  color: inherit; text-decoration: none;
}
@media (hover: hover) { .ht-switch__list a:hover, .ht-menu__list a:hover { background: var(--ht-bg-2); } }
.ht-switch__list b { font-weight: 500; }
.ht-switch__list span { font-size: var(--ht-fs-small); line-height: 1.45; color: var(--ht-fg-2); }
.ht-switch__list a[aria-current="true"], .ht-foot__sites a[aria-current="true"] { box-shadow: inset 2px 0 0 var(--ht-accent-text); }

/* two classes, so the .ht-btn display rule further down cannot switch the header button back on */
.ht-bar .ht-bar__cta { display: none; flex: none; }
.ht-cta__long { display: none; }

@media (min-width: 768px) {
  .ht-bar .ht-bar__cta { display: inline-flex; }
}
@media (min-width: 1200px) {
  .ht-local { display: block; }
  .ht-local ul { display: flex; gap: 1.5rem; }
  .ht-menu { display: none; }
  .ht-cta__long { display: inline; }
  .ht-cta__short { display: none; }
}

/* ---------- buttons (the brand's .ht-btn primitive, for sites without the brand theme file) ---------- */
/* border-box everywhere (HT-001): it was set only inside the header, call bar and footer, so a
   button anywhere else added its padding and border to the 44 px floor and stood 70 px tall.
   One line is 44 px (the floor); a label a narrow phone wraps onto two lines (a site may allow
   it) is 55 px, so no button is ever taller than 56. */
.ht-btn {
  box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 2.75rem; padding: .625rem 1.25rem;
  border: var(--ht-border) solid var(--ht-rule-strong); border-radius: var(--ht-radius-pill);
  font-family: var(--ht-font-mono); font-size: var(--ht-fs-control); font-weight: 500;
  letter-spacing: var(--ht-ls-control); text-transform: uppercase; line-height: 1.25; white-space: nowrap;
  color: inherit; text-decoration: none; cursor: pointer; background: transparent;
  position: relative; isolation: isolate;
  transition: translate var(--ht-dur-s) var(--ht-ease-in);
}
.ht-btn::before {
  content: ""; position: absolute; inset: calc(-1 * var(--ht-border)); z-index: -1;
  border-radius: inherit; pointer-events: none;
  border: var(--ht-border) solid color-mix(in srgb, currentColor 48%, transparent);
  opacity: 0;
  transition: opacity var(--ht-dur-m) var(--ht-ease-in);
}
@media (hover: hover) { .ht-btn:hover::before { opacity: 1; } }
.ht-btn:focus-visible { outline: 2px solid var(--ht-accent-text); outline-offset: 3px; }
.ht-btn--solid { background: var(--ht-accent); color: var(--ht-accent-ink); border-color: transparent; }
.on-paper .ht-btn--solid { background: var(--ht-accent-deep); color: var(--ht-lint); }
.ht-btn--solid::before { inset: 0; border: 0; background: var(--ht-accent-lift); }
.on-paper .ht-btn--solid::before { background: color-mix(in srgb, var(--ht-accent-deep) 86%, var(--ht-void)); }
/* Under reduced motion the hover is a state, not a fade (HT-028, MOTION-SPEC K01): the fill takes
   the hover shade at once, the same shade the fade ends on (one shade deeper on paper, the lift on
   a dark ground), and the fading layer is not drawn. It does not lean on the fade, which the label
   roll (K01) will replace, so the hover still shows when that lands. */
@media (prefers-reduced-motion: reduce) {
  .ht-btn--solid::before { display: none; }
}
@media (prefers-reduced-motion: reduce) and (hover: hover) {
  .ht-btn--solid:hover { background: var(--ht-accent-lift); }
  .on-paper .ht-btn--solid:hover { background: color-mix(in srgb, var(--ht-accent-deep) 86%, var(--ht-void)); }
}

/* ---------- phone call bar ---------- */
.ht-callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: grid; grid-template-columns: 1fr 1fr; gap: .5rem;
  height: var(--ht-callbar-h);
  padding: 6px max(1rem, env(safe-area-inset-right, 0px)) calc(6px + env(safe-area-inset-bottom, 0px)) max(1rem, env(safe-area-inset-left, 0px));
  border-top: var(--ht-border) solid var(--ht-rule);
  background: var(--ht-bg); color: var(--ht-fg);
  font-family: var(--ht-font-sans);
}
.ht-callbar a {
  display: flex; align-items: center; justify-content: center; min-height: 44px;
  padding: 0 .5rem; border-radius: var(--ht-radius-pill);
  font-family: var(--ht-font-mono); font-size: var(--ht-fs-label); font-weight: 500;
  letter-spacing: var(--ht-ls-mono); line-height: 1.2; text-align: center; text-transform: uppercase;
  text-decoration: none;
}
.ht-callbar__call { border: var(--ht-border) solid var(--ht-rule-strong); color: var(--ht-fg); }
/* The number never breaks: where "Call" and the number do not fit on one line (320 to about
   360 px), "Call" sits above the whole number. The link holds one inner span, so its text
   wraps as one line box; two flex items would sit side by side and overflow instead. */
.ht-callbar__num { white-space: nowrap; }
.ht-callbar__go { background: var(--ht-accent-deep); color: var(--ht-lint); }
.ht-callbar a:focus-visible { outline: 2px solid var(--ht-accent-text); outline-offset: 2px; }
@media (min-width: 768px) {
  .ht-callbar { display: none; }
}

/* ---------- footer ---------- */
.ht-foot {
  padding-block: clamp(3rem, 7vw, 5rem) 1.5rem;
  border-top: var(--ht-border) solid var(--ht-rule);
  background: var(--ht-bg-2); color: var(--ht-fg);
  font-family: var(--ht-font-sans); font-size: var(--ht-fs-small); line-height: 1.55;
}
.ht-foot__in {
  width: var(--ht-shell); margin-inline: auto;
  display: flex; flex-wrap: wrap; gap: 2.5rem 3rem;
}
.ht-foot__brand { flex: 1 1 16rem; }
.ht-foot__in > nav { flex: 1 1 10rem; }
.ht-foot__mark { display: inline-block; line-height: 0; }
.ht-foot__img { display: block; width: 168px; height: auto; }
.ht-foot__nap { margin-top: 1.25rem; display: grid; gap: .125rem; font-style: normal; color: var(--ht-fg-2); }
/* the phone and email links: 44 px targets inside the address, the text centred in each */
.ht-foot__nap a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; justify-self: start; }
.ht-foot__legal { color: var(--ht-fg); font-weight: 500; }
.ht-foot__h {
  margin: 0 0 .75rem;
  font-family: var(--ht-font-mono); font-size: var(--ht-fs-label); font-weight: 500;
  letter-spacing: var(--ht-ls-label); line-height: 1.4; text-transform: uppercase;
  color: var(--ht-fg-2);
}
/* every footer link is a 44 px target (WCAG 2.2 2.5.8 and the house 44 px); the rows touch, so the
   list keeps its rhythm from the targets themselves */
.ht-foot ul { display: grid; gap: 0; }
.ht-foot nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ht-fg); text-decoration: none; }
@media (hover: hover) { .ht-foot nav a:hover { text-decoration: underline; text-underline-offset: .2em; } }
/* two classes: .ht-foot nav a above would otherwise run the name and the line together */
.ht-foot .ht-foot__sites a { display: grid; gap: .125rem; align-content: center; padding-left: .5rem; padding-block: .3rem; }
.ht-foot__sites b { font-weight: 500; }
.ht-foot__sites span { color: var(--ht-fg-2); }
.ht-foot__base {
  width: var(--ht-shell); margin: 3rem auto 0; padding-top: 1.25rem;
  border-top: var(--ht-border) solid var(--ht-rule);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem;
  color: var(--ht-fg-2);
}
.ht-foot__base p { margin: 0; }