/* Written by SPALLA_WEB/_build/export_to_bartonjames3.py from the Spalla site's
   css/spalla.css, every rule scoped to .spalla-web. Do not edit here. */
/* SPALLA WEB. Tokens and type are borrowed from the TRA viewer, v56
   (4.1/_FINAL/BJ_TRA_APPLICATION/BARTSTAR_SpallaViewer_v56_APPLICATION.html):
   night #04060c, ink #e8e4d8, gold #f7d038, royal #3050d8, Georgia serif body,
   gold Arial bylines, Courier statistics, white glow on the active control. */
.spalla-web{
  --night:#04060c; --night2:#05070c;
  --ink:#e8e4d8; --dim:#9a948a; --line:rgba(232,228,216,.18);
  --pane:rgba(8,10,18,.72); --accent:#f7d038;
  --royal:#3050d8; --act:#ffffff;
  --actglow:0 0 7px rgba(255,255,255,.45), inset 0 0 6px rgba(48,80,216,.30);
  /* the sphere palette, as the viewer paints it */
  --red:#CE2029; --blue:#24409C; --green:#009A44;
  --magenta:#D443B0; --cyan:#00AEC7; --yellow:#F7D038;
  --serif:Georgia,'Times New Roman',serif;
  --sans:Arial,'Helvetica Neue',sans-serif;
  --mono:'Courier New',monospace;
}
.spalla-web *{margin:0;padding:0;box-sizing:border-box}
.spalla-web{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
.spalla-web{background:var(--night);color:var(--ink);font:17px/1.65 var(--serif)}
.spalla-web img{max-width:100%;height:auto;display:block}
.spalla-web a{color:var(--accent);text-decoration-color:rgba(247,208,56,.4);text-underline-offset:3px}
.spalla-web a:hover{text-decoration-color:var(--accent)}
.spalla-web .wrap{max-width:1120px;margin:0 auto;padding:0 16px}
.spalla-web p{max-width:64ch;margin:0 0 1em}

/* the gold byline, the viewer's placard .by */
.spalla-web .by{color:var(--accent);font:700 13px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.spalla-web .sub{color:var(--dim);font:12px/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase}

/* top bar */
.spalla-web .bar{position:sticky;top:0;z-index:10;background:rgba(4,6,12,.86);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.spalla-web .bar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;flex-wrap:wrap;padding-top:8px;padding-bottom:8px}
.spalla-web .bar .mark img{width:min(340px,58vw);filter:drop-shadow(0 0 8px rgba(0,0,0,.9))}
.spalla-web .nav{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.spalla-web .nav a{color:var(--ink);text-decoration:none;font:12px/1 var(--sans);letter-spacing:.12em;
  text-transform:uppercase;padding:9px 12px;border:1px solid transparent;border-radius:3px}
.spalla-web .nav a:hover,.spalla-web .nav a[aria-current=page]{border-color:var(--act);box-shadow:var(--actglow)}
.spalla-web .btn{display:inline-block;background:var(--accent);color:#0a0b10;text-decoration:none;
  font:700 13px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;
  padding:15px 22px;border-radius:3px;border:1px solid var(--accent);cursor:pointer}
.spalla-web .btn:hover{box-shadow:0 0 14px rgba(247,208,56,.45)}
.spalla-web .nav .btn{padding:10px 14px;color:#0a0b10}
.spalla-web .btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.spalla-web .btn.ghost:hover{border-color:var(--act);box-shadow:var(--actglow)}

@container spalla (max-width:640px){
  .spalla-web .bar{position:static}
  .spalla-web .bar .wrap{gap:8px;min-height:0}
  .spalla-web .bar .mark img{width:220px}
  .spalla-web .nav{gap:2px}
  .spalla-web .nav a{padding:8px 8px;font-size:11px;letter-spacing:.08em}
  .spalla-web .nav .btn{padding:9px 12px}
}

/* the Andromeda sky */
.spalla-web .sky{position:relative;background:var(--night) url(../img/andromeda.jpg) center/cover no-repeat;
  border-bottom:1px solid var(--line)}
.spalla-web .sky::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(4,6,12,.15) 0%,rgba(4,6,12,.35) 55%,var(--night) 100%)}
.spalla-web .sky>.wrap{position:relative;z-index:1}
.spalla-web .hero{padding-top:clamp(72px,14vw,150px);padding-bottom:clamp(56px,9vw,96px)}
.spalla-web .hero .title{width:min(760px,100%);filter:drop-shadow(0 0 10px rgba(0,0,0,.9)) drop-shadow(0 2px 4px rgba(0,0,0,.7))}
.spalla-web .hero h1{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.spalla-web .hero .lede{font:italic clamp(22px,3vw,32px)/1.3 var(--serif);max-width:26ch;margin:22px 0 28px;
  text-shadow:0 2px 12px rgba(0,0,0,.9)}
.spalla-web .hero .actions{display:flex;gap:12px;flex-wrap:wrap}
.spalla-web .pagehero{padding-top:clamp(56px,10vw,110px);padding-bottom:clamp(40px,6vw,64px)}
.spalla-web .pagehero h1{font:400 clamp(36px,6vw,64px)/1.08 var(--serif);margin:10px 0 16px;text-shadow:0 2px 16px rgba(0,0,0,.9)}
.spalla-web .pagehero .lede{font:italic clamp(20px,2.4vw,26px)/1.4 var(--serif);max-width:40ch;text-shadow:0 2px 12px rgba(0,0,0,.9)}

.spalla-web section{padding:clamp(56px,8vw,96px) 0;border-top:1px solid var(--line)}
.spalla-web section:first-of-type{border-top:0}
.spalla-web h2{font:400 clamp(30px,4.2vw,46px)/1.12 var(--serif);margin:8px 0 22px}
.spalla-web h3{font:400 24px/1.25 var(--serif);margin:0 0 8px}
.spalla-web .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:36px 56px;align-items:start}

/* the featured product */
.spalla-web .product{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,5vw,64px);align-items:center}
@container spalla (max-width:760px){.spalla-web .product{grid-template-columns:1fr}}
.spalla-web .canister{position:relative;aspect-ratio:622/941;overflow:hidden;border-radius:6px;background:#fff;
  box-shadow:0 0 0 1px var(--line),0 24px 60px rgba(0,0,0,.6)}
/* PLATE_06 shows two canisters; this frame shows only the front one, whose
   star follows the color law. The plate itself is not altered. */
.spalla-web .canister img{width:192.3%;max-width:none;margin-top:-40.2%}
.spalla-web .price{font:400 30px/1.2 var(--serif);margin:6px 0 4px}
.spalla-web .flag{display:inline-block;font:700 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;
  color:#0a0b10;background:var(--accent);padding:6px 9px;border-radius:2px}

/* statistics, the viewer's placard .spec */
.spalla-web .spec{font:14px/1.7 var(--mono);color:var(--dim);display:grid;grid-template-columns:max-content 1fr;
  column-gap:18px;margin:18px 0 26px;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.spalla-web .spec b{color:var(--ink);font-weight:normal;overflow-wrap:anywhere}

/* the law */
.spalla-web .law{list-style:none;margin:0;padding:0}
.spalla-web .law li{display:flex;align-items:center;gap:14px;padding:11px 0;border-bottom:1px solid var(--line)}
.spalla-web .sphere{width:20px;height:20px;border-radius:50%;flex:none;
  box-shadow:inset -4px -4px 6px rgba(0,0,0,.35),inset 3px 3px 5px rgba(255,255,255,.35),0 0 0 1px rgba(255,255,255,.12)}
.spalla-web .spheres{display:flex;gap:4px}

/* plates on the night */
.spalla-web .plate{background:#fff;border-radius:6px;padding:clamp(10px,2.5vw,26px);box-shadow:0 0 0 1px var(--line)}
.spalla-web figure{margin:0}
.spalla-web figcaption{font:13px/1.5 var(--sans);color:var(--dim);margin-top:10px}

/* the seven doorways */
.spalla-web .seven{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.spalla-web .door{display:block;text-decoration:none;color:var(--ink);background:var(--pane);border:1px solid var(--line);
  border-top:3px solid var(--c,var(--accent));border-radius:4px;padding:22px 20px 20px;transition:box-shadow .15s,border-color .15s}
.spalla-web .door:hover{border-color:var(--act);border-top-color:var(--c,var(--accent));box-shadow:var(--actglow)}
.spalla-web .door .who{font:700 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--c,var(--accent))}
.spalla-web .door h3{margin:10px 0 6px}
.spalla-web .door p{font-size:15px;color:var(--dim);margin:0}

.spalla-web .callout{background:var(--pane);border:1px solid var(--line);border-left:3px solid var(--accent);
  padding:22px 24px;border-radius:4px;margin:8px 0 0}
.spalla-web .callout p:last-child{margin:0}
.spalla-web blockquote{font:italic 24px/1.4 var(--serif);border-left:3px solid var(--accent);padding:4px 0 4px 20px;margin:0 0 24px;max-width:40ch}

/* order form */
.spalla-web form{display:grid;gap:16px;max-width:640px}
.spalla-web label{display:grid;gap:6px;font:12px/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.spalla-web input,.spalla-web select,.spalla-web textarea{font:16px/1.4 var(--serif);color:var(--ink);background:rgba(8,10,18,.9);
  border:1px solid var(--line);border-radius:3px;padding:12px}
.spalla-web input:focus,.spalla-web select:focus,.spalla-web textarea:focus{outline:none;border-color:var(--act);box-shadow:var(--actglow)}
.spalla-web .row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.spalla-web .note{font:14px/1.6 var(--sans);color:var(--dim)}

/* founders and footer */
.spalla-web .founder .by{margin-bottom:4px}
.spalla-web footer{border-top:1px solid var(--line);padding:56px 0 40px;background:linear-gradient(180deg,var(--night),#000)}
.spalla-web footer .lockup{width:min(300px,80%);margin-bottom:18px}
.spalla-web footer .contacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:28px;margin:8px 0 32px}
.spalla-web footer .contacts p{font:15px/1.7 var(--sans);color:var(--dim);margin:0}
.spalla-web footer .contacts .by{margin-bottom:6px;color:var(--accent)}
.spalla-web footer .sign{width:150px;opacity:.9;margin:0 0 18px}
.spalla-web footer .legal{font:12px/1.6 var(--sans);color:var(--dim)}
.spalla-web footer .legal p{max-width:none;margin:0 0 4px}

/* the feelings */
.spalla-web .feel{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:26px 36px;margin-top:34px}
.spalla-web .feelcard{border-left:2px solid var(--c,var(--accent));padding:2px 0 2px 18px}
.spalla-web .feelcard p{font-size:16px;color:var(--dim);margin:0}
.spalla-web .word{font:italic 28px/1.2 var(--serif);color:var(--c,var(--accent));margin:0 0 8px}
.spalla-web .feelcard .word{color:var(--c,var(--accent))}
.spalla-web .feelopen .word{font-size:clamp(30px,4vw,42px)}
.spalla-web .feelopen .big{font:clamp(21px,2.5vw,27px)/1.5 var(--serif);max-width:44ch;color:var(--ink)}

/* No orphans (Bart, September 30, 2026): never a lone word on the last line.
   Browsers that support it rebalance the lines; the build also binds the last
   two words of every paragraph, heading, quote and caption with a no-break space. */
.spalla-web h1,.spalla-web h2,.spalla-web h3,.spalla-web .lede,.spalla-web blockquote,.spalla-web .word{text-wrap:balance}
.spalla-web p,.spalla-web figcaption,.spalla-web li{text-wrap:pretty}
/* Titles never break a word across lines (no "close-" at a line end). */
.spalla-web h1,.spalla-web h2,.spalla-web h3,.spalla-web .lede,.spalla-web blockquote,.spalla-web .word{hyphens:manual;-webkit-hyphens:manual}

/* The Stargate: a clear glass cylinder between two glossy black caps, drawn as
   cylinders seen from a little above (the same eye as js/stargate.js), with the
   turning Merkaba inside. --ry is the depth of each ellipse. */
.spalla-web .stargate{position:relative;width:min(100%,440px);margin:0 auto;display:flex;flex-direction:column;
  container-type:inline-size;filter:drop-shadow(0 30px 50px rgba(0,0,0,.75))}
.spalla-web .stargate>*{--ry:9cqw}
/* glossy black, lit from the upper left: the side of a cylinder */
.spalla-web .sg-band{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:linear-gradient(90deg,#020203 0%,#15161b 6%,#3a3b44 16%,#1b1c22 27%,#07080a 45%,#040405 70%,#18191e 88%,#2a2b31 94%,#050506 100%);
  border-bottom-left-radius:50% var(--ry);border-bottom-right-radius:50% var(--ry)}
.spalla-web .sg-cap{position:relative;z-index:2;padding-top:var(--ry)}
/* the top face of each cap, an ellipse */
.spalla-web .sg-cap::before{content:"";position:absolute;z-index:1;left:0;right:0;top:0;height:calc(var(--ry) * 2);border-radius:50%;
  background:radial-gradient(ellipse at 50% 50%,#000 0 52%,#26272d 55%,#0a0a0d 62%,#141519 80%,#3a3b42 97%,#16171b 100%);
  box-shadow:inset 0 2px 3px rgba(255,255,255,.25)}
.spalla-web .sg-top .sg-band{height:calc(18.8cqw + var(--ry))}   /* the strip is 1 x 13.5 in around the jar */
.spalla-web .sg-base .sg-band{height:calc(19.6cqw + var(--ry))}
/* the base's top face is a shelf seen through the glass: a black ring, glossy rim */
.spalla-web .sg-base::before{background:radial-gradient(ellipse at 50% 50%,#111216 0 60%,#2c2d34 70%,#0b0b0e 84%,#3f4048 97%,#1a1b1f 100%)}
.spalla-web .sg-band canvas{position:absolute;inset:0;width:100%;height:100%}
.spalla-web .sg-band{--ry-px:0}
.spalla-web .sg-name,.spalla-web .sg-sub{position:relative;z-index:2;color:#fff;font-family:var(--serif);text-transform:uppercase;
  text-shadow:0 0 8px rgba(0,0,0,.9)}
.spalla-web .sg-name{font-size:8.2cqw;letter-spacing:.12em;line-height:1}
.spalla-web .sg-sub{font:700 2.8cqw/1 var(--sans);letter-spacing:.62em;margin-top:1.4cqw;padding-left:.62em}
.spalla-web .sg-base .sg-band img{position:relative;z-index:2;width:30cqw;margin-top:2cqw;opacity:.95}
.spalla-web .sg-top{margin-bottom:calc(var(--ry) * -1)}
.spalla-web .sg-base{margin-top:calc(var(--ry) * -1)}
.spalla-web .sg-glass{position:relative;z-index:1;aspect-ratio:1/1.08;margin:0 1.4cqw;
  border-left:1px solid rgba(255,255,255,.3);border-right:1px solid rgba(255,255,255,.3);
  background:
    linear-gradient(90deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,.05) 8%,rgba(255,255,255,0) 22%,
      rgba(255,255,255,0) 70%,rgba(255,255,255,.07) 84%,rgba(255,255,255,.24) 97%,rgba(255,255,255,.1) 100%),
    radial-gradient(ellipse at 50% 45%,rgba(60,80,160,.18),rgba(4,6,12,.2) 70%)}
.spalla-web .sg-glass::after{content:"";position:absolute;top:10%;bottom:10%;left:12%;width:4%;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.16),rgba(255,255,255,0));border-radius:50%}
.spalla-web .sg-glass canvas{position:absolute;left:3%;width:94%;top:calc(var(--ry) + 1%);
  height:calc(100% - var(--ry) * 2 - 2%);cursor:grab;touch-action:none}
.spalla-web .sg-glass canvas:active{cursor:grabbing}
.spalla-web .sg-swivel{position:absolute;left:50%;top:var(--ry);width:2px;height:4%;margin-left:-1px;
  background:linear-gradient(180deg,#ccc,#666);border-radius:1px}
.spalla-web .stargate figcaption{text-align:center;margin-top:12px}

/* v2: the star has its own layer over the whole glass, above both caps, so it can
   hang lower and its black tip can sit in front of the base's rear rim.
   Glass top = top cap (ry + 18.8cqw band + ry) - ry = 27.8cqw; glass height = 1.08 x 97.2cqw. */
.spalla-web .sg-stage{position:absolute;z-index:3;left:0;width:100%;top:27.8cqw;height:105cqw;cursor:grab;
  touch-action:pan-y pinch-zoom}   /* a thumb turns it sideways; up and down still scrolls the page, pinch still zooms */
.spalla-web .sg-stage:active{cursor:grabbing}

/* v2: a slight reflective edge inside the glass, along the rear rim of the base,
   following its ellipse, so the black tip reads against it (Bart). The star's
   layer sits above it, so the black sphere is drawn in front of this light. */
.spalla-web .sg-base::before{box-shadow:inset 0 2px 1px rgba(255,255,255,.55),inset 0 5px 6px rgba(215,225,255,.28),
  inset 0 12px 18px rgba(150,170,255,.16)}
/* the base's polished top face catches the star's light, most under the star,
   so the black tip has a lit ground to stand against */
.spalla-web .sg-base::before{background:
  radial-gradient(ellipse 46% 42% at 50% 44%,rgba(190,200,240,.34),rgba(150,160,210,.14) 55%,rgba(0,0,0,0) 100%),
  radial-gradient(ellipse at 50% 50%,#15161b 0 58%,#2c2d34 68%,#0b0b0e 82%,#3f4048 96%,#1a1b1f 100%)}

/* Andromeda balanced at the right (Bart): the image is drawn 1.5 times the width
   of the band and slid so the galaxy's core (54% across the photograph) lands
   about 70% across the page, leaving open starfield behind the words at left.
   Narrow screens keep the plain cover crop. */
@container spalla (min-width:760px){
  .spalla-web .sky{background-size:150% auto;background-position:22% 50%}
}
/* the tagline in two lines on desktop */
.spalla-web .hero .lede{max-width:36ch}
/* the home hero trimmed top and bottom to about 75% of its first height (Bart) */
.spalla-web .hero{padding-top:clamp(40px,7vw,90px);padding-bottom:clamp(32px,4.5vw,60px)}
/* No darkening vignette over Andromeda (Bart): the galaxy keeps its full
   brightness; the words carry their own shadow. */
.spalla-web .sky::after{content:none}
/* ...except a very slight fade along the bottom quarter inch (24 CSS px) of each
   sky band, easing it into the page (Bart) */
.spalla-web .sky::after{content:"";position:absolute;left:0;right:0;bottom:0;top:auto;height:24px;inset:auto 0 0 0;
  background:linear-gradient(180deg,rgba(4,6,12,0),rgba(4,6,12,.55));pointer-events:none}
/* "Discover it": a sunglasses-dark tint, the sky barely showing through (Bart) */
.spalla-web .btn.ghost{background:rgba(2,3,8,.62)}   /* stars show through, slightly */
/* small print under the Stargate, in the manner of a cereal box's
   "serving suggestion" (Bart) */
.spalla-web .fineprint{font:10.5px/1.45 var(--sans);color:var(--dim);opacity:.8;text-align:center;
  max-width:36ch;margin:6px auto 0;letter-spacing:.01em}
/* exactly two lines (Bart): the first line never wraps; the type shrinks on the
   narrowest phones so it fits */
.spalla-web .fineprint{max-width:none;font-size:min(10.5px,2.45vw)}
.spalla-web .fineprint span{white-space:nowrap}
/* the star's layer reaches 10cqw below the glass, over the base's top face, so
   the black tip at (-9,-9,-9) is never clipped at the larger size */
.spalla-web .sg-stage{height:115cqw}

/* Smooth rotation (Bart): a CSS filter over the turning canvas made the browser
   recompute the shadow every frame. The shadow now sits on the still parts only. */
.spalla-web .stargate{filter:none}
.spalla-web .sg-cap,.spalla-web .sg-glass{filter:drop-shadow(0 18px 30px rgba(0,0,0,.55))}
/* headings keep the Spalla ink even inside a host page that colors h1-h4 */
.spalla-web h1,.spalla-web h2,.spalla-web h3,.spalla-web h4{color:var(--ink)}
/* headings take their natural width even inside a host page that fixes h2 widths */
.spalla-web h2{width:auto;max-width:none}
/* the first run, under the price */
.spalla-web .edition{border-left:2px solid var(--accent);padding:4px 0 4px 14px;margin:6px 0 20px;max-width:46ch}
.spalla-web .edition .by{font-size:12px;margin:0 0 6px}
.spalla-web .edition p{font-size:15px;line-height:1.55;color:var(--ink);margin:0}
.spalla-web .edition .ship{margin-top:8px;font:13px/1.5 var(--sans);color:var(--dim)}
/* a hyphenated word never breaks at its hyphen (the build wraps each one) */
.spalla-web .nobr{white-space:nowrap}
/* the order form: a field for robots only, out of sight; the sending status */
.spalla-web .hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.spalla-web .formstatus{font:14px/1.5 var(--sans);color:var(--accent);min-height:1.5em;margin:0}
.spalla-web .sent{margin-top:8px}
/* the thank-you after an order is sent: large, centered, framed in gold */
.spalla-web .sent{border:2px solid var(--accent);border-radius:8px;background:var(--pane);
  padding:clamp(28px,5vw,48px) clamp(20px,4vw,40px);text-align:center;max-width:640px;margin:8px auto 0;
  box-shadow:0 0 0 6px rgba(247,208,56,.08),0 18px 40px rgba(0,0,0,.45);outline:none}
.spalla-web .sent h2{font-size:clamp(40px,7vw,64px);margin:6px 0 14px;color:var(--accent)}
.spalla-web .sent .sent-msg{font:clamp(19px,2.4vw,24px)/1.45 var(--serif);color:var(--ink);max-width:30ch;margin:0 auto}

/* the strip of tabs: HOME, the seven audiences, ORDER. The page you are on glows
   around its edges like neon, in its own color (--c, set on each tab). */
.spalla-web .tabs{background:linear-gradient(180deg,rgba(4,6,12,.55),var(--night));border-bottom:1px solid var(--line)}
.spalla-web .tabs ul{list-style:none;margin:0 auto;padding:14px 16px;max-width:1120px;
  display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:8px}
.spalla-web .tabs a{display:block;text-align:center;padding:11px 4px;border:1px solid rgba(232,228,216,.14);border-radius:6px;
  background:rgba(8,10,18,.65);color:var(--dim);text-decoration:none;white-space:nowrap;
  font:700 11px/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;
  transition:color .2s ease,border-color .2s ease,box-shadow .2s ease}
.spalla-web .tabs a:hover,.spalla-web .tabs a:focus-visible{color:var(--ink);border-color:var(--c);box-shadow:0 0 6px -1px var(--c);outline:none}
.spalla-web .tabs a[aria-current=page]{color:#fff;border-color:var(--c);
  box-shadow:0 0 2px var(--c),0 0 9px var(--c),0 0 18px -2px var(--c),inset 0 0 8px -2px var(--c);
  text-shadow:0 0 6px var(--c)}
@container spalla (max-width:760px){.spalla-web .tabs ul{grid-template-columns:repeat(3,minmax(0,1fr))}}
.spalla-web .tabs li{margin:0;padding:0}

/* Every header is the same height (Bart, September 30, 2026: the tab strip must not
   jump between Home, Order and the seven audiences). The height follows the band's
   own width, its text is centered in it, and the tabs below therefore sit at the same
   place on every page. */
.spalla-web .sky{container-type:inline-size}
.spalla-web .sky>.hero,.spalla-web .sky>.pagehero{min-height:max(320px,38cqw);display:flex;flex-direction:column;justify-content:center;
  padding-top:28px;padding-bottom:28px}
.spalla-web .sky>.pagehero h1{margin-top:6px}
/* tab lettering tightens where the strip is nine across but narrow, so no word is clipped */
@container spalla (max-width:1000px){.spalla-web .tabs a{letter-spacing:.07em;font-size:10.5px;padding-left:2px;padding-right:2px}}
/* the smallest phones: the home header's tagline and two buttons need a little more room */
@container spalla (max-width:340px){.spalla-web .sky>.hero,.spalla-web .sky>.pagehero{min-height:346px}}
/* a photograph in the page (the beach sun Merkaba): rounded, no white plate, and the
   frame trims a sliver off the bottom where the photograph has a white edge */
.spalla-web .photo{border-radius:6px;overflow:hidden;aspect-ratio:4/2.93;box-shadow:0 0 0 1px var(--line),0 18px 40px rgba(0,0,0,.45)}
.spalla-web .photo img{width:100%;height:100%;object-fit:cover;object-position:center top}

/* Tabs, second design (Bart, September 30, 2026): a color strip atop every tab; crisp,
   not fuzzy; and the selected tab lit like LEDs mounted behind it, glowing out past its
   TOP, LEFT and RIGHT edges only. Each glow is a shadow pushed toward one side with a
   negative spread, so none of it reaches the bottom edge. No blur on the lettering. */
.spalla-web .tabs a{border:1px solid rgba(232,228,216,.12);border-top:3px solid var(--c);border-radius:4px 4px 3px 3px;
  background:#0a0c13;color:#a9a39a;text-shadow:none;box-shadow:none;padding-top:10px;padding-bottom:10px}
.spalla-web .tabs a:hover,.spalla-web .tabs a:focus-visible{color:var(--ink);border-color:rgba(232,228,216,.22);border-top-color:var(--c);
  box-shadow:0 -4px 8px -5px var(--c)}
.spalla-web .tabs a[aria-current=page]{color:#fff;background:#10121b;text-shadow:none;
  border-color:var(--c);border-bottom-color:rgba(232,228,216,.14);
  box-shadow:
    0 -3px 7px -2px var(--c),       /* top, close */
    -3px 0 7px -3px var(--c),       /* left, close */
    3px 0 7px -3px var(--c),        /* right, close */
    0 -10px 18px -8px var(--c),     /* top, wider bloom */
    -10px 0 18px -11px var(--c),    /* left, wider */
    10px 0 18px -11px var(--c)}     /* right, wider */
/* ...in the look of the audience cards lower on the page (Bart): the same tile, fine
   border and 3px color strip, the same Georgia in normal case and the same warm ink. */
.spalla-web .tabs a{font:400 16px/1.2 var(--serif);letter-spacing:0;text-transform:none;color:var(--ink);
  background:var(--pane);border:1px solid var(--line);border-top:3px solid var(--c);border-radius:4px;
  padding:12px 6px 11px}
.spalla-web .tabs a:hover,.spalla-web .tabs a:focus-visible{color:var(--ink);border-color:var(--act);border-top-color:var(--c);box-shadow:var(--actglow)}
.spalla-web .tabs a[aria-current=page]{color:#fff;background:rgba(16,18,27,.9);border-color:var(--c);border-bottom-color:var(--line)}
@container spalla (max-width:1000px){.spalla-web .tabs a{font-size:15px;letter-spacing:0;padding-left:2px;padding-right:2px}}
/* the cards' small colored label, on the tabs too, so the two read as one control */
.spalla-web .tabs a .who{display:block;font:700 10px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--c);margin:0 0 6px}
.spalla-web .tabs a .tt{display:block}

/* The two calls to action in the strip (Bart, September 30, 2026): Spalla Home in white,
   and Order as the inverse of the other tabs, gold-filled like every Order button. */
.spalla-web .tabs a.tab-index{border-color:rgba(255,255,255,.55);border-top-color:#fff;color:#fff}
.spalla-web .tabs a.tab-index .who{color:#fff}
.spalla-web .tabs a.tab-index:hover,.spalla-web .tabs a.tab-index:focus-visible{border-color:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.35),0 -4px 10px -4px #fff}
.spalla-web .tabs a.tab-index[aria-current=page]{background:rgba(22,24,34,.95);border-color:#fff;border-bottom-color:rgba(255,255,255,.35);
  box-shadow:0 -3px 7px -2px #fff,-3px 0 7px -3px #fff,3px 0 7px -3px #fff,
    0 -10px 18px -8px rgba(255,255,255,.9),-10px 0 18px -11px #fff,10px 0 18px -11px #fff}
.spalla-web .tabs a.tab-order{background:var(--accent);border-color:var(--accent);border-top-color:#fff3b0;color:#0a0b10;font-weight:700}
.spalla-web .tabs a.tab-order .who{color:#3d3000}
.spalla-web .tabs a.tab-order:hover,.spalla-web .tabs a.tab-order:focus-visible{color:#0a0b10;border-color:var(--accent);border-top-color:#fff3b0;
  box-shadow:0 0 14px rgba(247,208,56,.45)}
.spalla-web .tabs a.tab-order[aria-current=page]{background:#ffd84a;color:#0a0b10;border-color:#ffe27a;border-bottom-color:var(--accent);
  box-shadow:0 -3px 8px -2px var(--accent),-3px 0 8px -3px var(--accent),3px 0 8px -3px var(--accent),
    0 -12px 22px -8px var(--accent),-12px 0 22px -11px var(--accent),12px 0 22px -11px var(--accent)}

/* Tab layout (Bart, October 1, 2026: "align the tabs at top across 4, and vertically 2").
   The eight (seven audiences and Order) sit four across and two high; Spalla Home holds
   its own place: a tall tab at the left spanning both rows, or, on a phone, a full bar
   across the top. All nine stay, top-aligned. */
.spalla-web .tabs ul{grid-template-columns:minmax(0,1.15fr) repeat(4,minmax(0,1fr));align-items:stretch}
.spalla-web .tabs li:first-child{grid-row:span 2}
.spalla-web .tabs li:first-child a{height:100%;display:flex;flex-direction:column;justify-content:center}
.spalla-web .tabs a{font-size:16px;letter-spacing:0;padding-left:6px;padding-right:6px}
@container spalla (max-width:640px){
  .spalla-web .tabs ul{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  .spalla-web .tabs li:first-child{grid-row:auto;grid-column:1 / -1}
  .spalla-web .tabs a{font-size:13.5px;padding:10px 2px 9px}
  .spalla-web .tabs a .who{font-size:9px;letter-spacing:.12em;margin-bottom:5px}
}
/* 25% thinner (Bart, October 1, 2026): less padding and a tighter label, same type size */
.spalla-web .tabs a{padding-top:5px;padding-bottom:4px}
.spalla-web .tabs a .who{margin-bottom:3px}
@container spalla (max-width:640px){.spalla-web .tabs a{padding-top:4px;padding-bottom:4px}.spalla-web .tabs a .who{margin-bottom:3px}}

/* Three by three at every width (Bart, October 1, 2026: "tabs can go 3 x 3"). Home at the
   top left, Order at the bottom right; replaces the Home-spanning layout above. */
.spalla-web .tabs ul{grid-template-columns:repeat(3,minmax(0,1fr))}
.spalla-web .tabs li:first-child{grid-row:auto;grid-column:auto}
.spalla-web .tabs li:first-child a{height:auto;display:block}
@container spalla (max-width:640px){
  .spalla-web .tabs ul{grid-template-columns:repeat(3,minmax(0,1fr))}
  .spalla-web .tabs li:first-child{grid-row:auto;grid-column:auto}
  .spalla-web .tabs a{font-size:15px}
}
/* hold the thinner tabs at this thickness (Bart): 45px wide screens, 40px phones */
@container spalla (max-width:640px){.spalla-web .tabs a{padding-top:3px;padding-bottom:3px}}

/* Linear on larger screens, three by three on small ones (Bart, October 1, 2026). In the
   site this answers to the Spalla block's own width (a container query). */
@container spalla (min-width:761px){.spalla-web .tabs ul{grid-template-columns:repeat(9,minmax(0,1fr))}}
@container spalla (min-width:761px) and (max-width:1000px){.spalla-web .tabs a{font-size:14.5px;padding-left:2px;padding-right:2px}}

/* Tabs that hold still (Bart, October 1, 2026: "when i switch tabs the entire page blanks
   then appears ... it is distracting without the menu staying consistently on screen").
   Each tab is still its own page. The browser now keeps the old page up until the new one
   is ready and blends the two in a fifth of a second; the strip of tabs is carried across
   solid, never blended, so only its lit tab changes. The keep-place script at the foot of
   each page opens the new page scrolled to the same place. A browser that cannot do this
   changes page as before. */
@view-transition{navigation:auto}
.spalla-web .tabs{view-transition-name:spalla-tabs}
::view-transition-old(root),::view-transition-new(root){animation-duration:.2s}
::view-transition-group(spalla-tabs),::view-transition-old(spalla-tabs),::view-transition-new(spalla-tabs){animation:none}
::view-transition-old(spalla-tabs){opacity:0}

/* A soft dark shadow behind "THE SPALLA MERKABA" on each page's sky (Bart, October 1, 2026:
   "a faded barely noticed darker blackish shadow so that the words are high contrast"): a
   blurred dark oval behind the label, faded to nothing at its edges, and a close shadow on
   the letters themselves. */
.spalla-web .pagehero .sub{position:relative;isolation:isolate;align-self:flex-start;
  text-shadow:0 0 2px rgba(0,0,0,.95),0 0 8px rgba(0,0,0,.75)}
.spalla-web .pagehero .sub::before{content:"";position:absolute;inset:-14px -30px;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(0,0,0,.62),rgba(0,0,0,.38) 55%,rgba(0,0,0,0))}

/* The spinning Stargate 10% smaller everywhere (Bart, October 1, 2026: "reduce all instances
   of the spinning cannister by about 10%"). Was min(100%, 440px). Everything inside it is
   sized from its width, so the caps, glass, spheres and starburst all scale together. */
.spalla-web .stargate{width:min(90%,396px)}

/* the site frame (bj-responsive.css v19, v50) */
.spalla-web{width:min(1024px, calc(100vw - 28px));max-width:none;
  container-type:inline-size;container-name:spalla;margin:0 0 18px -2px}   /* -2px: .bj-content's own padding */

/* Tabs that hold still (Bart, 2026-10-01). Between two Spalla pages the site's own header,
   with its menu, is carried across solid like the strip of tabs. Arriving by a tab
   (html.spalla-held, set by the keep-place script) the page chevrons do not replay their
   arrival cue and the phone banner does not animate its name, so nothing moves. */
.bj-head{view-transition-name:bj-head}
::view-transition-group(bj-head),::view-transition-old(bj-head),::view-transition-new(bj-head){animation:none}
::view-transition-old(bj-head){opacity:0}
html.spalla-held .bj-swipe,html.spalla-held .bj-up{animation:none}
html.spalla-held .bj-banner .name{transition:none}