/* ===================================================================
   THE REGALIA LAYER (v5.3)
   -------------------------------------------------------------------
   Light that travels, and figures that draw themselves.

   Two things the site asked for and did not have. The first is a
   single, shared treatment for a light running the border of a shape —
   applied to cards, to photographs, to plates, to the crest — rather
   than the three separate one-off implementations it had. The second is
   a set of drawn figures: bars, rings, ladders and comparisons that
   animate from nothing as they arrive, so a number on this site is
   something you watch being measured rather than something printed.

   Everything yields to the Ornament and Motion settings, and to
   prefers-reduced-motion. With the file removed the page still reads.
   =================================================================== */

@property --rg-angle{syntax:'<angle>';initial-value:0deg;inherits:false;}

/* ===================================================================
   1. THE TRAVELLING LIGHT
   A conic gradient rotated behind the element, masked to the border
   box, so a single bright arc runs the perimeter. One element, one
   compositor layer, no JavaScript.
   =================================================================== */
.rg-light{position:relative;isolation:isolate;}
.rg-light::before{
  content:"";position:absolute;inset:-1.5px;z-index:-1;border-radius:inherit;
  padding:1.5px;pointer-events:none;
  background:conic-gradient(from var(--rg-angle),
    transparent 0deg 186deg,
    rgba(var(--lv-g,198,161,91),.05) 214deg,
    rgba(var(--lv-gb,233,206,138),.85) 248deg,
    rgb(var(--lv-gl,255,246,223)) 262deg,
    rgba(var(--lv-gb,233,206,138),.85) 276deg,
    rgba(var(--lv-g,198,161,91),.05) 306deg,
    transparent 336deg 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  opacity:0;transition:opacity .6s ease;
  animation:rg-orbit var(--rg-dur,7s) linear infinite;
  animation-delay:var(--rg-delay,0s);}
.rg-light.is-lit::before,.rg-light:hover::before,.rg-light:focus-within::before{opacity:1;}
/* On a photograph the light is brighter and the arc narrower — a frame
   catching a raking light rather than a card glowing. */
.rg-light.on-photo::before{
  background:conic-gradient(from var(--rg-angle),
    transparent 0deg 200deg,rgba(var(--lv-gb,233,206,138),.5) 236deg,
    rgb(var(--lv-gl,255,246,223)) 256deg,rgba(var(--lv-gb,233,206,138),.5) 276deg,
    transparent 312deg 360deg);
  padding:2px;}
@keyframes rg-orbit{to{--rg-angle:360deg;}}
@supports not (background:conic-gradient(from 0deg,red,blue)){.rg-light::before{display:none;}}
html[data-pc-ornament="none"] .rg-light::before,
html[data-pc-motion="reduced"] .rg-light::before{display:none;}
@media (prefers-reduced-motion:reduce){
  .rg-light::before{animation:none;opacity:.5;}
}

/* A quieter cousin: a light that runs once when the shape arrives and
   then rests, for things that should be announced rather than lit. */
.rg-sweep{position:relative;overflow:hidden;isolation:isolate;}
.rg-sweep::after{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;
  background:linear-gradient(104deg,transparent 40%,rgba(var(--lv-gl,255,246,223),.42) 50%,transparent 60%);
  transform:translateX(-140%);}
.rg-sweep.is-lit::after{animation:rg-pass 1.4s cubic-bezier(.3,.7,.3,1) .25s 1 both;}
@keyframes rg-pass{to{transform:translateX(140%);}}
@media (prefers-reduced-motion:reduce){.rg-sweep::after{display:none;}}

/* ===================================================================
   2. THE DRAWN FIGURES
   =================================================================== */

/* ---- The measured bar --------------------------------------------
   A horizontal bar that fills from nothing to its value as it arrives,
   with the figure counting up beside it. The value is written in the
   markup as --v (0..100), so the bar is readable with CSS off. */
.rg-bars{display:grid;gap:18px;margin-top:28px;}
.rg-bar{display:grid;grid-template-columns:1fr auto;gap:6px 14px;align-items:baseline;}
.rg-bar-k{font-family:var(--font-label);font-size:.9rem;color:var(--navy);}
.rg-bar-v{font-family:var(--font-label);font-size:1.05rem;
  color:rgb(var(--lv-gt,124,94,40));font-variant-numeric:tabular-nums;}
.rg-bar-rail{grid-column:1 / -1;height:9px;border-radius:99px;position:relative;overflow:hidden;
  background:rgba(var(--lv-g,198,161,91),.16);
  box-shadow:inset 0 1px 2px rgba(var(--lv-cfd2,42,28,16),.22);}
.rg-bar-fill{position:absolute;inset:0 auto 0 0;width:calc(var(--v,0) * 1%);
  border-radius:99px;transform-origin:left center;transform:scaleX(0);
  background:linear-gradient(90deg,rgb(var(--lv-gd,156,122,60)),rgb(var(--lv-gb,233,206,138)));
  box-shadow:0 0 14px -3px rgba(var(--lv-gb,233,206,138),.7);
  transition:transform 1.5s cubic-bezier(.16,.8,.24,1);}
[dir="rtl"] .rg-bar-fill{inset:0 0 0 auto;transform-origin:right center;}
.rg-bar.is-lit .rg-bar-fill{transform:scaleX(1);}
/* the moving highlight inside the bar, so a filled bar is not a
   printed rectangle */
.rg-bar-fill::after{content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.4) 50%,transparent 70%);
  background-size:240% 100%;animation:rg-bar-sheen 4.6s ease-in-out infinite;}
