/*
Theme Name: Alkimia Web Theme
Theme URI: https://anim.works/
Author: Animworks
Author URI: https://anim.works/
Description: Game landing page theme for Alkimia. Single-page layout with hero, about, features, media gallery, FAQ, DLC and call-to-action sections.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
License: Proprietary
Text Domain: alkimia-web-theme
Tags: game, landing-page, one-page
*/

/* Base stylesheets are enqueued from functions.php.
   Add Alkimia-specific overrides below this line. */

/* ==========================================================================
   Typography — Cinzel (titles) + Cormorant Garamond (body)
   Chosen to sit alongside the ALKIMYA logo, a high-contrast Roman display
   serif. Fonts are enqueued in functions.php.

   Sizes use clamp(min, fluid, max) so they scale with the viewport and stay
   sensible on phones. To tune the whole page, change the --alkimia-* values.
   ========================================================================== */

:root {
    --alkimia-body:  clamp(1.15rem, 0.9rem + 0.55vw, 1.5rem);   /* ~18px -> 24px */
    --alkimia-lead:  clamp(1.5rem,  1.1rem + 1.4vw,  2.35rem);  /* hero intro    */
    --alkimia-line:  1.65;
}

body,
p,
li,
.accordion-body,
input,
textarea,
select,
.form-control {
    font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
}

/* Cormorant has a small x-height and runs optically smaller than a sans,
   so the base is set well above a typical 16px. */
body {
    font-size: var(--alkimia-body);
    line-height: var(--alkimia-line);
    font-weight: 500;
    -webkit-font-smoothing: antialiased;
}

p,
li,
.accordion-body {
    font-size: var(--alkimia-body);
    line-height: var(--alkimia-line);
    font-weight: 500;
}

/* Hero intro is the lead paragraph — noticeably larger, and a touch heavier
   because it sits over artwork where hairlines get lost. */
.hero-section p {
    font-size: var(--alkimia-lead);
    line-height: 1.45;
    font-weight: 500;
    max-width: 42ch;
    margin-left: auto;
    margin-right: auto;
}

/* About / FAQ body copy reads long-form, so give it a comfortable measure. */
.about-section p,
.accordion-body {
    max-width: 68ch;
}

/* --- Titles --- */
h1, h2, h3, h4, h5, h6,
.heading,
.modal-title,
.loader-logo,
#main-logo,
.navbar-brand {
    font-family: 'Cinzel', 'Times New Roman', serif;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1.2;
}

h1 { font-size: clamp(2.6rem, 1.6rem + 4vw,  5.5rem); letter-spacing: 0.06em; }
h2 { font-size: clamp(2rem,   1.4rem + 2.4vw, 3.4rem); letter-spacing: 0.05em; }
h3 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.2rem); }
h4 { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem); }

/* Buttons and nav take the display face so the UI matches the titles. */
.button,
.btn,
.navbar-nav .nav-link,
.accordion-button {
    font-family: 'Cinzel', 'Times New Roman', serif;
    font-weight: 500;
    letter-spacing: 0.06em;
}

.button,
.btn {
    font-size: clamp(0.95rem, 0.85rem + 0.3vw, 1.15rem);
}

.navbar-nav .nav-link {
    font-size: clamp(0.95rem, 0.85rem + 0.25vw, 1.1rem);
}

.accordion-button {
    font-size: clamp(1.1rem, 0.95rem + 0.5vw, 1.45rem);
}

/* Small letterspaced caps, echoing "HOUSE OF WISDOM" in the logo. */
.subtitle,
.bulletpoints li {
    letter-spacing: 0.08em;
}

/* --- Hero logo (replaces the text headline) --- */
.hero-logo-heading {
    /* The square logo art carries empty geometry below the wordmark, which
       read as a huge gap to the intro text. Negative margin folds that
       internal padding away: 12vw tracks the logo's 58vw footprint, capped
       so very wide screens don't overshoot. */
    margin: 0 auto max(-9.25rem, -10vw);
    line-height: 1;
}

.hero-logo {
    display: block;
    width: clamp(300px, 58vw, 820px);
    height: auto;
    margin: 0 auto;
    /* lifts the mark off busy artwork behind it */
    filter: drop-shadow(0 4px 24px rgba(0, 0, 0, 0.55));
}

/* The template's hero column is col-lg-4 (~1/3 width). A large centred logo
   is wider than that, and margin:auto can't centre an element wider than its
   container — it overflows to the right. Let the hero content span the full
   width; the paragraph keeps its own max-width so the text measure is
   unchanged. */
.hero-section .row > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
}

.hero-logo-heading {
    display: flex;
    justify-content: center;
    width: 100%;
}

.hero-logo {
    /* never wider than the viewport, whatever the clamp resolves to */
    max-width: min(820px, 88vw);
}

/* --- Navigation bar wordmark --- */
#main-logo.navbar-brand {
    --nav-logo-h: clamp(26px, 2.2vw, 40px);
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 0;
    color: #fff;
}

/* Inline SVG built from the logo's own paths. Height drives it; the
   viewBox supplies the ratio, so the mark can never change size. */
.nav-logo-svg {
    display: block;
    height: var(--nav-logo-h);
    width: auto;
    aspect-ratio: 1002 / 196;
    overflow: visible;
}

/* ------------------------------------------------------------------
   Hover scramble
   Letters are the real artwork and simply swap with a noise slot sitting
   in the same place, so nothing is scaled, refitted or crossfaded between
   two different renderings of the wordmark.
------------------------------------------------------------------- */
.alk-letters {
    fill: #fff;
}

.alk-letter {
    fill: #fff;
    /* Long enough to read as a dissolve against the noise fading out. The
       fill runs longer so the colour keeps settling after the shape lands. */
    transition: opacity 0.3s ease, fill 0.55s ease;
}

.alk-letter.is-off {
    opacity: 0;
    transition: opacity 0.12s ease;
}

/* A resolving letter arrives in the key colour, then settles to white, so
   the colour of the noise carries across into the resolved mark rather
   than the two states simply swapping. Applied without a transition so the
   colour is there on arrival; removing the class runs the settle. */
.alk-letter.is-settling {
    fill: #816650;
    transition: none;
}

.alk-noise-layer {
    font-family: 'Amiri', 'Noto Naskh Arabic', 'Geeza Pro', serif;
    font-weight: 700;
}

/* Arabic font size as a fraction of the wordmark's cap height. This is a
   direct multiplier, so lower is always smaller: 0.5 is noticeably small,
   0.8 is close to the height of the capitals. The only number to change
   if the Arabic looks wrong next to the letters. */
.nav-logo-svg {
    --alk-noise-fit: 0.55;
}

/* Two lanes per slot alternate, so each new glyph fades up while the
   previous one fades down. The fade is a little over half the hold time,
   so the two overlap into a continuous dissolve and the combined ink
   stays even rather than dimming between swaps. */
.alk-noise-char {
    fill: #816650;
    opacity: 0;
    /* Base of the size pulse. The script fits the layer so this value times
       --alk-noise-peak is what matches the cap band. */
    font-size: 1em;
    transition: opacity 0.22s ease, font-size 0.22s ease;
}

/* Each glyph swells very slightly as it arrives and settles back as it
   goes, so the noise breathes instead of sitting still. */
.alk-noise-char.is-on {
    opacity: 1;
    font-size: calc(1em * var(--alk-noise-peak, 1.06));
}

/* The last glyph of a slot leaves on the letter's curve, not the churn one. */
.alk-noise-char.is-resolving {
    opacity: 0;
    font-size: 1em;
    transition: opacity 0.3s ease, font-size 0.3s ease;
}

/* Hairline rule that sweeps out from the left on hover. */
.nav-brand-rule {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.2em;
    height: 1px;
    background: #816650;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.45s cubic-bezier(0.16, 0.84, 0.24, 1);
    pointer-events: none;
}

#main-logo.navbar-brand:hover .nav-brand-rule,
#main-logo.navbar-brand:focus-visible .nav-brand-rule {
    transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
    .nav-brand-rule { transition: none; }
    .alk-letter.is-off { opacity: 1; }
    .alk-noise-char { display: none; }
}

/* Generic text scramble, for ordinary text such as nav links. */
.alk-scramble-char {
    display: inline-block;
    direction: ltr;
    unicode-bidi: isolate;
    transition: color 0.15s ease;
}

.alk-scramble-char.is-noise {
    font-family: 'Amiri', 'Noto Naskh Arabic', 'Geeza Pro', serif;
    color: #816650;
}

/* ==========================================================================
   WordPress admin bar offset
   The theme's navbar is .fixed-top (top:0) and so is the admin bar, so they
   overlap for logged-in users. WordPress's own `html { margin-top }` fix does
   not move fixed-position elements, so nudge the navbar down instead.
   Only affects logged-in admins — visitors see no change.
   ========================================================================== */

body.admin-bar .navbar.fixed-top {
    top: 32px;
}

/* WP switches the admin bar to 46px tall below 783px. */
@media screen and (max-width: 782px) {
    body.admin-bar .navbar.fixed-top {
        top: 46px;
    }
}

/* Below 601px WP makes the admin bar position:absolute so it scrolls away;
   keep the navbar flush to avoid a permanent gap once scrolled. */
@media screen and (max-width: 600px) {
    body.admin-bar .navbar.fixed-top {
        top: 0;
    }
}

