/* Five rules we work by, noise to order (October 24, 2026). Liam picked it from three directions in
   _scratch/rules-options/ ("i love the noise to order thing"), after Wild's process field on Mobbin.
   A paper band like Services: the heading and one line, then one dark panel where a field of dots
   settles into a shape for each rule (assets/principles.js), the rule's words bottom left, and five
   tabs under the panel, the live one filling its hairline while it holds. On the preview only; not
   in DESIGN.md while Liam is deciding. */
#rules.principles{position:relative;z-index:2;background:var(--paper);color:var(--paper-ink);padding:var(--bay) var(--gutter)}
.pr-in{max-width:var(--shell);margin:0 auto}
.pr-intro{text-align:center;padding-bottom:clamp(36px,4vw,52px)}
.pr-intro h2{margin:0 auto;max-width:24ch;font-family:var(--font-display);font-weight:200;font-size:var(--t-3);line-height:1.06;letter-spacing:-.035em;text-wrap:balance}
.pr-intro h2>span{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.12em;margin-bottom:-.12em}
.pr-intro h2 [data-mw]{display:inline-block;transform:translateY(118%);transition:transform .9s cubic-bezier(.19,1,.22,1)}
.pr-intro p{max-width:540px;margin:22px auto 0;font-size:var(--t-6);line-height:1.55;font-weight:500;color:var(--paper-ink-2)}

/* the panel: dots on the right, the live rule's words bottom left */
.pr-panel{position:relative;height:clamp(440px,38vw,540px);border-radius:var(--r-card);overflow:hidden;background:var(--panel);color:var(--ink)}
.pr-field{position:absolute;inset:0;width:100%;height:100%;display:block}
.pr-slides{position:absolute;left:clamp(24px,3.4vw,52px);bottom:clamp(24px,3.4vw,52px);width:min(38%,460px);display:grid}
.pr-slide{grid-area:1/1;align-self:end;display:flex;flex-direction:column;gap:14px;opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility 0s linear .35s}
.pr-slide[data-on]{opacity:1;visibility:visible;transition:opacity .45s var(--ease) .3s,visibility 0s linear 0s}
.pr-n{font-family:var(--font-mono);font-size:var(--t-label);letter-spacing:.2em;color:var(--quiet)}
.pr-slide h3{margin:0;font-family:var(--font-display);font-weight:200;font-size:var(--t-4);line-height:1.1;letter-spacing:-.03em}
.pr-slide p{margin:0;font-size:var(--t-7);line-height:1.62;color:var(--quiet)}

/* the tabs: a hairline each, the live one filling while its rule holds */
.pr-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:8px}
.pr-tab{all:unset;box-sizing:border-box;cursor:pointer;position:relative;display:flex;flex-direction:column;gap:10px;padding:16px 4px 6px}
.pr-bar{position:absolute;left:0;right:0;top:0;height:1px;background:var(--paper-line);overflow:hidden}
.pr-bar i{position:absolute;inset:0;background:var(--paper-ink);transform:scaleX(0);transform-origin:left}
.pr-tn{font-family:var(--font-mono);font-size:var(--t-label);letter-spacing:.16em;color:var(--paper-ink-3);transition:color .3s var(--ease)}
.pr-tt{font-size:var(--t-7);line-height:1.4;font-weight:500;color:var(--paper-ink-3);transition:color .3s var(--ease)}
.pr-tab[aria-selected="true"] .pr-tn,.pr-tab[aria-selected="true"] .pr-tt,.pr-tab:hover .pr-tt{color:var(--paper-ink)}
.pr-tab:focus-visible{outline:1px solid var(--paper-ink);outline-offset:2px}

/* phones: the shape above the words, the tabs down to their numbers */
@media(max-width:760px){
  .pr-panel{height:clamp(560px,150vw,680px)}
  .pr-slides{left:20px;right:20px;width:auto;bottom:22px}
  .pr-tt{display:none}
}
@media(prefers-reduced-motion:reduce){.pr-intro h2 [data-mw],.pr-slide,.pr-slide[data-on]{transition:none}}