/* Plucky Works site chrome: shared nav, footer, CTAs, and todo placeholders.
   Loaded by marketingbase.html AND publicbase.html (Bootstrap blog pages), so it
   must be self-contained: the design tokens and brand font live here.
   Design spec: docs/superpowers/specs/2026-08-02-marketing-site-visual-design.md */
@font-face {
    font-family: "Manrope";
    src: url("../../fonts/manrope/manrope-vf.woff2") format("woff2-variations");
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
}
/* Plucky Script, the brand's brush display face, for wordmarks only. The face
   is unicase (every lowercase codepoint maps to the uppercase glyph), so markup
   keeps its natural capitalisation and the face renders it as caps. It carries
   no digits or punctuation, so unicode-range stops the browser reaching for it
   outside A-Z and lets the fallback stack handle everything else. Pages that
   never set the family also never download it. */
@font-face {
    font-family: "Plucky Script";
    src: url("../../fonts/plucky-script/PluckyScript-Regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0020, U+0041-005A, U+0061-007A, U+00A0;
}
:root {
    --pw-ground: #f5f5f4;
    --pw-surface: #ffffff;
    --pw-fill: #e7e5e4;
    --pw-ink: #1c1917;
    --pw-text: #292524;
    --pw-muted: #57534e;
    --pw-red: #a72536;
    --pw-red-text: #9a2132;
    --pw-red-hover: #8c1e2d;
    --pw-dark-body: #d6d3d1;
    --pw-radius-card: 14px;
    --pw-radius-frame: 12px;
    --pw-shadow-card: 0 2px 8px rgba(28, 25, 23, 0.06);
    --pw-shadow-float: 0 12px 32px rgba(28, 25, 23, 0.12);
    --pw-shadow-menu: 0 12px 32px rgba(28, 25, 23, 0.16);
    --pw-font: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
[x-cloak] { display: none !important; }
/* Blog pages run Bootstrap's font stack; scope the brand font to the chrome itself.
   footer is scoped to .sitefoot so this never matches the plain <footer> inside an
   announcement article (see announcement_detail.html). */
nav.bar, footer.sitefoot { font-family: var(--pw-font); }
nav.bar { position: sticky; top: 0; z-index: 20; background: var(--pw-surface); border-bottom: 1px solid var(--pw-fill); }
.bar-in { max-width: 1120px; margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.brand { font-weight: 800; font-size: 17px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--pw-red); text-decoration: none; border: 0; padding: 0; }
.brand:hover { color: var(--pw-red-hover); }
.navitems { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-left: auto; }
.navitem { position: relative; }
/* :not(.cta) keeps the quiet-item reset off the demo CTA: without it this
   rule outranks .cta and strips the pill's red fill (white-on-white text). */
.navitem > button, .navitem > a:not(.cta) { display: inline-block; font-family: inherit; font-size: 14px; font-weight: 600; background: none; border: 0; border-radius: 999px; padding: 8px 12px; cursor: pointer; color: var(--pw-text); text-decoration: none; }
.navitem > button:hover, .navitem > a:not(.cta):hover { color: var(--pw-ink); background: var(--pw-ground); }
.submenu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 300px; background: var(--pw-surface); border: 0; border-radius: 14px; box-shadow: var(--pw-shadow-menu); padding: 8px; z-index: 30; }
.subrow { display: block; width: 100%; text-align: left; background: none; border: 0; border-radius: 10px; margin: 0; padding: 10px 12px; font-family: inherit; font-size: 14px; color: var(--pw-ink); text-decoration: none; }
.subrow:hover { background: var(--pw-ground); }
.subrow b { display: block; font-size: 14px; font-weight: 700; }
.subrow span { display: block; margin-top: 2px; color: var(--pw-muted); font-size: 12.5px; font-weight: 400; line-height: 1.5; }
/* Disclosure chevron: the dropdown triggers otherwise look identical to the
   plain links. Drawn in CSS (no icon assets) and driven by the aria-expanded
   state Alpine already maintains on the trigger. */
.navitem > button::after, .menu-toggle::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 0.15s ease; }
.navitem > button[aria-expanded="true"]::after, .menu-toggle[aria-expanded="true"]::after { transform: translateY(1px) rotate(225deg); }
@media (prefers-reduced-motion: reduce) { .navitem > button::after, .menu-toggle::after { transition: none; } }
/* The footer owns the ink token so it reads as the end of the page no matter
   which band a page ends on (white, ground, or dark). The light hairline is
   invisible against light endings and quietly separates the footer from a
   dark closing band. The max-height is a guard so no layout change can
   stretch the footer into a tall block: it sits well above the natural
   height (brand row + legal line on desktop, a few wrapped rows on narrow
   screens), so it never clips content. */
