/* ==========================================================================
   THE GOLD LINE - one system, every length
   Built 13 Sep 2026, by instruction. Loads LAST, after lffo-fixes-3.css, so
   it is the final word on what a gold rule is.

   WHAT THIS REPLACES. Seventy-eight separate gold-line declarations had grown
   across nine stylesheets: fixed pixel widths (26px, 30px, 34px, 46px, 96px,
   120px), a 38% underline that matched nothing, three different heights and
   as many gradients. Some drew in on scroll and then sat still for ever.
   None of them agreed with any other, and none of them agreed with the word
   they were under.

   THE RULE NOW HAS THREE PROPERTIES AND NOTHING ELSE:

   1. IT IS A LINE. A base gold, flat, always present. No mask, no ornament,
      no shape. Simple, because that is what was asked for and because a rule
      that needs a device is not a rule.

   2. A LIGHT TRAVELS INSIDE IT, AND NEVER STOPS. One soft core moving along
      the line's own length, on a loop with no end and no pause. The travel is
      ELEMENT-relative, not viewport-relative: every rule runs the light
      inside itself, so a 20px lead mark and a 900px divider each get a whole
      pass rather than a share of one sweep crossing the screen. The light is
      carried in background-image; the line itself is background-color, which
      background-position cannot move - so the line is always there and the
      light only brightens it. That distinction is the whole construction.

   3. ITS LENGTH COMES FROM ITS JOB. Set --rule-len and --rule-cycle per role
      below. Nothing is a bare pixel value chosen by eye any more, and an
      underline is never a percentage of a box: it is the width of the text,
      which is why the headings that carry one are shrink-wrapped to their own
      words. Resize the window or open it on a phone and the line follows the
      word, because it IS the word's width.

   SPEED IS SHARED, NOT DURATION. A long line takes longer than a short one,
   because one light moving over things moves at one speed. The cycles below
   are set roughly in proportion to the lengths they run along.
   ========================================================================== */

