/* ORBINTU pixel UI — the pixel button and the header shell (markup: tools_orbintu/pixel_ui.py).
   Loaded after base.css (uses its pixel-border component) and before shell.css (which styles header states). */
/* Everything sits in @layer utilities — the layer the utility classes these rules replace lived in — so page CSS
   (unlayered) keeps overriding them exactly as before. */
@layer utilities {

/* ── pixel button: face + frame ─────────────────────────────────────────────────────────────────────────────── */
.ob-pbtn { position: relative; display: inline-flex; cursor: pointer; outline-style: none; }
.ob-pbtn__face { flex: 1; display: flex; align-items: center; justify-content: flex-start; gap: 8px;
  font-family: var(--font-caption); font-weight: var(--font-weight-caption); text-transform: uppercase;
  font-size: var(--text-caption-md); line-height: var(--text-caption-md--line-height); letter-spacing: var(--text-caption-md--letter-spacing);
  /* 4 px pixel notch at each corner */
  clip-path: polygon(4px 0, calc(100% - 4px) 0, calc(100% - 4px) 4px, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px),
                     calc(100% - 4px) 100%, 4px 100%, 4px calc(100% - 4px), 0 calc(100% - 4px), 0 4px, 4px 4px); }
.ob-pbtn__l { display: flex; gap: 4px; }
.ob-pbtn__chev { width: 12px; height: 12px; transition: transform .2s var(--ease-default); }

.ob-pbtn--stone  { background-color: var(--stone-800); color: var(--text-primary); }
.ob-pbtn--copper { background-color: var(--copper-500); color: var(--text-primary); }
.ob-pbtn--white  { background-color: var(--core-white); color: var(--stone-800); }
.ob-pbtn--light  { background-color: var(--stone-200); color: var(--stone-800); }

.ob-pbtn--nav  { padding: 8px; }
.ob-pbtn--wide { padding: 8px 16px; }
.ob-pbtn--page { padding: 12px 24px; justify-content: center;
  font-size: var(--text-caption-lg); line-height: var(--text-caption-lg--line-height); letter-spacing: var(--text-caption-lg--letter-spacing); }

.ob-pbtn--nowrap { white-space: nowrap; }
@media (min-width: 64rem) { .ob-pbtn--menu { display: none; } }   /* the desktop nav shows from 1024px (shell.css), so MENU must too below it */
.ob-pbtn--half { width: 100%; }
@media (min-width: 40rem) { .ob-pbtn--half { width: 50%; } }

/* frame: a 4 px pixel outline 4–8 px outside the button, with open pixel corners; one 9-slice border image (36 × 36,
   12 px slices). Press and keyboard focus show it at full strength; hover shows it at half strength, and wins while the
   pointer is over the button (so a pressed button keeps the half-strength frame) — the rule order below is deliberate. */
