/* ============================================================
   ORVANNA SHARED SITE CHROME, THE STYLING
   www/css/site-chrome.css

   THE SINGLE SOURCE OF CHROME PRESENTATION, in the same way
   www/_partials/nav.html is the single source of chrome markup
   and www/js/site-chrome.js is the single source of chrome
   behaviour. Loaded by all nine corporate pages.

   WHY THIS FILE EXISTS. The first pass of the corporate chrome
   round unified the navigation MARKUP and the navigation
   BEHAVIOUR, and left the navigation CSS in four separate
   places: corporate.css, library.css, and full inline copies
   inside comp-plan.html and conductor.html. Quality assurance
   measured the result on 2026-08-17 and the bar was still
   changing between pages:

     | Page                     | Font    | Gap  | Header |
     | index, conductor, team   | 13.44px | 26px | 69px   |
     | library, library-agent   | 13.44px | 24px | 69px   |
     | comp-plan                | 12.80px | 20px | 65px   |

   and at 390 pixels wide comp-plan left-packed the bar into
   181 pixels starting at x=166, because its inline copy left
   justify-content at its initial value where the shared sheet
   centres. That is the owner's original complaint surviving on
   the Plan page: same items, different bar. Identical markup
   rendering at different sizes is still the bar changing.

   So the rule that governs this file is the same rule the
   contract states for the markup: a build that cannot drift is
   worth more than a navigation that is correct today. Nothing
   below may be redeclared in corporate.css, library.css, or any
   page's inline style block. deploy/build_dist.py lints for it.

   WHAT IS IN SCOPE HERE: the navigation bar, the brand lockup
   inside it, the navigation items, the Enroll placeholder and
   its pill, the Sign In link, the theme button, the Support
   button, the skip link, and the footer.

   WHAT IS DELIBERATELY NOT HERE:
     - The cart on shop.html and product.html. The contract calls
       the cart a function of those pages rather than chrome, and
       says to leave its markup and identifiers untouched;
       css/shop.css owns its styling.
     - The login card's brand lockup. login.html is a sign-in
       area, excluded from this round by name, and it does not
       load this file. corporate.css keeps a copy scoped to
       .login-logo for exactly that reason.
     - comp-plan.html's own footer, which is a different element
       (.foot) belonging to a printable brochure. The footer
       rules below are scoped under .footer so they cannot reach
       it.

   THEMING. The chrome is DARK IN BOTH THEMES on every corporate
   page. That is a deliberate decision, recorded as a named
   exception in docs/CORPORATE-CHROME-CONTRACT.md section 3
   alongside the starfield hero: the bar and the footer carry the
   brand's dark lockup and are the site's fixed frame around a
   theme-aware reading surface. The --chrome-* tokens are
   therefore declared once, here, and never restated under
   :root[data-theme="light"].

   Acronym key: Cascading Style Sheets (CSS), Scalable Vector
   Graphics (SVG), Hypertext Markup Language (HTML).
   ============================================================ */

:root {
  /* The bar is translucent so content shows through the blur.
     0.94 rather than the 0.78 it started at: in the light theme
     a white page scrolls underneath, and at 0.78 the bar
     composited to about #4B453D, which put the Enroll
     placeholder at 2.84 to 1. At 0.94 it composites to about
     #F1EDE6 over white and 4.98 to 1, and over the dark field
     it is indistinguishable from the old value. */
  --chrome-bg:     #EAE4D9;
  --chrome-foot:   #1B1917;
  --chrome-hi:     #1B1917;
  --chrome-head:   #1B1917;
  --chrome-brand:  #1B1917;
  --chrome-text:   #4B453D;
  --chrome-muted:  #6B645A;
  /* On the ink footer. The paper form (#6B645A) measured 3.00:1 there;
     this is the ink form from the same family, 4.71:1. */
  --chrome-quiet:  #8F8981;
  --chrome-line:   #1B1917;
  --chrome-accent: #EC3013;
  --chrome-indigo: #1B1917;
}