:root{
  /* the line at rest */
  --rule-base: rgba(201,163,78,.42);
  /* the travelling core and its shoulders */
  --rule-glow: rgba(247,228,180,.92);
  --rule-glow-soft: rgba(236,209,150,.40);
  --rule-cycle: 9s;

  /* ------------------------------------------------------------------------
     THE PROFILES. A rule is not a rectangle. Each of these is a mask drawn in
     a 100x3 box with preserveAspectRatio='none', so it stretches to whatever
     width the rule has been measured at while keeping its drawn thickness -
     which is why one shape serves a 37px lead mark and a 686px name without
     being redrawn. The solid section of each is about 2px of the 3px box, so
     the weight matches the flat 2px rules these replace; what is gained is
     the ends, which now leave rather than stop.

     EXIT drops away over its last third and is for a rule under left-aligned
     text: it starts full under the first letter, where the eye starts, and
     releases in the direction the line is read. SPINDLE is symmetric, swelling
     at the centre and vanishing at both ends, and is for anything centred or
     free-standing, which has no reading direction to answer to. SWELL is the
     same idea held back - ends at half weight rather than none - because a
     686px line that tapers to points reads as a decoration, and the name is
     not a decoration. NIB is thin at its outer end and thickest where it meets
     the words, so a lead mark points at the label it introduces instead of
     sitting beside it.
     ------------------------------------------------------------------------ */
  --rule-exit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 3' preserveAspectRatio='none'%3E%3Cpath d='M0 .5 L58 .5 C78 .5 90 1.28 100 1.5 C90 1.72 78 2.5 58 2.5 L0 2.5 Z' fill='%23fff'/%3E%3C/svg%3E");
  --rule-spindle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 3' preserveAspectRatio='none'%3E%3Cpath d='M0 1.5 C15 .45 35 .3 50 .3 C65 .3 85 .45 100 1.5 C85 2.55 65 2.7 50 2.7 C35 2.7 15 2.55 0 1.5 Z' fill='%23fff'/%3E%3C/svg%3E");
  --rule-swell: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 3' preserveAspectRatio='none'%3E%3Cpath d='M0 .85 C20 .42 40 .3 50 .3 C60 .3 80 .42 100 .85 L100 2.15 C80 2.58 60 2.7 50 2.7 C40 2.7 20 2.58 0 2.15 Z' fill='%23fff'/%3E%3C/svg%3E");
  --rule-nib: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 3' preserveAspectRatio='none'%3E%3Cpath d='M0 1.25 C30 .95 60 .55 100 .35 L100 2.65 C60 2.45 30 2.05 0 1.75 Z' fill='%23fff'/%3E%3C/svg%3E");

  /* ------------------------------------------------------------------------
     THE DRAWN STROKE - for the name, and for the longest dividers.

     WHY THE OTHER FOUR WERE NOT GOOD ENOUGH HERE. Every profile above closes
     its ends with a straight vertical segment: `L100 2.65` and the like. At a
     lead mark's 37px that is two pixels of flat edge and nobody will ever see
     it. Under the name, stretched across 686px and held still while the eye
     rests on the largest word on the site, it is a cut - the line stops
     rather than ends, and that is what reads as blunt.

     This one has no straight segments anywhere. Both ends are a single point
     where the upper and lower curves meet, so the silhouette closes to
     nothing instead of being sheared off. The swell sits at 42% rather than
     at the middle, which is what stops it reading as a symmetrical lens and
     starts it reading as a stroke that was made in a direction.

     AND THE HORIZONTAL EDGES ARE FEATHERED, which is the other half of
     "smooth". A mask is a hard shape: the browser antialiases its outline,
     but a 4px-tall band still meets the ground along two dead-straight
     horizontal edges. Filling the path with a vertical gradient - transparent
     at the very top and bottom of its own bounding box, opaque through the
     middle - feathers those two edges into the navy, so the stroke has no
     hard boundary in any direction. The viewBox is 1000 wide rather than 100
     so the curve keeps its precision when it is stretched to the width of a
     name.
     ------------------------------------------------------------------------ */
  /* THE FEATHER WAS EATING THE LINE. First version of this drawing put the
     ink between y=2.36 and y=7.64 of a ten-unit box - 53% of the height - and
     then feathered it from 0 to .34 and from .66 to 1 of ITS OWN bounding
     box. On a 4px rule that left about 0.7px fully opaque with the rest
     ramping to nothing, so the line rendered as a pale, uneven smear that
     read grey rather than gold and looked lumpy where the light crossed it.
     Smooth edges are not the same thing as no line.

     The ink now fills 78% of the box and the feather is pulled back to the
     outer 16% of it. At 3px that is roughly 1.6px of solid gold with about a
     third of a pixel of fade above and below - crisp enough to be a line,
     soft enough to have no hard boundary. The silhouette is unchanged: no
     straight segment anywhere, both ends closing to a single point, the swell
     at 42% so it reads as a stroke made in a direction rather than a lens. */
  /* THE ENDS, REFINED. The drawing above this note used to reach full
     thickness only at 42% of its length and start losing it again
     immediately: the fade WAS the line, so the rule read as a lens with a
     bulge rather than as a line that ends. What was wanted is the opposite
     proportion - a line that is a line for most of its length and then leaves
     over a short, controlled distance.

     It now holds full thickness across the middle 84%, from 8% to 92%, and
     turns to a point over the outer 8% at each end. The first attempt used
     15% of geometry plus a 12% opacity fade, and magnified in the browser the
     two compounded: the visible line was roughly 60% of the rule's width,
     with a long thin whisker at each tip. A rule whose whole point is to be
     the width of the name cannot afford to look 40% shorter than it is. The
     taper is also front-loaded now - the first control point lifts steeply
     off the tip instead of running along it - so the line reaches full weight
     quickly rather than creeping up to it. The control points on
     either side of each join sit at the same height as the flat run, so the
     curve leaves the straight horizontally - no kink where the taper meets
     the body, which is where a shape like this usually gives itself away.

     TWO FADES, NOT ONE, and they do different jobs. The vertical gradient
     softens the long top and bottom edges so the rule has no hard boundary
     against the navy. The horizontal one, applied as a mask over the whole
     shape, takes the last 12% at each end down in opacity as well as in
     thickness - because geometry alone ends in a needle point, and a point
     that is fully opaque until it vanishes still reads as a tip rather than
     as a fade. Thickness and opacity running out together is what makes an
     end look like it was lifted rather than cut. */
  --rule-vector: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 10' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='v' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='.16' stop-color='%23fff' stop-opacity='1'/%3E%3Cstop offset='.84' stop-color='%23fff' stop-opacity='1'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='h' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='.06' stop-color='%23fff' stop-opacity='1'/%3E%3Cstop offset='.94' stop-color='%23fff' stop-opacity='1'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E%3Cmask id='ends' maskUnits='userSpaceOnUse' x='0' y='0' width='1000' height='10'%3E%3Crect x='0' y='0' width='1000' height='10' fill='url(%23h)'/%3E%3C/mask%3E%3C/defs%3E%3Cpath mask='url(%23ends)' d='M0 5 C22 2.60 55 1.10 80 1.10 L920 1.10 C945 1.10 978 2.60 1000 5 C978 7.40 945 8.90 920 8.90 L80 8.90 C55 8.90 22 7.40 0 5 Z' fill='url(%23v)'/%3E%3C/svg%3E");

  /* ------------------------------------------------------------------------
     THE LIGHT, IN THREE CHARACTERS. One gradient for every length was the
     wrong answer: a core tight enough to read as a point on a 37px mark is a
     hard edge crossing a 686px line, and a wash broad enough to suit the name
     never resolves on a short one. The proportions below are of the 250%
     image, so each is a fraction of its OWN rule's length.
     ------------------------------------------------------------------------ */
  /* SOFTENED AND WIDENED (13 Sep 2026). The peaks came down by roughly a
     third - .92 to .60, .72 to .46, .95 to .68 - and each band was widened,
     which does more for subtlety than the opacity does: a narrow bright core
     is a glint travelling along a line, and a wide dim one is the line
     brightening as something passes over it. The second is what this is meant
     to be. Widening also means more of the rule is lit at any moment, so the
     light is easier to notice while being less bright, which is the whole
     trick.

     The percentages are of the 250% image: a band from 34% to 66% is 32% of
     2.5 rule widths, so it covers about four fifths of the rule at its
     widest. */
  /* a soft core - underlines */
  --rule-light-core: linear-gradient(90deg,
    rgba(247,228,180,0) 34%, rgba(236,209,150,.26) 42%,
    rgba(247,228,180,.60) 50%,
    rgba(236,209,150,.26) 58%, rgba(247,228,180,0) 66%);
  /* a broad pass - long lines, where a point would read as a scanner */
  --rule-light-wash: linear-gradient(90deg,
    rgba(247,228,180,0) 20%, rgba(236,209,150,.20) 34%,
    rgba(247,228,180,.46) 50%,
    rgba(236,209,150,.20) 66%, rgba(247,228,180,0) 80%);
  /* a glint - lead marks, which are too small for anything gradual */
  --rule-light-glint: linear-gradient(90deg,
    rgba(247,228,180,0) 38%, rgba(236,209,150,.28) 45%,
    rgba(247,228,180,.68) 50%,
    rgba(236,209,150,.28) 55%, rgba(247,228,180,0) 62%);
}

