/* lt-border.css: the colours and static styles of Laura's border
   (sites/_shared/js/lt-border.js lays it).
   Her pattern, her white zigzag (#FFFFFF), her black rule (#000000) and the
   white paper ground are exact always, so they are fixed values here, never
   custom properties.
   Her orange #FF914D is the default colour of the petals and the wave line.
   David's word (P16, answer 3 at 16:56 on 27 October 2026) lets the string
   change colour section by section, starting from her orange: set
   --lt-border-orange on a section and every band inside it follows, blending
   over 0.8 s. The string's ground is that colour taken toward white (about
   28.5 percent, #FFE0CC for her orange) and its edge is that colour too (one
   colour family reads as one solid string, and it looks the same on light
   and dark pages); data-lt-edge="black" gives her black edge instead. */
@property --lt-border-orange {
  syntax: "<color>";
  inherits: true;
  initial-value: #FF914D;
}

:root { --lt-border-orange: #FF914D; }

/* A straight run's height is reserved here, before any script runs, so
   nothing below it moves when it lays in. Its box is 1.18054 times its
   data-lt-height for her unit at the default edge weight (her petal tips
   to the rule, plus the string's outer edge; scripts/make-border.mjs
   prints the figure). The heights below are covered; for another, add
   [data-lt-height="N"] { --lt-border-h: Npx; } to the site's own CSS. A
   run sized by data-lt-scale gets its height from the script instead. */
div[data-lt-border], p[data-lt-border], span[data-lt-border] {
  display: block;
  height: calc(var(--lt-border-h, 24px) * 1.18054);
}
div[data-lt-scale], p[data-lt-scale], span[data-lt-scale] { height: auto; }
[data-lt-height="12"] { --lt-border-h: 12px; }
[data-lt-height="14"] { --lt-border-h: 14px; }
[data-lt-height="16"] { --lt-border-h: 16px; }
[data-lt-height="18"] { --lt-border-h: 18px; }
[data-lt-height="20"] { --lt-border-h: 20px; }
[data-lt-height="22"] { --lt-border-h: 22px; }
[data-lt-height="24"] { --lt-border-h: 24px; }
[data-lt-height="26"] { --lt-border-h: 26px; }
[data-lt-height="28"] { --lt-border-h: 28px; }
[data-lt-height="30"] { --lt-border-h: 30px; }
[data-lt-height="32"] { --lt-border-h: 32px; }
[data-lt-height="36"] { --lt-border-h: 36px; }
[data-lt-height="40"] { --lt-border-h: 40px; }
[data-lt-height="44"] { --lt-border-h: 44px; }
[data-lt-height="48"] { --lt-border-h: 48px; }
[data-lt-height="56"] { --lt-border-h: 56px; }
[data-lt-height="64"] { --lt-border-h: 64px; }
[data-lt-height="72"] { --lt-border-h: 72px; }
[data-lt-height="80"] { --lt-border-h: 80px; }
[data-lt-height="96"] { --lt-border-h: 96px; }
[data-lt-height="112"] { --lt-border-h: 112px; }
[data-lt-height="128"] { --lt-border-h: 128px; }
.lt-border__run { display: block; width: 100%; overflow: visible; }
svg[data-lt-border] { overflow: visible; }

[data-lt-border] { transition: --lt-border-orange 0.8s ease; }
@media (prefers-reduced-motion: reduce) {
  [data-lt-border] { transition: none; }
}

/* The guide is never painted, from the first frame (before the script has
   laid the band, and if the script never runs). */
.lt-border__guide,
[data-lt-border] [data-lt-guide],
svg[data-lt-border] > :is(path, circle, ellipse, line, polyline, polygon) { fill: none; stroke: none; }
.lt-border__paper { fill: none; stroke: #FFFFFF; }
.lt-border__rule { fill: none; stroke: #000000; }
.lt-border__corridor { fill: none; stroke: #FFFFFF; }
.lt-border__ground {
  fill: #FFE0CC;
  fill: color-mix(in srgb, var(--lt-border-orange) 28.5%, #FFFFFF);
}
.lt-border__petals { fill: var(--lt-border-orange); }
.lt-border__wave { fill: none; stroke: var(--lt-border-orange); }
.lt-border__edges { fill: none; stroke: var(--lt-border-orange); }
[data-lt-edge="black"] .lt-border__edges { stroke: #000000; }

@media (forced-colors: active) {
  .lt-border { forced-color-adjust: none; }
  .lt-border__paper { display: none; }
}