/* ------------------------------------------------------------------
   Blur fade reveal
   CSS port of the BlurFade framer-motion component, with the "puff":
   the element starts slightly oversized and blurred, then settles to
   sharp at true size. Blur makes a shape cover more area, so as it
   resolves it reads as contracting inward.

   hidden  = translateY(offset)  scale(scale)  opacity 0  blur(blur)
   visible = translateY(-offset) scale(1)      opacity 1  blur(0)

   Reveals when <body> gains .alkimia-loaded (js/alkimia-reveal.js).
   Stagger with --alk-bf-delay. Tune per element with the other vars.
------------------------------------------------------------------- */
.alk-blurfade {
    --alk-bf-delay: 0s;
    --alk-bf-duration: 0.4s;
    --alk-bf-offset: 6px;
    --alk-bf-blur: 6px;
    --alk-bf-scale: 1.04;
    --alk-bf-ease: cubic-bezier(0.16, 0.84, 0.24, 1);

    opacity: 0;
    filter: blur(var(--alk-bf-blur));
    transform: translateY(var(--alk-bf-offset)) scale(var(--alk-bf-scale));
    transition:
        opacity   var(--alk-bf-duration) var(--alk-bf-ease) calc(0.04s + var(--alk-bf-delay)),
        filter    var(--alk-bf-duration) var(--alk-bf-ease) calc(0.04s + var(--alk-bf-delay)),
        transform var(--alk-bf-duration) var(--alk-bf-ease) calc(0.04s + var(--alk-bf-delay));
}

body.alkimia-loaded .alk-blurfade {
    opacity: 1;
    filter: blur(0px);
    transform: translateY(calc(var(--alk-bf-offset) * -1)) scale(1);
}

/* ------------------------------------------------------------------
   Hero logo: three stacked layers revealing in sequence.
   Outer ring, then inner geometry, then the wordmark. Same 1600x1600
   viewBox on each file, so they register perfectly on top of one
   another. The container carries the sizing the single logo used, so
   position and dimensions are unchanged.
------------------------------------------------------------------- */
.hero-logo-stack {
    position: relative;
    aspect-ratio: 1 / 1;
}

.hero-logo-layer {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

/* The build. Slow and separated so each layer lands on its own. */
.hero-layer-outer {
    --alk-bf-delay: 0.2s;
    --alk-bf-duration: 1.2s;
    --alk-bf-blur: 18px;
    --alk-bf-scale: 1.12;
    --alk-bf-offset: 10px;
}

.hero-layer-inner {
    --alk-bf-delay: 0.8s;
    --alk-bf-duration: 1.1s;
    --alk-bf-blur: 16px;
    --alk-bf-scale: 1.10;
    --alk-bf-offset: 9px;
}

/* ------------------------------------------------------------------
   Wordmark: per-letter blurred stagger, in reading order.
   The lettering is inline SVG (one <g> per glyph, each carrying its
   index in --g) so the reveal can be driven from here. Blur is in the
   1600-unit viewBox, so it scales with the logo rather than being
   fixed in screen pixels.
------------------------------------------------------------------- */
.hero-wordmark-svg {
    --alk-word-start: 1.5s;   /* begins once the geometry has settled */
    --alk-word-step: 0.065s;  /* gap between letters */
    --alk-word-dur: 0.55s;    /* how long one letter takes */
    --alk-word-blur: 26px;
}

.hero-wordmark-svg .alk-glyph {
    opacity: 0;
    filter: blur(var(--alk-word-blur));
    transition:
        opacity var(--alk-word-dur) ease-out,
        filter  var(--alk-word-dur) ease-out;
    transition-delay: calc(var(--alk-word-start) + var(--g) * var(--alk-word-step));
}

body.alkimia-loaded .hero-wordmark-svg .alk-glyph {
    opacity: 1;
    filter: blur(0px);
}

/* The tagline and button come in together as one soft block, overlapping
   the logo build rather than waiting for it. Same delay on both, and a
   long duration so it drifts in under the letters landing above. */
.hero-section p.alk-blurfade,
.hero-section .button.alk-blurfade {
    --alk-bf-delay: 1.1s;
    --alk-bf-duration: 1.6s;
    --alk-bf-blur: 14px;
    --alk-bf-scale: 1.02;
    --alk-bf-offset: 5px;
}

.hero-section .button.alk-blurfade { display: inline-block; }

/* Never leave content hidden if JS fails or motion is unwanted. */
.no-js .alk-blurfade,
.alk-blurfade.is-revealed {
    opacity: 1;
    filter: blur(0px);
    transform: none;
    transition: none;
}

@media (prefers-reduced-motion: reduce) {
    .hero-wordmark-svg .alk-glyph,
    body.alkimia-loaded .hero-wordmark-svg .alk-glyph {
        opacity: 1;
        filter: none;
        transition: none;
    }

    .alk-blurfade,
    body.alkimia-loaded .alk-blurfade {
        opacity: 1;
        filter: blur(0px);
        transform: none;
        transition: none;
    }
}

/* ==========================================================================
   Loading screen
   The real wordmark sitting inside a large static version of the emblem's
   geometry, with a rolling box loader beneath it.
   ========================================================================== */

#loader-wrapper {
    background: #0d0d0d;
    overflow: hidden;
}

/* Background geometry.
   The supplied artwork, tightly cropped so its own centre is the emblem's
   centre. Pinned by that centre to the middle of the screen rather than
   centred through a flex or grid parent, which does not land reliably once
   the image is larger than its container. Sized with max-* so the intrinsic
   ratio is preserved without doing the arithmetic in CSS. */
.loader-geo-layer {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    height: auto;
    max-height: 90vh;
    max-width: 92vw;
    opacity: 0.2;
    pointer-events: none;
}

#loader-wrapper .flex-wrapper {
    position: relative;
    z-index: 1;
}

/* The progress element still drives the hide in single.js via its
   transitionend, so it stays in the layout but out of sight. */
#progress {
    position: absolute;
    opacity: 0;
    height: 1px;
    pointer-events: none;
}

/* --- Twin orbit loader -------------------------------------------------- */

/* Ported from the React component. One element sets the colour and every
   circle takes bg-current from it, so the metal is declared once here rather
   than repeated on each dot. */
.alk-orbit-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
}

.alk-orbit {
    --duration: 1.1s;
    position: relative;
    display: inline-block;
    width: 14px;
    aspect-ratio: 1;
    border-radius: 9999px;
    background: currentColor;
    color: #816650;
}

/* inset 0 then translate: the dot is the same size as the hub and is thrown
   outward along its own rotated axis, so the orbit radius comes from the
   translate rather than from any container. */
.alk-orbit-dot {
    position: absolute;
    inset: 0;
    border-radius: 9999px;
    background: currentColor;
    transform: rotate(0deg) translate(155%);
    animation: alkOrbit var(--duration) ease infinite;
}

/* Half a cycle behind, so the two sit opposite each other. */
.alk-orbit-dot:nth-child(2) {
    animation-delay: calc(var(--duration) / 2);
}

@keyframes alkOrbit {
    100% { transform: rotate(360deg) translate(155%); }
}

/* Still announce the wait; just stop the spinning. */
@media (prefers-reduced-motion: reduce) {
    .alk-orbit-dot { animation: none; }
}

/* This theme has no screen-reader-text utility of its own, and without one
   the word would simply render in the middle of the loading screen. Clipped
   rather than display:none, which would hide it from screen readers too and
   leave the spinner announcing nothing. */
.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ==========================================================================
   Steam call to action and platform strip
   ========================================================================== */

/* Buttons carrying the Steam mark. The higher-specificity selector is needed
   because the hero's blur-fade rule sets display:inline-block. */
.button.has-steam,
.hero-section .button.has-steam,
.hero-section .button.alk-blurfade.has-steam {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55em;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.button.has-steam i {
    font-size: 1.2em;
    line-height: 1;
}

/* Small line under the call to action. */
.cta-note {
    margin: 0.75rem 0 0;
    letter-spacing: 0.09em;
    opacity: 0.7;
    font-size: 0.95rem;
}

/* Platform strip. Icons rather than a flat image, so it stays sharp at any
   size, takes the theme colour, and can be edited without a graphics tool. */
.platform-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: clamp(2rem, 7vw, 5rem);
}

.platform-list li {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    color: #fff;
    font-family: 'Cinzel', 'Times New Roman', serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: clamp(1rem, 0.85rem + 0.4vw, 1.35rem);
    opacity: 0.9;
}

.platform-list i {
    font-size: 2em;
    line-height: 1;
}

/* ==========================================================================
   Vendor font overrides
   The original template hardcodes Montserrat, Varela Round and Raleway in
   several rules. The global rules near the top of this file are element-level
   and lose to those on specificity, so the same selectors are repeated here,
   where load order settles it. Without this the footer links, buttons, age
   gate and lightbox captions stay sans-serif while everything else is Cinzel
   and Cormorant.
   ========================================================================== */

html, body,
p,
.footer ul li,
#age-checker .card-body,
.glightbox-clean .gslide-title,
/* Links and labels are never given a family anywhere in this theme, they
   just inherit. That breaks wherever a vendor rule sets a font on an
   ancestor, which is why the footer and newsletter links stayed sans while
   the text around them did not. Declared outright rather than inherited.
   Navigation links and buttons carry their own, more specific rules, so
   they keep Cinzel. */
a,
label,
.form-check-label {
    font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
}

