/* Press — a portable design language extracted from pear.no.
 *
 * Nine patterns: printed ground; hairline architecture; marks at
 * intersections; two faces in three roles; depth by quantised blur; one easing
 * curve; deferred entrance; one hoarded accent; copy as furniture.
 *
 * Defaults below are pear.no's own values. Re-key by overriding these
 * properties in your own stylesheet — do not edit this file per-consumer.
 */

:root {
  /* Palette — a near-black ground and one paper-light foreground. Two tones,
     not a ramp. Text is never pure white. */
  --press-ground: #0b0a09;
  --press-paper: #f2f1ed;
  --press-ink: #1d1c19;
  --press-hair: rgb(29 28 25 / 0.14);
  --press-accent: #015186;

  /* Type — display serif for anything large, sans for body, mono for labels. */
  --press-face-display: "Flecha M", "Iowan Old Style", Georgia, serif;
  --press-face-text: "GT Standard L", ui-sans-serif, -apple-system, Arial, sans-serif;
  --press-face-mono: "GT Standard Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --press-label-size: 11px;
  --press-label-tracking: 0.2em;

  /* Motion — one curve, three durations, one stagger step. */
  --press-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --press-dur-fast: 0.3s;
  --press-dur-base: 0.5s;
  --press-dur-slow: 0.8s;
  --press-stagger: 0.07s;

  /* Depth — discrete bands, never a continuous ramp. These are the language's
     published values, for consumers that layer in CSS. dewpt's field is drawn
     from JS and reads the same numbers from public/depth.js; nothing needs to
     wire these two together. */
  --press-blur-near: 0px;
  --press-blur-mid: 1.5px;
  --press-blur-far: 4px;

  /* Form — Press squares its corners. */
  --press-radius: 0px;

  /* Grid — content aligns to these rules, not to boxes. */
  --press-v1: 5.3%;
  --press-v2: 85.6%;
  --press-h1: 5.3vw;
  --press-h2: calc(65.3% + 50px);
}

/* A 1px hairline that draws itself in from an origin once an ancestor gains
   .press-go. Set `data-axis="y"` on the element for verticals. */
.press-rule {
  background: var(--press-hair);
  transform-origin: 0 0;
  transform: scaleX(0);
  transition: transform var(--press-dur-slow) var(--press-ease) var(--press-rule-delay, 0s);
}
.press-rule[data-axis="y"] {
  transform: scaleY(0);
  transform-origin: 0 0;
}
.press-go .press-rule {
  transform: scaleX(1);
}
.press-go .press-rule[data-axis="y"] {
  transform: scaleY(1);
}

/* The four-pointed mark that sits where rules cross. */
.press-cross {
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  opacity: 0;
  transform: scale(2.6);
  transition:
    opacity var(--press-dur-base) var(--press-ease) var(--press-cross-delay, 0s),
    transform var(--press-dur-base) var(--press-ease) var(--press-cross-delay, 0s);
}
.press-cross svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: currentcolor;
}
.press-go .press-cross {
  opacity: 0.9;
  transform: scale(1);
}

/* Copy as furniture. */
.press-label {
  font-family: var(--press-face-mono);
  font-size: var(--press-label-size);
  font-weight: 400;
  letter-spacing: var(--press-label-tracking);
  text-transform: uppercase;
}

/* .press-go is the entrance gate. Adding it to an ancestor releases every
   primitive above; it carries no styling of its own. */

@media (prefers-reduced-motion: reduce) {
  .press-rule,
  .press-cross {
    transition: none;
  }
  /* Degrade to the finished state, never to invisible content. */
  .press-rule {
    transform: scaleX(1);
  }
  .press-rule[data-axis="y"] {
    transform: scaleY(1);
  }
  .press-cross {
    opacity: 0.9;
    transform: scale(1);
  }
}