/* The light. One gradient, transparent at both ends so it reads as a core
   rather than a band with edges, sized wider than the element so the core can
   start and finish clear of it. 130% to -30% carries it fully across. */
/* THE TRAVEL WAS TOO SHORT TO WATCH, AND THE ARITHMETIC SAYS WHY.

   The image is 250% of the rule, so a background-position of p resolves to
   p x (W - I) = p x -1.5W. The bright core sits at the middle of the image,
   1.25W into it, so it appears on screen at (p x -1.5W) + 1.25W. Running p
   from 130% to -30% swept the core from -0.7W to +1.7W: two and a half rule
   widths of travel, of which only the middle W is over the rule at all. The
   light was off the line for 58% of every cycle - it was not subtle, it was
   absent, and then it crossed quickly.

   100% to 0% sweeps the core from -0.25W to +1.25W instead. One and a half
   widths of travel, of which a full W is on the line: the light is visible
   for two thirds of the cycle rather than for two fifths, it enters and
   leaves from just off each end, and because the image still covers the whole
   rule at both extremes nothing ever shows an edge. The durations are
   untouched, so the light also moves more slowly for the same cycle - which
   is the other half of what was asked for. */
@keyframes lffoRuleLight{
  from { background-position: 100% 0; }
  to   { background-position: 0% 0; }
}

/* The shared paint. Applied by role below rather than by a class, because the
   markup already exists and should not have to change to be improved. */
