/* ============================================================================
   /brand on the sub page system (9 Oct 2026). Loaded in PageStyles, after sub.css.
   Every rule under .sp, tokens only (no hex outside tos-site.css, canon guard rule 4).
   Mobile first: rules outside media queries are the 390px phone; 600 / 760 / 981 / 1180.

   The page shows the mark itself, so it is the one place on the site where the brand's
   own fixed surfaces appear on the paper: the dark tile, the black and white tiles, the
   swatches (the --tos-const-* constants and --tos-warm-ink, which is the brand's ink).
   The future dots of the DARK mark (3A3A3E) have no token in the light palette yet:
   --tos-const-mark-future is asked of the foundation lane; until it exists the fallback
   mixes the same shade from tokens.
   ============================================================================ */

/* ---- page header: the mark sweeping, with Pause (it loops for 9.6s) ---- */
.sp .brand-sweep .fig-tag { flex-wrap: wrap; column-gap: 12px; row-gap: 2px; }
.sp .brand-tag-2 { color: var(--lp-ink-2); }
.sp .brand-hero-mark { display: flex; justify-content: center; padding-block: 12px 4px; }
.sp .brand-hero-mark svg { display: block; width: min(64vw, 260px); height: auto; }
/* the mark on the paper: the accent as printed on light, the future dots in the page's unlit
   dot (as the homepage dial). The shared markup carries the dark palette as presentation
   attributes; a CSS fill outranks them. */
