/* Restored paper fan; typography follows the current readable Barlow system. */
#features .feature-pane h2 {
  font-family: var(--font-display);
  font-size: clamp(36px, 4.2vw, 76px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: 0;
  text-transform: none;
}
.feature-art::before {
  content: "";
  position: absolute;
  inset: 5% -4% 4% -2%;
  border: 1px solid rgb(96 54 12 / .25);
  border-radius: 50%;
  transform: rotate(-22deg) scaleY(.68);
}
.feature-paper,
.feature-leaf {
  position: absolute;
  inset: 7% 10% 4% 29%;
  overflow: hidden;
  border: 1px solid #6a421e;
  border-radius: 4.8%;
  transform-origin: 14% 90%;
}
.feature-leaf {
  padding: 5%;
  color: #f5c48d;
  font: 500 clamp(12px, 4cqw, 22px)/1.2 var(--font-body);
  letter-spacing: .05em;
}
.feature-leaf b { font-weight: 500; }
.feature-leaf::after {
  content: "";
  position: absolute;
  inset: 5%;
  border: 1px solid rgb(255 211 157 / .45);
  border-radius: 3%;
}
.feature-leaf--far { transform: rotate(var(--far-angle, -24deg)); background: #995d29; }
.feature-leaf--near { transform: rotate(var(--near-angle, -11deg)); background: #59351c; }
.feature-paper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 6%;
  padding: 4.8% 4.5%;
  background: #15120e;
  color: #f7e9d9;
  transform: rotate(var(--front-angle, 4deg));
}
.paper-top, .paper-bottom { display: flex; align-items: center; }
.paper-top {
  gap: .55em;
  font: 500 clamp(11px, 3.1cqw, 17px)/1.25 var(--font-body);
  letter-spacing: .05em;
  color: #e8d9c7;
}
.feature-paper strong {
  position: relative;
  z-index: 1;
  display: block;
  margin-top: auto;
  font-family: var(--font-display);
  font-size: 9.5cqw;
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: 0;
  text-transform: uppercase;
}
.paper-bottom {
  flex-wrap: wrap;
  row-gap: 6px;
  position: relative;
  z-index: 1;
  justify-content: space-between;
  gap: 4%;
  padding-top: 1.15em;
  border-top: 1px solid #74563a;
  color: #ffbf76;
  font: 500 clamp(10px, 2.7cqw, 15px)/1.35 var(--font-body);
  letter-spacing: .05em;
}
.paper-glyph {
  display: block;
  width: .98em;
  height: 1.2em;
  border: 1px solid var(--panel-amber);
  border-radius: .16em;
}
.paper-glyph--wiki { box-shadow: -.19em .18em 0 -.03em #15120e, -.19em .18em 0 .035em var(--panel-amber); }
.paper-glyph--clock { width: 1.12em; height: 1.12em; border-radius: 50%; }
.live-dot { width: .6em; height: .6em; border-radius: 50%; background: currentColor; }
.feature-paper::after {
  content: "";
  position: absolute;
  top: 8%;
  right: -43%;
  width: 84%;
  height: 79%;
  background: repeating-radial-gradient(ellipse closest-side, transparent 0 14%, #815731 15% 15.6%, transparent 17% 21%);
  transform: rotate(34deg);
}
.feature-art--memory { --front-angle: -2deg; }
.feature-art--memory .feature-paper { translate: -1% -2%; }
.feature-art--memory { --far-angle: -15deg; --near-angle: -8deg; }
.feature-art--memory .feature-leaf--far { translate: -10% 3%; }
.feature-art--memory .feature-leaf--near { translate: -5% 1%; }
.feature-art--memory .feature-paper::after {
  top: 20%; right: -32%; width: 72%; height: 60%;
  border-radius: 16%;
  background: repeating-linear-gradient(0deg, transparent 0 9%, #745333 10% 10.8%, transparent 12%);
  transform: rotate(-23deg);
}
.feature-art--followup { --front-angle: 7deg; }
.feature-art--followup .feature-paper::after {
  top: 12%; right: -31%; width: 75%; height: 61%;
  background: repeating-radial-gradient(circle closest-side,transparent 0 12%, #8a633c 13% 13.8%,transparent 15% 23%);
  transform: none;
}
.feature-deck {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}
.feature-deck--outgoing {
  z-index: 3;
  pointer-events: none;
}
.feature-paper::before {
  content: "";
  position: absolute;
  inset: -45% -65%;
  pointer-events: none;
  background: linear-gradient(116deg, transparent 35%, rgb(255 207 140 / .05) 43%, rgb(255 223 174 / .24) 50%, rgb(255 202 134 / .07) 57%, transparent 67%);
  opacity: 0;
  transition: opacity .2s;
}
@media (prefers-reduced-motion: no-preference) {
  .feature-deck {
    transform-origin: 57% 58%;
    transform: rotateX(calc(var(--deck-y, 0) * -11deg)) rotateY(calc(var(--deck-x, 0) * 15deg));
  }
  .feature-leaf, .feature-paper, .feature-deck {
    transition: transform .25s cubic-bezier(.21,.67,.24,1);
  }
  .feature-art.is-inspecting .feature-deck,
  .feature-art.is-inspecting :is(.feature-leaf, .feature-paper) {
    transition-duration: .09s;
  }
  .feature-leaf--far { transform: translateZ(-16px) rotate(calc(var(--far-angle, -24deg) - var(--deck-fan, 0) * 7deg + var(--deck-x, 0) * 8deg)); }
  .feature-leaf--near { transform: translateZ(-6px) rotate(calc(var(--near-angle, -11deg) - var(--deck-fan, 0) * 4deg + var(--deck-x, 0) * 4deg)); }
  .feature-paper { transform: translateZ(7px) rotate(calc(var(--front-angle, 4deg) - var(--deck-x, 0) * 5deg)); }
  .feature-art.is-inspecting { --deck-fan: 1; }
  .feature-art.is-inspecting .feature-paper::before {
    opacity: .95;
    transform: translate(calc(var(--deck-x, 0) * 26%), calc(var(--deck-y, 0) * 14%));
    transition: transform .09s ease-out, opacity .2s;
  }
}
@media (min-width: 751px) {
  .feature-pane__copy p { min-height: 6.6em; }
}
@media (max-width: 750px) {
  #features .feature-pane h2 { font-size: clamp(32px, 7.5vw, 50px); }
  .paper-top, .paper-bottom { letter-spacing: 0; }
  .paper-bottom { font-size: clamp(11px, 2.7cqw, 15px); }
}