.gilded-head::after,
.eyebrow::before,
.pres-label::before,
.k-card .k-cat::before,
.lg-head .eyebrow-line::before,
.tree-band .eyebrow::before,
.tree-band .eyebrow::after,
.hero-monument::after,
body.lffo-legal .the-title::after,
body.lffo-legal .the-content h2::before,
.site-footer::before,
.footer-brand p::before{
  background-color: var(--rule-base);
  background-image: var(--rule-light, var(--rule-light-core));
  background-size: 250% 100%;
  background-position: 100% 0;
  background-repeat: no-repeat;
  animation: lffoRuleLight var(--rule-cycle) linear infinite;

  /* The profile. --rule-shape is set per role below; the default is the
     symmetric spindle, so anything that gains a gold rule later and says
     nothing about its shape still gets a drawn line rather than a bar.
     mask-size 100% 100% with preserveAspectRatio='none' in the SVG is what
     lets one drawing stretch to any measured width. */
  -webkit-mask-image: var(--rule-shape, var(--rule-spindle));
          mask-image: var(--rule-shape, var(--rule-spindle));
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
}

/* --------------------------------------------------------------------------
   ROLE 1 - THE UNDERLINE. It is the width of the text, at every viewport.

   .gilded-head is already display:inline-block, so its box IS its text - it
   shrink-wraps to the longest line of the heading and re-wraps on its own
   when the window narrows or a phone turns. The underline was set to
   clamp(2.2em, 38%, 7em) of that box, a fraction that corresponded to nothing
   in the sentence above it. At 100% it is the heading, exactly, and it stays
   exact without a single measurement being taken.
   -------------------------------------------------------------------------- */
.gilded-head::after,
.reveal.in .gilded-head::after,
.fx.in .gilded-head::after,
.in .gilded-head::after,
.in.gilded-head::after{
  --rule-cycle: 10s;
  --rule-shape: var(--rule-exit);
  --rule-light: var(--rule-light-core);
  /* --rule-w is the widest RENDERED line, measured by js/lffo-rules.js,
     because no CSS length means "the longest line after wrapping". The 100%
     fallback is the box, which is already exact for the single-line headings
     that are the majority - so with JS off the rules are right everywhere
     except the wrapped ones, where they overhang by a few percent. */
  width: var(--rule-w, 100%);
  /* 3px of box carrying about 2px of solid ink: the same weight the flat
     rules had, with the extra height spent on the taper rather than on the
     line. border-radius is gone - the mask draws the ends now. */
  height: 3px;

  /* THE RULE IS NO LONGER GATED ON THE SCROLL REVEAL, AND THAT IS A FIX, NOT
     A SIMPLIFICATION. The old base set width:0 and only .reveal.in / .fx.in /
     .in brought it back, so a heading whose wrapper never received .in
     carried a gold underline that had never once been drawn. Measured on the
     home page: "Upcoming events & seminars" and "Latest from the Knowledge
     Hub" sit in a plain .section-head with no .reveal class at all, so
     nothing could ever add .in to them - two underlines, invisible since the
     day they were written. "Anchored in Luxembourg, growing across Europe"
     has .reveal but was not receiving .in either.

     Gating a structural mark on an entrance was the mistake. The line belongs
     to the heading, so it is drawn with the heading, and the light travelling
     inside it is the only thing that moves - which is what was asked for. The
     width transition goes with the gate: an underline that animates its
     length every time a custom property changes also re-animates on every
     resize, which is a second motion nobody asked for. */
  transition: none;
}
/* Centred headings keep their centred origin; the width is the same. */
.section-head.center .gilded-head::after,
[style*="text-align:center"] .gilded-head::after{
  left: 50%;
  transform: translateX(-50%);
  /* An exit stroke answers a reading direction. A centred heading has none,
     so its rule is symmetric and leaves at both ends instead. */
  --rule-shape: var(--rule-spindle);

  /* THE PAINT HAS TO BE RESTATED HERE, AND IT IS NOT REDUNDANT.
     home.css gives centred headings their own rule at .section-head.center
     .gilded-head::after - three classes to this file's one - and it sets the
     `background` SHORTHAND. A shorthand resets every longhand it does not
     name, so it was wiping background-color to transparent and
     background-size to auto, leaving a static gold gradient stretched across
     the whole rule. Measured before this block existed: the animation was
     running and nothing was moving, because there was nothing left for
     background-position to move. Centred headings were the only rules on the
     site with no travelling light, and it did not show up in a spot check
     because the line still looked gold and still looked right. */
  background-color: var(--rule-base);
  background-image: var(--rule-light, var(--rule-light-core));
  background-size: 250% 100%;
  background-repeat: no-repeat;
  animation: lffoRuleLight var(--rule-cycle) linear infinite;
}

