* {
  box-sizing:border-box;
}

html {
  color-scheme:light;
}

body {
  margin:0;
  background:radial-gradient(ellipse at 50% 34%,#254c48,transparent 70%),repeating-linear-gradient(125deg,#ffffff03 0 1px,transparent 1px 8px),#10292a;
  color:#f8efdc;
  font-family:Georgia,'Times New Roman',serif;
}

body:before {
  content:'';
  position:fixed;
  pointer-events:none;
  inset:0;
  opacity:.2;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='178' viewBox='0 0 220 178'%3E%3Cg fill='none' stroke='%239fc1a6' stroke-width='.55'%3E%3Cpath d='M-20 98Q12 40 48 54T94 21 170 16 245 -21M-20 108Q12 49 50 63T103 27 173 24 246 -11M-20 118Q12 59 53 72T112 33 176 32 246 0M-20 128Q12 69 56 81T121 39 179 40 246 11'/%3E%3C/g%3E%3C/svg%3E");
}

main {
  position:relative;
  max-width:1080px;
  padding:0 26px 22px;
  margin:auto;
}

.mast {
  height:54px;
  border-bottom:1px solid #a2a48755;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.mastbrand {
  font-size:16px;
}

.mastbrand span {
  color:#e4ba72;
  font-size:21px;
  vertical-align:-1px;
  margin-right:7px;
}

.edition,.eyebrow,.label,.toprail,.panelhead,figcaption,.controls small,.gauge,.footmark {
  font:700 10px/1.4 system-ui,sans-serif;
  letter-spacing:.16em;
}

.edition {
  color:#e1ddc7;
}

.edition i {
  color:#d1a35f;
  margin:0 6px;
}

.intro {
  text-align:center;
  padding:23px 0 21px;
}

.eyebrow {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  color:#e8c98a;
  margin:0;
}

.eyebrow span {
  width:36px;
  height:1px;
  background:#bda16b;
}

.intro h1 {
  font-weight:400;
  line-height:1.04;
  letter-spacing:-.055em;
  font-size:clamp(40px,5vw,72px);
  margin:8px 0;
}

.intro em {
  color:#f1ca89;
  font-weight:400;
}

.intro>p:last-child {
  color:#e2ddcb;
  font-size:17px;
  margin:0;
}

.machine {
  position:relative;
  max-width:920px;
  margin:auto;
  padding:13px;
  background:repeating-linear-gradient(25deg,#24120b18 0 1px,transparent 1px 4px),linear-gradient(105deg,#975c34,#61351f 26%,#78472b 70%,#47271b);
  border:2px solid #b1814d;
  border-radius:23px;
  box-shadow:0 21px 35px #04141780,inset 0 0 0 3px #3f251a,inset 0 0 0 5px #a7794d;
}

.machine:before {
  position:absolute;
  content:'';
  inset:7px;
  border:1px dashed #cc996a;
  border-radius:16px;
  pointer-events:none;
}

.corner {
  position:absolute;
  width:37px;
  height:37px;
  z-index:2;
  background:linear-gradient(135deg,#f4df98,#b6823f 52%,#6a471e);
  clip-path:polygon(0 0,100% 0,0 100%);
  border-radius:17px 0 0;
  filter:drop-shadow(0 0 2px #392113);
}

.corner:after,.pin {
  content:'';
  width:6px;
  height:6px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 25%,#fff0c3,#9b743e 48%,#503718);
  box-shadow:0 1px 1px #0007;
}

.corner:after {
  position:absolute;
  left:9px;
  top:9px;
}

.tl {
  left:0;
  top:0;
}

.tr {
  right:0;
  top:0;
  transform:rotate(90deg);
}

.bl {
  left:0;
  bottom:0;
  transform:rotate(-90deg);
}

.br {
  right:0;
  bottom:0;
  transform:rotate(180deg);
}

.instrument {
  border:2px solid #bfa16a;
  background:linear-gradient(135deg,#20423c,#102c2b 55%,#22433d);
  border-radius:11px;
  box-shadow:0 0 0 2px #36281b,inset 0 0 15px #041915;
}

.toprail,.panelhead {
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:#ecd098;
  text-align:center;
  padding:6px 13px;
  font-size:9px;
}

.chamber {
  display:grid;
  grid-template-columns:1.16fr 1fr;
  gap:14px;
  padding:0 15px 13px;
}

.window {
  margin:0;
  position:relative;
  border-radius:9px;
  overflow:hidden;
  border:4px solid #c9a767;
  box-shadow:0 0 0 2px #4c391d,inset 0 0 5px #281e14;
  background:#293c3b;
  align-self:stretch;
  min-height:250px;
}

.scene {
  position:absolute;
  inset:0;
  overflow:hidden;
  background:linear-gradient(155deg,#689693,#21414c);
  display:grid;
  place-items:center;
}

.scene>img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.scene>img[hidden],[hidden] {
  display:none!important;
}

figcaption {
  position:absolute;
  bottom:11px;
  left:11px;
  background:#102b2cf0;
  padding:6px 10px;
  border:1px solid #f4d69985;
  color:#fff1d8;
  font-size:9px;
  letter-spacing:.12em;
}

.dot {
  display:inline-block;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#edbd68;
  vertical-align:1px;
  margin-right:5px;
}

.ticket {
  background:radial-gradient(ellipse at 30% 10%,#fff7dc,#e8d6b0);
  color:#2f352b;
  padding:clamp(16px,2.2vw,29px);
  border:1px solid #d1ad73;
  outline:1px solid #ae885a;
  outline-offset:-6px;
  position:relative;
  align-content:center;
  min-height:270px;
}

.label {
  color:#735027;
  font-size:9px;
}

.ticket h2 {
  font-weight:400;
  font-size:clamp(34px,3.8vw,52px);
  line-height:.99;
  letter-spacing:-.045em;
  margin:9px 0 12px;
}

.ticket h2 em {
  color:#713c31;
  font-weight:400;
}

.ticket p {
  margin:0;
}

.ticket #description,.mission p {
  font-size:16px;
  line-height:1.36;
}

.mission {
  border-top:1px dashed #a28659;
  margin-top:15px;
  padding-top:10px;
}

.mission p {
  font-style:italic;
  margin-top:3px;
}

.ticket a {
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:44px;
  color:#224c42;
  font:bold 13px system-ui;
  text-underline-offset:3px;
}

.panel {
  background:linear-gradient(100deg,#ddbb7b,#f3dfad 45%,#c89f61);
  border-block:2px solid #896633;
  color:#392e21;
  padding:0 16px 14px;
}

.panelhead {
  color:#614726;
  justify-content:center;
  gap:12px;
  padding:7px;
  font-size:9px;
}

.panelhead:before,.panelhead:after {
  content:'';
  flex:1;
  height:1px;
  background:#97784980;
}

.panelhead span {
  font-size:12px;
}

form {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}

label>span {
  display:block;
  font:600 13px/1.3 system-ui;
  margin-bottom:6px;
}

label b {
  color:#764e29;
  font:italic 13px Georgia;
  margin-right:4px;
}

select {
  display:block;
  cursor:pointer;
  width:100%;
  height:44px;
  border-radius:5px;
  color:#302e24;
  border:1px solid #886737;
  box-shadow:0 2px 1px #fff7,inset 0 2px 5px #79573829;
  background:linear-gradient(#f8eed4,#e9d8b5);
  font:16px Georgia;
  padding:0 8px;
}

button:focus-visible,select:focus-visible,a:focus-visible {
  outline:3px solid #0d6dff;
  outline-offset:3px;
}

.gauge {
  height:42px;
  width:70px;
  background:repeating-conic-gradient(from -88deg at 50% 95%,#463e2a 0deg 1deg,transparent 1deg 20deg),#e5c995;
  border:4px double #a17b47;
  border-radius:80px 80px 6px 6px;
  position:relative;
  color:#291f18;
  display:grid;
  place-items:end center;
}

.gauge span {
  background:#eddbad;
  font-size:5px;
  letter-spacing:.08em;
  z-index:1;
}

.gauge i {
  position:absolute;
  bottom:6px;
  left:50%;
  width:2px;
  height:25px;
  background:#8d252c;
  transform-origin:bottom;
  transform:rotate(-42deg);
}

footer {
  max-width:710px;
  margin:16px auto 0;
  text-align:center;
  color:#dcd9c8;
  font:12px/1.5 system-ui;
}

.footmark {
  display:block;
  color:#d7bb81;
  margin-bottom:3px;
}

#reel {
  position:absolute;
  inset:0;
  display:none;
  background-size:100% 100%;
  background-repeat:repeat-y;
}

.busy #reel {
  display:block;
  animation:roll 3.2s .25s cubic-bezier(.15,.56,.25,1) both;
}

@keyframes roll {
  0% {
    background-position:0 0;
    filter:blur(0);
  }
  15% {
    filter:blur(3px);
  }
  80% {
    filter:blur(1px);
  }
  100% {
    background-position:0 4200px;
    filter:blur(0);
  }
}

@media(max-width:690px) {
  main {
    padding:0 13px 20px;
  }
  .mast {
    height:44px;
  }
  .edition {
    font-size:8px;
  }
  .intro {
    padding:18px 0;
  }
  .intro h1 {
    font-size:clamp(35px,7.8vw,52px);
  }
  .intro>p:last-child {
    font-size:15px;
  }
  .machine {
    padding:10px;
  }
  .chamber {
    gap:8px;
    padding:0 8px 9px;
    grid-template-columns:1fr 1fr;
  }
  .window {
    min-height:205px;
  }
  .ticket {
    min-height:210px;
    padding:16px;
  }
  .ticket h2 {
    font-size:31px;
  }
  .ticket #description,.mission p {
    font-size:15px;
  }
  .panel {
    padding:0 11px 10px;
  }
  form {
    gap:8px;
  }
  label>span {
    font-size:12px;
    min-height:32px;
  }
  select {
    font-size:16px;
  }
}

@media(max-width:530px) {
  .edition {
    font-size:7px;
    letter-spacing:.11em;
  }
  .chamber {
    grid-template-columns:1fr;
  }
  .window {
    height:auto;
    aspect-ratio:1.85;
    min-height:0;
  }
  .ticket {
    min-height:0;
    padding:16px 18px;
  }
  .ticket h2 {
    font-size:32px;
    margin:5px 0 7px;
  }
  .ticket h2 br {
    display:none;
  }
  .ticket h2 em:before {
    content:' ';
  }
  .mission {
    margin-top:9px;
    padding-top:6px;
  }
  .ticket a {
    margin-bottom:-7px;
  }
  .panel form {
    grid-template-columns:1fr;
    gap:6px;
  }
  label {
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    align-items:center;
    gap:5px;
  }
  label>span {
    min-height:0;
    margin:0;
  }
  .toprail {
    font-size:7px;
  }
  .mastbrand {
    font-size:14px;
  }
}

@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    animation:none!important;
    transition:none!important;
  }
}

#reel {
  background-image:url('art/reel.webp');
  background-size:100% auto;
}

body {
  min-height:100vh;
}

.machine {
  margin-top:17px;
}

.machine:after {
  content:'';
  position:absolute;
  top:-18px;
  left:50%;
  width:116px;
  height:14px;
  transform:translateX(-50%);
  border:5px solid #71462c;
  border-bottom:0;
  border-radius:17px 17px 0 0;
  box-shadow:inset 0 1px 1px #d2a16b,0 -1px 1px #c29c67;
  pointer-events:none;
}

@media(max-width:390px) {
  .panel label {
    display:block;
  }
  .panel label>span {
    margin:1px 0 4px;
  }
  .panel form {
    gap:8px;
  }
  .mastbrand span {
    margin-right:2px;
  }
}


/* Maker's seal, dial and hand lever share the lower instrument rail. */
.console {
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:12px;
  padding:10px clamp(12px,3vw,34px);
  background:linear-gradient(175deg,#ffffff08,transparent 45%,#06181542);
  border-radius:0 0 9px 9px;
}
.maker {display:flex; align-items:center; gap:13px}
.medal {
  flex:none; padding:4px; border-radius:50%;
  background:linear-gradient(145deg,#ffedb4,#9b7137 37%,#e5c283 57%,#71502b);
  border:1px solid #e0bc7d;
  box-shadow:0 2px 4px #0009, inset 0 0 0 2px #72562e;
}
.medal img {display:block; width:clamp(68px,8vw,94px); height:auto}
.engraving {display:block; font:700 9px/1.5 system-ui,sans-serif; letter-spacing:.16em; color:#debd83}
.maker-copy em {display:block; margin-top:3px; font-size:16px; color:#f2e6ce}
.gauge {width:84px;height:48px;box-shadow:0 2px 3px #0008}
.gauge span {font-size:7px}
.gauge i {height:29px; bottom:8px}
.busy .gauge i {animation:measure 3.45s ease-in-out both}
@keyframes measure {
  0%,8%,100% {transform:rotate(-42deg)}
  28% {transform:rotate(33deg)}
  41% {transform:rotate(18deg)}
  68% {transform:rotate(46deg)}
  88% {transform:rotate(7deg)}
}
.controls {justify-self:end; min-width:0; text-align:right}
#pull {
  display:flex; align-items:center; justify-content:flex-end; width:100%;
  border:0; border-radius:8px; background:transparent;
  color:#fff0d1; font:italic 25px/1.15 Georgia,serif;
  cursor:pointer; padding:0 2px; touch-action:manipulation;
}
.lever-caption {text-align:right; min-width:120px}
.lever-caption .engraving {margin-bottom:4px}
.hardware {width:103px; height:auto; flex:none; filter:drop-shadow(1px 3px 2px #061512)}
.arm {transform-origin:42px 77px; transition:transform .18s ease}
@media(hover:hover) {
  #pull:enabled:not([aria-disabled]):hover .arm {transform:rotate(4deg)}
  #pull:hover #pull-label,.ticket a:hover {text-decoration:underline; text-underline-offset:4px}
}
#pull:enabled:not([aria-disabled]):active .arm {transform:rotate(12deg)}
.busy .arm {animation:engage 1.2s both}
@keyframes engage {
  0% {transform:rotate(0)}
  20% {transform:rotate(9deg)}
  46%,56% {transform:rotate(63deg)}
  83% {transform:rotate(-3deg)}
  100% {transform:rotate(0)}
}
.controls small {display:block; color:#e9dcc0; font:500 11px/1.35 system-ui,sans-serif; letter-spacing:.035em}
.busy .dot {box-shadow:0 0 7px #f9d992}
.arrived .window {animation:seat .75s ease-out}
@keyframes seat {
  from {border-color:#ffdf9c; box-shadow:0 0 9px #f4c16f88}
}
.busy figcaption {color:#f1debb}
#pull:focus-visible {outline:3px solid #f9dba2; outline-offset:2px}
@media(max-width:800px) {
  .maker-copy {display:none}
}
@media(max-width:530px) {
  .console {grid-template-columns:auto minmax(0,1fr); gap:5px 12px; padding:10px 12px}
  .gauge {grid-area:2 / 1; width:65px; height:36px; justify-self:center}
  .gauge i {height:20px}
  .gauge span {font-size:5.5px}
  .controls {grid-area:1 / 2 / 3; width:100%; text-align:center}
  #pull {justify-content:center; font-size:21px}
  .hardware {width:clamp(67px,19vw,95px)}
  .lever-caption {min-width:0}
  .engraving {font-size:8px; letter-spacing:.1em}
  .medal img {width:59px}
}