/*
* Reader marketing specimen. This is NOT the private reader application.
* The complete reader remains under ../reader and is authorization-controlled.
*/
.reader-machine {
  background:#171a1a;
  min-width:0;
  border:13px solid #303332;
  box-shadow:0 40px 140px rgba(0,0,0,.5),0 0 0 1px rgba(240,244,234,.16);
  transform:perspective(1100px) rotateY(-3deg) rotateX(1deg);
  transition:transform 900ms var(--ease-film);
  max-width:700px;
  margin:auto
}
.reader-machine:hover {
  transform:perspective(1100px) rotateY(0deg) rotateX(0deg)
}
.reader-machine__bezel {
  height:44px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 19px;
  font-family:var(--font-mono);
  font-size:0.875rem;
  letter-spacing:.17em;
  color:#a0aba7;
  background:#151a1b
}
.reader-machine__signal {
  display:flex;
  gap:10px;
  align-items:center
}
.reader-machine__signal i {
  width:5px;
  height:5px;
  background:#b8c6ae;
  border-radius:50%
}
.reader-machine__tabs {
  height:54px;
  display:flex;
  align-items:center;
  gap:15px;
  padding:0 21px;
  background:#222828;
  border-top:1px solid #343b3a
}
.reader-machine__tabs button {
  font-family:var(--font-mono);
  font-size:0.875rem;
  letter-spacing:.12em;
  color:#9da8a4;
  padding:7px 12px;
  border:1px solid transparent
}
.reader-machine__tabs button:hover {
  border-color:rgba(231,220,199,.32)
}
.reader-machine__tabs button.active {
  color:var(--warm-paper);
  background:#35342e;
  border-color:rgba(231,220,199,.25)
}
.reader-machine__page {
  position:relative;
  background:#e7dcc7;
  color:#2b2c2a;
  min-height:540px;
  transition:background 500ms,color 500ms;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:center
}
.reader-machine__scene {
  height:165px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(145deg,rgba(74,77,69,.56),rgba(17,23,22,.8)),url('/assets/receipt-plate.webp') center 34%/cover;
  transition:height 600ms,opacity 400ms
}
.reader-machine__scene::after {
  content:'';
  position:absolute;
  inset:0;
  border-bottom:3px solid rgba(156,51,54,.7);
  box-shadow:inset 0 -40px 55px rgba(11,15,16,.42)
}
.reader-machine__stamp {
  color:rgba(172,55,58,.7);
  font-family:var(--font-display);
  font-size:5.3125rem;
  font-weight:800;
  transform:rotate(-7deg);
  border:6px double rgba(176,61,65,.61);
  line-height:1.1;
  padding:0 15px
}
.reader-machine__rule {
  position:absolute;
  left:20px;
  bottom:20px;
  height:1px;
  width:35%;
  background:var(--warm-paper);
  opacity:.4
}
.reader-machine__text {
  padding:clamp(23px,4vw,60px);
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:17px
}
.reader-machine__text .micro {
  color:#7a7770;
  font-size:0.875rem
}
.reader-machine__text h3 {
  font-family:var(--font-editorial);
  font-size:clamp(1.75rem,2.8vw,2.9375rem);
  font-weight:400;
  line-height:1.15;
  color:#292929;
  max-width:500px
}
.reader-machine__text>p:not(.reader-machine__attribution) {
  font-family:var(--font-editorial);
  font-size:var(--sample-font-size,1.1875rem);
  line-height:1.7;
  max-width:49ch
}
.reader-machine__attribution {
  font-size:0.875rem;
  line-height:1.7;
  color:#6a6860;
  max-width:62ch
}
.reader-machine__footer {
  height:54px;
  background:#171d1d;
  border-top:1px solid #353b3b;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:17px;
  padding:0 20px;
  font-family:var(--font-mono);
  font-size:0.875rem;
  letter-spacing:.11em;
  color:#acb7b0
}
.reader-machine__footer span:first-child {
  margin-right:auto
}
.reader-machine__footer button {
  color:var(--warm-paper);
  font-size:0.875rem;
  padding:6px;
  border:1px solid rgba(231,220,199,.2)
}
.reader-machine__page[data-reader-state="classic"] {
  background:#f2ede1;
  color:#242b29
}
.reader-machine__page[data-reader-state="classic"] .reader-machine__scene {
  height:0;
  opacity:0;
  overflow:hidden
}
.reader-machine__page[data-reader-state="classic"] .reader-machine__text {
  padding-block:clamp(40px,5vw,78px)
}
.reader-machine__page[data-reader-state="classic"] .reader-machine__text h3 {
  font-size:clamp(2.1875rem,3.5vw,3.375rem)
}
.reader-machine__page[data-reader-state="classic"] .reader-machine__text .micro {
  color:#80776a
}
.reader-machine__page[data-reader-state="classic"] .reader-machine__text>p:not(.reader-machine__attribution) {
  line-height:1.85
}
.reader-machine__page.is-switching .reader-machine__text {
  animation:page-rise 420ms var(--ease-film) both
}