h1, h2, h3, h4, h5, h6,
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a,
.button,
.btn,
.navbar-nav .nav-link {
    font-family: 'Cinzel', 'Times New Roman', serif;
}

.footer ul li {
    letter-spacing: 0.04em;
}

#copyright {
    font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
}

/* --- Footer brand --------------------------------------------------- */

.footer-brand {
    display: block;
    max-width: 190px;
}

.footer-wordmark {
    display: block;
    width: 100%;
    height: auto;
    fill: #fff;
    opacity: 0.9;
    transition: opacity 0.25s ease;
}

.footer-brand:hover .footer-wordmark {
    opacity: 1;
}

/* ==========================================================================
   Call to action layout
   The original floated the artwork hard right, which suited tall box art but
   leaves a wide wallpaper hanging off one side. Centred instead, with the two
   columns aligned on their middles so the text sits level with the artwork
   whatever its height.
   ========================================================================== */

.cta-card {
    align-items: center;
    justify-content: center;
}

.game-box {
    float: none;
    display: block;
    margin-inline: auto;
}

.cta-section .platform-list {
    margin-top: 2.5rem;
}

@media (max-width: 991.98px) {
    .cta-text {
        text-align: center;
    }

    .cta-text .button {
        margin-inline: auto;
    }
}

/* ==========================================================================
   Parallax
   Carriers for the hero layers. The layer itself keeps its reveal transform
   from .alk-blurfade; the carrier around it takes the parallax transform, so
   the two animations never contend for the same property.
   ========================================================================== */

.hero-par {
    position: absolute;
    inset: 0;
    display: block;
    will-change: transform;
}

.hero-par-text {
    will-change: transform;
}

/* Layers lag downward as the hero scrolls up, so without this they spill
   over the section below. Clipped at the hero's own edge instead. */
.hero-section {
    overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .hero-par,
    .hero-par-text {
        transform: none !important;
        will-change: auto;
    }
}

/* ==========================================================================
   Sparkles
   A glowing seam under the wishlist button with embers rising off it.
   The reference used indigo and sky; these are the theme's own metals.
   ========================================================================== */

.alk-spark {
    --alk-spark-a: #816650;
    --alk-spark-b: #a9866a;
    --alk-spark-c: #b99e89;

    position: relative;
    display: inline-block;
    isolation: isolate;
    padding-bottom: 3.25rem;
}

/* The button must sit above the field. */
.alk-spark > .button {
    position: relative;
    z-index: 2;
}

/* Ember field, filling the padding below the button. Masked to fade out at
   the sides and top so it has no hard edges to give itself away. */
.alk-spark-canvas {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 260px;
    height: 3.25rem;
    transform: translateX(-50%);
    z-index: 0;
    pointer-events: none;
    /* Fades away from the seam along the top edge, where the embers start. */
    -webkit-mask-image: radial-gradient(150px 58px at 50% 0%, #000 18%, transparent 84%);
            mask-image: radial-gradient(150px 58px at 50% 0%, #000 18%, transparent 84%);
}

/* The seam itself: a soft bloom with a hairline core on top, both fading
   out toward the ends. Two layers rather than one, because a single blurred
   line reads as fog and a single sharp line reads as a border. */
.alk-spark-beam {
    position: absolute;
    left: 50%;
    bottom: 3.15rem;
    width: 210px;
    height: 6px;
    transform: translateX(-50%);
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, var(--alk-spark-b), transparent);
    filter: blur(3px);
    opacity: 0.85;
}

.alk-spark-beam::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 120px;
    height: 1px;
    transform: translate(-50%, -50%);
    background: linear-gradient(90deg, transparent, var(--alk-spark-c), transparent);
    filter: none;
}

@media (prefers-reduced-motion: reduce) {
    .alk-spark { padding-bottom: 0; }
    .alk-spark-beam,
    .alk-spark-canvas { display: none; }
}

/* ==========================================================================
   Shiny call-to-action button
   A conic gradient rides the border, with a dot field and an inner shimmer
   behind the label. Ported from the React component: the animation is all
   CSS there too, so only the styled-jsx wrapper and the Inter import were
   dropped. Buttons here keep Cinzel.

   The registered custom properties are what make this possible: a plain
   --var cannot be animated, but one declared with @property has a type and
   so can be interpolated.
   ========================================================================== */

@property --alk-shiny-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