footer.sitefoot { margin-top: 72px; border-top: 1px solid rgba(214, 211, 209, 0.22); background: var(--pw-ink); max-height: 140px; }
@media (max-width: 760px) { footer.sitefoot { max-height: 320px; } }
.foot-in { max-width: 1120px; margin: 0 auto; padding: 24px 24px 22px; font-size: 13px; color: #a8a29e; }
.foot-brandrow { display: flex; align-items: baseline; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; margin-bottom: 10px; }
.foot-wordmark { color: #fff; font-size: 15px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.foot-wordmark:hover { color: #fff; text-decoration: underline; }
.foot-links { display: flex; gap: 8px 20px; flex-wrap: wrap; }
.foot-links a, .foot-in a { color: var(--pw-dark-body); font-weight: 600; text-decoration: none; }
.foot-links a:hover, .foot-in a:hover { color: #fff; text-decoration: underline; }
/* The shared nav is also used by Bootstrap blog pages, so CTA styles belong here.
   Every CTA cluster pairs the pill with a .sub caption right under it; the bottom
   margin keeps that caption (and wrapped pill rows) from cramming against the pill
   on every band, and the section/nav/card contexts that manage their own spacing
   already zero it (.section > :last-child, .bar-actions .cta, .actions .cta). */
.cta { display: inline-block; border: 0; border-radius: 999px; background: var(--pw-red); color: #fff; padding: 12px 24px; font-family: var(--pw-font); font-size: 15px; font-weight: 700; cursor: pointer; text-decoration: none; margin-top: 10px; margin-right: 8px; margin-bottom: 14px; }
.cta:hover { background: var(--pw-red-hover); color: #fff; text-decoration: none; }
a.cta { color: #fff; }
/* Ghost variant: the ring must be --pw-muted, not a light gray, to clear WCAG 1.4.11 (3:1 non-text). */
.cta.secondary { background: transparent; color: var(--pw-ink); box-shadow: inset 0 0 0 1.5px var(--pw-muted); }
.cta.secondary:hover { background: var(--pw-ground); color: var(--pw-ink); }
/* Bare .todo spans are inline "coming soon" chips. */
.todo { display: inline-block; border: 0; border-radius: 999px; background: var(--pw-fill); color: var(--pw-text); font-style: normal; font-size: 13px; font-weight: 600; padding: 3px 12px; }
/* A full paragraph of placeholder bio copy is not a chip: the pill treatment above
   turns multi-sentence text into an oversized stadium blob, so give p.todo a plain
   block card instead of the inline pill. */
p.todo { display: block; border-radius: 12px; padding: 14px 18px; font-size: 15px; font-weight: 400; line-height: 1.6; max-width: 68ch; }
/* Disabled CTAs keep the full brand pill at 55% opacity (WCAG 1.4.3 exempts inactive controls). */
.cta.todo { background: var(--pw-red); color: #fff; opacity: 0.55; cursor: not-allowed; font-style: normal; border: 0; padding: 12px 24px; }
/* Menu + demo CTA travel as one unit (Menu always first) so narrow screens
   wrap them below the logo together instead of splitting the pair. */
.bar-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.bar-actions .cta { padding: 9px 18px; font-size: 14px; margin: 0; }
/* Mobile-only disclosure for the whole nav; hidden on desktop. Ring is
   --pw-muted for the same WCAG 1.4.11 reason as .cta.secondary. */
.menu-toggle { display: none; font-family: inherit; font-size: 14px; font-weight: 700; color: var(--pw-ink); background: none; border: 0; border-radius: 999px; padding: 8px 14px; box-shadow: inset 0 0 0 1.5px var(--pw-muted); cursor: pointer; white-space: nowrap; }
.menu-toggle:hover { background: var(--pw-ground); }
nav.bar :focus-visible { outline: 2px solid var(--pw-ink); outline-offset: 2px; }
/* The footer sits on ink, so its focus ring must be light to stay visible. */
footer.sitefoot :focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.cta:focus-visible { outline: 2px solid var(--pw-ink); outline-offset: 3px; }
/* Mobile: the bar collapses to one compact sticky row (brand, demo CTA,
   Menu). The nav items become a Menu-toggled column, and the dropdown
   panels flatten into in-flow accordions inside it. */
@media (max-width: 760px) {
    .bar-in { gap: 12px; }
    .navitems { display: none; order: 10; width: 100%; margin-left: 0; flex-direction: column; align-items: stretch; gap: 2px; padding: 4px 0 10px; }
    .navitems.open { display: flex; }
    .navitem > button, .navitem > a:not(.cta) { display: block; width: 100%; text-align: left; padding: 10px 12px; }
    .submenu { position: static; min-width: 0; box-shadow: none; background: transparent; padding: 0 0 6px 10px; }
    .bar-actions { margin-left: auto; }
    .menu-toggle { display: inline-block; }
}
/* Too narrow for logo + both buttons on one row: the pair drops below the
   logo, left-justified. Inside the pair, flex-wrap stacks Menu above the
   CTA if even the two buttons cannot sit side by side. */
@media (max-width: 359px) {
    .bar-actions { margin-left: 0; width: 100%; justify-content: flex-start; }
}