/* ============================================================
   SKIP LINK
   ============================================================ */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 20px;
  background: var(--chrome-accent);
  color: #FFFFFF;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

/* ============================================================
   THE BAR
   ============================================================ */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--chrome-bg);
  backdrop-filter: none;
  backdrop-filter: none;
  border-bottom: 2px solid var(--chrome-line);
}

/* ONE ROW, ALWAYS. flex-wrap:wrap is what let the bar grow a second row
   and change height between pages; the disclosure below 900px is what
   makes nowrap safe, because the items now leave the bar instead of
   wrapping inside it. */
.nav-inner {
  max-width: var(--maxw, 1180px);
  margin: 0 auto;
  padding: 15px 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: nowrap;
}

/* ---------- brand lockup ---------- */

.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--chrome-brand);
  text-decoration: none;
  flex-shrink: 0;
  min-width: 0;
}

.nav-logo { height: 30px; width: auto; }

/* THE MARK. Four rectangles in 90 degree rotational symmetry, an ensemble
   handing work around a central gap. Drawn inline rather than linked so it
   inherits the ground it sits on: the three structural bars take
   currentColor, so the same drawing is ink on paper and paper on ink, and
   only the one accented bar is fixed.

   The large optical cut (bar 22 x 10, inset 10) is correct at 28px. The
   medium and small cuts are separate files, not this drawing scaled:
   assets/logo-mark-md.svg and assets/logo-mark-sm.svg thicken the bars and
   deepen the inset so the pinwheel survives rasterisation instead of
   closing up into a smudge. */
.brand-mark {
  display: block;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  flex-shrink: 0;
}
.brand-mark svg {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: 50% 50%;
  transition: transform 0.8s cubic-bezier(0.2, 0.9, 0.2, 1);
}
/* THE QUARTER TURN, on every page carrying the mark.
   Ruled 2026-08-19. It used to fire only on the home page, driven
   by the working log advancing, on the reasoning that a mark which
   moves permanently trains people to stop looking at it. Howard
   read that as a fault, not a restraint: the mark sat dead on six
   of the seven public pages, so the one page it moved on looked
   like the broken one.

   So the turn is CHROME now, not home-page furniture, and it is
   CSS rather than script -- the same rhythm the log keeps (a two
   second hold, then an eight tenths turn) without asking six pages
   to load a timer. Four quarters make the cycle, so it closes on
   360 and loops without snapping back.

   The home page still drives its own from the log, because there
   the caption claims cause -- "the mark in the bar turns a quarter
   every time this list advances" -- and a second clock would make
   that sentence a lie. Its rule is below. */
@keyframes mark-quarter {
  0%,   17.857% { transform: rotate(0deg); }
  25%,  42.857% { transform: rotate(90deg); }
  50%,  67.857% { transform: rotate(180deg); }
  75%,  92.857% { transform: rotate(270deg); }
  100%          { transform: rotate(360deg); }
}
.brand-mark svg {
  animation: mark-quarter 11.2s cubic-bezier(0.2, 0.9, 0.2, 1) infinite;
}
/* The home page's mark answers to the log, not to a clock. */
body:has(#workingLog) .brand-mark svg { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .brand-mark svg { transition: none; animation: none; }
}
.brand-mark .mark-bar { fill: currentColor; }
.brand-mark .mark-accent { fill: var(--chrome-accent); }

/* The wordmark is SET, not drawn. Shipping letterforms as paths is why the
   old logo could never match the site's headlines: it could not take the
   page's face, weight or tracking. */
.brand-word {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  text-transform: uppercase;
}

/* ---------- the items ---------- */

/* The bar was eleven controls wide and wrapped, so its height changed
   between pages. That is now fixed structurally rather than by tuning a
   gap to the pixel: two controls left the bar (the theme no-op and the
   Enroll placeholder), and below 900px the rest collapse into a disclosure
   menu instead of wrapping. The gap no longer carries the whole problem,
   so the arithmetic that used to live in this comment is gone with it. */
