/* JingleEngle v2026.09.11.5 — purpose-built corner fittings, clear centers. */
:root{
  --je-lace-art:url('../images/ornaments/readable-foot-band-v1.png');
  --je-small-crest:url('../images/ornaments/readable-crest-band-v1.png');
  --je-lace-frame:url('../images/ornaments/hero-frame-v1.webp');
  --je-lace-engraving:url('../images/ornaments/engraving-v1.webp');
  --je-lace-metal:#ffc28b;
  --je-corner-fitting:url('../images/ornaments/corner-fitting-v1.png');
}

/* Four mirrored pieces sit entirely in the hero's existing frame allowance. */
.je-filigree-page .home-hero > .je-lace-corners,
.je-filigree-page .home-hero > .je-lace-rails{
  position:absolute !important;inset:0;z-index:2;pointer-events:none;
}
.je-lace-corner{
  position:absolute;display:block;width:clamp(34px,5vw,72px);aspect-ratio:1;height:auto;
  background:var(--je-corner-fitting) center/contain no-repeat;
  border:0;border-radius:0;box-shadow:none;pointer-events:none;
}
.je-lace-corner-tl{top:2px;left:2px}
.je-lace-corner-tr{top:2px;right:2px;transform:scaleX(-1)}
.je-lace-corner-bl{bottom:2px;left:2px;transform:scaleY(-1)}
.je-lace-corner-br{bottom:2px;right:2px;transform:scale(-1)}
.je-lace-rails::before,.je-lace-rails::after{
  content:"";position:absolute;left:14%;right:14%;height:15px;top:7px;
  background:var(--je-lace-art) center/auto 48px repeat-x;
  border-block:1px solid #c89061;box-shadow:0 2px 0 #080c14,0 3px 0 #00e5ff66,inset 0 1px 0 #fff1d899;
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 calc(50% - 38px),transparent calc(50% - 32px),transparent calc(50% + 32px),#000 calc(50% + 38px),#000 88%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 calc(50% - 38px),transparent calc(50% - 32px),transparent calc(50% + 32px),#000 calc(50% + 38px),#000 88%,transparent);
}
.je-lace-rails::after{top:auto;bottom:7px;transform:scaleY(-1)}
.je-filigree-page .home-hero .je-hero-medallion{
  border:1px solid #ffe4bb;border-radius:50%;
  box-shadow:0 0 0 3px #080c14,0 0 0 4px #bb8155,0 0 0 7px #080c14,0 0 0 8px #00e5ff77,0 8px 14px #0008;
}
.je-filigree-page .home-hero .je-hero-orbit{outline:1px dotted #ffba82;outline-offset:6px}
.je-filigree-page .home-hero .btn-group{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;width:100%}
.je-filigree-page .home-hero .btn-group > .btn{display:flex;align-items:center;justify-content:center;min-width:0;padding:12px 8px;font-size:clamp(15px,1.32vw,18px)}
@media(max-width:1100px){.je-filigree-page .home-hero .btn-group{grid-template-columns:repeat(2,minmax(0,1fr));max-width:600px;margin-inline:auto}}
@media(max-width:420px){.je-filigree-page .home-hero .btn-group{grid-template-columns:1fr}}

/* Engraved foot pieces occupy their own row, below every card's content. */
.je-filigree-page .je-lace-plaque{
  position:relative !important;display:block !important;flex:none;grid-column:1/-1;align-self:end;
  width:min(100%,320px);height:26px;min-height:26px;margin:16px auto 0;
  border-block:1px solid #c89061;background:var(--je-lace-art) center/auto 56px no-repeat #080c14;
  border-radius:30% / 50%;box-shadow:0 -2px 0 #080c14,0 -3px 0 #00e5ff44,0 2px 0 #080c14,0 3px 0 #ff914d55,inset 0 1px 0 #fff1d866,0 6px 10px #0005;
  pointer-events:none;isolation:isolate;
}
.je-filigree-page .je-lace-plaque::before,.je-filigree-page .je-lace-plaque::after{
  content:"";position:absolute;top:6px;left:18%;width:12px;height:12px;
  border:1px dashed #adfaff;border-radius:50%;outline:1px solid #ce986a;outline-offset:2px;
  background:radial-gradient(circle,#ffe9c4 0 1px,transparent 2px);
  animation:je-lace-turn calc(7s / var(--je-motion-css-speed,.12)) linear infinite;
}
.je-filigree-page .je-lace-plaque::after{left:auto;right:18%;animation-duration:calc(9s / var(--je-motion-css-speed,.12));animation-direction:reverse}
.je-filigree-page .je-lace-plaque > .je-lace-glint{
  position:absolute;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none;
}
.je-lace-glint::before{
  content:"";position:absolute;inset:0 auto 0 -25%;width:25%;
  background:linear-gradient(105deg,transparent,#fff1d875,transparent);
  animation:je-lace-pass calc(8s / var(--je-motion-css-speed,.12)) linear infinite;
}
.je-filigree-page .social-card > .je-lace-plaque{width:calc(100% - 38px);margin:0 auto 18px}
.je-filigree-page .featured-card > .je-lace-plaque{width:calc(100% - 36px);margin:0 auto 20px}
.je-filigree-page .je-motion-card > .je-motion-jewel{
  grid-column:1/-1;justify-self:center;align-self:center;margin:14px auto 2px !important;
}
.je-filigree-page .je-motion-card > .je-lace-plaque{justify-self:center;align-self:end}
.je-filigree-page .featured-card > .featured-card-copy{flex:1}
.je-filigree-page .tool-card{display:flex;flex-direction:column}
.je-filigree-page .tool-card > .je-motion-jewel{margin-top:auto !important}
.je-filigree-page .tool-card > p{margin-bottom:22px}
.je-filigree-tool .layout > .left{position:sticky;top:84px;bottom:auto;width:auto;min-width:0;align-self:start;max-height:calc(100dvh - 100px);overflow:auto}
@media(max-width:860px){.je-filigree-tool .layout > .left{position:static;max-height:none;overflow:visible}}
.je-filigree-page .about-card > .je-lace-plaque{grid-column:1/-1;width:min(100%,560px)}
.je-filigree-page .je-stream-card > .je-lace-plaque{width:82%;margin-top:10px}
.je-filigree-page .post-card > .je-lace-plaque{width:min(100%,620px);height:32px}
.je-filigree-page :is(.featured-card,.about-card,.je-stream-card){
  border-color:#c89466;
  box-shadow:inset 0 1px 0 #fff1d899,0 0 0 2px #080c14,0 0 0 3px #00e5ff55,0 0 0 5px #080c14,0 0 0 6px #ff914d44,0 16px 30px #0006;
}
.je-filigree-page .je-card-crest{
  outline:1px solid #bd8659;outline-offset:5px;
}

/* Small details in the menu's existing perimeter leave the old spin intact. */
.je-filigree-page .je-nav-accents::before,
.je-filigree-page .je-nav-accents::after{
  content:"";position:absolute;left:16px;right:16px;height:4px;top:0;
  background:var(--je-lace-engraving) center/90px 24px repeat-x;
  border-top:1px solid #ffd3a2;opacity:.68;transition:opacity .18s ease;
}
.je-filigree-page .je-nav-accents::after{top:auto;bottom:0;transform:rotate(180deg)}
.je-filigree-page .site-nav a:is(:hover,:focus-visible) .je-nav-accents::before,
.je-filigree-page .site-nav a:is(:hover,:focus-visible) .je-nav-accents::after{opacity:1}
.je-filigree-page .je-nav-gem{outline:1px dotted #ffbb83;outline-offset:3px}
.je-filigree-page .brand .je-brand-picture::after{
  background:var(--je-lace-art) center top/auto 9px repeat-x,var(--je-lace-art) center bottom/auto 9px repeat-x;
  box-shadow:inset 0 1px 0 #ffe9c499,0 0 0 2px #080c14,0 0 0 3px #00e5ff44,0 0 16px #ff914d33;
}
.je-filigree-page .site-header{border-image:linear-gradient(90deg,#ff914d,#00e5ff,#fff1d8,#00e5ff,#ff914d) 1}
.je-filigree-page :is(.featured-section,.je-stream-heading,.collection-picks) > h2{
  padding-bottom:15px;
  background:var(--je-lace-art) center bottom/auto 10px repeat-x;
}
.je-filigree-page .site-footer{
  border-top:4px double #b7865f;
  background-image:var(--je-lace-art),linear-gradient(110deg,#063945aa,transparent 40%,#3c2117aa);
  background-position:center top,center;background-size:auto 18px,cover;background-repeat:repeat-x,no-repeat;
}
.je-filigree-page .footer-inner{padding-top:34px}

/* New goldsmith details for the large lower artwork; original reversal stays. */
button.je-closing-ornament .je-finale-corner{
  width:clamp(24px,3.5vw,44px);height:auto;aspect-ratio:1;
  background:var(--je-corner-fitting) center/contain no-repeat;
  border:0;border-radius:0;box-shadow:none;
}
button.je-closing-ornament .je-finale-corner-tl{top:3px;left:3px}
button.je-closing-ornament .je-finale-corner-tr{top:3px;right:3px;transform:scaleX(-1)}
button.je-closing-ornament .je-finale-corner-bl{bottom:3px;left:3px;transform:scaleY(-1)}
button.je-closing-ornament .je-finale-corner-br{bottom:3px;right:3px;transform:scale(-1)}
button.je-closing-ornament .je-finale-ring-outer{outline:1px dotted #ffd5a1;outline-offset:5px}
button.je-closing-ornament .je-finale-heart-ring{outline:1px dashed #e3a16c;outline-offset:6px}
button.je-closing-ornament .je-finale-frame{padding:5px}

/* Tool inlays are masked to five pixels; no content box or control is resized. */
.je-filigree-tool .je-lace-tool-trim{
  position:absolute !important;display:block !important;inset:0;margin:0 !important;padding:5px;
  border-radius:inherit;box-sizing:border-box;z-index:2;pointer-events:none;
  background:var(--je-lace-engraving) center/160px 160px repeat;
  box-shadow:inset 0 1px 0 #ffdbab,inset 0 -1px 0 #76e9ef;
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;
}
.je-filigree-tool :is(.je-tool-frame,.frame,.ornate){
  border-color:#b88960;
  box-shadow:inset 0 1px 0 #fff1d877,0 0 0 1px #00e5ff77,0 0 0 3px #080c14,0 0 0 4px #ff914d66,0 10px 24px #0006;
}
.je-filigree-tool .je-tool-crown,.je-filigree-tool .crown{
  outline:1px solid #bd8659;outline-offset:3px;
}
.je-filigree-tool .je-crown-chain{
  background:var(--je-lace-art) center/auto 34px repeat-x;
  box-shadow:inset 0 1px 0 #ffe3b888,inset 0 -1px 0 #00e5ff77;
}
.je-filigree-tool .je-crown-ring{outline:1px dotted #ffb981;outline-offset:4px}
.je-filigree-tool :is(.pagehead,.app-header,.mast){
  border-bottom:3px double #b7865f;
}
.je-filigree-tool .mast::after{
  height:12px;bottom:-16px;background:var(--je-lace-art) center/auto 42px repeat-x;
  border-block:1px solid #00e5ff66;box-shadow:0 2px 0 #080c14,0 3px 0 #ff914d66;
}
.je-filigree-tool .je-lace-version{font-size:.8rem;color:#b9c7d8;margin-left:10px;white-space:nowrap}

/* The same carved fittings repeat through collection cards and tool settings. */
.je-panel-corners{position:absolute !important;inset:0;z-index:2;pointer-events:none;border-radius:inherit}
.je-panel-corners > .je-lace-corner{width:32px;height:auto}
.je-filigree-tool .je-panel-corners > .je-lace-corner{width:26px}
.je-filigree-page .je-card-crest{background-size:auto 100% !important;background-repeat:repeat-x !important}
.je-filigree-tool :is(.je-tool-crown,.crown){
  border:3px double #e0aa76;
  box-shadow:inset 0 0 0 2px #080c14,inset 0 0 0 3px #00e5ff99,0 0 0 2px #080c14,0 0 0 3px #d2955e,0 6px 16px #0008;
}
.je-cycle-crown{height:48px;margin:0 0 20px;border:3px double #e0aa76;border-radius:9px;background:var(--je-lace-art) center/auto 100% repeat-x #080c14;box-shadow:inset 0 0 0 2px #080c14,inset 0 0 0 3px #00e5ff88,0 0 0 2px #080c14,0 0 0 3px #00e5ff66;pointer-events:none}
.je-tool-tail{height:38px;width:min(1000px,calc(100% - 36px));margin:20px auto;border-block:3px double #d2955e;border-radius:10px;background:var(--je-lace-art) center/auto 100% repeat-x #080c14;box-shadow:inset 0 1px 0 #00e5ff,0 0 0 2px #080c14,0 0 0 3px #00e5ff55;pointer-events:none}

@keyframes je-lace-turn{to{transform:rotate(360deg)}}
@keyframes je-lace-pass{to{transform:translateX(500%)}}
@media(max-width:760px){
  .je-lace-rails::before,.je-lace-rails::after{left:44px;right:44px;height:9px;top:5px;background-size:auto 30px}
  .je-lace-rails::after{top:auto;bottom:5px}
  .je-lace-corner{width:28px;height:auto}
  .je-filigree-page .home-hero .je-hero-medallion{box-shadow:0 0 0 2px #080c14,0 0 0 3px #c58b5a}
  .je-filigree-page .home-hero .je-hero-orbit{outline-offset:2px}
  .je-filigree-page .je-lace-plaque{height:22px;min-height:22px;background-size:auto 44px;margin-top:12px}
  .je-filigree-page .je-lace-plaque::before,.je-filigree-page .je-lace-plaque::after{top:4px}
  .je-filigree-tool .je-lace-tool-trim{padding:3px}
}
@supports not ((mask-composite:exclude) or (-webkit-mask-composite:xor)){
  .je-filigree-tool .je-lace-tool-trim{display:none !important}
}

/* Let the tracker header and controls fit the available phone width. */
@media(max-width:600px){
 .je-metronome > header{height:auto;min-height:0;flex-wrap:wrap;padding:12px 16px;gap:10px}
 .je-metronome > header h1{font-size:22px;flex-basis:100%}
 .je-metronome > header .navLinks{margin-left:0}
 .je-metronome .left .controlRow{grid-template-columns:minmax(0,1fr) 76px 16px 64px;gap:8px 6px}
 .je-metronome .left .controlRow label{font-size:16px;white-space:normal}
 .je-metronome .left input[type=number],.je-metronome .left select{font-size:18px;min-width:0;width:100%;padding:7px 6px}
 .je-metronome .left .timeRow #tsNote{width:100%}
 .je-metronome .left .rampRow input{width:76px}
 .je-metronome .left .rampRow .muted{font-size:16px;white-space:normal}
 .je-metronome .left .accentRow label{font-size:18px}
 .je-metronome .left .buttonRow{flex-wrap:wrap}
 .je-metronome .left button{font-size:18px;padding:10px 14px}
}

/* Generated practice surfaces inherit the frame on every render. Decoration
   stays inside a five-pixel perimeter, outside notes and editable content. */
.je-filigree-tool :is(.board,.exercise.card,.block-card,.transition-card){
 position:relative;border-radius:12px;
 box-shadow:inset 0 0 0 1px #ffe3b877,0 0 0 1px #00e5ff77,0 0 0 3px #080c14,0 0 0 4px #c68c60,0 8px 20px #0006;
}
.je-filigree-tool :is(.board,.exercise.card,.block-card,.transition-card)::before{
 content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
 box-sizing:border-box;border-radius:inherit;padding:4px;
 background:var(--je-lace-engraving) center/140px 140px repeat;
 box-shadow:inset 0 1px 0 #ffe5bb,inset 0 -1px 0 #00e5ff;
 -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
 -webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;
}
.je-filigree-tool :is(.board,.exercise.card,.block-card,.transition-card):is(:hover,:focus-within)::before{
 background-size:140px 140px;box-shadow:inset 0 1px 0 #fff3dc,inset 0 -1px 0 #a0faff;
}
/* Engraved shoulders sit in each control group's existing padding. */
.je-filigree-tool :is(.root-wrap,.scale-wrap,.board-edit-wrap,.board-move-wrap,.block-card,.transition-card){
 background-image:var(--je-lace-art),var(--je-lace-art);
 background-position:center top,center bottom;background-size:auto 4px,auto 4px;background-repeat:repeat-x;
}
.je-filigree-tool .group{
 background-image:var(--je-lace-art);background-position:center top;background-size:auto 5px;background-repeat:repeat-x;
}
.je-filigree-tool.tool-page .board-controls{padding-top:6px;padding-bottom:6px}
.je-metronome .exercise .head{padding-top:5px;padding-bottom:5px}
/* Repeated metalwork also follows secondary navigation and footer columns. */
.je-filigree-page .footer-inner h3{
 padding-bottom:10px;background:var(--je-lace-art) left bottom/auto 5px repeat-x;
}
.je-filigree-page .je-lace-plaque{
 background-repeat:repeat-x;background-size:auto 40px;
}
.je-filigree-tool .je-tool-tail{
 border:3px double #dca776;
 box-shadow:inset 0 0 0 2px #080c14,inset 0 0 0 3px #00e5ff88,0 0 0 2px #080c14,0 0 0 3px #00e5ff55,0 7px 18px #0007;
}
@media(max-width:600px){
 .je-filigree-tool :is(.board,.exercise.card,.block-card,.transition-card)::before{padding:3px}
}
@supports not ((mask-composite:exclude) or (-webkit-mask-composite:xor)){
 .je-filigree-tool :is(.board,.exercise.card,.block-card,.transition-card)::before{display:none}
}

/* Fine engraved rims around the smaller settings, with label space intact. */
.je-filigree-tool :is(.compact-slider,.settings-data fieldset,.reference-details,.phrase-drawer){
 border-color:#ad805e;
 box-shadow:inset 0 1px 0 #f9d4ab66,inset 0 -1px 0 #00e5ff77,0 0 0 1px #080c14,0 0 0 2px #b77e4b55;
}
.je-filigree-tool .compact-slider{
 background-image:var(--je-lace-art);background-position:center bottom;background-size:auto 3px;background-repeat:repeat-x;
}

/* Artwork composed for its on-page size, rather than a miniature full frieze.
   Fixed motif sizes prevent larger cards from squeezing in extra fine detail. */
.je-filigree-page .je-motion-card > .je-card-crest{
 background-image:var(--je-small-crest);background-size:280px auto !important;
 background-position:center;background-repeat:repeat-x !important;
}
.je-filigree-page .je-lace-plaque{
 background-size:230px auto;background-position:center;background-repeat:repeat-x;
}
.je-filigree-tool .je-crown-chain{background-size:270px auto}
.je-filigree-tool :is(.je-tool-crown,.crown,.je-cycle-crown){
 background-image:var(--je-small-crest);background-size:320px auto;
 background-position:center;background-repeat:repeat-x;
}
.je-filigree-tool .je-tool-tail{background-size:270px auto}
/* Sub-five-pixel accents are polished metal rules, not compressed pictures. */
.je-filigree-tool :is(.root-wrap,.scale-wrap,.board-edit-wrap,.board-move-wrap,.block-card,.transition-card){
 background-image:linear-gradient(90deg,#b77c4c, #ffd5a1 24%,#29c8d2 50%,#ffd5a1 76%,#b77c4c),linear-gradient(90deg,#138c99,#dca471,#138c99);
 background-size:100% 2px,100% 2px;
}
.je-filigree-tool :is(.group,.compact-slider){
 background-image:linear-gradient(90deg,transparent,#dca471 25%,#39d6de 50%,#dca471 75%,transparent);
 background-size:100% 2px;
}
.je-filigree-page .footer-inner h3{
 background-image:linear-gradient(90deg,#dca471,#42d8df,transparent);background-size:100% 2px;
}
@media(max-width:760px){
 .je-filigree-page .je-motion-card > .je-card-crest{background-size:280px auto !important}
 .je-filigree-page .je-lace-plaque{background-size:230px auto}
}

/* Native canvases include transparent margin. Crop that margin in the fixed
   slot while keeping the curves in proportion and fully visible. */
.je-filigree-page .je-motion-card > .je-card-crest{background-position:center calc(50% + 3px)}
.je-filigree-page .je-lace-plaque{background-position:center calc(50% + 1px)}
.je-filigree-tool :is(.je-tool-crown,.crown,.je-cycle-crown){background-position:center calc(50% + 3px)}
@media(max-width:760px){
 .je-filigree-page .je-motion-card > .je-card-crest{background-size:250px auto !important}
 .je-filigree-page .je-lace-plaque{background-size:200px auto}
}

/* Match each shallow rail to the visible artwork, excluding canvas margins. */
.je-lace-rails::before,.je-lace-rails::after{background-size:150px auto}
.je-filigree-page .site-footer{background-size:150px auto,cover}
.je-filigree-page .brand .je-brand-picture::after{
 background:linear-gradient(90deg,#b78052,#8beaf0,#dca471) center top/100% 2px no-repeat,linear-gradient(90deg,#dca471,#8beaf0,#b78052) center bottom/100% 2px no-repeat;
}
.je-filigree-page :is(.featured-section,.je-stream-heading,.collection-picks) > h2{
 background-image:linear-gradient(90deg,transparent,#dca471 20%,#44cdd8 50%,#dca471 80%,transparent);background-size:100% 2px;background-repeat:no-repeat;
}
.je-filigree-tool .mast::after{background-size:120px auto}
@media(max-width:760px){.je-lace-rails::before,.je-lace-rails::after{background-size:100px auto}}