/* --------------------------------------------------------------------------
   ROLE 2 - THE LEAD MARK. The short rule that opens an eyebrow. It is set in
   em so it scales with the label it belongs to instead of holding a pixel
   width that was right at one size only. A short line gets a short cycle, so
   the light crosses it at the same speed it crosses everything else.
   -------------------------------------------------------------------------- */
.eyebrow::before,
.pres-label::before,
.k-card .k-cat::before,
.lg-head .eyebrow-line::before,
.tree-band .eyebrow::before,
.tree-band .eyebrow::after,
body.lffo-legal .the-content h2::before{
  --rule-cycle: 5s;
  --rule-shape: var(--rule-nib);
  --rule-light: var(--rule-light-glint);
  /* 1px could not carry a profile at all. 3px can, and the nib spends most of
     it at the end nearest the words, so the mark still reads as light as the
     hairline it replaces where it starts. */
  height: 3px;
}
.eyebrow::before,
.pres-label::before,
.k-card .k-cat::before,
.tree-band .eyebrow::before,
.tree-band .eyebrow::after{
  width: 2.2em;
}
.lg-head .eyebrow-line::before{ width: 2.6em; }
/* The tree band puts a mark on each side of its label. A nib points at the
   words, so the one that follows them has to point the other way. */
.tree-band .eyebrow::after{ transform: scaleX(-1); }
/* Above its heading rather than before it, so it takes the exit stroke the
   underlines use and not the nib. */
body.lffo-legal .the-content h2::before{ width: 3.4em; --rule-shape: var(--rule-exit); }

/* The lead marks were gated on the same reveal and are ungated for the same
   reason: an eyebrow in a section that never gets .in had no mark at all.
   Stated once, for every state. */
.reveal.in .eyebrow::before,
.fx.in .eyebrow::before,
.in .eyebrow::before{ width: 2.2em; transition: none; }

/* --------------------------------------------------------------------------
   ROLE 3 - THE TITLE RULE on the legal pages. It sits under a page title, so
   it is an underline and takes the title's width, not a 96px guess.
   -------------------------------------------------------------------------- */
body.lffo-legal .the-title{ width: fit-content; }
body.lffo-legal .the-title::after{
  --rule-cycle: 11s;
  --rule-shape: var(--rule-exit);
  --rule-light: var(--rule-light-core);
  width: var(--rule-w, 100%);
  height: 3px;
}

/* --------------------------------------------------------------------------
   ROLE 4 - THE DIVIDER. The long ones, at the head of the footer and under
   the footer brand. Longest line, longest cycle.
   -------------------------------------------------------------------------- */
.site-footer::before{
  --rule-cycle: 16s;
  --rule-shape: var(--rule-vector);
  --rule-light: var(--rule-light-wash);
  height: 4px;
  border-radius: 0;
}

/* THE FOOTER DIVIDER ON A PHONE.

   style.css generates this pseudo-element only below 820px - at desktop
   widths there is no footer rule at all - and it sizes it at
   min(70%, 320px), which on a 390px phone is 273px. Against a full-width
   footer that read as a stub: not long enough to divide anything, and short
   enough that the spindle's swell had nowhere to develop, so it came out
   blunt at both ends. It is the only rule on the site whose length was set as
   a fraction of its CONTAINER rather than by what it is marking, and 70% was
   the wrong fraction.

   It now runs to 88% of the footer, capped so it cannot sprawl on a tablet,
   and it takes the drawn stroke rather than the spindle - at this length the
   pointed ends have room to be seen, which is what makes it read as a rule
   that was drawn rather than a bar that was cut. */
@media (max-width: 820px){
  .site-footer::before{
    width: min(88%, 460px);
  }
}
.footer-brand p::before{
  --rule-cycle: 7s;
  --rule-shape: var(--rule-spindle);
  height: 3px;
  border-radius: 0;
}