.nav-links {
  display: flex;
  align-items: center;
  gap: 0;
  flex: 1 1 auto;
  justify-content: flex-end;
  min-width: 0;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: nowrap;
  min-width: 0;
}

.nav-link {
  position: relative;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;
  text-decoration: none;
  color: var(--chrome-muted);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 0 0 4px;
  margin: 0;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}

.nav-link:hover { color: var(--chrome-hi); }

/* The active item carries a rule, not only a colour. Colour alone is the
   one marker lost to greyscale print and to a reader who cannot separate
   these two values. */
.nav-link.is-active {
  color: var(--chrome-hi);
  font-weight: 700;
  border-bottom-color: var(--chrome-accent);
}

.nav-tail {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  margin-left: 12px;
  flex-shrink: 0;
}

.nav-signin {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;
  text-decoration: none;
  color: var(--chrome-muted);
  white-space: nowrap;
}
.nav-signin:hover { color: var(--chrome-hi); }

/* THE BAR'S PRIMARY ACTION: ONE BOX, TWO FILLS.

   .nav-cta and .nav-cart are the two forms of the same slot, and they
   swap by page. Their box metrics are declared ONCE, together, so the
   two cannot drift apart: when they were styled separately the cart
   measured 41px against the button's 37px and the bar stood 73px on the
   commerce pages against 69px everywhere else. That is the original
   complaint -- same bar, different height, page to page -- coming back
   through a new pair of controls, four pixels at a time.

   A lint could have caught it after the fact. Sharing the rule means
   there is nothing to catch. */
.nav-cta,
.nav-cart {
  display: inline-flex;
  align-items: center;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  text-decoration: none;
  border: 2px solid var(--chrome-hi);
  padding: 10px 16px;
  white-space: nowrap;
  border-radius: 0;
}

/* solid ink, paper label */
.nav-cta {
  color: var(--chrome-bg);
  background: var(--chrome-hi);
}
.nav-cta:hover {
  background: var(--chrome-accent);
  border-color: var(--chrome-accent);
  color: #FFFFFF;
}

/* ---------- the cart, shop.html and product.html only ---------- */

/* Set as a word rather than a drawn trolley, per 9a. The identifiers and
   the behaviour are untouched: #cartButton and #cartCount are what the
   catalog and the drawer read, and renaming either breaks the lookups. */
/* outlined, ink label -- the box itself is declared with .nav-cta above */
.nav-cart {
  gap: 8px;
  font-family: inherit;
  color: var(--chrome-hi);
  background: none;
  cursor: pointer;
}
.nav-cart:hover { background: var(--chrome-hi); color: var(--chrome-bg); }
/* the drawn trolley is gone; the control is set as a word */
.nav-cart svg { display: none; }

/* The count is a figure set beside the word Cart, not a badge stuck to
   an icon. It was a filled accent chip, which spent the page's one
   accent event on a number that is zero most of the time. */
.cart-count {
  display: inline;
  padding: 0;
  background: none;
  color: inherit;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  line-height: 1;
  transition: transform 0.18s ease;
}
.cart-count.bump { transform: scale(1.35); }

@media (prefers-reduced-motion: reduce) {
  .cart-count.bump { transform: none; }
}

/* ---------- support control ---------- */

.nav-support { font: inherit; font-size: 12.5px; font-weight: 600; }

.nav-support[data-support-state="pending"] {
  opacity: 0.55;
  cursor: progress;
}
.nav-support[data-support-state="unavailable"] {
  opacity: 0.55;
  cursor: not-allowed;
}

/* The vendor's own floating button stays suppressed: the bar owns this
   control, and two entry points to one chat is one too many. */
.bpFab { display: none !important; }

/* ---------- the disclosure, under 900px ---------- */

/* Hidden above the breakpoint, and a real disclosure below it: it owns
   aria-expanded, Escape closes it, and the menu it controls leaves the tab
   order when shut. The old bar had no disclosure at all -- it shrank the
   type to 0.72rem and let eleven controls wrap onto a second row. */
