/* Shared components: faceted plaques, controls, tags and ornaments. Section files build on these. */

/* ── Faceted plaque ────────────────────────────────────────────────────────────
   The 45° cut of the rune divider and of the KU shield, as a surface.
   ::before paints the face and a 1px edge that also runs along the four cuts; ::after stays free.
   Tune per component:
     --c         size of the cut
     --face-c    flat face colour (may be translucent)     --face   face as an image (gradient) instead
     --face-top  optional layer above the face (sheen, tint)
     --edge-c    flat edge colour, also paints the cuts
     --edge-top, --edge-bottom, --edge-left, --edge-right   one side as an image instead (a gradient along that side)
   Every class that draws a plaque resets all of them, so values never leak into nested plaques. */
.plaque,.button,.text-link,.secondary-action,.icon-button,.tabs>button {
  --c:var(--cut); --face-c:var(--ink-3); --face:initial; --face-top:initial; --edge-c:var(--line-gold);
  --edge-top:initial; --edge-bottom:initial; --edge-left:initial; --edge-right:initial;
  position:relative; isolation:isolate;
}
:is(.plaque,.button,.text-link,.secondary-action,.icon-button,.tabs>button)::before {
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  --k:calc(var(--c) * .7071 + 1px); --s:calc(var(--c) + 2px); --flat:linear-gradient(var(--edge-c) 0 0);
  background:
    linear-gradient(135deg,var(--edge-c) var(--k),transparent 0) top left/var(--s) var(--s) no-repeat,
    linear-gradient(225deg,var(--edge-c) var(--k),transparent 0) top right/var(--s) var(--s) no-repeat,
    linear-gradient(315deg,var(--edge-c) var(--k),transparent 0) bottom right/var(--s) var(--s) no-repeat,
    linear-gradient(45deg,var(--edge-c) var(--k),transparent 0) bottom left/var(--s) var(--s) no-repeat,
    var(--edge-top,var(--flat)) top/100% 1px no-repeat,
    var(--edge-bottom,var(--flat)) bottom/100% 1px no-repeat,
    var(--edge-left,var(--flat)) left/1px 100% no-repeat,
    var(--edge-right,var(--flat)) right/1px 100% no-repeat,
    var(--face-top,none),
    var(--face,linear-gradient(var(--face-c) 0 0));
  clip-path:polygon(var(--c) 0,calc(100% - var(--c)) 0,100% var(--c),100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,var(--c) 100%,0 calc(100% - var(--c)),0 var(--c));
}

/* ── Buttons ───────────────────────────────────────────────────────────────── */
.button {
  --c:var(--cut-s); --edge-c:var(--line-gold-strong);
  display:inline-flex; align-items:center; justify-content:center; gap:.9em;
  min-height:var(--control-h); padding:.5em 1.5em;
  font:600 var(--fs-control)/1.15 var(--display); letter-spacing:.03em; text-align:center; color:var(--text);
  transition:transform var(--t-fast) var(--ease),color var(--t-fast),--face-c var(--t-fast),--edge-c var(--t-fast);
}
.button:not(:disabled):hover { transform:translateY(-2px); }
.button:not(:disabled):active { transform:scale(.985); }
.button .ui-icon { width:1.35em; height:1.35em; }
.button-symbol { display:inline-flex; transition:transform var(--t-fast) var(--ease); }
.button:not(:disabled):hover .button-symbol { transform:translateX(3px); }