.sp .brand-hero-mark [fill*="accent"] { fill: var(--lp-accent); }
.sp .brand-hero-mark [stroke*="accent"] { stroke: var(--lp-accent); }
.sp .brand-hero-mark [fill*="mark-future"] { fill: var(--lp-dot-off); }
.sp .brand-hero-mark .brand-mark-canon { display: none; }
.sp .bm-hand { transform-origin: 32px 32px; animation: bm-sweep 9.6s steps(12, end) infinite; }
.sp .bm-d { opacity: 0; animation-duration: 9.6s; animation-iteration-count: infinite; animation-timing-function: linear; }
.sp .bm-d0 { animation-name: bm-l0; }
.sp .bm-d1 { animation-name: bm-l1; }
.sp .bm-d2 { animation-name: bm-l2; }
.sp .bm-d3 { animation-name: bm-l3; }
.sp .bm-d4 { animation-name: bm-l4; }
.sp .bm-d5 { animation-name: bm-l5; }
.sp .bm-d6 { animation-name: bm-l6; }
.sp .bm-d7 { animation-name: bm-l7; }
.sp .bm-d8 { animation-name: bm-l8; }
.sp .bm-d9 { animation-name: bm-l9; }
.sp .bm-d10 { animation-name: bm-l10; }
.sp .bm-d11 { animation-name: bm-l11; }
@keyframes bm-sweep { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes bm-l0 { 0% { opacity: 1; } 96% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes bm-l1 { 0%, 8.32% { opacity: 0; } 8.34% { opacity: 1; } 96% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes bm-l2 { 0%, 16.65% { opacity: 0; } 16.67% { opacity: 1; } 96% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes bm-l3 { 0%, 24.98% { opacity: 0; } 25% { opacity: 1; } 96% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes bm-l4 { 0%, 33.31% { opacity: 0; } 33.33% { opacity: 1; } 96% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes bm-l5 { 0%, 41.65% { opacity: 0; } 41.67% { opacity: 1; } 96% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes bm-l6 { 0%, 49.98% { opacity: 0; } 50% { opacity: 1; } 96% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes bm-l7 { 0%, 58.31% { opacity: 0; } 58.33% { opacity: 1; } 96% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes bm-l8 { 0%, 66.65% { opacity: 0; } 66.67% { opacity: 1; } 96% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes bm-l9 { 0%, 74.98% { opacity: 0; } 75% { opacity: 1; } 96% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes bm-l10 { 0%, 83.31% { opacity: 0; } 83.33% { opacity: 1; } 96% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes bm-l11 { 0%, 91.65% { opacity: 0; } 91.67% { opacity: 1; } 96% { opacity: 1; } 98%, 100% { opacity: 0; } }
/* Pause holds the sweep where it is */
.sp .brand-sweep.is-held .bm-hand, .sp .brand-sweep.is-held .bm-d { animation-play-state: paused; }
.sp .brand-ctl { display: flex; justify-content: center; margin-top: 10px; min-height: 44px; }
/* still: without JavaScript (no Pause could hold it), reduced motion and static captures show the
   canonical mark, and nothing to pause */
.sp:not(.js) .brand-hero-mark .brand-mark-anim { display: none; }
.sp:not(.js) .brand-hero-mark .brand-mark-canon { display: block; }
html.static .sp .brand-hero-mark .brand-mark-anim { display: none; }
html.static .sp .brand-hero-mark .brand-mark-canon { display: block; }
html.static .sp .brand-ctl { display: none; }
@media (prefers-reduced-motion: reduce) {
  .sp .brand-hero-mark .brand-mark-anim { display: none; }
  .sp .brand-hero-mark .brand-mark-canon { display: block; }
  .sp .brand-ctl { display: none; }
}

/* ---- 02 anatomy: the mark large, a hairline from each part to its number ---- */
.sp .brand-an-hand { stroke-width: 50px; }
.sp .brand-ld line { stroke: var(--lp-ink-2); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.sp .brand-ld-o circle { fill: var(--lp-ink); }
.sp .brand-an .fl.brand-n { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 24px; padding: 0 5px; border: 1px solid var(--lp-ink); background: var(--lp-paper); color: var(--lp-ink); font-weight: 600; }
.sp .p-n1 { left: 74%; top: 15.71%; }
.sp .p-n2 { left: 74%; top: 42.86%; }
.sp .p-n3 { left: 74%; top: 61.43%; }
.sp .p-n4 { left: 74%; top: 82.86%; }
.sp .brand-parts { margin-top: 28px; }
.sp .brand-parts .lg-k { color: var(--lp-ink); font-weight: 600; }
.sp .lg-x .lg-h { display: block; margin-bottom: 2px; font-weight: 600; }
.sp .brand-part-x { display: block; color: var(--lp-ink-2); font-size: 15px; }
@media (min-width: 600px) {
  .sp .ledger.brand-parts li { grid-template-columns: 48px minmax(0, 1fr); }
}

/* ---- 03 the wordmark, set as it is ---- */
.sp .brand-wordmark { direction: ltr; font: 700 clamp(72px, 24vw, 168px)/1 var(--tos-font-mono); letter-spacing: -.05em; color: var(--lp-ink); padding-block: 8px 4px; }
.sp .brand-wordmark .u { color: var(--lp-accent); }
[dir="rtl"] .sp .brand-wordmark { text-align: right; }

/* ---- 04 variants: the mark on the four surfaces it is made for ---- */
.sp .brand-vars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; border-top: 1px solid var(--lp-ink); padding-top: 20px; }
.sp .brand-var-s { display: grid; place-items: center; aspect-ratio: 4 / 3; border: 1px solid var(--lp-rule-2); }
.sp .brand-var-s svg { display: block; width: 64px; height: 64px; }
.sp .brand-var-n { display: block; margin-top: 8px; color: var(--lp-ink-2); }
.sp .brand-var .v-hand { stroke-width: 4.5; stroke-linecap: round; }
.sp .brand-var.is-dark .brand-var-s { background: var(--tos-warm-ink); border-color: var(--tos-warm-ink); }
.sp .brand-var.is-dark .v-on { fill: var(--tos-accent); }
.sp .brand-var.is-dark .v-hand { stroke: var(--tos-accent); }
.sp .brand-var.is-dark .v-off { fill: var(--tos-const-mark-future, color-mix(in srgb, var(--tos-const-white) 20%, var(--tos-warm-ink))); }
.sp .brand-var.is-light .brand-var-s { background: var(--tos-const-paper); border-color: var(--tos-const-paper-border); }
.sp .brand-var.is-light .v-on { fill: var(--tos-accent-on-light); }
.sp .brand-var.is-light .v-hand { stroke: var(--tos-accent-on-light); }
.sp .brand-var.is-light .v-off { fill: var(--tos-const-paper-border); }
.sp .brand-var.is-black .brand-var-s { background: var(--tos-const-black); border-color: var(--tos-const-black); }
.sp .brand-var.is-black .v-on { fill: var(--tos-const-white); }
.sp .brand-var.is-black .v-hand { stroke: var(--tos-const-white); }
.sp .brand-var.is-black .v-off { fill: var(--tos-const-white); fill-opacity: .3; }
.sp .brand-var.is-white .brand-var-s { background: var(--tos-const-white); border-color: var(--tos-const-paper-border); }
.sp .brand-var.is-white .v-on { fill: var(--tos-const-black); }
.sp .brand-var.is-white .v-hand { stroke: var(--tos-const-black); }
.sp .brand-var.is-white .v-off { fill: var(--tos-const-black); fill-opacity: .3; }

/* ---- 05 colour: the five swatches, each with its value as a record ---- */
.sp .brand-sws { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; border-top: 1px solid var(--lp-ink); padding-top: 20px; }
.sp .brand-sw .chip { display: block; height: 88px; border: 1px solid var(--lp-rule-2); }
.sp .brand-sw-n { display: block; margin-top: 10px; font-size: 15px; line-height: 1.4; font-weight: 600; color: var(--lp-ink); }
.sp .brand-sw-h { display: block; margin-top: 2px; color: var(--lp-muted); }
.sp .brand-sw .chip.is-accent { background: var(--tos-accent); }
.sp .brand-sw .chip.is-accent-light { background: var(--tos-accent-on-light); }
.sp .brand-sw .chip.is-future { background: var(--tos-const-mark-future, color-mix(in srgb, var(--tos-const-white) 20%, var(--tos-warm-ink))); }
.sp .brand-sw .chip.is-ink { background: var(--tos-warm-ink); }
.sp .brand-sw .chip.is-paper { background: var(--tos-const-paper); }

/* ---- 06 rules: what to do, what not to do ---- */
.sp .brand-rules { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; }
.sp .brand-rule-h { display: flex; align-items: center; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--lp-ink); color: var(--lp-ink); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.sp .brand-rule li { display: flex; align-items: flex-start; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--lp-rule); font-size: 16px; line-height: 1.5; color: var(--lp-ink); }
.sp .brand-rule li::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 8px; }
.sp .brand-rule.is-yes li::before { background: var(--lp-ink); }
.sp .brand-rule.is-no li::before { border: 1.5px solid var(--lp-ink); }

/* ---- 07 files: the buttons may take two lines on a 320px phone (pt: "Transferir o pacote da marca") ---- */
.sp .brand-files .btn { white-space: normal; text-align: center; line-height: 1.2; padding-block: 8px; }

@media (min-width: 760px) {
  .sp .brand-vars { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sp .brand-var-s svg { width: 84px; height: 84px; }
  .sp .brand-sws { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sp .brand-rules { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
}
@media (min-width: 1180px) {
  .sp .brand-hero-mark svg { width: min(100%, 400px); }
  .sp .brand-sws { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .sp .brand-sw .chip { height: 112px; }
  .sp .brand-var-s svg { width: 104px; height: 104px; }
  .sp .brand-rule li { font-size: 17px; }
  .sp .brand-part-x { font-size: 16px; }
}