.nav-disclosure {
  display: none;
  align-items: center;
  gap: 9px;
  font: inherit;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--chrome-hi);
  background: none;
  border: 2px solid var(--chrome-hi);
  border-radius: 0;
  padding: 9px 13px;
  cursor: pointer;
}

.nav-disclosure-mark {
  width: 14px;
  height: 10px;
  background:
    linear-gradient(currentColor, currentColor) 0 0 / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) 0 4px / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) 0 8px / 100% 2px no-repeat;
}

.nav-disclosure[aria-expanded="true"] {
  background: var(--chrome-hi);
  color: var(--chrome-bg);
}

/* ---------- focus, one treatment everywhere ---------- */

.nav-link:focus-visible,
.nav-signin:focus-visible,
.nav-cta:focus-visible,
.nav-cart:focus-visible,
.nav-disclosure:focus-visible,
.nav-brand:focus-visible {
  outline: 2px solid var(--chrome-accent);
  outline-offset: 2px;
}

/* ============================================================
   THE FOOTER

   Scoped under .footer throughout, so these rules cannot reach
   comp-plan.html's printable brochure footer, which is a
   different element (.foot) with its own type scale.
   ============================================================ */

.footer {
  background: var(--chrome-foot);
  border-top: 1px solid var(--chrome-line);
  padding: 64px 0 40px;
  color: var(--chrome-muted);
}

/* Five columns: four link lists and the brand block, per 6a. The brand
   block is wider because it carries a lockup and an address rather than a
   stack of short labels. */
.footer .footer-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr) 1.25fr;
  gap: 28px;
  margin-bottom: 48px;
}

.footer .footer-mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #EAE4D9;
  margin-bottom: 16px;
}
.footer .footer-mark svg { display: block; width: 22px; height: 22px; }
/* On ink the structural bars are paper and the accent takes its
   on-ink form: #EC3013 against #1B1917 is too close to read. */
.footer .footer-mark .mark-bar { fill: currentColor; }
.footer .footer-mark .mark-accent { fill: #FF6A4A; }
.footer .footer-word {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  text-transform: uppercase;
}
.footer .footer-brand-mail { display: block; }

.footer .footer-head {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--chrome-head);
  margin-bottom: 14px;
}

.footer .flink {
  display: block;
  font-size: 0.9rem;
  color: var(--chrome-muted);
  padding: 3px 0;
  cursor: default;
  transition: color 0.15s ease;
}

.footer a.flink { text-decoration: none; cursor: pointer; }
.footer a.flink:hover { color: var(--chrome-accent); }

.footer .footer-meta {
  border-top: 1px solid var(--chrome-line);
  padding-top: 28px;
}

.footer .footer-contact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.footer .footer-mail {
  color: var(--chrome-text);
  text-decoration: none;
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  transition: color 0.15s ease, text-shadow 0.15s ease;
}
.footer .footer-mail:hover {
  color: var(--chrome-accent);
  text-shadow: none;
}

.footer .socials { display: flex; gap: 14px; }

.footer .social {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--chrome-line);
  border-radius: 0;
  color: var(--chrome-muted);
  transition: color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.footer .social svg { width: 17px; height: 17px; }
.footer .social:hover {
  color: var(--chrome-accent);
  border-color: rgba(236, 48, 19, 0.5);
  box-shadow: none;
}

.footer .legal {
  font-size: 0.78rem;
  color: var(--chrome-quiet);
  letter-spacing: 0.02em;
  margin-top: 14px;
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .nav-link,
  .nav-signin,
  .nav-theme,
  .footer .flink,
  .footer .footer-mail,
  .footer .social,
  a.nav-link::after { transition: none !important; }
}

/* ============================================================
   RESPONSIVE

   ONE breakpoint for the bar, at 560 pixels. Before this file
   existed there were three: corporate.css centred the bar below
   480, library.css below 560, and comp-plan.html shrank type
   below 760 and never centred at all. Three breakpoints for one
   component is three chances to disagree.
   ============================================================ */

