/* Brand system (K8): the twisted hexagon mark, the hex divider, the hex loading state.
   Geometry is the official twisted mark (timepoint-logo-package/twisted). Ink: near-black on paper,
   gold on night, as the package prescribes. Sizes: see private/timekube/GUIDE.txt. */
:root { --mark-ink: var(--ink-900, #17130e); --mark-dot: var(--gold-500, #a87a24); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="paper"]):not([data-theme="light"]) { --mark-ink: var(--gold-500, #c99b45); --mark-dot: var(--gold-500, #c99b45); }
}
:root[data-theme="night"], :root[data-theme="dark"] { --mark-ink: var(--gold-500, #c99b45); --mark-dot: var(--gold-500, #c99b45); }

.tp-mark { display: block; flex: none; height: 40px; width: auto; aspect-ratio: 36.2 / 41.6; }
.tp-mark .mk { stroke: var(--mark-ink); }
.tp-mark .mk-dot { fill: var(--mark-dot); opacity: .8; }

/* Header: the hexagon beside the word, at a size you see first. */
.tp-brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; }
.tp-brand .tp-mark { height: 40px; }
@media (max-width: 767px) {
  .tp-brand { padding-block: 2px; min-width: 44px; }
  .tp-brand .tp-mark { height: 38px; }
}
/* Very narrow: the mark stays, the word goes (it stays in the accessible name). */
@media (max-width: 340px) {
  .tp-brand .tp-brand-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* The marketing header and the static pages' injected header (site-nav partial). */
.site-nav .nav-logo { min-height: 44px; min-width: 44px; text-decoration: none; color: var(--ink-900, #17130e); }
.site-nav .nav-logo .tp-mark { height: 40px; }
.site-nav .nav-word { font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif); font-weight: 600; font-size: 1.3rem; letter-spacing: .14em; text-transform: uppercase; }
@media (max-width: 480px) { .site-nav .nav-word { display: none; } .site-nav .nav-logo .tp-mark { height: 38px; } }

/* Footer. */
.tp-copy { display: flex; align-items: center; gap: 12px; }
.tp-foot-mark { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; }
.tp-foot-mark .tp-mark { height: 34px; }

/* Section divider: two hairlines and a small cube-face hexagon (TimeKube: three faces, one lit). */
.tp-hexrule { display: flex; align-items: center; gap: 14px; margin: 0 0 1.1rem; color: var(--gold-500, #a87a24); }
.tp-hexrule > span { flex: 1; height: 1px; background: var(--rule, #ddd4c5); }
.tp-hexrule svg { flex: none; display: block; }

/* Loading: the hexagon draws its outline and rests. Add class tp-hexload to any block; it is
   decorative (aria-hidden pseudo content). Reduced motion gets the still mark. */
.tp-hexload { position: relative; min-height: 64px; }
.tp-hexload::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 32px; height: 36px;
  background: var(--mark-ink);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%, 50% 0, 50% 6%, 8% 28%, 8% 72%, 50% 94%, 92% 72%, 92% 28%, 50% 6%);
  opacity: .55; animation: tp-hexpulse 1.6s ease-in-out infinite;
}
@keyframes tp-hexpulse { 0%, 100% { opacity: .25; transform: rotate(0deg) scale(.94); } 50% { opacity: .7; transform: rotate(30deg) scale(1); } }
@media (prefers-reduced-motion: reduce) { .tp-hexload::after { animation: none; opacity: .5; } }

.footer-grid-compact .tp-foot-mark-c { display: flex; justify-content: center; margin: 0 auto 6px; }
footer > .tp-hexrule { max-width: 1120px; margin-inline: auto; padding-inline: 16px; box-sizing: border-box; }