/* Signwork taken from the client's crest: a clipped silver rim over blue enamel. */
:root {
  --plate: url("motion/mill-plate.webp");
  --patina: url("motion/patina.webp");
  --rim: linear-gradient(116deg,#56616c 0%,#f5f1e9 16%,#767e86 27%,#d6d6d3 48%,#46505b 76%,#b6c6cf);
  --cut: polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px));
}
.site-head,.site-foot {
  background: linear-gradient(100deg,#080f1a77,#07111ea1),var(--patina) center / 620px auto;
}
.site-head {
  position:relative; z-index:2; border-bottom:0;
  box-shadow:0 1px #bfc5c8,0 4px #203e77,0 5px #92a8ba,0 9px 12px #0006;
}
.mast { min-height:88px }
.brand { gap:12px }
.brand img { width:68px; filter:drop-shadow(1px 3px 2px #01050b) }
.lettermark { display:grid; color:#edece5; font:800 1.7rem/.86 var(--display); text-transform:uppercase; letter-spacing:.035em; text-shadow:0 2px #0a111f }
.lettermark b { font:inherit; font-size:.99rem; color:#a5bfe9; letter-spacing:.15em; margin-top:6px }
.shop-hero,.page-head,.site-foot { position:relative }
.shop-hero,.page-head {
  background:linear-gradient(90deg,#070e1870,#0a152433 66%,#060d184a),var(--plate) center bottom / 100% 100% no-repeat,#15212f;
  border-bottom:4px solid #274a88; box-shadow:inset 0 -2px #ccd1d2;
}
.shop-hero .hero-grid { width:min(1400px,calc(100% - 2 * var(--gutter))); grid-template-columns:minmax(0,.93fr) minmax(0,1.12fr); gap:clamp(22px,3.25vw,55px); padding-block:clamp(48px,5.5vw,96px) clamp(72px,8.2vw,126px) }
.hero-copy { align-self:start }
.hero-copy h1 { font-size:clamp(4.4rem,7.5vw,8.8rem); letter-spacing:-.018em; line-height:.87 }
.shop-hero h1,.page-head h1,.lettermark { filter:drop-shadow(0 2px 0 #030c18) }
.shop-hero h1,.page-head h1 { color:#f0eee4; text-shadow:0 1px #929eae,1px 3px #0c1629,2px 4px #07111e }
.shop-hero h1 em,.page-head h1 em { color:#add6f1; text-shadow:0 1px #d8ecfc,0 3px #214574,2px 5px #07111e }
.shop-hero .eyebrow,.page-head .eyebrow { color:#c5dcf4 }
.eyebrow::before { width:28px; height:7px; background:currentColor; clip-path:polygon(18% 0,100% 0,82% 100%,0 100%) }
.hero-copy .lead { margin-block:22px 24px; max-width:37ch; text-shadow:0 1px 5px #03080b }
.btn,.site-nav .nav-visit { background:linear-gradient(122deg,#153c79df,#062047ef),var(--patina) center / 480px; box-shadow:inset 0 0 0 2px #122749,inset 0 0 0 3px #799aca; border:1px solid #b7c4d2; border-radius:0 }
.btn:hover,.site-nav .nav-visit:hover { background-color:#194c9c; box-shadow:inset 0 0 0 2px #2b549b,inset 0 0 0 3px #c6dcf2 }
.shop-frame { position:relative; padding:3px; background:var(--rim); clip-path:var(--cut); filter:drop-shadow(0 4px 5px #070e17) }
.shop-frame::before { content:""; position:absolute; inset:2px; background:#17386d; clip-path:var(--cut); pointer-events:none }
.shop-frame > :first-child { clip-path:var(--cut) }
.hero-badge,.shop-hero .hero-badge { padding:0; min-width:0; align-self:center }
.badge-stage { width:100%; max-width:none; aspect-ratio:3/2; background:#0b1521; overflow:hidden }
.hero-badge .badge-stage .wheel-scene { position:absolute; inset:0; width:100%; max-width:none; height:100%; object-fit:cover }
.hero-badge .badge-stage .shop-crest { position:absolute; left:51.8%; top:62.3%; width:45%; height:auto; transform:translate(-25%,-90%); filter:drop-shadow(-2px 2px 2px #01060eb0) }
.badge-stage.playing .shop-crest { visibility:hidden }
@media(prefers-reduced-motion:no-preference) { .strike-pending .shop-crest { visibility:hidden } }
.strike { inset:0; width:100%; height:100% }
.strike-replay { bottom:-43px; right:3px; color:#fff!important; text-shadow:0 1px 3px #000; padding-inline:4px }
.shop-hero .strike-replay[hidden] {display:none}
.band {
  background-color:#eeeae1;
  background-image:linear-gradient(#f5f2ebf5,#f5f2ebf5),var(--patina);
  background-size:auto,480px auto;
}
.band.steel { background:linear-gradient(#c5cac9f0,#e1ded7f2),var(--patina) center / 680px }
.group { border:0; border-top:6px solid; border-image:linear-gradient(180deg,#6a747c 0 15%,#f5f3eb 15% 35%,#193e7a 35% 87%,#788a9e 87%) 1 }
.tool-photo { padding:3px; clip-path:var(--cut); background:var(--rim) }
.tool-photo img { clip-path:var(--cut) }
.tool-card h3,.foot-name { font-family:var(--display); text-transform:uppercase; font-weight:800; letter-spacing:.012em }
.tool-card h3 { font-size:clamp(1.35rem,1.9vw,1.8rem) }
.tool-card h3 a { padding:8px 10px 7px 13px; background:linear-gradient(100deg,#1c354cbb,#0d2139da),var(--patina) center / 320px; border-left:4px solid #476da4; color:#f1eee7; box-shadow:0 1px #7f8a93; align-items:center }
.tool-card h3 .arr { color:#bcd8ee; flex:none }
.tool-card p { padding:4px 4px 0 1px }
.tool-card h3 { margin-top:0 }
.band-head { padding-left:clamp(13px,1.6vw,24px);border-left:6px double #234575 }
.band-head .eyebrow { color:#244373 }
.band-head h2,.group>h2 { letter-spacing:-.012em }
.maker { display:flex; gap:14px; align-items:center }
.maker img { width:78px; height:auto; flex:none }
.maker .foot-name { font-size:1.35rem; color:#f4f1ea; line-height:1.1; margin-bottom:7px }
.site-foot { border-top:3px double #a2afbb }
.page-head .wrap { padding-block:clamp(40px,4.7vw,78px) clamp(46px,6vw,96px) }
.page-head .lead { color:#f7f5ed; text-shadow:0 1px 4px #04090f }
.category-links { margin-top:24px; gap:8px; align-items:center }
.category-links .rack-plate {
  position:relative; isolation:isolate; overflow:hidden; min-height:76px; min-width:105px; padding:12px 15px;
  border:1px solid #b7c4ce; border-bottom:4px solid #4262a0; background:#14223a;
  font:800 clamp(1.15rem,1.55vw,1.65rem)/1 var(--display); text-transform:uppercase; text-decoration:none;
  align-items:end; color:#fff; text-shadow:1px 1px 3px #000;
}
.rack-plate img { z-index:-2; position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.rack-plate::after { content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#010b1420,#05101cbf 70%,#071221ed) }
.rack-plate:hover::after { background:linear-gradient(180deg,transparent,#0712249c 70%,#071221e8) }
.category-links .unlisted { padding-inline:8px; gap:8px; color:#f0f4fb }
.service-intro { display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(28px,5vw,80px);align-items:center }
.service-intro .category-links { display:grid;grid-template-columns:1fr 1fr;margin:0 }
.service-intro .unlisted { grid-column:1/-1;width:fit-content }
.service-intro .rack-plate { min-height:clamp(80px,6.8vw,106px) }
.split>div { border-top:4px double #365170;padding-top:18px }
.split { background:linear-gradient(#f4f1e9eb,#f4f1e9eb),var(--patina) center / 500px }
.in-motion .rack-plate { animation:rack-seat 820ms cubic-bezier(.15,.65,.3,1) both }
.in-motion .rack-plate:nth-child(2) { animation-delay:110ms }
.in-motion .rack-plate:nth-child(3) { animation-delay:220ms }
.in-motion .rack-plate:nth-child(4) { animation-delay:330ms }
@keyframes rack-seat { 0% {transform:translateY(-26px) rotate(-4deg);filter:brightness(.65)} 78%{transform:translateY(2px) rotate(.5deg)} 100%{transform:none;filter:none} }
.exhibit { position:relative; overflow:hidden; aspect-ratio:3/2; background:linear-gradient(125deg,#24334750,#04102355),var(--patina) center / cover }
.wear-photo { display:block; width:100%; height:auto }
.guide-photo { width:100%; height:auto; display:block }
.visit-intro { display:grid; grid-template-columns:1.3fr 1fr; align-items:center; gap:8% }
.ticket-pocket { position:relative; padding:14px 8px 0; max-width:470px }
.ticket-pocket::before { content:"";position:absolute;top:0;left:0;right:0;height:23px;background:repeating-linear-gradient(0deg,transparent 0 2px,#19273418 2px 3px),var(--rim);box-shadow:0 5px 6px #04091188;z-index:1;border-bottom:4px solid #234778 }
.work-slip { display:flex; align-items:center; gap:18px; padding:28px 22px 19px; color:#182635; background:linear-gradient(#ede8daed,#f3eedfed),var(--patina); border-bottom:4px double #838c92; box-shadow:1px 6px 8px #050d1866; transform:rotate(-2deg) }
.work-slip img { width:25%; height:auto }
.slip-title { font:800 clamp(1.6rem,2.4vw,2.4rem)/1 var(--display); text-transform:uppercase }
.work-slip .text-link { color:#173b79!important; text-decoration-color:#315892!important }
.work-slip .text-link:focus-visible { outline-color:#13387b }
.work-slip.in-motion { animation:feed-slip 1.15s cubic-bezier(.13,.7,.25,1) both }
@keyframes feed-slip { 0%{transform:translateY(-23px) rotate(.8deg);clip-path:inset(24px 0 0)} 80%{transform:translateY(2px) rotate(-2.4deg)} 100%{transform:rotate(-2deg);clip-path:inset(0)} }
.ticket { background:linear-gradient(#ece8def2,#f3efe5f5),var(--patina); border-top:6px solid #254674; outline:1px solid #9b9e9c; box-shadow:3px 5px 0 #bec0ba }
.draft { border-top:2px dashed #798899 }
@media(max-width:900px) and (min-width:761px){.hero-copy h1{font-size:4.5rem}.visit-intro{gap:4%}}
@media(max-width:760px) {
  .mast { min-height:0 }.brand { padding-block:6px }.brand img { width:48px }
  .lettermark { font-size:1.32rem }.lettermark b { font-size:.83rem; margin-top:4px }
  .shop-hero .hero-grid { grid-template-columns:1fr; gap:0; padding-block:30px 50px }
  .hero-copy { display:contents }
  .hero-copy .eyebrow { order:0; margin-bottom:10px!important }
  .hero-copy h1 { order:1; font-size:clamp(3.5rem,12vw,5rem) }
  .hero-copy h1 br { display:none }.hero-copy h1 em::before {content:" "}
  .shop-hero .hero-badge { order:2; margin-block:20px 30px }
  .badge-stage { width:100% }
  .hero-copy .lead { order:3; margin:14px 0 16px }
  .hero-copy .actions { order:4 }
  .shop-hero,.page-head { background-size:auto,auto 100%;background-position:center,58% bottom }
  .page-head .wrap { padding-block:32px 40px }
  .category-links { display:grid; grid-template-columns:1fr 1fr; gap:8px }
  .category-links .rack-plate { min-width:0; min-height:60px }
  .category-links .unlisted { grid-column:1/-1; padding-left:0 }
  .service-intro { grid-template-columns:1fr;gap:20px }
  .service-intro .rack-plate { min-height:60px }
  .visit-intro { grid-template-columns:1fr; gap:24px }
  .work-slip { padding:23px 14px 10px }.ticket-pocket { width:min(100%,390px) }
  .maker img { width:64px }
}
@media(max-width:390px) { .hero-copy h1 {font-size:clamp(3.2rem,14vw,3.8rem)} }
@media(prefers-reduced-motion:reduce) {
  .in-motion *, .in-motion, .badge-stage.playing .shop-crest { animation:none!important }
}