/**
 * design-chrome.css: the shared header and footer every route renders (functions/lib/chrome.js), ACT-245.
 *
 * A port of the design system's `ui_kits/website/SiteNav.dc.html` (a floating white pill, a sheet on phones) and
 * `SiteFooter.dc.html` (columns, the big wordmark sign-off). Motion: guidelines/motion.md and MOTION-BRIEF sections 9
 * and 10; the behaviour is public/js/site-chrome.js. Every colour, size and easing is a token from design-tokens.css;
 * sizes the tokens do not name are in rem (1rem = 16px) so design-token-check stays quiet.
 * No JavaScript: the links wrap inside the pill and there is no menu button. Reduced motion: no transitions, no rise.
 */

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; background: var(--act-paper); color: var(--act-ink); }
body { font-family: var(--act-font-display); -webkit-font-smoothing: antialiased; }
::selection { background: var(--act-ember); color: var(--act-ink); }

/* a plain page (pageHtml) puts its content in .am-main; the Home page lays out its own */
.am-main { max-width: var(--act-content-max); margin: 0 auto; padding: 8rem var(--act-gutter) 4rem; }

.am-header a, .am-footer a { color: inherit; text-decoration: none; }
.am-header a:hover, .am-footer a:hover { color: var(--act-ember-text); }
.am-header :focus-visible, .am-footer :focus-visible { outline: 2px solid var(--act-ember-text); outline-offset: 3px; }

/* ---------------------------------------------------------------- header */
.am-nav { position: fixed; top: var(--act-nav-top); left: 0; right: 0; z-index: 60; padding: 0 1rem; pointer-events: none; }
.am-nav-bar { pointer-events: auto; max-width: var(--act-nav-max); margin: 0 auto; height: var(--act-nav-height); background: var(--act-nav-glass); backdrop-filter: blur(var(--act-nav-blur)); border-radius: var(--act-radius-pill); box-shadow: var(--act-shadow-nav); display: flex; align-items: center; gap: .5rem; padding: 0 .5rem 0 1.25rem; }
.am-header .am-nav-logo { display: flex; align-items: center; gap: .5625rem; margin-right: .75rem; color: var(--act-ink); }
.am-nav-logo span { font-weight: var(--act-weight-wordmark); font-size: 1.25rem; letter-spacing: var(--act-track-wordmark); }
.am-nav-primary { display: flex; gap: 2px; font-size: .9375rem; font-weight: 500; }
.am-nav-primary a { padding: .5rem .75rem; border-radius: var(--act-radius-pill); transition: background .2s ease; }
.am-header .am-nav-primary a:hover { background: var(--act-paper); color: var(--act-ink); }
.am-nav-primary a[aria-current="page"] { background: var(--act-paper); }
.am-nav-grow { flex: 1; }
.am-header .am-nav-cta { height: 2.625rem; padding: 0 1.25rem; font-size: .9375rem; font-weight: 600; white-space: nowrap; display: inline-flex; align-items: center; gap: .5625rem; border-radius: var(--act-radius-pill); background: var(--act-button-primary-bg); color: var(--act-button-primary-fg); transition: background .25s ease, color .25s ease; }
.am-header .am-nav-cta:hover { background: var(--act-button-primary-hover-bg); color: var(--act-button-primary-hover-fg); }
.am-glyph { display: inline-block; width: .9375rem; height: .9375rem; flex: none; background: url('/assets/third-party/shopify-glyph-white.png') center / contain no-repeat; }
.am-header .am-nav-cta:hover .am-glyph { background-image: url('/assets/third-party/shopify-glyph-black.png'); }
.am-nav-menu { display: none; width: 2.625rem; height: 2.625rem; border: 0; border-radius: var(--act-radius-pill); background: var(--act-paper); align-items: center; justify-content: center; flex-direction: column; gap: 5px; cursor: pointer; }
.am-nav-menu span { width: 1rem; height: 2px; background: var(--act-ink); transition: transform .3s var(--act-ease-settle); }
.am-nav.is-open .am-nav-menu span:first-child { transform: translateY(3.5px) rotate(45deg); }
.am-nav.is-open .am-nav-menu span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
/* the sheet fades in and drops 8px on phones (the SiteNav specimen: translateY(-8px); MOTION-BRIEF 9 says 12px, the specimen runs); closed, it is out of the tab order too */
.am-nav-sheet { max-width: var(--act-nav-max); margin: .625rem auto 0; background: var(--act-white); border-radius: 1.625rem; box-shadow: 0 0 0 0.0625rem var(--act-line), 0 1.875rem 3.75rem -20px rgba(18,16,14,.3); padding: .875rem; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transform: translateY(-8px); pointer-events: none; transition: opacity .3s ease, transform .5s var(--act-ease-settle), visibility 0s linear .5s; }
.am-nav.is-open .am-nav-sheet { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition-delay: 0s; }
.am-nav-sheet a { padding: .875rem .75rem; font-size: 1.1875rem; font-weight: 600; border-bottom: thin solid var(--act-line-soft); }
.am-nav-sheet a:last-child { border-bottom: 0; }
@media (max-width: 51.25rem) {
  .am-nav-primary { display: none; }
  .am-nav-menu { display: flex; }
}
@media (min-width: 51.26rem) { .am-nav-sheet { display: none; } }
html:not(.js) .am-nav-bar { height: auto; min-height: var(--act-nav-height); flex-wrap: wrap; padding: .5rem .5rem .5rem 1.25rem; border-radius: 1.75rem; }
html:not(.js) .am-nav-primary { display: flex; flex-wrap: wrap; }
html:not(.js) .am-nav-menu, html:not(.js) .am-nav-sheet { display: none; }