@property --alk-shiny-offset {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

@property --alk-shiny-percent {
    syntax: "<percentage>";
    initial-value: 5%;
    inherits: false;
}

@property --alk-shiny-shine {
    syntax: "<color>";
    initial-value: #b99e89;
    inherits: false;
}

.button.alk-shiny {
    --alk-shiny-bg: #0e0d0c;
    --alk-shiny-bg-subtle: #1a1614;
    --alk-shiny-highlight: #a9866a;
    --alk-shiny-highlight-subtle: #b99e89;
    --alk-shiny-radius: 360px;
    --alk-shiny-duration: 3s;
    --alk-shiny-shadow: 2px;
    --alk-shiny-transition: 800ms cubic-bezier(0.25, 1, 0.5, 1);
    --alk-shiny-animation: alkShinyAngle linear infinite;

    isolation: isolate;
    position: relative;
    overflow: hidden;
    width: auto;
    padding: 0.9rem 2.1rem;
    outline-offset: 4px;
    border: 1px solid transparent;
    border-radius: var(--alk-shiny-radius);
    color: #fff;
    background:
        linear-gradient(var(--alk-shiny-bg), var(--alk-shiny-bg)) padding-box,
        conic-gradient(
            from calc(var(--alk-shiny-angle) - var(--alk-shiny-offset)),
            transparent,
            var(--alk-shiny-highlight) var(--alk-shiny-percent),
            var(--alk-shiny-shine) calc(var(--alk-shiny-percent) * 2),
            var(--alk-shiny-highlight) calc(var(--alk-shiny-percent) * 3),
            transparent calc(var(--alk-shiny-percent) * 4)
        ) border-box;
    box-shadow: inset 0 0 0 1px var(--alk-shiny-bg-subtle);
    transition: var(--alk-shiny-transition);
    transition-property: --alk-shiny-offset, --alk-shiny-percent, --alk-shiny-shine;
}

.button.alk-shiny::before,
.button.alk-shiny::after,
.button.alk-shiny span::before {
    content: "";
    pointer-events: none;
    position: absolute;
    inset-inline-start: 50%;
    inset-block-start: 50%;
    translate: -50% -50%;
    z-index: -1;
}

/* Dot field, revealed only where the conic mask sweeps. */
.button.alk-shiny::before {
    --size: calc(100% - var(--alk-shiny-shadow) * 3);
    --position: 2px;
    --space: calc(var(--position) * 2);
    width: var(--size);
    height: var(--size);
    background: radial-gradient(
        circle at var(--position) var(--position),
        #fff calc(var(--position) / 4),
        transparent 0
    ) padding-box;
    background-size: var(--space) var(--space);
    background-repeat: space;
    -webkit-mask-image: conic-gradient(from calc(var(--alk-shiny-angle) + 45deg), #000, transparent 10% 90%, #000);
            mask-image: conic-gradient(from calc(var(--alk-shiny-angle) + 45deg), #000, transparent 10% 90%, #000);
    border-radius: inherit;
    opacity: 0.4;
    z-index: -1;
}

/* Inner shimmer sweeping the face. */
.button.alk-shiny::after {
    --alk-shiny-animation: alkShinyShimmer linear infinite;
    width: 100%;
    aspect-ratio: 1;
    background: linear-gradient(-50deg, transparent, var(--alk-shiny-highlight), transparent);
    -webkit-mask-image: radial-gradient(circle at bottom, transparent 40%, #000);
            mask-image: radial-gradient(circle at bottom, transparent 40%, #000);
    opacity: 0.6;
}

/* z-index works on the label because .has-steam makes it a flex item. */
.button.alk-shiny span {
    z-index: 1;
}

.button.alk-shiny span::before {
    --size: calc(100% + 1rem);
    width: var(--size);
    height: var(--size);
    box-shadow: inset 0 -1ex 2rem 4px var(--alk-shiny-highlight);
    opacity: 0;
    transition: opacity var(--alk-shiny-transition);
    animation: calc(var(--alk-shiny-duration) * 1.5) alkShinyBreathe linear infinite;
}

.button.alk-shiny,
.button.alk-shiny::before,
.button.alk-shiny::after {
    animation:
        var(--alk-shiny-animation) var(--alk-shiny-duration),
        var(--alk-shiny-animation) calc(var(--alk-shiny-duration) / 0.4) reverse paused;
    animation-composition: add;
}

.button.alk-shiny:is(:hover, :focus-visible) {
    --alk-shiny-percent: 20%;
    --alk-shiny-offset: 95deg;
    --alk-shiny-shine: var(--alk-shiny-highlight-subtle);
    color: #fff;
    background:
        linear-gradient(var(--alk-shiny-bg), var(--alk-shiny-bg)) padding-box,
        conic-gradient(
            from calc(var(--alk-shiny-angle) - var(--alk-shiny-offset)),
            transparent,
            var(--alk-shiny-highlight) var(--alk-shiny-percent),
            var(--alk-shiny-shine) calc(var(--alk-shiny-percent) * 2),
            var(--alk-shiny-highlight) calc(var(--alk-shiny-percent) * 3),
            transparent calc(var(--alk-shiny-percent) * 4)
        ) border-box;
}

.button.alk-shiny:is(:hover, :focus-visible),
.button.alk-shiny:is(:hover, :focus-visible)::before,
.button.alk-shiny:is(:hover, :focus-visible)::after {
    animation-play-state: running;
}

.button.alk-shiny:is(:hover, :focus-visible) span::before {
    opacity: 1;
}

.button.alk-shiny:active {
    translate: 0 1px;
}

@keyframes alkShinyAngle   { to { --alk-shiny-angle: 360deg; } }
@keyframes alkShinyShimmer { to { rotate: 360deg; } }
@keyframes alkShinyBreathe { from, to { scale: 1; } 50% { scale: 1.2; } }

@media (prefers-reduced-motion: reduce) {
    .button.alk-shiny,
    .button.alk-shiny::before,
    .button.alk-shiny::after,
    .button.alk-shiny span::before {
        animation: none;
    }
}

/* ==========================================================================
   Word reveal
   Prose lifts in a word at a time as it scrolls into view. The keyframe is
   the reference's word-appear, with the blur pulled back from 10px to 6px:
   at ten it smears badly on a serif at body size, and every word is a
   separately animated filter, so the cost adds up across a paragraph.
   ========================================================================== */

.alk-word {
    display: inline-block;
    opacity: 0;
}

.alk-words.is-in .alk-word {
    animation: alkWordAppear 0.75s cubic-bezier(0.22, 0.68, 0.28, 1) forwards;
    /* Capped, so the last word of a long paragraph is not still waiting
       long after the reader has arrived. */
    animation-delay: calc(min(var(--i), var(--alk-word-max, 26)) * 42ms);
}

@keyframes alkWordAppear {
    0% {
        opacity: 0;
        transform: translateY(18px) scale(0.94);
        filter: blur(6px);
    }
    55% {
        opacity: 0.85;
        transform: translateY(5px) scale(0.99);
        filter: blur(1.5px);
    }
    100% {
        opacity: 1;
        transform: none;
        filter: blur(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .alk-word {
        opacity: 1;
        animation: none !important;
    }
}

/* --- Cut reveal -------------------------------------------------------
   Words rise from behind a clipping box rather than blurring in. Used on
   the About Us heading. Two nested spans: the outer clips, the inner moves.
------------------------------------------------------------------------ */

.alk-word-cut {
    overflow: hidden;
    vertical-align: bottom;
}

.alk-word-cut .alk-word-in {
    display: inline-block;
    transform: translateY(105%);
}

.alk-words.is-in .alk-word-cut {
    animation: none;
    opacity: 1;
}

.alk-words.is-in .alk-word-cut .alk-word-in {
    animation: alkWordCut 0.7s cubic-bezier(0.22, 0.9, 0.24, 1) forwards;
    animation-delay: calc(min(var(--i), var(--alk-word-max, 26)) * 60ms);
}

@keyframes alkWordCut {
    to { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .alk-word-cut .alk-word-in { transform: none; animation: none !important; }
}

/* ==========================================================================
   About Us
   ========================================================================== */

.aboutus-section {
    /* Tight at the top so it sits close to the section above, with the
       breathing room kept underneath where it separates from Media. */
    padding: 0 0 clamp(4rem, 9vw, 7rem);
}

/* The label and social marks overlay the artwork, sitting in the negative
   space the clip path opens at the top. Constrained to 85% width so the
   social marks land in the notch rather than running past it, which is
   what the original does and what I had missed by making this a plain
   full-width row above the image. */
.aboutus-head {
    position: relative;
}

.aboutus-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

@media (min-width: 992px) {
    .aboutus-top {
        position: absolute;
        top: clamp(0.25rem, 1vw, 0.9rem);
        left: 0;
        width: 85%;
        z-index: 2;
    }
}

@media (max-width: 991.98px) {
    /* Too little room to overlay safely, so it sits above the artwork. */
    .aboutus-top {
        margin-bottom: 0.75rem;
        padding-top: 0.5rem;
    }
}

.aboutus-eyebrow {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
    font-family: 'Cinzel', 'Times New Roman', serif;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: clamp(0.75rem, 0.7rem + 0.2vw, 0.9rem);
    color: #cfc6bd;
}

.aboutus-mark {
    color: #a9866a;
    animation: alkSpin 9s linear infinite;
    display: inline-block;
}

@keyframes alkSpin { to { transform: rotate(360deg); } }

.aboutus-social {
    display: flex;
    gap: 0.6rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.aboutus-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border: 1px solid rgba(185, 158, 137, 0.28);
    border-radius: 8px;
    color: #cfc6bd;
    transition: color 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
}

.aboutus-social a:hover {
    color: #fff;
    border-color: #a9866a;
    background: rgba(169, 134, 106, 0.16);
}

.aboutus-figure {
    margin: 0;
    /* anchors the live studio mark overlaid on the tile */
    position: relative;
}

/* The studio mark floats over the empty tile rather than being baked into
   the image, so it stays vector-crisp and can run the same hover scramble
   as the navigation lockup. */
.aboutus-tile-mark {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    /* Ink strokes must pass through the mark to reach the canvas below. */
    pointer-events: none;
}

/* Ink reveal layers. Artwork under a canvas mask; both take the same
   notched clip as the tile so the frame shape holds. The artwork stays
   hidden until the mask above it has painted, so it cannot flash before
   the script runs, and it is lifted a little because both it and the
   mask are dark: what emerges should read brighter than the surface. */
.aboutus-reveal,
.aboutus-ink {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    clip-path: url(#alkimia-aboutus-clip);
}

.aboutus-reveal {
    object-fit: cover;
    /* Anchored to the top-left corner of the artwork: that is where the
       UPGRADES title and calligraphy live, so strokes near the tile's
       top-left uncover legible text rather than empty parchment. */
    object-position: left top;
    opacity: 0;
    filter: brightness(1.55) contrast(1.08);
}

.aboutus-figure.is-ink-ready .aboutus-reveal { opacity: 1; }

.aboutus-ink { z-index: 1; }

/* Doubled selector so this beats the base .alk-iksyr colour that is
   declared later in the file. */
.aboutus-tile-mark .aboutus-iksyr {
    width: 58%;
    max-width: 46rem;
    color: #816650;
}

.aboutus-figure svg {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 100 / 40;
}

.aboutus-stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem 2rem;
    padding: 1.25rem 0 2.5rem;
}

.aboutus-stats-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 2rem;
}

.aboutus-stats-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
}

.aboutus-stat {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin: 0;
}

.aboutus-stat-value {
    font-family: 'Cinzel', 'Times New Roman', serif;
    font-weight: 700;
    color: #a9866a;
}

.aboutus-stat-label {
    color: #b3aaa1;
}

.aboutus-stat-big .aboutus-stat-value {
    font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3rem);
    line-height: 1;
}

.aboutus-stat-big .aboutus-stat-label {
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.aboutus-body {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: clamp(2rem, 5vw, 4rem);
}

.aboutus-heading {
    font-size: clamp(1.9rem, 1.1rem + 2.8vw, 3.2rem);
    line-height: 1.12;
    margin: 0 0 1.75rem;
}

.aboutus-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.75rem;
}

.aboutus-aside {
    text-align: right;
}

.aboutus-name {
    font-family: 'Cinzel', 'Times New Roman', serif;
    font-size: 1.4rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #a9866a;
    margin: 0 0 0.25rem;
}

.aboutus-role {
    color: #b3aaa1;
    margin: 0 0 2rem;
}

.aboutus-prompt {
    margin: 0 0 1.25rem;
}

.button.aboutus-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-inline: auto 0;
    transition: gap 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}

.button.aboutus-btn:hover {
    gap: 1.1rem;
}

@media (max-width: 991.98px) {
    .aboutus-body { grid-template-columns: 1fr; }
    .aboutus-aside { text-align: left; }
    .button.aboutus-btn { margin-inline: 0; }
    .aboutus-stats-stack { align-items: flex-start; text-align: left; }
}

@media (max-width: 575.98px) {
    .aboutus-columns { grid-template-columns: 1fr; }
}

/* The 12rem gap above About Us is the previous section's bottom margin,
   not this section's padding, so it has to be closed from that side.
   Keyed off adjacency rather than a section id, so it still holds if the
   sections are reordered in the Customizer. */
.large-margin:has(+ .aboutus-section) {
    margin-bottom: 2rem;
}

@media (max-width: 991.98px) {
    .large-margin:has(+ .aboutus-section) {
        margin-bottom: 1.5rem;
    }
}

/* ==========================================================================
   Team slider
   Two identical runs side by side, each translating left by its own width
   plus the gap. When the first has fully left, the second sits exactly
   where it started, so the loop is seamless with no JS and no cloning at
   runtime. Hovering pauses it.
   ========================================================================== */

.team-section {
    --team-gap: 1.5rem;
    --team-duration: 46s;
    padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(4rem, 9vw, 7rem);
    overflow: hidden;
}

.team-intro {
    max-width: 46rem;
    margin: 0 auto clamp(2rem, 4vw, 3rem);
    text-align: center;
}

.team-intro p {
    margin: 0;
    color: #b3aaa1;
}

/* The rail is a real scroll container now: the drift is driven by script
   so that a pointer, a trackpad, or the arrows can take over mid-flight
   and hand it back. The scrollbar itself is hidden, since the arrows and
   the faded edges already say the row continues. */
.team-carousel {
    position: relative;
}

.team-marquee {
    display: flex;
    gap: var(--team-gap);
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    overscroll-behavior-x: contain;
    /* Softens both ends so cards enter and leave rather than being cut. */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.team-marquee::-webkit-scrollbar { display: none; }

.team-track {
    display: flex;
    flex-shrink: 0;
    gap: var(--team-gap);
    margin: 0;
    padding: 0;
    list-style: none;
    min-width: max-content;
}

/* Arrows: quiet until wanted, and out of the way of the cards. */
.team-nav {
    position: absolute;
    top: 50%;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    padding: 0;
    transform: translateY(-50%);
    border: 1px solid rgba(233, 226, 218, 0.18);
    border-radius: 50%;
    background: rgba(20, 17, 15, 0.72);
    -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
    color: #e9e2da;
    font-size: 1rem;
    cursor: pointer;
    opacity: 0.55;
    transition: opacity 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}

.team-nav-prev { left: clamp(0.5rem, 2vw, 1.75rem); }
.team-nav-next { right: clamp(0.5rem, 2vw, 1.75rem); }

.team-carousel:hover .team-nav,
.team-nav:focus-visible {
    opacity: 1;
}

.team-nav:hover,
.team-nav:focus-visible {
    background: #816650;
    border-color: #816650;
}

.team-nav[hidden] { display: none; }

@media (hover: none) {
    /* Touch scrolls the rail directly; the arrows would only cover cards. */
    .team-nav { display: none; }
}

.team-card {
    position: relative;
    flex: 0 0 auto;
    width: clamp(200px, 17vw, 250px);
    aspect-ratio: 40 / 55;
    overflow: hidden;
    border-radius: 14px;
    background: #17140f;
}

.team-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1);
    transition: filter 0.45s ease, transform 0.45s ease;
}

.team-card:hover img {
    filter: grayscale(0);
    transform: scale(1.03);
}

.team-card-meta {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0.7rem 0.9rem;
    background: linear-gradient(to top, rgba(10, 9, 8, 0.92), rgba(10, 9, 8, 0.72) 60%, transparent);
}

.team-card-meta h3 {
    margin: 0;
    font-size: clamp(0.95rem, 0.85rem + 0.25vw, 1.15rem);
    line-height: 1.2;
    color: #fff;
}

.team-card-meta p {
    margin: 0.15rem 0 0;
    font-size: 0.85rem;
    color: #b99e89;
}

@media (prefers-reduced-motion: reduce) {
    .team-track { animation: none; }
    .team-marquee {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
    }
    .team-card { scroll-snap-align: start; }
}

/* --- Closing statement under the team ------------------------------- */

.team-quote {
    max-width: 46rem;
    margin: clamp(3rem, 7vw, 5rem) auto 0;
    padding: 0;
    text-align: center;
}

.team-quote blockquote {
    margin: 0 0 2rem;
    font-size: clamp(1.15rem, 0.95rem + 0.7vw, 1.6rem);
    line-height: 1.55;
    color: #efe9e3;
}

.team-quote blockquote p { margin: 0; }

/* Quotation marks as a mark rather than punctuation typed into the copy,
   so the client cannot accidentally lose or double them. */
.team-quote blockquote::before {
    content: "\201C";
    display: block;
    font-family: 'Cinzel', 'Times New Roman', serif;
    font-size: 3rem;
    line-height: 0.6;
    color: #a9866a;
    opacity: 0.55;
    margin-bottom: 0.75rem;
}

/* Founder strip without a statement: tighter, no quote mark (client cut
   the statement in the v3 copy deck; filling the Customizer field brings
   the blockquote back). */
.team-quote-nameonly { margin-top: clamp(2rem, 5vw, 3.5rem); }

.team-quote figcaption {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
}

.team-quote-portrait {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 0.5rem;
    border: 1px solid rgba(185, 158, 137, 0.35);
}

.team-quote-name {
    font-family: 'Cinzel', 'Times New Roman', serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.95rem;
    color: #fff;
}

.team-quote-role {
    font-size: 0.9rem;
    color: #b3aaa1;
}

/* ==========================================================================
   FAQ
   Rebuilt from the reference component. The light/dark toggle is gone: this
   site is dark only, so a theme switch in one section is a demo affordance,
   not a feature. Everything else carries over, recoloured to the metals.
   ========================================================================== */

.faq-section {
    padding: clamp(3.5rem, 8vw, 6rem) 0;
}

.faq-inner {
    max-width: 62rem;
    margin: 0 auto;
}

/* --- The signal pill ------------------------------------------------- */

.faq-pill {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    width: fit-content;
    min-width: min(22rem, 100%);
    max-width: 100%;
    margin: 0 auto 2.5rem;
    padding: 0.7rem 1.3rem;
    border: 1px solid rgba(185, 158, 137, 0.22);
    border-radius: 9999px;
    background: rgba(20, 17, 15, 0.5);
    color: #cfc6bd;
    overflow: hidden;
    isolation: isolate;
    text-transform: uppercase;
    font-size: 0.62rem;
    letter-spacing: 0.35em;
}

.faq-pill-beam {
    position: absolute;
    inset: -110%;
    border-radius: 50%;
    pointer-events: none;
    background: conic-gradient(from 160deg, rgba(185, 158, 137, 0.3), transparent 32%, rgba(169, 134, 106, 0.26) 58%, transparent 78%, rgba(185, 158, 137, 0.2));
    animation: alkFaqBeam 18s linear infinite;
    opacity: 0.5;
    z-index: -1;
}

.faq-pill-label { flex: 0 0 auto; font-weight: 600; letter-spacing: 0.4em; white-space: nowrap; }

.faq-pill-meter {
    flex: 1 1 6rem;
    min-width: 4rem;
    height: 1px;
    background: linear-gradient(90deg, transparent, currentColor 35%, transparent 85%);
    transform: scaleX(0);
    transform-origin: left;
    animation: alkFaqMeter 5.8s ease-in-out infinite;
    opacity: 0.7;
}

.faq-pill-tick {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background: currentColor;
    box-shadow: 0 0 0 4px rgba(185, 158, 137, 0.12);
    animation: alkFaqTick 3.2s ease-in-out infinite;
}

@keyframes alkFaqBeam  { to { transform: rotate(360deg); } }
@keyframes alkFaqMeter {
    0%, 20%   { transform: scaleX(0); transform-origin: left; }
    45%, 60%  { transform: scaleX(1); transform-origin: left; }
    80%, 100% { transform: scaleX(0); transform-origin: right; }
}
@keyframes alkFaqTick {
    0%, 30% { transform: translateX(-6px); opacity: 0.4; }
    50%     { transform: translateX(2px);  opacity: 1; }
    100%    { transform: translateX(20px); opacity: 0; }
}

/* --- Rows ------------------------------------------------------------ */

.faq-list {
    list-style: none;
    margin: 2.5rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.faq-item {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(185, 158, 137, 0.16);
    border-radius: 20px;
    background: rgba(24, 21, 18, 0.55);
    backdrop-filter: blur(10px);
    transition: transform 0.45s ease, border-color 0.45s ease;
}

.faq-item:hover,
.faq-item:focus-within {
    transform: translateY(-2px);
    border-color: rgba(185, 158, 137, 0.32);
}

/* Glow follows the pointer. Coordinates come from the script as custom
   properties, so the gradient is the only thing repainting. */
.faq-item::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.45s ease;
    background: radial-gradient(240px circle at var(--faq-x, 50%) var(--faq-y, 50%), rgba(169, 134, 106, 0.16), transparent 70%);
}

.faq-item:hover::before,
.faq-item.is-open::before { opacity: 1; }

.faq-trigger {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    width: 100%;
    padding: 1.5rem 1.75rem;
    background: none;
    border: 0;
    text-align: left;
    cursor: pointer;
    color: inherit;
}

.faq-trigger:focus-visible {
    outline: 2px solid rgba(185, 158, 137, 0.6);
    outline-offset: -4px;
}

.faq-mark {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.6rem;
    height: 2.6rem;
    border: 1px solid rgba(185, 158, 137, 0.3);
    border-radius: 50%;
    background: rgba(169, 134, 106, 0.08);
    transition: transform 0.45s ease;
}

.faq-item:hover .faq-mark { transform: scale(1.06); }

.faq-mark svg {
    width: 1.1rem;
    height: 1.1rem;
    color: #d8cec4;
    transition: transform 0.45s cubic-bezier(0.22, 0.68, 0.24, 1);
}

/* Plus becomes a cross, rather than swapping icons. */
.faq-item.is-open .faq-mark svg { transform: rotate(45deg); }

.faq-head {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 1rem;
}

.faq-q {
    font-family: 'Cinzel', 'Times New Roman', serif;
    font-size: clamp(1rem, 0.9rem + 0.4vw, 1.25rem);
    line-height: 1.3;
    color: #fff;
}

.faq-tag {
    margin-left: auto;
    padding: 0.3rem 0.75rem;
    border: 1px solid rgba(185, 158, 137, 0.25);
    border-radius: 9999px;
    /* Cinzel rather than the body serif. Cormorant Garamond's bold is very
       nearly as thin as its regular at this size, so weight 700 alone made
       almost no visible difference. Cinzel is the same face already used for
       the questions, is drawn for all caps, and holds a real stroke at 0.6rem. */
    font-family: 'Cinzel', 'Times New Roman', serif;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: #d8cec4;
    white-space: nowrap;
}

/* Animating grid rows rather than max-height: a max-height transition needs
   a guessed ceiling, and anything taller than the guess is clipped. */
.faq-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.45s cubic-bezier(0.22, 0.68, 0.24, 1);
}

.faq-item.is-open .faq-panel { grid-template-rows: 1fr; }

.faq-panel-inner {
    overflow: hidden;
    min-height: 0;
}

.faq-panel-inner p {
    margin: 0;
    padding: 0 1.75rem 1.6rem 5.6rem;
    color: #b3aaa1;
}

@media (max-width: 575.98px) {
    .faq-panel-inner p { padding-left: 1.75rem; }
    .faq-tag { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .faq-pill-beam, .faq-pill-meter, .faq-pill-tick { animation: none; }
    .faq-item, .faq-panel, .faq-mark svg { transition: none; }
}

/* ==========================================================================
   JOIN US
   Ported from the "Let's work together" component. The reference is a light
   theme leaning on --foreground / --border tokens; those are mapped onto the
   metals here rather than introducing a second colour system.
   ========================================================================== */

.join-section {
    padding: clamp(5rem, 12vw, 9rem) 0;
    text-align: center;
}

.join-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3rem;
}

/* --- Availability line ----------------------------------------------- */

.join-status {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
    font-family: 'Cinzel', 'Times New Roman', serif;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: #b3aaa1;
}

.join-dot {
    position: relative;
    display: inline-flex;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background: #b99e89;
}

/* The halo is a second ring rather than a box-shadow so it can scale past
   the dot without pushing the text along with it. */
.join-dot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: inherit;
    animation: alkJoinPing 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes alkJoinPing {
    0%   { transform: scale(1);   opacity: 0.75; }
    75%, 100% { transform: scale(2.4); opacity: 0; }
}

/* --- The headline, which is the link --------------------------------- */

.join-link {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

/* The vendor sheet underlines hovered anchors with enough specificity to
   reach through the flex column and paint a bar under every headline line,
   so this one carries !important. */
a.join-link,
a.join-link:hover,
a.join-link:focus-visible { text-decoration: none !important; color: inherit; }

.join-link:focus-visible {
    outline: 2px solid rgba(185, 158, 137, 0.6);
    outline-offset: 1.5rem;
    border-radius: 8px;
}

.join-title {
    display: block;
    margin: 0;
    font-family: 'Cinzel', 'Times New Roman', serif;
    font-size: clamp(2.75rem, 1.5rem + 5.5vw, 6rem);
    font-weight: 400;
    line-height: 1.02;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: #fff;
}

/* Each line clips its own child, so the lift on hover reads as the words
   sliding up behind a mask rather than the whole heading moving. */
.join-line {
    display: block;
    overflow: hidden;
}

.join-line > span {
    display: block;
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.join-line:nth-child(2) > span { transition-delay: 0.075s; }

.join-link:hover .join-line > span,
.join-link:focus-visible .join-line > span { transform: translateY(-8%); }

.join-title-soft { color: rgba(255, 255, 255, 0.42); }

/* --- Arrow ------------------------------------------------------------ */

.join-arrow {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    margin-top: 0.5rem;
    color: #e8e1da;
}

.join-arrow-ring {
    position: absolute;
    inset: 0;
    border: 1px solid rgba(185, 158, 137, 0.3);
    border-radius: 9999px;
    background: transparent;
    transition: transform 0.5s ease-out, background-color 0.5s ease-out, border-color 0.5s ease-out;
}

.join-link:hover .join-arrow-ring,
.join-link:focus-visible .join-arrow-ring {
    transform: scale(1.1);
    background: #e8e1da;
    border-color: #e8e1da;
}

.join-arrow svg {
    position: relative;
    width: 1.5rem;
    height: 1.5rem;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), color 0.5s ease-out;
}

.join-link:hover .join-arrow svg,
.join-link:focus-visible .join-arrow svg {
    transform: translate(2px, -2px);
    color: #14110f;
}

/* --- Flanking rules --------------------------------------------------- */

.join-rule {
    position: absolute;
    top: 50%;
    width: 2rem;
    height: 1px;
    background: rgba(185, 158, 137, 0.45);
    opacity: 0.5;
    transition: transform 0.5s ease, opacity 0.5s ease;
}

.join-rule-left  { left: -3.5rem;  transform: translateY(-50%) scaleX(1); transform-origin: right; }
.join-rule-right { right: -3.5rem; transform: translateY(-50%) scaleX(1); transform-origin: left; }

.join-link:hover .join-rule,
.join-link:focus-visible .join-rule { opacity: 1; }

.join-link:hover .join-rule-left,
.join-link:focus-visible .join-rule-left { transform: translateY(-50%) scaleX(1.5); }

.join-link:hover .join-rule-right,
.join-link:focus-visible .join-rule-right { transform: translateY(-50%) scaleX(1.5); }

/* --- Footer ----------------------------------------------------------- */

.join-foot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    max-width: 32rem;
}

.join-foot p {
    margin: 0;
    color: #b3aaa1;
}

.join-email {
    font-family: 'Cinzel', 'Times New Roman', serif;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: rgba(216, 206, 196, 0.65);
    transition: color 0.3s ease;
}

.join-email:hover { color: #d8cec4; }

/* The rules sit outside the container on small screens, so they go. */
@media (max-width: 767.98px) {
    .join-rule { display: none; }
    .join-section { padding: 4rem 0; }
    .join-inner { gap: 2.25rem; }
}

@media (prefers-reduced-motion: reduce) {
    .join-dot::after { animation: none; }
    .join-line > span, .join-arrow-ring, .join-arrow svg, .join-rule, .join-embed { transition: none; }
}

/* --- Embedded application form ---------------------------------------- */

.join-embed {
    display: grid;
    grid-template-rows: 0fr;
    width: 100%;
    transition: grid-template-rows 0.6s cubic-bezier(0.22, 0.68, 0.24, 1);
}

.join-open .join-embed { grid-template-rows: 1fr; }

.join-embed-clip {
    overflow: hidden;
    min-height: 0;
}

/* Fixed height inside the clip: the typeform iframe fills whatever box it
   is given, so the box has to be the one deciding.
   Sized against the longest question rather than an average one: the
   discipline list runs to eight options plus the OK row, and at 46rem the
   last rows sat below the fold, which read as the form being cut off
   rather than scrollable. */
.join-embed-frame {
    height: min(88vh, 58rem);
    max-width: 56rem;
    margin: 2.5rem auto 0.5rem;
    border: 1px solid rgba(185, 158, 137, 0.2);
    border-radius: 20px;
    overflow: hidden;
    background: #14110f;
}

/* Every wrapper between the frame and the iframe, not just the direct
   child. The embed script nests its iframe inside a widget div carrying an
   inline height of 500px, so the form stopped there while the frame kept
   going: a short form with its own scrollbar and dead space below. Inline
   styles outrank any selector, hence the importants. Nothing inside the
   frame except these wrappers, so the blanket div selector is safe. */
.join-embed-frame div,
.join-embed-frame iframe {
    width: 100% !important;
    height: 100% !important;
    border: 0;
}

/* While the form is open the arrow turns to point down at it, and holds
   the filled state so the control reads as active rather than hovered. */
.join-open .join-arrow svg { transform: rotate(90deg); color: #14110f; }
.join-open .join-arrow-ring { transform: scale(1.1); background: #e8e1da; border-color: #e8e1da; }

@media (max-width: 767.98px) {
    .join-embed-frame { height: min(90vh, 48rem); border-radius: 14px; }
}

/* --- Section separator ------------------------------------------------- */

/* Used between team and Join Us, and between media and FAQ. In both places
   the sections were carrying a full pad each and drifted apart; the rule now
   does the separating, so the padding does not have to.
   Every tightening below is keyed off adjacency rather than a section id, so
   it still holds if a section is switched off or reordered, and the
   neighbours keep their normal spacing when they are not adjacent. */
.team-section:has(+ .join-section) { padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.large-margin:has(+ .faq-section)  { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }

.join-section,
.faq-section { padding-top: 0; }

.alk-rule {
    display: flex;
    align-items: center;
    gap: 1rem;
    max-width: 34rem;
    margin: 0 auto clamp(2.5rem, 5vw, 3.5rem);
}

/* Fades to nothing at the outer ends so it reads as a mark rather than a
   border cutting the page in half. */
.alk-rule-line {
    flex: 1 1 auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(185, 158, 137, 0.4));
}

.alk-rule-line:last-child {
    background: linear-gradient(90deg, rgba(185, 158, 137, 0.4), transparent);
}

.alk-rule-mark {
    flex: 0 0 auto;
    width: 0.45rem;
    height: 0.45rem;
    transform: rotate(45deg);
    border: 1px solid rgba(185, 158, 137, 0.55);
}

/* ==========================================================================
   IKSYR studio mark
   The nav now carries the studio mark instead of the game wordmark, and the
   footer carries both as a credit line.
   ========================================================================== */

.alk-iksyr {
    display: block;
    height: auto;
    fill: currentColor;
    color: #fff;
}

.alk-iksyr .alk-letter path,
.alk-iksyr-emblem { fill: currentColor; }

/* --- Alembic smoke ------------------------------------------------------
   The plume sways and stretches from the bottle's neck while two blurred
   copies of it take turns rising away and thinning, so the vessel reads
   as actively smoking at a glance. Everything pivots on the clip seam at
   the neck (40, 54) so the cut in the artwork never opens. Offset periods
   keep the loop from ever looking mechanical. */
.alk-ik-smoke,
.alk-ik-smoke-ghost {
    transform-box: view-box;
    transform-origin: 40px 54px;
}

.alk-ik-smoke {
    animation: alk-smoke-sway 5.5s ease-in-out infinite;
}

.alk-ik-smoke-ghost {
    filter: blur(1.4px);
    opacity: 0;
    animation: alk-smoke-rise 5s cubic-bezier(0.3, 0, 0.35, 1) infinite;
}

.alk-ik-smoke-ghost-b {
    animation-delay: -2.5s;
    animation-duration: 6s;
}

@keyframes alk-smoke-sway {
    0%, 100% { transform: rotate(0deg) scaleY(1); }
    30%      { transform: rotate(5deg) translateY(-1px) scaleY(1.05); }
    55%      { transform: rotate(-3.5deg) translateY(-1.8px) scaleY(1.08); }
    80%      { transform: rotate(2.5deg) translateY(-0.6px) scaleY(1.02); }
}

@keyframes alk-smoke-rise {
    0%   { transform: translateY(1.5px) scale(0.95); opacity: 0; }
    18%  { opacity: 0.5; }
    55%  { opacity: 0.26; }
    100% { transform: translateY(-16px) translateX(-2.5px) scale(1.22); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .alk-ik-smoke { animation: none; }
    .alk-ik-smoke-ghost { animation: none; opacity: 0; }
}

/* Nav -------------------------------------------------------------------- */

/* Only the ratio changes. The nav logo height still comes from
   --nav-logo-h on #main-logo, so there is one number controlling it rather
   than two that can drift apart. The inherited aspect-ratio is the ALKIMYA
   wordmark's 1002/196 and has to be replaced, otherwise the box is sized
   for a mark five times wider than this one. */
.nav-logo-iksyr {
    aspect-ratio: 363 / 142;
}

/* Footer credit ---------------------------------------------------------- */

.footer-credit {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.55rem;
    margin: 1.25rem 0 0;
}

.footer-credit-label {
    font-family: 'Cinzel', 'Times New Roman', serif;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: rgba(179, 170, 161, 0.75);
}

.footer-credit-mark {
    display: block;
    color: #d8cec4;
    transition: color 0.3s ease;
}

.footer-credit-mark:hover,
.footer-credit-mark:focus-visible { color: #fff; }

.footer-iksyr {
    width: auto;
    height: 1.75rem;
}

@media (max-width: 991.98px) {
    .footer-credit { align-items: center; }
}

/* ==========================================================================
   Trailer: hover state on the video band, and the pop-up player
   ========================================================================== */

.video-has-trailer { position: relative; cursor: pointer; }

/* The loop dims behind the invitation rather than the overlay sitting on
   top at full contrast, so the caption stays readable over any frame. */
.video-has-trailer video {
    transition: filter 0.5s ease, transform 0.7s cubic-bezier(0.22, 0.68, 0.24, 1);
}

.video-has-trailer.is-peeking video {
    filter: brightness(0.42) saturate(0.85);
    transform: scale(1.02);
}

.video-cta {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: #fff;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.video-has-trailer.is-peeking .video-cta,
.video-cta:focus-visible { opacity: 1; }

.video-cta:focus-visible { outline: 2px solid rgba(185, 158, 137, 0.8); outline-offset: -1rem; }

/* Ring and disc, as in the reference: a wide translucent halo with a solid
   disc inside it, both growing on hover. */
.video-cta-ring {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 7rem;
    height: 7rem;
    border-radius: 9999px;
    background: rgba(185, 158, 137, 0.14);
    backdrop-filter: blur(6px);
    transform: scale(0.9);
    transition: transform 0.4s cubic-bezier(0.22, 0.68, 0.24, 1);
}

.video-has-trailer.is-peeking .video-cta-ring { transform: scale(1); }

.video-cta-disc {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5rem;
    height: 5rem;
    border-radius: 9999px;
    background: linear-gradient(to bottom, rgba(185, 158, 137, 0.55), #b99e89);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
    transition: transform 0.4s cubic-bezier(0.22, 0.68, 0.24, 1);
}

.video-cta:hover .video-cta-disc { transform: scale(1.12); }

/* Nudged right: the triangle's optical centre sits left of its bounding
   box, so a mathematically centred play mark reads as off centre. */
.video-cta-disc svg {
    width: 2rem;
    height: 2rem;
    margin-left: 0.15rem;
    fill: #14110f;
}

.video-cta-label {
    font-family: 'Cinzel', 'Times New Roman', serif;
    font-size: clamp(1.1rem, 0.6rem + 2.1vw, 2.6rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.28em;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.8);
    transform: translateY(0.5rem);
    transition: transform 0.4s cubic-bezier(0.22, 0.68, 0.24, 1);
}

.video-has-trailer.is-peeking .video-cta-label { transform: translateY(0); }

/* --- Dialog ------------------------------------------------------------ */

.trailer-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1rem, 4vw, 3rem);
}

.trailer-modal[hidden] { display: none; }

.trailer-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 8, 7, 0.72);
    backdrop-filter: blur(14px) saturate(0.9);
    opacity: 0;
    transition: opacity 0.35s ease;
}

.trailer-modal.is-open .trailer-backdrop { opacity: 1; }

.trailer-frame {
    position: relative;
    width: 100%;
    max-width: 64rem;
    opacity: 0;
    transform: scale(0.94);
    transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.22, 0.68, 0.24, 1);
}

.trailer-modal.is-open .trailer-frame { opacity: 1; transform: scale(1); }

.trailer-stage {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border: 1px solid rgba(185, 158, 137, 0.35);
    border-radius: 16px;
    background: #000;
    box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6);
}

.trailer-stage iframe,
.trailer-stage video {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.trailer-close {
    position: absolute;
    top: -3.25rem;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 1px solid rgba(185, 158, 137, 0.35);
    border-radius: 9999px;
    background: rgba(20, 17, 15, 0.6);
    backdrop-filter: blur(8px);
    color: #e8e1da;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.trailer-close:hover,
.trailer-close:focus-visible { background: #e8e1da; color: #14110f; border-color: #e8e1da; }

.trailer-close svg { width: 1.15rem; height: 1.15rem; }

/* The close button needs room above the frame; below that it would sit off
   screen, so on short viewports it moves inside the top corner. */
@media (max-height: 520px), (max-width: 575.98px) {
    .trailer-close { top: 0.6rem; right: 0.6rem; }
}

body.has-trailer-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
    .video-has-trailer video,
    .video-cta, .video-cta-ring, .video-cta-disc, .video-cta-label,
    .trailer-backdrop, .trailer-frame { transition: none; }
    .trailer-frame { transform: none; }
}

/* Holding state: same dim and fade as the trailer invitation, without the
   disc. Not a button and not clickable, so nothing invites a click that
   would do nothing. */
.video-cta-soon {
    margin: 0;
    cursor: default;
    pointer-events: none;
}

.video-cta-soon .video-cta-label {
    color: rgba(232, 225, 218, 0.9);
    letter-spacing: 0.32em;
}

/* ==========================================================================
   Section navigation
   ========================================================================== */

/* The navbar is fixed, so an anchor lands with the section's first line
   tucked underneath it. scroll-margin-top pushes the landing point down by
   the bar's height plus a little air, and applies to keyboard focus and
   browser restore as well as clicks, which a JS offset would not. */
#hero, #about, #features, #aboutus, #team, #join, #media, #faq, #cta {
    scroll-margin-top: calc(var(--nav-h, 5rem) + 1rem);
}

/* Marks the section currently in view. Kept quiet: the nav is small caps at
   a small size, so a colour shift and a hairline read more clearly than
   weight, which would also reflow the row as the active item changed. */
.navbar-nav .nav-link {
    position: relative;
    transition: color 0.3s ease;
}

.navbar-nav .nav-link.is-current { color: #fff; }

.navbar-nav .nav-link.is-current::after {
    content: "";
    position: absolute;
    left: 0.35rem;
    right: 0.35rem;
    bottom: -0.35rem;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(185, 158, 137, 0.9), transparent);
}

@media (prefers-reduced-motion: reduce) {
    .navbar-nav .nav-link { transition: none; }
}

/* Still standing in for the loop. The vendor rules size #bgvid as a video,
   and an img needs the same treatment to fill the band rather than sit at
   its intrinsic size. */
.video-is-still #bgvid {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Nothing to pause, so the caption is simply on, over a fixed dim rather
   than one that arrives on hover.
   Kept light on purpose. The frame is already almost black, so the 45% this
   started at turned the band into a rectangle of nothing. The caption is
   white on a dark scene and carries its own shadow, so it does not need the
   help; the wash is only here to stop the brighter lamp in the middle
   competing with the text. */
.video-is-still { position: relative; cursor: default; }

.video-is-still::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(10, 8, 7, 0.34) 0%, rgba(10, 8, 7, 0.12) 60%, rgba(10, 8, 7, 0.12) 100%);
    pointer-events: none;
}

.video-cta-static {
    opacity: 1;
    z-index: 1;
}

/* The label is a block now, so it needs its own centring and a width to wrap
   inside. Tracking eases off as the type grows: 0.28em is right at caption
   size and becomes a gap you could park a car in at display size. */
.video-cta-static .video-cta-label {
    max-width: 22ch;
    margin: 0;
    text-align: center;
    line-height: 1.25;
    letter-spacing: 0.18em;
    transform: none;
}

@media (max-width: 991.98px) {
    .video-is-still #bgvid { height: auto; }
}


/* ==========================================================================
   Hero wordmark scramble
   The same decode the navigation mark uses, on the hero. The noise is drawn
   from the letters of الكيمياء, al-kimiya, alchemy, rather than the whole
   Arabic alphabet, so everything that flickers past belongs to the word the
   name descends from.
   ========================================================================== */

/* Only the ink is hoverable in SVG, so without a target the effect would
   retrigger every time the pointer crossed a gap between letters. */
.hero-wordmark-svg { pointer-events: none; }
.alk-hero-hit { pointer-events: all; cursor: default; }

/* Same multiplier as the nav. Lower is smaller; the only number to change if
   the Arabic sits wrong against the capitals. */
.hero-wordmark-svg { --alk-noise-fit: 0.5; }

/* The noise slots are real <text>, so dragging anywhere on the page selected
   them and the browser drew a highlight box around the whole mark. The nav
   never showed it because its slots are tiny. A logo is not text to copy.
   
   user-select: none on the svg alone was not enough, and made it worse in one
   case: an unselectable element cannot be selected as TEXT, so a selection
   reaching it takes it as a single OBJECT, and the browser paints that as a
   filled rectangle over the whole box. Which is the blue frame around the
   logo. The rest of the hero logo, including the h1 wrapping it, still
   allowed selection, so a click could start one there and swallow the mark.
   The whole lockup is unselectable now, and the layers are not draggable,
   which also stops the ghost image on drag. It holds no readable text, so
   nothing is lost by taking it out of selection entirely. */
.hero-logo-heading,
.hero-logo-stack,
.hero-par,
.hero-wordmark-svg,
.nav-logo-svg,
#main-logo {
    -webkit-user-select: none;
    user-select: none;
}

/* Decorative layers: not draggable, and clicks pass through to the hit rect
   underneath rather than landing on an image. */
img.hero-logo-layer {
    -webkit-user-drag: none;
    pointer-events: none;
}

/* The noise slots are the only real text inside the mark, and they were still
   taking pointer events: pointer-events on the <svg> does not reach SVG
   children the way it would in HTML. Clicking "on the Arabic" was therefore
   landing on live text. Only the hit rect needs events; the noise never does. */
.alk-noise-layer { pointer-events: none; }

/* The blue frame, finally identified from the screen recording: a focus
   ring, not a selection. Measured off the video, the box is a 2px blue line
   exactly on the svg's bounds with no tint inside, which rules out a
   selection fill. It appears on click and tracks the logo as the parallax
   moves it.
   
   It never reproduced here because focusing a non interactive element on
   click is a platform behaviour, not a page one: macOS Full Keyboard Access
   makes Chrome focus and ring things it otherwise would not.
   
   Safe to suppress. This is a decorative mark inside an h1: no link, no
   control, nothing to activate, so the ring communicates nothing and losing
   it costs no keyboard user anything. The nav logo is a real link and keeps
   its ring. */
.hero-logo-heading:focus,
.hero-logo-heading :focus,
.hero-wordmark-svg:focus,
.alk-hero-hit:focus {
    outline: none;
    box-shadow: none;
}

.hero-logo-heading {
    -webkit-tap-highlight-color: transparent;
}

/* And a backstop. I could not reproduce the highlight here across click,
   double click and drag, which means it depends on input device or platform,
   so blocking one route to it is not enough. Whatever manages to select part
   of the logo, this paints nothing: no background, no box. The mark holds no
   text worth copying, so suppressing the highlight costs nothing. */
.hero-logo-heading ::selection,
.hero-logo-heading::selection,
#main-logo ::selection,
#main-logo::selection {
    background: transparent;
}