/* --------------------------------------------------------------------------
   ROLE 5 - THE HERO. The name is the largest word on the site, so its rule is
   the widest underline on the site: the width of the name itself.

   This replaces a 120px bar, then a 220px lens, neither of which had any
   relationship to the thing above them - which is exactly what was wrong with
   them. Shrink-wrapping .hero-monument to its own longest row makes the rule
   the name's width by construction, at any window size, on any phone, in the
   same way every other underline on the site now works. It also sits closer:
   a rule that belongs to a word sits under the word, not in the space below
   it.
   -------------------------------------------------------------------------- */
@media (min-width: 1081px){
  .hero-monument{
    width: fit-content;
    margin-inline: auto;
  }
  .hero-monument::after{
    --rule-cycle: 14s;
    /* Not the full spindle. At 686px a line that tapers to two points reads as
       a decoration, and the name is not a decoration - the swell holds its
       ends at half weight so the rule stays a rule and only softens. The wash
       goes with it: a tight core crossing a line this long reads as a scanner
       passing over it. */
    /* The drawn stroke, not the swell: see --rule-vector. Both ends close
       to a point and the horizontal edges are feathered, so nothing about
       this line has a cut in it. 4px rather than 3 because the feather needs
       somewhere to happen - the ink is unchanged, the extra pixel is the
       fade. */
    --rule-shape: var(--rule-vector);
    --rule-light: var(--rule-light-wash);
    /* .42 is right for a rule sitting on paper. On the hero's navy, under a
       mark drawn in a gold hairline, it fell back to grey. .58 reads as the
       same gold as the letters above it without becoming a bar. */
    --rule-base: rgba(201,163,78,.58);
    width: var(--rule-w, 100%);
    height: 3px;
    margin-top: clamp(10px, 1.4vh, 18px);
  }
}

/* --------------------------------------------------------------------------
   PARTNERS KEEPS ITS OWN RULE, AND KEEPS IT BLUE.
   body.page-id-40 deliberately took the gold out of its headings - that page
   already carries gold in its buttons and its eyebrows, and the rule under
   every heading was the loudest thing on it. That decision stands: this file
   gives it the same travelling light in its own colour rather than dragging
   it back to gold.
   -------------------------------------------------------------------------- */
body.page-id-40 .gilded-head::after{
  width: var(--rule-w, 100%) !important;
  background-color: rgba(124,198,226,.34) !important;
  background-image: linear-gradient(90deg,
    rgba(214,238,247,0) 38%,
    rgba(214,238,247,.34) 45%,
    rgba(214,238,247,.92) 50%,
    rgba(214,238,247,.34) 55%,
    rgba(214,238,247,0) 62%) !important;
  background-size: 250% 100% !important;
  background-repeat: no-repeat !important;
  animation: lffoRuleLight 10s linear infinite !important;
}

/* --------------------------------------------------------------------------
   REDUCED MOTION. The light is the only thing that moves, so it is the only
   thing that stops. The lines stay exactly where they are, at a slightly
   stronger constant gold so that losing the travelling core costs them no
   presence.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .gilded-head::after,
  .eyebrow::before,
  .pres-label::before,
  .k-card .k-cat::before,
  .lg-head .eyebrow-line::before,
  .tree-band .eyebrow::before,
  .tree-band .eyebrow::after,
  .hero-monument::after,
  body.lffo-legal .the-title::after,
  body.lffo-legal .the-content h2::before,
  .site-footer::before,
  .footer-brand p::before,
  body.page-id-40 .gilded-head::after{
    background-image: none !important;
    background-color: rgba(201,163,78,.58);
    animation: none !important;
  }
  body.page-id-40 .gilded-head::after{
    background-color: rgba(124,198,226,.55) !important;
  }
}


/* ==========================================================================
   THE FOOTER BRAND, AS ONE LOCKUP

   Both footer marks exist only below 820px - style.css generates them inside
   @media (max-width:820px), so at desktop widths the footer has no gold rule
   at all. Everything here is therefore mobile.

   WHAT WAS WRONG. The block was three unrelated things stacked: a logo, then a
   46px gold stub floating under it at no particular width, then a paragraph on
   its own measure. The stub belonged to nothing - it was not the width of the
   logo above it or of the text below it - and a second tapered stroke sat a
   few pixels higher as the footer's top seam, so two decorative gold marks
   competed inside one small block.

   WHAT IT IS NOW. The rule is the WIDTH OF THE LOGO, which is the same idea
   the hero uses at the other end of the page: the name, then a rule the width
   of the name, then the statement. One custom property drives the logo and
   the rule together, so they cannot drift apart at any viewport - and because
   the rule now belongs to the mark above it, the paragraph below reads as the
   third line of one lockup rather than as a separate paragraph that happens
   to follow. The spacing is tightened on both sides of the rule to say so,
   and the text is brought onto the same measure.

   The top seam stops being a second mark and becomes what it was called in
   the stylesheet all along - a seam. Full width, edge to edge, tapering out
   at the screen edges, on the slowest cycle on the site. A boundary, not an
   ornament.
   ========================================================================== */