.am-mark-back { fill: var(--act-ink); opacity: .32; }
.am-mark-front { fill: var(--act-ember); }
.am-mark-arrow { fill: none; stroke: var(--act-ink); stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---------------------------------------------------------------- footer */
.am-footer { background: var(--act-paper); border-top: thin solid var(--act-line); color: var(--act-ink); font-family: var(--act-font-display); overflow-x: clip; }
.am-foot-in { max-width: var(--act-content-max); margin: 0 auto; padding: 0 var(--act-gutter); }
.am-foot-top { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; padding: 2rem 0; border-bottom: thin solid var(--act-line); }
.am-footer .am-foot-pill { height: 3.375rem; padding: 0 1.25rem; border-radius: 1rem; background: var(--act-ink); color: var(--act-paper); display: flex; align-items: center; gap: .75rem; transition: background .25s ease, color .25s ease; }
.am-foot-pill img { width: 1.25rem; height: auto; display: block; transition: filter .25s ease; }
.am-foot-pill-t { display: flex; flex-direction: column; line-height: 1.15; }
.am-foot-pill-t span:first-child { font-size: .75rem; }
.am-foot-pill-t span:last-child { font-size: 1.0625rem; font-weight: 700; }
.am-footer .am-foot-pill:hover img { filter: invert(1); }
.am-footer .am-foot-pill:hover { background: var(--act-ember); color: var(--act-ink); }
.am-foot-top p { margin: 0; font-size: 1.0625rem; color: var(--act-body); }
.am-foot-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11.25rem), 1fr)); gap: 2rem; padding: 3rem 0; }
.am-foot-cols div { display: flex; flex-direction: column; gap: .75rem; font-size: 1rem; }
.am-foot-cols b { font-size: var(--act-small); font-weight: 700; color: var(--act-muted); }
.am-foot-sign-wrap { display: flex; flex-direction: column; align-items: center; gap: 1.75rem; padding: 1.5rem 0 3rem; border-top: thin solid var(--act-line); }
.am-footer .am-foot-sign { display: flex; align-items: center; gap: clamp(0.75rem, 2vw, 1.75rem); color: var(--act-ink); padding-top: 1.5rem; }
.am-foot-sign svg { width: clamp(64px, 11vw, 150px); height: auto; flex: none; }
.am-foot-sign .word { font-weight: var(--act-weight-wordmark); font-size: clamp(72px, 15vw, 210px); line-height: .9; letter-spacing: -.055em; display: flex; }
.am-foot-sign .word > span { display: inline-block; overflow: hidden; padding-bottom: .25em; margin-bottom: -.25em; }
.am-foot-sign .word > span > span { display: inline-block; }
.am-foot-sign .word > span:last-child { padding-right: .08em; } /* the negative letter-spacing shortens the last box and overflow:hidden cut the y; ARBITER release check */
.am-foot-about { margin: 0; max-width: 76ch; text-align: center; font-size: 1rem; line-height: var(--act-lh-body); color: var(--act-body); text-wrap: pretty; }
.am-foot-legal { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: 1.75rem 0 2.5rem; border-top: thin solid var(--act-line); text-align: center; font-size: var(--act-small); color: var(--act-body); line-height: 1.55; }
.am-foot-legal .co { color: var(--act-ink); }
.am-foot-legal small { max-width: 90ch; font-size: var(--act-micro); color: var(--act-muted); }

/* the tab bar a later page catalogues; hidden until one exists (scripts/responsive-check.mjs) */
.am-tabbar { display: none; }
.am-tabbar-item { min-width: 2.75rem; min-height: 2.75rem; }

@media (prefers-reduced-motion: reduce) {
  .am-nav-sheet, .am-nav-menu span, .am-nav-primary a, .am-nav-cta, .am-foot-pill { transition: none; }
}

/* ---------------------------------------------------------------- phones (ACT-272)
   The footer is a 2-column grid of link groups, every link a 44px target; the page top leaves room for the pill and no more. */
@media (max-width: 40rem) {
  .am-main { padding-top: 6.5rem; padding-bottom: 3rem; }
  .am-nav { padding: 0 .75rem; }
  .am-nav-bar { padding-left: 1rem; gap: .375rem; }
  .am-header .am-nav-cta { padding: 0 1rem; height: 2.75rem; }
  .am-header .am-nav-logo { min-height: 2.75rem; padding-right: .5rem; }
  .am-nav-menu { width: 2.75rem; height: 2.75rem; }
  .am-nav-sheet { max-height: calc(100svh - var(--act-nav-top) - var(--act-nav-height) - 1.5rem); overflow-y: auto; overscroll-behavior: contain; }
  .am-nav-sheet a { display: flex; align-items: center; min-height: 3.25rem; padding: .5rem .75rem; }

  .am-foot-top { padding: 1.5rem 0; gap: .875rem; }
  .am-foot-top p { font-size: 1rem; }
  .am-foot-cols { display: block; column-count: 2; column-gap: 1rem; font-size: .9375rem; padding: 1.75rem 0 1rem; }
  .am-foot-cols div { break-inside: avoid; gap: 0; margin: 0 0 1.25rem; }
  .am-foot-cols b { padding-bottom: .25rem; }
  .am-foot-cols div { font-size: .9375rem; }
  .am-footer .am-foot-cols a { display: flex; align-items: center; min-height: 2.75rem; }
  .am-foot-sign-wrap { gap: 1.25rem; padding: .5rem 0 2rem; }
  .am-footer .am-foot-sign { padding-top: 1rem; }
  .am-foot-about { font-size: .9375rem; text-align: left; }
  .am-foot-legal { padding: 1.5rem 0 2rem; }
}