/* ==========================================================================
   SICAR Museum — design system v2
   Plain CSS (not compiled). Every class is prefixed `sx-` so it never collides
   with the Tailwind build (css/app.css) still used by the older templates.
   Colours come from the logo: navy #1E2A6E, green #3CA050.
   ========================================================================== */

:root{
  --sx-night:#060A24; --sx-night-2:#0B1236;
  --sx-navy:#1E2A6E; --sx-navy-hi:#3B4BA8;
  --sx-green:#3CA050; --sx-green-hi:#6FD384; --sx-green-ink:#23733A;
  --sx-chalk:#EEF1F8; --sx-mist:#A3ABCF; --sx-line:rgba(163,171,207,.22);
  --sx-paper:#E8EBF3; --sx-paper-2:#F5F6FA; --sx-ink:#0D1340; --sx-ink-2:#4A5283; --sx-ink-line:rgba(13,19,64,.16);
  --sx-danger:#B3261E;
  --sx-f-display:"Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --sx-f-body:"Hanken Grotesk", "Segoe UI", system-ui, sans-serif;
  --sx-f-label:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sx-f-mono:"IBM Plex Mono", ui-monospace, Consolas, monospace;
  --sx-f-hand:"Caveat", "Segoe Script", cursive;
  --sx-gutter:clamp(16px, 4vw, 56px);
  --sx-nav-h:68px;
  --sx-ease:cubic-bezier(.16,1,.3,1);
}

html.lenis, html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-stopped{overflow:hidden}

/* ---------- base ---------- */
.sx-body{font-family:var(--sx-f-body); -webkit-font-smoothing:antialiased; overflow-x:hidden}
.sx{font-family:var(--sx-f-body); font-size:17px; line-height:1.6; color:var(--sx-ink); background:var(--sx-paper)}
.sx *, .sx-nav *, .sx-foot *{box-sizing:border-box}
.sx img{max-width:100%}
.sx :where(a){color:inherit}
.sx :focus-visible, .sx-nav :focus-visible, .sx-foot :focus-visible{outline:2px solid var(--sx-green-hi); outline-offset:3px}
.sx-dark{background:var(--sx-night); color:var(--sx-chalk)}
.sx-paper{background:var(--sx-paper); color:var(--sx-ink)}
.sx-paper-2{background:var(--sx-paper-2); color:var(--sx-ink)}
.sx-navy{background:var(--sx-navy); color:var(--sx-chalk)}
.sx-wrap{padding-inline:var(--sx-gutter); max-width:1560px; margin-inline:auto; width:100%}
.sx-narrow{max-width:760px; margin-inline:auto}
.sx-sec{padding-block:clamp(64px,10vh,130px)}
.sx-sec-sm{padding-block:clamp(40px,6vh,80px)}