@media (max-width: 820px){
  .footer-brand{
    /* one value, two elements: the logo and the rule under it */
    --foot-mark: min(78%, 252px);
  }
  .footer-brand .foot-logo{ width: var(--foot-mark); }

  .footer-brand p{
    margin-top: 13px;
    padding-top: 14px;
    max-width: min(92%, 296px);
  }
  .footer-brand p::before{
    --rule-cycle: 9s;
    --rule-shape: var(--rule-vector);
    --rule-light: var(--rule-light-core);
    /* --foot-mark-px is the logo's measured width, written by
       js/lffo-rules.js. The percentage below it is the fallback and is NOT
       equivalent - see that file for why 78% means two different numbers
       here - but with JS off it is closer than anything else CSS can say. */
    width: var(--foot-mark-px, var(--foot-mark));
    height: 3px;
    border-radius: 0;
  }

  .site-footer::before{
    --rule-cycle: 20s;
    --rule-shape: var(--rule-vector);
    --rule-light: var(--rule-light-wash);
    left: 0;
    transform: none;
    width: 100%;
    height: 2px;
    border-radius: 0;
  }
}


/* --------------------------------------------------------------------------
   THE LEAD MARK'S LIGHT, MADE TO GLIDE (16 Sep 2026)

   Reported: the light on the short mark before an eyebrow did not look smooth.
   Measured why. The mark is 2.2em - about 25px - by 3px, and the light crossed
   it by animating background-position linearly over 5s. The core travels one
   and a half rule widths per cycle: roughly 38px in 5 seconds, 7.6px a second.
   Browsers snap background-position to whole device pixels, so the light did
   not glide, it stepped - one pixel every ~130ms, which on a 3px line reads as
   a twitch rather than a pass. And being linear with no rest, it arrived at
   full speed, left at full speed, and restarted the instant it finished.

   The light now moves by animating the gradient's own STOP POSITION through a
   registered custom property. Stop positions are resolved at sub-pixel
   precision, so the core travels continuously across the mark. The pass is
   eased - it gathers, crosses, settles - and then rests for two fifths of the
   cycle with the light fully off the line, so the loop restarts where nobody
   can see it.

   Same colours as --rule-light-glint, same peak, same 3px nib, same subtlety.
   Only the motion changes. A browser without @property cannot interpolate the
   property, so the light simply stays off the line - a still gold mark, never
   a jumping one.
   -------------------------------------------------------------------------- */
@property --lffo-glint {
  syntax: '<percentage>';
  inherits: false;
  initial-value: -40%;
}

@keyframes lffoLeadGlint {
  0%   { --lffo-glint: -40%;  animation-timing-function: cubic-bezier(.42, 0, .28, 1); }
  60%  { --lffo-glint: 140%; }
  100% { --lffo-glint: 140%; }
}

.eyebrow::before,
.pres-label::before,
.k-card .k-cat::before,
.lg-head .eyebrow-line::before,
.tree-band .eyebrow::before,
.tree-band .eyebrow::after,
body.lffo-legal .the-content h2::before {
  background-image: linear-gradient(90deg,
    rgba(247,228,180,0)   calc(var(--lffo-glint) - 34%),
    rgba(236,209,150,.28) calc(var(--lffo-glint) - 14%),
    rgba(247,228,180,.68) var(--lffo-glint),
    rgba(236,209,150,.28) calc(var(--lffo-glint) + 14%),
    rgba(247,228,180,0)   calc(var(--lffo-glint) + 34%));
  background-size: 100% 100%;
  background-position: 0 0;
  animation: lffoLeadGlint 5.4s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .eyebrow::before,
  .pres-label::before,
  .k-card .k-cat::before,
  .lg-head .eyebrow-line::before,
  .tree-band .eyebrow::before,
  .tree-band .eyebrow::after,
  body.lffo-legal .the-content h2::before {
    background-image: none !important;
    animation: none !important;
  }
}