@media (max-width: 760px) {
  .footer .footer-cols { grid-template-columns: repeat(2, 1fr); }
  .footer .footer-brand { grid-column: 1 / -1; }
}

/* THE DISCLOSURE, under 900px.

   The old bar had no disclosure. It shrank the links to 0.72rem, centred
   them, and let eleven controls wrap onto a second and sometimes a third
   row, which is why the bar's height changed from page to page: the cart
   pages carried one control more than the rest.

   Below the breakpoint the menu leaves the flow entirely and hangs under
   the bar as a full-width panel of stacked rules. It is hidden with
   `display: none` rather than opacity or a transform, so its links leave
   the tab order when it is shut: a menu you cannot see but can still tab
   into is worse than no menu. */
@media (max-width: 900px) {
  .nav-inner { padding: 12px 22px; gap: 12px; }

  .nav-disclosure { display: inline-flex; }

  .nav-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--chrome-bg);
    border-bottom: 2px solid var(--chrome-line);
    padding: 6px 22px 18px;
  }

  .nav-links.is-open .nav-menu { display: flex; }

  .nav-menu .nav-link {
    padding: 15px 0;
    font-size: 14px;
    border-bottom: 1px solid rgba(27, 25, 23, 0.22);
    text-align: left;
  }
  .nav-menu .nav-link.is-active {
    border-bottom-color: var(--chrome-accent);
  }

  .nav-tail {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin: 18px 0 0;
  }
  .nav-signin {
    font-size: 14px;
    padding: 4px 0;
  }
  .nav-cta { text-align: center; padding: 14px 16px; font-size: 12.5px; }
}

@media (max-width: 560px) {
  .nav-inner { padding: 12px 18px; }
  .brand-word { font-size: 17px; }
  .brand-mark { width: 24px; height: 24px; }
  /* THE MEDIUM CUT, from assets/logo-mark-md.svg: bar 25.5 x 12.5, inset 7.5.
     The large cut (bar 22 x 10, inset 10) is drawn inline on every page and is
     correct at 28px; at this size its bars close up into a smudge, which is
     what the note beside the large cut warns about. Geometry, not scale. */
  .brand-mark .mark-accent { x: 31px; y: 7.5px; width: 25.5px; height: 12.5px; }
  .brand-mark .mark-bar:nth-of-type(2) { x: 44px; y: 32px; width: 12.5px; height: 25.5px; }
  .brand-mark .mark-bar:nth-of-type(3) { x: 7.5px; y: 44px; width: 25.5px; height: 12.5px; }
  .brand-mark .mark-bar:nth-of-type(4) { x: 7.5px; y: 7.5px; width: 12.5px; height: 25.5px; }
  .footer .footer-cols { grid-template-columns: 1fr; }
  .footer .footer-contact { justify-content: flex-start; }
}

/* ============================================================
   PRINT: the chrome is screen furniture and never prints.
   Each page's own print rules used to say this separately.
   ============================================================ */

@media print {
  .nav,
  .skip-link,
  .footer { display: none !important; }
}


/* ============================================================
   THE FOOTER KEEPS THE INK GROUND (redesign, 2026-08-18)

   The bar moved to paper but the footer stays ink, and both were
   reading the same --chrome-* text tokens. Those tokens now carry
   paper values, so the footer's own text is restated here against
   its dark ground rather than inheriting ink-on-ink.
   ============================================================ */
.footer { background: #1B1917; border-top: 2px solid #1B1917; }
.footer,
.footer .flink,
.footer .footer-mail { color: #C9C6C1; }
.footer .footer-head { color: #F8F7F5; }
.footer .flink:hover,
.footer .footer-mail:hover { color: #FF6A4A; }
.footer .footer-meta,
.footer .footer-legal,
.footer .disclaimer { color: #8F8981; }
.footer .social { border-color: #4A453F; color: #C9C6C1; }