.hero-logo-heading ::-moz-selection,
#main-logo ::-moz-selection {
    background: transparent;
}

/* Colour comes from the group so .is-settling can reach the paths. The hero
   glyphs used to carry fill="white" on every path, and a presentation
   attribute on the child beats an inherited value from the parent, so the
   metal never arrived: the letters just snapped back to white. */
.hero-wordmark-svg { fill: #fff; }

/* The noise arrives on the same delay as the first letter, so the decode is
   part of the wordmark appearing rather than a second event on top of it. */
.hero-wordmark-svg .alk-noise-layer {
    opacity: 0;
    transition: opacity var(--alk-word-dur) ease-out;
    transition-delay: var(--alk-word-start);
}

body.alkimia-loaded .hero-wordmark-svg .alk-noise-layer { opacity: 1; }

/* No transition rule for .alk-letter here on purpose. The shared one already
   covers it, and re-declaring it broke the settle: .alk-letter.is-settling
   sets transition: none so the metal is THERE on arrival and only the return
   to white animates. My copy had equal specificity and came later in the
   file, so it reinstated a transition on fill, the colour started crawling
   from white towards metal, and the class was removed a frame later. The
   letters never got near brown. Same specificity, later wins.
   The intro's opacity lives on .alk-glyph, one level down, so the two
   multiply rather than competing. */


/* ==========================================================================
   Modal polish
   Two fixes for the feature and system popups.

   1. No layout shift. Bootstrap hides the page scrollbar while a modal is
      open and pads the body to compensate, which nudges the whole page
      left and back. Reserving the scrollbar gutter permanently means
      nothing moves when the scrollbar goes, so the compensation padding
      is cancelled everywhere Bootstrap applies it.

   2. Focus. The backdrop blurs the page behind it instead of only
      dimming, so the popup text carries the eye.
   ========================================================================== */

html {
    scrollbar-gutter: stable;
}

body.modal-open,
.modal-open .fixed-top,
.modal-open .sticky-top,
.modal-open .navbar {
    padding-right: 0 !important;
}

.modal-backdrop {
    background: rgba(10, 8, 7, 0.55);
    -webkit-backdrop-filter: blur(9px);
    backdrop-filter: blur(9px);
}

.modal-backdrop.show {
    opacity: 1;
}


/* ==========================================================================
   Motion button
   Port of the MotionButton reference: a quiet pill in which the brand
   circle swells to fill the whole button on hover while the arrow slides
   forward and the label inverts onto the metal.
   ========================================================================== */

.alk-motion-btn {
    position: relative;
    display: inline-block;
    width: min(21rem, 86vw);
    padding: 4px;
    border-radius: 999px;
    background: rgba(233, 226, 218, 0.05);
    border: 1px solid rgba(233, 226, 218, 0.12);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

.alk-motion-btn-circle {
    display: block;
    width: 48px;
    height: 48px;
    border-radius: 999px;
    background: #816650;
    transition: width 0.5s ease;
}

.alk-motion-btn:hover .alk-motion-btn-circle,
.alk-motion-btn:focus-visible .alk-motion-btn-circle {
    width: 100%;
}

.alk-motion-btn-icon {
    position: absolute;
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
    transition: transform 0.5s ease;
    color: #14110f;
    font-size: 1.05rem;
    line-height: 1;
}

.alk-motion-btn:hover .alk-motion-btn-icon,
.alk-motion-btn:focus-visible .alk-motion-btn-icon {
    transform: translateY(-50%) translateX(0.4rem);
}

.alk-motion-btn-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-left: 0.9rem;
    white-space: nowrap;
    font-family: 'Cinzel', 'Times New Roman', serif;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #e9e2da;
    transition: color 0.5s ease;
}

.alk-motion-btn:hover .alk-motion-btn-label,
.alk-motion-btn:focus-visible .alk-motion-btn-label {
    color: #14110f;
}

/* The old form styling reserved space under the heading; the section now
   ends at the button, so give it a little settled air instead. */
.newsletter-container .alk-motion-btn { margin-top: 1.4rem; }


/* ==========================================================================
   Fixed backgrounds in Safari
   The vendor stylesheet pins the hero, about and wishlist artwork with
   background-attachment: fixed. Safari cannot composite that: it repaints
   the image against the scroll position every frame, so the artwork
   visibly lurches, worst on the tall hero.

   Safari gets the artwork scrolling with its section instead. The pinned
   look is lost there, but the movement is smooth, and the hero keeps its
   own parallax layers, which are transform-based and unaffected. Other
   engines keep the pinned backgrounds exactly as before.

   Targeted with the -webkit-hyphens support query, which is true in Safari
   and false in Chrome and Firefox.
   ========================================================================== */

@supports (-webkit-hyphens: none) {
    .hero-section,
    .about-section,
    .cta-section {
        background-attachment: scroll;
    }
}


/* ==========================================================================
   Press kit
   Deliberately quiet in both places it appears. Press know to look for it;
   players do not need it competing with Wishlist.
   ========================================================================== */

.footer-press {
    display: inline-block;
    font-family: 'Cinzel', 'Times New Roman', serif;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: rgba(179, 170, 161, 0.75);
    text-decoration: none;
    transition: color 0.25s ease;
}

.footer-press:hover,
.footer-press:focus-visible {
    color: #b99e89;
}

/* In the bar it sits a shade back from the section links, so the row still
   reads as the site's own navigation with one outbound extra. Smaller as
   well as dimmer, which is what separates a utility link from the
   sections; the rest of the bar keeps its size. */
.navbar-nav .nav-link-press {
    font-size: clamp(0.72rem, 0.64rem + 0.18vw, 0.84rem);
    opacity: 0.62;
}

.nav-link-press:hover,
.nav-link-press:focus-visible {
    opacity: 1;
}