@keyframes rg-bar-sheen{0%,100%{background-position:200% 0;}55%{background-position:-60% 0;}}
@media (prefers-reduced-motion:reduce){
  .rg-bar-fill{transition:none;transform:scaleX(1);}
  .rg-bar-fill::after{animation:none;}
}

/* ---- The measured ring --------------------------------------------
   A dial that draws its arc as it arrives. --v is 0..100. */
.rg-rings{display:grid;gap:20px;margin-top:30px;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));}
.rg-ring{text-align:center;position:relative;}
.rg-ring svg{width:100%;max-width:132px;height:auto;transform:rotate(-90deg);}
.rg-ring .trk{fill:none;stroke:rgba(var(--lv-g,198,161,91),.18);stroke-width:7;}
.rg-ring .arc{fill:none;stroke:url(#rg-grad);stroke-width:7;stroke-linecap:round;
  stroke-dasharray:283;stroke-dashoffset:283;
  transition:stroke-dashoffset 1.7s cubic-bezier(.16,.8,.24,1);}
.rg-ring.is-lit .arc{stroke-dashoffset:calc(283 - (283 * var(--v,0) / 100));}
.rg-ring-n{position:absolute;top:38%;left:0;right:0;transform:translateY(-50%);
  font-family:var(--font-label);font-size:1.5rem;color:var(--navy);
  font-variant-numeric:tabular-nums;}
.rg-ring-k{display:block;margin-top:10px;font-family:var(--font-label);
  font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;
  color:rgb(var(--lv-gt,124,94,40));}
.rg-ring-s{display:block;margin-top:4px;font-size:.78rem;color:var(--ink-soft);}
@media (prefers-reduced-motion:reduce){
  .rg-ring .arc{transition:none;stroke-dashoffset:calc(283 - (283 * var(--v,0) / 100));}
}

/* ---- The comparison ladder ----------------------------------------
   Two values set against each other on one axis, for the places where
   the point is a relationship rather than a number. */
.rg-cmp{display:grid;gap:14px;margin-top:26px;}
.rg-cmp-row{display:grid;grid-template-columns:minmax(96px,auto) 1fr;gap:14px;align-items:center;}
.rg-cmp-k{font-size:.84rem;color:var(--ink-soft);text-align:end;}
.rg-cmp-track{position:relative;height:34px;border-radius:8px;overflow:hidden;
  background:rgba(var(--lv-g,198,161,91),.10);}
.rg-cmp-a,.rg-cmp-b{position:absolute;inset-block:0;inset-inline-start:0;
  display:flex;align-items:center;padding-inline:12px;font-size:.78rem;
  transform-origin:left center;transform:scaleX(0);
  transition:transform 1.4s cubic-bezier(.16,.8,.24,1);}
[dir="rtl"] .rg-cmp-a,[dir="rtl"] .rg-cmp-b{transform-origin:right center;}
.rg-cmp-a{width:calc(var(--a,0) * 1%);
  background:linear-gradient(90deg,rgb(var(--lv-cf,59,42,29)),rgb(var(--lv-cfs,59,42,29)));color:#FFF6E4;}
.rg-cmp-b{width:calc(var(--b,0) * 1%);
  background:linear-gradient(90deg,rgba(var(--lv-gd,156,122,60),.35),rgba(var(--lv-gb,233,206,138),.5));
  color:var(--navy);transition-delay:.14s;}
.rg-cmp-row.is-lit .rg-cmp-a,.rg-cmp-row.is-lit .rg-cmp-b{transform:scaleX(1);}

/* ---- The figure plate ---------------------------------------------
   The frame the figures sit in: an engraved plate with a travelling
   light around it and a ruled head. */
.rg-plate{position:relative;padding:34px 32px 30px;border-radius:var(--pr-r-lg,22px);
  background:linear-gradient(168deg,rgb(var(--lv-p1,255,253,249)),rgb(var(--lv-p4,247,240,226)));
  border:1px solid rgba(var(--lv-g,198,161,91),.28);
  box-shadow:var(--pr-shadow-soft);}
.rg-plate-head{display:flex;align-items:baseline;gap:14px;margin-bottom:6px;}
.rg-plate-k{font-family:var(--font-label);font-size:.68rem;letter-spacing:.22em;
  text-transform:uppercase;color:rgb(var(--lv-gt,124,94,40));}
.rg-plate-head::after{content:"";flex:1;height:1px;
  background:linear-gradient(90deg,rgba(var(--lv-g,198,161,91),.5),transparent);}
[dir="rtl"] .rg-plate-head::after{background:linear-gradient(270deg,rgba(var(--lv-g,198,161,91),.5),transparent);}
.rg-plate-note{margin:20px 0 0;font-size:.82rem;color:var(--ink-soft);}
@media (max-width:560px){.rg-plate{padding:26px 20px 24px;}}

/* ---- The band the figures live in --------------------------------- */
.rg-figures{background:var(--surface-tertiary-bg,#FCFAF6);position:relative;}
.rg-figures::before{content:"";position:absolute;inset-inline:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(var(--lv-g,198,161,91),.45),transparent);}
.rg-lede{max-width:680px;color:var(--ink-soft);margin:14px 0 0;font-size:.98rem;
  text-align:justify;text-justify:inter-word;hyphens:auto;}

/* ===================================================================
   6. THE ADHKĀR CENTRE, LIT
   -------------------------------------------------------------------
   The Centre was the most static room in the house: a working
   instrument rendered as plain cards on a plain ground. Nothing here
   changes what it does — the counter, the wird, the search and the
   session all behave exactly as before. What changes is that the
   surfaces now hold light, and the panels announce themselves with a
   ruled head rather than beginning abruptly.
   =================================================================== */

/* The travelling light, extended to the app's own cards. Same arc, same
   mask, same staggering — regalia.js now keeps watching the DOM, so the
   panels the app writes after load are lit like everything else. */
.adk-priority-card,.adk-wird-card,.adk-quick-mode,.adk-sd-stat,
.adk-progress-stat,.adk-achv-badge,.adk-ctr-dial{position:relative;isolation:isolate;}
.adk-priority-card::before,.adk-wird-card::before,.adk-quick-mode::before,
.adk-sd-stat::before,.adk-progress-stat::before,.adk-achv-badge::before,
.adk-ctr-dial::before{
  content:"";position:absolute;inset:-1.5px;z-index:-1;border-radius:inherit;
  padding:1.5px;pointer-events:none;
  background:conic-gradient(from var(--rg-angle),
    transparent 0deg 190deg,
    rgba(var(--lv-g,198,161,91),.05) 216deg,
    rgba(var(--lv-gb,233,206,138),.80) 248deg,
    rgb(var(--lv-gl,255,246,223)) 262deg,
    rgba(var(--lv-gb,233,206,138),.80) 276deg,
    rgba(var(--lv-g,198,161,91),.05) 304deg,
    transparent 334deg 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  opacity:0;transition:opacity .6s ease;
  animation:rg-orbit var(--rg-dur,7.5s) linear infinite;
  animation-delay:var(--rg-delay,0s);}
.adk-priority-card.is-lit::before,.adk-wird-card.is-lit::before,
.adk-quick-mode.is-lit::before,.adk-sd-stat.is-lit::before,
.adk-progress-stat.is-lit::before,.adk-achv-badge.is-lit::before,
.adk-ctr-dial.is-lit::before{opacity:.72;}
.adk-priority-card:hover::before,.adk-wird-card:hover::before,
.adk-quick-mode:hover::before,.adk-sd-stat:hover::before,
.adk-progress-stat:hover::before,.adk-achv-badge:hover::before,
.adk-priority-card:focus-within::before,.adk-wird-card:focus-within::before,
.adk-quick-mode:focus-within::before,.adk-ctr-dial:hover::before{opacity:1;}
@supports not (background:conic-gradient(from 0deg,red,blue)){
  .adk-priority-card::before,.adk-wird-card::before,.adk-quick-mode::before,
  .adk-sd-stat::before,.adk-progress-stat::before,.adk-achv-badge::before,
  .adk-ctr-dial::before{display:none;}
}
html[data-pc-ornament="none"] .adk-priority-card::before,
html[data-pc-ornament="none"] .adk-wird-card::before,
html[data-pc-ornament="none"] .adk-quick-mode::before,
html[data-pc-ornament="none"] .adk-sd-stat::before,
html[data-pc-ornament="none"] .adk-progress-stat::before,
html[data-pc-ornament="none"] .adk-achv-badge::before,
html[data-pc-ornament="none"] .adk-ctr-dial::before,
html[data-pc-motion="reduced"] .adk-priority-card::before,
html[data-pc-motion="reduced"] .adk-wird-card::before,
html[data-pc-motion="reduced"] .adk-quick-mode::before,
html[data-pc-motion="reduced"] .adk-sd-stat::before,
html[data-pc-motion="reduced"] .adk-progress-stat::before,
html[data-pc-motion="reduced"] .adk-achv-badge::before,
html[data-pc-motion="reduced"] .adk-ctr-dial::before{display:none;}
@media (prefers-reduced-motion:reduce){
  .adk-priority-card::before,.adk-wird-card::before,.adk-quick-mode::before,
  .adk-sd-stat::before,.adk-progress-stat::before,.adk-achv-badge::before,
  .adk-ctr-dial::before{animation:none;opacity:.45;}
}

/* Each panel opens on a ruled head that draws itself, the same device
   the letterhead uses, so the Centre reads as a sequence of chapters
   rather than one long scroll of boxes. */
.adk-priority-head,.adk-progress-head,.adk-wird-head,.adk-section-head{
  position:relative;}
.adk-priority-head::after,.adk-progress-head::after,
.adk-wird-head::after,.adk-section-head::after{
  content:"";position:absolute;inset-inline-start:0;bottom:-9px;height:1px;width:100%;
  background:linear-gradient(90deg,rgba(var(--lv-g,198,161,91),.55),
    rgba(var(--lv-g,198,161,91),.14) 46%,transparent);
  transform:scaleX(0);transform-origin:left center;
  transition:transform 1.1s cubic-bezier(.16,.8,.24,1);}
[dir="rtl"] .adk-priority-head::after,[dir="rtl"] .adk-progress-head::after,
[dir="rtl"] .adk-wird-head::after,[dir="rtl"] .adk-section-head::after{
  transform-origin:right center;
  background:linear-gradient(270deg,rgba(var(--lv-g,198,161,91),.55),
    rgba(var(--lv-g,198,161,91),.14) 46%,transparent);}
.adk-priority-panel.is-lit .adk-priority-head::after,
.adk-progress-panel.is-lit .adk-progress-head::after,
.adk-wird-panel.is-lit .adk-wird-head::after,
.adk-section-head::after{transform:scaleX(1);}
@media (prefers-reduced-motion:reduce){
  .adk-priority-head::after,.adk-progress-head::after,
  .adk-wird-head::after,.adk-section-head::after{transition:none;transform:scaleX(1);}
}

/* The figures band sits on the Centre's own ground rather than the
   generic tertiary surface, so it belongs to the page it is in. */
.adk-figures{margin:44px 0 8px;padding:38px 0 6px;background:transparent;}
.adk-figures::before{inset-inline:0;}

/* ---- The light on a clipped frame ---------------------------------
   Photograph frames clip their contents (the image is scaled on hover
   and must not escape), so a ring drawn at a negative inset behind the
   background is cut away and never seen. On those the ring is drawn
   inside the border box and above the picture instead — same arc, same
   timing, but where it can actually be looked at. */
.gi-frame.rg-light::before,.gal-item.rg-light::before{
  inset:0;z-index:3;padding:2px;border-radius:inherit;}
.gal-item.rg-light{position:relative;isolation:isolate;}

/* ===================================================================
   7. THE GILDED EDGE
   -------------------------------------------------------------------
   The travelling light of section 1 is drawn on ::before, which means
   it can only be given to an element that does not already own that
   pseudo-element — and most of the site's furniture does. So the great
   majority of the cards, plates, panels and tables on this site could
   not have it.

   This is the same arc, drawn on a real child element instead. It can
   be added to anything, it never argues with a rule that is already
   there, and js/edge.js puts one into every card-like shape on every
   page rather than the handful that happened to be free.

   The ring is drawn inside the border box and above the ground so a
   host that clips its contents cannot cut it away, and it is masked to
   the perimeter, so at 1.6px it runs the edge and never crosses type.
   =================================================================== */
.rg-edged{position:relative;}
.rg-edge{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  border-radius:inherit;padding:1.6px;
  background:conic-gradient(from var(--rg-angle),
    transparent 0deg 188deg,
    rgba(var(--lv-g,198,161,91),.06) 214deg,
    rgba(var(--lv-gb,233,206,138),.82) 246deg,
    rgb(var(--lv-gl,255,246,223)) 262deg,
    rgba(var(--lv-gb,233,206,138),.82) 278deg,
    rgba(var(--lv-g,198,161,91),.06) 310deg,
    transparent 338deg 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  opacity:0;transition:opacity .7s ease;
  animation:rg-orbit var(--rg-dur,9s) linear infinite;
  animation-delay:var(--rg-delay,0s);}
/* Lit quietly on arrival, fully while the shape is addressed. */
.rg-edged.is-lit > .rg-edge{opacity:.55;}
.rg-edged:hover > .rg-edge,
.rg-edged:focus-within > .rg-edge{opacity:1;}
@supports not (background:conic-gradient(from 0deg,red,blue)){.rg-edge{display:none;}}
html[data-pc-ornament="none"] .rg-edge,
html[data-pc-motion="reduced"] .rg-edge{display:none;}
@media (prefers-reduced-motion:reduce){
  .rg-edge{animation:none;opacity:.4;}
  .rg-edged.is-lit > .rg-edge{opacity:.4;}
}

/* ===================================================================
   §8. THE DIAMOND
   -------------------------------------------------------------------
   The gold light in §7 is a highlight travelling over metal. This is a
   different thing entirely, and it is why the two are drawn separately
   rather than one being tinted into the other.

   Gold reflects. A diamond REFRACTS — it splits what falls on it, and
   what you see travelling across a cut stone is not a white streak but
   a very tight white core with colour thrown off either side of it,
   blue leading and warm trailing. That dispersion is the whole of the
   effect; a plain white sweep reads as a screen glare and nothing else.

   So the diamond light is: narrower than the gold (a hard core, not a
   soft bloom), spectral at its shoulders, and turning the OTHER WAY.
   Two lights running the same direction at different speeds read as
   one light stuttering. Counter-rotating, they read as two facets of
   one setting catching the room, which is what they are.

   It is deliberately not everywhere. js/edge.js gives it only to the
   crown shapes — the arrival panels, the crest, the stat plates, the
   gold buttons — so it stays an event.
   ------------------------------------------------------------------- */
@property --rg-angle2{syntax:'<angle>';initial-value:0deg;inherits:false;}

.rg-edge.is-diamond{
  padding:1.1px;z-index:4;
  background:conic-gradient(from var(--rg-angle2),
    transparent 0deg 288deg,
    rgba(148,196,255,.10) 300deg,
    rgba(176,214,255,.62) 316deg,
    rgba(226,242,255,.94) 325deg,
    rgb(255,255,255) 330deg,
    rgba(255,246,214,.86) 336deg,
    rgba(255,206,222,.52) 344deg,
    rgba(214,178,255,.16) 350deg,
    transparent 356deg 360deg);
  filter:drop-shadow(0 0 3px rgba(255,255,255,.55));
  animation-name:rg-orbit2;
}
@keyframes rg-orbit2{to{--rg-angle2:-360deg;}}
.rg-edged.is-lit > .rg-edge.is-diamond{opacity:.42;}
.rg-edged:hover > .rg-edge.is-diamond,
.rg-edged:focus-within > .rg-edge.is-diamond{opacity:.95;}

/* The gold button wears both, and wears them tighter: a control is a
   smaller object than a panel and a 1.6px band on one reads as a
   border rather than as a light. */
.pr-btn.rg-edged > .rg-edge{padding:1.2px;}
.pr-btn.rg-edged > .rg-edge.is-diamond{padding:.9px;}
.pr-btn.is-gold.rg-edged.is-lit > .rg-edge{opacity:.7;}

@media (prefers-reduced-motion:reduce){
  .rg-edge.is-diamond{animation:none;opacity:.3;}
  .rg-edged.is-lit > .rg-edge.is-diamond{opacity:.3;}
}