.sx-display, .sx h1, .sx h2, .sx h3, .sx-h{font-family:var(--sx-f-display); font-weight:900; line-height:.92; letter-spacing:-.01em; margin:0; text-wrap:balance; text-transform:uppercase}
.sx h4{margin:0}
.sx p{margin:0}
.sx-h1{font-size:clamp(64px, 11vw, 190px)}
.sx-h2{font-size:clamp(42px, 6vw, 100px)}
.sx-h3{font-size:clamp(30px, 3.2vw, 50px)}
.sx-eyebrow{font-family:var(--sx-f-mono); font-size:12px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--sx-green-ink)}
.sx-dark .sx-eyebrow, .sx-navy .sx-eyebrow, .sx-eyebrow.on-dark{color:var(--sx-green-hi)}
.sx-serif{font-family:var(--sx-f-label); font-style:italic; font-weight:500; letter-spacing:0; text-transform:none}
.sx-lead{font-size:clamp(17px,1.35vw,20px); color:var(--sx-ink-2); max-width:58ch}
.sx-dark .sx-lead, .sx-navy .sx-lead{color:#C9CFEA}
.sx-muted{color:var(--sx-ink-2)}
.sx-dark .sx-muted{color:var(--sx-mist)}
.sx-mono{font-family:var(--sx-f-mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase}
.sx-tnum{font-variant-numeric:tabular-nums}
.sx-sr{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* grain */
.sx-grain{position:fixed; inset:-50%; z-index:90; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:sx-grain 1.2s steps(6) infinite}
@keyframes sx-grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-4%)}60%{transform:translate(-4%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}

/* ---------- buttons, chips, links ---------- */
.sx-btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:0 22px; border-radius:999px; font:700 14px/1 var(--sx-f-body); letter-spacing:.04em; text-decoration:none; cursor:pointer; border:1px solid transparent; transition:background .25s, color .25s, border-color .25s, opacity .25s; white-space:nowrap}
.sx-btn svg{width:16px; height:16px; flex:none}
.sx-btn-green{background:var(--sx-green); color:#fff!important}
.sx-btn-green:hover{background:#34914A}
.sx-btn-ghost{border-color:var(--sx-line); color:var(--sx-chalk)!important; background:transparent}
.sx-btn-ghost:hover{border-color:var(--sx-chalk)}
.sx-btn-ink{border-color:var(--sx-ink); color:var(--sx-ink)!important; background:transparent}
.sx-btn-ink:hover{background:var(--sx-ink); color:#fff!important}
.sx-btn-sm{min-height:40px; padding:0 16px; font-size:13px}
.sx-btn[disabled], .sx-btn.is-busy{opacity:.55; pointer-events:none}
.sx-chip{display:inline-flex; align-items:center; gap:6px; font-family:var(--sx-f-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; padding:6px 11px; border-radius:999px; border:1px solid currentColor; line-height:1.2; white-space:nowrap}
.sx-chip.solid{background:var(--sx-green); border-color:var(--sx-green); color:#fff}
.sx-chips{display:flex; flex-wrap:wrap; gap:8px; color:var(--sx-green-ink)}
.sx-dark .sx-chips{color:var(--sx-green-hi)}
.sx-link{display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:14px; letter-spacing:.03em; text-decoration:none; border-bottom:1px solid currentColor; padding-bottom:3px}
.sx-link:hover{color:var(--sx-green-ink)}
.sx-dark .sx-link:hover{color:var(--sx-green-hi)}

/* ---------- nav ---------- */
.sx-nav{position:sticky; top:0; z-index:60; background:rgba(6,10,36,.92); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--sx-line); color:var(--sx-chalk); font-family:var(--sx-f-body)}
.admin-bar .sx-nav{top:32px}
@media (max-width:782px){ .admin-bar .sx-nav{top:0} }
.sx-nav-in{display:flex; align-items:center; gap:24px; min-height:var(--sx-nav-h)}
.sx-brand{display:flex; align-items:center; gap:12px; text-decoration:none; font-family:var(--sx-f-display); font-weight:800; font-size:22px; letter-spacing:.06em; text-transform:uppercase; color:var(--sx-chalk)!important; white-space:nowrap}
.sx-brand svg{width:36px; height:36px; flex:none}
.sx-menu{display:flex; gap:24px; margin:0 0 0 auto; padding:0; list-style:none; font-size:14px; font-weight:600; letter-spacing:.04em}
.sx-menu a{text-decoration:none; opacity:.85; position:relative; padding-block:6px; color:var(--sx-chalk)}
.sx-menu .current-menu-item > a, .sx-menu .current-menu-ancestor > a, .sx-menu a[aria-current="page"]{opacity:1; color:var(--sx-green-hi)}
.sx-menu a::after{content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background:var(--sx-green-hi); transition:right .35s var(--sx-ease)}
.sx-menu a:hover{opacity:1}.sx-menu a:hover::after{right:0}
.sx-nav-tools{display:flex; align-items:center; gap:10px}
.sx-icon-btn{position:relative; width:42px; height:42px; display:grid; place-items:center; border-radius:50%; border:1px solid var(--sx-line); color:var(--sx-chalk); background:transparent; cursor:pointer; text-decoration:none}
.sx-icon-btn:hover{border-color:var(--sx-chalk)}
.sx-icon-btn svg{width:18px; height:18px}
.sx-icon-btn .n{position:absolute; top:-3px; right:-3px; min-width:18px; height:18px; border-radius:9px; background:var(--sx-green); color:#fff; font:700 10px/18px var(--sx-f-body); text-align:center; padding:0 4px}
.sx-burger{display:none}
.sx-readbar{position:absolute; left:0; bottom:-1px; height:2px; width:100%; background:var(--sx-green); transform-origin:left; transform:scaleX(0); pointer-events:none}
.sx-mobile{position:fixed; inset:0; z-index:80; background:var(--sx-night); color:var(--sx-chalk); display:flex; flex-direction:column; padding:18px var(--sx-gutter) 30px; transform:translateY(-100%); transition:transform .5s var(--sx-ease); visibility:hidden}
.sx-mobile.open{transform:none; visibility:visible}
.sx-mobile-top{display:flex; justify-content:space-between; align-items:center}
.sx-mobile ul{list-style:none; margin:auto 0; padding:0; display:grid; gap:6px}
.sx-mobile ul a{font-family:var(--sx-f-display); font-weight:900; font-size:clamp(44px,12vw,72px); text-transform:uppercase; text-decoration:none; line-height:1; color:var(--sx-chalk)}
.sx-mobile ul a:hover{color:var(--sx-green-hi)}
@media (max-width:1100px){ .sx-menu{display:none} .sx-burger{display:grid} .sx-nav-tools{margin-left:auto} .sx-nav .sx-nav-cta{display:none} }

/* ---------- footer ---------- */
.sx-foot{background:var(--sx-night); color:var(--sx-chalk); padding-block:64px 28px; font-family:var(--sx-f-body); font-size:15px; line-height:1.6}
.sx-foot-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:36px}
.sx-foot-brand{display:flex; flex-direction:column; gap:14px; max-width:40ch}
.sx-foot-brand p{color:var(--sx-mist); font-size:14px; margin:0}
.sx-foot h4{font-family:var(--sx-f-mono); font-weight:500; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--sx-green-hi); margin:0 0 14px}
.sx-foot ul{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.sx-foot ul a{text-decoration:none; opacity:.85; color:var(--sx-chalk)}
.sx-foot ul a:hover{opacity:1; color:var(--sx-green-hi)}
.sx-foot .sel{user-select:all}
.sx-foot-row{display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px; margin-top:44px; padding-top:22px; border-top:1px solid var(--sx-line); font-size:13px; color:var(--sx-mist)}
.sx-foot-row a{color:var(--sx-mist); text-decoration:none}
.sx-foot-row a:hover{color:var(--sx-chalk)}
.sx-foot-row .acr{font-family:var(--sx-f-mono); letter-spacing:.14em; text-transform:uppercase; font-size:11px}
@media (max-width:860px){ .sx-foot-grid{grid-template-columns:1fr 1fr} .sx-foot-brand{grid-column:1/-1} }

/* ---------- page hero (listing pages) ---------- */
.sx-phero{position:relative; overflow:hidden; padding-block:clamp(56px,9vh,110px) clamp(40px,6vh,70px)}
.sx-phero-in{position:relative; display:grid; gap:22px}
.sx-phero .sx-h1{max-width:12ch}
.sx-phero-ghost{position:absolute; right:-1vw; bottom:-.12em; font-family:var(--sx-f-display); font-weight:900; font-size:clamp(200px,34vw,560px); line-height:.75; color:transparent; -webkit-text-stroke:1.5px rgba(111,211,132,.22); letter-spacing:-.04em; pointer-events:none; user-select:none; text-transform:uppercase}
.sx-paper .sx-phero-ghost{-webkit-text-stroke-color:rgba(13,19,64,.12)}
.sx-stats{display:flex; flex-wrap:wrap; gap:14px 40px; margin-top:6px}
.sx-stats div{display:flex; flex-direction:column}
.sx-stats b{font-family:var(--sx-f-display); font-weight:900; font-size:clamp(40px,4vw,62px); line-height:.9}
.sx-stats span{font-family:var(--sx-f-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--sx-mist)}
.sx-paper .sx-stats span{color:var(--sx-ink-2)}

/* sport rail */
.sx-sports{display:flex; flex-wrap:wrap; gap:8px}
.sx-sport{display:inline-flex; align-items:center; gap:10px; min-height:44px; padding:0 16px 0 12px; border-radius:999px; border:1px solid var(--sx-line); color:var(--sx-chalk); text-decoration:none; font-weight:600; font-size:14px; transition:background .25s, border-color .25s, color .25s}
.sx-sport svg{width:20px; height:20px; flex:none}
.sx-sport small{font-family:var(--sx-f-mono); font-size:11px; color:var(--sx-mist)}
.sx-sport:hover{border-color:var(--sx-chalk)}
.sx-sport.on{background:var(--sx-green); border-color:var(--sx-green); color:#fff}
.sx-sport.on small{color:#eaffef}
.sx-sport.off{opacity:.4; pointer-events:none}
.sx-paper .sx-sport{border-color:var(--sx-ink-line); color:var(--sx-ink)}
.sx-paper .sx-sport small{color:var(--sx-ink-2)}
.sx-paper .sx-sport:hover{border-color:var(--sx-ink)}
.sx-paper .sx-sport.on{color:#fff}

/* dark sections nested inside a paper wrapper keep their own colours */
.sx-dark .sx-phero-ghost{-webkit-text-stroke-color:rgba(111,211,132,.22)}
.sx-dark .sx-stats span{color:var(--sx-mist)}
.sx-dark .sx-sport{border-color:var(--sx-line); color:var(--sx-chalk)}
.sx-dark .sx-sport small{color:var(--sx-mist)}
.sx-dark .sx-sport:hover{border-color:var(--sx-chalk)}
.sx-dark .sx-sport.on{background:var(--sx-green); border-color:var(--sx-green); color:#fff}
.sx-dark .sx-sport.on small{color:#eaffef}

/* light sections nested inside a dark wrapper (homepage) */
.sx-paper .sx-lead, .sx-paper-2 .sx-lead{color:var(--sx-ink-2)}
.sx-paper .sx-eyebrow, .sx-paper-2 .sx-eyebrow{color:var(--sx-green-ink)}
.sx-paper .sx-muted, .sx-paper-2 .sx-muted{color:var(--sx-ink-2)}
.sx-paper .sx-link:hover, .sx-paper-2 .sx-link:hover{color:var(--sx-green-ink)}
.sx-paper-2 .sx-story p{color:var(--sx-ink-2)}
.sx-paper-2 .sx-story:hover h3{color:var(--sx-green-ink)}

/* ---------- filter bar ---------- */
.sx-filters{position:sticky; top:var(--sx-nav-h); z-index:40; background:rgba(245,246,250,.94); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--sx-ink-line); color:var(--sx-ink)}
.admin-bar .sx-filters{top:calc(var(--sx-nav-h) + 32px)}
.sx-filters-in{display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding-block:12px}
.sx-filters .lbl{display:flex; align-items:center; gap:8px; font-family:var(--sx-f-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--sx-ink-2); padding-right:8px}
.sx-filters .lbl svg{width:14px; height:14px}
.sx-select, .sx-search input{appearance:none; font:600 13px var(--sx-f-body); color:var(--sx-ink); background:#fff; border:1px solid var(--sx-ink-line); border-radius:999px; min-height:40px; padding:0 34px 0 14px; cursor:pointer; max-width:220px}
.sx-select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230D1340' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center}
.sx-select:hover, .sx-search input:hover{border-color:var(--sx-ink)}
.sx-select:focus, .sx-search input:focus{outline:2px solid var(--sx-green); outline-offset:1px}
.sx-search{position:relative; flex:1; min-width:200px}
.sx-search input{width:100%; max-width:none; cursor:text; padding-left:38px; padding-right:14px}
.sx-search svg{position:absolute; left:14px; top:50%; transform:translateY(-50%); width:15px; height:15px; color:var(--sx-ink-2); pointer-events:none}
.sx-check{display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:13px; cursor:pointer; min-height:40px; padding:0 6px}
.sx-check input{accent-color:var(--sx-green); width:16px; height:16px}
.sx-reset{font-family:var(--sx-f-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--sx-ink-2); text-decoration:none; padding:8px}
.sx-reset:hover{color:var(--sx-ink)}
.sx-letters{display:flex; flex-wrap:wrap; gap:4px; padding-top:12px}
.sx-letters a, .sx-letters span{font-family:var(--sx-f-display); font-weight:800; font-size:18px; min-width:36px; height:36px; display:grid; place-items:center; padding:0 6px; border-radius:2px; text-decoration:none; color:var(--sx-ink)}
.sx-letters a:hover{background:var(--sx-paper)}
.sx-letters a.on{background:var(--sx-navy); color:#fff}
.sx-letters span{color:rgba(13,19,64,.25)}
.sx-result{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin-bottom:28px}
.sx-result p{font-family:var(--sx-f-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--sx-ink-2)}
.sx-active{display:flex; flex-wrap:wrap; gap:6px}
.sx-active a{display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; padding:6px 12px; border-radius:999px; background:var(--sx-navy); color:#fff; text-decoration:none}
.sx-active a:hover{background:var(--sx-ink)}
@media (max-width:760px){
  .sx-filters{position:relative; top:0}
  .admin-bar .sx-filters{top:0}
  .sx-select{max-width:none; flex:1 1 44%}
}

/* ---------- grids + cards ---------- */
.sx-grid{display:grid; gap:clamp(18px,2.4vw,34px)}
.sx-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.sx-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.sx-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:1100px){ .sx-grid-4{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:860px){ .sx-grid-4, .sx-grid-3{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:520px){ .sx-grid-4, .sx-grid-3, .sx-grid-2{grid-template-columns:1fr} }

/* piece card */
.sx-piece{display:flex; flex-direction:column; text-decoration:none; color:var(--sx-ink)}
.sx-piece .pic{position:relative; aspect-ratio:3/4; background:#fff; border:1px solid var(--sx-ink-line); padding:12px; overflow:hidden}
.sx-piece .pic img{width:100%; height:100%; object-fit:cover; transform:scale(1.05); transition:transform 1.1s var(--sx-ease)}
.sx-piece .pic.is-3d{background:radial-gradient(80% 70% at 50% 38%, #2A3A8F, #0B1236); padding:0}
.sx-piece .pic.is-3d img{object-fit:contain; transform:none}
.sx-piece:hover .pic img{transform:scale(1.11)}
.sx-piece:hover .pic.is-3d img{transform:scale(1.04)}
.sx-piece .pic .none{position:absolute; inset:0; display:grid; place-items:center; background:var(--sx-navy); color:var(--sx-chalk)}
.sx-piece .pic .none svg{width:38%; opacity:.9}
.sx-piece .flags{position:absolute; left:10px; top:10px; right:10px; display:flex; flex-wrap:wrap; gap:6px; z-index:1}
.sx-piece .flags span{font-family:var(--sx-f-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; padding:5px 8px; border-radius:999px; background:rgba(255,255,255,.92); color:var(--sx-ink)}
.sx-piece .flags span.g{background:var(--sx-green); color:#fff}
.sx-piece .flags span.n{background:var(--sx-navy); color:#fff; margin-left:auto}
.sx-piece .meta span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0}
.sx-piece .meta span:first-child{flex:none; max-width:60%}
.sx-piece .meta{display:flex; justify-content:space-between; gap:10px; margin-top:14px; font-family:var(--sx-f-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--sx-ink-2)}
.sx-piece h3{font-size:clamp(24px,2vw,30px); margin-top:6px}
.sx-piece .sub{font-family:var(--sx-f-label); font-style:italic; font-size:20px; color:var(--sx-ink-2); line-height:1.2; margin-top:4px}
.sx-piece:hover h3{color:var(--sx-green-ink)}
.sx-3dnote{position:absolute; right:10px; bottom:10px; font-family:var(--sx-f-mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:#C9CFEA; background:rgba(6,10,36,.6); padding:4px 7px; border-radius:999px}

/* legend card */
.sx-legend{display:block; position:relative; text-decoration:none; color:var(--sx-chalk); background:var(--sx-night-2); overflow:hidden}
.sx-legend .ph{position:relative; aspect-ratio:4/5; overflow:hidden; background:linear-gradient(160deg, var(--sx-navy), var(--sx-night))}
.sx-legend .ph img{width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.05); transition:filter .7s, transform 1.1s var(--sx-ease)}
.sx-legend:hover .ph img{filter:grayscale(0); transform:scale(1.04)}
.sx-legend .ph .ini{position:absolute; inset:0; display:grid; place-items:center; font-family:var(--sx-f-display); font-weight:900; font-size:clamp(90px,10vw,150px); color:transparent; -webkit-text-stroke:1.5px rgba(111,211,132,.45); letter-spacing:-.03em}
.sx-legend .ph::after{content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(6,10,36,.95) 8%, rgba(6,10,36,.2) 55%, transparent)}
.sx-legend .tx{position:absolute; left:16px; right:16px; bottom:16px; z-index:1}
.sx-legend h3{font-size:clamp(26px,2.2vw,34px); line-height:.95}
.sx-legend .mt{font-family:var(--sx-f-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:#C9CFEA; margin-top:8px}
.sx-legend .in{position:absolute; left:14px; top:14px; z-index:1; font-family:var(--sx-f-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; padding:5px 9px; border-radius:999px; background:var(--sx-green); color:#fff}
.sx-legend:hover h3{color:var(--sx-green-hi)}

/* club card */
.sx-club{--c1:var(--sx-navy); --c2:var(--sx-green); display:flex; flex-direction:column; text-decoration:none; color:var(--sx-ink); background:#fff; border:1px solid var(--sx-ink-line); overflow:hidden; transition:transform .5s var(--sx-ease), box-shadow .5s var(--sx-ease)}
.sx-club:hover{transform:translateY(-4px); box-shadow:0 26px 50px rgba(13,19,64,.12)}
.sx-club .band{height:10px; background:linear-gradient(90deg, var(--c1) 50%, var(--c2) 50%)}
.sx-club .bd{display:grid; grid-template-columns:72px 1fr; gap:16px; padding:18px; align-items:center}
.sx-club .lg{width:72px; height:72px; display:grid; place-items:center; background:var(--sx-paper-2); border:1px solid var(--sx-ink-line); font-family:var(--sx-f-display); font-weight:900; font-size:24px; color:var(--c1); overflow:hidden}
.sx-club .lg img{width:100%; height:100%; object-fit:contain; padding:6px}
.sx-club h3{font-size:24px; line-height:.95}
.sx-club .mt{font-family:var(--sx-f-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--sx-ink-2); margin-top:6px}
.sx-club .ft{margin-top:auto; display:flex; justify-content:space-between; gap:10px; padding:12px 18px; border-top:1px solid var(--sx-ink-line); font-size:13px; font-weight:700}
.sx-club .ft .g{color:var(--sx-green-ink)}
.sx-club:hover h3{color:var(--sx-green-ink)}

/* story card */
.sx-story{display:flex; flex-direction:column; gap:12px; text-decoration:none; color:inherit}
.sx-story .ph{position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--sx-navy)}
.sx-story .ph img{width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--sx-ease)}
.sx-story:hover .ph img{transform:scale(1.05)}
.sx-story .ph .typo{position:absolute; inset:0; display:grid; place-items:center; padding:20px; font-family:var(--sx-f-display); font-weight:900; font-size:clamp(60px,7vw,110px); line-height:.8; color:transparent; -webkit-text-stroke:1.5px rgba(238,241,248,.4); text-align:center}
.sx-story .ph .split{position:absolute; inset:0; display:grid; grid-template-columns:1fr 1fr}
.sx-story .ph .badge{position:absolute; left:12px; top:12px; font-family:var(--sx-f-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; padding:5px 9px; border-radius:999px; background:var(--sx-night); color:#fff; display:flex; gap:7px; align-items:center}
.sx-story .ph .badge i{width:7px; height:7px; border-radius:50%; background:var(--sx-green-hi)}
.sx-story h3{font-size:clamp(28px,2.6vw,40px)}
.sx-story p{color:var(--sx-ink-2)}
.sx-dark .sx-story p{color:var(--sx-mist)}
.sx-story .go{font-weight:700; font-size:14px}
.sx-story:hover h3{color:var(--sx-green-ink)}
.sx-dark .sx-story:hover h3{color:var(--sx-green-hi)}

.sx-dark .sx-more .sx-btn-ink, .sx-dark .sx-btn-ink{border-color:var(--sx-line); color:var(--sx-chalk)!important}
.sx-dark .sx-more .sx-btn-ink:hover, .sx-dark .sx-btn-ink:hover{background:var(--sx-chalk); color:var(--sx-ink)!important}
.sx-more{display:flex; flex-direction:column; align-items:center; gap:22px; margin-top:clamp(40px,6vh,70px)}
.sx-pages{display:flex; flex-wrap:wrap; gap:6px; justify-content:center}
.sx-pages a, .sx-pages span{min-width:42px; height:42px; display:grid; place-items:center; padding:0 12px; border:1px solid var(--sx-ink-line); font:600 14px var(--sx-f-body); text-decoration:none; color:var(--sx-ink-2)}
.sx-pages a:hover{border-color:var(--sx-ink); color:var(--sx-ink)}
.sx-pages .on{background:var(--sx-navy); border-color:var(--sx-navy); color:#fff}
.sx-dark .sx-pages a, .sx-dark .sx-pages span{border-color:var(--sx-line); color:var(--sx-mist)}
.sx-dark .sx-pages a:hover{border-color:var(--sx-chalk); color:var(--sx-chalk)}
.sx-empty{padding:60px 0; font-size:20px; color:var(--sx-ink-2)}
.sx-dark .sx-empty{color:var(--sx-mist)}

/* rich text (WYSIWYG output) */
.sx-rte{font-size:clamp(17px,1.3vw,19.5px); line-height:1.75}
.sx-rte p, .sx-rte ul, .sx-rte ol, .sx-rte figure{margin:0 0 1.1em}
.sx-rte > :last-child, .sx-rte p:last-child{margin-bottom:0}
.sx-rte h2, .sx-rte h3{font-family:var(--sx-f-display); font-weight:900; text-transform:uppercase; line-height:.95; margin:1.6em 0 .5em}
.sx-rte h2{font-size:clamp(34px,3.4vw,52px)}
.sx-rte h3{font-size:clamp(26px,2.4vw,36px)}
.sx-rte ul, .sx-rte ol{padding-left:1.2em}
.sx-rte li + li{margin-top:.4em}
.sx-rte a{text-decoration-color:var(--sx-green); text-underline-offset:3px}
.sx-rte blockquote{margin:1.6em 0; padding:22px 0; border-block:2px solid currentColor; font-family:var(--sx-f-label); font-style:italic; font-weight:600; font-size:clamp(26px,2.6vw,38px); line-height:1.2}
.sx-rte blockquote p{margin:0}
.sx-rte img{height:auto}
.sx-rte figure{margin:1.6em 0}
.sx-rte figcaption{font-family:var(--sx-f-mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--sx-ink-2); margin-top:10px}

/* ---------- scroll reveal (only below-the-fold items get primed) ---------- */
.sx-rv{transition:transform 1.1s var(--sx-ease), opacity 1.1s var(--sx-ease), filter 1.1s var(--sx-ease)}
.sx-rv.pre{transform:translateY(40px); opacity:0; filter:blur(6px)}
.sx-rv.pre.d1{transition-delay:.08s}.sx-rv.pre.d2{transition-delay:.16s}.sx-rv.pre.d3{transition-delay:.24s}

/* ==========================================================================
   PRODUCT (piece) page
   ========================================================================== */
.sx-crumbs{font-family:var(--sx-f-mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--sx-ink-2); padding-block:18px; display:flex; flex-wrap:wrap; gap:10px}
.sx-crumbs a{text-decoration:none}.sx-crumbs a:hover{color:var(--sx-ink)}
.sx-crumbs [aria-current]{color:var(--sx-ink)}
.sx-pdp{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:clamp(24px,4vw,64px); align-items:start}
.sx-stage{position:sticky; top:calc(var(--sx-nav-h) + 16px); height:calc(100vh - var(--sx-nav-h) - 36px); min-height:520px; border-radius:6px; overflow:hidden; background:radial-gradient(70% 60% at 50% 38%, #2A3A8F 0%, #121A52 45%, #060A24 100%); color:var(--sx-chalk)}
.admin-bar .sx-stage{top:calc(var(--sx-nav-h) + 48px); height:calc(100vh - var(--sx-nav-h) - 68px)}
.sx-stage canvas{position:absolute; inset:0; width:100%; height:100%; display:block; cursor:grab; touch-action:pan-y}
.sx-stage canvas:active{cursor:grabbing}
.sx-stage .tag{position:absolute; left:18px; top:18px; z-index:2; font-family:var(--sx-f-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#C9CFEA; display:flex; align-items:center; gap:8px}
.sx-stage .tag i{width:8px; height:8px; border-radius:50%; background:var(--sx-green-hi); box-shadow:0 0 10px var(--sx-green-hi)}
.sx-stage .hint{position:absolute; right:18px; top:18px; z-index:2; font-size:12.5px; color:#C9CFEA; display:flex; align-items:center; gap:8px}
.sx-stage .hint svg{width:18px; height:18px}
.sx-views{position:absolute; left:50%; bottom:18px; transform:translateX(-50%); z-index:3; display:flex; gap:4px; padding:5px; border-radius:999px; background:rgba(6,10,36,.66); border:1px solid var(--sx-line); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px)}
.sx-views button{appearance:none; border:0; background:transparent; color:#C9CFEA; font:600 13px var(--sx-f-body); padding:0 15px; min-height:40px; border-radius:999px; cursor:pointer; white-space:nowrap}
.sx-views button[aria-pressed="true"]{background:var(--sx-chalk); color:var(--sx-ink)}
.sx-views button:hover{color:#fff}.sx-views button[aria-pressed="true"]:hover{color:var(--sx-ink)}
.sx-photos{position:absolute; inset:0; display:flex; flex-direction:column; background:#fff}
.sx-photos[hidden], .sx-stage canvas[hidden], .sx-stage [hidden]{display:none!important}
.sx-vgroup{display:contents}
.sx-photos .main{position:relative; flex:1; min-height:0; cursor:zoom-in}
.sx-photos .main img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:18px; opacity:0; transition:opacity .5s}
.sx-photos .main img.on{opacity:1}
.sx-photos .thumbs{display:flex; gap:8px; padding:10px 12px 74px; overflow-x:auto; background:#fff}
.sx-photos .thumbs button{flex:none; width:64px; height:64px; border:2px solid transparent; padding:0; background:var(--sx-paper-2); cursor:pointer}
.sx-photos .thumbs button.on{border-color:var(--sx-navy)}
.sx-photos .thumbs img{width:100%; height:100%; object-fit:cover}
.sx-noimg{position:absolute; inset:0; display:grid; place-items:center; text-align:center; gap:14px; color:#C9CFEA}
.sx-noimg svg{width:120px; height:120px; margin-inline:auto}
.sx-info{display:flex; flex-direction:column; padding-bottom:40px}
.sx-info > section{padding-block:clamp(34px,6vh,60px); border-top:1px solid var(--sx-ink-line)}
.sx-info > section:first-child{border-top:0; padding-top:8px}
.sx-info h1{font-size:clamp(44px,5.2vw,84px); margin-top:14px}
.sx-info h1 small{display:block; font-family:var(--sx-f-label); font-style:italic; font-weight:500; text-transform:none; font-size:.42em; letter-spacing:0; color:var(--sx-ink-2); margin-top:12px; line-height:1.1}
.sx-info h2{font-size:clamp(32px,3.2vw,50px); margin-bottom:18px}
.sx-buy{margin-top:26px; background:var(--sx-paper-2); border:1px solid var(--sx-ink-line); padding:22px; display:grid; gap:16px}
.sx-buy .row{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px}
.sx-status{display:inline-flex; align-items:center; gap:10px; font-weight:700}
.sx-status i{width:10px; height:10px; border-radius:50%; background:var(--sx-green); box-shadow:0 0 0 4px rgba(60,160,80,.18)}
.sx-status.arch i{background:var(--sx-navy-hi); box-shadow:0 0 0 4px rgba(59,75,168,.18)}
.sx-price{font-family:var(--sx-f-display); font-weight:800; font-size:32px; text-transform:uppercase; line-height:1}
.sx-price del{opacity:.5; font-size:.6em; margin-right:8px}
.sx-price ins{text-decoration:none}
.sx-buy .ctas{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.sx-buy .ctas form.cart{display:contents}
.sx-buy .ctas .quantity{display:none}
.sx-buy .ctas button.single_add_to_cart_button{all:unset; box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 22px; border-radius:999px; background:var(--sx-green); color:#fff; font:700 14px var(--sx-f-body); letter-spacing:.04em; cursor:pointer; text-align:center}
.sx-buy .ctas button.single_add_to_cart_button:hover{background:#34914A}
.sx-buy small{color:var(--sx-ink-2); font-size:13.5px}
.sx-spec{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); margin:0}
.sx-spec div{padding:14px 0; border-bottom:1px solid var(--sx-ink-line)}
.sx-spec div:nth-child(odd){padding-right:18px}
.sx-spec dt{font-family:var(--sx-f-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--sx-ink-2)}
.sx-spec dd{margin:4px 0 0; font-weight:600; font-size:17px}
.sx-spec a{text-decoration-color:var(--sx-green); text-underline-offset:3px}
.sx-hand svg{width:100%; height:auto; overflow:visible}
.sx-hand text{font-family:var(--sx-f-hand); font-weight:700; fill:transparent; stroke:var(--sx-ink); stroke-width:1.1; stroke-dasharray:1400; stroke-dashoffset:var(--draw,0)}
.sx-hand text.fill{fill:var(--sx-ink); stroke:none; opacity:var(--fillo,1)}
.sx-quote{border-left:3px solid var(--sx-green); padding-left:18px; font-family:var(--sx-f-label); font-style:italic; font-size:24px; line-height:1.35; margin-top:22px}
.sx-ten{font-family:var(--sx-f-display); font-weight:900; font-size:clamp(110px,13vw,190px); line-height:.8; color:transparent; -webkit-text-stroke:2px var(--sx-ink); letter-spacing:-.02em}
.sx-coa{position:relative; background:#fff; border:1px solid var(--sx-ink-line); padding:28px; overflow:hidden; box-shadow:0 30px 60px rgba(13,19,64,.08)}
.sx-coa::before{content:""; position:absolute; inset:10px; border:1px solid rgba(13,19,64,.12); pointer-events:none}
.sx-coa header{display:flex; justify-content:space-between; gap:16px; align-items:flex-start}
.sx-coa h3{font-size:30px}
.sx-coa .seal{width:92px; height:92px; flex:none}
.sx-coa dl{display:grid; grid-template-columns:auto 1fr; gap:8px 20px; margin:20px 0 0; font-size:15px}
.sx-coa dt{font-family:var(--sx-f-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--sx-ink-2); padding-top:3px}
.sx-coa dd{margin:0; font-weight:600}
.sx-coa p{margin-top:18px; color:var(--sx-ink-2); font-size:14.5px}
.sx-coa .file{margin-top:16px; position:relative}
.sx-lcard{display:grid; grid-template-columns:auto 1fr; gap:20px; align-items:center; background:var(--sx-night); color:var(--sx-chalk); padding:22px; text-decoration:none; border-radius:4px; transition:transform .5s var(--sx-ease)}
.sx-lcard:hover{transform:translateY(-4px)}
.sx-lcard .num{font-family:var(--sx-f-display); font-weight:900; font-size:84px; line-height:.8; color:var(--sx-green-hi); min-width:1ch; text-align:center}
.sx-lcard .num img{width:84px; height:104px; object-fit:cover; filter:grayscale(1)}
.sx-lcard h3{font-size:32px}
.sx-lcard p{color:var(--sx-mist); font-size:14.5px; margin-top:6px}
.sx-mbar{display:none}
@media (max-width:1000px){
  .sx-pdp{grid-template-columns:1fr}
  .sx-stage, .admin-bar .sx-stage{position:relative; top:0; height:64vh; min-height:420px}
  .sx-mbar{display:flex; position:fixed; left:0; right:0; bottom:0; z-index:50; gap:10px; padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px)); background:rgba(245,246,250,.95); backdrop-filter:blur(10px); border-top:1px solid var(--sx-ink-line)}
  .sx-mbar .sx-btn{flex:1}
  .single-product .sx-foot{padding-bottom:100px}
}
@media (max-width:520px){ .sx-spec, .sx-buy .ctas{grid-template-columns:1fr} .sx-spec div:nth-child(odd){padding-right:0} }

/* dialog */
.sx-dialog{border:0; padding:0; width:min(540px, calc(100vw - 32px)); background:var(--sx-paper-2); color:var(--sx-ink); box-shadow:0 40px 120px rgba(6,10,36,.5); font-family:var(--sx-f-body)}
.sx-dialog::backdrop{background:rgba(6,10,36,.62); backdrop-filter:blur(4px)}
.sx-dialog form{padding:28px; display:grid; gap:14px}
.sx-dialog h2{font-family:var(--sx-f-display); font-weight:900; text-transform:uppercase; font-size:40px; line-height:.95; margin:0}
.sx-fld{display:grid; gap:6px}
.sx-fld label{font-family:var(--sx-f-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--sx-ink-2)}
.sx-fld input, .sx-fld textarea, .sx-fld select{font:inherit; font-size:16px; padding:12px 14px; min-height:48px; border:1px solid var(--sx-ink-line); background:#fff; color:var(--sx-ink); border-radius:2px; width:100%}
.sx-fld textarea{min-height:100px; resize:vertical}
.sx-fld input:focus, .sx-fld textarea:focus, .sx-fld select:focus{outline:2px solid var(--sx-green); border-color:var(--sx-green)}
.sx-row2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.sx-dialog .acts{display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap}
.sx-msg{font-weight:600; color:var(--sx-green-ink); min-height:1.4em; margin:0}
.sx-msg.err{color:var(--sx-danger)}
.sx-hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
@media (max-width:520px){ .sx-row2{grid-template-columns:1fr} }

/* ==========================================================================
   LEGEND page
   ========================================================================== */
.sx-lhero{position:relative; overflow:hidden; padding-block:clamp(40px,8vh,90px) clamp(40px,7vh,80px)}
.sx-lhero .ghost{position:absolute; right:-2vw; top:50%; transform:translateY(calc(-50% + var(--py,0px))); font-family:var(--sx-f-display); font-weight:900; font-size:clamp(280px,50vw,820px); line-height:.75; color:transparent; -webkit-text-stroke:1.5px rgba(111,211,132,.26); letter-spacing:-.04em; pointer-events:none; user-select:none; white-space:nowrap}
.sx-lhero .portrait{position:absolute; right:var(--sx-gutter); bottom:0; width:min(34vw,460px); aspect-ratio:4/5; overflow:hidden; opacity:.9}
.sx-lhero .portrait img{width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.1)}
.sx-lhero .portrait::after{content:""; position:absolute; inset:0; background:linear-gradient(to top, var(--sx-night), transparent 45%), linear-gradient(to right, var(--sx-night), transparent 40%)}
.sx-lhero-in{position:relative; display:grid; gap:24px}
.sx-lhero .first{font-family:var(--sx-f-label); font-style:italic; font-weight:500; font-size:clamp(32px,4vw,62px); line-height:1; color:var(--sx-mist)}
.sx-lhero h1{font-size:clamp(90px,18vw,320px); line-height:.8; letter-spacing:-.03em; margin-top:.1em}
.sx-lhero h1 span{display:inline-block}
.sx-lhero .bio{max-width:58ch; font-size:clamp(18px,1.5vw,22px); color:#D5DAF0}
.sx-meta{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; max-width:980px; margin:0}
.sx-meta div{border-top:2px solid var(--sx-navy-hi); padding-top:12px}
.sx-meta div:nth-child(n+3){border-color:var(--sx-green)}
.sx-meta dt{font-family:var(--sx-f-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--sx-mist)}
.sx-meta dd{margin:4px 0 0; font-weight:700; font-size:18px}
@media (max-width:860px){ .sx-meta{grid-template-columns:repeat(2,minmax(0,1fr))} .sx-lhero .portrait{position:relative; right:auto; width:60%; margin-top:10px} }
.sx-nums{border-block:1px solid var(--sx-line); background:linear-gradient(180deg, var(--sx-night-2), var(--sx-night))}
.sx-nums-in{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.sx-nums .n{padding:32px 22px; border-right:1px solid var(--sx-line)}
.sx-nums .n:last-child{border-right:0}
.sx-nums b{display:block; font-family:var(--sx-f-display); font-weight:900; font-size:clamp(54px,5.6vw,92px); line-height:.85}
.sx-nums span{display:block; margin-top:10px; color:var(--sx-mist); font-size:14px; max-width:24ch}
@media (max-width:760px){ .sx-nums .n{border-bottom:1px solid var(--sx-line)} }
.sx-journey{position:relative}
.sx-journey-pin{position:sticky; top:var(--sx-nav-h); height:calc(100vh - var(--sx-nav-h)); min-height:600px; display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:clamp(20px,4vw,60px); align-items:center}
.sx-map{position:relative; width:100%; aspect-ratio:1.55; max-height:74vh}
.sx-map svg{width:100%; height:100%; overflow:visible}
.sx-map .dots circle{fill:rgba(163,171,207,.18)}
.sx-map .route{fill:none; stroke:var(--sx-green-hi); stroke-width:2.2; stroke-linecap:round; filter:drop-shadow(0 0 6px rgba(111,211,132,.6))}
.sx-map .ghost{fill:none; stroke:rgba(163,171,207,.25); stroke-width:1.2; stroke-dasharray:3 6}
.sx-map .city .dot{fill:var(--sx-night); stroke:var(--sx-mist); stroke-width:1.5; transition:fill .4s, stroke .4s}
.sx-map .city.on .dot{fill:var(--sx-green-hi); stroke:var(--sx-green-hi)}
.sx-map .city .pulse{fill:none; stroke:var(--sx-green-hi); opacity:0}
.sx-map .city.cur .pulse{animation:sx-pulse 1.8s var(--sx-ease) infinite}
@keyframes sx-pulse{0%{r:6; opacity:.9}100%{r:26; opacity:0}}
.sx-map .city text{font-family:var(--sx-f-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; fill:var(--sx-mist)}
.sx-map .city.on text{fill:var(--sx-chalk)}
.sx-stops{position:relative; min-height:380px}
.sx-stop{position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; gap:12px; opacity:0; transform:translateY(24px); transition:opacity .6s var(--sx-ease), transform .6s var(--sx-ease); pointer-events:none}
.sx-stop.cur{opacity:1; transform:none; pointer-events:auto}
.sx-stop .idx{font-family:var(--sx-f-mono); font-size:12px; letter-spacing:.16em; color:var(--sx-green-hi)}
.sx-stop h3{font-size:clamp(44px,5vw,84px)}
.sx-stop .cn{font-family:var(--sx-f-label); font-style:italic; font-size:26px; color:var(--sx-mist)}
.sx-stop ul{list-style:none; padding:0; margin:6px 0 0; display:grid; gap:10px}
.sx-stop li{display:grid; grid-template-columns:48px 1fr; gap:12px; align-items:baseline; border-top:1px solid var(--sx-line); padding-top:10px}
.sx-stop li b{font-family:var(--sx-f-display); font-weight:900; font-size:30px; line-height:1; color:var(--sx-green-hi)}
.sx-stop li b.fin{font-size:12px; font-family:var(--sx-f-mono); font-weight:500; letter-spacing:.1em; color:var(--sx-mist); border:1px solid var(--sx-line); border-radius:999px; padding:4px 7px; justify-self:start}
.sx-stop li em{font-style:normal; color:var(--sx-mist); font-family:var(--sx-f-mono); font-size:12px; margin-left:6px}
.sx-steps > div{height:95vh}
@media (max-width:980px){ .sx-journey-pin{grid-template-columns:1fr; grid-template-rows:auto 1fr; align-content:start; padding-top:16px; gap:8px} .sx-map{aspect-ratio:1.35; max-height:42vh} .sx-stop h3{font-size:42px} }
.sx-shelf{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); padding:1px 0 0 1px}
.sx-tro{background:var(--sx-night); border:1px solid var(--sx-line); margin:-1px 0 0 -1px; padding:22px 20px; display:flex; flex-direction:column; gap:10px; min-height:170px}
.sx-tro .cups{display:flex; gap:4px; flex-wrap:wrap}
.sx-tro .cups svg{width:22px; height:28px}
.sx-tro .cups path{fill:var(--sx-green-hi)}
.sx-tro h3{font-size:24px; line-height:1}
.sx-tro p{font-family:var(--sx-f-mono); font-size:11.5px; letter-spacing:.06em; color:var(--sx-mist); margin-top:auto}
.sx-hlist{list-style:none; margin:0; padding:0}
.sx-hlist li{display:grid; grid-template-columns:130px 1fr; gap:18px; padding:18px 0; border-top:1px solid rgba(238,241,248,.18)}
.sx-hlist li:last-child{border-bottom:1px solid rgba(238,241,248,.18)}
.sx-hlist .yr{font-family:var(--sx-f-mono); font-size:13px; color:var(--sx-green-hi); padding-top:4px}
.sx-hlist b{display:block; font-size:18px}
.sx-split{display:grid; grid-template-columns:1fr 1.3fr; gap:clamp(30px,5vw,80px); align-items:start}
@media (max-width:860px){ .sx-split{grid-template-columns:1fr} .sx-hlist li{grid-template-columns:1fr; gap:4px} }
.sx-palmares{color:#D5DAF0}
.sx-palmares h3{color:var(--sx-chalk)}
.sx-palmares b, .sx-palmares strong{color:var(--sx-chalk)}

/* ==========================================================================
   STORY pages
   ========================================================================== */
/* generic hero */
.sx-shero{position:relative; min-height:min(88vh,860px); display:flex; align-items:flex-end; overflow:hidden; color:#fff; background:var(--sx-night)}
.sx-shero .bg{position:absolute; inset:0}
.sx-shero .bg img{width:100%; height:100%; object-fit:cover; transform:scale(calc(1.06 + var(--p,0) * .08)); filter:saturate(.9)}
.sx-shero::after{content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(6,10,36,.95) 10%, rgba(6,10,36,.35) 60%, rgba(6,10,36,.2))}
.sx-shero .typo{position:absolute; inset:0; display:grid; place-items:center; font-family:var(--sx-f-display); font-weight:900; font-size:clamp(160px,30vw,520px); line-height:.8; color:transparent; -webkit-text-stroke:1.5px rgba(111,211,132,.2); pointer-events:none}
.sx-shero-in{position:relative; z-index:2; padding-block:clamp(40px,8vh,90px); display:grid; gap:18px; transform:translateY(calc(var(--p,0) * -40px))}
.sx-shero h1{font-size:clamp(50px,8vw,140px); max-width:16ch; text-shadow:0 4px 30px rgba(0,0,0,.3)}
.sx-shero .sub{font-family:var(--sx-f-label); font-style:italic; font-size:clamp(22px,2.4vw,34px); color:#E3E7F7; max-width:40ch}
.sx-kicker{display:inline-flex; gap:10px; align-items:center; align-self:flex-start; justify-self:start; background:rgba(6,10,36,.85); color:var(--sx-chalk); padding:8px 14px; border-radius:999px; font-family:var(--sx-f-mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase}
.sx-kicker i{width:8px; height:8px; border-radius:50%; background:var(--sx-green-hi)}
/* special hero: the split doors */
.sx-xhero{position:relative; height:175vh; background:var(--sx-night)}
.sx-xhero-pin{position:sticky; top:0; height:100vh; min-height:600px; overflow:hidden; display:grid; place-items:center}
.sx-xhero .half{position:absolute; top:0; bottom:0; width:50.5%; will-change:transform}
.sx-xhero .half.l{left:0; background:var(--c1,#8C0F22); transform:translateX(calc(var(--open,0) * -100%))}
.sx-xhero .half.r{right:0; background:var(--c2,#EFA300); transform:translateX(calc(var(--open,0) * 100%))}
.sx-xhero .half::after{content:""; position:absolute; inset:0; background:repeating-linear-gradient(0deg, rgba(0,0,0,.05) 0 2px, transparent 2px 6px)}
.sx-xhero .half img{position:absolute; inset:0; width:200%; height:100%; object-fit:cover; opacity:.35; mix-blend-mode:multiply}
.sx-xhero .half.r img{left:-100%}
.sx-xhero .behind{position:absolute; inset:0; display:grid; place-items:center; color:var(--sx-chalk); text-align:center; padding-inline:var(--sx-gutter)}
.sx-xhero .behind .big{font-family:var(--sx-f-display); font-weight:900; font-size:clamp(80px,15vw,250px); line-height:.8; letter-spacing:-.02em; color:transparent; -webkit-text-stroke:1.5px rgba(238,241,248,.5)}
.sx-xhero .behind p{font-family:var(--sx-f-mono); letter-spacing:.2em; text-transform:uppercase; font-size:13px; color:var(--sx-green-hi); margin-top:16px}
.sx-xhero .title{position:relative; z-index:2; text-align:center; padding-inline:var(--sx-gutter); color:#fff; transform:translateY(calc(var(--open,0) * -30vh)); opacity:calc(1 - var(--open,0) * 1.4)}
.sx-xhero .title h1{font-size:clamp(54px,9vw,160px); margin-top:22px; text-shadow:0 6px 40px rgba(0,0,0,.35)}
.sx-xhero .title .sub{font-family:var(--sx-f-label); font-style:italic; font-size:clamp(22px,2.6vw,38px); margin-top:18px; text-shadow:0 2px 20px rgba(0,0,0,.4)}
.sx-xhero .title .sym{position:absolute; left:50%; top:50%; transform:translate(-50%,-52%); font-family:var(--sx-f-hand); font-weight:700; font-size:clamp(260px,40vw,620px); line-height:1; color:rgba(255,255,255,.12); z-index:-1; pointer-events:none; white-space:nowrap}
.sx-xhero .title .sx-kicker{justify-self:center}
/* article layout */
.sx-metabar{display:flex; flex-wrap:wrap; gap:10px 28px; align-items:center; padding-block:24px; border-bottom:1px solid var(--sx-ink-line); font-family:var(--sx-f-mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--sx-ink-2)}
.sx-metabar b{color:var(--sx-ink); font-weight:500}
.sx-metabar a{text-decoration-color:var(--sx-green)}
.sx-alayout{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,700px) minmax(0,1fr); gap:clamp(20px,4vw,60px); padding-block:clamp(50px,8vh,90px)}
.sx-article{grid-column:2; color:#1C2352}
.sx-article .sx-rte:not(.sx-nodrop) > p:first-of-type::first-letter, .sx-dropcap::first-letter{float:left; font-family:var(--sx-f-display); font-weight:900; font-size:5.4em; line-height:.86; margin:.04em .1em 0 0; color:var(--accent, var(--sx-green-ink))}
.sx-chapter{margin-top:1.6em}
.sx-chapter .n{display:block; font-family:var(--sx-f-mono); font-weight:400; font-size:12px; letter-spacing:.2em; color:var(--sx-green-ink); margin-bottom:12px}
.sx-chapter h2{font-size:clamp(36px,4vw,60px); margin-bottom:.5em}
.sx-pull{margin:1.6em -8%; padding:28px 0; border-block:2px solid var(--sx-ink); font-family:var(--sx-f-label); font-style:italic; font-weight:600; font-size:clamp(30px,3.2vw,46px); line-height:1.15; color:var(--sx-ink); text-wrap:balance}
.sx-pull cite{display:block; margin-top:14px; font-family:var(--sx-f-mono); font-style:normal; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--sx-ink-2)}
.sx-chant{margin:1.8em 0; background:var(--sx-night); color:#fff; padding:clamp(28px,4vw,48px); position:relative; overflow:hidden}
.sx-chant .words{font-family:var(--sx-f-display); font-weight:900; text-transform:uppercase; font-size:clamp(54px,8vw,120px); line-height:.86; white-space:nowrap; display:flex; gap:.3em; transform:translateX(var(--cx,0px))}
.sx-chant .words span:nth-child(4n+3){color:var(--accent-2, var(--sx-green-hi))}
.sx-chant p{color:var(--sx-mist)!important; font-size:15px!important; margin-top:16px}
.sx-figure{margin:1.8em 0}
.sx-figure img{width:100%; height:auto; display:block}
.sx-figure figcaption{font-family:var(--sx-f-mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--sx-ink-2); margin-top:10px}
.sx-aside{grid-column:3; align-self:start; position:sticky; top:calc(var(--sx-nav-h) + 30px); display:flex; flex-direction:column; gap:14px}
.sx-aside h4{font-family:var(--sx-f-mono); font-weight:500; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--sx-ink-2); margin:10px 0 0}
.sx-mini{display:grid; grid-template-columns:78px 1fr; gap:14px; align-items:center; text-decoration:none; padding:10px; background:#fff; border:1px solid var(--sx-ink-line); transition:transform .5s var(--sx-ease)}
.sx-mini:hover{transform:translateX(4px)}
.sx-mini .pic{aspect-ratio:3/4; background:radial-gradient(80% 70% at 50% 40%, #2A3A8F, #0B1236); display:grid; place-items:center; overflow:hidden; font-family:var(--sx-f-display); font-weight:900; font-size:40px; color:var(--sx-green-hi)}
.sx-mini .pic img{width:100%; height:100%; object-fit:cover}
.sx-mini .pic.is-3d img{object-fit:contain}
.sx-mini b{display:block; font-family:var(--sx-f-display); font-weight:800; font-size:20px; text-transform:uppercase; line-height:1}
.sx-mini span{display:block; font-size:13px; line-height:1.4; color:var(--sx-ink-2); margin-top:6px}
@media (max-width:1180px){ .sx-alayout{grid-template-columns:minmax(0,1fr)} .sx-article, .sx-aside{grid-column:1} .sx-aside{position:relative; top:0} .sx-pull{margin-inline:0} }
/* scoreboard */
.sx-board{margin:2em 0; background:#0A0F2E; color:#fff; padding:clamp(22px,3vw,34px); border-radius:4px; box-shadow:0 30px 70px rgba(6,10,36,.3)}
.sx-board .top{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-family:var(--sx-f-mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--sx-mist)}
.sx-board .teams{display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:16px; margin-top:22px}
.sx-board .team{display:flex; flex-direction:column; gap:8px}
.sx-board .team.r{align-items:flex-end; text-align:right}
.sx-board .team b{font-family:var(--sx-f-display); font-weight:900; font-size:clamp(22px,2.6vw,40px); text-transform:uppercase; line-height:.9; overflow-wrap:anywhere}
.sx-board .kit{width:34px; height:8px; border-radius:2px}
.sx-board .score{font-family:var(--sx-f-display); font-weight:900; font-size:clamp(52px,6vw,88px); line-height:.8; display:flex; gap:.18em}
.sx-board .score i{font-style:normal; color:var(--sx-mist)}
.sx-board .pens{display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:16px; margin-top:22px; padding-top:18px; border-top:1px solid var(--sx-line); align-items:center}
.sx-board .prow{display:flex; gap:8px; flex-wrap:wrap}
.sx-board .prow.r{justify-content:flex-end}
.sx-pen{width:22px; height:22px; border-radius:50%; border:2px solid rgba(238,241,248,.35); display:grid; place-items:center; transition:background .4s, border-color .4s, transform .4s var(--sx-ease)}
.sx-pen.goal{background:var(--sx-green-hi); border-color:var(--sx-green-hi)}
.sx-pen.miss{border-color:#FF8B80}
.sx-pen.miss::before{content:""; width:12px; height:2px; background:#FF8B80; transform:rotate(45deg)}
.sx-pen.pre{transform:scale(.4); opacity:.25}
.sx-board .plbl{font-family:var(--sx-f-mono); font-size:12px; letter-spacing:.12em; color:var(--sx-mist); text-transform:uppercase; text-align:center}
.sx-board .plbl b{display:block; font-family:var(--sx-f-display); font-weight:900; font-size:34px; color:#fff; letter-spacing:0}
.sx-board .note{margin-top:16px; color:var(--sx-mist); font-size:14px}
/* timeline */
.sx-tl{position:relative; display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:24px; margin:44px 0 0; padding:34px 0 0; list-style:none}
.sx-tl::before{content:""; position:absolute; left:0; right:0; top:0; height:2px; background:var(--sx-line)}
.sx-tl .bar{position:absolute; left:0; top:0; height:2px; width:100%; background:var(--sx-green-hi); transform-origin:left; transform:scaleX(var(--tl,0))}
.sx-tl li{position:relative}
.sx-tl li::before{content:""; position:absolute; top:-41px; left:0; width:14px; height:14px; border-radius:50%; background:var(--sx-night); border:2px solid var(--sx-green-hi)}
.sx-tl .y{font-family:var(--sx-f-display); font-weight:900; font-size:clamp(32px,3.2vw,52px); line-height:.9}
.sx-tl p{color:var(--sx-mist); margin-top:8px; font-size:15px}
.sx-ncard{position:relative; text-decoration:none; background:var(--sx-navy); color:var(--sx-chalk); padding:28px; min-height:260px; display:flex; flex-direction:column; gap:12px; overflow:hidden}
.sx-ncard.alt{background:var(--sx-night)}
.sx-ncard h3{font-size:clamp(30px,3vw,46px)}
.sx-ncard p{color:#C9CFEA}
.sx-ncard .go{margin-top:auto; font-weight:700}
.sx-ncard .big{position:absolute; right:-10px; bottom:-40px; font-family:var(--sx-f-display); font-weight:900; font-size:200px; line-height:1; color:rgba(255,255,255,.06)}
.sx-ncard:hover .go{color:var(--sx-green-hi)}

/* stories archive: featured special stories */
.sx-feat{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(16px,2vw,28px)}
.sx-feat a:first-child{grid-column:1/-1}
.sx-fcard{position:relative; display:flex; align-items:flex-end; min-height:clamp(340px,46vh,520px); color:#fff; text-decoration:none; overflow:hidden; background:var(--sx-night)}
.sx-fcard .bg{position:absolute; inset:0; display:grid; grid-template-columns:1fr 1fr; transition:transform 1.2s var(--sx-ease)}
.sx-fcard .bg img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.5; mix-blend-mode:multiply}
.sx-fcard:hover .bg{transform:scale(1.03)}
.sx-fcard::after{content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(6,10,36,.9), rgba(6,10,36,.1) 70%)}
.sx-fcard .sym{position:absolute; right:4%; top:50%; transform:translateY(-55%); font-family:var(--sx-f-hand); font-weight:700; font-size:clamp(140px,18vw,300px); line-height:1; color:rgba(255,255,255,.16); z-index:1}
.sx-fcard .tx{position:relative; z-index:2; padding:clamp(22px,3vw,40px); display:grid; gap:12px; max-width:900px}
.sx-fcard h3{font-size:clamp(34px,4.4vw,76px)}
.sx-fcard p{color:#E3E7F7; font-family:var(--sx-f-label); font-style:italic; font-size:clamp(20px,1.8vw,26px)}
@media (max-width:860px){ .sx-feat{grid-template-columns:1fr} }

/* ==========================================================================
   CLUB page + ABOUT page
   ========================================================================== */
.sx-chero{--c1:var(--sx-navy); --c2:var(--sx-green); position:relative; overflow:hidden; padding-block:clamp(50px,9vh,110px) clamp(40px,6vh,70px)}
.sx-chero .bands{position:absolute; inset:0; display:grid; grid-template-columns:1fr 1fr; opacity:.18}
.sx-chero .bands i:first-child{background:var(--c1)}
.sx-chero .bands i:last-child{background:var(--c2)}
.sx-chero::after{content:""; position:absolute; inset:0; background:radial-gradient(80% 90% at 20% 30%, transparent, var(--sx-night) 75%)}
.sx-chero-in{position:relative; z-index:1; display:grid; grid-template-columns:auto 1fr; gap:clamp(20px,4vw,50px); align-items:end}
.sx-crest{width:clamp(120px,15vw,220px); aspect-ratio:1; background:#fff; display:grid; place-items:center; border-radius:50%; box-shadow:0 0 0 6px var(--c1), 0 0 0 12px var(--c2); overflow:hidden; font-family:var(--sx-f-display); font-weight:900; font-size:clamp(40px,5vw,72px); color:var(--c1)}
.sx-crest img{width:78%; height:78%; object-fit:contain}
.sx-chero h1{font-size:clamp(52px,8.5vw,150px)}
@media (max-width:700px){ .sx-chero-in{grid-template-columns:1fr} }
.sx-sports-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:1px; background:var(--sx-line); border:1px solid var(--sx-line)}
.sx-sports-grid a, .sx-sports-grid div{background:var(--sx-night); padding:22px 18px; display:flex; flex-direction:column; gap:12px; text-decoration:none; color:var(--sx-chalk); min-height:150px; transition:background .3s}
.sx-sports-grid a:hover{background:var(--sx-navy)}
.sx-sports-grid svg{width:40px; height:40px; color:var(--sx-green-hi)}
.sx-sports-grid b{font-family:var(--sx-f-display); font-weight:900; font-size:26px; text-transform:uppercase; line-height:1; margin-top:auto}
.sx-sports-grid small{font-family:var(--sx-f-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--sx-mist)}
.sx-pillars{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--sx-ink-line); border:1px solid var(--sx-ink-line)}
.sx-pillars article{background:var(--sx-paper-2); padding:clamp(22px,3vw,36px); display:flex; flex-direction:column; gap:14px}
.sx-pillars .i{font-family:var(--sx-f-mono); font-size:12px; letter-spacing:.16em; color:var(--sx-green-ink)}
.sx-pillars h3{font-size:clamp(30px,2.8vw,44px)}
.sx-pillars p{color:var(--sx-ink-2)}
@media (max-width:860px){ .sx-pillars{grid-template-columns:1fr} }
.sx-bignum{font-family:var(--sx-f-display); font-weight:900; font-size:clamp(90px,14vw,230px); line-height:.8; letter-spacing:-.03em}

@media (prefers-reduced-motion: reduce){
  .sx-grain, .sx-map .city.cur .pulse{animation:none}
  .sx-rv, .sx-rv.pre{transform:none; opacity:1; filter:none; transition:none}
}

/* ==========================================================================
   HOMEPAGE (front-page.php + js/sicar-home.js)
   ========================================================================== */
.sx-home{background:var(--sx-night); position:relative}
.sx-stage3d{position:fixed; inset:0; width:100%; height:100%; z-index:0; display:block; transition:opacity .6s}
.sx-stage3d:not(.ready), .sx-stage3d.off{opacity:0}
.sx-stage3d-fallback{position:fixed; inset:0; z-index:0; pointer-events:none; display:none;
  background:radial-gradient(60% 50% at 50% 40%, rgba(60,160,80,.18), transparent 70%), radial-gradient(80% 70% at 50% 60%, var(--sx-navy), var(--sx-night))}
.sx-home.no-webgl .sx-stage3d-fallback{display:block}
.sx-home > section, .sx-home #sx-flight{position:relative; z-index:2}

.sx-rooms{position:fixed; right:var(--sx-gutter); top:50%; transform:translateY(-50%); z-index:15; display:flex; flex-direction:column; gap:14px; font-family:var(--sx-f-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; transition:opacity .4s}
.sx-rooms.hide{opacity:0; pointer-events:none}
.sx-rooms a{display:flex; align-items:center; justify-content:flex-end; gap:10px; text-decoration:none; color:var(--sx-mist)}
.sx-rooms a span{opacity:0; transform:translateX(6px); transition:.3s var(--sx-ease); white-space:nowrap}
.sx-rooms a i{width:8px; height:8px; border-radius:50%; border:1px solid var(--sx-mist); transition:.3s}
.sx-rooms a:hover span, .sx-rooms a.on span{opacity:1; transform:none}
.sx-rooms a.on{color:var(--sx-chalk)}
.sx-rooms a.on i{background:var(--sx-green-hi); border-color:var(--sx-green-hi); box-shadow:0 0 12px var(--sx-green-hi)}
@media (max-width:1000px){ .sx-rooms{display:none} }

.sx-hhero{height:190vh}
.sx-hhero-pin{position:sticky; top:var(--sx-nav-h); height:calc(100vh - var(--sx-nav-h)); min-height:560px; display:flex; flex-direction:column; justify-content:flex-end; padding-bottom:clamp(28px,6vh,72px)}
.sx-hhero-grid{display:grid; grid-template-columns:1fr auto; align-items:end; gap:40px}
.sx-hhero-title{font-size:clamp(64px,13vw,224px)!important; letter-spacing:-.02em!important; line-height:.86!important}
.sx-hhero-title .row{display:block; overflow:hidden; padding-bottom:.02em}
.sx-hhero-title .row > span{display:inline-block}
.sx-hhero-title .g{color:var(--sx-green-hi)}
.sx-hsports{list-style:none; margin:24px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px}
.sx-hsports a{display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:0 14px 0 10px; border:1px solid var(--sx-line); border-radius:999px; text-decoration:none; font-weight:600; font-size:14px; color:var(--sx-chalk); background:rgba(6,10,36,.4); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); transition:border-color .25s, background .25s}
.sx-hsports a:hover{border-color:var(--sx-green-hi); background:rgba(60,160,80,.18)}
.sx-hsports svg{width:18px; height:18px; color:var(--sx-green-hi)}
.sx-hctas{display:flex; flex-wrap:wrap; gap:12px; margin-top:26px}
.sx-acro{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; font-family:var(--sx-f-display); font-weight:800; text-transform:uppercase; font-size:clamp(20px,2.2vw,30px); line-height:1}
.sx-acro li{display:flex; align-items:baseline; white-space:nowrap}
.sx-acro b{color:var(--sx-green-hi); font-weight:900; min-width:.8em}
.sx-acro span{display:inline-block; overflow:hidden; max-width:var(--w,12ch)}
.sx-acro-cap{font-family:var(--sx-f-mono); font-size:11px; letter-spacing:.16em; color:var(--sx-mist); text-transform:uppercase; margin-bottom:10px!important}
.sx-cue{position:absolute; left:50%; bottom:14px; transform:translateX(-50%); font-family:var(--sx-f-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--sx-mist); display:flex; flex-direction:column; align-items:center; gap:10px}
.sx-cue i{width:1px; height:40px; background:linear-gradient(var(--sx-green-hi), transparent); animation:sx-cue 2s var(--sx-ease) infinite; transform-origin:top}
@keyframes sx-cue{0%{transform:scaleY(0)}60%{transform:scaleY(1)}100%{transform:scaleY(1); opacity:0}}
@media (max-width:900px){ .sx-hhero-grid{grid-template-columns:1fr} .sx-acro-wrap{display:none} .sx-cue{display:none}
  .sx-hhero-pin, .sx-arena-pin{background:linear-gradient(to top, rgba(6,10,36,.92) 30%, rgba(6,10,36,.55) 62%, transparent 85%)} }

.sx-mq{border-block:1px solid var(--sx-line); overflow:hidden; background:rgba(6,10,36,.55); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px)}
.sx-mq-track{display:flex; width:max-content; animation:sx-mq 42s linear infinite}
.sx-mq .sx-mq-track span{font-family:var(--sx-f-display); font-weight:800; font-size:clamp(22px,2.6vw,36px); text-transform:uppercase; padding:14px 28px; white-space:nowrap; display:flex; align-items:center; gap:28px}
.sx-mq .sx-mq-track span::after{content:""; width:10px; height:10px; border-radius:50%; background:var(--sx-green)}
@keyframes sx-mq{to{transform:translateX(-50%)}}

.sx-hall-intro{min-height:70vh; display:flex; align-items:center}
.sx-exhibit{min-height:150vh; display:flex; align-items:center}
.sx-exhibit.right{justify-content:flex-end}
@media (min-width:1001px){ .sx-exhibit.right{padding-right:calc(var(--sx-gutter) + 190px)} }
.sx-label-card{width:min(450px,100%); padding:28px 28px 24px; border-radius:4px; background:linear-gradient(160deg, rgba(30,42,110,.6), rgba(6,10,36,.78)); border:1px solid var(--sx-line); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); box-shadow:0 30px 80px rgba(0,0,0,.35)}
.sx-label-card .top{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap}
.sx-label-card h3{font-size:clamp(46px,4.6vw,74px); margin-top:14px; display:flex; align-items:center; gap:14px}
.sx-label-card h3 .ic svg{width:clamp(34px,3vw,46px); height:auto; color:var(--sx-green-hi); display:block}
.sx-label-card .quote{font-size:22px; line-height:1.3; margin-top:12px; color:var(--sx-chalk)}
.sx-label-card .kind{font-family:var(--sx-f-mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--sx-mist); margin-top:14px}
.sx-label-card .piece{display:grid; gap:4px; margin-top:18px; padding:14px 16px; border:1px solid var(--sx-line); border-radius:4px; text-decoration:none; color:var(--sx-chalk); background:rgba(6,10,36,.4)}
.sx-label-card a.piece:hover{border-color:var(--sx-green-hi)}
.sx-label-card .piece .sx-mono{font-size:10.5px; color:var(--sx-green-hi)}
.sx-label-card .piece b{font-weight:600; font-size:15px}
.sx-label-card .piece.note{color:var(--sx-mist); font-size:14px}
.sx-label-card .acts{margin-top:20px}
@media (max-width:1000px){ .sx-exhibit, .sx-exhibit.right{justify-content:center; align-items:flex-end; padding-bottom:10vh} .sx-label-card{padding:22px} }

.sx-arena{height:210vh}
.sx-arena-pin{position:sticky; top:var(--sx-nav-h); min-height:calc(100vh - var(--sx-nav-h)); display:flex; flex-direction:column; justify-content:center; gap:26px; padding-block:40px}
.sx-arena .sx-bignum{color:var(--sx-chalk)}
.sx-arena .sx-bignum small{display:block; font-size:clamp(26px,3vw,46px); letter-spacing:0; margin-top:14px; color:var(--sx-mist)}
.sx-arena .sx-bignum small b{color:var(--sx-green-hi)}
.sx-az{display:flex; flex-wrap:wrap; gap:6px; max-width:980px}
.sx-az a, .sx-az span{font-family:var(--sx-f-display); font-weight:800; font-size:22px; width:44px; height:44px; display:grid; place-items:center; border:1px solid var(--sx-line); border-radius:2px; text-decoration:none; background:rgba(6,10,36,.5); color:var(--sx-chalk); transition:background .25s, border-color .25s, transform .25s var(--sx-ease)}
.sx-az a:hover{background:var(--sx-green); border-color:var(--sx-green); transform:translateY(-3px)}
.sx-az span{color:rgba(163,171,207,.35)}
.sx-names{overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent)}
.sx-names .sx-mq-track{animation-duration:70s}
.sx-names a{font-family:var(--sx-f-label); font-style:italic; font-weight:500; font-size:clamp(26px,2.6vw,40px); padding:6px 22px; text-decoration:none; white-space:nowrap; color:var(--sx-chalk)}
.sx-names a:hover{color:var(--sx-green-hi)}

.sx-strip{position:relative}
.sx-strip-pin{position:sticky; top:var(--sx-nav-h); height:calc(100vh - var(--sx-nav-h)); min-height:600px; overflow:hidden; display:flex; flex-direction:column; justify-content:center; gap:30px}
.sx-strip-head{display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between; gap:18px}
.sx-track{display:flex; gap:clamp(18px,2.4vw,34px); padding-inline:var(--sx-gutter); width:max-content; will-change:transform}
.sx-track .sx-piece, .sx-frame-end{width:clamp(230px,22vw,320px); flex:none}
.sx-frame-end{text-decoration:none}
.sx-frame-end .pic{aspect-ratio:3/4; display:flex; flex-direction:column; justify-content:space-between; background:var(--sx-navy); color:var(--sx-chalk); padding:26px}
.sx-frame-end .pic b{font-family:var(--sx-f-display); font-weight:900; font-size:110px; line-height:.8}
.sx-frame-end .pic span{font-family:var(--sx-f-display); font-weight:800; font-size:28px; text-transform:uppercase; line-height:1}
.sx-strip-bar{height:2px; background:var(--sx-ink-line); margin-inline:var(--sx-gutter); position:relative}
.sx-strip-bar i{position:absolute; inset:0 auto 0 0; width:100%; background:var(--sx-green); transform-origin:left; transform:scaleX(0)}
@media (max-width:760px){ .sx-strip-pin{position:relative; top:0; height:auto; overflow:visible; padding-block:60px} .sx-track{width:auto; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:10px} .sx-track > *{scroll-snap-align:start} .sx-strip{height:auto!important} .sx-strip-bar{display:none} }

.sx-proof{position:relative; overflow:hidden; padding-block:clamp(90px,14vh,160px)}
.sx-proof-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(30px,6vw,90px); align-items:center}
.sx-steps{list-style:none; padding:0; margin:36px 0 0; counter-reset:sxs}
.sx-steps li{display:grid; grid-template-columns:56px 1fr; gap:16px; padding:20px 0; border-top:1px solid rgba(238,241,248,.18)}
.sx-steps li::before{counter-increment:sxs; content:counter(sxs, decimal-leading-zero); font-family:var(--sx-f-mono); color:var(--sx-green-hi); font-size:13px; padding-top:6px}
.sx-steps b{display:block; font-family:var(--sx-f-display); font-weight:800; font-size:28px; text-transform:uppercase; line-height:1}
.sx-steps p{color:#C9CFEA; margin-top:6px; font-size:15px}
.sx-seal{width:min(460px,100%); aspect-ratio:1; margin-inline:auto}
.sx-seal svg{width:100%; height:100%; overflow:visible}
.sx-seal .ring{font-family:var(--sx-f-mono); font-size:13px; letter-spacing:.28em; fill:#C9CFEA; text-transform:uppercase}
@media (max-width:860px){ .sx-proof-grid{grid-template-columns:1fr} .sx-seal{width:min(320px,80%)} }

.sx-visit{padding-block:clamp(90px,14vh,160px)}
.sx-visit-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,80px); align-items:stretch}
.sx-visit-l{display:flex; flex-direction:column; gap:24px}
.sx-free{display:flex; align-items:center; gap:18px; padding:18px 22px; background:var(--sx-paper-2); border:1px solid var(--sx-ink-line); border-left:4px solid var(--sx-green)}
.sx-free b{font-family:var(--sx-f-display); font-weight:900; font-size:34px; text-transform:uppercase; line-height:1; flex:none}
.sx-free span{color:var(--sx-ink-2); font-size:15px}
.sx-facts{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 30px; margin:0}
.sx-facts dt{font-family:var(--sx-f-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--sx-ink-2)}
.sx-facts dd{margin:6px 0 0; font-weight:600; font-size:17px}
.sx-facts .sel{user-select:all}
.sx-desk{background:var(--sx-navy); color:var(--sx-chalk); display:flex; flex-direction:column; position:relative; overflow:hidden; box-shadow:0 40px 90px rgba(13,19,64,.28)}
.sx-desk::before{content:""; position:absolute; right:-120px; top:-120px; width:320px; height:320px; border-radius:50%; background:radial-gradient(circle, rgba(60,160,80,.35), transparent 70%); pointer-events:none}
.sx-desk-stats{display:grid; grid-template-columns:repeat(3,1fr); border-bottom:1px solid rgba(238,241,248,.16)}
.sx-desk-stats div{padding:22px 20px; border-right:1px solid rgba(238,241,248,.16)}
.sx-desk-stats div:last-child{border-right:0}
.sx-desk-stats b{display:block; font-family:var(--sx-f-display); font-weight:900; font-size:clamp(34px,3.2vw,48px); line-height:.9}
.sx-desk-stats span{font-family:var(--sx-f-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:#C9CFEA}
.sx-tabs{display:flex; gap:4px; padding:18px 22px 0; flex-wrap:wrap; position:relative}
.sx-tab{appearance:none; border:0; background:transparent; color:#C9CFEA; font:600 14px var(--sx-f-body); padding:10px 14px; min-height:44px; cursor:pointer; border-bottom:2px solid transparent}
.sx-tab[aria-selected="true"]{color:#fff; border-color:var(--sx-green-hi)}
.sx-tab:hover{color:#fff}
.sx-panel{padding:22px 26px 28px; display:flex; flex-direction:column; gap:16px; flex:1; position:relative}
.sx-panel[hidden]{display:none!important}
.sx-panel h3{font-size:34px}
.sx-panel .hint{color:#C9CFEA; font-size:15px; margin-top:-6px}
.sx-pills{display:flex; flex-wrap:wrap; gap:8px; border:0; margin:0; padding:0}
.sx-pills legend{font-family:var(--sx-f-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:#C9CFEA; margin-bottom:10px; padding:0}
.sx-pills input{position:absolute; opacity:0; pointer-events:none}
.sx-pills label{font-size:13px; font-weight:600; padding:9px 14px; min-height:40px; display:inline-flex; align-items:center; border:1px solid rgba(238,241,248,.28); border-radius:999px; cursor:pointer}
.sx-pills input:checked + label{background:var(--sx-green); border-color:var(--sx-green); color:#fff}
.sx-pills input:focus-visible + label{outline:2px solid var(--sx-green-hi); outline-offset:2px}
.sx-desk .sx-fld label{color:#C9CFEA}
.sx-desk .sx-fld input, .sx-desk .sx-fld textarea, .sx-desk .sx-fld select{background:rgba(6,10,36,.45); border-color:rgba(238,241,248,.22); color:#fff}
.sx-desk .sx-fld input::placeholder, .sx-desk .sx-fld textarea::placeholder{color:rgba(201,207,234,.55)}
.sx-desk .sx-fld select option{color:#0D1340}
.sx-desk .sx-fld.grow{flex:1}
.sx-desk .sx-fld.grow textarea{flex:1}
.sx-desk .sx-msg{color:var(--sx-green-hi)}
.sx-desk .sx-msg.err{color:#FFB4A9}
.sx-send{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-top:auto; padding-top:6px}
.sx-send small{color:#C9CFEA; font-size:13px}
@media (max-width:980px){ .sx-visit-grid{grid-template-columns:1fr} }
@media (max-width:520px){ .sx-facts{grid-template-columns:1fr} .sx-free{flex-direction:column; align-items:flex-start; gap:6px} .sx-desk-stats div{padding:16px 12px} }

@media (prefers-reduced-motion: reduce){ .sx-mq-track, .sx-cue i{animation:none} }