/* Primary: cast gold. One per view. */
.button-gold { --edge-c:#ffe6b5; --face:linear-gradient(115deg,#f1d5a2 0%,#d9ae6d 46%,#b98342 100%); --face-top:linear-gradient(180deg,#fff7e480,transparent 42%); color:var(--gold-ink); text-shadow:0 1px #fff3; }
.button-gold::after { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(105deg,transparent 38%,#fffa 50%,transparent 62%) 100% 0/260% 100% no-repeat; clip-path:polygon(var(--c) 0,calc(100% - var(--c)) 0,100% var(--c),100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,var(--c) 100%,0 calc(100% - var(--c)),0 var(--c)); transition:background-position .75s var(--ease); }
.button-gold:not(:disabled):hover::after { background-position:0 0; transition:background-position .75s var(--ease); }

/* Secondary: dark glass with an engraved gold edge. */
.button-glass { --face:linear-gradient(120deg,#2a2032e6,#17121fe6); --edge-c:#e2bb7b8c; --edge-top:linear-gradient(90deg,var(--gold),#e2bb7b40 70%); --edge-bottom:linear-gradient(270deg,var(--gold),#e2bb7b40 70%); color:var(--text); }
.button-glass:not(:disabled):hover { --edge-c:var(--gold-3); color:var(--gold-1); }
.button-glass .button-symbol { color:var(--gold); }

/* Quiet action with a visible edge: "learn more", "back", secondary steps. */
.text-link,.secondary-action {
  --c:6px; --face-c:#ffffff05;
  display:inline-flex; align-items:center; justify-content:center; gap:.8em; width:fit-content;
  min-height:max(44px,var(--control-h) - 8px); padding:.45em 1.2em;
  font:600 calc(var(--fs-control) * .92)/1.2 var(--display); letter-spacing:.03em; text-align:center; color:var(--gold-3);
  transition:color var(--t-fast),--face-c var(--t-fast),--edge-c var(--t-fast);
}
:is(.text-link,.secondary-action):not(:disabled):hover { --face-c:#e2bb7b17; --edge-c:var(--line-gold-strong); color:var(--gold-bright); }
:is(.text-link,.secondary-action):not(:disabled):active { --face-c:#e2bb7b26; }
:is(.text-link,.secondary-action) .ui-icon { width:1.3em; height:1.3em; transition:transform var(--t-fast) var(--ease); }
:is(.text-link,.secondary-action):not(:disabled):hover .ui-icon { transform:translateX(3px); }
[data-service]:disabled { opacity:.8; }

/* Reference inside running text. */
.inline-link { color:var(--gold-3); text-decoration:underline; text-decoration-color:var(--line-gold); text-underline-offset:.25em; transition:color var(--t-fast),text-decoration-color var(--t-fast); }
.inline-link:hover { color:var(--gold-bright); text-decoration-color:currentColor; }
.inline-link .ui-icon { display:inline-block; width:1em; height:1em; vertical-align:-.12em; }

.icon-button { --c:6px; --face-c:#21182877; display:inline-grid; place-items:center; width:44px; height:44px; color:var(--gold); transition:color var(--t-fast),--face-c var(--t-fast),--edge-c var(--t-fast); }
.icon-button:hover { --face-c:#e2bb7b1c; --edge-c:var(--line-gold-strong); color:var(--gold-bright); }
.icon-button .ui-icon { width:24px; height:24px; }

/* ── Tabs: toggle buttons (aria-pressed) or role=tab (aria-selected) ───────── */
.tabs { display:flex; flex-wrap:wrap; gap:6px; }
.tabs>button {
  --c:5px; --face-c:#1c1626; --edge-c:var(--line-strong);
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  min-height:max(44px,var(--control-h) - 10px); padding:.4em 1.15em;
  font:600 calc(var(--fs-control) * .9)/1.2 var(--display); letter-spacing:.03em; color:var(--text-soft);
  transition:color var(--t-fast),--face-c var(--t-fast),--edge-c var(--t-fast);
}
.tabs>button:hover { --edge-c:var(--line-gold-strong); color:var(--gold-bright); }
.tabs>button:is([aria-pressed="true"],[aria-selected="true"]) { --edge-c:var(--gold); --face:linear-gradient(130deg,#6148317a,#392340); color:var(--gold-bright); }
.tabs .ui-icon { width:1.15em; height:1.15em; }

/* ── Small parts ───────────────────────────────────────────────────────────── */
.ui-icon { display:block; flex-shrink:0; width:24px; height:24px; }
[data-ui-icon] { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }

.status-dot { display:inline-block; width:.55em; height:.55em; min-width:6px; min-height:6px; margin-right:.6em; border-radius:50%; background:var(--gold); box-shadow:0 0 10px #d8bb8633; }

/* The Asteria star as an inline glyph: <i class="star"></i>, coloured by `color`. */
.star { display:inline-block; width:1em; height:1em; flex:none; background:currentColor; -webkit-mask:var(--star) center/contain no-repeat; mask:var(--star) center/contain no-repeat; }

/* Four engraved corner brackets around a positioned box: add .corners; --corner-gap pushes them outwards. */
.corners::after {
  content:''; position:absolute; inset:calc(var(--corner-gap,0px) * -1); pointer-events:none; background:var(--corner-color,var(--gold));
  --m:var(--corner-size,28px) var(--corner-size,28px) no-repeat;
  -webkit-mask:var(--corner-tl) top left/var(--m),var(--corner-tr) top right/var(--m),var(--corner-br) bottom right/var(--m),var(--corner-bl) bottom left/var(--m);
  mask:var(--corner-tl) top left/var(--m),var(--corner-tr) top right/var(--m),var(--corner-br) bottom right/var(--m),var(--corner-bl) bottom left/var(--m);
}

/* ── Section headings ──────────────────────────────────────────────────────── */
.section-heading { display:grid; justify-items:start; gap:clamp(14px,1.3vw,28px); }
.section-heading.center { justify-items:center; text-align:center; }
.section-heading>p:not(.eyebrow) { max-width:46em; color:var(--muted); font-size:var(--fs-lead); line-height:1.6; }
.section-top { display:flex; align-items:end; justify-content:space-between; flex-wrap:wrap; gap:var(--gap); }
.section-top>div:first-child { display:grid; gap:clamp(12px,1.1vw,24px); }

/* ── Rune divider between sections: draws itself in, then a light travels along it ── */
.rune-divider { height:clamp(34px,3.2vw,72px); pointer-events:none; }
.rune-divider svg { display:block; width:100%; height:100%; overflow:visible; }
.rune-base { stroke:var(--gold); stroke-width:.7; opacity:.3; stroke-dasharray:100; }
.rune-trace { stroke:var(--gold-2); stroke-width:1.4; stroke-dasharray:7 93; opacity:.7; animation:rune-flow 8s linear infinite; }
.rune-center { stroke:var(--gold-3); stroke-width:1; fill:#d3a7650c; transform-box:fill-box; transform-origin:center; }
.js-motion .rune-divider:not(.visible) .rune-base { stroke-dashoffset:100; }
.js-motion .rune-divider:not(.visible) :is(.rune-trace,.rune-center) { opacity:0; }
.js-motion .rune-divider .rune-base { transition:stroke-dashoffset 1.6s var(--ease-in-out); }
.js-motion .rune-divider :is(.rune-trace,.rune-center) { transition:opacity .8s 1.1s; }
@keyframes rune-flow { to { stroke-dashoffset:-100; } }