/* My Story: "Off the clock" pinboard, opened from the My Story book on About. */
.story {
  --st-ink: #13233a;
  --st-ink-2: #2b3a4e;
  --st-mute: #4b5d72;
  --st-paper: #fffdf6;
  --st-hand: 'JuniperBay', cursive;
  --st-display: 'Poppins', 'Poppins Fallback', Helvetica, Arial, sans-serif;
  --st-body: 'NaN SuperX', 'NaN SuperX Fallback', Helvetica, Arial, sans-serif;
  position: fixed;
  inset: 0;
  z-index: 40;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: transparent;
  color: #242424;
  font-family: var(--st-body);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}
.story.on {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.4s ease;
}
.story .mdl-x {
  --mdl-x-z: 41;
  --frame-x: clamp(16px, 1.4vw, 20px);
  --frame-top: clamp(16px, 2vh, 20px);
}
.story .mdl-x.iconbtn {
  position: fixed;
  top: var(--frame-top);
  right: var(--frame-x);
  z-index: 41;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: #242424;
  cursor: pointer;
  width: 44px;
  height: 44px;
  border-radius: 8px;
}
.story .mdl-x.iconbtn svg {
  width: 24px;
  height: 24px;
}
.story:not(.on) .mdl-x {
  opacity: 0;
}

/* Same shroud as the resume: the shelf recedes into the warm blur behind the board. */
html.story-open .mdl-behind {
  opacity: var(--glass-recede, 0.3);
  filter: blur(var(--glass-blur, 18px));
  pointer-events: none;
}

