/* JoelySpark component styles. Classes only — every value comes from a token.
   Pseudo-states (hover, focus-visible, active, disabled) live here because they
   cannot be expressed as inline style objects. */

/* ---------- Layout helpers ---------- */
.js-page{padding-inline:var(--js-page-margin)}
.js-grid{display:grid;grid-template-columns:repeat(var(--js-grid-columns),minmax(0,1fr));gap:var(--js-grid-gutter)}
.js-section{padding-block:var(--js-section-padding-block);padding-inline:var(--js-page-margin)}
.js-section--tight{padding-block:var(--js-section-padding-block-tight)}
.js-stack{display:flex;flex-direction:column}

/* ---------- Identity ---------- */
.js-logo{display:block;width:auto;height:var(--js-logo-height,48px)}
.js-logo--min-guard{min-height:24px}

/* ---------- Buttons ---------- */
.js-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--js-space-3);min-height:var(--js-control-height);padding-inline:var(--js-control-padding-inline);border:var(--js-border-hairline) solid transparent;border-radius:var(--js-radius-hairline);font-family:var(--js-font-body);font-size:var(--js-text-label);font-weight:var(--js-weight-label);letter-spacing:var(--js-tracking-label);text-transform:uppercase;line-height:1;cursor:pointer;position:relative;overflow:hidden;background:none;color:inherit;text-decoration:none;background-image:none;transition:background-color var(--js-motion-fast) var(--js-ease-standard),color var(--js-motion-fast) var(--js-ease-standard),border-color var(--js-motion-fast) var(--js-ease-standard),transform var(--js-motion-fast) var(--js-ease-standard)}
.js-button--sm{min-height:var(--js-control-height-sm);min-width:var(--js-hit-area-min);padding-inline:20px}
@media (max-width:639px){.js-button{min-height:var(--js-control-height-touch)}}
.js-button__arrow{display:inline-block;transition:transform var(--js-motion-fast) var(--js-ease-out)}
.js-button:hover .js-button__arrow{transform:translateX(var(--js-cta-arrow-travel))}
/* the gold line crosses the button on hover */
.js-button::after{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--js-gold-line-max);background:var(--js-color-gold);transform:scaleX(0);transform-origin:left;transition:transform var(--js-motion-fast) var(--js-ease-out)}
.js-button:hover::after{transform:scaleX(1)}
.js-button--primary{background:var(--js-button-primary-bg);color:var(--js-button-primary-fg)}
.js-button--primary:hover{background:var(--js-button-primary-bg-hover)}
.js-button--secondary{background:transparent;color:var(--js-button-secondary-fg);border-color:var(--js-button-secondary-border)}
.js-button--secondary:hover{background:var(--js-gold-a14)}
.js-button:active{transform:translateY(1px)}
.js-button:focus-visible{outline:var(--js-focus-ring-width) solid var(--js-focus-ring);outline-offset:var(--js-focus-ring-offset)}
.js-button[disabled],.js-button[aria-disabled="true"]{opacity:.38;cursor:not-allowed;pointer-events:none}

/* ---------- Links ---------- */
.js-link{color:var(--js-link-fg);text-decoration:none;background-image:linear-gradient(var(--js-link-underline),var(--js-link-underline));background-repeat:no-repeat;background-position:0 100%;background-size:0 var(--js-gold-line-max);padding-bottom:2px;transition:background-size var(--js-motion-fast) var(--js-ease-out)}
.js-link:hover,.js-link:focus-visible{background-size:100% var(--js-gold-line-max)}
.js-link--email{font-family:var(--js-font-display);font-size:var(--js-text-h3);letter-spacing:var(--js-tracking-display);background-size:100% var(--js-gold-line-min)}
.js-link--email:hover{background-size:100% var(--js-gold-line-max)}
.js-link[aria-disabled="true"]{opacity:.38;pointer-events:none}