.ob-pbtn__frame { position: absolute; inset: -12px; pointer-events: none; opacity: 0; color: var(--text-primary);
  border: 12px solid transparent; border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36' shape-rendering='crispEdges' fill='%23fff'%3E%3Crect x='4' y='0' width='4' height='4'/%3E%3Crect x='8' y='0' width='4' height='4'/%3E%3Crect x='0' y='4' width='4' height='4'/%3E%3Crect x='8' y='4' width='4' height='4'/%3E%3Crect x='0' y='8' width='4' height='4'/%3E%3Crect x='4' y='8' width='4' height='4'/%3E%3Crect x='24' y='0' width='4' height='4'/%3E%3Crect x='28' y='0' width='4' height='4'/%3E%3Crect x='24' y='4' width='4' height='4'/%3E%3Crect x='32' y='4' width='4' height='4'/%3E%3Crect x='28' y='8' width='4' height='4'/%3E%3Crect x='32' y='8' width='4' height='4'/%3E%3Crect x='0' y='24' width='4' height='4'/%3E%3Crect x='4' y='24' width='4' height='4'/%3E%3Crect x='0' y='28' width='4' height='4'/%3E%3Crect x='8' y='28' width='4' height='4'/%3E%3Crect x='4' y='32' width='4' height='4'/%3E%3Crect x='8' y='32' width='4' height='4'/%3E%3Crect x='28' y='24' width='4' height='4'/%3E%3Crect x='32' y='24' width='4' height='4'/%3E%3Crect x='24' y='28' width='4' height='4'/%3E%3Crect x='32' y='28' width='4' height='4'/%3E%3Crect x='24' y='32' width='4' height='4'/%3E%3Crect x='28' y='32' width='4' height='4'/%3E%3Crect x='12' y='4' width='12' height='4'/%3E%3Crect x='12' y='28' width='12' height='4'/%3E%3Crect x='4' y='12' width='4' height='12'/%3E%3Crect x='28' y='12' width='4' height='12'/%3E%3C/svg%3E") 12 / 12px / 0 stretch; }
.ob-pbtn:active > .ob-pbtn__frame, .ob-pbtn:focus-visible > .ob-pbtn__frame { opacity: 1; }
@media (hover: hover) { .ob-pbtn:hover > .ob-pbtn__frame { opacity: .5; } }

/* ── header shell ───────────────────────────────────────────────────────────────────────────────────────────── */
.ob-hdr { position: fixed; inset-inline: 0; top: 0; z-index: 50; padding-top: 12px; overflow: visible; }
.ob-hdr__bar { --pixel-border-width: 4px; position: relative; z-index: 10; margin-inline: auto; display: flex; align-items: center;
  justify-content: space-between; padding: 12px; color: var(--stone-700); overflow: visible; clip-path: none; }
.ob-hdr__bar::after { content: ""; background-color: var(--surface-primary); }
.ob-hdr__logo { position: absolute; left: 16px; display: flex; align-items: center; justify-content: center; }
@media (min-width: 48rem) { .ob-hdr__logo { left: 50%; translate: -50% 0; } }

/* wordmark PNG as supplied: height-controlled, aspect ratio kept (1603 × 693), no filters / recolouring, static — no animation */
.ob-hdr__logo img { display: block; height: 30px; width: auto; }
@media (max-width: 47.99rem) { .ob-hdr__logo img { height: 22px; } }

/* ── ORBI mark host (tools_orbintu/pixel_ui.py orbi_mark()): sizing only; the animation is orbi-mark.js ── */
.ob-mark-o { display: inline-flex; width: 1em; height: 1em; color: var(--copper-500); }
.ob-mark-o svg { display: block; width: 100%; height: 100%; overflow: visible; }

.ob-foot__logo { font-size: clamp(40px, 7vw, 128px); }

/* ── section tag, section column, reveal line ───────────────────────────────────────────────────────────────── */
.ob-stag { margin-bottom: 12px; display: inline-flex; width: fit-content; flex-shrink: 0; align-items: center; padding: 6px 12px;
  background-color: var(--stone-800); color: var(--copper-500); }
.ob-stag__t { color: var(--copper-500); font-family: var(--font-caption); font-weight: var(--font-weight-caption); text-transform: uppercase;
  font-size: var(--text-caption-lg); line-height: var(--text-caption-lg--line-height); letter-spacing: var(--text-caption-lg--letter-spacing); }
.ob-sec__in { width: 100%; display: flex; flex-direction: column; gap: 32px; }
@media (min-width: 64rem) { .ob-sec__in { gap: 40px; } }
.ob-rv { display: block; padding-bottom: 8px; }

/* ── footer frame ───────────────────────────────────────────────────────────────────────────────────────────── */
.ob-footer { position: relative; overflow: hidden; background-color: var(--page-primary); }
.ob-foot__in { position: relative; z-index: 10; width: 100%; padding-top: 48px; padding-bottom: 60px; }
@media (min-width: 40rem) { .ob-foot__in { padding-top: 64px; } }
@media (min-width: 64rem) { .ob-foot__in { padding-top: 80px; } }
.ob-foot__h { color: var(--text-tertiary); }
.ob-foot__a { width: fit-content; color: var(--text-primary);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
  transition-timing-function: var(--ease-default); transition-duration: var(--duration-default); }
@media (hover: hover) { .ob-foot__a:hover { color: var(--text-secondary); } }

/* ── homepage frame (tools_orbintu/build_homepage.py) ───────────────────────────────────────────────────────── */
.ob-home { background-color: var(--page-primary); }
.ob-hero { isolation: isolate; position: relative; display: flex; flex-direction: column; align-items: center; overflow: clip;
  min-height: 780px; padding-top: 5rem; background-color: var(--page-primary); }
@media (min-width: 40rem) { .ob-hero { min-height: 900px; } }
.ob-hero__text { position: relative; z-index: 20; display: flex; width: 100%; flex-direction: column; align-items: center; justify-content: center;
  gap: 64px; padding-block: 96px; text-align: center; }
.ob-hero__stack { display: flex; flex-direction: column; align-items: center; gap: 32px; }
.ob-hero__title { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.ob-hero__h1 { white-space: pre-line; text-align: center; color: var(--text-primary); filter: drop-shadow(4px 4px 0 #fff3); }
@media (min-width: 64rem) { .ob-hero__h1 { white-space: pre; } }
.ob-hero__lead { max-width: 48rem; text-align: center; color: var(--text-primary); }
.ob-herocta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px; margin-top: 16px; }
.ob-mobwrap { position: relative; z-index: 20; }
.ob-hero__fade { pointer-events: none; position: absolute; inset-inline: 0; bottom: 0; z-index: 6; display: flex; flex-direction: column; }
.ob-hero__fade > div { height: 24px; width: 100%; background-color: var(--page-primary); }
.ob-band { background-color: var(--page-primary); padding-block: 32px; }
@media (min-width: 48rem) { .ob-band { padding-block: 40px; } }
@media (min-width: 64rem) { .ob-band { padding-block: 64px; } }
.ob-band--final { background-color: var(--page-primary); padding-block: 96px; }
.ob-headcol { display: flex; max-width: 48rem; flex-direction: column; gap: 24px; }
.ob-final__in { display: flex; flex-direction: column; align-items: center; }
.ob-final__head { margin-inline: auto; margin-bottom: 64px; display: flex; max-width: 768px; flex-direction: column; gap: 24px; text-align: center; }
.ob-c1 { color: var(--text-primary); } .ob-c2 { color: var(--text-secondary); } .ob-tleft { text-align: left; } .ob-pre { white-space: pre-line; }
}

/* ORBI cube as the public mark (pixel_ui.orbi_mark) — fills its .ob-mark-o box */
.ob-mark-o.ob-mark-orbi .ob-orbi-glyph { width: 100%; height: 100%; }

/* Touch targets: the menu button and standalone "more" links meet a 40px / 24px minimum on small or coarse-pointer screens. */
@media (max-width: 760px), (pointer: coarse) {
  .ob-pbtn--menu { min-height: 40px; }
  .ob-act__more { display: inline-block; padding-block: 8px; }
}