.st-wrap {
  width: min(1216px, 100%);
  margin: 0 auto;
  padding: clamp(96px, 12vh, 137px) clamp(20px, 4vw, 48px) clamp(80px, 12vh, 151px);
  box-sizing: border-box;
}
.st-head,
.st-stage {
  transform: translateY(24px);
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.story.on .st-head,
.story.on .st-stage {
  transform: none;
}

.st-kick {
  margin: 0 0 14px;
  font: 500 15px/23.25px var(--st-body);
  color: #4a4a4a;
}
.st-title {
  margin: 0;
  font: 700 clamp(48px, 8vw, 93.744px)/0.94 var(--st-display);
  letter-spacing: -0.055em;
  color: #242424;
}
.st-sub {
  margin: 10px 0 0;
  max-width: 720px;
  font: 400 17px/26.35px var(--st-body);
  color: #4a4a4a;
}

/* The board keeps its 1120 x 1000 design geometry and is scaled to the column width. */
.st-stage {
  position: relative;
  margin-top: 58.92px;
  height: calc(1000px * var(--st-s, 1));
}
.st-board {
  position: absolute;
  left: 0;
  top: 0;
  width: 1120px;
  height: 1000px;
  box-sizing: border-box;
  border: 16px solid #9a6b3f;
  border-radius: 22px;
  transform: scale(var(--st-s, 1));
  transform-origin: 0 0;
  background:
    radial-gradient(circle 112px at 336px 200px, rgba(255, 236, 200, 0.35), rgba(255, 236, 200, 0) 50%),
    url('/assets/media/story/cork.png') 0 0 / 220px 220px repeat,
    linear-gradient(138.24deg, #d6a56d 0%, #c38d56 100%);
  filter: drop-shadow(0 30px 30px rgba(60, 30, 0, 0.6));
}
.st-board::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 6px;
  box-shadow: inset 0 10px 30px rgba(60, 30, 0, 0.35);
  pointer-events: none;
}
.st-note-hint {
  position: absolute;
  right: 18px;
  bottom: 10px;
  margin: 0;
  font: 400 20px/1 var(--st-hand);
  color: rgba(255, 253, 246, 0.85);
  pointer-events: none;
}

/* Each item sits in its design bounding box; the child carries the tilt. */
.st-it {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.st-it.drag {
  cursor: grabbing;
}
.st-it > * {
  flex: none;
  transform: rotate(var(--r, 0deg));
  transition: transform 0.2s ease;
}
.st-it.drag > * {
  transform: rotate(var(--r, 0deg)) scale(1.03);
}
.st-it img {
  -webkit-user-drag: none;
  pointer-events: none;
}

.st-pin {
  position: absolute;
  top: -9.2px;
  left: calc(50% - 10px);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: radial-gradient(circle 19.1px at 7px 6px, rgba(255, 255, 255, 0.85) 1.9px, var(--pin) 3.35px);
  box-shadow: 3px 6px 5px rgba(40, 20, 0, 0.4);
  z-index: 2;
}
.pin-red { --pin: #e4402a; }
.pin-blue { --pin: #2a7bd1; }
.pin-violet { --pin: #7b5cd6; }
.pin-green { --pin: #2e9e6b; }
.pin-yellow { --pin: #f2b705; }
.pin-crimson { --pin: #d71920; }

/* Polaroid */
.st-pol {
  position: relative;
  box-sizing: border-box;
  width: 165px;
  padding: 9px 9px 52px;
  background: #fff;
  filter: drop-shadow(0 26px 20px rgba(60, 30, 0, 0.55));
}
.st-ph {
  position: relative;
  height: 176px;
  overflow: hidden;
}
.st-ph img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.st-cap {
  position: absolute;
  left: 0;
  right: 0;
  top: 188.2px;
  height: 46px;
  padding: 0 10px;
  display: grid;
  place-items: center;
  margin: 0;
  font: 400 19px/18.05px var(--st-hand);
  color: var(--st-ink-2);
  text-align: center;
  text-wrap: balance;
}
.st-pol.lg {
  width: 250px;
  padding: 12px 12px 54px;
}
.st-pol.lg .st-ph {
  height: 271px;
}
.st-pol.lg .st-cap {
  font-size: 22px;
  line-height: 20.9px;
  top: 287.1px;
}
.st-pol.md {
  width: 175px;
}
.st-pol.md .st-ph {
  height: 188px;
}
.st-pol.md .st-cap {
  top: 200.2px;
}
.st-pol.tall .st-ph {
  height: 188px;
}
.st-ph img.crop-soul {
  left: -37.21%;
  top: 0.54%;
  width: 212.85%;
  height: 100%;
  object-fit: fill;
}
.st-ph img.crop-mino {
  left: 0.79%;
  top: -11.69%;
  width: 100%;
  height: 148.46%;
  object-fit: fill;
}

/* Index card */
.st-card {
  position: relative;
  box-sizing: border-box;
  width: 370px;
  padding: 26px 26px 24px 46px;
  background:
    linear-gradient(90deg, transparent 8.6486%, rgba(228, 64, 42, 0.35) 8.6486%, rgba(228, 64, 42, 0.35) 9.1892%, transparent 9.1892%),
    var(--st-paper);
  filter: drop-shadow(0 24px 17px rgba(60, 30, 0, 0.6));
  color: var(--st-ink);
}
.st-card .st-pin {
  left: 165px;
}
.st-card-k {
  margin: 0;
  font: 700 11px/11px var(--st-display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ff8c70;
}
.st-card-h {
  margin: 4px 0 0;
  max-width: 299px;
  font: 700 26px/27.3px var(--st-display);
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.st-card-s {
  margin: 12px 0 0;
  font: 700 17px/26.35px var(--st-display);
}
.st-card-s + ul {
  margin: 2px 0 0;
}
.st-card ul {
  margin: 0;
  padding: 0 0 0 16px;
  list-style: none;
}
.st-card li {
  position: relative;
  font: 500 14.5px/28px var(--st-body);
  color: var(--st-ink-2);
}
.st-card li::before {
  content: '•';
  position: absolute;
  left: -16px;
}
.st-card ul + .st-card-s {
  margin-top: 10px;
}

/* On repeat */
.st-rep {
  position: relative;
  width: 250px;
  height: 200px;
}
.st-rep-c {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  width: 170px;
  height: 170px;
  box-sizing: border-box;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 20px 26px rgba(60, 30, 0, 0.6);
  color: #fff;
}
.st-rep-c > img:first-child {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.st-rep-c::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(145deg, rgba(250, 45, 72, 0.8) 6.17%, rgba(252, 92, 125, 0.8) 54.38%, rgba(169, 61, 242, 0.8) 93.83%);
}
.st-rep-c > * {
  position: relative;
  z-index: 2;
}
.st-rep-c > img:first-child {
  z-index: 0;
}
.st-rep-i {
  position: absolute;
  left: 16px;
  top: 16px;
}
.st-rep-t {
  margin: 0;
  font: 700 20px/20px var(--st-display);
  letter-spacing: -0.02em;
}
.st-rep-m {
  margin: 4px 0 0;
  font: 500 12px/12px var(--st-body);
  opacity: 0.85;
}
.st-vinyl {
  position: absolute;
  left: 133px;
  top: 63px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: radial-gradient(circle, #222 0 4px, #fc5c7d 4px 19px, #1a1a1d 19.5px 21.2px, transparent 21.8px);
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.45);
}

/* Sticky note */
.st-sticky {
  position: relative;
  box-sizing: border-box;
  width: 180px;
  padding: 20px 18px;
  background: #d9ccff;
  border-radius: 3px 3px 16px 3px;
  filter: drop-shadow(0 20px 15px rgba(60, 30, 0, 0.55));
  color: var(--st-ink);
}
.st-sticky p {
  margin: 0;
  font: 400 17px/26.35px var(--st-body);
}
.st-sticky small {
  display: block;
  margin-top: 10px;
  font: 400 14.167px/21.958px var(--st-body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.6;
}
.st-tape {
  position: absolute;
  left: 52px;
  top: -12px;
  width: 76px;
  height: 22px;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  transform: rotate(-4deg);
}

/* Boarding pass */
.st-pass {
  position: relative;
  display: flex;
  width: 390px;
  height: 173px;
  filter: drop-shadow(0 20px 18px rgba(60, 30, 0, 0.35));
  color: var(--st-ink);
}
.st-pass .st-pin {
  left: 185px;
  top: -8.9px;
}
.st-pass-m {
  flex: 316 0 0;
  min-width: 0;
  background: #fff;
  border-radius: 14px 0 0 14px;
  overflow: hidden;
}
.st-pass-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: #d71920;
  color: #fff;
}
.st-pass-bar span:first-child {
  font: 400 17px/26.35px var(--st-body);
  letter-spacing: 0.01em;
}
.st-pass-bar span:last-child {
  font: 700 10px/10px var(--st-display);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.9;
}
.st-route {
  display: flex;
  align-items: center;
  padding: 12px 16px 6px;
}
.st-route b {
  display: block;
  font: 700 34px/34px var(--st-display);
  letter-spacing: -0.03em;
}
.st-route span {
  display: block;
  font: 500 12px/16.8px var(--st-body);
  color: var(--st-mute);
}
.st-route > div:last-child {
  text-align: right;
}
.st-route-mid {
  flex: 1;
  display: flex;
  justify-content: center;
}
.st-route-mid img {
  width: 22px;
  height: 22px;
  transform: rotate(174deg) scaleY(-1);
}
.st-pax {
  display: flex;
  gap: 18px;
  padding: 6px 16px 14px;
}
.st-pax small {
  display: block;
  padding-bottom: 3px;
  font: 500 9.5px/9.5px var(--st-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--st-mute);
}
.st-pax b {
  font: 700 13px/15.6px var(--st-display);
}
.st-pass-stub {
  flex: none;
  width: 74px;
  box-sizing: border-box;
  padding: 12px 10px;
  display: flex;
  justify-content: center;
  background: #fbf4e8;
  border-left: 2px dashed rgba(19, 35, 58, 0.2);
  border-radius: 0 14px 14px 0;
}
.st-pass-stub span {
  writing-mode: vertical-rl;
  font: 700 9px/10.8px var(--st-display);
  letter-spacing: 0.08em;
  color: #d71920;
}

@media (prefers-reduced-motion: reduce) {
  .story,
  .story.on,
  .st-head,
  .st-stage,
  .st-it > * {
    transition: none;
  }
}