/* ---------- Navigation ---------- */
.js-header{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:var(--js-space-6);padding:var(--js-space-5) var(--js-page-margin);transition:background-color var(--js-motion-base) var(--js-ease-standard),border-color var(--js-motion-base) var(--js-ease-standard)}
.js-header--transparent{background:transparent;border-bottom:var(--js-border-hairline) solid transparent}
.js-header--ivory{background:var(--js-ivory-a88);backdrop-filter:saturate(1) blur(2px);border-bottom:var(--js-border-hairline) solid var(--js-black-a14)}
.js-header--black{background:var(--js-black-a88);backdrop-filter:saturate(1) blur(2px);border-bottom:var(--js-border-hairline) solid var(--js-white-a14)}
.js-nav{display:flex;align-items:center;gap:var(--js-space-7)}
.js-navlink{position:relative;display:inline-flex;align-items:center;min-height:var(--js-hit-area-min);font-size:var(--js-font-size-navigation-min);font-weight:var(--js-weight-label);letter-spacing:var(--js-tracking-label);text-transform:uppercase;color:inherit;text-decoration:none;background:none;opacity:.72;transition:opacity var(--js-motion-fast) var(--js-ease-standard)}
.js-navlink::after{content:"";position:absolute;left:0;bottom:calc(50% - .95em);height:var(--js-gold-line-min);width:100%;background:var(--js-color-gold);transform:scaleX(0);transform-origin:left;transition:transform var(--js-motion-fast) var(--js-ease-out)}
.js-navlink:hover{opacity:1}
.js-navlink:hover::after{transform:scaleX(1)}
.js-navlink[aria-current="page"]{opacity:1}
.js-navlink[aria-current="page"]::after{transform:scaleX(1);height:var(--js-gold-line-max)}
.js-navlink:active{opacity:.6}
.js-navlink:focus-visible{outline:var(--js-focus-ring-width) solid var(--js-focus-ring);outline-offset:var(--js-focus-ring-offset)}
.js-menubutton{display:inline-flex;flex:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:var(--js-hit-area-min);min-width:var(--js-hit-area-min);height:var(--js-hit-area-min);padding:0;border:0;background:none;cursor:pointer;color:inherit}
.js-menubutton span{display:block;height:var(--js-gold-line-max);width:22px;background:currentColor;transition:transform var(--js-motion-fast) var(--js-ease-out),opacity var(--js-motion-fast) var(--js-ease-out)}
.js-menubutton[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.js-menubutton[aria-expanded="true"] span:nth-child(2){opacity:0}
.js-menubutton[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.js-menubutton:focus-visible{outline:var(--js-focus-ring-width) solid var(--js-focus-ring);outline-offset:var(--js-focus-ring-offset)}
/* ---------- Mobile side drawer (v1.1 — replaces the full-screen menu) ---------- */
.js-drawer-root{position:fixed;inset:0;z-index:60}
.js-drawer-root[hidden]{display:none}
.js-drawer__overlay{position:absolute;inset:0;background:var(--js-drawer-backdrop);animation:js-fade-in var(--js-motion-fast) var(--js-ease-out) both}
.js-drawer{position:absolute;top:0;right:0;width:var(--js-drawer-width);max-width:100%;height:100dvh;display:flex;flex-direction:column;gap:var(--js-space-6);padding:var(--js-space-5) var(--js-space-5) var(--js-space-8);background:var(--js-color-black);color:var(--js-color-white);border-left:var(--js-border-hairline) solid var(--js-gold-a28);box-shadow:var(--js-shadow-drawer);overflow-y:auto;animation:js-drawer-in var(--js-motion-base) var(--js-ease-out) both}
@keyframes js-drawer-in{from{transform:translateX(100%)}to{transform:translateX(0)}}
@keyframes js-fade-in{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .js-drawer{animation:js-fade-in var(--js-reduced-duration) linear both;transform:none}
  .js-drawer__overlay{animation:js-fade-in var(--js-reduced-duration) linear both}
}
.js-drawer__head{display:flex;align-items:center;justify-content:space-between;gap:var(--js-space-5);min-width:0}
.js-drawer__head>img{min-width:0;flex-shrink:1;object-fit:contain;object-position:left center}
.js-drawer__close{position:relative;width:var(--js-hit-area-min);height:var(--js-hit-area-min);flex:none;padding:0;border:0;background:none;cursor:pointer;color:inherit}
.js-drawer__close span{position:absolute;left:50%;top:50%;width:20px;height:var(--js-gold-line-max);background:currentColor;transform-origin:center}
.js-drawer__close span:nth-child(1){transform:translate(-50%,-50%) rotate(45deg)}
.js-drawer__close span:nth-child(2){transform:translate(-50%,-50%) rotate(-45deg)}
.js-drawer__close:hover{color:var(--js-color-gold)}
.js-drawer__close:focus-visible{outline:var(--js-focus-ring-width) solid var(--js-color-gold);outline-offset:var(--js-focus-ring-offset)}
.js-drawer__list{display:flex;flex-direction:column;margin-top:var(--js-space-4);border-top:var(--js-border-hairline) solid var(--js-white-a14)}
.js-drawer__item{position:relative;display:flex;align-items:center;min-height:var(--js-control-height-touch);padding:var(--js-space-3) 0;border-bottom:var(--js-border-hairline) solid var(--js-white-a14);font-family:var(--js-font-display);font-size:var(--js-text-h3);color:inherit;background:none;text-decoration:none;transition:color var(--js-motion-fast) var(--js-ease-standard)}
.js-drawer__item:hover{color:var(--js-color-gold)}
.js-drawer__item[aria-current="page"]{color:var(--js-color-gold)}
.js-drawer__item[aria-current="page"]::before{content:"";position:absolute;left:calc(var(--js-space-5) * -1);top:50%;transform:translateY(-50%);width:var(--js-space-3);height:var(--js-gold-line-max);background:var(--js-color-gold)}
.js-drawer__item:focus-visible{outline:var(--js-focus-ring-width) solid var(--js-color-gold);outline-offset:var(--js-focus-ring-offset)}
.js-drawer__foot{margin-top:auto;display:flex;flex-direction:column;gap:var(--js-space-3);align-items:flex-start}

/* ---------- Brand loading splash (v1.1) ---------- */
.js-splash{position:fixed;inset:0;z-index:90;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--js-space-6);background:var(--js-color-black);animation:js-fade-in var(--js-motion-fast) linear both}
.js-splash__stack{display:flex;flex-direction:column;align-items:center;gap:var(--js-space-5)}
.js-splash__symbol{width:96px;height:96px;-webkit-mask-image:linear-gradient(to top,#000 0 50%,transparent 50% 100%);mask-image:linear-gradient(to top,#000 0 50%,transparent 50% 100%);-webkit-mask-size:100% 200%;mask-size:100% 200%;-webkit-mask-position:0 100%;mask-position:0 100%;animation:js-splash-reveal var(--js-motion-slow) var(--js-ease-out) both}
.js-splash__symbol img{width:100%;height:100%}
@keyframes js-splash-reveal{from{-webkit-mask-position:0 100%;mask-position:0 100%}to{-webkit-mask-position:0 0;mask-position:0 0}}
.js-splash__wordmark{height:24px;opacity:0;animation:js-fade-in var(--js-motion-base) var(--js-ease-out) 620ms both}
.js-splash__indeterminate{position:absolute;bottom:0;left:0;width:100%;height:var(--js-gold-line-min);background:var(--js-white-a08);overflow:hidden}
.js-splash__indeterminate::after{content:"";position:absolute;inset-block:0;left:0;width:32%;background:var(--js-color-gold);animation:js-indeterminate 1.4s var(--js-ease-standard) infinite}
@keyframes js-indeterminate{0%{transform:translateX(-100%)}100%{transform:translateX(320%)}}
.js-splash__hairline{position:absolute;left:50%;bottom:0;width:var(--js-gold-line-max);height:0;background:var(--js-color-gold);animation:js-splash-hairline var(--js-motion-slow) var(--js-ease-out) 1s both}
@keyframes js-splash-hairline{from{height:0}to{height:22vh}}
.js-splash--plain .js-splash__symbol{-webkit-mask-image:none;mask-image:none;animation:none}
.js-splash--reduced .js-splash__symbol,.js-splash--reduced .js-splash__wordmark,.js-splash--reduced .js-splash__hairline{animation:none;-webkit-mask-image:none;mask-image:none;opacity:1;height:auto}
.js-splash--reduced .js-splash__wordmark{height:24px}
.js-splash--reduced .js-splash__hairline{display:none}
@media (prefers-reduced-motion:reduce){
  .js-splash__symbol,.js-splash__wordmark,.js-splash__hairline{animation:none;-webkit-mask-image:none;mask-image:none;opacity:1}
  .js-splash__hairline{display:none}
  .js-splash__indeterminate::after{animation:none;width:100%}
}

/* ---------- Mobile continuation pulse (v1.1) ---------- */
.js-mobile-continuation-pulse{will-change:transform}
.js-mobile-continuation-pulse.is-pulsing{animation:js-continuation var(--js-motion-slow) var(--js-ease-out) 1 both}
@keyframes js-continuation{0%{transform:translateY(0)}45%{transform:translateY(calc(var(--js-pulse-travel,14px) * -1))}100%{transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.js-mobile-continuation-pulse.is-pulsing{animation:none;transform:none}}

/* ---------- Scroll indicator (non-interactive) ---------- */
.js-scrollindicator{display:inline-flex;flex-direction:column;align-items:center;gap:var(--js-space-3);font-size:var(--js-text-label);font-weight:var(--js-weight-label);letter-spacing:var(--js-tracking-label);text-transform:uppercase;opacity:.72;pointer-events:none}
.js-scrollindicator__rail{position:relative;width:var(--js-gold-line-min);height:56px;background:var(--js-white-a14);overflow:hidden}
.js-field-light .js-scrollindicator__rail{background:var(--js-black-a14)}
.js-scrollindicator__rail::after{content:"";position:absolute;inset-inline:0;top:0;height:40%;background:var(--js-color-gold);animation:js-scroll-travel 2.6s var(--js-ease-standard) infinite}
@keyframes js-scroll-travel{0%{transform:translateY(-100%)}60%,100%{transform:translateY(250%)}}
@media (prefers-reduced-motion:reduce){.js-scrollindicator__rail::after{animation:none;transform:none;height:100%}}

/* ---------- Editorial ---------- */
.js-kicker{display:block;font-family:var(--js-font-body);font-size:var(--js-text-label);font-weight:var(--js-weight-label);letter-spacing:var(--js-tracking-label);text-transform:uppercase;color:var(--js-text-secondary)}
.js-kicker--gold{color:var(--js-color-gold)}
.js-chapternumber{display:inline-flex;align-items:baseline;gap:var(--js-space-2);font-family:var(--js-font-display);font-size:var(--js-text-h3);color:var(--js-text-secondary)}
.js-chapternumber__total{font-size:var(--js-text-label);font-family:var(--js-font-body);letter-spacing:var(--js-tracking-label);opacity:.7}
.js-hero{font-family:var(--js-font-display);font-weight:400;font-size:var(--js-font-size-hero);line-height:var(--js-line-height-hero);letter-spacing:var(--js-tracking-display);margin:0;text-wrap:balance}
.js-heading{font-family:var(--js-font-display);font-weight:400;font-size:var(--js-text-display);line-height:var(--js-leading-display);letter-spacing:var(--js-tracking-display);margin:0;text-wrap:balance}
.js-heading--h2{font-size:var(--js-text-h2);line-height:var(--js-leading-heading)}
.js-heading--h3{font-size:var(--js-text-h3);line-height:var(--js-leading-heading)}
.js-body{font-size:var(--js-text-body);line-height:var(--js-leading-body);max-width:var(--js-text-measure-long);color:var(--js-text-secondary);text-wrap:pretty}
.js-body--lead{font-size:var(--js-text-lead);line-height:1.4;color:var(--js-text-primary)}
.js-exitword{font-family:var(--js-font-display);font-size:clamp(4rem,18vw,16rem);line-height:.82;letter-spacing:-0.03em;text-transform:lowercase;color:var(--js-text-primary);opacity:.14;margin:0;user-select:none}
.js-manifesto{display:flex;flex-direction:column;gap:var(--js-stack-heading-to-body);max-width:70ch;padding-left:var(--js-space-6);border-left:var(--js-gold-line-min) solid var(--js-color-gold)}
.js-principles{list-style:none;margin:0;padding:0;display:grid;gap:0}
.js-principles__item{display:grid;grid-template-columns:3.5rem 1fr;gap:var(--js-space-5);padding-block:var(--js-space-5);border-top:var(--js-border-hairline) solid var(--js-line-hairline)}
.js-principles__item:last-child{border-bottom:var(--js-border-hairline) solid var(--js-line-hairline)}
.js-principles__index{font-family:var(--js-font-display);font-size:var(--js-text-h3);color:var(--js-color-gold)}
.js-principles__term{font-family:var(--js-font-display);font-size:var(--js-text-h3);margin:0 0 var(--js-space-2)}
.js-quote{display:flex;flex-direction:column;gap:var(--js-space-5);margin:0;max-width:26ch}
.js-quote__text{font-family:var(--js-font-display);font-size:var(--js-text-h2);line-height:1.08;letter-spacing:var(--js-tracking-display);margin:0}
.js-quote__attribution{font-size:var(--js-text-label);letter-spacing:var(--js-tracking-label);text-transform:uppercase;color:var(--js-text-secondary)}

/* ---------- Media ---------- */
.js-scene{position:relative;width:100%;overflow:hidden;background:var(--js-color-black);color:var(--js-color-white)}
.js-scene__media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.js-scene__overlay{position:absolute;inset:0;background:var(--js-overlay-media);pointer-events:none}
.js-scene__safe{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;gap:var(--js-stack-heading-to-body);min-height:inherit;padding:var(--js-space-9) var(--js-page-margin) var(--js-space-8);max-width:min(52ch,72%)}
@media (max-width:639px){.js-scene__safe{max-width:100%;padding-inline:var(--js-page-margin-mobile)}}
/* Over media the chip becomes a translucent lift, not a solid block: the gold
   stays as border and indicator dot, the label switches to white so it reads at
   low opacity without hiding the photograph. */
.js-scene__safe>.js-status,.js-status--on-media{align-self:flex-start;background:rgba(0,0,0,.42);color:var(--js-color-white)}
.js-scene__safe>.js-status::before,.js-status--on-media::before{background:var(--js-color-gold)}
.js-scene__error{position:relative;z-index:2;display:flex;flex-direction:column;gap:var(--js-space-3);padding:var(--js-space-8) var(--js-page-margin)}
.js-overlay-scrim{position:absolute;inset:0;background:var(--js-black-a56);pointer-events:none}
.js-poster{position:relative;display:block;width:100%;overflow:hidden;background:var(--js-color-charcoal)}
.js-poster img{width:100%;height:100%;object-fit:cover}
.js-arcmask{position:relative;overflow:hidden;border-radius:var(--js-radius-circle);background:var(--js-color-charcoal)}
.js-arcmask--half{border-radius:999px 999px 0 0}
.js-arcmask img{width:100%;height:100%;object-fit:cover}
.js-arcmask__rule{position:absolute;inset:0;border:var(--js-gold-line-min) solid var(--js-gold-a56);border-radius:inherit;pointer-events:none}
.js-goldline{position:relative;background:var(--js-white-a14);width:var(--js-gold-line-max)}
.js-field-light .js-goldline{background:var(--js-black-a14)}
.js-goldline__fill{position:absolute;top:0;left:0;width:100%;background:var(--js-color-gold);transition:height var(--js-motion-slow) var(--js-ease-scrub)}
.js-goldline--horizontal{width:100%;height:var(--js-gold-line-max)}
.js-goldline--horizontal .js-goldline__fill{height:100%;transition:width var(--js-motion-slow) var(--js-ease-scrub)}
.js-status{display:inline-flex;align-items:center;gap:var(--js-space-3);padding:8px 14px;border:var(--js-gold-line-min) solid var(--js-gold-a56);border-radius:var(--js-radius-hairline);font-size:var(--js-text-label);font-weight:var(--js-weight-label);letter-spacing:var(--js-tracking-label);text-transform:uppercase;color:var(--js-color-gold)}
.js-status::before{content:"";width:5px;height:5px;border-radius:var(--js-radius-circle);background:var(--js-color-gold)}
.js-status--plain{border-color:transparent;padding-inline:0}

/* ---------- Concept cards ---------- */
.js-conceptcard{display:flex;flex-direction:column;gap:var(--js-space-5);padding:var(--js-space-6);background:var(--js-surface-raised);border:var(--js-border-hairline) solid var(--js-line-hairline);border-radius:var(--js-radius-none);transition:border-color var(--js-motion-base) var(--js-ease-standard)}
.js-conceptcard:hover{border-color:var(--js-gold-a56)}
.js-conceptcard__media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--js-color-charcoal)}
.js-conceptcard__media img{width:100%;height:100%;object-fit:cover}
.js-conceptcard__rule{height:var(--js-gold-line-min);width:48px;background:var(--js-color-gold)}
.js-conceptcard__title{font-family:var(--js-font-display);font-size:var(--js-text-h3);margin:0}

/* ---------- Contact + footer ---------- */
.js-contact{display:flex;flex-direction:column;gap:var(--js-stack-heading-to-body);align-items:flex-start}
.js-footer{display:flex;flex-direction:column;gap:var(--js-space-7);padding:var(--js-space-8) var(--js-page-margin) var(--js-space-6);border-top:var(--js-border-hairline) solid var(--js-line-hairline)}
.js-footer__row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--js-space-5);align-items:flex-end}
.js-footer__legal{display:flex;flex-wrap:wrap;gap:var(--js-space-5);font-size:var(--js-text-legal);color:var(--js-text-secondary)}
.js-footer__note{font-size:var(--js-text-legal);color:var(--js-text-secondary);max-width:52ch}